studio-engine 0.128.0 → 0.130.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3abb879eda738b9ebe2d7ba3aa0c7400e4e335eccdf5775c654b8810db8f96e2
-  data.tar.gz: 440cde0469a8d8d8905a7250da40fbd2576e3f9b5a6b9c2a68036368486759cc
+  metadata.gz: 00ce81b9c4f82a619f86521fd4495d07e8a2a81f9f1eb5f15963e26f0cb038aa
+  data.tar.gz: ed8a7169b6322c577ca796c974f4561bd3c4a2e29fa7da917cd28aec84f401b5
 SHA512:
-  metadata.gz: e73f00423880d25f49324ed5ef4c3c152caf27f7bc144815ea4928242933e675c1e879393bdd2777d40659ddb472ddae8c23eb3ad9f0ae2f3f9e25e04e443033
-  data.tar.gz: '09e30076328185194bbd9773a059c1ee3a984e60e2376ff08aaf0f785ee3888c85e056dbffc38c69fa3477d03adff476beb7832bb60c974d2dc5f010a42fbc5d'
+  metadata.gz: 4f0f640580ed2f77fdc6093e9a90f2edfc12bf2ba6925fc8ad6b24cd5587668c84d465090be866dcf19c5f536cb38ccbff123f078a52dbee52f8b2f7d73d302d
+  data.tar.gz: c02e3417b8f8eb1bb4b6b38706ddf79561959b61cacb7317a9465825c1724097c3b77fc5c4cf131f0011dff852b0c430c90f660277fd0067100a611cec10ec55

data/CHANGELOG.md

@@ -4,6 +4,92 @@ The format is [Keep a Changelog](https://keepachangelog.com/en/1.1.0/). This pro
 
 ## Unreleased
 
+## 0.130.0 — 2026-11-05
+
+### Added
+
+- **Section headers that stack under the page header: `studio/_section_header`.** Render it
+  as the first child of a `<section>`. The title sticks directly under the page row, takes a
+  bar (solid in light and dark, glass under glass), and the next section's header takes its
+  place, by CSS sticky and no scroll script. `/admin/style` uses it on every section,
+  including a host's own. It joins the pinned stack as one layer, `section`: a new
+  `data-pin-section`, and `--pin-section-top`, `-h` and `-bottom`. Only the stuck header
+  counts, so `--pin-stack-bottom` and a table's sticky header sit under it. New classes:
+  `section-header`, `section-target` and `section-subtarget`, which
+  replace a hand-written `scroll-margin-top`. The publisher now reads the layers once more after
+  a settle and after a layer's top moves, so a layer under a layer does not keep a stale line.
+  Detail: `docs/PAGE_HEADER.md`.
+### Changed
+
+- **A lit button's gradient centers on its own colour.** Every lit variant steps lightness 0.06 up
+  and 0.06 down from its fill, with chroma and hue unchanged, so the painted midpoint is the token.
+  The lit primary now centers on `--color-cta`, the violet a `text-primary` word paints, instead of
+  sitting darker and more saturated. White on the default primary is about 3.1:1 at the midpoint;
+  Alex McRitchie accepted that so the button and the brand word read as one purple. The semantic
+  fills still hold 4.5:1 there. `/lab/hero_button` shows a `text-primary` word beside the button.
+
+- **Tricks starts with the buttons, then what you can add to them.** A new Button tricks group
+  sits directly under Buttons: rotating edge glow, border glow, sheen, pulse, fizz, hold to confirm,
+  confetti burst and cannons. Each sits on a real `.btn` or fires from one, with its code to copy.
+  The other groups keep their order, with one short sentence each at most.
+- **`.studio-team-glow` is now `.edge-rotate-glow`, with `--edge-rotate-glow-*` knobs.** The old class
+  and knobs are a deprecated alias and paint the same, so no host has to change.
+- **Fizz works around any button.** `render layout: "studio/fizz", locals: { seed: "save" }` wraps a
+  button in a `.fizz-stack`. The hold button's markup and selectors are unchanged. The only tie was
+  the `.hold-stack` selector.
+- **Trial: a dark, full-size lit button's fill drops from 0.94 to 0.85 alpha** (`--lit-fill-alpha`).
+
+### Fixed
+
+- **The button tricks keep a lit button lit.** A lit button's `::after` closed the hole in the glow's
+  bloom, which washed its whole face. The sheen clipped the top highlight, and the pulse dropped the
+  lit shadow. `.studio-border-glow` on a button no longer ends its halo on a hard box edge.
+
+## 0.129.0 — 2026-11-05
+
+### Changed
+
+- **The `/admin/style` copy is trimmed.** Each section keeps at most one short sentence of intro,
+  and the notes under specimens are cut the same way. Controls, specimens and error messages are
+  unchanged. The hidden copy-to-agent references on the modal cards are unchanged too. The Tricks
+  section is not part of this trim.
+
+- **A bad or missing CSRF token on a JSON or `Accept: */*` request is now a 422 with no ErrorLog
+  row, on every controller using `Studio::ErrorHandling`.** The catch-all answered JSON 500 and
+  wrote a row. It now answers `422 {error, reason: "invalid_token"}` in every environment, and a
+  test on such a route that asserted `assert_raises(ActionController::InvalidAuthenticityToken)`
+  now asserts the 422. An HTML form is unchanged: the redirect home with its alert, and the row.
+
+### Fixed
+
+- **A theme toggle is one crossfade.** `$store.theme.toggle()` added `theme-transition` for 300ms, and
+  in a host with that rule about 210 elements ran their own 200ms transition while gradients and
+  the page background snapped. It now flips the whole page in one 160ms view transition with no
+  movement. No element runs its own transition, and no named element keeps its own picture. A
+  browser with no view transitions, a reduced-motion reader, and a toggle during a Turbo visit
+  flip at once, and the visit's motion plays on. Under the crossfade the class, the store value
+  and localStorage change together in the transition's callback, so all three still read the old
+  theme for up to a frame after the call: a caller that reads them in the same tick must wait.
+  `toggleTheme` and `storedTheme` are no longer exported, and the store starts from the root's
+  class. `$store.theme.set("dark" | "light")` is the one setter, and `toggle()` stays. The
+  `theme-transition` rule in a host is now dead. Measured on the hub's `/deployments`, signed in,
+  2100 elements, Metal GPU: the largest step between frames fell from 35-65% of the brightness
+  change to 11%, and element transitions started by one toggle from about 1170 to 0.
+  Chromium sends every pointer hit to the root during a view transition, for about 160ms. A pointer
+  that stops in that time can show no `:hover` until it moves again, and a second click on the toggle
+  is dropped. A host spec that toggles and then hovers must wait for `data-theme-flip` to clear.
+
+- **The agent chat at phone width.** Measured at 390x844 and 320x568, light and dark:
+  - No blank tail. A turn's `sr-only` name escaped the log, which had no positioned ancestor,
+    and stretched the document to 1933px where `main` ended at 977px. The log is now
+    `position: relative`.
+  - The newest turn shows above the composer, on load and after a new turn. The page scrolls
+    the thread's end clear of the stuck composer; not for an empty thread, not for a reader
+    scrolled up in the log or the page, and not during a hold, when it waits for the button
+    to be let go.
+  - A stale page says so. A refused token reads "This page has expired" with a reload hint on
+    the voice line and the typed error, and a refused send keeps its words in the box.
+
 ## 0.128.0 — 2026-11-05
 
 ### Fixed

data/README.md

@@ -294,6 +294,11 @@ An admin page's title: a plain header at rest, a bar once stuck under the navbar
 in the pinned stack so a table's sticky header sits under it
 ([`docs/PAGE_HEADER.md`](docs/PAGE_HEADER.md)).
 
+### The section header — `studio/_section_header`
+
+A section's title that sticks under the page row until the next section's takes its place,
+with a bar once stuck ([`docs/PAGE_HEADER.md`](docs/PAGE_HEADER.md#the-section-header)).
+
 ```erb
 <%= render "studio/page_header", title: "Models", meta: "v1.2.3", label: "Models",
       tabs: [{ label: "Users", href: users_path, current: "page" }, { label: "Teams", href: teams_path }] %>

data/app/assets/tailwind/studio_engine/engine-motion.css

@@ -19,6 +19,7 @@
   Effect:
     .text-gradient        gradient-clipped text fill          (authored fresh)
     .studio-glow          soft themed glow halo               (authored fresh)
+    .edge-rotate-glow     a glow rotating around the edge     (ported, TM)
     .surface-glass        frosted translucent glass panel     (authored fresh)
     .conic-surface        slow rotating conic-gradient wash   (authored fresh)
     .pulse-cta            attention pulse/glow for a CTA       (ported, TM)
@@ -26,6 +27,7 @@
   Action:
     .hold-btn             press-and-hold confirm button       (ported, TM)
     .hold-stack/.fizz-bit the carbonation behind it           (ported, TM)
+    .fizz-stack           the same bubbles around any button  (studio/_fizz)
     .email-reject         email field rejection shake + fade  (extracted, TM)
 
   Loader:
@@ -167,6 +169,16 @@
   transform: translateZ(0);
 }
 
+/* On a button the halo needs room, as .edge-rotate-glow's bloom does. Mask applies
+   after filter, so the gradient stops at the padding box and the transparent border
+   is empty room for the blur to fade into. Without it the halo ends on a hard box. */
+.btn.studio-border-glow::after {
+  inset: -46px;
+  padding: 10px;
+  border: 36px solid transparent;
+  background-clip: padding-box;
+}
+
 @keyframes studioBorderGlowSteam {
   0% {
     background-position: var(--studio-border-glow-offset, 0%) 0;
@@ -521,37 +533,32 @@
 }
 
 /* =============================================================================
-   9b. studio-team-glow — rotating "selected card" ring glow, one or two colors
-   Ported from turf-monster's per-team selected-card glow (.holo-border-glow):
-   a conic-gradient ring rotates around the element's edge, with a blurred bloom
-   twin behind it. DISTINCT from .studio-border-glow (an animated RAINBOW border)
-   and .studio-glow (a static soft box-shadow halo) — this is the "this card is
-   selected / live" ring.
-
-   The color is a CSS var (default the CTA role, so purple on McRitchie Studio),
-   just like TM's per-team --glow-c. TWO opposed wedges travel the edge, and they
-   can carry two colors: --studio-team-glow-color-b defaults to the first, so a
-   one-color caller sees no change, and a caller with a pair to show (a Pokémon's
-   two types) gets one per wedge. The wedges are swept by animating a registered
-}
-   @property angle (rotating the GRADIENT, not the element — so no oversized-child
-@layer components {
-   clipping trick is needed). Opacity is a var (--studio-team-glow-opacity) with a
-   transition, so a consumer can fade the glow in/out (the living style guide
-   slides it between step cards as a modal's step machine advances).
-
-   THE HOST MAY CARRY ITS OWN BACKGROUND — the ring cuts the host's box out of
-   both wedge layers, so only the band around the edge paints. That hole is what
-   makes the primitive work in the two shapes its consumers need:
+   9b. edge-rotate-glow — a glow that rotates around an element's edge
+   Ported from turf-monster's selected-card glow (.holo-border-glow): a conic
+   gradient rotates around the element's edge, with a blurred bloom twin behind it.
+   DISTINCT from .studio-border-glow (an animated RAINBOW border) and .studio-glow
+   (a static soft box-shadow halo).
+
+   The color is a CSS var, default the CTA role. TWO opposed wedges travel the
+   edge: --edge-rotate-glow-color-b defaults to the first color, so a one-color
+   caller sees one color and a caller with a pair gets one per wedge. The wedges
+   are swept by animating a registered @property angle (rotating the GRADIENT, not
+   the element, so no oversized-child clipping trick is needed). Opacity is a var
+   with a transition, so a caller can fade the glow in and out (the living style
+   guide slides it between step cards as a modal's step machine advances).
+
+   THE HOST MAY CARRY ITS OWN BACKGROUND. The ring cuts the host's box out of both
+   wedge layers, so only the band around the edge paints. That hole is what makes
+   the primitive work in the two shapes its consumers need:
 
      · the WRAPPER shape (TM's holo-wrap / holo-card split) — a bare host with an
        opaque child in front. The engine's style/_modal_specimen and the hub's
        release-phase-meter both ship this. Unchanged by the hole: the child was
        already covering that interior.
-     · the CARD shape — the host IS the opaque surface. This is what a live board
-       card needs, because it cannot take a wrapper at all: Turbo targets the card
-       element for both replace and remove, so a wrapper is orphaned every time a
-       card leaves the board.
+     · the CARD shape — the host IS the opaque surface, as a .btn is. A live board
+       card needs this too, because it cannot take a wrapper at all: Turbo targets
+       the card element for both replace and remove, so a wrapper is orphaned every
+       time a card leaves the board.
 
    Without the hole the card shape is impossible, and not for a tunable reason:
    both layers are pseudo-elements at z-index -1 / -2, and CSS paints an element's
@@ -563,59 +570,87 @@
    The host must still NOT be clipped by an overflow-hidden ancestor near its
    border, or the ring is cut off with it.
 
-   Usage:  <div class="studio-team-glow rounded-xl bg-surface p-5">Selected</div>
+   Usage:  <button class="btn btn-primary edge-rotate-glow">Save</button>
            wrapper shape, when the face is its own element:
-             <div class="studio-team-glow rounded-xl">
+             <div class="edge-rotate-glow rounded-xl">
                <div class="rounded-xl bg-surface p-5">Selected</div>
              </div>
-           red glow:   style="--studio-team-glow-color: #E11D48"
-           two types:  style="--studio-team-glow-color: #F08030;
-                              --studio-team-glow-color-b: #6890F0"
-   Tune:   --studio-team-glow-color / -color-b / -opacity / -speed / -thickness /
+           one color:  style="--edge-rotate-glow-color: #E11D48"
+           two colors: style="--edge-rotate-glow-color: #F08030;
+                              --edge-rotate-glow-color-b: #6890F0"
+   Tune:   --edge-rotate-glow-color / -color-b / -opacity / -speed / -thickness /
            -bloom
+
+   DEPRECATED ALIAS: .studio-team-glow and its --studio-team-glow-* knobs. Every
+   old name keeps working, because hub and Turf views, scripts and e2e use them on
+   their main branches. Remove the alias only after both have moved. An old knob
+   on the new class also still applies; a new knob on the old class is not
+   supported, so move the class and its knobs together.
    ========================================================================== */
 }
-@property --studio-team-glow-angle {
+@property --edge-rotate-glow-angle {
   syntax: "<angle>";
   inherits: false;
   initial-value: 0deg;
 }
 @layer components {
+.edge-rotate-glow {
+  /* Each default reads the old knob first, so a host that moves the class name
+     and leaves an old knob in its inline style keeps its value. */
+  --edge-rotate-glow-color: var(--studio-team-glow-color, var(--color-cta));
+  /* The SECOND wedge's color. Defaults to the first. Resolved on this element, so
+     an inline --edge-rotate-glow-color override feeds this default too. */
+  --edge-rotate-glow-color-b: var(--studio-team-glow-color-b, var(--edge-rotate-glow-color));
+  --edge-rotate-glow-opacity: var(--studio-team-glow-opacity, 1);
+  --edge-rotate-glow-speed: var(--studio-team-glow-speed, 4s);
+  --edge-rotate-glow-thickness: var(--studio-team-glow-thickness, 4px);
+  --edge-rotate-glow-bloom: var(--studio-team-glow-bloom, 10px);
+}
+/* DEPRECATED ALIAS. See the note above. The old knobs keep their old defaults on
+   the old class, at the old specificity, so a consumer's own rule or inline style
+   wins exactly as it did; the new knobs then read them. */
 .studio-team-glow {
   --studio-team-glow-color: var(--color-cta);
-  /* The SECOND wedge's color. Defaults to the first, so a one-color caller sees
-     no change; a caller with two colors to show (a Pokémon's two types, a pair of
-     brand colors) gets one per wedge. Resolved on this element, so an inline
-     --studio-team-glow-color override feeds this default too. */
   --studio-team-glow-color-b: var(--studio-team-glow-color);
   --studio-team-glow-opacity: 1;
   --studio-team-glow-speed: 4s;
   --studio-team-glow-thickness: 4px;
   --studio-team-glow-bloom: 10px;
+  --edge-rotate-glow-color: var(--studio-team-glow-color);
+  --edge-rotate-glow-color-b: var(--studio-team-glow-color-b);
+  --edge-rotate-glow-opacity: var(--studio-team-glow-opacity);
+  --edge-rotate-glow-speed: var(--studio-team-glow-speed);
+  --edge-rotate-glow-thickness: var(--studio-team-glow-thickness);
+  --edge-rotate-glow-bloom: var(--studio-team-glow-bloom);
+}
+.edge-rotate-glow,
+.studio-team-glow {
   position: relative;
   isolation: isolate;
 }
+.edge-rotate-glow::before,
+.edge-rotate-glow::after,
 .studio-team-glow::before,
 .studio-team-glow::after {
   content: "";
   position: absolute;
-  inset: calc(-1 * var(--studio-team-glow-thickness));
+  inset: calc(-1 * var(--edge-rotate-glow-thickness));
   border-radius: inherit;
   z-index: -1;
   pointer-events: none;
-  opacity: var(--studio-team-glow-opacity);
+  opacity: var(--edge-rotate-glow-opacity);
   transition: opacity 0.4s ease;
   /* Two opposed wedges so two stretches of the ring glow at once. */
   background: conic-gradient(
-    from var(--studio-team-glow-angle),
+    from var(--edge-rotate-glow-angle),
     transparent 0%,
-    var(--studio-team-glow-color) 12%,
+    var(--edge-rotate-glow-color) 12%,
     transparent 33%,
     transparent 50%,
-    var(--studio-team-glow-color-b) 62%,
+    var(--edge-rotate-glow-color-b) 62%,
     transparent 83%
   );
-  animation: studio-team-glow-spin var(--studio-team-glow-speed) linear infinite;
+  animation: edge-rotate-glow-spin var(--edge-rotate-glow-speed) linear infinite;
   /* THE HOST'S OWN BOX IS PUNCHED OUT of both wedge layers, so what paints is the
      band around the edge and nothing else. `padding` makes each layer's CONTENT
      box exactly the host's box; mask-composite then removes that box from the
@@ -625,7 +660,7 @@
      itself for replace and remove, so a wrapper is orphaned on every remove. With
      the hole cut here the ring rides the card directly. For a wrapper host this
      changes nothing visible: the child was already covering that interior. */
-  padding: var(--studio-team-glow-thickness);
+  padding: var(--edge-rotate-glow-thickness);
   -webkit-mask:
     linear-gradient(#000 0 0) content-box,
     linear-gradient(#000 0 0);
@@ -635,6 +670,7 @@
     linear-gradient(#000 0 0);
   mask-composite: exclude;
 }
+.edge-rotate-glow::after,
 .studio-team-glow::after {
   /* Blurred bloom twin, a touch larger: its wedges reach 4px PAST the ring, which
      is what makes the bloom read as a halo, not a soft edge on the ring. Drop the
@@ -647,19 +683,21 @@
      card's own or the wrapper child's). Mask applies AFTER filter, which is why
      the reach has to out-measure the blur — without it the halo ends on a hard
      line at the layer's own box. */
-  inset: calc(-1 * (var(--studio-team-glow-thickness) + 4px + var(--studio-team-glow-bloom) * 2));
-  padding: calc(var(--studio-team-glow-thickness) + 4px);
-  border: calc(var(--studio-team-glow-bloom) * 2) solid transparent;
+  inset: calc(-1 * (var(--edge-rotate-glow-thickness) + 4px + var(--edge-rotate-glow-bloom) * 2));
+  padding: calc(var(--edge-rotate-glow-thickness) + 4px);
+  border: calc(var(--edge-rotate-glow-bloom) * 2) solid transparent;
   /* The wedges stop at the padding box (host + ring + the 4px); the border is empty
      room the blur is allowed to spread into. */
   background-clip: padding-box;
   z-index: -2;
-  filter: blur(var(--studio-team-glow-bloom)) saturate(1.35);
+  filter: blur(var(--edge-rotate-glow-bloom)) saturate(1.35);
 }
-@keyframes studio-team-glow-spin {
-  to { --studio-team-glow-angle: 360deg; }
+@keyframes edge-rotate-glow-spin {
+  to { --edge-rotate-glow-angle: 360deg; }
 }
 @media (prefers-reduced-motion: reduce) {
+  .edge-rotate-glow::before,
+  .edge-rotate-glow::after,
   .studio-team-glow::before,
   .studio-team-glow::after { animation: none; }
 }
@@ -1262,7 +1300,7 @@ body.modal-open { overflow: visible; }
    Named pulse-cta (not btn-pulse) so it stays a plain motion-layer effect, not a
    .btn component variant the engine.css component contract would demand.
 
-   Usage:  <button class="btn btn-primary pulse-cta">Change Username</button>
+   Usage:  <button class="btn btn-primary pulse-cta">Save</button>
            green pulse:  style="--pulse-cta-color: var(--color-success)"
    Tune:   --pulse-cta-color / --pulse-cta-speed / --pulse-cta-scale /
            --pulse-cta-ring / --pulse-cta-strength
@@ -1278,19 +1316,19 @@ body.modal-open { overflow: visible; }
 @keyframes pulse-cta {
   0% {
     transform: scale(1);
-    box-shadow: 0 0 0 0 color-mix(in srgb, var(--pulse-cta-color) calc(var(--pulse-cta-strength) * 100%), transparent);
+    box-shadow: var(--btn-lit-rest, 0 0 #0000), 0 0 0 0 color-mix(in srgb, var(--pulse-cta-color) calc(var(--pulse-cta-strength) * 100%), transparent);
   }
   10% {
     transform: scale(var(--pulse-cta-scale));
-    box-shadow: 0 0 0 calc(var(--pulse-cta-ring) * 0.6) color-mix(in srgb, var(--pulse-cta-color) calc(var(--pulse-cta-strength) * 50%), transparent);
+    box-shadow: var(--btn-lit-rest, 0 0 #0000), 0 0 0 calc(var(--pulse-cta-ring) * 0.6) color-mix(in srgb, var(--pulse-cta-color) calc(var(--pulse-cta-strength) * 50%), transparent);
   }
   22% {
     transform: scale(1);
-    box-shadow: 0 0 0 var(--pulse-cta-ring) color-mix(in srgb, var(--pulse-cta-color) 0%, transparent);
+    box-shadow: var(--btn-lit-rest, 0 0 #0000), 0 0 0 var(--pulse-cta-ring) color-mix(in srgb, var(--pulse-cta-color) 0%, transparent);
   }
   100% {
     transform: scale(1);
-    box-shadow: 0 0 0 0 color-mix(in srgb, var(--pulse-cta-color) 0%, transparent);
+    box-shadow: var(--btn-lit-rest, 0 0 #0000), 0 0 0 0 color-mix(in srgb, var(--pulse-cta-color) 0%, transparent);
   }
 }
 @media (prefers-reduced-motion: reduce) {
@@ -1866,6 +1904,58 @@ body.modal-open { overflow: visible; }
   opacity: 0;
 }
 
+/* FIZZ AROUND ANY BUTTON (studio/_fizz). The bubbles have no tie to the hold: the
+   only thing that held them to it was this section's .hold-stack selector, and the
+   hold's own states. So .fizz-stack gives them the same stack without a hold, with
+   a neutral name, and it rests and answers hover as a hold button does. */
+.fizz-stack {
+  position: relative;
+  display: inline-flex;
+  isolation: isolate;
+}
+
+.fizz-stack > .fizz-layer {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+}
+
+.fizz-stack > :not(.fizz-layer) {
+  position: relative;
+  z-index: 1;
+}
+
+.fizz-stack .fizz-bit {
+  position: absolute;
+  width: var(--fs, 4px);
+  height: var(--fs, 4px);
+  margin-top: calc(var(--fs, 4px) / -2);
+  margin-left: calc(var(--fs, 4px) / -2);
+  border-radius: 100px;
+  background: var(--fc, hsl(292 92% 70%));
+  box-shadow:
+    0 0 6px var(--fc, hsl(292 92% 70%)),
+    0 0 0 0.5px rgb(255 255 255 / 0.35);
+  opacity: 0;
+  will-change: transform, opacity;
+  animation: fizz-simmer var(--ft, 1.8s) linear var(--fd, 0s) infinite;
+}
+
+.fizz-stack:not(.fizz-lively):hover .fizz-bit,
+.fizz-stack.fizz-lively .fizz-bit {
+  animation: fizz-boil calc(var(--ft, 1.8s) * 0.62) linear calc(var(--fd, 0s) * 0.35) infinite;
+}
+
+.fizz-stack > .fizz-layer-extra {
+  opacity: 0;
+  transition: opacity 0.45s ease;
+}
+
+.fizz-stack.fizz-lively:hover > .fizz-layer-extra {
+  opacity: 1;
+}
+
 /* THE PORTAL (studio/hold_button, fizz_portal: true). A button inside an
    overflow-hidden card has its bubbles cut off at the card's edge, because the
    layer is absolutely positioned inside the card's clip. With the option set,
@@ -1967,7 +2057,9 @@ body.modal-open { overflow: visible; }
   .hold-stack .fizz-bit,
   .hold-stack .hold-fizz-extra,
   .hold-fizz-portal .fizz-bit,
-  .hold-fizz-portal .hold-fizz-extra {
+  .hold-fizz-portal .hold-fizz-extra,
+  .fizz-stack .fizz-bit,
+  .fizz-stack .fizz-layer-extra {
     animation: none !important;
     opacity: 0 !important;
     transition: none !important;