@digiko-npm/designsystem 0.3.33 → 0.4.0

package/src/components/card.css

@@ -20,6 +20,13 @@
   box-shadow: var(--ds-shadow-lg);
   transform: translateY(-4px);
 }
+.ds-card--interactive:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
+}
+.ds-card--interactive:hover:focus-visible {
+  box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color), var(--ds-shadow-lg);
+}
 
 /* Elevated card — visible shadow */
 .ds-card--elevated {
@@ -70,6 +77,9 @@
   object-fit: cover;
   background-color: var(--ds-color-bg-elevated);
 }
+.ds-card__media--square { aspect-ratio: 1; }
+.ds-card__media--video { aspect-ratio: 16/9; }
+.ds-card__media--auto { aspect-ratio: auto; }
 
 /* Compact */
 .ds-card--compact .ds-card__header,

package/src/components/command.css

@@ -145,6 +145,10 @@
   background-color: var(--ds-color-bg-elevated);
   color: var(--ds-color-text);
 }
+.ds-command__item:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
+}
 
 /* Item icon */
 .ds-command__item-icon {

package/src/components/custom-select.css

@@ -37,6 +37,12 @@
   border-color: var(--ds-color-border-hover);
 }
 
+.ds-custom-select__trigger:focus-visible {
+  border-color: var(--ds-color-border-active);
+  outline: none;
+  box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
+}
+
 .ds-custom-select__trigger--open {
   border-color: var(--ds-color-border-active);
   box-shadow: inset 0 0 0 1px var(--ds-color-border-active);
@@ -200,6 +206,10 @@
   background-color: var(--ds-color-bg-elevated);
   color: var(--ds-color-text);
 }
+.ds-custom-select__option:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
+}
 
 .ds-custom-select__option--selected {
   background-color: var(--ds-color-bg-elevated);
@@ -308,3 +318,12 @@
     border-radius: 0;
   }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .ds-custom-select__panel {
+    animation: none;
+    opacity: 1;
+    transform: scale(1);
+  }
+  .ds-custom-select__backdrop { animation: none; opacity: 1; }
+}

package/src/components/datepicker.css

@@ -57,11 +57,16 @@
   line-height: 1;
 }
 
+.ds-datepicker__trigger:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
+}
+
 /* Calendar panel */
 .ds-datepicker__panel {
   position: absolute;
   z-index: var(--ds-z-dropdown);
-  top: calc(100% + 4px);
+  top: calc(100% + var(--ds-offset-sm));
   left: 0;
   background-color: var(--ds-color-surface);
   border: 1px solid var(--ds-color-border);
@@ -73,8 +78,8 @@
   visibility: hidden;
   transform: scale(0.96);
   transition:
-    opacity var(--ds-duration-fast) var(--ds-ease),
-    visibility var(--ds-duration-fast) var(--ds-ease),
+    opacity var(--ds-duration-fast) var(--ds-ease-default),
+    visibility var(--ds-duration-fast) var(--ds-ease-default),
     transform var(--ds-duration-fast) var(--ds-ease-out-expo);
 }
 
@@ -95,7 +100,7 @@
 
 .ds-datepicker__title {
   font-size: var(--ds-text-sm);
-  font-weight: 600;
+  font-weight: var(--ds-weight-semibold);
   color: var(--ds-color-text);
   user-select: none;
 }
@@ -112,13 +117,17 @@
   color: var(--ds-color-text-secondary);
   cursor: pointer;
   font-size: var(--ds-text-base);
-  transition: all var(--ds-duration-fast) var(--ds-ease);
+  transition: all var(--ds-duration-fast) var(--ds-ease-default);
 }
 
 .ds-datepicker__nav:hover {
   background-color: var(--ds-color-bg-elevated);
   color: var(--ds-color-text);
 }
+.ds-datepicker__nav:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
+}
 
 /* Weekday header row */
 .ds-datepicker__weekdays {
@@ -133,7 +142,7 @@
   text-align: center;
   padding: var(--ds-space-1) 0;
   user-select: none;
-  font-weight: 500;
+  font-weight: var(--ds-weight-medium);
 }
 
 /* Day grid */
@@ -155,7 +164,7 @@
   font-size: var(--ds-text-sm);
   color: var(--ds-color-text);
   cursor: pointer;
-  transition: all var(--ds-duration-fast) var(--ds-ease);
+  transition: all var(--ds-duration-fast) var(--ds-ease-default);
   padding: 0;
   line-height: 1;
   user-select: none;
@@ -164,18 +173,22 @@
 .ds-datepicker__day:hover {
   background-color: var(--ds-color-bg-elevated);
 }
+.ds-datepicker__day:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
+}
 
 /* Today — subtle ring */
 .ds-datepicker__day--today {
   box-shadow: inset 0 0 0 1px var(--ds-color-border-active);
-  font-weight: 600;
+  font-weight: var(--ds-weight-semibold);
 }
 
 /* Selected — inverted fill */
 .ds-datepicker__day--selected {
   background-color: var(--ds-color-text);
   color: var(--ds-color-bg);
-  font-weight: 600;
+  font-weight: var(--ds-weight-semibold);
 }
 
 .ds-datepicker__day--selected:hover {
@@ -200,14 +213,14 @@
 
 .ds-datepicker__today {
   font-size: var(--ds-text-xs);
-  font-weight: 500;
+  font-weight: var(--ds-weight-medium);
   color: var(--ds-color-text-secondary);
   background: none;
   border: 1px solid var(--ds-color-border);
   border-radius: var(--ds-radius-full);
   padding: var(--ds-space-1) var(--ds-space-3);
   cursor: pointer;
-  transition: all var(--ds-duration-fast) var(--ds-ease);
+  transition: all var(--ds-duration-fast) var(--ds-ease-default);
 }
 
 .ds-datepicker__today:hover {
@@ -215,6 +228,10 @@
   color: var(--ds-color-text);
   border-color: var(--ds-color-border-hover);
 }
+.ds-datepicker__today:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
+}
 
 /* Step arrows — prev/next day buttons beside the date text */
 .ds-datepicker__step {
@@ -229,7 +246,7 @@
   color: var(--ds-color-text-tertiary);
   cursor: pointer;
   font-size: var(--ds-text-xs);
-  transition: all var(--ds-duration-fast) var(--ds-ease);
+  transition: all var(--ds-duration-fast) var(--ds-ease-default);
   padding: 0;
   flex-shrink: 0;
 }
@@ -238,6 +255,10 @@
   background-color: var(--ds-color-bg-elevated);
   color: var(--ds-color-text);
 }
+.ds-datepicker__step:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
+}
 
 /* Compact mode — for inline table cells */
 .ds-datepicker--compact .ds-datepicker__panel {
@@ -256,7 +277,7 @@
 }
 
 .ds-datepicker--compact .ds-datepicker__weekday {
-  font-size: 0.625rem;
+  font-size: var(--ds-text-2xs);
 }
 
 .ds-datepicker--compact .ds-datepicker__day {
@@ -264,7 +285,7 @@
 }
 
 .ds-datepicker--compact .ds-datepicker__today {
-  font-size: 0.625rem;
+  font-size: var(--ds-text-2xs);
   padding: 2px var(--ds-space-2);
 }
 

package/src/components/drawer.css

@@ -185,6 +185,10 @@
   background-color: var(--ds-color-overlay);
   color: var(--ds-color-text);
 }
+.ds-drawer__close:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
+}
 
 /* ==========================================================================
  * Body

package/src/components/drop-zone.css

@@ -39,6 +39,10 @@
   transition:
     background-color var(--ds-duration-fast) var(--ds-ease-default);
 }
+.ds-drop-zone:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
+}
 
 :root:not(.dark) .ds-drop-zone {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect x='1' y='1' width='99%25' height='99%25' rx='16' ry='16' fill='none' stroke='%23d4d4d8' stroke-width='2' stroke-dasharray='10 8'/%3E%3C/svg%3E");

package/src/components/dropdown.css

@@ -63,6 +63,11 @@
   transform-origin: bottom right;
 }
 
+/* --- Width variants --- */
+.ds-dropdown__menu--sm { min-width: 8rem; }
+.ds-dropdown__menu--lg { min-width: 20rem; }
+.ds-dropdown__menu--auto { min-width: auto; }
+
 /* --- Menu item --- */
 
 .ds-dropdown__item {
@@ -85,6 +90,10 @@
   background-color: var(--ds-color-bg-elevated);
   color: var(--ds-color-text);
 }
+.ds-dropdown__item:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
+}
 
 .ds-dropdown__item--active {
   background-color: var(--ds-color-bg-elevated);

package/src/components/empty-state.css

@@ -67,3 +67,9 @@
   border: 1px solid var(--ds-color-border);
   border-radius: var(--ds-radius-xl);
 }
+
+/* --- Left-aligned variant --- */
+.ds-empty-state--left {
+  align-items: flex-start;
+  text-align: left;
+}

package/src/components/input.css

@@ -11,10 +11,14 @@
   margin-bottom: var(--ds-space-1-5);
 }
 
+.ds-input,
+.ds-textarea {
+  width: 100%;
+}
+
 .ds-input,
 .ds-textarea,
 .ds-select {
-  width: 100%;
   padding: 0 var(--ds-space-4);
   font-family: var(--ds-font-sans);
   font-size: var(--ds-text-base); /* 16px — prevents iOS auto-zoom on focus */
@@ -23,7 +27,11 @@
   background-color: var(--ds-color-surface);
   border: 1px solid var(--ds-color-border);
   border-radius: var(--ds-radius-lg);
-  transition: all var(--ds-duration-fast) var(--ds-ease-default);
+  outline: none;
+  transition:
+    border-color var(--ds-duration-fast) var(--ds-ease-default),
+    box-shadow var(--ds-duration-fast) var(--ds-ease-default),
+    background-color var(--ds-duration-fast) var(--ds-ease-default);
 }
 
 .ds-input,
@@ -31,18 +39,22 @@
   height: var(--ds-size-3);
 }
 
+/* Hover */
 .ds-input:hover,
 .ds-textarea:hover,
 .ds-select:hover {
   border-color: var(--ds-color-border-hover);
 }
 
-.ds-input:focus,
-.ds-textarea:focus,
-.ds-select:focus {
-  border-color: var(--ds-color-border-active);
-  box-shadow: inset 0 0 0 1px var(--ds-color-border-active);
-  outline: none;
+/* Focus — box-shadow ring instead of outline.
+   Inputs always trigger :focus-visible (browser heuristic for text entry),
+   so outline creates unavoidable double-border with offset.
+   box-shadow follows border-radius perfectly and has no gap. */
+.ds-input:focus-visible,
+.ds-textarea:focus-visible,
+.ds-select:focus-visible {
+  border-color: var(--ds-ring-color);
+  box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
 }
 
 .ds-input::placeholder,
@@ -50,19 +62,32 @@
   color: var(--ds-color-text-tertiary);
 }
 
-/* States */
+/* States — error: border + ring match the semantic color */
 .ds-input--error,
 .ds-textarea--error {
   border-color: var(--ds-color-error);
 }
-.ds-input--error:focus,
-.ds-textarea--error:focus {
-  box-shadow: inset 0 0 0 1px var(--ds-color-error);
+.ds-input--error:hover,
+.ds-textarea--error:hover {
+  border-color: var(--ds-color-error);
+}
+.ds-input--error:focus-visible,
+.ds-textarea--error:focus-visible {
+  border-color: var(--ds-color-error);
+  box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-color-error);
 }
 
+/* States — success: border + ring match the semantic color */
 .ds-input--success {
   border-color: var(--ds-color-success);
 }
+.ds-input--success:hover {
+  border-color: var(--ds-color-success);
+}
+.ds-input--success:focus-visible {
+  border-color: var(--ds-color-success);
+  box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-color-success);
+}
 
 /* Sizes */
 .ds-input--xs,
@@ -109,6 +134,50 @@
   padding-right: var(--ds-space-8);
 }
 
+/* --- Layout Modifiers ---
+   Override default width/display/chrome assumptions. */
+
+/* Full width (opt-in for select, already default for input/textarea) */
+.ds-select--full {
+  width: 100%;
+}
+
+/* Flush — naked input inside a styled container.
+   No border, no background, no padding, no focus ring.
+   The container handles visual chrome. */
+.ds-input--flush {
+  background: transparent;
+  border: none;
+  padding: 0;
+  border-radius: 0;
+  box-shadow: none;
+  height: auto;
+}
+.ds-input--flush:hover {
+  border-color: transparent;
+}
+.ds-input--flush:focus-visible {
+  border-color: transparent;
+  box-shadow: none;
+}
+
+/* Inline — auto-width for use in flex rows */
+.ds-input--inline {
+  width: auto;
+  display: inline-flex;
+}
+
+/* --- 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);
+}
+.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));
+}
+
 /* Help text */
 .ds-help {
   font-size: var(--ds-text-xs);

package/src/components/modal.css

@@ -12,8 +12,8 @@
   justify-content: center;
   padding: var(--ds-space-4);
   background-color: var(--ds-color-overlay);
-  backdrop-filter: blur(4px);
-  -webkit-backdrop-filter: blur(4px);
+  backdrop-filter: blur(var(--ds-blur-sm));
+  -webkit-backdrop-filter: blur(var(--ds-blur-sm));
   opacity: 0;
   visibility: hidden;
   transition:
@@ -82,6 +82,10 @@
 .ds-modal__close:hover {
   color: var(--ds-color-text);
 }
+.ds-modal__close:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
+}
 
 .ds-modal__body {
   padding: var(--ds-space-5);

package/src/components/nav.css

@@ -15,8 +15,8 @@
   height: 4rem;
   background-color: var(--ds-color-nav-bg);
   border-bottom: 1px solid var(--ds-color-nav-border);
-  backdrop-filter: blur(20px) saturate(1.5);
-  -webkit-backdrop-filter: blur(20px) saturate(1.5);
+  backdrop-filter: blur(var(--ds-blur-lg)) saturate(1.5);
+  -webkit-backdrop-filter: blur(var(--ds-blur-lg)) saturate(1.5);
 }
 
 .ds-nav--static {
@@ -59,6 +59,11 @@
   }
 }
 
+.ds-nav__link:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
+}
+
 .ds-nav__link--active {
   color: var(--ds-color-text);
 }
@@ -88,13 +93,18 @@
   }
 }
 
+.ds-nav__icon-btn:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
+}
+
 /* --- Mobile nav overlay --- */
 .ds-nav__mobile {
   overflow: hidden;
   max-height: 0;
   border-bottom: 0 solid var(--ds-color-nav-border);
   background-color: var(--ds-color-nav-bg);
-  backdrop-filter: blur(20px);
+  backdrop-filter: blur(var(--ds-blur-lg));
   transition: all var(--ds-duration-slow) var(--ds-ease-out-expo);
 }
 
@@ -162,6 +172,11 @@
   }
 }
 
+.ds-sidebar__link:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
+}
+
 .ds-sidebar__link--active {
   color: var(--ds-color-text);
   background-color: var(--ds-color-bg-elevated);

package/src/components/pagination.css

@@ -57,8 +57,8 @@
 }
 
 .ds-pagination__item:focus-visible {
-  outline: var(--ds-ring-width) solid var(--ds-ring-color);
-  outline-offset: var(--ds-ring-offset);
+  outline: none;
+  box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
 }
 
 /* ---------------------------------------------------------------------------
@@ -116,8 +116,8 @@
 
 .ds-pagination__prev:focus-visible,
 .ds-pagination__next:focus-visible {
-  outline: var(--ds-ring-width) solid var(--ds-ring-color);
-  outline-offset: var(--ds-ring-offset);
+  outline: none;
+  box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
 }
 
 .ds-pagination__prev:disabled,

package/src/components/popover.css

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

package/src/components/skeleton.css

@@ -94,3 +94,7 @@
     opacity: 0.4;
   }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .ds-skeleton { animation: none; }
+}

package/src/components/slider.css

@@ -73,12 +73,12 @@
 /* Focus ring */
 .ds-slider input[type="range"]:focus-visible::-webkit-slider-thumb {
   outline: var(--ds-ring-width) solid var(--ds-ring-color);
-  outline-offset: var(--ds-ring-offset);
+  outline-offset: 0;
 }
 
 .ds-slider input[type="range"]:focus-visible::-moz-range-thumb {
   outline: var(--ds-ring-width) solid var(--ds-ring-color);
-  outline-offset: var(--ds-ring-offset);
+  outline-offset: 0;
 }
 
 /* Labels row */

package/src/components/sortable.css

@@ -31,6 +31,12 @@ tr:hover .ds-sortable__handle,
   opacity: 1;
 }
 
+.ds-sortable__handle:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
+  border-radius: var(--ds-radius-sm);
+}
+
 tr:hover .ds-sortable__handle,
 .ds-sortable-row:hover .ds-sortable__handle {
   color: var(--ds-color-text-secondary);

package/src/components/tabs.css

@@ -106,8 +106,8 @@
 }
 
 .ds-tab:focus-visible {
-  outline: var(--ds-ring-width) solid var(--ds-ring-color);
-  outline-offset: var(--ds-ring-offset);
+  outline: none;
+  box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
   border-radius: var(--ds-radius-sm);
 }
 

package/src/components/tag.css

@@ -42,6 +42,7 @@
 /* Tags used as <button> for selection — no focus ring on click */
 button.ds-tag:focus-visible {
   outline: none;
+  box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
 }
 
 /* ---------------------------------------------------------------------------
@@ -124,8 +125,8 @@ button.ds-tag:focus-visible {
 }
 
 .ds-tag__remove:focus-visible {
-  outline: var(--ds-ring-width) solid var(--ds-ring-color);
-  outline-offset: var(--ds-ring-offset);
+  outline: none;
+  box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
   opacity: 1;
 }
 

package/src/components/toast.css

@@ -35,10 +35,10 @@
   animation: ds-toast-in var(--ds-duration-slow) var(--ds-ease-out-expo) forwards;
 }
 
-.ds-toast--info    { border-left: 3px solid var(--ds-color-info); }
-.ds-toast--success { border-left: 3px solid var(--ds-color-success); }
-.ds-toast--warning { border-left: 3px solid var(--ds-color-warning); }
-.ds-toast--error   { border-left: 3px solid var(--ds-color-error); }
+.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__message {
   flex: 1;
@@ -55,6 +55,10 @@
 .ds-toast__close:hover {
   color: var(--ds-color-text);
 }
+.ds-toast__close:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
+}
 
 @keyframes ds-toast-in {
   from { opacity: 0; transform: translateY(-8px); }
@@ -68,3 +72,8 @@
 @keyframes ds-toast-out {
   to { opacity: 0; transform: translateX(100%); }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .ds-toast { animation: none; }
+  .ds-toast--exit { animation: none; opacity: 0; }
+}

package/src/components/toggle.css

@@ -83,8 +83,8 @@
    --------------------------------------------------------------------------- */
 
 .ds-toggle:focus-visible {
-  outline: var(--ds-ring-width) solid var(--ds-ring-color);
-  outline-offset: var(--ds-ring-offset);
+  outline: none;
+  box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
 }
 
 /* ---------------------------------------------------------------------------