Basic, non-animated version

app/assets/stylesheets/buttons.css

@@ -203,71 +203,3 @@
     margin-top: var(--btn-size);
   }
 }
-
-/* NEW THING
-/* -------------------------------------------------------------------------- */
-
-.expandable-btn {
-  --btn-height: calc(1em + 1lh);
-
-  background: gold;
-  position: relative;
-
-  &[open] {
-    z-index: 1;
-  }
-
-  &::details-content {
-    inline-size: 0;
-    transition: inline-size 1s, content-visibility 1s;
-    transition-behavior: allow-discrete;
-  }
-
-  &:open::details-content {
-    inline-size: auto;
-  }
-}
-
-.expandable-btn__trigger {
-  .icon--caret-down {
-    font-size: 1ch;
-  }
-
-  [open] & {
-    box-shadow: none;
-    position: relative;
-    z-index: 1;
-  }
-}
-
-.expandable-btn__content {
-  --btn-border-radius: calc(var(--btn-height) / 2);
-
-  align-items: stretch;
-  flex-direction: column;
-  gap: 4px;
-  inset: 0 auto auto 0;
-  padding-block-start: var(--btn-height);
-  position: absolute;
-  text-wrap: nowrap;
-  transition: inline-size: 2s;
-
-  .expandable-btn:has(:hover) & {
-    box-shadow: 0 0 0 var(--hover-size) var(--hover-color);
-  }
-}
-
-.expandable-btn__item {
-  --btn-background: var(--color-subtle-light);
-  --btn-border-radius: 0.3em;
-  --btn-border-size: 0;
-  --btn-font-weight: 500;
-  --btn-padding: var(--inline-space-half) var(--inline-space-half) var(--inline-space-half) var(--inline-space);
-  --hover-size: 0;
-  --outline-color: transparent;
-
-  justify-content: start;
-  margin-inline: -1ch;
-  padding-inline: 1ch;
-}
-

app/assets/stylesheets/expander.css

@@ -0,0 +1,60 @@
+.expander {
+  --btn-height: calc(1em + 1lh);
+
+  position: relative;
+
+  &[open] {
+    z-index: 1;
+  }
+}
+
+.expander__trigger {
+  position: relative;
+  z-index: 1;
+
+  .icon--caret-down {
+    font-size: 1ch;
+  }
+
+  [open] & {
+    box-shadow: none;
+  }
+}
+
+.expander__content {
+  --btn-border-radius: calc(var(--btn-height) / 2);
+
+  align-items: stretch;
+  flex-direction: column;
+  gap: 4px;
+  inset: 0 auto auto 0;
+  padding-block-start: var(--btn-height);
+  position: absolute;
+  text-wrap: nowrap;
+
+  .expander:has(:hover) & {
+    box-shadow: 0 0 0 var(--hover-size) var(--hover-color);
+  }
+
+  [open] & {
+    inline-size: auto;
+  }
+}
+
+.expander__item {
+  --btn-background: transparent;
+  --btn-border-radius: 0.3em;
+  --btn-border-size: 0;
+  --btn-font-weight: 500;
+  --btn-padding: var(--inline-space-half) 1ch;
+  --hover-size: 0;
+  --outline-color: transparent;
+
+  margin-inline: -1ch;
+  justify-content: flex-start;
+
+  &:hover,
+  &:focus-visible {
+    background-color: oklch(var(--lch-white) / 10%);
+  }
+}

app/views/bubbles/_pop_toggle.html.erb

@@ -7,19 +7,17 @@
   <% else %>
     <div class="flex-inline center position-relative" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
 
-      <details class="expandable-btn" open>
-        <summary class="btn borderless expandable-btn__trigger">
-          Close As
+      <details class="expander">
+        <summary class="expander__trigger btn borderless">
+          Close as
           <%= icon_tag "caret-down" %>
         </summary>
-        <div class="btn borderless expandable-btn__content">
-          <button class="expandable-btn__item btn">Here's some really wide content</button>
-          <button class="expandable-btn__item btn">Done</button>
-          <button class="expandable-btn__item btn">Not now</button>
+        <div class="expander__content btn borderless">
+          <button class="expander__item btn">Here's</button>
+          <button class="expander__item btn">Here's a longer thing</button>
         </div>
       </details>
 
-
       <button class="btn btn--dialog borderless" data-action="click->dialog#open:stop">
         <span>Close as</span>
         <%= icon_tag "caret-down" %>