@klodd/ds 5.4.2 → 5.5.0

package/README.md

@@ -1,7 +1,9 @@
 # @klodd/ds
 
+Senast audit: 2026-05-20. Aktiv åtgärdslista: `audits/00-summary.md`.
+
 Klodd Design System - delade tokens, typografi och komponenter for
-Klodds appar (Jubb, Ekonom och framtida).
+Klodds appar (Jubb och Ekonom).
 
 Dark-mode-first PWA-designsystem byggt pa Radix Colors. OKLCH-baserade
 fargramper, pixel-numerisk spacing-konvention och tre-lagers token-
@@ -47,7 +49,7 @@ Tre lager med strikt inkapsling. Komponenter laser ALDRIG primitives
 direkt - bara semantic-lagret eller app-tokens.
 
 ```
-00-primitives.css   raa varden (gray/blue/plum/violet OKLCH ramps,
+00-primitives.css   raa varden (gray/blue/plum OKLCH ramps,
                     pixel-numerisk space/fs/radius, motion, layout)
 10-semantic.css     komponenter laser hardefran (surface/text/border/
                     accent + status + effects + transitions)
@@ -62,7 +64,6 @@ Officiella **Radix Colors** dark-skalor:
 - **Mauve Dark** (neutral) - lila-tonad gra som kompletterar Blue och Plum
 - **Blue Dark** (Jubb accent) - sky-blue (#0090ff)
 - **Plum Dark** (Ekonom accent) - varm magenta-lila (#ab4aba)
-- **Violet Dark** - bevarad for framtida appar
 - **Green/Amber/Red Dark** - status (success/warning/danger)
 
 Status-tokens har bade solid-bakgrund (`--bg-success/warning/danger`)

package/SKILL.md

@@ -1,14 +1,21 @@
 ---
 name: klodd-ds
-description: Design memory for the @klodd/ds shared design system across all Klodd apps (Jubb, Ekonom, future apps). Use this skill whenever working on UI components, design tokens, theming, CSS class names, spacing, color, typography, accessibility, or any visual or interaction decision in an app that imports @klodd/ds. Also use when questions arise about component APIs, token architecture, BEM naming, whether to add new tokens vs reuse existing, or how to theme a new app. Contains locked architectural decisions (do not re-litigate without explicit instruction) and open migration items (still under discussion).
+description: Design memory for the @klodd/ds shared design system used by the two apps that consume it (Jubb, Ekonom). Use this skill whenever working on UI components, design tokens, theming, CSS class names, spacing, color, typography, accessibility, or any visual or interaction decision in an app that imports @klodd/ds. Also use when questions arise about component APIs, token architecture, BEM naming, or whether to add new tokens vs reuse existing. Contains locked architectural decisions (do not re-litigate without explicit instruction) and open migration items (still under discussion).
 ---
 
 # @klodd/ds — Design Memory
 
+## Status
+Senast audit: 2026-05-20. Pågående arbete enligt `audits/00-summary.md`:
+- Sprint 1: dead-code-städning + topbar-bump (~435 rader)
+- Sprint 2: component-token-konsolidering, ADR 0024-backfill, light-theme-removal
+- Sprint 3: base.css-extraktion till paketets base-lager
+
 ## Vad detta är
 Gemensamt designsystem på npm (`@klodd/ds@5.x`). Tre-lagers tokens,
 38+ komponenter (progress-bar tillagd v5.2.1, 2026-05-18), konsumeras
-av Jubb och Ekonom. Fler appar planerade.
+av Jubb och Ekonom - det är paketets hela scope, inte ett paraply för
+fler appar.
 Denna Skill fångar både reglerna ("vad") och resonemanget ("varför").
 
 ## Läs i denna ordning
@@ -28,15 +35,15 @@ Denna Skill fångar både reglerna ("vad") och resonemanget ("varför").
 </locked_rules>
 
 ## Apps och theming
+@klodd/ds har exakt två konsumenter - Jubb och Ekonom. Det finns inget
+mönster för att introducera fler appar; theming-modellen är byggd för
+dessa två.
 - `data-app="jubb"` → Blue accent (Radix Blue Dark), Blue-tonad bakgrund
 - `data-app="ekonom"` → Plum accent (Radix Plum Dark), Plum-tonad bakgrund
-- Ny app: lägg till ramp i 00-primitives.css + apps/foo.css med accent-
-  overrides (obligatoriskt, 5 rader) + valfria surface/text-overrides
-  (15-40 rader totalt om appen ska ha distinkt bakgrundston)
-- **Surface-raised-konvention**: alla Klodd-appar sätter
+- **Surface-raised-konvention**: bägge apparna sätter
   `--surface-raised: var(--<color>-2)` - kort och paneler ligger på
   samma yta som default-sektioner men distinkt mot page-bakgrunden
-  (color-1). Gäller alla nuvarande och framtida appar.
+  (color-1).
 
 ## Besluts-records
 - `references/04-locked-decisions/` — låsta beslut. Förklara, ändra inte.
@@ -115,6 +122,11 @@ cd ~/dev/Jubb && npm install @klodd/ds@latest && npm run build:ds
 cd ~/dev/Ekonom && npm install @klodd/ds@latest && npm run build:ds
 ```
 
+**OBS:** build:ds rensar inte borttagna filer. Efter en
+komponent-radering: verifiera manuellt att
+`app/static/css/ds/components/<borttagen>.css` inte finns kvar i
+apparna.
+
 ## Sprint-avslut: alla sprintar kräver detta
 En sprint — oavsett om den innehåller CSS, JS eller bara dokumentation —
 är inte klar förrän:

package/css/00-primitives.css

@@ -5,7 +5,7 @@
    (apps/<app>.css). Detta lager byts bara nar appens fundamentala
    palett, spacing eller typografi-skala andras pa systemniva.
 
-   Radix 12-stegs rollkarta (anvands av --gray, --blue, --purple):
+   Radix 12-stegs rollkarta (anvands av --gray, --blue):
      1-2   App-bakgrunder
      3     Komponentbakgrund (vila)
      4     Komponentbakgrund (hover)
@@ -110,27 +110,6 @@
 }
 
 
-/* ================================================================
-   ==== COLORS - PURPLE (Radix Violet Dark)
-   Officiella Radix-varden. Behalls i shared-system for framtida
-   anvandning - inte aktivt for nagon app just nu.
-   ================================================================ */
-:root {
-  --purple-1:  #14121f;
-  --purple-2:  #1b1525;
-  --purple-3:  #291f43;
-  --purple-4:  #33255b;
-  --purple-5:  #3c2e69;
-  --purple-6:  #473876;
-  --purple-7:  #56468b;
-  --purple-8:  #6958ad;
-  --purple-9:  #6e56cf;
-  --purple-10: #7d66d9;
-  --purple-11: #baa7ff;
-  --purple-12: #e2ddfe;
-}
-
-
 /* ================================================================
    ==== COLORS - PLUM (Radix Plum Dark - Ekonom accent)
    Varm magenta-lila. Tydligt annorlunda fran Blue (Jubb) utan att

package/css/10-semantic.css

@@ -1,13 +1,10 @@
 /* ================================================================
    10-SEMANTIC
-   Det enda lagret komponenter far referera. Aldrig --gray-N, --blue-N,
-   --purple-N eller andra primitives direkt i komponentfiler.
+   Det enda lagret komponenter far referera. Aldrig --gray-N, --blue-N
+   eller andra primitives direkt i komponentfiler.
 
-   Dark-first. Default-blocket galler om data-theme saknas eller ar
-   "dark". [data-theme="light"] overrider ytor + text + borders.
    App-byte sker via [data-app="X"] som overrider --accent-* (se
-   apps/<app>.css). Komponenter las bara --accent-*, aldrig --blue-*
-   eller --purple-*.
+   apps/<app>.css). Komponenter las bara --accent-*, aldrig --blue-*.
 
    Konvention pa kommentarer: varje token har "Anvand for: ..." och
    "INTE for: ...". Det ar LLM-instruktionen inbyggd i systemet.
@@ -18,12 +15,6 @@
    ==== SURFACES (NAV Aksel lagermodell)
    Ljusare = hogre i z-stacken. Inga skuggor i dark mode - bara
    luminanshierarki (iOS/Linear-modell, ej tonal Material Design).
-
-   light-dark() (Equinor EDS-konventionen, sprint 2026-05-07):
-     light-dark(<light-value>, <dark-value>)
-   browsern valjer baserat pa color-scheme. Standard ar `dark` for
-   alla Klodd-appar - light-mode aktiveras via [data-theme="light"]-
-   override som satter color-scheme: light.
    ================================================================ */
 :root {
   color-scheme: dark;   /* default dark for alla Klodd-appar */
@@ -31,44 +22,44 @@
   /* Sidans yttersta bakgrund. Morkast av alla ytor.
      Anvand for: <html>, <body>, page-background.
      INTE for: kort, paneler, modaler. */
-  --surface-page:    light-dark(oklch(0.99 0.002 250), var(--gray-1));
+  --surface-page:    var(--gray-1);
 
   /* Standard innehallsyta. Sektioner, list-rows.
      Anvand for: sektionsbakgrunder, tab-innehall, formulargrupper.
      INTE for: sidans yttersta bakgrund eller upphojda kort. */
-  --surface-default: light-dark(oklch(0.96 0.003 250), var(--gray-2));
+  --surface-default: var(--gray-2);
 
   /* Upphojd yta - ett steg framfor default.
      Anvand for: kort, paneler, sidopaneler, jobbkort.
      INTE for: modaler och popovers (anvand --surface-overlay). */
-  --surface-raised:  light-dark(oklch(0.99 0.002 250), var(--gray-3));
+  --surface-raised:  var(--gray-3);
 
   /* Forhoejt kort - mellansteg mellan raised och overlay. Anvands for
      kort som behover mer visuell prominens an --surface-raised men
      inte ar overlays/modaler. Mappas till color-3 i app-overrides
      (vs raised color-2). v3.21.3 - infort efter audit av Jubb's
      job-card som behovde mer kontrast mot main-bakgrunden. */
-  --surface-elevated: light-dark(oklch(0.97 0.003 250), var(--gray-3));
+  --surface-elevated: var(--gray-3);
 
   /* Svavande yta - modaler, popovers, dropdowns.
      Anvand for: dialog-bakgrund, tooltip, context-menu, sheets.
      INTE for: inbaddade kort (anvand --surface-raised). */
-  --surface-overlay: light-dark(oklch(0.93 0.004 250), var(--gray-4));
+  --surface-overlay: var(--gray-4);
 
   /* Hover-state pa interaktiva ytor.
      Anvand for: :hover-bakgrund pa knappar, rader, kort.
      INTE for: statiska ytor eller fokus-states. */
-  --surface-hover:   light-dark(oklch(0.93 0.004 250), var(--gray-4));
+  --surface-hover:   var(--gray-4);
 
   /* Active/pressed-state.
      Anvand for: :active-bakgrund, .bottom-nav__item--active.
      INTE for: hover (anvand --surface-hover). */
-  --surface-active:  light-dark(oklch(0.88 0.005 250), var(--gray-5));
+  --surface-active:  var(--gray-5);
 
   /* Nedsankt yta - inputs, textarea, kod-block.
      Anvand for: input-bakgrund, code-block, hbar-track.
      INTE for: interaktiva ytor som hover/active. */
-  --surface-sunken:  light-dark(oklch(0.94 0.003 250), var(--gray-2));
+  --surface-sunken:  var(--gray-2);
 
 
   /* ================================================================
@@ -78,22 +69,22 @@
   /* Primar text. Rubriker, etiketter, viktig information.
      Anvand for: alla rubriker, knapptext, viktig metadata.
      INTE for: hjalptext, datum, placeholder. */
-  --text-default:    light-dark(var(--gray-12), var(--gray-12));
+  --text-default:    var(--gray-12);
 
   /* Sekundar text. Datum, meta-info, subtexter.
      Anvand for: metadata, datum, kompletterande information.
      INTE for: rubriker eller primar information. */
-  --text-subtle:     light-dark(var(--gray-10), var(--gray-11));
+  --text-subtle:     var(--gray-11);
 
   /* Muted text. Platshallare, hint-text, ts-stamps.
      Anvand for: placeholder, hint, micro-labels.
      INTE for: lasbar information med hog prioritet. */
-  --text-muted:      light-dark(var(--gray-8), var(--gray-9));
+  --text-muted:      var(--gray-9);
 
   /* Disabled text. Inaktiva element, fade-out.
      Anvand for: disabled-state pa knappar/inputs, tx-meta-faint.
      INTE for: aktiva element. */
-  --text-disabled:   light-dark(var(--gray-6), var(--gray-7));
+  --text-disabled:   var(--gray-7);
 
   /* Text pa solid accent-bakgrund (knapp, badge, score-pill).
      Anvand for: text inuti --accent-9-bakgrunder.
@@ -113,17 +104,17 @@
   /* Subtil border. Separatorer, dividers, list-row-borders.
      Anvand for: tunna dividers mellan sektioner, table-row-borders.
      INTE for: interaktiva element eller fokus. */
-  --border-subtle:   light-dark(var(--gray-9), var(--gray-5));
+  --border-subtle:   var(--gray-5);
 
   /* Standard border. Kort, inputs i vila.
      Anvand for: kortkanter, input-borders, btn-borders.
      INTE for: fokus-states (anvand --border-focus). */
-  --border-default:  light-dark(var(--gray-8), var(--gray-6));
+  --border-default:  var(--gray-6);
 
   /* Stark border. Emphasis, hover pa border.
      Anvand for: hover-state pa inputs, emphasis-borders.
      INTE for: vila-state (anvand --border-default). */
-  --border-strong:   light-dark(var(--gray-7), var(--gray-7));
+  --border-strong:   var(--gray-7);
 
   /* Fokusring. Alltid synlig vid keyboard-navigation.
      Anvand for: :focus-visible outline.
@@ -136,7 +127,7 @@
      DEN ENDA TOKEN-GRUPPEN SOM BYTS PER APP.
      [data-app="jubb"]   -> bla
      [data-app="ekonom"] -> lila
-     Komponenter refererar bara --accent-*, aldrig --blue-* eller --purple-*.
+     Komponenter refererar bara --accent-*, aldrig --blue-*.
      ================================================================ */
 
   /* Subtil accent-bakgrund. Markta rader, valda items.
@@ -330,47 +321,9 @@
    far referera dessa eftersom de ar avledda fran semantic.
    ================================================================ */
 :root {
-  /* Card / panel */
-  --card-bg:            var(--surface-default);
-  --card-bg-elevated:   var(--surface-raised);
-  --card-border-color:  var(--border-subtle);
-  /* 2026-05-13: --card-radius borttaget. Var --radius-20 (legacy) men
-     ingen komponent konsumerade tokenet. Kort-komponenter anvander
-     var(--radius-14) direkt enligt BR-skalan. */
-  --card-padding-x:     var(--space-18);
-  --card-padding-y:     var(--space-16);
-  --card-margin-bottom: var(--space-14);
-
-  /* Buttons */
-  --btn-radius:        var(--radius-full);
-  --btn-padding-x:     var(--space-20);
-  --btn-padding-y:     13px;             /* exakt 13px ger 44px min-height */
-  --btn-min-height:    var(--touch-min);
-  --btn-padding-x-sm:  var(--space-14);
-  --btn-padding-y-sm:  var(--space-8);
-  --btn-min-height-sm: 36px;
-  --btn-icon-size:     var(--touch-min);
-  --btn-icon-size-sm:  36px;
-
-  /* Input */
-  --input-radius:    var(--radius-14);
-  --input-padding-x: var(--space-16);
-  --input-padding-y: var(--space-14);
-
-  /* Avatar */
-  --avatar-size:    36px;
-  --avatar-size-sm: 28px;
-  --avatar-size-lg: 56px;
-
-  /* Tx-row */
-  --tx-icon-size: 36px;
-
-  /* Hero amount sizes (kontextuellt overriden i media queries).
-     2026-05-13: --hero-amount-fz: fs-80 → fs-100 (25% storre).
-     --hero-amount-fluid: clamp ovre tak 80 → 100 for matchning. */
-  --hero-amount-fz:      var(--fs-100);
-  --hero-amount-card-fz: var(--fs-40);
-  --hero-amount-fluid:   clamp(40px, 14vw, 100px);
+  --circle-size:    36px;  /* default -- kvadratiska/cirkulära 36px-element */
+  --circle-size-sm: 28px;  /* compact -- 28px-element */
+  --circle-size-lg: 56px;  /* display -- 56px-element */
 }
 
 
@@ -395,37 +348,6 @@
 }
 
 
-/* ================================================================
-   ==== EXPLICITA THEME-OVERRIDES (manuell toggle)
-   light-dark() i :root hanterar surface/text/border-tokens automatiskt
-   baserat pa color-scheme. Dessa overrides satter color-scheme explicit
-   sa app kan tvinga light eller dark oavsett system-preferens.
-
-   light-dark() hanterar INTE accent-tokens (de ar app-specifika via
-   apps/<X>.css). For light-mode kan accent behova justeras ett steg
-   morkare for kontrast pa ljus bg - dessa overrides lever har.
-
-   STATUS: Ekonom ar dark-only. light-mode-stod ar forberedt for
-   framtida sprintar i Jubb eller framtida apps.
-   ================================================================ */
-
-[data-theme="dark"] {
-  color-scheme: dark;
-}
-
-[data-theme="light"] {
-  color-scheme: light;
-
-  /* Accent - ett steg morkare for batter kontrast pa ljus bg.
-     light-dark() i :root hanterar inte accent-tokens (app-specifika). */
-  --accent-soft:     var(--blue-2);
-  --accent-moderate: var(--blue-3);
-  --accent-9:        var(--blue-8);
-  --accent-10:       var(--blue-9);
-  --accent-text:     var(--blue-9);
-}
-
-
 /* ================================================================
    ==== OVERLAY TINTS
    Transparenta tints för drag-overlays, hover-states på dark surfaces

package/css/components/avatar.css

@@ -3,8 +3,8 @@
    Cirkular initial-avatar. Modifier --lg pa profil-vyer.
    ================================================================ */
 .avatar {
-  width: 36px;
-  height: 36px;
+  width: var(--circle-size);
+  height: var(--circle-size);
   border-radius: var(--radius-full);
   background: linear-gradient(135deg, var(--accent-9) 0%, var(--accent-10) 100%);
   display: inline-flex;
@@ -19,13 +19,13 @@
 }
 
 .avatar--sm {
-  width: 28px;
-  height: 28px;
+  width: var(--circle-size-sm);
+  height: var(--circle-size-sm);
   font-size: var(--fs-12);
 }
 
 .avatar--lg {
-  width: 56px;
-  height: 56px;
+  width: var(--circle-size-lg);
+  height: var(--circle-size-lg);
   font-size: var(--fs-24);
 }

package/css/components/badge.css

@@ -152,8 +152,8 @@
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  width: 36px;
-  height: 36px;
+  width: var(--circle-size);
+  height: var(--circle-size);
   font-size: var(--fs-13);
   font-weight: var(--fw-medium);
   font-variant-numeric: tabular-nums;

package/css/components/button.css

@@ -185,8 +185,7 @@
   height: var(--touch-min);
   padding: 0;
 }
-.btn--icon.btn--sm { width: 36px; height: 36px; }
-.btn--icon.btn--lg { width: 52px; height: 52px; }
+.btn--icon.btn--sm { width: var(--circle-size); height: var(--circle-size); }
 
 .btn--circle {
   border-radius: var(--radius-full);

package/css/components/chip.css

@@ -213,8 +213,8 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 28px;
-  height: 28px;
+  width: var(--circle-size-sm);
+  height: var(--circle-size-sm);
   border-radius: var(--radius-full);
   color: var(--text-subtle);
   background: transparent;

package/css/components/feedback.css

@@ -102,8 +102,8 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 56px;
-  height: 56px;
+  width: var(--circle-size-lg);
+  height: var(--circle-size-lg);
   background: var(--surface-default);
   color: var(--text-muted);
   border-radius: var(--radius-full);
@@ -152,8 +152,8 @@
 }
 
 .skeleton--circle {
-  width: 36px;
-  height: 36px;
+  width: var(--circle-size);
+  height: var(--circle-size);
   border-radius: var(--radius-full);
 }
 

package/css/components/hero.css

@@ -64,7 +64,7 @@
   /* 2026-05-13: fs-80 → fs-100 (25% storre) for mer display-tyngd.
      2026-05-14 (ADR 0019): font-size konsumerar --hero-amount-fz-token
      for app-override-mojlighet. */
-  font-size: var(--hero-amount-fz, var(--fs-100));
+  font-size: var(--fs-100);
   /* Undantag fran 400/500-policy (regel 5): display-siffra, inte
      UI-text. 600 ger nodvandig visuell tyngd pa hero-storlekar.
      Per ADR 0019 garlder weight 600 alla hero__amount-instances

package/css/components/hub-card.css

@@ -63,8 +63,8 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 36px;
-  height: 36px;
+  width: var(--circle-size);
+  height: var(--circle-size);
   background: var(--surface-default);
   color: var(--accent-text);
   border-radius: var(--radius-14);

package/css/components/inline-edit.css

@@ -23,8 +23,8 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 28px;
-  height: 28px;
+  width: var(--circle-size-sm);
+  height: var(--circle-size-sm);
   padding: 0;
   background: transparent;
   border: 0;

package/css/components/list-row.css

@@ -42,8 +42,8 @@
 .list-row:last-child { border-bottom: none; }
 
 .list-row__icon {
-  width: 36px;
-  height: 36px;
+  width: var(--circle-size);
+  height: var(--circle-size);
   border-radius: var(--radius-14);
   display: flex;
   align-items: center;

package/css/components/nav.css

@@ -159,12 +159,20 @@
   justify-self: end;
 }
 
+.topbar > a:has(> .avatar) {
+  min-width: var(--touch-min);
+  min-height: var(--touch-min);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .topbar__back {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 36px;
-  height: 36px;
+  width: var(--touch-min);
+  height: var(--touch-min);
   padding: 0;
   border: 1px solid var(--border-subtle);
   border-radius: var(--radius-full);
@@ -203,8 +211,8 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-width: var(--touch-sm);
-  min-height: var(--touch-sm);
+  min-width: var(--touch-min);
+  min-height: var(--touch-min);
   padding: 0 var(--space-10);
   background: transparent;
   border: 0;

package/css/components/pwa-avatar.css

@@ -6,8 +6,8 @@
    - Hard-refresh-trigger via klick (se hard-refresh.js)
    - Subtle accent-soft-bg + accent-text istallet for accent-9-gradient
 
-   Storlek 36x36 matchar .avatar default + .month-pill for visuell
-   harmoni i topbar.
+   Storlek 44x44 (--touch-min) for WCAG-godkänd tap-area, höjd från
+   36x36 i Sprint 1 Del C.
 
    Blocks:
      .pwa-avatar  - klickbar app-brand-avatar (button-element)
@@ -16,8 +16,8 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 36px;
-  height: 36px;
+  width: var(--touch-min);
+  height: var(--touch-min);
   padding: 0;
   background: var(--accent-soft);
   color: var(--accent-text);

package/css/components/swipe-stack.css

@@ -176,8 +176,8 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 56px;
-  height: 56px;
+  width: var(--circle-size-lg);
+  height: var(--circle-size-lg);
   background: var(--surface-raised);
   border: 1px solid var(--border-default);
   border-radius: var(--radius-full);

package/css/components/upload-spinner.css

@@ -39,8 +39,8 @@
 .upload-spinner-overlay.is-visible { display: flex; }
 
 .upload-spinner {
-  width: 56px;
-  height: 56px;
+  width: var(--circle-size-lg);
+  height: var(--circle-size-lg);
   border: 3px solid var(--accent-a3);
   border-top-color: var(--accent-9);
   border-radius: var(--radius-full);

package/css/index.css

@@ -78,15 +78,6 @@
 @import './components/kv-list.css';
 @import './components/offline.css';
 
-/* v4.4.0 - lyft fran Ekonom-domain (ADR 0020 - domain-to-package) */
-@import './components/review-banner.css';
-@import './components/matched-row.css';
-@import './components/status-icon.css';
-@import './components/tag-inline.css';
-@import './components/kvp-arrow.css';
-@import './components/icon-circle.css';
-@import './components/expandable-row.css';
-@import './components/item-stack.css';
 /* column-bar.css + dual-bar.css RADERADE v5.0.0 (ADR 0022) -
    amorterings-historik visas som kv-list (siffror) istallet for
    vertikala staplar; equity-split visas som tva .progress med

package/package.json

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

package/references/02-components.md

@@ -441,7 +441,7 @@ Definiera tokens + bindningar:
   app-domain-CSS-bindningar ar att foredra (data-attribute-konvention
   + lasbar template)
 
-Jubb, Ekonom, framtida appar foljer samma monster med sina egna tokens.
+Jubb och Ekonom foljer samma monster med sina egna tokens.
 
 
 ## Anti-patterns

package/references/04-locked-decisions/0003-radix-colors-oklch.md

@@ -20,7 +20,7 @@ Anvand **officiella Radix Colors dark-skalor** rakt av:
 - Mauve (neutral - se ADR 0006)
 - Blue Dark (Jubb accent)
 - Plum Dark (Ekonom accent)
-- Violet Dark (forberedd for framtida app)
+- Violet Dark (definierad, inte aktivt anvand)
 - Green/Amber/Red Dark (status)
 
 Plus alpha-skalor (Mauve/Blue/Plum) for transparency-tints.

package/references/04-locked-decisions/0006-mauve-neutral.md

@@ -26,10 +26,6 @@ Mauve Dark, INTE ren gray eller slate.
 - + Subtle lila-tonad ger varmare bottenton som matchar bagge
   app-accenterna
 - + Konsistent visuellt sprak over apparna - bagge har samma neutral
-- − 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 (kanske separat data-app + neutral-
-  override)
 - − Vissa anvandare kan kanna sig ovana med varmare neutral - branschen
   ar dominerad av kallare gray/slate
 

package/references/04-locked-decisions/0015-panel-title-tag-doctrine.md

@@ -6,7 +6,7 @@ Locked.
 ## Context
 
 Audit 2026-05-13 kvällsessionen avslöjade två problem med
-`.panel__title`-användning över Klodd-ekosystemet:
+`.panel__title`-användning över Jubb och Ekonom:
 
 **Problem 1: Inkonsekvent HTML-tagg i Ekonom.**
 - 35 platser använder `<div class="panel__title">` (94%)
@@ -89,7 +89,7 @@ Här är `.hero__label` korrekt eftersom `.hero__amount--card` följer.
   som h3 default)
 - CSS oförändrad - `.panel__title`-stylling targetar klassen, inte
   taggen
-- Konsekvens över Klodd-ekosystemet (Jubb + Ekonom + framtida appar)
+- Konsekvens över Jubb och Ekonom
 
 **Trade-offs:**
 - Heading-hierarki är inte alltid h1→h2→h3 över hela sajten. Vyer utan

package/references/04-locked-decisions/0016-mina-sidor-doctrine.md

@@ -105,13 +105,11 @@ används av alla nuvarande och framtida Klodd-appar.
 |---|---|
 | Ekonom | Min ekonomi (inkomst, saldo) + Mina inställningar (toggles, abonnemang) |
 | Jubb | Skip "Min [domän]" → Mina inställningar (Sökläge, Notiser, AI-profil) |
-| Future-app | "Min [domän]" om personliga värden finns separat |
 
 ## Konsekvenser
 
 **Bra:**
 - Single source of truth för settings-hubbar
-- Future-Margevo + framtida appar får gratis-pattern
 - A11y + iOS-konvention: heading-hierarki + setting-row-rytm
 - Komposit av befintliga paket-komponenter (ingen ny CSS behövs)