@mks2508/mks-ui 0.5.4 → 0.5.7

package/src/react-ui/ui/DynamicToggle/DynamicToggle.css

@@ -12,6 +12,8 @@
   --dt-dur: 0.22s;
   --dt-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
   --dt-fade: 0.45;
+  --dt-indicator-dur: 0.3s;
+  --dt-indicator-ease: cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 /* ── Track: explicit row prevents h-full items from overflowing container ── */
@@ -24,18 +26,9 @@
   grid-column: span 2;
 }
 
-/* ── Main indicator slide ── */
-[data-slot="dt-root"] [data-slot="dt-indicator"] {
-  transition: translate var(--dt-dur) var(--dt-ease);
-  translate: 100% 0;
-}
-[data-slot="dt-root"] [data-slot="dt-track"]:has(> input:checked) [data-slot="dt-indicator"] {
-  translate: 0 0;
-}
-
 /* ── Primary option text ── */
 [data-slot="dt-root"] [data-slot="dt-track"]:has(> input:checked) > label {
-  color: var(--card);
+  color: var(--accent-foreground);
   z-index: 2;
 }
 [data-slot="dt-root"] [data-slot="dt-track"]:not(:has(> input:checked)) > label {
@@ -49,31 +42,109 @@
   overflow: hidden;
 }
 
-/* ── Group indicator: clip-path reveal ── */
-[data-slot="dt-root"] [data-slot="dt-group-indicator"] {
-  pointer-events: none;
+/* ══════════════════════════════════════════════════════════
+ * INDICATOR POSITIONING
+ *
+ * Modern: CSS Anchor Positioning — indicator follows active option
+ * Fallback: translate-based positioning for older browsers
+ * ══════════════════════════════════════════════════════════ */
+
+/* ── Anchor-based indicator (requires full anchor API) ── */
+@supports (anchor-scope: all) {
+  /* Scope anchors per toggle instance */
+  [data-slot="dt-root"]:not([data-indicator="translate"]) {
+    anchor-scope: --dt-active;
+  }
+
+  /* Active option becomes the anchor via native :checked */
+  [data-slot="dt-root"]:not([data-indicator="translate"]) [data-slot="dt-track"] > label:has(+ input:checked) {
+    anchor-name: --dt-active;
+  }
+  [data-slot="dt-root"]:not([data-indicator="translate"]) [data-slot="dt-group"] > label:has(+ input:checked) {
+    anchor-name: --dt-active;
+  }
+
+  /* Single unified indicator: morphs from full-width to half-width */
+  [data-slot="dt-root"]:not([data-indicator="translate"]) [data-slot="dt-indicator"] {
+    position-anchor: --dt-active;
+    top: anchor(top);
+    right: anchor(right);
+    bottom: anchor(bottom);
+    left: anchor(left);
+    translate: none;
+    width: auto;
+    transition:
+      top var(--dt-indicator-dur) var(--dt-indicator-ease),
+      right var(--dt-indicator-dur) var(--dt-indicator-ease),
+      bottom var(--dt-indicator-dur) var(--dt-indicator-ease),
+      left var(--dt-indicator-dur) var(--dt-indicator-ease);
+  }
+
+  /* Hide the group indicator — unified indicator handles everything */
+  [data-slot="dt-root"]:not([data-indicator="translate"]) [data-slot="dt-group-indicator"] {
+    display: none;
+  }
+}
+
+/* ── Inset-based fallback (older browsers) — same morph as anchor but hardcoded ── */
+@supports not (anchor-scope: all) {
+  /* Unified indicator: left/right transition morphs width + position */
+  [data-slot="dt-root"] [data-slot="dt-indicator"] {
+    left: 50%;
+    right: 0;
+    width: auto;
+    translate: none;
+    transition:
+      left var(--dt-indicator-dur) var(--dt-indicator-ease),
+      right var(--dt-indicator-dur) var(--dt-indicator-ease);
+  }
+  /* Top-level checked: indicator covers left half */
+  [data-slot="dt-root"] [data-slot="dt-track"]:has(> input:checked) [data-slot="dt-indicator"] {
+    left: 0;
+    right: 50%;
+  }
+  /* Group option 1 checked: indicator at 3rd quarter */
+  [data-slot="dt-root"] [data-slot="dt-group"]:has(input:nth-of-type(1):checked) ~ [data-slot="dt-indicator"],
+  [data-slot="dt-root"] [data-slot="dt-track"]:has([data-slot="dt-group"] input:nth-of-type(1):checked) [data-slot="dt-indicator"] {
+    left: 50%;
+    right: 25%;
+  }
+  /* Group option 2 checked: indicator at 4th quarter */
+  [data-slot="dt-root"] [data-slot="dt-group"]:has(input:nth-of-type(2):checked) ~ [data-slot="dt-indicator"],
+  [data-slot="dt-root"] [data-slot="dt-track"]:has([data-slot="dt-group"] input:nth-of-type(2):checked) [data-slot="dt-indicator"] {
+    left: 75%;
+    right: 0;
+  }
+  /* Hide group indicator — unified indicator handles everything */
+  [data-slot="dt-root"] [data-slot="dt-group-indicator"] {
+    display: none;
+  }
+}
+
+/* ── Force inset mode via data-indicator="translate" (works regardless of @supports) ── */
+[data-slot="dt-root"][data-indicator="translate"] [data-slot="dt-indicator"] {
+  left: 50%;
+  right: 0;
+  width: auto;
+  translate: none;
   transition:
-    translate var(--dt-dur) var(--dt-ease),
-    clip-path var(--dt-dur) var(--dt-ease),
-    background var(--dt-dur) var(--dt-ease);
-  clip-path: inset(
-    73cqh calc(50% + 1px) calc(27cqh - 2px) calc(50% - 3px)
-    round var(--dt-radius, 9999px)
-  );
-  translate: -50% 0;
-}
-[data-slot="dt-root"] [data-slot="dt-track"]:has(> input:checked) [data-slot="dt-group-indicator"] {
-  background: transparent;
+    left var(--dt-indicator-dur) var(--dt-indicator-ease),
+    right var(--dt-indicator-dur) var(--dt-indicator-ease);
 }
-[data-slot="dt-root"] [data-slot="dt-group"]:has(input:checked) [data-slot="dt-group-indicator"] {
-  background: var(--card);
-  clip-path: inset(0 0 0 0 round var(--dt-radius, 9999px));
+[data-slot="dt-root"][data-indicator="translate"] [data-slot="dt-track"]:has(> input:checked) [data-slot="dt-indicator"] {
+  left: 0;
+  right: 50%;
 }
-[data-slot="dt-root"] [data-slot="dt-group"]:has(input:nth-of-type(1):checked) [data-slot="dt-group-indicator"] {
-  translate: -100% 0;
+[data-slot="dt-root"][data-indicator="translate"] [data-slot="dt-track"]:has([data-slot="dt-group"] input:nth-of-type(1):checked) [data-slot="dt-indicator"] {
+  left: 50%;
+  right: 25%;
 }
-[data-slot="dt-root"] [data-slot="dt-group"]:has(input:nth-of-type(2):checked) [data-slot="dt-group-indicator"] {
-  translate: 0 0;
+[data-slot="dt-root"][data-indicator="translate"] [data-slot="dt-track"]:has([data-slot="dt-group"] input:nth-of-type(2):checked) [data-slot="dt-indicator"] {
+  left: 75%;
+  right: 0;
+}
+[data-slot="dt-root"][data-indicator="translate"] [data-slot="dt-group-indicator"] {
+  display: none;
 }
 
 /* ══════════════════════════════════════════════════════════
@@ -233,6 +304,8 @@
   background: var(--card);
   border: 1px solid var(--border);
   z-index: 3;
+  transform: translateZ(0);
+  -webkit-transform: translateZ(0);
 }
 [data-slot="dt-group-label"] > span {
   overflow: hidden;
@@ -300,4 +373,4 @@
 [data-slot="dt-root"][data-morph="path"] [data-slot="dt-track"] {
   position: relative;
   z-index: 1;
-}
+}

package/src/react-ui/ui/DynamicToggle/DynamicToggle.styles.ts

@@ -30,9 +30,9 @@ export const dynamicToggleStyles: StyleSlots<DynamicToggleSlot> = {
   root: 'relative border p-[2px] select-none',
   track: 'relative grid grid-cols-[repeat(4,1fr)] place-items-center w-full h-full',
   option: 'inline-grid place-items-center cursor-pointer font-medium z-[2] h-full w-full whitespace-nowrap',
-  indicator: 'absolute w-1/2 left-0 top-0 bottom-0 bg-foreground rounded-[var(--dt-radius,9999px)] pointer-events-none z-0',
+  indicator: 'absolute w-1/2 left-0 top-0 bottom-0 bg-accent rounded-[var(--dt-radius,9999px)] pointer-events-none z-0',
   group: 'col-span-2 relative w-full h-full grid grid-cols-2',
-  groupIndicator: 'absolute left-1/2 top-0 bottom-0 w-1/2 bg-foreground rounded-[var(--dt-radius,9999px)] pointer-events-none z-0',
+  groupIndicator: 'absolute left-1/2 top-0 bottom-0 w-1/2 bg-accent rounded-[var(--dt-radius,9999px)] pointer-events-none z-0',
   groupLabel: [
     'absolute',
     'flex items-center justify-center',

package/src/react-ui/ui/DynamicToggle/DynamicToggle.types.ts

@@ -42,6 +42,12 @@ export interface IDynamicToggleConfig extends IBaseConfig {
   labelAnimation?: 'morph' | 'float' | 'none';
   /** Gooey morph mode for the pill↔groupLabel junction (default: 'none') */
   morphMode?: DynamicToggleMorphMode;
+  /** Indicator slide duration in seconds (default: 0.3) */
+  indicatorDuration?: number;
+  /** Indicator slide easing (default: material standard cubic-bezier) */
+  indicatorEasing?: string;
+  /** Force translate-based indicator instead of CSS Anchor (debug/compat) */
+  forceTranslateIndicator?: boolean;
 }
 
 // ---------------------------------------------------------------------------

package/src/react-ui/ui/DynamicToggle/index.tsx

@@ -62,6 +62,18 @@ const SIZE_HEIGHT_PX: Record<string, number> = {
   lg: 44,
 };
 
+const SIZE_WIDTH_PX: Record<string, number> = {
+  sm: 210,
+  default: 260,
+  lg: 320,
+};
+
+const SHAPE_RADIUS: Record<string, number> = {
+  pill: 9999,
+  rounded: 12,
+  square: 6,
+};
+
 // ---------------------------------------------------------------------------
 // DynamicToggle (Root)
 // ---------------------------------------------------------------------------
@@ -115,9 +127,12 @@ function DynamicToggle({
   const showGroupLabel = labelAnimation !== 'none' && groupPosition !== 'hidden' && groupLabel;
   const heightPx = SIZE_HEIGHT_PX[size ?? 'default'] ?? 32;
 
-  const style = config?.duration
-    ? { '--dt-dur': `${config.duration}s` } as React.CSSProperties
-    : undefined;
+  const style = {
+    ...(config?.duration && { '--dt-dur': `${config.duration}s` }),
+    ...(config?.indicatorDuration && { '--dt-indicator-dur': `${config.indicatorDuration}s` }),
+    ...(config?.indicatorEasing && { '--dt-indicator-ease': config.indicatorEasing }),
+  } as React.CSSProperties;
+  const hasStyle = Object.keys(style).length > 0;
 
   // Group label element (shared between modes)
   const groupLabelElement = showGroupLabel ? (
@@ -135,19 +150,26 @@ function DynamicToggle({
       <div
         data-slot="dt-root"
         data-morph={effectiveMorphMode !== 'none' ? effectiveMorphMode : undefined}
+        data-indicator={config?.forceTranslateIndicator ? 'translate' : undefined}
         data-group-active={groupActive || undefined}
         data-disabled={disabled || undefined}
         role="radiogroup"
         aria-label={ariaLabel}
-        style={style}
+        style={hasStyle ? style : undefined}
         className={cn(dynamicToggleVariants({ variant, size, shape }), slots?.root, className)}
       >
-        {/* Filter morph: GooeyCanvas wraps backgrounds only */}
+        {/* Filter morph: GooeyCanvas with SVG rects (Safari-safe) */}
         {effectiveMorphMode === 'filter' && (
-          <GooeyCanvas height={heightPx}>
-            <div className="absolute inset-0 rounded-[inherit] bg-card" />
+          <>
+            <GooeyCanvas
+              height={heightPx}
+              width={SIZE_WIDTH_PX[size ?? 'default'] ?? 260}
+              radius={SHAPE_RADIUS[shape ?? 'pill'] ?? 9999}
+              expanded={groupActive}
+            />
+            {/* Group label text — outside the filtered canvas */}
             {groupLabelElement}
-          </GooeyCanvas>
+          </>
         )}
 
         {/* Path morph: group label rendered directly (no gooey filter) */}

package/src/react-ui/ui/DynamicToggle/prototype-v7-ios.html

@@ -0,0 +1,413 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>DynamicToggle — Sileo-style gooey (Safari-safe)</title>
+<style>
+  :root {
+    --fg: #e2e8f0;
+    --bg: #0f172a;
+    --card: #1e293b;
+    --muted: #64748b;
+    --border: #334155;
+    --duration: 0.22;
+    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
+    --drop-off: 0.4;
+  }
+
+  * { box-sizing: border-box; margin: 0; }
+  body {
+    min-height: 100vh;
+    display: flex; flex-direction: column; align-items: center;
+    padding: 4rem 1rem; gap: 2rem;
+    background: var(--bg);
+    font-family: system-ui, -apple-system, sans-serif;
+    color: var(--fg);
+  }
+  h3 { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 2px; }
+  .row { display: flex; gap: 2rem; align-items: end; flex-wrap: wrap; justify-content: center; }
+  .sr-only {
+    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0;
+  }
+
+  /* ================================================================
+   * CONTROL BASE
+   * ================================================================ */
+  .control {
+    --w: 260px;
+    --h: 38px;
+    --radius: 9999px;
+    --font: 0.75rem;
+    --bubble-h-pct: 40;
+    --bubble-inset-pct: 20;
+    --_r: min(var(--radius), calc(var(--h) / 2));
+
+    position: relative;
+    width: var(--w);
+    height: var(--h);
+    padding: 2px;
+    margin-top: calc(var(--h) * 0.5);
+    /* Sileo: GPU layer + containment on root */
+    transform: translateZ(0);
+    contain: layout style;
+    overflow: visible;
+  }
+
+  .control__track {
+    display: grid; place-items: center;
+    grid-template-columns: repeat(4, 1fr);
+    width: 100%; height: 100%;
+    position: relative;
+    z-index: 1;
+  }
+
+  .indicator {
+    position: absolute;
+    width: 50%; left: 0; top: 0; bottom: 0;
+    background: var(--fg);
+    border-radius: var(--radius);
+    transition: translate calc(var(--duration) * 1s) var(--ease);
+  }
+
+  label {
+    display: inline-grid; place-items: center;
+    height: 100%; width: 100%;
+    cursor: pointer; font-size: var(--font);
+    color: var(--fg); z-index: 2; font-weight: 500;
+  }
+  .control__track > label { color: var(--card); }
+
+  .group {
+    width: 100%; height: 100%;
+    display: grid; position: relative;
+    grid-template-columns: 1fr 1fr;
+    container-type: size;
+    overflow: hidden;
+  }
+  .group, .control__track > label:nth-of-type(1) { grid-column: span 2; }
+
+  .group .indicator {
+    background: var(--fg); left: 50%; top: 0;
+    translate: -50% 0;
+    pointer-events: none;
+    transition: translate calc(var(--duration) * 1s) var(--ease),
+                clip-path calc(var(--duration) * 1s) var(--ease),
+                background calc(var(--duration) * 1s) var(--ease);
+    clip-path: inset(73cqh calc(50% + 1px) calc(27cqh - 2px) calc(50% - 3px) round var(--radius));
+  }
+
+  /* ── Pseudo text ── */
+  .group::before {
+    content: attr(data-label);
+    position: absolute; left: 50%; top: 50%;
+    translate: -50% -80%;
+    color: var(--fg); font-size: var(--font); font-weight: 500;
+    z-index: 2; white-space: nowrap; pointer-events: none;
+    transition: scale calc(var(--duration) * 1s) var(--ease),
+                translate calc(var(--duration) * 1s) var(--ease),
+                opacity calc(var(--duration) * 1s) var(--ease);
+  }
+  .group::after {
+    content: attr(data-opts);
+    position: absolute; left: 50%; top: 50%;
+    translate: -50% 20%;
+    color: var(--muted); font-size: calc(var(--font) * 0.85);
+    opacity: 0.6; z-index: 2; white-space: nowrap; pointer-events: none;
+    transition: opacity calc(var(--duration) * 1s) var(--ease);
+  }
+  .group:not([data-opts])::after { content: none; }
+
+  .group label {
+    color: var(--muted); cursor: pointer; z-index: 2;
+    transition: color calc(var(--duration) * 1s) var(--ease),
+                opacity calc(var(--duration) * 1s) var(--ease),
+                translate calc(var(--duration) * 1s) var(--ease);
+  }
+  .group label span {
+    display: grid; place-items: center; height: 100%; width: 100%;
+    border-radius: var(--radius);
+    transition: scale calc(var(--duration) * 1s) var(--ease);
+  }
+
+  /* Collapsed modes */
+  .group[data-collapsed="title"]::before { translate: -50% -50%; }
+  .group[data-collapsed="title"]::after { display: none; }
+  .group[data-collapsed="title"]:not(:has(:checked)) label { opacity: 0; translate: 0 30%; }
+  .group[data-collapsed="title"]:not(:has(:checked)) label span { scale: 0.5; }
+
+  .group[data-collapsed="opts"]::before { display: none; }
+  .group[data-collapsed="opts"]::after { translate: -50% -50%; font-size: var(--font); opacity: 0.7; }
+  .group[data-collapsed="opts"]:not(:has(:checked)) label { opacity: 0; translate: 0 30%; }
+  .group[data-collapsed="opts"]:not(:has(:checked)) label span { scale: 0.5; }
+
+  /* Track states */
+  .control__track:has(> :checked) > label { color: var(--card); }
+  .control__track:not(:has(> :checked)) > label { color: var(--fg); opacity: var(--drop-off); }
+  .control__track:not(:has(> :checked)) > .indicator { translate: 100% 0; }
+  .control__track:has(> :checked) .group .indicator { background: transparent; }
+
+  /* Group expanded */
+  .control--goo .group:has(:checked)::before { opacity: 0; translate: -50% -80%; scale: 1; }
+  .group:has(:checked)::after { opacity: 0; }
+  .group:has(:checked) label { opacity: 0.75; color: var(--muted); translate: 0 0; }
+  .group:has(:checked) label span { scale: 1; }
+  .group:has(:checked) .indicator { background: var(--card); clip-path: inset(0 0 0 0 round var(--radius)); }
+  .group:has(:nth-of-type(1):checked) label:nth-of-type(1),
+  .group:has(:nth-of-type(2):checked) label:nth-of-type(2) { color: var(--fg); opacity: 1; }
+  .group:has(:nth-of-type(1):checked) .indicator { translate: -100% 0; }
+  .group:has(:nth-of-type(2):checked) .indicator { translate: 0 0; }
+
+  /* ================================================================
+   * SILEO-STYLE GOOEY: SVG filter on a canvas div, SVG rects inside
+   * Key: animated content is SVG <rect>, not HTML div.
+   * Safari re-renders SVG filter smoothly when SVG children change.
+   * ================================================================ */
+  .control--goo {
+    background: transparent;
+    border: none;
+  }
+
+  .goo-canvas {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    z-index: 0;
+    /* Sileo's Safari formula */
+    transform: translateZ(0);
+    contain: layout style;
+    overflow: visible;
+  }
+
+  .goo-svg {
+    position: absolute;
+    top: 0; left: 0;
+    overflow: visible;
+    pointer-events: none;
+  }
+
+  /* Bubble TEXT — outside the filtered SVG, on top */
+  .control--goo .bubble-label {
+    position: absolute;
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: var(--font);
+    font-weight: 500;
+    color: var(--fg);
+    white-space: nowrap;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity calc(var(--duration) * 1s) var(--ease);
+  }
+  .control--goo:has(.group :checked) .bubble-label {
+    opacity: 1;
+  }
+
+  /* SIZES */
+  .control.sm  { --w: 210px; --h: 30px; --font: 10px; }
+  .control.lg  { --w: 320px; --h: 44px; --font: 14px; }
+  .control.xl  { --w: 400px; --h: 52px; --font: 16px; }
+  .control.rounded { --radius: 12px; }
+  .control.square  { --radius: 6px; }
+</style>
+</head>
+<body>
+
+<h3>Sileo-style gooey — SVG rects + filter (Safari-safe)</h3>
+<p style="color:var(--muted);font-size:12px;max-width:600px;text-align:center">
+  SVG filter applied to a canvas div. Pill + bubble are SVG <code>&lt;rect&gt;</code> elements
+  animated via WAAPI. Safari renders filter smoothly because changes are SVG-internal.
+</p>
+
+<h3>collapsed="title" — Sizes</h3>
+<div class="row">
+  <div><h3>SM</h3>
+    <div class="control sm control--goo" data-goo>
+      <div class="goo-canvas"><svg class="goo-svg"></svg></div>
+      <div class="bubble-label">Changes</div>
+      <div class="control__track"><div class="indicator"></div>
+        <label for="gs-a">Tree</label><input class="sr-only" type="radio" name="gs" id="gs-a" checked>
+        <div class="group" data-collapsed="title" data-label="Changes"><div class="indicator"></div>
+          <label for="gs-b"><span>Flat</span></label><input class="sr-only" type="radio" name="gs" id="gs-b">
+          <label for="gs-c"><span>Grp</span></label><input class="sr-only" type="radio" name="gs" id="gs-c">
+        </div></div></div></div>
+
+  <div><h3>Default</h3>
+    <div class="control control--goo" data-goo>
+      <div class="goo-canvas"><svg class="goo-svg"></svg></div>
+      <div class="bubble-label">Premium</div>
+      <div class="control__track"><div class="indicator"></div>
+        <label for="gd-a">Free</label><input class="sr-only" type="radio" name="gd" id="gd-a" checked>
+        <div class="group" data-collapsed="title" data-label="Premium"><div class="indicator"></div>
+          <label for="gd-b"><span>Solo</span></label><input class="sr-only" type="radio" name="gd" id="gd-b">
+          <label for="gd-c"><span>Team</span></label><input class="sr-only" type="radio" name="gd" id="gd-c">
+        </div></div></div></div>
+
+  <div><h3>LG</h3>
+    <div class="control lg control--goo" data-goo>
+      <div class="goo-canvas"><svg class="goo-svg"></svg></div>
+      <div class="bubble-label">Billing</div>
+      <div class="control__track"><div class="indicator"></div>
+        <label for="gl-a">Annual</label><input class="sr-only" type="radio" name="gl" id="gl-a" checked>
+        <div class="group" data-collapsed="title" data-label="Billing"><div class="indicator"></div>
+          <label for="gl-b"><span>Monthly</span></label><input class="sr-only" type="radio" name="gl" id="gl-b">
+          <label for="gl-c"><span>Weekly</span></label><input class="sr-only" type="radio" name="gl" id="gl-c">
+        </div></div></div></div>
+</div>
+
+<h3>Shapes</h3>
+<div class="row">
+  <div class="control rounded control--goo" data-goo>
+    <div class="goo-canvas"><svg class="goo-svg"></svg></div>
+    <div class="bubble-label">Theme</div>
+    <div class="control__track"><div class="indicator"></div>
+      <label for="gr-a">System</label><input class="sr-only" type="radio" name="gr" id="gr-a">
+      <div class="group" data-collapsed="title" data-label="Theme"><div class="indicator"></div>
+        <label for="gr-b"><span>Light</span></label><input class="sr-only" type="radio" name="gr" id="gr-b" checked>
+        <label for="gr-c"><span>Dark</span></label><input class="sr-only" type="radio" name="gr" id="gr-c">
+      </div></div></div>
+
+  <div class="control square control--goo" data-goo>
+    <div class="goo-canvas"><svg class="goo-svg"></svg></div>
+    <div class="bubble-label">Output</div>
+    <div class="control__track"><div class="indicator"></div>
+      <label for="gsq-a">Input</label><input class="sr-only" type="radio" name="gsq" id="gsq-a">
+      <div class="group" data-collapsed="title" data-label="Output"><div class="indicator"></div>
+        <label for="gsq-b"><span>JSON</span></label><input class="sr-only" type="radio" name="gsq" id="gsq-b" checked>
+        <label for="gsq-c"><span>XML</span></label><input class="sr-only" type="radio" name="gsq" id="gsq-c">
+      </div></div></div>
+</div>
+
+<h3>collapsed="opts"</h3>
+<div class="row">
+  <div class="control control--goo" data-goo>
+    <div class="goo-canvas"><svg class="goo-svg"></svg></div>
+    <div class="bubble-label">Premium</div>
+    <div class="control__track"><div class="indicator"></div>
+      <label for="go-a">Free</label><input class="sr-only" type="radio" name="go" id="go-a" checked>
+      <div class="group" data-collapsed="opts" data-label="Premium" data-opts="Solo · Team"><div class="indicator"></div>
+        <label for="go-b"><span>Solo</span></label><input class="sr-only" type="radio" name="go" id="go-b">
+        <label for="go-c"><span>Team</span></label><input class="sr-only" type="radio" name="go" id="go-c">
+      </div></div></div>
+</div>
+
+<script>
+// ================================================================
+// SILEO-STYLE GOOEY ENGINE
+// SVG filter + animated SVG rects (not HTML divs)
+// ================================================================
+
+const BLUR_RATIO = 0.15;
+const DURATION = 0.25; // seconds
+const OUTLINE_COLOR = '#334155';
+
+let filterCounter = 0;
+
+document.querySelectorAll('[data-goo]').forEach(control => {
+  const canvas = control.querySelector('.goo-canvas');
+  const svg = control.querySelector('.goo-svg');
+  const group = control.querySelector('.group');
+  const bubbleLabel = control.querySelector('.bubble-label');
+  const style = getComputedStyle(control);
+
+  const w = parseFloat(style.getPropertyValue('--w'));
+  const h = parseFloat(style.getPropertyValue('--h'));
+  const r = parseFloat(style.getPropertyValue('--radius'));
+  const effectiveR = Math.min(r, h / 2);
+  const bubbleHPct = parseFloat(style.getPropertyValue('--bubble-h-pct')) || 40;
+  const bubbleInsetPct = parseFloat(style.getPropertyValue('--bubble-inset-pct')) || 20;
+  const blur = Math.round(h * BLUR_RATIO);
+  const bubbleH = h * bubbleHPct / 100;
+  const bubbleInset = w * bubbleInsetPct / 100;
+  const bubbleW = w - 2 * bubbleInset;
+  const bubbleR = Math.min(effectiveR * 0.6, bubbleH * 0.45, 12);
+
+  // Create unique filter
+  const filterId = `goo-${filterCounter++}`;
+
+  // Build SVG content: filter defs + pill rect + bubble rect
+  const totalH = h + bubbleH;
+  svg.setAttribute('width', w);
+  svg.setAttribute('height', totalH);
+  svg.setAttribute('viewBox', `0 0 ${w} ${totalH}`);
+  svg.style.top = `-${bubbleH}px`;
+
+  svg.innerHTML = `
+    <defs>
+      <filter id="${filterId}" x="-20%" y="-20%" width="140%" height="140%"
+              color-interpolation-filters="sRGB">
+        <feGaussianBlur in="SourceGraphic" stdDeviation="${blur}" result="blur"/>
+        <feColorMatrix in="blur" mode="matrix"
+          values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -10" result="goo"/>
+        <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
+      </filter>
+    </defs>
+    <rect class="pill-rect"
+      x="2" y="${bubbleH}" width="${w - 4}" height="${h - 4}" rx="${effectiveR}" ry="${effectiveR}"
+      fill="var(--card)"/>
+    <rect class="bubble-rect"
+      x="${bubbleInset}" y="${bubbleH}" width="${bubbleW}" height="0" rx="${bubbleR}" ry="${bubbleR}"
+      fill="var(--card)"/>
+  `;
+
+  // Apply filter + drop-shadow to canvas
+  canvas.style.filter = `url(#${filterId}) drop-shadow(0 0 0.5px ${OUTLINE_COLOR}) drop-shadow(0 0 0.5px ${OUTLINE_COLOR})`;
+
+  const pillRect = svg.querySelector('.pill-rect');
+  const bubbleRect = svg.querySelector('.bubble-rect');
+
+  // Position bubble label
+  bubbleLabel.style.left = bubbleInset + 'px';
+  bubbleLabel.style.right = bubbleInset + 'px';
+  bubbleLabel.style.height = bubbleH + 'px';
+  bubbleLabel.style.bottom = h + 'px';
+
+  // Animate bubble rect via WAAPI (like Sileo uses Motion)
+  let currentAnim = null;
+
+  function animateBubble(expand) {
+    if (currentAnim) currentAnim.cancel();
+
+    const targetY = expand ? bubbleH - bubbleH : bubbleH;
+    const targetH = expand ? bubbleH : 0;
+
+    currentAnim = bubbleRect.animate([
+      { // from current
+        y: bubbleRect.getAttribute('y'),
+        height: bubbleRect.getAttribute('height'),
+      },
+      { // to target
+        y: targetY,
+        height: targetH,
+      }
+    ], {
+      duration: DURATION * 1500,
+      easing: 'cubic-bezier(0.22, 0.61, 0.36, 1)',
+      fill: 'forwards',
+    });
+
+    currentAnim.onfinish = () => {
+      bubbleRect.setAttribute('y', targetY);
+      bubbleRect.setAttribute('height', targetH);
+    };
+  }
+
+  // Listen for radio changes
+  function checkState() {
+    const expanded = group.querySelector(':checked') !== null;
+    animateBubble(expanded);
+  }
+
+  control.querySelectorAll('input[type="radio"]').forEach(input => {
+    input.addEventListener('change', checkState);
+  });
+
+  // Initial state
+  checkState();
+});
+</script>
+</body>
+</html>