@kubex/zinc 1.1.10 → 1.1.12

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.
@@ -2448,6 +2448,82 @@
2448
2448
  }
2449
2449
  ]
2450
2450
  },
2451
+ {
2452
+ "name": "zn-priority-list",
2453
+ "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.",
2454
+ "attributes": [
2455
+ {
2456
+ "name": "name",
2457
+ "description": "The name prefix for form submission. Each item generates a hidden input named `{name}[{itemValue}]`\nwith the priority number as its value.",
2458
+ "values": []
2459
+ },
2460
+ {
2461
+ "name": "value",
2462
+ "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.",
2463
+ "values": [{ "name": "string[]" }]
2464
+ },
2465
+ {
2466
+ "name": "label",
2467
+ "description": "The component's label. Required for proper accessibility.",
2468
+ "values": []
2469
+ },
2470
+ {
2471
+ "name": "label-tooltip",
2472
+ "description": "Text that appears in a tooltip next to the label.",
2473
+ "values": []
2474
+ },
2475
+ {
2476
+ "name": "help-text",
2477
+ "description": "Help text that describes how to use the component.",
2478
+ "values": []
2479
+ },
2480
+ {
2481
+ "name": "form",
2482
+ "description": "Associates the control with a form by id. The form must be in the same document or shadow root.",
2483
+ "values": []
2484
+ },
2485
+ {
2486
+ "name": "size",
2487
+ "description": "The size of the list items.",
2488
+ "values": [
2489
+ { "name": "small" },
2490
+ { "name": "medium" },
2491
+ { "name": "large" }
2492
+ ]
2493
+ },
2494
+ {
2495
+ "name": "disabled",
2496
+ "description": "Whether the priority list is disabled.",
2497
+ "values": []
2498
+ },
2499
+ {
2500
+ "name": "required",
2501
+ "description": "Ensures the form control has a value before allowing submission.",
2502
+ "values": []
2503
+ },
2504
+ {
2505
+ "name": "priority-start",
2506
+ "description": "The starting priority number. Defaults to 1.",
2507
+ "values": []
2508
+ },
2509
+ {
2510
+ "name": "formaction",
2511
+ "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.",
2512
+ "values": []
2513
+ },
2514
+ {
2515
+ "name": "order",
2516
+ "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.",
2517
+ "values": []
2518
+ }
2519
+ ],
2520
+ "references": [
2521
+ {
2522
+ "name": "Documentation",
2523
+ "url": "https://zinc.style/components/priority-list"
2524
+ }
2525
+ ]
2526
+ },
2451
2527
  {
2452
2528
  "name": "zn-popup",
2453
2529
  "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.",
@@ -2597,82 +2673,6 @@
2597
2673
  }
2598
2674
  ]
2599
2675
  },
2600
- {
2601
- "name": "zn-priority-list",
2602
- "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.",
2603
- "attributes": [
2604
- {
2605
- "name": "name",
2606
- "description": "The name prefix for form submission. Each item generates a hidden input named `{name}[{itemValue}]`\nwith the priority number as its value.",
2607
- "values": []
2608
- },
2609
- {
2610
- "name": "value",
2611
- "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.",
2612
- "values": [{ "name": "string[]" }]
2613
- },
2614
- {
2615
- "name": "label",
2616
- "description": "The component's label. Required for proper accessibility.",
2617
- "values": []
2618
- },
2619
- {
2620
- "name": "label-tooltip",
2621
- "description": "Text that appears in a tooltip next to the label.",
2622
- "values": []
2623
- },
2624
- {
2625
- "name": "help-text",
2626
- "description": "Help text that describes how to use the component.",
2627
- "values": []
2628
- },
2629
- {
2630
- "name": "form",
2631
- "description": "Associates the control with a form by id. The form must be in the same document or shadow root.",
2632
- "values": []
2633
- },
2634
- {
2635
- "name": "size",
2636
- "description": "The size of the list items.",
2637
- "values": [
2638
- { "name": "small" },
2639
- { "name": "medium" },
2640
- { "name": "large" }
2641
- ]
2642
- },
2643
- {
2644
- "name": "disabled",
2645
- "description": "Whether the priority list is disabled.",
2646
- "values": []
2647
- },
2648
- {
2649
- "name": "required",
2650
- "description": "Ensures the form control has a value before allowing submission.",
2651
- "values": []
2652
- },
2653
- {
2654
- "name": "priority-start",
2655
- "description": "The starting priority number. Defaults to 1.",
2656
- "values": []
2657
- },
2658
- {
2659
- "name": "formaction",
2660
- "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.",
2661
- "values": []
2662
- },
2663
- {
2664
- "name": "order",
2665
- "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.",
2666
- "values": []
2667
- }
2668
- ],
2669
- "references": [
2670
- {
2671
- "name": "Documentation",
2672
- "url": "https://zinc.style/components/priority-list"
2673
- }
2674
- ]
2675
- },
2676
2676
  {
2677
2677
  "name": "zn-progress-bar",
2678
2678
  "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.",
@@ -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.10",
4
+ "version": "1.1.12",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {
@@ -5720,6 +5720,190 @@
5720
5720
  "events": []
5721
5721
  }
5722
5722
  },
5723
+ {
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.",
5726
+ "doc-url": "",
5727
+ "attributes": [
5728
+ {
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
+ },
5723
5907
  {
5724
5908
  "name": "zn-popup",
5725
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.",
@@ -5979,190 +6163,6 @@
5979
6163
  ]
5980
6164
  }
5981
6165
  },
5982
- {
5983
- "name": "zn-priority-list",
5984
- "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.",
5985
- "doc-url": "",
5986
- "attributes": [
5987
- {
5988
- "name": "name",
5989
- "description": "The name prefix for form submission. Each item generates a hidden input named `{name}[{itemValue}]`\nwith the priority number as its value.",
5990
- "value": { "type": "string", "default": "''" }
5991
- },
5992
- {
5993
- "name": "value",
5994
- "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.",
5995
- "value": { "type": "string[]" }
5996
- },
5997
- {
5998
- "name": "label",
5999
- "description": "The component's label. Required for proper accessibility.",
6000
- "value": { "type": "string", "default": "''" }
6001
- },
6002
- {
6003
- "name": "label-tooltip",
6004
- "description": "Text that appears in a tooltip next to the label.",
6005
- "value": { "type": "string", "default": "''" }
6006
- },
6007
- {
6008
- "name": "help-text",
6009
- "description": "Help text that describes how to use the component.",
6010
- "value": { "type": "string", "default": "''" }
6011
- },
6012
- {
6013
- "name": "form",
6014
- "description": "Associates the control with a form by id. The form must be in the same document or shadow root.",
6015
- "value": { "type": "string", "default": "''" }
6016
- },
6017
- {
6018
- "name": "size",
6019
- "description": "The size of the list items.",
6020
- "value": {
6021
- "type": "'small' | 'medium' | 'large'",
6022
- "default": "'medium'"
6023
- }
6024
- },
6025
- {
6026
- "name": "disabled",
6027
- "description": "Whether the priority list is disabled.",
6028
- "value": { "type": "boolean", "default": "false" }
6029
- },
6030
- {
6031
- "name": "required",
6032
- "description": "Ensures the form control has a value before allowing submission.",
6033
- "value": { "type": "boolean", "default": "false" }
6034
- },
6035
- {
6036
- "name": "priority-start",
6037
- "description": "The starting priority number. Defaults to 1.",
6038
- "value": { "type": "number", "default": "1" }
6039
- },
6040
- {
6041
- "name": "formaction",
6042
- "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.",
6043
- "value": { "type": "string" }
6044
- },
6045
- {
6046
- "name": "order",
6047
- "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.",
6048
- "value": { "type": "string", "default": "''" }
6049
- }
6050
- ],
6051
- "slots": [
6052
- {
6053
- "name": "",
6054
- "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)."
6055
- },
6056
- {
6057
- "name": "label",
6058
- "description": "The component's label. Required for proper accessibility. Alternatively, use the `label` attribute."
6059
- },
6060
- {
6061
- "name": "label-tooltip",
6062
- "description": "Used to add text displayed in a tooltip next to the label."
6063
- },
6064
- {
6065
- "name": "help-text",
6066
- "description": "Text that describes how to use the component. Alternatively, use the `help-text` attribute."
6067
- }
6068
- ],
6069
- "events": [
6070
- {
6071
- "name": "zn-change",
6072
- "description": "Emitted when the order of items changes."
6073
- },
6074
- {
6075
- "name": "zn-reorder",
6076
- "description": "Emitted when items are reordered. Call `getPriorityMap()` on the component to get the updated `{ key: string, priority: number }[]` array."
6077
- }
6078
- ],
6079
- "js": {
6080
- "properties": [
6081
- { "name": "hiddenInputsContainer", "type": "HTMLDivElement" },
6082
- {
6083
- "name": "name",
6084
- "description": "The name prefix for form submission. Each item generates a hidden input named `{name}[{itemValue}]`\nwith the priority number as its value.",
6085
- "type": "string"
6086
- },
6087
- {
6088
- "name": "value",
6089
- "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.",
6090
- "type": "string[]"
6091
- },
6092
- { "name": "defaultValue", "type": "string[]" },
6093
- {
6094
- "name": "label",
6095
- "description": "The component's label. Required for proper accessibility.",
6096
- "type": "string"
6097
- },
6098
- {
6099
- "name": "labelTooltip",
6100
- "description": "Text that appears in a tooltip next to the label.",
6101
- "type": "string"
6102
- },
6103
- {
6104
- "name": "helpText",
6105
- "description": "Help text that describes how to use the component.",
6106
- "type": "string"
6107
- },
6108
- {
6109
- "name": "form",
6110
- "description": "Associates the control with a form by id. The form must be in the same document or shadow root.",
6111
- "type": "string"
6112
- },
6113
- {
6114
- "name": "size",
6115
- "description": "The size of the list items.",
6116
- "type": "'small' | 'medium' | 'large'"
6117
- },
6118
- {
6119
- "name": "disabled",
6120
- "description": "Whether the priority list is disabled.",
6121
- "type": "boolean"
6122
- },
6123
- {
6124
- "name": "required",
6125
- "description": "Ensures the form control has a value before allowing submission.",
6126
- "type": "boolean"
6127
- },
6128
- {
6129
- "name": "priorityStart",
6130
- "description": "The starting priority number. Defaults to 1.",
6131
- "type": "number"
6132
- },
6133
- {
6134
- "name": "formAction",
6135
- "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.",
6136
- "type": "string"
6137
- },
6138
- {
6139
- "name": "order",
6140
- "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.",
6141
- "type": "string"
6142
- },
6143
- {
6144
- "name": "validity",
6145
- "description": "Gets the validity state object.",
6146
- "type": "ValidityState"
6147
- },
6148
- {
6149
- "name": "validationMessage",
6150
- "description": "Gets the validation message.",
6151
- "type": "string"
6152
- }
6153
- ],
6154
- "events": [
6155
- {
6156
- "name": "zn-change",
6157
- "description": "Emitted when the order of items changes."
6158
- },
6159
- {
6160
- "name": "zn-reorder",
6161
- "description": "Emitted when items are reordered. Call `getPriorityMap()` on the component to get the updated `{ key: string, priority: number }[]` array."
6162
- }
6163
- ]
6164
- }
6165
- },
6166
6166
  {
6167
6167
  "name": "zn-progress-bar",
6168
6168
  "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.",