@devslab/dds-css 0.3.0

package/dist/components/iconbutton.css

@@ -0,0 +1,71 @@
+/* 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;
+  }
+}

package/dist/components/listrow.css

@@ -0,0 +1,81 @@
+/* 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;
+}

package/dist/components/select.css

@@ -0,0 +1,66 @@
+/* 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;
+}

package/dist/components/skeleton.css

@@ -0,0 +1,32 @@
+/* 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;
+  }
+}

package/dist/components/spinner.css

@@ -0,0 +1,34 @@
+/* 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;
+  }
+}

package/dist/components/switch.css

@@ -0,0 +1,78 @@
+/* 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;
+  }
+}

package/dist/components/tabs.css

@@ -0,0 +1,59 @@
+/* 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;
+}

package/dist/components/textarea.css

@@ -0,0 +1,42 @@
+/* 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);
+}

package/dist/components/textfield.css

@@ -0,0 +1,63 @@
+/* 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);
+}

package/dist/components/toast.css

@@ -0,0 +1,72 @@
+/* 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;
+  }
+}

package/dist/components/tooltip.css

@@ -0,0 +1,43 @@
+/* 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;
+  }
+}