@klodd/ds 5.2.1 → 5.2.3

package/SKILL.md

@@ -6,9 +6,9 @@ description: Design memory for the @klodd/ds shared design system across all Klo
 # @klodd/ds — Design Memory
 
 ## Vad detta är
-Gemensamt designsystem på npm (`@klodd/ds@3.x`). Tre-lagers tokens,
-37+ komponenter (sheet-content tillagd v3.5.1), konsumeras av Jubb
-och Ekonom. Fler appar planerade.
+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.
 Denna Skill fångar både reglerna ("vad") och resonemanget ("varför").
 
 ## Läs i denna ordning
@@ -204,4 +204,17 @@ disciplin tills custom stylelint-plugin för design-rules byggs.
 | 10-4 | Visuell QA Chrome MCP (Jubb + Ekonom prod verifierat) | n/a |
 | 10-6 | SKILL.md kvalitets-rating | klodd-ds (denna commit) |
 
-Updated: 2026-05-12 (matchar @klodd/ds 3.14.14, 10/10-konsolidering klar)
+### Sprint-historik 2026-05-17 - 2026-05-18
+
+| Sprint | Vad | Commit / paket |
+|---|---|---|
+| Brief-prompt-arkitektur | Sex nya fält i JobBriefCompanyAnalysis, tre cover-letter-templates, ecommerce B2B/hybrid-stöd | Jubb 76f2ec9 / 0c91149 (sprintar 2026-05-17 efm + kväll) |
+| Hero + nested collapsibles på /jobb/{id} | Bort från panel-stapling per Calles brief, list-row för parents med Lucide-ikoner | Jubb commits 4fcb64f → 978aca1 |
+| Pipeline-progress-UI på /körningar | digest_runs.batch_poll_count + batch_status, /api/runs/latest/progress, pipeline-progress.js | Jubb 76f2ec9 + d7da68f |
+| Brief-progress-UI på /jobb/{id} | job_briefs stage-fält + streaming för live web_search-count, /api/jobs/{id}/brief/progress | Jubb 0c91149 |
+| Design-page demo + paket-lyft progress-bar | Interaktiv demo på /design med två simulerade flöden, progress-bar.css lyft från Jubb-domain till paketet | klodd-ds 5.2.1 + Jubb a6d7544 + f3ac408 |
+
+Updated: 2026-05-18 (matchar @klodd/ds 5.2.1 - progress-bar.css lyftad
+från Jubb-domain efter live-prod-användning. Tidigare versions-bumpar
+mellan 3.x → 5.x har inte uppdaterat denna fil löpande - SKILL.md har
+hängt efter publish-cykeln. Versions-stämpeln nu åter-synkad.)

package/css/00-primitives.css

@@ -455,6 +455,8 @@
   --viewport-height: 100vh;
 
   --touch-min: 44px;
+  --touch-sm: 40px;
+  --touch-lg: 52px;
 
   /* Bottom-nav-tokens lever i 10-semantic.css som calc-baserade
      (--touch-min + space). Tidigare hardkodade 80px har raderats

package/css/components/button.css

@@ -36,7 +36,7 @@
   justify-content: center;
   gap: var(--space-8);
   min-height: var(--touch-min);
-  padding: 0 var(--space-16);
+  padding: 0 var(--space-28);
   font-family: inherit;
   font-size: var(--fs-14);
   font-weight: var(--fw-medium);
@@ -163,14 +163,14 @@
    --md ar default (44px). Anvand bara --sm eller --lg explicit.
    ================================================================ */
 .btn--sm {
-  min-height: 36px;
-  padding: 0 var(--space-12);
+  min-height: var(--touch-sm);
+  padding: 0 var(--space-20);
   font-size: var(--fs-13);
 }
 
 .btn--lg {
-  min-height: 52px;
-  padding: 0 var(--space-20);
+  min-height: var(--touch-lg);
+  padding: 0 var(--space-40);
   font-size: var(--fs-15);
 }
 

package/css/components/hero.css

@@ -45,9 +45,9 @@
      sentence-case i template ("Din dagsbudget", inte "DIN DAGSBUDGET").
      Det matchar svensk grafisk konvention + var hero-hierarki kommer
      fran font-size och weight, inte fran caps. */
-  font-size: var(--fs-12);
+  font-size: var(--fs-16);
   font-weight: var(--fw-medium);
-  color: var(--text-muted);
+  color: var(--text-subtle);
   letter-spacing: var(--ls-tight);
   margin: 0 0 var(--space-12);
 }
@@ -106,7 +106,7 @@
 
 .hero__meta {
   font-size: var(--fs-13);
-  color: var(--text-subtle);
+  color: var(--text-muted);
   margin: 0 0 var(--space-20);
 }
 

package/css/components/nav.css

@@ -203,8 +203,8 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-width: 36px;
-  min-height: 36px;
+  min-width: var(--touch-sm);
+  min-height: var(--touch-sm);
   padding: 0 var(--space-10);
   background: transparent;
   border: 0;

package/package.json

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

package/references/02-components.md

@@ -103,6 +103,14 @@ För varje entry gäller:
 - **INTE:** Progress med text-overlay (eget komposit-pattern)
 - **Tokens:** `--surface-raised`, `--accent-9`, `--bg-success/-warning/-danger`. Respekterar `prefers-reduced-motion`.
 
+### progress-bar (`progress-bar.css`) - v5.2.1
+- **Blocks:** `.pipeline-progress` (sibling, polling-progress för run-pipelines), `.brief-progress` (sibling, polling-progress för async AI-generering)
+- **Element (samma per block):** `__header` (flex-row: label vänster, pct höger), `__bar-track` (6px bakgrund), `__bar` (accent-fyllning, 0.4s width-transition), `__sub` (sub-text under bar, `.pipeline-progress` only), `__hint` (hint-text under bar, `.brief-progress` only)
+- **Anvand:** Polling-driven progress-UI där klienten hämtar `/api/X/progress`-endpoint var 3-4 sek och uppdaterar bar-width + label-text. Pipeline-progress på run-aggregat (Jubb /körningar), brief-progress på per-job-generering (Jubb /jobb/{id}). Bägge stödjer monotont stigande pct-mapping från stage-string (STAGE_PCT-dict i app:s endpoint).
+- **INTE:** Generisk progress utan polling (använd `.progress` med data-bar-width för statisk progress).
+- **Tokens:** `--surface-sunken` (track-bg), `--accent-9` (bar-fill), `--text-default/-muted`, `--space-6/-8/-12/-16`, `--radius-full`, `--fs-12/-13`.
+- **Lyft fran:** Jubb-domain efter prod-användning 2026-05-18. Sibling-blocks istället för shared `.progress-bar` med modifiers - olika DOM-id:n och olika underlag (digest_runs vs job_briefs) gör att separation håller blocken testbara isolerat.
+
 ### tooltip (`tooltip.css`)
 - **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