@kubex/zinc 1.1.160 → 1.1.162

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 (34) hide show
  1. package/dist/custom-elements.json +1086 -892
  2. package/dist/vscode.html-custom-data.json +95 -87
  3. package/dist/web-types.json +192 -181
  4. package/dist/zn.d.ts +32 -9
  5. package/dist/zn.min.css +1 -1
  6. package/dist/zn.min.js +367 -330
  7. package/docs/pages/components/data-table.md +30 -20
  8. package/package.json +1 -1
  9. package/scss/themes/_dark.scss +1 -0
  10. package/scss/themes/_light.scss +1 -0
  11. package/src/components/button/button.component.ts +4 -0
  12. package/src/components/button/button.scss +5 -0
  13. package/src/components/button/button.test.ts +10 -0
  14. package/src/components/checkbox/checkbox.component.ts +10 -6
  15. package/src/components/checkbox/checkbox.scss +4 -8
  16. package/src/components/content-block/content-block.component.ts +2 -3
  17. package/src/components/data-table/data-table.component.ts +171 -76
  18. package/src/components/data-table/data-table.scss +16 -60
  19. package/src/components/dropdown/dropdown.component.ts +6 -3
  20. package/src/components/flow-builder/modules/flow-node/flow-node.test.ts +2 -3
  21. package/src/components/flow-builder/modules/flow-step-group/flow-step-group.test.ts +14 -8
  22. package/src/components/form-actions/form-actions.test.ts +4 -1
  23. package/src/components/form-group/form-group.component.ts +45 -15
  24. package/src/components/navbar/navbar.test.ts +3 -2
  25. package/src/components/page/page.component.ts +1 -1
  26. package/src/components/page/page.test.ts +16 -16
  27. package/src/components/panel/panel.scss +23 -0
  28. package/src/components/popup/popup.component.ts +8 -1
  29. package/src/components/sp/sp.test.ts +2 -2
  30. package/src/components/theme-editor/theme-editor.component.ts +3 -2
  31. package/src/components/theme-editor/theme-editor.test.ts +30 -28
  32. package/src/components/tooltip/tooltip.component.ts +10 -1
  33. package/src/components/tooltip/tooltip.scss +5 -0
  34. package/src/components/translation-group/translation-group.test.ts +0 -2
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
3
3
  "name": "@kubex/zinc",
4
- "version": "1.1.160",
4
+ "version": "1.1.162",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {
@@ -520,6 +520,11 @@
520
520
  "description": "Accessible name for the button. Icon-only buttons fall back to `tooltip`.",
521
521
  "value": { "type": "string" }
522
522
  },
523
+ {
524
+ "name": "aria-pressed",
525
+ "description": "Toggle state, forwarded to the inner button's `aria-pressed`.",
526
+ "value": { "type": "'true' | 'false' | 'mixed'" }
527
+ },
523
528
  {
524
529
  "name": "auto-click",
525
530
  "value": { "type": "boolean", "default": "false" }
@@ -648,6 +653,11 @@
648
653
  "description": "Accessible name for the button. Icon-only buttons fall back to `tooltip`.",
649
654
  "type": "string"
650
655
  },
656
+ {
657
+ "name": "pressed",
658
+ "description": "Toggle state, forwarded to the inner button's `aria-pressed`.",
659
+ "type": "'true' | 'false' | 'mixed'"
660
+ },
651
661
  { "name": "autoClick", "type": "boolean" },
652
662
  { "name": "autoClickDelay", "type": "number" },
653
663
  { "name": "loadingText", "type": "string" },
@@ -1302,7 +1312,7 @@
1302
1312
  },
1303
1313
  {
1304
1314
  "name": "zn-checkbox",
1305
- "description": "Short summary of the component's intended use.\n\n---\n\n\n### **Events:**\n - **zn-blur** - Emitted when the checkbox loses focus.\n- **zn-change** - Emitted when the checked state changes.\n- **zn-focus** - Emitted when the checkbox gains focus.\n- **zn-input** - Emitted when the checkbox receives input.\n- **zn-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **click()** - Simulates a click on the checkbox.\n- **focus(options: _FocusOptions_)** - Sets focus on the checkbox.\n- **blur()** - Removes focus from the checkbox.\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. The value provided will be shown to the user when the form is submitted. To clear\nthe custom validation message, call this method with an empty string.\n\n### **Slots:**\n - _default_ - The checkbox's label.\n- **image** - Replaces the built-in image used by contained checkboxes.\n- **description** - A description of the checkbox's label. Serves as help text for a checkbox item. Alternatively, you can use the `description` attribute.\n- **selected-content** - Use to nest rich content (like an input) inside a selected checkbox item. Use only with the contained style.\n\n### **CSS Properties:**\n - **--zn-selection-card-image-width** - Width of the built-in card image. _(default: undefined)_\n- **--zn-selection-card-image-height** - Height of the built-in card image. _(default: undefined)_\n- **--zn-selection-card-min-height** - Minimum height of a contained checkbox with an image. _(default: undefined)_\n- **--zn-selection-card-content-min-width** - Width the card text keeps before it wraps below the image. _(default: undefined)_\n- **--zn-selection-card-title-font-size** - Font size of a selection card title. _(default: undefined)_\n- **--zn-selection-card-padding** - Equal inset around the contents of a selection card. _(default: undefined)_\n- **--zn-selection-card-gap** - Space between the image, title, and indicator gutter. _(default: undefined)_\n- **--zn-selection-card-control-offset** - Distance between a positioned control and the card edge. _(default: undefined)_\n- **--zn-selection-card-border-radius** - Corner radius of a contained container. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **control** - The square container that wraps the checkbox's checked state.\n- **control--checked** - Matches the control part when the checkbox is checked.\n- **control--indeterminate** - Matches the control part when the checkbox is indeterminate.\n- **checked-icon** - The checked icon, an `<zn-icon>` element.\n- **unchecked-icon** - The unchecked icon, an `<zn-icon>` element.\n- **indeterminate-icon** - The indeterminate icon, an `<zn-icon>` element.\n- **image-container** - The wrapper around the built-in image or image slot.\n- **image** - The built-in image.\n- **card-title** - The title inside a selection card.\n- **label** - The container that wraps the checkbox's label.\n- **description** - The container that wraps the checkbox's description.\n- **selected-content** - The container that wraps optional content that appears when a checkbox is checked.",
1315
+ "description": "Short summary of the component's intended use.\n\n---\n\n\n### **Events:**\n - **zn-blur** - Emitted when the checkbox loses focus.\n- **zn-change** - Emitted when the checked state changes.\n- **zn-focus** - Emitted when the checkbox gains focus.\n- **zn-input** - Emitted when the checkbox receives input.\n- **zn-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **click()** - Simulates a click on the checkbox.\n- **focus(options: _FocusOptions_)** - Sets focus on the checkbox.\n- **blur()** - Removes focus from the checkbox.\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. The value provided will be shown to the user when the form is submitted. To clear\nthe custom validation message, call this method with an empty string.\n\n### **Slots:**\n - _default_ - The checkbox's label.\n- **image** - Replaces the built-in image used by contained checkboxes.\n- **description** - A description of the checkbox's label. Serves as help text for a checkbox item. Alternatively, you can use the `description` attribute.\n- **selected-content** - Use to nest rich content (like an input) inside a selected checkbox item. Use only with the contained style.\n\n### **CSS Properties:**\n - **--zn-selection-card-image-width** - Width of the built-in card image. _(default: undefined)_\n- **--zn-selection-card-image-height** - Height of the built-in card image. _(default: undefined)_\n- **--zn-selection-card-min-height** - Minimum height of a contained checkbox with an image. _(default: undefined)_\n- **--zn-selection-card-content-min-width** - Width the card text keeps before it wraps below the image. _(default: undefined)_\n- **--zn-selection-card-title-font-size** - Font size of a selection card title. _(default: undefined)_\n- **--zn-selection-card-padding** - Equal inset around the contents of a selection card. _(default: undefined)_\n- **--zn-selection-card-gap** - Space between the image, title, and indicator gutter. _(default: undefined)_\n- **--zn-selection-card-control-offset** - Distance between a positioned control and the card edge. _(default: undefined)_\n- **--zn-selection-card-border-radius** - Corner radius of a contained container. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **control** - The square container that wraps the checkbox's checked state.\n- **control--checked** - Matches the control part when the checkbox is checked.\n- **control--indeterminate** - Matches the control part when the checkbox is indeterminate.\n- **checked-icon** - The checked icon, an `<zn-icon>` element.\n- **unchecked-icon** - The unchecked icon, an `<zn-icon>` element.\n- **indeterminate-icon** - The indeterminate icon, an `<svg>` element.\n- **image-container** - The wrapper around the built-in image or image slot.\n- **image** - The built-in image.\n- **card-title** - The title inside a selection card.\n- **label** - The container that wraps the checkbox's label.\n- **description** - The container that wraps the checkbox's description.\n- **selected-content** - The container that wraps optional content that appears when a checkbox is checked.",
1306
1316
  "doc-url": "",
1307
1317
  "attributes": [
1308
1318
  { "name": "title", "value": { "type": "string", "default": "''" } },
@@ -2682,7 +2692,7 @@
2682
2692
  },
2683
2693
  {
2684
2694
  "name": "zn-data-table",
2685
- "description": "Short summary of the component's intended use.\n\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.",
2695
+ "description": "Short summary of the component's intended use.\n\n---\n\n\n### **Methods:**\n - **selectAll()** - Selects every row on the page, or clears the selection when every row is already selected.\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 in the header once rows are selected.\n- **modify-action** - Slot for modify action button, shown in the header once rows are selected.\n- **actions** - `zn-button` or `zn-confirm` elements listed in a header menu, enabled 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.",
2686
2696
  "doc-url": "",
2687
2697
  "attributes": [
2688
2698
  { "name": "data-uri", "value": { "type": "string" } },
@@ -2751,7 +2761,6 @@
2751
2761
  "name": "empty-state-icon",
2752
2762
  "value": { "type": "string", "default": "\"data_alert\"" }
2753
2763
  },
2754
- { "name": "hide-checkboxes", "value": { "type": "boolean" } },
2755
2764
  { "name": "filters", "value": { "type": "[]", "default": "[]" } },
2756
2765
  {
2757
2766
  "name": "method",
@@ -2804,11 +2813,15 @@
2804
2813
  },
2805
2814
  {
2806
2815
  "name": "delete-action",
2807
- "description": "Slot for delete action button, shown beside the caption once rows are selected."
2816
+ "description": "Slot for delete action button, shown in the header once rows are selected."
2808
2817
  },
2809
2818
  {
2810
2819
  "name": "modify-action",
2811
- "description": "Slot for modify action button, shown beside the caption once rows are selected."
2820
+ "description": "Slot for modify action button, shown in the header once rows are selected."
2821
+ },
2822
+ {
2823
+ "name": "actions",
2824
+ "description": "`zn-button` or `zn-confirm` elements listed in a header menu, enabled once rows are selected."
2812
2825
  },
2813
2826
  {
2814
2827
  "name": "create-action",
@@ -2855,7 +2868,6 @@
2855
2868
  { "name": "caption", "type": "string" },
2856
2869
  { "name": "emptyStateCaption", "type": "string" },
2857
2870
  { "name": "emptyStateIcon", "type": "string" },
2858
- { "name": "hideCheckboxes", "type": "boolean" },
2859
2871
  { "name": "filters", "type": "[]" },
2860
2872
  { "name": "method", "type": "'GET' | 'POST'" },
2861
2873
  { "name": "noInitialLoad", "type": "boolean" },
@@ -2872,7 +2884,6 @@
2872
2884
  { "name": "groupBy", "type": "string" },
2873
2885
  { "name": "groups", "type": "string" },
2874
2886
  { "name": "itemsPerPage", "type": "number" },
2875
- { "name": "selectAllButton", "type": "ZnButton" },
2876
2887
  { "name": "requestParams", "type": "Record<string, any>" },
2877
2888
  { "name": "filterClearListener" },
2878
2889
  { "name": "filterChangeListener" },
@@ -8487,49 +8498,94 @@
8487
8498
  }
8488
8499
  },
8489
8500
  {
8490
- "name": "zn-reveal",
8491
- "description": "Short summary of the component's intended use.\n\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.",
8501
+ "name": "zn-rating",
8502
+ "description": "Short summary of the component's intended use.\n\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Methods:**\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()** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n- **help-text** - Text that describes how to use the rating. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n- **--preview-color** - The color of the preview value. _(default: undefined)_\n- **--preview-size** - The font size of the preview value. _(default: undefined)_\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the symbols and help text.\n- **form-control-help-text** - The help text's wrapper.\n- **base** - The component's base wrapper.\n- **preview** - The value shown next to the symbols when `preview` is enabled.",
8492
8503
  "doc-url": "",
8493
8504
  "attributes": [
8505
+ { "name": "label", "value": { "type": "string" } },
8494
8506
  {
8495
- "name": "duration",
8496
- "value": { "type": "number", "default": "2000" }
8507
+ "name": "help-text",
8508
+ "description": "The rating's help text. If you need to display HTML, use the `help-text` slot instead.",
8509
+ "value": { "type": "string", "default": "''" }
8497
8510
  },
8511
+ { "name": "name", "value": { "type": "string" } },
8512
+ { "name": "value", "value": { "type": "number", "default": "0" } },
8513
+ { "name": "max", "value": { "type": "number", "default": "5" } },
8498
8514
  {
8499
- "name": "initial",
8500
- "value": { "type": "string", "default": "''" }
8515
+ "name": "precision",
8516
+ "value": { "type": "number", "default": "1" }
8501
8517
  },
8502
8518
  {
8503
- "name": "revealed",
8504
- "value": { "type": "string", "default": "''" }
8519
+ "name": "readonly",
8520
+ "value": { "type": "boolean", "default": "false" }
8505
8521
  },
8506
8522
  {
8507
- "name": "hide-delay",
8508
- "value": { "type": "number", "default": "150" }
8523
+ "name": "disabled",
8524
+ "value": { "type": "boolean", "default": "false" }
8509
8525
  },
8510
8526
  {
8511
- "name": "no-toggle",
8512
- "description": "Disables click-to-toggle so the value is only revealed on hover. Clicks still bubble to the parent.",
8527
+ "name": "preview",
8528
+ "description": "Displays the value alongside the symbols, updating live as the pointer moves across them.",
8513
8529
  "value": { "type": "boolean", "default": "false" }
8530
+ },
8531
+ {
8532
+ "name": "size",
8533
+ "value": {
8534
+ "type": "'small' | 'medium' | 'large'",
8535
+ "default": "'medium'"
8536
+ }
8537
+ },
8538
+ {
8539
+ "name": "getSymbol",
8540
+ "value": { "type": "(value: number) => string" }
8514
8541
  }
8515
8542
  ],
8516
8543
  "slots": [
8517
8544
  { "name": "", "description": "The default slot." },
8518
- { "name": "example", "description": "An example slot." }
8545
+ { "name": "example", "description": "An example slot." },
8546
+ {
8547
+ "name": "help-text",
8548
+ "description": "Text that describes how to use the rating. Alternatively, you can use the `help-text` attribute."
8549
+ }
8519
8550
  ],
8520
8551
  "events": [
8521
8552
  { "name": "zn-event-name", "description": "Emitted as an example." }
8522
8553
  ],
8523
8554
  "js": {
8524
8555
  "properties": [
8525
- { "name": "duration", "type": "number" },
8526
- { "name": "initial", "type": "string" },
8527
- { "name": "revealed", "type": "string" },
8528
- { "name": "hideDelay", "type": "number" },
8556
+ { "name": "rating", "type": "HTMLElement" },
8557
+ { "name": "symbols", "type": "HTMLElement" },
8558
+ { "name": "label", "type": "string" },
8529
8559
  {
8530
- "name": "noToggle",
8531
- "description": "Disables click-to-toggle so the value is only revealed on hover. Clicks still bubble to the parent.",
8560
+ "name": "helpText",
8561
+ "description": "The rating's help text. If you need to display HTML, use the `help-text` slot instead.",
8562
+ "type": "string"
8563
+ },
8564
+ { "name": "name", "type": "string" },
8565
+ { "name": "value", "type": "number" },
8566
+ {
8567
+ "name": "defaultValue",
8568
+ "description": "The default value of the form control. Primarily used for resetting the form control.",
8569
+ "type": "number"
8570
+ },
8571
+ { "name": "max", "type": "number" },
8572
+ { "name": "precision", "type": "number" },
8573
+ { "name": "readonly", "type": "boolean" },
8574
+ { "name": "disabled", "type": "boolean" },
8575
+ {
8576
+ "name": "preview",
8577
+ "description": "Displays the value alongside the symbols, updating live as the pointer moves across them.",
8532
8578
  "type": "boolean"
8579
+ },
8580
+ { "name": "size", "type": "'small' | 'medium' | 'large'" },
8581
+ { "name": "getSymbol", "type": "(value: number) => string" },
8582
+ {
8583
+ "name": "validity",
8584
+ "description": "Gets the validity state object"
8585
+ },
8586
+ {
8587
+ "name": "validationMessage",
8588
+ "description": "Gets the validation message"
8533
8589
  }
8534
8590
  ],
8535
8591
  "events": [
@@ -8689,94 +8745,49 @@
8689
8745
  }
8690
8746
  },
8691
8747
  {
8692
- "name": "zn-rating",
8693
- "description": "Short summary of the component's intended use.\n\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Methods:**\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()** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n- **help-text** - Text that describes how to use the rating. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n- **--preview-color** - The color of the preview value. _(default: undefined)_\n- **--preview-size** - The font size of the preview value. _(default: undefined)_\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the symbols and help text.\n- **form-control-help-text** - The help text's wrapper.\n- **base** - The component's base wrapper.\n- **preview** - The value shown next to the symbols when `preview` is enabled.",
8748
+ "name": "zn-reveal",
8749
+ "description": "Short summary of the component's intended use.\n\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.",
8694
8750
  "doc-url": "",
8695
8751
  "attributes": [
8696
- { "name": "label", "value": { "type": "string" } },
8697
8752
  {
8698
- "name": "help-text",
8699
- "description": "The rating's help text. If you need to display HTML, use the `help-text` slot instead.",
8700
- "value": { "type": "string", "default": "''" }
8753
+ "name": "duration",
8754
+ "value": { "type": "number", "default": "2000" }
8701
8755
  },
8702
- { "name": "name", "value": { "type": "string" } },
8703
- { "name": "value", "value": { "type": "number", "default": "0" } },
8704
- { "name": "max", "value": { "type": "number", "default": "5" } },
8705
8756
  {
8706
- "name": "precision",
8707
- "value": { "type": "number", "default": "1" }
8757
+ "name": "initial",
8758
+ "value": { "type": "string", "default": "''" }
8708
8759
  },
8709
8760
  {
8710
- "name": "readonly",
8711
- "value": { "type": "boolean", "default": "false" }
8761
+ "name": "revealed",
8762
+ "value": { "type": "string", "default": "''" }
8712
8763
  },
8713
8764
  {
8714
- "name": "disabled",
8715
- "value": { "type": "boolean", "default": "false" }
8765
+ "name": "hide-delay",
8766
+ "value": { "type": "number", "default": "150" }
8716
8767
  },
8717
8768
  {
8718
- "name": "preview",
8719
- "description": "Displays the value alongside the symbols, updating live as the pointer moves across them.",
8769
+ "name": "no-toggle",
8770
+ "description": "Disables click-to-toggle so the value is only revealed on hover. Clicks still bubble to the parent.",
8720
8771
  "value": { "type": "boolean", "default": "false" }
8721
- },
8722
- {
8723
- "name": "size",
8724
- "value": {
8725
- "type": "'small' | 'medium' | 'large'",
8726
- "default": "'medium'"
8727
- }
8728
- },
8729
- {
8730
- "name": "getSymbol",
8731
- "value": { "type": "(value: number) => string" }
8732
8772
  }
8733
8773
  ],
8734
8774
  "slots": [
8735
8775
  { "name": "", "description": "The default slot." },
8736
- { "name": "example", "description": "An example slot." },
8737
- {
8738
- "name": "help-text",
8739
- "description": "Text that describes how to use the rating. Alternatively, you can use the `help-text` attribute."
8740
- }
8776
+ { "name": "example", "description": "An example slot." }
8741
8777
  ],
8742
8778
  "events": [
8743
8779
  { "name": "zn-event-name", "description": "Emitted as an example." }
8744
8780
  ],
8745
8781
  "js": {
8746
8782
  "properties": [
8747
- { "name": "rating", "type": "HTMLElement" },
8748
- { "name": "symbols", "type": "HTMLElement" },
8749
- { "name": "label", "type": "string" },
8750
- {
8751
- "name": "helpText",
8752
- "description": "The rating's help text. If you need to display HTML, use the `help-text` slot instead.",
8753
- "type": "string"
8754
- },
8755
- { "name": "name", "type": "string" },
8756
- { "name": "value", "type": "number" },
8757
- {
8758
- "name": "defaultValue",
8759
- "description": "The default value of the form control. Primarily used for resetting the form control.",
8760
- "type": "number"
8761
- },
8762
- { "name": "max", "type": "number" },
8763
- { "name": "precision", "type": "number" },
8764
- { "name": "readonly", "type": "boolean" },
8765
- { "name": "disabled", "type": "boolean" },
8783
+ { "name": "duration", "type": "number" },
8784
+ { "name": "initial", "type": "string" },
8785
+ { "name": "revealed", "type": "string" },
8786
+ { "name": "hideDelay", "type": "number" },
8766
8787
  {
8767
- "name": "preview",
8768
- "description": "Displays the value alongside the symbols, updating live as the pointer moves across them.",
8788
+ "name": "noToggle",
8789
+ "description": "Disables click-to-toggle so the value is only revealed on hover. Clicks still bubble to the parent.",
8769
8790
  "type": "boolean"
8770
- },
8771
- { "name": "size", "type": "'small' | 'medium' | 'large'" },
8772
- { "name": "getSymbol", "type": "(value: number) => string" },
8773
- {
8774
- "name": "validity",
8775
- "description": "Gets the validity state object"
8776
- },
8777
- {
8778
- "name": "validationMessage",
8779
- "description": "Gets the validation message"
8780
8791
  }
8781
8792
  ],
8782
8793
  "events": [
@@ -11600,96 +11611,6 @@
11600
11611
  ]
11601
11612
  }
11602
11613
  },
11603
- {
11604
- "name": "zn-tile",
11605
- "description": "Short summary of the component's intended use.\n\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.",
11606
- "doc-url": "",
11607
- "attributes": [
11608
- { "name": "caption", "value": { "type": "string" } },
11609
- { "name": "description", "value": { "type": "string" } },
11610
- { "name": "href", "value": { "type": "string" } },
11611
- { "name": "data-target", "value": { "type": "string" } },
11612
- { "name": "gaid", "value": { "type": "string" } },
11613
- { "name": "data-uri", "value": { "type": "string" } },
11614
- { "name": "flush", "value": { "type": "boolean" } },
11615
- { "name": "flush-x", "value": { "type": "boolean" } },
11616
- { "name": "flush-y", "value": { "type": "boolean" } },
11617
- { "name": "inline", "value": { "type": "boolean" } },
11618
- {
11619
- "name": "plain",
11620
- "description": "Renders the caption in the normal table-content weight instead of bold.",
11621
- "value": { "type": "boolean" }
11622
- },
11623
- {
11624
- "name": "grouped",
11625
- "description": "Set by `zn-tile-group` to lay the tile out as a shared-column subgrid row.",
11626
- "value": { "type": "boolean" }
11627
- }
11628
- ],
11629
- "slots": [
11630
- { "name": "", "description": "The default slot." },
11631
- { "name": "example", "description": "An example slot." }
11632
- ],
11633
- "events": [
11634
- { "name": "zn-event-name", "description": "Emitted as an example." }
11635
- ],
11636
- "js": {
11637
- "properties": [
11638
- { "name": "caption", "type": "string" },
11639
- { "name": "description", "type": "string" },
11640
- { "name": "href", "type": "string" },
11641
- { "name": "dataTarget", "type": "string" },
11642
- { "name": "gaid", "type": "string" },
11643
- { "name": "dataUri", "type": "string" },
11644
- { "name": "flush", "type": "boolean" },
11645
- { "name": "flushX", "type": "boolean" },
11646
- { "name": "flushY", "type": "boolean" },
11647
- { "name": "inline", "type": "boolean" },
11648
- {
11649
- "name": "plain",
11650
- "description": "Renders the caption in the normal table-content weight instead of bold.",
11651
- "type": "boolean"
11652
- },
11653
- {
11654
- "name": "grouped",
11655
- "description": "Set by `zn-tile-group` to lay the tile out as a shared-column subgrid row.",
11656
- "type": "boolean"
11657
- }
11658
- ],
11659
- "events": [
11660
- {
11661
- "name": "zn-event-name",
11662
- "description": "Emitted as an example."
11663
- }
11664
- ]
11665
- }
11666
- },
11667
- {
11668
- "name": "zn-tile-group",
11669
- "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\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).",
11670
- "doc-url": "",
11671
- "attributes": [
11672
- {
11673
- "name": "divide",
11674
- "description": "Draws a dividing border between rows.",
11675
- "value": { "type": "boolean", "default": "false" }
11676
- }
11677
- ],
11678
- "slots": [
11679
- { "name": "", "description": "One or more `zn-tile` elements." }
11680
- ],
11681
- "events": [],
11682
- "js": {
11683
- "properties": [
11684
- {
11685
- "name": "divide",
11686
- "description": "Draws a dividing border between rows.",
11687
- "type": "boolean"
11688
- }
11689
- ],
11690
- "events": []
11691
- }
11692
- },
11693
11614
  {
11694
11615
  "name": "zn-thumbnail",
11695
11616
  "description": "A captioned image tile — a fixed aspect-ratio preview with a title beneath it, optional\ncorner badges and actions, and an optional full-screen preview that grows out of the thumbnail.\n\n---\n\n\n### **Events:**\n - **zn-select** - Emitted when an enabled thumbnail is activated by click or keyboard. Cancelable — call `preventDefault()` to stop the preview from opening and to stop a parent `zn-thumbnail-group` from changing its selection.\n- **zn-show** - Emitted when the preview overlay starts opening.\n- **zn-close** - Emitted once the preview overlay has finished closing.\n\n### **Methods:**\n - **showPreview()** - Opens the preview overlay.\n- **hidePreview()** - Closes the preview overlay.\n\n### **Slots:**\n - _default_ - Fallback content rendered in place of the media when no `src` is set.\n- **image** - Replaces the built-in `<img>` (e.g. a video, canvas or `zn-icon`).\n- **caption** - Replaces the caption text.\n- **badge** - Content pinned to the bottom-left of the media (e.g. a play indicator). Badges take no pointer events and are held back on opacity, so they read as information about the asset rather than as something to click.\n- **actions** - Controls pinned to the bottom-right of the media (e.g. a download button). Each slotted element becomes its own chip, so several actions read as separate icons on the thumbnail rather than one grouped pill. This sits outside the thumbnail's link, so buttons and links here behave normally and never select the thumbnail or follow its `href`.\n- **preview** - Replaces the preview media (e.g. a `<video>` for the full-size asset).\n\n### **CSS Properties:**\n - **--zn-thumbnail-aspect-ratio** - Aspect ratio of the media frame. Defaults to 16 / 9. The `aspect-ratio` attribute sets this on the thumbnail itself; set the property on any ancestor (including a `zn-thumbnail-group`) to apply it to every thumbnail beneath it. _(default: undefined)_\n- **--zn-thumbnail-radius** - Corner radius of the media frame. _(default: undefined)_\n- **--zn-thumbnail-preview-aspect-ratio** - Overrides the measured aspect ratio of the preview panel. By default the panel takes the asset's own ratio so it wraps the image exactly. _(default: undefined)_\n- **--zn-thumbnail-preview-max-width** - Largest width the preview may take. Defaults to 70vw. _(default: undefined)_\n- **--zn-thumbnail-preview-max-height** - Largest height the preview may take. Defaults to 70vh. _(default: undefined)_\n- **--zn-thumbnail-preview-radius** - Corner radius of the preview panel. _(default: undefined)_\n- **--zn-thumbnail-chip-radius** - Corner radius of a badge, action or preview chip. _(default: undefined)_\n- **--zn-thumbnail-chip-background** - Background of a badge, action or preview chip. _(default: undefined)_\n- **--zn-thumbnail-chip-background-hover** - Hover background of an action or preview chip. _(default: undefined)_\n- **--zn-thumbnail-chip-color** - Foreground colour of a badge, action or preview chip. _(default: undefined)_\n- **--zn-thumbnail-chip-gap** - Gap between adjacent chips. _(default: undefined)_\n- **--zn-thumbnail-badge-opacity** - Opacity of a badge, holding it back from the action chips beside it. Defaults to 0.65. _(default: undefined)_\n- **--zn-thumbnail-selected-color** - Ring colour for the selected state. _(default: undefined)_\n- **--zn-thumbnail-active-color** - Ring colour for the active state. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **link** - The anchor (or div) covering the media and caption.\n- **media** - The fixed aspect-ratio media frame.\n- **image** - The built-in image element.\n- **overlay** - The layer holding the badge, actions and preview button.\n- **badge** - The bottom-left badge container.\n- **actions** - The bottom-right actions container.\n- **preview-button** - The built-in preview trigger, when `preview-trigger=\"button\"`.\n- **caption** - The caption beneath the media.\n- **preview** - The preview `<dialog>`.\n- **preview-backdrop** - The full-screen backdrop behind the preview.\n- **preview-frame** - The rounded panel the preview media sits in.\n- **preview-image** - The full-size image inside the preview.\n- **preview-close** - The preview's close button.",
@@ -12082,6 +12003,96 @@
12082
12003
  ]
12083
12004
  }
12084
12005
  },
12006
+ {
12007
+ "name": "zn-tile",
12008
+ "description": "Short summary of the component's intended use.\n\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.",
12009
+ "doc-url": "",
12010
+ "attributes": [
12011
+ { "name": "caption", "value": { "type": "string" } },
12012
+ { "name": "description", "value": { "type": "string" } },
12013
+ { "name": "href", "value": { "type": "string" } },
12014
+ { "name": "data-target", "value": { "type": "string" } },
12015
+ { "name": "gaid", "value": { "type": "string" } },
12016
+ { "name": "data-uri", "value": { "type": "string" } },
12017
+ { "name": "flush", "value": { "type": "boolean" } },
12018
+ { "name": "flush-x", "value": { "type": "boolean" } },
12019
+ { "name": "flush-y", "value": { "type": "boolean" } },
12020
+ { "name": "inline", "value": { "type": "boolean" } },
12021
+ {
12022
+ "name": "plain",
12023
+ "description": "Renders the caption in the normal table-content weight instead of bold.",
12024
+ "value": { "type": "boolean" }
12025
+ },
12026
+ {
12027
+ "name": "grouped",
12028
+ "description": "Set by `zn-tile-group` to lay the tile out as a shared-column subgrid row.",
12029
+ "value": { "type": "boolean" }
12030
+ }
12031
+ ],
12032
+ "slots": [
12033
+ { "name": "", "description": "The default slot." },
12034
+ { "name": "example", "description": "An example slot." }
12035
+ ],
12036
+ "events": [
12037
+ { "name": "zn-event-name", "description": "Emitted as an example." }
12038
+ ],
12039
+ "js": {
12040
+ "properties": [
12041
+ { "name": "caption", "type": "string" },
12042
+ { "name": "description", "type": "string" },
12043
+ { "name": "href", "type": "string" },
12044
+ { "name": "dataTarget", "type": "string" },
12045
+ { "name": "gaid", "type": "string" },
12046
+ { "name": "dataUri", "type": "string" },
12047
+ { "name": "flush", "type": "boolean" },
12048
+ { "name": "flushX", "type": "boolean" },
12049
+ { "name": "flushY", "type": "boolean" },
12050
+ { "name": "inline", "type": "boolean" },
12051
+ {
12052
+ "name": "plain",
12053
+ "description": "Renders the caption in the normal table-content weight instead of bold.",
12054
+ "type": "boolean"
12055
+ },
12056
+ {
12057
+ "name": "grouped",
12058
+ "description": "Set by `zn-tile-group` to lay the tile out as a shared-column subgrid row.",
12059
+ "type": "boolean"
12060
+ }
12061
+ ],
12062
+ "events": [
12063
+ {
12064
+ "name": "zn-event-name",
12065
+ "description": "Emitted as an example."
12066
+ }
12067
+ ]
12068
+ }
12069
+ },
12070
+ {
12071
+ "name": "zn-tile-group",
12072
+ "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\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).",
12073
+ "doc-url": "",
12074
+ "attributes": [
12075
+ {
12076
+ "name": "divide",
12077
+ "description": "Draws a dividing border between rows.",
12078
+ "value": { "type": "boolean", "default": "false" }
12079
+ }
12080
+ ],
12081
+ "slots": [
12082
+ { "name": "", "description": "One or more `zn-tile` elements." }
12083
+ ],
12084
+ "events": [],
12085
+ "js": {
12086
+ "properties": [
12087
+ {
12088
+ "name": "divide",
12089
+ "description": "Draws a dividing border between rows.",
12090
+ "type": "boolean"
12091
+ }
12092
+ ],
12093
+ "events": []
12094
+ }
12095
+ },
12085
12096
  {
12086
12097
  "name": "zn-tile-property",
12087
12098
  "description": "Short summary of the component's intended use.\n\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.",