@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/select/index.js CHANGED
@@ -144,9 +144,9 @@ Select.styles = css `
144
144
  border-radius: var(--quantic-component-select-border-radius, var(--quantic-radius-sm));
145
145
  padding: var(
146
146
  --quantic-component-select-padding-block,
147
- var(--quantic-spacing-md)
147
+ var(--quantic-internal-select-padding-block, var(--quantic-spacing-md))
148
148
  )
149
- var(--quantic-component-select-padding-inline, var(--quantic-spacing-3));
149
+ var(--quantic-component-select-padding-inline, var(--quantic-internal-select-padding-inline, var(--quantic-spacing-3)));
150
150
  font-size: var(
151
151
  --quantic-component-select-font-size,
152
152
  var(--quantic-font-size-body-md)
@@ -173,14 +173,14 @@ Select.styles = css `
173
173
 
174
174
  .main.size--xs {
175
175
  font-size: 13px;
176
- --quantic-component-select-padding-inline: var(--quantic-spacing-2);
177
- --quantic-component-select-padding-block: var(--quantic-spacing-xxs);
176
+ --quantic-internal-select-padding-inline: var(--quantic-spacing-2);
177
+ --quantic-internal-select-padding-block: var(--quantic-spacing-xxs);
178
178
  }
179
179
 
180
180
  .main.size--sm {
181
181
  font-size: var(--quantic-font-size-body-sm);
182
- --quantic-component-select-padding-inline: var(--quantic-spacing-2);
183
- --quantic-component-select-padding-block: var(--quantic-spacing-sm);
182
+ --quantic-internal-select-padding-inline: var(--quantic-spacing-2);
183
+ --quantic-internal-select-padding-block: var(--quantic-spacing-sm);
184
184
  }
185
185
 
186
186
  .main.size--md {
@@ -189,8 +189,8 @@ Select.styles = css `
189
189
 
190
190
  .main.size--lg {
191
191
  font-size: var(--quantic-font-size-body-lg);
192
- --quantic-component-select-padding-inline: var(--quantic-spacing-4);
193
- --quantic-component-select-padding-block: var(--quantic-spacing-3);
192
+ --quantic-internal-select-padding-inline: var(--quantic-spacing-4);
193
+ --quantic-internal-select-padding-block: var(--quantic-spacing-3);
194
194
  }
195
195
 
196
196
  select {
package/dist/spinner/index.js CHANGED
@@ -97,7 +97,11 @@ Spinner.styles = css `
97
97
  width: 24px;
98
98
  height: 24px;
99
99
  border-radius: 50%;
100
- border: 3px solid var(--quantic-component-spinner-color, currentColor);
100
+ border: 3px solid
101
+ var(
102
+ --quantic-component-spinner-color,
103
+ var(--quantic-internal-spinner-color, currentColor)
104
+ );
101
105
  border-top-color: transparent;
102
106
  }
103
107
 
@@ -129,10 +133,10 @@ Spinner.styles = css `
129
133
  border-width: 0;
130
134
  }
131
135
 
132
- ${unsafeCSS(generateColorStyles((color) => `--quantic-component-spinner-color: var(--quantic-utility-${color}-500);`))}
136
+ ${unsafeCSS(generateColorStyles((color) => `--quantic-internal-spinner-color: var(--quantic-utility-${color}-500);`))}
133
137
 
134
138
  .color--brand {
135
- --quantic-component-spinner-color: var(--quantic-fg-brand-primary);
139
+ --quantic-internal-spinner-color: var(--quantic-fg-brand-primary);
136
140
  }
137
141
 
138
142
  @keyframes spin {
package/dist/table/table-cell.component.js CHANGED
@@ -49,8 +49,8 @@ TableCell.meta = {
49
49
  TableCell.styles = css `
50
50
  :host {
51
51
  display: table-cell;
52
- padding: var(--quantic-component-table-padding);
53
- font-size: var(--quantic-component-table-font-size);
52
+ padding: var(--quantic-component-table-padding, var(--quantic-internal-table-padding));
53
+ font-size: var(--quantic-component-table-font-size, var(--quantic-internal-table-font-size));
54
54
  color: var(--quantic-component-table-color);
55
55
  vertical-align: middle;
56
56
  text-align: var(--cell-align, left);
package/dist/table/table-head.component.js CHANGED
@@ -85,7 +85,7 @@ TableHead.meta = {
85
85
  TableHead.styles = css `
86
86
  :host {
87
87
  display: table-cell;
88
- padding: var(--quantic-component-table-padding);
88
+ padding: var(--quantic-component-table-padding, var(--quantic-internal-table-padding));
89
89
  font-weight: var(--quantic-font-weight-semibold);
90
90
  color: var(--quantic-component-table-header-color);
91
91
  border-bottom: 1px solid var(--quantic-component-table-border-color);
package/dist/table/table.component.js CHANGED
@@ -65,11 +65,11 @@ Table.styles = css `
65
65
  display: block;
66
66
  width: fit-content;
67
67
  font-family: var(--quantic-font-family-body);
68
- font-size: var(--quantic-component-table-font-size);
68
+ font-size: var(--quantic-component-table-font-size, var(--quantic-internal-table-font-size));
69
69
  overflow-x: auto;
70
70
 
71
- --quantic-component-table-padding: var(--quantic-spacing-3);
72
- --quantic-component-table-font-size: var(--quantic-font-size-body-sm);
71
+ --quantic-internal-table-padding: var(--quantic-spacing-3);
72
+ --quantic-internal-table-font-size: var(--quantic-font-size-body-sm);
73
73
  --quantic-component-table-color: var(--quantic-text-secondary);
74
74
  --quantic-component-table-header-color: var(--quantic-text-secondary);
75
75
  --quantic-component-table-border-color: var(--quantic-border-secondary);
@@ -86,46 +86,46 @@ Table.styles = css `
86
86
 
87
87
  /* Size */
88
88
  :host([size='xs']) {
89
- --quantic-component-table-padding: var(--quantic-spacing-3);
90
- --quantic-component-table-font-size: var(--quantic-font-size-body-xs);
89
+ --quantic-internal-table-padding: var(--quantic-spacing-3);
90
+ --quantic-internal-table-font-size: var(--quantic-font-size-body-xs);
91
91
  }
92
92
 
93
93
  :host([size='sm']) {
94
- --quantic-component-table-padding: var(--quantic-spacing-4);
95
- --quantic-component-table-font-size: var(--quantic-font-size-body-sm);
94
+ --quantic-internal-table-padding: var(--quantic-spacing-4);
95
+ --quantic-internal-table-font-size: var(--quantic-font-size-body-sm);
96
96
  }
97
97
 
98
98
  :host([size='md']) {
99
- --quantic-component-table-padding: var(--quantic-spacing-5);
100
- --quantic-component-table-font-size: var(--quantic-font-size-body-md);
99
+ --quantic-internal-table-padding: var(--quantic-spacing-5);
100
+ --quantic-internal-table-font-size: var(--quantic-font-size-body-md);
101
101
  }
102
102
 
103
103
  :host([size='lg']) {
104
- --quantic-component-table-padding: var(--quantic-spacing-6);
105
- --quantic-component-table-font-size: var(--quantic-font-size-body-md);
104
+ --quantic-internal-table-padding: var(--quantic-spacing-6);
105
+ --quantic-internal-table-font-size: var(--quantic-font-size-body-md);
106
106
  }
107
107
 
108
108
  /* Dense variants - relative to size */
109
109
  :host([dense][size='xs']) {
110
- --quantic-component-table-padding: var(--quantic-spacing-1-5);
110
+ --quantic-internal-table-padding: var(--quantic-spacing-1-5);
111
111
  }
112
112
 
113
113
  :host([dense][size='sm']) {
114
- --quantic-component-table-padding: var(--quantic-spacing-2);
114
+ --quantic-internal-table-padding: var(--quantic-spacing-2);
115
115
  }
116
116
 
117
117
  :host([dense][size='md']) {
118
- --quantic-component-table-padding: var(--quantic-spacing-2);
118
+ --quantic-internal-table-padding: var(--quantic-spacing-2);
119
119
  }
120
120
 
121
121
  :host([dense][size='lg']) {
122
- --quantic-component-table-padding: var(--quantic-spacing-3);
122
+ --quantic-internal-table-padding: var(--quantic-spacing-3);
123
123
  }
124
124
 
125
125
  .toolbar,
126
126
  .controls {
127
127
  display: block;
128
- padding: var(--quantic-component-table-padding);
128
+ padding: var(--quantic-component-table-padding, var(--quantic-internal-table-padding));
129
129
  }
130
130
 
131
131
  .toolbar {
package/dist/tag/tag-group.component.js CHANGED
@@ -14,7 +14,7 @@ let TagGroup = class TagGroup extends QuanticElement {
14
14
  }
15
15
  render() {
16
16
  return html `
17
- <div class="group" role="group" aria-label=${this.ariaLabel ?? 'Tags'}>
17
+ <div class="group" part="group" role="group" aria-label=${this.ariaLabel ?? 'Tags'}>
18
18
  <slot></slot>
19
19
  </div>
20
20
  `;
@@ -24,6 +24,7 @@ TagGroup.meta = {
24
24
  tag: 'quantic-tag-group',
25
25
  description: 'A run of quantic-tag, quantic-status-tag or quantic-count-tag sharing one accessible name and a consistent gap. ' +
26
26
  'Wraps across lines, and each tag keeps its own size. Gap: --quantic-component-tag-group-gap. ' +
27
+ 'Layout: ::part(group), for a column or a different alignment. ' +
27
28
  'Use quantic-badge-group for badges.',
28
29
  category: 'display',
29
30
  slots: {
package/dist/text-input/index.js CHANGED
@@ -169,8 +169,8 @@ TextInput.styles = css `
169
169
  display: inline-block;
170
170
  width: 100%;
171
171
 
172
- --quantic-component-text-input-padding-inline: var(--quantic-spacing-3);
173
- --quantic-component-text-input-padding-block: var(--quantic-spacing-md);
172
+ --quantic-internal-text-input-padding-inline: var(--quantic-spacing-3);
173
+ --quantic-internal-text-input-padding-block: var(--quantic-spacing-md);
174
174
  --quantic-component-text-input-bg: var(--quantic-bg-primary);
175
175
  --quantic-component-text-input-color: var(--quantic-text-primary);
176
176
  }
@@ -187,8 +187,8 @@ TextInput.styles = css `
187
187
  border-radius: var(--quantic-component-text-input-border-radius, var(--quantic-radius-sm));
188
188
  color: var(--quantic-component-text-input-color);
189
189
  background-color: var(--quantic-component-text-input-bg);
190
- padding: var(--quantic-component-text-input-padding-block)
191
- var(--quantic-component-text-input-padding-inline);
190
+ padding: var(--quantic-component-text-input-padding-block, var(--quantic-internal-text-input-padding-block))
191
+ var(--quantic-component-text-input-padding-inline, var(--quantic-internal-text-input-padding-inline));
192
192
  transition:
193
193
  border-color 0.2s ease-in-out,
194
194
  box-shadow 0.2s ease-in-out;
@@ -208,14 +208,14 @@ TextInput.styles = css `
208
208
 
209
209
  .main.size--xs {
210
210
  font-size: 13px;
211
- --quantic-component-text-input-padding-inline: var(--quantic-spacing-2);
212
- --quantic-component-text-input-padding-block: var(--quantic-spacing-xxs);
211
+ --quantic-internal-text-input-padding-inline: var(--quantic-spacing-2);
212
+ --quantic-internal-text-input-padding-block: var(--quantic-spacing-xxs);
213
213
  }
214
214
 
215
215
  .main.size--sm {
216
216
  font-size: var(--quantic-font-size-body-sm);
217
- --quantic-component-text-input-padding-inline: var(--quantic-spacing-2);
218
- --quantic-component-text-input-padding-block: var(--quantic-spacing-sm);
217
+ --quantic-internal-text-input-padding-inline: var(--quantic-spacing-2);
218
+ --quantic-internal-text-input-padding-block: var(--quantic-spacing-sm);
219
219
  }
220
220
 
221
221
  .main.size--md {
@@ -224,8 +224,8 @@ TextInput.styles = css `
224
224
 
225
225
  .main.size--lg {
226
226
  font-size: var(--quantic-font-size-body-lg);
227
- --quantic-component-text-input-padding-inline: var(--quantic-spacing-4);
228
- --quantic-component-text-input-padding-block: var(--quantic-spacing-3);
227
+ --quantic-internal-text-input-padding-inline: var(--quantic-spacing-4);
228
+ --quantic-internal-text-input-padding-block: var(--quantic-spacing-3);
229
229
  }
230
230
 
231
231
  .input {
package/dist/textarea/index.js CHANGED
@@ -119,8 +119,8 @@ Textarea.styles = css `
119
119
  display: inline-block;
120
120
  width: 100%;
121
121
 
122
- --quantic-component-textarea-padding-inline: var(--quantic-spacing-3);
123
- --quantic-component-textarea-padding-block: var(--quantic-spacing-md);
122
+ --quantic-internal-textarea-padding-inline: var(--quantic-spacing-3);
123
+ --quantic-internal-textarea-padding-block: var(--quantic-spacing-md);
124
124
  --quantic-component-textarea-bg: var(--quantic-bg-primary);
125
125
  --quantic-component-textarea-color: var(--quantic-text-primary);
126
126
  }
@@ -135,8 +135,8 @@ Textarea.styles = css `
135
135
  border-radius: var(--quantic-component-textarea-border-radius, var(--quantic-radius-sm));
136
136
  color: var(--quantic-component-textarea-color);
137
137
  background-color: var(--quantic-component-textarea-bg);
138
- padding: var(--quantic-component-textarea-padding-block)
139
- var(--quantic-component-textarea-padding-inline);
138
+ padding: var(--quantic-component-textarea-padding-block, var(--quantic-internal-textarea-padding-block))
139
+ var(--quantic-component-textarea-padding-inline, var(--quantic-internal-textarea-padding-inline));
140
140
  transition:
141
141
  border-color 0.2s ease-in-out,
142
142
  box-shadow 0.2s ease-in-out;
@@ -156,14 +156,14 @@ Textarea.styles = css `
156
156
 
157
157
  .main.size--xs {
158
158
  font-size: 13px;
159
- --quantic-component-textarea-padding-inline: var(--quantic-spacing-2);
160
- --quantic-component-textarea-padding-block: var(--quantic-spacing-xxs);
159
+ --quantic-internal-textarea-padding-inline: var(--quantic-spacing-2);
160
+ --quantic-internal-textarea-padding-block: var(--quantic-spacing-xxs);
161
161
  }
162
162
 
163
163
  .main.size--sm {
164
164
  font-size: var(--quantic-font-size-body-sm);
165
- --quantic-component-textarea-padding-inline: var(--quantic-spacing-2);
166
- --quantic-component-textarea-padding-block: var(--quantic-spacing-sm);
165
+ --quantic-internal-textarea-padding-inline: var(--quantic-spacing-2);
166
+ --quantic-internal-textarea-padding-block: var(--quantic-spacing-sm);
167
167
  }
168
168
 
169
169
  .main.size--md {
@@ -172,8 +172,8 @@ Textarea.styles = css `
172
172
 
173
173
  .main.size--lg {
174
174
  font-size: var(--quantic-font-size-body-lg);
175
- --quantic-component-textarea-padding-inline: var(--quantic-spacing-4);
176
- --quantic-component-textarea-padding-block: var(--quantic-spacing-3);
175
+ --quantic-internal-textarea-padding-inline: var(--quantic-spacing-4);
176
+ --quantic-internal-textarea-padding-block: var(--quantic-spacing-3);
177
177
  }
178
178
 
179
179
  .input {
package/dist/tooltip/tooltip.js CHANGED
@@ -236,7 +236,6 @@ Tooltip.styles = css `
236
236
  --quantic-component-tooltip-font-size: var(--quantic-font-size-body-sm);
237
237
  --quantic-component-tooltip-line-height: var(--quantic-line-height-body-sm);
238
238
  --quantic-component-tooltip-z-index: 9999;
239
- --quantic-component-tooltip-offset: 20px;
240
239
  --quantic-component-tooltip-arrow-size: var(--quantic-spacing-2);
241
240
  }
242
241
 
package/dist/types/meta/public-css-variables.test.d.ts ADDED
@@ -0,0 +1 @@
1
+ export {};
package/dist/types/meta/sibling-groups.test.d.ts ADDED
@@ -0,0 +1 @@
1
+ export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ctrliq/quantic-components",
3
- "version": "1.84.0",
3
+ "version": "1.85.0",
4
4
  "type": "module",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/types/index.d.ts",
@@ -74,6 +74,7 @@
74
74
  "change-case": "5.4.4",
75
75
  "eslint": "10.8.1",
76
76
  "eslint-config-prettier": "10.1.8",
77
+ "postcss": "8.5.26",
77
78
  "prettier": "^3.5.3",
78
79
  "rollup": "4.62.2",
79
80
  "tslib": "2.8.1",