@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
package/dist/custom-elements.json CHANGED
@@ -47,6 +47,79 @@
47
47
  }
48
48
  ]
49
49
  },
50
+ {
51
+ "kind": "javascript-module",
52
+ "path": "components/action-bar/action-bar.js",
53
+ "declarations": [
54
+ {
55
+ "kind": "class",
56
+ "description": "",
57
+ "name": "ZnActionBar",
58
+ "cssProperties": [
59
+ {
60
+ "description": "An example CSS custom property.",
61
+ "name": "--example"
62
+ }
63
+ ],
64
+ "cssParts": [
65
+ {
66
+ "description": "The component's base wrapper.",
67
+ "name": "base"
68
+ }
69
+ ],
70
+ "slots": [
71
+ {
72
+ "description": "The default slot.",
73
+ "name": ""
74
+ },
75
+ {
76
+ "description": "An example slot.",
77
+ "name": "example"
78
+ }
79
+ ],
80
+ "members": [
81
+ {
82
+ "kind": "field",
83
+ "name": "localize",
84
+ "privacy": "private",
85
+ "readonly": true,
86
+ "default": "new LocalizeController(this)"
87
+ }
88
+ ],
89
+ "events": [
90
+ {
91
+ "description": "Emitted as an example.",
92
+ "name": "zn-event-name"
93
+ }
94
+ ],
95
+ "superclass": {
96
+ "name": "ZincElement",
97
+ "module": "/src/internal/zinc-element"
98
+ },
99
+ "summary": "Short summary of the component's intended use.",
100
+ "tagNameWithoutPrefix": "action-bar",
101
+ "tagName": "zn-action-bar",
102
+ "customElement": true,
103
+ "jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/action-bar\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-example\n *\n * @event zn-event-name - Emitted as an example.\n *\n * @slot - The default slot.\n * @slot example - An example slot.\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --example - An example CSS custom property.\n */",
104
+ "documentation": "https://zinc.style/components/action-bar",
105
+ "status": "experimental",
106
+ "since": "1.0",
107
+ "dependencies": [
108
+ "zn-example"
109
+ ]
110
+ }
111
+ ],
112
+ "exports": [
113
+ {
114
+ "kind": "js",
115
+ "name": "default",
116
+ "declaration": {
117
+ "name": "ZnActionBar",
118
+ "module": "components/action-bar/action-bar.js"
119
+ }
120
+ }
121
+ ]
122
+ },
50
123
  {
51
124
  "kind": "javascript-module",
52
125
  "path": "components/alert/alert.js",
@@ -223,79 +296,6 @@
223
296
  }
224
297
  ]
225
298
  },
226
- {
227
- "kind": "javascript-module",
228
- "path": "components/action-bar/action-bar.js",
229
- "declarations": [
230
- {
231
- "kind": "class",
232
- "description": "",
233
- "name": "ZnActionBar",
234
- "cssProperties": [
235
- {
236
- "description": "An example CSS custom property.",
237
- "name": "--example"
238
- }
239
- ],
240
- "cssParts": [
241
- {
242
- "description": "The component's base wrapper.",
243
- "name": "base"
244
- }
245
- ],
246
- "slots": [
247
- {
248
- "description": "The default slot.",
249
- "name": ""
250
- },
251
- {
252
- "description": "An example slot.",
253
- "name": "example"
254
- }
255
- ],
256
- "members": [
257
- {
258
- "kind": "field",
259
- "name": "localize",
260
- "privacy": "private",
261
- "readonly": true,
262
- "default": "new LocalizeController(this)"
263
- }
264
- ],
265
- "events": [
266
- {
267
- "description": "Emitted as an example.",
268
- "name": "zn-event-name"
269
- }
270
- ],
271
- "superclass": {
272
- "name": "ZincElement",
273
- "module": "/src/internal/zinc-element"
274
- },
275
- "summary": "Short summary of the component's intended use.",
276
- "tagNameWithoutPrefix": "action-bar",
277
- "tagName": "zn-action-bar",
278
- "customElement": true,
279
- "jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/action-bar\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-example\n *\n * @event zn-event-name - Emitted as an example.\n *\n * @slot - The default slot.\n * @slot example - An example slot.\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --example - An example CSS custom property.\n */",
280
- "documentation": "https://zinc.style/components/action-bar",
281
- "status": "experimental",
282
- "since": "1.0",
283
- "dependencies": [
284
- "zn-example"
285
- ]
286
- }
287
- ],
288
- "exports": [
289
- {
290
- "kind": "js",
291
- "name": "default",
292
- "declaration": {
293
- "name": "ZnActionBar",
294
- "module": "components/action-bar/action-bar.js"
295
- }
296
- }
297
- ]
298
- },
299
299
  {
300
300
  "kind": "javascript-module",
301
301
  "path": "components/animated-button/animated-button.js",
@@ -2561,171 +2561,241 @@
2561
2561
  },
2562
2562
  {
2563
2563
  "kind": "javascript-module",
2564
- "path": "components/chart/chart.js",
2564
+ "path": "components/channel-tile/channel-tile.js",
2565
2565
  "declarations": [
2566
2566
  {
2567
2567
  "kind": "class",
2568
2568
  "description": "",
2569
- "name": "ZnChart",
2569
+ "name": "ZnChannelTile",
2570
+ "cssProperties": [
2571
+ {
2572
+ "description": "Resolved accent color (set from the `color` property).",
2573
+ "name": "--channel-tile-color"
2574
+ }
2575
+ ],
2570
2576
  "cssParts": [
2571
2577
  {
2572
2578
  "description": "The component's base wrapper.",
2573
2579
  "name": "base"
2580
+ },
2581
+ {
2582
+ "description": "The progress indicator (incoming countdown overlay or active progress bar).",
2583
+ "name": "progress"
2584
+ }
2585
+ ],
2586
+ "slots": [
2587
+ {
2588
+ "description": "Replaces the leading icon in the active state.",
2589
+ "name": "leading"
2590
+ },
2591
+ {
2592
+ "description": "Action content for the available state (e.g. a form). Falls back to a default accept button.",
2593
+ "name": "action"
2594
+ },
2595
+ {
2596
+ "description": "Trailing content (e.g. status badges) in the active state.",
2597
+ "name": "footer"
2574
2598
  }
2575
2599
  ],
2576
2600
  "members": [
2577
2601
  {
2578
2602
  "kind": "field",
2579
- "name": "type",
2603
+ "name": "available",
2580
2604
  "type": {
2581
- "text": "ChartType"
2605
+ "text": "boolean"
2582
2606
  },
2583
- "default": "'bar'",
2584
- "attribute": "type"
2607
+ "default": "false",
2608
+ "description": "Renders the empty/available face instead of the active face.",
2609
+ "attribute": "available",
2610
+ "reflects": true
2585
2611
  },
2586
2612
  {
2587
2613
  "kind": "field",
2588
- "name": "data",
2614
+ "name": "incoming",
2589
2615
  "type": {
2590
- "text": "SeriesItem[]"
2616
+ "text": "boolean"
2591
2617
  },
2592
- "default": "[]",
2593
- "attribute": "data"
2618
+ "default": "false",
2619
+ "description": "(Available only) the tile is reserving an incoming item awaiting acceptance.",
2620
+ "attribute": "incoming",
2621
+ "reflects": true
2594
2622
  },
2595
2623
  {
2596
2624
  "kind": "field",
2597
- "name": "categories",
2625
+ "name": "variant",
2598
2626
  "type": {
2599
- "text": "string[]"
2627
+ "text": "string"
2600
2628
  },
2601
- "default": "[]",
2602
- "attribute": "categories"
2629
+ "default": "''",
2630
+ "description": "Free-form grouping/theming key (reflected so consumers can query/style by it).",
2631
+ "attribute": "variant",
2632
+ "reflects": true
2603
2633
  },
2604
2634
  {
2605
2635
  "kind": "field",
2606
- "name": "xAxis",
2636
+ "name": "header",
2607
2637
  "type": {
2608
- "text": "'datetime' | 'category' | 'numeric'"
2638
+ "text": "string"
2609
2639
  },
2610
- "attribute": "xaxis"
2640
+ "default": "''",
2641
+ "description": "Top-bar text (e.g. brand).",
2642
+ "attribute": "header"
2611
2643
  },
2612
2644
  {
2613
2645
  "kind": "field",
2614
- "name": "datapointSize",
2646
+ "name": "icon",
2615
2647
  "type": {
2616
- "text": "number"
2648
+ "text": "string"
2617
2649
  },
2618
- "default": "1",
2619
- "attribute": "d-size"
2650
+ "default": "''",
2651
+ "description": "Leading icon (active state).",
2652
+ "attribute": "icon"
2620
2653
  },
2621
2654
  {
2622
2655
  "kind": "field",
2623
- "name": "stacked",
2656
+ "name": "color",
2624
2657
  "type": {
2625
- "text": "boolean"
2658
+ "text": "ChannelTileColor"
2626
2659
  },
2627
- "default": "false",
2628
- "attribute": "stacked"
2660
+ "default": "'default'",
2661
+ "description": "Accent color driving the leading icon and `--channel-tile-color`.",
2662
+ "attribute": "color",
2663
+ "reflects": true
2629
2664
  },
2630
2665
  {
2631
2666
  "kind": "field",
2632
- "name": "live",
2667
+ "name": "title",
2633
2668
  "type": {
2634
- "text": "boolean"
2669
+ "text": "string"
2635
2670
  },
2636
- "default": "false",
2637
- "attribute": "live"
2671
+ "default": "''",
2672
+ "description": "Primary line. Defaults to \"Available\" in the available state when unset.",
2673
+ "attribute": "title"
2638
2674
  },
2639
2675
  {
2640
2676
  "kind": "field",
2641
- "name": "dataUrl",
2677
+ "name": "subtitle",
2642
2678
  "type": {
2643
2679
  "text": "string"
2644
2680
  },
2645
2681
  "default": "''",
2646
- "attribute": "data-url"
2682
+ "description": "Secondary line.",
2683
+ "attribute": "subtitle"
2647
2684
  },
2648
2685
  {
2649
2686
  "kind": "field",
2650
- "name": "liveInterval",
2687
+ "name": "progress",
2651
2688
  "type": {
2652
2689
  "text": "number"
2653
2690
  },
2654
- "default": "1000",
2655
- "attribute": "live-interval"
2691
+ "default": "0",
2692
+ "description": "(Active only) progress bar fill, 0–100.",
2693
+ "attribute": "progress"
2656
2694
  },
2657
2695
  {
2658
2696
  "kind": "field",
2659
- "name": "height",
2697
+ "name": "progressColor",
2660
2698
  "type": {
2661
- "text": "number"
2699
+ "text": "string"
2662
2700
  },
2663
- "default": "300",
2664
- "attribute": "height",
2665
- "reflects": true
2701
+ "default": "''",
2702
+ "description": "(Active only) CSS color for the progress bar fill.",
2703
+ "attribute": "progress-color"
2666
2704
  },
2667
2705
  {
2668
2706
  "kind": "field",
2669
- "name": "enableAnimations",
2707
+ "name": "itemId",
2670
2708
  "type": {
2671
- "text": "boolean | number"
2709
+ "text": "string"
2672
2710
  },
2673
- "default": "false",
2674
- "attribute": "enable-animations"
2711
+ "default": "''",
2712
+ "description": "Identifier carried in `zn-accept` / `zn-reject` event details.",
2713
+ "attribute": "item-id"
2675
2714
  },
2676
2715
  {
2677
2716
  "kind": "field",
2678
- "name": "yAxisAppend",
2717
+ "name": "acceptUri",
2679
2718
  "type": {
2680
2719
  "text": "string"
2681
2720
  },
2682
- "attribute": "y-axis-append"
2721
+ "default": "''",
2722
+ "description": "(Available only) when set, accepting fetches this URI unless `zn-accept` is canceled.",
2723
+ "attribute": "accept-uri"
2683
2724
  },
2684
2725
  {
2685
2726
  "kind": "field",
2686
- "name": "colors",
2727
+ "name": "reservedUntil",
2687
2728
  "type": {
2688
- "text": "string[] | undefined"
2729
+ "text": "number"
2689
2730
  },
2690
- "attribute": "colors"
2731
+ "default": "0",
2732
+ "description": "(Available/incoming) epoch (seconds or millis) at which the reservation window ends.",
2733
+ "attribute": "reserved-until"
2691
2734
  },
2692
2735
  {
2693
2736
  "kind": "field",
2694
- "name": "syncGroup",
2737
+ "name": "autoAcceptDelay",
2695
2738
  "type": {
2696
- "text": "string | undefined"
2739
+ "text": "number"
2697
2740
  },
2698
- "attribute": "sync-group"
2741
+ "default": "0",
2742
+ "description": "(Available/incoming) auto-accept window length in milliseconds.",
2743
+ "attribute": "auto-accept-delay"
2699
2744
  },
2700
2745
  {
2701
2746
  "kind": "field",
2702
- "name": "smooth",
2747
+ "name": "rejectable",
2703
2748
  "type": {
2704
2749
  "text": "boolean"
2705
2750
  },
2706
2751
  "default": "false",
2707
- "attribute": "smooth"
2752
+ "description": "(Available/incoming) whether a reject control is offered.",
2753
+ "attribute": "rejectable",
2754
+ "reflects": true
2708
2755
  },
2709
2756
  {
2710
2757
  "kind": "field",
2711
- "name": "scale",
2758
+ "name": "acceptIcon",
2712
2759
  "type": {
2713
- "text": "boolean | number"
2760
+ "text": "string"
2714
2761
  },
2715
- "default": "false",
2716
- "attribute": "scale"
2762
+ "default": "'plus@lu'",
2763
+ "description": "Icon for the built-in accept button.",
2764
+ "attribute": "accept-icon"
2717
2765
  },
2718
2766
  {
2719
2767
  "kind": "field",
2720
- "name": "chart",
2768
+ "name": "acceptGaid",
2721
2769
  "type": {
2722
- "text": "ECharts | undefined"
2770
+ "text": "string"
2723
2771
  },
2724
- "privacy": "private"
2772
+ "default": "''",
2773
+ "description": "Optional analytics id forwarded to the built-in accept button.",
2774
+ "attribute": "accept-gaid"
2725
2775
  },
2726
2776
  {
2727
2777
  "kind": "field",
2728
- "name": "liveTimer",
2778
+ "name": "rejectIcon",
2779
+ "type": {
2780
+ "text": "string"
2781
+ },
2782
+ "default": "'call_end'",
2783
+ "description": "Icon for the reject control.",
2784
+ "attribute": "reject-icon"
2785
+ },
2786
+ {
2787
+ "kind": "field",
2788
+ "name": "rejectLabel",
2789
+ "type": {
2790
+ "text": "string"
2791
+ },
2792
+ "default": "'Reject'",
2793
+ "description": "Accessible label for the reject control.",
2794
+ "attribute": "reject-label"
2795
+ },
2796
+ {
2797
+ "kind": "field",
2798
+ "name": "_tickInterval",
2729
2799
  "type": {
2730
2800
  "text": "number | undefined"
2731
2801
  },
@@ -2733,200 +2803,288 @@
2733
2803
  },
2734
2804
  {
2735
2805
  "kind": "field",
2736
- "name": "resizeObserver",
2806
+ "name": "_autoAcceptFired",
2807
+ "type": {
2808
+ "text": "string"
2809
+ },
2737
2810
  "privacy": "private",
2738
- "readonly": true,
2739
- "default": "new ResizeController(this, { target: null, skipInitial: true, callback: () => this.chart?.resize(), })"
2811
+ "default": "''"
2740
2812
  },
2741
2813
  {
2742
2814
  "kind": "method",
2743
- "name": "getTheme",
2815
+ "name": "_isCountingDown",
2744
2816
  "privacy": "private",
2745
2817
  "return": {
2746
2818
  "type": {
2747
- "text": "'light' | 'dark'"
2819
+ "text": "boolean"
2748
2820
  }
2749
2821
  }
2750
2822
  },
2751
2823
  {
2752
2824
  "kind": "method",
2753
- "name": "getTextColor",
2825
+ "name": "_startTicker",
2826
+ "privacy": "private"
2827
+ },
2828
+ {
2829
+ "kind": "method",
2830
+ "name": "_stopTicker",
2831
+ "privacy": "private"
2832
+ },
2833
+ {
2834
+ "kind": "method",
2835
+ "name": "_maybeAutoAccept",
2836
+ "privacy": "private"
2837
+ },
2838
+ {
2839
+ "kind": "method",
2840
+ "name": "_accept",
2754
2841
  "privacy": "private",
2755
2842
  "return": {
2756
2843
  "type": {
2757
- "text": "string | undefined"
2844
+ "text": "void"
2758
2845
  }
2759
2846
  }
2760
2847
  },
2761
2848
  {
2762
2849
  "kind": "method",
2763
- "name": "getBorderColor",
2850
+ "name": "_reservedUntilMs",
2764
2851
  "privacy": "private",
2765
2852
  "return": {
2766
2853
  "type": {
2767
- "text": "string | undefined"
2854
+ "text": "number"
2768
2855
  }
2769
2856
  }
2770
2857
  },
2771
2858
  {
2772
2859
  "kind": "method",
2773
- "name": "buildOption",
2860
+ "name": "_countdownPercent",
2861
+ "privacy": "private",
2862
+ "return": {
2863
+ "type": {
2864
+ "text": "number"
2865
+ }
2866
+ }
2867
+ },
2868
+ {
2869
+ "kind": "field",
2870
+ "name": "_handleReject",
2774
2871
  "privacy": "private"
2775
2872
  },
2776
2873
  {
2777
- "kind": "method",
2778
- "name": "initChart",
2874
+ "kind": "field",
2875
+ "name": "_handleClick",
2779
2876
  "privacy": "private"
2780
2877
  },
2781
2878
  {
2782
2879
  "kind": "method",
2783
- "name": "startLive",
2880
+ "name": "_renderLeading",
2784
2881
  "privacy": "private"
2785
2882
  },
2786
2883
  {
2787
2884
  "kind": "method",
2788
- "name": "reinit",
2885
+ "name": "_renderAvailableAction",
2789
2886
  "privacy": "private"
2790
2887
  }
2791
2888
  ],
2889
+ "events": [
2890
+ {
2891
+ "description": "Emitted when an available tile is accepted (click or auto-accept). Cancelable — call `preventDefault()` to suppress the built-in `accept-uri` fetch.",
2892
+ "name": "zn-accept"
2893
+ },
2894
+ {
2895
+ "description": "Emitted when the reject control is pressed.",
2896
+ "name": "zn-reject"
2897
+ }
2898
+ ],
2792
2899
  "attributes": [
2793
2900
  {
2794
- "name": "type",
2901
+ "name": "available",
2795
2902
  "type": {
2796
- "text": "ChartType"
2903
+ "text": "boolean"
2797
2904
  },
2798
- "default": "'bar'",
2799
- "fieldName": "type"
2905
+ "default": "false",
2906
+ "description": "Renders the empty/available face instead of the active face.",
2907
+ "fieldName": "available"
2800
2908
  },
2801
2909
  {
2802
- "name": "data",
2910
+ "name": "incoming",
2803
2911
  "type": {
2804
- "text": "SeriesItem[]"
2912
+ "text": "boolean"
2805
2913
  },
2806
- "default": "[]",
2807
- "fieldName": "data"
2914
+ "default": "false",
2915
+ "description": "(Available only) the tile is reserving an incoming item awaiting acceptance.",
2916
+ "fieldName": "incoming"
2808
2917
  },
2809
2918
  {
2810
- "name": "categories",
2919
+ "name": "variant",
2811
2920
  "type": {
2812
- "text": "string[]"
2921
+ "text": "string"
2813
2922
  },
2814
- "default": "[]",
2815
- "fieldName": "categories"
2923
+ "default": "''",
2924
+ "description": "Free-form grouping/theming key (reflected so consumers can query/style by it).",
2925
+ "fieldName": "variant"
2816
2926
  },
2817
2927
  {
2818
- "name": "xaxis",
2928
+ "name": "header",
2819
2929
  "type": {
2820
- "text": "'datetime' | 'category' | 'numeric'"
2930
+ "text": "string"
2821
2931
  },
2822
- "fieldName": "xAxis"
2932
+ "default": "''",
2933
+ "description": "Top-bar text (e.g. brand).",
2934
+ "fieldName": "header"
2823
2935
  },
2824
2936
  {
2825
- "name": "d-size",
2937
+ "name": "icon",
2826
2938
  "type": {
2827
- "text": "number"
2939
+ "text": "string"
2828
2940
  },
2829
- "default": "1",
2830
- "fieldName": "datapointSize"
2941
+ "default": "''",
2942
+ "description": "Leading icon (active state).",
2943
+ "fieldName": "icon"
2831
2944
  },
2832
2945
  {
2833
- "name": "stacked",
2946
+ "name": "color",
2834
2947
  "type": {
2835
- "text": "boolean"
2948
+ "text": "ChannelTileColor"
2836
2949
  },
2837
- "default": "false",
2838
- "fieldName": "stacked"
2950
+ "default": "'default'",
2951
+ "description": "Accent color driving the leading icon and `--channel-tile-color`.",
2952
+ "fieldName": "color"
2839
2953
  },
2840
2954
  {
2841
- "name": "live",
2955
+ "name": "title",
2842
2956
  "type": {
2843
- "text": "boolean"
2957
+ "text": "string"
2844
2958
  },
2845
- "default": "false",
2846
- "fieldName": "live"
2959
+ "default": "''",
2960
+ "description": "Primary line. Defaults to \"Available\" in the available state when unset.",
2961
+ "fieldName": "title"
2847
2962
  },
2848
2963
  {
2849
- "name": "data-url",
2964
+ "name": "subtitle",
2850
2965
  "type": {
2851
2966
  "text": "string"
2852
2967
  },
2853
2968
  "default": "''",
2854
- "fieldName": "dataUrl"
2969
+ "description": "Secondary line.",
2970
+ "fieldName": "subtitle"
2855
2971
  },
2856
2972
  {
2857
- "name": "live-interval",
2973
+ "name": "progress",
2858
2974
  "type": {
2859
2975
  "text": "number"
2860
2976
  },
2861
- "default": "1000",
2862
- "fieldName": "liveInterval"
2977
+ "default": "0",
2978
+ "description": "(Active only) progress bar fill, 0–100.",
2979
+ "fieldName": "progress"
2863
2980
  },
2864
2981
  {
2865
- "name": "height",
2982
+ "name": "progress-color",
2866
2983
  "type": {
2867
- "text": "number"
2984
+ "text": "string"
2868
2985
  },
2869
- "default": "300",
2870
- "fieldName": "height"
2986
+ "default": "''",
2987
+ "description": "(Active only) CSS color for the progress bar fill.",
2988
+ "fieldName": "progressColor"
2871
2989
  },
2872
2990
  {
2873
- "name": "enable-animations",
2991
+ "name": "item-id",
2874
2992
  "type": {
2875
- "text": "boolean | number"
2993
+ "text": "string"
2876
2994
  },
2877
- "default": "false",
2878
- "fieldName": "enableAnimations"
2995
+ "default": "''",
2996
+ "description": "Identifier carried in `zn-accept` / `zn-reject` event details.",
2997
+ "fieldName": "itemId"
2879
2998
  },
2880
2999
  {
2881
- "name": "y-axis-append",
3000
+ "name": "accept-uri",
2882
3001
  "type": {
2883
3002
  "text": "string"
2884
3003
  },
2885
- "fieldName": "yAxisAppend"
3004
+ "default": "''",
3005
+ "description": "(Available only) when set, accepting fetches this URI unless `zn-accept` is canceled.",
3006
+ "fieldName": "acceptUri"
2886
3007
  },
2887
3008
  {
2888
- "name": "colors",
3009
+ "name": "reserved-until",
2889
3010
  "type": {
2890
- "text": "string[] | undefined"
3011
+ "text": "number"
2891
3012
  },
2892
- "fieldName": "colors"
3013
+ "default": "0",
3014
+ "description": "(Available/incoming) epoch (seconds or millis) at which the reservation window ends.",
3015
+ "fieldName": "reservedUntil"
2893
3016
  },
2894
3017
  {
2895
- "name": "sync-group",
3018
+ "name": "auto-accept-delay",
2896
3019
  "type": {
2897
- "text": "string | undefined"
3020
+ "text": "number"
2898
3021
  },
2899
- "fieldName": "syncGroup"
3022
+ "default": "0",
3023
+ "description": "(Available/incoming) auto-accept window length in milliseconds.",
3024
+ "fieldName": "autoAcceptDelay"
2900
3025
  },
2901
3026
  {
2902
- "name": "smooth",
3027
+ "name": "rejectable",
2903
3028
  "type": {
2904
3029
  "text": "boolean"
2905
3030
  },
2906
3031
  "default": "false",
2907
- "fieldName": "smooth"
3032
+ "description": "(Available/incoming) whether a reject control is offered.",
3033
+ "fieldName": "rejectable"
2908
3034
  },
2909
3035
  {
2910
- "name": "scale",
3036
+ "name": "accept-icon",
2911
3037
  "type": {
2912
- "text": "boolean | number"
3038
+ "text": "string"
2913
3039
  },
2914
- "default": "false",
2915
- "fieldName": "scale"
3040
+ "default": "'plus@lu'",
3041
+ "description": "Icon for the built-in accept button.",
3042
+ "fieldName": "acceptIcon"
3043
+ },
3044
+ {
3045
+ "name": "accept-gaid",
3046
+ "type": {
3047
+ "text": "string"
3048
+ },
3049
+ "default": "''",
3050
+ "description": "Optional analytics id forwarded to the built-in accept button.",
3051
+ "fieldName": "acceptGaid"
3052
+ },
3053
+ {
3054
+ "name": "reject-icon",
3055
+ "type": {
3056
+ "text": "string"
3057
+ },
3058
+ "default": "'call_end'",
3059
+ "description": "Icon for the reject control.",
3060
+ "fieldName": "rejectIcon"
3061
+ },
3062
+ {
3063
+ "name": "reject-label",
3064
+ "type": {
3065
+ "text": "string"
3066
+ },
3067
+ "default": "'Reject'",
3068
+ "description": "Accessible label for the reject control.",
3069
+ "fieldName": "rejectLabel"
2916
3070
  }
2917
3071
  ],
2918
3072
  "superclass": {
2919
3073
  "name": "ZincElement",
2920
3074
  "module": "/src/internal/zinc-element"
2921
3075
  },
2922
- "summary": "Chart component powered by Apache ECharts.",
2923
- "tagNameWithoutPrefix": "chart",
2924
- "tagName": "zn-chart",
3076
+ "summary": "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.",
3077
+ "tagNameWithoutPrefix": "channel-tile",
3078
+ "tagName": "zn-channel-tile",
2925
3079
  "customElement": true,
2926
- "jsDoc": "/**\n * @summary Chart component powered by Apache ECharts.\n * @documentation https://zinc.style/components/data-chart\n * @status experimental\n * @since 1.0\n *\n * @csspart base - The component's base wrapper.\n */",
2927
- "documentation": "https://zinc.style/components/data-chart",
3080
+ "jsDoc": "/**\n * @summary A channel/queue slot tile with two faces: an active (occupied) state\n * showing an in-progress item, and an available (empty) state advertising\n * capacity — optionally reserving an incoming item with an auto-accept countdown.\n * @documentation https://zinc.style/components/channel-tile\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-button\n * @dependency zn-icon\n *\n * @event zn-accept - Emitted when an available tile is accepted (click or auto-accept).\n * Cancelable — call `preventDefault()` to suppress the built-in `accept-uri` fetch.\n * @event zn-reject - Emitted when the reject control is pressed.\n *\n * @slot leading - Replaces the leading icon in the active state.\n * @slot action - Action content for the available state (e.g. a form). Falls back to a default accept button.\n * @slot footer - Trailing content (e.g. status badges) in the active state.\n *\n * @csspart base - The component's base wrapper.\n * @csspart progress - The progress indicator (incoming countdown overlay or active progress bar).\n *\n * @cssproperty --channel-tile-color - Resolved accent color (set from the `color` property).\n */",
3081
+ "documentation": "https://zinc.style/components/channel-tile",
2928
3082
  "status": "experimental",
2929
- "since": "1.0"
3083
+ "since": "1.0",
3084
+ "dependencies": [
3085
+ "zn-button",
3086
+ "zn-icon"
3087
+ ]
2930
3088
  }
2931
3089
  ],
2932
3090
  "exports": [
@@ -2934,101 +3092,490 @@
2934
3092
  "kind": "js",
2935
3093
  "name": "default",
2936
3094
  "declaration": {
2937
- "name": "ZnChart",
2938
- "module": "components/chart/chart.js"
3095
+ "name": "ZnChannelTile",
3096
+ "module": "components/channel-tile/channel-tile.js"
2939
3097
  }
2940
3098
  }
2941
3099
  ]
2942
3100
  },
2943
3101
  {
2944
3102
  "kind": "javascript-module",
2945
- "path": "components/chat-message/chat-message.js",
3103
+ "path": "components/chart/chart.js",
2946
3104
  "declarations": [
2947
3105
  {
2948
3106
  "kind": "class",
2949
3107
  "description": "",
2950
- "name": "ZnChatMessage",
2951
- "cssProperties": [
2952
- {
2953
- "description": "The bubble's background colour.",
2954
- "name": "--message-background"
2955
- }
2956
- ],
3108
+ "name": "ZnChart",
2957
3109
  "cssParts": [
2958
3110
  {
2959
3111
  "description": "The component's base wrapper.",
2960
3112
  "name": "base"
2961
- },
2962
- {
2963
- "description": "The avatar column.",
2964
- "name": "avatar"
2965
- },
2966
- {
2967
- "description": "The header and bubble column.",
2968
- "name": "body"
2969
- },
2970
- {
2971
- "description": "The sender/time/badge row.",
2972
- "name": "header"
2973
- },
2974
- {
2975
- "description": "The message bubble.",
2976
- "name": "bubble"
2977
- },
2978
- {
2979
- "description": "The message content within the bubble.",
2980
- "name": "content"
2981
- },
2982
- {
2983
- "description": "The card rendered for system action types.",
2984
- "name": "system-card"
2985
- }
2986
- ],
2987
- "slots": [
2988
- {
2989
- "description": "The message content. Ignored when the `message` attribute is set.",
2990
- "name": ""
2991
- },
2992
- {
2993
- "description": "Rendered in the header after the sender and time (e.g. an INTERNAL NOTE chip).",
2994
- "name": "badge"
2995
- },
2996
- {
2997
- "description": "Action rendered at the end of the bubble (e.g. a remove icon button).",
2998
- "name": "edit-dialog-trigger"
2999
- },
3000
- {
3001
- "description": "Pass-through for an associated dialog element.",
3002
- "name": "edit-dialog"
3003
3113
  }
3004
3114
  ],
3005
3115
  "members": [
3006
3116
  {
3007
3117
  "kind": "field",
3008
- "name": "dependencies",
3118
+ "name": "type",
3009
3119
  "type": {
3010
- "text": "object"
3120
+ "text": "ChartType"
3011
3121
  },
3012
- "static": true,
3013
- "default": "{ 'zn-icon': ZnIcon }"
3122
+ "default": "'bar'",
3123
+ "attribute": "type"
3014
3124
  },
3015
3125
  {
3016
3126
  "kind": "field",
3017
- "name": "SYSTEM_ACTION_TYPES",
3127
+ "name": "data",
3018
3128
  "type": {
3019
- "text": "readonly string[]"
3129
+ "text": "SeriesItem[]"
3020
3130
  },
3021
- "static": true,
3022
- "readonly": true,
3023
- "default": "[ 'connected.agent', 'attachment.added', 'transfer', 'ended', 'customer.ended', 'customer.connected', 'customer.disconnected', ]"
3131
+ "default": "[]",
3132
+ "attribute": "data"
3024
3133
  },
3025
3134
  {
3026
3135
  "kind": "field",
3027
- "name": "DISPLAYED_ACTION_TYPES",
3136
+ "name": "categories",
3028
3137
  "type": {
3029
- "text": "readonly string[]"
3138
+ "text": "string[]"
3030
3139
  },
3031
- "privacy": "private",
3140
+ "default": "[]",
3141
+ "attribute": "categories"
3142
+ },
3143
+ {
3144
+ "kind": "field",
3145
+ "name": "xAxis",
3146
+ "type": {
3147
+ "text": "'datetime' | 'category' | 'numeric'"
3148
+ },
3149
+ "attribute": "xaxis"
3150
+ },
3151
+ {
3152
+ "kind": "field",
3153
+ "name": "datapointSize",
3154
+ "type": {
3155
+ "text": "number"
3156
+ },
3157
+ "default": "1",
3158
+ "attribute": "d-size"
3159
+ },
3160
+ {
3161
+ "kind": "field",
3162
+ "name": "stacked",
3163
+ "type": {
3164
+ "text": "boolean"
3165
+ },
3166
+ "default": "false",
3167
+ "attribute": "stacked"
3168
+ },
3169
+ {
3170
+ "kind": "field",
3171
+ "name": "live",
3172
+ "type": {
3173
+ "text": "boolean"
3174
+ },
3175
+ "default": "false",
3176
+ "attribute": "live"
3177
+ },
3178
+ {
3179
+ "kind": "field",
3180
+ "name": "dataUrl",
3181
+ "type": {
3182
+ "text": "string"
3183
+ },
3184
+ "default": "''",
3185
+ "attribute": "data-url"
3186
+ },
3187
+ {
3188
+ "kind": "field",
3189
+ "name": "liveInterval",
3190
+ "type": {
3191
+ "text": "number"
3192
+ },
3193
+ "default": "1000",
3194
+ "attribute": "live-interval"
3195
+ },
3196
+ {
3197
+ "kind": "field",
3198
+ "name": "height",
3199
+ "type": {
3200
+ "text": "number"
3201
+ },
3202
+ "default": "300",
3203
+ "attribute": "height",
3204
+ "reflects": true
3205
+ },
3206
+ {
3207
+ "kind": "field",
3208
+ "name": "enableAnimations",
3209
+ "type": {
3210
+ "text": "boolean | number"
3211
+ },
3212
+ "default": "false",
3213
+ "attribute": "enable-animations"
3214
+ },
3215
+ {
3216
+ "kind": "field",
3217
+ "name": "yAxisAppend",
3218
+ "type": {
3219
+ "text": "string"
3220
+ },
3221
+ "attribute": "y-axis-append"
3222
+ },
3223
+ {
3224
+ "kind": "field",
3225
+ "name": "colors",
3226
+ "type": {
3227
+ "text": "string[] | undefined"
3228
+ },
3229
+ "attribute": "colors"
3230
+ },
3231
+ {
3232
+ "kind": "field",
3233
+ "name": "syncGroup",
3234
+ "type": {
3235
+ "text": "string | undefined"
3236
+ },
3237
+ "attribute": "sync-group"
3238
+ },
3239
+ {
3240
+ "kind": "field",
3241
+ "name": "smooth",
3242
+ "type": {
3243
+ "text": "boolean"
3244
+ },
3245
+ "default": "false",
3246
+ "attribute": "smooth"
3247
+ },
3248
+ {
3249
+ "kind": "field",
3250
+ "name": "scale",
3251
+ "type": {
3252
+ "text": "boolean | number"
3253
+ },
3254
+ "default": "false",
3255
+ "attribute": "scale"
3256
+ },
3257
+ {
3258
+ "kind": "field",
3259
+ "name": "chart",
3260
+ "type": {
3261
+ "text": "ECharts | undefined"
3262
+ },
3263
+ "privacy": "private"
3264
+ },
3265
+ {
3266
+ "kind": "field",
3267
+ "name": "liveTimer",
3268
+ "type": {
3269
+ "text": "number | undefined"
3270
+ },
3271
+ "privacy": "private"
3272
+ },
3273
+ {
3274
+ "kind": "field",
3275
+ "name": "resizeObserver",
3276
+ "privacy": "private",
3277
+ "readonly": true,
3278
+ "default": "new ResizeController(this, { target: null, skipInitial: true, callback: () => this.chart?.resize(), })"
3279
+ },
3280
+ {
3281
+ "kind": "method",
3282
+ "name": "getTheme",
3283
+ "privacy": "private",
3284
+ "return": {
3285
+ "type": {
3286
+ "text": "'light' | 'dark'"
3287
+ }
3288
+ }
3289
+ },
3290
+ {
3291
+ "kind": "method",
3292
+ "name": "getTextColor",
3293
+ "privacy": "private",
3294
+ "return": {
3295
+ "type": {
3296
+ "text": "string | undefined"
3297
+ }
3298
+ }
3299
+ },
3300
+ {
3301
+ "kind": "method",
3302
+ "name": "getBorderColor",
3303
+ "privacy": "private",
3304
+ "return": {
3305
+ "type": {
3306
+ "text": "string | undefined"
3307
+ }
3308
+ }
3309
+ },
3310
+ {
3311
+ "kind": "method",
3312
+ "name": "buildOption",
3313
+ "privacy": "private"
3314
+ },
3315
+ {
3316
+ "kind": "method",
3317
+ "name": "initChart",
3318
+ "privacy": "private"
3319
+ },
3320
+ {
3321
+ "kind": "method",
3322
+ "name": "startLive",
3323
+ "privacy": "private"
3324
+ },
3325
+ {
3326
+ "kind": "method",
3327
+ "name": "reinit",
3328
+ "privacy": "private"
3329
+ }
3330
+ ],
3331
+ "attributes": [
3332
+ {
3333
+ "name": "type",
3334
+ "type": {
3335
+ "text": "ChartType"
3336
+ },
3337
+ "default": "'bar'",
3338
+ "fieldName": "type"
3339
+ },
3340
+ {
3341
+ "name": "data",
3342
+ "type": {
3343
+ "text": "SeriesItem[]"
3344
+ },
3345
+ "default": "[]",
3346
+ "fieldName": "data"
3347
+ },
3348
+ {
3349
+ "name": "categories",
3350
+ "type": {
3351
+ "text": "string[]"
3352
+ },
3353
+ "default": "[]",
3354
+ "fieldName": "categories"
3355
+ },
3356
+ {
3357
+ "name": "xaxis",
3358
+ "type": {
3359
+ "text": "'datetime' | 'category' | 'numeric'"
3360
+ },
3361
+ "fieldName": "xAxis"
3362
+ },
3363
+ {
3364
+ "name": "d-size",
3365
+ "type": {
3366
+ "text": "number"
3367
+ },
3368
+ "default": "1",
3369
+ "fieldName": "datapointSize"
3370
+ },
3371
+ {
3372
+ "name": "stacked",
3373
+ "type": {
3374
+ "text": "boolean"
3375
+ },
3376
+ "default": "false",
3377
+ "fieldName": "stacked"
3378
+ },
3379
+ {
3380
+ "name": "live",
3381
+ "type": {
3382
+ "text": "boolean"
3383
+ },
3384
+ "default": "false",
3385
+ "fieldName": "live"
3386
+ },
3387
+ {
3388
+ "name": "data-url",
3389
+ "type": {
3390
+ "text": "string"
3391
+ },
3392
+ "default": "''",
3393
+ "fieldName": "dataUrl"
3394
+ },
3395
+ {
3396
+ "name": "live-interval",
3397
+ "type": {
3398
+ "text": "number"
3399
+ },
3400
+ "default": "1000",
3401
+ "fieldName": "liveInterval"
3402
+ },
3403
+ {
3404
+ "name": "height",
3405
+ "type": {
3406
+ "text": "number"
3407
+ },
3408
+ "default": "300",
3409
+ "fieldName": "height"
3410
+ },
3411
+ {
3412
+ "name": "enable-animations",
3413
+ "type": {
3414
+ "text": "boolean | number"
3415
+ },
3416
+ "default": "false",
3417
+ "fieldName": "enableAnimations"
3418
+ },
3419
+ {
3420
+ "name": "y-axis-append",
3421
+ "type": {
3422
+ "text": "string"
3423
+ },
3424
+ "fieldName": "yAxisAppend"
3425
+ },
3426
+ {
3427
+ "name": "colors",
3428
+ "type": {
3429
+ "text": "string[] | undefined"
3430
+ },
3431
+ "fieldName": "colors"
3432
+ },
3433
+ {
3434
+ "name": "sync-group",
3435
+ "type": {
3436
+ "text": "string | undefined"
3437
+ },
3438
+ "fieldName": "syncGroup"
3439
+ },
3440
+ {
3441
+ "name": "smooth",
3442
+ "type": {
3443
+ "text": "boolean"
3444
+ },
3445
+ "default": "false",
3446
+ "fieldName": "smooth"
3447
+ },
3448
+ {
3449
+ "name": "scale",
3450
+ "type": {
3451
+ "text": "boolean | number"
3452
+ },
3453
+ "default": "false",
3454
+ "fieldName": "scale"
3455
+ }
3456
+ ],
3457
+ "superclass": {
3458
+ "name": "ZincElement",
3459
+ "module": "/src/internal/zinc-element"
3460
+ },
3461
+ "summary": "Chart component powered by Apache ECharts.",
3462
+ "tagNameWithoutPrefix": "chart",
3463
+ "tagName": "zn-chart",
3464
+ "customElement": true,
3465
+ "jsDoc": "/**\n * @summary Chart component powered by Apache ECharts.\n * @documentation https://zinc.style/components/data-chart\n * @status experimental\n * @since 1.0\n *\n * @csspart base - The component's base wrapper.\n */",
3466
+ "documentation": "https://zinc.style/components/data-chart",
3467
+ "status": "experimental",
3468
+ "since": "1.0"
3469
+ }
3470
+ ],
3471
+ "exports": [
3472
+ {
3473
+ "kind": "js",
3474
+ "name": "default",
3475
+ "declaration": {
3476
+ "name": "ZnChart",
3477
+ "module": "components/chart/chart.js"
3478
+ }
3479
+ }
3480
+ ]
3481
+ },
3482
+ {
3483
+ "kind": "javascript-module",
3484
+ "path": "components/chat-message/chat-message.js",
3485
+ "declarations": [
3486
+ {
3487
+ "kind": "class",
3488
+ "description": "",
3489
+ "name": "ZnChatMessage",
3490
+ "cssProperties": [
3491
+ {
3492
+ "description": "The bubble's background color.",
3493
+ "name": "--message-background"
3494
+ }
3495
+ ],
3496
+ "cssParts": [
3497
+ {
3498
+ "description": "The component's base wrapper.",
3499
+ "name": "base"
3500
+ },
3501
+ {
3502
+ "description": "The avatar column.",
3503
+ "name": "avatar"
3504
+ },
3505
+ {
3506
+ "description": "The header and bubble column.",
3507
+ "name": "body"
3508
+ },
3509
+ {
3510
+ "description": "The sender/time/badge row.",
3511
+ "name": "header"
3512
+ },
3513
+ {
3514
+ "description": "The message bubble.",
3515
+ "name": "bubble"
3516
+ },
3517
+ {
3518
+ "description": "The message content within the bubble.",
3519
+ "name": "content"
3520
+ },
3521
+ {
3522
+ "description": "The attachments row beneath the message content.",
3523
+ "name": "attachments"
3524
+ },
3525
+ {
3526
+ "description": "The card rendered for system action types.",
3527
+ "name": "system-card"
3528
+ }
3529
+ ],
3530
+ "slots": [
3531
+ {
3532
+ "description": "The message content. Ignored when the `message` attribute is set.",
3533
+ "name": ""
3534
+ },
3535
+ {
3536
+ "description": "Rendered in the header after the sender and time (e.g. an INTERNAL NOTE chip).",
3537
+ "name": "badge"
3538
+ },
3539
+ {
3540
+ "description": "Attachments displayed beneath the message content. Use `zn-chat-message-attachment`, which auto-assigns itself to this slot.",
3541
+ "name": "attachments"
3542
+ },
3543
+ {
3544
+ "description": "Action rendered at the end of the bubble (e.g. a remove icon button).",
3545
+ "name": "edit-dialog-trigger"
3546
+ },
3547
+ {
3548
+ "description": "Pass-through for an associated dialog element.",
3549
+ "name": "edit-dialog"
3550
+ }
3551
+ ],
3552
+ "members": [
3553
+ {
3554
+ "kind": "field",
3555
+ "name": "dependencies",
3556
+ "type": {
3557
+ "text": "object"
3558
+ },
3559
+ "static": true,
3560
+ "default": "{ 'zn-icon': ZnIcon }"
3561
+ },
3562
+ {
3563
+ "kind": "field",
3564
+ "name": "SYSTEM_ACTION_TYPES",
3565
+ "type": {
3566
+ "text": "readonly string[]"
3567
+ },
3568
+ "static": true,
3569
+ "readonly": true,
3570
+ "default": "[ 'connected.agent', 'attachment.added', 'transfer', 'ended', 'customer.ended', 'customer.connected', 'customer.disconnected', ]"
3571
+ },
3572
+ {
3573
+ "kind": "field",
3574
+ "name": "DISPLAYED_ACTION_TYPES",
3575
+ "type": {
3576
+ "text": "readonly string[]"
3577
+ },
3578
+ "privacy": "private",
3032
3579
  "static": true,
3033
3580
  "readonly": true,
3034
3581
  "default": "[ '', 'connected.agent', 'attachment.added', 'multi.answer', 'transfer', 'ended', 'error', 'customer.ended', 'message-sending', 'customer.connected', 'customer.disconnected', 'internal', ]"
@@ -3217,7 +3764,7 @@
3217
3764
  "tagNameWithoutPrefix": "chat-message",
3218
3765
  "tagName": "zn-chat-message",
3219
3766
  "customElement": true,
3220
- "jsDoc": "/**\n * @summary A single message in a chat-style conversation: avatar, sender,\n * time, optional badge, and a message bubble with optional actions. Also renders\n * system events (connections, transfers, etc.) as a centred card.\n * @documentation https://zinc.style/components/chat-message\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-icon\n *\n * @slot - The message content. Ignored when the `message` attribute is set.\n * @slot badge - Rendered in the header after the sender and time (e.g. an INTERNAL NOTE chip).\n * @slot edit-dialog-trigger - Action rendered at the end of the bubble (e.g. a remove icon button).\n * @slot edit-dialog - Pass-through for an associated dialog element.\n *\n * @csspart base - The component's base wrapper.\n * @csspart avatar - The avatar column.\n * @csspart body - The header and bubble column.\n * @csspart header - The sender/time/badge row.\n * @csspart bubble - The message bubble.\n * @csspart content - The message content within the bubble.\n * @csspart system-card - The card rendered for system action types.\n *\n * @cssproperty --message-background - The bubble's background colour.\n */",
3767
+ "jsDoc": "/**\n * @summary A single message in a chat-style conversation: avatar, sender,\n * time, optional badge, and a message bubble with optional actions. Also renders\n * system events (connections, transfers, etc.) as a centred card.\n * @documentation https://zinc.style/components/chat-message\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-icon\n *\n * @slot - The message content. Ignored when the `message` attribute is set.\n * @slot badge - Rendered in the header after the sender and time (e.g. an INTERNAL NOTE chip).\n * @slot attachments - Attachments displayed beneath the message content. Use `zn-chat-message-attachment`,\n * which auto-assigns itself to this slot.\n * @slot edit-dialog-trigger - Action rendered at the end of the bubble (e.g. a remove icon button).\n * @slot edit-dialog - Pass-through for an associated dialog element.\n *\n * @csspart base - The component's base wrapper.\n * @csspart avatar - The avatar column.\n * @csspart body - The header and bubble column.\n * @csspart header - The sender/time/badge row.\n * @csspart bubble - The message bubble.\n * @csspart content - The message content within the bubble.\n * @csspart attachments - The attachments row beneath the message content.\n * @csspart system-card - The card rendered for system action types.\n *\n * @cssproperty --message-background - The bubble's background color.\n */",
3221
3768
  "documentation": "https://zinc.style/components/chat-message",
3222
3769
  "status": "experimental",
3223
3770
  "since": "1.0",
@@ -3239,66 +3786,30 @@
3239
3786
  },
3240
3787
  {
3241
3788
  "kind": "javascript-module",
3242
- "path": "components/checkbox/checkbox.js",
3789
+ "path": "components/chat-message-attachment/chat-message-attachment.js",
3243
3790
  "declarations": [
3244
3791
  {
3245
3792
  "kind": "class",
3246
3793
  "description": "",
3247
- "name": "ZnCheckbox",
3794
+ "name": "ZnChatMessageAttachment",
3248
3795
  "cssParts": [
3249
3796
  {
3250
- "description": "The component's base wrapper.",
3797
+ "description": "The attachment link.",
3251
3798
  "name": "base"
3252
3799
  },
3253
3800
  {
3254
- "description": "The square container that wraps the checkbox's checked state.",
3255
- "name": "control"
3256
- },
3257
- {
3258
- "description": "Matches the control part when the checkbox is checked.",
3259
- "name": "control--checked"
3260
- },
3261
- {
3262
- "description": "Matches the control part when the checkbox is indeterminate.",
3263
- "name": "control--indeterminate"
3264
- },
3265
- {
3266
- "description": "The checked icon, an `<zn-icon>` element.",
3267
- "name": "checked-icon"
3268
- },
3269
- {
3270
- "description": "The unchecked icon, an `<zn-icon>` element.",
3271
- "name": "unchecked-icon"
3272
- },
3273
- {
3274
- "description": "The indeterminate icon, an `<zn-icon>` element.",
3275
- "name": "indeterminate-icon"
3801
+ "description": "The leading icon.",
3802
+ "name": "icon"
3276
3803
  },
3277
3804
  {
3278
- "description": "The container that wraps the checkbox's label.",
3805
+ "description": "The attachment label.",
3279
3806
  "name": "label"
3280
- },
3281
- {
3282
- "description": "The container that wraps the checkbox's description.",
3283
- "name": "description"
3284
- },
3285
- {
3286
- "description": "The container that wraps optional content that appears when a checkbox is checked.",
3287
- "name": "selected-content"
3288
3807
  }
3289
3808
  ],
3290
3809
  "slots": [
3291
3810
  {
3292
- "description": "The checkbox's label.",
3811
+ "description": "The attachment label. Falls back to the `name` attribute when empty.",
3293
3812
  "name": ""
3294
- },
3295
- {
3296
- "description": "A description of the checkbox's label. Serves as help text for a checkbox item. Alternatively, you can use the `description` attribute.",
3297
- "name": "description"
3298
- },
3299
- {
3300
- "description": "Use to nest rich content (like an input) inside a selected checkbox item. Use only with the contained style.",
3301
- "name": "selected-content"
3302
3813
  }
3303
3814
  ],
3304
3815
  "members": [
@@ -3309,41 +3820,241 @@
3309
3820
  "text": "object"
3310
3821
  },
3311
3822
  "static": true,
3312
- "default": "{'zn-icon': ZnIcon}"
3313
- },
3314
- {
3315
- "kind": "field",
3316
- "name": "formControlController",
3317
- "privacy": "private",
3318
- "readonly": true,
3319
- "default": "new FormControlController(this, { value: (control: ZnCheckbox) => (control.checked ? control.value || 'on' : control.uncheckedValue || undefined), defaultValue: (control: ZnCheckbox) => control.defaultChecked, setValue: (control: ZnCheckbox, checked: boolean) => (control.checked = checked) })"
3320
- },
3321
- {
3322
- "kind": "field",
3323
- "name": "hasSlotController",
3324
- "privacy": "private",
3325
- "readonly": true,
3326
- "default": "new HasSlotController(this, 'description')"
3823
+ "default": "{ 'zn-icon': ZnIcon }"
3327
3824
  },
3328
3825
  {
3329
3826
  "kind": "field",
3330
- "name": "input",
3827
+ "name": "href",
3331
3828
  "type": {
3332
- "text": "HTMLInputElement"
3333
- }
3829
+ "text": "string"
3830
+ },
3831
+ "default": "''",
3832
+ "description": "The URL the attachment links to.",
3833
+ "attribute": "href"
3334
3834
  },
3335
3835
  {
3336
3836
  "kind": "field",
3337
- "name": "hasFocus",
3837
+ "name": "name",
3338
3838
  "type": {
3339
- "text": "boolean"
3839
+ "text": "string"
3340
3840
  },
3341
- "privacy": "private",
3342
- "default": "false"
3841
+ "default": "''",
3842
+ "description": "The attachment label (e.g. the file name). Used when the default slot is empty.",
3843
+ "attribute": "name"
3343
3844
  },
3344
3845
  {
3345
3846
  "kind": "field",
3346
- "name": "title",
3847
+ "name": "icon",
3848
+ "type": {
3849
+ "text": "string"
3850
+ },
3851
+ "default": "'attach_file'",
3852
+ "description": "The leading icon name.",
3853
+ "attribute": "icon"
3854
+ },
3855
+ {
3856
+ "kind": "field",
3857
+ "name": "target",
3858
+ "type": {
3859
+ "text": "string"
3860
+ },
3861
+ "default": "'_blank'",
3862
+ "description": "Where to open the link. Defaults to a new tab.",
3863
+ "attribute": "target"
3864
+ },
3865
+ {
3866
+ "kind": "field",
3867
+ "name": "download",
3868
+ "type": {
3869
+ "text": "boolean"
3870
+ },
3871
+ "default": "false",
3872
+ "description": "Prompt a download rather than navigating to the link.",
3873
+ "attribute": "download"
3874
+ }
3875
+ ],
3876
+ "attributes": [
3877
+ {
3878
+ "name": "href",
3879
+ "type": {
3880
+ "text": "string"
3881
+ },
3882
+ "default": "''",
3883
+ "description": "The URL the attachment links to.",
3884
+ "fieldName": "href"
3885
+ },
3886
+ {
3887
+ "name": "name",
3888
+ "type": {
3889
+ "text": "string"
3890
+ },
3891
+ "default": "''",
3892
+ "description": "The attachment label (e.g. the file name). Used when the default slot is empty.",
3893
+ "fieldName": "name"
3894
+ },
3895
+ {
3896
+ "name": "icon",
3897
+ "type": {
3898
+ "text": "string"
3899
+ },
3900
+ "default": "'attach_file'",
3901
+ "description": "The leading icon name.",
3902
+ "fieldName": "icon"
3903
+ },
3904
+ {
3905
+ "name": "target",
3906
+ "type": {
3907
+ "text": "string"
3908
+ },
3909
+ "default": "'_blank'",
3910
+ "description": "Where to open the link. Defaults to a new tab.",
3911
+ "fieldName": "target"
3912
+ },
3913
+ {
3914
+ "name": "download",
3915
+ "type": {
3916
+ "text": "boolean"
3917
+ },
3918
+ "default": "false",
3919
+ "description": "Prompt a download rather than navigating to the link.",
3920
+ "fieldName": "download"
3921
+ }
3922
+ ],
3923
+ "superclass": {
3924
+ "name": "ZincElement",
3925
+ "module": "/src/internal/zinc-element"
3926
+ },
3927
+ "summary": "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.",
3928
+ "tagNameWithoutPrefix": "chat-message-attachment",
3929
+ "tagName": "zn-chat-message-attachment",
3930
+ "customElement": true,
3931
+ "jsDoc": "/**\n * @summary A single file or link attachment for a `zn-chat-message`. Renders an\n * icon and a label as a link, styled to match the message's attachments row. It is\n * intended to be used only inside a `zn-chat-message` and is automatically placed in\n * that component's `attachments` slot.\n * @documentation https://zinc.style/components/chat-message-attachment\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-icon\n *\n * @slot - The attachment label. Falls back to the `name` attribute when empty.\n *\n * @csspart base - The attachment link.\n * @csspart icon - The leading icon.\n * @csspart label - The attachment label.\n */",
3932
+ "documentation": "https://zinc.style/components/chat-message-attachment",
3933
+ "status": "experimental",
3934
+ "since": "1.0",
3935
+ "dependencies": [
3936
+ "zn-icon"
3937
+ ]
3938
+ }
3939
+ ],
3940
+ "exports": [
3941
+ {
3942
+ "kind": "js",
3943
+ "name": "default",
3944
+ "declaration": {
3945
+ "name": "ZnChatMessageAttachment",
3946
+ "module": "components/chat-message-attachment/chat-message-attachment.js"
3947
+ }
3948
+ }
3949
+ ]
3950
+ },
3951
+ {
3952
+ "kind": "javascript-module",
3953
+ "path": "components/checkbox/checkbox.js",
3954
+ "declarations": [
3955
+ {
3956
+ "kind": "class",
3957
+ "description": "",
3958
+ "name": "ZnCheckbox",
3959
+ "cssParts": [
3960
+ {
3961
+ "description": "The component's base wrapper.",
3962
+ "name": "base"
3963
+ },
3964
+ {
3965
+ "description": "The square container that wraps the checkbox's checked state.",
3966
+ "name": "control"
3967
+ },
3968
+ {
3969
+ "description": "Matches the control part when the checkbox is checked.",
3970
+ "name": "control--checked"
3971
+ },
3972
+ {
3973
+ "description": "Matches the control part when the checkbox is indeterminate.",
3974
+ "name": "control--indeterminate"
3975
+ },
3976
+ {
3977
+ "description": "The checked icon, an `<zn-icon>` element.",
3978
+ "name": "checked-icon"
3979
+ },
3980
+ {
3981
+ "description": "The unchecked icon, an `<zn-icon>` element.",
3982
+ "name": "unchecked-icon"
3983
+ },
3984
+ {
3985
+ "description": "The indeterminate icon, an `<zn-icon>` element.",
3986
+ "name": "indeterminate-icon"
3987
+ },
3988
+ {
3989
+ "description": "The container that wraps the checkbox's label.",
3990
+ "name": "label"
3991
+ },
3992
+ {
3993
+ "description": "The container that wraps the checkbox's description.",
3994
+ "name": "description"
3995
+ },
3996
+ {
3997
+ "description": "The container that wraps optional content that appears when a checkbox is checked.",
3998
+ "name": "selected-content"
3999
+ }
4000
+ ],
4001
+ "slots": [
4002
+ {
4003
+ "description": "The checkbox's label.",
4004
+ "name": ""
4005
+ },
4006
+ {
4007
+ "description": "A description of the checkbox's label. Serves as help text for a checkbox item. Alternatively, you can use the `description` attribute.",
4008
+ "name": "description"
4009
+ },
4010
+ {
4011
+ "description": "Use to nest rich content (like an input) inside a selected checkbox item. Use only with the contained style.",
4012
+ "name": "selected-content"
4013
+ }
4014
+ ],
4015
+ "members": [
4016
+ {
4017
+ "kind": "field",
4018
+ "name": "dependencies",
4019
+ "type": {
4020
+ "text": "object"
4021
+ },
4022
+ "static": true,
4023
+ "default": "{'zn-icon': ZnIcon}"
4024
+ },
4025
+ {
4026
+ "kind": "field",
4027
+ "name": "formControlController",
4028
+ "privacy": "private",
4029
+ "readonly": true,
4030
+ "default": "new FormControlController(this, { value: (control: ZnCheckbox) => (control.checked ? control.value || 'on' : control.uncheckedValue || undefined), defaultValue: (control: ZnCheckbox) => control.defaultChecked, setValue: (control: ZnCheckbox, checked: boolean) => (control.checked = checked) })"
4031
+ },
4032
+ {
4033
+ "kind": "field",
4034
+ "name": "hasSlotController",
4035
+ "privacy": "private",
4036
+ "readonly": true,
4037
+ "default": "new HasSlotController(this, 'description')"
4038
+ },
4039
+ {
4040
+ "kind": "field",
4041
+ "name": "input",
4042
+ "type": {
4043
+ "text": "HTMLInputElement"
4044
+ }
4045
+ },
4046
+ {
4047
+ "kind": "field",
4048
+ "name": "hasFocus",
4049
+ "type": {
4050
+ "text": "boolean"
4051
+ },
4052
+ "privacy": "private",
4053
+ "default": "false"
4054
+ },
4055
+ {
4056
+ "kind": "field",
4057
+ "name": "title",
3347
4058
  "type": {
3348
4059
  "text": "string"
3349
4060
  },
@@ -7108,6 +7819,20 @@
7108
7819
  "kind": "method",
7109
7820
  "name": "getRowsSelected"
7110
7821
  },
7822
+ {
7823
+ "kind": "method",
7824
+ "name": "getRowsPerPage"
7825
+ },
7826
+ {
7827
+ "kind": "method",
7828
+ "name": "getPageRange",
7829
+ "privacy": "private",
7830
+ "return": {
7831
+ "type": {
7832
+ "text": "(number | 'ellipsis')[]"
7833
+ }
7834
+ }
7835
+ },
7111
7836
  {
7112
7837
  "kind": "method",
7113
7838
  "name": "getPagination"
@@ -20396,6 +21121,11 @@
20396
21121
  "name": "handleAltUp",
20397
21122
  "privacy": "private"
20398
21123
  },
21124
+ {
21125
+ "kind": "field",
21126
+ "name": "handleBreadcrumbSlotChange",
21127
+ "privacy": "private"
21128
+ },
20399
21129
  {
20400
21130
  "kind": "field",
20401
21131
  "name": "_registerTabs",
@@ -23357,1183 +24087,1183 @@
23357
24087
  },
23358
24088
  {
23359
24089
  "kind": "javascript-module",
23360
- "path": "components/priority-list/priority-list.js",
24090
+ "path": "components/popup/popup.js",
23361
24091
  "declarations": [
23362
24092
  {
23363
24093
  "kind": "class",
23364
24094
  "description": "",
23365
- "name": "ZnPriorityList",
24095
+ "name": "ZnPopup",
23366
24096
  "cssProperties": [
23367
24097
  {
23368
- "description": "The gap between list items. Defaults to `var(--zn-spacing-2x-small)`.",
23369
- "name": "--zn-priority-list-item-gap"
23370
- },
23371
- {
23372
- "description": "The padding inside each item. Defaults to `var(--zn-spacing-small) var(--zn-spacing-medium)`.",
23373
- "name": "--zn-priority-list-item-padding"
23374
- },
23375
- {
23376
- "description": "The color of the drag handle. Defaults to `var(--zn-color-neutral-500)`.",
23377
- "name": "--zn-priority-list-handle-color"
23378
- },
23379
- {
23380
- "description": "The color of the priority number. Defaults to `var(--zn-color-neutral-600)`.",
23381
- "name": "--zn-priority-list-priority-color"
24098
+ "description": "An example CSS custom property.",
24099
+ "name": "--example"
23382
24100
  }
23383
24101
  ],
23384
24102
  "cssParts": [
23385
24103
  {
23386
- "description": "The form control wrapper.",
23387
- "name": "form-control"
23388
- },
23389
- {
23390
- "description": "The label wrapper.",
23391
- "name": "form-control-label"
23392
- },
23393
- {
23394
- "description": "The input area wrapper.",
23395
- "name": "form-control-input"
23396
- },
23397
- {
23398
- "description": "The help text wrapper.",
23399
- "name": "form-control-help-text"
23400
- },
23401
- {
23402
- "description": "The list container.",
23403
- "name": "list"
23404
- },
23405
- {
23406
- "description": "An individual list item row.",
23407
- "name": "item"
23408
- },
23409
- {
23410
- "description": "The drag handle icon.",
23411
- "name": "drag-handle"
23412
- },
23413
- {
23414
- "description": "The priority number badge.",
23415
- "name": "priority"
23416
- },
23417
- {
23418
- "description": "The content area of an item.",
23419
- "name": "content"
24104
+ "description": "The component's base wrapper.",
24105
+ "name": "base"
23420
24106
  }
23421
24107
  ],
23422
24108
  "slots": [
23423
24109
  {
23424
- "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).",
24110
+ "description": "The default slot.",
23425
24111
  "name": ""
23426
24112
  },
23427
24113
  {
23428
- "description": "The component's label. Required for proper accessibility. Alternatively, use the `label` attribute.",
23429
- "name": "label"
23430
- },
23431
- {
23432
- "description": "Used to add text displayed in a tooltip next to the label.",
23433
- "name": "label-tooltip"
23434
- },
23435
- {
23436
- "description": "Text that describes how to use the component. Alternatively, use the `help-text` attribute.",
23437
- "name": "help-text"
24114
+ "description": "An example slot.",
24115
+ "name": "example"
23438
24116
  }
23439
24117
  ],
23440
24118
  "members": [
23441
24119
  {
23442
24120
  "kind": "field",
23443
- "name": "dependencies",
24121
+ "name": "anchorEl",
23444
24122
  "type": {
23445
- "text": "object"
24123
+ "text": "Element | VirtualElement | null"
23446
24124
  },
23447
- "static": true,
23448
- "default": "{ 'zn-icon': ZnIcon, }"
24125
+ "privacy": "private"
23449
24126
  },
23450
24127
  {
23451
24128
  "kind": "field",
23452
- "name": "formControlController",
23453
- "privacy": "protected",
23454
- "readonly": true,
23455
- "default": "new FormControlController(this, { value: (control: ZnPriorityList) => { return JSON.stringify(control.getPriorityMap()); }, defaultValue: (control: ZnPriorityList) => control.defaultValue, setValue: (control: ZnPriorityList, value: string) => { if (value) { try { const parsed: unknown = JSON.parse(value); if (Array.isArray(parsed) && parsed.every((item: unknown): item is string => typeof item === 'string')) { control.value = parsed as string[]; } } catch { // ignore parse errors } } }, })"
24129
+ "name": "cleanup",
24130
+ "type": {
24131
+ "text": "ReturnType<typeof autoUpdate> | undefined"
24132
+ },
24133
+ "privacy": "private"
23456
24134
  },
23457
24135
  {
23458
24136
  "kind": "field",
23459
- "name": "hasSlotController",
23460
- "privacy": "private",
23461
- "readonly": true,
23462
- "default": "new HasSlotController(this, 'help-text', 'label')"
24137
+ "name": "popup",
24138
+ "type": {
24139
+ "text": "HTMLElement"
24140
+ },
24141
+ "description": "A reference to the internal popup container. Useful for animating and styling the popup with JavaScript."
23463
24142
  },
23464
24143
  {
23465
24144
  "kind": "field",
23466
- "name": "hiddenInputsContainer",
24145
+ "name": "arrowEl",
23467
24146
  "type": {
23468
- "text": "HTMLDivElement"
23469
- }
24147
+ "text": "HTMLElement"
24148
+ },
24149
+ "privacy": "private"
23470
24150
  },
23471
24151
  {
23472
24152
  "kind": "field",
23473
- "name": "name",
24153
+ "name": "anchor",
23474
24154
  "type": {
23475
- "text": "string"
24155
+ "text": "Element | string | VirtualElement"
23476
24156
  },
23477
- "default": "''",
23478
- "description": "The name prefix for form submission. Each item generates a hidden input named `{name}[{itemValue}]`\nwith the priority number as its value.",
23479
- "attribute": "name"
24157
+ "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.",
24158
+ "attribute": "anchor"
23480
24159
  },
23481
24160
  {
23482
24161
  "kind": "field",
23483
- "name": "value",
24162
+ "name": "active",
23484
24163
  "type": {
23485
- "text": "string[]"
24164
+ "text": "boolean"
23486
24165
  },
23487
- "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.",
23488
- "attribute": "value"
24166
+ "default": "false",
24167
+ "description": "Activates the positioning logic and shows the popup. When this attribute is removed, the positioning logic is torn\ndown and the popup will be hidden.",
24168
+ "attribute": "active",
24169
+ "reflects": true
23489
24170
  },
23490
24171
  {
23491
24172
  "kind": "field",
23492
- "name": "_value",
24173
+ "name": "placement",
23493
24174
  "type": {
23494
- "text": "string[]"
24175
+ "text": "| 'top'\n | 'top-start'\n | 'top-end'\n | 'bottom'\n | 'bottom-start'\n | 'bottom-end'\n | 'right'\n | 'right-start'\n | 'right-end'\n | 'left'\n | 'left-start'\n | 'left-end'"
23495
24176
  },
23496
- "privacy": "private",
23497
- "default": "[]"
24177
+ "default": "'top'",
24178
+ "description": "The preferred placement of the popup. Note that the actual placement will vary as configured to keep the\npanel inside of the viewport.",
24179
+ "attribute": "placement",
24180
+ "reflects": true
23498
24181
  },
23499
24182
  {
23500
24183
  "kind": "field",
23501
- "name": "defaultValue",
24184
+ "name": "strategy",
23502
24185
  "type": {
23503
- "text": "string[]"
24186
+ "text": "'absolute' | 'fixed'"
23504
24187
  },
23505
- "default": "[]"
24188
+ "default": "'fixed'",
24189
+ "description": "Determines how the popup is positioned. The `absolute` strategy works well in most cases, but if overflow is\nclipped, using a `fixed` position strategy can often workaround it.",
24190
+ "attribute": "strategy",
24191
+ "reflects": true
23506
24192
  },
23507
24193
  {
23508
24194
  "kind": "field",
23509
- "name": "label",
24195
+ "name": "distance",
23510
24196
  "type": {
23511
- "text": "string"
24197
+ "text": "number"
23512
24198
  },
23513
- "default": "''",
23514
- "description": "The component's label. Required for proper accessibility.",
23515
- "attribute": "label"
24199
+ "default": "0",
24200
+ "description": "The distance in pixels from which to offset the panel away from its anchor.",
24201
+ "attribute": "distance"
23516
24202
  },
23517
24203
  {
23518
24204
  "kind": "field",
23519
- "name": "labelTooltip",
24205
+ "name": "skidding",
23520
24206
  "type": {
23521
- "text": "string"
24207
+ "text": "number"
23522
24208
  },
23523
- "default": "''",
23524
- "description": "Text that appears in a tooltip next to the label.",
23525
- "attribute": "label-tooltip"
24209
+ "default": "0",
24210
+ "description": "The distance in pixels from which to offset the panel along its anchor.",
24211
+ "attribute": "skidding"
23526
24212
  },
23527
24213
  {
23528
24214
  "kind": "field",
23529
- "name": "helpText",
24215
+ "name": "arrow",
23530
24216
  "type": {
23531
- "text": "string"
24217
+ "text": "boolean"
23532
24218
  },
23533
- "default": "''",
23534
- "description": "Help text that describes how to use the component.",
23535
- "attribute": "help-text"
24219
+ "default": "false",
24220
+ "description": "Attaches an arrow to the popup. The arrow's size and color can be customized using the `--arrow-size` and\n`--arrow-color` custom properties. For additional customizations, you can also target the arrow using\n`::part(arrow)` in your stylesheet.",
24221
+ "attribute": "arrow"
23536
24222
  },
23537
24223
  {
23538
24224
  "kind": "field",
23539
- "name": "form",
24225
+ "name": "arrowPlacement",
23540
24226
  "type": {
23541
- "text": "string"
24227
+ "text": "'start' | 'end' | 'center' | 'anchor'"
23542
24228
  },
23543
- "default": "''",
23544
- "description": "Associates the control with a form by id. The form must be in the same document or shadow root.",
23545
- "attribute": "form",
23546
- "reflects": true
24229
+ "default": "'anchor'",
24230
+ "description": "The placement of the arrow. The default is `anchor`, which will align the arrow as close to the center of the\nanchor as possible, considering available space and `arrow-padding`. A value of `start`, `end`, or `center` will\nalign the arrow to the start, end, or center of the popover instead.",
24231
+ "attribute": "arrow-placement"
23547
24232
  },
23548
24233
  {
23549
24234
  "kind": "field",
23550
- "name": "size",
24235
+ "name": "arrowPadding",
23551
24236
  "type": {
23552
- "text": "'small' | 'medium' | 'large'"
24237
+ "text": "number"
23553
24238
  },
23554
- "default": "'medium'",
23555
- "description": "The size of the list items.",
23556
- "attribute": "size",
23557
- "reflects": true
24239
+ "default": "10",
24240
+ "description": "The amount of padding between the arrow and the edges of the popup. If the popup has a border-radius, for example,\nthis will prevent it from overflowing the corners.",
24241
+ "attribute": "arrow-padding"
23558
24242
  },
23559
24243
  {
23560
24244
  "kind": "field",
23561
- "name": "disabled",
24245
+ "name": "flip",
23562
24246
  "type": {
23563
24247
  "text": "boolean"
23564
24248
  },
23565
24249
  "default": "false",
23566
- "description": "Whether the priority list is disabled.",
23567
- "attribute": "disabled",
23568
- "reflects": true
24250
+ "description": "When set, placement of the popup will flip to the opposite site to keep it in view. You can use\n`flipFallbackPlacements` to further configure how the fallback placement is determined.",
24251
+ "attribute": "flip"
23569
24252
  },
23570
24253
  {
23571
24254
  "kind": "field",
23572
- "name": "required",
24255
+ "name": "flipFallbackPlacements",
23573
24256
  "type": {
23574
- "text": "boolean"
24257
+ "text": "string"
23575
24258
  },
23576
- "default": "false",
23577
- "description": "Ensures the form control has a value before allowing submission.",
23578
- "attribute": "required",
23579
- "reflects": true
24259
+ "default": "''",
24260
+ "description": "If the preferred placement doesn't fit, popup will be tested in these fallback placements until one fits. Must be a\nstring of any number of placements separated by a space, e.g. \"top bottom left\". If no placement fits, the flip\nfallback strategy will be used instead.",
24261
+ "attribute": "flip-fallback-placements"
23580
24262
  },
23581
24263
  {
23582
24264
  "kind": "field",
23583
- "name": "priorityStart",
24265
+ "name": "flipFallbackStrategy",
23584
24266
  "type": {
23585
- "text": "number"
24267
+ "text": "'best-fit' | 'initial'"
23586
24268
  },
23587
- "default": "1",
23588
- "description": "The starting priority number. Defaults to 1.",
23589
- "attribute": "priority-start"
24269
+ "default": "'best-fit'",
24270
+ "description": "When neither the preferred placement nor the fallback placements fit, this value will be used to determine whether\nthe popup should be positioned using the best available fit based on available space or as it was initially\npreferred.",
24271
+ "attribute": "flip-fallback-strategy"
23590
24272
  },
23591
24273
  {
23592
24274
  "kind": "field",
23593
- "name": "formAction",
24275
+ "name": "flipBoundary",
23594
24276
  "type": {
23595
- "text": "string"
24277
+ "text": "Element | Element[]"
23596
24278
  },
23597
- "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.",
23598
- "attribute": "formaction"
24279
+ "description": "The flip boundary describes clipping element(s) that overflow will be checked relative to when flipping. By\ndefault, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\nchange the boundary by passing a reference to one or more elements to this property.",
24280
+ "attribute": "flipBoundary"
23599
24281
  },
23600
24282
  {
23601
24283
  "kind": "field",
23602
- "name": "order",
24284
+ "name": "flipPadding",
23603
24285
  "type": {
23604
- "text": "string"
24286
+ "text": "number"
23605
24287
  },
23606
- "default": "''",
23607
- "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.",
23608
- "attribute": "order"
24288
+ "default": "0",
24289
+ "description": "The amount of padding, in pixels, to exceed before the flip behavior will occur.",
24290
+ "attribute": "flip-padding"
23609
24291
  },
23610
24292
  {
23611
24293
  "kind": "field",
23612
- "name": "draggedKey",
24294
+ "name": "shift",
23613
24295
  "type": {
23614
- "text": "string | null"
24296
+ "text": "boolean"
23615
24297
  },
23616
- "privacy": "private",
23617
- "default": "null"
24298
+ "default": "false",
24299
+ "description": "Moves the popup along the axis to keep it in view when clipped.",
24300
+ "attribute": "shift"
23618
24301
  },
23619
24302
  {
23620
24303
  "kind": "field",
23621
- "name": "isDragging",
24304
+ "name": "shiftBoundary",
23622
24305
  "type": {
23623
- "text": "boolean"
24306
+ "text": "Element | Element[]"
23624
24307
  },
23625
- "privacy": "private",
23626
- "default": "false"
24308
+ "description": "The shift boundary describes clipping element(s) that overflow will be checked relative to when shifting. By\ndefault, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\nchange the boundary by passing a reference to one or more elements to this property.",
24309
+ "attribute": "shiftBoundary"
23627
24310
  },
23628
24311
  {
23629
24312
  "kind": "field",
23630
- "name": "dragOverKey",
24313
+ "name": "shiftPadding",
23631
24314
  "type": {
23632
- "text": "string | null"
24315
+ "text": "number"
23633
24316
  },
23634
- "privacy": "private",
23635
- "default": "null"
24317
+ "default": "0",
24318
+ "description": "The amount of padding, in pixels, to exceed before the shift behavior will occur.",
24319
+ "attribute": "shift-padding"
23636
24320
  },
23637
24321
  {
23638
24322
  "kind": "field",
23639
- "name": "validity",
24323
+ "name": "autoSize",
23640
24324
  "type": {
23641
- "text": "ValidityState"
24325
+ "text": "'horizontal' | 'vertical' | 'both'"
23642
24326
  },
23643
- "description": "Gets the validity state object.",
23644
- "readonly": true
24327
+ "description": "When set, this will cause the popup to automatically resize itself to prevent it from overflowing.",
24328
+ "attribute": "auto-size"
23645
24329
  },
23646
24330
  {
23647
24331
  "kind": "field",
23648
- "name": "validationMessage",
24332
+ "name": "sync",
23649
24333
  "type": {
23650
- "text": "string"
24334
+ "text": "'width' | 'height' | 'both'"
23651
24335
  },
23652
- "description": "Gets the validation message.",
23653
- "readonly": true
24336
+ "description": "Syncs the popup's width or height to that of the anchor element.",
24337
+ "attribute": "sync"
23654
24338
  },
23655
24339
  {
23656
- "kind": "method",
23657
- "name": "_initializeOrderFromSlot",
23658
- "privacy": "private",
23659
- "description": "Initialize item order from slotted children if no explicit value was provided.\nIf an `order` attribute is set, use it to define the initial order,\nappending any slotted items not listed in the order at the end."
24340
+ "kind": "field",
24341
+ "name": "autoSizeBoundary",
24342
+ "type": {
24343
+ "text": "Element | Element[]"
24344
+ },
24345
+ "description": "The auto-size boundary describes clipping element(s) that overflow will be checked relative to when resizing. By\ndefault, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\nchange the boundary by passing a reference to one or more elements to this property.",
24346
+ "attribute": "autoSizeBoundary"
23660
24347
  },
23661
24348
  {
23662
- "kind": "method",
23663
- "name": "_getSlottedItems",
23664
- "privacy": "private",
23665
- "return": {
23666
- "type": {
23667
- "text": "HTMLElement[]"
23668
- }
24349
+ "kind": "field",
24350
+ "name": "autoSizePadding",
24351
+ "type": {
24352
+ "text": "number"
23669
24353
  },
23670
- "description": "Gets all direct children with a `value` attribute (excluding those in reserved slots)."
24354
+ "default": "0",
24355
+ "description": "The amount of padding, in pixels, to exceed before the auto-size behavior will occur.",
24356
+ "attribute": "auto-size-padding"
23671
24357
  },
23672
24358
  {
23673
- "kind": "method",
23674
- "name": "_assignSlotNames",
23675
- "privacy": "private",
23676
- "description": "Assigns `slot` attributes to light DOM children based on their `value` attribute,\nso they project into the correct named slot in the shadow DOM."
23677
- },
23678
- {
23679
- "kind": "method",
23680
- "name": "getPriorityMap",
23681
- "return": {
23682
- "type": {
23683
- "text": "PriorityItem[]"
23684
- }
24359
+ "kind": "field",
24360
+ "name": "hoverBridge",
24361
+ "type": {
24362
+ "text": "boolean"
23685
24363
  },
23686
- "description": "Returns the priority map: an array of { key, priority } objects."
23687
- },
23688
- {
23689
- "kind": "method",
23690
- "name": "_syncHiddenInputs",
23691
- "privacy": "private",
23692
- "description": "Syncs hidden inputs so form data includes priority values."
23693
- },
23694
- {
23695
- "kind": "method",
23696
- "name": "_moveItem",
23697
- "privacy": "private",
23698
- "parameters": [
23699
- {
23700
- "name": "fromIndex",
23701
- "type": {
23702
- "text": "number"
23703
- }
23704
- },
23705
- {
23706
- "name": "toIndex",
23707
- "type": {
23708
- "text": "number"
23709
- }
23710
- }
23711
- ],
23712
- "description": "Moves an item from one index to another."
23713
- },
23714
- {
23715
- "kind": "method",
23716
- "name": "_submitForm",
23717
- "privacy": "private",
23718
- "description": "Submits the associated form if a `formaction` attribute is set."
23719
- },
23720
- {
23721
- "kind": "method",
23722
- "name": "_handleDragStart",
23723
- "privacy": "private",
23724
- "parameters": [
23725
- {
23726
- "name": "event",
23727
- "type": {
23728
- "text": "DragEvent"
23729
- }
23730
- },
23731
- {
23732
- "name": "key",
23733
- "type": {
23734
- "text": "string"
23735
- }
23736
- }
23737
- ]
24364
+ "default": "false",
24365
+ "description": "When a gap exists between the anchor and the popup element, this option will add a \"hover bridge\" that fills the\ngap using an invisible element. This makes listening for events such as `mouseenter` and `mouseleave` more sane\nbecause the pointer never technically leaves the element. The hover bridge will only be drawn when the popover is\nactive.",
24366
+ "attribute": "hover-bridge"
23738
24367
  },
23739
24368
  {
23740
24369
  "kind": "method",
23741
- "name": "_handleDragEnd",
24370
+ "name": "handleAnchorChange",
23742
24371
  "privacy": "private"
23743
24372
  },
23744
24373
  {
23745
- "kind": "method",
23746
- "name": "_handleDragOver",
23747
- "privacy": "private",
23748
- "parameters": [
23749
- {
23750
- "name": "event",
23751
- "type": {
23752
- "text": "DragEvent"
23753
- }
23754
- },
23755
- {
23756
- "name": "key",
23757
- "type": {
23758
- "text": "string"
23759
- }
23760
- }
23761
- ]
23762
- },
23763
- {
23764
- "kind": "method",
23765
- "name": "_handleDragLeave",
23766
- "privacy": "private",
23767
- "parameters": [
23768
- {
23769
- "name": "event",
23770
- "type": {
23771
- "text": "DragEvent"
23772
- }
23773
- },
23774
- {
23775
- "name": "key",
23776
- "type": {
23777
- "text": "string"
23778
- }
23779
- }
23780
- ]
23781
- },
23782
- {
23783
- "kind": "method",
23784
- "name": "_handleDrop",
23785
- "privacy": "private",
23786
- "parameters": [
23787
- {
23788
- "name": "event",
23789
- "type": {
23790
- "text": "DragEvent"
23791
- }
23792
- }
23793
- ]
23794
- },
23795
- {
23796
- "kind": "method",
23797
- "name": "_handleKeyDown",
23798
- "privacy": "private",
23799
- "parameters": [
23800
- {
23801
- "name": "event",
23802
- "type": {
23803
- "text": "KeyboardEvent"
23804
- }
23805
- },
23806
- {
23807
- "name": "key",
23808
- "type": {
23809
- "text": "string"
23810
- }
23811
- }
23812
- ]
24374
+ "kind": "field",
24375
+ "name": "handleAnchorHover",
24376
+ "privacy": "public"
23813
24377
  },
23814
24378
  {
23815
24379
  "kind": "method",
23816
- "name": "_handleSlotChange",
24380
+ "name": "start",
23817
24381
  "privacy": "private"
23818
24382
  },
23819
24383
  {
23820
24384
  "kind": "method",
23821
- "name": "checkValidity",
23822
- "return": {
23823
- "type": {
23824
- "text": "boolean"
23825
- }
23826
- },
23827
- "description": "Checks for validity but does not show a validation message."
23828
- },
23829
- {
23830
- "kind": "method",
23831
- "name": "getForm",
24385
+ "name": "stop",
24386
+ "privacy": "private",
23832
24387
  "return": {
23833
24388
  "type": {
23834
- "text": "HTMLFormElement | null"
24389
+ "text": "Promise<void>"
23835
24390
  }
23836
- },
23837
- "description": "Gets the associated form, if one exists."
24391
+ }
23838
24392
  },
23839
24393
  {
23840
24394
  "kind": "method",
23841
- "name": "reportValidity",
23842
- "return": {
23843
- "type": {
23844
- "text": "boolean"
23845
- }
23846
- },
23847
- "description": "Checks for validity and shows the browser's validation message if the control is invalid."
24395
+ "name": "reposition",
24396
+ "description": "Forces the popup to recalculate and reposition itself."
23848
24397
  },
23849
24398
  {
23850
- "kind": "method",
23851
- "name": "setCustomValidity",
23852
- "parameters": [
23853
- {
23854
- "name": "_message",
23855
- "default": "''"
23856
- }
23857
- ],
23858
- "description": "Sets a custom validation message. Pass an empty string to restore validity."
24399
+ "kind": "field",
24400
+ "name": "updateHoverBridge",
24401
+ "privacy": "private"
23859
24402
  }
23860
24403
  ],
23861
24404
  "events": [
23862
24405
  {
23863
- "description": "Emitted when the order of items changes.",
23864
- "name": "zn-change"
23865
- },
23866
- {
23867
- "description": "Emitted when items are reordered. Call `getPriorityMap()` on the component to get the updated `{ key: string, priority: number }[]` array.",
23868
- "name": "zn-reorder"
24406
+ "description": "Emitted as an example.",
24407
+ "name": "zn-event-name"
23869
24408
  }
23870
24409
  ],
23871
24410
  "attributes": [
23872
24411
  {
23873
- "name": "name",
23874
- "type": {
23875
- "text": "string"
23876
- },
23877
- "default": "''",
23878
- "description": "The name prefix for form submission. Each item generates a hidden input named `{name}[{itemValue}]`\nwith the priority number as its value.",
23879
- "fieldName": "name"
23880
- },
23881
- {
23882
- "name": "value",
23883
- "type": {
23884
- "text": "string[]"
23885
- },
23886
- "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.",
23887
- "fieldName": "value"
23888
- },
23889
- {
23890
- "name": "label",
23891
- "type": {
23892
- "text": "string"
23893
- },
23894
- "default": "''",
23895
- "description": "The component's label. Required for proper accessibility.",
23896
- "fieldName": "label"
23897
- },
23898
- {
23899
- "name": "label-tooltip",
23900
- "type": {
23901
- "text": "string"
23902
- },
23903
- "default": "''",
23904
- "description": "Text that appears in a tooltip next to the label.",
23905
- "fieldName": "labelTooltip"
23906
- },
23907
- {
23908
- "name": "help-text",
23909
- "type": {
23910
- "text": "string"
23911
- },
23912
- "default": "''",
23913
- "description": "Help text that describes how to use the component.",
23914
- "fieldName": "helpText"
23915
- },
23916
- {
23917
- "name": "form",
23918
- "type": {
23919
- "text": "string"
23920
- },
23921
- "default": "''",
23922
- "description": "Associates the control with a form by id. The form must be in the same document or shadow root.",
23923
- "fieldName": "form"
23924
- },
23925
- {
23926
- "name": "size",
23927
- "type": {
23928
- "text": "'small' | 'medium' | 'large'"
23929
- },
23930
- "default": "'medium'",
23931
- "description": "The size of the list items.",
23932
- "fieldName": "size"
23933
- },
23934
- {
23935
- "name": "disabled",
23936
- "type": {
23937
- "text": "boolean"
23938
- },
23939
- "default": "false",
23940
- "description": "Whether the priority list is disabled.",
23941
- "fieldName": "disabled"
23942
- },
23943
- {
23944
- "name": "required",
23945
- "type": {
23946
- "text": "boolean"
23947
- },
23948
- "default": "false",
23949
- "description": "Ensures the form control has a value before allowing submission.",
23950
- "fieldName": "required"
23951
- },
23952
- {
23953
- "name": "priority-start",
23954
- "type": {
23955
- "text": "number"
23956
- },
23957
- "default": "1",
23958
- "description": "The starting priority number. Defaults to 1.",
23959
- "fieldName": "priorityStart"
23960
- },
23961
- {
23962
- "name": "formaction",
23963
- "type": {
23964
- "text": "string"
23965
- },
23966
- "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.",
23967
- "fieldName": "formAction"
23968
- },
23969
- {
23970
- "name": "order",
23971
- "type": {
23972
- "text": "string"
23973
- },
23974
- "default": "''",
23975
- "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.",
23976
- "fieldName": "order"
23977
- }
23978
- ],
23979
- "superclass": {
23980
- "name": "ZincElement",
23981
- "module": "/src/internal/zinc-element"
23982
- },
23983
- "summary": "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.",
23984
- "tagNameWithoutPrefix": "priority-list",
23985
- "tagName": "zn-priority-list",
23986
- "customElement": true,
23987
- "jsDoc": "/**\n * @summary A reorderable list where each item receives a numerical priority based on its position. Supports drag-and-drop\n * and keyboard reordering. Priority values are submitted as form data via hidden inputs.\n *\n * @documentation https://zinc.style/components/priority-list\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-icon\n *\n * @slot - The default slot where list items are placed. Each slotted element must have a `value` attribute that\n * uniquely identifies the item. The component automatically assigns slot names to project each item into the\n * correct position. The item's position in the list determines its priority (top = `priority-start`, incrementing).\n * @slot label - The component's label. Required for proper accessibility. Alternatively, use the `label` attribute.\n * @slot label-tooltip - Used to add text displayed in a tooltip next to the label.\n * @slot help-text - Text that describes how to use the component. Alternatively, use the `help-text` attribute.\n *\n * @event zn-change - Emitted when the order of items changes.\n * @event zn-reorder - Emitted when items are reordered. Call `getPriorityMap()` on the component to get\n * the updated `{ key: string, priority: number }[]` array.\n *\n * @csspart form-control - The form control wrapper.\n * @csspart form-control-label - The label wrapper.\n * @csspart form-control-input - The input area wrapper.\n * @csspart form-control-help-text - The help text wrapper.\n * @csspart list - The list container.\n * @csspart item - An individual list item row.\n * @csspart drag-handle - The drag handle icon.\n * @csspart priority - The priority number badge.\n * @csspart content - The content area of an item.\n *\n * @cssproperty --zn-priority-list-item-gap - The gap between list items. Defaults to `var(--zn-spacing-2x-small)`.\n * @cssproperty --zn-priority-list-item-padding - The padding inside each item. Defaults to `var(--zn-spacing-small) var(--zn-spacing-medium)`.\n * @cssproperty --zn-priority-list-handle-color - The color of the drag handle. Defaults to `var(--zn-color-neutral-500)`.\n * @cssproperty --zn-priority-list-priority-color - The color of the priority number. Defaults to `var(--zn-color-neutral-600)`.\n */",
23988
- "documentation": "https://zinc.style/components/priority-list",
23989
- "status": "experimental",
23990
- "since": "1.0",
23991
- "dependencies": [
23992
- "zn-icon"
23993
- ]
23994
- }
23995
- ],
23996
- "exports": [
23997
- {
23998
- "kind": "js",
23999
- "name": "default",
24000
- "declaration": {
24001
- "name": "ZnPriorityList",
24002
- "module": "components/priority-list/priority-list.js"
24003
- }
24004
- }
24005
- ]
24006
- },
24007
- {
24008
- "kind": "javascript-module",
24009
- "path": "components/popup/popup.js",
24010
- "declarations": [
24011
- {
24012
- "kind": "class",
24013
- "description": "",
24014
- "name": "ZnPopup",
24015
- "cssProperties": [
24016
- {
24017
- "description": "An example CSS custom property.",
24018
- "name": "--example"
24019
- }
24020
- ],
24021
- "cssParts": [
24022
- {
24023
- "description": "The component's base wrapper.",
24024
- "name": "base"
24025
- }
24026
- ],
24027
- "slots": [
24028
- {
24029
- "description": "The default slot.",
24030
- "name": ""
24031
- },
24032
- {
24033
- "description": "An example slot.",
24034
- "name": "example"
24035
- }
24036
- ],
24037
- "members": [
24038
- {
24039
- "kind": "field",
24040
- "name": "anchorEl",
24041
- "type": {
24042
- "text": "Element | VirtualElement | null"
24043
- },
24044
- "privacy": "private"
24045
- },
24046
- {
24047
- "kind": "field",
24048
- "name": "cleanup",
24049
- "type": {
24050
- "text": "ReturnType<typeof autoUpdate> | undefined"
24051
- },
24052
- "privacy": "private"
24053
- },
24054
- {
24055
- "kind": "field",
24056
- "name": "popup",
24057
- "type": {
24058
- "text": "HTMLElement"
24059
- },
24060
- "description": "A reference to the internal popup container. Useful for animating and styling the popup with JavaScript."
24061
- },
24062
- {
24063
- "kind": "field",
24064
- "name": "arrowEl",
24065
- "type": {
24066
- "text": "HTMLElement"
24067
- },
24068
- "privacy": "private"
24069
- },
24070
- {
24071
- "kind": "field",
24072
24412
  "name": "anchor",
24073
24413
  "type": {
24074
24414
  "text": "Element | string | VirtualElement"
24075
24415
  },
24076
24416
  "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.",
24077
- "attribute": "anchor"
24417
+ "fieldName": "anchor"
24078
24418
  },
24079
24419
  {
24080
- "kind": "field",
24081
24420
  "name": "active",
24082
24421
  "type": {
24083
24422
  "text": "boolean"
24084
24423
  },
24085
24424
  "default": "false",
24086
24425
  "description": "Activates the positioning logic and shows the popup. When this attribute is removed, the positioning logic is torn\ndown and the popup will be hidden.",
24087
- "attribute": "active",
24088
- "reflects": true
24426
+ "fieldName": "active"
24089
24427
  },
24090
24428
  {
24091
- "kind": "field",
24092
24429
  "name": "placement",
24093
24430
  "type": {
24094
24431
  "text": "| 'top'\n | 'top-start'\n | 'top-end'\n | 'bottom'\n | 'bottom-start'\n | 'bottom-end'\n | 'right'\n | 'right-start'\n | 'right-end'\n | 'left'\n | 'left-start'\n | 'left-end'"
24095
24432
  },
24096
24433
  "default": "'top'",
24097
24434
  "description": "The preferred placement of the popup. Note that the actual placement will vary as configured to keep the\npanel inside of the viewport.",
24098
- "attribute": "placement",
24099
- "reflects": true
24435
+ "fieldName": "placement"
24100
24436
  },
24101
24437
  {
24102
- "kind": "field",
24103
24438
  "name": "strategy",
24104
24439
  "type": {
24105
24440
  "text": "'absolute' | 'fixed'"
24106
24441
  },
24107
24442
  "default": "'fixed'",
24108
24443
  "description": "Determines how the popup is positioned. The `absolute` strategy works well in most cases, but if overflow is\nclipped, using a `fixed` position strategy can often workaround it.",
24109
- "attribute": "strategy",
24110
- "reflects": true
24444
+ "fieldName": "strategy"
24111
24445
  },
24112
24446
  {
24113
- "kind": "field",
24114
24447
  "name": "distance",
24115
24448
  "type": {
24116
24449
  "text": "number"
24117
24450
  },
24118
24451
  "default": "0",
24119
24452
  "description": "The distance in pixels from which to offset the panel away from its anchor.",
24120
- "attribute": "distance"
24453
+ "fieldName": "distance"
24121
24454
  },
24122
24455
  {
24123
- "kind": "field",
24124
24456
  "name": "skidding",
24125
24457
  "type": {
24126
24458
  "text": "number"
24127
24459
  },
24128
24460
  "default": "0",
24129
24461
  "description": "The distance in pixels from which to offset the panel along its anchor.",
24130
- "attribute": "skidding"
24462
+ "fieldName": "skidding"
24131
24463
  },
24132
24464
  {
24133
- "kind": "field",
24134
24465
  "name": "arrow",
24135
24466
  "type": {
24136
24467
  "text": "boolean"
24137
24468
  },
24138
24469
  "default": "false",
24139
24470
  "description": "Attaches an arrow to the popup. The arrow's size and color can be customized using the `--arrow-size` and\n`--arrow-color` custom properties. For additional customizations, you can also target the arrow using\n`::part(arrow)` in your stylesheet.",
24140
- "attribute": "arrow"
24471
+ "fieldName": "arrow"
24141
24472
  },
24142
24473
  {
24143
- "kind": "field",
24144
- "name": "arrowPlacement",
24474
+ "name": "arrow-placement",
24145
24475
  "type": {
24146
24476
  "text": "'start' | 'end' | 'center' | 'anchor'"
24147
24477
  },
24148
24478
  "default": "'anchor'",
24149
24479
  "description": "The placement of the arrow. The default is `anchor`, which will align the arrow as close to the center of the\nanchor as possible, considering available space and `arrow-padding`. A value of `start`, `end`, or `center` will\nalign the arrow to the start, end, or center of the popover instead.",
24150
- "attribute": "arrow-placement"
24480
+ "fieldName": "arrowPlacement"
24151
24481
  },
24152
24482
  {
24153
- "kind": "field",
24154
- "name": "arrowPadding",
24483
+ "name": "arrow-padding",
24155
24484
  "type": {
24156
24485
  "text": "number"
24157
24486
  },
24158
24487
  "default": "10",
24159
24488
  "description": "The amount of padding between the arrow and the edges of the popup. If the popup has a border-radius, for example,\nthis will prevent it from overflowing the corners.",
24160
- "attribute": "arrow-padding"
24489
+ "fieldName": "arrowPadding"
24161
24490
  },
24162
24491
  {
24163
- "kind": "field",
24164
24492
  "name": "flip",
24165
24493
  "type": {
24166
24494
  "text": "boolean"
24167
24495
  },
24168
24496
  "default": "false",
24169
24497
  "description": "When set, placement of the popup will flip to the opposite site to keep it in view. You can use\n`flipFallbackPlacements` to further configure how the fallback placement is determined.",
24170
- "attribute": "flip"
24498
+ "fieldName": "flip"
24171
24499
  },
24172
24500
  {
24173
- "kind": "field",
24174
- "name": "flipFallbackPlacements",
24501
+ "name": "flip-fallback-placements",
24175
24502
  "type": {
24176
24503
  "text": "string"
24177
24504
  },
24178
24505
  "default": "''",
24179
24506
  "description": "If the preferred placement doesn't fit, popup will be tested in these fallback placements until one fits. Must be a\nstring of any number of placements separated by a space, e.g. \"top bottom left\". If no placement fits, the flip\nfallback strategy will be used instead.",
24180
- "attribute": "flip-fallback-placements"
24507
+ "fieldName": "flipFallbackPlacements"
24181
24508
  },
24182
24509
  {
24183
- "kind": "field",
24184
- "name": "flipFallbackStrategy",
24510
+ "name": "flip-fallback-strategy",
24185
24511
  "type": {
24186
24512
  "text": "'best-fit' | 'initial'"
24187
24513
  },
24188
24514
  "default": "'best-fit'",
24189
24515
  "description": "When neither the preferred placement nor the fallback placements fit, this value will be used to determine whether\nthe popup should be positioned using the best available fit based on available space or as it was initially\npreferred.",
24190
- "attribute": "flip-fallback-strategy"
24516
+ "fieldName": "flipFallbackStrategy"
24191
24517
  },
24192
24518
  {
24193
- "kind": "field",
24194
24519
  "name": "flipBoundary",
24195
24520
  "type": {
24196
24521
  "text": "Element | Element[]"
24197
24522
  },
24198
24523
  "description": "The flip boundary describes clipping element(s) that overflow will be checked relative to when flipping. By\ndefault, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\nchange the boundary by passing a reference to one or more elements to this property.",
24199
- "attribute": "flipBoundary"
24524
+ "fieldName": "flipBoundary"
24200
24525
  },
24201
24526
  {
24202
- "kind": "field",
24203
- "name": "flipPadding",
24527
+ "name": "flip-padding",
24204
24528
  "type": {
24205
24529
  "text": "number"
24206
24530
  },
24207
24531
  "default": "0",
24208
24532
  "description": "The amount of padding, in pixels, to exceed before the flip behavior will occur.",
24209
- "attribute": "flip-padding"
24533
+ "fieldName": "flipPadding"
24210
24534
  },
24211
24535
  {
24212
- "kind": "field",
24213
24536
  "name": "shift",
24214
24537
  "type": {
24215
24538
  "text": "boolean"
24216
24539
  },
24217
24540
  "default": "false",
24218
24541
  "description": "Moves the popup along the axis to keep it in view when clipped.",
24219
- "attribute": "shift"
24542
+ "fieldName": "shift"
24220
24543
  },
24221
24544
  {
24222
- "kind": "field",
24223
24545
  "name": "shiftBoundary",
24224
24546
  "type": {
24225
24547
  "text": "Element | Element[]"
24226
24548
  },
24227
24549
  "description": "The shift boundary describes clipping element(s) that overflow will be checked relative to when shifting. By\ndefault, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\nchange the boundary by passing a reference to one or more elements to this property.",
24228
- "attribute": "shiftBoundary"
24550
+ "fieldName": "shiftBoundary"
24229
24551
  },
24230
24552
  {
24231
- "kind": "field",
24232
- "name": "shiftPadding",
24553
+ "name": "shift-padding",
24233
24554
  "type": {
24234
24555
  "text": "number"
24235
24556
  },
24236
24557
  "default": "0",
24237
24558
  "description": "The amount of padding, in pixels, to exceed before the shift behavior will occur.",
24238
- "attribute": "shift-padding"
24559
+ "fieldName": "shiftPadding"
24239
24560
  },
24240
24561
  {
24241
- "kind": "field",
24242
- "name": "autoSize",
24562
+ "name": "auto-size",
24243
24563
  "type": {
24244
24564
  "text": "'horizontal' | 'vertical' | 'both'"
24245
24565
  },
24246
24566
  "description": "When set, this will cause the popup to automatically resize itself to prevent it from overflowing.",
24247
- "attribute": "auto-size"
24567
+ "fieldName": "autoSize"
24248
24568
  },
24249
24569
  {
24250
- "kind": "field",
24251
24570
  "name": "sync",
24252
24571
  "type": {
24253
24572
  "text": "'width' | 'height' | 'both'"
24254
24573
  },
24255
24574
  "description": "Syncs the popup's width or height to that of the anchor element.",
24256
- "attribute": "sync"
24575
+ "fieldName": "sync"
24257
24576
  },
24258
24577
  {
24259
- "kind": "field",
24260
24578
  "name": "autoSizeBoundary",
24261
24579
  "type": {
24262
24580
  "text": "Element | Element[]"
24263
24581
  },
24264
24582
  "description": "The auto-size boundary describes clipping element(s) that overflow will be checked relative to when resizing. By\ndefault, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\nchange the boundary by passing a reference to one or more elements to this property.",
24265
- "attribute": "autoSizeBoundary"
24583
+ "fieldName": "autoSizeBoundary"
24266
24584
  },
24267
24585
  {
24268
- "kind": "field",
24269
- "name": "autoSizePadding",
24586
+ "name": "auto-size-padding",
24270
24587
  "type": {
24271
24588
  "text": "number"
24272
24589
  },
24273
24590
  "default": "0",
24274
24591
  "description": "The amount of padding, in pixels, to exceed before the auto-size behavior will occur.",
24275
- "attribute": "auto-size-padding"
24592
+ "fieldName": "autoSizePadding"
24276
24593
  },
24277
24594
  {
24278
- "kind": "field",
24279
- "name": "hoverBridge",
24595
+ "name": "hover-bridge",
24280
24596
  "type": {
24281
24597
  "text": "boolean"
24282
24598
  },
24283
24599
  "default": "false",
24284
24600
  "description": "When a gap exists between the anchor and the popup element, this option will add a \"hover bridge\" that fills the\ngap using an invisible element. This makes listening for events such as `mouseenter` and `mouseleave` more sane\nbecause the pointer never technically leaves the element. The hover bridge will only be drawn when the popover is\nactive.",
24285
- "attribute": "hover-bridge"
24286
- },
24287
- {
24288
- "kind": "method",
24289
- "name": "handleAnchorChange",
24290
- "privacy": "private"
24291
- },
24292
- {
24293
- "kind": "field",
24294
- "name": "handleAnchorHover",
24295
- "privacy": "public"
24296
- },
24297
- {
24298
- "kind": "method",
24299
- "name": "start",
24300
- "privacy": "private"
24301
- },
24302
- {
24303
- "kind": "method",
24304
- "name": "stop",
24305
- "privacy": "private",
24306
- "return": {
24307
- "type": {
24308
- "text": "Promise<void>"
24309
- }
24310
- }
24311
- },
24312
- {
24313
- "kind": "method",
24314
- "name": "reposition",
24315
- "description": "Forces the popup to recalculate and reposition itself."
24316
- },
24317
- {
24318
- "kind": "field",
24319
- "name": "updateHoverBridge",
24320
- "privacy": "private"
24601
+ "fieldName": "hoverBridge"
24321
24602
  }
24322
24603
  ],
24323
- "events": [
24324
- {
24325
- "description": "Emitted as an example.",
24326
- "name": "zn-event-name"
24604
+ "superclass": {
24605
+ "name": "ZincElement",
24606
+ "module": "/src/internal/zinc-element"
24607
+ },
24608
+ "summary": "Short summary of the component's intended use.",
24609
+ "tagNameWithoutPrefix": "popup",
24610
+ "tagName": "zn-popup",
24611
+ "customElement": true,
24612
+ "jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/popup\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-example\n *\n * @event zn-event-name - Emitted as an example.\n *\n * @slot - The default slot.\n * @slot example - An example slot.\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --example - An example CSS custom property.\n */",
24613
+ "documentation": "https://zinc.style/components/popup",
24614
+ "status": "experimental",
24615
+ "since": "1.0",
24616
+ "dependencies": [
24617
+ "zn-example"
24618
+ ]
24619
+ }
24620
+ ],
24621
+ "exports": [
24622
+ {
24623
+ "kind": "js",
24624
+ "name": "default",
24625
+ "declaration": {
24626
+ "name": "ZnPopup",
24627
+ "module": "components/popup/popup.js"
24628
+ }
24629
+ }
24630
+ ]
24631
+ },
24632
+ {
24633
+ "kind": "javascript-module",
24634
+ "path": "components/priority-list/priority-list.js",
24635
+ "declarations": [
24636
+ {
24637
+ "kind": "class",
24638
+ "description": "",
24639
+ "name": "ZnPriorityList",
24640
+ "cssProperties": [
24641
+ {
24642
+ "description": "The gap between list items. Defaults to `var(--zn-spacing-2x-small)`.",
24643
+ "name": "--zn-priority-list-item-gap"
24644
+ },
24645
+ {
24646
+ "description": "The padding inside each item. Defaults to `var(--zn-spacing-small) var(--zn-spacing-medium)`.",
24647
+ "name": "--zn-priority-list-item-padding"
24648
+ },
24649
+ {
24650
+ "description": "The color of the drag handle. Defaults to `var(--zn-color-neutral-500)`.",
24651
+ "name": "--zn-priority-list-handle-color"
24652
+ },
24653
+ {
24654
+ "description": "The color of the priority number. Defaults to `var(--zn-color-neutral-600)`.",
24655
+ "name": "--zn-priority-list-priority-color"
24327
24656
  }
24328
24657
  ],
24329
- "attributes": [
24658
+ "cssParts": [
24330
24659
  {
24331
- "name": "anchor",
24660
+ "description": "The form control wrapper.",
24661
+ "name": "form-control"
24662
+ },
24663
+ {
24664
+ "description": "The label wrapper.",
24665
+ "name": "form-control-label"
24666
+ },
24667
+ {
24668
+ "description": "The input area wrapper.",
24669
+ "name": "form-control-input"
24670
+ },
24671
+ {
24672
+ "description": "The help text wrapper.",
24673
+ "name": "form-control-help-text"
24674
+ },
24675
+ {
24676
+ "description": "The list container.",
24677
+ "name": "list"
24678
+ },
24679
+ {
24680
+ "description": "An individual list item row.",
24681
+ "name": "item"
24682
+ },
24683
+ {
24684
+ "description": "The drag handle icon.",
24685
+ "name": "drag-handle"
24686
+ },
24687
+ {
24688
+ "description": "The priority number badge.",
24689
+ "name": "priority"
24690
+ },
24691
+ {
24692
+ "description": "The content area of an item.",
24693
+ "name": "content"
24694
+ }
24695
+ ],
24696
+ "slots": [
24697
+ {
24698
+ "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).",
24699
+ "name": ""
24700
+ },
24701
+ {
24702
+ "description": "The component's label. Required for proper accessibility. Alternatively, use the `label` attribute.",
24703
+ "name": "label"
24704
+ },
24705
+ {
24706
+ "description": "Used to add text displayed in a tooltip next to the label.",
24707
+ "name": "label-tooltip"
24708
+ },
24709
+ {
24710
+ "description": "Text that describes how to use the component. Alternatively, use the `help-text` attribute.",
24711
+ "name": "help-text"
24712
+ }
24713
+ ],
24714
+ "members": [
24715
+ {
24716
+ "kind": "field",
24717
+ "name": "dependencies",
24332
24718
  "type": {
24333
- "text": "Element | string | VirtualElement"
24719
+ "text": "object"
24334
24720
  },
24335
- "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.",
24336
- "fieldName": "anchor"
24721
+ "static": true,
24722
+ "default": "{ 'zn-icon': ZnIcon, }"
24337
24723
  },
24338
24724
  {
24339
- "name": "active",
24725
+ "kind": "field",
24726
+ "name": "formControlController",
24727
+ "privacy": "protected",
24728
+ "readonly": true,
24729
+ "default": "new FormControlController(this, { value: (control: ZnPriorityList) => { return JSON.stringify(control.getPriorityMap()); }, defaultValue: (control: ZnPriorityList) => control.defaultValue, setValue: (control: ZnPriorityList, value: string) => { if (value) { try { const parsed: unknown = JSON.parse(value); if (Array.isArray(parsed) && parsed.every((item: unknown): item is string => typeof item === 'string')) { control.value = parsed as string[]; } } catch { // ignore parse errors } } }, })"
24730
+ },
24731
+ {
24732
+ "kind": "field",
24733
+ "name": "hasSlotController",
24734
+ "privacy": "private",
24735
+ "readonly": true,
24736
+ "default": "new HasSlotController(this, 'help-text', 'label')"
24737
+ },
24738
+ {
24739
+ "kind": "field",
24740
+ "name": "hiddenInputsContainer",
24340
24741
  "type": {
24341
- "text": "boolean"
24742
+ "text": "HTMLDivElement"
24743
+ }
24744
+ },
24745
+ {
24746
+ "kind": "field",
24747
+ "name": "name",
24748
+ "type": {
24749
+ "text": "string"
24342
24750
  },
24343
- "default": "false",
24344
- "description": "Activates the positioning logic and shows the popup. When this attribute is removed, the positioning logic is torn\ndown and the popup will be hidden.",
24345
- "fieldName": "active"
24751
+ "default": "''",
24752
+ "description": "The name prefix for form submission. Each item generates a hidden input named `{name}[{itemValue}]`\nwith the priority number as its value.",
24753
+ "attribute": "name"
24346
24754
  },
24347
24755
  {
24348
- "name": "placement",
24756
+ "kind": "field",
24757
+ "name": "value",
24349
24758
  "type": {
24350
- "text": "| 'top'\n | 'top-start'\n | 'top-end'\n | 'bottom'\n | 'bottom-start'\n | 'bottom-end'\n | 'right'\n | 'right-start'\n | 'right-end'\n | 'left'\n | 'left-start'\n | 'left-end'"
24759
+ "text": "string[]"
24351
24760
  },
24352
- "default": "'top'",
24353
- "description": "The preferred placement of the popup. Note that the actual placement will vary as configured to keep the\npanel inside of the viewport.",
24354
- "fieldName": "placement"
24761
+ "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.",
24762
+ "attribute": "value"
24355
24763
  },
24356
24764
  {
24357
- "name": "strategy",
24765
+ "kind": "field",
24766
+ "name": "_value",
24358
24767
  "type": {
24359
- "text": "'absolute' | 'fixed'"
24768
+ "text": "string[]"
24360
24769
  },
24361
- "default": "'fixed'",
24362
- "description": "Determines how the popup is positioned. The `absolute` strategy works well in most cases, but if overflow is\nclipped, using a `fixed` position strategy can often workaround it.",
24363
- "fieldName": "strategy"
24770
+ "privacy": "private",
24771
+ "default": "[]"
24364
24772
  },
24365
24773
  {
24366
- "name": "distance",
24774
+ "kind": "field",
24775
+ "name": "defaultValue",
24367
24776
  "type": {
24368
- "text": "number"
24777
+ "text": "string[]"
24369
24778
  },
24370
- "default": "0",
24371
- "description": "The distance in pixels from which to offset the panel away from its anchor.",
24372
- "fieldName": "distance"
24779
+ "default": "[]"
24373
24780
  },
24374
24781
  {
24375
- "name": "skidding",
24782
+ "kind": "field",
24783
+ "name": "label",
24376
24784
  "type": {
24377
- "text": "number"
24785
+ "text": "string"
24378
24786
  },
24379
- "default": "0",
24380
- "description": "The distance in pixels from which to offset the panel along its anchor.",
24381
- "fieldName": "skidding"
24787
+ "default": "''",
24788
+ "description": "The component's label. Required for proper accessibility.",
24789
+ "attribute": "label"
24382
24790
  },
24383
24791
  {
24384
- "name": "arrow",
24792
+ "kind": "field",
24793
+ "name": "labelTooltip",
24794
+ "type": {
24795
+ "text": "string"
24796
+ },
24797
+ "default": "''",
24798
+ "description": "Text that appears in a tooltip next to the label.",
24799
+ "attribute": "label-tooltip"
24800
+ },
24801
+ {
24802
+ "kind": "field",
24803
+ "name": "helpText",
24804
+ "type": {
24805
+ "text": "string"
24806
+ },
24807
+ "default": "''",
24808
+ "description": "Help text that describes how to use the component.",
24809
+ "attribute": "help-text"
24810
+ },
24811
+ {
24812
+ "kind": "field",
24813
+ "name": "form",
24814
+ "type": {
24815
+ "text": "string"
24816
+ },
24817
+ "default": "''",
24818
+ "description": "Associates the control with a form by id. The form must be in the same document or shadow root.",
24819
+ "attribute": "form",
24820
+ "reflects": true
24821
+ },
24822
+ {
24823
+ "kind": "field",
24824
+ "name": "size",
24825
+ "type": {
24826
+ "text": "'small' | 'medium' | 'large'"
24827
+ },
24828
+ "default": "'medium'",
24829
+ "description": "The size of the list items.",
24830
+ "attribute": "size",
24831
+ "reflects": true
24832
+ },
24833
+ {
24834
+ "kind": "field",
24835
+ "name": "disabled",
24385
24836
  "type": {
24386
24837
  "text": "boolean"
24387
24838
  },
24388
24839
  "default": "false",
24389
- "description": "Attaches an arrow to the popup. The arrow's size and color can be customized using the `--arrow-size` and\n`--arrow-color` custom properties. For additional customizations, you can also target the arrow using\n`::part(arrow)` in your stylesheet.",
24390
- "fieldName": "arrow"
24840
+ "description": "Whether the priority list is disabled.",
24841
+ "attribute": "disabled",
24842
+ "reflects": true
24391
24843
  },
24392
24844
  {
24393
- "name": "arrow-placement",
24845
+ "kind": "field",
24846
+ "name": "required",
24394
24847
  "type": {
24395
- "text": "'start' | 'end' | 'center' | 'anchor'"
24848
+ "text": "boolean"
24396
24849
  },
24397
- "default": "'anchor'",
24398
- "description": "The placement of the arrow. The default is `anchor`, which will align the arrow as close to the center of the\nanchor as possible, considering available space and `arrow-padding`. A value of `start`, `end`, or `center` will\nalign the arrow to the start, end, or center of the popover instead.",
24399
- "fieldName": "arrowPlacement"
24850
+ "default": "false",
24851
+ "description": "Ensures the form control has a value before allowing submission.",
24852
+ "attribute": "required",
24853
+ "reflects": true
24400
24854
  },
24401
24855
  {
24402
- "name": "arrow-padding",
24856
+ "kind": "field",
24857
+ "name": "priorityStart",
24403
24858
  "type": {
24404
24859
  "text": "number"
24405
24860
  },
24406
- "default": "10",
24407
- "description": "The amount of padding between the arrow and the edges of the popup. If the popup has a border-radius, for example,\nthis will prevent it from overflowing the corners.",
24408
- "fieldName": "arrowPadding"
24861
+ "default": "1",
24862
+ "description": "The starting priority number. Defaults to 1.",
24863
+ "attribute": "priority-start"
24409
24864
  },
24410
24865
  {
24411
- "name": "flip",
24866
+ "kind": "field",
24867
+ "name": "formAction",
24412
24868
  "type": {
24413
- "text": "boolean"
24869
+ "text": "string"
24414
24870
  },
24415
- "default": "false",
24416
- "description": "When set, placement of the popup will flip to the opposite site to keep it in view. You can use\n`flipFallbackPlacements` to further configure how the fallback placement is determined.",
24417
- "fieldName": "flip"
24871
+ "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.",
24872
+ "attribute": "formaction"
24418
24873
  },
24419
24874
  {
24420
- "name": "flip-fallback-placements",
24875
+ "kind": "field",
24876
+ "name": "order",
24421
24877
  "type": {
24422
24878
  "text": "string"
24423
24879
  },
24424
24880
  "default": "''",
24425
- "description": "If the preferred placement doesn't fit, popup will be tested in these fallback placements until one fits. Must be a\nstring of any number of placements separated by a space, e.g. \"top bottom left\". If no placement fits, the flip\nfallback strategy will be used instead.",
24426
- "fieldName": "flipFallbackPlacements"
24881
+ "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.",
24882
+ "attribute": "order"
24427
24883
  },
24428
24884
  {
24429
- "name": "flip-fallback-strategy",
24885
+ "kind": "field",
24886
+ "name": "draggedKey",
24430
24887
  "type": {
24431
- "text": "'best-fit' | 'initial'"
24888
+ "text": "string | null"
24432
24889
  },
24433
- "default": "'best-fit'",
24434
- "description": "When neither the preferred placement nor the fallback placements fit, this value will be used to determine whether\nthe popup should be positioned using the best available fit based on available space or as it was initially\npreferred.",
24435
- "fieldName": "flipFallbackStrategy"
24890
+ "privacy": "private",
24891
+ "default": "null"
24436
24892
  },
24437
24893
  {
24438
- "name": "flipBoundary",
24894
+ "kind": "field",
24895
+ "name": "isDragging",
24439
24896
  "type": {
24440
- "text": "Element | Element[]"
24897
+ "text": "boolean"
24441
24898
  },
24442
- "description": "The flip boundary describes clipping element(s) that overflow will be checked relative to when flipping. By\ndefault, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\nchange the boundary by passing a reference to one or more elements to this property.",
24443
- "fieldName": "flipBoundary"
24899
+ "privacy": "private",
24900
+ "default": "false"
24444
24901
  },
24445
24902
  {
24446
- "name": "flip-padding",
24903
+ "kind": "field",
24904
+ "name": "dragOverKey",
24447
24905
  "type": {
24448
- "text": "number"
24906
+ "text": "string | null"
24449
24907
  },
24450
- "default": "0",
24451
- "description": "The amount of padding, in pixels, to exceed before the flip behavior will occur.",
24452
- "fieldName": "flipPadding"
24908
+ "privacy": "private",
24909
+ "default": "null"
24453
24910
  },
24454
24911
  {
24455
- "name": "shift",
24912
+ "kind": "field",
24913
+ "name": "validity",
24456
24914
  "type": {
24457
- "text": "boolean"
24915
+ "text": "ValidityState"
24458
24916
  },
24459
- "default": "false",
24460
- "description": "Moves the popup along the axis to keep it in view when clipped.",
24461
- "fieldName": "shift"
24917
+ "description": "Gets the validity state object.",
24918
+ "readonly": true
24462
24919
  },
24463
24920
  {
24464
- "name": "shiftBoundary",
24921
+ "kind": "field",
24922
+ "name": "validationMessage",
24465
24923
  "type": {
24466
- "text": "Element | Element[]"
24924
+ "text": "string"
24467
24925
  },
24468
- "description": "The shift boundary describes clipping element(s) that overflow will be checked relative to when shifting. By\ndefault, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\nchange the boundary by passing a reference to one or more elements to this property.",
24469
- "fieldName": "shiftBoundary"
24926
+ "description": "Gets the validation message.",
24927
+ "readonly": true
24470
24928
  },
24471
24929
  {
24472
- "name": "shift-padding",
24930
+ "kind": "method",
24931
+ "name": "_initializeOrderFromSlot",
24932
+ "privacy": "private",
24933
+ "description": "Initialize item order from slotted children if no explicit value was provided.\nIf an `order` attribute is set, use it to define the initial order,\nappending any slotted items not listed in the order at the end."
24934
+ },
24935
+ {
24936
+ "kind": "method",
24937
+ "name": "_getSlottedItems",
24938
+ "privacy": "private",
24939
+ "return": {
24940
+ "type": {
24941
+ "text": "HTMLElement[]"
24942
+ }
24943
+ },
24944
+ "description": "Gets all direct children with a `value` attribute (excluding those in reserved slots)."
24945
+ },
24946
+ {
24947
+ "kind": "method",
24948
+ "name": "_assignSlotNames",
24949
+ "privacy": "private",
24950
+ "description": "Assigns `slot` attributes to light DOM children based on their `value` attribute,\nso they project into the correct named slot in the shadow DOM."
24951
+ },
24952
+ {
24953
+ "kind": "method",
24954
+ "name": "getPriorityMap",
24955
+ "return": {
24956
+ "type": {
24957
+ "text": "PriorityItem[]"
24958
+ }
24959
+ },
24960
+ "description": "Returns the priority map: an array of { key, priority } objects."
24961
+ },
24962
+ {
24963
+ "kind": "method",
24964
+ "name": "_syncHiddenInputs",
24965
+ "privacy": "private",
24966
+ "description": "Syncs hidden inputs so form data includes priority values."
24967
+ },
24968
+ {
24969
+ "kind": "method",
24970
+ "name": "_moveItem",
24971
+ "privacy": "private",
24972
+ "parameters": [
24973
+ {
24974
+ "name": "fromIndex",
24975
+ "type": {
24976
+ "text": "number"
24977
+ }
24978
+ },
24979
+ {
24980
+ "name": "toIndex",
24981
+ "type": {
24982
+ "text": "number"
24983
+ }
24984
+ }
24985
+ ],
24986
+ "description": "Moves an item from one index to another."
24987
+ },
24988
+ {
24989
+ "kind": "method",
24990
+ "name": "_submitForm",
24991
+ "privacy": "private",
24992
+ "description": "Submits the associated form if a `formaction` attribute is set."
24993
+ },
24994
+ {
24995
+ "kind": "method",
24996
+ "name": "_handleDragStart",
24997
+ "privacy": "private",
24998
+ "parameters": [
24999
+ {
25000
+ "name": "event",
25001
+ "type": {
25002
+ "text": "DragEvent"
25003
+ }
25004
+ },
25005
+ {
25006
+ "name": "key",
25007
+ "type": {
25008
+ "text": "string"
25009
+ }
25010
+ }
25011
+ ]
25012
+ },
25013
+ {
25014
+ "kind": "method",
25015
+ "name": "_handleDragEnd",
25016
+ "privacy": "private"
25017
+ },
25018
+ {
25019
+ "kind": "method",
25020
+ "name": "_handleDragOver",
25021
+ "privacy": "private",
25022
+ "parameters": [
25023
+ {
25024
+ "name": "event",
25025
+ "type": {
25026
+ "text": "DragEvent"
25027
+ }
25028
+ },
25029
+ {
25030
+ "name": "key",
25031
+ "type": {
25032
+ "text": "string"
25033
+ }
25034
+ }
25035
+ ]
25036
+ },
25037
+ {
25038
+ "kind": "method",
25039
+ "name": "_handleDragLeave",
25040
+ "privacy": "private",
25041
+ "parameters": [
25042
+ {
25043
+ "name": "event",
25044
+ "type": {
25045
+ "text": "DragEvent"
25046
+ }
25047
+ },
25048
+ {
25049
+ "name": "key",
25050
+ "type": {
25051
+ "text": "string"
25052
+ }
25053
+ }
25054
+ ]
25055
+ },
25056
+ {
25057
+ "kind": "method",
25058
+ "name": "_handleDrop",
25059
+ "privacy": "private",
25060
+ "parameters": [
25061
+ {
25062
+ "name": "event",
25063
+ "type": {
25064
+ "text": "DragEvent"
25065
+ }
25066
+ }
25067
+ ]
25068
+ },
25069
+ {
25070
+ "kind": "method",
25071
+ "name": "_handleKeyDown",
25072
+ "privacy": "private",
25073
+ "parameters": [
25074
+ {
25075
+ "name": "event",
25076
+ "type": {
25077
+ "text": "KeyboardEvent"
25078
+ }
25079
+ },
25080
+ {
25081
+ "name": "key",
25082
+ "type": {
25083
+ "text": "string"
25084
+ }
25085
+ }
25086
+ ]
25087
+ },
25088
+ {
25089
+ "kind": "method",
25090
+ "name": "_handleSlotChange",
25091
+ "privacy": "private"
25092
+ },
25093
+ {
25094
+ "kind": "method",
25095
+ "name": "checkValidity",
25096
+ "return": {
25097
+ "type": {
25098
+ "text": "boolean"
25099
+ }
25100
+ },
25101
+ "description": "Checks for validity but does not show a validation message."
25102
+ },
25103
+ {
25104
+ "kind": "method",
25105
+ "name": "getForm",
25106
+ "return": {
25107
+ "type": {
25108
+ "text": "HTMLFormElement | null"
25109
+ }
25110
+ },
25111
+ "description": "Gets the associated form, if one exists."
25112
+ },
25113
+ {
25114
+ "kind": "method",
25115
+ "name": "reportValidity",
25116
+ "return": {
25117
+ "type": {
25118
+ "text": "boolean"
25119
+ }
25120
+ },
25121
+ "description": "Checks for validity and shows the browser's validation message if the control is invalid."
25122
+ },
25123
+ {
25124
+ "kind": "method",
25125
+ "name": "setCustomValidity",
25126
+ "parameters": [
25127
+ {
25128
+ "name": "_message",
25129
+ "default": "''"
25130
+ }
25131
+ ],
25132
+ "description": "Sets a custom validation message. Pass an empty string to restore validity."
25133
+ }
25134
+ ],
25135
+ "events": [
25136
+ {
25137
+ "description": "Emitted when the order of items changes.",
25138
+ "name": "zn-change"
25139
+ },
25140
+ {
25141
+ "description": "Emitted when items are reordered. Call `getPriorityMap()` on the component to get the updated `{ key: string, priority: number }[]` array.",
25142
+ "name": "zn-reorder"
25143
+ }
25144
+ ],
25145
+ "attributes": [
25146
+ {
25147
+ "name": "name",
24473
25148
  "type": {
24474
- "text": "number"
25149
+ "text": "string"
24475
25150
  },
24476
- "default": "0",
24477
- "description": "The amount of padding, in pixels, to exceed before the shift behavior will occur.",
24478
- "fieldName": "shiftPadding"
25151
+ "default": "''",
25152
+ "description": "The name prefix for form submission. Each item generates a hidden input named `{name}[{itemValue}]`\nwith the priority number as its value.",
25153
+ "fieldName": "name"
24479
25154
  },
24480
25155
  {
24481
- "name": "auto-size",
25156
+ "name": "value",
24482
25157
  "type": {
24483
- "text": "'horizontal' | 'vertical' | 'both'"
25158
+ "text": "string[]"
24484
25159
  },
24485
- "description": "When set, this will cause the popup to automatically resize itself to prevent it from overflowing.",
24486
- "fieldName": "autoSize"
25160
+ "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.",
25161
+ "fieldName": "value"
24487
25162
  },
24488
25163
  {
24489
- "name": "sync",
25164
+ "name": "label",
24490
25165
  "type": {
24491
- "text": "'width' | 'height' | 'both'"
25166
+ "text": "string"
24492
25167
  },
24493
- "description": "Syncs the popup's width or height to that of the anchor element.",
24494
- "fieldName": "sync"
25168
+ "default": "''",
25169
+ "description": "The component's label. Required for proper accessibility.",
25170
+ "fieldName": "label"
24495
25171
  },
24496
25172
  {
24497
- "name": "autoSizeBoundary",
25173
+ "name": "label-tooltip",
24498
25174
  "type": {
24499
- "text": "Element | Element[]"
25175
+ "text": "string"
24500
25176
  },
24501
- "description": "The auto-size boundary describes clipping element(s) that overflow will be checked relative to when resizing. By\ndefault, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\nchange the boundary by passing a reference to one or more elements to this property.",
24502
- "fieldName": "autoSizeBoundary"
25177
+ "default": "''",
25178
+ "description": "Text that appears in a tooltip next to the label.",
25179
+ "fieldName": "labelTooltip"
24503
25180
  },
24504
25181
  {
24505
- "name": "auto-size-padding",
25182
+ "name": "help-text",
24506
25183
  "type": {
24507
- "text": "number"
25184
+ "text": "string"
24508
25185
  },
24509
- "default": "0",
24510
- "description": "The amount of padding, in pixels, to exceed before the auto-size behavior will occur.",
24511
- "fieldName": "autoSizePadding"
25186
+ "default": "''",
25187
+ "description": "Help text that describes how to use the component.",
25188
+ "fieldName": "helpText"
24512
25189
  },
24513
25190
  {
24514
- "name": "hover-bridge",
25191
+ "name": "form",
25192
+ "type": {
25193
+ "text": "string"
25194
+ },
25195
+ "default": "''",
25196
+ "description": "Associates the control with a form by id. The form must be in the same document or shadow root.",
25197
+ "fieldName": "form"
25198
+ },
25199
+ {
25200
+ "name": "size",
25201
+ "type": {
25202
+ "text": "'small' | 'medium' | 'large'"
25203
+ },
25204
+ "default": "'medium'",
25205
+ "description": "The size of the list items.",
25206
+ "fieldName": "size"
25207
+ },
25208
+ {
25209
+ "name": "disabled",
24515
25210
  "type": {
24516
25211
  "text": "boolean"
24517
25212
  },
24518
25213
  "default": "false",
24519
- "description": "When a gap exists between the anchor and the popup element, this option will add a \"hover bridge\" that fills the\ngap using an invisible element. This makes listening for events such as `mouseenter` and `mouseleave` more sane\nbecause the pointer never technically leaves the element. The hover bridge will only be drawn when the popover is\nactive.",
24520
- "fieldName": "hoverBridge"
25214
+ "description": "Whether the priority list is disabled.",
25215
+ "fieldName": "disabled"
25216
+ },
25217
+ {
25218
+ "name": "required",
25219
+ "type": {
25220
+ "text": "boolean"
25221
+ },
25222
+ "default": "false",
25223
+ "description": "Ensures the form control has a value before allowing submission.",
25224
+ "fieldName": "required"
25225
+ },
25226
+ {
25227
+ "name": "priority-start",
25228
+ "type": {
25229
+ "text": "number"
25230
+ },
25231
+ "default": "1",
25232
+ "description": "The starting priority number. Defaults to 1.",
25233
+ "fieldName": "priorityStart"
25234
+ },
25235
+ {
25236
+ "name": "formaction",
25237
+ "type": {
25238
+ "text": "string"
25239
+ },
25240
+ "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.",
25241
+ "fieldName": "formAction"
25242
+ },
25243
+ {
25244
+ "name": "order",
25245
+ "type": {
25246
+ "text": "string"
25247
+ },
25248
+ "default": "''",
25249
+ "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.",
25250
+ "fieldName": "order"
24521
25251
  }
24522
25252
  ],
24523
25253
  "superclass": {
24524
25254
  "name": "ZincElement",
24525
25255
  "module": "/src/internal/zinc-element"
24526
25256
  },
24527
- "summary": "Short summary of the component's intended use.",
24528
- "tagNameWithoutPrefix": "popup",
24529
- "tagName": "zn-popup",
25257
+ "summary": "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.",
25258
+ "tagNameWithoutPrefix": "priority-list",
25259
+ "tagName": "zn-priority-list",
24530
25260
  "customElement": true,
24531
- "jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/popup\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-example\n *\n * @event zn-event-name - Emitted as an example.\n *\n * @slot - The default slot.\n * @slot example - An example slot.\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --example - An example CSS custom property.\n */",
24532
- "documentation": "https://zinc.style/components/popup",
25261
+ "jsDoc": "/**\n * @summary A reorderable list where each item receives a numerical priority based on its position. Supports drag-and-drop\n * and keyboard reordering. Priority values are submitted as form data via hidden inputs.\n *\n * @documentation https://zinc.style/components/priority-list\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-icon\n *\n * @slot - The default slot where list items are placed. Each slotted element must have a `value` attribute that\n * uniquely identifies the item. The component automatically assigns slot names to project each item into the\n * correct position. The item's position in the list determines its priority (top = `priority-start`, incrementing).\n * @slot label - The component's label. Required for proper accessibility. Alternatively, use the `label` attribute.\n * @slot label-tooltip - Used to add text displayed in a tooltip next to the label.\n * @slot help-text - Text that describes how to use the component. Alternatively, use the `help-text` attribute.\n *\n * @event zn-change - Emitted when the order of items changes.\n * @event zn-reorder - Emitted when items are reordered. Call `getPriorityMap()` on the component to get\n * the updated `{ key: string, priority: number }[]` array.\n *\n * @csspart form-control - The form control wrapper.\n * @csspart form-control-label - The label wrapper.\n * @csspart form-control-input - The input area wrapper.\n * @csspart form-control-help-text - The help text wrapper.\n * @csspart list - The list container.\n * @csspart item - An individual list item row.\n * @csspart drag-handle - The drag handle icon.\n * @csspart priority - The priority number badge.\n * @csspart content - The content area of an item.\n *\n * @cssproperty --zn-priority-list-item-gap - The gap between list items. Defaults to `var(--zn-spacing-2x-small)`.\n * @cssproperty --zn-priority-list-item-padding - The padding inside each item. Defaults to `var(--zn-spacing-small) var(--zn-spacing-medium)`.\n * @cssproperty --zn-priority-list-handle-color - The color of the drag handle. Defaults to `var(--zn-color-neutral-500)`.\n * @cssproperty --zn-priority-list-priority-color - The color of the priority number. Defaults to `var(--zn-color-neutral-600)`.\n */",
25262
+ "documentation": "https://zinc.style/components/priority-list",
24533
25263
  "status": "experimental",
24534
25264
  "since": "1.0",
24535
25265
  "dependencies": [
24536
- "zn-example"
25266
+ "zn-icon"
24537
25267
  ]
24538
25268
  }
24539
25269
  ],
@@ -24542,8 +25272,8 @@
24542
25272
  "kind": "js",
24543
25273
  "name": "default",
24544
25274
  "declaration": {
24545
- "name": "ZnPopup",
24546
- "module": "components/popup/popup.js"
25275
+ "name": "ZnPriorityList",
25276
+ "module": "components/priority-list/priority-list.js"
24547
25277
  }
24548
25278
  }
24549
25279
  ]
@@ -36368,7 +37098,7 @@
36368
37098
  "package": {
36369
37099
  "name": "@kubex/zinc",
36370
37100
  "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
36371
- "version": "1.1.12",
37101
+ "version": "1.1.14",
36372
37102
  "author": "",
36373
37103
  "license": "MIT"
36374
37104
  }