@digiko-npm/designsystem 0.3.33 → 0.3.34

package/README.md

@@ -43,7 +43,7 @@ npm install @digiko-npm/designsystem
 <span class="ds-badge ds-badge--success">Active</span>
 ```
 
-## Components (28)
+## Components (32)
 
 | Core | Essential | Common | Advanced |
 |------|-----------|--------|----------|
@@ -54,7 +54,10 @@ npm install @digiko-npm/designsystem
 | Nav | Tooltip | Accordion | Command |
 | Modal | Avatar | Drawer | |
 | Toast | Skeleton | Progress | |
-| Table | Empty State | | |
+| Table | Empty State | Datepicker | |
+| | | Drop Zone | |
+| | | Custom Select | |
+| | | Sortable | |
 
 All components use `ds-` prefix with BEM naming: `.ds-btn`, `.ds-btn--secondary`, `.ds-card__body`.
 

package/dist/designsystem.css

@@ -1,4 +1,4 @@
-/* @ds/designsystem v0.3.32 */
+/* @ds/designsystem v0.3.34 */
 /* ==========================================================================
    @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; }
 }
 
 /* ==========================================================================
@@ -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,10 @@ hr {
   box-shadow: var(--ds-shadow-lg);
   transform: translateY(-4px);
 }
+.ds-card--interactive:focus-visible {
+  outline: var(--ds-ring-width) solid var(--ds-ring-color);
+  outline-offset: var(--ds-ring-offset);
+}
 
 /* Elevated card — visible shadow */
 .ds-card--elevated {
@@ -989,7 +1023,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 +1035,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 +1058,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,
@@ -1205,8 +1260,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 +1291,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 +1335,11 @@ hr {
   }
 }
 
+.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);
 }
@@ -1309,13 +1369,18 @@ hr {
   }
 }
 
+.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);
 }
 
@@ -1383,6 +1448,11 @@ hr {
   }
 }
 
+.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);
@@ -1402,8 +1472,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 +1542,10 @@ hr {
 .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);
@@ -1529,10 +1603,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 +1623,10 @@ hr {
 .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); }
@@ -1563,6 +1641,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
    ========================================================================== */
@@ -1792,7 +1875,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 --- */
@@ -2083,6 +2166,10 @@ hr {
   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);
@@ -2200,7 +2287,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 +2311,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 +2336,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 +2363,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 +2592,10 @@ hr {
   }
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .ds-skeleton { animation: none; }
+}
+
 /* ==========================================================================
    Component: Empty State
    Centered message for when there's no data to display.
@@ -2636,11 +2727,16 @@ hr {
   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);
@@ -2652,8 +2748,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 +2770,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 +2787,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: var(--ds-ring-width) solid var(--ds-ring-color);
+  outline-offset: calc(-1 * var(--ds-ring-offset));
+}
 
 /* Weekday header row */
 .ds-datepicker__weekdays {
@@ -2712,7 +2812,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 +2834,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 +2843,22 @@ hr {
 .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 {
@@ -2779,14 +2883,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 +2898,10 @@ hr {
   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 {
@@ -2808,7 +2916,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 +2925,10 @@ hr {
   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 {
@@ -2835,7 +2947,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 +2955,7 @@ hr {
 }
 
 .ds-datepicker--compact .ds-datepicker__today {
-  font-size: 0.625rem;
+  font-size: var(--ds-text-2xs);
   padding: 2px var(--ds-space-2);
 }
 
@@ -3498,6 +3610,10 @@ button.ds-tag:focus-visible {
 .ds-accordion__trigger:hover {
   background-color: var(--ds-color-overlay);
 }
+.ds-accordion__trigger:focus-visible {
+  outline: var(--ds-ring-width) solid var(--ds-ring-color);
+  outline-offset: var(--ds-ring-offset);
+}
 
 /* Open state – rotate chevron */
 .ds-accordion__item--open .ds-accordion__trigger::after {
@@ -3758,6 +3874,10 @@ button.ds-tag:focus-visible {
   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
@@ -4042,6 +4162,10 @@ button.ds-tag:focus-visible {
   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");
@@ -4173,6 +4297,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: 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);
@@ -4336,6 +4466,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: 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);
@@ -4445,6 +4579,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.
@@ -4557,7 +4700,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 +4712,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 +4724,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 +4736,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);
 }
@@ -5071,6 +5214,10 @@ tr:hover .ds-sortable__handle,
   background-color: var(--ds-color-bg-elevated);
   color: var(--ds-color-text);
 }
+.ds-command__item:focus-visible {
+  outline: var(--ds-ring-width) solid var(--ds-ring-color);
+  outline-offset: calc(-1 * var(--ds-ring-offset));
+}
 
 /* Item icon */
 .ds-command__item-icon {
@@ -5304,11 +5451,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); }