@adamarant/designsystem 0.11.2

package/src/components/search.css

@@ -0,0 +1,311 @@
+/* ==========================================================================
+   Component: Search
+   Inline search bar with dropdown results, keyboard navigation, and
+   responsive mobile expansion. Distinct from ds-command (modal overlay).
+
+   ARIA requirements (consumer responsibility):
+   - Container: role="search" on wrapper or parent <form>
+   - Input: role="combobox", aria-expanded="true|false", aria-controls="[list-id]"
+   - Dropdown: role="listbox" with id matching aria-controls
+   - Results: role="option", aria-selected="true" on active result
+   - Clear button: aria-label="Clear search"
+   - Keyboard: ArrowUp/Down to navigate, Enter to select, Escape to close
+
+   Usage:
+     <div class="ds-search" role="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" aria-label="Clear search">...</button>
+     </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
+   ========================================================================== */
+
+.ds-search {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--ds-space-1);
+  width: 100%;
+  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);
+  container-type: inline-size;
+}
+
+/* Container query: hide shortcut hint when search is narrow */
+@container (max-width: 240px) {
+  .ds-search__shortcut { display: none; }
+}
+
+.ds-search:focus-within {
+  border-color: var(--ds-color-border-active);
+  box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
+}
+
+@media (hover: hover) {
+  .ds-search:hover:not(:focus-within) {
+    background: var(--ds-color-surface-hover);
+    border-color: var(--ds-color-border-hover);
+  }
+}
+
+/* Icon */
+.ds-search__icon {
+  color: var(--ds-color-text-tertiary);
+  flex-shrink: 0;
+}
+
+/* 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-search__input::placeholder {
+  color: var(--ds-color-text-tertiary);
+}
+
+/* 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-surface-muted);
+  border: 1px solid var(--ds-color-border);
+  border-radius: var(--ds-radius-sm);
+  pointer-events: none;
+  user-select: none;
+}
+
+/* Clear button */
+.ds-search__clear {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 1.25rem;
+  height: 1.25rem;
+  min-width: 1.5rem; /* WCAG 2.5.8: minimum 24px target */
+  min-height: 1.5rem;
+  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-surface-muted);
+  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-block-start: 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: start;
+  cursor: pointer;
+  transition: background-color var(--ds-duration-fast) var(--ds-ease-default);
+}
+
+.ds-search__result:hover {
+  background: var(--ds-color-surface-hover);
+}
+
+.ds-search__result--active,
+.ds-search__result--active:hover {
+  background: var(--ds-color-surface-elevated);
+}
+
+.ds-search__result:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
+  scroll-margin-block: var(--ds-space-16, 4rem);
+}
+
+.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) /* below --ds-breakpoint-lg */ {
+  .ds-search__shortcut { display: none; }
+  .ds-search-mobile-trigger { display: flex; }
+  .ds-search { display: none; }
+
+  .ds-search--mobile-expanded {
+    display: flex;
+    position: fixed;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    inset-inline-end: 0;
+    height: var(--ds-search-bar-height, 3.5rem);
+    z-index: var(--ds-z-dropdown);
+    border: none;
+    border-block-end: 1px solid var(--ds-color-border);
+    border-radius: 0;
+    padding: 0 var(--ds-space-3);
+    background: var(--ds-color-nav-bg);
+    backdrop-filter: blur(var(--ds-blur-lg)) saturate(1.5);
+    -webkit-backdrop-filter: blur(var(--ds-blur-lg)) saturate(1.5);
+  }
+
+  .ds-search__dropdown--mobile {
+    inset-inline-start: 0 !important;
+    inset-inline-end: 0;
+    width: auto !important;
+    border-radius: 0;
+    border-inline-start: none;
+    border-inline-end: none;
+    max-height: calc(100dvh - var(--ds-search-bar-height, 3.5rem));
+    background: var(--ds-color-surface-muted);
+    backdrop-filter: blur(var(--ds-blur-lg)) saturate(1.5);
+    -webkit-backdrop-filter: blur(var(--ds-blur-lg)) saturate(1.5);
+  }
+}

package/src/components/segmented-control.css

@@ -0,0 +1,94 @@
+/* ==========================================================================
+   Component: Segmented Control
+   Toggle between 2-5 mutually exclusive options. Compact alternative to tabs.
+
+   ARIA requirements (consumer responsibility):
+   - Container: role="radiogroup", aria-label="[description]"
+   - Each segment: role="radio", aria-checked="true|false"
+   - Keyboard: ArrowLeft/Right to navigate, Space/Enter to select
+
+   Usage:
+     <div class="ds-segmented" role="radiogroup" aria-label="View">
+       <button class="ds-segmented__item ds-segmented__item--active" role="radio" aria-checked="true">Grid</button>
+       <button class="ds-segmented__item" role="radio" aria-checked="false">List</button>
+       <button class="ds-segmented__item" role="radio" aria-checked="false">Board</button>
+     </div>
+
+   Modifiers:
+     .ds-segmented--sm      — Smaller size
+     .ds-segmented--full    — Full width (items stretch equally)
+   ========================================================================== */
+
+.ds-segmented {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ds-space-0-5);
+  padding: var(--ds-space-0-5);
+  background-color: var(--ds-color-surface-muted);
+  border-radius: var(--ds-radius-lg);
+  border: 1px solid var(--ds-color-border-subtle);
+
+  &__item {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--ds-space-1-5);
+    padding: var(--ds-space-1-5) var(--ds-space-3);
+    font-family: var(--ds-font-sans);
+    font-size: var(--ds-text-sm);
+    font-weight: var(--ds-weight-medium);
+    line-height: var(--ds-leading-none);
+    color: var(--ds-color-text-secondary);
+    background: transparent;
+    border: none;
+    border-radius: var(--ds-radius-md);
+    cursor: pointer;
+    white-space: nowrap;
+    transition: all var(--ds-duration-fast) var(--ds-ease-default);
+
+    &:hover {
+      color: var(--ds-color-text);
+      background-color: var(--ds-color-surface-hover);
+    }
+
+    &:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
+      scroll-margin-block: var(--ds-space-16, 4rem);
+    }
+
+    &--active,
+      &--active:hover {
+      background-color: var(--ds-color-surface-elevated);
+      color: var(--ds-color-text);
+      box-shadow: var(--ds-shadow-sm);
+    }
+
+    &:disabled,
+    &[aria-disabled="true"] {
+      opacity: var(--ds-opacity-disabled);
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+  }
+
+  /* --- Small variant --- */
+  &--sm {
+    padding: 2px;
+
+    & .ds-segmented__item {
+      padding: var(--ds-space-1) var(--ds-space-2);
+      font-size: var(--ds-text-xs);
+    }
+  }
+
+  /* --- Full width --- */
+  &--full {
+    display: flex;
+    width: 100%;
+
+    & .ds-segmented__item {
+      flex: 1;
+    }
+  }
+}

package/src/components/skeleton.css

@@ -0,0 +1,100 @@
+/* ==========================================================================
+   Component: Skeleton
+   Loading placeholders with a subtle pulse animation.
+   ========================================================================== */
+
+.ds-skeleton {
+  display: block;
+  background-color: var(--ds-color-surface-muted);
+  border-radius: var(--ds-radius-md);
+  animation: ds-skeleton-pulse var(--ds-duration-slower) var(--ds-ease-default) infinite;
+
+  /* --- Text variants --- */
+
+  &--text {
+    height: 1rem;
+    width: 100%;
+    border-radius: var(--ds-radius-sm);
+    margin-block-end: var(--ds-space-2);
+  }
+
+  &--text-sm {
+    height: 0.75rem;
+    width: 100%;
+    border-radius: var(--ds-radius-sm);
+    margin-block-end: var(--ds-space-2);
+  }
+
+  &--text-lg {
+    height: 1.5rem;
+    width: 100%;
+    border-radius: var(--ds-radius-sm);
+    margin-block-end: var(--ds-space-2);
+  }
+
+  &--heading {
+    height: 2rem;
+    width: 60%;
+    border-radius: var(--ds-radius-md);
+    margin-block-end: var(--ds-space-3);
+  }
+
+  /* --- Shape variants --- */
+
+  &--circle,
+  &--avatar {
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: var(--ds-radius-full);
+  }
+
+  &--card {
+    height: 12rem;
+    width: 100%;
+    border-radius: var(--ds-radius-xl);
+  }
+
+  /* --- UI element variants --- */
+
+  &--btn {
+    height: 2.25rem;
+    width: 6rem;
+    border-radius: var(--ds-radius-lg);
+  }
+
+  &--input {
+    height: 2.5rem;
+    width: 100%;
+    border-radius: var(--ds-radius-lg);
+  }
+
+  /* --- Width modifiers --- */
+
+  &--w-1\/2 {
+    width: 50%;
+  }
+
+  &--w-3\/4 {
+    width: 75%;
+  }
+
+  &--w-1\/3 {
+    width: 33%;
+  }
+}
+
+/* --- Pulse animation --- */
+
+@keyframes ds-skeleton-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ds-skeleton { animation: none; }
+}

package/src/components/slider.css

@@ -0,0 +1,133 @@
+/* ==========================================================================
+   Slider
+   ==========================================================================
+   Range slider input component with customizable thumb and track styling.
+   Supports labels, value display, size variants, and disabled state.
+
+   ARIA requirements (consumer responsibility):
+   - Use native <input type="range"> (inherits slider role)
+   - Add aria-label or aria-labelledby for context
+   - Add aria-valuemin, aria-valuemax, aria-valuenow if using custom slider
+   - Add aria-valuetext for human-readable value (e.g., "50%")
+
+   Usage:
+     <div class="ds-slider">
+       <input type="range" min="0" max="100" value="50" aria-label="Volume" />
+       <div class="ds-slider__labels">
+         <span>0</span>
+         <span>100</span>
+       </div>
+     </div>
+
+   Modifiers:
+     .ds-slider--sm        — Smaller track and thumb
+     .ds-slider--disabled  — Reduced opacity, no interaction
+   ========================================================================== */
+
+.ds-slider {
+  width: 100%;
+  position: relative;
+
+  & input[type="range"] {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    width: 100%;
+    height: 0.375rem;
+    background-color: var(--ds-color-surface-muted);
+    border-radius: var(--ds-radius-full);
+    outline: none;
+    cursor: pointer;
+
+    /* Webkit thumb */
+    &::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      appearance: none;
+      width: 1.5rem; /* WCAG 2.5.8: minimum 24px target */
+      height: 1.5rem;
+      border-radius: var(--ds-radius-full);
+      background-color: var(--ds-color-inverted);
+      border: 2px solid var(--ds-color-surface);
+      box-shadow: var(--ds-shadow-sm);
+      cursor: pointer;
+      transition: transform var(--ds-duration-fast) var(--ds-ease-default);
+    }
+
+    /* Firefox thumb */
+    &::-moz-range-thumb {
+      width: 1.5rem; /* WCAG 2.5.8: minimum 24px target */
+      height: 1.5rem;
+      border-radius: var(--ds-radius-full);
+      background-color: var(--ds-color-inverted);
+      border: 2px solid var(--ds-color-surface);
+      box-shadow: var(--ds-shadow-sm);
+      cursor: pointer;
+      transition: transform var(--ds-duration-fast) var(--ds-ease-default);
+    }
+
+    /* Hover: scale up thumb */
+    &:hover::-webkit-slider-thumb {
+      transform: scale(1.1);
+    }
+
+    &:hover::-moz-range-thumb {
+      transform: scale(1.1);
+    }
+
+    /* Focus ring */
+    &:focus-visible::-webkit-slider-thumb {
+      outline: var(--ds-ring-width) solid var(--ds-ring-color);
+      outline-offset: 0;
+      scroll-margin-block: var(--ds-space-16, 4rem);
+    }
+
+    &:focus-visible::-moz-range-thumb {
+      outline: var(--ds-ring-width) solid var(--ds-ring-color);
+      outline-offset: 0;
+    }
+  }
+
+  /* Labels row */
+  &__labels {
+    display: flex;
+    justify-content: space-between;
+    font-size: var(--ds-text-xs);
+    color: var(--ds-color-text-tertiary);
+    margin-block-start: var(--ds-space-1);
+  }
+
+  /* Current value display */
+  &__value {
+    font-size: var(--ds-text-sm);
+    font-weight: var(--ds-weight-medium);
+    color: var(--ds-color-text);
+  }
+
+  /* Size: small */
+  &--sm {
+    & input[type="range"] {
+      height: 0.25rem;
+
+      &::-webkit-slider-thumb {
+        width: 1rem;
+        height: 1rem;
+      }
+
+      &::-moz-range-thumb {
+        width: 1rem;
+        height: 1rem;
+      }
+    }
+  }
+
+  /* Disabled state */
+  &--disabled {
+    opacity: var(--ds-opacity-disabled);
+    cursor: not-allowed;
+
+    & input[type="range"] {
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+  }
+}

package/src/components/sortable.css

@@ -0,0 +1,70 @@
+/* ==========================================================================
+   Component: Sortable
+   Optional drag-to-reorder styles for table rows or list items.
+   Provides grip handle, dragging states, and drop zone indicators.
+   Works with native HTML5 Drag API or any JS drag library.
+
+   ARIA requirements (consumer responsibility):
+   - Handle: aria-label="Reorder [item]", role="button"
+   - Draggable row: aria-grabbed="true|false" (when using HTML5 DnD)
+   - Drop target: aria-dropeffect="move"
+   - Keyboard: handle should support ArrowUp/Down + Enter to move items
+   ========================================================================== */
+
+.ds-sortable {
+
+  /* --- Dragging state: applied to the row being dragged --- */
+  &--dragging {
+    opacity: 0.5;
+    background-color: var(--ds-color-surface);
+  }
+
+  /* --- Drop target: applied to the row being hovered over --- */
+  &--over {
+    box-shadow: inset 0 -2px 0 var(--ds-color-interactive);
+  }
+
+  /* --- Grip handle: visible on row hover, grab cursor --- */
+  &__handle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 1.5rem; /* WCAG 2.5.8: minimum 24px target */
+    min-height: 1.5rem;
+    padding: var(--ds-space-1);
+    color: var(--ds-color-text-tertiary);
+    cursor: grab;
+    border-radius: var(--ds-radius-sm);
+    opacity: 0;
+    transition:
+      opacity var(--ds-duration-fast) var(--ds-ease-default),
+      color var(--ds-duration-fast) var(--ds-ease-default);
+
+    &:active {
+      cursor: grabbing;
+    }
+
+    &:focus-visible {
+      opacity: 1;
+      outline: none;
+      box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
+      border-radius: var(--ds-radius-sm);
+      scroll-margin-block: var(--ds-space-16, 4rem);
+    }
+
+    /* --- Always-visible handle variant --- */
+    &--visible {
+      opacity: 1;
+    }
+  }
+}
+
+/* Show handle on row hover or any hovered interactive parent */
+tr:hover .ds-sortable__handle,
+.ds-sortable-row:hover .ds-sortable__handle,
+button:hover .ds-sortable__handle,
+a:hover .ds-sortable__handle,
+[role="button"]:hover .ds-sortable__handle {
+  opacity: 1;
+  color: var(--ds-color-text-secondary);
+}