@mks2508/mks-ui 0.6.8 → 0.8.0

package/dist/index.css

@@ -1,132 +1,406 @@
-@import "tailwindcss";
-@import "tw-animate-css";
-@import "shadcn/tailwind.css";
-@import "@fontsource-variable/geist-mono";
-
-@custom-variant dark (&:is(.dark *));
-
-:root {
-    --background: oklch(1 0 0);
-    --foreground: oklch(0.145 0 0);
-    --card: oklch(1 0 0);
-    --card-foreground: oklch(0.145 0 0);
-    --popover: oklch(1 0 0);
-    --popover-foreground: oklch(0.145 0 0);
-    --primary: oklch(0.577 0.245 27.325);
-    --primary-foreground: oklch(0.971 0.013 17.38);
-    --secondary: oklch(0.967 0.001 286.375);
-    --secondary-foreground: oklch(0.21 0.006 285.885);
-    --muted: oklch(0.97 0 0);
-    --muted-foreground: oklch(0.556 0 0);
-    --accent: oklch(0.97 0 0);
-    --accent-foreground: oklch(0.205 0 0);
-    --destructive: oklch(0.58 0.22 27);
-    --border: oklch(0.922 0 0);
-    --input: oklch(0.922 0 0);
-    --ring: oklch(0.708 0 0);
-    --chart-1: oklch(0.808 0.114 19.571);
-    --chart-2: oklch(0.637 0.237 25.331);
-    --chart-3: oklch(0.577 0.245 27.325);
-    --chart-4: oklch(0.505 0.213 27.518);
-    --chart-5: oklch(0.444 0.177 26.899);
-    --radius: 0.625rem;
-    --sidebar: oklch(0.985 0 0);
-    --sidebar-foreground: oklch(0.145 0 0);
-    --sidebar-primary: oklch(0.577 0.245 27.325);
-    --sidebar-primary-foreground: oklch(0.971 0.013 17.38);
-    --sidebar-accent: oklch(0.97 0 0);
-    --sidebar-accent-foreground: oklch(0.205 0 0);
-    --sidebar-border: oklch(0.922 0 0);
-    --sidebar-ring: oklch(0.708 0 0);
-}
-
-.dark {
-    --background: oklch(0.145 0 0);
-    --foreground: oklch(0.985 0 0);
-    --card: oklch(0.205 0 0);
-    --card-foreground: oklch(0.985 0 0);
-    --popover: oklch(0.205 0 0);
-    --popover-foreground: oklch(0.985 0 0);
-    --primary: oklch(0.637 0.237 25.331);
-    --primary-foreground: oklch(0.971 0.013 17.38);
-    --secondary: oklch(0.274 0.006 286.033);
-    --secondary-foreground: oklch(0.985 0 0);
-    --muted: oklch(0.269 0 0);
-    --muted-foreground: oklch(0.708 0 0);
-    --accent: oklch(0.371 0 0);
-    --accent-foreground: oklch(0.985 0 0);
-    --destructive: oklch(0.704 0.191 22.216);
-    --border: oklch(1 0 0 / 10%);
-    --input: oklch(1 0 0 / 15%);
-    --ring: oklch(0.556 0 0);
-    --chart-1: oklch(0.808 0.114 19.571);
-    --chart-2: oklch(0.637 0.237 25.331);
-    --chart-3: oklch(0.577 0.245 27.325);
-    --chart-4: oklch(0.505 0.213 27.518);
-    --chart-5: oklch(0.444 0.177 26.899);
-    --sidebar: oklch(0.205 0 0);
-    --sidebar-foreground: oklch(0.985 0 0);
-    --sidebar-primary: oklch(0.637 0.237 25.331);
-    --sidebar-primary-foreground: oklch(0.971 0.013 17.38);
-    --sidebar-accent: oklch(0.269 0 0);
-    --sidebar-accent-foreground: oklch(0.985 0 0);
-    --sidebar-border: oklch(1 0 0 / 10%);
-    --sidebar-ring: oklch(0.556 0 0);
-}
-
-@theme inline {
-    --font-mono: 'Geist Mono Variable', monospace;
-    --color-sidebar-ring: var(--sidebar-ring);
-    --color-sidebar-border: var(--sidebar-border);
-    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-    --color-sidebar-accent: var(--sidebar-accent);
-    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-    --color-sidebar-primary: var(--sidebar-primary);
-    --color-sidebar-foreground: var(--sidebar-foreground);
-    --color-sidebar: var(--sidebar);
-    --color-chart-5: var(--chart-5);
-    --color-chart-4: var(--chart-4);
-    --color-chart-3: var(--chart-3);
-    --color-chart-2: var(--chart-2);
-    --color-chart-1: var(--chart-1);
-    --color-ring: var(--ring);
-    --color-input: var(--input);
-    --color-border: var(--border);
-    --color-destructive: var(--destructive);
-    --color-accent-foreground: var(--accent-foreground);
-    --color-accent: var(--accent);
-    --color-muted-foreground: var(--muted-foreground);
-    --color-muted: var(--muted);
-    --color-secondary-foreground: var(--secondary-foreground);
-    --color-secondary: var(--secondary);
-    --color-primary-foreground: var(--primary-foreground);
-    --color-primary: var(--primary);
-    --color-popover-foreground: var(--popover-foreground);
-    --color-popover: var(--popover);
-    --color-card-foreground: var(--card-foreground);
-    --color-card: var(--card);
-    --color-foreground: var(--foreground);
-    --color-background: var(--background);
-    --radius-sm: calc(var(--radius) - 4px);
-    --radius-md: calc(var(--radius) - 2px);
-    --radius-lg: var(--radius);
-    --radius-xl: calc(var(--radius) + 4px);
-    --radius-2xl: calc(var(--radius) + 8px);
-    --radius-3xl: calc(var(--radius) + 12px);
-    --radius-4xl: calc(var(--radius) + 16px);
-}
-
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-    }
-  body {
-    @apply font-sans bg-background text-foreground;
-    }
-  html {
-    @apply font-sans;
-    }
-}/**
+
+
+/* react-ui/blocks/Sidebar/animations/tooltip.css */
+
+/**
+ * Tooltip Transition Keyframes
+ *
+ * Sistema de animaciones CSS para transiciones de tooltip con:
+ * - Items staggered enter/exit
+ * - Grid-based height transitions
+ * - 3D title rotations
+ *
+ * Performance: GPU-accelerated (transform + opacity only)
+ */
+
+/* ============================================================================
+   ITEMS ANIMATIONS - Staggered Enter/Exit
+   ============================================================================ */
+
+@keyframes tooltip-item-enter {
+  from {
+    opacity: 0;
+    transform: translateX(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes tooltip-item-exit {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(-4px);
+  }
+}
+
+/**
+ * Item States con CSS Custom Properties
+ *
+ * Uso: <div style="--animation-order: 0" data-state="entering">
+ */
+.sidebar-sublink[data-state="entering"] {
+  animation: tooltip-item-enter 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  animation-delay: calc(var(--animation-order, 0) * 30ms + 150ms);
+  animation-fill-mode: both;
+}
+
+.sidebar-sublink[data-state="leaving"] {
+  animation: tooltip-item-exit 100ms cubic-bezier(0.4, 0, 0.6, 1);
+  animation-delay: calc(var(--animation-order, 0) * 20ms);
+  animation-fill-mode: both;
+}
+
+/* ============================================================================
+   TITLE 3D ROTATIONS
+   ============================================================================ */
+
+/**
+ * Title Rotate Up (direction-aware)
+ * Usado cuando navegamos hacia arriba en el sidebar
+ */
+@keyframes tooltip-title-rotate-up {
+  from {
+    transform: rotateX(0deg);
+    opacity: 1;
+  }
+  to {
+    transform: rotateX(-90deg);
+    opacity: 0;
+  }
+}
+
+@keyframes tooltip-title-enter-from-below {
+  from {
+    transform: rotateX(90deg);
+    opacity: 0;
+  }
+  to {
+    transform: rotateX(0deg);
+    opacity: 1;
+  }
+}
+
+/**
+ * Title Rotate Down (direction-aware)
+ * Usado cuando navegamos hacia abajo en el sidebar
+ */
+@keyframes tooltip-title-rotate-down {
+  from {
+    transform: rotateX(0deg);
+    opacity: 1;
+  }
+  to {
+    transform: rotateX(90deg);
+    opacity: 0;
+  }
+}
+
+@keyframes tooltip-title-enter-from-above {
+  from {
+    transform: rotateX(-90deg);
+    opacity: 0;
+  }
+  to {
+    transform: rotateX(0deg);
+    opacity: 1;
+  }
+}
+
+/**
+ * Title States
+ */
+.tooltip-title[data-direction="up"][data-state="leaving"] {
+  animation: tooltip-title-rotate-up 250ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+.tooltip-title[data-direction="up"][data-state="entering"] {
+  animation: tooltip-title-enter-from-below 250ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+.tooltip-title[data-direction="down"][data-state="leaving"] {
+  animation: tooltip-title-rotate-down 250ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+.tooltip-title[data-direction="down"][data-state="entering"] {
+  animation: tooltip-title-enter-from-above 250ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+/* ============================================================================
+   3D CUBE FACES (Enfoque A: Multi-cara)
+   ============================================================================ */
+
+/**
+ * Cubo 3D con 6 caras para títulos
+ *
+ * Estructura:
+ * .title-scene (perspective)
+ *   └─ .title-cube (preserve-3d)
+ *       ├─ .title-face--front
+ *       ├─ .title-face--back
+ *       ├─ .title-face--top
+ *       ├─ .title-face--bottom
+ *       ├─ .title-face--left
+ *       └─ .title-face--right
+ */
+
+.title-scene {
+  perspective: 600px;
+  position: relative;
+  width: 100%;
+  height: 2rem;
+}
+
+.title-cube {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  transform-style: preserve-3d;
+  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  /* Empujar hacia atrás para evitar blur en texto */
+  transform: translateZ(-1rem);
+}
+
+.title-face {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 0 1rem;
+  font-weight: 500;
+}
+
+/* Posicionamiento de caras - Vertical rotation (rotateX) */
+.title-face--front {
+  transform: rotateX(0deg) translateZ(1rem);
+}
+
+.title-face--top {
+  transform: rotateX(90deg) translateZ(1rem);
+}
+
+.title-face--bottom {
+  transform: rotateX(-90deg) translateZ(1rem);
+}
+
+.title-face--back {
+  transform: rotateX(180deg) translateZ(1rem);
+}
+
+/* Estados del cubo - Direction-aware */
+.title-cube[data-face="front"] {
+  transform: translateZ(-1rem) rotateX(0deg);
+}
+
+.title-cube[data-face="top"] {
+  transform: translateZ(-1rem) rotateX(-90deg);
+}
+
+.title-cube[data-face="bottom"] {
+  transform: translateZ(-1rem) rotateX(90deg);
+}
+
+.title-cube[data-face="back"] {
+  transform: translateZ(-1rem) rotateX(180deg);
+}
+
+/* ============================================================================
+   GRID HEIGHT TRANSITION (Grid Trick)
+   ============================================================================ */
+
+/**
+ * Grid trick para height: auto transitions
+ *
+ * Técnica: grid-template-rows: 0fr → 1fr
+ * Browser support: Chrome 107+, Firefox 117+, Safari 16.4+
+ */
+
+.tooltip-content-grid {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 200ms cubic-bezier(0.4, 0, 0.2, 1);
+  transition-delay: 50ms; /* Empieza después del fade-out de items */
+}
+
+.tooltip-content-grid[data-state="open"] {
+  grid-template-rows: 1fr;
+}
+
+.tooltip-content-inner {
+  overflow: hidden;
+  min-height: 0; /* Crítico para que grid trick funcione */
+}
+
+/* ============================================================================
+   UTILITY CLASSES
+   ============================================================================ */
+
+/**
+ * Contenedor con perspective para títulos crossfade
+ */
+.tooltip-title-perspective {
+  perspective: 600px;
+  position: relative;
+  width: 100%;
+  height: 2rem;
+  overflow: hidden;
+}
+
+/**
+ * Disable animations durante hover rápido (opcional)
+ * Usar con cuidado: puede causar flickering
+ */
+.tooltip-no-animations * {
+  animation: none !important;
+  transition: none !important;
+}
+
+/* ============================================================================
+   DEBUG HELPERS
+   ============================================================================ */
+
+/**
+ * Visualización de estados en debug mode
+ */
+[data-tooltip-debug="true"] .sidebar-sublink[data-state]::before {
+  content: attr(data-state);
+  position: absolute;
+  top: 0;
+  right: 0;
+  font-size: 8px;
+  background: rgba(255, 0, 0, 0.8);
+  color: white;
+  padding: 2px 4px;
+  border-radius: 2px;
+  pointer-events: none;
+  z-index: 1000;
+}
+
+[data-tooltip-debug="true"] .tooltip-title[data-direction]::after {
+  content: "dir:" attr(data-direction);
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  font-size: 8px;
+  background: rgba(0, 0, 255, 0.8);
+  color: white;
+  padding: 2px 4px;
+  border-radius: 2px;
+  pointer-events: none;
+  z-index: 1000;
+}
+
+/* ============================================================================
+   PERFORMANCE OPTIMIZATIONS
+   ============================================================================ */
+
+/**
+ * GPU acceleration hints
+ */
+.sidebar-sublink[data-state],
+.tooltip-title[data-state],
+.title-cube {
+  will-change: transform, opacity;
+}
+
+/**
+ * Contain layout/paint/style para mejor performance
+ */
+.tooltip-content-grid {
+  contain: layout style paint;
+}
+
+/**
+ * Reduce motion para accesibilidad
+ */
+@media (prefers-reduced-motion: reduce) {
+  .sidebar-sublink[data-state],
+  .tooltip-title[data-state],
+  .title-cube,
+  .tooltip-content-grid {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+
+
+/* react-ui/blocks/Terminal/panel/TerminalFilterDropdown/terminal-filter-dropdown.module.css */
+
+/**
+ * TerminalFilterDropdown Styles.
+ *
+ * Uses CSS Anchor Positioning API for dropdown placement.
+ * Button acts as anchor, dropdown is positioned relative to it
+ * with automatic flip behavior at viewport edges.
+ *
+ * @module components/devenv/terminal/panel/terminal-filter-dropdown/styles
+ */
+
+/* Trigger button - acts as CSS anchor */
+.triggerButton {
+  anchor-name: --filter-dropdown-anchor;
+}
+
+/* Dropdown menu - anchored to trigger button */
+.dropdownMenu {
+  position-anchor: --filter-dropdown-anchor;
+  position: fixed;
+
+  /* Position below and left-aligned */
+  left: anchor(left);
+  top: anchor(bottom);
+  margin-top: 4px;
+
+  /* Flip to above if no room below */
+  position-try-fallbacks: flip-block, flip-inline;
+
+  min-width: 180px;
+  z-index: 50;
+
+  /* Hidden by default */
+  display: none;
+  opacity: 0;
+  transform: translateY(-4px);
+  transition: opacity 0.15s ease-out, transform 0.15s ease-out;
+  pointer-events: none;
+}
+
+.dropdownMenu[data-open="true"] {
+  display: block;
+  opacity: 1;
+  transform: translateY(0);
+  pointer-events: auto;
+}
+
+/* Fallback for browsers without CSS Anchor Positioning */
+@supports not (anchor-name: none) {
+  .dropdownMenu {
+    position: absolute;
+    left: 0;
+    top: calc(100% + 4px);
+    z-index: 50;
+  }
+
+  .dropdownMenu[data-open="true"] {
+    display: block;
+  }
+}
+
+
+
+/* react-ui/blocks/Terminal/panel/TerminalSessionTabs/terminal-session-tabs.module.css */
+
+/**
  * TerminalSessionTabs Dropdown Styles.
  *
  * Uses CSS Anchor Positioning API for the "add container" dropdown.
@@ -186,103 +460,675 @@
   }
 }
 
-/**
- * TerminalFilterDropdown Styles.
+
+
+/* react-ui/components/MorphingPopover/morphing-popover.module.css */
+
+/* CSS Variables for anchor positioning */
+.morphingPopoverContainer {
+  position: relative;
+  display: inline-block;
+  --anchor-name: morphing-trigger;
+  --target-width: 220px;
+  --target-height: 120px;
+  --transition-duration: 0.2s;
+}
+
+/* Trigger button styles */
+.morphingTrigger {
+  anchor-name: var(--anchor-name);
+  width: 44px;
+  aspect-ratio: 1;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  font-size: 24px;
+  cursor: pointer;
+  border: none;
+  background: transparent;
+  transition: background-color 0.2s;
+}
+
+.morphingTrigger:hover {
+  background-color: hsl(var(--muted) / 0.5);
+}
+
+/* Popover styles - anchored to trigger by default */
+.morphingPopover {
+  position-anchor: var(--anchor-name);
+  left: anchor(left);
+  top: anchor(top);
+  width: anchor-size(width);
+  min-height: 0;
+  border-radius: 50%;
+  overflow: hidden;
+  padding: 0;
+  height: anchor-size(height);
+  transition-behavior: allow-discrete;
+  transition-property: display, overlay, width, height, top,
+    border-radius, left, position-anchor, transform, opacity;
+  transition-duration: var(--transition-duration);
+  transition-timing-function: ease-out;
+  transform-origin: center center;
+  opacity: 0;
+}
+
+/* When popover is open - expand to target size */
+.morphingPopover:popover-open {
+  position-anchor: fixed;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: var(--target-width);
+  height: var(--target-height);
+  border-radius: 12px;
+  opacity: 1;
+  border: 1px solid hsl(var(--border));
+  background: hsl(var(--background));
+  box-shadow: 0 10px 40px -10px hsl(var(--foreground) / 0.3);
+}
+
+/* Starting style for animation - browser support required */
+@starting-style {
+  .morphingPopover:popover-open {
+    position-anchor: var(--anchor-name);
+    left: anchor(left);
+    top: anchor(top);
+    transform: none;
+    border-radius: 50%;
+    width: anchor-size(width);
+    height: anchor-size(height);
+    opacity: 0;
+  }
+}
+
+/* Fallback for browsers without anchor positioning */
+@supports not (anchor-name: none) {
+  .morphingPopover {
+    position: fixed;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%) scale(0.8);
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .morphingPopover:popover-open {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  @starting-style {
+    .morphingPopover:popover-open {
+      transform: translate(-50%, -50%) scale(0.8);
+      opacity: 0;
+    }
+  }
+}
+
+/* Variant: Morphing to a specific target element */
+.morphingPopoverTargetContainer {
+  position: relative;
+  display: inline-block;
+  --anchor-name: morphing-trigger;
+  --target-anchor-name: morphing-target;
+  --transition-duration: 0.2s;
+}
+
+.morphingPopoverTarget {
+  position-anchor: var(--anchor-name);
+  left: anchor(left);
+  top: anchor(top);
+  width: anchor-size(width);
+  min-height: 0;
+  border-radius: 50%;
+  overflow: hidden;
+  padding: 0;
+  height: anchor-size(height);
+  transition-behavior: allow-discrete;
+  transition-property: display, overlay, width, height, top,
+    border-radius, left, position-anchor, transform, opacity;
+  transition-duration: var(--transition-duration);
+  transition-timing-function: ease-out;
+}
+
+.morphingPopoverTarget:popover-open {
+  position-anchor: var(--target-anchor-name);
+  left: anchor(left);
+  top: anchor(top);
+  border-radius: 12px;
+  min-width: 200px;
+  min-height: 120px;
+  border: 1px solid hsl(var(--border));
+  background: hsl(var(--background));
+  box-shadow: 0 10px 40px -10px hsl(var(--foreground) / 0.3);
+  opacity: 1;
+}
+
+@starting-style {
+  .morphingPopoverTarget:popover-open {
+    position-anchor: var(--anchor-name);
+    left: anchor(left);
+    top: anchor(top);
+    border-radius: 50%;
+    width: anchor-size(width);
+    height: anchor-size(height);
+    opacity: 0;
+  }
+}
+
+
+
+/* react-ui/primitives/DotMatrix/dot.css */
+
+/* =============================================================================
+ *  DotMatrix — progressive fill model.
  *
- * Uses CSS Anchor Positioning API for dropdown placement.
- * Button acts as anchor, dropdown is positioned relative to it
- * with automatic flip behavior at viewport edges.
+ *  Cells light up one at a time in `pattern` order, stay lit until the
+ *  cycle resets, then repeat. Implementation uses ONE CSS animation per
+ *  matrix that drives a registered custom property `--dm-phase` from
+ *  0 → 1 (fill), holds it at 1 (hold), then snaps back to 0 (reset)
+ *  for a rest period.
  *
- * @module components/devenv/terminal/panel/terminal-filter-dropdown/styles
- */
+ *  Each cell carries a `--dm-threshold` (its position in the fill
+ *  sequence, 0..1) and computes its own `::before` opacity as a step
+ *  across `phase - threshold`, multiplied by `--dm-edge-sharpness` so
+ *  the edge can range from "instant snap" to "warm fade".
+ *
+ *  Perf shape: N matrices = N animations total (not N × cells). Cell
+ *  opacity is computed at paint time by calc(); the compositor batches
+ *  updates via the shared phase var. With `contain: layout style paint`
+ *  each cell is isolated so work doesn't cascade.
+ * ============================================================================= */
+
+@property --dm-phase {
+	syntax: '<number>';
+	initial-value: 0;
+	inherits: true;
+}
+
+.dm-root {
+	display: grid;
+	width: 100%;
+	gap: var(--dm-gap, 5px);
+	padding: var(--dm-pad, 0.25rem);
+	border-radius: 0.5rem;
+	background-color: transparent;
+
+	/* Skip render work when the matrix is offscreen. */
+	content-visibility: auto;
+	contain-intrinsic-size: auto 200px;
+	transform: translateZ(0);
+
+	--dm-on: var(--foreground);
+	--dm-off: color-mix(in oklch, var(--foreground) 12%, transparent);
+	--dm-glow: color-mix(in oklch, var(--foreground) 50%, transparent);
+}
+
+/* ─── Cell: base OFF layer — neutral dim ──────────────────────────────── */
+
+.dm-cell {
+	position: relative;
+	aspect-ratio: 1 / 1;
+	min-width: 4px;
+	min-height: 4px;
+	border-radius: var(--dm-radius, 32%);
+	background-color: color-mix(in oklch, var(--foreground) 10%, transparent);
+	opacity: var(--dm-off-opacity, 0.45);
+	transform: scale(var(--dm-off-scale, 0.9));
+	contain: layout style paint;
+
+	--dm-threshold: 0;
+	--dm-stagger-delay: 0ms;
+}
+
+/* ─── Pseudo: ON layer — LED look, fades in as phase crosses threshold ─ */
+
+.dm-cell::before {
+	content: '';
+	position: absolute;
+	inset: 0;
+	border-radius: inherit;
+	background-color: var(--dm-on);
+	background-image:
+		radial-gradient(
+			circle at 32% 26%,
+			rgb(255 255 255 / 0.35) 0%,
+			rgb(255 255 255 / 0.12) 18%,
+			transparent 48%
+		),
+		radial-gradient(
+			circle at 70% 78%,
+			rgb(0 0 0 / 0.22) 0%,
+			transparent 60%
+		);
+	box-shadow:
+		inset 0 0 1px rgb(255 255 255 / 0.55),
+		inset 0 0 0 1px color-mix(in oklch, var(--dm-on) 65%, transparent),
+		inset 0 -1px 2px color-mix(in oklch, var(--dm-on) 40%, black 20%);
+	opacity: 0;
+	pointer-events: none;
+}
+
+.dm-root[data-variant='glow'] .dm-cell::before {
+	box-shadow:
+		inset 0 0 1px rgb(255 255 255 / 0.55),
+		inset 0 0 0 1px color-mix(in oklch, var(--dm-on) 65%, transparent),
+		inset 0 -1px 2px color-mix(in oklch, var(--dm-on) 40%, black 20%),
+		0 0 2px var(--dm-glow),
+		0 0 6px var(--dm-glow),
+		0 0 12px color-mix(in oklch, var(--dm-glow) 55%, transparent);
+}
+
+/* ─── Running: phase animates on root, cells derive state from it ────── */
+
+.dm-root[data-status='running'] {
+	animation-name: var(--dm-anim-phase);
+	animation-duration: var(--dm-cycle-total, 2600ms);
+	animation-iteration-count: infinite;
+	animation-timing-function: linear;
+	animation-fill-mode: both;
+}
+
+/* Lit fraction for THIS cell — 0 when off, 1 when fully filled, ramped
+ * near the threshold by `--dm-edge-sharpness`. Reused by both the pseudo
+ * opacity (the LED glow) and the cell's scale (grows when lit). */
+.dm-root[data-status='running'] .dm-cell {
+	opacity: 1;
+	transform: scale(
+		calc(
+			var(--dm-off-scale, 0.88) +
+			(var(--dm-on-scale, 1) - var(--dm-off-scale, 0.88)) *
+			clamp(
+				0,
+				(var(--dm-phase) - var(--dm-threshold)) *
+					var(--dm-edge-sharpness, 50),
+				1
+			)
+		)
+	);
+}
+
+.dm-root[data-status='running'] .dm-cell::before {
+	opacity: clamp(
+		0,
+		calc(
+			(var(--dm-phase) - var(--dm-threshold)) *
+			var(--dm-edge-sharpness, 50)
+		),
+		1
+	);
+}
+
+/* ─── Accent cells ────────────────────────────────────────────────────── */
+
+.dm-cell[data-accent='true'] {
+	opacity: 1;
+	transform: scale(1);
+}
+
+.dm-cell[data-accent='true']::before {
+	background-color: var(--primary);
+	background-image: none;
+	box-shadow:
+		inset 0 0 1px rgb(255 255 255 / 0.5),
+		0 0 3px color-mix(in oklch, var(--primary) 70%, transparent),
+		0 0 7px color-mix(in oklch, var(--primary) 50%, transparent);
+	opacity: 1 !important;
+}
+
+/* ─── Lifecycle FINAL animations ──────────────────────────────────────── */
+
+@keyframes dm-success-pop {
+	0% {
+		transform: scale(0.94);
+		filter: brightness(0.7);
+	}
+	45% {
+		transform: scale(1.18);
+		filter: brightness(1.4);
+	}
+	100% {
+		transform: scale(1);
+		filter: brightness(1);
+	}
+}
+
+@keyframes dm-fail-strobe {
+	0% {
+		transform: scale(1);
+		filter: brightness(1);
+	}
+	22% {
+		transform: scale(1.22);
+		filter: brightness(1.55) saturate(1.4);
+	}
+	55% {
+		transform: scale(0.92);
+		filter: brightness(0.75);
+	}
+	100% {
+		transform: scale(0.97);
+		filter: brightness(1);
+	}
+}
+
+@keyframes dm-cancelled-dim {
+	0% {
+		transform: scale(1);
+		opacity: 1;
+	}
+	100% {
+		transform: scale(0.9);
+		opacity: 0.55;
+	}
+}
+
+.dm-root[data-status='success'] {
+	animation: none;
+}
+.dm-root[data-status='success'] .dm-cell {
+	opacity: 1;
+	transform: scale(1);
+	animation: dm-success-pop 520ms cubic-bezier(0.2, 0, 0.2, 1) both;
+	animation-delay: var(--dm-stagger-delay, 0ms);
+}
+.dm-root[data-status='success'] .dm-cell::before {
+	opacity: 1;
+}
+
+.dm-root[data-status='failed'] {
+	animation: none;
+}
+.dm-root[data-status='failed'] .dm-cell {
+	opacity: 1;
+	animation: dm-fail-strobe 560ms cubic-bezier(0.2, 0, 0.2, 1) both;
+	animation-delay: var(--dm-stagger-delay, 0ms);
+}
+.dm-root[data-status='failed'] .dm-cell::before {
+	background-color: var(--destructive);
+	box-shadow:
+		inset 0 0 1px rgb(255 255 255 / 0.5),
+		inset 0 0 0 1px color-mix(in oklch, var(--destructive) 55%, transparent),
+		inset 0 -1px 2px color-mix(in oklch, var(--destructive) 40%, black 20%);
+	opacity: 1;
+}
+.dm-root[data-status='failed'][data-variant='glow'] .dm-cell::before {
+	box-shadow:
+		inset 0 0 1px rgb(255 255 255 / 0.55),
+		inset 0 0 0 1px color-mix(in oklch, var(--destructive) 55%, transparent),
+		inset 0 -1px 2px color-mix(in oklch, var(--destructive) 40%, black 20%),
+		0 0 3px color-mix(in oklch, var(--destructive) 70%, transparent),
+		0 0 9px color-mix(in oklch, var(--destructive) 55%, transparent);
+}
+
+.dm-root[data-status='cancelled'] {
+	animation: none;
+}
+.dm-root[data-status='cancelled'] .dm-cell {
+	background-color: color-mix(in oklch, var(--foreground) 22%, transparent);
+	opacity: 0.65;
+	animation: dm-cancelled-dim 380ms cubic-bezier(0.4, 0, 0.8, 0.6) both;
+	animation-delay: var(--dm-stagger-delay, 0ms);
+}
+.dm-root[data-status='cancelled'] .dm-cell::before {
+	opacity: 0;
+}
 
-/* Trigger button - acts as CSS anchor */
-.triggerButton {
-  anchor-name: --filter-dropdown-anchor;
+.dm-root[data-status='idle'] {
+	animation: none;
+}
+.dm-root[data-status='idle'] .dm-cell::before {
+	opacity: 0;
+}
+
+/* ─── Theme-token palettes ────────────────────────────────────────────── */
+
+.dm--foreground {
+	--dm-on: var(--foreground);
+	--dm-off: color-mix(in oklch, var(--foreground) 12%, transparent);
+	--dm-glow: color-mix(in oklch, var(--foreground) 55%, transparent);
 }
 
-/* Dropdown menu - anchored to trigger button */
-.dropdownMenu {
-  position-anchor: --filter-dropdown-anchor;
-  position: fixed;
+.dm--primary {
+	--dm-on: var(--primary);
+	--dm-off: color-mix(in oklch, var(--primary) 14%, transparent);
+	--dm-glow: color-mix(in oklch, var(--primary) 65%, transparent);
+}
 
-  /* Position below and left-aligned */
-  left: anchor(left);
-  top: anchor(bottom);
-  margin-top: 4px;
+.dm--destructive {
+	--dm-on: var(--destructive);
+	--dm-off: color-mix(in oklch, var(--destructive) 14%, transparent);
+	--dm-glow: color-mix(in oklch, var(--destructive) 65%, transparent);
+}
+
+.dm--warning {
+	--dm-on: var(--warning);
+	--dm-off: color-mix(in oklch, var(--warning) 14%, transparent);
+	--dm-glow: color-mix(in oklch, var(--warning) 65%, transparent);
+}
+
+/* ─── Named palettes (OKLCH for stability) ────────────────────────────── */
+
+.dm--cyan {
+	--dm-on: oklch(90% 0.2 195);
+	--dm-off: oklch(40% 0.08 195 / 0.4);
+	--dm-glow: oklch(80% 0.25 195 / 0.95);
+}
+.dm--magenta {
+	--dm-on: oklch(85% 0.25 330);
+	--dm-off: oklch(40% 0.08 330 / 0.4);
+	--dm-glow: oklch(75% 0.3 330 / 0.95);
+}
+.dm--yellow {
+	--dm-on: oklch(95% 0.2 90);
+	--dm-off: oklch(50% 0.08 90 / 0.4);
+	--dm-glow: oklch(90% 0.25 90 / 0.95);
+}
+.dm--green {
+	--dm-on: oklch(90% 0.25 145);
+	--dm-off: oklch(40% 0.08 145 / 0.4);
+	--dm-glow: oklch(80% 0.3 145 / 0.95);
+}
+.dm--orange {
+	--dm-on: oklch(85% 0.22 50);
+	--dm-off: oklch(45% 0.08 50 / 0.4);
+	--dm-glow: oklch(75% 0.28 50 / 0.95);
+}
+.dm--blue {
+	--dm-on: oklch(80% 0.22 260);
+	--dm-off: oklch(40% 0.08 260 / 0.4);
+	--dm-glow: oklch(70% 0.28 260 / 0.95);
+}
+.dm--red {
+	--dm-on: oklch(70% 0.25 25);
+	--dm-off: oklch(40% 0.08 25 / 0.4);
+	--dm-glow: oklch(60% 0.3 25 / 0.95);
+}
+.dm--purple {
+	--dm-on: oklch(75% 0.22 300);
+	--dm-off: oklch(40% 0.08 300 / 0.4);
+	--dm-glow: oklch(65% 0.28 300 / 0.95);
+}
+.dm--teal {
+	--dm-on: oklch(82% 0.18 175);
+	--dm-off: oklch(40% 0.08 175 / 0.4);
+	--dm-glow: oklch(72% 0.24 175 / 0.95);
+}
+.dm--pink {
+	--dm-on: oklch(80% 0.2 350);
+	--dm-off: oklch(45% 0.08 350 / 0.4);
+	--dm-glow: oklch(70% 0.26 350 / 0.95);
+}
+.dm--lime {
+	--dm-on: oklch(88% 0.22 120);
+	--dm-off: oklch(45% 0.08 120 / 0.4);
+	--dm-glow: oklch(80% 0.28 120 / 0.95);
+}
+.dm--white {
+	--dm-on: oklch(98% 0 0);
+	--dm-off: oklch(50% 0 0 / 0.3);
+	--dm-glow: oklch(95% 0 0 / 0.85);
+}
+
+/* ─── Reduced motion — freeze animations ─────────────────────────────── */
+
+@media (prefers-reduced-motion: reduce) {
+	.dm-root[data-status='running'],
+	.dm-root[data-status='success'] .dm-cell,
+	.dm-root[data-status='failed'] .dm-cell,
+	.dm-root[data-status='cancelled'] .dm-cell {
+		animation: none !important;
+	}
+	.dm-cell {
+		transform: none;
+	}
+}
 
-  /* Flip to above if no room below */
-  position-try-fallbacks: flip-block, flip-inline;
 
-  min-width: 180px;
-  z-index: 50;
 
-  /* Hidden by default */
-  display: none;
-  opacity: 0;
-  transform: translateY(-4px);
-  transition: opacity 0.15s ease-out, transform 0.15s ease-out;
-  pointer-events: none;
+/* react-ui/primitives/GooeyMorphingSurface/gooey-morphing.css */
+
+/* =============================================================================
+ *  GooeyMorphingSurface — CSS layer for the SVG rect morph + HTML overlays.
+ *
+ *  Classes are prefixed `.gms-*` so they act as a manual scope (mks-ui's
+ *  rolldown build produces empty default-exports for CSS modules, so we use
+ *  plain CSS with explicit classnames referenced as string literals from
+ *  the component).
+ *
+ *  Every tunable value comes from inline CSS custom props set by the React
+ *  component at the root element. No hard-coded dimensions or timings here.
+ *
+ *  Technique recap: two <rect>s inside a <g filter="url(#gooey)">. Body rect
+ *  is a geometric CLONE of the pill when closed, and morphs into the card
+ *  geometry (x, y, width, height, rx, ry all interpolate) when open. The
+ *  gaussian-blur + alpha-threshold filter bends the overlapping silhouettes
+ *  into a single shape with a soft metaball throat.
+ * ============================================================================= */
+
+.gms-root {
+	position: relative;
+	display: inline-block;
+}
+
+.gms-shell {
+	position: relative;
+	width: var(--gms-card-w);
+	height: var(--gms-pill-h);
+	color: var(--gms-fill);
+	transition: height var(--gms-duration) var(--gms-ease);
+	/* Drop-shadow follows the fused silhouette. Chained filters = additive
+	 * shadow layers for depth without a hard box-shadow. */
+	filter: drop-shadow(0 16px 38px rgb(0 0 0 / 0.35))
+		drop-shadow(0 4px 10px rgb(0 0 0 / 0.18));
+}
+
+.gms-shell[data-open='true'] {
+	height: calc(var(--gms-pill-h) + var(--gms-card-h));
+}
+
+.gms-svg {
+	position: absolute;
+	top: 0;
+	left: 50%;
+	transform: translateX(-50%);
+	display: block;
+	overflow: visible;
+	pointer-events: none;
+}
+
+.gms-body-rect {
+	will-change: x, y, width, height;
+	transition:
+		x var(--gms-duration) var(--gms-ease),
+		y var(--gms-duration) var(--gms-ease),
+		width var(--gms-duration) var(--gms-ease),
+		height var(--gms-duration) var(--gms-ease),
+		rx var(--gms-duration) var(--gms-ease),
+		ry var(--gms-duration) var(--gms-ease);
+}
+
+.gms-pill {
+	position: absolute;
+	top: 0;
+	left: var(--gms-pill-x);
+	width: var(--gms-pill-w);
+	height: var(--gms-pill-h);
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	gap: 0.5rem;
+	color: var(--card-foreground);
+	pointer-events: none;
+	z-index: 2;
+}
+
+.gms-card {
+	position: absolute;
+	top: calc(var(--gms-pill-h) - var(--gms-overlap));
+	left: 0;
+	width: var(--gms-card-w);
+	height: var(--gms-card-h);
+	color: var(--card-foreground);
+	opacity: 0;
+	transform: translateY(4px);
+	pointer-events: none;
+	z-index: 2;
+	overflow: hidden;
+	border-radius: var(--gms-card-r);
+	transition:
+		opacity calc(var(--gms-duration) * 0.35) var(--gms-ease),
+		transform calc(var(--gms-duration) * 0.35) var(--gms-ease);
+}
+
+.gms-shell[data-open='true'] .gms-card {
+	opacity: 1;
+	transform: translateY(0);
+	pointer-events: auto;
+	transition:
+		opacity calc(var(--gms-duration) * 0.55) var(--gms-ease)
+			calc(var(--gms-duration) * 0.45),
+		transform calc(var(--gms-duration) * 0.55) var(--gms-ease)
+			calc(var(--gms-duration) * 0.45);
 }
 
-.dropdownMenu[data-open="true"] {
-  display: block;
-  opacity: 1;
-  transform: translateY(0);
-  pointer-events: auto;
+@media (prefers-reduced-motion: reduce) {
+	.gms-shell,
+	.gms-body-rect,
+	.gms-card {
+		transition-duration: 0.01ms !important;
+	}
 }
 
-/* Fallback for browsers without CSS Anchor Positioning */
-@supports not (anchor-name: none) {
-  .dropdownMenu {
-    position: absolute;
-    left: 0;
-    top: calc(100% + 4px);
-    z-index: 50;
-  }
 
-  .dropdownMenu[data-open="true"] {
-    display: block;
-  }
-}
+
+/* react-ui/primitives/waapi/Morph/techniques/useViewTransitions.module.css */
 
 /**
- * Tabs CSS Anchor Positioning.
+ * View Transitions API - Default transition styles.
  *
- * Zero-JS position tracking for the sliding indicator using CSS Anchor API.
- * The indicator automatically follows the active tab via anchor positioning.
+ * These styles apply to all view-transition pseudo-elements by default,
+ * eliminating the need for dynamic style injection based on transition names.
+ *
+ * Usage: Apply `view-transition-name` via inline style or CSS variable:
+ *   <div style={{ viewTransitionName: 'hero' }}>...</div>
+ *
+ * Or via CSS:
+ *   .my-element { view-transition-name: hero; }
  */
 
-/* Scope anchors per Tabs instance */
-[data-slot="tabs-list"] {
-  anchor-scope: --tabs-active;
+/* Default animation for all view transitions */
+::view-transition-old(*),
+::view-transition-new(*) {
+  animation-duration: 300ms;
+  animation-timing-function: ease-out;
 }
 
-/* Active tab becomes the anchor */
-[data-slot="tabs-tab"][data-active] {
-  anchor-name: --tabs-active;
-}
 
-/* Indicator follows the active anchor */
-[data-slot="tabs-indicator"] {
-  position-anchor: --tabs-active;
-  left: anchor(left);
-  right: anchor(right);
-  transition:
-    top 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
-    left 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
-    right 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
-    bottom 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
-    width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
-    height 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
-}
 
-/* Respect reduced motion preference */
-@media (prefers-reduced-motion: reduce) {
-  [data-slot="tabs-indicator"] {
-    transition-duration: 0ms;
-  }
-}
+/* react-ui/ui/DynamicToggle/DynamicToggle.css */
 
 /**
  * DynamicToggle v2 — CSS state transitions.
@@ -653,177 +1499,92 @@
   z-index: 1;
 }
 
-/**
- * View Transitions API - Default transition styles.
- *
- * These styles apply to all view-transition pseudo-elements by default,
- * eliminating the need for dynamic style injection based on transition names.
- *
- * Usage: Apply `view-transition-name` via inline style or CSS variable:
- *   <div style={{ viewTransitionName: 'hero' }}>...</div>
- *
- * Or via CSS:
- *   .my-element { view-transition-name: hero; }
- */
 
-/* Default animation for all view transitions */
-::view-transition-old(*),
-::view-transition-new(*) {
-  animation-duration: 300ms;
-  animation-timing-function: ease-out;
-}
 
-/* CSS Variables for anchor positioning */
-.morphingPopoverContainer {
-  position: relative;
-  display: inline-block;
-  --anchor-name: morphing-trigger;
-  --target-width: 220px;
-  --target-height: 120px;
-  --transition-duration: 0.2s;
-}
+/* react-ui/ui/GooeyButton/gooey.css */
 
-/* Trigger button styles */
-.morphingTrigger {
-  anchor-name: var(--anchor-name);
-  width: 44px;
-  aspect-ratio: 1;
-  border-radius: 50%;
-  display: grid;
-  place-items: center;
-  font-size: 24px;
-  cursor: pointer;
-  border: none;
-  background: transparent;
-  transition: background-color 0.2s;
-}
+/* =============================================================================
+ *  GooeyButton — transparent hit area over the pill region.
+ *
+ *  The visual pill is drawn by the <GooeyMorphingSurface> primitive; this
+ *  layer is a single button that captures clicks in both open and closed
+ *  states without painting anything. All layout math comes from the
+ *  primitive's CSS custom props (--gms-pill-w, --gms-pill-h).
+ * ============================================================================= */
 
-.morphingTrigger:hover {
-  background-color: hsl(var(--muted) / 0.5);
+.gbtn-host {
+	position: relative;
+	display: inline-block;
 }
 
-/* Popover styles - anchored to trigger by default */
-.morphingPopover {
-  position-anchor: var(--anchor-name);
-  left: anchor(left);
-  top: anchor(top);
-  width: anchor-size(width);
-  min-height: 0;
-  border-radius: 50%;
-  overflow: hidden;
-  padding: 0;
-  height: anchor-size(height);
-  transition-behavior: allow-discrete;
-  transition-property: display, overlay, width, height, top,
-    border-radius, left, position-anchor, transform, opacity;
-  transition-duration: var(--transition-duration);
-  transition-timing-function: ease-out;
-  transform-origin: center center;
-  opacity: 0;
+.gbtn-trigger {
+	position: absolute;
+	top: 0;
+	left: 50%;
+	transform: translateX(-50%);
+	z-index: 3;
+	width: var(--gms-pill-w);
+	height: var(--gms-pill-h);
+	padding: 0;
+	margin: 0;
+	border: 0;
+	background: transparent;
+	cursor: pointer;
+	font: inherit;
+	color: inherit;
+	/* Pill-shaped focus ring. */
+	border-radius: 9999px;
 }
 
-/* When popover is open - expand to target size */
-.morphingPopover:popover-open {
-  position-anchor: fixed;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  width: var(--target-width);
-  height: var(--target-height);
-  border-radius: 12px;
-  opacity: 1;
-  border: 1px solid hsl(var(--border));
-  background: hsl(var(--background));
-  box-shadow: 0 10px 40px -10px hsl(var(--foreground) / 0.3);
+.gbtn-trigger:focus-visible {
+	outline: 2px solid var(--ring, currentColor);
+	outline-offset: 2px;
 }
 
-/* Starting style for animation - browser support required */
-@starting-style {
-  .morphingPopover:popover-open {
-    position-anchor: var(--anchor-name);
-    left: anchor(left);
-    top: anchor(top);
-    transform: none;
-    border-radius: 50%;
-    width: anchor-size(width);
-    height: anchor-size(height);
-    opacity: 0;
-  }
+.gbtn-trigger:disabled {
+	cursor: not-allowed;
+	pointer-events: none;
 }
 
-/* Fallback for browsers without anchor positioning */
-@supports not (anchor-name: none) {
-  .morphingPopover {
-    position: fixed;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%) scale(0.8);
-    opacity: 0;
-    pointer-events: none;
-  }
 
-  .morphingPopover:popover-open {
-    transform: translate(-50%, -50%) scale(1);
-    opacity: 1;
-    pointer-events: auto;
-  }
 
-  @starting-style {
-    .morphingPopover:popover-open {
-      transform: translate(-50%, -50%) scale(0.8);
-      opacity: 0;
-    }
-  }
-}
+/* react-ui/ui/Tabs/Tabs.css */
 
-/* Variant: Morphing to a specific target element */
-.morphingPopoverTargetContainer {
-  position: relative;
-  display: inline-block;
-  --anchor-name: morphing-trigger;
-  --target-anchor-name: morphing-target;
-  --transition-duration: 0.2s;
+/**
+ * Tabs CSS Anchor Positioning.
+ *
+ * Zero-JS position tracking for the sliding indicator using CSS Anchor API.
+ * The indicator automatically follows the active tab via anchor positioning.
+ */
+
+/* Scope anchors per Tabs instance */
+[data-slot="tabs-list"] {
+  anchor-scope: --tabs-active;
 }
 
-.morphingPopoverTarget {
-  position-anchor: var(--anchor-name);
-  left: anchor(left);
-  top: anchor(top);
-  width: anchor-size(width);
-  min-height: 0;
-  border-radius: 50%;
-  overflow: hidden;
-  padding: 0;
-  height: anchor-size(height);
-  transition-behavior: allow-discrete;
-  transition-property: display, overlay, width, height, top,
-    border-radius, left, position-anchor, transform, opacity;
-  transition-duration: var(--transition-duration);
-  transition-timing-function: ease-out;
+/* Active tab becomes the anchor */
+[data-slot="tabs-tab"][data-active] {
+  anchor-name: --tabs-active;
 }
 
-.morphingPopoverTarget:popover-open {
-  position-anchor: var(--target-anchor-name);
+/* Indicator follows the active anchor */
+[data-slot="tabs-indicator"] {
+  position-anchor: --tabs-active;
   left: anchor(left);
-  top: anchor(top);
-  border-radius: 12px;
-  min-width: 200px;
-  min-height: 120px;
-  border: 1px solid hsl(var(--border));
-  background: hsl(var(--background));
-  box-shadow: 0 10px 40px -10px hsl(var(--foreground) / 0.3);
-  opacity: 1;
+  right: anchor(right);
+  transition:
+    top 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
+    left 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
+    right 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
+    bottom 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
+    width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
+    height 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
 
-@starting-style {
-  .morphingPopoverTarget:popover-open {
-    position-anchor: var(--anchor-name);
-    left: anchor(left);
-    top: anchor(top);
-    border-radius: 50%;
-    width: anchor-size(width);
-    height: anchor-size(height);
-    opacity: 0;
+/* Respect reduced motion preference */
+@media (prefers-reduced-motion: reduce) {
+  [data-slot="tabs-indicator"] {
+    transition-duration: 0ms;
   }
 }