@ceebee/ui 0.4.0 → 0.5.2

package/dist/styles.css

@@ -46,10 +46,18 @@
 
   --cb-z-base: 0;
   --cb-z-sticky: 100;
-  --cb-z-overlay: 200;
-  --cb-z-popover: 300;
-  --cb-z-toast: 400;
-  --cb-z-coachmark: 500;
+  --cb-z-modal-backdrop: 200;
+  --cb-z-modal: 300;
+  --cb-z-dropdown: 400;
+  --cb-z-popover: 500;
+  --cb-z-tooltip: 600;
+  --cb-z-command-backdrop: 700;
+  --cb-z-command: 800;
+  --cb-z-toast: 900;
+  --cb-z-coachmark-spotlight: 1000;
+  --cb-z-coachmark: 1100;
+  /* Compatibility for consumers that used the earlier coarse overlay layer. */
+  --cb-z-overlay: var(--cb-z-modal-backdrop);
 }
 
 /* tokens/skin.css */
@@ -263,20 +271,57 @@ html, body { background: var(--cb-bg); color: var(--cb-fg); }
   :root { --cb-motion-scale: 0; }
 }
 
+/* foundation/divider.css */
+.cb-divider {
+  border: 0;
+  border-top: var(--cb-border-width) solid var(--cb-border);
+  margin: var(--cb-space-4) 0;
+}
+
+.cb-divider--vertical {
+  display: inline-block;
+  align-self: stretch;
+  width: 0;
+  min-height: 1em;
+  margin: 0 var(--cb-space-3);
+  border-top: 0;
+  border-inline-start: var(--cb-border-width) solid var(--cb-border);
+}
+
+.cb-divider--labelled {
+  display: flex;
+  align-items: center;
+  gap: var(--cb-space-3);
+  border-top: 0;
+}
+.cb-divider--labelled::before,
+.cb-divider--labelled::after {
+  content: '';
+  flex: 1;
+  border-top: var(--cb-border-width) solid var(--cb-border);
+}
+.cb-divider__label {
+  flex: none;
+  font-family: var(--cb-font-sans);
+  font-size: var(--cb-text-xs);
+  font-weight: var(--cb-weight-semibold);
+  color: var(--cb-fg-muted);
+}
+
 /* foundation/layout.css */
-.cb-stack { display: flex; gap: var(--cb-stack-gap); }
-.cb-stack--column { flex-direction: column; }
-.cb-stack--row { flex-direction: row; }
-.cb-stack--wrap { flex-wrap: wrap; }
-.cb-stack[data-align="start"] { align-items: flex-start; }
-.cb-stack[data-align="center"] { align-items: center; }
-.cb-stack[data-align="end"] { align-items: flex-end; }
-.cb-stack[data-align="stretch"] { align-items: stretch; }
-.cb-stack[data-align="baseline"] { align-items: baseline; }
-.cb-stack[data-justify="start"] { justify-content: flex-start; }
-.cb-stack[data-justify="center"] { justify-content: center; }
-.cb-stack[data-justify="end"] { justify-content: flex-end; }
-.cb-stack[data-justify="between"] { justify-content: space-between; }
+.cb-flex { display: flex; gap: var(--cb-flex-gap); }
+.cb-flex--column { flex-direction: column; }
+.cb-flex--row { flex-direction: row; }
+.cb-flex--wrap { flex-wrap: wrap; }
+.cb-flex[data-align="start"] { align-items: flex-start; }
+.cb-flex[data-align="center"] { align-items: center; }
+.cb-flex[data-align="end"] { align-items: flex-end; }
+.cb-flex[data-align="stretch"] { align-items: stretch; }
+.cb-flex[data-align="baseline"] { align-items: baseline; }
+.cb-flex[data-justify="start"] { justify-content: flex-start; }
+.cb-flex[data-justify="center"] { justify-content: center; }
+.cb-flex[data-justify="end"] { justify-content: flex-end; }
+.cb-flex[data-justify="between"] { justify-content: space-between; }
 
 .cb-grid {
   display: grid;
@@ -435,6 +480,117 @@ html, body { background: var(--cb-bg); color: var(--cb-fg); }
 .cb-text[data-tone="warning"] { color: var(--cb-tone-warning); }
 .cb-text[data-tone="danger"] { color: var(--cb-tone-danger); }
 
+/* form/autocomplete.css */
+.cb-autocomplete__positioner { z-index: var(--cb-z-dropdown); }
+
+.cb-autocomplete {
+  display: flex;
+  align-items: center;
+  gap: var(--cb-space-1);
+  width: 100%;
+  box-sizing: border-box;
+  background: var(--cb-surface);
+  border: var(--cb-border-width) solid var(--cb-border-strong);
+  border-radius: var(--cb-radius-md);
+  padding-inline: var(--cb-space-3) var(--cb-space-1);
+  transition: border-color var(--cb-duration-fast) var(--cb-ease-standard),
+    box-shadow var(--cb-duration-fast) var(--cb-ease-standard);
+}
+.cb-autocomplete--sm { height: var(--cb-control-height-sm); }
+.cb-autocomplete--md { height: var(--cb-control-height-md); }
+.cb-autocomplete--lg { height: var(--cb-control-height-lg); }
+.cb-autocomplete:focus-within {
+  border-color: var(--cb-tone-brand);
+  box-shadow: 0 0 0 var(--cb-focus-width) color-mix(in oklch, var(--cb-tone-brand) 30%, transparent);
+}
+.cb-autocomplete[data-disabled] { opacity: 0.55; }
+.cb-autocomplete:has(.cb-autocomplete__input[aria-invalid="true"]) { border-color: var(--cb-tone-danger); }
+
+.cb-autocomplete__input {
+  flex: 1;
+  min-width: 0;
+  border: none;
+  background: transparent;
+  color: var(--cb-fg);
+  font-family: var(--cb-font-sans);
+  font-size: var(--cb-text-sm);
+  outline: none;
+}
+.cb-autocomplete__input::placeholder { color: var(--cb-fg-subtle); }
+
+.cb-autocomplete__clear,
+.cb-autocomplete__trigger {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  border: none;
+  border-radius: var(--cb-radius-sm);
+  background: transparent;
+  color: var(--cb-fg-subtle);
+  cursor: pointer;
+}
+.cb-autocomplete__clear:hover,
+.cb-autocomplete__trigger:hover { color: var(--cb-fg); background: var(--cb-bg-subtle); }
+.cb-autocomplete__clear:focus-visible,
+.cb-autocomplete__trigger:focus-visible { outline: var(--cb-focus-width) solid var(--cb-tone-brand); outline-offset: var(--cb-focus-offset-inset); }
+
+
+/* The list is as wide as the control it drops from, and its labels start where
+   that control's own text starts.
+
+   Both were off by a little and the little showed: a popup narrower than its
+   field reads as belonging to something else, and a leading indicator column
+   pushed every label 29px right of the text it was replacing, so the list did
+   not line up with the thing it was a list for. The tick moves to the trailing
+   edge — `order`, so the reading order is untouched — and the row's inline
+   padding matches the field's. */
+/* Same shape and the same reasoning as the Select's popup — see select.css. */
+.cb-autocomplete__popup {
+  box-sizing: border-box;
+  width: max-content;
+  min-width: var(--anchor-width, 12rem);
+  max-width: var(--available-width, 100vw);
+  max-height: min(18rem, var(--available-height, 18rem));
+  overflow-y: auto;
+  padding: var(--cb-space-1);
+  background: var(--cb-surface-raised);
+  border: var(--cb-border-width) solid var(--cb-border);
+  border-radius: var(--cb-radius-md);
+  box-shadow: var(--cb-shadow-md);
+  font-family: var(--cb-font-sans);
+  transition: opacity var(--cb-duration-fast) var(--cb-ease-entrance);
+}
+.cb-autocomplete__popup[data-starting-style],
+.cb-autocomplete__popup[data-ending-style] { opacity: 0; }
+
+.cb-autocomplete__item {
+  display: grid;
+  grid-template-columns: 1fr 1.25rem;
+  align-items: start;
+  gap: var(--cb-space-2);
+  padding: var(--cb-space-2) var(--cb-space-2);
+  min-height: 2.25rem;
+  border-radius: var(--cb-radius-sm);
+  font-size: var(--cb-text-sm);
+  color: var(--cb-fg);
+  cursor: pointer;
+  outline: none;
+}
+.cb-autocomplete__item[data-highlighted] { background: color-mix(in oklch, var(--cb-tone-brand) 12%, transparent); }
+.cb-autocomplete__check { order: 2; display: inline-flex; justify-content: center; align-items: center; min-height: 1.25rem; color: var(--cb-tone-brand); }
+.cb-autocomplete__text { display: flex; flex-direction: column; gap: 0.0625rem; min-width: 0; line-height: 1.25rem; }
+.cb-autocomplete__description { font-size: var(--cb-text-xs); color: var(--cb-fg-subtle); }
+.cb-autocomplete__empty,
+.cb-autocomplete__status { padding: var(--cb-space-3); font-size: var(--cb-text-sm); color: var(--cb-fg-subtle); text-align: center; }
+/* Base UI keeps the empty message mounted while the list has matches, so it sat
+   as a silent 24px band above every result. A message with nothing to say takes
+   no room. */
+.cb-autocomplete__empty:empty { display: none; }
+.cb-autocomplete__status { margin: 0; }
+
 /* form/button.css */
 .cb-button {
   --cb-button-accent: var(--cb-tone-brand);
@@ -510,6 +666,10 @@ html, body { background: var(--cb-bg); color: var(--cb-fg); }
 .cb-button__spinner { animation: none; opacity: 0.6; }
 }
 
+/* An anchor does not inherit a button's reset, so the two only match once the
+   browser's own link styling is taken back off. */
+.cb-link-button { text-decoration: none; }
+
 /* form/choice.css */
 .cb-choice { display: flex; align-items: flex-start; gap: var(--cb-space-3); }
 /* A row whose text is a single line centres on the control instead of hanging from its top. */
@@ -646,98 +806,72 @@ html, body { background: var(--cb-bg); color: var(--cb-fg); }
   .cb-switch__thumb { transition: none; }
 }
 
-/* form/combobox.css */
-.cb-combobox {
-  display: flex;
-  align-items: center;
-  gap: var(--cb-space-1);
-  width: 100%;
-  box-sizing: border-box;
-  background: var(--cb-surface);
-  border: var(--cb-border-width) solid var(--cb-border-strong);
+/* Segmented: the same radiogroup, drawn as one track.
+
+   The dot is not hidden with `display: none` — a removed control cannot be
+   focused or hit. It is stretched over its whole cell at zero opacity instead,
+   so the cell IS the radio: pointer, focus ring and keyboard all keep working
+   and only the drawing changes. */
+.cb-radio-group--segmented {
+  display: inline-flex;
+  align-items: stretch;
+  gap: var(--cb-space-hair, 2px);
+  padding: 2px;
+  background: var(--cb-bg-subtle);
+  border: var(--cb-border-width) solid var(--cb-border);
   border-radius: var(--cb-radius-md);
-  padding-inline: var(--cb-space-3) var(--cb-space-1);
-  transition: border-color var(--cb-duration-fast) var(--cb-ease-standard),
-    box-shadow var(--cb-duration-fast) var(--cb-ease-standard);
-}
-.cb-combobox--sm { height: var(--cb-control-height-sm); }
-.cb-combobox--md { height: var(--cb-control-height-md); }
-.cb-combobox--lg { height: var(--cb-control-height-lg); }
-.cb-combobox:focus-within {
-  border-color: var(--cb-tone-brand);
-  box-shadow: 0 0 0 var(--cb-focus-width) color-mix(in oklch, var(--cb-tone-brand) 30%, transparent);
 }
-.cb-combobox[data-disabled] { opacity: 0.55; }
-.cb-combobox:has(.cb-combobox__input[aria-invalid="true"]) { border-color: var(--cb-tone-danger); }
-
-.cb-combobox__input {
-  flex: 1;
+.cb-radio-group--segmented .cb-choice {
+  position: relative;
+  align-items: center;
+  gap: 0;
   min-width: 0;
-  border: none;
+}
+.cb-radio-group--segmented .cb-radio {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  border: 0;
   background: transparent;
-  color: var(--cb-fg);
-  font-family: var(--cb-font-sans);
-  font-size: var(--cb-text-sm);
-  outline: none;
+  border-radius: var(--cb-radius-sm);
+  opacity: 0;
 }
-.cb-combobox__input::placeholder { color: var(--cb-fg-subtle); }
-
-.cb-combobox__clear,
-.cb-combobox__trigger {
-  flex: none;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.75rem;
-  height: 1.75rem;
-  border: none;
+.cb-radio-group--segmented .cb-radio::before { content: none; }
+.cb-radio-group--segmented .cb-radio__indicator { display: none; }
+.cb-radio-group--segmented .cb-choice__text { width: 100%; }
+.cb-radio-group--segmented .cb-choice__label {
+  display: block;
+  padding: var(--cb-space-2) var(--cb-space-3);
   border-radius: var(--cb-radius-sm);
-  background: transparent;
-  color: var(--cb-fg-subtle);
-  cursor: pointer;
+  font-weight: var(--cb-weight-medium);
+  color: var(--cb-fg-muted);
+  text-align: center;
+  white-space: nowrap;
+  transition: background-color var(--cb-duration-fast) var(--cb-ease-standard),
+    color var(--cb-duration-fast) var(--cb-ease-standard);
 }
-.cb-combobox__clear:hover,
-.cb-combobox__trigger:hover { color: var(--cb-fg); background: var(--cb-bg-subtle); }
-.cb-combobox__clear:focus-visible,
-.cb-combobox__trigger:focus-visible { outline: var(--cb-focus-width) solid var(--cb-tone-brand); outline-offset: var(--cb-focus-offset-inset); }
-
-.cb-combobox__popup {
-  box-sizing: border-box;
-  min-width: var(--anchor-width, 12rem);
-  max-height: 18rem;
-  overflow-y: auto;
-  padding: var(--cb-space-1);
+.cb-radio-group--segmented .cb-radio[data-checked] ~ .cb-choice__text .cb-choice__label {
   background: var(--cb-surface-raised);
-  border: var(--cb-border-width) solid var(--cb-border);
-  border-radius: var(--cb-radius-md);
-  box-shadow: var(--cb-shadow-md);
-  z-index: var(--cb-z-popover);
-  font-family: var(--cb-font-sans);
-  transition: opacity var(--cb-duration-fast) var(--cb-ease-entrance);
+  color: var(--cb-fg);
+  box-shadow: var(--cb-shadow-sm);
+}
+.cb-radio-group--segmented .cb-radio:focus-visible ~ .cb-choice__text .cb-choice__label {
+  outline: var(--cb-focus-width) solid var(--cb-tone-brand);
+  outline-offset: var(--cb-focus-offset);
+}
+.cb-radio-group--segmented .cb-radio[data-disabled] ~ .cb-choice__text .cb-choice__label {
+  opacity: 0.55;
+  cursor: not-allowed;
 }
-.cb-combobox__popup[data-starting-style],
-.cb-combobox__popup[data-ending-style] { opacity: 0; }
 
-.cb-combobox__item {
-  display: grid;
-  grid-template-columns: 1.25rem 1fr;
-  align-items: start;
-  gap: var(--cb-space-2);
-  padding: var(--cb-space-2) var(--cb-space-3);
-  min-height: 2.25rem;
-  border-radius: var(--cb-radius-sm);
-  font-size: var(--cb-text-sm);
-  color: var(--cb-fg);
-  cursor: pointer;
-  outline: none;
+@media (prefers-reduced-motion: reduce) {
+  .cb-radio-group--segmented .cb-choice__label { transition: none; }
 }
-.cb-combobox__item[data-highlighted] { background: color-mix(in oklch, var(--cb-tone-brand) 12%, transparent); }
-.cb-combobox__check { display: inline-flex; justify-content: center; align-items: center; min-height: 1.25rem; color: var(--cb-tone-brand); }
-.cb-combobox__text { display: flex; flex-direction: column; gap: 0.0625rem; min-width: 0; line-height: 1.25rem; }
-.cb-combobox__description { font-size: var(--cb-text-xs); color: var(--cb-fg-subtle); }
-.cb-combobox__empty { padding: var(--cb-space-3); font-size: var(--cb-text-sm); color: var(--cb-fg-subtle); text-align: center; }
 
-/* form/date-input.css */
+/* form/date-picker.css */
 .cb-date {
   display: flex;
   align-items: center;
@@ -795,7 +929,6 @@ html, body { background: var(--cb-bg); color: var(--cb-fg); }
   border-radius: var(--cb-radius-md);
   box-shadow: var(--cb-shadow-md);
   font-family: var(--cb-font-sans);
-  z-index: var(--cb-z-popover);
   transition: opacity var(--cb-duration-fast) var(--cb-ease-entrance);
 }
 .cb-calendar[data-starting-style],
@@ -852,7 +985,6 @@ html, body { background: var(--cb-bg); color: var(--cb-fg); }
   border: var(--cb-border-width) solid var(--cb-border);
   border-radius: var(--cb-radius-md);
   box-shadow: var(--cb-shadow-md);
-  z-index: var(--cb-z-popover);
   font-family: var(--cb-font-sans);
 }
 .cb-times__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.125rem; min-width: 7rem; }
@@ -872,6 +1004,8 @@ html, body { background: var(--cb-bg); color: var(--cb-fg); }
 .cb-times__option:hover { background: var(--cb-bg-subtle); }
 .cb-times__option[data-selected] { background: color-mix(in oklch, var(--cb-tone-brand) 16%, transparent); color: var(--cb-tone-brand); font-weight: var(--cb-weight-medium); }
 .cb-times__option:focus-visible { outline: var(--cb-focus-width) solid var(--cb-tone-brand); outline-offset: var(--cb-focus-offset-inset); }
+.cb-calendar__positioner,
+.cb-times__positioner { z-index: var(--cb-z-dropdown); }
 
 /* form/field.css */
 .cb-field { display: flex; flex-direction: column; gap: var(--cb-space-2); }
@@ -924,71 +1058,7 @@ html, body { background: var(--cb-bg); color: var(--cb-fg); }
   box-shadow: 0 0 0 var(--cb-focus-width) color-mix(in oklch, var(--cb-tone-danger) 30%, transparent);
 }
 
-/* form/file-drop.css */
-.cb-filedrop { display: flex; flex-direction: column; gap: var(--cb-space-3); font-family: var(--cb-font-sans); }
-.cb-filedrop__zone {
-  cursor: pointer;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--cb-space-2);
-  padding: var(--cb-space-6) var(--cb-space-4);
-  border: 1px dashed var(--cb-border-strong);
-  border-radius: var(--cb-radius-lg);
-  background: var(--cb-surface);
-  text-align: center;
-  transition: border-color var(--cb-duration-fast) var(--cb-ease-standard),
-    background-color var(--cb-duration-fast) var(--cb-ease-standard);
-}
-.cb-filedrop__zone[data-over] {
-  border-color: var(--cb-tone-brand);
-  background: color-mix(in oklch, var(--cb-tone-brand) 8%, var(--cb-surface));
-}
-.cb-filedrop__zone[data-disabled] { opacity: 0.55; }
-.cb-filedrop__icon { color: var(--cb-fg-subtle); }
-.cb-filedrop__button {
-  color: var(--cb-tone-brand);
-  font-size: var(--cb-text-sm);
-  font-weight: var(--cb-weight-medium);
-  border-radius: var(--cb-radius-sm);
-  padding: var(--cb-space-1) var(--cb-space-2);
-}
-.cb-filedrop__zone:hover .cb-filedrop__button { background: color-mix(in oklch, var(--cb-tone-brand) 12%, transparent); }
-/* The input is what receives focus, so the ring is drawn on the zone around it. */
-.cb-filedrop__zone:has(input:focus-visible) {
-  outline: var(--cb-focus-width) solid var(--cb-tone-brand);
-  outline-offset: var(--cb-focus-offset);
-}
-.cb-filedrop__zone[data-disabled] { cursor: not-allowed; }
-.cb-filedrop__hint { margin: 0; font-size: var(--cb-text-xs); color: var(--cb-fg-subtle); }
-
-.cb-filedrop__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--cb-space-2); }
-.cb-filedrop__file {
-  margin: 0;
-  display: flex;
-  align-items: center;
-  gap: var(--cb-space-3);
-  padding: var(--cb-space-2) var(--cb-space-3);
-  border: var(--cb-border-width) solid var(--cb-border);
-  border-radius: var(--cb-radius-md);
-  background: var(--cb-surface);
-  font-size: var(--cb-text-sm);
-}
-.cb-filedrop__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cb-fg); }
-.cb-filedrop__size { font-size: var(--cb-text-xs); color: var(--cb-fg-subtle); font-variant-numeric: tabular-nums; }
-.cb-filedrop__remove {
-  border: none;
-  background: transparent;
-  color: var(--cb-fg-subtle);
-  cursor: pointer;
-  display: inline-flex;
-  padding: var(--cb-space-1);
-  border-radius: var(--cb-radius-sm);
-}
-.cb-filedrop__remove:hover { color: var(--cb-tone-danger); background: color-mix(in oklch, var(--cb-tone-danger) 10%, transparent); }
-.cb-filedrop__remove:focus-visible { outline: var(--cb-focus-width) solid var(--cb-tone-danger); outline-offset: var(--cb-focus-offset); }
-
-/* form/number-input.css */
+/* form/input-number.css */
 .cb-number {
   display: inline-flex;
   align-items: center;
@@ -1045,7 +1115,41 @@ html, body { background: var(--cb-bg); color: var(--cb-fg); }
 .cb-number__step:disabled { opacity: 0.35; cursor: not-allowed; }
 .cb-number__step:focus-visible { outline: var(--cb-focus-width) solid var(--cb-tone-brand); outline-offset: var(--cb-focus-offset-inset); }
 
+/* form/rate.css */
+.cb-rate {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--cb-space-1);
+  color: var(--cb-tone-warning);
+  line-height: 0;
+}
+
+.cb-rate__star {
+  padding: 0;
+  border: 0;
+  background: none;
+  color: inherit;
+  cursor: pointer;
+  line-height: 0;
+  border-radius: var(--cb-radius-sm);
+  transition: transform var(--cb-duration-fast) var(--cb-ease-standard);
+}
+.cb-rate__star:hover { transform: scale(1.12); }
+.cb-rate__star:focus-visible {
+  outline: var(--cb-focus-width) solid var(--cb-tone-brand);
+  outline-offset: var(--cb-focus-offset);
+}
+
+/* Reduced motion drops the transform and keeps the state visible: the star is
+   already filled or not, which is the whole feedback. */
+@media (prefers-reduced-motion: reduce) {
+  .cb-rate__star { transition: none; }
+  .cb-rate__star:hover { transform: none; }
+}
+
 /* form/select.css */
+.cb-select__positioner { z-index: var(--cb-z-dropdown); }
+
 .cb-select {
   display: inline-flex;
   align-items: center;
@@ -1078,17 +1182,32 @@ html, body { background: var(--cb-bg); color: var(--cb-fg); }
 .cb-select[data-disabled] { opacity: 0.55; cursor: not-allowed; }
 .cb-select__icon { display: inline-flex; color: var(--cb-fg-subtle); }
 
+/* As wide as its longest option, and never wider than the screen.
+ *
+ * Pinned to the anchor's width, a popup dropping from a field that is half a
+ * filter row is 175px on a phone — and the options in it are place names.
+ * "Kabupaten Tangerang Selatan (5)" wrapped to three lines there, the one below
+ * it to two, and the list read as a cramped column of broken phrases rather
+ * than as a set of choices.
+ *
+ * So the anchor's width becomes the floor rather than the value: still never
+ * narrower than the field it belongs to, because a popup narrower than its
+ * field reads as belonging to something else. `--available-width` is the room
+ * the positioner measured between the anchor and the edge of the screen, so
+ * the ceiling moves with the viewport instead of being a number written here.
+ */
 .cb-select__popup {
   box-sizing: border-box;
+  width: max-content;
   min-width: var(--anchor-width, 10rem);
-  max-height: 18rem;
+  max-width: var(--available-width, 100vw);
+  max-height: min(18rem, var(--available-height, 18rem));
   overflow-y: auto;
   background: var(--cb-surface-raised);
   border: var(--cb-border-width) solid var(--cb-border);
   border-radius: var(--cb-radius-md);
   box-shadow: var(--cb-shadow-md);
   padding: var(--cb-space-1);
-  z-index: var(--cb-z-popover);
   font-family: var(--cb-font-sans);
   font-size: var(--cb-text-sm);
   transition: opacity var(--cb-duration-fast) var(--cb-ease-entrance),
@@ -1104,7 +1223,7 @@ html, body { background: var(--cb-bg); color: var(--cb-fg); }
 
 .cb-select__item {
   display: grid;
-  grid-template-columns: 1.25rem 1fr;
+  grid-template-columns: 1fr 1.25rem;
   align-items: center;
   gap: var(--cb-space-2);
   padding: var(--cb-space-2) var(--cb-space-2);
@@ -1116,7 +1235,71 @@ html, body { background: var(--cb-bg); color: var(--cb-fg); }
 .cb-select__item[data-highlighted] { background: color-mix(in oklch, var(--cb-tone-brand) 12%, transparent); }
 .cb-select__item[data-selected] { font-weight: var(--cb-weight-medium); }
 .cb-select__item[data-disabled] { color: var(--cb-fg-subtle); text-decoration: line-through; cursor: not-allowed; }
-.cb-select__check { display: inline-flex; justify-content: center; color: var(--cb-tone-brand); }
+.cb-select__check { order: 2; display: inline-flex; justify-content: center; color: var(--cb-tone-brand); }
+
+/* form/upload.css */
+.cb-filedrop { display: flex; flex-direction: column; gap: var(--cb-space-3); font-family: var(--cb-font-sans); }
+.cb-filedrop__zone {
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--cb-space-2);
+  padding: var(--cb-space-6) var(--cb-space-4);
+  border: 1px dashed var(--cb-border-strong);
+  border-radius: var(--cb-radius-lg);
+  background: var(--cb-surface);
+  text-align: center;
+  transition: border-color var(--cb-duration-fast) var(--cb-ease-standard),
+    background-color var(--cb-duration-fast) var(--cb-ease-standard);
+}
+.cb-filedrop__zone[data-over] {
+  border-color: var(--cb-tone-brand);
+  background: color-mix(in oklch, var(--cb-tone-brand) 8%, var(--cb-surface));
+}
+.cb-filedrop__zone[data-disabled] { opacity: 0.55; }
+.cb-filedrop__icon { color: var(--cb-fg-subtle); }
+.cb-filedrop__button {
+  color: var(--cb-tone-brand);
+  font-size: var(--cb-text-sm);
+  font-weight: var(--cb-weight-medium);
+  border-radius: var(--cb-radius-sm);
+  padding: var(--cb-space-1) var(--cb-space-2);
+}
+.cb-filedrop__zone:hover .cb-filedrop__button { background: color-mix(in oklch, var(--cb-tone-brand) 12%, transparent); }
+/* The input is what receives focus, so the ring is drawn on the zone around it. */
+.cb-filedrop__zone:has(input:focus-visible) {
+  outline: var(--cb-focus-width) solid var(--cb-tone-brand);
+  outline-offset: var(--cb-focus-offset);
+}
+.cb-filedrop__zone[data-disabled] { cursor: not-allowed; }
+.cb-filedrop__hint { margin: 0; font-size: var(--cb-text-xs); color: var(--cb-fg-subtle); }
+
+.cb-filedrop__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--cb-space-2); }
+.cb-filedrop__file {
+  margin: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--cb-space-3);
+  padding: var(--cb-space-2) var(--cb-space-3);
+  border: var(--cb-border-width) solid var(--cb-border);
+  border-radius: var(--cb-radius-md);
+  background: var(--cb-surface);
+  font-size: var(--cb-text-sm);
+}
+.cb-filedrop__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cb-fg); }
+.cb-filedrop__size { font-size: var(--cb-text-xs); color: var(--cb-fg-subtle); font-variant-numeric: tabular-nums; }
+.cb-filedrop__remove {
+  border: none;
+  background: transparent;
+  color: var(--cb-fg-subtle);
+  cursor: pointer;
+  display: inline-flex;
+  padding: var(--cb-space-1);
+  border-radius: var(--cb-radius-sm);
+}
+.cb-filedrop__remove:hover { color: var(--cb-tone-danger); background: color-mix(in oklch, var(--cb-tone-danger) 10%, transparent); }
+.cb-filedrop__remove:focus-visible { outline: var(--cb-focus-width) solid var(--cb-tone-danger); outline-offset: var(--cb-focus-offset); }
 
 /* feedback/badge.css */
 .cb-badge {
@@ -1127,11 +1310,27 @@ html, body { background: var(--cb-bg); color: var(--cb-fg); }
   border-radius: var(--cb-radius-full);
   font-family: var(--cb-font-sans);
   font-weight: var(--cb-weight-medium);
+  /* The line box must not out-measure the height above. Left at its default a
+     word sits in an 18px box and a 12px glyph in a 22px one, so two badges in a
+     row ended up two pixels apart for a reason neither of them chose. */
+  line-height: 1;
   white-space: nowrap;
   border: var(--cb-border-width) solid transparent;
 }
-.cb-badge--sm { font-size: 0.6875rem; padding: 0.0625rem var(--cb-space-2); }
-.cb-badge--md { font-size: var(--cb-text-xs); padding: var(--cb-space-1) var(--cb-space-3); }
+/* A height, not just padding. Padding alone makes the height a function of the
+   content, so a badge carrying a glyph stands taller than the plain one beside
+   it — and a row of them then disagrees about its own size for a reason nobody
+   chose. One number per size, and the padding sits inside it. */
+.cb-badge--sm {
+  font-size: 0.6875rem;
+  min-height: 1.375rem;
+  padding: 0.0625rem var(--cb-space-2);
+}
+.cb-badge--md {
+  font-size: var(--cb-text-xs);
+  min-height: 1.75rem;
+  padding: var(--cb-space-1) var(--cb-space-3);
+}
 
 .cb-badge[data-tone="brand"] { --cb-badge-accent: var(--cb-tone-brand); }
 .cb-badge[data-tone="info"] { --cb-badge-accent: var(--cb-tone-info); }
@@ -1201,25 +1400,25 @@ html, body { background: var(--cb-bg); color: var(--cb-fg); }
 .cb-empty__actions { display: flex; gap: var(--cb-space-2); margin-top: var(--cb-space-3); }
 
 /* feedback/progress.css */
-.cb-spinner {
-  --cb-spinner-accent: var(--cb-tone-brand);
+.cb-spin {
+  --cb-spin-accent: var(--cb-tone-brand);
   display: inline-block;
   border-radius: var(--cb-radius-full);
-  border: 2px solid color-mix(in oklch, var(--cb-spinner-accent) 25%, transparent);
-  border-top-color: var(--cb-spinner-accent);
+  border: 2px solid color-mix(in oklch, var(--cb-spin-accent) 25%, transparent);
+  border-top-color: var(--cb-spin-accent);
   animation: cb-spin calc(var(--cb-duration-deliberate) * 1.4) linear infinite;
 }
-.cb-spinner[data-tone="neutral"] { --cb-spinner-accent: var(--cb-fg-muted); }
-.cb-spinner[data-tone="info"] { --cb-spinner-accent: var(--cb-tone-info); }
-.cb-spinner[data-tone="success"] { --cb-spinner-accent: var(--cb-tone-success); }
-.cb-spinner[data-tone="warning"] { --cb-spinner-accent: var(--cb-tone-warning); }
-.cb-spinner[data-tone="danger"] { --cb-spinner-accent: var(--cb-tone-danger); }
-.cb-spinner--sm { width: 0.875rem; height: 0.875rem; }
-.cb-spinner--md { width: 1.25rem; height: 1.25rem; border-width: 2px; }
-.cb-spinner--lg { width: 2rem; height: 2rem; border-width: 3px; }
+.cb-spin[data-tone="neutral"] { --cb-spin-accent: var(--cb-fg-muted); }
+.cb-spin[data-tone="info"] { --cb-spin-accent: var(--cb-tone-info); }
+.cb-spin[data-tone="success"] { --cb-spin-accent: var(--cb-tone-success); }
+.cb-spin[data-tone="warning"] { --cb-spin-accent: var(--cb-tone-warning); }
+.cb-spin[data-tone="danger"] { --cb-spin-accent: var(--cb-tone-danger); }
+.cb-spin--sm { width: 0.875rem; height: 0.875rem; }
+.cb-spin--md { width: 1.25rem; height: 1.25rem; border-width: 2px; }
+.cb-spin--lg { width: 2rem; height: 2rem; border-width: 3px; }
 /* Reduced motion: it stops turning and reads as a ring — the surrounding text says "loading". */
 @media (prefers-reduced-motion: reduce) {
-  .cb-spinner { animation: none; opacity: 0.6; }
+  .cb-spin { animation: none; opacity: 0.6; }
 }
 
 .cb-progress {
@@ -1306,6 +1505,57 @@ html, body { background: var(--cb-bg); color: var(--cb-fg); }
 
 .cb-skeleton-text { display: flex; flex-direction: column; gap: var(--cb-space-2); }
 
+/* feedback/tag.css */
+/* The look is Badge's, literally — the same `cb-badge` classes rather than a
+   second set that would agree today and drift apart later. Only what a Tag can
+   do that a Badge cannot lives here. */
+.cb-tag { max-width: 100%; }
+
+.cb-tag--pressable {
+  border-width: var(--cb-border-width);
+  cursor: pointer;
+  text-decoration: none;
+  /* NOT `font: inherit`. The shorthand resets size and line-height too, so a
+     pressable tag took the page's 16px and stood two pixels taller than the
+     badge beside it — the size classes were being overruled by a reset meant
+     only to undo the browser's button face. */
+  font-family: inherit;
+  font-weight: inherit;
+  transition: border-color var(--cb-duration-fast) var(--cb-ease-standard),
+    background-color var(--cb-duration-fast) var(--cb-ease-standard);
+}
+.cb-tag--pressable:hover { border-color: var(--cb-tone-brand); }
+.cb-tag--pressable:focus-visible {
+  outline: var(--cb-focus-width) solid var(--cb-tone-brand);
+  outline-offset: var(--cb-focus-offset);
+}
+.cb-tag--pressable[aria-pressed="true"] { border-color: var(--cb-tone-brand); }
+
+.cb-tag__close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-inline-start: var(--cb-space-1);
+  margin-inline-end: calc(var(--cb-space-1) * -1);
+  padding: 0;
+  border: 0;
+  border-radius: var(--cb-radius-full);
+  background: none;
+  color: inherit;
+  opacity: 0.7;
+  cursor: pointer;
+}
+.cb-tag__close:hover { opacity: 1; }
+.cb-tag__close:focus-visible {
+  outline: var(--cb-focus-width) solid currentColor;
+  outline-offset: 1px;
+  opacity: 1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .cb-tag--pressable { transition: none; }
+}
+
 /* feedback/toast.css */
 .cb-toast__viewport {
   position: fixed;
@@ -1399,12 +1649,23 @@ html, body { background: var(--cb-bg); color: var(--cb-fg); }
 .cb-toast__action:focus-visible { outline: var(--cb-focus-width) solid var(--cb-toast-accent); outline-offset: var(--cb-focus-offset); }
 
 /* overlay/command-palette.css */
+.cb-palette__backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: var(--cb-z-command-backdrop);
+  background: var(--cb-scrim);
+  backdrop-filter: blur(2px);
+  transition: opacity var(--cb-duration-base) var(--cb-ease-entrance);
+}
+.cb-palette__backdrop[data-starting-style],
+.cb-palette__backdrop[data-ending-style] { opacity: 0; }
+
 .cb-palette {
   position: fixed;
   top: 12vh;
   left: 50%;
   translate: -50% 0;
-  z-index: calc(var(--cb-z-overlay) + 1);
+  z-index: var(--cb-z-command);
   display: flex;
   flex-direction: column;
   width: min(34rem, calc(100vw - var(--cb-space-6)));
@@ -1422,6 +1683,7 @@ html, body { background: var(--cb-bg); color: var(--cb-fg); }
 .cb-palette[data-starting-style],
 .cb-palette[data-ending-style] { opacity: 0; translate: -50% -0.5rem; }
 @media (prefers-reduced-motion: reduce) {
+  .cb-palette__backdrop { transition: opacity var(--cb-duration-fast) linear; }
   .cb-palette { transition: opacity var(--cb-duration-fast) linear; }
   .cb-palette[data-starting-style],
   .cb-palette[data-ending-style] { translate: -50% 0; }
@@ -1472,21 +1734,79 @@ html, body { background: var(--cb-bg); color: var(--cb-fg); }
 .cb-palette__shortcut { margin: 0; padding: 0; border: none; background: none; font-family: var(--cb-font-mono); font-size: var(--cb-text-xs); color: var(--cb-fg-subtle); }
 .cb-palette__empty { margin: 0; padding: var(--cb-space-5); text-align: center; font-size: var(--cb-text-sm); color: var(--cb-fg-subtle); }
 
-/* overlay/dialog.css */
-.cb-dialog__backdrop {
+/* overlay/drawer.css */
+.cb-drawer__backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: var(--cb-z-modal-backdrop);
+  background: var(--cb-scrim);
+  backdrop-filter: blur(2px);
+  transition: opacity var(--cb-duration-base) var(--cb-ease-standard);
+}
+.cb-drawer__backdrop[data-starting-style],
+.cb-drawer__backdrop[data-ending-style] { opacity: 0; }
+
+.cb-drawer {
+  position: fixed;
+  z-index: var(--cb-z-modal);
+  inset-block: 0;
+  inset-inline-end: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--cb-space-3);
+  box-sizing: border-box;
+  width: min(22rem, calc(100vw - var(--cb-space-6)));
+  height: 100dvh;
+  padding: var(--cb-space-5);
+  overflow: hidden;
+  background: var(--cb-surface-raised);
+  color: var(--cb-fg);
+  border-inline-start: var(--cb-border-width) solid var(--cb-border);
+  border-radius: var(--cb-radius-lg) 0 0 var(--cb-radius-lg);
+  box-shadow: var(--cb-shadow-lg);
+  transform: translateX(0);
+  transition: opacity var(--cb-duration-base) var(--cb-ease-entrance),
+    transform var(--cb-duration-base) var(--cb-ease-entrance);
+}
+.cb-drawer[data-starting-style],
+.cb-drawer[data-ending-style] { opacity: 0; transform: translateX(100%); }
+
+@media (prefers-reduced-motion: reduce) {
+  .cb-drawer { transition: opacity var(--cb-duration-fast) linear; }
+  .cb-drawer[data-starting-style],
+  .cb-drawer[data-ending-style] { transform: translateX(0); }
+}
+
+.cb-drawer__title { margin: 0; font-family: var(--cb-font-sans); font-size: var(--cb-text-lg); font-weight: var(--cb-weight-semibold); }
+.cb-drawer__description { margin: 0; font-family: var(--cb-font-sans); font-size: var(--cb-text-sm); color: var(--cb-fg-muted); }
+/* Same scrollbar as the Modal's body, same answer — see modal.css. */
+.cb-drawer__body {
+  min-height: 0;
+  flex: 1;
+  overflow-y: auto;
+  scrollbar-gutter: stable;
+  margin-inline: calc(-1 * var(--cb-space-5));
+  padding-inline: var(--cb-space-5);
+  font-family: var(--cb-font-sans);
+  font-size: var(--cb-text-sm);
+}
+.cb-drawer__footer { display: flex; justify-content: flex-end; gap: var(--cb-space-2); }
+
+/* overlay/modal.css */
+.cb-modal__backdrop {
   position: fixed;
   inset: 0;
-  z-index: var(--cb-z-overlay);
+  z-index: var(--cb-z-modal-backdrop);
   background: var(--cb-scrim);
   backdrop-filter: blur(2px);
   transition: opacity var(--cb-duration-base) var(--cb-ease-standard);
 }
-.cb-dialog__backdrop[data-starting-style],
-.cb-dialog__backdrop[data-ending-style] { opacity: 0; }
+.cb-modal__backdrop[data-starting-style],
+.cb-modal__backdrop[data-ending-style] { opacity: 0; }
 
-.cb-dialog {
+.cb-modal {
   position: fixed;
-  z-index: calc(var(--cb-z-overlay) + 1);
+  z-index: var(--cb-z-modal);
   display: flex;
   flex-direction: column;
   gap: var(--cb-space-3);
@@ -1498,36 +1818,60 @@ html, body { background: var(--cb-bg); color: var(--cb-fg); }
   box-shadow: var(--cb-shadow-lg);
   padding: var(--cb-space-5);
   width: calc(100vw - var(--cb-space-6));
+  max-height: calc(100dvh - var(--cb-space-6));
   transition: opacity var(--cb-duration-base) var(--cb-ease-entrance),
     transform var(--cb-duration-base) var(--cb-ease-entrance);
 }
-.cb-dialog--sm { max-width: 24rem; }
-.cb-dialog--md { max-width: 32rem; }
-.cb-dialog--lg { max-width: 46rem; }
+.cb-modal--sm { max-width: 24rem; }
+.cb-modal--md { max-width: 32rem; }
+.cb-modal--lg { max-width: 46rem; }
 
-.cb-dialog--center { top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1); }
-.cb-dialog--center[data-starting-style],
-.cb-dialog--center[data-ending-style] { opacity: 0; transform: translate(-50%, -48%) scale(0.96); }
+.cb-modal--center { top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1); }
+.cb-modal--center[data-starting-style],
+.cb-modal--center[data-ending-style] { opacity: 0; transform: translate(-50%, -48%) scale(0.96); }
 
-.cb-dialog--end { inset-inline-end: var(--cb-space-4); inset-block-end: var(--cb-space-4); transform: translateY(0); }
-.cb-dialog--end[data-starting-style],
-.cb-dialog--end[data-ending-style] { opacity: 0; transform: translateY(12px); }
+.cb-modal--end { inset-inline-end: var(--cb-space-4); inset-block-end: var(--cb-space-4); transform: translateY(0); }
+.cb-modal--end[data-starting-style],
+.cb-modal--end[data-ending-style] { opacity: 0; transform: translateY(12px); }
 
 /* Reduced motion: the dialog still fades so its arrival is not invisible, but it stops moving. */
 @media (prefers-reduced-motion: reduce) {
-  .cb-dialog { transition: opacity var(--cb-duration-fast) linear; }
-  .cb-dialog--center[data-starting-style],
-  .cb-dialog--center[data-ending-style] { transform: translate(-50%, -50%) scale(1); }
-  .cb-dialog--end[data-starting-style],
-  .cb-dialog--end[data-ending-style] { transform: translateY(0); }
+  .cb-modal { transition: opacity var(--cb-duration-fast) linear; }
+  .cb-modal--center[data-starting-style],
+  .cb-modal--center[data-ending-style] { transform: translate(-50%, -50%) scale(1); }
+  .cb-modal--end[data-starting-style],
+  .cb-modal--end[data-ending-style] { transform: translateY(0); }
+}
+
+.cb-modal__title { margin: 0; font-family: var(--cb-font-sans); font-size: var(--cb-text-lg); font-weight: var(--cb-weight-semibold); }
+.cb-modal__description { margin: 0; font-family: var(--cb-font-sans); font-size: var(--cb-text-sm); color: var(--cb-fg-muted); }
+/* The body is the only scrolling part of the dialog, and a scroller draws its
+   bar at its own inline edge — which, with the body running to the content edge,
+   is the right edge of every field inside it. Platforms differ in how that looks
+   and neither way is acceptable: macOS and Android float an overlay bar over the
+   field, Windows reserves real width and squeezes it.
+
+   So both halves are needed. `scrollbar-gutter: stable` keeps the reserved bar
+   out of the content box — always, not only while the content overflows, so a
+   field appearing does not shift the rest sideways. The bleed-and-pad puts a
+   space-5 margin between the content and the edge where an overlay bar is drawn,
+   and hands the width back to the dialog so the padding costs nothing. It also
+   stops a focused field's ring being clipped at the scroller's edge. */
+.cb-modal__body {
+  min-height: 0;
+  overflow-y: auto;
+  scrollbar-gutter: stable;
+  margin-inline: calc(-1 * var(--cb-space-5));
+  padding-inline: var(--cb-space-5);
+  font-family: var(--cb-font-sans);
+  font-size: var(--cb-text-sm);
 }
-
-.cb-dialog__title { margin: 0; font-family: var(--cb-font-sans); font-size: var(--cb-text-lg); font-weight: var(--cb-weight-semibold); }
-.cb-dialog__description { margin: 0; font-family: var(--cb-font-sans); font-size: var(--cb-text-sm); color: var(--cb-fg-muted); }
-.cb-dialog__body { font-family: var(--cb-font-sans); font-size: var(--cb-text-sm); }
-.cb-dialog__footer { display: flex; justify-content: flex-end; gap: var(--cb-space-2); margin-top: var(--cb-space-2); }
+.cb-modal__footer { flex: none; display: flex; justify-content: flex-end; gap: var(--cb-space-2); margin-top: var(--cb-space-2); }
 
 /* overlay/popover.css */
+.cb-popover-positioner { z-index: var(--cb-z-popover); }
+.cb-tooltip-positioner { z-index: var(--cb-z-tooltip); }
+
 .cb-popover {
   box-sizing: border-box;
   max-width: 22rem;
@@ -1539,7 +1883,6 @@ html, body { background: var(--cb-bg); color: var(--cb-fg); }
   padding: var(--cb-space-4);
   font-family: var(--cb-font-sans);
   font-size: var(--cb-text-sm);
-  z-index: var(--cb-z-popover);
   transition: opacity var(--cb-duration-fast) var(--cb-ease-entrance),
     transform var(--cb-duration-fast) var(--cb-ease-entrance);
 }
@@ -1551,33 +1894,42 @@ html, body { background: var(--cb-bg); color: var(--cb-fg); }
   .cb-popover[data-ending-style] { transform: none; }
 }
 
-/* The tail is a square straddling the popup's edge, rotated 45deg, with a border on only the
-   two edges that end up facing outward. Its own fill covers the popup's border underneath, so
-   the outline runs from bubble into tail without a line across the join — which is what the
-   clip-a-diamond-in-half version could never do: the popup border still crossed its base. */
-.cb-popover__arrow {
+/* Base UI positions this wrapper along the anchor edge. The SVG fill overlaps the popup edge by
+   one pixel, hiding its border below the tail; only the two outward edges receive a stroke. */
+.cb-popover__arrow,
+.cb-tooltip__arrow {
+  --cb-arrow-bg: var(--cb-surface-raised);
+  --cb-arrow-border: var(--cb-border);
   position: absolute;
-  width: 18px;
-  height: 9px;
+  display: block;
+  width: 16px;
+  height: 8px;
+  overflow: visible;
   pointer-events: none;
 }
-.cb-popover__arrow[data-side="bottom"] { top: 0; }
-.cb-popover__arrow[data-side="top"] { bottom: 0; rotate: 180deg; }
-.cb-popover__arrow[data-side="left"] { right: 0; rotate: 90deg; }
-.cb-popover__arrow[data-side="right"] { left: 0; rotate: -90deg; }
+.cb-popover__arrow[data-side="bottom"],
+.cb-tooltip__arrow[data-side="bottom"] { top: -7px; }
+.cb-popover__arrow[data-side="top"],
+.cb-tooltip__arrow[data-side="top"] { bottom: -7px; rotate: 180deg; }
+.cb-popover__arrow[data-side="left"],
+.cb-tooltip__arrow[data-side="left"] { right: -11px; rotate: 90deg; }
+.cb-popover__arrow[data-side="right"],
+.cb-tooltip__arrow[data-side="right"] { left: -11px; rotate: -90deg; }
 
 .cb-arrow {
-  position: absolute;
-  left: 50%;
-  top: 0;
-  width: 12px;
-  height: 12px;
-  translate: -50% -50%;
-  rotate: 45deg;
-  background: var(--cb-surface-raised);
-  border-top: var(--cb-border-width) solid var(--cb-border);
-  border-left: var(--cb-border-width) solid var(--cb-border);
-  border-start-start-radius: 3px;
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+.cb-arrow__fill { fill: var(--cb-arrow-bg); }
+.cb-arrow__edge {
+  fill: none;
+  stroke: var(--cb-arrow-border);
+  stroke-width: var(--cb-border-width);
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  vector-effect: non-scaling-stroke;
 }
 
 .cb-tooltip {
@@ -1587,9 +1939,12 @@ html, body { background: var(--cb-bg); color: var(--cb-fg); }
   font-size: var(--cb-text-xs);
   padding: var(--cb-space-1) var(--cb-space-2);
   border-radius: var(--cb-radius-sm);
-  z-index: var(--cb-z-popover);
   transition: opacity var(--cb-duration-fast) var(--cb-ease-standard);
 }
+.cb-tooltip__arrow {
+  --cb-arrow-bg: var(--cb-fg);
+  --cb-arrow-border: var(--cb-fg);
+}
 .cb-tooltip[data-starting-style],
 .cb-tooltip[data-ending-style] { opacity: 0; }
 
@@ -1730,7 +2085,7 @@ html, body { background: var(--cb-bg); color: var(--cb-fg); }
   color: var(--cb-fg);
 }
 
-/* data/stat-card.css */
+/* data/statistic.css */
 .cb-stat { display: flex; flex-direction: column; gap: var(--cb-space-3); }
 .cb-stat__head { display: flex; align-items: center; justify-content: space-between; gap: var(--cb-space-2); }
 .cb-stat__icon { display: inline-flex; color: var(--cb-surface-accent); }
@@ -2104,9 +2459,14 @@ html, body { background: var(--cb-bg); color: var(--cb-fg); }
 }
 
 /* nav/nav.css */
+.cb-menu-positioner { z-index: var(--cb-z-dropdown); }
+
 .cb-menu {
   box-sizing: border-box;
   min-width: 14rem;
+  max-height: min(calc(100dvh - var(--cb-space-6)), var(--available-height));
+  overflow-y: auto;
+  overscroll-behavior: contain;
   padding: var(--cb-space-1);
   background: var(--cb-surface-raised);
   border: var(--cb-border-width) solid var(--cb-border);
@@ -2114,7 +2474,6 @@ html, body { background: var(--cb-bg); color: var(--cb-fg); }
   box-shadow: var(--cb-shadow-md);
   font-family: var(--cb-font-sans);
   font-size: var(--cb-text-sm);
-  z-index: var(--cb-z-popover);
   transition: opacity var(--cb-duration-fast) var(--cb-ease-entrance),
     transform var(--cb-duration-fast) var(--cb-ease-entrance);
 }
@@ -2181,11 +2540,11 @@ html, body { background: var(--cb-bg); color: var(--cb-fg); }
 .cb-crumbs__current { color: var(--cb-fg); font-weight: var(--cb-weight-medium); }
 .cb-crumbs__separator { color: var(--cb-fg-subtle); flex: none; }
 
-.cb-stepper { list-style: none; margin: 0; padding: 0; font-family: var(--cb-font-sans); display: flex; }
-.cb-stepper--horizontal { flex-direction: row; gap: var(--cb-space-5); flex-wrap: wrap; }
-.cb-stepper--vertical { flex-direction: column; gap: var(--cb-space-4); }
-.cb-stepper__step { margin: 0; display: flex; align-items: flex-start; gap: var(--cb-space-3); }
-.cb-stepper__marker {
+.cb-steps { list-style: none; margin: 0; padding: 0; font-family: var(--cb-font-sans); display: flex; }
+.cb-steps--horizontal { flex-direction: row; gap: var(--cb-space-5); flex-wrap: wrap; }
+.cb-steps--vertical { flex-direction: column; gap: var(--cb-space-4); }
+.cb-steps__step { margin: 0; display: flex; align-items: flex-start; gap: var(--cb-space-3); }
+.cb-steps__marker {
   flex: none;
   display: inline-flex;
   align-items: center;
@@ -2199,20 +2558,20 @@ html, body { background: var(--cb-bg); color: var(--cb-fg); }
   color: var(--cb-fg-subtle);
   background: var(--cb-surface);
 }
-.cb-stepper__step[data-state="done"] .cb-stepper__marker {
+.cb-steps__step[data-state="done"] .cb-steps__marker {
   background: var(--cb-tone-success);
   border-color: var(--cb-tone-success);
   color: var(--cb-fg-on-brand);
 }
-.cb-stepper__step[data-state="current"] .cb-stepper__marker {
+.cb-steps__step[data-state="current"] .cb-steps__marker {
   border-color: var(--cb-tone-brand);
   color: var(--cb-tone-brand);
   box-shadow: 0 0 0 3px color-mix(in oklch, var(--cb-tone-brand) 16%, transparent);
 }
-.cb-stepper__text { display: flex; flex-direction: column; gap: 0.125rem; }
-.cb-stepper__label { font-size: var(--cb-text-sm); font-weight: var(--cb-weight-medium); color: var(--cb-fg-muted); }
-.cb-stepper__step[data-state="current"] .cb-stepper__label { color: var(--cb-fg); }
-.cb-stepper__description { font-size: var(--cb-text-xs); color: var(--cb-fg-subtle); }
+.cb-steps__text { display: flex; flex-direction: column; gap: 0.125rem; }
+.cb-steps__label { font-size: var(--cb-text-sm); font-weight: var(--cb-weight-medium); color: var(--cb-fg-muted); }
+.cb-steps__step[data-state="current"] .cb-steps__label { color: var(--cb-fg); }
+.cb-steps__description { font-size: var(--cb-text-xs); color: var(--cb-fg-subtle); }
 
 .cb-sidebar {
   display: flex;
@@ -2323,7 +2682,7 @@ html, body { background: var(--cb-bg); color: var(--cb-fg); }
 .cb-sidebar__item--nested { font-size: var(--cb-text-sm); }
 
 .cb-sidebar__flyout-trigger { display: block; width: 100%; }
-.cb-sidebar__flyout-positioner { z-index: var(--cb-z-popover); }
+.cb-sidebar__flyout-positioner { z-index: var(--cb-z-dropdown); }
 
 /* Collapsed, this is where the labels live. */
 .cb-sidebar__flyout {
@@ -2473,7 +2832,7 @@ html, body { background: var(--cb-bg); color: var(--cb-fg); }
    costs no extra element, and the shadow colour is the same token the dialog backdrop uses. */
 .cb-spotlight {
   position: fixed;
-  z-index: var(--cb-z-coachmark);
+  z-index: var(--cb-z-coachmark-spotlight);
   left: var(--cb-spotlight-x);
   top: var(--cb-spotlight-y);
   width: var(--cb-spotlight-w);
@@ -2493,7 +2852,7 @@ html, body { background: var(--cb-bg); color: var(--cb-fg); }
 
 /* The positioner is what the portal places, so the stacking order has to live here; a z-index
    on the popup alone loses to the spotlight's own layer. */
-.cb-coachmark__positioner { z-index: calc(var(--cb-z-coachmark) + 1); }
+.cb-coachmark__positioner { z-index: var(--cb-z-coachmark); }
 
 .cb-coachmark {
   box-sizing: border-box;