opui-css 5.0.1 → 5.1.0

package/css/components/radio.css

@@ -1,172 +1,170 @@
 @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;
-					}
-				}
-			}
-		}
-	}
+  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) {
+      --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;
+          }
+        }
+      }
+    }
+  }
 }

package/css/components/range.css

@@ -56,7 +56,7 @@
       margin-top: calc(var(--size-1) * -1);
       padding-inline: calc(3ex / 2);
 
-      &>option {
+      & > option {
         display: flex;
         inline-size: 0;
         justify-content: center;
@@ -237,9 +237,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);
       }
@@ -265,7 +267,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);
@@ -285,7 +288,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);
@@ -312,8 +316,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)
+          );
         }
       }
 
@@ -333,5 +339,4 @@
       }
     }
   }
-
 }

package/css/components/select.css

@@ -38,8 +38,11 @@
       }
 
       @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);
       }
     }
 
@@ -73,8 +76,10 @@
       [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);
@@ -97,7 +102,6 @@
 
       /* 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 {
@@ -120,7 +124,6 @@
   }
 
   :where(.ui-select:has(select)) {
-
     /* Size */
     &.ui-small {
       button {

package/css/components/spinner.css

@@ -1,11 +1,12 @@
 @layer components.root {
-
-  [aria-busy="true"]:not(input,
+  [aria-busy="true"]:not(
+    input,
     select,
     textarea,
     html,
     progress,
-    [aria-describedby]) {
+    [aria-describedby]
+  ) {
     position: relative;
 
     &::before {

package/css/components/switch.css

@@ -44,7 +44,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);
       }
 
@@ -76,13 +77,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:
@@ -142,7 +144,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 {
@@ -221,7 +225,6 @@
       }
 
       &:has(.ui-icon-checked, .ui-icon-unchecked) {
-
         input[role="switch"],
         .ui-icon-checked,
         .ui-icon-unchecked {

package/css/components/table.css

@@ -32,8 +32,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;
@@ -53,7 +52,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);
       }
@@ -64,7 +63,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);
       }
@@ -75,7 +74,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);
       }
@@ -125,7 +124,6 @@
     }
 
     @container (width < 60ch) {
-
       th,
       td {
         padding: var(--size-1) 0.875rem;
@@ -134,7 +132,6 @@
 
     /* Spacious */
     &.ui-spacious {
-
       th,
       td {
         padding: var(--size-3);
@@ -146,7 +143,6 @@
       }
 
       @container (width < 60ch) {
-
         th,
         td {
           padding: var(--size-3);
@@ -156,7 +152,6 @@
 
     /* Dense */
     &.ui-dense {
-
       th,
       td {
         padding: var(--size-1);
@@ -168,7 +163,6 @@
       }
 
       @container (width < 60ch) {
-
         th,
         td {
           padding: var(--size-1);

package/css/components/tabs.css

@@ -9,7 +9,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;
@@ -20,36 +20,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;
@@ -67,14 +66,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;