@salmexio/ui 1.3.0 → 1.3.1
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/dist/dialogs/Modal/Modal.svelte +1 -1
- package/dist/feedback/Skeleton/Skeleton.svelte +3 -13
- package/dist/feedback/Skeleton/Skeleton.svelte.d.ts.map +1 -1
- package/dist/feedback/Toast/Toaster.svelte +9 -8
- package/dist/feedback/Toast/Toaster.svelte.d.ts.map +1 -1
- package/dist/forms/DatePicker/DatePicker.svelte +37 -7
- package/dist/forms/DatePicker/DatePicker.svelte.d.ts.map +1 -1
- package/dist/forms/PhoneInput/PhoneInput.svelte +1 -1
- package/dist/forms/Toggle/Toggle.svelte +0 -2
- package/dist/forms/Toggle/Toggle.svelte.d.ts.map +1 -1
- package/dist/layout/ThermalBackground/ThermalBackground.svelte +17 -17
- package/dist/layout/ThermalBackground/ThermalBackground.svelte.d.ts.map +1 -1
- package/dist/styles/tokens.css +78 -46
- package/dist/utils/accessibility.d.ts.map +1 -1
- package/dist/utils/accessibility.js +2 -2
- package/dist/utils/index.d.ts +2 -2
- package/dist/utils/index.d.ts.map +1 -1
- package/dist/utils/index.js +2 -2
- package/package.json +1 -1
|
@@ -149,7 +149,7 @@ function handleBackdropClick(e: MouseEvent) {
|
|
|
149
149
|
}
|
|
150
150
|
|
|
151
151
|
function handleKeyDown(e: KeyboardEvent) {
|
|
152
|
-
if (closeOnEscape && e.key === Keys.Escape) {
|
|
152
|
+
if (closeOnEscape && e.key === Keys.Escape && !e.defaultPrevented) {
|
|
153
153
|
e.preventDefault();
|
|
154
154
|
handleClose();
|
|
155
155
|
}
|
|
@@ -50,25 +50,15 @@ let {
|
|
|
50
50
|
|
|
51
51
|
const effectiveWidth = $derived(width ?? (variant === 'circle' ? '40px' : '100%'));
|
|
52
52
|
const effectiveHeight = $derived(
|
|
53
|
-
height ??
|
|
54
|
-
(variant === 'circle'
|
|
55
|
-
? effectiveWidth
|
|
56
|
-
: variant === 'text'
|
|
57
|
-
? '1em'
|
|
58
|
-
: '100px')
|
|
53
|
+
height ?? (variant === 'circle' ? effectiveWidth : variant === 'text' ? '1em' : '100px')
|
|
59
54
|
);
|
|
60
55
|
|
|
61
56
|
const borderRadius = $derived(
|
|
62
|
-
rounded ??
|
|
63
|
-
(variant === 'circle'
|
|
64
|
-
? 'var(--sx-radius-full)'
|
|
65
|
-
: 'var(--sx-radius-sm)')
|
|
57
|
+
rounded ?? (variant === 'circle' ? 'var(--sx-radius-full)' : 'var(--sx-radius-sm)')
|
|
66
58
|
);
|
|
67
59
|
|
|
68
60
|
const lineWidths = $derived(
|
|
69
|
-
lines > 1
|
|
70
|
-
? Array.from({ length: lines }, (_, i) => (i === lines - 1 ? '75%' : '100%'))
|
|
71
|
-
: ['100%']
|
|
61
|
+
lines > 1 ? Array.from({ length: lines }, (_, i) => (i === lines - 1 ? '75%' : '100%')) : ['100%']
|
|
72
62
|
);
|
|
73
63
|
</script>
|
|
74
64
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Skeleton.svelte.d.ts","sourceRoot":"","sources":["../../../src/feedback/Skeleton/Skeleton.svelte.ts"],"names":[],"mappings":"AAMA,KAAK,eAAe,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;AAElD,UAAU,KAAK;IACd,qBAAqB;IACrB,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,yDAAyD;IACzD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2EAA2E;IAC3E,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,gEAAgE;IAChE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yBAAyB;IACzB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,8DAA8D;IAC9D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qCAAqC;IACrC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;
|
|
1
|
+
{"version":3,"file":"Skeleton.svelte.d.ts","sourceRoot":"","sources":["../../../src/feedback/Skeleton/Skeleton.svelte.ts"],"names":[],"mappings":"AAMA,KAAK,eAAe,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;AAElD,UAAU,KAAK;IACd,qBAAqB;IACrB,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,yDAAyD;IACzD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2EAA2E;IAC3E,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,gEAAgE;IAChE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yBAAyB;IACzB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,8DAA8D;IAC9D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qCAAqC;IACrC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AAmDD;;;;;;;;;;;;GAYG;AACH,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
|
|
@@ -24,10 +24,7 @@ interface Props {
|
|
|
24
24
|
class?: string;
|
|
25
25
|
}
|
|
26
26
|
|
|
27
|
-
let {
|
|
28
|
-
position = 'bottom-right',
|
|
29
|
-
class: className = ''
|
|
30
|
-
}: Props = $props();
|
|
27
|
+
let { position = 'bottom-right', class: className = '' }: Props = $props();
|
|
31
28
|
|
|
32
29
|
let timers = new Map<string, ReturnType<typeof setTimeout>>();
|
|
33
30
|
let pausedToasts = new Set<string>();
|
|
@@ -78,10 +75,14 @@ function handleKeydown(e: KeyboardEvent, id: string) {
|
|
|
78
75
|
|
|
79
76
|
function getIcon(type: ToastItem['type']): string {
|
|
80
77
|
switch (type) {
|
|
81
|
-
case 'success':
|
|
82
|
-
|
|
83
|
-
case '
|
|
84
|
-
|
|
78
|
+
case 'success':
|
|
79
|
+
return 'M9 12l2 2 4-4';
|
|
80
|
+
case 'error':
|
|
81
|
+
return 'M18 6L6 18M6 6l12 12';
|
|
82
|
+
case 'warning':
|
|
83
|
+
return 'M12 9v4m0 4h.01';
|
|
84
|
+
case 'info':
|
|
85
|
+
return 'M12 16v-4m0-4h.01';
|
|
85
86
|
}
|
|
86
87
|
}
|
|
87
88
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toaster.svelte.d.ts","sourceRoot":"","sources":["../../../src/feedback/Toast/Toaster.svelte.ts"],"names":[],"mappings":"AASA,KAAK,aAAa,GAAG,cAAc,GAAG,aAAa,GAAG,WAAW,GAAG,UAAU,CAAC;AAE/E,UAAU,KAAK;IACd,yBAAyB;IACzB,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;CACf;
|
|
1
|
+
{"version":3,"file":"Toaster.svelte.d.ts","sourceRoot":"","sources":["../../../src/feedback/Toast/Toaster.svelte.ts"],"names":[],"mappings":"AASA,KAAK,aAAa,GAAG,cAAc,GAAG,aAAa,GAAG,WAAW,GAAG,UAAU,CAAC;AAE/E,UAAU,KAAK;IACd,yBAAyB;IACzB,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;CACf;AAmJD;;;;;;;;;;GAUG;AACH,QAAA,MAAM,OAAO,2CAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}
|
|
@@ -83,8 +83,20 @@ let viewMonth = $state(new Date().getMonth());
|
|
|
83
83
|
let focusedDay = $state(new Date().getDate());
|
|
84
84
|
|
|
85
85
|
const DAYS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
|
|
86
|
-
const MONTHS = [
|
|
87
|
-
'
|
|
86
|
+
const MONTHS = [
|
|
87
|
+
'January',
|
|
88
|
+
'February',
|
|
89
|
+
'March',
|
|
90
|
+
'April',
|
|
91
|
+
'May',
|
|
92
|
+
'June',
|
|
93
|
+
'July',
|
|
94
|
+
'August',
|
|
95
|
+
'September',
|
|
96
|
+
'October',
|
|
97
|
+
'November',
|
|
98
|
+
'December'
|
|
99
|
+
];
|
|
88
100
|
|
|
89
101
|
const showError = $derived(hasInteracted && !!error);
|
|
90
102
|
const ariaDescribedBy = $derived(
|
|
@@ -144,7 +156,11 @@ function isToday(year: number, month: number, day: number): boolean {
|
|
|
144
156
|
|
|
145
157
|
function isSelected(year: number, month: number, day: number): boolean {
|
|
146
158
|
if (!selectedDate) return false;
|
|
147
|
-
return
|
|
159
|
+
return (
|
|
160
|
+
year === selectedDate.getFullYear() &&
|
|
161
|
+
month === selectedDate.getMonth() &&
|
|
162
|
+
day === selectedDate.getDate()
|
|
163
|
+
);
|
|
148
164
|
}
|
|
149
165
|
|
|
150
166
|
function positionCalendar() {
|
|
@@ -243,22 +259,36 @@ function handleCalendarKeydown(e: KeyboardEvent) {
|
|
|
243
259
|
case Keys.ArrowRight:
|
|
244
260
|
e.preventDefault();
|
|
245
261
|
if (focusedDay < daysInMonth) focusedDay++;
|
|
246
|
-
else {
|
|
262
|
+
else {
|
|
263
|
+
nextMonth();
|
|
264
|
+
focusedDay = 1;
|
|
265
|
+
}
|
|
247
266
|
break;
|
|
248
267
|
case Keys.ArrowLeft:
|
|
249
268
|
e.preventDefault();
|
|
250
269
|
if (focusedDay > 1) focusedDay--;
|
|
251
|
-
else {
|
|
270
|
+
else {
|
|
271
|
+
prevMonth();
|
|
272
|
+
focusedDay = daysInMonth;
|
|
273
|
+
}
|
|
252
274
|
break;
|
|
253
275
|
case Keys.ArrowDown:
|
|
254
276
|
e.preventDefault();
|
|
255
277
|
if (focusedDay + 7 <= daysInMonth) focusedDay += 7;
|
|
256
|
-
else {
|
|
278
|
+
else {
|
|
279
|
+
const overflow = focusedDay + 7 - daysInMonth;
|
|
280
|
+
nextMonth();
|
|
281
|
+
focusedDay = overflow;
|
|
282
|
+
}
|
|
257
283
|
break;
|
|
258
284
|
case Keys.ArrowUp:
|
|
259
285
|
e.preventDefault();
|
|
260
286
|
if (focusedDay - 7 >= 1) focusedDay -= 7;
|
|
261
|
-
else {
|
|
287
|
+
else {
|
|
288
|
+
const newDay = daysInPrevMonth + (focusedDay - 7);
|
|
289
|
+
prevMonth();
|
|
290
|
+
focusedDay = newDay;
|
|
291
|
+
}
|
|
262
292
|
break;
|
|
263
293
|
case Keys.Home:
|
|
264
294
|
e.preventDefault();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePicker.svelte.d.ts","sourceRoot":"","sources":["../../../src/forms/DatePicker/DatePicker.svelte.ts"],"names":[],"mappings":"AAQA,KAAK,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEzC,UAAU,KAAK;IACd,qBAAqB;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wBAAwB;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yCAAyC;IACzC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,yCAAyC;IACzC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,oBAAoB;IACpB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iBAAiB;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,8BAA8B;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,4CAA4C;IAC5C,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,eAAe;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;
|
|
1
|
+
{"version":3,"file":"DatePicker.svelte.d.ts","sourceRoot":"","sources":["../../../src/forms/DatePicker/DatePicker.svelte.ts"],"names":[],"mappings":"AAQA,KAAK,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEzC,UAAU,KAAK;IACd,qBAAqB;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wBAAwB;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yCAAyC;IACzC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,yCAAyC;IACzC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,oBAAoB;IACpB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iBAAiB;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,8BAA8B;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,4CAA4C;IAC5C,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,eAAe;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AAoaD;;;;;;;;;;GAUG;AACH,QAAA,MAAM,UAAU,gDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
|
|
@@ -42,7 +42,7 @@ export const DEFAULT_COUNTRIES: Country[] = [
|
|
|
42
42
|
{ code: 'NG', name: 'Nigeria', dial: '+234', flag: '\u{1F1F3}\u{1F1EC}' },
|
|
43
43
|
{ code: 'ZA', name: 'South Africa', dial: '+27', flag: '\u{1F1FF}\u{1F1E6}' },
|
|
44
44
|
{ code: 'CN', name: 'China', dial: '+86', flag: '\u{1F1E8}\u{1F1F3}' },
|
|
45
|
-
{ code: 'RU', name: 'Russia', dial: '+7', flag: '\u{1F1F7}\u{1F1FA}' }
|
|
45
|
+
{ code: 'RU', name: 'Russia', dial: '+7', flag: '\u{1F1F7}\u{1F1FA}' }
|
|
46
46
|
];
|
|
47
47
|
</script>
|
|
48
48
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toggle.svelte.d.ts","sourceRoot":"","sources":["../../../src/forms/Toggle/Toggle.svelte.ts"],"names":[],"mappings":"AAMA,KAAK,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACrC,KAAK,aAAa,GAAG,MAAM,GAAG,OAAO,CAAC;AAEtC,UAAU,KAAK;IACd,6BAA6B;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,6BAA6B;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB;IACpB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,8CAA8C;IAC9C,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,sDAAsD;IACtD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,8CAA8C;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sBAAsB;IACtB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;
|
|
1
|
+
{"version":3,"file":"Toggle.svelte.d.ts","sourceRoot":"","sources":["../../../src/forms/Toggle/Toggle.svelte.ts"],"names":[],"mappings":"AAMA,KAAK,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACrC,KAAK,aAAa,GAAG,MAAM,GAAG,OAAO,CAAC;AAEtC,UAAU,KAAK;IACd,6BAA6B;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,6BAA6B;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB;IACpB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,8CAA8C;IAC9C,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,sDAAsD;IACtD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,8CAA8C;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sBAAsB;IACtB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AA0DD;;;;;;;;;;;GAWG;AACH,QAAA,MAAM,MAAM,kDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
|
|
@@ -11,23 +11,23 @@
|
|
|
11
11
|
-->
|
|
12
12
|
|
|
13
13
|
<script lang="ts">
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
14
|
+
interface Props {
|
|
15
|
+
/** Show film grain overlay */
|
|
16
|
+
grain?: boolean;
|
|
17
|
+
/** Blob intensity: low = barely visible, default = subtle, high = pronounced */
|
|
18
|
+
intensity?: 'low' | 'default' | 'high';
|
|
19
|
+
/** Additional CSS class */
|
|
20
|
+
class?: string;
|
|
21
|
+
/** Test ID */
|
|
22
|
+
testId?: string;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
let {
|
|
26
|
+
grain = true,
|
|
27
|
+
intensity = 'default',
|
|
28
|
+
class: className = '',
|
|
29
|
+
testId = undefined
|
|
30
|
+
}: Props = $props();
|
|
31
31
|
</script>
|
|
32
32
|
|
|
33
33
|
<div
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ThermalBackground.svelte.d.ts","sourceRoot":"","sources":["../../../src/layout/ThermalBackground/ThermalBackground.svelte.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ThermalBackground.svelte.d.ts","sourceRoot":"","sources":["../../../src/layout/ThermalBackground/ThermalBackground.svelte.ts"],"names":[],"mappings":"AAGA,UAAU,KAAK;IACd,8BAA8B;IAC9B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,gFAAgF;IAChF,SAAS,CAAC,EAAE,KAAK,GAAG,SAAS,GAAG,MAAM,CAAC;IACvC,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AAiCD,QAAA,MAAM,iBAAiB,2CAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}
|
package/dist/styles/tokens.css
CHANGED
|
@@ -17,42 +17,42 @@
|
|
|
17
17
|
Raw palette — never use directly in components
|
|
18
18
|
======================================== */
|
|
19
19
|
|
|
20
|
-
--sx-gray-950: #
|
|
21
|
-
--sx-gray-900: #
|
|
20
|
+
--sx-gray-950: #08080c;
|
|
21
|
+
--sx-gray-900: #0f0f14;
|
|
22
22
|
--sx-gray-800: #171720;
|
|
23
|
-
--sx-gray-700: #
|
|
24
|
-
--sx-gray-600: #
|
|
23
|
+
--sx-gray-700: #1f1f2a;
|
|
24
|
+
--sx-gray-600: #2d2d3a;
|
|
25
25
|
--sx-gray-500: #505060;
|
|
26
|
-
--sx-gray-400: #
|
|
27
|
-
--sx-gray-300: #
|
|
28
|
-
--sx-gray-200: #
|
|
29
|
-
--sx-gray-100: #
|
|
30
|
-
--sx-white: #
|
|
26
|
+
--sx-gray-400: #7a7a88;
|
|
27
|
+
--sx-gray-300: #a0a0ab;
|
|
28
|
+
--sx-gray-200: #c5c5cc;
|
|
29
|
+
--sx-gray-100: #e8e6e1;
|
|
30
|
+
--sx-white: #f0eee8;
|
|
31
31
|
|
|
32
32
|
/* Accents — Vermilion (forge heat) */
|
|
33
|
-
--sx-vermilion-500: #
|
|
34
|
-
--sx-vermilion-400: #
|
|
35
|
-
--sx-vermilion-600: #
|
|
33
|
+
--sx-vermilion-500: #ff6b35;
|
|
34
|
+
--sx-vermilion-400: #ff8c5a;
|
|
35
|
+
--sx-vermilion-600: #e05520;
|
|
36
36
|
|
|
37
37
|
/* Accents — Brass (earned authority) */
|
|
38
|
-
--sx-brass-500: #
|
|
39
|
-
--sx-brass-400: #
|
|
40
|
-
--sx-brass-600: #
|
|
38
|
+
--sx-brass-500: #c8a84e;
|
|
39
|
+
--sx-brass-400: #d4b86a;
|
|
40
|
+
--sx-brass-600: #a68b3a;
|
|
41
41
|
|
|
42
42
|
/* Accents — Danger */
|
|
43
|
-
--sx-red-500: #
|
|
44
|
-
--sx-red-400: #
|
|
45
|
-
--sx-red-600: #
|
|
43
|
+
--sx-red-500: #dc2626;
|
|
44
|
+
--sx-red-400: #ef4444;
|
|
45
|
+
--sx-red-600: #b91c1c;
|
|
46
46
|
|
|
47
47
|
/* Accents — Phosphor (operational green) */
|
|
48
|
-
--sx-green-500: #
|
|
49
|
-
--sx-green-400: #
|
|
50
|
-
--sx-green-600: #
|
|
48
|
+
--sx-green-500: #4ade80;
|
|
49
|
+
--sx-green-400: #6ee7a0;
|
|
50
|
+
--sx-green-600: #22c55e;
|
|
51
51
|
|
|
52
52
|
/* Accents — Teal (encrypted channel) */
|
|
53
|
-
--sx-teal-500: #
|
|
54
|
-
--sx-teal-400: #
|
|
55
|
-
--sx-teal-600: #
|
|
53
|
+
--sx-teal-500: #3d8b8b;
|
|
54
|
+
--sx-teal-400: #5aabab;
|
|
55
|
+
--sx-teal-600: #2d6b6b;
|
|
56
56
|
|
|
57
57
|
/* ========================================
|
|
58
58
|
SEMANTIC COLORS
|
|
@@ -112,7 +112,7 @@
|
|
|
112
112
|
--sx-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
|
|
113
113
|
--sx-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.6);
|
|
114
114
|
--sx-shadow-glow-primary: 0 0 20px rgba(255, 107, 53, 0.18);
|
|
115
|
-
--sx-shadow-glow-primary-strong: 0 0 30px rgba(255, 107, 53, 0.
|
|
115
|
+
--sx-shadow-glow-primary-strong: 0 0 30px rgba(255, 107, 53, 0.3);
|
|
116
116
|
--sx-shadow-glow-brass: 0 0 20px rgba(200, 168, 78, 0.15);
|
|
117
117
|
--sx-shadow-glow-red: 0 0 20px rgba(220, 38, 38, 0.15);
|
|
118
118
|
--sx-shadow-glow-green: 0 0 20px rgba(74, 222, 128, 0.15);
|
|
@@ -164,9 +164,9 @@
|
|
|
164
164
|
TYPOGRAPHY
|
|
165
165
|
======================================== */
|
|
166
166
|
|
|
167
|
-
--sx-font-body:
|
|
168
|
-
--sx-font-display:
|
|
169
|
-
--sx-font-mono:
|
|
167
|
+
--sx-font-body: "TT Fors", system-ui, -apple-system, sans-serif;
|
|
168
|
+
--sx-font-display: "TT Quaris", Georgia, "Times New Roman", serif;
|
|
169
|
+
--sx-font-mono: "JetBrains Mono", "Consolas", "Courier New", monospace;
|
|
170
170
|
|
|
171
171
|
--sx-text-xs: 0.75rem;
|
|
172
172
|
--sx-text-sm: 0.875rem;
|
|
@@ -251,7 +251,7 @@
|
|
|
251
251
|
======================================== */
|
|
252
252
|
|
|
253
253
|
--sx-z-base: 1;
|
|
254
|
-
--sx-z-dropdown:
|
|
254
|
+
--sx-z-dropdown: 1055;
|
|
255
255
|
--sx-z-sticky: 1020;
|
|
256
256
|
--sx-z-fixed: 1030;
|
|
257
257
|
--sx-z-modal-backdrop: 1040;
|
|
@@ -316,9 +316,11 @@
|
|
|
316
316
|
|
|
317
317
|
body {
|
|
318
318
|
background-color: var(--sx-color-base);
|
|
319
|
-
background-image:
|
|
320
|
-
|
|
321
|
-
|
|
319
|
+
background-image: radial-gradient(
|
|
320
|
+
ellipse at 15% 50%,
|
|
321
|
+
rgba(255, 107, 53, 0.02) 0%,
|
|
322
|
+
transparent 50%
|
|
323
|
+
), radial-gradient(ellipse at 85% 20%, rgba(200, 168, 78, 0.015) 0%, transparent 50%),
|
|
322
324
|
radial-gradient(ellipse at 50% 85%, rgba(61, 139, 139, 0.015) 0%, transparent 50%);
|
|
323
325
|
background-size: 200% 200%;
|
|
324
326
|
animation: sx-ambient-drift 25s ease-in-out infinite;
|
|
@@ -359,23 +361,47 @@ body {
|
|
|
359
361
|
}
|
|
360
362
|
|
|
361
363
|
@keyframes sx-ambient-drift {
|
|
362
|
-
0%
|
|
363
|
-
|
|
364
|
-
|
|
364
|
+
0% {
|
|
365
|
+
background-position: 0% 50%;
|
|
366
|
+
}
|
|
367
|
+
50% {
|
|
368
|
+
background-position: 100% 50%;
|
|
369
|
+
}
|
|
370
|
+
100% {
|
|
371
|
+
background-position: 0% 50%;
|
|
372
|
+
}
|
|
365
373
|
}
|
|
366
374
|
|
|
367
375
|
@keyframes sx-focus-breathe {
|
|
368
|
-
0%,
|
|
369
|
-
|
|
376
|
+
0%,
|
|
377
|
+
100% {
|
|
378
|
+
box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.12);
|
|
379
|
+
}
|
|
380
|
+
50% {
|
|
381
|
+
box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.28);
|
|
382
|
+
}
|
|
370
383
|
}
|
|
371
384
|
|
|
372
385
|
@keyframes sx-error-shake {
|
|
373
|
-
0%,
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
386
|
+
0%,
|
|
387
|
+
100% {
|
|
388
|
+
transform: translateX(0);
|
|
389
|
+
}
|
|
390
|
+
15% {
|
|
391
|
+
transform: translateX(-4px);
|
|
392
|
+
}
|
|
393
|
+
30% {
|
|
394
|
+
transform: translateX(4px);
|
|
395
|
+
}
|
|
396
|
+
45% {
|
|
397
|
+
transform: translateX(-3px);
|
|
398
|
+
}
|
|
399
|
+
60% {
|
|
400
|
+
transform: translateX(2px);
|
|
401
|
+
}
|
|
402
|
+
75% {
|
|
403
|
+
transform: translateX(-1px);
|
|
404
|
+
}
|
|
379
405
|
}
|
|
380
406
|
|
|
381
407
|
@keyframes sx-check-in {
|
|
@@ -390,9 +416,15 @@ body {
|
|
|
390
416
|
}
|
|
391
417
|
|
|
392
418
|
@keyframes sx-badge-pop {
|
|
393
|
-
0%
|
|
394
|
-
|
|
395
|
-
|
|
419
|
+
0% {
|
|
420
|
+
transform: scale(1);
|
|
421
|
+
}
|
|
422
|
+
40% {
|
|
423
|
+
transform: scale(1.15);
|
|
424
|
+
}
|
|
425
|
+
100% {
|
|
426
|
+
transform: scale(1);
|
|
427
|
+
}
|
|
396
428
|
}
|
|
397
429
|
|
|
398
430
|
@keyframes sx-alert-in {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"accessibility.d.ts","sourceRoot":"","sources":["../../src/utils/accessibility.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAcH,kDAAkD;AAClD,wBAAgB,kBAAkB,CAAC,EAAE,EAAE,WAAW,GAAG,OAAO,CAe3D;AAED,mEAAmE;AACnE,wBAAgB,oBAAoB,CAAC,SAAS,EAAE,WAAW,GAAG,WAAW,EAAE,CAI1E;AAED;;;GAGG;AACH,wBAAgB,QAAQ,
|
|
1
|
+
{"version":3,"file":"accessibility.d.ts","sourceRoot":"","sources":["../../src/utils/accessibility.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAcH,kDAAkD;AAClD,wBAAgB,kBAAkB,CAAC,EAAE,EAAE,WAAW,GAAG,OAAO,CAe3D;AAED,mEAAmE;AACnE,wBAAgB,oBAAoB,CAAC,SAAS,EAAE,WAAW,GAAG,WAAW,EAAE,CAI1E;AAED;;;GAGG;AACH,wBAAgB,QAAQ,CAAC,OAAO,EAAE,MAAM,EAAE,QAAQ,GAAE,QAAQ,GAAG,WAAsB,GAAG,IAAI,CAgC3F;AAED,gDAAgD;AAChD,wBAAgB,oBAAoB,IAAI,OAAO,CAG9C"}
|
|
@@ -9,7 +9,7 @@ const FOCUSABLE_SELECTORS = [
|
|
|
9
9
|
'select:not([disabled]):not([tabindex="-1"])',
|
|
10
10
|
'textarea:not([disabled]):not([tabindex="-1"])',
|
|
11
11
|
'[tabindex]:not([tabindex="-1"])',
|
|
12
|
-
'[contenteditable]:not([tabindex="-1"])'
|
|
12
|
+
'[contenteditable]:not([tabindex="-1"])'
|
|
13
13
|
];
|
|
14
14
|
const FOCUSABLE_SELECTOR = FOCUSABLE_SELECTORS.join(', ');
|
|
15
15
|
/** Check whether an element can receive focus. */
|
|
@@ -62,7 +62,7 @@ export function announce(message, priority = 'polite') {
|
|
|
62
62
|
overflow: 'hidden',
|
|
63
63
|
clip: 'rect(0, 0, 0, 0)',
|
|
64
64
|
whiteSpace: 'nowrap',
|
|
65
|
-
border: '0'
|
|
65
|
+
border: '0'
|
|
66
66
|
});
|
|
67
67
|
document.body.appendChild(region);
|
|
68
68
|
}
|
package/dist/utils/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export { cn } from './cn.js';
|
|
2
|
-
export { createFocusTrap, generateId, Keys, isKey, isActivationKey, isNavigationKey
|
|
2
|
+
export { createFocusTrap, generateId, Keys, isKey, isActivationKey, isNavigationKey } from './keyboard.js';
|
|
3
3
|
export type { FocusTrap, Key } from './keyboard.js';
|
|
4
|
-
export { isElementFocusable, getFocusableElements, announce, prefersReducedMotion
|
|
4
|
+
export { isElementFocusable, getFocusableElements, announce, prefersReducedMotion } from './accessibility.js';
|
|
5
5
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,SAAS,CAAC;AAC7B,OAAO,EACN,eAAe,EACf,UAAU,EACV,IAAI,EACJ,KAAK,EACL,eAAe,EACf,eAAe,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,SAAS,CAAC;AAC7B,OAAO,EACN,eAAe,EACf,UAAU,EACV,IAAI,EACJ,KAAK,EACL,eAAe,EACf,eAAe,EACf,MAAM,eAAe,CAAC;AACvB,YAAY,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,EACN,kBAAkB,EAClB,oBAAoB,EACpB,QAAQ,EACR,oBAAoB,EACpB,MAAM,oBAAoB,CAAC"}
|
package/dist/utils/index.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
export { cn } from './cn.js';
|
|
2
|
-
export { createFocusTrap, generateId, Keys, isKey, isActivationKey, isNavigationKey
|
|
3
|
-
export { isElementFocusable, getFocusableElements, announce, prefersReducedMotion
|
|
2
|
+
export { createFocusTrap, generateId, Keys, isKey, isActivationKey, isNavigationKey } from './keyboard.js';
|
|
3
|
+
export { isElementFocusable, getFocusableElements, announce, prefersReducedMotion } from './accessibility.js';
|