@klodd/ds 3.10.1 → 3.10.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/SKILL.md +4 -1
  2. package/css/10-semantic.css +1 -1
  3. package/css/components/setting-row.css +1 -1
  4. package/js/nav-optimistic.js +4 -4
  5. package/js/turbo-nav.js +2 -2
  6. package/package.json +2 -2
  7. package/references/02-components.md +19 -13
  8. package/references/05-open-decisions/{0013-jubb-kv-list-migration.md → 0013-jubb-kv-list-migration-CLOSED.md} +6 -1
package/SKILL.md CHANGED
@@ -63,8 +63,11 @@ En sprint — oavsett om den innehåller CSS, JS eller bara dokumentation —
63
63
  2. `npm install @klodd/ds@X.Y.Z && npm run build:ds` är kört i båda app-repos
64
64
  (använd explicit versionsnummer, inte @latest — npm-cache kan ligga efter
65
65
  direkt efter publish)
66
+ Om du får ETARGET vid npm install - lägg till --prefer-online för att bypassa npm-cache.
66
67
  3. App-commits är pushade
67
68
 
69
+ Ingen CHANGELOG - versionshistorik finns i git log och DESIGN_CHAT.md.
70
+
68
71
  Manuell filsync till app-repos är aldrig ett godkänt alternativ.
69
72
 
70
73
  ## CLI-kommandon
@@ -108,4 +111,4 @@ En källa, alla projekt ser samma skill automatiskt. Ändringar i
108
111
  `~/dev/klodd-ds/SKILL.md`, `POLICY.md` eller `references/` syns
109
112
  omedelbart i nästa CC-session - ingen synk-fas behövs.
110
113
 
111
- Updated: 2026-05-10 (matchar @klodd/ds 3.9.0)
114
+ Updated: 2026-05-10 (matchar @klodd/ds 3.10.1)
package/css/10-semantic.css CHANGED
@@ -54,7 +54,7 @@
54
54
  --surface-hover: light-dark(oklch(0.93 0.004 250), var(--gray-4));
55
55
 
56
56
  /* Active/pressed-state.
57
- Anvand for: :active-bakgrund, .nav-pod.active.
57
+ Anvand for: :active-bakgrund, .bottom-nav__item--active.
58
58
  INTE for: hover (anvand --surface-hover). */
59
59
  --surface-active: light-dark(oklch(0.88 0.005 250), var(--gray-5));
60
60
 
package/css/components/setting-row.css CHANGED
@@ -73,7 +73,7 @@
73
73
  .setting-row__text {
74
74
  display: flex;
75
75
  flex-direction: column;
76
- gap: 2px;
76
+ gap: var(--space-2);
77
77
  min-width: 0;
78
78
  flex: 1;
79
79
  }
package/js/nav-optimistic.js CHANGED
@@ -1,12 +1,12 @@
1
1
  /*--------------------------------------------------------------
2
2
  Sprint F1 + G4 + I: optimistic active-flytt pa bottom-nav.
3
3
 
4
- Problem (CE 2026-04-27): tap pa bottom-nav-pod tar ~1s innan
4
+ Problem (CE 2026-04-27): tap pa bottom-nav-item tar ~1s innan
5
5
  podden blir visuellt aktiv. Anvandaren ser inaktiv pod tills
6
6
  hela nya sidan laddats. Native-appar uppdaterar tab-bar
7
7
  omedelbart vid tap, oberoende av content-render.
8
8
 
9
- Losning: vid click pa nav-pod flytta active-class direkt till
9
+ Losning: vid click pa bottom-nav-item flytta active-class direkt till
10
10
  tappad pod. Turbo-fetch (Sprint I) eller cross-document VT
11
11
  renderar content parallellt. Failsafe rullar tillbaka active-
12
12
  flytt om navigation inte landar (notification, network-stall
@@ -39,11 +39,11 @@
39
39
  if ( e.metaKey || e.ctrlKey || e.shiftKey || e.altKey ) return;
40
40
  if ( e.button !== undefined && e.button !== 0 ) return;
41
41
 
42
- const pod = e.target.closest( '.nav-pod' );
42
+ const pod = e.target.closest( '.bottom-nav__item' );
43
43
  if ( ! pod || ! nav.contains( pod ) ) return;
44
44
  if ( pod.classList.contains( 'bottom-nav__item--active' ) ) return;
45
45
 
46
- const previousActive = nav.querySelector( '.nav-pod.active' );
46
+ const previousActive = nav.querySelector( '.bottom-nav__item--active' );
47
47
  previousActive && previousActive.classList.remove( 'bottom-nav__item--active' );
48
48
  pod.classList.add( 'bottom-nav__item--active' );
49
49
 
package/js/turbo-nav.js CHANGED
@@ -184,8 +184,8 @@
184
184
  const newNav = newDoc.querySelector( '.bottom-nav' );
185
185
  const liveNav = document.querySelector( '.bottom-nav' );
186
186
  if ( newNav && liveNav ) {
187
- const newActiveHref = newNav.querySelector( '.nav-pod.active' );
188
- const liveActive = liveNav.querySelector( '.nav-pod.active' );
187
+ const newActiveHref = newNav.querySelector( '.bottom-nav__item--active' );
188
+ const liveActive = liveNav.querySelector( '.bottom-nav__item--active' );
189
189
  if ( liveActive ) liveActive.classList.remove( 'bottom-nav__item--active' );
190
190
  if ( newActiveHref ) {
191
191
  const target = liveNav.querySelector(
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@klodd/ds",
3
- "version": "3.10.1",
4
- "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.",
3
+ "version": "3.10.3",
4
+ "description": "Klodd shared design system - tokens, components, JS",
5
5
  "main": "css/index.css",
6
6
  "bin": {
7
7
  "klodd-ds": "bin/klodd-ds.js"
package/references/02-components.md CHANGED
@@ -80,9 +80,9 @@ För varje entry gäller:
80
80
 
81
81
  ### hero-roll (`hero-roll.css`)
82
82
  - **Blocks:** `.hero-amount` (definieras aven i `hero.css`)
83
- - **Element:** `.hero-amount__digit-track`
83
+ - **Element:** `.hero-amount__digit-roller`, `.hero-amount__digit-track`, `.hero-amount__static-char`
84
84
  - **States:** `[data-animate-roll]` pa `.hero-amount` (JS triggar animation)
85
- - **Anvand:** Display-siffer-animation pa hero-vyer (kodlas-rullning)
85
+ - **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.
86
86
  - **INTE:** Vanliga numeriska varden (anvand `.hero__amount` utan data-animate-roll)
87
87
  - **Tokens:** `--text-default`, `--lh-tight`, `--ls-tightest`, `--fs-80`. **Undantag:** `font-weight: 600` (display-undantaget fran 400/500-policyn).
88
88
 
@@ -109,12 +109,13 @@ För varje entry gäller:
109
109
  - **Special:** `.tooltip-wrapper` ar compound block, INTE flat-element av `.tooltip`. Wrappern ar utanfor `.tooltip` i DOM (parent, inte child).
110
110
 
111
111
  ### dropdown (`dropdown.css`)
112
- - **Blocks:** `.dropdown`, `.dropdown-menu`, `.dropdown-item`, `.dropdown-divider` (siblings i dropdown-familjen)
113
- - **Modifiers:** `.dropdown-item--danger`
114
- - **States:** `.dropdown.is-open`, `.dropdown.is-open-toggling`
115
- - **Anvand:** Kontextuell meny (kebab/more-actions). JS togglar `.is-open`
112
+ - **Blocks:** `.dropdown` (huvud-block med BEM-elements - INTE siblings)
113
+ - **Element:** `.dropdown__menu`, `.dropdown__item`, `.dropdown__divider`
114
+ - **Modifiers:** `.dropdown__item--danger`
115
+ - **States:** `.dropdown.is-open` (JS togglar pa root, `.dropdown__menu` syns via descendant-cascade). `.dropdown__item:hover/:active/:focus-visible/[disabled]/:disabled`
116
+ - **Anvand:** Kontextuell meny (kebab/more-actions). JS togglar `.is-open` pa `.dropdown`-roten
116
117
  - **INTE:** Permanent visible navigation (anvand `.nav` eller `.tab-bar`)
117
- - **Tokens:** `--surface-overlay/-hover/-active`, `--text-default`, `--border-default/-subtle/-focus`, `--bg-danger` (item--danger), `--z-dropdown`
118
+ - **Tokens:** `--surface-overlay/-hover/-active`, `--text-default`, `--border-default/-subtle/-focus`, `--bg-danger` (item--danger), `--z-dropdown`, `--radius-10`
118
119
 
119
120
 
120
121
  ## Layout-komponenter (v3.0.0+)
@@ -286,12 +287,17 @@ För varje entry gäller:
286
287
  - **Special:** Alla 4 blocks anvands tillsammans i offline.html. Compound-block-monster per regel 11.
287
288
 
288
289
  ### sheet-content (`sheet-content.css`) - v3.5.1
289
- - **Blocks:** `.sheet` (kompletterar `.sheet` fran `overlay.css` med innehall-typografi och form-monster)
290
- - **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)
291
- - **Modifiers:** `.sheet__form--inline`, `.sheet__field-label--upper`, `.sheet__hint--compact`
292
- - **States:** `.sheet__hint.is-error`, `.sheet__hint--compact.is-error`
293
- - **Anvand:** Sprint-65 sheet-form-monster (Title + description + Form + Field + Items + Actions + Toggle + Subform)
294
- - **INTE:** Sheet-overlay sjalv (definieras i `overlay.css`)
290
+ - **Blocks:** `.sheet` (kompletterar `.sheet` fran `overlay.css` med innehall-typografi och form-monster - overlay.css ager skalet `.sheet`/`__handle`/`__body`/`__divider`)
291
+ - **Element (form-struktur):** `.sheet__title`, `.sheet__description`, `.sheet__form`, `.sheet__subform`
292
+ - **Element (falt):** `.sheet__field`, `.sheet__field-label`, `.sheet__input-wrap`, `.sheet__input`, `.sheet__suffix`, `.sheet__hint`
293
+ - **Element (actions):** `.sheet__item-grid`, `.sheet__item`, `.sheet__actions`, `.sheet__confirm`, `.sheet__btn--save`, `.sheet__btn--delete`
294
+ - **Element (toggle):** `.sheet__toggle`, `.sheet__toggle-label`, `.sheet__toggle-input`
295
+ - **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`
296
+ - **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`
297
+ - **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.
298
+ - **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).
299
+ - **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`).
300
+ - **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`.
295
301
 
296
302
 
297
303
  ## Kategori-monstret
package/references/05-open-decisions/{0013-jubb-kv-list-migration.md → 0013-jubb-kv-list-migration-CLOSED.md} RENAMED
@@ -1,7 +1,12 @@
1
1
  # 0013 - Jubb kv-list template-migration
2
2
 
3
3
  ## Status
4
- Pending.
4
+ Closed 2026-05-10.
5
+
6
+ ## Resolution
7
+ Package extended with .kv-list__key and .kv-list__value BEM elements
8
+ in @klodd/ds 3.10.1. All 5 Jubb templates migrated. Local flat
9
+ definitions removed from jubb.css.
5
10
 
6
11
  ## Context
7
12
  Sprint 5 (3.9.0, MADR 0009) lyfte kv-list till @klodd/ds som BEM-