@digiko-npm/designsystem 0.3.33 → 0.4.0

package/dist/designsystem.css

@@ -1,4 +1,4 @@
-/* @ds/designsystem v0.3.32 */
+/* @ds/designsystem v0.4.0 */
 /* ==========================================================================
    @digiko-npm/designsystem
 
@@ -361,10 +361,39 @@
   --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;
+  }
+}
+
 
 /* ==========================================================================
    Base: Reset
@@ -470,14 +499,11 @@ input[type="number"]::-webkit-inner-spin-button {
 .ds-no-scrollbar::-webkit-scrollbar { display: none; }
 .ds-no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
 
-/* Reduce motion */
+/* Reduce motion — scroll only.
+   Transitions are handled via --ds-duration-* tokens in shadows.css.
+   Keyframe animations are handled per-component. */
 @media (prefers-reduced-motion: reduce) {
-  *, *::before, *::after {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-    scroll-behavior: auto !important;
-  }
+  html { scroll-behavior: auto !important; }
 }
 
 /* ==========================================================================
@@ -685,8 +711,8 @@ hr {
 }
 
 .ds-btn: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-btn:disabled,
@@ -842,6 +868,10 @@ hr {
   to { transform: rotate(360deg); }
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .ds-btn--loading::after { animation: none; opacity: 0.6; }
+}
+
 /* ==========================================================================
    Component: Card
    Surface + border, hover with shadow lift, rounded-xl.
@@ -864,6 +894,13 @@ hr {
   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 {
@@ -914,6 +951,9 @@ hr {
   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,
@@ -977,10 +1017,14 @@ hr {
   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 */
@@ -989,7 +1033,11 @@ hr {
   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,
@@ -997,18 +1045,22 @@ hr {
   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,
@@ -1016,19 +1068,32 @@ hr {
   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,
@@ -1075,6 +1140,50 @@ hr {
   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);
@@ -1205,8 +1314,8 @@ hr {
 /* Dot indicator */
 .ds-badge--dot::before {
   content: '';
-  width: 6px;
-  height: 6px;
+  width: var(--ds-dot-size);
+  height: var(--ds-dot-size);
   border-radius: var(--ds-radius-full);
   background-color: currentColor;
 }
@@ -1236,8 +1345,8 @@ hr {
   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 {
@@ -1280,6 +1389,11 @@ hr {
   }
 }
 
+.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);
 }
@@ -1309,13 +1423,18 @@ hr {
   }
 }
 
+.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);
 }
 
@@ -1383,6 +1502,11 @@ hr {
   }
 }
 
+.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);
@@ -1402,8 +1526,8 @@ hr {
   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:
@@ -1472,6 +1596,10 @@ hr {
 .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);
@@ -1529,10 +1657,10 @@ hr {
   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;
@@ -1549,6 +1677,10 @@ hr {
 .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); }
@@ -1563,6 +1695,11 @@ hr {
   to { opacity: 0; transform: translateX(100%); }
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .ds-toast { animation: none; }
+  .ds-toast--exit { animation: none; opacity: 0; }
+}
+
 /* ==========================================================================
    Component: Table
    ========================================================================== */
@@ -1722,8 +1859,8 @@ hr {
 }
 
 .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);
 }
 
@@ -1792,7 +1929,7 @@ hr {
   border: 1px solid var(--ds-color-border);
   border-radius: var(--ds-radius-lg);
   background-color: var(--ds-color-surface);
-  border-left: 3px solid var(--ds-color-border);
+  border-left: var(--ds-accent-border-width) solid var(--ds-color-border);
 }
 
 /* --- Semantic Variants --- */
@@ -1887,8 +2024,8 @@ hr {
 }
 
 .ds-alert__close: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);
 }
 
 /* --- Compact Variant --- */
@@ -2061,6 +2198,11 @@ hr {
   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 {
@@ -2083,6 +2225,10 @@ hr {
   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);
@@ -2200,7 +2346,7 @@ hr {
 
 .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);
 }
@@ -2224,7 +2370,7 @@ hr {
    ============================================= */
 
 .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);
@@ -2249,7 +2395,7 @@ hr {
    ============================================= */
 
 .ds-tooltip--left .ds-tooltip__content {
-  right: calc(100% + 8px);
+  right: calc(100% + var(--ds-offset-md));
   left: auto;
   bottom: auto;
   top: 50%;
@@ -2276,7 +2422,7 @@ hr {
    ============================================= */
 
 .ds-tooltip--right .ds-tooltip__content {
-  left: calc(100% + 8px);
+  left: calc(100% + var(--ds-offset-md));
   right: auto;
   bottom: auto;
   top: 50%;
@@ -2505,6 +2651,10 @@ hr {
   }
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .ds-skeleton { animation: none; }
+}
+
 /* ==========================================================================
    Component: Empty State
    Centered message for when there's no data to display.
@@ -2575,6 +2725,12 @@ hr {
   border-radius: var(--ds-radius-xl);
 }
 
+/* --- Left-aligned variant --- */
+.ds-empty-state--left {
+  align-items: flex-start;
+  text-align: left;
+}
+
 
 /* === Tier 2 — Common === */
 /* ==========================================================================
@@ -2636,11 +2792,16 @@ hr {
   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);
@@ -2652,8 +2813,8 @@ hr {
   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);
 }
 
@@ -2674,7 +2835,7 @@ hr {
 
 .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;
 }
@@ -2691,13 +2852,17 @@ hr {
   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 {
@@ -2712,7 +2877,7 @@ hr {
   text-align: center;
   padding: var(--ds-space-1) 0;
   user-select: none;
-  font-weight: 500;
+  font-weight: var(--ds-weight-medium);
 }
 
 /* Day grid */
@@ -2734,7 +2899,7 @@ hr {
   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;
@@ -2743,18 +2908,22 @@ hr {
 .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 {
@@ -2779,14 +2948,14 @@ hr {
 
 .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 {
@@ -2794,6 +2963,10 @@ hr {
   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 {
@@ -2808,7 +2981,7 @@ hr {
   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;
 }
@@ -2817,6 +2990,10 @@ hr {
   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 {
@@ -2835,7 +3012,7 @@ hr {
 }
 
 .ds-datepicker--compact .ds-datepicker__weekday {
-  font-size: 0.625rem;
+  font-size: var(--ds-text-2xs);
 }
 
 .ds-datepicker--compact .ds-datepicker__day {
@@ -2843,7 +3020,7 @@ hr {
 }
 
 .ds-datepicker--compact .ds-datepicker__today {
-  font-size: 0.625rem;
+  font-size: var(--ds-text-2xs);
   padding: 2px var(--ds-space-2);
 }
 
@@ -2937,8 +3114,8 @@ hr {
    --------------------------------------------------------------------------- */
 
 .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);
 }
 
 /* ---------------------------------------------------------------------------
@@ -3057,8 +3234,8 @@ hr {
 }
 
 .ds-breadcrumb__link: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);
 }
 
@@ -3143,8 +3320,8 @@ hr {
 }
 
 .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);
 }
 
 /* ---------------------------------------------------------------------------
@@ -3202,8 +3379,8 @@ hr {
 
 .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,
@@ -3295,6 +3472,7 @@ hr {
 /* 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);
 }
 
 /* ---------------------------------------------------------------------------
@@ -3377,8 +3555,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;
 }
 
@@ -3498,6 +3676,10 @@ button.ds-tag:focus-visible {
 .ds-accordion__trigger:hover {
   background-color: var(--ds-color-overlay);
 }
+.ds-accordion__trigger:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
+}
 
 /* Open state – rotate chevron */
 .ds-accordion__item--open .ds-accordion__trigger::after {
@@ -3758,6 +3940,10 @@ button.ds-tag:focus-visible {
   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
@@ -4042,6 +4228,10 @@ button.ds-tag:focus-visible {
   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");
@@ -4173,6 +4363,12 @@ button.ds-tag:focus-visible {
   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);
@@ -4336,6 +4532,10 @@ button.ds-tag:focus-visible {
   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);
@@ -4445,6 +4645,15 @@ button.ds-tag:focus-visible {
   }
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .ds-custom-select__panel {
+    animation: none;
+    opacity: 1;
+    transform: scale(1);
+  }
+  .ds-custom-select__backdrop { animation: none; opacity: 1; }
+}
+
 /* ==========================================================================
    Component: Sortable
    Optional drag-to-reorder styles for table rows or list items.
@@ -4478,6 +4687,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);
@@ -4557,7 +4772,7 @@ tr:hover .ds-sortable__handle,
 /* 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);
 }
@@ -4569,7 +4784,7 @@ tr:hover .ds-sortable__handle,
 
 /* 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);
@@ -4581,7 +4796,7 @@ tr:hover .ds-sortable__handle,
 
 /* 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);
@@ -4593,7 +4808,7 @@ tr:hover .ds-sortable__handle,
 
 /* 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);
 }
@@ -4688,12 +4903,12 @@ tr:hover .ds-sortable__handle,
 /* 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 */
@@ -5071,6 +5286,10 @@ tr:hover .ds-sortable__handle,
   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 {
@@ -5304,11 +5523,15 @@ tr:hover .ds-sortable__handle,
 .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); }