@x12i/ui 0.0.0-stage → 1.1.0

package/dist/styles.css

@@ -0,0 +1,4373 @@
+/*
+ * @x12i/ui styles.
+ *
+ * Tokens only: no hard-coded colors, spacing or font sizes (a test enforces
+ * this). Requires the kit variables, for example:
+ *
+ *   @import "@x12i/themes/themes.css";
+ *   @import "@x12i/ui/styles.css";
+ *
+ * Every selector sits inside :where(), so it has zero specificity and any app
+ * class overrides it without a specificity fight. Components expose styling
+ * hooks as data attributes (data-variant, data-size, data-disabled, ...).
+ * Layout uses logical properties, so right-to-left works without extra CSS.
+ */
+
+/* ---------------------------------------------------------------- Button */
+
+:where([data-kit="button"]) {
+  /* Tone: accent (default) */
+  --_solid: var(--kit-color-accent-default);
+  --_solid-hover: var(--kit-color-accent-hover);
+  --_solid-active: var(--kit-color-accent-active);
+  --_on-solid: var(--kit-color-accent-on-accent);
+  --_text: var(--kit-color-text-link);
+  --_edge: var(--kit-color-accent-default);
+  --_subtle: var(--kit-color-accent-subtle);
+
+  /* Size: md (default) */
+  --_height: var(--kit-button-height-md);
+  --_pad: var(--kit-button-padding-inline-md);
+  --_font-size: var(--kit-text-label-size);
+  --_line-height: var(--kit-text-label-line-height);
+
+  /* Variant: solid (default) */
+  --_bg: var(--_solid);
+  --_bg-hover: var(--_solid-hover);
+  --_bg-active: var(--_solid-active);
+  --_fg: var(--_on-solid);
+  --_bd: transparent;
+
+  position: relative;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--kit-button-gap);
+  block-size: var(--_height);
+  min-block-size: var(--kit-size-target-min);
+  min-inline-size: var(--kit-size-target-min);
+  padding-block: 0;
+  padding-inline: var(--_pad);
+  margin: 0;
+  border: var(--kit-border-width-default) solid var(--_bd);
+  border-radius: var(--kit-radius-control);
+  background-color: var(--_bg);
+  color: var(--_fg);
+  font-family: var(--kit-font-family-sans);
+  font-size: var(--_font-size);
+  font-weight: var(--kit-text-label-weight);
+  line-height: var(--_line-height);
+  text-decoration: none;
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  transition:
+    background-color var(--kit-duration-instant) var(--kit-easing-standard),
+    border-color var(--kit-duration-instant) var(--kit-easing-standard),
+    color var(--kit-duration-instant) var(--kit-easing-standard);
+}
+
+/* Tone */
+:where([data-kit="button"][data-tone="neutral"]) {
+  --_solid: var(--kit-color-bg-inverse);
+  --_solid-hover: color-mix(in srgb, var(--kit-color-bg-inverse) 88%, var(--kit-color-bg-canvas));
+  --_solid-active: color-mix(in srgb, var(--kit-color-bg-inverse) 76%, var(--kit-color-bg-canvas));
+  --_on-solid: var(--kit-color-text-inverse);
+  --_text: var(--kit-color-text-primary);
+  --_edge: var(--kit-color-border-default);
+  --_subtle: color-mix(in srgb, var(--kit-color-text-primary) 8%, transparent);
+}
+
+/* Variants */
+:where([data-kit="button"][data-variant="solid"]) {
+  --_bg: var(--_solid);
+  --_bg-hover: var(--_solid-hover);
+  --_bg-active: var(--_solid-active);
+  --_fg: var(--_on-solid);
+  --_bd: transparent;
+}
+
+:where([data-kit="button"][data-variant="soft"]) {
+  --_bg: var(--_subtle);
+  --_bg-hover: color-mix(in srgb, var(--_subtle), var(--_text) 10%);
+  --_bg-active: color-mix(in srgb, var(--_subtle), var(--_text) 18%);
+  --_fg: var(--_text);
+  --_bd: transparent;
+}
+
+:where([data-kit="button"][data-variant="outline"]) {
+  --_bg: transparent;
+  --_bg-hover: var(--_subtle);
+  --_bg-active: color-mix(in srgb, var(--_subtle), var(--_text) 10%);
+  --_fg: var(--_text);
+  --_bd: var(--_edge);
+}
+
+:where([data-kit="button"][data-variant="ghost"]) {
+  --_bg: transparent;
+  --_bg-hover: var(--_subtle);
+  --_bg-active: color-mix(in srgb, var(--_subtle), var(--_text) 10%);
+  --_fg: var(--_text);
+  --_bd: transparent;
+}
+
+/* Sizes */
+:where([data-kit="button"][data-size="xs"]) {
+  --_height: var(--kit-button-height-xs);
+  --_pad: var(--kit-button-padding-inline-xs);
+  --_font-size: var(--kit-text-caption-size);
+  --_line-height: var(--kit-text-caption-line-height);
+}
+
+:where([data-kit="button"][data-size="sm"]) {
+  --_height: var(--kit-button-height-sm);
+  --_pad: var(--kit-button-padding-inline-sm);
+}
+
+:where([data-kit="button"][data-size="lg"]) {
+  --_height: var(--kit-button-height-lg);
+  --_pad: var(--kit-button-padding-inline-lg);
+  --_font-size: var(--kit-text-body-size);
+  --_line-height: var(--kit-text-body-line-height);
+}
+
+:where([data-kit="button"][data-size="xl"]) {
+  --_height: var(--kit-button-height-xl);
+  --_pad: var(--kit-button-padding-inline-xl);
+  --_font-size: var(--kit-text-body-size);
+  --_line-height: var(--kit-text-body-line-height);
+}
+
+/* Icon-only buttons are square. */
+:where([data-kit="button"][data-icon-only]) {
+  inline-size: var(--_height);
+  padding-inline: 0;
+}
+
+/* States */
+:where([data-kit="button"]):hover {
+  background-color: var(--_bg-hover);
+}
+
+:where([data-kit="button"]):active {
+  background-color: var(--_bg-active);
+}
+
+:where([data-kit="button"]):focus-visible {
+  outline: var(--kit-border-width-focus) solid var(--kit-color-border-focus);
+  outline-offset: var(--kit-space-0-5);
+}
+
+:where([data-kit="button"][data-loading]) {
+  cursor: progress;
+}
+
+:where([data-kit="button"]):is(:disabled, [data-disabled]:not([data-loading])) {
+  --_bg: transparent;
+  --_bg-hover: var(--_bg);
+  --_bg-active: var(--_bg);
+  --_fg: var(--kit-color-text-disabled);
+  --_bd: var(--kit-color-border-subtle);
+  cursor: not-allowed;
+}
+
+:where([data-kit="button"][data-variant="solid"]):is(:disabled, [data-disabled]:not([data-loading])) {
+  --_bg: var(--kit-color-border-subtle);
+}
+
+/* Slots: the content stays in layout while loading, so the width never jumps. */
+:where([data-kit="button"] > [data-kit-slot="content"]) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--kit-button-gap);
+}
+
+:where([data-kit="button"][data-loading] > [data-kit-slot="content"]) {
+  visibility: hidden;
+}
+
+:where([data-kit="button"] > [data-kit-slot="spinner"]) {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+}
+
+@media (forced-colors: active) {
+  :where([data-kit="button"]) {
+    border-color: ButtonText;
+  }
+
+  :where([data-kit="button"]):is(:disabled, [data-disabled]:not([data-loading])) {
+    border-color: GrayText;
+  }
+}
+
+/* ----------------------------------------------------------------- Badge */
+
+:where([data-kit="badge"]) {
+  --_bg: color-mix(in srgb, var(--kit-color-text-primary) 8%, transparent);
+  --_fg: var(--kit-color-text-primary);
+  --_bd: var(--kit-color-border-default);
+  --_height: var(--kit-badge-height-md);
+  --_pad: var(--kit-space-2);
+
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--kit-space-1);
+  block-size: var(--_height);
+  padding-inline: var(--_pad);
+  border: var(--kit-border-width-default) solid transparent;
+  border-radius: var(--kit-radius-pill);
+  background-color: var(--_bg);
+  color: var(--_fg);
+  font-family: var(--kit-font-family-sans);
+  font-size: var(--kit-text-caption-size);
+  font-weight: var(--kit-text-label-weight);
+  line-height: var(--kit-text-caption-line-height);
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+
+:where([data-kit="badge"][data-size="sm"]) {
+  --_height: var(--kit-badge-height-sm);
+  --_pad: var(--kit-space-1);
+}
+
+/* Tone sets a soft palette: background, foreground, edge. */
+:where([data-kit="badge"][data-tone="accent"]) {
+  --_bg: var(--kit-color-accent-subtle);
+  --_fg: var(--kit-color-text-link);
+  --_bd: var(--kit-color-accent-default);
+}
+
+:where([data-kit="badge"][data-tone="success"]) {
+  --_bg: var(--kit-color-status-success-background);
+  --_fg: var(--kit-color-status-success-foreground);
+  --_bd: var(--kit-color-status-success-border);
+}
+
+:where([data-kit="badge"][data-tone="warning"]) {
+  --_bg: var(--kit-color-status-warning-background);
+  --_fg: var(--kit-color-status-warning-foreground);
+  --_bd: var(--kit-color-status-warning-border);
+}
+
+:where([data-kit="badge"][data-tone="danger"]) {
+  --_bg: var(--kit-color-status-danger-background);
+  --_fg: var(--kit-color-status-danger-foreground);
+  --_bd: var(--kit-color-status-danger-border);
+}
+
+:where([data-kit="badge"][data-tone="info"]) {
+  --_bg: var(--kit-color-status-info-background);
+  --_fg: var(--kit-color-status-info-foreground);
+  --_bd: var(--kit-color-status-info-border);
+}
+
+/* Variants: soft shows the palette, solid inverts it, outline keeps only the edge. */
+:where([data-kit="badge"][data-variant="soft"]) {
+  border-color: transparent;
+}
+
+:where([data-kit="badge"][data-variant="outline"]) {
+  background-color: transparent;
+  border-color: var(--_bd);
+}
+
+:where([data-kit="badge"][data-variant="solid"]) {
+  background-color: var(--_fg);
+  color: var(--_bg);
+  border-color: transparent;
+}
+
+:where([data-kit="badge"][data-variant="solid"][data-tone="neutral"]) {
+  background-color: var(--kit-color-bg-inverse);
+  color: var(--kit-color-text-inverse);
+}
+
+:where([data-kit="badge"][data-variant="solid"][data-tone="accent"]) {
+  background-color: var(--kit-color-accent-default);
+  color: var(--kit-color-accent-on-accent);
+}
+
+@media (forced-colors: active) {
+  :where([data-kit="badge"]) {
+    border-color: CanvasText;
+  }
+}
+
+/* ---------------------------------------------------------- Stack, Inline */
+
+:where([data-kit="stack"]),
+:where([data-kit="inline"]) {
+  display: flex;
+  box-sizing: border-box;
+  min-inline-size: 0;
+}
+
+:where([data-kit="stack"]) {
+  flex-direction: column;
+}
+
+:where([data-kit="inline"]) {
+  flex-direction: row;
+}
+
+:where([data-kit="inline"][data-wrap]) {
+  flex-wrap: wrap;
+}
+
+:where([data-kit="stack"], [data-kit="inline"])[data-align="start"] {
+  align-items: flex-start;
+}
+
+:where([data-kit="stack"], [data-kit="inline"])[data-align="center"] {
+  align-items: center;
+}
+
+:where([data-kit="stack"], [data-kit="inline"])[data-align="end"] {
+  align-items: flex-end;
+}
+
+:where([data-kit="stack"], [data-kit="inline"])[data-align="stretch"] {
+  align-items: stretch;
+}
+
+:where([data-kit="stack"], [data-kit="inline"])[data-align="baseline"] {
+  align-items: baseline;
+}
+
+:where([data-kit="stack"], [data-kit="inline"])[data-justify="start"] {
+  justify-content: flex-start;
+}
+
+:where([data-kit="stack"], [data-kit="inline"])[data-justify="center"] {
+  justify-content: center;
+}
+
+:where([data-kit="stack"], [data-kit="inline"])[data-justify="end"] {
+  justify-content: flex-end;
+}
+
+:where([data-kit="stack"], [data-kit="inline"])[data-justify="between"] {
+  justify-content: space-between;
+}
+
+:where([data-kit="stack"], [data-kit="inline"])[data-justify="around"] {
+  justify-content: space-around;
+}
+
+/* --------------------------------------------------------------- Divider */
+
+:where([data-kit="divider"]) {
+  box-sizing: border-box;
+  flex-shrink: 0;
+  margin: 0;
+  border: 0;
+  background-color: var(--kit-color-border-subtle);
+}
+
+:where([data-kit="divider"][data-orientation="horizontal"]) {
+  inline-size: 100%;
+  block-size: var(--kit-border-width-default);
+}
+
+:where([data-kit="divider"][data-orientation="vertical"]) {
+  align-self: stretch;
+  inline-size: var(--kit-border-width-default);
+  block-size: auto;
+  min-block-size: var(--kit-size-16);
+}
+
+@media (forced-colors: active) {
+  :where([data-kit="divider"]) {
+    background-color: GrayText;
+  }
+}
+
+/* --------------------------------------------------------------- Spinner */
+
+:where([data-kit="spinner"]) {
+  --_size: var(--kit-size-icon-md);
+
+  display: inline-flex;
+  flex-shrink: 0;
+  inline-size: var(--_size);
+  block-size: var(--_size);
+  color: inherit;
+}
+
+:where([data-kit="spinner"][data-size="xs"]) {
+  --_size: var(--kit-size-icon-xs);
+}
+
+:where([data-kit="spinner"][data-size="sm"]) {
+  --_size: var(--kit-size-icon-sm);
+}
+
+:where([data-kit="spinner"][data-size="lg"]) {
+  --_size: var(--kit-size-icon-lg);
+}
+
+:where([data-kit="spinner"] > svg) {
+  inline-size: 100%;
+  block-size: 100%;
+  animation: kit-spin calc(var(--kit-duration-slow) * 2) linear infinite;
+}
+
+:where([data-kit="spinner"] circle) {
+  stroke: currentcolor;
+  stroke-width: var(--kit-icon-stroke-width);
+  stroke-linecap: round;
+}
+
+:where([data-kit="spinner"] [data-kit-slot="spinner-track"]) {
+  opacity: 0.25;
+}
+
+:where([data-kit="spinner"] [data-kit-slot="spinner-arc"]) {
+  stroke-dasharray: 14 100;
+}
+
+@keyframes kit-spin {
+  to {
+    transform: rotate(1turn);
+  }
+}
+
+/* Reduced motion: the arc stays visible without spinning. */
+@media (prefers-reduced-motion: reduce) {
+  :where([data-kit="spinner"] > svg) {
+    animation: none;
+  }
+}
+
+/* --------------------------------------------------------- VisuallyHidden */
+
+/*
+ * The 1px clip is the standard technique, expressed with the hairline token so
+ * no raw length appears here.
+ */
+:where([data-kit="visually-hidden"]) {
+  position: absolute;
+  inline-size: var(--kit-border-width-default);
+  block-size: var(--kit-border-width-default);
+  margin: calc(var(--kit-border-width-default) * -1);
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* -------------------------------------------------------------- Providers */
+
+:where([data-kit="theme-provider"]),
+:where([data-kit="density-provider"]) {
+  display: contents;
+}
+
+/* An explicit theme paints its own surface so the subtree actually switches. */
+:where([data-kit="theme-provider"][data-theme]) {
+  display: block;
+  background-color: var(--kit-color-bg-canvas);
+  color: var(--kit-color-text-primary);
+}
+
+/* ----------------------------------------------------------- ButtonGroup */
+
+:where([data-kit="button-group"]) {
+  display: inline-flex;
+  align-items: stretch;
+  box-sizing: border-box;
+}
+
+:where([data-kit="button-group"][data-orientation="vertical"]) {
+  flex-direction: column;
+}
+
+:where([data-kit="button-group"]:not([data-attached])) {
+  gap: var(--kit-space-control-gap);
+}
+
+/* Attached: shared borders, only the outer corners stay round. */
+:where([data-kit="button-group"][data-attached]) > :where(*) {
+  border-radius: 0;
+}
+
+:where([data-kit="button-group"][data-attached][data-orientation="horizontal"]) > :where(*:not(:first-child)) {
+  margin-inline-start: calc(var(--kit-border-width-default) * -1);
+}
+
+:where([data-kit="button-group"][data-attached][data-orientation="vertical"]) > :where(*:not(:first-child)) {
+  margin-block-start: calc(var(--kit-border-width-default) * -1);
+}
+
+:where([data-kit="button-group"][data-attached][data-orientation="horizontal"]) > :where(*:first-child) {
+  border-start-start-radius: var(--kit-radius-control);
+  border-end-start-radius: var(--kit-radius-control);
+}
+
+:where([data-kit="button-group"][data-attached][data-orientation="horizontal"]) > :where(*:last-child) {
+  border-start-end-radius: var(--kit-radius-control);
+  border-end-end-radius: var(--kit-radius-control);
+}
+
+:where([data-kit="button-group"][data-attached][data-orientation="vertical"]) > :where(*:first-child) {
+  border-start-start-radius: var(--kit-radius-control);
+  border-start-end-radius: var(--kit-radius-control);
+}
+
+:where([data-kit="button-group"][data-attached][data-orientation="vertical"]) > :where(*:last-child) {
+  border-end-start-radius: var(--kit-radius-control);
+  border-end-end-radius: var(--kit-radius-control);
+}
+
+/* The hovered or focused button draws its whole border over its neighbours. */
+:where([data-kit="button-group"][data-attached]) > :where(*:hover, *:focus-visible, *[data-pressed]) {
+  position: relative;
+  z-index: 1;
+}
+
+/* ---------------------------------------------------------------- Toggle */
+
+:where([data-kit="toggle"]) {
+  --_height: var(--kit-button-height-md);
+  --_pad: var(--kit-button-padding-inline-md);
+  --_font-size: var(--kit-text-label-size);
+  --_line-height: var(--kit-text-label-line-height);
+  --_bg: transparent;
+  --_bg-hover: color-mix(in srgb, var(--kit-color-text-primary) 8%, transparent);
+  --_fg: var(--kit-color-text-primary);
+  --_bd: var(--kit-color-border-default);
+
+  position: relative;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--kit-button-gap);
+  block-size: var(--_height);
+  min-block-size: var(--kit-size-target-min);
+  min-inline-size: var(--kit-size-target-min);
+  padding-block: 0;
+  padding-inline: var(--_pad);
+  margin: 0;
+  border: var(--kit-border-width-default) solid var(--_bd);
+  border-radius: var(--kit-radius-control);
+  background-color: var(--_bg);
+  color: var(--_fg);
+  font-family: var(--kit-font-family-sans);
+  font-size: var(--_font-size);
+  font-weight: var(--kit-text-label-weight);
+  line-height: var(--_line-height);
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  transition:
+    background-color var(--kit-duration-instant) var(--kit-easing-standard),
+    border-color var(--kit-duration-instant) var(--kit-easing-standard),
+    color var(--kit-duration-instant) var(--kit-easing-standard);
+}
+
+:where([data-kit="toggle"][data-variant="ghost"]) {
+  --_bd: transparent;
+}
+
+:where([data-kit="toggle"][data-variant="soft"]) {
+  --_bg: color-mix(in srgb, var(--kit-color-text-primary) 6%, transparent);
+  --_bd: transparent;
+}
+
+:where([data-kit="toggle"][data-size="xs"]) {
+  --_height: var(--kit-button-height-xs);
+  --_pad: var(--kit-button-padding-inline-xs);
+  --_font-size: var(--kit-text-caption-size);
+  --_line-height: var(--kit-text-caption-line-height);
+}
+
+:where([data-kit="toggle"][data-size="sm"]) {
+  --_height: var(--kit-button-height-sm);
+  --_pad: var(--kit-button-padding-inline-sm);
+}
+
+:where([data-kit="toggle"][data-size="lg"]) {
+  --_height: var(--kit-button-height-lg);
+  --_pad: var(--kit-button-padding-inline-lg);
+  --_font-size: var(--kit-text-body-size);
+  --_line-height: var(--kit-text-body-line-height);
+}
+
+:where([data-kit="toggle"][data-size="xl"]) {
+  --_height: var(--kit-button-height-xl);
+  --_pad: var(--kit-button-padding-inline-xl);
+  --_font-size: var(--kit-text-body-size);
+  --_line-height: var(--kit-text-body-line-height);
+}
+
+:where([data-kit="toggle"]):hover {
+  background-color: var(--_bg-hover);
+}
+
+/*
+ * Pressed is shown three ways: tinted background, accent border and a bar
+ * along the bottom edge, so it still reads without color.
+ */
+:where([data-kit="toggle"][data-pressed]) {
+  --_bg: var(--kit-color-accent-subtle);
+  --_bg-hover: var(--kit-color-accent-subtle);
+  --_fg: var(--kit-color-text-link);
+  --_bd: var(--kit-color-accent-default);
+
+  box-shadow: inset 0 calc(var(--kit-border-width-emphasis) * -1) 0 0 currentcolor;
+}
+
+:where([data-kit="toggle"]):focus-visible {
+  outline: var(--kit-border-width-focus) solid var(--kit-color-border-focus);
+  outline-offset: var(--kit-space-0-5);
+}
+
+:where([data-kit="toggle"][data-disabled]) {
+  --_bg: transparent;
+  --_bg-hover: transparent;
+  --_fg: var(--kit-color-text-disabled);
+  --_bd: var(--kit-color-border-subtle);
+
+  cursor: not-allowed;
+}
+
+:where([data-kit="toggle-group"]) {
+  display: inline-flex;
+  align-items: stretch;
+  box-sizing: border-box;
+}
+
+:where([data-kit="toggle-group"][data-orientation="vertical"]) {
+  flex-direction: column;
+}
+
+:where([data-kit="toggle-group"]:not([data-attached])) {
+  gap: var(--kit-space-control-gap);
+}
+
+:where([data-kit="toggle-group"][data-attached]) > :where(*) {
+  border-radius: 0;
+}
+
+:where([data-kit="toggle-group"][data-attached][data-orientation="horizontal"]) > :where(*:not(:first-child)) {
+  margin-inline-start: calc(var(--kit-border-width-default) * -1);
+}
+
+:where([data-kit="toggle-group"][data-attached][data-orientation="vertical"]) > :where(*:not(:first-child)) {
+  margin-block-start: calc(var(--kit-border-width-default) * -1);
+}
+
+:where([data-kit="toggle-group"][data-attached][data-orientation="horizontal"]) > :where(*:first-child) {
+  border-start-start-radius: var(--kit-radius-control);
+  border-end-start-radius: var(--kit-radius-control);
+}
+
+:where([data-kit="toggle-group"][data-attached][data-orientation="horizontal"]) > :where(*:last-child) {
+  border-start-end-radius: var(--kit-radius-control);
+  border-end-end-radius: var(--kit-radius-control);
+}
+
+:where([data-kit="toggle-group"][data-attached][data-orientation="vertical"]) > :where(*:first-child) {
+  border-start-start-radius: var(--kit-radius-control);
+  border-start-end-radius: var(--kit-radius-control);
+}
+
+:where([data-kit="toggle-group"][data-attached][data-orientation="vertical"]) > :where(*:last-child) {
+  border-end-start-radius: var(--kit-radius-control);
+  border-end-end-radius: var(--kit-radius-control);
+}
+
+:where([data-kit="toggle-group"][data-attached]) > :where(*:hover, *:focus-visible, *[data-pressed]) {
+  position: relative;
+  z-index: 1;
+}
+
+@media (forced-colors: active) {
+  :where([data-kit="toggle"]) {
+    border-color: ButtonText;
+  }
+
+  :where([data-kit="toggle"][data-pressed]) {
+    background-color: Highlight;
+    color: HighlightText;
+    border-color: Highlight;
+  }
+
+  :where([data-kit="toggle"][data-disabled]) {
+    border-color: GrayText;
+  }
+}
+
+/* ------------------------------------------------------------------ Link */
+
+:where([data-kit="link"]) {
+  display: inline;
+  color: var(--kit-color-text-link);
+  font: inherit;
+  text-decoration-line: underline;
+  text-decoration-thickness: var(--kit-border-width-default);
+  text-underline-offset: var(--kit-space-0-5);
+  cursor: pointer;
+  border-radius: var(--kit-radius-2);
+}
+
+:where([data-kit="link"][data-tone="neutral"]) {
+  color: inherit;
+}
+
+:where([data-kit="link"][data-underline="hover"]) {
+  text-decoration-line: none;
+}
+
+:where([data-kit="link"][data-underline="hover"]):hover {
+  text-decoration-line: underline;
+}
+
+:where([data-kit="link"][data-underline="none"]) {
+  text-decoration-line: none;
+}
+
+:where([data-kit="link"]):hover {
+  text-decoration-thickness: var(--kit-border-width-emphasis);
+}
+
+:where([data-kit="link"]):focus-visible {
+  outline: var(--kit-border-width-focus) solid var(--kit-color-border-focus);
+  outline-offset: var(--kit-space-0-5);
+}
+
+:where([data-kit="link"] [data-kit-slot="external-icon"]) {
+  display: inline-block;
+  margin-inline-start: var(--kit-space-0-5);
+  vertical-align: baseline;
+}
+
+/* ------------------------------------------------------------------- Kbd */
+
+:where([data-kit="kbd"]) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  min-inline-size: var(--kit-size-20);
+  block-size: var(--kit-size-20);
+  padding-inline: var(--kit-space-1);
+  border: var(--kit-border-width-default) solid var(--kit-color-border-default);
+  border-block-end-width: var(--kit-border-width-emphasis);
+  border-radius: var(--kit-radius-4);
+  background-color: var(--kit-color-bg-raised);
+  color: var(--kit-color-text-secondary);
+  font-family: var(--kit-font-family-mono);
+  font-size: var(--kit-text-caption-size);
+  font-weight: var(--kit-text-label-weight);
+  line-height: 1;
+  white-space: nowrap;
+}
+
+:where([data-kit="kbd-group"]) {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--kit-space-0-5);
+}
+
+:where([data-kit="kbd-group"] [data-kit-slot="kbd-item"]) {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--kit-space-0-5);
+}
+
+:where([data-kit="kbd-group"] [data-kit-slot="kbd-separator"]) {
+  color: var(--kit-color-text-tertiary);
+  font-size: var(--kit-text-caption-size);
+}
+
+/* ------------------------------------------------------------ CopyButton */
+
+:where([data-kit-copy][data-status="copied"]) {
+  --_text: var(--kit-color-status-success-foreground);
+}
+
+:where([data-kit-copy][data-status="failed"]) {
+  --_text: var(--kit-color-status-danger-foreground);
+}
+
+/* =========================================================================
+ * Forms
+ *
+ * Text-like controls share one surface (border, radius, height by size, focus
+ * ring, invalid and disabled states) so an Input, a Select, a Combobox and a
+ * NumberInput line up in the same row at every density.
+ * ========================================================================= */
+
+/* ----------------------------------------------------------- Shared surface */
+
+:where(
+  [data-kit="input"],
+  [data-kit="textarea"],
+  [data-kit="select"],
+  [data-kit="input-group"],
+  [data-kit="number-input"],
+  [data-kit="combobox"]
+) {
+  --_height: var(--kit-size-control-md);
+  --_pad: var(--kit-space-control-inline-md);
+  --_bd: var(--kit-color-border-default);
+  --_bg: var(--kit-color-bg-surface);
+  --_fg: var(--kit-color-text-primary);
+  --_font-size: var(--kit-text-body-size);
+  --_line-height: var(--kit-text-body-line-height);
+
+  box-sizing: border-box;
+  min-block-size: var(--_height);
+  margin: 0;
+  border: var(--kit-border-width-default) solid var(--_bd);
+  border-radius: var(--kit-radius-control);
+  background-color: var(--_bg);
+  color: var(--_fg);
+  font-family: var(--kit-font-family-sans);
+  font-size: var(--_font-size);
+  line-height: var(--_line-height);
+  transition:
+    border-color var(--kit-duration-instant) var(--kit-easing-standard),
+    background-color var(--kit-duration-instant) var(--kit-easing-standard);
+}
+
+:where([data-size="xs"]:is([data-kit="input"], [data-kit="textarea"], [data-kit="select"], [data-kit="input-group"], [data-kit="number-input"], [data-kit="combobox"])) {
+  --_height: var(--kit-size-control-xs);
+  --_pad: var(--kit-space-control-inline-xs);
+  --_font-size: var(--kit-text-caption-size);
+  --_line-height: var(--kit-text-caption-line-height);
+}
+
+:where([data-size="sm"]:is([data-kit="input"], [data-kit="textarea"], [data-kit="select"], [data-kit="input-group"], [data-kit="number-input"], [data-kit="combobox"])) {
+  --_height: var(--kit-size-control-sm);
+  --_pad: var(--kit-space-control-inline-sm);
+}
+
+:where([data-size="lg"]:is([data-kit="input"], [data-kit="textarea"], [data-kit="select"], [data-kit="input-group"], [data-kit="number-input"], [data-kit="combobox"])) {
+  --_height: var(--kit-size-control-lg);
+  --_pad: var(--kit-space-control-inline-lg);
+}
+
+:where([data-size="xl"]:is([data-kit="input"], [data-kit="textarea"], [data-kit="select"], [data-kit="input-group"], [data-kit="number-input"], [data-kit="combobox"])) {
+  --_height: var(--kit-size-control-xl);
+  --_pad: var(--kit-space-control-inline-xl);
+}
+
+:where([data-kit="input"], [data-kit="textarea"], [data-kit="select"], [data-kit="input-group"], [data-kit="number-input"], [data-kit="combobox"]):hover {
+  --_bd: var(--kit-color-border-strong);
+}
+
+:where([data-kit="input"], [data-kit="textarea"], [data-kit="select"]):focus-visible,
+:where([data-kit="input-group"], [data-kit="number-input"], [data-kit="combobox"]):focus-within {
+  --_bd: var(--kit-color-border-focus);
+
+  outline: var(--kit-border-width-focus) solid var(--kit-color-border-focus);
+  outline-offset: 0;
+}
+
+:where([data-kit="input"], [data-kit="textarea"], [data-kit="select"], [data-kit="input-group"], [data-kit="number-input"], [data-kit="combobox"])[data-invalid],
+:where([data-kit="input"], [data-kit="textarea"], [data-kit="select"])[aria-invalid="true"] {
+  --_bd: var(--kit-color-status-danger-foreground);
+}
+
+:where([data-kit="input"], [data-kit="textarea"], [data-kit="select"], [data-kit="input-group"], [data-kit="number-input"], [data-kit="combobox"])[data-disabled],
+:where([data-kit="input"], [data-kit="textarea"], [data-kit="select"]):disabled {
+  --_bg: var(--kit-color-bg-canvas);
+  --_bd: var(--kit-color-border-subtle);
+  --_fg: var(--kit-color-text-disabled);
+
+  cursor: not-allowed;
+}
+
+:where([data-kit="input"], [data-kit="textarea"], [data-kit="combobox"] [data-kit-slot="combobox-input"], [data-kit="number-input"] [data-kit-slot="number-control"])::placeholder {
+  color: var(--kit-color-text-tertiary);
+  opacity: 1;
+}
+
+/* ----------------------------------------------------------------- Input */
+
+:where([data-kit="input"]) {
+  inline-size: 100%;
+  padding-block: 0;
+  padding-inline: var(--_pad);
+}
+
+:where([data-kit="input"])::-webkit-search-cancel-button {
+  appearance: none;
+}
+
+/* ------------------------------------------------------------- Textarea */
+
+:where([data-kit="textarea"]) {
+  inline-size: 100%;
+  padding-block: var(--kit-space-2);
+  padding-inline: var(--_pad);
+  resize: vertical;
+}
+
+:where([data-kit="textarea"][data-auto-resize]) {
+  field-sizing: content;
+  resize: none;
+}
+
+/* --------------------------------------------- InputGroup and InputAddon */
+
+:where([data-kit="input-group"], [data-kit="number-input"]) {
+  display: flex;
+  align-items: stretch;
+  inline-size: 100%;
+  overflow: hidden;
+}
+
+/* Inside a group the group draws the border and ring; the input goes bare. */
+:where([data-kit="input-group"] > [data-kit="input"]) {
+  flex: 1 1 auto;
+  min-inline-size: 0;
+  min-block-size: 0;
+  border: 0;
+  border-radius: 0;
+  background-color: transparent;
+  box-shadow: none;
+}
+
+:where([data-kit="input-group"] > [data-kit="input"]):focus-visible {
+  outline-color: transparent;
+}
+
+:where([data-kit="input-addon"]) {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  padding-inline: var(--_pad);
+  color: var(--kit-color-text-secondary);
+  white-space: nowrap;
+}
+
+:where([data-kit="input-group"] > [data-kit="input-addon"] + [data-kit="input"]) {
+  padding-inline-start: 0;
+}
+
+:where([data-kit="input-group"] > [data-kit="button"]) {
+  align-self: center;
+  margin-inline-end: var(--kit-space-0-5);
+}
+
+/* ----------------------------------------------------------- NumberInput */
+
+:where([data-kit="number-input"] [data-kit-slot="number-control"]) {
+  flex: 1 1 auto;
+  min-inline-size: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background-color: transparent;
+  color: inherit;
+  font: inherit;
+  font-variant-numeric: tabular-nums;
+  text-align: center;
+}
+
+:where([data-kit="number-input"] [data-kit-slot="number-control"]):focus-visible {
+  outline-color: transparent;
+}
+
+:where([data-kit="number-input"] :is([data-kit-slot="number-decrement"], [data-kit-slot="number-increment"])) {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  min-inline-size: var(--kit-size-target-min);
+  padding: 0;
+  border: 0;
+  background-color: transparent;
+  color: var(--kit-color-text-secondary);
+  cursor: pointer;
+}
+
+:where([data-kit="number-input"] [data-kit-slot="number-decrement"]) {
+  border-inline-end: var(--kit-border-width-default) solid var(--kit-color-border-subtle);
+}
+
+:where([data-kit="number-input"] [data-kit-slot="number-increment"]) {
+  border-inline-start: var(--kit-border-width-default) solid var(--kit-color-border-subtle);
+}
+
+:where([data-kit="number-input"] :is([data-kit-slot="number-decrement"], [data-kit-slot="number-increment"])):hover {
+  background-color: color-mix(in srgb, var(--kit-color-text-primary) 8%, transparent);
+  color: var(--kit-color-text-primary);
+}
+
+:where([data-kit="number-input"] :is([data-kit-slot="number-decrement"], [data-kit-slot="number-increment"])):focus-visible {
+  outline: var(--kit-border-width-focus) solid var(--kit-color-border-focus);
+  outline-offset: calc(var(--kit-border-width-focus) * -1);
+}
+
+:where([data-kit="number-input"] :is([data-kit-slot="number-decrement"], [data-kit-slot="number-increment"])[data-disabled]) {
+  color: var(--kit-color-text-disabled);
+  cursor: not-allowed;
+}
+
+/* ---------------------------------------------------------------- Select */
+
+:where([data-kit="select"]) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--kit-space-2);
+  min-inline-size: calc(var(--kit-size-56) * 3);
+  padding-block: 0;
+  padding-inline: var(--_pad);
+  text-align: start;
+  cursor: pointer;
+}
+
+:where([data-kit="select"] [data-kit-slot="select-value"]) {
+  flex: 1 1 auto;
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+:where([data-kit="select"] [data-kit-slot="select-value"][data-placeholder]) {
+  color: var(--kit-color-text-tertiary);
+}
+
+:where([data-kit="select"] [data-kit-slot="select-icon"]) {
+  display: inline-flex;
+  flex-shrink: 0;
+  color: var(--kit-color-text-secondary);
+}
+
+:where([data-kit="select"][data-popup-open] [data-kit-slot="select-icon"]) {
+  transform: rotate(0.5turn);
+}
+
+/* -------------------------------------------------------------- Combobox */
+
+:where([data-kit="combobox"]) {
+  display: flex;
+  align-items: center;
+  inline-size: 100%;
+  padding-inline: var(--_pad) var(--kit-space-1);
+  gap: var(--kit-space-1);
+}
+
+:where([data-kit="combobox"] [data-kit-slot="combobox-input"]) {
+  flex: 1 1 auto;
+  min-inline-size: calc(var(--kit-size-56) / 2);
+  min-block-size: calc(var(--_height) - var(--kit-border-width-default) * 2);
+  padding: 0;
+  border: 0;
+  background-color: transparent;
+  color: inherit;
+  font: inherit;
+}
+
+:where([data-kit="combobox"] [data-kit-slot="combobox-input"]):focus-visible {
+  outline-color: transparent;
+}
+
+:where([data-kit="combobox"] :is([data-kit-slot="combobox-clear"], [data-kit-slot="combobox-trigger"])) {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  inline-size: var(--kit-size-target-min);
+  block-size: var(--kit-size-target-min);
+  padding: 0;
+  border: 0;
+  border-radius: var(--kit-radius-control);
+  background-color: transparent;
+  color: var(--kit-color-text-secondary);
+  cursor: pointer;
+}
+
+:where([data-kit="combobox"] :is([data-kit-slot="combobox-clear"], [data-kit-slot="combobox-trigger"])):hover {
+  background-color: color-mix(in srgb, var(--kit-color-text-primary) 8%, transparent);
+  color: var(--kit-color-text-primary);
+}
+
+:where([data-kit="combobox"] :is([data-kit-slot="combobox-clear"], [data-kit-slot="combobox-trigger"])):focus-visible {
+  outline: var(--kit-border-width-focus) solid var(--kit-color-border-focus);
+  outline-offset: calc(var(--kit-border-width-focus) * -1);
+}
+
+/* Multiple: chips and the input share a wrapping row. */
+:where([data-kit="combobox"][data-multiple]) {
+  flex-wrap: wrap;
+  align-items: center;
+  padding-block: var(--kit-space-0-5);
+  min-block-size: var(--_height);
+}
+
+:where([data-kit="combobox"] [data-kit-slot="combobox-chip"]) {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--kit-space-0-5);
+  box-sizing: border-box;
+  block-size: var(--kit-badge-height-md);
+  padding-inline: var(--kit-space-2) var(--kit-space-0-5);
+  border: var(--kit-border-width-default) solid var(--kit-color-border-default);
+  border-radius: var(--kit-radius-pill);
+  background-color: color-mix(in srgb, var(--kit-color-text-primary) 8%, transparent);
+  font-size: var(--kit-text-caption-size);
+  line-height: var(--kit-text-caption-line-height);
+}
+
+:where([data-kit="combobox"] [data-kit-slot="combobox-chip"]):is([data-highlighted], :focus-visible) {
+  border-color: var(--kit-color-border-focus);
+  outline: var(--kit-border-width-focus) solid var(--kit-color-border-focus);
+  outline-offset: 0;
+}
+
+:where([data-kit="combobox"] [data-kit-slot="combobox-chip-remove"]) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  inline-size: var(--kit-size-icon-sm);
+  block-size: var(--kit-size-icon-sm);
+  padding: 0;
+  border: 0;
+  border-radius: var(--kit-radius-full);
+  background-color: transparent;
+  color: var(--kit-color-text-secondary);
+  cursor: pointer;
+}
+
+:where([data-kit="combobox"] [data-kit-slot="combobox-chip-remove"]):hover {
+  background-color: color-mix(in srgb, var(--kit-color-text-primary) 14%, transparent);
+  color: var(--kit-color-text-primary);
+}
+
+/* ------------------------------------------------------------- OTPInput */
+
+:where([data-kit="otp-input"]) {
+  --_size: var(--kit-size-control-lg);
+
+  display: inline-flex;
+  gap: var(--kit-space-2);
+}
+
+:where([data-kit="otp-input"][data-size="xs"]) {
+  --_size: var(--kit-size-control-xs);
+}
+
+:where([data-kit="otp-input"][data-size="sm"]) {
+  --_size: var(--kit-size-control-sm);
+}
+
+:where([data-kit="otp-input"][data-size="md"]) {
+  --_size: var(--kit-size-control-md);
+}
+
+:where([data-kit="otp-input"][data-size="xl"]) {
+  --_size: var(--kit-size-control-xl);
+}
+
+:where([data-kit="otp-input"] [data-kit-slot="otp-box"]) {
+  box-sizing: border-box;
+  inline-size: var(--_size);
+  block-size: var(--_size);
+  padding: 0;
+  border: var(--kit-border-width-default) solid var(--kit-color-border-default);
+  border-radius: var(--kit-radius-control);
+  background-color: var(--kit-color-bg-surface);
+  color: var(--kit-color-text-primary);
+  font-family: var(--kit-font-family-mono);
+  font-size: var(--kit-text-body-size);
+  font-variant-numeric: tabular-nums;
+  text-align: center;
+}
+
+:where([data-kit="otp-input"] [data-kit-slot="otp-box"]):hover {
+  border-color: var(--kit-color-border-strong);
+}
+
+:where([data-kit="otp-input"] [data-kit-slot="otp-box"]):focus-visible {
+  border-color: var(--kit-color-border-focus);
+  outline: var(--kit-border-width-focus) solid var(--kit-color-border-focus);
+  outline-offset: 0;
+}
+
+:where([data-kit="otp-input"][data-invalid] [data-kit-slot="otp-box"]) {
+  border-color: var(--kit-color-status-danger-foreground);
+}
+
+:where([data-kit="otp-input"][data-disabled] [data-kit-slot="otp-box"]) {
+  border-color: var(--kit-color-border-subtle);
+  background-color: var(--kit-color-bg-canvas);
+  color: var(--kit-color-text-disabled);
+}
+
+/* -------------------------------------------- Checkbox, Radio and Switch */
+
+:where([data-kit="choice"]) {
+  display: inline-flex;
+  align-items: flex-start;
+  gap: var(--kit-space-2);
+  min-block-size: var(--kit-size-target-min);
+  color: var(--kit-color-text-primary);
+  font-family: var(--kit-font-family-sans);
+  font-size: var(--kit-text-body-size);
+  line-height: var(--kit-text-body-line-height);
+  cursor: pointer;
+}
+
+:where([data-kit="choice"][data-disabled]) {
+  color: var(--kit-color-text-disabled);
+  cursor: not-allowed;
+}
+
+:where([data-kit="choice"] [data-kit-slot="choice-text"]) {
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+}
+
+:where([data-kit="choice"] [data-kit-slot="choice-description"]) {
+  color: var(--kit-color-text-secondary);
+  font-size: var(--kit-text-caption-size);
+  line-height: var(--kit-text-caption-line-height);
+}
+
+:where([data-kit="choice"][data-disabled] [data-kit-slot="choice-description"]) {
+  color: var(--kit-color-text-disabled);
+}
+
+/* The box is vertically centred on the first line of text. */
+:where([data-kit="choice"] > :is([data-kit="checkbox"], [data-kit="radio"])) {
+  margin-block-start: calc((var(--kit-text-body-line-height) - var(--kit-size-icon-sm)) / 2);
+}
+
+:where([data-kit="choice"] > [data-kit="switch"]) {
+  margin-block-start: calc((var(--kit-text-body-line-height) - var(--kit-size-icon-md)) / 2);
+}
+
+:where([data-kit="checkbox"], [data-kit="radio"]) {
+  position: relative;
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  inline-size: var(--kit-size-icon-sm);
+  block-size: var(--kit-size-icon-sm);
+  margin: 0;
+  padding: 0;
+  border: var(--kit-border-width-default) solid var(--kit-color-border-strong);
+  border-radius: var(--kit-radius-4);
+  background-color: var(--kit-color-bg-surface);
+  color: var(--kit-color-accent-on-accent);
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  transition:
+    background-color var(--kit-duration-instant) var(--kit-easing-standard),
+    border-color var(--kit-duration-instant) var(--kit-easing-standard);
+}
+
+/* A larger invisible hit area meets the minimum target size without a bigger box. */
+:where([data-kit="checkbox"], [data-kit="radio"])::before {
+  content: "";
+  position: absolute;
+  inset: calc((var(--kit-size-target-min) - var(--kit-size-icon-sm)) / -2);
+}
+
+:where([data-kit="radio"]) {
+  border-radius: var(--kit-radius-full);
+}
+
+:where([data-kit="checkbox"], [data-kit="radio"]):hover {
+  border-color: var(--kit-color-text-primary);
+}
+
+:where([data-kit="checkbox"], [data-kit="radio"]):is([data-checked], [data-indeterminate]) {
+  border-color: var(--kit-color-accent-default);
+  background-color: var(--kit-color-accent-default);
+}
+
+:where([data-kit="checkbox"], [data-kit="radio"]):focus-visible {
+  outline: var(--kit-border-width-focus) solid var(--kit-color-border-focus);
+  outline-offset: var(--kit-space-0-5);
+}
+
+:where([data-kit="checkbox"], [data-kit="radio"])[data-invalid] {
+  border-color: var(--kit-color-status-danger-foreground);
+}
+
+:where([data-kit="checkbox"], [data-kit="radio"]):is([data-disabled], [aria-disabled="true"]) {
+  border-color: var(--kit-color-border-subtle);
+  background-color: var(--kit-color-bg-canvas);
+  color: var(--kit-color-text-disabled);
+  cursor: not-allowed;
+}
+
+:where([data-kit="checkbox"], [data-kit="radio"]):is([data-disabled], [aria-disabled="true"]):is([data-checked], [data-indeterminate]) {
+  border-color: var(--kit-color-text-disabled);
+  background-color: var(--kit-color-text-disabled);
+  color: var(--kit-color-bg-canvas);
+}
+
+/* Check or dash: the indeterminate state shows a dash, not a check. */
+:where([data-kit="checkbox"] [data-kit-slot="checkbox-indicator"]) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+:where([data-kit="checkbox"][data-indeterminate] [data-kit-slot="checkbox-check"]) {
+  display: none;
+}
+
+:where([data-kit="checkbox"]:not([data-indeterminate]) [data-kit-slot="checkbox-dash"]) {
+  display: none;
+}
+
+/* The radio's dot. */
+:where([data-kit="radio"] [data-kit-slot="radio-indicator"]) {
+  display: block;
+  inline-size: var(--kit-space-2);
+  block-size: var(--kit-space-2);
+  border-radius: var(--kit-radius-full);
+  background-color: currentcolor;
+}
+
+:where([data-kit="checkbox-group"]),
+:where([data-kit="radio-group"]) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kit-space-2);
+}
+
+:where([data-kit="radio-group"][data-orientation="horizontal"]) {
+  flex-flow: row wrap;
+  gap: var(--kit-space-2) var(--kit-space-4);
+}
+
+/* Switch: a track and a thumb that slides along it, in either text direction. */
+:where([data-kit="switch"]) {
+  --_track-w: var(--kit-size-32);
+  --_track-h: var(--kit-size-icon-md);
+  --_thumb: var(--kit-size-icon-sm);
+  --_inset: var(--kit-space-0-5);
+
+  position: relative;
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  box-sizing: border-box;
+  inline-size: var(--_track-w);
+  block-size: var(--_track-h);
+  margin: 0;
+  padding: 0;
+  border: var(--kit-border-width-default) solid var(--kit-color-border-strong);
+  border-radius: var(--kit-radius-full);
+  background-color: var(--kit-color-bg-canvas);
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  transition:
+    background-color var(--kit-duration-fast) var(--kit-easing-standard),
+    border-color var(--kit-duration-fast) var(--kit-easing-standard);
+}
+
+:where([data-kit="switch"])::before {
+  content: "";
+  position: absolute;
+  inset-inline: 0;
+  inset-block: calc((var(--kit-size-target-min) - var(--_track-h)) / -2);
+}
+
+:where([data-kit="switch"] [data-kit-slot="switch-thumb"]) {
+  position: absolute;
+  inset-inline-start: var(--_inset);
+  box-sizing: border-box;
+  inline-size: var(--_thumb);
+  block-size: var(--_thumb);
+  border-radius: var(--kit-radius-full);
+  background-color: var(--kit-color-border-strong);
+  transition:
+    inset-inline-start var(--kit-duration-fast) var(--kit-easing-standard),
+    background-color var(--kit-duration-fast) var(--kit-easing-standard);
+}
+
+:where([data-kit="switch"][data-checked]) {
+  border-color: var(--kit-color-accent-default);
+  background-color: var(--kit-color-accent-default);
+}
+
+:where([data-kit="switch"][data-checked] [data-kit-slot="switch-thumb"]) {
+  inset-inline-start: calc(100% - var(--_thumb) - var(--_inset));
+  background-color: var(--kit-color-accent-on-accent);
+}
+
+:where([data-kit="switch"]):hover:not([data-checked]) {
+  border-color: var(--kit-color-text-primary);
+}
+
+:where([data-kit="switch"]):focus-visible {
+  outline: var(--kit-border-width-focus) solid var(--kit-color-border-focus);
+  outline-offset: var(--kit-space-0-5);
+}
+
+:where([data-kit="switch"][data-disabled]) {
+  border-color: var(--kit-color-border-subtle);
+  cursor: not-allowed;
+}
+
+:where([data-kit="switch"][data-disabled] [data-kit-slot="switch-thumb"]) {
+  background-color: var(--kit-color-border-subtle);
+}
+
+:where([data-kit="switch"][data-disabled][data-checked]) {
+  background-color: var(--kit-color-text-disabled);
+}
+
+/* ---------------------------------------------------------------- Slider */
+
+:where([data-kit="slider"]) {
+  --_thumb: var(--kit-size-icon-md);
+  --_track: var(--kit-space-1);
+
+  display: flex;
+  align-items: center;
+  gap: var(--kit-space-3);
+  inline-size: 100%;
+  min-block-size: var(--kit-size-target-min);
+  color: var(--kit-color-text-primary);
+  font-family: var(--kit-font-family-sans);
+  font-size: var(--kit-text-caption-size);
+  touch-action: none;
+  user-select: none;
+}
+
+:where([data-kit="slider"] [data-kit-slot="slider-control"]) {
+  position: relative;
+  display: flex;
+  flex: 1 1 auto;
+  align-items: center;
+  block-size: var(--_thumb);
+  min-inline-size: 0;
+  /* Thumbs are centred on the track ends, so inset by half a thumb to keep them inside. */
+  padding-inline: calc(var(--_thumb) / 2);
+  cursor: pointer;
+}
+
+:where([data-kit="slider"] [data-kit-slot="slider-track"]) {
+  position: relative;
+  inline-size: 100%;
+  block-size: var(--_track);
+  border-radius: var(--kit-radius-full);
+  background-color: var(--kit-color-border-default);
+}
+
+:where([data-kit="slider"] [data-kit-slot="slider-indicator"]) {
+  border-radius: var(--kit-radius-full);
+  background-color: var(--kit-color-accent-default);
+}
+
+:where([data-kit="slider"] [data-kit-slot="slider-thumb"]) {
+  box-sizing: border-box;
+  inline-size: var(--_thumb);
+  block-size: var(--_thumb);
+  border: var(--kit-border-width-emphasis) solid var(--kit-color-accent-default);
+  border-radius: var(--kit-radius-full);
+  background-color: var(--kit-color-bg-surface);
+  box-shadow: var(--kit-shadow-raised);
+  transition: transform var(--kit-duration-instant) var(--kit-easing-standard);
+}
+
+:where([data-kit="slider"] [data-kit-slot="slider-thumb"]):hover {
+  transform: scale(1.1);
+}
+
+:where([data-kit="slider"] [data-kit-slot="slider-thumb"]:has(:focus-visible)) {
+  outline: var(--kit-border-width-focus) solid var(--kit-color-border-focus);
+  outline-offset: var(--kit-space-0-5);
+}
+
+:where([data-kit="slider"][data-dragging] [data-kit-slot="slider-thumb"]) {
+  transform: scale(1.1);
+}
+
+:where([data-kit="slider"] [data-kit-slot="slider-value"]) {
+  flex-shrink: 0;
+  min-inline-size: var(--kit-size-32);
+  color: var(--kit-color-text-secondary);
+  font-variant-numeric: tabular-nums;
+  text-align: end;
+}
+
+:where([data-kit="slider"][data-disabled]) {
+  cursor: not-allowed;
+}
+
+:where([data-kit="slider"][data-disabled] [data-kit-slot="slider-indicator"]) {
+  background-color: var(--kit-color-text-disabled);
+}
+
+:where([data-kit="slider"][data-disabled] [data-kit-slot="slider-thumb"]) {
+  border-color: var(--kit-color-text-disabled);
+  box-shadow: none;
+}
+
+:where([data-kit="slider"][data-orientation="vertical"]) {
+  flex-direction: column;
+  inline-size: auto;
+  block-size: 100%;
+}
+
+:where([data-kit="slider"][data-orientation="vertical"] [data-kit-slot="slider-control"]) {
+  flex-direction: column;
+  inline-size: var(--_thumb);
+  block-size: 100%;
+}
+
+:where([data-kit="slider"][data-orientation="vertical"] [data-kit-slot="slider-track"]) {
+  inline-size: var(--_track);
+  block-size: 100%;
+}
+
+/* ----------------------------------------------------------------- Field */
+
+:where([data-kit="field"]) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kit-space-1);
+  min-inline-size: 0;
+  font-family: var(--kit-font-family-sans);
+}
+
+:where([data-kit="field"] [data-kit-slot="field-label"]) {
+  color: var(--kit-color-text-primary);
+  font-size: var(--kit-text-label-size);
+  font-weight: var(--kit-text-label-weight);
+  line-height: var(--kit-text-label-line-height);
+}
+
+:where([data-kit="field"] [data-kit-slot="field-required"]) {
+  margin-inline-start: var(--kit-space-0-5);
+  color: var(--kit-color-status-danger-foreground);
+}
+
+:where([data-kit="field"] [data-kit-slot="field-description"]) {
+  color: var(--kit-color-text-secondary);
+  font-size: var(--kit-text-caption-size);
+  line-height: var(--kit-text-caption-line-height);
+}
+
+:where([data-kit="field"] [data-kit-slot="field-control"]) {
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+}
+
+:where([data-kit="field"] [data-kit-slot="field-error"]) {
+  color: var(--kit-color-status-danger-foreground);
+  font-size: var(--kit-text-caption-size);
+  line-height: var(--kit-text-caption-line-height);
+}
+
+:where([data-kit="field"][data-disabled] [data-kit-slot="field-label"]) {
+  color: var(--kit-color-text-disabled);
+}
+
+/* Horizontal: the control sits first, the text beside it. */
+:where([data-kit="field"][data-orientation="horizontal"]) {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  column-gap: var(--kit-space-2);
+  align-items: start;
+}
+
+:where([data-kit="field"][data-orientation="horizontal"] [data-kit-slot="field-control"]) {
+  grid-column: 1;
+  grid-row: 1 / span 3;
+}
+
+:where([data-kit="field"][data-orientation="horizontal"] :is([data-kit-slot="field-label"], [data-kit-slot="field-description"], [data-kit-slot="field-error"])) {
+  grid-column: 2;
+}
+
+/* -------------------------------------------------------------- Fieldset */
+
+:where([data-kit="fieldset"]) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kit-space-2);
+  min-inline-size: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-family: var(--kit-font-family-sans);
+}
+
+:where([data-kit="fieldset"] [data-kit-slot="fieldset-legend"]) {
+  padding: 0;
+  color: var(--kit-color-text-primary);
+  font-size: var(--kit-text-label-size);
+  font-weight: var(--kit-text-label-weight);
+  line-height: var(--kit-text-label-line-height);
+}
+
+:where([data-kit="fieldset"] [data-kit-slot="fieldset-description"]) {
+  margin: 0;
+  color: var(--kit-color-text-secondary);
+  font-size: var(--kit-text-caption-size);
+  line-height: var(--kit-text-caption-line-height);
+}
+
+:where([data-kit="fieldset"] [data-kit-slot="fieldset-body"]) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kit-space-3);
+}
+
+/* ------------------------------------------------- Reduced motion, forced */
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-kit="switch"], [data-kit="switch"] [data-kit-slot="switch-thumb"], [data-kit="slider"] [data-kit-slot="slider-thumb"], [data-kit="checkbox"], [data-kit="radio"]) {
+    transition: none;
+  }
+}
+
+@media (forced-colors: active) {
+  :where([data-kit="input"], [data-kit="textarea"], [data-kit="select"], [data-kit="input-group"], [data-kit="number-input"], [data-kit="combobox"]) {
+    border-color: FieldText;
+  }
+
+  :where([data-kit="checkbox"], [data-kit="radio"], [data-kit="switch"]) {
+    border-color: ButtonText;
+  }
+
+  :where([data-kit="checkbox"], [data-kit="radio"]):is([data-checked], [data-indeterminate]) {
+    border-color: Highlight;
+    background-color: Highlight;
+    color: HighlightText;
+  }
+
+  :where([data-kit="switch"][data-checked]) {
+    border-color: Highlight;
+    background-color: Highlight;
+  }
+
+  :where([data-kit="switch"] [data-kit-slot="switch-thumb"]) {
+    background-color: ButtonText;
+  }
+
+  :where([data-kit="switch"][data-checked] [data-kit-slot="switch-thumb"]) {
+    background-color: HighlightText;
+  }
+
+  :where([data-kit="slider"] [data-kit-slot="slider-thumb"]) {
+    border-color: Highlight;
+    background-color: Canvas;
+  }
+
+  :where([data-kit="slider"] [data-kit-slot="slider-indicator"]) {
+    background-color: Highlight;
+  }
+
+  :where([data-kit="slider"] [data-kit-slot="slider-track"]) {
+    background-color: GrayText;
+  }
+}
+
+/* =========================================================================
+ * Feedback: Alert, Callout, Progress, Meter, Skeleton, EmptyState
+ *
+ * Tone is never carried by color alone: every tone also has its own icon and
+ * usually a title, so the meaning survives forced colors and color blindness.
+ * ========================================================================= */
+
+/* ------------------------------------------------------- Alert and Callout */
+
+:where([data-kit="alert"], [data-kit="callout"]) {
+  --_bg: var(--kit-color-bg-raised);
+  --_bd: var(--kit-color-border-default);
+  --_accent: var(--kit-color-text-secondary);
+
+  display: flex;
+  align-items: flex-start;
+  gap: var(--kit-space-3);
+  box-sizing: border-box;
+  margin: 0;
+  padding: var(--kit-space-3) var(--kit-space-4);
+  border: var(--kit-border-width-default) solid var(--_bd);
+  border-radius: var(--kit-radius-panel);
+  background-color: var(--_bg);
+  color: var(--kit-color-text-primary);
+  font-family: var(--kit-font-family-sans);
+  font-size: var(--kit-text-body-size);
+  line-height: var(--kit-text-body-line-height);
+}
+
+:where([data-kit="alert"][data-tone="accent"], [data-kit="callout"][data-tone="accent"]) {
+  --_bg: var(--kit-color-accent-subtle);
+  --_bd: var(--kit-color-accent-default);
+  --_accent: var(--kit-color-accent-default);
+}
+
+:where([data-kit="alert"][data-tone="success"], [data-kit="callout"][data-tone="success"]) {
+  --_bg: var(--kit-color-status-success-background);
+  --_bd: var(--kit-color-status-success-border);
+  --_accent: var(--kit-color-status-success-foreground);
+}
+
+:where([data-kit="alert"][data-tone="warning"], [data-kit="callout"][data-tone="warning"]) {
+  --_bg: var(--kit-color-status-warning-background);
+  --_bd: var(--kit-color-status-warning-border);
+  --_accent: var(--kit-color-status-warning-foreground);
+}
+
+:where([data-kit="alert"][data-tone="danger"], [data-kit="callout"][data-tone="danger"]) {
+  --_bg: var(--kit-color-status-danger-background);
+  --_bd: var(--kit-color-status-danger-border);
+  --_accent: var(--kit-color-status-danger-foreground);
+}
+
+:where([data-kit="alert"][data-tone="info"], [data-kit="callout"][data-tone="info"]) {
+  --_bg: var(--kit-color-status-info-background);
+  --_bd: var(--kit-color-status-info-border);
+  --_accent: var(--kit-color-status-info-foreground);
+}
+
+/* A callout is a note inside content, so it reads as an aside with a rule. */
+:where([data-kit="callout"]) {
+  border-inline-start-width: var(--kit-border-width-emphasis);
+  border-inline-start-color: var(--_accent);
+  border-start-start-radius: var(--kit-radius-control);
+  border-end-start-radius: var(--kit-radius-control);
+}
+
+:where([data-kit-slot="alert-icon"], [data-kit-slot="callout-icon"]) {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  block-size: var(--kit-text-body-line-height);
+  color: var(--_accent);
+}
+
+:where([data-kit-slot="alert-body"], [data-kit-slot="callout-body"]) {
+  display: grid;
+  flex: 1 1 auto;
+  gap: var(--kit-space-1);
+  min-inline-size: 0;
+}
+
+:where([data-kit-slot="alert-title"], [data-kit-slot="callout-title"]) {
+  font-weight: var(--kit-font-weight-semibold);
+}
+
+:where([data-kit-slot="alert-message"], [data-kit-slot="callout-content"]) {
+  color: var(--kit-color-text-primary);
+}
+
+:where([data-kit-slot="alert-action"]) {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  align-self: center;
+  gap: var(--kit-space-2);
+}
+
+/* The dismiss button sits in the corner without growing the alert. */
+:where([data-kit="alert"] > [data-kit="button"]) {
+  flex: none;
+  margin-block: calc(var(--kit-space-1) * -1);
+  margin-inline-end: calc(var(--kit-space-2) * -1);
+}
+
+@media (forced-colors: active) {
+  :where([data-kit="alert"], [data-kit="callout"]) {
+    border-color: CanvasText;
+  }
+}
+
+/* ------------------------------------------------------- Progress and Meter */
+
+:where([data-kit="progress"], [data-kit="meter"]) {
+  --_track-height: var(--kit-space-2);
+  --_fill: var(--kit-color-accent-default);
+
+  display: grid;
+  gap: var(--kit-space-1);
+  box-sizing: border-box;
+  inline-size: 100%;
+  font-family: var(--kit-font-family-sans);
+  font-size: var(--kit-text-label-size);
+  line-height: var(--kit-text-label-line-height);
+  color: var(--kit-color-text-primary);
+}
+
+:where([data-size="sm"]:is([data-kit="progress"], [data-kit="meter"])) {
+  --_track-height: var(--kit-space-1);
+}
+
+:where([data-size="lg"]:is([data-kit="progress"], [data-kit="meter"])) {
+  --_track-height: var(--kit-space-3);
+}
+
+:where([data-tone="neutral"]:is([data-kit="progress"], [data-kit="meter"])) {
+  --_fill: var(--kit-color-text-secondary);
+}
+
+:where([data-tone="success"]:is([data-kit="progress"], [data-kit="meter"])) {
+  --_fill: var(--kit-color-status-success-foreground);
+}
+
+:where([data-tone="warning"]:is([data-kit="progress"], [data-kit="meter"])) {
+  --_fill: var(--kit-color-status-warning-foreground);
+}
+
+:where([data-tone="danger"]:is([data-kit="progress"], [data-kit="meter"])) {
+  --_fill: var(--kit-color-status-danger-foreground);
+}
+
+:where([data-tone="info"]:is([data-kit="progress"], [data-kit="meter"])) {
+  --_fill: var(--kit-color-status-info-foreground);
+}
+
+:where([data-kit-slot="progress-header"]) {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--kit-space-3);
+}
+
+:where([data-kit-slot="progress-label"]) {
+  font-weight: var(--kit-text-label-weight);
+}
+
+:where([data-kit-slot="progress-value"]) {
+  color: var(--kit-color-text-secondary);
+  font-variant-numeric: tabular-nums;
+}
+
+:where([data-kit-slot="progress-track"]) {
+  position: relative;
+  box-sizing: border-box;
+  overflow: hidden;
+  block-size: var(--_track-height);
+  border-radius: var(--kit-radius-pill);
+  background-color: color-mix(in srgb, var(--kit-color-text-primary) 14%, transparent);
+}
+
+:where([data-kit-slot="progress-indicator"]) {
+  display: block;
+  block-size: 100%;
+  border-radius: inherit;
+  background-color: var(--_fill);
+  transition: width var(--kit-duration-base) var(--kit-easing-standard);
+}
+
+/* Without a known value the fill sweeps across the track. */
+:where([data-kit="progress"][data-indeterminate] [data-kit-slot="progress-indicator"]) {
+  position: absolute;
+  inset-block: 0;
+  inline-size: 40%;
+  animation: kit-progress-sweep 1400ms var(--kit-easing-standard) infinite;
+}
+
+@keyframes kit-progress-sweep {
+  from {
+    inset-inline-start: -40%;
+  }
+
+  to {
+    inset-inline-start: 100%;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-kit-slot="progress-indicator"]) {
+    transition: none;
+  }
+
+  :where([data-kit="progress"][data-indeterminate] [data-kit-slot="progress-indicator"]) {
+    inset-inline-start: 0;
+    animation: none;
+  }
+}
+
+@media (forced-colors: active) {
+  :where([data-kit-slot="progress-track"]) {
+    border: var(--kit-border-width-default) solid CanvasText;
+  }
+
+  :where([data-kit-slot="progress-indicator"]) {
+    background-color: Highlight;
+  }
+}
+
+/* ---------------------------------------------------------- Progress circle */
+
+/*
+ * The ring is drawn in a 100 wide box, so its geometry is unitless (a stroke of
+ * 8 is 8% of the diameter) and it scales with the size token. The component
+ * sets pathLength to 100, so a dash unit is a percent and the fill is simply
+ * "100 minus the percent" off the start of the stroke.
+ */
+:where([data-kit="progress-circle"]) {
+  --_diameter: var(--kit-size-56);
+  --_thickness: 8;
+  --_fill: var(--kit-color-accent-default);
+  --_font-size: var(--kit-text-caption-size);
+
+  display: inline-grid;
+  justify-items: center;
+  gap: var(--kit-space-2);
+  box-sizing: border-box;
+  font-family: var(--kit-font-family-sans);
+  font-size: var(--kit-text-label-size);
+  line-height: var(--kit-text-label-line-height);
+  color: var(--kit-color-text-primary);
+}
+
+:where([data-kit="progress-circle"][data-size="sm"]) {
+  --_diameter: var(--kit-size-32);
+  --_thickness: 10;
+}
+
+:where([data-kit="progress-circle"][data-size="lg"]) {
+  --_diameter: calc(var(--kit-size-56) * 1.5);
+  --_thickness: 7;
+  --_font-size: var(--kit-text-h4-size);
+}
+
+:where([data-kit="progress-circle"][data-tone="success"]) {
+  --_fill: var(--kit-color-status-success-foreground);
+}
+
+:where([data-kit="progress-circle"][data-tone="warning"]) {
+  --_fill: var(--kit-color-status-warning-foreground);
+}
+
+:where([data-kit="progress-circle"][data-tone="danger"]) {
+  --_fill: var(--kit-color-status-danger-foreground);
+}
+
+:where([data-kit-slot="progress-circle-ring"]) {
+  position: relative;
+  inline-size: var(--_diameter);
+  block-size: var(--_diameter);
+}
+
+:where([data-kit-slot="progress-circle-svg"]) {
+  display: block;
+  inline-size: 100%;
+  block-size: 100%;
+}
+
+:where([data-kit-slot="progress-circle-track"], [data-kit-slot="progress-circle-indicator"]) {
+  fill: none;
+  stroke-width: var(--_thickness);
+}
+
+:where([data-kit-slot="progress-circle-track"]) {
+  stroke: color-mix(in srgb, var(--kit-color-text-primary) 14%, transparent);
+}
+
+/* The ring starts at the top and runs clockwise, in every writing direction. */
+:where([data-kit-slot="progress-circle-indicator"]) {
+  stroke: var(--_fill);
+  stroke-linecap: round;
+  stroke-dasharray: 100;
+  stroke-dashoffset: calc(100 - var(--_percent, 0));
+  transform: rotate(-90deg);
+  transform-origin: center;
+  transition: stroke-dashoffset var(--kit-duration-base) var(--kit-easing-standard);
+}
+
+:where([data-kit-slot="progress-circle-center"]) {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  font-size: var(--_font-size);
+  font-weight: var(--kit-text-label-weight);
+  font-variant-numeric: tabular-nums;
+}
+
+:where([data-kit-slot="progress-circle-label"]) {
+  font-weight: var(--kit-text-label-weight);
+}
+
+/* Without a known value a short arc turns around the ring. */
+:where([data-kit="progress-circle"][data-indeterminate] [data-kit-slot="progress-circle-svg"]) {
+  animation: kit-progress-circle-spin calc(var(--kit-duration-slow) * 3) linear infinite;
+}
+
+:where([data-kit="progress-circle"][data-indeterminate] [data-kit-slot="progress-circle-indicator"]) {
+  transition: none;
+}
+
+@keyframes kit-progress-circle-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-kit-slot="progress-circle-indicator"]) {
+    transition: none;
+  }
+
+  :where([data-kit="progress-circle"][data-indeterminate] [data-kit-slot="progress-circle-svg"]) {
+    animation: none;
+  }
+}
+
+@media (forced-colors: active) {
+  :where([data-kit-slot="progress-circle-track"]) {
+    stroke: GrayText;
+  }
+
+  :where([data-kit-slot="progress-circle-indicator"]) {
+    stroke: Highlight;
+  }
+}
+
+/* ----------------------------------------------------------------- Skeleton */
+
+:where([data-kit="skeleton"]) {
+  display: block;
+  box-sizing: border-box;
+  background-color: color-mix(in srgb, var(--kit-color-text-primary) 10%, transparent);
+  animation: kit-skeleton-pulse 1600ms var(--kit-easing-standard) infinite;
+}
+
+:where([data-kit="skeleton"][data-variant="text"]) {
+  inline-size: 100%;
+  block-size: var(--kit-space-4);
+  border-radius: var(--kit-radius-control);
+}
+
+:where([data-kit="skeleton"][data-variant="rect"]) {
+  inline-size: 100%;
+  block-size: var(--kit-space-16);
+  border-radius: var(--kit-radius-panel);
+}
+
+:where([data-kit="skeleton"][data-variant="circle"]) {
+  inline-size: var(--kit-size-40);
+  block-size: var(--kit-size-40);
+  border-radius: var(--kit-radius-full);
+}
+
+:where([data-kit="skeleton-text"]) {
+  display: grid;
+  gap: var(--kit-space-2);
+  inline-size: 100%;
+}
+
+:where([data-kit="skeleton-text"] > [data-kit="skeleton"]:last-child:not(:only-child)) {
+  inline-size: 60%;
+}
+
+@keyframes kit-skeleton-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.5;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-kit="skeleton"]) {
+    animation: none;
+  }
+}
+
+@media (forced-colors: active) {
+  :where([data-kit="skeleton"]) {
+    background-color: GrayText;
+    opacity: 0.4;
+    animation: none;
+  }
+}
+
+/* --------------------------------------------------------------- EmptyState */
+
+:where([data-kit="empty-state"]) {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--kit-space-2);
+  box-sizing: border-box;
+  padding: var(--kit-space-10) var(--kit-space-6);
+  text-align: center;
+  color: var(--kit-color-text-primary);
+  font-family: var(--kit-font-family-sans);
+}
+
+:where([data-kit-slot="empty-icon"]) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--kit-size-48);
+  block-size: var(--kit-size-48);
+  margin-block-end: var(--kit-space-2);
+  border-radius: var(--kit-radius-full);
+  background-color: var(--kit-color-bg-raised);
+  color: var(--kit-color-text-secondary);
+}
+
+:where([data-kit-slot="empty-title"]) {
+  margin: 0;
+  font-size: var(--kit-text-h4-size);
+  line-height: var(--kit-text-h4-line-height);
+  font-weight: var(--kit-text-h4-weight);
+}
+
+:where([data-kit-slot="empty-description"]) {
+  margin: 0;
+  max-inline-size: calc(var(--kit-size-56) * 7);
+  color: var(--kit-color-text-secondary);
+  font-size: var(--kit-text-body-size);
+  line-height: var(--kit-text-body-line-height);
+}
+
+:where([data-kit-slot="empty-action"]) {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: var(--kit-space-2);
+  margin-block-start: var(--kit-space-3);
+}
+
+/* =========================================================================
+ * Data display: Card, Avatar, Tag, Stat, Table, ScrollArea, Collapsible
+ * ========================================================================= */
+
+/* --------------------------------------------------------------------- Card */
+
+:where([data-kit="card"]) {
+  --_pad: var(--kit-space-4);
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--kit-space-3);
+  box-sizing: border-box;
+  min-inline-size: 0;
+  padding: var(--_pad);
+  border: var(--kit-border-width-default) solid var(--kit-color-border-default);
+  border-radius: var(--kit-radius-panel);
+  background-color: var(--kit-color-bg-surface);
+  color: var(--kit-color-text-primary);
+  font-family: var(--kit-font-family-sans);
+  font-size: var(--kit-text-body-size);
+  line-height: var(--kit-text-body-line-height);
+  text-decoration: none;
+}
+
+:where([data-kit="card"][data-variant="raised"]) {
+  border-color: var(--kit-color-border-subtle);
+  background-color: var(--kit-color-bg-raised);
+  box-shadow: var(--kit-shadow-raised);
+}
+
+:where([data-kit="card"][data-variant="flat"]) {
+  border-color: transparent;
+  background-color: var(--kit-color-bg-raised);
+}
+
+:where([data-kit="card"][data-padding="none"]) {
+  --_pad: var(--kit-space-0);
+}
+
+:where([data-kit="card"][data-padding="sm"]) {
+  --_pad: var(--kit-space-3);
+}
+
+:where([data-kit="card"][data-padding="lg"]) {
+  --_pad: var(--kit-space-6);
+}
+
+:where([data-kit="card"][data-interactive]) {
+  cursor: pointer;
+  transition:
+    border-color var(--kit-duration-fast) var(--kit-easing-standard),
+    box-shadow var(--kit-duration-fast) var(--kit-easing-standard);
+}
+
+:where([data-kit="card"][data-interactive]):hover {
+  border-color: var(--kit-color-border-strong);
+  box-shadow: var(--kit-shadow-raised);
+}
+
+:where([data-kit="card"][data-interactive]):focus-visible {
+  outline: var(--kit-border-width-focus) solid var(--kit-color-border-focus);
+  outline-offset: var(--kit-space-0-5);
+}
+
+:where([data-kit-slot="card-header"]) {
+  display: grid;
+  gap: var(--kit-space-1);
+}
+
+:where([data-kit-slot="card-title"]) {
+  margin: 0;
+  font-size: var(--kit-text-h4-size);
+  line-height: var(--kit-text-h4-line-height);
+  font-weight: var(--kit-text-h4-weight);
+}
+
+:where([data-kit-slot="card-description"]) {
+  margin: 0;
+  color: var(--kit-color-text-secondary);
+}
+
+:where([data-kit-slot="card-content"]) {
+  min-inline-size: 0;
+}
+
+:where([data-kit-slot="card-footer"]) {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--kit-space-2);
+}
+
+/* ------------------------------------------------------------------- Avatar */
+
+:where([data-kit="avatar"]) {
+  --_size: var(--kit-size-40);
+  --_font-size: var(--kit-font-size-14);
+
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  overflow: hidden;
+  inline-size: var(--_size);
+  block-size: var(--_size);
+  border-radius: var(--kit-radius-full);
+  background-color: var(--kit-color-accent-subtle);
+  color: var(--kit-color-text-primary);
+  font-family: var(--kit-font-family-sans);
+  font-size: var(--_font-size);
+  font-weight: var(--kit-font-weight-semibold);
+  line-height: 1;
+  vertical-align: middle;
+  user-select: none;
+}
+
+:where([data-kit="avatar"][data-size="xs"]) {
+  --_size: var(--kit-size-24);
+  --_font-size: var(--kit-font-size-12);
+}
+
+:where([data-kit="avatar"][data-size="sm"]) {
+  --_size: var(--kit-size-32);
+  --_font-size: var(--kit-font-size-13);
+}
+
+:where([data-kit="avatar"][data-size="lg"]) {
+  --_size: var(--kit-size-48);
+  --_font-size: var(--kit-font-size-16);
+}
+
+:where([data-kit="avatar"][data-size="xl"]) {
+  --_size: var(--kit-size-56);
+  --_font-size: var(--kit-font-size-20);
+}
+
+:where([data-kit="avatar"][data-shape="square"]) {
+  border-radius: var(--kit-radius-control);
+}
+
+:where([data-kit-slot="avatar-image"]) {
+  inline-size: 100%;
+  block-size: 100%;
+  object-fit: cover;
+}
+
+:where([data-kit-slot="avatar-fallback"]) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 100%;
+  block-size: 100%;
+}
+
+:where([data-kit="avatar-group"]) {
+  display: inline-flex;
+  align-items: center;
+  isolation: isolate;
+}
+
+:where([data-kit="avatar-group"] > [data-kit="avatar"]) {
+  box-shadow: 0 0 0 var(--kit-border-width-2) var(--kit-color-bg-surface);
+}
+
+:where([data-kit="avatar-group"] > [data-kit="avatar"] + [data-kit="avatar"]) {
+  margin-inline-start: calc(var(--kit-space-2) * -1);
+}
+
+:where([data-kit="avatar"][data-overflow]) {
+  background-color: var(--kit-color-bg-raised);
+  color: var(--kit-color-text-secondary);
+}
+
+/* ---------------------------------------------------------------------- Tag */
+
+:where([data-kit="tag"]) {
+  --_height: var(--kit-size-24);
+  --_bg: var(--kit-color-bg-raised);
+  --_bd: var(--kit-color-border-default);
+  --_fg: var(--kit-color-text-primary);
+
+  display: inline-flex;
+  align-items: center;
+  gap: var(--kit-space-1);
+  box-sizing: border-box;
+  min-block-size: var(--_height);
+  padding-inline: var(--kit-space-2);
+  border: var(--kit-border-width-default) solid var(--_bd);
+  border-radius: var(--kit-radius-control);
+  background-color: var(--_bg);
+  color: var(--_fg);
+  font-family: var(--kit-font-family-sans);
+  font-size: var(--kit-text-caption-size);
+  font-weight: var(--kit-font-weight-medium);
+  line-height: var(--kit-text-caption-line-height);
+  vertical-align: middle;
+}
+
+:where([data-kit="tag"][data-size="sm"]) {
+  --_height: var(--kit-badge-height-md);
+}
+
+:where([data-kit="tag"][data-tone="accent"]) {
+  --_bg: var(--kit-color-accent-subtle);
+  --_bd: var(--kit-color-accent-default);
+}
+
+:where([data-kit="tag"][data-tone="success"]) {
+  --_bg: var(--kit-color-status-success-background);
+  --_bd: var(--kit-color-status-success-border);
+  --_fg: var(--kit-color-status-success-foreground);
+}
+
+:where([data-kit="tag"][data-tone="warning"]) {
+  --_bg: var(--kit-color-status-warning-background);
+  --_bd: var(--kit-color-status-warning-border);
+  --_fg: var(--kit-color-status-warning-foreground);
+}
+
+:where([data-kit="tag"][data-tone="danger"]) {
+  --_bg: var(--kit-color-status-danger-background);
+  --_bd: var(--kit-color-status-danger-border);
+  --_fg: var(--kit-color-status-danger-foreground);
+}
+
+:where([data-kit="tag"][data-tone="info"]) {
+  --_bg: var(--kit-color-status-info-background);
+  --_bd: var(--kit-color-status-info-border);
+  --_fg: var(--kit-color-status-info-foreground);
+}
+
+:where([data-kit-slot="tag-icon"]) {
+  display: inline-flex;
+  align-items: center;
+}
+
+/* The remove button keeps the 24px minimum target without growing the tag. */
+:where([data-kit-slot="tag-remove"]) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  min-inline-size: var(--kit-size-target-min);
+  min-block-size: var(--kit-size-target-min);
+  margin-block: calc((var(--_height) - var(--kit-size-target-min)) / 2);
+  margin-inline: calc(var(--kit-space-1) * -1) calc(var(--kit-space-2) * -1);
+  padding: 0;
+  border: 0;
+  border-radius: var(--kit-radius-control);
+  background-color: transparent;
+  color: inherit;
+  cursor: pointer;
+}
+
+:where([data-kit-slot="tag-remove"]):hover {
+  background-color: color-mix(in srgb, currentcolor 14%, transparent);
+}
+
+:where([data-kit-slot="tag-remove"]):focus-visible {
+  outline: var(--kit-border-width-focus) solid var(--kit-color-border-focus);
+  outline-offset: 0;
+}
+
+@media (forced-colors: active) {
+  :where([data-kit="tag"]) {
+    border-color: CanvasText;
+  }
+}
+
+/* --------------------------------------------------------------------- Stat */
+
+:where([data-kit="stat"]) {
+  display: grid;
+  gap: var(--kit-space-1);
+  margin: 0;
+  font-family: var(--kit-font-family-sans);
+  color: var(--kit-color-text-primary);
+}
+
+:where([data-kit="stat"] dd) {
+  margin: 0;
+}
+
+:where([data-kit-slot="stat-label"]) {
+  color: var(--kit-color-text-secondary);
+  font-size: var(--kit-text-label-size);
+  line-height: var(--kit-text-label-line-height);
+  font-weight: var(--kit-text-label-weight);
+}
+
+:where([data-kit-slot="stat-value"]) {
+  font-size: var(--kit-text-h2-size);
+  line-height: var(--kit-text-h2-line-height);
+  font-weight: var(--kit-font-weight-semibold);
+  font-variant-numeric: tabular-nums;
+}
+
+:where([data-kit-slot="stat-delta"]) {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--kit-space-1);
+  color: var(--kit-color-text-secondary);
+  font-size: var(--kit-text-caption-size);
+  line-height: var(--kit-text-caption-line-height);
+  font-weight: var(--kit-font-weight-medium);
+  font-variant-numeric: tabular-nums;
+}
+
+:where([data-kit-slot="stat-delta"][data-intent="positive"]) {
+  color: var(--kit-color-status-success-foreground);
+}
+
+:where([data-kit-slot="stat-delta"][data-intent="negative"]) {
+  color: var(--kit-color-status-danger-foreground);
+}
+
+:where([data-kit-slot="stat-help"]) {
+  color: var(--kit-color-text-secondary);
+  font-size: var(--kit-text-caption-size);
+  line-height: var(--kit-text-caption-line-height);
+}
+
+/* ----------------------------------------------------------- Animated number */
+
+/* Tabular digits keep the width still while the number counts. */
+:where([data-kit="animated-number"]) {
+  font-variant-numeric: tabular-nums;
+}
+
+/* -------------------------------------------------------------------- Table */
+
+:where([data-kit="table-container"]) {
+  overflow: auto;
+  box-sizing: border-box;
+  max-inline-size: 100%;
+  border: var(--kit-border-width-default) solid var(--kit-color-border-default);
+  border-radius: var(--kit-radius-panel);
+  background-color: var(--kit-color-bg-surface);
+}
+
+:where([data-kit="table-container"]):focus-visible {
+  outline: var(--kit-border-width-focus) solid var(--kit-color-border-focus);
+  outline-offset: calc(var(--kit-border-width-focus) * -1);
+}
+
+:where([data-kit="table"]) {
+  inline-size: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  color: var(--kit-color-text-primary);
+  font-family: var(--kit-font-family-sans);
+  font-size: var(--kit-text-body-size);
+  line-height: var(--kit-text-body-line-height);
+  font-variant-numeric: tabular-nums;
+}
+
+:where([data-kit-slot="table-caption"]) {
+  padding: var(--kit-space-2) var(--kit-space-3);
+  color: var(--kit-color-text-secondary);
+  font-weight: var(--kit-font-weight-medium);
+  text-align: start;
+  caption-side: top;
+}
+
+:where([data-kit-slot="table-header-cell"], [data-kit-slot="table-cell"]) {
+  box-sizing: border-box;
+  block-size: var(--kit-grid-row-height);
+  padding-block: var(--kit-space-1);
+  padding-inline: var(--kit-space-3);
+  border-block-end: var(--kit-border-width-default) solid var(--kit-color-border-subtle);
+  text-align: start;
+  vertical-align: middle;
+}
+
+:where([data-kit-slot="table-header-cell"]) {
+  background-color: var(--kit-color-bg-raised);
+  border-block-end-color: var(--kit-color-border-default);
+  color: var(--kit-color-text-secondary);
+  font-size: var(--kit-text-label-size);
+  font-weight: var(--kit-font-weight-semibold);
+  white-space: nowrap;
+}
+
+:where([data-kit-slot="table-header-cell"][aria-sort="ascending"], [data-kit-slot="table-header-cell"][aria-sort="descending"]) {
+  color: var(--kit-color-text-primary);
+}
+
+:where([data-kit-slot="table-header-cell"][data-align="center"], [data-kit-slot="table-cell"][data-align="center"]) {
+  text-align: center;
+}
+
+:where(
+  [data-kit-slot="table-header-cell"][data-align="end"],
+  [data-kit-slot="table-cell"][data-align="end"],
+  [data-kit-slot="table-header-cell"][data-align="numeric"],
+  [data-kit-slot="table-cell"][data-align="numeric"]
+) {
+  text-align: end;
+}
+
+:where([data-kit-slot="table-body"] > [data-kit-slot="table-row"]:last-child > [data-kit-slot="table-cell"]) {
+  border-block-end: 0;
+}
+
+:where([data-kit-slot="table-body"] > [data-kit-slot="table-row"]):hover {
+  background-color: color-mix(in srgb, var(--kit-color-text-primary) 5%, transparent);
+}
+
+:where([data-kit="table"][data-striped] [data-kit-slot="table-body"] > [data-kit-slot="table-row"]:nth-child(even)) {
+  background-color: color-mix(in srgb, var(--kit-color-text-primary) 3%, transparent);
+}
+
+:where([data-kit-slot="table-row"][data-selected]) {
+  background-color: var(--kit-color-selection);
+}
+
+:where([data-kit-slot="table-foot"] > [data-kit-slot="table-row"] > [data-kit-slot="table-cell"]) {
+  border-block-start: var(--kit-border-width-default) solid var(--kit-color-border-default);
+  border-block-end: 0;
+  background-color: var(--kit-color-bg-raised);
+  font-weight: var(--kit-font-weight-semibold);
+}
+
+:where([data-kit="table"][data-sticky-header] [data-kit-slot="table-header-cell"]) {
+  position: sticky;
+  inset-block-start: 0;
+  z-index: var(--kit-z-sticky);
+}
+
+@media (forced-colors: active) {
+  :where([data-kit-slot="table-row"][data-selected]) {
+    outline: var(--kit-border-width-default) solid Highlight;
+    outline-offset: calc(var(--kit-border-width-default) * -1);
+  }
+}
+
+/* --------------------------------------------------------------- ScrollArea */
+
+:where([data-kit="scroll-area"]) {
+  position: relative;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+:where([data-kit-slot="scroll-viewport"]) {
+  box-sizing: border-box;
+  inline-size: 100%;
+  block-size: 100%;
+  overscroll-behavior: contain;
+}
+
+:where([data-kit-slot="scroll-viewport"]):focus-visible {
+  outline: var(--kit-border-width-focus) solid var(--kit-color-border-focus);
+  outline-offset: calc(var(--kit-border-width-focus) * -1);
+}
+
+:where([data-kit-slot="scrollbar"]) {
+  display: flex;
+  box-sizing: border-box;
+  padding: var(--kit-space-0-5);
+  opacity: 0;
+  pointer-events: none;
+  touch-action: none;
+  user-select: none;
+  transition: opacity var(--kit-duration-fast) var(--kit-easing-standard);
+}
+
+:where([data-kit-slot="scrollbar"][data-orientation="vertical"]) {
+  inset-block: 0;
+  inset-inline-end: 0;
+  inline-size: var(--kit-space-3);
+}
+
+:where([data-kit-slot="scrollbar"][data-orientation="horizontal"]) {
+  inset-inline: 0;
+  inset-block-end: 0;
+  flex-direction: column;
+  block-size: var(--kit-space-3);
+}
+
+:where([data-kit-slot="scrollbar"][data-hovering], [data-kit-slot="scrollbar"][data-scrolling]) {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+:where([data-kit-slot="scroll-thumb"]) {
+  flex: 1 1 auto;
+  border-radius: var(--kit-radius-pill);
+  background-color: color-mix(in srgb, var(--kit-color-text-primary) 40%, transparent);
+}
+
+:where([data-kit-slot="scroll-thumb"]):hover {
+  background-color: color-mix(in srgb, var(--kit-color-text-primary) 60%, transparent);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-kit-slot="scrollbar"]) {
+    transition: none;
+  }
+}
+
+@media (forced-colors: active) {
+  :where([data-kit-slot="scroll-thumb"]) {
+    background-color: CanvasText;
+  }
+}
+
+/* -------------------------------------------------------------- Collapsible */
+
+:where([data-kit="collapsible"]) {
+  box-sizing: border-box;
+}
+
+:where([data-kit-slot="collapsible-trigger"]) {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--kit-space-2);
+  box-sizing: border-box;
+  min-block-size: var(--kit-size-target-min);
+  margin: 0;
+  padding-block: var(--kit-space-1);
+  padding-inline: 0;
+  border: 0;
+  border-radius: var(--kit-radius-control);
+  background-color: transparent;
+  color: var(--kit-color-text-primary);
+  font-family: var(--kit-font-family-sans);
+  font-size: var(--kit-text-label-size);
+  font-weight: var(--kit-font-weight-medium);
+  line-height: var(--kit-text-label-line-height);
+  cursor: pointer;
+}
+
+:where([data-kit-slot="collapsible-trigger"]):focus-visible {
+  outline: var(--kit-border-width-focus) solid var(--kit-color-border-focus);
+  outline-offset: var(--kit-space-0-5);
+}
+
+:where([data-kit-slot="collapsible-chevron"]) {
+  flex: none;
+  transition: transform var(--kit-duration-fast) var(--kit-easing-standard);
+}
+
+:where([data-kit-slot="collapsible-trigger"][data-panel-open] [data-kit-slot="collapsible-chevron"]) {
+  transform: rotate(90deg);
+}
+
+/* The chevron points toward the end of the line, so it mirrors in RTL. */
+:where([data-kit-slot="collapsible-chevron"]:dir(rtl)) {
+  transform: scaleX(-1);
+}
+
+:where([data-kit-slot="collapsible-trigger"][data-panel-open] [data-kit-slot="collapsible-chevron"]:dir(rtl)) {
+  transform: scaleX(-1) rotate(90deg);
+}
+
+:where([data-kit-slot="collapsible-panel"]) {
+  overflow: hidden;
+  block-size: var(--collapsible-panel-height);
+  transition: block-size var(--kit-duration-base) var(--kit-easing-standard);
+}
+
+:where([data-kit-slot="collapsible-panel"][data-starting-style], [data-kit-slot="collapsible-panel"][data-ending-style]) {
+  block-size: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-kit-slot="collapsible-chevron"], [data-kit-slot="collapsible-panel"]) {
+    transition: none;
+  }
+}
+
+/* =========================================================================
+ * Navigation: Tabs, Breadcrumb, Pagination, Accordion, SegmentedControl,
+ * Stepper, Toolbar
+ * ========================================================================= */
+
+/* --------------------------------------------------------------------- Tabs */
+
+:where([data-kit="tabs"]) {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  font-family: var(--kit-font-family-sans);
+  color: var(--kit-color-text-primary);
+}
+
+:where([data-kit-slot="tab-list"]) {
+  position: relative;
+  z-index: 0;
+  display: flex;
+  gap: var(--kit-space-1);
+  box-sizing: border-box;
+}
+
+:where([data-kit="tabs"][data-variant="line"] [data-kit-slot="tab-list"]) {
+  border-block-end: var(--kit-border-width-default) solid var(--kit-color-border-default);
+}
+
+:where([data-kit="tabs"][data-variant="pill"] [data-kit-slot="tab-list"]) {
+  align-self: flex-start;
+  padding: var(--kit-space-1);
+  border-radius: var(--kit-radius-control);
+  background-color: var(--kit-color-bg-raised);
+}
+
+:where([data-kit-slot="tab"]) {
+  position: relative;
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--kit-space-2);
+  box-sizing: border-box;
+  min-block-size: var(--kit-size-control-md);
+  margin: 0;
+  padding-inline: var(--kit-space-3);
+  border: 0;
+  border-radius: var(--kit-radius-control);
+  background-color: transparent;
+  color: var(--kit-color-text-secondary);
+  font-family: inherit;
+  font-size: var(--kit-text-label-size);
+  font-weight: var(--kit-font-weight-medium);
+  line-height: var(--kit-text-label-line-height);
+  white-space: nowrap;
+  cursor: pointer;
+  transition: color var(--kit-duration-instant) var(--kit-easing-standard);
+}
+
+:where([data-kit-slot="tab"]):hover {
+  color: var(--kit-color-text-primary);
+}
+
+:where([data-kit-slot="tab"][data-active]) {
+  color: var(--kit-color-text-primary);
+}
+
+:where([data-kit-slot="tab"][data-disabled]) {
+  color: var(--kit-color-text-disabled);
+  cursor: not-allowed;
+}
+
+:where([data-kit-slot="tab"]):focus-visible {
+  outline: var(--kit-border-width-focus) solid var(--kit-color-border-focus);
+  outline-offset: calc(var(--kit-border-width-focus) * -1);
+}
+
+/* The indicator slides between tabs using the measurements Base UI publishes. */
+:where([data-kit-slot="tab-indicator"]) {
+  position: absolute;
+  z-index: 0;
+  pointer-events: none;
+  transition:
+    inset-inline-start var(--kit-duration-base) var(--kit-easing-standard),
+    inline-size var(--kit-duration-base) var(--kit-easing-standard);
+  inset-inline-start: var(--active-tab-left);
+  inline-size: var(--active-tab-width);
+}
+
+:where([data-kit-slot="tab-indicator"]:dir(rtl)) {
+  inset-inline-start: var(--active-tab-right);
+}
+
+:where([data-kit="tabs"][data-variant="line"] [data-kit-slot="tab-indicator"]) {
+  inset-block-end: calc(var(--kit-border-width-default) * -1);
+  block-size: var(--kit-border-width-2);
+  background-color: var(--kit-color-accent-default);
+}
+
+:where([data-kit="tabs"][data-variant="pill"] [data-kit-slot="tab-indicator"]) {
+  inset-block-start: var(--active-tab-top);
+  block-size: var(--active-tab-height);
+  border-radius: var(--kit-radius-control);
+  background-color: var(--kit-color-bg-surface);
+  box-shadow: var(--kit-shadow-raised);
+}
+
+:where([data-kit-slot="tab-panel"]) {
+  box-sizing: border-box;
+  padding-block-start: var(--kit-space-4);
+}
+
+:where([data-kit-slot="tab-panel"]):focus-visible {
+  outline: var(--kit-border-width-focus) solid var(--kit-color-border-focus);
+  outline-offset: var(--kit-space-0-5);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-kit-slot="tab-indicator"], [data-kit-slot="tab"]) {
+    transition: none;
+  }
+}
+
+@media (forced-colors: active) {
+  :where([data-kit-slot="tab-indicator"]) {
+    background-color: Highlight;
+  }
+
+  :where([data-kit-slot="tab"][data-active]) {
+    text-decoration: underline;
+  }
+}
+
+/* --------------------------------------------------------------- Breadcrumb */
+
+:where([data-kit="breadcrumb"]) {
+  font-family: var(--kit-font-family-sans);
+  font-size: var(--kit-text-label-size);
+  line-height: var(--kit-text-label-line-height);
+}
+
+:where([data-kit-slot="breadcrumb-list"]) {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--kit-space-1);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+:where([data-kit-slot="breadcrumb-item"]) {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--kit-space-1);
+  color: var(--kit-color-text-secondary);
+}
+
+:where([data-kit-slot="breadcrumb-item"] a) {
+  color: var(--kit-color-text-secondary);
+  border-radius: var(--kit-radius-control);
+  text-decoration: none;
+}
+
+:where([data-kit-slot="breadcrumb-item"] a):hover {
+  color: var(--kit-color-text-primary);
+  text-decoration: underline;
+}
+
+:where([data-kit-slot="breadcrumb-item"] a):focus-visible {
+  outline: var(--kit-border-width-focus) solid var(--kit-color-border-focus);
+  outline-offset: var(--kit-space-0-5);
+}
+
+:where([data-kit-slot="breadcrumb-page"]) {
+  color: var(--kit-color-text-primary);
+  font-weight: var(--kit-font-weight-medium);
+}
+
+:where([data-kit-slot="breadcrumb-separator"]) {
+  display: inline-flex;
+  align-items: center;
+  color: var(--kit-color-text-tertiary);
+}
+
+:where([data-kit-slot="breadcrumb-separator"]:dir(rtl)) {
+  transform: scaleX(-1);
+}
+
+/* --------------------------------------------------------------- Pagination */
+
+:where([data-kit="pagination"]) {
+  font-family: var(--kit-font-family-sans);
+  font-size: var(--kit-text-label-size);
+}
+
+:where([data-kit-slot="pagination-list"]) {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--kit-space-1);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+:where([data-kit-slot="pagination-page"], [data-kit-slot="pagination-step"]) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  min-inline-size: var(--kit-size-control-md);
+  min-block-size: var(--kit-size-control-md);
+  margin: 0;
+  padding-inline: var(--kit-space-2);
+  border: var(--kit-border-width-default) solid transparent;
+  border-radius: var(--kit-radius-control);
+  background-color: transparent;
+  color: var(--kit-color-text-primary);
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: var(--kit-font-weight-medium);
+  font-variant-numeric: tabular-nums;
+  cursor: pointer;
+  transition: background-color var(--kit-duration-instant) var(--kit-easing-standard);
+}
+
+:where([data-kit-slot="pagination-page"], [data-kit-slot="pagination-step"]):hover {
+  background-color: color-mix(in srgb, var(--kit-color-text-primary) 8%, transparent);
+}
+
+:where([data-kit-slot="pagination-page"][data-current]) {
+  border-color: var(--kit-color-accent-default);
+  background-color: var(--kit-color-accent-subtle);
+}
+
+:where([data-kit-slot="pagination-page"], [data-kit-slot="pagination-step"]):focus-visible {
+  outline: var(--kit-border-width-focus) solid var(--kit-color-border-focus);
+  outline-offset: var(--kit-space-0-5);
+}
+
+:where([data-kit-slot="pagination-step"]:disabled) {
+  color: var(--kit-color-text-disabled);
+  background-color: transparent;
+  cursor: not-allowed;
+}
+
+:where([data-kit-slot="pagination-step"]:dir(rtl)) {
+  transform: scaleX(-1);
+}
+
+:where([data-kit-slot="pagination-ellipsis"]) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-inline-size: var(--kit-size-control-md);
+  color: var(--kit-color-text-secondary);
+  user-select: none;
+}
+
+@media (forced-colors: active) {
+  :where([data-kit-slot="pagination-page"][data-current]) {
+    border-color: Highlight;
+    text-decoration: underline;
+  }
+}
+
+/* ---------------------------------------------------------------- Accordion */
+
+:where([data-kit="accordion"]) {
+  box-sizing: border-box;
+  border-block-start: var(--kit-border-width-default) solid var(--kit-color-border-default);
+  font-family: var(--kit-font-family-sans);
+  color: var(--kit-color-text-primary);
+}
+
+:where([data-kit-slot="accordion-item"]) {
+  border-block-end: var(--kit-border-width-default) solid var(--kit-color-border-default);
+}
+
+:where([data-kit-slot="accordion-header"]) {
+  margin: 0;
+  font: inherit;
+}
+
+:where([data-kit-slot="accordion-trigger"]) {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--kit-space-3);
+  box-sizing: border-box;
+  inline-size: 100%;
+  min-block-size: var(--kit-size-control-lg);
+  margin: 0;
+  padding-block: var(--kit-space-2);
+  padding-inline: var(--kit-space-1);
+  border: 0;
+  background-color: transparent;
+  color: inherit;
+  font-family: inherit;
+  font-size: var(--kit-text-body-size);
+  font-weight: var(--kit-font-weight-medium);
+  line-height: var(--kit-text-body-line-height);
+  text-align: start;
+  cursor: pointer;
+}
+
+:where([data-kit-slot="accordion-trigger"]):hover {
+  background-color: color-mix(in srgb, var(--kit-color-text-primary) 4%, transparent);
+}
+
+:where([data-kit-slot="accordion-trigger"]):focus-visible {
+  outline: var(--kit-border-width-focus) solid var(--kit-color-border-focus);
+  outline-offset: calc(var(--kit-border-width-focus) * -1);
+}
+
+:where([data-kit-slot="accordion-trigger"][data-disabled]) {
+  color: var(--kit-color-text-disabled);
+  cursor: not-allowed;
+}
+
+:where([data-kit-slot="accordion-chevron"]) {
+  flex: none;
+  color: var(--kit-color-text-secondary);
+  transition: transform var(--kit-duration-fast) var(--kit-easing-standard);
+}
+
+:where([data-kit-slot="accordion-trigger"][data-panel-open] [data-kit-slot="accordion-chevron"]) {
+  transform: rotate(180deg);
+}
+
+:where([data-kit-slot="accordion-panel"]) {
+  overflow: hidden;
+  block-size: var(--accordion-panel-height);
+  transition: block-size var(--kit-duration-base) var(--kit-easing-standard);
+}
+
+:where([data-kit-slot="accordion-panel"][data-starting-style], [data-kit-slot="accordion-panel"][data-ending-style]) {
+  block-size: 0;
+}
+
+:where([data-kit-slot="accordion-content"]) {
+  padding-block: var(--kit-space-1) var(--kit-space-4);
+  padding-inline: var(--kit-space-1);
+  color: var(--kit-color-text-secondary);
+  font-size: var(--kit-text-body-size);
+  line-height: var(--kit-text-body-line-height);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-kit-slot="accordion-chevron"], [data-kit-slot="accordion-panel"]) {
+    transition: none;
+  }
+}
+
+/* --------------------------------------------------------- SegmentedControl */
+
+:where([data-kit="segmented-control"]) {
+  --_height: var(--kit-size-control-md);
+  --_pad: var(--kit-space-control-inline-md);
+
+  display: inline-flex;
+  box-sizing: border-box;
+  padding: var(--kit-space-0-5);
+  gap: var(--kit-space-0-5);
+  border-radius: var(--kit-radius-control);
+  background-color: var(--kit-color-bg-raised);
+  border: var(--kit-border-width-default) solid var(--kit-color-border-default);
+  font-family: var(--kit-font-family-sans);
+}
+
+:where([data-kit="segmented-control"][data-size="xs"]) {
+  --_height: var(--kit-size-control-xs);
+  --_pad: var(--kit-space-control-inline-xs);
+}
+
+:where([data-kit="segmented-control"][data-size="sm"]) {
+  --_height: var(--kit-size-control-sm);
+  --_pad: var(--kit-space-control-inline-sm);
+}
+
+:where([data-kit="segmented-control"][data-size="lg"]) {
+  --_height: var(--kit-size-control-lg);
+  --_pad: var(--kit-space-control-inline-lg);
+}
+
+:where([data-kit="segmented-control"][data-size="xl"]) {
+  --_height: var(--kit-size-control-xl);
+  --_pad: var(--kit-space-control-inline-xl);
+}
+
+:where([data-kit="segmented-control"][data-full-width]) {
+  display: flex;
+}
+
+:where([data-kit-slot="segment"]) {
+  display: inline-flex;
+  flex: 1 1 auto;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  min-block-size: calc(var(--_height) - var(--kit-space-1));
+  padding-inline: var(--_pad);
+  border: 0;
+  border-radius: calc(var(--kit-radius-control) - var(--kit-space-0-5));
+  background-color: transparent;
+  color: var(--kit-color-text-secondary);
+  font-size: var(--kit-text-label-size);
+  font-weight: var(--kit-font-weight-medium);
+  line-height: var(--kit-text-label-line-height);
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background-color var(--kit-duration-instant) var(--kit-easing-standard);
+}
+
+:where([data-kit-slot="segment"]):hover {
+  color: var(--kit-color-text-primary);
+}
+
+:where([data-kit-slot="segment"][data-checked]) {
+  background-color: var(--kit-color-bg-surface);
+  box-shadow: var(--kit-shadow-raised);
+  color: var(--kit-color-text-primary);
+}
+
+:where([data-kit-slot="segment"]):focus-visible {
+  outline: var(--kit-border-width-focus) solid var(--kit-color-border-focus);
+  outline-offset: var(--kit-space-0-5);
+}
+
+:where([data-kit-slot="segment"][data-disabled]) {
+  color: var(--kit-color-text-disabled);
+  cursor: not-allowed;
+}
+
+@media (forced-colors: active) {
+  :where([data-kit-slot="segment"][data-checked]) {
+    outline: var(--kit-border-width-2) solid Highlight;
+    outline-offset: calc(var(--kit-border-width-2) * -1);
+  }
+}
+
+/* ------------------------------------------------------------------ Stepper */
+
+:where([data-kit="stepper"]) {
+  --_marker: var(--kit-size-28);
+
+  display: flex;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  font-family: var(--kit-font-family-sans);
+  color: var(--kit-color-text-primary);
+}
+
+:where([data-kit="stepper"][data-orientation="horizontal"]) {
+  align-items: flex-start;
+  gap: var(--kit-space-3);
+}
+
+:where([data-kit="stepper"][data-orientation="vertical"]) {
+  flex-direction: column;
+}
+
+:where([data-kit-slot="step"]) {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: var(--kit-space-3);
+  min-inline-size: 0;
+}
+
+:where([data-kit="stepper"][data-orientation="horizontal"] > [data-kit-slot="step"]) {
+  flex: 1 1 0;
+}
+
+:where([data-kit="stepper"][data-orientation="horizontal"] > [data-kit-slot="step"]:last-child) {
+  flex: 0 0 auto;
+}
+
+:where([data-kit="stepper"][data-orientation="vertical"] > [data-kit-slot="step"]) {
+  padding-block-end: var(--kit-space-6);
+}
+
+:where([data-kit="stepper"][data-orientation="vertical"] > [data-kit-slot="step"]:last-child) {
+  padding-block-end: 0;
+}
+
+:where([data-kit-slot="step-marker"]) {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  inline-size: var(--_marker);
+  block-size: var(--_marker);
+  border: var(--kit-border-width-2) solid var(--kit-color-border-strong);
+  border-radius: var(--kit-radius-full);
+  background-color: var(--kit-color-bg-surface);
+  color: var(--kit-color-text-secondary);
+  font-size: var(--kit-text-label-size);
+  font-weight: var(--kit-font-weight-semibold);
+  font-variant-numeric: tabular-nums;
+}
+
+:where([data-kit-slot="step"][data-status="current"] [data-kit-slot="step-marker"]) {
+  border-color: var(--kit-color-accent-default);
+  background-color: var(--kit-color-accent-subtle);
+  color: var(--kit-color-text-primary);
+}
+
+:where([data-kit-slot="step"][data-status="complete"] [data-kit-slot="step-marker"]) {
+  border-color: var(--kit-color-accent-default);
+  background-color: var(--kit-color-accent-default);
+  color: var(--kit-color-accent-on-accent);
+}
+
+:where([data-kit-slot="step-text"]) {
+  display: grid;
+  gap: var(--kit-space-0-5);
+  min-inline-size: 0;
+  padding-block-start: calc((var(--_marker) - var(--kit-text-label-line-height)) / 2);
+}
+
+:where([data-kit-slot="step-label"]) {
+  font-size: var(--kit-text-label-size);
+  font-weight: var(--kit-font-weight-medium);
+  line-height: var(--kit-text-label-line-height);
+}
+
+:where([data-kit-slot="step"][data-status="current"] [data-kit-slot="step-label"]) {
+  font-weight: var(--kit-font-weight-semibold);
+}
+
+:where([data-kit-slot="step"][data-status="upcoming"] [data-kit-slot="step-label"]) {
+  color: var(--kit-color-text-secondary);
+}
+
+:where([data-kit-slot="step-description"]) {
+  color: var(--kit-color-text-secondary);
+  font-size: var(--kit-text-caption-size);
+  line-height: var(--kit-text-caption-line-height);
+}
+
+/* The connector between two steps; it takes the accent once the step is done. */
+:where([data-kit="stepper"][data-orientation="horizontal"] > [data-kit-slot="step"]:not(:last-child))::after {
+  content: "";
+  flex: 1 1 auto;
+  align-self: flex-start;
+  min-inline-size: var(--kit-space-6);
+  margin-block-start: calc(var(--_marker) / 2 - var(--kit-border-width-default));
+  block-size: var(--kit-border-width-2);
+  background-color: var(--kit-color-border-default);
+}
+
+:where([data-kit="stepper"][data-orientation="vertical"] > [data-kit-slot="step"]:not(:last-child))::after {
+  content: "";
+  position: absolute;
+  inset-block: calc(var(--_marker) + var(--kit-space-1)) var(--kit-space-1);
+  inset-inline-start: calc(var(--_marker) / 2 - var(--kit-border-width-default));
+  inline-size: var(--kit-border-width-2);
+  background-color: var(--kit-color-border-default);
+}
+
+:where([data-kit-slot="step"][data-status="complete"]:not(:last-child))::after {
+  background-color: var(--kit-color-accent-default);
+}
+
+@media (forced-colors: active) {
+  :where([data-kit-slot="step"][data-status="complete"] [data-kit-slot="step-marker"]) {
+    border-color: Highlight;
+    background-color: Highlight;
+    color: HighlightText;
+  }
+
+  :where([data-kit-slot="step"][data-status="current"] [data-kit-slot="step-marker"]) {
+    border-color: Highlight;
+  }
+}
+
+/* ------------------------------------------------------------------ Toolbar */
+
+:where([data-kit="toolbar"]) {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--kit-space-1);
+  box-sizing: border-box;
+  padding: var(--kit-space-1);
+  border: var(--kit-border-width-default) solid var(--kit-color-border-default);
+  border-radius: var(--kit-radius-panel);
+  background-color: var(--kit-color-bg-surface);
+}
+
+:where([data-kit="toolbar"][data-orientation="vertical"]) {
+  flex-direction: column;
+  align-items: stretch;
+}
+
+:where([data-kit-slot="toolbar-group"]) {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--kit-space-1);
+}
+
+:where([data-kit-slot="toolbar-separator"]) {
+  align-self: stretch;
+  inline-size: var(--kit-border-width-default);
+  margin-block: var(--kit-space-1);
+  background-color: var(--kit-color-border-default);
+}
+
+:where([data-kit="toolbar"][data-orientation="vertical"] > [data-kit-slot="toolbar-separator"]) {
+  inline-size: auto;
+  block-size: var(--kit-border-width-default);
+  margin-block: 0;
+  margin-inline: var(--kit-space-1);
+}
+
+/* =========================================================================
+ * Overlays: Dialog, AlertDialog, Drawer, Popover, Tooltip, Menu, ContextMenu,
+ * Toast, and the popups of Select and Combobox.
+ *
+ * Floating panels share one surface so a Menu, a Popover, a Select list and a
+ * Combobox list look like one family. Positioners sit at the modal layer: a
+ * popup opened from inside a dialog is mounted after it, so at the same layer
+ * it stacks above the dialog instead of hiding behind its backdrop.
+ * ========================================================================= */
+
+/* ---------------------------------------------------------- Shared surface */
+
+:where(
+  [data-kit="popover"],
+  [data-kit="menu"],
+  [data-kit="select-popup"],
+  [data-kit="combobox-popup"]
+) {
+  box-sizing: border-box;
+  border: var(--kit-border-width-default) solid var(--kit-color-border-default);
+  border-radius: var(--kit-radius-overlay);
+  background-color: var(--kit-color-bg-overlay);
+  color: var(--kit-color-text-primary);
+  box-shadow: var(--kit-shadow-overlay);
+  font-family: var(--kit-font-family-sans);
+  font-size: var(--kit-text-body-size);
+  line-height: var(--kit-text-body-line-height);
+  transform-origin: var(--transform-origin);
+  transition:
+    opacity var(--kit-duration-fast) var(--kit-easing-enter),
+    transform var(--kit-duration-fast) var(--kit-easing-enter);
+}
+
+:where(
+  [data-kit="popover"],
+  [data-kit="menu"],
+  [data-kit="select-popup"],
+  [data-kit="combobox-popup"],
+  [data-kit="tooltip"]
+)[data-starting-style],
+:where(
+  [data-kit="popover"],
+  [data-kit="menu"],
+  [data-kit="select-popup"],
+  [data-kit="combobox-popup"],
+  [data-kit="tooltip"]
+)[data-ending-style] {
+  opacity: 0;
+  transform: scale(0.97);
+}
+
+:where(
+  [data-kit="popover-positioner"],
+  [data-kit="menu-positioner"],
+  [data-kit="select-positioner"],
+  [data-kit="combobox-positioner"]
+) {
+  z-index: var(--kit-z-modal);
+}
+
+:where([data-kit="tooltip-positioner"]) {
+  z-index: var(--kit-z-tooltip);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where(
+    [data-kit="popover"],
+    [data-kit="menu"],
+    [data-kit="select-popup"],
+    [data-kit="combobox-popup"],
+    [data-kit="tooltip"],
+    [data-kit="dialog"],
+    [data-kit="dialog-backdrop"],
+    [data-kit="drawer"],
+    [data-kit="drawer-backdrop"],
+    [data-kit="toast"]
+  ) {
+    transition: none;
+  }
+}
+
+@media (forced-colors: active) {
+  :where(
+    [data-kit="popover"],
+    [data-kit="menu"],
+    [data-kit="select-popup"],
+    [data-kit="combobox-popup"],
+    [data-kit="tooltip"],
+    [data-kit="dialog"],
+    [data-kit="drawer"],
+    [data-kit="toast"]
+  ) {
+    border-color: CanvasText;
+  }
+}
+
+/* ----------------------------------------------------------------- Popover */
+
+:where([data-kit="popover"]) {
+  position: relative;
+  max-inline-size: calc(var(--kit-size-40) * 9);
+  padding: var(--kit-space-4);
+}
+
+:where([data-kit-slot="popover-title"]) {
+  margin: 0 0 var(--kit-space-1);
+  font-size: var(--kit-text-label-size);
+  line-height: var(--kit-text-label-line-height);
+  font-weight: var(--kit-font-weight-semibold);
+}
+
+:where([data-kit-slot="popover-description"]) {
+  margin: 0 0 var(--kit-space-3);
+  color: var(--kit-color-text-secondary);
+}
+
+/*
+ * The arrow is a rotated square that shares the popup's surface. Its position
+ * along the popup is set by the positioner; the side it sits on is set here.
+ * Left and right are physical because the positioner reports them physically.
+ */
+:where([data-kit-slot="popup-arrow"]) {
+  position: absolute;
+  box-sizing: border-box;
+  inline-size: var(--kit-space-3);
+  block-size: var(--kit-space-3);
+  background-color: var(--kit-color-bg-overlay);
+  border: 0 solid var(--kit-color-border-default);
+  pointer-events: none;
+}
+
+:where([data-kit-slot="popup-arrow"][data-side="top"]) {
+  inset-block-end: calc(var(--kit-space-3) / -2);
+  border-block-end-width: var(--kit-border-width-default);
+  border-inline-end-width: var(--kit-border-width-default);
+  transform: rotate(45deg);
+}
+
+:where([data-kit-slot="popup-arrow"][data-side="bottom"]) {
+  inset-block-start: calc(var(--kit-space-3) / -2);
+  border-block-start-width: var(--kit-border-width-default);
+  border-inline-start-width: var(--kit-border-width-default);
+  transform: rotate(45deg);
+}
+
+:where([data-kit-slot="popup-arrow"][data-side="left"], [data-kit-slot="popup-arrow"][data-side="inline-start"]) {
+  right: calc(var(--kit-space-3) / -2);
+  border-block-start-width: var(--kit-border-width-default);
+  border-inline-end-width: var(--kit-border-width-default);
+  transform: rotate(45deg);
+}
+
+:where([data-kit-slot="popup-arrow"][data-side="right"], [data-kit-slot="popup-arrow"][data-side="inline-end"]) {
+  left: calc(var(--kit-space-3) / -2);
+  border-block-end-width: var(--kit-border-width-default);
+  border-inline-start-width: var(--kit-border-width-default);
+  transform: rotate(45deg);
+}
+
+/* ----------------------------------------------------------------- Tooltip */
+
+:where([data-kit="tooltip"]) {
+  box-sizing: border-box;
+  max-inline-size: calc(var(--kit-size-40) * 8);
+  padding: var(--kit-space-1) var(--kit-space-2);
+  border-radius: var(--kit-radius-control);
+  background-color: var(--kit-color-bg-inverse);
+  color: var(--kit-color-text-inverse);
+  font-family: var(--kit-font-family-sans);
+  font-size: var(--kit-text-caption-size);
+  line-height: var(--kit-text-caption-line-height);
+  overflow-wrap: anywhere;
+  transform-origin: var(--transform-origin);
+  transition:
+    opacity var(--kit-duration-instant) var(--kit-easing-enter),
+    transform var(--kit-duration-instant) var(--kit-easing-enter);
+}
+
+/* -------------------------------------------------------------------- Menu */
+
+:where([data-kit="menu"]) {
+  display: flex;
+  flex-direction: column;
+  min-inline-size: calc(var(--kit-size-40) * 5);
+  max-block-size: var(--available-height);
+  padding: var(--kit-space-1);
+  overflow-y: auto;
+}
+
+:where([data-kit="menu-item"]) {
+  display: flex;
+  align-items: center;
+  gap: var(--kit-space-2);
+  box-sizing: border-box;
+  min-block-size: var(--kit-size-control-md);
+  padding-block: var(--kit-space-1);
+  padding-inline: var(--kit-space-2);
+  border-radius: var(--kit-radius-control);
+  color: var(--kit-color-text-primary);
+  font-size: var(--kit-text-label-size);
+  line-height: var(--kit-text-label-line-height);
+  cursor: default;
+  user-select: none;
+}
+
+:where([data-kit="menu-item"][data-highlighted]),
+:where([data-kit="menu-item"][data-submenu][data-popup-open]) {
+  background-color: color-mix(in srgb, var(--kit-color-text-primary) 8%, transparent);
+}
+
+:where([data-kit="menu-item"][data-tone="danger"]) {
+  color: var(--kit-color-status-danger-foreground);
+}
+
+:where([data-kit="menu-item"][data-disabled]) {
+  color: var(--kit-color-text-disabled);
+  cursor: not-allowed;
+}
+
+:where([data-kit-slot="menu-item-icon"]) {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--kit-size-icon-md);
+  block-size: var(--kit-size-icon-md);
+  color: var(--kit-color-text-secondary);
+}
+
+:where([data-kit="menu-item"][data-tone="danger"] [data-kit-slot="menu-item-icon"]) {
+  color: inherit;
+}
+
+:where([data-kit-slot="menu-item-text"]) {
+  flex: 1 1 auto;
+  min-inline-size: 0;
+}
+
+:where([data-kit-slot="menu-item-shortcut"]) {
+  flex: none;
+  margin-inline-start: var(--kit-space-4);
+  color: var(--kit-color-text-secondary);
+  font-size: var(--kit-text-caption-size);
+}
+
+:where([data-kit-slot="menu-item-chevron"]) {
+  display: inline-flex;
+  flex: none;
+  margin-inline-start: var(--kit-space-4);
+  color: var(--kit-color-text-secondary);
+}
+
+:where([data-kit-slot="menu-item-chevron"]:dir(rtl)) {
+  transform: scaleX(-1);
+}
+
+:where([data-kit-slot="menu-radio-dot"]) {
+  inline-size: var(--kit-space-2);
+  block-size: var(--kit-space-2);
+  border-radius: var(--kit-radius-full);
+  background-color: currentcolor;
+}
+
+:where([data-kit-slot="menu-group"]) {
+  display: flex;
+  flex-direction: column;
+}
+
+:where([data-kit-slot="menu-label"]) {
+  padding: var(--kit-space-1) var(--kit-space-2);
+  color: var(--kit-color-text-secondary);
+  font-size: var(--kit-text-caption-size);
+  line-height: var(--kit-text-caption-line-height);
+  font-weight: var(--kit-font-weight-semibold);
+}
+
+:where([data-kit-slot="menu-separator"]) {
+  block-size: var(--kit-border-width-default);
+  margin-block: var(--kit-space-1);
+  margin-inline: calc(var(--kit-space-1) * -1);
+  background-color: var(--kit-color-border-subtle);
+}
+
+@media (forced-colors: active) {
+  :where([data-kit="menu-item"][data-highlighted], [data-kit="select-item"][data-highlighted], [data-kit="combobox-item"][data-highlighted]) {
+    background-color: Highlight;
+    color: HighlightText;
+  }
+}
+
+/* ------------------------------------------------- Select and Combobox lists */
+
+:where([data-kit="select-popup"], [data-kit="combobox-popup"]) {
+  display: flex;
+  flex-direction: column;
+  min-inline-size: var(--anchor-width);
+  max-block-size: var(--available-height);
+  padding: var(--kit-space-1);
+  overflow: hidden;
+}
+
+:where([data-kit-slot="select-list"], [data-kit-slot="combobox-list"]) {
+  box-sizing: border-box;
+  max-block-size: inherit;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+:where([data-kit-slot="select-group"]) {
+  display: block;
+}
+
+:where([data-kit-slot="select-group-label"]) {
+  padding: var(--kit-space-1) var(--kit-space-2);
+  color: var(--kit-color-text-secondary);
+  font-size: var(--kit-text-caption-size);
+  line-height: var(--kit-text-caption-line-height);
+  font-weight: var(--kit-font-weight-semibold);
+}
+
+:where([data-kit="select-item"], [data-kit="combobox-item"]) {
+  display: grid;
+  grid-template-columns: var(--kit-size-icon-md) minmax(0, 1fr);
+  align-items: center;
+  gap: var(--kit-space-2);
+  box-sizing: border-box;
+  min-block-size: var(--kit-size-control-md);
+  padding-block: var(--kit-space-1);
+  padding-inline: var(--kit-space-2);
+  border-radius: var(--kit-radius-control);
+  color: var(--kit-color-text-primary);
+  font-size: var(--kit-text-body-size);
+  line-height: var(--kit-text-body-line-height);
+  cursor: default;
+  user-select: none;
+}
+
+:where([data-kit="select-item"][data-highlighted], [data-kit="combobox-item"][data-highlighted]) {
+  background-color: color-mix(in srgb, var(--kit-color-text-primary) 8%, transparent);
+}
+
+:where([data-kit="select-item"][data-disabled], [data-kit="combobox-item"][data-disabled]) {
+  color: var(--kit-color-text-disabled);
+  cursor: not-allowed;
+}
+
+:where([data-kit-slot="select-item-indicator"], [data-kit-slot="combobox-item-indicator"]) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  grid-column: 1;
+  color: var(--kit-color-accent-default);
+}
+
+:where([data-kit-slot="select-item-text"], [data-kit-slot="combobox-item-text"]) {
+  grid-column: 2;
+  min-inline-size: 0;
+}
+
+:where([data-kit-slot="combobox-empty"]) {
+  padding: var(--kit-space-3) var(--kit-space-2);
+  color: var(--kit-color-text-secondary);
+  text-align: center;
+}
+
+:where([data-kit-slot="combobox-empty"]:empty) {
+  display: none;
+}
+
+/* ------------------------------------------------- Dialog and AlertDialog */
+
+:where([data-kit="dialog-backdrop"], [data-kit="drawer-backdrop"]) {
+  position: fixed;
+  inset: 0;
+  z-index: var(--kit-z-modal);
+  background-color: var(--kit-color-scrim);
+  opacity: 1;
+  transition: opacity var(--kit-duration-base) var(--kit-easing-standard);
+}
+
+:where([data-kit="dialog-backdrop"], [data-kit="drawer-backdrop"])[data-starting-style],
+:where([data-kit="dialog-backdrop"], [data-kit="drawer-backdrop"])[data-ending-style] {
+  opacity: 0;
+}
+
+:where([data-kit="dialog-viewport"]) {
+  position: fixed;
+  inset: 0;
+  z-index: var(--kit-z-modal);
+  display: grid;
+  place-items: center;
+  box-sizing: border-box;
+  padding: var(--kit-space-4);
+  overflow-y: auto;
+}
+
+:where([data-kit="dialog-viewport"]:has([data-size="full"])) {
+  padding: 0;
+}
+
+:where([data-kit="dialog"]) {
+  --_width: calc(var(--kit-size-40) * 13);
+
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  inline-size: min(var(--_width), 100%);
+  max-block-size: 100%;
+  border: var(--kit-border-width-default) solid var(--kit-color-border-default);
+  border-radius: var(--kit-radius-overlay);
+  background-color: var(--kit-color-bg-overlay);
+  color: var(--kit-color-text-primary);
+  box-shadow: var(--kit-shadow-modal);
+  font-family: var(--kit-font-family-sans);
+  font-size: var(--kit-text-body-size);
+  line-height: var(--kit-text-body-line-height);
+  opacity: 1;
+  transform: none;
+  transition:
+    opacity var(--kit-duration-base) var(--kit-easing-enter),
+    transform var(--kit-duration-base) var(--kit-easing-enter);
+}
+
+:where([data-kit="dialog"][data-size="sm"]) {
+  --_width: calc(var(--kit-size-40) * 10);
+}
+
+:where([data-kit="dialog"][data-size="lg"]) {
+  --_width: calc(var(--kit-size-40) * 18);
+}
+
+:where([data-kit="dialog"][data-size="xl"]) {
+  --_width: calc(var(--kit-size-40) * 24);
+}
+
+:where([data-kit="dialog"][data-size="full"]) {
+  --_width: 100%;
+
+  block-size: 100%;
+  border-radius: 0;
+}
+
+:where([data-kit="dialog"][data-starting-style], [data-kit="dialog"][data-ending-style]) {
+  opacity: 0;
+  transform: translateY(var(--kit-space-2)) scale(0.98);
+}
+
+:where([data-kit="dialog"][data-kind="alert"]) {
+  gap: var(--kit-space-2);
+  padding: var(--kit-space-6);
+}
+
+:where([data-kit-slot="dialog-title"], [data-kit-slot="drawer-title"]) {
+  margin: 0;
+  font-size: var(--kit-text-h4-size);
+  line-height: var(--kit-text-h4-line-height);
+  font-weight: var(--kit-text-h4-weight);
+}
+
+:where([data-kit-slot="dialog-description"], [data-kit-slot="drawer-description"]) {
+  margin: 0;
+  color: var(--kit-color-text-secondary);
+}
+
+:where([data-kit-slot="dialog-header"], [data-kit-slot="drawer-header"]) {
+  display: grid;
+  gap: var(--kit-space-1);
+  padding: var(--kit-space-5) var(--kit-space-6) var(--kit-space-2);
+  padding-inline-end: var(--kit-space-12);
+}
+
+:where([data-kit-slot="dialog-body"], [data-kit-slot="drawer-body"]) {
+  flex: 1 1 auto;
+  min-block-size: 0;
+  padding: var(--kit-space-2) var(--kit-space-6);
+  overflow-y: auto;
+}
+
+:where([data-kit-slot="dialog-footer"], [data-kit-slot="drawer-footer"]) {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--kit-space-2);
+  padding: var(--kit-space-4) var(--kit-space-6) var(--kit-space-5);
+}
+
+:where([data-kit="dialog"][data-kind="alert"] > [data-kit-slot="dialog-footer"]) {
+  padding: 0;
+  margin-block-start: var(--kit-space-4);
+}
+
+:where([data-kit-slot="dialog-close"], [data-kit-slot="drawer-close"]) {
+  position: absolute;
+  inset-block-start: var(--kit-space-3);
+  inset-inline-end: var(--kit-space-3);
+}
+
+/* ------------------------------------------------------------------ Drawer */
+
+:where([data-kit="drawer-viewport"]) {
+  position: fixed;
+  inset: 0;
+  z-index: var(--kit-z-modal);
+  pointer-events: none;
+}
+
+:where([data-kit="drawer"]) {
+  --_size: calc(var(--kit-size-40) * 10);
+
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  border: 0 solid var(--kit-color-border-default);
+  background-color: var(--kit-color-bg-overlay);
+  color: var(--kit-color-text-primary);
+  box-shadow: var(--kit-shadow-modal);
+  font-family: var(--kit-font-family-sans);
+  font-size: var(--kit-text-body-size);
+  line-height: var(--kit-text-body-line-height);
+  pointer-events: auto;
+  transform: translate(var(--drawer-swipe-movement-x, 0), var(--drawer-swipe-movement-y, 0));
+  transition: transform var(--kit-duration-slow) var(--kit-easing-enter);
+}
+
+:where([data-kit="drawer"][data-swiping]) {
+  user-select: none;
+  transition: none;
+}
+
+:where([data-kit="drawer"][data-side="start"], [data-kit="drawer"][data-side="end"]) {
+  inset-block: 0;
+  inline-size: min(var(--_size), 100%);
+}
+
+:where([data-kit="drawer"][data-side="start"]) {
+  inset-inline-start: 0;
+  border-inline-end-width: var(--kit-border-width-default);
+}
+
+:where([data-kit="drawer"][data-side="end"]) {
+  inset-inline-end: 0;
+  border-inline-start-width: var(--kit-border-width-default);
+}
+
+:where([data-kit="drawer"][data-side="top"], [data-kit="drawer"][data-side="bottom"]) {
+  inset-inline: 0;
+  max-block-size: 90%;
+}
+
+:where([data-kit="drawer"][data-side="top"]) {
+  inset-block-start: 0;
+  border-block-end-width: var(--kit-border-width-default);
+  border-end-start-radius: var(--kit-radius-overlay);
+  border-end-end-radius: var(--kit-radius-overlay);
+}
+
+:where([data-kit="drawer"][data-side="bottom"]) {
+  inset-block-end: 0;
+  border-block-start-width: var(--kit-border-width-default);
+  border-start-start-radius: var(--kit-radius-overlay);
+  border-start-end-radius: var(--kit-radius-overlay);
+}
+
+/* Closed: parked just off the edge it slides from. */
+:where([data-kit="drawer"][data-side="start"][data-starting-style], [data-kit="drawer"][data-side="start"][data-ending-style]) {
+  transform: translate(-100%, 0);
+}
+
+:where([data-kit="drawer"][data-side="end"][data-starting-style], [data-kit="drawer"][data-side="end"][data-ending-style]) {
+  transform: translate(100%, 0);
+}
+
+:where([data-kit="drawer"][data-side="start"][data-starting-style]:dir(rtl), [data-kit="drawer"][data-side="start"][data-ending-style]:dir(rtl)) {
+  transform: translate(100%, 0);
+}
+
+:where([data-kit="drawer"][data-side="end"][data-starting-style]:dir(rtl), [data-kit="drawer"][data-side="end"][data-ending-style]:dir(rtl)) {
+  transform: translate(-100%, 0);
+}
+
+:where([data-kit="drawer"][data-side="top"][data-starting-style], [data-kit="drawer"][data-side="top"][data-ending-style]) {
+  transform: translate(0, -100%);
+}
+
+:where([data-kit="drawer"][data-side="bottom"][data-starting-style], [data-kit="drawer"][data-side="bottom"][data-ending-style]) {
+  transform: translate(0, 100%);
+}
+
+/* ------------------------------------------------------------------- Toast */
+
+:where([data-kit="toast-viewport"]) {
+  position: fixed;
+  z-index: var(--kit-z-toast);
+  display: flex;
+  flex-direction: column;
+  gap: var(--kit-space-2);
+  box-sizing: border-box;
+  inline-size: min(calc(var(--kit-size-40) * 10), 100%);
+  padding: var(--kit-space-4);
+  pointer-events: none;
+}
+
+:where([data-kit="toast-viewport"][data-placement^="bottom"]) {
+  inset-block-end: 0;
+}
+
+:where([data-kit="toast-viewport"][data-placement^="top"]) {
+  inset-block-start: 0;
+  flex-direction: column-reverse;
+}
+
+:where([data-kit="toast-viewport"][data-placement$="end"]) {
+  inset-inline-end: 0;
+}
+
+:where([data-kit="toast-viewport"][data-placement$="start"]) {
+  inset-inline-start: 0;
+}
+
+:where([data-kit="toast-viewport"][data-placement="top"], [data-kit="toast-viewport"][data-placement="bottom"]) {
+  inset-inline-start: 50%;
+  translate: -50% 0;
+}
+
+:where([data-kit="toast-viewport"][data-placement="top"]:dir(rtl), [data-kit="toast-viewport"][data-placement="bottom"]:dir(rtl)) {
+  translate: 50% 0;
+}
+
+:where([data-kit="toast"]) {
+  --_accent: var(--kit-color-text-secondary);
+
+  display: flex;
+  align-items: flex-start;
+  gap: var(--kit-space-3);
+  box-sizing: border-box;
+  padding: var(--kit-space-3) var(--kit-space-4);
+  border: var(--kit-border-width-default) solid var(--kit-color-border-default);
+  border-inline-start: var(--kit-border-width-emphasis) solid var(--_accent);
+  border-radius: var(--kit-radius-panel);
+  background-color: var(--kit-color-bg-overlay);
+  color: var(--kit-color-text-primary);
+  box-shadow: var(--kit-shadow-toast);
+  font-family: var(--kit-font-family-sans);
+  font-size: var(--kit-text-body-size);
+  line-height: var(--kit-text-body-line-height);
+  pointer-events: auto;
+  opacity: 1;
+  transform: translate(var(--toast-swipe-movement-x, 0), var(--toast-swipe-movement-y, 0));
+  transition:
+    opacity var(--kit-duration-base) var(--kit-easing-enter),
+    transform var(--kit-duration-base) var(--kit-easing-enter);
+}
+
+:where([data-kit="toast"][data-tone="accent"]) {
+  --_accent: var(--kit-color-accent-default);
+}
+
+:where([data-kit="toast"][data-tone="success"]) {
+  --_accent: var(--kit-color-status-success-foreground);
+}
+
+:where([data-kit="toast"][data-tone="warning"]) {
+  --_accent: var(--kit-color-status-warning-foreground);
+}
+
+:where([data-kit="toast"][data-tone="danger"]) {
+  --_accent: var(--kit-color-status-danger-foreground);
+}
+
+:where([data-kit="toast"][data-tone="info"]) {
+  --_accent: var(--kit-color-status-info-foreground);
+}
+
+:where([data-kit="toast"][data-starting-style], [data-kit="toast"][data-ending-style]) {
+  opacity: 0;
+  transform: translateY(var(--kit-space-2));
+}
+
+:where([data-kit="toast"][data-swiping]) {
+  transition: none;
+}
+
+:where([data-kit-slot="toast-icon"]) {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  block-size: var(--kit-text-body-line-height);
+  color: var(--_accent);
+}
+
+:where([data-kit-slot="toast-content"]) {
+  display: grid;
+  flex: 1 1 auto;
+  gap: var(--kit-space-1);
+  min-inline-size: 0;
+}
+
+:where([data-kit-slot="toast-title"]) {
+  margin: 0;
+  font-size: inherit;
+  font-weight: var(--kit-font-weight-semibold);
+}
+
+:where([data-kit-slot="toast-description"]) {
+  margin: 0;
+  color: var(--kit-color-text-secondary);
+  font-size: var(--kit-text-label-size);
+  line-height: var(--kit-text-label-line-height);
+}
+
+:where([data-kit-slot="toast-action"]) {
+  justify-self: start;
+  box-sizing: border-box;
+  min-block-size: var(--kit-size-control-sm);
+  margin-block-start: var(--kit-space-1);
+  padding-inline: var(--kit-space-3);
+  border: var(--kit-border-width-default) solid var(--kit-color-border-default);
+  border-radius: var(--kit-radius-control);
+  background-color: transparent;
+  color: var(--kit-color-text-primary);
+  font-family: inherit;
+  font-size: var(--kit-text-label-size);
+  font-weight: var(--kit-font-weight-medium);
+  cursor: pointer;
+}
+
+:where([data-kit-slot="toast-action"]):hover {
+  background-color: color-mix(in srgb, var(--kit-color-text-primary) 8%, transparent);
+}
+
+:where([data-kit-slot="toast-action"]):focus-visible {
+  outline: var(--kit-border-width-focus) solid var(--kit-color-border-focus);
+  outline-offset: var(--kit-space-0-5);
+}
+
+:where([data-kit="toast"] > [data-kit="button"]) {
+  flex: none;
+  margin-block: calc(var(--kit-space-1) * -1);
+  margin-inline-end: calc(var(--kit-space-2) * -1);
+}
+
+/* =========================================================================
+ * Date and time: Calendar, RangeCalendar, DateField, TimeField, DatePicker,
+ * DateRangePicker (the `@x12i/ui/date` entry)
+ *
+ * React Aria puts its state on the elements as data attributes
+ * (data-selected, data-today, data-outside-month, data-unavailable,
+ * data-focus-visible, data-selection-start...), which these rules read.
+ * ========================================================================= */
+
+/* ----------------------------------------------------------------- Calendar */
+
+:where([data-kit="calendar"]) {
+  --_cell: var(--kit-size-control-md);
+
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--kit-space-2);
+  box-sizing: border-box;
+  padding: var(--kit-space-3);
+  color: var(--kit-color-text-primary);
+  font-family: var(--kit-font-family-sans);
+  font-size: var(--kit-text-body-size);
+  line-height: var(--kit-text-body-line-height);
+}
+
+:where([data-kit-slot="calendar-header"]) {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--kit-space-2);
+}
+
+:where([data-kit-slot="calendar-heading"]) {
+  flex: 1 1 auto;
+  margin: 0;
+  font-size: var(--kit-text-label-size);
+  line-height: var(--kit-text-label-line-height);
+  font-weight: var(--kit-font-weight-semibold);
+  text-align: center;
+}
+
+/* The arrows point toward the previous and next month, so they mirror in RTL. */
+:where([data-kit-slot="calendar-nav"]:dir(rtl) svg) {
+  transform: scaleX(-1);
+}
+
+:where([data-kit-slot="calendar-grid"]) {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+:where([data-kit-slot="calendar-weekday"]) {
+  padding-block: var(--kit-space-1);
+  color: var(--kit-color-text-secondary);
+  font-size: var(--kit-text-caption-size);
+  line-height: var(--kit-text-caption-line-height);
+  font-weight: var(--kit-font-weight-medium);
+  text-align: center;
+}
+
+:where([data-kit-slot="calendar-grid"] td) {
+  padding: 0;
+  text-align: center;
+}
+
+:where([data-kit-slot="calendar-cell"]) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  inline-size: var(--_cell);
+  block-size: var(--_cell);
+  margin-inline: auto;
+  border-radius: var(--kit-radius-control);
+  color: var(--kit-color-text-primary);
+  font-variant-numeric: tabular-nums;
+  cursor: pointer;
+  user-select: none;
+  transition: background-color var(--kit-duration-instant) var(--kit-easing-standard);
+}
+
+:where([data-kit-slot="calendar-cell"]):hover {
+  background-color: color-mix(in srgb, var(--kit-color-text-primary) 8%, transparent);
+}
+
+/* Today is marked by weight and an underline, not by color alone. */
+:where([data-kit-slot="calendar-cell"][data-today]) {
+  font-weight: var(--kit-font-weight-semibold);
+  text-decoration: underline;
+  text-underline-offset: var(--kit-space-0-5);
+}
+
+:where([data-kit-slot="calendar-cell"][data-selected]) {
+  background-color: var(--kit-color-accent-default);
+  color: var(--kit-color-accent-on-accent);
+}
+
+:where([data-kit-slot="calendar-cell"][data-focus-visible]) {
+  outline: var(--kit-border-width-focus) solid var(--kit-color-border-focus);
+  outline-offset: var(--kit-space-0-5);
+}
+
+:where([data-kit-slot="calendar-cell"][data-outside-month]) {
+  visibility: hidden;
+}
+
+:where([data-kit-slot="calendar-cell"][data-disabled]) {
+  color: var(--kit-color-text-disabled);
+  cursor: not-allowed;
+}
+
+:where([data-kit-slot="calendar-cell"][data-disabled]):hover {
+  background-color: transparent;
+}
+
+/* Unavailable dates are struck through so the state is not color alone. */
+:where([data-kit-slot="calendar-cell"][data-unavailable]) {
+  color: var(--kit-color-text-disabled);
+  text-decoration: line-through;
+  cursor: not-allowed;
+}
+
+:where([data-kit-slot="calendar-cell"][data-unavailable]):hover {
+  background-color: transparent;
+}
+
+:where([data-kit-slot="calendar-cell"][data-invalid][data-selected]) {
+  background-color: var(--kit-color-status-danger-foreground);
+  color: var(--kit-color-text-inverse);
+}
+
+/* A range: the days between the ends carry a tint, the ends are solid. */
+:where([data-kit="calendar"][data-range] [data-kit-slot="calendar-cell"][data-selected]) {
+  border-radius: 0;
+  background-color: var(--kit-color-selection);
+  color: var(--kit-color-text-primary);
+}
+
+:where([data-kit="calendar"][data-range] [data-kit-slot="calendar-cell"][data-selection-start]) {
+  border-start-start-radius: var(--kit-radius-control);
+  border-end-start-radius: var(--kit-radius-control);
+  background-color: var(--kit-color-accent-default);
+  color: var(--kit-color-accent-on-accent);
+}
+
+:where([data-kit="calendar"][data-range] [data-kit-slot="calendar-cell"][data-selection-end]) {
+  border-start-end-radius: var(--kit-radius-control);
+  border-end-end-radius: var(--kit-radius-control);
+  background-color: var(--kit-color-accent-default);
+  color: var(--kit-color-accent-on-accent);
+}
+
+:where([data-kit="calendar"][data-range] [data-kit-slot="calendar-cell"][data-selected][data-outside-month]) {
+  visibility: hidden;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-kit-slot="calendar-cell"]) {
+    transition: none;
+  }
+}
+
+@media (forced-colors: active) {
+  :where([data-kit-slot="calendar-cell"][data-selected]) {
+    background-color: Highlight;
+    color: HighlightText;
+  }
+
+  :where([data-kit-slot="calendar-cell"][data-unavailable]) {
+    color: GrayText;
+  }
+}
+
+/* -------------------------------------------------- Date and time segments */
+
+:where([data-kit-slot="date-segments"]) {
+  display: flex;
+  flex: 1 1 auto;
+  align-items: center;
+  box-sizing: border-box;
+  min-inline-size: 0;
+  padding-inline: var(--_pad, var(--kit-space-control-inline-md));
+  white-space: nowrap;
+}
+
+:where([data-kit-slot="date-segment"]) {
+  box-sizing: content-box;
+  padding-inline: var(--kit-space-0-5);
+  border-radius: var(--kit-radius-control);
+  color: var(--kit-color-text-primary);
+  font-variant-numeric: tabular-nums;
+  text-align: end;
+  /* The focused segment fills with the accent; the transparent outline still shows in forced colors. */
+  outline: var(--kit-border-width-focus) solid transparent;
+}
+
+:where([data-kit-slot="date-segment"][data-type="literal"]) {
+  padding-inline: 0;
+  color: var(--kit-color-text-secondary);
+}
+
+/* An empty segment shows its name as a placeholder. */
+:where([data-kit-slot="date-segment"][data-placeholder]) {
+  color: var(--kit-color-text-secondary);
+}
+
+:where([data-kit-slot="date-segment"][data-focused]) {
+  background-color: var(--kit-color-accent-default);
+  color: var(--kit-color-accent-on-accent);
+}
+
+:where([data-kit-slot="date-segment"][data-disabled]) {
+  color: var(--kit-color-text-disabled);
+}
+
+:where([data-kit-slot="date-range-separator"]) {
+  flex: none;
+  color: var(--kit-color-text-secondary);
+  user-select: none;
+}
+
+/* The calendar button sits inside the field, at its end. */
+:where([data-kit="input-group"] > [data-kit="button"][data-icon-only]) {
+  flex: none;
+}
+
+@media (forced-colors: active) {
+  :where([data-kit-slot="date-segment"][data-focused]) {
+    background-color: Highlight;
+    color: HighlightText;
+  }
+}
+
+/* ------------------------------------------------------------ Date popover */
+
+:where([data-kit="date-popover"]) {
+  box-sizing: border-box;
+  border: var(--kit-border-width-default) solid var(--kit-color-border-default);
+  border-radius: var(--kit-radius-overlay);
+  background-color: var(--kit-color-bg-overlay);
+  color: var(--kit-color-text-primary);
+  box-shadow: var(--kit-shadow-overlay);
+}
+
+:where([data-kit="date-popover"][data-entering]) {
+  animation: kit-date-popover-in var(--kit-duration-fast) var(--kit-easing-enter);
+}
+
+:where([data-kit="date-popover"][data-exiting]) {
+  animation: kit-date-popover-in var(--kit-duration-fast) var(--kit-easing-exit) reverse;
+}
+
+:where([data-kit-slot="date-dialog"]) {
+  display: block;
+}
+
+@keyframes kit-date-popover-in {
+  from {
+    opacity: 0;
+    transform: translateY(calc(var(--kit-space-1) * -1));
+  }
+
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-kit="date-popover"][data-entering], [data-kit="date-popover"][data-exiting]) {
+    animation: none;
+  }
+}
+
+@media (forced-colors: active) {
+  :where([data-kit="date-popover"]) {
+    border-color: CanvasText;
+  }
+}