@helixui/library 3.2.0-next.76 → 3.2.0-next.78
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.
- package/custom-elements.json +364 -364
- package/dist/components/hx-button/hx-button.d.ts.map +1 -1
- package/dist/components/hx-button/hx-button.styles.d.ts.map +1 -1
- package/dist/components/hx-button/index.js +1 -1
- package/dist/components/hx-side-nav/hx-nav-item.d.ts.map +1 -1
- package/dist/components/hx-side-nav/hx-nav-item.styles.d.ts.map +1 -1
- package/dist/components/hx-side-nav/hx-side-nav.d.ts.map +1 -1
- package/dist/components/hx-side-nav/hx-side-nav.styles.d.ts.map +1 -1
- package/dist/components/hx-side-nav/index.js +1 -1
- package/dist/components/hx-text-input/hx-text-input.d.ts +5 -5
- package/dist/components/hx-text-input/hx-text-input.d.ts.map +1 -1
- package/dist/components/hx-text-input/index.js +1 -1
- package/dist/components/hx-toast/hx-toast.styles.d.ts.map +1 -1
- package/dist/components/hx-toast/index.js +1 -1
- package/dist/css/helix-all.css +85 -63
- package/dist/css/helix-core.css +54 -34
- package/dist/css/helix-feedback.css +18 -13
- package/dist/css/helix-forms.css +4 -4
- package/dist/css/helix-navigation.css +9 -12
- package/dist/css/helix-tokens.css +43 -0
- package/dist/css/hx-button.css +54 -34
- package/dist/css/hx-side-nav.css +9 -12
- package/dist/css/hx-text-input.css +4 -4
- package/dist/css/hx-toast.css +18 -13
- package/dist/css/index.css +1 -1
- package/dist/css/manifest.json +25 -16
- package/dist/index.js +4 -4
- package/dist/shared/{hx-button-modUSOpY.js → hx-button-YeUzCe6e.js} +77 -58
- package/dist/shared/hx-button-YeUzCe6e.js.map +1 -0
- package/dist/shared/{hx-nav-item-D8xHLVOs.js → hx-nav-item-BqML5BAh.js} +45 -42
- package/dist/shared/hx-nav-item-BqML5BAh.js.map +1 -0
- package/dist/shared/{hx-text-input-B-caO5fI.js → hx-text-input-ClrrmoE1.js} +20 -21
- package/dist/shared/hx-text-input-ClrrmoE1.js.map +1 -0
- package/dist/shared/{toast-factory-DvDRAh0l.js → toast-factory-CIiZDZGZ.js} +59 -54
- package/dist/shared/toast-factory-CIiZDZGZ.js.map +1 -0
- package/figma-inventory.json +16 -16
- package/package.json +2 -2
- package/dist/shared/hx-button-modUSOpY.js.map +0 -1
- package/dist/shared/hx-nav-item-D8xHLVOs.js.map +0 -1
- package/dist/shared/hx-text-input-B-caO5fI.js.map +0 -1
- package/dist/shared/toast-factory-DvDRAh0l.js.map +0 -1
package/custom-elements.json
CHANGED
|
@@ -4,583 +4,583 @@
|
|
|
4
4
|
"modules": [
|
|
5
5
|
{
|
|
6
6
|
"kind": "javascript-module",
|
|
7
|
-
"path": "src/components/hx-
|
|
7
|
+
"path": "src/components/hx-accordion/hx-accordion-item.ts",
|
|
8
8
|
"declarations": [
|
|
9
9
|
{
|
|
10
10
|
"kind": "class",
|
|
11
|
-
"description": "
|
|
12
|
-
"name": "
|
|
11
|
+
"description": "An individual accordion item with collapsible content.",
|
|
12
|
+
"name": "HelixAccordionItem",
|
|
13
13
|
"cssProperties": [
|
|
14
14
|
{
|
|
15
|
-
"description": "
|
|
16
|
-
"name": "--hx-
|
|
17
|
-
"default": "
|
|
18
|
-
},
|
|
19
|
-
{
|
|
20
|
-
"description": "Bar border (default variant).",
|
|
21
|
-
"name": "--hx-action-bar-border",
|
|
22
|
-
"default": "none"
|
|
23
|
-
},
|
|
24
|
-
{
|
|
25
|
-
"description": "Inner padding.",
|
|
26
|
-
"name": "--hx-action-bar-padding",
|
|
27
|
-
"default": "var(--hx-space-2,0.5rem) var(--hx-space-3,0.75rem)"
|
|
28
|
-
},
|
|
29
|
-
{
|
|
30
|
-
"description": "Gap between slotted items.",
|
|
31
|
-
"name": "--hx-action-bar-gap",
|
|
32
|
-
"default": "var(--hx-space-2,0.5rem)"
|
|
33
|
-
},
|
|
34
|
-
{
|
|
35
|
-
"description": "Z-index when sticky or bottom position.",
|
|
36
|
-
"name": "--hx-action-bar-z-index",
|
|
37
|
-
"default": "10"
|
|
38
|
-
},
|
|
39
|
-
{
|
|
40
|
-
"description": "Padding.",
|
|
41
|
-
"name": "--hx-action-bar-padding-block-start",
|
|
42
|
-
"default": "0px"
|
|
43
|
-
},
|
|
44
|
-
{
|
|
45
|
-
"description": "Padding.",
|
|
46
|
-
"name": "--hx-action-bar-padding-block-end",
|
|
47
|
-
"default": "0px"
|
|
48
|
-
},
|
|
49
|
-
{
|
|
50
|
-
"description": "CSS custom property.",
|
|
51
|
-
"name": "--hx-border-radius-md"
|
|
52
|
-
},
|
|
53
|
-
{
|
|
54
|
-
"description": "Width.",
|
|
55
|
-
"name": "--hx-border-width-thin"
|
|
56
|
-
},
|
|
57
|
-
{
|
|
58
|
-
"description": "Color.",
|
|
59
|
-
"name": "--hx-color-neutral-0"
|
|
60
|
-
},
|
|
61
|
-
{
|
|
62
|
-
"description": "Color.",
|
|
63
|
-
"name": "--hx-color-neutral-200"
|
|
64
|
-
},
|
|
65
|
-
{
|
|
66
|
-
"description": "Color.",
|
|
67
|
-
"name": "--hx-color-neutral-50"
|
|
15
|
+
"description": "Border color between items.",
|
|
16
|
+
"name": "--hx-accordion-border-color",
|
|
17
|
+
"default": "var(--hx-color-neutral-200)"
|
|
68
18
|
},
|
|
69
19
|
{
|
|
70
|
-
"description": "
|
|
71
|
-
"name": "--hx-
|
|
20
|
+
"description": "Trigger padding.",
|
|
21
|
+
"name": "--hx-accordion-trigger-padding",
|
|
22
|
+
"default": "var(--hx-space-4)"
|
|
72
23
|
},
|
|
73
24
|
{
|
|
74
|
-
"description": "
|
|
75
|
-
"name": "--hx-
|
|
25
|
+
"description": "Trigger text color.",
|
|
26
|
+
"name": "--hx-accordion-trigger-color",
|
|
27
|
+
"default": "var(--hx-color-neutral-800)"
|
|
76
28
|
},
|
|
77
29
|
{
|
|
78
|
-
"description": "
|
|
79
|
-
"name": "--hx-
|
|
30
|
+
"description": "Trigger background color.",
|
|
31
|
+
"name": "--hx-accordion-trigger-bg",
|
|
32
|
+
"default": "transparent"
|
|
80
33
|
},
|
|
81
34
|
{
|
|
82
|
-
"description": "
|
|
83
|
-
"name": "--hx-
|
|
35
|
+
"description": "Trigger hover background.",
|
|
36
|
+
"name": "--hx-accordion-trigger-hover-bg",
|
|
37
|
+
"default": "var(--hx-color-neutral-50)"
|
|
84
38
|
},
|
|
85
39
|
{
|
|
86
|
-
"description": "
|
|
87
|
-
"name": "--hx-
|
|
40
|
+
"description": "Icon color.",
|
|
41
|
+
"name": "--hx-accordion-icon-color",
|
|
42
|
+
"default": "var(--hx-color-neutral-500)"
|
|
88
43
|
},
|
|
89
44
|
{
|
|
90
|
-
"description": "
|
|
91
|
-
"name": "--hx-
|
|
45
|
+
"description": "Content padding.",
|
|
46
|
+
"name": "--hx-accordion-content-padding",
|
|
47
|
+
"default": "0 var(--hx-space-4) var(--hx-space-4)"
|
|
92
48
|
},
|
|
93
49
|
{
|
|
94
|
-
"description": "
|
|
95
|
-
"name": "--hx-
|
|
50
|
+
"description": "Content text color.",
|
|
51
|
+
"name": "--hx-accordion-content-color",
|
|
52
|
+
"default": "var(--hx-color-neutral-600)"
|
|
96
53
|
}
|
|
97
54
|
],
|
|
98
55
|
"cssParts": [
|
|
99
56
|
{
|
|
100
|
-
"description": "The
|
|
101
|
-
"name": "
|
|
102
|
-
},
|
|
103
|
-
{
|
|
104
|
-
"description": "The start (left) slot wrapper.",
|
|
105
|
-
"name": "start"
|
|
57
|
+
"description": "The outer details element container.",
|
|
58
|
+
"name": "item"
|
|
106
59
|
},
|
|
107
60
|
{
|
|
108
|
-
"description": "The
|
|
109
|
-
"name": "
|
|
61
|
+
"description": "The summary/trigger element.",
|
|
62
|
+
"name": "trigger"
|
|
110
63
|
},
|
|
111
64
|
{
|
|
112
|
-
"description": "The
|
|
113
|
-
"name": "
|
|
65
|
+
"description": "The collapsible content area.",
|
|
66
|
+
"name": "content"
|
|
114
67
|
},
|
|
115
68
|
{
|
|
116
|
-
"description": "The
|
|
117
|
-
"name": "
|
|
69
|
+
"description": "The expand/collapse icon.",
|
|
70
|
+
"name": "icon"
|
|
118
71
|
}
|
|
119
72
|
],
|
|
120
73
|
"slots": [
|
|
121
74
|
{
|
|
122
|
-
"description": "
|
|
123
|
-
"name": "
|
|
75
|
+
"description": "The heading/trigger content for this item.",
|
|
76
|
+
"name": "trigger"
|
|
124
77
|
},
|
|
125
78
|
{
|
|
126
|
-
"description": "
|
|
79
|
+
"description": "Default slot for the collapsible body content.",
|
|
127
80
|
"name": ""
|
|
128
|
-
},
|
|
129
|
-
{
|
|
130
|
-
"description": "Right-aligned actions.",
|
|
131
|
-
"name": "end"
|
|
132
|
-
},
|
|
133
|
-
{
|
|
134
|
-
"description": "Actions revealed when the bar is constrained for space.",
|
|
135
|
-
"name": "overflow"
|
|
136
81
|
}
|
|
137
82
|
],
|
|
138
83
|
"members": [
|
|
139
84
|
{
|
|
140
85
|
"kind": "field",
|
|
141
|
-
"name": "
|
|
86
|
+
"name": "expanded",
|
|
142
87
|
"type": {
|
|
143
|
-
"text": "
|
|
88
|
+
"text": "boolean"
|
|
144
89
|
},
|
|
145
|
-
"default": "
|
|
146
|
-
"description": "
|
|
147
|
-
"attribute": "
|
|
90
|
+
"default": "false",
|
|
91
|
+
"description": "Whether this item is expanded.",
|
|
92
|
+
"attribute": "expanded",
|
|
148
93
|
"reflects": true
|
|
149
94
|
},
|
|
150
95
|
{
|
|
151
96
|
"kind": "field",
|
|
152
|
-
"name": "
|
|
97
|
+
"name": "disabled",
|
|
153
98
|
"type": {
|
|
154
|
-
"text": "
|
|
99
|
+
"text": "boolean"
|
|
155
100
|
},
|
|
156
|
-
"default": "
|
|
157
|
-
"description": "
|
|
158
|
-
"attribute": "
|
|
101
|
+
"default": "false",
|
|
102
|
+
"description": "Whether this item is disabled (cannot be toggled).",
|
|
103
|
+
"attribute": "disabled",
|
|
159
104
|
"reflects": true
|
|
160
105
|
},
|
|
161
106
|
{
|
|
162
107
|
"kind": "field",
|
|
163
|
-
"name": "
|
|
108
|
+
"name": "level",
|
|
164
109
|
"type": {
|
|
165
|
-
"text": "
|
|
110
|
+
"text": "1 | 2 | 3 | 4 | 5 | 6"
|
|
166
111
|
},
|
|
167
|
-
"default": "
|
|
168
|
-
"description": "
|
|
169
|
-
"attribute": "
|
|
170
|
-
|
|
112
|
+
"default": "3",
|
|
113
|
+
"description": "Heading level (1–6) applied via `role=\"heading\" aria-level` on the summary\ntrigger. Defaults to 3. Set to match the document outline around the\naccordion so screen readers surface accordion items in the heading list.",
|
|
114
|
+
"attribute": "level"
|
|
115
|
+
}
|
|
116
|
+
],
|
|
117
|
+
"events": [
|
|
118
|
+
{
|
|
119
|
+
"name": "hx-expand",
|
|
120
|
+
"type": {
|
|
121
|
+
"text": "CustomEvent<{expanded: boolean, itemId: string}>"
|
|
122
|
+
},
|
|
123
|
+
"description": "Dispatched when the item is expanded."
|
|
171
124
|
},
|
|
172
125
|
{
|
|
173
|
-
"
|
|
174
|
-
"name": "accessibleLabel",
|
|
126
|
+
"name": "hx-collapse",
|
|
175
127
|
"type": {
|
|
176
|
-
"text": "string"
|
|
128
|
+
"text": "CustomEvent<{expanded: boolean, itemId: string}>"
|
|
177
129
|
},
|
|
178
|
-
"
|
|
179
|
-
"description": "Accessible label for the toolbar.\nRequired when multiple toolbars appear on the same page.\n\nAccepts both `accessible-label` and the standard `aria-label` HTML attribute.\nThe `accessible-label` attribute takes precedence when both are set.\n\nPreviously this was exposed as the `ariaLabel` JS property, which shadowed\nthe native `HTMLElement.ariaLabel`. That shadowing is removed; use\n`accessibleLabel` or the HTML attributes instead.",
|
|
180
|
-
"attribute": "accessible-label"
|
|
130
|
+
"description": "Dispatched when the item is collapsed."
|
|
181
131
|
}
|
|
182
132
|
],
|
|
183
133
|
"attributes": [
|
|
184
134
|
{
|
|
185
|
-
"name": "
|
|
135
|
+
"name": "expanded",
|
|
186
136
|
"type": {
|
|
187
|
-
"text": "
|
|
137
|
+
"text": "boolean"
|
|
188
138
|
},
|
|
189
|
-
"default": "
|
|
190
|
-
"description": "
|
|
191
|
-
"fieldName": "
|
|
192
|
-
"attribute": "
|
|
139
|
+
"default": "false",
|
|
140
|
+
"description": "Whether this item is expanded.",
|
|
141
|
+
"fieldName": "expanded",
|
|
142
|
+
"attribute": "expanded"
|
|
193
143
|
},
|
|
194
144
|
{
|
|
195
|
-
"name": "
|
|
145
|
+
"name": "disabled",
|
|
196
146
|
"type": {
|
|
197
|
-
"text": "
|
|
147
|
+
"text": "boolean"
|
|
198
148
|
},
|
|
199
|
-
"default": "
|
|
200
|
-
"description": "
|
|
201
|
-
"fieldName": "
|
|
202
|
-
"attribute": "
|
|
149
|
+
"default": "false",
|
|
150
|
+
"description": "Whether this item is disabled (cannot be toggled).",
|
|
151
|
+
"fieldName": "disabled",
|
|
152
|
+
"attribute": "disabled"
|
|
203
153
|
},
|
|
204
154
|
{
|
|
205
|
-
"name": "
|
|
155
|
+
"name": "level",
|
|
206
156
|
"type": {
|
|
207
|
-
"text": "
|
|
157
|
+
"text": "1 | 2 | 3 | 4 | 5 | 6"
|
|
208
158
|
},
|
|
209
|
-
"default": "
|
|
210
|
-
"description": "
|
|
211
|
-
"fieldName": "
|
|
212
|
-
"attribute": "
|
|
159
|
+
"default": "3",
|
|
160
|
+
"description": "Heading level (1–6) applied via `role=\"heading\" aria-level` on the summary\ntrigger. Defaults to 3. Set to match the document outline around the\naccordion so screen readers surface accordion items in the heading list.",
|
|
161
|
+
"fieldName": "level",
|
|
162
|
+
"attribute": "level"
|
|
163
|
+
}
|
|
164
|
+
],
|
|
165
|
+
"superclass": {
|
|
166
|
+
"name": "HelixElement",
|
|
167
|
+
"module": "/src/base/index.js"
|
|
168
|
+
},
|
|
169
|
+
"tagName": "hx-accordion-item",
|
|
170
|
+
"customElement": true,
|
|
171
|
+
"summary": "Collapsible panel that can be expanded or collapsed."
|
|
172
|
+
},
|
|
173
|
+
{
|
|
174
|
+
"kind": "variable",
|
|
175
|
+
"name": "detail",
|
|
176
|
+
"type": {
|
|
177
|
+
"text": "object"
|
|
178
|
+
},
|
|
179
|
+
"default": "{ expanded, itemId: this.id || '' }"
|
|
180
|
+
}
|
|
181
|
+
],
|
|
182
|
+
"exports": [
|
|
183
|
+
{
|
|
184
|
+
"kind": "js",
|
|
185
|
+
"name": "HelixAccordionItem",
|
|
186
|
+
"declaration": {
|
|
187
|
+
"name": "HelixAccordionItem",
|
|
188
|
+
"module": "src/components/hx-accordion/hx-accordion-item.ts"
|
|
189
|
+
}
|
|
190
|
+
},
|
|
191
|
+
{
|
|
192
|
+
"kind": "custom-element-definition",
|
|
193
|
+
"name": "hx-accordion-item",
|
|
194
|
+
"declaration": {
|
|
195
|
+
"name": "HelixAccordionItem",
|
|
196
|
+
"module": "src/components/hx-accordion/hx-accordion-item.ts"
|
|
197
|
+
}
|
|
198
|
+
}
|
|
199
|
+
]
|
|
200
|
+
},
|
|
201
|
+
{
|
|
202
|
+
"kind": "javascript-module",
|
|
203
|
+
"path": "src/components/hx-accordion/hx-accordion.ts",
|
|
204
|
+
"declarations": [
|
|
205
|
+
{
|
|
206
|
+
"kind": "class",
|
|
207
|
+
"description": "An accordion container that manages collapsible content sections.",
|
|
208
|
+
"name": "HelixAccordion",
|
|
209
|
+
"cssProperties": [
|
|
210
|
+
{
|
|
211
|
+
"description": "Outer border radius.",
|
|
212
|
+
"name": "--hx-accordion-border-radius",
|
|
213
|
+
"default": "var(--hx-border-radius-md)"
|
|
213
214
|
},
|
|
214
215
|
{
|
|
215
|
-
"
|
|
216
|
+
"description": "CSS custom property.",
|
|
217
|
+
"name": "--hx-accordion-font-family",
|
|
218
|
+
"default": "var(--hx-font-family-sans)"
|
|
219
|
+
},
|
|
220
|
+
{
|
|
221
|
+
"description": "Font family.",
|
|
222
|
+
"name": "--hx-font-family-sans"
|
|
223
|
+
},
|
|
224
|
+
{
|
|
225
|
+
"description": "CSS custom property.",
|
|
226
|
+
"name": "--hx-border-radius-md"
|
|
227
|
+
}
|
|
228
|
+
],
|
|
229
|
+
"cssParts": [
|
|
230
|
+
{
|
|
231
|
+
"description": "The outer container wrapping all accordion items.",
|
|
232
|
+
"name": "accordion"
|
|
233
|
+
}
|
|
234
|
+
],
|
|
235
|
+
"slots": [
|
|
236
|
+
{
|
|
237
|
+
"description": "Default slot for hx-accordion-item elements.",
|
|
238
|
+
"name": ""
|
|
239
|
+
}
|
|
240
|
+
],
|
|
241
|
+
"members": [
|
|
242
|
+
{
|
|
243
|
+
"kind": "field",
|
|
244
|
+
"name": "mode",
|
|
216
245
|
"type": {
|
|
217
|
-
"text": "
|
|
246
|
+
"text": "'single' | 'multi'"
|
|
218
247
|
},
|
|
219
|
-
"default": "''",
|
|
220
|
-
"description": "
|
|
221
|
-
"
|
|
222
|
-
"
|
|
248
|
+
"default": "'single'",
|
|
249
|
+
"description": "Expansion mode: 'single' collapses all other items when one expands.\n'multi' allows multiple items open simultaneously.",
|
|
250
|
+
"attribute": "mode",
|
|
251
|
+
"reflects": true
|
|
252
|
+
}
|
|
253
|
+
],
|
|
254
|
+
"attributes": [
|
|
255
|
+
{
|
|
256
|
+
"name": "mode",
|
|
257
|
+
"type": {
|
|
258
|
+
"text": "'single' | 'multi'"
|
|
259
|
+
},
|
|
260
|
+
"default": "'single'",
|
|
261
|
+
"description": "Expansion mode: 'single' collapses all other items when one expands.\n'multi' allows multiple items open simultaneously.",
|
|
262
|
+
"fieldName": "mode",
|
|
263
|
+
"attribute": "mode"
|
|
223
264
|
}
|
|
224
265
|
],
|
|
225
266
|
"superclass": {
|
|
226
267
|
"name": "HelixElement",
|
|
227
268
|
"module": "/src/base/index.js"
|
|
228
269
|
},
|
|
229
|
-
"tagName": "hx-
|
|
270
|
+
"tagName": "hx-accordion",
|
|
230
271
|
"customElement": true,
|
|
231
|
-
"summary": "
|
|
272
|
+
"summary": "Collapsible content sections with single or multi-expand modes."
|
|
232
273
|
}
|
|
233
274
|
],
|
|
234
275
|
"exports": [
|
|
235
276
|
{
|
|
236
277
|
"kind": "js",
|
|
237
|
-
"name": "
|
|
278
|
+
"name": "HelixAccordion",
|
|
238
279
|
"declaration": {
|
|
239
|
-
"name": "
|
|
240
|
-
"module": "src/components/hx-
|
|
280
|
+
"name": "HelixAccordion",
|
|
281
|
+
"module": "src/components/hx-accordion/hx-accordion.ts"
|
|
241
282
|
}
|
|
242
283
|
},
|
|
243
284
|
{
|
|
244
285
|
"kind": "custom-element-definition",
|
|
245
|
-
"name": "hx-
|
|
286
|
+
"name": "hx-accordion",
|
|
246
287
|
"declaration": {
|
|
247
|
-
"name": "
|
|
248
|
-
"module": "src/components/hx-
|
|
288
|
+
"name": "HelixAccordion",
|
|
289
|
+
"module": "src/components/hx-accordion/hx-accordion.ts"
|
|
249
290
|
}
|
|
250
291
|
}
|
|
251
292
|
]
|
|
252
293
|
},
|
|
253
294
|
{
|
|
254
295
|
"kind": "javascript-module",
|
|
255
|
-
"path": "src/components/hx-
|
|
296
|
+
"path": "src/components/hx-accordion/index.ts",
|
|
256
297
|
"declarations": [],
|
|
257
298
|
"exports": [
|
|
258
299
|
{
|
|
259
300
|
"kind": "js",
|
|
260
|
-
"name": "
|
|
301
|
+
"name": "HelixAccordion",
|
|
261
302
|
"declaration": {
|
|
262
|
-
"name": "
|
|
263
|
-
"module": "./hx-
|
|
303
|
+
"name": "HelixAccordion",
|
|
304
|
+
"module": "./hx-accordion.js"
|
|
305
|
+
}
|
|
306
|
+
},
|
|
307
|
+
{
|
|
308
|
+
"kind": "js",
|
|
309
|
+
"name": "HelixAccordionItem",
|
|
310
|
+
"declaration": {
|
|
311
|
+
"name": "HelixAccordionItem",
|
|
312
|
+
"module": "./hx-accordion-item.js"
|
|
313
|
+
}
|
|
314
|
+
},
|
|
315
|
+
{
|
|
316
|
+
"kind": "js",
|
|
317
|
+
"name": "HxAccordionToggleDetail",
|
|
318
|
+
"declaration": {
|
|
319
|
+
"name": "HxAccordionToggleDetail",
|
|
320
|
+
"module": "./hx-accordion-item.js"
|
|
264
321
|
}
|
|
265
322
|
}
|
|
266
323
|
]
|
|
267
324
|
},
|
|
268
325
|
{
|
|
269
326
|
"kind": "javascript-module",
|
|
270
|
-
"path": "src/components/hx-
|
|
327
|
+
"path": "src/components/hx-action-bar/hx-action-bar.ts",
|
|
271
328
|
"declarations": [
|
|
272
329
|
{
|
|
273
330
|
"kind": "class",
|
|
274
|
-
"description": "
|
|
275
|
-
"name": "
|
|
331
|
+
"description": "A horizontal toolbar container for grouping related action buttons and controls.\nImplements the ARIA toolbar pattern with roving tabindex keyboard navigation.",
|
|
332
|
+
"name": "HelixActionBar",
|
|
276
333
|
"cssProperties": [
|
|
277
334
|
{
|
|
278
|
-
"description": "
|
|
279
|
-
"name": "--hx-
|
|
280
|
-
"default": "
|
|
335
|
+
"description": "Bar background color (default variant).",
|
|
336
|
+
"name": "--hx-action-bar-bg",
|
|
337
|
+
"default": "transparent"
|
|
281
338
|
},
|
|
282
339
|
{
|
|
283
|
-
"description": "
|
|
284
|
-
"name": "--hx-
|
|
285
|
-
"default": "
|
|
340
|
+
"description": "Bar border (default variant).",
|
|
341
|
+
"name": "--hx-action-bar-border",
|
|
342
|
+
"default": "none"
|
|
286
343
|
},
|
|
287
344
|
{
|
|
288
|
-
"description": "
|
|
289
|
-
"name": "--hx-
|
|
290
|
-
"default": "var(--hx-
|
|
345
|
+
"description": "Inner padding.",
|
|
346
|
+
"name": "--hx-action-bar-padding",
|
|
347
|
+
"default": "var(--hx-space-2,0.5rem) var(--hx-space-3,0.75rem)"
|
|
291
348
|
},
|
|
292
349
|
{
|
|
293
|
-
"description": "
|
|
294
|
-
"name": "--hx-
|
|
295
|
-
"default": "
|
|
350
|
+
"description": "Gap between slotted items.",
|
|
351
|
+
"name": "--hx-action-bar-gap",
|
|
352
|
+
"default": "var(--hx-space-2,0.5rem)"
|
|
296
353
|
},
|
|
297
354
|
{
|
|
298
|
-
"description": "
|
|
299
|
-
"name": "--hx-
|
|
300
|
-
"default": "
|
|
355
|
+
"description": "Z-index when sticky or bottom position.",
|
|
356
|
+
"name": "--hx-action-bar-z-index",
|
|
357
|
+
"default": "10"
|
|
301
358
|
},
|
|
302
359
|
{
|
|
303
|
-
"description": "
|
|
304
|
-
"name": "--hx-
|
|
305
|
-
"default": "
|
|
360
|
+
"description": "Padding.",
|
|
361
|
+
"name": "--hx-action-bar-padding-block-start",
|
|
362
|
+
"default": "0px"
|
|
306
363
|
},
|
|
307
364
|
{
|
|
308
|
-
"description": "
|
|
309
|
-
"name": "--hx-
|
|
310
|
-
"default": "
|
|
365
|
+
"description": "Padding.",
|
|
366
|
+
"name": "--hx-action-bar-padding-block-end",
|
|
367
|
+
"default": "0px"
|
|
311
368
|
},
|
|
312
369
|
{
|
|
313
|
-
"description": "
|
|
314
|
-
"name": "--hx-
|
|
315
|
-
|
|
370
|
+
"description": "CSS custom property.",
|
|
371
|
+
"name": "--hx-border-radius-md"
|
|
372
|
+
},
|
|
373
|
+
{
|
|
374
|
+
"description": "Width.",
|
|
375
|
+
"name": "--hx-border-width-thin"
|
|
376
|
+
},
|
|
377
|
+
{
|
|
378
|
+
"description": "Color.",
|
|
379
|
+
"name": "--hx-color-neutral-0"
|
|
380
|
+
},
|
|
381
|
+
{
|
|
382
|
+
"description": "Color.",
|
|
383
|
+
"name": "--hx-color-neutral-200"
|
|
384
|
+
},
|
|
385
|
+
{
|
|
386
|
+
"description": "Color.",
|
|
387
|
+
"name": "--hx-color-neutral-50"
|
|
388
|
+
},
|
|
389
|
+
{
|
|
390
|
+
"description": "Size token.",
|
|
391
|
+
"name": "--hx-size-8"
|
|
392
|
+
},
|
|
393
|
+
{
|
|
394
|
+
"description": "Size token.",
|
|
395
|
+
"name": "--hx-size-10"
|
|
396
|
+
},
|
|
397
|
+
{
|
|
398
|
+
"description": "Size token.",
|
|
399
|
+
"name": "--hx-size-12"
|
|
400
|
+
},
|
|
401
|
+
{
|
|
402
|
+
"description": "Spacing token.",
|
|
403
|
+
"name": "--hx-space-1"
|
|
404
|
+
},
|
|
405
|
+
{
|
|
406
|
+
"description": "Spacing token.",
|
|
407
|
+
"name": "--hx-space-2"
|
|
408
|
+
},
|
|
409
|
+
{
|
|
410
|
+
"description": "Spacing token.",
|
|
411
|
+
"name": "--hx-space-3"
|
|
412
|
+
},
|
|
413
|
+
{
|
|
414
|
+
"description": "Spacing token.",
|
|
415
|
+
"name": "--hx-space-4"
|
|
316
416
|
}
|
|
317
417
|
],
|
|
318
418
|
"cssParts": [
|
|
319
419
|
{
|
|
320
|
-
"description": "The
|
|
321
|
-
"name": "
|
|
420
|
+
"description": "The root toolbar container element.",
|
|
421
|
+
"name": "base"
|
|
322
422
|
},
|
|
323
423
|
{
|
|
324
|
-
"description": "The
|
|
325
|
-
"name": "
|
|
424
|
+
"description": "The start (left) slot wrapper.",
|
|
425
|
+
"name": "start"
|
|
326
426
|
},
|
|
327
427
|
{
|
|
328
|
-
"description": "The
|
|
329
|
-
"name": "
|
|
428
|
+
"description": "The center (default) slot wrapper.",
|
|
429
|
+
"name": "center"
|
|
430
|
+
},
|
|
431
|
+
{
|
|
432
|
+
"description": "The end (right) slot wrapper.",
|
|
433
|
+
"name": "end"
|
|
330
434
|
},
|
|
331
435
|
{
|
|
332
|
-
"description": "The
|
|
333
|
-
"name": "
|
|
436
|
+
"description": "The overflow slot wrapper (hidden when no overflow content).",
|
|
437
|
+
"name": "overflow"
|
|
334
438
|
}
|
|
335
439
|
],
|
|
336
440
|
"slots": [
|
|
337
441
|
{
|
|
338
|
-
"description": "
|
|
339
|
-
"name": "
|
|
442
|
+
"description": "Left-aligned actions.",
|
|
443
|
+
"name": "start"
|
|
340
444
|
},
|
|
341
445
|
{
|
|
342
|
-
"description": "
|
|
446
|
+
"description": "Center content (default slot).",
|
|
343
447
|
"name": ""
|
|
448
|
+
},
|
|
449
|
+
{
|
|
450
|
+
"description": "Right-aligned actions.",
|
|
451
|
+
"name": "end"
|
|
452
|
+
},
|
|
453
|
+
{
|
|
454
|
+
"description": "Actions revealed when the bar is constrained for space.",
|
|
455
|
+
"name": "overflow"
|
|
344
456
|
}
|
|
345
457
|
],
|
|
346
458
|
"members": [
|
|
347
459
|
{
|
|
348
460
|
"kind": "field",
|
|
349
|
-
"name": "
|
|
461
|
+
"name": "size",
|
|
350
462
|
"type": {
|
|
351
|
-
"text": "
|
|
463
|
+
"text": "'sm' | 'md' | 'lg'"
|
|
352
464
|
},
|
|
353
|
-
"default": "
|
|
354
|
-
"description": "
|
|
355
|
-
"attribute": "
|
|
465
|
+
"default": "'md'",
|
|
466
|
+
"description": "Size of the action bar — propagated as a data attribute to slotted children.",
|
|
467
|
+
"attribute": "hx-size",
|
|
356
468
|
"reflects": true
|
|
357
469
|
},
|
|
358
470
|
{
|
|
359
471
|
"kind": "field",
|
|
360
|
-
"name": "
|
|
472
|
+
"name": "variant",
|
|
361
473
|
"type": {
|
|
362
|
-
"text": "
|
|
474
|
+
"text": "'default' | 'outlined' | 'filled'"
|
|
363
475
|
},
|
|
364
|
-
"default": "
|
|
365
|
-
"description": "
|
|
366
|
-
"attribute": "
|
|
476
|
+
"default": "'default'",
|
|
477
|
+
"description": "Visual variant controlling the bar background.",
|
|
478
|
+
"attribute": "variant",
|
|
367
479
|
"reflects": true
|
|
368
480
|
},
|
|
369
481
|
{
|
|
370
482
|
"kind": "field",
|
|
371
|
-
"name": "
|
|
372
|
-
"type": {
|
|
373
|
-
"text": "1 | 2 | 3 | 4 | 5 | 6"
|
|
374
|
-
},
|
|
375
|
-
"default": "3",
|
|
376
|
-
"description": "Heading level (1–6) applied via `role=\"heading\" aria-level` on the summary\ntrigger. Defaults to 3. Set to match the document outline around the\naccordion so screen readers surface accordion items in the heading list.",
|
|
377
|
-
"attribute": "level"
|
|
378
|
-
}
|
|
379
|
-
],
|
|
380
|
-
"events": [
|
|
381
|
-
{
|
|
382
|
-
"name": "hx-expand",
|
|
483
|
+
"name": "position",
|
|
383
484
|
"type": {
|
|
384
|
-
"text": "
|
|
485
|
+
"text": "'top' | 'bottom' | 'sticky'"
|
|
385
486
|
},
|
|
386
|
-
"
|
|
487
|
+
"default": "'top'",
|
|
488
|
+
"description": "Position and sticky behavior of the action bar.\n- `top` — normal flow (default)\n- `sticky` — sticks to the top of the scroll container; add `scroll-padding-top` to the\n scroll container equal to the bar height to prevent anchor targets from scrolling behind it\n- `bottom` — sticks to the bottom of the scroll container with iOS safe-area-inset support",
|
|
489
|
+
"attribute": "position",
|
|
490
|
+
"reflects": true
|
|
387
491
|
},
|
|
388
492
|
{
|
|
389
|
-
"
|
|
493
|
+
"kind": "field",
|
|
494
|
+
"name": "accessibleLabel",
|
|
390
495
|
"type": {
|
|
391
|
-
"text": "
|
|
496
|
+
"text": "string"
|
|
392
497
|
},
|
|
393
|
-
"
|
|
498
|
+
"default": "''",
|
|
499
|
+
"description": "Accessible label for the toolbar.\nRequired when multiple toolbars appear on the same page.\n\nAccepts both `accessible-label` and the standard `aria-label` HTML attribute.\nThe `accessible-label` attribute takes precedence when both are set.\n\nPreviously this was exposed as the `ariaLabel` JS property, which shadowed\nthe native `HTMLElement.ariaLabel`. That shadowing is removed; use\n`accessibleLabel` or the HTML attributes instead.",
|
|
500
|
+
"attribute": "accessible-label"
|
|
394
501
|
}
|
|
395
502
|
],
|
|
396
503
|
"attributes": [
|
|
397
504
|
{
|
|
398
|
-
"name": "
|
|
505
|
+
"name": "hx-size",
|
|
399
506
|
"type": {
|
|
400
|
-
"text": "
|
|
507
|
+
"text": "'sm' | 'md' | 'lg'"
|
|
401
508
|
},
|
|
402
|
-
"default": "
|
|
403
|
-
"description": "
|
|
404
|
-
"fieldName": "
|
|
405
|
-
"attribute": "
|
|
509
|
+
"default": "'md'",
|
|
510
|
+
"description": "Size of the action bar — propagated as a data attribute to slotted children.",
|
|
511
|
+
"fieldName": "size",
|
|
512
|
+
"attribute": "hx-size"
|
|
406
513
|
},
|
|
407
514
|
{
|
|
408
|
-
"name": "
|
|
515
|
+
"name": "variant",
|
|
409
516
|
"type": {
|
|
410
|
-
"text": "
|
|
517
|
+
"text": "'default' | 'outlined' | 'filled'"
|
|
411
518
|
},
|
|
412
|
-
"default": "
|
|
413
|
-
"description": "
|
|
414
|
-
"fieldName": "
|
|
415
|
-
"attribute": "
|
|
519
|
+
"default": "'default'",
|
|
520
|
+
"description": "Visual variant controlling the bar background.",
|
|
521
|
+
"fieldName": "variant",
|
|
522
|
+
"attribute": "variant"
|
|
416
523
|
},
|
|
417
524
|
{
|
|
418
|
-
"name": "
|
|
525
|
+
"name": "position",
|
|
419
526
|
"type": {
|
|
420
|
-
"text": "
|
|
527
|
+
"text": "'top' | 'bottom' | 'sticky'"
|
|
421
528
|
},
|
|
422
|
-
"default": "
|
|
423
|
-
"description": "
|
|
424
|
-
"fieldName": "
|
|
425
|
-
"attribute": "
|
|
426
|
-
}
|
|
427
|
-
],
|
|
428
|
-
"superclass": {
|
|
429
|
-
"name": "HelixElement",
|
|
430
|
-
"module": "/src/base/index.js"
|
|
431
|
-
},
|
|
432
|
-
"tagName": "hx-accordion-item",
|
|
433
|
-
"customElement": true,
|
|
434
|
-
"summary": "Collapsible panel that can be expanded or collapsed."
|
|
435
|
-
},
|
|
436
|
-
{
|
|
437
|
-
"kind": "variable",
|
|
438
|
-
"name": "detail",
|
|
439
|
-
"type": {
|
|
440
|
-
"text": "object"
|
|
441
|
-
},
|
|
442
|
-
"default": "{ expanded, itemId: this.id || '' }"
|
|
443
|
-
}
|
|
444
|
-
],
|
|
445
|
-
"exports": [
|
|
446
|
-
{
|
|
447
|
-
"kind": "js",
|
|
448
|
-
"name": "HelixAccordionItem",
|
|
449
|
-
"declaration": {
|
|
450
|
-
"name": "HelixAccordionItem",
|
|
451
|
-
"module": "src/components/hx-accordion/hx-accordion-item.ts"
|
|
452
|
-
}
|
|
453
|
-
},
|
|
454
|
-
{
|
|
455
|
-
"kind": "custom-element-definition",
|
|
456
|
-
"name": "hx-accordion-item",
|
|
457
|
-
"declaration": {
|
|
458
|
-
"name": "HelixAccordionItem",
|
|
459
|
-
"module": "src/components/hx-accordion/hx-accordion-item.ts"
|
|
460
|
-
}
|
|
461
|
-
}
|
|
462
|
-
]
|
|
463
|
-
},
|
|
464
|
-
{
|
|
465
|
-
"kind": "javascript-module",
|
|
466
|
-
"path": "src/components/hx-accordion/hx-accordion.ts",
|
|
467
|
-
"declarations": [
|
|
468
|
-
{
|
|
469
|
-
"kind": "class",
|
|
470
|
-
"description": "An accordion container that manages collapsible content sections.",
|
|
471
|
-
"name": "HelixAccordion",
|
|
472
|
-
"cssProperties": [
|
|
473
|
-
{
|
|
474
|
-
"description": "Outer border radius.",
|
|
475
|
-
"name": "--hx-accordion-border-radius",
|
|
476
|
-
"default": "var(--hx-border-radius-md)"
|
|
477
|
-
},
|
|
478
|
-
{
|
|
479
|
-
"description": "CSS custom property.",
|
|
480
|
-
"name": "--hx-accordion-font-family",
|
|
481
|
-
"default": "var(--hx-font-family-sans)"
|
|
482
|
-
},
|
|
483
|
-
{
|
|
484
|
-
"description": "Font family.",
|
|
485
|
-
"name": "--hx-font-family-sans"
|
|
529
|
+
"default": "'top'",
|
|
530
|
+
"description": "Position and sticky behavior of the action bar.\n- `top` — normal flow (default)\n- `sticky` — sticks to the top of the scroll container; add `scroll-padding-top` to the\n scroll container equal to the bar height to prevent anchor targets from scrolling behind it\n- `bottom` — sticks to the bottom of the scroll container with iOS safe-area-inset support",
|
|
531
|
+
"fieldName": "position",
|
|
532
|
+
"attribute": "position"
|
|
486
533
|
},
|
|
487
534
|
{
|
|
488
|
-
"
|
|
489
|
-
"name": "--hx-border-radius-md"
|
|
490
|
-
}
|
|
491
|
-
],
|
|
492
|
-
"cssParts": [
|
|
493
|
-
{
|
|
494
|
-
"description": "The outer container wrapping all accordion items.",
|
|
495
|
-
"name": "accordion"
|
|
496
|
-
}
|
|
497
|
-
],
|
|
498
|
-
"slots": [
|
|
499
|
-
{
|
|
500
|
-
"description": "Default slot for hx-accordion-item elements.",
|
|
501
|
-
"name": ""
|
|
502
|
-
}
|
|
503
|
-
],
|
|
504
|
-
"members": [
|
|
505
|
-
{
|
|
506
|
-
"kind": "field",
|
|
507
|
-
"name": "mode",
|
|
508
|
-
"type": {
|
|
509
|
-
"text": "'single' | 'multi'"
|
|
510
|
-
},
|
|
511
|
-
"default": "'single'",
|
|
512
|
-
"description": "Expansion mode: 'single' collapses all other items when one expands.\n'multi' allows multiple items open simultaneously.",
|
|
513
|
-
"attribute": "mode",
|
|
514
|
-
"reflects": true
|
|
515
|
-
}
|
|
516
|
-
],
|
|
517
|
-
"attributes": [
|
|
518
|
-
{
|
|
519
|
-
"name": "mode",
|
|
535
|
+
"name": "accessible-label",
|
|
520
536
|
"type": {
|
|
521
|
-
"text": "
|
|
537
|
+
"text": "string"
|
|
522
538
|
},
|
|
523
|
-
"default": "'
|
|
524
|
-
"description": "
|
|
525
|
-
"fieldName": "
|
|
526
|
-
"attribute": "
|
|
539
|
+
"default": "''",
|
|
540
|
+
"description": "Accessible label for the toolbar.\nRequired when multiple toolbars appear on the same page.\n\nAccepts both `accessible-label` and the standard `aria-label` HTML attribute.\nThe `accessible-label` attribute takes precedence when both are set.\n\nPreviously this was exposed as the `ariaLabel` JS property, which shadowed\nthe native `HTMLElement.ariaLabel`. That shadowing is removed; use\n`accessibleLabel` or the HTML attributes instead.",
|
|
541
|
+
"fieldName": "accessibleLabel",
|
|
542
|
+
"attribute": "accessible-label"
|
|
527
543
|
}
|
|
528
544
|
],
|
|
529
545
|
"superclass": {
|
|
530
546
|
"name": "HelixElement",
|
|
531
547
|
"module": "/src/base/index.js"
|
|
532
548
|
},
|
|
533
|
-
"tagName": "hx-
|
|
549
|
+
"tagName": "hx-action-bar",
|
|
534
550
|
"customElement": true,
|
|
535
|
-
"summary": "
|
|
551
|
+
"summary": "Horizontal action bar for grouping related controls."
|
|
536
552
|
}
|
|
537
553
|
],
|
|
538
554
|
"exports": [
|
|
539
555
|
{
|
|
540
556
|
"kind": "js",
|
|
541
|
-
"name": "
|
|
557
|
+
"name": "HelixActionBar",
|
|
542
558
|
"declaration": {
|
|
543
|
-
"name": "
|
|
544
|
-
"module": "src/components/hx-
|
|
559
|
+
"name": "HelixActionBar",
|
|
560
|
+
"module": "src/components/hx-action-bar/hx-action-bar.ts"
|
|
545
561
|
}
|
|
546
562
|
},
|
|
547
563
|
{
|
|
548
564
|
"kind": "custom-element-definition",
|
|
549
|
-
"name": "hx-
|
|
565
|
+
"name": "hx-action-bar",
|
|
550
566
|
"declaration": {
|
|
551
|
-
"name": "
|
|
552
|
-
"module": "src/components/hx-
|
|
567
|
+
"name": "HelixActionBar",
|
|
568
|
+
"module": "src/components/hx-action-bar/hx-action-bar.ts"
|
|
553
569
|
}
|
|
554
570
|
}
|
|
555
571
|
]
|
|
556
572
|
},
|
|
557
573
|
{
|
|
558
574
|
"kind": "javascript-module",
|
|
559
|
-
"path": "src/components/hx-
|
|
575
|
+
"path": "src/components/hx-action-bar/index.ts",
|
|
560
576
|
"declarations": [],
|
|
561
577
|
"exports": [
|
|
562
578
|
{
|
|
563
579
|
"kind": "js",
|
|
564
|
-
"name": "
|
|
565
|
-
"declaration": {
|
|
566
|
-
"name": "HelixAccordion",
|
|
567
|
-
"module": "./hx-accordion.js"
|
|
568
|
-
}
|
|
569
|
-
},
|
|
570
|
-
{
|
|
571
|
-
"kind": "js",
|
|
572
|
-
"name": "HelixAccordionItem",
|
|
573
|
-
"declaration": {
|
|
574
|
-
"name": "HelixAccordionItem",
|
|
575
|
-
"module": "./hx-accordion-item.js"
|
|
576
|
-
}
|
|
577
|
-
},
|
|
578
|
-
{
|
|
579
|
-
"kind": "js",
|
|
580
|
-
"name": "HxAccordionToggleDetail",
|
|
580
|
+
"name": "HelixActionBar",
|
|
581
581
|
"declaration": {
|
|
582
|
-
"name": "
|
|
583
|
-
"module": "./hx-
|
|
582
|
+
"name": "HelixActionBar",
|
|
583
|
+
"module": "./hx-action-bar.js"
|
|
584
584
|
}
|
|
585
585
|
}
|
|
586
586
|
]
|
|
@@ -29777,17 +29777,17 @@
|
|
|
29777
29777
|
{
|
|
29778
29778
|
"description": "Input background color.",
|
|
29779
29779
|
"name": "--hx-input-bg",
|
|
29780
|
-
"default": "var(--hx-color-
|
|
29780
|
+
"default": "var(--hx-color-surface-default)"
|
|
29781
29781
|
},
|
|
29782
29782
|
{
|
|
29783
29783
|
"description": "Input text color.",
|
|
29784
29784
|
"name": "--hx-input-color",
|
|
29785
|
-
"default": "var(--hx-color-
|
|
29785
|
+
"default": "var(--hx-color-text-strong)"
|
|
29786
29786
|
},
|
|
29787
29787
|
{
|
|
29788
29788
|
"description": "Input border color.",
|
|
29789
29789
|
"name": "--hx-input-border-color",
|
|
29790
|
-
"default": "var(--hx-color-
|
|
29790
|
+
"default": "var(--hx-color-border-strong)"
|
|
29791
29791
|
},
|
|
29792
29792
|
{
|
|
29793
29793
|
"description": "Input border radius.",
|
|
@@ -29807,12 +29807,12 @@
|
|
|
29807
29807
|
{
|
|
29808
29808
|
"description": "Error state color.",
|
|
29809
29809
|
"name": "--hx-input-error-color",
|
|
29810
|
-
"default": "var(--hx-color-error-
|
|
29810
|
+
"default": "var(--hx-color-error-text)"
|
|
29811
29811
|
},
|
|
29812
29812
|
{
|
|
29813
29813
|
"description": "Label text color.",
|
|
29814
29814
|
"name": "--hx-input-label-color",
|
|
29815
|
-
"default": "var(--hx-color-
|
|
29815
|
+
"default": "var(--hx-color-text-strong)"
|
|
29816
29816
|
},
|
|
29817
29817
|
{
|
|
29818
29818
|
"description": "Font size for the sm size variant.",
|