@sveltia/ui 0.41.5 → 0.42.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 (76) hide show
  1. package/dist/components/alert/alert.svelte +36 -30
  2. package/dist/components/alert/infobar.svelte +55 -45
  3. package/dist/components/bottom-navigation/bottom-navigation.svelte +21 -15
  4. package/dist/components/button/button-group.svelte +7 -5
  5. package/dist/components/button/button.svelte +274 -175
  6. package/dist/components/button/floating-action-button-wrapper.svelte +23 -18
  7. package/dist/components/button/select-button-group.svelte +57 -41
  8. package/dist/components/button/split-button.svelte +25 -18
  9. package/dist/components/calendar/calendar.svelte +103 -80
  10. package/dist/components/checkbox/checkbox-group.svelte +22 -19
  11. package/dist/components/checkbox/checkbox.svelte +91 -63
  12. package/dist/components/dialog/dialog.svelte +105 -87
  13. package/dist/components/dialog/prompt-dialog.svelte +5 -3
  14. package/dist/components/disclosure/disclosure.svelte +34 -21
  15. package/dist/components/divider/divider.svelte +18 -14
  16. package/dist/components/divider/spacer.svelte +13 -8
  17. package/dist/components/drawer/drawer.svelte +343 -190
  18. package/dist/components/grid/grid-body.svelte +16 -14
  19. package/dist/components/grid/grid-cell.svelte +5 -3
  20. package/dist/components/grid/grid-col-header.svelte +5 -3
  21. package/dist/components/grid/grid-foot.svelte +5 -3
  22. package/dist/components/grid/grid-head.svelte +5 -3
  23. package/dist/components/grid/grid-row-header.svelte +6 -4
  24. package/dist/components/grid/grid-row.svelte +6 -4
  25. package/dist/components/grid/grid.svelte +18 -12
  26. package/dist/components/icon/icon.svelte +7 -5
  27. package/dist/components/listbox/listbox.svelte +78 -61
  28. package/dist/components/listbox/option-group.svelte +15 -11
  29. package/dist/components/listbox/option.svelte +54 -39
  30. package/dist/components/menu/menu-item-group.svelte +5 -3
  31. package/dist/components/menu/menu-item.svelte +67 -51
  32. package/dist/components/menu/menu.svelte +21 -17
  33. package/dist/components/progressbar/progressbar.svelte +24 -15
  34. package/dist/components/radio/radio-group.svelte +40 -31
  35. package/dist/components/radio/radio.svelte +81 -63
  36. package/dist/components/resizable-pane/resizable-handle.svelte +60 -48
  37. package/dist/components/resizable-pane/resizable-pane-group.svelte +18 -14
  38. package/dist/components/select/combobox.svelte +135 -112
  39. package/dist/components/select/select-tags.svelte +73 -57
  40. package/dist/components/slider/slider.svelte +94 -74
  41. package/dist/components/switch/switch.svelte +115 -81
  42. package/dist/components/table/table-body.svelte +16 -14
  43. package/dist/components/table/table-cell.svelte +5 -3
  44. package/dist/components/table/table-col-header.svelte +5 -3
  45. package/dist/components/table/table-foot.svelte +5 -3
  46. package/dist/components/table/table-head.svelte +5 -3
  47. package/dist/components/table/table-row-header.svelte +6 -4
  48. package/dist/components/table/table-row.svelte +6 -4
  49. package/dist/components/table/table.svelte +18 -12
  50. package/dist/components/tabs/tab-box.svelte +9 -6
  51. package/dist/components/tabs/tab-list.svelte +91 -73
  52. package/dist/components/tabs/tab-panel.svelte +11 -7
  53. package/dist/components/tabs/tab-panels.svelte +19 -14
  54. package/dist/components/text-editor/code-editor.svelte +10 -7
  55. package/dist/components/text-editor/lexical-root.svelte +221 -160
  56. package/dist/components/text-editor/text-editor.svelte +25 -18
  57. package/dist/components/text-editor/toolbar/toolbar-wrapper.svelte +44 -37
  58. package/dist/components/text-field/number-input.svelte +87 -68
  59. package/dist/components/text-field/password-input.svelte +52 -42
  60. package/dist/components/text-field/search-bar.svelte +64 -53
  61. package/dist/components/text-field/secret-input.svelte +61 -46
  62. package/dist/components/text-field/text-area.svelte +80 -68
  63. package/dist/components/text-field/text-input.svelte +138 -106
  64. package/dist/components/toast/toast.svelte +104 -89
  65. package/dist/components/toolbar/toolbar.svelte +70 -54
  66. package/dist/components/typography/truncated-text.svelte +9 -7
  67. package/dist/components/util/app-shell.svelte +40 -493
  68. package/dist/components/util/empty-state.svelte +13 -11
  69. package/dist/components/util/group.svelte +5 -3
  70. package/dist/components/util/modal.svelte +59 -48
  71. package/dist/components/util/popup.svelte +87 -67
  72. package/dist/index.d.ts +1 -0
  73. package/dist/index.js +1 -4
  74. package/dist/services/i18n.d.ts +6 -0
  75. package/dist/services/i18n.js +19 -14
  76. package/package.json +20 -20
package/dist/components/alert/alert.svelte CHANGED
@@ -42,33 +42,39 @@
42
42
  {@render children?.()}
43
43
  </div>
44
44
 
45
- <style>.alert {
46
- display: flex;
47
- align-items: center;
48
- gap: var(--gap, 8px);
49
- padding: var(--padding, 8px);
50
- border-width: var(--border-width, var(--sui-control-medium-border-width));
51
- border-style: var(--border-style, solid);
52
- border-radius: var(--border-radius, var(--sui-control-medium-border-radius));
53
- font-size: var(--font-size, var(--sui-font-size-default));
54
- }
55
- .alert.error {
56
- border-color: var(--sui-error-border-color);
57
- color: var(--sui-error-foreground-color);
58
- background-color: var(--sui-error-background-color);
59
- }
60
- .alert.warning {
61
- border-color: var(--sui-warning-border-color);
62
- color: var(--sui-warning-foreground-color);
63
- background-color: var(--sui-warning-background-color);
64
- }
65
- .alert.info {
66
- border-color: var(--sui-info-border-color);
67
- color: var(--sui-info-foreground-color);
68
- background-color: var(--sui-info-background-color);
69
- }
70
- .alert.success {
71
- border-color: var(--sui-success-border-color);
72
- color: var(--sui-success-foreground-color);
73
- background-color: var(--sui-success-background-color);
74
- }</style>
45
+ <style lang="scss">
46
+ .alert {
47
+ display: flex;
48
+ align-items: center;
49
+ gap: var(--gap, 8px);
50
+ padding: var(--padding, 8px);
51
+ border-width: var(--border-width, var(--sui-control-medium-border-width));
52
+ border-style: var(--border-style, solid);
53
+ border-radius: var(--border-radius, var(--sui-control-medium-border-radius));
54
+ font-size: var(--font-size, var(--sui-font-size-default));
55
+
56
+ &.error {
57
+ border-color: var(--sui-error-border-color);
58
+ color: var(--sui-error-foreground-color);
59
+ background-color: var(--sui-error-background-color);
60
+ }
61
+
62
+ &.warning {
63
+ border-color: var(--sui-warning-border-color);
64
+ color: var(--sui-warning-foreground-color);
65
+ background-color: var(--sui-warning-background-color);
66
+ }
67
+
68
+ &.info {
69
+ border-color: var(--sui-info-border-color);
70
+ color: var(--sui-info-foreground-color);
71
+ background-color: var(--sui-info-background-color);
72
+ }
73
+
74
+ &.success {
75
+ border-color: var(--sui-success-border-color);
76
+ color: var(--sui-success-foreground-color);
77
+ background-color: var(--sui-success-background-color);
78
+ }
79
+ }
80
+ </style>
package/dist/components/alert/infobar.svelte CHANGED
@@ -58,49 +58,59 @@
58
58
  </div>
59
59
  {/if}
60
60
 
61
- <style>.infobar {
62
- flex: none;
63
- display: flex;
64
- align-items: center;
65
- gap: var(--sui-infobar-gap, 8px);
66
- border-width: var(--sui-infobar-border-width, 0 0 1px);
67
- border-style: var(--sui-infobar-border-style, solid);
68
- padding: var(--sui-infobar-padding, 0);
69
- min-height: var(--sui-infobar-min-height, 32px);
70
- font-size: var(--sui-infobar-font-size, var(--sui-font-size-small));
71
- }
72
- .infobar.info {
73
- border-color: var(--sui-info-border-color);
74
- color: var(--sui-info-foreground-color);
75
- background-color: var(--sui-info-background-color);
76
- }
77
- .infobar.warning {
78
- border-color: var(--sui-warning-border-color);
79
- color: var(--sui-warning-foreground-color);
80
- background-color: var(--sui-warning-background-color);
81
- }
82
- .infobar.error {
83
- border-color: var(--sui-error-border-color);
84
- color: var(--sui-error-foreground-color);
85
- background-color: var(--sui-error-background-color);
86
- }
87
- .infobar.success {
88
- border-color: var(--sui-success-border-color);
89
- color: var(--sui-success-foreground-color);
90
- background-color: var(--sui-success-background-color);
91
- }
61
+ <style lang="scss">
62
+ .infobar {
63
+ flex: none;
64
+ display: flex;
65
+ align-items: center;
66
+ gap: var(--sui-infobar-gap, 8px);
67
+ border-width: var(--sui-infobar-border-width, 0 0 1px);
68
+ border-style: var(--sui-infobar-border-style, solid);
69
+ padding: var(--sui-infobar-padding, 0);
70
+ min-height: var(--sui-infobar-min-height, 32px);
71
+ font-size: var(--sui-infobar-font-size, var(--sui-font-size-small));
92
72
 
93
- .message {
94
- flex: auto;
95
- display: flex;
96
- align-items: center;
97
- justify-content: var(--sui-infobar-message-justify-content, start);
98
- gap: var(--sui-infobar-message-gap, 6px);
99
- padding: var(--sui-infobar-message-padding, 6px);
100
- }
101
- .message :global(button) {
102
- font-size: inherit !important;
103
- }
104
- .message :global(.icon) {
105
- font-size: 16px; /* !hardcoded */
106
- }</style>
73
+ &.info {
74
+ border-color: var(--sui-info-border-color);
75
+ color: var(--sui-info-foreground-color);
76
+ background-color: var(--sui-info-background-color);
77
+ }
78
+
79
+ &.warning {
80
+ border-color: var(--sui-warning-border-color);
81
+ color: var(--sui-warning-foreground-color);
82
+ background-color: var(--sui-warning-background-color);
83
+ }
84
+
85
+ &.error {
86
+ border-color: var(--sui-error-border-color);
87
+ color: var(--sui-error-foreground-color);
88
+ background-color: var(--sui-error-background-color);
89
+ }
90
+
91
+ &.success {
92
+ border-color: var(--sui-success-border-color);
93
+ color: var(--sui-success-foreground-color);
94
+ background-color: var(--sui-success-background-color);
95
+ }
96
+ }
97
+
98
+ .message {
99
+ flex: auto;
100
+ display: flex;
101
+ align-items: center;
102
+ justify-content: var(--sui-infobar-message-justify-content, start);
103
+ gap: var(--sui-infobar-message-gap, 6px);
104
+ padding: var(--sui-infobar-message-padding, 6px);
105
+
106
+ :global {
107
+ button {
108
+ font-size: inherit !important;
109
+ }
110
+
111
+ .icon {
112
+ font-size: 16px; /* !hardcoded */
113
+ }
114
+ }
115
+ }
116
+ </style>
package/dist/components/bottom-navigation/bottom-navigation.svelte CHANGED
@@ -30,18 +30,24 @@
30
30
  {@render children?.()}
31
31
  </div>
32
32
 
33
- <style>.bottom-navigation {
34
- height: var(--sui-bottom-navigation-height, var(--sui-primary-toolbar-size));
35
- border-top-width: var(--sui-bottom-navigation-border-color, 1px);
36
- border-top-style: var(--sui-bottom-navigation-border-style, solid);
37
- border-top-color: var(--sui-bottom-navigation-border-color, var(--sui-secondary-border-color));
38
- }
39
- .bottom-navigation:is([inert], [hidden]) {
40
- display: none;
41
- }
42
- .bottom-navigation :global(.buttons) {
43
- flex: auto;
44
- display: flex;
45
- align-items: center;
46
- justify-content: space-evenly;
47
- }</style>
33
+ <style lang="scss">
34
+ .bottom-navigation {
35
+ height: var(--sui-bottom-navigation-height, var(--sui-primary-toolbar-size));
36
+ border-top-width: var(--sui-bottom-navigation-border-color, 1px);
37
+ border-top-style: var(--sui-bottom-navigation-border-style, solid);
38
+ border-top-color: var(--sui-bottom-navigation-border-color, var(--sui-secondary-border-color));
39
+
40
+ &:is([inert], [hidden]) {
41
+ display: none;
42
+ }
43
+
44
+ :global {
45
+ .buttons {
46
+ flex: auto;
47
+ display: flex;
48
+ align-items: center;
49
+ justify-content: space-evenly;
50
+ }
51
+ }
52
+ }
53
+ </style>
package/dist/components/button/button-group.svelte CHANGED
@@ -27,8 +27,10 @@
27
27
  {@render children?.()}
28
28
  </div>
29
29
 
30
- <style>.button-group {
31
- flex: none;
32
- display: inline-flex;
33
- align-items: center;
34
- }</style>
30
+ <style lang="scss">
31
+ .button-group {
32
+ flex: none;
33
+ display: inline-flex;
34
+ align-items: center;
35
+ }
36
+ </style>