@digiko-npm/designsystem 0.3.34 → 0.4.0

package/src/components/custom-select.css

@@ -39,8 +39,8 @@
 
 .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;
+  outline: none;
+  box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
 }
 
 .ds-custom-select__trigger--open {
@@ -207,8 +207,8 @@
   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));
+  outline: none;
+  box-shadow: inset 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
 }
 
 .ds-custom-select__option--selected {

package/src/components/datepicker.css

@@ -58,8 +58,8 @@
 }
 
 .ds-datepicker__trigger: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);
 }
 
 /* Calendar panel */
@@ -125,8 +125,8 @@
   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));
+  outline: none;
+  box-shadow: inset 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
 }
 
 /* Weekday header row */
@@ -174,8 +174,8 @@
   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));
+  outline: none;
+  box-shadow: inset 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
 }
 
 /* Today — subtle ring */
@@ -229,8 +229,8 @@
   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);
+  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 */
@@ -256,8 +256,8 @@
   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));
+  outline: none;
+  box-shadow: inset 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
 }
 
 /* Compact mode — for inline table cells */

package/src/components/drawer.css

@@ -186,8 +186,8 @@
   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);
+  outline: none;
+  box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
 }
 
 /* ==========================================================================

package/src/components/drop-zone.css

@@ -40,8 +40,8 @@
     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);
+  outline: none;
+  box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
 }
 
 :root:not(.dark) .ds-drop-zone {

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 {
@@ -86,8 +91,8 @@
   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));
+  outline: none;
+  box-shadow: inset 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
 }
 
 .ds-dropdown__item--active {

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 */
@@ -130,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

@@ -83,8 +83,8 @@
   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);
+  outline: none;
+  box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
 }
 
 .ds-modal__body {

package/src/components/nav.css

@@ -60,8 +60,8 @@
 }
 
 .ds-nav__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);
 }
 
 .ds-nav__link--active {
@@ -94,8 +94,8 @@
 }
 
 .ds-nav__icon-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);
 }
 
 /* --- Mobile nav overlay --- */
@@ -173,8 +173,8 @@
 }
 
 .ds-sidebar__link:focus-visible {
-  outline: var(--ds-ring-width) solid var(--ds-ring-color);
-  outline-offset: calc(-1 * var(--ds-ring-offset));
+  outline: none;
+  box-shadow: inset 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
 }
 
 .ds-sidebar__link--active {

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

@@ -56,8 +56,8 @@
   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);
+  outline: none;
+  box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
 }
 
 @keyframes ds-toast-in {

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);
 }
 
 /* ---------------------------------------------------------------------------