@adamarant/designsystem 0.11.2

package/src/components/gallery.css

@@ -0,0 +1,257 @@
+/* ==========================================================================
+   Component: Gallery
+   Image gallery with main image, thumbnail strip, and lightbox overlay.
+
+   ARIA requirements (consumer responsibility):
+   - Container: role="region", aria-label="Image gallery"
+   - Thumbnails: role="tablist", individual thumbnails role="tab"
+   - Main image: role="img", alt text required
+   - Lightbox: role="dialog", aria-label="Image viewer"
+   - Lightbox close: aria-label="Close"
+   - Navigation: aria-label="Previous image" / "Next image"
+   - Keyboard: ArrowLeft/Right for navigation, Escape to close lightbox
+
+   Usage:
+     <div class="ds-gallery">
+       <div class="ds-gallery__main">
+         <img src="..." alt="..." />
+       </div>
+       <div class="ds-gallery__thumbs">
+         <button class="ds-gallery__thumb ds-gallery__thumb--active">
+           <img src="..." alt="Thumbnail 1" />
+         </button>
+         <button class="ds-gallery__thumb">
+           <img src="..." alt="Thumbnail 2" />
+         </button>
+         <button class="ds-gallery__thumb-more">+3</button>
+       </div>
+     </div>
+
+   Lightbox overlay:
+     <div class="ds-lightbox ds-lightbox--open">
+       <button class="ds-lightbox__close" aria-label="Close">&times;</button>
+       <button class="ds-lightbox__prev" aria-label="Previous">&lsaquo;</button>
+       <img class="ds-lightbox__image" src="..." alt="..." />
+       <button class="ds-lightbox__next" aria-label="Next">&rsaquo;</button>
+       <span class="ds-lightbox__counter">2 / 8</span>
+     </div>
+   ========================================================================== */
+
+/* ==========================================================================
+   Gallery (thumbnails)
+   ========================================================================== */
+
+.ds-gallery {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ds-space-2);
+
+  /* --- Main image --- */
+  &__main {
+    position: relative;
+    overflow: hidden;
+    border-radius: var(--ds-radius-xl);
+    background-color: var(--ds-color-surface-muted);
+    cursor: pointer;
+
+    & img {
+      display: block;
+      width: 100%;
+      height: auto;
+      object-fit: cover;
+    }
+  }
+
+  /* --- Thumbnail strip --- */
+  &__thumbs {
+    display: flex;
+    gap: var(--ds-space-2);
+    overflow-x: auto;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  /* --- Individual thumbnail --- */
+  &__thumb {
+    flex-shrink: 0;
+    width: 4rem;
+    height: 4rem;
+    padding: 0;
+    border: 2px solid transparent;
+    border-radius: var(--ds-radius-md);
+    overflow: hidden;
+    cursor: pointer;
+    background: var(--ds-color-surface-muted);
+    transition:
+      border-color var(--ds-duration-fast) var(--ds-ease-default),
+      opacity var(--ds-duration-fast) var(--ds-ease-default);
+
+    & img {
+      display: block;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    &:hover {
+      border-color: var(--ds-color-border-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 {
+      border-color: var(--ds-color-interactive);
+    }
+  }
+
+  /* --- "+N more" button --- */
+  &__thumb-more {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 4rem;
+    height: 4rem;
+    border: 1px solid var(--ds-color-border);
+    border-radius: var(--ds-radius-md);
+    background-color: var(--ds-color-surface-muted);
+    color: var(--ds-color-text-secondary);
+    font-size: var(--ds-text-sm);
+    font-weight: var(--ds-weight-medium);
+    font-family: var(--ds-font-sans);
+    cursor: pointer;
+    transition: background-color var(--ds-duration-fast) var(--ds-ease-default);
+
+    &:hover {
+      background-color: var(--ds-color-surface-hover);
+    }
+  }
+}
+
+/* ==========================================================================
+   Lightbox (fullscreen overlay)
+   ========================================================================== */
+
+.ds-lightbox {
+  position: fixed;
+  inset: 0;
+  z-index: var(--ds-z-modal);
+  display: none;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, 0.9);
+
+  &--open {
+    display: flex;
+  }
+
+  /* --- Image --- */
+  &__image {
+    max-width: 90vw;
+    max-height: 85vh;
+    object-fit: contain;
+    border-radius: var(--ds-radius-md);
+    user-select: none;
+  }
+
+  /* --- Close button --- */
+  &__close {
+    position: absolute;
+    inset-block-start: var(--ds-space-4);
+    inset-inline-end: var(--ds-space-4);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--ds-size-3);
+    height: var(--ds-size-3);
+    border: none;
+    border-radius: var(--ds-radius-full);
+    background-color: rgba(255, 255, 255, 0.15);
+    color: var(--ds-color-on-inverted);
+    font-size: var(--ds-text-xl);
+    cursor: pointer;
+    transition: background-color var(--ds-duration-fast) var(--ds-ease-default);
+
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.25);
+    }
+
+    &:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 var(--ds-ring-width) rgba(255, 255, 255, 0.5);
+    }
+  }
+
+  /* --- Prev/Next navigation --- */
+  &__prev,
+  &__next {
+    position: absolute;
+    inset-block-start: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--ds-size-4);
+    height: var(--ds-size-4);
+    border: none;
+    border-radius: var(--ds-radius-full);
+    background-color: rgba(255, 255, 255, 0.15);
+    color: var(--ds-color-on-inverted);
+    font-size: var(--ds-text-2xl);
+    cursor: pointer;
+    transition: background-color var(--ds-duration-fast) var(--ds-ease-default);
+
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.25);
+    }
+
+    &:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 var(--ds-ring-width) rgba(255, 255, 255, 0.5);
+    }
+
+    &:disabled {
+      opacity: var(--ds-opacity-disabled);
+      pointer-events: none;
+    }
+  }
+
+  &__prev {
+    inset-inline-start: var(--ds-space-4);
+  }
+
+  &__next {
+    inset-inline-end: var(--ds-space-4);
+  }
+
+  /* --- Counter --- */
+  &__counter {
+    position: absolute;
+    inset-block-end: var(--ds-space-4);
+    inset-inline-start: 50%;
+    transform: translateX(-50%);
+    padding: var(--ds-space-1) var(--ds-space-3);
+    border-radius: var(--ds-radius-full);
+    background-color: rgba(0, 0, 0, 0.6);
+    color: var(--ds-color-on-inverted);
+    font-size: var(--ds-text-sm);
+    font-family: var(--ds-font-sans);
+    font-variant-numeric: tabular-nums;
+    user-select: none;
+  }
+}
+
+/* --- Reduced motion --- */
+@media (prefers-reduced-motion: reduce) {
+  .ds-lightbox {
+    animation: none;
+  }
+}

package/src/components/hero.css

@@ -0,0 +1,111 @@
+/* ==========================================================================
+   Component: Hero
+   Full-width hero section with background image, gradient overlay,
+   and optional frosted glass backdrop.
+
+   The overlay uses color-mix() with --ds-color-bg for theme-aware darkening.
+   Text color is NOT forced — use ds-text-always-white or ds-text-primary
+   depending on your background.
+
+   Usage:
+     <section class="ds-hero" style="background-image: url(...)">
+       <div class="ds-hero__overlay"></div>
+       <div class="ds-hero__content ds-container">
+         <div class="ds-hero__backdrop">
+           <h1 class="ds-hero__title ds-hero-title ds-text-always-white">Heading</h1>
+           <p class="ds-hero__subtitle ds-text-always-white">Subheading</p>
+         </div>
+       </div>
+     </section>
+
+   Variants:
+     ds-hero--full      Generous padding, auto height (no min-height)
+     ds-hero__overlay--subtle   Lighter overlay, photo shows through more
+
+   ARIA: role="banner" or within <header>. Background images are decorative
+   — add meaningful content in the markup, not in CSS.
+   ========================================================================== */
+
+.ds-hero {
+  position: relative;
+  min-height: 28rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  background-size: cover;
+  background-position: center;
+}
+
+/* --- Full variant (generous padding, no min-height) --- */
+.ds-hero--full {
+  min-height: auto;
+  padding-block: var(--ds-space-16);
+}
+
+@media (min-width: 768px) {
+  .ds-hero--full {
+    padding-block: var(--ds-space-20);
+  }
+}
+
+/* --- Gradient overlay (theme-aware darkening) --- */
+.ds-hero__overlay {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    to bottom,
+    color-mix(in srgb, var(--ds-color-bg) 70%, transparent),
+    color-mix(in srgb, var(--ds-color-bg) 92%, transparent)
+  );
+}
+
+.ds-hero__overlay--subtle {
+  background: linear-gradient(
+    to bottom,
+    color-mix(in srgb, var(--ds-color-bg) 20%, transparent),
+    color-mix(in srgb, var(--ds-color-bg) 40%, transparent)
+  );
+}
+
+[data-theme="dark"] .ds-hero__overlay {
+  background: linear-gradient(
+    to bottom,
+    color-mix(in srgb, var(--ds-color-bg) 80%, transparent),
+    color-mix(in srgb, var(--ds-color-bg) 95%, transparent)
+  );
+}
+
+[data-theme="dark"] .ds-hero__overlay--subtle {
+  background: linear-gradient(
+    to bottom,
+    color-mix(in srgb, var(--ds-color-bg) 30%, transparent),
+    color-mix(in srgb, var(--ds-color-bg) 50%, transparent)
+  );
+}
+
+/* --- Content wrapper (above overlay) --- */
+.ds-hero__content {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+}
+
+/* --- Frosted glass backdrop --- */
+.ds-hero__backdrop {
+  display: block;
+  padding: var(--ds-space-8);
+  border-radius: var(--ds-radius-2xl);
+  background: rgba(0, 0, 0, 0.35);
+  backdrop-filter: blur(32px) saturate(1.6);
+  -webkit-backdrop-filter: blur(32px) saturate(1.6);
+  max-width: 40rem;
+  margin-inline: auto;
+}
+
+/* --- Title & subtitle (no forced color — use ds-text-always-white or
+   ds-text-primary depending on your overlay/backdrop) --- */
+.ds-hero__title,
+.ds-hero__subtitle {
+  color: inherit;
+}

package/src/components/icon-btn.css

@@ -0,0 +1,103 @@
+/* ==========================================================================
+   Component: Icon Button
+   Standalone icon button for actions, toolbar items, and table rows.
+   A minimal interactive element that wraps a single icon.
+
+   ARIA requirements (consumer responsibility):
+   - Always add aria-label="[action]" (e.g., aria-label="Delete")
+   - Disabled: add aria-disabled="true"
+   - Toggle: use aria-pressed="true|false" for toggle icon buttons
+
+   Usage:
+     <button class="ds-icon-btn" aria-label="Delete">
+       <svg>...</svg>
+     </button>
+     <button class="ds-icon-btn ds-icon-btn--sm" aria-label="Edit">...</button>
+     <button class="ds-icon-btn ds-icon-btn--danger" aria-label="Remove">...</button>
+
+   Sizes:
+     .ds-icon-btn--xs  — 24px (var(--ds-size-1))
+     .ds-icon-btn--sm  — 32px (var(--ds-size-2))
+     (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);
+  scroll-margin-block: var(--ds-space-16, 4rem);
+}
+
+.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: var(--ds-size-2);
+  height: var(--ds-size-2);
+  padding: var(--ds-space-1-5);
+  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: var(--ds-color-error-subtle); /* fallback for browsers without color-mix() */
+  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);
+}

package/src/components/index.css

@@ -0,0 +1,74 @@
+/* === Form — Inputs, selectors, and form controls === */
+@import './input.css';
+@import './field.css';
+@import './toggle.css';
+@import './custom-select.css';
+@import './combobox.css';
+@import './number-input.css';
+@import './pin-input.css';
+@import './datepicker.css';
+@import './color-picker.css';
+@import './slider.css';
+@import './drop-zone.css';
+@import './star-rating.css';
+
+/* === Data Display — Present information and status === */
+@import './badge.css';
+@import './tag.css';
+@import './chip.css';
+@import './avatar.css';
+@import './stat-card.css';
+@import './table.css';
+@import './description-list.css';
+@import './timeline.css';
+@import './progress.css';
+@import './skeleton.css';
+@import './result.css';
+@import './truncated-text.css';
+
+/* === Navigation — Wayfinding and page structure === */
+@import './nav.css';
+@import './breadcrumb.css';
+@import './tabs.css';
+@import './pagination.css';
+@import './segmented-control.css';
+@import './bottom-nav.css';
+@import './toolbar.css';
+
+/* === Feedback — Communicate status and system messages === */
+@import './alert.css';
+@import './toast.css';
+@import './spinner.css';
+@import './empty-state.css';
+@import './tooltip.css';
+
+/* === Overlay — Floating panels and dialogs === */
+@import './modal.css';
+@import './drawer.css';
+@import './dropdown.css';
+@import './popover.css';
+@import './bottom-sheet.css';
+@import './command.css';
+@import './context-menu.css';
+
+/* === Layout — Structure and organize content === */
+@import './card.css';
+@import './divider.css';
+@import './accordion.css';
+@import './collapsible.css';
+@import './scroll-area.css';
+@import './gallery.css';
+@import './hero.css';
+@import './admin-layout.css';
+@import './media-library.css';
+
+/* === Content — Rich text and prose === */
+@import './prose.css';
+
+/* === Action — Trigger operations and commands === */
+@import './button.css';
+@import './icon-btn.css';
+@import './copy-button.css';
+@import './kbd.css';
+@import './search.css';
+@import './sortable.css';