@sveltia/ui 0.15.10 → 0.15.12

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 (91) hide show
  1. package/package/components/alert/alert.svelte.d.ts +2 -0
  2. package/package/components/button/button-group.svelte.d.ts +2 -0
  3. package/package/components/button/button.svelte +1 -1
  4. package/package/components/button/button.svelte.d.ts +28 -26
  5. package/package/components/button/select-button-group.svelte.d.ts +6 -4
  6. package/package/components/button/select-button.svelte.d.ts +8 -6
  7. package/package/components/button/split-button.svelte +1 -1
  8. package/package/components/button/split-button.svelte.d.ts +7 -5
  9. package/package/components/calendar/calendar.svelte.d.ts +2 -0
  10. package/package/components/checkbox/checkbox-group.svelte.d.ts +2 -0
  11. package/package/components/checkbox/checkbox.svelte.d.ts +8 -6
  12. package/package/components/dialog/alert-dialog.svelte.d.ts +2 -0
  13. package/package/components/dialog/confirmation-dialog.svelte.d.ts +2 -0
  14. package/package/components/dialog/dialog.svelte.d.ts +4 -2
  15. package/package/components/dialog/prompt-dialog.svelte.d.ts +2 -0
  16. package/package/components/disclosure/disclosure.svelte.d.ts +9 -7
  17. package/package/components/divider/divider.svelte.d.ts +2 -0
  18. package/package/components/divider/spacer.svelte.d.ts +2 -0
  19. package/package/components/drawer/drawer.svelte.d.ts +4 -2
  20. package/package/components/grid/grid-body.svelte.d.ts +2 -0
  21. package/package/components/grid/grid-cell.svelte.d.ts +2 -0
  22. package/package/components/grid/grid-col-header.svelte.d.ts +2 -0
  23. package/package/components/grid/grid-foot.svelte.d.ts +2 -0
  24. package/package/components/grid/grid-head.svelte.d.ts +2 -0
  25. package/package/components/grid/grid-row-header.svelte.d.ts +2 -0
  26. package/package/components/grid/grid-row.svelte.d.ts +2 -0
  27. package/package/components/grid/grid.svelte.d.ts +4 -2
  28. package/package/components/icon/icon.svelte.d.ts +2 -0
  29. package/package/components/listbox/listbox.svelte.d.ts +10 -8
  30. package/package/components/listbox/option-group.svelte.d.ts +4 -2
  31. package/package/components/listbox/option.svelte.d.ts +2 -0
  32. package/package/components/menu/menu-button.svelte.d.ts +8 -6
  33. package/package/components/menu/menu-item-checkbox.svelte.d.ts +6 -4
  34. package/package/components/menu/menu-item-group.svelte.d.ts +4 -2
  35. package/package/components/menu/menu-item-radio.svelte.d.ts +6 -4
  36. package/package/components/menu/menu-item.svelte.d.ts +4 -2
  37. package/package/components/menu/menu.svelte.d.ts +2 -0
  38. package/package/components/radio/radio-group.svelte.d.ts +6 -4
  39. package/package/components/radio/radio.svelte.d.ts +6 -4
  40. package/package/components/select/combobox.svelte.d.ts +7 -5
  41. package/package/components/select/select-tags.svelte.d.ts +9 -7
  42. package/package/components/select/select.svelte.d.ts +7 -5
  43. package/package/components/slider/slider.svelte.d.ts +10 -8
  44. package/package/components/switch/switch.svelte.d.ts +8 -6
  45. package/package/components/table/table-body.svelte.d.ts +2 -0
  46. package/package/components/table/table-cell.svelte.d.ts +2 -0
  47. package/package/components/table/table-col-header.svelte.d.ts +2 -0
  48. package/package/components/table/table-foot.svelte.d.ts +2 -0
  49. package/package/components/table/table-head.svelte.d.ts +2 -0
  50. package/package/components/table/table-row-header.svelte.d.ts +2 -0
  51. package/package/components/table/table-row.svelte.d.ts +2 -0
  52. package/package/components/table/table.svelte.d.ts +2 -0
  53. package/package/components/tabs/tab-box.svelte.d.ts +2 -0
  54. package/package/components/tabs/tab-list.svelte.d.ts +2 -0
  55. package/package/components/tabs/tab-panel.svelte.d.ts +2 -0
  56. package/package/components/tabs/tab-panels.svelte.d.ts +2 -0
  57. package/package/components/tabs/tab.svelte.d.ts +2 -0
  58. package/package/components/text-editor/core.d.ts +2 -2
  59. package/package/components/text-editor/core.js +3 -1
  60. package/package/components/text-editor/lexical-root.svelte.d.ts +6 -4
  61. package/package/components/text-editor/text-editor.svelte +2 -5
  62. package/package/components/text-editor/text-editor.svelte.d.ts +6 -4
  63. package/package/components/text-editor/toolbar/editor-toolbar.svelte +1 -5
  64. package/package/components/text-editor/toolbar/editor-toolbar.svelte.d.ts +2 -0
  65. package/package/components/text-editor/toolbar/format-text-button.svelte +1 -1
  66. package/package/components/text-editor/toolbar/format-text-button.svelte.d.ts +2 -0
  67. package/package/components/text-editor/toolbar/insert-link-button.svelte +4 -4
  68. package/package/components/text-editor/toolbar/insert-link-button.svelte.d.ts +2 -0
  69. package/package/components/text-editor/toolbar/toggle-block-menu-item.svelte.d.ts +2 -0
  70. package/package/components/text-field/number-input.svelte.d.ts +12 -10
  71. package/package/components/text-field/password-input.svelte.d.ts +6 -4
  72. package/package/components/text-field/search-bar.svelte.d.ts +14 -12
  73. package/package/components/text-field/text-area.svelte.d.ts +6 -4
  74. package/package/components/text-field/text-input.svelte.d.ts +23 -21
  75. package/package/components/toast/toast.svelte.d.ts +2 -0
  76. package/package/components/toolbar/toolbar.svelte.d.ts +3 -1
  77. package/package/components/util/app-shell.svelte +2 -489
  78. package/package/components/util/app-shell.svelte.d.ts +4 -2
  79. package/package/components/util/group.svelte.d.ts +2 -0
  80. package/package/components/util/modal.svelte.d.ts +13 -11
  81. package/package/components/util/popup.svelte.d.ts +10 -8
  82. package/package/components/util/portal.svelte.d.ts +2 -0
  83. package/package/index.js +1 -8
  84. package/package/locales/en.d.ts +48 -48
  85. package/package/locales/ja.d.ts +48 -48
  86. package/package/services/events.d.ts +1 -1
  87. package/package/services/group.d.ts +1 -1
  88. package/package/services/group.js +1 -1
  89. package/package/services/popup.d.ts +1 -2
  90. package/package/typedef.d.ts +12 -12
  91. package/package.json +36 -34
@@ -6,6 +6,7 @@
6
6
  -->
7
7
  <script>
8
8
  import { onMount } from 'svelte';
9
+ import '../../styles/core.scss';
9
10
 
10
11
  /**
11
12
  * Orientation of the app shell’s children.
@@ -86,495 +87,7 @@
86
87
  <slot />
87
88
  </div>
88
89
 
89
- <style global>@import url("https://fonts.googleapis.com/css2?family=Merriweather+Sans:ital,wght@0,300;0,600;1,300;1,600&family=Noto+Sans+Mono&display=swap");
90
- @import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block");
91
- :global(:root),
92
- :global(:host) {
93
- --sui-base-hue: 210;
94
- --sui-highlight-foreground-color: hsl(var(--sui-foreground-color-1-hsl));
95
- --sui-primary-foreground-color: hsl(var(--sui-foreground-color-2-hsl));
96
- --sui-secondary-foreground-color: hsl(var(--sui-foreground-color-3-hsl));
97
- --sui-tertiary-foreground-color: hsl(var(--sui-foreground-color-4-hsl));
98
- --sui-disabled-foreground-color: hsl(var(--sui-foreground-color-5-hsl));
99
- --sui-error-foreground-color: hsl(
100
- var(--sui-error-color-hue) var(--sui-alert-foreground-color-saturation)
101
- var(--sui-alert-foreground-color-lightness)
102
- );
103
- --sui-warning-foreground-color: hsl(
104
- var(--sui-warning-color-hue) var(--sui-alert-foreground-color-saturation)
105
- var(--sui-alert-foreground-color-lightness)
106
- );
107
- --sui-info-foreground-color: hsl(
108
- var(--sui-info-color-hue) var(--sui-alert-foreground-color-saturation)
109
- var(--sui-alert-foreground-color-lightness)
110
- );
111
- --sui-success-foreground-color: hsl(
112
- var(--sui-success-color-hue) var(--sui-alert-foreground-color-saturation)
113
- var(--sui-alert-foreground-color-lightness)
114
- );
115
- --sui-hover-background-color: hsl(var(--sui-background-color-5-hsl) / 35%);
116
- --sui-selected-background-color: hsl(var(--sui-background-color-5-hsl) / 75%);
117
- --sui-active-background-color: hsl(var(--sui-background-color-5-hsl) / 100%);
118
- --sui-content-background-color: hsl(var(--sui-background-color-1-hsl));
119
- --sui-code-background-color: hsl(var(--sui-background-color-4-hsl));
120
- --sui-primary-background-color: hsl(var(--sui-background-color-2-hsl));
121
- --sui-primary-background-color-translucent: hsl(var(--sui-background-color-2-hsl) / 80%);
122
- --sui-secondary-background-color: hsl(var(--sui-background-color-3-hsl));
123
- --sui-secondary-background-color-translucent: hsl(var(--sui-background-color-3-hsl) / 80%);
124
- --sui-tertiary-background-color: hsl(var(--sui-background-color-4-hsl));
125
- --sui-tertiary-background-color-translucent: hsl(var(--sui-background-color-4-hsl) / 80%);
126
- --sui-disabled-background-color: hsl(var(--sui-background-color-4-hsl));
127
- --sui-error-background-color: hsl(
128
- var(--sui-error-color-hue) var(--sui-alert-background-color-saturation)
129
- var(--sui-alert-background-color-lightness)
130
- );
131
- --sui-warning-background-color: hsl(
132
- var(--sui-warning-color-hue) var(--sui-alert-background-color-saturation)
133
- var(--sui-alert-background-color-lightness)
134
- );
135
- --sui-info-background-color: hsl(
136
- var(--sui-info-color-hue) var(--sui-alert-background-color-saturation)
137
- var(--sui-alert-background-color-lightness)
138
- );
139
- --sui-success-background-color: hsl(
140
- var(--sui-success-color-hue) var(--sui-alert-background-color-saturation)
141
- var(--sui-alert-background-color-lightness)
142
- );
143
- --sui-focus-ring-width: 4px;
144
- --sui-primary-border-color: hsl(var(--sui-border-color-2-hsl));
145
- --sui-secondary-border-color: hsl(var(--sui-border-color-3-hsl));
146
- --sui-error-border-color: hsl(
147
- var(--sui-error-color-hue) var(--sui-alert-border-color-saturation)
148
- var(--sui-alert-border-color-lightness)
149
- );
150
- --sui-warning-border-color: hsl(
151
- var(--sui-warning-color-hue) var(--sui-alert-border-color-saturation)
152
- var(--sui-alert-border-color-lightness)
153
- );
154
- --sui-info-border-color: hsl(
155
- var(--sui-info-color-hue) var(--sui-alert-border-color-saturation)
156
- var(--sui-alert-border-color-lightness)
157
- );
158
- --sui-success-border-color: hsl(
159
- var(--sui-success-color-hue) var(--sui-alert-border-color-saturation)
160
- var(--sui-alert-border-color-lightness)
161
- );
162
- --sui-popup-shadow-color: hsl(var(--sui-shadow-color) / 40%);
163
- --sui-popup-backdrop-color: hsl(var(--sui-shadow-color) / 40%);
164
- --sui-font-family-default: "Merriweather Sans", sans-serif;
165
- --sui-font-size-xxx-large: 24px;
166
- --sui-font-size-xx-large: 20px;
167
- --sui-font-size-x-large: 18px;
168
- --sui-font-size-large: 16px;
169
- --sui-font-size-default: 14px;
170
- --sui-font-size-small: 12px;
171
- --sui-font-size-x-small: 10px;
172
- --sui-font-weight-normal: 300;
173
- --sui-font-weight-bold: 600;
174
- --sui-font-family-monospace: "Noto Sans Mono", monospace;
175
- --sui-font-size-monospace: 0.9em;
176
- --sui-line-height-default: 1.25;
177
- --sui-line-height-compact: 1.5;
178
- --sui-line-height-comfortable: 1.75;
179
- --sui-word-spacing-normal: 0.1ex;
180
- --sui-control-small-border-width: 1px;
181
- --sui-control-small-border-radius: calc(var(--sui-control-small-height) / 8);
182
- --sui-control-small-padding: 0 calc((var(--sui-control-small-height) / 5));
183
- --sui-control-small-height: 24px;
184
- --sui-control-medium-border-width: 1px;
185
- --sui-control-medium-border-radius: calc(var(--sui-control-medium-height) / 8);
186
- --sui-control-medium-padding: 0 calc((var(--sui-control-medium-height) / 4));
187
- --sui-control-medium-height: 32px;
188
- --sui-control-large-border-width: 1px;
189
- --sui-control-large-border-radius: calc(var(--sui-control-large-height) / 8);
190
- --sui-control-large-padding: 0 calc((var(--sui-control-large-height) / 3));
191
- --sui-control-large-height: 48px;
192
- --sui-control-border-color: hsl(var(--sui-border-color-2-hsl));
193
- --sui-control-foreground-color: var(--sui-primary-foreground-color);
194
- --sui-control-background-color: hsl(var(--sui-background-color-4-hsl));
195
- --sui-control-font-family: var(--sui-font-family-default);
196
- --sui-control-font-size: var(--sui-font-size-default);
197
- --sui-control-line-height: var(--sui-line-height-compact);
198
- --sui-button-small-border-radius: var(--sui-control-small-border-radius);
199
- --sui-button-small-padding: var(--sui-control-small-padding);
200
- --sui-button-small-height: var(--sui-control-small-height);
201
- --sui-button-medium-border-radius: var(--sui-control-medium-border-radius);
202
- --sui-button-medium-padding: var(--sui-control-medium-padding);
203
- --sui-button-medium-height: var(--sui-control-medium-height);
204
- --sui-button-large-border-radius: var(--sui-control-large-border-radius);
205
- --sui-button-large-padding: var(--sui-control-large-padding);
206
- --sui-button-large-height: var(--sui-control-large-height);
207
- --sui-button-border-color: var(--sui-control-border-color);
208
- --sui-button-background-color: var(--sui-control-background-color);
209
- --sui-checkbox-border-radius: var(--sui-control-medium-border-radius);
210
- --sui-checkbox-height: 20px;
211
- --sui-checkbox-border-color: hsl(var(--sui-border-color-1-hsl));
212
- --sui-checkbox-background-color: var(--sui-control-background-color);
213
- --sui-option-border-radius: var(--sui-control-medium-border-radius);
214
- --sui-option-padding: calc((var(--sui-control-medium-height) / 6))
215
- calc((var(--sui-control-medium-height) / 2));
216
- --sui-option-height: var(--sui-control-medium-height);
217
- --sui-listbox-border-radius: var(--sui-control-medium-border-radius);
218
- --sui-listbox-border-color: var(--sui-control-border-color);
219
- --sui-listbox-foreground-color: var(--sui-control-foreground-color);
220
- --sui-listbox-background-color: hsl(var(--sui-background-color-1-hsl));
221
- --sui-textbox-border-radius: var(--sui-control-medium-border-radius);
222
- --sui-textbox-height: var(--sui-control-medium-height);
223
- --sui-textbox-border-color: var(--sui-control-border-color);
224
- --sui-textbox-foreground-color: var(--sui-control-foreground-color);
225
- --sui-textbox-background-color: hsl(var(--sui-background-color-1-hsl));
226
- --sui-textbox-font-family: var(--sui-font-family-default);
227
- --sui-textbox-font-size: var(--sui-font-size-default);
228
- --sui-textbox-singleline-padding: 0 8px;
229
- --sui-textbox-singleline-min-width: 240px;
230
- --sui-textbox-singleline-line-height: var(--sui-line-height-compact);
231
- --sui-textbox-multiline-padding: 12px;
232
- --sui-textbox-multiline-min-width: 480px;
233
- --sui-textbox-multiline-line-height: var(--sui-line-height-comfortable);
234
- --sui-tab-height: var(--sui-control-medium-height);
235
- --sui-tab-small-height: var(--sui-control-small-height);
236
- --sui-tab-medium-height: var(--sui-control-medium-height);
237
- --sui-tab-large-height: var(--sui-control-large-height);
238
- --sui-primary-toolbar-size: 48px;
239
- --sui-secondary-toolbar-size: 40px;
240
- --sui-primary-row-height: 48px;
241
- --sui-secondary-row-height: 40px;
242
- }
243
- @media (pointer: coarse) {
244
- :global(:root),
245
- :global(:host) {
246
- --sui-control-small-height: 30px;
247
- --sui-control-medium-height: 40px;
248
- --sui-control-large-height: 60px;
249
- --sui-checkbox-height: 24px;
250
- --sui-primary-toolbar-size: 56px;
251
- --sui-secondary-toolbar-size: 48px;
252
- --sui-primary-row-height: 56px;
253
- --sui-secondary-row-height: 48px;
254
- }
255
- }
256
- @media (prefers-reduced-transparency) {
257
- :global(:root),
258
- :global(:host) {
259
- --sui-primary-background-color-translucent: hsl(var(--sui-background-color-2-hsl));
260
- --sui-secondary-background-color-translucent: hsl(var(--sui-background-color-3-hsl));
261
- --sui-tertiary-background-color-translucent: hsl(var(--sui-background-color-4-hsl));
262
- }
263
- }
264
- :global(:root[data-theme=light]),
265
- :global(:host[data-theme=light]) {
266
- color-scheme: light;
267
- --sui-foreground-color-1-hsl: var(--sui-base-hue) 5% 5%;
268
- --sui-foreground-color-2-hsl: var(--sui-base-hue) 5% 25%;
269
- --sui-foreground-color-3-hsl: var(--sui-base-hue) 5% 35%;
270
- --sui-foreground-color-4-hsl: var(--sui-base-hue) 5% 45%;
271
- --sui-foreground-color-5-hsl: var(--sui-base-hue) 5% 65%;
272
- --sui-background-color-1-hsl: var(--sui-base-hue) 5% 100%;
273
- --sui-background-color-2-hsl: var(--sui-base-hue) 5% 98%;
274
- --sui-background-color-3-hsl: var(--sui-base-hue) 5% 96%;
275
- --sui-background-color-4-hsl: var(--sui-base-hue) 5% 94%;
276
- --sui-background-color-5-hsl: var(--sui-base-hue) 5% 84%;
277
- --sui-border-color-1-hsl: var(--sui-base-hue) 5% 65%;
278
- --sui-border-color-2-hsl: var(--sui-base-hue) 5% 84%;
279
- --sui-border-color-3-hsl: var(--sui-base-hue) 5% 88%;
280
- --sui-shadow-color: var(--sui-base-hue) 10% 0%;
281
- --sui-primary-accent-color-text: hsl(var(--sui-base-hue) 80% 40%);
282
- --sui-primary-accent-color-light: hsl(var(--sui-base-hue) 80% 45%);
283
- --sui-primary-accent-color: hsl(var(--sui-base-hue) 80% 40%);
284
- --sui-primary-accent-color-dark: hsl(var(--sui-base-hue) 80% 35%);
285
- --sui-primary-accent-color-inverted: hsl(var(--sui-base-hue) 10% 100%);
286
- --sui-primary-accent-color-translucent: hsl(var(--sui-base-hue) 80% 50% / 40%);
287
- --sui-error-color-hue: 0;
288
- --sui-warning-color-hue: 40;
289
- --sui-info-color-hue: 210;
290
- --sui-success-color-hue: 100;
291
- --sui-alert-foreground-color-saturation: 85%;
292
- --sui-alert-foreground-color-lightness: 25%;
293
- --sui-alert-background-color-saturation: 65%;
294
- --sui-alert-background-color-lightness: 90%;
295
- --sui-alert-border-color-saturation: 48%;
296
- --sui-alert-border-color-lightness: 68%;
297
- }
298
- :global(:root[data-theme=dark]),
299
- :global(:host[data-theme=dark]) {
300
- color-scheme: dark;
301
- --sui-foreground-color-1-hsl: var(--sui-base-hue) 10% 95%;
302
- --sui-foreground-color-2-hsl: var(--sui-base-hue) 10% 75%;
303
- --sui-foreground-color-3-hsl: var(--sui-base-hue) 10% 65%;
304
- --sui-foreground-color-4-hsl: var(--sui-base-hue) 10% 55%;
305
- --sui-foreground-color-5-hsl: var(--sui-base-hue) 10% 35%;
306
- --sui-background-color-1-hsl: var(--sui-base-hue) 10% 10%;
307
- --sui-background-color-2-hsl: var(--sui-base-hue) 10% 12%;
308
- --sui-background-color-3-hsl: var(--sui-base-hue) 10% 14%;
309
- --sui-background-color-4-hsl: var(--sui-base-hue) 10% 16%;
310
- --sui-background-color-5-hsl: var(--sui-base-hue) 10% 26%;
311
- --sui-border-color-1-hsl: var(--sui-base-hue) 10% 45%;
312
- --sui-border-color-2-hsl: var(--sui-base-hue) 10% 26%;
313
- --sui-border-color-3-hsl: var(--sui-base-hue) 10% 22%;
314
- --sui-shadow-color: var(--sui-base-hue) 10% 0%;
315
- --sui-primary-accent-color-text: hsl(var(--sui-base-hue) 100% 60%);
316
- --sui-primary-accent-color-light: hsl(var(--sui-base-hue) 100% 45%);
317
- --sui-primary-accent-color: hsl(var(--sui-base-hue) 100% 40%);
318
- --sui-primary-accent-color-dark: hsl(var(--sui-base-hue) 100% 35%);
319
- --sui-primary-accent-color-inverted: hsl(var(--sui-base-hue) 10% 100%);
320
- --sui-primary-accent-color-translucent: hsl(var(--sui-base-hue) 80% 50% / 40%);
321
- --sui-error-color-hue: 0;
322
- --sui-warning-color-hue: 40;
323
- --sui-info-color-hue: 210;
324
- --sui-success-color-hue: 100;
325
- --sui-alert-foreground-color-saturation: 85%;
326
- --sui-alert-foreground-color-lightness: 75%;
327
- --sui-alert-background-color-saturation: 40%;
328
- --sui-alert-background-color-lightness: 10%;
329
- --sui-alert-border-color-saturation: 38%;
330
- --sui-alert-border-color-lightness: 18%;
331
- }
332
- @media (prefers-color-scheme: light) {
333
- :global(:root:not([data-theme])),
334
- :global(:host:not([data-theme])) {
335
- color-scheme: light;
336
- --sui-foreground-color-1-hsl: var(--sui-base-hue) 5% 5%;
337
- --sui-foreground-color-2-hsl: var(--sui-base-hue) 5% 25%;
338
- --sui-foreground-color-3-hsl: var(--sui-base-hue) 5% 35%;
339
- --sui-foreground-color-4-hsl: var(--sui-base-hue) 5% 45%;
340
- --sui-foreground-color-5-hsl: var(--sui-base-hue) 5% 65%;
341
- --sui-background-color-1-hsl: var(--sui-base-hue) 5% 100%;
342
- --sui-background-color-2-hsl: var(--sui-base-hue) 5% 98%;
343
- --sui-background-color-3-hsl: var(--sui-base-hue) 5% 96%;
344
- --sui-background-color-4-hsl: var(--sui-base-hue) 5% 94%;
345
- --sui-background-color-5-hsl: var(--sui-base-hue) 5% 84%;
346
- --sui-border-color-1-hsl: var(--sui-base-hue) 5% 65%;
347
- --sui-border-color-2-hsl: var(--sui-base-hue) 5% 84%;
348
- --sui-border-color-3-hsl: var(--sui-base-hue) 5% 88%;
349
- --sui-shadow-color: var(--sui-base-hue) 10% 0%;
350
- --sui-primary-accent-color-text: hsl(var(--sui-base-hue) 80% 40%);
351
- --sui-primary-accent-color-light: hsl(var(--sui-base-hue) 80% 45%);
352
- --sui-primary-accent-color: hsl(var(--sui-base-hue) 80% 40%);
353
- --sui-primary-accent-color-dark: hsl(var(--sui-base-hue) 80% 35%);
354
- --sui-primary-accent-color-inverted: hsl(var(--sui-base-hue) 10% 100%);
355
- --sui-primary-accent-color-translucent: hsl(var(--sui-base-hue) 80% 50% / 40%);
356
- --sui-error-color-hue: 0;
357
- --sui-warning-color-hue: 40;
358
- --sui-info-color-hue: 210;
359
- --sui-success-color-hue: 100;
360
- --sui-alert-foreground-color-saturation: 85%;
361
- --sui-alert-foreground-color-lightness: 25%;
362
- --sui-alert-background-color-saturation: 65%;
363
- --sui-alert-background-color-lightness: 90%;
364
- --sui-alert-border-color-saturation: 48%;
365
- --sui-alert-border-color-lightness: 68%;
366
- }
367
- }
368
- @media (prefers-color-scheme: dark) {
369
- :global(:root:not([data-theme])),
370
- :global(:host:not([data-theme])) {
371
- color-scheme: dark;
372
- --sui-foreground-color-1-hsl: var(--sui-base-hue) 10% 95%;
373
- --sui-foreground-color-2-hsl: var(--sui-base-hue) 10% 75%;
374
- --sui-foreground-color-3-hsl: var(--sui-base-hue) 10% 65%;
375
- --sui-foreground-color-4-hsl: var(--sui-base-hue) 10% 55%;
376
- --sui-foreground-color-5-hsl: var(--sui-base-hue) 10% 35%;
377
- --sui-background-color-1-hsl: var(--sui-base-hue) 10% 10%;
378
- --sui-background-color-2-hsl: var(--sui-base-hue) 10% 12%;
379
- --sui-background-color-3-hsl: var(--sui-base-hue) 10% 14%;
380
- --sui-background-color-4-hsl: var(--sui-base-hue) 10% 16%;
381
- --sui-background-color-5-hsl: var(--sui-base-hue) 10% 26%;
382
- --sui-border-color-1-hsl: var(--sui-base-hue) 10% 45%;
383
- --sui-border-color-2-hsl: var(--sui-base-hue) 10% 26%;
384
- --sui-border-color-3-hsl: var(--sui-base-hue) 10% 22%;
385
- --sui-shadow-color: var(--sui-base-hue) 10% 0%;
386
- --sui-primary-accent-color-text: hsl(var(--sui-base-hue) 100% 60%);
387
- --sui-primary-accent-color-light: hsl(var(--sui-base-hue) 100% 45%);
388
- --sui-primary-accent-color: hsl(var(--sui-base-hue) 100% 40%);
389
- --sui-primary-accent-color-dark: hsl(var(--sui-base-hue) 100% 35%);
390
- --sui-primary-accent-color-inverted: hsl(var(--sui-base-hue) 10% 100%);
391
- --sui-primary-accent-color-translucent: hsl(var(--sui-base-hue) 80% 50% / 40%);
392
- --sui-error-color-hue: 0;
393
- --sui-warning-color-hue: 40;
394
- --sui-info-color-hue: 210;
395
- --sui-success-color-hue: 100;
396
- --sui-alert-foreground-color-saturation: 85%;
397
- --sui-alert-foreground-color-lightness: 75%;
398
- --sui-alert-background-color-saturation: 40%;
399
- --sui-alert-background-color-lightness: 10%;
400
- --sui-alert-border-color-saturation: 38%;
401
- --sui-alert-border-color-lightness: 18%;
402
- }
403
- }
404
-
405
- :global(.material-symbols-outlined) {
406
- font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
407
- }
408
-
409
- :global(*),
410
- :global(::before),
411
- :global(::after) {
412
- overflow-anchor: none;
413
- scroll-behavior: smooth;
414
- box-sizing: border-box;
415
- outline-offset: 0px;
416
- outline-width: var(--sui-focus-ring-width) !important;
417
- outline-style: solid;
418
- outline-color: transparent;
419
- border-width: 0;
420
- border-style: solid;
421
- vertical-align: top;
422
- }
423
- @media (prefers-reduced-motion) {
424
- :global(*),
425
- :global(::before),
426
- :global(::after) {
427
- scroll-behavior: auto;
428
- transition-duration: 1ms !important;
429
- }
430
- }
431
-
432
- :global(::selection) {
433
- background-color: var(--sui-primary-accent-color-translucent);
434
- }
435
-
436
- :global(*) {
437
- -webkit-tap-highlight-color: transparent;
438
- }
439
-
440
- :global(:focus) {
441
- z-index: 1;
442
- outline-width: 0;
443
- }
444
-
445
- :global(:focus-visible) {
446
- outline-color: var(--sui-primary-accent-color-translucent);
447
- z-index: 2;
448
- }
449
-
450
- :global(h1),
451
- :global(h2),
452
- :global(h3),
453
- :global(h4),
454
- :global(h5),
455
- :global(h6) {
456
- margin: 0;
457
- font-weight: var(--sui-font-weight-bold);
458
- line-height: var(--sui-line-height-default);
459
- }
460
-
461
- :global(h1) {
462
- font-size: 32px;
463
- }
464
-
465
- :global(h2) {
466
- font-size: 28px;
467
- }
468
-
469
- :global(h3) {
470
- font-size: 24px;
471
- }
472
-
473
- :global(h4) {
474
- font-size: 20px;
475
- }
476
-
477
- :global(h5) {
478
- font-size: 16px;
479
- }
480
-
481
- :global(h6) {
482
- font-size: 12px;
483
- }
484
-
485
- :global(strong) {
486
- font-weight: var(--sui-font-weight-bold);
487
- }
488
-
489
- :global(a) {
490
- color: var(--sui-primary-accent-color-text);
491
- text-decoration: none;
492
- text-underline-offset: 2px;
493
- }
494
- :global(a:hover), :global(a:focus), :global(a:active) {
495
- text-decoration: underline;
496
- }
497
- :global(:root[data-underline-links=true]) :global(a), :global(:host[data-underline-links=true]) :global(a) {
498
- text-decoration: underline;
499
- }
500
-
501
- :global(p),
502
- :global(li) {
503
- line-height: var(--sui-line-height-comfortable);
504
- }
505
-
506
- :global(ul),
507
- :global(ol) {
508
- padding-left: 2em;
509
- }
510
-
511
- :global(code),
512
- :global(pre) {
513
- border-radius: 4px;
514
- background-color: var(--sui-code-background-color);
515
- font-family: var(--sui-font-family-monospace);
516
- font-size: var(--sui-font-size-monospace);
517
- vertical-align: -0.05em;
518
- }
519
-
520
- :global(pre) {
521
- padding: 8px;
522
- line-height: var(--sui-line-height-compact);
523
- -webkit-user-select: text;
524
- user-select: text;
525
- }
526
-
527
- :global(code) {
528
- padding: 2px 4px;
529
- }
530
-
531
- :global(table) {
532
- border-collapse: collapse;
533
- }
534
-
535
- :global(th),
536
- :global(td) {
537
- border: 1px solid var(--sui-textbox-border-color);
538
- padding: 8px;
539
- }
540
-
541
- :global(blockquote) {
542
- margin-left: 16px;
543
- border-left: 4px solid var(--sui-textbox-border-color);
544
- padding-left: 12px;
545
- }
546
-
547
- :global(.disabled),
548
- :global(.readonly),
549
- :global([aria-disabled=true]),
550
- :global([aria-readonly=true]),
551
- :global([inert]) {
552
- cursor: default;
553
- pointer-events: none;
554
- -webkit-user-select: none;
555
- user-select: none;
556
- filter: grayscale(1) opacity(0.35);
557
- }
558
- :global(.disabled) :global(*),
559
- :global(.readonly) :global(*),
560
- :global([aria-disabled=true]) :global(*),
561
- :global([aria-readonly=true]) :global(*),
562
- :global([inert]) :global(*) {
563
- filter: grayscale(0) opacity(1);
564
- }
565
-
566
- :global(.disabled) :global(*),
567
- :global(.readonly) :global(*),
568
- :global([aria-disabled=true]) :global(*),
569
- :global([aria-readonly=true]) :global(*),
570
- :global([inert]) :global(*) {
571
- cursor: default;
572
- pointer-events: none;
573
- -webkit-user-select: none;
574
- user-select: none;
575
- }
576
-
577
- :global(.font-loader) {
90
+ <style global>:global(.font-loader) {
578
91
  position: absolute;
579
92
  left: -99999px;
580
93
  font-family: var(--sui-font-family-default);
@@ -8,7 +8,7 @@
8
8
  */
9
9
  export default class AppShell extends SvelteComponent<{
10
10
  [x: string]: any;
11
- orientation?: "vertical" | "horizontal" | undefined;
11
+ orientation?: "horizontal" | "vertical" | undefined;
12
12
  }, {
13
13
  dragover: DragEvent;
14
14
  drop: DragEvent;
@@ -25,7 +25,7 @@ import { SvelteComponent } from "svelte";
25
25
  declare const __propDef: {
26
26
  props: {
27
27
  [x: string]: any;
28
- orientation?: 'horizontal' | 'vertical' | undefined;
28
+ orientation?: "horizontal" | "vertical" | undefined;
29
29
  };
30
30
  events: {
31
31
  dragover: DragEvent;
@@ -36,5 +36,7 @@ declare const __propDef: {
36
36
  slots: {
37
37
  default: {};
38
38
  };
39
+ exports?: undefined;
40
+ bindings?: undefined;
39
41
  };
40
42
  export {};
@@ -33,5 +33,7 @@ declare const __propDef: {
33
33
  slots: {
34
34
  default: {};
35
35
  };
36
+ exports?: undefined;
37
+ bindings?: undefined;
36
38
  };
37
39
  export {};
@@ -7,7 +7,7 @@ export default class Modal extends SvelteComponent<{
7
7
  class?: string | undefined;
8
8
  close?: ((returnValue: string) => void) | undefined;
9
9
  dialog?: HTMLDialogElement | undefined;
10
- role?: "dialog" | "alertdialog" | "none" | undefined;
10
+ role?: "dialog" | "none" | "alertdialog" | undefined;
11
11
  open?: boolean | undefined;
12
12
  showBackdrop?: boolean | undefined;
13
13
  lightDismiss?: boolean | undefined;
@@ -26,28 +26,28 @@ export default class Modal extends SvelteComponent<{
26
26
  }> {
27
27
  get close(): (returnValue: string) => void;
28
28
  /**accessor*/
29
- set class(arg: string | undefined);
29
+ set class(_: string | undefined);
30
30
  get class(): string | undefined;
31
31
  /**accessor*/
32
- set role(arg: "dialog" | "alertdialog" | "none" | undefined);
33
- get role(): "dialog" | "alertdialog" | "none" | undefined;
32
+ set role(_: "dialog" | "none" | "alertdialog" | undefined);
33
+ get role(): "dialog" | "none" | "alertdialog" | undefined;
34
34
  /**accessor*/
35
- set open(arg: boolean | undefined);
35
+ set open(_: boolean | undefined);
36
36
  get open(): boolean | undefined;
37
37
  /**accessor*/
38
- set showBackdrop(arg: boolean | undefined);
38
+ set showBackdrop(_: boolean | undefined);
39
39
  get showBackdrop(): boolean | undefined;
40
40
  /**accessor*/
41
- set lightDismiss(arg: boolean | undefined);
41
+ set lightDismiss(_: boolean | undefined);
42
42
  get lightDismiss(): boolean | undefined;
43
43
  /**accessor*/
44
- set escapeDismiss(arg: boolean | undefined);
44
+ set escapeDismiss(_: boolean | undefined);
45
45
  get escapeDismiss(): boolean | undefined;
46
46
  /**accessor*/
47
- set keepContent(arg: boolean | undefined);
47
+ set keepContent(_: boolean | undefined);
48
48
  get keepContent(): boolean | undefined;
49
49
  /**accessor*/
50
- set dialog(arg: HTMLDialogElement | undefined);
50
+ set dialog(_: HTMLDialogElement | undefined);
51
51
  get dialog(): HTMLDialogElement | undefined;
52
52
  }
53
53
  export type ModalProps = typeof __propDef.props;
@@ -60,7 +60,7 @@ declare const __propDef: {
60
60
  class?: string | undefined;
61
61
  close?: ((returnValue: string) => void) | undefined;
62
62
  dialog?: HTMLDialogElement | undefined;
63
- role?: "dialog" | "alertdialog" | "none" | undefined;
63
+ role?: "dialog" | "none" | "alertdialog" | undefined;
64
64
  open?: boolean | undefined;
65
65
  showBackdrop?: boolean | undefined;
66
66
  lightDismiss?: boolean | undefined;
@@ -79,5 +79,7 @@ declare const __propDef: {
79
79
  'extra-content': {};
80
80
  default: {};
81
81
  };
82
+ exports?: undefined;
83
+ bindings?: undefined;
82
84
  };
83
85
  export {};
@@ -28,28 +28,28 @@ export default class Popup extends SvelteComponent<{
28
28
  default: {};
29
29
  }> {
30
30
  /**accessor*/
31
- set class(arg: string | undefined);
31
+ set class(_: string | undefined);
32
32
  get class(): string | undefined;
33
33
  /**accessor*/
34
- set open(arg: import("svelte/store").Writable<boolean> | undefined);
34
+ set open(_: import("svelte/store").Writable<boolean> | undefined);
35
35
  get open(): import("svelte/store").Writable<boolean> | undefined;
36
36
  /**accessor*/
37
- set showBackdrop(arg: boolean | undefined);
37
+ set showBackdrop(_: boolean | undefined);
38
38
  get showBackdrop(): boolean | undefined;
39
39
  /**accessor*/
40
- set anchor(arg: HTMLElement | undefined);
40
+ set anchor(_: HTMLElement | undefined);
41
41
  get anchor(): HTMLElement | undefined;
42
42
  /**accessor*/
43
- set content(arg: HTMLElement | undefined);
43
+ set content(_: HTMLElement | undefined);
44
44
  get content(): HTMLElement | undefined;
45
45
  /**accessor*/
46
- set position(arg: PopupPosition | undefined);
46
+ set position(_: PopupPosition | undefined);
47
47
  get position(): PopupPosition | undefined;
48
48
  /**accessor*/
49
- set positionBaseElement(arg: HTMLElement | undefined);
49
+ set positionBaseElement(_: HTMLElement | undefined);
50
50
  get positionBaseElement(): HTMLElement | undefined;
51
51
  /**accessor*/
52
- set touchOptimized(arg: boolean | undefined);
52
+ set touchOptimized(_: boolean | undefined);
53
53
  get touchOptimized(): boolean | undefined;
54
54
  }
55
55
  export type PopupProps = typeof __propDef.props;
@@ -84,5 +84,7 @@ declare const __propDef: {
84
84
  };
85
85
  default: {};
86
86
  };
87
+ exports?: undefined;
88
+ bindings?: undefined;
87
89
  };
88
90
  export {};
@@ -26,5 +26,7 @@ declare const __propDef: {
26
26
  slots: {
27
27
  default: {};
28
28
  };
29
+ exports?: undefined;
30
+ bindings?: undefined;
29
31
  };
30
32
  export {};
package/package/index.js CHANGED
@@ -10,14 +10,7 @@ import { addMessages, init } from 'svelte-i18n';
10
10
  */
11
11
  export const initLocales = ({ fallbackLocale = 'en', initialLocale = 'en' } = {}) => {
12
12
  /** @type {{ [key: string]: { strings: object }}} */
13
- let modules = import.meta.glob('./locales/*.js', { eager: true });
14
-
15
- // The file path must be relative during local development, or the import may fail when using
16
- // `pnpm link -g @sveltia/ui`. On the other hand, it must start with `$lib` when being imported
17
- // with `pnpm install @sveltia/ui`, otherwise the path cannot be resolved.
18
- if (!Object.keys(modules).length) {
19
- modules = import.meta.glob('$lib/locales/*.js', { eager: true });
20
- }
13
+ const modules = import.meta.glob('./locales/*.js', { eager: true });
21
14
 
22
15
  Object.entries(modules).forEach(([path, { strings }]) => {
23
16
  const [, locale] = /** @type {string[]} */ (path.match(/([a-zA-Z-]+)\.js/));