@klodd/ds 3.21.5 → 3.21.6

package/package.json

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

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

@@ -289,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).