@sentropic/design-system-svelte 0.5.0 → 0.6.0

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.
Files changed (22) hide show
  1. package/dist/Form.svelte +117 -0
  2. package/dist/Form.svelte.d.ts +16 -0
  3. package/dist/Form.svelte.d.ts.map +1 -0
  4. package/dist/FormGroup.svelte +71 -0
  5. package/dist/FormGroup.svelte.d.ts +13 -0
  6. package/dist/FormGroup.svelte.d.ts.map +1 -0
  7. package/dist/Header.svelte +117 -0
  8. package/dist/Header.svelte.d.ts +16 -0
  9. package/dist/Header.svelte.d.ts.map +1 -0
  10. package/dist/OverflowMenu.svelte +222 -0
  11. package/dist/OverflowMenu.svelte.d.ts +21 -0
  12. package/dist/OverflowMenu.svelte.d.ts.map +1 -0
  13. package/dist/PaginationNav.svelte +219 -0
  14. package/dist/PaginationNav.svelte.d.ts +15 -0
  15. package/dist/PaginationNav.svelte.d.ts.map +1 -0
  16. package/dist/ProgressIndicator.svelte +283 -0
  17. package/dist/ProgressIndicator.svelte.d.ts +18 -0
  18. package/dist/ProgressIndicator.svelte.d.ts.map +1 -0
  19. package/dist/index.d.ts +8 -0
  20. package/dist/index.d.ts.map +1 -1
  21. package/dist/index.js +6 -0
  22. package/package.json +2 -2
package/dist/Form.svelte ADDED
@@ -0,0 +1,117 @@
1
+ <script lang="ts">
2
+ import type { Snippet } from "svelte";
3
+ import type { HTMLFormAttributes } from "svelte/elements";
4
+
5
+ type FormStatus = "idle" | "submitting" | "submitted" | "error";
6
+
7
+ type FormProps = Omit<HTMLFormAttributes, "class" | "onsubmit"> & {
8
+ onsubmit?: (event: SubmitEvent) => void | Promise<void>;
9
+ helperText?: string;
10
+ errorText?: string;
11
+ successText?: string;
12
+ submitting?: boolean;
13
+ noNoscript?: boolean;
14
+ class?: string;
15
+ children: Snippet;
16
+ };
17
+
18
+ let {
19
+ onsubmit,
20
+ helperText,
21
+ errorText,
22
+ successText,
23
+ submitting = $bindable(false),
24
+ noNoscript = false,
25
+ class: className,
26
+ children,
27
+ ...rest
28
+ }: FormProps = $props();
29
+
30
+ let status = $state<FormStatus>("idle");
31
+ let internalError = $state<string | undefined>(undefined);
32
+
33
+ const classes = () => ["st-form", className].filter(Boolean).join(" ");
34
+
35
+ async function handleSubmit(event: SubmitEvent) {
36
+ if (!onsubmit) return;
37
+ event.preventDefault();
38
+ internalError = undefined;
39
+ status = "submitting";
40
+ submitting = true;
41
+ try {
42
+ await onsubmit(event);
43
+ status = "submitted";
44
+ } catch (err) {
45
+ status = "error";
46
+ internalError = err instanceof Error ? err.message : String(err);
47
+ } finally {
48
+ submitting = false;
49
+ }
50
+ }
51
+
52
+ const resolvedErrorText = () => errorText ?? internalError;
53
+ const showError = () => status === "error" && Boolean(resolvedErrorText());
54
+ const showSuccess = () => status === "submitted" && Boolean(successText);
55
+ const showHelper = () =>
56
+ Boolean(helperText) && !showError() && !showSuccess();
57
+ </script>
58
+
59
+ <form
60
+ {...rest}
61
+ class={classes()}
62
+ onsubmit={handleSubmit}
63
+ aria-busy={status === "submitting" ? "true" : undefined}
64
+ >
65
+ <div class="st-form__body">
66
+ {@render children()}
67
+ </div>
68
+ {#if showError()}
69
+ <p class="st-form__message st-form__message--error" role="alert">
70
+ {resolvedErrorText()}
71
+ </p>
72
+ {:else if showSuccess()}
73
+ <p class="st-form__message st-form__message--success" role="status">
74
+ {successText}
75
+ </p>
76
+ {:else if showHelper()}
77
+ <p class="st-form__message st-form__message--help">{helperText}</p>
78
+ {/if}
79
+ {#if !noNoscript}
80
+ <noscript>
81
+ <p class="st-form__message st-form__message--error">
82
+ JavaScript is required to submit this form.
83
+ </p>
84
+ </noscript>
85
+ {/if}
86
+ </form>
87
+
88
+ <style>
89
+ .st-form {
90
+ display: grid;
91
+ gap: var(--st-component-form-gap, 1rem);
92
+ width: 100%;
93
+ }
94
+
95
+ .st-form__body {
96
+ display: grid;
97
+ gap: var(--st-component-form-fieldGap, 1rem);
98
+ }
99
+
100
+ .st-form__message {
101
+ font-size: 0.8125rem;
102
+ line-height: 1.4;
103
+ margin: 0;
104
+ }
105
+
106
+ .st-form__message--help {
107
+ color: var(--st-component-form-helpText, var(--st-semantic-text-secondary));
108
+ }
109
+
110
+ .st-form__message--error {
111
+ color: var(--st-component-form-errorText, var(--st-semantic-feedback-error));
112
+ }
113
+
114
+ .st-form__message--success {
115
+ color: var(--st-component-form-successText, var(--st-semantic-feedback-success));
116
+ }
117
+ </style>
package/dist/Form.svelte.d.ts ADDED
@@ -0,0 +1,16 @@
1
+ import type { Snippet } from "svelte";
2
+ import type { HTMLFormAttributes } from "svelte/elements";
3
+ type FormProps = Omit<HTMLFormAttributes, "class" | "onsubmit"> & {
4
+ onsubmit?: (event: SubmitEvent) => void | Promise<void>;
5
+ helperText?: string;
6
+ errorText?: string;
7
+ successText?: string;
8
+ submitting?: boolean;
9
+ noNoscript?: boolean;
10
+ class?: string;
11
+ children: Snippet;
12
+ };
13
+ declare const Form: import("svelte").Component<FormProps, {}, "submitting">;
14
+ type Form = ReturnType<typeof Form>;
15
+ export default Form;
16
+ //# sourceMappingURL=Form.svelte.d.ts.map
package/dist/Form.svelte.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Form.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Form.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAKxD,KAAK,SAAS,GAAG,IAAI,CAAC,kBAAkB,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IAChE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACxD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;CACnB,CAAC;AA4EJ,QAAA,MAAM,IAAI,yDAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}
package/dist/FormGroup.svelte ADDED
@@ -0,0 +1,71 @@
1
+ <script lang="ts">
2
+ import type { Snippet } from "svelte";
3
+ import type { HTMLFieldsetAttributes } from "svelte/elements";
4
+
5
+ type FormGroupProps = Omit<HTMLFieldsetAttributes, "class"> & {
6
+ legend?: string;
7
+ helperText?: string;
8
+ disabled?: boolean;
9
+ class?: string;
10
+ children: Snippet;
11
+ };
12
+
13
+ let {
14
+ legend,
15
+ helperText,
16
+ disabled = false,
17
+ class: className,
18
+ children,
19
+ ...rest
20
+ }: FormGroupProps = $props();
21
+
22
+ const classes = () => ["st-form-group", className].filter(Boolean).join(" ");
23
+ </script>
24
+
25
+ <fieldset {...rest} class={classes()} {disabled}>
26
+ {#if legend}<legend class="st-form-group__legend">{legend}</legend>{/if}
27
+ <div class="st-form-group__body">
28
+ {@render children()}
29
+ </div>
30
+ {#if helperText}
31
+ <p class="st-form-group__help">{helperText}</p>
32
+ {/if}
33
+ </fieldset>
34
+
35
+ <style>
36
+ .st-form-group {
37
+ border: 1px solid
38
+ var(--st-component-formGroup-border, var(--st-semantic-border-subtle));
39
+ border-radius: var(--st-component-formGroup-radius, 0.5rem);
40
+ color: var(--st-semantic-text-primary);
41
+ display: grid;
42
+ gap: var(--st-component-formGroup-gap, 1rem);
43
+ margin: 0;
44
+ padding: var(--st-component-formGroup-padding, 1rem);
45
+ }
46
+
47
+ .st-form-group__legend {
48
+ font-size: 0.875rem;
49
+ font-weight: 600;
50
+ padding: 0 0.25rem;
51
+ }
52
+
53
+ .st-form-group__body {
54
+ display: grid;
55
+ gap: var(--st-component-formGroup-fieldGap, 1rem);
56
+ }
57
+
58
+ .st-form-group__help {
59
+ color: var(
60
+ --st-component-formGroup-helpText,
61
+ var(--st-semantic-text-secondary)
62
+ );
63
+ font-size: 0.8125rem;
64
+ line-height: 1.4;
65
+ margin: 0;
66
+ }
67
+
68
+ .st-form-group:disabled {
69
+ opacity: 0.6;
70
+ }
71
+ </style>
package/dist/FormGroup.svelte.d.ts ADDED
@@ -0,0 +1,13 @@
1
+ import type { Snippet } from "svelte";
2
+ import type { HTMLFieldsetAttributes } from "svelte/elements";
3
+ type FormGroupProps = Omit<HTMLFieldsetAttributes, "class"> & {
4
+ legend?: string;
5
+ helperText?: string;
6
+ disabled?: boolean;
7
+ class?: string;
8
+ children: Snippet;
9
+ };
10
+ declare const FormGroup: import("svelte").Component<FormGroupProps, {}, "">;
11
+ type FormGroup = ReturnType<typeof FormGroup>;
12
+ export default FormGroup;
13
+ //# sourceMappingURL=FormGroup.svelte.d.ts.map
package/dist/FormGroup.svelte.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"FormGroup.svelte.d.ts","sourceRoot":"","sources":["../src/lib/FormGroup.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AAG5D,KAAK,cAAc,GAAG,IAAI,CAAC,sBAAsB,EAAE,OAAO,CAAC,GAAG;IAC5D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;CACnB,CAAC;AAgCJ,QAAA,MAAM,SAAS,oDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
package/dist/Header.svelte ADDED
@@ -0,0 +1,117 @@
1
+ <script lang="ts">
2
+ import type { Snippet } from "svelte";
3
+ import type { HTMLAttributes } from "svelte/elements";
4
+
5
+ type HeaderProps = Omit<HTMLAttributes<HTMLElement>, "class"> & {
6
+ title?: string;
7
+ label?: string;
8
+ sticky?: boolean;
9
+ class?: string;
10
+ logo?: Snippet;
11
+ navigation?: Snippet;
12
+ actions?: Snippet;
13
+ children?: Snippet;
14
+ };
15
+
16
+ let {
17
+ title,
18
+ label = "Application header",
19
+ sticky = true,
20
+ class: className,
21
+ logo,
22
+ navigation,
23
+ actions,
24
+ children,
25
+ ...rest
26
+ }: HeaderProps = $props();
27
+
28
+ const classes = () =>
29
+ ["st-header", sticky ? "st-header--sticky" : null, className].filter(Boolean).join(" ");
30
+ </script>
31
+
32
+ <header {...rest} class={classes()} aria-label={label}>
33
+ <div class="st-header__leading">
34
+ {#if logo}
35
+ <span class="st-header__logo">{@render logo()}</span>
36
+ {/if}
37
+ {#if title}
38
+ <span class="st-header__title">{title}</span>
39
+ {/if}
40
+ </div>
41
+ {#if navigation}
42
+ <nav class="st-header__navigation" aria-label="Primary">
43
+ {@render navigation()}
44
+ </nav>
45
+ {/if}
46
+ {#if actions}
47
+ <div class="st-header__actions">
48
+ {@render actions()}
49
+ </div>
50
+ {/if}
51
+ {#if children}
52
+ {@render children()}
53
+ {/if}
54
+ </header>
55
+
56
+ <style>
57
+ .st-header {
58
+ align-items: center;
59
+ background: var(--st-component-header-background, var(--st-semantic-surface-default));
60
+ border-bottom: 1px solid var(--st-component-header-border, var(--st-semantic-border-subtle));
61
+ box-shadow: var(--st-component-header-shadow, 0 1px 3px rgb(15 23 42 / 0.06));
62
+ color: var(--st-component-header-text, var(--st-semantic-text-primary));
63
+ display: flex;
64
+ gap: var(--st-spacing-4, 1rem);
65
+ height: var(--st-component-header-height, 3.5rem);
66
+ padding: 0 var(--st-spacing-4, 1rem);
67
+ width: 100%;
68
+ z-index: var(--st-component-header-zIndex, 70);
69
+ }
70
+
71
+ .st-header--sticky {
72
+ position: sticky;
73
+ top: 0;
74
+ }
75
+
76
+ .st-header__leading {
77
+ align-items: center;
78
+ display: flex;
79
+ flex: 0 0 auto;
80
+ gap: var(--st-spacing-3, 0.75rem);
81
+ }
82
+
83
+ .st-header__logo {
84
+ align-items: center;
85
+ color: var(--st-component-header-logoText, var(--st-semantic-text-primary));
86
+ display: inline-flex;
87
+ }
88
+
89
+ .st-header__title {
90
+ color: var(--st-component-header-titleText, var(--st-semantic-text-primary));
91
+ font-size: 0.9375rem;
92
+ font-weight: 650;
93
+ letter-spacing: -0.005em;
94
+ line-height: 1.2;
95
+ }
96
+
97
+ .st-header__navigation {
98
+ align-items: center;
99
+ display: flex;
100
+ flex: 1 1 auto;
101
+ justify-content: center;
102
+ min-width: 0;
103
+ }
104
+
105
+ .st-header__actions {
106
+ align-items: center;
107
+ display: flex;
108
+ flex: 0 0 auto;
109
+ gap: var(--st-spacing-2, 0.5rem);
110
+ margin-left: auto;
111
+ }
112
+
113
+ /*
114
+ * When no navigation snippet is provided, the actions area still flushes
115
+ * to the right because flex:1 leading + auto margin keep the layout balanced.
116
+ */
117
+ </style>
package/dist/Header.svelte.d.ts ADDED
@@ -0,0 +1,16 @@
1
+ import type { Snippet } from "svelte";
2
+ import type { HTMLAttributes } from "svelte/elements";
3
+ type HeaderProps = Omit<HTMLAttributes<HTMLElement>, "class"> & {
4
+ title?: string;
5
+ label?: string;
6
+ sticky?: boolean;
7
+ class?: string;
8
+ logo?: Snippet;
9
+ navigation?: Snippet;
10
+ actions?: Snippet;
11
+ children?: Snippet;
12
+ };
13
+ declare const Header: import("svelte").Component<HeaderProps, {}, "">;
14
+ type Header = ReturnType<typeof Header>;
15
+ export default Header;
16
+ //# sourceMappingURL=Header.svelte.d.ts.map
package/dist/Header.svelte.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Header.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Header.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,GAAG;IAC9D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAkDJ,QAAA,MAAM,MAAM,iDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
package/dist/OverflowMenu.svelte ADDED
@@ -0,0 +1,222 @@
1
+ <script lang="ts" module>
2
+ export interface OverflowMenuItem {
3
+ value: string;
4
+ label: string;
5
+ disabled?: boolean;
6
+ danger?: boolean;
7
+ onclick?: () => void;
8
+ }
9
+ </script>
10
+
11
+ <script lang="ts">
12
+ import type { HTMLAttributes } from "svelte/elements";
13
+
14
+ type OverflowMenuProps = Omit<HTMLAttributes<HTMLDivElement>, "class" | "onselect"> & {
15
+ items: OverflowMenuItem[];
16
+ label?: string;
17
+ open?: boolean;
18
+ placement?: "bottom-start" | "bottom-end" | "top-start" | "top-end";
19
+ class?: string;
20
+ triggerLabel?: string;
21
+ onselect?: (value: string) => void;
22
+ };
23
+
24
+ let {
25
+ items,
26
+ label = "Menu",
27
+ open = $bindable(false),
28
+ placement = "bottom-end",
29
+ class: className,
30
+ triggerLabel = "More actions",
31
+ onselect,
32
+ ...rest
33
+ }: OverflowMenuProps = $props();
34
+
35
+ let host: HTMLDivElement | undefined = $state();
36
+
37
+ const classes = () =>
38
+ ["st-overflowMenu", `st-overflowMenu--${placement}`, className].filter(Boolean).join(" ");
39
+
40
+ function toggle() {
41
+ open = !open;
42
+ }
43
+
44
+ function close() {
45
+ open = false;
46
+ }
47
+
48
+ function selectItem(item: OverflowMenuItem) {
49
+ if (item.disabled) return;
50
+ item.onclick?.();
51
+ onselect?.(item.value);
52
+ close();
53
+ }
54
+
55
+ function onWindowKeydown(event: KeyboardEvent) {
56
+ if (event.key === "Escape" && open) {
57
+ event.preventDefault();
58
+ close();
59
+ }
60
+ }
61
+
62
+ function onWindowPointerDown(event: MouseEvent) {
63
+ if (!open) return;
64
+ const target = event.target as Node | null;
65
+ if (host && target && !host.contains(target)) close();
66
+ }
67
+ </script>
68
+
69
+ <svelte:window onkeydown={onWindowKeydown} onpointerdown={onWindowPointerDown} />
70
+
71
+ <div {...rest} bind:this={host} class={classes()}>
72
+ <button
73
+ type="button"
74
+ class="st-overflowMenu__trigger"
75
+ aria-haspopup="menu"
76
+ aria-expanded={open ? "true" : "false"}
77
+ aria-label={triggerLabel}
78
+ onclick={toggle}
79
+ >
80
+ <svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true" focusable="false">
81
+ <circle cx="3" cy="8" r="1.4" fill="currentColor" />
82
+ <circle cx="8" cy="8" r="1.4" fill="currentColor" />
83
+ <circle cx="13" cy="8" r="1.4" fill="currentColor" />
84
+ </svg>
85
+ </button>
86
+ {#if open}
87
+ <ul class="st-overflowMenu__list" role="menu" aria-label={label}>
88
+ {#each items as item (item.value)}
89
+ <li role="none" class="st-overflowMenu__listItem">
90
+ <button
91
+ type="button"
92
+ class="st-overflowMenu__item"
93
+ class:st-overflowMenu__item--danger={item.danger}
94
+ role="menuitem"
95
+ aria-disabled={item.disabled ? "true" : undefined}
96
+ disabled={item.disabled}
97
+ onclick={() => selectItem(item)}
98
+ >
99
+ {item.label}
100
+ </button>
101
+ </li>
102
+ {/each}
103
+ </ul>
104
+ {/if}
105
+ </div>
106
+
107
+ <style>
108
+ .st-overflowMenu {
109
+ display: inline-block;
110
+ position: relative;
111
+ }
112
+
113
+ .st-overflowMenu__trigger {
114
+ align-items: center;
115
+ background: transparent;
116
+ border: 1px solid transparent;
117
+ border-radius: var(--st-component-overflowMenu-triggerRadius, var(--st-radius-small, 0.375rem));
118
+ color: var(--st-component-overflowMenu-triggerText, var(--st-semantic-text-primary));
119
+ cursor: pointer;
120
+ display: inline-flex;
121
+ height: 2rem;
122
+ justify-content: center;
123
+ padding: 0;
124
+ width: 2rem;
125
+ }
126
+
127
+ .st-overflowMenu__trigger:hover {
128
+ background: var(
129
+ --st-component-overflowMenu-triggerHoverBackground,
130
+ var(--st-semantic-surface-subtle)
131
+ );
132
+ }
133
+
134
+ .st-overflowMenu__trigger:focus-visible {
135
+ border-color: var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
136
+ box-shadow: 0 0 0 2px var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
137
+ outline: none;
138
+ }
139
+
140
+ .st-overflowMenu__trigger[aria-expanded="true"] {
141
+ background: var(
142
+ --st-component-overflowMenu-triggerHoverBackground,
143
+ var(--st-semantic-surface-subtle)
144
+ );
145
+ }
146
+
147
+ .st-overflowMenu__list {
148
+ background: var(--st-component-menu-background, var(--st-semantic-surface-raised));
149
+ border: 1px solid var(--st-component-menu-border, var(--st-semantic-border-subtle));
150
+ border-radius: var(--st-component-menu-radius, 0.375rem);
151
+ box-shadow: var(--st-component-menu-shadow, 0 8px 24px rgb(15 23 42 / 0.14));
152
+ display: grid;
153
+ list-style: none;
154
+ margin: 0;
155
+ min-width: 12rem;
156
+ padding: var(--st-spacing-1, 0.25rem);
157
+ position: absolute;
158
+ z-index: var(--st-component-popover-zIndex, 80);
159
+ }
160
+
161
+ .st-overflowMenu--bottom-end .st-overflowMenu__list {
162
+ right: 0;
163
+ top: calc(100% + var(--st-spacing-1, 0.25rem));
164
+ }
165
+
166
+ .st-overflowMenu--bottom-start .st-overflowMenu__list {
167
+ left: 0;
168
+ top: calc(100% + var(--st-spacing-1, 0.25rem));
169
+ }
170
+
171
+ .st-overflowMenu--top-end .st-overflowMenu__list {
172
+ bottom: calc(100% + var(--st-spacing-1, 0.25rem));
173
+ right: 0;
174
+ }
175
+
176
+ .st-overflowMenu--top-start .st-overflowMenu__list {
177
+ bottom: calc(100% + var(--st-spacing-1, 0.25rem));
178
+ left: 0;
179
+ }
180
+
181
+ .st-overflowMenu__listItem {
182
+ margin: 0;
183
+ padding: 0;
184
+ }
185
+
186
+ .st-overflowMenu__item {
187
+ background: transparent;
188
+ border: 0;
189
+ border-radius: var(--st-radius-small, 0.375rem);
190
+ color: var(--st-component-menu-text, var(--st-semantic-text-primary));
191
+ cursor: pointer;
192
+ display: block;
193
+ font: inherit;
194
+ padding: var(--st-spacing-2, 0.5rem) var(--st-spacing-3, 0.75rem);
195
+ text-align: left;
196
+ width: 100%;
197
+ }
198
+
199
+ .st-overflowMenu__item:hover:not(:disabled),
200
+ .st-overflowMenu__item:focus-visible {
201
+ background: var(--st-component-menu-itemHoverBackground, var(--st-semantic-surface-subtle));
202
+ outline: none;
203
+ }
204
+
205
+ .st-overflowMenu__item:disabled {
206
+ color: var(--st-component-menu-disabledText, var(--st-semantic-text-muted));
207
+ cursor: not-allowed;
208
+ }
209
+
210
+ .st-overflowMenu__item--danger {
211
+ color: var(--st-component-overflowMenu-dangerText, var(--st-semantic-feedback-error));
212
+ }
213
+
214
+ .st-overflowMenu__item--danger:hover:not(:disabled),
215
+ .st-overflowMenu__item--danger:focus-visible {
216
+ background: var(
217
+ --st-component-overflowMenu-dangerHoverBackground,
218
+ var(--st-semantic-feedback-error)
219
+ );
220
+ color: var(--st-component-overflowMenu-dangerHoverText, var(--st-semantic-action-primaryText));
221
+ }
222
+ </style>
package/dist/OverflowMenu.svelte.d.ts ADDED
@@ -0,0 +1,21 @@
1
+ export interface OverflowMenuItem {
2
+ value: string;
3
+ label: string;
4
+ disabled?: boolean;
5
+ danger?: boolean;
6
+ onclick?: () => void;
7
+ }
8
+ import type { HTMLAttributes } from "svelte/elements";
9
+ type OverflowMenuProps = Omit<HTMLAttributes<HTMLDivElement>, "class" | "onselect"> & {
10
+ items: OverflowMenuItem[];
11
+ label?: string;
12
+ open?: boolean;
13
+ placement?: "bottom-start" | "bottom-end" | "top-start" | "top-end";
14
+ class?: string;
15
+ triggerLabel?: string;
16
+ onselect?: (value: string) => void;
17
+ };
18
+ declare const OverflowMenu: import("svelte").Component<OverflowMenuProps, {}, "open">;
19
+ type OverflowMenu = ReturnType<typeof OverflowMenu>;
20
+ export default OverflowMenu;
21
+ //# sourceMappingURL=OverflowMenu.svelte.d.ts.map
package/dist/OverflowMenu.svelte.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"OverflowMenu.svelte.d.ts","sourceRoot":"","sources":["../src/lib/OverflowMenu.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAGH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,iBAAiB,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IACpF,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,cAAc,GAAG,YAAY,GAAG,WAAW,GAAG,SAAS,CAAC;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC,CAAC;AA+EJ,QAAA,MAAM,YAAY,2DAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}
package/dist/PaginationNav.svelte ADDED
@@ -0,0 +1,219 @@
1
+ <script lang="ts">
2
+ import type { HTMLAttributes } from "svelte/elements";
3
+
4
+ type PaginationNavProps = Omit<HTMLAttributes<HTMLElement>, "class"> & {
5
+ page: number;
6
+ pageCount: number;
7
+ siblings?: number;
8
+ label?: string;
9
+ previousLabel?: string;
10
+ nextLabel?: string;
11
+ class?: string;
12
+ onPageChange?: (page: number) => void;
13
+ };
14
+
15
+ let {
16
+ page = $bindable(1),
17
+ pageCount,
18
+ siblings = 1,
19
+ label = "Pagination",
20
+ previousLabel = "Previous page",
21
+ nextLabel = "Next page",
22
+ class: className,
23
+ onPageChange,
24
+ ...rest
25
+ }: PaginationNavProps = $props();
26
+
27
+ type Slot = number | "ellipsis-start" | "ellipsis-end";
28
+
29
+ const classes = () => ["st-paginationNav", className].filter(Boolean).join(" ");
30
+
31
+ const slots = $derived.by<Slot[]>(() => {
32
+ const total = Math.max(0, Math.floor(pageCount));
33
+ if (total <= 0) return [];
34
+
35
+ const current = Math.min(Math.max(1, Math.floor(page)), total);
36
+ const sib = Math.max(0, Math.floor(siblings));
37
+
38
+ // Minimum: first, last, current, sib left, sib right, two ellipses
39
+ const minSlots = sib * 2 + 5;
40
+ if (total <= minSlots) {
41
+ return Array.from({ length: total }, (_, i) => i + 1) as Slot[];
42
+ }
43
+
44
+ const leftSibling = Math.max(current - sib, 1);
45
+ const rightSibling = Math.min(current + sib, total);
46
+ const showLeftEllipsis = leftSibling > 2;
47
+ const showRightEllipsis = rightSibling < total - 1;
48
+
49
+ const result: Slot[] = [];
50
+
51
+ if (!showLeftEllipsis && showRightEllipsis) {
52
+ const leftItemCount = 3 + sib * 2;
53
+ for (let i = 1; i <= leftItemCount; i += 1) result.push(i);
54
+ result.push("ellipsis-end");
55
+ result.push(total);
56
+ } else if (showLeftEllipsis && !showRightEllipsis) {
57
+ result.push(1);
58
+ result.push("ellipsis-start");
59
+ const rightItemCount = 3 + sib * 2;
60
+ for (let i = total - rightItemCount + 1; i <= total; i += 1) result.push(i);
61
+ } else if (showLeftEllipsis && showRightEllipsis) {
62
+ result.push(1);
63
+ result.push("ellipsis-start");
64
+ for (let i = leftSibling; i <= rightSibling; i += 1) result.push(i);
65
+ result.push("ellipsis-end");
66
+ result.push(total);
67
+ } else {
68
+ for (let i = 1; i <= total; i += 1) result.push(i);
69
+ }
70
+
71
+ return result;
72
+ });
73
+
74
+ function go(target: number) {
75
+ const total = Math.max(0, Math.floor(pageCount));
76
+ if (target < 1 || target > total || target === page) return;
77
+ page = target;
78
+ onPageChange?.(target);
79
+ }
80
+ </script>
81
+
82
+ <nav {...rest} class={classes()} aria-label={label}>
83
+ <ul class="st-paginationNav__list">
84
+ <li>
85
+ <button
86
+ type="button"
87
+ class="st-paginationNav__nav"
88
+ aria-label={previousLabel}
89
+ disabled={page <= 1 || pageCount <= 0}
90
+ onclick={() => go(page - 1)}
91
+ >
92
+ <svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true" focusable="false">
93
+ <path
94
+ d="M10 3 5 8l5 5"
95
+ fill="none"
96
+ stroke="currentColor"
97
+ stroke-width="1.6"
98
+ stroke-linecap="round"
99
+ stroke-linejoin="round"
100
+ />
101
+ </svg>
102
+ </button>
103
+ </li>
104
+ {#each slots as slot, index (typeof slot === "number" ? `p-${slot}` : `${slot}-${index}`)}
105
+ <li>
106
+ {#if slot === "ellipsis-start" || slot === "ellipsis-end"}
107
+ <span class="st-paginationNav__ellipsis" aria-hidden="true">…</span>
108
+ {:else}
109
+ <button
110
+ type="button"
111
+ class="st-paginationNav__page"
112
+ class:st-paginationNav__page--active={slot === page}
113
+ aria-label={`Page ${slot}`}
114
+ aria-current={slot === page ? "page" : undefined}
115
+ onclick={() => go(slot)}
116
+ >
117
+ {slot}
118
+ </button>
119
+ {/if}
120
+ </li>
121
+ {/each}
122
+ <li>
123
+ <button
124
+ type="button"
125
+ class="st-paginationNav__nav"
126
+ aria-label={nextLabel}
127
+ disabled={page >= pageCount || pageCount <= 0}
128
+ onclick={() => go(page + 1)}
129
+ >
130
+ <svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true" focusable="false">
131
+ <path
132
+ d="M6 3l5 5-5 5"
133
+ fill="none"
134
+ stroke="currentColor"
135
+ stroke-width="1.6"
136
+ stroke-linecap="round"
137
+ stroke-linejoin="round"
138
+ />
139
+ </svg>
140
+ </button>
141
+ </li>
142
+ </ul>
143
+ </nav>
144
+
145
+ <style>
146
+ .st-paginationNav {
147
+ color: var(--st-component-paginationNav-text, var(--st-semantic-text-primary));
148
+ display: inline-block;
149
+ }
150
+
151
+ .st-paginationNav__list {
152
+ align-items: center;
153
+ display: flex;
154
+ flex-wrap: wrap;
155
+ gap: var(--st-spacing-1, 0.25rem);
156
+ list-style: none;
157
+ margin: 0;
158
+ padding: 0;
159
+ }
160
+
161
+ .st-paginationNav__page,
162
+ .st-paginationNav__nav {
163
+ align-items: center;
164
+ background: var(--st-component-paginationNav-background, var(--st-semantic-surface-default));
165
+ border: 1px solid var(--st-component-paginationNav-border, var(--st-semantic-border-subtle));
166
+ border-radius: var(--st-component-paginationNav-radius, 0.375rem);
167
+ color: var(--st-component-paginationNav-text, var(--st-semantic-text-primary));
168
+ cursor: pointer;
169
+ display: inline-flex;
170
+ font: inherit;
171
+ font-size: 0.875rem;
172
+ height: 2.25rem;
173
+ justify-content: center;
174
+ min-width: 2.25rem;
175
+ padding: 0 0.5rem;
176
+ }
177
+
178
+ .st-paginationNav__page:hover:not(:disabled),
179
+ .st-paginationNav__nav:hover:not(:disabled) {
180
+ background: var(
181
+ --st-component-paginationNav-hoverBackground,
182
+ var(--st-semantic-surface-subtle)
183
+ );
184
+ }
185
+
186
+ .st-paginationNav__page:focus-visible,
187
+ .st-paginationNav__nav:focus-visible {
188
+ border-color: var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
189
+ box-shadow: 0 0 0 2px var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
190
+ outline: none;
191
+ }
192
+
193
+ .st-paginationNav__page--active {
194
+ background: var(--st-component-paginationNav-activeBackground, var(--st-semantic-action-primary));
195
+ border-color: var(--st-component-paginationNav-activeBackground, var(--st-semantic-action-primary));
196
+ color: var(--st-component-paginationNav-activeText, var(--st-semantic-action-primaryText));
197
+ }
198
+
199
+ .st-paginationNav__page--active:hover {
200
+ background: var(--st-component-paginationNav-activeBackground, var(--st-semantic-action-primary));
201
+ }
202
+
203
+ .st-paginationNav__page:disabled,
204
+ .st-paginationNav__nav:disabled {
205
+ color: var(--st-component-paginationNav-disabledText, var(--st-semantic-text-muted));
206
+ cursor: not-allowed;
207
+ opacity: 0.6;
208
+ }
209
+
210
+ .st-paginationNav__ellipsis {
211
+ align-items: center;
212
+ color: var(--st-component-paginationNav-ellipsisText, var(--st-semantic-text-muted));
213
+ display: inline-flex;
214
+ height: 2.25rem;
215
+ justify-content: center;
216
+ min-width: 2.25rem;
217
+ padding: 0 0.25rem;
218
+ }
219
+ </style>
package/dist/PaginationNav.svelte.d.ts ADDED
@@ -0,0 +1,15 @@
1
+ import type { HTMLAttributes } from "svelte/elements";
2
+ type PaginationNavProps = Omit<HTMLAttributes<HTMLElement>, "class"> & {
3
+ page: number;
4
+ pageCount: number;
5
+ siblings?: number;
6
+ label?: string;
7
+ previousLabel?: string;
8
+ nextLabel?: string;
9
+ class?: string;
10
+ onPageChange?: (page: number) => void;
11
+ };
12
+ declare const PaginationNav: import("svelte").Component<PaginationNavProps, {}, "page">;
13
+ type PaginationNav = ReturnType<typeof PaginationNav>;
14
+ export default PaginationNav;
15
+ //# sourceMappingURL=PaginationNav.svelte.d.ts.map
package/dist/PaginationNav.svelte.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"PaginationNav.svelte.d.ts","sourceRoot":"","sources":["../src/lib/PaginationNav.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,kBAAkB,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,GAAG;IACrE,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC,CAAC;AA2GJ,QAAA,MAAM,aAAa,4DAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
package/dist/ProgressIndicator.svelte ADDED
@@ -0,0 +1,283 @@
1
+ <script lang="ts" module>
2
+ export type ProgressIndicatorStatus =
3
+ | "complete"
4
+ | "current"
5
+ | "upcoming"
6
+ | "invalid"
7
+ | "disabled";
8
+
9
+ export interface ProgressIndicatorItem {
10
+ value: string;
11
+ label: string;
12
+ description?: string;
13
+ status?: ProgressIndicatorStatus;
14
+ }
15
+ </script>
16
+
17
+ <script lang="ts">
18
+ import type { HTMLAttributes } from "svelte/elements";
19
+
20
+ type ProgressIndicatorProps = Omit<HTMLAttributes<HTMLOListElement>, "class"> & {
21
+ items: ProgressIndicatorItem[];
22
+ vertical?: boolean;
23
+ label?: string;
24
+ class?: string;
25
+ };
26
+
27
+ let {
28
+ items,
29
+ vertical = false,
30
+ label = "Progress",
31
+ class: className,
32
+ ...rest
33
+ }: ProgressIndicatorProps = $props();
34
+
35
+ const classes = () =>
36
+ [
37
+ "st-progressIndicator",
38
+ vertical ? "st-progressIndicator--vertical" : "st-progressIndicator--horizontal",
39
+ className
40
+ ]
41
+ .filter(Boolean)
42
+ .join(" ");
43
+
44
+ const resolvedStatus = (item: ProgressIndicatorItem): ProgressIndicatorStatus =>
45
+ item.status ?? "upcoming";
46
+ </script>
47
+
48
+ <ol {...rest} class={classes()} aria-label={label}>
49
+ {#each items as item, index (item.value)}
50
+ {@const status = resolvedStatus(item)}
51
+ {@const isLast = index === items.length - 1}
52
+ <li
53
+ class={["st-progressIndicator__step", `st-progressIndicator__step--${status}`].join(" ")}
54
+ aria-current={status === "current" ? "step" : undefined}
55
+ >
56
+ <span class="st-progressIndicator__indicator" aria-hidden="true">
57
+ <span class="st-progressIndicator__circle">
58
+ {#if status === "complete"}
59
+ <svg viewBox="0 0 16 16" width="14" height="14" focusable="false">
60
+ <path
61
+ d="m3 8 3.5 3.5L13 5"
62
+ fill="none"
63
+ stroke="currentColor"
64
+ stroke-width="1.6"
65
+ stroke-linecap="round"
66
+ stroke-linejoin="round"
67
+ />
68
+ </svg>
69
+ {:else if status === "invalid"}
70
+ <svg viewBox="0 0 16 16" width="14" height="14" focusable="false">
71
+ <path
72
+ d="M4 4l8 8M12 4l-8 8"
73
+ fill="none"
74
+ stroke="currentColor"
75
+ stroke-width="1.6"
76
+ stroke-linecap="round"
77
+ />
78
+ </svg>
79
+ {:else if status === "current"}
80
+ <span class="st-progressIndicator__dot"></span>
81
+ {:else}
82
+ <span class="st-progressIndicator__index">{index + 1}</span>
83
+ {/if}
84
+ </span>
85
+ {#if !isLast}
86
+ <span class="st-progressIndicator__connector"></span>
87
+ {/if}
88
+ </span>
89
+ <span class="st-progressIndicator__text">
90
+ <span class="st-progressIndicator__label">{item.label}</span>
91
+ {#if item.description}
92
+ <span class="st-progressIndicator__description">{item.description}</span>
93
+ {/if}
94
+ </span>
95
+ </li>
96
+ {/each}
97
+ </ol>
98
+
99
+ <style>
100
+ .st-progressIndicator {
101
+ color: var(--st-component-progressIndicator-text, var(--st-semantic-text-primary));
102
+ display: flex;
103
+ list-style: none;
104
+ margin: 0;
105
+ padding: 0;
106
+ }
107
+
108
+ .st-progressIndicator--horizontal {
109
+ align-items: flex-start;
110
+ flex-direction: row;
111
+ gap: 0;
112
+ }
113
+
114
+ .st-progressIndicator--vertical {
115
+ flex-direction: column;
116
+ gap: 0;
117
+ }
118
+
119
+ .st-progressIndicator__step {
120
+ display: flex;
121
+ flex: 1 1 0;
122
+ gap: var(--st-spacing-2, 0.5rem);
123
+ min-width: 0;
124
+ position: relative;
125
+ }
126
+
127
+ .st-progressIndicator--horizontal .st-progressIndicator__step {
128
+ align-items: flex-start;
129
+ flex-direction: column;
130
+ }
131
+
132
+ .st-progressIndicator--vertical .st-progressIndicator__step {
133
+ align-items: flex-start;
134
+ flex: 0 0 auto;
135
+ flex-direction: row;
136
+ }
137
+
138
+ .st-progressIndicator__indicator {
139
+ align-items: center;
140
+ color: var(--st-component-progressIndicator-iconText, var(--st-semantic-text-secondary));
141
+ display: flex;
142
+ flex: 0 0 auto;
143
+ justify-content: center;
144
+ position: relative;
145
+ }
146
+
147
+ .st-progressIndicator--horizontal .st-progressIndicator__indicator {
148
+ flex-direction: row;
149
+ width: 100%;
150
+ }
151
+
152
+ .st-progressIndicator--vertical .st-progressIndicator__indicator {
153
+ flex-direction: column;
154
+ min-height: 3rem;
155
+ }
156
+
157
+ .st-progressIndicator__circle {
158
+ align-items: center;
159
+ background: var(--st-component-progressIndicator-circleBackground, var(--st-semantic-surface-default));
160
+ border: 1.5px solid
161
+ var(--st-component-progressIndicator-circleBorder, var(--st-semantic-border-strong));
162
+ border-radius: 50%;
163
+ color: var(--st-component-progressIndicator-iconText, var(--st-semantic-text-secondary));
164
+ display: inline-flex;
165
+ flex: 0 0 auto;
166
+ font-size: 0.75rem;
167
+ font-weight: 600;
168
+ height: 1.5rem;
169
+ justify-content: center;
170
+ line-height: 1;
171
+ width: 1.5rem;
172
+ z-index: 1;
173
+ }
174
+
175
+ .st-progressIndicator__index {
176
+ line-height: 1;
177
+ }
178
+
179
+ .st-progressIndicator__dot {
180
+ background: currentColor;
181
+ border-radius: 50%;
182
+ height: 0.5rem;
183
+ width: 0.5rem;
184
+ }
185
+
186
+ .st-progressIndicator__connector {
187
+ background: var(--st-component-progressIndicator-connector, var(--st-semantic-border-subtle));
188
+ flex: 1 1 auto;
189
+ }
190
+
191
+ .st-progressIndicator--horizontal .st-progressIndicator__connector {
192
+ height: 2px;
193
+ margin-top: calc(0.75rem - 1px);
194
+ }
195
+
196
+ .st-progressIndicator--vertical .st-progressIndicator__connector {
197
+ margin-left: calc(0.75rem - 1px);
198
+ min-height: 1.5rem;
199
+ width: 2px;
200
+ }
201
+
202
+ .st-progressIndicator__text {
203
+ display: grid;
204
+ gap: 0.125rem;
205
+ min-width: 0;
206
+ }
207
+
208
+ .st-progressIndicator--horizontal .st-progressIndicator__text {
209
+ padding-right: var(--st-spacing-3, 0.75rem);
210
+ padding-top: var(--st-spacing-2, 0.5rem);
211
+ }
212
+
213
+ .st-progressIndicator--vertical .st-progressIndicator__text {
214
+ padding-bottom: var(--st-spacing-3, 0.75rem);
215
+ }
216
+
217
+ .st-progressIndicator__label {
218
+ color: var(--st-component-progressIndicator-text, var(--st-semantic-text-primary));
219
+ font-size: 0.875rem;
220
+ font-weight: 600;
221
+ }
222
+
223
+ .st-progressIndicator__description {
224
+ color: var(--st-component-progressIndicator-descriptionText, var(--st-semantic-text-secondary));
225
+ font-size: 0.8125rem;
226
+ }
227
+
228
+ /* Status: complete */
229
+ .st-progressIndicator__step--complete .st-progressIndicator__circle {
230
+ background: var(
231
+ --st-component-progressIndicator-completeBackground,
232
+ var(--st-semantic-action-primary)
233
+ );
234
+ border-color: var(
235
+ --st-component-progressIndicator-completeBackground,
236
+ var(--st-semantic-action-primary)
237
+ );
238
+ color: var(--st-component-progressIndicator-completeIcon, var(--st-semantic-action-primaryText));
239
+ }
240
+
241
+ .st-progressIndicator__step--complete .st-progressIndicator__connector {
242
+ background: var(
243
+ --st-component-progressIndicator-completeConnector,
244
+ var(--st-semantic-action-primary)
245
+ );
246
+ }
247
+
248
+ /* Status: current */
249
+ .st-progressIndicator__step--current .st-progressIndicator__circle {
250
+ border-color: var(
251
+ --st-component-progressIndicator-currentBorder,
252
+ var(--st-semantic-action-primary)
253
+ );
254
+ color: var(--st-component-progressIndicator-currentText, var(--st-semantic-action-primary));
255
+ }
256
+
257
+ .st-progressIndicator__step--current .st-progressIndicator__label {
258
+ color: var(--st-component-progressIndicator-currentText, var(--st-semantic-action-primary));
259
+ }
260
+
261
+ /* Status: invalid */
262
+ .st-progressIndicator__step--invalid .st-progressIndicator__circle {
263
+ border-color: var(
264
+ --st-component-progressIndicator-invalidBorder,
265
+ var(--st-semantic-feedback-error)
266
+ );
267
+ color: var(--st-component-progressIndicator-invalidText, var(--st-semantic-feedback-error));
268
+ }
269
+
270
+ .st-progressIndicator__step--invalid .st-progressIndicator__label {
271
+ color: var(--st-component-progressIndicator-invalidText, var(--st-semantic-feedback-error));
272
+ }
273
+
274
+ /* Status: disabled */
275
+ .st-progressIndicator__step--disabled {
276
+ opacity: 0.55;
277
+ }
278
+
279
+ .st-progressIndicator__step--disabled .st-progressIndicator__label,
280
+ .st-progressIndicator__step--disabled .st-progressIndicator__description {
281
+ color: var(--st-component-progressIndicator-disabledText, var(--st-semantic-text-muted));
282
+ }
283
+ </style>
package/dist/ProgressIndicator.svelte.d.ts ADDED
@@ -0,0 +1,18 @@
1
+ export type ProgressIndicatorStatus = "complete" | "current" | "upcoming" | "invalid" | "disabled";
2
+ export interface ProgressIndicatorItem {
3
+ value: string;
4
+ label: string;
5
+ description?: string;
6
+ status?: ProgressIndicatorStatus;
7
+ }
8
+ import type { HTMLAttributes } from "svelte/elements";
9
+ type ProgressIndicatorProps = Omit<HTMLAttributes<HTMLOListElement>, "class"> & {
10
+ items: ProgressIndicatorItem[];
11
+ vertical?: boolean;
12
+ label?: string;
13
+ class?: string;
14
+ };
15
+ declare const ProgressIndicator: import("svelte").Component<ProgressIndicatorProps, {}, "">;
16
+ type ProgressIndicator = ReturnType<typeof ProgressIndicator>;
17
+ export default ProgressIndicator;
18
+ //# sourceMappingURL=ProgressIndicator.svelte.d.ts.map
package/dist/ProgressIndicator.svelte.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ProgressIndicator.svelte.d.ts","sourceRoot":"","sources":["../src/lib/ProgressIndicator.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,MAAM,uBAAuB,GAC/B,UAAU,GACV,SAAS,GACT,UAAU,GACV,SAAS,GACT,UAAU,CAAC;AAEf,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,uBAAuB,CAAC;CAClC;AAGH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,sBAAsB,GAAG,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAAE,OAAO,CAAC,GAAG;IAC9E,KAAK,EAAE,qBAAqB,EAAE,CAAC;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAmEJ,QAAA,MAAM,iBAAiB,4DAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}
package/dist/index.d.ts CHANGED
@@ -14,6 +14,9 @@ export { default as Drawer } from "./Drawer.svelte";
14
14
  export { default as Dropdown } from "./Dropdown.svelte";
15
15
  export { default as EmptyState } from "./EmptyState.svelte";
16
16
  export { default as FileUploader } from "./FileUploader.svelte";
17
+ export { default as Form } from "./Form.svelte";
18
+ export { default as FormGroup } from "./FormGroup.svelte";
19
+ export { default as Header } from "./Header.svelte";
17
20
  export { default as InlineLoading } from "./InlineLoading.svelte";
18
21
  export { default as Input } from "./Input.svelte";
19
22
  export { default as Link } from "./Link.svelte";
@@ -22,10 +25,13 @@ export { default as Menu } from "./Menu.svelte";
22
25
  export { default as Modal } from "./Modal.svelte";
23
26
  export { default as MultiSelect } from "./MultiSelect.svelte";
24
27
  export { default as NumberInput } from "./NumberInput.svelte";
28
+ export { default as OverflowMenu } from "./OverflowMenu.svelte";
25
29
  export { default as Pagination } from "./Pagination.svelte";
30
+ export { default as PaginationNav } from "./PaginationNav.svelte";
26
31
  export { default as PasswordInput } from "./PasswordInput.svelte";
27
32
  export { default as Popover } from "./Popover.svelte";
28
33
  export { default as ProgressBar } from "./ProgressBar.svelte";
34
+ export { default as ProgressIndicator } from "./ProgressIndicator.svelte";
29
35
  export { default as Radio } from "./Radio.svelte";
30
36
  export { default as Search } from "./Search.svelte";
31
37
  export { default as Select } from "./Select.svelte";
@@ -51,6 +57,8 @@ export type { DropdownOption } from "./Dropdown.svelte";
51
57
  export type { FileUploadItem, FileUploadStatus } from "./FileUploader.svelte";
52
58
  export type { MenuItem } from "./Menu.svelte";
53
59
  export type { MultiSelectOption } from "./MultiSelect.svelte";
60
+ export type { OverflowMenuItem } from "./OverflowMenu.svelte";
61
+ export type { ProgressIndicatorItem, ProgressIndicatorStatus } from "./ProgressIndicator.svelte";
54
62
  export type { SideNavItem } from "./SideNav.svelte";
55
63
  export type { TableColumn, TableRow } from "./Table.svelte";
56
64
  export type { TabItem } from "./Tabs.svelte";
package/dist/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/lib/index.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/lib/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACtD,YAAY,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACxD,YAAY,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAC1D,YAAY,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACxD,YAAY,EACV,eAAe,EACf,YAAY,EACZ,mBAAmB,EACnB,aAAa,EACd,MAAM,oBAAoB,CAAC;AAC5B,YAAY,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC3D,YAAY,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACxD,YAAY,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAC9E,YAAY,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAC9C,YAAY,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAC9D,YAAY,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAC9D,YAAY,EACV,qBAAqB,EACrB,uBAAuB,EACxB,MAAM,4BAA4B,CAAC;AACpC,YAAY,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AACpD,YAAY,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC5D,YAAY,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC"}
package/dist/index.js CHANGED
@@ -14,6 +14,9 @@ export { default as Drawer } from "./Drawer.svelte";
14
14
  export { default as Dropdown } from "./Dropdown.svelte";
15
15
  export { default as EmptyState } from "./EmptyState.svelte";
16
16
  export { default as FileUploader } from "./FileUploader.svelte";
17
+ export { default as Form } from "./Form.svelte";
18
+ export { default as FormGroup } from "./FormGroup.svelte";
19
+ export { default as Header } from "./Header.svelte";
17
20
  export { default as InlineLoading } from "./InlineLoading.svelte";
18
21
  export { default as Input } from "./Input.svelte";
19
22
  export { default as Link } from "./Link.svelte";
@@ -22,10 +25,13 @@ export { default as Menu } from "./Menu.svelte";
22
25
  export { default as Modal } from "./Modal.svelte";
23
26
  export { default as MultiSelect } from "./MultiSelect.svelte";
24
27
  export { default as NumberInput } from "./NumberInput.svelte";
28
+ export { default as OverflowMenu } from "./OverflowMenu.svelte";
25
29
  export { default as Pagination } from "./Pagination.svelte";
30
+ export { default as PaginationNav } from "./PaginationNav.svelte";
26
31
  export { default as PasswordInput } from "./PasswordInput.svelte";
27
32
  export { default as Popover } from "./Popover.svelte";
28
33
  export { default as ProgressBar } from "./ProgressBar.svelte";
34
+ export { default as ProgressIndicator } from "./ProgressIndicator.svelte";
29
35
  export { default as Radio } from "./Radio.svelte";
30
36
  export { default as Search } from "./Search.svelte";
31
37
  export { default as Select } from "./Select.svelte";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sentropic/design-system-svelte",
3
- "version": "0.5.0",
3
+ "version": "0.6.0",
4
4
  "type": "module",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -26,7 +26,7 @@
26
26
  "dist"
27
27
  ],
28
28
  "dependencies": {
29
- "@sentropic/design-system-themes": "0.5.0"
29
+ "@sentropic/design-system-themes": "0.6.0"
30
30
  },
31
31
  "peerDependencies": {
32
32
  "svelte": "^5.53.2"