@sveltia/ui 0.42.0 → 0.42.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.
Files changed (72) hide show
  1. package/dist/components/alert/alert.svelte +30 -36
  2. package/dist/components/alert/infobar.svelte +45 -55
  3. package/dist/components/bottom-navigation/bottom-navigation.svelte +15 -21
  4. package/dist/components/button/button-group.svelte +5 -7
  5. package/dist/components/button/button.svelte +175 -274
  6. package/dist/components/button/floating-action-button-wrapper.svelte +18 -23
  7. package/dist/components/button/select-button-group.svelte +41 -57
  8. package/dist/components/button/split-button.svelte +18 -25
  9. package/dist/components/calendar/calendar.svelte +80 -103
  10. package/dist/components/checkbox/checkbox-group.svelte +19 -22
  11. package/dist/components/checkbox/checkbox.svelte +63 -91
  12. package/dist/components/dialog/dialog.svelte +87 -105
  13. package/dist/components/dialog/prompt-dialog.svelte +3 -5
  14. package/dist/components/disclosure/disclosure.svelte +21 -34
  15. package/dist/components/divider/divider.svelte +14 -18
  16. package/dist/components/divider/spacer.svelte +8 -13
  17. package/dist/components/drawer/drawer.svelte +190 -343
  18. package/dist/components/grid/grid-body.svelte +14 -16
  19. package/dist/components/grid/grid-cell.svelte +3 -5
  20. package/dist/components/grid/grid-col-header.svelte +3 -5
  21. package/dist/components/grid/grid-foot.svelte +3 -5
  22. package/dist/components/grid/grid-head.svelte +3 -5
  23. package/dist/components/grid/grid-row-header.svelte +4 -6
  24. package/dist/components/grid/grid-row.svelte +4 -6
  25. package/dist/components/grid/grid.svelte +12 -18
  26. package/dist/components/icon/icon.svelte +5 -7
  27. package/dist/components/listbox/listbox.svelte +61 -78
  28. package/dist/components/listbox/option-group.svelte +11 -15
  29. package/dist/components/listbox/option.svelte +39 -54
  30. package/dist/components/menu/menu-item-group.svelte +3 -5
  31. package/dist/components/menu/menu-item.svelte +51 -67
  32. package/dist/components/menu/menu.svelte +17 -21
  33. package/dist/components/progressbar/progressbar.svelte +15 -24
  34. package/dist/components/radio/radio-group.svelte +31 -40
  35. package/dist/components/radio/radio.svelte +63 -81
  36. package/dist/components/resizable-pane/resizable-handle.svelte +48 -60
  37. package/dist/components/resizable-pane/resizable-pane-group.svelte +14 -18
  38. package/dist/components/select/combobox.svelte +112 -135
  39. package/dist/components/select/select-tags.svelte +57 -73
  40. package/dist/components/slider/slider.svelte +74 -94
  41. package/dist/components/switch/switch.svelte +81 -115
  42. package/dist/components/table/table-body.svelte +14 -16
  43. package/dist/components/table/table-cell.svelte +3 -5
  44. package/dist/components/table/table-col-header.svelte +3 -5
  45. package/dist/components/table/table-foot.svelte +3 -5
  46. package/dist/components/table/table-head.svelte +3 -5
  47. package/dist/components/table/table-row-header.svelte +4 -6
  48. package/dist/components/table/table-row.svelte +4 -6
  49. package/dist/components/table/table.svelte +12 -18
  50. package/dist/components/tabs/tab-box.svelte +6 -9
  51. package/dist/components/tabs/tab-list.svelte +73 -91
  52. package/dist/components/tabs/tab-panel.svelte +7 -11
  53. package/dist/components/tabs/tab-panels.svelte +14 -19
  54. package/dist/components/text-editor/code-editor.svelte +7 -10
  55. package/dist/components/text-editor/lexical-root.svelte +160 -221
  56. package/dist/components/text-editor/text-editor.svelte +18 -25
  57. package/dist/components/text-editor/toolbar/toolbar-wrapper.svelte +37 -44
  58. package/dist/components/text-field/number-input.svelte +68 -87
  59. package/dist/components/text-field/password-input.svelte +42 -52
  60. package/dist/components/text-field/search-bar.svelte +53 -64
  61. package/dist/components/text-field/secret-input.svelte +46 -61
  62. package/dist/components/text-field/text-area.svelte +68 -80
  63. package/dist/components/text-field/text-input.svelte +106 -138
  64. package/dist/components/toast/toast.svelte +89 -104
  65. package/dist/components/toolbar/toolbar.svelte +54 -70
  66. package/dist/components/typography/truncated-text.svelte +7 -9
  67. package/dist/components/util/app-shell.svelte +493 -35
  68. package/dist/components/util/empty-state.svelte +11 -13
  69. package/dist/components/util/group.svelte +3 -5
  70. package/dist/components/util/modal.svelte +48 -59
  71. package/dist/components/util/popup.svelte +67 -87
  72. package/package.json +1 -1
package/dist/components/alert/alert.svelte CHANGED
@@ -42,39 +42,33 @@
42
42
  {@render children?.()}
43
43
  </div>
44
44
 
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>
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>
package/dist/components/alert/infobar.svelte CHANGED
@@ -58,59 +58,49 @@
58
58
  </div>
59
59
  {/if}
60
60
 
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));
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
+ }
72
92
 
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>
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>
package/dist/components/bottom-navigation/bottom-navigation.svelte CHANGED
@@ -30,24 +30,18 @@
30
30
  {@render children?.()}
31
31
  </div>
32
32
 
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>
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>
package/dist/components/button/button-group.svelte CHANGED
@@ -27,10 +27,8 @@
27
27
  {@render children?.()}
28
28
  </div>
29
29
 
30
- <style lang="scss">
31
- .button-group {
32
- flex: none;
33
- display: inline-flex;
34
- align-items: center;
35
- }
36
- </style>
30
+ <style>.button-group {
31
+ flex: none;
32
+ display: inline-flex;
33
+ align-items: center;
34
+ }</style>