@digiko-npm/designsystem 0.3.33 → 0.3.34

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: var(--ds-ring-width) solid var(--ds-ring-color);
+  outline-offset: -1px;
+}
+
 .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: var(--ds-ring-width) solid var(--ds-ring-color);
+  outline-offset: calc(-1 * var(--ds-ring-offset));
+}
 
 .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: var(--ds-ring-width) solid var(--ds-ring-color);
+  outline-offset: var(--ds-ring-offset);
+}
+
 /* 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: var(--ds-ring-width) solid var(--ds-ring-color);
+  outline-offset: calc(-1 * var(--ds-ring-offset));
+}
 
 /* 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: var(--ds-ring-width) solid var(--ds-ring-color);
+  outline-offset: calc(-1 * var(--ds-ring-offset));
+}
 
 /* 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: var(--ds-ring-width) solid var(--ds-ring-color);
+  outline-offset: var(--ds-ring-offset);
+}
 
 /* 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: var(--ds-ring-width) solid var(--ds-ring-color);
+  outline-offset: calc(-1 * var(--ds-ring-offset));
+}
 
 /* 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: var(--ds-ring-width) solid var(--ds-ring-color);
+  outline-offset: var(--ds-ring-offset);
+}
 
 /* ==========================================================================
  * 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: var(--ds-ring-width) solid var(--ds-ring-color);
+  outline-offset: var(--ds-ring-offset);
+}
 
 :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

@@ -85,6 +85,10 @@
   background-color: var(--ds-color-bg-elevated);
   color: var(--ds-color-text);
 }
+.ds-dropdown__item:focus-visible {
+  outline: var(--ds-ring-width) solid var(--ds-ring-color);
+  outline-offset: calc(-1 * var(--ds-ring-offset));
+}
 
 .ds-dropdown__item--active {
   background-color: var(--ds-color-bg-elevated);

package/src/components/input.css

@@ -23,7 +23,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 +35,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 +58,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,

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: var(--ds-ring-width) solid var(--ds-ring-color);
+  outline-offset: var(--ds-ring-offset);
+}
 
 .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: var(--ds-ring-width) solid var(--ds-ring-color);
+  outline-offset: var(--ds-ring-offset);
+}
+
 .ds-nav__link--active {
   color: var(--ds-color-text);
 }
@@ -88,13 +93,18 @@
   }
 }
 
+.ds-nav__icon-btn:focus-visible {
+  outline: var(--ds-ring-width) solid var(--ds-ring-color);
+  outline-offset: var(--ds-ring-offset);
+}
+
 /* --- 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: var(--ds-ring-width) solid var(--ds-ring-color);
+  outline-offset: calc(-1 * var(--ds-ring-offset));
+}
+
 .ds-sidebar__link--active {
   color: var(--ds-color-text);
   background-color: var(--ds-color-bg-elevated);

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/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: var(--ds-ring-width) solid var(--ds-ring-color);
+  outline-offset: var(--ds-ring-offset);
+}
 
 @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/tooltip.css

@@ -62,7 +62,7 @@
 
 .ds-tooltip .ds-tooltip__content,
 .ds-tooltip--top .ds-tooltip__content {
-  bottom: calc(100% + 8px);
+  bottom: calc(100% + var(--ds-offset-md));
   left: 50%;
   transform: translateX(-50%) translateY(4px);
 }
@@ -86,7 +86,7 @@
    ============================================= */
 
 .ds-tooltip--bottom .ds-tooltip__content {
-  top: calc(100% + 8px);
+  top: calc(100% + var(--ds-offset-md));
   bottom: auto;
   left: 50%;
   transform: translateX(-50%) translateY(-4px);
@@ -111,7 +111,7 @@
    ============================================= */
 
 .ds-tooltip--left .ds-tooltip__content {
-  right: calc(100% + 8px);
+  right: calc(100% + var(--ds-offset-md));
   left: auto;
   bottom: auto;
   top: 50%;
@@ -138,7 +138,7 @@
    ============================================= */
 
 .ds-tooltip--right .ds-tooltip__content {
-  left: calc(100% + 8px);
+  left: calc(100% + var(--ds-offset-md));
   right: auto;
   bottom: auto;
   top: 50%;

package/src/tokens/shadows.css

@@ -21,6 +21,35 @@
   --ds-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
   --ds-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
 
+  /* --- Backdrop Blur --- */
+  --ds-blur-sm: 4px;
+  --ds-blur-md: 12px;
+  --ds-blur-lg: 20px;
+
+  /* --- Indicator Sizes --- */
+  --ds-dot-size: 6px;
+
+  /* --- Accent Border --- */
+  --ds-accent-border-width: 3px;
+
+  /* --- Popover/Tooltip Offset --- */
+  --ds-offset-sm: 4px;
+  --ds-offset-md: 8px;
+
   /* --- Opacity --- */
   --ds-opacity-disabled: 0.5;
 }
+
+/* --- Reduced Motion ---
+   Zero out duration tokens so every component that uses
+   var(--ds-duration-*) transitions instantly.
+   Keyframe animations are handled per-component.
+   -------------------------------------------------------- */
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --ds-duration-fast: 0s;
+    --ds-duration-normal: 0s;
+    --ds-duration-slow: 0s;
+    --ds-duration-slower: 0s;
+  }
+}

package/src/utilities/layout.css

@@ -192,11 +192,15 @@
 .ds-z-60  { z-index: var(--ds-z-sticky); }
 
 /* --- Inset / Position Values --- */
-.ds-inset-0  { inset: 0; }
-.ds-top-0    { top: 0; }
-.ds-right-0  { right: 0; }
-.ds-bottom-0 { bottom: 0; }
-.ds-left-0   { left: 0; }
+.ds-inset-0    { inset: 0; }
+.ds-inset-x-0  { left: 0; right: 0; }
+.ds-inset-y-0  { top: 0; bottom: 0; }
+.ds-top-0      { top: 0; }
+.ds-top-full   { top: 100%; }
+.ds-right-0    { right: 0; }
+.ds-bottom-0   { bottom: 0; }
+.ds-bottom-full { bottom: 100%; }
+.ds-left-0     { left: 0; }
 .ds-top-2    { top: var(--ds-space-2); }
 .ds-right-2  { right: var(--ds-space-2); }
 .ds-left-2   { left: var(--ds-space-2); }