@ctrliq/quantic-components 1.83.0 → 1.84.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 (91) hide show
  1. package/dist/action-group/action-group.component.d.ts +13 -0
  2. package/dist/action-group/action-group.component.js +63 -0
  3. package/dist/action-group/index.d.ts +1 -0
  4. package/dist/action-group/index.js +1 -0
  5. package/dist/action-group/index.stories.d.ts +25 -0
  6. package/dist/action-group/index.stories.js +59 -0
  7. package/dist/astro.d.ts +4 -1
  8. package/dist/astro.js +4 -1
  9. package/dist/astro.js.map +1 -1
  10. package/dist/badge/badge-group.component.d.ts +13 -0
  11. package/dist/badge/badge-group.component.js +62 -0
  12. package/dist/badge/badge-group.stories.d.ts +41 -0
  13. package/dist/badge/badge-group.stories.js +62 -0
  14. package/dist/badge/index.d.ts +1 -0
  15. package/dist/badge/index.js +1 -0
  16. package/dist/button-bar/button-bar-item.d.ts +3 -0
  17. package/dist/button-bar/button-bar-item.js +12 -1
  18. package/dist/button-bar/button-bar.d.ts +9 -0
  19. package/dist/button-bar/button-bar.js +53 -2
  20. package/dist/button-bar/index.stories.js +2 -2
  21. package/dist/button-bar/index.utils.d.ts +6 -0
  22. package/dist/button-bar/index.utils.js +31 -0
  23. package/dist/button-bar/index.utils.test.d.ts +1 -0
  24. package/dist/button-bar/index.utils.test.js +53 -0
  25. package/dist/button-group/button-group.js +1 -2
  26. package/dist/capacity-bar/index.js +30 -30
  27. package/dist/card/card-carousel.component.js +35 -35
  28. package/dist/card/card-group.component.js +2 -8
  29. package/dist/card/card.component.js +38 -38
  30. package/dist/code-input/index.js +33 -33
  31. package/dist/combobox/index.js +30 -30
  32. package/dist/dialog/dialog-actions.js +11 -10
  33. package/dist/dialog/dialog.js +18 -18
  34. package/dist/dropdown-menu/item.component.js +24 -24
  35. package/dist/field/field-group.component.js +13 -13
  36. package/dist/field/field.component.js +31 -31
  37. package/dist/fieldset/fieldset.component.js +27 -27
  38. package/dist/grid/grid.component.js +31 -31
  39. package/dist/index.d.ts +1 -0
  40. package/dist/index.js +1 -0
  41. package/dist/index.js.map +1 -1
  42. package/dist/layout/layout.component.js +1 -0
  43. package/dist/layout/navbar-menu-item.component.js +1 -0
  44. package/dist/layout/sidebar-menu-item.component.js +1 -0
  45. package/dist/log-output/log-output.component.js +1 -1
  46. package/dist/meta/index.js +6 -0
  47. package/dist/meta/index.js.map +1 -1
  48. package/dist/meta/public-css-variables.test.d.ts +1 -0
  49. package/dist/meta/public-css-variables.test.js +244 -0
  50. package/dist/meta.json +110 -5
  51. package/dist/number-input/index.js +18 -17
  52. package/dist/option-card/option-card.component.js +27 -27
  53. package/dist/panel/panel-group.component.js +10 -7
  54. package/dist/panel/panel.component.js +3 -3
  55. package/dist/progress/index.js +15 -15
  56. package/dist/quantic-components.js +709 -454
  57. package/dist/quantic-components.js.map +1 -1
  58. package/dist/quantic-components.min.js +606 -548
  59. package/dist/quantic-components.min.js.map +1 -1
  60. package/dist/register.js.map +1 -1
  61. package/dist/select/index.js +8 -8
  62. package/dist/spinner/index.js +7 -3
  63. package/dist/table/table-cell.component.js +2 -2
  64. package/dist/table/table-head.component.js +1 -1
  65. package/dist/table/table.component.js +16 -16
  66. package/dist/tag/index.d.ts +1 -0
  67. package/dist/tag/index.js +1 -0
  68. package/dist/tag/tag-group.component.d.ts +13 -0
  69. package/dist/tag/tag-group.component.js +62 -0
  70. package/dist/tag/tag-group.stories.d.ts +34 -0
  71. package/dist/tag/tag-group.stories.js +65 -0
  72. package/dist/text-input/index.js +10 -10
  73. package/dist/textarea/index.js +10 -10
  74. package/dist/tooltip/tooltip.js +0 -1
  75. package/dist/types/action-group/action-group.component.d.ts +13 -0
  76. package/dist/types/action-group/index.d.ts +1 -0
  77. package/dist/types/action-group/index.stories.d.ts +25 -0
  78. package/dist/types/astro.d.ts +4 -1
  79. package/dist/types/badge/badge-group.component.d.ts +13 -0
  80. package/dist/types/badge/badge-group.stories.d.ts +41 -0
  81. package/dist/types/badge/index.d.ts +1 -0
  82. package/dist/types/button-bar/button-bar-item.d.ts +3 -0
  83. package/dist/types/button-bar/button-bar.d.ts +9 -0
  84. package/dist/types/button-bar/index.utils.d.ts +6 -0
  85. package/dist/types/button-bar/index.utils.test.d.ts +1 -0
  86. package/dist/types/index.d.ts +1 -0
  87. package/dist/types/meta/public-css-variables.test.d.ts +1 -0
  88. package/dist/types/tag/index.d.ts +1 -0
  89. package/dist/types/tag/tag-group.component.d.ts +13 -0
  90. package/dist/types/tag/tag-group.stories.d.ts +34 -0
  91. package/package.json +5 -3
package/dist/card/card-carousel.component.js CHANGED
@@ -249,8 +249,8 @@ CardCarousel.styles = css `
249
249
  container-type: inline-size;
250
250
  position: relative;
251
251
 
252
- --quantic-component-card-carousel-gap: var(--quantic-spacing-4);
253
- --quantic-component-card-carousel-slides-to-show: 1;
252
+ --quantic-internal-card-carousel-gap: var(--quantic-spacing-4);
253
+ --quantic-internal-card-carousel-slides-to-show: 1;
254
254
  }
255
255
 
256
256
  .carousel {
@@ -260,7 +260,7 @@ CardCarousel.styles = css `
260
260
 
261
261
  .carousel-container {
262
262
  display: flex;
263
- gap: var(--quantic-component-card-carousel-gap);
263
+ gap: var(--quantic-component-card-carousel-gap, var(--quantic-internal-card-carousel-gap));
264
264
  overflow-x: auto;
265
265
  overflow-y: clip;
266
266
  scroll-snap-type: x mandatory;
@@ -286,10 +286,10 @@ CardCarousel.styles = css `
286
286
  flex: 0 0
287
287
  calc(
288
288
  (
289
- 100% - var(--quantic-component-card-carousel-gap) *
290
- (var(--quantic-component-card-carousel-slides-to-show) - 1)
289
+ 100% - var(--quantic-component-card-carousel-gap, var(--quantic-internal-card-carousel-gap)) *
290
+ (var(--quantic-component-card-carousel-slides-to-show, var(--quantic-internal-card-carousel-slides-to-show)) - 1)
291
291
  ) /
292
- var(--quantic-component-card-carousel-slides-to-show)
292
+ var(--quantic-component-card-carousel-slides-to-show, var(--quantic-internal-card-carousel-slides-to-show))
293
293
  );
294
294
  min-width: 0;
295
295
  scroll-snap-align: start;
@@ -297,23 +297,23 @@ CardCarousel.styles = css `
297
297
  }
298
298
 
299
299
  .density--dense {
300
- --quantic-component-card-carousel-slides-to-show: 2;
301
- --quantic-component-card-carousel-gap: var(--quantic-spacing-2);
300
+ --quantic-internal-card-carousel-slides-to-show: 2;
301
+ --quantic-internal-card-carousel-gap: var(--quantic-spacing-2);
302
302
  }
303
303
 
304
304
  .density--compact {
305
- --quantic-component-card-carousel-slides-to-show: 1;
306
- --quantic-component-card-carousel-gap: var(--quantic-spacing-2);
305
+ --quantic-internal-card-carousel-slides-to-show: 1;
306
+ --quantic-internal-card-carousel-gap: var(--quantic-spacing-2);
307
307
  }
308
308
 
309
309
  .density--comfortable {
310
- --quantic-component-card-carousel-slides-to-show: 1;
311
- --quantic-component-card-carousel-gap: var(--quantic-spacing-4);
310
+ --quantic-internal-card-carousel-slides-to-show: 1;
311
+ --quantic-internal-card-carousel-gap: var(--quantic-spacing-4);
312
312
  }
313
313
 
314
314
  .density--sparse {
315
- --quantic-component-card-carousel-slides-to-show: 1;
316
- --quantic-component-card-carousel-gap: var(--quantic-spacing-4);
315
+ --quantic-internal-card-carousel-slides-to-show: 1;
316
+ --quantic-internal-card-carousel-gap: var(--quantic-spacing-4);
317
317
  }
318
318
 
319
319
  .density--custom {
@@ -322,88 +322,88 @@ CardCarousel.styles = css `
322
322
 
323
323
  @container (min-width: ${unsafeCSS(ContainerSizeBreakpoint.Xs)}) {
324
324
  .density--dense {
325
- --quantic-component-card-carousel-slides-to-show: 3;
326
- --quantic-component-card-carousel-gap: var(--quantic-spacing-3);
325
+ --quantic-internal-card-carousel-slides-to-show: 3;
326
+ --quantic-internal-card-carousel-gap: var(--quantic-spacing-3);
327
327
  }
328
328
 
329
329
  .density--compact {
330
- --quantic-component-card-carousel-slides-to-show: 2;
331
- --quantic-component-card-carousel-gap: var(--quantic-spacing-3);
330
+ --quantic-internal-card-carousel-slides-to-show: 2;
331
+ --quantic-internal-card-carousel-gap: var(--quantic-spacing-3);
332
332
  }
333
333
  }
334
334
 
335
335
  @container (min-width: ${unsafeCSS(ContainerSizeBreakpoint.Sm)}) {
336
336
  .density--dense {
337
- --quantic-component-card-carousel-slides-to-show: 4;
337
+ --quantic-internal-card-carousel-slides-to-show: 4;
338
338
  }
339
339
 
340
340
  .density--compact {
341
- --quantic-component-card-carousel-slides-to-show: 3;
341
+ --quantic-internal-card-carousel-slides-to-show: 3;
342
342
  }
343
343
 
344
344
  .density--comfortable {
345
- --quantic-component-card-carousel-slides-to-show: 2;
345
+ --quantic-internal-card-carousel-slides-to-show: 2;
346
346
  }
347
347
  }
348
348
 
349
349
  @container (min-width: ${unsafeCSS(ContainerSizeBreakpoint.Md)}) {
350
350
  .density--dense {
351
- --quantic-component-card-carousel-slides-to-show: 5;
351
+ --quantic-internal-card-carousel-slides-to-show: 5;
352
352
  }
353
353
 
354
354
  .density--compact {
355
- --quantic-component-card-carousel-slides-to-show: 3;
355
+ --quantic-internal-card-carousel-slides-to-show: 3;
356
356
  }
357
357
 
358
358
  .density--sparse {
359
- --quantic-component-card-carousel-slides-to-show: 2;
359
+ --quantic-internal-card-carousel-slides-to-show: 2;
360
360
  }
361
361
  }
362
362
 
363
363
  @container (min-width: ${unsafeCSS(ContainerSizeBreakpoint.Lg)}) {
364
364
  .density--dense {
365
- --quantic-component-card-carousel-slides-to-show: 6;
365
+ --quantic-internal-card-carousel-slides-to-show: 6;
366
366
  }
367
367
 
368
368
  .density--compact {
369
- --quantic-component-card-carousel-slides-to-show: 4;
369
+ --quantic-internal-card-carousel-slides-to-show: 4;
370
370
  }
371
371
 
372
372
  .density--comfortable {
373
- --quantic-component-card-carousel-slides-to-show: 3;
373
+ --quantic-internal-card-carousel-slides-to-show: 3;
374
374
  }
375
375
 
376
376
  .density--sparse {
377
- --quantic-component-card-carousel-gap: var(--quantic-spacing-5);
377
+ --quantic-internal-card-carousel-gap: var(--quantic-spacing-5);
378
378
  }
379
379
  }
380
380
 
381
381
  @container (min-width: ${unsafeCSS(ContainerSizeBreakpoint.Xl)}) {
382
382
  .density--dense {
383
- --quantic-component-card-carousel-slides-to-show: 8;
383
+ --quantic-internal-card-carousel-slides-to-show: 8;
384
384
  }
385
385
 
386
386
  .density--compact {
387
- --quantic-component-card-carousel-slides-to-show: 5;
387
+ --quantic-internal-card-carousel-slides-to-show: 5;
388
388
  }
389
389
 
390
390
  .density--comfortable {
391
- --quantic-component-card-carousel-slides-to-show: 3;
392
- --quantic-component-card-carousel-gap: var(--quantic-spacing-5);
391
+ --quantic-internal-card-carousel-slides-to-show: 3;
392
+ --quantic-internal-card-carousel-gap: var(--quantic-spacing-5);
393
393
  }
394
394
  }
395
395
 
396
396
  @container (min-width: ${unsafeCSS(ContainerSizeBreakpoint.Xxl)}) {
397
397
  .density--dense {
398
- --quantic-component-card-carousel-slides-to-show: 10;
398
+ --quantic-internal-card-carousel-slides-to-show: 10;
399
399
  }
400
400
 
401
401
  .density--compact {
402
- --quantic-component-card-carousel-slides-to-show: 6;
402
+ --quantic-internal-card-carousel-slides-to-show: 6;
403
403
  }
404
404
 
405
405
  .density--comfortable {
406
- --quantic-component-card-carousel-slides-to-show: 4;
406
+ --quantic-internal-card-carousel-slides-to-show: 4;
407
407
  }
408
408
  }
409
409
 
package/dist/card/card-group.component.js CHANGED
@@ -35,14 +35,8 @@ CardGroup.styles = css `
35
35
  }
36
36
 
37
37
  quantic-grid {
38
- --quantic-component-grid-columns: var(
39
- --quantic-component-card-group-columns,
40
- var(--quantic-component-grid-columns)
41
- );
42
- --quantic-component-grid-gap: var(
43
- --quantic-component-card-group-gap,
44
- var(--quantic-component-grid-gap)
45
- );
38
+ --quantic-component-grid-columns: var(--quantic-component-card-group-columns);
39
+ --quantic-component-grid-gap: var(--quantic-component-card-group-gap);
46
40
  }
47
41
  `;
48
42
  __decorate([
package/dist/card/card.component.js CHANGED
@@ -103,13 +103,13 @@ Card.styles = [
103
103
  color: var(--quantic-text-secondary);
104
104
  position: relative;
105
105
 
106
- --quantic-component-card-font-size: var(--quantic-font-size-body-md);
107
- --quantic-component-card-line-height: var(
106
+ --quantic-internal-card-font-size: var(--quantic-font-size-body-md);
107
+ --quantic-internal-card-line-height: var(
108
108
  --quantic-line-height-body-md
109
109
  );
110
- --quantic-component-card-radius: var(--quantic-radius-md);
111
- --quantic-component-card-spacing: var(--quantic-spacing-4);
112
- --quantic-component-card-size-padding: var(--quantic-spacing-6);
110
+ --quantic-internal-card-radius: var(--quantic-radius-md);
111
+ --quantic-internal-card-spacing: var(--quantic-spacing-4);
112
+ --quantic-internal-card-size-padding: var(--quantic-spacing-6);
113
113
  }
114
114
 
115
115
  button.main,
@@ -130,16 +130,16 @@ Card.styles = [
130
130
  .main {
131
131
  display: flex;
132
132
  flex-direction: column;
133
- gap: var(--quantic-component-card-spacing);
133
+ gap: var(--quantic-component-card-spacing, var(--quantic-internal-card-spacing));
134
134
  padding: var(
135
135
  --quantic-component-card-padding,
136
- var(--quantic-component-card-size-padding)
136
+ var(--quantic-component-card-size-padding, var(--quantic-internal-card-size-padding))
137
137
  );
138
- border-radius: var(--quantic-component-card-radius);
138
+ border-radius: var(--quantic-component-card-radius, var(--quantic-internal-card-radius));
139
139
  border: 1px solid var(--quantic-border-primary);
140
140
  overflow: hidden;
141
- font-size: var(--quantic-component-card-font-size);
142
- line-height: var(--quantic-component-card-line-height);
141
+ font-size: var(--quantic-component-card-font-size, var(--quantic-internal-card-font-size));
142
+ line-height: var(--quantic-component-card-line-height, var(--quantic-internal-card-line-height));
143
143
  flex: 1 1 auto;
144
144
  box-sizing: border-box;
145
145
  }
@@ -160,60 +160,60 @@ Card.styles = [
160
160
  }
161
161
 
162
162
  .size--xs {
163
- --quantic-component-card-size-padding: var(--quantic-spacing-3);
164
- --quantic-component-card-spacing: var(--quantic-spacing-1);
165
- --quantic-component-card-radius: var(--quantic-radius-sm);
166
- --quantic-component-card-font-size: var(--quantic-font-size-body-xs);
167
- --quantic-component-card-line-height: var(
163
+ --quantic-internal-card-size-padding: var(--quantic-spacing-3);
164
+ --quantic-internal-card-spacing: var(--quantic-spacing-1);
165
+ --quantic-internal-card-radius: var(--quantic-radius-sm);
166
+ --quantic-internal-card-font-size: var(--quantic-font-size-body-xs);
167
+ --quantic-internal-card-line-height: var(
168
168
  --quantic-line-height-body-sm
169
169
  );
170
170
  }
171
171
 
172
172
  .size--sm {
173
- --quantic-component-card-size-padding: var(--quantic-spacing-4);
174
- --quantic-component-card-spacing: var(--quantic-spacing-1-5);
175
- --quantic-component-card-radius: var(--quantic-radius-sm);
176
- --quantic-component-card-font-size: var(--quantic-font-size-body-sm);
177
- --quantic-component-card-line-height: var(
173
+ --quantic-internal-card-size-padding: var(--quantic-spacing-4);
174
+ --quantic-internal-card-spacing: var(--quantic-spacing-1-5);
175
+ --quantic-internal-card-radius: var(--quantic-radius-sm);
176
+ --quantic-internal-card-font-size: var(--quantic-font-size-body-sm);
177
+ --quantic-internal-card-line-height: var(
178
178
  --quantic-line-height-body-sm
179
179
  );
180
180
  }
181
181
 
182
182
  .size--md {
183
- --quantic-component-card-size-padding: var(--quantic-spacing-5);
184
- --quantic-component-card-spacing: var(--quantic-spacing-2);
185
- --quantic-component-card-radius: var(--quantic-radius-md);
186
- --quantic-component-card-font-size: var(--quantic-font-size-body-md);
187
- --quantic-component-card-line-height: var(
183
+ --quantic-internal-card-size-padding: var(--quantic-spacing-5);
184
+ --quantic-internal-card-spacing: var(--quantic-spacing-2);
185
+ --quantic-internal-card-radius: var(--quantic-radius-md);
186
+ --quantic-internal-card-font-size: var(--quantic-font-size-body-md);
187
+ --quantic-internal-card-line-height: var(
188
188
  --quantic-line-height-body-md
189
189
  );
190
190
  }
191
191
 
192
192
  .size--lg {
193
- --quantic-component-card-size-padding: var(--quantic-spacing-6);
194
- --quantic-component-card-spacing: var(--quantic-spacing-3);
195
- --quantic-component-card-radius: var(--quantic-radius-lg);
196
- --quantic-component-card-font-size: var(--quantic-font-size-body-lg);
197
- --quantic-component-card-line-height: var(
193
+ --quantic-internal-card-size-padding: var(--quantic-spacing-6);
194
+ --quantic-internal-card-spacing: var(--quantic-spacing-3);
195
+ --quantic-internal-card-radius: var(--quantic-radius-lg);
196
+ --quantic-internal-card-font-size: var(--quantic-font-size-body-lg);
197
+ --quantic-internal-card-line-height: var(
198
198
  --quantic-line-height-body-lg
199
199
  );
200
200
  }
201
201
 
202
202
  @container (min-width: 40rem) {
203
203
  .size--xs {
204
- --quantic-component-card-size-padding: var(--quantic-spacing-3);
204
+ --quantic-internal-card-size-padding: var(--quantic-spacing-3);
205
205
  }
206
206
 
207
207
  .size--sm {
208
- --quantic-component-card-size-padding: var(--quantic-spacing-4);
208
+ --quantic-internal-card-size-padding: var(--quantic-spacing-4);
209
209
  }
210
210
 
211
211
  .size--md {
212
- --quantic-component-card-size-padding: var(--quantic-spacing-6);
212
+ --quantic-internal-card-size-padding: var(--quantic-spacing-6);
213
213
  }
214
214
 
215
215
  .size--lg {
216
- --quantic-component-card-size-padding: var(--quantic-spacing-8);
216
+ --quantic-internal-card-size-padding: var(--quantic-spacing-8);
217
217
  }
218
218
  }
219
219
 
@@ -224,11 +224,11 @@ Card.styles = [
224
224
  }
225
225
 
226
226
  .header {
227
- padding-bottom: var(--quantic-component-card-spacing);
227
+ padding-bottom: var(--quantic-component-card-spacing, var(--quantic-internal-card-spacing));
228
228
  }
229
229
 
230
230
  .footer {
231
- padding-top: var(--quantic-component-card-spacing);
231
+ padding-top: var(--quantic-component-card-spacing, var(--quantic-internal-card-spacing));
232
232
  margin-top: auto;
233
233
  }
234
234
 
@@ -237,7 +237,7 @@ Card.styles = [
237
237
  inset: calc(
238
238
  var(
239
239
  --quantic-component-card-padding,
240
- var(--quantic-component-card-size-padding)
240
+ var(--quantic-component-card-size-padding, var(--quantic-internal-card-size-padding))
241
241
  ) / 2
242
242
  );
243
243
  left: auto;
@@ -290,7 +290,7 @@ Card.styles = [
290
290
  padding-right: calc(
291
291
  var(
292
292
  --quantic-component-card-padding,
293
- var(--quantic-component-card-size-padding)
293
+ var(--quantic-component-card-size-padding, var(--quantic-internal-card-size-padding))
294
294
  ) * 2
295
295
  );
296
296
  }
package/dist/code-input/index.js CHANGED
@@ -162,15 +162,15 @@ CodeInput.styles = css `
162
162
  :host {
163
163
  display: inline-block;
164
164
  width: 100%;
165
- --quantic-component-code-input-font-size: var(
165
+ --quantic-internal-code-input-font-size: var(
166
166
  --quantic-font-size-body-md
167
167
  );
168
- --quantic-component-code-input-line-height: var(
168
+ --quantic-internal-code-input-line-height: var(
169
169
  --quantic-line-height-body
170
170
  );
171
- --quantic-component-code-input-padding-block: var(--quantic-spacing-md);
172
- --quantic-component-code-input-padding-inline: var(--quantic-spacing-3);
173
- --quantic-component-code-input-line-numbers-width: var(
171
+ --quantic-internal-code-input-padding-block: var(--quantic-spacing-md);
172
+ --quantic-internal-code-input-padding-inline: var(--quantic-spacing-3);
173
+ --quantic-internal-code-input-line-numbers-width: var(
174
174
  --quantic-spacing-6
175
175
  );
176
176
  --quantic-component-code-input-border-width: 1px;
@@ -238,59 +238,59 @@ CodeInput.styles = css `
238
238
  }
239
239
 
240
240
  .main.size--xs {
241
- --quantic-component-code-input-font-size: var(
241
+ --quantic-internal-code-input-font-size: var(
242
242
  --quantic-font-size-body-xs
243
243
  );
244
- --quantic-component-code-input-line-height: var(
244
+ --quantic-internal-code-input-line-height: var(
245
245
  --quantic-line-height-body-xs
246
246
  );
247
- --quantic-component-code-input-line-numbers-width: var(
247
+ --quantic-internal-code-input-line-numbers-width: var(
248
248
  --quantic-spacing-5
249
249
  );
250
- --quantic-component-code-input-padding-block: var(--quantic-spacing-sm);
251
- --quantic-component-code-input-padding-inline: var(--quantic-spacing-2);
250
+ --quantic-internal-code-input-padding-block: var(--quantic-spacing-sm);
251
+ --quantic-internal-code-input-padding-inline: var(--quantic-spacing-2);
252
252
  }
253
253
 
254
254
  .main.size--sm {
255
- --quantic-component-code-input-font-size: var(
255
+ --quantic-internal-code-input-font-size: var(
256
256
  --quantic-font-size-body-sm
257
257
  );
258
- --quantic-component-code-input-line-height: var(
258
+ --quantic-internal-code-input-line-height: var(
259
259
  --quantic-line-height-body-sm
260
260
  );
261
- --quantic-component-code-input-line-numbers-width: var(
261
+ --quantic-internal-code-input-line-numbers-width: var(
262
262
  --quantic-spacing-6
263
263
  );
264
- --quantic-component-code-input-padding-block: var(--quantic-spacing-sm);
265
- --quantic-component-code-input-padding-inline: var(--quantic-spacing-2);
264
+ --quantic-internal-code-input-padding-block: var(--quantic-spacing-sm);
265
+ --quantic-internal-code-input-padding-inline: var(--quantic-spacing-2);
266
266
  }
267
267
 
268
268
  .main.size--md {
269
- --quantic-component-code-input-font-size: var(
269
+ --quantic-internal-code-input-font-size: var(
270
270
  --quantic-font-size-body-md
271
271
  );
272
- --quantic-component-code-input-line-height: var(
272
+ --quantic-internal-code-input-line-height: var(
273
273
  --quantic-line-height-body
274
274
  );
275
- --quantic-component-code-input-line-numbers-width: var(
275
+ --quantic-internal-code-input-line-numbers-width: var(
276
276
  --quantic-spacing-8
277
277
  );
278
- --quantic-component-code-input-padding-block: var(--quantic-spacing-md);
279
- --quantic-component-code-input-padding-inline: var(--quantic-spacing-3);
278
+ --quantic-internal-code-input-padding-block: var(--quantic-spacing-md);
279
+ --quantic-internal-code-input-padding-inline: var(--quantic-spacing-3);
280
280
  }
281
281
 
282
282
  .main.size--lg {
283
- --quantic-component-code-input-font-size: var(
283
+ --quantic-internal-code-input-font-size: var(
284
284
  --quantic-font-size-body-lg
285
285
  );
286
- --quantic-component-code-input-line-height: var(
286
+ --quantic-internal-code-input-line-height: var(
287
287
  --quantic-line-height-body
288
288
  );
289
- --quantic-component-code-input-line-numbers-width: var(
289
+ --quantic-internal-code-input-line-numbers-width: var(
290
290
  --quantic-spacing-10
291
291
  );
292
- --quantic-component-code-input-padding-block: var(--quantic-spacing-3);
293
- --quantic-component-code-input-padding-inline: var(--quantic-spacing-4);
292
+ --quantic-internal-code-input-padding-block: var(--quantic-spacing-3);
293
+ --quantic-internal-code-input-padding-inline: var(--quantic-spacing-4);
294
294
  }
295
295
 
296
296
  .line-numbers {
@@ -298,7 +298,7 @@ CodeInput.styles = css `
298
298
  top: 0;
299
299
  left: 0;
300
300
  bottom: 0;
301
- width: var(--quantic-component-code-input-line-numbers-width, 2.5rem);
301
+ width: var(--quantic-component-code-input-line-numbers-width, var(--quantic-internal-code-input-line-numbers-width, 2.5rem));
302
302
  display: flex;
303
303
  flex-direction: column;
304
304
  align-items: flex-end;
@@ -307,8 +307,8 @@ CodeInput.styles = css `
307
307
  background-color: var(--quantic-bg-secondary);
308
308
  color: var(--quantic-color-gray-dark-mode-600);
309
309
  font-family: var(--quantic-font-family-mono);
310
- font-size: var(--quantic-component-code-input-font-size);
311
- line-height: var(--quantic-component-code-input-line-height);
310
+ font-size: var(--quantic-component-code-input-font-size, var(--quantic-internal-code-input-font-size));
311
+ line-height: var(--quantic-component-code-input-line-height, var(--quantic-internal-code-input-line-height));
312
312
  user-select: none;
313
313
  border-right: 1px solid var(--quantic-color-gray-dark-mode-800);
314
314
  }
@@ -325,11 +325,11 @@ CodeInput.styles = css `
325
325
  background: transparent;
326
326
  outline: none;
327
327
  color: var(--quantic-text-primary);
328
- padding: var(--quantic-component-code-input-padding-block)
329
- var(--quantic-component-code-input-padding-inline);
328
+ padding: var(--quantic-component-code-input-padding-block, var(--quantic-internal-code-input-padding-block))
329
+ var(--quantic-component-code-input-padding-inline, var(--quantic-internal-code-input-padding-inline));
330
330
  font-family: var(--quantic-font-family-mono);
331
- font-size: var(--quantic-component-code-input-font-size);
332
- line-height: var(--quantic-component-code-input-line-height);
331
+ font-size: var(--quantic-component-code-input-font-size, var(--quantic-internal-code-input-font-size));
332
+ line-height: var(--quantic-component-code-input-line-height, var(--quantic-internal-code-input-line-height));
333
333
  resize: none;
334
334
  overflow-y: auto;
335
335
  overflow-x: auto;
@@ -340,7 +340,7 @@ CodeInput.styles = css `
340
340
 
341
341
  .has-line-numbers .textarea {
342
342
  --padding-left: calc(
343
- var(--quantic-component-code-input-line-numbers-width) + 2em
343
+ var(--quantic-component-code-input-line-numbers-width, var(--quantic-internal-code-input-line-numbers-width)) + 2em
344
344
  );
345
345
  padding: var(--quantic-spacing-md) var(--quantic-spacing-3)
346
346
  var(--quantic-spacing-md) var(--padding-left);
package/dist/combobox/index.js CHANGED
@@ -394,8 +394,8 @@ Combobox.styles = css `
394
394
  position: relative;
395
395
  width: 100%;
396
396
 
397
- --quantic-component-combobox-padding-inline: var(--quantic-spacing-3);
398
- --quantic-component-combobox-padding-block: var(--quantic-spacing-md);
397
+ --quantic-internal-combobox-padding-inline: var(--quantic-spacing-3);
398
+ --quantic-internal-combobox-padding-block: var(--quantic-spacing-md);
399
399
  }
400
400
 
401
401
  .main {
@@ -410,8 +410,8 @@ Combobox.styles = css `
410
410
  border-radius: var(--quantic-component-combobox-border-radius, var(--quantic-radius-sm));
411
411
  color: var(--quantic-text-primary);
412
412
  background-color: var(--quantic-bg-primary);
413
- padding: var(--quantic-component-combobox-padding-block)
414
- var(--quantic-component-combobox-padding-inline);
413
+ padding: var(--quantic-component-combobox-padding-block, var(--quantic-internal-combobox-padding-block))
414
+ var(--quantic-component-combobox-padding-inline, var(--quantic-internal-combobox-padding-inline));
415
415
  transition:
416
416
  border-color 0.2s ease-in-out,
417
417
  box-shadow 0.2s ease-in-out;
@@ -431,14 +431,14 @@ Combobox.styles = css `
431
431
 
432
432
  .main.size--xs {
433
433
  font-size: 13px;
434
- --quantic-component-combobox-padding-inline: var(--quantic-spacing-2);
435
- --quantic-component-combobox-padding-block: var(--quantic-spacing-xxs);
434
+ --quantic-internal-combobox-padding-inline: var(--quantic-spacing-2);
435
+ --quantic-internal-combobox-padding-block: var(--quantic-spacing-xxs);
436
436
  }
437
437
 
438
438
  .main.size--sm {
439
439
  font-size: var(--quantic-font-size-body-sm);
440
- --quantic-component-combobox-padding-inline: var(--quantic-spacing-2);
441
- --quantic-component-combobox-padding-block: var(--quantic-spacing-sm);
440
+ --quantic-internal-combobox-padding-inline: var(--quantic-spacing-2);
441
+ --quantic-internal-combobox-padding-block: var(--quantic-spacing-sm);
442
442
  }
443
443
 
444
444
  .main.size--md {
@@ -447,8 +447,8 @@ Combobox.styles = css `
447
447
 
448
448
  .main.size--lg {
449
449
  font-size: var(--quantic-font-size-body-lg);
450
- --quantic-component-combobox-padding-inline: var(--quantic-spacing-4);
451
- --quantic-component-combobox-padding-block: var(--quantic-spacing-3);
450
+ --quantic-internal-combobox-padding-inline: var(--quantic-spacing-4);
451
+ --quantic-internal-combobox-padding-block: var(--quantic-spacing-3);
452
452
  }
453
453
 
454
454
  .main:focus-within::before {
@@ -544,59 +544,59 @@ Combobox.styles = css `
544
544
  }
545
545
 
546
546
  .listbox.size--xs {
547
- --quantic-component-combobox-option-padding-block: var(
547
+ --quantic-internal-combobox-option-padding-block: var(
548
548
  --quantic-spacing-1
549
549
  );
550
- --quantic-component-combobox-option-padding-inline: var(
550
+ --quantic-internal-combobox-option-padding-inline: var(
551
551
  --quantic-spacing-1-5
552
552
  );
553
- --quantic-component-combobox-option-font-size: 13px;
554
- --quantic-component-combobox-option-line-height: var(
553
+ --quantic-internal-combobox-option-font-size: 13px;
554
+ --quantic-internal-combobox-option-line-height: var(
555
555
  --quantic-line-height-body-xs
556
556
  );
557
557
  }
558
558
 
559
559
  .listbox.size--sm {
560
- --quantic-component-combobox-option-padding-block: var(
560
+ --quantic-internal-combobox-option-padding-block: var(
561
561
  --quantic-spacing-1-5
562
562
  );
563
- --quantic-component-combobox-option-padding-inline: var(
563
+ --quantic-internal-combobox-option-padding-inline: var(
564
564
  --quantic-spacing-2
565
565
  );
566
- --quantic-component-combobox-option-font-size: var(
566
+ --quantic-internal-combobox-option-font-size: var(
567
567
  --quantic-font-size-body-sm
568
568
  );
569
- --quantic-component-combobox-option-line-height: var(
569
+ --quantic-internal-combobox-option-line-height: var(
570
570
  --quantic-line-height-body-sm
571
571
  );
572
572
  }
573
573
 
574
574
  .listbox.size--md {
575
- --quantic-component-combobox-option-padding-block: var(
575
+ --quantic-internal-combobox-option-padding-block: var(
576
576
  --quantic-spacing-2
577
577
  );
578
- --quantic-component-combobox-option-padding-inline: var(
578
+ --quantic-internal-combobox-option-padding-inline: var(
579
579
  --quantic-spacing-3
580
580
  );
581
- --quantic-component-combobox-option-font-size: var(
581
+ --quantic-internal-combobox-option-font-size: var(
582
582
  --quantic-font-size-body-md
583
583
  );
584
- --quantic-component-combobox-option-line-height: var(
584
+ --quantic-internal-combobox-option-line-height: var(
585
585
  --quantic-line-height-body-md
586
586
  );
587
587
  }
588
588
 
589
589
  .listbox.size--lg {
590
- --quantic-component-combobox-option-padding-block: var(
590
+ --quantic-internal-combobox-option-padding-block: var(
591
591
  --quantic-spacing-3
592
592
  );
593
- --quantic-component-combobox-option-padding-inline: var(
593
+ --quantic-internal-combobox-option-padding-inline: var(
594
594
  --quantic-spacing-4
595
595
  );
596
- --quantic-component-combobox-option-font-size: var(
596
+ --quantic-internal-combobox-option-font-size: var(
597
597
  --quantic-font-size-body-lg
598
598
  );
599
- --quantic-component-combobox-option-line-height: var(
599
+ --quantic-internal-combobox-option-line-height: var(
600
600
  --quantic-line-height-body-lg
601
601
  );
602
602
  }
@@ -606,20 +606,20 @@ Combobox.styles = css `
606
606
  align-items: center;
607
607
  padding: var(
608
608
  --quantic-component-combobox-option-padding-block,
609
- var(--quantic-spacing-2)
609
+ var(--quantic-internal-combobox-option-padding-block, var(--quantic-spacing-2))
610
610
  )
611
611
  var(
612
612
  --quantic-component-combobox-option-padding-inline,
613
- var(--quantic-spacing-3)
613
+ var(--quantic-internal-combobox-option-padding-inline, var(--quantic-spacing-3))
614
614
  );
615
615
  border-radius: var(--quantic-radius-sm);
616
616
  font-size: var(
617
617
  --quantic-component-combobox-option-font-size,
618
- var(--quantic-font-size-body-md)
618
+ var(--quantic-internal-combobox-option-font-size, var(--quantic-font-size-body-md))
619
619
  );
620
620
  line-height: var(
621
621
  --quantic-component-combobox-option-line-height,
622
- var(--quantic-line-height-body-md)
622
+ var(--quantic-internal-combobox-option-line-height, var(--quantic-line-height-body-md))
623
623
  );
624
624
  color: var(--quantic-text-primary);
625
625
  cursor: pointer;