@klodd/ds 3.6.0 → 3.7.0
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/SKILL.md
CHANGED
|
@@ -56,6 +56,16 @@ cd ~/dev/Jubb && npm install @klodd/ds@latest && npm run build:ds
|
|
|
56
56
|
cd ~/dev/Ekonom && npm install @klodd/ds@latest && npm run build:ds
|
|
57
57
|
```
|
|
58
58
|
|
|
59
|
+
## Sprint-avslut: alla sprintar kräver detta
|
|
60
|
+
En sprint — oavsett om den innehåller CSS, JS eller bara dokumentation —
|
|
61
|
+
är inte klar förrän:
|
|
62
|
+
1. `npm publish --access public` är kört och versionen syns på registret
|
|
63
|
+
2. `npm install @klodd/ds@latest && npm run build:ds` är kört i båda
|
|
64
|
+
app-repos
|
|
65
|
+
3. App-commits är pushade
|
|
66
|
+
|
|
67
|
+
Manuell filsync till app-repos är aldrig ett godkänt alternativ.
|
|
68
|
+
|
|
59
69
|
## CLI-kommandon
|
|
60
70
|
|
|
61
71
|
```bash
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
kategori-grupper, FAQ-rader.
|
|
5
5
|
|
|
6
6
|
Block:
|
|
7
|
-
.collapsible
|
|
7
|
+
.collapsible - root-block (huvud-container)
|
|
8
8
|
|
|
9
9
|
BEM-element av blocket:
|
|
10
10
|
.collapsible__header - klickbar header (button-element)
|
|
@@ -12,16 +12,16 @@
|
|
|
12
12
|
.collapsible__body - expanderat innehåll (hidden default)
|
|
13
13
|
.collapsible__chev - chevron som roterar 180deg
|
|
14
14
|
|
|
15
|
-
ANTECKNING (BEM-stam-mismatch, öppen punkt):
|
|
16
|
-
Blocket heter .collapsible-card men elementen heter .collapsible__X
|
|
17
|
-
(utan -card-suffix). Två lösningar finns: rename block till
|
|
18
|
-
.collapsible eller rename element till .collapsible-card__X.
|
|
19
|
-
Underlag finns i sprint-rapport 2026-05-09. Ingen rename i fas 1.
|
|
20
|
-
|
|
21
15
|
States:
|
|
22
|
-
[data-expanded] på .collapsible
|
|
16
|
+
[data-expanded] på .collapsible - JS togglar, roterar __chev 180deg
|
|
17
|
+
|
|
18
|
+
Sprint 2 (3.7.0): block .collapsible-card omdöpt till .collapsible
|
|
19
|
+
per ADR 0010 (BEM-stam-konsistens med elementen). Plus tillagda
|
|
20
|
+
:hover/:active/:disabled-states på .collapsible__header per
|
|
21
|
+
kvalitetsbar regel 8 (komplett state-täckning på interaktiva
|
|
22
|
+
komponenter).
|
|
23
23
|
================================================================ */
|
|
24
|
-
.collapsible
|
|
24
|
+
.collapsible {
|
|
25
25
|
background: var(--surface-raised);
|
|
26
26
|
border: 1px solid var(--border-subtle);
|
|
27
27
|
border-radius: var(--radius-20);
|
|
@@ -50,6 +50,25 @@
|
|
|
50
50
|
outline-offset: -2px;
|
|
51
51
|
}
|
|
52
52
|
|
|
53
|
+
@media (hover: hover) and (pointer: fine) {
|
|
54
|
+
.collapsible__header:hover {
|
|
55
|
+
background: var(--surface-hover);
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.collapsible__header:active {
|
|
60
|
+
background: var(--surface-active);
|
|
61
|
+
transform: scale(0.99);
|
|
62
|
+
transition: transform 80ms var(--ease-spring-snappy);
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.collapsible__header:disabled,
|
|
66
|
+
.collapsible__header[aria-disabled="true"] {
|
|
67
|
+
opacity: 0.5;
|
|
68
|
+
cursor: not-allowed;
|
|
69
|
+
pointer-events: none;
|
|
70
|
+
}
|
|
71
|
+
|
|
53
72
|
.collapsible__header-text {
|
|
54
73
|
flex: 1;
|
|
55
74
|
min-width: 0;
|
|
@@ -62,7 +81,7 @@
|
|
|
62
81
|
transition: transform var(--dur-medium) var(--ease-default);
|
|
63
82
|
}
|
|
64
83
|
|
|
65
|
-
.collapsible
|
|
84
|
+
.collapsible[data-expanded] .collapsible__chev {
|
|
66
85
|
transform: rotate(180deg);
|
|
67
86
|
}
|
|
68
87
|
|
|
@@ -72,4 +91,5 @@
|
|
|
72
91
|
|
|
73
92
|
@media (prefers-reduced-motion: reduce) {
|
|
74
93
|
.collapsible__chev { transition: none; }
|
|
94
|
+
.collapsible__header:active { transform: none; }
|
|
75
95
|
}
|
package/package.json
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@klodd/ds",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.7.0",
|
|
4
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.",
|
|
5
5
|
"main": "css/index.css",
|
|
6
6
|
"bin": {
|
|
7
|
-
"klodd-ds": "
|
|
7
|
+
"klodd-ds": "bin/klodd-ds.js"
|
|
8
8
|
},
|
|
9
9
|
"files": [
|
|
10
10
|
"css/",
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
"license": "MIT",
|
|
28
28
|
"repository": {
|
|
29
29
|
"type": "git",
|
|
30
|
-
"url": "https://github.com/drawn124578/klodd-ds.git"
|
|
30
|
+
"url": "git+https://github.com/drawn124578/klodd-ds.git"
|
|
31
31
|
},
|
|
32
32
|
"homepage": "https://github.com/drawn124578/klodd-ds#readme"
|
|
33
33
|
}
|