@adamarant/designsystem 0.11.2

package/src/components/modal.css

@@ -0,0 +1,136 @@
+/* ==========================================================================
+   Component: Modal
+   Backdrop blur, shadow-2xl, rounded-xl. Smooth scale transition.
+
+   ARIA requirements (consumer responsibility):
+   - Container: role="dialog", aria-modal="true", aria-labelledby="[title-id]"
+   - Close button: aria-label="Close"
+   - Focus: trap focus inside modal when open
+   - Keyboard: Escape closes modal
+   - On open: move focus to first focusable element or close button
+   - On close: return focus to the element that triggered the modal
+   ========================================================================== */
+
+.ds-modal {
+  position: fixed;
+  inset: 0;
+  z-index: var(--ds-z-modal);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--ds-space-4);
+  background-color: var(--ds-color-overlay);
+  backdrop-filter: blur(var(--ds-blur-sm));
+  -webkit-backdrop-filter: blur(var(--ds-blur-sm));
+  opacity: 0;
+  visibility: hidden;
+  transition:
+    opacity var(--ds-duration-slow) var(--ds-ease-default),
+    visibility var(--ds-duration-slow) var(--ds-ease-default);
+
+  &[open],
+  &--open {
+    opacity: 1;
+    visibility: visible;
+  }
+
+  &__content {
+    width: 100%;
+    max-width: 28rem;
+    max-height: 90dvh;
+    background-color: var(--ds-color-surface);
+    border: 1px solid var(--ds-color-border);
+    border-radius: var(--ds-radius-xl);
+    box-shadow: var(--ds-shadow-lg);
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    transform: scale(0.96);
+    transition: transform var(--ds-duration-slow) var(--ds-ease-out-expo);
+  }
+
+  &[open] .ds-modal__content,
+  &--open .ds-modal__content {
+    transform: scale(1);
+  }
+
+  &__header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    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);
+    }
+
+    & p {
+      font-size: var(--ds-text-sm);
+      color: var(--ds-color-text-tertiary);
+      margin-block-start: var(--ds-space-1);
+    }
+  }
+
+  &__close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    color: var(--ds-color-text-tertiary);
+    border-radius: var(--ds-radius-md);
+    transition: all var(--ds-duration-fast) var(--ds-ease-default);
+    flex-shrink: 0;
+
+    &:hover {
+      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 {
+    padding: var(--ds-space-5);
+    overflow-y: auto;
+    flex: 1;
+  }
+
+  &__footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--ds-space-2);
+    padding: var(--ds-space-4) var(--ds-space-5);
+    border-block-start: 1px solid var(--ds-color-border);
+  }
+
+  /* Size variants */
+  &--md .ds-modal__content { max-width: var(--ds-container-md); }
+  &--lg .ds-modal__content { max-width: var(--ds-container-lg); }
+
+  /* Fullscreen on mobile */
+  @media (max-width: 1023px) /* below --ds-breakpoint-lg */ {
+    &--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;
+    }
+
+    &--fullscreen-mobile {
+      padding: 0;
+    }
+  }
+}

package/src/components/nav.css

@@ -0,0 +1,198 @@
+/* ==========================================================================
+   Component: Navigation
+   Fixed glass header, backdrop-blur, h-16. Clean links.
+
+   ARIA requirements (consumer responsibility):
+   - Nav: <nav aria-label="Main navigation"> (or aria-label="Sidebar")
+   - Active link: aria-current="page" on the current page link
+   - Mobile menu: toggle aria-expanded on hamburger button
+   - Mobile menu button: aria-label="Open menu" / "Close menu"
+   - Skip nav: add ds-skip-link before nav to skip to main content
+   ========================================================================== */
+
+.ds-nav {
+  position: fixed;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
+  z-index: var(--ds-z-sticky);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 4rem;
+  background-color: color-mix(in srgb, var(--ds-color-surface) 80%, transparent);
+  border-block-end: 1px solid color-mix(in srgb, var(--ds-color-border) 60%, transparent);
+  backdrop-filter: blur(var(--ds-blur-lg)) saturate(1.5);
+  -webkit-backdrop-filter: blur(var(--ds-blur-lg)) saturate(1.5);
+
+  &--static {
+    position: relative;
+  }
+
+  &__inner {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    max-width: var(--ds-container-max);
+    margin-inline: auto;
+    padding-inline: var(--ds-container-padding);
+  }
+
+  &__brand {
+    font-family: var(--ds-font-display);
+    font-weight: var(--ds-font-display-weight);
+    font-size: var(--ds-text-lg);
+    color: var(--ds-color-text);
+    letter-spacing: var(--ds-tracking-tight);
+  }
+
+  &__menu {
+    display: flex;
+    align-items: center;
+    gap: var(--ds-space-8);
+  }
+
+  &__link {
+    font-size: var(--ds-text-sm);
+    color: var(--ds-color-text-secondary);
+    transition: color var(--ds-duration-normal) var(--ds-ease-default);
+
+    @media (hover: hover) {
+      &:hover {
+        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);
+    }
+
+    &--active {
+      color: var(--ds-color-text);
+    }
+  }
+
+  /* Nav actions (theme toggle, etc) */
+  &__actions {
+    display: flex;
+    align-items: center;
+    gap: var(--ds-space-2);
+  }
+
+  /* Icon button in nav */
+  &__icon-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.25rem;
+    height: 2.25rem;
+    border-radius: var(--ds-radius-md);
+    color: var(--ds-color-text-secondary);
+    transition: all var(--ds-duration-normal) var(--ds-ease-default);
+
+    @media (hover: hover) {
+      &: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);
+    }
+  }
+
+  /* --- Mobile nav overlay --- */
+  &__mobile {
+    overflow: hidden;
+    max-height: 0;
+    border-block-end: 0 solid color-mix(in srgb, var(--ds-color-border) 60%, transparent);
+    background-color: color-mix(in srgb, var(--ds-color-surface) 80%, transparent);
+    backdrop-filter: blur(var(--ds-blur-lg));
+    transition: all var(--ds-duration-slow) var(--ds-ease-out-expo);
+
+    &--open {
+      max-height: calc(100dvh - 4rem);
+      border-block-end-width: 1px;
+      overflow-y: auto;
+      overscroll-behavior: contain;
+    }
+  }
+
+  &__mobile-links {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ds-space-1);
+    padding: var(--ds-space-4) var(--ds-container-padding);
+
+    & .ds-nav__link {
+      font-size: var(--ds-text-lg);
+      padding: var(--ds-space-3) 0;
+    }
+  }
+}
+
+/* --- Sidebar --- */
+
+.ds-sidebar {
+  display: flex;
+  flex-direction: column;
+  width: 16rem;
+  padding: var(--ds-space-5);
+  background-color: var(--ds-color-surface);
+  border-inline-end: 1px solid var(--ds-color-border);
+  height: 100%;
+
+  &__section {
+    margin-block-end: var(--ds-space-6);
+  }
+
+  &__title {
+    font-size: var(--ds-text-sm);
+    font-weight: var(--ds-weight-medium);
+    text-transform: uppercase;
+    letter-spacing: var(--ds-tracking-wide);
+    color: var(--ds-color-text-tertiary);
+    margin-block-end: var(--ds-space-3);
+  }
+
+  &__link {
+    display: flex;
+    align-items: center;
+    gap: var(--ds-space-2);
+    padding: var(--ds-space-2) var(--ds-space-3);
+    width: 100%;
+    font-size: var(--ds-text-sm);
+    color: var(--ds-color-text-secondary);
+    border-radius: var(--ds-radius-md);
+    transition: all var(--ds-duration-normal) var(--ds-ease-default);
+
+    & + & {
+      margin-block-start: var(--ds-space-1);
+    }
+
+    @media (hover: hover) {
+      &:hover {
+        color: var(--ds-color-text);
+        background-color: var(--ds-color-surface-hover);
+      }
+    }
+
+    &: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);
+    }
+
+    &--active,
+    &--active:hover {
+      color: var(--ds-color-text);
+      background-color: var(--ds-color-surface-elevated);
+    }
+  }
+}

package/src/components/number-input.css

@@ -0,0 +1,163 @@
+/* ==========================================================================
+   Component: Number Input
+   Numeric input with increment/decrement stepper buttons.
+
+   ARIA requirements (consumer responsibility):
+   - Input: type="number", aria-label or aria-labelledby
+   - Buttons: aria-label="Increase" / aria-label="Decrease"
+   - Disabled: aria-disabled="true" on buttons when at min/max
+   - Keyboard: ArrowUp/Down to increment/decrement
+
+   Usage:
+     <div class="ds-number-input">
+       <button class="ds-number-input__decrement" aria-label="Decrease">−</button>
+       <input class="ds-number-input__field" type="number" value="1" />
+       <button class="ds-number-input__increment" aria-label="Increase">+</button>
+     </div>
+
+   Modifiers:
+     .ds-number-input--xs/--sm/--lg  — Size variants
+   ========================================================================== */
+
+.ds-number-input {
+  display: inline-flex;
+  align-items: center;
+  border: 1px solid var(--ds-color-border);
+  border-radius: var(--ds-radius-lg);
+  background-color: var(--ds-color-surface);
+  overflow: hidden;
+  transition:
+    border-color var(--ds-duration-fast) var(--ds-ease-default),
+    box-shadow var(--ds-duration-fast) var(--ds-ease-default);
+}
+
+.ds-number-input:focus-within {
+  border-color: var(--ds-color-border-active);
+  box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
+}
+
+/* --- Field --- */
+.ds-number-input__field {
+  width: 3.5rem;
+  height: var(--ds-size-3);
+  padding: 0;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: var(--ds-color-text);
+  font-family: var(--ds-font-sans);
+  font-size: var(--ds-text-base);
+  font-variant-numeric: tabular-nums;
+  text-align: center;
+  -moz-appearance: textfield;
+}
+
+.ds-number-input__field::-webkit-inner-spin-button,
+.ds-number-input__field::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* --- Stepper buttons --- */
+.ds-number-input__decrement,
+.ds-number-input__increment {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--ds-size-3);
+  height: var(--ds-size-3);
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--ds-color-text-secondary);
+  cursor: pointer;
+  flex-shrink: 0;
+  font-size: var(--ds-text-lg);
+  font-family: var(--ds-font-sans);
+  transition:
+    color var(--ds-duration-fast) var(--ds-ease-default),
+    background-color var(--ds-duration-fast) var(--ds-ease-default);
+}
+
+.ds-number-input__decrement {
+  border-inline-end: 1px solid var(--ds-color-border-subtle);
+}
+
+.ds-number-input__increment {
+  border-inline-start: 1px solid var(--ds-color-border-subtle);
+}
+
+.ds-number-input__decrement:hover,
+.ds-number-input__increment:hover {
+  background-color: var(--ds-color-surface-hover);
+  color: var(--ds-color-text);
+}
+
+.ds-number-input__decrement:focus-visible,
+.ds-number-input__increment:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
+}
+
+.ds-number-input__decrement:disabled,
+.ds-number-input__increment:disabled,
+.ds-number-input__decrement[aria-disabled="true"],
+.ds-number-input__increment[aria-disabled="true"] {
+  opacity: var(--ds-opacity-disabled);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* ==========================================================================
+   Size variants
+   ========================================================================== */
+
+/* XS */
+.ds-number-input--xs .ds-number-input__field {
+  height: var(--ds-size-1);
+  width: 2.5rem;
+  font-size: var(--ds-text-xs);
+}
+
+.ds-number-input--xs .ds-number-input__decrement,
+.ds-number-input--xs .ds-number-input__increment {
+  width: var(--ds-size-1);
+  height: var(--ds-size-1);
+  font-size: var(--ds-text-sm);
+}
+
+.ds-number-input--xs {
+  border-radius: var(--ds-radius-md);
+}
+
+/* SM */
+.ds-number-input--sm .ds-number-input__field {
+  height: var(--ds-size-2);
+  width: 3rem;
+  font-size: var(--ds-text-sm);
+}
+
+.ds-number-input--sm .ds-number-input__decrement,
+.ds-number-input--sm .ds-number-input__increment {
+  width: var(--ds-size-2);
+  height: var(--ds-size-2);
+  font-size: var(--ds-text-base);
+}
+
+.ds-number-input--sm {
+  border-radius: var(--ds-radius-md);
+}
+
+/* LG */
+.ds-number-input--lg .ds-number-input__field {
+  height: var(--ds-size-4);
+  width: 4rem;
+  font-size: var(--ds-text-lg);
+}
+
+.ds-number-input--lg .ds-number-input__decrement,
+.ds-number-input--lg .ds-number-input__increment {
+  width: var(--ds-size-4);
+  height: var(--ds-size-4);
+  font-size: var(--ds-text-xl);
+}

package/src/components/pagination.css

@@ -0,0 +1,175 @@
+/* ==========================================================================
+   Pagination Component
+   ==========================================================================
+   A row of page-number controls for navigating multi-page content.
+
+   ARIA requirements (consumer responsibility):
+   - Container: <nav aria-label="Pagination">
+   - Active page: aria-current="page"
+   - Prev/Next: aria-label="Previous page" / "Next page"
+   - Disabled: aria-disabled="true" on disabled prev/next buttons
+   - Page items: aria-label="Page [N]" (optional, number is visible)
+
+   Usage:
+     <nav class="ds-pagination" aria-label="Pagination">
+       <button class="ds-pagination__prev" aria-label="Previous page">&lsaquo;</button>
+       <button class="ds-pagination__item">1</button>
+       <button class="ds-pagination__item ds-pagination__item--active" aria-current="page">2</button>
+       <span class="ds-pagination__ellipsis">&hellip;</span>
+       <button class="ds-pagination__item">10</button>
+       <button class="ds-pagination__next" aria-label="Next page">&rsaquo;</button>
+     </nav>
+   ========================================================================== */
+
+/* ---------------------------------------------------------------------------
+   Container
+   --------------------------------------------------------------------------- */
+
+.ds-pagination {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--ds-space-1);
+  font-family: var(--ds-font-sans);
+
+  /* ---------------------------------------------------------------------------
+     Item (page number)
+     --------------------------------------------------------------------------- */
+
+  &__item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 2rem;
+    height: 2rem;
+    padding: 0 var(--ds-space-1);
+    border: none;
+    border-radius: var(--ds-radius-md);
+    background: transparent;
+    color: var(--ds-color-text-secondary);
+    font-size: var(--ds-text-sm);
+    font-family: var(--ds-font-sans);
+    cursor: pointer;
+    transition:
+      background-color var(--ds-duration-fast) var(--ds-ease-out),
+      color var(--ds-duration-fast) var(--ds-ease-out);
+    -webkit-appearance: none;
+    appearance: none;
+
+    &:hover {
+      background-color: var(--ds-color-surface-hover);
+      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);
+    }
+
+    /* ---------------------------------------------------------------------------
+       Active page
+       --------------------------------------------------------------------------- */
+
+    &--active,
+    &--active:hover {
+      background-color: var(--ds-color-inverted);
+      color: var(--ds-color-on-inverted);
+      cursor: default;
+    }
+
+    /* ---------------------------------------------------------------------------
+       Disabled item
+       --------------------------------------------------------------------------- */
+
+    &--disabled,
+    &--disabled:hover {
+      opacity: var(--ds-opacity-disabled);
+      pointer-events: none;
+    }
+  }
+
+  /* ---------------------------------------------------------------------------
+     Previous / Next navigation buttons
+     --------------------------------------------------------------------------- */
+
+  &__prev,
+  &__next {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 2rem;
+    height: 2rem;
+    padding: 0;
+    border: none;
+    border-radius: var(--ds-radius-md);
+    background: transparent;
+    color: var(--ds-color-text-secondary);
+    font-size: var(--ds-text-sm);
+    font-family: var(--ds-font-sans);
+    cursor: pointer;
+    transition:
+      background-color var(--ds-duration-fast) var(--ds-ease-out),
+      color var(--ds-duration-fast) var(--ds-ease-out);
+    -webkit-appearance: none;
+    appearance: none;
+
+    &:hover {
+      background-color: var(--ds-color-surface-hover);
+      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);
+    }
+
+    &:disabled {
+      opacity: var(--ds-opacity-disabled);
+      pointer-events: none;
+    }
+  }
+
+  /* ---------------------------------------------------------------------------
+     Ellipsis
+     --------------------------------------------------------------------------- */
+
+  &__ellipsis {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 2rem;
+    height: 2rem;
+    color: var(--ds-color-text-tertiary);
+    font-size: var(--ds-text-sm);
+    user-select: none;
+    pointer-events: none;
+  }
+
+  /* ---------------------------------------------------------------------------
+     Page info text (e.g. "Page 1 of 10")
+     --------------------------------------------------------------------------- */
+
+  &__info {
+    font-size: var(--ds-text-sm);
+    color: var(--ds-color-text-tertiary);
+    white-space: nowrap;
+  }
+
+  /* ---------------------------------------------------------------------------
+     Modifier: Compact
+     --------------------------------------------------------------------------- */
+
+  &--compact {
+    & .ds-pagination__item,
+    & .ds-pagination__prev,
+    & .ds-pagination__next,
+    & .ds-pagination__ellipsis {
+      min-width: 1.75rem;
+      height: 1.75rem;
+      font-size: var(--ds-text-xs);
+    }
+  }
+}
+