@digiko-npm/designsystem 0.4.0 → 0.7.1

package/src/components/drawer.css

@@ -5,13 +5,21 @@
    Default direction is right; use `--left` or `--bottom` modifiers
    to change the slide origin.
 
+   ARIA requirements (consumer responsibility):
+   - Container: role="dialog", aria-modal="true", aria-labelledby="[title-id]"
+   - Close button: aria-label="Close"
+   - Focus: trap focus inside drawer when open
+   - Keyboard: Escape closes drawer
+   - On open: move focus to first focusable element or close button
+   - On close: return focus to the element that triggered the drawer
+
    Sizes:
      --sm        18 rem
      (default)   24 rem
      --lg        36 rem
 
    Usage:
-     <div class="ds-drawer ds-drawer--right ds-drawer--open">
+     <div class="ds-drawer ds-drawer--right ds-drawer--open" role="dialog" aria-modal="true">
        <div class="ds-drawer__content">
          <div class="ds-drawer__header">
            <h3>Title</h3>
@@ -64,12 +72,12 @@
 
 .ds-drawer__content,
 .ds-drawer--right .ds-drawer__content {
-  top: 0;
-  right: 0;
-  bottom: 0;
+  inset-block-start: 0;
+  inset-inline-end: 0;
+  inset-block-end: 0;
   width: 24rem;
   max-width: 90vw;
-  border-left: 1px solid var(--ds-color-border);
+  border-inline-start: 1px solid var(--ds-color-border);
   transform: translateX(100%);
 }
 
@@ -83,14 +91,14 @@
  * ========================================================================== */
 
 .ds-drawer--left .ds-drawer__content {
-  left: 0;
-  top: 0;
-  bottom: 0;
-  right: auto;
+  inset-inline-start: 0;
+  inset-block-start: 0;
+  inset-block-end: 0;
+  inset-inline-end: auto;
   width: 24rem;
   max-width: 90vw;
-  border-left: 0;
-  border-right: 1px solid var(--ds-color-border);
+  border-inline-start: 0;
+  border-inline-end: 1px solid var(--ds-color-border);
   transform: translateX(-100%);
 }
 
@@ -103,14 +111,14 @@
  * ========================================================================== */
 
 .ds-drawer--bottom .ds-drawer__content {
-  bottom: 0;
-  left: 0;
-  right: 0;
-  top: auto;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
+  inset-block-start: auto;
   width: auto;
   max-height: 90dvh;
-  border-left: 0;
-  border-top: 1px solid var(--ds-color-border);
+  border-inline-start: 0;
+  border-block-start: 1px solid var(--ds-color-border);
   border-radius: var(--ds-radius-xl) var(--ds-radius-xl) 0 0;
   transform: translateY(100%);
 }
@@ -146,7 +154,7 @@
   justify-content: space-between;
   align-items: flex-start;
   padding: var(--ds-space-4) var(--ds-space-5);
-  border-bottom: 1px solid var(--ds-color-border);
+  border-block-end: 1px solid var(--ds-color-border);
 }
 
 .ds-drawer__header h3 {
@@ -188,6 +196,7 @@
 .ds-drawer__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);
 }
 
 /* ==========================================================================
@@ -206,7 +215,7 @@
 
 .ds-drawer__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;
   justify-content: flex-end;

package/src/components/drop-zone.css

@@ -1,6 +1,12 @@
 /* ==========================================================================
    Component: Drop Zone
    Dashed-border upload area with icon, label, hint, and progress states.
+
+   ARIA requirements (consumer responsibility):
+   - Container: role="button" if clickable, tabindex="0" for keyboard access
+   - Label: aria-label="Upload files" or visible label via aria-labelledby
+   - Drag state: announce via aria-live="polite" region
+   - Progress: use aria-busy="true" during upload, aria-valuenow for progress
    ==========================================================================
 
    Usage:
@@ -42,6 +48,7 @@
 .ds-drop-zone: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);
 }
 
 :root:not(.dark) .ds-drop-zone {
@@ -78,7 +85,7 @@
 }
 
 .ds-drop-zone:hover .ds-drop-zone__icon {
-  color: var(--ds-color-text-primary);
+  color: var(--ds-color-text);
 }
 
 /* ---------------------------------------------------------------------------
@@ -88,13 +95,13 @@
 .ds-drop-zone__label {
   font-size: var(--ds-text-sm);
   font-weight: var(--ds-weight-medium);
-  color: var(--ds-color-text-primary);
+  color: var(--ds-color-text);
 }
 
 .ds-drop-zone__hint {
   font-size: var(--ds-text-xs);
   color: var(--ds-color-text-tertiary);
-  margin-top: calc(-1 * var(--ds-space-1));
+  margin-block-start: calc(-1 * var(--ds-space-1));
 }
 
 /* ---------------------------------------------------------------------------

package/src/components/dropdown.css

@@ -1,6 +1,14 @@
 /* ==========================================================================
    Component: Dropdown
    Floating menu with surface bg, scale transition, keyboard-friendly items.
+
+   ARIA requirements (consumer responsibility):
+   - Trigger: aria-haspopup="true", aria-expanded="true|false"
+   - Menu: role="menu"
+   - Items: role="menuitem"
+   - Keyboard: ArrowUp/Down to navigate, Enter to select, Escape to close
+   - On open: move focus to first menu item
+   - On close: return focus to trigger
    ========================================================================== */
 
 .ds-dropdown {
@@ -17,8 +25,8 @@
 
 .ds-dropdown__menu {
   position: absolute;
-  top: calc(100% + var(--ds-space-1));
-  left: 0;
+  inset-block-start: calc(100% + var(--ds-space-1));
+  inset-inline-start: 0;
   z-index: var(--ds-z-dropdown);
   min-width: 12rem;
   padding-block: var(--ds-space-1-5);
@@ -48,14 +56,14 @@
 /* --- Alignment variants --- */
 
 .ds-dropdown__menu--right {
-  left: auto;
-  right: 0;
+  inset-inline-start: auto;
+  inset-inline-end: 0;
   transform-origin: top right;
 }
 
 .ds-dropdown__menu--up {
-  top: auto;
-  bottom: calc(100% + var(--ds-space-1));
+  inset-block-start: auto;
+  inset-block-end: calc(100% + var(--ds-space-1));
   transform-origin: bottom left;
 }
 
@@ -93,6 +101,7 @@
 .ds-dropdown__item: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);
 }
 
 .ds-dropdown__item--active {
@@ -122,7 +131,7 @@
 }
 
 .ds-dropdown__item-shortcut {
-  margin-left: auto;
+  margin-inline-start: auto;
   font-size: var(--ds-text-xs);
   color: var(--ds-color-text-tertiary);
 }
@@ -132,7 +141,7 @@
 .ds-dropdown__divider {
   margin-block: var(--ds-space-1);
   border: 0;
-  border-top: 1px solid var(--ds-color-border);
+  border-block-start: 1px solid var(--ds-color-border);
 }
 
 /* --- Section header --- */

package/src/components/empty-state.css

@@ -17,7 +17,7 @@
   width: 3rem;
   height: 3rem;
   color: var(--ds-color-text-tertiary);
-  margin-bottom: var(--ds-space-2);
+  margin-block-end: var(--ds-space-2);
 }
 
 .ds-empty-state__title {
@@ -42,7 +42,7 @@
   align-items: center;
   justify-content: center;
   gap: var(--ds-space-3);
-  margin-top: var(--ds-space-2);
+  margin-block-start: var(--ds-space-2);
 }
 
 /* --- Compact variant --- */
@@ -71,5 +71,5 @@
 /* --- Left-aligned variant --- */
 .ds-empty-state--left {
   align-items: flex-start;
-  text-align: left;
+  text-align: start;
 }

package/src/components/field.css

@@ -0,0 +1,77 @@
+/* ==========================================================================
+   Component: Field
+   Unified wrapper for form fields — label + input + hint + error.
+   ========================================================================== */
+
+/* ---------------------------------------------------------------------------
+   Container
+   --------------------------------------------------------------------------- */
+
+.ds-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ds-space-1-5);
+}
+
+/* ---------------------------------------------------------------------------
+   Label
+   --------------------------------------------------------------------------- */
+
+.ds-field__label {
+  font-family: var(--ds-font-sans);
+  font-size: var(--ds-text-sm);
+  font-weight: var(--ds-weight-medium);
+  color: var(--ds-color-text);
+  line-height: var(--ds-leading-normal);
+}
+
+/* Required asterisk */
+.ds-field--required .ds-field__label::after {
+  content: " *";
+  color: var(--ds-color-error);
+}
+
+/* ---------------------------------------------------------------------------
+   Hint (help text below input)
+   --------------------------------------------------------------------------- */
+
+.ds-field__hint {
+  font-size: var(--ds-text-xs);
+  color: var(--ds-color-text-tertiary);
+  line-height: var(--ds-leading-normal);
+}
+
+/* ---------------------------------------------------------------------------
+   Error message
+   --------------------------------------------------------------------------- */
+
+.ds-field__error {
+  font-size: var(--ds-text-xs);
+  color: var(--ds-color-error);
+  line-height: var(--ds-leading-normal);
+}
+
+/* ---------------------------------------------------------------------------
+   Modifier: Horizontal layout (label left, input right)
+   --------------------------------------------------------------------------- */
+
+.ds-field--horizontal {
+  flex-direction: row;
+  align-items: flex-start;
+  gap: var(--ds-space-4);
+}
+
+.ds-field--horizontal .ds-field__label {
+  flex-shrink: 0;
+  min-width: 8rem;
+  padding-block-start: var(--ds-space-2);
+}
+
+/* ---------------------------------------------------------------------------
+   Modifier: Disabled
+   --------------------------------------------------------------------------- */
+
+.ds-field--disabled {
+  opacity: var(--ds-opacity-disabled);
+  pointer-events: none;
+}

package/src/components/icon-btn.css

@@ -0,0 +1,102 @@
+/* ==========================================================================
+   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  — 28px
+     (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: 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

@@ -1,7 +1,9 @@
 /* === Core === */
 @import './button.css';
 @import './card.css';
+@import './stat-card.css';
 @import './input.css';
+@import './field.css';
 @import './badge.css';
 @import './nav.css';
 @import './modal.css';
@@ -29,6 +31,9 @@
 @import './progress.css';
 @import './drop-zone.css';
 @import './custom-select.css';
+@import './collapsible.css';
+@import './description-list.css';
+@import './result.css';
 @import './sortable.css';
 
 /* === Tier 3 — Advanced === */
@@ -37,3 +42,9 @@
 @import './timeline.css';
 @import './kbd.css';
 @import './command.css';
+@import './search.css';
+@import './toolbar.css';
+@import './chip.css';
+@import './icon-btn.css';
+@import './bottom-nav.css';
+@import './spinner.css';

package/src/components/input.css

@@ -1,6 +1,13 @@
 /* ==========================================================================
    Component: Form Inputs
    Surface bg, clean borders, focus ring.
+
+   ARIA requirements (consumer responsibility):
+   - Input: associate with <label for="id"> or aria-label
+   - Error state: add aria-invalid="true" + aria-describedby pointing to error msg
+   - Required: add aria-required="true" or HTML required attribute
+   - Input group: icon is decorative (pointer-events: none), no ARIA needed
+   - Checkbox/radio: use native <input type="checkbox|radio"> inside <label>
    ========================================================================== */
 
 .ds-label {
@@ -8,7 +15,7 @@
   font-size: var(--ds-text-sm);
   font-weight: var(--ds-weight-medium);
   color: var(--ds-color-text-secondary);
-  margin-bottom: var(--ds-space-1-5);
+  margin-block-end: var(--ds-space-1-5);
 }
 
 .ds-input,
@@ -55,6 +62,7 @@
 .ds-select:focus-visible {
   border-color: var(--ds-ring-color);
   box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
+  scroll-margin-block: var(--ds-space-16, 4rem);
 }
 
 .ds-input::placeholder,
@@ -114,7 +122,7 @@
 }
 
 .ds-select--lg {
-  padding-right: var(--ds-space-8);
+  padding-inline-end: var(--ds-space-8);
 }
 
 /* Textarea */
@@ -131,7 +139,7 @@
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23a1a1aa' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right var(--ds-space-3) center;
-  padding-right: var(--ds-space-8);
+  padding-inline-end: var(--ds-space-8);
 }
 
 /* --- Layout Modifiers ---
@@ -170,35 +178,35 @@
 /* --- Input Group: icon-right ---
    Move icon to the right side, flip input padding. */
 .ds-input-group--icon-right .ds-input-group__icon {
-  left: auto;
-  right: var(--ds-space-3);
+  inset-inline-start: auto;
+  inset-inline-end: var(--ds-space-3);
 }
 .ds-input-group--icon-right .ds-input {
-  padding-left: var(--ds-space-4);
-  padding-right: calc(var(--ds-space-3) + 1rem + var(--ds-space-2));
+  padding-inline-start: var(--ds-space-4);
+  padding-inline-end: calc(var(--ds-space-3) + 1rem + var(--ds-space-2));
 }
 
 /* Help text */
 .ds-help {
   font-size: var(--ds-text-xs);
   color: var(--ds-color-text-tertiary);
-  margin-top: var(--ds-space-1-5);
+  margin-block-start: var(--ds-space-1-5);
 }
 .ds-help--error { color: var(--ds-color-error); }
 
 /* Form Group (legacy — prefer ds-form) */
-.ds-form-group { margin-bottom: var(--ds-space-4); }
+.ds-form-group { margin-block-end: var(--ds-space-4); }
 
 /* --- Form Stack ---
    Vertical form layout: comfortable spacing between fields (24px),
    extra breathing room before the action area (32px).
    Use ds-form__actions on the button/submit wrapper. */
 .ds-form > * + * {
-  margin-top: var(--ds-space-6);
+  margin-block-start: var(--ds-space-6);
 }
 
 .ds-form__actions {
-  margin-top: var(--ds-space-8);
+  margin-block-start: var(--ds-space-8);
 }
 
 /* --- Input Group ---
@@ -210,8 +218,8 @@
 
 .ds-input-group__icon {
   position: absolute;
-  left: var(--ds-space-3);
-  top: 50%;
+  inset-inline-start: var(--ds-space-3);
+  inset-block-start: 50%;
   transform: translateY(-50%);
   display: flex;
   align-items: center;
@@ -221,7 +229,7 @@
 }
 
 .ds-input-group .ds-input {
-  padding-left: calc(var(--ds-space-3) + 1rem + var(--ds-space-2));
+  padding-inline-start: calc(var(--ds-space-3) + 1rem + var(--ds-space-2));
 }
 
 /* Checkbox / Radio */
@@ -237,6 +245,8 @@
 .ds-checkbox input,
 .ds-radio input {
   accent-color: var(--ds-color-interactive);
-  width: 0.875rem;
-  height: 0.875rem;
+  width: 1rem;
+  height: 1rem;
+  min-width: 1.5rem; /* WCAG 2.5.8: minimum 24px target */
+  min-height: 1.5rem;
 }

package/src/components/kbd.css

@@ -27,7 +27,7 @@
   font-size: var(--ds-text-xs);
   background-color: var(--ds-color-bg-elevated);
   border: 1px solid var(--ds-color-border);
-  border-bottom-width: 2px;
+  border-block-end-width: 2px;
   border-radius: var(--ds-radius-sm);
   color: var(--ds-color-text-secondary);
   line-height: 1;

package/src/components/modal.css

@@ -1,6 +1,14 @@
 /* ==========================================================================
    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 {
@@ -52,7 +60,7 @@
   align-items: flex-start;
   justify-content: space-between;
   padding: var(--ds-space-4) var(--ds-space-5);
-  border-bottom: 1px solid var(--ds-color-border);
+  border-block-end: 1px solid var(--ds-color-border);
 }
 
 .ds-modal__header h3 {
@@ -65,7 +73,7 @@
 .ds-modal__header p {
   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-modal__close {
@@ -85,6 +93,7 @@
 .ds-modal__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);
 }
 
 .ds-modal__body {
@@ -99,9 +108,27 @@
   justify-content: flex-end;
   gap: var(--ds-space-2);
   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);
 }
 
 /* Size variants */
 .ds-modal--md .ds-modal__content { max-width: var(--ds-container-md); }
 .ds-modal--lg .ds-modal__content { max-width: var(--ds-container-lg); }
+
+/* Fullscreen on mobile */
+@media (max-width: 1023px) /* below --ds-breakpoint-lg */ {
+  .ds-modal--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;
+  }
+
+  .ds-modal--fullscreen-mobile {
+    padding: 0;
+  }
+}