opui-css 4.1.0 → 5.0.1

package/css/components/drawer.css

@@ -1,171 +1,171 @@
-@layer components.root {
-	:where(dialog.drawer) {
-		--_backdrop-bg-color: transparent;
-		--_backdrop-blur: blur(2px);
-		--_bg-color: var(--surface-default);
-		--_block-size: min(80vb, 650px);
-		--_border-color: var(--border-color);
-		--_border-width: var(--border-width);
-		--_color: var(--text-primary);
-		--_content-padding: var(--size-4);
-		--_footer-gap: var(--size-3);
-		--_footer-padding: var(--size-3);
-		--_header-font-size: var(--font-size-3);
-		--_header-padding: var(--size-3);
-		--_inline-size: min(375px, 100vi);
-		--_shadow: var(--shadow-2);
-		--_transition-duration: 0.2s;
-		--_transition-timing: var(--ease-out-3);
-
-		background-color: var(--_bg-color);
-		border: none;
-		box-shadow: var(--_shadow);
-		color: var(--_color);
-		display: flex;
-		flex-direction: column;
-		margin: 0;
-		max-inline-size: 100%;
-		padding: 0;
-		position: fixed;
-		transition:
-			display var(--_transition-duration) allow-discrete,
-			overlay var(--_transition-duration) allow-discrete,
-			translate var(--_transition-duration) var(--_transition-timing);
-		z-index: 1000;
-
-		&::backdrop {
-			backdrop-filter: var(--_backdrop-blur);
-			background-color: var(--_backdrop-bg-color);
-			opacity: 0;
-			transition:
-				display var(--_transition-duration) allow-discrete,
-				overlay var(--_transition-duration) allow-discrete,
-				opacity var(--_transition-duration) var(--_transition-timing);
-		}
-
-		&.backdrop-transparent {
-			--_backdrop-blur: none;
-		}
-
-		.header {
-			align-items: center;
-			border-block-end: var(--_border-width) solid var(--_border-color);
-			display: flex;
-			padding: var(--_header-padding);
-
-			:where(h1, h2, h3, h4, h5, h6) {
-				font-size: var(--_header-font-size);
-				margin: 0;
-			}
-
-			:where(.icon-button) {
-				margin-inline-start: auto;
-			}
-		}
-
-		.content {
-			flex: 1;
-			overflow-y: auto;
-			padding: var(--_content-padding);
-		}
-
-		.footer {
-			border-block-start: var(--_border-width) solid var(--_border-color);
-			display: flex;
-			gap: var(--_footer-gap);
-			justify-content: end;
-			padding: var(--_footer-padding);
-		}
-
-		&.inline-start,
-		&.inline-end {
-			block-size: 100dvb;
-			inline-size: var(--_inline-size);
-			inset-block: 0;
-			max-block-size: 100%;
-		}
-
-		&.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 {
-			border-inline-start: var(--_border-width) solid var(--_border-color);
-			inset-inline-end: 0;
-			inset-inline-start: auto;
-			translate: 100% 0;
-
-			.footer {
-				justify-content: start;
-			}
-		}
-
-		&.block-start,
-		&.block-end {
-			block-size: var(--_block-size);
-			inline-size: 100dvi;
-			inset-inline: 0;
-			max-block-size: 80dvb;
-		}
-
-		&.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 {
-			border-block-start: var(--_border-width) solid var(--_border-color);
-			inset-block-end: 0;
-			inset-block-start: auto;
-			translate: 0 100%;
-		}
-
-		&[open] {
-			translate: 0 0;
-
-			&::backdrop {
-				opacity: 1;
-			}
-
-			@starting-style {
-				&::backdrop {
-					opacity: 0;
-				}
-
-				&.inline-start {
-					translate: -100% 0;
-				}
-
-				&.inline-end {
-					translate: 100% 0;
-				}
-
-				&.block-start {
-					translate: 0 -100%;
-				}
-
-				&.block-end {
-					translate: 0 100%;
-				}
-			}
-		}
-	}
-
-	/* Scroll-lock is provided by the shared `.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) {
-		overflow: unset;
-		overscroll-behavior: auto;
-
-		@media (width < 500px) {
-			overflow: clip;
-			overscroll-behavior: contain;
-		}
-	}
-}
+@layer components.root {
+	:where(dialog.ui-drawer) {
+		--_backdrop-bg-color: transparent;
+		--_backdrop-blur: blur(2px);
+		--_bg-color: var(--surface-default);
+		--_block-size: min(80vb, 650px);
+		--_border-color: var(--border-color);
+		--_border-width: var(--border-width);
+		--_color: var(--text-primary);
+		--_content-padding: var(--size-4);
+		--_footer-gap: var(--size-3);
+		--_footer-padding: var(--size-3);
+		--_header-font-size: var(--font-size-3);
+		--_header-padding: var(--size-3);
+		--_inline-size: min(375px, 100vi);
+		--_shadow: var(--shadow-2);
+		--_transition-duration: 0.2s;
+		--_transition-timing: var(--ease-out-3);
+
+		background-color: var(--_bg-color);
+		border: none;
+		box-shadow: var(--_shadow);
+		color: var(--_color);
+		display: flex;
+		flex-direction: column;
+		margin: 0;
+		max-inline-size: 100%;
+		padding: 0;
+		position: fixed;
+		transition:
+			display var(--_transition-duration) allow-discrete,
+			overlay var(--_transition-duration) allow-discrete,
+			translate var(--_transition-duration) var(--_transition-timing);
+		z-index: 1000;
+
+		&::backdrop {
+			backdrop-filter: var(--_backdrop-blur);
+			background-color: var(--_backdrop-bg-color);
+			opacity: 0;
+			transition:
+				display var(--_transition-duration) allow-discrete,
+				overlay var(--_transition-duration) allow-discrete,
+				opacity var(--_transition-duration) var(--_transition-timing);
+		}
+
+		&.ui-backdrop-transparent {
+			--_backdrop-blur: none;
+		}
+
+		.ui-header {
+			align-items: center;
+			border-block-end: var(--_border-width) solid var(--_border-color);
+			display: flex;
+			padding: var(--_header-padding);
+
+			:where(h1, h2, h3, h4, h5, h6) {
+				font-size: var(--_header-font-size);
+				margin: 0;
+			}
+
+			:where(.ui-icon-button) {
+				margin-inline-start: auto;
+			}
+		}
+
+		.ui-content {
+			flex: 1;
+			overflow-y: auto;
+			padding: var(--_content-padding);
+		}
+
+		.ui-footer {
+			border-block-start: var(--_border-width) solid var(--_border-color);
+			display: flex;
+			gap: var(--_footer-gap);
+			justify-content: end;
+			padding: var(--_footer-padding);
+		}
+
+		&.ui-inline-start,
+		&.ui-inline-end {
+			block-size: 100dvb;
+			inline-size: var(--_inline-size);
+			inset-block: 0;
+			max-block-size: 100%;
+		}
+
+		&.ui-inline-start {
+			border-inline-end: var(--_border-width) solid var(--_border-color);
+			inset-inline-end: auto;
+			inset-inline-start: 0;
+			translate: -100% 0;
+		}
+
+		&.ui-inline-end {
+			border-inline-start: var(--_border-width) solid var(--_border-color);
+			inset-inline-end: 0;
+			inset-inline-start: auto;
+			translate: 100% 0;
+
+			.ui-footer {
+				justify-content: start;
+			}
+		}
+
+		&.ui-block-start,
+		&.ui-block-end {
+			block-size: var(--_block-size);
+			inline-size: 100dvi;
+			inset-inline: 0;
+			max-block-size: 80dvb;
+		}
+
+		&.ui-block-start {
+			border-block-end: var(--_border-width) solid var(--_border-color);
+			inset-block-end: auto;
+			inset-block-start: 0;
+			translate: 0 -100%;
+		}
+
+		&.ui-block-end {
+			border-block-start: var(--_border-width) solid var(--_border-color);
+			inset-block-end: 0;
+			inset-block-start: auto;
+			translate: 0 100%;
+		}
+
+		&[open] {
+			translate: 0 0;
+
+			&::backdrop {
+				opacity: 1;
+			}
+
+			@starting-style {
+				&::backdrop {
+					opacity: 0;
+				}
+
+				&.ui-inline-start {
+					translate: -100% 0;
+				}
+
+				&.ui-inline-end {
+					translate: 100% 0;
+				}
+
+				&.ui-block-start {
+					translate: 0 -100%;
+				}
+
+				&.ui-block-end {
+					translate: 0 100%;
+				}
+			}
+		}
+	}
+
+	/* 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.ui-drawer.ui-scroll-lock[open].ui-backdrop-transparent) {
+		overflow: unset;
+		overscroll-behavior: auto;
+
+		@media (width < 500px) {
+			overflow: clip;
+			overscroll-behavior: contain;
+		}
+	}
+}

package/css/components/form.css

@@ -1,146 +1,146 @@
-@layer components.extended {
-
-  /* Form */
-  :where(.form) {
-    display: grid;
-    gap: var(--size-8);
-
-    hr {
-      margin-block: 0;
-    }
-  }
-
-  /* Fieldset */
-  :where(.fieldset) {
-    all: unset;
-    border: 0;
-    border-radius: 0;
-    display: grid;
-    gap: var(--size-1);
-    margin: 0;
-    min-inline-size: 0;
-    padding: 0;
-
-    /* Legend */
-    :where(legend, .legend) {
-      all: unset;
-      color: var(--text-primary);
-      font-weight: 600;
-      margin-block-end: var(--size-3);
-      padding: 0;
-
-      &:has(+ :where(.field-description)) {
-        margin-block-end: 0;
-      }
-    }
-
-    /* Field description / supporting text */
-    :where(.field-description) {
-      color: var(--text-muted);
-      font-size: var(--font-size-05);
-      line-height: var(--font-lineheight-3);
-
-      &:has(+ *) {
-        margin-block-end: var(--size-3);
-      }
-    }
-
-    /* End text */
-    :where(.end-text) {
-      color: var(--text-muted);
-      font-size: var(--font-size-0);
-      line-height: var(--font-lineheight-3);
-    }
-
-    &:has(.text-field.row) {
-      row-gap: var(--size-7);
-    }
-
-    /* Disabled */
-    &[disabled] {
-      opacity: 0.64;
-      user-select: none;
-
-      input,
-      label,
-      .label {
-        cursor: not-allowed;
-      }
-    }
-
-    /* Error / validation */
-    &[data-invalid] {
-      :where(.end-text) {
-        color: var(--primary);
-      }
-
-      :where(.checkbox, .radio, .switch) {
-        --palette-source: oklch(0.58 0.21 var(--hue-red));
-
-        :where(.end-text) {
-          color: var(--primary);
-        }
-      }
-
-      :where(.switch) {
-        input {
-          border-radius: var(--radius-round);
-          outline: 2px solid var(--primary);
-        }
-      }
-    }
-
-    /* Required */
-    &:has(:invalid) {
-      :where(legend, .legend) {
-        padding-inline-end: 1ex;
-        position: relative;
-
-        &::after {
-          color: var(--red);
-          content: "*";
-          inset: 0 -0.25ex auto auto;
-          position: absolute;
-        }
-      }
-    }
-  }
-
-  /* Field group */
-  :where(.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))) {
-      gap: var(--size-2);
-    }
-
-    /* If it only has buttons */
-    &:has(.button):not(:has(*:not(.button))) {
-      align-items: center;
-      flex-direction: row;
-      gap: var(--size-2);
-
-      /* If it's not preceeded by an hr */
-      &:not(hr + &) {
-        margin-block-start: var(--size-4);
-      }
-    }
-
-    &+& {
-      margin-block-start: var(--size-5);
-    }
-
-    /* Directions */
-    &.row {
-      flex-direction: row;
-      flex-wrap: wrap;
-
-      &:has(> :where(.checkbox, .radio, .switch)) {
-        gap: var(--size-4);
-      }
-    }
-  }
-}
+@layer components.extended {
+
+  /* Form */
+  :where(.ui-form) {
+    display: grid;
+    gap: var(--size-8);
+
+    hr {
+      margin-block: 0;
+    }
+  }
+
+  /* Fieldset */
+  :where(.ui-fieldset) {
+    all: unset;
+    border: 0;
+    border-radius: 0;
+    display: grid;
+    gap: var(--size-1);
+    margin: 0;
+    min-inline-size: 0;
+    padding: 0;
+
+    /* Legend */
+    :where(legend, .ui-legend) {
+      all: unset;
+      color: var(--text-primary);
+      font-weight: 600;
+      margin-block-end: var(--size-3);
+      padding: 0;
+
+      &:has(+ :where(.ui-field-description)) {
+        margin-block-end: 0;
+      }
+    }
+
+    /* Field description / supporting text */
+    :where(.ui-field-description) {
+      color: var(--text-muted);
+      font-size: var(--font-size-05);
+      line-height: var(--font-lineheight-3);
+
+      &:has(+ *) {
+        margin-block-end: var(--size-3);
+      }
+    }
+
+    /* End text */
+    :where(.ui-end-text) {
+      color: var(--text-muted);
+      font-size: var(--font-size-0);
+      line-height: var(--font-lineheight-3);
+    }
+
+    &:has(.ui-text-field.ui-row) {
+      row-gap: var(--size-7);
+    }
+
+    /* Disabled */
+    &[disabled] {
+      opacity: 0.64;
+      user-select: none;
+
+      input,
+      label,
+      .ui-label {
+        cursor: not-allowed;
+      }
+    }
+
+    /* Error / validation */
+    &[data-invalid] {
+      :where(.ui-end-text) {
+        color: var(--primary);
+      }
+
+      :where(.ui-checkbox, .ui-radio, .ui-switch) {
+        --palette-source: oklch(0.58 0.21 var(--hue-red));
+
+        :where(.ui-end-text) {
+          color: var(--primary);
+        }
+      }
+
+      :where(.ui-switch) {
+        input {
+          border-radius: var(--radius-round);
+          outline: 2px solid var(--primary);
+        }
+      }
+    }
+
+    /* Required */
+    &:has(:invalid) {
+      :where(legend, .ui-legend) {
+        padding-inline-end: 1ex;
+        position: relative;
+
+        &::after {
+          color: var(--red);
+          content: "*";
+          inset: 0 -0.25ex auto auto;
+          position: absolute;
+        }
+      }
+    }
+  }
+
+  /* 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(.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(.ui-button):not(:has(*:not(.ui-button))) {
+      align-items: center;
+      flex-direction: row;
+      gap: var(--size-2);
+
+      /* If it's not preceeded by an hr */
+      &:not(hr + &) {
+        margin-block-start: var(--size-4);
+      }
+    }
+
+    &+& {
+      margin-block-start: var(--size-5);
+    }
+
+    /* Directions */
+    &.ui-row {
+      flex-direction: row;
+      flex-wrap: wrap;
+
+      &:has(> :where(.ui-checkbox, .ui-radio, .ui-switch)) {
+        gap: var(--size-4);
+      }
+    }
+  }
+}