opui-css 4.1.0 → 5.0.0

package/css/components/range.css

@@ -1,5 +1,5 @@
 @layer components.root {
-  :where(.range) {
+  :where(.ui-range) {
     display: grid;
     gap: var(--size-1) 0;
     /* Two-column base so the optional .value cell can sit next to the
@@ -8,7 +8,7 @@
     grid-template-columns: 1fr auto;
     position: relative;
 
-    .label {
+    .ui-label {
       color: var(--text-primary);
       font-size: var(--font-size-05);
       font-weight: 600;
@@ -18,7 +18,7 @@
 
     /* Live current-value readout. Pairs with the <output> element
        rendered by the Range component (or hand-written .value markup). */
-    :where(.value) {
+    :where(.ui-value) {
       color: var(--text-muted);
       font-size: var(--font-size-0);
       font-variant-numeric: tabular-nums;
@@ -29,7 +29,7 @@
       text-align: end;
     }
 
-    .start-text {
+    .ui-start-text {
       color: var(--text-muted);
       font-size: var(--font-size-0);
       grid-column: 1/-1;
@@ -37,7 +37,7 @@
       line-height: 1.5;
     }
 
-    :where(.end-text) {
+    :where(.ui-end-text) {
       color: var(--text-muted);
       font-size: var(--font-size-0);
       grid-column: 1/-1;
@@ -71,40 +71,40 @@
       opacity: 0.64;
       user-select: none;
 
-      .label,
-      .value,
-      .start-text,
-      .end-text {
+      .ui-label,
+      .ui-value,
+      .ui-start-text,
+      .ui-end-text {
         cursor: not-allowed;
       }
     }
 
     /* Color */
-    &.filled input[type="range"] {
+    &.ui-filled input[type="range"] {
       --_track-color: var(--surface-filled);
     }
 
-    &.default input[type="range"] {
+    &.ui-default input[type="range"] {
       --_track-color: var(--surface-default);
     }
 
-    &.tonal input[type="range"] {
+    &.ui-tonal input[type="range"] {
       --_track-color: var(--surface-tonal);
     }
 
     /* Orientation */
-    &.spread {
+    &.ui-spread {
       align-items: center;
       column-gap: var(--size-4);
       container-type: inline-size;
       grid-template-columns: 1fr auto;
 
-      .label {
+      .ui-label {
         grid-column: 1;
         grid-row: 1;
       }
 
-      .start-text {
+      .ui-start-text {
         color: var(--text-muted);
         display: block;
         font-size: var(--font-size-0);
@@ -123,12 +123,12 @@
       /* 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(.value) {
+      :where(.ui-value) {
         grid-column: 2;
         grid-row: 2;
       }
 
-      :where(.end-text) {
+      :where(.ui-end-text) {
         grid-column: 2;
         grid-row: 2;
         text-align: end;
@@ -141,15 +141,15 @@
 
       /* 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(.end-text) {
+      &:has(datalist) :where(.ui-end-text) {
         grid-row: 3;
       }
 
-      &:has(.value) :where(.end-text) {
+      &:has(.ui-value) :where(.ui-end-text) {
         grid-row: 3;
       }
 
-      &:has(.value):has(datalist) :where(.end-text) {
+      &:has(.ui-value):has(datalist) :where(.ui-end-text) {
         grid-row: 4;
       }
 
@@ -160,20 +160,20 @@
           grid-column: 1/-1;
         }
 
-        .label {
+        .ui-label {
           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(.value) {
+        :where(.ui-value) {
           grid-row: 1;
           justify-self: end;
           text-align: end;
         }
 
-        .start-text {
+        .ui-start-text {
           grid-row: 2;
         }
 
@@ -187,7 +187,7 @@
           grid-row: 4;
         }
 
-        :where(.end-text) {
+        :where(.ui-end-text) {
           grid-row: 5;
           text-align: start;
         }
@@ -200,9 +200,9 @@
       --_thumb-bg: var(--color-9);
       --_thumb-highlight-color: oklch(from var(--color-9) 70% 100% h / 20%);
 
-      .start-text,
-      .end-text,
-      .value {
+      .ui-start-text,
+      .ui-end-text,
+      .ui-value {
         color: var(--color-9);
       }
     }
@@ -274,7 +274,7 @@
           transition: box-shadow 0.1s ease;
         }
 
-        .fieldset-item:focus-within & {
+        .ui-fieldset-item:focus-within & {
           border-color: var(--gray-14);
         }
       }
@@ -294,14 +294,14 @@
           transition: box-shadow 0.1s ease;
         }
 
-        .fieldset-item:focus-within & {
+        .ui-fieldset-item:focus-within & {
           border-color: var(--gray-14);
         }
       }
 
       /* Element state */
-      .range:has(:user-invalid) &,
-      .range[data-invalid] & {
+      .ui-range:has(:user-invalid) &,
+      .ui-range[data-invalid] & {
         --_track-fill-color: var(--color-9);
       }
 

package/css/components/select.css

@@ -1,5 +1,5 @@
 @layer components.extended {
-  :where(.select select) {
+  :where(.ui-select select) {
     position: relative;
 
     /* Default arrow */
@@ -64,7 +64,7 @@
       }
     }
 
-    .list {
+    .ui-list {
       --_bg-color: var(--surface-filled);
       border: var(--field-border-width) solid var(--field-border-color);
       border-radius: var(--field-border-radius);
@@ -119,10 +119,10 @@
     }
   }
 
-  :where(.select:has(select)) {
+  :where(.ui-select:has(select)) {
 
     /* Size */
-    &.small {
+    &.ui-small {
       button {
         padding-inline: var(--size-2) var(--size-7);
 

package/css/components/spinner.css

@@ -22,7 +22,7 @@
       vertical-align: -0.14em;
     }
 
-    &:not(button.button):not(:empty) {
+    &:not(button.ui-button):not(:empty) {
       &::before {
         margin-inline-end: 0.5em;
       }

package/css/components/switch.css

@@ -1,5 +1,5 @@
 @layer components.root {
-  :where(.switch) {
+  :where(.ui-switch) {
     --_accent-color: var(--primary);
     --_accent-contrast: var(--primary-contrast);
 
@@ -108,28 +108,28 @@
     }
 
     /* Icons */
-    &:has(.icon-checked, .icon-unchecked) {
+    &:has(.ui-icon-checked, .ui-icon-unchecked) {
       [role="switch"] {
         grid-column: 1 / -1;
         grid-row: 1;
       }
 
       &:has([role="switch"]:checked) {
-        .icon-unchecked {
+        .ui-icon-unchecked {
           display: none;
         }
 
-        .icon-checked {
+        .ui-icon-checked {
           display: block;
         }
       }
 
-      .icon-checked {
+      .ui-icon-checked {
         display: none;
       }
 
-      .icon-unchecked,
-      .icon-checked {
+      .ui-icon-unchecked,
+      .ui-icon-checked {
         grid-column: 1;
         grid-row: 1;
         pointer-events: none;
@@ -141,18 +141,18 @@
         }
       }
 
-      .icon-unchecked {
+      .ui-icon-unchecked {
         margin-inline-start: calc(var(--_track-width) - var(--_dot-size) - var(--size-1));
       }
 
-      .icon-checked {
+      .ui-icon-checked {
         margin-inline-start: var(--size-1);
       }
     }
 
     /* Required dot */
     &:has(:invalid) {
-      .label:after {
+      .ui-label:after {
         color: var(--red);
         content: "*";
         inset: 0 -0.25ex auto auto;
@@ -172,7 +172,7 @@
     }
 
     /* Label */
-    .label {
+    .ui-label {
       color: var(--text-primary);
       font-size: var(--font-size-05);
       grid-column: 2;
@@ -184,7 +184,7 @@
     }
 
     /* End text */
-    :where(.end-text) {
+    :where(.ui-end-text) {
       color: var(--text-muted);
       font-size: var(--font-size-0);
       grid-column: 2;
@@ -194,21 +194,21 @@
     }
 
     /* Size */
-    &.small {
+    &.ui-small {
       --_dot-size: 0.75rem;
       --_track-height: var(--size-4);
       --_track-width: 2.5rem;
     }
 
     /* Spread layout */
-    &.spread {
+    &.ui-spread {
       align-items: center;
       column-gap: var(--size-4);
       grid-auto-flow: unset;
       grid-template-columns: 1fr auto;
       inline-size: 100%;
 
-      .label {
+      .ui-label {
         font-weight: 600;
         grid-column: 1;
         grid-row: 1;
@@ -220,34 +220,34 @@
         grid-row: 1;
       }
 
-      &:has(.icon-checked, .icon-unchecked) {
+      &:has(.ui-icon-checked, .ui-icon-unchecked) {
 
         input[role="switch"],
-        .icon-checked,
-        .icon-unchecked {
+        .ui-icon-checked,
+        .ui-icon-unchecked {
           grid-column: 2;
         }
       }
 
-      :where(.end-text) {
+      :where(.ui-end-text) {
         grid-column: 1;
         grid-row: 2;
       }
     }
 
     /* Stacked layout */
-    &.stack {
+    &.ui-stack {
       grid-auto-columns: unset;
       justify-items: center;
 
-      .label {
+      .ui-label {
         grid-column: 1/-1;
         grid-row: 2;
         margin-block-start: var(--size-1);
         padding-inline: 1ex;
       }
 
-      .end-text {
+      .ui-end-text {
         grid-column: 1/-1;
         grid-row: 3;
       }
@@ -260,7 +260,7 @@
         outline: 2px solid var(--color-9);
       }
 
-      .end-text {
+      .ui-end-text {
         color: var(--color-9);
       }
     }

package/css/components/table.css

@@ -1,5 +1,5 @@
 @layer components.root {
-  :where(table) {
+  :where(.ui-table) {
     --_table-border-radius: var(--border-radius);
 
     border-collapse: separate;
@@ -133,7 +133,7 @@
     }
 
     /* Spacious */
-    &.spacious {
+    &.ui-spacious {
 
       th,
       td {
@@ -155,7 +155,7 @@
     }
 
     /* Dense */
-    &.dense {
+    &.ui-dense {
 
       th,
       td {

package/css/components/tabs.css

@@ -1,5 +1,5 @@
 @layer components.root {
-  :where(.tabs) {
+  :where(.ui-tabs) {
     --_accent-color: var(--primary);
     --_bg-color: transparent;
 
@@ -9,8 +9,8 @@
     gap: 0 var(--size-1);
     position: relative;
 
-    &>.tab-input[type="radio"] {
-      /* utils > .sr-only */
+    &>.ui-tab-input[type="radio"] {
+      /* utils > .ui-sr-only */
       /* TODO: use mixin for this when available */
       block-size: 1px;
       clip-path: inset(50%);
@@ -22,19 +22,23 @@
       &:checked {
 
         /* Checked Tab */
-        &+[role="tab"] {
+        &+[role="tab"],
+        &+.ui-tab-label {
           border-block-end-color: var(--_accent-color);
           color: var(--_accent-color);
 
           /* Checked Panel */
-          &+[role="tabpanel"] {
+          &+[role="tabpanel"],
+          &+.ui-tab-panel {
             display: block;
           }
         }
       }
 
       &:focus-visible {
-        &+[role="tab"] {
+
+        &+[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);
@@ -44,7 +48,8 @@
     }
 
     /* Tab */
-    &>[role="tab"] {
+    &>[role="tab"],
+    &>.ui-tab-label {
       align-items: center;
       background-color: transparent;
       border-bottom: 2px solid transparent;
@@ -68,7 +73,8 @@
     }
 
     /* Tab Panel */
-    &>[role="tabpanel"] {
+    &>[role="tabpanel"],
+    &>.ui-tab-panel {
       display: none;
       inline-size: 100%;
       order: 2;