opui-css 5.4.0 → 5.4.2

package/dist/opui.css

@@ -1291,6 +1291,7 @@
 }
 
 @layer theme {
+
   /* 1. Color scheme */
   .ui-light {
     --color-scheme: light;
@@ -1314,15 +1315,13 @@
       --gray-chroma: 0.01;
     */
 
-    /* 3. Named colors (no severity meaning) — use when you literally want a green/red/etc. dot */
+    /* 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 */
+    /* 4. Intent tokens */
     --success: var(--green);
     --info: var(--blue);
     --warning: var(--orange);
@@ -1369,7 +1368,7 @@
     /* 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. */
+    /* 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;
@@ -1653,23 +1652,15 @@
     --_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%)
-    );
+    --_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)
-    );
+    --_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;
@@ -1704,11 +1695,6 @@
       box-shadow calc(0.1s * var(--_motion)) ease;
     user-select: none;
 
-    /* Colors — shared interaction model for critical and primary.
-       Each color modifier below only swaps --_color; the tonal surface,
-       contrast text, and hover/active strategy are identical.
-       The .critical scope class in theme.css redirects --palette-source so
-       --color-6 below becomes a tint of the active color. */
     &.ui-critical,
     &.ui-primary {
       --_color-contrast: var(--gray-1);
@@ -1734,11 +1720,9 @@
 
     /* 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;
@@ -1776,8 +1760,7 @@
       line-height: 1.2;
     }
 
-    /* Sizes — heights aliased from the shared --control-size scale.
-       Override --button-size-* in a parent scope to resize an entire region. */
+    /* Sizes */
     &.ui-x-small {
       --_min-height: var(--button-size-x-small);
       --_font-size: var(--font-size-0);
@@ -1851,7 +1834,7 @@
     }
   }
 
-  /* file input */
+  /* File input */
   :where(input[type="file"]) {
     align-self: flex-start;
     border: var(--border-size-1) solid var(--surface-filled);
@@ -1994,22 +1977,14 @@
     --_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;
@@ -2058,11 +2033,6 @@
         background-color calc(0.1s * var(--_motion)) ease;
     }
 
-    /* Colors — shared interaction model for critical and primary.
-       Each color modifier below only swaps --_color; the tonal surface,
-       contrast text, and hover/active strategy are identical.
-       The .critical scope class in theme.css redirects --palette-source so
-       --color-6 below becomes a tint of the active color. */
     &.ui-critical,
     &.ui-primary {
       --_color-contrast: var(--gray-1);
@@ -2090,20 +2060,16 @@
     &: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));
         }
       }
     }
@@ -2525,7 +2491,7 @@
       --_card-border-width: 1px;
     }
 
-    & > :where(hgroup, .ui-content) {
+    &> :where(hgroup, .ui-content) {
       padding-inline: var(--size-3);
 
       &:last-child {
@@ -2534,11 +2500,12 @@
     }
 
     /* Header */
-    & > hgroup {
+    &>hgroup {
       padding-block: var(--size-3) 0;
 
       /* Top paragraph */
-      & > p:first-of-type:first-child {
+      &>p:first-of-type:first-child {
+        font-size: var(--font-size-0);
         line-height: 1.3;
       }
 
@@ -2547,18 +2514,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;
@@ -3504,9 +3471,6 @@
     --_motion: var(--motion, 1);
     display: grid;
     gap: var(--size-1) 0;
-    /* Two-column base so the optional .value cell can sit next to the
-       label on row 1. Children that span the full width keep using
-       `grid-column: 1/-1`, so this is backwards compatible. */
     grid-template-columns: 1fr auto;
     position: relative;
 
@@ -3518,8 +3482,6 @@
       grid-row: 1;
     }
 
-    /* Live current-value readout. Pairs with the <output> element
-       rendered by the Range component (or hand-written .value markup). */
     :where(.ui-value) {
       color: var(--text-muted);
       font-size: var(--font-size-0);
@@ -3558,7 +3520,7 @@
       margin-top: calc(var(--size-1) * -1);
       padding-inline: calc(3ex / 2);
 
-      & > option {
+      &>option {
         display: flex;
         inline-size: 0;
         justify-content: center;
@@ -3622,9 +3584,6 @@
         min-inline-size: 25ch;
       }
 
-      /* In spread mode, the value sits below the slider in col 2
-         (where end-text would normally land). When end-text is also
-         present it shifts down a row to avoid collision. */
       :where(.ui-value) {
         grid-column: 2;
         grid-row: 2;
@@ -3641,8 +3600,6 @@
         grid-row: 2;
       }
 
-      /* When both datalist and end-text exist, push end-text below the datalist
-         so they don't collide on the same grid cell. */
       &:has(datalist) :where(.ui-end-text) {
         grid-row: 3;
       }
@@ -3666,9 +3623,6 @@
           grid-row: 1;
         }
 
-        /* Share row 1 with the label: the label's text stays left-aligned
-           in its full-width cell, while the value shrinks to fit and
-           right-aligns. Visually reads as a "[name ........ value]" row. */
         :where(.ui-value) {
           grid-row: 1;
           justify-self: end;
@@ -3739,11 +3693,9 @@
       /* 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);
       }
@@ -3769,8 +3721,7 @@
         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);
@@ -3788,8 +3739,7 @@
         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);
@@ -3814,10 +3764,8 @@
 
         &: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));
         }
       }
 
@@ -4214,7 +4162,6 @@
       }
     }
 
-    /* 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>");
     }
@@ -4244,8 +4191,6 @@
     }
   }
 
-  /* Identity keyframe — only purpose is to delay the exit animation by the
-	   author-defined duration. */
   @keyframes toast-hold {
     from {
       opacity: 1;
@@ -4326,10 +4271,8 @@
 
   /** 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;
@@ -4337,20 +4280,18 @@
   }
 
   :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;
@@ -4358,13 +4299,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;
     }
   }
@@ -4376,7 +4317,7 @@
     line-height: 1.6;
   }
 
-  /* Inline text elements — class utilities (work anywhere) */
+  /* Inline text elements - class utilities */
   :where(.ui-u, .ui-abbr, .ui-dfn) {
     text-decoration: underline;
     text-underline-offset: 1px;
@@ -4501,7 +4442,7 @@
     scrollbar-width: thin;
     white-space: pre;
 
-    > code {
+    >code {
       background: none;
       border-radius: 0;
       color: inherit;
@@ -4528,6 +4469,7 @@
       text-underline-offset: 2px;
 
       &[href] {
+
         &:hover,
         &:focus-visible {
           color: var(--primary-light);
@@ -4577,7 +4519,7 @@
       overflow-x: auto;
       scrollbar-width: thin;
 
-      > code {
+      >code {
         background: none;
         border-radius: 0;
         color: inherit;
@@ -4601,7 +4543,7 @@
       font-weight: 700;
       text-wrap: pretty;
 
-      & + *:not(&) {
+      &+*:not(&) {
         margin-block-start: 0;
       }
     }
@@ -4648,10 +4590,8 @@
 
     /** 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;
@@ -4659,26 +4599,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;
       }
     }
@@ -4740,7 +4680,7 @@
       margin-block: var(--size-7);
       place-items: center;
 
-      & > * {
+      &>* {
         margin-block: 0;
       }
 
@@ -4751,18 +4691,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;
       }
     }
@@ -4877,21 +4817,21 @@
 
     /* 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);
       border-radius: var(--radius-round);
       color: var(--_text-color);
       display: grid;
-      font-size: 12px;
+      font-size: var(--font-size-0);
       font-weight: 500;
       inline-size: max-content;
       line-height: normal;
@@ -4953,7 +4893,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);
@@ -4961,7 +4901,7 @@
     }
 
     /* Visibility */
-    &.ui-invisible > .ui-anchor-floating > .ui-badge-indicator {
+    &.ui-invisible>.ui-anchor-floating>.ui-badge-indicator {
       opacity: 0;
       pointer-events: none;
     }
@@ -4981,10 +4921,8 @@
       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);
@@ -4998,9 +4936,7 @@
         outline-offset: -4px;
       }
 
-      /* 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. */
+      /* Color inherited from Button Group. */
       :where(.ui-button-group.ui-critical, .ui-button-group.ui-primary) & {
         --_color-contrast: var(--gray-1);
         --_color-tonal: var(--color-6);
@@ -5008,12 +4944,8 @@
         --_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) & {
@@ -5077,10 +5009,8 @@
         --_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)
-          );
+          --_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])) {
@@ -5108,17 +5038,15 @@
         }
 
         /* 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);
           }
         }
       }
@@ -5145,16 +5073,14 @@
           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);
           }
         }
       }
@@ -5232,7 +5158,7 @@
     }
 
     /* Layout */
-    & > summary {
+    &>summary {
       background-color: inherit;
       cursor: pointer;
       font-weight: 700;
@@ -5257,17 +5183,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;
@@ -5292,12 +5218,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;
@@ -5306,7 +5232,7 @@
       --_summary-padding-inline: var(--_item-summary-padding-inline);
 
       /* Border between accordion items */
-      & + & {
+      &+& {
         border-block-start: 1px solid var(--_gutter-color);
         border-radius: 0;
       }
@@ -5904,9 +5830,7 @@ Lists meant to be used stand-alone or as part of Select elements
     }
   }
 
-  /* 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). */
+  /* Scroll-lock is provided by the shared `.ui-scroll-lock` utility in core/utils.css. */
   html:has(dialog.ui-drawer.ui-scroll-lock[open].ui-backdrop-transparent) {
     overflow: unset;
     overscroll-behavior: auto;
@@ -5919,6 +5843,7 @@ Lists meant to be used stand-alone or as part of Select elements
 }
 
 @layer components.extended {
+
   /* Form */
   :where(.ui-form) {
     display: grid;
@@ -6032,9 +5957,7 @@ 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);
     }
 
@@ -6044,13 +5967,13 @@ Lists meant to be used stand-alone or as part of Select elements
       flex-direction: row;
       gap: var(--size-2);
 
-      /* If it's not preceeded by an hr */
+      /* If it's not preceded by an hr */
       &:not(hr + &) {
         margin-block-start: var(--size-4);
       }
     }
 
-    & + & {
+    &+& {
       margin-block-start: var(--size-5);
     }
 
@@ -6556,11 +6479,10 @@ Lists meant to be used stand-alone or as part of Select elements
         transform: scale(0.9);
       }
 
-      transition:
-        display calc(0.2s * var(--_motion)) allow-discrete,
-        opacity calc(0.2s * var(--_motion)) var(--ease-3),
-        overlay calc(0.2s * var(--_motion)) allow-discrete,
-        scale calc(0.2s * var(--_motion)) var(--ease-3);
+      transition: display calc(0.2s * var(--_motion)) allow-discrete,
+      opacity calc(0.2s * var(--_motion)) var(--ease-3),
+      overlay calc(0.2s * var(--_motion)) allow-discrete,
+      scale calc(0.2s * var(--_motion)) var(--ease-3);
     }
 
     /* Animation off-stage styles */
@@ -6593,10 +6515,8 @@ 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);
@@ -6619,6 +6539,7 @@ 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 {
@@ -6641,6 +6562,7 @@ Lists meant to be used stand-alone or as part of Select elements
   }
 
   :where(.ui-select:has(select)) {
+
     /* Size */
     &.ui-small {
       button {
@@ -6790,7 +6712,7 @@ Lists meant to be used stand-alone or as part of Select elements
     --_tooltip-color: light-dark(var(--gray-1), var(--gray-15));
     --_tooltip-offset: var(--size-2);
 
-    & > .ui-anchor-floating {
+    &>.ui-anchor-floating {
       background-color: var(--_tooltip-bg);
       border-radius: var(--radius-2);
       color: var(--_tooltip-color);
@@ -6812,18 +6734,16 @@ Lists meant to be used stand-alone or as part of Select elements
       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. */
+    /* Arrow */
     &.ui-with-arrow {
       --_arrow-size: var(--size-2);
 
-      & > .ui-anchor-floating {
-        /* Reserve space so the arrow doesn't overlap the trigger. */
+      &>.ui-anchor-floating {
+        /* Offset so the arrow doesn't overlap the trigger. */
         --_tooltip-offset: calc(var(--size-2) + var(--_arrow-size) / 2);
       }
 
-      & > .ui-anchor-floating::before {
+      &>.ui-anchor-floating::before {
         background-color: var(--_tooltip-bg);
         block-size: var(--_arrow-size);
         content: "";
@@ -6837,7 +6757,7 @@ Lists meant to be used stand-alone or as part of Select elements
     }
 
     /* Fade */
-    & > .ui-anchor-floating[popover] {
+    &>.ui-anchor-floating[popover] {
       opacity: 0;
       transition:
         display 0.15s allow-discrete,
@@ -6858,9 +6778,9 @@ Lists meant to be used stand-alone or as part of Select elements
 /* Utils */
 
 @layer utils {
+
   /*
 Screen-reader only
-When you visibly want to hide an element but make it accessible for screen readers.
 */
   .ui-sr-only {
     block-size: 1px;
@@ -6917,8 +6837,7 @@ 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;
 
         transition: transform calc(0.2s * var(--motion, 1)) ease;