@kubex/zinc 1.1.92 → 1.1.95
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 +2880 -453
- package/dist/vscode.html-custom-data.json +209 -22
- package/dist/web-types.json +452 -39
- package/dist/zn.d.ts +633 -61
- package/dist/zn.min.css +1 -1
- package/dist/zn.min.js +865 -560
- package/docs/pages/components/page-builder.md +143 -19
- package/docs/pages/components/schedule-builder.md +345 -0
- package/docs/pages/components/slash-menu.md +132 -6
- package/docs/pages/components/textarea.md +16 -0
- package/package.json +1 -1
- package/scss/_root.scss +7 -1
- package/src/components/alert/alert.scss +9 -13
- package/src/components/button/button.scss +5 -2
- package/src/components/chip/chip.scss +1 -1
- package/src/components/icon-picker/icon-picker.component.ts +1 -1
- package/src/components/inline-edit/inline-edit.component.ts +6 -1
- package/src/components/input/input.component.ts +12 -2
- package/src/components/linked-select/linked-select.component.ts +22 -5
- package/src/components/page/page.scss +20 -9
- package/src/components/page-builder/modules/page-section-card/page-section-card.component.ts +16 -9
- package/src/components/page-builder/modules/page-section-card/page-section-card.scss +13 -0
- package/src/components/page-builder/modules/page-section-card/page-section-card.test.ts +9 -0
- package/src/components/page-builder/page-builder.component.ts +535 -232
- package/src/components/page-builder/page-builder.scss +230 -19
- package/src/components/page-builder/page-builder.test.ts +790 -110
- package/src/components/page-builder/page-tree.test.ts +483 -0
- package/src/components/page-builder/page-tree.ts +329 -0
- package/src/components/page-builder/page.types.ts +98 -10
- package/src/components/page-nav/page-nav.scss +9 -1
- package/src/components/panel/panel.component.ts +5 -1
- package/src/components/priority-list/priority-list.component.ts +1 -0
- package/src/components/priority-list/priority-list.scss +2 -1
- package/src/components/remarkd-editor/remarkd-editor.component.ts +198 -9
- package/src/components/remarkd-editor/remarkd-editor.scss +81 -0
- package/src/components/remarkd-editor/remarkd-editor.test.ts +179 -0
- package/src/components/schedule-builder/index.ts +12 -0
- package/src/components/schedule-builder/schedule-builder.component.ts +1543 -0
- package/src/components/schedule-builder/schedule-builder.scss +448 -0
- package/src/components/schedule-builder/schedule-builder.test.ts +344 -0
- package/src/components/settings-container/settings-container.scss +2 -1
- package/src/components/slash-item/slash-item.component.ts +1 -1
- package/src/components/slash-menu/slash-menu-items.ts +48 -0
- package/src/components/slash-menu/slash-menu.component.ts +134 -27
- package/src/components/slash-menu/slash-menu.scss +90 -12
- package/src/components/slash-menu/slash-menu.test.ts +107 -0
- package/src/components/textarea/textarea.component.ts +12 -2
- package/src/components/textarea/textarea.test.ts +2 -2
- package/src/components/toggle/toggle.component.ts +2 -1
- package/src/components/translations/translations.component.ts +5 -1
- package/src/zinc.ts +1 -0
- package/docs/superpowers/plans/2026-08-03-theme-editor.md +0 -1536
- package/docs/superpowers/specs/2026-08-03-theme-editor-design.md +0 -327
|
@@ -13,17 +13,6 @@
|
|
|
13
13
|
}
|
|
14
14
|
]
|
|
15
15
|
},
|
|
16
|
-
{
|
|
17
|
-
"name": "zn-action-bar",
|
|
18
|
-
"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.",
|
|
19
|
-
"attributes": [],
|
|
20
|
-
"references": [
|
|
21
|
-
{
|
|
22
|
-
"name": "Documentation",
|
|
23
|
-
"url": "https://zinc.style/components/action-bar"
|
|
24
|
-
}
|
|
25
|
-
]
|
|
26
|
-
},
|
|
27
16
|
{
|
|
28
17
|
"name": "zn-alert",
|
|
29
18
|
"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.",
|
|
@@ -64,6 +53,17 @@
|
|
|
64
53
|
}
|
|
65
54
|
]
|
|
66
55
|
},
|
|
56
|
+
{
|
|
57
|
+
"name": "zn-action-bar",
|
|
58
|
+
"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.",
|
|
59
|
+
"attributes": [],
|
|
60
|
+
"references": [
|
|
61
|
+
{
|
|
62
|
+
"name": "Documentation",
|
|
63
|
+
"url": "https://zinc.style/components/action-bar"
|
|
64
|
+
}
|
|
65
|
+
]
|
|
66
|
+
},
|
|
67
67
|
{
|
|
68
68
|
"name": "zn-animated-button",
|
|
69
69
|
"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",
|
|
@@ -1961,7 +1961,7 @@
|
|
|
1961
1961
|
},
|
|
1962
1962
|
{
|
|
1963
1963
|
"name": "slash-heading",
|
|
1964
|
-
"description": "The
|
|
1964
|
+
"description": "The name the slash menu's list is announced by.",
|
|
1965
1965
|
"values": []
|
|
1966
1966
|
},
|
|
1967
1967
|
{
|
|
@@ -1969,6 +1969,11 @@
|
|
|
1969
1969
|
"description": "Hides the insertion keys normally shown against the slash menu's items.",
|
|
1970
1970
|
"values": []
|
|
1971
1971
|
},
|
|
1972
|
+
{
|
|
1973
|
+
"name": "slash-recent-key",
|
|
1974
|
+
"description": "Lists the slash menu items most recently chosen here above the rest, remembered under this key.",
|
|
1975
|
+
"values": []
|
|
1976
|
+
},
|
|
1972
1977
|
{
|
|
1973
1978
|
"name": "options",
|
|
1974
1979
|
"values": [{ "name": "{ [key: string]: string }" }]
|
|
@@ -2266,7 +2271,7 @@
|
|
|
2266
2271
|
},
|
|
2267
2272
|
{
|
|
2268
2273
|
"name": "slash-heading",
|
|
2269
|
-
"description": "The
|
|
2274
|
+
"description": "The name the slash menu's list is announced by.",
|
|
2270
2275
|
"values": []
|
|
2271
2276
|
},
|
|
2272
2277
|
{
|
|
@@ -2274,6 +2279,11 @@
|
|
|
2274
2279
|
"description": "Hides the insertion keys normally shown against the slash menu's items.",
|
|
2275
2280
|
"values": []
|
|
2276
2281
|
},
|
|
2282
|
+
{
|
|
2283
|
+
"name": "slash-recent-key",
|
|
2284
|
+
"description": "Lists the items most recently chosen here above the rest, remembered in `localStorage` under this\nkey. Share a key between the fields that should share a history; leave unset to offer no such list.",
|
|
2285
|
+
"values": []
|
|
2286
|
+
},
|
|
2277
2287
|
{
|
|
2278
2288
|
"name": "trigger-submit",
|
|
2279
2289
|
"description": "When enabled, pressing enter will always submit the surrounding form, even when the form uses\nenter-navigation to move between fields.",
|
|
@@ -2399,7 +2409,12 @@
|
|
|
2399
2409
|
{ "name": "options", "values": [{ "name": "linkedSelectOptions" }] },
|
|
2400
2410
|
{ "name": "linked-select", "values": [] },
|
|
2401
2411
|
{ "name": "cache-key", "values": [] },
|
|
2402
|
-
{ "name": "label", "values": [] }
|
|
2412
|
+
{ "name": "label", "values": [] },
|
|
2413
|
+
{
|
|
2414
|
+
"name": "select-first",
|
|
2415
|
+
"description": "Automatically select the first option of the linked group when no value is set.",
|
|
2416
|
+
"values": []
|
|
2417
|
+
}
|
|
2403
2418
|
],
|
|
2404
2419
|
"references": [
|
|
2405
2420
|
{
|
|
@@ -2744,7 +2759,7 @@
|
|
|
2744
2759
|
},
|
|
2745
2760
|
{
|
|
2746
2761
|
"name": "zn-page-builder",
|
|
2747
|
-
"description": "A config-driven page composer: a palette of predefined section types, a linear\ncanvas of section cards, and an inspector for editing each section's content.\n---\n\n\n### **Events:**\n - **zn-page-change** - Emitted whenever the page state changes. `event.detail.state` is the new PageState.\n- **zn-page-selection-change** - Emitted when the selected section changes. `event.detail.sectionId`.\n\n### **Methods:**\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- **addSection(type: _string_, index: _number_): _PageSection | null_** - Adds a section of a registered type at `index` (default: end). Returns null for unknown types.\n- **
|
|
2762
|
+
"description": "A config-driven page composer: a palette of predefined section types, a linear\ncanvas of section cards, and an inspector for editing each section's content.\n---\n\n\n### **Events:**\n - **zn-page-change** - Emitted whenever the page state changes. `event.detail.state` is the new PageState.\n- **zn-page-selection-change** - Emitted when the selected section changes. `event.detail.sectionId`.\n\n### **Methods:**\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- **addSection(type: _string_, index: _number_): _PageSection | null_** - Adds a section of a registered type at `index` (default: end). Returns null for unknown types.\n- **addSectionToCell(type: _string_, containerId: _string_, cellIndex: _number_, insertIndex): _PageSection | null_** - Adds a new section of a registered type into a container cell.\n\n### **Slots:**\n - **config** - `<template type=\"…\">` declarations; never displayed. Each template's attributes (type, label, icon, icon-library, color, category, description, container, columns, widths, grow, slots, accepts) declare a palette entry and its content declares the inspector form for that type. `container` makes the type a container whose editor-configurable layout starts from `columns` (seeds equal widths) or `widths` (explicit weights, wins over `columns`); `grow` seeds a growable instance. `accepts` is a comma-separated list of the type keys its cells allow — omitted on a `container` type, any type is allowed subject to the nesting cap. `slots` is\n- **header-left** - Actions shown on the left of the header bar.\n- **header-right** - Actions shown on the right of the header bar.\n\n### **CSS Parts:**\n - **base** - The grid wrapper.\n- **header** - The full-width header action bar (only rendered when header slots are filled).\n- **palette** - The left palette panel.\n- **canvas** - The centre section-card canvas.\n- **inspector** - The right panel while a section is selected.\n- **inspector-header** - The inspector's fixed header (icon, section name, type, close).\n- **inspector-body** - The inspector's scrolling form area.",
|
|
2748
2763
|
"attributes": [
|
|
2749
2764
|
{
|
|
2750
2765
|
"name": "name",
|
|
@@ -2763,6 +2778,11 @@
|
|
|
2763
2778
|
},
|
|
2764
2779
|
{ "name": "heading", "values": [] },
|
|
2765
2780
|
{ "name": "subheading", "values": [] },
|
|
2781
|
+
{
|
|
2782
|
+
"name": "required-first",
|
|
2783
|
+
"description": "Section type key that must lead the page. The builder hoists an existing section of\nthat type to the top, or inserts an empty one, and pins it there: it can't be\nremoved, reordered or dragged into a slot, and nothing can be dropped above it.\nIts content stays fully editable in the inspector.",
|
|
2784
|
+
"values": []
|
|
2785
|
+
},
|
|
2766
2786
|
{
|
|
2767
2787
|
"name": "palette-collapsed",
|
|
2768
2788
|
"description": "Collapses the left palette. Auto-set when the builder becomes narrow.",
|
|
@@ -3091,7 +3111,7 @@
|
|
|
3091
3111
|
},
|
|
3092
3112
|
{
|
|
3093
3113
|
"name": "zn-priority-list",
|
|
3094
|
-
"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-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.",
|
|
3114
|
+
"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.",
|
|
3095
3115
|
"attributes": [
|
|
3096
3116
|
{
|
|
3097
3117
|
"name": "name",
|
|
@@ -3398,8 +3418,13 @@
|
|
|
3398
3418
|
},
|
|
3399
3419
|
{
|
|
3400
3420
|
"name": "zn-remarkd-editor",
|
|
3401
|
-
"description": "A Notion-style block editor for remarkd content. Blocks render inline; click one to edit its source.\n---\n\n\n### **Events:**\n - **zn-input** - Emitted on each keystroke while editing a block.\n- **zn-change** - Emitted when a block edit is committed and the value changes.\n\n### **Methods:**\n - **focus()** - Starts editing the first block, or a new block if the document is empty.\n- **blur()** - Commits any in-progress block or raw edit.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **toolbar** - The always-visible block-insert toolbar.\n- **raw-toggle** - The button that switches between the block view and the raw source view.\n- **block** - A rendered block wrapper.\n- **rendered** - The rendered remarkd output of a block.\n- **input** - The textarea shown while editing a block.\n- **raw** - The full-document textarea shown in raw source mode.\n- **slash-menu** - The `zn-slash-menu` opened by typing \"/\" in an empty block.\n- **image-controls** - The caption / alignment / size panel shown when an image block is clicked.",
|
|
3421
|
+
"description": "A Notion-style block editor for remarkd content. Blocks render inline; click one to edit its source.\n---\n\n\n### **Events:**\n - **zn-input** - Emitted on each keystroke while editing a block.\n- **zn-change** - Emitted when a block edit is committed and the value changes.\n\n### **Methods:**\n - **focus()** - Starts editing the first block, or a new block if the document is empty.\n- **blur()** - Commits any in-progress block or raw edit.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **toolbar** - The always-visible block-insert toolbar.\n- **raw-toggle** - The button that switches between the block view and the raw source view.\n- **block** - A rendered block wrapper.\n- **rendered** - The rendered remarkd output of a block.\n- **input** - The textarea shown while editing a block.\n- **raw** - The full-document textarea shown in raw source mode.\n- **slash-menu** - The `zn-slash-menu` opened by typing \"/\" in an empty block.\n- **image-controls** - The caption / alignment / size panel shown when an image block is clicked.\n- **include** - The chip rendered in place of an `include::` directive.\n- **include-picker** - The inline Include picker opened from the toolbar or \"/include\".",
|
|
3402
3422
|
"attributes": [
|
|
3423
|
+
{
|
|
3424
|
+
"name": "slash-recent-key",
|
|
3425
|
+
"description": "Lists the blocks most recently inserted here above the rest of the slash menu, remembered in\n`localStorage` under this key. Leave unset to offer no recently used section.",
|
|
3426
|
+
"values": []
|
|
3427
|
+
},
|
|
3403
3428
|
{
|
|
3404
3429
|
"name": "name",
|
|
3405
3430
|
"description": "The name of the control, submitted as part of form data.",
|
|
@@ -3420,6 +3445,11 @@
|
|
|
3420
3445
|
"description": "Endpoint for image uploads — required for image support. Posting the file\nmetadata here must return `{uploadPath, uploadUrl}`; the file is then PUT\nto `uploadUrl` and the returned `uploadPath` is embedded as the image URL.",
|
|
3421
3446
|
"values": []
|
|
3422
3447
|
},
|
|
3448
|
+
{
|
|
3449
|
+
"name": "include-url",
|
|
3450
|
+
"description": "Endpoint listing the Includes this document may embed, as\n`{\"items\":[{id,title,description,scope,keywords,languages,url}]}`. Labels the\nchips rendered for `include::` directives and feeds the include picker.",
|
|
3451
|
+
"values": []
|
|
3452
|
+
},
|
|
3423
3453
|
{
|
|
3424
3454
|
"name": "allow-raw",
|
|
3425
3455
|
"description": "Adds a toolbar toggle that swaps the block view for the full remarkd source.",
|
|
@@ -3469,6 +3499,133 @@
|
|
|
3469
3499
|
}
|
|
3470
3500
|
]
|
|
3471
3501
|
},
|
|
3502
|
+
{
|
|
3503
|
+
"name": "zn-schedule-builder",
|
|
3504
|
+
"description": "Builds a weekly opening-hours schedule as a drag-to-paint calendar or a compact list of\ntime ranges, and posts the result as JSON.\n---\n\n\n### **Events:**\n - **zn-change** - Emitted when the schedule changes.\n\n### **Methods:**\n - **checkValidity(): _boolean_** - Checks 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: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **setDay(day: _ScheduleDay_, ranges: _ScheduleRange[]_)** - Replaces the hours for a single day, in the save timezone.\n- **getDay(day: _ScheduleDay_): _ScheduleRange[]_** - Reads the hours for a single day, in the save timezone.\n- **setDisplayDay(day: _ScheduleDay_, ranges: _ScheduleRange[]_)** - Replaces the hours for a single day, given in the display timezone.\n\n### **Slots:**\n - **label** - The schedule's label. Alternatively, use the `label` attribute.\n- **help-text** - Text that describes how to use the schedule. Alternatively, use the `help-text` attribute.\n\n### **CSS Properties:**\n - **--slot-height** - The height of a single time slot in the calendar. Defaults to `18px`. _(default: undefined)_\n- **--gutter-width** - The width of the calendar's time gutter. Defaults to `64px`. _(default: undefined)_\n- **--open-color** - The fill used for open hours. _(default: undefined)_\n- **--reduced-color** - The fill used for hours an exception removes. _(default: undefined)_\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the builder, label and help text.\n- **base** - The component's base wrapper.\n- **toolbar** - The row above the builder holding the hint, legend and view toggle.\n- **calendar** - The calendar view wrapper.\n- **list** - The form (list) view wrapper.\n- **summary** - The summary panel beside the calendar.",
|
|
3505
|
+
"attributes": [
|
|
3506
|
+
{
|
|
3507
|
+
"name": "name",
|
|
3508
|
+
"description": "The name of the form control, submitted as a name/value pair with form data.",
|
|
3509
|
+
"values": []
|
|
3510
|
+
},
|
|
3511
|
+
{
|
|
3512
|
+
"name": "value",
|
|
3513
|
+
"description": "The schedule as a JSON string. This is what gets posted with the form.",
|
|
3514
|
+
"values": []
|
|
3515
|
+
},
|
|
3516
|
+
{
|
|
3517
|
+
"name": "label",
|
|
3518
|
+
"description": "The schedule's label. If you need to display HTML, use the `label` slot instead.",
|
|
3519
|
+
"values": []
|
|
3520
|
+
},
|
|
3521
|
+
{
|
|
3522
|
+
"name": "help-text",
|
|
3523
|
+
"description": "The schedule's help text. If you need to display HTML, use the `help-text` slot instead.",
|
|
3524
|
+
"values": []
|
|
3525
|
+
},
|
|
3526
|
+
{
|
|
3527
|
+
"name": "view",
|
|
3528
|
+
"description": "Which view is showing.",
|
|
3529
|
+
"values": [{ "name": "ScheduleView" }]
|
|
3530
|
+
},
|
|
3531
|
+
{
|
|
3532
|
+
"name": "open-label",
|
|
3533
|
+
"description": "The word used for hours the schedule covers, in the legend and in labels.",
|
|
3534
|
+
"values": []
|
|
3535
|
+
},
|
|
3536
|
+
{
|
|
3537
|
+
"name": "closed-label",
|
|
3538
|
+
"description": "The word used for hours the schedule doesn't cover, in the legend and against empty days.",
|
|
3539
|
+
"values": []
|
|
3540
|
+
},
|
|
3541
|
+
{
|
|
3542
|
+
"name": "no-toggle",
|
|
3543
|
+
"description": "Hides the calendar/form view toggle.",
|
|
3544
|
+
"values": []
|
|
3545
|
+
},
|
|
3546
|
+
{
|
|
3547
|
+
"name": "hide-summary",
|
|
3548
|
+
"description": "Hides the summary panel beside the calendar.",
|
|
3549
|
+
"values": []
|
|
3550
|
+
},
|
|
3551
|
+
{
|
|
3552
|
+
"name": "start-hour",
|
|
3553
|
+
"description": "The first hour shown in the calendar.",
|
|
3554
|
+
"values": []
|
|
3555
|
+
},
|
|
3556
|
+
{
|
|
3557
|
+
"name": "end-hour",
|
|
3558
|
+
"description": "The last hour shown in the calendar.",
|
|
3559
|
+
"values": []
|
|
3560
|
+
},
|
|
3561
|
+
{
|
|
3562
|
+
"name": "interval",
|
|
3563
|
+
"description": "The granularity of the calendar grid and the time inputs, in minutes.",
|
|
3564
|
+
"values": []
|
|
3565
|
+
},
|
|
3566
|
+
{
|
|
3567
|
+
"name": "week-start",
|
|
3568
|
+
"description": "The weekday the week starts on.",
|
|
3569
|
+
"values": [{ "name": "ScheduleDay" }]
|
|
3570
|
+
},
|
|
3571
|
+
{
|
|
3572
|
+
"name": "time-format",
|
|
3573
|
+
"description": "Displays times as 12 or 24 hour. The serialised value is always 24 hour `HH:MM`.",
|
|
3574
|
+
"values": [{ "name": "12" }, { "name": "24" }]
|
|
3575
|
+
},
|
|
3576
|
+
{
|
|
3577
|
+
"name": "display-timezone",
|
|
3578
|
+
"description": "The IANA timezone the hours are shown in. Accepts `auto` for the viewer's own timezone. Defaults\nto `save-timezone`, so nothing is converted until you ask for it. Changing this only re-labels\nthe same underlying hours; the value never moves.",
|
|
3579
|
+
"values": []
|
|
3580
|
+
},
|
|
3581
|
+
{
|
|
3582
|
+
"name": "save-timezone",
|
|
3583
|
+
"description": "The IANA timezone the value is stored in. Defaults to `UTC` as soon as the schedule is\ntimezone-aware (a display timezone is set, or the picker is shown), and to no timezone at all\notherwise — in which case the times are stored exactly as they are shown.",
|
|
3584
|
+
"values": []
|
|
3585
|
+
},
|
|
3586
|
+
{
|
|
3587
|
+
"name": "show-timezone",
|
|
3588
|
+
"description": "Shows the timezone picker, letting the user read the schedule in any timezone.",
|
|
3589
|
+
"values": []
|
|
3590
|
+
},
|
|
3591
|
+
{
|
|
3592
|
+
"name": "timezones",
|
|
3593
|
+
"description": "The timezones offered by the picker, as IANA names or one of the named sets — `en` (the four US\nzones, the UK and Australia, under those names), `offsets` (one zone per UTC offset, the\ndefault), `common` (every offset plus the world's major centres) or `all` (the complete IANA\nlist). Names and sets can be mixed, e.g. `en Asia/Tokyo`.",
|
|
3594
|
+
"values": [{ "name": "string[]" }]
|
|
3595
|
+
},
|
|
3596
|
+
{
|
|
3597
|
+
"name": "reference-date",
|
|
3598
|
+
"description": "The date (`YYYY-MM-DD`) used to resolve timezone offsets. A weekly pattern has no date of its\nown, so one has to be picked to know whether daylight saving applies; today is used by default.",
|
|
3599
|
+
"values": []
|
|
3600
|
+
},
|
|
3601
|
+
{
|
|
3602
|
+
"name": "disabled",
|
|
3603
|
+
"description": "Disables the schedule.",
|
|
3604
|
+
"values": []
|
|
3605
|
+
},
|
|
3606
|
+
{
|
|
3607
|
+
"name": "readonly",
|
|
3608
|
+
"description": "Renders the schedule without any editing affordances.",
|
|
3609
|
+
"values": []
|
|
3610
|
+
},
|
|
3611
|
+
{
|
|
3612
|
+
"name": "required",
|
|
3613
|
+
"description": "Makes the schedule a required field, invalid until at least one period is open.",
|
|
3614
|
+
"values": []
|
|
3615
|
+
},
|
|
3616
|
+
{
|
|
3617
|
+
"name": "form",
|
|
3618
|
+
"description": "The id of the form to associate with, when the control sits outside of it.",
|
|
3619
|
+
"values": []
|
|
3620
|
+
}
|
|
3621
|
+
],
|
|
3622
|
+
"references": [
|
|
3623
|
+
{
|
|
3624
|
+
"name": "Documentation",
|
|
3625
|
+
"url": "https://zinc.style/components/schedule-builder"
|
|
3626
|
+
}
|
|
3627
|
+
]
|
|
3628
|
+
},
|
|
3472
3629
|
{
|
|
3473
3630
|
"name": "zn-scroll-container",
|
|
3474
3631
|
"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.",
|
|
@@ -3801,7 +3958,7 @@
|
|
|
3801
3958
|
},
|
|
3802
3959
|
{
|
|
3803
3960
|
"name": "zn-slash-menu",
|
|
3804
|
-
"description": "A keyboard-driven list of insertions, anchored to the caret of the field that opened it.\n---\n\n\n### **Events:**\n - **SLASH_ITEM_SELECT**\n- **zn-slash-item-select** - Emitted when an item is chosen. Does not cross shadow boundaries; the component driving the menu (e.g. `zn-textarea`) re-emits it as `zn-slash-select`.\n\n### **Methods:**\n - **setActiveIndex(index: _number_)** - Sets the active item by index, wrapping at both ends and skipping disabled items.\n- **moveActive(delta: _number_)** - Moves the active item by `delta` places.\n- **selectActive()** - Chooses the active item, as pressing Enter would.\n- **reposition()** - Recalculates the panel's position against its anchor.\n\n### **CSS Properties:**\n - **--slash-menu-width** - The width of the panel. _(default: undefined)_\n- **--slash-menu-max-height** - The maximum height of the panel before it scrolls. _(default: undefined)_\n\n### **CSS Parts:**\n - **panel** - The floating panel that holds the list.\n- **
|
|
3961
|
+
"description": "A keyboard-driven list of insertions, anchored to the caret of the field that opened it.\n---\n\n\n### **Events:**\n - **SLASH_ITEM_SELECT**\n- **zn-slash-item-select** - Emitted when an item is chosen. Does not cross shadow boundaries; the component driving the menu (e.g. `zn-textarea`) re-emits it as `zn-slash-select`.\n\n### **Methods:**\n - **clearRecent()** - Forgets the items remembered under `recent-key`.\n- **setActiveIndex(index: _number_)** - Sets the active item by index, wrapping at both ends and skipping disabled items.\n- **moveActive(delta: _number_)** - Moves the active item by `delta` places.\n- **selectActive()** - Chooses the active item, as pressing Enter would.\n- **reposition()** - Recalculates the panel's position against its anchor.\n\n### **CSS Properties:**\n - **--slash-menu-width** - The width of the panel. _(default: undefined)_\n- **--slash-menu-border-radius** - The corner radius of the panel. _(default: undefined)_\n- **--slash-menu-item-border-radius** - The corner radius of the items and their icon chips. _(default: undefined)_\n- **--slash-menu-max-height** - The maximum height of the panel before it scrolls. _(default: undefined)_\n\n### **CSS Parts:**\n - **panel** - The floating panel that holds the list.\n- **list** - The scrolling list of items.\n- **item** - An item in the list.\n- **icon** - The chip holding an item's icon.\n- **group-heading** - A group heading between items.\n- **divider** - The rule closing the recently used section, when the items below it have no heading of their own.\n- **footer** - The truncation footer, shown when not every match fits.\n- **hints** - The pinned footer of keyboard hints.\n- **hint** - A single keyboard hint within the footer.\n- **hint-key** - The key shown against a hint.",
|
|
3805
3962
|
"attributes": [
|
|
3806
3963
|
{
|
|
3807
3964
|
"name": "open",
|
|
@@ -3820,7 +3977,7 @@
|
|
|
3820
3977
|
},
|
|
3821
3978
|
{
|
|
3822
3979
|
"name": "heading",
|
|
3823
|
-
"description": "The
|
|
3980
|
+
"description": "The name the list is announced by when there is no query.",
|
|
3824
3981
|
"values": []
|
|
3825
3982
|
},
|
|
3826
3983
|
{
|
|
@@ -3838,6 +3995,26 @@
|
|
|
3838
3995
|
"description": "Hides the insertion key (the item's value) normally shown against each item.",
|
|
3839
3996
|
"values": []
|
|
3840
3997
|
},
|
|
3998
|
+
{
|
|
3999
|
+
"name": "hide-hints",
|
|
4000
|
+
"description": "Hides the pinned footer of keyboard hints.",
|
|
4001
|
+
"values": []
|
|
4002
|
+
},
|
|
4003
|
+
{
|
|
4004
|
+
"name": "recent-key",
|
|
4005
|
+
"description": "Remembers the items chosen here and lists the most recent of them first, under their own heading.\nThe key scopes the list to where the menu is used, so each place keeps its own history in\n`localStorage`. Leave unset to offer no recently used section.",
|
|
4006
|
+
"values": []
|
|
4007
|
+
},
|
|
4008
|
+
{
|
|
4009
|
+
"name": "max-recent",
|
|
4010
|
+
"description": "The most recently used items to list.",
|
|
4011
|
+
"values": []
|
|
4012
|
+
},
|
|
4013
|
+
{
|
|
4014
|
+
"name": "recent-heading",
|
|
4015
|
+
"description": "The heading shown above the recently used items.",
|
|
4016
|
+
"values": []
|
|
4017
|
+
},
|
|
3841
4018
|
{
|
|
3842
4019
|
"name": "placement",
|
|
3843
4020
|
"description": "The preferred placement of the panel.",
|
|
@@ -4350,7 +4527,7 @@
|
|
|
4350
4527
|
},
|
|
4351
4528
|
{
|
|
4352
4529
|
"name": "slash-heading",
|
|
4353
|
-
"description": "The
|
|
4530
|
+
"description": "The name the slash menu's list is announced by.",
|
|
4354
4531
|
"values": []
|
|
4355
4532
|
},
|
|
4356
4533
|
{
|
|
@@ -4358,6 +4535,11 @@
|
|
|
4358
4535
|
"description": "Hides the insertion keys normally shown against the slash menu's items.",
|
|
4359
4536
|
"values": []
|
|
4360
4537
|
},
|
|
4538
|
+
{
|
|
4539
|
+
"name": "slash-recent-key",
|
|
4540
|
+
"description": "Lists the items most recently chosen here above the rest, remembered in `localStorage` under this\nkey. Share a key between the fields that should share a history; leave unset to offer no such list.",
|
|
4541
|
+
"values": []
|
|
4542
|
+
},
|
|
4361
4543
|
{ "name": "transparent", "values": [] }
|
|
4362
4544
|
],
|
|
4363
4545
|
"references": [
|
|
@@ -4543,7 +4725,7 @@
|
|
|
4543
4725
|
},
|
|
4544
4726
|
{
|
|
4545
4727
|
"name": "zn-toggle",
|
|
4546
|
-
"description": "Toggles allow the user to switch an option on or off.\n---\n\n\n### **Events:**\n - **zn-input** - Emitted when the toggle receives input.\n\n### **Slots:**\n - _default_ - The toggle's label.\n- **description** - A description of the toggle's label. Alternatively, you can use the `description` attribute.\n- **help-text** - Text that describes how to use the toggle. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Properties:**\n - **--zn-toggle-margin** - The margin around the toggle switch. Defaults to `8px 0`. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper containing the toggle switch.\n- **control** - The toggle switch control (the circular button that slides).\n- **description** - The container that wraps the toggle's description.",
|
|
4728
|
+
"description": "Toggles allow the user to switch an option on or off.\n---\n\n\n### **Events:**\n - **zn-input** - Emitted when the toggle receives input.\n\n### **Slots:**\n - _default_ - The toggle's label.\n- **description** - A description of the toggle's label. Alternatively, you can use the `description` attribute.\n- **help-text** - Text that describes how to use the toggle. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Properties:**\n - **--zn-toggle-margin** - The margin around the toggle switch. Defaults to `8px 0`. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper containing the toggle switch.\n- **control** - The toggle switch control (the circular button that slides).\n- **label** - The toggle's label.\n- **description** - The container that wraps the toggle's description.",
|
|
4547
4729
|
"attributes": [
|
|
4548
4730
|
{ "name": "title", "values": [] },
|
|
4549
4731
|
{ "name": "name", "values": [] },
|
|
@@ -4701,7 +4883,7 @@
|
|
|
4701
4883
|
},
|
|
4702
4884
|
{
|
|
4703
4885
|
"name": "slash-heading",
|
|
4704
|
-
"description": "The
|
|
4886
|
+
"description": "The name the slash menu's list is announced by.",
|
|
4705
4887
|
"values": []
|
|
4706
4888
|
},
|
|
4707
4889
|
{
|
|
@@ -4709,6 +4891,11 @@
|
|
|
4709
4891
|
"description": "Hides the insertion keys normally shown against the slash menu's items.",
|
|
4710
4892
|
"values": []
|
|
4711
4893
|
},
|
|
4894
|
+
{
|
|
4895
|
+
"name": "slash-recent-key",
|
|
4896
|
+
"description": "Lists the slash menu items most recently chosen here above the rest, remembered under this key.",
|
|
4897
|
+
"values": []
|
|
4898
|
+
},
|
|
4712
4899
|
{
|
|
4713
4900
|
"name": "grouped",
|
|
4714
4901
|
"description": "When true, hides the individual language navbar and defers language control to a parent zn-translation-group.",
|