@klodd/ds 5.16.0 → 5.16.1
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.
|
@@ -23,6 +23,9 @@
|
|
|
23
23
|
line-height: var(--lh-tight);
|
|
24
24
|
}
|
|
25
25
|
|
|
26
|
+
/* --sm ar dekorativ storlek (28px) - INTE en sjalvstandig tap-target.
|
|
27
|
+
Wrapper-elementet (<a>, <button>) ansvarar for min 44px klickyta.
|
|
28
|
+
Anvand aldrig .avatar--sm som ensamt klickbart element. */
|
|
26
29
|
.avatar--sm {
|
|
27
30
|
width: var(--circle-size-sm);
|
|
28
31
|
height: var(--circle-size-sm);
|
package/css/components/chip.css
CHANGED
|
@@ -19,10 +19,14 @@
|
|
|
19
19
|
v3.13.0: .install-chip (PWA install-prompt) borttagen tillsammans
|
|
20
20
|
med tillhörande JS i pwa-register.js.
|
|
21
21
|
================================================================ */
|
|
22
|
+
/* 2026-05-26: min-height var(--touch-min) (44px) for WCAG AA tap-
|
|
23
|
+
target. Padding/font-size oforandrade - chipset stannar visuellt
|
|
24
|
+
kompakt men yta blir 44px tall sa klickytan motsvarar standarden. */
|
|
22
25
|
.chip {
|
|
23
26
|
display: inline-flex;
|
|
24
27
|
align-items: center;
|
|
25
28
|
gap: var(--space-6);
|
|
29
|
+
min-height: var(--touch-min);
|
|
26
30
|
font-size: var(--fs-11);
|
|
27
31
|
font-weight: var(--fw-medium);
|
|
28
32
|
padding: var(--space-4) var(--space-10);
|
|
@@ -87,12 +91,15 @@
|
|
|
87
91
|
padding: 0;
|
|
88
92
|
}
|
|
89
93
|
|
|
94
|
+
/* 2026-05-26: 18x18 -> --touch-min (44x44) for WCAG AA. Den visuella
|
|
95
|
+
x-ikonen inuti behaller sin smaa storlek (template-SVG-attribut) -
|
|
96
|
+
bara tap-targeten utokas till 44x44. */
|
|
90
97
|
.chip-list__delete {
|
|
91
98
|
display: inline-flex;
|
|
92
99
|
align-items: center;
|
|
93
100
|
justify-content: center;
|
|
94
|
-
width: var(--
|
|
95
|
-
height: var(--
|
|
101
|
+
width: var(--touch-min);
|
|
102
|
+
height: var(--touch-min);
|
|
96
103
|
padding: 0;
|
|
97
104
|
background: transparent;
|
|
98
105
|
border: 0;
|
|
@@ -127,7 +134,11 @@
|
|
|
127
134
|
pointer-events: none;
|
|
128
135
|
}
|
|
129
136
|
|
|
137
|
+
/* 2026-05-26: min-height var(--touch-min) (44px) for WCAG AA tap-
|
|
138
|
+
target. Bredd, padding och font behalls (komposition med .chip-list
|
|
139
|
+
__item-styling). */
|
|
130
140
|
.chip-list__add {
|
|
141
|
+
min-height: var(--touch-min);
|
|
131
142
|
background: transparent;
|
|
132
143
|
border-style: dashed;
|
|
133
144
|
color: var(--text-subtle);
|
|
@@ -41,11 +41,15 @@
|
|
|
41
41
|
display: block;
|
|
42
42
|
}
|
|
43
43
|
|
|
44
|
+
/* 2026-05-26: min-height var(--touch-min) (44px) for WCAG AA tap-
|
|
45
|
+
target. Text centreras vertikalt via existerande align-items.
|
|
46
|
+
Padding-inline 12 + fs-14 behalls - menyrad blir luftigare. */
|
|
44
47
|
.dropdown__item {
|
|
45
48
|
display: flex;
|
|
46
49
|
align-items: center;
|
|
47
50
|
gap: var(--space-8);
|
|
48
51
|
width: 100%;
|
|
52
|
+
min-height: var(--touch-min);
|
|
49
53
|
padding: var(--space-8) var(--space-12);
|
|
50
54
|
font-family: inherit;
|
|
51
55
|
font-size: var(--fs-14);
|
|
@@ -45,11 +45,14 @@
|
|
|
45
45
|
display: none;
|
|
46
46
|
}
|
|
47
47
|
|
|
48
|
+
/* 2026-05-26: height var(--circle-size) (36px) -> min-height
|
|
49
|
+
var(--touch-min) (44px) for WCAG AA tap-target. Padding och fs-13
|
|
50
|
+
behalls - pillen vaxer bara vertikalt. */
|
|
48
51
|
.pill-nav__item {
|
|
49
52
|
display: inline-flex;
|
|
50
53
|
align-items: center;
|
|
51
54
|
justify-content: center;
|
|
52
|
-
height: var(--
|
|
55
|
+
min-height: var(--touch-min);
|
|
53
56
|
padding: 0 var(--space-16);
|
|
54
57
|
background: var(--surface-default);
|
|
55
58
|
border: 1px solid var(--border-subtle);
|
|
@@ -200,9 +200,13 @@
|
|
|
200
200
|
gap: var(--space-8);
|
|
201
201
|
}
|
|
202
202
|
|
|
203
|
+
/* 2026-05-26: min-height var(--touch-min) (44px) for WCAG AA tap-
|
|
204
|
+
target. Tidigare ~43px (1px under). Padding och centrering
|
|
205
|
+
oforandrade. */
|
|
203
206
|
.sheet__item {
|
|
204
207
|
display: block;
|
|
205
208
|
width: 100%;
|
|
209
|
+
min-height: var(--touch-min);
|
|
206
210
|
padding: var(--space-12) var(--space-14);
|
|
207
211
|
background: var(--surface-default);
|
|
208
212
|
border: 1px solid var(--border-default);
|