@klodd/ds 3.6.1 → 3.8.0

package/SKILL.md

@@ -60,8 +60,9 @@ cd ~/dev/Ekonom && npm install @klodd/ds@latest && npm run build:ds
 En sprint — oavsett om den innehåller CSS, JS eller bara dokumentation —
 är inte klar förrän:
 1. `npm publish --access public` är kört och versionen syns på registret
-2. `npm install @klodd/ds@latest && npm run build:ds` är kört i båda
-   app-repos
+2. `npm install @klodd/ds@X.Y.Z && npm run build:ds` är kört i båda app-repos
+   (använd explicit versionsnummer, inte @latest — npm-cache kan ligga efter
+   direkt efter publish)
 3. App-commits är pushade
 
 Manuell filsync till app-repos är aldrig ett godkänt alternativ.

package/css/components/chip.css

@@ -117,6 +117,19 @@
   outline-offset: 2px;
 }
 
+.chip-list__delete:active {
+  background: color-mix(in oklch, var(--accent-danger) 25%, transparent);
+  transform: scale(0.95);
+  transition: transform 80ms var(--ease-spring-snappy);
+}
+
+.chip-list__delete:disabled,
+.chip-list__delete[aria-disabled="true"] {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
 .chip-list__add {
   background: transparent;
   border-style: dashed;
@@ -141,6 +154,19 @@
   outline-offset: 2px;
 }
 
+.chip-list__add:active {
+  background: var(--surface-active);
+  transform: scale(0.97);
+  transition: transform 80ms var(--ease-spring-snappy);
+}
+
+.chip-list__add:disabled,
+.chip-list__add[aria-disabled="true"] {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
 
 /* ================================================================
    ==== BRAND-PILL
@@ -271,6 +297,19 @@
   outline-offset: 2px;
 }
 
+.install-chip__install:active {
+  background: var(--surface-active);
+  transform: scale(0.97);
+  transition: transform 80ms var(--ease-spring-snappy);
+}
+
+.install-chip__install:disabled,
+.install-chip__install[aria-disabled="true"] {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
 .install-chip__dismiss {
   background: transparent;
   border: none;
@@ -292,6 +331,19 @@
   outline-offset: 2px;
 }
 
+.install-chip__dismiss:active {
+  background: var(--surface-active);
+  transform: scale(0.97);
+  transition: transform 80ms var(--ease-spring-snappy);
+}
+
+.install-chip__dismiss:disabled,
+.install-chip__dismiss[aria-disabled="true"] {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
 @keyframes install-chip-up {
   from { transform: translateY(calc(100% + 100px)); opacity: 0; }
   to   { transform: translateY(0); opacity: 1; }
@@ -299,4 +351,8 @@
 
 @media (prefers-reduced-motion: reduce) {
   .install-chip { animation: none; }
+  .chip-list__delete:active,
+  .chip-list__add:active,
+  .install-chip__install:active,
+  .install-chip__dismiss:active { transform: none; }
 }

package/css/components/collapsible.css

@@ -4,7 +4,7 @@
    kategori-grupper, FAQ-rader.
 
    Block:
-     .collapsible-card  - root-block (huvud-container)
+     .collapsible  - root-block (huvud-container)
 
    BEM-element av blocket:
      .collapsible__header       - klickbar header (button-element)
@@ -12,16 +12,16 @@
      .collapsible__body         - expanderat innehåll (hidden default)
      .collapsible__chev         - chevron som roterar 180deg
 
-   ANTECKNING (BEM-stam-mismatch, öppen punkt):
-   Blocket heter .collapsible-card men elementen heter .collapsible__X
-   (utan -card-suffix). Två lösningar finns: rename block till
-   .collapsible eller rename element till .collapsible-card__X.
-   Underlag finns i sprint-rapport 2026-05-09. Ingen rename i fas 1.
-
    States:
-     [data-expanded] på .collapsible-card  - JS togglar, roterar __chev 180deg
+     [data-expanded] på .collapsible  - JS togglar, roterar __chev 180deg
+
+   Sprint 2 (3.7.0): block .collapsible-card omdöpt till .collapsible
+   per ADR 0010 (BEM-stam-konsistens med elementen). Plus tillagda
+   :hover/:active/:disabled-states på .collapsible__header per
+   kvalitetsbar regel 8 (komplett state-täckning på interaktiva
+   komponenter).
    ================================================================ */
-.collapsible-card {
+.collapsible {
   background: var(--surface-raised);
   border: 1px solid var(--border-subtle);
   border-radius: var(--radius-20);
@@ -50,6 +50,25 @@
   outline-offset: -2px;
 }
 
+@media (hover: hover) and (pointer: fine) {
+  .collapsible__header:hover {
+    background: var(--surface-hover);
+  }
+}
+
+.collapsible__header:active {
+  background: var(--surface-active);
+  transform: scale(0.99);
+  transition: transform 80ms var(--ease-spring-snappy);
+}
+
+.collapsible__header:disabled,
+.collapsible__header[aria-disabled="true"] {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
 .collapsible__header-text {
   flex: 1;
   min-width: 0;
@@ -62,7 +81,7 @@
   transition: transform var(--dur-medium) var(--ease-default);
 }
 
-.collapsible-card[data-expanded] .collapsible__chev {
+.collapsible[data-expanded] .collapsible__chev {
   transform: rotate(180deg);
 }
 
@@ -72,4 +91,5 @@
 
 @media (prefers-reduced-motion: reduce) {
   .collapsible__chev { transition: none; }
+  .collapsible__header:active { transform: none; }
 }

package/css/components/list-row.css

@@ -128,3 +128,19 @@
   outline: 2px solid var(--border-focus);
   outline-offset: 2px;
 }
+
+.list-row--clickable:active {
+  background: var(--surface-active);
+  transform: scale(0.99);
+  transition: transform 80ms var(--ease-spring-snappy);
+}
+
+.list-row--clickable[aria-disabled="true"] {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .list-row--clickable:active { transform: none; }
+}

package/css/components/nav.css

@@ -74,6 +74,18 @@
   outline-offset: 2px;
 }
 
+.bottom-nav__item:active {
+  background: var(--surface-active);
+  transform: scale(0.94);
+  transition: transform 80ms var(--ease-spring-snappy);
+}
+
+.bottom-nav__item[aria-disabled="true"] {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
 .bottom-nav__item--active {
   color: var(--accent-text);
 }
@@ -163,3 +175,7 @@
   outline: 2px solid var(--border-focus);
   outline-offset: 2px;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .bottom-nav__item:active { transform: none; }
+}

package/css/components/progress.css

@@ -1,28 +1,27 @@
 /* ================================================================
    components/progress.css
-   Linjär progress-indikator. Används för budget-burndown, upload-
-   status, multi-step-flows.
+   Linjär progress-indikator. Status-modifiers for fargning.
 
    Blocks:
-     .progress      - track (wrapper, surface-raised bg)
-     .progress-bar  - fyllning (eget block, alltid DOM-child av .progress)
+     .progress  - track (wrapper)
 
-   HTML-relationer:
-     .progress-bar placeras alltid som child inuti .progress i HTML.
-     CSS-mässigt fristående block - flat-namnet behålls av historiska
-     skäl (inte .progress__bar). Se references/03-quality-bar.md
-     regel 11 om fil med flera root-blocks.
+   Element:
+     .progress__bar  - fyllning (alltid DOM-child av .progress)
 
    Modifiers:
-     .progress-bar  --success/-warning/-danger
+     .progress__bar  --success/-warning/-danger
 
    Bredd via CSP-safe pattern (bar-styles.js applicerar style.width
-   från data-bar-width vid runtime):
+   fran data-bar-width vid runtime):
      <div class="progress">
-       <div class="progress-bar progress-bar--warning"
+       <div class="progress__bar progress__bar--warning"
             data-bar-width="73%"></div>
      </div>
 
+   Sprint 4 (3.8.0): .progress-bar omdopt till BEM-element .progress__bar
+   per kvalitetsbar regel 1 (BEM-konvention). 0 produktions-templates
+   paverkades - .progress-bar fanns bara i design-showcase.
+
    Respekterar prefers-reduced-motion (transition tas bort).
    ================================================================ */
 .progress {
@@ -33,19 +32,19 @@
   overflow: hidden;
 }
 
-.progress-bar {
+.progress__bar {
   height: 100%;
   background: var(--accent-9);
   border-radius: var(--radius-full);
   transition: width var(--dur-base) var(--ease-out);
 }
 
-.progress-bar--success { background: var(--bg-success); }
-.progress-bar--warning { background: var(--bg-warning); }
-.progress-bar--danger  { background: var(--bg-danger); }
+.progress__bar--success { background: var(--bg-success); }
+.progress__bar--warning { background: var(--bg-warning); }
+.progress__bar--danger  { background: var(--bg-danger); }
 
 @media (prefers-reduced-motion: reduce) {
-  .progress-bar {
+  .progress__bar {
     transition: none;
   }
 }

package/css/components/setting-row.css

@@ -63,6 +63,13 @@
   outline-offset: -2px;
 }
 
+.setting-row:disabled,
+.setting-row[aria-disabled="true"] {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
 .setting-row__text {
   display: flex;
   flex-direction: column;

package/css/components/swipe-stack.css

@@ -183,6 +183,13 @@
   outline-offset: 2px;
 }
 
+.swipe-action-btn:disabled,
+.swipe-action-btn[aria-disabled="true"] {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
 .swipe-action-btn--save  { color: var(--positive); }
 .swipe-action-btn--dismiss { color: var(--negative); }
 

package/css/components/table.css

@@ -1,6 +1,25 @@
 /* ================================================================
    components/table.css
    Tabell med header + rader. Tabular-nums for nummerkolumner.
+
+   Blocks:
+     .table  - root-block (wrapper-tabell)
+
+   Element-selectors (descendant):
+     .table th        - kolumnrubriker (uppercase, muted)
+     .table td        - dataceller
+     .table td.num,
+     .table th.num    - nummerkolumner (tabular-nums, hoger-justerad)
+
+   States (by design):
+     .table tbody tr:hover  - row-hover via @media (hover: hover) -
+     komponentens enda interaktiva state.
+
+   Tabellrader ar INTE klickbara per default. Om interaktiv tabell
+   behovs - introducera explicit modifier-klass (t.ex. .table--clickable
+   eller .tr--clickable) med :active/:focus-visible/:disabled. Native
+   <tr> har inga semantiska disabled/focus-states, sa modifier-klassen
+   maste appliceras tillsammans med tabindex pa raden.
    ================================================================ */
 .table {
   width: 100%;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@klodd/ds",
-  "version": "3.6.1",
+  "version": "3.8.0",
   "description": "Klodd Design System - shared tokens, typography, components and JS for Jubb, Ekonom, and future apps. v3.5.3 (2026-05-09): tillagg .heading (17px medium tight) i base/typography.css for dialog-titlar och sheet-rubriker. Tackar luckan mellan .heading-2 (18px) och .heading-3 (15px) - matchar Ekonoms gamla .heading-class.",
   "main": "css/index.css",
   "bin": {

package/references/02-components.md

@@ -94,8 +94,9 @@ För varje entry gäller:
 - **Tokens:** `--border-subtle/-default`
 
 ### progress (`progress.css`)
-- **Blocks:** `.progress` (track), `.progress-bar` (fyllning, alltid DOM-child av `.progress`)
-- **Modifiers:** `.progress-bar--success/-warning/-danger`
+- **Blocks:** `.progress` (track)
+- **Element:** `.progress__bar` (fyllning, alltid DOM-child av `.progress`)
+- **Modifiers:** `.progress__bar--success/-warning/-danger`
 - **Anvand:** Linjar progress med data-bar-width-pattern (CSP-safe via bar-styles.js)
 - **INTE:** Progress med text-overlay (eget komposit-pattern)
 - **Tokens:** `--surface-raised`, `--accent-9`, `--bg-success/-warning/-danger`. Respekterar `prefers-reduced-motion`.
@@ -211,9 +212,11 @@ För varje entry gäller:
 
 ### table (`table.css`)
 - **Blocks:** `.table`
-- **Element:** `.table .num` (descendant-selector)
+- **Element-selectors (descendant):** `.table th`, `.table td`, `.table td.num`, `.table th.num`
+- **States:** `.table tbody tr:hover` (via `@media hover: hover`) - enda interaktiva state by design
 - **Anvand:** Tabell med tabular-nums-stod
 - **INTE:** Layout-grid (anvand CSS Grid utility)
+- **Special:** Hover ar enda interaktiva state by design. Tabellrader ar INTE klickbara per default. Om interaktiv tabell behovs - introducera explicit modifier-klass (t.ex. `.table--clickable`) med `:active`/`:focus-visible`/`:disabled` plus `tabindex` pa raden.
 
 ### auth (`auth.css`)
 - **Blocks:** `.auth-container`