opui-css 4.0.1 → 5.0.0

package/css/components/anchor.css

@@ -1,12 +1,12 @@
 @layer components.root {
-	:where(.anchor) {
+	:where(.ui-anchor) {
 		anchor-name: --anchor;
 		anchor-scope: --anchor;
 		display: inline-block;
 		inline-size: fit-content;
 
 		/* Always-visible */
-		&>.anchor-floating:not([popover]) {
+		&>.ui-anchor-floating:not([popover]) {
 			block-size: max-content;
 			inline-size: max-content;
 			position: absolute;
@@ -16,7 +16,7 @@
 		}
 
 		/* Hover-triggered */
-		&>.anchor-floating[popover] {
+		&>.ui-anchor-floating[popover] {
 			inset: unset;
 			margin: 0;
 			position: absolute;

package/css/components/avatar.css

@@ -1,5 +1,5 @@
 @layer components.root {
-  :where(.avatar) {
+  :where(.ui-avatar) {
     --_bg-color: var(--primary);
     --_color: var(--color-1);
     --_width: 40px;
@@ -33,15 +33,15 @@
       position: absolute;
     }
 
-    &.squared {
+    &.ui-squared {
       border-radius: 0;
     }
 
-    &.rounded {
+    &.ui-rounded {
       border-radius: var(--radius-2);
     }
 
-    &.squircle {
+    &.ui-squircle {
       border-radius: var(--radius-3);
 
       @supports (corner-shape: squircle) {
@@ -57,7 +57,7 @@
 
     display: flex;
 
-    .avatar {
+    .ui-avatar {
       box-shadow: 0 0 0 2px var(--_outline-color);
       margin-inline-end: calc(-1 * var(--_margin));
     }

package/css/components/badge.css

@@ -1,5 +1,5 @@
 @layer components.extended {
-  :where(.badge) {
+  :where(.ui-badge) {
     --_anchor-tx: -50%;
     --_anchor-ty: 50%;
     --_badge-inset: auto auto 100% 100%;
@@ -15,14 +15,14 @@
 
     /* Floating wrapper: traditional inset-based positioning so this works
        in browsers without position-area support (Firefox, older Safari). */
-    &>.anchor-floating:not([popover]) {
+    &>.ui-anchor-floating:not([popover]) {
       inset: var(--_badge-inset);
       position-anchor: auto;
       position-area: none;
     }
 
     /* Indicator */
-    &>.anchor-floating>.badge-indicator {
+    &>.ui-anchor-floating>.ui-badge-indicator {
       background-color: var(--_bg-color);
       block-size: var(--_size);
       border: 2px solid var(--_border-color);
@@ -41,57 +41,57 @@
     }
 
     /* Colors */
-    &.critical {
+    &.ui-critical {
       --_bg-color: var(--critical);
       --_border-color: var(--critical);
     }
 
-    &.success {
+    &.ui-success {
       --_bg-color: var(--success);
       --_border-color: var(--success);
     }
 
-    &.info {
+    &.ui-info {
       --_bg-color: var(--info);
       --_border-color: var(--info);
     }
 
-    &.warning {
+    &.ui-warning {
       --_bg-color: var(--warning);
       --_border-color: var(--warning);
     }
 
-    &.neutral {
+    &.ui-neutral {
       --_bg-color: var(--neutral);
       --_border-color: var(--neutral);
     }
 
     /* Alignment */
-    &.start-start {
+    &.ui-start-start {
       --_anchor-tx: 50%;
       --_anchor-ty: 50%;
       --_badge-inset: auto 100% 100% auto;
     }
 
-    &.end-start {
+    &.ui-end-start {
       --_anchor-tx: 50%;
       --_anchor-ty: -50%;
       --_badge-inset: 100% 100% auto auto;
     }
 
-    &.end-end {
+    &.ui-end-end {
       --_anchor-tx: -50%;
       --_anchor-ty: -50%;
       --_badge-inset: 100% auto auto 100%;
     }
 
     /* Dot */
-    &.dot {
+    &.ui-dot {
       --_anchor-tx: calc((var(--_dot-size) - 2px) * -1);
       --_anchor-ty: var(--_dot-size);
     }
 
-    &.dot>.anchor-floating>.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);
@@ -99,7 +99,7 @@
     }
 
     /* Visibility */
-    &.invisible>.anchor-floating>.badge-indicator {
+    &.ui-invisible>.ui-anchor-floating>.ui-badge-indicator {
       opacity: 0;
       pointer-events: none;
     }

package/css/components/button-group.css

@@ -1,5 +1,5 @@
 @layer components.extended {
-  :where([role="group"].button-group) {
+  :where([role="group"].ui-button-group) {
     --_border-radius: var(--button-border-radius);
 
     border-radius: var(--_border-radius);
@@ -14,11 +14,11 @@
       --_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));
 
-      &.outlined {
+      &.ui-outlined {
         --_divider-color: var(--_border-color);
       }
 
-      &.filled {
+      &.ui-filled {
         --_divider-color: currentColor;
       }
 
@@ -29,8 +29,8 @@
       /* 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. */
-      :where(.button-group.critical,
-        .button-group.primary) & {
+      :where(.ui-button-group.ui-critical,
+        .ui-button-group.ui-primary) & {
         --_color-contrast: var(--gray-1);
         --_color-tonal: var(--color-6);
         --_accent-tonal-contrast: var(--text-primary-contrast);
@@ -41,26 +41,26 @@
         --_outlined-active-bg-color: oklch(from var(--_accent) calc(l - 0.1) c h);
       }
 
-      :where(.button-group.critical) & {
+      :where(.ui-button-group.ui-critical) & {
         --_color: var(--critical);
       }
 
-      :where(.button-group.primary) & {
+      :where(.ui-button-group.ui-primary) & {
         --_color: var(--primary);
       }
 
-      :where(.button-group.small) & {
+      :where(.ui-button-group.ui-small) & {
         --_min-height: 1.875rem;
         padding-block: 0;
         padding-inline: 1ex;
       }
 
-      :where(.button-group.large) & {
+      :where(.ui-button-group.ui-large) & {
         --_min-height: 2.875rem;
         padding-inline: 4ex;
       }
 
-      :where(.button-group.outlined) & {
+      :where(.ui-button-group.ui-outlined) & {
         --_border-color: var(--_accent);
         --_divider-color: var(--_accent);
 
@@ -79,7 +79,7 @@
         }
       }
 
-      :where(.button-group.tonal) & {
+      :where(.ui-button-group.ui-tonal) & {
         --_bg-color: var(--_accent-tonal);
         --_text-color: var(--_accent-tonal-contrast);
 
@@ -96,13 +96,13 @@
         }
       }
 
-      :where(.button-group.filled) & {
+      :where(.ui-button-group.ui-filled) & {
         --_bg-color: var(--_accent);
         --_text-color: var(--_accent-contrast);
         --_divider-color: currentColor;
 
-        :where(.button-group.critical,
-          .button-group.primary) & {
+        :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));
         }
@@ -119,7 +119,7 @@
       }
     }
 
-    &:not(.vertical) {
+    &:not(.ui-vertical) {
       button {
         &:first-of-type {
           border-end-start-radius: var(--_border-radius);
@@ -144,7 +144,7 @@
       }
     }
 
-    &.vertical {
+    &.ui-vertical {
       flex-direction: column;
 
       button {

package/css/components/button.css

@@ -1,5 +1,5 @@
 @layer components.root {
-  :where(.button) {
+  :where(.ui-button) {
     --_color: light-dark(var(--color-16), var(--color-1));
     --_color-contrast: light-dark(var(--color-1), var(--color-16));
     --_color-tonal: var(--surface-tonal);
@@ -54,8 +54,8 @@
        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. */
-    &.critical,
-    &.primary {
+    &.ui-critical,
+    &.ui-primary {
       --_color-contrast: var(--gray-1);
       --_color-tonal: var(--color-6);
       --_accent-tonal-contrast: var(--text-primary-contrast);
@@ -69,11 +69,11 @@
       --_outlined-active-bg-color: oklch(from var(--_accent) calc(l - 0.1) c h);
     }
 
-    &.critical {
+    &.ui-critical {
       --_color: var(--critical);
     }
 
-    &.primary {
+    &.ui-primary {
       --_color: var(--primary);
     }
 
@@ -101,7 +101,7 @@
 
 
     /* Icons / Keyboard */
-    &:where(:has(svg), &.icon-only) {
+    &:where(:has(svg), &.ui-icon-only) {
       gap: 1ex;
 
       svg {
@@ -122,27 +122,27 @@
 
     /* Sizes — heights aliased from the shared --control-size scale.
        Override --button-size-* in a parent scope to resize an entire region. */
-    &.x-small {
+    &.ui-x-small {
       --_min-height: var(--button-size-x-small);
       --_font-size: var(--font-size-0);
       padding-block: 0;
       padding-inline: .5ex;
     }
 
-    &.small {
+    &.ui-small {
       --_min-height: var(--button-size-small);
       --_font-size: var(--font-size-05);
       padding-block: 0;
       padding-inline: .75ex;
     }
 
-    &.large {
+    &.ui-large {
       --_min-height: var(--button-size-large);
       padding-inline: 4ex;
     }
 
     /* Variants */
-    &.outlined {
+    &.ui-outlined {
       --_bg-color: transparent;
       --_border-color: var(--_accent);
       --_text-color: var(--_accent);
@@ -162,7 +162,7 @@
       }
     }
 
-    &.tonal {
+    &.ui-tonal {
       --_bg-color: var(--_accent-tonal);
       --_text-color: var(--_accent-tonal-contrast);
 
@@ -179,7 +179,7 @@
       }
     }
 
-    &.filled {
+    &.ui-filled {
       --_bg-color: var(--_accent);
       --_text-color: var(--_accent-contrast);
 

package/css/components/callout.css

@@ -1,5 +1,5 @@
 @layer components.root {
-	:where(.callout) {
+	:where(.ui-callout) {
 		--_bg-color: var(--surface-tonal);
 		--_border-color: var(--surface-tonal);
 		--_color: var(--text-primary);
@@ -27,11 +27,11 @@
 		padding: var(--_padding);
 		position: relative;
 
-		&.critical,
-		&.info,
-		&.neutral,
-		&.success,
-		&.warning {
+		&.ui-critical,
+		&.ui-info,
+		&.ui-neutral,
+		&.ui-success,
+		&.ui-warning {
 			--_bg-color: light-dark(oklch(from var(--color-2) l c h / 20%), oklch(from var(--color-6) l c h / 5%));
 			--_border-color: light-dark(var(--color-5), var(--color-11));
 			--_color: light-dark(var(--color-16), var(--color-1));
@@ -43,7 +43,7 @@
 			--_outlined-icon-color: var(--color-9);
 		}
 
-		&.outlined {
+		&.ui-outlined {
 			--_bg-color: var(--_outlined-bg-color);
 			--_border-color: var(--_outlined-border-color);
 			--_color: var(--_outlined-color);
@@ -60,7 +60,7 @@
 			z-index: -1;
 		}
 
-		&>.content {
+		&>.ui-content {
 			display: grid;
 			font-size: var(--_font-size);
 			gap: var(--_content-gap);
@@ -84,7 +84,7 @@
 		/* Links
     * Can't make sure contrast will be acceptable (yet) so we use the current text color instead.
     */
-		&:not(.outlined) {
+		&:not(.ui-outlined) {
 			a[href] {
 				color: inherit;
 

package/css/components/card.css

@@ -1,5 +1,5 @@
 @layer components.root {
-  :where(.card) {
+  :where(.ui-card) {
     --_bg-tonal: var(--surface-tonal);
     --_bg-elevated: var(--surface-elevated);
     --_bg-surface: var(--surface-default);
@@ -31,30 +31,30 @@
     position: relative;
 
     /* Variants */
-    &.text {
+    &.ui-text {
       --_card-bg-color: transparent;
       --_card-border-color: transparent;
       --_card-border-width: 0;
       --_card-shadow: none;
     }
 
-    &.tonal {
+    &.ui-tonal {
       --_card-bg-color: var(--_bg-tonal);
       --_card-border-width: 1px;
     }
 
-    &.elevated {
+    &.ui-elevated {
       --_card-bg-color: var(--_bg-elevated);
       --_card-shadow: var(--_shadow-elevated);
     }
 
-    &.outlined {
+    &.ui-outlined {
       --_card-bg-color: var(--_bg-surface);
       --_card-border-color: var(--_border-color);
       --_card-border-width: 1px;
     }
 
-    &> :where(hgroup, .content) {
+    &> :where(hgroup, .ui-content) {
       padding-inline: var(--size-3);
 
       &:last-child {
@@ -82,31 +82,31 @@
     }
 
     /* Content */
-    &>.content:where(:only-child, :first-child) {
+    &>.ui-content:where(:only-child, :first-child) {
       padding-block: var(--size-3) var(--size-4);
     }
 
     /* Actions */
-    &>.actions {
+    &>.ui-actions {
       display: flex;
       gap: var(--size-2);
       margin-block: var(--size-2) 0;
       padding-block-end: var(--size-2);
       padding-inline: var(--size-3);
 
-      &:has(.button:first-child[class="button"]) {
+      &:has(.ui-button:first-child[class="ui-button"]) {
         padding-inline: var(--size-1) var(--size-3);
       }
 
-      &:has(.button:not([class="button"])) {
+      &:has(.ui-button:not([class="ui-button"])) {
         padding-block-end: var(--size-2);
       }
 
       /* Alignment */
-      &.align-end {
+      &.ui-align-end {
         justify-content: end;
 
-        &:has(.button:first-child[class="button"]) {
+        &:has(.ui-button:first-child[class="ui-button"]) {
           padding-inline: var(--size-3) var(--size-1);
         }
       }

package/css/components/checkbox.css

@@ -1,5 +1,5 @@
 @layer components.root {
-	label.checkbox {
+	label.ui-checkbox {
 		--_input-size: var(--size-4);
 
 		align-items: center;
@@ -27,7 +27,7 @@
 
 		/* Required dot */
 		&:has(:invalid) {
-			.label:after {
+			.ui-label:after {
 				color: var(--red);
 				content: "*";
 				inset: 0 -0.25ex auto auto;
@@ -36,7 +36,7 @@
 		}
 
 		/* Label */
-		.label {
+		.ui-label {
 			color: var(--text-primary);
 			font-size: var(--font-size-05);
 			grid-column: 2;
@@ -46,7 +46,7 @@
 		}
 
 		/* End text */
-		:where(.end-text) {
+		:where(.ui-end-text) {
 			color: var(--text-muted);
 			font-size: var(--font-size-0);
 			grid-column: 2;
@@ -56,14 +56,14 @@
 		}
 
 		/* 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;
@@ -75,18 +75,18 @@
 				grid-row: 1;
 			}
 
-			:where(.end-text) {
+			:where(.ui-end-text) {
 				grid-column: 1;
 				grid-row: 2;
 			}
 		}
 
 		/* Stacked layout */
-		&.stack {
+		&.ui-stack {
 			justify-items: center;
 			grid-auto-columns: unset;
 
-			.label {
+			.ui-label {
 				grid-column: 1/-1;
 				grid-row: 2;
 				margin-block-start: var(--size-1);
@@ -98,7 +98,7 @@
 				}
 			}
 
-			.end-text {
+			.ui-end-text {
 				grid-column: 1/-1;
 				grid-row: 3;
 			}
@@ -157,13 +157,13 @@
 		}
 
 		/* Sizes */
-		&.small {
+		&.ui-small {
 			input[type="checkbox"] {
 				--_input-size: var(--size-3);
 			}
 		}
 
-		&.large {
+		&.ui-large {
 			input[type="checkbox"] {
 				--_input-size: var(--size-5);
 			}
@@ -174,7 +174,7 @@
 		&:has(:user-invalid) {
 			--palette-source: oklch(0.58 0.21 var(--hue-red));
 
-			:where(.end-text) {
+			:where(.ui-end-text) {
 				color: var(--primary);
 			}
 		}

package/css/components/chip.css

@@ -1,5 +1,5 @@
 @layer components.root {
-  :where(.chip) {
+  :where(.ui-chip) {
     --_bg-color: var(--surface-tonal);
     --_border-color: var(--border-color);
     --_color: var(--text-primary);
@@ -17,12 +17,12 @@
     text-decoration: none;
 
     /* Variants */
-    &.tonal {
+    &.ui-tonal {
       --_bg-color: var(--surface-tonal);
       --_color: var(--text-primary);
     }
 
-    &.outlined {
+    &.ui-outlined {
       --_bg-color: var(--surface-default);
       --_color: var(--text-primary);
     }
@@ -51,11 +51,11 @@
     }
 
     /* Sizes */
-    &.small {
+    &.ui-small {
       block-size: var(--size-5);
     }
 
-    &.multiline {
+    &.ui-multiline {
       block-size: auto;
     }
 

package/css/components/description-list.css

@@ -1,5 +1,5 @@
 @layer components.root {
-  :where(.description-list) {
+  :where(.ui-description-list) {
     --_border-style: solid;
     --_border-width: 1px;
 
@@ -8,17 +8,18 @@
     margin: 0;
     padding: 0;
 
-    &.dotted {
+    &.ui-dotted {
       --_border-style: dotted;
       --_border-width: 2px;
     }
 
-    .item {
+    .ui-item {
       display: grid;
       margin: 0;
       padding: 0;
 
-      dt {
+      dt,
+      .ui-term {
         display: block;
         font-weight: 700;
         overflow: hidden;
@@ -33,13 +34,14 @@
     @container (width > 45ch) {
       gap: var(--size-1);
 
-      .item {
+      .ui-item {
         align-items: baseline;
         display: grid;
         gap: var(--size-1);
         grid-template-columns: 1fr auto;
 
-        dt {
+        dt,
+        .ui-term {
           inline-size: max-content;
 
           &::after {
@@ -53,10 +55,11 @@
         }
       }
 
-      &.bordered .item {
+      &.ui-bordered .ui-item {
         grid-template-columns: auto 1fr auto;
 
-        dt {
+        dt,
+        .ui-term {
           order: 0;
         }