@adamarant/designsystem 0.11.2

package/package.json

@@ -0,0 +1,111 @@
+{
+  "name": "@adamarant/designsystem",
+  "version": "0.11.2",
+  "description": "Design system — installable, extensible, indestructible.",
+  "main": "dist/designsystem.css",
+  "style": "dist/designsystem.css",
+  "exports": {
+    ".": "./dist/designsystem.css",
+    "./min": "./dist/designsystem.min.css",
+    "./tokens": "./src/tokens/index.css",
+    "./base": "./src/base/index.css",
+    "./components": "./src/components/index.css",
+    "./components/accordion": "./src/components/accordion.css",
+    "./components/admin-layout": "./src/components/admin-layout.css",
+    "./components/alert": "./src/components/alert.css",
+    "./components/avatar": "./src/components/avatar.css",
+    "./components/badge": "./src/components/badge.css",
+    "./components/bottom-nav": "./src/components/bottom-nav.css",
+    "./components/bottom-sheet": "./src/components/bottom-sheet.css",
+    "./components/breadcrumb": "./src/components/breadcrumb.css",
+    "./components/button": "./src/components/button.css",
+    "./components/card": "./src/components/card.css",
+    "./components/chip": "./src/components/chip.css",
+    "./components/collapsible": "./src/components/collapsible.css",
+    "./components/color-picker": "./src/components/color-picker.css",
+    "./components/combobox": "./src/components/combobox.css",
+    "./components/command": "./src/components/command.css",
+    "./components/context-menu": "./src/components/context-menu.css",
+    "./components/copy-button": "./src/components/copy-button.css",
+    "./components/custom-select": "./src/components/custom-select.css",
+    "./components/datepicker": "./src/components/datepicker.css",
+    "./components/description-list": "./src/components/description-list.css",
+    "./components/divider": "./src/components/divider.css",
+    "./components/drawer": "./src/components/drawer.css",
+    "./components/drop-zone": "./src/components/drop-zone.css",
+    "./components/dropdown": "./src/components/dropdown.css",
+    "./components/empty-state": "./src/components/empty-state.css",
+    "./components/field": "./src/components/field.css",
+    "./components/gallery": "./src/components/gallery.css",
+    "./components/hero": "./src/components/hero.css",
+    "./components/icon-btn": "./src/components/icon-btn.css",
+    "./components/input": "./src/components/input.css",
+    "./components/kbd": "./src/components/kbd.css",
+    "./components/media-library": "./src/components/media-library.css",
+    "./components/modal": "./src/components/modal.css",
+    "./components/nav": "./src/components/nav.css",
+    "./components/number-input": "./src/components/number-input.css",
+    "./components/pagination": "./src/components/pagination.css",
+    "./components/pin-input": "./src/components/pin-input.css",
+    "./components/popover": "./src/components/popover.css",
+    "./components/progress": "./src/components/progress.css",
+    "./components/prose": "./src/components/prose.css",
+    "./components/result": "./src/components/result.css",
+    "./components/scroll-area": "./src/components/scroll-area.css",
+    "./components/search": "./src/components/search.css",
+    "./components/segmented-control": "./src/components/segmented-control.css",
+    "./components/skeleton": "./src/components/skeleton.css",
+    "./components/slider": "./src/components/slider.css",
+    "./components/sortable": "./src/components/sortable.css",
+    "./components/spinner": "./src/components/spinner.css",
+    "./components/star-rating": "./src/components/star-rating.css",
+    "./components/stat-card": "./src/components/stat-card.css",
+    "./components/table": "./src/components/table.css",
+    "./components/tabs": "./src/components/tabs.css",
+    "./components/tag": "./src/components/tag.css",
+    "./components/timeline": "./src/components/timeline.css",
+    "./components/toast": "./src/components/toast.css",
+    "./components/toggle": "./src/components/toggle.css",
+    "./components/toolbar": "./src/components/toolbar.css",
+    "./components/tooltip": "./src/components/tooltip.css",
+    "./components/truncated-text": "./src/components/truncated-text.css",
+    "./utilities": "./src/utilities/index.css",
+    "./js": "./dist/designsystem.js",
+    "./tokens/json": "./src/tokens/tokens.json"
+  },
+  "files": [
+    "dist/",
+    "src/"
+  ],
+  "scripts": {
+    "build": "node scripts/build.js",
+    "validate": "node scripts/validate.js",
+    "docs": "node scripts/generate-docs.js",
+    "lint": "stylelint 'src/**/*.css'",
+    "dev": "node scripts/build.js --watch & npm run dev --workspace=docs",
+    "dev:legacy": "node scripts/build.js --watch & node scripts/generate-docs.js && live-server --host=localhost --port=3000 --open=examples/ --watch=dist/,examples/ --wait=200 --no-browser"
+  },
+  "workspaces": [
+    "packages/*",
+    "docs"
+  ],
+  "keywords": [
+    "design-system",
+    "css",
+    "tokens",
+    "components"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/adamarant/designsystem.git"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "live-server": "^1.2.2",
+    "stylelint": "^17.5.0",
+    "stylelint-config-standard": "^40.0.0"
+  }
+}

package/src/base/index.css

@@ -0,0 +1,2 @@
+@import './reset.css';
+@import './typography.css';

package/src/base/reset.css

@@ -0,0 +1,119 @@
+/* ==========================================================================
+   Base: Reset
+   Clean, modern, antialiased.
+   ========================================================================== */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-size-adjust: 100%;
+  tab-size: 4;
+  scroll-behavior: smooth;
+  /* overflow-y:auto enables scrollbar-gutter:stable (requires non-visible overflow) */
+  overflow-y: auto;
+  scrollbar-gutter: stable;
+}
+
+html, body {
+  overflow-x: clip;
+}
+
+body {
+  min-height: 100dvh;
+  font-family: var(--ds-font-sans);
+  font-size: var(--ds-text-base);
+  line-height: var(--ds-leading-normal);
+  color: var(--ds-color-text);
+  background-color: var(--ds-color-bg);
+}
+
+img, picture, video, canvas {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+
+/* SVG icons: keep block, but respect explicit width/height attributes
+   (icon libraries like Phosphor/Lucide set size via attrs). The previous
+   `max-width: 100%; height: auto` was collapsing SVGs to 0 inside table
+   cells with fixed widths. Consumers that use SVG as fluid artwork can
+   opt in with their own sizing classes. */
+svg {
+  display: block;
+}
+
+input, button, textarea, select {
+  font: inherit;
+  color: inherit;
+}
+
+button,
+[role="button"],
+select,
+summary {
+  cursor: pointer;
+}
+
+button {
+  background: none;
+  border: none;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+ul, ol {
+  list-style: none;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+/* Hide number input spinners */
+input[type="number"] { -moz-appearance: textfield; }
+input[type="number"]::-webkit-outer-spin-button,
+input[type="number"]::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Focus: subtle ring */
+*:focus-visible {
+  outline: var(--ds-ring-width) solid var(--ds-ring-color);
+  outline-offset: var(--ds-ring-offset);
+}
+
+/* Selection — inverted */
+::selection {
+  background-color: var(--ds-color-selection-bg);
+  color: var(--ds-color-selection-text);
+}
+
+/* Scrollbar — use standard properties (compatible with scrollbar-gutter:stable).
+   ::-webkit-scrollbar breaks scrollbar-gutter in Chromium browsers. */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--ds-scrollbar-thumb) transparent;
+}
+
+.ds-no-scrollbar::-webkit-scrollbar { display: none; }
+.ds-no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
+
+/* Reduce motion — scroll only.
+   Transitions are handled via --ds-duration-* tokens in shadows.css.
+   Keyframe animations are handled per-component. */
+@media (prefers-reduced-motion: reduce) {
+  html { scroll-behavior: auto !important; }
+}

package/src/base/typography.css

@@ -0,0 +1,172 @@
+/* ==========================================================================
+   Base: Typography
+   Display font for headings, generous sizes, editorial hierarchy.
+   ========================================================================== */
+
+/* Display font utility — use on headings to get the display typeface */
+.ds-font-display {
+  font-family: var(--ds-font-display);
+  font-weight: var(--ds-font-display-weight);
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: var(--ds-font-display);
+  font-weight: var(--ds-font-display-weight);
+  line-height: var(--ds-leading-tight);
+  letter-spacing: var(--ds-tracking-tight);
+  color: var(--ds-color-text);
+}
+
+h1 { font-size: var(--ds-text-5xl); }
+h2 { font-size: var(--ds-text-4xl); }
+h3 { font-size: var(--ds-text-2xl); }
+h4 { font-size: var(--ds-text-xl); }
+h5 { font-size: var(--ds-text-lg); }
+h6 { font-size: var(--ds-text-base); font-weight: var(--ds-weight-medium); }
+
+p {
+  line-height: var(--ds-leading-normal);
+  color: var(--ds-color-text-secondary);
+}
+
+.ds-prose p + p {
+  margin-block-start: var(--ds-space-4);
+}
+
+small {
+  font-size: var(--ds-text-xs);
+  color: var(--ds-color-text-tertiary);
+}
+
+strong, b {
+  font-weight: var(--ds-weight-semibold);
+}
+
+/* Overline / label style (like "PRODUCT DESIGNER & DEVELOPER") */
+.ds-overline {
+  font-family: var(--ds-font-sans);
+  font-size: var(--ds-text-sm);
+  font-weight: var(--ds-weight-medium);
+  letter-spacing: var(--ds-tracking-wide);
+  text-transform: uppercase;
+  color: var(--ds-color-text-secondary);
+}
+
+/* UI heading — body font for functional/interface headings (labels, settings, admin) */
+.ds-heading-ui {
+  font-family: var(--ds-font-sans);
+  font-weight: var(--ds-weight-medium);
+}
+
+/* Section title style */
+.ds-section-title {
+  font-family: var(--ds-font-display);
+  font-weight: var(--ds-font-display-weight);
+  font-size: var(--ds-text-3xl);
+  letter-spacing: var(--ds-tracking-tight);
+  color: var(--ds-color-text);
+  text-wrap: balance;
+}
+
+@media (min-width: 640px) {
+  .ds-section-title { font-size: var(--ds-text-4xl); }
+}
+
+/* Hero title — large editorial display */
+.ds-hero-title {
+  font-family: var(--ds-font-display);
+  font-weight: var(--ds-font-display-weight);
+  font-size: var(--ds-text-4xl);
+  line-height: var(--ds-leading-tight);
+  letter-spacing: var(--ds-tracking-tight);
+  color: var(--ds-color-text);
+  text-wrap: balance;
+}
+
+@media (min-width: 640px) {
+  .ds-hero-title { font-size: var(--ds-text-5xl); }
+}
+@media (min-width: 768px) {
+  .ds-hero-title { font-size: var(--ds-text-6xl); }
+}
+@media (min-width: 1024px) /* --ds-breakpoint-lg */ {
+  .ds-hero-title { font-size: var(--ds-text-7xl); }
+}
+
+code, kbd, samp {
+  font-family: var(--ds-font-mono);
+  font-size: 0.9em;
+  background-color: var(--ds-color-surface-elevated);
+  padding: 2px 6px;
+  border-radius: var(--ds-radius-sm);
+}
+
+pre {
+  font-family: var(--ds-font-mono);
+  font-size: var(--ds-text-sm);
+  line-height: var(--ds-leading-relaxed);
+  background-color: var(--ds-color-surface);
+  border: 1px solid var(--ds-color-border);
+  padding: var(--ds-space-4);
+  border-radius: var(--ds-radius-lg);
+  overflow-x: auto;
+}
+
+pre code {
+  background: none;
+  padding: 0;
+}
+
+blockquote {
+  padding-inline-start: var(--ds-space-4);
+  border-inline-start: 2px solid var(--ds-color-border-hover);
+  color: var(--ds-color-text-secondary);
+}
+
+hr {
+  border: none;
+  height: 1px;
+  background-color: var(--ds-color-border);
+  margin: var(--ds-space-8) 0;
+}
+
+/* Prose: opt-in rich text styling */
+.ds-prose a {
+  color: var(--ds-color-info);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  transition: color var(--ds-duration-fast) var(--ds-ease-default);
+}
+.ds-prose a:hover {
+  opacity: 0.8;
+}
+
+.ds-prose ul, .ds-prose ol {
+  padding-inline-start: var(--ds-space-6);
+  margin-block-start: var(--ds-space-2);
+  margin-block-end: var(--ds-space-2);
+}
+.ds-prose ul { list-style-type: disc; }
+.ds-prose ol { list-style-type: decimal; }
+
+.ds-prose li {
+  line-height: var(--ds-leading-normal);
+  color: var(--ds-color-text-secondary);
+}
+.ds-prose li + li {
+  margin-block-start: var(--ds-space-1);
+}
+
+/* Tabular figures for numbers */
+.ds-tabular-nums {
+  font-variant-numeric: tabular-nums;
+}
+
+/* Stat numbers — display font, large */
+.ds-stat-number {
+  font-family: var(--ds-font-display);
+  font-weight: var(--ds-font-display-weight);
+  font-variant-numeric: tabular-nums;
+  font-size: var(--ds-text-2xl);
+  color: var(--ds-color-text);
+}

package/src/components/accordion.css

@@ -0,0 +1,166 @@
+/* ==========================================================================
+   Accordion / Collapse
+   ==========================================================================
+   A vertically stacked set of collapsible sections. Supports CSS-only
+   open/close via the `.ds-accordion__item--open` modifier.
+
+   ARIA requirements (consumer responsibility):
+   - Trigger: <button> with aria-expanded="true|false"
+   - Trigger: aria-controls="[content-panel-id]"
+   - Content panel: id matching aria-controls, role="region", aria-labelledby="[trigger-id]"
+   - Keyboard: Enter/Space toggles section (native <button> handles this)
+
+   Variants:
+     --flush      – borderless, full-bleed style
+     --separated  – visually detached items with individual borders
+
+   Usage:
+     <div class="ds-accordion">
+       <div class="ds-accordion__item ds-accordion__item--open">
+         <button class="ds-accordion__trigger" aria-expanded="true" aria-controls="panel-1">Section</button>
+         <div class="ds-accordion__content" id="panel-1" role="region">
+           <div class="ds-accordion__body">…</div>
+         </div>
+       </div>
+     </div>
+   ========================================================================== */
+
+/* ---------------------------------------------------------------------------
+   Container
+   --------------------------------------------------------------------------- */
+
+.ds-accordion {
+  border: 1px solid var(--ds-color-border);
+  border-radius: var(--ds-radius-xl);
+  overflow: hidden;
+
+  /* ---------------------------------------------------------------------------
+     Item
+     --------------------------------------------------------------------------- */
+
+  &__item {
+    border-block-start: 1px solid var(--ds-color-border);
+
+    &:first-child {
+      border-block-start: 0;
+    }
+
+    /* Open state – rotate chevron */
+    &--open .ds-accordion__trigger::after {
+      transform: rotate(225deg);
+    }
+
+    &--open .ds-accordion__content {
+      max-height: 80rem;
+    }
+  }
+
+  /* ---------------------------------------------------------------------------
+     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);
+
+    /* Chevron indicator (CSS border-arrow) */
+    &::after {
+      content: "";
+      display: inline-block;
+      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);
+      flex-shrink: 0;
+      margin-inline-start: var(--ds-space-3);
+      transition: transform 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);
+    }
+  }
+
+  /* ---------------------------------------------------------------------------
+     Collapsible content wrapper
+     --------------------------------------------------------------------------- */
+
+  &__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);
+  }
+
+  /* ---------------------------------------------------------------------------
+     Inner body (visible content)
+     --------------------------------------------------------------------------- */
+
+  &__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
+   * ========================================================================== */
+
+  &--flush {
+    border: 0;
+    border-radius: 0;
+
+    & .ds-accordion__item {
+      border-block-start: 0;
+      border-block-end: 1px solid var(--ds-color-border);
+
+      &:last-child {
+        border-block-end: 0;
+      }
+    }
+  }
+
+  /* ==========================================================================
+   * Variant: Separated
+   * ========================================================================== */
+
+  &--separated {
+    border: 0;
+    border-radius: 0;
+    overflow: visible;
+
+    & .ds-accordion__item {
+      border: 1px solid var(--ds-color-border);
+      border-radius: var(--ds-radius-xl);
+      margin-block-end: var(--ds-space-3);
+      overflow: hidden;
+
+      &:last-child {
+        margin-block-end: 0;
+      }
+    }
+  }
+}