@klodd/ds 3.5.3 → 3.5.5

package/SKILL.md

@@ -97,7 +97,7 @@ En källa, alla projekt ser samma skill automatiskt. Ändringar i
 `~/dev/klodd-ds/SKILL.md`, `POLICY.md` eller `references/` syns
 omedelbart i nästa CC-session - ingen synk-fas behövs.
 
-Updated: 2026-05-09 (matchar @klodd/ds 3.5.3 - sprint C fas 1+2: ny
+Updated: 2026-05-09 (matchar @klodd/ds 3.5.4 - sprint C fas 1+2: ny
 sheet-content.css-komponent (24 BEM-klasser för Sprint-65-pattern),
 foreman-typografi-utokning (.text-caption/-tiny/-num/-num--display/-positive/-warning),
 btn-modifiers (--block, --add), .heading (17px medium tight), och utokningar
@@ -105,4 +105,12 @@ i panel/setting-row/chip.
 v3.5.2 rattade .panel--attention__pill (felaktig BEM) till .panel__pill +
 context-styling via .panel--attention .panel__pill.
 v3.5.3 lagger till .heading-utan-N (17px) for dialog-titlar och sheet-rubriker.
+v3.5.4 (Sprint D-3) introducerar --fs-16 token (16px) for iOS-anti-zoom
+pa inputs och applicerar pa inline-edit__input. Token ar dokumenterad
+som BARA for input-element - vanlig text anvander fortfarande 15 eller 17.
+v3.5.5 (Sprint E) konsoliderar :focus-visible over 7 komponenter (chip,
+list-row, tab-bar, nav, swipe-stack, inline-edit) - 11 nya selectorer
+fick outline 2px solid var(--border-focus) med outline-offset 2px. Plus
+.tab outline-offset normaliserad 1px->2px. input.css och .inline-edit__input
+ar dokumenterade undantag som behaller :focus (text-input-konvention).
 Sprint C fas 2 template-migration pagaar.)

package/css/00-primitives.css

@@ -222,6 +222,10 @@
   --fs-13: 13px;
   --fs-14: 14px;
   --fs-15: 15px;
+  /* --fs-16 ar BARA for input-element (anti iOS auto-zoom). Apple HIG
+     hoppar over 16 i UI-text-storlekar - anvand 15 eller 17 for vanlig
+     text. */
+  --fs-16: 16px;
   --fs-17: 17px;
   --fs-18: 18px;
   --fs-20: 20px;

package/css/components/chip.css

@@ -101,6 +101,11 @@
   }
 }
 
+.chip-list__delete:focus-visible {
+  outline: 2px solid var(--border-focus);
+  outline-offset: 2px;
+}
+
 .chip-list__add {
   background: transparent;
   border-style: dashed;
@@ -120,6 +125,11 @@
   }
 }
 
+.chip-list__add:focus-visible {
+  outline: 2px solid var(--border-focus);
+  outline-offset: 2px;
+}
+
 
 /* ================================================================
    ==== BRAND-PILL
@@ -245,6 +255,11 @@
   .install-chip__install:hover { background: var(--accent-10); }
 }
 
+.install-chip__install:focus-visible {
+  outline: 2px solid var(--border-focus);
+  outline-offset: 2px;
+}
+
 .install-chip__dismiss {
   background: transparent;
   border: none;
@@ -261,6 +276,11 @@
   .install-chip__dismiss:hover { color: var(--text-default); }
 }
 
+.install-chip__dismiss:focus-visible {
+  outline: 2px solid var(--border-focus);
+  outline-offset: 2px;
+}
+
 @keyframes install-chip-up {
   from { transform: translateY(calc(100% + 100px)); opacity: 0; }
   to   { transform: translateY(0); opacity: 1; }

package/css/components/inline-edit.css

@@ -41,6 +41,11 @@
   }
 }
 
+.inline-edit__btn:focus-visible {
+  outline: 2px solid var(--border-focus);
+  outline-offset: 2px;
+}
+
 .inline-edit__form {
   display: inline-flex;
   align-items: center;
@@ -64,10 +69,14 @@
   border-radius: var(--radius-8);
   color: var(--text-default);
   font-family: inherit;
-  font-size: 16px;
+  font-size: var(--fs-16);
   outline: none;
 }
 
+/* :focus (INTE :focus-visible) - text-input-undantag analogt med
+   input.css. Anvandare klickar/touchar inputen och forvantar sig
+   visuell feedback oavsett input-method. Border + box-shadow ar
+   integrerad i input-utseendet. */
 .inline-edit__input:focus {
   border-color: var(--accent-9);
   box-shadow: 0 0 0 3px var(--accent-a3);

package/css/components/input.css

@@ -61,6 +61,18 @@
 /* ================================================================
    ==== STATES
    ================================================================ */
+
+/* Inputs anvander :focus (INTE :focus-visible) som dokumenterat
+   undantag fran paketets generella focus-visible-monster.
+
+   Skal: text-inputs ar specialfall - anvandare klickar/touchar dem
+   och forvantar sig visuell feedback oavsett input-method (mus eller
+   tangentbord). Att gomma fokus-ring vid mus-klick (vilket
+   :focus-visible skulle gora) kan forvirra anvandare om vilket falt
+   som ar aktivt. Konvention foljer Radix UI, MUI, shadcn etc.
+
+   Fokus-feedback ar border-color + box-shadow ring (inte outline) -
+   integrerad i input-utseendet snarare an "added on top". */
 .input:focus,
 .textarea:focus,
 .select:focus {

package/css/components/list-row.css

@@ -113,3 +113,8 @@
 @media (hover: hover) and (pointer: fine) {
   .list-row--clickable:hover { background: var(--surface-hover); }
 }
+
+.list-row--clickable:focus-visible {
+  outline: 2px solid var(--border-focus);
+  outline-offset: 2px;
+}

package/css/components/nav.css

@@ -56,6 +56,11 @@
   }
 }
 
+.bottom-nav-item:focus-visible {
+  outline: 2px solid var(--border-focus);
+  outline-offset: 2px;
+}
+
 .bottom-nav-item.active {
   color: var(--accent-text);
 }
@@ -141,6 +146,11 @@
   }
 }
 
+.topbar-action:focus-visible {
+  outline: 2px solid var(--border-focus);
+  outline-offset: 2px;
+}
+
 
 /* ================================================================
    ==== TAB-BAR (inline tabs i panel)
@@ -188,5 +198,5 @@
 
 .tab:focus-visible {
   outline: 2px solid var(--border-focus);
-  outline-offset: 1px;
+  outline-offset: 2px;
 }

package/css/components/swipe-stack.css

@@ -47,6 +47,11 @@
 
 .swipe-card:active { cursor: grabbing; }
 
+.swipe-card:focus-visible {
+  outline: 2px solid var(--border-focus);
+  outline-offset: 2px;
+}
+
 .swipe-card--back {
   transform: scale(0.96);
   opacity: 0.85;
@@ -154,6 +159,11 @@
   transition: transform var(--press-in-duration) var(--press-in-easing);
 }
 
+.swipe-action-btn:focus-visible {
+  outline: 2px solid var(--border-focus);
+  outline-offset: 2px;
+}
+
 .swipe-action-btn--save  { color: var(--positive); }
 .swipe-action-btn--dismiss { color: var(--negative); }
 

package/css/components/tab-bar.css

@@ -56,3 +56,8 @@
   transform: scale(0.985);
   transition: transform 80ms var(--ease-spring-snappy);
 }
+
+.tab-bar__item:focus-visible {
+  outline: 2px solid var(--border-focus);
+  outline-offset: 2px;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@klodd/ds",
-  "version": "3.5.3",
+  "version": "3.5.5",
   "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/03-quality-bar.md

@@ -62,6 +62,13 @@ Lista over absoluta krav som inte ska brytas. Varje krav har konkret
 - ALDRIG `rgba(0, 0, 0, 0.4)` - anvand `color-mix(in oklch, ...)` eller
   semantic alpha-token
 
+**Scope:**
+Galler komponenter i `components/*.css` och per-app domain-filer
+(`X-domain.css`, `X.css`). Galler INTE `apps/X.css` - den filen ar
+per definition det lager som haller app-specifika ravarden och
+far referera primitives eller explicita hex-varden for app-karaktar
+som saknar Radix-ekvivalent.
+
 **Varfor:**
 - Single source of truth: andring i 00-primitives.css landar omedelbart
   i alla komponenter

package/references/04-locked-decisions/0009-no-flat-components-css.md

@@ -51,6 +51,34 @@ element) lever i en tydligt namngiven domain-fil:
 - Ny komponent kräver `@import` i alla konsumerande appars `main.css`.
   Acceptabelt - paketet listar komponenter i README.
 
+## Skärpning (2026-05-09)
+
+`ekonom-domain.css` (och motsvarande per-app domain-filer) håller
+bara data: kategoritokens, färgvärden, app-specifika värden. Aldrig
+strukturella mönster. All struktur som kan återanvändas av en annan
+app går in i paketet med generiska namn. Detta beslutades och
+genomfördes i Sprint C 2026-05-09 (358 dash→BEM-substitueringar,
+@klodd/ds 3.5.1-3.5.3).
+
+Ekonom-flödet i Sprint C:
+
+1. **Fas 1 paket-utvidgning** (3.5.1-3.5.3): 37 nya generiska klasser
+   till paketet - hela `sheet-content.css` (24 BEM-klasser för
+   bottom-sheet-form-pattern), `.text-caption/-tiny/-num/-num--display/
+   -positive/-warning` foreman-typografi, `.btn--block/--add` modifiers,
+   utökningar i panel/setting-row/chip, och `.heading` (17px) för
+   dialog-titlar.
+2. **Fas 2 template-migration**: 21 templates fick dash → BEM-
+   substitueringar. _sheet_macros.html-makron migrerade samtidigt så
+   alla konsumenter (5 templates) fick BEM-rendering.
+3. **Cleanup**: components.css (2089 rader) raderad helt. Återstående
+   18 aktivt använda klasser utan paket-equivalent (kv-list-family,
+   btn-copy/-bank, bank-row-icon, profile-panel-centered, rule-arrow/
+   -cat, offline-*, onboarding-container, btn--positive, topbar-logo)
+   lyfta till `ekonom.css` LEGACY-sektion. Dessa är kandidater för
+   framtida paket-inkludering om de visar sig generaliserbara - se
+   öppet beslut 0009 i `references/05-open-decisions/`.
+
 ## Migration (genomförd 2026-05-08)
 
 Båda repos genomgick **selector-för-selector-radering**, inte big-bang:

package/references/05-open-decisions/0007-banner-body-migration.md

@@ -0,0 +1,47 @@
+# 0007 - .banner-body migration i sync_result.html
+
+## Status
+Pending, låg prioritet.
+
+## Context
+
+`app/templates/sync_result.html` använder `.banner-body` på två rader
+(line 29, 36) som child-element i banner-strukturen:
+
+```html
+<div class="banner banner--positive">
+  <div class="banner__content">
+    <div class="banner__title">Synk klar</div>
+    <div class="banner-body">{{ map_stats.new }} nya transaktioner...</div>
+  </div>
+</div>
+```
+
+`.banner-body` är **odefinierad** i både `@klodd/ds`-paketet och
+Ekonoms ekonom.css/ekonom-domain.css. Klassen har ingen styling -
+elementet ärver bara från `.banner__content`-parent.
+
+Paketets `banner.css` har redan `.banner__sub` som är den BEM-korrekta
+formen för secondary banner-text (12px text-subtle).
+
+## Beslut behövs
+
+`.banner-body` → `.banner__sub` mekanisk substitution. Visuellt
+innebär det att texten får 12px text-subtle-styling istället för
+default body-styling (subtil förändring, knappast märkbar i banner-
+context där text redan är komprimerat).
+
+Inkluderades inte i Sprint C 2026-05-08 rename-map. Två förekomster
+i en enda template, lågprio.
+
+## Trigger
+
+Migrera nästa gång sync_result.html ändras ändå (sprint som rör
+sync-flödet eller banner-utseendet generellt). Mekanisk perl-
+substitution `s/\bbanner-body\b/banner__sub/g`.
+
+## References
+
+- Sprint C fas 2 batch 2.5 commit `1dc3aec` - notering om dödklassen
+- Ekonom `app/templates/sync_result.html:29,36`
+- `@klodd/ds/css/components/banner.css` - `.banner__sub`-definition

package/references/05-open-decisions/0008-hbar-migration-ekonom.md

@@ -0,0 +1,61 @@
+# 0008 - .hbar-* dash → BEM-migration i Ekonom
+
+## Status
+Pending, låg prioritet.
+
+## Context
+
+`app/templates/upload_preview.html` använder dash-form `.hbar-*`-
+klasser för horisontell bar-chart i CSV-import-flödet:
+
+```html
+<div class="hbar-item">
+  <div class="hbar-label">{{ g.label }}</div>
+  <div class="hbar-track">
+    <div class="hbar-fill" data-bar-width="..."></div>
+  </div>
+  <div class="hbar-value">{{ g.sum | sek_cost }} ({{ g.count }})</div>
+</div>
+```
+
+Paketets `@klodd/ds/css/components/hbar.css` har BEM-formen redan:
+`.hbar`, `.hbar__item`, `.hbar__track`, `.hbar__fill`, `.hbar__label`,
+`.hbar__value`, `.hbar__fill--positive/-warning/-negative`.
+
+Dash-formen är definierad i `ekonom.css` ("CHARTS"-sektionen) som
+parallell-styling till paketets BEM. Detta är **dubbel-styling** som
+ADR 0009 förbjuder för komponent-CSS.
+
+Inkluderades inte i Sprint C 2026-05-08 rename-map (sektion A
+listade inte hbar-mappningar). Endast 1 template (upload_preview.html)
+använder dash-formen.
+
+## Beslut behövs
+
+Mekanisk substitution:
+
+```
+.hbar-item   → .hbar__item
+.hbar-label  → .hbar__label
+.hbar-track  → .hbar__track
+.hbar-fill   → .hbar__fill
+.hbar-value  → .hbar__value
+```
+
+Plus radera dash-form-definitionerna ur `ekonom.css` CHARTS-sektionen
+för att eliminera dubbel-styling och uppfylla ADR 0009 fullt ut.
+
+## Trigger
+
+Migrera nästa gång upload_preview.html ändras ändå (sprint som rör
+CSV-import-flödet). Eller som del av nästa minor-version cleanup-
+sprint.
+
+## References
+
+- Sprint C fas 2 batch 2.2 commit `b81f1e0` - notering om hbar-
+  klasser ej i scope
+- Ekonom `app/templates/upload_preview.html:43-51`
+- Ekonom `app/static/css/ds/ekonom.css` CHARTS-sektion
+- `@klodd/ds/css/components/hbar.css` - BEM-definition
+- ADR 0009 - locked decision om inga dubbel-stylings

package/references/05-open-decisions/0009-ekonom-css-legacy-cleanup.md

@@ -0,0 +1,63 @@
+# 0009 - ekonom.css LEGACY-sektion cleanup
+
+## Status
+Pending, medel prioritet.
+
+## Context
+
+`app/static/css/ds/ekonom.css` har en LEGACY-sektion (~200 rader,
+18 klasser) som lyftes från `components.css` i Sprint C cleanup
+(2026-05-09, commit `5bbe44e`). Klasserna är aktivt använda i
+templates men saknade paket-ekvivalent vid Sprint C-tidpunkten.
+
+Klasser i LEGACY-sektionen:
+
+| Klass | Användning | Generaliserbar? |
+|---|---|---|
+| `.topbar-logo` | 11 templates - app-namn i topbar | Ja, paketet har redan `.topbar-back/-title/-action` men inte `-logo` |
+| `.kv-list` family (.kv-list, .kv-strong, .kv-sub, .kv-divider) | 6 förekomster /avstamning + bolan | Ja, generic key-value-list-pattern |
+| `.kv-budget-row, .kv-budget-header, .kv-budget-body` | 3 förekomster /avstamning | Möjligen - collapsible-row med metric-burndown |
+| `.btn-copy, .btn-bank` | 2 unika /avstamning + bolan | Tveksamt - Klarna-stil specifik. Kan ev. lyftas som `.btn--icon-circle` med modifier |
+| `.btn--positive` | 1 review_queue.html | Ja, paketet har `.btn--primary/-secondary/-ghost/-danger` men inte `-positive` (skulle komplettera variant-set) |
+| `.bank-row-icon` | 1 /installningar/data | Möjligen - generic "status-icon-leading-element" pattern |
+| `.profile-panel-centered` | 1 /jag | Tveksamt - Ekonom-specifik panel-layout |
+| `.rule-arrow, .rule-cat` | 1 /installningar/auto-kategorisering | Tveksamt - regel-rad-styling (keyword → kategori) |
+| `.offline-wrap, .offline-icon, .offline-title, .offline-text` | 1 offline.html | Ja, generic offline-page-pattern (fits paketets hub-card-style empty-state) |
+| `.onboarding-container` | 2 onboarding-templates | Ja, generic max-width-form-container pattern |
+
+Sektionen är tydligt markerad som "LEGACY (Sprint C cleanup,
+2026-05-09)" i `ekonom.css` och kommer rivas successivt när
+respektive klass:
+- (a) lyfts till paketet med generiska namn (struktur)
+- (b) eller raderas tillsammans med template-redesign
+
+## Beslut behövs
+
+Granska varje klass i tabellen ovan vid nästa paket-minor-version och
+fatta beslut: lyft till paketet eller stanna i ekonom.css.
+
+**Prioritering vid lyft:**
+
+1. **Hög** (generic + multi-template): `.topbar-logo`, `.kv-list`-
+   family, `.offline-*`, `.onboarding-container`
+2. **Medel** (generic + low-impact): `.btn--positive`,
+   `.bank-row-icon`
+3. **Låg** (tveksam generaliserbarhet): `.btn-copy/.btn-bank`,
+   `.profile-panel-centered`, `.rule-arrow/.rule-cat`,
+   `.kv-budget-*`
+
+## Trigger
+
+Nästa paket-minor-version (3.6.0). Vid det tillfället - granska
+LEGACY-sektionen och lyft de generaliserbara klasserna med generiska
+namn.
+
+## References
+
+- Sprint C cleanup-commit `5bbe44e` (Ekonom) - components.css raderad,
+  LEGACY-sektion etablerad i ekonom.css
+- ADR 0009 (locked) "Skärpning 2026-05-09" - stadgar att struktur
+  går till paketet, ekonom-domain håller bara data
+- `~/dev/Ekonom/app/static/css/ds/ekonom.css` - LEGACY-sektionen
+  börjar efter logout-row-blocket
+- @klodd/ds 3.5.3 (current) - inte uppdaterad med dessa klasser