@kubex/zinc 1.1.135 → 1.1.137
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 +1005 -1005
- package/dist/vscode.html-custom-data.json +159 -159
- package/dist/web-types.json +365 -365
- package/dist/zn.min.js +5 -5
- package/package.json +1 -1
- package/src/components/button-menu/button-menu.scss +10 -0
- package/src/components/chip/chip.scss +1 -1
- package/src/components/page/page.scss +3 -1
package/dist/web-types.json
CHANGED
|
@@ -1,11 +1,33 @@
|
|
|
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.137",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
8
8
|
"elements": [
|
|
9
|
+
{
|
|
10
|
+
"name": "zn-action-bar",
|
|
11
|
+
"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.",
|
|
12
|
+
"doc-url": "",
|
|
13
|
+
"attributes": [],
|
|
14
|
+
"slots": [
|
|
15
|
+
{ "name": "", "description": "The default slot." },
|
|
16
|
+
{ "name": "example", "description": "An example slot." }
|
|
17
|
+
],
|
|
18
|
+
"events": [
|
|
19
|
+
{ "name": "zn-event-name", "description": "Emitted as an example." }
|
|
20
|
+
],
|
|
21
|
+
"js": {
|
|
22
|
+
"properties": [],
|
|
23
|
+
"events": [
|
|
24
|
+
{
|
|
25
|
+
"name": "zn-event-name",
|
|
26
|
+
"description": "Emitted as an example."
|
|
27
|
+
}
|
|
28
|
+
]
|
|
29
|
+
}
|
|
30
|
+
},
|
|
9
31
|
{
|
|
10
32
|
"name": "zn-absolute-container",
|
|
11
33
|
"description": "The absolute container will take the total inner height of the content (positioned absolute), and set that\nas it's min height, Creating enough space to show the content.\n---\n\n\n### **Slots:**\n - _default_ - The default slot",
|
|
@@ -83,28 +105,6 @@
|
|
|
83
105
|
]
|
|
84
106
|
}
|
|
85
107
|
},
|
|
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",
|
|
@@ -7320,149 +7320,408 @@
|
|
|
7320
7320
|
}
|
|
7321
7321
|
},
|
|
7322
7322
|
{
|
|
7323
|
-
"name": "zn-
|
|
7324
|
-
"description": "
|
|
7323
|
+
"name": "zn-popup",
|
|
7324
|
+
"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 - **reposition()** - Forces the popup to recalculate and reposition itself.\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.",
|
|
7325
7325
|
"doc-url": "",
|
|
7326
7326
|
"attributes": [
|
|
7327
7327
|
{
|
|
7328
|
-
"name": "
|
|
7329
|
-
"description": "
|
|
7330
|
-
"value": { "type": "string
|
|
7328
|
+
"name": "anchor",
|
|
7329
|
+
"description": "The element the popup will be anchored to. If the anchor lives outside of the popup, you can provide the anchor\nelement `id`, a DOM element reference, or a `VirtualElement`. If the anchor lives inside the popup, use the\n`anchor` slot instead.",
|
|
7330
|
+
"value": { "type": "Element | string | VirtualElement" }
|
|
7331
7331
|
},
|
|
7332
7332
|
{
|
|
7333
|
-
"name": "
|
|
7334
|
-
"description": "
|
|
7335
|
-
"value": { "type": "
|
|
7333
|
+
"name": "active",
|
|
7334
|
+
"description": "Activates the positioning logic and shows the popup. When this attribute is removed, the positioning logic is torn\ndown and the popup will be hidden.",
|
|
7335
|
+
"value": { "type": "boolean", "default": "false" }
|
|
7336
7336
|
},
|
|
7337
7337
|
{
|
|
7338
|
-
"name": "
|
|
7339
|
-
"description": "
|
|
7340
|
-
"value": {
|
|
7338
|
+
"name": "placement",
|
|
7339
|
+
"description": "The preferred placement of the popup. Note that the actual placement will vary as configured to keep the\npanel inside of the viewport.",
|
|
7340
|
+
"value": {
|
|
7341
|
+
"type": "| 'top'\n | 'top-start'\n | 'top-end'\n | 'bottom'\n | 'bottom-start'\n | 'bottom-end'\n | 'right'\n | 'right-start'\n | 'right-end'\n | 'left'\n | 'left-start'\n | 'left-end'",
|
|
7342
|
+
"default": "'top'"
|
|
7343
|
+
}
|
|
7341
7344
|
},
|
|
7342
7345
|
{
|
|
7343
|
-
"name": "
|
|
7344
|
-
"description": "
|
|
7345
|
-
"value": { "type": "
|
|
7346
|
+
"name": "strategy",
|
|
7347
|
+
"description": "Determines how the popup is positioned. The `absolute` strategy works well in most cases, but if overflow is\nclipped, using a `fixed` position strategy can often workaround it.",
|
|
7348
|
+
"value": { "type": "'absolute' | 'fixed'", "default": "'fixed'" }
|
|
7346
7349
|
},
|
|
7347
7350
|
{
|
|
7348
|
-
"name": "
|
|
7349
|
-
"description": "
|
|
7350
|
-
"value": { "type": "
|
|
7351
|
+
"name": "distance",
|
|
7352
|
+
"description": "The distance in pixels from which to offset the panel away from its anchor.",
|
|
7353
|
+
"value": { "type": "number", "default": "0" }
|
|
7351
7354
|
},
|
|
7352
7355
|
{
|
|
7353
|
-
"name": "
|
|
7354
|
-
"description": "
|
|
7355
|
-
"value": { "type": "number", "default": "
|
|
7356
|
+
"name": "skidding",
|
|
7357
|
+
"description": "The distance in pixels from which to offset the panel along its anchor.",
|
|
7358
|
+
"value": { "type": "number", "default": "0" }
|
|
7356
7359
|
},
|
|
7357
7360
|
{
|
|
7358
|
-
"name": "
|
|
7359
|
-
"description": "
|
|
7360
|
-
"value": { "type": "
|
|
7361
|
+
"name": "arrow",
|
|
7362
|
+
"description": "Attaches an arrow to the popup. The arrow's size and color can be customized using the `--arrow-size` and\n`--arrow-color` custom properties. For additional customizations, you can also target the arrow using\n`::part(arrow)` in your stylesheet.",
|
|
7363
|
+
"value": { "type": "boolean", "default": "false" }
|
|
7361
7364
|
},
|
|
7362
7365
|
{
|
|
7363
|
-
"name": "
|
|
7364
|
-
"description": "The
|
|
7365
|
-
"value": {
|
|
7366
|
+
"name": "arrow-placement",
|
|
7367
|
+
"description": "The placement of the arrow. The default is `anchor`, which will align the arrow as close to the center of the\nanchor as possible, considering available space and `arrow-padding`. A value of `start`, `end`, or `center` will\nalign the arrow to the start, end, or center of the popover instead.",
|
|
7368
|
+
"value": {
|
|
7369
|
+
"type": "'start' | 'end' | 'center' | 'anchor'",
|
|
7370
|
+
"default": "'anchor'"
|
|
7371
|
+
}
|
|
7366
7372
|
},
|
|
7367
7373
|
{
|
|
7368
|
-
"name": "
|
|
7369
|
-
"description": "
|
|
7374
|
+
"name": "arrow-padding",
|
|
7375
|
+
"description": "The amount of padding between the arrow and the edges of the popup. If the popup has a border-radius, for example,\nthis will prevent it from overflowing the corners.",
|
|
7376
|
+
"value": { "type": "number", "default": "10" }
|
|
7377
|
+
},
|
|
7378
|
+
{
|
|
7379
|
+
"name": "flip",
|
|
7380
|
+
"description": "When set, placement of the popup will flip to the opposite site to keep it in view. You can use\n`flipFallbackPlacements` to further configure how the fallback placement is determined.",
|
|
7370
7381
|
"value": { "type": "boolean", "default": "false" }
|
|
7371
7382
|
},
|
|
7372
7383
|
{
|
|
7373
|
-
"name": "
|
|
7374
|
-
"description": "
|
|
7375
|
-
"value": { "type": "
|
|
7384
|
+
"name": "flip-fallback-placements",
|
|
7385
|
+
"description": "If the preferred placement doesn't fit, popup will be tested in these fallback placements until one fits. Must be a\nstring of any number of placements separated by a space, e.g. \"top bottom left\". If no placement fits, the flip\nfallback strategy will be used instead.",
|
|
7386
|
+
"value": { "type": "string", "default": "''" }
|
|
7376
7387
|
},
|
|
7377
7388
|
{
|
|
7378
|
-
"name": "
|
|
7379
|
-
"description": "
|
|
7380
|
-
"value": {
|
|
7389
|
+
"name": "flip-fallback-strategy",
|
|
7390
|
+
"description": "When neither the preferred placement nor the fallback placements fit, this value will be used to determine whether\nthe popup should be positioned using the best available fit based on available space or as it was initially\npreferred.",
|
|
7391
|
+
"value": {
|
|
7392
|
+
"type": "'best-fit' | 'initial'",
|
|
7393
|
+
"default": "'best-fit'"
|
|
7394
|
+
}
|
|
7381
7395
|
},
|
|
7382
7396
|
{
|
|
7383
|
-
"name": "
|
|
7384
|
-
"description": "
|
|
7397
|
+
"name": "flipBoundary",
|
|
7398
|
+
"description": "The flip boundary describes clipping element(s) that overflow will be checked relative to when flipping. By\ndefault, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\nchange the boundary by passing a reference to one or more elements to this property.",
|
|
7399
|
+
"value": { "type": "Element | Element[]" }
|
|
7400
|
+
},
|
|
7401
|
+
{
|
|
7402
|
+
"name": "flip-padding",
|
|
7403
|
+
"description": "The amount of padding, in pixels, to exceed before the flip behavior will occur.",
|
|
7404
|
+
"value": { "type": "number", "default": "0" }
|
|
7405
|
+
},
|
|
7406
|
+
{
|
|
7407
|
+
"name": "shift",
|
|
7408
|
+
"description": "Moves the popup along the axis to keep it in view when clipped.",
|
|
7409
|
+
"value": { "type": "boolean", "default": "false" }
|
|
7410
|
+
},
|
|
7411
|
+
{
|
|
7412
|
+
"name": "shiftBoundary",
|
|
7413
|
+
"description": "The shift boundary describes clipping element(s) that overflow will be checked relative to when shifting. By\ndefault, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\nchange the boundary by passing a reference to one or more elements to this property.",
|
|
7414
|
+
"value": { "type": "Element | Element[]" }
|
|
7415
|
+
},
|
|
7416
|
+
{
|
|
7417
|
+
"name": "shift-padding",
|
|
7418
|
+
"description": "The amount of padding, in pixels, to exceed before the shift behavior will occur.",
|
|
7419
|
+
"value": { "type": "number", "default": "0" }
|
|
7420
|
+
},
|
|
7421
|
+
{
|
|
7422
|
+
"name": "auto-size",
|
|
7423
|
+
"description": "When set, this will cause the popup to automatically resize itself to prevent it from overflowing.",
|
|
7424
|
+
"value": { "type": "'horizontal' | 'vertical' | 'both'" }
|
|
7425
|
+
},
|
|
7426
|
+
{
|
|
7427
|
+
"name": "sync",
|
|
7428
|
+
"description": "Syncs the popup's width or height to that of the anchor element.",
|
|
7429
|
+
"value": { "type": "'width' | 'height' | 'both'" }
|
|
7430
|
+
},
|
|
7431
|
+
{
|
|
7432
|
+
"name": "autoSizeBoundary",
|
|
7433
|
+
"description": "The auto-size boundary describes clipping element(s) that overflow will be checked relative to when resizing. By\ndefault, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\nchange the boundary by passing a reference to one or more elements to this property.",
|
|
7434
|
+
"value": { "type": "Element | Element[]" }
|
|
7435
|
+
},
|
|
7436
|
+
{
|
|
7437
|
+
"name": "auto-size-padding",
|
|
7438
|
+
"description": "The amount of padding, in pixels, to exceed before the auto-size behavior will occur.",
|
|
7439
|
+
"value": { "type": "number", "default": "0" }
|
|
7440
|
+
},
|
|
7441
|
+
{
|
|
7442
|
+
"name": "hover-bridge",
|
|
7443
|
+
"description": "When a gap exists between the anchor and the popup element, this option will add a \"hover bridge\" that fills the\ngap using an invisible element. This makes listening for events such as `mouseenter` and `mouseleave` more sane\nbecause the pointer never technically leaves the element. The hover bridge will only be drawn when the popover is\nactive.",
|
|
7385
7444
|
"value": { "type": "boolean", "default": "false" }
|
|
7386
7445
|
}
|
|
7387
7446
|
],
|
|
7447
|
+
"slots": [
|
|
7448
|
+
{ "name": "", "description": "The default slot." },
|
|
7449
|
+
{ "name": "example", "description": "An example slot." }
|
|
7450
|
+
],
|
|
7388
7451
|
"events": [
|
|
7389
|
-
{
|
|
7390
|
-
"name": "zn-error",
|
|
7391
|
-
"description": "Emitted when the preview reports a render error or a save fails."
|
|
7392
|
-
}
|
|
7452
|
+
{ "name": "zn-event-name", "description": "Emitted as an example." }
|
|
7393
7453
|
],
|
|
7394
7454
|
"js": {
|
|
7395
7455
|
"properties": [
|
|
7396
7456
|
{
|
|
7397
|
-
"name": "
|
|
7398
|
-
"description": "
|
|
7399
|
-
"type": "
|
|
7400
|
-
},
|
|
7401
|
-
{
|
|
7402
|
-
"name": "frameOrigin",
|
|
7403
|
-
"description": "Expected origin of the iframe; all postMessage traffic is checked against it.",
|
|
7404
|
-
"type": "string"
|
|
7457
|
+
"name": "popup",
|
|
7458
|
+
"description": "A reference to the internal popup container. Useful for animating and styling the popup with JavaScript.",
|
|
7459
|
+
"type": "HTMLElement"
|
|
7405
7460
|
},
|
|
7406
7461
|
{
|
|
7407
|
-
"name": "
|
|
7408
|
-
"description": "
|
|
7409
|
-
"type": "string"
|
|
7462
|
+
"name": "anchor",
|
|
7463
|
+
"description": "The element the popup will be anchored to. If the anchor lives outside of the popup, you can provide the anchor\nelement `id`, a DOM element reference, or a `VirtualElement`. If the anchor lives inside the popup, use the\n`anchor` slot instead.",
|
|
7464
|
+
"type": "Element | string | VirtualElement"
|
|
7410
7465
|
},
|
|
7411
7466
|
{
|
|
7412
|
-
"name": "
|
|
7413
|
-
"description": "
|
|
7414
|
-
"type": "
|
|
7467
|
+
"name": "active",
|
|
7468
|
+
"description": "Activates the positioning logic and shows the popup. When this attribute is removed, the positioning logic is torn\ndown and the popup will be hidden.",
|
|
7469
|
+
"type": "boolean"
|
|
7415
7470
|
},
|
|
7416
7471
|
{
|
|
7417
|
-
"name": "
|
|
7418
|
-
"description": "
|
|
7419
|
-
"type": "
|
|
7472
|
+
"name": "placement",
|
|
7473
|
+
"description": "The preferred placement of the popup. Note that the actual placement will vary as configured to keep the\npanel inside of the viewport.",
|
|
7474
|
+
"type": "| 'top'\n | 'top-start'\n | 'top-end'\n | 'bottom'\n | 'bottom-start'\n | 'bottom-end'\n | 'right'\n | 'right-start'\n | 'right-end'\n | 'left'\n | 'left-start'\n | 'left-end'"
|
|
7420
7475
|
},
|
|
7421
7476
|
{
|
|
7422
|
-
"name": "
|
|
7423
|
-
"description": "
|
|
7424
|
-
"type": "
|
|
7477
|
+
"name": "strategy",
|
|
7478
|
+
"description": "Determines how the popup is positioned. The `absolute` strategy works well in most cases, but if overflow is\nclipped, using a `fixed` position strategy can often workaround it.",
|
|
7479
|
+
"type": "'absolute' | 'fixed'"
|
|
7425
7480
|
},
|
|
7426
7481
|
{
|
|
7427
|
-
"name": "
|
|
7428
|
-
"description": "
|
|
7482
|
+
"name": "distance",
|
|
7483
|
+
"description": "The distance in pixels from which to offset the panel away from its anchor.",
|
|
7429
7484
|
"type": "number"
|
|
7430
7485
|
},
|
|
7431
7486
|
{
|
|
7432
|
-
"name": "
|
|
7433
|
-
"description": "The
|
|
7487
|
+
"name": "skidding",
|
|
7488
|
+
"description": "The distance in pixels from which to offset the panel along its anchor.",
|
|
7434
7489
|
"type": "number"
|
|
7435
7490
|
},
|
|
7436
7491
|
{
|
|
7437
|
-
"name": "
|
|
7438
|
-
"description": "
|
|
7492
|
+
"name": "arrow",
|
|
7493
|
+
"description": "Attaches an arrow to the popup. The arrow's size and color can be customized using the `--arrow-size` and\n`--arrow-color` custom properties. For additional customizations, you can also target the arrow using\n`::part(arrow)` in your stylesheet.",
|
|
7439
7494
|
"type": "boolean"
|
|
7440
7495
|
},
|
|
7441
7496
|
{
|
|
7442
|
-
"name": "
|
|
7443
|
-
"description": "
|
|
7444
|
-
"type": "
|
|
7497
|
+
"name": "arrowPlacement",
|
|
7498
|
+
"description": "The placement of the arrow. The default is `anchor`, which will align the arrow as close to the center of the\nanchor as possible, considering available space and `arrow-padding`. A value of `start`, `end`, or `center` will\nalign the arrow to the start, end, or center of the popover instead.",
|
|
7499
|
+
"type": "'start' | 'end' | 'center' | 'anchor'"
|
|
7445
7500
|
},
|
|
7446
7501
|
{
|
|
7447
|
-
"name": "
|
|
7448
|
-
"description": "
|
|
7449
|
-
"type": "
|
|
7502
|
+
"name": "arrowPadding",
|
|
7503
|
+
"description": "The amount of padding between the arrow and the edges of the popup. If the popup has a border-radius, for example,\nthis will prevent it from overflowing the corners.",
|
|
7504
|
+
"type": "number"
|
|
7450
7505
|
},
|
|
7451
7506
|
{
|
|
7452
|
-
"name": "
|
|
7453
|
-
"description": "
|
|
7507
|
+
"name": "flip",
|
|
7508
|
+
"description": "When set, placement of the popup will flip to the opposite site to keep it in view. You can use\n`flipFallbackPlacements` to further configure how the fallback placement is determined.",
|
|
7454
7509
|
"type": "boolean"
|
|
7455
7510
|
},
|
|
7456
|
-
{ "name": "frame", "type": "HTMLIFrameElement" }
|
|
7457
|
-
],
|
|
7458
|
-
"events": [
|
|
7459
7511
|
{
|
|
7460
|
-
"name": "
|
|
7461
|
-
"description": "
|
|
7462
|
-
|
|
7463
|
-
|
|
7464
|
-
|
|
7465
|
-
|
|
7512
|
+
"name": "flipFallbackPlacements",
|
|
7513
|
+
"description": "If the preferred placement doesn't fit, popup will be tested in these fallback placements until one fits. Must be a\nstring of any number of placements separated by a space, e.g. \"top bottom left\". If no placement fits, the flip\nfallback strategy will be used instead.",
|
|
7514
|
+
"type": "string"
|
|
7515
|
+
},
|
|
7516
|
+
{
|
|
7517
|
+
"name": "flipFallbackStrategy",
|
|
7518
|
+
"description": "When neither the preferred placement nor the fallback placements fit, this value will be used to determine whether\nthe popup should be positioned using the best available fit based on available space or as it was initially\npreferred.",
|
|
7519
|
+
"type": "'best-fit' | 'initial'"
|
|
7520
|
+
},
|
|
7521
|
+
{
|
|
7522
|
+
"name": "flipBoundary",
|
|
7523
|
+
"description": "The flip boundary describes clipping element(s) that overflow will be checked relative to when flipping. By\ndefault, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\nchange the boundary by passing a reference to one or more elements to this property.",
|
|
7524
|
+
"type": "Element | Element[]"
|
|
7525
|
+
},
|
|
7526
|
+
{
|
|
7527
|
+
"name": "flipPadding",
|
|
7528
|
+
"description": "The amount of padding, in pixels, to exceed before the flip behavior will occur.",
|
|
7529
|
+
"type": "number"
|
|
7530
|
+
},
|
|
7531
|
+
{
|
|
7532
|
+
"name": "shift",
|
|
7533
|
+
"description": "Moves the popup along the axis to keep it in view when clipped.",
|
|
7534
|
+
"type": "boolean"
|
|
7535
|
+
},
|
|
7536
|
+
{
|
|
7537
|
+
"name": "shiftBoundary",
|
|
7538
|
+
"description": "The shift boundary describes clipping element(s) that overflow will be checked relative to when shifting. By\ndefault, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\nchange the boundary by passing a reference to one or more elements to this property.",
|
|
7539
|
+
"type": "Element | Element[]"
|
|
7540
|
+
},
|
|
7541
|
+
{
|
|
7542
|
+
"name": "shiftPadding",
|
|
7543
|
+
"description": "The amount of padding, in pixels, to exceed before the shift behavior will occur.",
|
|
7544
|
+
"type": "number"
|
|
7545
|
+
},
|
|
7546
|
+
{
|
|
7547
|
+
"name": "autoSize",
|
|
7548
|
+
"description": "When set, this will cause the popup to automatically resize itself to prevent it from overflowing.",
|
|
7549
|
+
"type": "'horizontal' | 'vertical' | 'both'"
|
|
7550
|
+
},
|
|
7551
|
+
{
|
|
7552
|
+
"name": "sync",
|
|
7553
|
+
"description": "Syncs the popup's width or height to that of the anchor element.",
|
|
7554
|
+
"type": "'width' | 'height' | 'both'"
|
|
7555
|
+
},
|
|
7556
|
+
{
|
|
7557
|
+
"name": "autoSizeBoundary",
|
|
7558
|
+
"description": "The auto-size boundary describes clipping element(s) that overflow will be checked relative to when resizing. By\ndefault, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\nchange the boundary by passing a reference to one or more elements to this property.",
|
|
7559
|
+
"type": "Element | Element[]"
|
|
7560
|
+
},
|
|
7561
|
+
{
|
|
7562
|
+
"name": "autoSizePadding",
|
|
7563
|
+
"description": "The amount of padding, in pixels, to exceed before the auto-size behavior will occur.",
|
|
7564
|
+
"type": "number"
|
|
7565
|
+
},
|
|
7566
|
+
{
|
|
7567
|
+
"name": "hoverBridge",
|
|
7568
|
+
"description": "When a gap exists between the anchor and the popup element, this option will add a \"hover bridge\" that fills the\ngap using an invisible element. This makes listening for events such as `mouseenter` and `mouseleave` more sane\nbecause the pointer never technically leaves the element. The hover bridge will only be drawn when the popover is\nactive.",
|
|
7569
|
+
"type": "boolean"
|
|
7570
|
+
},
|
|
7571
|
+
{ "name": "handleAnchorHover" }
|
|
7572
|
+
],
|
|
7573
|
+
"events": [
|
|
7574
|
+
{
|
|
7575
|
+
"name": "zn-event-name",
|
|
7576
|
+
"description": "Emitted as an example."
|
|
7577
|
+
}
|
|
7578
|
+
]
|
|
7579
|
+
}
|
|
7580
|
+
},
|
|
7581
|
+
{
|
|
7582
|
+
"name": "zn-preview-frame",
|
|
7583
|
+
"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.",
|
|
7584
|
+
"doc-url": "",
|
|
7585
|
+
"attributes": [
|
|
7586
|
+
{
|
|
7587
|
+
"name": "src",
|
|
7588
|
+
"description": "URL of the preview shell page (tokened embed URL).",
|
|
7589
|
+
"value": { "type": "string", "default": "''" }
|
|
7590
|
+
},
|
|
7591
|
+
{
|
|
7592
|
+
"name": "frame-origin",
|
|
7593
|
+
"description": "Expected origin of the iframe; all postMessage traffic is checked against it.",
|
|
7594
|
+
"value": { "type": "string", "default": "''" }
|
|
7595
|
+
},
|
|
7596
|
+
{
|
|
7597
|
+
"name": "data-uri",
|
|
7598
|
+
"description": "Endpoint returning the hp-preview:config payload JSON. The console proxy rewrites this attribute to an app-prefixed path for proper fetch resolution.",
|
|
7599
|
+
"value": { "type": "string", "default": "''" }
|
|
7600
|
+
},
|
|
7601
|
+
{
|
|
7602
|
+
"name": "watch",
|
|
7603
|
+
"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.",
|
|
7604
|
+
"value": { "type": "string", "default": "'form[data-auto-save]'" }
|
|
7605
|
+
},
|
|
7606
|
+
{
|
|
7607
|
+
"name": "refresh-on",
|
|
7608
|
+
"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.",
|
|
7609
|
+
"value": { "type": "string", "default": "'form'" }
|
|
7610
|
+
},
|
|
7611
|
+
{
|
|
7612
|
+
"name": "debounce",
|
|
7613
|
+
"description": "Debounce in ms between a form change and its auto-save.",
|
|
7614
|
+
"value": { "type": "number", "default": "400" }
|
|
7615
|
+
},
|
|
7616
|
+
{
|
|
7617
|
+
"name": "zoom",
|
|
7618
|
+
"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.",
|
|
7619
|
+
"value": { "type": "number", "default": "1" }
|
|
7620
|
+
},
|
|
7621
|
+
{
|
|
7622
|
+
"name": "min-height",
|
|
7623
|
+
"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.",
|
|
7624
|
+
"value": { "type": "number", "default": "480" }
|
|
7625
|
+
},
|
|
7626
|
+
{
|
|
7627
|
+
"name": "fill",
|
|
7628
|
+
"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.",
|
|
7629
|
+
"value": { "type": "boolean", "default": "false" }
|
|
7630
|
+
},
|
|
7631
|
+
{
|
|
7632
|
+
"name": "device",
|
|
7633
|
+
"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.",
|
|
7634
|
+
"value": { "type": "PreviewFrameDevice", "default": "'desktop'" }
|
|
7635
|
+
},
|
|
7636
|
+
{
|
|
7637
|
+
"name": "backdrop",
|
|
7638
|
+
"description": "Backdrop behind the stage: `dots` (default) is the canvas dot grid; `panel` is a plain `rgb(var(--zn-panel))` fill.",
|
|
7639
|
+
"value": { "type": "'dots' | 'panel'", "default": "'dots'" }
|
|
7640
|
+
},
|
|
7641
|
+
{
|
|
7642
|
+
"name": "interactive",
|
|
7643
|
+
"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.",
|
|
7644
|
+
"value": { "type": "boolean", "default": "false" }
|
|
7645
|
+
}
|
|
7646
|
+
],
|
|
7647
|
+
"events": [
|
|
7648
|
+
{
|
|
7649
|
+
"name": "zn-error",
|
|
7650
|
+
"description": "Emitted when the preview reports a render error or a save fails."
|
|
7651
|
+
}
|
|
7652
|
+
],
|
|
7653
|
+
"js": {
|
|
7654
|
+
"properties": [
|
|
7655
|
+
{
|
|
7656
|
+
"name": "src",
|
|
7657
|
+
"description": "URL of the preview shell page (tokened embed URL).",
|
|
7658
|
+
"type": "string"
|
|
7659
|
+
},
|
|
7660
|
+
{
|
|
7661
|
+
"name": "frameOrigin",
|
|
7662
|
+
"description": "Expected origin of the iframe; all postMessage traffic is checked against it.",
|
|
7663
|
+
"type": "string"
|
|
7664
|
+
},
|
|
7665
|
+
{
|
|
7666
|
+
"name": "dataUri",
|
|
7667
|
+
"description": "Endpoint returning the hp-preview:config payload JSON. The console proxy rewrites this attribute to an app-prefixed path for proper fetch resolution.",
|
|
7668
|
+
"type": "string"
|
|
7669
|
+
},
|
|
7670
|
+
{
|
|
7671
|
+
"name": "watch",
|
|
7672
|
+
"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.",
|
|
7673
|
+
"type": "string"
|
|
7674
|
+
},
|
|
7675
|
+
{
|
|
7676
|
+
"name": "refreshOn",
|
|
7677
|
+
"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.",
|
|
7678
|
+
"type": "string"
|
|
7679
|
+
},
|
|
7680
|
+
{
|
|
7681
|
+
"name": "debounce",
|
|
7682
|
+
"description": "Debounce in ms between a form change and its auto-save.",
|
|
7683
|
+
"type": "number"
|
|
7684
|
+
},
|
|
7685
|
+
{
|
|
7686
|
+
"name": "zoom",
|
|
7687
|
+
"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.",
|
|
7688
|
+
"type": "number"
|
|
7689
|
+
},
|
|
7690
|
+
{
|
|
7691
|
+
"name": "minHeight",
|
|
7692
|
+
"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.",
|
|
7693
|
+
"type": "number"
|
|
7694
|
+
},
|
|
7695
|
+
{
|
|
7696
|
+
"name": "fill",
|
|
7697
|
+
"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.",
|
|
7698
|
+
"type": "boolean"
|
|
7699
|
+
},
|
|
7700
|
+
{
|
|
7701
|
+
"name": "device",
|
|
7702
|
+
"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.",
|
|
7703
|
+
"type": "PreviewFrameDevice"
|
|
7704
|
+
},
|
|
7705
|
+
{
|
|
7706
|
+
"name": "backdrop",
|
|
7707
|
+
"description": "Backdrop behind the stage: `dots` (default) is the canvas dot grid; `panel` is a plain `rgb(var(--zn-panel))` fill.",
|
|
7708
|
+
"type": "'dots' | 'panel'"
|
|
7709
|
+
},
|
|
7710
|
+
{
|
|
7711
|
+
"name": "interactive",
|
|
7712
|
+
"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.",
|
|
7713
|
+
"type": "boolean"
|
|
7714
|
+
},
|
|
7715
|
+
{ "name": "frame", "type": "HTMLIFrameElement" }
|
|
7716
|
+
],
|
|
7717
|
+
"events": [
|
|
7718
|
+
{
|
|
7719
|
+
"name": "zn-error",
|
|
7720
|
+
"description": "Emitted when the preview reports a render error or a save fails."
|
|
7721
|
+
}
|
|
7722
|
+
]
|
|
7723
|
+
}
|
|
7724
|
+
},
|
|
7466
7725
|
{
|
|
7467
7726
|
"name": "zn-priority-list",
|
|
7468
7727
|
"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.",
|
|
@@ -7647,265 +7906,6 @@
|
|
|
7647
7906
|
]
|
|
7648
7907
|
}
|
|
7649
7908
|
},
|
|
7650
|
-
{
|
|
7651
|
-
"name": "zn-popup",
|
|
7652
|
-
"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 - **reposition()** - Forces the popup to recalculate and reposition itself.\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.",
|
|
7653
|
-
"doc-url": "",
|
|
7654
|
-
"attributes": [
|
|
7655
|
-
{
|
|
7656
|
-
"name": "anchor",
|
|
7657
|
-
"description": "The element the popup will be anchored to. If the anchor lives outside of the popup, you can provide the anchor\nelement `id`, a DOM element reference, or a `VirtualElement`. If the anchor lives inside the popup, use the\n`anchor` slot instead.",
|
|
7658
|
-
"value": { "type": "Element | string | VirtualElement" }
|
|
7659
|
-
},
|
|
7660
|
-
{
|
|
7661
|
-
"name": "active",
|
|
7662
|
-
"description": "Activates the positioning logic and shows the popup. When this attribute is removed, the positioning logic is torn\ndown and the popup will be hidden.",
|
|
7663
|
-
"value": { "type": "boolean", "default": "false" }
|
|
7664
|
-
},
|
|
7665
|
-
{
|
|
7666
|
-
"name": "placement",
|
|
7667
|
-
"description": "The preferred placement of the popup. Note that the actual placement will vary as configured to keep the\npanel inside of the viewport.",
|
|
7668
|
-
"value": {
|
|
7669
|
-
"type": "| 'top'\n | 'top-start'\n | 'top-end'\n | 'bottom'\n | 'bottom-start'\n | 'bottom-end'\n | 'right'\n | 'right-start'\n | 'right-end'\n | 'left'\n | 'left-start'\n | 'left-end'",
|
|
7670
|
-
"default": "'top'"
|
|
7671
|
-
}
|
|
7672
|
-
},
|
|
7673
|
-
{
|
|
7674
|
-
"name": "strategy",
|
|
7675
|
-
"description": "Determines how the popup is positioned. The `absolute` strategy works well in most cases, but if overflow is\nclipped, using a `fixed` position strategy can often workaround it.",
|
|
7676
|
-
"value": { "type": "'absolute' | 'fixed'", "default": "'fixed'" }
|
|
7677
|
-
},
|
|
7678
|
-
{
|
|
7679
|
-
"name": "distance",
|
|
7680
|
-
"description": "The distance in pixels from which to offset the panel away from its anchor.",
|
|
7681
|
-
"value": { "type": "number", "default": "0" }
|
|
7682
|
-
},
|
|
7683
|
-
{
|
|
7684
|
-
"name": "skidding",
|
|
7685
|
-
"description": "The distance in pixels from which to offset the panel along its anchor.",
|
|
7686
|
-
"value": { "type": "number", "default": "0" }
|
|
7687
|
-
},
|
|
7688
|
-
{
|
|
7689
|
-
"name": "arrow",
|
|
7690
|
-
"description": "Attaches an arrow to the popup. The arrow's size and color can be customized using the `--arrow-size` and\n`--arrow-color` custom properties. For additional customizations, you can also target the arrow using\n`::part(arrow)` in your stylesheet.",
|
|
7691
|
-
"value": { "type": "boolean", "default": "false" }
|
|
7692
|
-
},
|
|
7693
|
-
{
|
|
7694
|
-
"name": "arrow-placement",
|
|
7695
|
-
"description": "The placement of the arrow. The default is `anchor`, which will align the arrow as close to the center of the\nanchor as possible, considering available space and `arrow-padding`. A value of `start`, `end`, or `center` will\nalign the arrow to the start, end, or center of the popover instead.",
|
|
7696
|
-
"value": {
|
|
7697
|
-
"type": "'start' | 'end' | 'center' | 'anchor'",
|
|
7698
|
-
"default": "'anchor'"
|
|
7699
|
-
}
|
|
7700
|
-
},
|
|
7701
|
-
{
|
|
7702
|
-
"name": "arrow-padding",
|
|
7703
|
-
"description": "The amount of padding between the arrow and the edges of the popup. If the popup has a border-radius, for example,\nthis will prevent it from overflowing the corners.",
|
|
7704
|
-
"value": { "type": "number", "default": "10" }
|
|
7705
|
-
},
|
|
7706
|
-
{
|
|
7707
|
-
"name": "flip",
|
|
7708
|
-
"description": "When set, placement of the popup will flip to the opposite site to keep it in view. You can use\n`flipFallbackPlacements` to further configure how the fallback placement is determined.",
|
|
7709
|
-
"value": { "type": "boolean", "default": "false" }
|
|
7710
|
-
},
|
|
7711
|
-
{
|
|
7712
|
-
"name": "flip-fallback-placements",
|
|
7713
|
-
"description": "If the preferred placement doesn't fit, popup will be tested in these fallback placements until one fits. Must be a\nstring of any number of placements separated by a space, e.g. \"top bottom left\". If no placement fits, the flip\nfallback strategy will be used instead.",
|
|
7714
|
-
"value": { "type": "string", "default": "''" }
|
|
7715
|
-
},
|
|
7716
|
-
{
|
|
7717
|
-
"name": "flip-fallback-strategy",
|
|
7718
|
-
"description": "When neither the preferred placement nor the fallback placements fit, this value will be used to determine whether\nthe popup should be positioned using the best available fit based on available space or as it was initially\npreferred.",
|
|
7719
|
-
"value": {
|
|
7720
|
-
"type": "'best-fit' | 'initial'",
|
|
7721
|
-
"default": "'best-fit'"
|
|
7722
|
-
}
|
|
7723
|
-
},
|
|
7724
|
-
{
|
|
7725
|
-
"name": "flipBoundary",
|
|
7726
|
-
"description": "The flip boundary describes clipping element(s) that overflow will be checked relative to when flipping. By\ndefault, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\nchange the boundary by passing a reference to one or more elements to this property.",
|
|
7727
|
-
"value": { "type": "Element | Element[]" }
|
|
7728
|
-
},
|
|
7729
|
-
{
|
|
7730
|
-
"name": "flip-padding",
|
|
7731
|
-
"description": "The amount of padding, in pixels, to exceed before the flip behavior will occur.",
|
|
7732
|
-
"value": { "type": "number", "default": "0" }
|
|
7733
|
-
},
|
|
7734
|
-
{
|
|
7735
|
-
"name": "shift",
|
|
7736
|
-
"description": "Moves the popup along the axis to keep it in view when clipped.",
|
|
7737
|
-
"value": { "type": "boolean", "default": "false" }
|
|
7738
|
-
},
|
|
7739
|
-
{
|
|
7740
|
-
"name": "shiftBoundary",
|
|
7741
|
-
"description": "The shift boundary describes clipping element(s) that overflow will be checked relative to when shifting. By\ndefault, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\nchange the boundary by passing a reference to one or more elements to this property.",
|
|
7742
|
-
"value": { "type": "Element | Element[]" }
|
|
7743
|
-
},
|
|
7744
|
-
{
|
|
7745
|
-
"name": "shift-padding",
|
|
7746
|
-
"description": "The amount of padding, in pixels, to exceed before the shift behavior will occur.",
|
|
7747
|
-
"value": { "type": "number", "default": "0" }
|
|
7748
|
-
},
|
|
7749
|
-
{
|
|
7750
|
-
"name": "auto-size",
|
|
7751
|
-
"description": "When set, this will cause the popup to automatically resize itself to prevent it from overflowing.",
|
|
7752
|
-
"value": { "type": "'horizontal' | 'vertical' | 'both'" }
|
|
7753
|
-
},
|
|
7754
|
-
{
|
|
7755
|
-
"name": "sync",
|
|
7756
|
-
"description": "Syncs the popup's width or height to that of the anchor element.",
|
|
7757
|
-
"value": { "type": "'width' | 'height' | 'both'" }
|
|
7758
|
-
},
|
|
7759
|
-
{
|
|
7760
|
-
"name": "autoSizeBoundary",
|
|
7761
|
-
"description": "The auto-size boundary describes clipping element(s) that overflow will be checked relative to when resizing. By\ndefault, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\nchange the boundary by passing a reference to one or more elements to this property.",
|
|
7762
|
-
"value": { "type": "Element | Element[]" }
|
|
7763
|
-
},
|
|
7764
|
-
{
|
|
7765
|
-
"name": "auto-size-padding",
|
|
7766
|
-
"description": "The amount of padding, in pixels, to exceed before the auto-size behavior will occur.",
|
|
7767
|
-
"value": { "type": "number", "default": "0" }
|
|
7768
|
-
},
|
|
7769
|
-
{
|
|
7770
|
-
"name": "hover-bridge",
|
|
7771
|
-
"description": "When a gap exists between the anchor and the popup element, this option will add a \"hover bridge\" that fills the\ngap using an invisible element. This makes listening for events such as `mouseenter` and `mouseleave` more sane\nbecause the pointer never technically leaves the element. The hover bridge will only be drawn when the popover is\nactive.",
|
|
7772
|
-
"value": { "type": "boolean", "default": "false" }
|
|
7773
|
-
}
|
|
7774
|
-
],
|
|
7775
|
-
"slots": [
|
|
7776
|
-
{ "name": "", "description": "The default slot." },
|
|
7777
|
-
{ "name": "example", "description": "An example slot." }
|
|
7778
|
-
],
|
|
7779
|
-
"events": [
|
|
7780
|
-
{ "name": "zn-event-name", "description": "Emitted as an example." }
|
|
7781
|
-
],
|
|
7782
|
-
"js": {
|
|
7783
|
-
"properties": [
|
|
7784
|
-
{
|
|
7785
|
-
"name": "popup",
|
|
7786
|
-
"description": "A reference to the internal popup container. Useful for animating and styling the popup with JavaScript.",
|
|
7787
|
-
"type": "HTMLElement"
|
|
7788
|
-
},
|
|
7789
|
-
{
|
|
7790
|
-
"name": "anchor",
|
|
7791
|
-
"description": "The element the popup will be anchored to. If the anchor lives outside of the popup, you can provide the anchor\nelement `id`, a DOM element reference, or a `VirtualElement`. If the anchor lives inside the popup, use the\n`anchor` slot instead.",
|
|
7792
|
-
"type": "Element | string | VirtualElement"
|
|
7793
|
-
},
|
|
7794
|
-
{
|
|
7795
|
-
"name": "active",
|
|
7796
|
-
"description": "Activates the positioning logic and shows the popup. When this attribute is removed, the positioning logic is torn\ndown and the popup will be hidden.",
|
|
7797
|
-
"type": "boolean"
|
|
7798
|
-
},
|
|
7799
|
-
{
|
|
7800
|
-
"name": "placement",
|
|
7801
|
-
"description": "The preferred placement of the popup. Note that the actual placement will vary as configured to keep the\npanel inside of the viewport.",
|
|
7802
|
-
"type": "| 'top'\n | 'top-start'\n | 'top-end'\n | 'bottom'\n | 'bottom-start'\n | 'bottom-end'\n | 'right'\n | 'right-start'\n | 'right-end'\n | 'left'\n | 'left-start'\n | 'left-end'"
|
|
7803
|
-
},
|
|
7804
|
-
{
|
|
7805
|
-
"name": "strategy",
|
|
7806
|
-
"description": "Determines how the popup is positioned. The `absolute` strategy works well in most cases, but if overflow is\nclipped, using a `fixed` position strategy can often workaround it.",
|
|
7807
|
-
"type": "'absolute' | 'fixed'"
|
|
7808
|
-
},
|
|
7809
|
-
{
|
|
7810
|
-
"name": "distance",
|
|
7811
|
-
"description": "The distance in pixels from which to offset the panel away from its anchor.",
|
|
7812
|
-
"type": "number"
|
|
7813
|
-
},
|
|
7814
|
-
{
|
|
7815
|
-
"name": "skidding",
|
|
7816
|
-
"description": "The distance in pixels from which to offset the panel along its anchor.",
|
|
7817
|
-
"type": "number"
|
|
7818
|
-
},
|
|
7819
|
-
{
|
|
7820
|
-
"name": "arrow",
|
|
7821
|
-
"description": "Attaches an arrow to the popup. The arrow's size and color can be customized using the `--arrow-size` and\n`--arrow-color` custom properties. For additional customizations, you can also target the arrow using\n`::part(arrow)` in your stylesheet.",
|
|
7822
|
-
"type": "boolean"
|
|
7823
|
-
},
|
|
7824
|
-
{
|
|
7825
|
-
"name": "arrowPlacement",
|
|
7826
|
-
"description": "The placement of the arrow. The default is `anchor`, which will align the arrow as close to the center of the\nanchor as possible, considering available space and `arrow-padding`. A value of `start`, `end`, or `center` will\nalign the arrow to the start, end, or center of the popover instead.",
|
|
7827
|
-
"type": "'start' | 'end' | 'center' | 'anchor'"
|
|
7828
|
-
},
|
|
7829
|
-
{
|
|
7830
|
-
"name": "arrowPadding",
|
|
7831
|
-
"description": "The amount of padding between the arrow and the edges of the popup. If the popup has a border-radius, for example,\nthis will prevent it from overflowing the corners.",
|
|
7832
|
-
"type": "number"
|
|
7833
|
-
},
|
|
7834
|
-
{
|
|
7835
|
-
"name": "flip",
|
|
7836
|
-
"description": "When set, placement of the popup will flip to the opposite site to keep it in view. You can use\n`flipFallbackPlacements` to further configure how the fallback placement is determined.",
|
|
7837
|
-
"type": "boolean"
|
|
7838
|
-
},
|
|
7839
|
-
{
|
|
7840
|
-
"name": "flipFallbackPlacements",
|
|
7841
|
-
"description": "If the preferred placement doesn't fit, popup will be tested in these fallback placements until one fits. Must be a\nstring of any number of placements separated by a space, e.g. \"top bottom left\". If no placement fits, the flip\nfallback strategy will be used instead.",
|
|
7842
|
-
"type": "string"
|
|
7843
|
-
},
|
|
7844
|
-
{
|
|
7845
|
-
"name": "flipFallbackStrategy",
|
|
7846
|
-
"description": "When neither the preferred placement nor the fallback placements fit, this value will be used to determine whether\nthe popup should be positioned using the best available fit based on available space or as it was initially\npreferred.",
|
|
7847
|
-
"type": "'best-fit' | 'initial'"
|
|
7848
|
-
},
|
|
7849
|
-
{
|
|
7850
|
-
"name": "flipBoundary",
|
|
7851
|
-
"description": "The flip boundary describes clipping element(s) that overflow will be checked relative to when flipping. By\ndefault, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\nchange the boundary by passing a reference to one or more elements to this property.",
|
|
7852
|
-
"type": "Element | Element[]"
|
|
7853
|
-
},
|
|
7854
|
-
{
|
|
7855
|
-
"name": "flipPadding",
|
|
7856
|
-
"description": "The amount of padding, in pixels, to exceed before the flip behavior will occur.",
|
|
7857
|
-
"type": "number"
|
|
7858
|
-
},
|
|
7859
|
-
{
|
|
7860
|
-
"name": "shift",
|
|
7861
|
-
"description": "Moves the popup along the axis to keep it in view when clipped.",
|
|
7862
|
-
"type": "boolean"
|
|
7863
|
-
},
|
|
7864
|
-
{
|
|
7865
|
-
"name": "shiftBoundary",
|
|
7866
|
-
"description": "The shift boundary describes clipping element(s) that overflow will be checked relative to when shifting. By\ndefault, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\nchange the boundary by passing a reference to one or more elements to this property.",
|
|
7867
|
-
"type": "Element | Element[]"
|
|
7868
|
-
},
|
|
7869
|
-
{
|
|
7870
|
-
"name": "shiftPadding",
|
|
7871
|
-
"description": "The amount of padding, in pixels, to exceed before the shift behavior will occur.",
|
|
7872
|
-
"type": "number"
|
|
7873
|
-
},
|
|
7874
|
-
{
|
|
7875
|
-
"name": "autoSize",
|
|
7876
|
-
"description": "When set, this will cause the popup to automatically resize itself to prevent it from overflowing.",
|
|
7877
|
-
"type": "'horizontal' | 'vertical' | 'both'"
|
|
7878
|
-
},
|
|
7879
|
-
{
|
|
7880
|
-
"name": "sync",
|
|
7881
|
-
"description": "Syncs the popup's width or height to that of the anchor element.",
|
|
7882
|
-
"type": "'width' | 'height' | 'both'"
|
|
7883
|
-
},
|
|
7884
|
-
{
|
|
7885
|
-
"name": "autoSizeBoundary",
|
|
7886
|
-
"description": "The auto-size boundary describes clipping element(s) that overflow will be checked relative to when resizing. By\ndefault, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\nchange the boundary by passing a reference to one or more elements to this property.",
|
|
7887
|
-
"type": "Element | Element[]"
|
|
7888
|
-
},
|
|
7889
|
-
{
|
|
7890
|
-
"name": "autoSizePadding",
|
|
7891
|
-
"description": "The amount of padding, in pixels, to exceed before the auto-size behavior will occur.",
|
|
7892
|
-
"type": "number"
|
|
7893
|
-
},
|
|
7894
|
-
{
|
|
7895
|
-
"name": "hoverBridge",
|
|
7896
|
-
"description": "When a gap exists between the anchor and the popup element, this option will add a \"hover bridge\" that fills the\ngap using an invisible element. This makes listening for events such as `mouseenter` and `mouseleave` more sane\nbecause the pointer never technically leaves the element. The hover bridge will only be drawn when the popover is\nactive.",
|
|
7897
|
-
"type": "boolean"
|
|
7898
|
-
},
|
|
7899
|
-
{ "name": "handleAnchorHover" }
|
|
7900
|
-
],
|
|
7901
|
-
"events": [
|
|
7902
|
-
{
|
|
7903
|
-
"name": "zn-event-name",
|
|
7904
|
-
"description": "Emitted as an example."
|
|
7905
|
-
}
|
|
7906
|
-
]
|
|
7907
|
-
}
|
|
7908
|
-
},
|
|
7909
7909
|
{
|
|
7910
7910
|
"name": "zn-progress-bar",
|
|
7911
7911
|
"description": "Progress bars provide visual feedback about the completion status of a task or process.\n---\n\n\n### **CSS Properties:**\n - **--zn-border-color** - The color of the progress bar background track. _(default: undefined)_\n- **--zn-progress-bar-color** - The color of the progress bar fill. _(default: undefined)_\n- **--zn-text-heading** - The color of the caption text. _(default: undefined)_\n- **--zn-text** - The color of the progress percentage and description text. _(default: undefined)_\n- **--zn-spacing-x-small** - The spacing between header/footer and the progress bar. _(default: undefined)_\n\n### **CSS Parts:**\n - **header** - The header container that contains the caption and progress text.\n- **caption** - The caption text element.\n- **progress** - The progress percentage text element.\n- **bar** - The SVG element containing the progress bar.\n- **track** - The background track of the progress bar.\n- **fill** - The filled portion of the progress bar indicating progress.\n- **footer** - The footer container that contains the description.\n- **info** - The description text element.",
|