@digiko-npm/designsystem 0.3.34 → 0.5.0

package/dist/designsystem.css

@@ -1,4 +1,4 @@
-/* @ds/designsystem v0.3.34 */
+/* @ds/designsystem v0.4.0 */
 /* ==========================================================================
    @digiko-npm/designsystem
 
@@ -711,8 +711,8 @@ hr {
 }
 
 .ds-btn:focus-visible {
-  outline: var(--ds-ring-width) solid var(--ds-ring-color);
-  outline-offset: var(--ds-ring-offset);
+  outline: none;
+  box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
 }
 
 .ds-btn:disabled,
@@ -895,8 +895,11 @@ hr {
   transform: translateY(-4px);
 }
 .ds-card--interactive:focus-visible {
-  outline: var(--ds-ring-width) solid var(--ds-ring-color);
-  outline-offset: var(--ds-ring-offset);
+  outline: none;
+  box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
+}
+.ds-card--interactive:hover:focus-visible {
+  box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color), var(--ds-shadow-lg);
 }
 
 /* Elevated card — visible shadow */
@@ -948,6 +951,9 @@ hr {
   object-fit: cover;
   background-color: var(--ds-color-bg-elevated);
 }
+.ds-card__media--square { aspect-ratio: 1; }
+.ds-card__media--video { aspect-ratio: 16/9; }
+.ds-card__media--auto { aspect-ratio: auto; }
 
 /* Compact */
 .ds-card--compact .ds-card__header,
@@ -1011,10 +1017,14 @@ hr {
   margin-bottom: var(--ds-space-1-5);
 }
 
+.ds-input,
+.ds-textarea {
+  width: 100%;
+}
+
 .ds-input,
 .ds-textarea,
 .ds-select {
-  width: 100%;
   padding: 0 var(--ds-space-4);
   font-family: var(--ds-font-sans);
   font-size: var(--ds-text-base); /* 16px — prevents iOS auto-zoom on focus */
@@ -1130,6 +1140,50 @@ hr {
   padding-right: var(--ds-space-8);
 }
 
+/* --- Layout Modifiers ---
+   Override default width/display/chrome assumptions. */
+
+/* Full width (opt-in for select, already default for input/textarea) */
+.ds-select--full {
+  width: 100%;
+}
+
+/* Flush — naked input inside a styled container.
+   No border, no background, no padding, no focus ring.
+   The container handles visual chrome. */
+.ds-input--flush {
+  background: transparent;
+  border: none;
+  padding: 0;
+  border-radius: 0;
+  box-shadow: none;
+  height: auto;
+}
+.ds-input--flush:hover {
+  border-color: transparent;
+}
+.ds-input--flush:focus-visible {
+  border-color: transparent;
+  box-shadow: none;
+}
+
+/* Inline — auto-width for use in flex rows */
+.ds-input--inline {
+  width: auto;
+  display: inline-flex;
+}
+
+/* --- Input Group: icon-right ---
+   Move icon to the right side, flip input padding. */
+.ds-input-group--icon-right .ds-input-group__icon {
+  left: auto;
+  right: var(--ds-space-3);
+}
+.ds-input-group--icon-right .ds-input {
+  padding-left: var(--ds-space-4);
+  padding-right: calc(var(--ds-space-3) + 1rem + var(--ds-space-2));
+}
+
 /* Help text */
 .ds-help {
   font-size: var(--ds-text-xs);
@@ -1336,8 +1390,8 @@ hr {
 }
 
 .ds-nav__link:focus-visible {
-  outline: var(--ds-ring-width) solid var(--ds-ring-color);
-  outline-offset: var(--ds-ring-offset);
+  outline: none;
+  box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
 }
 
 .ds-nav__link--active {
@@ -1370,8 +1424,8 @@ hr {
 }
 
 .ds-nav__icon-btn:focus-visible {
-  outline: var(--ds-ring-width) solid var(--ds-ring-color);
-  outline-offset: var(--ds-ring-offset);
+  outline: none;
+  box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
 }
 
 /* --- Mobile nav overlay --- */
@@ -1449,8 +1503,8 @@ hr {
 }
 
 .ds-sidebar__link:focus-visible {
-  outline: var(--ds-ring-width) solid var(--ds-ring-color);
-  outline-offset: calc(-1 * var(--ds-ring-offset));
+  outline: none;
+  box-shadow: inset 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
 }
 
 .ds-sidebar__link--active {
@@ -1543,8 +1597,8 @@ hr {
   color: var(--ds-color-text);
 }
 .ds-modal__close:focus-visible {
-  outline: var(--ds-ring-width) solid var(--ds-ring-color);
-  outline-offset: var(--ds-ring-offset);
+  outline: none;
+  box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
 }
 
 .ds-modal__body {
@@ -1566,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
    ========================================================================== */
@@ -1624,8 +1696,8 @@ hr {
   color: var(--ds-color-text);
 }
 .ds-toast__close:focus-visible {
-  outline: var(--ds-ring-width) solid var(--ds-ring-color);
-  outline-offset: var(--ds-ring-offset);
+  outline: none;
+  box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
 }
 
 @keyframes ds-toast-in {
@@ -1805,8 +1877,8 @@ hr {
 }
 
 .ds-tab:focus-visible {
-  outline: var(--ds-ring-width) solid var(--ds-ring-color);
-  outline-offset: var(--ds-ring-offset);
+  outline: none;
+  box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
   border-radius: var(--ds-radius-sm);
 }
 
@@ -1970,8 +2042,8 @@ hr {
 }
 
 .ds-alert__close:focus-visible {
-  outline: var(--ds-ring-width) solid var(--ds-ring-color);
-  outline-offset: var(--ds-ring-offset);
+  outline: none;
+  box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
 }
 
 /* --- Compact Variant --- */
@@ -2144,6 +2216,11 @@ hr {
   transform-origin: bottom right;
 }
 
+/* --- Width variants --- */
+.ds-dropdown__menu--sm { min-width: 8rem; }
+.ds-dropdown__menu--lg { min-width: 20rem; }
+.ds-dropdown__menu--auto { min-width: auto; }
+
 /* --- Menu item --- */
 
 .ds-dropdown__item {
@@ -2167,8 +2244,8 @@ hr {
   color: var(--ds-color-text);
 }
 .ds-dropdown__item:focus-visible {
-  outline: var(--ds-ring-width) solid var(--ds-ring-color);
-  outline-offset: calc(-1 * var(--ds-ring-offset));
+  outline: none;
+  box-shadow: inset 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
 }
 
 .ds-dropdown__item--active {
@@ -2666,6 +2743,12 @@ hr {
   border-radius: var(--ds-radius-xl);
 }
 
+/* --- Left-aligned variant --- */
+.ds-empty-state--left {
+  align-items: flex-start;
+  text-align: left;
+}
+
 
 /* === Tier 2 — Common === */
 /* ==========================================================================
@@ -2728,8 +2811,8 @@ hr {
 }
 
 .ds-datepicker__trigger:focus-visible {
-  outline: var(--ds-ring-width) solid var(--ds-ring-color);
-  outline-offset: var(--ds-ring-offset);
+  outline: none;
+  box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
 }
 
 /* Calendar panel */
@@ -2795,8 +2878,8 @@ hr {
   color: var(--ds-color-text);
 }
 .ds-datepicker__nav:focus-visible {
-  outline: var(--ds-ring-width) solid var(--ds-ring-color);
-  outline-offset: calc(-1 * var(--ds-ring-offset));
+  outline: none;
+  box-shadow: inset 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
 }
 
 /* Weekday header row */
@@ -2844,8 +2927,8 @@ hr {
   background-color: var(--ds-color-bg-elevated);
 }
 .ds-datepicker__day:focus-visible {
-  outline: var(--ds-ring-width) solid var(--ds-ring-color);
-  outline-offset: calc(-1 * var(--ds-ring-offset));
+  outline: none;
+  box-shadow: inset 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
 }
 
 /* Today — subtle ring */
@@ -2899,8 +2982,8 @@ hr {
   border-color: var(--ds-color-border-hover);
 }
 .ds-datepicker__today:focus-visible {
-  outline: var(--ds-ring-width) solid var(--ds-ring-color);
-  outline-offset: var(--ds-ring-offset);
+  outline: none;
+  box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
 }
 
 /* Step arrows — prev/next day buttons beside the date text */
@@ -2926,8 +3009,8 @@ hr {
   color: var(--ds-color-text);
 }
 .ds-datepicker__step:focus-visible {
-  outline: var(--ds-ring-width) solid var(--ds-ring-color);
-  outline-offset: calc(-1 * var(--ds-ring-offset));
+  outline: none;
+  box-shadow: inset 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
 }
 
 /* Compact mode — for inline table cells */
@@ -3049,8 +3132,8 @@ hr {
    --------------------------------------------------------------------------- */
 
 .ds-toggle:focus-visible {
-  outline: var(--ds-ring-width) solid var(--ds-ring-color);
-  outline-offset: var(--ds-ring-offset);
+  outline: none;
+  box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
 }
 
 /* ---------------------------------------------------------------------------
@@ -3169,8 +3252,8 @@ hr {
 }
 
 .ds-breadcrumb__link:focus-visible {
-  outline: var(--ds-ring-width) solid var(--ds-ring-color);
-  outline-offset: var(--ds-ring-offset);
+  outline: none;
+  box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
   border-radius: var(--ds-radius-sm);
 }
 
@@ -3255,8 +3338,8 @@ hr {
 }
 
 .ds-pagination__item:focus-visible {
-  outline: var(--ds-ring-width) solid var(--ds-ring-color);
-  outline-offset: var(--ds-ring-offset);
+  outline: none;
+  box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
 }
 
 /* ---------------------------------------------------------------------------
@@ -3314,8 +3397,8 @@ hr {
 
 .ds-pagination__prev:focus-visible,
 .ds-pagination__next:focus-visible {
-  outline: var(--ds-ring-width) solid var(--ds-ring-color);
-  outline-offset: var(--ds-ring-offset);
+  outline: none;
+  box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
 }
 
 .ds-pagination__prev:disabled,
@@ -3407,6 +3490,7 @@ hr {
 /* Tags used as <button> for selection — no focus ring on click */
 button.ds-tag:focus-visible {
   outline: none;
+  box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
 }
 
 /* ---------------------------------------------------------------------------
@@ -3489,8 +3573,8 @@ button.ds-tag:focus-visible {
 }
 
 .ds-tag__remove:focus-visible {
-  outline: var(--ds-ring-width) solid var(--ds-ring-color);
-  outline-offset: var(--ds-ring-offset);
+  outline: none;
+  box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
   opacity: 1;
 }
 
@@ -3611,8 +3695,8 @@ button.ds-tag:focus-visible {
   background-color: var(--ds-color-overlay);
 }
 .ds-accordion__trigger:focus-visible {
-  outline: var(--ds-ring-width) solid var(--ds-ring-color);
-  outline-offset: var(--ds-ring-offset);
+  outline: none;
+  box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
 }
 
 /* Open state – rotate chevron */
@@ -3875,8 +3959,8 @@ button.ds-tag:focus-visible {
   color: var(--ds-color-text);
 }
 .ds-drawer__close:focus-visible {
-  outline: var(--ds-ring-width) solid var(--ds-ring-color);
-  outline-offset: var(--ds-ring-offset);
+  outline: none;
+  box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
 }
 
 /* ==========================================================================
@@ -4163,8 +4247,8 @@ button.ds-tag:focus-visible {
     background-color var(--ds-duration-fast) var(--ds-ease-default);
 }
 .ds-drop-zone:focus-visible {
-  outline: var(--ds-ring-width) solid var(--ds-ring-color);
-  outline-offset: var(--ds-ring-offset);
+  outline: none;
+  box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
 }
 
 :root:not(.dark) .ds-drop-zone {
@@ -4299,8 +4383,8 @@ button.ds-tag:focus-visible {
 
 .ds-custom-select__trigger:focus-visible {
   border-color: var(--ds-color-border-active);
-  outline: var(--ds-ring-width) solid var(--ds-ring-color);
-  outline-offset: -1px;
+  outline: none;
+  box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
 }
 
 .ds-custom-select__trigger--open {
@@ -4467,8 +4551,8 @@ button.ds-tag:focus-visible {
   color: var(--ds-color-text);
 }
 .ds-custom-select__option:focus-visible {
-  outline: var(--ds-ring-width) solid var(--ds-ring-color);
-  outline-offset: calc(-1 * var(--ds-ring-offset));
+  outline: none;
+  box-shadow: inset 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
 }
 
 .ds-custom-select__option--selected {
@@ -4621,6 +4705,12 @@ tr:hover .ds-sortable__handle,
   opacity: 1;
 }
 
+.ds-sortable__handle:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
+  border-radius: var(--ds-radius-sm);
+}
+
 tr:hover .ds-sortable__handle,
 .ds-sortable-row:hover .ds-sortable__handle {
   color: var(--ds-color-text-secondary);
@@ -4831,12 +4921,12 @@ tr:hover .ds-sortable__handle,
 /* Focus ring */
 .ds-slider input[type="range"]:focus-visible::-webkit-slider-thumb {
   outline: var(--ds-ring-width) solid var(--ds-ring-color);
-  outline-offset: var(--ds-ring-offset);
+  outline-offset: 0;
 }
 
 .ds-slider input[type="range"]:focus-visible::-moz-range-thumb {
   outline: var(--ds-ring-width) solid var(--ds-ring-color);
-  outline-offset: var(--ds-ring-offset);
+  outline-offset: 0;
 }
 
 /* Labels row */
@@ -5215,8 +5305,8 @@ tr:hover .ds-sortable__handle,
   color: var(--ds-color-text);
 }
 .ds-command__item:focus-visible {
-  outline: var(--ds-ring-width) solid var(--ds-ring-color);
-  outline-offset: calc(-1 * var(--ds-ring-offset));
+  outline: none;
+  box-shadow: inset 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
 }
 
 /* Item icon */
@@ -5256,102 +5346,940 @@ 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; }
-
-/* --- 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);
+/* Icon */
+.ds-search__icon {
+  color: var(--ds-color-text-tertiary);
+  flex-shrink: 0;
 }
 
-.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); }
+/* 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;
 }
 
-@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__input::placeholder {
+  color: var(--ds-color-text-tertiary);
 }
 
-@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; }
+/* 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;
 }
 
-/* --- 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); }
+/* 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-search__clear:hover {
+  background: var(--ds-color-surface-hover);
+  color: var(--ds-color-text-secondary);
+}
+
+/* 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;
+}
+
+/* Result groups */
+.ds-search__group {
+  padding: var(--ds-space-1) 0;
+}
+
+.ds-search__group + .ds-search__group {
+  border-top: 1px solid var(--ds-color-border);
+}
+
+.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;
+}
+
+/* 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);
+}
+
+.ds-search__result:hover,
+.ds-search__result--active {
+  background: var(--ds-color-surface-hover);
+}
+
+.ds-search__result:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
+}
+
+.ds-search__result-icon {
+  color: var(--ds-color-text-tertiary);
+  flex-shrink: 0;
+}
+
+.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;
+}
+
+.ds-search__result-content {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.ds-search__result-title {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+  line-height: var(--ds-leading-snug);
+}
+
+.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;
+}
+
+/* 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);
+}
+
+/* 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); }
@@ -5978,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);
+}
+