@digiko-npm/designsystem 0.8.2 → 0.8.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digiko-npm/designsystem",
-  "version": "0.8.2",
+  "version": "0.8.3",
   "description": "Design system — installable, extensible, indestructible.",
   "main": "dist/designsystem.css",
   "style": "dist/designsystem.css",

package/src/components/combobox.css

@@ -81,7 +81,7 @@
 }
 
 /* Stand-alone input (no input-area wrapper) */
-input.ds-combobox__input {
+.ds-combobox > .ds-combobox__input {
   width: 100%;
   min-height: var(--ds-size-3);
   padding: 0 var(--ds-space-3);
@@ -93,11 +93,11 @@ input.ds-combobox__input {
     box-shadow var(--ds-duration-fast) var(--ds-ease-default);
 }
 
-input.ds-combobox__input:hover {
+.ds-combobox > .ds-combobox__input:hover {
   border-color: var(--ds-color-border-hover);
 }
 
-input.ds-combobox__input:focus {
+.ds-combobox > .ds-combobox__input:focus {
   border-color: var(--ds-color-border-active);
   outline: none;
   box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
@@ -355,39 +355,36 @@ input.ds-combobox__input:focus {
 
 /* XS */
 .ds-combobox--xs .ds-combobox__input-area,
-.ds-combobox--xs input.ds-combobox__input {
+.ds-combobox--xs > .ds-combobox__input {
   min-height: var(--ds-size-1);
   padding: 0 var(--ds-space-2);
   border-radius: var(--ds-radius-md);
 }
 
-.ds-combobox--xs .ds-combobox__input,
-.ds-combobox--xs input.ds-combobox__input {
+.ds-combobox--xs .ds-combobox__input {
   font-size: var(--ds-text-xs);
 }
 
 /* SM */
 .ds-combobox--sm .ds-combobox__input-area,
-.ds-combobox--sm input.ds-combobox__input {
+.ds-combobox--sm > .ds-combobox__input {
   min-height: var(--ds-size-2);
   padding: 0 var(--ds-space-2-5);
   border-radius: var(--ds-radius-md);
 }
 
-.ds-combobox--sm .ds-combobox__input,
-.ds-combobox--sm input.ds-combobox__input {
+.ds-combobox--sm .ds-combobox__input {
   font-size: var(--ds-text-sm);
 }
 
 /* LG */
 .ds-combobox--lg .ds-combobox__input-area,
-.ds-combobox--lg input.ds-combobox__input {
+.ds-combobox--lg > .ds-combobox__input {
   min-height: var(--ds-size-4);
   padding: 0 var(--ds-space-4);
 }
 
-.ds-combobox--lg .ds-combobox__input,
-.ds-combobox--lg input.ds-combobox__input {
+.ds-combobox--lg .ds-combobox__input {
   font-size: var(--ds-text-lg);
 }
 
@@ -396,12 +393,12 @@ input.ds-combobox__input:focus {
    ========================================================================== */
 
 .ds-combobox--error .ds-combobox__input-area,
-.ds-combobox--error input.ds-combobox__input {
+.ds-combobox--error > .ds-combobox__input {
   border-color: var(--ds-color-error);
 }
 
 .ds-combobox--error .ds-combobox__input-area:focus-within,
-.ds-combobox--error input.ds-combobox__input:focus {
+.ds-combobox--error > .ds-combobox__input:focus {
   box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-color-error);
 }
 

package/src/components/index.css

@@ -1,61 +1,67 @@
-/* === Core === */
-@import './button.css';
-@import './card.css';
-@import './stat-card.css';
+/* === Form — Inputs, selectors, and form controls === */
 @import './input.css';
 @import './field.css';
-@import './badge.css';
-@import './nav.css';
-@import './modal.css';
-@import './toast.css';
-@import './table.css';
-@import './icon-btn.css';
+@import './toggle.css';
+@import './custom-select.css';
 @import './combobox.css';
+@import './number-input.css';
+@import './pin-input.css';
+@import './datepicker.css';
+@import './color-picker.css';
+@import './slider.css';
+@import './drop-zone.css';
+@import './star-rating.css';
 
-/* === Tier 1 — Essential === */
-@import './tabs.css';
-@import './alert.css';
-@import './divider.css';
-@import './dropdown.css';
-@import './tooltip.css';
+/* === Data Display — Present information and status === */
+@import './badge.css';
+@import './tag.css';
+@import './chip.css';
 @import './avatar.css';
+@import './stat-card.css';
+@import './table.css';
+@import './description-list.css';
+@import './timeline.css';
+@import './progress.css';
 @import './skeleton.css';
-@import './empty-state.css';
-@import './search.css';
-@import './spinner.css';
-@import './segmented-control.css';
+@import './result.css';
+@import './truncated-text.css';
 
-/* === Tier 2 — Common === */
-@import './datepicker.css';
-@import './toggle.css';
+/* === Navigation — Wayfinding and page structure === */
+@import './nav.css';
 @import './breadcrumb.css';
+@import './tabs.css';
 @import './pagination.css';
-@import './tag.css';
-@import './accordion.css';
+@import './segmented-control.css';
+@import './bottom-nav.css';
+@import './toolbar.css';
+
+/* === Feedback — Communicate status and system messages === */
+@import './alert.css';
+@import './toast.css';
+@import './spinner.css';
+@import './empty-state.css';
+@import './tooltip.css';
+
+/* === Overlay — Floating panels and dialogs === */
+@import './modal.css';
 @import './drawer.css';
-@import './progress.css';
-@import './drop-zone.css';
-@import './custom-select.css';
+@import './dropdown.css';
+@import './popover.css';
+@import './bottom-sheet.css';
+@import './command.css';
+
+/* === Layout — Structure and organize content === */
+@import './card.css';
+@import './divider.css';
+@import './accordion.css';
 @import './collapsible.css';
-@import './description-list.css';
-@import './result.css';
-@import './sortable.css';
-@import './number-input.css';
-@import './pin-input.css';
-@import './copy-button.css';
 @import './scroll-area.css';
-@import './truncated-text.css';
-@import './color-picker.css';
-@import './star-rating.css';
 @import './gallery.css';
-@import './bottom-sheet.css';
 
-/* === Tier 3 — Advanced === */
-@import './popover.css';
-@import './slider.css';
-@import './timeline.css';
+/* === Action — Trigger operations and commands === */
+@import './button.css';
+@import './icon-btn.css';
+@import './copy-button.css';
 @import './kbd.css';
-@import './command.css';
-@import './toolbar.css';
-@import './chip.css';
-@import './bottom-nav.css';
+@import './search.css';
+@import './sortable.css';

package/src/components/stat-card.css

@@ -4,6 +4,9 @@
    ========================================================================== */
 
 .ds-stat-card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ds-space-1);
   background-color: var(--ds-color-surface);
   border: 1px solid var(--ds-color-border);
   border-radius: var(--ds-radius-xl);