@kinetixui/angular 0.24.0 → 0.25.0

package/styles.css

@@ -29,6 +29,16 @@
  * tokens do, which is the entire point of the architecture.
  */
 
+/* ── box model ──────────────────────────────────────────────────────────── */
+/* Every size in this file is a border-box size, as it is in React (Tailwind's preflight sets it globally). An
+   Angular application has no such reset by default, and under content-box a 44px input with its padding and
+   border rendered 62px tall — and then did not grow at 200% text, because the extra 18px was already spent.
+   Scoped to KinetixUI's own classes and wrapped in :where() so it carries no specificity: an application's
+   own box-sizing rule, and any part here that opts out (the timeline marker), still win. */
+:where([class^='kx-'], [class*=' kx-']),
+:where([class^='kx-'], [class*=' kx-'])::before,
+:where([class^='kx-'], [class*=' kx-'])::after { box-sizing: border-box; }
+
 /* ── button ─────────────────────────────────────────────────────────────── */
 .kx-btn {
   display: inline-flex;
@@ -152,14 +162,61 @@
   display: block;
   background-color: hsl(var(--card));
   color: hsl(var(--card-foreground));
-  border: var(--border-width-default) solid hsl(var(--border));
+  /* The surface model (TOKENS.md): a soft edge at half the strength of the controls' stroke, and the md
+     elevation step for lift — the same resting card React renders. */
+  border: var(--border-width-default) solid hsl(var(--border) / 0.5);
   border-radius: var(--radius-container);
-  box-shadow: var(--shadow-sm);
+  box-shadow: var(--shadow-md);
+}
+/* The interactive card (TOKENS.md, "Card"): only on an element that IS interactive — `a[href]` or `button`
+   carrying kxCard — so a static card can never look clickable.
+     hover     a pointer that can hover: edge to full `--border`, lifted to `--shadow-lg`
+     pressed   `:active`: down to `--shadow-sm` with a `--muted` wash, so it differs from hover in depth AND fill
+     selected  `aria-pressed="true"` or `aria-current`: a 2px `--primary` edge (the border plus an inset 1px) —
+               weight as well as hue — alongside the elevation of whichever state it is in
+     focus     the shared focus ring replaces the elevation and is the strongest edge the card shows
+   box-shadow, border-color and background-color over `--duration-fast`; nothing moves or resizes. */
+:where(a[href], button).kx-card {
+  display: block;
+  appearance: none;
+  padding: 0;
+  font: inherit;
+  text-align: start;
+  text-decoration: none;
+  cursor: pointer;
+  outline: none;
+  transition:
+    box-shadow var(--duration-fast) var(--easing-standard),
+    border-color var(--duration-fast) var(--easing-standard),
+    background-color var(--duration-fast) var(--easing-standard);
+}
+@media (hover: hover) {
+  :is(a[href], button).kx-card:hover { border-color: hsl(var(--border)); box-shadow: var(--shadow-lg); }
+}
+:is(a[href], button).kx-card:active { box-shadow: var(--shadow-sm); background-color: hsl(var(--muted) / 0.4); }
+:is(a[href], button).kx-card:is([aria-pressed='true'], [aria-current]:not([aria-current='false'])) {
+  border-color: hsl(var(--primary));
+  box-shadow: inset 0 0 0 1px hsl(var(--primary)), var(--shadow-md);
+}
+@media (hover: hover) {
+  :is(a[href], button).kx-card:is([aria-pressed='true'], [aria-current]:not([aria-current='false'])):hover {
+    box-shadow: inset 0 0 0 1px hsl(var(--primary)), var(--shadow-lg);
+  }
+}
+:is(a[href], button).kx-card:is([aria-pressed='true'], [aria-current]:not([aria-current='false'])):active {
+  box-shadow: inset 0 0 0 1px hsl(var(--primary)), var(--shadow-sm);
+}
+/* declared last at the highest specificity above, so no hover or selected shadow can hide it */
+:is(a[href], button).kx-card:is(*, [aria-pressed], [aria-current]):focus-visible { box-shadow: var(--shadow-focus); }
+button.kx-card:disabled { pointer-events: none; opacity: var(--opacity-disabled); }
+@media (prefers-reduced-motion: reduce) {
+  :where(a[href], button).kx-card { transition: none; }
 }
 .kx-card-header { display: flex; flex-direction: column; gap: var(--spacing-1); padding: var(--spacing-6); }
 .kx-card-title { font: var(--text-title-md); font-weight: var(--font-weight-semibold); margin: 0; }
 .kx-card-description { font: var(--text-body-sm); color: hsl(var(--muted-foreground)); margin: 0; }
-.kx-card-content { padding: 0 var(--spacing-6) var(--spacing-6); }
+/* a custom element is inline by default, and an inline box drops its inline padding around the blocks inside it */
+.kx-card-content { display: block; padding: 0 var(--spacing-6) var(--spacing-6); }
 .kx-card-footer { display: flex; align-items: center; gap: var(--spacing-2); padding: 0 var(--spacing-6) var(--spacing-6); }
 
 /* ── label ──────────────────────────────────────────────────────────────── */
@@ -172,7 +229,16 @@
 /* the control is disabled, not the label — so the label follows via the group, never its own attribute */
 .kx-label[data-disabled='true'] { opacity: var(--opacity-disabled); cursor: not-allowed; }
 
-/* ── input / textarea ───────────────────────────────────────────────────── */
+/* ── input / textarea / native select ───────────────────────────────────── */
+/* Text-entry state contract (TOKENS.md, "Text entry and navigation"), shared with React:
+   rest       edge `--muted-foreground` at 80% (3.4:1 light / 5.4:1 dark on a card; `--input` was 2.2 / 2.4)
+   hover      a pointer that can hover: full `--muted-foreground` — never over focus, invalid, read-only or
+              disabled, so hover cannot take over a stronger state
+   focus      `--action` edge + `--shadow-focus`, the strongest signal
+   invalid    `aria-invalid="true"` → `--destructive` edge and ring
+   read-only  an inset `--muted` fill and full-strength text; no hover
+   disabled   `--opacity-disabled`, inert
+   Motion: border-color, box-shadow and background-color over `--duration-instant`; none under reduce. */
 .kx-input {
   display: block;
   inline-size: 100%;
@@ -180,11 +246,14 @@
   padding: var(--spacing-2) var(--spacing-3);
   background-color: hsl(var(--background));
   color: hsl(var(--foreground));
-  border: var(--border-width-default) solid hsl(var(--input));
+  border: var(--border-width-default) solid hsl(var(--muted-foreground) / 0.8);
   border-radius: var(--radius-field);
   font: var(--text-body-md);
   font-family: var(--font-family-sans);
-  transition: border-color var(--duration-fast) var(--easing-standard), box-shadow var(--duration-fast) var(--easing-standard);
+  transition:
+    border-color var(--duration-instant) var(--easing-standard),
+    box-shadow var(--duration-instant) var(--easing-standard),
+    background-color var(--duration-instant) var(--easing-standard);
 }
 .kx-input::placeholder { color: hsl(var(--muted-foreground)); }
 .kx-input:focus-visible { outline: none; border-color: hsl(var(--ring)); box-shadow: var(--shadow-focus); }
@@ -192,55 +261,93 @@
 /* aria-invalid is the source of truth for the error state — the styling follows the semantics, not the reverse */
 .kx-input[aria-invalid='true'] { border-color: hsl(var(--destructive)); }
 .kx-input[aria-invalid='true']:focus-visible { box-shadow: var(--shadow-focus-destructive); }
+.kx-input[readonly],
+.kx-textarea[readonly] { background-color: hsl(var(--muted)); }
+@media (hover: hover) {
+  .kx-input:enabled:not(:focus):not([readonly]):not([aria-invalid='true']):hover,
+  .kx-textarea:enabled:not(:focus):not([readonly]):not([aria-invalid='true']):hover,
+  .kx-native-select:enabled:not(:focus):not([aria-invalid='true']):hover { border-color: hsl(var(--muted-foreground)); }
+}
 
 /* ── checkbox / switch ──────────────────────────────────────────────────── */
+/* Selection-control state contract (TOKENS.md, "Selection controls"), shared with React:
+     rest      the unchecked box's edge is `--muted-foreground` — it is the only thing that says a checkbox is
+               there, so it clears SC 1.4.11's 3:1, which `--input` (2.2:1) does not
+     hover     a pointer that can hover: a `--foreground` state layer at 8% around the control; an unchecked
+               box's edge darkens to `--foreground`, a checked fill steps to `--primary` at 90%
+     pressed   the state layer deepens to 14%
+     focus     the shared focus shadow, declared after hover and pressed at the same specificity so neither
+               can cover it
+     disabled  the hover and pressed layers are keyed on `:enabled`, so a disabled control never answers */
 .kx-checkbox {
   display: inline-grid;
   place-items: center;
-  inline-size: 18px;
-  block-size: 18px;
+  /* rem, not px: a selection control has no text of its own, so its box is what must grow at 200% text */
+  inline-size: 1.125rem;
+  block-size: 1.125rem;
   flex-shrink: 0;
   padding: 0;
   background-color: hsl(var(--background));
-  color: hsl(var(--primary-foreground));
-  border: var(--border-width-default) solid hsl(var(--input));
+  color: hsl(var(--action-foreground));
+  border: var(--border-width-default) solid hsl(var(--muted-foreground));
   border-radius: var(--radius-sm);
   cursor: pointer;
-  transition: background-color var(--duration-fast) var(--easing-standard), border-color var(--duration-fast) var(--easing-standard);
+  transition:
+    background-color var(--duration-instant) var(--easing-standard),
+    border-color var(--duration-instant) var(--easing-standard),
+    box-shadow var(--duration-instant) var(--easing-standard);
 }
-.kx-checkbox:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
 .kx-checkbox[aria-checked='true'],
-.kx-checkbox[aria-checked='mixed'] { background-color: hsl(var(--primary)); border-color: hsl(var(--primary)); }
+.kx-checkbox[aria-checked='mixed'] { background-color: hsl(var(--action)); border-color: hsl(var(--action)); }
+@media (hover: hover) {
+  .kx-checkbox:enabled:hover { box-shadow: 0 0 0 5px hsl(var(--foreground) / 0.08); }
+  .kx-checkbox:enabled:hover:not([aria-checked='true'], [aria-checked='mixed']) { border-color: hsl(var(--foreground)); }
+  .kx-checkbox:enabled:hover:is([aria-checked='true'], [aria-checked='mixed']) { background-color: hsl(var(--action) / 0.9); }
+}
+.kx-checkbox:enabled:active { box-shadow: 0 0 0 5px hsl(var(--foreground) / 0.14); }
+.kx-checkbox:enabled:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
 .kx-checkbox:disabled { opacity: var(--opacity-disabled); cursor: not-allowed; }
-.kx-checkbox > svg { inline-size: 14px; block-size: 14px; pointer-events: none; }
+.kx-checkbox > svg { inline-size: 0.875rem; block-size: 0.875rem; pointer-events: none; }
 
 .kx-switch {
   display: inline-flex;
   align-items: center;
-  inline-size: 44px;
-  block-size: 24px;
+  inline-size: 2.75rem;
+  block-size: 1.5rem;
   flex-shrink: 0;
-  padding: 2px;
+  padding: 0.125rem;
   background-color: hsl(var(--tertiary));
   border: var(--border-width-default) solid transparent;
   border-radius: var(--radius-full);
   cursor: pointer;
-  transition: background-color var(--duration-base) var(--easing-standard);
+  transition:
+    background-color var(--duration-base) var(--easing-standard),
+    box-shadow var(--duration-instant) var(--easing-standard);
 }
-.kx-switch:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
-.kx-switch[aria-checked='true'] { background-color: hsl(var(--primary)); }
+.kx-switch[aria-checked='true'] { background-color: hsl(var(--action)); }
+@media (hover: hover) {
+  .kx-switch:enabled:hover { box-shadow: 0 0 0 5px hsl(var(--foreground) / 0.08); }
+  .kx-switch:enabled:hover[aria-checked='true'] { background-color: hsl(var(--action) / 0.9); }
+}
+.kx-switch:enabled:active { box-shadow: 0 0 0 5px hsl(var(--foreground) / 0.14); }
+.kx-switch:enabled:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
 .kx-switch:disabled { opacity: var(--opacity-disabled); cursor: not-allowed; }
 .kx-switch__thumb {
-  inline-size: 18px;
-  block-size: 18px;
+  position: relative;
+  inset-inline-start: 0;
+  inline-size: 1.125rem;
+  block-size: 1.125rem;
   border-radius: var(--radius-full);
   background-color: hsl(var(--static-white));
   box-shadow: var(--shadow-sm);
-  transition: translate var(--duration-base) var(--easing-standard);
+  transition: inset-inline-start var(--duration-base) var(--easing-standard);
 }
-/* `translate` with a logical sign flip: in RTL the thumb travels the other way without a second rule */
-.kx-switch[aria-checked='true'] .kx-switch__thumb { translate: 20px 0; }
-[dir='rtl'] .kx-switch[aria-checked='true'] .kx-switch__thumb { translate: -20px 0; }
+/* The thumb travels along the inline axis of the switch's OWN direction: `inset-inline-start` is logical, so
+   the browser resolves it against the nearest `dir`. It used to be `translate` flipped by `[dir='rtl'] …`,
+   which matches ANY rtl ancestor — a switch in an LTR section of an RTL page was flipped too and its thumb
+   landed outside the track (check:selection-visual, "direction"). A logical property needs no selector, so
+   no build step can rewrite the direction test into a guess (see the React Switch). */
+.kx-switch[aria-checked='true'] .kx-switch__thumb { inset-inline-start: 1.25rem; }
 
 /* ── separator ──────────────────────────────────────────────────────────── */
 .kx-separator { display: block; flex-shrink: 0; background-color: hsl(var(--border)); border: 0; margin: 0; }
@@ -292,6 +399,9 @@
 .kx-tabs { display: block; }
 .kx-tab-list {
   display: inline-flex;
+  /* wraps inside its own width rather than running off a phone at 200% text (React's TabsList does the same) */
+  flex-wrap: wrap;
+  max-inline-size: 100%;
   align-items: center;
   gap: var(--spacing-1);
   border-block-end: var(--border-width-default) solid hsl(var(--border));
@@ -306,10 +416,21 @@
   font: var(--text-label-md);
   font-weight: var(--font-weight-medium);
   color: hsl(var(--muted-foreground));
+  border-start-start-radius: var(--radius-sm);
+  border-start-end-radius: var(--radius-sm);
   cursor: pointer;
-  transition: color var(--duration-fast) var(--easing-standard), border-color var(--duration-fast) var(--easing-standard);
+  transition:
+    color var(--duration-fast) var(--easing-standard),
+    background-color var(--duration-fast) var(--easing-standard),
+    border-color var(--duration-fast) var(--easing-standard);
+}
+/* Navigation state contract (TOKENS.md, "Text entry and navigation"). Angular's strip is underlined rather
+   than React's segmented well — the shape differs, the semantics do not: hover is the selection controls'
+   8% `--foreground` layer on an unselected, enabled tab (a disabled one used to answer with a colour change);
+   selected is `--foreground` text AND the 2px `--primary` indicator; focus is the ring. */
+@media (hover: hover) {
+  .kx-tab:enabled:not([aria-selected='true']):hover { color: hsl(var(--foreground)); background-color: hsl(var(--foreground) / 0.08); }
 }
-.kx-tab:hover { color: hsl(var(--foreground)); }
 .kx-tab:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
 .kx-tab[aria-selected='true'] { color: hsl(var(--foreground)); border-block-end-color: hsl(var(--primary)); }
 .kx-tab:disabled { opacity: var(--opacity-disabled); cursor: not-allowed; }
@@ -506,14 +627,17 @@
   min-block-size: 100px;
   resize: vertical;
   padding: var(--spacing-3);
-  border: var(--border-width-default) solid hsl(var(--input));
+  border: var(--border-width-default) solid hsl(var(--muted-foreground) / 0.8);
   border-radius: var(--radius-field);
   background-color: hsl(var(--background));
   font: var(--text-body-md);
   font-family: var(--font-family-sans);
   color: hsl(var(--foreground));
   outline: none;
-  transition: border-color var(--duration-fast) var(--easing-standard), box-shadow var(--duration-fast) var(--easing-standard);
+  transition:
+    border-color var(--duration-instant) var(--easing-standard),
+    box-shadow var(--duration-instant) var(--easing-standard),
+    background-color var(--duration-instant) var(--easing-standard);
 }
 .kx-textarea::placeholder { color: hsl(var(--muted-foreground)); }
 .kx-textarea:focus-visible { border-color: hsl(var(--action)); box-shadow: var(--shadow-focus); }
@@ -526,14 +650,20 @@
   inline-size: 100%;
   padding: var(--spacing-3);
   padding-inline-end: var(--spacing-8);
-  border: var(--border-width-default) solid hsl(var(--input));
+  border: var(--border-width-default) solid hsl(var(--muted-foreground) / 0.8);
   background-color: hsl(var(--background));
   font: var(--text-body-md);
   font-family: var(--font-family-sans);
   color: hsl(var(--foreground));
   outline: none;
-  transition: border-color var(--duration-fast) var(--easing-standard), box-shadow var(--duration-fast) var(--easing-standard);
+  transition:
+    border-color var(--duration-instant) var(--easing-standard),
+    box-shadow var(--duration-instant) var(--easing-standard);
 }
+/* The placeholder is the empty-valued option: while it is chosen the field reads as unanswered. The options
+   in the open picker keep the value colour. */
+.kx-native-select:has(option[value='']:checked) { color: hsl(var(--muted-foreground)); }
+.kx-native-select option { color: hsl(var(--foreground)); }
 .kx-native-select--sharp { border-radius: var(--radius-none); }
 .kx-native-select--default { border-radius: var(--radius-field); }
 .kx-native-select--rounded { border-radius: var(--radius-md); }
@@ -541,6 +671,9 @@
 .kx-native-select:focus-visible { border-color: hsl(var(--action)); box-shadow: var(--shadow-focus); }
 .kx-native-select:disabled { opacity: var(--opacity-disabled); cursor: not-allowed; }
 .kx-native-select[aria-invalid='true'] { border-color: hsl(var(--destructive)); }
+/* Input and Textarea already turned the ring destructive on an invalid field; the select drew the default
+   ring, so a focused invalid select lost its error colour to the focus colour. */
+.kx-native-select[aria-invalid='true']:focus-visible { box-shadow: var(--shadow-focus-destructive); }
 
 /* ── radio group ────────────────────────────────────────────────────────── */
 .kx-radio-group { display: flex; flex-direction: column; gap: var(--spacing-2); }
@@ -550,68 +683,92 @@
 .kx-radio__input {
   appearance: none;
   margin: 0;
-  inline-size: var(--spacing-5);
-  block-size: var(--spacing-5);
+  /* 1.25rem is --spacing-5 at the default text size; the spacing scale is px, so it would not grow at 200% */
+  inline-size: 1.25rem;
+  block-size: 1.25rem;
   flex-shrink: 0;
-  border: var(--border-width-default) solid hsl(var(--input));
+  border: var(--border-width-default) solid hsl(var(--muted-foreground));
   border-radius: var(--radius-full);
   background-color: hsl(var(--background));
   cursor: pointer;
-  transition: border-color var(--duration-fast) var(--easing-standard), box-shadow var(--duration-fast) var(--easing-standard);
+  /* the selection-control contract (see checkbox): a 3:1 edge, an 8% / 14% state layer, focus on top */
+  --kx-radio-dot: 0 0 #0000;
+  --kx-radio-layer: 0 0 #0000;
+  box-shadow: var(--kx-radio-dot), var(--kx-radio-layer);
+  transition: border-color var(--duration-instant) var(--easing-standard), box-shadow var(--duration-instant) var(--easing-standard);
 }
-/* the dot is an inset ring rather than a pseudo-element, so it scales with the control */
+/* the dot is an inset ring rather than a pseudo-element, so it scales with the control — and it is its own
+   custom property so the hover and pressed layers add to it instead of replacing it */
 .kx-radio__input:checked {
-  border-color: hsl(var(--primary));
-  box-shadow: inset 0 0 0 4px hsl(var(--primary));
+  border-color: hsl(var(--action));
+  --kx-radio-dot: inset 0 0 0 0.25rem hsl(var(--action));
+}
+@media (hover: hover) {
+  .kx-radio__input:enabled:hover { --kx-radio-layer: 0 0 0 5px hsl(var(--foreground) / 0.08); }
+  .kx-radio__input:enabled:hover:not(:checked) { border-color: hsl(var(--foreground)); }
 }
-.kx-radio__input:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
-.kx-radio__input:checked:focus-visible { box-shadow: inset 0 0 0 4px hsl(var(--primary)), var(--shadow-focus); }
+.kx-radio__input:enabled:active { --kx-radio-layer: 0 0 0 5px hsl(var(--foreground) / 0.14); }
+.kx-radio__input:enabled:focus-visible { outline: none; --kx-radio-layer: var(--shadow-focus); }
 .kx-radio__input:disabled { opacity: var(--opacity-disabled); cursor: not-allowed; }
 .kx-radio__label { font: var(--text-body-md); font-family: var(--font-family-sans); color: hsl(var(--foreground)); cursor: pointer; }
 .kx-radio__input:disabled + .kx-radio__label { opacity: var(--opacity-disabled); cursor: not-allowed; }
 
 /* ── slider ─────────────────────────────────────────────────────────────── */
-.kx-slider { display: block; inline-size: 100%; }
+.kx-slider { position: relative; display: block; inline-size: 100%; }
+/* The visible track and fill sit behind a transparent native track. They are placed with logical properties,
+   so the fill grows from the inline start of the slider's own direction (see KxSlider). */
+.kx-slider__track {
+  position: absolute;
+  inset-inline: 0;
+  inset-block-start: 50%;
+  block-size: 0.5rem;
+  margin-block-start: -0.25rem;
+  overflow: hidden;
+  border-radius: var(--radius-full);
+  background-color: hsl(var(--muted));
+  pointer-events: none;
+}
+.kx-slider__fill {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: 0;
+  inline-size: var(--kx-slider-fill, 0%);
+  background-color: hsl(var(--primary));
+}
+.kx-slider:has(.kx-slider__input:disabled) .kx-slider__track { opacity: var(--opacity-disabled); }
 .kx-slider__input {
+  position: relative;
+  display: block;
   appearance: none;
   inline-size: 100%;
-  block-size: var(--spacing-5);
+  /* rem throughout (the px spacing scale's 20 / 8 at the default text size), so the hit area grows with text */
+  block-size: 1.25rem;
   margin: 0;
   background: transparent;
   cursor: pointer;
 }
-/* the filled portion is a gradient stop driven by --kx-slider-fill, so the track follows the real value */
 .kx-slider__input::-webkit-slider-runnable-track {
-  block-size: var(--spacing-2);
+  block-size: 0.5rem;
   border-radius: var(--radius-full);
-  background: linear-gradient(
-    to right,
-    hsl(var(--primary)) var(--kx-slider-fill, 0%),
-    hsl(var(--muted)) var(--kx-slider-fill, 0%)
-  );
+  background: transparent;
 }
 .kx-slider__input::-moz-range-track {
-  block-size: var(--spacing-2);
-  border-radius: var(--radius-full);
-  background-color: hsl(var(--muted));
-}
-.kx-slider__input::-moz-range-progress {
-  block-size: var(--spacing-2);
+  block-size: 0.5rem;
   border-radius: var(--radius-full);
-  background-color: hsl(var(--primary));
+  background: transparent;
 }
 .kx-slider__input::-webkit-slider-thumb {
   appearance: none;
-  margin-block-start: -6px;
-  inline-size: var(--spacing-5);
-  block-size: var(--spacing-5);
+  margin-block-start: -0.375rem;
+  inline-size: 1.25rem;
+  block-size: 1.25rem;
   border: var(--border-width-default) solid hsl(var(--primary));
   border-radius: var(--radius-full);
   background-color: hsl(var(--background));
 }
 .kx-slider__input::-moz-range-thumb {
-  inline-size: var(--spacing-5);
-  block-size: var(--spacing-5);
+  inline-size: 1.25rem;
+  block-size: 1.25rem;
   border: var(--border-width-default) solid hsl(var(--primary));
   border-radius: var(--radius-full);
   background-color: hsl(var(--background));
@@ -619,16 +776,47 @@
 .kx-slider__input:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-full); }
 .kx-slider__input:disabled { opacity: var(--opacity-disabled); cursor: not-allowed; }
 
+/* ── composite fields: number input, password input ─────────────────────── */
+/* The text-entry state contract (TOKENS.md, "Composite fields"), shared with React's NumberInput and
+   InputGroup: the wrapper is ONE field, and it reads its state from the input inside it.
+   rest       edge `--muted-foreground` at 80% (3:1 on a card; `--input` was 2.2:1)
+   hover      full `--muted-foreground` — never over focus, invalid or disabled
+   focus      the INPUT focused → `--action` edge + `--shadow-focus`. A focused part button (the reveal toggle)
+              draws its own ring and leaves the wrapper at rest, so the ring says which part has focus
+   invalid    `aria-invalid="true"` on the inner input (the `aria-invalid` input) → `--destructive`, kept under
+              the pointer and when focused
+   read-only  `readonly` on the inner input (kx-number-input's `readonly`) → the inset `--muted` fill, no hover
+   disabled   `--opacity-disabled` on the whole field, inert */
+.kx-number-input,
+.kx-password-input {
+  border: var(--border-width-default) solid hsl(var(--muted-foreground) / 0.8);
+  border-radius: var(--radius-field);
+  background-color: hsl(var(--background));
+  overflow: hidden;
+  transition:
+    border-color var(--duration-instant) var(--easing-standard),
+    box-shadow var(--duration-instant) var(--easing-standard);
+}
+@media (hover: hover) {
+  .kx-number-input:not(:has(input:is(:focus, :disabled, [readonly], [aria-invalid='true']))):hover,
+  .kx-password-input:not(:has(input:is(:focus, :disabled, [readonly], [aria-invalid='true']))):hover { border-color: hsl(var(--muted-foreground)); }
+}
+.kx-number-input:has(.kx-number-input__input[readonly]) { background-color: hsl(var(--muted)); }
+.kx-number-input:has(.kx-number-input__input:focus),
+.kx-password-input:has(.kx-password-input__input:focus) { border-color: hsl(var(--action)); box-shadow: var(--shadow-focus); }
+/* after focus and at least as specific, so a focused invalid field keeps its destructive edge */
+.kx-number-input:has(.kx-number-input__input[aria-invalid='true']),
+.kx-password-input:has(.kx-password-input__input[aria-invalid='true']) { border-color: hsl(var(--destructive)); }
+.kx-number-input:has(.kx-number-input__input[aria-invalid='true']:focus),
+.kx-password-input:has(.kx-password-input__input[aria-invalid='true']:focus) { box-shadow: var(--shadow-focus-destructive); }
+.kx-number-input:has(input:disabled),
+.kx-password-input:has(input:disabled) { opacity: var(--opacity-disabled); cursor: not-allowed; }
+
 /* ── number input ───────────────────────────────────────────────────────── */
 .kx-number-input {
   display: inline-flex;
   align-items: stretch;
-  border: var(--border-width-default) solid hsl(var(--input));
-  border-radius: var(--radius-field);
-  background-color: hsl(var(--background));
-  overflow: hidden;
 }
-.kx-number-input:focus-within { border-color: hsl(var(--action)); box-shadow: var(--shadow-focus); }
 .kx-number-input__input {
   inline-size: var(--spacing-16);
   min-inline-size: 0;
@@ -654,20 +842,16 @@
   font: var(--text-body-md);
   cursor: pointer;
 }
-.kx-number-input__step:hover { color: hsl(var(--foreground)); }
-.kx-number-input__step:disabled { opacity: var(--opacity-disabled); cursor: not-allowed; }
+.kx-number-input__step:enabled:hover { color: hsl(var(--foreground)); }
+/* the field's own opacity already says disabled — a step dimmed again inside it would read as more disabled */
+.kx-number-input__step:disabled { cursor: not-allowed; }
 
 /* ── password input ─────────────────────────────────────────────────────── */
 .kx-password-input {
   display: inline-flex;
   align-items: stretch;
   inline-size: 100%;
-  border: var(--border-width-default) solid hsl(var(--input));
-  border-radius: var(--radius-field);
-  background-color: hsl(var(--background));
-  overflow: hidden;
 }
-.kx-password-input:focus-within { border-color: hsl(var(--action)); box-shadow: var(--shadow-focus); }
 .kx-password-input__input {
   flex: 1;
   min-inline-size: 0;
@@ -689,8 +873,179 @@
   font-family: var(--font-family-sans);
   cursor: pointer;
 }
-.kx-password-input__reveal:hover { color: hsl(var(--foreground)); }
-.kx-password-input__reveal:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
+.kx-password-input__reveal:enabled:hover { color: hsl(var(--foreground)); }
+/* inset: the wrapper clips with overflow:hidden, so an outer ring would be cut off at the field's edge */
+.kx-password-input__reveal:focus-visible { outline: none; box-shadow: inset 0 0 0 2px hsl(var(--ring)); }
+
+/* ── input group ────────────────────────────────────────────────────────── */
+/* The same composite-field contract as the number and password inputs above, read from the group's input:
+   rest `--muted-foreground` at 80%; hover the full colour, never over focus, invalid, read-only or disabled;
+   the INPUT focused → `--action` edge and `--shadow-focus` on the shell (a focused add-on button draws its own
+   inset ring instead and leaves the shell at rest); `aria-invalid` → `--destructive`, kept under the pointer
+   and focus; `readonly` → the inset `--muted` fill; a disabled input → the whole group at `--opacity-disabled`. */
+.kx-input-group {
+  display: flex;
+  align-items: center;
+  inline-size: 100%;
+  overflow: hidden;
+  border: var(--border-width-default) solid hsl(var(--muted-foreground) / 0.8);
+  border-radius: var(--radius-field);
+  background-color: hsl(var(--background));
+  font-family: var(--font-family-sans);
+  transition:
+    border-color var(--duration-instant) var(--easing-standard),
+    box-shadow var(--duration-instant) var(--easing-standard),
+    background-color var(--duration-instant) var(--easing-standard);
+}
+@media (hover: hover) {
+  .kx-input-group:not(:has(.kx-input-group__input:is(:focus, :disabled, [readonly], [aria-invalid='true']))):hover { border-color: hsl(var(--muted-foreground)); }
+}
+.kx-input-group:has(.kx-input-group__input[readonly]) { background-color: hsl(var(--muted)); }
+.kx-input-group:has(.kx-input-group__input:focus) { border-color: hsl(var(--action)); box-shadow: var(--shadow-focus); }
+.kx-input-group:has(.kx-input-group__input[aria-invalid='true']) { border-color: hsl(var(--destructive)); }
+.kx-input-group:has(.kx-input-group__input[aria-invalid='true']:focus) { box-shadow: var(--shadow-focus-destructive); }
+/* The field is disabled when its input is. An add-on button disabled on its own (Copy with nothing to copy) dims
+   only itself: the input beside it still takes typing, so the group must not read as disabled. */
+.kx-input-group:has(.kx-input-group__input:disabled) { opacity: var(--opacity-disabled); cursor: not-allowed; }
+.kx-input-group:not(:has(.kx-input-group__input:disabled)) .kx-input-group__button:disabled { opacity: var(--opacity-disabled); }
+.kx-input-group__input {
+  flex: 1 1 0;
+  /* an <input>'s min-content is its intrinsic width (~20 characters), and that is what it contributes when
+     an auto-sized track sizes the group; a zero base keeps the group from widening its column past a phone
+     viewport at 200% text. It still grows to fill the field. */
+  inline-size: 0;
+  min-inline-size: 0;
+  border: 0;
+  padding: var(--spacing-3);
+  background: transparent;
+  font: var(--text-body-md);
+  font-family: var(--font-family-sans);
+  color: hsl(var(--foreground));
+  outline: none;
+}
+.kx-input-group__input::placeholder { color: hsl(var(--muted-foreground)); }
+.kx-input-group__input:disabled { cursor: not-allowed; }
+.kx-input-group__addon {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: var(--spacing-2);
+  color: hsl(var(--muted-foreground));
+}
+.kx-input-group__addon--start { padding-inline-start: var(--spacing-3); }
+.kx-input-group__addon--end { padding-inline-end: var(--spacing-3); }
+.kx-input-group__addon > svg { inline-size: 1rem; block-size: 1rem; flex-shrink: 0; }
+.kx-input-group__text {
+  padding-inline: var(--spacing-3);
+  font: var(--text-body-md);
+  font-family: var(--font-family-sans);
+  color: hsl(var(--muted-foreground));
+  white-space: nowrap;
+  user-select: none;
+}
+/* the divider is internal structure, deliberately quieter than the shell's edge */
+.kx-input-group__button {
+  display: flex;
+  flex-shrink: 0;
+  align-self: stretch;
+  align-items: center;
+  gap: var(--spacing-2);
+  appearance: none;
+  margin: 0;
+  border: 0;
+  border-inline-start: var(--border-width-default) solid hsl(var(--input));
+  padding-inline: var(--spacing-3);
+  background-color: hsl(var(--muted));
+  font: var(--text-label-md);
+  font-family: var(--font-family-sans);
+  color: hsl(var(--foreground));
+  cursor: pointer;
+  outline: none;
+  transition: background-color var(--duration-instant) var(--easing-standard), box-shadow var(--duration-instant) var(--easing-standard);
+}
+/* the selection controls' `--foreground` state layer, as an inset shadow so it composes with the focus ring */
+@media (hover: hover) {
+  .kx-input-group__button:enabled:hover { box-shadow: inset 0 0 0 100vmax hsl(var(--foreground) / 0.08); }
+}
+.kx-input-group__button:focus-visible { box-shadow: inset 0 0 0 2px hsl(var(--ring)); }
+.kx-input-group__button:disabled { cursor: not-allowed; }
+
+/* ── one-time code ──────────────────────────────────────────────────────── */
+/* The cells are decoration of one transparent input laid over them (KxInputOtp). Every cell owns its whole
+   border and each after the first in a group is pulled back a pixel, so a group that wraps at 200% text is
+   still closed at the end it starts from (React's InputOTP learned this the hard way). The cells follow the
+   composite-field contract, read from the input: rest `--muted-foreground` at 80%; hover the full colour, not
+   while focused, invalid or disabled; the ACTIVE cell (where the next character goes) takes `--action` and the
+   focus shadow, drawn above its neighbours; `aria-invalid` → `--destructive` edges; disabled → dimmed, inert. */
+.kx-input-otp {
+  position: relative;
+  display: inline-flex;
+  max-inline-size: 100%;
+}
+.kx-input-otp__cells { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-2); }
+.kx-input-otp__group { display: flex; flex-wrap: wrap; align-items: center; }
+.kx-input-otp__slot {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 2.25rem;
+  block-size: 2.25rem;
+  border: var(--border-width-default) solid hsl(var(--muted-foreground) / 0.8);
+  background-color: hsl(var(--background));
+  font: var(--text-body-md);
+  font-family: var(--font-family-sans);
+  color: hsl(var(--foreground));
+  transition:
+    border-color var(--duration-instant) var(--easing-standard),
+    box-shadow var(--duration-instant) var(--easing-standard);
+}
+.kx-input-otp__slot:not(:first-child) { margin-inline-start: -1px; }
+.kx-input-otp__slot:first-child { border-start-start-radius: var(--radius-md); border-end-start-radius: var(--radius-md); }
+.kx-input-otp__slot:last-child { border-start-end-radius: var(--radius-md); border-end-end-radius: var(--radius-md); }
+@media (hover: hover) {
+  .kx-input-otp:not(:has(.kx-input-otp__input:is(:focus, :disabled, [aria-invalid='true']))):hover .kx-input-otp__slot { border-color: hsl(var(--muted-foreground)); }
+}
+.kx-input-otp:has(.kx-input-otp__input[aria-invalid='true']) .kx-input-otp__slot { border-color: hsl(var(--destructive)); }
+.kx-input-otp__slot[data-active] { z-index: 1; border-color: hsl(var(--action)); box-shadow: var(--shadow-focus); }
+.kx-input-otp:has(.kx-input-otp__input[aria-invalid='true']) .kx-input-otp__slot[data-active] { border-color: hsl(var(--destructive)); box-shadow: var(--shadow-focus-destructive); }
+.kx-input-otp:has(.kx-input-otp__input:disabled) { opacity: var(--opacity-disabled); cursor: not-allowed; }
+.kx-input-otp__caret { position: absolute; inline-size: 1px; block-size: 1rem; background-color: hsl(var(--foreground)); pointer-events: none; }
+.kx-input-otp__separator { inline-size: var(--spacing-3); block-size: 2px; border-radius: var(--radius-full); background-color: hsl(var(--muted-foreground)); }
+/* the real input: over the cells, receiving every keystroke, paste and autofill, painting nothing itself */
+.kx-input-otp__input {
+  position: absolute;
+  inset: 0;
+  inline-size: 100%;
+  block-size: 100%;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: transparent;
+  caret-color: transparent;
+  font: var(--text-body-md);
+  letter-spacing: -0.5em;
+  outline: none;
+}
+.kx-input-otp__input::selection { background: transparent; }
+.kx-input-otp__input:disabled { cursor: not-allowed; }
+
+/* ── rating ─────────────────────────────────────────────────────────────── */
+/* Each star is a real radio, visually hidden and kept in the tab order, painted through its label (KxRating).
+   The stars are rem-sized, so they grow with the reader's text; a chosen or previewed star is `--warning`
+   filled, an empty one a `--muted-foreground` outline (3:1 against the page, SC 1.4.11). */
+.kx-rating { display: inline-flex; align-items: center; gap: 0.125rem; }
+.kx-rating__item { position: relative; display: inline-flex; padding: 0.125rem; border-radius: var(--radius-sm); }
+label.kx-rating__item { cursor: pointer; }
+.kx-rating__radio { position: absolute; inset: 0; margin: 0; opacity: 0; pointer-events: none; }
+.kx-rating__star { inline-size: 1.25rem; block-size: 1.25rem; fill: transparent; stroke: hsl(var(--muted-foreground)); stroke-width: 1.5; stroke-linejoin: round; }
+.kx-rating--sm .kx-rating__star { inline-size: 1rem; block-size: 1rem; }
+.kx-rating--lg .kx-rating__star { inline-size: 1.5rem; block-size: 1.5rem; }
+.kx-rating__star--on { fill: hsl(var(--warning)); stroke: hsl(var(--warning)); }
+.kx-rating__item:has(.kx-rating__radio:focus-visible) { box-shadow: var(--shadow-focus); }
+.kx-rating[aria-disabled='true'] { opacity: var(--opacity-disabled); }
+.kx-rating[aria-disabled='true'] .kx-rating__item { cursor: not-allowed; }
 
 /* ── field ──────────────────────────────────────────────────────────────── */
 .kx-field { display: flex; flex-direction: column; gap: var(--spacing-2); }
@@ -718,9 +1073,10 @@
   cursor: pointer;
   transition: background-color var(--duration-fast) var(--easing-standard), color var(--duration-fast) var(--easing-standard);
 }
-.kx-toggle--sm { min-inline-size: var(--spacing-8); block-size: var(--spacing-8); padding-inline: var(--spacing-2); }
-.kx-toggle--md { min-inline-size: var(--spacing-10); block-size: var(--spacing-10); padding-inline: var(--spacing-3); }
-.kx-toggle--lg { min-inline-size: var(--spacing-12); block-size: var(--spacing-12); padding-inline: var(--spacing-4); }
+/* the square is rem (--spacing-8 / 10 / 12 at the default text size): it holds the label, so it grows with it */
+.kx-toggle--sm { min-inline-size: 2rem; block-size: 2rem; padding-inline: var(--spacing-2); }
+.kx-toggle--md { min-inline-size: 2.5rem; block-size: 2.5rem; padding-inline: var(--spacing-3); }
+.kx-toggle--lg { min-inline-size: 3rem; block-size: 3rem; padding-inline: var(--spacing-4); }
 .kx-toggle--outline { border-color: hsl(var(--input)); }
 .kx-toggle:hover { background-color: hsl(var(--muted)); }
 .kx-toggle:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
@@ -739,10 +1095,13 @@
 /* ── segmented control ──────────────────────────────────────────────────── */
 .kx-segmented {
   display: inline-flex;
+  flex-wrap: wrap;
+  max-inline-size: 100%;
   align-items: stretch;
   padding: var(--spacing-1);
   border-radius: var(--radius-md);
-  background-color: hsl(var(--muted));
+  /* an inset well; the chosen segment is a small raised surface on it (TOKENS.md, "Surface model") */
+  background-color: hsl(var(--surface-grouped));
 }
 .kx-segmented__item { display: inline-flex; }
 .kx-segmented__radio { position: absolute; opacity: 0; pointer-events: none; }
@@ -757,12 +1116,27 @@
   font-weight: var(--font-weight-medium);
   color: hsl(var(--muted-foreground));
   cursor: pointer;
-  transition: background-color var(--duration-fast) var(--easing-standard), color var(--duration-fast) var(--easing-standard);
+  transition:
+    background-color var(--duration-fast) var(--easing-standard),
+    color var(--duration-fast) var(--easing-standard),
+    box-shadow var(--duration-fast) var(--easing-standard);
 }
+/* chosen: surface + half-strength edge + depth + text — the Card's raised contract at control scale, so it
+   sits ABOVE its track in both themes (a `--background` segment sank below a dark `--muted` track) */
 .kx-segmented__radio:checked + .kx-segmented__label {
-  background-color: hsl(var(--background));
+  background-color: hsl(var(--card));
+  color: hsl(var(--foreground));
+  box-shadow: inset 0 0 0 1px hsl(var(--border) / 0.5), var(--shadow-sm);
+}
+@media (hover: hover) {
+  .kx-segmented__radio:enabled:not(:checked) + .kx-segmented__label:hover {
+    background-color: hsl(var(--foreground) / 0.08);
+    color: hsl(var(--foreground));
+  }
+}
+.kx-segmented__radio:enabled:not(:checked) + .kx-segmented__label:active {
+  background-color: hsl(var(--foreground) / 0.14);
   color: hsl(var(--foreground));
-  box-shadow: var(--shadow-sm);
 }
 .kx-segmented__radio:focus-visible + .kx-segmented__label { box-shadow: var(--shadow-focus); }
 .kx-segmented__radio:disabled + .kx-segmented__label { opacity: var(--opacity-disabled); cursor: not-allowed; }
@@ -778,5 +1152,1268 @@
   .kx-textarea,
   .kx-native-select,
   .kx-radio__input,
+  .kx-checkbox,
+  .kx-switch,
+  .kx-switch__thumb,
+  .kx-input,
+  .kx-number-input,
+  .kx-password-input,
+  .kx-input-group,
+  .kx-input-group__button,
+  .kx-input-otp__slot,
+  .kx-tab,
   .kx-tag__remove { transition: none; }
 }
+
+/* ══ content wave ═════════════════════════════════════════════════════════
+   banner · button group · circular progress · code block · description list
+   fab · image · inform · list · marquee · page header · timeline
+
+   Logical properties throughout (padding-inline, inset-inline-start, margin-inline)
+   so every surface mirrors under dir="rtl" without a second rule.
+   ════════════════════════════════════════════════════════════════════════ */
+
+/* ── banner + inform: one intent palette, two containers ────────────────── */
+.kx-banner,
+.kx-inform {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-2);
+  font: var(--text-body-sm);
+  font-family: var(--font-family-sans);
+}
+.kx-banner {
+  width: 100%;
+  border-block-end: var(--border-width-default) solid transparent;
+  padding: var(--spacing-3) var(--spacing-4);
+}
+.kx-banner--sticky { position: sticky; inset-block-start: 0; z-index: var(--z-index-sticky, 40); }
+.kx-inform { border-radius: var(--radius-md); padding: var(--spacing-3); }
+
+.kx-banner--information { background-color: hsl(var(--info) / 0.1); color: hsl(var(--on-info-container)); border-color: hsl(var(--info) / 0.2); }
+.kx-banner--warning     { background-color: hsl(var(--warning) / 0.15); color: hsl(var(--warning)); border-color: hsl(var(--warning) / 0.25); }
+.kx-banner--success     { background-color: hsl(var(--success) / 0.15); color: hsl(var(--success)); border-color: hsl(var(--success) / 0.25); }
+.kx-banner--error       { background-color: hsl(var(--destructive) / 0.1); color: hsl(var(--destructive)); border-color: hsl(var(--destructive) / 0.2); }
+.kx-banner--action      { background-color: hsl(var(--foreground)); color: hsl(var(--background)); }
+.kx-inform--information { background-color: hsl(var(--info) / 0.1); color: hsl(var(--on-info-container)); }
+.kx-inform--warning     { background-color: hsl(var(--warning) / 0.15); color: hsl(var(--warning)); }
+.kx-inform--success     { background-color: hsl(var(--success) / 0.15); color: hsl(var(--success)); }
+.kx-inform--error       { background-color: hsl(var(--destructive) / 0.1); color: hsl(var(--destructive)); }
+.kx-inform--action      { background-color: hsl(var(--foreground)); color: hsl(var(--background)); }
+
+.kx-banner__body {
+  display: flex;
+  flex: 1 1 0%;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-1) var(--spacing-3);
+  min-width: 0;
+  margin-inline: auto;
+  max-width: 56rem;
+  text-align: center;
+}
+.kx-inform__body { flex: 1 1 0%; min-width: 0; }
+.kx-inform__message { margin: 0; }
+.kx-inform__message:not(:only-child) { margin-block-end: var(--spacing-2); }
+
+.kx-banner [kxBannerAction],
+.kx-inform [kxInformAction] {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  background: none;
+  border: 0;
+  padding: 0;
+  color: inherit;
+  font: var(--text-label-md);
+  font-weight: var(--font-weight-medium);
+  text-underline-offset: 2px;
+  cursor: pointer;
+}
+.kx-banner [kxBannerAction]:hover,
+.kx-banner [kxBannerAction]:focus-visible,
+.kx-inform [kxInformAction]:hover,
+.kx-inform [kxInformAction]:focus-visible { text-decoration: underline; outline: none; }
+
+.kx-banner__dismiss,
+.kx-inform__dismiss {
+  flex-shrink: 0;
+  background: none;
+  border: 0;
+  padding: 2px;
+  margin: -2px;
+  border-radius: 2px;
+  color: inherit;
+  opacity: var(--opacity-muted);
+  cursor: pointer;
+  transition: opacity var(--duration-fast) var(--easing-standard);
+}
+.kx-banner__dismiss:hover,
+.kx-banner__dismiss:focus-visible,
+.kx-inform__dismiss:hover,
+.kx-inform__dismiss:focus-visible { opacity: var(--opacity-visible); outline: var(--border-width-default) solid currentColor; }
+@media (prefers-reduced-motion: reduce) {
+  .kx-banner__dismiss, .kx-inform__dismiss { transition: none; }
+}
+
+/* ── button group ───────────────────────────────────────────────────────── */
+.kx-button-group { display: flex; width: fit-content; align-items: stretch; }
+.kx-button-group > * { position: relative; }
+.kx-button-group > *:focus-visible, .kx-button-group > *:focus-within { z-index: 10; }
+.kx-button-group--horizontal { flex-direction: row; }
+/* -1px on the inline start of every child but the first: one shared border, not two stacked. */
+.kx-button-group--horizontal > *:not(:first-child) { margin-inline-start: -1px; border-start-start-radius: 0; border-end-start-radius: 0; }
+.kx-button-group--horizontal > *:not(:last-child) { border-start-end-radius: 0; border-end-end-radius: 0; }
+.kx-button-group--vertical { flex-direction: column; }
+.kx-button-group--vertical > *:not(:first-child) { margin-block-start: -1px; border-start-start-radius: 0; border-start-end-radius: 0; }
+.kx-button-group--vertical > *:not(:last-child) { border-end-start-radius: 0; border-end-end-radius: 0; }
+
+.kx-button-group-separator { flex-shrink: 0; align-self: stretch; background-color: hsl(var(--border)); }
+.kx-button-group-separator--vertical { width: 1px; margin-block: var(--spacing-1); }
+.kx-button-group-separator--horizontal { height: 1px; margin-inline: var(--spacing-1); }
+
+.kx-button-group-text {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  border: var(--border-width-default) solid hsl(var(--input));
+  border-radius: var(--radius-control);
+  background-color: hsl(var(--muted));
+  padding-inline: var(--spacing-3);
+  color: hsl(var(--foreground));
+  font: var(--text-label-md);
+}
+
+/* ── circular progress ──────────────────────────────────────────────────── */
+.kx-circular-progress { position: relative; display: inline-grid; place-items: center; font-family: var(--font-family-sans); }
+.kx-circular-progress svg { grid-area: 1 / 1; transform: rotate(-90deg); }
+.kx-circular-progress__track { stroke: hsl(var(--muted)); }
+.kx-circular-progress__indicator {
+  stroke: hsl(var(--action));
+  transition: stroke-dashoffset var(--duration-base) var(--easing-standard);
+}
+.kx-circular-progress__value { grid-area: 1 / 1; font: var(--text-label-sm); color: hsl(var(--foreground)); }
+/* No value means indeterminate: spin the quarter arc rather than show a bar stuck at zero. */
+.kx-circular-progress:not([aria-valuenow]) svg { animation: kx-spin 1s linear infinite; }
+@media (prefers-reduced-motion: reduce) {
+  .kx-circular-progress__indicator { transition: none; }
+  /* 3s, as the spinner: it keeps turning so the page does not read as hung, but no faster than the 3s
+     reduced-motion floor (check:angular-browser, "reduced motion") — it was 2.4s */
+  .kx-circular-progress:not([aria-valuenow]) svg { animation-duration: 3s; }
+}
+
+/* ── code block ─────────────────────────────────────────────────────────── */
+.kx-code-block {
+  display: block;
+  overflow: hidden;
+  border: var(--border-width-default) solid hsl(var(--input));
+  border-radius: var(--radius-md);
+  background-color: hsl(var(--muted));
+  font-family: var(--font-family-sans);
+}
+.kx-code-block__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-block-end: var(--border-width-default) solid hsl(var(--input));
+  background-color: hsl(var(--background));
+  padding-inline: var(--spacing-2);
+}
+.kx-code-block__tabs { display: flex; }
+.kx-code-block__tab {
+  border: 0;
+  border-block-end: 2px solid transparent;
+  background: none;
+  padding: var(--spacing-2) var(--spacing-3);
+  color: hsl(var(--muted-foreground));
+  font: var(--text-body-sm);
+  cursor: pointer;
+}
+.kx-code-block__tab:hover { color: hsl(var(--foreground)); }
+.kx-code-block__tab--active { border-block-end-color: hsl(var(--action)); color: hsl(var(--foreground)); }
+.kx-code-block__tab:focus-visible { outline: var(--border-width-default) solid hsl(var(--ring)); outline-offset: -2px; }
+.kx-code-block__copy {
+  border: 0;
+  background: none;
+  border-radius: 2px;
+  padding: var(--spacing-1);
+  color: hsl(var(--muted-foreground));
+  cursor: pointer;
+}
+.kx-code-block__copy:hover { color: hsl(var(--foreground)); }
+.kx-code-block__copy:focus-visible { outline: var(--border-width-default) solid currentColor; }
+/* The default glyphs, and whatever an application projects in their place (`[kxDismissIcon]`,
+   `[kxCopyIcon]` — an <svg>, or an icon component whose host wraps one). Sized here rather than on the SVG
+   so a projected replacement gets the same box without carrying a size of its own, and so a consumer
+   restyling the package can reach them. Until this rule named the projected slots, only the built-in glyph
+   was sized: a projected <svg> with no width rendered at the browser's default 300×150. */
+.kx-dismiss-glyph,
+[kxDismissIcon],
+[kxDismissIcon] > svg { width: 0.875rem; height: 0.875rem; display: block; flex-shrink: 0; }
+.kx-copy-glyph,
+[kxCopyIcon],
+[kxCopyIcon] > svg { width: 1rem; height: 1rem; display: block; flex-shrink: 0; }
+
+.kx-code-block__body { position: relative; }
+/* No filename and no tabs means no header to hold the copy button, so it sits over the code. */
+.kx-code-block__copy--floating { position: absolute; inset-block-start: var(--spacing-2); inset-inline-end: var(--spacing-2); }
+
+.kx-code-block__pre {
+  overflow-x: auto;
+  margin: 0;
+  padding: var(--spacing-4);
+  font: var(--text-body-sm);
+  font-family: var(--font-family-mono, ui-monospace, monospace);
+  color: hsl(var(--foreground));
+}
+.kx-code-block__pre:focus-visible { outline: var(--border-width-default) solid hsl(var(--ring)); outline-offset: -2px; }
+
+/* ── description list ───────────────────────────────────────────────────── */
+.kx-description-list {
+  margin: 0;
+  border: var(--border-width-default) solid hsl(var(--border));
+  border-radius: var(--radius-lg);
+  background-color: hsl(var(--muted) / 0.2);
+}
+.kx-description-list__item { display: flex; gap: var(--spacing-3); padding: var(--spacing-2) var(--spacing-3); }
+.kx-description-list__item:not(:first-child) { border-block-start: var(--border-width-default) solid hsl(var(--border)); }
+.kx-description-list__item--row { align-items: baseline; }
+.kx-description-list__item--stacked { flex-direction: column; }
+.kx-description-list__term {
+  flex-shrink: 0;
+  font-family: var(--font-family-mono, ui-monospace, monospace);
+  font-size: 0.625rem;
+  text-transform: uppercase;
+  letter-spacing: 0.14em;
+  color: hsl(var(--muted-foreground));
+}
+.kx-description-list__item--row .kx-description-list__term { width: 6rem; }
+.kx-description-list__value { margin: 0; min-width: 0; font: var(--text-body-sm); color: hsl(var(--foreground)); }
+
+/* ── fab ────────────────────────────────────────────────────────────────── */
+.kx-fab {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-2);
+  border: 0;
+  border-radius: var(--radius-full);
+  box-shadow: var(--shadow-lg);
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-weight-medium);
+  cursor: pointer;
+  transition: background-color var(--duration-fast) var(--easing-standard);
+}
+.kx-fab:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
+.kx-fab:disabled { pointer-events: none; opacity: var(--opacity-disabled); }
+.kx-fab--default { width: 3.5rem; height: 3.5rem; }
+.kx-fab--sm { width: 2.75rem; height: 2.75rem; }
+.kx-fab--extended { width: auto; padding-inline: var(--spacing-5); }
+.kx-fab--Primary { background-color: hsl(var(--action)); color: hsl(var(--action-foreground)); }
+.kx-fab--Primary:hover { background-color: hsl(var(--action) / 0.9); }
+.kx-fab--Secondary { background-color: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); }
+.kx-fab--Secondary:hover { background-color: hsl(var(--secondary) / 0.85); }
+@media (prefers-reduced-motion: reduce) { .kx-fab { transition: none; } }
+
+/* ── image ──────────────────────────────────────────────────────────────── */
+.kx-image { position: relative; display: block; inline-size: 100%; overflow: hidden; background-color: hsl(var(--muted)); aspect-ratio: var(--kx-image-ratio, 1); }
+.kx-image--rounded { border-radius: var(--radius-md); }
+.kx-image__img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  opacity: var(--opacity-hidden);
+  transition: opacity var(--duration-base) var(--easing-standard);
+}
+.kx-image__img--loaded { opacity: var(--opacity-visible); }
+.kx-image__fallback { position: absolute; inset: 0; display: grid; place-items: center; color: hsl(var(--muted-foreground)); }
+@media (prefers-reduced-motion: reduce) { .kx-image__img { transition: none; } }
+
+/* ── list ───────────────────────────────────────────────────────────────── */
+.kx-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
+.kx-list__item { display: block; }
+.kx-list__item:not(:first-child) { border-block-start: var(--border-width-default) solid hsl(var(--border)); }
+.kx-list__row {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3);
+  width: 100%;
+  padding: var(--spacing-3);
+  font-family: var(--font-family-sans);
+  text-align: start;
+}
+.kx-list__row--pressable {
+  border: 0;
+  background: none;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+/* The ring, not only the fill: the accent background is under 3:1 against the surface in dark mode, so
+   hover and focus must not rely on it alone to be perceivable. */
+.kx-list__row--pressable:hover,
+.kx-list__row--pressable:focus-visible {
+  background-color: hsl(var(--accent));
+  outline: var(--border-width-default) solid hsl(var(--ring));
+  outline-offset: -1px;
+}
+.kx-list__row--pressable:disabled { pointer-events: none; }
+.kx-list__item--disabled { opacity: var(--opacity-disabled); }
+.kx-list__leading:empty, .kx-list__trailing:empty { display: none; }
+.kx-list__leading, .kx-list__trailing { display: flex; flex-shrink: 0; align-items: center; gap: var(--spacing-2); }
+.kx-list__text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 0%; }
+.kx-list__title { font: var(--text-body-md); color: hsl(var(--foreground)); }
+.kx-list__description { font: var(--text-body-sm); color: hsl(var(--muted-foreground)); }
+
+/* ── marquee ────────────────────────────────────────────────────────────── */
+.kx-marquee { display: flex; overflow: hidden; width: 100%; }
+.kx-marquee__track { display: flex; flex-shrink: 0; animation: kx-marquee-scroll linear infinite; }
+.kx-marquee__group { display: flex; flex-shrink: 0; align-items: center; gap: var(--spacing-4); padding-inline-end: var(--spacing-4); }
+.kx-marquee--pause-on-hover:hover .kx-marquee__track { animation-play-state: paused; }
+@keyframes kx-marquee-scroll {
+  from { transform: translateX(0); }
+  to { transform: translateX(-50%); }
+}
+/* RTL: the same keyframes would scroll the wrong way, so the whole track is mirrored. */
+[dir='rtl'] .kx-marquee__track { animation-name: kx-marquee-scroll-rtl; }
+@keyframes kx-marquee-scroll-rtl {
+  from { transform: translateX(0); }
+  to { transform: translateX(50%); }
+}
+/* Continuous motion is WCAG 2.2.2's subject. With reduce, the animation stops and the strip stays
+   scrollable, so nothing becomes unreachable. */
+@media (prefers-reduced-motion: reduce) {
+  .kx-marquee { overflow-x: auto; }
+  .kx-marquee__track { animation: none; }
+  .kx-marquee__group[aria-hidden='true'] { display: none; }
+}
+
+/* ── page header ────────────────────────────────────────────────────────── */
+.kx-page-header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4);
+  border-block-end: var(--border-width-default) solid hsl(var(--border));
+  padding-block-end: var(--spacing-6);
+  font-family: var(--font-family-sans);
+}
+.kx-page-header__breadcrumb:empty { display: none; }
+.kx-page-header__breadcrumb { font: var(--text-body-sm); }
+.kx-page-header__main { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--spacing-4); }
+.kx-page-header__titles { display: flex; flex-direction: column; gap: var(--spacing-1); min-width: 0; }
+.kx-page-header__title { font: var(--text-headline-sm); font-weight: var(--font-weight-medium); color: hsl(var(--foreground)); }
+.kx-page-header__description { margin: 0; font: var(--text-body-md); color: hsl(var(--muted-foreground)); }
+.kx-page-header__actions:empty { display: none; }
+.kx-page-header__actions { display: flex; flex-shrink: 0; flex-wrap: wrap; align-items: center; gap: var(--spacing-2); }
+
+/* ── timeline ───────────────────────────────────────────────────────────── */
+.kx-timeline { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
+.kx-timeline__item { position: relative; display: flex; gap: var(--spacing-3); padding-block-end: var(--spacing-5); }
+/* The connecting line sits on the inline start edge, so it mirrors with the marker under dir="rtl". */
+.kx-timeline__item:not(:last-child)::before {
+  content: '';
+  position: absolute;
+  inset-block: 1.25rem auto;
+  height: calc(100% - 1.25rem);
+  inset-inline-start: 0.4375rem;
+  width: 1px;
+  background-color: hsl(var(--border));
+}
+.kx-timeline__marker {
+  position: relative;
+  z-index: 1;
+  flex-shrink: 0;
+  display: grid;
+  place-items: center;
+  width: 0.875rem;
+  height: 0.875rem;
+  margin-block-start: 0.375rem;
+  border-radius: var(--radius-full);
+  border: 2px solid hsl(var(--background));
+  box-sizing: content-box;
+}
+.kx-timeline__marker--default { background-color: hsl(var(--muted-foreground)); }
+.kx-timeline__marker--active { background-color: hsl(var(--action)); }
+.kx-timeline__marker--success { background-color: hsl(var(--success)); }
+.kx-timeline__marker--error { background-color: hsl(var(--destructive)); }
+.kx-timeline__content { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+.kx-timeline__title { font: var(--text-body-md); color: hsl(var(--foreground)); }
+.kx-timeline__description { font: var(--text-body-sm); color: hsl(var(--muted-foreground)); }
+
+/* ══ navigation and disclosure ═════════════════════════════════════════════
+   accordion · collapsible · breadcrumb · pagination · table of contents
+   tab bar · stepper · navigation bar · app bar · footer
+
+   One state contract for every destination (TOKENS.md, "Navigation and disclosure"):
+     rest      muted text, no surface — navigation recedes behind content
+     hover     `--foreground` text on the 8% `--foreground` layer the tabs and selection controls use
+     pressed   `:active`, the 12% layer: deeper than hover, so a press is seen before the page changes
+     current   `--foreground` text AND a shape cue (an indicator bar, an outlined raised surface, or a pill)
+               — never hue alone
+     focus     the shared `--shadow-focus` ring, which no other state draws, so focus out-draws hover
+     disabled  `--opacity-disabled`, and no answer to the pointer
+   Colour, background and shadow transition over `--duration-fast`; nothing moves or resizes, and under
+   reduced motion nothing transitions (below). Logical properties throughout, so every row and indent
+   mirrors with the direction its own element resolves to.
+   ════════════════════════════════════════════════════════════════════════ */
+
+/* ── disclosure: the shared expand / collapse ───────────────────────────── */
+/* A one-row grid whose track goes 0fr → 1fr: the block size interpolates to the content's natural height
+   with no measured height variable (disclosure.ts, "Motion"). Visibility switches on at the start of an
+   expansion and off at the end of a collapse, so closed content is out of the tab order and the
+   accessibility tree, but is seen shrinking rather than vanishing. */
+.kx-disclosure {
+  display: grid;
+  grid-template-rows: 0fr;
+  visibility: hidden;
+  transition:
+    grid-template-rows var(--duration-fast) var(--easing-exit),
+    visibility 0s linear var(--duration-fast);
+}
+.kx-disclosure[data-state='open'] {
+  grid-template-rows: 1fr;
+  visibility: visible;
+  transition:
+    grid-template-rows var(--duration-fast) var(--easing-enter),
+    visibility 0s linear 0s;
+}
+/* clip, not hidden: the height must clip while it animates, but a focus ring on content flush with the edge
+   (4px: --shadow-focus's outer spread) must not be cut */
+.kx-disclosure__body { min-block-size: 0; overflow: clip; overflow-clip-margin: 4px; }
+
+/* ── accordion ──────────────────────────────────────────────────────────── */
+/* Items are divided, not boxed: one rule between them, no border around the whole, no shadow. */
+.kx-accordion { display: block; font-family: var(--font-family-sans); }
+.kx-accordion__item { display: block; border-block-end: var(--border-width-default) solid hsl(var(--border)); }
+.kx-accordion__heading { display: flex; margin: 0; }
+.kx-accordion__trigger {
+  display: flex;
+  flex: 1 1 auto;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-3);
+  min-block-size: 2.75rem;
+  margin: 0;
+  padding: var(--spacing-3) var(--spacing-2);
+  border: 0;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: hsl(var(--foreground));
+  font: var(--text-label-lg);
+  font-weight: var(--font-weight-medium);
+  text-align: start;
+  cursor: pointer;
+  transition:
+    background-color var(--duration-fast) var(--easing-standard),
+    box-shadow var(--duration-fast) var(--easing-standard);
+}
+.kx-accordion__label { min-inline-size: 0; overflow-wrap: break-word; }
+@media (hover: hover) {
+  .kx-accordion__trigger:enabled:not([aria-disabled='true']):hover { background-color: hsl(var(--foreground) / 0.08); }
+}
+.kx-accordion__trigger:enabled:not([aria-disabled='true']):active { background-color: hsl(var(--foreground) / 0.12); }
+.kx-accordion__trigger:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
+.kx-accordion__trigger[aria-disabled='true'] { cursor: default; }
+.kx-accordion__trigger:disabled { opacity: var(--opacity-disabled); cursor: not-allowed; }
+.kx-accordion__chevron {
+  flex-shrink: 0;
+  inline-size: 1rem;
+  block-size: 1rem;
+  color: hsl(var(--muted-foreground));
+  transition: transform var(--duration-fast) var(--easing-standard);
+}
+.kx-accordion__trigger[aria-expanded='true'] .kx-accordion__chevron { transform: rotate(180deg); color: hsl(var(--foreground)); }
+.kx-accordion__inner {
+  padding: 0 var(--spacing-2) var(--spacing-4);
+  font: var(--text-body-md);
+  color: hsl(var(--muted-foreground));
+}
+
+/* ── collapsible ────────────────────────────────────────────────────────── */
+.kx-collapsible { display: block; }
+.kx-collapsible__content > .kx-disclosure__body > :first-child { margin-block-start: var(--spacing-2); }
+
+/* ── breadcrumb ─────────────────────────────────────────────────────────── */
+.kx-breadcrumb { font-family: var(--font-family-sans); }
+.kx-breadcrumb__list {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-1) var(--spacing-2);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  font: var(--text-body-sm);
+  color: hsl(var(--muted-foreground));
+}
+.kx-breadcrumb__item { display: inline-flex; align-items: center; min-inline-size: 0; overflow-wrap: break-word; }
+.kx-breadcrumb__link {
+  border-radius: var(--radius-sm);
+  color: hsl(var(--muted-foreground));
+  text-decoration: underline;
+  text-decoration-color: transparent;
+  text-underline-offset: 3px;
+  transition:
+    color var(--duration-fast) var(--easing-standard),
+    text-decoration-color var(--duration-fast) var(--easing-standard),
+    box-shadow var(--duration-fast) var(--easing-standard);
+}
+@media (hover: hover) {
+  .kx-breadcrumb__link:hover { color: hsl(var(--foreground)); text-decoration-color: currentColor; }
+}
+.kx-breadcrumb__link:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
+/* current: full-strength text AND weight — the one crumb that is not a link reads as where you are */
+.kx-breadcrumb__page { color: hsl(var(--foreground)); font-weight: var(--font-weight-medium); }
+.kx-breadcrumb__separator { display: inline-flex; font-size: 1.25em; line-height: 1; color: hsl(var(--muted-foreground)); }
+
+/* ── shared destination: pagination, app bar ────────────────────────────── */
+.kx-pagination__link,
+.kx-app-bar__link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-1);
+  min-block-size: 2.25rem;
+  margin: 0;
+  border: var(--border-width-default) solid transparent;
+  border-radius: var(--radius-control);
+  background: transparent;
+  color: hsl(var(--muted-foreground));
+  font: var(--text-label-lg);
+  font-weight: var(--font-weight-medium);
+  text-decoration: none;
+  white-space: nowrap;
+  cursor: pointer;
+  transition:
+    color var(--duration-fast) var(--easing-standard),
+    background-color var(--duration-fast) var(--easing-standard),
+    border-color var(--duration-fast) var(--easing-standard),
+    box-shadow var(--duration-fast) var(--easing-standard);
+}
+@media (hover: hover) {
+  :is(.kx-pagination__link, .kx-app-bar__link):not(:disabled, [aria-disabled='true']):hover {
+    color: hsl(var(--foreground));
+    background-color: hsl(var(--foreground) / 0.08);
+  }
+}
+:is(.kx-pagination__link, .kx-app-bar__link):not(:disabled, [aria-disabled='true']):active { background-color: hsl(var(--foreground) / 0.12); }
+:is(.kx-pagination__link, .kx-app-bar__link):focus-visible { outline: none; box-shadow: var(--shadow-focus); }
+:is(.kx-pagination__link, .kx-app-bar__link):is(:disabled, [aria-disabled='true']) { opacity: var(--opacity-disabled); cursor: not-allowed; }
+
+/* ── pagination ─────────────────────────────────────────────────────────── */
+.kx-pagination { display: flex; justify-content: center; inline-size: 100%; font-family: var(--font-family-sans); }
+.kx-pagination__content { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--spacing-1); margin: 0; padding: 0; list-style: none; }
+.kx-pagination__item { display: flex; }
+.kx-pagination__link { min-inline-size: 2.25rem; padding-inline: var(--spacing-2); }
+.kx-pagination__step { padding-inline: var(--spacing-3); }
+.kx-pagination__glyph { font-size: 1.25em; line-height: 1; }
+/* current: an outlined surface — an edge at 3:1 (the field edge, `--muted-foreground` at 80%), a fill and a
+   small lift; not a colour. `--input` (2.2:1 light, 2.7:1 dark) measured under SC 1.4.11's 3:1. */
+.kx-pagination__link[aria-current='page'] {
+  border-color: hsl(var(--muted-foreground) / 0.8);
+  background-color: hsl(var(--background));
+  color: hsl(var(--foreground));
+  box-shadow: var(--shadow-sm);
+}
+.kx-pagination__ellipsis { display: inline-flex; align-items: center; justify-content: center; min-inline-size: 2.25rem; min-block-size: 2.25rem; color: hsl(var(--muted-foreground)); }
+
+/* ── table of contents ──────────────────────────────────────────────────── */
+.kx-toc { font-family: var(--font-family-sans); }
+.kx-toc__list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; border-inline-start: var(--border-width-default) solid hsl(var(--border)); }
+.kx-toc__link {
+  display: block;
+  margin-inline-start: -1px;
+  padding-block: var(--spacing-1);
+  /* each level indents 0.75rem further from the inline start; rem, so the indent grows with the text */
+  padding-inline: calc(0.75rem + var(--kx-toc-level, 0) * 0.75rem) var(--spacing-2);
+  border-inline-start: var(--border-width-focus) solid transparent;
+  border-start-end-radius: var(--radius-sm);
+  border-end-end-radius: var(--radius-sm);
+  font: var(--text-body-sm);
+  color: hsl(var(--muted-foreground));
+  text-decoration: none;
+  overflow-wrap: break-word;
+  transition:
+    color var(--duration-fast) var(--easing-standard),
+    background-color var(--duration-fast) var(--easing-standard),
+    border-color var(--duration-fast) var(--easing-standard),
+    box-shadow var(--duration-fast) var(--easing-standard);
+}
+@media (hover: hover) {
+  .kx-toc__link:not([aria-current]):hover { color: hsl(var(--foreground)); background-color: hsl(var(--foreground) / 0.08); }
+}
+.kx-toc__link:not([aria-current]):active { background-color: hsl(var(--foreground) / 0.12); }
+.kx-toc__link:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
+/* current: the 2px `--primary` bar on the inline-start edge, foreground text, medium weight */
+.kx-toc__link[aria-current] { border-inline-start-color: hsl(var(--primary)); color: hsl(var(--foreground)); font-weight: var(--font-weight-medium); }
+
+/* ── tab bar ────────────────────────────────────────────────────────────── */
+.kx-tab-bar {
+  display: flex;
+  align-items: stretch;
+  inline-size: 100%;
+  border-block-start: var(--border-width-default) solid hsl(var(--border));
+  background-color: hsl(var(--background));
+  font-family: var(--font-family-sans);
+}
+.kx-tab-bar__item {
+  display: flex;
+  flex: 1 1 0%;
+  min-inline-size: 0;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-1);
+  margin: 0;
+  padding: var(--spacing-2) var(--spacing-1);
+  border: 0;
+  border-radius: var(--radius-control);
+  background: transparent;
+  color: hsl(var(--muted-foreground));
+  font: var(--text-label-md);
+  font-weight: var(--font-weight-medium);
+  text-align: center;
+  text-decoration: none;
+  cursor: pointer;
+  transition:
+    color var(--duration-fast) var(--easing-standard),
+    box-shadow var(--duration-fast) var(--easing-standard);
+}
+.kx-tab-bar__icon {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 4rem;
+  max-inline-size: 100%;
+  block-size: 2rem;
+  border-radius: var(--radius-full);
+  transition: background-color var(--duration-fast) var(--easing-standard);
+}
+.kx-tab-bar__icon > :not(.kx-tab-bar__badge) { inline-size: 1.5rem; block-size: 1.5rem; }
+.kx-tab-bar__label { max-inline-size: 100%; overflow-wrap: break-word; }
+.kx-tab-bar__badge {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-end: 0.75rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-inline-size: 1.125rem;
+  block-size: 1.125rem;
+  padding-inline: 0.25rem;
+  border-radius: var(--radius-full);
+  background-color: hsl(var(--destructive));
+  color: hsl(var(--destructive-foreground));
+  font: var(--text-label-sm);
+  font-weight: var(--font-weight-medium);
+}
+@media (hover: hover) {
+  .kx-tab-bar__item:not([aria-current], :disabled, [aria-disabled='true']):hover { color: hsl(var(--foreground)); }
+  .kx-tab-bar__item:not([aria-current], :disabled, [aria-disabled='true']):hover .kx-tab-bar__icon { background-color: hsl(var(--foreground) / 0.08); }
+}
+.kx-tab-bar__item:not(:disabled, [aria-disabled='true']):active .kx-tab-bar__icon { background-color: hsl(var(--foreground) / 0.12); }
+.kx-tab-bar__item:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
+/* current: full-strength label, an action-coloured icon AND a pill behind it. The label is `--foreground`, not
+   `--action`: in dark, `--action` text (7.9:1) is weaker than the resting `--muted-foreground` (9.0:1), so the
+   current destination would read quieter than the others. */
+.kx-tab-bar__item[aria-current='page'] { color: hsl(var(--foreground)); }
+.kx-tab-bar__item[aria-current='page'] .kx-tab-bar__icon { color: hsl(var(--action)); background-color: hsl(var(--action) / 0.14); }
+.kx-tab-bar__item:is(:disabled, [aria-disabled='true']) { opacity: var(--opacity-disabled); cursor: not-allowed; }
+
+/* ── stepper ────────────────────────────────────────────────────────────── */
+.kx-stepper { display: flex; margin: 0; padding: 0; list-style: none; font-family: var(--font-family-sans); }
+.kx-stepper--horizontal { flex-wrap: wrap; align-items: flex-start; inline-size: 100%; }
+.kx-stepper--vertical { flex-direction: column; }
+.kx-stepper__step { display: flex; min-inline-size: 0; }
+.kx-stepper--horizontal .kx-stepper__step { flex: 1 1 0%; flex-direction: column; align-items: center; gap: var(--spacing-2); text-align: center; }
+.kx-stepper--vertical .kx-stepper__step { gap: var(--spacing-3); }
+.kx-stepper__track { display: flex; align-items: center; }
+.kx-stepper--horizontal .kx-stepper__track { inline-size: 100%; justify-content: center; position: relative; }
+.kx-stepper--vertical .kx-stepper__track { flex-direction: column; align-self: stretch; }
+.kx-stepper__marker {
+  position: relative;
+  z-index: 1;
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  inline-size: 1.75rem;
+  block-size: 1.75rem;
+  border: var(--border-width-default) solid hsl(var(--input));
+  border-radius: var(--radius-full);
+  background-color: hsl(var(--background));
+  color: hsl(var(--muted-foreground));
+  font: var(--text-label-md);
+  font-weight: var(--font-weight-medium);
+}
+.kx-stepper__marker > svg { inline-size: 1rem; block-size: 1rem; }
+/* complete: a filled action disc with a check; current: a 2px action ring around the number */
+.kx-stepper__step[data-status='complete'] .kx-stepper__marker { border-color: hsl(var(--action)); background-color: hsl(var(--action)); color: hsl(var(--action-foreground)); }
+.kx-stepper__step[data-status='current'] .kx-stepper__marker { border: var(--border-width-focus) solid hsl(var(--action)); color: hsl(var(--action)); }
+/* the connector runs from this marker to the next one, on the inline axis or the block axis */
+.kx-stepper__connector { background-color: hsl(var(--border)); }
+.kx-stepper__step[data-status='complete'] .kx-stepper__connector { background-color: hsl(var(--action)); }
+/* Horizontal, each step draws its own halves of the line — marker to its inline-end edge, and (after the first)
+   its inline-start edge to the marker — so nothing reaches into a neighbour's box, and a step's box holds
+   everything it paints, at any text size. The leading half is coloured once this step is reached. */
+.kx-stepper--horizontal .kx-stepper__connector { position: absolute; inset-inline-start: calc(50% + 0.875rem + var(--spacing-1)); inset-inline-end: 0; inset-block-start: 50%; block-size: 1px; }
+.kx-stepper--horizontal .kx-stepper__step:not(:first-child) .kx-stepper__track::before {
+  content: '';
+  position: absolute;
+  inset-inline-start: 0;
+  inset-inline-end: calc(50% + 0.875rem + var(--spacing-1));
+  inset-block-start: 50%;
+  block-size: 1px;
+  background-color: hsl(var(--border));
+}
+.kx-stepper--horizontal .kx-stepper__step:is([data-status='complete'], [data-status='current']):not(:first-child) .kx-stepper__track::before { background-color: hsl(var(--action)); }
+.kx-stepper--vertical .kx-stepper__connector { flex: 1 1 auto; inline-size: 1px; min-block-size: var(--spacing-6); margin-block: var(--spacing-1); }
+.kx-stepper__text { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; overflow-wrap: break-word; }
+.kx-stepper--horizontal .kx-stepper__text { padding-inline: var(--spacing-1); }
+.kx-stepper--vertical .kx-stepper__text { padding-block-end: var(--spacing-6); }
+.kx-stepper__label { font: var(--text-label-lg); font-weight: var(--font-weight-medium); color: hsl(var(--foreground)); }
+.kx-stepper__step[data-status='upcoming'] .kx-stepper__label { color: hsl(var(--muted-foreground)); }
+.kx-stepper__description { font: var(--text-body-sm); color: hsl(var(--muted-foreground)); }
+/* A horizontal stepper reflows into a list when its own width is under 20em of its own text — a phone, or any
+   width once the reader doubles the text size — instead of breaking its labels mid-word. em, not px, so the
+   switch follows the text size; a container query, so it follows the space the stepper is given. The
+   connectors go: list order and the markers carry the sequence. */
+.kx-stepper--horizontal { container-type: inline-size; }
+@container (max-width: 20em) {
+  .kx-stepper--horizontal .kx-stepper__step { flex: 1 1 100%; flex-direction: row; align-items: flex-start; gap: var(--spacing-3); text-align: start; padding-block-end: var(--spacing-3); }
+  .kx-stepper--horizontal .kx-stepper__track { inline-size: auto; }
+  .kx-stepper--horizontal .kx-stepper__connector,
+  .kx-stepper--horizontal .kx-stepper__track::before { display: none; }
+}
+
+/* ── navigation bar ─────────────────────────────────────────────────────── */
+/* Wraps rather than squeezing: when the actions leave the titles less than about five characters (two text
+   actions at 200% text on a phone), the actions move to a second row at the inline end instead of the title
+   being broken one letter per line (found composing it with a sheet and a drawer, Wave C1). */
+.kx-navigation-bar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-2);
+  inline-size: 100%;
+  min-block-size: 3.5rem;
+  padding: var(--spacing-2);
+  border-block-end: var(--border-width-default) solid hsl(var(--border));
+  background-color: hsl(var(--background));
+  font-family: var(--font-family-sans);
+}
+.kx-navigation-bar__leading { display: flex; flex-shrink: 0; align-items: center; min-inline-size: 2.25rem; }
+.kx-navigation-bar__leading:empty { min-inline-size: 0; }
+.kx-navigation-bar__back {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 2.25rem;
+  block-size: 2.25rem;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-full);
+  background: transparent;
+  color: hsl(var(--foreground));
+  cursor: pointer;
+  transition:
+    background-color var(--duration-fast) var(--easing-standard),
+    box-shadow var(--duration-fast) var(--easing-standard);
+}
+.kx-navigation-bar__glyph { font-size: 1.75rem; line-height: 1; transform: translateY(-0.06em); }
+@media (hover: hover) {
+  .kx-navigation-bar__back:hover { background-color: hsl(var(--foreground) / 0.08); }
+}
+.kx-navigation-bar__back:active { background-color: hsl(var(--foreground) / 0.12); }
+.kx-navigation-bar__back:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
+.kx-navigation-bar__titles { display: flex; flex: 1 1 5em; flex-direction: column; min-inline-size: 0; overflow-wrap: break-word; }
+.kx-navigation-bar__title { font: var(--text-body-lg); font-weight: var(--font-weight-medium); color: hsl(var(--foreground)); }
+.kx-navigation-bar__info { font: var(--text-body-sm); color: hsl(var(--muted-foreground)); }
+.kx-navigation-bar__actions { display: flex; flex-shrink: 0; align-items: center; gap: var(--spacing-1); margin-inline-start: auto; }
+.kx-navigation-bar__actions:empty { display: none; }
+
+/* ── app bar ────────────────────────────────────────────────────────────── */
+/* A grid, so the one <nav> can sit inline between brand and actions on a wide screen and span a row of its
+   own under the bar on a narrow one — without a second copy of the links. The DOM (and so Tab) order is brand,
+   menu button, nav, actions, and the narrow layout follows it: the button ends the first row, the opened links
+   come under it, and the actions take the last row — so focus never moves backwards across the screen. */
+.kx-app-bar {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-areas: 'brand toggle' 'nav nav' 'actions actions';
+  align-items: center;
+  column-gap: var(--spacing-3);
+  inline-size: 100%;
+  padding-inline: var(--spacing-4);
+  border-block-end: var(--border-width-default) solid hsl(var(--border));
+  background-color: hsl(var(--background));
+  font-family: var(--font-family-sans);
+}
+.kx-app-bar--sticky { position: sticky; inset-block-start: 0; z-index: var(--z-index-sticky); }
+.kx-app-bar__brand {
+  grid-area: brand;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-block-size: 3.5rem;
+  min-inline-size: 0;
+  border-radius: var(--radius-sm);
+  color: hsl(var(--foreground));
+  font: var(--text-body-lg);
+  font-weight: var(--font-weight-semibold);
+  text-decoration: none;
+  overflow-wrap: break-word;
+}
+a.kx-app-bar__brand:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
+.kx-app-bar__actions { grid-area: actions; display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-2); padding-block-end: var(--spacing-2); }
+.kx-app-bar__toggle {
+  grid-area: toggle;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 2.25rem;
+  block-size: 2.25rem;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-control);
+  background: transparent;
+  color: hsl(var(--foreground));
+  cursor: pointer;
+  transition:
+    background-color var(--duration-fast) var(--easing-standard),
+    box-shadow var(--duration-fast) var(--easing-standard);
+}
+.kx-app-bar__toggle > svg { inline-size: 1.25rem; block-size: 1.25rem; }
+@media (hover: hover) {
+  .kx-app-bar__toggle:hover { background-color: hsl(var(--foreground) / 0.08); }
+}
+.kx-app-bar__toggle:active { background-color: hsl(var(--foreground) / 0.12); }
+.kx-app-bar__toggle:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
+.kx-app-bar__toggle[aria-expanded='true'] { background-color: hsl(var(--foreground) / 0.08); }
+.kx-app-bar__nav { grid-area: nav; }
+.kx-app-bar__links { display: flex; flex-direction: column; gap: var(--spacing-1); padding-block: var(--spacing-2) var(--spacing-3); }
+.kx-app-bar__links > .kx-app-bar__link { justify-content: flex-start; padding-inline: var(--spacing-3); white-space: normal; }
+/* current: foreground text on the accent surface AND a 2px `--primary` indicator flush with the block-end edge:
+   the link's own (otherwise transparent) border plus 1px inset, because an inset shadow alone starts inside the
+   border and would float 1px above the edge */
+.kx-app-bar__link[aria-current='page'] {
+  color: hsl(var(--foreground));
+  background-color: hsl(var(--accent));
+  border-block-end-color: hsl(var(--primary));
+  box-shadow: inset 0 calc(1px - var(--border-width-focus)) 0 hsl(var(--primary));
+}
+.kx-app-bar__link[aria-current='page']:focus-visible { box-shadow: inset 0 calc(1px - var(--border-width-focus)) 0 hsl(var(--primary)), var(--shadow-focus); }
+@media (min-width: 48rem) {
+  .kx-app-bar { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: 'brand nav actions'; column-gap: var(--spacing-6); }
+  .kx-app-bar__actions { padding-block-end: 0; }
+  .kx-app-bar__toggle { display: none; }
+  /* the disclosure is a narrow-screen behaviour; wide, the links are simply there */
+  .kx-app-bar__nav.kx-disclosure { display: block; visibility: visible; transition: none; }
+  .kx-app-bar__links { flex-direction: row; flex-wrap: wrap; align-items: center; padding-block: var(--spacing-2); }
+  .kx-app-bar__links > .kx-app-bar__link { padding-inline: var(--spacing-3); white-space: nowrap; }
+}
+
+/* ── footer ─────────────────────────────────────────────────────────────── */
+.kx-footer {
+  display: block;
+  inline-size: 100%;
+  padding: var(--spacing-10) var(--spacing-6);
+  border-block-start: var(--border-width-default) solid hsl(var(--border));
+  background-color: hsl(var(--background));
+  font-family: var(--font-family-sans);
+}
+.kx-footer__columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: var(--spacing-8) var(--spacing-6); }
+.kx-footer__column { display: flex; flex-direction: column; gap: var(--spacing-3); min-inline-size: 0; }
+.kx-footer__title { font: var(--text-label-lg); font-weight: var(--font-weight-medium); color: hsl(var(--foreground)); }
+.kx-footer__links { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-2); }
+.kx-footer__link {
+  border-radius: var(--radius-sm);
+  color: hsl(var(--muted-foreground));
+  font: var(--text-body-sm);
+  text-decoration: underline;
+  text-decoration-color: transparent;
+  text-underline-offset: 3px;
+  overflow-wrap: break-word;
+  transition:
+    color var(--duration-fast) var(--easing-standard),
+    text-decoration-color var(--duration-fast) var(--easing-standard),
+    box-shadow var(--duration-fast) var(--easing-standard);
+}
+@media (hover: hover) {
+  .kx-footer__link:hover { color: hsl(var(--foreground)); text-decoration-color: currentColor; }
+}
+.kx-footer__link:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
+.kx-footer__bottom {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-3);
+  margin-block-start: var(--spacing-8);
+  padding-block-start: var(--spacing-6);
+  border-block-start: var(--border-width-default) solid hsl(var(--border));
+  font: var(--text-body-sm);
+  color: hsl(var(--muted-foreground));
+}
+
+/* Disclosure and navigation motion carries no information a reduced-motion reader needs: the expanded or
+   collapsed state, the chevron's direction and every state colour are rendered directly. */
+@media (prefers-reduced-motion: reduce) {
+  .kx-disclosure,
+  .kx-disclosure[data-state='open'],
+  .kx-accordion__trigger,
+  .kx-accordion__chevron,
+  .kx-breadcrumb__link,
+  .kx-pagination__link,
+  .kx-app-bar__link,
+  .kx-app-bar__toggle,
+  .kx-toc__link,
+  .kx-tab-bar__item,
+  .kx-tab-bar__icon,
+  .kx-navigation-bar__back,
+  .kx-footer__link { transition: none; }
+}
+
+/* ── overlays: dialog family and floating surfaces ───────────────────────── */
+/* TOKENS.md, "Overlays". Every surface here renders in the browser's top layer (overlay.ts), so none of them
+   carries a z-index: stacking is the order surfaces opened in. Both box types arrive with user-agent styles
+   (`dialog` and `[popover]` are centred, bordered, painted `Canvas`); each is reset to the token contract.
+
+   Elevation (TOKENS.md, "Elevation contract"): a floating surface is `shadow-lg`, one step above a resting
+   card's `md`, so a popover over a card reads as above it; a modal surface is `shadow-xl` over a scrim.
+
+   Motion: the open state is reached through `@starting-style` and left through `transition-behavior:
+   allow-discrete` on `display` and `overlay`, so a closing surface keeps painting for its exit while it is
+   already closed to the accessibility tree, the keyboard and the pointer. */
+
+.kx-overlay-root { display: contents; }
+
+/* modal surfaces: dialog, alert dialog, modal, sheet, drawer */
+.kx-dialog {
+  position: fixed;
+  margin: auto;
+  padding: var(--spacing-6);
+  inline-size: min(32rem, 100% - 2 * var(--spacing-4));
+  max-inline-size: none;
+  max-block-size: calc(100% - 2 * var(--spacing-4));
+  overflow: auto;
+  overscroll-behavior: contain;
+  container-type: inline-size;
+  border: var(--border-width-default) solid hsl(var(--border));
+  border-radius: var(--radius-surface);
+  background-color: hsl(var(--popover));
+  color: hsl(var(--popover-foreground));
+  box-shadow: var(--shadow-xl);
+  font-family: var(--font-family-sans);
+  outline: none;
+  /* closed, and where opening starts from */
+  opacity: 0;
+  scale: 0.95;
+  transition:
+    opacity var(--duration-instant) var(--easing-exit),
+    scale var(--duration-instant) var(--easing-exit),
+    overlay var(--duration-instant) var(--easing-exit) allow-discrete,
+    display var(--duration-instant) var(--easing-exit) allow-discrete;
+}
+.kx-dialog:not([open]) { pointer-events: none; }
+.kx-dialog[open] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4);
+  opacity: 1;
+  scale: 1;
+  transition-duration: var(--duration-fast);
+  transition-timing-function: var(--easing-enter);
+}
+@starting-style {
+  .kx-dialog[open] { opacity: 0; scale: 0.95; }
+}
+/* The scrim: the `scrim` role (black at 40% in light, 60% in dark) — not `foreground`, which is near-white in
+   dark and would lift the page behind the dialog toward the dialog's own surface instead of setting it back.
+   The role carries its own alpha. The fallback keeps a browser that does not pass custom properties through to
+   `::backdrop` drawing the light scrim rather than nothing. */
+.kx-dialog::backdrop {
+  background-color: hsl(var(--scrim, 0 0% 0% / 0.4));
+  opacity: 0;
+  transition:
+    opacity var(--duration-instant) var(--easing-exit),
+    overlay var(--duration-instant) var(--easing-exit) allow-discrete,
+    display var(--duration-instant) var(--easing-exit) allow-discrete;
+}
+.kx-dialog[open]::backdrop { opacity: 1; transition-duration: var(--duration-fast); transition-timing-function: var(--easing-enter); }
+@starting-style {
+  .kx-dialog[open]::backdrop { opacity: 0; }
+}
+
+.kx-dialog__header { display: flex; flex-direction: column; gap: var(--spacing-2); }
+.kx-dialog:has(> .kx-dialog__close) .kx-dialog__header { padding-inline-end: var(--spacing-8); }
+.kx-dialog__title { margin: 0; font: var(--text-title-dialog); color: hsl(var(--popover-foreground)); overflow-wrap: break-word; }
+.kx-dialog__description { margin: 0; font: var(--text-body-md); color: hsl(var(--muted-foreground)); overflow-wrap: break-word; }
+/* Actions toward the inline end, in DOM order. In a narrow surface they stack — in the same order, so the
+   order on screen is the order Tab takes (React reverses them visually; this does not). */
+.kx-dialog__footer {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: var(--spacing-2);
+  margin-block-start: var(--spacing-2);
+}
+@container (max-width: 24rem) {
+  .kx-dialog__footer { flex-direction: column; align-items: stretch; }
+  .kx-dialog__footer > .kx-btn { white-space: normal; }
+}
+
+/* The built-in close button: last in the DOM, drawn at the inline-end of the top edge. */
+.kx-dialog__close {
+  position: absolute;
+  inset-block-start: var(--spacing-4);
+  inset-inline-end: var(--spacing-4);
+  display: inline-grid;
+  place-items: center;
+  inline-size: 2rem;
+  block-size: 2rem;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-control);
+  background: transparent;
+  color: hsl(var(--muted-foreground));
+  cursor: pointer;
+  transition:
+    background-color var(--duration-fast) var(--easing-standard),
+    color var(--duration-fast) var(--easing-standard),
+    box-shadow var(--duration-fast) var(--easing-standard);
+}
+.kx-dialog__close svg { inline-size: 1rem; block-size: 1rem; }
+@media (hover: hover) {
+  .kx-dialog__close:hover { background-color: hsl(var(--foreground) / 0.08); color: hsl(var(--foreground)); }
+}
+.kx-dialog__close:active { background-color: hsl(var(--foreground) / 0.12); }
+.kx-dialog__close:focus-visible { outline: none; box-shadow: var(--shadow-focus); color: hsl(var(--foreground)); }
+
+/* modal: header (title + close), divider, body, divider, footer — React's Modal */
+.kx-modal { padding: 0; gap: 0; inline-size: min(30rem, 100% - 2 * var(--spacing-4)); }
+.kx-modal[open] { gap: 0; }
+.kx-modal__header {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3);
+  padding: var(--spacing-5) var(--spacing-6) var(--spacing-3);
+}
+.kx-modal__title { flex: 1; min-inline-size: 0; }
+.kx-modal__close { position: static; flex: none; }
+.kx-modal__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+  padding: var(--spacing-5) var(--spacing-6);
+  border-block: var(--border-width-default) solid hsl(var(--border));
+}
+.kx-modal__footer {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: var(--spacing-3);
+  padding: var(--spacing-4) var(--spacing-6);
+}
+@container (max-width: 24rem) {
+  .kx-modal__footer { flex-direction: column; align-items: stretch; }
+  .kx-modal__footer > .kx-btn { white-space: normal; }
+}
+
+/* sheet: a panel against one edge. `start` / `end` are logical, so the edge is chosen by the direction the
+   sheet's own element resolves to, with no direction selector anywhere. The inline sides slide by animating
+   their own logical margin (out past the edge by exactly their size); top and bottom slide by translation. */
+.kx-sheet {
+  --kx-sheet-size: min(24rem, 100% - 3rem);
+  margin: 0;
+  inset: auto;
+  max-inline-size: none;
+  max-block-size: none;
+  border-radius: 0;
+  border-width: 0;
+  opacity: 1;
+  scale: none;
+  transition:
+    margin var(--duration-base) var(--easing-exit),
+    translate var(--duration-base) var(--easing-exit),
+    overlay var(--duration-base) var(--easing-exit) allow-discrete,
+    display var(--duration-base) var(--easing-exit) allow-discrete;
+}
+.kx-sheet[open] { opacity: 1; scale: none; transition-duration: var(--duration-slow); transition-timing-function: var(--easing-enter); }
+.kx-sheet:is([data-side='start'], [data-side='end']) {
+  inset-block: 0;
+  block-size: 100%;
+  inline-size: var(--kx-sheet-size);
+  padding-block: max(var(--spacing-6), env(safe-area-inset-top)) max(var(--spacing-6), env(safe-area-inset-bottom));
+}
+.kx-sheet[data-side='end'] {
+  inset-inline-end: 0;
+  border-inline-start-width: var(--border-width-default);
+  margin-inline-end: calc(-1 * var(--kx-sheet-size));
+}
+.kx-sheet[data-side='start'] {
+  inset-inline-start: 0;
+  border-inline-end-width: var(--border-width-default);
+  margin-inline-start: calc(-1 * var(--kx-sheet-size));
+}
+.kx-sheet[data-side='end'][open] { margin-inline-end: 0; }
+.kx-sheet[data-side='start'][open] { margin-inline-start: 0; }
+@starting-style {
+  .kx-sheet[data-side='end'][open] { margin-inline-end: calc(-1 * var(--kx-sheet-size)); }
+  .kx-sheet[data-side='start'][open] { margin-inline-start: calc(-1 * var(--kx-sheet-size)); }
+}
+.kx-sheet:is([data-side='top'], [data-side='bottom']) {
+  inset-inline: 0;
+  inline-size: 100%;
+  max-block-size: 85dvh;
+}
+.kx-sheet[data-side='top'] {
+  inset-block-start: 0;
+  border-block-end-width: var(--border-width-default);
+  translate: 0 -100%;
+  padding-block-start: max(var(--spacing-6), env(safe-area-inset-top));
+}
+.kx-sheet[data-side='bottom'] {
+  inset-block-end: 0;
+  border-block-start-width: var(--border-width-default);
+  translate: 0 100%;
+  padding-block-end: max(var(--spacing-6), env(safe-area-inset-bottom));
+}
+.kx-sheet:is([data-side='top'], [data-side='bottom'])[open] { translate: 0 0; }
+@starting-style {
+  .kx-sheet[data-side='top'][open] { translate: 0 -100%; }
+  .kx-sheet[data-side='bottom'][open] { translate: 0 100%; }
+}
+
+/* drawer: a bottom sheet with rounded top corners and a grab handle */
+.kx-drawer {
+  padding-block-start: var(--spacing-3);
+  border-start-start-radius: var(--radius-xxl);
+  border-start-end-radius: var(--radius-xxl);
+}
+.kx-drawer__handle {
+  flex: none;
+  align-self: center;
+  inline-size: 6.25rem;
+  block-size: var(--spacing-2);
+  border-radius: var(--radius-full);
+  background-color: hsl(var(--muted-foreground) / 0.4);
+}
+
+/* floating surfaces: popover, hover card, tooltip — placed by overlay.ts, which publishes the room each one
+   has as --kx-available-width / --kx-available-height. Larger text grows the surface until it meets that
+   room, and then it scrolls inside itself rather than running off the screen. */
+.kx-floating {
+  position: fixed;
+  inset: auto;
+  margin: 0;
+  max-inline-size: var(--kx-available-width, calc(100vw - 2 * var(--spacing-2)));
+  max-block-size: var(--kx-available-height, calc(100vh - 2 * var(--spacing-2)));
+  overflow: auto;
+  overscroll-behavior: contain;
+  padding: var(--spacing-4);
+  border: var(--border-width-default) solid hsl(var(--border));
+  border-radius: var(--radius-control);
+  background-color: hsl(var(--popover));
+  color: hsl(var(--popover-foreground));
+  box-shadow: var(--shadow-lg);
+  font: var(--text-body-md);
+  font-family: var(--font-family-sans);
+  overflow-wrap: break-word;
+  outline: none;
+  opacity: 0;
+  translate: var(--kx-from, 0 0);
+  transition:
+    opacity var(--duration-instant) var(--easing-exit),
+    translate var(--duration-instant) var(--easing-exit),
+    overlay var(--duration-instant) var(--easing-exit) allow-discrete,
+    display var(--duration-instant) var(--easing-exit) allow-discrete;
+}
+/* where it settles from: 4px back toward its trigger, on the side it actually opened on (after direction and
+   collisions — `data-placement` is that resolved, physical side) */
+.kx-floating[data-placement='bottom'] { --kx-from: 0 -4px; }
+.kx-floating[data-placement='top'] { --kx-from: 0 4px; }
+.kx-floating[data-placement='left'] { --kx-from: 4px 0; }
+.kx-floating[data-placement='right'] { --kx-from: -4px 0; }
+.kx-floating:popover-open {
+  opacity: 1;
+  translate: 0 0;
+  transition-duration: var(--duration-fast);
+  transition-timing-function: var(--easing-enter);
+}
+@starting-style {
+  .kx-floating:popover-open { opacity: 0; translate: var(--kx-from, 0 0); }
+}
+.kx-popover { inline-size: 18rem; }
+.kx-hover-card { inline-size: 16rem; }
+/* content stacks with the token gap; the surface owns the spacing, so its children carry no margins of their own */
+.kx-popover:popover-open,
+.kx-hover-card:popover-open { display: flex; flex-direction: column; gap: var(--spacing-2); }
+.kx-popover > *,
+.kx-hover-card > * { margin: 0; }
+/* The tooltip is the inverse surface (`action`), small and quick: it labels, it does not hold content. Its
+   transparent edge costs nothing here and becomes a visible outline under a forced palette, where its fill is
+   flattened to Canvas and the edge is the only thing that says where it is. */
+.kx-tooltip {
+  inline-size: max-content;
+  max-inline-size: min(20rem, var(--kx-available-width, 20rem));
+  padding: var(--spacing-1) var(--spacing-3);
+  border-color: transparent;
+  background-color: hsl(var(--action));
+  color: hsl(var(--action-foreground));
+  box-shadow: none;
+  font: var(--text-body-sm);
+  font-family: var(--font-family-sans);
+}
+.kx-tooltip:popover-open { transition-duration: var(--duration-instant); }
+
+/* Overlay motion tells the reader where a surface came from; under reduced motion it simply appears and
+   disappears, in the same open and closed states (the discrete `display` / `overlay` hand-off goes with it). */
+@media (prefers-reduced-motion: reduce) {
+  .kx-dialog,
+  .kx-dialog::backdrop,
+  .kx-dialog__close,
+  .kx-floating { transition: none; }
+}
+
+/* ── forced colours ─────────────────────────────────────────────────────── */
+/* Every focus ring above is a box-shadow, and a forced palette (Windows contrast themes, `forced-colors:
+   active`) removes box-shadow entirely. With one on, the keyboard had no visible position on any control
+   (check:angular-browser, "forced colours": every button, field, tab, toggle and selection control). An
+   outline survives the mode and is painted in a system colour, so it is the indicator here; nothing changes
+   outside it. Parts clipped by their field's `overflow: hidden` (composite inputs, the reveal toggle) draw it
+   inset, and the visually hidden radios of a segment or single-select toggle group draw it on their label. */
+@media (forced-colors: active) {
+  :is(
+      .kx-btn, .kx-fab, .kx-input, .kx-textarea, .kx-native-select, .kx-checkbox, .kx-switch, .kx-radio__input,
+      .kx-slider__input, .kx-tab, .kx-tab-panel, .kx-toggle, .kx-tag__remove, .kx-banner [kxBannerAction],
+      .kx-inform [kxInformAction], a.kx-card, button.kx-card, .kx-accordion__trigger, .kx-breadcrumb__link,
+      .kx-pagination__link, .kx-toc__link, .kx-tab-bar__item, .kx-navigation-bar__back, .kx-app-bar__toggle,
+      .kx-app-bar__link, a.kx-app-bar__brand, .kx-footer__link, .kx-dialog__close
+    ):focus-visible,
+  :is(.kx-segmented__radio, .kx-toggle-group__radio):focus-visible + label,
+  .kx-rating__item:has(.kx-rating__radio:focus-visible),
+  .kx-input-otp:has(.kx-input-otp__input:focus-visible) .kx-input-otp__slot[data-active] {
+    outline: 2px solid Highlight;
+    outline-offset: 2px;
+  }
+  :is(.kx-number-input__input, .kx-password-input__input, .kx-password-input__reveal, .kx-input-group__input, .kx-input-group__button):focus-visible {
+    outline: 2px solid Highlight;
+    outline-offset: -2px;
+  }
+  /* a current destination drawn with a background or an inset shadow would lose its cue to the forced palette;
+     an outline in a system colour keeps "you are here" visible */
+  :is(.kx-app-bar__link, .kx-pagination__link)[aria-current='page'],
+  .kx-tab-bar__item[aria-current='page'] .kx-tab-bar__icon {
+    outline: 2px solid CanvasText;
+    outline-offset: -2px;
+  }
+  /* the slider's track and fill are plain elements, whose backgrounds the mode would flatten to Canvas */
+  .kx-slider__track { forced-color-adjust: none; background-color: GrayText; }
+  .kx-slider__fill { background-color: Highlight; }
+}