opui-css 5.0.0 → 5.1.0

package/css/components/description-list.css

@@ -1,80 +1,81 @@
-@layer components.root {
-  :where(.ui-description-list) {
-    --_border-style: solid;
-    --_border-width: 1px;
-
-    display: grid;
-    gap: var(--size-3);
-    margin: 0;
-    padding: 0;
-
-    &.ui-dotted {
-      --_border-style: dotted;
-      --_border-width: 2px;
-    }
-
-    .ui-item {
-      display: grid;
-      margin: 0;
-      padding: 0;
-
-      dt,
-      .ui-term {
-        display: block;
-        font-weight: 700;
-        overflow: hidden;
-        position: relative;
-      }
-
-      dd {
-        margin: 0;
-      }
-    }
-
-    @container (width > 45ch) {
-      gap: var(--size-1);
-
-      .ui-item {
-        align-items: baseline;
-        display: grid;
-        gap: var(--size-1);
-        grid-template-columns: 1fr auto;
-
-        dt,
-        .ui-term {
-          inline-size: max-content;
-
-          &::after {
-            display: inline-block;
-          }
-        }
-
-        dd {
-          color: var(--text-muted);
-          text-align: end;
-        }
-      }
-
-      &.ui-bordered .ui-item {
-        grid-template-columns: auto 1fr auto;
-
-        dt,
-        .ui-term {
-          order: 0;
-        }
-
-        dd {
-          order: 2;
-        }
-
-        &::after {
-          background-color: transparent;
-          block-size: 2px;
-          border-block-end: var(--_border-width) var(--_border-style) var(--border-color);
-          content: "";
-          order: 1;
-        }
-      }
-    }
-  }
-}
+@layer components.root {
+  :where(.ui-description-list) {
+    --_border-style: solid;
+    --_border-width: 1px;
+
+    display: grid;
+    gap: var(--size-3);
+    margin: 0;
+    padding: 0;
+
+    &.ui-dotted {
+      --_border-style: dotted;
+      --_border-width: 2px;
+    }
+
+    .ui-item {
+      display: grid;
+      margin: 0;
+      padding: 0;
+
+      dt,
+      .ui-term {
+        display: block;
+        font-weight: 700;
+        overflow: hidden;
+        position: relative;
+      }
+
+      dd {
+        margin: 0;
+      }
+    }
+
+    @container (width > 45ch) {
+      gap: var(--size-1);
+
+      .ui-item {
+        align-items: baseline;
+        display: grid;
+        gap: var(--size-1);
+        grid-template-columns: 1fr auto;
+
+        dt,
+        .ui-term {
+          inline-size: max-content;
+
+          &::after {
+            display: inline-block;
+          }
+        }
+
+        dd {
+          color: var(--text-muted);
+          text-align: end;
+        }
+      }
+
+      &.ui-bordered .ui-item {
+        grid-template-columns: auto 1fr auto;
+
+        dt,
+        .ui-term {
+          order: 0;
+        }
+
+        dd {
+          order: 2;
+        }
+
+        &::after {
+          background-color: transparent;
+          block-size: 2px;
+          border-block-end: var(--_border-width) var(--_border-style)
+            var(--border-color);
+          content: "";
+          order: 1;
+        }
+      }
+    }
+  }
+}

package/css/components/dialog.css

@@ -1,68 +1,69 @@
-@layer components.extended {
-  :where(.ui-dialog) {
-    inline-size: 100%;
-    inset: 0;
-    margin: auto;
-    margin-block-start: 15%;
-    max-inline-size: calc(100% - var(--size-4));
-    padding-block: 0;
-    pointer-events: none;
-    position: fixed;
-
-    @media (width > 600px) {
-      max-inline-size: 60ch;
-    }
-
-    /* Animation */
-    /* There's no close animation, intentionally */
-    opacity: 0;
-
-    &::backdrop {
-      backdrop-filter: blur(1px);
-      background-color: rgba(0, 0, 0, 0.5);
-
-      @media (prefers-reduced-motion: reduce) {
-        backdrop-filter: none;
-      }
-    }
-
-    &:not([open]) {
-      display: none;
-    }
-
-    &[open] {
-      pointer-events: all;
-    }
-
-    .ui-actions {
-      justify-content: end;
-      padding-inline: var(--size-3) var(--size-1);
-    }
-
-    &[open] {
-      opacity: 1;
-      transition: display 0.2s allow-discrete,
-        overlay 0.2s allow-discrete,
-        opacity 0.2s var(--ease-out-1);
-
-      @starting-style {
-        opacity: 0;
-      }
-    }
-
-    @media (prefers-reduced-motion: no-preference) {
-      &[open] {
-        margin-block-start: 15%;
-
-        @starting-style {
-          opacity: 0;
-        }
-      }
-    }
-  }
-
-  :where(html:has(.ui-dialog[open])) {
-    block-size: 100%;
-    overflow: hidden;
-  }
-}
+@layer components.extended {
+  :where(.ui-dialog) {
+    inline-size: 100%;
+    inset: 0;
+    margin: auto;
+    margin-block-start: 15%;
+    max-inline-size: calc(100% - var(--size-4));
+    padding-block: 0;
+    pointer-events: none;
+    position: fixed;
+
+    @media (width > 600px) {
+      max-inline-size: 60ch;
+    }
+
+    /* Animation */
+    /* There's no close animation, intentionally */
+    opacity: 0;
+
+    &::backdrop {
+      backdrop-filter: blur(1px);
+      background-color: rgba(0, 0, 0, 0.5);
+
+      @media (prefers-reduced-motion: reduce) {
+        backdrop-filter: none;
+      }
+    }
+
+    &:not([open]) {
+      display: none;
+    }
+
+    &[open] {
+      pointer-events: all;
+    }
+
+    .ui-actions {
+      justify-content: end;
+      padding-inline: var(--size-3) var(--size-1);
+    }
+
+    &[open] {
+      opacity: 1;
+      transition:
+        display 0.2s allow-discrete,
+        overlay 0.2s allow-discrete,
+        opacity 0.2s var(--ease-out-1);
+
+      @starting-style {
+        opacity: 0;
+      }
+    }
+
+    @media (prefers-reduced-motion: no-preference) {
+      &[open] {
+        margin-block-start: 15%;
+
+        @starting-style {
+          opacity: 0;
+        }
+      }
+    }
+  }
+
+  :where(html:has(.ui-dialog[open])) {
+    block-size: 100%;
+    overflow: hidden;
+  }
+}

package/css/components/divider.css

@@ -1,20 +1,20 @@
-@layer components.root {
-  :where(.ui-divider) {
-    background-color: var(--border-color);
-    block-size: var(--border-size-1);
-    margin-block: var(--size-fluid-3);
-
-    /* Border color */
-    &.ui-border-filled {
-      background-color: var(--surface-filled);
-    }
-
-    &.ui-border-primary {
-      background-color: var(--primary);
-    }
-
-    &.ui-border-tonal {
-      background-color: var(--surface-tonal);
-    }
-  }
-}
+@layer components.root {
+  :where(.ui-divider) {
+    background-color: var(--border-color);
+    block-size: var(--border-size-1);
+    margin-block: var(--size-fluid-3);
+
+    /* Border color */
+    &.ui-border-filled {
+      background-color: var(--surface-filled);
+    }
+
+    &.ui-border-primary {
+      background-color: var(--primary);
+    }
+
+    &.ui-border-tonal {
+      background-color: var(--surface-tonal);
+    }
+  }
+}

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.
-	   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;
-		}
-	}
-}
+@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;
+    }
+  }
+}