@kubex/zinc 1.1.135 → 1.1.136
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 +1345 -1345
- package/dist/vscode.html-custom-data.json +163 -163
- package/dist/web-types.json +359 -359
- package/dist/zn.min.js +2 -2
- package/package.json +1 -1
|
@@ -138,6 +138,21 @@
|
|
|
138
138
|
}
|
|
139
139
|
]
|
|
140
140
|
},
|
|
141
|
+
{
|
|
142
|
+
"name": "zn-bulk-actions",
|
|
143
|
+
"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.",
|
|
144
|
+
"attributes": [
|
|
145
|
+
{ "name": "name", "values": [] },
|
|
146
|
+
{ "name": "value", "values": [{ "name": "PropertyKey" }] },
|
|
147
|
+
{ "name": "actions", "values": [{ "name": "BulkActionData" }] }
|
|
148
|
+
],
|
|
149
|
+
"references": [
|
|
150
|
+
{
|
|
151
|
+
"name": "Documentation",
|
|
152
|
+
"url": "https://zinc.style/components/bulk-actions"
|
|
153
|
+
}
|
|
154
|
+
]
|
|
155
|
+
},
|
|
141
156
|
{
|
|
142
157
|
"name": "zn-background",
|
|
143
158
|
"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.",
|
|
@@ -190,21 +205,6 @@
|
|
|
190
205
|
}
|
|
191
206
|
]
|
|
192
207
|
},
|
|
193
|
-
{
|
|
194
|
-
"name": "zn-bulk-actions",
|
|
195
|
-
"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.",
|
|
196
|
-
"attributes": [
|
|
197
|
-
{ "name": "name", "values": [] },
|
|
198
|
-
{ "name": "value", "values": [{ "name": "PropertyKey" }] },
|
|
199
|
-
{ "name": "actions", "values": [{ "name": "BulkActionData" }] }
|
|
200
|
-
],
|
|
201
|
-
"references": [
|
|
202
|
-
{
|
|
203
|
-
"name": "Documentation",
|
|
204
|
-
"url": "https://zinc.style/components/bulk-actions"
|
|
205
|
-
}
|
|
206
|
-
]
|
|
207
|
-
},
|
|
208
208
|
{
|
|
209
209
|
"name": "zn-button",
|
|
210
210
|
"description": "Buttons represent actions that are available to the user.\n---\n\n\n### **Events:**\n - **zn-blur** - Emitted when the button loses focus.\n- **zn-focus** - Emitted when the button gains focus.\n- **zn-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Slots:**\n - _default_ - The button's label.\n- **prefix** - A presentational prefix icon or similar element.\n- **suffix** - A presentational suffix icon or similar element.\n- **cancel** - Slot for custom cancel button/content when autoClick is active.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **prefix** - The container that wraps the prefix.\n- **label** - The button's label.\n- **suffix** - The container that wraps the suffix.\n- **caret** - The button's caret icon, an `<zn-icon>` element.\n- **spinner** - The spinner that shows when the button is in the loading state.",
|
|
@@ -3086,154 +3086,6 @@
|
|
|
3086
3086
|
}
|
|
3087
3087
|
]
|
|
3088
3088
|
},
|
|
3089
|
-
{
|
|
3090
|
-
"name": "zn-preview-frame",
|
|
3091
|
-
"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.",
|
|
3092
|
-
"attributes": [
|
|
3093
|
-
{
|
|
3094
|
-
"name": "src",
|
|
3095
|
-
"description": "URL of the preview shell page (tokened embed URL).",
|
|
3096
|
-
"values": []
|
|
3097
|
-
},
|
|
3098
|
-
{
|
|
3099
|
-
"name": "frame-origin",
|
|
3100
|
-
"description": "Expected origin of the iframe; all postMessage traffic is checked against it.",
|
|
3101
|
-
"values": []
|
|
3102
|
-
},
|
|
3103
|
-
{
|
|
3104
|
-
"name": "data-uri",
|
|
3105
|
-
"description": "Endpoint returning the hp-preview:config payload JSON. The console proxy rewrites this attribute to an app-prefixed path for proper fetch resolution.",
|
|
3106
|
-
"values": []
|
|
3107
|
-
},
|
|
3108
|
-
{
|
|
3109
|
-
"name": "watch",
|
|
3110
|
-
"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.",
|
|
3111
|
-
"values": []
|
|
3112
|
-
},
|
|
3113
|
-
{
|
|
3114
|
-
"name": "refresh-on",
|
|
3115
|
-
"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.",
|
|
3116
|
-
"values": []
|
|
3117
|
-
},
|
|
3118
|
-
{
|
|
3119
|
-
"name": "debounce",
|
|
3120
|
-
"description": "Debounce in ms between a form change and its auto-save.",
|
|
3121
|
-
"values": []
|
|
3122
|
-
},
|
|
3123
|
-
{
|
|
3124
|
-
"name": "zoom",
|
|
3125
|
-
"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.",
|
|
3126
|
-
"values": []
|
|
3127
|
-
},
|
|
3128
|
-
{
|
|
3129
|
-
"name": "min-height",
|
|
3130
|
-
"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.",
|
|
3131
|
-
"values": []
|
|
3132
|
-
},
|
|
3133
|
-
{
|
|
3134
|
-
"name": "fill",
|
|
3135
|
-
"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.",
|
|
3136
|
-
"values": []
|
|
3137
|
-
},
|
|
3138
|
-
{
|
|
3139
|
-
"name": "device",
|
|
3140
|
-
"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.",
|
|
3141
|
-
"values": [{ "name": "PreviewFrameDevice" }]
|
|
3142
|
-
},
|
|
3143
|
-
{
|
|
3144
|
-
"name": "backdrop",
|
|
3145
|
-
"description": "Backdrop behind the stage: `dots` (default) is the canvas dot grid; `panel` is a plain `rgb(var(--zn-panel))` fill.",
|
|
3146
|
-
"values": [{ "name": "dots" }, { "name": "panel" }]
|
|
3147
|
-
},
|
|
3148
|
-
{
|
|
3149
|
-
"name": "interactive",
|
|
3150
|
-
"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.",
|
|
3151
|
-
"values": []
|
|
3152
|
-
}
|
|
3153
|
-
],
|
|
3154
|
-
"references": [
|
|
3155
|
-
{
|
|
3156
|
-
"name": "Documentation",
|
|
3157
|
-
"url": "https://zinc.style/components/preview-frame"
|
|
3158
|
-
}
|
|
3159
|
-
]
|
|
3160
|
-
},
|
|
3161
|
-
{
|
|
3162
|
-
"name": "zn-priority-list",
|
|
3163
|
-
"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.",
|
|
3164
|
-
"attributes": [
|
|
3165
|
-
{
|
|
3166
|
-
"name": "name",
|
|
3167
|
-
"description": "The name prefix for form submission. Each item generates a hidden input named `{name}[{itemValue}]`\nwith the priority number as its value.",
|
|
3168
|
-
"values": []
|
|
3169
|
-
},
|
|
3170
|
-
{
|
|
3171
|
-
"name": "value",
|
|
3172
|
-
"description": "The current ordered list of item keys, reflecting the visual order. This is the source of truth for ordering.\nEach entry should match a `value` attribute on a slotted child element.",
|
|
3173
|
-
"values": [{ "name": "string[]" }]
|
|
3174
|
-
},
|
|
3175
|
-
{
|
|
3176
|
-
"name": "label",
|
|
3177
|
-
"description": "The component's label. Required for proper accessibility.",
|
|
3178
|
-
"values": []
|
|
3179
|
-
},
|
|
3180
|
-
{
|
|
3181
|
-
"name": "label-tooltip",
|
|
3182
|
-
"description": "Text that appears in a tooltip next to the label.",
|
|
3183
|
-
"values": []
|
|
3184
|
-
},
|
|
3185
|
-
{
|
|
3186
|
-
"name": "help-text",
|
|
3187
|
-
"description": "Help text that describes how to use the component.",
|
|
3188
|
-
"values": []
|
|
3189
|
-
},
|
|
3190
|
-
{
|
|
3191
|
-
"name": "form",
|
|
3192
|
-
"description": "Associates the control with a form by id. The form must be in the same document or shadow root.",
|
|
3193
|
-
"values": []
|
|
3194
|
-
},
|
|
3195
|
-
{
|
|
3196
|
-
"name": "size",
|
|
3197
|
-
"description": "The size of the list items.",
|
|
3198
|
-
"values": [
|
|
3199
|
-
{ "name": "small" },
|
|
3200
|
-
{ "name": "medium" },
|
|
3201
|
-
{ "name": "large" }
|
|
3202
|
-
]
|
|
3203
|
-
},
|
|
3204
|
-
{
|
|
3205
|
-
"name": "disabled",
|
|
3206
|
-
"description": "Whether the priority list is disabled.",
|
|
3207
|
-
"values": []
|
|
3208
|
-
},
|
|
3209
|
-
{
|
|
3210
|
-
"name": "required",
|
|
3211
|
-
"description": "Ensures the form control has a value before allowing submission.",
|
|
3212
|
-
"values": []
|
|
3213
|
-
},
|
|
3214
|
-
{
|
|
3215
|
-
"name": "priority-start",
|
|
3216
|
-
"description": "The starting priority number. Defaults to 1.",
|
|
3217
|
-
"values": []
|
|
3218
|
-
},
|
|
3219
|
-
{
|
|
3220
|
-
"name": "formaction",
|
|
3221
|
-
"description": "When set, the associated form will be submitted with the given action URL whenever items are reordered.\nIf set to an empty string, the form will be submitted using its existing action.",
|
|
3222
|
-
"values": []
|
|
3223
|
-
},
|
|
3224
|
-
{
|
|
3225
|
-
"name": "order",
|
|
3226
|
-
"description": "A comma-separated list of item keys defining the initial display order.\nKeys must match the `value` attributes on slotted children.\nAny slotted items not listed are appended at the end in DOM order.",
|
|
3227
|
-
"values": []
|
|
3228
|
-
}
|
|
3229
|
-
],
|
|
3230
|
-
"references": [
|
|
3231
|
-
{
|
|
3232
|
-
"name": "Documentation",
|
|
3233
|
-
"url": "https://zinc.style/components/priority-list"
|
|
3234
|
-
}
|
|
3235
|
-
]
|
|
3236
|
-
},
|
|
3237
3089
|
{
|
|
3238
3090
|
"name": "zn-popup",
|
|
3239
3091
|
"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.",
|
|
@@ -3383,6 +3235,154 @@
|
|
|
3383
3235
|
}
|
|
3384
3236
|
]
|
|
3385
3237
|
},
|
|
3238
|
+
{
|
|
3239
|
+
"name": "zn-preview-frame",
|
|
3240
|
+
"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.",
|
|
3241
|
+
"attributes": [
|
|
3242
|
+
{
|
|
3243
|
+
"name": "src",
|
|
3244
|
+
"description": "URL of the preview shell page (tokened embed URL).",
|
|
3245
|
+
"values": []
|
|
3246
|
+
},
|
|
3247
|
+
{
|
|
3248
|
+
"name": "frame-origin",
|
|
3249
|
+
"description": "Expected origin of the iframe; all postMessage traffic is checked against it.",
|
|
3250
|
+
"values": []
|
|
3251
|
+
},
|
|
3252
|
+
{
|
|
3253
|
+
"name": "data-uri",
|
|
3254
|
+
"description": "Endpoint returning the hp-preview:config payload JSON. The console proxy rewrites this attribute to an app-prefixed path for proper fetch resolution.",
|
|
3255
|
+
"values": []
|
|
3256
|
+
},
|
|
3257
|
+
{
|
|
3258
|
+
"name": "watch",
|
|
3259
|
+
"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.",
|
|
3260
|
+
"values": []
|
|
3261
|
+
},
|
|
3262
|
+
{
|
|
3263
|
+
"name": "refresh-on",
|
|
3264
|
+
"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.",
|
|
3265
|
+
"values": []
|
|
3266
|
+
},
|
|
3267
|
+
{
|
|
3268
|
+
"name": "debounce",
|
|
3269
|
+
"description": "Debounce in ms between a form change and its auto-save.",
|
|
3270
|
+
"values": []
|
|
3271
|
+
},
|
|
3272
|
+
{
|
|
3273
|
+
"name": "zoom",
|
|
3274
|
+
"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.",
|
|
3275
|
+
"values": []
|
|
3276
|
+
},
|
|
3277
|
+
{
|
|
3278
|
+
"name": "min-height",
|
|
3279
|
+
"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.",
|
|
3280
|
+
"values": []
|
|
3281
|
+
},
|
|
3282
|
+
{
|
|
3283
|
+
"name": "fill",
|
|
3284
|
+
"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.",
|
|
3285
|
+
"values": []
|
|
3286
|
+
},
|
|
3287
|
+
{
|
|
3288
|
+
"name": "device",
|
|
3289
|
+
"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.",
|
|
3290
|
+
"values": [{ "name": "PreviewFrameDevice" }]
|
|
3291
|
+
},
|
|
3292
|
+
{
|
|
3293
|
+
"name": "backdrop",
|
|
3294
|
+
"description": "Backdrop behind the stage: `dots` (default) is the canvas dot grid; `panel` is a plain `rgb(var(--zn-panel))` fill.",
|
|
3295
|
+
"values": [{ "name": "dots" }, { "name": "panel" }]
|
|
3296
|
+
},
|
|
3297
|
+
{
|
|
3298
|
+
"name": "interactive",
|
|
3299
|
+
"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.",
|
|
3300
|
+
"values": []
|
|
3301
|
+
}
|
|
3302
|
+
],
|
|
3303
|
+
"references": [
|
|
3304
|
+
{
|
|
3305
|
+
"name": "Documentation",
|
|
3306
|
+
"url": "https://zinc.style/components/preview-frame"
|
|
3307
|
+
}
|
|
3308
|
+
]
|
|
3309
|
+
},
|
|
3310
|
+
{
|
|
3311
|
+
"name": "zn-priority-list",
|
|
3312
|
+
"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.",
|
|
3313
|
+
"attributes": [
|
|
3314
|
+
{
|
|
3315
|
+
"name": "name",
|
|
3316
|
+
"description": "The name prefix for form submission. Each item generates a hidden input named `{name}[{itemValue}]`\nwith the priority number as its value.",
|
|
3317
|
+
"values": []
|
|
3318
|
+
},
|
|
3319
|
+
{
|
|
3320
|
+
"name": "value",
|
|
3321
|
+
"description": "The current ordered list of item keys, reflecting the visual order. This is the source of truth for ordering.\nEach entry should match a `value` attribute on a slotted child element.",
|
|
3322
|
+
"values": [{ "name": "string[]" }]
|
|
3323
|
+
},
|
|
3324
|
+
{
|
|
3325
|
+
"name": "label",
|
|
3326
|
+
"description": "The component's label. Required for proper accessibility.",
|
|
3327
|
+
"values": []
|
|
3328
|
+
},
|
|
3329
|
+
{
|
|
3330
|
+
"name": "label-tooltip",
|
|
3331
|
+
"description": "Text that appears in a tooltip next to the label.",
|
|
3332
|
+
"values": []
|
|
3333
|
+
},
|
|
3334
|
+
{
|
|
3335
|
+
"name": "help-text",
|
|
3336
|
+
"description": "Help text that describes how to use the component.",
|
|
3337
|
+
"values": []
|
|
3338
|
+
},
|
|
3339
|
+
{
|
|
3340
|
+
"name": "form",
|
|
3341
|
+
"description": "Associates the control with a form by id. The form must be in the same document or shadow root.",
|
|
3342
|
+
"values": []
|
|
3343
|
+
},
|
|
3344
|
+
{
|
|
3345
|
+
"name": "size",
|
|
3346
|
+
"description": "The size of the list items.",
|
|
3347
|
+
"values": [
|
|
3348
|
+
{ "name": "small" },
|
|
3349
|
+
{ "name": "medium" },
|
|
3350
|
+
{ "name": "large" }
|
|
3351
|
+
]
|
|
3352
|
+
},
|
|
3353
|
+
{
|
|
3354
|
+
"name": "disabled",
|
|
3355
|
+
"description": "Whether the priority list is disabled.",
|
|
3356
|
+
"values": []
|
|
3357
|
+
},
|
|
3358
|
+
{
|
|
3359
|
+
"name": "required",
|
|
3360
|
+
"description": "Ensures the form control has a value before allowing submission.",
|
|
3361
|
+
"values": []
|
|
3362
|
+
},
|
|
3363
|
+
{
|
|
3364
|
+
"name": "priority-start",
|
|
3365
|
+
"description": "The starting priority number. Defaults to 1.",
|
|
3366
|
+
"values": []
|
|
3367
|
+
},
|
|
3368
|
+
{
|
|
3369
|
+
"name": "formaction",
|
|
3370
|
+
"description": "When set, the associated form will be submitted with the given action URL whenever items are reordered.\nIf set to an empty string, the form will be submitted using its existing action.",
|
|
3371
|
+
"values": []
|
|
3372
|
+
},
|
|
3373
|
+
{
|
|
3374
|
+
"name": "order",
|
|
3375
|
+
"description": "A comma-separated list of item keys defining the initial display order.\nKeys must match the `value` attributes on slotted children.\nAny slotted items not listed are appended at the end in DOM order.",
|
|
3376
|
+
"values": []
|
|
3377
|
+
}
|
|
3378
|
+
],
|
|
3379
|
+
"references": [
|
|
3380
|
+
{
|
|
3381
|
+
"name": "Documentation",
|
|
3382
|
+
"url": "https://zinc.style/components/priority-list"
|
|
3383
|
+
}
|
|
3384
|
+
]
|
|
3385
|
+
},
|
|
3386
3386
|
{
|
|
3387
3387
|
"name": "zn-progress-bar",
|
|
3388
3388
|
"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.",
|