opui-css 5.4.0 → 5.4.2

package/css/components/range.css

@@ -3,9 +3,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;
 
@@ -17,8 +14,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);
@@ -57,7 +52,7 @@
       margin-top: calc(var(--size-1) * -1);
       padding-inline: calc(3ex / 2);
 
-      & > option {
+      &>option {
         display: flex;
         inline-size: 0;
         justify-content: center;
@@ -121,9 +116,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;
@@ -140,8 +132,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;
       }
@@ -165,9 +155,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;
@@ -238,11 +225,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);
       }
@@ -268,8 +253,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);
@@ -287,8 +271,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);
@@ -313,10 +296,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));
         }
       }
 

package/css/components/select.css

@@ -38,11 +38,10 @@
         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 */
@@ -75,10 +74,8 @@
       [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);
@@ -101,6 +98,7 @@
 
       /* 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 {
@@ -123,6 +121,7 @@
   }
 
   :where(.ui-select:has(select)) {
+
     /* Size */
     &.ui-small {
       button {

package/css/components/toast.css

@@ -102,7 +102,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>");
     }
@@ -132,8 +131,6 @@
     }
   }
 
-  /* Identity keyframe — only purpose is to delay the exit animation by the
-	   author-defined duration. */
   @keyframes toast-hold {
     from {
       opacity: 1;

package/css/components/tooltip.css

@@ -4,7 +4,7 @@
     --_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);
@@ -26,18 +26,16 @@
       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: "";
@@ -51,7 +49,7 @@
     }
 
     /* Fade */
-    & > .ui-anchor-floating[popover] {
+    &>.ui-anchor-floating[popover] {
       opacity: 0;
       transition:
         display 0.15s allow-discrete,

package/css/components/typography.css

@@ -53,10 +53,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;
@@ -64,20 +62,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;
@@ -85,13 +81,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;
     }
   }
@@ -103,7 +99,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;
@@ -228,7 +224,7 @@
     scrollbar-width: thin;
     white-space: pre;
 
-    > code {
+    >code {
       background: none;
       border-radius: 0;
       color: inherit;
@@ -254,6 +250,7 @@
       text-underline-offset: 2px;
 
       &[href] {
+
         &:hover,
         &:focus-visible {
           color: var(--primary-light);
@@ -303,7 +300,7 @@
       overflow-x: auto;
       scrollbar-width: thin;
 
-      > code {
+      >code {
         background: none;
         border-radius: 0;
         color: inherit;
@@ -327,7 +324,7 @@
       font-weight: 700;
       text-wrap: pretty;
 
-      & + *:not(&) {
+      &+*:not(&) {
         margin-block-start: 0;
       }
     }
@@ -374,10 +371,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;
@@ -385,26 +380,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;
       }
     }
@@ -466,7 +461,7 @@
       margin-block: var(--size-7);
       place-items: center;
 
-      & > * {
+      &>* {
         margin-block: 0;
       }
 
@@ -477,18 +472,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;
       }
     }

package/css/js/checkbox.js

@@ -1,7 +1,7 @@
 /**
  * Checkbox runtime helpers.
  *
- * `indeterminate` is a JavaScript-only property on HTMLInputElement — the
+ * `indeterminate` is a JavaScript-only property on HTMLInputElement - the
  * attribute alone has no effect. We mark inputs with `data-indeterminate` at
  * render time and apply the property here, both on initial load and after
  * Astro's view transitions swap the DOM.

package/css/theme.css

@@ -1,4 +1,5 @@
 @layer theme {
+
   /* 1. Color scheme */
   .ui-light {
     --color-scheme: light;
@@ -22,15 +23,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);
@@ -77,7 +76,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;