@klodd/ds 5.4.0 → 5.4.2

package/css/components/hero.css

@@ -93,7 +93,7 @@
      Gemensamma utgifter) dar parent ar text-align:left. Center-just
      overrode den left-align via flex. Nu foljer amount-row parent-
      justification. Gap-16 ger luft mellan summa och adjacent
-     actions-knappar (btn-copy, btn-bank). */
+     actions-knappar. */
   display: flex;
   align-items: center;
   justify-content: flex-start;

package/package.json

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

package/references/02-components.md

@@ -71,6 +71,57 @@ För varje entry gäller:
 - **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`
+- **Centrering:** `dialog.dialog:modal`-regeln (5.2.5) override:ar UA-stylesheet
+  med `!important` pa position/inset/margin/transform. Doumenterat undantag fran
+  kvalitetsbar regel 7 - UA's `dialog:modal` har implicit prioritering bortom
+  standard specificity-cascading.
+
+#### Completion-dialog (async-operation done)
+
+Vanlig instans: visa "X ar klart" + primar-action efter att en
+asynkron operation (AsyncProgress) slagit `done`. Anvands av Jubb's
+bolagsanalys + brevgenerering, och planerat for Ekonom bank-synk.
+
+```html
+<dialog class="dialog" id="my-complete-dialog">
+  <div class="dialog__header">
+    <h2 class="heading-3">Operationen ar klar</h2>
+  </div>
+  <div class="dialog__body">
+    <p>Beskrivande text + ev. CTA-kontext.</p>
+  </div>
+  <div class="dialog__footer">
+    <button class="btn btn--primary" id="view-btn">Visa resultat</button>
+  </div>
+</dialog>
+```
+
+JS-monster:
+
+```javascript
+const dlg = document.getElementById("my-complete-dialog");
+
+// Oppna via showModal() - native focus-trap + ESC + ::backdrop
+dlg.showModal();
+
+// Stang via backdrop-klick (event.target == dialog-elementet)
+dlg.addEventListener("click", (e) => {
+  if (e.target === dlg) dlg.close();
+});
+
+// Primar action - app-specifik (oftast navigation + reload)
+document.getElementById("view-btn").addEventListener("click", () => {
+  window.location.href = "/result#anchor";
+  window.location.reload();
+});
+```
+
+Footer-varianter:
+- En primar knapp (Visa resultat / Bekrafta) - default
+- Sekundar + primar (Avbryt + Bekrafta) - destruktiva eller reversibla actions
+- `.btn--danger` som primar - actions som tar bort/forstor data
+
+Se /design-sidan "Completion Dialog"-sektionen for visuella exempel.
 
 ### icon (`icon.css`)
 - **Blocks:** `.icon`, `.icon-custom` (sibling - wrapper for handritade SVG som Lucide saknar)
@@ -188,20 +239,6 @@ För varje entry gäller:
 - **Anvand:** Panel som expanderar pa klick. JS togglar `data-expanded`
 - **INTE:** Modal-content (anvand `.dialog` eller `.sheet`)
 
-### hbar (`hbar.css`)
-- **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`)
-- **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`)
 - **Blocks:** `.hero`
 - **Element:** `.hero__heading`, `.hero__amount`, `.hero__amount-row`, `.hero__label`, `.hero__meta`, `.hero__actions`
@@ -550,7 +587,6 @@ Tier D-undantag (Sprint G 2026-05-09, listade i sektionen ovan):
 - `.budget-bar-*` (5 klasser)
 - `.cat-tx-*` (6 klasser, .cat-tx-stack har BEM-element)
 - `.cost-bar` / `.cost-bar-seg` (2 klasser, sibling-pair)
-- `.split-bar` (paketet har samma, override-styling)
 
 Notera: ekonom-domain.css (kategori-tokens + bindings) listas inte har
 - den filen ar token-definition, inte komponent-CSS. Se ADR

package/references/05-open-decisions/0017-async-progress-pipeline-gaps.md

@@ -0,0 +1,136 @@
+# 0017 - AsyncProgress: pipeline-flödes-gaps
+
+## Status
+
+Pending.
+
+## Context
+
+`pipeline-progress.js` i Jubb migrerades till `KloddDS.AsyncProgress`-
+wrapper (Jubb v202, 2026-05-19, commit `f46ff70`). Brief-progress.js
+hade redan migrerats tidigare samma dag (`d532e7e`). Under pipeline-
+migrationen identifierades tre paket-gaps som krävde workarounds i
+wrappern eftersom paketets default-beteende är optimerat för ett-shot-
+flöden (brief-flödet) snarare än kontinuerlig polling (pipeline-flödet).
+
+### Gap 1 — continuousMode
+
+**Behov:** polling fortsätter efter `done`-callback för att detektera
+nya körningar automatiskt. Pipeline-progress visar status på senaste
+DigestRun - när en run klar och en ny startar måste klienten plocka upp
+den utan sidladdning.
+
+**Workaround:** `onComplete → setTimeout(2s) → ny AsyncProgress-instans`
+(recursive restart). Ren ny instans varje cykel för att undvika att
+återanvända en stoppad poller.
+
+**Risk:** fragil mot paket-omstrukturering av lifecycle. Om AsyncProgress
+ändrar onComplete-semantik (t.ex. flyttar invokation till efter
+internal cleanup) kan restart-pattern brytas. Plus memory-overhead -
+varje ny instans skapar nya closures (acceptabel för once-per-N-minute
+körningar).
+
+### Gap 2 — autoHide: false
+
+**Behov:** komponenten ska vara hidden tills `data.active === true`.
+Pipeline kan vara inaktiv vid sidladdning (vanligaste fallet eftersom
+crons kör 3 ggr/dag). `progressEl` ska inte flasha tomt block.
+
+**Workaround:** `root.hidden = true` direkt efter `start()` +
+transform-managed visibility via `root.hidden = !data.active` i varje
+poll-tick.
+
+**Risk:** race om `start()` async-unhidar innan transform körs.
+Nuvarande AsyncProgress.start() är synkron (`removeAttribute("hidden")`
+i konstruktor-anrop), så pattern fungerar deterministiskt. Om paketet
+ändras till async-init (t.ex. wait för DOM-ready) kan en kort flash
+uppstå mellan start() och första transform.
+
+### Gap 3 — extraRenders
+
+**Behov:** rendera side-elements utanför paketets bar/label/pct-scope.
+Pipeline har `batch_progress_label` som renderas parallellt med
+progress-bar (visar "Batch 3 av 7" o.s.v. under bar:en).
+
+**Workaround:** transform-callback renderar elementet som side-effect:
+
+```javascript
+function transformPayload(data) {
+  if (batchLabel) {
+    batchLabel.hidden = !data.batch_progress_label;
+    if (data.batch_progress_label) batchLabel.textContent = data.batch_progress_label;
+  }
+  // ...returnerar normal { status, stage, pct, label }
+}
+```
+
+**Risk:** side-effects i transform bryter single-responsibility-
+principen. Transform är dokumenterad som ren payload-normalisering
+(`(data) → { status, stage, pct, label, ... }`). DOM-skrivning i en
+"pure" transform är subtilt fel arkitektur. Plus svår att testa
+(transform-funktion ärver implicit DOM-state).
+
+## Considered options
+
+### A. Lägg till alla tre som opt-in options i AsyncProgress
+
+```javascript
+new KloddDS.AsyncProgress({
+  progressEl: el,
+  pollUrl: "...",
+  continuousMode: true,
+  autoHide: false,
+  extraRenders: [
+    { el: batchLabel, valueKey: "batch_progress_label", hideWhenEmpty: true },
+  ],
+});
+```
+
+- Minor-bump till 5.5.0 (additive features, ingen breaking change)
+- ADR krävs (locked-decision om continuous-mode-semantik:
+  vad menas exakt med "kontinuerligt" - polling-paus efter done?
+  retry-loop? backoff?)
+- Cleaning workarounds i Jubb's wrapper (~10 LOC sparade per gap)
+
+### B. Lägg till bara continuousMode (vanligaste behovet)
+
+- Patch-bump möjlig om semantik håller sig till "fortsätt polla
+  efter done" utan att rubba existing onComplete-kontrakt
+- continuousMode triggar en onComplete-callback, men polling-loopen
+  fortsätter ostörd istället för att rensa pollTimer
+- Klient kan opt-in via boolean utan ny config-struktur
+
+### C. Behåll workarounds tills ett tredje use-case dyker upp
+
+- Ingen paket-ändring
+- Pipeline + brief är två use-cases. Tredje (Ekonom bank-sync eller
+  framtida feature) skulle trigga konsolidering
+- Workarounds dokumenteras i Jubb's wrapper (redan gjort i
+  JSDoc-header för `pipeline-progress.js`)
+
+## Pending decision criteria
+
+Aktiveras när:
+
+- Ekonom bank-synk eller annan app adopterar AsyncProgress och stöter
+  på samma gaps (continuous polling + lazy-show + extra-rendering).
+  Aktuell ETA okänd - bank-synk är planerad men inte påbörjad per
+  Ekonom DECISIONS.md
+- Eller: workarounds visar sig instabila i prod (memory-leak från
+  recursive instances, race-condition på start()-hide, transform-
+  test-flakiness)
+
+Inte prioriterat förrän en av ovan inträffar. Wrappern fungerar i
+produktion (Jubb v202+) - gaps är arkitektur-städ, inte funktionalitet.
+
+## References
+
+- Jubb commit `f46ff70` - pipeline-progress migration som upptäckte
+  gaps
+- Jubb commit `d532e7e` - brief-progress migration (ett-shot-flöde som
+  matchar AsyncProgress's default-design)
+- ADR 0016-async-progress-fetch-fn (`04-locked-decisions/`) - tidigare
+  AsyncProgress-utvidgning för demo/test-injection via fetchFn
+- `~/dev/klodd-ds/js/async-progress.js` - paket-implementation
+- `~/dev/Jubb/app/static/js/pipeline-progress.js` - wrapper med
+  workarounds (68 LOC)