@devslab/dds-css 0.3.0

package/LICENSE

@@ -0,0 +1,74 @@
+DevsLab Source-Available License 1.0
+
+Copyright (c) 2026 DevsLab. All rights reserved.
+
+This license governs the DDS software, design tokens, components, icons,
+documentation, and other materials distributed with this license (the
+"Software").
+
+1. Permitted use
+
+Subject to this license, DevsLab grants you a limited, worldwide,
+non-exclusive, non-transferable, revocable, royalty-free right to:
+
+- download and install unmodified copies of the Software;
+- use and execute the Software for internal or commercial applications;
+- compile, minify, tree-shake, and bundle unmodified Software solely as a
+  technical part of building an application; and
+- distribute the resulting object code only as an inseparable part of that
+  application and not as a standalone library, design system, component kit,
+  template, or asset collection.
+
+Normal application configuration through documented public APIs, design-token
+overrides, CSS custom properties, and component properties is permitted and is
+not considered modification of the Software.
+
+2. Restrictions
+
+Except where applicable law does not allow the restriction, you may not:
+
+- modify, adapt, translate, reverse engineer, or create derivative works of the
+  Software itself;
+- publish, republish, sublicense, sell, rent, host, or redistribute the
+  Software or any modified version as a standalone package or downloadable
+  collection;
+- use the Software or a substantial portion of it to create or operate a
+  competing general-purpose design system, UI kit, component library, icon
+  library, token library, template marketplace, or hosted equivalent;
+- remove or alter copyright, license, attribution, or provenance notices; or
+- use DevsLab names, logos, product marks, or trade dress except to make a
+  truthful statement that an application uses the Software.
+
+No patent, trademark, design, or branding rights are granted except the
+copyright permissions stated in Section 1.
+
+3. Ownership and feedback
+
+The Software is licensed, not sold. DevsLab and its licensors retain all
+right, title, and interest in the Software. You grant DevsLab a perpetual,
+worldwide, irrevocable, royalty-free right to use feedback you voluntarily
+provide about the Software.
+
+4. Termination
+
+This license terminates automatically if you breach it. Upon termination, you
+must stop using and distributing the Software and delete all copies under your
+control. Sections 2, 3, 5, and 6 survive termination.
+
+5. Disclaimer and limitation of liability
+
+THE SOFTWARE IS PROVIDED "AS IS" WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING MERCHANTABILITY, FITNESS FOR A PARTICULAR
+PURPOSE, TITLE, AND NON-INFRINGEMENT. TO THE MAXIMUM EXTENT PERMITTED BY LAW,
+DEVSLAB WILL NOT BE LIABLE FOR ANY INDIRECT, INCIDENTAL, SPECIAL,
+CONSEQUENTIAL, EXEMPLARY, OR PUNITIVE DAMAGES, OR FOR LOSS OF DATA, PROFITS,
+REVENUE, OR BUSINESS, ARISING FROM OR RELATED TO THE SOFTWARE.
+
+6. Governing law
+
+This license is governed by the laws of the Republic of Korea, excluding
+conflict-of-law rules. The Seoul Central District Court has exclusive
+jurisdiction over disputes arising from this license.
+
+This is a source-available license, not an open-source license approved by the
+Open Source Initiative.

package/README.ko.md

@@ -0,0 +1,25 @@
+# @devslab/dds-css
+
+🌐 [English](README.md)
+
+DDS CSS 컴포넌트 레이어 — 클래스 기반, 프레임워크 중립 (스펙 §2: 코어는 CSS,
+React/Vue/Ionic/SSR은 소비자). 스펙 §4.3 v1 인벤토리: **Button, IconButton,
+TextField, Textarea, Select, Checkbox/Radio, Switch, Badge, Chip, Avatar,
+Spinner, Skeleton, Divider, Card, ListRow, Tabs, Dialog, Toast, Tooltip,
+EmptyState** (BottomSheet은 Dialog의 네이티브 짝 — Phase 3).
+
+```html
+<link rel="stylesheet" href=".../dds-tokens/tokens.css"> <!-- 먼저 -->
+<link rel="stylesheet" href=".../dds-css/dds.css">
+<button class="dds-btn dds-btn--primary">저장</button>
+```
+
+- 모든 값이 시맨틱 토큰 참조(`var(--dds-*)`) — `scripts/check-css.mjs`가
+  `src/`의 hex/rgb/hsl/color-mix를 기계적으로 금지하므로, 하드코딩된 색은
+  리뷰가 아니라 CI에서 실패합니다.
+- 다크 모드는 공짜: `<html>` 또는 임의 서브트리에 `data-theme="dark"`
+  (`data-theme="light"`로 되고정). 어떤 컴포넌트에도 다크 분기가 없습니다.
+- 개별 임포트: `@devslab/dds-css/components/button.css` 등.
+- 컴포넌트별 마크업 계약·상태·접근성 체크리스트·do/don't:
+  [`docs/components.ko.md`](../../docs/components.ko.md).
+  라이브 레퍼런스: `preview/components.html` (먼저 `pnpm build`).

package/README.md

@@ -0,0 +1,26 @@
+# @devslab/dds-css
+
+🌐 [한국어](README.ko.md)
+
+DDS CSS component layer — class-based and framework-neutral (spec §2: the
+core is CSS; React/Vue/Ionic/SSR are consumers). The spec §4.3 v1
+inventory: **Button, IconButton, TextField, Textarea, Select,
+Checkbox/Radio, Switch, Badge, Chip, Avatar, Spinner, Skeleton, Divider,
+Card, ListRow, Tabs, Dialog, Toast, Tooltip, EmptyState** (BottomSheet is
+the native counterpart of Dialog — Phase 3).
+
+```html
+<link rel="stylesheet" href=".../dds-tokens/tokens.css"> <!-- first -->
+<link rel="stylesheet" href=".../dds-css/dds.css">
+<button class="dds-btn dds-btn--primary">Save</button>
+```
+
+- Every value is a semantic token reference (`var(--dds-*)`) —
+  `scripts/check-css.mjs` mechanically bans hex/rgb/hsl/color-mix in `src/`,
+  so a hardcoded color fails CI, not review.
+- Dark mode is free: `data-theme="dark"` on `<html>` or any subtree
+  (`data-theme="light"` pins back). No component has a dark branch.
+- Per-component imports: `@devslab/dds-css/components/button.css` etc.
+- Markup contracts, states, accessibility checklists and do/don't per
+  component: [`docs/components.md`](../../docs/components.md).
+  Live reference: `preview/components.html` (run `pnpm build` first).

package/dist/components/avatar.css

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

package/dist/components/badge.css

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

package/dist/components/base.css

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

package/dist/components/button.css

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

package/dist/components/card.css

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

package/dist/components/checkbox-radio.css

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

package/dist/components/chip.css

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

package/dist/components/dialog.css

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

package/dist/components/divider.css

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

package/dist/components/emptystate.css

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