@digiko-npm/designsystem 0.4.0 → 0.5.0

package/dist/designsystem.css

@@ -1620,6 +1620,24 @@ hr {
 .ds-modal--md .ds-modal__content { max-width: var(--ds-container-md); }
 .ds-modal--lg .ds-modal__content { max-width: var(--ds-container-lg); }
 
+/* Fullscreen on mobile */
+@media (max-width: 1023px) {
+  .ds-modal--fullscreen-mobile .ds-modal__content {
+    max-width: none;
+    max-height: none;
+    width: 100%;
+    height: 100dvh;
+    margin: 0;
+    border-radius: 0;
+    border: none;
+    box-shadow: none;
+  }
+
+  .ds-modal--fullscreen-mobile {
+    padding: 0;
+  }
+}
+
 /* ==========================================================================
    Component: Toast
    ========================================================================== */
@@ -5328,173 +5346,1011 @@ tr:hover .ds-sortable__handle,
   color: var(--ds-color-text-tertiary);
 }
 
-
 /* ==========================================================================
-   Utilities: Layout
-   Container with clamp padding, generous responsive grid.
+   Component: Search
+   Inline search bar with dropdown results, keyboard navigation, and
+   responsive mobile expansion. Distinct from ds-command (modal overlay).
+
+   Usage:
+     <div class="ds-search">
+       <span class="ds-search__icon">...</span>
+       <input class="ds-search__input" placeholder="Search..." />
+       <kbd class="ds-search__shortcut">Ctrl+K</kbd>
+       <button class="ds-search__clear">...</button>
+     </div>
+     <div class="ds-search__dropdown">
+       <div class="ds-search__group">
+         <span class="ds-search__group-label">Pages</span>
+         <button class="ds-search__result ds-search__result--active">
+           <span class="ds-search__result-icon">...</span>
+           <div class="ds-search__result-content">
+             <span class="ds-search__result-title">Page name</span>
+             <span class="ds-search__result-meta">Database</span>
+           </div>
+         </button>
+       </div>
+       <div class="ds-search__empty">No results found.</div>
+     </div>
+
+   Modifiers:
+     .ds-search--mobile-expanded  — Fullscreen bar on mobile
+     .ds-search__dropdown--mobile — Fullscreen dropdown on mobile
+
+   Mobile:
+     .ds-search-mobile-trigger    — Icon button shown on mobile (hidden desktop)
+     .ds-search__close            — Close button inside expanded mobile bar
    ========================================================================== */
 
-/* --- Container --- */
-.ds-container {
+.ds-search {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--ds-space-1);
   width: 100%;
-  max-width: var(--ds-container-max);
-  margin-inline: auto;
-  padding-inline: var(--ds-container-padding);
+  padding: var(--ds-space-2) var(--ds-space-2-5);
+  background: var(--ds-color-surface);
+  border: 1px solid var(--ds-color-border);
+  border-radius: var(--ds-radius-lg);
+  transition:
+    border-color var(--ds-duration-fast) var(--ds-ease-default),
+    box-shadow var(--ds-duration-fast) var(--ds-ease-default);
 }
 
-/* --- Section (generous vertical rhythm) --- */
-.ds-section {
-  padding-block: var(--ds-section-padding);
+.ds-search:focus-within {
+  border-color: var(--ds-color-border-active);
+  box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
 }
 
-/* --- Flex --- */
-.ds-flex       { display: flex; }
-.ds-inline-flex { display: inline-flex; }
-.ds-flex-col   { flex-direction: column; }
-.ds-flex-row   { flex-direction: row; }
-.ds-flex-wrap  { flex-wrap: wrap; }
-.ds-flex-1     { flex: 1 1 0%; }
-.ds-flex-auto  { flex: 1 1 auto; }
-.ds-flex-none  { flex: none; }
-.ds-shrink-0   { flex-shrink: 0; }
+/* Icon */
+.ds-search__icon {
+  color: var(--ds-color-text-tertiary);
+  flex-shrink: 0;
+}
 
-/* --- Alignment --- */
-.ds-items-start    { align-items: flex-start; }
-.ds-items-center   { align-items: center; }
-.ds-items-end      { align-items: flex-end; }
-.ds-items-stretch  { align-items: stretch; }
-.ds-items-baseline { align-items: baseline; }
+/* Input */
+.ds-search__input {
+  flex: 1;
+  min-width: 0;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: var(--ds-color-text);
+  font-size: var(--ds-text-base);
+  font-family: inherit;
+  line-height: 1.25;
+}
 
-.ds-justify-start   { justify-content: flex-start; }
-.ds-justify-center  { justify-content: center; }
-.ds-justify-end     { justify-content: flex-end; }
-.ds-justify-between { justify-content: space-between; }
-.ds-justify-around  { justify-content: space-around; }
-.ds-justify-evenly  { justify-content: space-evenly; }
+.ds-search__input::placeholder {
+  color: var(--ds-color-text-tertiary);
+}
 
-.ds-self-start  { align-self: flex-start; }
-.ds-self-center { align-self: center; }
-.ds-self-end    { align-self: flex-end; }
+/* Keyboard shortcut hint */
+.ds-search__shortcut {
+  flex-shrink: 0;
+  padding: 0.125rem 0.375rem;
+  font-size: var(--ds-text-2xs);
+  font-family: inherit;
+  line-height: 1;
+  color: var(--ds-color-text-tertiary);
+  background: var(--ds-color-bg-elevated);
+  border: 1px solid var(--ds-color-border);
+  border-radius: var(--ds-radius-sm);
+  pointer-events: none;
+  user-select: none;
+}
 
-/* --- Grid --- */
-.ds-grid {
-  display: grid;
-  gap: var(--ds-space-6);
+/* Clear button */
+.ds-search__clear {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 1.25rem;
+  height: 1.25rem;
+  border: none;
+  border-radius: var(--ds-radius-sm);
+  background: transparent;
+  color: var(--ds-color-text-tertiary);
+  cursor: pointer;
+  transition:
+    color var(--ds-duration-fast) var(--ds-ease-default),
+    background-color var(--ds-duration-fast) var(--ds-ease-default);
 }
 
-.ds-grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
-.ds-grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
-.ds-grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
-.ds-grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
+.ds-search__clear:hover {
+  background: var(--ds-color-surface-hover);
+  color: var(--ds-color-text-secondary);
+}
 
-/* --- Column Span --- */
-.ds-col-span-1 { grid-column: span 1 / span 1; }
-.ds-col-span-2 { grid-column: span 2 / span 2; }
-.ds-col-span-3 { grid-column: span 3 / span 3; }
-.ds-col-span-4 { grid-column: span 4 / span 4; }
-.ds-col-span-full { grid-column: 1 / -1; }
+/* Dropdown results panel */
+.ds-search__dropdown {
+  position: fixed;
+  max-height: min(22rem, calc(100dvh - 5rem));
+  overflow-y: auto;
+  background: var(--ds-color-bg-elevated);
+  border: 1px solid var(--ds-color-border);
+  border-radius: var(--ds-radius-lg);
+  box-shadow: var(--ds-shadow-lg);
+  z-index: var(--ds-z-tooltip);
+  padding: var(--ds-space-1) 0;
+}
 
-@media (min-width: 640px) {
-  .ds-sm\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
-  .ds-sm\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
+/* Result groups */
+.ds-search__group {
+  padding: var(--ds-space-1) 0;
 }
 
-@media (min-width: 768px) {
-  .ds-md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
-  .ds-md\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
-  .ds-md\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
-  .ds-md\:col-span-1  { grid-column: span 1 / span 1; }
-  .ds-md\:col-span-2  { grid-column: span 2 / span 2; }
-  .ds-md\:col-span-3  { grid-column: span 3 / span 3; }
-  .ds-md\:flex-row { flex-direction: row; }
+.ds-search__group + .ds-search__group {
+  border-top: 1px solid var(--ds-color-border);
 }
 
-@media (min-width: 1024px) {
-  .ds-lg\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
-  .ds-lg\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
-  .ds-lg\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
-  .ds-lg\:col-span-1  { grid-column: span 1 / span 1; }
-  .ds-lg\:col-span-2  { grid-column: span 2 / span 2; }
-  .ds-lg\:col-span-3  { grid-column: span 3 / span 3; }
+.ds-search__group-label {
+  display: block;
+  padding: var(--ds-space-1) var(--ds-space-3);
+  font-size: var(--ds-text-2xs);
+  font-weight: var(--ds-weight-medium);
+  color: var(--ds-color-text-tertiary);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
 }
 
-/* --- Gap --- */
-.ds-gap-0  { gap: var(--ds-space-0); }
-.ds-gap-1  { gap: var(--ds-space-1); }
-.ds-gap-2  { gap: var(--ds-space-2); }
-.ds-gap-3  { gap: var(--ds-space-3); }
-.ds-gap-4  { gap: var(--ds-space-4); }
-.ds-gap-5  { gap: var(--ds-space-5); }
-.ds-gap-6  { gap: var(--ds-space-6); }
-.ds-gap-8  { gap: var(--ds-space-8); }
-.ds-gap-10 { gap: var(--ds-space-10); }
-.ds-gap-12 { gap: var(--ds-space-12); }
-.ds-gap-16 { gap: var(--ds-space-16); }
-.ds-gap-20 { gap: var(--ds-space-20); }
+/* Individual result */
+.ds-search__result {
+  display: flex;
+  align-items: center;
+  gap: var(--ds-space-2);
+  width: 100%;
+  padding: var(--ds-space-2-5) var(--ds-space-3);
+  border: none;
+  background: transparent;
+  color: var(--ds-color-text);
+  font-size: var(--ds-text-sm);
+  font-family: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition: background-color var(--ds-duration-fast) var(--ds-ease-default);
+}
 
-/* --- Display --- */
-.ds-block        { display: block; }
-.ds-inline-block { display: inline-block; }
-.ds-inline       { display: inline; }
-.ds-hidden       { display: none; }
+.ds-search__result:hover,
+.ds-search__result--active {
+  background: var(--ds-color-surface-hover);
+}
 
-@media (min-width: 768px) {
-  .ds-md\:hidden { display: none; }
-  .ds-md\:block  { display: block; }
-  .ds-md\:flex   { display: flex; }
+.ds-search__result:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
 }
 
-/* --- Position --- */
-.ds-relative { position: relative; }
-.ds-absolute { position: absolute; }
-.ds-fixed    { position: fixed; }
-.ds-sticky   { position: sticky; top: 0; }
+.ds-search__result-icon {
+  color: var(--ds-color-text-tertiary);
+  flex-shrink: 0;
+}
 
-/* --- Overflow --- */
-.ds-overflow-hidden { overflow: hidden; }
-.ds-overflow-auto   { overflow: auto; }
-.ds-overflow-x-auto { overflow-x: auto; }
+.ds-search__result-db-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: var(--ds-radius-md);
+  flex-shrink: 0;
+}
 
-/* --- Width/Height --- */
-.ds-w-full    { width: 100%; }
-.ds-h-full    { height: 100%; }
-.ds-h-screen  { height: 100dvh; }
-.ds-min-h-screen { min-height: 100dvh; }
+.ds-search__result-content {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
 
-/* --- Stack (vertical spacing) ---
-   :where() lowers specificity so ds-mt-* can override individual children. */
-:where(.ds-stack) > * + * {
-  margin-top: var(--ds-space-4);
+.ds-search__result-title {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+  line-height: var(--ds-leading-snug);
 }
 
-:where(.ds-stack--sm) > * + *  { margin-top: var(--ds-space-2); }
-:where(.ds-stack--lg) > * + *  { margin-top: var(--ds-space-8); }
-:where(.ds-stack--xl) > * + *  { margin-top: var(--ds-space-12); }
-:where(.ds-stack--2xl) > * + * { margin-top: var(--ds-space-16); }
-:where(.ds-stack--3xl) > * + * { margin-top: var(--ds-space-24); }
+.ds-search__result-meta {
+  font-size: var(--ds-text-2xs);
+  line-height: var(--ds-leading-snug);
+  color: var(--ds-color-text-tertiary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 
-/* --- Center content --- */
-.ds-center {
+/* Empty state */
+.ds-search__empty {
   display: flex;
   align-items: center;
   justify-content: center;
+  padding: var(--ds-space-4) var(--ds-space-2);
+  color: var(--ds-color-text-tertiary);
+  font-size: var(--ds-text-sm);
 }
 
-/* --- Fixed Sizing --- */
-.ds-w-0\.5 { width: var(--ds-space-0-5); }
-.ds-w-2\.5 { width: var(--ds-space-2-5); }
-.ds-w-3   { width: var(--ds-space-3); }
-.ds-w-4   { width: var(--ds-space-4); }
-.ds-w-5   { width: var(--ds-space-5); }
-.ds-w-8   { width: var(--ds-space-8); }
-.ds-w-9   { width: 2.25rem; }
-.ds-w-10  { width: var(--ds-space-10); }
-
-.ds-h-2\.5 { height: var(--ds-space-2-5); }
-.ds-h-3   { height: var(--ds-space-3); }
-.ds-h-4   { height: var(--ds-space-4); }
-.ds-h-5   { height: var(--ds-space-5); }
-.ds-h-8   { height: var(--ds-space-8); }
+/* Mobile trigger (hidden on desktop) */
+.ds-search-mobile-trigger {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  width: 2.25rem;
+  height: 2.25rem;
+  border: none;
+  border-radius: var(--ds-radius-md);
+  background: transparent;
+  color: var(--ds-color-text);
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: background-color var(--ds-duration-fast) var(--ds-ease-default);
+}
+
+@media (hover: hover) {
+  .ds-search-mobile-trigger:hover {
+    background-color: var(--ds-color-surface-hover);
+  }
+}
+
+/* Close button (mobile expanded) */
+.ds-search__close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.25rem;
+  height: 2.25rem;
+  border: none;
+  border-radius: var(--ds-radius-md);
+  background: transparent;
+  color: var(--ds-color-text);
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+/* Responsive: mobile */
+@media (max-width: 1023px) {
+  .ds-search__shortcut { display: none; }
+  .ds-search-mobile-trigger { display: flex; }
+  .ds-search { display: none; }
+
+  .ds-search--mobile-expanded {
+    display: flex;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: var(--ds-search-bar-height, 3.5rem);
+    z-index: var(--ds-z-dropdown);
+    border: none;
+    border-bottom: 1px solid var(--ds-color-border);
+    border-radius: 0;
+    padding: 0 var(--ds-space-3);
+    background: var(--ds-color-nav-bg);
+    backdrop-filter: blur(20px) saturate(1.5);
+    -webkit-backdrop-filter: blur(20px) saturate(1.5);
+  }
+
+  .ds-search__dropdown--mobile {
+    left: 0 !important;
+    right: 0;
+    width: auto !important;
+    border-radius: 0;
+    border-left: none;
+    border-right: none;
+    max-height: calc(100dvh - var(--ds-search-bar-height, 3.5rem));
+    background: var(--ds-color-surface);
+    backdrop-filter: blur(20px) saturate(1.5);
+    -webkit-backdrop-filter: blur(20px) saturate(1.5);
+  }
+}
+
+/* ==========================================================================
+   Component: Toolbar
+   Fixed bar with rows of actions: toolbar buttons, filter chips, segmented
+   controls, and scrollable groups. Common in data-heavy UIs below a header.
+
+   Usage:
+     <div class="ds-toolbar">
+       <div class="ds-toolbar__row">
+         <div class="ds-toolbar__group">...</div>
+         <div class="ds-toolbar__spacer"></div>
+         <div class="ds-toolbar__group">
+           <button class="ds-toolbar__btn ds-toolbar__btn--active">
+             <span>Filter</span>
+             <span class="ds-toolbar__badge">3</span>
+           </button>
+           <button class="ds-toolbar__btn">Sort</button>
+         </div>
+       </div>
+     </div>
+
+   Modifiers:
+     .ds-toolbar__row--scroll      — Horizontally scrollable row
+     .ds-toolbar__btn--active      — Active/toggled button
+     .ds-toolbar__group--scroll    — Scrollable group within a row
+
+   Segmented control:
+     <div class="ds-toolbar__segmented">
+       <button class="ds-toolbar__segmented-btn ds-toolbar__segmented-btn--active">Past</button>
+       <button class="ds-toolbar__segmented-btn">Future</button>
+     </div>
+   ========================================================================== */
+
+/* Row container */
+.ds-toolbar__row {
+  display: flex;
+  align-items: center;
+  height: var(--ds-toolbar-row-height, 2.5rem);
+  gap: var(--ds-space-3);
+  padding-inline: var(--ds-space-4);
+}
+
+.ds-toolbar__row--scroll {
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.ds-toolbar__row--scroll::-webkit-scrollbar { display: none; }
+
+/* Group (flex row of items) */
+.ds-toolbar__group {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.ds-toolbar__group--scroll {
+  flex-shrink: 1;
+  min-width: 0;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.ds-toolbar__group--scroll::-webkit-scrollbar { display: none; }
+
+/* Spacer */
+.ds-toolbar__spacer {
+  flex: 1 1 0;
+}
+
+/* Toolbar button */
+.ds-toolbar__btn {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ds-space-1-5);
+  padding: var(--ds-space-1) var(--ds-space-2-5);
+  font-size: var(--ds-text-xs);
+  font-weight: var(--ds-weight-medium);
+  font-family: inherit;
+  color: var(--ds-color-text-tertiary);
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--ds-radius-md);
+  cursor: pointer;
+  white-space: nowrap;
+  transition:
+    color var(--ds-duration-fast) var(--ds-ease-default),
+    background-color var(--ds-duration-fast) var(--ds-ease-default),
+    border-color var(--ds-duration-fast) var(--ds-ease-default);
+}
+
+.ds-toolbar__btn:hover {
+  color: var(--ds-color-text-secondary);
+  background: var(--ds-color-surface-hover);
+}
+
+.ds-toolbar__btn:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
+}
+
+.ds-toolbar__btn--active {
+  color: var(--ds-color-text);
+  background: var(--ds-color-surface);
+  border-color: var(--ds-color-border);
+}
+
+/* Badge (count indicator inside button) */
+.ds-toolbar__badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1rem;
+  height: 1rem;
+  padding: 0 0.25rem;
+  font-size: 0.625rem;
+  font-weight: 600;
+  line-height: 1;
+  color: var(--ds-color-on-inverted);
+  background: var(--ds-color-interactive);
+  border-radius: var(--ds-radius-full);
+}
+
+/* Eye toggle (visibility) */
+.ds-toolbar__eye {
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  opacity: 0.7;
+  transition: opacity var(--ds-duration-fast) var(--ds-ease-default);
+}
+
+.ds-toolbar__eye:hover {
+  opacity: 1;
+}
+
+/* Segmented control */
+.ds-toolbar__segmented {
+  flex-shrink: 0;
+  display: flex;
+  background: var(--ds-color-surface);
+  border-radius: var(--ds-radius-md);
+  padding: 2px;
+}
+
+.ds-toolbar__segmented-btn {
+  padding: var(--ds-space-1) var(--ds-space-3);
+  font-size: var(--ds-text-xs);
+  font-weight: var(--ds-weight-medium);
+  color: var(--ds-color-text-tertiary);
+  border: none;
+  border-radius: var(--ds-radius-sm);
+  background: transparent;
+  cursor: pointer;
+  transition:
+    color var(--ds-duration-fast) var(--ds-ease-default),
+    background-color var(--ds-duration-fast) var(--ds-ease-default);
+}
+
+.ds-toolbar__segmented-btn:hover {
+  color: var(--ds-color-text-secondary);
+}
+
+.ds-toolbar__segmented-btn--active {
+  background: var(--ds-color-bg-elevated);
+  color: var(--ds-color-text);
+}
+
+/* Responsive: mobile */
+@media (max-width: 1023px) {
+  .ds-toolbar__row {
+    padding-inline: var(--ds-space-3);
+    gap: var(--ds-space-2);
+  }
+
+  .ds-toolbar__btn-label { display: none; }
+
+  .ds-toolbar__btn {
+    padding: var(--ds-space-2);
+    min-width: var(--ds-size-2);
+    min-height: var(--ds-size-2);
+    justify-content: center;
+  }
+
+  .ds-toolbar__badge {
+    font-size: 0.5rem;
+    min-width: 0.875rem;
+    height: 0.875rem;
+  }
+}
+
+/* ==========================================================================
+   Component: Chip
+   Interactive filter/sort chips with optional remove button. Distinct from
+   ds-tag (which is a static label). Chips represent active filter state.
+
+   Usage:
+     <span class="ds-chip">
+       Status: Active
+       <button class="ds-chip__remove">×</button>
+     </span>
+     <button class="ds-chip ds-chip--logic">AND</button>
+     <span class="ds-chip ds-chip--sort">Date ↑</span>
+
+   Modifiers:
+     .ds-chip--logic  — AND/OR toggle chip (clickable, no bg)
+     .ds-chip--sort   — Sort indicator (dashed border)
+   ========================================================================== */
+
+.ds-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ds-space-1);
+  padding: var(--ds-space-0-5) var(--ds-space-2);
+  font-size: var(--ds-text-xs);
+  font-family: inherit;
+  color: var(--ds-color-text-secondary);
+  background: var(--ds-color-bg-elevated);
+  border: 1px solid var(--ds-color-border);
+  border-radius: var(--ds-radius-full);
+  white-space: nowrap;
+}
+
+/* Logic chip (AND/OR toggle) */
+.ds-chip--logic {
+  cursor: pointer;
+  font-weight: 600;
+  color: var(--ds-color-text-tertiary);
+  background: transparent;
+  border-color: var(--ds-color-border);
+  transition: background-color var(--ds-duration-fast) var(--ds-ease-default);
+}
+
+.ds-chip--logic:hover {
+  background: var(--ds-color-surface-hover);
+}
+
+/* Sort chip (dashed border) */
+.ds-chip--sort {
+  border-style: dashed;
+}
+
+/* Remove button */
+.ds-chip__remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  border: none;
+  border-radius: var(--ds-radius-full);
+  background: transparent;
+  color: var(--ds-color-text-tertiary);
+  cursor: pointer;
+  transition:
+    color var(--ds-duration-fast) var(--ds-ease-default),
+    background-color var(--ds-duration-fast) var(--ds-ease-default);
+}
+
+.ds-chip__remove:hover {
+  color: var(--ds-color-text);
+  background: var(--ds-color-surface-hover);
+}
+
+/* ==========================================================================
+   Component: Icon Button
+   Standalone icon button for actions, toolbar items, and table rows.
+   A minimal interactive element that wraps a single icon.
+
+   Usage:
+     <button class="ds-icon-btn">
+       <svg>...</svg>
+     </button>
+     <button class="ds-icon-btn ds-icon-btn--sm">...</button>
+     <button class="ds-icon-btn ds-icon-btn--danger">...</button>
+
+   Sizes:
+     .ds-icon-btn--xs  — 24px (var(--ds-size-1))
+     .ds-icon-btn--sm  — 28px
+     (default)         — 32px (var(--ds-size-2))
+     .ds-icon-btn--lg  — 40px (var(--ds-size-3))
+
+   Modifiers:
+     .ds-icon-btn--danger  — Error color on hover
+     .ds-icon-btn--ghost   — No background change, color-only transition
+   ========================================================================== */
+
+.ds-icon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--ds-size-2);
+  height: var(--ds-size-2);
+  padding: var(--ds-space-1-5);
+  border: none;
+  border-radius: var(--ds-radius-lg);
+  background: transparent;
+  color: var(--ds-color-text-tertiary);
+  cursor: pointer;
+  flex-shrink: 0;
+  transition:
+    color var(--ds-duration-fast) var(--ds-ease-default),
+    background-color var(--ds-duration-fast) var(--ds-ease-default);
+}
+
+.ds-icon-btn:hover {
+  background-color: var(--ds-color-surface-hover);
+  color: var(--ds-color-text-secondary);
+}
+
+.ds-icon-btn:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
+}
+
+.ds-icon-btn:disabled,
+.ds-icon-btn[aria-disabled="true"] {
+  opacity: var(--ds-opacity-disabled);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* Sizes */
+.ds-icon-btn--xs {
+  width: var(--ds-size-1);
+  height: var(--ds-size-1);
+  padding: var(--ds-space-0-5);
+  border-radius: var(--ds-radius-md);
+}
+
+.ds-icon-btn--sm {
+  width: 1.75rem;
+  height: 1.75rem;
+  padding: var(--ds-space-1);
+  border-radius: var(--ds-radius-md);
+}
+
+.ds-icon-btn--lg {
+  width: var(--ds-size-3);
+  height: var(--ds-size-3);
+  padding: var(--ds-space-2);
+}
+
+/* Danger variant */
+.ds-icon-btn--danger:hover {
+  color: var(--ds-color-error);
+  background-color: color-mix(in srgb, var(--ds-color-error) 10%, transparent);
+}
+
+/* Ghost variant (color only, no bg) */
+.ds-icon-btn--ghost {
+  padding: 0;
+  width: auto;
+  height: auto;
+}
+
+.ds-icon-btn--ghost:hover {
+  background: transparent;
+  color: var(--ds-color-text);
+}
+
+/* ==========================================================================
+   Component: Bottom Nav
+   Mobile bottom navigation bar. Hidden on desktop, shown on mobile.
+   Fixed to bottom with safe-area insets for notched devices.
+
+   Usage:
+     <nav class="ds-bottom-nav">
+       <a href="/" class="ds-bottom-nav__item ds-bottom-nav__item--active">
+         <span class="ds-bottom-nav__icon">
+           <svg>...</svg>
+           <span class="ds-bottom-nav__badge">3</span>
+         </span>
+         <span class="ds-bottom-nav__label">Home</span>
+       </a>
+       <button class="ds-bottom-nav__item ds-bottom-nav__item--create">
+         <span class="ds-bottom-nav__create-icon">+</span>
+         <span class="ds-bottom-nav__label">New</span>
+       </button>
+     </nav>
+
+   Modifiers:
+     .ds-bottom-nav__item--active  — Active/current tab
+     .ds-bottom-nav__item--create  — Elevated center action button
+   ========================================================================== */
+
+.ds-bottom-nav {
+  display: none;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: var(--ds-z-dropdown);
+  background: var(--ds-color-surface);
+  border-top: 1px solid var(--ds-color-border);
+  padding-bottom: env(safe-area-inset-bottom, 0px);
+}
+
+@media (max-width: 1023px) {
+  .ds-bottom-nav {
+    display: flex;
+    justify-content: space-around;
+    align-items: stretch;
+  }
+}
+
+@media (min-width: 1024px) {
+  .ds-bottom-nav { display: none !important; }
+}
+
+/* Nav item */
+.ds-bottom-nav__item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ds-space-1);
+  flex: 1;
+  padding: var(--ds-space-2) 0;
+  color: var(--ds-color-text-tertiary);
+  text-decoration: none;
+  border: none;
+  background: none;
+  cursor: pointer;
+  font: inherit;
+  transition: color var(--ds-duration-fast) var(--ds-ease-default);
+  -webkit-tap-highlight-color: transparent;
+}
+
+.ds-bottom-nav__item--active {
+  color: var(--ds-color-text);
+}
+
+/* Icon wrapper */
+.ds-bottom-nav__icon {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Notification badge */
+.ds-bottom-nav__badge {
+  position: absolute;
+  top: -4px;
+  right: -8px;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 4px;
+  border-radius: var(--ds-radius-full);
+  background: var(--ds-color-error);
+  color: #fff;
+  font-size: 10px;
+  font-weight: 600;
+  line-height: 16px;
+  text-align: center;
+}
+
+/* Label */
+.ds-bottom-nav__label {
+  font-size: 10px;
+  font-weight: var(--ds-weight-medium);
+  letter-spacing: 0.02em;
+}
+
+/* Create button — elevated center icon */
+.ds-bottom-nav__create-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.25rem;
+  height: 2.25rem;
+  border-radius: var(--ds-radius-full);
+  background: var(--ds-color-text);
+  color: var(--ds-color-bg-base);
+}
+
+.ds-bottom-nav__item--create {
+  color: var(--ds-color-text-tertiary);
+}
+
+/* ==========================================================================
+   Component: Spinner
+   CSS-only loading spinner using border animation.
+
+   Usage:
+     <span class="ds-spinner"></span>
+     <span class="ds-spinner ds-spinner--sm"></span>
+     <span class="ds-spinner ds-spinner--muted"></span>
+
+   Sizes:
+     .ds-spinner--sm  — 1.25rem (20px)
+     (default)        — 1.5rem (24px)
+     .ds-spinner--lg  — 2rem (32px)
+
+   Variants:
+     (default)          — Border + interactive top
+     .ds-spinner--muted — Inverted colors (for dark backgrounds)
+     .ds-spinner--light — Light colors (for inverted/colored backgrounds)
+   ========================================================================== */
+
+.ds-spinner {
+  display: inline-block;
+  width: 1.5rem;
+  height: 1.5rem;
+  border: 2px solid var(--ds-color-border);
+  border-top-color: var(--ds-color-interactive);
+  border-radius: var(--ds-radius-full);
+  animation: ds-spin 0.8s linear infinite;
+}
+
+@keyframes ds-spin {
+  to { transform: rotate(360deg); }
+}
+
+/* Sizes */
+.ds-spinner--sm {
+  width: 1rem;
+  height: 1rem;
+}
+
+.ds-spinner--md {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.ds-spinner--lg {
+  width: 2rem;
+  height: 2rem;
+}
+
+/* Color variants */
+.ds-spinner--muted {
+  border-color: var(--ds-color-inverted);
+  border-top-color: transparent;
+}
+
+.ds-spinner--light {
+  border-color: var(--ds-color-on-inverted);
+  border-top-color: transparent;
+}
+
+
+/* ==========================================================================
+   Utilities: Layout
+   Container with clamp padding, generous responsive grid.
+   ========================================================================== */
+
+/* --- Container --- */
+.ds-container {
+  width: 100%;
+  max-width: var(--ds-container-max);
+  margin-inline: auto;
+  padding-inline: var(--ds-container-padding);
+}
+
+/* --- Section (generous vertical rhythm) --- */
+.ds-section {
+  padding-block: var(--ds-section-padding);
+}
+
+/* --- Flex --- */
+.ds-flex       { display: flex; }
+.ds-inline-flex { display: inline-flex; }
+.ds-flex-col   { flex-direction: column; }
+.ds-flex-row   { flex-direction: row; }
+.ds-flex-wrap  { flex-wrap: wrap; }
+.ds-flex-1     { flex: 1 1 0%; }
+.ds-flex-auto  { flex: 1 1 auto; }
+.ds-flex-none  { flex: none; }
+.ds-shrink-0   { flex-shrink: 0; }
+
+/* --- Alignment --- */
+.ds-items-start    { align-items: flex-start; }
+.ds-items-center   { align-items: center; }
+.ds-items-end      { align-items: flex-end; }
+.ds-items-stretch  { align-items: stretch; }
+.ds-items-baseline { align-items: baseline; }
+
+.ds-justify-start   { justify-content: flex-start; }
+.ds-justify-center  { justify-content: center; }
+.ds-justify-end     { justify-content: flex-end; }
+.ds-justify-between { justify-content: space-between; }
+.ds-justify-around  { justify-content: space-around; }
+.ds-justify-evenly  { justify-content: space-evenly; }
+
+.ds-self-start  { align-self: flex-start; }
+.ds-self-center { align-self: center; }
+.ds-self-end    { align-self: flex-end; }
+
+/* --- Grid --- */
+.ds-grid {
+  display: grid;
+  gap: var(--ds-space-6);
+}
+
+.ds-grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
+.ds-grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
+.ds-grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
+.ds-grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
+
+/* --- Column Span --- */
+.ds-col-span-1 { grid-column: span 1 / span 1; }
+.ds-col-span-2 { grid-column: span 2 / span 2; }
+.ds-col-span-3 { grid-column: span 3 / span 3; }
+.ds-col-span-4 { grid-column: span 4 / span 4; }
+.ds-col-span-full { grid-column: 1 / -1; }
+
+@media (min-width: 640px) {
+  .ds-sm\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
+  .ds-sm\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
+}
+
+@media (min-width: 768px) {
+  .ds-md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
+  .ds-md\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
+  .ds-md\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
+  .ds-md\:col-span-1  { grid-column: span 1 / span 1; }
+  .ds-md\:col-span-2  { grid-column: span 2 / span 2; }
+  .ds-md\:col-span-3  { grid-column: span 3 / span 3; }
+  .ds-md\:flex-row { flex-direction: row; }
+}
+
+@media (min-width: 1024px) {
+  .ds-lg\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
+  .ds-lg\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
+  .ds-lg\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
+  .ds-lg\:col-span-1  { grid-column: span 1 / span 1; }
+  .ds-lg\:col-span-2  { grid-column: span 2 / span 2; }
+  .ds-lg\:col-span-3  { grid-column: span 3 / span 3; }
+}
+
+/* --- Gap --- */
+.ds-gap-0  { gap: var(--ds-space-0); }
+.ds-gap-1  { gap: var(--ds-space-1); }
+.ds-gap-2  { gap: var(--ds-space-2); }
+.ds-gap-3  { gap: var(--ds-space-3); }
+.ds-gap-4  { gap: var(--ds-space-4); }
+.ds-gap-5  { gap: var(--ds-space-5); }
+.ds-gap-6  { gap: var(--ds-space-6); }
+.ds-gap-8  { gap: var(--ds-space-8); }
+.ds-gap-10 { gap: var(--ds-space-10); }
+.ds-gap-12 { gap: var(--ds-space-12); }
+.ds-gap-16 { gap: var(--ds-space-16); }
+.ds-gap-20 { gap: var(--ds-space-20); }
+
+/* --- Display --- */
+.ds-block        { display: block; }
+.ds-inline-block { display: inline-block; }
+.ds-inline       { display: inline; }
+.ds-hidden       { display: none; }
+
+@media (min-width: 768px) {
+  .ds-md\:hidden { display: none; }
+  .ds-md\:block  { display: block; }
+  .ds-md\:flex   { display: flex; }
+}
+
+/* --- Position --- */
+.ds-relative { position: relative; }
+.ds-absolute { position: absolute; }
+.ds-fixed    { position: fixed; }
+.ds-sticky   { position: sticky; top: 0; }
+
+/* --- Overflow --- */
+.ds-overflow-hidden { overflow: hidden; }
+.ds-overflow-auto   { overflow: auto; }
+.ds-overflow-x-auto { overflow-x: auto; }
+
+/* --- Width/Height --- */
+.ds-w-full    { width: 100%; }
+.ds-h-full    { height: 100%; }
+.ds-h-screen  { height: 100dvh; }
+.ds-min-h-screen { min-height: 100dvh; }
+
+/* --- Stack (vertical spacing) ---
+   :where() lowers specificity so ds-mt-* can override individual children. */
+:where(.ds-stack) > * + * {
+  margin-top: var(--ds-space-4);
+}
+
+:where(.ds-stack--sm) > * + *  { margin-top: var(--ds-space-2); }
+:where(.ds-stack--lg) > * + *  { margin-top: var(--ds-space-8); }
+:where(.ds-stack--xl) > * + *  { margin-top: var(--ds-space-12); }
+:where(.ds-stack--2xl) > * + * { margin-top: var(--ds-space-16); }
+:where(.ds-stack--3xl) > * + * { margin-top: var(--ds-space-24); }
+
+/* --- Center content --- */
+.ds-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* --- Fixed Sizing --- */
+.ds-w-0\.5 { width: var(--ds-space-0-5); }
+.ds-w-2\.5 { width: var(--ds-space-2-5); }
+.ds-w-3   { width: var(--ds-space-3); }
+.ds-w-4   { width: var(--ds-space-4); }
+.ds-w-5   { width: var(--ds-space-5); }
+.ds-w-8   { width: var(--ds-space-8); }
+.ds-w-9   { width: 2.25rem; }
+.ds-w-10  { width: var(--ds-space-10); }
+
+.ds-h-2\.5 { height: var(--ds-space-2-5); }
+.ds-h-3   { height: var(--ds-space-3); }
+.ds-h-4   { height: var(--ds-space-4); }
+.ds-h-5   { height: var(--ds-space-5); }
+.ds-h-8   { height: var(--ds-space-8); }
 .ds-h-9   { height: 2.25rem; }
 .ds-h-10  { height: var(--ds-space-10); }
 .ds-h-11  { height: 2.75rem; }
@@ -6050,4 +6906,121 @@ tr:hover .ds-sortable__handle,
   border-width: 0;
 }
 
+/* ==========================================================================
+   Utilities: Interactive
+   Hover states, reveal patterns, focus rings, and cursor utilities.
+   ========================================================================== */
+
+/* --- Hover Row (background elevation on hover) --- */
+.ds-hover-row {
+  transition: background-color var(--ds-duration-fast) var(--ds-ease-default);
+}
+.ds-hover-row:hover {
+  background-color: var(--ds-color-bg-elevated);
+}
+
+/* Subtle variant (semi-transparent) */
+.ds-hover-row--subtle {
+  transition: background-color var(--ds-duration-fast) var(--ds-ease-default);
+}
+.ds-hover-row--subtle:hover {
+  background-color: color-mix(in srgb, var(--ds-color-bg-elevated) 50%, transparent);
+}
+
+/* --- Group Reveal (children appear on parent hover) --- */
+.ds-reveal {
+  opacity: 0;
+  transition: opacity var(--ds-duration-fast) var(--ds-ease-default);
+}
+.group:hover > .ds-reveal,
+.group:hover .ds-reveal {
+  opacity: 1;
+}
+
+/* --- Editable Cell (pointer + bg on hover) --- */
+.ds-editable {
+  cursor: pointer;
+  border-radius: var(--ds-radius-default);
+  transition: background-color var(--ds-duration-fast) var(--ds-ease-default);
+}
+.ds-editable:hover {
+  background-color: var(--ds-color-surface-hover);
+}
+
+/* --- Hover Border --- */
+.ds-hover-border {
+  transition: border-color var(--ds-duration-fast) var(--ds-ease-default);
+}
+.ds-hover-border:hover {
+  border-color: var(--ds-color-border-hover);
+}
+
+/* --- Hover Zoom (scale on hover) --- */
+.ds-hover-zoom {
+  transition: transform var(--ds-duration-fast) var(--ds-ease-default);
+}
+.ds-hover-zoom:hover {
+  transform: scale(1.05);
+}
+
+/* --- Opacity Hover (dim → full on hover) --- */
+.ds-opacity-hover {
+  opacity: 0.5;
+  transition: opacity var(--ds-duration-fast) var(--ds-ease-default);
+}
+.ds-opacity-hover:hover {
+  opacity: 1;
+}
+
+/* --- Focus Ring (inset ring for custom inputs) --- */
+.ds-focus-ring:focus {
+  border-color: var(--ds-color-border-active);
+  box-shadow: inset 0 0 0 1px var(--ds-color-border-active);
+  outline: none;
+}
+
+/* --- Ring States --- */
+.ds-ring-active {
+  box-shadow: 0 0 0 2px var(--ds-color-border-active);
+}
+
+.ds-ring-selected {
+  box-shadow: 0 0 0 2px var(--ds-color-interactive), 0 0 0 3px var(--ds-color-surface);
+}
+
+/* --- Semi-transparent Backgrounds --- */
+.ds-bg-elevated-50 {
+  background-color: color-mix(in srgb, var(--ds-color-bg-elevated) 50%, transparent);
+}
+
+.ds-bg-base-50 {
+  background-color: color-mix(in srgb, var(--ds-color-bg-base) 50%, transparent);
+}
+
+/* --- Hover Color Variants --- */
+.ds-hover-text-error:hover {
+  color: var(--ds-color-error);
+}
+
+.ds-hover-bg-error:hover {
+  background-color: color-mix(in srgb, var(--ds-color-error) 10%, transparent);
+}
+
+/* --- Cursor Utilities --- */
+.ds-cursor-grab {
+  cursor: grab;
+}
+.ds-cursor-grab:active {
+  cursor: grabbing;
+}
+
+/* --- Grip Icon (secondary → primary on group hover) --- */
+.ds-grip {
+  color: var(--ds-color-text-secondary);
+  transition: color var(--ds-duration-fast) var(--ds-ease-default);
+}
+.group:hover .ds-grip {
+  color: var(--ds-color-text);
+}
+