opui-css 3.3.4 → 4.0.0

package/dist/opui.components.css

@@ -0,0 +1,5135 @@
+/*
+* Components are divided into two categories - if they are stand-alone (root) or if they are built on top of others (extended).
+*/
+
+/*** Root components (no dependencies)  */
+
+@layer components.root {
+  :where(.button) {
+    --_color: light-dark(var(--color-16), var(--color-1));
+    --_color-contrast: light-dark(var(--color-1), var(--color-16));
+    --_color-tonal: var(--surface-tonal);
+
+    --_accent: var(--_color);
+    --_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));
+    --_outlined-active-bg-color: var(--_filled-active-bg-color);
+
+    --_bg-color: transparent;
+    --_border-color: transparent;
+    --_border-width: var(--border-size-1);
+    --_font-size: var(--font-size-1);
+    --_min-height: var(--button-size);
+    --_border-radius: var(--button-border-radius, var(--radius-2));
+    --_text-color: var(--_accent);
+
+    -webkit-tap-highlight-color: transparent;
+    -webkit-touch-callout: none;
+    align-items: center;
+    background-color: var(--_bg-color);
+    border: var(--_border-width) solid var(--_border-color);
+    border-radius: var(--_border-radius);
+    color: var(--_text-color);
+    display: inline-flex;
+    font-size: var(--_font-size);
+    font-weight: 700;
+    gap: var(--size-2);
+    justify-content: center;
+    min-block-size: var(--_min-height);
+    padding-block: 0.5ex;
+    padding-inline: 1.5ex;
+    text-align: center;
+    text-decoration: none;
+    transition: background-color .1s ease, color .1s ease,
+      border-color .1s ease, box-shadow .1s ease;
+    user-select: none;
+
+    /* Colors — shared interaction model for critical and primary.
+       Each color modifier below only swaps --_color; the tonal surface,
+       contrast text, and hover/active strategy are identical.
+       The .critical scope class in theme.css redirects --palette-source so
+       --color-6 below becomes a tint of the active color. */
+    &.critical,
+    &.primary {
+      --_color-contrast: var(--gray-1);
+      --_color-tonal: var(--color-6);
+      --_accent-tonal-contrast: var(--text-primary-contrast);
+
+      --_default-hover-bg-color: oklch(from var(--_accent) l c h / 15%);
+      --_default-active-bg-color: oklch(from var(--_accent) l c h / 25%);
+
+      --_filled-hover-bg-color: oklch(from var(--_accent) calc(l - 0.1) c h);
+      --_filled-active-bg-color: oklch(from var(--_accent) calc(l - 0.15) c h);
+
+      --_outlined-active-bg-color: oklch(from var(--_accent) calc(l - 0.1) c h);
+    }
+
+    &.critical {
+      --_color: var(--critical);
+    }
+
+    &.primary {
+      --_color: var(--primary);
+    }
+
+    /* Disabled */
+    &:where([disabled]) {
+      --_text-color: color-mix(in oklch,
+          var(--text-muted) 50%,
+          var(--surface-default));
+
+      cursor: not-allowed;
+      opacity: 0.64;
+    }
+
+    /* Hover & Active */
+    &:where(:not([disabled])) {
+      &:where(:not(:active):hover) {
+        --_bg-color: var(--_default-hover-bg-color);
+      }
+
+      &:where(:hover:active),
+      &[aria-current="page"] {
+        --_bg-color: var(--_default-active-bg-color);
+      }
+    }
+
+
+    /* Icons / Keyboard */
+    &:where(:has(svg), &.icon-only) {
+      gap: 1ex;
+
+      svg {
+        color: currentColor;
+        max-block-size: 0.7lh;
+      }
+    }
+
+    /* Keyboard input */
+    :is(kbd) {
+      background-color: oklch(from currentColor l c h / 10%);
+      border: 0;
+      color: oklch(from currentColor l c h / 80%);
+      font-size: 0.8em;
+      font-weight: 400;
+      line-height: 1.2;
+    }
+
+    /* Sizes — heights aliased from the shared --control-size scale.
+       Override --button-size-* in a parent scope to resize an entire region. */
+    &.x-small {
+      --_min-height: var(--button-size-x-small);
+      --_font-size: var(--font-size-0);
+      padding-block: 0;
+      padding-inline: .5ex;
+    }
+
+    &.small {
+      --_min-height: var(--button-size-small);
+      --_font-size: var(--font-size-05);
+      padding-block: 0;
+      padding-inline: .75ex;
+    }
+
+    &.large {
+      --_min-height: var(--button-size-large);
+      padding-inline: 4ex;
+    }
+
+    /* Variants */
+    &.outlined {
+      --_bg-color: transparent;
+      --_border-color: var(--_accent);
+      --_text-color: var(--_accent);
+
+      &:where(:not([disabled])) {
+        &:where(:not(:active):hover) {
+          --_bg-color: var(--_accent);
+          --_border-color: var(--_accent);
+          --_text-color: var(--_accent-contrast);
+        }
+
+        &:where(:active) {
+          --_bg-color: var(--_outlined-active-bg-color);
+          --_border-color: var(--_outlined-active-bg-color);
+          --_text-color: var(--_accent-contrast);
+        }
+      }
+    }
+
+    &.tonal {
+      --_bg-color: var(--_accent-tonal);
+      --_text-color: var(--_accent-tonal-contrast);
+
+      &:where(:not([disabled])) {
+        &:where(:not(:active):hover) {
+          --_bg-color: var(--_accent);
+          --_text-color: var(--_accent-contrast);
+        }
+
+        &:where(:active) {
+          --_bg-color: var(--_outlined-active-bg-color);
+          --_text-color: var(--_accent-contrast);
+        }
+      }
+    }
+
+    &.filled {
+      --_bg-color: var(--_accent);
+      --_text-color: var(--_accent-contrast);
+
+      &:where(:not([disabled])) {
+        &:where(:not(:active):hover) {
+          --_bg-color: var(--_filled-hover-bg-color);
+        }
+
+        &:where(:active) {
+          --_bg-color: var(--_filled-active-bg-color);
+        }
+      }
+    }
+  }
+
+  /* file input */
+  :where(input[type="file"]) {
+    align-self: flex-start;
+    border: var(--border-size-1) solid var(--surface-filled);
+    border-radius: var(--radius-2);
+    box-shadow: var(--inner-shadow-4);
+    color: var(--text-muted-contrast);
+    cursor: initial;
+    max-inline-size: 100%;
+    padding: 0;
+  }
+
+  :where(input[type="file"])::-webkit-file-upload-button,
+  :where(input[type="file"])::file-selector-button {
+    cursor: pointer;
+    margin-inline-end: var(--size-relative-6);
+  }
+}
+
+@layer components.root {
+	:where(.callout) {
+		--_bg-color: var(--surface-tonal);
+		--_border-color: var(--surface-tonal);
+		--_color: var(--text-primary);
+		--_icon-color: currentColor;
+		--_link-hover-color: var(--primary);
+		--_padding: var(--size-3);
+		--_border-radius: var(--border-radius);
+		--_gap: var(--size-3);
+		--_content-gap: var(--size-2);
+		--_font-size: var(--font-size-05);
+		--_title-font-size: var(--font-size-1);
+		--_icon-size: var(--size-4);
+		--_surface-bg: var(--surface-default);
+
+		--_outlined-bg-color: var(--surface-default);
+		--_outlined-border-color: var(--border-color);
+		--_outlined-color: var(--text-primary);
+		--_outlined-icon-color: currentColor;
+
+		background-color: var(--_bg-color, var(--_surface-bg));
+		border: 1px solid var(--_border-color, var(--border-color));
+		border-radius: var(--_border-radius);
+		color: var(--_color);
+		isolation: isolate;
+		padding: var(--_padding);
+		position: relative;
+
+		&.critical,
+		&.info,
+		&.neutral,
+		&.success,
+		&.warning {
+			--_bg-color: light-dark(oklch(from var(--color-2) l c h / 20%), oklch(from var(--color-6) l c h / 5%));
+			--_border-color: light-dark(var(--color-5), var(--color-11));
+			--_color: light-dark(var(--color-16), var(--color-1));
+			--_icon-color: var(--color-9);
+
+			--_outlined-bg-color: var(--surface-default);
+			--_outlined-border-color: var(--color-9);
+			--_outlined-color: light-dark(var(--color-15), var(--color-1));
+			--_outlined-icon-color: var(--color-9);
+		}
+
+		&.outlined {
+			--_bg-color: var(--_outlined-bg-color);
+			--_border-color: var(--_outlined-border-color);
+			--_color: var(--_outlined-color);
+			--_icon-color: var(--_outlined-icon-color);
+		}
+
+		&::before {
+			background-color: var(--_bg-color);
+			border-radius: inherit;
+			content: "";
+			inset: 0;
+			pointer-events: none;
+			position: absolute;
+			z-index: -1;
+		}
+
+		&>.content {
+			display: grid;
+			font-size: var(--_font-size);
+			gap: var(--_content-gap);
+
+			h1,
+			h2,
+			h3,
+			h4,
+			h5,
+			h6 {
+				color: inherit;
+				font-size: var(--_title-font-size);
+				font-weight: 600;
+
+				* {
+					font-size: inherit;
+				}
+			}
+		}
+
+		/* Links
+    * Can't make sure contrast will be acceptable (yet) so we use the current text color instead.
+    */
+		&:not(.outlined) {
+			a[href] {
+				color: inherit;
+
+				&:hover {
+					color: var(--_link-hover-color);
+				}
+			}
+		}
+
+		/* Icon */
+		&:has(svg) {
+			display: grid;
+			gap: var(--_gap);
+			grid-template-columns: var(--_icon-size) 1fr;
+
+			svg {
+				margin-block-start: 0.15rem;
+				stroke: var(--_icon-color);
+			}
+		}
+	}
+}
+
+@layer components.root {
+  :where(.icon-button) {
+    --_color: light-dark(var(--color-16), var(--color-1));
+    --_color-contrast: light-dark(var(--color-1), var(--color-16));
+    --_color-tonal: var(--surface-tonal);
+
+    --_accent: var(--_color);
+    --_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));
+    --_outlined-active-bg-color: var(--_filled-active-bg-color);
+
+    --_bg-color: transparent;
+    --_border-color: transparent;
+    --_border-width: var(--border-size-1);
+    --_text-color: inherit;
+
+    align-items: center;
+    aspect-ratio: 1;
+    background-color: var(--_bg-color);
+    block-size: var(--size-6);
+    border: var(--_border-width) solid var(--_border-color);
+    border-radius: var(--radius-round);
+    color: var(--_text-color);
+    display: inline-flex;
+    inline-size: var(--size-6);
+    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;
+
+    &:where([disabled]) {
+      --_text-color: light-dark(rgb(0, 0, 0/0.3), rgb(255, 255, 255/0.26));
+      cursor: not-allowed;
+      opacity: 0.64;
+    }
+
+    svg {
+      block-size: auto;
+      inline-size: auto;
+      max-block-size: var(--size-5);
+      max-inline-size: var(--size-5);
+      pointer-events: none;
+    }
+
+    /* Ripple effect, utils.css */
+    &::before {
+      --highlight-size: 130%;
+      background-color: transparent;
+
+      @media (prefers-reduced-motion: no-preference) {
+        transition: transform 0.2s ease, background-color .1s ease;
+      }
+    }
+
+    /* Colors — shared interaction model for critical and primary.
+       Each color modifier below only swaps --_color; the tonal surface,
+       contrast text, and hover/active strategy are identical.
+       The .critical scope class in theme.css redirects --palette-source so
+       --color-6 below becomes a tint of the active color. */
+    &.critical,
+    &.primary {
+      --_color-contrast: var(--gray-1);
+      --_color-tonal: var(--color-6);
+      --_accent-tonal-contrast: var(--text-primary-contrast);
+
+      --_default-hover-bg-color: oklch(from var(--_accent) l c h / 15%);
+      --_default-active-bg-color: oklch(from var(--_accent) l c h / 25%);
+
+      --_filled-hover-bg-color: oklch(from var(--_accent) calc(l - 0.1) c h);
+      --_filled-active-bg-color: oklch(from var(--_accent) calc(l - 0.15) c h);
+
+      --_outlined-active-bg-color: oklch(from var(--_accent) calc(l - 0.1) c h);
+    }
+
+    &.critical {
+      --_color: var(--critical);
+    }
+
+    &.primary {
+      --_color: var(--primary);
+    }
+
+    /* Element states */
+    &:where(:not([disabled])) {
+      &:where(:not(:active):hover) {
+        &::before {
+          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));
+        }
+      }
+    }
+
+    /* Size */
+    &.small {
+      block-size: var(--size-4);
+      inline-size: var(--size-4);
+
+      svg {
+        max-block-size: var(--size-4);
+        max-inline-size: var(--size-4);
+      }
+    }
+
+    /* Variants */
+    &.outlined {
+      --_bg-color: transparent;
+      --_border-color: var(--_accent);
+      --_text-color: var(--_accent);
+    }
+
+    &.tonal {
+      --_bg-color: var(--_accent-tonal);
+      --_text-color: var(--_accent-tonal-contrast);
+    }
+
+    &.filled {
+      --_bg-color: var(--_accent);
+      --_interaction-active-color: var(--_filled-active-bg-color);
+      --_interaction-hover-color: var(--_filled-hover-bg-color);
+      --_text-color: var(--_accent-contrast);
+    }
+  }
+}
+
+@layer components.root {
+  :where(.tabs) {
+    --_accent-color: var(--primary);
+    --_bg-color: transparent;
+
+    align-items: flex-start;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0 var(--size-1);
+    position: relative;
+
+    &>.tab-input[type="radio"] {
+      /* utils > .sr-only */
+      /* TODO: use mixin for this when available */
+      block-size: 1px;
+      clip-path: inset(50%);
+      inline-size: 1px;
+      overflow: hidden;
+      position: absolute;
+      white-space: nowrap;
+
+      &:checked {
+
+        /* Checked Tab */
+        &+[role="tab"] {
+          border-block-end-color: var(--_accent-color);
+          color: var(--_accent-color);
+
+          /* Checked Panel */
+          &+[role="tabpanel"] {
+            display: block;
+          }
+        }
+      }
+
+      &:focus-visible {
+        &+[role="tab"] {
+          --focus-ring-color: var(--text-muted);
+          --focus-ring-offset: calc(-1 * var(--size-2));
+          outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color);
+          outline-offset: var(--focus-ring-offset);
+        }
+      }
+    }
+
+    /* Tab */
+    &>[role="tab"] {
+      align-items: center;
+      background-color: transparent;
+      border-bottom: 2px solid transparent;
+      border-radius: 0;
+      color: var(--text-muted);
+      cursor: pointer;
+      display: inline-flex;
+      font-weight: 600;
+      justify-content: center;
+      line-height: var(--font-lineheight-4);
+      order: 1;
+      padding: var(--size-2) var(--size-3);
+      position: relative;
+      transition: color 0.1s;
+      user-select: none;
+
+      &:hover {
+        background-color: light-dark(oklch(from var(--_accent-color) calc(l * 0.75) none h / 5%),
+            oklch(from var(--_accent-color) calc(l * 1.25) none h / 5%));
+      }
+    }
+
+    /* Tab Panel */
+    &>[role="tabpanel"] {
+      display: none;
+      inline-size: 100%;
+      order: 2;
+    }
+  }
+}
+
+@layer components.root {
+  :where(.toggle-group) {
+    --_bg-color: var(--surface-default);
+    --_border-color: var(--border-color);
+    --_border-radius: var(--button-border-radius);
+
+    background-color: var(--_bg-color);
+    border: 1px solid var(--_border-color);
+    border-radius: var(--_border-radius);
+    display: inline-flex;
+    inline-size: fit-content;
+    overflow: hidden;
+
+    /* Sizes */
+    &.small {
+      .toggle-button {
+        --_size: var(--field-size-small);
+      }
+    }
+
+    &.x-small {
+      .toggle-button {
+        --_size: var(--field-size-x-small);
+      }
+    }
+
+    /* Toggle button */
+    .toggle-button {
+      border: 0;
+      border-radius: 0;
+      margin: 0;
+    }
+
+    &:not(.vertical) {
+      .toggle-button {
+        border-inline-end: 1px solid var(--_border-color);
+
+        &:last-of-type {
+          border-inline-end: 0;
+        }
+      }
+    }
+
+    &.vertical {
+      flex-direction: column;
+
+      .toggle-button {
+        border-block-end: 1px solid var(--_border-color);
+
+        &:last-of-type {
+          border-block-end: 0;
+        }
+      }
+    }
+  }
+}
+
+/* TODO:
+* Somehow handle when a group gets too wide for its container. Should it be handled?
+*/
+
+@layer components.root {
+	:where(.toggle-button) {
+		--_button-bg-color: transparent;
+		--_size: var(--field-size);
+		--_svg-size: var(--size-4);
+
+		align-items: center;
+		background-color: var(--_button-bg-color);
+		block-size: var(--_size);
+		border: 1px solid var(--border-color);
+		border-radius: var(--button-border-radius);
+		color: var(--text-primary);
+		cursor: pointer;
+		display: inline-flex;
+		flex: auto;
+		gap: var(--size-2);
+		inline-size: fit-content;
+		justify-content: center;
+		min-inline-size: var(--_size);
+		outline-offset: calc(-1 * var(--size-2));
+		padding: 0 var(--size-2);
+		position: relative;
+		user-select: none;
+
+		input[type="checkbox"],
+		input[type="radio"] {
+			/* utils.css > .sr-only */
+			block-size: 1px;
+			clip-path: inset(50%);
+			inline-size: 1px;
+			overflow: hidden;
+			position: absolute;
+			white-space: nowrap;
+		}
+
+		/* Element states */
+		@media (pointer: fine) {
+			&:hover:not(.disabled) {
+				--_button-bg-color: light-dark(oklch(0% 0 0 / 0.04), oklch(100% 0 0 / 0.08));
+			}
+		}
+
+		&:has(input:focus-visible) {
+			--focus-ring-color: var(--text-muted);
+			--focus-ring-offset: -6px;
+			outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color);
+			outline-offset: var(--focus-ring-offset);
+		}
+
+		/* Disabled */
+		&.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;
+		}
+
+		/* svgs */
+		svg {
+			block-size: var(--_svg-size);
+			flex-shrink: 0;
+			inline-size: var(--_svg-size);
+		}
+
+		/* Selected */
+		&:has(:where(input[type="checkbox"], input[type="radio"]):checked) {
+			--_button-bg-color: oklch(from var(--primary) l c h / 25%);
+
+			@media (pointer: fine) {
+				&:hover {
+					--_button-bg-color: oklch(from var(--primary) l c h / 35%);
+				}
+			}
+		}
+
+		/* Sizes */
+		&.small {
+			--_size: var(--field-size-small);
+		}
+
+		&.x-small {
+			--_size: var(--field-size-x-small);
+		}
+	}
+}
+
+@layer components.root {
+	:where(.anchor) {
+		anchor-name: --anchor;
+		anchor-scope: --anchor;
+		display: inline-block;
+		inline-size: fit-content;
+
+		/* Always-visible */
+		&>.anchor-floating:not([popover]) {
+			block-size: max-content;
+			inline-size: max-content;
+			position: absolute;
+			position-anchor: --anchor;
+			position-area: var(--anchor-position-area, start end);
+			translate: var(--_anchor-tx, 0) var(--_anchor-ty, 0);
+		}
+
+		/* Hover-triggered */
+		&>.anchor-floating[popover] {
+			inset: unset;
+			margin: 0;
+			position: absolute;
+			position-area: var(--anchor-position-area, start end);
+			translate: var(--_anchor-tx, 0) var(--_anchor-ty, 0);
+		}
+	}
+}
+
+@layer components.root {
+  :where(.avatar) {
+    --_bg-color: var(--primary);
+    --_color: var(--color-1);
+    --_width: 40px;
+
+    align-items: center;
+    aspect-ratio: 1;
+    background-color: var(--_bg-color);
+    border-radius: var(--radius-round);
+    color: var(--_color);
+    display: inline-flex;
+    inline-size: var(--_width);
+    justify-content: center;
+    overflow: clip;
+    position: relative;
+    text-align: center;
+    text-decoration: none;
+
+    &:has(img) {
+      background-color: transparent;
+    }
+
+    svg {
+      max-inline-size: var(--size-5);
+    }
+
+    img {
+      block-size: 100%;
+      inline-size: 100%;
+      inset: 0;
+      object-fit: cover;
+      position: absolute;
+    }
+
+    &.squared {
+      border-radius: 0;
+    }
+
+    &.rounded {
+      border-radius: var(--radius-2);
+    }
+
+    &.squircle {
+      border-radius: var(--radius-3);
+
+      @supports (corner-shape: squircle) {
+        border-radius: var(--radius-round);
+        corner-shape: squircle;
+      }
+    }
+  }
+
+  :where([role="group"]) {
+    --_margin: var(--size-3);
+    --_outline-color: var(--surface-default);
+
+    display: flex;
+
+    .avatar {
+      box-shadow: 0 0 0 2px var(--_outline-color);
+      margin-inline-end: calc(-1 * var(--_margin));
+    }
+  }
+}
+
+@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(.chip) {
+    --_bg-color: var(--surface-tonal);
+    --_border-color: var(--border-color);
+    --_color: var(--text-primary);
+
+    align-items: center;
+    background: var(--_bg-color) var(--ripple, none);
+    block-size: var(--size-7, 2rem);
+    border-radius: var(--radius-2, 0.5rem);
+    border: 1px solid var(--_border-color);
+    color: var(--_color);
+    display: inline-flex;
+    font-size: var(--font-size-0, 0.75rem);
+    gap: var(--size-1);
+    padding-inline: var(--size-2);
+    text-decoration: none;
+
+    /* Variants */
+    &.tonal {
+      --_bg-color: var(--surface-tonal);
+      --_color: var(--text-primary);
+    }
+
+    &.outlined {
+      --_bg-color: var(--surface-default);
+      --_color: var(--text-primary);
+    }
+
+    &:where(button, a):where(:not([disabled])) {
+      &:where(:not(:active)):hover {
+        --_bg-color: light-dark(oklch(from var(--surface-tonal) calc(l * 0.98) c h),
+            oklch(from var(--surface-tonal) calc(l * 1.1) c h));
+      }
+    }
+
+    /* Icon */
+    &:has(svg:first-child) {
+      padding-inline: var(--size-1) var(--size-2);
+    }
+
+    &:has(svg:last-child) {
+      padding-inline: var(--size-2) var(--size-1);
+    }
+
+    &:has(svg) {
+      svg {
+        flex-shrink: 0;
+        inline-size: var(--size-3);
+      }
+    }
+
+    /* Sizes */
+    &.small {
+      block-size: var(--size-5);
+    }
+
+    &.multiline {
+      block-size: auto;
+    }
+
+    /* Ripple effect */
+    background-position: center;
+
+    &:where(:not([disabled])) {
+      &:where(:not(:active):hover) {
+        --ripple: radial-gradient(circle, transparent 1%, var(--_bg-color) 1%) center/15000%;
+
+        transition: background var(--button-ripple-duration);
+      }
+
+      &:where(:hover:active) {
+        background-size: var(--button-ripple-size);
+        transition: background 0s;
+      }
+    }
+
+    /* Disabled */
+    &:where([disabled]) {
+      opacity: 0.64;
+      --_color: color-mix(in oklch,
+          var(--text-muted) 50%,
+          var(--surface-default));
+      cursor: not-allowed;
+    }
+  }
+}
+
+@layer components.root {
+  :where(.description-list) {
+    --_border-style: solid;
+    --_border-width: 1px;
+
+    display: grid;
+    gap: var(--size-3);
+    margin: 0;
+    padding: 0;
+
+    &.dotted {
+      --_border-style: dotted;
+      --_border-width: 2px;
+    }
+
+    .item {
+      display: grid;
+      margin: 0;
+      padding: 0;
+
+      dt {
+        display: block;
+        font-weight: 700;
+        overflow: hidden;
+        position: relative;
+      }
+
+      dd {
+        margin: 0;
+      }
+    }
+
+    @container (width > 45ch) {
+      gap: var(--size-1);
+
+      .item {
+        align-items: baseline;
+        display: grid;
+        gap: var(--size-1);
+        grid-template-columns: 1fr auto;
+
+        dt {
+          inline-size: max-content;
+
+          &::after {
+            display: inline-block;
+          }
+        }
+
+        dd {
+          color: var(--text-muted);
+          text-align: end;
+        }
+      }
+
+      &.bordered .item {
+        grid-template-columns: auto 1fr auto;
+
+        dt {
+          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(hr) {
+    background-color: var(--border-color);
+    block-size: var(--border-size-1);
+    margin-block: var(--size-fluid-3);
+
+    /* Border color */
+    &.border-filled {
+      background-color: var(--surface-filled);
+    }
+
+    &.border-primary {
+      background-color: var(--primary);
+    }
+
+    &.border-tonal {
+      background-color: var(--surface-tonal);
+    }
+  }
+}
+
+@layer components.root {
+  :where(.link) {
+    color: var(--primary);
+    cursor: pointer;
+    font-weight: 700;
+    text-decoration: underline;
+    text-decoration-color: var(--primary);
+    text-underline-offset: 2px;
+
+    &[href] {
+      &:hover,
+      &:focus-visible {
+        color: var(--primary-light);
+      }
+    }
+
+    @supports (-moz-appearance: none) {
+      text-underline-offset: 2px;
+    }
+  }
+}
+
+@layer components.root {
+  :where(table) {
+    --_table-border-radius: var(--border-radius);
+
+    border-collapse: separate;
+    border-spacing: 0;
+    border: 1px solid var(--border-color);
+    border-radius: var(--_table-border-radius);
+    overflow: hidden;
+    inline-size: 100%;
+    margin: var(--size-3) 0;
+    position: relative;
+
+    /* Rows */
+    tr {
+      &:hover {
+        background-color: oklch(from var(--surface-filled) l c h / 75%);
+      }
+    }
+
+    /* Cells */
+    th,
+    td {
+      background-color: var(--surface-default);
+      border-inline-end: var(--border-width) solid var(--border-color);
+      border-block-end: var(--border-width) solid var(--border-color);
+      padding: var(--size-1) var(--size-2);
+
+      &:last-child {
+        border-inline-end: none;
+      }
+    }
+
+    /* Remove bottom border only on the last row of the table */
+    &>*:last-child tr:last-child {
+
+      th,
+      td {
+        border-block-end: none;
+      }
+    }
+
+    th {
+      background-color: var(--surface-filled);
+      color: var(--text-primary);
+      font-size: var(--font-size-05);
+      font-weight: 600;
+      text-align: start;
+    }
+
+    td {
+      font-size: var(--font-size-05);
+    }
+
+    /* Round corner cells  */
+    &>thead:first-of-type tr:first-child {
+      th:first-child {
+        border-start-start-radius: var(--_table-border-radius);
+      }
+
+      th:last-child {
+        border-start-end-radius: var(--_table-border-radius);
+      }
+    }
+
+    /* Logic for tables without thead */
+    &>tbody:first-of-type:not(thead ~ tbody) tr:first-child {
+      td:first-child {
+        border-start-start-radius: var(--_table-border-radius);
+      }
+
+      td:last-child {
+        border-start-end-radius: var(--_table-border-radius);
+      }
+    }
+
+    /* Logic for bottom corners (whether in tbody or tfoot) */
+    &>*:last-child tr:last-child {
+      :where(th, td):first-child {
+        border-end-start-radius: var(--_table-border-radius);
+      }
+
+      :where(th, td):last-child {
+        border-end-end-radius: var(--_table-border-radius);
+      }
+    }
+
+    /* Footer */
+    tfoot {
+      tr td {
+        background-color: var(--surface-filled);
+        padding-block: var(--size-2);
+      }
+
+      td {
+        color: var(--text-primary);
+        font-weight: 600;
+        border-top: var(--border-width) solid var(--border-color);
+      }
+    }
+
+    /* Caption */
+    caption {
+      caption-side: bottom;
+      color: var(--text-muted);
+      font-size: var(--font-size-05);
+      margin-inline-start: var(--size-2);
+      padding: var(--size-2) 0;
+      text-align: start;
+    }
+
+    /* Header */
+    thead {
+      z-index: 1;
+    }
+
+    /* Remove bottom border of the row above the footer to stay single-line */
+    tbody:has(+ tfoot) tr:last-child td {
+      border-block-end: none;
+    }
+
+    /* Column group */
+    colgroup col {
+      border: none;
+    }
+
+    @container (width < 60ch) {
+
+      th,
+      td {
+        padding: var(--size-1) 0.875rem;
+      }
+    }
+
+    /* Spacious */
+    &.spacious {
+
+      th,
+      td {
+        padding: var(--size-3);
+      }
+
+      caption {
+        margin-inline-start: var(--size-3);
+        padding: var(--size-2) 0;
+      }
+
+      @container (width < 60ch) {
+
+        th,
+        td {
+          padding: var(--size-3);
+        }
+      }
+    }
+
+    /* Dense */
+    &.dense {
+
+      th,
+      td {
+        padding: var(--size-1);
+      }
+
+      caption {
+        margin-inline-start: var(--size-1);
+        padding: var(--size-1) 0;
+      }
+
+      @container (width < 60ch) {
+
+        th,
+        td {
+          padding: var(--size-1);
+        }
+      }
+    }
+  }
+}
+
+@layer components.root {
+  :where(progress) {
+    --_accent-color: var(--primary);
+    --_bg-color: var(--surface-tonal);
+
+    appearance: none;
+    background-color: var(--_bg-color);
+    block-size: var(--size-1);
+    border: 0;
+    border-radius: var(--border-radius, 0.25rem);
+    display: inline-block;
+    inline-size: 100%;
+    overflow: hidden;
+    position: relative;
+    vertical-align: baseline;
+
+    /* Color */
+    &.filled {
+      --_bg-color: var(--surface-filled);
+    }
+
+    &.default {
+      --_bg-color: var(--surface-default);
+    }
+
+    &.tonal {
+      --_bg-color: var(--surface-tonal);
+    }
+
+    &::-webkit-progress-bar {
+      background: none;
+      border-radius: var(--border-radius, 0.25rem);
+    }
+
+    &[value]::-webkit-progress-value {
+      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));
+      }
+    }
+
+    &::-moz-progress-bar {
+      background-color: var(--_accent-color);
+    }
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    progress:indeterminate {
+      background-color: var(--_bg-color);
+
+      &::after {
+        animation: indeterminate 2s linear infinite;
+        background-color: var(--_accent-color);
+        content: "";
+        inset: 0 auto 0 0;
+        position: absolute;
+        will-change: inset-inline-start, inset-inline-end;
+      }
+
+      &[value]::-webkit-progress-value {
+        background-color: transparent;
+      }
+
+      &::-moz-progress-bar {
+        background-color: transparent;
+      }
+    }
+
+    [dir="rtl"] {
+      :where(progress):indeterminate {
+        animation-direction: reverse;
+
+        &::after {
+          animation-direction: reverse;
+        }
+      }
+    }
+  }
+
+  @keyframes indeterminate {
+    0% {
+      inset-inline-start: -200%;
+      inset-inline-end: 100%;
+    }
+
+    60% {
+      inset-inline-start: 107%;
+      inset-inline-end: -8%;
+    }
+
+    100% {
+      inset-inline-start: 107%;
+      inset-inline-end: -8%;
+    }
+  }
+}
+
+@layer components.root {
+
+  [aria-busy="true"]:not(input,
+    select,
+    textarea,
+    html,
+    progress,
+    [aria-describedby]) {
+    position: relative;
+
+    &::before {
+      animation: spin 0.7s linear infinite;
+      block-size: 1em;
+      border-color: transparent currentColor currentColor;
+      border-radius: 50%;
+      border-style: solid;
+      border-width: 3px;
+      content: "";
+      display: inline-block;
+      inline-size: 1em;
+      opacity: 0.5;
+      vertical-align: -0.14em;
+    }
+
+    &:not(button.button):not(:empty) {
+      &::before {
+        margin-inline-end: 0.5em;
+      }
+    }
+  }
+
+  @keyframes spin {
+    to {
+      transform: rotate(1turn);
+    }
+  }
+}
+
+@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.radio {
+		--_input-size: 1.125rem;
+		--_indicator-size: 50%;
+
+		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;
+			padding-inline: 0 1ex;
+			position: relative;
+		}
+
+		/* 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;
+		}
+
+		/* Stacked layout */
+		&.stack {
+			grid-auto-columns: unset;
+			justify-items: center;
+
+			.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="radio"] {
+			appearance: none;
+			aspect-ratio: 1;
+			background-color: var(--surface-default);
+			block-size: var(--_input-size);
+			border: 1px solid var(--field-border-color);
+			border-radius: var(--radius-round);
+			box-sizing: border-box;
+			cursor: pointer;
+			display: grid;
+			inline-size: var(--_input-size);
+			margin: 0;
+			padding: 0;
+			place-items: center;
+			position: relative;
+
+			&:checked {
+				background-color: var(--primary);
+				border-color: var(--primary);
+			}
+
+			/* Dot */
+			&::after {
+				background-color: var(--primary-contrast);
+				block-size: var(--_indicator-size);
+				border-radius: var(--radius-round);
+				content: "";
+				inline-size: var(--_indicator-size);
+				margin: auto;
+				opacity: 0;
+			}
+
+			&:checked::after {
+				opacity: 1;
+			}
+
+			&::before {
+				--highlight-size: 175%;
+			}
+		}
+
+		/* Sizes */
+		&.small {
+			input[type="radio"] {
+				--_input-size: var(--size-3);
+
+			}
+		}
+
+		&.large {
+			input[type="radio"] {
+				--_input-size: var(--size-4);
+
+			}
+		}
+
+		/* 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[type="radio"] {
+				block-size: var(--size-4);
+				inline-size: var(--size-4);
+			}
+		}
+
+		@media (forced-colors: active) {
+			input[type="radio"] {
+				border: 1px solid CanvasText;
+
+				&:checked {
+					background-color: SelectedItem;
+					border-color: SelectedItem;
+
+					&::after {
+						background-color: SelectedItemText;
+					}
+				}
+			}
+		}
+	}
+}
+
+@layer components.root {
+  :where(.range) {
+    display: grid;
+    gap: var(--size-1) 0;
+    /* Two-column base so the optional .value cell can sit next to the
+       label on row 1. Children that span the full width keep using
+       `grid-column: 1/-1`, so this is backwards compatible. */
+    grid-template-columns: 1fr auto;
+    position: relative;
+
+    .label {
+      color: var(--text-primary);
+      font-size: var(--font-size-05);
+      font-weight: 600;
+      grid-column: 1;
+      grid-row: 1;
+    }
+
+    /* Live current-value readout. Pairs with the <output> element
+       rendered by the Range component (or hand-written .value markup). */
+    :where(.value) {
+      color: var(--text-muted);
+      font-size: var(--font-size-0);
+      font-variant-numeric: tabular-nums;
+      font-weight: 600;
+      grid-column: 2;
+      grid-row: 1;
+      line-height: 1.5;
+      text-align: end;
+    }
+
+    .start-text {
+      color: var(--text-muted);
+      font-size: var(--font-size-0);
+      grid-column: 1/-1;
+      grid-row: 2;
+      line-height: 1.5;
+    }
+
+    :where(.end-text) {
+      color: var(--text-muted);
+      font-size: var(--font-size-0);
+      grid-column: 1/-1;
+      grid-row: 5;
+      line-height: 1.5;
+    }
+
+    /* Datalist (tick mark labels) */
+    :where(datalist) {
+      color: var(--text-muted);
+      display: flex;
+      font-size: var(--font-size-0);
+      grid-column: 1/-1;
+      grid-row: 4;
+      justify-content: space-between;
+      margin-top: calc(var(--size-1) * -1);
+      padding-inline: calc(3ex / 2);
+
+      &>option {
+        display: flex;
+        inline-size: 0;
+        justify-content: center;
+        padding: 0;
+        white-space: nowrap;
+      }
+    }
+
+    /* Disabled */
+    &:has([disabled]) {
+      cursor: not-allowed;
+      opacity: 0.64;
+      user-select: none;
+
+      .label,
+      .value,
+      .start-text,
+      .end-text {
+        cursor: not-allowed;
+      }
+    }
+
+    /* Color */
+    &.filled input[type="range"] {
+      --_track-color: var(--surface-filled);
+    }
+
+    &.default input[type="range"] {
+      --_track-color: var(--surface-default);
+    }
+
+    &.tonal input[type="range"] {
+      --_track-color: var(--surface-tonal);
+    }
+
+    /* Orientation */
+    &.spread {
+      align-items: center;
+      column-gap: var(--size-4);
+      container-type: inline-size;
+      grid-template-columns: 1fr auto;
+
+      .label {
+        grid-column: 1;
+        grid-row: 1;
+      }
+
+      .start-text {
+        color: var(--text-muted);
+        display: block;
+        font-size: var(--font-size-0);
+        grid-column: 1;
+        grid-row: 2;
+        line-height: 1.5;
+      }
+
+      input[type="range"] {
+        align-self: center;
+        grid-column: 2;
+        grid-row: 1;
+        min-inline-size: 25ch;
+      }
+
+      /* In spread mode, the value sits below the slider in col 2
+         (where end-text would normally land). When end-text is also
+         present it shifts down a row to avoid collision. */
+      :where(.value) {
+        grid-column: 2;
+        grid-row: 2;
+      }
+
+      :where(.end-text) {
+        grid-column: 2;
+        grid-row: 2;
+        text-align: end;
+      }
+
+      datalist {
+        grid-column: 2;
+        grid-row: 2;
+      }
+
+      /* When both datalist and end-text exist, push end-text below the datalist
+         so they don't collide on the same grid cell. */
+      &:has(datalist) :where(.end-text) {
+        grid-row: 3;
+      }
+
+      &:has(.value) :where(.end-text) {
+        grid-row: 3;
+      }
+
+      &:has(.value):has(datalist) :where(.end-text) {
+        grid-row: 4;
+      }
+
+      @container (width < 400px) {
+        grid-template-columns: 1fr;
+
+        * {
+          grid-column: 1/-1;
+        }
+
+        .label {
+          grid-row: 1;
+        }
+
+        /* Share row 1 with the label: the label's text stays left-aligned
+           in its full-width cell, while the value shrinks to fit and
+           right-aligns. Visually reads as a "[name ........ value]" row. */
+        :where(.value) {
+          grid-row: 1;
+          justify-self: end;
+          text-align: end;
+        }
+
+        .start-text {
+          grid-row: 2;
+        }
+
+        input[type="range"] {
+          grid-column: 1/-1;
+          grid-row: 3;
+        }
+
+        datalist {
+          grid-column: 1/-1;
+          grid-row: 4;
+        }
+
+        :where(.end-text) {
+          grid-row: 5;
+          text-align: start;
+        }
+      }
+    }
+
+    /* Validation */
+    &[data-invalid],
+    &:has(:user-invalid) {
+      --_thumb-bg: var(--color-9);
+      --_thumb-highlight-color: oklch(from var(--color-9) 70% 100% h / 20%);
+
+      .start-text,
+      .end-text,
+      .value {
+        color: var(--color-9);
+      }
+    }
+
+    /* Range input */
+    :where(& > input[type="range"]) {
+      --_thumb-bg: var(--primary);
+      --_thumb-highlight-color: oklch(from var(--primary) 70% 100% h / 20%);
+      --_thumb-highlight-size: 0px;
+      --_thumb-offset: -1.125ex;
+      --_thumb-size: 3ex;
+      --_track-color: var(--field-border-color);
+      --_track-fill: 0%;
+      --_track-fill-color: var(--primary);
+      --_track-height: 0.75ex;
+      --_track-radius: 1e5px;
+
+      appearance: none;
+      background: transparent;
+      block-size: var(--size-4);
+      display: block;
+      grid-column: 1/-1;
+      grid-row: 3;
+      inline-size: 100%;
+      outline-offset: 1ex;
+
+      @media (hover: none) {
+        --_thumb-offset: -11.5px;
+        --_thumb-size: 30px;
+      }
+
+      /* Track */
+      &::-webkit-slider-runnable-track {
+        appearance: none;
+        background: linear-gradient(to right,
+            var(--_track-fill-color) var(--_track-fill, 0%),
+            var(--_track-color) 0%);
+        block-size: var(--_track-height);
+        border-radius: var(--_track-radius);
+      }
+
+      &::-moz-range-track {
+        appearance: none;
+        background: var(--_track-color);
+        block-size: var(--_track-height);
+        border-radius: var(--_track-radius);
+      }
+
+      &::-moz-range-progress {
+        appearance: none;
+        background: var(--_track-fill-color);
+        block-size: var(--_track-height);
+        border-radius: var(--_track-radius);
+      }
+
+      /* Ring */
+      &::-webkit-slider-thumb {
+        appearance: none;
+        background: var(--_thumb-bg);
+        block-size: var(--_thumb-size);
+        border: 3px solid var(--surface-default);
+        border-radius: 50%;
+        box-shadow: 0 0 0 var(--_thumb-highlight-size) var(--_thumb-highlight-color);
+        cursor: ew-resize;
+        inline-size: var(--_thumb-size);
+        margin-block-start: var(--_thumb-offset);
+
+        @media (prefers-reduced-motion: no-preference) {
+          transition: box-shadow 0.1s ease;
+        }
+
+        .fieldset-item:focus-within & {
+          border-color: var(--gray-14);
+        }
+      }
+
+      &::-moz-range-thumb {
+        appearance: none;
+        background: var(--_thumb-bg);
+        block-size: var(--_thumb-size);
+        border: 3px solid var(--surface-default);
+        border-radius: 50%;
+        box-shadow: 0 0 0 var(--_thumb-highlight-size) var(--_thumb-highlight-color);
+        cursor: ew-resize;
+        inline-size: var(--_thumb-size);
+        margin-block-start: var(--_thumb-offset);
+
+        @media (prefers-reduced-motion: no-preference) {
+          transition: box-shadow 0.1s ease;
+        }
+
+        .fieldset-item:focus-within & {
+          border-color: var(--gray-14);
+        }
+      }
+
+      /* Element state */
+      .range:has(:user-invalid) &,
+      .range[data-invalid] & {
+        --_track-fill-color: var(--color-9);
+      }
+
+      &:not([disabled]) {
+        &:hover {
+          --_thumb-highlight-size: var(--size-1);
+        }
+
+        &:active {
+          --_thumb-highlight-size: var(--size-2);
+          --_track-color: light-dark(oklch(from var(--field-border-color) calc(l * 0.9) c h),
+              oklch(from var(--field-border-color) calc(l * 1.1) c h));
+        }
+      }
+
+      &[disabled] {
+        --_thumb-bg: oklch(from var(--text-primary) l c h / 50%);
+        --_track-color: var(--field-border-color);
+
+        cursor: not-allowed;
+
+        &::-webkit-slider-thumb {
+          cursor: not-allowed;
+        }
+
+        &::-moz-range-thumb {
+          cursor: not-allowed;
+        }
+      }
+    }
+  }
+
+}
+
+@layer components.root {
+  :where(.switch) {
+    --_accent-color: var(--primary);
+    --_accent-contrast: var(--primary-contrast);
+
+    --_dot-bg-color: light-dark(var(--gray-11), var(--gray-14));
+    --_dot-inset: var(--size-1) auto auto var(--size-1);
+    --_dot-outline-size: 0;
+    --_dot-size: var(--size-3);
+
+    --_track-bg-color: light-dark(var(--gray-3), var(--gray-8));
+    --_track-height: var(--size-5);
+    --_track-width: var(--size-8);
+    --_transition-tf: var(--ease-4);
+    --_transition-time: 0.2s;
+
+    align-items: center;
+    color: var(--text-primary);
+    display: inline-grid;
+    gap: 0 var(--size-2);
+    grid-auto-columns: auto;
+    grid-auto-flow: column;
+    inline-size: fit-content;
+
+    :where(input[type="checkbox"][role="switch"]) {
+      appearance: none;
+      block-size: var(--_track-height);
+      cursor: pointer;
+      inline-size: var(--_track-width);
+      margin: 0;
+      position: relative;
+
+      /* Track */
+      &::before {
+        background-color: var(--_track-bg-color);
+        block-size: var(--_track-height);
+        border: 1px solid var(--_dot-bg-color);
+        border-radius: var(--radius-round);
+        content: "";
+        inline-size: var(--_track-width);
+        inset: 0;
+        position: absolute;
+      }
+
+      &:focus-visible {
+        --focus-ring-color: currentColor;
+        outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color);
+        outline-offset: var(--focus-ring-offset);
+      }
+
+      /* Dot */
+      &::after {
+        background-color: var(--_dot-bg-color);
+        block-size: var(--_dot-size);
+        border-radius: var(--radius-round);
+        content: "";
+        inline-size: var(--_dot-size);
+        inset: var(--_dot-inset);
+        outline: var(--_dot-outline-size) solid var(--_dot-bg-color);
+        outline-offset: -1px;
+        position: absolute;
+      }
+
+      /* Checked */
+      &:checked {
+        &::before {
+          background-color: var(--_accent-color);
+          border-color: var(--_accent-color);
+          transition:
+            background-color var(--_transition-time) var(--_transition-tf),
+            border-color var(--_transition-time) var(--_transition-tf);
+        }
+
+        /* Dot */
+        &::after {
+          --_dot-bg-color: var(--_accent-contrast);
+          --_dot-outline-size: calc(var(--size-1) - 1px);
+
+          inset-inline-start: calc(var(--_track-width) - var(--_dot-size) - var(--size-1));
+        }
+      }
+
+      /* Animation */
+      @media (prefers-reduced-motion: no-preference) {
+
+        /* Track */
+        &::before {
+          transition:
+            background-color var(--_transition-time) var(--_transition-tf),
+            border-color var(--_transition-time) var(--_transition-tf);
+        }
+
+        /* Dot */
+        &::after {
+          transition: all var(--_transition-time) var(--_transition-tf);
+        }
+
+        &:active:after {
+          --_dot-outline-size: calc(var(--size-1) + 1px);
+        }
+
+        &:checked {
+          &:active:after {
+            --_dot-outline-size: calc(var(--size-1) + 1px);
+          }
+        }
+      }
+    }
+
+    /* Icons */
+    &:has(.icon-checked, .icon-unchecked) {
+      [role="switch"] {
+        grid-column: 1 / -1;
+        grid-row: 1;
+      }
+
+      &:has([role="switch"]:checked) {
+        .icon-unchecked {
+          display: none;
+        }
+
+        .icon-checked {
+          display: block;
+        }
+      }
+
+      .icon-checked {
+        display: none;
+      }
+
+      .icon-unchecked,
+      .icon-checked {
+        grid-column: 1;
+        grid-row: 1;
+        pointer-events: none;
+        z-index: 1;
+
+        svg {
+          display: block;
+          inline-size: var(--_dot-size);
+        }
+      }
+
+      .icon-unchecked {
+        margin-inline-start: calc(var(--_track-width) - var(--_dot-size) - var(--size-1));
+      }
+
+      .icon-checked {
+        margin-inline-start: var(--size-1);
+      }
+    }
+
+    /* Required dot */
+    &:has(:invalid) {
+      .label:after {
+        color: var(--red);
+        content: "*";
+        inset: 0 -0.25ex auto auto;
+        position: absolute;
+      }
+    }
+
+    /* Disabled */
+    &:has([disabled]) {
+      cursor: not-allowed;
+      opacity: 0.64;
+      user-select: none;
+
+      input {
+        cursor: not-allowed;
+      }
+    }
+
+    /* Label */
+    .label {
+      color: var(--text-primary);
+      font-size: var(--font-size-05);
+      grid-column: 2;
+      grid-row: 1;
+      min-width: 0;
+      padding-inline: 0 1ex;
+      position: relative;
+      user-select: none;
+    }
+
+    /* 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;
+    }
+
+    /* Size */
+    &.small {
+      --_dot-size: 0.75rem;
+      --_track-height: var(--size-4);
+      --_track-width: 2.5rem;
+    }
+
+    /* 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[role="switch"] {
+        grid-column: 2;
+        grid-row: 1;
+      }
+
+      &:has(.icon-checked, .icon-unchecked) {
+
+        input[role="switch"],
+        .icon-checked,
+        .icon-unchecked {
+          grid-column: 2;
+        }
+      }
+
+      :where(.end-text) {
+        grid-column: 1;
+        grid-row: 2;
+      }
+    }
+
+    /* Stacked layout */
+    &.stack {
+      grid-auto-columns: unset;
+      justify-items: center;
+
+      .label {
+        grid-column: 1/-1;
+        grid-row: 2;
+        margin-block-start: var(--size-1);
+        padding-inline: 1ex;
+      }
+
+      .end-text {
+        grid-column: 1/-1;
+        grid-row: 3;
+      }
+    }
+
+    /* Validation */
+    &[data-invalid] {
+      input {
+        border-radius: var(--radius-round);
+        outline: 2px solid var(--color-9);
+      }
+
+      .end-text {
+        color: var(--color-9);
+      }
+    }
+  }
+}
+
+@layer components.extended {
+	:where(#toast-manager) {
+		background: none;
+		block-size: auto;
+		border: none;
+		display: none;
+		flex-direction: column-reverse;
+		gap: var(--size-3);
+		inline-size: auto;
+		inset: auto var(--size-4) var(--size-4) auto;
+		margin: 0;
+		max-inline-size: calc(100vi - var(--size-8));
+		overflow: visible;
+		padding: 0;
+		pointer-events: none;
+		position: fixed;
+		z-index: 1000;
+
+		&:popover-open {
+			display: flex;
+		}
+
+		&::backdrop {
+			display: none;
+		}
+
+		/* Optional cap on visible toasts. Older toasts beyond this depth are hidden
+		   but still in the DOM so they animate cleanly when newer ones are removed. */
+		/* > .toast:nth-last-child(n + 6) { display: none; } */
+	}
+
+	:where(.toast) {
+		--_anim-enter: 0.3s;
+		--_anim-exit: 0.3s;
+
+		align-items: center;
+		animation:
+			toast-enter var(--_anim-enter) var(--ease-out-3) both,
+			toast-hold attr(data-duration type(<time>), 5s) linear both,
+			toast-exit var(--_anim-exit) var(--ease-in-3) both;
+		animation-delay:
+			0s,
+			var(--_anim-enter),
+			calc(var(--_anim-enter) + attr(data-duration type(<time>), 5s));
+		background-color: light-dark(var(--gray-15), var(--gray-2));
+		border-radius: var(--border-radius);
+		box-shadow: var(--shadow-3);
+		color: var(--text-primary-contrast);
+		display: flex;
+		gap: var(--size-3);
+		justify-content: space-between;
+		min-inline-size: 30ch;
+		padding: var(--size-3) var(--size-4);
+		pointer-events: auto;
+
+		&:hover {
+			animation-play-state: paused;
+		}
+
+		&.exiting {
+			animation: toast-exit var(--_anim-exit) var(--ease-in-3) forwards;
+		}
+
+		.icon {
+			background: no-repeat center / contain;
+			block-size: var(--size-4);
+			flex-shrink: 0;
+			inline-size: var(--size-4);
+		}
+
+		/* Hide the icon slot when there's no severity to render against. */
+		&:not([data-severity]) .icon {
+			display: none;
+		}
+
+		.content {
+			font-size: var(--font-size-05);
+			word-break: break-word;
+		}
+
+		.title {
+			font-weight: 600;
+		}
+
+		.description {
+			color: oklch(from currentColor l c h / 75%);
+			font-size: var(--font-size-0);
+		}
+
+		.close-button {
+			background: none;
+			border: none;
+			color: inherit;
+			cursor: pointer;
+			display: grid;
+			opacity: 0.7;
+			padding: var(--size-1);
+			place-items: center;
+			transition: opacity 0.2s;
+
+			&:hover {
+				opacity: 1;
+			}
+		}
+
+		/* Severity icons via CSS data URIs — keeps icon assets out of JS strings. */
+		&[data-severity="success"] .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 {
+			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 {
+			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 {
+			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>");
+		}
+	}
+
+	@keyframes toast-enter {
+		from {
+			opacity: 0;
+			translate: var(--size-4) 0;
+		}
+
+		to {
+			opacity: 1;
+			translate: 0 0;
+		}
+	}
+
+	/* Identity keyframe — only purpose is to delay the exit animation by the
+	   author-defined duration. */
+	@keyframes toast-hold {
+		from {
+			opacity: 1;
+		}
+
+		to {
+			opacity: 1;
+		}
+	}
+
+	@keyframes toast-exit {
+		from {
+			opacity: 1;
+			scale: 1;
+			translate: 0 0;
+		}
+
+		to {
+			opacity: 0;
+			scale: 0.9;
+			translate: 0 var(--size-4);
+		}
+	}
+}
+
+@layer components.root {
+
+  :where(.p) {
+    text-wrap: pretty;
+
+    &.small {
+      font-size: var(--font-size-1);
+    }
+
+    &.large {
+      font-size: var(--font-size-3);
+    }
+  }
+
+  :where(.h1, .h2, .h3, .h4, .h5, .h6) {
+    color: var(--text-primary);
+    font-weight: 700;
+    text-wrap: pretty;
+  }
+
+  :where(.h1) {
+    font-size: var(--font-size-h1, var(--font-size-7));
+    letter-spacing: -0.02em;
+    line-height: 1.15;
+  }
+
+  :where(.h2) {
+    font-size: var(--font-size-h2, var(--font-size-5, 2rem));
+    letter-spacing: -0.02em;
+    line-height: 1.2;
+  }
+
+  :where(.h3) {
+    font-size: var(--font-size-h3, var(--font-size-4, 1.5rem));
+    letter-spacing: -0.01em;
+    line-height: 1.167;
+  }
+
+  :where(.h4) {
+    font-size: var(--font-size-h4, var(--font-size-3, 1.25rem));
+    letter-spacing: -0.01em;
+    line-height: 1.235;
+  }
+
+  :where(.h5) {
+    font-size: var(--font-size-h5, var(--font-size-2, 1.1rem));
+    line-height: 1.334;
+  }
+
+  :where(.h6) {
+    font-size: var(--font-size-h6, var(--font-size-1, 1rem));
+    line-height: 1;
+  }
+
+  /** Overline */
+  :where(.overline) {
+    color: light-dark(oklch(from var(--text-muted) calc(l * 1.25) c h),
+        oklch(from var(--text-muted) calc(l * 0.75) c h));
+    font-size: var(--font-size-0);
+    font-weight: 500;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+  }
+
+  :where(.hgroup) {
+    &>p {
+      margin: 0;
+    }
+
+    &> :where(h1, h2, h3, h4, h5, h6) {
+      margin-block: 0 0.4em;
+    }
+
+    /* First p element (overline) */
+    &>p:first-of-type:first-child {
+      color: light-dark(oklch(from var(--text-muted) calc(l * 1.25) c h),
+          oklch(from var(--text-muted) calc(l * 0.75) c h));
+      font-size: var(--font-size-0);
+      font-weight: 500;
+      letter-spacing: 0.06em;
+      text-transform: uppercase;
+    }
+
+    /* Body paragraphs after the heading */
+    &>p:not(:first-of-type:first-child) {
+      color: oklch(from currentColor l c h / 75%);
+      font-size: var(--font-size-3);
+      line-height: 1.6;
+    }
+
+    &>p+p {
+      margin-block-start: 0.75em;
+    }
+  }
+
+  /** Caption */
+  :where(.caption) {
+    color: var(--text-muted);
+    font-size: var(--font-size-0);
+    line-height: 1.6;
+  }
+
+
+
+  /* Inline text elements — class utilities (work anywhere) */
+  :where(.u, .abbr, .dfn) {
+    text-decoration: underline;
+    text-underline-offset: 1px;
+
+    @supports (-moz-appearance: none) {
+      text-underline-offset: 2px;
+    }
+  }
+
+  :where(.abbr, .dfn) {
+    font-style: normal;
+    text-decoration: var(--color-9) underline dotted;
+
+    &[title] {
+      cursor: help;
+      text-underline-offset: 1px;
+    }
+
+    @supports (-moz-appearance: none) {
+      text-underline-offset: 2px;
+    }
+  }
+
+  :where(.sup) {
+    font-size: 0.5em;
+    vertical-align: super;
+  }
+
+  :where(p, span).small {
+    font-size: max(0.5em, var(--font-size-0, 0.75rem));
+  }
+
+  :where(.cite) {
+    font-style: italic;
+  }
+
+  /* Code */
+  :where(.kbd) {
+    font-family: var(--font-mono);
+    background-color: var(--text-muted);
+    border-color: var(--text-muted);
+    border-radius: var(--radius-2);
+    border-width: var(--border-size-1);
+    color: var(--text-muted-contrast);
+    padding: 0.1ex 0.3ex;
+    word-break: break-word;
+  }
+
+  :where(.mark) {
+    border-radius: var(--radius-2);
+    box-decoration-break: clone;
+    padding: .1ex .3ex;
+    vertical-align: baseline;
+  }
+
+  :where(.s) {
+    text-decoration: line-through;
+  }
+
+  :where(.sub) {
+    font-size: 0.75em;
+    vertical-align: sub;
+  }
+
+  :where(.del) {
+    color: var(--color-9);
+    text-decoration: line-through;
+  }
+
+  :where(.ins) {
+    color: var(--color-9);
+    text-decoration: underline;
+    text-underline-offset: 1px;
+  }
+
+  :where(.var) {
+    font-family: var(--font-mono);
+    background-color: var(--text-muted);
+    border-color: var(--text-muted);
+    border-radius: var(--radius-2);
+    border-width: var(--border-size-1);
+    color: var(--text-muted-contrast);
+    padding: 0.1ex 0.3ex;
+    word-break: break-word;
+  }
+
+  :where(.samp) {
+    font-family: var(--font-mono);
+  }
+
+  /* Blockquote */
+  :where(.blockquote) {
+    border-inline-start: var(--border-size-3) solid currentColor;
+    padding-block: var(--size-3);
+    padding-inline: var(--size-4);
+
+    :first-child {
+      margin-block-start: 0;
+    }
+
+    :last-child {
+      margin-block-end: 0;
+    }
+
+    footer {
+      color: var(--text-muted);
+      margin-block-start: var(--size-3);
+    }
+  }
+
+  /* Code block */
+  :where(pre.code-block) {
+    background-color: var(--color-15);
+    border-radius: var(--border-radius);
+    color: var(--color-1);
+    font-family: var(--font-mono);
+    font-size: var(--font-size-05);
+    max-inline-size: 100%;
+    overflow-x: auto;
+    padding-block: var(--size-3);
+    padding-inline: var(--size-4);
+    scrollbar-width: thin;
+    white-space: pre;
+
+    >code {
+      background: none;
+      border-radius: 0;
+      color: inherit;
+      font-size: inherit;
+      padding: 0;
+      word-break: normal;
+      writing-mode: inherit;
+    }
+  }
+
+}
+
+/* Rich text */
+
+@layer components.extended {
+  @scope (.rich-text) to (.not-rich-text) {
+    a {
+      color: var(--primary);
+      cursor: pointer;
+      font-size: inherit;
+      font-weight: 700;
+      line-height: inherit;
+      text-decoration: underline;
+      text-decoration-color: var(--primary);
+      text-underline-offset: 2px;
+
+      &[href] {
+
+        &:hover,
+        &:focus-visible {
+          color: var(--primary-light);
+        }
+      }
+    }
+
+    /* Blockquote */
+    blockquote {
+      border-inline-start: var(--border-size-3) solid currentColor;
+      font-size: inherit;
+      line-height: inherit;
+      padding-block: var(--size-3);
+      padding-inline: var(--size-4);
+
+      :first-child {
+        margin-block-start: 0;
+      }
+
+      :last-child {
+        margin-block-end: 0;
+      }
+
+      footer {
+        color: var(--text-muted);
+        margin-block-start: var(--size-3);
+      }
+    }
+
+    /* Code */
+    pre {
+      border-radius: var(--border-radius);
+      font-size: var(--font-size-05);
+      margin-block: var(--size-6);
+      max-inline-size: max-content;
+      min-inline-size: 0;
+      padding-block: var(--size-3);
+      padding-inline: var(--size-4);
+      white-space: pre;
+    }
+
+    pre:has(> code) {
+      background-color: var(--color-15);
+      border-radius: var(--border-radius);
+      color: var(--color-1);
+      max-inline-size: 100%;
+      overflow-x: auto;
+      scrollbar-width: thin;
+
+      >code {
+        background: none;
+        border-radius: 0;
+        color: inherit;
+        font-size: inherit;
+        padding: 0;
+        word-break: normal;
+        writing-mode: inherit;
+      }
+    }
+
+
+    /* Text */
+    p {
+      font-size: inherit;
+      line-height: inherit;
+      margin-block: 1.25em;
+      text-wrap: pretty;
+    }
+
+    :is(h1, h2, h3, h4, h5, h6) {
+      color: var(--text-primary);
+      font-weight: 700;
+      text-wrap: pretty;
+
+      &+*:not(&) {
+        margin-block-start: 0;
+      }
+    }
+
+    h1 {
+      font-size: var(--font-size-h1, var(--font-size-7));
+      letter-spacing: -0.02em;
+      line-height: 1.1111111;
+      margin-block: 0 0.8888889em;
+    }
+
+    h2 {
+      font-size: var(--font-size-h2, var(--font-size-5, 2rem));
+      letter-spacing: -0.02em;
+      line-height: 1.3333333;
+      margin-block: 2em 1em;
+    }
+
+    h3 {
+      font-size: var(--font-size-h3, var(--font-size-4, 1.5rem));
+      letter-spacing: -0.01em;
+      line-height: 1.6;
+      margin-block: 1.6em 0.6em;
+    }
+
+    h4 {
+      font-size: var(--font-size-h4, var(--font-size-3, 1.25rem));
+      letter-spacing: -0.01em;
+      line-height: 1.5;
+      margin-block: 1.5em 0.5em;
+    }
+
+    h5 {
+      font-size: var(--font-size-h5, var(--font-size-2, 1.1rem));
+      line-height: 1;
+      margin-block: 0 var(--size-1);
+    }
+
+    h6 {
+      font-size: var(--font-size-h6, var(--font-size-1, 1rem));
+      line-height: 1;
+      margin-block: 0 var(--size-1);
+    }
+
+    /** Overline */
+    :is(.overline, hgroup p:first-of-type:first-child) {
+      color: light-dark(oklch(from var(--text-muted) calc(l * 1.25) c h),
+          oklch(from var(--text-muted) calc(l * 0.75) c h));
+      font-size: var(--font-size-0);
+      font-weight: 500;
+      letter-spacing: 0.06em;
+      text-transform: uppercase;
+    }
+
+    hgroup {
+      &>p {
+        margin: 0;
+      }
+
+      &> :where(h1, h2, h3, h4, h5, h6) {
+        margin-block: 0 0.4em;
+      }
+
+      &+* {
+        margin-block-start: 3em;
+      }
+
+      /* Body paragraphs after the heading */
+      &>p:not(:first-of-type:first-child) {
+        color: oklch(from currentColor l c h / 75%);
+        font-size: var(--font-size-3);
+        line-height: 1.6;
+      }
+
+      &>p+p {
+        margin-block-start: 0.75em;
+      }
+    }
+
+    /* Lists */
+    ul:not([class]) {
+      list-style-type: disc;
+    }
+
+    ol:not([class]) {
+      list-style-type: decimal;
+    }
+
+    :where(ul, ol):not([class]) {
+      display: grid;
+      font-size: inherit;
+      gap: 0.5em;
+      line-height: inherit;
+      margin-block-end: 1.25em;
+      margin-block-start: 1.25em;
+      padding-inline-start: 1.625em;
+
+      li {
+        padding-inline-start: 0.375em;
+      }
+    }
+
+    /* Nested lists */
+    :where(ul ul),
+    :where(ul ol),
+    :where(ol ul),
+    :where(ol ol) {
+      margin-block-end: 0.75em;
+      margin-block-start: 0.75em;
+    }
+
+    /* Description lists */
+    :where(dl) {
+      font-size: inherit;
+      line-height: inherit;
+      margin-block-end: 1.25em;
+      margin-block-start: 1.25em;
+
+      dt {
+        font-weight: 700;
+        margin-block-start: 1.25em;
+      }
+
+      dd {
+        margin-block-start: 0.5em;
+        padding-inline-start: 1.625em;
+      }
+    }
+
+    /* Figures */
+    figure {
+      display: grid;
+      gap: var(--size-2);
+      margin-block: var(--size-7);
+      place-items: center;
+
+      &>* {
+        margin-block: 0;
+      }
+
+      & figcaption {
+        font-size: var(--font-size-0);
+        text-wrap: pretty;
+      }
+    }
+
+    /* Remove top margin from first child */
+    &> :first-child {
+      margin-block-start: 0;
+    }
+
+    /* Remove bottom margin from last child */
+    &> :last-child {
+      margin-block-end: 0;
+    }
+
+    /* Horizontal rules */
+    hr {
+      &+* {
+        margin-block-start: 0;
+      }
+    }
+
+    /* Inline text elements */
+    :where(ins, u, abbr, dfn) {
+      text-decoration: underline;
+      text-underline-offset: 1px;
+
+      @supports (-moz-appearance: none) {
+        text-underline-offset: 2px;
+      }
+    }
+
+    :where(abbr, dfn) {
+      font-style: normal;
+      text-decoration: var(--color-9) underline dotted;
+
+      &[title] {
+        cursor: help;
+        text-underline-offset: 1px;
+      }
+
+      @supports (-moz-appearance: none) {
+        text-underline-offset: 2px;
+      }
+    }
+
+    sup {
+      font-size: 0.5em;
+      vertical-align: super;
+    }
+
+    :where(del, ins) {
+      color: var(--color-9);
+    }
+
+    small {
+      font-size: max(0.5em, var(--font-size-0, 0.75rem));
+    }
+
+    cite {
+      font-style: italic;
+    }
+
+    /* Code */
+    :where(code, kbd, samp, pre) {
+      font-family: var(--font-mono);
+    }
+
+    code {
+      background-color: oklch(0 0 0 / 18%);
+      border-radius: var(--border-size-3);
+      font-size: 0.9em;
+      padding: 0.1ex 0.3ex;
+    }
+
+    :where(kbd, var) {
+      background-color: var(--text-muted);
+      border-color: var(--text-muted);
+      border-radius: var(--radius-2);
+      border-width: var(--border-size-1);
+      color: var(--text-muted-contrast);
+      padding: 0.1ex 0.3ex;
+    }
+
+    :not(pre) code,
+    kbd {
+      word-break: break-word;
+    }
+
+    :not(pre) code {
+      border-radius: var(--border-radius, var(--radius-2));
+      padding: 0.5ex;
+      writing-mode: lr;
+    }
+
+    mark {
+      border-radius: var(--radius-2);
+      box-decoration-break: clone;
+      padding: .1ex .3ex;
+      vertical-align: baseline;
+    }
+
+    s {
+      text-decoration: line-through;
+    }
+
+    sub {
+      font-size: 0.75em;
+      vertical-align: sub;
+    }
+  }
+}
+
+/*** Extended components (has dependencies) */
+
+@layer components.extended {
+  :where(.badge) {
+    --_anchor-tx: -50%;
+    --_anchor-ty: 50%;
+    --_badge-inset: auto auto 100% 100%;
+    --_bg-color: var(--primary);
+    --_border-color: var(--primary);
+    --_dot-size: var(--size-2);
+    --_size: var(--size-4);
+    --_text-color: var(--gray-1);
+
+    display: inline-flex;
+    position: relative;
+    vertical-align: middle;
+
+    /* Floating wrapper: traditional inset-based positioning so this works
+       in browsers without position-area support (Firefox, older Safari). */
+    &>.anchor-floating:not([popover]) {
+      inset: var(--_badge-inset);
+      position-anchor: auto;
+      position-area: none;
+    }
+
+    /* Indicator */
+    &>.anchor-floating>.badge-indicator {
+      background-color: var(--_bg-color);
+      block-size: var(--_size);
+      border: 2px solid var(--_border-color);
+      border-radius: var(--radius-round);
+      color: var(--_text-color);
+      display: grid;
+      font-size: 12px;
+      font-weight: 500;
+      inline-size: max-content;
+      line-height: normal;
+      min-inline-size: var(--_size);
+      padding-inline: var(--size-1);
+      place-items: center;
+      text-align: center;
+      transition: opacity 0.2s var(--ease-out-1);
+    }
+
+    /* Colors */
+    &.critical {
+      --_bg-color: var(--critical);
+      --_border-color: var(--critical);
+    }
+
+    &.success {
+      --_bg-color: var(--success);
+      --_border-color: var(--success);
+    }
+
+    &.info {
+      --_bg-color: var(--info);
+      --_border-color: var(--info);
+    }
+
+    &.warning {
+      --_bg-color: var(--warning);
+      --_border-color: var(--warning);
+    }
+
+    &.neutral {
+      --_bg-color: var(--neutral);
+      --_border-color: var(--neutral);
+    }
+
+    /* Alignment */
+    &.start-start {
+      --_anchor-tx: 50%;
+      --_anchor-ty: 50%;
+      --_badge-inset: auto 100% 100% auto;
+    }
+
+    &.end-start {
+      --_anchor-tx: 50%;
+      --_anchor-ty: -50%;
+      --_badge-inset: 100% 100% auto auto;
+    }
+
+    &.end-end {
+      --_anchor-tx: -50%;
+      --_anchor-ty: -50%;
+      --_badge-inset: 100% auto auto 100%;
+    }
+
+    /* Dot */
+    &.dot {
+      --_anchor-tx: calc((var(--_dot-size) - 2px) * -1);
+      --_anchor-ty: var(--_dot-size);
+    }
+
+    &.dot>.anchor-floating>.badge-indicator {
+      block-size: var(--_dot-size);
+      inline-size: var(--_dot-size);
+      min-inline-size: var(--_dot-size);
+      padding: 0;
+    }
+
+    /* Visibility */
+    &.invisible>.anchor-floating>.badge-indicator {
+      opacity: 0;
+      pointer-events: none;
+    }
+  }
+}
+
+@layer components.extended {
+  :where([role="group"].button-group) {
+    --_border-radius: var(--button-border-radius);
+
+    border-radius: var(--_border-radius);
+    display: inline-flex;
+    min-width: max-content;
+
+    /* Button */
+    button {
+      border-radius: 0;
+
+      /* button.css > --_accent-tonal */
+      --_divider-color: light-dark(oklch(from var(--_accent-tonal) calc(l - 0.1) c h),
+          oklch(from var(--_accent-tonal) calc(l + 0.1) c h));
+
+      &.outlined {
+        --_divider-color: var(--_border-color);
+      }
+
+      &.filled {
+        --_divider-color: currentColor;
+      }
+
+      &:focus-visible {
+        outline-offset: -4px;
+      }
+
+      /* Color inheritance from Button Group — shared interaction model.
+         The .critical scope class in theme.css redirects --palette-source so
+         --color-6 below becomes a tint of the active color. */
+      :where(.button-group.critical,
+        .button-group.primary) & {
+        --_color-contrast: var(--gray-1);
+        --_color-tonal: var(--color-6);
+        --_accent-tonal-contrast: var(--text-primary-contrast);
+        --_default-hover-bg-color: oklch(from var(--_accent) l c h / 15%);
+        --_default-active-bg-color: oklch(from var(--_accent) l c h / 25%);
+        --_filled-hover-bg-color: oklch(from var(--_accent) calc(l - 0.1) c h);
+        --_filled-active-bg-color: oklch(from var(--_accent) calc(l - 0.15) c h);
+        --_outlined-active-bg-color: oklch(from var(--_accent) calc(l - 0.1) c h);
+      }
+
+      :where(.button-group.critical) & {
+        --_color: var(--critical);
+      }
+
+      :where(.button-group.primary) & {
+        --_color: var(--primary);
+      }
+
+      :where(.button-group.small) & {
+        --_min-height: 1.875rem;
+        padding-block: 0;
+        padding-inline: 1ex;
+      }
+
+      :where(.button-group.large) & {
+        --_min-height: 2.875rem;
+        padding-inline: 4ex;
+      }
+
+      :where(.button-group.outlined) & {
+        --_border-color: var(--_accent);
+        --_divider-color: var(--_accent);
+
+        &:where(:not([disabled])) {
+          &:where(:not(:active):hover) {
+            --_bg-color: var(--_accent);
+            --_border-color: var(--_accent);
+            --_text-color: var(--_accent-contrast);
+          }
+
+          &:where(:active) {
+            --_bg-color: var(--_outlined-active-bg-color);
+            --_border-color: var(--_outlined-active-bg-color);
+            --_text-color: var(--_accent-contrast);
+          }
+        }
+      }
+
+      :where(.button-group.tonal) & {
+        --_bg-color: var(--_accent-tonal);
+        --_text-color: var(--_accent-tonal-contrast);
+
+        &:where(:not([disabled])) {
+          &:where(:not(:active):hover) {
+            --_bg-color: var(--_accent);
+            --_text-color: var(--_accent-contrast);
+          }
+
+          &:where(:active) {
+            --_bg-color: var(--_outlined-active-bg-color);
+            --_text-color: var(--_accent-contrast);
+          }
+        }
+      }
+
+      :where(.button-group.filled) & {
+        --_bg-color: var(--_accent);
+        --_text-color: var(--_accent-contrast);
+        --_divider-color: currentColor;
+
+        :where(.button-group.critical,
+          .button-group.primary) & {
+          --_divider-color: light-dark(oklch(from var(--_accent) calc(l - 0.1) c h),
+              oklch(from var(--_accent) calc(l + 0.1) c h));
+        }
+
+        &:where(:not([disabled])) {
+          &:where(:not(:active):hover) {
+            --_bg-color: var(--_filled-hover-bg-color);
+          }
+
+          &:where(:active) {
+            --_bg-color: var(--_filled-active-bg-color);
+          }
+        }
+      }
+    }
+
+    &:not(.vertical) {
+      button {
+        &:first-of-type {
+          border-end-start-radius: var(--_border-radius);
+          border-start-start-radius: var(--_border-radius);
+        }
+
+        &:last-of-type {
+          border-end-end-radius: var(--_border-radius);
+          border-start-end-radius: var(--_border-radius);
+        }
+
+        /* Siblings */
+        &+& {
+          border-inline-start-color: var(--_divider-color);
+          border-inline-width: 1px;
+          margin-inline-start: -1px;
+
+          &[disabled] {
+            border-inline-start-color: color-mix(in oklch, var(--_divider-color) 40%, transparent);
+          }
+        }
+      }
+    }
+
+    &.vertical {
+      flex-direction: column;
+
+      button {
+        padding: var(--size-2);
+
+        &:has(svg) {
+          aspect-ratio: 1;
+          padding: var(--size-1);
+        }
+
+        &:first-of-type {
+          border-start-start-radius: var(--_border-radius);
+          border-start-end-radius: var(--_border-radius);
+        }
+
+        &:last-of-type {
+          border-end-start-radius: var(--_border-radius);
+          border-end-end-radius: var(--_border-radius);
+        }
+
+        &+& {
+          border-block-start: 1px solid var(--_divider-color);
+          margin-block-start: -1px;
+
+          &[disabled] {
+            border-block-start-color: color-mix(in oklch, var(--_divider-color) 40%, transparent);
+          }
+        }
+      }
+    }
+  }
+}
+
+@layer components.extended {
+  :where(details.accordion) {
+    --_actions-gap: var(--size-1);
+    --_actions-margin-block-start: var(--size-3);
+    --_actions-padding-block-end: var(--size-1);
+    --_actions-padding-inline: var(--size-3) var(--size-1);
+    --_bg-color: transparent;
+    --_border-color: transparent;
+    --_border-radius: var(--border-radius, 4px);
+    --_border-width: 0;
+    --_content-padding-block: var(--size-2) var(--size-3);
+    --_content-padding-inline: var(--_padding-inline);
+    --_margin-inline: var(--size-1);
+    --_padding-inline: initial;
+    --_shadow: none;
+    --_summary-padding-block: var(--size-3);
+    --_summary-padding-inline: var(--_padding-inline);
+    --_svg-transition: 0.2s var(--ease-1);
+    --_transition: 0.2s;
+
+    background-color: var(--_bg-color);
+    border: var(--_border-width) solid var(--_border-color);
+    border-radius: var(--_border-radius);
+    box-shadow: var(--_shadow);
+    display: block;
+    margin-inline: var(--_margin-inline);
+    transition: all var(--_transition) ease-out;
+
+    &.elevated {
+      --_bg-color: var(--surface-elevated);
+      --_margin-inline: 0;
+      --_padding-inline: var(--size-3);
+      --_shadow: var(--shadow-3);
+    }
+
+    &.outlined {
+      --_bg-color: var(--surface-default);
+      --_border-color: var(--border-color);
+      --_border-width: 1px;
+      --_margin-inline: 0;
+      --_padding-inline: var(--size-3);
+    }
+
+    &.tonal {
+      --_bg-color: var(--surface-tonal);
+      --_margin-inline: 0;
+      --_padding-inline: var(--size-3);
+    }
+
+    /* Accordion animation */
+    /* https://nerdy.dev/open-and-close-transitions-for-the-details-element */
+    @media (prefers-reduced-motion: no-preference) {
+      interpolate-size: allow-keywords;
+    }
+
+    &::details-content {
+      block-size: 0;
+      opacity: 0;
+      overflow-y: clip;
+      transition:
+        content-visibility var(--_transition) allow-discrete,
+        opacity var(--_transition),
+        block-size var(--_transition);
+    }
+
+    &[open]::details-content {
+      block-size: auto;
+      opacity: 1;
+    }
+
+    /* Layout */
+    &>summary {
+      background-color: inherit;
+      cursor: pointer;
+      font-weight: 700;
+      padding-block: var(--_summary-padding-block);
+      padding-inline: var(--_summary-padding-inline);
+      user-select: none;
+
+      &:has(svg) {
+        align-items: center;
+        display: flex;
+        justify-content: space-between;
+        list-style: none;
+
+        &::marker,
+        &::-webkit-details-marker {
+          display: none;
+        }
+      }
+
+      svg {
+        transition: rotate var(--_svg-transition);
+      }
+    }
+
+    &[open]>summary svg {
+      rotate: 180deg;
+    }
+
+    &>.content {
+      margin-block-start: 0;
+      padding-block: var(--_content-padding-block);
+      padding-inline: var(--_content-padding-inline);
+    }
+
+    &>.actions {
+      display: flex;
+      gap: var(--_actions-gap);
+      justify-content: end;
+      margin-block-start: var(--_actions-margin-block-start);
+      padding-block-end: var(--_actions-padding-block-end);
+      padding-inline: var(--_actions-padding-inline);
+    }
+  }
+
+  /* Accordion group  */
+  :where(.card[role="group"]:has(details.accordion)) {
+    --_group-radius: var(--border-radius);
+    --_gutter-color: var(--border-color);
+    --_item-padding-inline: var(--size-3);
+    --_item-summary-padding-inline: var(--_item-padding-inline);
+
+    display: block;
+
+    &.card {
+      &:not(.tonal, .outlined, .elevated) {
+        --_item-summary-padding-inline: 0;
+      }
+    }
+
+    &>.content {
+      margin-block: 0;
+      padding: 0;
+    }
+
+    &>details.accordion {
+      --_border-color: transparent;
+      --_border-width: 0;
+      --_margin-inline: 0;
+      --_padding-inline: var(--_item-padding-inline);
+      --_shadow: none;
+      --_summary-padding-inline: var(--_item-summary-padding-inline);
+
+      /* Border between accordion items */
+      &+& {
+        border-block-start: 1px solid var(--_gutter-color);
+        border-radius: 0;
+      }
+
+      /* First item */
+      &:first-of-type {
+        border-start-end-radius: var(--_group-radius);
+        border-start-start-radius: var(--_group-radius);
+
+        summary {
+          border-start-end-radius: var(--_group-radius);
+          border-start-start-radius: var(--_group-radius);
+        }
+      }
+
+      /* Last item */
+      &:last-of-type {
+        border-end-end-radius: var(--_group-radius);
+        border-end-start-radius: var(--_group-radius);
+
+        summary {
+          border-end-end-radius: var(--_group-radius);
+          border-end-start-radius: var(--_group-radius);
+        }
+      }
+    }
+  }
+}
+
+@layer components.extended {
+
+  /*
+Lists meant to be used stand-alone or as part of Select elements
+
+  Intended use-case:
+  - ul.list > li
+  - .select > .list > option
+*/
+  :where(.list) {
+    --_bg-color: var(--surface-filled);
+    --_bg-color-hover: oklch(from var(--primary) l c h / 15%);
+
+    background-color: var(--_bg-color);
+    color: var(--text-primary);
+    list-style: none;
+    padding: var(--size-2) 0;
+
+    @media (pointer: coarse) {
+
+      &,
+      * {
+        user-select: none;
+      }
+    }
+
+    /* Background color */
+    &.transparent {
+      --_bg-color: transparent;
+    }
+
+    &.default {
+      --_bg-color: var(--surface-default);
+    }
+
+    &.tonal {
+      --_bg-color: var(--surface-tonal);
+    }
+
+    /* Borders on all list items */
+    &.bordered {
+      :where(li + li, option + option) {
+        margin-block-start: var(--size-3);
+
+        &::before {
+          block-size: 1px;
+          border-block-start: 1px solid var(--border-color);
+          content: "";
+          display: block;
+          inline-size: 100%;
+          inset: calc(-1 * var(--size-2)) 0 auto 0;
+          position: absolute;
+          visibility: visible;
+          /* override select > option:before style */
+        }
+      }
+    }
+
+    /* Dense - less gaps and spacing */
+    &.dense {
+      :where(li, option) {
+        gap: var(--size-2);
+        min-block-size: var(--size-7);
+        padding: var(--size-1) var(--size-2);
+
+        &.border-top {
+          margin-block-start: var(--size-2);
+
+          &::before {
+            inset: calc(-1 * var(--size-1)) 0 auto 0;
+          }
+        }
+
+        /* Clickable list item */
+        &:has(> a, > button, > label) {
+          min-block-size: auto;
+          padding: 0;
+        }
+
+        &> :where(a, button, label) {
+          gap: var(--size-2);
+          min-block-size: var(--size-7);
+          padding: var(--size-1) var(--size-2);
+        }
+
+        /* Checkbox / Radio */
+        &>label {
+          .end {
+            padding-inline-end: 0.125rem;
+          }
+
+          &:where(.checkbox, .radio) {
+            --_input-size: var(--size-3);
+          }
+        }
+
+        /* Leading and trailing content */
+        .start,
+        .end {
+          .avatar {
+            max-inline-size: var(--size-6);
+          }
+
+          .icon-button,
+          svg {
+            max-inline-size: var(--size-4);
+          }
+
+          .checkbox,
+          .radio {
+            --_input-size: var(--size-3);
+          }
+        }
+      }
+    }
+
+    /* Gutterless */
+    &.gutterless {
+      :where(li, option) {
+        padding-inline: 0;
+
+        &> :where(a, button, label) {
+          padding-inline: 0;
+        }
+      }
+    }
+
+    /* List item */
+    :where(li, option, [role="group"] > label) {
+      align-items: center;
+      background-color: var(--_bg-color);
+      display: flex;
+      font-size: var(--font-size-05);
+      gap: var(--size-3);
+      isolation: isolate;
+      min-block-size: 40px;
+      padding: var(--size-2) var(--size-3);
+      position: relative;
+
+      &::before {
+        display: none;
+        /* removing checkmark from option */
+      }
+
+      * {
+        font-size: inherit;
+      }
+
+      /* Clickable list item */
+      &:has(> a, > button, > label) {
+        background: transparent;
+        display: block;
+        min-block-size: auto;
+        padding: 0;
+
+        &[aria-selected="true"]> :where(a, button, label),
+        &[aria-selected="true"],
+        &:has(> [aria-current="page"])> :where(a, button, label) {
+          background-color: var(--_bg-color-hover);
+        }
+      }
+
+      /* Select option */
+      &:where(option) {
+        align-items: center;
+        background-color: var(--_bg-color);
+        color: inherit;
+        cursor: pointer;
+        display: flex;
+        gap: var(--size-3);
+        inline-size: 100%;
+        margin: 0;
+        min-block-size: 40px;
+        padding: var(--size-2) var(--size-3);
+        text-align: start;
+        text-decoration: none;
+        z-index: 0;
+
+        &:hover {
+          background-color: var(--_bg-color-hover);
+        }
+
+        &[aria-selected="true"] {
+          background-color: var(--_bg-color-hover);
+          color: var(--primary);
+        }
+
+        &:checked {
+          background-color: oklch(from var(--primary) l c h / 30%);
+        }
+      }
+
+      &>a,
+      &>button,
+      &>label {
+        align-items: center;
+        background-color: var(--_bg-color);
+        color: inherit;
+        cursor: pointer;
+        display: flex;
+        gap: var(--size-3);
+        inline-size: 100%;
+        margin: 0;
+        min-block-size: 40px;
+        outline-offset: -3px;
+        padding: var(--size-2) var(--size-3);
+        text-align: start;
+        text-decoration: none;
+        z-index: 0;
+
+        &:hover {
+          background-color: var(--_bg-color-hover);
+        }
+
+        &[aria-selected="true"],
+        &[aria-current="page"] {
+          background-color: var(--_bg-color-hover);
+        }
+      }
+
+      /* Checkbox / Radio / Switch */
+      &>label {
+        &:where(.checkbox, .radio, .switch) {
+          display: flex;
+        }
+
+        .end {
+          padding-inline-end: var(--size-1);
+        }
+
+        &:where(.checkbox, .radio) {
+          inline-size: 100%;
+        }
+
+        /* Switches look comically big in lists, so it's better to use a smaller variant  */
+        &.switch {
+          --_dot-size: 0.75rem;
+          --_track-height: var(--size-4);
+          --_track-width: 2.5rem;
+        }
+      }
+
+      /* Video */
+      &:has(video) {
+        padding: 0.75rem var(--size-3) 0.75rem 0;
+      }
+
+      /* Border between list items */
+      &.border-top {
+        margin-block-start: var(--size-3);
+
+        &::before {
+          block-size: 1px;
+          border-block-start: 1px solid var(--border-color);
+          content: "";
+          display: block;
+          inline-size: 100%;
+          inset: calc(-1 * var(--size-2)) 0 auto 0;
+          position: absolute;
+        }
+      }
+
+      /* Text */
+      .text {
+        flex: 1;
+        line-height: 1.6;
+
+        :where(h1, h2, h3, h4, h5, h6, p, span) {
+          color: inherit;
+          font-weight: 400;
+        }
+
+        p+p {
+          color: var(--text-muted);
+          font-size: var(--font-size-0);
+        }
+      }
+
+      /* Leading content */
+      .start {
+        align-items: center;
+        align-self: center;
+        display: grid;
+        z-index: 1;
+
+        &:has(svg) {
+          max-inline-size: var(--size-5);
+        }
+
+        svg {
+          padding-block-start: 0.125rem;
+        }
+
+        img {
+          aspect-ratio: 1;
+          inline-size: 56px;
+          object-fit: cover;
+        }
+
+        video {
+          aspect-ratio: 16/9;
+          block-size: 64px;
+          object-fit: cover;
+        }
+      }
+
+      /* Trailing content */
+      .end {
+        align-items: center;
+        display: flex;
+        font-size: var(--font-size-0);
+        text-align: end;
+        z-index: 1;
+
+        &:not(:has(a, button, input)) {
+          pointer-events: none;
+        }
+
+        kbd {
+          background-color: transparent;
+          border: 0;
+          color: inherit;
+          opacity: 0.6;
+        }
+
+        svg {
+          inline-size: 100%;
+          max-inline-size: var(--size-5);
+        }
+      }
+
+      /* Inset */
+      &.inset {
+        .text {
+          padding-inline-start: calc(var(--size-5) + var(--size-3));
+        }
+
+        /* Safety measure so it won't look bad if there for some reason should exist a leading element inside. */
+        .start {
+          display: none;
+        }
+      }
+    }
+  }
+}
+
+@layer components.extended {
+  :where(.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;
+    }
+
+    .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(.dialog[open])) {
+    block-size: 100%;
+    overflow: hidden;
+  }
+}
+
+@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.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 {
+
+  /*
+- Common styling for input, textarea and select
+- Form related styles such as: label, supporting text, error handling
+*/
+  :where(.text-field, .textarea, .select) {
+    --_accent-color: var(--primary);
+    --_bg-color: var(--surface-default);
+    --_border-color: var(--field-border-color);
+    --_field-padding-block: var(--size-2);
+    --_field-padding-inline: var(--size-2);
+    --_filled-border-color: var(--text-primary);
+    --_height: var(--field-size);
+    --_label-color: var(--text-muted);
+    --_end-text-color: var(--text-muted);
+
+    display: grid;
+    gap: var(--size-1) 0;
+    position: relative;
+
+    /* Field - the actual input with a border around it */
+    .field {
+      background-color: var(--_bg-color);
+      border: var(--field-border-width) solid var(--_border-color);
+      border-radius: var(--field-border-radius);
+      display: grid;
+      grid-column: 1/-1;
+      grid-row: 2;
+      grid-template-columns: auto 1fr auto;
+      grid-template-areas:
+        "header header header"
+        "prefix input  suffix"
+        "footer footer footer";
+      min-block-size: var(--_height);
+
+      @media (prefers-reduced-motion: no-preference) {
+        transition: border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+      }
+    }
+
+    :where(.field input, .field textarea, .field select) {
+      background: transparent;
+      border: 0;
+      color: var(--text-primary);
+      font-family: var(--font-sans);
+      font-size: var(--font-size-1);
+      grid-area: input;
+      inline-size: 100%;
+      line-height: var(--font-lineheight-1);
+      min-inline-size: 0;
+      padding: var(--_field-padding-block) var(--_field-padding-inline);
+
+      &:focus,
+      &:focus-visible {
+        outline: 0;
+      }
+    }
+
+    /* Affixes */
+    .prefix,
+    .suffix {
+      align-items: center;
+      color: var(--_label-color);
+      display: inline-flex;
+      padding-inline: var(--_field-padding-inline);
+      white-space: nowrap;
+    }
+
+    .prefix {
+      grid-area: prefix;
+    }
+
+    .suffix {
+      grid-area: suffix;
+    }
+
+    .header,
+    .footer {
+      align-items: center;
+      color: var(--_label-color);
+      display: flex;
+      font-size: var(--font-size-0);
+      gap: var(--size-2);
+      padding: var(--size-1) var(--_field-padding-inline);
+    }
+
+    .header {
+      border-block-end: 1px solid var(--_border-color);
+      grid-area: header;
+    }
+
+    .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) {
+      padding-inline-start: 0;
+    }
+
+    .field:has(> .suffix) :where(input, textarea, select) {
+      padding-inline-end: 0;
+    }
+
+    /* Textarea - keep affix aligned with the first line */
+    &.textarea .field {
+
+      .prefix,
+      .suffix {
+        align-self: start;
+        padding-block: var(--_field-padding-block);
+      }
+    }
+
+    /* Required/Invalid */
+    &:has(:invalid) {
+      .label:after {
+        color: var(--red);
+        content: "*";
+        margin: -0.25em auto auto 0.25em;
+      }
+    }
+
+    /* File */
+    &:has(input[type="file"]) {
+      cursor: pointer;
+
+      input {
+        align-self: flex-start;
+        block-size: var(--_height);
+        box-shadow: none;
+        color: var(--text-primary);
+        cursor: inherit;
+        max-inline-size: 100%;
+        padding: 0;
+        transition: font-size 0.2s var(--ease-3);
+
+        &::-webkit-file-upload-button,
+        &::file-selector-button {
+          background-color: var(--surface-tonal);
+          block-size: calc(100% - var(--size-2) * 2);
+          border: none;
+          border-radius: var(--field-border-radius);
+          cursor: pointer;
+          margin-block-start: var(--size-2);
+          margin-inline-end: 1ex;
+          margin-inline-start: var(--size-2);
+        }
+      }
+
+      /* Variants */
+      &.filled {
+        input {
+
+          &::-webkit-file-upload-button,
+          &::file-selector-button {
+            background-color: var(--surface-default);
+            block-size: calc(100% - var(--size-2) * 2);
+            border-radius: var(--field-border-radius);
+            cursor: pointer;
+            margin-block-start: var(--size-2);
+          }
+        }
+      }
+
+      /* Sizes */
+      &.small {
+        input {
+          font-size: var(--font-size-05);
+
+          &::-webkit-file-upload-button,
+          &::file-selector-button {
+            block-size: calc(100% - var(--size-2));
+            margin-block-start: var(--size-1);
+          }
+        }
+      }
+    }
+
+    /* Autosuggest */
+    &:has(input[list]) {
+      .label {
+        /* Make sure chevron is visible */
+        inline-size: calc(100% - var(--size-6));
+      }
+    }
+
+    /* Select */
+    &:has(select) {
+      .label {
+        /* Make sure chevron is visible */
+        inline-size: calc(100% - var(--size-6));
+
+      }
+    }
+
+    /* Customizable Select */
+    &:has(select button) {
+      select {
+        padding: 0;
+
+        button {
+          outline: 0;
+          padding: var(--_field-padding-block) var(--size-8) var(--_field-padding-block) var(--_field-padding-inline);
+        }
+      }
+    }
+
+    /* Non-customizable Select */
+    &:has(select):not(:has(button)) {
+      select {
+        padding: var(--_field-padding-block) var(--size-8) var(--_field-padding-block) var(--_field-padding-inline);
+      }
+    }
+
+    /* Input - color */
+    &:has(input[type="color"]) {
+      .field {
+        block-size: var(--_height);
+        inline-size: var(--_height);
+        min-block-size: 0;
+        overflow: hidden;
+      }
+
+      input {
+        appearance: none;
+        background: none;
+        block-size: var(--_height);
+        inline-size: var(--_height);
+        overflow: hidden;
+        padding: 0;
+
+        &::-webkit-color-swatch {
+          border: none;
+        }
+
+        &::-webkit-color-swatch-wrapper {
+          padding: 0;
+        }
+      }
+    }
+
+    /* Element states */
+    &:hover {
+      &:not([data-invalid]) {
+        .field {
+          border-color: var(--text-primary);
+        }
+      }
+    }
+
+    &:focus-within {
+      .field {
+        border-color: var(--_accent-color);
+        outline-offset: -2px;
+      }
+    }
+
+    /* Label */
+    .label {
+      color: var(--text-primary);
+      font-size: var(--font-size-05);
+      font-weight: 600;
+      grid-column: 1/-1;
+      grid-row: 1;
+      padding-inline: 0 1ex;
+    }
+
+    /* End text */
+    :where(.end-text) {
+      color: var(--_end-text-color);
+      font-size: var(--font-size-0);
+      grid-column: 1/-1;
+      grid-row: 3;
+      line-height: 1.5;
+    }
+
+    /* Auto-fit */
+    &.auto-fit {
+      inline-size: auto;
+
+      .field {
+        inline-size: auto;
+      }
+
+      :where(& input, & textarea) {
+        field-sizing: content;
+        inline-size: auto;
+        min-inline-size: 25ch;
+      }
+    }
+
+    /* Validation */
+    &[data-invalid],
+    &:has(:user-invalid) {
+      --_accent-color: var(--color-9);
+      --_border-color: var(--color-9);
+      --_filled-border-color: var(--color-9);
+      --_label-color: var(--color-9);
+      --_end-text-color: var(--color-9);
+    }
+
+    /*
+  * Variant: Filled
+  */
+    &.filled {
+      --_bg-color: var(--surface-tonal);
+
+      &:not(:has([disabled], :has(input[type="color"]))) {
+
+        /* Hover */
+        &:hover {
+          --_bg-color: light-dark(oklch(from var(--surface-tonal) calc(l * 0.93) c h),
+              oklch(from var(--surface-tonal) calc(l * 1.1) c h));
+        }
+      }
+    }
+
+    /* Disabled */
+    &:where(:has([disabled])) {
+      cursor: not-allowed;
+      opacity: 0.64;
+      user-select: none;
+
+      &::before {
+        display: none;
+      }
+
+      .field {
+        cursor: not-allowed;
+      }
+
+      :where(input, textarea, select) {
+        cursor: not-allowed;
+
+        * {
+          pointer-events: none;
+        }
+      }
+
+      .label,
+      .start-text,
+      .end-text {
+        cursor: not-allowed;
+      }
+    }
+
+    /* Read-only */
+    &:where(:has([readonly])) {
+      &::before {
+        display: none;
+      }
+
+      :where(input, textarea, select) {
+        cursor: not-allowed;
+
+        * {
+          pointer-events: none;
+        }
+      }
+    }
+
+    /* Sizes */
+    &.small {
+      --_field-padding-block: var(--size-2);
+      --_height: var(--field-size-small);
+
+      &:has(input[type="color"]) {
+        .label {
+          line-height: 1.5;
+        }
+      }
+    }
+
+    /* Orientation */
+    &.spread {
+      align-items: start;
+      column-gap: var(--size-4);
+      container-type: inline-size;
+      grid-template-columns: 1fr auto;
+
+      .label {
+        font-weight: 600;
+        grid-column: 1;
+        grid-row: 1;
+      }
+
+      .start-text {
+        color: var(--_end-text-color);
+        font-size: var(--font-size-0);
+        grid-column: 1;
+        grid-row: 2;
+        line-height: 1.5;
+      }
+
+      .field {
+        align-self: start;
+        grid-column: 2;
+        grid-row: 1 / span 2;
+      }
+
+      .field:has(textarea) {
+        grid-row: 1 / span 3;
+
+        +.end-text {
+          grid-row: 4;
+        }
+      }
+
+      :where(textarea) {
+        min-inline-size: 30ch;
+      }
+
+      :where(.end-text) {
+        grid-column: 2;
+        text-align: end;
+      }
+
+      /* Collapse to column on narrow containers */
+      @container (width < 400px) {
+        column-gap: 0;
+        grid-template-columns: 1fr;
+
+        .label {
+          grid-column: 1;
+          grid-row: 1;
+        }
+
+        .start-text {
+          grid-column: 1;
+          grid-row: 2;
+        }
+
+        .field,
+        .field:has(textarea) {
+          grid-column: 1;
+          grid-row: 3;
+        }
+
+        :where(.end-text) {
+          grid-column: 1;
+          grid-row: 4;
+          text-align: start;
+        }
+      }
+    }
+  }
+}
+
+@layer components.extended {
+  :where(.select select) {
+    position: relative;
+
+    /* Default arrow */
+    &::picker-icon {
+      block-size: 0;
+      border-block-start: 5px solid;
+      border-inline: 5px solid transparent;
+      color: currentColor;
+      content: "";
+      inline-size: 0;
+      inset: 50% var(--size-3) auto auto;
+      pointer-events: none;
+      position: absolute;
+      translate: 0 -50%;
+    }
+
+    &:open {
+      &::picker-icon {
+        rotate: 180deg;
+      }
+    }
+
+    /* Select popover */
+    &::picker(select) {
+      /* Animation on-stage styles */
+      border: 0;
+      box-shadow: var(--shadow-2);
+      opacity: 1;
+      padding: 0;
+      scale: 1;
+
+      /* Animation starting styles */
+      @starting-style {
+        opacity: 0;
+        transform: scale(0.9);
+      }
+
+      @media (prefers-reduced-motion: no-preference) {
+        transition: display 0.2s allow-discrete, opacity 0.2s var(--ease-3),
+          overlay 0.2s allow-discrete, scale 0.2s var(--ease-3);
+      }
+    }
+
+    /* Animation off-stage styles */
+    &:not(:open)::picker(select) {
+      opacity: 0;
+      scale: 0.9;
+    }
+
+    button {
+      align-items: center;
+      background-color: transparent;
+      display: flex;
+      inline-size: 100%;
+      margin: 0;
+      position: relative;
+
+      selectedcontent {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+
+    .list {
+      --_bg-color: var(--surface-filled);
+      border: var(--field-border-width) solid var(--field-border-color);
+      border-radius: var(--field-border-radius);
+
+      /* Groups */
+      [role="group"] {
+        label {
+          background-color: light-dark(var(--gray-3), var(--gray-13));
+          color: light-dark(oklch(from var(--text-primary) calc(l * 0.75) c h),
+              oklch(from var(--text-primary) calc(l * 1.25) c h));
+          font-weight: 500;
+          overflow: hidden;
+          padding-inline: var(--size-2);
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        &:not(:first-child),
+        option:first-of-type {
+          margin-block-start: var(--size-2);
+        }
+
+        option:last-of-type,
+        &:last-child {
+          option:last-of-type {
+            margin-block-end: 0;
+          }
+        }
+      }
+
+      /* Option */
+      option {
+
+        /* Checkmark */
+        /* TODO - checkmark should be the final version of the checkmark API. Follow the development of this and remove redundant psuedo stuff. */
+        &::check {
+          display: none;
+        }
+
+        &::checkmark {
+          display: none;
+        }
+
+        &::before {
+          display: none;
+        }
+
+        &:focus-visible {
+          outline-offset: -1px;
+        }
+      }
+    }
+  }
+
+  :where(.select:has(select)) {
+
+    /* Size */
+    &.small {
+      button {
+        padding-inline: var(--size-2) var(--size-7);
+
+        &::after {
+          inset-inline-end: var(--size-2);
+        }
+      }
+    }
+
+    /*
+    * Non-experimental Select
+    *
+    * Hack to get the arrow working. Pseudo elements aren't allowed on the `<select>` element, so need to add it on the `.select` class instead. Noting this down if an `:after` element would be needed on a `.select`.
+    */
+    &:not(:has(button)) {
+      select {
+        appearance: none;
+      }
+
+      /* Arrow */
+      &::after {
+        align-self: center;
+        block-size: 0;
+        border-block-start: 5px solid;
+        border-inline: 5px solid transparent;
+        content: "";
+        display: inline-block;
+        flex-shrink: 0;
+        grid-column: 1/-1;
+        grid-row: 2;
+        inline-size: 0;
+        inset-inline-end: var(--size-3);
+        justify-self: end;
+        pointer-events: none;
+        position: relative;
+      }
+    }
+  }
+
+  select:has(button),
+  ::picker(select) {
+    appearance: base-select;
+  }
+}
+
+@layer components.extended {
+
+  :where(.text-field:has( :where(input[type="date"],
+        input[type="datetime-local"],
+        input[type="email"],
+        input[type="month"],
+        input[type="number"],
+        input[type="password"],
+        input[type="search"],
+        input[type="tel"],
+        input[type="text"],
+        input[type="time"],
+        input[type="url"],
+        input[type="week"]))) {
+
+    /* Sizes */
+    &.small {
+      input {
+        padding-inline: var(--size-2);
+      }
+    }
+  }
+
+  /* Autosuggest */
+  :where(.text-field:has(input[list])) {
+
+    /* Hide native arrow */
+    input::-webkit-calendar-picker-indicator {
+      cursor: pointer;
+      opacity: 0;
+      pointer-events: none;
+      position: absolute;
+    }
+  }
+
+  /* Arrow */
+  :where(.text-field:has(input[list]:placeholder-shown),
+    .text-field:has(input[list]):where(:focus-within, :hover)) {
+    &::after {
+      block-size: 0;
+      border-block-start: 5px solid;
+      border-inline: 5px solid transparent;
+      content: "";
+      display: inline-block;
+      flex-shrink: 0;
+      inline-size: 0;
+      inset: 50% var(--size-3) auto auto;
+      pointer-events: none;
+      position: absolute;
+      translate: 0 -50%;
+    }
+  }
+}
+
+@layer components.extended {
+  :where(.textarea) {
+    textarea {
+      block-size: auto;
+      field-sizing: content;
+      min-block-size: calc(var(--_field-padding-block) * 2 + (var(--border-width) * 2) + 3lh);
+      resize: vertical;
+    }
+
+    /* Size */
+    &.small {
+      textarea {
+        min-block-size: var(--size-9);
+      }
+    }
+
+    /* Auto-fit */
+    &.auto-fit {
+      textarea {
+        resize: both;
+      }
+    }
+  }
+}
+
+@layer components.extended {
+	:where(.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 {
+			background-color: var(--_tooltip-bg);
+			border-radius: var(--radius-2);
+			color: var(--_tooltip-color);
+			font-size: var(--font-size-05);
+			line-height: 1.3;
+			margin: var(--_tooltip-offset);
+			max-inline-size: 240px;
+			/* UA sets overflow: auto on [popover], which clips the arrow. */
+			overflow: visible;
+			padding-block: var(--size-1);
+			padding-inline: var(--size-2);
+			position-area: var(--anchor-position-area, block-start);
+			position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
+			position-visibility: anchors-visible;
+			text-align: center;
+			text-wrap: pretty;
+		}
+
+		/* 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 {
+			--_arrow-size: var(--size-2);
+
+			&>.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 {
+				background-color: var(--_tooltip-bg);
+				block-size: var(--_arrow-size);
+				content: "";
+				inline-size: var(--_arrow-size);
+				inset-block-end: calc(var(--_arrow-size) / -2);
+				inset-inline-start: 50%;
+				position: absolute;
+				rotate: 45deg;
+				translate: -50% 0;
+			}
+		}
+
+		/* Fade */
+		&>.anchor-floating[popover] {
+			opacity: 0;
+			transition:
+				display 0.15s allow-discrete,
+				opacity 0.15s var(--ease-out-1),
+				overlay 0.15s allow-discrete;
+
+			&:popover-open {
+				opacity: 1;
+
+				@starting-style {
+					opacity: 0;
+				}
+			}
+		}
+	}
+}
+/*# sourceMappingURL=opui.components.css.map */