@klodd/ds 5.4.2 → 5.4.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.
- package/README.md +4 -2
- package/SKILL.md +19 -7
- package/css/components/nav.css +12 -4
- package/css/components/pwa-avatar.css +2 -2
- package/package.json +1 -1
- package/references/02-components.md +1 -1
- package/references/04-locked-decisions/0003-radix-colors-oklch.md +1 -1
- package/references/04-locked-decisions/0006-mauve-neutral.md +0 -4
- package/references/04-locked-decisions/0015-panel-title-tag-doctrine.md +2 -2
- package/references/04-locked-decisions/0016-mina-sidor-doctrine.md +0 -2
- package/references/04-locked-decisions/0020-domain-to-package-lift.md +2 -2
- package/references/04-locked-decisions/0023-progress-list-utility.md +1 -1
- package/references/04-locked-decisions/0024-tightened-component-lift-doctrine.md +135 -0
- package/references/04-locked-decisions/{0015-turbo-nav-script-init.md → 0025-turbo-nav-script-init.md} +3 -1
- package/references/04-locked-decisions/{0016-async-progress-fetch-fn.md → 0026-async-progress-fetch-fn.md} +3 -1
- package/references/05-open-decisions/0001-tx-row-to-list-row-migration-CLOSED.md +1 -1
- package/references/05-open-decisions/0008-legacy-token-migration-CLOSED.md +6 -6
- package/references/05-open-decisions/0014-ekonom-colored-row-migration-CLOSED.md +1 -2
- package/references/05-open-decisions/0017-async-progress-pipeline-gaps.md +1 -1
- package/references/05-open-decisions/0018-build-ds-prune.md +35 -0
- package/references/DESIGN-LANGUAGE.md +1 -1
package/README.md
CHANGED
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
# @klodd/ds
|
|
2
2
|
|
|
3
|
+
Senast audit: 2026-05-20. Aktiv åtgärdslista: `audits/00-summary.md`.
|
|
4
|
+
|
|
3
5
|
Klodd Design System - delade tokens, typografi och komponenter for
|
|
4
|
-
Klodds appar (Jubb
|
|
6
|
+
Klodds appar (Jubb och Ekonom).
|
|
5
7
|
|
|
6
8
|
Dark-mode-first PWA-designsystem byggt pa Radix Colors. OKLCH-baserade
|
|
7
9
|
fargramper, pixel-numerisk spacing-konvention och tre-lagers token-
|
|
@@ -62,7 +64,7 @@ Officiella **Radix Colors** dark-skalor:
|
|
|
62
64
|
- **Mauve Dark** (neutral) - lila-tonad gra som kompletterar Blue och Plum
|
|
63
65
|
- **Blue Dark** (Jubb accent) - sky-blue (#0090ff)
|
|
64
66
|
- **Plum Dark** (Ekonom accent) - varm magenta-lila (#ab4aba)
|
|
65
|
-
- **Violet Dark** -
|
|
67
|
+
- **Violet Dark** - definierad men oanvänd
|
|
66
68
|
- **Green/Amber/Red Dark** - status (success/warning/danger)
|
|
67
69
|
|
|
68
70
|
Status-tokens har bade solid-bakgrund (`--bg-success/warning/danger`)
|
package/SKILL.md
CHANGED
|
@@ -1,14 +1,21 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: klodd-ds
|
|
3
|
-
description: Design memory for the @klodd/ds shared design system
|
|
3
|
+
description: Design memory for the @klodd/ds shared design system used by the two apps that consume it (Jubb, Ekonom). Use this skill whenever working on UI components, design tokens, theming, CSS class names, spacing, color, typography, accessibility, or any visual or interaction decision in an app that imports @klodd/ds. Also use when questions arise about component APIs, token architecture, BEM naming, or whether to add new tokens vs reuse existing. Contains locked architectural decisions (do not re-litigate without explicit instruction) and open migration items (still under discussion).
|
|
4
4
|
---
|
|
5
5
|
|
|
6
6
|
# @klodd/ds — Design Memory
|
|
7
7
|
|
|
8
|
+
## Status
|
|
9
|
+
Senast audit: 2026-05-20. Pågående arbete enligt `audits/00-summary.md`:
|
|
10
|
+
- Sprint 1: dead-code-städning + topbar-bump (~435 rader)
|
|
11
|
+
- Sprint 2: component-token-konsolidering, ADR 0024-backfill, light-theme-removal
|
|
12
|
+
- Sprint 3: base.css-extraktion till paketets base-lager
|
|
13
|
+
|
|
8
14
|
## Vad detta är
|
|
9
15
|
Gemensamt designsystem på npm (`@klodd/ds@5.x`). Tre-lagers tokens,
|
|
10
16
|
38+ komponenter (progress-bar tillagd v5.2.1, 2026-05-18), konsumeras
|
|
11
|
-
av Jubb och Ekonom
|
|
17
|
+
av Jubb och Ekonom - det är paketets hela scope, inte ett paraply för
|
|
18
|
+
fler appar.
|
|
12
19
|
Denna Skill fångar både reglerna ("vad") och resonemanget ("varför").
|
|
13
20
|
|
|
14
21
|
## Läs i denna ordning
|
|
@@ -28,15 +35,15 @@ Denna Skill fångar både reglerna ("vad") och resonemanget ("varför").
|
|
|
28
35
|
</locked_rules>
|
|
29
36
|
|
|
30
37
|
## Apps och theming
|
|
38
|
+
@klodd/ds har exakt två konsumenter - Jubb och Ekonom. Det finns inget
|
|
39
|
+
mönster för att introducera fler appar; theming-modellen är byggd för
|
|
40
|
+
dessa två.
|
|
31
41
|
- `data-app="jubb"` → Blue accent (Radix Blue Dark), Blue-tonad bakgrund
|
|
32
42
|
- `data-app="ekonom"` → Plum accent (Radix Plum Dark), Plum-tonad bakgrund
|
|
33
|
-
-
|
|
34
|
-
overrides (obligatoriskt, 5 rader) + valfria surface/text-overrides
|
|
35
|
-
(15-40 rader totalt om appen ska ha distinkt bakgrundston)
|
|
36
|
-
- **Surface-raised-konvention**: alla Klodd-appar sätter
|
|
43
|
+
- **Surface-raised-konvention**: bägge apparna sätter
|
|
37
44
|
`--surface-raised: var(--<color>-2)` - kort och paneler ligger på
|
|
38
45
|
samma yta som default-sektioner men distinkt mot page-bakgrunden
|
|
39
|
-
(color-1).
|
|
46
|
+
(color-1).
|
|
40
47
|
|
|
41
48
|
## Besluts-records
|
|
42
49
|
- `references/04-locked-decisions/` — låsta beslut. Förklara, ändra inte.
|
|
@@ -115,6 +122,11 @@ cd ~/dev/Jubb && npm install @klodd/ds@latest && npm run build:ds
|
|
|
115
122
|
cd ~/dev/Ekonom && npm install @klodd/ds@latest && npm run build:ds
|
|
116
123
|
```
|
|
117
124
|
|
|
125
|
+
**OBS:** build:ds rensar inte borttagna filer. Efter en
|
|
126
|
+
komponent-radering: verifiera manuellt att
|
|
127
|
+
`app/static/css/ds/components/<borttagen>.css` inte finns kvar i
|
|
128
|
+
apparna.
|
|
129
|
+
|
|
118
130
|
## Sprint-avslut: alla sprintar kräver detta
|
|
119
131
|
En sprint — oavsett om den innehåller CSS, JS eller bara dokumentation —
|
|
120
132
|
är inte klar förrän:
|
package/css/components/nav.css
CHANGED
|
@@ -159,12 +159,20 @@
|
|
|
159
159
|
justify-self: end;
|
|
160
160
|
}
|
|
161
161
|
|
|
162
|
+
.topbar > a:has(> .avatar) {
|
|
163
|
+
min-width: var(--touch-min);
|
|
164
|
+
min-height: var(--touch-min);
|
|
165
|
+
display: inline-flex;
|
|
166
|
+
align-items: center;
|
|
167
|
+
justify-content: center;
|
|
168
|
+
}
|
|
169
|
+
|
|
162
170
|
.topbar__back {
|
|
163
171
|
display: inline-flex;
|
|
164
172
|
align-items: center;
|
|
165
173
|
justify-content: center;
|
|
166
|
-
width:
|
|
167
|
-
height:
|
|
174
|
+
width: var(--touch-min);
|
|
175
|
+
height: var(--touch-min);
|
|
168
176
|
padding: 0;
|
|
169
177
|
border: 1px solid var(--border-subtle);
|
|
170
178
|
border-radius: var(--radius-full);
|
|
@@ -203,8 +211,8 @@
|
|
|
203
211
|
display: inline-flex;
|
|
204
212
|
align-items: center;
|
|
205
213
|
justify-content: center;
|
|
206
|
-
min-width: var(--touch-
|
|
207
|
-
min-height: var(--touch-
|
|
214
|
+
min-width: var(--touch-min);
|
|
215
|
+
min-height: var(--touch-min);
|
|
208
216
|
padding: 0 var(--space-10);
|
|
209
217
|
background: transparent;
|
|
210
218
|
border: 0;
|
package/package.json
CHANGED
|
@@ -441,7 +441,7 @@ Definiera tokens + bindningar:
|
|
|
441
441
|
app-domain-CSS-bindningar ar att foredra (data-attribute-konvention
|
|
442
442
|
+ lasbar template)
|
|
443
443
|
|
|
444
|
-
Jubb
|
|
444
|
+
Jubb och Ekonom foljer samma monster med sina egna tokens.
|
|
445
445
|
|
|
446
446
|
|
|
447
447
|
## Anti-patterns
|
|
@@ -20,7 +20,7 @@ Anvand **officiella Radix Colors dark-skalor** rakt av:
|
|
|
20
20
|
- Mauve (neutral - se ADR 0006)
|
|
21
21
|
- Blue Dark (Jubb accent)
|
|
22
22
|
- Plum Dark (Ekonom accent)
|
|
23
|
-
- Violet Dark (
|
|
23
|
+
- Violet Dark (definierad, inte aktivt anvand)
|
|
24
24
|
- Green/Amber/Red Dark (status)
|
|
25
25
|
|
|
26
26
|
Plus alpha-skalor (Mauve/Blue/Plum) for transparency-tints.
|
|
@@ -26,10 +26,6 @@ Mauve Dark, INTE ren gray eller slate.
|
|
|
26
26
|
- + Subtle lila-tonad ger varmare bottenton som matchar bagge
|
|
27
27
|
app-accenterna
|
|
28
28
|
- + Konsistent visuellt sprak over apparna - bagge har samma neutral
|
|
29
|
-
- − Mauve passar INTE for en framtida gron- eller orange-accent-app.
|
|
30
|
-
Inte planerat - om det blir aktuellt valjer vi neutral utifran den
|
|
31
|
-
appens accent vid den punkten (kanske separat data-app + neutral-
|
|
32
|
-
override)
|
|
33
29
|
- − Vissa anvandare kan kanna sig ovana med varmare neutral - branschen
|
|
34
30
|
ar dominerad av kallare gray/slate
|
|
35
31
|
|
|
@@ -6,7 +6,7 @@ Locked.
|
|
|
6
6
|
## Context
|
|
7
7
|
|
|
8
8
|
Audit 2026-05-13 kvällsessionen avslöjade två problem med
|
|
9
|
-
`.panel__title`-användning över
|
|
9
|
+
`.panel__title`-användning över Jubb och Ekonom:
|
|
10
10
|
|
|
11
11
|
**Problem 1: Inkonsekvent HTML-tagg i Ekonom.**
|
|
12
12
|
- 35 platser använder `<div class="panel__title">` (94%)
|
|
@@ -89,7 +89,7 @@ Här är `.hero__label` korrekt eftersom `.hero__amount--card` följer.
|
|
|
89
89
|
som h3 default)
|
|
90
90
|
- CSS oförändrad - `.panel__title`-stylling targetar klassen, inte
|
|
91
91
|
taggen
|
|
92
|
-
- Konsekvens över
|
|
92
|
+
- Konsekvens över Jubb och Ekonom
|
|
93
93
|
|
|
94
94
|
**Trade-offs:**
|
|
95
95
|
- Heading-hierarki är inte alltid h1→h2→h3 över hela sajten. Vyer utan
|
|
@@ -105,13 +105,11 @@ används av alla nuvarande och framtida Klodd-appar.
|
|
|
105
105
|
|---|---|
|
|
106
106
|
| Ekonom | Min ekonomi (inkomst, saldo) + Mina inställningar (toggles, abonnemang) |
|
|
107
107
|
| Jubb | Skip "Min [domän]" → Mina inställningar (Sökläge, Notiser, AI-profil) |
|
|
108
|
-
| Future-app | "Min [domän]" om personliga värden finns separat |
|
|
109
108
|
|
|
110
109
|
## Konsekvenser
|
|
111
110
|
|
|
112
111
|
**Bra:**
|
|
113
112
|
- Single source of truth för settings-hubbar
|
|
114
|
-
- Future-Margevo + framtida appar får gratis-pattern
|
|
115
113
|
- A11y + iOS-konvention: heading-hierarki + setting-row-rytm
|
|
116
114
|
- Komposit av befintliga paket-komponenter (ingen ny CSS behövs)
|
|
117
115
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
# 0020 - Domain-to-package lift: alla Ekonom-specifika block lyfts
|
|
2
2
|
|
|
3
3
|
## Status
|
|
4
|
-
|
|
4
|
+
Superseded by ADR 0024 (2026-05-20). Var ursprungligen Locked (minor version-bump 4.4.0, additiv paket-utvidgning).
|
|
5
5
|
|
|
6
6
|
## Context
|
|
7
7
|
|
|
@@ -196,7 +196,7 @@ Bagge appars `design.html` utokas med 14 nya sektioner:
|
|
|
196
196
|
**Bra:**
|
|
197
197
|
- Calle's princip uppfylld: "lyft eller drop". Paketet ar nu fullt
|
|
198
198
|
designsystem - alla komponenter Ekonom anvander finns i paketet.
|
|
199
|
-
-
|
|
199
|
+
- Alla 17 komponenter ligger i paketet, ingen behover fork:a Ekonom-domain.
|
|
200
200
|
- /design visar 100% av apparnas faktiska CSS-yta (efter utvidgning).
|
|
201
201
|
- BEM-disciplin uppratthallen: alla nya block foljer block + element +
|
|
202
202
|
modifier-struktur. Inga 3-niva-nesting (`__elem__sub`).
|
|
@@ -15,7 +15,7 @@ Tidigare bodde dessa som `.cat-bar-list` + `.cat-bar-row` i Ekonoms
|
|
|
15
15
|
separata). Lyft till paketet för att:
|
|
16
16
|
|
|
17
17
|
1. Eliminera Ekonom-domain-CSS som inte är domain-specifikt
|
|
18
|
-
2.
|
|
18
|
+
2. Göra list-mönstret tillgängligt i paketet utan kopiering
|
|
19
19
|
3. Tydliggöra att klassen wrappar `.progress` (inte är en alternativ
|
|
20
20
|
bar-stil)
|
|
21
21
|
|
|
@@ -0,0 +1,135 @@
|
|
|
1
|
+
# 0024 - Skärpt komponent-lyft-doktrin (supersedes 0020)
|
|
2
|
+
|
|
3
|
+
## Status
|
|
4
|
+
Locked (2026-05-20). Supersedes ADR 0020.
|
|
5
|
+
|
|
6
|
+
## Context
|
|
7
|
+
|
|
8
|
+
ADR 0020 (2026-05-14) lyfte 17 Ekonom-domän-block till paketet på
|
|
9
|
+
principen "lyft eller drop, ingen mellanversion". 8 hamnade som egna
|
|
10
|
+
filer i `css/components/`.
|
|
11
|
+
|
|
12
|
+
Audit fas 6 + fas 11 (2026-05-20) verifierade: alla 8 hade exakt EN
|
|
13
|
+
konsument (Ekonom). Jubb använde noll i produktion. Det var
|
|
14
|
+
relokering, inte generalisering - Ekonoms domän-CSS flyttades in i
|
|
15
|
+
det delade paketet och kallades "delat" trots en enda konsument.
|
|
16
|
+
|
|
17
|
+
Rotfelet: ADR 0020 lyfte på kriteriet "kan delas" (komponenten är
|
|
18
|
+
generisk nog att en annan app SKULLE kunna använda den) i stället
|
|
19
|
+
för "delas" (en andra app använder den faktiskt). "Kan delas" är ett
|
|
20
|
+
subjektivt omdöme som nästan vad som helst passerar.
|
|
21
|
+
|
|
22
|
+
Dessutom introducerade lyftet en state-regression: `matched-row` och
|
|
23
|
+
`expandable-row__header` tappade `:active`-press-feedback som
|
|
24
|
+
originalen (`.sub-row`, `.cat-row__header`) hade via `base.css`
|
|
25
|
+
press-feedback-selektorlista (fas 2d/7a). Ingen checklist fångade det.
|
|
26
|
+
|
|
27
|
+
## Decision
|
|
28
|
+
|
|
29
|
+
ADR 0024 supersedes ADR 0020:s lyft-kriterium. Tre regler:
|
|
30
|
+
|
|
31
|
+
1. **Minst två dokumenterade konsumerande appar krävs innan lyft.**
|
|
32
|
+
@klodd/ds har exakt två konsumenter - Jubb och Ekonom (scope
|
|
33
|
+
fixerat, beslut #4, 2026-05-20). "Minst två konsumenter" betyder
|
|
34
|
+
därför i praktiken: BÅDA apparna använder komponenten, med en
|
|
35
|
+
namngiven verifierad plats (fil:rad) i var. Det betyder INTE
|
|
36
|
+
"vänta på en framtida tredje app" - det finns ingen tredje app och
|
|
37
|
+
ingen planeras. En komponent som bara en av de två apparna
|
|
38
|
+
använder hör hemma i den appens domän-CSS, inte i paketet. Ett
|
|
39
|
+
omdöp till generiskt namn skapar ingen andra konsument. Att
|
|
40
|
+
tillverka en konsument efteråt - få den andra appen att adoptera
|
|
41
|
+
komponenten enbart för att rättfärdiga lyftet - är YAGNI baklänges
|
|
42
|
+
och förbjudet.
|
|
43
|
+
|
|
44
|
+
2. **State-täckning-checklist obligatorisk vid lyft.** Före lyft:
|
|
45
|
+
räkna upp original-komponentens interaktiva states (`:hover`,
|
|
46
|
+
`:active`, `:focus-visible`, `:disabled`). Efter lyft: verifiera
|
|
47
|
+
att paket-versionen reproducerar varenda en. Inga state-
|
|
48
|
+
regressioner. Press-feedback som låg implicit i app-`base.css`-
|
|
49
|
+
selektorlistor måste flyttas explicit till paket-komponenten.
|
|
50
|
+
|
|
51
|
+
3. **Komponent-lyft-ADR-mallen ska innehålla kontrollpunkterna**
|
|
52
|
+
strukturerat (se Mall nedan), ifyllda, innan ADR:n kan låsas.
|
|
53
|
+
|
|
54
|
+
## Mall för framtida komponent-lyft-ADR
|
|
55
|
+
|
|
56
|
+
### Konsument-verifiering (regel 1)
|
|
57
|
+
- Konsument 1: [app] [fil:rad]
|
|
58
|
+
- Konsument 2: [app] [fil:rad]
|
|
59
|
+
- (Bägge apparna - Jubb och Ekonom - krävs. Bara en: komponenten
|
|
60
|
+
stannar i den appens domän-CSS.)
|
|
61
|
+
|
|
62
|
+
### State-täckning (regel 2)
|
|
63
|
+
| State | Original | Paket-version | Regression? |
|
|
64
|
+
|----------------|----------|---------------|-------------|
|
|
65
|
+
| :hover | | | |
|
|
66
|
+
| :active | | | |
|
|
67
|
+
| :focus-visible | | | |
|
|
68
|
+
| :disabled | | | |
|
|
69
|
+
|
|
70
|
+
## Backfill - ADR 0020-lyften omprövade (beslut #3, 2026-05-20)
|
|
71
|
+
|
|
72
|
+
Alla 8 single-consumer-komponenter från ADR 0020 flyttas tillbaka
|
|
73
|
+
till Ekonom. Ingen behålls i paketet. Regel 1 tillämpas strikt på
|
|
74
|
+
samtliga.
|
|
75
|
+
|
|
76
|
+
Tillbaka till Ekonom:
|
|
77
|
+
- Domän-compounds: `expandable-row`, `item-stack`, `matched-row`.
|
|
78
|
+
Kodar Ekonoms avstämnings-vokabulär; ett generiskt namn dolde det.
|
|
79
|
+
- Tidigare klassade "paket-primitiv": `icon-circle`, `status-icon`,
|
|
80
|
+
`review-banner`. Generiska till formen, men 1 konsument.
|
|
81
|
+
- Tidigare klassade "paket-utility": `kvp-arrow`, `kvp-target`,
|
|
82
|
+
`tag-inline`. För tunna för komponenter, men ändå 1 konsument.
|
|
83
|
+
|
|
84
|
+
Implementations-spec: `audits/sprint-2-checklist.md` Del B. Paketets
|
|
85
|
+
`css/components/` krymper 47 till 39 filer.
|
|
86
|
+
|
|
87
|
+
När en andra app konkret behöver någon av dem: lyft enligt regel
|
|
88
|
+
1 + 2 + 3. Verifierad konsument 1 + verifierad konsument 2 = lyft.
|
|
89
|
+
Inte tidigare.
|
|
90
|
+
|
|
91
|
+
## Why no grandfathering
|
|
92
|
+
|
|
93
|
+
Ett tidigare utkast föreslog att behålla `icon-circle`/`status-icon`/
|
|
94
|
+
`review-banner` i paketet med motiveringen "verifierat generiska,
|
|
95
|
+
flyttkostnaden överstiger bärkostnaden". Det förkastades.
|
|
96
|
+
|
|
97
|
+
Det är samma resonemang som ADR 0020 byggde på. ADR 0020 lyfte på
|
|
98
|
+
"komponenten är generisk nog att kunna delas" - och auditen (fas 12
|
|
99
|
+
slutsats #4, YAGNI) visade att just det resonemanget fyllde paketet
|
|
100
|
+
med single-consumer-kod. Ett undantag inskrivet i den nya doktrinen
|
|
101
|
+
dag ett återöppnar exakt den lucka doktrinen finns för att stänga.
|
|
102
|
+
"Verifierat generisk" är inget objektivt kriterium - det är samma
|
|
103
|
+
subjektiva omdöme som "kan delas", omformulerat.
|
|
104
|
+
|
|
105
|
+
Regeln måste vara mekanisk för att hålla: två verifierade
|
|
106
|
+
konsumenter, inga omdömen, inga undantag. En liten generisk primitiv
|
|
107
|
+
som bara en app använder kostar nästan inget att låta bo i appens
|
|
108
|
+
CSS tills den andra konsumenten finns. Den kostar betydligt mer att
|
|
109
|
+
bära i paketet som prejudikat för nästa "den här kan ju delas"-lyft.
|
|
110
|
+
|
|
111
|
+
## Konsekvenser
|
|
112
|
+
|
|
113
|
+
Bra:
|
|
114
|
+
- Paketet slutar samla single-consumer-domän-CSS. "Delad komponent"
|
|
115
|
+
betyder bevisat delad. `css/components/` krymper 47 till 39 filer.
|
|
116
|
+
- State-regressioner som `:active`-tappet fångas mekaniskt av
|
|
117
|
+
checklistan.
|
|
118
|
+
- Doktrinen har inga undantag - den kan inte urholkas av omdömen.
|
|
119
|
+
|
|
120
|
+
Trade-off:
|
|
121
|
+
- Ett genuint generiskt mönster som bara en app behöver idag måste
|
|
122
|
+
vänta i appens CSS tills den andra appen behöver det. Avsiktligt -
|
|
123
|
+
vänta-kostnaden är låg, junk-drawer-kostnaden är hög.
|
|
124
|
+
|
|
125
|
+
ADR 0020:s anda ("lyft eller drop, ingen mellanversion") kvarstår,
|
|
126
|
+
men "lyft" omdefinieras: lyft = bägge apparna är verifierade
|
|
127
|
+
konsumenter; 1 konsument = drop (stanna i appen). Mellanversionen
|
|
128
|
+
ADR 0020 i praktiken skapade (1-konsument-kod i paketet) är nu
|
|
129
|
+
explicit förbjuden, utan undantag.
|
|
130
|
+
|
|
131
|
+
## References
|
|
132
|
+
- ADR 0020 (superseded av denna)
|
|
133
|
+
- ADR 0013 (visual coherence / press-feedback-doktrin)
|
|
134
|
+
- Fas 6 (component-coverage), fas 11b, fas 12 slutsats #4 (YAGNI)
|
|
135
|
+
- Beslut #3 och #4 (2026-05-20)
|
|
@@ -1,10 +1,12 @@
|
|
|
1
|
-
#
|
|
1
|
+
# 0025 - Per-page-JS-init under turbo-nav
|
|
2
2
|
|
|
3
3
|
## Status
|
|
4
4
|
|
|
5
5
|
Locked. Upptäckt v192 (2026-05-19) under Chrome MCP-diagnos av
|
|
6
6
|
brief-progress-flödet i Jubb.
|
|
7
7
|
|
|
8
|
+
*Omnumrerad 2026-05-20: filnamnet sa 0015 (kollision med ADR 0015 panel-title-tag-doctrine) och H1 sa felaktigt 0009. Bägge korrigerade till 0025.*
|
|
9
|
+
|
|
8
10
|
## Context
|
|
9
11
|
|
|
10
12
|
`turbo-nav.js` (paketet) implementerar same-document-navigation
|
|
@@ -1,9 +1,11 @@
|
|
|
1
|
-
#
|
|
1
|
+
# 0026 - AsyncProgress fetchFn-option
|
|
2
2
|
|
|
3
3
|
## Status
|
|
4
4
|
|
|
5
5
|
Locked (2026-05-19).
|
|
6
6
|
|
|
7
|
+
*Omnumrerad 2026-05-20: filnamnet sa 0016 (kollision med ADR 0016 mina-sidor-doctrine), korrigerad till 0026.*
|
|
8
|
+
|
|
7
9
|
## Context
|
|
8
10
|
|
|
9
11
|
`KloddDS.AsyncProgress` (introducerad 5.3.0) använder intern `fetch()`
|
|
@@ -58,7 +58,7 @@ domanen). Generaliserat namn `.list-row` finns redan i paketets
|
|
|
58
58
|
`.list-row` som paritets-namn (paketets klass aktiverad globalt)
|
|
59
59
|
**Pros:**
|
|
60
60
|
- Inga template-andringar i Ekonom
|
|
61
|
-
- Paketets `.list-row` blir tillganglig for Jubb
|
|
61
|
+
- Paketets `.list-row` blir tillganglig for Jubb
|
|
62
62
|
**Cons:**
|
|
63
63
|
- Driften mellan apparna fortsatter (Ekonom anvander `.tx-*`, Jubb
|
|
64
64
|
hypotetiskt skulle anvanda `.list-row`)
|
|
@@ -18,7 +18,7 @@ Originaltexten bevarad nedan for historik.
|
|
|
18
18
|
---
|
|
19
19
|
|
|
20
20
|
## Original status (innan stangning)
|
|
21
|
-
Pending. Trigger:
|
|
21
|
+
Pending. Trigger: nar paketet behover mogna bort sin legacy-skuld.
|
|
22
22
|
|
|
23
23
|
## Context
|
|
24
24
|
`10-semantic.css` har en LEGACY ALIASES-sektion (rad 412-506) som
|
|
@@ -52,7 +52,7 @@ kostnad.
|
|
|
52
52
|
appar.
|
|
53
53
|
|
|
54
54
|
## Decision
|
|
55
|
-
Gor en fullstandig **lock-sprint**
|
|
55
|
+
Gor en fullstandig **lock-sprint** for att mogna paketet:
|
|
56
56
|
|
|
57
57
|
1. Migrera ALLA call-sites till nya semantic token-namn
|
|
58
58
|
(`--accent` -> `--accent-9` eller `--accent-text`, `--bg-base`
|
|
@@ -67,7 +67,7 @@ Gor en fullstandig **lock-sprint** innan tredje app laggs till:
|
|
|
67
67
|
## Consequences
|
|
68
68
|
- **+** Slut pa dubbla mentala modeller. En standard.
|
|
69
69
|
- **+** Spec stammer med implementationen.
|
|
70
|
-
- **+**
|
|
70
|
+
- **+** Paketet gar mot ett moget system.
|
|
71
71
|
- **+** `npx @klodd/ds verify` (3.4.0+) detekterar drift mekaniskt.
|
|
72
72
|
- **-** Stor sprint - kraver dedikerad bandbredd (uppskattning: 2-3
|
|
73
73
|
arbetsdagar plus visuell QA per app).
|
|
@@ -75,9 +75,9 @@ Gor en fullstandig **lock-sprint** innan tredje app laggs till:
|
|
|
75
75
|
styleguide-jamforelse fore/efter pa bagge appar.
|
|
76
76
|
|
|
77
77
|
## Pending decision criteria
|
|
78
|
-
- Tidpunkt:
|
|
79
|
-
|
|
80
|
-
|
|
78
|
+
- Tidpunkt: nar bandbredd finns for att mogna paketet. Att vanta
|
|
79
|
+
langre forharder skulden; att hasta forskuggar appar som redan
|
|
80
|
+
ar i prod.
|
|
81
81
|
- Vem kor sprinten: Calle ensam eller med assistent CC?
|
|
82
82
|
- Om CC: ska den ha access till bagge app-repos under sprinten?
|
|
83
83
|
|
|
@@ -8,8 +8,7 @@ Option B: minimal cleanup.
|
|
|
8
8
|
|
|
9
9
|
Ekonom uses .cat-list-row without border-left as a deliberate visual
|
|
10
10
|
choice. border-left on categorized rows is unwanted in current apps.
|
|
11
|
-
.colored-row remains in the package
|
|
12
|
-
the pattern.
|
|
11
|
+
.colored-row remains in the package as an available pattern.
|
|
13
12
|
|
|
14
13
|
Dead --row-accent bindings removed from ekonom-domain.css.
|
|
15
14
|
|
|
@@ -129,7 +129,7 @@ produktion (Jubb v202+) - gaps är arkitektur-städ, inte funktionalitet.
|
|
|
129
129
|
gaps
|
|
130
130
|
- Jubb commit `d532e7e` - brief-progress migration (ett-shot-flöde som
|
|
131
131
|
matchar AsyncProgress's default-design)
|
|
132
|
-
- ADR
|
|
132
|
+
- ADR 0026-async-progress-fetch-fn (`04-locked-decisions/`) - tidigare
|
|
133
133
|
AsyncProgress-utvidgning för demo/test-injection via fetchFn
|
|
134
134
|
- `~/dev/klodd-ds/js/async-progress.js` - paket-implementation
|
|
135
135
|
- `~/dev/Jubb/app/static/js/pipeline-progress.js` - wrapper med
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
# 0018 - build:ds prune-gap
|
|
2
|
+
|
|
3
|
+
## Status
|
|
4
|
+
|
|
5
|
+
Pending.
|
|
6
|
+
|
|
7
|
+
## Context
|
|
8
|
+
|
|
9
|
+
build:ds (`npx @klodd/ds sync`) kopierar paketets filer till
|
|
10
|
+
`app/static/css/ds/` och `app/static/js/ds/` men tar inte bort filer
|
|
11
|
+
som raderats ur paketet. Upptäckt vid 5.4.2-cleanup: `hbar.css` +
|
|
12
|
+
`split-bar.css` låg kvar i båda appar efter build:ds och krävde
|
|
13
|
+
manuell borttagning.
|
|
14
|
+
|
|
15
|
+
## Decision needed
|
|
16
|
+
|
|
17
|
+
Lägg till `--prune`-flagga i sync-kommandot som tar bort filer i
|
|
18
|
+
målmappen som inte längre finns i paketet.
|
|
19
|
+
|
|
20
|
+
## Considered options
|
|
21
|
+
|
|
22
|
+
### A. Implementera --prune i sync-skriptet
|
|
23
|
+
Rensar automatiskt vid varje build:ds.
|
|
24
|
+
|
|
25
|
+
### B. Dokumentera manuellt städ-steg i SKILL.md
|
|
26
|
+
"efter paket-publish: verifiera att raderade komponenter tas bort ur
|
|
27
|
+
app build-output".
|
|
28
|
+
|
|
29
|
+
### C. Behåll nuvarande beteende
|
|
30
|
+
Risk för stale filer vid varje komponent-radering.
|
|
31
|
+
|
|
32
|
+
## Pending decision criteria
|
|
33
|
+
|
|
34
|
+
Aktiveras nästa gång en komponent raderas ur paketet. Option B är
|
|
35
|
+
interim-lösning tills A implementeras.
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Klodd Design Language
|
|
2
2
|
|
|
3
|
-
Konkreta regler för **visuell koherens** över
|
|
3
|
+
Konkreta regler för **visuell koherens** över @klodd/ds (Jubb och Ekonom). Token-
|
|
4
4
|
arkitekturen (`01-tokens.md`) och komponent-API (`02-components.md`)
|
|
5
5
|
specificerar **vad** som finns; denna fil specificerar **hur** komponenter
|
|
6
6
|
ska användas tillsammans för homogen design-uttryck.
|