npm - @klodd/ds - Versions diffs - 3.3.0 → 3.4.0 - Mend

@klodd/ds 3.3.0 → 3.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (31) hide show

package/SKILL.md +56 -0
package/bin/klodd-ds.js +25 -0
package/bin/precache.js +43 -0
package/bin/sync.js +33 -0
package/bin/verify.js +66 -0
package/css/00-primitives.css +13 -4
package/css/10-semantic.css +3 -3
package/css/components/dropdown.css +1 -1
package/css/components/setting-row.css +1 -1
package/css/components/tab-bar.css +1 -1
package/css/components/tooltip.css +1 -1
package/css/utilities.css +101 -67
package/package.json +12 -3
package/references/01-tokens.md +182 -0
package/references/02-components.md +260 -0
package/references/03-quality-bar.md +238 -0
package/references/04-locked-decisions/0001-three-layer-token-architecture.md +41 -0
package/references/04-locked-decisions/0002-bem-naming.md +37 -0
package/references/04-locked-decisions/0003-radix-colors-oklch.md +39 -0
package/references/04-locked-decisions/0004-pixel-numeric-spacing.md +31 -0
package/references/04-locked-decisions/0005-data-app-theming.md +42 -0
package/references/04-locked-decisions/0006-mauve-neutral.md +40 -0
package/references/04-locked-decisions/0007-font-weight-400-500.md +46 -0
package/references/04-locked-decisions/0008-npm-package-distribution.md +40 -0
package/references/05-open-decisions/0001-tx-row-to-list-row-migration-CLOSED.md +80 -0
package/references/05-open-decisions/0002-parallel-classnames-cleanup-CLOSED.md +75 -0
package/references/05-open-decisions/0003-js-duplicates-migration-CLOSED.md +79 -0
package/references/05-open-decisions/0004-halsomentorn-legacy-css.md +51 -0
package/references/05-open-decisions/0005-cat-class-location-CLOSED.md +37 -0
package/references/05-open-decisions/0006-bar-kind-template-migration-CLOSED.md +75 -0
package/references/05-open-decisions/0007-ekonom-base-import-gap-CLOSED.md +111 -0

package/references/01-tokens.md ADDED Viewed

@@ -0,0 +1,182 @@
+# Token-arkitektur
+## Tre lager med strikt inkapsling
+```
+00-primitives.css   raa varden (Radix OKLCH-ramper, exakta pixelvarden)
+10-semantic.css     komponenter laser HARIFRAN
+apps/<app>.css      per-app accent + surface-overrides (5-15 rader)
+```
+**Komponenter refererar ALDRIG primitives direkt.** De laser bara semantic
+tokens. Apps/-filerna ar enda platsen som mappar primitives till semantic.
+### Varfor tre lager
+- **Primitives ar "implementation detail".** Att byta Radix-skala (eller
+  hela fargmodellen) ska inte krava komponent-omskrivning.
+- **Semantic ar bryggan.** Komponentens regel `background: var(--surface-raised)`
+  fungerar i alla apps utan andring. Apps/-filen avgor vad `--surface-raised`
+  faktiskt blir per-app.
+- **Apps/-overrides racker.** En ny app introduceras genom 5-15 rader CSS,
+  inte via komponent-fork.
+## Radix Colors via OKLCH
+Officiella Radix-skalor (Mauve, Blue, Plum, Violet, Green, Amber, Red)
+i dark-mode-varden, hamtade rakt fran radix-ui.com/colors.
+### Varfor
+- **Pre-kalibrerade.** Perceptuellt jamn ljushet steg-for-steg. Hand-tunade
+  OKLCH skulle introducera subtila WCAG-kontrast-buggar.
+- **WCAG-verifierade.** Steg 11 har garanterad 4.5:1 mot steg 1-2 (text
+  pa app-bakgrund). Steg 12 har 7:1 (high-contrast text).
+- **OKLCH-bakad.** Modern color-mix() i komponenter ger perceptuellt
+  korrekt opacity utan handkalibrering.
+- **Dokumenterad rollkarta.** Steg 1-2 = app-bg, 3 = vila, 4 = hover,
+  5 = active, 6 = subtil border, 7 = interaktiv border, 8 = stark border,
+  9 = solid bakgrund (knappar/badges), 10 = solid hover, 11 = low-contrast
+  text, 12 = high-contrast text.
+### Mauve som neutral
+`--gray-1` till `--gray-12` mappas till **Radix Mauve Dark**, inte ren gray.
+**Varfor:** Mauve ar Radix officiella rekommendation som komplement till
+Blue och Plum. Subtle lila-tonad ger varmare bottenton som matchar bagge
+app-accenterna utan att klinga med nagon.
+**Trade-off:** Mauve passar inte for en framtida gron- eller orange-accent-
+app. Inte planerat - om det blir aktuellt valjer vi neutral utifran den
+appens accent vid den punkten.
+## Pixel-numerisk spacing/typografi/radius
+```
+--space-N    dar N = exakt antal pixlar  (--space-12 = 12px)
+--fs-N       dar N = exakt antal pixlar  (--fs-14 = 14px)
+--radius-N   dar N = exakt antal pixlar  (--radius-12 = 12px)
+```
+### Varfor
+- **LLM-vanligt.** En CC-session kan resonera om spacing utan att memorera
+  en mappnings-tabell (md = 12, lg = 16 etc.).
+- **Designerns Figma-varde matchar token-namnet 1:1.** Mental aritmetik
+  elimineras.
+- **Ingen ordinal-explosion.** Inga --space-md vs --space-md-2 vs --space-lg
+  vs --space-lg-tight.
+**Trade-off:** branschstandard ar ordinala namn (Tailwind, Material,
+Bootstrap). Designer som kommer fran de ekosystemen far anpassa sig.
+## Semantic-token-referens
+### Surfaces (NAV Aksel-lagermodell - ljusare = hogre i z-stacken)
+| Token | Anvand for | INTE for |
+|---|---|---|
+| `--surface-page` | `<html>`, `<body>`, page-background | Kort, paneler, modaler |
+| `--surface-default` | Sektionsbakgrunder, tab-innehall | Sidans yttersta bg eller upphojda kort |
+| `--surface-raised` | Kort, paneler, sidopaneler | Modaler/popovers |
+| `--surface-overlay` | Dialog-bg, tooltip, context-menu, sheets | Inbaddade kort |
+| `--surface-hover` | `:hover`-bg pa knappar, rader, kort | Statiska ytor |
+| `--surface-active` | `:active`-bg, `.nav-pod.active` | Hover |
+| `--surface-sunken` | Input-bg, code-block | Interaktiva ytor |
+### Text
+| Token | Anvand for | INTE for |
+|---|---|---|
+| `--text-default` | Rubriker, knapptext, viktig metadata | Hjalptext, datum, placeholder |
+| `--text-subtle` | Metadata, datum, kompletterande info | Rubriker eller primar info |
+| `--text-muted` | Placeholder, hint, micro-labels | Lasbar info med hog prioritet |
+| `--text-disabled` | Disabled-state pa knappar/inputs | Aktiva element |
+| `--text-on-accent` | Text inuti `--accent-9`-bg | Text pa neutral bg |
+| `--text-on-status` | Text inuti `--bg-success/warning/danger` | Text pa neutral bg |
+### Borders
+| Token | Anvand for | INTE for |
+|---|---|---|
+| `--border-subtle` | Tunna dividers, table-row-borders | Interaktiva element |
+| `--border-default` | Kortkanter, input-borders, btn-borders | Fokus-states |
+| `--border-strong` | Hover-state pa inputs, emphasis | Vila-state |
+| `--border-focus` | `:focus-visible` outline | Hover eller statiska borders |
+### Accent (byts per app via `data-app`)
+| Token | Anvand for | INTE for |
+|---|---|---|
+| `--accent-soft` | Selected-state-bg, highlight-rader | Knappar |
+| `--accent-moderate` | Hover-state pa `--accent-soft`-ytor | Vila-bg |
+| `--accent-9` | Solid button-bg, badges, accent-bar | Subtila bg |
+| `--accent-10` | `:hover` pa `--accent-9` | Vila-state |
+| `--accent-text` | Lankar, accentfargade etiketter | Text pa --accent-9-bg |
+| `--accent-a1..a12` | Pre-kalibrerade alpha-tints (Radix-stil) | Solid bg |
+### Status
+| Token | Anvand for | INTE for |
+|---|---|---|
+| `--positive` | Gain-belopp, success-chip-text | Aktion-knappar |
+| `--negative` | Loss-belopp, error-text | Destruktiva aktioner |
+| `--warning` | Warning-banners, score-pill-medium | Errors |
+| `--accent-danger` | Delete-knappar, destructive bekraftelser | Faktiskt negativt belopp |
+| `--bg-success/warning/danger` | Solid status-bg med vit text | Tonad bg (anvand --positive-dim etc) |
+## Alpha-varianter
+### Officiella Radix-alpha (v3.0.0+)
+```
+--accent-a1  --accent-a2  --accent-a3
+--accent-a6  --accent-a8
+--accent-a10 --accent-a12
+```
+Pre-kalibrerade transparency-skalor som overrides per app. Stegs-mappning
+samma som solid-skalan: a1-2 = subtilest, a3 = vila-tint, a6 = subtil
+border-emphasis, a8 = stark border, a10 = solid hover (alpha), a12 = text.
+### color-mix() for ad-hoc-alpha
+Om en specific komponent behover en alpha-niva som inte finns i
+Radix-stegen, anvand `color-mix(in oklch, var(--accent-9) 25%, transparent)`.
+**Varfor color-mix() istallet for hardkodad rgba():**
+- Perceptuellt korrekt over olika fargscalor (oklch interpolerar
+  i ljushet, inte rgb-kanaler)
+- Foljer accent-byte automatiskt - en color-mix mot --accent-9 ger Blue
+  i Jubb och Plum i Ekonom utan komponent-andring
+- Modern browser-stod (Chrome 111+, Safari 16.4+, Firefox 113+) som
+  redan kravs av Radix-ramparna
+## Component tokens (DRY-mekanism)
+```
+--bottom-nav-height-semantic
+--bottom-nav-clearance
+--touch-min: 44px
+--card-radius
+--btn-radius
+--input-radius
+```
+Kombination som anvands i 3+ komponenter blir token. Forhindrar drift
+mellan komponenter. Komponenter far referera dessa eftersom de ar
+avledda fran semantic.
+## Light-mode (forberedd, ej produktion-verifierad)
+`[data-theme="light"]` i 10-semantic.css overrider surface + text +
+borders. Apps fortsatter att anvanda `data-app` for accent-byte oavsett
+tema. Status: forberedd, inte aktivt produktion-verifierad - se
+`05-open-decisions/` om aktualiseras.

package/references/02-components.md ADDED Viewed

@@ -0,0 +1,260 @@
+# Komponentkatalog
+33 komponenter i `@klodd/ds@3.x`. Alla refererar bara semantic tokens -
+inga primitives. BEM-konvention (block__element--modifier).
+## Grundkomponenter
+### button (`button.css`)
+- **Klasser:** `.btn`, `.btn--primary/-secondary/-ghost/-danger`, `.btn--sm/-lg/-icon/-circle`, `.btn--loading`
+- **Anvand:** alla aktioner med tap-target >=44px
+- **INTE:** Cirkel-link i topbar (anvand `.btn--icon.btn--circle`)
+- **Tokens:** `--surface-default/-hover/-active`, `--text-default/-on-accent`, `--border-default/-focus`, `--accent-9/-10`, `--bg-danger`, `--touch-min`
+### input (`input.css`)
+- **Klasser:** `.input`, `.textarea`, `.select`, `.input-group__label/__hint/__error`, `.input-icon`
+- **Anvand:** form-falt med 17px font-size (anti iOS auto-zoom)
+- **INTE:** Inline-edit-pattern (anvand `.inline-edit__input`)
+- **Tokens:** `--surface-sunken/-default`, `--accent-9`, `--accent-a3` (focus-ring), `--bg-danger` (error-state)
+### badge (`badge.css`)
+- **Klasser:** `.badge`, `.badge--success/-warning/-danger/-accent`, `.score-pill`, `.score-pill--strong/-medium/-low`
+- **Anvand:** Status-pills (statiska)
+- **INTE:** Klickbara chips (anvand `.chip`)
+- **Tokens:** `--positive/-dim/-border`, `--warning/-dim/-border`, `--bg-danger`, `--accent-text/-a2/-a6`
+### card (`card.css`)
+- **Klasser:** `.card`, `.card--interactive/-flush`, `.card-header/-body/-footer/-divider`
+- **Anvand:** Standardcontainer for paneler. `--interactive` ger hover/press-feedback
+- **INTE:** Settings-hub-kort (anvand `.hub-card`)
+- **Tokens:** `--surface-raised/-overlay/-hover`, `--border-subtle/-default/-focus`
+### nav (`nav.css`)
+- **Klasser:** `.bottom-nav`, `.bottom-nav-item.active`, `.topbar`, `.topbar-back/-title/-action`, `.tab-bar`, `.tab.active`
+- **Anvand:** Mobile bottom-nav (fixed), in-flow topbar, segmented tabs
+- **INTE:** Generisk navigations-meny (anvand `.dropdown`)
+- **Tokens:** `--surface-default`, `--text-muted/-default`, `--accent-text` (active), `--border-subtle/-focus`, `--touch-min`, `--safe-bottom`
+### feedback (`feedback.css`)
+- **Klasser:** `.toast`, `.toast--success/-error/-warning`, `.empty-state`, `.skeleton`, `.skeleton--text/-circle/-card`, `.spinner`
+- **Anvand:** Transient feedback + loading-states
+- **INTE:** Inline error-meddelanden (anvand `.input-group__error`)
+- **Tokens:** `--surface-overlay`, `--bg-success/-warning/-danger`, `--text-on-status`, `--shadow-float`. Respekterar `prefers-reduced-motion`.
+### overlay (`overlay.css`)
+- **Klasser:** `.dialog`, `.sheet`, `.dialog-backdrop` (med cursor: pointer), `.dialog-header/-body/-footer`, `.sheet-handle/-body/-divider`
+- **Anvand:** Native `<dialog>` (centrerad modal) eller `<dialog class="sheet">` (bottom-attached)
+- **INTE:** Tooltip eller dropdown (egna komponenter)
+- **Tokens:** `--surface-raised/-overlay`, `--border-subtle`, `--shadow-float`, `--z-overlay`, `--safe-bottom`
+### icon (`icon.css`)
+- **Klasser:** `.icon`, `.icon--xs/-sm/-md/-lg/-xl`, `.icon-custom`
+- **Anvand:** Lucide via CDN (cdn.jsdelivr.net) ELLER inline-SVG via `.icon-custom`
+- **INTE:** Inline `style="width:Xpx"` pa ikoner (anvand size-modifier)
+- **Tokens:** `currentColor` - parent-element styr fargen
+### hero-roll (`hero-roll.css`)
+- **Klasser:** `.hero-amount[data-animate-roll]`, `.hero-digit-track`
+- **Anvand:** Display-siffer-animation pa hero-vyer (kodlas-rullning)
+- **INTE:** Vanliga numeriska varden (anvand `.hero__amount` utan data-animate-roll)
+- **Tokens:** `--text-default`, `--lh-tight`, `--ls-tightest`, `--fs-80`. **Undantag:** `font-weight: 600` (display-undantaget fran 400/500-policyn).
+### divider (`divider.css`)
+- **Klasser:** `.divider`, `.divider--vertical/-strong`
+- **Anvand:** Horisontell eller vertikal separator
+- **INTE:** Visuell separator inom card (anvand `.card-divider`)
+- **Tokens:** `--border-subtle/-default`
+### progress (`progress.css`)
+- **Klasser:** `.progress`, `.progress-bar`, `.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`.
+### tooltip (`tooltip.css`)
+- **Klasser:** `.tooltip-wrapper`, `.tooltip`
+- **Anvand:** Pure-CSS tooltip via `:hover/:focus-within` pa wrappern
+- **INTE:** Long-content tooltips (anvand `.dialog`)
+- **Tokens:** `--surface-overlay`, `--text-default`, `--border-default`, `--z-tooltip`
+### dropdown (`dropdown.css`)
+- **Klasser:** `.dropdown.is-open`, `.dropdown-menu`, `.dropdown-item`, `.dropdown-item--danger`, `.dropdown-divider`
+- **Anvand:** Kontextuell meny (kebab/more-actions). JS togglar `.is-open`
+- **INTE:** Permanent visible navigation (anvand `.nav` eller `.tab-bar`)
+- **Tokens:** `--surface-overlay/-hover/-active`, `--text-default`, `--border-default/-subtle/-focus`, `--bg-danger` (item--danger), `--z-dropdown`
+## Layout-komponenter (v3.0.0+)
+### banner (`banner.css`)
+- **Klasser:** `.banner`, `.banner--hero/-accent/-positive/-negative/-warning`, `.banner__title/__sub/__content`
+- **Anvand:** Bred informations-rad i flode (top-of-page eller mellan sektioner)
+- **INTE:** Toast-notifikation (anvand `.toast`)
+### panel (`panel.css`)
+- **Klasser:** `.panel`, `.panel--info/-info-warning/-danger/-attention`, `.panel__title/__title-row/__title-meta/__title-link/__step-row/__step-badge`
+- **Anvand:** Sektion med ramad styling och titel
+- **INTE:** Klickbart kort (anvand `.card--interactive`)
+### hub-card (`hub-card.css`)
+- **Klasser:** `.hub-card`, `.hub-card__icon/__text/__title/__subtitle/__chev`, `.hub-list`, `.hub-category`
+- **Anvand:** Settings-hub navigation (kort-listor som lankar till sub-sidor)
+- **INTE:** Generic listrader (anvand `.list-row`)
+### stat (`stat.css`)
+- **Klasser:** `.stat-grid`, `.stat-grid--single`, `.stat-card`, `.stat-card__value/__label/__unit/__sub`, `.stat-card__value--positive/-negative/-accent/-warning`
+- **Anvand:** Sma kort med stor siffra + label (read-only metric-display)
+- **INTE:** Editerbart varde (anvand `.setting-row`)
+### form (`form.css`)
+- **Klasser:** `.form-card`, `.form-section`, `.form-section__title`, `.form-group`, `.form-group__label`, `.form-hint`, `.form-row`, `.form-row--inline`
+- **Anvand:** Wrapper-strukturen for formularet
+- **INTE:** Inputs sjalva (egen `.input`)
+### setting-row (`setting-row.css`)
+- **Klasser:** `.setting-list`, `.setting-row`, `.setting-row--static/-danger`, `.setting-row__text/__label/__sub/__value/__amount/__chevron/__avatar/__pill`, `.setting-toggle/__track/__thumb`
+- **Anvand:** Tap-to-edit-rad som triggar bottom-sheet
+- **INTE:** Klickbart kort med rich content (anvand `.hub-card`)
+### collapsible (`collapsible.css`)
+- **Klasser:** `.collapsible-card`, `.collapsible__header/__header-text/__chev/__body`, `[data-expanded]`
+- **Anvand:** Panel som expanderar pa klick. JS togglar `data-expanded`
+- **INTE:** Modal-content (anvand `.dialog` eller `.sheet`)
+### hbar (`hbar.css`)
+- **Klasser:** `.hbar`, `.hbar__item/__track/__fill/__label/__value`, `.hbar__fill--positive/-warning/-negative`
+- **Anvand:** Generisk horisontell bar med label + value + track + fill
+- **INTE:** Status-progress (anvand `.progress`)
+### split-bar (`split-bar.css`)
+- **Klasser:** `.split-bar`, `.split-bar__segment`, `.split-bar__segment--primary/-secondary/-positive/-negative/-warning`, `.split-bar__label/__labels`
+- **Anvand:** Flersegment-bar for cost-split, debt-vs-equity m.fl.
+- **INTE:** Single-bar-progress (anvand `.hbar`)
+### hero (`hero.css`)
+- **Klasser:** `.hero`, `.hero__heading/__amount/__amount--card/__amount--fluid/__amount-row/__label/__label--muted/__meta/__actions`
+- **Anvand:** Stora display-rubriker (80px-skala default, 40px card)
+- **INTE:** Vanlig `<h1>` (anvand `.heading-1`)
+### chip (`chip.css`)
+- **Klasser:** `.chip`, `.chip--accent/-positive/-negative/-warning/-faint`, `.chip-list`, `.chip-list__item/__delete/__add`, `.brand-pill`, `.month-pill`, `.score-pill`, `.install-chip`
+- **Anvand:** Kort-format pills med dot-prefix (status, kategori, count)
+- **INTE:** Form-inputs (anvand `.input`)
+### avatar (`avatar.css`)
+- **Klasser:** `.avatar`, `.avatar--sm/-lg`
+- **Anvand:** Cirkular initial-avatar med accent-gradient
+- **INTE:** Foto-avatar (overlapp via custom regel)
+### list-row (`list-row.css`)
+- **Klasser:** `.list`, `.list-row`, `.list-row--excluded/-pending/-clickable`, `.list-row__icon/__body/__desc/__meta/__date/__amount`, `.list-row__amount--positive/-negative`
+- **Anvand:** Generisk listrad med ikon + body + amount (transaktioner, audit-log, jobs)
+- **INTE:** Settings-rad (anvand `.setting-row`)
+### table (`table.css`)
+- **Klasser:** `.table`, `.table .num`
+- **Anvand:** Tabell med tabular-nums-stod
+- **INTE:** Layout-grid (anvand CSS Grid utility)
+### auth (`auth.css`)
+- **Klasser:** `.auth-container`, `.auth-container__title/__subtitle`
+- **Anvand:** Centrerad layout for inloggning + onboarding
+- **INTE:** Settings-vyer
+### swipe-stack (`swipe-stack.css`)
+- **Klasser:** `.swipe-stack`, `.swipe-card`, `.swipe-card--back/-gone`, `.swipe-card__header/__title/__body/__footer`, `.swipe-decision-overlay`, `.swipe-decision-overlay--save/-dismiss/-visible`, `.swipe-actions`, `.swipe-action-btn`, `.swipe-action-btn--save/-dismiss`, `.swipe-meta`, `.swipe-meta-sep`, `.swipe-progress`, `.swipe-empty`, `.swipe-hint`
+- **Anvand:** Tinder-stil swipe-stack med drag-physics
+- **INTE:** Card-galleri (anvand `.card-grid`)
+### inline-edit (`inline-edit.css`)
+- **Klasser:** `.inline-edit`, `.inline-edit__text/__btn/__form/__input`
+- **Anvand:** Inline-edit av profil-namn, etiketter (pencil-knapp togglar form)
+- **INTE:** Form-fields (anvand `.form-group`)
+- **Special:** `.inline-edit__form[hidden]` har explicit `display: none` (paritet med globalt `[hidden]`-stod i base/pwa.css)
+### upload-spinner (`upload-spinner.css`)
+- **Klasser:** `.upload-spinner-overlay`, `.upload-spinner-overlay.is-visible`, `.upload-spinner`, `.upload-spinner-overlay__label/__hint`
+- **Anvand:** Viewport-overlay for langa async-operationer (OCR, AI-anrop)
+- **INTE:** Inline-spinner (anvand `.spinner`)
+### tab-bar (`tab-bar.css`)
+- **Klasser:** `.tab-bar`, `.tab-bar__item.is-active`
+- **Anvand:** Inline tab-grupp for format-val (CSV/Avi etc.)
+- **INTE:** Bottom-nav (anvand `.bottom-nav`)
+### colored-row (`colored-row.css`) - v3.1.0
+- **Klasser:** `.colored-row`, `.colored-row--sm/-lg`
+- **Anvand:** Kategoriserade rader, fargkodade listor, statusrader -
+  med vansterkant fran `--row-accent`-token (default: `--border-subtle`)
+- **INTE:** Rader utan fargkodning (anvand `.list-row` eller plain `.tx-row`)
+- **Tokens:** `--row-accent` (sattes av app-bindning), `--border-subtle` (default)
+- **Pattern:** Se "Kategori-monstret" nedan
+### colored-bar (`colored-bar.css`) - v3.1.0
+- **Klasser:** `.colored-bar`, `.colored-bar--sm/-md/-lg`, `.colored-bar--vertical`
+- **Anvand:** Budget-staplar, kategori-staplar, progress med semantisk
+  farg fran `--bar-accent`-token (default: `--accent-9`)
+- **INTE:** Generisk progress utan kategori (anvand `.progress`)
+- **Tokens:** `--bar-accent` (sattes av app-bindning), `--accent-9` (default)
+- **Pattern:** Se "Kategori-monstret" nedan
+## Kategori-monstret
+Paketet ager komponenten, appen ager kategorin. Token-definition och
+token-bindning ar appens ansvar - paketet vet ingenting om kategorier.
+### I paketet (@klodd/ds)
+```css
+.colored-row {
+  border-left: 3px solid var(--row-accent, var(--border-subtle));
+}
+.colored-bar {
+  background: var(--bar-accent, var(--accent-9));
+}
+```
+### I app-domain-filen (t.ex. ds/ekonom-domain.css)
+Definiera tokens + bindningar:
+```css
+/* Token-definition - VARDEN som ar app-specifika */
+:root {
+  --my-category: #A78BFA;
+}
+/* Token-bindning - kopplar app-tokens till paketets komponenter */
+.my-cat-row { --row-accent: var(--my-category); }
+.my-cat-bar { --bar-accent: var(--my-category); }
+```
+### I template
+```html
+<div class="colored-row my-cat-row">...</div>
+<div class="colored-bar my-cat-bar"></div>
+```
+### Resultat
+- Paketets `.colored-row` ar generic och ovetande om kategorier
+- App:s `.my-cat-row` sattes som wrapper som overrider `--row-accent`
+- Element-baserade `style="--row-accent: ..."` kan ocksa anvandas men
+  app-domain-CSS-bindningar ar att foredra (data-attribute-konvention
+  + lasbar template)
+Jubb, Ekonom, framtida appar foljer samma monster med sina egna tokens.
+## Anti-patterns
+- **`color: #FFF` i komponent-CSS.** Anvand `var(--text-on-accent)` eller `oklch(0.98 0 0)` som primitiv om absolut nodvandig.
+- **`background: rgba(...)`** istallet for `color-mix(in oklch, var(--accent-9) 20%, transparent)` eller en `--accent-aN`-token.
+- **`padding: 13px`** istallet for `--space-12` eller `--space-14` (narmaste pixel-numerisk).
+- **`font-size: 16px`** utan token. Inputs ska ha `--fs-17` (= 17px) for anti-iOS-zoom.
+- **Inline `style="width: 50%"` pa progress-bar.** Anvand `data-bar-width="50%"` + `bar-styles.js` (CSP-safe).
+- **`var(--gray-9)` i komponent-CSS.** Komponenter laser bara semantic.
+- **Egen .button-style.** Anvand `.btn` med modifier istallet.
+- **`font-weight: 700`.** Anvand `--fw-medium` (500). Display-siffror ar dokumenterat undantag.

package/references/03-quality-bar.md ADDED Viewed

@@ -0,0 +1,238 @@
+# Kvalitetskrav (icke-forhandlingsbara)
+Lista over absoluta krav som inte ska brytas. Varje krav har konkret
+"hur man foljer" + rationale.
+## 1. BEM-konvention pa alla CSS-klasser
+```
+.block
+.block__element
+.block--modifier
+.block__element--modifier
+```
+**Hur man foljer:**
+- Block: substantiv (`.card`, `.banner`, `.hub-card`)
+- Element: barn-del med `__` (`.card__title`, `.banner__content`)
+- Modifier: variant med `--` (`.btn--primary`, `.banner--warning`)
+- INGA hyphen-flat-namn (`.btn-primary` ar fel - ska vara `.btn--primary`)
+**Varfor:**
+- Specificity-balans: alla klasser ar 0,1,0 (en klass) - ingen
+  cascade-overraskning
+- Lasbart agentvanlig: en CC-session kan resonera om struktur utan
+  att lasa CSS:en
+- Etablerad branschstandard - manga developer-erfarenheter
+- Forhindrar "magic specificity" via descendant-selektorer
+## 2. WCAG AA minimum pa alla interaktiva komponenter
+**Konkreta krav:**
+- **Text-kontrast 4.5:1** mot bakgrund (Radix steg 11 mot steg 1-2 ar
+  pre-verifierad)
+- **Tap-target 44x44px** minimum (`--touch-min` = 44px)
+- **Synlig fokus-ring** pa alla interaktiva element via `:focus-visible`
+  (`outline: 2px solid var(--border-focus); outline-offset: 2px`)
+- **`prefers-reduced-motion`** respekteras pa alla animationer
+- **`prefers-contrast: more`** stegrar borders och muted-text 1-2 steg
+  (implementerat i 10-semantic.css)
+- **`hidden`-attribut respekteras** via global `[hidden] { display: none
+  !important }` i base/pwa.css
+- **ARIA-roles** pa alla interaktiva non-button-element (.dropdown-item
+  ska ha role="menuitem", .swipe-card ska ha role="article")
+**Varfor:**
+- Lagkrav i EU (Tillgangs-direktivet, EAA fran 2025)
+- Bredde tillganglighet ar PWA-default - inte feature i Klodd-apparna
+  som anvander mobilen i bil/buss/svaga ljusforhallanden
+- Radix Colors ar pre-WCAG-kalibrerade - att bryta mot dem kraver
+  medvetet val + ny dokumentation
+## 3. Inga hardkodade farg-, spacing- eller fs-varden i komponent-CSS
+**Hur man foljer:**
+- ALDRIG `color: #FF0000` - anvand `var(--negative)` eller `var(--red-9)`
+- ALDRIG `padding: 13px` - anvand `var(--space-12)` eller `var(--space-14)`
+- ALDRIG `font-size: 16px` direkt - anvand `var(--fs-17)` for inputs
+  eller anvand klasser som `.text-base`
+- ALDRIG `border-radius: 10px` - anvand `var(--radius-10)`
+- ALDRIG `rgba(0, 0, 0, 0.4)` - anvand `color-mix(in oklch, ...)` eller
+  semantic alpha-token
+**Varfor:**
+- Single source of truth: andring i 00-primitives.css landar omedelbart
+  i alla komponenter
+- App-byte fungerar: hardkodad #0090ff i en komponent skulle ge fel farg
+  for Ekonom (som har Plum-accent)
+- Token-search ar viktigare an pixel-precision: designern andrar `--fs-14`
+  fran 14px till 15px i en sprint, alla komponenter foljer med
+## 4. Pixel-numerisk spacing/typografi/radius
+**Hur man foljer:**
+- `--space-N` dar N = exakt antal pixlar
+- Tillgangliga steg: 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 28, 32,
+  40, 48, 56, 64, 80
+- Vanliga val: 4-8 (tight), 10-14 (komponent-internt), 16-20 (kort-padding),
+  24-32 (sektioner), 40+ (hero-spacing)
+- Behover du `--space-15`? Fragstall det forst - oftast funkar 14 eller 16.
+  Lagga till nya steg kraver token-uppdatering + dokumentation
+**Varfor:**
+- LLM-vanligt: `--space-12 = 12px` ar trivialt att resonera om
+- Designerns Figma-varde matchar token-namnet 1:1 utan mappning
+- Forhindrar ordinal-explosion (md/lg/xl/2xl/3xl-stelhet)
+## 5. Font-weight 400 eller 500 - inga undantag utan dokumentation
+**Hur man foljer:**
+- `--fw-regular: 400` for vanlig text
+- `--fw-medium: 500` for emphasis (knapptext, etiketter, rubriker)
+- INGA 600 eller 700 utom dokumenterade undantag
+- Display-siffror (`.hero-amount`) har `font-weight: 600` - dokumenterat
+  i `components/hero-roll.css` med kommentar
+**Varfor:**
+- Mer val skapar inkonsistens: en designer valjer 600 nagon gang, en
+  annan 700, snart finns alla varianter och inget mover hierarki
+- Tva-steg ger tillrackligt med visual hierarchy: medium ar emphasis,
+  regular ar default
+- Display-undantaget ar OK eftersom 80px-display behover visual tyngd
+  som UI-text inte gor
+**Trade-off:**
+- Bold-text-effekt ar narvarande pa display-skala. Vid framtida
+  feature-arbete dar bold-text behovs (banners-hero?), maste den
+  motiveras + dokumenteras.
+## 6. color-mix() istallet for hardkodade alpha-varden
+**Hur man foljer:**
+```css
+/* Korrekt */
+background: color-mix(in oklch, var(--accent-9) 20%, transparent);
+/* Eller anvand semantic alpha-token */
+background: var(--accent-a3);
+/* Felaktigt */
+background: rgba(0, 144, 255, 0.2);  /* hardkodad rgb */
+background: rgba(var(--accent-rgb), 0.2);  /* token-baserad rgb */
+```
+**Varfor:**
+- color-mix(in oklch, ...) ar perceptuellt korrekt - rgb-alpha ger
+  olika visuell intensitet beroende pa fargen
+- Foljer accent-byte automatiskt: en color-mix mot --accent-9 ger Blue
+  i Jubb och Plum i Ekonom utan komponent-andring
+- Modern browser-stod (Chrome 111+, Safari 16.4+, Firefox 113+) som
+  redan kravs av Radix-OKLCH-ramparna - ingen polyfill behovs
+## 7. Per-app-overrides bara i apps/<app>.css - aldrig i komponent-CSS
+**Hur man foljer:**
+- Ny app introduceras genom 5-15 rader CSS i `apps/foo.css`
+- Komponenter forandras INTE for ny app
+- Per-app-overrides ar bara accent-tokens (+ ev. surface-tokens om appen
+  vill avvika fran neutral-default)
+**Varfor:**
+- Komponenten ar source of truth - en regel galler i alla apps
+- Driften mellan apparna minimeras
+- Ny app ar trivial att introducera - INTE en re-fork av komponenter
+- App-byten i samma DOM (om relevant) blir trivialt - bara `data-app`-flip
+## 8. Komponent-states: alla 4 states pa interaktiva komponenter
+**Hur man foljer:**
+Varje interaktiv komponent SKA ha:
+- `:hover` - bakgrund eller fargandring (anvand `--surface-hover` eller `--accent-10`)
+- `:active` - press-feedback (anvand `--surface-active` plus `transform: scale(0.97)`)
+- `:focus-visible` - tangentbordsfokusring (`outline: 2px solid var(--border-focus); outline-offset: 2px`)
+- `:disabled` eller `[disabled]` - opacity 0.5 + cursor: not-allowed + pointer-events: none
+- Loading-state om relevant (sa knapp inte kan dubbel-klickas)
+**Varfor:**
+- Tangentbordsanvandare ser inte hover - de behover focus-visible
+- Touch-anvandare maste fa visuell feedback vid press
+- Disabled-state ska var visuellt och funktionellt blockerande
+- Konsekvens utover komponentbiblioteket - en knapp i Jubb beter sig
+  identiskt som en knapp i Ekonom
+## 9. CSP-saker JS-driven styling
+**Hur man foljer:**
+- Inline `style="width: 50%"` blockeras av CSP (style-src utan unsafe-inline)
+- Anvand `data-bar-width="50%"` + `bar-styles.js` som applicerar via
+  JS-runtime (`element.style.width = el.dataset.barWidth`)
+- JS-runtime-styling ar tillaten av CSP - bara HTML-parser-styling ar
+  blockerad
+**Varfor:**
+- Mozilla Observatory A+ kraver inga `unsafe-inline` i style-src
+- Inline-styles ar svara att audit:a (kommandot `git grep style=` borde
+  hitta noll matches i template-filer)
+## 10. En enda skugga tillaten (DNB Eufemia "arlig materialitet")
+**Hur man foljer:**
+- ENDAST `var(--shadow-card)` i hela systemet
+- Aldrig `--shadow-resting/-raised/-floating` eller liknande hierarkisk
+  skugg-skala
+- Aldrig hardkodade `box-shadow: 0 X Y rgba(...)`
+- Hierarki uppnas via surface-tokens (`--surface-page` < `-default` <
+  `-raised` < `-overlay`), INTE via olika skugg-djupa
+**Varfor:**
+- Dark-mode-first design: skuggor syns inte tydligt mot mork bakgrund -
+  ljushet-hierarki ar mer effektiv
+- DNB Eufemias "arliga materialitet": skuggor som bara existerar nar
+  fysiskt motiverat (kort som svarar mot bakgrund). Inga fake gradient-
+  skuggor som imiterar djup som inte finns.
+- Forhindrar skugg-explosion: en designer valjer 0.5 nagon gang, en
+  annan 0.7, snart finns alla varianter och visuellt sprak ar splittrat
+## 11. Inter font + Linear-stack
+**Hur man foljer:**
+- Anvand `var(--font-sans)` overallt - ALDRIG specifika font-family-
+  stackar i komponenter
+- Default-stack ar `Inter, SF Pro Display, -apple-system, system-ui, ...`
+  (Linear-konventionen)
+- Inter laddas via Google Fonts i `base/typography.css` om enheten
+  saknar den lokalt
+- Numeriska data: `font-variant-numeric: tabular-nums` for kolumn-
+  justering (siffror packar identiskt)
+**Varfor:**
+- Inter ar designad for UI-text och fungerar konsekvent over alla
+  storlekar
+- SF Pro Display ar Apples designspraket (synkad UX-feeling pa iOS)
+- system-ui som universell fallback for nischade plattformar
+- Linear, Vercel och liknande modern SaaS anvander samma stack
+## 12. Audit-aliaser halls levande tills hela migration genomford
+**Hur man foljer:**
+- Gamla token-namn (--text-primary, --bg-base, --accent-dim) finns kvar
+  i 10-semantic.css's "LEGACY ALIASES"-block
+- Komponent-CSS som migrerats anvander nya semantic-namn
+  (--text-default, --surface-page, --accent-a3)
+- Tar INTE bort legacy-aliaser forrans alla call-sites migrerats
+**Varfor:**
+- Migrations-bro: app-CSS som inte uppdaterats fortsatter funka
+- Big-bang-migrationer ar riskabla - per-template-migration ar saker
+- Open punkter dokumenterade i `05-open-decisions/`