@kubex/zinc 1.1.12 → 1.1.14

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 +1814 -1084
  2. package/dist/vscode.html-custom-data.json +228 -88
  3. package/dist/web-types.json +521 -213
  4. package/dist/zn.d.ts +180 -1
  5. package/dist/zn.min.css +1 -1
  6. package/dist/zn.min.js +522 -459
  7. package/docs/pages/components/channel-tile.md +168 -0
  8. package/docs/pages/components/chat-message-attachment.md +54 -0
  9. package/docs/pages/components/chat-message.md +18 -1
  10. package/docs/pages/components/data-table.md +1 -3
  11. package/package.json +1 -1
  12. package/scss/shared/_table.scss +9 -23
  13. package/scss/themes/_dark.scss +3 -0
  14. package/scss/themes/_light.scss +4 -0
  15. package/scss/themes/_typography.scss +1 -0
  16. package/src/components/button/button.scss +4 -0
  17. package/src/components/channel-tile/channel-tile.component.ts +280 -0
  18. package/src/components/channel-tile/channel-tile.scss +197 -0
  19. package/src/components/channel-tile/index.ts +12 -0
  20. package/src/components/chat-message/chat-message.component.ts +14 -5
  21. package/src/components/chat-message/chat-message.scss +37 -12
  22. package/src/components/chat-message-attachment/chat-message-attachment.component.ts +78 -0
  23. package/src/components/chat-message-attachment/chat-message-attachment.scss +32 -0
  24. package/src/components/chat-message-attachment/chat-message-attachment.test.ts +36 -0
  25. package/src/components/chat-message-attachment/index.ts +12 -0
  26. package/src/components/data-table/data-table.component.ts +65 -46
  27. package/src/components/data-table/data-table.scss +32 -58
  28. package/src/components/icon/icon.component.ts +1 -1
  29. package/src/components/icon/icon.scss +2 -1
  30. package/src/components/page/page.component.ts +32 -1
  31. package/src/components/page/page.scss +6 -5
  32. package/src/components/tooltip/tooltip.scss +1 -1
  33. package/src/events/events.ts +2 -0
  34. package/src/events/zn-accept.ts +7 -0
  35. package/src/events/zn-reject.ts +7 -0
  36. package/src/zinc.ts +2 -0
@@ -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.12",
4
+ "version": "1.1.14",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {
@@ -15,6 +15,28 @@
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
+ },
18
40
  {
19
41
  "name": "zn-alert",
20
42
  "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.",
@@ -78,28 +100,6 @@
78
100
  ]
79
101
  }
80
102
  },
81
- {
82
- "name": "zn-action-bar",
83
- "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.",
84
- "doc-url": "",
85
- "attributes": [],
86
- "slots": [
87
- { "name": "", "description": "The default slot." },
88
- { "name": "example", "description": "An example slot." }
89
- ],
90
- "events": [
91
- { "name": "zn-event-name", "description": "Emitted as an example." }
92
- ],
93
- "js": {
94
- "properties": [],
95
- "events": [
96
- {
97
- "name": "zn-event-name",
98
- "description": "Emitted as an example."
99
- }
100
- ]
101
- }
102
- },
103
103
  {
104
104
  "name": "zn-animated-button",
105
105
  "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",
@@ -633,6 +633,241 @@
633
633
  "events": []
634
634
  }
635
635
  },
636
+ {
637
+ "name": "zn-channel-tile",
638
+ "description": "A channel/queue slot tile with two faces: an active (occupied) state\nshowing an in-progress item, and an available (empty) state advertising\ncapacity — optionally reserving an incoming item with an auto-accept countdown.\n---\n\n\n### **Events:**\n - **zn-accept** - Emitted when an available tile is accepted (click or auto-accept). Cancelable — call `preventDefault()` to suppress the built-in `accept-uri` fetch.\n- **zn-reject** - Emitted when the reject control is pressed.\n\n### **Slots:**\n - **leading** - Replaces the leading icon in the active state.\n- **action** - Action content for the available state (e.g. a form). Falls back to a default accept button.\n- **footer** - Trailing content (e.g. status badges) in the active state.\n\n### **CSS Properties:**\n - **--channel-tile-color** - Resolved accent color (set from the `color` property). _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **progress** - The progress indicator (incoming countdown overlay or active progress bar).",
639
+ "doc-url": "",
640
+ "attributes": [
641
+ {
642
+ "name": "available",
643
+ "description": "Renders the empty/available face instead of the active face.",
644
+ "value": { "type": "boolean", "default": "false" }
645
+ },
646
+ {
647
+ "name": "incoming",
648
+ "description": "(Available only) the tile is reserving an incoming item awaiting acceptance.",
649
+ "value": { "type": "boolean", "default": "false" }
650
+ },
651
+ {
652
+ "name": "variant",
653
+ "description": "Free-form grouping/theming key (reflected so consumers can query/style by it).",
654
+ "value": { "type": "string", "default": "''" }
655
+ },
656
+ {
657
+ "name": "header",
658
+ "description": "Top-bar text (e.g. brand).",
659
+ "value": { "type": "string", "default": "''" }
660
+ },
661
+ {
662
+ "name": "icon",
663
+ "description": "Leading icon (active state).",
664
+ "value": { "type": "string", "default": "''" }
665
+ },
666
+ {
667
+ "name": "color",
668
+ "description": "Accent color driving the leading icon and `--channel-tile-color`.",
669
+ "value": { "type": "ChannelTileColor", "default": "'default'" }
670
+ },
671
+ {
672
+ "name": "title",
673
+ "description": "Primary line. Defaults to \"Available\" in the available state when unset.",
674
+ "value": { "type": "string", "default": "''" }
675
+ },
676
+ {
677
+ "name": "subtitle",
678
+ "description": "Secondary line.",
679
+ "value": { "type": "string", "default": "''" }
680
+ },
681
+ {
682
+ "name": "progress",
683
+ "description": "(Active only) progress bar fill, 0–100.",
684
+ "value": { "type": "number", "default": "0" }
685
+ },
686
+ {
687
+ "name": "progress-color",
688
+ "description": "(Active only) CSS color for the progress bar fill.",
689
+ "value": { "type": "string", "default": "''" }
690
+ },
691
+ {
692
+ "name": "item-id",
693
+ "description": "Identifier carried in `zn-accept` / `zn-reject` event details.",
694
+ "value": { "type": "string", "default": "''" }
695
+ },
696
+ {
697
+ "name": "accept-uri",
698
+ "description": "(Available only) when set, accepting fetches this URI unless `zn-accept` is canceled.",
699
+ "value": { "type": "string", "default": "''" }
700
+ },
701
+ {
702
+ "name": "reserved-until",
703
+ "description": "(Available/incoming) epoch (seconds or millis) at which the reservation window ends.",
704
+ "value": { "type": "number", "default": "0" }
705
+ },
706
+ {
707
+ "name": "auto-accept-delay",
708
+ "description": "(Available/incoming) auto-accept window length in milliseconds.",
709
+ "value": { "type": "number", "default": "0" }
710
+ },
711
+ {
712
+ "name": "rejectable",
713
+ "description": "(Available/incoming) whether a reject control is offered.",
714
+ "value": { "type": "boolean", "default": "false" }
715
+ },
716
+ {
717
+ "name": "accept-icon",
718
+ "description": "Icon for the built-in accept button.",
719
+ "value": { "type": "string", "default": "'plus@lu'" }
720
+ },
721
+ {
722
+ "name": "accept-gaid",
723
+ "description": "Optional analytics id forwarded to the built-in accept button.",
724
+ "value": { "type": "string", "default": "''" }
725
+ },
726
+ {
727
+ "name": "reject-icon",
728
+ "description": "Icon for the reject control.",
729
+ "value": { "type": "string", "default": "'call_end'" }
730
+ },
731
+ {
732
+ "name": "reject-label",
733
+ "description": "Accessible label for the reject control.",
734
+ "value": { "type": "string", "default": "'Reject'" }
735
+ }
736
+ ],
737
+ "slots": [
738
+ {
739
+ "name": "leading",
740
+ "description": "Replaces the leading icon in the active state."
741
+ },
742
+ {
743
+ "name": "action",
744
+ "description": "Action content for the available state (e.g. a form). Falls back to a default accept button."
745
+ },
746
+ {
747
+ "name": "footer",
748
+ "description": "Trailing content (e.g. status badges) in the active state."
749
+ }
750
+ ],
751
+ "events": [
752
+ {
753
+ "name": "zn-accept",
754
+ "description": "Emitted when an available tile is accepted (click or auto-accept). Cancelable — call `preventDefault()` to suppress the built-in `accept-uri` fetch."
755
+ },
756
+ {
757
+ "name": "zn-reject",
758
+ "description": "Emitted when the reject control is pressed."
759
+ }
760
+ ],
761
+ "js": {
762
+ "properties": [
763
+ {
764
+ "name": "available",
765
+ "description": "Renders the empty/available face instead of the active face.",
766
+ "type": "boolean"
767
+ },
768
+ {
769
+ "name": "incoming",
770
+ "description": "(Available only) the tile is reserving an incoming item awaiting acceptance.",
771
+ "type": "boolean"
772
+ },
773
+ {
774
+ "name": "variant",
775
+ "description": "Free-form grouping/theming key (reflected so consumers can query/style by it).",
776
+ "type": "string"
777
+ },
778
+ {
779
+ "name": "header",
780
+ "description": "Top-bar text (e.g. brand).",
781
+ "type": "string"
782
+ },
783
+ {
784
+ "name": "icon",
785
+ "description": "Leading icon (active state).",
786
+ "type": "string"
787
+ },
788
+ {
789
+ "name": "color",
790
+ "description": "Accent color driving the leading icon and `--channel-tile-color`.",
791
+ "type": "ChannelTileColor"
792
+ },
793
+ {
794
+ "name": "title",
795
+ "description": "Primary line. Defaults to \"Available\" in the available state when unset.",
796
+ "type": "string"
797
+ },
798
+ {
799
+ "name": "subtitle",
800
+ "description": "Secondary line.",
801
+ "type": "string"
802
+ },
803
+ {
804
+ "name": "progress",
805
+ "description": "(Active only) progress bar fill, 0–100.",
806
+ "type": "number"
807
+ },
808
+ {
809
+ "name": "progressColor",
810
+ "description": "(Active only) CSS color for the progress bar fill.",
811
+ "type": "string"
812
+ },
813
+ {
814
+ "name": "itemId",
815
+ "description": "Identifier carried in `zn-accept` / `zn-reject` event details.",
816
+ "type": "string"
817
+ },
818
+ {
819
+ "name": "acceptUri",
820
+ "description": "(Available only) when set, accepting fetches this URI unless `zn-accept` is canceled.",
821
+ "type": "string"
822
+ },
823
+ {
824
+ "name": "reservedUntil",
825
+ "description": "(Available/incoming) epoch (seconds or millis) at which the reservation window ends.",
826
+ "type": "number"
827
+ },
828
+ {
829
+ "name": "autoAcceptDelay",
830
+ "description": "(Available/incoming) auto-accept window length in milliseconds.",
831
+ "type": "number"
832
+ },
833
+ {
834
+ "name": "rejectable",
835
+ "description": "(Available/incoming) whether a reject control is offered.",
836
+ "type": "boolean"
837
+ },
838
+ {
839
+ "name": "acceptIcon",
840
+ "description": "Icon for the built-in accept button.",
841
+ "type": "string"
842
+ },
843
+ {
844
+ "name": "acceptGaid",
845
+ "description": "Optional analytics id forwarded to the built-in accept button.",
846
+ "type": "string"
847
+ },
848
+ {
849
+ "name": "rejectIcon",
850
+ "description": "Icon for the reject control.",
851
+ "type": "string"
852
+ },
853
+ {
854
+ "name": "rejectLabel",
855
+ "description": "Accessible label for the reject control.",
856
+ "type": "string"
857
+ }
858
+ ],
859
+ "events": [
860
+ {
861
+ "name": "zn-accept",
862
+ "description": "Emitted when an available tile is accepted (click or auto-accept). Cancelable — call `preventDefault()` to suppress the built-in `accept-uri` fetch."
863
+ },
864
+ {
865
+ "name": "zn-reject",
866
+ "description": "Emitted when the reject control is pressed."
867
+ }
868
+ ]
869
+ }
870
+ },
636
871
  {
637
872
  "name": "zn-chart",
638
873
  "description": "Chart component powered by Apache ECharts.\n---\n\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
@@ -719,7 +954,7 @@
719
954
  },
720
955
  {
721
956
  "name": "zn-chat-message",
722
- "description": "A single message in a chat-style conversation: avatar, sender,\ntime, optional badge, and a message bubble with optional actions. Also renders\nsystem events (connections, transfers, etc.) as a centred card.\n---\n\n\n### **Slots:**\n - _default_ - The message content. Ignored when the `message` attribute is set.\n- **badge** - Rendered in the header after the sender and time (e.g. an INTERNAL NOTE chip).\n- **edit-dialog-trigger** - Action rendered at the end of the bubble (e.g. a remove icon button).\n- **edit-dialog** - Pass-through for an associated dialog element.\n\n### **CSS Properties:**\n - **--message-background** - The bubble's background colour. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **avatar** - The avatar column.\n- **body** - The header and bubble column.\n- **header** - The sender/time/badge row.\n- **bubble** - The message bubble.\n- **content** - The message content within the bubble.\n- **system-card** - The card rendered for system action types.",
957
+ "description": "A single message in a chat-style conversation: avatar, sender,\ntime, optional badge, and a message bubble with optional actions. Also renders\nsystem events (connections, transfers, etc.) as a centred card.\n---\n\n\n### **Slots:**\n - _default_ - The message content. Ignored when the `message` attribute is set.\n- **badge** - Rendered in the header after the sender and time (e.g. an INTERNAL NOTE chip).\n- **attachments** - Attachments displayed beneath the message content. Use `zn-chat-message-attachment`, which auto-assigns itself to this slot.\n- **edit-dialog-trigger** - Action rendered at the end of the bubble (e.g. a remove icon button).\n- **edit-dialog** - Pass-through for an associated dialog element.\n\n### **CSS Properties:**\n - **--message-background** - The bubble's background color. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **avatar** - The avatar column.\n- **body** - The header and bubble column.\n- **header** - The sender/time/badge row.\n- **bubble** - The message bubble.\n- **content** - The message content within the bubble.\n- **attachments** - The attachments row beneath the message content.\n- **system-card** - The card rendered for system action types.",
723
958
  "doc-url": "",
724
959
  "attributes": [
725
960
  {
@@ -767,6 +1002,10 @@
767
1002
  "name": "badge",
768
1003
  "description": "Rendered in the header after the sender and time (e.g. an INTERNAL NOTE chip)."
769
1004
  },
1005
+ {
1006
+ "name": "attachments",
1007
+ "description": "Attachments displayed beneath the message content. Use `zn-chat-message-attachment`, which auto-assigns itself to this slot."
1008
+ },
770
1009
  {
771
1010
  "name": "edit-dialog-trigger",
772
1011
  "description": "Action rendered at the end of the bubble (e.g. a remove icon button)."
@@ -818,6 +1057,75 @@
818
1057
  "events": []
819
1058
  }
820
1059
  },
1060
+ {
1061
+ "name": "zn-chat-message-attachment",
1062
+ "description": "A single file or link attachment for a `zn-chat-message`. Renders an\nicon and a label as a link, styled to match the message's attachments row. It is\nintended to be used only inside a `zn-chat-message` and is automatically placed in\nthat component's `attachments` slot.\n---\n\n\n### **Slots:**\n - _default_ - The attachment label. Falls back to the `name` attribute when empty.\n\n### **CSS Parts:**\n - **base** - The attachment link.\n- **icon** - The leading icon.\n- **label** - The attachment label.",
1063
+ "doc-url": "",
1064
+ "attributes": [
1065
+ {
1066
+ "name": "href",
1067
+ "description": "The URL the attachment links to.",
1068
+ "value": { "type": "string", "default": "''" }
1069
+ },
1070
+ {
1071
+ "name": "name",
1072
+ "description": "The attachment label (e.g. the file name). Used when the default slot is empty.",
1073
+ "value": { "type": "string", "default": "''" }
1074
+ },
1075
+ {
1076
+ "name": "icon",
1077
+ "description": "The leading icon name.",
1078
+ "value": { "type": "string", "default": "'attach_file'" }
1079
+ },
1080
+ {
1081
+ "name": "target",
1082
+ "description": "Where to open the link. Defaults to a new tab.",
1083
+ "value": { "type": "string", "default": "'_blank'" }
1084
+ },
1085
+ {
1086
+ "name": "download",
1087
+ "description": "Prompt a download rather than navigating to the link.",
1088
+ "value": { "type": "boolean", "default": "false" }
1089
+ }
1090
+ ],
1091
+ "slots": [
1092
+ {
1093
+ "name": "",
1094
+ "description": "The attachment label. Falls back to the `name` attribute when empty."
1095
+ }
1096
+ ],
1097
+ "events": [],
1098
+ "js": {
1099
+ "properties": [
1100
+ {
1101
+ "name": "href",
1102
+ "description": "The URL the attachment links to.",
1103
+ "type": "string"
1104
+ },
1105
+ {
1106
+ "name": "name",
1107
+ "description": "The attachment label (e.g. the file name). Used when the default slot is empty.",
1108
+ "type": "string"
1109
+ },
1110
+ {
1111
+ "name": "icon",
1112
+ "description": "The leading icon name.",
1113
+ "type": "string"
1114
+ },
1115
+ {
1116
+ "name": "target",
1117
+ "description": "Where to open the link. Defaults to a new tab.",
1118
+ "type": "string"
1119
+ },
1120
+ {
1121
+ "name": "download",
1122
+ "description": "Prompt a download rather than navigating to the link.",
1123
+ "type": "boolean"
1124
+ }
1125
+ ],
1126
+ "events": []
1127
+ }
1128
+ },
821
1129
  {
822
1130
  "name": "zn-checkbox",
823
1131
  "description": "Short summary of the component's intended use.\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- **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 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- **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.",
@@ -5721,198 +6029,14 @@
5721
6029
  }
5722
6030
  },
5723
6031
  {
5724
- "name": "zn-priority-list",
5725
- "description": "A reorderable list where each item receives a numerical priority based on its position. Supports drag-and-drop\nand keyboard reordering. Priority values are submitted as form data via hidden inputs.\n---\n\n\n### **Events:**\n - **zn-change** - Emitted when the order of items changes.\n- **zn-reorder** - Emitted when items are reordered. Call `getPriorityMap()` on the component to get the updated `{ key: string, priority: number }[]` array.\n\n### **Methods:**\n - **getPriorityMap(): _PriorityItem[]_** - Returns the priority map: an array of { key, priority } objects.\n- **checkValidity(): _boolean_** - Checks for validity but does not show a validation message.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity(): _boolean_** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(_message)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - _default_ - The default slot where list items are placed. Each slotted element must have a `value` attribute that uniquely identifies the item. The component automatically assigns slot names to project each item into the correct position. The item's position in the list determines its priority (top = `priority-start`, incrementing).\n- **label** - The component's label. Required for proper accessibility. Alternatively, use the `label` attribute.\n- **label-tooltip** - Used to add text displayed in a tooltip next to the label.\n- **help-text** - Text that describes how to use the component. Alternatively, use the `help-text` attribute.\n\n### **CSS Properties:**\n - **--zn-priority-list-item-gap** - The gap between list items. Defaults to `var(--zn-spacing-2x-small)`. _(default: undefined)_\n- **--zn-priority-list-item-padding** - The padding inside each item. Defaults to `var(--zn-spacing-small) var(--zn-spacing-medium)`. _(default: undefined)_\n- **--zn-priority-list-handle-color** - The color of the drag handle. Defaults to `var(--zn-color-neutral-500)`. _(default: undefined)_\n- **--zn-priority-list-priority-color** - The color of the priority number. Defaults to `var(--zn-color-neutral-600)`. _(default: undefined)_\n\n### **CSS Parts:**\n - **form-control** - The form control wrapper.\n- **form-control-label** - The label wrapper.\n- **form-control-input** - The input area wrapper.\n- **form-control-help-text** - The help text wrapper.\n- **list** - The list container.\n- **item** - An individual list item row.\n- **drag-handle** - The drag handle icon.\n- **priority** - The priority number badge.\n- **content** - The content area of an item.",
6032
+ "name": "zn-popup",
6033
+ "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.",
5726
6034
  "doc-url": "",
5727
6035
  "attributes": [
5728
6036
  {
5729
- "name": "name",
5730
- "description": "The name prefix for form submission. Each item generates a hidden input named `{name}[{itemValue}]`\nwith the priority number as its value.",
5731
- "value": { "type": "string", "default": "''" }
5732
- },
5733
- {
5734
- "name": "value",
5735
- "description": "The current ordered list of item keys, reflecting the visual order. This is the source of truth for ordering.\nEach entry should match a `value` attribute on a slotted child element.",
5736
- "value": { "type": "string[]" }
5737
- },
5738
- {
5739
- "name": "label",
5740
- "description": "The component's label. Required for proper accessibility.",
5741
- "value": { "type": "string", "default": "''" }
5742
- },
5743
- {
5744
- "name": "label-tooltip",
5745
- "description": "Text that appears in a tooltip next to the label.",
5746
- "value": { "type": "string", "default": "''" }
5747
- },
5748
- {
5749
- "name": "help-text",
5750
- "description": "Help text that describes how to use the component.",
5751
- "value": { "type": "string", "default": "''" }
5752
- },
5753
- {
5754
- "name": "form",
5755
- "description": "Associates the control with a form by id. The form must be in the same document or shadow root.",
5756
- "value": { "type": "string", "default": "''" }
5757
- },
5758
- {
5759
- "name": "size",
5760
- "description": "The size of the list items.",
5761
- "value": {
5762
- "type": "'small' | 'medium' | 'large'",
5763
- "default": "'medium'"
5764
- }
5765
- },
5766
- {
5767
- "name": "disabled",
5768
- "description": "Whether the priority list is disabled.",
5769
- "value": { "type": "boolean", "default": "false" }
5770
- },
5771
- {
5772
- "name": "required",
5773
- "description": "Ensures the form control has a value before allowing submission.",
5774
- "value": { "type": "boolean", "default": "false" }
5775
- },
5776
- {
5777
- "name": "priority-start",
5778
- "description": "The starting priority number. Defaults to 1.",
5779
- "value": { "type": "number", "default": "1" }
5780
- },
5781
- {
5782
- "name": "formaction",
5783
- "description": "When set, the associated form will be submitted with the given action URL whenever items are reordered.\nIf set to an empty string, the form will be submitted using its existing action.",
5784
- "value": { "type": "string" }
5785
- },
5786
- {
5787
- "name": "order",
5788
- "description": "A comma-separated list of item keys defining the initial display order.\nKeys must match the `value` attributes on slotted children.\nAny slotted items not listed are appended at the end in DOM order.",
5789
- "value": { "type": "string", "default": "''" }
5790
- }
5791
- ],
5792
- "slots": [
5793
- {
5794
- "name": "",
5795
- "description": "The default slot where list items are placed. Each slotted element must have a `value` attribute that uniquely identifies the item. The component automatically assigns slot names to project each item into the correct position. The item's position in the list determines its priority (top = `priority-start`, incrementing)."
5796
- },
5797
- {
5798
- "name": "label",
5799
- "description": "The component's label. Required for proper accessibility. Alternatively, use the `label` attribute."
5800
- },
5801
- {
5802
- "name": "label-tooltip",
5803
- "description": "Used to add text displayed in a tooltip next to the label."
5804
- },
5805
- {
5806
- "name": "help-text",
5807
- "description": "Text that describes how to use the component. Alternatively, use the `help-text` attribute."
5808
- }
5809
- ],
5810
- "events": [
5811
- {
5812
- "name": "zn-change",
5813
- "description": "Emitted when the order of items changes."
5814
- },
5815
- {
5816
- "name": "zn-reorder",
5817
- "description": "Emitted when items are reordered. Call `getPriorityMap()` on the component to get the updated `{ key: string, priority: number }[]` array."
5818
- }
5819
- ],
5820
- "js": {
5821
- "properties": [
5822
- { "name": "hiddenInputsContainer", "type": "HTMLDivElement" },
5823
- {
5824
- "name": "name",
5825
- "description": "The name prefix for form submission. Each item generates a hidden input named `{name}[{itemValue}]`\nwith the priority number as its value.",
5826
- "type": "string"
5827
- },
5828
- {
5829
- "name": "value",
5830
- "description": "The current ordered list of item keys, reflecting the visual order. This is the source of truth for ordering.\nEach entry should match a `value` attribute on a slotted child element.",
5831
- "type": "string[]"
5832
- },
5833
- { "name": "defaultValue", "type": "string[]" },
5834
- {
5835
- "name": "label",
5836
- "description": "The component's label. Required for proper accessibility.",
5837
- "type": "string"
5838
- },
5839
- {
5840
- "name": "labelTooltip",
5841
- "description": "Text that appears in a tooltip next to the label.",
5842
- "type": "string"
5843
- },
5844
- {
5845
- "name": "helpText",
5846
- "description": "Help text that describes how to use the component.",
5847
- "type": "string"
5848
- },
5849
- {
5850
- "name": "form",
5851
- "description": "Associates the control with a form by id. The form must be in the same document or shadow root.",
5852
- "type": "string"
5853
- },
5854
- {
5855
- "name": "size",
5856
- "description": "The size of the list items.",
5857
- "type": "'small' | 'medium' | 'large'"
5858
- },
5859
- {
5860
- "name": "disabled",
5861
- "description": "Whether the priority list is disabled.",
5862
- "type": "boolean"
5863
- },
5864
- {
5865
- "name": "required",
5866
- "description": "Ensures the form control has a value before allowing submission.",
5867
- "type": "boolean"
5868
- },
5869
- {
5870
- "name": "priorityStart",
5871
- "description": "The starting priority number. Defaults to 1.",
5872
- "type": "number"
5873
- },
5874
- {
5875
- "name": "formAction",
5876
- "description": "When set, the associated form will be submitted with the given action URL whenever items are reordered.\nIf set to an empty string, the form will be submitted using its existing action.",
5877
- "type": "string"
5878
- },
5879
- {
5880
- "name": "order",
5881
- "description": "A comma-separated list of item keys defining the initial display order.\nKeys must match the `value` attributes on slotted children.\nAny slotted items not listed are appended at the end in DOM order.",
5882
- "type": "string"
5883
- },
5884
- {
5885
- "name": "validity",
5886
- "description": "Gets the validity state object.",
5887
- "type": "ValidityState"
5888
- },
5889
- {
5890
- "name": "validationMessage",
5891
- "description": "Gets the validation message.",
5892
- "type": "string"
5893
- }
5894
- ],
5895
- "events": [
5896
- {
5897
- "name": "zn-change",
5898
- "description": "Emitted when the order of items changes."
5899
- },
5900
- {
5901
- "name": "zn-reorder",
5902
- "description": "Emitted when items are reordered. Call `getPriorityMap()` on the component to get the updated `{ key: string, priority: number }[]` array."
5903
- }
5904
- ]
5905
- }
5906
- },
5907
- {
5908
- "name": "zn-popup",
5909
- "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.",
5910
- "doc-url": "",
5911
- "attributes": [
5912
- {
5913
- "name": "anchor",
5914
- "description": "The element the popup will be anchored to. If the anchor lives outside of the popup, you can provide the anchor\nelement `id`, a DOM element reference, or a `VirtualElement`. If the anchor lives inside the popup, use the\n`anchor` slot instead.",
5915
- "value": { "type": "Element | string | VirtualElement" }
6037
+ "name": "anchor",
6038
+ "description": "The element the popup will be anchored to. If the anchor lives outside of the popup, you can provide the anchor\nelement `id`, a DOM element reference, or a `VirtualElement`. If the anchor lives inside the popup, use the\n`anchor` slot instead.",
6039
+ "value": { "type": "Element | string | VirtualElement" }
5916
6040
  },
5917
6041
  {
5918
6042
  "name": "active",
@@ -6163,6 +6287,190 @@
6163
6287
  ]
6164
6288
  }
6165
6289
  },
6290
+ {
6291
+ "name": "zn-priority-list",
6292
+ "description": "A reorderable list where each item receives a numerical priority based on its position. Supports drag-and-drop\nand keyboard reordering. Priority values are submitted as form data via hidden inputs.\n---\n\n\n### **Events:**\n - **zn-change** - Emitted when the order of items changes.\n- **zn-reorder** - Emitted when items are reordered. Call `getPriorityMap()` on the component to get the updated `{ key: string, priority: number }[]` array.\n\n### **Methods:**\n - **getPriorityMap(): _PriorityItem[]_** - Returns the priority map: an array of { key, priority } objects.\n- **checkValidity(): _boolean_** - Checks for validity but does not show a validation message.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity(): _boolean_** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(_message)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - _default_ - The default slot where list items are placed. Each slotted element must have a `value` attribute that uniquely identifies the item. The component automatically assigns slot names to project each item into the correct position. The item's position in the list determines its priority (top = `priority-start`, incrementing).\n- **label** - The component's label. Required for proper accessibility. Alternatively, use the `label` attribute.\n- **label-tooltip** - Used to add text displayed in a tooltip next to the label.\n- **help-text** - Text that describes how to use the component. Alternatively, use the `help-text` attribute.\n\n### **CSS Properties:**\n - **--zn-priority-list-item-gap** - The gap between list items. Defaults to `var(--zn-spacing-2x-small)`. _(default: undefined)_\n- **--zn-priority-list-item-padding** - The padding inside each item. Defaults to `var(--zn-spacing-small) var(--zn-spacing-medium)`. _(default: undefined)_\n- **--zn-priority-list-handle-color** - The color of the drag handle. Defaults to `var(--zn-color-neutral-500)`. _(default: undefined)_\n- **--zn-priority-list-priority-color** - The color of the priority number. Defaults to `var(--zn-color-neutral-600)`. _(default: undefined)_\n\n### **CSS Parts:**\n - **form-control** - The form control wrapper.\n- **form-control-label** - The label wrapper.\n- **form-control-input** - The input area wrapper.\n- **form-control-help-text** - The help text wrapper.\n- **list** - The list container.\n- **item** - An individual list item row.\n- **drag-handle** - The drag handle icon.\n- **priority** - The priority number badge.\n- **content** - The content area of an item.",
6293
+ "doc-url": "",
6294
+ "attributes": [
6295
+ {
6296
+ "name": "name",
6297
+ "description": "The name prefix for form submission. Each item generates a hidden input named `{name}[{itemValue}]`\nwith the priority number as its value.",
6298
+ "value": { "type": "string", "default": "''" }
6299
+ },
6300
+ {
6301
+ "name": "value",
6302
+ "description": "The current ordered list of item keys, reflecting the visual order. This is the source of truth for ordering.\nEach entry should match a `value` attribute on a slotted child element.",
6303
+ "value": { "type": "string[]" }
6304
+ },
6305
+ {
6306
+ "name": "label",
6307
+ "description": "The component's label. Required for proper accessibility.",
6308
+ "value": { "type": "string", "default": "''" }
6309
+ },
6310
+ {
6311
+ "name": "label-tooltip",
6312
+ "description": "Text that appears in a tooltip next to the label.",
6313
+ "value": { "type": "string", "default": "''" }
6314
+ },
6315
+ {
6316
+ "name": "help-text",
6317
+ "description": "Help text that describes how to use the component.",
6318
+ "value": { "type": "string", "default": "''" }
6319
+ },
6320
+ {
6321
+ "name": "form",
6322
+ "description": "Associates the control with a form by id. The form must be in the same document or shadow root.",
6323
+ "value": { "type": "string", "default": "''" }
6324
+ },
6325
+ {
6326
+ "name": "size",
6327
+ "description": "The size of the list items.",
6328
+ "value": {
6329
+ "type": "'small' | 'medium' | 'large'",
6330
+ "default": "'medium'"
6331
+ }
6332
+ },
6333
+ {
6334
+ "name": "disabled",
6335
+ "description": "Whether the priority list is disabled.",
6336
+ "value": { "type": "boolean", "default": "false" }
6337
+ },
6338
+ {
6339
+ "name": "required",
6340
+ "description": "Ensures the form control has a value before allowing submission.",
6341
+ "value": { "type": "boolean", "default": "false" }
6342
+ },
6343
+ {
6344
+ "name": "priority-start",
6345
+ "description": "The starting priority number. Defaults to 1.",
6346
+ "value": { "type": "number", "default": "1" }
6347
+ },
6348
+ {
6349
+ "name": "formaction",
6350
+ "description": "When set, the associated form will be submitted with the given action URL whenever items are reordered.\nIf set to an empty string, the form will be submitted using its existing action.",
6351
+ "value": { "type": "string" }
6352
+ },
6353
+ {
6354
+ "name": "order",
6355
+ "description": "A comma-separated list of item keys defining the initial display order.\nKeys must match the `value` attributes on slotted children.\nAny slotted items not listed are appended at the end in DOM order.",
6356
+ "value": { "type": "string", "default": "''" }
6357
+ }
6358
+ ],
6359
+ "slots": [
6360
+ {
6361
+ "name": "",
6362
+ "description": "The default slot where list items are placed. Each slotted element must have a `value` attribute that uniquely identifies the item. The component automatically assigns slot names to project each item into the correct position. The item's position in the list determines its priority (top = `priority-start`, incrementing)."
6363
+ },
6364
+ {
6365
+ "name": "label",
6366
+ "description": "The component's label. Required for proper accessibility. Alternatively, use the `label` attribute."
6367
+ },
6368
+ {
6369
+ "name": "label-tooltip",
6370
+ "description": "Used to add text displayed in a tooltip next to the label."
6371
+ },
6372
+ {
6373
+ "name": "help-text",
6374
+ "description": "Text that describes how to use the component. Alternatively, use the `help-text` attribute."
6375
+ }
6376
+ ],
6377
+ "events": [
6378
+ {
6379
+ "name": "zn-change",
6380
+ "description": "Emitted when the order of items changes."
6381
+ },
6382
+ {
6383
+ "name": "zn-reorder",
6384
+ "description": "Emitted when items are reordered. Call `getPriorityMap()` on the component to get the updated `{ key: string, priority: number }[]` array."
6385
+ }
6386
+ ],
6387
+ "js": {
6388
+ "properties": [
6389
+ { "name": "hiddenInputsContainer", "type": "HTMLDivElement" },
6390
+ {
6391
+ "name": "name",
6392
+ "description": "The name prefix for form submission. Each item generates a hidden input named `{name}[{itemValue}]`\nwith the priority number as its value.",
6393
+ "type": "string"
6394
+ },
6395
+ {
6396
+ "name": "value",
6397
+ "description": "The current ordered list of item keys, reflecting the visual order. This is the source of truth for ordering.\nEach entry should match a `value` attribute on a slotted child element.",
6398
+ "type": "string[]"
6399
+ },
6400
+ { "name": "defaultValue", "type": "string[]" },
6401
+ {
6402
+ "name": "label",
6403
+ "description": "The component's label. Required for proper accessibility.",
6404
+ "type": "string"
6405
+ },
6406
+ {
6407
+ "name": "labelTooltip",
6408
+ "description": "Text that appears in a tooltip next to the label.",
6409
+ "type": "string"
6410
+ },
6411
+ {
6412
+ "name": "helpText",
6413
+ "description": "Help text that describes how to use the component.",
6414
+ "type": "string"
6415
+ },
6416
+ {
6417
+ "name": "form",
6418
+ "description": "Associates the control with a form by id. The form must be in the same document or shadow root.",
6419
+ "type": "string"
6420
+ },
6421
+ {
6422
+ "name": "size",
6423
+ "description": "The size of the list items.",
6424
+ "type": "'small' | 'medium' | 'large'"
6425
+ },
6426
+ {
6427
+ "name": "disabled",
6428
+ "description": "Whether the priority list is disabled.",
6429
+ "type": "boolean"
6430
+ },
6431
+ {
6432
+ "name": "required",
6433
+ "description": "Ensures the form control has a value before allowing submission.",
6434
+ "type": "boolean"
6435
+ },
6436
+ {
6437
+ "name": "priorityStart",
6438
+ "description": "The starting priority number. Defaults to 1.",
6439
+ "type": "number"
6440
+ },
6441
+ {
6442
+ "name": "formAction",
6443
+ "description": "When set, the associated form will be submitted with the given action URL whenever items are reordered.\nIf set to an empty string, the form will be submitted using its existing action.",
6444
+ "type": "string"
6445
+ },
6446
+ {
6447
+ "name": "order",
6448
+ "description": "A comma-separated list of item keys defining the initial display order.\nKeys must match the `value` attributes on slotted children.\nAny slotted items not listed are appended at the end in DOM order.",
6449
+ "type": "string"
6450
+ },
6451
+ {
6452
+ "name": "validity",
6453
+ "description": "Gets the validity state object.",
6454
+ "type": "ValidityState"
6455
+ },
6456
+ {
6457
+ "name": "validationMessage",
6458
+ "description": "Gets the validation message.",
6459
+ "type": "string"
6460
+ }
6461
+ ],
6462
+ "events": [
6463
+ {
6464
+ "name": "zn-change",
6465
+ "description": "Emitted when the order of items changes."
6466
+ },
6467
+ {
6468
+ "name": "zn-reorder",
6469
+ "description": "Emitted when items are reordered. Call `getPriorityMap()` on the component to get the updated `{ key: string, priority: number }[]` array."
6470
+ }
6471
+ ]
6472
+ }
6473
+ },
6166
6474
  {
6167
6475
  "name": "zn-progress-bar",
6168
6476
  "description": "Progress bars provide visual feedback about the completion status of a task or process.\n---\n\n\n### **CSS Properties:**\n - **--zn-border-color** - The color of the progress bar background track. _(default: undefined)_\n- **--zn-progress-bar-color** - The color of the progress bar fill. _(default: undefined)_\n- **--zn-text-heading** - The color of the caption text. _(default: undefined)_\n- **--zn-text** - The color of the progress percentage and description text. _(default: undefined)_\n- **--zn-spacing-x-small** - The spacing between header/footer and the progress bar. _(default: undefined)_\n\n### **CSS Parts:**\n - **header** - The header container that contains the caption and progress text.\n- **caption** - The caption text element.\n- **progress** - The progress percentage text element.\n- **bar** - The SVG element containing the progress bar.\n- **track** - The background track of the progress bar.\n- **fill** - The filled portion of the progress bar indicating progress.\n- **footer** - The footer container that contains the description.\n- **info** - The description text element.",