@klodd/ds 3.6.1 → 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/css/components/collapsible.css +30 -10
- package/package.json +1 -1
|
@@ -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,6 +1,6 @@
|
|
|
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": {
|