@digiko-npm/designsystem 0.5.0 → 0.7.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digiko-npm/designsystem",
-  "version": "0.5.0",
+  "version": "0.7.2",
   "description": "Design system — installable, extensible, indestructible.",
   "main": "dist/designsystem.css",
   "style": "dist/designsystem.css",
@@ -19,14 +19,17 @@
     "./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/command": "./src/components/command.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/icon-btn": "./src/components/icon-btn.css",
     "./components/input": "./src/components/input.css",
     "./components/kbd": "./src/components/kbd.css",
@@ -35,11 +38,13 @@
     "./components/pagination": "./src/components/pagination.css",
     "./components/popover": "./src/components/popover.css",
     "./components/progress": "./src/components/progress.css",
+    "./components/result": "./src/components/result.css",
     "./components/search": "./src/components/search.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/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",

package/src/base/typography.css

@@ -30,7 +30,7 @@ p {
 }
 
 .ds-prose p + p {
-  margin-top: var(--ds-space-4);
+  margin-block-start: var(--ds-space-4);
 }
 
 small {
@@ -87,7 +87,7 @@ strong, b {
 @media (min-width: 768px) {
   .ds-hero-title { font-size: var(--ds-text-6xl); }
 }
-@media (min-width: 1024px) {
+@media (min-width: 1024px) /* --ds-breakpoint-lg */ {
   .ds-hero-title { font-size: var(--ds-text-7xl); }
 }
 
@@ -116,8 +116,8 @@ pre code {
 }
 
 blockquote {
-  padding-left: var(--ds-space-4);
-  border-left: 2px solid var(--ds-color-border-hover);
+  padding-inline-start: var(--ds-space-4);
+  border-inline-start: 2px solid var(--ds-color-border-hover);
   color: var(--ds-color-text-secondary);
 }
 
@@ -140,9 +140,9 @@ hr {
 }
 
 .ds-prose ul, .ds-prose ol {
-  padding-left: var(--ds-space-6);
-  margin-top: var(--ds-space-2);
-  margin-bottom: var(--ds-space-2);
+  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; }
@@ -152,7 +152,7 @@ hr {
   color: var(--ds-color-text-secondary);
 }
 .ds-prose li + li {
-  margin-top: var(--ds-space-1);
+  margin-block-start: var(--ds-space-1);
 }
 
 /* Tabular figures for numbers */

package/src/components/accordion.css

@@ -4,6 +4,12 @@
    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
@@ -11,8 +17,8 @@
    Usage:
      <div class="ds-accordion">
        <div class="ds-accordion__item ds-accordion__item--open">
-         <button class="ds-accordion__trigger">Section</button>
-         <div class="ds-accordion__content">
+         <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>
@@ -34,11 +40,11 @@
    --------------------------------------------------------------------------- */
 
 .ds-accordion__item {
-  border-top: 1px solid var(--ds-color-border);
+  border-block-start: 1px solid var(--ds-color-border);
 }
 
 .ds-accordion__item:first-child {
-  border-top: 0;
+  border-block-start: 0;
 }
 
 /* ---------------------------------------------------------------------------
@@ -52,7 +58,7 @@
   align-items: center;
   width: 100%;
   padding: var(--ds-space-4);
-  text-align: left;
+  text-align: start;
   font-family: var(--ds-font-sans);
   font-size: var(--ds-text-sm);
   font-weight: var(--ds-weight-medium);
@@ -69,11 +75,11 @@
   display: inline-block;
   width: 0.5rem;
   height: 0.5rem;
-  border-right: 2px solid var(--ds-color-text-secondary);
-  border-bottom: 2px solid var(--ds-color-text-secondary);
+  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-left: var(--ds-space-3);
+  margin-inline-start: var(--ds-space-3);
   transition: transform var(--ds-duration-fast) var(--ds-ease-default);
 }
 
@@ -83,6 +89,7 @@
 .ds-accordion__trigger: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);
 }
 
 /* Open state – rotate chevron */
@@ -112,7 +119,7 @@
 
 .ds-accordion__body {
   padding: var(--ds-space-4);
-  padding-top: 0;
+  padding-block-start: 0;
   font-size: var(--ds-text-sm);
   color: var(--ds-color-text-secondary);
   line-height: var(--ds-leading-relaxed);
@@ -128,12 +135,12 @@
 }
 
 .ds-accordion--flush .ds-accordion__item {
-  border-top: 0;
-  border-bottom: 1px solid var(--ds-color-border);
+  border-block-start: 0;
+  border-block-end: 1px solid var(--ds-color-border);
 }
 
 .ds-accordion--flush .ds-accordion__item:last-child {
-  border-bottom: 0;
+  border-block-end: 0;
 }
 
 /* ==========================================================================
@@ -149,10 +156,10 @@
 .ds-accordion--separated .ds-accordion__item {
   border: 1px solid var(--ds-color-border);
   border-radius: var(--ds-radius-xl);
-  margin-bottom: var(--ds-space-3);
+  margin-block-end: var(--ds-space-3);
   overflow: hidden;
 }
 
 .ds-accordion--separated .ds-accordion__item:last-child {
-  margin-bottom: 0;
+  margin-block-end: 0;
 }

package/src/components/alert.css

@@ -1,6 +1,11 @@
 /* ==========================================================================
    Component: Alert
    Contextual feedback banners with semantic variants and dismissibility.
+
+   ARIA requirements (consumer responsibility):
+   - Container: role="alert" (for important messages) or role="status"
+   - Dismissible: close button needs aria-label="Dismiss"
+   - For non-urgent info, use role="status" instead of role="alert"
    ========================================================================== */
 
 .ds-alert {
@@ -12,7 +17,7 @@
   border: 1px solid var(--ds-color-border);
   border-radius: var(--ds-radius-lg);
   background-color: var(--ds-color-surface);
-  border-left: var(--ds-accent-border-width) solid var(--ds-color-border);
+  border-inline-start: var(--ds-accent-border-width) solid var(--ds-color-border);
 }
 
 /* --- Semantic Variants --- */
@@ -20,25 +25,25 @@
 .ds-alert--info {
   background-color: var(--ds-color-info-subtle);
   border-color: var(--ds-color-info-border);
-  border-left-color: var(--ds-color-info);
+  border-inline-start-color: var(--ds-color-info);
 }
 
 .ds-alert--success {
   background-color: var(--ds-color-success-subtle);
   border-color: var(--ds-color-success-border);
-  border-left-color: var(--ds-color-success);
+  border-inline-start-color: var(--ds-color-success);
 }
 
 .ds-alert--warning {
   background-color: var(--ds-color-warning-subtle);
   border-color: var(--ds-color-warning-border);
-  border-left-color: var(--ds-color-warning);
+  border-inline-start-color: var(--ds-color-warning);
 }
 
 .ds-alert--error {
   background-color: var(--ds-color-error-subtle);
   border-color: var(--ds-color-error-border);
-  border-left-color: var(--ds-color-error);
+  border-inline-start-color: var(--ds-color-error);
 }
 
 /* --- Icon --- */
@@ -77,11 +82,11 @@
   font-size: var(--ds-text-sm);
   line-height: var(--ds-leading-normal);
   color: var(--ds-color-text-secondary);
-  margin-top: var(--ds-space-1);
+  margin-block-start: var(--ds-space-1);
 }
 
 .ds-alert__title + .ds-alert__description {
-  margin-top: var(--ds-space-1);
+  margin-block-start: var(--ds-space-1);
 }
 
 /* --- Close Button --- */
@@ -109,6 +114,7 @@
 .ds-alert__close: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);
 }
 
 /* --- Compact Variant --- */
@@ -122,29 +128,29 @@
 
 .ds-alert--banner {
   border-radius: var(--ds-radius-none);
-  border-left: none;
-  border-right: none;
-  border-top: 1px solid var(--ds-color-border);
-  border-bottom: 1px solid var(--ds-color-border);
+  border-inline-start: none;
+  border-inline-end: none;
+  border-block-start: 1px solid var(--ds-color-border);
+  border-block-end: 1px solid var(--ds-color-border);
   width: 100%;
 }
 
 .ds-alert--banner.ds-alert--info {
-  border-top-color: var(--ds-color-info-border);
-  border-bottom-color: var(--ds-color-info-border);
+  border-block-start-color: var(--ds-color-info-border);
+  border-block-end-color: var(--ds-color-info-border);
 }
 
 .ds-alert--banner.ds-alert--success {
-  border-top-color: var(--ds-color-success-border);
-  border-bottom-color: var(--ds-color-success-border);
+  border-block-start-color: var(--ds-color-success-border);
+  border-block-end-color: var(--ds-color-success-border);
 }
 
 .ds-alert--banner.ds-alert--warning {
-  border-top-color: var(--ds-color-warning-border);
-  border-bottom-color: var(--ds-color-warning-border);
+  border-block-start-color: var(--ds-color-warning-border);
+  border-block-end-color: var(--ds-color-warning-border);
 }
 
 .ds-alert--banner.ds-alert--error {
-  border-top-color: var(--ds-color-error-border);
-  border-bottom-color: var(--ds-color-error-border);
+  border-block-start-color: var(--ds-color-error-border);
+  border-block-end-color: var(--ds-color-error-border);
 }

package/src/components/avatar.css

@@ -7,8 +7,8 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 2.5rem;
-  height: 2.5rem;
+  width: var(--ds-size-3);
+  height: var(--ds-size-3);
   border-radius: var(--ds-radius-full);
   background-color: var(--ds-color-bg-elevated);
   color: var(--ds-color-text-secondary);
@@ -30,32 +30,32 @@
 /* --- Sizes --- */
 
 .ds-avatar--xs {
-  width: 1.5rem;
-  height: 1.5rem;
+  width: var(--ds-size-1);
+  height: var(--ds-size-1);
   font-size: var(--ds-text-xs);
 }
 
 .ds-avatar--sm {
-  width: 2rem;
-  height: 2rem;
+  width: var(--ds-size-2);
+  height: var(--ds-size-2);
   font-size: var(--ds-text-xs);
 }
 
 .ds-avatar--md {
-  width: 2.5rem;
-  height: 2.5rem;
+  width: var(--ds-size-3);
+  height: var(--ds-size-3);
   font-size: var(--ds-text-sm);
 }
 
 .ds-avatar--lg {
-  width: 3rem;
-  height: 3rem;
+  width: var(--ds-size-4);
+  height: var(--ds-size-4);
   font-size: var(--ds-text-base);
 }
 
 .ds-avatar--xl {
-  width: 4rem;
-  height: 4rem;
+  width: var(--ds-space-16);
+  height: var(--ds-space-16);
   font-size: var(--ds-text-lg);
 }
 
@@ -77,19 +77,19 @@
 }
 
 .ds-avatar-group > .ds-avatar + .ds-avatar {
-  margin-left: -0.5rem;
+  margin-inline-start: -0.5rem;
 }
 
 .ds-avatar-group--sm > .ds-avatar + .ds-avatar {
-  margin-left: -0.375rem;
+  margin-inline-start: -0.375rem;
 }
 
 /* --- Status indicator --- */
 
 .ds-avatar__status {
   position: absolute;
-  bottom: 0;
-  right: 0;
+  inset-block-end: 0;
+  inset-inline-end: 0;
   width: 0.625rem;
   height: 0.625rem;
   border-radius: var(--ds-radius-full);

package/src/components/bottom-nav.css

@@ -3,16 +3,22 @@
    Mobile bottom navigation bar. Hidden on desktop, shown on mobile.
    Fixed to bottom with safe-area insets for notched devices.
 
+   ARIA requirements (consumer responsibility):
+   - Container: <nav aria-label="Bottom navigation">
+   - Active item: aria-current="page" on the current tab
+   - Badge: aria-label on badge parent (e.g., "Home, 3 notifications")
+   - Create button: aria-label="Create new"
+
    Usage:
-     <nav class="ds-bottom-nav">
-       <a href="/" class="ds-bottom-nav__item ds-bottom-nav__item--active">
+     <nav class="ds-bottom-nav" aria-label="Bottom navigation">
+       <a href="/" class="ds-bottom-nav__item ds-bottom-nav__item--active" aria-current="page">
          <span class="ds-bottom-nav__icon">
            <svg>...</svg>
            <span class="ds-bottom-nav__badge">3</span>
          </span>
          <span class="ds-bottom-nav__label">Home</span>
        </a>
-       <button class="ds-bottom-nav__item ds-bottom-nav__item--create">
+       <button class="ds-bottom-nav__item ds-bottom-nav__item--create" aria-label="Create new">
          <span class="ds-bottom-nav__create-icon">+</span>
          <span class="ds-bottom-nav__label">New</span>
        </button>
@@ -26,16 +32,16 @@
 .ds-bottom-nav {
   display: none;
   position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
   z-index: var(--ds-z-dropdown);
   background: var(--ds-color-surface);
-  border-top: 1px solid var(--ds-color-border);
-  padding-bottom: env(safe-area-inset-bottom, 0px);
+  border-block-start: 1px solid var(--ds-color-border);
+  padding-block-end: env(safe-area-inset-bottom, 0px);
 }
 
-@media (max-width: 1023px) {
+@media (max-width: 1023px) /* below --ds-breakpoint-lg */ {
   .ds-bottom-nav {
     display: flex;
     justify-content: space-around;
@@ -43,7 +49,7 @@
   }
 }
 
-@media (min-width: 1024px) {
+@media (min-width: 1024px) /* --ds-breakpoint-lg */ {
   .ds-bottom-nav { display: none !important; }
 }
 
@@ -81,25 +87,25 @@
 /* Notification badge */
 .ds-bottom-nav__badge {
   position: absolute;
-  top: -4px;
-  right: -8px;
-  min-width: 16px;
-  height: 16px;
-  padding: 0 4px;
+  inset-block-start: calc(-1 * var(--ds-space-1));
+  inset-inline-end: calc(-1 * var(--ds-space-2));
+  min-width: var(--ds-space-4);
+  height: var(--ds-space-4);
+  padding: 0 var(--ds-space-1);
   border-radius: var(--ds-radius-full);
   background: var(--ds-color-error);
-  color: #fff;
-  font-size: 10px;
-  font-weight: 600;
-  line-height: 16px;
+  color: var(--ds-color-on-inverted);
+  font-size: var(--ds-text-2xs);
+  font-weight: var(--ds-weight-semibold);
+  line-height: var(--ds-space-4);
   text-align: center;
 }
 
 /* Label */
 .ds-bottom-nav__label {
-  font-size: 10px;
+  font-size: var(--ds-text-2xs);
   font-weight: var(--ds-weight-medium);
-  letter-spacing: 0.02em;
+  letter-spacing: var(--ds-tracking-wide);
 }
 
 /* Create button — elevated center icon */

package/src/components/breadcrumb.css

@@ -3,6 +3,12 @@
    ==========================================================================
    A horizontal breadcrumb trail for hierarchical navigation.
 
+   ARIA requirements (consumer responsibility):
+   - Container: <nav aria-label="Breadcrumb">
+   - Current page: aria-current="page" on the last item
+   - Links: use <a> elements for navigation
+   - Separator: decorative (generated via CSS ::after, not in DOM)
+
    Usage:
      <nav class="ds-breadcrumb" aria-label="Breadcrumb">
        <span class="ds-breadcrumb__item">
@@ -70,6 +76,7 @@
   outline: none;
   box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
   border-radius: var(--ds-radius-sm);
+  scroll-margin-block: var(--ds-space-16, 4rem);
 }
 
 /* ---------------------------------------------------------------------------

package/src/components/button.css

@@ -1,6 +1,13 @@
 /* ==========================================================================
    Component: Button
    Inverted primary, rounded-full CTAs, refined sizing.
+
+   ARIA requirements (consumer responsibility):
+   - Use <button> or <a role="button"> elements
+   - Disabled: add aria-disabled="true" (supported by DS styles)
+   - Loading: add aria-busy="true" when --loading is applied
+   - Icon-only: add aria-label="[action]" for screen readers
+   - Button groups: wrap in role="group" with aria-label
    ========================================================================== */
 
 .ds-btn {
@@ -32,6 +39,7 @@
 .ds-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-btn:disabled,
@@ -164,7 +172,7 @@
 .ds-btn-group .ds-btn { border-radius: 0; }
 .ds-btn-group .ds-btn:first-child { border-radius: var(--ds-radius-lg) 0 0 var(--ds-radius-lg); }
 .ds-btn-group .ds-btn:last-child { border-radius: 0 var(--ds-radius-lg) var(--ds-radius-lg) 0; }
-.ds-btn-group .ds-btn + .ds-btn { margin-left: -1px; }
+.ds-btn-group .ds-btn + .ds-btn { margin-inline-start: -1px; }
 
 /* --- Loading spinner --- */
 .ds-btn--loading {
@@ -178,7 +186,7 @@
   width: 1em;
   height: 1em;
   border: 2px solid currentColor;
-  border-right-color: transparent;
+  border-inline-end-color: transparent;
   border-radius: var(--ds-radius-full);
   animation: ds-btn-spin 0.6s linear infinite;
   color: var(--ds-color-on-inverted);

package/src/components/card.css

@@ -41,7 +41,7 @@
 
 .ds-card__header {
   padding: var(--ds-space-5);
-  border-bottom: 1px solid var(--ds-color-border);
+  border-block-end: 1px solid var(--ds-color-border);
 }
 
 .ds-card__header h3,
@@ -56,7 +56,7 @@
 .ds-card__description {
   font-size: var(--ds-text-sm);
   color: var(--ds-color-text-tertiary);
-  margin-top: var(--ds-space-1);
+  margin-block-start: var(--ds-space-1);
 }
 
 .ds-card__body {
@@ -65,7 +65,7 @@
 
 .ds-card__footer {
   padding: var(--ds-space-4) var(--ds-space-5);
-  border-top: 1px solid var(--ds-color-border);
+  border-block-start: 1px solid var(--ds-color-border);
   display: flex;
   align-items: center;
   gap: var(--ds-space-2);
@@ -89,43 +89,7 @@
 }
 
 /* Flush — no internal dividers */
-.ds-card--flush .ds-card__header { border-bottom: none; }
-.ds-card--flush .ds-card__footer { border-top: none; }
+.ds-card--flush .ds-card__header { border-block-end: none; }
+.ds-card--flush .ds-card__footer { border-block-start: none; }
 
-/* Stat card (like StatCard component) */
-.ds-stat-card {
-  background-color: var(--ds-color-surface);
-  border: 1px solid var(--ds-color-border);
-  border-radius: var(--ds-radius-xl);
-  padding: var(--ds-space-5);
-}
-
-.ds-stat-card__label {
-  font-size: var(--ds-text-sm);
-  color: var(--ds-color-text-tertiary);
-}
-
-.ds-stat-card__value {
-  font-family: var(--ds-font-display);
-  font-weight: var(--ds-font-display-weight);
-  font-size: var(--ds-text-2xl);
-  color: var(--ds-color-text);
-  margin-top: var(--ds-space-1);
-}
-
-.ds-stat-card__detail {
-  font-size: var(--ds-text-xs);
-  color: var(--ds-color-text-tertiary);
-  margin-top: var(--ds-space-0-5);
-}
-
-.ds-stat-card__icon {
-  width: 2.5rem;
-  height: 2.5rem;
-  border-radius: var(--ds-radius-xl);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: var(--ds-color-bg-elevated);
-  color: var(--ds-color-text-secondary);
-}
+/* Stat card — extracted to stat-card.css */

package/src/components/chip.css

@@ -3,10 +3,15 @@
    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">×</button>
+       <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>
@@ -41,7 +46,7 @@
 }
 
 .ds-chip--logic:hover {
-  background: var(--ds-color-surface-hover);
+  background: var(--ds-color-overlay-hover);
 }
 
 /* Sort chip (dashed border) */
@@ -56,6 +61,8 @@
   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;
@@ -68,5 +75,5 @@
 
 .ds-chip__remove:hover {
   color: var(--ds-color-text);
-  background: var(--ds-color-surface-hover);
+  background: var(--ds-color-overlay-hover);
 }