@happyvertical/smrt-svelte 0.34.5 → 0.34.7
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/AGENTS.md +22 -9
- package/dist/browser-ai/svelte/components/STTTest.svelte +19 -51
- package/dist/browser-ai/svelte/components/STTTest.svelte.d.ts.map +1 -1
- package/dist/browser-ai/svelte/components/VoiceInput.svelte +1 -0
- package/dist/browser-ai/svelte/components/VoiceInput.svelte.d.ts.map +1 -1
- package/dist/components/forms/index.d.ts +9 -6
- package/dist/components/forms/index.d.ts.map +1 -1
- package/dist/components/forms/index.js +10 -7
- package/dist/components/workspace/WorkspaceShell.svelte +27 -34
- package/dist/components/workspace/WorkspaceShell.svelte.d.ts.map +1 -1
- package/dist/components/workspace/tools-dock/ToolsDock.svelte +11 -7
- package/dist/components/workspace/tools-dock/ToolsDock.svelte.d.ts.map +1 -1
- package/package.json +5 -4
- package/dist/components/forms/FormGroup.svelte +0 -86
- package/dist/components/forms/FormGroup.svelte.d.ts +0 -13
- package/dist/components/forms/FormGroup.svelte.d.ts.map +0 -1
- package/dist/components/forms/Input.svelte +0 -83
- package/dist/components/forms/Input.svelte.d.ts +0 -9
- package/dist/components/forms/Input.svelte.d.ts.map +0 -1
- package/dist/components/forms/Select.svelte +0 -83
- package/dist/components/forms/Select.svelte.d.ts +0 -11
- package/dist/components/forms/Select.svelte.d.ts.map +0 -1
- package/dist/components/forms/Textarea.svelte +0 -85
- package/dist/components/forms/Textarea.svelte.d.ts +0 -10
- package/dist/components/forms/Textarea.svelte.d.ts.map +0 -1
- package/dist/components/forms/Toggle.svelte +0 -217
- package/dist/components/forms/Toggle.svelte.d.ts +0 -37
- package/dist/components/forms/Toggle.svelte.d.ts.map +0 -1
- package/dist/components/forms/__tests__/FormGroup.test.js +0 -48
- package/dist/components/forms/__tests__/Input.test.js +0 -49
- package/dist/components/forms/__tests__/Select.test.js +0 -37
- package/dist/components/forms/__tests__/Textarea.test.js +0 -39
- package/dist/components/forms/__tests__/Toggle.test.js +0 -87
- package/dist/components/forms/__tests__/form-group-input.fixture.svelte +0 -16
- package/dist/components/forms/__tests__/form-group-input.fixture.svelte.d.ts +0 -9
- package/dist/components/forms/__tests__/form-group-input.fixture.svelte.d.ts.map +0 -1
- package/dist/state/form-group-context.d.ts +0 -13
- package/dist/state/form-group-context.d.ts.map +0 -1
- package/dist/state/form-group-context.js +0 -28
|
@@ -1,86 +0,0 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
import type { Snippet } from 'svelte';
|
|
3
|
-
import {
|
|
4
|
-
type FormGroupContextValue,
|
|
5
|
-
nextFieldId,
|
|
6
|
-
setFormGroupContext,
|
|
7
|
-
} from '../../state/form-group-context.js';
|
|
8
|
-
|
|
9
|
-
export interface Props {
|
|
10
|
-
label: string;
|
|
11
|
-
id?: string;
|
|
12
|
-
error?: string;
|
|
13
|
-
hint?: string;
|
|
14
|
-
required?: boolean;
|
|
15
|
-
children: Snippet;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
const { label, id, error, hint, required = false, children }: Props = $props();
|
|
19
|
-
|
|
20
|
-
// Stable id so the label's `for` and the wrapped input's `id` agree even when
|
|
21
|
-
// the consumer doesn't pass one.
|
|
22
|
-
const fallbackId = nextFieldId();
|
|
23
|
-
const fieldId = $derived(id ?? fallbackId);
|
|
24
|
-
const hintId = $derived(hint && !error ? `${fieldId}-hint` : undefined);
|
|
25
|
-
const errorId = $derived(error ? `${fieldId}-error` : undefined);
|
|
26
|
-
const describedBy = $derived(
|
|
27
|
-
[hintId, errorId].filter(Boolean).join(' ') || undefined,
|
|
28
|
-
);
|
|
29
|
-
|
|
30
|
-
// Publish the wiring a base input auto-applies (getter stays reactive as
|
|
31
|
-
// hint/error change).
|
|
32
|
-
setFormGroupContext(
|
|
33
|
-
(): FormGroupContextValue => ({
|
|
34
|
-
inputId: fieldId,
|
|
35
|
-
describedBy,
|
|
36
|
-
invalid: !!error,
|
|
37
|
-
}),
|
|
38
|
-
);
|
|
39
|
-
</script>
|
|
40
|
-
|
|
41
|
-
<div class="form-group">
|
|
42
|
-
<label for={fieldId} class="form-label">
|
|
43
|
-
{label}
|
|
44
|
-
{#if required}
|
|
45
|
-
<span class="required" aria-hidden="true">*</span>
|
|
46
|
-
{/if}
|
|
47
|
-
</label>
|
|
48
|
-
{@render children()}
|
|
49
|
-
{#if hintId}
|
|
50
|
-
<p id={hintId} class="form-hint">{hint}</p>
|
|
51
|
-
{/if}
|
|
52
|
-
{#if errorId}
|
|
53
|
-
<p id={errorId} class="form-error" role="alert">{error}</p>
|
|
54
|
-
{/if}
|
|
55
|
-
</div>
|
|
56
|
-
|
|
57
|
-
<style>
|
|
58
|
-
.form-group {
|
|
59
|
-
margin-bottom: 1rem;
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
.form-label {
|
|
63
|
-
display: block;
|
|
64
|
-
font-size: var(--smrt-typography-label-large-size, 0.875rem);
|
|
65
|
-
font-weight: var(--smrt-typography-weight-medium, 500);
|
|
66
|
-
color: var(--smrt-color-on-surface, #374151);
|
|
67
|
-
margin-bottom: 0.375rem;
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
.required {
|
|
71
|
-
color: var(--smrt-color-error, #ba1a1a);
|
|
72
|
-
margin-left: 0.125rem;
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
.form-hint {
|
|
76
|
-
margin: 0.25rem 0 0;
|
|
77
|
-
font-size: var(--smrt-typography-body-small-size, 0.75rem);
|
|
78
|
-
color: var(--smrt-color-on-surface-variant, #6b7280);
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
.form-error {
|
|
82
|
-
margin: 0.25rem 0 0;
|
|
83
|
-
font-size: var(--smrt-typography-body-small-size, 0.75rem);
|
|
84
|
-
color: var(--smrt-color-error, #ba1a1a);
|
|
85
|
-
}
|
|
86
|
-
</style>
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import type { Snippet } from 'svelte';
|
|
2
|
-
export interface Props {
|
|
3
|
-
label: string;
|
|
4
|
-
id?: string;
|
|
5
|
-
error?: string;
|
|
6
|
-
hint?: string;
|
|
7
|
-
required?: boolean;
|
|
8
|
-
children: Snippet;
|
|
9
|
-
}
|
|
10
|
-
declare const FormGroup: import("svelte").Component<Props, {}, "">;
|
|
11
|
-
type FormGroup = ReturnType<typeof FormGroup>;
|
|
12
|
-
export default FormGroup;
|
|
13
|
-
//# sourceMappingURL=FormGroup.svelte.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"FormGroup.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/FormGroup.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAQtC,MAAM,WAAW,KAAK;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAiDD,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
|
|
@@ -1,83 +0,0 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
import type { HTMLInputAttributes } from 'svelte/elements';
|
|
3
|
-
import { tryGetFormGroupContext } from '../../state/form-group-context.js';
|
|
4
|
-
|
|
5
|
-
export interface Props extends Omit<HTMLInputAttributes, 'class' | 'value'> {
|
|
6
|
-
value?: string | number;
|
|
7
|
-
class?: string;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
let {
|
|
11
|
-
id,
|
|
12
|
-
type = 'text',
|
|
13
|
-
value = $bindable(''),
|
|
14
|
-
placeholder,
|
|
15
|
-
disabled = false,
|
|
16
|
-
readonly = false,
|
|
17
|
-
required = false,
|
|
18
|
-
name,
|
|
19
|
-
class: className = '',
|
|
20
|
-
'aria-describedby': ariaDescribedby,
|
|
21
|
-
'aria-invalid': ariaInvalid,
|
|
22
|
-
...rest
|
|
23
|
-
}: Props = $props();
|
|
24
|
-
|
|
25
|
-
// When wrapped in a <FormGroup>, inherit the id (so its <label for> resolves),
|
|
26
|
-
// the hint/error association, and the error state — unless set explicitly.
|
|
27
|
-
const formGroup = tryGetFormGroupContext();
|
|
28
|
-
const resolvedId = $derived(id ?? formGroup?.().inputId);
|
|
29
|
-
const resolvedDescribedBy = $derived(
|
|
30
|
-
ariaDescribedby ?? formGroup?.().describedBy,
|
|
31
|
-
);
|
|
32
|
-
const resolvedInvalid = $derived(
|
|
33
|
-
ariaInvalid ?? (formGroup?.().invalid ? 'true' : undefined),
|
|
34
|
-
);
|
|
35
|
-
</script>
|
|
36
|
-
|
|
37
|
-
<input
|
|
38
|
-
id={resolvedId}
|
|
39
|
-
{type}
|
|
40
|
-
bind:value
|
|
41
|
-
{placeholder}
|
|
42
|
-
{disabled}
|
|
43
|
-
{readonly}
|
|
44
|
-
{required}
|
|
45
|
-
{name}
|
|
46
|
-
aria-describedby={resolvedDescribedBy}
|
|
47
|
-
aria-invalid={resolvedInvalid}
|
|
48
|
-
class="input {className}"
|
|
49
|
-
{...rest}
|
|
50
|
-
/>
|
|
51
|
-
|
|
52
|
-
<style>
|
|
53
|
-
.input {
|
|
54
|
-
display: block;
|
|
55
|
-
width: 100%;
|
|
56
|
-
padding: 0.5rem 0.75rem;
|
|
57
|
-
font-size: var(--smrt-typography-body-medium-size, 0.875rem);
|
|
58
|
-
line-height: var(--smrt-typography-body-medium-line-height, 1.5);
|
|
59
|
-
color: var(--smrt-color-on-surface, #1f2937);
|
|
60
|
-
background-color: var(--smrt-color-surface, #fff);
|
|
61
|
-
border: 1px solid var(--smrt-color-outline-variant, #d1d5db);
|
|
62
|
-
border-radius: var(--smrt-radius-small, 0.375rem);
|
|
63
|
-
transition:
|
|
64
|
-
border-color var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease-in-out),
|
|
65
|
-
box-shadow var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease-in-out);
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
.input:focus {
|
|
69
|
-
outline: none;
|
|
70
|
-
border-color: var(--smrt-color-primary, #005ac1);
|
|
71
|
-
box-shadow: 0 0 0 3px color-mix(in srgb, var(--smrt-color-primary, #005ac1) 10%, transparent);
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
.input:disabled {
|
|
75
|
-
background-color: var(--smrt-color-surface-container-high, #f3f4f6);
|
|
76
|
-
cursor: not-allowed;
|
|
77
|
-
opacity: 0.7;
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
.input::placeholder {
|
|
81
|
-
color: var(--smrt-color-on-surface-variant, #9ca3af);
|
|
82
|
-
}
|
|
83
|
-
</style>
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import type { HTMLInputAttributes } from 'svelte/elements';
|
|
2
|
-
export interface Props extends Omit<HTMLInputAttributes, 'class' | 'value'> {
|
|
3
|
-
value?: string | number;
|
|
4
|
-
class?: string;
|
|
5
|
-
}
|
|
6
|
-
declare const Input: import("svelte").Component<Props, {}, "value">;
|
|
7
|
-
type Input = ReturnType<typeof Input>;
|
|
8
|
-
export default Input;
|
|
9
|
-
//# sourceMappingURL=Input.svelte.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Input.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/Input.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAI3D,MAAM,WAAW,KAAM,SAAQ,IAAI,CAAC,mBAAmB,EAAE,OAAO,GAAG,OAAO,CAAC;IACzE,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAuCD,QAAA,MAAM,KAAK,gDAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}
|
|
@@ -1,83 +0,0 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
import type { Snippet } from 'svelte';
|
|
3
|
-
import type { HTMLSelectAttributes } from 'svelte/elements';
|
|
4
|
-
import { tryGetFormGroupContext } from '../../state/form-group-context.js';
|
|
5
|
-
|
|
6
|
-
export interface Props extends Omit<HTMLSelectAttributes, 'class' | 'value'> {
|
|
7
|
-
value?: string;
|
|
8
|
-
class?: string;
|
|
9
|
-
children: Snippet;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
let {
|
|
13
|
-
id,
|
|
14
|
-
value = $bindable(''),
|
|
15
|
-
disabled = false,
|
|
16
|
-
required = false,
|
|
17
|
-
name,
|
|
18
|
-
class: className = '',
|
|
19
|
-
children,
|
|
20
|
-
'aria-describedby': ariaDescribedby,
|
|
21
|
-
'aria-invalid': ariaInvalid,
|
|
22
|
-
...rest
|
|
23
|
-
}: Props = $props();
|
|
24
|
-
|
|
25
|
-
// Inherit id / hint+error association / error state from a wrapping FormGroup.
|
|
26
|
-
const formGroup = tryGetFormGroupContext();
|
|
27
|
-
const resolvedId = $derived(id ?? formGroup?.().inputId);
|
|
28
|
-
const resolvedDescribedBy = $derived(
|
|
29
|
-
ariaDescribedby ?? formGroup?.().describedBy,
|
|
30
|
-
);
|
|
31
|
-
const resolvedInvalid = $derived(
|
|
32
|
-
ariaInvalid ?? (formGroup?.().invalid ? 'true' : undefined),
|
|
33
|
-
);
|
|
34
|
-
</script>
|
|
35
|
-
|
|
36
|
-
<select
|
|
37
|
-
id={resolvedId}
|
|
38
|
-
bind:value
|
|
39
|
-
{disabled}
|
|
40
|
-
{required}
|
|
41
|
-
{name}
|
|
42
|
-
aria-describedby={resolvedDescribedBy}
|
|
43
|
-
aria-invalid={resolvedInvalid}
|
|
44
|
-
class="select {className}"
|
|
45
|
-
{...rest}
|
|
46
|
-
>
|
|
47
|
-
{@render children()}
|
|
48
|
-
</select>
|
|
49
|
-
|
|
50
|
-
<style>
|
|
51
|
-
.select {
|
|
52
|
-
display: block;
|
|
53
|
-
width: 100%;
|
|
54
|
-
padding: 0.5rem 2rem 0.5rem 0.75rem;
|
|
55
|
-
font-size: var(--smrt-typography-body-medium-size, 0.875rem);
|
|
56
|
-
line-height: var(--smrt-typography-body-medium-line-height, 1.5);
|
|
57
|
-
color: var(--smrt-color-on-surface, #1f2937);
|
|
58
|
-
background-color: var(--smrt-color-surface, #fff);
|
|
59
|
-
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2379747e' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
|
|
60
|
-
background-position: right 0.5rem center;
|
|
61
|
-
background-repeat: no-repeat;
|
|
62
|
-
background-size: 1.5em 1.5em;
|
|
63
|
-
border: 1px solid var(--smrt-color-outline-variant, #d1d5db);
|
|
64
|
-
border-radius: 0.375rem;
|
|
65
|
-
appearance: none;
|
|
66
|
-
cursor: pointer;
|
|
67
|
-
transition:
|
|
68
|
-
border-color 0.15s ease-in-out,
|
|
69
|
-
box-shadow 0.15s ease-in-out;
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
.select:focus {
|
|
73
|
-
outline: none;
|
|
74
|
-
border-color: var(--smrt-color-primary, #005ac1);
|
|
75
|
-
box-shadow: 0 0 0 3px color-mix(in srgb, var(--smrt-color-primary, #005ac1) 10%, transparent);
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
.select:disabled {
|
|
79
|
-
background-color: var(--smrt-color-surface-container-high, #f3f4f6);
|
|
80
|
-
cursor: not-allowed;
|
|
81
|
-
opacity: 0.7;
|
|
82
|
-
}
|
|
83
|
-
</style>
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import type { Snippet } from 'svelte';
|
|
2
|
-
import type { HTMLSelectAttributes } from 'svelte/elements';
|
|
3
|
-
export interface Props extends Omit<HTMLSelectAttributes, 'class' | 'value'> {
|
|
4
|
-
value?: string;
|
|
5
|
-
class?: string;
|
|
6
|
-
children: Snippet;
|
|
7
|
-
}
|
|
8
|
-
declare const Select: import("svelte").Component<Props, {}, "value">;
|
|
9
|
-
type Select = ReturnType<typeof Select>;
|
|
10
|
-
export default Select;
|
|
11
|
-
//# sourceMappingURL=Select.svelte.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Select.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/Select.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAI5D,MAAM,WAAW,KAAM,SAAQ,IAAI,CAAC,oBAAoB,EAAE,OAAO,GAAG,OAAO,CAAC;IAC1E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;CACnB;AAuCD,QAAA,MAAM,MAAM,gDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
|
|
@@ -1,85 +0,0 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
import type { HTMLTextareaAttributes } from 'svelte/elements';
|
|
3
|
-
import { tryGetFormGroupContext } from '../../state/form-group-context.js';
|
|
4
|
-
|
|
5
|
-
export interface Props extends Omit<HTMLTextareaAttributes, 'class' | 'value'> {
|
|
6
|
-
value?: string;
|
|
7
|
-
rows?: number;
|
|
8
|
-
class?: string;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
let {
|
|
12
|
-
id,
|
|
13
|
-
value = $bindable(''),
|
|
14
|
-
placeholder,
|
|
15
|
-
disabled = false,
|
|
16
|
-
readonly = false,
|
|
17
|
-
required = false,
|
|
18
|
-
name,
|
|
19
|
-
rows = 4,
|
|
20
|
-
class: className = '',
|
|
21
|
-
'aria-describedby': ariaDescribedby,
|
|
22
|
-
'aria-invalid': ariaInvalid,
|
|
23
|
-
...rest
|
|
24
|
-
}: Props = $props();
|
|
25
|
-
|
|
26
|
-
// Inherit id / hint+error association / error state from a wrapping FormGroup.
|
|
27
|
-
const formGroup = tryGetFormGroupContext();
|
|
28
|
-
const resolvedId = $derived(id ?? formGroup?.().inputId);
|
|
29
|
-
const resolvedDescribedBy = $derived(
|
|
30
|
-
ariaDescribedby ?? formGroup?.().describedBy,
|
|
31
|
-
);
|
|
32
|
-
const resolvedInvalid = $derived(
|
|
33
|
-
ariaInvalid ?? (formGroup?.().invalid ? 'true' : undefined),
|
|
34
|
-
);
|
|
35
|
-
</script>
|
|
36
|
-
|
|
37
|
-
<textarea
|
|
38
|
-
id={resolvedId}
|
|
39
|
-
bind:value
|
|
40
|
-
{placeholder}
|
|
41
|
-
{disabled}
|
|
42
|
-
{readonly}
|
|
43
|
-
{required}
|
|
44
|
-
{name}
|
|
45
|
-
{rows}
|
|
46
|
-
aria-describedby={resolvedDescribedBy}
|
|
47
|
-
aria-invalid={resolvedInvalid}
|
|
48
|
-
class="textarea {className}"
|
|
49
|
-
{...rest}
|
|
50
|
-
></textarea>
|
|
51
|
-
|
|
52
|
-
<style>
|
|
53
|
-
.textarea {
|
|
54
|
-
display: block;
|
|
55
|
-
width: 100%;
|
|
56
|
-
padding: 0.5rem 0.75rem;
|
|
57
|
-
font-size: var(--smrt-typography-body-medium-size, 0.875rem);
|
|
58
|
-
line-height: var(--smrt-typography-body-medium-line-height, 1.5);
|
|
59
|
-
color: var(--smrt-color-on-surface, #1f2937);
|
|
60
|
-
background-color: var(--smrt-color-surface, #fff);
|
|
61
|
-
border: 1px solid var(--smrt-color-outline-variant, #d1d5db);
|
|
62
|
-
border-radius: 0.375rem;
|
|
63
|
-
resize: vertical;
|
|
64
|
-
min-height: 80px;
|
|
65
|
-
transition:
|
|
66
|
-
border-color 0.15s ease-in-out,
|
|
67
|
-
box-shadow 0.15s ease-in-out;
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
.textarea:focus {
|
|
71
|
-
outline: none;
|
|
72
|
-
border-color: var(--smrt-color-primary, #005ac1);
|
|
73
|
-
box-shadow: 0 0 0 3px color-mix(in srgb, var(--smrt-color-primary, #005ac1) 10%, transparent);
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
.textarea:disabled {
|
|
77
|
-
background-color: var(--smrt-color-surface-container-high, #f3f4f6);
|
|
78
|
-
cursor: not-allowed;
|
|
79
|
-
opacity: 0.7;
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
.textarea::placeholder {
|
|
83
|
-
color: var(--smrt-color-on-surface-variant, #9ca3af);
|
|
84
|
-
}
|
|
85
|
-
</style>
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import type { HTMLTextareaAttributes } from 'svelte/elements';
|
|
2
|
-
export interface Props extends Omit<HTMLTextareaAttributes, 'class' | 'value'> {
|
|
3
|
-
value?: string;
|
|
4
|
-
rows?: number;
|
|
5
|
-
class?: string;
|
|
6
|
-
}
|
|
7
|
-
declare const Textarea: import("svelte").Component<Props, {}, "value">;
|
|
8
|
-
type Textarea = ReturnType<typeof Textarea>;
|
|
9
|
-
export default Textarea;
|
|
10
|
-
//# sourceMappingURL=Textarea.svelte.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Textarea.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/Textarea.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AAI9D,MAAM,WAAW,KAAM,SAAQ,IAAI,CAAC,sBAAsB,EAAE,OAAO,GAAG,OAAO,CAAC;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAsCD,QAAA,MAAM,QAAQ,gDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
|
|
@@ -1,217 +0,0 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
/**
|
|
3
|
-
* SMRTToggle - An accessible toggle/switch component
|
|
4
|
-
*
|
|
5
|
-
* Features:
|
|
6
|
-
* - Native checkbox semantics for accessibility
|
|
7
|
-
* - Bindable checked state
|
|
8
|
-
* - Disabled state
|
|
9
|
-
* - Labels on either side
|
|
10
|
-
* - Size variants
|
|
11
|
-
* - Material 3 styling
|
|
12
|
-
*/
|
|
13
|
-
|
|
14
|
-
export interface Props {
|
|
15
|
-
/** Whether the toggle is checked */
|
|
16
|
-
checked?: boolean;
|
|
17
|
-
/** Whether the toggle is disabled */
|
|
18
|
-
disabled?: boolean;
|
|
19
|
-
/** Name attribute for form submission */
|
|
20
|
-
name?: string;
|
|
21
|
-
/** Value attribute for form submission */
|
|
22
|
-
value?: string;
|
|
23
|
-
/** Label text */
|
|
24
|
-
label?: string;
|
|
25
|
-
/** Position of the label */
|
|
26
|
-
labelPosition?: 'left' | 'right';
|
|
27
|
-
/** Size variant */
|
|
28
|
-
size?: 'sm' | 'md' | 'lg';
|
|
29
|
-
/** ID for the input element */
|
|
30
|
-
id?: string;
|
|
31
|
-
/** ARIA label for accessibility */
|
|
32
|
-
ariaLabel?: string;
|
|
33
|
-
/** Change callback */
|
|
34
|
-
onchange?: (checked: boolean) => void;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
let {
|
|
38
|
-
checked = $bindable(false),
|
|
39
|
-
disabled = false,
|
|
40
|
-
name,
|
|
41
|
-
value,
|
|
42
|
-
label,
|
|
43
|
-
labelPosition = 'right',
|
|
44
|
-
size = 'md',
|
|
45
|
-
id,
|
|
46
|
-
ariaLabel,
|
|
47
|
-
onchange,
|
|
48
|
-
}: Props = $props();
|
|
49
|
-
|
|
50
|
-
function handleChange(event: Event) {
|
|
51
|
-
const target = event.target as HTMLInputElement;
|
|
52
|
-
checked = target.checked;
|
|
53
|
-
onchange?.(checked);
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
const sizeClasses = {
|
|
57
|
-
sm: 'toggle--sm',
|
|
58
|
-
md: 'toggle--md',
|
|
59
|
-
lg: 'toggle--lg',
|
|
60
|
-
};
|
|
61
|
-
</script>
|
|
62
|
-
|
|
63
|
-
<label class="toggle {sizeClasses[size]}" class:toggle--disabled={disabled}>
|
|
64
|
-
{#if label && labelPosition === 'left'}
|
|
65
|
-
<span class="toggle__label toggle__label--left">{label}</span>
|
|
66
|
-
{/if}
|
|
67
|
-
|
|
68
|
-
<span class="toggle__track">
|
|
69
|
-
<input
|
|
70
|
-
type="checkbox"
|
|
71
|
-
class="toggle__input"
|
|
72
|
-
{id}
|
|
73
|
-
{name}
|
|
74
|
-
{value}
|
|
75
|
-
{disabled}
|
|
76
|
-
{checked}
|
|
77
|
-
onchange={handleChange}
|
|
78
|
-
aria-label={ariaLabel ?? label ?? ''}
|
|
79
|
-
/>
|
|
80
|
-
<span class="toggle__thumb"></span>
|
|
81
|
-
</span>
|
|
82
|
-
|
|
83
|
-
{#if label && labelPosition === 'right'}
|
|
84
|
-
<span class="toggle__label toggle__label--right">{label}</span>
|
|
85
|
-
{/if}
|
|
86
|
-
</label>
|
|
87
|
-
|
|
88
|
-
<style>
|
|
89
|
-
.toggle {
|
|
90
|
-
display: inline-flex;
|
|
91
|
-
align-items: center;
|
|
92
|
-
gap: var(--smrt-spacing-2, 0.5rem);
|
|
93
|
-
cursor: pointer;
|
|
94
|
-
user-select: none;
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
.toggle--disabled {
|
|
98
|
-
cursor: not-allowed;
|
|
99
|
-
opacity: 0.5;
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
.toggle__label {
|
|
103
|
-
font-size: var(--smrt-typography-body-medium-size, 0.875rem);
|
|
104
|
-
color: var(--smrt-color-on-surface, #111827);
|
|
105
|
-
line-height: 1.5;
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
.toggle__track {
|
|
109
|
-
position: relative;
|
|
110
|
-
display: inline-flex;
|
|
111
|
-
align-items: center;
|
|
112
|
-
flex-shrink: 0;
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
.toggle__input {
|
|
116
|
-
position: absolute;
|
|
117
|
-
width: 1px;
|
|
118
|
-
height: 1px;
|
|
119
|
-
padding: 0;
|
|
120
|
-
margin: -1px;
|
|
121
|
-
overflow: hidden;
|
|
122
|
-
clip: rect(0, 0, 0, 0);
|
|
123
|
-
white-space: nowrap;
|
|
124
|
-
border: 0;
|
|
125
|
-
}
|
|
126
|
-
|
|
127
|
-
.toggle__thumb {
|
|
128
|
-
position: relative;
|
|
129
|
-
background: var(--smrt-color-surface-container-highest, #e5e7eb);
|
|
130
|
-
border-radius: var(--smrt-radius-full, 9999px);
|
|
131
|
-
transition: background-color var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease);
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
.toggle__thumb::after {
|
|
135
|
-
content: '';
|
|
136
|
-
position: absolute;
|
|
137
|
-
background: var(--smrt-color-surface, #ffffff);
|
|
138
|
-
border-radius: var(--smrt-radius-full, 9999px);
|
|
139
|
-
box-shadow: var(--smrt-elevation-1, 0 1px 3px color-mix(in srgb, var(--smrt-color-shadow) 20%, transparent));
|
|
140
|
-
transition: transform var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease);
|
|
141
|
-
}
|
|
142
|
-
|
|
143
|
-
/* Checked state */
|
|
144
|
-
.toggle__input:checked + .toggle__thumb {
|
|
145
|
-
background: var(--smrt-color-primary, #005ac1);
|
|
146
|
-
}
|
|
147
|
-
|
|
148
|
-
/* Focus state */
|
|
149
|
-
.toggle__input:focus-visible + .toggle__thumb {
|
|
150
|
-
outline: 2px solid var(--smrt-color-primary, #005ac1);
|
|
151
|
-
outline-offset: 2px;
|
|
152
|
-
}
|
|
153
|
-
|
|
154
|
-
/* Hover state */
|
|
155
|
-
.toggle:not(.toggle--disabled):hover .toggle__thumb {
|
|
156
|
-
background: var(--smrt-color-surface-container-high, #d1d5db);
|
|
157
|
-
}
|
|
158
|
-
|
|
159
|
-
.toggle:not(.toggle--disabled):hover .toggle__input:checked + .toggle__thumb {
|
|
160
|
-
background: var(--smrt-color-primary, #2563eb);
|
|
161
|
-
}
|
|
162
|
-
|
|
163
|
-
/* Size: Small */
|
|
164
|
-
.toggle--sm .toggle__thumb {
|
|
165
|
-
width: 32px;
|
|
166
|
-
height: 18px;
|
|
167
|
-
}
|
|
168
|
-
|
|
169
|
-
.toggle--sm .toggle__thumb::after {
|
|
170
|
-
width: 14px;
|
|
171
|
-
height: 14px;
|
|
172
|
-
top: 2px;
|
|
173
|
-
left: 2px;
|
|
174
|
-
}
|
|
175
|
-
|
|
176
|
-
.toggle--sm .toggle__input:checked + .toggle__thumb::after {
|
|
177
|
-
transform: translateX(14px);
|
|
178
|
-
}
|
|
179
|
-
|
|
180
|
-
/* Size: Medium (default) */
|
|
181
|
-
.toggle--md .toggle__thumb {
|
|
182
|
-
width: 44px;
|
|
183
|
-
height: 24px;
|
|
184
|
-
}
|
|
185
|
-
|
|
186
|
-
.toggle--md .toggle__thumb::after {
|
|
187
|
-
width: 20px;
|
|
188
|
-
height: 20px;
|
|
189
|
-
top: 2px;
|
|
190
|
-
left: 2px;
|
|
191
|
-
}
|
|
192
|
-
|
|
193
|
-
.toggle--md .toggle__input:checked + .toggle__thumb::after {
|
|
194
|
-
transform: translateX(20px);
|
|
195
|
-
}
|
|
196
|
-
|
|
197
|
-
/* Size: Large */
|
|
198
|
-
.toggle--lg .toggle__thumb {
|
|
199
|
-
width: 56px;
|
|
200
|
-
height: 30px;
|
|
201
|
-
}
|
|
202
|
-
|
|
203
|
-
.toggle--lg .toggle__thumb::after {
|
|
204
|
-
width: 26px;
|
|
205
|
-
height: 26px;
|
|
206
|
-
top: 2px;
|
|
207
|
-
left: 2px;
|
|
208
|
-
}
|
|
209
|
-
|
|
210
|
-
.toggle--lg .toggle__input:checked + .toggle__thumb::after {
|
|
211
|
-
transform: translateX(26px);
|
|
212
|
-
}
|
|
213
|
-
|
|
214
|
-
.toggle--lg .toggle__label {
|
|
215
|
-
font-size: var(--smrt-typography-body-large-size, 1rem);
|
|
216
|
-
}
|
|
217
|
-
</style>
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* SMRTToggle - An accessible toggle/switch component
|
|
3
|
-
*
|
|
4
|
-
* Features:
|
|
5
|
-
* - Native checkbox semantics for accessibility
|
|
6
|
-
* - Bindable checked state
|
|
7
|
-
* - Disabled state
|
|
8
|
-
* - Labels on either side
|
|
9
|
-
* - Size variants
|
|
10
|
-
* - Material 3 styling
|
|
11
|
-
*/
|
|
12
|
-
export interface Props {
|
|
13
|
-
/** Whether the toggle is checked */
|
|
14
|
-
checked?: boolean;
|
|
15
|
-
/** Whether the toggle is disabled */
|
|
16
|
-
disabled?: boolean;
|
|
17
|
-
/** Name attribute for form submission */
|
|
18
|
-
name?: string;
|
|
19
|
-
/** Value attribute for form submission */
|
|
20
|
-
value?: string;
|
|
21
|
-
/** Label text */
|
|
22
|
-
label?: string;
|
|
23
|
-
/** Position of the label */
|
|
24
|
-
labelPosition?: 'left' | 'right';
|
|
25
|
-
/** Size variant */
|
|
26
|
-
size?: 'sm' | 'md' | 'lg';
|
|
27
|
-
/** ID for the input element */
|
|
28
|
-
id?: string;
|
|
29
|
-
/** ARIA label for accessibility */
|
|
30
|
-
ariaLabel?: string;
|
|
31
|
-
/** Change callback */
|
|
32
|
-
onchange?: (checked: boolean) => void;
|
|
33
|
-
}
|
|
34
|
-
declare const Toggle: import("svelte").Component<Props, {}, "checked">;
|
|
35
|
-
type Toggle = ReturnType<typeof Toggle>;
|
|
36
|
-
export default Toggle;
|
|
37
|
-
//# sourceMappingURL=Toggle.svelte.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Toggle.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/Toggle.svelte.ts"],"names":[],"mappings":"AAGA;;;;;;;;;;GAUG;AAEH,MAAM,WAAW,KAAK;IACpB,oCAAoC;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yCAAyC;IACzC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4BAA4B;IAC5B,aAAa,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACjC,mBAAmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,+BAA+B;IAC/B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,mCAAmC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CACvC;AAiDD,QAAA,MAAM,MAAM,kDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
|