@digiko-npm/designsystem 0.5.0 → 0.7.2

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

@@ -3,12 +3,17 @@
    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">
+     <button class="ds-icon-btn" aria-label="Delete">
        <svg>...</svg>
      </button>
-     <button class="ds-icon-btn ds-icon-btn--sm">...</button>
-     <button class="ds-icon-btn ds-icon-btn--danger">...</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))
@@ -47,6 +52,7 @@
 .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,
@@ -65,9 +71,9 @@
 }
 
 .ds-icon-btn--sm {
-  width: 1.75rem;
-  height: 1.75rem;
-  padding: var(--ds-space-1);
+  width: var(--ds-size-2);
+  height: var(--ds-size-2);
+  padding: var(--ds-space-1-5);
   border-radius: var(--ds-radius-md);
 }
 

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 === */

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,7 +108,7 @@
   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 */
@@ -107,7 +116,7 @@
 .ds-modal--lg .ds-modal__content { max-width: var(--ds-container-lg); }
 
 /* Fullscreen on mobile */
-@media (max-width: 1023px) {
+@media (max-width: 1023px) /* below --ds-breakpoint-lg */ {
   .ds-modal--fullscreen-mobile .ds-modal__content {
     max-width: none;
     max-height: none;

package/src/components/nav.css

@@ -1,20 +1,27 @@
 /* ==========================================================================
    Component: Navigation
    Fixed glass header, backdrop-blur, h-16. Clean links.
+
+   ARIA requirements (consumer responsibility):
+   - Nav: <nav aria-label="Main navigation"> (or aria-label="Sidebar")
+   - Active link: aria-current="page" on the current page link
+   - Mobile menu: toggle aria-expanded on hamburger button
+   - Mobile menu button: aria-label="Open menu" / "Close menu"
+   - Skip nav: add ds-skip-link before nav to skip to main content
    ========================================================================== */
 
 .ds-nav {
   position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
   z-index: var(--ds-z-sticky);
   display: flex;
   align-items: center;
   justify-content: space-between;
   height: 4rem;
   background-color: var(--ds-color-nav-bg);
-  border-bottom: 1px solid var(--ds-color-nav-border);
+  border-block-end: 1px solid var(--ds-color-nav-border);
   backdrop-filter: blur(var(--ds-blur-lg)) saturate(1.5);
   -webkit-backdrop-filter: blur(var(--ds-blur-lg)) saturate(1.5);
 }
@@ -62,6 +69,7 @@
 .ds-nav__link: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-nav__link--active {
@@ -96,13 +104,14 @@
 .ds-nav__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);
 }
 
 /* --- Mobile nav overlay --- */
 .ds-nav__mobile {
   overflow: hidden;
   max-height: 0;
-  border-bottom: 0 solid var(--ds-color-nav-border);
+  border-block-end: 0 solid var(--ds-color-nav-border);
   background-color: var(--ds-color-nav-bg);
   backdrop-filter: blur(var(--ds-blur-lg));
   transition: all var(--ds-duration-slow) var(--ds-ease-out-expo);
@@ -110,7 +119,7 @@
 
 .ds-nav__mobile--open {
   max-height: 16rem;
-  border-bottom-width: 1px;
+  border-block-end-width: 1px;
 }
 
 .ds-nav__mobile-links {
@@ -133,12 +142,12 @@
   width: 16rem;
   padding: var(--ds-space-5);
   background-color: var(--ds-color-surface);
-  border-right: 1px solid var(--ds-color-border);
+  border-inline-end: 1px solid var(--ds-color-border);
   height: 100%;
 }
 
 .ds-sidebar__section {
-  margin-bottom: var(--ds-space-6);
+  margin-block-end: var(--ds-space-6);
 }
 
 .ds-sidebar__title {
@@ -147,7 +156,7 @@
   text-transform: uppercase;
   letter-spacing: var(--ds-tracking-wide);
   color: var(--ds-color-text-tertiary);
-  margin-bottom: var(--ds-space-3);
+  margin-block-end: var(--ds-space-3);
 }
 
 .ds-sidebar__link {
@@ -162,7 +171,7 @@
   transition: all var(--ds-duration-normal) var(--ds-ease-default);
 }
 .ds-sidebar__link + .ds-sidebar__link {
-  margin-top: var(--ds-space-1);
+  margin-block-start: var(--ds-space-1);
 }
 
 @media (hover: hover) {
@@ -175,9 +184,11 @@
 .ds-sidebar__link: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-sidebar__link--active {
+.ds-sidebar__link--active,
+.ds-sidebar__link--active:hover {
   color: var(--ds-color-text);
   background-color: var(--ds-color-bg-elevated);
 }

package/src/components/pagination.css

@@ -3,6 +3,13 @@
    ==========================================================================
    A row of page-number controls for navigating multi-page content.
 
+   ARIA requirements (consumer responsibility):
+   - Container: <nav aria-label="Pagination">
+   - Active page: aria-current="page"
+   - Prev/Next: aria-label="Previous page" / "Next page"
+   - Disabled: aria-disabled="true" on disabled prev/next buttons
+   - Page items: aria-label="Page [N]" (optional, number is visible)
+
    Usage:
      <nav class="ds-pagination" aria-label="Pagination">
        <button class="ds-pagination__prev" aria-label="Previous page">&lsaquo;</button>
@@ -59,6 +66,7 @@
 .ds-pagination__item: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);
 }
 
 /* ---------------------------------------------------------------------------
@@ -118,6 +126,7 @@
 .ds-pagination__next: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-pagination__prev:disabled,

package/src/components/popover.css

@@ -54,8 +54,8 @@
 /* Placement: bottom (default) */
 .ds-popover__content,
 .ds-popover--bottom .ds-popover__content {
-  top: calc(100% + var(--ds-offset-md));
-  left: 50%;
+  inset-block-start: calc(100% + var(--ds-offset-md));
+  inset-inline-start: 50%;
   transform: translateX(-50%) scale(0.96);
 }
 
@@ -66,9 +66,9 @@
 
 /* Placement: top */
 .ds-popover--top .ds-popover__content {
-  bottom: calc(100% + var(--ds-offset-md));
-  top: auto;
-  left: 50%;
+  inset-block-end: calc(100% + var(--ds-offset-md));
+  inset-block-start: auto;
+  inset-inline-start: 50%;
   transform: translateX(-50%) scale(0.96);
 }
 
@@ -78,9 +78,9 @@
 
 /* Placement: left */
 .ds-popover--left .ds-popover__content {
-  right: calc(100% + var(--ds-offset-md));
-  top: 50%;
-  left: auto;
+  inset-inline-end: calc(100% + var(--ds-offset-md));
+  inset-block-start: 50%;
+  inset-inline-start: auto;
   transform: translateY(-50%) scale(0.96);
 }
 
@@ -90,8 +90,8 @@
 
 /* Placement: right */
 .ds-popover--right .ds-popover__content {
-  left: calc(100% + var(--ds-offset-md));
-  top: 50%;
+  inset-inline-start: calc(100% + var(--ds-offset-md));
+  inset-block-start: 50%;
   transform: translateY(-50%) scale(0.96);
 }
 

package/src/components/progress.css

@@ -43,7 +43,7 @@
   justify-content: space-between;
   font-size: var(--ds-text-xs);
   color: var(--ds-color-text-tertiary);
-  margin-bottom: var(--ds-space-1-5);
+  margin-block-end: var(--ds-space-1-5);
 }
 
 /* Track */
@@ -208,7 +208,7 @@
   height: 2rem;
   min-width: auto;
   margin-inline: 0;
-  margin-left: calc(1rem - 1px); /* center under the 2 rem indicator */
+  margin-inline-start: calc(1rem - 1px); /* center under the 2 rem indicator */
   margin-block: var(--ds-space-1);
   background-color: var(--ds-color-border-subtle);
 }