opui-css 5.0.1 → 5.1.0

package/css/components/drawer.css

@@ -1,171 +1,171 @@
 @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.
+  :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;
-		}
-	}
+  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,5 +1,4 @@
 @layer components.extended {
-
   /* Form */
   :where(.ui-form) {
     display: grid;
@@ -71,21 +70,21 @@
     /* Error / validation */
     &[data-invalid] {
       :where(.ui-end-text) {
-        color: var(--primary);
+        color: var(--critical);
       }
 
       :where(.ui-checkbox, .ui-radio, .ui-switch) {
-        --palette-source: oklch(0.58 0.21 var(--hue-red));
+        --primary: var(--critical);
 
         :where(.ui-end-text) {
-          color: var(--primary);
+          color: var(--critical);
         }
       }
 
       :where(.ui-switch) {
         input {
           border-radius: var(--radius-round);
-          outline: 2px solid var(--primary);
+          outline: 2px solid var(--critical);
         }
       }
     }
@@ -113,7 +112,9 @@
     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))) {
+    &:has(> :where(.ui-checkbox, .ui-radio, .ui-switch)):not(
+        :has(> :not(.ui-checkbox, .ui-radio, .ui-switch))
+      ) {
       gap: var(--size-2);
     }
 
@@ -129,7 +130,7 @@
       }
     }
 
-    &+& {
+    & + & {
       margin-block-start: var(--size-5);
     }
 

package/css/components/icon-button.css

@@ -8,14 +8,22 @@
     --_accent-contrast: var(--_color-contrast);
     --_accent-tonal: var(--_color-tonal);
     --_accent-tonal-contrast: var(--_color);
-    --_default-hover-bg-color: light-dark(oklch(from var(--_accent) l 0.01 h / 10%),
-        oklch(from var(--_accent) l 0.01 h / 20%));
-    --_default-active-bg-color: light-dark(oklch(from var(--_accent) l 0.06 h / 20%),
-        oklch(from var(--_accent) l 0.06 h / 30%));
-    --_filled-hover-bg-color: light-dark(oklch(from var(--_accent) calc(l + 0.2) c h),
-        oklch(from var(--_accent) calc(l - 0.1) c h));
-    --_filled-active-bg-color: light-dark(oklch(from var(--_accent) calc(l + 0.3) c h),
-        oklch(from var(--_accent) calc(l - 0.15) c h));
+    --_default-hover-bg-color: light-dark(
+      oklch(from var(--_accent) l 0.01 h / 10%),
+      oklch(from var(--_accent) l 0.01 h / 20%)
+    );
+    --_default-active-bg-color: light-dark(
+      oklch(from var(--_accent) l 0.06 h / 20%),
+      oklch(from var(--_accent) l 0.06 h / 30%)
+    );
+    --_filled-hover-bg-color: light-dark(
+      oklch(from var(--_accent) calc(l + 0.2) c h),
+      oklch(from var(--_accent) calc(l - 0.1) c h)
+    );
+    --_filled-active-bg-color: light-dark(
+      oklch(from var(--_accent) calc(l + 0.3) c h),
+      oklch(from var(--_accent) calc(l - 0.15) c h)
+    );
     --_outlined-active-bg-color: var(--_filled-active-bg-color);
 
     --_bg-color: transparent;
@@ -35,8 +43,11 @@
     justify-content: center;
     padding: 0;
     transform-style: preserve-3d;
-    transition: background-color .1s ease, color .1s ease,
-      border-color .1s ease, box-shadow .1s ease;
+    transition:
+      background-color 0.1s ease,
+      color 0.1s ease,
+      border-color 0.1s ease,
+      box-shadow 0.1s ease;
 
     &:where([disabled]) {
       --_text-color: light-dark(rgb(0, 0, 0/0.3), rgb(255, 255, 255/0.26));
@@ -58,7 +69,9 @@
       background-color: transparent;
 
       @media (prefers-reduced-motion: no-preference) {
-        transition: transform 0.2s ease, background-color .1s ease;
+        transition:
+          transform 0.2s ease,
+          background-color 0.1s ease;
       }
     }
 
@@ -94,14 +107,20 @@
     &:where(:not([disabled])) {
       &:where(:not(:active):hover) {
         &::before {
-          background-color: var(--_interaction-hover-color, var(--_default-hover-bg-color));
+          background-color: var(
+            --_interaction-hover-color,
+            var(--_default-hover-bg-color)
+          );
         }
       }
 
       &:where(:hover:active),
       &[aria-current="page"] {
         &::before {
-          background-color: var(--_interaction-active-color, var(--_default-active-bg-color));
+          background-color: var(
+            --_interaction-active-color,
+            var(--_default-active-bg-color)
+          );
         }
       }
     }

package/css/components/list.css

@@ -1,5 +1,4 @@
 @layer components.extended {
-
   /*
 Lists meant to be used stand-alone or as part of Select elements
 
@@ -17,7 +16,6 @@ Lists meant to be used stand-alone or as part of Select elements
     padding: var(--size-2) 0;
 
     @media (pointer: coarse) {
-
       &,
       * {
         user-select: none;
@@ -77,14 +75,14 @@ Lists meant to be used stand-alone or as part of Select elements
           padding: 0;
         }
 
-        &> :where(a, button, label) {
+        & > :where(a, button, label) {
           gap: var(--size-2);
           min-block-size: var(--size-7);
           padding: var(--size-1) var(--size-2);
         }
 
         /* Checkbox / Radio */
-        &>label {
+        & > label {
           .ui-end {
             padding-inline-end: 0.125rem;
           }
@@ -119,7 +117,7 @@ Lists meant to be used stand-alone or as part of Select elements
       :where(li, option) {
         padding-inline: 0;
 
-        &> :where(a, button, label) {
+        & > :where(a, button, label) {
           padding-inline: 0;
         }
       }
@@ -153,9 +151,9 @@ Lists meant to be used stand-alone or as part of Select elements
         min-block-size: auto;
         padding: 0;
 
-        &[aria-selected="true"]> :where(a, button, label),
+        &[aria-selected="true"] > :where(a, button, label),
         &[aria-selected="true"],
-        &:has(> [aria-current="page"])> :where(a, button, label) {
+        &:has(> [aria-current="page"]) > :where(a, button, label) {
           background-color: var(--_bg-color-hover);
         }
       }
@@ -190,9 +188,9 @@ Lists meant to be used stand-alone or as part of Select elements
         }
       }
 
-      &>a,
-      &>button,
-      &>label {
+      & > a,
+      & > button,
+      & > label {
         align-items: center;
         background-color: var(--_bg-color);
         color: inherit;
@@ -219,7 +217,7 @@ Lists meant to be used stand-alone or as part of Select elements
       }
 
       /* Checkbox / Radio / Switch */
-      &>label {
+      & > label {
         &:where(.ui-checkbox, .ui-radio, .ui-switch) {
           display: flex;
         }
@@ -270,7 +268,7 @@ Lists meant to be used stand-alone or as part of Select elements
           font-weight: 400;
         }
 
-        p+p {
+        p + p {
           color: var(--text-muted);
           font-size: var(--font-size-0);
         }

package/css/components/progress.css

@@ -25,7 +25,7 @@
       --_bg-color: var(--surface-tonal);
     }
 
-    &>progress {
+    & > progress {
       appearance: none;
       background: none;
       block-size: 100%;
@@ -42,7 +42,8 @@
         background-color: var(--_accent-color);
 
         @media (prefers-reduced-motion: no-preference) {
-          transition: inline-size 0.2s var(--ease-out-4, cubic-bezier(0, 0, 0.1, 1));
+          transition: inline-size 0.2s
+            var(--ease-out-4, cubic-bezier(0, 0, 0.1, 1));
         }
       }
 
@@ -63,7 +64,7 @@
         will-change: inset-inline-start, inset-inline-end;
       }
 
-      &>progress {
+      & > progress {
         &::-webkit-progress-value {
           background-color: transparent;
         }