@klodd/ds 3.21.4 → 3.21.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@klodd/ds",
-  "version": "3.21.4",
+  "version": "3.21.6",
   "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/04-locked-decisions/0018-outline-offset-list-rows.md

@@ -0,0 +1,122 @@
+# 0018 - Outline-offset: list-rows får använda -2px (anti-clipping)
+
+## Status
+Locked.
+
+## Context
+
+DESIGN-LANGUAGE.md sektion 9 (etablerad 2026-05-12 via ADR 0013)
+specificerade `outline: 2px solid var(--border-focus); outline-offset: 2px`
+som regel för alla interaktiva element.
+
+Audit 2026-05-14 (Ekonom UI/UX/CSS-cykel) visade att paketet självt
+använder `outline-offset: -2px` på 5 komponenter:
+
+| Fil | Selector | Värde |
+|---|---|---|
+| `collapsible.css:50` | `.collapsible__header:focus-visible` | `-2px` |
+| `setting-row.css:63` | `.setting-row:focus-visible` | `-2px` |
+| `sheet-content.css:101` | `.sheet__item:focus-visible` | `-1px` |
+| `sheet-content.css:150` | `.sheet__btn--save:focus-visible` | `-1px` |
+| `dropdown.css:72` | `.dropdown__item:focus-visible` | `-2px` |
+
+Plus i Ekonom-domain:
+- `ekonom.css:162` `.cat-row__header:focus-visible` `-2px`
+- `ekonom.css:229` `.cat-list-row[data-tx-id]:focus-visible` `-2px`
+- `ekonom.css:319` `.sub-row:focus-visible` `-2px`
+
+Detta är **inte** slarv. Negative offset placerar outline _innanför_
+elementets borders, vilket är nödvändigt för:
+
+1. **List-rows utan visible border**: outline +2px hänger utanför
+   elementet och clip:as av parent-list-row's border eller scroll-
+   container's `overflow: hidden`. Result: outline syns delvis eller
+   inte alls vid keyboard-fokus.
+2. **Dropdown-items inom radius-14-clippad menu**: outline +2px på
+   sista item:t clip:as av menu-borderns BR.
+3. **Items inom collapsible/sheet/card med BR-clipping**: samma
+   problem.
+
+Standalone-element (knappar, inputs, links i text) har visible borders
+eller tillräcklig spacing för outline +2px.
+
+## Decision
+
+**Outline-offset är context-sensitive:**
+
+### -2px (inom-element, "inset")
+
+Använd för items inom radius-clippade containers eller list-rader
+utan visible border:
+- `.list-row:focus-visible`
+- `.setting-row:focus-visible`
+- `.collapsible__header:focus-visible`
+- `.sheet__item:focus-visible` (`-1px` pga tightare BR)
+- `.sheet__btn--save:focus-visible` (`-1px`)
+- `.dropdown__item:focus-visible`
+- App-domain list-rows (Ekonom: `.cat-row__header`, `.cat-list-row[data-tx-id]`,
+  `.sub-row`; Jubb: motsvarande list-row-typer)
+
+### +2px (utanför-element, "outset")
+
+Använd för standalone-element med visible border eller tillräcklig
+spacing:
+- `.btn:focus-visible`
+- `.input:focus-visible` (text-input-undantag - använder `:focus`
+  istället per ADR-konvention, men om outline används är det +2px)
+- `.skip-link:focus`
+- `.chip:focus-visible`
+- `.month-pill a:focus-visible`
+- Topbar-actions (`.btn--icon`, `.pwa-avatar`, `.avatar` med focus)
+- Generic `:focus-visible`-default i app/base.css
+
+### Komposita BR (för list-row med inset)
+
+`border-radius: var(--radius-4)` på outline:n så den följer en mjuk
+form, inte fyrkantig 0px. Per app/base.css default `:focus-visible`-rule.
+
+### Outline-bredd
+
+`2px solid var(--accent-9)` (paket) eller `var(--border-focus)` (ADR
+0013-spec). Båda är acceptabla token-konsumenter.
+
+## Konsekvenser
+
+**Bra:**
+- Doktrinen matchar paketets faktiska implementation
+- Future-CC har klar regel för var att applicera vilken offset
+- Inset-värdet är _korrekt_ för list-rows (anti-clipping är funktionell
+  design, inte slarv)
+- Stylelint-plugin (Sprint 5) kan validera per-komponent-typ
+
+**Trade-offs:**
+- Två varianter av outline-offset i systemet (-2/-1 vs +2). Komplexitet
+  ökar marginellt.
+- Visuell skillnad mellan inset och outset är märkbar för
+  keyboard-användare. Outset är mer prominent, inset är mer subtil.
+  Trade-off: subtilitet vs synlighet. Anti-clipping vinner.
+
+## Migration
+
+**Ingen migration krävs.** Paketet och appar är redan i låst state.
+ADR dokumenterar bara regeln post-hoc.
+
+Sprint F i Ekonom-auditen 2026-05-14 skippades baserat på denna analys -
+fyndet var inte ett brott utan en medveten design-pattern som doktrinen
+inte hade dokumenterat.
+
+## Stylelint-plugin (Sprint 5, framtida)
+
+Validera:
+- `outline-offset: -1px` eller `-2px` är endast tillåtet på selectors
+  som matchar list-row-/dropdown-item-/sheet-item-pattern
+- `outline-offset: 2px` på alla andra :focus-visible-regler
+- Varning vid avvikelse från ADR-tabellen ovan
+
+## References
+
+- DESIGN-LANGUAGE.md sektion 9 (uppdaterad 2026-05-14)
+- ADR 0013 (visual-coherence-doctrine) - tidigare regel
+- Ekonom DECISIONS 2026-05-14 (audit-cykel skip-rationale för Sprint F)
+- Audit-not: paketets faktiska outline-offset-värden inventoradde
+  2026-05-14 via `grep -rEn "outline-offset:\s*-" app/static/css/ds/`

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:
@@ -251,6 +289,24 @@ egna `margin-bottom`. Välj en mekanism per kontext.
 - List-rows: `padding: 14px 0` minimum (= 50px height med text-line).
 - Icon-buttons: `width: 44px; height: 44px`.
 
+### Focus-ring (outline-offset context-sensitive)
+
+Outline-offset är **inte** alltid `+2px`. Inom radius-clippade
+containers eller list-rader utan visible border klipps `+2px` outline
+av parent. Använd inset (`-2px` eller `-1px`) i dessa fall för
+synlig fokus-ring.
+
+| Kontext | offset | Komponenter |
+|---|---|---|
+| Standalone-element med border eller spacing | `+2px` | `.btn`, `.chip`, `.skip-link`, `.month-pill a`, topbar-actions, generic `:focus-visible` |
+| List-rader utan visible border | `-2px` | `.list-row`, `.setting-row`, `.collapsible__header`, `.dropdown__item` |
+| Items inom radius-clippad menu/sheet | `-1px` | `.sheet__item`, `.sheet__btn--save` (tightare BR kräver -1) |
+| App-domain list-rows | `-2px` | Ekonom `.cat-row__header`/`.cat-list-row[data-tx-id]`/`.sub-row`; Jubb motsvarande |
+
+`outline: 2px solid var(--accent-9)` (eller `var(--border-focus)`) +
+`border-radius: var(--radius-4)` på outline:n så den följer en mjuk
+form. Se ADR 0018 för full rationale.
+
 ### Mobile-first
 
 - Default-styles är mobile (375-430 viewport).