opui-css 4.1.0 → 5.0.1

package/css/components/card.css

@@ -1,117 +1,117 @@
-@layer components.root {
-  :where(.card) {
-    --_bg-tonal: var(--surface-tonal);
-    --_bg-elevated: var(--surface-elevated);
-    --_bg-surface: var(--surface-default);
-    --_border-color: var(--border-color);
-    --_card-bg-color: var(--_bg-surface);
-    --_card-border-color: transparent;
-    --_card-border-width: 0;
-
-    --_card-shadow: none;
-    --_shadow-light: var(--shadow-3);
-    --_shadow-dark: var(--shadow-4);
-    --_shadow-elevated: var(--_shadow-light);
-
-    @container style(--color-scheme: dark) {
-      --_shadow-elevated: var(--_shadow-dark);
-    }
-
-    background-color: var(--_card-bg-color);
-    border-color: var(--_card-border-color);
-    border-radius: var(--border-radius);
-    border-style: solid;
-    border-width: var(--_card-border-width);
-    box-shadow: var(--_card-shadow);
-    display: flex;
-    flex-direction: column;
-    gap: var(--size-3);
-    overflow: hidden;
-    padding-inline: 0;
-    position: relative;
-
-    /* Variants */
-    &.text {
-      --_card-bg-color: transparent;
-      --_card-border-color: transparent;
-      --_card-border-width: 0;
-      --_card-shadow: none;
-    }
-
-    &.tonal {
-      --_card-bg-color: var(--_bg-tonal);
-      --_card-border-width: 1px;
-    }
-
-    &.elevated {
-      --_card-bg-color: var(--_bg-elevated);
-      --_card-shadow: var(--_shadow-elevated);
-    }
-
-    &.outlined {
-      --_card-bg-color: var(--_bg-surface);
-      --_card-border-color: var(--_border-color);
-      --_card-border-width: 1px;
-    }
-
-    &> :where(hgroup, .content) {
-      padding-inline: var(--size-3);
-
-      &:last-child {
-        padding-block-end: var(--size-3);
-      }
-    }
-
-    /* Header */
-    &>hgroup {
-      padding-block: var(--size-3) 0;
-
-      /* Top paragraph */
-      &>p:first-of-type:first-child {
-        line-height: 1.3;
-      }
-
-      :where(h1, h2, h3, h4, h5, h6):last-child {
-        margin-block-end: 0;
-      }
-
-      /* Bottom paragraph */
-      &>p:last-of-type:last-child:not(:first-child) {
-        font-size: var(--font-size-1);
-      }
-    }
-
-    /* Content */
-    &>.content:where(:only-child, :first-child) {
-      padding-block: var(--size-3) var(--size-4);
-    }
-
-    /* Actions */
-    &>.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"]) {
-        padding-inline: var(--size-1) var(--size-3);
-      }
-
-      &:has(.button:not([class="button"])) {
-        padding-block-end: var(--size-2);
-      }
-
-      /* Alignment */
-      &.align-end {
-        justify-content: end;
-
-        &:has(.button:first-child[class="button"]) {
-          padding-inline: var(--size-3) var(--size-1);
-        }
-      }
-    }
-
-
-  }
-}
+@layer components.root {
+  :where(.ui-card) {
+    --_bg-tonal: var(--surface-tonal);
+    --_bg-elevated: var(--surface-elevated);
+    --_bg-surface: var(--surface-default);
+    --_border-color: var(--border-color);
+    --_card-bg-color: var(--_bg-surface);
+    --_card-border-color: transparent;
+    --_card-border-width: 0;
+
+    --_card-shadow: none;
+    --_shadow-light: var(--shadow-3);
+    --_shadow-dark: var(--shadow-4);
+    --_shadow-elevated: var(--_shadow-light);
+
+    @container style(--color-scheme: dark) {
+      --_shadow-elevated: var(--_shadow-dark);
+    }
+
+    background-color: var(--_card-bg-color);
+    border-color: var(--_card-border-color);
+    border-radius: var(--border-radius);
+    border-style: solid;
+    border-width: var(--_card-border-width);
+    box-shadow: var(--_card-shadow);
+    display: flex;
+    flex-direction: column;
+    gap: var(--size-3);
+    overflow: hidden;
+    padding-inline: 0;
+    position: relative;
+
+    /* Variants */
+    &.ui-text {
+      --_card-bg-color: transparent;
+      --_card-border-color: transparent;
+      --_card-border-width: 0;
+      --_card-shadow: none;
+    }
+
+    &.ui-tonal {
+      --_card-bg-color: var(--_bg-tonal);
+      --_card-border-width: 1px;
+    }
+
+    &.ui-elevated {
+      --_card-bg-color: var(--_bg-elevated);
+      --_card-shadow: var(--_shadow-elevated);
+    }
+
+    &.ui-outlined {
+      --_card-bg-color: var(--_bg-surface);
+      --_card-border-color: var(--_border-color);
+      --_card-border-width: 1px;
+    }
+
+    &> :where(hgroup, .ui-content) {
+      padding-inline: var(--size-3);
+
+      &:last-child {
+        padding-block-end: var(--size-3);
+      }
+    }
+
+    /* Header */
+    &>hgroup {
+      padding-block: var(--size-3) 0;
+
+      /* Top paragraph */
+      &>p:first-of-type:first-child {
+        line-height: 1.3;
+      }
+
+      :where(h1, h2, h3, h4, h5, h6):last-child {
+        margin-block-end: 0;
+      }
+
+      /* Bottom paragraph */
+      &>p:last-of-type:last-child:not(:first-child) {
+        font-size: var(--font-size-1);
+      }
+    }
+
+    /* Content */
+    &>.ui-content:where(:only-child, :first-child) {
+      padding-block: var(--size-3) var(--size-4);
+    }
+
+    /* 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(.ui-button:first-child[class="ui-button"]) {
+        padding-inline: var(--size-1) var(--size-3);
+      }
+
+      &:has(.ui-button:not([class="ui-button"])) {
+        padding-block-end: var(--size-2);
+      }
+
+      /* Alignment */
+      &.ui-align-end {
+        justify-content: end;
+
+        &:has(.ui-button:first-child[class="ui-button"]) {
+          padding-inline: var(--size-3) var(--size-1);
+        }
+      }
+    }
+
+
+  }
+}

package/css/components/checkbox.css

@@ -1,205 +1,205 @@
-@layer components.root {
-	label.checkbox {
-		--_input-size: var(--size-4);
-
-		align-items: center;
-		color: var(--text-primary);
-		cursor: pointer;
-		display: inline-grid;
-		gap: 0 var(--size-2);
-		grid-auto-columns: auto;
-		grid-auto-flow: column;
-		inline-size: fit-content;
-		line-height: 1.5;
-		transform: translateZ(0);
-		user-select: none;
-
-		/* Disabled */
-		&:has([disabled]) {
-			cursor: not-allowed;
-			opacity: 0.64;
-			user-select: none;
-
-			input {
-				cursor: not-allowed;
-			}
-		}
-
-		/* Required dot */
-		&:has(:invalid) {
-			.label:after {
-				color: var(--red);
-				content: "*";
-				inset: 0 -0.25ex auto auto;
-				position: absolute;
-			}
-		}
-
-		/* Label */
-		.label {
-			color: var(--text-primary);
-			font-size: var(--font-size-05);
-			grid-column: 2;
-			grid-row: 1;
-			position: relative;
-			padding-inline: 0 1ex;
-		}
-
-		/* End text */
-		:where(.end-text) {
-			color: var(--text-muted);
-			font-size: var(--font-size-0);
-			grid-column: 2;
-			grid-row: 2;
-			line-height: 1.5;
-			z-index: 1;
-		}
-
-		/* Spread layout */
-		&.spread {
-			align-items: center;
-			column-gap: var(--size-4);
-			grid-auto-flow: unset;
-			grid-template-columns: 1fr auto;
-			inline-size: 100%;
-
-			.label {
-				font-weight: 600;
-				grid-column: 1;
-				grid-row: 1;
-				inline-size: fit-content;
-			}
-
-			input {
-				grid-column: 2;
-				grid-row: 1;
-			}
-
-			:where(.end-text) {
-				grid-column: 1;
-				grid-row: 2;
-			}
-		}
-
-		/* Stacked layout */
-		&.stack {
-			justify-items: center;
-			grid-auto-columns: unset;
-
-			.label {
-				grid-column: 1/-1;
-				grid-row: 2;
-				margin-block-start: var(--size-1);
-				padding-inline: 1ex;
-
-				/* Required dot */
-				&::after {
-					inset: 0 -0.25ex auto auto;
-				}
-			}
-
-			.end-text {
-				grid-column: 1/-1;
-				grid-row: 3;
-			}
-		}
-
-		/* Input */
-		input[type="checkbox"] {
-			--_input-size: var(--size-4);
-
-			appearance: none;
-			aspect-ratio: 1;
-			background-color: var(--surface-default);
-			block-size: var(--_input-size);
-			border-radius: var(--radius-1);
-			border: 1px solid var(--border-color);
-			box-sizing: border-box;
-			cursor: pointer;
-			display: grid;
-			font-size: var(--_input-size);
-			inline-size: var(--_input-size);
-			margin: 0;
-			padding: 0;
-			place-items: center;
-			position: relative;
-
-			&:checked,
-			&:indeterminate {
-				background-color: var(--primary);
-				border-color: var(--primary);
-			}
-
-
-			/* Checkmark */
-			&::after {
-				background-color: var(--primary-contrast);
-				clip-path: polygon(15% 52%, 40% 77%, 85% 32%, 75% 22%, 40% 57%, 25% 42%);
-				content: "";
-				inset: 0;
-				opacity: 0;
-				position: absolute;
-			}
-
-			&:checked::after,
-			&:indeterminate::after {
-				opacity: 1;
-			}
-
-			/* Indeterminate dash */
-			&:indeterminate::after {
-				clip-path: polygon(20% 45%, 80% 45%, 80% 55%, 20% 55%);
-			}
-
-			&::before {
-				--highlight-size: 175%;
-			}
-		}
-
-		/* Sizes */
-		&.small {
-			input[type="checkbox"] {
-				--_input-size: var(--size-3);
-			}
-		}
-
-		&.large {
-			input[type="checkbox"] {
-				--_input-size: var(--size-5);
-			}
-		}
-
-		/* Validation */
-		&[data-invalid],
-		&:has(:user-invalid) {
-			--palette-source: oklch(0.58 0.21 var(--hue-red));
-
-			:where(.end-text) {
-				color: var(--primary);
-			}
-		}
-
-		/* Touch devices */
-		@media (pointer: coarse) {
-			input {
-				--_input-size: var(--size-4);
-			}
-		}
-
-		@media (forced-colors: active) {
-			input {
-				border: 1px solid CanvasText;
-
-				&:checked,
-				&:indeterminate {
-					background-color: SelectedItem;
-					border-color: SelectedItem;
-
-					&::after {
-						background-color: SelectedItemText;
-					}
-				}
-			}
-		}
-	}
-}
+@layer components.root {
+	label.ui-checkbox {
+		--_input-size: var(--size-4);
+
+		align-items: center;
+		color: var(--text-primary);
+		cursor: pointer;
+		display: inline-grid;
+		gap: 0 var(--size-2);
+		grid-auto-columns: auto;
+		grid-auto-flow: column;
+		inline-size: fit-content;
+		line-height: 1.5;
+		transform: translateZ(0);
+		user-select: none;
+
+		/* Disabled */
+		&:has([disabled]) {
+			cursor: not-allowed;
+			opacity: 0.64;
+			user-select: none;
+
+			input {
+				cursor: not-allowed;
+			}
+		}
+
+		/* Required dot */
+		&:has(:invalid) {
+			.ui-label:after {
+				color: var(--red);
+				content: "*";
+				inset: 0 -0.25ex auto auto;
+				position: absolute;
+			}
+		}
+
+		/* Label */
+		.ui-label {
+			color: var(--text-primary);
+			font-size: var(--font-size-05);
+			grid-column: 2;
+			grid-row: 1;
+			position: relative;
+			padding-inline: 0 1ex;
+		}
+
+		/* End text */
+		:where(.ui-end-text) {
+			color: var(--text-muted);
+			font-size: var(--font-size-0);
+			grid-column: 2;
+			grid-row: 2;
+			line-height: 1.5;
+			z-index: 1;
+		}
+
+		/* Spread layout */
+		&.ui-spread {
+			align-items: center;
+			column-gap: var(--size-4);
+			grid-auto-flow: unset;
+			grid-template-columns: 1fr auto;
+			inline-size: 100%;
+
+			.ui-label {
+				font-weight: 600;
+				grid-column: 1;
+				grid-row: 1;
+				inline-size: fit-content;
+			}
+
+			input {
+				grid-column: 2;
+				grid-row: 1;
+			}
+
+			:where(.ui-end-text) {
+				grid-column: 1;
+				grid-row: 2;
+			}
+		}
+
+		/* Stacked layout */
+		&.ui-stack {
+			justify-items: center;
+			grid-auto-columns: unset;
+
+			.ui-label {
+				grid-column: 1/-1;
+				grid-row: 2;
+				margin-block-start: var(--size-1);
+				padding-inline: 1ex;
+
+				/* Required dot */
+				&::after {
+					inset: 0 -0.25ex auto auto;
+				}
+			}
+
+			.ui-end-text {
+				grid-column: 1/-1;
+				grid-row: 3;
+			}
+		}
+
+		/* Input */
+		input[type="checkbox"] {
+			--_input-size: var(--size-4);
+
+			appearance: none;
+			aspect-ratio: 1;
+			background-color: var(--surface-default);
+			block-size: var(--_input-size);
+			border-radius: var(--radius-1);
+			border: 1px solid var(--border-color);
+			box-sizing: border-box;
+			cursor: pointer;
+			display: grid;
+			font-size: var(--_input-size);
+			inline-size: var(--_input-size);
+			margin: 0;
+			padding: 0;
+			place-items: center;
+			position: relative;
+
+			&:checked,
+			&:indeterminate {
+				background-color: var(--primary);
+				border-color: var(--primary);
+			}
+
+
+			/* Checkmark */
+			&::after {
+				background-color: var(--primary-contrast);
+				clip-path: polygon(15% 52%, 40% 77%, 85% 32%, 75% 22%, 40% 57%, 25% 42%);
+				content: "";
+				inset: 0;
+				opacity: 0;
+				position: absolute;
+			}
+
+			&:checked::after,
+			&:indeterminate::after {
+				opacity: 1;
+			}
+
+			/* Indeterminate dash */
+			&:indeterminate::after {
+				clip-path: polygon(20% 45%, 80% 45%, 80% 55%, 20% 55%);
+			}
+
+			&::before {
+				--highlight-size: 175%;
+			}
+		}
+
+		/* Sizes */
+		&.ui-small {
+			input[type="checkbox"] {
+				--_input-size: var(--size-3);
+			}
+		}
+
+		&.ui-large {
+			input[type="checkbox"] {
+				--_input-size: var(--size-5);
+			}
+		}
+
+		/* Validation */
+		&[data-invalid],
+		&:has(:user-invalid) {
+			--palette-source: oklch(0.58 0.21 var(--hue-red));
+
+			:where(.ui-end-text) {
+				color: var(--primary);
+			}
+		}
+
+		/* Touch devices */
+		@media (pointer: coarse) {
+			input {
+				--_input-size: var(--size-4);
+			}
+		}
+
+		@media (forced-colors: active) {
+			input {
+				border: 1px solid CanvasText;
+
+				&:checked,
+				&:indeterminate {
+					background-color: SelectedItem;
+					border-color: SelectedItem;
+
+					&::after {
+						background-color: SelectedItemText;
+					}
+				}
+			}
+		}
+	}
+}