@digiko-npm/designsystem 0.7.2 → 0.8.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digiko-npm/designsystem",
-  "version": "0.7.2",
+  "version": "0.8.1",
   "description": "Design system — installable, extensible, indestructible.",
   "main": "dist/designsystem.css",
   "style": "dist/designsystem.css",
@@ -15,12 +15,16 @@
     "./components/avatar": "./src/components/avatar.css",
     "./components/badge": "./src/components/badge.css",
     "./components/bottom-nav": "./src/components/bottom-nav.css",
+    "./components/bottom-sheet": "./src/components/bottom-sheet.css",
     "./components/breadcrumb": "./src/components/breadcrumb.css",
     "./components/button": "./src/components/button.css",
     "./components/card": "./src/components/card.css",
     "./components/chip": "./src/components/chip.css",
     "./components/collapsible": "./src/components/collapsible.css",
+    "./components/color-picker": "./src/components/color-picker.css",
+    "./components/combobox": "./src/components/combobox.css",
     "./components/command": "./src/components/command.css",
+    "./components/copy-button": "./src/components/copy-button.css",
     "./components/custom-select": "./src/components/custom-select.css",
     "./components/datepicker": "./src/components/datepicker.css",
     "./components/description-list": "./src/components/description-list.css",
@@ -30,20 +34,26 @@
     "./components/dropdown": "./src/components/dropdown.css",
     "./components/empty-state": "./src/components/empty-state.css",
     "./components/field": "./src/components/field.css",
+    "./components/gallery": "./src/components/gallery.css",
     "./components/icon-btn": "./src/components/icon-btn.css",
     "./components/input": "./src/components/input.css",
     "./components/kbd": "./src/components/kbd.css",
     "./components/modal": "./src/components/modal.css",
     "./components/nav": "./src/components/nav.css",
+    "./components/number-input": "./src/components/number-input.css",
     "./components/pagination": "./src/components/pagination.css",
+    "./components/pin-input": "./src/components/pin-input.css",
     "./components/popover": "./src/components/popover.css",
     "./components/progress": "./src/components/progress.css",
     "./components/result": "./src/components/result.css",
+    "./components/scroll-area": "./src/components/scroll-area.css",
     "./components/search": "./src/components/search.css",
+    "./components/segmented-control": "./src/components/segmented-control.css",
     "./components/skeleton": "./src/components/skeleton.css",
     "./components/slider": "./src/components/slider.css",
     "./components/sortable": "./src/components/sortable.css",
     "./components/spinner": "./src/components/spinner.css",
+    "./components/star-rating": "./src/components/star-rating.css",
     "./components/stat-card": "./src/components/stat-card.css",
     "./components/table": "./src/components/table.css",
     "./components/tabs": "./src/components/tabs.css",
@@ -53,8 +63,10 @@
     "./components/toggle": "./src/components/toggle.css",
     "./components/toolbar": "./src/components/toolbar.css",
     "./components/tooltip": "./src/components/tooltip.css",
+    "./components/truncated-text": "./src/components/truncated-text.css",
     "./utilities": "./src/utilities/index.css",
-    "./js": "./dist/designsystem.js"
+    "./js": "./dist/designsystem.js",
+    "./tokens/json": "./src/tokens/tokens.json"
   },
   "files": [
     "dist/",
@@ -63,6 +75,7 @@
   "scripts": {
     "build": "node scripts/build.js",
     "docs": "node scripts/generate-docs.js",
+    "lint": "stylelint 'src/**/*.css'",
     "dev": "node scripts/build.js --watch & node scripts/generate-docs.js && live-server --host=localhost --port=3000 --open=examples/ --watch=dist/,examples/ --wait=200 --no-browser"
   },
   "keywords": [
@@ -80,6 +93,8 @@
     "access": "public"
   },
   "devDependencies": {
-    "live-server": "^1.2.2"
+    "live-server": "^1.2.2",
+    "stylelint": "^17.5.0",
+    "stylelint-config-standard": "^40.0.0"
   }
 }

package/src/components/accordion.css

@@ -33,133 +33,134 @@
   border: 1px solid var(--ds-color-border);
   border-radius: var(--ds-radius-xl);
   overflow: hidden;
-}
-
-/* ---------------------------------------------------------------------------
-   Item
-   --------------------------------------------------------------------------- */
-
-.ds-accordion__item {
-  border-block-start: 1px solid var(--ds-color-border);
-}
-
-.ds-accordion__item:first-child {
-  border-block-start: 0;
-}
-
-/* ---------------------------------------------------------------------------
-   Trigger (button)
-   --------------------------------------------------------------------------- */
-
-.ds-accordion__trigger {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-  padding: var(--ds-space-4);
-  text-align: start;
-  font-family: var(--ds-font-sans);
-  font-size: var(--ds-text-sm);
-  font-weight: var(--ds-weight-medium);
-  color: var(--ds-color-text);
-  background: transparent;
-  border: 0;
-  cursor: pointer;
-  transition: background-color var(--ds-duration-fast) var(--ds-ease-default);
-}
-
-/* Chevron indicator (CSS border-arrow) */
-.ds-accordion__trigger::after {
-  content: "";
-  display: inline-block;
-  width: 0.5rem;
-  height: 0.5rem;
-  border-inline-end: 2px solid var(--ds-color-text-secondary);
-  border-block-end: 2px solid var(--ds-color-text-secondary);
-  transform: rotate(45deg);
-  flex-shrink: 0;
-  margin-inline-start: var(--ds-space-3);
-  transition: transform var(--ds-duration-fast) var(--ds-ease-default);
-}
-
-.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);
-  scroll-margin-block: var(--ds-space-16, 4rem);
-}
-
-/* Open state – rotate chevron */
-.ds-accordion__item--open .ds-accordion__trigger::after {
-  transform: rotate(225deg);
-}
-
-/* ---------------------------------------------------------------------------
-   Collapsible content wrapper
-   --------------------------------------------------------------------------- */
-
-.ds-accordion__content {
-  max-height: 0;
-  overflow: hidden;
-  transition:
-    max-height var(--ds-duration-normal) var(--ds-ease-default),
-    padding var(--ds-duration-normal) var(--ds-ease-default);
-}
-
-.ds-accordion__item--open .ds-accordion__content {
-  max-height: 80rem;
-}
-
-/* ---------------------------------------------------------------------------
-   Inner body (visible content)
-   --------------------------------------------------------------------------- */
-
-.ds-accordion__body {
-  padding: var(--ds-space-4);
-  padding-block-start: 0;
-  font-size: var(--ds-text-sm);
-  color: var(--ds-color-text-secondary);
-  line-height: var(--ds-leading-relaxed);
-}
-
-/* ==========================================================================
- * Variant: Flush
- * ========================================================================== */
-
-.ds-accordion--flush {
-  border: 0;
-  border-radius: 0;
-}
-
-.ds-accordion--flush .ds-accordion__item {
-  border-block-start: 0;
-  border-block-end: 1px solid var(--ds-color-border);
-}
-
-.ds-accordion--flush .ds-accordion__item:last-child {
-  border-block-end: 0;
-}
-
-/* ==========================================================================
- * Variant: Separated
- * ========================================================================== */
-
-.ds-accordion--separated {
-  border: 0;
-  border-radius: 0;
-  overflow: visible;
-}
-
-.ds-accordion--separated .ds-accordion__item {
-  border: 1px solid var(--ds-color-border);
-  border-radius: var(--ds-radius-xl);
-  margin-block-end: var(--ds-space-3);
-  overflow: hidden;
-}
 
-.ds-accordion--separated .ds-accordion__item:last-child {
-  margin-block-end: 0;
+  /* ---------------------------------------------------------------------------
+     Item
+     --------------------------------------------------------------------------- */
+
+  &__item {
+    border-block-start: 1px solid var(--ds-color-border);
+
+    &:first-child {
+      border-block-start: 0;
+    }
+
+    /* Open state – rotate chevron */
+    &--open .ds-accordion__trigger::after {
+      transform: rotate(225deg);
+    }
+
+    &--open .ds-accordion__content {
+      max-height: 80rem;
+    }
+  }
+
+  /* ---------------------------------------------------------------------------
+     Trigger (button)
+     --------------------------------------------------------------------------- */
+
+  &__trigger {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    padding: var(--ds-space-4);
+    text-align: start;
+    font-family: var(--ds-font-sans);
+    font-size: var(--ds-text-sm);
+    font-weight: var(--ds-weight-medium);
+    color: var(--ds-color-text);
+    background: transparent;
+    border: 0;
+    cursor: pointer;
+    transition: background-color var(--ds-duration-fast) var(--ds-ease-default);
+
+    /* Chevron indicator (CSS border-arrow) */
+    &::after {
+      content: "";
+      display: inline-block;
+      width: 0.5rem;
+      height: 0.5rem;
+      border-inline-end: 2px solid var(--ds-color-text-secondary);
+      border-block-end: 2px solid var(--ds-color-text-secondary);
+      transform: rotate(45deg);
+      flex-shrink: 0;
+      margin-inline-start: var(--ds-space-3);
+      transition: transform var(--ds-duration-fast) var(--ds-ease-default);
+    }
+
+    &:hover {
+      background-color: var(--ds-color-overlay);
+    }
+
+    &:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
+      scroll-margin-block: var(--ds-space-16, 4rem);
+    }
+  }
+
+  /* ---------------------------------------------------------------------------
+     Collapsible content wrapper
+     --------------------------------------------------------------------------- */
+
+  &__content {
+    max-height: 0;
+    overflow: hidden;
+    transition:
+      max-height var(--ds-duration-normal) var(--ds-ease-default),
+      padding var(--ds-duration-normal) var(--ds-ease-default);
+  }
+
+  /* ---------------------------------------------------------------------------
+     Inner body (visible content)
+     --------------------------------------------------------------------------- */
+
+  &__body {
+    padding: var(--ds-space-4);
+    padding-block-start: 0;
+    font-size: var(--ds-text-sm);
+    color: var(--ds-color-text-secondary);
+    line-height: var(--ds-leading-relaxed);
+  }
+
+  /* ==========================================================================
+   * Variant: Flush
+   * ========================================================================== */
+
+  &--flush {
+    border: 0;
+    border-radius: 0;
+
+    & .ds-accordion__item {
+      border-block-start: 0;
+      border-block-end: 1px solid var(--ds-color-border);
+
+      &:last-child {
+        border-block-end: 0;
+      }
+    }
+  }
+
+  /* ==========================================================================
+   * Variant: Separated
+   * ========================================================================== */
+
+  &--separated {
+    border: 0;
+    border-radius: 0;
+    overflow: visible;
+
+    & .ds-accordion__item {
+      border: 1px solid var(--ds-color-border);
+      border-radius: var(--ds-radius-xl);
+      margin-block-end: var(--ds-space-3);
+      overflow: hidden;
+
+      &:last-child {
+        margin-block-end: 0;
+      }
+    }
+  }
 }

package/src/components/alert.css

@@ -18,139 +18,142 @@
   border-radius: var(--ds-radius-lg);
   background-color: var(--ds-color-surface);
   border-inline-start: var(--ds-accent-border-width) solid var(--ds-color-border);
-}
-
-/* --- Semantic Variants --- */
-
-.ds-alert--info {
-  background-color: var(--ds-color-info-subtle);
-  border-color: var(--ds-color-info-border);
-  border-inline-start-color: var(--ds-color-info);
-}
-
-.ds-alert--success {
-  background-color: var(--ds-color-success-subtle);
-  border-color: var(--ds-color-success-border);
-  border-inline-start-color: var(--ds-color-success);
-}
-
-.ds-alert--warning {
-  background-color: var(--ds-color-warning-subtle);
-  border-color: var(--ds-color-warning-border);
-  border-inline-start-color: var(--ds-color-warning);
-}
-
-.ds-alert--error {
-  background-color: var(--ds-color-error-subtle);
-  border-color: var(--ds-color-error-border);
-  border-inline-start-color: var(--ds-color-error);
-}
-
-/* --- Icon --- */
-
-.ds-alert__icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  width: 1.25rem;
-  height: 1.25rem;
-  color: var(--ds-color-text-secondary);
-}
-
-.ds-alert--info .ds-alert__icon    { color: var(--ds-color-info); }
-.ds-alert--success .ds-alert__icon { color: var(--ds-color-success); }
-.ds-alert--warning .ds-alert__icon { color: var(--ds-color-warning); }
-.ds-alert--error .ds-alert__icon   { color: var(--ds-color-error); }
-
-/* --- Content --- */
-
-.ds-alert__content {
-  flex: 1;
-  min-width: 0;
-}
-
-.ds-alert__title {
-  font-family: var(--ds-font-sans);
-  font-size: var(--ds-text-sm);
-  font-weight: var(--ds-weight-medium);
-  line-height: var(--ds-leading-snug);
-  color: var(--ds-color-text);
-}
-
-.ds-alert__description {
-  font-size: var(--ds-text-sm);
-  line-height: var(--ds-leading-normal);
-  color: var(--ds-color-text-secondary);
-  margin-block-start: var(--ds-space-1);
-}
-
-.ds-alert__title + .ds-alert__description {
-  margin-block-start: var(--ds-space-1);
-}
-
-/* --- Close Button --- */
-
-.ds-alert__close {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  width: 1.5rem;
-  height: 1.5rem;
-  padding: 0;
-  border: none;
-  background: none;
-  color: var(--ds-color-text-tertiary);
-  border-radius: var(--ds-radius-sm);
-  cursor: pointer;
-  transition: color var(--ds-duration-fast) var(--ds-ease-default);
-}
-
-.ds-alert__close:hover {
-  color: var(--ds-color-text);
-}
-
-.ds-alert__close:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
-  scroll-margin-block: var(--ds-space-16, 4rem);
-}
-
-/* --- Compact Variant --- */
-
-.ds-alert--compact {
-  padding: var(--ds-space-2) var(--ds-space-3);
-  border-radius: var(--ds-radius-none);
-}
-
-/* --- Banner Variant --- */
-
-.ds-alert--banner {
-  border-radius: var(--ds-radius-none);
-  border-inline-start: none;
-  border-inline-end: none;
-  border-block-start: 1px solid var(--ds-color-border);
-  border-block-end: 1px solid var(--ds-color-border);
-  width: 100%;
-}
-
-.ds-alert--banner.ds-alert--info {
-  border-block-start-color: var(--ds-color-info-border);
-  border-block-end-color: var(--ds-color-info-border);
-}
-
-.ds-alert--banner.ds-alert--success {
-  border-block-start-color: var(--ds-color-success-border);
-  border-block-end-color: var(--ds-color-success-border);
-}
-
-.ds-alert--banner.ds-alert--warning {
-  border-block-start-color: var(--ds-color-warning-border);
-  border-block-end-color: var(--ds-color-warning-border);
-}
 
-.ds-alert--banner.ds-alert--error {
-  border-block-start-color: var(--ds-color-error-border);
-  border-block-end-color: var(--ds-color-error-border);
+  /* --- Semantic Variants --- */
+
+  &--info {
+    background-color: var(--ds-color-info-subtle);
+    border-color: var(--ds-color-info-border);
+    border-inline-start-color: var(--ds-color-info);
+
+    & .ds-alert__icon { color: var(--ds-color-info); }
+  }
+
+  &--success {
+    background-color: var(--ds-color-success-subtle);
+    border-color: var(--ds-color-success-border);
+    border-inline-start-color: var(--ds-color-success);
+
+    & .ds-alert__icon { color: var(--ds-color-success); }
+  }
+
+  &--warning {
+    background-color: var(--ds-color-warning-subtle);
+    border-color: var(--ds-color-warning-border);
+    border-inline-start-color: var(--ds-color-warning);
+
+    & .ds-alert__icon { color: var(--ds-color-warning); }
+  }
+
+  &--error {
+    background-color: var(--ds-color-error-subtle);
+    border-color: var(--ds-color-error-border);
+    border-inline-start-color: var(--ds-color-error);
+
+    & .ds-alert__icon { color: var(--ds-color-error); }
+  }
+
+  /* --- Icon --- */
+
+  &__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: 1.25rem;
+    height: 1.25rem;
+    color: var(--ds-color-text-secondary);
+  }
+
+  /* --- Content --- */
+
+  &__content {
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__title {
+    font-family: var(--ds-font-sans);
+    font-size: var(--ds-text-sm);
+    font-weight: var(--ds-weight-medium);
+    line-height: var(--ds-leading-snug);
+    color: var(--ds-color-text);
+  }
+
+  &__description {
+    font-size: var(--ds-text-sm);
+    line-height: var(--ds-leading-normal);
+    color: var(--ds-color-text-secondary);
+    margin-block-start: var(--ds-space-1);
+  }
+
+  &__title + &__description {
+    margin-block-start: var(--ds-space-1);
+  }
+
+  /* --- Close Button --- */
+
+  &__close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: 1.5rem;
+    height: 1.5rem;
+    padding: 0;
+    border: none;
+    background: none;
+    color: var(--ds-color-text-tertiary);
+    border-radius: var(--ds-radius-sm);
+    cursor: pointer;
+    transition: color var(--ds-duration-fast) var(--ds-ease-default);
+
+    &:hover {
+      color: var(--ds-color-text);
+    }
+
+    &:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
+      scroll-margin-block: var(--ds-space-16, 4rem);
+    }
+  }
+
+  /* --- Compact Variant --- */
+
+  &--compact {
+    padding: var(--ds-space-2) var(--ds-space-3);
+    border-radius: var(--ds-radius-none);
+  }
+
+  /* --- Banner Variant --- */
+
+  &--banner {
+    border-radius: var(--ds-radius-none);
+    border-inline-start: none;
+    border-inline-end: none;
+    border-block-start: 1px solid var(--ds-color-border);
+    border-block-end: 1px solid var(--ds-color-border);
+    width: 100%;
+
+    &.ds-alert--info {
+      border-block-start-color: var(--ds-color-info-border);
+      border-block-end-color: var(--ds-color-info-border);
+    }
+
+    &.ds-alert--success {
+      border-block-start-color: var(--ds-color-success-border);
+      border-block-end-color: var(--ds-color-success-border);
+    }
+
+    &.ds-alert--warning {
+      border-block-start-color: var(--ds-color-warning-border);
+      border-block-end-color: var(--ds-color-warning-border);
+    }
+
+    &.ds-alert--error {
+      border-block-start-color: var(--ds-color-error-border);
+      border-block-end-color: var(--ds-color-error-border);
+    }
+  }
 }