@klodd/ds 3.10.0 → 3.10.2

package/SKILL.md

@@ -65,6 +65,8 @@ En sprint — oavsett om den innehåller CSS, JS eller bara dokumentation —
    direkt efter publish)
 3. App-commits är pushade
 
+Ingen CHANGELOG - versionshistorik finns i git log och DESIGN_CHAT.md.
+
 Manuell filsync till app-repos är aldrig ett godkänt alternativ.
 
 ## CLI-kommandon
@@ -108,4 +110,4 @@ En källa, alla projekt ser samma skill automatiskt. Ändringar i
 `~/dev/klodd-ds/SKILL.md`, `POLICY.md` eller `references/` syns
 omedelbart i nästa CC-session - ingen synk-fas behövs.
 
-Updated: 2026-05-10 (matchar @klodd/ds 3.9.0)
+Updated: 2026-05-10 (matchar @klodd/ds 3.10.1)

package/css/components/kv-list.css

@@ -35,6 +35,7 @@
   display: flex;
   justify-content: space-between;
   align-items: baseline;
+  gap: var(--space-10);
   padding: var(--space-8) 0;
   font-size: var(--fs-13);
   color: var(--text-subtle);

package/css/components/setting-row.css

@@ -73,7 +73,7 @@
 .setting-row__text {
   display: flex;
   flex-direction: column;
-  gap: 2px;
+  gap: var(--space-2);
   min-width: 0;
   flex: 1;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@klodd/ds",
-  "version": "3.10.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.",
+  "version": "3.10.2",
+  "description": "Klodd shared design system - tokens, components, JS",
   "main": "css/index.css",
   "bin": {
     "klodd-ds": "bin/klodd-ds.js"

package/references/02-components.md

@@ -80,9 +80,9 @@ För varje entry gäller:
 
 ### hero-roll (`hero-roll.css`)
 - **Blocks:** `.hero-amount` (definieras aven i `hero.css`)
-- **Element:** `.hero-amount__digit-track`
+- **Element:** `.hero-amount__digit-roller`, `.hero-amount__digit-track`, `.hero-amount__static-char`
 - **States:** `[data-animate-roll]` pa `.hero-amount` (JS triggar animation)
-- **Anvand:** Display-siffer-animation pa hero-vyer (kodlas-rullning)
+- **Anvand:** Display-siffer-animation pa hero-vyer (kodlas-rullning). `__digit-roller` ar wrapper med ::before/::after-faders, `__digit-track` ar siffran-stack som flyttas vertikalt, `__static-char` ar statiska tecken (kr-suffix, kommatecken) utanfor rullnings-mekaniken.
 - **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).
 
@@ -109,12 +109,13 @@ För varje entry gäller:
 - **Special:** `.tooltip-wrapper` ar compound block, INTE flat-element av `.tooltip`. Wrappern ar utanfor `.tooltip` i DOM (parent, inte child).
 
 ### dropdown (`dropdown.css`)
-- **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`
+- **Blocks:** `.dropdown` (huvud-block med BEM-elements - INTE siblings)
+- **Element:** `.dropdown__menu`, `.dropdown__item`, `.dropdown__divider`
+- **Modifiers:** `.dropdown__item--danger`
+- **States:** `.dropdown.is-open` (JS togglar pa root, `.dropdown__menu` syns via descendant-cascade). `.dropdown__item:hover/:active/:focus-visible/[disabled]/:disabled`
+- **Anvand:** Kontextuell meny (kebab/more-actions). JS togglar `.is-open` pa `.dropdown`-roten
 - **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`
+- **Tokens:** `--surface-overlay/-hover/-active`, `--text-default`, `--border-default/-subtle/-focus`, `--bg-danger` (item--danger), `--z-dropdown`, `--radius-10`
 
 
 ## Layout-komponenter (v3.0.0+)
@@ -286,12 +287,17 @@ För varje entry gäller:
 - **Special:** Alla 4 blocks anvands tillsammans i offline.html. Compound-block-monster per regel 11.
 
 ### 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`)
+- **Blocks:** `.sheet` (kompletterar `.sheet` fran `overlay.css` med innehall-typografi och form-monster - overlay.css ager skalet `.sheet`/`__handle`/`__body`/`__divider`)
+- **Element (form-struktur):** `.sheet__title`, `.sheet__description`, `.sheet__form`, `.sheet__subform`
+- **Element (falt):** `.sheet__field`, `.sheet__field-label`, `.sheet__input-wrap`, `.sheet__input`, `.sheet__suffix`, `.sheet__hint`
+- **Element (actions):** `.sheet__item-grid`, `.sheet__item`, `.sheet__actions`, `.sheet__confirm`, `.sheet__btn--save`, `.sheet__btn--delete`
+- **Element (toggle):** `.sheet__toggle`, `.sheet__toggle-label`, `.sheet__toggle-input`
+- **Modifiers:** `.sheet__form--inline`, `.sheet__field-label--upper`, `.sheet__input--select`, `.sheet__input--standalone`, `.sheet__hint--compact`, `.sheet__item--primary`, `.sheet__item--reset`, `.sheet__item--back`
+- **States:** `.sheet__input-wrap:focus-within`, `.sheet__input--standalone:focus`, `.sheet__hint.is-error`, `.sheet__hint--compact.is-error`, `.sheet__item:hover/:active/:focus-visible`, `.sheet__item--primary:hover`, `.sheet__btn--save:disabled/:hover/:focus-visible`, `.sheet__btn--delete:hover/:focus-visible`
+- **Anvand:** Sprint-65 sheet-form-monster - bottom-sheet med titel + description + form, primart konsumerat via Jinja2-macros `field_sheet` (single-field) och `multi_field_sheet` (multi-field) i Ekonom (`partials/_sheet_macros.html`). Items-grid for kategori-val, multi-step actions med confirm-text, toggle-rad for boolean-fields, subform med border-top-divider, save/delete-action-buttons med fixed-sizes (48px/44px). Apparna binder data via egna domain-klasser pa items.
+- **INTE:** Sheet-overlay-skalet (definieras i `overlay.css` - `.sheet`/`.sheet__handle`/`.sheet__body`/`.sheet__divider`). Inte heller generiska form-fields pa sidor (anvand `.form-card`/`.form-group`/`.input` fran respektive komponent).
+- **Special:** `.sheet__btn--save`/`.sheet__btn--delete` ar tightly coupled till sheet-context med fixed-sizes - inte generiska `.btn`-modifiers. Compound-BEM-namnskonvention (`__btn--variant`).
+- **Tokens:** Typografi: `--fs-11/-12/-13/-14/-15/-17`, `--fw-medium`, `--lh-snug`. Surfaces: `--surface-default/-sunken/-hover`. Text: `--text-default/-subtle/-muted/-disabled/-on-accent`. Borders: `--border-default/-focus`. Accent: `--accent-9/-10/-danger/-danger-dim`. Spacing: `--space-4/-6/-8/-10/-12/-14/-16/-18/-32`. Radius: `--radius-12/-14`. Motion: `--dur-fast`, `--ease-spring-snappy`.
 
 
 ## Kategori-monstret

package/references/05-open-decisions/{0013-jubb-kv-list-migration.md → 0013-jubb-kv-list-migration-CLOSED.md}

@@ -1,7 +1,12 @@
 # 0013 - Jubb kv-list template-migration
 
 ## Status
-Pending.
+Closed 2026-05-10.
+
+## Resolution
+Package extended with .kv-list__key and .kv-list__value BEM elements
+in @klodd/ds 3.10.1. All 5 Jubb templates migrated. Local flat
+definitions removed from jubb.css.
 
 ## Context
 Sprint 5 (3.9.0, MADR 0009) lyfte kv-list till @klodd/ds som BEM-