@noahbaumgartner/svelte-ui 0.0.8 → 0.0.9
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,7 +23,9 @@
|
|
|
23
23
|
options: TabsOption<T>[];
|
|
24
24
|
/** Accessible name for the tab list. */
|
|
25
25
|
label?: string;
|
|
26
|
-
size?: 'sm' | 'md';
|
|
26
|
+
size?: 'sm' | 'md' | 'lg';
|
|
27
|
+
/** `segmented` sits in a pill-shaped track; `text` is plain text where only the selected tab is emphasised. */
|
|
28
|
+
variant?: 'segmented' | 'text';
|
|
27
29
|
ref?: HTMLDivElement | null;
|
|
28
30
|
/** Optional panel below the tabs; receives the selected value. Omit to render the content yourself. */
|
|
29
31
|
children?: Snippet<[value: T]>;
|
|
@@ -37,6 +39,7 @@
|
|
|
37
39
|
options,
|
|
38
40
|
label,
|
|
39
41
|
size = 'md',
|
|
42
|
+
variant = 'segmented',
|
|
40
43
|
ref = $bindable(null),
|
|
41
44
|
class: className,
|
|
42
45
|
children,
|
|
@@ -100,7 +103,7 @@
|
|
|
100
103
|
}
|
|
101
104
|
</script>
|
|
102
105
|
|
|
103
|
-
<div {...rest} bind:this={ref} class={['tabs', `tabs--${size}`, className]}>
|
|
106
|
+
<div {...rest} bind:this={ref} class={['tabs', `tabs--${size}`, `tabs--${variant}`, className]}>
|
|
104
107
|
<div
|
|
105
108
|
class={[
|
|
106
109
|
'tabs-scroller',
|
|
@@ -280,6 +283,63 @@
|
|
|
280
283
|
border-radius: 5px;
|
|
281
284
|
}
|
|
282
285
|
|
|
286
|
+
.tabs--lg .tabs-list {
|
|
287
|
+
border-radius: 12px;
|
|
288
|
+
}
|
|
289
|
+
|
|
290
|
+
.tabs--lg .tabs-tab {
|
|
291
|
+
height: 32px;
|
|
292
|
+
padding: 0 14px;
|
|
293
|
+
font-size: 14px;
|
|
294
|
+
border-radius: 9px;
|
|
295
|
+
}
|
|
296
|
+
|
|
297
|
+
/* Text: no track and no pill, the selected tab is only darker. Padding stays vertical so the first label lines up with the content below. */
|
|
298
|
+
.tabs--text .tabs-list {
|
|
299
|
+
gap: 20px;
|
|
300
|
+
padding: 0;
|
|
301
|
+
background-color: transparent;
|
|
302
|
+
border-radius: 0;
|
|
303
|
+
}
|
|
304
|
+
|
|
305
|
+
.tabs--text .tabs-tab {
|
|
306
|
+
height: auto;
|
|
307
|
+
padding: 4px 0;
|
|
308
|
+
font-size: 16px;
|
|
309
|
+
border-radius: 0;
|
|
310
|
+
}
|
|
311
|
+
|
|
312
|
+
.tabs--text.tabs--sm .tabs-list {
|
|
313
|
+
gap: 16px;
|
|
314
|
+
}
|
|
315
|
+
|
|
316
|
+
.tabs--text.tabs--sm .tabs-tab {
|
|
317
|
+
padding: 2px 0;
|
|
318
|
+
font-size: 14px;
|
|
319
|
+
}
|
|
320
|
+
|
|
321
|
+
.tabs--text.tabs--lg .tabs-list {
|
|
322
|
+
gap: 24px;
|
|
323
|
+
}
|
|
324
|
+
|
|
325
|
+
.tabs--text.tabs--lg .tabs-tab {
|
|
326
|
+
font-size: 18px;
|
|
327
|
+
}
|
|
328
|
+
|
|
329
|
+
.tabs--text .tabs-tab--selected {
|
|
330
|
+
background-color: transparent;
|
|
331
|
+
box-shadow: none;
|
|
332
|
+
}
|
|
333
|
+
|
|
334
|
+
/* An outline would be clipped by the scroller, so the focus ring is an underline. */
|
|
335
|
+
.tabs--text .tabs-tab:focus-visible {
|
|
336
|
+
outline: none;
|
|
337
|
+
text-decoration: underline;
|
|
338
|
+
text-decoration-color: var(--color-accent);
|
|
339
|
+
text-decoration-thickness: 2px;
|
|
340
|
+
text-underline-offset: 4px;
|
|
341
|
+
}
|
|
342
|
+
|
|
283
343
|
.tabs-panel {
|
|
284
344
|
font-size: 13px;
|
|
285
345
|
color: var(--color-text);
|
|
@@ -315,6 +375,16 @@
|
|
|
315
375
|
box-shadow: none;
|
|
316
376
|
}
|
|
317
377
|
|
|
378
|
+
/* Text has no track and no filled tab, so the selected tab is told apart by weight */
|
|
379
|
+
.tabs--text .tabs-list {
|
|
380
|
+
border: none;
|
|
381
|
+
}
|
|
382
|
+
|
|
383
|
+
.tabs--text .tabs-tab--selected {
|
|
384
|
+
color: ButtonText;
|
|
385
|
+
font-weight: 700;
|
|
386
|
+
}
|
|
387
|
+
|
|
318
388
|
.tabs-tab:disabled {
|
|
319
389
|
color: GrayText;
|
|
320
390
|
}
|
|
@@ -18,7 +18,9 @@ declare function $$render<T extends string>(): {
|
|
|
18
18
|
options: TabsOption<T>[];
|
|
19
19
|
/** Accessible name for the tab list. */
|
|
20
20
|
label?: string;
|
|
21
|
-
size?: "sm" | "md";
|
|
21
|
+
size?: "sm" | "md" | "lg";
|
|
22
|
+
/** `segmented` sits in a pill-shaped track; `text` is plain text where only the selected tab is emphasised. */
|
|
23
|
+
variant?: "segmented" | "text";
|
|
22
24
|
ref?: HTMLDivElement | null;
|
|
23
25
|
/** Optional panel below the tabs; receives the selected value. Omit to render the content yourself. */
|
|
24
26
|
children?: Snippet<[value: T]>;
|