@kubex/zinc 1.1.119 → 1.1.120
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/dist/custom-elements.json +2177 -2060
- package/dist/vscode.html-custom-data.json +182 -182
- package/dist/web-types.json +441 -441
- package/dist/zn.d.ts +33 -14
- package/dist/zn.min.js +1 -1
- package/docs/pages/components/form-group.md +1 -1
- package/package.json +1 -1
- package/src/components/form-group/form-group.component.ts +160 -50
- package/src/components/form-group/form-group.test.ts +11 -11
- package/src/declaration.d.ts +22 -0
package/dist/web-types.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
|
|
3
3
|
"name": "@kubex/zinc",
|
|
4
|
-
"version": "1.1.
|
|
4
|
+
"version": "1.1.120",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -15,28 +15,6 @@
|
|
|
15
15
|
"events": [],
|
|
16
16
|
"js": { "properties": [], "events": [] }
|
|
17
17
|
},
|
|
18
|
-
{
|
|
19
|
-
"name": "zn-action-bar",
|
|
20
|
-
"description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
|
|
21
|
-
"doc-url": "",
|
|
22
|
-
"attributes": [],
|
|
23
|
-
"slots": [
|
|
24
|
-
{ "name": "", "description": "The default slot." },
|
|
25
|
-
{ "name": "example", "description": "An example slot." }
|
|
26
|
-
],
|
|
27
|
-
"events": [
|
|
28
|
-
{ "name": "zn-event-name", "description": "Emitted as an example." }
|
|
29
|
-
],
|
|
30
|
-
"js": {
|
|
31
|
-
"properties": [],
|
|
32
|
-
"events": [
|
|
33
|
-
{
|
|
34
|
-
"name": "zn-event-name",
|
|
35
|
-
"description": "Emitted as an example."
|
|
36
|
-
}
|
|
37
|
-
]
|
|
38
|
-
}
|
|
39
|
-
},
|
|
40
18
|
{
|
|
41
19
|
"name": "zn-alert",
|
|
42
20
|
"description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
|
|
@@ -105,6 +83,28 @@
|
|
|
105
83
|
]
|
|
106
84
|
}
|
|
107
85
|
},
|
|
86
|
+
{
|
|
87
|
+
"name": "zn-action-bar",
|
|
88
|
+
"description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
|
|
89
|
+
"doc-url": "",
|
|
90
|
+
"attributes": [],
|
|
91
|
+
"slots": [
|
|
92
|
+
{ "name": "", "description": "The default slot." },
|
|
93
|
+
{ "name": "example", "description": "An example slot." }
|
|
94
|
+
],
|
|
95
|
+
"events": [
|
|
96
|
+
{ "name": "zn-event-name", "description": "Emitted as an example." }
|
|
97
|
+
],
|
|
98
|
+
"js": {
|
|
99
|
+
"properties": [],
|
|
100
|
+
"events": [
|
|
101
|
+
{
|
|
102
|
+
"name": "zn-event-name",
|
|
103
|
+
"description": "Emitted as an example."
|
|
104
|
+
}
|
|
105
|
+
]
|
|
106
|
+
}
|
|
107
|
+
},
|
|
108
108
|
{
|
|
109
109
|
"name": "zn-animated-button",
|
|
110
110
|
"description": "\n---\n\n\n### **Methods:**\n - **purchase(): _void_** - Programmatically trigger the purchase flow\n- **setSuccess(): _void_** - Set the button to success state manually\n- **setFailure(message): _void_** - Set the button to failure state manually with optional error message\n- **reset(): _void_** - Reset the button to idle state",
|
|
@@ -250,44 +250,6 @@
|
|
|
250
250
|
"events": []
|
|
251
251
|
}
|
|
252
252
|
},
|
|
253
|
-
{
|
|
254
|
-
"name": "zn-bulk-actions",
|
|
255
|
-
"description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
|
|
256
|
-
"doc-url": "",
|
|
257
|
-
"attributes": [
|
|
258
|
-
{ "name": "name", "value": { "type": "string" } },
|
|
259
|
-
{ "name": "value", "value": { "type": "PropertyKey" } },
|
|
260
|
-
{
|
|
261
|
-
"name": "actions",
|
|
262
|
-
"value": { "type": "BulkActionData", "default": "[]" }
|
|
263
|
-
}
|
|
264
|
-
],
|
|
265
|
-
"slots": [
|
|
266
|
-
{ "name": "", "description": "The default slot." },
|
|
267
|
-
{ "name": "example", "description": "An example slot." }
|
|
268
|
-
],
|
|
269
|
-
"events": [
|
|
270
|
-
{ "name": "zn-event-name", "description": "Emitted as an example." }
|
|
271
|
-
],
|
|
272
|
-
"js": {
|
|
273
|
-
"properties": [
|
|
274
|
-
{ "name": "container", "type": "HTMLDivElement" },
|
|
275
|
-
{ "name": "addRule", "type": "ZnSelect" },
|
|
276
|
-
{ "name": "input", "type": "HTMLInputElement" },
|
|
277
|
-
{ "name": "name", "type": "string" },
|
|
278
|
-
{ "name": "value", "type": "PropertyKey" },
|
|
279
|
-
{ "name": "actions", "type": "BulkActionData" },
|
|
280
|
-
{ "name": "validationMessage", "type": "string" },
|
|
281
|
-
{ "name": "validity", "type": "ValidityState" }
|
|
282
|
-
],
|
|
283
|
-
"events": [
|
|
284
|
-
{
|
|
285
|
-
"name": "zn-event-name",
|
|
286
|
-
"description": "Emitted as an example."
|
|
287
|
-
}
|
|
288
|
-
]
|
|
289
|
-
}
|
|
290
|
-
},
|
|
291
253
|
{
|
|
292
254
|
"name": "zn-background",
|
|
293
255
|
"description": "Composes a colour, decorative image, image strength, optional motion and contrast overlay behind slotted content.\n---\n\n\n### **Slots:**\n - _default_ - Content displayed above the background layers.\n\n### **CSS Properties:**\n - **--zn-background-color** - Fallback colour when the `color` attribute is not set. _(default: undefined)_\n- **--zn-background-image-position** - Position of the background image. Defaults to `center`. _(default: undefined)_\n- **--zn-background-overlay-angle** - Direction of the overlay gradient. Defaults to `110deg`. _(default: undefined)_\n- **--zn-background-floating-icon-color** - Colour of the floating icons. Defaults to `currentColor`. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's full-size background canvas.\n- **image** - The decorative background image.\n- **overlay** - The contrast overlay between the image and content.\n- **floating-icons** - The non-interactive layer containing the floating icons.\n- **floating-icon** - Each floating `zn-icon`.\n- **content** - The wrapper around the default slot.",
|
|
@@ -391,46 +353,34 @@
|
|
|
391
353
|
}
|
|
392
354
|
},
|
|
393
355
|
{
|
|
394
|
-
"name": "zn-
|
|
395
|
-
"description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n\n### **CSS Properties:**\n - **--
|
|
356
|
+
"name": "zn-bulk-actions",
|
|
357
|
+
"description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
|
|
396
358
|
"doc-url": "",
|
|
397
359
|
"attributes": [
|
|
360
|
+
{ "name": "name", "value": { "type": "string" } },
|
|
361
|
+
{ "name": "value", "value": { "type": "PropertyKey" } },
|
|
398
362
|
{
|
|
399
|
-
"name": "
|
|
400
|
-
"value": {
|
|
401
|
-
"type": "'horizontal' | 'vertical'",
|
|
402
|
-
"default": "'horizontal'"
|
|
403
|
-
}
|
|
404
|
-
},
|
|
405
|
-
{
|
|
406
|
-
"name": "grow",
|
|
407
|
-
"value": { "type": "boolean", "default": "false" }
|
|
408
|
-
},
|
|
409
|
-
{
|
|
410
|
-
"name": "wrap",
|
|
411
|
-
"value": { "type": "boolean", "default": "false" }
|
|
412
|
-
},
|
|
413
|
-
{
|
|
414
|
-
"name": "start",
|
|
415
|
-
"value": { "type": "boolean", "default": "false" }
|
|
416
|
-
},
|
|
417
|
-
{
|
|
418
|
-
"name": "gap",
|
|
419
|
-
"value": { "type": "boolean", "default": "false" }
|
|
363
|
+
"name": "actions",
|
|
364
|
+
"value": { "type": "BulkActionData", "default": "[]" }
|
|
420
365
|
}
|
|
421
366
|
],
|
|
422
|
-
"slots": [
|
|
367
|
+
"slots": [
|
|
368
|
+
{ "name": "", "description": "The default slot." },
|
|
369
|
+
{ "name": "example", "description": "An example slot." }
|
|
370
|
+
],
|
|
423
371
|
"events": [
|
|
424
372
|
{ "name": "zn-event-name", "description": "Emitted as an example." }
|
|
425
373
|
],
|
|
426
374
|
"js": {
|
|
427
375
|
"properties": [
|
|
428
|
-
{ "name": "
|
|
429
|
-
{ "name": "
|
|
430
|
-
{ "name": "
|
|
431
|
-
{ "name": "
|
|
432
|
-
{ "name": "
|
|
433
|
-
{ "name": "
|
|
376
|
+
{ "name": "container", "type": "HTMLDivElement" },
|
|
377
|
+
{ "name": "addRule", "type": "ZnSelect" },
|
|
378
|
+
{ "name": "input", "type": "HTMLInputElement" },
|
|
379
|
+
{ "name": "name", "type": "string" },
|
|
380
|
+
{ "name": "value", "type": "PropertyKey" },
|
|
381
|
+
{ "name": "actions", "type": "BulkActionData" },
|
|
382
|
+
{ "name": "validationMessage", "type": "string" },
|
|
383
|
+
{ "name": "validity", "type": "ValidityState" }
|
|
434
384
|
],
|
|
435
385
|
"events": [
|
|
436
386
|
{
|
|
@@ -716,6 +666,56 @@
|
|
|
716
666
|
]
|
|
717
667
|
}
|
|
718
668
|
},
|
|
669
|
+
{
|
|
670
|
+
"name": "zn-button-group",
|
|
671
|
+
"description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n\n### **CSS Properties:**\n - **--grow** - Use flex-grow to fill available space. _(default: undefined)_\n- **--start** - Justify content at the start of the flex space. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
|
|
672
|
+
"doc-url": "",
|
|
673
|
+
"attributes": [
|
|
674
|
+
{
|
|
675
|
+
"name": "direction",
|
|
676
|
+
"value": {
|
|
677
|
+
"type": "'horizontal' | 'vertical'",
|
|
678
|
+
"default": "'horizontal'"
|
|
679
|
+
}
|
|
680
|
+
},
|
|
681
|
+
{
|
|
682
|
+
"name": "grow",
|
|
683
|
+
"value": { "type": "boolean", "default": "false" }
|
|
684
|
+
},
|
|
685
|
+
{
|
|
686
|
+
"name": "wrap",
|
|
687
|
+
"value": { "type": "boolean", "default": "false" }
|
|
688
|
+
},
|
|
689
|
+
{
|
|
690
|
+
"name": "start",
|
|
691
|
+
"value": { "type": "boolean", "default": "false" }
|
|
692
|
+
},
|
|
693
|
+
{
|
|
694
|
+
"name": "gap",
|
|
695
|
+
"value": { "type": "boolean", "default": "false" }
|
|
696
|
+
}
|
|
697
|
+
],
|
|
698
|
+
"slots": [{ "name": "", "description": "The default slot." }],
|
|
699
|
+
"events": [
|
|
700
|
+
{ "name": "zn-event-name", "description": "Emitted as an example." }
|
|
701
|
+
],
|
|
702
|
+
"js": {
|
|
703
|
+
"properties": [
|
|
704
|
+
{ "name": "direction", "type": "'horizontal' | 'vertical'" },
|
|
705
|
+
{ "name": "grow", "type": "boolean" },
|
|
706
|
+
{ "name": "wrap", "type": "boolean" },
|
|
707
|
+
{ "name": "start", "type": "boolean" },
|
|
708
|
+
{ "name": "gap", "type": "boolean" },
|
|
709
|
+
{ "name": "defaultSlot", "type": "HTMLSlotElement" }
|
|
710
|
+
],
|
|
711
|
+
"events": [
|
|
712
|
+
{
|
|
713
|
+
"name": "zn-event-name",
|
|
714
|
+
"description": "Emitted as an example."
|
|
715
|
+
}
|
|
716
|
+
]
|
|
717
|
+
}
|
|
718
|
+
},
|
|
719
719
|
{
|
|
720
720
|
"name": "zn-button-menu",
|
|
721
721
|
"description": "Automatically hides buttons in a menu when the screen is too small.\n---\n\n\n### **Slots:**\n - _default_ - The default slot.",
|
|
@@ -7025,49 +7025,6 @@
|
|
|
7025
7025
|
]
|
|
7026
7026
|
}
|
|
7027
7027
|
},
|
|
7028
|
-
{
|
|
7029
|
-
"name": "zn-pagination",
|
|
7030
|
-
"description": "Pagination component for navigating through pages of content.\n---\n",
|
|
7031
|
-
"doc-url": "",
|
|
7032
|
-
"attributes": [
|
|
7033
|
-
{ "name": "limit", "value": { "type": "number", "default": "10" } },
|
|
7034
|
-
{ "name": "total", "value": { "type": "number", "default": "0" } },
|
|
7035
|
-
{ "name": "page", "value": { "type": "number", "default": "1" } },
|
|
7036
|
-
{ "name": "uri", "value": { "type": "string", "default": "\"\"" } }
|
|
7037
|
-
],
|
|
7038
|
-
"events": [],
|
|
7039
|
-
"js": {
|
|
7040
|
-
"properties": [
|
|
7041
|
-
{ "name": "limit", "type": "number" },
|
|
7042
|
-
{ "name": "total", "type": "number" },
|
|
7043
|
-
{ "name": "page", "type": "number" },
|
|
7044
|
-
{ "name": "uri", "type": "string" }
|
|
7045
|
-
],
|
|
7046
|
-
"events": []
|
|
7047
|
-
}
|
|
7048
|
-
},
|
|
7049
|
-
{
|
|
7050
|
-
"name": "zn-pane",
|
|
7051
|
-
"description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
|
|
7052
|
-
"doc-url": "",
|
|
7053
|
-
"attributes": [{ "name": "flush", "value": { "type": "boolean" } }],
|
|
7054
|
-
"slots": [
|
|
7055
|
-
{ "name": "", "description": "The default slot." },
|
|
7056
|
-
{ "name": "example", "description": "An example slot." }
|
|
7057
|
-
],
|
|
7058
|
-
"events": [
|
|
7059
|
-
{ "name": "zn-event-name", "description": "Emitted as an example." }
|
|
7060
|
-
],
|
|
7061
|
-
"js": {
|
|
7062
|
-
"properties": [{ "name": "flush", "type": "boolean" }],
|
|
7063
|
-
"events": [
|
|
7064
|
-
{
|
|
7065
|
-
"name": "zn-event-name",
|
|
7066
|
-
"description": "Emitted as an example."
|
|
7067
|
-
}
|
|
7068
|
-
]
|
|
7069
|
-
}
|
|
7070
|
-
},
|
|
7071
7028
|
{
|
|
7072
7029
|
"name": "zn-page-nav",
|
|
7073
7030
|
"description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Methods:**\n \n\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
|
|
@@ -7176,39 +7133,82 @@
|
|
|
7176
7133
|
}
|
|
7177
7134
|
},
|
|
7178
7135
|
{
|
|
7179
|
-
"name": "zn-
|
|
7180
|
-
"description": "
|
|
7136
|
+
"name": "zn-pagination",
|
|
7137
|
+
"description": "Pagination component for navigating through pages of content.\n---\n",
|
|
7181
7138
|
"doc-url": "",
|
|
7182
7139
|
"attributes": [
|
|
7183
|
-
{ "name": "
|
|
7184
|
-
{ "name": "
|
|
7185
|
-
{ "name": "
|
|
7186
|
-
{ "name": "
|
|
7187
|
-
{ "name": "header-borderless", "value": { "type": "boolean" } },
|
|
7188
|
-
{ "name": "cosmic", "value": { "type": "boolean" } },
|
|
7189
|
-
{ "name": "flush", "value": { "type": "boolean" } },
|
|
7190
|
-
{ "name": "flush-x", "value": { "type": "boolean" } },
|
|
7191
|
-
{ "name": "flush-y", "value": { "type": "boolean" } },
|
|
7192
|
-
{ "name": "flush-footer", "value": { "type": "boolean" } },
|
|
7193
|
-
{ "name": "transparent", "value": { "type": "boolean" } },
|
|
7194
|
-
{ "name": "shadow", "value": { "type": "boolean" } }
|
|
7195
|
-
],
|
|
7196
|
-
"slots": [
|
|
7197
|
-
{ "name": "", "description": "The panel's main content." },
|
|
7198
|
-
{
|
|
7199
|
-
"name": "actions",
|
|
7200
|
-
"description": "Actions displayed in the panel header (buttons, chips, etc)."
|
|
7201
|
-
},
|
|
7202
|
-
{
|
|
7203
|
-
"name": "footer",
|
|
7204
|
-
"description": "Content displayed in the panel footer."
|
|
7205
|
-
}
|
|
7140
|
+
{ "name": "limit", "value": { "type": "number", "default": "10" } },
|
|
7141
|
+
{ "name": "total", "value": { "type": "number", "default": "0" } },
|
|
7142
|
+
{ "name": "page", "value": { "type": "number", "default": "1" } },
|
|
7143
|
+
{ "name": "uri", "value": { "type": "string", "default": "\"\"" } }
|
|
7206
7144
|
],
|
|
7207
7145
|
"events": [],
|
|
7208
7146
|
"js": {
|
|
7209
7147
|
"properties": [
|
|
7210
|
-
{ "name": "
|
|
7211
|
-
{ "name": "
|
|
7148
|
+
{ "name": "limit", "type": "number" },
|
|
7149
|
+
{ "name": "total", "type": "number" },
|
|
7150
|
+
{ "name": "page", "type": "number" },
|
|
7151
|
+
{ "name": "uri", "type": "string" }
|
|
7152
|
+
],
|
|
7153
|
+
"events": []
|
|
7154
|
+
}
|
|
7155
|
+
},
|
|
7156
|
+
{
|
|
7157
|
+
"name": "zn-pane",
|
|
7158
|
+
"description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
|
|
7159
|
+
"doc-url": "",
|
|
7160
|
+
"attributes": [{ "name": "flush", "value": { "type": "boolean" } }],
|
|
7161
|
+
"slots": [
|
|
7162
|
+
{ "name": "", "description": "The default slot." },
|
|
7163
|
+
{ "name": "example", "description": "An example slot." }
|
|
7164
|
+
],
|
|
7165
|
+
"events": [
|
|
7166
|
+
{ "name": "zn-event-name", "description": "Emitted as an example." }
|
|
7167
|
+
],
|
|
7168
|
+
"js": {
|
|
7169
|
+
"properties": [{ "name": "flush", "type": "boolean" }],
|
|
7170
|
+
"events": [
|
|
7171
|
+
{
|
|
7172
|
+
"name": "zn-event-name",
|
|
7173
|
+
"description": "Emitted as an example."
|
|
7174
|
+
}
|
|
7175
|
+
]
|
|
7176
|
+
}
|
|
7177
|
+
},
|
|
7178
|
+
{
|
|
7179
|
+
"name": "zn-panel",
|
|
7180
|
+
"description": "Panels are versatile containers that provide structure for organizing content with optional headers and footers.\n---\n\n\n### **Slots:**\n - _default_ - The panel's main content.\n- **actions** - Actions displayed in the panel header (buttons, chips, etc).\n- **footer** - Content displayed in the panel footer.\n\n### **CSS Properties:**\n - **--zn-panel-basis** - The flex-basis of the panel. Can be set using the basis-px attribute. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
|
|
7181
|
+
"doc-url": "",
|
|
7182
|
+
"attributes": [
|
|
7183
|
+
{ "name": "basis-px", "value": { "type": "number" } },
|
|
7184
|
+
{ "name": "caption", "value": { "type": "string" } },
|
|
7185
|
+
{ "name": "icon", "value": { "type": "string" } },
|
|
7186
|
+
{ "name": "tabbed", "value": { "type": "boolean" } },
|
|
7187
|
+
{ "name": "header-borderless", "value": { "type": "boolean" } },
|
|
7188
|
+
{ "name": "cosmic", "value": { "type": "boolean" } },
|
|
7189
|
+
{ "name": "flush", "value": { "type": "boolean" } },
|
|
7190
|
+
{ "name": "flush-x", "value": { "type": "boolean" } },
|
|
7191
|
+
{ "name": "flush-y", "value": { "type": "boolean" } },
|
|
7192
|
+
{ "name": "flush-footer", "value": { "type": "boolean" } },
|
|
7193
|
+
{ "name": "transparent", "value": { "type": "boolean" } },
|
|
7194
|
+
{ "name": "shadow", "value": { "type": "boolean" } }
|
|
7195
|
+
],
|
|
7196
|
+
"slots": [
|
|
7197
|
+
{ "name": "", "description": "The panel's main content." },
|
|
7198
|
+
{
|
|
7199
|
+
"name": "actions",
|
|
7200
|
+
"description": "Actions displayed in the panel header (buttons, chips, etc)."
|
|
7201
|
+
},
|
|
7202
|
+
{
|
|
7203
|
+
"name": "footer",
|
|
7204
|
+
"description": "Content displayed in the panel footer."
|
|
7205
|
+
}
|
|
7206
|
+
],
|
|
7207
|
+
"events": [],
|
|
7208
|
+
"js": {
|
|
7209
|
+
"properties": [
|
|
7210
|
+
{ "name": "basis", "type": "number" },
|
|
7211
|
+
{ "name": "caption", "type": "string" },
|
|
7212
7212
|
{ "name": "icon", "type": "string" },
|
|
7213
7213
|
{ "name": "tabbed", "type": "boolean" },
|
|
7214
7214
|
{ "name": "headerBorderless", "type": "boolean" },
|
|
@@ -7482,6 +7482,150 @@
|
|
|
7482
7482
|
]
|
|
7483
7483
|
}
|
|
7484
7484
|
},
|
|
7485
|
+
{
|
|
7486
|
+
"name": "zn-preview-frame",
|
|
7487
|
+
"description": "Embeds a live preview iframe and drives the hp-preview postMessage\nprotocol: answers the frame's ready handshake with a config payload fetched\nfrom data-uri, auto-saves watched forms on change, refreshes the preview\nafter each save (its own, or a shell-driven save of a `refresh-on` form),\naccepts a theme payload via setTheme() that is retained and replayed\nafter every ready handshake, and grows the frame to a content height the\nembed reports so the panel scrolls an overflowing page.\n---\n\n\n### **Events:**\n - **zn-error** - Emitted when the preview reports a render error or a save fails.\n\n### **Methods:**\n - **refresh()** - Re-fetches the payload and pushes a fresh config to the preview.\n- **setTheme(theme: _Record<string, unknown>_)** - Pushes a theme payload into the preview. The payload is retained and\nre-posted after every ready handshake, so a frame reload doesn't drop an\nin-progress theme.\n\n### **CSS Properties:**\n - **--zn-preview-frame-dot-spacing** - Spacing of the backdrop dot grid (`backdrop=\"dots\"`). Defaults to 20px. _(default: undefined)_\n- **--zn-preview-frame-dot-opacity** - Opacity of the backdrop dots (`backdrop=\"dots\"`). Defaults to 0.08. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **stage** - The device-width wrapper around the iframe.\n- **iframe** - The preview iframe.\n- **error** - The error overlay.",
|
|
7488
|
+
"doc-url": "",
|
|
7489
|
+
"attributes": [
|
|
7490
|
+
{
|
|
7491
|
+
"name": "src",
|
|
7492
|
+
"description": "URL of the preview shell page (tokened embed URL).",
|
|
7493
|
+
"value": { "type": "string", "default": "''" }
|
|
7494
|
+
},
|
|
7495
|
+
{
|
|
7496
|
+
"name": "frame-origin",
|
|
7497
|
+
"description": "Expected origin of the iframe; all postMessage traffic is checked against it.",
|
|
7498
|
+
"value": { "type": "string", "default": "''" }
|
|
7499
|
+
},
|
|
7500
|
+
{
|
|
7501
|
+
"name": "data-uri",
|
|
7502
|
+
"description": "Endpoint returning the hp-preview:config payload JSON. The console proxy rewrites this attribute to an app-prefixed path for proper fetch resolution.",
|
|
7503
|
+
"value": { "type": "string", "default": "''" }
|
|
7504
|
+
},
|
|
7505
|
+
{
|
|
7506
|
+
"name": "watch",
|
|
7507
|
+
"description": "Selector (resolved against the component's root node) for the forms to watch.\nDefaults to only forms explicitly opted in via a `data-auto-save` attribute —\nunmarked forms keep normal submit behavior and are never intercepted,\nauto-saved, or used to trigger a preview refresh. Override to widen the scope.",
|
|
7508
|
+
"value": { "type": "string", "default": "'form[data-auto-save]'" }
|
|
7509
|
+
},
|
|
7510
|
+
{
|
|
7511
|
+
"name": "refresh-on",
|
|
7512
|
+
"description": "Selector for forms whose saves are left to the shell but should still\nrefresh the preview. These are never intercepted: the shell submits them\n(so its own response handling — alerts, refreshes — runs as normal) and the\npreview re-fetches its config once the shell reports the save complete.\nMatched by delegation on the shell's bubbled `complete` event rather than\nby attaching to the forms themselves, so a save anywhere on the page\nrefreshes the preview — including forms in a different DOM root, e.g. a\npage-level form saved while the preview sits inside a tab panel's shadow\nroot (a page's Template select lives on one tab, its preview on another).\nSet empty to disable.",
|
|
7513
|
+
"value": { "type": "string", "default": "'form'" }
|
|
7514
|
+
},
|
|
7515
|
+
{
|
|
7516
|
+
"name": "debounce",
|
|
7517
|
+
"description": "Debounce in ms between a form change and its auto-save.",
|
|
7518
|
+
"value": { "type": "number", "default": "400" }
|
|
7519
|
+
},
|
|
7520
|
+
{
|
|
7521
|
+
"name": "zoom",
|
|
7522
|
+
"description": "Zooms the previewed page out (0–1]. The frame always fills the panel;\nzoom shrinks the content browser-style, so 0.4 shows the page at 40%\nsize with correspondingly more of it visible. 1 = natural size.\nIgnored when `fill` is set.",
|
|
7523
|
+
"value": { "type": "number", "default": "1" }
|
|
7524
|
+
},
|
|
7525
|
+
{
|
|
7526
|
+
"name": "min-height",
|
|
7527
|
+
"description": "The visible height (in CSS pixels) of the preview panel. Fixed rather\nthan measured, because a measured height would feed back into the\nscaled iframe's layout box and grow unbounded. With `fill` set, this\nbecomes a `min-height` floor instead of the height.",
|
|
7528
|
+
"value": { "type": "number", "default": "480" }
|
|
7529
|
+
},
|
|
7530
|
+
{
|
|
7531
|
+
"name": "fill",
|
|
7532
|
+
"description": "Fills the panel's own column height instead of using a fixed\n`min-height` pixel height — for hosts (like zn-theme-editor) whose\nlayout already stretches the column to match a taller sibling.\n`zoom` is ignored when set: its oversize maths depends on a known\npixel height, which `fill` deliberately doesn't have.",
|
|
7533
|
+
"value": { "type": "boolean", "default": "false" }
|
|
7534
|
+
},
|
|
7535
|
+
{
|
|
7536
|
+
"name": "device",
|
|
7537
|
+
"description": "Constrains and centres the preview to a device width: `desktop` (100%),\n`tablet` (768px) or `mobile` (390px). The iframe element itself is\nnarrowed, so the embedded page's own media queries fire.",
|
|
7538
|
+
"value": { "type": "PreviewFrameDevice", "default": "'desktop'" }
|
|
7539
|
+
},
|
|
7540
|
+
{
|
|
7541
|
+
"name": "backdrop",
|
|
7542
|
+
"description": "Backdrop behind the stage: `dots` (default) is the canvas dot grid; `panel` is a plain `rgb(var(--zn-panel))` fill.",
|
|
7543
|
+
"value": { "type": "'dots' | 'panel'", "default": "'dots'" }
|
|
7544
|
+
},
|
|
7545
|
+
{
|
|
7546
|
+
"name": "interactive",
|
|
7547
|
+
"description": "Lets pointer input through to the embedded page. The preview is inert by\ndefault: clicks never reach the frame, so the previewed page can't be\nnavigated or submitted from inside the preview. Cross-origin content can't\nbe reached from here to cancel its own handlers, so this blocks pointer\ninput entirely — hover goes with it. Scrolling doesn't: an overflowing\npage is scrolled by the panel rather than by the frame (see _contentHeight).\n\nSet, the frame becomes a real viewport instead: it stays the panel's own\nheight and the embed scrolls itself, so there is one scrollbar rather than\na panel scrolling an oversized frame, and the embed's viewport-relative\nlayout (`100vh`, `position: fixed`, sticky headers) sizes to what's on\nscreen. _contentHeight is ignored while this is set.",
|
|
7548
|
+
"value": { "type": "boolean", "default": "false" }
|
|
7549
|
+
}
|
|
7550
|
+
],
|
|
7551
|
+
"events": [
|
|
7552
|
+
{
|
|
7553
|
+
"name": "zn-error",
|
|
7554
|
+
"description": "Emitted when the preview reports a render error or a save fails."
|
|
7555
|
+
}
|
|
7556
|
+
],
|
|
7557
|
+
"js": {
|
|
7558
|
+
"properties": [
|
|
7559
|
+
{
|
|
7560
|
+
"name": "src",
|
|
7561
|
+
"description": "URL of the preview shell page (tokened embed URL).",
|
|
7562
|
+
"type": "string"
|
|
7563
|
+
},
|
|
7564
|
+
{
|
|
7565
|
+
"name": "frameOrigin",
|
|
7566
|
+
"description": "Expected origin of the iframe; all postMessage traffic is checked against it.",
|
|
7567
|
+
"type": "string"
|
|
7568
|
+
},
|
|
7569
|
+
{
|
|
7570
|
+
"name": "dataUri",
|
|
7571
|
+
"description": "Endpoint returning the hp-preview:config payload JSON. The console proxy rewrites this attribute to an app-prefixed path for proper fetch resolution.",
|
|
7572
|
+
"type": "string"
|
|
7573
|
+
},
|
|
7574
|
+
{
|
|
7575
|
+
"name": "watch",
|
|
7576
|
+
"description": "Selector (resolved against the component's root node) for the forms to watch.\nDefaults to only forms explicitly opted in via a `data-auto-save` attribute —\nunmarked forms keep normal submit behavior and are never intercepted,\nauto-saved, or used to trigger a preview refresh. Override to widen the scope.",
|
|
7577
|
+
"type": "string"
|
|
7578
|
+
},
|
|
7579
|
+
{
|
|
7580
|
+
"name": "refreshOn",
|
|
7581
|
+
"description": "Selector for forms whose saves are left to the shell but should still\nrefresh the preview. These are never intercepted: the shell submits them\n(so its own response handling — alerts, refreshes — runs as normal) and the\npreview re-fetches its config once the shell reports the save complete.\nMatched by delegation on the shell's bubbled `complete` event rather than\nby attaching to the forms themselves, so a save anywhere on the page\nrefreshes the preview — including forms in a different DOM root, e.g. a\npage-level form saved while the preview sits inside a tab panel's shadow\nroot (a page's Template select lives on one tab, its preview on another).\nSet empty to disable.",
|
|
7582
|
+
"type": "string"
|
|
7583
|
+
},
|
|
7584
|
+
{
|
|
7585
|
+
"name": "debounce",
|
|
7586
|
+
"description": "Debounce in ms between a form change and its auto-save.",
|
|
7587
|
+
"type": "number"
|
|
7588
|
+
},
|
|
7589
|
+
{
|
|
7590
|
+
"name": "zoom",
|
|
7591
|
+
"description": "Zooms the previewed page out (0–1]. The frame always fills the panel;\nzoom shrinks the content browser-style, so 0.4 shows the page at 40%\nsize with correspondingly more of it visible. 1 = natural size.\nIgnored when `fill` is set.",
|
|
7592
|
+
"type": "number"
|
|
7593
|
+
},
|
|
7594
|
+
{
|
|
7595
|
+
"name": "minHeight",
|
|
7596
|
+
"description": "The visible height (in CSS pixels) of the preview panel. Fixed rather\nthan measured, because a measured height would feed back into the\nscaled iframe's layout box and grow unbounded. With `fill` set, this\nbecomes a `min-height` floor instead of the height.",
|
|
7597
|
+
"type": "number"
|
|
7598
|
+
},
|
|
7599
|
+
{
|
|
7600
|
+
"name": "fill",
|
|
7601
|
+
"description": "Fills the panel's own column height instead of using a fixed\n`min-height` pixel height — for hosts (like zn-theme-editor) whose\nlayout already stretches the column to match a taller sibling.\n`zoom` is ignored when set: its oversize maths depends on a known\npixel height, which `fill` deliberately doesn't have.",
|
|
7602
|
+
"type": "boolean"
|
|
7603
|
+
},
|
|
7604
|
+
{
|
|
7605
|
+
"name": "device",
|
|
7606
|
+
"description": "Constrains and centres the preview to a device width: `desktop` (100%),\n`tablet` (768px) or `mobile` (390px). The iframe element itself is\nnarrowed, so the embedded page's own media queries fire.",
|
|
7607
|
+
"type": "PreviewFrameDevice"
|
|
7608
|
+
},
|
|
7609
|
+
{
|
|
7610
|
+
"name": "backdrop",
|
|
7611
|
+
"description": "Backdrop behind the stage: `dots` (default) is the canvas dot grid; `panel` is a plain `rgb(var(--zn-panel))` fill.",
|
|
7612
|
+
"type": "'dots' | 'panel'"
|
|
7613
|
+
},
|
|
7614
|
+
{
|
|
7615
|
+
"name": "interactive",
|
|
7616
|
+
"description": "Lets pointer input through to the embedded page. The preview is inert by\ndefault: clicks never reach the frame, so the previewed page can't be\nnavigated or submitted from inside the preview. Cross-origin content can't\nbe reached from here to cancel its own handlers, so this blocks pointer\ninput entirely — hover goes with it. Scrolling doesn't: an overflowing\npage is scrolled by the panel rather than by the frame (see _contentHeight).\n\nSet, the frame becomes a real viewport instead: it stays the panel's own\nheight and the embed scrolls itself, so there is one scrollbar rather than\na panel scrolling an oversized frame, and the embed's viewport-relative\nlayout (`100vh`, `position: fixed`, sticky headers) sizes to what's on\nscreen. _contentHeight is ignored while this is set.",
|
|
7617
|
+
"type": "boolean"
|
|
7618
|
+
},
|
|
7619
|
+
{ "name": "frame", "type": "HTMLIFrameElement" }
|
|
7620
|
+
],
|
|
7621
|
+
"events": [
|
|
7622
|
+
{
|
|
7623
|
+
"name": "zn-error",
|
|
7624
|
+
"description": "Emitted when the preview reports a render error or a save fails."
|
|
7625
|
+
}
|
|
7626
|
+
]
|
|
7627
|
+
}
|
|
7628
|
+
},
|
|
7485
7629
|
{
|
|
7486
7630
|
"name": "zn-priority-list",
|
|
7487
7631
|
"description": "A reorderable list where each item receives a numerical priority based on its position. Supports drag-and-drop\nand keyboard reordering. Priority values are submitted as form data via hidden inputs.\n---\n\n\n### **Events:**\n - **zn-change** - Emitted when the order of items changes.\n- **zn-reorder** - Emitted when items are reordered. Call `getPriorityMap()` on the component to get the updated `{ key: string, priority: number }[]` array.\n\n### **Methods:**\n - **getPriorityMap(): _PriorityItem[]_** - Returns the priority map: an array of { key, priority } objects.\n- **checkValidity(): _boolean_** - Checks for validity but does not show a validation message.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity(): _boolean_** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(_message)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - _default_ - The default slot where list items are placed. Each slotted element must have a `value` attribute that uniquely identifies the item. The component automatically assigns slot names to project each item into the correct position. The item's position in the list determines its priority (top = `priority-start`, incrementing).\n- **label** - The component's label. Required for proper accessibility. Alternatively, use the `label` attribute.\n- **label-tooltip** - Used to add text displayed in a tooltip next to the label.\n- **help-text** - Text that describes how to use the component. Alternatively, use the `help-text` attribute.\n\n### **CSS Properties:**\n - **--zn-priority-list-item-gap** - The gap between list items. Defaults to `var(--zn-spacing-2x-small)`. _(default: undefined)_\n- **--zn-priority-list-item-padding** - The padding inside each item. Defaults to `var(--zn-spacing-small) var(--zn-spacing-medium)`. _(default: undefined)_\n- **--zn-priority-list-actions-gap** - The gap between an item's slotted actions. Defaults to `var(--zn-spacing-x-small)`. _(default: undefined)_\n- **--zn-priority-list-handle-color** - The color of the drag handle. Defaults to `var(--zn-color-neutral-500)`. _(default: undefined)_\n- **--zn-priority-list-priority-color** - The color of the priority number. Defaults to `var(--zn-color-neutral-600)`. _(default: undefined)_\n\n### **CSS Parts:**\n - **form-control** - The form control wrapper.\n- **form-control-label** - The label wrapper.\n- **form-control-input** - The input area wrapper.\n- **form-control-help-text** - The help text wrapper.\n- **list** - The list container.\n- **item** - An individual list item row.\n- **drag-handle** - The drag handle icon.\n- **priority** - The priority number badge.\n- **content** - The content area of an item.",
|
|
@@ -7673,173 +7817,29 @@
|
|
|
7673
7817
|
"attributes": [
|
|
7674
7818
|
{ "name": "caption", "value": { "type": "string | undefined" } },
|
|
7675
7819
|
{
|
|
7676
|
-
"name": "color",
|
|
7677
|
-
"value": { "type": "ProgressBarColor", "default": "'current'" }
|
|
7678
|
-
},
|
|
7679
|
-
{
|
|
7680
|
-
"name": "description",
|
|
7681
|
-
"value": { "type": "string | undefined" }
|
|
7682
|
-
},
|
|
7683
|
-
{ "name": "value", "value": { "type": "number | undefined" } },
|
|
7684
|
-
{
|
|
7685
|
-
"name": "show-progress",
|
|
7686
|
-
"value": { "type": "boolean | undefined" }
|
|
7687
|
-
}
|
|
7688
|
-
],
|
|
7689
|
-
"events": [],
|
|
7690
|
-
"js": {
|
|
7691
|
-
"properties": [
|
|
7692
|
-
{ "name": "caption", "type": "string | undefined" },
|
|
7693
|
-
{ "name": "color", "type": "ProgressBarColor" },
|
|
7694
|
-
{ "name": "description", "type": "string | undefined" },
|
|
7695
|
-
{ "name": "value", "type": "number | undefined" },
|
|
7696
|
-
{ "name": "showProgress", "type": "boolean | undefined" }
|
|
7697
|
-
],
|
|
7698
|
-
"events": []
|
|
7699
|
-
}
|
|
7700
|
-
},
|
|
7701
|
-
{
|
|
7702
|
-
"name": "zn-preview-frame",
|
|
7703
|
-
"description": "Embeds a live preview iframe and drives the hp-preview postMessage\nprotocol: answers the frame's ready handshake with a config payload fetched\nfrom data-uri, auto-saves watched forms on change, refreshes the preview\nafter each save (its own, or a shell-driven save of a `refresh-on` form),\naccepts a theme payload via setTheme() that is retained and replayed\nafter every ready handshake, and grows the frame to a content height the\nembed reports so the panel scrolls an overflowing page.\n---\n\n\n### **Events:**\n - **zn-error** - Emitted when the preview reports a render error or a save fails.\n\n### **Methods:**\n - **refresh()** - Re-fetches the payload and pushes a fresh config to the preview.\n- **setTheme(theme: _Record<string, unknown>_)** - Pushes a theme payload into the preview. The payload is retained and\nre-posted after every ready handshake, so a frame reload doesn't drop an\nin-progress theme.\n\n### **CSS Properties:**\n - **--zn-preview-frame-dot-spacing** - Spacing of the backdrop dot grid (`backdrop=\"dots\"`). Defaults to 20px. _(default: undefined)_\n- **--zn-preview-frame-dot-opacity** - Opacity of the backdrop dots (`backdrop=\"dots\"`). Defaults to 0.08. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **stage** - The device-width wrapper around the iframe.\n- **iframe** - The preview iframe.\n- **error** - The error overlay.",
|
|
7704
|
-
"doc-url": "",
|
|
7705
|
-
"attributes": [
|
|
7706
|
-
{
|
|
7707
|
-
"name": "src",
|
|
7708
|
-
"description": "URL of the preview shell page (tokened embed URL).",
|
|
7709
|
-
"value": { "type": "string", "default": "''" }
|
|
7710
|
-
},
|
|
7711
|
-
{
|
|
7712
|
-
"name": "frame-origin",
|
|
7713
|
-
"description": "Expected origin of the iframe; all postMessage traffic is checked against it.",
|
|
7714
|
-
"value": { "type": "string", "default": "''" }
|
|
7715
|
-
},
|
|
7716
|
-
{
|
|
7717
|
-
"name": "data-uri",
|
|
7718
|
-
"description": "Endpoint returning the hp-preview:config payload JSON. The console proxy rewrites this attribute to an app-prefixed path for proper fetch resolution.",
|
|
7719
|
-
"value": { "type": "string", "default": "''" }
|
|
7720
|
-
},
|
|
7721
|
-
{
|
|
7722
|
-
"name": "watch",
|
|
7723
|
-
"description": "Selector (resolved against the component's root node) for the forms to watch.\nDefaults to only forms explicitly opted in via a `data-auto-save` attribute —\nunmarked forms keep normal submit behavior and are never intercepted,\nauto-saved, or used to trigger a preview refresh. Override to widen the scope.",
|
|
7724
|
-
"value": { "type": "string", "default": "'form[data-auto-save]'" }
|
|
7725
|
-
},
|
|
7726
|
-
{
|
|
7727
|
-
"name": "refresh-on",
|
|
7728
|
-
"description": "Selector for forms whose saves are left to the shell but should still\nrefresh the preview. These are never intercepted: the shell submits them\n(so its own response handling — alerts, refreshes — runs as normal) and the\npreview re-fetches its config once the shell reports the save complete.\nMatched by delegation on the shell's bubbled `complete` event rather than\nby attaching to the forms themselves, so a save anywhere on the page\nrefreshes the preview — including forms in a different DOM root, e.g. a\npage-level form saved while the preview sits inside a tab panel's shadow\nroot (a page's Template select lives on one tab, its preview on another).\nSet empty to disable.",
|
|
7729
|
-
"value": { "type": "string", "default": "'form'" }
|
|
7730
|
-
},
|
|
7731
|
-
{
|
|
7732
|
-
"name": "debounce",
|
|
7733
|
-
"description": "Debounce in ms between a form change and its auto-save.",
|
|
7734
|
-
"value": { "type": "number", "default": "400" }
|
|
7735
|
-
},
|
|
7736
|
-
{
|
|
7737
|
-
"name": "zoom",
|
|
7738
|
-
"description": "Zooms the previewed page out (0–1]. The frame always fills the panel;\nzoom shrinks the content browser-style, so 0.4 shows the page at 40%\nsize with correspondingly more of it visible. 1 = natural size.\nIgnored when `fill` is set.",
|
|
7739
|
-
"value": { "type": "number", "default": "1" }
|
|
7740
|
-
},
|
|
7741
|
-
{
|
|
7742
|
-
"name": "min-height",
|
|
7743
|
-
"description": "The visible height (in CSS pixels) of the preview panel. Fixed rather\nthan measured, because a measured height would feed back into the\nscaled iframe's layout box and grow unbounded. With `fill` set, this\nbecomes a `min-height` floor instead of the height.",
|
|
7744
|
-
"value": { "type": "number", "default": "480" }
|
|
7745
|
-
},
|
|
7746
|
-
{
|
|
7747
|
-
"name": "fill",
|
|
7748
|
-
"description": "Fills the panel's own column height instead of using a fixed\n`min-height` pixel height — for hosts (like zn-theme-editor) whose\nlayout already stretches the column to match a taller sibling.\n`zoom` is ignored when set: its oversize maths depends on a known\npixel height, which `fill` deliberately doesn't have.",
|
|
7749
|
-
"value": { "type": "boolean", "default": "false" }
|
|
7750
|
-
},
|
|
7751
|
-
{
|
|
7752
|
-
"name": "device",
|
|
7753
|
-
"description": "Constrains and centres the preview to a device width: `desktop` (100%),\n`tablet` (768px) or `mobile` (390px). The iframe element itself is\nnarrowed, so the embedded page's own media queries fire.",
|
|
7754
|
-
"value": { "type": "PreviewFrameDevice", "default": "'desktop'" }
|
|
7755
|
-
},
|
|
7756
|
-
{
|
|
7757
|
-
"name": "backdrop",
|
|
7758
|
-
"description": "Backdrop behind the stage: `dots` (default) is the canvas dot grid; `panel` is a plain `rgb(var(--zn-panel))` fill.",
|
|
7759
|
-
"value": { "type": "'dots' | 'panel'", "default": "'dots'" }
|
|
7760
|
-
},
|
|
7761
|
-
{
|
|
7762
|
-
"name": "interactive",
|
|
7763
|
-
"description": "Lets pointer input through to the embedded page. The preview is inert by\ndefault: clicks never reach the frame, so the previewed page can't be\nnavigated or submitted from inside the preview. Cross-origin content can't\nbe reached from here to cancel its own handlers, so this blocks pointer\ninput entirely — hover goes with it. Scrolling doesn't: an overflowing\npage is scrolled by the panel rather than by the frame (see _contentHeight).\n\nSet, the frame becomes a real viewport instead: it stays the panel's own\nheight and the embed scrolls itself, so there is one scrollbar rather than\na panel scrolling an oversized frame, and the embed's viewport-relative\nlayout (`100vh`, `position: fixed`, sticky headers) sizes to what's on\nscreen. _contentHeight is ignored while this is set.",
|
|
7764
|
-
"value": { "type": "boolean", "default": "false" }
|
|
7765
|
-
}
|
|
7766
|
-
],
|
|
7767
|
-
"events": [
|
|
7768
|
-
{
|
|
7769
|
-
"name": "zn-error",
|
|
7770
|
-
"description": "Emitted when the preview reports a render error or a save fails."
|
|
7771
|
-
}
|
|
7772
|
-
],
|
|
7773
|
-
"js": {
|
|
7774
|
-
"properties": [
|
|
7775
|
-
{
|
|
7776
|
-
"name": "src",
|
|
7777
|
-
"description": "URL of the preview shell page (tokened embed URL).",
|
|
7778
|
-
"type": "string"
|
|
7779
|
-
},
|
|
7780
|
-
{
|
|
7781
|
-
"name": "frameOrigin",
|
|
7782
|
-
"description": "Expected origin of the iframe; all postMessage traffic is checked against it.",
|
|
7783
|
-
"type": "string"
|
|
7784
|
-
},
|
|
7785
|
-
{
|
|
7786
|
-
"name": "dataUri",
|
|
7787
|
-
"description": "Endpoint returning the hp-preview:config payload JSON. The console proxy rewrites this attribute to an app-prefixed path for proper fetch resolution.",
|
|
7788
|
-
"type": "string"
|
|
7789
|
-
},
|
|
7790
|
-
{
|
|
7791
|
-
"name": "watch",
|
|
7792
|
-
"description": "Selector (resolved against the component's root node) for the forms to watch.\nDefaults to only forms explicitly opted in via a `data-auto-save` attribute —\nunmarked forms keep normal submit behavior and are never intercepted,\nauto-saved, or used to trigger a preview refresh. Override to widen the scope.",
|
|
7793
|
-
"type": "string"
|
|
7794
|
-
},
|
|
7795
|
-
{
|
|
7796
|
-
"name": "refreshOn",
|
|
7797
|
-
"description": "Selector for forms whose saves are left to the shell but should still\nrefresh the preview. These are never intercepted: the shell submits them\n(so its own response handling — alerts, refreshes — runs as normal) and the\npreview re-fetches its config once the shell reports the save complete.\nMatched by delegation on the shell's bubbled `complete` event rather than\nby attaching to the forms themselves, so a save anywhere on the page\nrefreshes the preview — including forms in a different DOM root, e.g. a\npage-level form saved while the preview sits inside a tab panel's shadow\nroot (a page's Template select lives on one tab, its preview on another).\nSet empty to disable.",
|
|
7798
|
-
"type": "string"
|
|
7799
|
-
},
|
|
7800
|
-
{
|
|
7801
|
-
"name": "debounce",
|
|
7802
|
-
"description": "Debounce in ms between a form change and its auto-save.",
|
|
7803
|
-
"type": "number"
|
|
7804
|
-
},
|
|
7805
|
-
{
|
|
7806
|
-
"name": "zoom",
|
|
7807
|
-
"description": "Zooms the previewed page out (0–1]. The frame always fills the panel;\nzoom shrinks the content browser-style, so 0.4 shows the page at 40%\nsize with correspondingly more of it visible. 1 = natural size.\nIgnored when `fill` is set.",
|
|
7808
|
-
"type": "number"
|
|
7809
|
-
},
|
|
7810
|
-
{
|
|
7811
|
-
"name": "minHeight",
|
|
7812
|
-
"description": "The visible height (in CSS pixels) of the preview panel. Fixed rather\nthan measured, because a measured height would feed back into the\nscaled iframe's layout box and grow unbounded. With `fill` set, this\nbecomes a `min-height` floor instead of the height.",
|
|
7813
|
-
"type": "number"
|
|
7814
|
-
},
|
|
7815
|
-
{
|
|
7816
|
-
"name": "fill",
|
|
7817
|
-
"description": "Fills the panel's own column height instead of using a fixed\n`min-height` pixel height — for hosts (like zn-theme-editor) whose\nlayout already stretches the column to match a taller sibling.\n`zoom` is ignored when set: its oversize maths depends on a known\npixel height, which `fill` deliberately doesn't have.",
|
|
7818
|
-
"type": "boolean"
|
|
7819
|
-
},
|
|
7820
|
-
{
|
|
7821
|
-
"name": "device",
|
|
7822
|
-
"description": "Constrains and centres the preview to a device width: `desktop` (100%),\n`tablet` (768px) or `mobile` (390px). The iframe element itself is\nnarrowed, so the embedded page's own media queries fire.",
|
|
7823
|
-
"type": "PreviewFrameDevice"
|
|
7824
|
-
},
|
|
7825
|
-
{
|
|
7826
|
-
"name": "backdrop",
|
|
7827
|
-
"description": "Backdrop behind the stage: `dots` (default) is the canvas dot grid; `panel` is a plain `rgb(var(--zn-panel))` fill.",
|
|
7828
|
-
"type": "'dots' | 'panel'"
|
|
7829
|
-
},
|
|
7830
|
-
{
|
|
7831
|
-
"name": "interactive",
|
|
7832
|
-
"description": "Lets pointer input through to the embedded page. The preview is inert by\ndefault: clicks never reach the frame, so the previewed page can't be\nnavigated or submitted from inside the preview. Cross-origin content can't\nbe reached from here to cancel its own handlers, so this blocks pointer\ninput entirely — hover goes with it. Scrolling doesn't: an overflowing\npage is scrolled by the panel rather than by the frame (see _contentHeight).\n\nSet, the frame becomes a real viewport instead: it stays the panel's own\nheight and the embed scrolls itself, so there is one scrollbar rather than\na panel scrolling an oversized frame, and the embed's viewport-relative\nlayout (`100vh`, `position: fixed`, sticky headers) sizes to what's on\nscreen. _contentHeight is ignored while this is set.",
|
|
7833
|
-
"type": "boolean"
|
|
7834
|
-
},
|
|
7835
|
-
{ "name": "frame", "type": "HTMLIFrameElement" }
|
|
7820
|
+
"name": "color",
|
|
7821
|
+
"value": { "type": "ProgressBarColor", "default": "'current'" }
|
|
7822
|
+
},
|
|
7823
|
+
{
|
|
7824
|
+
"name": "description",
|
|
7825
|
+
"value": { "type": "string | undefined" }
|
|
7826
|
+
},
|
|
7827
|
+
{ "name": "value", "value": { "type": "number | undefined" } },
|
|
7828
|
+
{
|
|
7829
|
+
"name": "show-progress",
|
|
7830
|
+
"value": { "type": "boolean | undefined" }
|
|
7831
|
+
}
|
|
7832
|
+
],
|
|
7833
|
+
"events": [],
|
|
7834
|
+
"js": {
|
|
7835
|
+
"properties": [
|
|
7836
|
+
{ "name": "caption", "type": "string | undefined" },
|
|
7837
|
+
{ "name": "color", "type": "ProgressBarColor" },
|
|
7838
|
+
{ "name": "description", "type": "string | undefined" },
|
|
7839
|
+
{ "name": "value", "type": "number | undefined" },
|
|
7840
|
+
{ "name": "showProgress", "type": "boolean | undefined" }
|
|
7836
7841
|
],
|
|
7837
|
-
"events": [
|
|
7838
|
-
{
|
|
7839
|
-
"name": "zn-error",
|
|
7840
|
-
"description": "Emitted when the preview reports a render error or a save fails."
|
|
7841
|
-
}
|
|
7842
|
-
]
|
|
7842
|
+
"events": []
|
|
7843
7843
|
}
|
|
7844
7844
|
},
|
|
7845
7845
|
{
|
|
@@ -12219,120 +12219,6 @@
|
|
|
12219
12219
|
]
|
|
12220
12220
|
}
|
|
12221
12221
|
},
|
|
12222
|
-
{
|
|
12223
|
-
"name": "zn-translation-group",
|
|
12224
|
-
"description": "Puts several zn-translations fields behind one language select, so a whole form's worth of copy is\ntranslated a language at a time.\n---\n\n\n### **Events:**\n - **zn-language-change** - Emitted when the active language changes. Detail: `{ language: string }`.\n\n### **Slots:**\n - _default_ - The `zn-translations` fields the select drives.\n- **actions** - Buttons for the bottom of the panel, on the white body rather than the grey footer. They sit on the right, as zinc's form action rows do; `align=\"start\"` moves one to the left. Write them in the order they should be read — the sides are set by CSS ordering, so markup order is what a keyboard follows.\n- **footer** - Content displayed in the grey panel footer.\n\n### **CSS Properties:**\n - **--zn-panel-basis** - The flex-basis of the panel. Can be set using the basis-px attribute. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **form-group** - The form group holding the caption, the language select and the fields.\n- **actions** - The row of buttons at the bottom of the body.\n- **language-field** - The select that chooses the language every child is editing, in the group's chip slot.\n- **language-select** - The select itself.",
|
|
12225
|
-
"doc-url": "",
|
|
12226
|
-
"attributes": [
|
|
12227
|
-
{
|
|
12228
|
-
"name": "label",
|
|
12229
|
-
"description": "The form group's label. An alias for the inherited `caption`, which wins where both are set.",
|
|
12230
|
-
"value": { "type": "string", "default": "''" }
|
|
12231
|
-
},
|
|
12232
|
-
{
|
|
12233
|
-
"name": "help-text",
|
|
12234
|
-
"description": "Sits under the label, above the language select, as help text does in any other form group.",
|
|
12235
|
-
"value": { "type": "string", "default": "''" }
|
|
12236
|
-
},
|
|
12237
|
-
{
|
|
12238
|
-
"name": "inline",
|
|
12239
|
-
"description": "Drops the panel chrome — border, background and padding — so the group reads as a section of the surrounding form\nrather than a panel of its own. For groups nested inside another panel, where the fields would otherwise sit\nindented behind a second border.",
|
|
12240
|
-
"value": { "type": "boolean", "default": "false" }
|
|
12241
|
-
},
|
|
12242
|
-
{
|
|
12243
|
-
"name": "language-label",
|
|
12244
|
-
"description": "The select's accessible name. Not shown — the caption is what names the section on screen — but read out by a\nscreen reader, which has nothing else to go on once the visible label is gone.",
|
|
12245
|
-
"value": { "type": "string", "default": "'Edit Languages'" }
|
|
12246
|
-
},
|
|
12247
|
-
{
|
|
12248
|
-
"name": "languages",
|
|
12249
|
-
"description": "The languages on offer, as language code to display name — `{\"en\": \"English\", \"fr\": \"French\"}`. Writing the code\nas the name (`{\"en\": \"EN\"}`) is also accepted. `en` is the language every other one falls back to. Set on every\nchild, so they do not need their own copy.",
|
|
12250
|
-
"value": {
|
|
12251
|
-
"type": "Record<string, string>",
|
|
12252
|
-
"default": "{ 'en': 'EN' }"
|
|
12253
|
-
}
|
|
12254
|
-
},
|
|
12255
|
-
{ "name": "basis-px", "value": { "type": "number" } },
|
|
12256
|
-
{ "name": "caption", "value": { "type": "string" } },
|
|
12257
|
-
{ "name": "icon", "value": { "type": "string" } },
|
|
12258
|
-
{ "name": "tabbed", "value": { "type": "boolean" } },
|
|
12259
|
-
{ "name": "header-borderless", "value": { "type": "boolean" } },
|
|
12260
|
-
{ "name": "cosmic", "value": { "type": "boolean" } },
|
|
12261
|
-
{ "name": "flush", "value": { "type": "boolean" } },
|
|
12262
|
-
{ "name": "flush-x", "value": { "type": "boolean" } },
|
|
12263
|
-
{ "name": "flush-y", "value": { "type": "boolean" } },
|
|
12264
|
-
{ "name": "flush-footer", "value": { "type": "boolean" } },
|
|
12265
|
-
{ "name": "transparent", "value": { "type": "boolean" } },
|
|
12266
|
-
{ "name": "shadow", "value": { "type": "boolean" } }
|
|
12267
|
-
],
|
|
12268
|
-
"slots": [
|
|
12269
|
-
{
|
|
12270
|
-
"name": "",
|
|
12271
|
-
"description": "The `zn-translations` fields the select drives."
|
|
12272
|
-
},
|
|
12273
|
-
{
|
|
12274
|
-
"name": "actions",
|
|
12275
|
-
"description": "Buttons for the bottom of the panel, on the white body rather than the grey footer. They sit on the right, as zinc's form action rows do; `align=\"start\"` moves one to the left. Write them in the order they should be read — the sides are set by CSS ordering, so markup order is what a keyboard follows."
|
|
12276
|
-
},
|
|
12277
|
-
{
|
|
12278
|
-
"name": "footer",
|
|
12279
|
-
"description": "Content displayed in the grey panel footer."
|
|
12280
|
-
}
|
|
12281
|
-
],
|
|
12282
|
-
"events": [
|
|
12283
|
-
{
|
|
12284
|
-
"name": "zn-language-change",
|
|
12285
|
-
"description": "Emitted when the active language changes. Detail: `{ language: string }`."
|
|
12286
|
-
}
|
|
12287
|
-
],
|
|
12288
|
-
"js": {
|
|
12289
|
-
"properties": [
|
|
12290
|
-
{
|
|
12291
|
-
"name": "label",
|
|
12292
|
-
"description": "The form group's label. An alias for the inherited `caption`, which wins where both are set.",
|
|
12293
|
-
"type": "string"
|
|
12294
|
-
},
|
|
12295
|
-
{
|
|
12296
|
-
"name": "helpText",
|
|
12297
|
-
"description": "Sits under the label, above the language select, as help text does in any other form group.",
|
|
12298
|
-
"type": "string"
|
|
12299
|
-
},
|
|
12300
|
-
{
|
|
12301
|
-
"name": "inline",
|
|
12302
|
-
"description": "Drops the panel chrome — border, background and padding — so the group reads as a section of the surrounding form\nrather than a panel of its own. For groups nested inside another panel, where the fields would otherwise sit\nindented behind a second border.",
|
|
12303
|
-
"type": "boolean"
|
|
12304
|
-
},
|
|
12305
|
-
{
|
|
12306
|
-
"name": "languageLabel",
|
|
12307
|
-
"description": "The select's accessible name. Not shown — the caption is what names the section on screen — but read out by a\nscreen reader, which has nothing else to go on once the visible label is gone.",
|
|
12308
|
-
"type": "string"
|
|
12309
|
-
},
|
|
12310
|
-
{
|
|
12311
|
-
"name": "languages",
|
|
12312
|
-
"description": "The languages on offer, as language code to display name — `{\"en\": \"English\", \"fr\": \"French\"}`. Writing the code\nas the name (`{\"en\": \"EN\"}`) is also accepted. `en` is the language every other one falls back to. Set on every\nchild, so they do not need their own copy.",
|
|
12313
|
-
"type": "Record<string, string>"
|
|
12314
|
-
},
|
|
12315
|
-
{ "name": "basis", "type": "number" },
|
|
12316
|
-
{ "name": "caption", "type": "string" },
|
|
12317
|
-
{ "name": "icon", "type": "string" },
|
|
12318
|
-
{ "name": "tabbed", "type": "boolean" },
|
|
12319
|
-
{ "name": "headerBorderless", "type": "boolean" },
|
|
12320
|
-
{ "name": "cosmic", "type": "boolean" },
|
|
12321
|
-
{ "name": "flush", "type": "boolean" },
|
|
12322
|
-
{ "name": "flushX", "type": "boolean" },
|
|
12323
|
-
{ "name": "flushY", "type": "boolean" },
|
|
12324
|
-
{ "name": "flushFooter", "type": "boolean" },
|
|
12325
|
-
{ "name": "transparent", "type": "boolean" },
|
|
12326
|
-
{ "name": "shadow", "type": "boolean" }
|
|
12327
|
-
],
|
|
12328
|
-
"events": [
|
|
12329
|
-
{
|
|
12330
|
-
"name": "zn-language-change",
|
|
12331
|
-
"description": "Emitted when the active language changes. Detail: `{ language: string }`."
|
|
12332
|
-
}
|
|
12333
|
-
]
|
|
12334
|
-
}
|
|
12335
|
-
},
|
|
12336
12222
|
{
|
|
12337
12223
|
"name": "zn-translations",
|
|
12338
12224
|
"description": "Collects one piece of text in several languages, one language at a time.\n---\n\n\n### **Events:**\n - **zn-change** - Emitted when a translation's value changes.\n- **zn-input** - Emitted when a translation receives input.\n\n### **Methods:**\n - **setActiveLanguage(language: _string_)** - Sets the active language externally. Used by zn-translation-group. Browsing to a language does not create a key\nfor it — an untouched language stays absent from `values` so it is not submitted as an empty translation.\n- **getActiveLanguage(): _string_** - Returns the currently active language.\n- **addLanguageKey(languageCode: _string_)** - Adds a language key to this component's values if not already present. Used by zn-translation-group.\n- **getValueLanguages(): _string[]_** - Returns all language codes that have values.\n- **hasTranslation(language: _string_): _boolean_** - Whether the language carries a translation of its own, rather than falling back to English.\n\n### **Slots:**\n - **label** - The field's label. Alternatively, use the `label` attribute.\n- **help-text** - Text describing how to fill the field in, shown below it and shared by every language. Alternatively, use the `help-text` attribute.\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, the language select, the field and the help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The wrapper around the field being edited.\n- **form-control-help-text** - The help text's wrapper.\n- **language-select** - The select that chooses the language being edited.",
|
|
@@ -12582,6 +12468,120 @@
|
|
|
12582
12468
|
]
|
|
12583
12469
|
}
|
|
12584
12470
|
},
|
|
12471
|
+
{
|
|
12472
|
+
"name": "zn-translation-group",
|
|
12473
|
+
"description": "Puts several zn-translations fields behind one language select, so a whole form's worth of copy is\ntranslated a language at a time.\n---\n\n\n### **Events:**\n - **zn-language-change** - Emitted when the active language changes. Detail: `{ language: string }`.\n\n### **Slots:**\n - _default_ - The `zn-translations` fields the select drives.\n- **actions** - Buttons for the bottom of the panel, on the white body rather than the grey footer. They sit on the right, as zinc's form action rows do; `align=\"start\"` moves one to the left. Write them in the order they should be read — the sides are set by CSS ordering, so markup order is what a keyboard follows.\n- **footer** - Content displayed in the grey panel footer.\n\n### **CSS Properties:**\n - **--zn-panel-basis** - The flex-basis of the panel. Can be set using the basis-px attribute. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **form-group** - The form group holding the caption, the language select and the fields.\n- **actions** - The row of buttons at the bottom of the body.\n- **language-field** - The select that chooses the language every child is editing, in the group's chip slot.\n- **language-select** - The select itself.",
|
|
12474
|
+
"doc-url": "",
|
|
12475
|
+
"attributes": [
|
|
12476
|
+
{
|
|
12477
|
+
"name": "label",
|
|
12478
|
+
"description": "The form group's label. An alias for the inherited `caption`, which wins where both are set.",
|
|
12479
|
+
"value": { "type": "string", "default": "''" }
|
|
12480
|
+
},
|
|
12481
|
+
{
|
|
12482
|
+
"name": "help-text",
|
|
12483
|
+
"description": "Sits under the label, above the language select, as help text does in any other form group.",
|
|
12484
|
+
"value": { "type": "string", "default": "''" }
|
|
12485
|
+
},
|
|
12486
|
+
{
|
|
12487
|
+
"name": "inline",
|
|
12488
|
+
"description": "Drops the panel chrome — border, background and padding — so the group reads as a section of the surrounding form\nrather than a panel of its own. For groups nested inside another panel, where the fields would otherwise sit\nindented behind a second border.",
|
|
12489
|
+
"value": { "type": "boolean", "default": "false" }
|
|
12490
|
+
},
|
|
12491
|
+
{
|
|
12492
|
+
"name": "language-label",
|
|
12493
|
+
"description": "The select's accessible name. Not shown — the caption is what names the section on screen — but read out by a\nscreen reader, which has nothing else to go on once the visible label is gone.",
|
|
12494
|
+
"value": { "type": "string", "default": "'Edit Languages'" }
|
|
12495
|
+
},
|
|
12496
|
+
{
|
|
12497
|
+
"name": "languages",
|
|
12498
|
+
"description": "The languages on offer, as language code to display name — `{\"en\": \"English\", \"fr\": \"French\"}`. Writing the code\nas the name (`{\"en\": \"EN\"}`) is also accepted. `en` is the language every other one falls back to. Set on every\nchild, so they do not need their own copy.",
|
|
12499
|
+
"value": {
|
|
12500
|
+
"type": "Record<string, string>",
|
|
12501
|
+
"default": "{ 'en': 'EN' }"
|
|
12502
|
+
}
|
|
12503
|
+
},
|
|
12504
|
+
{ "name": "basis-px", "value": { "type": "number" } },
|
|
12505
|
+
{ "name": "caption", "value": { "type": "string" } },
|
|
12506
|
+
{ "name": "icon", "value": { "type": "string" } },
|
|
12507
|
+
{ "name": "tabbed", "value": { "type": "boolean" } },
|
|
12508
|
+
{ "name": "header-borderless", "value": { "type": "boolean" } },
|
|
12509
|
+
{ "name": "cosmic", "value": { "type": "boolean" } },
|
|
12510
|
+
{ "name": "flush", "value": { "type": "boolean" } },
|
|
12511
|
+
{ "name": "flush-x", "value": { "type": "boolean" } },
|
|
12512
|
+
{ "name": "flush-y", "value": { "type": "boolean" } },
|
|
12513
|
+
{ "name": "flush-footer", "value": { "type": "boolean" } },
|
|
12514
|
+
{ "name": "transparent", "value": { "type": "boolean" } },
|
|
12515
|
+
{ "name": "shadow", "value": { "type": "boolean" } }
|
|
12516
|
+
],
|
|
12517
|
+
"slots": [
|
|
12518
|
+
{
|
|
12519
|
+
"name": "",
|
|
12520
|
+
"description": "The `zn-translations` fields the select drives."
|
|
12521
|
+
},
|
|
12522
|
+
{
|
|
12523
|
+
"name": "actions",
|
|
12524
|
+
"description": "Buttons for the bottom of the panel, on the white body rather than the grey footer. They sit on the right, as zinc's form action rows do; `align=\"start\"` moves one to the left. Write them in the order they should be read — the sides are set by CSS ordering, so markup order is what a keyboard follows."
|
|
12525
|
+
},
|
|
12526
|
+
{
|
|
12527
|
+
"name": "footer",
|
|
12528
|
+
"description": "Content displayed in the grey panel footer."
|
|
12529
|
+
}
|
|
12530
|
+
],
|
|
12531
|
+
"events": [
|
|
12532
|
+
{
|
|
12533
|
+
"name": "zn-language-change",
|
|
12534
|
+
"description": "Emitted when the active language changes. Detail: `{ language: string }`."
|
|
12535
|
+
}
|
|
12536
|
+
],
|
|
12537
|
+
"js": {
|
|
12538
|
+
"properties": [
|
|
12539
|
+
{
|
|
12540
|
+
"name": "label",
|
|
12541
|
+
"description": "The form group's label. An alias for the inherited `caption`, which wins where both are set.",
|
|
12542
|
+
"type": "string"
|
|
12543
|
+
},
|
|
12544
|
+
{
|
|
12545
|
+
"name": "helpText",
|
|
12546
|
+
"description": "Sits under the label, above the language select, as help text does in any other form group.",
|
|
12547
|
+
"type": "string"
|
|
12548
|
+
},
|
|
12549
|
+
{
|
|
12550
|
+
"name": "inline",
|
|
12551
|
+
"description": "Drops the panel chrome — border, background and padding — so the group reads as a section of the surrounding form\nrather than a panel of its own. For groups nested inside another panel, where the fields would otherwise sit\nindented behind a second border.",
|
|
12552
|
+
"type": "boolean"
|
|
12553
|
+
},
|
|
12554
|
+
{
|
|
12555
|
+
"name": "languageLabel",
|
|
12556
|
+
"description": "The select's accessible name. Not shown — the caption is what names the section on screen — but read out by a\nscreen reader, which has nothing else to go on once the visible label is gone.",
|
|
12557
|
+
"type": "string"
|
|
12558
|
+
},
|
|
12559
|
+
{
|
|
12560
|
+
"name": "languages",
|
|
12561
|
+
"description": "The languages on offer, as language code to display name — `{\"en\": \"English\", \"fr\": \"French\"}`. Writing the code\nas the name (`{\"en\": \"EN\"}`) is also accepted. `en` is the language every other one falls back to. Set on every\nchild, so they do not need their own copy.",
|
|
12562
|
+
"type": "Record<string, string>"
|
|
12563
|
+
},
|
|
12564
|
+
{ "name": "basis", "type": "number" },
|
|
12565
|
+
{ "name": "caption", "type": "string" },
|
|
12566
|
+
{ "name": "icon", "type": "string" },
|
|
12567
|
+
{ "name": "tabbed", "type": "boolean" },
|
|
12568
|
+
{ "name": "headerBorderless", "type": "boolean" },
|
|
12569
|
+
{ "name": "cosmic", "type": "boolean" },
|
|
12570
|
+
{ "name": "flush", "type": "boolean" },
|
|
12571
|
+
{ "name": "flushX", "type": "boolean" },
|
|
12572
|
+
{ "name": "flushY", "type": "boolean" },
|
|
12573
|
+
{ "name": "flushFooter", "type": "boolean" },
|
|
12574
|
+
{ "name": "transparent", "type": "boolean" },
|
|
12575
|
+
{ "name": "shadow", "type": "boolean" }
|
|
12576
|
+
],
|
|
12577
|
+
"events": [
|
|
12578
|
+
{
|
|
12579
|
+
"name": "zn-language-change",
|
|
12580
|
+
"description": "Emitted when the active language changes. Detail: `{ language: string }`."
|
|
12581
|
+
}
|
|
12582
|
+
]
|
|
12583
|
+
}
|
|
12584
|
+
},
|
|
12585
12585
|
{
|
|
12586
12586
|
"name": "zn-vertical-stepper",
|
|
12587
12587
|
"description": "Vertical steppers display a sequence of steps in a vertical layout with descriptions and optional icons.\n---\n\n\n### **Slots:**\n - **icon** - Optional slot for adding an icon or indicator before the step content.\n\n### **CSS Parts:**\n - **vs** - The main container for the vertical stepper.\n- **vs__left** - The left section containing the icon and connecting line.\n- **vs__icon** - The icon container.\n- **vs__line** - The vertical connecting line between steps.\n- **vs__right** - The right section containing caption and description text.\n- **vs__caption** - The caption/title text element.\n- **vs__description** - The description text element.",
|