@salmexio/ui 0.1.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 (82) hide show
  1. package/README.md +7 -0
  2. package/dist/app.html +11 -0
  3. package/dist/feedback/Alert/Alert.svelte +538 -0
  4. package/dist/feedback/Alert/Alert.svelte.d.ts +30 -0
  5. package/dist/feedback/Alert/Alert.svelte.d.ts.map +1 -0
  6. package/dist/feedback/Alert/index.d.ts +2 -0
  7. package/dist/feedback/Alert/index.d.ts.map +1 -0
  8. package/dist/feedback/Alert/index.js +1 -0
  9. package/dist/feedback/Spinner/Spinner.svelte +421 -0
  10. package/dist/feedback/Spinner/Spinner.svelte.d.ts +25 -0
  11. package/dist/feedback/Spinner/Spinner.svelte.d.ts.map +1 -0
  12. package/dist/feedback/Spinner/index.d.ts +2 -0
  13. package/dist/feedback/Spinner/index.d.ts.map +1 -0
  14. package/dist/feedback/Spinner/index.js +1 -0
  15. package/dist/feedback/index.d.ts +3 -0
  16. package/dist/feedback/index.d.ts.map +1 -0
  17. package/dist/feedback/index.js +2 -0
  18. package/dist/forms/TextInput/TextInput.svelte +576 -0
  19. package/dist/forms/TextInput/TextInput.svelte.d.ts +50 -0
  20. package/dist/forms/TextInput/TextInput.svelte.d.ts.map +1 -0
  21. package/dist/forms/TextInput/index.d.ts +2 -0
  22. package/dist/forms/TextInput/index.d.ts.map +1 -0
  23. package/dist/forms/TextInput/index.js +1 -0
  24. package/dist/forms/index.d.ts +2 -0
  25. package/dist/forms/index.d.ts.map +1 -0
  26. package/dist/forms/index.js +1 -0
  27. package/dist/index.d.ts +7 -0
  28. package/dist/index.d.ts.map +1 -0
  29. package/dist/index.js +6 -0
  30. package/dist/layout/Card/Card.svelte +283 -0
  31. package/dist/layout/Card/Card.svelte.d.ts +35 -0
  32. package/dist/layout/Card/Card.svelte.d.ts.map +1 -0
  33. package/dist/layout/Card/index.d.ts +2 -0
  34. package/dist/layout/Card/index.d.ts.map +1 -0
  35. package/dist/layout/Card/index.js +1 -0
  36. package/dist/layout/Container/Container.svelte +202 -0
  37. package/dist/layout/Container/Container.svelte.d.ts +25 -0
  38. package/dist/layout/Container/Container.svelte.d.ts.map +1 -0
  39. package/dist/layout/Container/index.d.ts +2 -0
  40. package/dist/layout/Container/index.d.ts.map +1 -0
  41. package/dist/layout/Container/index.js +1 -0
  42. package/dist/layout/index.d.ts +3 -0
  43. package/dist/layout/index.d.ts.map +1 -0
  44. package/dist/layout/index.js +2 -0
  45. package/dist/navigation/Tabs/Tabs.svelte +448 -0
  46. package/dist/navigation/Tabs/Tabs.svelte.d.ts +59 -0
  47. package/dist/navigation/Tabs/Tabs.svelte.d.ts.map +1 -0
  48. package/dist/navigation/Tabs/index.d.ts +3 -0
  49. package/dist/navigation/Tabs/index.d.ts.map +1 -0
  50. package/dist/navigation/Tabs/index.js +1 -0
  51. package/dist/navigation/index.d.ts +3 -0
  52. package/dist/navigation/index.d.ts.map +1 -0
  53. package/dist/navigation/index.js +1 -0
  54. package/dist/primitives/Badge/Badge.svelte +351 -0
  55. package/dist/primitives/Badge/Badge.svelte.d.ts +35 -0
  56. package/dist/primitives/Badge/Badge.svelte.d.ts.map +1 -0
  57. package/dist/primitives/Badge/index.d.ts +2 -0
  58. package/dist/primitives/Badge/index.d.ts.map +1 -0
  59. package/dist/primitives/Badge/index.js +1 -0
  60. package/dist/primitives/Button/Button.svelte +383 -0
  61. package/dist/primitives/Button/Button.svelte.d.ts +47 -0
  62. package/dist/primitives/Button/Button.svelte.d.ts.map +1 -0
  63. package/dist/primitives/Button/index.d.ts +2 -0
  64. package/dist/primitives/Button/index.d.ts.map +1 -0
  65. package/dist/primitives/Button/index.js +1 -0
  66. package/dist/primitives/index.d.ts +3 -0
  67. package/dist/primitives/index.d.ts.map +1 -0
  68. package/dist/primitives/index.js +2 -0
  69. package/dist/routes/+layout.svelte +5 -0
  70. package/dist/routes/+layout.svelte.d.ts +6 -0
  71. package/dist/routes/+layout.svelte.d.ts.map +1 -0
  72. package/dist/routes/+page.svelte +6 -0
  73. package/dist/routes/+page.svelte.d.ts +27 -0
  74. package/dist/routes/+page.svelte.d.ts.map +1 -0
  75. package/dist/styles/tokens.css +340 -0
  76. package/dist/utils/cn.d.ts +9 -0
  77. package/dist/utils/cn.d.ts.map +1 -0
  78. package/dist/utils/cn.js +29 -0
  79. package/dist/utils/index.d.ts +2 -0
  80. package/dist/utils/index.d.ts.map +1 -0
  81. package/dist/utils/index.js +1 -0
  82. package/package.json +84 -0
package/README.md ADDED
@@ -0,0 +1,7 @@
1
+ # @salmexio/ui
2
+
3
+ Experimental Svelte 5 UI component library. Use at your own risk.
4
+
5
+ **Install:** `pnpm add @salmexio/ui` or `npm i @salmexio/ui`
6
+
7
+ UNLICENSED.
package/dist/app.html ADDED
@@ -0,0 +1,11 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
6
+ %sveltekit.head%
7
+ </head>
8
+ <body>
9
+ <div style="display: contents">%sveltekit.body%</div>
10
+ </body>
11
+ </html>
package/dist/feedback/Alert/Alert.svelte ADDED
@@ -0,0 +1,538 @@
1
+ <!--
2
+ @component Alert
3
+
4
+ Win2K × Basquiat — Bold message banner. Left accent border, high contrast.
5
+ Dismissible, expandable, optional title; role="alert" for errors.
6
+ -->
7
+ <script lang="ts">
8
+ import type { Snippet } from 'svelte';
9
+ import { cn } from '../../utils/cn.js';
10
+
11
+ type AlertType = 'success' | 'error' | 'warning' | 'info' | 'neutral';
12
+ type AlertVariant = 'standard' | 'slim' | 'bordered';
13
+ type HeadingLevel = 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p';
14
+
15
+ interface Props {
16
+ type?: AlertType;
17
+ variant?: AlertVariant;
18
+ title?: string;
19
+ headingLevel?: HeadingLevel;
20
+ dismissible?: boolean;
21
+ showIcon?: boolean;
22
+ expandable?: boolean;
23
+ defaultExpanded?: boolean;
24
+ class?: string;
25
+ children?: Snippet;
26
+ actions?: Snippet;
27
+ onclose?: () => void;
28
+ closeBtnAriaLabel?: string;
29
+ id?: string;
30
+ }
31
+
32
+ let {
33
+ type = 'info',
34
+ variant = 'standard',
35
+ title = '',
36
+ headingLevel = 'h3',
37
+ dismissible = false,
38
+ showIcon = true,
39
+ expandable = false,
40
+ defaultExpanded = true,
41
+ class: className = '',
42
+ children,
43
+ actions,
44
+ onclose,
45
+ closeBtnAriaLabel,
46
+ id
47
+ }: Props = $props();
48
+
49
+ let isExpanded = $state(true);
50
+
51
+ $effect(() => {
52
+ isExpanded = defaultExpanded;
53
+ });
54
+
55
+ const generatedId = `alert-${Math.random().toString(36).slice(2, 9)}`;
56
+ const alertId = $derived(id ?? generatedId);
57
+ const contentId = $derived(`${alertId}-content`);
58
+ const titleId = $derived(`${alertId}-title`);
59
+
60
+ const ariaRole = $derived(type === 'error' || type === 'warning' ? 'alert' : 'status');
61
+ const ariaLive = $derived(type === 'error' ? 'assertive' : 'polite');
62
+ const closeLabel = $derived(closeBtnAriaLabel ?? `Close ${title || type} notification`);
63
+
64
+ function handleDismiss() {
65
+ onclose?.();
66
+ }
67
+
68
+ function toggleExpanded() {
69
+ isExpanded = !isExpanded;
70
+ }
71
+ </script>
72
+
73
+ <div
74
+ {id}
75
+ class={cn(
76
+ 'salmex-alert',
77
+ `salmex-alert-${variant}`,
78
+ `salmex-alert-${type}`,
79
+ expandable && 'salmex-alert-expandable',
80
+ expandable && isExpanded && 'salmex-alert-expanded',
81
+ className
82
+ )}
83
+ role={ariaRole}
84
+ aria-live={ariaLive}
85
+ aria-labelledby={title ? titleId : undefined}
86
+ >
87
+ {#if showIcon}
88
+ <span class="salmex-alert-icon" aria-hidden="true">
89
+ {#if type === 'success'}
90
+ <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
91
+ {:else if type === 'error'}
92
+ <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
93
+ {:else if type === 'warning'}
94
+ <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
95
+ {:else}
96
+ <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
97
+ {/if}
98
+ </span>
99
+ {/if}
100
+
101
+ <div class="salmex-alert-content">
102
+ {#if title}
103
+ {#if expandable}
104
+ <button
105
+ type="button"
106
+ class="salmex-alert-title-btn"
107
+ onclick={toggleExpanded}
108
+ aria-expanded={isExpanded}
109
+ aria-controls={contentId}
110
+ >
111
+ <svelte:element this={headingLevel} id={titleId} class="salmex-alert-title">
112
+ {title}
113
+ </svelte:element>
114
+ <span class="salmex-alert-expand-icon" aria-hidden="true">
115
+ {#if isExpanded}
116
+ &#9660;
117
+ {:else}
118
+ &#9654;
119
+ {/if}
120
+ </span>
121
+ </button>
122
+ {:else}
123
+ <svelte:element this={headingLevel} id={titleId} class="salmex-alert-title">
124
+ {title}
125
+ </svelte:element>
126
+ {/if}
127
+ {/if}
128
+
129
+ {#if children}
130
+ <div
131
+ id={contentId}
132
+ class="salmex-alert-body"
133
+ class:salmex-alert-body-hidden={expandable && !isExpanded}
134
+ aria-hidden={expandable && !isExpanded}
135
+ >
136
+ {@render children()}
137
+ </div>
138
+ {/if}
139
+
140
+ {#if actions && (!expandable || isExpanded)}
141
+ <div class="salmex-alert-actions">
142
+ {@render actions()}
143
+ </div>
144
+ {/if}
145
+ </div>
146
+
147
+ {#if dismissible}
148
+ <button
149
+ type="button"
150
+ class="salmex-alert-dismiss"
151
+ onclick={handleDismiss}
152
+ aria-label={closeLabel}
153
+ >
154
+ <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
155
+ </button>
156
+ {/if}
157
+ </div>
158
+
159
+ <style>
160
+ /* Win2K × Basquiat: panel/chrome — canvas surface, bold 3px border, flat shadow */
161
+ .salmex-alert {
162
+ display: flex;
163
+ gap: var(--salmex-space-3);
164
+ padding: var(--salmex-space-4);
165
+ border: 3px solid transparent;
166
+ font-family: var(--salmex-font-system);
167
+ transition: box-shadow var(--salmex-transition-fast);
168
+ border-radius: var(--salmex-radius-none);
169
+ /* Inner depth + flat outer shadow */
170
+ box-shadow:
171
+ inset 2px 2px 0 rgb(var(--salmex-button-highlight)),
172
+ inset -2px -2px 0 rgb(var(--salmex-button-shadow)),
173
+ var(--salmex-shadow-md);
174
+ background: rgb(var(--salmex-window-surface));
175
+ }
176
+
177
+ .salmex-alert-standard {
178
+ border-radius: var(--salmex-radius-none);
179
+ }
180
+
181
+ .salmex-alert-slim {
182
+ padding: var(--salmex-space-2) var(--salmex-space-3);
183
+ gap: var(--salmex-space-2);
184
+ }
185
+
186
+ .salmex-alert-slim .salmex-alert-title {
187
+ font-size: var(--salmex-font-size-sm);
188
+ margin-bottom: 0;
189
+ }
190
+
191
+ .salmex-alert-slim .salmex-alert-body {
192
+ font-size: var(--salmex-font-size-xs);
193
+ }
194
+
195
+ .salmex-alert-bordered {
196
+ border-left-width: 6px;
197
+ /* Yellow accent stripe under title area for key types (Basquiat) */
198
+ border-top: 2px solid transparent;
199
+ }
200
+
201
+ .salmex-alert-icon {
202
+ flex-shrink: 0;
203
+ display: flex;
204
+ align-items: flex-start;
205
+ margin-top: 2px;
206
+ }
207
+
208
+ .salmex-alert-content {
209
+ flex: 1;
210
+ min-width: 0;
211
+ display: flex;
212
+ flex-direction: column;
213
+ }
214
+
215
+ .salmex-alert-title {
216
+ font-size: var(--salmex-font-size-md);
217
+ font-weight: 800;
218
+ line-height: 1.4;
219
+ margin: 0 0 var(--salmex-space-1);
220
+ text-transform: uppercase;
221
+ letter-spacing: 0.5px;
222
+ }
223
+
224
+ .salmex-alert-title:where(h2, h3, h4, h5, h6) {
225
+ font-size: inherit;
226
+ margin: inherit;
227
+ }
228
+
229
+ .salmex-alert-body {
230
+ font-size: var(--salmex-font-size-sm);
231
+ line-height: 1.55;
232
+ color: rgb(var(--salmex-text-secondary));
233
+ }
234
+
235
+ .salmex-alert-body-hidden {
236
+ display: none;
237
+ }
238
+
239
+ .salmex-alert-actions {
240
+ display: flex;
241
+ flex-wrap: wrap;
242
+ align-items: center;
243
+ gap: var(--salmex-space-2);
244
+ margin-top: var(--salmex-space-3);
245
+ }
246
+
247
+ .salmex-alert-title-btn {
248
+ display: flex;
249
+ align-items: center;
250
+ justify-content: space-between;
251
+ width: 100%;
252
+ gap: var(--salmex-space-2);
253
+ padding: 0;
254
+ margin: 0 0 var(--salmex-space-1);
255
+ background: none;
256
+ border: none;
257
+ cursor: pointer;
258
+ text-align: left;
259
+ color: inherit;
260
+ font: inherit;
261
+ }
262
+
263
+ .salmex-alert-title-btn:focus-visible {
264
+ outline: none;
265
+ box-shadow: 0 0 0 2px rgb(var(--salmex-midnight-black)), 0 0 0 5px rgb(var(--salmex-crown-yellow));
266
+ }
267
+
268
+ :global([data-theme='dark']) .salmex-alert-title-btn:focus-visible {
269
+ box-shadow: 0 0 0 3px rgb(var(--salmex-crown-yellow));
270
+ }
271
+
272
+ .salmex-alert-expand-icon {
273
+ flex-shrink: 0;
274
+ font-size: 0.75em;
275
+ opacity: 0.8;
276
+ }
277
+
278
+ /* Dismiss — 3D Win2K-style system button */
279
+ .salmex-alert-dismiss {
280
+ flex-shrink: 0;
281
+ display: flex;
282
+ align-items: center;
283
+ justify-content: center;
284
+ padding: var(--salmex-space-1);
285
+ margin: -2px -2px -2px 0;
286
+ border: 2px solid rgb(var(--salmex-border-dark));
287
+ background: rgb(var(--salmex-button-face));
288
+ color: rgb(var(--salmex-text-primary));
289
+ cursor: pointer;
290
+ transition: all var(--salmex-transition-fast);
291
+ box-shadow:
292
+ inset 2px 2px 0 rgb(var(--salmex-button-highlight)),
293
+ inset -2px -2px 0 rgb(var(--salmex-button-shadow)),
294
+ 1px 1px 0 rgb(0 0 0 / 0.2);
295
+ }
296
+
297
+ .salmex-alert-dismiss:hover {
298
+ background: rgb(var(--salmex-button-light));
299
+ color: rgb(var(--salmex-text-primary));
300
+ }
301
+
302
+ .salmex-alert-dismiss:active {
303
+ box-shadow:
304
+ inset -2px -2px 0 rgb(var(--salmex-button-highlight)),
305
+ inset 2px 2px 0 rgb(var(--salmex-button-shadow)),
306
+ 1px 1px 0 rgb(0 0 0 / 0.2);
307
+ transform: translate(1px, 1px);
308
+ }
309
+
310
+ .salmex-alert-dismiss:focus-visible {
311
+ outline: none;
312
+ box-shadow:
313
+ inset 2px 2px 0 rgb(var(--salmex-button-highlight)),
314
+ inset -2px -2px 0 rgb(var(--salmex-button-shadow)),
315
+ 0 0 0 2px rgb(var(--salmex-midnight-black)),
316
+ 0 0 0 5px rgb(var(--salmex-crown-yellow));
317
+ }
318
+
319
+ :global([data-theme='dark']) .salmex-alert-dismiss:focus-visible {
320
+ box-shadow:
321
+ inset 2px 2px 0 rgb(var(--salmex-button-highlight)),
322
+ inset -2px -2px 0 rgb(var(--salmex-button-shadow)),
323
+ 0 0 0 3px rgb(var(--salmex-crown-yellow));
324
+ }
325
+
326
+ /* Type colors — panel + left accent; canvas base, bold borders */
327
+ .salmex-alert-success {
328
+ background: rgb(var(--salmex-window-surface));
329
+ border-color: rgb(25 95 55);
330
+ }
331
+
332
+ .salmex-alert-success .salmex-alert-icon {
333
+ color: rgb(25 95 55);
334
+ }
335
+
336
+ .salmex-alert-success .salmex-alert-title {
337
+ color: rgb(25 95 55);
338
+ }
339
+
340
+ .salmex-alert-bordered.salmex-alert-success {
341
+ border-left-color: rgb(25 95 55);
342
+ border-top-color: rgb(var(--salmex-crown-yellow) / 0.5);
343
+ }
344
+
345
+ .salmex-alert-error {
346
+ background: rgb(var(--salmex-window-surface));
347
+ border-color: rgb(var(--salmex-street-red));
348
+ }
349
+
350
+ .salmex-alert-error .salmex-alert-icon {
351
+ color: rgb(var(--salmex-street-red));
352
+ }
353
+
354
+ .salmex-alert-error .salmex-alert-title {
355
+ color: rgb(165 30 35);
356
+ }
357
+
358
+ .salmex-alert-bordered.salmex-alert-error {
359
+ border-left-color: rgb(var(--salmex-street-red));
360
+ border-top-color: rgb(var(--salmex-crown-yellow) / 0.35);
361
+ }
362
+
363
+ .salmex-alert-warning {
364
+ background: rgb(var(--salmex-window-surface));
365
+ border-color: rgb(145 75 10);
366
+ }
367
+
368
+ .salmex-alert-warning .salmex-alert-icon {
369
+ color: rgb(145 75 10);
370
+ }
371
+
372
+ .salmex-alert-warning .salmex-alert-title {
373
+ color: rgb(145 75 10);
374
+ }
375
+
376
+ .salmex-alert-bordered.salmex-alert-warning {
377
+ border-left-color: rgb(145 75 10);
378
+ border-top-color: rgb(var(--salmex-spray-orange) / 0.4);
379
+ }
380
+
381
+ .salmex-alert-info {
382
+ background: rgb(var(--salmex-window-surface));
383
+ border-color: rgb(0 95 220);
384
+ }
385
+
386
+ .salmex-alert-info .salmex-alert-icon {
387
+ color: rgb(0 95 220);
388
+ }
389
+
390
+ .salmex-alert-info .salmex-alert-title {
391
+ color: rgb(0 95 220);
392
+ }
393
+
394
+ .salmex-alert-bordered.salmex-alert-info {
395
+ border-left-color: rgb(0 95 220);
396
+ border-top-color: rgb(var(--salmex-crown-yellow) / 0.4);
397
+ }
398
+
399
+ .salmex-alert-neutral {
400
+ background: rgb(var(--salmex-window-surface));
401
+ border-color: rgb(var(--salmex-border-dark));
402
+ }
403
+
404
+ .salmex-alert-neutral .salmex-alert-icon {
405
+ color: rgb(var(--salmex-text-secondary));
406
+ }
407
+
408
+ .salmex-alert-neutral .salmex-alert-title {
409
+ color: rgb(var(--salmex-text-primary));
410
+ }
411
+
412
+ .salmex-alert-bordered.salmex-alert-neutral {
413
+ border-left-color: rgb(var(--salmex-border-dark));
414
+ }
415
+
416
+ /* Dark theme — brighter colors for visibility */
417
+ :global([data-theme='dark']) .salmex-alert-error {
418
+ background: rgb(var(--salmex-street-red) / 0.12);
419
+ border-color: rgb(255 90 95);
420
+ }
421
+
422
+ :global([data-theme='dark']) .salmex-alert-error .salmex-alert-icon,
423
+ :global([data-theme='dark']) .salmex-alert-error .salmex-alert-title {
424
+ color: rgb(255 100 105);
425
+ }
426
+
427
+ :global([data-theme='dark']) .salmex-alert-bordered.salmex-alert-error {
428
+ border-left-color: rgb(255 90 95);
429
+ }
430
+
431
+ :global([data-theme='dark']) .salmex-alert-success {
432
+ background: rgb(var(--salmex-urban-green) / 0.15);
433
+ border-color: rgb(var(--salmex-urban-green));
434
+ }
435
+
436
+ :global([data-theme='dark']) .salmex-alert-success .salmex-alert-icon,
437
+ :global([data-theme='dark']) .salmex-alert-success .salmex-alert-title {
438
+ color: rgb(var(--salmex-urban-green));
439
+ }
440
+
441
+ :global([data-theme='dark']) .salmex-alert-bordered.salmex-alert-success {
442
+ border-left-color: rgb(var(--salmex-urban-green));
443
+ }
444
+
445
+ :global([data-theme='dark']) .salmex-alert-warning {
446
+ background: rgb(var(--salmex-spray-orange) / 0.15);
447
+ border-color: rgb(var(--salmex-spray-orange));
448
+ }
449
+
450
+ :global([data-theme='dark']) .salmex-alert-warning .salmex-alert-icon,
451
+ :global([data-theme='dark']) .salmex-alert-warning .salmex-alert-title {
452
+ color: rgb(var(--salmex-spray-orange));
453
+ }
454
+
455
+ :global([data-theme='dark']) .salmex-alert-bordered.salmex-alert-warning {
456
+ border-left-color: rgb(var(--salmex-spray-orange));
457
+ }
458
+
459
+ :global([data-theme='dark']) .salmex-alert-info {
460
+ background: rgb(var(--salmex-electric-blue) / 0.12);
461
+ border-color: rgb(var(--salmex-primary-light));
462
+ }
463
+
464
+ :global([data-theme='dark']) .salmex-alert-info .salmex-alert-icon,
465
+ :global([data-theme='dark']) .salmex-alert-info .salmex-alert-title {
466
+ color: rgb(var(--salmex-primary-light));
467
+ }
468
+
469
+ :global([data-theme='dark']) .salmex-alert-bordered.salmex-alert-info {
470
+ border-left-color: rgb(var(--salmex-primary-light));
471
+ }
472
+
473
+ @media (prefers-color-scheme: dark) {
474
+ :global(:root:not([data-theme='light'])) .salmex-alert-error {
475
+ background: rgb(var(--salmex-street-red) / 0.12);
476
+ border-color: rgb(255 90 95);
477
+ }
478
+
479
+ :global(:root:not([data-theme='light'])) .salmex-alert-error .salmex-alert-icon,
480
+ :global(:root:not([data-theme='light'])) .salmex-alert-error .salmex-alert-title {
481
+ color: rgb(255 100 105);
482
+ }
483
+
484
+ :global(:root:not([data-theme='light'])) .salmex-alert-bordered.salmex-alert-error {
485
+ border-left-color: rgb(255 90 95);
486
+ }
487
+
488
+ :global(:root:not([data-theme='light'])) .salmex-alert-success {
489
+ background: rgb(var(--salmex-urban-green) / 0.15);
490
+ border-color: rgb(var(--salmex-urban-green));
491
+ }
492
+
493
+ :global(:root:not([data-theme='light'])) .salmex-alert-success .salmex-alert-icon,
494
+ :global(:root:not([data-theme='light'])) .salmex-alert-success .salmex-alert-title {
495
+ color: rgb(var(--salmex-urban-green));
496
+ }
497
+
498
+ :global(:root:not([data-theme='light'])) .salmex-alert-bordered.salmex-alert-success {
499
+ border-left-color: rgb(var(--salmex-urban-green));
500
+ }
501
+
502
+ :global(:root:not([data-theme='light'])) .salmex-alert-warning {
503
+ background: rgb(var(--salmex-spray-orange) / 0.15);
504
+ border-color: rgb(var(--salmex-spray-orange));
505
+ }
506
+
507
+ :global(:root:not([data-theme='light'])) .salmex-alert-warning .salmex-alert-icon,
508
+ :global(:root:not([data-theme='light'])) .salmex-alert-warning .salmex-alert-title {
509
+ color: rgb(var(--salmex-spray-orange));
510
+ }
511
+
512
+ :global(:root:not([data-theme='light'])) .salmex-alert-bordered.salmex-alert-warning {
513
+ border-left-color: rgb(var(--salmex-spray-orange));
514
+ }
515
+
516
+ :global(:root:not([data-theme='light'])) .salmex-alert-info {
517
+ background: rgb(var(--salmex-electric-blue) / 0.12);
518
+ border-color: rgb(var(--salmex-primary-light));
519
+ }
520
+
521
+ :global(:root:not([data-theme='light'])) .salmex-alert-info .salmex-alert-icon,
522
+ :global(:root:not([data-theme='light'])) .salmex-alert-info .salmex-alert-title {
523
+ color: rgb(var(--salmex-primary-light));
524
+ }
525
+
526
+ :global(:root:not([data-theme='light'])) .salmex-alert-bordered.salmex-alert-info {
527
+ border-left-color: rgb(var(--salmex-primary-light));
528
+ }
529
+ }
530
+
531
+ @media (prefers-reduced-motion: reduce) {
532
+ .salmex-alert,
533
+ .salmex-alert-dismiss,
534
+ .salmex-alert-title-btn {
535
+ transition: none;
536
+ }
537
+ }
538
+ </style>
package/dist/feedback/Alert/Alert.svelte.d.ts ADDED
@@ -0,0 +1,30 @@
1
+ import type { Snippet } from 'svelte';
2
+ type AlertType = 'success' | 'error' | 'warning' | 'info' | 'neutral';
3
+ type AlertVariant = 'standard' | 'slim' | 'bordered';
4
+ type HeadingLevel = 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p';
5
+ interface Props {
6
+ type?: AlertType;
7
+ variant?: AlertVariant;
8
+ title?: string;
9
+ headingLevel?: HeadingLevel;
10
+ dismissible?: boolean;
11
+ showIcon?: boolean;
12
+ expandable?: boolean;
13
+ defaultExpanded?: boolean;
14
+ class?: string;
15
+ children?: Snippet;
16
+ actions?: Snippet;
17
+ onclose?: () => void;
18
+ closeBtnAriaLabel?: string;
19
+ id?: string;
20
+ }
21
+ /**
22
+ * Alert
23
+ *
24
+ * Win2K × Basquiat — Bold message banner. Left accent border, high contrast.
25
+ * Dismissible, expandable, optional title; role="alert" for errors.
26
+ */
27
+ declare const Alert: import("svelte").Component<Props, {}, "">;
28
+ type Alert = ReturnType<typeof Alert>;
29
+ export default Alert;
30
+ //# sourceMappingURL=Alert.svelte.d.ts.map
package/dist/feedback/Alert/Alert.svelte.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Alert.svelte.d.ts","sourceRoot":"","sources":["../../../src/feedback/Alert/Alert.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAIrC,KAAK,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAAC;AACtE,KAAK,YAAY,GAAG,UAAU,GAAG,MAAM,GAAG,UAAU,CAAC;AACrD,KAAK,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,GAAG,CAAC;AAE3D,UAAU,KAAK;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,EAAE,CAAC,EAAE,MAAM,CAAC;CACZ;AAmHF;;;;;GAKG;AACH,QAAA,MAAM,KAAK,2CAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}
package/dist/feedback/Alert/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export { default as Alert } from './Alert.svelte';
2
+ //# sourceMappingURL=index.d.ts.map
package/dist/feedback/Alert/index.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/feedback/Alert/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC"}
package/dist/feedback/Alert/index.js ADDED
@@ -0,0 +1 @@
1
+ export { default as Alert } from './Alert.svelte';