@floegence/floe-webapp-core 0.86.58 → 0.86.62

package/dist/context/ThemeContext.js

@@ -1,117 +1,118 @@
-import { createSignal as u, createEffect as p, createMemo as O, onCleanup as Q } from "solid-js";
-import { createSimpleContext as te } from "./createSimpleContext.js";
-import { useResolvedFloeConfig as se } from "./FloeConfigContext.js";
-import { isFloeSurfaceStyle as K, applySurfaceStyleAttribute as R, isThemeType as ne, getSystemTheme as re, applyTheme as oe, applyShellThemeAttribute as V, syncThemeTokenOverrides as j, resolveThemeTokens as ce } from "../styles/themes/index.js";
-import { normalizeShellThemeSelection as B, presetSupportsMode as D } from "../styles/themes/presets.js";
-function S(s, r, l) {
-  if (r.length !== 0)
-    return s && r.some((a) => a.name === s) ? s : l && r.some((a) => a.name === l) ? l : r[0]?.name;
+import { createSignal as u, createEffect as p, createMemo as z, onCleanup as O } from "solid-js";
+import { createSimpleContext as ee } from "./createSimpleContext.js";
+import { useResolvedFloeConfig as te } from "./FloeConfigContext.js";
+import { isFloeSurfaceStyle as b, applySurfaceStyleAttribute as Q, isThemeType as se, getSystemTheme as re, applyTheme as oe, applyShellThemeAttribute as R, syncThemeTokenOverrides as V, resolveThemeTokens as ne } from "../styles/themes/index.js";
+import { normalizeShellThemeSelection as j, presetSupportsMode as B } from "../styles/themes/presets.js";
+function S(s, o, l) {
+  if (o.length !== 0)
+    return s && o.some((m) => m.name === s) ? s : l && o.some((m) => m.name === l) ? l : o[0]?.name;
 }
-function ie() {
-  const s = se(), r = () => s.config.theme.storageKey, l = () => s.config.theme.defaultTheme, a = () => s.config.theme.surfaceStyleStorageKey ?? `${r()}-surface-style`, b = s.config.theme.defaultSurfaceStyle, y = K(b) ? b : "standard", w = s.persist.load(a(), y), [M, G] = u(K(w) ? w : y), H = (e) => {
-    const t = K(e) ? e : y;
-    G(t), s.persist.debouncedSave(a(), t);
+function ce() {
+  const s = te(), o = () => s.config.theme.storageKey, l = () => s.config.theme.defaultTheme, m = () => s.config.theme.surfaceStyleStorageKey ?? `${o()}-surface-style`, T = "soft-neumorphic", y = s.persist.load(m(), T);
+  b(y) || s.persist.remove(m());
+  const [w, D] = u(b(y) ? y : T), G = (e) => {
+    D(b(e) ? e : T);
   };
-  p(() => R(M()));
-  const I = () => s.config.theme.tokens, c = () => s.config.theme.presets ?? [], T = () => s.config.theme.presetStorageKey ?? `${r()}-preset`, h = () => S(s.config.theme.defaultPreset, c()), m = () => s.config.theme.shellPresets ?? [], $ = () => s.config.theme.shellPresetStorageKey ?? `${r()}-shell-preset`, C = () => s.config.theme.defaultShellPreset ?? {}, E = s.persist.load(r(), l()), J = ne(E) ? E : l(), [v, U] = u(J), W = s.persist.load(T(), h()), [P, A] = u(S(W, c(), h())), X = s.persist.load($(), void 0), [k, F] = u(B(X, m(), C())), [Y, Z] = u(re());
+  p(() => Q(w()));
+  const H = () => s.config.theme.tokens, c = () => s.config.theme.presets ?? [], v = () => s.config.theme.presetStorageKey ?? `${o()}-preset`, a = () => S(s.config.theme.defaultPreset, c()), h = () => s.config.theme.shellPresets ?? [], M = () => s.config.theme.shellPresetStorageKey ?? `${o()}-shell-preset`, $ = () => s.config.theme.defaultShellPreset ?? {}, C = s.persist.load(o(), l()), I = se(C) ? C : l(), [P, J] = u(I), U = s.persist.load(v(), a()), [k, E] = u(S(U, c(), a())), W = s.persist.load(M(), void 0), [K, A] = u(j(W, h(), $())), [X, Y] = u(re());
   let g = [];
-  const N = O(() => {
-    const e = S(P(), c(), h());
+  const F = z(() => {
+    const e = S(k(), c(), a());
     if (e)
       return c().find((t) => t.name === e);
   }), f = () => {
-    const e = v();
-    return e === "system" ? Y() : e;
-  }, L = (e) => {
-    const t = k()[e];
+    const e = P();
+    return e === "system" ? X() : e;
+  }, N = (e) => {
+    const t = K()[e];
     if (t)
-      return m().find((n) => n.name === t && D(n, e));
-  }, q = O(() => L(f()));
+      return h().find((r) => r.name === t && B(r, e));
+  }, L = z(() => N(f()));
   if (p(() => {
-    const e = S(P(), c(), h());
-    P() !== e && A(e);
+    const e = S(k(), c(), a());
+    k() !== e && E(e);
   }), p(() => {
-    const e = k(), t = B(e, m(), C());
-    (e.light !== t.light || e.dark !== t.dark) && F(t);
+    const e = K(), t = j(e, h(), $());
+    (e.light !== t.light || e.dark !== t.dark) && A(t);
   }), typeof window < "u") {
-    const e = window.matchMedia("(prefers-color-scheme: dark)"), t = (n) => {
-      Z(n.matches ? "dark" : "light");
+    const e = window.matchMedia("(prefers-color-scheme: dark)"), t = (r) => {
+      Y(r.matches ? "dark" : "light");
     };
-    e.addEventListener("change", t), Q(() => e.removeEventListener("change", t));
+    e.addEventListener("change", t), O(() => e.removeEventListener("change", t));
   }
   p(() => {
-    const e = v(), t = f(), n = q();
-    oe(e), V(n?.name), g = j(ce(t, I(), n?.tokens, N()?.tokens), g), typeof document < "u" && queueMicrotask(() => {
+    const e = P(), t = f(), r = L();
+    oe(e), R(r?.name), g = V(ne(t, H(), r?.tokens, F()?.tokens), g), typeof document < "u" && queueMicrotask(() => {
       const i = /* @__PURE__ */ new Set();
       for (; ; ) {
         const d = (document.documentElement.getAnimations?.({
           subtree: !0
-        }) ?? []).filter((o) => !i.has(o) && "transitionProperty" in o && /(^|-)color$|^(fill|stroke|box-shadow)$/.test(String(o.transitionProperty)));
+        }) ?? []).filter((n) => !i.has(n) && "transitionProperty" in n && /(^|-)color$|^(fill|stroke|box-shadow)$/.test(String(n.transitionProperty)));
         if (d.length === 0) break;
-        for (const o of d)
-          i.add(o), o.finish();
+        for (const n of d)
+          i.add(n), n.finish();
       }
     });
-  }), Q(() => {
-    R(void 0), V(void 0), g = j(void 0, g);
+  }), O(() => {
+    Q(void 0), R(void 0), g = V(void 0, g);
   });
   const x = (e) => {
-    U(e), s.persist.debouncedSave(r(), e);
-  }, _ = () => {
+    J(e), s.persist.debouncedSave(o(), e);
+  }, Z = () => {
     const e = f();
     x(e === "light" ? "dark" : "light");
-  }, ee = (e) => {
-    const t = S(e, c(), h());
-    if (A(t), !t) {
-      s.persist.remove(T());
+  }, _ = (e) => {
+    const t = S(e, c(), a());
+    if (E(t), !t) {
+      s.persist.remove(v());
       return;
     }
-    s.persist.debouncedSave(T(), t);
-  }, z = (e, t) => {
-    const n = m().find((o) => o.name === t && D(o, e));
-    if (!n) return !1;
-    const i = k();
-    if (i[e] === n.name) return !0;
+    s.persist.debouncedSave(v(), t);
+  }, q = (e, t) => {
+    const r = h().find((n) => n.name === t && B(n, e));
+    if (!r) return !1;
+    const i = K();
+    if (i[e] === r.name) return !0;
     const d = {
       ...i,
       version: 1,
-      [e]: n.name
+      [e]: r.name
     };
-    return F(d), s.persist.debouncedSave($(), d), !0;
+    return A(d), s.persist.debouncedSave(M(), d), !0;
   };
   return {
-    surfaceStyle: M,
-    setSurfaceStyle: H,
-    theme: v,
+    surfaceStyle: w,
+    setSurfaceStyle: G,
+    theme: P,
     resolvedTheme: f,
     setTheme: x,
-    toggleTheme: _,
+    toggleTheme: Z,
     themePresets: c,
-    themePreset: N,
-    setThemePreset: ee,
-    shellPresets: m,
-    shellPreset: q,
-    shellPresetForMode: L,
+    themePreset: F,
+    setThemePreset: _,
+    shellPresets: h,
+    shellPreset: L,
+    shellPresetForMode: N,
     setShellPreset: (e) => {
-      const t = m().find((i) => i.name === e);
+      const t = h().find((i) => i.name === e);
       if (!t) return;
-      const n = t.mode === "light" || t.mode === "dark" ? t.mode : f();
-      z(n, e);
+      const r = t.mode === "light" || t.mode === "dark" ? t.mode : f();
+      q(r, e);
     },
     selectShellTheme: (e, t) => {
-      z(e, t) && x(e);
+      q(e, t) && x(e);
     }
   };
 }
 const {
-  Provider: Se,
-  use: ge
-} = te({
+  Provider: ue,
+  use: Se
+} = ee({
   name: "Theme",
-  init: ie
+  init: ce
 });
 export {
-  Se as ThemeProvider,
-  ie as createThemeService,
-  ge as useTheme
+  ue as ThemeProvider,
+  ce as createThemeService,
+  Se as useTheme
 };

package/dist/floe.css

@@ -1,5 +1,6 @@
 @import './progress-shimmer.css';
 @import './primitives.css';
+@import './language.css';
 @import './input-focus.css';
 @import './surface.css';
 @import './file-icons.css';
@@ -30,12 +31,63 @@
  * CSS variables at runtime.
  */
 
-/* Border radius - these work fine with var() */
+/*
+ * Tailwind scale → language scale.
+ *
+ * Utilities are the vocabulary components actually write, so every Tailwind
+ * scale the language owns is mapped onto the language token rather than left at
+ * the Tailwind default. Without this, `rounded-xl`, `ease-out`, `shadow-sm` and
+ * `text-sm` spoke a second, parallel design system: numerically close enough to
+ * look accidental, different enough to break the ladder when either side moved.
+ *
+ * Each mapping below resolves at computed-value time, so the language file stays
+ * the only place a value is written.
+ */
 @theme {
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
+  /* Radius — the ladder is concentric: xs 4 · sm 6 · md 8 · control 10 ·
+   * group 12 · card 16 · panel 20.
+   *
+   * Named by what the surface is, not by how big it is — `rounded-control` says
+   * which rung to read, where `rounded-lg` (Tailwind's 8px scale) could only
+   * ever be a guess. The bare `rounded` utility has no `@theme` override in v4,
+   * so every call site now names its rung; nothing resolves to a literal. */
+  --radius-xs: var(--floe-radius-xs);
+  --radius-sm: var(--floe-radius-sm);
+  --radius-md: var(--floe-radius-md);
+  --radius-control: var(--floe-radius-control);
+  --radius-group: var(--floe-radius-group);
+  --radius-card: var(--floe-radius-card);
+  --radius-panel: var(--floe-radius-panel);
+
+  /* Motion — `ease-out` and `ease-in-out` were the Tailwind curves, which start
+   * abruptly and settle late; the language curves decelerate. */
+  --ease-out: var(--floe-ease-out);
+  --ease-in-out: var(--floe-ease-in-out);
+
+  /* Elevation — three steps, so a shadow utility can no longer invent a fourth. */
+  --shadow: var(--floe-elevation-raised);
+  --shadow-sm: var(--floe-elevation-raised);
+  --shadow-md: var(--floe-elevation-float);
+  --shadow-lg: var(--floe-elevation-float);
+  --shadow-xl: var(--floe-elevation-float-strong);
+  --shadow-2xl: var(--floe-elevation-float-strong);
+
+  /* Type — one step per role: caption 11 · supporting 12 · control and body 13
+   * · heading 16 · display 22. Tailwind's 14px control size had no seat on that
+   * ladder, which is why control text drifted between 12, 13 and 14px.
+   *
+   * `text-caption` is the role-named utility. Metadata, badges and axis labels
+   * used to hard-code `text-[10px]` or `text-[11px]`; the smaller value sat below
+   * the ladder and existed only because a single component needed two pixels. */
+  --text-caption: var(--floe-type-caption);
+  --text-xs: var(--floe-type-supporting);
+  --text-sm: var(--floe-type-control);
+  --text-base: var(--floe-type-heading);
+  --text-lg: var(--floe-type-display);
+  --text-caption--line-height: var(--floe-line-caption);
+  --text-xs--line-height: var(--floe-line-caption);
+  --text-sm--line-height: var(--floe-line-control);
+  --text-base--line-height: var(--floe-line-heading);
 }
 
 /* Custom color utilities using CSS variables */
@@ -403,8 +455,8 @@
 /* Animation utilities */
 @layer utilities {
   .floe-floating-presence {
-    --floe-floating-enter-duration: 220ms;
-    --floe-floating-exit-duration: 160ms;
+    --floe-floating-enter-duration: 260ms;
+    --floe-floating-exit-duration: 180ms;
     --floe-floating-presence-x: 0;
     --floe-floating-presence-y: 0;
     --floe-floating-presence-scale: 1;
@@ -418,16 +470,20 @@
     transform: translate(var(--floe-floating-presence-x), var(--floe-floating-presence-y)) scale(var(--floe-floating-presence-scale));
     transform-origin: var(--floe-floating-origin, center);
     transition:
-      opacity var(--floe-floating-enter-duration) ease-out,
-      transform var(--floe-floating-enter-duration) cubic-bezier(0.2, 0.75, 0.25, 1);
-    will-change: opacity, transform;
+      opacity var(--floe-floating-enter-duration) var(--floe-ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
+      transform var(--floe-floating-enter-duration) cubic-bezier(0.16, 1, 0.3, 1);
   }
 
+  /* Promotion is scoped to the frames that move. A settled overlay holding
+   * `will-change` keeps a compositor layer alive for as long as it is open,
+   * which costs memory and rasterisation on every window, menu and dialog that
+   * merely sits on screen. Only the two transitions need it. */
   .floe-floating-presence[data-floating-presence='entering'] {
     opacity: 0;
     --floe-floating-presence-x: var(--floe-floating-enter-x);
     --floe-floating-presence-y: var(--floe-floating-enter-y);
     --floe-floating-presence-scale: var(--floe-floating-enter-scale);
+    will-change: opacity, transform;
   }
 
   .floe-floating-presence[data-floating-presence='exiting'] {
@@ -436,9 +492,10 @@
     --floe-floating-presence-x: var(--floe-floating-exit-x);
     --floe-floating-presence-y: var(--floe-floating-exit-y);
     --floe-floating-presence-scale: var(--floe-floating-exit-scale);
+    will-change: opacity, transform;
     transition:
-      opacity var(--floe-floating-exit-duration) ease-in,
-      transform var(--floe-floating-exit-duration) cubic-bezier(0.4, 0, 1, 1);
+      opacity var(--floe-floating-exit-duration) cubic-bezier(0.4, 0, 0.6, 1),
+      transform var(--floe-floating-exit-duration) cubic-bezier(0.4, 0, 0.6, 1);
   }
 
   .floe-floating-presence--suspended {
@@ -451,10 +508,11 @@
   }
 
   .floe-floating-dialog-panel {
-    --floe-floating-enter-y: 0.25rem;
-    --floe-floating-exit-y: 0.125rem;
-    --floe-floating-enter-scale: 1;
-    --floe-floating-exit-scale: 1;
+    --floe-floating-enter-y: 0.75rem;
+    --floe-floating-exit-y: 0.375rem;
+    --floe-floating-enter-scale: 0.965;
+    --floe-floating-exit-scale: 0.985;
+    --floe-floating-origin: center top;
   }
 
   .floe-side-drawer-overlay {
@@ -505,7 +563,7 @@
     --floe-floating-exit-y: calc(100% + 1.25rem);
     --floe-floating-enter-scale: 1;
     --floe-floating-exit-scale: 1;
-    border-radius: 1rem;
+    border-radius: var(--floe-radius-panel);
     overflow: hidden;
   }
 
@@ -517,12 +575,12 @@
   }
 
   .floe-floating-menu {
-    --floe-floating-enter-duration: 220ms;
+    --floe-floating-enter-duration: 240ms;
     --floe-floating-exit-duration: 160ms;
-    --floe-floating-enter-y: -0.25rem;
+    --floe-floating-enter-y: -0.375rem;
     --floe-floating-exit-y: -0.125rem;
-    --floe-floating-enter-scale: 1;
-    --floe-floating-exit-scale: 1;
+    --floe-floating-enter-scale: 0.97;
+    --floe-floating-exit-scale: 0.99;
     --floe-floating-origin: top;
   }
 
@@ -533,29 +591,30 @@
   }
 
   .floe-floating-tooltip {
-    --floe-floating-enter-duration: 80ms;
-    --floe-floating-exit-duration: 70ms;
+    --floe-floating-enter-duration: 140ms;
+    --floe-floating-exit-duration: 90ms;
     --floe-floating-enter-y: -0.125rem;
     --floe-floating-exit-y: -0.0625rem;
-    --floe-floating-enter-scale: 1;
+    --floe-floating-enter-scale: 0.96;
     --floe-floating-exit-scale: 1;
   }
 
   .floe-floating-window-motion {
-    --floe-floating-enter-y: 4px;
-    --floe-floating-exit-y: 2px;
-    --floe-floating-enter-duration: 220ms;
-    --floe-floating-exit-duration: 160ms;
-    --floe-floating-enter-scale: 1;
-    --floe-floating-exit-scale: 1;
+    --floe-floating-enter-y: 8px;
+    --floe-floating-exit-y: 4px;
+    --floe-floating-enter-duration: 260ms;
+    --floe-floating-exit-duration: 180ms;
+    --floe-floating-enter-scale: 0.98;
+    --floe-floating-exit-scale: 0.99;
+    --floe-floating-origin: center top;
   }
 
   .animate-in {
-    animation: animate-in 200ms ease-out;
+    animation: animate-in 220ms cubic-bezier(0.16, 1, 0.3, 1);
   }
 
   .animate-out {
-    animation: animate-out 150ms ease-in;
+    animation: animate-out 150ms cubic-bezier(0.4, 0, 0.6, 1);
   }
 
   .slide-in-from-top {
@@ -608,6 +667,106 @@
       will-change: opacity;
     }
   }
+
+  /*
+   * Hover motion.
+   *
+   * These utilities touch transform, color and shadow only. Width, height,
+   * padding, border width and position stay untouched so action groups,
+   * toolbars and drag/resize geometry never reflow while the pointer moves.
+   * Labels keep their own intrinsic box: lift happens on the control, never
+   * by growing the text.
+   */
+  .floe-hover-lift {
+    transition:
+      transform var(--floe-duration-fast) var(--floe-ease-out),
+      box-shadow var(--floe-duration-base) var(--floe-ease-out),
+      background-color var(--floe-duration-fast) var(--floe-ease-in-out),
+      border-color var(--floe-duration-fast) var(--floe-ease-in-out),
+      color var(--floe-duration-fast) var(--floe-ease-in-out);
+  }
+
+  .floe-hover-lift:hover {
+    transform: translateY(var(--floe-hover-lift));
+  }
+
+  .floe-hover-lift:active {
+    transform: translateY(0) scale(0.99);
+    transition-duration: var(--floe-duration-instant);
+  }
+
+  /* Rows, menu items and list entries shift tint instead of moving, so dense
+   * lists stay perceptually still while still feeling responsive. */
+  .floe-hover-surface {
+    transition:
+      background-color var(--floe-duration-fast) var(--floe-ease-in-out),
+      color var(--floe-duration-fast) var(--floe-ease-in-out),
+      border-color var(--floe-duration-fast) var(--floe-ease-in-out),
+      box-shadow var(--floe-duration-base) var(--floe-ease-out);
+  }
+
+  /* Soft highlight for hovered cards and panels: a one-pixel inner hairline
+   * plus a whisper of elevation, never a hard ring. */
+  .floe-hover-raised {
+    transition:
+      transform var(--floe-duration-base) var(--floe-ease-out),
+      box-shadow var(--floe-duration-base) var(--floe-ease-out),
+      border-color var(--floe-duration-fast) var(--floe-ease-in-out);
+  }
+
+  .floe-hover-raised:hover {
+    transform: translateY(var(--floe-hover-lift));
+    /* The inner line is the hairline step, not a fifth shadow strength; the
+     * outer one is the first elevation. Previously this was a bespoke recipe
+     * that put two more distances into the language. */
+    box-shadow:
+      0 1px 0 0 var(--floe-line-quiet) inset,
+      var(--floe-elevation-raised);
+  }
+
+  /* Pointer feedback for icon-only affordances: the icon sits in a rounded
+   * well that fills on hover, matching the shell's soft surface language. */
+  .floe-hover-well {
+    transition:
+      background-color var(--floe-duration-fast) var(--floe-ease-in-out),
+      color var(--floe-duration-fast) var(--floe-ease-in-out),
+      transform var(--floe-duration-fast) var(--floe-ease-out);
+  }
+
+  .floe-hover-well:hover {
+    background-color: color-mix(in srgb, var(--accent) 80%, transparent);
+  }
+
+  .floe-hover-well:active {
+    transform: scale(0.94);
+    transition-duration: var(--floe-duration-instant);
+  }
+
+  /* Text and icon nudges: tiny directional shift that reads as intent without
+   * disturbing the layout box. */
+  .floe-hover-nudge-x {
+    transition: transform var(--floe-duration-fast) var(--floe-ease-out);
+  }
+
+  .floe-hover-nudge-x:hover {
+    transform: translateX(2px);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .floe-hover-lift,
+    .floe-hover-lift:hover,
+    .floe-hover-lift:active,
+    .floe-hover-surface,
+    .floe-hover-raised,
+    .floe-hover-raised:hover,
+    .floe-hover-well,
+    .floe-hover-well:active,
+    .floe-hover-nudge-x,
+    .floe-hover-nudge-x:hover {
+      transform: none;
+      transition-duration: 1ms;
+    }
+  }
 }
 
 @keyframes animate-in {
@@ -737,29 +896,32 @@
   pointer-events: auto;
   transform-origin: bottom center;
   transition:
-    border-radius 200ms ease,
-    border-color 180ms ease,
-    opacity 120ms ease;
+    border-radius var(--floe-duration-base) var(--floe-ease-out),
+    border-color var(--floe-duration-fast) var(--floe-ease-out),
+    opacity var(--floe-duration-fast) var(--floe-ease-out);
 }
 
 .floe-bottom-bar-companion[data-companion-phase='expanding'],
 .floe-bottom-bar-companion[data-companion-phase='expanded'] {
   border-radius: var(--floe-bottom-bar-companion-expanded-radius, 0.5rem);
   border-color: color-mix(in srgb, var(--border) 96%, transparent);
-  box-shadow:
-    0 22px 54px -24px color-mix(in srgb, var(--foreground) 34%, transparent),
-    0 6px 18px -12px color-mix(in srgb, var(--foreground) 24%, transparent);
+  box-shadow: var(--floe-elevation-float-strong);
 }
 
 .floe-bottom-bar-companion[data-companion-phase='expanding'],
 .floe-bottom-bar-companion[data-companion-phase='collapsing'] {
   will-change: left, top, width, height;
+  /* Geometry morphs on the slow step with the language curve; the driver
+   * re-measures between phases, so a longer duration would only widen the
+   * window where the measured target and the visible box disagree. */
   transition:
-    left 360ms cubic-bezier(0.22, 0.8, 0.24, 1),
-    top 360ms cubic-bezier(0.22, 0.8, 0.24, 1),
-    width 360ms cubic-bezier(0.22, 0.8, 0.24, 1),
-    height 360ms cubic-bezier(0.22, 0.8, 0.24, 1),
-    border-radius 200ms ease, border-color 180ms ease, opacity 120ms ease;
+    left var(--floe-duration-slow) var(--floe-ease-out),
+    top var(--floe-duration-slow) var(--floe-ease-out),
+    width var(--floe-duration-slow) var(--floe-ease-out),
+    height var(--floe-duration-slow) var(--floe-ease-out),
+    border-radius var(--floe-duration-base) var(--floe-ease-out),
+    border-color var(--floe-duration-fast) var(--floe-ease-out),
+    opacity var(--floe-duration-fast) var(--floe-ease-out);
 }
 
 .floe-bottom-bar-companion[data-companion-visibility='hidden'],