@adamarant/designsystem 0.11.2

package/src/components/card.css

@@ -0,0 +1,117 @@
+/* ==========================================================================
+   Component: Card
+   Surface + border, hover with shadow lift, rounded-xl.
+   ========================================================================== */
+
+.ds-card {
+  background-color: var(--ds-color-surface);
+  border: 1px solid var(--ds-color-border);
+  border-radius: var(--ds-radius-xl);
+  overflow: hidden;
+  transition: all var(--ds-duration-normal) var(--ds-ease-default);
+  container-type: inline-size;
+
+  /* Container query: stack body content when card is narrow */
+  @container (max-width: 200px) {
+    & .ds-card__body {
+      display: flex;
+      flex-direction: column;
+    }
+
+    & .ds-card__footer {
+      flex-direction: column;
+      align-items: stretch;
+    }
+  }
+
+  /* Interactive card — lifts on hover (like ProjectCard) */
+  &--interactive {
+    cursor: pointer;
+
+    &:hover {
+      border-color: var(--ds-color-border-hover);
+      box-shadow: var(--ds-shadow-lg);
+      transform: translateY(-4px);
+    }
+
+    &:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
+    }
+
+    &:hover:focus-visible {
+      box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color), var(--ds-shadow-lg);
+    }
+  }
+
+  /* Elevated card — visible shadow */
+  &--elevated {
+    background-color: var(--ds-color-surface-muted);
+    box-shadow: var(--ds-shadow-lg);
+  }
+
+  /* Hover card — border highlight */
+  &--hover:hover {
+    border-color: var(--ds-color-border-active);
+  }
+
+  &__header {
+    padding: var(--ds-space-5);
+    border-block-end: 1px solid var(--ds-color-border);
+
+    & h3,
+    & .ds-card__title {
+      font-family: var(--ds-font-display);
+      font-weight: var(--ds-font-display-weight);
+      font-size: var(--ds-text-lg);
+      letter-spacing: var(--ds-tracking-tight);
+      color: var(--ds-color-text);
+    }
+  }
+
+  &__description {
+    font-size: var(--ds-text-sm);
+    color: var(--ds-color-text-tertiary);
+    margin-block-start: var(--ds-space-1);
+  }
+
+  &__body {
+    padding: var(--ds-space-5);
+  }
+
+  &__footer {
+    padding: var(--ds-space-4) var(--ds-space-5);
+    border-block-start: 1px solid var(--ds-color-border);
+    display: flex;
+    align-items: center;
+    gap: var(--ds-space-2);
+  }
+
+  &__media {
+    width: 100%;
+    aspect-ratio: 16/10;
+    object-fit: cover;
+    background-color: var(--ds-color-surface-muted);
+
+    &--square { aspect-ratio: 1; }
+    &--video { aspect-ratio: 16/9; }
+    &--auto { aspect-ratio: auto; }
+  }
+
+  /* Compact */
+  &--compact {
+    & .ds-card__header,
+    & .ds-card__body,
+    & .ds-card__footer {
+      padding: var(--ds-space-3) var(--ds-space-4);
+    }
+  }
+
+  /* Flush — no internal dividers */
+  &--flush {
+    & .ds-card__header { border-block-end: none; }
+    & .ds-card__footer { border-block-start: none; }
+  }
+}
+
+/* Stat card — extracted to stat-card.css */

package/src/components/chip.css

@@ -0,0 +1,79 @@
+/* ==========================================================================
+   Component: Chip
+   Interactive filter/sort chips with optional remove button. Distinct from
+   ds-tag (which is a static label). Chips represent active filter state.
+
+   ARIA requirements (consumer responsibility):
+   - Remove button: add aria-label="Remove [filter name]"
+   - Logic chip (AND/OR): use aria-pressed="true|false" on <button>
+   - Chip group: wrap in role="group" with aria-label="Active filters"
+
+   Usage:
+     <span class="ds-chip">
+       Status: Active
+       <button class="ds-chip__remove" aria-label="Remove Status filter">×</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-surface-muted);
+  border: 1px solid var(--ds-color-border);
+  border-radius: var(--ds-radius-full);
+  white-space: nowrap;
+
+  /* Logic chip (AND/OR toggle) */
+  &--logic {
+    cursor: pointer;
+    font-weight: var(--ds-weight-semibold);
+    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);
+
+    &:hover {
+      background: var(--ds-color-surface-hover);
+    }
+  }
+
+  /* Sort chip (dashed border) */
+  &--sort {
+    border-style: dashed;
+  }
+
+  /* Remove button */
+  &__remove {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 14px;
+    height: 14px;
+    min-width: 1.5rem; /* WCAG 2.5.8: minimum 24px target */
+    min-height: 1.5rem;
+    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);
+
+    &:hover {
+      color: var(--ds-color-text);
+      background: var(--ds-color-surface-hover);
+    }
+  }
+}

package/src/components/collapsible.css

@@ -0,0 +1,112 @@
+/* ==========================================================================
+   Component: Collapsible
+   Single collapsible section — a simplified, standalone accordion item.
+
+   ARIA requirements (consumer responsibility):
+   - Trigger: <button> with aria-expanded="true|false"
+   - Trigger: aria-controls="[content-panel-id]"
+   - Content: id matching aria-controls
+   ========================================================================== */
+
+.ds-collapsible {
+  border: 1px solid var(--ds-color-border);
+  border-radius: var(--ds-radius-xl);
+  overflow: hidden;
+
+  /* ---------------------------------------------------------------------------
+     Trigger (button)
+     --------------------------------------------------------------------------- */
+
+  &__trigger {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    padding: var(--ds-space-4);
+    text-align: start;
+    font-family: var(--ds-font-sans);
+    font-size: var(--ds-text-sm);
+    font-weight: var(--ds-weight-medium);
+    color: var(--ds-color-text);
+    background: transparent;
+    border: 0;
+    cursor: pointer;
+    transition: background-color var(--ds-duration-fast) var(--ds-ease-default);
+
+    &:hover {
+      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);
+    }
+  }
+
+  /* ---------------------------------------------------------------------------
+     Chevron icon (CSS border-arrow)
+     --------------------------------------------------------------------------- */
+
+  &__icon {
+    flex-shrink: 0;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-inline-end: 2px solid var(--ds-color-text-secondary);
+    border-block-end: 2px solid var(--ds-color-text-secondary);
+    transform: rotate(45deg);
+    margin-inline-start: var(--ds-space-3);
+    transition: transform var(--ds-duration-fast) var(--ds-ease-default);
+  }
+
+  &--open &__icon {
+    transform: rotate(225deg);
+  }
+
+  /* ---------------------------------------------------------------------------
+     Collapsible content
+     --------------------------------------------------------------------------- */
+
+  &__content {
+    max-height: 0;
+    overflow: hidden;
+    transition:
+      max-height var(--ds-duration-normal) var(--ds-ease-default),
+      padding var(--ds-duration-normal) var(--ds-ease-default);
+  }
+
+  &--open &__content {
+    max-height: 80rem;
+  }
+
+  /* ---------------------------------------------------------------------------
+     Inner body
+     --------------------------------------------------------------------------- */
+
+  &__body {
+    padding: var(--ds-space-4);
+    padding-block-start: 0;
+    font-size: var(--ds-text-sm);
+    color: var(--ds-color-text-secondary);
+    line-height: var(--ds-leading-relaxed);
+  }
+
+  /* ---------------------------------------------------------------------------
+     Variant: Flush (no border, no radius)
+     --------------------------------------------------------------------------- */
+
+  &--flush {
+    border: 0;
+    border-radius: 0;
+  }
+
+  /* ---------------------------------------------------------------------------
+     Variant: Ghost (no border, transparent bg)
+     --------------------------------------------------------------------------- */
+
+  &--ghost {
+    border: 0;
+    background: transparent;
+  }
+}

package/src/components/color-picker.css

@@ -0,0 +1,82 @@
+/* ==========================================================================
+   Component: Color Picker
+   Grid of color swatches for selection. CSS-only styling.
+
+   ARIA requirements (consumer responsibility):
+   - Container: role="radiogroup", aria-label="Color"
+   - Each swatch: role="radio", aria-checked="true|false", aria-label="[color name]"
+   - Keyboard: ArrowKeys to navigate, Space/Enter to select
+
+   Usage:
+     <div class="ds-color-picker" role="radiogroup" aria-label="Color">
+       <button class="ds-color-picker__swatch ds-color-picker__swatch--active"
+               role="radio" aria-checked="true" aria-label="Red"
+               style="--swatch-color: #ef4444"></button>
+       <button class="ds-color-picker__swatch"
+               role="radio" aria-checked="false" aria-label="Blue"
+               style="--swatch-color: #3b82f6"></button>
+     </div>
+
+   Modifiers:
+     .ds-color-picker--sm    — Smaller swatches
+     .ds-color-picker--lg    — Larger swatches
+   ========================================================================== */
+
+.ds-color-picker {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--ds-space-1-5);
+
+  &__swatch {
+    width: 2rem;
+    height: 2rem;
+    border-radius: var(--ds-radius-md);
+    border: 2px solid transparent;
+    background-color: var(--swatch-color);
+    cursor: pointer;
+    padding: 0;
+    flex-shrink: 0;
+    transition:
+      border-color var(--ds-duration-fast) var(--ds-ease-default),
+      transform var(--ds-duration-fast) var(--ds-ease-default),
+      box-shadow var(--ds-duration-fast) var(--ds-ease-default);
+
+    &:hover {
+      transform: scale(1.1);
+      border-color: var(--ds-color-border);
+    }
+
+    &: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 {
+      border-color: var(--ds-color-text);
+      box-shadow: 0 0 0 2px var(--ds-color-surface), 0 0 0 4px var(--swatch-color);
+    }
+  }
+
+  /* --- Small variant --- */
+  &--sm &__swatch {
+    width: 1.5rem;
+    height: 1.5rem;
+    border-radius: var(--ds-radius-sm);
+  }
+
+  &--sm {
+    gap: var(--ds-space-1);
+  }
+
+  /* --- Large variant --- */
+  &--lg &__swatch {
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: var(--ds-radius-lg);
+  }
+
+  &--lg {
+    gap: var(--ds-space-2);
+  }
+}