@dorsk/tsumikit 0.9.4 → 0.9.5
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.
|
@@ -31,6 +31,9 @@
|
|
|
31
31
|
variant = 'pill',
|
|
32
32
|
size = 'md',
|
|
33
33
|
label = 'Options',
|
|
34
|
+
// `mobile` hides segment labels below the mobile breakpoint, collapsing
|
|
35
|
+
// labelled segments to centered icon-only squares (aria-label preserved).
|
|
36
|
+
collapseLabels = 'never',
|
|
34
37
|
class: klass = '',
|
|
35
38
|
// Custom rendering per option (overrides the built-in label/count/icon).
|
|
36
39
|
option: optionSnippet
|
|
@@ -40,6 +43,7 @@
|
|
|
40
43
|
variant?: 'pill' | 'icon';
|
|
41
44
|
size?: 'sm' | 'md';
|
|
42
45
|
label?: string;
|
|
46
|
+
collapseLabels?: 'never' | 'mobile';
|
|
43
47
|
class?: string;
|
|
44
48
|
option?: Snippet<[SegmentOption, boolean]>;
|
|
45
49
|
} = $props();
|
|
@@ -94,6 +98,7 @@
|
|
|
94
98
|
aria-label={label}
|
|
95
99
|
tabindex="-1"
|
|
96
100
|
class="seg seg-{variant} seg-{size} {klass}"
|
|
101
|
+
class:seg-collapse-mobile={collapseLabels === 'mobile'}
|
|
97
102
|
data-tsu="SegmentedControl"
|
|
98
103
|
{onkeydown}
|
|
99
104
|
>
|
|
@@ -107,6 +112,7 @@
|
|
|
107
112
|
aria-label={variant === 'icon' && !o.label ? o.value : o.label}
|
|
108
113
|
tabindex={selected ? 0 : -1}
|
|
109
114
|
class="seg-item"
|
|
115
|
+
class:has-label={!!o.label}
|
|
110
116
|
class:selected
|
|
111
117
|
disabled={o.disabled}
|
|
112
118
|
onclick={() => select(o.value)}
|
|
@@ -169,6 +175,32 @@
|
|
|
169
175
|
padding: 0.25rem;
|
|
170
176
|
font-size: var(--fs-sm);
|
|
171
177
|
}
|
|
178
|
+
/* A labelled icon segment renders <icon><label>, so it must keep the normal
|
|
179
|
+
icon/label gap and the roomier pill padding — only true icon-only segments
|
|
180
|
+
collapse to the square gap:0 layout above. */
|
|
181
|
+
.seg-icon .seg-item.has-label {
|
|
182
|
+
gap: var(--sp-2);
|
|
183
|
+
padding: 0.3rem var(--sp-3);
|
|
184
|
+
}
|
|
185
|
+
.seg-icon.seg-sm .seg-item.has-label {
|
|
186
|
+
padding: 0.2rem var(--sp-2);
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
/* collapseLabels='mobile': below the breakpoint, drop the label text and
|
|
190
|
+
tighten labelled segments back to a square icon button. The aria-label on
|
|
191
|
+
the button preserves the accessible name. */
|
|
192
|
+
@media (max-width: 47.999rem) {
|
|
193
|
+
.seg-collapse-mobile .seg-item.has-label .seg-label {
|
|
194
|
+
display: none;
|
|
195
|
+
}
|
|
196
|
+
.seg-collapse-mobile .seg-item.has-label {
|
|
197
|
+
gap: 0;
|
|
198
|
+
padding: 0.35rem;
|
|
199
|
+
}
|
|
200
|
+
.seg-collapse-mobile.seg-sm .seg-item.has-label {
|
|
201
|
+
padding: 0.25rem;
|
|
202
|
+
}
|
|
203
|
+
}
|
|
172
204
|
|
|
173
205
|
.seg-item:hover:not(:disabled):not(.selected) {
|
|
174
206
|
color: var(--text);
|
package/package.json
CHANGED