@adamarant/designsystem 0.11.2

package/src/components/datepicker.css

@@ -0,0 +1,301 @@
+/* ==========================================================================
+   Datepicker
+   ==========================================================================
+   Calendar dropdown for date selection. Follows popover positioning pattern
+   with scale animation. Supports compact mode for inline/table usage.
+
+   Usage:
+     <div class="ds-datepicker ds-datepicker--open">
+       <button class="ds-datepicker__trigger">Mar 20, 2026</button>
+       <div class="ds-datepicker__panel">
+         <div class="ds-datepicker__header">
+           <button class="ds-datepicker__nav">‹</button>
+           <span class="ds-datepicker__title">March 2026</span>
+           <button class="ds-datepicker__nav">›</button>
+         </div>
+         <div class="ds-datepicker__weekdays">
+           <span class="ds-datepicker__weekday">Mo</span>
+           ...
+         </div>
+         <div class="ds-datepicker__grid">
+           <button class="ds-datepicker__day">1</button>
+           <button class="ds-datepicker__day ds-datepicker__day--today">20</button>
+           <button class="ds-datepicker__day ds-datepicker__day--selected">15</button>
+           ...
+         </div>
+         <div class="ds-datepicker__footer">
+           <button class="ds-datepicker__today">Today</button>
+         </div>
+       </div>
+     </div>
+
+   Modifiers:
+     .ds-datepicker--open              — Shows the calendar panel
+     .ds-datepicker--compact           — Reduced sizing for inline/table use
+     .ds-datepicker__day--today        — Highlights current date
+     .ds-datepicker__day--selected     — Marks selected date
+     .ds-datepicker__day--other-month  — Dims days from adjacent months
+   ========================================================================== */
+
+.ds-datepicker {
+  /* Wrapper */
+  position: relative;
+  display: inline-flex;
+
+  /* Trigger button */
+  &__trigger {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ds-space-1);
+    cursor: pointer;
+    background: none;
+    border: none;
+    padding: 0;
+    color: var(--ds-color-text);
+    font: inherit;
+    line-height: 1;
+
+    &:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
+    }
+  }
+
+  /* Calendar panel */
+  &__panel {
+    position: absolute;
+    z-index: var(--ds-z-dropdown);
+    inset-block-start: calc(100% + var(--ds-offset-sm));
+    inset-inline-start: 0;
+    background-color: var(--ds-color-surface-muted);
+    border: 1px solid var(--ds-color-border);
+    border-radius: var(--ds-radius-xl);
+    box-shadow: var(--ds-shadow-lg);
+    padding: var(--ds-space-3);
+    min-width: 17rem;
+    opacity: 0;
+    visibility: hidden;
+    transform: scale(0.96);
+    transition:
+      opacity var(--ds-duration-fast) var(--ds-ease-default),
+      visibility var(--ds-duration-fast) var(--ds-ease-default),
+      transform var(--ds-duration-fast) var(--ds-ease-out-expo);
+  }
+
+  /* Open state */
+  &--open &__panel {
+    opacity: 1;
+    visibility: visible;
+    transform: scale(1);
+  }
+
+  /* Header — month/year + nav arrows */
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-block-end: var(--ds-space-2);
+  }
+
+  &__title {
+    font-size: var(--ds-text-sm);
+    font-weight: var(--ds-weight-semibold);
+    color: var(--ds-color-text);
+    user-select: none;
+  }
+
+  &__nav {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.75rem;
+    height: 1.75rem;
+    border: none;
+    background: none;
+    border-radius: var(--ds-radius-md);
+    color: var(--ds-color-text-secondary);
+    cursor: pointer;
+    font-size: var(--ds-text-base);
+    transition: all var(--ds-duration-fast) var(--ds-ease-default);
+
+    &:hover {
+      background-color: var(--ds-color-surface-muted-hover);
+      color: var(--ds-color-text);
+    }
+
+    &:focus-visible {
+      outline: none;
+      box-shadow: inset 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
+    }
+  }
+
+  /* Weekday header row */
+  &__weekdays {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    margin-block-end: var(--ds-space-1);
+  }
+
+  &__weekday {
+    font-size: var(--ds-text-xs);
+    color: var(--ds-color-text-tertiary);
+    text-align: center;
+    padding: var(--ds-space-1) 0;
+    user-select: none;
+    font-weight: var(--ds-weight-medium);
+  }
+
+  /* Day grid */
+  &__grid {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: 1px;
+  }
+
+  /* Day cell */
+  &__day {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    aspect-ratio: 1;
+    border: none;
+    background: none;
+    border-radius: var(--ds-radius-md);
+    font-size: var(--ds-text-sm);
+    color: var(--ds-color-text);
+    cursor: pointer;
+    transition: all var(--ds-duration-fast) var(--ds-ease-default);
+    padding: 0;
+    line-height: 1;
+    user-select: none;
+
+    &:hover {
+      background-color: var(--ds-color-surface-muted-hover);
+    }
+
+    &:focus-visible {
+      outline: none;
+      box-shadow: inset 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
+    }
+
+    /* Today — subtle ring */
+    &--today {
+      box-shadow: inset 0 0 0 1px var(--ds-color-border-active);
+      font-weight: var(--ds-weight-semibold);
+    }
+
+    /* Selected — inverted fill */
+    &--selected {
+      background-color: var(--ds-color-text);
+      color: var(--ds-color-bg);
+      font-weight: var(--ds-weight-semibold);
+
+      &:hover {
+        background-color: var(--ds-color-text);
+        opacity: 0.85;
+      }
+    }
+
+    /* Other month days — dimmed */
+    &--other-month {
+      color: var(--ds-color-text-tertiary);
+      opacity: 0.4;
+    }
+  }
+
+  /* Footer — Today pill */
+  &__footer {
+    display: flex;
+    justify-content: center;
+    margin-block-start: var(--ds-space-2);
+    padding-block-start: var(--ds-space-2);
+    border-block-start: 1px solid var(--ds-color-border);
+  }
+
+  &__today {
+    font-size: var(--ds-text-xs);
+    font-weight: var(--ds-weight-medium);
+    color: var(--ds-color-text-secondary);
+    background: none;
+    border: 1px solid var(--ds-color-border);
+    border-radius: var(--ds-radius-full);
+    padding: var(--ds-space-1) var(--ds-space-3);
+    cursor: pointer;
+    transition: all var(--ds-duration-fast) var(--ds-ease-default);
+
+    &:hover {
+      background-color: var(--ds-color-surface-muted-hover);
+      color: var(--ds-color-text);
+      border-color: var(--ds-color-border-hover);
+    }
+
+    &:focus-visible {
+      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 */
+  &__step {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.25rem;
+    height: 1.25rem;
+    border: none;
+    background: none;
+    border-radius: var(--ds-radius-md);
+    color: var(--ds-color-text-tertiary);
+    cursor: pointer;
+    font-size: var(--ds-text-xs);
+    transition: all var(--ds-duration-fast) var(--ds-ease-default);
+    padding: 0;
+    flex-shrink: 0;
+
+    &:hover {
+      background-color: var(--ds-color-surface-muted-hover);
+      color: var(--ds-color-text);
+    }
+
+    &:focus-visible {
+      outline: none;
+      box-shadow: inset 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
+    }
+  }
+
+  /* Compact mode — for inline table cells */
+  &--compact {
+    & .ds-datepicker__panel {
+      min-width: 14rem;
+      padding: var(--ds-space-2);
+    }
+
+    & .ds-datepicker__title {
+      font-size: var(--ds-text-xs);
+    }
+
+    & .ds-datepicker__nav {
+      width: 1.5rem;
+      height: 1.5rem;
+      font-size: var(--ds-text-sm);
+    }
+
+    & .ds-datepicker__weekday {
+      font-size: var(--ds-text-2xs);
+    }
+
+    & .ds-datepicker__day {
+      font-size: var(--ds-text-xs);
+    }
+
+    & .ds-datepicker__today {
+      font-size: var(--ds-text-2xs);
+      padding: 2px var(--ds-space-2);
+    }
+
+    & .ds-datepicker__footer {
+      margin-block-start: var(--ds-space-1);
+      padding-block-start: var(--ds-space-1);
+    }
+  }
+}

package/src/components/description-list.css

@@ -0,0 +1,100 @@
+/* ==========================================================================
+   Component: Description List
+   Key-value pairs display with horizontal and vertical layouts.
+   ========================================================================== */
+
+.ds-description-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+
+  /* ---------------------------------------------------------------------------
+     Item
+     --------------------------------------------------------------------------- */
+
+  &__item {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ds-space-1);
+    padding: var(--ds-space-3) 0;
+
+    &:first-child {
+      padding-block-start: 0;
+    }
+
+    &:last-child {
+      padding-block-end: 0;
+    }
+  }
+
+  /* ---------------------------------------------------------------------------
+     Term (key)
+     --------------------------------------------------------------------------- */
+
+  &__term {
+    font-family: var(--ds-font-sans);
+    font-size: var(--ds-text-sm);
+    font-weight: var(--ds-weight-medium);
+    color: var(--ds-color-text-secondary);
+    line-height: var(--ds-leading-normal);
+  }
+
+  /* ---------------------------------------------------------------------------
+     Detail (value)
+     --------------------------------------------------------------------------- */
+
+  &__detail {
+    font-family: var(--ds-font-sans);
+    font-size: var(--ds-text-sm);
+    color: var(--ds-color-text);
+    line-height: var(--ds-leading-normal);
+  }
+
+  /* ---------------------------------------------------------------------------
+     Variant: Horizontal (term and detail on same row)
+     --------------------------------------------------------------------------- */
+
+  &--horizontal {
+    & .ds-description-list__item {
+      flex-direction: row;
+      align-items: flex-start;
+      gap: var(--ds-space-4);
+    }
+
+    & .ds-description-list__term {
+      flex-shrink: 0;
+      min-width: 10rem;
+    }
+
+    & .ds-description-list__detail {
+      flex: 1;
+      min-width: 0;
+    }
+  }
+
+  /* ---------------------------------------------------------------------------
+     Variant: Bordered (separator between items)
+     --------------------------------------------------------------------------- */
+
+  &--bordered {
+    & .ds-description-list__item {
+      border-block-end: 1px solid var(--ds-color-border);
+
+      &:last-child {
+        border-block-end: 0;
+      }
+    }
+  }
+
+  /* ---------------------------------------------------------------------------
+     Variant: Striped (alternating background)
+     --------------------------------------------------------------------------- */
+
+  &--striped {
+    & .ds-description-list__item:nth-child(odd) {
+      background-color: var(--ds-color-surface);
+      padding-inline: var(--ds-space-3);
+      border-radius: var(--ds-radius-md);
+    }
+  }
+}

package/src/components/divider.css

@@ -0,0 +1,66 @@
+/* ==========================================================================
+   Component: Divider
+   Horizontal and vertical separators with optional centered label.
+   ========================================================================== */
+
+.ds-divider {
+  border: none;
+  border-top: 1px solid var(--ds-color-border);
+  margin-block: var(--ds-space-4);
+  width: 100%;
+
+  /* --- Vertical --- */
+
+  &--vertical {
+    border-top: none;
+    border-inline-start: 1px solid var(--ds-color-border);
+    display: inline-block;
+    width: auto;
+    height: auto;
+    min-height: 1rem;
+    align-self: stretch;
+    margin-block: var(--ds-space-0);
+    margin-inline: var(--ds-space-3);
+  }
+
+  /* --- Subtle --- */
+
+  &--subtle {
+    border-color: var(--ds-color-border-subtle);
+  }
+
+  /* --- Spacious --- */
+
+  &--spacious {
+    margin-block: var(--ds-space-8);
+
+    &.ds-divider--vertical {
+      margin-block: var(--ds-space-0);
+      margin-inline: var(--ds-space-6);
+    }
+  }
+
+  /* --- Label (centered text with lines on either side) --- */
+
+  &--label {
+    border-top: none;
+    display: flex;
+    align-items: center;
+    gap: var(--ds-space-3);
+    font-family: var(--ds-font-sans);
+    font-size: var(--ds-text-xs);
+    font-weight: var(--ds-weight-medium);
+    color: var(--ds-color-text-tertiary);
+    text-transform: uppercase;
+    letter-spacing: var(--ds-tracking-wide);
+    white-space: nowrap;
+
+    &::before,
+    &::after {
+      content: '';
+      flex: 1;
+      height: 0;
+      border-top: 1px solid var(--ds-color-border);
+    }
+  }
+}

package/src/components/drawer.css

@@ -0,0 +1,234 @@
+/* ==========================================================================
+   Drawer / Sheet
+   ==========================================================================
+   A sliding overlay panel anchored to the edge of the viewport.
+   Default direction is right; use `--left` or `--bottom` modifiers
+   to change the slide origin.
+
+   ARIA requirements (consumer responsibility):
+   - Container: role="dialog", aria-modal="true", aria-labelledby="[title-id]"
+   - Close button: aria-label="Close"
+   - Focus: trap focus inside drawer when open
+   - Keyboard: Escape closes drawer
+   - On open: move focus to first focusable element or close button
+   - On close: return focus to the element that triggered the drawer
+
+   Sizes:
+     --sm        18 rem
+     (default)   24 rem
+     --lg        36 rem
+
+   Usage:
+     <div class="ds-drawer ds-drawer--right ds-drawer--open" role="dialog" aria-modal="true">
+       <div class="ds-drawer__content">
+         <div class="ds-drawer__header">
+           <h3>Title</h3>
+           <button class="ds-drawer__close" aria-label="Close">&times;</button>
+         </div>
+         <div class="ds-drawer__body">…</div>
+         <div class="ds-drawer__footer">…</div>
+       </div>
+     </div>
+   ========================================================================== */
+
+/* ---------------------------------------------------------------------------
+   Overlay backdrop
+   --------------------------------------------------------------------------- */
+
+.ds-drawer {
+  position: fixed;
+  inset: 0;
+  z-index: var(--ds-z-overlay);
+  background-color: var(--ds-color-overlay);
+  opacity: 0;
+  visibility: hidden;
+  transition:
+    opacity var(--ds-duration-normal) var(--ds-ease-default),
+    visibility var(--ds-duration-normal) var(--ds-ease-default);
+
+  &--open {
+    opacity: 1;
+    visibility: visible;
+
+    & .ds-drawer__content {
+      transform: translateX(0);
+    }
+  }
+
+  /* ---------------------------------------------------------------------------
+     Sliding panel
+     --------------------------------------------------------------------------- */
+
+  &__content {
+    position: fixed;
+    display: flex;
+    flex-direction: column;
+    background-color: var(--ds-color-surface);
+    box-shadow: var(--ds-shadow-lg);
+    overflow-y: auto;
+    transition: transform var(--ds-duration-normal) var(--ds-ease-out-expo);
+    /* Direction: Right (default) */
+    inset-block-start: 0;
+    inset-inline-end: 0;
+    inset-block-end: 0;
+    width: 24rem;
+    max-width: 90vw;
+    border-inline-start: 1px solid var(--ds-color-border);
+    transform: translateX(100%);
+  }
+
+  /* ==========================================================================
+   * Direction: Right (explicit)
+   * ========================================================================== */
+
+  &--right &__content {
+    inset-block-start: 0;
+    inset-inline-end: 0;
+    inset-block-end: 0;
+    width: 24rem;
+    max-width: 90vw;
+    border-inline-start: 1px solid var(--ds-color-border);
+    transform: translateX(100%);
+  }
+
+  &--right&--open &__content {
+    transform: translateX(0);
+  }
+
+  /* ==========================================================================
+   * Direction: Left
+   * ========================================================================== */
+
+  &--left &__content {
+    inset-inline-start: 0;
+    inset-block-start: 0;
+    inset-block-end: 0;
+    inset-inline-end: auto;
+    width: 24rem;
+    max-width: 90vw;
+    border-inline-start: 0;
+    border-inline-end: 1px solid var(--ds-color-border);
+    transform: translateX(-100%);
+  }
+
+  &--left&--open &__content {
+    transform: translateX(0);
+  }
+
+  /* ==========================================================================
+   * Direction: Bottom
+   * ========================================================================== */
+
+  &--bottom &__content {
+    inset-block-end: 0;
+    inset-inline-start: 0;
+    inset-inline-end: 0;
+    inset-block-start: auto;
+    width: auto;
+    max-height: 90dvh;
+    border-inline-start: 0;
+    border-block-start: 1px solid var(--ds-color-border);
+    border-radius: var(--ds-radius-xl) var(--ds-radius-xl) 0 0;
+    transform: translateY(100%);
+  }
+
+  &--bottom&--open &__content {
+    transform: translateY(0);
+  }
+
+  /* ==========================================================================
+   * Sizes
+   * ========================================================================== */
+
+  &--sm &__content {
+    width: 18rem;
+  }
+
+  &--lg &__content {
+    width: 36rem;
+  }
+
+  /* Bottom drawers should not have a fixed width */
+  &--bottom&--sm &__content,
+  &--bottom&--lg &__content {
+    width: auto;
+  }
+
+  /* ==========================================================================
+   * Header
+   * ========================================================================== */
+
+  &__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    padding: var(--ds-space-4) var(--ds-space-5);
+    border-block-end: 1px solid var(--ds-color-border);
+
+    & h3 {
+      font-family: var(--ds-font-display);
+      font-weight: var(--ds-font-display-weight);
+      font-size: var(--ds-text-lg);
+      color: var(--ds-color-text);
+      margin: 0;
+    }
+  }
+
+  /* ==========================================================================
+   * Close button
+   * ========================================================================== */
+
+  &__close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    padding: 0;
+    border: 0;
+    border-radius: var(--ds-radius-md);
+    background-color: transparent;
+    color: var(--ds-color-text-tertiary);
+    font-size: var(--ds-text-lg);
+    line-height: var(--ds-leading-none);
+    cursor: pointer;
+    flex-shrink: 0;
+    transition:
+      background-color var(--ds-duration-fast) var(--ds-ease-default),
+      color var(--ds-duration-fast) var(--ds-ease-default);
+
+    &:hover {
+      background-color: var(--ds-color-overlay);
+      color: var(--ds-color-text);
+    }
+
+    &: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);
+    }
+  }
+
+  /* ==========================================================================
+   * Body
+   * ========================================================================== */
+
+  &__body {
+    padding: var(--ds-space-5);
+    flex: 1;
+    overflow-y: auto;
+  }
+
+  /* ==========================================================================
+   * Footer
+   * ========================================================================== */
+
+  &__footer {
+    padding: var(--ds-space-4) var(--ds-space-5);
+    border-block-start: 1px solid var(--ds-color-border);
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--ds-space-2);
+  }
+}