opui-css 5.4.0 → 5.4.2

package/dist/opui.components.css

@@ -16,23 +16,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%)
-    );
-
-    --_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;
@@ -67,11 +59,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);
@@ -97,11 +84,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;
@@ -139,8 +124,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);
@@ -214,7 +198,7 @@
     }
   }
 
-  /* file input */
+  /* File input */
   :where(input[type="file"]) {
     align-self: flex-start;
     border: var(--border-size-1) solid var(--surface-filled);
@@ -357,22 +341,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;
@@ -421,11 +397,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);
@@ -453,20 +424,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));
         }
       }
     }
@@ -888,7 +855,7 @@
       --_card-border-width: 1px;
     }
 
-    & > :where(hgroup, .ui-content) {
+    &> :where(hgroup, .ui-content) {
       padding-inline: var(--size-3);
 
       &:last-child {
@@ -897,11 +864,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;
       }
 
@@ -910,18 +878,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;
@@ -1867,9 +1835,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;
 
@@ -1881,8 +1846,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);
@@ -1921,7 +1884,7 @@
       margin-top: calc(var(--size-1) * -1);
       padding-inline: calc(3ex / 2);
 
-      & > option {
+      &>option {
         display: flex;
         inline-size: 0;
         justify-content: center;
@@ -1985,9 +1948,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;
@@ -2004,8 +1964,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;
       }
@@ -2029,9 +1987,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;
@@ -2102,11 +2057,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);
       }
@@ -2132,8 +2085,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);
@@ -2151,8 +2103,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);
@@ -2177,10 +2128,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));
         }
       }
 
@@ -2577,7 +2526,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>");
     }
@@ -2607,8 +2555,6 @@
     }
   }
 
-  /* Identity keyframe — only purpose is to delay the exit animation by the
-	   author-defined duration. */
   @keyframes toast-hold {
     from {
       opacity: 1;
@@ -2689,10 +2635,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;
@@ -2700,20 +2644,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;
@@ -2721,13 +2663,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;
     }
   }
@@ -2739,7 +2681,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;
@@ -2864,7 +2806,7 @@
     scrollbar-width: thin;
     white-space: pre;
 
-    > code {
+    >code {
       background: none;
       border-radius: 0;
       color: inherit;
@@ -2891,6 +2833,7 @@
       text-underline-offset: 2px;
 
       &[href] {
+
         &:hover,
         &:focus-visible {
           color: var(--primary-light);
@@ -2940,7 +2883,7 @@
       overflow-x: auto;
       scrollbar-width: thin;
 
-      > code {
+      >code {
         background: none;
         border-radius: 0;
         color: inherit;
@@ -2964,7 +2907,7 @@
       font-weight: 700;
       text-wrap: pretty;
 
-      & + *:not(&) {
+      &+*:not(&) {
         margin-block-start: 0;
       }
     }
@@ -3011,10 +2954,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;
@@ -3022,26 +2963,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;
       }
     }
@@ -3103,7 +3044,7 @@
       margin-block: var(--size-7);
       place-items: center;
 
-      & > * {
+      &>* {
         margin-block: 0;
       }
 
@@ -3114,18 +3055,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;
       }
     }
@@ -3240,21 +3181,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;
@@ -3316,7 +3257,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);
@@ -3324,7 +3265,7 @@
     }
 
     /* Visibility */
-    &.ui-invisible > .ui-anchor-floating > .ui-badge-indicator {
+    &.ui-invisible>.ui-anchor-floating>.ui-badge-indicator {
       opacity: 0;
       pointer-events: none;
     }
@@ -3344,10 +3285,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);
@@ -3361,9 +3300,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);
@@ -3371,12 +3308,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) & {
@@ -3440,10 +3373,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])) {
@@ -3471,17 +3402,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);
           }
         }
       }
@@ -3508,16 +3437,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);
           }
         }
       }
@@ -3595,7 +3522,7 @@
     }
 
     /* Layout */
-    & > summary {
+    &>summary {
       background-color: inherit;
       cursor: pointer;
       font-weight: 700;
@@ -3620,17 +3547,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;
@@ -3655,12 +3582,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;
@@ -3669,7 +3596,7 @@
       --_summary-padding-inline: var(--_item-summary-padding-inline);
 
       /* Border between accordion items */
-      & + & {
+      &+& {
         border-block-start: 1px solid var(--_gutter-color);
         border-radius: 0;
       }
@@ -4267,9 +4194,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;
@@ -4282,6 +4207,7 @@ Lists meant to be used stand-alone or as part of Select elements
 }
 
 @layer components.extended {
+
   /* Form */
   :where(.ui-form) {
     display: grid;
@@ -4395,9 +4321,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);
     }
 
@@ -4407,13 +4331,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);
     }
 
@@ -4919,11 +4843,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 */
@@ -4956,10 +4879,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);
@@ -4982,6 +4903,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 {
@@ -5004,6 +4926,7 @@ Lists meant to be used stand-alone or as part of Select elements
   }
 
   :where(.ui-select:has(select)) {
+
     /* Size */
     &.ui-small {
       button {
@@ -5153,7 +5076,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);
@@ -5175,18 +5098,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: "";
@@ -5200,7 +5121,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,