@kubex/zinc 1.1.48 → 1.1.49
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.
- package/dist/custom-elements.json +373 -74
- package/dist/vscode.html-custom-data.json +54 -11
- package/dist/web-types.json +127 -23
- package/dist/zn.d.ts +68 -0
- package/dist/zn.min.js +340 -318
- package/docs/pages/components/color-select.md +34 -0
- package/package.json +1 -1
- package/src/components/channel-tile/channel-tile.component.ts +6 -2
- package/src/components/color-select/color-select.component.ts +123 -0
- package/src/components/color-select/color-select.scss +78 -0
- package/src/components/color-select/color-select.test.ts +28 -0
- package/src/components/color-select/index.ts +12 -0
- package/src/zinc.ts +1 -0
|
@@ -47,79 +47,6 @@
|
|
|
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
|
-
},
|
|
123
50
|
{
|
|
124
51
|
"kind": "javascript-module",
|
|
125
52
|
"path": "components/alert/alert.js",
|
|
@@ -296,6 +223,79 @@
|
|
|
296
223
|
}
|
|
297
224
|
]
|
|
298
225
|
},
|
|
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",
|
|
@@ -5684,6 +5684,305 @@
|
|
|
5684
5684
|
}
|
|
5685
5685
|
]
|
|
5686
5686
|
},
|
|
5687
|
+
{
|
|
5688
|
+
"kind": "javascript-module",
|
|
5689
|
+
"path": "components/color-select/color-select.js",
|
|
5690
|
+
"declarations": [
|
|
5691
|
+
{
|
|
5692
|
+
"kind": "class",
|
|
5693
|
+
"description": "",
|
|
5694
|
+
"name": "ZnColorSelect",
|
|
5695
|
+
"cssParts": [
|
|
5696
|
+
{
|
|
5697
|
+
"description": "The color swatch shown in the closed control.",
|
|
5698
|
+
"name": "swatch"
|
|
5699
|
+
},
|
|
5700
|
+
{
|
|
5701
|
+
"description": "The container that wraps the swatch and expand button (forwarded from zn-select).",
|
|
5702
|
+
"name": "combobox"
|
|
5703
|
+
},
|
|
5704
|
+
{
|
|
5705
|
+
"description": "The help text's wrapper (forwarded from zn-select).",
|
|
5706
|
+
"name": "form-control-help-text"
|
|
5707
|
+
},
|
|
5708
|
+
{
|
|
5709
|
+
"description": "The select's wrapper (forwarded from zn-select).",
|
|
5710
|
+
"name": "form-control-input"
|
|
5711
|
+
}
|
|
5712
|
+
],
|
|
5713
|
+
"members": [
|
|
5714
|
+
{
|
|
5715
|
+
"kind": "field",
|
|
5716
|
+
"name": "dependencies",
|
|
5717
|
+
"type": {
|
|
5718
|
+
"text": "object"
|
|
5719
|
+
},
|
|
5720
|
+
"static": true,
|
|
5721
|
+
"default": "{ 'zn-select': ZnSelect, 'zn-option': ZnOption, }"
|
|
5722
|
+
},
|
|
5723
|
+
{
|
|
5724
|
+
"kind": "field",
|
|
5725
|
+
"name": "select",
|
|
5726
|
+
"type": {
|
|
5727
|
+
"text": "ZnSelect"
|
|
5728
|
+
}
|
|
5729
|
+
},
|
|
5730
|
+
{
|
|
5731
|
+
"kind": "field",
|
|
5732
|
+
"name": "name",
|
|
5733
|
+
"type": {
|
|
5734
|
+
"text": "string"
|
|
5735
|
+
},
|
|
5736
|
+
"description": "The name of the select. Used for form submission.",
|
|
5737
|
+
"attribute": "name"
|
|
5738
|
+
},
|
|
5739
|
+
{
|
|
5740
|
+
"kind": "field",
|
|
5741
|
+
"name": "value",
|
|
5742
|
+
"type": {
|
|
5743
|
+
"text": "string"
|
|
5744
|
+
},
|
|
5745
|
+
"default": "''",
|
|
5746
|
+
"description": "The selected color (lowercase name, e.g. \"red\"). Used for form submission.",
|
|
5747
|
+
"attribute": "value"
|
|
5748
|
+
},
|
|
5749
|
+
{
|
|
5750
|
+
"kind": "field",
|
|
5751
|
+
"name": "label",
|
|
5752
|
+
"type": {
|
|
5753
|
+
"text": "string"
|
|
5754
|
+
},
|
|
5755
|
+
"default": "''",
|
|
5756
|
+
"description": "The select's label.",
|
|
5757
|
+
"attribute": "label"
|
|
5758
|
+
},
|
|
5759
|
+
{
|
|
5760
|
+
"kind": "field",
|
|
5761
|
+
"name": "helpText",
|
|
5762
|
+
"type": {
|
|
5763
|
+
"text": "string"
|
|
5764
|
+
},
|
|
5765
|
+
"default": "''",
|
|
5766
|
+
"description": "The select's help text.",
|
|
5767
|
+
"attribute": "help-text"
|
|
5768
|
+
},
|
|
5769
|
+
{
|
|
5770
|
+
"kind": "field",
|
|
5771
|
+
"name": "disabled",
|
|
5772
|
+
"type": {
|
|
5773
|
+
"text": "boolean"
|
|
5774
|
+
},
|
|
5775
|
+
"default": "false",
|
|
5776
|
+
"description": "Disables the select.",
|
|
5777
|
+
"attribute": "disabled",
|
|
5778
|
+
"reflects": true
|
|
5779
|
+
},
|
|
5780
|
+
{
|
|
5781
|
+
"kind": "field",
|
|
5782
|
+
"name": "required",
|
|
5783
|
+
"type": {
|
|
5784
|
+
"text": "boolean"
|
|
5785
|
+
},
|
|
5786
|
+
"default": "false",
|
|
5787
|
+
"description": "Makes the select a required field.",
|
|
5788
|
+
"attribute": "required",
|
|
5789
|
+
"reflects": true
|
|
5790
|
+
},
|
|
5791
|
+
{
|
|
5792
|
+
"kind": "field",
|
|
5793
|
+
"name": "clearable",
|
|
5794
|
+
"type": {
|
|
5795
|
+
"text": "boolean"
|
|
5796
|
+
},
|
|
5797
|
+
"default": "false",
|
|
5798
|
+
"description": "Shows a clear button when a color is selected.",
|
|
5799
|
+
"attribute": "clearable"
|
|
5800
|
+
},
|
|
5801
|
+
{
|
|
5802
|
+
"kind": "field",
|
|
5803
|
+
"name": "formControlController",
|
|
5804
|
+
"privacy": "private",
|
|
5805
|
+
"readonly": true,
|
|
5806
|
+
"default": "new FormControlController(this)"
|
|
5807
|
+
},
|
|
5808
|
+
{
|
|
5809
|
+
"kind": "field",
|
|
5810
|
+
"name": "validity",
|
|
5811
|
+
"type": {
|
|
5812
|
+
"text": "ValidityState"
|
|
5813
|
+
},
|
|
5814
|
+
"readonly": true
|
|
5815
|
+
},
|
|
5816
|
+
{
|
|
5817
|
+
"kind": "field",
|
|
5818
|
+
"name": "validationMessage",
|
|
5819
|
+
"type": {
|
|
5820
|
+
"text": "string"
|
|
5821
|
+
},
|
|
5822
|
+
"readonly": true
|
|
5823
|
+
},
|
|
5824
|
+
{
|
|
5825
|
+
"kind": "method",
|
|
5826
|
+
"name": "checkValidity",
|
|
5827
|
+
"return": {
|
|
5828
|
+
"type": {
|
|
5829
|
+
"text": "boolean"
|
|
5830
|
+
}
|
|
5831
|
+
}
|
|
5832
|
+
},
|
|
5833
|
+
{
|
|
5834
|
+
"kind": "method",
|
|
5835
|
+
"name": "getForm",
|
|
5836
|
+
"return": {
|
|
5837
|
+
"type": {
|
|
5838
|
+
"text": "HTMLFormElement | null"
|
|
5839
|
+
}
|
|
5840
|
+
}
|
|
5841
|
+
},
|
|
5842
|
+
{
|
|
5843
|
+
"kind": "method",
|
|
5844
|
+
"name": "reportValidity",
|
|
5845
|
+
"return": {
|
|
5846
|
+
"type": {
|
|
5847
|
+
"text": "boolean"
|
|
5848
|
+
}
|
|
5849
|
+
}
|
|
5850
|
+
},
|
|
5851
|
+
{
|
|
5852
|
+
"kind": "method",
|
|
5853
|
+
"name": "setCustomValidity",
|
|
5854
|
+
"return": {
|
|
5855
|
+
"type": {
|
|
5856
|
+
"text": "void"
|
|
5857
|
+
}
|
|
5858
|
+
},
|
|
5859
|
+
"parameters": [
|
|
5860
|
+
{
|
|
5861
|
+
"name": "message",
|
|
5862
|
+
"type": {
|
|
5863
|
+
"text": "string"
|
|
5864
|
+
}
|
|
5865
|
+
}
|
|
5866
|
+
]
|
|
5867
|
+
},
|
|
5868
|
+
{
|
|
5869
|
+
"kind": "method",
|
|
5870
|
+
"name": "handleValueChange"
|
|
5871
|
+
},
|
|
5872
|
+
{
|
|
5873
|
+
"kind": "field",
|
|
5874
|
+
"name": "handleInput",
|
|
5875
|
+
"privacy": "private"
|
|
5876
|
+
},
|
|
5877
|
+
{
|
|
5878
|
+
"kind": "field",
|
|
5879
|
+
"name": "handleClear",
|
|
5880
|
+
"privacy": "private"
|
|
5881
|
+
}
|
|
5882
|
+
],
|
|
5883
|
+
"events": [
|
|
5884
|
+
{
|
|
5885
|
+
"description": "Emitted when the selected color changes.",
|
|
5886
|
+
"name": "zn-input"
|
|
5887
|
+
},
|
|
5888
|
+
{
|
|
5889
|
+
"description": "Emitted when the clear button is activated.",
|
|
5890
|
+
"name": "zn-clear"
|
|
5891
|
+
}
|
|
5892
|
+
],
|
|
5893
|
+
"attributes": [
|
|
5894
|
+
{
|
|
5895
|
+
"name": "name",
|
|
5896
|
+
"type": {
|
|
5897
|
+
"text": "string"
|
|
5898
|
+
},
|
|
5899
|
+
"description": "The name of the select. Used for form submission.",
|
|
5900
|
+
"fieldName": "name"
|
|
5901
|
+
},
|
|
5902
|
+
{
|
|
5903
|
+
"name": "value",
|
|
5904
|
+
"type": {
|
|
5905
|
+
"text": "string"
|
|
5906
|
+
},
|
|
5907
|
+
"default": "''",
|
|
5908
|
+
"description": "The selected color (lowercase name, e.g. \"red\"). Used for form submission.",
|
|
5909
|
+
"fieldName": "value"
|
|
5910
|
+
},
|
|
5911
|
+
{
|
|
5912
|
+
"name": "label",
|
|
5913
|
+
"type": {
|
|
5914
|
+
"text": "string"
|
|
5915
|
+
},
|
|
5916
|
+
"default": "''",
|
|
5917
|
+
"description": "The select's label.",
|
|
5918
|
+
"fieldName": "label"
|
|
5919
|
+
},
|
|
5920
|
+
{
|
|
5921
|
+
"name": "help-text",
|
|
5922
|
+
"type": {
|
|
5923
|
+
"text": "string"
|
|
5924
|
+
},
|
|
5925
|
+
"default": "''",
|
|
5926
|
+
"description": "The select's help text.",
|
|
5927
|
+
"fieldName": "helpText"
|
|
5928
|
+
},
|
|
5929
|
+
{
|
|
5930
|
+
"name": "disabled",
|
|
5931
|
+
"type": {
|
|
5932
|
+
"text": "boolean"
|
|
5933
|
+
},
|
|
5934
|
+
"default": "false",
|
|
5935
|
+
"description": "Disables the select.",
|
|
5936
|
+
"fieldName": "disabled"
|
|
5937
|
+
},
|
|
5938
|
+
{
|
|
5939
|
+
"name": "required",
|
|
5940
|
+
"type": {
|
|
5941
|
+
"text": "boolean"
|
|
5942
|
+
},
|
|
5943
|
+
"default": "false",
|
|
5944
|
+
"description": "Makes the select a required field.",
|
|
5945
|
+
"fieldName": "required"
|
|
5946
|
+
},
|
|
5947
|
+
{
|
|
5948
|
+
"name": "clearable",
|
|
5949
|
+
"type": {
|
|
5950
|
+
"text": "boolean"
|
|
5951
|
+
},
|
|
5952
|
+
"default": "false",
|
|
5953
|
+
"description": "Shows a clear button when a color is selected.",
|
|
5954
|
+
"fieldName": "clearable"
|
|
5955
|
+
}
|
|
5956
|
+
],
|
|
5957
|
+
"superclass": {
|
|
5958
|
+
"name": "ZincElement",
|
|
5959
|
+
"module": "/src/internal/zinc-element"
|
|
5960
|
+
},
|
|
5961
|
+
"summary": "A simple color picker. The dropdown lists color swatches with names; the closed control shows only the selected color's swatch.",
|
|
5962
|
+
"tagNameWithoutPrefix": "color-select",
|
|
5963
|
+
"tagName": "zn-color-select",
|
|
5964
|
+
"customElement": true,
|
|
5965
|
+
"jsDoc": "/**\n * @summary A simple color picker. The dropdown lists color swatches with names; the closed control shows only the selected color's swatch.\n * @documentation https://zinc.style/components/color-select\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-select\n * @dependency zn-option\n *\n * @event zn-input - Emitted when the selected color changes.\n * @event zn-clear - Emitted when the clear button is activated.\n *\n * @csspart swatch - The color swatch shown in the closed control.\n * @csspart combobox - The container that wraps the swatch and expand button (forwarded from zn-select).\n * @csspart form-control-help-text - The help text's wrapper (forwarded from zn-select).\n * @csspart form-control-input - The select's wrapper (forwarded from zn-select).\n */",
|
|
5966
|
+
"documentation": "https://zinc.style/components/color-select",
|
|
5967
|
+
"status": "experimental",
|
|
5968
|
+
"since": "1.0",
|
|
5969
|
+
"dependencies": [
|
|
5970
|
+
"zn-select",
|
|
5971
|
+
"zn-option"
|
|
5972
|
+
]
|
|
5973
|
+
}
|
|
5974
|
+
],
|
|
5975
|
+
"exports": [
|
|
5976
|
+
{
|
|
5977
|
+
"kind": "js",
|
|
5978
|
+
"name": "default",
|
|
5979
|
+
"declaration": {
|
|
5980
|
+
"name": "ZnColorSelect",
|
|
5981
|
+
"module": "components/color-select/color-select.js"
|
|
5982
|
+
}
|
|
5983
|
+
}
|
|
5984
|
+
]
|
|
5985
|
+
},
|
|
5687
5986
|
{
|
|
5688
5987
|
"kind": "javascript-module",
|
|
5689
5988
|
"path": "components/cols/cols.js",
|
|
@@ -40324,7 +40623,7 @@
|
|
|
40324
40623
|
"package": {
|
|
40325
40624
|
"name": "@kubex/zinc",
|
|
40326
40625
|
"description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
|
|
40327
|
-
"version": "1.1.
|
|
40626
|
+
"version": "1.1.49",
|
|
40328
40627
|
"author": "",
|
|
40329
40628
|
"license": "MIT"
|
|
40330
40629
|
}
|
|
@@ -13,17 +13,6 @@
|
|
|
13
13
|
}
|
|
14
14
|
]
|
|
15
15
|
},
|
|
16
|
-
{
|
|
17
|
-
"name": "zn-action-bar",
|
|
18
|
-
"description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
|
|
19
|
-
"attributes": [],
|
|
20
|
-
"references": [
|
|
21
|
-
{
|
|
22
|
-
"name": "Documentation",
|
|
23
|
-
"url": "https://zinc.style/components/action-bar"
|
|
24
|
-
}
|
|
25
|
-
]
|
|
26
|
-
},
|
|
27
16
|
{
|
|
28
17
|
"name": "zn-alert",
|
|
29
18
|
"description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
|
|
@@ -63,6 +52,17 @@
|
|
|
63
52
|
}
|
|
64
53
|
]
|
|
65
54
|
},
|
|
55
|
+
{
|
|
56
|
+
"name": "zn-action-bar",
|
|
57
|
+
"description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
|
|
58
|
+
"attributes": [],
|
|
59
|
+
"references": [
|
|
60
|
+
{
|
|
61
|
+
"name": "Documentation",
|
|
62
|
+
"url": "https://zinc.style/components/action-bar"
|
|
63
|
+
}
|
|
64
|
+
]
|
|
65
|
+
},
|
|
66
66
|
{
|
|
67
67
|
"name": "zn-animated-button",
|
|
68
68
|
"description": "\n---\n\n\n### **Methods:**\n - **purchase(): _void_** - Programmatically trigger the purchase flow\n- **setSuccess(): _void_** - Set the button to success state manually\n- **setFailure(message): _void_** - Set the button to failure state manually with optional error message\n- **reset(): _void_** - Reset the button to idle state",
|
|
@@ -785,6 +785,49 @@
|
|
|
785
785
|
}
|
|
786
786
|
]
|
|
787
787
|
},
|
|
788
|
+
{
|
|
789
|
+
"name": "zn-color-select",
|
|
790
|
+
"description": "A simple color picker. The dropdown lists color swatches with names; the closed control shows only the selected color's swatch.\n---\n\n\n### **Events:**\n - **zn-input** - Emitted when the selected color changes.\n- **zn-clear** - Emitted when the clear button is activated.\n\n### **CSS Parts:**\n - **swatch** - The color swatch shown in the closed control.\n- **combobox** - The container that wraps the swatch and expand button (forwarded from zn-select).\n- **form-control-help-text** - The help text's wrapper (forwarded from zn-select).\n- **form-control-input** - The select's wrapper (forwarded from zn-select).",
|
|
791
|
+
"attributes": [
|
|
792
|
+
{
|
|
793
|
+
"name": "name",
|
|
794
|
+
"description": "The name of the select. Used for form submission.",
|
|
795
|
+
"values": []
|
|
796
|
+
},
|
|
797
|
+
{
|
|
798
|
+
"name": "value",
|
|
799
|
+
"description": "The selected color (lowercase name, e.g. \"red\"). Used for form submission.",
|
|
800
|
+
"values": []
|
|
801
|
+
},
|
|
802
|
+
{ "name": "label", "description": "The select's label.", "values": [] },
|
|
803
|
+
{
|
|
804
|
+
"name": "help-text",
|
|
805
|
+
"description": "The select's help text.",
|
|
806
|
+
"values": []
|
|
807
|
+
},
|
|
808
|
+
{
|
|
809
|
+
"name": "disabled",
|
|
810
|
+
"description": "Disables the select.",
|
|
811
|
+
"values": []
|
|
812
|
+
},
|
|
813
|
+
{
|
|
814
|
+
"name": "required",
|
|
815
|
+
"description": "Makes the select a required field.",
|
|
816
|
+
"values": []
|
|
817
|
+
},
|
|
818
|
+
{
|
|
819
|
+
"name": "clearable",
|
|
820
|
+
"description": "Shows a clear button when a color is selected.",
|
|
821
|
+
"values": []
|
|
822
|
+
}
|
|
823
|
+
],
|
|
824
|
+
"references": [
|
|
825
|
+
{
|
|
826
|
+
"name": "Documentation",
|
|
827
|
+
"url": "https://zinc.style/components/color-select"
|
|
828
|
+
}
|
|
829
|
+
]
|
|
830
|
+
},
|
|
788
831
|
{
|
|
789
832
|
"name": "zn-cols",
|
|
790
833
|
"description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
|