@digiko-npm/designsystem 0.4.0 → 0.7.1

package/src/components/spinner.css

@@ -0,0 +1,60 @@
+/* ==========================================================================
+   Component: Spinner
+   CSS-only loading spinner using border animation.
+
+   Usage:
+     <span class="ds-spinner"></span>
+     <span class="ds-spinner ds-spinner--sm"></span>
+     <span class="ds-spinner ds-spinner--muted"></span>
+
+   Sizes:
+     .ds-spinner--sm  — 1.25rem (20px)
+     (default)        — 1.5rem (24px)
+     .ds-spinner--lg  — 2rem (32px)
+
+   Variants:
+     (default)          — Border + interactive top
+     .ds-spinner--muted — Inverted colors (for dark backgrounds)
+     .ds-spinner--light — Light colors (for inverted/colored backgrounds)
+   ========================================================================== */
+
+.ds-spinner {
+  display: inline-block;
+  width: 1.5rem;
+  height: 1.5rem;
+  border: 2px solid var(--ds-color-border);
+  border-top-color: var(--ds-color-interactive);
+  border-radius: var(--ds-radius-full);
+  animation: ds-spin 0.8s linear infinite;
+}
+
+@keyframes ds-spin {
+  to { transform: rotate(360deg); }
+}
+
+/* Sizes */
+.ds-spinner--sm {
+  width: 1rem;
+  height: 1rem;
+}
+
+.ds-spinner--md {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.ds-spinner--lg {
+  width: 2rem;
+  height: 2rem;
+}
+
+/* Color variants */
+.ds-spinner--muted {
+  border-color: var(--ds-color-inverted);
+  border-top-color: transparent;
+}
+
+.ds-spinner--light {
+  border-color: var(--ds-color-on-inverted);
+  border-top-color: transparent;
+}

package/src/components/stat-card.css

@@ -0,0 +1,41 @@
+/* ==========================================================================
+   Component: Stat Card
+   Compact metric display with label, value, detail, and optional icon.
+   ========================================================================== */
+
+.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-block-start: var(--ds-space-1);
+}
+
+.ds-stat-card__detail {
+  font-size: var(--ds-text-xs);
+  color: var(--ds-color-text-tertiary);
+  margin-block-start: 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);
+}

package/src/components/table.css

@@ -4,7 +4,7 @@
 
 .ds-table {
   width: 100%;
-  text-align: left;
+  text-align: start;
   font-size: var(--ds-text-sm);
 }
 
@@ -15,13 +15,13 @@
   color: var(--ds-color-text-tertiary);
   text-transform: uppercase;
   letter-spacing: var(--ds-tracking-wide);
-  border-bottom: 1px solid var(--ds-color-border);
+  border-block-end: 1px solid var(--ds-color-border);
 }
 
 .ds-table td {
   padding: var(--ds-space-3) var(--ds-space-4);
   color: var(--ds-color-text);
-  border-bottom: 1px solid var(--ds-color-border-subtle);
+  border-block-end: 1px solid var(--ds-color-border-subtle);
 }
 
 .ds-table tbody tr {

package/src/components/tabs.css

@@ -1,20 +1,27 @@
 /* ==========================================================================
    Component: Tabs
    Horizontal/vertical tab navigation with pill, small, and full-width variants.
+
+   ARIA requirements (consumer responsibility):
+   - Tab list: role="tablist", aria-label="[description]"
+   - Tab: role="tab", aria-selected="true|false", aria-controls="[panel-id]"
+   - Tab panel: role="tabpanel", id matching aria-controls, aria-labelledby="[tab-id]"
+   - Keyboard: ArrowLeft/Right (horizontal) or ArrowUp/Down (vertical) to navigate
+   - Active tab: only the active tab should be in tab order (tabindex="0"), others tabindex="-1"
    ========================================================================== */
 
 .ds-tabs {
   display: flex;
   flex-direction: row;
   align-items: stretch;
-  border-bottom: 1px solid var(--ds-color-border);
+  border-block-end: 1px solid var(--ds-color-border);
   gap: var(--ds-space-0);
 }
 
 /* --- Pill variant --- */
 
 .ds-tabs--pills {
-  border-bottom: none;
+  border-block-end: none;
   gap: var(--ds-space-1);
   background-color: var(--ds-color-bg-elevated);
   border-radius: var(--ds-radius-lg);
@@ -22,7 +29,7 @@
 }
 
 .ds-tabs--pills .ds-tab {
-  border-bottom: none;
+  border-block-end: none;
   border-radius: var(--ds-radius-md);
   padding: var(--ds-space-1-5) var(--ds-space-3);
 }
@@ -35,28 +42,28 @@
   background-color: var(--ds-color-surface);
   color: var(--ds-color-text);
   box-shadow: var(--ds-shadow-sm);
-  border-bottom: none;
+  border-block-end: none;
 }
 
 /* --- Vertical variant --- */
 
 .ds-tabs--vertical {
   flex-direction: column;
-  border-bottom: none;
-  border-right: 1px solid var(--ds-color-border);
+  border-block-end: none;
+  border-inline-end: 1px solid var(--ds-color-border);
   gap: var(--ds-space-0-5);
 }
 
 .ds-tabs--vertical .ds-tab {
-  border-bottom: none;
-  border-right: 2px solid transparent;
+  border-block-end: none;
+  border-inline-end: 2px solid transparent;
   padding: var(--ds-space-2) var(--ds-space-4);
-  text-align: left;
+  text-align: start;
 }
 
 .ds-tabs--vertical .ds-tab--active {
-  border-bottom: none;
-  border-right-color: var(--ds-color-interactive);
+  border-block-end: none;
+  border-inline-end-color: var(--ds-color-interactive);
   color: var(--ds-color-text);
 }
 
@@ -91,14 +98,14 @@
   line-height: var(--ds-leading-snug);
   color: var(--ds-color-text-secondary);
   cursor: pointer;
-  border-bottom: 2px solid transparent;
+  border-block-end: 2px solid transparent;
   background: none;
-  border-top: none;
-  border-left: none;
-  border-right: none;
+  border-block-start: none;
+  border-inline-start: none;
+  border-inline-end: none;
   white-space: nowrap;
   transition: all var(--ds-duration-fast) var(--ds-ease-default);
-  margin-bottom: -1px;
+  margin-block-end: -1px;
 }
 
 .ds-tab:hover {
@@ -109,11 +116,12 @@
   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);
 }
 
 .ds-tab--active {
   color: var(--ds-color-text);
-  border-bottom-color: var(--ds-color-interactive);
+  border-block-end-color: var(--ds-color-interactive);
 }
 
 .ds-tab:disabled,
@@ -159,5 +167,5 @@
 /* --- Tab Panel --- */
 
 .ds-tab-panel {
-  padding-top: var(--ds-space-5);
+  padding-block-start: var(--ds-space-5);
 }

package/src/components/tag.css

@@ -3,6 +3,11 @@
    ==========================================================================
    Interactive, optionally removable tag for categorisation and filtering.
 
+   ARIA requirements (consumer responsibility):
+   - Remove button: add aria-label="Remove [tag name]"
+   - Selectable tags (as <button>): use aria-pressed="true|false"
+   - Tag list: wrap in role="list" with aria-label
+
    Usage:
      <span class="ds-tag">Default</span>
      <span class="ds-tag ds-tag--success">Approved</span>
@@ -43,6 +48,7 @@
 button.ds-tag: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);
 }
 
 /* ---------------------------------------------------------------------------
@@ -90,7 +96,7 @@ button.ds-tag:focus-visible {
    --------------------------------------------------------------------------- */
 
 .ds-tag--removable {
-  padding-right: var(--ds-space-1);
+  padding-inline-end: var(--ds-space-1);
 }
 
 /* ---------------------------------------------------------------------------
@@ -103,6 +109,8 @@ button.ds-tag:focus-visible {
   justify-content: center;
   width: 1rem;
   height: 1rem;
+  min-width: 1.5rem; /* WCAG 2.5.8: minimum 24px target */
+  min-height: 1.5rem;
   padding: 0;
   border: none;
   border-radius: var(--ds-radius-full);
@@ -148,7 +156,7 @@ button.ds-tag:focus-visible {
 }
 
 .ds-tag--sm.ds-tag--removable {
-  padding-right: var(--ds-space-0-5, 0.125rem);
+  padding-inline-end: var(--ds-space-0-5, 0.125rem);
 }
 
 /* ---------------------------------------------------------------------------
@@ -161,5 +169,5 @@ button.ds-tag:focus-visible {
 }
 
 .ds-tag--lg.ds-tag--removable {
-  padding-right: var(--ds-space-1-5, 0.375rem);
+  padding-inline-end: var(--ds-space-1-5, 0.375rem);
 }

package/src/components/timeline.css

@@ -26,16 +26,16 @@
 
 .ds-timeline {
   position: relative;
-  padding-left: var(--ds-space-8);
+  padding-inline-start: var(--ds-space-8);
 }
 
 /* Vertical line */
 .ds-timeline::before {
   content: "";
   position: absolute;
-  left: 0.9rem;
-  top: 0;
-  bottom: 0;
+  inset-inline-start: 0.9rem;
+  inset-block-start: 0;
+  inset-block-end: 0;
   width: 2px;
   background-color: var(--ds-color-border);
 }
@@ -43,17 +43,17 @@
 /* Item */
 .ds-timeline__item {
   position: relative;
-  padding-bottom: var(--ds-space-6);
+  padding-block-end: var(--ds-space-6);
 }
 
 .ds-timeline__item:last-child {
-  padding-bottom: 0;
+  padding-block-end: 0;
 }
 
 /* Dot */
 .ds-timeline__dot {
   position: absolute;
-  left: calc(-1 * var(--ds-space-8) + 0.5rem);
+  inset-inline-start: calc(-1 * var(--ds-space-8) + 0.5rem);
   width: 1rem;
   height: 1rem;
   border-radius: var(--ds-radius-full);
@@ -96,35 +96,35 @@
 .ds-timeline__description {
   font-size: var(--ds-text-sm);
   color: var(--ds-color-text-secondary);
-  margin-top: var(--ds-space-1);
+  margin-block-start: var(--ds-space-1);
 }
 
 /* Timestamp */
 .ds-timeline__time {
   font-size: var(--ds-text-xs);
   color: var(--ds-color-text-tertiary);
-  margin-top: var(--ds-space-0-5);
+  margin-block-start: var(--ds-space-0-5);
 }
 
 /* Compact variant */
 .ds-timeline--compact {
-  padding-left: var(--ds-space-6);
+  padding-inline-start: var(--ds-space-6);
 }
 
 .ds-timeline--compact::before {
-  left: 0.6rem;
+  inset-inline-start: 0.6rem;
 }
 
 .ds-timeline--compact .ds-timeline__item {
-  padding-bottom: var(--ds-space-4);
+  padding-block-end: var(--ds-space-4);
 }
 
 .ds-timeline--compact .ds-timeline__item:last-child {
-  padding-bottom: 0;
+  padding-block-end: 0;
 }
 
 .ds-timeline--compact .ds-timeline__dot {
-  left: calc(-1 * var(--ds-space-6) + 0.25rem);
+  inset-inline-start: calc(-1 * var(--ds-space-6) + 0.25rem);
   width: 0.75rem;
   height: 0.75rem;
 }

package/src/components/toast.css

@@ -1,5 +1,11 @@
 /* ==========================================================================
    Component: Toast
+
+   ARIA requirements (consumer responsibility):
+   - Container: role="status", aria-live="polite" (or role="alert" for errors)
+   - Close button: aria-label="Dismiss notification"
+   - Auto-dismiss: provide enough time (minimum 5s), or let user control
+   - Toast region: wrap container in aria-label="Notifications"
    ========================================================================== */
 
 .ds-toast-container {
@@ -12,10 +18,10 @@
   pointer-events: none;
 }
 
-.ds-toast-container--top-right    { top: 0; right: 0; }
-.ds-toast-container--bottom-right { bottom: 0; right: 0; }
+.ds-toast-container--top-right    { inset-block-start: 0; inset-inline-end: 0; }
+.ds-toast-container--bottom-right { inset-block-end: 0; inset-inline-end: 0; }
 .ds-toast-container--bottom-center {
-  bottom: 0; left: 50%;
+  inset-block-end: 0; inset-inline-start: 50%;
   transform: translateX(-50%);
   align-items: center;
 }
@@ -35,10 +41,10 @@
   animation: ds-toast-in var(--ds-duration-slow) var(--ds-ease-out-expo) forwards;
 }
 
-.ds-toast--info    { border-left: var(--ds-accent-border-width) solid var(--ds-color-info); }
-.ds-toast--success { border-left: var(--ds-accent-border-width) solid var(--ds-color-success); }
-.ds-toast--warning { border-left: var(--ds-accent-border-width) solid var(--ds-color-warning); }
-.ds-toast--error   { border-left: var(--ds-accent-border-width) solid var(--ds-color-error); }
+.ds-toast--info    { border-inline-start: var(--ds-accent-border-width) solid var(--ds-color-info); }
+.ds-toast--success { border-inline-start: var(--ds-accent-border-width) solid var(--ds-color-success); }
+.ds-toast--warning { border-inline-start: var(--ds-accent-border-width) solid var(--ds-color-warning); }
+.ds-toast--error   { border-inline-start: var(--ds-accent-border-width) solid var(--ds-color-error); }
 
 .ds-toast__message {
   flex: 1;
@@ -55,9 +61,15 @@
 .ds-toast__close:hover {
   color: var(--ds-color-text);
 }
+.ds-toast__close {
+  min-width: 1.5rem; /* WCAG 2.5.8: minimum 24px target */
+  min-height: 1.5rem;
+}
+
 .ds-toast__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);
 }
 
 @keyframes ds-toast-in {

package/src/components/toggle.css

@@ -4,6 +4,12 @@
    A toggle (switch) control for binary on/off states.
    Supports aria-checked attribute and modifier-class driven states.
 
+   ARIA requirements (consumer responsibility):
+   - Element: <button role="switch" aria-checked="false|true">
+   - Label: pair with visible label via aria-labelledby or wrap in <label>
+   - Keyboard: Space toggles state (native <button> handles this)
+   - State: update aria-checked on toggle
+
    Usage:
      <button class="ds-toggle" role="switch" aria-checked="false"></button>
 
@@ -40,8 +46,8 @@
 .ds-toggle::after {
   content: "";
   position: absolute;
-  left: 2px;
-  top: 50%;
+  inset-inline-start: 2px;
+  inset-block-start: 50%;
   width: 1.25rem;
   height: 1.25rem;
   border-radius: var(--ds-radius-full);
@@ -85,6 +91,7 @@
 .ds-toggle: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);
 }
 
 /* ---------------------------------------------------------------------------
@@ -105,6 +112,7 @@
 .ds-toggle--sm {
   width: 2rem;
   height: 1.125rem;
+  min-height: 1.5rem; /* WCAG 2.5.8: minimum 24px target */
 }
 
 .ds-toggle--sm::after {

package/src/components/toolbar.css

@@ -0,0 +1,189 @@
+/* ==========================================================================
+   Component: Toolbar
+   Fixed bar with rows of actions: toolbar buttons, filter chips, segmented
+   controls, and scrollable groups. Common in data-heavy UIs below a header.
+
+   Usage:
+     <div class="ds-toolbar">
+       <div class="ds-toolbar__row">
+         <div class="ds-toolbar__group">...</div>
+         <div class="ds-toolbar__spacer"></div>
+         <div class="ds-toolbar__group">
+           <button class="ds-toolbar__btn ds-toolbar__btn--active">
+             <span>Filter</span>
+             <span class="ds-toolbar__badge">3</span>
+           </button>
+           <button class="ds-toolbar__btn">Sort</button>
+         </div>
+       </div>
+     </div>
+
+   Modifiers:
+     .ds-toolbar__row--scroll      — Horizontally scrollable row
+     .ds-toolbar__btn--active      — Active/toggled button
+     .ds-toolbar__group--scroll    — Scrollable group within a row
+
+   Segmented control:
+     <div class="ds-toolbar__segmented">
+       <button class="ds-toolbar__segmented-btn ds-toolbar__segmented-btn--active">Past</button>
+       <button class="ds-toolbar__segmented-btn">Future</button>
+     </div>
+   ========================================================================== */
+
+/* Row container */
+.ds-toolbar__row {
+  display: flex;
+  align-items: center;
+  height: var(--ds-toolbar-row-height, 2.5rem);
+  gap: var(--ds-space-3);
+  padding-inline: var(--ds-space-4);
+}
+
+.ds-toolbar__row--scroll {
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.ds-toolbar__row--scroll::-webkit-scrollbar { display: none; }
+
+/* Group (flex row of items) */
+.ds-toolbar__group {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.ds-toolbar__group--scroll {
+  flex-shrink: 1;
+  min-width: 0;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.ds-toolbar__group--scroll::-webkit-scrollbar { display: none; }
+
+/* Spacer */
+.ds-toolbar__spacer {
+  flex: 1 1 0;
+}
+
+/* Toolbar button */
+.ds-toolbar__btn {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ds-space-1-5);
+  padding: var(--ds-space-1) var(--ds-space-2-5);
+  font-size: var(--ds-text-xs);
+  font-weight: var(--ds-weight-medium);
+  font-family: inherit;
+  color: var(--ds-color-text-tertiary);
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--ds-radius-md);
+  cursor: pointer;
+  white-space: nowrap;
+  transition:
+    color var(--ds-duration-fast) var(--ds-ease-default),
+    background-color var(--ds-duration-fast) var(--ds-ease-default),
+    border-color var(--ds-duration-fast) var(--ds-ease-default);
+}
+
+.ds-toolbar__btn:hover {
+  color: var(--ds-color-text-secondary);
+  background: var(--ds-color-surface-hover);
+}
+
+.ds-toolbar__btn:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
+}
+
+.ds-toolbar__btn--active {
+  color: var(--ds-color-text);
+  background: var(--ds-color-surface);
+  border-color: var(--ds-color-border);
+}
+
+/* Badge (count indicator inside button) */
+.ds-toolbar__badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1rem;
+  height: 1rem;
+  padding: 0 0.25rem;
+  font-size: 0.625rem;
+  font-weight: 600;
+  line-height: 1;
+  color: var(--ds-color-on-inverted);
+  background: var(--ds-color-interactive);
+  border-radius: var(--ds-radius-full);
+}
+
+/* Eye toggle (visibility) */
+.ds-toolbar__eye {
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  opacity: 0.7;
+  transition: opacity var(--ds-duration-fast) var(--ds-ease-default);
+}
+
+.ds-toolbar__eye:hover {
+  opacity: 1;
+}
+
+/* Segmented control */
+.ds-toolbar__segmented {
+  flex-shrink: 0;
+  display: flex;
+  background: var(--ds-color-surface);
+  border-radius: var(--ds-radius-md);
+  padding: 2px;
+}
+
+.ds-toolbar__segmented-btn {
+  padding: var(--ds-space-1) var(--ds-space-3);
+  font-size: var(--ds-text-xs);
+  font-weight: var(--ds-weight-medium);
+  color: var(--ds-color-text-tertiary);
+  border: none;
+  border-radius: var(--ds-radius-sm);
+  background: transparent;
+  cursor: pointer;
+  transition:
+    color var(--ds-duration-fast) var(--ds-ease-default),
+    background-color var(--ds-duration-fast) var(--ds-ease-default);
+}
+
+.ds-toolbar__segmented-btn:hover {
+  color: var(--ds-color-text-secondary);
+}
+
+.ds-toolbar__segmented-btn--active {
+  background: var(--ds-color-bg-elevated);
+  color: var(--ds-color-text);
+}
+
+/* Responsive: mobile */
+@media (max-width: 1023px) /* below --ds-breakpoint-lg */ {
+  .ds-toolbar__row {
+    padding-inline: var(--ds-space-3);
+    gap: var(--ds-space-2);
+  }
+
+  .ds-toolbar__btn-label { display: none; }
+
+  .ds-toolbar__btn {
+    padding: var(--ds-space-2);
+    min-width: var(--ds-size-2);
+    min-height: var(--ds-size-2);
+    justify-content: center;
+  }
+
+  .ds-toolbar__badge {
+    font-size: 0.5rem;
+    min-width: 0.875rem;
+    height: 0.875rem;
+  }
+}