diff --git a/core/themes/claro/claro.theme b/core/themes/claro/claro.theme
index a4be416f7de29f49b4e308bae8f2af939a7c5d0b..b46a5a6d603562a2da4c3528a160096b3eedf1c7 100644
--- a/core/themes/claro/claro.theme
+++ b/core/themes/claro/claro.theme
@@ -39,6 +39,28 @@ function claro_theme_suggestions_details_alter(&$suggestions, $variables) {
   }
 }
 
+/**
+ * Implements hook_page_attachments_alter().
+ */
+function claro_page_attachments_alter(array &$attachments) {
+  $theme_path = \Drupal::request()->getBasePath() . '/' . \Drupal::service('extension.list.theme')->getPath('claro');
+  $query_string = \Drupal::state()->get('system.css_js_query_string') ?: '0';
+
+  // Attach non-JavaScript specific CSS via a noscript tag to prevent unwanted
+  // layout shifts.
+  $attachments['#attached']['html_head'][] = [
+    [
+      '#tag' => 'link',
+      '#noscript' => TRUE,
+      '#attributes' => [
+        'rel' => 'stylesheet',
+        'href' => $theme_path . '/css/components/dropbutton-noscript.css?' . $query_string,
+      ],
+    ],
+    'dropbutton_noscript',
+  ];
+}
+
 /**
  * Implements hook_preprocess_HOOK() for menu-local-tasks templates.
  *
diff --git a/core/themes/claro/css/components/dropbutton-noscript.css b/core/themes/claro/css/components/dropbutton-noscript.css
new file mode 100644
index 0000000000000000000000000000000000000000..39a711ea08d5ba9da719fbb347e3312fa998023d
--- /dev/null
+++ b/core/themes/claro/css/components/dropbutton-noscript.css
@@ -0,0 +1,18 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+/**
+ * @file
+ * Dropbutton styles for when JavaScript is not loaded.
+ */
+html .dropbutton--small,
+html .dropbutton--extrasmall,
+html .dropbutton {
+  height: auto;
+}
+html .dropbutton-wrapper:not(.open) .dropbutton__item:first-of-type ~ .dropbutton__item {
+  visibility: visible;
+}
diff --git a/core/themes/claro/css/components/dropbutton-noscript.pcss.css b/core/themes/claro/css/components/dropbutton-noscript.pcss.css
new file mode 100644
index 0000000000000000000000000000000000000000..862635f63c17f2c65a4f1fc65f0b8beb09e324f2
--- /dev/null
+++ b/core/themes/claro/css/components/dropbutton-noscript.pcss.css
@@ -0,0 +1,15 @@
+/**
+ * @file
+ * Dropbutton styles for when JavaScript is not loaded.
+ */
+html {
+  .dropbutton--small,
+  .dropbutton--extrasmall,
+  .dropbutton {
+    height: auto;
+  }
+
+  .dropbutton-wrapper:not(.open) .dropbutton__item:first-of-type~.dropbutton__item {
+    visibility: visible;
+  }
+}
diff --git a/core/themes/claro/css/components/dropbutton.css b/core/themes/claro/css/components/dropbutton.css
index d17ed2cf9252aef772ce52ead83e188184c58961..b6f51aa7430b10adbce1fff60aa9f987db14f979 100644
--- a/core/themes/claro/css/components/dropbutton.css
+++ b/core/themes/claro/css/components/dropbutton.css
@@ -77,27 +77,27 @@
   margin: 0;
 }
 
-.js .dropbutton {
+.dropbutton {
   min-width: 6rem; /* Help mitigate long dropbutton text from obscuring other dropbuttons. */
   height: var(--dropbutton-toggle-size);
 }
 
-.js .dropbutton-widget {
+.dropbutton-widget {
   border-radius: var(--button-border-radius-size);
   background-color: var(--button-bg-color);
 }
 
-.js .dropbutton-action {
+.dropbutton-action {
   border-inline-end: var(--dropbutton-border-size) solid white;
 }
 
 /* Variants. */
 
-.js.no-touchevents .dropbutton--small {
+.dropbutton--small {
   height: var(--dropbutton-small-toggle-size);
 }
 
-.js.no-touchevents .dropbutton--extrasmall {
+.dropbutton--extrasmall {
   height: var(--dropbutton-extrasmall-toggle-size);
 }
 
@@ -105,31 +105,31 @@
  * First dropbutton list item.
  */
 
-.js .dropbutton--multiple .dropbutton__item:first-of-type {
+.dropbutton--multiple .dropbutton__item:first-of-type {
   margin-right: calc(var(--dropbutton-toggle-size) + var(--dropbutton-toggle-size-spacing)); /* LTR */
 }
 
-[dir="rtl"].js .dropbutton--multiple .dropbutton__item:first-of-type {
+[dir="rtl"] .dropbutton--multiple .dropbutton__item:first-of-type {
   margin-right: 0;
   margin-left: calc(var(--dropbutton-toggle-size) + var(--dropbutton-toggle-size-spacing));
 }
 
 /* First dropbutton list item variants */
 
-.js.no-touchevents .dropbutton--multiple.dropbutton--small .dropbutton__item:first-of-type {
+.no-touchevents .dropbutton--multiple.dropbutton--small .dropbutton__item:first-of-type {
   margin-right: calc(var(--dropbutton-small-toggle-size) + var(--dropbutton-toggle-size-spacing)); /* LTR */
 }
 
-[dir="rtl"].js.no-touchevents .dropbutton--multiple.dropbutton--small .dropbutton__item:first-of-type {
+[dir="rtl"].no-touchevents .dropbutton--multiple.dropbutton--small .dropbutton__item:first-of-type {
   margin-right: 0;
   margin-left: calc(var(--dropbutton-small-toggle-size) + var(--dropbutton-toggle-size-spacing));
 }
 
-.js.no-touchevents .dropbutton--multiple.dropbutton--extrasmall .dropbutton__item:first-of-type {
+.no-touchevents .dropbutton--multiple.dropbutton--extrasmall .dropbutton__item:first-of-type {
   margin-right: calc(var(--dropbutton-extrasmall-toggle-size) + var(--dropbutton-toggle-size-spacing)); /* LTR */
 }
 
-[dir="rtl"].js.no-touchevents .dropbutton--multiple.dropbutton--extrasmall .dropbutton__item:first-of-type {
+[dir="rtl"].no-touchevents .dropbutton--multiple.dropbutton--extrasmall .dropbutton__item:first-of-type {
   margin-right: 0;
   margin-left: calc(var(--dropbutton-extrasmall-toggle-size) + var(--dropbutton-toggle-size-spacing));
 }
@@ -336,11 +336,11 @@
   z-index: 2;
 }
 
-.js .dropbutton--multiple .dropbutton__item:first-of-type > * {
+.dropbutton--multiple .dropbutton__item:first-of-type > * {
   border-radius: var(--button-border-radius-size) 0 0 var(--button-border-radius-size); /* LTR */
 }
 
-[dir="rtl"].js .dropbutton--multiple .dropbutton__item:first-of-type > * {
+[dir="rtl"] .dropbutton--multiple .dropbutton__item:first-of-type > * {
   border-radius: 0 var(--button-border-radius-size) var(--button-border-radius-size) 0;
 }
 
@@ -358,7 +358,7 @@
   text-align: right;
 }
 
-.js .dropbutton-wrapper:not(.open) .dropbutton__item:first-of-type ~ .dropbutton__item {
+.dropbutton-wrapper:not(.open) .dropbutton__item:first-of-type ~ .dropbutton__item {
   visibility: hidden;
 }
 
diff --git a/core/themes/claro/css/components/dropbutton.pcss.css b/core/themes/claro/css/components/dropbutton.pcss.css
index babd74595d07e7421cf34c1223ee535853251774..f719998be20675dd34a9ea7843463cb4c6274f27 100644
--- a/core/themes/claro/css/components/dropbutton.pcss.css
+++ b/core/themes/claro/css/components/dropbutton.pcss.css
@@ -67,53 +67,53 @@
   margin: 0;
 }
 
-.js .dropbutton {
+.dropbutton {
   min-width: 6rem; /* Help mitigate long dropbutton text from obscuring other dropbuttons. */
   height: var(--dropbutton-toggle-size);
 }
 
-.js .dropbutton-widget {
+.dropbutton-widget {
   border-radius: var(--button-border-radius-size);
   background-color: var(--button-bg-color);
 }
 
-.js .dropbutton-action {
+.dropbutton-action {
   border-inline-end: var(--dropbutton-border-size) solid white;
 }
 
 /* Variants. */
-.js.no-touchevents .dropbutton--small {
+.dropbutton--small {
   height: var(--dropbutton-small-toggle-size);
 }
 
-.js.no-touchevents .dropbutton--extrasmall {
+.dropbutton--extrasmall {
   height: var(--dropbutton-extrasmall-toggle-size);
 }
 
 /**
  * First dropbutton list item.
  */
-.js .dropbutton--multiple .dropbutton__item:first-of-type {
+.dropbutton--multiple .dropbutton__item:first-of-type {
   margin-right: calc(var(--dropbutton-toggle-size) + var(--dropbutton-toggle-size-spacing)); /* LTR */
 }
-[dir="rtl"].js .dropbutton--multiple .dropbutton__item:first-of-type {
+[dir="rtl"] .dropbutton--multiple .dropbutton__item:first-of-type {
   margin-right: 0;
   margin-left: calc(var(--dropbutton-toggle-size) + var(--dropbutton-toggle-size-spacing));
 }
 
 /* First dropbutton list item variants */
-.js.no-touchevents .dropbutton--multiple.dropbutton--small .dropbutton__item:first-of-type {
+.no-touchevents .dropbutton--multiple.dropbutton--small .dropbutton__item:first-of-type {
   margin-right: calc(var(--dropbutton-small-toggle-size) + var(--dropbutton-toggle-size-spacing)); /* LTR */
 }
-[dir="rtl"].js.no-touchevents .dropbutton--multiple.dropbutton--small .dropbutton__item:first-of-type {
+[dir="rtl"].no-touchevents .dropbutton--multiple.dropbutton--small .dropbutton__item:first-of-type {
   margin-right: 0;
   margin-left: calc(var(--dropbutton-small-toggle-size) + var(--dropbutton-toggle-size-spacing));
 }
 
-.js.no-touchevents .dropbutton--multiple.dropbutton--extrasmall .dropbutton__item:first-of-type {
+.no-touchevents .dropbutton--multiple.dropbutton--extrasmall .dropbutton__item:first-of-type {
   margin-right: calc(var(--dropbutton-extrasmall-toggle-size) + var(--dropbutton-toggle-size-spacing)); /* LTR */
 }
-[dir="rtl"].js.no-touchevents .dropbutton--multiple.dropbutton--extrasmall .dropbutton__item:first-of-type {
+[dir="rtl"].no-touchevents .dropbutton--multiple.dropbutton--extrasmall .dropbutton__item:first-of-type {
   margin-right: 0;
   margin-left: calc(var(--dropbutton-extrasmall-toggle-size) + var(--dropbutton-toggle-size-spacing));
 }
@@ -300,10 +300,10 @@
   z-index: 2;
 }
 
-.js .dropbutton--multiple .dropbutton__item:first-of-type > * {
+.dropbutton--multiple .dropbutton__item:first-of-type > * {
   border-radius: var(--button-border-radius-size) 0 0 var(--button-border-radius-size); /* LTR */
 }
-[dir="rtl"].js .dropbutton--multiple .dropbutton__item:first-of-type > * {
+[dir="rtl"] .dropbutton--multiple .dropbutton__item:first-of-type > * {
   border-radius: 0 var(--button-border-radius-size) var(--button-border-radius-size) 0;
 }
 
@@ -320,7 +320,7 @@
   text-align: right;
 }
 
-.js .dropbutton-wrapper:not(.open) .dropbutton__item:first-of-type ~ .dropbutton__item {
+.dropbutton-wrapper:not(.open) .dropbutton__item:first-of-type ~ .dropbutton__item {
   visibility: hidden;
 }