opui-css 5.0.1 → 5.1.1

package/dist/opui.css

@@ -1,4 +1,4 @@
-@layer openprops, normalize, theme, components.root, components.extended, utils;
+@layer openprops, theme, normalize, components.root, components.extended, utils;
 
 /* Open Props */
 
@@ -995,73 +995,453 @@
 }
 }
 
-@layer openprops{
+/* Theme */
 
-:where(:root) {
-  --palette-hue: 250;
-  /* <angle */
-  --palette-hue-rotate-by: 0;
-  /* +- deg : warm or cool the palette */
-  --palette-chroma: 0.15;
-  /* 0-1 : lower to mute and pastel, over 2 at own risk */
+@property --color-1 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --color-2 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --color-3 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --color-4 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --color-5 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --color-6 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --color-7 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --color-8 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --color-9 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --color-10 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --color-11 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --color-12 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --color-13 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --color-14 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --color-15 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --color-16 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --gray-1 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --gray-2 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --gray-3 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --gray-4 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --gray-5 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --gray-6 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --gray-7 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --gray-8 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --gray-9 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --gray-10 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --gray-11 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --gray-12 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --gray-13 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --gray-14 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
 
-  /* New API: a single OKLCH source that drives the entire ramp.
-     The default below derives from the legacy --palette-hue / --palette-chroma
-     vars so themes that haven't migrated keep working unchanged. Themes opting
-     into the new API just set --palette-source directly. */
-  --palette-source: oklch(58% calc(0.21 * var(--palette-chroma, 1)) var(--palette-hue, 250));
+@property --gray-15 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
 }
 
-* {
-  --color-1: oklch(from var(--palette-source) 98% calc(0.03 * (c / 0.21)) calc(h + (0 * var(--palette-hue-rotate-by))));
-  --color-2: oklch(from var(--palette-source) 97% calc(0.06 * (c / 0.21)) calc(h + (1 * var(--palette-hue-rotate-by))));
-  --color-3: oklch(from var(--palette-source) 93% calc(0.1 * (c / 0.21)) calc(h + (2 * var(--palette-hue-rotate-by))));
-  --color-4: oklch(from var(--palette-source) 84% calc(0.12 * (c / 0.21)) calc(h + (3 * var(--palette-hue-rotate-by))));
-  --color-5: oklch(from var(--palette-source) 80% calc(0.16 * (c / 0.21)) calc(h + (4 * var(--palette-hue-rotate-by))));
-  --color-6: oklch(from var(--palette-source) 71% calc(0.19 * (c / 0.21)) calc(h + (5 * var(--palette-hue-rotate-by))));
-  --color-7: oklch(from var(--palette-source) 66% calc(0.2 * (c / 0.21)) calc(h + (6 * var(--palette-hue-rotate-by))));
-  --color-8: oklch(from var(--palette-source) 58% calc(0.21 * (c / 0.21)) calc(h + (7 * var(--palette-hue-rotate-by))));
-  --color-9: oklch(from var(--palette-source) 53% calc(0.2 * (c / 0.21)) calc(h + (8 * var(--palette-hue-rotate-by))));
-  --color-10: oklch(from var(--palette-source) 49% calc(0.19 * (c / 0.21)) calc(h + (9 * var(--palette-hue-rotate-by))));
-  --color-11: oklch(from var(--palette-source) 42% calc(0.17 * (c / 0.21)) calc(h + (10 * var(--palette-hue-rotate-by))));
-  --color-12: oklch(from var(--palette-source) 35% calc(0.15 * (c / 0.21)) calc(h + (11 * var(--palette-hue-rotate-by))));
-  --color-13: oklch(from var(--palette-source) 27% calc(0.12 * (c / 0.21)) calc(h + (12 * var(--palette-hue-rotate-by))));
-  --color-14: oklch(from var(--palette-source) 20% calc(0.09 * (c / 0.21)) calc(h + (13 * var(--palette-hue-rotate-by))));
-  --color-15: oklch(from var(--palette-source) 16% calc(0.07 * (c / 0.21)) calc(h + (14 * var(--palette-hue-rotate-by))));
-  --color-16: oklch(from var(--palette-source) 10% calc(0.05 * (c / 0.21)) calc(h + (15 * var(--palette-hue-rotate-by))));
+@property --gray-16 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
 }
 
-/* Gray ramp — derived from each --color-N step so it shares the palette's
-   per-step lightness curve. --gray-chroma / --gray-hue follow the Open Props
-   convention (hue is the third oklch arg, NOT lightness). Override either
-   in a theme to warm/cool the grays without redefining each --gray-N. */
-* {
-  --gray-chroma: 0.01;
-  --gray-hue: 255;
-
-  --gray-1: oklch(from var(--color-1) l var(--gray-chroma) var(--gray-hue));
-  --gray-2: oklch(from var(--color-2) l var(--gray-chroma) var(--gray-hue));
-  --gray-3: oklch(from var(--color-3) l var(--gray-chroma) var(--gray-hue));
-  --gray-4: oklch(from var(--color-4) l var(--gray-chroma) var(--gray-hue));
-  --gray-5: oklch(from var(--color-5) l var(--gray-chroma) var(--gray-hue));
-  --gray-6: oklch(from var(--color-6) l var(--gray-chroma) var(--gray-hue));
-  --gray-7: oklch(from var(--color-7) l var(--gray-chroma) var(--gray-hue));
-  --gray-8: oklch(from var(--color-8) l var(--gray-chroma) var(--gray-hue));
-  --gray-9: oklch(from var(--color-9) l var(--gray-chroma) var(--gray-hue));
-  --gray-10: oklch(from var(--color-10) l var(--gray-chroma) var(--gray-hue));
-  --gray-11: oklch(from var(--color-11) l var(--gray-chroma) var(--gray-hue));
-  --gray-12: oklch(from var(--color-12) l var(--gray-chroma) var(--gray-hue));
-  --gray-13: oklch(from var(--color-13) l var(--gray-chroma) var(--gray-hue));
-  --gray-14: oklch(from var(--color-14) l var(--gray-chroma) var(--gray-hue));
-  --gray-15: oklch(from var(--color-15) l var(--gray-chroma) var(--gray-hue));
-  --gray-16: oklch(from var(--color-16) l var(--gray-chroma) var(--gray-hue));
+@property --palette-source {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
 }
+
+@property --palette-hue {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 240;
+}
+
+@layer theme.palette {
+  :where(
+    :root,
+    .ui-warning,
+    .ui-critical,
+    .ui-info,
+    .ui-success,
+    [data-invalid],
+    del,
+    ins,
+    abbr,
+    dfn,
+    .ui-palette
+  ) {
+    --palette-hue: 250;
+    --palette-hue-rotate-by: 0;
+    --palette-chroma: 0.15;
+
+    --palette-source: oklch(
+      58% calc(0.21 * var(--palette-chroma, 1)) var(--palette-hue, 250)
+    );
+
+    /* Colors */
+    --color-1: oklch(
+      from var(--palette-source) 98% calc(0.03 * (c / 0.21))
+        calc(h + (0 * var(--palette-hue-rotate-by)))
+    );
+    --color-2: oklch(
+      from var(--palette-source) 97% calc(0.06 * (c / 0.21))
+        calc(h + (1 * var(--palette-hue-rotate-by)))
+    );
+    --color-3: oklch(
+      from var(--palette-source) 93% calc(0.1 * (c / 0.21))
+        calc(h + (2 * var(--palette-hue-rotate-by)))
+    );
+    --color-4: oklch(
+      from var(--palette-source) 84% calc(0.12 * (c / 0.21))
+        calc(h + (3 * var(--palette-hue-rotate-by)))
+    );
+    --color-5: oklch(
+      from var(--palette-source) 80% calc(0.16 * (c / 0.21))
+        calc(h + (4 * var(--palette-hue-rotate-by)))
+    );
+    --color-6: oklch(
+      from var(--palette-source) 71% calc(0.19 * (c / 0.21))
+        calc(h + (5 * var(--palette-hue-rotate-by)))
+    );
+    --color-7: oklch(
+      from var(--palette-source) 66% calc(0.2 * (c / 0.21))
+        calc(h + (6 * var(--palette-hue-rotate-by)))
+    );
+    --color-8: oklch(
+      from var(--palette-source) 58% calc(0.21 * (c / 0.21))
+        calc(h + (7 * var(--palette-hue-rotate-by)))
+    );
+    --color-9: oklch(
+      from var(--palette-source) 53% calc(0.2 * (c / 0.21))
+        calc(h + (8 * var(--palette-hue-rotate-by)))
+    );
+    --color-10: oklch(
+      from var(--palette-source) 49% calc(0.19 * (c / 0.21))
+        calc(h + (9 * var(--palette-hue-rotate-by)))
+    );
+    --color-11: oklch(
+      from var(--palette-source) 42% calc(0.17 * (c / 0.21))
+        calc(h + (10 * var(--palette-hue-rotate-by)))
+    );
+    --color-12: oklch(
+      from var(--palette-source) 35% calc(0.15 * (c / 0.21))
+        calc(h + (11 * var(--palette-hue-rotate-by)))
+    );
+    --color-13: oklch(
+      from var(--palette-source) 27% calc(0.12 * (c / 0.21))
+        calc(h + (12 * var(--palette-hue-rotate-by)))
+    );
+    --color-14: oklch(
+      from var(--palette-source) 20% calc(0.09 * (c / 0.21))
+        calc(h + (13 * var(--palette-hue-rotate-by)))
+    );
+    --color-15: oklch(
+      from var(--palette-source) 16% calc(0.07 * (c / 0.21))
+        calc(h + (14 * var(--palette-hue-rotate-by)))
+    );
+    --color-16: oklch(
+      from var(--palette-source) 10% calc(0.05 * (c / 0.21))
+        calc(h + (15 * var(--palette-hue-rotate-by)))
+    );
+
+    /* Grays */
+    --gray-chroma: 0.01;
+    --gray-hue: 255;
+
+    --gray-1: oklch(from var(--color-1) l var(--gray-chroma) var(--gray-hue));
+    --gray-2: oklch(from var(--color-2) l var(--gray-chroma) var(--gray-hue));
+    --gray-3: oklch(from var(--color-3) l var(--gray-chroma) var(--gray-hue));
+    --gray-4: oklch(from var(--color-4) l var(--gray-chroma) var(--gray-hue));
+    --gray-5: oklch(from var(--color-5) l var(--gray-chroma) var(--gray-hue));
+    --gray-6: oklch(from var(--color-6) l var(--gray-chroma) var(--gray-hue));
+    --gray-7: oklch(from var(--color-7) l var(--gray-chroma) var(--gray-hue));
+    --gray-8: oklch(from var(--color-8) l var(--gray-chroma) var(--gray-hue));
+    --gray-9: oklch(from var(--color-9) l var(--gray-chroma) var(--gray-hue));
+    --gray-10: oklch(from var(--color-10) l var(--gray-chroma) var(--gray-hue));
+    --gray-11: oklch(from var(--color-11) l var(--gray-chroma) var(--gray-hue));
+    --gray-12: oklch(from var(--color-12) l var(--gray-chroma) var(--gray-hue));
+    --gray-13: oklch(from var(--color-13) l var(--gray-chroma) var(--gray-hue));
+    --gray-14: oklch(from var(--color-14) l var(--gray-chroma) var(--gray-hue));
+    --gray-15: oklch(from var(--color-15) l var(--gray-chroma) var(--gray-hue));
+    --gray-16: oklch(from var(--color-16) l var(--gray-chroma) var(--gray-hue));
+  }
+}
+
+@layer theme {
+
+  /* 1. Color scheme */
+  .ui-light {
+    --color-scheme: light;
+  }
+
+  .ui-dark {
+    --color-scheme: dark;
+  }
+
+  :where(html) {
+    color-scheme: var(--color-scheme, light dark);
+
+    /* 2. Palette - override the values in core/palette.css */
+    --palette-hue: light-dark(var(--hue-green), var(--hue-blue));
+    --palette-chroma: 0.5;
+    /* --palette-source: oklch(.58 calc(.21 * .5) var(--hue-blue));   */
+
+    /* Gray palette also lives in core/palette.css. */
+    /*
+      --gray-hue: 255;
+      --gray-chroma: 0.01;
+    */
+
+    /* 3. Named colors (no severity meaning) — use when you literally want a green/red/etc. dot */
+    --blue: oklch(from var(--color-9) l 0.2 210);
+    --green: oklch(from var(--color-9) l 0.2 145);
+    --orange: oklch(from var(--color-7) l 0.2 75);
+    --red: oklch(from var(--color-9) l 0.2 25);
+
+    /* 4. Intent tokens
+      Severity (have scope classes below): --success, --info, --warning, --critical
+      Non-severity (value-only):           --primary, --neutral */
+    --success: var(--green);
+    --info: var(--blue);
+    --warning: var(--orange);
+    --critical: var(--red);
+    --neutral: var(--gray-9);
+
+    /* 5. Primary */
+    --primary: var(--color-8);
+    --primary-light: oklch(from var(--primary) calc(l * 1.25) c h);
+    --primary-dark: oklch(from var(--primary) calc(l * 0.75) c h);
+    --primary-contrast: var(--gray-1);
+
+    /* 6. Text */
+    --text-primary: light-dark(var(--gray-15), var(--gray-1));
+    --text-primary-contrast: light-dark(var(--gray-2), var(--gray-15));
+    --text-muted: light-dark(var(--gray-13), var(--gray-4));
+    --text-muted-contrast: light-dark(var(--gray-4), var(--gray-13));
+
+    /* 7. Surfaces */
+    --surface-default: light-dark(var(--gray-1), var(--gray-13));
+    --surface-filled: light-dark(var(--gray-4), var(--gray-15));
+    --surface-tonal: light-dark(var(--gray-3), var(--gray-12));
+    --surface-elevated: light-dark(var(--gray-1), var(--gray-12));
+
+    /* 8. Borders */
+    --border-color: light-dark(var(--gray-4), var(--gray-12));
+    --border-radius: var(--size-2);
+    --border-width: 1px;
+
+    /* 9. Focus ring */
+    --focus-ring-color: var(--primary);
+    --focus-ring-width: 2px;
+    --focus-ring-offset: 2px;
+    --focus-ring-style: solid;
+
+    /* 10. Typography */
+    --font-size-h1: var(--font-size-fluid-3);
+    --font-size-h2: var(--font-size-fluid-2);
+    --font-size-h3: var(--font-size-fluid-1);
+    --font-size-h4: var(--font-size-3);
+    --font-size-h5: var(--font-size-2);
+    --font-size-h6: var(--font-size-fluid-0);
+
+    /* Sneaking in an extra font size I want but Open Props doesn't provide. You can do whatever you want with your own theme. It's just CSS. */
+    --font-size-05: 0.875rem;
+
+    /* 11. Control sizes — shared scale for fields and buttons so they line up. */
+    --control-size-x-small: 28px;
+    --control-size-small: 32px;
+    --control-size: 40px;
+    --control-size-large: 46px;
+
+    --field-size-x-small: var(--control-size-x-small);
+    --field-size-small: var(--control-size-small);
+    --field-size: var(--control-size);
+    --field-size-large: var(--control-size-large);
+
+    --button-size-x-small: var(--control-size-x-small);
+    --button-size-small: var(--control-size-small);
+    --button-size: var(--control-size);
+    --button-size-large: var(--control-size-large);
+
+    /* 12. Field / input */
+    --field-border-color: var(--border-color);
+    --field-border-radius: var(--size-2);
+    --field-border-width: 1px;
+
+    /* 13. Button */
+    --button-border-radius: var(--size-2);
+  }
+
+  /* 14. Severity scope classes */
+  :where(.ui-critical, [data-invalid], del) {
+    --palette-source: oklch(0.58 0.21 var(--hue-red));
+    --palette-hue-rotate-by: 1;
+  }
+
+  :where(.ui-info, abbr, dfn) {
+    --palette-source: oklch(0.58 0.21 var(--hue-blue));
+    --palette-hue-rotate-by: 1;
+  }
+
+  :where(.ui-success, ins) {
+    --palette-source: oklch(0.58 0.21 var(--hue-green));
+    --palette-hue-rotate-by: 1;
+  }
+
+  :where(.ui-warning) {
+    --palette-source: oklch(0.58 0.21 var(--hue-orange));
+    --palette-hue-rotate-by: 1;
+  }
 }
 
 /* Normalize */
 
 @layer normalize {
-
   *,
   ::before,
   ::after {
@@ -1120,7 +1500,6 @@
     outline: none !important;
   }
 
-
   :where(:not(fieldset, progress, meter)) {
     background-origin: border-box;
     background-repeat: no-repeat;
@@ -1176,7 +1555,9 @@
 
   :focus-visible {
     /* Inverts the --_page-bg-color */
-    --_focus-visible-color: rgb(from var(--_page-bg-color) calc(255 - r) calc(255 - g) calc(255 - b));
+    --_focus-visible-color: rgb(
+      from var(--_page-bg-color) calc(255 - r) calc(255 - g) calc(255 - b)
+    );
 
     border-radius: var(--border-radius, 0px);
     outline: 2px solid var(--_focus-visible-color);
@@ -1185,7 +1566,7 @@
 
   @media (prefers-reduced-motion: no-preference) {
     :where(:focus-visible) {
-      transition: outline-offset .15 var(--ease-2);
+      transition: outline-offset 0.15 var(--ease-2);
     }
 
     :where(:not(:active):focus-visible) {
@@ -1197,23 +1578,28 @@
     outline-offset: var(--outline-offset, 0px);
   }
 
-  :where(a[href],
+  :where(
+    a[href],
     area,
     button,
-    input:not([type="text"],
+    input:not(
+      [type="text"],
       [type="email"],
       [type="number"],
       [type="password"],
       [type=""],
       [type="tel"],
-      [type="url"]),
+      [type="url"]
+    ),
     label[for],
     select,
-    summary) {
+    summary
+  ) {
     cursor: pointer;
   }
 
-  :where(a[href],
+  :where(
+    a[href],
     area,
     button,
     [role="button"],
@@ -1222,7 +1608,8 @@
     select,
     summary,
     textarea,
-    [tabindex]:not([tabindex*="-"])) {
+    [tabindex]:not([tabindex*="-"])
+  ) {
     -webkit-tap-highlight-color: transparent;
     touch-action: manipulation;
   }
@@ -1255,179 +1642,51 @@
   }
 }
 
-/* Theme */
+/* Components */
 
 /*
-  theme three theme setup
+* Components are divided into two categories - if they are stand-alone (root) or if they are built on top of others (extended).
 */
 
-@layer theme {
-
-  /* 1. Color scheme */
-  .ui-light {
-    --color-scheme: light;
-  }
+/*** Root components (no dependencies)  */
 
-  .ui-dark {
-    --color-scheme: dark;
-  }
+@layer components.root {
+  :where(.ui-button) {
+    --_color: light-dark(var(--color-16), var(--color-1));
+    --_color-contrast: light-dark(var(--color-1), var(--color-16));
+    --_color-tonal: var(--surface-tonal);
 
-  :where(html) {
-    color-scheme: var(--color-scheme, light dark);
+    --_accent: var(--_color);
+    --_accent-contrast: var(--_color-contrast);
+    --_accent-tonal: var(--_color-tonal);
+    --_accent-tonal-contrast: var(--_color);
 
-    /* 2. Palette source - one value to rule them all. Every other color is derived from this one.
-       Both light/dark branches are wired up via light-dark() so prefers-color-scheme works
-       automatically. Set them to different OKLCH values if you want a distinct dark-mode palette. */
-    --palette-source: light-dark(oklch(0.58 calc(0.21 * 0.5) var(--hue-blue)),
-        oklch(0.58 calc(0.21 * 0.5) var(--hue-blue)));
-    --palette-hue-rotate-by: 0;
+    --_default-hover-bg-color: light-dark(
+      oklch(from var(--_accent) l 0.01 h / 10%),
+      oklch(from var(--_accent) l 0.01 h / 20%)
+    );
+    --_default-active-bg-color: light-dark(
+      oklch(from var(--_accent) l 0.06 h / 20%),
+      oklch(from var(--_accent) l 0.06 h / 30%)
+    );
 
-    /* Gray ramp lives in core/palette.css. Override --gray-chroma or
-       --gray-hue here if this theme wants warmer/cooler grays. */
+    --_filled-hover-bg-color: light-dark(
+      oklch(from var(--_accent) calc(l + 0.2) c h),
+      oklch(from var(--_accent) calc(l - 0.1) c h)
+    );
+    --_filled-active-bg-color: light-dark(
+      oklch(from var(--_accent) calc(l + 0.3) c h),
+      oklch(from var(--_accent) calc(l - 0.15) c h)
+    );
+    --_outlined-active-bg-color: var(--_filled-active-bg-color);
 
-    /* 3. Named colors (no severity meaning) — use when you literally want a green/red/etc. dot */
-    --blue: oklch(from var(--color-9) l 0.2 210);
-    --green: oklch(from var(--color-9) l 0.2 145);
-    --orange: oklch(from var(--color-7) l 0.2 75);
-    --red: oklch(from var(--color-9) l 0.2 25);
-
-    /* 4. Intent tokens
-       Severity (have scope classes below): --success, --info, --warning, --critical
-       Non-severity (value-only):           --primary, --neutral */
-    --success: var(--green);
-    --info: var(--blue);
-    --warning: var(--orange);
-    --critical: var(--red);
-    --neutral: var(--gray-9);
-
-    /* 5. Primary */
-    --primary: var(--color-8);
-    --primary-light: oklch(from var(--primary) calc(l * 1.25) c h);
-    --primary-dark: oklch(from var(--primary) calc(l * 0.75) c h);
-    --primary-contrast: var(--gray-1);
-
-    /* 6. Text */
-    --text-primary: light-dark(var(--gray-15), var(--gray-1));
-    --text-primary-contrast: light-dark(var(--gray-2), var(--gray-15));
-    --text-muted: light-dark(var(--gray-13), var(--gray-4));
-    --text-muted-contrast: light-dark(var(--gray-4), var(--gray-13));
-
-    /* 7. Surfaces */
-    --surface-default: light-dark(var(--gray-1), var(--gray-13));
-    --surface-filled: light-dark(var(--gray-4), var(--gray-15));
-    --surface-tonal: light-dark(var(--gray-3), var(--gray-12));
-    --surface-elevated: light-dark(var(--gray-1), var(--gray-12));
-
-    /* 8. Borders */
-    --border-color: light-dark(var(--gray-4), var(--gray-12));
-    --border-radius: var(--size-2);
-    --border-width: 1px;
-
-    /* 9. Focus ring — components consume these and may override locally
-       (e.g. .ui-button.ui-filled { --focus-ring-offset: 3px; }, .ui-checkbox { --focus-ring-offset: 0; }) */
-    --focus-ring-color: var(--primary);
-    --focus-ring-width: 2px;
-    --focus-ring-offset: 2px;
-    --focus-ring-style: solid;
-
-    /* 10. Typography */
-    --font-size-h1: var(--font-size-fluid-3);
-    --font-size-h2: var(--font-size-fluid-2);
-    --font-size-h3: var(--font-size-fluid-1);
-    --font-size-h4: var(--font-size-3);
-    --font-size-h5: var(--font-size-2);
-    --font-size-h6: var(--font-size-fluid-0);
-
-    /* Sneaking in an extra font size I want but Open Props doesn't provide. You can do whatever you want with your own theme. It's just CSS. */
-    --font-size-05: 0.875rem;
-
-    /* 11. Control sizes — shared scale for fields and buttons so they line up
-       visually. --field-size-* and --button-size-* alias from --control-size-*. */
-    --control-size-x-small: 28px;
-    --control-size-small: 32px;
-    --control-size: 40px;
-    --control-size-large: 46px;
-
-    --field-size-x-small: var(--control-size-x-small);
-    --field-size-small: var(--control-size-small);
-    --field-size: var(--control-size);
-    --field-size-large: var(--control-size-large);
-
-    --button-size-x-small: var(--control-size-x-small);
-    --button-size-small: var(--control-size-small);
-    --button-size: var(--control-size);
-    --button-size-large: var(--control-size-large);
-
-    /* 12. Field / input */
-    --field-border-color: var(--border-color);
-    --field-border-radius: var(--size-2);
-    --field-border-width: 1px;
-
-    /* 13. Button */
-    --button-border-radius: var(--size-2);
-  }
-
-  /* 14. Severity scope classes — re-source the palette inside these contexts.
-     Authoring `<div class="ui-warning">` paints the entire subtree warning-orange.
-     Non-severity tokens (--primary, --neutral) deliberately have no scope class. */
-  :where(.ui-critical, [data-invalid], del) {
-    --palette-source: oklch(0.58 0.21 var(--hue-red));
-    --palette-hue-rotate-by: 1;
-  }
-
-  :where(.ui-info, abbr, dfn) {
-    --palette-source: oklch(0.58 0.21 var(--hue-blue));
-    --palette-hue-rotate-by: 1;
-  }
-
-  :where(.ui-success, ins) {
-    --palette-source: oklch(0.58 0.21 var(--hue-green));
-    --palette-hue-rotate-by: 1;
-  }
-
-  :where(.ui-warning) {
-    --palette-source: oklch(0.58 0.21 var(--hue-orange));
-    --palette-hue-rotate-by: 1;
-  }
-}
-
-/* Components */
-
-/*
-* Components are divided into two categories - if they are stand-alone (root) or if they are built on top of others (extended).
-*/
-
-/*** Root components (no dependencies)  */
-
-@layer components.root {
-  :where(.ui-button) {
-    --_color: light-dark(var(--color-16), var(--color-1));
-    --_color-contrast: light-dark(var(--color-1), var(--color-16));
-    --_color-tonal: var(--surface-tonal);
-
-    --_accent: var(--_color);
-    --_accent-contrast: var(--_color-contrast);
-    --_accent-tonal: var(--_color-tonal);
-    --_accent-tonal-contrast: var(--_color);
-
-    --_default-hover-bg-color: light-dark(oklch(from var(--_accent) l 0.01 h / 10%),
-        oklch(from var(--_accent) l 0.01 h / 20%));
-    --_default-active-bg-color: light-dark(oklch(from var(--_accent) l 0.06 h / 20%),
-        oklch(from var(--_accent) l 0.06 h / 30%));
-
-    --_filled-hover-bg-color: light-dark(oklch(from var(--_accent) calc(l + 0.2) c h),
-        oklch(from var(--_accent) calc(l - 0.1) c h));
-    --_filled-active-bg-color: light-dark(oklch(from var(--_accent) calc(l + 0.3) c h),
-        oklch(from var(--_accent) calc(l - 0.15) c h));
-    --_outlined-active-bg-color: var(--_filled-active-bg-color);
-
-    --_bg-color: transparent;
-    --_border-color: transparent;
-    --_border-width: var(--border-size-1);
-    --_font-size: var(--font-size-1);
-    --_min-height: var(--button-size);
-    --_border-radius: var(--button-border-radius, var(--radius-2));
-    --_text-color: var(--_accent);
+    --_bg-color: transparent;
+    --_border-color: transparent;
+    --_border-width: var(--border-size-1);
+    --_font-size: var(--font-size-1);
+    --_min-height: var(--button-size);
+    --_border-radius: var(--button-border-radius, var(--radius-2));
+    --_text-color: var(--_accent);
 
     -webkit-tap-highlight-color: transparent;
     -webkit-touch-callout: none;
@@ -1446,8 +1705,11 @@
     padding-inline: 1.5ex;
     text-align: center;
     text-decoration: none;
-    transition: background-color .1s ease, color .1s ease,
-      border-color .1s ease, box-shadow .1s ease;
+    transition:
+      background-color 0.1s ease,
+      color 0.1s ease,
+      border-color 0.1s ease,
+      box-shadow 0.1s ease;
     user-select: none;
 
     /* Colors — shared interaction model for critical and primary.
@@ -1480,9 +1742,11 @@
 
     /* Disabled */
     &:where([disabled]) {
-      --_text-color: color-mix(in oklch,
-          var(--text-muted) 50%,
-          var(--surface-default));
+      --_text-color: color-mix(
+        in oklch,
+        var(--text-muted) 50%,
+        var(--surface-default)
+      );
 
       cursor: not-allowed;
       opacity: 0.64;
@@ -1500,7 +1764,6 @@
       }
     }
 
-
     /* Icons / Keyboard */
     &:where(:has(svg), &.ui-icon-only) {
       gap: 1ex;
@@ -1527,14 +1790,14 @@
       --_min-height: var(--button-size-x-small);
       --_font-size: var(--font-size-0);
       padding-block: 0;
-      padding-inline: .5ex;
+      padding-inline: 0.5ex;
     }
 
     &.ui-small {
       --_min-height: var(--button-size-small);
       --_font-size: var(--font-size-05);
       padding-block: 0;
-      padding-inline: .75ex;
+      padding-inline: 0.75ex;
     }
 
     &.ui-large {
@@ -1616,113 +1879,116 @@
 }
 
 @layer components.root {
-	:where(.ui-callout) {
-		--_bg-color: var(--surface-tonal);
-		--_border-color: var(--surface-tonal);
-		--_color: var(--text-primary);
-		--_icon-color: currentColor;
-		--_link-hover-color: var(--primary);
-		--_padding: var(--size-3);
-		--_border-radius: var(--border-radius);
-		--_gap: var(--size-3);
-		--_content-gap: var(--size-2);
-		--_font-size: var(--font-size-05);
-		--_title-font-size: var(--font-size-1);
-		--_icon-size: var(--size-4);
-		--_surface-bg: var(--surface-default);
-
-		--_outlined-bg-color: var(--surface-default);
-		--_outlined-border-color: var(--border-color);
-		--_outlined-color: var(--text-primary);
-		--_outlined-icon-color: currentColor;
-
-		background-color: var(--_bg-color, var(--_surface-bg));
-		border: 1px solid var(--_border-color, var(--border-color));
-		border-radius: var(--_border-radius);
-		color: var(--_color);
-		isolation: isolate;
-		padding: var(--_padding);
-		position: relative;
-
-		&.ui-critical,
-		&.ui-info,
-		&.ui-neutral,
-		&.ui-success,
-		&.ui-warning {
-			--_bg-color: light-dark(oklch(from var(--color-2) l c h / 20%), oklch(from var(--color-6) l c h / 5%));
-			--_border-color: light-dark(var(--color-5), var(--color-11));
-			--_color: light-dark(var(--color-16), var(--color-1));
-			--_icon-color: var(--color-9);
-
-			--_outlined-bg-color: var(--surface-default);
-			--_outlined-border-color: var(--color-9);
-			--_outlined-color: light-dark(var(--color-15), var(--color-1));
-			--_outlined-icon-color: var(--color-9);
-		}
-
-		&.ui-outlined {
-			--_bg-color: var(--_outlined-bg-color);
-			--_border-color: var(--_outlined-border-color);
-			--_color: var(--_outlined-color);
-			--_icon-color: var(--_outlined-icon-color);
-		}
-
-		&::before {
-			background-color: var(--_bg-color);
-			border-radius: inherit;
-			content: "";
-			inset: 0;
-			pointer-events: none;
-			position: absolute;
-			z-index: -1;
-		}
-
-		&>.ui-content {
-			display: grid;
-			font-size: var(--_font-size);
-			gap: var(--_content-gap);
-
-			h1,
-			h2,
-			h3,
-			h4,
-			h5,
-			h6 {
-				color: inherit;
-				font-size: var(--_title-font-size);
-				font-weight: 600;
-
-				* {
-					font-size: inherit;
-				}
-			}
-		}
-
-		/* Links
+  :where(.ui-callout) {
+    --_bg-color: var(--surface-tonal);
+    --_border-color: var(--surface-tonal);
+    --_color: var(--text-primary);
+    --_icon-color: currentColor;
+    --_link-hover-color: var(--primary);
+    --_padding: var(--size-3);
+    --_border-radius: var(--border-radius);
+    --_gap: var(--size-3);
+    --_content-gap: var(--size-2);
+    --_font-size: var(--font-size-05);
+    --_title-font-size: var(--font-size-1);
+    --_icon-size: var(--size-4);
+    --_surface-bg: var(--surface-default);
+
+    --_outlined-bg-color: var(--surface-default);
+    --_outlined-border-color: var(--border-color);
+    --_outlined-color: var(--text-primary);
+    --_outlined-icon-color: currentColor;
+
+    background-color: var(--_bg-color, var(--_surface-bg));
+    border: 1px solid var(--_border-color, var(--border-color));
+    border-radius: var(--_border-radius);
+    color: var(--_color);
+    isolation: isolate;
+    padding: var(--_padding);
+    position: relative;
+
+    &.ui-critical,
+    &.ui-info,
+    &.ui-neutral,
+    &.ui-success,
+    &.ui-warning {
+      --_bg-color: light-dark(
+        oklch(from var(--color-2) l c h / 20%),
+        oklch(from var(--color-6) l c h / 5%)
+      );
+      --_border-color: light-dark(var(--color-5), var(--color-11));
+      --_color: light-dark(var(--color-16), var(--color-1));
+      --_icon-color: var(--color-9);
+
+      --_outlined-bg-color: var(--surface-default);
+      --_outlined-border-color: var(--color-9);
+      --_outlined-color: light-dark(var(--color-15), var(--color-1));
+      --_outlined-icon-color: var(--color-9);
+    }
+
+    &.ui-outlined {
+      --_bg-color: var(--_outlined-bg-color);
+      --_border-color: var(--_outlined-border-color);
+      --_color: var(--_outlined-color);
+      --_icon-color: var(--_outlined-icon-color);
+    }
+
+    &::before {
+      background-color: var(--_bg-color);
+      border-radius: inherit;
+      content: "";
+      inset: 0;
+      pointer-events: none;
+      position: absolute;
+      z-index: -1;
+    }
+
+    & > .ui-content {
+      display: grid;
+      font-size: var(--_font-size);
+      gap: var(--_content-gap);
+
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6 {
+        color: inherit;
+        font-size: var(--_title-font-size);
+        font-weight: 600;
+
+        * {
+          font-size: inherit;
+        }
+      }
+    }
+
+    /* Links
     * Can't make sure contrast will be acceptable (yet) so we use the current text color instead.
     */
-		&:not(.ui-outlined) {
-			a[href] {
-				color: inherit;
-
-				&:hover {
-					color: var(--_link-hover-color);
-				}
-			}
-		}
-
-		/* Icon */
-		&:has(svg) {
-			display: grid;
-			gap: var(--_gap);
-			grid-template-columns: var(--_icon-size) 1fr;
-
-			svg {
-				margin-block-start: 0.15rem;
-				stroke: var(--_icon-color);
-			}
-		}
-	}
+    &:not(.ui-outlined) {
+      a[href] {
+        color: inherit;
+
+        &:hover {
+          color: var(--_link-hover-color);
+        }
+      }
+    }
+
+    /* Icon */
+    &:has(svg) {
+      display: grid;
+      gap: var(--_gap);
+      grid-template-columns: var(--_icon-size) 1fr;
+
+      svg {
+        margin-block-start: 0.15rem;
+        stroke: var(--_icon-color);
+      }
+    }
+  }
 }
 
 @layer components.root {
@@ -1735,14 +2001,22 @@
     --_accent-contrast: var(--_color-contrast);
     --_accent-tonal: var(--_color-tonal);
     --_accent-tonal-contrast: var(--_color);
-    --_default-hover-bg-color: light-dark(oklch(from var(--_accent) l 0.01 h / 10%),
-        oklch(from var(--_accent) l 0.01 h / 20%));
-    --_default-active-bg-color: light-dark(oklch(from var(--_accent) l 0.06 h / 20%),
-        oklch(from var(--_accent) l 0.06 h / 30%));
-    --_filled-hover-bg-color: light-dark(oklch(from var(--_accent) calc(l + 0.2) c h),
-        oklch(from var(--_accent) calc(l - 0.1) c h));
-    --_filled-active-bg-color: light-dark(oklch(from var(--_accent) calc(l + 0.3) c h),
-        oklch(from var(--_accent) calc(l - 0.15) c h));
+    --_default-hover-bg-color: light-dark(
+      oklch(from var(--_accent) l 0.01 h / 10%),
+      oklch(from var(--_accent) l 0.01 h / 20%)
+    );
+    --_default-active-bg-color: light-dark(
+      oklch(from var(--_accent) l 0.06 h / 20%),
+      oklch(from var(--_accent) l 0.06 h / 30%)
+    );
+    --_filled-hover-bg-color: light-dark(
+      oklch(from var(--_accent) calc(l + 0.2) c h),
+      oklch(from var(--_accent) calc(l - 0.1) c h)
+    );
+    --_filled-active-bg-color: light-dark(
+      oklch(from var(--_accent) calc(l + 0.3) c h),
+      oklch(from var(--_accent) calc(l - 0.15) c h)
+    );
     --_outlined-active-bg-color: var(--_filled-active-bg-color);
 
     --_bg-color: transparent;
@@ -1762,8 +2036,11 @@
     justify-content: center;
     padding: 0;
     transform-style: preserve-3d;
-    transition: background-color .1s ease, color .1s ease,
-      border-color .1s ease, box-shadow .1s ease;
+    transition:
+      background-color 0.1s ease,
+      color 0.1s ease,
+      border-color 0.1s ease,
+      box-shadow 0.1s ease;
 
     &:where([disabled]) {
       --_text-color: light-dark(rgb(0, 0, 0/0.3), rgb(255, 255, 255/0.26));
@@ -1785,7 +2062,9 @@
       background-color: transparent;
 
       @media (prefers-reduced-motion: no-preference) {
-        transition: transform 0.2s ease, background-color .1s ease;
+        transition:
+          transform 0.2s ease,
+          background-color 0.1s ease;
       }
     }
 
@@ -1821,14 +2100,20 @@
     &:where(:not([disabled])) {
       &:where(:not(:active):hover) {
         &::before {
-          background-color: var(--_interaction-hover-color, var(--_default-hover-bg-color));
+          background-color: var(
+            --_interaction-hover-color,
+            var(--_default-hover-bg-color)
+          );
         }
       }
 
       &:where(:hover:active),
       &[aria-current="page"] {
         &::before {
-          background-color: var(--_interaction-active-color, var(--_default-active-bg-color));
+          background-color: var(
+            --_interaction-active-color,
+            var(--_default-active-bg-color)
+          );
         }
       }
     }
@@ -1876,7 +2161,7 @@
     gap: 0 var(--size-1);
     position: relative;
 
-    &>.ui-tab-input[type="radio"] {
+    & > .ui-tab-input[type="radio"] {
       /* utils > .ui-sr-only */
       /* TODO: use mixin for this when available */
       block-size: 1px;
@@ -1887,36 +2172,35 @@
       white-space: nowrap;
 
       &:checked {
-
         /* Checked Tab */
-        &+[role="tab"],
-        &+.ui-tab-label {
+        & + [role="tab"],
+        & + .ui-tab-label {
           border-block-end-color: var(--_accent-color);
           color: var(--_accent-color);
 
           /* Checked Panel */
-          &+[role="tabpanel"],
-          &+.ui-tab-panel {
+          & + [role="tabpanel"],
+          & + .ui-tab-panel {
             display: block;
           }
         }
       }
 
       &:focus-visible {
-
-        &+[role="tab"],
-        &+.ui-tab-label {
+        & + [role="tab"],
+        & + .ui-tab-label {
           --focus-ring-color: var(--text-muted);
           --focus-ring-offset: calc(-1 * var(--size-2));
-          outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color);
+          outline: var(--focus-ring-width) var(--focus-ring-style)
+            var(--focus-ring-color);
           outline-offset: var(--focus-ring-offset);
         }
       }
     }
 
     /* Tab */
-    &>[role="tab"],
-    &>.ui-tab-label {
+    & > [role="tab"],
+    & > .ui-tab-label {
       align-items: center;
       background-color: transparent;
       border-bottom: 2px solid transparent;
@@ -1934,14 +2218,16 @@
       user-select: none;
 
       &:hover {
-        background-color: light-dark(oklch(from var(--_accent-color) calc(l * 0.75) none h / 5%),
-            oklch(from var(--_accent-color) calc(l * 1.25) none h / 5%));
+        background-color: light-dark(
+          oklch(from var(--_accent-color) calc(l * 0.75) none h / 5%),
+          oklch(from var(--_accent-color) calc(l * 1.25) none h / 5%)
+        );
       }
     }
 
     /* Tab Panel */
-    &>[role="tabpanel"],
-    &>.ui-tab-panel {
+    & > [role="tabpanel"],
+    & > .ui-tab-panel {
       display: none;
       inline-size: 100%;
       order: 2;
@@ -2011,116 +2297,120 @@
 */
 
 @layer components.root {
-	:where(.ui-toggle-button) {
-		--_button-bg-color: transparent;
-		--_size: var(--field-size);
-		--_svg-size: var(--size-4);
-
-		align-items: center;
-		background-color: var(--_button-bg-color);
-		block-size: var(--_size);
-		border: 1px solid var(--border-color);
-		border-radius: var(--button-border-radius);
-		color: var(--text-primary);
-		cursor: pointer;
-		display: inline-flex;
-		flex: auto;
-		gap: var(--size-2);
-		inline-size: fit-content;
-		justify-content: center;
-		min-inline-size: var(--_size);
-		outline-offset: calc(-1 * var(--size-2));
-		padding: 0 var(--size-2);
-		position: relative;
-		user-select: none;
-
-		input[type="checkbox"],
-		input[type="radio"] {
-			/* utils.css > .ui-sr-only */
-			block-size: 1px;
-			clip-path: inset(50%);
-			inline-size: 1px;
-			overflow: hidden;
-			position: absolute;
-			white-space: nowrap;
-		}
-
-		/* Element states */
-		@media (pointer: fine) {
-			&:hover:not(.ui-disabled) {
-				--_button-bg-color: light-dark(oklch(0% 0 0 / 0.04), oklch(100% 0 0 / 0.08));
-			}
-		}
-
-		&:has(input:focus-visible) {
-			--focus-ring-color: var(--text-muted);
-			--focus-ring-offset: -6px;
-			outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color);
-			outline-offset: var(--focus-ring-offset);
-		}
-
-		/* Disabled */
-		&.ui-disabled {
-			border-color: color-mix(in oklch, var(--border-color) 50%, transparent);
-			color: color-mix(in oklch, var(--text-primary) 30%, transparent);
-			cursor: not-allowed;
-		}
-
-		/* svgs */
-		svg {
-			block-size: var(--_svg-size);
-			flex-shrink: 0;
-			inline-size: var(--_svg-size);
-		}
-
-		/* Selected */
-		&:has(:where(input[type="checkbox"], input[type="radio"]):checked) {
-			--_button-bg-color: oklch(from var(--primary) l c h / 25%);
-
-			@media (pointer: fine) {
-				&:hover {
-					--_button-bg-color: oklch(from var(--primary) l c h / 35%);
-				}
-			}
-		}
-
-		/* Sizes */
-		&.ui-small {
-			--_size: var(--field-size-small);
-		}
-
-		&.ui-x-small {
-			--_size: var(--field-size-x-small);
-		}
-	}
+  :where(.ui-toggle-button) {
+    --_button-bg-color: transparent;
+    --_size: var(--field-size);
+    --_svg-size: var(--size-4);
+
+    align-items: center;
+    background-color: var(--_button-bg-color);
+    block-size: var(--_size);
+    border: 1px solid var(--border-color);
+    border-radius: var(--button-border-radius);
+    color: var(--text-primary);
+    cursor: pointer;
+    display: inline-flex;
+    flex: auto;
+    gap: var(--size-2);
+    inline-size: fit-content;
+    justify-content: center;
+    min-inline-size: var(--_size);
+    outline-offset: calc(-1 * var(--size-2));
+    padding: 0 var(--size-2);
+    position: relative;
+    user-select: none;
+
+    input[type="checkbox"],
+    input[type="radio"] {
+      /* utils.css > .ui-sr-only */
+      block-size: 1px;
+      clip-path: inset(50%);
+      inline-size: 1px;
+      overflow: hidden;
+      position: absolute;
+      white-space: nowrap;
+    }
+
+    /* Element states */
+    @media (pointer: fine) {
+      &:hover:not(.ui-disabled) {
+        --_button-bg-color: light-dark(
+          oklch(0% 0 0 / 0.04),
+          oklch(100% 0 0 / 0.08)
+        );
+      }
+    }
+
+    &:has(input:focus-visible) {
+      --focus-ring-color: var(--text-muted);
+      --focus-ring-offset: -6px;
+      outline: var(--focus-ring-width) var(--focus-ring-style)
+        var(--focus-ring-color);
+      outline-offset: var(--focus-ring-offset);
+    }
+
+    /* Disabled */
+    &.ui-disabled {
+      border-color: color-mix(in oklch, var(--border-color) 50%, transparent);
+      color: color-mix(in oklch, var(--text-primary) 30%, transparent);
+      cursor: not-allowed;
+    }
+
+    /* svgs */
+    svg {
+      block-size: var(--_svg-size);
+      flex-shrink: 0;
+      inline-size: var(--_svg-size);
+    }
+
+    /* Selected */
+    &:has(:where(input[type="checkbox"], input[type="radio"]):checked) {
+      --_button-bg-color: oklch(from var(--primary) l c h / 25%);
+
+      @media (pointer: fine) {
+        &:hover {
+          --_button-bg-color: oklch(from var(--primary) l c h / 35%);
+        }
+      }
+    }
+
+    /* Sizes */
+    &.ui-small {
+      --_size: var(--field-size-small);
+    }
+
+    &.ui-x-small {
+      --_size: var(--field-size-x-small);
+    }
+  }
 }
 
 @layer components.root {
-	:where(.ui-anchor) {
-		anchor-name: --anchor;
-		anchor-scope: --anchor;
-		display: inline-block;
-		inline-size: fit-content;
-
-		/* Always-visible */
-		&>.ui-anchor-floating:not([popover]) {
-			block-size: max-content;
-			inline-size: max-content;
-			position: absolute;
-			position-anchor: --anchor;
-			position-area: var(--anchor-position-area, start end);
-			translate: var(--_anchor-tx, 0) var(--_anchor-ty, 0);
-		}
-
-		/* Hover-triggered */
-		&>.ui-anchor-floating[popover] {
-			inset: unset;
-			margin: 0;
-			position: absolute;
-			position-area: var(--anchor-position-area, start end);
-			translate: var(--_anchor-tx, 0) var(--_anchor-ty, 0);
-		}
-	}
+  :where(.ui-anchor) {
+    anchor-name: --anchor;
+    anchor-scope: --anchor;
+    display: inline-block;
+    inline-size: fit-content;
+
+    /* Always-visible */
+    & > .ui-anchor-floating:not([popover]) {
+      block-size: max-content;
+      inline-size: max-content;
+      position: absolute;
+      position-anchor: --anchor;
+      position-area: var(--anchor-position-area, start end);
+      translate: var(--_anchor-tx, 0) var(--_anchor-ty, 0);
+    }
+
+    /* Hover-triggered */
+    & > .ui-anchor-floating[popover] {
+      inset: unset;
+      margin: 0;
+      position: absolute;
+      position-area: var(--anchor-position-area, start end);
+      translate: var(--_anchor-tx, 0) var(--_anchor-ty, 0);
+    }
+  }
 }
 
 @layer components.root {
@@ -2245,7 +2535,7 @@
       --_card-border-width: 1px;
     }
 
-    &> :where(hgroup, .ui-content) {
+    & > :where(hgroup, .ui-content) {
       padding-inline: var(--size-3);
 
       &:last-child {
@@ -2254,11 +2544,11 @@
     }
 
     /* Header */
-    &>hgroup {
+    & > hgroup {
       padding-block: var(--size-3) 0;
 
       /* Top paragraph */
-      &>p:first-of-type:first-child {
+      & > p:first-of-type:first-child {
         line-height: 1.3;
       }
 
@@ -2267,18 +2557,18 @@
       }
 
       /* Bottom paragraph */
-      &>p:last-of-type:last-child:not(:first-child) {
+      & > p:last-of-type:last-child:not(:first-child) {
         font-size: var(--font-size-1);
       }
     }
 
     /* Content */
-    &>.ui-content:where(:only-child, :first-child) {
+    & > .ui-content:where(:only-child, :first-child) {
       padding-block: var(--size-3) var(--size-4);
     }
 
     /* Actions */
-    &>.ui-actions {
+    & > .ui-actions {
       display: flex;
       gap: var(--size-2);
       margin-block: var(--size-2) 0;
@@ -2302,8 +2592,6 @@
         }
       }
     }
-
-
   }
 }
 
@@ -2338,8 +2626,10 @@
 
     &:where(button, a):where(:not([disabled])) {
       &:where(:not(:active)):hover {
-        --_bg-color: light-dark(oklch(from var(--surface-tonal) calc(l * 0.98) c h),
-            oklch(from var(--surface-tonal) calc(l * 1.1) c h));
+        --_bg-color: light-dark(
+          oklch(from var(--surface-tonal) calc(l * 0.98) c h),
+          oklch(from var(--surface-tonal) calc(l * 1.1) c h)
+        );
       }
     }
 
@@ -2373,7 +2663,8 @@
 
     &:where(:not([disabled])) {
       &:where(:not(:active):hover) {
-        --ripple: radial-gradient(circle, transparent 1%, var(--_bg-color) 1%) center/15000%;
+        --ripple: radial-gradient(circle, transparent 1%, var(--_bg-color) 1%)
+          center/15000%;
 
         transition: background var(--button-ripple-duration);
       }
@@ -2387,9 +2678,11 @@
     /* Disabled */
     &:where([disabled]) {
       opacity: 0.64;
-      --_color: color-mix(in oklch,
-          var(--text-muted) 50%,
-          var(--surface-default));
+      --_color: color-mix(
+        in oklch,
+        var(--text-muted) 50%,
+        var(--surface-default)
+      );
       cursor: not-allowed;
     }
   }
@@ -2467,7 +2760,8 @@
         &::after {
           background-color: transparent;
           block-size: 2px;
-          border-block-end: var(--_border-width) var(--_border-style) var(--border-color);
+          border-block-end: var(--_border-width) var(--_border-style)
+            var(--border-color);
           content: "";
           order: 1;
         }
@@ -2553,8 +2847,7 @@
     }
 
     /* Remove bottom border only on the last row of the table */
-    &>*:last-child tr:last-child {
-
+    & > *:last-child tr:last-child {
       th,
       td {
         border-block-end: none;
@@ -2574,7 +2867,7 @@
     }
 
     /* Round corner cells  */
-    &>thead:first-of-type tr:first-child {
+    & > thead:first-of-type tr:first-child {
       th:first-child {
         border-start-start-radius: var(--_table-border-radius);
       }
@@ -2585,7 +2878,7 @@
     }
 
     /* Logic for tables without thead */
-    &>tbody:first-of-type:not(thead ~ tbody) tr:first-child {
+    & > tbody:first-of-type:not(thead ~ tbody) tr:first-child {
       td:first-child {
         border-start-start-radius: var(--_table-border-radius);
       }
@@ -2596,7 +2889,7 @@
     }
 
     /* Logic for bottom corners (whether in tbody or tfoot) */
-    &>*:last-child tr:last-child {
+    & > *:last-child tr:last-child {
       :where(th, td):first-child {
         border-end-start-radius: var(--_table-border-radius);
       }
@@ -2646,7 +2939,6 @@
     }
 
     @container (width < 60ch) {
-
       th,
       td {
         padding: var(--size-1) 0.875rem;
@@ -2655,7 +2947,6 @@
 
     /* Spacious */
     &.ui-spacious {
-
       th,
       td {
         padding: var(--size-3);
@@ -2667,7 +2958,6 @@
       }
 
       @container (width < 60ch) {
-
         th,
         td {
           padding: var(--size-3);
@@ -2677,7 +2967,6 @@
 
     /* Dense */
     &.ui-dense {
-
       th,
       td {
         padding: var(--size-1);
@@ -2689,7 +2978,6 @@
       }
 
       @container (width < 60ch) {
-
         th,
         td {
           padding: var(--size-1);
@@ -2726,7 +3014,7 @@
       --_bg-color: var(--surface-tonal);
     }
 
-    &>progress {
+    & > progress {
       appearance: none;
       background: none;
       block-size: 100%;
@@ -2743,7 +3031,8 @@
         background-color: var(--_accent-color);
 
         @media (prefers-reduced-motion: no-preference) {
-          transition: inline-size 0.2s var(--ease-out-4, cubic-bezier(0, 0, 0.1, 1));
+          transition: inline-size 0.2s
+            var(--ease-out-4, cubic-bezier(0, 0, 0.1, 1));
         }
       }
 
@@ -2764,7 +3053,7 @@
         will-change: inset-inline-start, inset-inline-end;
       }
 
-      &>progress {
+      & > progress {
         &::-webkit-progress-value {
           background-color: transparent;
         }
@@ -2803,13 +3092,14 @@
 }
 
 @layer components.root {
-
-  [aria-busy="true"]:not(input,
+  [aria-busy="true"]:not(
+    input,
     select,
     textarea,
     html,
     progress,
-    [aria-describedby]) {
+    [aria-describedby]
+  ) {
     position: relative;
 
     &::before {
@@ -2826,397 +3116,401 @@
       vertical-align: -0.14em;
     }
 
-    &:not(button.ui-button):not(:empty) {
+    &:not(button.ui-button):not(:empty) {
+      &::before {
+        margin-inline-end: 0.5em;
+      }
+    }
+  }
+
+  @keyframes spin {
+    to {
+      transform: rotate(1turn);
+    }
+  }
+}
+
+@layer components.root {
+  label.ui-checkbox {
+    --_input-size: var(--size-4);
+
+    align-items: center;
+    color: var(--text-primary);
+    cursor: pointer;
+    display: inline-grid;
+    gap: 0 var(--size-2);
+    grid-auto-columns: auto;
+    grid-auto-flow: column;
+    inline-size: fit-content;
+    line-height: 1.5;
+    transform: translateZ(0);
+    user-select: none;
+
+    /* Disabled */
+    &:has([disabled]) {
+      cursor: not-allowed;
+      opacity: 0.64;
+      user-select: none;
+
+      input {
+        cursor: not-allowed;
+      }
+    }
+
+    /* Required dot */
+    &:has(:invalid) {
+      .ui-label:after {
+        color: var(--red);
+        content: "*";
+        inset: 0 -0.25ex auto auto;
+        position: absolute;
+      }
+    }
+
+    /* Label */
+    .ui-label {
+      color: var(--text-primary);
+      font-size: var(--font-size-05);
+      grid-column: 2;
+      grid-row: 1;
+      position: relative;
+      padding-inline: 0 1ex;
+    }
+
+    /* End text */
+    :where(.ui-end-text) {
+      color: var(--text-muted);
+      font-size: var(--font-size-0);
+      grid-column: 2;
+      grid-row: 2;
+      line-height: 1.5;
+      z-index: 1;
+    }
+
+    /* Spread layout */
+    &.ui-spread {
+      align-items: center;
+      column-gap: var(--size-4);
+      grid-auto-flow: unset;
+      grid-template-columns: 1fr auto;
+      inline-size: 100%;
+
+      .ui-label {
+        font-weight: 600;
+        grid-column: 1;
+        grid-row: 1;
+        inline-size: fit-content;
+      }
+
+      input {
+        grid-column: 2;
+        grid-row: 1;
+      }
+
+      :where(.ui-end-text) {
+        grid-column: 1;
+        grid-row: 2;
+      }
+    }
+
+    /* Stacked layout */
+    &.ui-stack {
+      justify-items: center;
+      grid-auto-columns: unset;
+
+      .ui-label {
+        grid-column: 1/-1;
+        grid-row: 2;
+        margin-block-start: var(--size-1);
+        padding-inline: 1ex;
+
+        /* Required dot */
+        &::after {
+          inset: 0 -0.25ex auto auto;
+        }
+      }
+
+      .ui-end-text {
+        grid-column: 1/-1;
+        grid-row: 3;
+      }
+    }
+
+    /* Input */
+    input[type="checkbox"] {
+      --_input-size: var(--size-4);
+
+      appearance: none;
+      aspect-ratio: 1;
+      background-color: var(--surface-default);
+      block-size: var(--_input-size);
+      border-radius: var(--radius-1);
+      border: 1px solid var(--border-color);
+      box-sizing: border-box;
+      cursor: pointer;
+      display: grid;
+      font-size: var(--_input-size);
+      inline-size: var(--_input-size);
+      margin: 0;
+      padding: 0;
+      place-items: center;
+      position: relative;
+
+      &:checked,
+      &:indeterminate {
+        background-color: var(--primary);
+        border-color: var(--primary);
+      }
+
+      /* Checkmark */
+      &::after {
+        background-color: var(--primary-contrast);
+        clip-path: polygon(
+          15% 52%,
+          40% 77%,
+          85% 32%,
+          75% 22%,
+          40% 57%,
+          25% 42%
+        );
+        content: "";
+        inset: 0;
+        opacity: 0;
+        position: absolute;
+      }
+
+      &:checked::after,
+      &:indeterminate::after {
+        opacity: 1;
+      }
+
+      /* Indeterminate dash */
+      &:indeterminate::after {
+        clip-path: polygon(20% 45%, 80% 45%, 80% 55%, 20% 55%);
+      }
+
+      &::before {
+        --highlight-size: 175%;
+      }
+    }
+
+    /* Sizes */
+    &.ui-small {
+      input[type="checkbox"] {
+        --_input-size: var(--size-3);
+      }
+    }
+
+    &.ui-large {
+      input[type="checkbox"] {
+        --_input-size: var(--size-5);
+      }
+    }
+
+    /* Validation */
+    &[data-invalid],
+    &:has(:user-invalid) {
+      --primary: var(--critical);
+
+      :where(.ui-end-text) {
+        color: var(--critical);
+      }
+    }
+
+    /* Touch devices */
+    @media (pointer: coarse) {
+      input {
+        --_input-size: var(--size-4);
+      }
+    }
+
+    @media (forced-colors: active) {
+      input {
+        border: 1px solid CanvasText;
+
+        &:checked,
+        &:indeterminate {
+          background-color: SelectedItem;
+          border-color: SelectedItem;
+
+          &::after {
+            background-color: SelectedItemText;
+          }
+        }
+      }
+    }
+  }
+}
+
+@layer components.root {
+  label.ui-radio {
+    --_input-size: 1.125rem;
+    --_indicator-size: 50%;
+
+    align-items: center;
+    color: var(--text-primary);
+    cursor: pointer;
+    display: inline-grid;
+    gap: 0 var(--size-2);
+    grid-auto-columns: auto;
+    grid-auto-flow: column;
+    inline-size: fit-content;
+    line-height: 1.5;
+    transform: translateZ(0);
+    user-select: none;
+
+    /* Disabled */
+    &:has([disabled]) {
+      cursor: not-allowed;
+      opacity: 0.64;
+      user-select: none;
+
+      input {
+        cursor: not-allowed;
+      }
+    }
+
+    /* Required dot */
+    &:has(:invalid) {
+      .ui-label:after {
+        color: var(--red);
+        content: "*";
+        inset: 0 -0.25ex auto auto;
+        position: absolute;
+      }
+    }
+
+    /* Label */
+    .ui-label {
+      color: var(--text-primary);
+      font-size: var(--font-size-05);
+      grid-column: 2;
+      grid-row: 1;
+      padding-inline: 0 1ex;
+      position: relative;
+    }
+
+    /* End text */
+    :where(.ui-end-text) {
+      color: var(--text-muted);
+      font-size: var(--font-size-0);
+      grid-column: 2;
+      grid-row: 2;
+      line-height: 1.5;
+      z-index: 1;
+    }
+
+    /* Stacked layout */
+    &.ui-stack {
+      grid-auto-columns: unset;
+      justify-items: center;
+
+      .ui-label {
+        grid-column: 1/-1;
+        grid-row: 2;
+        margin-block-start: var(--size-1);
+        padding-inline: 1ex;
+
+        /* Required dot */
+        &::after {
+          inset: 0 -0.25ex auto auto;
+        }
+      }
+
+      .ui-end-text {
+        grid-column: 1/-1;
+        grid-row: 3;
+      }
+    }
+
+    /* Input */
+    input[type="radio"] {
+      appearance: none;
+      aspect-ratio: 1;
+      background-color: var(--surface-default);
+      block-size: var(--_input-size);
+      border: 1px solid var(--field-border-color);
+      border-radius: var(--radius-round);
+      box-sizing: border-box;
+      cursor: pointer;
+      display: grid;
+      inline-size: var(--_input-size);
+      margin: 0;
+      padding: 0;
+      place-items: center;
+      position: relative;
+
+      &:checked {
+        background-color: var(--primary);
+        border-color: var(--primary);
+      }
+
+      /* Dot */
+      &::after {
+        background-color: var(--primary-contrast);
+        block-size: var(--_indicator-size);
+        border-radius: var(--radius-round);
+        content: "";
+        inline-size: var(--_indicator-size);
+        margin: auto;
+        opacity: 0;
+      }
+
+      &:checked::after {
+        opacity: 1;
+      }
+
       &::before {
-        margin-inline-end: 0.5em;
+        --highlight-size: 175%;
       }
     }
-  }
 
-  @keyframes spin {
-    to {
-      transform: rotate(1turn);
+    /* Sizes */
+    &.ui-small {
+      input[type="radio"] {
+        --_input-size: var(--size-3);
+      }
     }
-  }
-}
 
-@layer components.root {
-	label.ui-checkbox {
-		--_input-size: var(--size-4);
-
-		align-items: center;
-		color: var(--text-primary);
-		cursor: pointer;
-		display: inline-grid;
-		gap: 0 var(--size-2);
-		grid-auto-columns: auto;
-		grid-auto-flow: column;
-		inline-size: fit-content;
-		line-height: 1.5;
-		transform: translateZ(0);
-		user-select: none;
-
-		/* Disabled */
-		&:has([disabled]) {
-			cursor: not-allowed;
-			opacity: 0.64;
-			user-select: none;
-
-			input {
-				cursor: not-allowed;
-			}
-		}
-
-		/* Required dot */
-		&:has(:invalid) {
-			.ui-label:after {
-				color: var(--red);
-				content: "*";
-				inset: 0 -0.25ex auto auto;
-				position: absolute;
-			}
-		}
-
-		/* Label */
-		.ui-label {
-			color: var(--text-primary);
-			font-size: var(--font-size-05);
-			grid-column: 2;
-			grid-row: 1;
-			position: relative;
-			padding-inline: 0 1ex;
-		}
-
-		/* End text */
-		:where(.ui-end-text) {
-			color: var(--text-muted);
-			font-size: var(--font-size-0);
-			grid-column: 2;
-			grid-row: 2;
-			line-height: 1.5;
-			z-index: 1;
-		}
-
-		/* Spread layout */
-		&.ui-spread {
-			align-items: center;
-			column-gap: var(--size-4);
-			grid-auto-flow: unset;
-			grid-template-columns: 1fr auto;
-			inline-size: 100%;
-
-			.ui-label {
-				font-weight: 600;
-				grid-column: 1;
-				grid-row: 1;
-				inline-size: fit-content;
-			}
-
-			input {
-				grid-column: 2;
-				grid-row: 1;
-			}
-
-			:where(.ui-end-text) {
-				grid-column: 1;
-				grid-row: 2;
-			}
-		}
-
-		/* Stacked layout */
-		&.ui-stack {
-			justify-items: center;
-			grid-auto-columns: unset;
-
-			.ui-label {
-				grid-column: 1/-1;
-				grid-row: 2;
-				margin-block-start: var(--size-1);
-				padding-inline: 1ex;
-
-				/* Required dot */
-				&::after {
-					inset: 0 -0.25ex auto auto;
-				}
-			}
-
-			.ui-end-text {
-				grid-column: 1/-1;
-				grid-row: 3;
-			}
-		}
-
-		/* Input */
-		input[type="checkbox"] {
-			--_input-size: var(--size-4);
-
-			appearance: none;
-			aspect-ratio: 1;
-			background-color: var(--surface-default);
-			block-size: var(--_input-size);
-			border-radius: var(--radius-1);
-			border: 1px solid var(--border-color);
-			box-sizing: border-box;
-			cursor: pointer;
-			display: grid;
-			font-size: var(--_input-size);
-			inline-size: var(--_input-size);
-			margin: 0;
-			padding: 0;
-			place-items: center;
-			position: relative;
-
-			&:checked,
-			&:indeterminate {
-				background-color: var(--primary);
-				border-color: var(--primary);
-			}
-
-
-			/* Checkmark */
-			&::after {
-				background-color: var(--primary-contrast);
-				clip-path: polygon(15% 52%, 40% 77%, 85% 32%, 75% 22%, 40% 57%, 25% 42%);
-				content: "";
-				inset: 0;
-				opacity: 0;
-				position: absolute;
-			}
-
-			&:checked::after,
-			&:indeterminate::after {
-				opacity: 1;
-			}
-
-			/* Indeterminate dash */
-			&:indeterminate::after {
-				clip-path: polygon(20% 45%, 80% 45%, 80% 55%, 20% 55%);
-			}
-
-			&::before {
-				--highlight-size: 175%;
-			}
-		}
-
-		/* Sizes */
-		&.ui-small {
-			input[type="checkbox"] {
-				--_input-size: var(--size-3);
-			}
-		}
-
-		&.ui-large {
-			input[type="checkbox"] {
-				--_input-size: var(--size-5);
-			}
-		}
-
-		/* Validation */
-		&[data-invalid],
-		&:has(:user-invalid) {
-			--palette-source: oklch(0.58 0.21 var(--hue-red));
-
-			:where(.ui-end-text) {
-				color: var(--primary);
-			}
-		}
-
-		/* Touch devices */
-		@media (pointer: coarse) {
-			input {
-				--_input-size: var(--size-4);
-			}
-		}
-
-		@media (forced-colors: active) {
-			input {
-				border: 1px solid CanvasText;
-
-				&:checked,
-				&:indeterminate {
-					background-color: SelectedItem;
-					border-color: SelectedItem;
-
-					&::after {
-						background-color: SelectedItemText;
-					}
-				}
-			}
-		}
-	}
-}
+    &.ui-large {
+      input[type="radio"] {
+        --_input-size: var(--size-4);
+      }
+    }
 
-@layer components.root {
-	label.ui-radio {
-		--_input-size: 1.125rem;
-		--_indicator-size: 50%;
-
-		align-items: center;
-		color: var(--text-primary);
-		cursor: pointer;
-		display: inline-grid;
-		gap: 0 var(--size-2);
-		grid-auto-columns: auto;
-		grid-auto-flow: column;
-		inline-size: fit-content;
-		line-height: 1.5;
-		transform: translateZ(0);
-		user-select: none;
-
-		/* Disabled */
-		&:has([disabled]) {
-			cursor: not-allowed;
-			opacity: 0.64;
-			user-select: none;
-
-			input {
-				cursor: not-allowed;
-			}
-		}
-
-		/* Required dot */
-		&:has(:invalid) {
-			.ui-label:after {
-				color: var(--red);
-				content: "*";
-				inset: 0 -0.25ex auto auto;
-				position: absolute;
-			}
-		}
-
-		/* Label */
-		.ui-label {
-			color: var(--text-primary);
-			font-size: var(--font-size-05);
-			grid-column: 2;
-			grid-row: 1;
-			padding-inline: 0 1ex;
-			position: relative;
-		}
-
-		/* End text */
-		:where(.ui-end-text) {
-			color: var(--text-muted);
-			font-size: var(--font-size-0);
-			grid-column: 2;
-			grid-row: 2;
-			line-height: 1.5;
-			z-index: 1;
-		}
-
-		/* Stacked layout */
-		&.ui-stack {
-			grid-auto-columns: unset;
-			justify-items: center;
-
-			.ui-label {
-				grid-column: 1/-1;
-				grid-row: 2;
-				margin-block-start: var(--size-1);
-				padding-inline: 1ex;
-
-				/* Required dot */
-				&::after {
-					inset: 0 -0.25ex auto auto;
-				}
-			}
-
-			.ui-end-text {
-				grid-column: 1/-1;
-				grid-row: 3;
-			}
-		}
-
-		/* Input */
-		input[type="radio"] {
-			appearance: none;
-			aspect-ratio: 1;
-			background-color: var(--surface-default);
-			block-size: var(--_input-size);
-			border: 1px solid var(--field-border-color);
-			border-radius: var(--radius-round);
-			box-sizing: border-box;
-			cursor: pointer;
-			display: grid;
-			inline-size: var(--_input-size);
-			margin: 0;
-			padding: 0;
-			place-items: center;
-			position: relative;
-
-			&:checked {
-				background-color: var(--primary);
-				border-color: var(--primary);
-			}
-
-			/* Dot */
-			&::after {
-				background-color: var(--primary-contrast);
-				block-size: var(--_indicator-size);
-				border-radius: var(--radius-round);
-				content: "";
-				inline-size: var(--_indicator-size);
-				margin: auto;
-				opacity: 0;
-			}
-
-			&:checked::after {
-				opacity: 1;
-			}
-
-			&::before {
-				--highlight-size: 175%;
-			}
-		}
-
-		/* Sizes */
-		&.ui-small {
-			input[type="radio"] {
-				--_input-size: var(--size-3);
-
-			}
-		}
-
-		&.ui-large {
-			input[type="radio"] {
-				--_input-size: var(--size-4);
-
-			}
-		}
-
-		/* Validation */
-		&[data-invalid],
-		&:has(:user-invalid) {
-			--palette-source: oklch(0.58 0.21 var(--hue-red));
-
-			:where(.ui-end-text) {
-				color: var(--primary);
-			}
-		}
-
-		/* Touch devices */
-		@media (pointer: coarse) {
-			input[type="radio"] {
-				block-size: var(--size-4);
-				inline-size: var(--size-4);
-			}
-		}
-
-		@media (forced-colors: active) {
-			input[type="radio"] {
-				border: 1px solid CanvasText;
-
-				&:checked {
-					background-color: SelectedItem;
-					border-color: SelectedItem;
-
-					&::after {
-						background-color: SelectedItemText;
-					}
-				}
-			}
-		}
-	}
+    /* Validation */
+    &[data-invalid],
+    &:has(:user-invalid) {
+      --primary: var(--critical);
+
+      :where(.ui-end-text) {
+        color: var(--critical);
+      }
+    }
+
+    /* Touch devices */
+    @media (pointer: coarse) {
+      input[type="radio"] {
+        block-size: var(--size-4);
+        inline-size: var(--size-4);
+      }
+    }
+
+    @media (forced-colors: active) {
+      input[type="radio"] {
+        border: 1px solid CanvasText;
+
+        &:checked {
+          background-color: SelectedItem;
+          border-color: SelectedItem;
+
+          &::after {
+            background-color: SelectedItemText;
+          }
+        }
+      }
+    }
+  }
 }
 
 @layer components.root {
@@ -3277,7 +3571,7 @@
       margin-top: calc(var(--size-1) * -1);
       padding-inline: calc(3ex / 2);
 
-      &>option {
+      & > option {
         display: flex;
         inline-size: 0;
         justify-content: center;
@@ -3458,9 +3752,11 @@
       /* Track */
       &::-webkit-slider-runnable-track {
         appearance: none;
-        background: linear-gradient(to right,
-            var(--_track-fill-color) var(--_track-fill, 0%),
-            var(--_track-color) 0%);
+        background: linear-gradient(
+          to right,
+          var(--_track-fill-color) var(--_track-fill, 0%),
+          var(--_track-color) 0%
+        );
         block-size: var(--_track-height);
         border-radius: var(--_track-radius);
       }
@@ -3486,7 +3782,8 @@
         block-size: var(--_thumb-size);
         border: 3px solid var(--surface-default);
         border-radius: 50%;
-        box-shadow: 0 0 0 var(--_thumb-highlight-size) var(--_thumb-highlight-color);
+        box-shadow: 0 0 0 var(--_thumb-highlight-size)
+          var(--_thumb-highlight-color);
         cursor: ew-resize;
         inline-size: var(--_thumb-size);
         margin-block-start: var(--_thumb-offset);
@@ -3506,7 +3803,8 @@
         block-size: var(--_thumb-size);
         border: 3px solid var(--surface-default);
         border-radius: 50%;
-        box-shadow: 0 0 0 var(--_thumb-highlight-size) var(--_thumb-highlight-color);
+        box-shadow: 0 0 0 var(--_thumb-highlight-size)
+          var(--_thumb-highlight-color);
         cursor: ew-resize;
         inline-size: var(--_thumb-size);
         margin-block-start: var(--_thumb-offset);
@@ -3533,8 +3831,10 @@
 
         &:active {
           --_thumb-highlight-size: var(--size-2);
-          --_track-color: light-dark(oklch(from var(--field-border-color) calc(l * 0.9) c h),
-              oklch(from var(--field-border-color) calc(l * 1.1) c h));
+          --_track-color: light-dark(
+            oklch(from var(--field-border-color) calc(l * 0.9) c h),
+            oklch(from var(--field-border-color) calc(l * 1.1) c h)
+          );
         }
       }
 
@@ -3554,7 +3854,6 @@
       }
     }
   }
-
 }
 
 @layer components.root {
@@ -3603,7 +3902,8 @@
 
       &:focus-visible {
         --focus-ring-color: currentColor;
-        outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color);
+        outline: var(--focus-ring-width) var(--focus-ring-style)
+          var(--focus-ring-color);
         outline-offset: var(--focus-ring-offset);
       }
 
@@ -3635,13 +3935,14 @@
           --_dot-bg-color: var(--_accent-contrast);
           --_dot-outline-size: calc(var(--size-1) - 1px);
 
-          inset-inline-start: calc(var(--_track-width) - var(--_dot-size) - var(--size-1));
+          inset-inline-start: calc(
+            var(--_track-width) - var(--_dot-size) - var(--size-1)
+          );
         }
       }
 
       /* Animation */
       @media (prefers-reduced-motion: no-preference) {
-
         /* Track */
         &::before {
           transition:
@@ -3701,7 +4002,9 @@
       }
 
       .ui-icon-unchecked {
-        margin-inline-start: calc(var(--_track-width) - var(--_dot-size) - var(--size-1));
+        margin-inline-start: calc(
+          var(--_track-width) - var(--_dot-size) - var(--size-1)
+        );
       }
 
       .ui-icon-checked {
@@ -3780,7 +4083,6 @@
       }
 
       &:has(.ui-icon-checked, .ui-icon-unchecked) {
-
         input[role="switch"],
         .ui-icon-checked,
         .ui-icon-unchecked {
@@ -3827,169 +4129,167 @@
 }
 
 @layer components.extended {
-	:where(#toast-manager) {
-		background: none;
-		block-size: auto;
-		border: none;
-		display: none;
-		flex-direction: column-reverse;
-		gap: var(--size-3);
-		inline-size: auto;
-		inset: auto var(--size-4) var(--size-4) auto;
-		margin: 0;
-		max-inline-size: calc(100vi - var(--size-8));
-		overflow: visible;
-		padding: 0;
-		pointer-events: none;
-		position: fixed;
-		z-index: 1000;
-
-		&:popover-open {
-			display: flex;
-		}
-
-		&::backdrop {
-			display: none;
-		}
-
-		/* Optional cap on visible toasts. Older toasts beyond this depth are hidden
+  :where(#toast-manager) {
+    background: none;
+    block-size: auto;
+    border: none;
+    display: none;
+    flex-direction: column-reverse;
+    gap: var(--size-3);
+    inline-size: auto;
+    inset: auto var(--size-4) var(--size-4) auto;
+    margin: 0;
+    max-inline-size: calc(100vi - var(--size-8));
+    overflow: visible;
+    padding: 0;
+    pointer-events: none;
+    position: fixed;
+    z-index: 1000;
+
+    &:popover-open {
+      display: flex;
+    }
+
+    &::backdrop {
+      display: none;
+    }
+
+    /* Optional cap on visible toasts. Older toasts beyond this depth are hidden
 		   but still in the DOM so they animate cleanly when newer ones are removed. */
-		/* > .toast:nth-last-child(n + 6) { display: none; } */
-	}
-
-	:where(.ui-toast) {
-		--_anim-enter: 0.3s;
-		--_anim-exit: 0.3s;
-
-		align-items: center;
-		animation:
-			toast-enter var(--_anim-enter) var(--ease-out-3) both,
-			toast-hold attr(data-duration type(<time>), 5s) linear both,
-			toast-exit var(--_anim-exit) var(--ease-in-3) both;
-		animation-delay:
-			0s,
-			var(--_anim-enter),
-			calc(var(--_anim-enter) + attr(data-duration type(<time>), 5s));
-		background-color: light-dark(var(--gray-15), var(--gray-2));
-		border-radius: var(--border-radius);
-		box-shadow: var(--shadow-3);
-		color: var(--text-primary-contrast);
-		display: flex;
-		gap: var(--size-3);
-		justify-content: space-between;
-		min-inline-size: 30ch;
-		padding: var(--size-3) var(--size-4);
-		pointer-events: auto;
-
-		&:hover {
-			animation-play-state: paused;
-		}
-
-		&.ui-exiting {
-			animation: toast-exit var(--_anim-exit) var(--ease-in-3) forwards;
-		}
-
-		.ui-icon {
-			background: no-repeat center / contain;
-			block-size: var(--size-4);
-			flex-shrink: 0;
-			inline-size: var(--size-4);
-		}
-
-		/* Hide the icon slot when there's no severity to render against. */
-		&:not([data-severity]) .ui-icon {
-			display: none;
-		}
-
-		.ui-content {
-			font-size: var(--font-size-05);
-			word-break: break-word;
-		}
-
-		.ui-title {
-			font-weight: 600;
-		}
-
-		.ui-description {
-			color: oklch(from currentColor l c h / 75%);
-			font-size: var(--font-size-0);
-		}
-
-		.ui-close-button {
-			background: none;
-			border: none;
-			color: inherit;
-			cursor: pointer;
-			display: grid;
-			opacity: 0.7;
-			padding: var(--size-1);
-			place-items: center;
-			transition: opacity 0.2s;
-
-			&:hover {
-				opacity: 1;
-			}
-		}
-
-		/* Severity icons via CSS data URIs — keeps icon assets out of JS strings. */
-		&[data-severity="success"] .ui-icon {
-			background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2322c55e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/><path d='m9 11 3 3L22 4'/></svg>");
-		}
-
-		&[data-severity="info"] .ui-icon {
-			background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M12 16v-4'/><path d='M12 8h.01'/></svg>");
-		}
-
-		&[data-severity="warning"] .ui-icon {
-			background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23f59e0b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/><path d='M12 9v4'/><path d='M12 17h.01'/></svg>");
-		}
-
-		&[data-severity="critical"] .ui-icon {
-			background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ef4444' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='m15 9-6 6'/><path d='m9 9 6 6'/></svg>");
-		}
-	}
-
-	@keyframes toast-enter {
-		from {
-			opacity: 0;
-			translate: var(--size-4) 0;
-		}
-
-		to {
-			opacity: 1;
-			translate: 0 0;
-		}
-	}
-
-	/* Identity keyframe — only purpose is to delay the exit animation by the
+    /* > .toast:nth-last-child(n + 6) { display: none; } */
+  }
+
+  :where(.ui-toast) {
+    --_anim-enter: 0.3s;
+    --_anim-exit: 0.3s;
+
+    align-items: center;
+    animation:
+      toast-enter var(--_anim-enter) var(--ease-out-3) both,
+      toast-hold attr(data-duration type(<time>), 5s) linear both,
+      toast-exit var(--_anim-exit) var(--ease-in-3) both;
+    animation-delay:
+      0s, var(--_anim-enter),
+      calc(var(--_anim-enter) + attr(data-duration type(<time>), 5s));
+    background-color: light-dark(var(--gray-15), var(--gray-2));
+    border-radius: var(--border-radius);
+    box-shadow: var(--shadow-3);
+    color: var(--text-primary-contrast);
+    display: flex;
+    gap: var(--size-3);
+    justify-content: space-between;
+    min-inline-size: 30ch;
+    padding: var(--size-3) var(--size-4);
+    pointer-events: auto;
+
+    &:hover {
+      animation-play-state: paused;
+    }
+
+    &.ui-exiting {
+      animation: toast-exit var(--_anim-exit) var(--ease-in-3) forwards;
+    }
+
+    .ui-icon {
+      background: no-repeat center / contain;
+      block-size: var(--size-4);
+      flex-shrink: 0;
+      inline-size: var(--size-4);
+    }
+
+    /* Hide the icon slot when there's no severity to render against. */
+    &:not([data-severity]) .ui-icon {
+      display: none;
+    }
+
+    .ui-content {
+      font-size: var(--font-size-05);
+      word-break: break-word;
+    }
+
+    .ui-title {
+      font-weight: 600;
+    }
+
+    .ui-description {
+      color: oklch(from currentColor l c h / 75%);
+      font-size: var(--font-size-0);
+    }
+
+    .ui-close-button {
+      background: none;
+      border: none;
+      color: inherit;
+      cursor: pointer;
+      display: grid;
+      opacity: 0.7;
+      padding: var(--size-1);
+      place-items: center;
+      transition: opacity 0.2s;
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+
+    /* Severity icons via CSS data URIs — keeps icon assets out of JS strings. */
+    &[data-severity="success"] .ui-icon {
+      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2322c55e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/><path d='m9 11 3 3L22 4'/></svg>");
+    }
+
+    &[data-severity="info"] .ui-icon {
+      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M12 16v-4'/><path d='M12 8h.01'/></svg>");
+    }
+
+    &[data-severity="warning"] .ui-icon {
+      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23f59e0b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/><path d='M12 9v4'/><path d='M12 17h.01'/></svg>");
+    }
+
+    &[data-severity="critical"] .ui-icon {
+      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ef4444' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='m15 9-6 6'/><path d='m9 9 6 6'/></svg>");
+    }
+  }
+
+  @keyframes toast-enter {
+    from {
+      opacity: 0;
+      translate: var(--size-4) 0;
+    }
+
+    to {
+      opacity: 1;
+      translate: 0 0;
+    }
+  }
+
+  /* Identity keyframe — only purpose is to delay the exit animation by the
 	   author-defined duration. */
-	@keyframes toast-hold {
-		from {
-			opacity: 1;
-		}
-
-		to {
-			opacity: 1;
-		}
-	}
-
-	@keyframes toast-exit {
-		from {
-			opacity: 1;
-			scale: 1;
-			translate: 0 0;
-		}
-
-		to {
-			opacity: 0;
-			scale: 0.9;
-			translate: 0 var(--size-4);
-		}
-	}
+  @keyframes toast-hold {
+    from {
+      opacity: 1;
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes toast-exit {
+    from {
+      opacity: 1;
+      scale: 1;
+      translate: 0 0;
+    }
+
+    to {
+      opacity: 0;
+      scale: 0.9;
+      translate: 0 var(--size-4);
+    }
+  }
 }
 
 @layer components.root {
-
   :where(.ui-p) {
     text-wrap: pretty;
 
@@ -4044,8 +4344,10 @@
 
   /** Overline */
   :where(.ui-overline) {
-    color: light-dark(oklch(from var(--text-muted) calc(l * 1.25) c h),
-        oklch(from var(--text-muted) calc(l * 0.75) c h));
+    color: light-dark(
+      oklch(from var(--text-muted) calc(l * 1.25) c h),
+      oklch(from var(--text-muted) calc(l * 0.75) c h)
+    );
     font-size: var(--font-size-0);
     font-weight: 500;
     letter-spacing: 0.06em;
@@ -4053,18 +4355,20 @@
   }
 
   :where(.ui-hgroup) {
-    &>p {
+    & > p {
       margin: 0;
     }
 
-    &> :where(h1, h2, h3, h4, h5, h6) {
+    & > :where(h1, h2, h3, h4, h5, h6) {
       margin-block: 0 0.4em;
     }
 
     /* First p element (overline) */
-    &>p:first-of-type:first-child {
-      color: light-dark(oklch(from var(--text-muted) calc(l * 1.25) c h),
-          oklch(from var(--text-muted) calc(l * 0.75) c h));
+    & > p:first-of-type:first-child {
+      color: light-dark(
+        oklch(from var(--text-muted) calc(l * 1.25) c h),
+        oklch(from var(--text-muted) calc(l * 0.75) c h)
+      );
       font-size: var(--font-size-0);
       font-weight: 500;
       letter-spacing: 0.06em;
@@ -4072,13 +4376,13 @@
     }
 
     /* Body paragraphs after the heading */
-    &>p:not(:first-of-type:first-child) {
+    & > p:not(:first-of-type:first-child) {
       color: oklch(from currentColor l c h / 75%);
       font-size: var(--font-size-3);
       line-height: 1.6;
     }
 
-    &>p+p {
+    & > p + p {
       margin-block-start: 0.75em;
     }
   }
@@ -4090,8 +4394,6 @@
     line-height: 1.6;
   }
 
-
-
   /* Inline text elements — class utilities (work anywhere) */
   :where(.ui-u, .ui-abbr, .ui-dfn) {
     text-decoration: underline;
@@ -4144,7 +4446,7 @@
   :where(.ui-mark) {
     border-radius: var(--radius-2);
     box-decoration-break: clone;
-    padding: .1ex .3ex;
+    padding: 0.1ex 0.3ex;
     vertical-align: baseline;
   }
 
@@ -4217,7 +4519,7 @@
     scrollbar-width: thin;
     white-space: pre;
 
-    >code {
+    > code {
       background: none;
       border-radius: 0;
       color: inherit;
@@ -4227,7 +4529,6 @@
       writing-mode: inherit;
     }
   }
-
 }
 
 /* Rich text */
@@ -4245,7 +4546,6 @@
       text-underline-offset: 2px;
 
       &[href] {
-
         &:hover,
         &:focus-visible {
           color: var(--primary-light);
@@ -4295,7 +4595,7 @@
       overflow-x: auto;
       scrollbar-width: thin;
 
-      >code {
+      > code {
         background: none;
         border-radius: 0;
         color: inherit;
@@ -4306,7 +4606,6 @@
       }
     }
 
-
     /* Text */
     p {
       font-size: inherit;
@@ -4320,7 +4619,7 @@
       font-weight: 700;
       text-wrap: pretty;
 
-      &+*:not(&) {
+      & + *:not(&) {
         margin-block-start: 0;
       }
     }
@@ -4367,8 +4666,10 @@
 
     /** Overline */
     :is(.ui-overline, hgroup p:first-of-type:first-child) {
-      color: light-dark(oklch(from var(--text-muted) calc(l * 1.25) c h),
-          oklch(from var(--text-muted) calc(l * 0.75) c h));
+      color: light-dark(
+        oklch(from var(--text-muted) calc(l * 1.25) c h),
+        oklch(from var(--text-muted) calc(l * 0.75) c h)
+      );
       font-size: var(--font-size-0);
       font-weight: 500;
       letter-spacing: 0.06em;
@@ -4376,26 +4677,26 @@
     }
 
     hgroup {
-      &>p {
+      & > p {
         margin: 0;
       }
 
-      &> :where(h1, h2, h3, h4, h5, h6) {
+      & > :where(h1, h2, h3, h4, h5, h6) {
         margin-block: 0 0.4em;
       }
 
-      &+* {
+      & + * {
         margin-block-start: 3em;
       }
 
       /* Body paragraphs after the heading */
-      &>p:not(:first-of-type:first-child) {
+      & > p:not(:first-of-type:first-child) {
         color: oklch(from currentColor l c h / 75%);
         font-size: var(--font-size-3);
         line-height: 1.6;
       }
 
-      &>p+p {
+      & > p + p {
         margin-block-start: 0.75em;
       }
     }
@@ -4457,7 +4758,7 @@
       margin-block: var(--size-7);
       place-items: center;
 
-      &>* {
+      & > * {
         margin-block: 0;
       }
 
@@ -4468,18 +4769,18 @@
     }
 
     /* Remove top margin from first child */
-    &> :first-child {
+    & > :first-child {
       margin-block-start: 0;
     }
 
     /* Remove bottom margin from last child */
-    &> :last-child {
+    & > :last-child {
       margin-block-end: 0;
     }
 
     /* Horizontal rules */
     hr {
-      &+* {
+      & + * {
         margin-block-start: 0;
       }
     }
@@ -4560,7 +4861,7 @@
     mark {
       border-radius: var(--radius-2);
       box-decoration-break: clone;
-      padding: .1ex .3ex;
+      padding: 0.1ex 0.3ex;
       vertical-align: baseline;
     }
 
@@ -4594,14 +4895,14 @@
 
     /* Floating wrapper: traditional inset-based positioning so this works
        in browsers without position-area support (Firefox, older Safari). */
-    &>.ui-anchor-floating:not([popover]) {
+    & > .ui-anchor-floating:not([popover]) {
       inset: var(--_badge-inset);
       position-anchor: auto;
       position-area: none;
     }
 
     /* Indicator */
-    &>.ui-anchor-floating>.ui-badge-indicator {
+    & > .ui-anchor-floating > .ui-badge-indicator {
       background-color: var(--_bg-color);
       block-size: var(--_size);
       border: 2px solid var(--_border-color);
@@ -4670,7 +4971,7 @@
       --_anchor-ty: var(--_dot-size);
     }
 
-    &.ui-dot>.ui-anchor-floating>.ui-badge-indicator {
+    &.ui-dot > .ui-anchor-floating > .ui-badge-indicator {
       block-size: var(--_dot-size);
       inline-size: var(--_dot-size);
       min-inline-size: var(--_dot-size);
@@ -4678,7 +4979,7 @@
     }
 
     /* Visibility */
-    &.ui-invisible>.ui-anchor-floating>.ui-badge-indicator {
+    &.ui-invisible > .ui-anchor-floating > .ui-badge-indicator {
       opacity: 0;
       pointer-events: none;
     }
@@ -4698,8 +4999,10 @@
       border-radius: 0;
 
       /* button.css > --_accent-tonal */
-      --_divider-color: light-dark(oklch(from var(--_accent-tonal) calc(l - 0.1) c h),
-          oklch(from var(--_accent-tonal) calc(l + 0.1) c h));
+      --_divider-color: light-dark(
+        oklch(from var(--_accent-tonal) calc(l - 0.1) c h),
+        oklch(from var(--_accent-tonal) calc(l + 0.1) c h)
+      );
 
       &.ui-outlined {
         --_divider-color: var(--_border-color);
@@ -4716,16 +5019,19 @@
       /* Color inheritance from Button Group — shared interaction model.
          The .critical scope class in theme.css redirects --palette-source so
          --color-6 below becomes a tint of the active color. */
-      :where(.ui-button-group.ui-critical,
-        .ui-button-group.ui-primary) & {
+      :where(.ui-button-group.ui-critical, .ui-button-group.ui-primary) & {
         --_color-contrast: var(--gray-1);
         --_color-tonal: var(--color-6);
         --_accent-tonal-contrast: var(--text-primary-contrast);
         --_default-hover-bg-color: oklch(from var(--_accent) l c h / 15%);
         --_default-active-bg-color: oklch(from var(--_accent) l c h / 25%);
         --_filled-hover-bg-color: oklch(from var(--_accent) calc(l - 0.1) c h);
-        --_filled-active-bg-color: oklch(from var(--_accent) calc(l - 0.15) c h);
-        --_outlined-active-bg-color: oklch(from var(--_accent) calc(l - 0.1) c h);
+        --_filled-active-bg-color: oklch(
+          from var(--_accent) calc(l - 0.15) c h
+        );
+        --_outlined-active-bg-color: oklch(
+          from var(--_accent) calc(l - 0.1) c h
+        );
       }
 
       :where(.ui-button-group.ui-critical) & {
@@ -4788,10 +5094,11 @@
         --_text-color: var(--_accent-contrast);
         --_divider-color: currentColor;
 
-        :where(.ui-button-group.ui-critical,
-          .ui-button-group.ui-primary) & {
-          --_divider-color: light-dark(oklch(from var(--_accent) calc(l - 0.1) c h),
-              oklch(from var(--_accent) calc(l + 0.1) c h));
+        :where(.ui-button-group.ui-critical, .ui-button-group.ui-primary) & {
+          --_divider-color: light-dark(
+            oklch(from var(--_accent) calc(l - 0.1) c h),
+            oklch(from var(--_accent) calc(l + 0.1) c h)
+          );
         }
 
         &:where(:not([disabled])) {
@@ -4819,13 +5126,17 @@
         }
 
         /* Siblings */
-        &+& {
+        & + & {
           border-inline-start-color: var(--_divider-color);
           border-inline-width: 1px;
           margin-inline-start: -1px;
 
           &[disabled] {
-            border-inline-start-color: color-mix(in oklch, var(--_divider-color) 40%, transparent);
+            border-inline-start-color: color-mix(
+              in oklch,
+              var(--_divider-color) 40%,
+              transparent
+            );
           }
         }
       }
@@ -4852,12 +5163,16 @@
           border-end-end-radius: var(--_border-radius);
         }
 
-        &+& {
+        & + & {
           border-block-start: 1px solid var(--_divider-color);
           margin-block-start: -1px;
 
           &[disabled] {
-            border-block-start-color: color-mix(in oklch, var(--_divider-color) 40%, transparent);
+            border-block-start-color: color-mix(
+              in oklch,
+              var(--_divider-color) 40%,
+              transparent
+            );
           }
         }
       }
@@ -4936,7 +5251,7 @@
     }
 
     /* Layout */
-    &>summary {
+    & > summary {
       background-color: inherit;
       cursor: pointer;
       font-weight: 700;
@@ -4961,17 +5276,17 @@
       }
     }
 
-    &[open]>summary svg {
+    &[open] > summary svg {
       rotate: 180deg;
     }
 
-    &>.ui-content {
+    & > .ui-content {
       margin-block-start: 0;
       padding-block: var(--_content-padding-block);
       padding-inline: var(--_content-padding-inline);
     }
 
-    &>.ui-actions {
+    & > .ui-actions {
       display: flex;
       gap: var(--_actions-gap);
       justify-content: end;
@@ -4996,12 +5311,12 @@
       }
     }
 
-    &>.ui-content {
+    & > .ui-content {
       margin-block: 0;
       padding: 0;
     }
 
-    &>details.ui-accordion {
+    & > details.ui-accordion {
       --_border-color: transparent;
       --_border-width: 0;
       --_margin-inline: 0;
@@ -5010,7 +5325,7 @@
       --_summary-padding-inline: var(--_item-summary-padding-inline);
 
       /* Border between accordion items */
-      &+& {
+      & + & {
         border-block-start: 1px solid var(--_gutter-color);
         border-radius: 0;
       }
@@ -5041,7 +5356,6 @@
 }
 
 @layer components.extended {
-
   /*
 Lists meant to be used stand-alone or as part of Select elements
 
@@ -5059,7 +5373,6 @@ Lists meant to be used stand-alone or as part of Select elements
     padding: var(--size-2) 0;
 
     @media (pointer: coarse) {
-
       &,
       * {
         user-select: none;
@@ -5119,14 +5432,14 @@ Lists meant to be used stand-alone or as part of Select elements
           padding: 0;
         }
 
-        &> :where(a, button, label) {
+        & > :where(a, button, label) {
           gap: var(--size-2);
           min-block-size: var(--size-7);
           padding: var(--size-1) var(--size-2);
         }
 
         /* Checkbox / Radio */
-        &>label {
+        & > label {
           .ui-end {
             padding-inline-end: 0.125rem;
           }
@@ -5161,7 +5474,7 @@ Lists meant to be used stand-alone or as part of Select elements
       :where(li, option) {
         padding-inline: 0;
 
-        &> :where(a, button, label) {
+        & > :where(a, button, label) {
           padding-inline: 0;
         }
       }
@@ -5195,9 +5508,9 @@ Lists meant to be used stand-alone or as part of Select elements
         min-block-size: auto;
         padding: 0;
 
-        &[aria-selected="true"]> :where(a, button, label),
+        &[aria-selected="true"] > :where(a, button, label),
         &[aria-selected="true"],
-        &:has(> [aria-current="page"])> :where(a, button, label) {
+        &:has(> [aria-current="page"]) > :where(a, button, label) {
           background-color: var(--_bg-color-hover);
         }
       }
@@ -5232,9 +5545,9 @@ Lists meant to be used stand-alone or as part of Select elements
         }
       }
 
-      &>a,
-      &>button,
-      &>label {
+      & > a,
+      & > button,
+      & > label {
         align-items: center;
         background-color: var(--_bg-color);
         color: inherit;
@@ -5261,7 +5574,7 @@ Lists meant to be used stand-alone or as part of Select elements
       }
 
       /* Checkbox / Radio / Switch */
-      &>label {
+      & > label {
         &:where(.ui-checkbox, .ui-radio, .ui-switch) {
           display: flex;
         }
@@ -5312,7 +5625,7 @@ Lists meant to be used stand-alone or as part of Select elements
           font-weight: 400;
         }
 
-        p+p {
+        p + p {
           color: var(--text-muted);
           font-size: var(--font-size-0);
         }
@@ -5429,7 +5742,8 @@ Lists meant to be used stand-alone or as part of Select elements
 
     &[open] {
       opacity: 1;
-      transition: display 0.2s allow-discrete,
+      transition:
+        display 0.2s allow-discrete,
         overlay 0.2s allow-discrete,
         opacity 0.2s var(--ease-out-1);
 
@@ -5456,179 +5770,178 @@ Lists meant to be used stand-alone or as part of Select elements
 }
 
 @layer components.root {
-	:where(dialog.ui-drawer) {
-		--_backdrop-bg-color: transparent;
-		--_backdrop-blur: blur(2px);
-		--_bg-color: var(--surface-default);
-		--_block-size: min(80vb, 650px);
-		--_border-color: var(--border-color);
-		--_border-width: var(--border-width);
-		--_color: var(--text-primary);
-		--_content-padding: var(--size-4);
-		--_footer-gap: var(--size-3);
-		--_footer-padding: var(--size-3);
-		--_header-font-size: var(--font-size-3);
-		--_header-padding: var(--size-3);
-		--_inline-size: min(375px, 100vi);
-		--_shadow: var(--shadow-2);
-		--_transition-duration: 0.2s;
-		--_transition-timing: var(--ease-out-3);
-
-		background-color: var(--_bg-color);
-		border: none;
-		box-shadow: var(--_shadow);
-		color: var(--_color);
-		display: flex;
-		flex-direction: column;
-		margin: 0;
-		max-inline-size: 100%;
-		padding: 0;
-		position: fixed;
-		transition:
-			display var(--_transition-duration) allow-discrete,
-			overlay var(--_transition-duration) allow-discrete,
-			translate var(--_transition-duration) var(--_transition-timing);
-		z-index: 1000;
-
-		&::backdrop {
-			backdrop-filter: var(--_backdrop-blur);
-			background-color: var(--_backdrop-bg-color);
-			opacity: 0;
-			transition:
-				display var(--_transition-duration) allow-discrete,
-				overlay var(--_transition-duration) allow-discrete,
-				opacity var(--_transition-duration) var(--_transition-timing);
-		}
-
-		&.ui-backdrop-transparent {
-			--_backdrop-blur: none;
-		}
-
-		.ui-header {
-			align-items: center;
-			border-block-end: var(--_border-width) solid var(--_border-color);
-			display: flex;
-			padding: var(--_header-padding);
-
-			:where(h1, h2, h3, h4, h5, h6) {
-				font-size: var(--_header-font-size);
-				margin: 0;
-			}
-
-			:where(.ui-icon-button) {
-				margin-inline-start: auto;
-			}
-		}
-
-		.ui-content {
-			flex: 1;
-			overflow-y: auto;
-			padding: var(--_content-padding);
-		}
-
-		.ui-footer {
-			border-block-start: var(--_border-width) solid var(--_border-color);
-			display: flex;
-			gap: var(--_footer-gap);
-			justify-content: end;
-			padding: var(--_footer-padding);
-		}
-
-		&.ui-inline-start,
-		&.ui-inline-end {
-			block-size: 100dvb;
-			inline-size: var(--_inline-size);
-			inset-block: 0;
-			max-block-size: 100%;
-		}
-
-		&.ui-inline-start {
-			border-inline-end: var(--_border-width) solid var(--_border-color);
-			inset-inline-end: auto;
-			inset-inline-start: 0;
-			translate: -100% 0;
-		}
-
-		&.ui-inline-end {
-			border-inline-start: var(--_border-width) solid var(--_border-color);
-			inset-inline-end: 0;
-			inset-inline-start: auto;
-			translate: 100% 0;
-
-			.ui-footer {
-				justify-content: start;
-			}
-		}
-
-		&.ui-block-start,
-		&.ui-block-end {
-			block-size: var(--_block-size);
-			inline-size: 100dvi;
-			inset-inline: 0;
-			max-block-size: 80dvb;
-		}
-
-		&.ui-block-start {
-			border-block-end: var(--_border-width) solid var(--_border-color);
-			inset-block-end: auto;
-			inset-block-start: 0;
-			translate: 0 -100%;
-		}
-
-		&.ui-block-end {
-			border-block-start: var(--_border-width) solid var(--_border-color);
-			inset-block-end: 0;
-			inset-block-start: auto;
-			translate: 0 100%;
-		}
-
-		&[open] {
-			translate: 0 0;
-
-			&::backdrop {
-				opacity: 1;
-			}
-
-			@starting-style {
-				&::backdrop {
-					opacity: 0;
-				}
-
-				&.ui-inline-start {
-					translate: -100% 0;
-				}
-
-				&.ui-inline-end {
-					translate: 100% 0;
-				}
-
-				&.ui-block-start {
-					translate: 0 -100%;
-				}
-
-				&.ui-block-end {
-					translate: 0 100%;
-				}
-			}
-		}
-	}
-
-	/* Scroll-lock is provided by the shared `.ui-scroll-lock` utility in core/utils.css.
+  :where(dialog.ui-drawer) {
+    --_backdrop-bg-color: transparent;
+    --_backdrop-blur: blur(2px);
+    --_bg-color: var(--surface-default);
+    --_block-size: min(80vb, 650px);
+    --_border-color: var(--border-color);
+    --_border-width: var(--border-width);
+    --_color: var(--text-primary);
+    --_content-padding: var(--size-4);
+    --_footer-gap: var(--size-3);
+    --_footer-padding: var(--size-3);
+    --_header-font-size: var(--font-size-3);
+    --_header-padding: var(--size-3);
+    --_inline-size: min(375px, 100vi);
+    --_shadow: var(--shadow-2);
+    --_transition-duration: 0.2s;
+    --_transition-timing: var(--ease-out-3);
+
+    background-color: var(--_bg-color);
+    border: none;
+    box-shadow: var(--_shadow);
+    color: var(--_color);
+    display: flex;
+    flex-direction: column;
+    margin: 0;
+    max-inline-size: 100%;
+    padding: 0;
+    position: fixed;
+    transition:
+      display var(--_transition-duration) allow-discrete,
+      overlay var(--_transition-duration) allow-discrete,
+      translate var(--_transition-duration) var(--_transition-timing);
+    z-index: 1000;
+
+    &::backdrop {
+      backdrop-filter: var(--_backdrop-blur);
+      background-color: var(--_backdrop-bg-color);
+      opacity: 0;
+      transition:
+        display var(--_transition-duration) allow-discrete,
+        overlay var(--_transition-duration) allow-discrete,
+        opacity var(--_transition-duration) var(--_transition-timing);
+    }
+
+    &.ui-backdrop-transparent {
+      --_backdrop-blur: none;
+    }
+
+    .ui-header {
+      align-items: center;
+      border-block-end: var(--_border-width) solid var(--_border-color);
+      display: flex;
+      padding: var(--_header-padding);
+
+      :where(h1, h2, h3, h4, h5, h6) {
+        font-size: var(--_header-font-size);
+        margin: 0;
+      }
+
+      :where(.ui-icon-button) {
+        margin-inline-start: auto;
+      }
+    }
+
+    .ui-content {
+      flex: 1;
+      overflow-y: auto;
+      padding: var(--_content-padding);
+    }
+
+    .ui-footer {
+      border-block-start: var(--_border-width) solid var(--_border-color);
+      display: flex;
+      gap: var(--_footer-gap);
+      justify-content: end;
+      padding: var(--_footer-padding);
+    }
+
+    &.ui-inline-start,
+    &.ui-inline-end {
+      block-size: 100dvb;
+      inline-size: var(--_inline-size);
+      inset-block: 0;
+      max-block-size: 100%;
+    }
+
+    &.ui-inline-start {
+      border-inline-end: var(--_border-width) solid var(--_border-color);
+      inset-inline-end: auto;
+      inset-inline-start: 0;
+      translate: -100% 0;
+    }
+
+    &.ui-inline-end {
+      border-inline-start: var(--_border-width) solid var(--_border-color);
+      inset-inline-end: 0;
+      inset-inline-start: auto;
+      translate: 100% 0;
+
+      .ui-footer {
+        justify-content: start;
+      }
+    }
+
+    &.ui-block-start,
+    &.ui-block-end {
+      block-size: var(--_block-size);
+      inline-size: 100dvi;
+      inset-inline: 0;
+      max-block-size: 80dvb;
+    }
+
+    &.ui-block-start {
+      border-block-end: var(--_border-width) solid var(--_border-color);
+      inset-block-end: auto;
+      inset-block-start: 0;
+      translate: 0 -100%;
+    }
+
+    &.ui-block-end {
+      border-block-start: var(--_border-width) solid var(--_border-color);
+      inset-block-end: 0;
+      inset-block-start: auto;
+      translate: 0 100%;
+    }
+
+    &[open] {
+      translate: 0 0;
+
+      &::backdrop {
+        opacity: 1;
+      }
+
+      @starting-style {
+        &::backdrop {
+          opacity: 0;
+        }
+
+        &.ui-inline-start {
+          translate: -100% 0;
+        }
+
+        &.ui-inline-end {
+          translate: 100% 0;
+        }
+
+        &.ui-block-start {
+          translate: 0 -100%;
+        }
+
+        &.ui-block-end {
+          translate: 0 100%;
+        }
+      }
+    }
+  }
+
+  /* Scroll-lock is provided by the shared `.ui-scroll-lock` utility in core/utils.css.
 	   This carve-out re-enables page scrolling when a transparent-backdrop drawer is
 	   open on wide viewports (where the drawer doesn't visually cover the page). */
-	html:has(dialog.ui-drawer.ui-scroll-lock[open].ui-backdrop-transparent) {
-		overflow: unset;
-		overscroll-behavior: auto;
-
-		@media (width < 500px) {
-			overflow: clip;
-			overscroll-behavior: contain;
-		}
-	}
+  html:has(dialog.ui-drawer.ui-scroll-lock[open].ui-backdrop-transparent) {
+    overflow: unset;
+    overscroll-behavior: auto;
+
+    @media (width < 500px) {
+      overflow: clip;
+      overscroll-behavior: contain;
+    }
+  }
 }
 
 @layer components.extended {
-
   /* Form */
   :where(.ui-form) {
     display: grid;
@@ -5700,21 +6013,21 @@ Lists meant to be used stand-alone or as part of Select elements
     /* Error / validation */
     &[data-invalid] {
       :where(.ui-end-text) {
-        color: var(--primary);
+        color: var(--critical);
       }
 
       :where(.ui-checkbox, .ui-radio, .ui-switch) {
-        --palette-source: oklch(0.58 0.21 var(--hue-red));
+        --primary: var(--critical);
 
         :where(.ui-end-text) {
-          color: var(--primary);
+          color: var(--critical);
         }
       }
 
       :where(.ui-switch) {
         input {
           border-radius: var(--radius-round);
-          outline: 2px solid var(--primary);
+          outline: 2px solid var(--critical);
         }
       }
     }
@@ -5742,7 +6055,9 @@ Lists meant to be used stand-alone or as part of Select elements
     gap: var(--size-4);
 
     /* If it only has checkboxes, radios, or switches */
-    &:has(> :where(.ui-checkbox, .ui-radio, .ui-switch)):not(:has(> :not(.ui-checkbox, .ui-radio, .ui-switch))) {
+    &:has(> :where(.ui-checkbox, .ui-radio, .ui-switch)):not(
+        :has(> :not(.ui-checkbox, .ui-radio, .ui-switch))
+      ) {
       gap: var(--size-2);
     }
 
@@ -5758,7 +6073,7 @@ Lists meant to be used stand-alone or as part of Select elements
       }
     }
 
-    &+& {
+    & + & {
       margin-block-start: var(--size-5);
     }
 
@@ -5775,7 +6090,6 @@ Lists meant to be used stand-alone or as part of Select elements
 }
 
 @layer components.extended {
-
   /*
 - Common styling for input, textarea and select
 - Form related styles such as: label, supporting text, error handling
@@ -5882,7 +6196,6 @@ Lists meant to be used stand-alone or as part of Select elements
 
     /* Textarea - keep affix aligned with the first line */
     &.ui-textarea .ui-field {
-
       .ui-prefix,
       .ui-suffix {
         align-self: start;
@@ -5929,7 +6242,6 @@ Lists meant to be used stand-alone or as part of Select elements
       /* Variants */
       &.ui-filled {
         input {
-
           &::-webkit-file-upload-button,
           &::file-selector-button {
             background-color: var(--surface-default);
@@ -5968,7 +6280,6 @@ Lists meant to be used stand-alone or as part of Select elements
       .ui-label {
         /* Make sure chevron is visible */
         inline-size: calc(100% - var(--size-6));
-
       }
     }
 
@@ -5979,7 +6290,8 @@ Lists meant to be used stand-alone or as part of Select elements
 
         button {
           outline: 0;
-          padding: var(--_field-padding-block) var(--size-8) var(--_field-padding-block) var(--_field-padding-inline);
+          padding: var(--_field-padding-block) var(--size-8)
+            var(--_field-padding-block) var(--_field-padding-inline);
         }
       }
     }
@@ -5987,7 +6299,8 @@ Lists meant to be used stand-alone or as part of Select elements
     /* Non-customizable Select */
     &:has(select):not(:has(button)) {
       select {
-        padding: var(--_field-padding-block) var(--size-8) var(--_field-padding-block) var(--_field-padding-inline);
+        padding: var(--_field-padding-block) var(--size-8)
+          var(--_field-padding-block) var(--_field-padding-inline);
       }
     }
 
@@ -6085,11 +6398,12 @@ Lists meant to be used stand-alone or as part of Select elements
       --_bg-color: var(--surface-tonal);
 
       &:not(:has([disabled], :has(input[type="color"]))) {
-
         /* Hover */
         &:hover {
-          --_bg-color: light-dark(oklch(from var(--surface-tonal) calc(l * 0.93) c h),
-              oklch(from var(--surface-tonal) calc(l * 1.1) c h));
+          --_bg-color: light-dark(
+            oklch(from var(--surface-tonal) calc(l * 0.93) c h),
+            oklch(from var(--surface-tonal) calc(l * 1.1) c h)
+          );
         }
       }
     }
@@ -6180,7 +6494,7 @@ Lists meant to be used stand-alone or as part of Select elements
       .ui-field:has(textarea) {
         grid-row: 1 / span 3;
 
-        +.ui-end-text {
+        + .ui-end-text {
           grid-row: 4;
         }
       }
@@ -6265,8 +6579,11 @@ Lists meant to be used stand-alone or as part of Select elements
       }
 
       @media (prefers-reduced-motion: no-preference) {
-        transition: display 0.2s allow-discrete, opacity 0.2s var(--ease-3),
-          overlay 0.2s allow-discrete, scale 0.2s var(--ease-3);
+        transition:
+          display 0.2s allow-discrete,
+          opacity 0.2s var(--ease-3),
+          overlay 0.2s allow-discrete,
+          scale 0.2s var(--ease-3);
       }
     }
 
@@ -6300,8 +6617,10 @@ Lists meant to be used stand-alone or as part of Select elements
       [role="group"] {
         label {
           background-color: light-dark(var(--gray-3), var(--gray-13));
-          color: light-dark(oklch(from var(--text-primary) calc(l * 0.75) c h),
-              oklch(from var(--text-primary) calc(l * 1.25) c h));
+          color: light-dark(
+            oklch(from var(--text-primary) calc(l * 0.75) c h),
+            oklch(from var(--text-primary) calc(l * 1.25) c h)
+          );
           font-weight: 500;
           overflow: hidden;
           padding-inline: var(--size-2);
@@ -6324,7 +6643,6 @@ Lists meant to be used stand-alone or as part of Select elements
 
       /* Option */
       option {
-
         /* Checkmark */
         /* TODO - checkmark should be the final version of the checkmark API. Follow the development of this and remove redundant psuedo stuff. */
         &::check {
@@ -6347,7 +6665,6 @@ Lists meant to be used stand-alone or as part of Select elements
   }
 
   :where(.ui-select:has(select)) {
-
     /* Size */
     &.ui-small {
       button {
@@ -6396,8 +6713,10 @@ Lists meant to be used stand-alone or as part of Select elements
 }
 
 @layer components.extended {
-
-  :where(.ui-text-field:has( :where(input[type="date"],
+  :where(
+    .ui-text-field:has(
+      :where(
+        input[type="date"],
         input[type="datetime-local"],
         input[type="email"],
         input[type="month"],
@@ -6408,8 +6727,10 @@ Lists meant to be used stand-alone or as part of Select elements
         input[type="text"],
         input[type="time"],
         input[type="url"],
-        input[type="week"]))) {
-
+        input[type="week"]
+      )
+    )
+  ) {
     /* Sizes */
     &.ui-small {
       input {
@@ -6465,7 +6786,9 @@ Lists meant to be used stand-alone or as part of Select elements
     textarea {
       block-size: auto;
       field-sizing: content;
-      min-block-size: calc(var(--_field-padding-block) * 2 + (var(--border-width) * 2) + 3lh);
+      min-block-size: calc(
+        var(--_field-padding-block) * 2 + (var(--border-width) * 2) + 3lh
+      );
       resize: vertical;
     }
 
@@ -6486,77 +6809,79 @@ Lists meant to be used stand-alone or as part of Select elements
 }
 
 @layer components.extended {
-	:where(.ui-tooltip) {
-		--_tooltip-bg: light-dark(var(--gray-13), var(--gray-3));
-		--_tooltip-color: light-dark(var(--gray-1), var(--gray-15));
-		--_tooltip-offset: var(--size-2);
-
-		&>.ui-anchor-floating {
-			background-color: var(--_tooltip-bg);
-			border-radius: var(--radius-2);
-			color: var(--_tooltip-color);
-			font-size: var(--font-size-05);
-			line-height: 1.3;
-			margin: var(--_tooltip-offset);
-			max-inline-size: 240px;
-			/* UA sets overflow: auto on [popover], which clips the arrow. */
-			overflow: visible;
-			padding-block: var(--size-1);
-			padding-inline: var(--size-2);
-			position-area: var(--anchor-position-area, block-start);
-			position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
-			position-visibility: anchors-visible;
-			text-align: center;
-			text-wrap: pretty;
-		}
-
-		/* Optional arrow pointing from the tooltip toward the trigger.
+  :where(.ui-tooltip) {
+    --_tooltip-bg: light-dark(var(--gray-13), var(--gray-3));
+    --_tooltip-color: light-dark(var(--gray-1), var(--gray-15));
+    --_tooltip-offset: var(--size-2);
+
+    & > .ui-anchor-floating {
+      background-color: var(--_tooltip-bg);
+      border-radius: var(--radius-2);
+      color: var(--_tooltip-color);
+      font-size: var(--font-size-05);
+      line-height: 1.3;
+      margin: var(--_tooltip-offset);
+      max-inline-size: 240px;
+      /* UA sets overflow: auto on [popover], which clips the arrow. */
+      overflow: visible;
+      padding-block: var(--size-1);
+      padding-inline: var(--size-2);
+      position-area: var(--anchor-position-area, block-start);
+      position-try-fallbacks:
+        flip-block,
+        flip-inline,
+        flip-block flip-inline;
+      position-visibility: anchors-visible;
+      text-align: center;
+      text-wrap: pretty;
+    }
+
+    /* Optional arrow pointing from the tooltip toward the trigger.
 		   Anchored to the same --anchor so it flips together with the
 		   tooltip when position-try-fallbacks kicks in. */
-		&.ui-with-arrow {
-			--_arrow-size: var(--size-2);
-
-			&>.ui-anchor-floating {
-				/* Reserve space so the arrow doesn't overlap the trigger. */
-				--_tooltip-offset: calc(var(--size-2) + var(--_arrow-size) / 2);
-			}
-
-			&>.ui-anchor-floating::before {
-				background-color: var(--_tooltip-bg);
-				block-size: var(--_arrow-size);
-				content: "";
-				inline-size: var(--_arrow-size);
-				inset-block-end: calc(var(--_arrow-size) / -2);
-				inset-inline-start: 50%;
-				position: absolute;
-				rotate: 45deg;
-				translate: -50% 0;
-			}
-		}
-
-		/* Fade */
-		&>.ui-anchor-floating[popover] {
-			opacity: 0;
-			transition:
-				display 0.15s allow-discrete,
-				opacity 0.15s var(--ease-out-1),
-				overlay 0.15s allow-discrete;
-
-			&:popover-open {
-				opacity: 1;
-
-				@starting-style {
-					opacity: 0;
-				}
-			}
-		}
-	}
+    &.ui-with-arrow {
+      --_arrow-size: var(--size-2);
+
+      & > .ui-anchor-floating {
+        /* Reserve space so the arrow doesn't overlap the trigger. */
+        --_tooltip-offset: calc(var(--size-2) + var(--_arrow-size) / 2);
+      }
+
+      & > .ui-anchor-floating::before {
+        background-color: var(--_tooltip-bg);
+        block-size: var(--_arrow-size);
+        content: "";
+        inline-size: var(--_arrow-size);
+        inset-block-end: calc(var(--_arrow-size) / -2);
+        inset-inline-start: 50%;
+        position: absolute;
+        rotate: 45deg;
+        translate: -50% 0;
+      }
+    }
+
+    /* Fade */
+    & > .ui-anchor-floating[popover] {
+      opacity: 0;
+      transition:
+        display 0.15s allow-discrete,
+        opacity 0.15s var(--ease-out-1),
+        overlay 0.15s allow-discrete;
+
+      &:popover-open {
+        opacity: 1;
+
+        @starting-style {
+          opacity: 0;
+        }
+      }
+    }
+  }
 }
 
 /* Utils */
 
 @layer utils {
-
   /*
 Screen-reader only
 When you visibly want to hide an element but make it accessible for screen readers.
@@ -6616,7 +6941,8 @@ Add `.ui-scroll-lock` to any element that uses the [open] attribute (native <dia
         inset-inline-start: 50%;
         position: absolute;
         transform-origin: center center;
-        transform: translateX(calc(var(--isRTL) * 50%)) translateY(-50%) translateZ(-1px) scale(var(--thumb-scale));
+        transform: translateX(calc(var(--isRTL) * 50%)) translateY(-50%)
+          translateZ(-1px) scale(var(--thumb-scale));
         will-change: transform;
 
         @media (prefers-reduced-motion: no-preference) {