@kubex/zinc 1.1.121 → 1.1.123

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.
Files changed (37) hide show
  1. package/dist/custom-elements.json +2847 -1816
  2. package/dist/vscode.html-custom-data.json +189 -167
  3. package/dist/web-types.json +531 -465
  4. package/dist/zn.d.ts +401 -296
  5. package/dist/zn.min.js +1478 -1337
  6. package/docs/pages/components/button.md +9 -0
  7. package/docs/pages/components/data-table-filter.md +60 -4
  8. package/docs/pages/components/data-table-search.md +3 -3
  9. package/docs/pages/components/data-table.md +78 -9
  10. package/docs/pages/components/datepicker.md +10 -0
  11. package/docs/pages/components/menu-item.md +16 -2
  12. package/package.json +1 -1
  13. package/src/components/button/button.component.ts +11 -4
  14. package/src/components/button/button.scss +12 -1
  15. package/src/components/data-table/data-table.component.ts +341 -139
  16. package/src/components/data-table/data-table.scss +110 -43
  17. package/src/components/data-table/data-table.test.ts +110 -0
  18. package/src/components/data-table-filter/data-table-filter.component.ts +487 -49
  19. package/src/components/data-table-filter/data-table-filter.scss +163 -9
  20. package/src/components/data-table-filter/data-table-filter.test.ts +328 -2
  21. package/src/components/data-table-search/data-table-search.component.ts +1 -1
  22. package/src/components/data-table-search/data-table-search.scss +5 -0
  23. package/src/components/datepicker/datepicker.component.ts +23 -2
  24. package/src/components/datepicker/datepicker.scss +25 -0
  25. package/src/components/datepicker/datepicker.test.ts +28 -1
  26. package/src/components/input/input.component.ts +1 -0
  27. package/src/components/input/input.scss +1 -1
  28. package/src/components/menu/menu.component.ts +2 -0
  29. package/src/components/menu/menu.scss +23 -2
  30. package/src/components/menu-item/menu-item.component.ts +7 -1
  31. package/src/components/menu-item/menu-item.scss +4 -4
  32. package/src/components/menu-item/menu-item.test.ts +39 -1
  33. package/src/components/panel/panel.component.ts +12 -5
  34. package/src/components/panel/panel.scss +3 -3
  35. package/src/components/query-builder/query-builder.component.ts +1 -1
  36. package/src/components/tooltip/tooltip.component.ts +2 -2
  37. package/src/components/tooltip/tooltip.test.ts +70 -2
@@ -245,6 +245,11 @@
245
245
  "description": "Disables the hover background, for contexts where the tint doesn't fit.",
246
246
  "values": []
247
247
  },
248
+ {
249
+ "name": "pill",
250
+ "description": "Renders the button as a pill: fully rounded, sentence case and regular\nweight. For label-like triggers such as filter chips.",
251
+ "values": []
252
+ },
248
253
  { "name": "panel-bg", "values": [] },
249
254
  { "name": "dropdown-closer", "values": [] },
250
255
  { "name": "notification", "values": [] },
@@ -1188,7 +1193,7 @@
1188
1193
  },
1189
1194
  {
1190
1195
  "name": "zn-data-table",
1191
- "description": "Short summary of the component's intended use.\n---\n\n\n### **Slots:**\n - _default_ - The default slot.\n- **search** - Slot for search component.\n- **sort** - Slot for sort component.\n- **filter** - Slot for filter component.\n- **filter-top** - Slot for top-level filter component.\n- **delete-action** - Slot for delete action button.\n- **modify-action** - Slot for modify action button.\n- **create-action** - Slot for create action button.\n- **inputs** - Slot for additional input controls.\n- **empty-state** - Slot for custom empty state.\n- **no-results** - Slot for a custom no-results state, shown when a search on a no-initial-load table returns no rows.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
1196
+ "description": "Short summary of the component's intended use.\n---\n\n\n### **Slots:**\n - _default_ - The default slot.\n- **search** - Slot for search component, in the header's right-hand group.\n- **sort** - Slot for sort component, in the header's right-hand group.\n- **filter** - Slot for filter component, in the header's right-hand group.\n- **filter-top** - Slot for a top-level filter component, rendered above the table's panel.\n- **delete-action** - Slot for delete action button, shown beside the caption once rows are selected.\n- **modify-action** - Slot for modify action button, shown beside the caption once rows are selected.\n- **create-action** - Slot for create action button, at the end of the header's right-hand group.\n- **inputs** - Slot for additional input controls.\n- **empty-state** - Slot for custom empty state.\n- **no-results** - Slot for a custom no-results state, shown when a search on a no-initial-load table returns no rows.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
1192
1197
  "attributes": [
1193
1198
  { "name": "data-uri", "values": [] },
1194
1199
  { "name": "data", "values": [{ "name": "Row[]" }, { "name": "Row" }] },
@@ -1208,6 +1213,8 @@
1208
1213
  { "name": "unsortable-headers", "values": [] },
1209
1214
  { "name": "unsortable", "values": [] },
1210
1215
  { "name": "hide-pagination", "values": [] },
1216
+ { "name": "hide-column-select", "values": [] },
1217
+ { "name": "hide-refresh", "values": [] },
1211
1218
  { "name": "standalone", "values": [] },
1212
1219
  { "name": "caption", "values": [] },
1213
1220
  { "name": "empty-state-caption", "values": [] },
@@ -1229,11 +1236,16 @@
1229
1236
  },
1230
1237
  {
1231
1238
  "name": "zn-data-table-filter",
1232
- "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.",
1239
+ "description": "An inline filter bar for data tables. Each active filter is a pill whose dropdown sets its value.\n---\n\n\n### **Events:**\n - **zn-filter-change** - Emitted when the active filters change. Read the encoded query off `value`.\n\n### **Methods:**\n - **clear()** - Removes every active filter.",
1233
1240
  "attributes": [
1234
- { "name": "filters", "values": [] },
1241
+ { "name": "filters", "values": [{ "name": "QueryBuilderData" }] },
1235
1242
  { "name": "name", "values": [] },
1236
- { "name": "value", "values": [] }
1243
+ { "name": "value", "values": [] },
1244
+ {
1245
+ "name": "default-filters",
1246
+ "description": "Filter keys to show a pill for before the user adds any.",
1247
+ "values": []
1248
+ }
1237
1249
  ],
1238
1250
  "references": [
1239
1251
  {
@@ -1297,7 +1309,7 @@
1297
1309
  },
1298
1310
  {
1299
1311
  "name": "zn-datepicker",
1300
- "description": "A date picker component with calendar popup and input validation.\n---\n\n\n### **Events:**\n - **zn-change** - Emitted when the date value changes.\n- **zn-input** - Emitted when the input value changes.\n- **zn-blur** - Emitted when the input loses focus.\n- **zn-focus** - Emitted when the input gains focus.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the input.\n- **blur()** - Removes focus from the input.\n- **select()** - Selects all the text in the input.\n- **checkValidity(): _boolean_** - Checks the validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - 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\n### **Slots:**\n - **label** - The datepicker's label. Alternatively, you can use the `label` attribute.\n- **label-tooltip** - Tooltip content for the label. Alternatively, you can use the `label-tooltip` attribute.\n- **context-note** - Additional context text displayed above the input. Alternatively, you can use the `context-note` attribute.\n- **help-text** - Help text displayed below the input. Alternatively, you can use the `help-text` attribute.\n- **prefix** - Content to display before the input (in addition to the default calendar icon).\n- **suffix** - Content to display after the input.\n\n### **CSS Properties:**\n - **--zn-input-*** - Inherited input component CSS custom properties. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **form-control** - The form control wrapper.\n- **form-control-label** - The label element.\n- **form-control-input** - The input wrapper.\n- **form-control-help-text** - The help text element.",
1312
+ "description": "A date picker component with calendar popup and input validation.\n---\n\n\n### **Events:**\n - **zn-change** - Emitted when the date value changes.\n- **zn-input** - Emitted when the input value changes.\n- **zn-blur** - Emitted when the input loses focus.\n- **zn-focus** - Emitted when the input gains focus.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the input.\n- **blur()** - Removes focus from the input.\n- **select()** - Selects all the text in the input.\n- **checkValidity(): _boolean_** - Checks the validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - 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\n### **Slots:**\n - **label** - The datepicker's label. Alternatively, you can use the `label` attribute.\n- **label-tooltip** - Tooltip content for the label. Alternatively, you can use the `label-tooltip` attribute.\n- **context-note** - Additional context text displayed above the input. Alternatively, you can use the `context-note` attribute.\n- **help-text** - Help text displayed below the input. Alternatively, you can use the `help-text` attribute.\n- **prefix** - Content to display before the input (in addition to the default calendar icon).\n- **suffix** - Content to display after the input.\n\n### **CSS Properties:**\n - **--zn-input-*** - Inherited input component CSS custom properties. _(default: undefined)_\n- **--zn-datepicker-inline-border-color** - Border colour of the calendar in `inline` mode. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **form-control** - The form control wrapper.\n- **form-control-label** - The label element.\n- **form-control-input** - The input wrapper.\n- **form-control-help-text** - The help text element.",
1301
1313
  "attributes": [
1302
1314
  { "name": "title", "values": [] },
1303
1315
  {
@@ -1360,6 +1372,11 @@
1360
1372
  "values": []
1361
1373
  },
1362
1374
  { "name": "flush", "values": [] },
1375
+ {
1376
+ "name": "inline",
1377
+ "description": "Renders the calendar in place instead of a popup, hiding the text input.",
1378
+ "values": []
1379
+ },
1363
1380
  {
1364
1381
  "name": "required",
1365
1382
  "description": "Makes the input a required field.",
@@ -1603,6 +1620,52 @@
1603
1620
  }
1604
1621
  ]
1605
1622
  },
1623
+ {
1624
+ "name": "zn-editor",
1625
+ "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.",
1626
+ "attributes": [
1627
+ { "name": "id", "values": [] },
1628
+ { "name": "name", "values": [] },
1629
+ { "name": "value", "values": [] },
1630
+ {
1631
+ "name": "interaction-type",
1632
+ "values": [{ "name": "ticket" }, { "name": "chat" }]
1633
+ },
1634
+ { "name": "attachment-url", "values": [] },
1635
+ { "name": "code-blocks", "values": [] },
1636
+ { "name": "dividers", "values": [] },
1637
+ { "name": "links", "values": [] },
1638
+ { "name": "attachments", "values": [] },
1639
+ { "name": "images", "values": [] },
1640
+ { "name": "videos", "values": [] },
1641
+ { "name": "dates", "values": [] },
1642
+ { "name": "emojis", "values": [] },
1643
+ { "name": "code", "values": [] },
1644
+ { "name": "ai", "values": [] },
1645
+ { "name": "ai-path", "values": [] },
1646
+ {
1647
+ "name": "store-key",
1648
+ "description": "Caches unsent content while typing and restores it when the editor next loads,\nso agent replies in tickets/chats survive reloads and navigation. Use a key\nunique to the conversation (e.g. the ticket ID). The cache is cleared on submit.",
1649
+ "values": []
1650
+ },
1651
+ {
1652
+ "name": "store-ttl",
1653
+ "description": "Cached-content expiry in seconds. Defaults to 1 day.",
1654
+ "values": []
1655
+ },
1656
+ {
1657
+ "name": "local-storage",
1658
+ "description": "Cache to localStorage instead of sessionStorage, persisting across tabs and browser restarts.",
1659
+ "values": []
1660
+ }
1661
+ ],
1662
+ "references": [
1663
+ {
1664
+ "name": "Documentation",
1665
+ "url": "https://zinc.style/components/editor"
1666
+ }
1667
+ ]
1668
+ },
1606
1669
  {
1607
1670
  "name": "zn-empty-state",
1608
1671
  "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.",
@@ -1655,52 +1718,6 @@
1655
1718
  }
1656
1719
  ]
1657
1720
  },
1658
- {
1659
- "name": "zn-editor",
1660
- "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.",
1661
- "attributes": [
1662
- { "name": "id", "values": [] },
1663
- { "name": "name", "values": [] },
1664
- { "name": "value", "values": [] },
1665
- {
1666
- "name": "interaction-type",
1667
- "values": [{ "name": "ticket" }, { "name": "chat" }]
1668
- },
1669
- { "name": "attachment-url", "values": [] },
1670
- { "name": "code-blocks", "values": [] },
1671
- { "name": "dividers", "values": [] },
1672
- { "name": "links", "values": [] },
1673
- { "name": "attachments", "values": [] },
1674
- { "name": "images", "values": [] },
1675
- { "name": "videos", "values": [] },
1676
- { "name": "dates", "values": [] },
1677
- { "name": "emojis", "values": [] },
1678
- { "name": "code", "values": [] },
1679
- { "name": "ai", "values": [] },
1680
- { "name": "ai-path", "values": [] },
1681
- {
1682
- "name": "store-key",
1683
- "description": "Caches unsent content while typing and restores it when the editor next loads,\nso agent replies in tickets/chats survive reloads and navigation. Use a key\nunique to the conversation (e.g. the ticket ID). The cache is cleared on submit.",
1684
- "values": []
1685
- },
1686
- {
1687
- "name": "store-ttl",
1688
- "description": "Cached-content expiry in seconds. Defaults to 1 day.",
1689
- "values": []
1690
- },
1691
- {
1692
- "name": "local-storage",
1693
- "description": "Cache to localStorage instead of sessionStorage, persisting across tabs and browser restarts.",
1694
- "values": []
1695
- }
1696
- ],
1697
- "references": [
1698
- {
1699
- "name": "Documentation",
1700
- "url": "https://zinc.style/components/editor"
1701
- }
1702
- ]
1703
- },
1704
1721
  {
1705
1722
  "name": "zn-file",
1706
1723
  "description": "File controls allow selecting an arbitrary number of files for uploading.\n---\n\n\n### **Events:**\n - **zn-blur** - Emitted when the control loses focus.\n- **zn-change** - Emitted when an alteration to the control's value is committed by the user.\n- **zn-clear** - Emitted when the user confirms clearing the selected file or `src`.\n- **zn-error** - Emitted when multiple files are selected via drag and drop, without the `multiple` property being set.\n- **zn-focus** - Emitted when the control gains focus.\n- **zn-input** - Emitted when the control receives input.\n\n### **Methods:**\n - **checkValidity()** - Checks for validity but does not show a validation message.\nReturns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - 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- **focus(options: _FocusOptions_)** - Sets focus on the button or droparea.\n- **blur()** - Removes focus from the button or droparea.\n- **clear()** - Programmatically clears the selected file and any external `src` without\nconfirmation. Unlike a user-initiated clear, this does not flag the control\nto submit an empty value.\n\n### **Slots:**\n - **label** - The file control's label. Alternatively, you can use the `label` attribute.\n- **help-text** - Text that describes how to use the file control. Alternatively, you can use the `help-text` attribute.\n- **trigger** - Optional content to be used as trigger instead of the default content. Opening the file dialog on click and as well as drag and drop will work for this content. Following attributes will no longer work: *label*, *droparea*, *help-text*, *size*, *hide-value*. Also if using the disabled attribute, the disabled styling will not be applied and must be taken care of yourself.\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The input's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **button-wrapper** - The wrapper around the button and text value.\n- **button** - The zn-button acting as a file input.\n- **button__base** - The zn-button's exported `base` part.\n- **value** - The chosen files or placeholder text for the file input.\n- **droparea** - The element wrapping the drop zone.\n- **droparea-background** - The background of the drop zone.\n- **upload** - The upload button shown in the droparea when no file is selected.\n- **preview** - The image preview rendered in the droparea for previewable files.\n- **filename** - The filename label rendered in the droparea for non-previewable files.\n- **clear** - The clear button rendered in the droparea when a file is present.\n- **clear-confirm** - The confirmation dialog shown before clearing the file.\n- **link** - The current link anchor rendered when `show-link` is enabled.\n- **trigger** - The container that wraps the trigger.",
@@ -2189,7 +2206,7 @@
2189
2206
  },
2190
2207
  {
2191
2208
  "name": "zn-input",
2192
- "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-blur** - Emitted when the control loses focus.\n- **zn-change** - Emitted when an alteration to the control's value is committed by the user.\n- **zn-clear** - Emitted when the clear button is activated.\n- **zn-focus** - Emitted when the control gains focus.\n- **zn-input** - Emitted when the control receives input.\n- **zn-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n- **zn-slash-select** - Emitted when a slash menu item is chosen. Cancelable — call `preventDefault()` to suppress the insertion and handle the item yourself.\n- **zn-slash-insert** - Emitted after a slash menu item's value has been inserted.\n\n### **Methods:**\n - **resolveSlashItems(search): _Promise<SlashMenuItem[]>_** - The insertions the slash menu offers, gathered from every source, in the order they were declared.\n- **showSlashMenu()** - Opens the slash menu at the caret, inserting the trigger if it isn't already there.\n- **hideSlashMenu()** - Closes the slash menu.\n- **focus(options: _FocusOptions_)** - Sets focus on the input.\n- **blur()** - Removes focus from the input.\n- **select()** - Selects all the text in the input.\n- **setSelectionRange(selectionStart: _number_, selectionEnd: _number_, selectionDirection: _'forward' | 'backward' | 'none'_)** - Sets the start and end positions of the text selection (0-based).\n- **setRangeText(replacement: _string_, start: _number_, end: _number_, selectMode: _'select' | 'start' | 'end' | 'preserve'_)** - Replaces a range of text with a new string.\n- **showPicker()** - Displays the browser picker for an input element (only works if the browser supports it for the input type).\n- **stepUp()** - Increments the value of a numeric input type by the value of the step attribute.\n- **stepDown()** - Decrements the value of a numeric input type by the value of the step attribute.\n- **checkValidity(): _boolean_** - Checks the validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - 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\n### **Slots:**\n - **label** - The input's label. Alternatively, you can use the `label` attribute.\n- **label-tooltip** - Used to add text that is displayed in a tooltip next to the label. Alternatively, you can use the `label-tooltip` attribute.\n- **context-note** - Used to add contextual text that is displayed above the input, on the right. Alternatively, you can use the `context-note` attribute. Range inputs display their live value here unless this is set.\n- **prefix** - Used to prepend a presentational icon or similar element to the input.\n- **suffix** - Used to append a presentational icon or similar element to the input.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **show-password-icon** - An icon to use in lieu of the default show password icon.\n- **hide-password-icon** - An icon to use in lieu of the default hide password icon.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n- **slash-items** - `<zn-slash-item>` elements describing the insertions offered by the slash menu. Items are picked up wherever they sit inside the input, so this slot name is optional.\n- **slash-menu** - A `<zn-slash-menu>` to use instead of the built-in one, so its heading, sizing and styling can be set in markup. Any `<zn-slash-item>` children of it become the menu's items.\n\n### **CSS Properties:**\n - **--zn-range-track-height** - The height of a range input's track. _(default: undefined)_\n- **--zn-range-track-color** - The color of a range input's track. _(default: undefined)_\n- **--zn-range-thumb-size** - The diameter of a range input's thumb. _(default: undefined)_\n- **--zn-range-thumb-color** - The color of a range input's thumb. _(default: undefined)_\n- **--zn-range-thumb-ring-width** - The width of the ring drawn around a range input's thumb. _(default: undefined)_\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **slash-menu** - The slash menu shown at the caret.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The input's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **base** - The component's base wrapper.\n- **input** - The internal `<input>` control.\n- **prefix** - The container that wraps the prefix.\n- **clear-button** - The clear button.\n- **password-toggle-button** - The password toggle button.\n- **suffix** - The container that wraps the suffix.",
2209
+ "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-blur** - Emitted when the control loses focus.\n- **zn-change** - Emitted when an alteration to the control's value is committed by the user.\n- **zn-clear** - Emitted when the clear button is activated.\n- **zn-focus** - Emitted when the control gains focus.\n- **zn-input** - Emitted when the control receives input.\n- **zn-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n- **zn-slash-select** - Emitted when a slash menu item is chosen. Cancelable — call `preventDefault()` to suppress the insertion and handle the item yourself.\n- **zn-slash-insert** - Emitted after a slash menu item's value has been inserted.\n\n### **Methods:**\n - **resolveSlashItems(search): _Promise<SlashMenuItem[]>_** - The insertions the slash menu offers, gathered from every source, in the order they were declared.\n- **showSlashMenu()** - Opens the slash menu at the caret, inserting the trigger if it isn't already there.\n- **hideSlashMenu()** - Closes the slash menu.\n- **focus(options: _FocusOptions_)** - Sets focus on the input.\n- **blur()** - Removes focus from the input.\n- **select()** - Selects all the text in the input.\n- **setSelectionRange(selectionStart: _number_, selectionEnd: _number_, selectionDirection: _'forward' | 'backward' | 'none'_)** - Sets the start and end positions of the text selection (0-based).\n- **setRangeText(replacement: _string_, start: _number_, end: _number_, selectMode: _'select' | 'start' | 'end' | 'preserve'_)** - Replaces a range of text with a new string.\n- **showPicker()** - Displays the browser picker for an input element (only works if the browser supports it for the input type).\n- **stepUp()** - Increments the value of a numeric input type by the value of the step attribute.\n- **stepDown()** - Decrements the value of a numeric input type by the value of the step attribute.\n- **checkValidity(): _boolean_** - Checks the validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - 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\n### **Slots:**\n - **label** - The input's label. Alternatively, you can use the `label` attribute.\n- **label-tooltip** - Used to add text that is displayed in a tooltip next to the label. Alternatively, you can use the `label-tooltip` attribute.\n- **context-note** - Used to add contextual text that is displayed above the input, on the right. Alternatively, you can use the `context-note` attribute. Range inputs display their live value here unless this is set.\n- **prefix** - Used to prepend a presentational icon or similar element to the input.\n- **suffix** - Used to append a presentational icon or similar element to the input.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **show-password-icon** - An icon to use in lieu of the default show password icon.\n- **hide-password-icon** - An icon to use in lieu of the default hide password icon.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n- **slash-items** - `<zn-slash-item>` elements describing the insertions offered by the slash menu. Items are picked up wherever they sit inside the input, so this slot name is optional.\n- **slash-menu** - A `<zn-slash-menu>` to use instead of the built-in one, so its heading, sizing and styling can be set in markup. Any `<zn-slash-item>` children of it become the menu's items.\n\n### **CSS Properties:**\n - **--zn-input-box-shadow** - Shadow cast by the field; set to `none` inside a panel that draws its own edge. _(default: undefined)_\n- **--zn-range-track-height** - The height of a range input's track. _(default: undefined)_\n- **--zn-range-track-color** - The color of a range input's track. _(default: undefined)_\n- **--zn-range-thumb-size** - The diameter of a range input's thumb. _(default: undefined)_\n- **--zn-range-thumb-color** - The color of a range input's thumb. _(default: undefined)_\n- **--zn-range-thumb-ring-width** - The width of the ring drawn around a range input's thumb. _(default: undefined)_\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **slash-menu** - The slash menu shown at the caret.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The input's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **base** - The component's base wrapper.\n- **input** - The internal `<input>` control.\n- **prefix** - The container that wraps the prefix.\n- **clear-button** - The clear button.\n- **password-toggle-button** - The password toggle button.\n- **suffix** - The container that wraps the suffix.",
2193
2210
  "attributes": [
2194
2211
  { "name": "title", "values": [] },
2195
2212
  {
@@ -2560,9 +2577,33 @@
2560
2577
  }
2561
2578
  ]
2562
2579
  },
2580
+ {
2581
+ "name": "zn-linked-select",
2582
+ "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.",
2583
+ "attributes": [
2584
+ { "name": "name", "values": [] },
2585
+ { "name": "value", "values": [] },
2586
+ { "name": "checked", "values": [] },
2587
+ { "name": "options", "values": [{ "name": "linkedSelectOptions" }] },
2588
+ { "name": "linked-select", "values": [] },
2589
+ { "name": "cache-key", "values": [] },
2590
+ { "name": "label", "values": [] },
2591
+ {
2592
+ "name": "select-first",
2593
+ "description": "Automatically select the first option of the linked group when no value is set.",
2594
+ "values": []
2595
+ }
2596
+ ],
2597
+ "references": [
2598
+ {
2599
+ "name": "Documentation",
2600
+ "url": "https://zinc.style/components/linked-select"
2601
+ }
2602
+ ]
2603
+ },
2563
2604
  {
2564
2605
  "name": "zn-markdown-editor",
2565
- "description": "A markdown editor with live preview, split view, and a fullscreen mode.\n---\n\n\n### **Events:**\n - **zn-view-mode-change** - Emitted when the user switches between editor / split / preview.\n- **zn-change** - Emitted when the markdown content changes.\n- **zn-input** - Emitted on each keystroke in the editor.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the editor.\n- **blur()** - Removes focus from the editor.\n\n### **Slots:**\n - **label** - The editor label. Alternatively, use the `label` attribute.\n- **help-text** - Help text shown below the editor. Alternatively, use the `help-text` attribute.\n- _default_ - The panel's main content.\n- **actions** - Actions displayed in the panel header (buttons, chips, etc).\n- **footer** - Content displayed in the panel footer.\n\n### **CSS Properties:**\n - **--zn-panel-basis** - The flex-basis of the panel. Can be set using the basis-px attribute. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **toolbar** - The toolbar containing the view-mode and fullscreen controls.\n- **editor** - The textarea wrapper.\n- **preview** - The rendered markdown preview.",
2606
+ "description": "A markdown editor with live preview, split view, and a fullscreen mode.\n---\n\n\n### **Events:**\n - **zn-view-mode-change** - Emitted when the user switches between editor / split / preview.\n- **zn-change** - Emitted when the markdown content changes.\n- **zn-input** - Emitted on each keystroke in the editor.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the editor.\n- **blur()** - Removes focus from the editor.\n\n### **Slots:**\n - **label** - The editor label. Alternatively, use the `label` attribute.\n- **help-text** - Help text shown below the editor. Alternatively, use the `help-text` attribute.\n- _default_ - The panel's main content.\n- **actions** - Actions displayed in the panel header (buttons, chips, etc).\n- **footer** - Content displayed in the panel footer.\n\n### **CSS Properties:**\n - **--zn-panel-basis** - The flex-basis of the panel. Can be set using the basis-px attribute. _(default: undefined)_\n- **--zn-panel-header-padding** - Padding around the header row. Defaults to `--zn-base-gap`. _(default: undefined)_\n- **--zn-panel-footer-padding** - Padding around the footer row. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **toolbar** - The toolbar containing the view-mode and fullscreen controls.\n- **editor** - The textarea wrapper.\n- **preview** - The rendered markdown preview.\n- **header** - The header region, when a caption or actions are given.\n- **header-content** - The padded row inside the header, forwarded from zn-header.\n- **footer** - The footer region, when the footer slot is filled.",
2566
2607
  "attributes": [
2567
2608
  {
2568
2609
  "name": "name",
@@ -2644,33 +2685,9 @@
2644
2685
  }
2645
2686
  ]
2646
2687
  },
2647
- {
2648
- "name": "zn-linked-select",
2649
- "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.",
2650
- "attributes": [
2651
- { "name": "name", "values": [] },
2652
- { "name": "value", "values": [] },
2653
- { "name": "checked", "values": [] },
2654
- { "name": "options", "values": [{ "name": "linkedSelectOptions" }] },
2655
- { "name": "linked-select", "values": [] },
2656
- { "name": "cache-key", "values": [] },
2657
- { "name": "label", "values": [] },
2658
- {
2659
- "name": "select-first",
2660
- "description": "Automatically select the first option of the linked group when no value is set.",
2661
- "values": []
2662
- }
2663
- ],
2664
- "references": [
2665
- {
2666
- "name": "Documentation",
2667
- "url": "https://zinc.style/components/linked-select"
2668
- }
2669
- ]
2670
- },
2671
2688
  {
2672
2689
  "name": "zn-menu",
2673
- "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- **--zn-menu-max-height** - Caps the menu's height and makes it scroll internally. Unset (`none`) by default, so the menu grows to fit its items unless a consumer sets this. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
2690
+ "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- **--zn-menu-max-height** - Caps the menu's height and makes it scroll internally. Unset (`none`) by default, so the menu grows to fit its items unless a consumer sets this. _(default: undefined)_\n- **--zn-menu-min-width** - Overrides the menu's resting width. Defaults to `--zn-size-spanel`, or 245px for `variant=\"shell\"`. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
2674
2691
  "attributes": [
2675
2692
  { "name": "actions", "values": [{ "name": "array" }] },
2676
2693
  {
@@ -2744,6 +2761,11 @@
2744
2761
  { "name": "rel", "values": [] },
2745
2762
  { "name": "gaid", "values": [] },
2746
2763
  { "name": "confirm", "values": [] },
2764
+ {
2765
+ "name": "keep-open",
2766
+ "description": "Leaves a containing dropdown open when this item is selected, whatever the dropdown's own setting.",
2767
+ "values": []
2768
+ },
2747
2769
  {
2748
2770
  "name": "flush",
2749
2771
  "description": "Removes all padding from the menu item.",
@@ -3017,9 +3039,17 @@
3017
3039
  }
3018
3040
  ]
3019
3041
  },
3042
+ {
3043
+ "name": "zn-pane",
3044
+ "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.",
3045
+ "attributes": [{ "name": "flush", "values": [] }],
3046
+ "references": [
3047
+ { "name": "Documentation", "url": "https://zinc.style/components/pane" }
3048
+ ]
3049
+ },
3020
3050
  {
3021
3051
  "name": "zn-panel",
3022
- "description": "Panels are versatile containers that provide structure for organizing content with optional headers and footers.\n---\n\n\n### **Slots:**\n - _default_ - The panel's main content.\n- **actions** - Actions displayed in the panel header (buttons, chips, etc).\n- **footer** - Content displayed in the panel footer.\n\n### **CSS Properties:**\n - **--zn-panel-basis** - The flex-basis of the panel. Can be set using the basis-px attribute. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
3052
+ "description": "Panels are versatile containers that provide structure for organizing content with optional headers and footers.\n---\n\n\n### **Slots:**\n - _default_ - The panel's main content.\n- **actions** - Actions displayed in the panel header (buttons, chips, etc).\n- **footer** - Content displayed in the panel footer.\n\n### **CSS Properties:**\n - **--zn-panel-basis** - The flex-basis of the panel. Can be set using the basis-px attribute. _(default: undefined)_\n- **--zn-panel-header-padding** - Padding around the header row. Defaults to `--zn-base-gap`. _(default: undefined)_\n- **--zn-panel-footer-padding** - Padding around the footer row. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **header** - The header region, when a caption or actions are given.\n- **header-content** - The padded row inside the header, forwarded from zn-header.\n- **footer** - The footer region, when the footer slot is filled.",
3023
3053
  "attributes": [
3024
3054
  { "name": "basis-px", "values": [] },
3025
3055
  { "name": "caption", "values": [] },
@@ -3041,14 +3071,6 @@
3041
3071
  }
3042
3072
  ]
3043
3073
  },
3044
- {
3045
- "name": "zn-pane",
3046
- "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.",
3047
- "attributes": [{ "name": "flush", "values": [] }],
3048
- "references": [
3049
- { "name": "Documentation", "url": "https://zinc.style/components/pane" }
3050
- ]
3051
- },
3052
3074
  {
3053
3075
  "name": "zn-popup",
3054
3076
  "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.",
@@ -3705,24 +3727,6 @@
3705
3727
  }
3706
3728
  ]
3707
3729
  },
3708
- {
3709
- "name": "zn-scroll-container",
3710
- "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 - **--zn-scroll-container-height** - The height and maximum height of the scroll container. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
3711
- "attributes": [
3712
- {
3713
- "name": "height",
3714
- "description": "The height and maximum height of the scroll container.",
3715
- "values": []
3716
- },
3717
- { "name": "start-scrolled", "values": [] }
3718
- ],
3719
- "references": [
3720
- {
3721
- "name": "Documentation",
3722
- "url": "https://zinc.style/components/scroll-container"
3723
- }
3724
- ]
3725
- },
3726
3730
  {
3727
3731
  "name": "zn-schedule-builder",
3728
3732
  "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.",
@@ -3850,6 +3854,24 @@
3850
3854
  }
3851
3855
  ]
3852
3856
  },
3857
+ {
3858
+ "name": "zn-scroll-container",
3859
+ "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 - **--zn-scroll-container-height** - The height and maximum height of the scroll container. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
3860
+ "attributes": [
3861
+ {
3862
+ "name": "height",
3863
+ "description": "The height and maximum height of the scroll container.",
3864
+ "values": []
3865
+ },
3866
+ { "name": "start-scrolled", "values": [] }
3867
+ ],
3868
+ "references": [
3869
+ {
3870
+ "name": "Documentation",
3871
+ "url": "https://zinc.style/components/scroll-container"
3872
+ }
3873
+ ]
3874
+ },
3853
3875
  {
3854
3876
  "name": "zn-select",
3855
3877
  "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-change** - Emitted when the control's value changes.\n- **zn-clear** - Emitted when the control's value is cleared.\n- **zn-input** - Emitted when the control receives input.\n- **zn-focus** - Emitted when the control gains focus.\n- **zn-blur** - Emitted when the control loses focus.\n- **zn-show** - Emitted when the select's menu opens.\n- **zn-after-show** - Emitted after the select's menu opens and all animations are complete.\n- **zn-hide** - Emitted when the select's menu closes.\n- **zn-after-hide** - Emitted after the select's menu closes and all animations are complete.\n- **zn-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n- **zn-load** - Emitted when options have been successfully loaded from the `src` URL.\n- **zn-error** - Emitted when loading options from the `src` URL fails.\n\n### **Methods:**\n - **fetchOptions(searchQuery: _string_)** - Fetches options from the URL specified by the `data-uri` property. Optionally appends a search query.\n- **show()** - Shows the listbox.\n- **hide()** - Hides the listbox.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - 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- **focus(options: _FocusOptions_)** - Sets focus on the control.\n- **blur()** - Removes focus from the control.\n\n### **Slots:**\n - _default_ - The listbox options. Must be `<zn-option>` elements. You can use `<zn-opt-group>` to group options under a labeled header, or `<zn-divider>` to group items visually.\n- **label** - The input's label. Alternatively, you can use the `label` attribute.\n- **label-tooltip** - Used to add text that is displayed in a tooltip next to the label. Alternatively, you can use the `label-tooltip` attribute.\n- **context-note** - Used to add contextual text that is displayed above the select, on the right. Alternatively, you can use the `context-note` attribute.\n- **prefix** - Used to prepend a presentational icon or similar element to the combobox.\n- **suffix** - Used to append a presentational element — a chip marking the selected option's state, for instance — to the combobox, between the value and the clear and expand icons.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **expand-icon** - The icon to show when the control is expanded and collapsed. Rotates on open and close.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Parts:**\n - **search-loading** - The container shown while a remote search request is in flight.\n- **max-results-indicator** - The message shown when results are truncated by `max-results`.\n- **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The select's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **combobox** - The container the wraps the prefix, combobox, clear icon, and expand button.\n- **prefix** - The container that wraps the prefix slot.\n- **suffix** - The container that wraps the suffix slot.\n- **display-input** - The element that displays the selected option's label, an `<input>` element.\n- **listbox** - The listbox container where options are slotted.\n- **tags** - The container that houses option tags when `multiselect` is used.\n- **tag** - The individual tags that represent each multiselect option.\n- **tag__base** - The tag's base part.\n- **tag__content** - The tag's content part.\n- **tag__remove-button** - The tag's remove button.\n- **tag__remove-button__base** - The tag's remove button base part.\n- **clear-button** - The clear button.\n- **expand-icon** - The container that wraps the expand icon.",
@@ -4956,67 +4978,6 @@
4956
4978
  }
4957
4979
  ]
4958
4980
  },
4959
- {
4960
- "name": "zn-tile",
4961
- "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.",
4962
- "attributes": [
4963
- { "name": "caption", "values": [] },
4964
- { "name": "description", "values": [] },
4965
- { "name": "href", "values": [] },
4966
- { "name": "data-target", "values": [] },
4967
- { "name": "gaid", "values": [] },
4968
- { "name": "data-uri", "values": [] },
4969
- { "name": "flush", "values": [] },
4970
- { "name": "flush-x", "values": [] },
4971
- { "name": "flush-y", "values": [] },
4972
- { "name": "inline", "values": [] },
4973
- {
4974
- "name": "plain",
4975
- "description": "Renders the caption in the normal table-content weight instead of bold.",
4976
- "values": []
4977
- },
4978
- {
4979
- "name": "grouped",
4980
- "description": "Set by `zn-tile-group` to lay the tile out as a shared-column subgrid row.",
4981
- "values": []
4982
- }
4983
- ],
4984
- "references": [
4985
- { "name": "Documentation", "url": "https://zinc.style/components/tile" }
4986
- ]
4987
- },
4988
- {
4989
- "name": "zn-tile-group",
4990
- "description": "Aligns a list of `zn-tile` rows into shared, content-driven columns so values\nand actions line up across every row, with optional dividing borders.\n---\n\n\n### **Slots:**\n - _default_ - One or more `zn-tile` elements.\n\n### **CSS Properties:**\n - **--zn-tile-cols** - The number of value/action columns (set automatically). _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper (the grid container).",
4991
- "attributes": [
4992
- {
4993
- "name": "divide",
4994
- "description": "Draws a dividing border between rows.",
4995
- "values": []
4996
- }
4997
- ],
4998
- "references": [
4999
- {
5000
- "name": "Documentation",
5001
- "url": "https://zinc.style/components/tile-group"
5002
- }
5003
- ]
5004
- },
5005
- {
5006
- "name": "zn-tile-property",
5007
- "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.",
5008
- "attributes": [
5009
- { "name": "caption", "values": [] },
5010
- { "name": "description", "values": [] },
5011
- { "name": "icon", "values": [] }
5012
- ],
5013
- "references": [
5014
- {
5015
- "name": "Documentation",
5016
- "url": "https://zinc.style/components/tile-property"
5017
- }
5018
- ]
5019
- },
5020
4981
  {
5021
4982
  "name": "zn-thumbnail-group",
5022
4983
  "description": "Lays a set of `zn-thumbnail` elements out as a single scrollable row, with a\n\"Show All\" toggle that expands them into a wrapping grid.\n---\n\n\n### **Events:**\n - **zn-expand** - Emitted when the group expands into the full grid.\n- **zn-collapse** - Emitted when the group collapses back to a single row.\n- **zn-change** - Emitted when the selected thumbnail changes (`selectable` groups only).\n\n### **Methods:**\n - **show()** - Expands the group into the full grid.\n- **hide()** - Collapses the group back to a single row.\n\n### **Slots:**\n - _default_ - One or more `zn-thumbnail` elements.\n- **caption** - Replaces the heading text.\n- **actions** - Extra content in the header, before the toggle.\n\n### **CSS Properties:**\n - **--zn-thumbnail-width** - Track width of a thumbnail. Defaults to 180px. Also settable with the `thumbnail-width` attribute. _(default: undefined)_\n- **--zn-thumbnail-gap** - Gap between thumbnails. Also settable with the `gap` attribute. _(default: undefined)_\n- **--zn-thumbnail-aspect-ratio** - Aspect ratio of every thumbnail in the group. Also settable with the `aspect-ratio` attribute. Any `zn-thumbnail` custom property set here is inherited by the slotted thumbnails. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **header** - The header row holding the caption and toggle.\n- **caption** - The heading text.\n- **toggle** - The show all / show less button.\n- **items** - The scrolling row / expanded grid that holds the thumbnails.",
@@ -5089,6 +5050,67 @@
5089
5050
  }
5090
5051
  ]
5091
5052
  },
5053
+ {
5054
+ "name": "zn-tile",
5055
+ "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.",
5056
+ "attributes": [
5057
+ { "name": "caption", "values": [] },
5058
+ { "name": "description", "values": [] },
5059
+ { "name": "href", "values": [] },
5060
+ { "name": "data-target", "values": [] },
5061
+ { "name": "gaid", "values": [] },
5062
+ { "name": "data-uri", "values": [] },
5063
+ { "name": "flush", "values": [] },
5064
+ { "name": "flush-x", "values": [] },
5065
+ { "name": "flush-y", "values": [] },
5066
+ { "name": "inline", "values": [] },
5067
+ {
5068
+ "name": "plain",
5069
+ "description": "Renders the caption in the normal table-content weight instead of bold.",
5070
+ "values": []
5071
+ },
5072
+ {
5073
+ "name": "grouped",
5074
+ "description": "Set by `zn-tile-group` to lay the tile out as a shared-column subgrid row.",
5075
+ "values": []
5076
+ }
5077
+ ],
5078
+ "references": [
5079
+ { "name": "Documentation", "url": "https://zinc.style/components/tile" }
5080
+ ]
5081
+ },
5082
+ {
5083
+ "name": "zn-tile-group",
5084
+ "description": "Aligns a list of `zn-tile` rows into shared, content-driven columns so values\nand actions line up across every row, with optional dividing borders.\n---\n\n\n### **Slots:**\n - _default_ - One or more `zn-tile` elements.\n\n### **CSS Properties:**\n - **--zn-tile-cols** - The number of value/action columns (set automatically). _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper (the grid container).",
5085
+ "attributes": [
5086
+ {
5087
+ "name": "divide",
5088
+ "description": "Draws a dividing border between rows.",
5089
+ "values": []
5090
+ }
5091
+ ],
5092
+ "references": [
5093
+ {
5094
+ "name": "Documentation",
5095
+ "url": "https://zinc.style/components/tile-group"
5096
+ }
5097
+ ]
5098
+ },
5099
+ {
5100
+ "name": "zn-tile-property",
5101
+ "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.",
5102
+ "attributes": [
5103
+ { "name": "caption", "values": [] },
5104
+ { "name": "description", "values": [] },
5105
+ { "name": "icon", "values": [] }
5106
+ ],
5107
+ "references": [
5108
+ {
5109
+ "name": "Documentation",
5110
+ "url": "https://zinc.style/components/tile-property"
5111
+ }
5112
+ ]
5113
+ },
5092
5114
  {
5093
5115
  "name": "zn-timer",
5094
5116
  "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.",
@@ -5186,7 +5208,7 @@
5186
5208
  },
5187
5209
  {
5188
5210
  "name": "zn-translation-group",
5189
- "description": "Puts several zn-translations fields behind one language select, so a whole form's worth of copy is\ntranslated a language at a time.\n---\n\n\n### **Events:**\n - **zn-language-change** - Emitted when the active language changes. Detail: `{ language: string }`.\n\n### **Slots:**\n - _default_ - The `zn-translations` fields the select drives.\n- **actions** - Buttons for the bottom of the panel, on the white body rather than the grey footer. They sit on the right, as zinc's form action rows do; `align=\"start\"` moves one to the left. Write them in the order they should be read — the sides are set by CSS ordering, so markup order is what a keyboard follows.\n- **footer** - Content displayed in the grey panel footer.\n\n### **CSS Properties:**\n - **--zn-panel-basis** - The flex-basis of the panel. Can be set using the basis-px attribute. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **form-group** - The form group holding the caption, the language select and the fields.\n- **actions** - The row of buttons at the bottom of the body.\n- **language-field** - The select that chooses the language every child is editing, in the group's chip slot.\n- **language-select** - The select itself.",
5211
+ "description": "Puts several zn-translations fields behind one language select, so a whole form's worth of copy is\ntranslated a language at a time.\n---\n\n\n### **Events:**\n - **zn-language-change** - Emitted when the active language changes. Detail: `{ language: string }`.\n\n### **Slots:**\n - _default_ - The `zn-translations` fields the select drives.\n- **actions** - Buttons for the bottom of the panel, on the white body rather than the grey footer. They sit on the right, as zinc's form action rows do; `align=\"start\"` moves one to the left. Write them in the order they should be read — the sides are set by CSS ordering, so markup order is what a keyboard follows.\n- **footer** - Content displayed in the grey panel footer.\n\n### **CSS Properties:**\n - **--zn-panel-basis** - The flex-basis of the panel. Can be set using the basis-px attribute. _(default: undefined)_\n- **--zn-panel-header-padding** - Padding around the header row. Defaults to `--zn-base-gap`. _(default: undefined)_\n- **--zn-panel-footer-padding** - Padding around the footer row. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **form-group** - The form group holding the caption, the language select and the fields.\n- **actions** - The row of buttons at the bottom of the body.\n- **language-field** - The select that chooses the language every child is editing, in the group's chip slot.\n- **language-select** - The select itself.\n- **header** - The header region, when a caption or actions are given.\n- **header-content** - The padded row inside the header, forwarded from zn-header.\n- **footer** - The footer region, when the footer slot is filled.",
5190
5212
  "attributes": [
5191
5213
  {
5192
5214
  "name": "label",