@klodd/ds 5.4.3 → 5.6.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/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)

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

@@ -22,6 +22,7 @@
 @import './base/pwa.css';
 @import './base/typography.css';
 @import './base/layout.css';
+@import './base/interactions.css';
 
 /* Komponenter */
 @import './components/button.css';
@@ -78,15 +79,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.3",
+  "version": "5.6.0",
   "description": "Klodd shared design system - tokens, components, JS",
   "main": "css/index.css",
   "bin": {
@@ -15,7 +15,8 @@
     "references/"
   ],
   "scripts": {
-    "lint:css": "stylelint 'css/**/*.css'"
+    "lint:css": "stylelint 'css/**/*.css'",
+    "verify:docs": "node scripts/verify-docs.js"
   },
   "engines": {
     "node": ">=16.7"

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

@@ -33,7 +33,7 @@ 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
+**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

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

@@ -13,7 +13,7 @@ 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
+### Gap 1 - continuousMode
 
 **Behov:** polling fortsätter efter `done`-callback för att detektera
 nya körningar automatiskt. Pipeline-progress visar status på senaste
@@ -30,7 +30,7 @@ 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
+### Gap 2 - autoHide: false
 
 **Behov:** komponenten ska vara hidden tills `data.active === true`.
 Pipeline kan vara inaktiv vid sidladdning (vanligaste fallet eftersom
@@ -46,7 +46,7 @@ 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
+### Gap 3 - extraRenders
 
 **Behov:** rendera side-elements utanför paketets bar/label/pct-scope.
 Pipeline har `batch_progress_label` som renderas parallellt med

package/css/components/expandable-row.css

@@ -1,176 +0,0 @@
-/* ================================================================
-   components/expandable-row.css
-   Klickbar collapsible-summary-rad. Header visar label + total-amount
-   + chevron. Body visas nar expanderad (via JS data-expanded + CSS
-   :has-style eller class-toggling).
-
-   Anvands for kategori-rollups (Mat 1234 kr expanderar till listing
-   av transaktioner), sektion-totaler, drill-down-aggregat.
-
-   Lyft fran Ekonom v4.4.0 (var .cat-row + .cat-list-row, ADR 0020).
-
-   Blocks:
-     .expandable-row  - block med header + collapsible body
-     .expandable-list - <ul>-wrapper for flera expandable-rows
-     .expandable-row__item - BEM-element: nested item inom expanderad
-                              body (anvands utan att vara child av
-                              .expandable-row i CSS, lever via JS-
-                              expansion)
-
-   Element:
-     .expandable-row__header    - klickbar header-rad
-     .expandable-row__label     - vansterstalld text
-     .expandable-row__amount    - hoger-stalld tabular-amount
-     .expandable-row__chev      - chevron-svg, roterar 180deg vid expanded
-     .expandable-row__total     - footer-rad med summa nar body expanderad
-
-   Item-element:
-     .expandable-row__item-list   - <ul>-wrapper for items inom body
-     .expandable-row__item-body   - container for item-rad
-     .expandable-row__item-desc   - description-text (ellipsis-truncerad)
-     .expandable-row__item-date   - micro-date-text
-     .expandable-row__item-amount - tabular-amount
-
-   Item-modifiers:
-     .expandable-row__item--excluded   - strikethrough + muted
-     .expandable-row__item--pending    - subtle-color amount
-     .expandable-row__item--clickable  - hover/focus-feedback
-     .expandable-row__item--credit     - positive-fargad amount
-   ================================================================ */
-
-.expandable-list {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-.expandable-row {
-  border-top: var(--border-hairline-subtle);
-}
-
-.expandable-row:first-child {
-  border-top: 0;
-}
-
-.expandable-row__header {
-  display: flex;
-  align-items: center;
-  gap: var(--space-10);
-  padding: var(--space-10) 0;
-  cursor: pointer;
-  font-size: var(--fs-14);
-  color: var(--text-default);
-}
-
-.expandable-row__header:focus-visible {
-  outline: 2px solid var(--accent-9);
-  outline-offset: -2px;
-  border-radius: var(--radius-4);
-}
-
-.expandable-row[data-expanded] .expandable-row__chev {
-  transform: rotate(180deg);
-}
-
-.expandable-row__label  { flex: 1; min-width: 0; }
-.expandable-row__amount { font-variant-numeric: tabular-nums; color: var(--text-default); }
-
-.expandable-row__chev {
-  color: var(--text-muted);
-  transition: var(--tr-transform-medium);
-  flex-shrink: 0;
-}
-
-.expandable-row__total {
-  display: flex;
-  gap: var(--space-10);
-  padding: var(--space-12) 0 var(--space-4);
-  font-weight: var(--fw-medium);
-  border-top: var(--border-hairline-default);
-}
-
-.expandable-row__total .expandable-row__amount { font-weight: var(--fw-medium); }
-
-
-/* ================================================================
-   ==== ITEMS (inom expanderad body)
-   ================================================================ */
-
-.expandable-row__item-list {
-  list-style: none;
-  padding: var(--space-4) 0 var(--space-12) var(--space-12);
-  margin: 0;
-  border-left: var(--bw-medium) solid var(--border-subtle);
-}
-
-.expandable-row__item {
-  display: flex;
-  align-items: center;
-  gap: var(--space-10);
-  padding: var(--space-6) 0;
-  font-size: var(--fs-13);
-}
-
-.expandable-row__item-body {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-2);
-}
-
-.expandable-row__item-desc {
-  color: var(--text-subtle);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.expandable-row__item-date {
-  font-size: var(--fs-11);
-  color: var(--text-muted);
-}
-
-.expandable-row__item-amount {
-  color: var(--text-subtle);
-  font-variant-numeric: tabular-nums;
-  flex-shrink: 0;
-}
-
-
-/* ================================================================
-   ==== ITEM MODIFIERS
-   ================================================================ */
-
-.expandable-row__item--clickable {
-  cursor: pointer;
-  transition: var(--tr-bg-fast);
-}
-
-@media (hover: hover) and (pointer: fine) {
-  .expandable-row__item--clickable:hover { background: var(--surface-subtle); }
-}
-
-.expandable-row__item--clickable:focus-visible {
-  outline: 2px solid var(--accent-9);
-  outline-offset: -2px;
-  border-radius: var(--radius-4);
-}
-
-.expandable-row__item--excluded .expandable-row__item-desc,
-.expandable-row__item--excluded .expandable-row__item-amount {
-  color: var(--text-muted);
-}
-
-.expandable-row__item--excluded .expandable-row__item-amount {
-  text-decoration: line-through;
-  text-decoration-thickness: 1px;
-}
-
-.expandable-row__item--pending .expandable-row__item-amount {
-  color: var(--text-subtle);
-}
-
-.expandable-row__item--credit .expandable-row__item-amount {
-  color: var(--positive);
-}

package/css/components/icon-circle.css

@@ -1,46 +0,0 @@
-/* ================================================================
-   components/icon-circle.css
-   Rund icon-container med tonad bakgrund. Anvands for status-
-   indikatorer i list-rader (bank-koppling kompletterad, level-up
-   uppnatt, notis-dot etc).
-
-   Storlek 28x28 default - tatare an .avatar (36x36) for in-line
-   placement bredvid text-rader.
-
-   Lyft fran Ekonom v4.4.0 (var .bank-row-icon, ADR 0020).
-
-   Blocks:
-     .icon-circle  - 28x28 round icon-container
-
-   Modifiers:
-     .icon-circle--positive  - gron tonad bg + gron icon-color (check etc)
-     .icon-circle--warning   - warning-tonad bg + warning-color
-     .icon-circle--negative  - danger-tonad bg + danger-color
-   ================================================================ */
-.icon-circle {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--space-28);
-  height: var(--space-28);
-  margin-right: var(--space-12);
-  border-radius: 50%;
-  flex-shrink: 0;
-  background: var(--surface-default);
-  color: var(--text-subtle);
-}
-
-.icon-circle--positive {
-  background: var(--positive-dim);
-  color: var(--positive);
-}
-
-.icon-circle--warning {
-  background: var(--warning-dim);
-  color: var(--warning);
-}
-
-.icon-circle--negative {
-  background: var(--negative-dim, var(--bg-danger));
-  color: var(--negative, var(--accent-danger));
-}

package/css/components/item-stack.css

@@ -1,43 +0,0 @@
-/* ================================================================
-   components/item-stack.css
-   Grupp av identiska items som collapsible-staplade en presentation.
-   Header visar "X st" + summa, body expanderar till N individuella rader.
-
-   Typisk anvandning: identiska transaktioner (samma description, samma
-   merchant) som grupperas under en wrapper med expand-toggle - sa user
-   ser inte "Netflix 139 kr" sex ganger utan en stack "Netflix (6 st)"
-   som kan expanderas.
-
-   Lyft fran Ekonom v4.4.0 (var .cat-tx-stack, ADR 0020).
-
-   Blocks:
-     .item-stack  - block med collapsible header + body
-
-   Element:
-     .item-stack__icon    - file-stack-ikon till vanster (accent nar
-                            expanded, muted default)
-     .item-stack__header  - klickbar header-rad ("Netflix (6 st)" + summa)
-     .item-stack__body    - <ul> med individuella items
-   ================================================================ */
-.item-stack {
-  list-style: none;
-}
-
-.item-stack__icon {
-  color: var(--text-muted);
-  flex-shrink: 0;
-}
-
-.item-stack__header {
-  cursor: pointer;
-}
-
-.item-stack[data-expanded] .item-stack__icon {
-  color: var(--accent-9);
-}
-
-.item-stack__body {
-  list-style: none;
-  margin: 0;
-  padding: 0 0 0 var(--space-22);
-}

package/css/components/kvp-arrow.css

@@ -1,22 +0,0 @@
-/* ================================================================
-   components/kvp-arrow.css
-   Key-value-pair-arrow + target. Visualiserar mapping fran ett
-   keyword/key till en kategori/target. Typisk anvandning: rule-
-   editors dar man visar "ICA -> Mat" eller "STANDARD -> Premium".
-
-   Lyft fran Ekonom v4.4.0 (var .rule-arrow + .rule-cat, ADR 0020).
-
-   Blocks:
-     .kvp-arrow   - disabled-fargad arrow-text ("->")
-     .kvp-target  - accent-fargad target-text (vad keyword:et mappar till)
-   ================================================================ */
-.kvp-arrow {
-  color: var(--text-disabled);
-  margin: 0 var(--space-4);
-  font-weight: var(--fw-regular);
-}
-
-.kvp-target {
-  color: var(--accent-9);
-  font-weight: var(--fw-medium);
-}

package/css/components/matched-row.css

@@ -1,51 +0,0 @@
-/* ================================================================
-   components/matched-row.css
-   Rad-pattern for items som har match/pending-status. Klickbar rad
-   med status-icon till vanster. State-modifiers styr visual feedback.
-
-   Typisk anvandning: lista av forvantade items dar varje rad far
-   visual indicator om den matchats mot en faktisk handelse
-   (subscription-placeholders matchade mot bank-tx, kalender-events
-   matchade mot kalkyl etc).
-
-   Lyft fran Ekonom v4.4.0 (var .sub-row, ADR 0020). Lever ofta inom
-   .expandable-row__item men kan vara standalone.
-
-   Blocks:
-     .matched-row  - klickbar rad med match-status
-
-   Element:
-     .matched-row__status-icon  - 18px width-slot for SVG-icon till vanster
-
-   Modifiers:
-     .matched-row--matched  - positive-state (gron icon, default-text)
-     .matched-row--pending  - awaiting-state (gra icon, italic, 72% opacity)
-   ================================================================ */
-.matched-row {
-  cursor: pointer;
-  transition: var(--tr-bg-fast);
-  padding-left: var(--space-4);
-}
-
-@media (hover: hover) and (pointer: fine) {
-  .matched-row:hover { background: var(--surface-subtle); }
-}
-
-.matched-row:focus-visible {
-  outline: 2px solid var(--accent-9);
-  outline-offset: -2px;
-  border-radius: var(--radius-4);
-}
-
-.matched-row__status-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 18px;
-  flex-shrink: 0;
-  color: var(--text-muted);
-}
-
-.matched-row--matched .matched-row__status-icon { color: var(--positive); }
-.matched-row--pending                            { opacity: 0.72; }
-.matched-row--pending .matched-row__status-icon { color: var(--text-muted); }

package/css/components/review-banner.css

@@ -1,70 +0,0 @@
-/* ================================================================
-   components/review-banner.css
-   Generic warning-CTA-banner: titel + meta + chevron i pill-form.
-   Anvands for "X att granska/atgarda"-rader som lankar till en
-   review-vy. Warning-toned bakgrund.
-
-   Lyft fran Ekonom v4.4.0 (ADR 0020). Konsumeras av alla appar som
-   har en granskning/atgards-flow.
-
-   Blocks:
-     .review-banner  - klickbar warning-CTA-banner
-
-   Element:
-     .review-banner__title  - rubrik-text (fs-14 medium)
-     .review-banner__meta   - underrubrik (fs-12 subtle)
-     .review-banner__chev   - chevron-svg, hoger-stalld
-
-   HTML:
-     <a href="/granskning" class="review-banner">
-       <div>
-         <p class="review-banner__title">X att granska</p>
-         <p class="review-banner__meta">Mojliga utgifter</p>
-       </div>
-       <svg class="review-banner__chev"...></svg>
-     </a>
-   ================================================================ */
-.review-banner {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--space-12);
-  background: var(--warning-dim);
-  border: var(--bw-hairline) solid var(--warning-border);
-  border-radius: var(--radius-14);
-  padding: var(--space-14) var(--space-16);
-  margin-bottom: var(--space-14);
-  color: var(--text-default);
-  text-decoration: none;
-  transition: var(--tr-bg-base);
-}
-
-@media (hover: hover) and (pointer: fine) {
-  .review-banner:hover {
-    text-decoration: none;
-    background: var(--warning-hover, var(--warning-dim));
-  }
-}
-
-.review-banner:focus-visible {
-  outline: 2px solid var(--accent-9);
-  outline-offset: 2px;
-}
-
-.review-banner__title {
-  font-size: var(--fs-14);
-  font-weight: var(--fw-medium);
-  color: var(--text-default);
-  margin: 0;
-}
-
-.review-banner__meta {
-  font-size: var(--fs-12);
-  color: var(--text-subtle);
-  margin: var(--space-2) 0 0;
-}
-
-.review-banner__chev {
-  opacity: 0.7;
-  flex-shrink: 0;
-}

package/css/components/status-icon.css

@@ -1,32 +0,0 @@
-/* ================================================================
-   components/status-icon.css
-   Inline status-icon i text-flow (clock, alert, check). Tightare
-   pa baseline + flex-shrink:0 sa den inte staucher i smala containers.
-
-   Anvands typiskt efter en description-text for att signalera tillstand:
-   pending, stale, success, warning.
-
-   Lyft fran Ekonom v4.4.0 (var .tx-pending-icon, ADR 0020).
-
-   Blocks:
-     .status-icon  - inline-flex SVG-wrapper for status-indicator
-
-   Modifiers:
-     .status-icon--pending  - default muted-color (clock-icon)
-     .status-icon--stale    - warning-color (clock som blivit gammal)
-     .status-icon--success  - positive-color (check)
-     .status-icon--warning  - warning-color (alert)
-   ================================================================ */
-.status-icon {
-  display: inline-flex;
-  align-items: center;
-  margin-left: var(--space-6);
-  color: var(--text-muted);
-  vertical-align: -2px;
-  flex-shrink: 0;
-}
-
-.status-icon--pending { color: var(--text-muted); }
-.status-icon--stale   { color: var(--warning); }
-.status-icon--success { color: var(--positive); }
-.status-icon--warning { color: var(--warning); }

package/css/components/tag-inline.css

@@ -1,21 +0,0 @@
-/* ================================================================
-   components/tag-inline.css
-   Diskret inline-tag som markerar metadata in-line med brodtext.
-   Mindre an .chip - har ingen pill-bakgrund. Bara avvikande font-
-   storlek + muted color + slight tracking.
-
-   Anvands typiskt for inline-status (estimat, beta, deprecated) som
-   ska synas men inte dominera surrounding text.
-
-   Lyft fran Ekonom v4.4.0 (var .estimat-tag, ADR 0020).
-
-   Blocks:
-     .tag-inline  - inline-tag i muted text-stil
-   ================================================================ */
-.tag-inline {
-  font-style: normal;
-  font-size: var(--fs-11);
-  color: var(--text-muted);
-  font-weight: var(--fw-regular);
-  letter-spacing: var(--ls-tracker, 0.02em);
-}

package/js/index.js

@@ -1,95 +0,0 @@
-/* @klodd/ds - JavaScript entry point.
- *
- * Convenience-aggregator som kor enskilda init-funktioner. Default
- * fungerar utan konfiguration (LLM-vanligt). Konfig-objektet kan
- * over-rida vad som ska aktiveras.
- *
- * Anvandning:
- *
- *   <script src="https://unpkg.com/@klodd/ds/js/index.js" defer></script>
- *   <script>
- *     window.addEventListener('DOMContentLoaded', () => {
- *       KloddDS.init();
- *     });
- *   </script>
- *
- * Eller med konfig:
- *
- *   KloddDS.init({
- *     swPath: '/service-worker.js',
- *     lucide: true,
- *     barStyles: true,
- *     heroRoll: true,
- *     pullToRefresh: false,
- *     turboNav: false,
- *     navOptimistic: true,
- *     sheetDrag: true,
- *     pwaRegister: false,  // satt true + swPath for SW + install-prompts
- *   });
- *
- * Individuella moduler kan ocksa importeras separat fran js/-mappen.
- * KloddDS.init() ar bara en convenience-wrapper - den inkluderar inte
- * filerna sjalv, dvs varje modul-fil maste laddas via <script>-tag.
- *
- * Defaults ar konservativa: heavy beteenden (PtR, Turbo Drive, PWA
- * register) ar OFF default. App-mantainern aktiverar opt-in.
- */
-'use strict';
-
-(function (root) {
-  const defaults = {
-    lucide: true,
-    barStyles: true,
-    heroRoll: true,
-    navOptimistic: true,
-    sheetDrag: true,
-    pullToRefresh: false,
-    turboNav: false,
-    pwaRegister: false,
-    swPath: '/static/sw.js',
-  };
-
-  const KloddDS = {
-    init(config) {
-      const cfg = Object.assign({}, defaults, config || {});
-
-      if (cfg.lucide && typeof root.initLucide === 'function') {
-        root.initLucide();
-      } else if (cfg.lucide && root.lucide && typeof root.lucide.createIcons === 'function') {
-        root.lucide.createIcons();
-      }
-
-      if (cfg.barStyles && typeof root.initBarStyles === 'function') {
-        root.initBarStyles();
-      }
-
-      if (cfg.heroRoll && typeof root.initHeroRoll === 'function') {
-        root.initHeroRoll();
-      }
-
-      if (cfg.navOptimistic && typeof root.initNavOptimistic === 'function') {
-        root.initNavOptimistic();
-      }
-
-      if (cfg.sheetDrag && typeof root.initSheetDrag === 'function') {
-        root.initSheetDrag();
-      }
-
-      if (cfg.pullToRefresh && typeof root.initPullToRefresh === 'function') {
-        root.initPullToRefresh();
-      }
-
-      if (cfg.turboNav && typeof root.initTurboNav === 'function') {
-        root.initTurboNav();
-      }
-
-      if (cfg.pwaRegister && typeof root.initPwaRegister === 'function') {
-        root.initPwaRegister({ swPath: cfg.swPath });
-      }
-    },
-
-    version: '2.0.0',
-  };
-
-  root.KloddDS = KloddDS;
-})(typeof window !== 'undefined' ? window : globalThis);