@ctrliq/quantic-components 1.84.0 → 1.85.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 (47) hide show
  1. package/dist/action-group/action-group.component.js +2 -1
  2. package/dist/badge/badge-group.component.js +2 -1
  3. package/dist/capacity-bar/index.js +30 -30
  4. package/dist/card/card-carousel.component.js +35 -35
  5. package/dist/card/card-group.component.js +2 -8
  6. package/dist/card/card.component.js +38 -38
  7. package/dist/code-input/index.js +33 -33
  8. package/dist/combobox/index.js +30 -30
  9. package/dist/dialog/dialog.js +18 -18
  10. package/dist/dropdown-menu/item.component.js +24 -24
  11. package/dist/field/field-group.component.js +13 -13
  12. package/dist/field/field.component.js +31 -31
  13. package/dist/fieldset/fieldset.component.js +27 -27
  14. package/dist/grid/grid.component.js +31 -31
  15. package/dist/index.js.map +1 -1
  16. package/dist/layout/layout.component.js +1 -0
  17. package/dist/layout/navbar-menu-item.component.js +1 -0
  18. package/dist/layout/sidebar-menu-item.component.js +1 -0
  19. package/dist/log-output/log-output.component.js +1 -1
  20. package/dist/meta/index.js.map +1 -1
  21. package/dist/meta/public-css-variables.test.d.ts +1 -0
  22. package/dist/meta/public-css-variables.test.js +244 -0
  23. package/dist/meta/sibling-groups.test.d.ts +1 -0
  24. package/dist/meta/sibling-groups.test.js +42 -0
  25. package/dist/meta.json +4 -4
  26. package/dist/number-input/index.js +18 -17
  27. package/dist/option-card/option-card.component.js +27 -27
  28. package/dist/panel/panel-group.component.js +10 -7
  29. package/dist/panel/panel.component.js +3 -3
  30. package/dist/progress/index.js +15 -15
  31. package/dist/quantic-components.js +449 -442
  32. package/dist/quantic-components.js.map +1 -1
  33. package/dist/quantic-components.min.js +449 -445
  34. package/dist/quantic-components.min.js.map +1 -1
  35. package/dist/register.js.map +1 -1
  36. package/dist/select/index.js +8 -8
  37. package/dist/spinner/index.js +7 -3
  38. package/dist/table/table-cell.component.js +2 -2
  39. package/dist/table/table-head.component.js +1 -1
  40. package/dist/table/table.component.js +16 -16
  41. package/dist/tag/tag-group.component.js +2 -1
  42. package/dist/text-input/index.js +10 -10
  43. package/dist/textarea/index.js +10 -10
  44. package/dist/tooltip/tooltip.js +0 -1
  45. package/dist/types/meta/public-css-variables.test.d.ts +1 -0
  46. package/dist/types/meta/sibling-groups.test.d.ts +1 -0
  47. package/package.json +2 -1
package/dist/action-group/action-group.component.js CHANGED
@@ -14,7 +14,7 @@ let ActionGroup = class ActionGroup extends QuanticElement {
14
14
  }
15
15
  render() {
16
16
  return html `
17
- <div class="group" role="group" aria-label=${this.ariaLabel ?? 'Actions'}>
17
+ <div class="group" part="group" role="group" aria-label=${this.ariaLabel ?? 'Actions'}>
18
18
  <slot></slot>
19
19
  </div>
20
20
  `;
@@ -25,6 +25,7 @@ ActionGroup.meta = {
25
25
  description: 'A row of related actions sharing one accessible name and a consistent gap. ' +
26
26
  'Takes quantic-button, and quantic-dropdown-menu or quantic-popover when the trigger is a button. ' +
27
27
  'Wraps when the row runs out of width. Gap: --quantic-component-action-group-gap. ' +
28
+ 'Layout: ::part(group), for a column or a different alignment. ' +
28
29
  'Use quantic-button-bar when the buttons should read as one joined control.',
29
30
  category: 'action',
30
31
  slots: {
package/dist/badge/badge-group.component.js CHANGED
@@ -14,7 +14,7 @@ let BadgeGroup = class BadgeGroup extends QuanticElement {
14
14
  }
15
15
  render() {
16
16
  return html `
17
- <div class="group" role="group" aria-label=${this.ariaLabel ?? 'Badges'}>
17
+ <div class="group" part="group" role="group" aria-label=${this.ariaLabel ?? 'Badges'}>
18
18
  <slot></slot>
19
19
  </div>
20
20
  `;
@@ -24,6 +24,7 @@ BadgeGroup.meta = {
24
24
  tag: 'quantic-badge-group',
25
25
  description: 'A run of quantic-badge or quantic-status-badge sharing one accessible name and a consistent gap. ' +
26
26
  'Wraps across lines, and each badge keeps its own size. Gap: --quantic-component-badge-group-gap. ' +
27
+ 'Layout: ::part(group), for a column or a different alignment. ' +
27
28
  'Use quantic-tag-group for tags.',
28
29
  category: 'display',
29
30
  slots: {
package/dist/capacity-bar/index.js CHANGED
@@ -92,77 +92,77 @@ CapacityBar.styles = css `
92
92
 
93
93
  .label {
94
94
  color: var(--quantic-text-secondary);
95
- font-size: var(--quantic-component-capacity-bar-label-font-size);
96
- line-height: var(--quantic-component-capacity-bar-label-line-height);
95
+ font-size: var(--quantic-component-capacity-bar-label-font-size, var(--quantic-internal-capacity-bar-label-font-size));
96
+ line-height: var(--quantic-component-capacity-bar-label-line-height, var(--quantic-internal-capacity-bar-label-line-height));
97
97
  white-space: nowrap;
98
98
  }
99
99
 
100
100
  .bar {
101
101
  display: flex;
102
102
  flex-wrap: nowrap;
103
- gap: var(--quantic-component-capacity-bar-gap, 3px);
103
+ gap: var(--quantic-component-capacity-bar-gap, var(--quantic-internal-capacity-bar-gap, 3px));
104
104
  }
105
105
 
106
106
  .size--xs {
107
- --quantic-component-capacity-bar-gap: 2px;
108
- --quantic-component-capacity-bar-segment-radius: 2px;
109
- --quantic-component-capacity-bar-segment-width: 3px;
110
- --quantic-component-capacity-bar-segment-height: var(--quantic-spacing-5);
111
- --quantic-component-capacity-bar-label-font-size: var(
107
+ --quantic-internal-capacity-bar-gap: 2px;
108
+ --quantic-internal-capacity-bar-segment-radius: 2px;
109
+ --quantic-internal-capacity-bar-segment-width: 3px;
110
+ --quantic-internal-capacity-bar-segment-height: var(--quantic-spacing-5);
111
+ --quantic-internal-capacity-bar-label-font-size: var(
112
112
  --quantic-font-size-body-xs
113
113
  );
114
- --quantic-component-capacity-bar-label-line-height: var(
114
+ --quantic-internal-capacity-bar-label-line-height: var(
115
115
  --quantic-line-height-body-xs
116
116
  );
117
117
  }
118
118
 
119
119
  .size--sm {
120
- --quantic-component-capacity-bar-gap: 2px;
121
- --quantic-component-capacity-bar-segment-radius: 2px;
122
- --quantic-component-capacity-bar-segment-width: var(--quantic-spacing-1);
123
- --quantic-component-capacity-bar-segment-height: var(--quantic-spacing-6);
124
- --quantic-component-capacity-bar-label-font-size: var(
120
+ --quantic-internal-capacity-bar-gap: 2px;
121
+ --quantic-internal-capacity-bar-segment-radius: 2px;
122
+ --quantic-internal-capacity-bar-segment-width: var(--quantic-spacing-1);
123
+ --quantic-internal-capacity-bar-segment-height: var(--quantic-spacing-6);
124
+ --quantic-internal-capacity-bar-label-font-size: var(
125
125
  --quantic-font-size-body-xs
126
126
  );
127
- --quantic-component-capacity-bar-label-line-height: var(
127
+ --quantic-internal-capacity-bar-label-line-height: var(
128
128
  --quantic-line-height-body-xs
129
129
  );
130
130
  }
131
131
 
132
132
  .size--md {
133
- --quantic-component-capacity-bar-gap: 2px;
134
- --quantic-component-capacity-bar-segment-radius: 3px;
135
- --quantic-component-capacity-bar-segment-width: var(
133
+ --quantic-internal-capacity-bar-gap: 2px;
134
+ --quantic-internal-capacity-bar-segment-radius: 3px;
135
+ --quantic-internal-capacity-bar-segment-width: var(
136
136
  --quantic-spacing-1-5
137
137
  );
138
- --quantic-component-capacity-bar-segment-height: var(--quantic-spacing-8);
139
- --quantic-component-capacity-bar-label-font-size: var(
138
+ --quantic-internal-capacity-bar-segment-height: var(--quantic-spacing-8);
139
+ --quantic-internal-capacity-bar-label-font-size: var(
140
140
  --quantic-font-size-body-sm
141
141
  );
142
- --quantic-component-capacity-bar-label-line-height: var(
142
+ --quantic-internal-capacity-bar-label-line-height: var(
143
143
  --quantic-line-height-body-sm
144
144
  );
145
145
  }
146
146
 
147
147
  .size--lg {
148
- --quantic-component-capacity-bar-gap: 3px;
149
- --quantic-component-capacity-bar-segment-radius: 4px;
150
- --quantic-component-capacity-bar-segment-width: var(--quantic-spacing-2);
151
- --quantic-component-capacity-bar-segment-height: var(
148
+ --quantic-internal-capacity-bar-gap: 3px;
149
+ --quantic-internal-capacity-bar-segment-radius: 4px;
150
+ --quantic-internal-capacity-bar-segment-width: var(--quantic-spacing-2);
151
+ --quantic-internal-capacity-bar-segment-height: var(
152
152
  --quantic-spacing-12
153
153
  );
154
- --quantic-component-capacity-bar-label-font-size: var(
154
+ --quantic-internal-capacity-bar-label-font-size: var(
155
155
  --quantic-font-size-body-md
156
156
  );
157
- --quantic-component-capacity-bar-label-line-height: var(
157
+ --quantic-internal-capacity-bar-label-line-height: var(
158
158
  --quantic-line-height-body-md
159
159
  );
160
160
  }
161
161
 
162
162
  .segment {
163
- width: var(--quantic-component-capacity-bar-segment-width, 6px);
164
- height: var(--quantic-component-capacity-bar-segment-height, 6px);
165
- border-radius: var(--quantic-component-capacity-bar-segment-radius, 4px);
163
+ width: var(--quantic-component-capacity-bar-segment-width, var(--quantic-internal-capacity-bar-segment-width, 6px));
164
+ height: var(--quantic-component-capacity-bar-segment-height, var(--quantic-internal-capacity-bar-segment-height, 6px));
165
+ border-radius: var(--quantic-component-capacity-bar-segment-radius, var(--quantic-internal-capacity-bar-segment-radius, 4px));
166
166
  }
167
167
 
168
168
  .segment--empty {
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);