Add the slide-out "Customize more" label back to item preview button

I skipped this for a bit because I couldn't think of a simple way to
adapt this behavior to a web component + vanilla CSS setting, but then
I thought of CSS variables, and sat down and cranked this out!

app/assets/javascripts/items/show.js

@@ -81,6 +81,25 @@ class SpeciesFacePickerOptions extends HTMLElement {
     }
 }
 
+class MeasuredContent extends HTMLElement {
+    connectedCallback() {
+        setTimeout(() => this.#measure(), 0);
+    }
+
+    #measure() {
+        // Find our `<measured-container>` parent, and set our natural width
+        // as `var(--natural-width)` in the context of its CSS styles.
+        const container = this.closest("measured-container");
+        if (container == null) {
+            throw new Error(
+                `<measured-content> must be in a <measured-container>`,
+            );
+        }
+        container.style.setProperty("--natural-width", this.offsetWidth + "px");
+    }
+}
+
 customElements.define("species-color-picker", SpeciesColorPicker);
 customElements.define("species-face-picker", SpeciesFacePicker);
 customElements.define("species-face-picker-options", SpeciesFacePickerOptions);
+customElements.define("measured-content", MeasuredContent);

app/assets/stylesheets/items/_show.sass

@@ -55,12 +55,25 @@ body.items-show
       text-decoration: none
 
       background: #EDF2F7
-      padding: .75em
+      padding-inline: .75em
       border-radius: .375em
       min-height: 2rem
       min-width: 2rem
       box-sizing: border-box
 
+      .customize-more-label
+        width: 0
+        overflow: hidden
+        transition: width .25s
+        white-space: nowrap
+
+        measured-content
+          padding-right: .5em
+
+      &:hover, &:focus
+        .customize-more-label
+          width: var(--natural-width)
+
   outfit-viewer
     display: block
     position: relative

app/views/items/show.html.haml

@@ -22,6 +22,9 @@
     = link_to wardrobe_path(params: @preview_outfit.wardrobe_params),
               class: "customize-more", target: "_blank",
               title: "Customize more", "aria-label": "Customize more" do
+      %measured-container.customize-more-label
+        %measured-content
+          Customize more
       = edit_icon
 
   %species-color-picker