@digiko-npm/designsystem 0.7.2 → 0.8.1

package/src/components/skeleton.css

@@ -8,79 +8,79 @@
   background-color: var(--ds-color-bg-muted);
   border-radius: var(--ds-radius-md);
   animation: ds-skeleton-pulse var(--ds-duration-slower) var(--ds-ease-default) infinite;
-}
 
-/* --- Text variants --- */
+  /* --- Text variants --- */
 
-.ds-skeleton--text {
-  height: 1rem;
-  width: 100%;
-  border-radius: var(--ds-radius-sm);
-  margin-block-end: var(--ds-space-2);
-}
+  &--text {
+    height: 1rem;
+    width: 100%;
+    border-radius: var(--ds-radius-sm);
+    margin-block-end: var(--ds-space-2);
+  }
 
-.ds-skeleton--text-sm {
-  height: 0.75rem;
-  width: 100%;
-  border-radius: var(--ds-radius-sm);
-  margin-block-end: var(--ds-space-2);
-}
+  &--text-sm {
+    height: 0.75rem;
+    width: 100%;
+    border-radius: var(--ds-radius-sm);
+    margin-block-end: var(--ds-space-2);
+  }
 
-.ds-skeleton--text-lg {
-  height: 1.5rem;
-  width: 100%;
-  border-radius: var(--ds-radius-sm);
-  margin-block-end: var(--ds-space-2);
-}
+  &--text-lg {
+    height: 1.5rem;
+    width: 100%;
+    border-radius: var(--ds-radius-sm);
+    margin-block-end: var(--ds-space-2);
+  }
 
-.ds-skeleton--heading {
-  height: 2rem;
-  width: 60%;
-  border-radius: var(--ds-radius-md);
-  margin-block-end: var(--ds-space-3);
-}
+  &--heading {
+    height: 2rem;
+    width: 60%;
+    border-radius: var(--ds-radius-md);
+    margin-block-end: var(--ds-space-3);
+  }
 
-/* --- Shape variants --- */
+  /* --- Shape variants --- */
 
-.ds-skeleton--circle,
-.ds-skeleton--avatar {
-  width: 2.5rem;
-  height: 2.5rem;
-  border-radius: var(--ds-radius-full);
-}
+  &--circle,
+  &--avatar {
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: var(--ds-radius-full);
+  }
 
-.ds-skeleton--card {
-  height: 12rem;
-  width: 100%;
-  border-radius: var(--ds-radius-xl);
-}
+  &--card {
+    height: 12rem;
+    width: 100%;
+    border-radius: var(--ds-radius-xl);
+  }
 
-/* --- UI element variants --- */
+  /* --- UI element variants --- */
 
-.ds-skeleton--btn {
-  height: 2.25rem;
-  width: 6rem;
-  border-radius: var(--ds-radius-lg);
-}
+  &--btn {
+    height: 2.25rem;
+    width: 6rem;
+    border-radius: var(--ds-radius-lg);
+  }
 
-.ds-skeleton--input {
-  height: 2.5rem;
-  width: 100%;
-  border-radius: var(--ds-radius-lg);
-}
+  &--input {
+    height: 2.5rem;
+    width: 100%;
+    border-radius: var(--ds-radius-lg);
+  }
 
-/* --- Width modifiers --- */
+  /* --- Width modifiers --- */
 
-.ds-skeleton--w-1\/2 {
-  width: 50%;
-}
+  &--w-1\/2 {
+    width: 50%;
+  }
 
-.ds-skeleton--w-3\/4 {
-  width: 75%;
-}
+  &--w-3\/4 {
+    width: 75%;
+  }
 
-.ds-skeleton--w-1\/3 {
-  width: 33%;
+  &--w-1\/3 {
+    width: 33%;
+  }
 }
 
 /* --- Pulse animation --- */

package/src/components/slider.css

@@ -27,105 +27,107 @@
 .ds-slider {
   width: 100%;
   position: relative;
-}
-
-.ds-slider input[type="range"] {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  width: 100%;
-  height: 0.375rem;
-  background-color: var(--ds-color-bg-muted);
-  border-radius: var(--ds-radius-full);
-  outline: none;
-  cursor: pointer;
-}
-
-/* Webkit thumb */
-.ds-slider input[type="range"]::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  appearance: none;
-  width: 1.5rem; /* WCAG 2.5.8: minimum 24px target */
-  height: 1.5rem;
-  border-radius: var(--ds-radius-full);
-  background-color: var(--ds-color-inverted);
-  border: 2px solid var(--ds-color-surface);
-  box-shadow: var(--ds-shadow-sm);
-  cursor: pointer;
-  transition: transform var(--ds-duration-fast) var(--ds-ease);
-}
-
-/* Firefox thumb */
-.ds-slider input[type="range"]::-moz-range-thumb {
-  width: 1.5rem; /* WCAG 2.5.8: minimum 24px target */
-  height: 1.5rem;
-  border-radius: var(--ds-radius-full);
-  background-color: var(--ds-color-inverted);
-  border: 2px solid var(--ds-color-surface);
-  box-shadow: var(--ds-shadow-sm);
-  cursor: pointer;
-  transition: transform var(--ds-duration-fast) var(--ds-ease);
-}
-
-/* Hover: scale up thumb */
-.ds-slider input[type="range"]:hover::-webkit-slider-thumb {
-  transform: scale(1.1);
-}
-
-.ds-slider input[type="range"]:hover::-moz-range-thumb {
-  transform: scale(1.1);
-}
-
-/* Focus ring */
-.ds-slider input[type="range"]:focus-visible::-webkit-slider-thumb {
-  outline: var(--ds-ring-width) solid var(--ds-ring-color);
-  outline-offset: 0;
-  scroll-margin-block: var(--ds-space-16, 4rem);
-}
-
-.ds-slider input[type="range"]:focus-visible::-moz-range-thumb {
-  outline: var(--ds-ring-width) solid var(--ds-ring-color);
-  outline-offset: 0;
-}
-
-/* Labels row */
-.ds-slider__labels {
-  display: flex;
-  justify-content: space-between;
-  font-size: var(--ds-text-xs);
-  color: var(--ds-color-text-tertiary);
-  margin-block-start: var(--ds-space-1);
-}
-
-/* Current value display */
-.ds-slider__value {
-  font-size: var(--ds-text-sm);
-  font-weight: var(--ds-weight-medium);
-  color: var(--ds-color-text);
-}
-
-/* Size: small */
-.ds-slider--sm input[type="range"] {
-  height: 0.25rem;
-}
-
-.ds-slider--sm input[type="range"]::-webkit-slider-thumb {
-  width: 1rem;
-  height: 1rem;
-}
-
-.ds-slider--sm input[type="range"]::-moz-range-thumb {
-  width: 1rem;
-  height: 1rem;
-}
-
-/* Disabled state */
-.ds-slider--disabled {
-  opacity: var(--ds-opacity-disabled);
-  cursor: not-allowed;
-}
 
-.ds-slider--disabled input[type="range"] {
-  cursor: not-allowed;
-  pointer-events: none;
+  & input[type="range"] {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    width: 100%;
+    height: 0.375rem;
+    background-color: var(--ds-color-bg-muted);
+    border-radius: var(--ds-radius-full);
+    outline: none;
+    cursor: pointer;
+
+    /* Webkit thumb */
+    &::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      appearance: none;
+      width: 1.5rem; /* WCAG 2.5.8: minimum 24px target */
+      height: 1.5rem;
+      border-radius: var(--ds-radius-full);
+      background-color: var(--ds-color-inverted);
+      border: 2px solid var(--ds-color-surface);
+      box-shadow: var(--ds-shadow-sm);
+      cursor: pointer;
+      transition: transform var(--ds-duration-fast) var(--ds-ease);
+    }
+
+    /* Firefox thumb */
+    &::-moz-range-thumb {
+      width: 1.5rem; /* WCAG 2.5.8: minimum 24px target */
+      height: 1.5rem;
+      border-radius: var(--ds-radius-full);
+      background-color: var(--ds-color-inverted);
+      border: 2px solid var(--ds-color-surface);
+      box-shadow: var(--ds-shadow-sm);
+      cursor: pointer;
+      transition: transform var(--ds-duration-fast) var(--ds-ease);
+    }
+
+    /* Hover: scale up thumb */
+    &:hover::-webkit-slider-thumb {
+      transform: scale(1.1);
+    }
+
+    &:hover::-moz-range-thumb {
+      transform: scale(1.1);
+    }
+
+    /* Focus ring */
+    &:focus-visible::-webkit-slider-thumb {
+      outline: var(--ds-ring-width) solid var(--ds-ring-color);
+      outline-offset: 0;
+      scroll-margin-block: var(--ds-space-16, 4rem);
+    }
+
+    &:focus-visible::-moz-range-thumb {
+      outline: var(--ds-ring-width) solid var(--ds-ring-color);
+      outline-offset: 0;
+    }
+  }
+
+  /* Labels row */
+  &__labels {
+    display: flex;
+    justify-content: space-between;
+    font-size: var(--ds-text-xs);
+    color: var(--ds-color-text-tertiary);
+    margin-block-start: var(--ds-space-1);
+  }
+
+  /* Current value display */
+  &__value {
+    font-size: var(--ds-text-sm);
+    font-weight: var(--ds-weight-medium);
+    color: var(--ds-color-text);
+  }
+
+  /* Size: small */
+  &--sm {
+    & input[type="range"] {
+      height: 0.25rem;
+
+      &::-webkit-slider-thumb {
+        width: 1rem;
+        height: 1rem;
+      }
+
+      &::-moz-range-thumb {
+        width: 1rem;
+        height: 1rem;
+      }
+    }
+  }
+
+  /* Disabled state */
+  &--disabled {
+    opacity: var(--ds-opacity-disabled);
+    cursor: not-allowed;
+
+    & input[type="range"] {
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+  }
 }

package/src/components/sortable.css

@@ -11,58 +11,57 @@
    - Keyboard: handle should support ArrowUp/Down + Enter to move items
    ========================================================================== */
 
-/* --- Grip handle: visible on row hover, grab cursor --- */
-.ds-sortable__handle {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 1.5rem; /* WCAG 2.5.8: minimum 24px target */
-  min-height: 1.5rem;
-  padding: var(--ds-space-1);
-  color: var(--ds-color-text-tertiary);
-  cursor: grab;
-  border-radius: var(--ds-radius-sm);
-  opacity: 0;
-  transition:
-    opacity var(--ds-duration-fast) var(--ds-ease-default),
-    color var(--ds-duration-fast) var(--ds-ease-default);
-}
+.ds-sortable {
 
-.ds-sortable__handle:active {
-  cursor: grabbing;
-}
+  /* --- Dragging state: applied to the row being dragged --- */
+  &--dragging {
+    opacity: 0.5;
+    background-color: var(--ds-color-surface);
+  }
 
-/* Show handle on row hover */
-tr:hover .ds-sortable__handle,
-.ds-sortable-row:hover .ds-sortable__handle,
-.ds-sortable__handle:focus-visible {
-  opacity: 1;
-}
+  /* --- Drop target: applied to the row being hovered over --- */
+  &--over {
+    box-shadow: inset 0 -2px 0 var(--ds-color-interactive);
+  }
 
-.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);
-  scroll-margin-block: var(--ds-space-16, 4rem);
-}
+  /* --- Grip handle: visible on row hover, grab cursor --- */
+  &__handle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 1.5rem; /* WCAG 2.5.8: minimum 24px target */
+    min-height: 1.5rem;
+    padding: var(--ds-space-1);
+    color: var(--ds-color-text-tertiary);
+    cursor: grab;
+    border-radius: var(--ds-radius-sm);
+    opacity: 0;
+    transition:
+      opacity var(--ds-duration-fast) var(--ds-ease-default),
+      color var(--ds-duration-fast) var(--ds-ease-default);
 
-tr:hover .ds-sortable__handle,
-.ds-sortable-row:hover .ds-sortable__handle {
-  color: var(--ds-color-text-secondary);
-}
+    &:active {
+      cursor: grabbing;
+    }
 
-/* --- Dragging state: applied to the row being dragged --- */
-.ds-sortable--dragging {
-  opacity: 0.5;
-  background-color: var(--ds-color-surface);
-}
+    &:focus-visible {
+      opacity: 1;
+      outline: none;
+      box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
+      border-radius: var(--ds-radius-sm);
+      scroll-margin-block: var(--ds-space-16, 4rem);
+    }
 
-/* --- Drop target: applied to the row being hovered over --- */
-.ds-sortable--over {
-  box-shadow: inset 0 -2px 0 var(--ds-color-interactive);
+    /* --- Always-visible handle variant --- */
+    &--visible {
+      opacity: 1;
+    }
+  }
 }
 
-/* --- Always-visible handle variant --- */
-.ds-sortable__handle--visible {
+/* Show handle on row hover */
+tr:hover .ds-sortable__handle,
+.ds-sortable-row:hover .ds-sortable__handle {
   opacity: 1;
+  color: var(--ds-color-text-secondary);
 }

package/src/components/spinner.css

@@ -26,35 +26,35 @@
   border-top-color: var(--ds-color-interactive);
   border-radius: var(--ds-radius-full);
   animation: ds-spin 0.8s linear infinite;
+
+  /* Sizes */
+  &--sm {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  &--md {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+
+  &--lg {
+    width: 2rem;
+    height: 2rem;
+  }
+
+  /* Color variants */
+  &--muted {
+    border-color: var(--ds-color-inverted);
+    border-top-color: transparent;
+  }
+
+  &--light {
+    border-color: var(--ds-color-on-inverted);
+    border-top-color: transparent;
+  }
 }
 
 @keyframes ds-spin {
   to { transform: rotate(360deg); }
 }
-
-/* Sizes */
-.ds-spinner--sm {
-  width: 1rem;
-  height: 1rem;
-}
-
-.ds-spinner--md {
-  width: 1.25rem;
-  height: 1.25rem;
-}
-
-.ds-spinner--lg {
-  width: 2rem;
-  height: 2rem;
-}
-
-/* Color variants */
-.ds-spinner--muted {
-  border-color: var(--ds-color-inverted);
-  border-top-color: transparent;
-}
-
-.ds-spinner--light {
-  border-color: var(--ds-color-on-inverted);
-  border-top-color: transparent;
-}

package/src/components/star-rating.css

@@ -0,0 +1,121 @@
+/* ==========================================================================
+   Component: Star Rating
+   Display or input star ratings. CSS-only styling with SVG/icon stars.
+
+   ARIA requirements (consumer responsibility):
+   - Display: aria-label="Rating: 4 out of 5"
+   - Input: role="radiogroup", aria-label="Rate this item"
+   - Each star input: role="radio", aria-checked="true|false", aria-label="[N] stars"
+   - Keyboard: ArrowLeft/Right to change rating
+
+   Usage (display):
+     <div class="ds-star-rating" aria-label="Rating: 4 out of 5">
+       <span class="ds-star-rating__star ds-star-rating__star--filled">★</span>
+       <span class="ds-star-rating__star ds-star-rating__star--filled">★</span>
+       <span class="ds-star-rating__star ds-star-rating__star--filled">★</span>
+       <span class="ds-star-rating__star ds-star-rating__star--filled">★</span>
+       <span class="ds-star-rating__star">★</span>
+     </div>
+
+   Usage (input):
+     <div class="ds-star-rating ds-star-rating--interactive" role="radiogroup">
+       <button class="ds-star-rating__star ds-star-rating__star--filled" role="radio">★</button>
+       ...
+     </div>
+
+   Modifiers:
+     .ds-star-rating--interactive   — Hoverable stars for input
+     .ds-star-rating--sm            — Smaller stars
+     .ds-star-rating--lg            — Larger stars
+   ========================================================================== */
+
+.ds-star-rating {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ds-space-0-5);
+
+  &__star {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.5rem;
+    height: 1.5rem;
+    color: var(--ds-color-border);
+    font-size: var(--ds-text-lg);
+    line-height: 1;
+    border: none;
+    background: transparent;
+    padding: 0;
+    transition: color var(--ds-duration-fast) var(--ds-ease-default);
+
+    &--filled {
+      color: var(--ds-color-warning);
+    }
+
+    &--half {
+      position: relative;
+      color: var(--ds-color-border);
+
+      &::before {
+        content: "★";
+        position: absolute;
+        inset-inline-start: 0;
+        width: 50%;
+        overflow: hidden;
+        color: var(--ds-color-warning);
+      }
+    }
+  }
+
+  /* --- Interactive (input mode) --- */
+  &--interactive &__star {
+    cursor: pointer;
+
+    &:hover {
+      color: var(--ds-color-warning);
+      transform: scale(1.15);
+    }
+
+    &:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
+      border-radius: var(--ds-radius-sm);
+      scroll-margin-block: var(--ds-space-16, 4rem);
+    }
+  }
+
+  /* --- Small --- */
+  &--sm &__star {
+    width: 1rem;
+    height: 1rem;
+    font-size: var(--ds-text-sm);
+  }
+
+  &--sm {
+    gap: 0;
+  }
+
+  /* --- Large --- */
+  &--lg &__star {
+    width: 2rem;
+    height: 2rem;
+    font-size: var(--ds-text-2xl);
+  }
+
+  &--lg {
+    gap: var(--ds-space-1);
+  }
+
+  /* --- Value text --- */
+  &__value {
+    margin-inline-start: var(--ds-space-1-5);
+    font-size: var(--ds-text-sm);
+    font-weight: var(--ds-weight-medium);
+    color: var(--ds-color-text);
+  }
+
+  &__count {
+    font-size: var(--ds-text-xs);
+    color: var(--ds-color-text-tertiary);
+  }
+}