opui-css 4.0.1 → 5.0.0

package/dist/opui.components.css

@@ -5,7 +5,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);
@@ -60,8 +60,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);
@@ -75,11 +75,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);
     }
 
@@ -107,7 +107,7 @@
 
 
     /* Icons / Keyboard */
-    &:where(:has(svg), &.icon-only) {
+    &:where(:has(svg), &.ui-icon-only) {
       gap: 1ex;
 
       svg {
@@ -128,27 +128,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);
@@ -168,7 +168,7 @@
       }
     }
 
-    &.tonal {
+    &.ui-tonal {
       --_bg-color: var(--_accent-tonal);
       --_text-color: var(--_accent-tonal-contrast);
 
@@ -185,7 +185,7 @@
       }
     }
 
-    &.filled {
+    &.ui-filled {
       --_bg-color: var(--_accent);
       --_text-color: var(--_accent-contrast);
 
@@ -221,7 +221,7 @@
 }
 
 @layer components.root {
-	:where(.callout) {
+	:where(.ui-callout) {
 		--_bg-color: var(--surface-tonal);
 		--_border-color: var(--surface-tonal);
 		--_color: var(--text-primary);
@@ -249,11 +249,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));
@@ -265,7 +265,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);
@@ -282,7 +282,7 @@
 			z-index: -1;
 		}
 
-		&>.content {
+		&>.ui-content {
 			display: grid;
 			font-size: var(--_font-size);
 			gap: var(--_content-gap);
@@ -306,7 +306,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;
 
@@ -331,7 +331,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);
@@ -399,8 +399,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);
@@ -414,11 +414,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);
     }
 
@@ -439,7 +439,7 @@
     }
 
     /* Size */
-    &.small {
+    &.ui-small {
       block-size: var(--size-4);
       inline-size: var(--size-4);
 
@@ -450,18 +450,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);
@@ -471,7 +471,7 @@
 }
 
 @layer components.root {
-  :where(.tabs) {
+  :where(.ui-tabs) {
     --_accent-color: var(--primary);
     --_bg-color: transparent;
 
@@ -481,8 +481,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%);
@@ -494,19 +494,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);
@@ -516,7 +520,8 @@
     }
 
     /* Tab */
-    &>[role="tab"] {
+    &>[role="tab"],
+    &>.ui-tab-label {
       align-items: center;
       background-color: transparent;
       border-bottom: 2px solid transparent;
@@ -540,7 +545,8 @@
     }
 
     /* Tab Panel */
-    &>[role="tabpanel"] {
+    &>[role="tabpanel"],
+    &>.ui-tab-panel {
       display: none;
       inline-size: 100%;
       order: 2;
@@ -549,7 +555,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);
@@ -562,27 +568,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 {
@@ -591,10 +597,10 @@
       }
     }
 
-    &.vertical {
+    &.ui-vertical {
       flex-direction: column;
 
-      .toggle-button {
+      .ui-toggle-button {
         border-block-end: 1px solid var(--_border-color);
 
         &:last-of-type {
@@ -610,7 +616,7 @@
 */
 
 @layer components.root {
-	:where(.toggle-button) {
+	:where(.ui-toggle-button) {
 		--_button-bg-color: transparent;
 		--_size: var(--field-size);
 		--_svg-size: var(--size-4);
@@ -635,7 +641,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;
@@ -646,7 +652,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));
 			}
 		}
@@ -659,7 +665,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;
@@ -684,25 +690,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;
@@ -712,7 +718,7 @@
 		}
 
 		/* Hover-triggered */
-		&>.anchor-floating[popover] {
+		&>.ui-anchor-floating[popover] {
 			inset: unset;
 			margin: 0;
 			position: absolute;
@@ -723,7 +729,7 @@
 }
 
 @layer components.root {
-  :where(.avatar) {
+  :where(.ui-avatar) {
     --_bg-color: var(--primary);
     --_color: var(--color-1);
     --_width: 40px;
@@ -757,15 +763,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) {
@@ -781,7 +787,7 @@
 
     display: flex;
 
-    .avatar {
+    .ui-avatar {
       box-shadow: 0 0 0 2px var(--_outline-color);
       margin-inline-end: calc(-1 * var(--_margin));
     }
@@ -789,7 +795,7 @@
 }
 
 @layer components.root {
-  :where(.card) {
+  :where(.ui-card) {
     --_bg-tonal: var(--surface-tonal);
     --_bg-elevated: var(--surface-elevated);
     --_bg-surface: var(--surface-default);
@@ -821,30 +827,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 {
@@ -872,31 +878,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);
         }
       }
@@ -907,7 +913,7 @@
 }
 
 @layer components.root {
-  :where(.chip) {
+  :where(.ui-chip) {
     --_bg-color: var(--surface-tonal);
     --_border-color: var(--border-color);
     --_color: var(--text-primary);
@@ -925,12 +931,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);
     }
@@ -959,11 +965,11 @@
     }
 
     /* Sizes */
-    &.small {
+    &.ui-small {
       block-size: var(--size-5);
     }
 
-    &.multiline {
+    &.ui-multiline {
       block-size: auto;
     }
 
@@ -995,7 +1001,7 @@
 }
 
 @layer components.root {
-  :where(.description-list) {
+  :where(.ui-description-list) {
     --_border-style: solid;
     --_border-width: 1px;
 
@@ -1004,17 +1010,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;
@@ -1029,13 +1036,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 {
@@ -1049,10 +1057,11 @@
         }
       }
 
-      &.bordered .item {
+      &.ui-bordered .ui-item {
         grid-template-columns: auto 1fr auto;
 
-        dt {
+        dt,
+        .ui-term {
           order: 0;
         }
 
@@ -1073,28 +1082,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;
@@ -1116,7 +1125,7 @@
 }
 
 @layer components.root {
-  :where(table) {
+  :where(.ui-table) {
     --_table-border-radius: var(--border-radius);
 
     border-collapse: separate;
@@ -1250,7 +1259,7 @@
     }
 
     /* Spacious */
-    &.spacious {
+    &.ui-spacious {
 
       th,
       td {
@@ -1272,7 +1281,7 @@
     }
 
     /* Dense */
-    &.dense {
+    &.ui-dense {
 
       th,
       td {
@@ -1296,7 +1305,7 @@
 }
 
 @layer components.root {
-  :where(progress) {
+  :where(.ui-progress) {
     --_accent-color: var(--primary);
     --_bg-color: var(--surface-tonal);
 
@@ -1312,15 +1321,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);
     }
 
@@ -1417,7 +1426,7 @@
       vertical-align: -0.14em;
     }
 
-    &:not(button.button):not(:empty) {
+    &:not(button.ui-button):not(:empty) {
       &::before {
         margin-inline-end: 0.5em;
       }
@@ -1432,7 +1441,7 @@
 }
 
 @layer components.root {
-	label.checkbox {
+	label.ui-checkbox {
 		--_input-size: var(--size-4);
 
 		align-items: center;
@@ -1460,7 +1469,7 @@
 
 		/* Required dot */
 		&:has(:invalid) {
-			.label:after {
+			.ui-label:after {
 				color: var(--red);
 				content: "*";
 				inset: 0 -0.25ex auto auto;
@@ -1469,7 +1478,7 @@
 		}
 
 		/* Label */
-		.label {
+		.ui-label {
 			color: var(--text-primary);
 			font-size: var(--font-size-05);
 			grid-column: 2;
@@ -1479,7 +1488,7 @@
 		}
 
 		/* End text */
-		:where(.end-text) {
+		:where(.ui-end-text) {
 			color: var(--text-muted);
 			font-size: var(--font-size-0);
 			grid-column: 2;
@@ -1489,14 +1498,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;
@@ -1508,18 +1517,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);
@@ -1531,7 +1540,7 @@
 				}
 			}
 
-			.end-text {
+			.ui-end-text {
 				grid-column: 1/-1;
 				grid-row: 3;
 			}
@@ -1590,13 +1599,13 @@
 		}
 
 		/* Sizes */
-		&.small {
+		&.ui-small {
 			input[type="checkbox"] {
 				--_input-size: var(--size-3);
 			}
 		}
 
-		&.large {
+		&.ui-large {
 			input[type="checkbox"] {
 				--_input-size: var(--size-5);
 			}
@@ -1607,7 +1616,7 @@
 		&:has(:user-invalid) {
 			--palette-source: oklch(0.58 0.21 var(--hue-red));
 
-			:where(.end-text) {
+			:where(.ui-end-text) {
 				color: var(--primary);
 			}
 		}
@@ -1638,7 +1647,7 @@
 }
 
 @layer components.root {
-	label.radio {
+	label.ui-radio {
 		--_input-size: 1.125rem;
 		--_indicator-size: 50%;
 
@@ -1667,7 +1676,7 @@
 
 		/* Required dot */
 		&:has(:invalid) {
-			.label:after {
+			.ui-label:after {
 				color: var(--red);
 				content: "*";
 				inset: 0 -0.25ex auto auto;
@@ -1676,7 +1685,7 @@
 		}
 
 		/* Label */
-		.label {
+		.ui-label {
 			color: var(--text-primary);
 			font-size: var(--font-size-05);
 			grid-column: 2;
@@ -1686,7 +1695,7 @@
 		}
 
 		/* End text */
-		:where(.end-text) {
+		:where(.ui-end-text) {
 			color: var(--text-muted);
 			font-size: var(--font-size-0);
 			grid-column: 2;
@@ -1696,11 +1705,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);
@@ -1712,7 +1721,7 @@
 				}
 			}
 
-			.end-text {
+			.ui-end-text {
 				grid-column: 1/-1;
 				grid-row: 3;
 			}
@@ -1761,14 +1770,14 @@
 		}
 
 		/* Sizes */
-		&.small {
+		&.ui-small {
 			input[type="radio"] {
 				--_input-size: var(--size-3);
 
 			}
 		}
 
-		&.large {
+		&.ui-large {
 			input[type="radio"] {
 				--_input-size: var(--size-4);
 
@@ -1780,7 +1789,7 @@
 		&:has(:user-invalid) {
 			--palette-source: oklch(0.58 0.21 var(--hue-red));
 
-			:where(.end-text) {
+			:where(.ui-end-text) {
 				color: var(--primary);
 			}
 		}
@@ -1811,7 +1820,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
@@ -1820,7 +1829,7 @@
     grid-template-columns: 1fr auto;
     position: relative;
 
-    .label {
+    .ui-label {
       color: var(--text-primary);
       font-size: var(--font-size-05);
       font-weight: 600;
@@ -1830,7 +1839,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;
@@ -1841,7 +1850,7 @@
       text-align: end;
     }
 
-    .start-text {
+    .ui-start-text {
       color: var(--text-muted);
       font-size: var(--font-size-0);
       grid-column: 1/-1;
@@ -1849,7 +1858,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;
@@ -1883,40 +1892,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);
@@ -1935,12 +1944,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;
@@ -1953,15 +1962,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;
       }
 
@@ -1972,20 +1981,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;
         }
 
@@ -1999,7 +2008,7 @@
           grid-row: 4;
         }
 
-        :where(.end-text) {
+        :where(.ui-end-text) {
           grid-row: 5;
           text-align: start;
         }
@@ -2012,9 +2021,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);
       }
     }
@@ -2086,7 +2095,7 @@
           transition: box-shadow 0.1s ease;
         }
 
-        .fieldset-item:focus-within & {
+        .ui-fieldset-item:focus-within & {
           border-color: var(--gray-14);
         }
       }
@@ -2106,14 +2115,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);
       }
 
@@ -2149,7 +2158,7 @@
 }
 
 @layer components.root {
-  :where(.switch) {
+  :where(.ui-switch) {
     --_accent-color: var(--primary);
     --_accent-contrast: var(--primary-contrast);
 
@@ -2258,28 +2267,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;
@@ -2291,18 +2300,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;
@@ -2322,7 +2331,7 @@
     }
 
     /* Label */
-    .label {
+    .ui-label {
       color: var(--text-primary);
       font-size: var(--font-size-05);
       grid-column: 2;
@@ -2334,7 +2343,7 @@
     }
 
     /* End text */
-    :where(.end-text) {
+    :where(.ui-end-text) {
       color: var(--text-muted);
       font-size: var(--font-size-0);
       grid-column: 2;
@@ -2344,21 +2353,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;
@@ -2370,34 +2379,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;
       }
@@ -2410,7 +2419,7 @@
         outline: 2px solid var(--color-9);
       }
 
-      .end-text {
+      .ui-end-text {
         color: var(--color-9);
       }
     }
@@ -2448,7 +2457,7 @@
 		/* > .toast:nth-last-child(n + 6) { display: none; } */
 	}
 
-	:where(.toast) {
+	:where(.ui-toast) {
 		--_anim-enter: 0.3s;
 		--_anim-exit: 0.3s;
 
@@ -2476,11 +2485,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;
@@ -2488,25 +2497,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;
@@ -2523,19 +2532,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>");
 		}
 	}
@@ -2581,60 +2590,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);
@@ -2643,7 +2652,7 @@
     text-transform: uppercase;
   }
 
-  :where(.hgroup) {
+  :where(.ui-hgroup) {
     &>p {
       margin: 0;
     }
@@ -2675,7 +2684,7 @@
   }
 
   /** Caption */
-  :where(.caption) {
+  :where(.ui-caption) {
     color: var(--text-muted);
     font-size: var(--font-size-0);
     line-height: 1.6;
@@ -2684,7 +2693,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;
 
@@ -2693,7 +2702,7 @@
     }
   }
 
-  :where(.abbr, .dfn) {
+  :where(.ui-abbr, .ui-dfn) {
     font-style: normal;
     text-decoration: var(--color-9) underline dotted;
 
@@ -2707,21 +2716,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);
@@ -2732,34 +2741,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);
@@ -2770,12 +2779,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);
@@ -2795,7 +2804,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);
@@ -2824,7 +2833,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;
@@ -2957,7 +2966,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);
@@ -3169,7 +3178,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%;
@@ -3185,14 +3194,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);
@@ -3211,57 +3220,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);
@@ -3269,7 +3278,7 @@
     }
 
     /* Visibility */
-    &.invisible>.anchor-floating>.badge-indicator {
+    &.ui-invisible>.ui-anchor-floating>.ui-badge-indicator {
       opacity: 0;
       pointer-events: none;
     }
@@ -3277,7 +3286,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);
@@ -3292,11 +3301,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;
       }
 
@@ -3307,8 +3316,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);
@@ -3319,26 +3328,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);
 
@@ -3357,7 +3366,7 @@
         }
       }
 
-      :where(.button-group.tonal) & {
+      :where(.ui-button-group.ui-tonal) & {
         --_bg-color: var(--_accent-tonal);
         --_text-color: var(--_accent-tonal-contrast);
 
@@ -3374,13 +3383,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));
         }
@@ -3397,7 +3406,7 @@
       }
     }
 
-    &:not(.vertical) {
+    &:not(.ui-vertical) {
       button {
         &:first-of-type {
           border-end-start-radius: var(--_border-radius);
@@ -3422,7 +3431,7 @@
       }
     }
 
-    &.vertical {
+    &.ui-vertical {
       flex-direction: column;
 
       button {
@@ -3457,7 +3466,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);
@@ -3484,14 +3493,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;
@@ -3499,7 +3508,7 @@
       --_padding-inline: var(--size-3);
     }
 
-    &.tonal {
+    &.ui-tonal {
       --_bg-color: var(--surface-tonal);
       --_margin-inline: 0;
       --_padding-inline: var(--size-3);
@@ -3556,13 +3565,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;
@@ -3573,7 +3582,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);
@@ -3581,18 +3590,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;
@@ -3637,10 +3646,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%);
 
@@ -3658,20 +3667,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);
 
@@ -3690,13 +3699,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 {
@@ -3718,29 +3727,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);
           }
         }
@@ -3748,7 +3757,7 @@ Lists meant to be used stand-alone or as part of Select elements
     }
 
     /* Gutterless */
-    &.gutterless {
+    &.ui-gutterless {
       :where(li, option) {
         padding-inline: 0;
 
@@ -3853,20 +3862,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;
@@ -3879,7 +3888,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 {
@@ -3894,7 +3903,7 @@ Lists meant to be used stand-alone or as part of Select elements
       }
 
       /* Text */
-      .text {
+      .ui-text {
         flex: 1;
         line-height: 1.6;
 
@@ -3910,7 +3919,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;
@@ -3938,7 +3947,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);
@@ -3963,13 +3972,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;
         }
       }
@@ -3978,7 +3987,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;
@@ -4013,7 +4022,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);
     }
@@ -4040,14 +4049,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);
@@ -4091,11 +4100,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;
@@ -4106,18 +4115,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);
@@ -4125,48 +4134,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;
@@ -4185,29 +4194,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;
 
@@ -4221,7 +4230,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);
 
@@ -4231,7 +4240,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;
@@ -4242,20 +4251,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);
@@ -4266,13 +4275,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);
     }
 
@@ -4283,26 +4292,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);
@@ -4312,7 +4321,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;
 
@@ -4327,18 +4336,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);
@@ -4354,11 +4363,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);
       }
     }
@@ -4371,7 +4380,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);
@@ -4387,7 +4396,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);
@@ -4406,7 +4415,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);
@@ -4425,8 +4434,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;
@@ -4434,16 +4443,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;
@@ -4452,30 +4461,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);
       }
@@ -4483,7 +4492,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;
@@ -4518,7 +4527,7 @@ Lists meant to be used stand-alone or as part of Select elements
       }
 
       /* Variants */
-      &.filled {
+      &.ui-filled {
         input {
 
           &::-webkit-file-upload-button,
@@ -4533,7 +4542,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);
 
@@ -4548,7 +4557,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));
       }
@@ -4556,7 +4565,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));
 
@@ -4584,7 +4593,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;
@@ -4612,21 +4621,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;
@@ -4636,7 +4645,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;
@@ -4645,10 +4654,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;
       }
 
@@ -4672,7 +4681,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"]))) {
@@ -4695,7 +4704,7 @@ Lists meant to be used stand-alone or as part of Select elements
         display: none;
       }
 
-      .field {
+      .ui-field {
         cursor: not-allowed;
       }
 
@@ -4707,9 +4716,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;
       }
     }
@@ -4730,31 +4739,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;
@@ -4762,16 +4771,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;
         }
       }
@@ -4780,7 +4789,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;
       }
@@ -4790,23 +4799,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;
@@ -4817,7 +4826,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 */
@@ -4882,7 +4891,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);
@@ -4937,10 +4946,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);
 
@@ -4988,7 +4997,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"],
@@ -5002,7 +5011,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);
       }
@@ -5010,8 +5019,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;
     }
 
@@ -5027,7 +5036,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;
@@ -5039,12 +5048,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);
       }
     }
@@ -5052,7 +5061,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;
@@ -5061,14 +5070,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;
       }
@@ -5077,12 +5086,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);
@@ -5104,15 +5113,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: "";
@@ -5126,7 +5135,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,