@kubex/zinc 1.1.121 → 1.1.122

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 (36) hide show
  1. package/dist/custom-elements.json +3110 -2079
  2. package/dist/vscode.html-custom-data.json +200 -178
  3. package/dist/web-types.json +528 -462
  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 +105 -42
  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/datepicker/datepicker.component.ts +23 -2
  23. package/src/components/datepicker/datepicker.scss +25 -0
  24. package/src/components/datepicker/datepicker.test.ts +28 -1
  25. package/src/components/input/input.component.ts +1 -0
  26. package/src/components/input/input.scss +1 -1
  27. package/src/components/menu/menu.component.ts +2 -0
  28. package/src/components/menu/menu.scss +23 -2
  29. package/src/components/menu-item/menu-item.component.ts +7 -1
  30. package/src/components/menu-item/menu-item.scss +4 -4
  31. package/src/components/menu-item/menu-item.test.ts +39 -1
  32. package/src/components/panel/panel.component.ts +12 -5
  33. package/src/components/panel/panel.scss +3 -3
  34. package/src/components/query-builder/query-builder.component.ts +1 -1
  35. package/src/components/tooltip/tooltip.component.ts +2 -2
  36. package/src/components/tooltip/tooltip.test.ts +70 -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.121",
4
+ "version": "1.1.122",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {
@@ -15,28 +15,6 @@
15
15
  "events": [],
16
16
  "js": { "properties": [], "events": [] }
17
17
  },
18
- {
19
- "name": "zn-action-bar",
20
- "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.",
21
- "doc-url": "",
22
- "attributes": [],
23
- "slots": [
24
- { "name": "", "description": "The default slot." },
25
- { "name": "example", "description": "An example slot." }
26
- ],
27
- "events": [
28
- { "name": "zn-event-name", "description": "Emitted as an example." }
29
- ],
30
- "js": {
31
- "properties": [],
32
- "events": [
33
- {
34
- "name": "zn-event-name",
35
- "description": "Emitted as an example."
36
- }
37
- ]
38
- }
39
- },
40
18
  {
41
19
  "name": "zn-alert",
42
20
  "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.",
@@ -105,6 +83,28 @@
105
83
  ]
106
84
  }
107
85
  },
86
+ {
87
+ "name": "zn-action-bar",
88
+ "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
89
+ "doc-url": "",
90
+ "attributes": [],
91
+ "slots": [
92
+ { "name": "", "description": "The default slot." },
93
+ { "name": "example", "description": "An example slot." }
94
+ ],
95
+ "events": [
96
+ { "name": "zn-event-name", "description": "Emitted as an example." }
97
+ ],
98
+ "js": {
99
+ "properties": [],
100
+ "events": [
101
+ {
102
+ "name": "zn-event-name",
103
+ "description": "Emitted as an example."
104
+ }
105
+ ]
106
+ }
107
+ },
108
108
  {
109
109
  "name": "zn-animated-button",
110
110
  "description": "\n---\n\n\n### **Methods:**\n - **purchase(): _void_** - Programmatically trigger the purchase flow\n- **setSuccess(): _void_** - Set the button to success state manually\n- **setFailure(message): _void_** - Set the button to failure state manually with optional error message\n- **reset(): _void_** - Reset the button to idle state",
@@ -441,6 +441,11 @@
441
441
  "description": "Disables the hover background, for contexts where the tint doesn't fit.",
442
442
  "value": { "type": "boolean", "default": "false" }
443
443
  },
444
+ {
445
+ "name": "pill",
446
+ "description": "Renders the button as a pill: fully rounded, sentence case and regular\nweight. For label-like triggers such as filter chips.",
447
+ "value": { "type": "boolean", "default": "false" }
448
+ },
444
449
  {
445
450
  "name": "panel-bg",
446
451
  "value": { "type": "boolean", "default": "false" }
@@ -597,6 +602,11 @@
597
602
  "description": "Disables the hover background, for contexts where the tint doesn't fit.",
598
603
  "type": "boolean"
599
604
  },
605
+ {
606
+ "name": "pill",
607
+ "description": "Renders the button as a pill: fully rounded, sentence case and regular\nweight. For label-like triggers such as filter chips.",
608
+ "type": "boolean"
609
+ },
600
610
  { "name": "panelBackground", "type": "boolean" },
601
611
  { "name": "dropdownCloser", "type": "boolean" },
602
612
  { "name": "notification", "type": "number" },
@@ -2657,7 +2667,7 @@
2657
2667
  },
2658
2668
  {
2659
2669
  "name": "zn-data-table",
2660
- "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.",
2670
+ "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.",
2661
2671
  "doc-url": "",
2662
2672
  "attributes": [
2663
2673
  { "name": "data-uri", "value": { "type": "string" } },
@@ -2708,6 +2718,14 @@
2708
2718
  "value": { "type": "boolean", "default": "false" }
2709
2719
  },
2710
2720
  { "name": "hide-pagination", "value": { "type": "boolean" } },
2721
+ {
2722
+ "name": "hide-column-select",
2723
+ "value": { "type": "boolean", "default": "false" }
2724
+ },
2725
+ {
2726
+ "name": "hide-refresh",
2727
+ "value": { "type": "boolean", "default": "false" }
2728
+ },
2711
2729
  {
2712
2730
  "name": "standalone",
2713
2731
  "value": { "type": "boolean", "default": "false" }
@@ -2743,24 +2761,33 @@
2743
2761
  ],
2744
2762
  "slots": [
2745
2763
  { "name": "", "description": "The default slot." },
2746
- { "name": "search", "description": "Slot for search component." },
2747
- { "name": "sort", "description": "Slot for sort component." },
2748
- { "name": "filter", "description": "Slot for filter component." },
2764
+ {
2765
+ "name": "search",
2766
+ "description": "Slot for search component, in the header's right-hand group."
2767
+ },
2768
+ {
2769
+ "name": "sort",
2770
+ "description": "Slot for sort component, in the header's right-hand group."
2771
+ },
2772
+ {
2773
+ "name": "filter",
2774
+ "description": "Slot for filter component, in the header's right-hand group."
2775
+ },
2749
2776
  {
2750
2777
  "name": "filter-top",
2751
- "description": "Slot for top-level filter component."
2778
+ "description": "Slot for a top-level filter component, rendered above the table's panel."
2752
2779
  },
2753
2780
  {
2754
2781
  "name": "delete-action",
2755
- "description": "Slot for delete action button."
2782
+ "description": "Slot for delete action button, shown beside the caption once rows are selected."
2756
2783
  },
2757
2784
  {
2758
2785
  "name": "modify-action",
2759
- "description": "Slot for modify action button."
2786
+ "description": "Slot for modify action button, shown beside the caption once rows are selected."
2760
2787
  },
2761
2788
  {
2762
2789
  "name": "create-action",
2763
- "description": "Slot for create action button."
2790
+ "description": "Slot for create action button, at the end of the header's right-hand group."
2764
2791
  },
2765
2792
  {
2766
2793
  "name": "inputs",
@@ -2797,6 +2824,8 @@
2797
2824
  { "name": "unsortableHeaders", "type": "string" },
2798
2825
  { "name": "unsortable", "type": "boolean" },
2799
2826
  { "name": "hidePagination", "type": "boolean" },
2827
+ { "name": "hideColumnSelect", "type": "boolean" },
2828
+ { "name": "hideRefresh", "type": "boolean" },
2800
2829
  { "name": "standalone", "type": "boolean" },
2801
2830
  { "name": "caption", "type": "string" },
2802
2831
  { "name": "emptyStateCaption", "type": "string" },
@@ -2810,6 +2839,7 @@
2810
2839
  { "name": "itemsPerPage", "type": "number" },
2811
2840
  { "name": "selectAllButton", "type": "ZnButton" },
2812
2841
  { "name": "requestParams", "type": "Record<string, any>" },
2842
+ { "name": "filterClearListener" },
2813
2843
  { "name": "filterChangeListener" },
2814
2844
  { "name": "searchChangeListener" }
2815
2845
  ],
@@ -2818,41 +2848,57 @@
2818
2848
  },
2819
2849
  {
2820
2850
  "name": "zn-data-table-filter",
2821
- "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.",
2851
+ "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.",
2822
2852
  "doc-url": "",
2823
2853
  "attributes": [
2824
2854
  {
2825
2855
  "name": "filters",
2826
- "value": { "type": "string", "default": "\"\"" }
2856
+ "value": { "type": "QueryBuilderData", "default": "[]" }
2827
2857
  },
2828
2858
  {
2829
2859
  "name": "name",
2830
2860
  "value": { "type": "string", "default": "\"data-table-filter\"" }
2831
2861
  },
2832
- { "name": "value", "value": { "type": "string" } }
2833
- ],
2834
- "slots": [
2835
- { "name": "", "description": "The default slot." },
2836
- { "name": "example", "description": "An example slot." }
2862
+ { "name": "value", "value": { "type": "string", "default": "''" } },
2863
+ {
2864
+ "name": "default-filters",
2865
+ "description": "Filter keys to show a pill for before the user adds any.",
2866
+ "value": { "type": "string", "default": "''" }
2867
+ }
2837
2868
  ],
2838
2869
  "events": [
2839
- { "name": "zn-event-name", "description": "Emitted as an example." }
2870
+ {
2871
+ "name": "zn-filter-change",
2872
+ "description": "Emitted when the active filters change. Read the encoded query off `value`."
2873
+ }
2840
2874
  ],
2841
2875
  "js": {
2842
2876
  "properties": [
2843
- { "name": "filters", "type": "string" },
2877
+ { "name": "filters", "type": "QueryBuilderData" },
2844
2878
  { "name": "name", "type": "string" },
2845
2879
  { "name": "value", "type": "string" },
2880
+ {
2881
+ "name": "defaultFilters",
2882
+ "description": "Filter keys to show a pill for before the user adds any.",
2883
+ "type": "string"
2884
+ },
2885
+ {
2886
+ "name": "suggestions",
2887
+ "description": "Typeahead values per filter key. `zn-data-table` fills this from the rows it has loaded.",
2888
+ "type": "Record<string, string[]>"
2889
+ },
2846
2890
  { "name": "validationMessage", "type": "string" },
2847
2891
  { "name": "validity", "type": "ValidityState" },
2848
- { "name": "handleQBClear" },
2849
- { "name": "handleQBReset" },
2850
- { "name": "handleQBUpdate" }
2892
+ {
2893
+ "name": "activeCount",
2894
+ "description": "Number of filters with a value set.",
2895
+ "type": "number"
2896
+ }
2851
2897
  ],
2852
2898
  "events": [
2853
2899
  {
2854
- "name": "zn-event-name",
2855
- "description": "Emitted as an example."
2900
+ "name": "zn-filter-change",
2901
+ "description": "Emitted when the active filters change. Read the encoded query off `value`."
2856
2902
  }
2857
2903
  ]
2858
2904
  }
@@ -2974,7 +3020,7 @@
2974
3020
  },
2975
3021
  {
2976
3022
  "name": "zn-datepicker",
2977
- "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.",
3023
+ "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.",
2978
3024
  "doc-url": "",
2979
3025
  "attributes": [
2980
3026
  {
@@ -3043,6 +3089,11 @@
3043
3089
  "name": "flush",
3044
3090
  "value": { "type": "boolean", "default": "false" }
3045
3091
  },
3092
+ {
3093
+ "name": "inline",
3094
+ "description": "Renders the calendar in place instead of a popup, hiding the text input.",
3095
+ "value": { "type": "boolean", "default": "false" }
3096
+ },
3046
3097
  {
3047
3098
  "name": "required",
3048
3099
  "description": "Makes the input a required field.",
@@ -3211,6 +3262,11 @@
3211
3262
  "type": "string"
3212
3263
  },
3213
3264
  { "name": "flush", "type": "boolean" },
3265
+ {
3266
+ "name": "inline",
3267
+ "description": "Renders the calendar in place instead of a popup, hiding the text input.",
3268
+ "type": "boolean"
3269
+ },
3214
3270
  {
3215
3271
  "name": "required",
3216
3272
  "description": "Makes the input a required field.",
@@ -3666,123 +3722,6 @@
3666
3722
  ]
3667
3723
  }
3668
3724
  },
3669
- {
3670
- "name": "zn-empty-state",
3671
- "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.",
3672
- "doc-url": "",
3673
- "attributes": [
3674
- { "name": "icon", "value": { "type": "string", "default": "''" } },
3675
- {
3676
- "name": "caption",
3677
- "value": { "type": "string", "default": "''" }
3678
- },
3679
- {
3680
- "name": "description",
3681
- "value": { "type": "string", "default": "''" }
3682
- },
3683
- {
3684
- "name": "type",
3685
- "value": {
3686
- "type": "'error' | 'info' | 'primary' | ''",
3687
- "default": "''"
3688
- }
3689
- },
3690
- {
3691
- "name": "padded",
3692
- "value": { "type": "boolean", "default": "false" }
3693
- }
3694
- ],
3695
- "slots": [
3696
- { "name": "", "description": "The default slot." },
3697
- { "name": "example", "description": "An example slot." }
3698
- ],
3699
- "events": [
3700
- { "name": "zn-event-name", "description": "Emitted as an example." }
3701
- ],
3702
- "js": {
3703
- "properties": [
3704
- { "name": "icon", "type": "string" },
3705
- { "name": "caption", "type": "string" },
3706
- { "name": "description", "type": "string" },
3707
- { "name": "type", "type": "'error' | 'info' | 'primary' | ''" },
3708
- { "name": "padded", "type": "boolean" }
3709
- ],
3710
- "events": [
3711
- {
3712
- "name": "zn-event-name",
3713
- "description": "Emitted as an example."
3714
- }
3715
- ]
3716
- }
3717
- },
3718
- {
3719
- "name": "zn-expanding-action",
3720
- "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.",
3721
- "doc-url": "",
3722
- "attributes": [
3723
- { "name": "icon", "value": { "type": "string" } },
3724
- {
3725
- "name": "method",
3726
- "value": { "type": "'drop' | 'fill'", "default": "'drop'" }
3727
- },
3728
- { "name": "context-uri", "value": { "type": "string" } },
3729
- { "name": "count", "value": { "type": "string" } },
3730
- { "name": "color", "value": { "type": "string" } },
3731
- {
3732
- "name": "prefetch",
3733
- "value": { "type": "boolean", "default": "false" }
3734
- },
3735
- {
3736
- "name": "basis",
3737
- "value": { "type": "string", "default": "'300'" }
3738
- },
3739
- { "name": "max-height", "value": { "type": "string" } },
3740
- {
3741
- "name": "open",
3742
- "value": { "type": "boolean", "default": "false" }
3743
- },
3744
- { "name": "master-id", "value": { "type": "string" } },
3745
- {
3746
- "name": "fetch-style",
3747
- "value": { "type": "string", "default": "\"\"" }
3748
- },
3749
- {
3750
- "name": "no-prefetch",
3751
- "value": { "type": "boolean", "default": "false" }
3752
- }
3753
- ],
3754
- "slots": [
3755
- { "name": "", "description": "The default slot." },
3756
- { "name": "example", "description": "An example slot." }
3757
- ],
3758
- "events": [
3759
- { "name": "zn-event-name", "description": "Emitted as an example." }
3760
- ],
3761
- "js": {
3762
- "properties": [
3763
- { "name": "icon", "type": "string" },
3764
- { "name": "method", "type": "'drop' | 'fill'" },
3765
- { "name": "contextUri", "type": "string" },
3766
- { "name": "count", "type": "string" },
3767
- { "name": "color", "type": "string" },
3768
- { "name": "prefetch", "type": "boolean" },
3769
- { "name": "basis", "type": "string" },
3770
- { "name": "maxHeight", "type": "string" },
3771
- { "name": "open", "type": "boolean" },
3772
- { "name": "masterId", "type": "string" },
3773
- { "name": "fetchStyle", "type": "string" },
3774
- { "name": "noPrefetch", "type": "boolean" },
3775
- { "name": "handleIconClicked" },
3776
- { "name": "handleIconCloseClicked" }
3777
- ],
3778
- "events": [
3779
- {
3780
- "name": "zn-event-name",
3781
- "description": "Emitted as an example."
3782
- }
3783
- ]
3784
- }
3785
- },
3786
3725
  {
3787
3726
  "name": "zn-editor",
3788
3727
  "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.",
@@ -3908,49 +3847,166 @@
3908
3847
  }
3909
3848
  },
3910
3849
  {
3911
- "name": "zn-file",
3912
- "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.",
3850
+ "name": "zn-empty-state",
3851
+ "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.",
3913
3852
  "doc-url": "",
3914
3853
  "attributes": [
3854
+ { "name": "icon", "value": { "type": "string", "default": "''" } },
3915
3855
  {
3916
- "name": "files",
3917
- "description": "The selected files as a FileList object containing a list of File objects.\nThe FileList behaves like an array, so you can get the number of selected files\nvia its length property.\n[see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#getting_information_on_selected_files)",
3918
- "value": { "type": "string" }
3919
- },
3920
- {
3921
- "name": "name",
3922
- "description": "The name of the file control, submitted as a name/value pair with form data.",
3856
+ "name": "caption",
3923
3857
  "value": { "type": "string", "default": "''" }
3924
3858
  },
3925
3859
  {
3926
- "name": "value",
3927
- "description": "The value of the file control contains a string that represents the path of the selected file.\nIf multiple files are selected, the value represents the first file in the list.\nIf no file is selected, the value is an empty string.\nBeware that the only valid value when setting a file control is an empty string!\n[see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#value)",
3928
- "value": { "type": "string" }
3860
+ "name": "description",
3861
+ "value": { "type": "string", "default": "''" }
3929
3862
  },
3930
3863
  {
3931
- "name": "size",
3932
- "description": "The file control's size.",
3864
+ "name": "type",
3933
3865
  "value": {
3934
- "type": "'small' | 'medium' | 'large'",
3935
- "default": "'medium'"
3866
+ "type": "'error' | 'info' | 'primary' | ''",
3867
+ "default": "''"
3936
3868
  }
3937
3869
  },
3938
3870
  {
3939
- "name": "label",
3940
- "description": "The file control's label. If you need to display HTML, use the `label` slot instead.",
3941
- "value": { "type": "string", "default": "''" }
3942
- },
3943
- {
3944
- "name": "clearable",
3945
- "description": "If this is set, then the only way to remove files is to click the cross next to them.",
3871
+ "name": "padded",
3946
3872
  "value": { "type": "boolean", "default": "false" }
3947
- },
3948
- {
3949
- "name": "help-text",
3950
- "description": "The file control's help text.\nIf you need to display HTML, use the `help-text` slot instead.",
3951
- "value": { "type": "string", "default": "''" }
3952
- },
3953
- {
3873
+ }
3874
+ ],
3875
+ "slots": [
3876
+ { "name": "", "description": "The default slot." },
3877
+ { "name": "example", "description": "An example slot." }
3878
+ ],
3879
+ "events": [
3880
+ { "name": "zn-event-name", "description": "Emitted as an example." }
3881
+ ],
3882
+ "js": {
3883
+ "properties": [
3884
+ { "name": "icon", "type": "string" },
3885
+ { "name": "caption", "type": "string" },
3886
+ { "name": "description", "type": "string" },
3887
+ { "name": "type", "type": "'error' | 'info' | 'primary' | ''" },
3888
+ { "name": "padded", "type": "boolean" }
3889
+ ],
3890
+ "events": [
3891
+ {
3892
+ "name": "zn-event-name",
3893
+ "description": "Emitted as an example."
3894
+ }
3895
+ ]
3896
+ }
3897
+ },
3898
+ {
3899
+ "name": "zn-expanding-action",
3900
+ "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.",
3901
+ "doc-url": "",
3902
+ "attributes": [
3903
+ { "name": "icon", "value": { "type": "string" } },
3904
+ {
3905
+ "name": "method",
3906
+ "value": { "type": "'drop' | 'fill'", "default": "'drop'" }
3907
+ },
3908
+ { "name": "context-uri", "value": { "type": "string" } },
3909
+ { "name": "count", "value": { "type": "string" } },
3910
+ { "name": "color", "value": { "type": "string" } },
3911
+ {
3912
+ "name": "prefetch",
3913
+ "value": { "type": "boolean", "default": "false" }
3914
+ },
3915
+ {
3916
+ "name": "basis",
3917
+ "value": { "type": "string", "default": "'300'" }
3918
+ },
3919
+ { "name": "max-height", "value": { "type": "string" } },
3920
+ {
3921
+ "name": "open",
3922
+ "value": { "type": "boolean", "default": "false" }
3923
+ },
3924
+ { "name": "master-id", "value": { "type": "string" } },
3925
+ {
3926
+ "name": "fetch-style",
3927
+ "value": { "type": "string", "default": "\"\"" }
3928
+ },
3929
+ {
3930
+ "name": "no-prefetch",
3931
+ "value": { "type": "boolean", "default": "false" }
3932
+ }
3933
+ ],
3934
+ "slots": [
3935
+ { "name": "", "description": "The default slot." },
3936
+ { "name": "example", "description": "An example slot." }
3937
+ ],
3938
+ "events": [
3939
+ { "name": "zn-event-name", "description": "Emitted as an example." }
3940
+ ],
3941
+ "js": {
3942
+ "properties": [
3943
+ { "name": "icon", "type": "string" },
3944
+ { "name": "method", "type": "'drop' | 'fill'" },
3945
+ { "name": "contextUri", "type": "string" },
3946
+ { "name": "count", "type": "string" },
3947
+ { "name": "color", "type": "string" },
3948
+ { "name": "prefetch", "type": "boolean" },
3949
+ { "name": "basis", "type": "string" },
3950
+ { "name": "maxHeight", "type": "string" },
3951
+ { "name": "open", "type": "boolean" },
3952
+ { "name": "masterId", "type": "string" },
3953
+ { "name": "fetchStyle", "type": "string" },
3954
+ { "name": "noPrefetch", "type": "boolean" },
3955
+ { "name": "handleIconClicked" },
3956
+ { "name": "handleIconCloseClicked" }
3957
+ ],
3958
+ "events": [
3959
+ {
3960
+ "name": "zn-event-name",
3961
+ "description": "Emitted as an example."
3962
+ }
3963
+ ]
3964
+ }
3965
+ },
3966
+ {
3967
+ "name": "zn-file",
3968
+ "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.",
3969
+ "doc-url": "",
3970
+ "attributes": [
3971
+ {
3972
+ "name": "files",
3973
+ "description": "The selected files as a FileList object containing a list of File objects.\nThe FileList behaves like an array, so you can get the number of selected files\nvia its length property.\n[see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#getting_information_on_selected_files)",
3974
+ "value": { "type": "string" }
3975
+ },
3976
+ {
3977
+ "name": "name",
3978
+ "description": "The name of the file control, submitted as a name/value pair with form data.",
3979
+ "value": { "type": "string", "default": "''" }
3980
+ },
3981
+ {
3982
+ "name": "value",
3983
+ "description": "The value of the file control contains a string that represents the path of the selected file.\nIf multiple files are selected, the value represents the first file in the list.\nIf no file is selected, the value is an empty string.\nBeware that the only valid value when setting a file control is an empty string!\n[see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#value)",
3984
+ "value": { "type": "string" }
3985
+ },
3986
+ {
3987
+ "name": "size",
3988
+ "description": "The file control's size.",
3989
+ "value": {
3990
+ "type": "'small' | 'medium' | 'large'",
3991
+ "default": "'medium'"
3992
+ }
3993
+ },
3994
+ {
3995
+ "name": "label",
3996
+ "description": "The file control's label. If you need to display HTML, use the `label` slot instead.",
3997
+ "value": { "type": "string", "default": "''" }
3998
+ },
3999
+ {
4000
+ "name": "clearable",
4001
+ "description": "If this is set, then the only way to remove files is to click the cross next to them.",
4002
+ "value": { "type": "boolean", "default": "false" }
4003
+ },
4004
+ {
4005
+ "name": "help-text",
4006
+ "description": "The file control's help text.\nIf you need to display HTML, use the `help-text` slot instead.",
4007
+ "value": { "type": "string", "default": "''" }
4008
+ },
4009
+ {
3954
4010
  "name": "disabled",
3955
4011
  "description": "Disables the file control.",
3956
4012
  "value": { "type": "boolean", "default": "false" }
@@ -5160,7 +5216,7 @@
5160
5216
  },
5161
5217
  {
5162
5218
  "name": "zn-input",
5163
- "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.",
5219
+ "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.",
5164
5220
  "doc-url": "",
5165
5221
  "attributes": [
5166
5222
  {
@@ -5962,9 +6018,83 @@
5962
6018
  ]
5963
6019
  }
5964
6020
  },
6021
+ {
6022
+ "name": "zn-linked-select",
6023
+ "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.",
6024
+ "doc-url": "",
6025
+ "attributes": [
6026
+ {
6027
+ "name": "name",
6028
+ "value": { "type": "string", "default": "\"\"" }
6029
+ },
6030
+ { "name": "value", "value": { "type": "string" } },
6031
+ {
6032
+ "name": "checked",
6033
+ "value": { "type": "boolean", "default": "false" }
6034
+ },
6035
+ { "name": "options", "value": { "type": "linkedSelectOptions" } },
6036
+ {
6037
+ "name": "linked-select",
6038
+ "value": { "type": "string", "default": "\"\"" }
6039
+ },
6040
+ {
6041
+ "name": "cache-key",
6042
+ "value": { "type": "string", "default": "\"\"" }
6043
+ },
6044
+ {
6045
+ "name": "label",
6046
+ "value": { "type": "string", "default": "\"\"" }
6047
+ },
6048
+ {
6049
+ "name": "select-first",
6050
+ "description": "Automatically select the first option of the linked group when no value is set.",
6051
+ "value": { "type": "boolean", "default": "false" }
6052
+ }
6053
+ ],
6054
+ "slots": [
6055
+ { "name": "", "description": "The default slot." },
6056
+ { "name": "example", "description": "An example slot." }
6057
+ ],
6058
+ "events": [
6059
+ { "name": "zn-event-name", "description": "Emitted as an example." }
6060
+ ],
6061
+ "js": {
6062
+ "properties": [
6063
+ { "name": "name", "type": "string" },
6064
+ { "name": "value", "type": "string" },
6065
+ {
6066
+ "name": "defaultValue",
6067
+ "description": "The default value of the form control. Primarily used for resetting the form control.",
6068
+ "type": "string"
6069
+ },
6070
+ { "name": "checked", "type": "boolean" },
6071
+ { "name": "options", "type": "linkedSelectOptions" },
6072
+ { "name": "linkedSelect", "type": "string" },
6073
+ { "name": "cacheKey", "type": "string" },
6074
+ { "name": "label", "type": "string" },
6075
+ {
6076
+ "name": "selectFirst",
6077
+ "description": "Automatically select the first option of the linked group when no value is set.",
6078
+ "type": "boolean"
6079
+ },
6080
+ { "name": "input", "type": "ZnSelect" },
6081
+ { "name": "displayLabel" },
6082
+ { "name": "validity" },
6083
+ { "name": "validationMessage" },
6084
+ { "name": "handleLinkedSelectChange" },
6085
+ { "name": "handleSelectChange" }
6086
+ ],
6087
+ "events": [
6088
+ {
6089
+ "name": "zn-event-name",
6090
+ "description": "Emitted as an example."
6091
+ }
6092
+ ]
6093
+ }
6094
+ },
5965
6095
  {
5966
6096
  "name": "zn-markdown-editor",
5967
- "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.",
6097
+ "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.",
5968
6098
  "doc-url": "",
5969
6099
  "attributes": [
5970
6100
  {
@@ -6181,83 +6311,9 @@
6181
6311
  ]
6182
6312
  }
6183
6313
  },
6184
- {
6185
- "name": "zn-linked-select",
6186
- "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.",
6187
- "doc-url": "",
6188
- "attributes": [
6189
- {
6190
- "name": "name",
6191
- "value": { "type": "string", "default": "\"\"" }
6192
- },
6193
- { "name": "value", "value": { "type": "string" } },
6194
- {
6195
- "name": "checked",
6196
- "value": { "type": "boolean", "default": "false" }
6197
- },
6198
- { "name": "options", "value": { "type": "linkedSelectOptions" } },
6199
- {
6200
- "name": "linked-select",
6201
- "value": { "type": "string", "default": "\"\"" }
6202
- },
6203
- {
6204
- "name": "cache-key",
6205
- "value": { "type": "string", "default": "\"\"" }
6206
- },
6207
- {
6208
- "name": "label",
6209
- "value": { "type": "string", "default": "\"\"" }
6210
- },
6211
- {
6212
- "name": "select-first",
6213
- "description": "Automatically select the first option of the linked group when no value is set.",
6214
- "value": { "type": "boolean", "default": "false" }
6215
- }
6216
- ],
6217
- "slots": [
6218
- { "name": "", "description": "The default slot." },
6219
- { "name": "example", "description": "An example slot." }
6220
- ],
6221
- "events": [
6222
- { "name": "zn-event-name", "description": "Emitted as an example." }
6223
- ],
6224
- "js": {
6225
- "properties": [
6226
- { "name": "name", "type": "string" },
6227
- { "name": "value", "type": "string" },
6228
- {
6229
- "name": "defaultValue",
6230
- "description": "The default value of the form control. Primarily used for resetting the form control.",
6231
- "type": "string"
6232
- },
6233
- { "name": "checked", "type": "boolean" },
6234
- { "name": "options", "type": "linkedSelectOptions" },
6235
- { "name": "linkedSelect", "type": "string" },
6236
- { "name": "cacheKey", "type": "string" },
6237
- { "name": "label", "type": "string" },
6238
- {
6239
- "name": "selectFirst",
6240
- "description": "Automatically select the first option of the linked group when no value is set.",
6241
- "type": "boolean"
6242
- },
6243
- { "name": "input", "type": "ZnSelect" },
6244
- { "name": "displayLabel" },
6245
- { "name": "validity" },
6246
- { "name": "validationMessage" },
6247
- { "name": "handleLinkedSelectChange" },
6248
- { "name": "handleSelectChange" }
6249
- ],
6250
- "events": [
6251
- {
6252
- "name": "zn-event-name",
6253
- "description": "Emitted as an example."
6254
- }
6255
- ]
6256
- }
6257
- },
6258
6314
  {
6259
6315
  "name": "zn-menu",
6260
- "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.",
6316
+ "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.",
6261
6317
  "doc-url": "",
6262
6318
  "attributes": [
6263
6319
  {
@@ -6362,6 +6418,11 @@
6362
6418
  "name": "confirm",
6363
6419
  "value": { "type": "boolean", "default": "false" }
6364
6420
  },
6421
+ {
6422
+ "name": "keep-open",
6423
+ "description": "Leaves a containing dropdown open when this item is selected, whatever the dropdown's own setting.",
6424
+ "value": { "type": "boolean", "default": "false" }
6425
+ },
6365
6426
  {
6366
6427
  "name": "flush",
6367
6428
  "description": "Removes all padding from the menu item.",
@@ -6441,6 +6502,11 @@
6441
6502
  { "name": "rel", "type": "string" },
6442
6503
  { "name": "gaid", "type": "string" },
6443
6504
  { "name": "confirm", "type": "boolean" },
6505
+ {
6506
+ "name": "keepOpen",
6507
+ "description": "Leaves a containing dropdown open when this item is selected, whatever the dropdown's own setting.",
6508
+ "type": "boolean"
6509
+ },
6444
6510
  {
6445
6511
  "name": "flush",
6446
6512
  "description": "Removes all padding from the menu item.",
@@ -7153,9 +7219,31 @@
7153
7219
  "events": []
7154
7220
  }
7155
7221
  },
7222
+ {
7223
+ "name": "zn-pane",
7224
+ "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.",
7225
+ "doc-url": "",
7226
+ "attributes": [{ "name": "flush", "value": { "type": "boolean" } }],
7227
+ "slots": [
7228
+ { "name": "", "description": "The default slot." },
7229
+ { "name": "example", "description": "An example slot." }
7230
+ ],
7231
+ "events": [
7232
+ { "name": "zn-event-name", "description": "Emitted as an example." }
7233
+ ],
7234
+ "js": {
7235
+ "properties": [{ "name": "flush", "type": "boolean" }],
7236
+ "events": [
7237
+ {
7238
+ "name": "zn-event-name",
7239
+ "description": "Emitted as an example."
7240
+ }
7241
+ ]
7242
+ }
7243
+ },
7156
7244
  {
7157
7245
  "name": "zn-panel",
7158
- "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.",
7246
+ "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.",
7159
7247
  "doc-url": "",
7160
7248
  "attributes": [
7161
7249
  { "name": "basis-px", "value": { "type": "number" } },
@@ -7201,28 +7289,6 @@
7201
7289
  "events": []
7202
7290
  }
7203
7291
  },
7204
- {
7205
- "name": "zn-pane",
7206
- "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.",
7207
- "doc-url": "",
7208
- "attributes": [{ "name": "flush", "value": { "type": "boolean" } }],
7209
- "slots": [
7210
- { "name": "", "description": "The default slot." },
7211
- { "name": "example", "description": "An example slot." }
7212
- ],
7213
- "events": [
7214
- { "name": "zn-event-name", "description": "Emitted as an example." }
7215
- ],
7216
- "js": {
7217
- "properties": [{ "name": "flush", "type": "boolean" }],
7218
- "events": [
7219
- {
7220
- "name": "zn-event-name",
7221
- "description": "Emitted as an example."
7222
- }
7223
- ]
7224
- }
7225
- },
7226
7292
  {
7227
7293
  "name": "zn-popup",
7228
7294
  "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.",
@@ -8643,45 +8709,6 @@
8643
8709
  ]
8644
8710
  }
8645
8711
  },
8646
- {
8647
- "name": "zn-scroll-container",
8648
- "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.",
8649
- "doc-url": "",
8650
- "attributes": [
8651
- {
8652
- "name": "height",
8653
- "description": "The height and maximum height of the scroll container.",
8654
- "value": { "type": "string", "default": "''" }
8655
- },
8656
- {
8657
- "name": "start-scrolled",
8658
- "value": { "type": "boolean", "default": "false" }
8659
- }
8660
- ],
8661
- "slots": [
8662
- { "name": "", "description": "The default slot." },
8663
- { "name": "example", "description": "An example slot." }
8664
- ],
8665
- "events": [
8666
- { "name": "zn-event-name", "description": "Emitted as an example." }
8667
- ],
8668
- "js": {
8669
- "properties": [
8670
- {
8671
- "name": "height",
8672
- "description": "The height and maximum height of the scroll container.",
8673
- "type": "string"
8674
- },
8675
- { "name": "startScrolled", "type": "boolean" }
8676
- ],
8677
- "events": [
8678
- {
8679
- "name": "zn-event-name",
8680
- "description": "Emitted as an example."
8681
- }
8682
- ]
8683
- }
8684
- },
8685
8712
  {
8686
8713
  "name": "zn-schedule-builder",
8687
8714
  "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.",
@@ -8957,20 +8984,59 @@
8957
8984
  "type": "ValidityState"
8958
8985
  },
8959
8986
  {
8960
- "name": "validationMessage",
8961
- "description": "Gets the validation message.",
8987
+ "name": "validationMessage",
8988
+ "description": "Gets the validation message.",
8989
+ "type": "string"
8990
+ },
8991
+ {
8992
+ "name": "displayedDays",
8993
+ "description": "The hours as currently shown, in the display timezone.",
8994
+ "type": "ScheduleDayMap"
8995
+ }
8996
+ ],
8997
+ "events": [
8998
+ {
8999
+ "name": "zn-change",
9000
+ "description": "Emitted when the schedule changes."
9001
+ }
9002
+ ]
9003
+ }
9004
+ },
9005
+ {
9006
+ "name": "zn-scroll-container",
9007
+ "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.",
9008
+ "doc-url": "",
9009
+ "attributes": [
9010
+ {
9011
+ "name": "height",
9012
+ "description": "The height and maximum height of the scroll container.",
9013
+ "value": { "type": "string", "default": "''" }
9014
+ },
9015
+ {
9016
+ "name": "start-scrolled",
9017
+ "value": { "type": "boolean", "default": "false" }
9018
+ }
9019
+ ],
9020
+ "slots": [
9021
+ { "name": "", "description": "The default slot." },
9022
+ { "name": "example", "description": "An example slot." }
9023
+ ],
9024
+ "events": [
9025
+ { "name": "zn-event-name", "description": "Emitted as an example." }
9026
+ ],
9027
+ "js": {
9028
+ "properties": [
9029
+ {
9030
+ "name": "height",
9031
+ "description": "The height and maximum height of the scroll container.",
8962
9032
  "type": "string"
8963
9033
  },
8964
- {
8965
- "name": "displayedDays",
8966
- "description": "The hours as currently shown, in the display timezone.",
8967
- "type": "ScheduleDayMap"
8968
- }
9034
+ { "name": "startScrolled", "type": "boolean" }
8969
9035
  ],
8970
9036
  "events": [
8971
9037
  {
8972
- "name": "zn-change",
8973
- "description": "Emitted when the schedule changes."
9038
+ "name": "zn-event-name",
9039
+ "description": "Emitted as an example."
8974
9040
  }
8975
9041
  ]
8976
9042
  }
@@ -11668,126 +11734,6 @@
11668
11734
  ]
11669
11735
  }
11670
11736
  },
11671
- {
11672
- "name": "zn-tile",
11673
- "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.",
11674
- "doc-url": "",
11675
- "attributes": [
11676
- { "name": "caption", "value": { "type": "string" } },
11677
- { "name": "description", "value": { "type": "string" } },
11678
- { "name": "href", "value": { "type": "string" } },
11679
- { "name": "data-target", "value": { "type": "string" } },
11680
- { "name": "gaid", "value": { "type": "string" } },
11681
- { "name": "data-uri", "value": { "type": "string" } },
11682
- { "name": "flush", "value": { "type": "boolean" } },
11683
- { "name": "flush-x", "value": { "type": "boolean" } },
11684
- { "name": "flush-y", "value": { "type": "boolean" } },
11685
- { "name": "inline", "value": { "type": "boolean" } },
11686
- {
11687
- "name": "plain",
11688
- "description": "Renders the caption in the normal table-content weight instead of bold.",
11689
- "value": { "type": "boolean" }
11690
- },
11691
- {
11692
- "name": "grouped",
11693
- "description": "Set by `zn-tile-group` to lay the tile out as a shared-column subgrid row.",
11694
- "value": { "type": "boolean" }
11695
- }
11696
- ],
11697
- "slots": [
11698
- { "name": "", "description": "The default slot." },
11699
- { "name": "example", "description": "An example slot." }
11700
- ],
11701
- "events": [
11702
- { "name": "zn-event-name", "description": "Emitted as an example." }
11703
- ],
11704
- "js": {
11705
- "properties": [
11706
- { "name": "caption", "type": "string" },
11707
- { "name": "description", "type": "string" },
11708
- { "name": "href", "type": "string" },
11709
- { "name": "dataTarget", "type": "string" },
11710
- { "name": "gaid", "type": "string" },
11711
- { "name": "dataUri", "type": "string" },
11712
- { "name": "flush", "type": "boolean" },
11713
- { "name": "flushX", "type": "boolean" },
11714
- { "name": "flushY", "type": "boolean" },
11715
- { "name": "inline", "type": "boolean" },
11716
- {
11717
- "name": "plain",
11718
- "description": "Renders the caption in the normal table-content weight instead of bold.",
11719
- "type": "boolean"
11720
- },
11721
- {
11722
- "name": "grouped",
11723
- "description": "Set by `zn-tile-group` to lay the tile out as a shared-column subgrid row.",
11724
- "type": "boolean"
11725
- }
11726
- ],
11727
- "events": [
11728
- {
11729
- "name": "zn-event-name",
11730
- "description": "Emitted as an example."
11731
- }
11732
- ]
11733
- }
11734
- },
11735
- {
11736
- "name": "zn-tile-group",
11737
- "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).",
11738
- "doc-url": "",
11739
- "attributes": [
11740
- {
11741
- "name": "divide",
11742
- "description": "Draws a dividing border between rows.",
11743
- "value": { "type": "boolean", "default": "false" }
11744
- }
11745
- ],
11746
- "slots": [
11747
- { "name": "", "description": "One or more `zn-tile` elements." }
11748
- ],
11749
- "events": [],
11750
- "js": {
11751
- "properties": [
11752
- {
11753
- "name": "divide",
11754
- "description": "Draws a dividing border between rows.",
11755
- "type": "boolean"
11756
- }
11757
- ],
11758
- "events": []
11759
- }
11760
- },
11761
- {
11762
- "name": "zn-tile-property",
11763
- "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.",
11764
- "doc-url": "",
11765
- "attributes": [
11766
- { "name": "caption", "value": { "type": "string" } },
11767
- { "name": "description", "value": { "type": "string" } },
11768
- { "name": "icon", "value": { "type": "string" } }
11769
- ],
11770
- "slots": [
11771
- { "name": "", "description": "The default slot." },
11772
- { "name": "example", "description": "An example slot." }
11773
- ],
11774
- "events": [
11775
- { "name": "zn-event-name", "description": "Emitted as an example." }
11776
- ],
11777
- "js": {
11778
- "properties": [
11779
- { "name": "caption", "type": "string" },
11780
- { "name": "description", "type": "string" },
11781
- { "name": "icon", "type": "string" }
11782
- ],
11783
- "events": [
11784
- {
11785
- "name": "zn-event-name",
11786
- "description": "Emitted as an example."
11787
- }
11788
- ]
11789
- }
11790
- },
11791
11737
  {
11792
11738
  "name": "zn-thumbnail-group",
11793
11739
  "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.",
@@ -11958,6 +11904,126 @@
11958
11904
  ]
11959
11905
  }
11960
11906
  },
11907
+ {
11908
+ "name": "zn-tile",
11909
+ "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.",
11910
+ "doc-url": "",
11911
+ "attributes": [
11912
+ { "name": "caption", "value": { "type": "string" } },
11913
+ { "name": "description", "value": { "type": "string" } },
11914
+ { "name": "href", "value": { "type": "string" } },
11915
+ { "name": "data-target", "value": { "type": "string" } },
11916
+ { "name": "gaid", "value": { "type": "string" } },
11917
+ { "name": "data-uri", "value": { "type": "string" } },
11918
+ { "name": "flush", "value": { "type": "boolean" } },
11919
+ { "name": "flush-x", "value": { "type": "boolean" } },
11920
+ { "name": "flush-y", "value": { "type": "boolean" } },
11921
+ { "name": "inline", "value": { "type": "boolean" } },
11922
+ {
11923
+ "name": "plain",
11924
+ "description": "Renders the caption in the normal table-content weight instead of bold.",
11925
+ "value": { "type": "boolean" }
11926
+ },
11927
+ {
11928
+ "name": "grouped",
11929
+ "description": "Set by `zn-tile-group` to lay the tile out as a shared-column subgrid row.",
11930
+ "value": { "type": "boolean" }
11931
+ }
11932
+ ],
11933
+ "slots": [
11934
+ { "name": "", "description": "The default slot." },
11935
+ { "name": "example", "description": "An example slot." }
11936
+ ],
11937
+ "events": [
11938
+ { "name": "zn-event-name", "description": "Emitted as an example." }
11939
+ ],
11940
+ "js": {
11941
+ "properties": [
11942
+ { "name": "caption", "type": "string" },
11943
+ { "name": "description", "type": "string" },
11944
+ { "name": "href", "type": "string" },
11945
+ { "name": "dataTarget", "type": "string" },
11946
+ { "name": "gaid", "type": "string" },
11947
+ { "name": "dataUri", "type": "string" },
11948
+ { "name": "flush", "type": "boolean" },
11949
+ { "name": "flushX", "type": "boolean" },
11950
+ { "name": "flushY", "type": "boolean" },
11951
+ { "name": "inline", "type": "boolean" },
11952
+ {
11953
+ "name": "plain",
11954
+ "description": "Renders the caption in the normal table-content weight instead of bold.",
11955
+ "type": "boolean"
11956
+ },
11957
+ {
11958
+ "name": "grouped",
11959
+ "description": "Set by `zn-tile-group` to lay the tile out as a shared-column subgrid row.",
11960
+ "type": "boolean"
11961
+ }
11962
+ ],
11963
+ "events": [
11964
+ {
11965
+ "name": "zn-event-name",
11966
+ "description": "Emitted as an example."
11967
+ }
11968
+ ]
11969
+ }
11970
+ },
11971
+ {
11972
+ "name": "zn-tile-group",
11973
+ "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).",
11974
+ "doc-url": "",
11975
+ "attributes": [
11976
+ {
11977
+ "name": "divide",
11978
+ "description": "Draws a dividing border between rows.",
11979
+ "value": { "type": "boolean", "default": "false" }
11980
+ }
11981
+ ],
11982
+ "slots": [
11983
+ { "name": "", "description": "One or more `zn-tile` elements." }
11984
+ ],
11985
+ "events": [],
11986
+ "js": {
11987
+ "properties": [
11988
+ {
11989
+ "name": "divide",
11990
+ "description": "Draws a dividing border between rows.",
11991
+ "type": "boolean"
11992
+ }
11993
+ ],
11994
+ "events": []
11995
+ }
11996
+ },
11997
+ {
11998
+ "name": "zn-tile-property",
11999
+ "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.",
12000
+ "doc-url": "",
12001
+ "attributes": [
12002
+ { "name": "caption", "value": { "type": "string" } },
12003
+ { "name": "description", "value": { "type": "string" } },
12004
+ { "name": "icon", "value": { "type": "string" } }
12005
+ ],
12006
+ "slots": [
12007
+ { "name": "", "description": "The default slot." },
12008
+ { "name": "example", "description": "An example slot." }
12009
+ ],
12010
+ "events": [
12011
+ { "name": "zn-event-name", "description": "Emitted as an example." }
12012
+ ],
12013
+ "js": {
12014
+ "properties": [
12015
+ { "name": "caption", "type": "string" },
12016
+ { "name": "description", "type": "string" },
12017
+ { "name": "icon", "type": "string" }
12018
+ ],
12019
+ "events": [
12020
+ {
12021
+ "name": "zn-event-name",
12022
+ "description": "Emitted as an example."
12023
+ }
12024
+ ]
12025
+ }
12026
+ },
11961
12027
  {
11962
12028
  "name": "zn-timer",
11963
12029
  "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.",
@@ -12221,7 +12287,7 @@
12221
12287
  },
12222
12288
  {
12223
12289
  "name": "zn-translation-group",
12224
- "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.",
12290
+ "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.",
12225
12291
  "doc-url": "",
12226
12292
  "attributes": [
12227
12293
  {