@klodd/ds 3.5.7 → 3.6.0

package/css/components/chip.css

@@ -1,15 +1,26 @@
 /* ================================================================
    components/chip.css
-   Sma status-pills. .chip ar bas. Modifiers: --accent, --positive,
-   --negative, --warning, --faint.
-
-   Plus relaterade pill-mont:
-   - .brand-pill: liten pill med projekt-namn
-   - .month-pill: navigations-pill for manads-byte
-   - .install-chip: PWA install-prompt floating-pill
-   - .score-pill: ratings-pill (variants --strong/--medium/--low)
-
-   .chip-list ar wrapper for flera chips i rad (form-edit-flode).
+   Pills- och chips-familjen: sex fristående blocks som delar
+   form-språket (rounded-full, kompakt padding, inline-flex).
+
+   Blocks:
+     .chip          - generisk status-pill med dot-prefix (har modifiers)
+     .chip-list     - sibling-wrapper för chips i rad (har __item/__delete/__add)
+     .brand-pill    - projekt-namn-pill i topbar
+     .month-pill    - navigations-pill för månadsbyte (Ekonom)
+     .score-pill    - ratings-pill (NB: definieras även i badge.css - identiska regler)
+     .install-chip  - PWA install-prompt som flyter ovan bottom-nav
+
+   HTML-relationer:
+     .chip-list innehåller .chip-list__item (egna BEM-element, ej .chip)
+     Övriga blocks är fristående och placeras där de behövs
+
+   Modifiers:
+     .chip       --accent/-positive/-negative/-warning/-faint
+     .score-pill --strong/-medium/-low
+
+   .install-chip har egna BEM-element (__text/__install/__dismiss) plus
+   keyframe-animation install-chip-up (respekterar prefers-reduced-motion).
    ================================================================ */
 .chip {
   display: inline-flex;

package/css/components/collapsible.css

@@ -1,14 +1,25 @@
 /* ================================================================
    components/collapsible.css
-   Panel som expanderar pa klick. Anvands for budget-sektioner,
+   Panel som expanderar på klick. Används för budget-sektioner,
    kategori-grupper, FAQ-rader.
 
-   Element: .collapsible-card (root) som ar bas.
-   - .collapsible__header  klickbar header (button-element)
-   - .collapsible__body    expanderat innehall (hidden default)
-   - .collapsible__chev    chevron som roterar 180deg
+   Block:
+     .collapsible-card  - root-block (huvud-container)
 
-   State drivs via [data-expanded] attribut pa root - JS togglar.
+   BEM-element av blocket:
+     .collapsible__header       - klickbar header (button-element)
+     .collapsible__header-text  - text-wrapper i header
+     .collapsible__body         - expanderat innehåll (hidden default)
+     .collapsible__chev         - chevron som roterar 180deg
+
+   ANTECKNING (BEM-stam-mismatch, öppen punkt):
+   Blocket heter .collapsible-card men elementen heter .collapsible__X
+   (utan -card-suffix). Två lösningar finns: rename block till
+   .collapsible eller rename element till .collapsible-card__X.
+   Underlag finns i sprint-rapport 2026-05-09. Ingen rename i fas 1.
+
+   States:
+     [data-expanded] på .collapsible-card  - JS togglar, roterar __chev 180deg
    ================================================================ */
 .collapsible-card {
   background: var(--surface-raised);

package/css/components/feedback.css

@@ -1,7 +1,26 @@
 /* ================================================================
    components/feedback.css
-   Toast, empty-state, skeleton-loader, spinner.
-   Komponenter for transient feedback och loading-states.
+   Transient feedback och loading-states: fyra fristående blocks som
+   tematiskt hör ihop (status- eller loading-feedback) men används
+   oberoende i HTML.
+
+   Blocks:
+     .toast       - transient meddelande (ankrat top-center via toast-region)
+     .empty-state - centrerad ikon + rubrik + text för tomma listor
+     .skeleton    - loading-placeholder med pulse-animation
+     .spinner     - roterande loader (inline-block)
+
+   Inga inbördes HTML-relationer - alla fyra placeras självständigt.
+   .toast och .empty-state har egna BEM-element (__title/__text/__icon).
+   .skeleton och .spinner har bara modifiers.
+
+   Modifiers:
+     .toast    --success/-error/-warning
+     .skeleton --text/-circle/-card
+     .spinner  --sm/-lg
+
+   Alla fyra respekterar prefers-reduced-motion (animation tas bort
+   eller saktas ned).
    ================================================================ */
 
 

package/css/components/form.css

@@ -1,9 +1,23 @@
 /* ================================================================
    components/form.css
-   Form-skelett. .form-section, .form-group, .form-row.
+   Form-skelett: wrapper-strukturen som gör formuläret komplett.
+   Skiljer sig från input.css (input-elementen själva).
 
-   Skiljer sig fran input.css (input-elementen). form.css ar
-   wrapper-strukturen som gor formularet komplett.
+   Blocks:
+     .form-card     - kort-style wrapper för forms (max-width 480px)
+     .form-section  - sektion-grupp inom form (har __title)
+     .form-group    - field-grupp: label + input (har __label)
+     .form-hint     - help-text under field (atomisk)
+     .form-row      - horisontell field-rad (grid-baserad, har --inline)
+
+   Alla fem är fristående blocks. .form-section och .form-group har
+   egna BEM-element (__title, __label). De kombineras fritt - ingen
+   tvingad hierarki i CSS:en.
+
+   HTML-relationer (vanligt mönster, ej tvingande):
+     .form-card > .form-section > .form-group > .form-row > <inputs>
+
+   Modifiers: .form-row har --inline (flex-wrap-variant).
    ================================================================ */
 .form-card {
   background: var(--surface-raised);

package/css/components/hero.css

@@ -1,14 +1,23 @@
 /* ================================================================
    components/hero.css
-   Stora display-rubriker med amount + meta. Anvands pa dashboard,
+   Stora display-rubriker med amount + meta. Används på dashboard,
    detaljvyer, primary-page-toppar.
 
-   Element: .hero (wrapper), .hero__heading, .hero__amount (default 80px),
-   .hero__amount--card (40px sekundar), .hero__amount-row, .hero__label,
-   .hero__label--muted, .hero__meta, .hero__actions.
+   Blocks:
+     .hero         - wrapper med padding och text-alignment (huvud-block)
+     .hero-amount  - sibling-block: hero-roll-animations-target
 
-   .hero-amount och .hero__amount-roll anvands av hero-roll-animation
-   - se components/hero-roll.css for animation-styling.
+   .hero har BEM-element (__heading/__amount/__amount-row/__label/__meta/__actions).
+   .hero-amount är ett separat root-block av historiska skäl - hero-roll-
+   animationen adresserar just klassen .hero-amount[data-animate-roll],
+   inte .hero__amount. Definieras även i hero-roll.css (animation-styling).
+
+   Modifiers:
+     .hero__amount --card (40px sekundär), --fluid (clamp 40-80px)
+     .hero__label  --muted
+
+   Se components/hero-roll.css för digit-roller-styling när
+   data-animate-roll triggar animationen.
    ================================================================ */
 .hero {
   padding: var(--space-20) var(--space-4) var(--space-24);

package/css/components/hub-card.css

@@ -1,11 +1,20 @@
 /* ================================================================
    components/hub-card.css
-   Stora settings-hub-kort. Anvands i settings-hub-vyer dar varje
-   kort lankar till en sub-sida. Layout: ikon + titel + subtitle +
-   chev. Hela kortet ar klickbart.
+   Settings-hub-navigation: kort-listor som länkar till sub-sidor.
+   Layout per kort: ikon + titel + subtitle + chevron. Hela kortet
+   är klickbart.
 
-   .hub-list samlar flera hub-cards i en kolumn.
-   .hub-category ar group-rubrik over flera kort.
+   Blocks:
+     .hub-card     - klickbart kort (huvud-block med BEM-element)
+     .hub-list     - sibling-wrapper: <ul> som samlar flera hub-cards
+     .hub-category - sibling-block: <h6>-rubrik över en hub-list-grupp
+
+   HTML-relationer:
+     .hub-list innehåller flera <li> med .hub-card
+     .hub-category placeras som sibling FÖRE .hub-list (inte inuti)
+
+   Bara .hub-card har egna BEM-element (__icon/__text/__title/__subtitle/__chev).
+   .hub-list och .hub-category är fristående blocks utan egna element.
    ================================================================ */
 .hub-list {
   display: flex;

package/css/components/input.css

@@ -1,12 +1,27 @@
 /* ================================================================
    components/input.css
-   .input + .textarea + .select med konsekvent styling.
-   States: :focus, :disabled, [aria-invalid="true"] (error).
-   Tillagg: .input-group (label + input + error), .input-icon (input
-   med leading ikon).
+   Form-fält med iOS-zoom-skydd (17px font-size).
 
-   Regel: font-size 17px sa iOS Safari inte auto-zoomar in vid focus.
-   Aldrig under 16px pa input-element.
+   Blocks:
+     .input        - text-input-element (single-line)
+     .textarea     - textarea-element (multi-line)
+     .select       - select-element med custom chevron-bg
+     .input-group  - sibling-wrapper: label + input + hint/error
+     .input-icon   - sibling-wrapper: leading-ikon + input
+
+   .input/.textarea/.select delar bas-styling via comma-selector.
+   .input-group och .input-icon är fristående blocks, inte BEM-element
+   av .input. I HTML ligger ett .input-element som child inuti
+   wrapper-blocken (DOM-konvention, inte BEM-relation).
+
+   Modifiers: inga klassiska BEM-modifiers - tillstånd via [aria-invalid].
+
+   States på .input/.textarea/.select: :focus, :disabled, [aria-invalid="true"].
+   Text-inputs använder :focus istället för :focus-visible som dokumenterat
+   undantag (Radix UI/MUI/shadcn-konvention).
+
+   Regel: font-size 17px så iOS Safari inte auto-zoomar vid focus.
+   Aldrig under 16px på input-element.
    ================================================================ */
 
 

package/css/components/list-row.css

@@ -1,17 +1,27 @@
 /* ================================================================
    components/list-row.css
-   Generisk list-rad med ikon + body + amount. Anvands for transaktioner,
+   Generisk list-rad med ikon + body + amount. Används för transaktioner,
    subscriptions, audit-logs, jobblistor.
 
    Tidigare hette komponenten .tx-row (transaction) - nu generaliserad
-   till .list-row sa inte affarsdomanen sipprar in i namnet.
+   till .list-row så inte affärsdomänen sipprar in i namnet.
 
-   Element: .list-row__icon, .list-row__body, .list-row__desc,
-   .list-row__amount, .list-row__date, .list-row__meta.
+   Blocks:
+     .list      - sibling-wrapper: <ul>-reset (list-style none, no padding)
+     .list-row  - själva raden (huvud-block med BEM-element)
 
-   Modifiers: --excluded (greyed out), --pending (with dashed border).
+   HTML-relationer:
+     .list innehåller flera <li> med .list-row (vanligt men ej tvingande)
+     .list-row kan också användas fristående utanför .list
 
-   App-specifika domain-overrides (kategori-fargade ikoner) lever i
+   .list-row har element __icon/__body/__desc/__date/__amount/__meta.
+   .list är atomisk (ingen __element).
+
+   Modifiers:
+     .list-row          --excluded (greyed out), --pending (dashed border), --clickable
+     .list-row__amount  --positive/-negative
+
+   App-specifika domain-overrides (kategori-färgade ikoner) lever i
    app-repots egna CSS - inte i paketet.
    ================================================================ */
 .list {

package/css/components/nav.css

@@ -1,9 +1,22 @@
 /* ================================================================
    components/nav.css
-   Bottom-nav, topbar och tab-bar - tre standardnavigations-monster.
+   Tva navigations-blocks: fixed bottom-nav och in-flow topbar.
+   Tab-bar och .tab-bar__item lever i components/tab-bar.css.
 
-   Bottom-nav ar position:fixed och ALLTID synlig pa mobil. Topbar
-   ar in-flow under safe-area. Tab-bar ar inline (inom en panel).
+   Blocks:
+     .bottom-nav  - position:fixed pa mobil-botten (har __item)
+     .topbar      - in-flow header under safe-area (har __back/__title/__action)
+
+   HTML-relationer:
+     .bottom-nav > .bottom-nav__item (BEM-element)
+     .topbar > .topbar__back/__title/__action (BEM-element)
+
+   Modifiers/States:
+     .bottom-nav__item--active  - aktiv pod (Sprint F BEM-konvertering)
+
+   Sprint 1 (3.6.0): den gamla flat-form-varianten .tab + .tab-bar i
+   denna fil togs bort. Den hade min-height: 36px under WCAG-kravet
+   44px. Kanonisk tab-komponent: .tab-bar__item i tab-bar.css.
    ================================================================ */
 
 
@@ -150,53 +163,3 @@
   outline: 2px solid var(--border-focus);
   outline-offset: 2px;
 }
-
-
-/* ================================================================
-   ==== TAB-BAR (inline tabs i panel)
-   Segmented control monster. Active-tab har highlighted bg.
-   ================================================================ */
-.tab-bar {
-  display: flex;
-  gap: var(--space-4);
-  padding: var(--space-4);
-  background: var(--surface-default);
-  border-radius: var(--radius-12);
-}
-
-.tab {
-  flex: 1;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 36px;
-  padding: 0 var(--space-12);
-  font-family: inherit;
-  font-size: var(--fs-13);
-  font-weight: var(--fw-medium);
-  color: var(--text-subtle);
-  background: transparent;
-  border: 0;
-  border-radius: var(--radius-8);
-  cursor: pointer;
-  text-decoration: none;
-  transition:
-    background var(--dur-fast) var(--ease-spring-snappy),
-    color var(--dur-fast) var(--ease-spring-snappy);
-}
-
-@media (hover: hover) and (pointer: fine) {
-  .tab:not(.active):hover {
-    color: var(--text-default);
-  }
-}
-
-.tab.active {
-  background: var(--surface-raised);
-  color: var(--text-default);
-}
-
-.tab:focus-visible {
-  outline: 2px solid var(--border-focus);
-  outline-offset: 2px;
-}

package/css/components/progress.css

@@ -1,17 +1,29 @@
 /* ================================================================
    components/progress.css
-   Linjar progress-indikator. Anvands for budget-burndown, upload-
-   status, multi-step-flows. Modifiers for status-fargning.
+   Linjär progress-indikator. Används för budget-burndown, upload-
+   status, multi-step-flows.
 
-   .progress ar wrappern (track), .progress-bar ar fyllnaden.
-   Sätt width via inline style eller data-attribut + JS (CSP-safe).
+   Blocks:
+     .progress      - track (wrapper, surface-raised bg)
+     .progress-bar  - fyllning (eget block, alltid DOM-child av .progress)
 
-   Brief-pattern fran Ekonom:
+   HTML-relationer:
+     .progress-bar placeras alltid som child inuti .progress i HTML.
+     CSS-mässigt fristående block - flat-namnet behålls av historiska
+     skäl (inte .progress__bar). Se references/03-quality-bar.md
+     regel 11 om fil med flera root-blocks.
+
+   Modifiers:
+     .progress-bar  --success/-warning/-danger
+
+   Bredd via CSP-safe pattern (bar-styles.js applicerar style.width
+   från data-bar-width vid runtime):
      <div class="progress">
        <div class="progress-bar progress-bar--warning"
             data-bar-width="73%"></div>
      </div>
-   bar-styles.js applicerar style.width fran data-bar-width.
+
+   Respekterar prefers-reduced-motion (transition tas bort).
    ================================================================ */
 .progress {
   width: 100%;

package/css/components/stat.css

@@ -1,10 +1,19 @@
 /* ================================================================
    components/stat.css
-   Stat-card och metric-card - sma kort med stor siffra + label.
-   .stat-grid lagger ut flera kort i grid (2 kol mobil, 4 desktop).
+   Små kort med stor siffra + label. Används för read-only metric-display.
 
-   .stat-card ar nyare BEM-versionen. .metric-card behalls for
-   bakatkompat med befintliga vyer som anvander metric-grid.
+   Blocks:
+     .stat-grid  - grid-container (2 kol mobil, 4 desktop)
+     .stat-card  - kort med siffra + label (huvud-block med BEM-element)
+
+   HTML-relationer:
+     .stat-grid > .stat-card (multipel, layout-grid)
+
+   .stat-card har element __value/__label/__unit/__sub.
+
+   Modifiers:
+     .stat-grid          --single (1-kol-grid)
+     .stat-card__value   --positive/-negative/-accent/-warning
    ================================================================ */
 .stat-grid {
   display: grid;

package/css/components/swipe-stack.css

@@ -1,23 +1,42 @@
 /* ================================================================
    components/swipe-stack.css
-   Tinder-stil swipe-card-stack med drag-physics. Anvands for
+   Tinder-stil swipe-card-stack med drag-physics. Används för
    triage-flow, decision-cards, tutorial-stacks.
 
-   Klassnamn ar generiska (.swipe-*) - inte vy-specifika (.triage-*).
-   App-repots vyer applicerar dessa pa sina specifika data-cards.
-
-   Element:
-   - .swipe-stack: container med relative position
-   - .swipe-card: individuellt kort (absolute positionerat)
-   - .swipe-card__header: ovre header-omrade
-   - .swipe-card__body: huvud-innehall
-   - .swipe-card__footer: nedre actions-rad
-   - .swipe-card__back: nasta kort i stacken (visuellt bakom)
-   - .swipe-decision-overlay: overlay med "spara"/"avfard" indikator
-   - .swipe-actions: knapp-rad under stacken
-   - .swipe-meta: kort-meta-info
-   - .swipe-progress: progress-indikator
-   - .swipe-empty: tomt-state
+   Klassnamn är generiska (.swipe-*) - inte vy-specifika (.triage-*).
+   App-repots vyer applicerar dessa på sina specifika data-cards.
+
+   Blocks (10 fristående blocks i swipe-familjen):
+
+   Stack och kort:
+     .swipe-stack             - container med relative position
+     .swipe-card              - individuellt kort (absolute positionerat, har BEM-element)
+
+   Decision-overlays och actions:
+     .swipe-decision-overlay  - overlay med "spara"/"avfärd"-indikator
+     .swipe-actions           - knapp-rad under stacken
+     .swipe-action-btn        - rund knapp i swipe-actions
+
+   Meta och feedback:
+     .swipe-meta              - kort-meta-info (inline-flex)
+     .swipe-meta-sep          - dot-separator mellan meta-items
+     .swipe-progress          - text "X av Y"
+     .swipe-empty             - tomt-state när stacken är klar
+     .swipe-hint              - hint-text (t.ex. "Svep åt sidan")
+
+   HTML-relationer:
+     .swipe-stack > .swipe-card (multipel, absolute positionerade)
+     .swipe-card > .swipe-decision-overlay (overlay i kortet)
+     .swipe-actions > .swipe-action-btn (multipel)
+     Övriga är fristående.
+
+   Bara .swipe-card har egna BEM-element (__header/__title/__body/__footer).
+   Övriga blocks är atomiska eller har bara modifiers.
+
+   Modifiers:
+     .swipe-card             --back/-gone
+     .swipe-decision-overlay --save/-dismiss/-visible
+     .swipe-action-btn       --save/-dismiss
    ================================================================ */
 .swipe-stack {
   position: relative;

package/css/components/tab-bar.css

@@ -61,3 +61,10 @@
   outline: 2px solid var(--border-focus);
   outline-offset: 2px;
 }
+
+.tab-bar__item:disabled,
+.tab-bar__item[aria-disabled="true"] {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}

package/css/components/upload-spinner.css

@@ -1,10 +1,24 @@
 /* ================================================================
    components/upload-spinner.css
-   Stor loading-overlay som tacker viewport. Anvands for OCR-uploads,
-   AI-anrop och andra langa async-operations dar appen ar blockerad.
+   Viewport-overlay för långa async-operations (OCR, AI-anrop, andra
+   där appen är visuellt blockerad).
 
-   .upload-spinner-overlay ar fixed-positionerat overlay som visas
-   nar .is-visible-klassen togglas via JS.
+   Blocks:
+     .upload-spinner-overlay  - fixed-positionerat overlay (huvud-block)
+     .upload-spinner          - själva spinner-cirkeln (atomisk)
+
+   HTML-relationer:
+     .upload-spinner-overlay > .upload-spinner + label + hint
+     (spinner ligger inuti overlay, men är ett separat CSS-block)
+
+   .upload-spinner-overlay har BEM-element __label/__hint plus
+   .is-visible state-class (JS togglar för display: flex).
+   .upload-spinner är atomisk - används bara som child av overlay.
+
+   States:
+     .upload-spinner-overlay.is-visible  - visa overlay (display: flex)
+
+   Animation upload-spinner-rotate respekterar prefers-reduced-motion.
    ================================================================ */
 .upload-spinner-overlay {
   position: fixed;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@klodd/ds",
-  "version": "3.5.7",
+  "version": "3.6.0",
   "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/02-components.md

@@ -1,84 +1,116 @@
 # Komponentkatalog
 
-33 komponenter i `@klodd/ds@3.x`. Alla refererar bara semantic tokens -
+35 komponent-filer i `@klodd/ds@3.x`. Alla refererar bara semantic tokens -
 inga primitives. BEM-konvention (block__element--modifier).
 
+## Klassificeringsformat
+
+För varje entry gäller:
+
+- **Blocks:** root-blocks i filen. Flera blocks kan dela en fil när de är
+  semantiskt relaterade (se `references/03-quality-bar.md` regel 11).
+  Sibling-relation eller wrapper-roll noteras i parentes.
+- **Element:** BEM-element (`block__element`). Listas bara om de finns.
+- **Modifiers:** BEM-modifiers (`block--modifier`). Listas bara om de finns.
+- **States:** state-classes (`.is-X`) eller attribut-states (`[data-X]`).
+  Listas bara om de finns.
+
 ## Grundkomponenter
 
 ### button (`button.css`)
-- **Klasser:** `.btn`, `.btn--primary/-secondary/-ghost/-danger`, `.btn--sm/-lg/-icon/-circle`, `.btn--loading`
+- **Blocks:** `.btn`
+- **Modifiers:** `.btn--primary/-secondary/-ghost/-danger`, `.btn--sm/-lg/-icon/-circle`, `.btn--block/-add`, `.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`
+- **Blocks:** `.input`, `.textarea`, `.select`, `.input-group` (sibling-wrapper for label + input + hint/error), `.input-icon` (sibling-wrapper for input med leading ikon)
+- **Element:** `.input-group__label`, `.input-group__hint`, `.input-group__error`
+- **States:** `:focus`, `:disabled`, `[aria-invalid="true"]` (text-inputs anvander `:focus` istallet for `:focus-visible` per dokumenterat undantag)
 - **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`
+- **Blocks:** `.badge`, `.score-pill` (sibling, definieras aven i `chip.css` med identiska regler)
+- **Modifiers:** `.badge--neutral/-success/-warning/-danger/-accent`, `.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`
+- **Blocks:** `.card`
+- **Element:** `.card__header`, `.card__body`, `.card__footer`, `.card__divider`
+- **Modifiers:** `.card--interactive`, `.card--flush`
 - **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`
+- **Blocks:** `.bottom-nav`, `.topbar`, `.tab-bar`, `.tab` (child av tab-bar)
+- **Element:** `.bottom-nav__item`, `.topbar__back`, `.topbar__title`, `.topbar__action`
+- **Modifiers:** `.bottom-nav__item--active` (Sprint F BEM-konvertering)
+- **States:** `.tab.active`
 - **Anvand:** Mobile bottom-nav (fixed), in-flow topbar, segmented tabs
-- **INTE:** Generisk navigations-meny (anvand `.dropdown`)
+- **INTE:** Generisk navigations-meny (anvand `.dropdown`). For utokad tab-bar med 44px touch-target, anvand `.tab-bar__item` fran `tab-bar.css`
 - **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`
+- **Blocks:** `.toast`, `.empty-state`, `.skeleton`, `.spinner` (fyra fristaende blocks i samma fil - feedback-familjen)
+- **Element:** `.empty-state__icon`, `.empty-state__title`, `.empty-state__text`
+- **Modifiers:** `.toast--success/-error/-warning`, `.skeleton--text/-circle/-card`, `.spinner--sm/-lg`
 - **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`
+- **Blocks:** `.dialog`, `.sheet` (sibling - tva olika overlay-monster i samma fil)
+- **Element:** `.dialog__backdrop`, `.dialog__header`, `.dialog__body`, `.dialog__footer`, `.sheet__handle`, `.sheet__body`, `.sheet__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`
+- **Blocks:** `.icon`, `.icon-custom` (sibling - wrapper for handritade SVG som Lucide saknar)
+- **Modifiers:** `.icon--xs/-sm/-md/-lg/-xl`
 - **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-amount__digit-track`
+- **Blocks:** `.hero-amount` (definieras aven i `hero.css`)
+- **Element:** `.hero-amount__digit-track`
+- **States:** `[data-animate-roll]` pa `.hero-amount` (JS triggar animation)
 - **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`
+- **Blocks:** `.divider`
+- **Modifiers:** `.divider--vertical`, `.divider--strong`
 - **Anvand:** Horisontell eller vertikal separator
-- **INTE:** Visuell separator inom card (anvand `.card-divider`)
+- **INTE:** Visuell separator inom card (anvand `.card__divider`)
 - **Tokens:** `--border-subtle/-default`
 
 ### progress (`progress.css`)
-- **Klasser:** `.progress`, `.progress-bar`, `.progress-bar--success/-warning/-danger`
+- **Blocks:** `.progress` (track), `.progress-bar` (fyllning, alltid DOM-child av `.progress`)
+- **Modifiers:** `.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`
+- **Blocks:** `.tooltip-wrapper` (compound block, parent i DOM), `.tooltip` (child i DOM, eget CSS-block)
 - **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`
+- **Special:** `.tooltip-wrapper` ar compound block, INTE flat-element av `.tooltip`. Wrappern ar utanfor `.tooltip` i DOM (parent, inte child).
 
 ### dropdown (`dropdown.css`)
-- **Klasser:** `.dropdown.is-open`, `.dropdown-menu`, `.dropdown-item`, `.dropdown-item--danger`, `.dropdown-divider`
+- **Blocks:** `.dropdown`, `.dropdown-menu`, `.dropdown-item`, `.dropdown-divider` (siblings i dropdown-familjen)
+- **Modifiers:** `.dropdown-item--danger`
+- **States:** `.dropdown.is-open`, `.dropdown.is-open-toggling`
 - **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`
@@ -87,103 +119,140 @@ inga primitives. BEM-konvention (block__element--modifier).
 ## Layout-komponenter (v3.0.0+)
 
 ### banner (`banner.css`)
-- **Klasser:** `.banner`, `.banner--hero/-accent/-positive/-negative/-warning`, `.banner__title/__sub/__content`
+- **Blocks:** `.banner`
+- **Element:** `.banner__title`, `.banner__sub`, `.banner__content`
+- **Modifiers:** `.banner--hero/-accent/-positive/-negative/-warning`
 - **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`
+- **Blocks:** `.panel`
+- **Element:** `.panel__title`, `.panel__title-row`, `.panel__title-meta`, `.panel__title-link`, `.panel__header-row`, `.panel__step-row`, `.panel__step-badge`, `.panel__pill`
+- **Modifiers:** `.panel--info`, `.panel--info-warning`, `.panel--danger`, `.panel--attention`
 - **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`
+- **Blocks:** `.hub-card`, `.hub-list` (sibling-wrapper for kort-lista), `.hub-category` (sibling-rubrik over hub-list)
+- **Element:** `.hub-card__icon`, `.hub-card__text`, `.hub-card__title`, `.hub-card__subtitle`, `.hub-card__chev`
 - **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`
+- **Blocks:** `.stat-grid` (grid-container), `.stat-card` (kort med BEM-element)
+- **Element:** `.stat-card__value`, `.stat-card__label`, `.stat-card__unit`, `.stat-card__sub`
+- **Modifiers:** `.stat-grid--single`, `.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`
+- **Blocks:** `.form-card`, `.form-section`, `.form-group`, `.form-hint`, `.form-row` (fem fristaende blocks i form-familjen)
+- **Element:** `.form-section__title`, `.form-group__label`
+- **Modifiers:** `.form-row--inline`
+- **States:** `.form-group.is-fixed` (anvands inom `.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`
+- **Blocks:** `.setting-list` (sibling-wrapper for setting-rows), `.setting-row` (huvud-block med BEM-element), `.setting-toggle` (iOS-stil toggle, sibling-block)
+- **Element:** `.setting-row__text`, `.setting-row__label`, `.setting-row__sub`, `.setting-row__value`, `.setting-row__amount`, `.setting-row__chevron`, `.setting-row__avatar`, `.setting-row__pill`, `.setting-row__form`, `.setting-toggle__track`, `.setting-toggle__thumb`
+- **Modifiers:** `.setting-row--static`, `.setting-row--danger`
 - **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]`
+- **Blocks:** `.collapsible-card`
+- **Element:** `.collapsible__header`, `.collapsible__header-text`, `.collapsible__chev`, `.collapsible__body`
+- **States:** `[data-expanded]` pa `.collapsible-card`
 - **Anvand:** Panel som expanderar pa klick. JS togglar `data-expanded`
 - **INTE:** Modal-content (anvand `.dialog` eller `.sheet`)
+- **Special:** BEM-stam-mismatch - block heter `.collapsible-card` men element heter `.collapsible__X` (utan `-card`-suffix). Oppen punkt for rename, se sprint-rapport 2026-05-09.
 
 ### hbar (`hbar.css`)
-- **Klasser:** `.hbar`, `.hbar__item/__track/__fill/__label/__value`, `.hbar__fill--positive/-warning/-negative`
+- **Blocks:** `.hbar`
+- **Element:** `.hbar__item`, `.hbar__track`, `.hbar__fill`, `.hbar__label`, `.hbar__value`
+- **Modifiers:** `.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`
+- **Blocks:** `.split-bar`
+- **Element:** `.split-bar__segment`, `.split-bar__label`, `.split-bar__labels`
+- **Modifiers:** `.split-bar__segment--primary/-secondary/-positive/-negative/-warning`
 - **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`
+- **Blocks:** `.hero`, `.hero-amount` (sibling, animation-target - definieras aven i `hero-roll.css`)
+- **Element:** `.hero__heading`, `.hero__amount`, `.hero__amount-row`, `.hero__label`, `.hero__meta`, `.hero__actions`
+- **Modifiers:** `.hero__amount--card`, `.hero__amount--fluid`, `.hero__label--muted`
 - **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`
+- **Blocks:** `.chip`, `.chip-list` (sibling-wrapper for chips i rad), `.brand-pill`, `.month-pill`, `.score-pill` (definieras aven i `badge.css`), `.install-chip` (PWA install-prompt)
+- **Element:** `.chip-list__item`, `.chip-list__text`, `.chip-list__form`, `.chip-list__delete`, `.chip-list__add`, `.install-chip__text`, `.install-chip__install`, `.install-chip__dismiss`
+- **Modifiers:** `.chip--accent/-positive/-negative/-warning/-faint`, `.score-pill--strong/-medium/-low`
 - **Anvand:** Kort-format pills med dot-prefix (status, kategori, count)
 - **INTE:** Form-inputs (anvand `.input`)
 
 ### avatar (`avatar.css`)
-- **Klasser:** `.avatar`, `.avatar--sm/-lg`
+- **Blocks:** `.avatar`
+- **Modifiers:** `.avatar--sm`, `.avatar--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`
+- **Blocks:** `.list` (sibling-wrapper, `<ul>`-reset), `.list-row` (huvud-block med BEM-element)
+- **Element:** `.list-row__icon`, `.list-row__body`, `.list-row__desc`, `.list-row__meta`, `.list-row__date`, `.list-row__amount`
+- **Modifiers:** `.list-row--excluded`, `.list-row--pending`, `.list-row--clickable`, `.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`
+- **Blocks:** `.table`
+- **Element:** `.table .num` (descendant-selector)
 - **Anvand:** Tabell med tabular-nums-stod
 - **INTE:** Layout-grid (anvand CSS Grid utility)
 
 ### auth (`auth.css`)
-- **Klasser:** `.auth-container`, `.auth-container__title/__subtitle`
+- **Blocks:** `.auth-container`
+- **Element:** `.auth-container__title`, `.auth-container__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`
+- **Blocks:** `.swipe-stack`, `.swipe-card`, `.swipe-decision-overlay`, `.swipe-actions`, `.swipe-action-btn`, `.swipe-meta`, `.swipe-meta-sep`, `.swipe-progress`, `.swipe-empty`, `.swipe-hint` (10 fristaende blocks i swipe-familjen)
+- **Element:** `.swipe-card__header`, `.swipe-card__title`, `.swipe-card__body`, `.swipe-card__footer`
+- **Modifiers:** `.swipe-card--back`, `.swipe-card--gone`, `.swipe-decision-overlay--save/-dismiss/-visible`, `.swipe-action-btn--save/-dismiss`
 - **Anvand:** Tinder-stil swipe-stack med drag-physics
-- **INTE:** Card-galleri (anvand `.card-grid`)
+- **INTE:** Card-galleri (anvand multipla `.card`)
 
 ### inline-edit (`inline-edit.css`)
-- **Klasser:** `.inline-edit`, `.inline-edit__text/__btn/__form/__input`
+- **Blocks:** `.inline-edit`
+- **Element:** `.inline-edit__text`, `.inline-edit__btn`, `.inline-edit__form`, `.inline-edit__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)
+- **Special:** `.inline-edit__form[hidden]` har explicit `display: none` (paritet med globalt `[hidden]`-stod i base/pwa.css). `.inline-edit__input` anvander `:focus` istallet for `:focus-visible` per text-input-konvention.
 
 ### upload-spinner (`upload-spinner.css`)
-- **Klasser:** `.upload-spinner-overlay`, `.upload-spinner-overlay.is-visible`, `.upload-spinner`, `.upload-spinner-overlay__label/__hint`
+- **Blocks:** `.upload-spinner-overlay` (huvud-block), `.upload-spinner` (atomisk, anvands inuti overlay)
+- **Element:** `.upload-spinner-overlay__label`, `.upload-spinner-overlay__hint`
+- **States:** `.upload-spinner-overlay.is-visible`
 - **Anvand:** Viewport-overlay for langa async-operationer (OCR, AI-anrop)
-- **INTE:** Inline-spinner (anvand `.spinner`)
+- **INTE:** Inline-spinner (anvand `.spinner` fran `feedback.css`)
 
 ### tab-bar (`tab-bar.css`)
-- **Klasser:** `.tab-bar`, `.tab-bar__item.is-active`
-- **Anvand:** Inline tab-grupp for format-val (CSV/Avi etc.)
+- **Blocks:** `.tab-bar` (definieras aven i `nav.css` med 5 identiska properties + skillnad i margin)
+- **Element:** `.tab-bar__item`
+- **States:** `.tab-bar__item.is-active`
+- **Anvand:** Inline tab-grupp for format-val (CSV/Avi etc.) - 44px touch-target
 - **INTE:** Bottom-nav (anvand `.bottom-nav`)
+- **Special:** Importordning i `index.css`: `nav.css` fore `tab-bar.css`. `.tab-bar`-block-styling fran tab-bar.css vinner via cascade.
 
 ### colored-row (`colored-row.css`) - v3.1.0
-- **Klasser:** `.colored-row`, `.colored-row--sm/-lg`
+- **Blocks:** `.colored-row`
+- **Modifiers:** `.colored-row--sm`, `.colored-row--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`)
@@ -191,13 +260,22 @@ inga primitives. BEM-konvention (block__element--modifier).
 - **Pattern:** Se "Kategori-monstret" nedan
 
 ### colored-bar (`colored-bar.css`) - v3.1.0
-- **Klasser:** `.colored-bar`, `.colored-bar--sm/-md/-lg`, `.colored-bar--vertical`
+- **Blocks:** `.colored-bar`
+- **Modifiers:** `.colored-bar--sm`, `.colored-bar--md`, `.colored-bar--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
 
+### sheet-content (`sheet-content.css`) - v3.5.1
+- **Blocks:** `.sheet` (kompletterar `.sheet` fran `overlay.css` med innehall-typografi och form-monster)
+- **Element:** `.sheet__title`, `.sheet__description`, `.sheet__form`, `.sheet__field`, `.sheet__field-label`, `.sheet__hint`, `.sheet__items`, `.sheet__item`, `.sheet__actions`, `.sheet__toggle`, `.sheet__subform`, `.sheet__save`, `.sheet__delete`, `.sheet__handle`, `.sheet__body`, `.sheet__divider` (kompletterande element)
+- **Modifiers:** `.sheet__form--inline`, `.sheet__field-label--upper`, `.sheet__hint--compact`
+- **States:** `.sheet__hint.is-error`, `.sheet__hint--compact.is-error`
+- **Anvand:** Sprint-65 sheet-form-monster (Title + description + Form + Field + Items + Actions + Toggle + Subform)
+- **INTE:** Sheet-overlay sjalv (definieras i `overlay.css`)
+
 
 ## Kategori-monstret
 
@@ -258,3 +336,4 @@ Jubb, Ekonom, framtida appar foljer samma monster med sina egna tokens.
 - **`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.
+- **Anta att alla komponent-filer har ett root-block.** 17 av 35 komponent-filer har flera root-blocks - se regel 11 i `references/03-quality-bar.md`.

package/references/03-quality-bar.md

@@ -210,7 +210,83 @@ Varje interaktiv komponent SKA ha:
   annan 0.7, snart finns alla varianter och visuellt sprak ar splittrat
 
 
-## 11. Inter font + Linear-stack
+## 11. En fil kan innehalla flera root-blocks
+
+I 17 av 35 komponent-filer i paketet definieras flera root-blocks i
+samma fil (`form.css`, `nav.css`, `chip.css`, `swipe-stack.css`,
+`feedback.css`, `hub-card.css` m.fl.). Det ar en medveten konvention,
+inte ett undantag eller teknisk skuld.
+
+**Nar det ar korrekt att samla flera blocks i en fil:**
+- **Semantiskt relaterade:** blocks som tillhor samma tema (form-skelett,
+  feedback-states, navigation-monster, swipe-card-familjen)
+- **Anvands i kombination:** wrapper + child-block som alltid renderas
+  tillsammans (`.hub-list` + `.hub-card`, `.list` + `.list-row`,
+  `.progress` + `.progress-bar`)
+- **Sibling-relation:** blocks som placeras parallellt i HTML men aldrig
+  ar BEM-element av varandra (`.hub-category` + `.hub-list`,
+  `.input-group` + `.input-icon` som siblings till `.input`)
+
+**Nar det INTE ar korrekt:**
+- Tva orelaterade komponenter staplade i samma fil av bekvamlighet
+- Ett block som logiskt kunde varit BEM-element av ett annat - i sa
+  fall ska det vara `.X__Y`, inte `.X-Y` som separat block
+
+**Hur de ska dokumenteras:**
+
+JSDoc-header i CSS-filen ska ha en `Blocks:`-sektion som listar varje
+root-block med en kort beskrivning + relation:
+
+```css
+/* ================================================================
+   components/example.css
+   [Kort beskrivning av filens syfte]
+
+   Blocks:
+     .block-a  - [vad den gor]
+     .block-b  - sibling-wrapper for [...]
+     .block-c  - atomisk, anvands inuti .block-a
+
+   HTML-relationer (om ej uppenbara):
+     .block-c placeras alltid som child av .block-a i HTML
+   ================================================================ */
+```
+
+I `references/02-components.md` listas root-blocks under
+`**Blocks:**`-raden, BEM-element under `**Element:**`, modifiers under
+`**Modifiers:**`, state-classes under `**States:**`. Sibling- och
+wrapper-relationer noteras i parentes.
+
+**Konkret exempel:** `hub-card.css` har tre fristaende blocks:
+
+```
+.hub-card     - klickbart kort (huvud-block med BEM-element)
+.hub-list     - <ul>-wrapper for flera hub-cards (sibling)
+.hub-category - <h6>-rubrik over hub-list (sibling, placeras FORE)
+```
+
+I HTML ligger `.hub-category` som syskon till `.hub-list`, inte inuti
+det. Bara `.hub-card` har egna BEM-element (`__icon/__text/__title`).
+
+**Varfor:**
+- Semantisk gruppering > arbitrar fil-uppdelning. Att splittra
+  `.form-card/.form-section/.form-group` i tre filer ger inget varde -
+  de hor ihop som "form-skelett".
+- Auditer ska kunna lasa filens kommentar och forsta strukturen utan
+  att behova rekonstruera den fran selektor-mosaik.
+- BEM-falska-positiv minimeras. En extern reviewer som ser `.hub-list`
+  ska kunna avgora om det ar ett brott (compound block i fel fil) eller
+  konvention (sibling i samma fil).
+
+**Trade-off:**
+- Kraver disciplinerad JSDoc + 02-components.md-underhall vid varje ny
+  komponent. Utan det blir flera-blocks-i-samma-fil ett mysterium.
+- Risk for junk-drawer-filer dar olika blocks staplas av lathet.
+  Mitigation: granska om varje nytt block hor ihop tematiskt eller
+  borde fa egen fil.
+
+
+## 12. Inter font + Linear-stack
 
 **Hur man foljer:**
 - Anvand `var(--font-sans)` overallt - ALDRIG specifika font-family-
@@ -230,7 +306,7 @@ Varje interaktiv komponent SKA ha:
 - Linear, Vercel och liknande modern SaaS anvander samma stack
 
 
-## 12. Bara nya semantic token-namn
+## 13. Bara nya semantic token-namn
 
 **Hur man foljer:**
 - Anvand bara nya semantic-namn: `--text-default/-subtle/-muted/-disabled`,

package/references/04-locked-decisions/0009-collapsible-block-rename.md

@@ -0,0 +1,48 @@
+# 0009 - collapsible block-rename: .collapsible-card → .collapsible
+
+## Status
+Locked. Beslutat 2026-05-09.
+
+## Context
+collapsible.css definierade root-blocket som `.collapsible-card` men
+BEM-elementen som `.collapsible__header`, `.collapsible__body`,
+`.collapsible__chev`, `.collapsible__header-text`. BEM-stammen var
+inkonsekvent: elementen antydde att parent-blocket borde heta
+`.collapsible`, inte `.collapsible-card`.
+
+Fyndet identifierades i paritetsaudit 2026-05-09 (undersökning 4).
+Underlaget visade:
+
+- 3 produktion-templates i Ekonom (avstamning.html)
+- 3 showcase-templates i Ekonom (design.html)
+- 3 showcase-templates i Jubb (design.html)
+- 0 produktion-templates i Jubb
+- 0 lokala CSS-overrides i någon app
+- JS-koppling via [data-collapsible]-attribut, inte via klasnamn
+  (en querySelector på .collapsible__body i Ekonom app.js rad 202)
+
+## Considered options
+
+### Alternativ A: rename block .collapsible-card → .collapsible
+Elementen (.collapsible__header etc.) oförändrade.
+~12 ändringar: 1 CSS-fil + 2 template-filer per app.
+JS opåverkat (data-attribut-koppling).
+
+### Alternativ B: rename element .collapsible__X → .collapsible-card__X
+Blocket (.collapsible-card) oförändrat.
+~15 ändringar + 1 JS-ändring (app.js rad 202).
+
+## Decision
+**Alternativ A.** Elementen är rätt — `.collapsible__` speglar det
+semantiska begreppet. Blocket är det som avviker. "-card"-suffixet är
+en implementationsdetalj från ursprunglig skapelse, inte en semantisk
+egenskap. JS-kopplingen via data-attribut gör att rename är renare än
+Alternativ B.
+
+## Consequences
+- + BEM-stammen är konsekvent: .collapsible → .collapsible__header etc.
+- + JS opåverkat
+- + Färre ändringar än Alternativ B
+- − Template-ändringar krävs i Ekonom produktion (3 rader) och
+  showcase i båda appar (6 rader)
+- − npm minor version-bump krävs (publik klass-rename är breaking change)