@klodd/ds 3.21.4 → 3.21.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@klodd/ds",
-  "version": "3.21.4",
+  "version": "3.21.5",
   "description": "Klodd shared design system - tokens, components, JS",
   "main": "css/index.css",
   "bin": {

package/references/04-locked-decisions/0017-padding-scale-extended.md

@@ -0,0 +1,132 @@
+# 0017 - Padding-skala utökad till 10 värden + per-komponent-låsning
+
+## Status
+Locked.
+
+## Context
+
+DESIGN-LANGUAGE.md sektion 4 (etablerad 2026-05-12 via ADR 0013)
+specificerade en padding-skala om 6 värden: `4, 8, 12, 16, 20, 24`,
+med 2, 6, 10, 14, 18, 22, 28, 32 listade som "förbjudna i komponent-
+CSS" (men reserverade för layout-grid).
+
+Audit 2026-05-14 (Ekonom UI/UX/CSS-cykel) visade att paketets egna
+komponenter använder "förbjudna" värden brett:
+
+| Fil | Padding-värden |
+|---|---|
+| `setting-row.css:32` | `var(--space-14) 0` |
+| `list-row.css:37` | `var(--space-10) 0` |
+| `hub-card.css:32` | `var(--space-14) var(--space-16)` |
+| `panel.css:15` | `var(--space-16) var(--space-18)` |
+| `panel.css:94` | `0 var(--space-10)` |
+| `banner.css:12` | `var(--space-14) var(--space-16)` |
+| `sheet-content.css:110` | `0 var(--space-14)` |
+| `sheet-content.css:129` | `padding-right: var(--space-32)` |
+| `sheet-content.css:136` | `var(--space-12) var(--space-14)` |
+| `sheet-content.css:302` | `var(--space-6) 0` |
+| `sheet-content.css:327` | `padding-top: var(--space-14)` |
+
+Detta är **inte** slarv - värdena är medvetna iOS-list-row-paddings
+som matchar Apples HIG-konventioner (44px tap-target med text-line
+ger 50-56px höjd via padding 10-14). Att tighta paketet till 4/8/12/
+16/20/24 skulle ge ojämn rytm där iOS-konventionen kräver mellan-
+värden.
+
+Per Calle 2026-05-14: "Det är ok att ändra regler och göra det bättre,
+men då måste det implementeras brett inom designsystemet och de appar
+som använder det."
+
+## Decision
+
+**Padding-skalan utökas till 10 värden + per-komponent-låsningar i
+ADR-katalogen.**
+
+### Tillåtna värden i komponent-CSS
+
+```
+4, 6, 8, 10, 12, 14, 16, 18, 20, 24
+```
+
+Plus 28, 32, 40+ för layout-grid och stora section-breaks.
+
+### Per-komponent-typ-låsningar
+
+Etablerade efter audit av nuvarande paket (frusen state 2026-05-14):
+
+| Komponent-typ | V-padding | H-padding | Källa |
+|---|---|---|---|
+| `.list-row` | 10 | 0 | `list-row.css:37` |
+| `.setting-row` | 14 | 0 | `setting-row.css:32` |
+| `.banner` | 14 | 16 | `banner.css:12` |
+| `.card`, `.card__body`, `.card__footer` | 16 | 16 | `card.css` |
+| `.panel` | 16 | 18 | `panel.css:15` |
+| `.hub-card` | 14 | 16 | `hub-card.css:32` |
+| `.btn` (default) | 12 | 16 | `button.css` |
+| `.btn--sm` | 8 | 12 | `button.css` |
+| `.input` | 12 | 14 | `input.css` |
+| `.input` (compact) | 6 | 10 | `input.css` (compact) |
+| `.sheet__field-label` | 0 14 | - | `sheet-content.css:110` |
+| `.sheet__item` | 12 | 14 | `sheet-content.css:136/206` |
+| `.sheet__form` | 6 | 0 | `sheet-content.css:302` |
+| Tooltip | 8 | 12 | `tooltip.css` |
+| `.toast` (paket) | 12 | 16 | `feedback.css` |
+
+App-domain-komponenter följer samma per-typ-värden om de spelar samma
+roll. Avvikelser kräver dokumentation.
+
+### Förbjudet (oförändrat)
+
+Värden 2, 22, 26, 30 är fortfarande "förbjudna" i komponent-CSS -
+oanvända i paketet och brott mot rytmen. 28 + 32+ är layout-tokens,
+inte komponent-padding.
+
+### Komposita värden (TRBL)
+
+Symmetric preferred: `padding: 16px`. Vertical-horizontal:
+`padding: 14px 16px`. Asymmetric kräver kommentar med motivation
+(hero `padding: 20px 0 24px` är dokumenterat undantag för alignment).
+
+## Konsekvenser
+
+**Bra:**
+- Doktrinen matchar faktisk paket-implementation
+- iOS-konventionen (HIG 44x44 tap-target med 10-14px padding) respekteras
+- Ekonom + Jubb-domain kan följa samma per-typ-värden utan migration
+- Future-CC har tabell att referera istället för regelläsning
+- Stylelint-plugin (Sprint 5) kan validera mot 10-värdes-skala +
+  per-komponent-låsningar
+
+**Trade-offs:**
+- Ramverket är inte längre 6-värdes-tightat
+- Per-komponent-låsningarna ökar ADR-underhåll: ny komponent-typ
+  kräver ADR-uppdatering eller acceptans av "free padding"
+- App-domain-CSS som följde 4/8/12/16/20/24 strikt kan se ut som
+  underanvändning av tillgängliga värden
+
+## Migration
+
+**Ingen migration krävs.** Paketet är redan i låst state. App-domain-CSS
+(Ekonoms ds/ekonom.css + Jubbs jubb.css/jubb-domain.css) följer redan
+samma värden de facto.
+
+Sprint C i Ekonom-auditen 2026-05-14 skippades baserat på denna analys -
+fyndet var falskt-positivt eftersom doktrinen var aspirationell utan
+paket-verifiering.
+
+## Stylelint-plugin (Sprint 5, framtida)
+
+Validera:
+- `padding`-värden använder `var(--space-N)` där N är 4/6/8/10/12/14/
+  16/18/20/24
+- Per-komponent-typ-låsningar via selector-pattern (t.ex. `.list-row`-
+  rules ska ha padding-y 10)
+- Varning vid avvikelse från ADR-tabellen
+
+## References
+
+- DESIGN-LANGUAGE.md sektion 4 (uppdaterad 2026-05-14)
+- ADR 0013 (visual-coherence-doctrine) - tidigare 6-värdes-regel
+- Ekonom DECISIONS 2026-05-14 (audit-cykel skip-rationale för Sprint C)
+- Audit-not: paketets faktiska padding-värden inventoradde 2026-05-14
+  via `grep -rE "padding[^:]*:\s*[^;]*--space-(2|6|10|14|18|22|28|32)\b"`

package/references/DESIGN-LANGUAGE.md

@@ -147,29 +147,67 @@ container (hero, page-header).
 - Hardkodad font-size för titel-element (använd `.hero__amount`
   eller `.page-title`)
 
-## 4. Padding-rytm (sex värden)
+## 4. Padding-rytm (tio värden + per-komponent-låsningar)
 
-**Regel:** all padding i komponent-CSS ska vara EN av:
+**Regel:** padding i komponent-CSS ska vara EN av tio tillåtna tokens.
+Per-komponent-typ är värdena låsta i ADR 0017 så samma komponent-typ
+har samma padding över paket och appar.
 
-| Värde | Token | Användning |
+### Tillåtna värden
+
+| Värde | Token | Typisk användning |
 |---|---|---|
-| 4px | `--space-4` | Mini-gaps, badge inner, tab-spacing |
-| 8px | `--space-8` | Standard gap, icon-margin |
-| 12px | `--space-12` | List-row vertical, button-internal |
-| 16px | `--space-16` | Card internal, panel internal, hero |
+| 4px | `--space-4` | Mini-gaps, badge inner |
+| 6px | `--space-6` | Compact form-spacing, sheet-form vertical |
+| 8px | `--space-8` | Standard gap, btn--sm v-padding, icon-margin |
+| 10px | `--space-10` | List-row v-padding, panel inner-h |
+| 12px | `--space-12` | Btn default v-padding, input v-padding |
+| 14px | `--space-14` | Setting-row v-padding, banner/hub-card v-padding, input h |
+| 16px | `--space-16` | Card internal, panel inner-h, hero, banner h |
+| 18px | `--space-18` | Panel h-padding |
 | 20px | `--space-20` | Section gap, hero-internal vertical |
 | 24px | `--space-24` | Major section break |
 
-**Förbjudet i komponent-CSS:** 2, 6, 10, 14, 18, 22, 28, 32-värden
-direkt. (Finns som tokens men reserverat för layout-grid och spacing
-mellan section-block, inte inom komponenter.)
+### Per-komponent-typ-låsningar (ADR 0017)
+
+| Komponent-typ | V-padding | H-padding |
+|---|---|---|
+| `.list-row` | 10 | 0 |
+| `.setting-row` | 14 | 0 |
+| `.banner` | 14 | 16 |
+| `.card` | 16 | 16 |
+| `.panel` | 16 | 18 |
+| `.hub-card` | 14 | 16 |
+| `.btn` (default) | 12 | 16 |
+| `.btn--sm` | 8 | 12 |
+| `.input` | 12 | 14 |
+| `.input` (compact) | 6 | 10 |
+| `.sheet__item` | 12 | 14 |
+| `.tooltip` | 8 | 12 |
+| `.toast` (paket) | 12 | 16 |
+
+App-domain-komponenter som spelar samma roll följer samma värden.
+
+### Förbjudet
+
+Värden 2, 22, 26, 30 i komponent-CSS - oanvända i paketet, bryter
+rytmen. 28+ är layout-tokens, inte komponent-padding.
+
+### Sammansatta padding (TRBL)
 
-**Sammansatta padding (TRBL)**:
 - Symmetric preferred: `padding: 16px` ✓
 - Vertical-horizontal: `padding: 12px 16px` ✓
 - Asymmetric only with rationale: `padding: 20px 0 24px` (hero) -
   kommentar med motivering krävs
 
+### Etablerad 2026-05-14
+
+Tidigare 6-värdes-skalan (ADR 0013) var aspirationell utan paket-
+verifiering. Per Calle: "Det är ok att ändra regler och göra det
+bättre, men då måste det implementeras brett." Ny skala matchar
+faktisk paket-implementation. Se ADR 0017 för rationale + tabellen
+över per-komponent-låsningar.
+
 ## 5. Font-size-skala (åtta värden)
 
 **Regel:** font-size i komponent-CSS ska vara EN av token-skalan: