@devslab/dds-css 0.3.0

package/dist/dds.css

@@ -0,0 +1,1206 @@
+/* @devslab/dds-css — generated bundle, do not edit. Source: src/*.css
+ * Requires @devslab/dds-tokens/tokens.css to be loaded first. */
+
+/* dds-css shared plumbing. Components reference ONLY semantic tokens
+ * (var(--dds-*)) — tokens.css must be loaded first. */
+[class^="dds-"],
+[class*=" dds-"] {
+  box-sizing: border-box;
+}
+
+[dir="rtl"] .dds-icon--directional {
+  transform: scaleX(-1);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root [class^="dds-"],
+  :root [class*=" dds-"] {
+    animation-duration: 0.01ms;
+    animation-iteration-count: 1;
+    scroll-behavior: auto;
+    transition-duration: 0.01ms;
+  }
+}
+
+@media (forced-colors: active) {
+  [class^="dds-"],
+  [class*=" dds-"] {
+    forced-color-adjust: auto;
+  }
+
+  :is([class^="dds-"], [class*=" dds-"]):focus-visible {
+    outline-color: Highlight;
+  }
+}
+
+/* Button — spec §4.2: default → hover → pressed → focus-visible → disabled → loading.
+ * Variants: primary / secondary / ghost / danger. Sizes: sm / md(default) / lg.
+ * Control heights come from the spacing scale (32/40/48); type from the typo
+ * scale (label for sm/md, body-1 size for lg). Loading = aria-busy="true" with
+ * a .dds-spinner child. */
+
+.dds-btn {
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--dds-space-8);
+  min-block-size: var(--dds-space-40);
+  padding-block: var(--dds-space-8);
+  padding-inline: var(--dds-space-16);
+  border: 1px solid transparent;
+  border-radius: var(--dds-radius-md);
+  background: none;
+  font-family: var(--dds-font-family-sans);
+  font-size: var(--dds-typo-label-font-size);
+  line-height: var(--dds-typo-label-line-height);
+  font-weight: var(--dds-typo-label-font-weight);
+  color: var(--dds-color-text-primary);
+  cursor: pointer;
+  transition: background-color var(--dds-motion-duration-fast) var(--dds-motion-easing-standard);
+  -webkit-tap-highlight-color: transparent;
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
+
+.dds-btn:focus-visible {
+  outline: var(--dds-space-2) solid var(--dds-color-border-focus);
+  outline-offset: var(--dds-space-2);
+}
+
+/* opacity is allowed for disabled only (spec §4.2) */
+.dds-btn[disabled],
+.dds-btn[aria-busy="true"] {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+.dds-btn[aria-busy="true"] {
+  pointer-events: none;
+}
+
+/* variants ---------------------------------------------------------------- */
+
+.dds-btn--primary {
+  background: var(--dds-color-bg-brand);
+  color: var(--dds-color-text-on-brand); /* zinc.950, not white — spec §3.1 on-brand note */
+  font-weight: 600;
+}
+.dds-btn--primary:not([disabled]):not([aria-busy="true"]):hover {
+  background: var(--dds-color-bg-brand-hover);
+}
+.dds-btn--primary:not([disabled]):active {
+  background: var(--dds-color-bg-brand-hover);
+  box-shadow: inset 0 0 0 999px var(--dds-color-overlay-pressed-tint);
+}
+
+.dds-btn--secondary {
+  border-color: var(--dds-color-border-strong);
+}
+.dds-btn--secondary:not([disabled]):not([aria-busy="true"]):hover {
+  background: var(--dds-color-overlay-hover-tint);
+}
+.dds-btn--secondary:not([disabled]):active {
+  background: var(--dds-color-overlay-pressed-tint);
+}
+
+.dds-btn--ghost {
+  color: var(--dds-color-text-brand);
+}
+.dds-btn--ghost:not([disabled]):not([aria-busy="true"]):hover {
+  background: var(--dds-color-overlay-hover-tint);
+}
+.dds-btn--ghost:not([disabled]):active {
+  background: var(--dds-color-overlay-pressed-tint);
+}
+
+.dds-btn--danger {
+  background: var(--dds-color-status-danger);
+  color: var(--dds-color-text-on-status);
+  font-weight: 600;
+}
+.dds-btn--danger:not([disabled]):not([aria-busy="true"]):hover {
+  box-shadow: inset 0 0 0 999px var(--dds-color-overlay-hover-tint);
+}
+.dds-btn--danger:not([disabled]):active {
+  box-shadow: inset 0 0 0 999px var(--dds-color-overlay-pressed-tint);
+}
+
+/* sizes ------------------------------------------------------------------- */
+
+.dds-btn--sm {
+  min-block-size: var(--dds-space-32);
+  padding-block: var(--dds-space-4);
+  padding-inline: var(--dds-space-12);
+}
+
+.dds-btn--lg {
+  min-block-size: var(--dds-space-48);
+  padding-block: var(--dds-space-12);
+  padding-inline: var(--dds-space-20);
+  font-size: var(--dds-typo-body-1-font-size);
+  line-height: var(--dds-typo-body-1-line-height);
+}
+
+@media (pointer: coarse) {
+  .dds-btn,
+  .dds-btn--sm {
+    min-block-size: 44px;
+  }
+}
+
+/* IconButton — a Button whose only content is an icon (spec §4.3 v1 inventory).
+ * Same state set and sizes as .dds-btn (32/40/48 from the spacing scale) so an
+ * icon button never lands a few px off the text button next to it — the row
+ * misalignment this house rejects. The icon inherits currentColor.
+ * Markup MUST carry an accessible name: aria-label (spec §6). */
+
+.dds-iconbtn {
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  inline-size: var(--dds-space-40);
+  block-size: var(--dds-space-40);
+  border: 1px solid transparent;
+  border-radius: var(--dds-radius-md);
+  background: none;
+  color: var(--dds-color-text-primary);
+  cursor: pointer;
+  transition: background-color var(--dds-motion-duration-fast) var(--dds-motion-easing-standard);
+  -webkit-tap-highlight-color: transparent;
+}
+
+.dds-iconbtn:not([disabled]):hover {
+  background: var(--dds-color-overlay-hover-tint);
+}
+.dds-iconbtn:not([disabled]):active {
+  background: var(--dds-color-overlay-pressed-tint);
+}
+.dds-iconbtn:focus-visible {
+  outline: var(--dds-space-2) solid var(--dds-color-border-focus);
+  outline-offset: var(--dds-space-2);
+}
+
+/* opacity is allowed for disabled only (spec §4.2) */
+.dds-iconbtn[disabled] {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+/* variants ---------------------------------------------------------------- */
+
+.dds-iconbtn--secondary {
+  border-color: var(--dds-color-border-strong);
+}
+
+.dds-iconbtn--danger {
+  color: var(--dds-color-status-danger);
+}
+
+/* sizes ------------------------------------------------------------------- */
+
+/* --sm is 32×32: still above the 24×24 web floor, but below the 44×44 mobile
+ * target — on touch surfaces keep the default size (spec §6). */
+.dds-iconbtn--sm {
+  inline-size: var(--dds-space-32);
+  block-size: var(--dds-space-32);
+}
+
+.dds-iconbtn--lg {
+  inline-size: var(--dds-space-48);
+  block-size: var(--dds-space-48);
+}
+
+@media (pointer: coarse) {
+  .dds-iconbtn,
+  .dds-iconbtn--sm {
+    min-inline-size: 44px;
+    min-block-size: 44px;
+  }
+}
+
+/* TextField — label + input + help, error via .dds-field--error OR
+ * aria-invalid="true" on the input (markup should set aria-invalid +
+ * aria-describedby; error is never conveyed by border color alone — the
+ * help line carries the message, spec §6). */
+
+.dds-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--dds-space-4);
+  font-family: var(--dds-font-family-sans);
+}
+
+.dds-field__label {
+  font-size: var(--dds-typo-label-font-size);
+  line-height: var(--dds-typo-label-line-height);
+  font-weight: var(--dds-typo-label-font-weight);
+  color: var(--dds-color-text-primary);
+}
+
+.dds-input {
+  font-family: var(--dds-font-family-sans);
+  font-size: var(--dds-typo-body-2-font-size);
+  line-height: var(--dds-typo-body-2-line-height);
+  font-weight: var(--dds-typo-body-2-font-weight);
+  height: var(--dds-space-40);
+  padding: 0 var(--dds-space-12);
+  background: var(--dds-color-bg-default);
+  color: var(--dds-color-text-primary);
+  border: 1px solid var(--dds-color-border-strong);
+  border-radius: var(--dds-radius-md);
+}
+
+.dds-input::placeholder {
+  color: var(--dds-color-text-muted);
+}
+
+.dds-input:focus-visible {
+  outline: var(--dds-space-2) solid var(--dds-color-border-focus);
+  outline-offset: 0;
+  border-color: transparent;
+}
+
+/* opacity is allowed for disabled only (spec §4.2) */
+.dds-input[disabled] {
+  opacity: 0.45;
+  cursor: not-allowed;
+  background: var(--dds-color-bg-subtle);
+}
+
+.dds-field__help {
+  font-size: var(--dds-typo-caption-font-size);
+  line-height: var(--dds-typo-caption-line-height);
+  font-weight: var(--dds-typo-caption-font-weight);
+  color: var(--dds-color-text-muted);
+}
+
+.dds-field--error .dds-input,
+.dds-input[aria-invalid="true"] {
+  border-color: var(--dds-color-status-danger);
+}
+.dds-field--error .dds-field__help {
+  color: var(--dds-color-status-danger);
+}
+
+/* Textarea — the multi-line member of the TextField family: it lives in the
+ * same .dds-field wrapper and shares label/help/error behavior with .dds-input.
+ * Row rule from the house UI discipline: a textarea gets its own row, never a
+ * row shared with single-line controls (their heights can't be reconciled).
+ * min-height is two control heights so an empty textarea already reads as
+ * multi-line. */
+
+.dds-textarea {
+  font-family: var(--dds-font-family-sans);
+  font-size: var(--dds-typo-body-2-font-size);
+  line-height: var(--dds-typo-body-2-line-height);
+  font-weight: var(--dds-typo-body-2-font-weight);
+  min-height: calc(var(--dds-space-40) * 2);
+  padding: var(--dds-space-8) var(--dds-space-12);
+  background: var(--dds-color-bg-default);
+  color: var(--dds-color-text-primary);
+  border: 1px solid var(--dds-color-border-strong);
+  border-radius: var(--dds-radius-md);
+  resize: vertical;
+}
+
+.dds-textarea::placeholder {
+  color: var(--dds-color-text-muted);
+}
+
+.dds-textarea:focus-visible {
+  outline: var(--dds-space-2) solid var(--dds-color-border-focus);
+  outline-offset: 0;
+  border-color: transparent;
+}
+
+/* opacity is allowed for disabled only (spec §4.2) */
+.dds-textarea[disabled] {
+  opacity: 0.45;
+  cursor: not-allowed;
+  background: var(--dds-color-bg-subtle);
+}
+
+.dds-field--error .dds-textarea,
+.dds-textarea[aria-invalid="true"] {
+  border-color: var(--dds-color-status-danger);
+}
+
+/* Select — native <select> with the native arrow replaced. Leaving the OS
+ * arrow in place is a rejection criterion in this house: the same control
+ * then looks different on every platform and never matches the input next to
+ * it. The wrapper owns the chevron so the element stays a real <select>
+ * (keyboard, mobile pickers, form semantics all free).
+ *
+ * Markup: <span class="dds-select"><select class="dds-select__input">…
+ * Lives inside .dds-field like .dds-input, so label/help/error come for free. */
+
+.dds-select {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  width: 100%;
+}
+
+.dds-select__input {
+  appearance: none;
+  font-family: var(--dds-font-family-sans);
+  font-size: var(--dds-typo-body-2-font-size);
+  line-height: var(--dds-typo-body-2-line-height);
+  font-weight: var(--dds-typo-body-2-font-weight);
+  width: 100%;
+  height: var(--dds-space-40);
+  padding-block: 0;
+  padding-inline: var(--dds-space-12) var(--dds-space-32);
+  background: var(--dds-color-bg-default);
+  color: var(--dds-color-text-primary);
+  border: 1px solid var(--dds-color-border-strong);
+  border-radius: var(--dds-radius-md);
+  cursor: pointer;
+}
+
+.dds-select__input:focus-visible {
+  outline: var(--dds-space-2) solid var(--dds-color-border-focus);
+  outline-offset: 0;
+  border-color: transparent;
+}
+
+/* opacity is allowed for disabled only (spec §4.2) */
+.dds-select__input[disabled] {
+  opacity: 0.45;
+  cursor: not-allowed;
+  background: var(--dds-color-bg-subtle);
+}
+
+.dds-field--error .dds-select__input,
+.dds-select__input[aria-invalid="true"] {
+  border-color: var(--dds-color-status-danger);
+}
+
+/* Chevron glyph geometry (8px box, 1.6px stroke) is drawn, not spaced — the
+ * same allowance as the 6px badge dot. translateY(-70%) centers the drawn
+ * corner, which sits below the box center once rotated. */
+.dds-select::after {
+  content: "";
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-end: var(--dds-space-12);
+  width: 8px;
+  height: 8px;
+  border-inline-end: 1.6px solid var(--dds-color-text-muted);
+  border-block-end: 1.6px solid var(--dds-color-text-muted);
+  transform: translateY(-70%) rotate(45deg);
+  pointer-events: none;
+}
+
+/* Checkbox / Radio — one class for both; the input's own type decides the
+ * shape (square + tick vs circle + dot), so markup never has to declare the
+ * shape twice. The control stays a real <input> (keyboard, form data, AT
+ * roles); only its box is redrawn.
+ *
+ * Box 18px, tick 10×6, dot 8px: glyph geometry, not spacing (same allowance
+ * as the 6px badge dot). The 18px box sits inside a label whose hit area is
+ * the whole row — keep the label text clickable rather than growing the box. */
+
+.dds-check {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--dds-space-8);
+  font-family: var(--dds-font-family-sans);
+  font-size: var(--dds-typo-body-2-font-size);
+  line-height: var(--dds-typo-body-2-line-height);
+  color: var(--dds-color-text-primary);
+  cursor: pointer;
+}
+
+.dds-check__input {
+  appearance: none;
+  flex: none;
+  display: grid;
+  place-items: center;
+  margin: 0;
+  width: 18px;
+  height: 18px;
+  border: 1px solid var(--dds-color-border-strong);
+  border-radius: var(--dds-radius-sm);
+  background: var(--dds-color-bg-default);
+  cursor: inherit;
+  transition: background-color var(--dds-motion-duration-fast) var(--dds-motion-easing-standard);
+}
+
+.dds-check__input[type="radio"] {
+  border-radius: var(--dds-radius-full);
+}
+
+.dds-check__input:not([disabled]):hover {
+  border-color: var(--dds-color-text-muted);
+}
+
+.dds-check__input:checked {
+  background: var(--dds-color-bg-brand);
+  border-color: var(--dds-color-bg-brand);
+}
+
+/* the mark is on-brand (zinc.950), never white — spec §3.1 on-brand note */
+.dds-check__input[type="checkbox"]:checked::before {
+  content: "";
+  width: 10px;
+  height: 6px;
+  border-inline-start: 2px solid var(--dds-color-text-on-brand);
+  border-block-end: 2px solid var(--dds-color-text-on-brand);
+  transform: translateY(-1px) rotate(-45deg);
+}
+
+.dds-check__input[type="checkbox"]:indeterminate::before {
+  content: "";
+  width: 10px;
+  height: 2px;
+  background: var(--dds-color-text-on-brand);
+}
+.dds-check__input[type="checkbox"]:indeterminate {
+  background: var(--dds-color-bg-brand);
+  border-color: var(--dds-color-bg-brand);
+}
+
+.dds-check__input[type="radio"]:checked::before {
+  content: "";
+  width: 8px;
+  height: 8px;
+  border-radius: var(--dds-radius-full);
+  background: var(--dds-color-text-on-brand);
+}
+
+.dds-check__input:focus-visible {
+  outline: var(--dds-space-2) solid var(--dds-color-border-focus);
+  outline-offset: var(--dds-space-2);
+}
+
+/* opacity is allowed for disabled only (spec §4.2) — it goes on the label so
+ * the box and its text dim once, not twice (nested opacity compounds). */
+.dds-check:has(.dds-check__input[disabled]) {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+.dds-check__input[disabled] {
+  cursor: not-allowed;
+}
+
+/* Switch — an immediate on/off (a checkbox that applies itself). Use a
+ * checkbox when the value only takes effect on submit.
+ * Markup: <input type="checkbox" role="switch" class="dds-switch__input">
+ *
+ * Track 36×20 and knob 16px are glyph geometry, not spacing. The knob is
+ * on-brand (zinc.950) when the track is brand-filled — the same rule that
+ * keeps white off cyan (spec §3.1) — and an elevated surface when off, so it
+ * reads as a raised knob in both themes. */
+
+.dds-switch {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--dds-space-8);
+  font-family: var(--dds-font-family-sans);
+  font-size: var(--dds-typo-body-2-font-size);
+  line-height: var(--dds-typo-body-2-line-height);
+  color: var(--dds-color-text-primary);
+  cursor: pointer;
+}
+
+.dds-switch__input {
+  appearance: none;
+  position: relative;
+  flex: none;
+  margin: 0;
+  width: 36px;
+  height: 20px;
+  border-radius: var(--dds-radius-full);
+  background: var(--dds-color-text-muted);
+  cursor: inherit;
+  transition: background-color var(--dds-motion-duration-base) var(--dds-motion-easing-standard);
+}
+
+.dds-switch__input::before {
+  content: "";
+  position: absolute;
+  inset-block-start: 2px;
+  inset-inline-start: 2px;
+  width: 16px;
+  height: 16px;
+  border-radius: var(--dds-radius-full);
+  background: var(--dds-color-bg-elevated);
+  box-shadow: var(--dds-elevation-1);
+  transition: transform var(--dds-motion-duration-base) var(--dds-motion-easing-standard);
+}
+
+.dds-switch__input:checked {
+  background: var(--dds-color-bg-brand);
+}
+.dds-switch__input:checked::before {
+  background: var(--dds-color-text-on-brand);
+  transform: translateX(16px);
+}
+
+[dir="rtl"] .dds-switch__input:checked::before {
+  transform: translateX(-16px);
+}
+
+.dds-switch__input:focus-visible {
+  outline: var(--dds-space-2) solid var(--dds-color-border-focus);
+  outline-offset: var(--dds-space-2);
+}
+
+/* opacity is allowed for disabled only (spec §4.2) — on the label, once */
+.dds-switch:has(.dds-switch__input[disabled]) {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+.dds-switch__input[disabled] {
+  cursor: not-allowed;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .dds-switch__input,
+  .dds-switch__input::before {
+    transition: none;
+  }
+}
+
+/* Badge — brand + the four status pairs. Status colors always ship as
+ * foreground + -bg pair (spec §3.1); the leading dot repeats the state so
+ * color is not the only signal (spec §6). Dot size 6px is glyph geometry,
+ * not spacing (same 6px as the toast dot — keep them identical). */
+
+.dds-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--dds-space-4);
+  font-family: var(--dds-font-family-sans);
+  font-size: var(--dds-typo-label-font-size);
+  line-height: var(--dds-typo-label-line-height);
+  font-weight: var(--dds-typo-label-font-weight);
+  padding: var(--dds-space-2) var(--dds-space-8);
+  border-radius: var(--dds-radius-full);
+  white-space: nowrap;
+}
+
+.dds-badge::before {
+  content: "";
+  flex: none;
+  width: 6px;
+  height: 6px;
+  border-radius: var(--dds-radius-full);
+  background: currentColor;
+}
+
+.dds-badge--brand {
+  color: var(--dds-color-text-brand);
+  background: var(--dds-color-bg-brand-subtle);
+}
+.dds-badge--success {
+  color: var(--dds-color-status-success);
+  background: var(--dds-color-status-success-bg);
+}
+.dds-badge--warning {
+  color: var(--dds-color-status-warning);
+  background: var(--dds-color-status-warning-bg);
+}
+.dds-badge--danger {
+  color: var(--dds-color-status-danger);
+  background: var(--dds-color-status-danger-bg);
+}
+.dds-badge--info {
+  color: var(--dds-color-status-info);
+  background: var(--dds-color-status-info-bg);
+}
+
+/* Chip — a small interactive control: filter toggle, suggested question,
+ * removable tag. Badge and Chip are different components on purpose: a badge
+ * is state you read, a chip is something you press. Never restyle one into
+ * the other (the duplicated-.chip collision this house has already paid for).
+ *
+ * Selected state is carried by aria-pressed="true" (toggle chips) so the
+ * state is announced, not only colored; --selected exists for markup that
+ * can't use aria-pressed (e.g. a link chip). */
+
+.dds-chip {
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--dds-space-4);
+  font-family: var(--dds-font-family-sans);
+  font-size: var(--dds-typo-label-font-size);
+  line-height: var(--dds-typo-label-line-height);
+  font-weight: var(--dds-typo-label-font-weight);
+  padding: var(--dds-space-4) var(--dds-space-12);
+  border: 1px solid var(--dds-color-border-strong);
+  border-radius: var(--dds-radius-full);
+  background: none;
+  color: var(--dds-color-text-primary);
+  cursor: pointer;
+  transition: background-color var(--dds-motion-duration-fast) var(--dds-motion-easing-standard);
+  -webkit-tap-highlight-color: transparent;
+}
+
+.dds-chip:not([disabled]):hover {
+  background: var(--dds-color-overlay-hover-tint);
+}
+.dds-chip:not([disabled]):active {
+  background: var(--dds-color-overlay-pressed-tint);
+}
+.dds-chip:focus-visible {
+  outline: var(--dds-space-2) solid var(--dds-color-border-focus);
+  outline-offset: var(--dds-space-2);
+}
+
+.dds-chip[aria-pressed="true"],
+.dds-chip--selected {
+  background: var(--dds-color-bg-brand-subtle);
+  border-color: var(--dds-color-bg-brand);
+  color: var(--dds-color-text-brand);
+}
+
+/* opacity is allowed for disabled only (spec §4.2) */
+.dds-chip[disabled] {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+/* Avatar — a person or tenant mark: image if there is one, initials if not.
+ * Sizes come from the spacing scale (32/40/48) so an avatar lines up with the
+ * control of the same size in a list row. The initials fallback uses the
+ * brand-subtle pair, which re-tints with the product brand automatically. */
+
+.dds-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: var(--dds-space-40);
+  height: var(--dds-space-40);
+  border-radius: var(--dds-radius-full);
+  overflow: hidden;
+  background: var(--dds-color-bg-brand-subtle);
+  color: var(--dds-color-text-brand);
+  font-family: var(--dds-font-family-sans);
+  font-size: var(--dds-typo-label-font-size);
+  line-height: var(--dds-typo-label-line-height);
+  font-weight: 600;
+  user-select: none;
+}
+
+.dds-avatar__img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.dds-avatar--sm {
+  width: var(--dds-space-32);
+  height: var(--dds-space-32);
+  font-size: var(--dds-typo-caption-font-size);
+  line-height: var(--dds-typo-caption-line-height);
+}
+
+.dds-avatar--lg {
+  width: var(--dds-space-48);
+  height: var(--dds-space-48);
+  font-size: var(--dds-typo-body-1-font-size);
+  line-height: var(--dds-typo-body-1-line-height);
+}
+
+/* square variant for tenants/logos — a company mark in a circle gets clipped */
+.dds-avatar--square {
+  border-radius: var(--dds-radius-md);
+}
+
+/* Spinner — indeterminate progress. Inherits color via currentColor so it
+ * reads correctly on any surface (inside a primary button it spins in
+ * on-brand). The rotation is a continuous state indicator, not a transition,
+ * so its period is not a motion token; under reduced motion it slows down
+ * instead of freezing (a stopped spinner reads as a hang — the motion IS the
+ * state, spec §3.6). Standalone spinners need role="status" + aria-label. */
+
+.dds-spinner {
+  display: inline-block;
+  flex: none;
+  width: var(--dds-space-16);
+  height: var(--dds-space-16);
+  border: 2px solid currentColor;
+  border-top-color: transparent;
+  border-radius: var(--dds-radius-full);
+  animation: dds-spin 800ms linear infinite;
+}
+
+.dds-spinner--lg {
+  width: var(--dds-space-24);
+  height: var(--dds-space-24);
+}
+
+@keyframes dds-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .dds-spinner {
+    animation-duration: 1600ms;
+  }
+}
+
+/* Skeleton — loading placeholder. The fill is an alpha tint (spec §3.1:
+ * overlays/tints are alpha-only) so it sits naturally on default and subtle
+ * backgrounds in both themes. Size is the consumer's job (width/height on
+ * the element); --text matches a line of the surrounding font. Mark the
+ * loading region with aria-busy="true" and keep skeletons aria-hidden. */
+
+.dds-skeleton {
+  display: block;
+  background: var(--dds-color-overlay-pressed-tint);
+  border-radius: var(--dds-radius-sm);
+  animation: dds-skeleton-pulse 1600ms var(--dds-motion-easing-standard) infinite;
+}
+
+.dds-skeleton--text {
+  height: 1em;
+}
+
+.dds-skeleton--circle {
+  border-radius: var(--dds-radius-full);
+}
+
+@keyframes dds-skeleton-pulse {
+  50% {
+    opacity: 0.4;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .dds-skeleton {
+    animation: none;
+  }
+}
+
+/* Divider — a rule between sections. Use <hr class="dds-divider"> when the
+ * split is meaningful; when it is purely decorative next to text that already
+ * separates the groups, add role="presentation".
+ * The vertical variant needs a stretchable parent (flex row / grid cell). */
+
+.dds-divider {
+  border: none;
+  border-top: 1px solid var(--dds-color-border-default);
+  margin: var(--dds-space-16) 0;
+}
+
+.dds-divider--vertical {
+  width: 0;
+  align-self: stretch;
+  border-top: none;
+  border-inline-start: 1px solid var(--dds-color-border-default);
+  margin: 0 var(--dds-space-16);
+}
+
+/* Card — a grouped surface. Border + elevated background carry the grouping;
+ * elevation.1 is the lift. The same shadow token ships in both themes (as it
+ * does for Dialog and Toast): on a zinc.950 page it resolves to almost
+ * nothing, which is the intended dark look — a component may not branch on
+ * theme (spec §3.1: dark is a mapping swap, never an `if (dark)`).
+ *
+ * --subtle is the flat variant for cards inside an already elevated surface
+ * (a card in a dialog), where a second shadow reads as noise. */
+
+.dds-card {
+  background: var(--dds-color-bg-elevated);
+  color: var(--dds-color-text-primary);
+  font-family: var(--dds-font-family-sans);
+  border: 1px solid var(--dds-color-border-default);
+  border-radius: var(--dds-radius-lg);
+  box-shadow: var(--dds-elevation-1);
+  padding: var(--dds-space-16);
+}
+
+.dds-card--subtle {
+  background: var(--dds-color-bg-subtle);
+  box-shadow: none;
+}
+
+.dds-card__title {
+  margin: 0 0 var(--dds-space-4);
+  font-size: var(--dds-typo-title-3-font-size);
+  line-height: var(--dds-typo-title-3-line-height);
+  font-weight: var(--dds-typo-title-3-font-weight);
+}
+
+.dds-card__body {
+  margin: 0;
+  font-size: var(--dds-typo-body-2-font-size);
+  line-height: var(--dds-typo-body-2-line-height);
+  font-weight: var(--dds-typo-body-2-font-weight);
+  color: var(--dds-color-text-secondary);
+}
+
+/* ListRow — one item in a list: leading slot, body (title + sub), trailing
+ * slot. House rule this encodes: rows are self-contained and rich — if the
+ * information fits in the row, it does not get deferred to a detail page.
+ *
+ * --interactive is for rows that are themselves a button/link (use a real
+ * <button> or <a> so keyboard and AT get it for free). The focus ring is
+ * inset because a full-bleed row has no outer margin to draw into. */
+
+.dds-listrow {
+  display: flex;
+  align-items: center;
+  gap: var(--dds-space-12);
+  width: 100%;
+  padding: var(--dds-space-12) var(--dds-space-16);
+  background: none;
+  border: none;
+  text-align: start;
+  font-family: var(--dds-font-family-sans);
+  color: var(--dds-color-text-primary);
+}
+
+.dds-listrow + .dds-listrow {
+  border-top: 1px solid var(--dds-color-border-default);
+}
+
+.dds-listrow__body {
+  flex: 1;
+  min-width: 0;
+}
+
+/* display:block so the two lines stack whether the markup uses <p> or <span>
+ * (a <span> title and sub otherwise render on one line) */
+.dds-listrow__title {
+  display: block;
+  margin: 0;
+  font-size: var(--dds-typo-body-2-font-size);
+  line-height: var(--dds-typo-body-2-line-height);
+  font-weight: var(--dds-typo-label-font-weight);
+  /* long titles truncate rather than reflowing the row height */
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dds-listrow__sub {
+  display: block;
+  margin: 0;
+  font-size: var(--dds-typo-caption-font-size);
+  line-height: var(--dds-typo-caption-line-height);
+  color: var(--dds-color-text-secondary);
+}
+
+.dds-listrow__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--dds-space-4);
+  flex: none;
+}
+
+/* interactive ------------------------------------------------------------- */
+
+.dds-listrow--interactive {
+  cursor: pointer;
+  transition: background-color var(--dds-motion-duration-fast) var(--dds-motion-easing-standard);
+}
+.dds-listrow--interactive:not([disabled]):hover {
+  background: var(--dds-color-overlay-hover-tint);
+}
+.dds-listrow--interactive:not([disabled]):active {
+  background: var(--dds-color-overlay-pressed-tint);
+}
+.dds-listrow--interactive:focus-visible {
+  outline: var(--dds-space-2) solid var(--dds-color-border-focus);
+  outline-offset: calc(var(--dds-space-2) * -1);
+}
+
+/* opacity is allowed for disabled only (spec §4.2) */
+.dds-listrow[disabled] {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+/* Tabs — ink-underline tabs (the shell the admin surfaces converged on).
+ * Markup is the ARIA tabs pattern: .dds-tabs[role="tablist"] >
+ * .dds-tab[role="tab"][aria-selected] each controlling a [role="tabpanel"].
+ * Selection is aria-selected, never a class alone — the state has to be
+ * announced, and color is not the only signal (the underline carries it too).
+ *
+ * The button border-radius reset is deliberate: a shared radius reset leaking
+ * into the underline bows its ends — this house has shipped that bug once. */
+
+.dds-tabs {
+  display: flex;
+  gap: var(--dds-space-4);
+  border-bottom: 1px solid var(--dds-color-border-default);
+  font-family: var(--dds-font-family-sans);
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+.dds-tabs::-webkit-scrollbar {
+  display: none;
+}
+
+.dds-tab {
+  appearance: none;
+  flex: none;
+  padding: var(--dds-space-12);
+  background: none;
+  border: none;
+  border-radius: 0;
+  border-bottom: var(--dds-space-2) solid transparent;
+  /* the underline sits on the tablist's own 1px rule */
+  margin-bottom: -1px;
+  font-family: inherit;
+  font-size: var(--dds-typo-label-font-size);
+  line-height: var(--dds-typo-label-line-height);
+  font-weight: var(--dds-typo-label-font-weight);
+  color: var(--dds-color-text-secondary);
+  white-space: nowrap;
+  cursor: pointer;
+  transition: color var(--dds-motion-duration-fast) var(--dds-motion-easing-standard);
+}
+
+.dds-tab:not([disabled]):hover {
+  color: var(--dds-color-text-primary);
+}
+.dds-tab:focus-visible {
+  outline: var(--dds-space-2) solid var(--dds-color-border-focus);
+  outline-offset: calc(var(--dds-space-2) * -1);
+}
+
+.dds-tab[aria-selected="true"] {
+  color: var(--dds-color-text-brand);
+  border-bottom-color: var(--dds-color-bg-brand);
+}
+
+/* opacity is allowed for disabled only (spec §4.2) */
+.dds-tab[disabled] {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+/* Dialog — overlay + panel. Two markup shapes are supported:
+ *   1. div pattern: .dds-dialog-overlay > .dds-dialog[role="dialog"][aria-modal="true"]
+ *   2. native <dialog class="dds-dialog"> (backdrop styled via ::backdrop)
+ * Behavior contract (spec §5): closes on outside tap and Esc; focus is
+ * trapped while open and returns to the opener on close — that is the
+ * opener JS's job, this file only owns the look. Label the panel with
+ * aria-labelledby pointing at the title. */
+
+.dds-dialog-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: grid;
+  place-items: center;
+  padding: var(--dds-space-16);
+  background: var(--dds-color-overlay-dim);
+}
+
+.dds-dialog {
+  background: var(--dds-color-bg-elevated);
+  color: var(--dds-color-text-primary);
+  font-family: var(--dds-font-family-sans);
+  border-radius: var(--dds-radius-lg);
+  box-shadow: var(--dds-elevation-3);
+  padding: var(--dds-space-20);
+  width: 100%;
+  max-width: 400px; /* layout default, not a token — override per product */
+}
+
+/* native <dialog> resets */
+dialog.dds-dialog {
+  border: none;
+  margin: auto;
+}
+dialog.dds-dialog::backdrop {
+  background: var(--dds-color-overlay-dim);
+}
+
+.dds-dialog__title {
+  margin: 0 0 var(--dds-space-8);
+  font-size: var(--dds-typo-title-2-font-size);
+  line-height: var(--dds-typo-title-2-line-height);
+  font-weight: var(--dds-typo-title-2-font-weight);
+}
+
+.dds-dialog__body {
+  margin: 0 0 var(--dds-space-16);
+  font-size: var(--dds-typo-body-2-font-size);
+  line-height: var(--dds-typo-body-2-line-height);
+  font-weight: var(--dds-typo-body-2-font-weight);
+  color: var(--dds-color-text-secondary);
+}
+
+.dds-dialog__actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--dds-space-8);
+}
+
+/* Toast — transient notice. Region markup:
+ *   .dds-toast-region[role="status"] (polite) — use role="alert" per-toast
+ *   only for danger. Toasts stack bottom-end; entry animates with
+ *   duration.base + easing.enter and respects reduced motion. The status
+ *   dot repeats the tone so color is not the only signal (spec §6) — same
+ *   6px dot as the badge. */
+
+.dds-toast-region {
+  position: fixed;
+  z-index: 1100;
+  inset-block-end: var(--dds-space-16);
+  inset-inline-end: var(--dds-space-16);
+  display: grid;
+  gap: var(--dds-space-8);
+  justify-items: end;
+  pointer-events: none;
+}
+
+.dds-toast {
+  pointer-events: auto;
+  display: flex;
+  align-items: center;
+  gap: var(--dds-space-8);
+  background: var(--dds-color-bg-elevated);
+  color: var(--dds-color-text-primary);
+  font-family: var(--dds-font-family-sans);
+  font-size: var(--dds-typo-body-2-font-size);
+  line-height: var(--dds-typo-body-2-line-height);
+  font-weight: var(--dds-typo-body-2-font-weight);
+  border: 1px solid var(--dds-color-border-default);
+  border-radius: var(--dds-radius-md);
+  box-shadow: var(--dds-elevation-2);
+  padding: var(--dds-space-12) var(--dds-space-16);
+  max-width: min(360px, calc(100vw - var(--dds-space-32)));
+  animation: dds-toast-in var(--dds-motion-duration-base) var(--dds-motion-easing-enter);
+}
+
+.dds-toast--success::before,
+.dds-toast--warning::before,
+.dds-toast--danger::before,
+.dds-toast--info::before {
+  content: "";
+  flex: none;
+  width: 6px;
+  height: 6px;
+  border-radius: var(--dds-radius-full);
+}
+.dds-toast--success::before {
+  background: var(--dds-color-status-success);
+}
+.dds-toast--warning::before {
+  background: var(--dds-color-status-warning);
+}
+.dds-toast--danger::before {
+  background: var(--dds-color-status-danger);
+}
+.dds-toast--info::before {
+  background: var(--dds-color-status-info);
+}
+
+@keyframes dds-toast-in {
+  from {
+    opacity: 0;
+    transform: translateY(var(--dds-space-8));
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .dds-toast {
+    animation: none;
+  }
+}
+
+/* Tooltip (web only — spec §4.3; on native the same information goes in a
+ * label or a sheet). A supplementary hint on an inverse surface, shown on
+ * hover AND focus-within so it is reachable from the keyboard.
+ *
+ * Contract: the tooltip may never carry information that is required to use
+ * the control — an icon button still needs its own aria-label, and the bubble
+ * is referenced with aria-describedby, not aria-label (a describedby bubble
+ * that never opens still reaches AT; a hover-only one does not). */
+
+.dds-tooltip {
+  position: relative;
+  display: inline-flex;
+}
+
+.dds-tooltip__bubble {
+  position: absolute;
+  inset-block-end: calc(100% + var(--dds-space-8));
+  inset-inline-start: 50%;
+  transform: translateX(-50%);
+  z-index: 1200; /* above dialog (1000) and toast (1100) */
+  padding: var(--dds-space-4) var(--dds-space-8);
+  border-radius: var(--dds-radius-sm);
+  background: var(--dds-color-bg-inverse);
+  color: var(--dds-color-text-on-inverse);
+  font-family: var(--dds-font-family-sans);
+  font-size: var(--dds-typo-caption-font-size);
+  line-height: var(--dds-typo-caption-line-height);
+  white-space: nowrap;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity var(--dds-motion-duration-fast) var(--dds-motion-easing-standard);
+}
+
+.dds-tooltip:hover .dds-tooltip__bubble,
+.dds-tooltip:focus-within .dds-tooltip__bubble {
+  opacity: 1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .dds-tooltip__bubble {
+    transition: none;
+  }
+}
+
+/* EmptyState — what a list shows when it has nothing yet. House rule: the
+ * empty view keeps the same skeleton as the filled one (summary chips and
+ * filters stay put) — the empty state replaces the rows, not the screen.
+ *
+ * Layout note for consumers: give the element `display: none`'s job to
+ * [hidden] and never override it with a display rule that lacks a
+ * `[hidden]` guard — a shared .empty that did exactly that once painted
+ * "no results" on top of a populated table. */
+
+.dds-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--dds-space-8);
+  padding: var(--dds-space-40) var(--dds-space-24);
+  border: 1px dashed var(--dds-color-border-strong);
+  border-radius: var(--dds-radius-lg);
+  text-align: center;
+  font-family: var(--dds-font-family-sans);
+  color: var(--dds-color-text-secondary);
+}
+
+.dds-empty[hidden] {
+  display: none;
+}
+
+.dds-empty__title {
+  margin: 0;
+  font-size: var(--dds-typo-title-3-font-size);
+  line-height: var(--dds-typo-title-3-line-height);
+  font-weight: var(--dds-typo-title-3-font-weight);
+  color: var(--dds-color-text-primary);
+}
+
+.dds-empty__desc {
+  margin: 0;
+  max-width: 36em;
+  font-size: var(--dds-typo-body-2-font-size);
+  line-height: var(--dds-typo-body-2-line-height);
+}
+
+.dds-empty__actions {
+  display: flex;
+  gap: var(--dds-space-8);
+  margin-top: var(--dds-space-8);
+}