@sveltia/ui 0.20.1 → 0.21.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.
@@ -70,209 +70,211 @@
70
70
  --sui-alert-border-color-lightness: 18%;
71
71
  }
72
72
 
73
- :root,
74
- :host {
75
- // Base HSL values
76
- --sui-base-hue: 210;
77
- // Foreground
78
- --sui-highlight-foreground-color: hsl(var(--sui-foreground-color-1-hsl));
79
- --sui-primary-foreground-color: hsl(var(--sui-foreground-color-2-hsl));
80
- --sui-secondary-foreground-color: hsl(var(--sui-foreground-color-3-hsl));
81
- --sui-tertiary-foreground-color: hsl(var(--sui-foreground-color-4-hsl));
82
- --sui-disabled-foreground-color: hsl(var(--sui-foreground-color-5-hsl));
83
- --sui-error-foreground-color: hsl(
84
- var(--sui-error-color-hue) var(--sui-alert-foreground-color-saturation)
85
- var(--sui-alert-foreground-color-lightness)
86
- );
87
- --sui-warning-foreground-color: hsl(
88
- var(--sui-warning-color-hue) var(--sui-alert-foreground-color-saturation)
89
- var(--sui-alert-foreground-color-lightness)
90
- );
91
- --sui-info-foreground-color: hsl(
92
- var(--sui-info-color-hue) var(--sui-alert-foreground-color-saturation)
93
- var(--sui-alert-foreground-color-lightness)
94
- );
95
- --sui-success-foreground-color: hsl(
96
- var(--sui-success-color-hue) var(--sui-alert-foreground-color-saturation)
97
- var(--sui-alert-foreground-color-lightness)
98
- );
99
- // Background
100
- --sui-hover-background-color: hsl(var(--sui-background-color-5-hsl) / 35%);
101
- --sui-selected-background-color: hsl(var(--sui-background-color-5-hsl) / 75%);
102
- --sui-active-background-color: hsl(var(--sui-background-color-5-hsl) / 100%);
103
- --sui-content-background-color: hsl(var(--sui-background-color-1-hsl));
104
- --sui-code-background-color: hsl(var(--sui-background-color-4-hsl));
105
- --sui-primary-background-color: hsl(var(--sui-background-color-2-hsl));
106
- --sui-primary-background-color-translucent: hsl(var(--sui-background-color-2-hsl) / 80%);
107
- --sui-secondary-background-color: hsl(var(--sui-background-color-3-hsl));
108
- --sui-secondary-background-color-translucent: hsl(var(--sui-background-color-3-hsl) / 80%);
109
- --sui-tertiary-background-color: hsl(var(--sui-background-color-4-hsl));
110
- --sui-tertiary-background-color-translucent: hsl(var(--sui-background-color-4-hsl) / 80%);
111
- --sui-disabled-background-color: hsl(var(--sui-background-color-4-hsl));
112
- --sui-error-background-color: hsl(
113
- var(--sui-error-color-hue) var(--sui-alert-background-color-saturation)
114
- var(--sui-alert-background-color-lightness)
115
- );
116
- --sui-warning-background-color: hsl(
117
- var(--sui-warning-color-hue) var(--sui-alert-background-color-saturation)
118
- var(--sui-alert-background-color-lightness)
119
- );
120
- --sui-info-background-color: hsl(
121
- var(--sui-info-color-hue) var(--sui-alert-background-color-saturation)
122
- var(--sui-alert-background-color-lightness)
123
- );
124
- --sui-success-background-color: hsl(
125
- var(--sui-success-color-hue) var(--sui-alert-background-color-saturation)
126
- var(--sui-alert-background-color-lightness)
127
- );
128
- // Outline
129
- --sui-focus-ring-width: 4px;
130
- // Borders
131
- --sui-primary-border-color: hsl(var(--sui-border-color-2-hsl));
132
- --sui-secondary-border-color: hsl(var(--sui-border-color-3-hsl));
133
- --sui-error-border-color: hsl(
134
- var(--sui-error-color-hue) var(--sui-alert-border-color-saturation)
135
- var(--sui-alert-border-color-lightness)
136
- );
137
- --sui-warning-border-color: hsl(
138
- var(--sui-warning-color-hue) var(--sui-alert-border-color-saturation)
139
- var(--sui-alert-border-color-lightness)
140
- );
141
- --sui-info-border-color: hsl(
142
- var(--sui-info-color-hue) var(--sui-alert-border-color-saturation)
143
- var(--sui-alert-border-color-lightness)
144
- );
145
- --sui-success-border-color: hsl(
146
- var(--sui-success-color-hue) var(--sui-alert-border-color-saturation)
147
- var(--sui-alert-border-color-lightness)
148
- );
149
- // Shadows
150
- --sui-popup-shadow-color: hsl(var(--sui-shadow-color) / 40%);
151
- --sui-popup-backdrop-color: hsl(var(--sui-shadow-color) / 40%);
152
- // Text
153
- --sui-font-family-default: "Merriweather Sans", sans-serif;
154
- --sui-font-size-xxx-large: 23px;
155
- --sui-font-size-xx-large: 19px;
156
- --sui-font-size-x-large: 17px;
157
- --sui-font-size-large: 15px;
158
- --sui-font-size-default: 13px;
159
- --sui-font-size-small: 11px;
160
- --sui-font-size-x-small: 9px;
161
- --sui-font-weight-normal: 325; // Merriweather Sans is a little bit bold, so we need to adjust the weight
162
- --sui-font-weight-bold: 625; // ditto
163
- --sui-font-family-monospace: "Noto Sans Mono", monospace;
164
- --sui-font-size-monospace: 0.9em;
165
- --sui-line-height-default: 1.25;
166
- --sui-line-height-compact: 1.5;
167
- --sui-line-height-comfortable: 1.75;
168
- --sui-word-spacing-normal: 0.1ex;
169
- --sui-paragraph-margin: 1.75em;
170
- // Controls
171
- --sui-control-small-border-width: 1px;
172
- --sui-control-small-border-radius: calc(var(--sui-control-small-height) / 8);
173
- --sui-control-small-padding: 0 calc((var(--sui-control-small-height) / 5));
174
- --sui-control-small-height: 24px;
175
- --sui-control-medium-border-width: 1px;
176
- --sui-control-medium-border-radius: calc(var(--sui-control-medium-height) / 8);
177
- --sui-control-medium-padding: 0 calc((var(--sui-control-medium-height) / 4));
178
- --sui-control-medium-height: 32px;
179
- --sui-control-large-border-width: 1px;
180
- --sui-control-large-border-radius: calc(var(--sui-control-large-height) / 8);
181
- --sui-control-large-padding: 0 calc((var(--sui-control-large-height) / 3));
182
- --sui-control-large-height: 48px;
183
- --sui-control-border-color: hsl(var(--sui-border-color-2-hsl));
184
- --sui-control-foreground-color: var(--sui-primary-foreground-color);
185
- --sui-control-background-color: hsl(var(--sui-background-color-4-hsl));
186
- --sui-control-font-family: var(--sui-font-family-default);
187
- --sui-control-font-size: var(--sui-font-size-default);
188
- --sui-control-line-height: var(--sui-line-height-compact);
189
- // Button
190
- --sui-button-small-border-radius: var(--sui-control-small-border-radius);
191
- --sui-button-small-padding: var(--sui-control-small-padding);
192
- --sui-button-small-height: var(--sui-control-small-height);
193
- --sui-button-medium-border-radius: var(--sui-control-medium-border-radius);
194
- --sui-button-medium-padding: var(--sui-control-medium-padding);
195
- --sui-button-medium-height: var(--sui-control-medium-height);
196
- --sui-button-large-border-radius: var(--sui-control-large-border-radius);
197
- --sui-button-large-padding: var(--sui-control-large-padding);
198
- --sui-button-large-height: var(--sui-control-large-height);
199
- --sui-button-border-color: var(--sui-control-border-color);
200
- --sui-button-background-color: var(--sui-control-background-color);
201
- // Checkbox, radio button, switch
202
- --sui-checkbox-border-radius: var(--sui-control-medium-border-radius);
203
- --sui-checkbox-height: 20px;
204
- --sui-checkbox-border-color: hsl(var(--sui-border-color-1-hsl));
205
- --sui-checkbox-background-color: var(--sui-control-background-color);
206
- // Option & menu item
207
- --sui-option-border-radius: var(--sui-control-medium-border-radius);
208
- --sui-option-padding: calc((var(--sui-control-medium-height) / 6))
209
- calc((var(--sui-control-medium-height) / 5));
210
- --sui-option-height: var(--sui-control-medium-height);
211
- // Listbox
212
- --sui-listbox-border-radius: var(--sui-control-medium-border-radius);
213
- --sui-listbox-border-color: var(--sui-control-border-color);
214
- --sui-listbox-foreground-color: var(--sui-control-foreground-color);
215
- --sui-listbox-background-color: hsl(var(--sui-background-color-1-hsl));
216
- // Textbox: singleline & multiline text fields
217
- --sui-textbox-border-radius: var(--sui-control-medium-border-radius);
218
- --sui-textbox-height: var(--sui-control-medium-height);
219
- --sui-textbox-border-color: var(--sui-control-border-color);
220
- --sui-textbox-foreground-color: var(--sui-control-foreground-color);
221
- --sui-textbox-background-color: hsl(var(--sui-background-color-1-hsl));
222
- --sui-textbox-font-family: var(--sui-font-family-default);
223
- --sui-textbox-font-size: var(--sui-font-size-default);
224
- --sui-textbox-singleline-padding: 0 8px;
225
- --sui-textbox-singleline-min-width: 240px;
226
- --sui-textbox-singleline-line-height: var(--sui-line-height-compact);
227
- --sui-textbox-multiline-padding: 16px;
228
- --sui-textbox-multiline-min-width: 480px;
229
- --sui-textbox-multiline-line-height: var(--sui-line-height-comfortable);
230
- // Tab
231
- --sui-tab-height: var(--sui-control-medium-height);
232
- --sui-tab-small-height: var(--sui-control-small-height);
233
- --sui-tab-medium-height: var(--sui-control-medium-height);
234
- --sui-tab-large-height: var(--sui-control-large-height);
235
- // Toolbar
236
- --sui-primary-toolbar-size: 48px;
237
- --sui-secondary-toolbar-size: 40px;
238
- // table
239
- --sui-primary-row-height: 48px;
240
- --sui-secondary-row-height: 40px;
73
+ :global {
74
+ :root,
75
+ :host {
76
+ // Base HSL values
77
+ --sui-base-hue: 210;
78
+ // Foreground
79
+ --sui-highlight-foreground-color: hsl(var(--sui-foreground-color-1-hsl));
80
+ --sui-primary-foreground-color: hsl(var(--sui-foreground-color-2-hsl));
81
+ --sui-secondary-foreground-color: hsl(var(--sui-foreground-color-3-hsl));
82
+ --sui-tertiary-foreground-color: hsl(var(--sui-foreground-color-4-hsl));
83
+ --sui-disabled-foreground-color: hsl(var(--sui-foreground-color-5-hsl));
84
+ --sui-error-foreground-color: hsl(
85
+ var(--sui-error-color-hue) var(--sui-alert-foreground-color-saturation)
86
+ var(--sui-alert-foreground-color-lightness)
87
+ );
88
+ --sui-warning-foreground-color: hsl(
89
+ var(--sui-warning-color-hue) var(--sui-alert-foreground-color-saturation)
90
+ var(--sui-alert-foreground-color-lightness)
91
+ );
92
+ --sui-info-foreground-color: hsl(
93
+ var(--sui-info-color-hue) var(--sui-alert-foreground-color-saturation)
94
+ var(--sui-alert-foreground-color-lightness)
95
+ );
96
+ --sui-success-foreground-color: hsl(
97
+ var(--sui-success-color-hue) var(--sui-alert-foreground-color-saturation)
98
+ var(--sui-alert-foreground-color-lightness)
99
+ );
100
+ // Background
101
+ --sui-hover-background-color: hsl(var(--sui-background-color-5-hsl) / 35%);
102
+ --sui-selected-background-color: hsl(var(--sui-background-color-5-hsl) / 75%);
103
+ --sui-active-background-color: hsl(var(--sui-background-color-5-hsl) / 100%);
104
+ --sui-content-background-color: hsl(var(--sui-background-color-1-hsl));
105
+ --sui-code-background-color: hsl(var(--sui-background-color-4-hsl));
106
+ --sui-primary-background-color: hsl(var(--sui-background-color-2-hsl));
107
+ --sui-primary-background-color-translucent: hsl(var(--sui-background-color-2-hsl) / 80%);
108
+ --sui-secondary-background-color: hsl(var(--sui-background-color-3-hsl));
109
+ --sui-secondary-background-color-translucent: hsl(var(--sui-background-color-3-hsl) / 80%);
110
+ --sui-tertiary-background-color: hsl(var(--sui-background-color-4-hsl));
111
+ --sui-tertiary-background-color-translucent: hsl(var(--sui-background-color-4-hsl) / 80%);
112
+ --sui-disabled-background-color: hsl(var(--sui-background-color-4-hsl));
113
+ --sui-error-background-color: hsl(
114
+ var(--sui-error-color-hue) var(--sui-alert-background-color-saturation)
115
+ var(--sui-alert-background-color-lightness)
116
+ );
117
+ --sui-warning-background-color: hsl(
118
+ var(--sui-warning-color-hue) var(--sui-alert-background-color-saturation)
119
+ var(--sui-alert-background-color-lightness)
120
+ );
121
+ --sui-info-background-color: hsl(
122
+ var(--sui-info-color-hue) var(--sui-alert-background-color-saturation)
123
+ var(--sui-alert-background-color-lightness)
124
+ );
125
+ --sui-success-background-color: hsl(
126
+ var(--sui-success-color-hue) var(--sui-alert-background-color-saturation)
127
+ var(--sui-alert-background-color-lightness)
128
+ );
129
+ // Outline
130
+ --sui-focus-ring-width: 4px;
131
+ // Borders
132
+ --sui-primary-border-color: hsl(var(--sui-border-color-2-hsl));
133
+ --sui-secondary-border-color: hsl(var(--sui-border-color-3-hsl));
134
+ --sui-error-border-color: hsl(
135
+ var(--sui-error-color-hue) var(--sui-alert-border-color-saturation)
136
+ var(--sui-alert-border-color-lightness)
137
+ );
138
+ --sui-warning-border-color: hsl(
139
+ var(--sui-warning-color-hue) var(--sui-alert-border-color-saturation)
140
+ var(--sui-alert-border-color-lightness)
141
+ );
142
+ --sui-info-border-color: hsl(
143
+ var(--sui-info-color-hue) var(--sui-alert-border-color-saturation)
144
+ var(--sui-alert-border-color-lightness)
145
+ );
146
+ --sui-success-border-color: hsl(
147
+ var(--sui-success-color-hue) var(--sui-alert-border-color-saturation)
148
+ var(--sui-alert-border-color-lightness)
149
+ );
150
+ // Shadows
151
+ --sui-popup-shadow-color: hsl(var(--sui-shadow-color) / 40%);
152
+ --sui-popup-backdrop-color: hsl(var(--sui-shadow-color) / 40%);
153
+ // Text
154
+ --sui-font-family-default: "Merriweather Sans", sans-serif;
155
+ --sui-font-size-xxx-large: 23px;
156
+ --sui-font-size-xx-large: 19px;
157
+ --sui-font-size-x-large: 17px;
158
+ --sui-font-size-large: 15px;
159
+ --sui-font-size-default: 13px;
160
+ --sui-font-size-small: 11px;
161
+ --sui-font-size-x-small: 9px;
162
+ --sui-font-weight-normal: 325; // Merriweather Sans is a little bit bold, so we need to adjust the weight
163
+ --sui-font-weight-bold: 625; // ditto
164
+ --sui-font-family-monospace: "Noto Sans Mono", monospace;
165
+ --sui-font-size-monospace: 0.9em;
166
+ --sui-line-height-default: 1.25;
167
+ --sui-line-height-compact: 1.5;
168
+ --sui-line-height-comfortable: 1.75;
169
+ --sui-word-spacing-normal: 0.1ex;
170
+ --sui-paragraph-margin: 1.75em;
171
+ // Controls
172
+ --sui-control-small-border-width: 1px;
173
+ --sui-control-small-border-radius: calc(var(--sui-control-small-height) / 8);
174
+ --sui-control-small-padding: 0 calc((var(--sui-control-small-height) / 5));
175
+ --sui-control-small-height: 24px;
176
+ --sui-control-medium-border-width: 1px;
177
+ --sui-control-medium-border-radius: calc(var(--sui-control-medium-height) / 8);
178
+ --sui-control-medium-padding: 0 calc((var(--sui-control-medium-height) / 4));
179
+ --sui-control-medium-height: 32px;
180
+ --sui-control-large-border-width: 1px;
181
+ --sui-control-large-border-radius: calc(var(--sui-control-large-height) / 8);
182
+ --sui-control-large-padding: 0 calc((var(--sui-control-large-height) / 3));
183
+ --sui-control-large-height: 48px;
184
+ --sui-control-border-color: hsl(var(--sui-border-color-2-hsl));
185
+ --sui-control-foreground-color: var(--sui-primary-foreground-color);
186
+ --sui-control-background-color: hsl(var(--sui-background-color-4-hsl));
187
+ --sui-control-font-family: var(--sui-font-family-default);
188
+ --sui-control-font-size: var(--sui-font-size-default);
189
+ --sui-control-line-height: var(--sui-line-height-compact);
190
+ // Button
191
+ --sui-button-small-border-radius: var(--sui-control-small-border-radius);
192
+ --sui-button-small-padding: var(--sui-control-small-padding);
193
+ --sui-button-small-height: var(--sui-control-small-height);
194
+ --sui-button-medium-border-radius: var(--sui-control-medium-border-radius);
195
+ --sui-button-medium-padding: var(--sui-control-medium-padding);
196
+ --sui-button-medium-height: var(--sui-control-medium-height);
197
+ --sui-button-large-border-radius: var(--sui-control-large-border-radius);
198
+ --sui-button-large-padding: var(--sui-control-large-padding);
199
+ --sui-button-large-height: var(--sui-control-large-height);
200
+ --sui-button-border-color: var(--sui-control-border-color);
201
+ --sui-button-background-color: var(--sui-control-background-color);
202
+ // Checkbox, radio button, switch
203
+ --sui-checkbox-border-radius: var(--sui-control-medium-border-radius);
204
+ --sui-checkbox-height: 20px;
205
+ --sui-checkbox-border-color: hsl(var(--sui-border-color-1-hsl));
206
+ --sui-checkbox-background-color: var(--sui-control-background-color);
207
+ // Option & menu item
208
+ --sui-option-border-radius: var(--sui-control-medium-border-radius);
209
+ --sui-option-padding: calc((var(--sui-control-medium-height) / 6))
210
+ calc((var(--sui-control-medium-height) / 5));
211
+ --sui-option-height: var(--sui-control-medium-height);
212
+ // Listbox
213
+ --sui-listbox-border-radius: var(--sui-control-medium-border-radius);
214
+ --sui-listbox-border-color: var(--sui-control-border-color);
215
+ --sui-listbox-foreground-color: var(--sui-control-foreground-color);
216
+ --sui-listbox-background-color: hsl(var(--sui-background-color-1-hsl));
217
+ // Textbox: singleline & multiline text fields
218
+ --sui-textbox-border-radius: var(--sui-control-medium-border-radius);
219
+ --sui-textbox-height: var(--sui-control-medium-height);
220
+ --sui-textbox-border-color: var(--sui-control-border-color);
221
+ --sui-textbox-foreground-color: var(--sui-control-foreground-color);
222
+ --sui-textbox-background-color: hsl(var(--sui-background-color-1-hsl));
223
+ --sui-textbox-font-family: var(--sui-font-family-default);
224
+ --sui-textbox-font-size: var(--sui-font-size-default);
225
+ --sui-textbox-singleline-padding: 0 8px;
226
+ --sui-textbox-singleline-min-width: 240px;
227
+ --sui-textbox-singleline-line-height: var(--sui-line-height-compact);
228
+ --sui-textbox-multiline-padding: 16px;
229
+ --sui-textbox-multiline-min-width: 480px;
230
+ --sui-textbox-multiline-line-height: var(--sui-line-height-comfortable);
231
+ // Tab
232
+ --sui-tab-height: var(--sui-control-medium-height);
233
+ --sui-tab-small-height: var(--sui-control-small-height);
234
+ --sui-tab-medium-height: var(--sui-control-medium-height);
235
+ --sui-tab-large-height: var(--sui-control-large-height);
236
+ // Toolbar
237
+ --sui-primary-toolbar-size: 48px;
238
+ --sui-secondary-toolbar-size: 40px;
239
+ // table
240
+ --sui-primary-row-height: 48px;
241
+ --sui-secondary-row-height: 40px;
241
242
 
242
- // Make controls larger on touch devices, e.g. mobile & tablet
243
- @media (pointer: coarse) {
244
- --sui-control-small-height: 30px;
245
- --sui-control-medium-height: 40px;
246
- --sui-control-large-height: 60px;
247
- --sui-checkbox-height: 24px;
248
- --sui-primary-toolbar-size: 56px;
249
- --sui-secondary-toolbar-size: 48px;
250
- --sui-primary-row-height: 56px;
251
- --sui-secondary-row-height: 48px;
252
- }
253
-
254
- @media (prefers-reduced-transparency) {
255
- --sui-primary-background-color-translucent: hsl(var(--sui-background-color-2-hsl));
256
- --sui-secondary-background-color-translucent: hsl(var(--sui-background-color-3-hsl));
257
- --sui-tertiary-background-color-translucent: hsl(var(--sui-background-color-4-hsl));
258
- }
259
-
260
- &[data-theme="light"] {
261
- @include light-theme;
262
- }
243
+ // Make controls larger on touch devices, e.g. mobile & tablet
244
+ @media (pointer: coarse) {
245
+ --sui-control-small-height: 30px;
246
+ --sui-control-medium-height: 40px;
247
+ --sui-control-large-height: 60px;
248
+ --sui-checkbox-height: 24px;
249
+ --sui-primary-toolbar-size: 56px;
250
+ --sui-secondary-toolbar-size: 48px;
251
+ --sui-primary-row-height: 56px;
252
+ --sui-secondary-row-height: 48px;
253
+ }
263
254
 
264
- &[data-theme="dark"] {
265
- @include dark-theme;
266
- }
255
+ @media (prefers-reduced-transparency) {
256
+ --sui-primary-background-color-translucent: hsl(var(--sui-background-color-2-hsl));
257
+ --sui-secondary-background-color-translucent: hsl(var(--sui-background-color-3-hsl));
258
+ --sui-tertiary-background-color-translucent: hsl(var(--sui-background-color-4-hsl));
259
+ }
267
260
 
268
- // Follow the system appearance setting when the `data-theme` attribute is not set (yet)
269
- &:not([data-theme]) {
270
- @media (prefers-color-scheme: light) {
261
+ &[data-theme="light"] {
271
262
  @include light-theme;
272
263
  }
273
264
 
274
- @media (prefers-color-scheme: dark) {
265
+ &[data-theme="dark"] {
275
266
  @include dark-theme;
276
267
  }
268
+
269
+ // Follow the system appearance setting when the `data-theme` attribute is not set (yet)
270
+ &:not([data-theme]) {
271
+ @media (prefers-color-scheme: light) {
272
+ @include light-theme;
273
+ }
274
+
275
+ @media (prefers-color-scheme: dark) {
276
+ @include dark-theme;
277
+ }
278
+ }
277
279
  }
278
280
  }
@@ -549,6 +549,33 @@ export type TextEditorBlockType = "paragraph" | "heading-1" | "heading-2" | "hea
549
549
  export type TextEditorFormatType = "bold" | "italic" | "code";
550
550
  export type TextEditorInlineType = TextEditorFormatType | "link";
551
551
  export type TextEditorMode = "rich-text" | "plain-text";
552
+ export type TextEditorComponent = {
553
+ /**
554
+ * - Component ID.
555
+ */
556
+ id: string;
557
+ /**
558
+ * - Component label.
559
+ */
560
+ label: string;
561
+ /**
562
+ * - Material Symbols icon name.
563
+ */
564
+ icon?: string | undefined;
565
+ /**
566
+ * - Lexical node class implementation.
567
+ */
568
+ node: import("lexical").LexicalNode;
569
+ /**
570
+ * - Function
571
+ * to create a new node instance.
572
+ */
573
+ createNode: (props?: Record<string, any>) => import("lexical").LexicalNode;
574
+ /**
575
+ * - Node transformer.
576
+ */
577
+ transformer: import("@lexical/markdown").Transformer;
578
+ };
552
579
  export type TextEditorState = {
553
580
  /**
554
581
  * - Lexical
@@ -588,6 +615,10 @@ export type TextEditorState = {
588
615
  * the editor.
589
616
  */
590
617
  enabledButtons: (TextEditorBlockType | TextEditorInlineType)[];
618
+ /**
619
+ * - Editor components.
620
+ */
621
+ components: TextEditorComponent[];
591
622
  /**
592
623
  * - Function to trigger the Lexical converter.
593
624
  */
@@ -227,6 +227,17 @@
227
227
  * @typedef {'rich-text' | 'plain-text'} TextEditorMode
228
228
  */
229
229
 
230
+ /**
231
+ * @typedef {object} TextEditorComponent
232
+ * @property {string} id - Component ID.
233
+ * @property {string} label - Component label.
234
+ * @property {string} [icon] - Material Symbols icon name.
235
+ * @property {import('lexical').LexicalNode} node - Lexical node class implementation.
236
+ * @property {(props?: Record<string, any>) => import('lexical').LexicalNode} createNode - Function
237
+ * to create a new node instance.
238
+ * @property {import('@lexical/markdown').Transformer} transformer - Node transformer.
239
+ */
240
+
230
241
  /**
231
242
  * @typedef {object} TextEditorState
232
243
  * @property {import('svelte/store').Writable<import('lexical').LexicalEditor>} editor - Lexical
@@ -243,6 +254,7 @@
243
254
  * error while converting Markdown to Lexical nodes.
244
255
  * @property {(TextEditorBlockType | TextEditorInlineType)[]} enabledButtons - Enabled buttons for
245
256
  * the editor.
257
+ * @property {TextEditorComponent[]} components - Editor components.
246
258
  * @property {Function} convertMarkdown - Function to trigger the Lexical converter.
247
259
  */
248
260
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sveltia/ui",
3
- "version": "0.20.1",
3
+ "version": "0.21.0",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
6
  "repository": {
@@ -38,16 +38,16 @@
38
38
  "@lexical/selection": "^0.21.0",
39
39
  "@lexical/table": "^0.21.0",
40
40
  "@lexical/utils": "^0.21.0",
41
- "@sveltia/utils": "^0.5.0",
41
+ "@sveltia/utils": "^0.6.0",
42
42
  "lexical": "^0.21.0"
43
43
  },
44
44
  "peerDependencies": {
45
45
  "svelte": "^5.0.0"
46
46
  },
47
47
  "devDependencies": {
48
- "@playwright/test": "^1.49.0",
48
+ "@playwright/test": "^1.49.1",
49
49
  "@sveltejs/adapter-auto": "^3.3.1",
50
- "@sveltejs/kit": "^2.9.0",
50
+ "@sveltejs/kit": "^2.10.1",
51
51
  "@sveltejs/package": "^2.3.7",
52
52
  "@sveltejs/vite-plugin-svelte": "5.0.1",
53
53
  "cspell": "^8.16.1",
@@ -55,7 +55,7 @@
55
55
  "eslint-config-airbnb-base": "^15.0.0",
56
56
  "eslint-config-prettier": "^9.1.0",
57
57
  "eslint-plugin-import": "^2.31.0",
58
- "eslint-plugin-jsdoc": "^50.6.0",
58
+ "eslint-plugin-jsdoc": "^50.6.1",
59
59
  "eslint-plugin-svelte": "^2.46.1",
60
60
  "postcss": "^8.4.49",
61
61
  "postcss-html": "^1.7.0",
@@ -65,12 +65,12 @@
65
65
  "stylelint": "^16.11.0",
66
66
  "stylelint-config-recommended-scss": "^14.1.0",
67
67
  "stylelint-scss": "^6.10.0",
68
- "svelte": "5.6.2",
68
+ "svelte": "5.11.2",
69
69
  "svelte-check": "^4.1.1",
70
70
  "svelte-i18n": "^4.0.1",
71
71
  "svelte-preprocess": "^6.0.3",
72
72
  "tslib": "^2.8.1",
73
- "vite": "^6.0.2",
73
+ "vite": "^6.0.3",
74
74
  "vitest": "^2.1.8"
75
75
  },
76
76
  "exports": {