@ctrliq/quantic-components 1.84.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 (41) hide show
  1. package/dist/capacity-bar/index.js +30 -30
  2. package/dist/card/card-carousel.component.js +35 -35
  3. package/dist/card/card-group.component.js +2 -8
  4. package/dist/card/card.component.js +38 -38
  5. package/dist/code-input/index.js +33 -33
  6. package/dist/combobox/index.js +30 -30
  7. package/dist/dialog/dialog.js +18 -18
  8. package/dist/dropdown-menu/item.component.js +24 -24
  9. package/dist/field/field-group.component.js +13 -13
  10. package/dist/field/field.component.js +31 -31
  11. package/dist/fieldset/fieldset.component.js +27 -27
  12. package/dist/grid/grid.component.js +31 -31
  13. package/dist/index.js.map +1 -1
  14. package/dist/layout/layout.component.js +1 -0
  15. package/dist/layout/navbar-menu-item.component.js +1 -0
  16. package/dist/layout/sidebar-menu-item.component.js +1 -0
  17. package/dist/log-output/log-output.component.js +1 -1
  18. package/dist/meta/index.js.map +1 -1
  19. package/dist/meta/public-css-variables.test.d.ts +1 -0
  20. package/dist/meta/public-css-variables.test.js +244 -0
  21. package/dist/meta.json +1 -1
  22. package/dist/number-input/index.js +18 -17
  23. package/dist/option-card/option-card.component.js +27 -27
  24. package/dist/panel/panel-group.component.js +10 -7
  25. package/dist/panel/panel.component.js +3 -3
  26. package/dist/progress/index.js +15 -15
  27. package/dist/quantic-components.js +443 -439
  28. package/dist/quantic-components.js.map +1 -1
  29. package/dist/quantic-components.min.js +443 -439
  30. package/dist/quantic-components.min.js.map +1 -1
  31. package/dist/register.js.map +1 -1
  32. package/dist/select/index.js +8 -8
  33. package/dist/spinner/index.js +7 -3
  34. package/dist/table/table-cell.component.js +2 -2
  35. package/dist/table/table-head.component.js +1 -1
  36. package/dist/table/table.component.js +16 -16
  37. package/dist/text-input/index.js +10 -10
  38. package/dist/textarea/index.js +10 -10
  39. package/dist/tooltip/tooltip.js +0 -1
  40. package/dist/types/meta/public-css-variables.test.d.ts +1 -0
  41. package/package.json +2 -1
package/dist/fieldset/fieldset.component.js CHANGED
@@ -60,78 +60,78 @@ Fieldset.styles = css `
60
60
  display: block;
61
61
  font-family: var(--quantic-font-family-body);
62
62
 
63
- --quantic-component-fieldset-legend-font-size: var(
63
+ --quantic-internal-fieldset-legend-font-size: var(
64
64
  --quantic-font-size-body-lg
65
65
  );
66
- --quantic-component-fieldset-legend-line-height: var(
66
+ --quantic-internal-fieldset-legend-line-height: var(
67
67
  --quantic-line-height-body-md
68
68
  );
69
- --quantic-component-fieldset-padding: var(--quantic-spacing-5);
70
- --quantic-component-fieldset-border: 1px solid
69
+ --quantic-internal-fieldset-padding: var(--quantic-spacing-5);
70
+ --quantic-internal-fieldset-border: 1px solid
71
71
  var(--quantic-border-secondary);
72
- --quantic-component-fieldset-gap: var(--quantic-spacing-4);
72
+ --quantic-internal-fieldset-gap: var(--quantic-spacing-4);
73
73
  --quantic-component-fieldset-border-radius: var(--quantic-radius-md);
74
74
  }
75
75
 
76
76
  .fieldset {
77
- border: var(--quantic-component-fieldset-border);
77
+ border: var(--quantic-component-fieldset-border, var(--quantic-internal-fieldset-border));
78
78
  border-radius: var(--quantic-component-fieldset-border-radius);
79
- padding: var(--quantic-component-fieldset-padding);
79
+ padding: var(--quantic-component-fieldset-padding, var(--quantic-internal-fieldset-padding));
80
80
  padding-bottom: calc(
81
- var(--quantic-component-fieldset-padding) +
82
- var(--quantic-component-fieldset-gap) / 2
81
+ var(--quantic-component-fieldset-padding, var(--quantic-internal-fieldset-padding)) +
82
+ var(--quantic-component-fieldset-gap, var(--quantic-internal-fieldset-gap)) / 2
83
83
  );
84
84
  margin: 0;
85
85
  display: flex;
86
86
  flex-direction: column;
87
- gap: var(--quantic-component-fieldset-gap);
87
+ gap: var(--quantic-component-fieldset-gap, var(--quantic-internal-fieldset-gap));
88
88
  }
89
89
 
90
90
  .size--sm {
91
- --quantic-component-fieldset-padding: var(--quantic-spacing-3);
92
- --quantic-component-fieldset-gap: var(--quantic-spacing-2);
93
- --quantic-component-fieldset-legend-font-size: var(
91
+ --quantic-internal-fieldset-padding: var(--quantic-spacing-3);
92
+ --quantic-internal-fieldset-gap: var(--quantic-spacing-2);
93
+ --quantic-internal-fieldset-legend-font-size: var(
94
94
  --quantic-font-size-body-md
95
95
  );
96
- --quantic-component-fieldset-legend-line-height: var(
96
+ --quantic-internal-fieldset-legend-line-height: var(
97
97
  --quantic-line-height-body-sm
98
98
  );
99
99
  }
100
100
 
101
101
  .size--md {
102
- --quantic-component-fieldset-padding: var(--quantic-spacing-5);
103
- --quantic-component-fieldset-gap: var(--quantic-spacing-4);
104
- --quantic-component-fieldset-legend-font-size: var(
102
+ --quantic-internal-fieldset-padding: var(--quantic-spacing-5);
103
+ --quantic-internal-fieldset-gap: var(--quantic-spacing-4);
104
+ --quantic-internal-fieldset-legend-font-size: var(
105
105
  --quantic-font-size-body-lg
106
106
  );
107
- --quantic-component-fieldset-legend-line-height: var(
107
+ --quantic-internal-fieldset-legend-line-height: var(
108
108
  --quantic-line-height-body-md
109
109
  );
110
110
  }
111
111
 
112
112
  .size--lg {
113
- --quantic-component-fieldset-padding: var(--quantic-spacing-6);
114
- --quantic-component-fieldset-gap: var(--quantic-spacing-5);
115
- --quantic-component-fieldset-legend-font-size: var(
113
+ --quantic-internal-fieldset-padding: var(--quantic-spacing-6);
114
+ --quantic-internal-fieldset-gap: var(--quantic-spacing-5);
115
+ --quantic-internal-fieldset-legend-font-size: var(
116
116
  --quantic-font-size-body-lg
117
117
  );
118
- --quantic-component-fieldset-legend-line-height: var(
118
+ --quantic-internal-fieldset-legend-line-height: var(
119
119
  --quantic-line-height-body-lg
120
120
  );
121
121
  }
122
122
 
123
123
  .variant--bare {
124
- --quantic-component-fieldset-padding: 0;
125
- --quantic-component-fieldset-border: none;
124
+ --quantic-internal-fieldset-padding: 0;
125
+ --quantic-internal-fieldset-border: none;
126
126
  }
127
127
 
128
128
  .header {
129
129
  display: flex;
130
130
  flex-direction: column;
131
131
  gap: var(--quantic-spacing-1);
132
- font-size: var(--quantic-component-fieldset-legend-font-size);
133
- line-height: var(--quantic-component-fieldset-legend-line-height);
134
- margin-bottom: var(--quantic-component-fieldset-gap);
132
+ font-size: var(--quantic-component-fieldset-legend-font-size, var(--quantic-internal-fieldset-legend-font-size));
133
+ line-height: var(--quantic-component-fieldset-legend-line-height, var(--quantic-internal-fieldset-legend-line-height));
134
+ margin-bottom: var(--quantic-component-fieldset-gap, var(--quantic-internal-fieldset-gap));
135
135
  }
136
136
 
137
137
  .legend {
package/dist/grid/grid.component.js CHANGED
@@ -43,9 +43,9 @@ Grid.styles = css `
43
43
 
44
44
  .grid {
45
45
  display: grid;
46
- gap: var(--quantic-component-grid-gap, var(--quantic-spacing-4));
46
+ gap: var(--quantic-component-grid-gap, var(--quantic-internal-grid-gap, var(--quantic-spacing-4)));
47
47
  grid-template-columns: repeat(
48
- var(--quantic-component-grid-columns, 1),
48
+ var(--quantic-component-grid-columns, var(--quantic-internal-grid-columns, 1)),
49
49
  minmax(0, 1fr)
50
50
  );
51
51
  align-items: stretch;
@@ -56,109 +56,109 @@ Grid.styles = css `
56
56
  }
57
57
 
58
58
  .density--dense {
59
- --quantic-component-grid-columns: 2;
60
- --quantic-component-grid-gap: var(--quantic-spacing-2);
59
+ --quantic-internal-grid-columns: 2;
60
+ --quantic-internal-grid-gap: var(--quantic-spacing-2);
61
61
  }
62
62
 
63
63
  .density--compact {
64
- --quantic-component-grid-columns: 1;
65
- --quantic-component-grid-gap: var(--quantic-spacing-2);
64
+ --quantic-internal-grid-columns: 1;
65
+ --quantic-internal-grid-gap: var(--quantic-spacing-2);
66
66
  }
67
67
 
68
68
  .density--comfortable {
69
- --quantic-component-grid-columns: 1;
70
- --quantic-component-grid-gap: var(--quantic-spacing-4);
69
+ --quantic-internal-grid-columns: 1;
70
+ --quantic-internal-grid-gap: var(--quantic-spacing-4);
71
71
  }
72
72
 
73
73
  .density--sparse {
74
- --quantic-component-grid-columns: 1;
75
- --quantic-component-grid-gap: var(--quantic-spacing-4);
74
+ --quantic-internal-grid-columns: 1;
75
+ --quantic-internal-grid-gap: var(--quantic-spacing-4);
76
76
  }
77
77
 
78
78
  @container (min-width: ${unsafeCSS(ContainerSizeBreakpoint.Xs)}) {
79
79
  .density--dense {
80
- --quantic-component-grid-columns: 3;
81
- --quantic-component-grid-gap: var(--quantic-spacing-3);
80
+ --quantic-internal-grid-columns: 3;
81
+ --quantic-internal-grid-gap: var(--quantic-spacing-3);
82
82
  }
83
83
 
84
84
  .density--compact {
85
- --quantic-component-grid-columns: 2;
86
- --quantic-component-grid-gap: var(--quantic-spacing-3);
85
+ --quantic-internal-grid-columns: 2;
86
+ --quantic-internal-grid-gap: var(--quantic-spacing-3);
87
87
  }
88
88
  }
89
89
 
90
90
  @container (min-width: ${unsafeCSS(ContainerSizeBreakpoint.Sm)}) {
91
91
  .density--dense {
92
- --quantic-component-grid-columns: 4;
92
+ --quantic-internal-grid-columns: 4;
93
93
  }
94
94
 
95
95
  .density--compact {
96
- --quantic-component-grid-columns: 3;
96
+ --quantic-internal-grid-columns: 3;
97
97
  }
98
98
 
99
99
  .density--comfortable {
100
- --quantic-component-grid-columns: 2;
100
+ --quantic-internal-grid-columns: 2;
101
101
  }
102
102
  }
103
103
 
104
104
  @container (min-width: ${unsafeCSS(ContainerSizeBreakpoint.Md)}) {
105
105
  .density--dense {
106
- --quantic-component-grid-columns: 5;
106
+ --quantic-internal-grid-columns: 5;
107
107
  }
108
108
 
109
109
  .density--compact {
110
- --quantic-component-grid-columns: 3;
110
+ --quantic-internal-grid-columns: 3;
111
111
  }
112
112
 
113
113
  .density--sparse {
114
- --quantic-component-grid-columns: 2;
114
+ --quantic-internal-grid-columns: 2;
115
115
  }
116
116
  }
117
117
 
118
118
  @container (min-width: ${unsafeCSS(ContainerSizeBreakpoint.Lg)}) {
119
119
  .density--dense {
120
- --quantic-component-grid-columns: 6;
120
+ --quantic-internal-grid-columns: 6;
121
121
  }
122
122
 
123
123
  .density--compact {
124
- --quantic-component-grid-columns: 4;
124
+ --quantic-internal-grid-columns: 4;
125
125
  }
126
126
 
127
127
  .density--comfortable {
128
- --quantic-component-grid-columns: 3;
128
+ --quantic-internal-grid-columns: 3;
129
129
  }
130
130
 
131
131
  .density--sparse {
132
- --quantic-component-grid-gap: var(--quantic-spacing-5);
132
+ --quantic-internal-grid-gap: var(--quantic-spacing-5);
133
133
  }
134
134
  }
135
135
 
136
136
  @container (min-width: ${unsafeCSS(ContainerSizeBreakpoint.Xl)}) {
137
137
  .density--dense {
138
- --quantic-component-grid-columns: 8;
138
+ --quantic-internal-grid-columns: 8;
139
139
  }
140
140
 
141
141
  .density--compact {
142
- --quantic-component-grid-columns: 5;
142
+ --quantic-internal-grid-columns: 5;
143
143
  }
144
144
 
145
145
  .density--comfortable {
146
- --quantic-component-grid-columns: 3;
147
- --quantic-component-grid-gap: var(--quantic-spacing-5);
146
+ --quantic-internal-grid-columns: 3;
147
+ --quantic-internal-grid-gap: var(--quantic-spacing-5);
148
148
  }
149
149
  }
150
150
 
151
151
  @container (min-width: ${unsafeCSS(ContainerSizeBreakpoint.Xxl)}) {
152
152
  .density--dense {
153
- --quantic-component-grid-columns: 10;
153
+ --quantic-internal-grid-columns: 10;
154
154
  }
155
155
 
156
156
  .density--compact {
157
- --quantic-component-grid-columns: 6;
157
+ --quantic-internal-grid-columns: 6;
158
158
  }
159
159
 
160
160
  .density--comfortable {
161
- --quantic-component-grid-columns: 4;
161
+ --quantic-internal-grid-columns: 4;
162
162
  }
163
163
  }
164
164
  `;