@insymetri/styleguide 0.1.61 → 0.1.62
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.
|
@@ -13,9 +13,25 @@
|
|
|
13
13
|
value: string
|
|
14
14
|
onValueChange?: (value: string) => void
|
|
15
15
|
class?: string
|
|
16
|
+
focusWithRing?: () => void
|
|
16
17
|
}
|
|
17
18
|
|
|
18
|
-
let {
|
|
19
|
+
let {
|
|
20
|
+
items,
|
|
21
|
+
value = $bindable(),
|
|
22
|
+
onValueChange,
|
|
23
|
+
class: className,
|
|
24
|
+
focusWithRing = $bindable(),
|
|
25
|
+
}: Props = $props()
|
|
26
|
+
|
|
27
|
+
let rootEl = $state<HTMLDivElement | null>(null)
|
|
28
|
+
let forceRing = $state(false)
|
|
29
|
+
|
|
30
|
+
focusWithRing = () => {
|
|
31
|
+
if (!rootEl) return
|
|
32
|
+
forceRing = true
|
|
33
|
+
rootEl.focus()
|
|
34
|
+
}
|
|
19
35
|
|
|
20
36
|
const density = useDensity()
|
|
21
37
|
|
|
@@ -72,14 +88,19 @@
|
|
|
72
88
|
</script>
|
|
73
89
|
|
|
74
90
|
<div
|
|
91
|
+
bind:this={rootEl}
|
|
75
92
|
class={cn(
|
|
76
|
-
'relative inline-flex bg-input-bg border border-button-secondary rounded-control outline-none
|
|
93
|
+
'relative inline-flex bg-input-bg border border-button-secondary rounded-control outline-none cursor-default',
|
|
94
|
+
forceRing
|
|
95
|
+
? 'focus:ring-3 focus:ring-primary'
|
|
96
|
+
: 'focus-visible:ring-3 focus-visible:ring-primary',
|
|
77
97
|
densityHeight[density.value],
|
|
78
98
|
className
|
|
79
99
|
)}
|
|
80
100
|
role="radiogroup"
|
|
81
101
|
tabindex="0"
|
|
82
102
|
onkeydown={handleKeydown}
|
|
103
|
+
onblur={() => (forceRing = false)}
|
|
83
104
|
style="padding: {thumbInset[density.value]}px;"
|
|
84
105
|
>
|
|
85
106
|
<!-- Sliding thumb -->
|
|
@@ -8,7 +8,8 @@ type Props = {
|
|
|
8
8
|
value: string;
|
|
9
9
|
onValueChange?: (value: string) => void;
|
|
10
10
|
class?: string;
|
|
11
|
+
focusWithRing?: () => void;
|
|
11
12
|
};
|
|
12
|
-
declare const IISegmentedControl: import("svelte").Component<Props, {}, "value">;
|
|
13
|
+
declare const IISegmentedControl: import("svelte").Component<Props, {}, "value" | "focusWithRing">;
|
|
13
14
|
type IISegmentedControl = ReturnType<typeof IISegmentedControl>;
|
|
14
15
|
export default IISegmentedControl;
|
|
@@ -4,6 +4,9 @@
|
|
|
4
4
|
let mode = $state('allow')
|
|
5
5
|
let editorTab = $state('edit')
|
|
6
6
|
let size = $state('monthly')
|
|
7
|
+
|
|
8
|
+
let validationMode = $state('allow')
|
|
9
|
+
let focusValidation: (() => void) | undefined = $state()
|
|
7
10
|
</script>
|
|
8
11
|
|
|
9
12
|
<div class="flex flex-col gap-32">
|
|
@@ -62,6 +65,30 @@
|
|
|
62
65
|
/>
|
|
63
66
|
</section>
|
|
64
67
|
|
|
68
|
+
<!-- Programmatic focus with ring -->
|
|
69
|
+
<section>
|
|
70
|
+
<h2 class="text-default-emphasis text-primary mb-8">Programmatic focus with ring</h2>
|
|
71
|
+
<p class="text-small text-secondary mb-12">
|
|
72
|
+
Click the button — a mouse click would normally suppress :focus-visible, but
|
|
73
|
+
<code>focusWithRing()</code> forces the focus ring so validation flows have a visible cue.
|
|
74
|
+
</p>
|
|
75
|
+
<IISegmentedControl
|
|
76
|
+
items={[
|
|
77
|
+
{label: 'Allow list', value: 'allow'},
|
|
78
|
+
{label: 'Block list', value: 'block'},
|
|
79
|
+
]}
|
|
80
|
+
bind:value={validationMode}
|
|
81
|
+
bind:focusWithRing={focusValidation}
|
|
82
|
+
/>
|
|
83
|
+
<button
|
|
84
|
+
type="button"
|
|
85
|
+
class="mt-12 px-12 py-6 bg-button-primary text-button-primary-text rounded-control"
|
|
86
|
+
onclick={() => focusValidation?.()}
|
|
87
|
+
>
|
|
88
|
+
Focus with ring (simulates validation)
|
|
89
|
+
</button>
|
|
90
|
+
</section>
|
|
91
|
+
|
|
65
92
|
<!-- Density-responsive -->
|
|
66
93
|
<section>
|
|
67
94
|
<h2 class="text-default-emphasis text-primary mb-8">Density Responsive</h2>
|