@digiko-npm/designsystem 0.5.0 → 0.7.2

package/src/components/collapsible.css

@@ -0,0 +1,116 @@
+/* ==========================================================================
+   Component: Collapsible
+   Single collapsible section — a simplified, standalone accordion item.
+
+   ARIA requirements (consumer responsibility):
+   - Trigger: <button> with aria-expanded="true|false"
+   - Trigger: aria-controls="[content-panel-id]"
+   - Content: id matching aria-controls
+   ========================================================================== */
+
+/* ---------------------------------------------------------------------------
+   Container
+   --------------------------------------------------------------------------- */
+
+.ds-collapsible {
+  border: 1px solid var(--ds-color-border);
+  border-radius: var(--ds-radius-xl);
+  overflow: hidden;
+}
+
+/* ---------------------------------------------------------------------------
+   Trigger (button)
+   --------------------------------------------------------------------------- */
+
+.ds-collapsible__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);
+}
+
+.ds-collapsible__trigger:hover {
+  background-color: var(--ds-color-overlay);
+}
+
+.ds-collapsible__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);
+}
+
+/* ---------------------------------------------------------------------------
+   Chevron icon (CSS border-arrow)
+   --------------------------------------------------------------------------- */
+
+.ds-collapsible__icon {
+  flex-shrink: 0;
+  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);
+  margin-inline-start: var(--ds-space-3);
+  transition: transform var(--ds-duration-fast) var(--ds-ease-default);
+}
+
+.ds-collapsible--open .ds-collapsible__icon {
+  transform: rotate(225deg);
+}
+
+/* ---------------------------------------------------------------------------
+   Collapsible content
+   --------------------------------------------------------------------------- */
+
+.ds-collapsible__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);
+}
+
+.ds-collapsible--open .ds-collapsible__content {
+  max-height: 80rem;
+}
+
+/* ---------------------------------------------------------------------------
+   Inner body
+   --------------------------------------------------------------------------- */
+
+.ds-collapsible__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 (no border, no radius)
+   --------------------------------------------------------------------------- */
+
+.ds-collapsible--flush {
+  border: 0;
+  border-radius: 0;
+}
+
+/* ---------------------------------------------------------------------------
+   Variant: Ghost (no border, transparent bg)
+   --------------------------------------------------------------------------- */
+
+.ds-collapsible--ghost {
+  border: 0;
+  background: transparent;
+}

package/src/components/command.css

@@ -5,17 +5,26 @@
    full-screen overlay with a centered search dialog, grouped results,
    keyboard-navigable items, and a footer with shortcut hints.
 
+   ARIA requirements (consumer responsibility):
+   - Input: role="combobox", aria-expanded="true", aria-controls="[list-id]"
+   - Input: aria-activedescendant="[active-item-id]" for keyboard nav
+   - List: role="listbox", id matching aria-controls
+   - Items: role="option", id for aria-activedescendant
+   - Groups: role="group", aria-labelledby="[heading-id]"
+   - Overlay: role="dialog", aria-modal="true", aria-label="Command palette"
+   - Keyboard: ArrowUp/Down to navigate, Enter to select, Escape to close
+
    Usage:
-     <div class="ds-command ds-command--open">
+     <div class="ds-command ds-command--open" role="dialog" aria-modal="true" aria-label="Command palette">
        <div class="ds-command__content">
          <div class="ds-command__input-wrapper">
            <span class="ds-command__input-icon">...</span>
-           <input class="ds-command__input" placeholder="Search..." />
+           <input class="ds-command__input" role="combobox" placeholder="Search..." />
          </div>
-         <div class="ds-command__list">
+         <div class="ds-command__list" role="listbox">
            <div class="ds-command__group">
              <div class="ds-command__group-heading">Results</div>
-             <div class="ds-command__item ds-command__item--active">
+             <div class="ds-command__item ds-command__item--active" role="option">
                <span class="ds-command__item-icon">...</span>
                <span class="ds-command__item-label">Item</span>
                <span class="ds-command__item-shortcut">Ctrl+N</span>
@@ -39,7 +48,7 @@
   display: flex;
   align-items: flex-start;
   justify-content: center;
-  padding-top: 20vh;
+  padding-block-start: 20vh;
   background-color: var(--ds-color-overlay);
   opacity: 0;
   visibility: hidden;
@@ -78,7 +87,7 @@
   align-items: center;
   gap: var(--ds-space-3);
   padding: var(--ds-space-3) var(--ds-space-4);
-  border-bottom: 1px solid var(--ds-color-border);
+  border-block-end: 1px solid var(--ds-color-border);
 }
 
 /* Search icon */
@@ -148,6 +157,7 @@
 .ds-command__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);
 }
 
 /* Item icon */
@@ -182,7 +192,7 @@
   align-items: center;
   gap: var(--ds-space-4);
   padding: var(--ds-space-2) var(--ds-space-3);
-  border-top: 1px solid var(--ds-color-border);
+  border-block-start: 1px solid var(--ds-color-border);
   font-size: var(--ds-text-xs);
   color: var(--ds-color-text-tertiary);
 }

package/src/components/custom-select.css

@@ -3,6 +3,14 @@
    Replaces native <select> with styled dropdown panel.
    Desktop: absolute positioned panel below trigger.
    Mobile: fullscreen overlay with header + search.
+
+   ARIA requirements (consumer responsibility):
+   - Trigger: role="combobox", aria-expanded="true|false", aria-haspopup="listbox"
+   - Trigger: aria-controls="[panel-list-id]", aria-labelledby="[label-id]"
+   - Panel list: role="listbox", id matching aria-controls
+   - Option: role="option", aria-selected="true|false"
+   - Multi-select: add aria-multiselectable="true" on listbox
+   - Keyboard: ArrowUp/Down to navigate, Enter/Space to select, Escape to close
    ========================================================================== */
 
 /* --- Wrapper --- */
@@ -29,7 +37,7 @@
   border: 1px solid var(--ds-color-border);
   border-radius: var(--ds-radius-lg);
   cursor: pointer;
-  text-align: left;
+  text-align: start;
   transition: all var(--ds-duration-fast) var(--ds-ease-default);
 }
 
@@ -41,6 +49,7 @@
   border-color: var(--ds-color-border-active);
   outline: none;
   box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
+  scroll-margin-block: var(--ds-space-16, 4rem);
 }
 
 .ds-custom-select__trigger--open {
@@ -70,7 +79,7 @@
   flex-shrink: 0;
   width: 1rem;
   height: 1rem;
-  margin-left: var(--ds-space-2);
+  margin-inline-start: var(--ds-space-2);
   color: var(--ds-color-text-tertiary);
   transition: transform var(--ds-duration-fast) var(--ds-ease-default);
 }
@@ -145,13 +154,13 @@
 .ds-custom-select__search {
   position: relative;
   padding: var(--ds-space-2) var(--ds-space-3);
-  border-bottom: 1px solid var(--ds-color-border);
+  border-block-end: 1px solid var(--ds-color-border);
 }
 
 .ds-custom-select__search-icon {
   position: absolute;
-  left: calc(var(--ds-space-3) + var(--ds-space-2-5));
-  top: 50%;
+  inset-inline-start: calc(var(--ds-space-3) + var(--ds-space-2-5));
+  inset-block-start: 50%;
   transform: translateY(-50%);
   width: 1rem;
   height: 1rem;
@@ -255,7 +264,7 @@
   .ds-custom-select__panel {
     position: fixed;
     inset: 0;
-    top: auto;
+    inset-block-start: auto;
     z-index: var(--ds-z-modal);
     max-height: 85dvh;
     border-radius: var(--ds-radius-xl) var(--ds-radius-xl) 0 0;
@@ -279,7 +288,7 @@
     align-items: center;
     justify-content: space-between;
     padding: var(--ds-space-4) var(--ds-space-4);
-    border-bottom: 1px solid var(--ds-color-border);
+    border-block-end: 1px solid var(--ds-color-border);
   }
 
   .ds-custom-select__header-title {
@@ -319,6 +328,113 @@
   }
 }
 
+/* ==========================================================================
+   Multi-select mode
+   ========================================================================== */
+
+/* --- Multi trigger: tags inside trigger --- */
+
+.ds-custom-select--multi .ds-custom-select__trigger {
+  height: auto;
+  min-height: var(--ds-size-3);
+  flex-wrap: wrap;
+  padding: var(--ds-space-1) var(--ds-space-4) var(--ds-space-1) var(--ds-space-2);
+  gap: var(--ds-space-1);
+}
+
+/* --- Tags container --- */
+
+.ds-custom-select__tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--ds-space-1);
+  flex: 1;
+  min-width: 0;
+}
+
+/* --- Single tag (based on ds-tag styling) --- */
+
+.ds-custom-select__tag {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ds-space-1);
+  padding: var(--ds-space-0-5) var(--ds-space-1) var(--ds-space-0-5) var(--ds-space-2);
+  font-size: var(--ds-text-xs);
+  font-weight: var(--ds-weight-medium);
+  font-family: var(--ds-font-sans);
+  line-height: var(--ds-leading-none);
+  border-radius: var(--ds-radius-full);
+  background-color: var(--ds-color-bg-elevated);
+  border: 1px solid var(--ds-color-border);
+  color: var(--ds-color-text-secondary);
+  white-space: nowrap;
+}
+
+.ds-custom-select__tag-remove {
+  display: inline-flex;
+  align-items: center;
+  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);
+  background: transparent;
+  color: currentColor;
+  font-size: inherit;
+  line-height: var(--ds-leading-none);
+  opacity: 0.6;
+  cursor: pointer;
+  transition: opacity var(--ds-duration-fast) var(--ds-ease-out);
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+.ds-custom-select__tag-remove:hover {
+  opacity: 1;
+}
+
+/* --- Multi option: checkbox style indicator --- */
+
+.ds-custom-select--multi .ds-custom-select__option-check {
+  width: 1rem;
+  height: 1rem;
+  border: 1px solid var(--ds-color-border);
+  border-radius: var(--ds-radius-sm);
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition:
+    background-color var(--ds-duration-fast) var(--ds-ease-default),
+    border-color var(--ds-duration-fast) var(--ds-ease-default);
+}
+
+.ds-custom-select--multi .ds-custom-select__option--selected .ds-custom-select__option-check {
+  background-color: var(--ds-color-interactive);
+  border-color: var(--ds-color-interactive);
+  color: var(--ds-color-on-inverted);
+}
+
+/* --- Multi size variants --- */
+
+.ds-custom-select--xs.ds-custom-select--multi .ds-custom-select__trigger {
+  min-height: var(--ds-size-1);
+  padding: var(--ds-space-0-5) var(--ds-space-1-5) var(--ds-space-0-5) var(--ds-space-1);
+}
+
+.ds-custom-select--sm.ds-custom-select--multi .ds-custom-select__trigger {
+  min-height: var(--ds-size-2);
+  padding: var(--ds-space-0-5) var(--ds-space-2) var(--ds-space-0-5) var(--ds-space-1-5);
+}
+
+.ds-custom-select--lg.ds-custom-select--multi .ds-custom-select__trigger {
+  min-height: var(--ds-size-4);
+  padding: var(--ds-space-1) var(--ds-space-4) var(--ds-space-1) var(--ds-space-2);
+}
+
 @media (prefers-reduced-motion: reduce) {
   .ds-custom-select__panel {
     animation: none;

package/src/components/datepicker.css

@@ -66,8 +66,8 @@
 .ds-datepicker__panel {
   position: absolute;
   z-index: var(--ds-z-dropdown);
-  top: calc(100% + var(--ds-offset-sm));
-  left: 0;
+  inset-block-start: calc(100% + var(--ds-offset-sm));
+  inset-inline-start: 0;
   background-color: var(--ds-color-surface);
   border: 1px solid var(--ds-color-border);
   border-radius: var(--ds-radius-xl);
@@ -95,7 +95,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: var(--ds-space-2);
+  margin-block-end: var(--ds-space-2);
 }
 
 .ds-datepicker__title {
@@ -133,7 +133,7 @@
 .ds-datepicker__weekdays {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
-  margin-bottom: var(--ds-space-1);
+  margin-block-end: var(--ds-space-1);
 }
 
 .ds-datepicker__weekday {
@@ -206,9 +206,9 @@
 .ds-datepicker__footer {
   display: flex;
   justify-content: center;
-  margin-top: var(--ds-space-2);
-  padding-top: var(--ds-space-2);
-  border-top: 1px solid var(--ds-color-border);
+  margin-block-start: var(--ds-space-2);
+  padding-block-start: var(--ds-space-2);
+  border-block-start: 1px solid var(--ds-color-border);
 }
 
 .ds-datepicker__today {
@@ -290,6 +290,6 @@
 }
 
 .ds-datepicker--compact .ds-datepicker__footer {
-  margin-top: var(--ds-space-1);
-  padding-top: var(--ds-space-1);
+  margin-block-start: var(--ds-space-1);
+  padding-block-start: var(--ds-space-1);
 }

package/src/components/description-list.css

@@ -0,0 +1,98 @@
+/* ==========================================================================
+   Component: Description List
+   Key-value pairs display with horizontal and vertical layouts.
+   ========================================================================== */
+
+/* ---------------------------------------------------------------------------
+   Container
+   --------------------------------------------------------------------------- */
+
+.ds-description-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+/* ---------------------------------------------------------------------------
+   Item
+   --------------------------------------------------------------------------- */
+
+.ds-description-list__item {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ds-space-1);
+  padding: var(--ds-space-3) 0;
+}
+
+.ds-description-list__item:first-child {
+  padding-block-start: 0;
+}
+
+.ds-description-list__item:last-child {
+  padding-block-end: 0;
+}
+
+/* ---------------------------------------------------------------------------
+   Term (key)
+   --------------------------------------------------------------------------- */
+
+.ds-description-list__term {
+  font-family: var(--ds-font-sans);
+  font-size: var(--ds-text-sm);
+  font-weight: var(--ds-weight-medium);
+  color: var(--ds-color-text-secondary);
+  line-height: var(--ds-leading-normal);
+}
+
+/* ---------------------------------------------------------------------------
+   Detail (value)
+   --------------------------------------------------------------------------- */
+
+.ds-description-list__detail {
+  font-family: var(--ds-font-sans);
+  font-size: var(--ds-text-sm);
+  color: var(--ds-color-text);
+  line-height: var(--ds-leading-normal);
+}
+
+/* ---------------------------------------------------------------------------
+   Variant: Horizontal (term and detail on same row)
+   --------------------------------------------------------------------------- */
+
+.ds-description-list--horizontal .ds-description-list__item {
+  flex-direction: row;
+  align-items: flex-start;
+  gap: var(--ds-space-4);
+}
+
+.ds-description-list--horizontal .ds-description-list__term {
+  flex-shrink: 0;
+  min-width: 10rem;
+}
+
+.ds-description-list--horizontal .ds-description-list__detail {
+  flex: 1;
+  min-width: 0;
+}
+
+/* ---------------------------------------------------------------------------
+   Variant: Bordered (separator between items)
+   --------------------------------------------------------------------------- */
+
+.ds-description-list--bordered .ds-description-list__item {
+  border-block-end: 1px solid var(--ds-color-border);
+}
+
+.ds-description-list--bordered .ds-description-list__item:last-child {
+  border-block-end: 0;
+}
+
+/* ---------------------------------------------------------------------------
+   Variant: Striped (alternating background)
+   --------------------------------------------------------------------------- */
+
+.ds-description-list--striped .ds-description-list__item:nth-child(odd) {
+  background-color: var(--ds-color-bg-subtle);
+  padding-inline: var(--ds-space-3);
+  border-radius: var(--ds-radius-md);
+}

package/src/components/divider.css

@@ -14,7 +14,7 @@
 
 .ds-divider--vertical {
   border-top: none;
-  border-left: 1px solid var(--ds-color-border);
+  border-inline-start: 1px solid var(--ds-color-border);
   display: inline-block;
   width: auto;
   height: auto;

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));
 }
 
 /* ---------------------------------------------------------------------------