opui-css 4.1.0 → 5.0.0

package/dist/opui.css

@@ -1264,11 +1264,11 @@
 @layer theme {
 
   /* 1. Color scheme */
-  .light {
+  .ui-light {
     --color-scheme: light;
   }
 
-  .dark {
+  .ui-dark {
     --color-scheme: dark;
   }
 
@@ -1324,7 +1324,7 @@
     --border-width: 1px;
 
     /* 9. Focus ring — components consume these and may override locally
-       (e.g. .button.filled { --focus-ring-offset: 3px; }, .checkbox { --focus-ring-offset: 0; }) */
+       (e.g. .ui-button.ui-filled { --focus-ring-offset: 3px; }, .ui-checkbox { --focus-ring-offset: 0; }) */
     --focus-ring-color: var(--primary);
     --focus-ring-width: 2px;
     --focus-ring-offset: 2px;
@@ -1368,24 +1368,24 @@
   }
 
   /* 14. Severity scope classes — re-source the palette inside these contexts.
-     Authoring `<div class="warning">` paints the entire subtree warning-orange.
+     Authoring `<div class="ui-warning">` paints the entire subtree warning-orange.
      Non-severity tokens (--primary, --neutral) deliberately have no scope class. */
-  :where(.critical, [data-invalid], del) {
+  :where(.ui-critical, [data-invalid], del) {
     --palette-source: oklch(0.58 0.21 var(--hue-red));
     --palette-hue-rotate-by: 1;
   }
 
-  :where(.info, abbr, dfn) {
+  :where(.ui-info, abbr, dfn) {
     --palette-source: oklch(0.58 0.21 var(--hue-blue));
     --palette-hue-rotate-by: 1;
   }
 
-  :where(.success, ins) {
+  :where(.ui-success, ins) {
     --palette-source: oklch(0.58 0.21 var(--hue-green));
     --palette-hue-rotate-by: 1;
   }
 
-  :where(.warning) {
+  :where(.ui-warning) {
     --palette-source: oklch(0.58 0.21 var(--hue-orange));
     --palette-hue-rotate-by: 1;
   }
@@ -1400,7 +1400,7 @@
 /*** Root components (no dependencies)  */
 
 @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);
@@ -1455,8 +1455,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);
@@ -1470,11 +1470,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);
     }
 
@@ -1502,7 +1502,7 @@
 
 
     /* Icons / Keyboard */
-    &:where(:has(svg), &.icon-only) {
+    &:where(:has(svg), &.ui-icon-only) {
       gap: 1ex;
 
       svg {
@@ -1523,27 +1523,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);
@@ -1563,7 +1563,7 @@
       }
     }
 
-    &.tonal {
+    &.ui-tonal {
       --_bg-color: var(--_accent-tonal);
       --_text-color: var(--_accent-tonal-contrast);
 
@@ -1580,7 +1580,7 @@
       }
     }
 
-    &.filled {
+    &.ui-filled {
       --_bg-color: var(--_accent);
       --_text-color: var(--_accent-contrast);
 
@@ -1616,7 +1616,7 @@
 }
 
 @layer components.root {
-	:where(.callout) {
+	:where(.ui-callout) {
 		--_bg-color: var(--surface-tonal);
 		--_border-color: var(--surface-tonal);
 		--_color: var(--text-primary);
@@ -1644,11 +1644,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));
@@ -1660,7 +1660,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);
@@ -1677,7 +1677,7 @@
 			z-index: -1;
 		}
 
-		&>.content {
+		&>.ui-content {
 			display: grid;
 			font-size: var(--_font-size);
 			gap: var(--_content-gap);
@@ -1701,7 +1701,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;
 
@@ -1726,7 +1726,7 @@
 }
 
 @layer components.root {
-  :where(.icon-button) {
+  :where(.ui-icon-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);
@@ -1794,8 +1794,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);
@@ -1809,11 +1809,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);
     }
 
@@ -1834,7 +1834,7 @@
     }
 
     /* Size */
-    &.small {
+    &.ui-small {
       block-size: var(--size-4);
       inline-size: var(--size-4);
 
@@ -1845,18 +1845,18 @@
     }
 
     /* Variants */
-    &.outlined {
+    &.ui-outlined {
       --_bg-color: transparent;
       --_border-color: var(--_accent);
       --_text-color: var(--_accent);
     }
 
-    &.tonal {
+    &.ui-tonal {
       --_bg-color: var(--_accent-tonal);
       --_text-color: var(--_accent-tonal-contrast);
     }
 
-    &.filled {
+    &.ui-filled {
       --_bg-color: var(--_accent);
       --_interaction-active-color: var(--_filled-active-bg-color);
       --_interaction-hover-color: var(--_filled-hover-bg-color);
@@ -1866,7 +1866,7 @@
 }
 
 @layer components.root {
-  :where(.tabs) {
+  :where(.ui-tabs) {
     --_accent-color: var(--primary);
     --_bg-color: transparent;
 
@@ -1876,8 +1876,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%);
@@ -1889,19 +1889,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);
@@ -1911,7 +1915,8 @@
     }
 
     /* Tab */
-    &>[role="tab"] {
+    &>[role="tab"],
+    &>.ui-tab-label {
       align-items: center;
       background-color: transparent;
       border-bottom: 2px solid transparent;
@@ -1935,7 +1940,8 @@
     }
 
     /* Tab Panel */
-    &>[role="tabpanel"] {
+    &>[role="tabpanel"],
+    &>.ui-tab-panel {
       display: none;
       inline-size: 100%;
       order: 2;
@@ -1944,7 +1950,7 @@
 }
 
 @layer components.root {
-  :where(.toggle-group) {
+  :where(.ui-toggle-group) {
     --_bg-color: var(--surface-default);
     --_border-color: var(--border-color);
     --_border-radius: var(--button-border-radius);
@@ -1957,27 +1963,27 @@
     overflow: hidden;
 
     /* Sizes */
-    &.small {
-      .toggle-button {
+    &.ui-small {
+      .ui-toggle-button {
         --_size: var(--field-size-small);
       }
     }
 
-    &.x-small {
-      .toggle-button {
+    &.ui-x-small {
+      .ui-toggle-button {
         --_size: var(--field-size-x-small);
       }
     }
 
     /* Toggle button */
-    .toggle-button {
+    .ui-toggle-button {
       border: 0;
       border-radius: 0;
       margin: 0;
     }
 
-    &:not(.vertical) {
-      .toggle-button {
+    &:not(.ui-vertical) {
+      .ui-toggle-button {
         border-inline-end: 1px solid var(--_border-color);
 
         &:last-of-type {
@@ -1986,10 +1992,10 @@
       }
     }
 
-    &.vertical {
+    &.ui-vertical {
       flex-direction: column;
 
-      .toggle-button {
+      .ui-toggle-button {
         border-block-end: 1px solid var(--_border-color);
 
         &:last-of-type {
@@ -2005,7 +2011,7 @@
 */
 
 @layer components.root {
-	:where(.toggle-button) {
+	:where(.ui-toggle-button) {
 		--_button-bg-color: transparent;
 		--_size: var(--field-size);
 		--_svg-size: var(--size-4);
@@ -2030,7 +2036,7 @@
 
 		input[type="checkbox"],
 		input[type="radio"] {
-			/* utils.css > .sr-only */
+			/* utils.css > .ui-sr-only */
 			block-size: 1px;
 			clip-path: inset(50%);
 			inline-size: 1px;
@@ -2041,7 +2047,7 @@
 
 		/* Element states */
 		@media (pointer: fine) {
-			&:hover:not(.disabled) {
+			&:hover:not(.ui-disabled) {
 				--_button-bg-color: light-dark(oklch(0% 0 0 / 0.04), oklch(100% 0 0 / 0.08));
 			}
 		}
@@ -2054,7 +2060,7 @@
 		}
 
 		/* Disabled */
-		&.disabled {
+		&.ui-disabled {
 			border-color: color-mix(in oklch, var(--border-color) 50%, transparent);
 			color: color-mix(in oklch, var(--text-primary) 30%, transparent);
 			cursor: not-allowed;
@@ -2079,25 +2085,25 @@
 		}
 
 		/* Sizes */
-		&.small {
+		&.ui-small {
 			--_size: var(--field-size-small);
 		}
 
-		&.x-small {
+		&.ui-x-small {
 			--_size: var(--field-size-x-small);
 		}
 	}
 }
 
 @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;
@@ -2107,7 +2113,7 @@
 		}
 
 		/* Hover-triggered */
-		&>.anchor-floating[popover] {
+		&>.ui-anchor-floating[popover] {
 			inset: unset;
 			margin: 0;
 			position: absolute;
@@ -2118,7 +2124,7 @@
 }
 
 @layer components.root {
-  :where(.avatar) {
+  :where(.ui-avatar) {
     --_bg-color: var(--primary);
     --_color: var(--color-1);
     --_width: 40px;
@@ -2152,15 +2158,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) {
@@ -2176,7 +2182,7 @@
 
     display: flex;
 
-    .avatar {
+    .ui-avatar {
       box-shadow: 0 0 0 2px var(--_outline-color);
       margin-inline-end: calc(-1 * var(--_margin));
     }
@@ -2184,7 +2190,7 @@
 }
 
 @layer components.root {
-  :where(.card) {
+  :where(.ui-card) {
     --_bg-tonal: var(--surface-tonal);
     --_bg-elevated: var(--surface-elevated);
     --_bg-surface: var(--surface-default);
@@ -2216,30 +2222,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 {
@@ -2267,31 +2273,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);
         }
       }
@@ -2302,7 +2308,7 @@
 }
 
 @layer components.root {
-  :where(.chip) {
+  :where(.ui-chip) {
     --_bg-color: var(--surface-tonal);
     --_border-color: var(--border-color);
     --_color: var(--text-primary);
@@ -2320,12 +2326,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);
     }
@@ -2354,11 +2360,11 @@
     }
 
     /* Sizes */
-    &.small {
+    &.ui-small {
       block-size: var(--size-5);
     }
 
-    &.multiline {
+    &.ui-multiline {
       block-size: auto;
     }
 
@@ -2390,7 +2396,7 @@
 }
 
 @layer components.root {
-  :where(.description-list) {
+  :where(.ui-description-list) {
     --_border-style: solid;
     --_border-width: 1px;
 
@@ -2399,17 +2405,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;
@@ -2424,13 +2431,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 {
@@ -2444,10 +2452,11 @@
         }
       }
 
-      &.bordered .item {
+      &.ui-bordered .ui-item {
         grid-template-columns: auto 1fr auto;
 
-        dt {
+        dt,
+        .ui-term {
           order: 0;
         }
 
@@ -2468,28 +2477,28 @@
 }
 
 @layer components.root {
-  :where(hr) {
+  :where(.ui-divider) {
     background-color: var(--border-color);
     block-size: var(--border-size-1);
     margin-block: var(--size-fluid-3);
 
     /* Border color */
-    &.border-filled {
+    &.ui-border-filled {
       background-color: var(--surface-filled);
     }
 
-    &.border-primary {
+    &.ui-border-primary {
       background-color: var(--primary);
     }
 
-    &.border-tonal {
+    &.ui-border-tonal {
       background-color: var(--surface-tonal);
     }
   }
 }
 
 @layer components.root {
-  :where(.link) {
+  :where(.ui-link) {
     color: var(--primary);
     cursor: pointer;
     font-weight: 700;
@@ -2511,7 +2520,7 @@
 }
 
 @layer components.root {
-  :where(table) {
+  :where(.ui-table) {
     --_table-border-radius: var(--border-radius);
 
     border-collapse: separate;
@@ -2645,7 +2654,7 @@
     }
 
     /* Spacious */
-    &.spacious {
+    &.ui-spacious {
 
       th,
       td {
@@ -2667,7 +2676,7 @@
     }
 
     /* Dense */
-    &.dense {
+    &.ui-dense {
 
       th,
       td {
@@ -2691,7 +2700,7 @@
 }
 
 @layer components.root {
-  :where(progress) {
+  :where(.ui-progress) {
     --_accent-color: var(--primary);
     --_bg-color: var(--surface-tonal);
 
@@ -2707,15 +2716,15 @@
     vertical-align: baseline;
 
     /* Color */
-    &.filled {
+    &.ui-filled {
       --_bg-color: var(--surface-filled);
     }
 
-    &.default {
+    &.ui-default {
       --_bg-color: var(--surface-default);
     }
 
-    &.tonal {
+    &.ui-tonal {
       --_bg-color: var(--surface-tonal);
     }
 
@@ -2812,7 +2821,7 @@
       vertical-align: -0.14em;
     }
 
-    &:not(button.button):not(:empty) {
+    &:not(button.ui-button):not(:empty) {
       &::before {
         margin-inline-end: 0.5em;
       }
@@ -2827,7 +2836,7 @@
 }
 
 @layer components.root {
-	label.checkbox {
+	label.ui-checkbox {
 		--_input-size: var(--size-4);
 
 		align-items: center;
@@ -2855,7 +2864,7 @@
 
 		/* Required dot */
 		&:has(:invalid) {
-			.label:after {
+			.ui-label:after {
 				color: var(--red);
 				content: "*";
 				inset: 0 -0.25ex auto auto;
@@ -2864,7 +2873,7 @@
 		}
 
 		/* Label */
-		.label {
+		.ui-label {
 			color: var(--text-primary);
 			font-size: var(--font-size-05);
 			grid-column: 2;
@@ -2874,7 +2883,7 @@
 		}
 
 		/* End text */
-		:where(.end-text) {
+		:where(.ui-end-text) {
 			color: var(--text-muted);
 			font-size: var(--font-size-0);
 			grid-column: 2;
@@ -2884,14 +2893,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;
@@ -2903,18 +2912,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);
@@ -2926,7 +2935,7 @@
 				}
 			}
 
-			.end-text {
+			.ui-end-text {
 				grid-column: 1/-1;
 				grid-row: 3;
 			}
@@ -2985,13 +2994,13 @@
 		}
 
 		/* Sizes */
-		&.small {
+		&.ui-small {
 			input[type="checkbox"] {
 				--_input-size: var(--size-3);
 			}
 		}
 
-		&.large {
+		&.ui-large {
 			input[type="checkbox"] {
 				--_input-size: var(--size-5);
 			}
@@ -3002,7 +3011,7 @@
 		&:has(:user-invalid) {
 			--palette-source: oklch(0.58 0.21 var(--hue-red));
 
-			:where(.end-text) {
+			:where(.ui-end-text) {
 				color: var(--primary);
 			}
 		}
@@ -3033,7 +3042,7 @@
 }
 
 @layer components.root {
-	label.radio {
+	label.ui-radio {
 		--_input-size: 1.125rem;
 		--_indicator-size: 50%;
 
@@ -3062,7 +3071,7 @@
 
 		/* Required dot */
 		&:has(:invalid) {
-			.label:after {
+			.ui-label:after {
 				color: var(--red);
 				content: "*";
 				inset: 0 -0.25ex auto auto;
@@ -3071,7 +3080,7 @@
 		}
 
 		/* Label */
-		.label {
+		.ui-label {
 			color: var(--text-primary);
 			font-size: var(--font-size-05);
 			grid-column: 2;
@@ -3081,7 +3090,7 @@
 		}
 
 		/* End text */
-		:where(.end-text) {
+		:where(.ui-end-text) {
 			color: var(--text-muted);
 			font-size: var(--font-size-0);
 			grid-column: 2;
@@ -3091,11 +3100,11 @@
 		}
 
 		/* 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);
@@ -3107,7 +3116,7 @@
 				}
 			}
 
-			.end-text {
+			.ui-end-text {
 				grid-column: 1/-1;
 				grid-row: 3;
 			}
@@ -3156,14 +3165,14 @@
 		}
 
 		/* Sizes */
-		&.small {
+		&.ui-small {
 			input[type="radio"] {
 				--_input-size: var(--size-3);
 
 			}
 		}
 
-		&.large {
+		&.ui-large {
 			input[type="radio"] {
 				--_input-size: var(--size-4);
 
@@ -3175,7 +3184,7 @@
 		&:has(:user-invalid) {
 			--palette-source: oklch(0.58 0.21 var(--hue-red));
 
-			:where(.end-text) {
+			:where(.ui-end-text) {
 				color: var(--primary);
 			}
 		}
@@ -3206,7 +3215,7 @@
 }
 
 @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
@@ -3215,7 +3224,7 @@
     grid-template-columns: 1fr auto;
     position: relative;
 
-    .label {
+    .ui-label {
       color: var(--text-primary);
       font-size: var(--font-size-05);
       font-weight: 600;
@@ -3225,7 +3234,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;
@@ -3236,7 +3245,7 @@
       text-align: end;
     }
 
-    .start-text {
+    .ui-start-text {
       color: var(--text-muted);
       font-size: var(--font-size-0);
       grid-column: 1/-1;
@@ -3244,7 +3253,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;
@@ -3278,40 +3287,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);
@@ -3330,12 +3339,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;
@@ -3348,15 +3357,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;
       }
 
@@ -3367,20 +3376,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;
         }
 
@@ -3394,7 +3403,7 @@
           grid-row: 4;
         }
 
-        :where(.end-text) {
+        :where(.ui-end-text) {
           grid-row: 5;
           text-align: start;
         }
@@ -3407,9 +3416,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);
       }
     }
@@ -3481,7 +3490,7 @@
           transition: box-shadow 0.1s ease;
         }
 
-        .fieldset-item:focus-within & {
+        .ui-fieldset-item:focus-within & {
           border-color: var(--gray-14);
         }
       }
@@ -3501,14 +3510,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);
       }
 
@@ -3544,7 +3553,7 @@
 }
 
 @layer components.root {
-  :where(.switch) {
+  :where(.ui-switch) {
     --_accent-color: var(--primary);
     --_accent-contrast: var(--primary-contrast);
 
@@ -3653,28 +3662,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;
@@ -3686,18 +3695,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;
@@ -3717,7 +3726,7 @@
     }
 
     /* Label */
-    .label {
+    .ui-label {
       color: var(--text-primary);
       font-size: var(--font-size-05);
       grid-column: 2;
@@ -3729,7 +3738,7 @@
     }
 
     /* End text */
-    :where(.end-text) {
+    :where(.ui-end-text) {
       color: var(--text-muted);
       font-size: var(--font-size-0);
       grid-column: 2;
@@ -3739,21 +3748,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;
@@ -3765,34 +3774,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;
       }
@@ -3805,7 +3814,7 @@
         outline: 2px solid var(--color-9);
       }
 
-      .end-text {
+      .ui-end-text {
         color: var(--color-9);
       }
     }
@@ -3843,7 +3852,7 @@
 		/* > .toast:nth-last-child(n + 6) { display: none; } */
 	}
 
-	:where(.toast) {
+	:where(.ui-toast) {
 		--_anim-enter: 0.3s;
 		--_anim-exit: 0.3s;
 
@@ -3871,11 +3880,11 @@
 			animation-play-state: paused;
 		}
 
-		&.exiting {
+		&.ui-exiting {
 			animation: toast-exit var(--_anim-exit) var(--ease-in-3) forwards;
 		}
 
-		.icon {
+		.ui-icon {
 			background: no-repeat center / contain;
 			block-size: var(--size-4);
 			flex-shrink: 0;
@@ -3883,25 +3892,25 @@
 		}
 
 		/* Hide the icon slot when there's no severity to render against. */
-		&:not([data-severity]) .icon {
+		&:not([data-severity]) .ui-icon {
 			display: none;
 		}
 
-		.content {
+		.ui-content {
 			font-size: var(--font-size-05);
 			word-break: break-word;
 		}
 
-		.title {
+		.ui-title {
 			font-weight: 600;
 		}
 
-		.description {
+		.ui-description {
 			color: oklch(from currentColor l c h / 75%);
 			font-size: var(--font-size-0);
 		}
 
-		.close-button {
+		.ui-close-button {
 			background: none;
 			border: none;
 			color: inherit;
@@ -3918,19 +3927,19 @@
 		}
 
 		/* Severity icons via CSS data URIs — keeps icon assets out of JS strings. */
-		&[data-severity="success"] .icon {
+		&[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>");
 		}
 
-		&[data-severity="info"] .icon {
+		&[data-severity="info"] .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='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M12 16v-4'/><path d='M12 8h.01'/></svg>");
 		}
 
-		&[data-severity="warning"] .icon {
+		&[data-severity="warning"] .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='%23f59e0b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/><path d='M12 9v4'/><path d='M12 17h.01'/></svg>");
 		}
 
-		&[data-severity="critical"] .icon {
+		&[data-severity="critical"] .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='%23ef4444' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='m15 9-6 6'/><path d='m9 9 6 6'/></svg>");
 		}
 	}
@@ -3976,60 +3985,60 @@
 
 @layer components.root {
 
-  :where(.p) {
+  :where(.ui-p) {
     text-wrap: pretty;
 
-    &.small {
+    &.ui-small {
       font-size: var(--font-size-1);
     }
 
-    &.large {
+    &.ui-large {
       font-size: var(--font-size-3);
     }
   }
 
-  :where(.h1, .h2, .h3, .h4, .h5, .h6) {
+  :where(.ui-h1, .ui-h2, .ui-h3, .ui-h4, .ui-h5, .ui-h6) {
     color: var(--text-primary);
     font-weight: 700;
     text-wrap: pretty;
   }
 
-  :where(.h1) {
+  :where(.ui-h1) {
     font-size: var(--font-size-h1, var(--font-size-7));
     letter-spacing: -0.02em;
     line-height: 1.15;
   }
 
-  :where(.h2) {
+  :where(.ui-h2) {
     font-size: var(--font-size-h2, var(--font-size-5, 2rem));
     letter-spacing: -0.02em;
     line-height: 1.2;
   }
 
-  :where(.h3) {
+  :where(.ui-h3) {
     font-size: var(--font-size-h3, var(--font-size-4, 1.5rem));
     letter-spacing: -0.01em;
     line-height: 1.167;
   }
 
-  :where(.h4) {
+  :where(.ui-h4) {
     font-size: var(--font-size-h4, var(--font-size-3, 1.25rem));
     letter-spacing: -0.01em;
     line-height: 1.235;
   }
 
-  :where(.h5) {
+  :where(.ui-h5) {
     font-size: var(--font-size-h5, var(--font-size-2, 1.1rem));
     line-height: 1.334;
   }
 
-  :where(.h6) {
+  :where(.ui-h6) {
     font-size: var(--font-size-h6, var(--font-size-1, 1rem));
     line-height: 1;
   }
 
   /** Overline */
-  :where(.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));
     font-size: var(--font-size-0);
@@ -4038,7 +4047,7 @@
     text-transform: uppercase;
   }
 
-  :where(.hgroup) {
+  :where(.ui-hgroup) {
     &>p {
       margin: 0;
     }
@@ -4070,7 +4079,7 @@
   }
 
   /** Caption */
-  :where(.caption) {
+  :where(.ui-caption) {
     color: var(--text-muted);
     font-size: var(--font-size-0);
     line-height: 1.6;
@@ -4079,7 +4088,7 @@
 
 
   /* Inline text elements — class utilities (work anywhere) */
-  :where(.u, .abbr, .dfn) {
+  :where(.ui-u, .ui-abbr, .ui-dfn) {
     text-decoration: underline;
     text-underline-offset: 1px;
 
@@ -4088,7 +4097,7 @@
     }
   }
 
-  :where(.abbr, .dfn) {
+  :where(.ui-abbr, .ui-dfn) {
     font-style: normal;
     text-decoration: var(--color-9) underline dotted;
 
@@ -4102,21 +4111,21 @@
     }
   }
 
-  :where(.sup) {
+  :where(.ui-sup) {
     font-size: 0.5em;
     vertical-align: super;
   }
 
-  :where(p, span).small {
+  :where(p, span).ui-small {
     font-size: max(0.5em, var(--font-size-0, 0.75rem));
   }
 
-  :where(.cite) {
+  :where(.ui-cite) {
     font-style: italic;
   }
 
   /* Code */
-  :where(.kbd) {
+  :where(.ui-kbd) {
     font-family: var(--font-mono);
     background-color: var(--text-muted);
     border-color: var(--text-muted);
@@ -4127,34 +4136,34 @@
     word-break: break-word;
   }
 
-  :where(.mark) {
+  :where(.ui-mark) {
     border-radius: var(--radius-2);
     box-decoration-break: clone;
     padding: .1ex .3ex;
     vertical-align: baseline;
   }
 
-  :where(.s) {
+  :where(.ui-s) {
     text-decoration: line-through;
   }
 
-  :where(.sub) {
+  :where(.ui-sub) {
     font-size: 0.75em;
     vertical-align: sub;
   }
 
-  :where(.del) {
+  :where(.ui-del) {
     color: var(--color-9);
     text-decoration: line-through;
   }
 
-  :where(.ins) {
+  :where(.ui-ins) {
     color: var(--color-9);
     text-decoration: underline;
     text-underline-offset: 1px;
   }
 
-  :where(.var) {
+  :where(.ui-var) {
     font-family: var(--font-mono);
     background-color: var(--text-muted);
     border-color: var(--text-muted);
@@ -4165,12 +4174,12 @@
     word-break: break-word;
   }
 
-  :where(.samp) {
+  :where(.ui-samp) {
     font-family: var(--font-mono);
   }
 
   /* Blockquote */
-  :where(.blockquote) {
+  :where(.ui-blockquote) {
     border-inline-start: var(--border-size-3) solid currentColor;
     padding-block: var(--size-3);
     padding-inline: var(--size-4);
@@ -4190,7 +4199,7 @@
   }
 
   /* Code block */
-  :where(pre.code-block) {
+  :where(pre.ui-code-block) {
     background-color: var(--color-15);
     border-radius: var(--border-radius);
     color: var(--color-1);
@@ -4219,7 +4228,7 @@
 /* Rich text */
 
 @layer components.extended {
-  @scope (.rich-text) to (.not-rich-text) {
+  @scope (.ui-rich-text) to (.ui-not-rich-text) {
     a {
       color: var(--primary);
       cursor: pointer;
@@ -4352,7 +4361,7 @@
     }
 
     /** Overline */
-    :is(.overline, hgroup p:first-of-type:first-child) {
+    :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));
       font-size: var(--font-size-0);
@@ -4564,7 +4573,7 @@
 /*** Extended components (has dependencies) */
 
 @layer components.extended {
-  :where(.badge) {
+  :where(.ui-badge) {
     --_anchor-tx: -50%;
     --_anchor-ty: 50%;
     --_badge-inset: auto auto 100% 100%;
@@ -4580,14 +4589,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);
@@ -4606,57 +4615,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);
@@ -4664,7 +4673,7 @@
     }
 
     /* Visibility */
-    &.invisible>.anchor-floating>.badge-indicator {
+    &.ui-invisible>.ui-anchor-floating>.ui-badge-indicator {
       opacity: 0;
       pointer-events: none;
     }
@@ -4672,7 +4681,7 @@
 }
 
 @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);
@@ -4687,11 +4696,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;
       }
 
@@ -4702,8 +4711,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);
@@ -4714,26 +4723,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);
 
@@ -4752,7 +4761,7 @@
         }
       }
 
-      :where(.button-group.tonal) & {
+      :where(.ui-button-group.ui-tonal) & {
         --_bg-color: var(--_accent-tonal);
         --_text-color: var(--_accent-tonal-contrast);
 
@@ -4769,13 +4778,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));
         }
@@ -4792,7 +4801,7 @@
       }
     }
 
-    &:not(.vertical) {
+    &:not(.ui-vertical) {
       button {
         &:first-of-type {
           border-end-start-radius: var(--_border-radius);
@@ -4817,7 +4826,7 @@
       }
     }
 
-    &.vertical {
+    &.ui-vertical {
       flex-direction: column;
 
       button {
@@ -4852,7 +4861,7 @@
 }
 
 @layer components.extended {
-  :where(details.accordion) {
+  :where(details.ui-accordion) {
     --_actions-gap: var(--size-1);
     --_actions-margin-block-start: var(--size-3);
     --_actions-padding-block-end: var(--size-1);
@@ -4879,14 +4888,14 @@
     margin-inline: var(--_margin-inline);
     transition: all var(--_transition) ease-out;
 
-    &.elevated {
+    &.ui-elevated {
       --_bg-color: var(--surface-elevated);
       --_margin-inline: 0;
       --_padding-inline: var(--size-3);
       --_shadow: var(--shadow-3);
     }
 
-    &.outlined {
+    &.ui-outlined {
       --_bg-color: var(--surface-default);
       --_border-color: var(--border-color);
       --_border-width: 1px;
@@ -4894,7 +4903,7 @@
       --_padding-inline: var(--size-3);
     }
 
-    &.tonal {
+    &.ui-tonal {
       --_bg-color: var(--surface-tonal);
       --_margin-inline: 0;
       --_padding-inline: var(--size-3);
@@ -4951,13 +4960,13 @@
       rotate: 180deg;
     }
 
-    &>.content {
+    &>.ui-content {
       margin-block-start: 0;
       padding-block: var(--_content-padding-block);
       padding-inline: var(--_content-padding-inline);
     }
 
-    &>.actions {
+    &>.ui-actions {
       display: flex;
       gap: var(--_actions-gap);
       justify-content: end;
@@ -4968,7 +4977,7 @@
   }
 
   /* Accordion group  */
-  :where(.card[role="group"]:has(details.accordion)) {
+  :where(.ui-card[role="group"]:has(details.ui-accordion)) {
     --_group-radius: var(--border-radius);
     --_gutter-color: var(--border-color);
     --_item-padding-inline: var(--size-3);
@@ -4976,18 +4985,18 @@
 
     display: block;
 
-    &.card {
-      &:not(.tonal, .outlined, .elevated) {
+    &.ui-card {
+      &:not(.ui-tonal, .ui-outlined, .ui-elevated) {
         --_item-summary-padding-inline: 0;
       }
     }
 
-    &>.content {
+    &>.ui-content {
       margin-block: 0;
       padding: 0;
     }
 
-    &>details.accordion {
+    &>details.ui-accordion {
       --_border-color: transparent;
       --_border-width: 0;
       --_margin-inline: 0;
@@ -5032,10 +5041,10 @@
 Lists meant to be used stand-alone or as part of Select elements
 
   Intended use-case:
-  - ul.list > li
-  - .select > .list > option
+  - ul.ui-list > li
+  - .ui-select > .ui-list > option
 */
-  :where(.list) {
+  :where(.ui-list) {
     --_bg-color: var(--surface-filled);
     --_bg-color-hover: oklch(from var(--primary) l c h / 15%);
 
@@ -5053,20 +5062,20 @@ Lists meant to be used stand-alone or as part of Select elements
     }
 
     /* Background color */
-    &.transparent {
+    &.ui-transparent {
       --_bg-color: transparent;
     }
 
-    &.default {
+    &.ui-default {
       --_bg-color: var(--surface-default);
     }
 
-    &.tonal {
+    &.ui-tonal {
       --_bg-color: var(--surface-tonal);
     }
 
     /* Borders on all list items */
-    &.bordered {
+    &.ui-bordered {
       :where(li + li, option + option) {
         margin-block-start: var(--size-3);
 
@@ -5085,13 +5094,13 @@ Lists meant to be used stand-alone or as part of Select elements
     }
 
     /* Dense - less gaps and spacing */
-    &.dense {
+    &.ui-dense {
       :where(li, option) {
         gap: var(--size-2);
         min-block-size: var(--size-7);
         padding: var(--size-1) var(--size-2);
 
-        &.border-top {
+        &.ui-border-top {
           margin-block-start: var(--size-2);
 
           &::before {
@@ -5113,29 +5122,29 @@ Lists meant to be used stand-alone or as part of Select elements
 
         /* Checkbox / Radio */
         &>label {
-          .end {
+          .ui-end {
             padding-inline-end: 0.125rem;
           }
 
-          &:where(.checkbox, .radio) {
+          &:where(.ui-checkbox, .ui-radio) {
             --_input-size: var(--size-3);
           }
         }
 
         /* Leading and trailing content */
-        .start,
-        .end {
-          .avatar {
+        .ui-start,
+        .ui-end {
+          .ui-avatar {
             max-inline-size: var(--size-6);
           }
 
-          .icon-button,
+          .ui-icon-button,
           svg {
             max-inline-size: var(--size-4);
           }
 
-          .checkbox,
-          .radio {
+          .ui-checkbox,
+          .ui-radio {
             --_input-size: var(--size-3);
           }
         }
@@ -5143,7 +5152,7 @@ Lists meant to be used stand-alone or as part of Select elements
     }
 
     /* Gutterless */
-    &.gutterless {
+    &.ui-gutterless {
       :where(li, option) {
         padding-inline: 0;
 
@@ -5248,20 +5257,20 @@ Lists meant to be used stand-alone or as part of Select elements
 
       /* Checkbox / Radio / Switch */
       &>label {
-        &:where(.checkbox, .radio, .switch) {
+        &:where(.ui-checkbox, .ui-radio, .ui-switch) {
           display: flex;
         }
 
-        .end {
+        .ui-end {
           padding-inline-end: var(--size-1);
         }
 
-        &:where(.checkbox, .radio) {
+        &:where(.ui-checkbox, .ui-radio) {
           inline-size: 100%;
         }
 
         /* Switches look comically big in lists, so it's better to use a smaller variant  */
-        &.switch {
+        &.ui-switch {
           --_dot-size: 0.75rem;
           --_track-height: var(--size-4);
           --_track-width: 2.5rem;
@@ -5274,7 +5283,7 @@ Lists meant to be used stand-alone or as part of Select elements
       }
 
       /* Border between list items */
-      &.border-top {
+      &.ui-border-top {
         margin-block-start: var(--size-3);
 
         &::before {
@@ -5289,7 +5298,7 @@ Lists meant to be used stand-alone or as part of Select elements
       }
 
       /* Text */
-      .text {
+      .ui-text {
         flex: 1;
         line-height: 1.6;
 
@@ -5305,7 +5314,7 @@ Lists meant to be used stand-alone or as part of Select elements
       }
 
       /* Leading content */
-      .start {
+      .ui-start {
         align-items: center;
         align-self: center;
         display: grid;
@@ -5333,7 +5342,7 @@ Lists meant to be used stand-alone or as part of Select elements
       }
 
       /* Trailing content */
-      .end {
+      .ui-end {
         align-items: center;
         display: flex;
         font-size: var(--font-size-0);
@@ -5358,13 +5367,13 @@ Lists meant to be used stand-alone or as part of Select elements
       }
 
       /* Inset */
-      &.inset {
-        .text {
+      &.ui-inset {
+        .ui-text {
           padding-inline-start: calc(var(--size-5) + var(--size-3));
         }
 
         /* Safety measure so it won't look bad if there for some reason should exist a leading element inside. */
-        .start {
+        .ui-start {
           display: none;
         }
       }
@@ -5373,7 +5382,7 @@ Lists meant to be used stand-alone or as part of Select elements
 }
 
 @layer components.extended {
-  :where(.dialog) {
+  :where(.ui-dialog) {
     inline-size: 100%;
     inset: 0;
     margin: auto;
@@ -5408,7 +5417,7 @@ Lists meant to be used stand-alone or as part of Select elements
       pointer-events: all;
     }
 
-    .actions {
+    .ui-actions {
       justify-content: end;
       padding-inline: var(--size-3) var(--size-1);
     }
@@ -5435,14 +5444,14 @@ Lists meant to be used stand-alone or as part of Select elements
     }
   }
 
-  :where(html:has(.dialog[open])) {
+  :where(html:has(.ui-dialog[open])) {
     block-size: 100%;
     overflow: hidden;
   }
 }
 
 @layer components.root {
-	:where(dialog.drawer) {
+	:where(dialog.ui-drawer) {
 		--_backdrop-bg-color: transparent;
 		--_backdrop-blur: blur(2px);
 		--_bg-color: var(--surface-default);
@@ -5486,11 +5495,11 @@ Lists meant to be used stand-alone or as part of Select elements
 				opacity var(--_transition-duration) var(--_transition-timing);
 		}
 
-		&.backdrop-transparent {
+		&.ui-backdrop-transparent {
 			--_backdrop-blur: none;
 		}
 
-		.header {
+		.ui-header {
 			align-items: center;
 			border-block-end: var(--_border-width) solid var(--_border-color);
 			display: flex;
@@ -5501,18 +5510,18 @@ Lists meant to be used stand-alone or as part of Select elements
 				margin: 0;
 			}
 
-			:where(.icon-button) {
+			:where(.ui-icon-button) {
 				margin-inline-start: auto;
 			}
 		}
 
-		.content {
+		.ui-content {
 			flex: 1;
 			overflow-y: auto;
 			padding: var(--_content-padding);
 		}
 
-		.footer {
+		.ui-footer {
 			border-block-start: var(--_border-width) solid var(--_border-color);
 			display: flex;
 			gap: var(--_footer-gap);
@@ -5520,48 +5529,48 @@ Lists meant to be used stand-alone or as part of Select elements
 			padding: var(--_footer-padding);
 		}
 
-		&.inline-start,
-		&.inline-end {
+		&.ui-inline-start,
+		&.ui-inline-end {
 			block-size: 100dvb;
 			inline-size: var(--_inline-size);
 			inset-block: 0;
 			max-block-size: 100%;
 		}
 
-		&.inline-start {
+		&.ui-inline-start {
 			border-inline-end: var(--_border-width) solid var(--_border-color);
 			inset-inline-end: auto;
 			inset-inline-start: 0;
 			translate: -100% 0;
 		}
 
-		&.inline-end {
+		&.ui-inline-end {
 			border-inline-start: var(--_border-width) solid var(--_border-color);
 			inset-inline-end: 0;
 			inset-inline-start: auto;
 			translate: 100% 0;
 
-			.footer {
+			.ui-footer {
 				justify-content: start;
 			}
 		}
 
-		&.block-start,
-		&.block-end {
+		&.ui-block-start,
+		&.ui-block-end {
 			block-size: var(--_block-size);
 			inline-size: 100dvi;
 			inset-inline: 0;
 			max-block-size: 80dvb;
 		}
 
-		&.block-start {
+		&.ui-block-start {
 			border-block-end: var(--_border-width) solid var(--_border-color);
 			inset-block-end: auto;
 			inset-block-start: 0;
 			translate: 0 -100%;
 		}
 
-		&.block-end {
+		&.ui-block-end {
 			border-block-start: var(--_border-width) solid var(--_border-color);
 			inset-block-end: 0;
 			inset-block-start: auto;
@@ -5580,29 +5589,29 @@ Lists meant to be used stand-alone or as part of Select elements
 					opacity: 0;
 				}
 
-				&.inline-start {
+				&.ui-inline-start {
 					translate: -100% 0;
 				}
 
-				&.inline-end {
+				&.ui-inline-end {
 					translate: 100% 0;
 				}
 
-				&.block-start {
+				&.ui-block-start {
 					translate: 0 -100%;
 				}
 
-				&.block-end {
+				&.ui-block-end {
 					translate: 0 100%;
 				}
 			}
 		}
 	}
 
-	/* Scroll-lock is provided by the shared `.scroll-lock` utility in core/utils.css.
+	/* 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). */
-	html:has(dialog.drawer.scroll-lock[open].backdrop-transparent) {
+	html:has(dialog.ui-drawer.ui-scroll-lock[open].ui-backdrop-transparent) {
 		overflow: unset;
 		overscroll-behavior: auto;
 
@@ -5616,7 +5625,7 @@ Lists meant to be used stand-alone or as part of Select elements
 @layer components.extended {
 
   /* Form */
-  :where(.form) {
+  :where(.ui-form) {
     display: grid;
     gap: var(--size-8);
 
@@ -5626,7 +5635,7 @@ Lists meant to be used stand-alone or as part of Select elements
   }
 
   /* Fieldset */
-  :where(.fieldset) {
+  :where(.ui-fieldset) {
     all: unset;
     border: 0;
     border-radius: 0;
@@ -5637,20 +5646,20 @@ Lists meant to be used stand-alone or as part of Select elements
     padding: 0;
 
     /* Legend */
-    :where(legend, .legend) {
+    :where(legend, .ui-legend) {
       all: unset;
       color: var(--text-primary);
       font-weight: 600;
       margin-block-end: var(--size-3);
       padding: 0;
 
-      &:has(+ :where(.field-description)) {
+      &:has(+ :where(.ui-field-description)) {
         margin-block-end: 0;
       }
     }
 
     /* Field description / supporting text */
-    :where(.field-description) {
+    :where(.ui-field-description) {
       color: var(--text-muted);
       font-size: var(--font-size-05);
       line-height: var(--font-lineheight-3);
@@ -5661,13 +5670,13 @@ Lists meant to be used stand-alone or as part of Select elements
     }
 
     /* End text */
-    :where(.end-text) {
+    :where(.ui-end-text) {
       color: var(--text-muted);
       font-size: var(--font-size-0);
       line-height: var(--font-lineheight-3);
     }
 
-    &:has(.text-field.row) {
+    &:has(.ui-text-field.ui-row) {
       row-gap: var(--size-7);
     }
 
@@ -5678,26 +5687,26 @@ Lists meant to be used stand-alone or as part of Select elements
 
       input,
       label,
-      .label {
+      .ui-label {
         cursor: not-allowed;
       }
     }
 
     /* Error / validation */
     &[data-invalid] {
-      :where(.end-text) {
+      :where(.ui-end-text) {
         color: var(--primary);
       }
 
-      :where(.checkbox, .radio, .switch) {
+      :where(.ui-checkbox, .ui-radio, .ui-switch) {
         --palette-source: oklch(0.58 0.21 var(--hue-red));
 
-        :where(.end-text) {
+        :where(.ui-end-text) {
           color: var(--primary);
         }
       }
 
-      :where(.switch) {
+      :where(.ui-switch) {
         input {
           border-radius: var(--radius-round);
           outline: 2px solid var(--primary);
@@ -5707,7 +5716,7 @@ Lists meant to be used stand-alone or as part of Select elements
 
     /* Required */
     &:has(:invalid) {
-      :where(legend, .legend) {
+      :where(legend, .ui-legend) {
         padding-inline-end: 1ex;
         position: relative;
 
@@ -5722,18 +5731,18 @@ Lists meant to be used stand-alone or as part of Select elements
   }
 
   /* Field group */
-  :where(.field-group) {
+  :where(.ui-field-group) {
     display: flex;
     flex-direction: column;
     gap: var(--size-4);
 
     /* If it only has checkboxes, radios, or switches */
-    &:has(> :where(.checkbox, .radio, .switch)):not(:has(> :not(.checkbox, .radio, .switch))) {
+    &:has(> :where(.ui-checkbox, .ui-radio, .ui-switch)):not(:has(> :not(.ui-checkbox, .ui-radio, .ui-switch))) {
       gap: var(--size-2);
     }
 
     /* If it only has buttons */
-    &:has(.button):not(:has(*:not(.button))) {
+    &:has(.ui-button):not(:has(*:not(.ui-button))) {
       align-items: center;
       flex-direction: row;
       gap: var(--size-2);
@@ -5749,11 +5758,11 @@ Lists meant to be used stand-alone or as part of Select elements
     }
 
     /* Directions */
-    &.row {
+    &.ui-row {
       flex-direction: row;
       flex-wrap: wrap;
 
-      &:has(> :where(.checkbox, .radio, .switch)) {
+      &:has(> :where(.ui-checkbox, .ui-radio, .ui-switch)) {
         gap: var(--size-4);
       }
     }
@@ -5766,7 +5775,7 @@ Lists meant to be used stand-alone or as part of Select elements
 - Common styling for input, textarea and select
 - Form related styles such as: label, supporting text, error handling
 */
-  :where(.text-field, .textarea, .select) {
+  :where(.ui-text-field, .ui-textarea, .ui-select) {
     --_accent-color: var(--primary);
     --_bg-color: var(--surface-default);
     --_border-color: var(--field-border-color);
@@ -5782,7 +5791,7 @@ Lists meant to be used stand-alone or as part of Select elements
     position: relative;
 
     /* Field - the actual input with a border around it */
-    .field {
+    .ui-field {
       background-color: var(--_bg-color);
       border: var(--field-border-width) solid var(--_border-color);
       border-radius: var(--field-border-radius);
@@ -5801,7 +5810,7 @@ Lists meant to be used stand-alone or as part of Select elements
       }
     }
 
-    :where(.field) :where(input, textarea, select) {
+    :where(.ui-field) :where(input, textarea, select) {
       background: transparent;
       border: 0;
       color: var(--text-primary);
@@ -5820,8 +5829,8 @@ Lists meant to be used stand-alone or as part of Select elements
     }
 
     /* Affixes */
-    .prefix,
-    .suffix {
+    .ui-prefix,
+    .ui-suffix {
       align-items: center;
       color: var(--_label-color);
       display: inline-flex;
@@ -5829,16 +5838,16 @@ Lists meant to be used stand-alone or as part of Select elements
       white-space: nowrap;
     }
 
-    .prefix {
+    .ui-prefix {
       grid-area: prefix;
     }
 
-    .suffix {
+    .ui-suffix {
       grid-area: suffix;
     }
 
-    .header,
-    .footer {
+    .ui-header,
+    .ui-footer {
       align-items: center;
       color: var(--_label-color);
       display: flex;
@@ -5847,30 +5856,30 @@ Lists meant to be used stand-alone or as part of Select elements
       padding: var(--size-1) var(--_field-padding-inline);
     }
 
-    .header {
+    .ui-header {
       border-block-end: 1px solid var(--_border-color);
       grid-area: header;
     }
 
-    .footer {
+    .ui-footer {
       border-block-start: 1px solid var(--_border-color);
       grid-area: footer;
     }
 
     /* Remove padding on the input when affixes are next to it */
-    .field:has(> .prefix) :where(input, textarea, select) {
+    .ui-field:has(> .ui-prefix) :where(input, textarea, select) {
       padding-inline-start: 0;
     }
 
-    .field:has(> .suffix) :where(input, textarea, select) {
+    .ui-field:has(> .ui-suffix) :where(input, textarea, select) {
       padding-inline-end: 0;
     }
 
     /* Textarea - keep affix aligned with the first line */
-    &.textarea .field {
+    &.ui-textarea .ui-field {
 
-      .prefix,
-      .suffix {
+      .ui-prefix,
+      .ui-suffix {
         align-self: start;
         padding-block: var(--_field-padding-block);
       }
@@ -5878,7 +5887,7 @@ Lists meant to be used stand-alone or as part of Select elements
 
     /* Required/Invalid */
     &:has(:invalid) {
-      .label:after {
+      .ui-label:after {
         color: var(--red);
         content: "*";
         margin: -0.25em auto auto 0.25em;
@@ -5913,7 +5922,7 @@ Lists meant to be used stand-alone or as part of Select elements
       }
 
       /* Variants */
-      &.filled {
+      &.ui-filled {
         input {
 
           &::-webkit-file-upload-button,
@@ -5928,7 +5937,7 @@ Lists meant to be used stand-alone or as part of Select elements
       }
 
       /* Sizes */
-      &.small {
+      &.ui-small {
         input {
           font-size: var(--font-size-05);
 
@@ -5943,7 +5952,7 @@ Lists meant to be used stand-alone or as part of Select elements
 
     /* Autosuggest */
     &:has(input[list]) {
-      .label {
+      .ui-label {
         /* Make sure chevron is visible */
         inline-size: calc(100% - var(--size-6));
       }
@@ -5951,7 +5960,7 @@ Lists meant to be used stand-alone or as part of Select elements
 
     /* Select */
     &:has(select) {
-      .label {
+      .ui-label {
         /* Make sure chevron is visible */
         inline-size: calc(100% - var(--size-6));
 
@@ -5979,7 +5988,7 @@ Lists meant to be used stand-alone or as part of Select elements
 
     /* Input - color */
     &:has(input[type="color"]) {
-      .field {
+      .ui-field {
         block-size: var(--_height);
         inline-size: var(--_height);
         min-block-size: 0;
@@ -6007,21 +6016,21 @@ Lists meant to be used stand-alone or as part of Select elements
     /* Element states */
     &:hover {
       &:not([data-invalid]) {
-        .field {
+        .ui-field {
           border-color: var(--text-primary);
         }
       }
     }
 
     &:focus-within {
-      .field {
+      .ui-field {
         border-color: var(--_accent-color);
         outline-offset: -2px;
       }
     }
 
     /* Label */
-    .label {
+    .ui-label {
       color: var(--text-primary);
       font-size: var(--font-size-05);
       font-weight: 600;
@@ -6031,7 +6040,7 @@ Lists meant to be used stand-alone or as part of Select elements
     }
 
     /* End text */
-    :where(.end-text) {
+    :where(.ui-end-text) {
       color: var(--_end-text-color);
       font-size: var(--font-size-0);
       grid-column: 1/-1;
@@ -6040,10 +6049,10 @@ Lists meant to be used stand-alone or as part of Select elements
     }
 
     /* Auto-fit */
-    &.auto-fit {
+    &.ui-auto-fit {
       inline-size: auto;
 
-      .field {
+      .ui-field {
         inline-size: auto;
       }
 
@@ -6067,7 +6076,7 @@ Lists meant to be used stand-alone or as part of Select elements
     /*
   * Variant: Filled
   */
-    &.filled {
+    &.ui-filled {
       --_bg-color: var(--surface-tonal);
 
       &:not(:has([disabled], :has(input[type="color"]))) {
@@ -6090,7 +6099,7 @@ Lists meant to be used stand-alone or as part of Select elements
         display: none;
       }
 
-      .field {
+      .ui-field {
         cursor: not-allowed;
       }
 
@@ -6102,9 +6111,9 @@ Lists meant to be used stand-alone or as part of Select elements
         }
       }
 
-      .label,
-      .start-text,
-      .end-text {
+      .ui-label,
+      .ui-start-text,
+      .ui-end-text {
         cursor: not-allowed;
       }
     }
@@ -6125,31 +6134,31 @@ Lists meant to be used stand-alone or as part of Select elements
     }
 
     /* Sizes */
-    &.small {
+    &.ui-small {
       --_field-padding-block: var(--size-2);
       --_height: var(--field-size-small);
 
       &:has(input[type="color"]) {
-        .label {
+        .ui-label {
           line-height: 1.5;
         }
       }
     }
 
     /* Orientation */
-    &.spread {
+    &.ui-spread {
       align-items: start;
       column-gap: var(--size-4);
       container-type: inline-size;
       grid-template-columns: 1fr auto;
 
-      .label {
+      .ui-label {
         font-weight: 600;
         grid-column: 1;
         grid-row: 1;
       }
 
-      .start-text {
+      .ui-start-text {
         color: var(--_end-text-color);
         font-size: var(--font-size-0);
         grid-column: 1;
@@ -6157,16 +6166,16 @@ Lists meant to be used stand-alone or as part of Select elements
         line-height: 1.5;
       }
 
-      .field {
+      .ui-field {
         align-self: start;
         grid-column: 2;
         grid-row: 1 / span 2;
       }
 
-      .field:has(textarea) {
+      .ui-field:has(textarea) {
         grid-row: 1 / span 3;
 
-        +.end-text {
+        +.ui-end-text {
           grid-row: 4;
         }
       }
@@ -6175,7 +6184,7 @@ Lists meant to be used stand-alone or as part of Select elements
         min-inline-size: 30ch;
       }
 
-      :where(.end-text) {
+      :where(.ui-end-text) {
         grid-column: 2;
         text-align: end;
       }
@@ -6185,23 +6194,23 @@ Lists meant to be used stand-alone or as part of Select elements
         column-gap: 0;
         grid-template-columns: 1fr;
 
-        .label {
+        .ui-label {
           grid-column: 1;
           grid-row: 1;
         }
 
-        .start-text {
+        .ui-start-text {
           grid-column: 1;
           grid-row: 2;
         }
 
-        .field,
-        .field:has(textarea) {
+        .ui-field,
+        .ui-field:has(textarea) {
           grid-column: 1;
           grid-row: 3;
         }
 
-        :where(.end-text) {
+        :where(.ui-end-text) {
           grid-column: 1;
           grid-row: 4;
           text-align: start;
@@ -6212,7 +6221,7 @@ Lists meant to be used stand-alone or as part of Select elements
 }
 
 @layer components.extended {
-  :where(.select select) {
+  :where(.ui-select select) {
     position: relative;
 
     /* Default arrow */
@@ -6277,7 +6286,7 @@ Lists meant to be used stand-alone or as part of Select elements
       }
     }
 
-    .list {
+    .ui-list {
       --_bg-color: var(--surface-filled);
       border: var(--field-border-width) solid var(--field-border-color);
       border-radius: var(--field-border-radius);
@@ -6332,10 +6341,10 @@ Lists meant to be used stand-alone or as part of Select elements
     }
   }
 
-  :where(.select:has(select)) {
+  :where(.ui-select:has(select)) {
 
     /* Size */
-    &.small {
+    &.ui-small {
       button {
         padding-inline: var(--size-2) var(--size-7);
 
@@ -6383,7 +6392,7 @@ Lists meant to be used stand-alone or as part of Select elements
 
 @layer components.extended {
 
-  :where(.text-field:has( :where(input[type="date"],
+  :where(.ui-text-field:has( :where(input[type="date"],
         input[type="datetime-local"],
         input[type="email"],
         input[type="month"],
@@ -6397,7 +6406,7 @@ Lists meant to be used stand-alone or as part of Select elements
         input[type="week"]))) {
 
     /* Sizes */
-    &.small {
+    &.ui-small {
       input {
         padding-inline: var(--size-2);
       }
@@ -6405,8 +6414,8 @@ Lists meant to be used stand-alone or as part of Select elements
   }
 
   /* Autosuggest */
-  :where(.text-field:has(input[list])) {
-    .field {
+  :where(.ui-text-field:has(input[list])) {
+    .ui-field {
       position: relative;
     }
 
@@ -6422,7 +6431,7 @@ Lists meant to be used stand-alone or as part of Select elements
       padding-inline-end: var(--size-8);
     }
 
-    .field::after {
+    .ui-field::after {
       block-size: 0;
       border-block-start: 5px solid;
       border-inline: 5px solid transparent;
@@ -6434,12 +6443,12 @@ Lists meant to be used stand-alone or as part of Select elements
       translate: 0 -50%;
     }
 
-    &.small {
+    &.ui-small {
       input[list] {
         padding-inline-end: var(--size-7);
       }
 
-      .field::after {
+      .ui-field::after {
         inset-inline-end: var(--size-2);
       }
     }
@@ -6447,7 +6456,7 @@ Lists meant to be used stand-alone or as part of Select elements
 }
 
 @layer components.extended {
-  :where(.textarea) {
+  :where(.ui-textarea) {
     textarea {
       block-size: auto;
       field-sizing: content;
@@ -6456,14 +6465,14 @@ Lists meant to be used stand-alone or as part of Select elements
     }
 
     /* Size */
-    &.small {
+    &.ui-small {
       textarea {
         min-block-size: var(--size-9);
       }
     }
 
     /* Auto-fit */
-    &.auto-fit {
+    &.ui-auto-fit {
       textarea {
         resize: both;
       }
@@ -6472,12 +6481,12 @@ Lists meant to be used stand-alone or as part of Select elements
 }
 
 @layer components.extended {
-	:where(.tooltip) {
+	:where(.ui-tooltip) {
 		--_tooltip-bg: light-dark(var(--gray-13), var(--gray-3));
 		--_tooltip-color: light-dark(var(--gray-1), var(--gray-15));
 		--_tooltip-offset: var(--size-2);
 
-		&>.anchor-floating {
+		&>.ui-anchor-floating {
 			background-color: var(--_tooltip-bg);
 			border-radius: var(--radius-2);
 			color: var(--_tooltip-color);
@@ -6499,15 +6508,15 @@ Lists meant to be used stand-alone or as part of Select elements
 		/* 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. */
-		&.with-arrow {
+		&.ui-with-arrow {
 			--_arrow-size: var(--size-2);
 
-			&>.anchor-floating {
+			&>.ui-anchor-floating {
 				/* Reserve space so the arrow doesn't overlap the trigger. */
 				--_tooltip-offset: calc(var(--size-2) + var(--_arrow-size) / 2);
 			}
 
-			&>.anchor-floating::before {
+			&>.ui-anchor-floating::before {
 				background-color: var(--_tooltip-bg);
 				block-size: var(--_arrow-size);
 				content: "";
@@ -6521,7 +6530,7 @@ Lists meant to be used stand-alone or as part of Select elements
 		}
 
 		/* Fade */
-		&>.anchor-floating[popover] {
+		&>.ui-anchor-floating[popover] {
 			opacity: 0;
 			transition:
 				display 0.15s allow-discrete,
@@ -6547,7 +6556,7 @@ Lists meant to be used stand-alone or as part of Select elements
 Screen-reader only
 When you visibly want to hide an element but make it accessible for screen readers.
 */
-  .sr-only {
+  .ui-sr-only {
     block-size: 1px;
     clip-path: inset(50%);
     inline-size: 1px;
@@ -6558,17 +6567,17 @@ When you visibly want to hide an element but make it accessible for screen reade
 
   /*
 Scroll-lock
-Add `.scroll-lock` to any element that uses the [open] attribute (native <dialog>,
+Add `.ui-scroll-lock` to any element that uses the [open] attribute (native <dialog>,
 <details>, or any custom element). When that element is open, the page is locked.
 */
-  html:has(.scroll-lock[open]) {
+  html:has(.ui-scroll-lock[open]) {
     overflow: clip;
     overscroll-behavior: contain;
     scrollbar-gutter: stable;
   }
 
   /* Hover and active effect for checkbox, radio and icon buttons */
-  :where(.checkbox input, .radio input, .icon-button) {
+  :where(.ui-checkbox input, .ui-radio input, .ui-icon-button) {
     --isLTR: 1;
     --isRTL: -1;