opui-css 4.0.1 → 5.0.0

package/css/components/text-field.css

@@ -4,7 +4,7 @@
 - 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);
@@ -20,7 +20,7 @@
     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);
@@ -39,7 +39,7 @@
       }
     }
 
-    :where(.field) :where(input, textarea, select) {
+    :where(.ui-field) :where(input, textarea, select) {
       background: transparent;
       border: 0;
       color: var(--text-primary);
@@ -58,8 +58,8 @@
     }
 
     /* Affixes */
-    .prefix,
-    .suffix {
+    .ui-prefix,
+    .ui-suffix {
       align-items: center;
       color: var(--_label-color);
       display: inline-flex;
@@ -67,16 +67,16 @@
       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;
@@ -85,30 +85,30 @@
       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);
       }
@@ -116,7 +116,7 @@
 
     /* Required/Invalid */
     &:has(:invalid) {
-      .label:after {
+      .ui-label:after {
         color: var(--red);
         content: "*";
         margin: -0.25em auto auto 0.25em;
@@ -151,7 +151,7 @@
       }
 
       /* Variants */
-      &.filled {
+      &.ui-filled {
         input {
 
           &::-webkit-file-upload-button,
@@ -166,7 +166,7 @@
       }
 
       /* Sizes */
-      &.small {
+      &.ui-small {
         input {
           font-size: var(--font-size-05);
 
@@ -181,7 +181,7 @@
 
     /* Autosuggest */
     &:has(input[list]) {
-      .label {
+      .ui-label {
         /* Make sure chevron is visible */
         inline-size: calc(100% - var(--size-6));
       }
@@ -189,7 +189,7 @@
 
     /* Select */
     &:has(select) {
-      .label {
+      .ui-label {
         /* Make sure chevron is visible */
         inline-size: calc(100% - var(--size-6));
 
@@ -217,7 +217,7 @@
 
     /* Input - color */
     &:has(input[type="color"]) {
-      .field {
+      .ui-field {
         block-size: var(--_height);
         inline-size: var(--_height);
         min-block-size: 0;
@@ -245,21 +245,21 @@
     /* 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;
@@ -269,7 +269,7 @@
     }
 
     /* End text */
-    :where(.end-text) {
+    :where(.ui-end-text) {
       color: var(--_end-text-color);
       font-size: var(--font-size-0);
       grid-column: 1/-1;
@@ -278,10 +278,10 @@
     }
 
     /* Auto-fit */
-    &.auto-fit {
+    &.ui-auto-fit {
       inline-size: auto;
 
-      .field {
+      .ui-field {
         inline-size: auto;
       }
 
@@ -305,7 +305,7 @@
     /*
   * Variant: Filled
   */
-    &.filled {
+    &.ui-filled {
       --_bg-color: var(--surface-tonal);
 
       &:not(:has([disabled], :has(input[type="color"]))) {
@@ -328,7 +328,7 @@
         display: none;
       }
 
-      .field {
+      .ui-field {
         cursor: not-allowed;
       }
 
@@ -340,9 +340,9 @@
         }
       }
 
-      .label,
-      .start-text,
-      .end-text {
+      .ui-label,
+      .ui-start-text,
+      .ui-end-text {
         cursor: not-allowed;
       }
     }
@@ -363,31 +363,31 @@
     }
 
     /* 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;
@@ -395,16 +395,16 @@
         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;
         }
       }
@@ -413,7 +413,7 @@
         min-inline-size: 30ch;
       }
 
-      :where(.end-text) {
+      :where(.ui-end-text) {
         grid-column: 2;
         text-align: end;
       }
@@ -423,23 +423,23 @@
         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;

package/css/components/text-input.css

@@ -1,6 +1,6 @@
 @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"],
@@ -14,7 +14,7 @@
         input[type="week"]))) {
 
     /* Sizes */
-    &.small {
+    &.ui-small {
       input {
         padding-inline: var(--size-2);
       }
@@ -22,8 +22,8 @@
   }
 
   /* Autosuggest */
-  :where(.text-field:has(input[list])) {
-    .field {
+  :where(.ui-text-field:has(input[list])) {
+    .ui-field {
       position: relative;
     }
 
@@ -39,7 +39,7 @@
       padding-inline-end: var(--size-8);
     }
 
-    .field::after {
+    .ui-field::after {
       block-size: 0;
       border-block-start: 5px solid;
       border-inline: 5px solid transparent;
@@ -51,12 +51,12 @@
       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);
       }
     }

package/css/components/textarea.css

@@ -1,5 +1,5 @@
 @layer components.extended {
-  :where(.textarea) {
+  :where(.ui-textarea) {
     textarea {
       block-size: auto;
       field-sizing: content;
@@ -8,14 +8,14 @@
     }
 
     /* Size */
-    &.small {
+    &.ui-small {
       textarea {
         min-block-size: var(--size-9);
       }
     }
 
     /* Auto-fit */
-    &.auto-fit {
+    &.ui-auto-fit {
       textarea {
         resize: both;
       }

package/css/components/toast.css

@@ -29,7 +29,7 @@
 		/* > .toast:nth-last-child(n + 6) { display: none; } */
 	}
 
-	:where(.toast) {
+	:where(.ui-toast) {
 		--_anim-enter: 0.3s;
 		--_anim-exit: 0.3s;
 
@@ -57,11 +57,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;
@@ -69,25 +69,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;
@@ -104,19 +104,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>");
 		}
 	}

package/css/components/toggle-button.css

@@ -2,7 +2,7 @@
 * Somehow handle when a group gets too wide for its container. Should it be handled?
 */
 @layer components.root {
-	:where(.toggle-button) {
+	:where(.ui-toggle-button) {
 		--_button-bg-color: transparent;
 		--_size: var(--field-size);
 		--_svg-size: var(--size-4);
@@ -27,7 +27,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;
@@ -38,7 +38,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));
 			}
 		}
@@ -51,7 +51,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;
@@ -76,11 +76,11 @@
 		}
 
 		/* Sizes */
-		&.small {
+		&.ui-small {
 			--_size: var(--field-size-small);
 		}
 
-		&.x-small {
+		&.ui-x-small {
 			--_size: var(--field-size-x-small);
 		}
 	}

package/css/components/toggle-group.css

@@ -1,5 +1,5 @@
 @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);
@@ -12,27 +12,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 {
@@ -41,10 +41,10 @@
       }
     }
 
-    &.vertical {
+    &.ui-vertical {
       flex-direction: column;
 
-      .toggle-button {
+      .ui-toggle-button {
         border-block-end: 1px solid var(--_border-color);
 
         &:last-of-type {

package/css/components/tooltip.css

@@ -1,10 +1,10 @@
 @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);
@@ -26,15 +26,15 @@
 		/* 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: "";
@@ -48,7 +48,7 @@
 		}
 
 		/* Fade */
-		&>.anchor-floating[popover] {
+		&>.ui-anchor-floating[popover] {
 			opacity: 0;
 			transition:
 				display 0.15s allow-discrete,