@kubex/zinc 1.1.155 → 1.1.157
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 +1000 -975
- package/dist/vscode.html-custom-data.json +60 -60
- package/dist/web-types.json +137 -137
- package/dist/zn.d.ts +8 -0
- package/dist/zn.min.js +27 -23
- package/docs/pages/components/select.md +16 -0
- package/package.json +1 -1
- package/src/components/button/button.component.ts +10 -6
- package/src/components/button/button.scss +10 -2
- package/src/components/inline-edit/inline-edit.component.ts +2 -2
- package/src/components/inline-edit/inline-edit.scss +11 -1
- package/src/components/inline-edit/inline-edit.test.ts +24 -0
- package/src/components/reveal/reveal.component.ts +14 -0
- package/src/components/reveal/reveal.scss +10 -1
- package/src/components/reveal/reveal.test.ts +36 -0
- package/src/components/select/select.component.ts +21 -2
- package/src/components/select/select.scss +3 -2
- package/src/components/select/select.test.ts +59 -0
|
@@ -13,6 +13,17 @@
|
|
|
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
|
+
},
|
|
16
27
|
{
|
|
17
28
|
"name": "zn-alert",
|
|
18
29
|
"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.",
|
|
@@ -53,17 +64,6 @@
|
|
|
53
64
|
}
|
|
54
65
|
]
|
|
55
66
|
},
|
|
56
|
-
{
|
|
57
|
-
"name": "zn-action-bar",
|
|
58
|
-
"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.",
|
|
59
|
-
"attributes": [],
|
|
60
|
-
"references": [
|
|
61
|
-
{
|
|
62
|
-
"name": "Documentation",
|
|
63
|
-
"url": "https://zinc.style/components/action-bar"
|
|
64
|
-
}
|
|
65
|
-
]
|
|
66
|
-
},
|
|
67
67
|
{
|
|
68
68
|
"name": "zn-animated-button",
|
|
69
69
|
"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",
|
|
@@ -5241,55 +5241,6 @@
|
|
|
5241
5241
|
}
|
|
5242
5242
|
]
|
|
5243
5243
|
},
|
|
5244
|
-
{
|
|
5245
|
-
"name": "zn-translation-group",
|
|
5246
|
-
"description": "Puts several zn-translations fields behind one language select, so a whole form's worth of copy is\ntranslated a language at a time.\n---\n\n\n### **Events:**\n - **zn-language-change** - Emitted when the active language changes. Detail: `{ language: string }`.\n\n### **Slots:**\n - _default_ - The `zn-translations` fields the select drives.\n- **actions** - Buttons for the bottom of the panel, on the white body rather than the grey footer. They sit on the right, as zinc's form action rows do; `align=\"start\"` moves one to the left. Write them in the order they should be read — the sides are set by CSS ordering, so markup order is what a keyboard follows.\n- **footer** - Content displayed in the grey panel footer.\n\n### **CSS Properties:**\n - **--zn-panel-basis** - The flex-basis of the panel. Can be set using the basis-px attribute. _(default: undefined)_\n- **--zn-panel-header-padding** - Padding around the header row. Defaults to `--zn-base-gap`. _(default: undefined)_\n- **--zn-panel-footer-padding** - Padding around the footer row. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **form-group** - The form group holding the caption, the language select and the fields.\n- **actions** - The row of buttons at the bottom of the body.\n- **language-field** - The select that chooses the language every child is editing, in the group's chip slot.\n- **language-select** - The select itself.\n- **header** - The header region, when a caption or actions are given.\n- **header-content** - The padded row inside the header, forwarded from zn-header.\n- **footer** - The footer region, when the footer slot is filled.",
|
|
5247
|
-
"attributes": [
|
|
5248
|
-
{
|
|
5249
|
-
"name": "label",
|
|
5250
|
-
"description": "The form group's label. An alias for the inherited `caption`, which wins where both are set.",
|
|
5251
|
-
"values": []
|
|
5252
|
-
},
|
|
5253
|
-
{
|
|
5254
|
-
"name": "help-text",
|
|
5255
|
-
"description": "Sits under the label, above the language select, as help text does in any other form group.",
|
|
5256
|
-
"values": []
|
|
5257
|
-
},
|
|
5258
|
-
{
|
|
5259
|
-
"name": "inline",
|
|
5260
|
-
"description": "Drops the panel chrome — border, background and padding — so the group reads as a section of the surrounding form\nrather than a panel of its own. For groups nested inside another panel, where the fields would otherwise sit\nindented behind a second border.",
|
|
5261
|
-
"values": []
|
|
5262
|
-
},
|
|
5263
|
-
{
|
|
5264
|
-
"name": "language-label",
|
|
5265
|
-
"description": "The select's accessible name. Not shown — the caption is what names the section on screen — but read out by a\nscreen reader, which has nothing else to go on once the visible label is gone.",
|
|
5266
|
-
"values": []
|
|
5267
|
-
},
|
|
5268
|
-
{
|
|
5269
|
-
"name": "languages",
|
|
5270
|
-
"description": "The languages on offer, as language code to display name — `{\"en\": \"English\", \"fr\": \"French\"}`. Writing the code\nas the name (`{\"en\": \"EN\"}`) is also accepted. `en` is the language every other one falls back to. Set on every\nchild, so they do not need their own copy.",
|
|
5271
|
-
"values": [{ "name": "Record<string" }, { "name": "string>" }]
|
|
5272
|
-
},
|
|
5273
|
-
{ "name": "basis-px", "values": [] },
|
|
5274
|
-
{ "name": "caption", "values": [] },
|
|
5275
|
-
{ "name": "icon", "values": [] },
|
|
5276
|
-
{ "name": "tabbed", "values": [] },
|
|
5277
|
-
{ "name": "header-borderless", "values": [] },
|
|
5278
|
-
{ "name": "cosmic", "values": [] },
|
|
5279
|
-
{ "name": "flush", "values": [] },
|
|
5280
|
-
{ "name": "flush-x", "values": [] },
|
|
5281
|
-
{ "name": "flush-y", "values": [] },
|
|
5282
|
-
{ "name": "flush-footer", "values": [] },
|
|
5283
|
-
{ "name": "transparent", "values": [] },
|
|
5284
|
-
{ "name": "shadow", "values": [] }
|
|
5285
|
-
],
|
|
5286
|
-
"references": [
|
|
5287
|
-
{
|
|
5288
|
-
"name": "Documentation",
|
|
5289
|
-
"url": "https://zinc.style/components/translation-group"
|
|
5290
|
-
}
|
|
5291
|
-
]
|
|
5292
|
-
},
|
|
5293
5244
|
{
|
|
5294
5245
|
"name": "zn-translations",
|
|
5295
5246
|
"description": "Collects one piece of text in several languages, one language at a time.\n---\n\n\n### **Events:**\n - **zn-change** - Emitted when a translation's value changes.\n- **zn-input** - Emitted when a translation receives input.\n\n### **Methods:**\n - **setActiveLanguage(language: _string_)** - Sets the active language externally. Used by zn-translation-group. Browsing to a language does not create a key\nfor it — an untouched language stays absent from `values` so it is not submitted as an empty translation.\n- **getActiveLanguage(): _string_** - Returns the currently active language.\n- **addLanguageKey(languageCode: _string_)** - Adds a language key to this component's values if not already present. Used by zn-translation-group.\n- **getValueLanguages(): _string[]_** - Returns all language codes that have values.\n- **hasTranslation(language: _string_): _boolean_** - Whether the language carries a translation of its own, rather than falling back to English.\n\n### **Slots:**\n - **label** - The field's label. Alternatively, use the `label` attribute.\n- **help-text** - Text describing how to fill the field in, shown below it and shared by every language. Alternatively, use the `help-text` attribute.\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, the language select, the field and the help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The wrapper around the field being edited.\n- **form-control-help-text** - The help text's wrapper.\n- **language-select** - The select that chooses the language being edited.",
|
|
@@ -5422,6 +5373,55 @@
|
|
|
5422
5373
|
}
|
|
5423
5374
|
]
|
|
5424
5375
|
},
|
|
5376
|
+
{
|
|
5377
|
+
"name": "zn-translation-group",
|
|
5378
|
+
"description": "Puts several zn-translations fields behind one language select, so a whole form's worth of copy is\ntranslated a language at a time.\n---\n\n\n### **Events:**\n - **zn-language-change** - Emitted when the active language changes. Detail: `{ language: string }`.\n\n### **Slots:**\n - _default_ - The `zn-translations` fields the select drives.\n- **actions** - Buttons for the bottom of the panel, on the white body rather than the grey footer. They sit on the right, as zinc's form action rows do; `align=\"start\"` moves one to the left. Write them in the order they should be read — the sides are set by CSS ordering, so markup order is what a keyboard follows.\n- **footer** - Content displayed in the grey panel footer.\n\n### **CSS Properties:**\n - **--zn-panel-basis** - The flex-basis of the panel. Can be set using the basis-px attribute. _(default: undefined)_\n- **--zn-panel-header-padding** - Padding around the header row. Defaults to `--zn-base-gap`. _(default: undefined)_\n- **--zn-panel-footer-padding** - Padding around the footer row. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **form-group** - The form group holding the caption, the language select and the fields.\n- **actions** - The row of buttons at the bottom of the body.\n- **language-field** - The select that chooses the language every child is editing, in the group's chip slot.\n- **language-select** - The select itself.\n- **header** - The header region, when a caption or actions are given.\n- **header-content** - The padded row inside the header, forwarded from zn-header.\n- **footer** - The footer region, when the footer slot is filled.",
|
|
5379
|
+
"attributes": [
|
|
5380
|
+
{
|
|
5381
|
+
"name": "label",
|
|
5382
|
+
"description": "The form group's label. An alias for the inherited `caption`, which wins where both are set.",
|
|
5383
|
+
"values": []
|
|
5384
|
+
},
|
|
5385
|
+
{
|
|
5386
|
+
"name": "help-text",
|
|
5387
|
+
"description": "Sits under the label, above the language select, as help text does in any other form group.",
|
|
5388
|
+
"values": []
|
|
5389
|
+
},
|
|
5390
|
+
{
|
|
5391
|
+
"name": "inline",
|
|
5392
|
+
"description": "Drops the panel chrome — border, background and padding — so the group reads as a section of the surrounding form\nrather than a panel of its own. For groups nested inside another panel, where the fields would otherwise sit\nindented behind a second border.",
|
|
5393
|
+
"values": []
|
|
5394
|
+
},
|
|
5395
|
+
{
|
|
5396
|
+
"name": "language-label",
|
|
5397
|
+
"description": "The select's accessible name. Not shown — the caption is what names the section on screen — but read out by a\nscreen reader, which has nothing else to go on once the visible label is gone.",
|
|
5398
|
+
"values": []
|
|
5399
|
+
},
|
|
5400
|
+
{
|
|
5401
|
+
"name": "languages",
|
|
5402
|
+
"description": "The languages on offer, as language code to display name — `{\"en\": \"English\", \"fr\": \"French\"}`. Writing the code\nas the name (`{\"en\": \"EN\"}`) is also accepted. `en` is the language every other one falls back to. Set on every\nchild, so they do not need their own copy.",
|
|
5403
|
+
"values": [{ "name": "Record<string" }, { "name": "string>" }]
|
|
5404
|
+
},
|
|
5405
|
+
{ "name": "basis-px", "values": [] },
|
|
5406
|
+
{ "name": "caption", "values": [] },
|
|
5407
|
+
{ "name": "icon", "values": [] },
|
|
5408
|
+
{ "name": "tabbed", "values": [] },
|
|
5409
|
+
{ "name": "header-borderless", "values": [] },
|
|
5410
|
+
{ "name": "cosmic", "values": [] },
|
|
5411
|
+
{ "name": "flush", "values": [] },
|
|
5412
|
+
{ "name": "flush-x", "values": [] },
|
|
5413
|
+
{ "name": "flush-y", "values": [] },
|
|
5414
|
+
{ "name": "flush-footer", "values": [] },
|
|
5415
|
+
{ "name": "transparent", "values": [] },
|
|
5416
|
+
{ "name": "shadow", "values": [] }
|
|
5417
|
+
],
|
|
5418
|
+
"references": [
|
|
5419
|
+
{
|
|
5420
|
+
"name": "Documentation",
|
|
5421
|
+
"url": "https://zinc.style/components/translation-group"
|
|
5422
|
+
}
|
|
5423
|
+
]
|
|
5424
|
+
},
|
|
5425
5425
|
{
|
|
5426
5426
|
"name": "zn-vertical-stepper",
|
|
5427
5427
|
"description": "Vertical steppers display a sequence of steps in a vertical layout with descriptions and optional icons.\n---\n\n\n### **Slots:**\n - **icon** - Optional slot for adding an icon or indicator before the step content.\n\n### **CSS Parts:**\n - **vs** - The main container for the vertical stepper.\n- **vs__left** - The left section containing the icon and connecting line.\n- **vs__icon** - The icon container.\n- **vs__line** - The vertical connecting line between steps.\n- **vs__right** - The right section containing caption and description text.\n- **vs__caption** - The caption/title text element.\n- **vs__description** - The description text element.",
|
package/dist/web-types.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
|
|
3
3
|
"name": "@kubex/zinc",
|
|
4
|
-
"version": "1.1.
|
|
4
|
+
"version": "1.1.157",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -15,6 +15,28 @@
|
|
|
15
15
|
"events": [],
|
|
16
16
|
"js": { "properties": [], "events": [] }
|
|
17
17
|
},
|
|
18
|
+
{
|
|
19
|
+
"name": "zn-action-bar",
|
|
20
|
+
"description": "Short summary of the component's intended use.\n\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
|
|
21
|
+
"doc-url": "",
|
|
22
|
+
"attributes": [],
|
|
23
|
+
"slots": [
|
|
24
|
+
{ "name": "", "description": "The default slot." },
|
|
25
|
+
{ "name": "example", "description": "An example slot." }
|
|
26
|
+
],
|
|
27
|
+
"events": [
|
|
28
|
+
{ "name": "zn-event-name", "description": "Emitted as an example." }
|
|
29
|
+
],
|
|
30
|
+
"js": {
|
|
31
|
+
"properties": [],
|
|
32
|
+
"events": [
|
|
33
|
+
{
|
|
34
|
+
"name": "zn-event-name",
|
|
35
|
+
"description": "Emitted as an example."
|
|
36
|
+
}
|
|
37
|
+
]
|
|
38
|
+
}
|
|
39
|
+
},
|
|
18
40
|
{
|
|
19
41
|
"name": "zn-alert",
|
|
20
42
|
"description": "Short summary of the component's intended use.\n\n---\n\n\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.",
|
|
@@ -83,28 +105,6 @@
|
|
|
83
105
|
]
|
|
84
106
|
}
|
|
85
107
|
},
|
|
86
|
-
{
|
|
87
|
-
"name": "zn-action-bar",
|
|
88
|
-
"description": "Short summary of the component's intended use.\n\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
|
|
89
|
-
"doc-url": "",
|
|
90
|
-
"attributes": [],
|
|
91
|
-
"slots": [
|
|
92
|
-
{ "name": "", "description": "The default slot." },
|
|
93
|
-
{ "name": "example", "description": "An example slot." }
|
|
94
|
-
],
|
|
95
|
-
"events": [
|
|
96
|
-
{ "name": "zn-event-name", "description": "Emitted as an example." }
|
|
97
|
-
],
|
|
98
|
-
"js": {
|
|
99
|
-
"properties": [],
|
|
100
|
-
"events": [
|
|
101
|
-
{
|
|
102
|
-
"name": "zn-event-name",
|
|
103
|
-
"description": "Emitted as an example."
|
|
104
|
-
}
|
|
105
|
-
]
|
|
106
|
-
}
|
|
107
|
-
},
|
|
108
108
|
{
|
|
109
109
|
"name": "zn-animated-button",
|
|
110
110
|
"description": "\n\n---\n\n\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",
|
|
@@ -12373,120 +12373,6 @@
|
|
|
12373
12373
|
]
|
|
12374
12374
|
}
|
|
12375
12375
|
},
|
|
12376
|
-
{
|
|
12377
|
-
"name": "zn-translation-group",
|
|
12378
|
-
"description": "Puts several zn-translations fields behind one language select, so a whole form's worth of copy is\ntranslated a language at a time.\n\n---\n\n\n### **Events:**\n - **zn-language-change** - Emitted when the active language changes. Detail: `{ language: string }`.\n\n### **Slots:**\n - _default_ - The `zn-translations` fields the select drives.\n- **actions** - Buttons for the bottom of the panel, on the white body rather than the grey footer. They sit on the right, as zinc's form action rows do; `align=\"start\"` moves one to the left. Write them in the order they should be read — the sides are set by CSS ordering, so markup order is what a keyboard follows.\n- **footer** - Content displayed in the grey panel footer.\n\n### **CSS Properties:**\n - **--zn-panel-basis** - The flex-basis of the panel. Can be set using the basis-px attribute. _(default: undefined)_\n- **--zn-panel-header-padding** - Padding around the header row. Defaults to `--zn-base-gap`. _(default: undefined)_\n- **--zn-panel-footer-padding** - Padding around the footer row. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **form-group** - The form group holding the caption, the language select and the fields.\n- **actions** - The row of buttons at the bottom of the body.\n- **language-field** - The select that chooses the language every child is editing, in the group's chip slot.\n- **language-select** - The select itself.\n- **header** - The header region, when a caption or actions are given.\n- **header-content** - The padded row inside the header, forwarded from zn-header.\n- **footer** - The footer region, when the footer slot is filled.",
|
|
12379
|
-
"doc-url": "",
|
|
12380
|
-
"attributes": [
|
|
12381
|
-
{
|
|
12382
|
-
"name": "label",
|
|
12383
|
-
"description": "The form group's label. An alias for the inherited `caption`, which wins where both are set.",
|
|
12384
|
-
"value": { "type": "string", "default": "''" }
|
|
12385
|
-
},
|
|
12386
|
-
{
|
|
12387
|
-
"name": "help-text",
|
|
12388
|
-
"description": "Sits under the label, above the language select, as help text does in any other form group.",
|
|
12389
|
-
"value": { "type": "string", "default": "''" }
|
|
12390
|
-
},
|
|
12391
|
-
{
|
|
12392
|
-
"name": "inline",
|
|
12393
|
-
"description": "Drops the panel chrome — border, background and padding — so the group reads as a section of the surrounding form\nrather than a panel of its own. For groups nested inside another panel, where the fields would otherwise sit\nindented behind a second border.",
|
|
12394
|
-
"value": { "type": "boolean", "default": "false" }
|
|
12395
|
-
},
|
|
12396
|
-
{
|
|
12397
|
-
"name": "language-label",
|
|
12398
|
-
"description": "The select's accessible name. Not shown — the caption is what names the section on screen — but read out by a\nscreen reader, which has nothing else to go on once the visible label is gone.",
|
|
12399
|
-
"value": { "type": "string", "default": "'Edit Languages'" }
|
|
12400
|
-
},
|
|
12401
|
-
{
|
|
12402
|
-
"name": "languages",
|
|
12403
|
-
"description": "The languages on offer, as language code to display name — `{\"en\": \"English\", \"fr\": \"French\"}`. Writing the code\nas the name (`{\"en\": \"EN\"}`) is also accepted. `en` is the language every other one falls back to. Set on every\nchild, so they do not need their own copy.",
|
|
12404
|
-
"value": {
|
|
12405
|
-
"type": "Record<string, string>",
|
|
12406
|
-
"default": "{ 'en': 'EN' }"
|
|
12407
|
-
}
|
|
12408
|
-
},
|
|
12409
|
-
{ "name": "basis-px", "value": { "type": "number" } },
|
|
12410
|
-
{ "name": "caption", "value": { "type": "string" } },
|
|
12411
|
-
{ "name": "icon", "value": { "type": "string" } },
|
|
12412
|
-
{ "name": "tabbed", "value": { "type": "boolean" } },
|
|
12413
|
-
{ "name": "header-borderless", "value": { "type": "boolean" } },
|
|
12414
|
-
{ "name": "cosmic", "value": { "type": "boolean" } },
|
|
12415
|
-
{ "name": "flush", "value": { "type": "boolean" } },
|
|
12416
|
-
{ "name": "flush-x", "value": { "type": "boolean" } },
|
|
12417
|
-
{ "name": "flush-y", "value": { "type": "boolean" } },
|
|
12418
|
-
{ "name": "flush-footer", "value": { "type": "boolean" } },
|
|
12419
|
-
{ "name": "transparent", "value": { "type": "boolean" } },
|
|
12420
|
-
{ "name": "shadow", "value": { "type": "boolean" } }
|
|
12421
|
-
],
|
|
12422
|
-
"slots": [
|
|
12423
|
-
{
|
|
12424
|
-
"name": "",
|
|
12425
|
-
"description": "The `zn-translations` fields the select drives."
|
|
12426
|
-
},
|
|
12427
|
-
{
|
|
12428
|
-
"name": "actions",
|
|
12429
|
-
"description": "Buttons for the bottom of the panel, on the white body rather than the grey footer. They sit on the right, as zinc's form action rows do; `align=\"start\"` moves one to the left. Write them in the order they should be read — the sides are set by CSS ordering, so markup order is what a keyboard follows."
|
|
12430
|
-
},
|
|
12431
|
-
{
|
|
12432
|
-
"name": "footer",
|
|
12433
|
-
"description": "Content displayed in the grey panel footer."
|
|
12434
|
-
}
|
|
12435
|
-
],
|
|
12436
|
-
"events": [
|
|
12437
|
-
{
|
|
12438
|
-
"name": "zn-language-change",
|
|
12439
|
-
"description": "Emitted when the active language changes. Detail: `{ language: string }`."
|
|
12440
|
-
}
|
|
12441
|
-
],
|
|
12442
|
-
"js": {
|
|
12443
|
-
"properties": [
|
|
12444
|
-
{
|
|
12445
|
-
"name": "label",
|
|
12446
|
-
"description": "The form group's label. An alias for the inherited `caption`, which wins where both are set.",
|
|
12447
|
-
"type": "string"
|
|
12448
|
-
},
|
|
12449
|
-
{
|
|
12450
|
-
"name": "helpText",
|
|
12451
|
-
"description": "Sits under the label, above the language select, as help text does in any other form group.",
|
|
12452
|
-
"type": "string"
|
|
12453
|
-
},
|
|
12454
|
-
{
|
|
12455
|
-
"name": "inline",
|
|
12456
|
-
"description": "Drops the panel chrome — border, background and padding — so the group reads as a section of the surrounding form\nrather than a panel of its own. For groups nested inside another panel, where the fields would otherwise sit\nindented behind a second border.",
|
|
12457
|
-
"type": "boolean"
|
|
12458
|
-
},
|
|
12459
|
-
{
|
|
12460
|
-
"name": "languageLabel",
|
|
12461
|
-
"description": "The select's accessible name. Not shown — the caption is what names the section on screen — but read out by a\nscreen reader, which has nothing else to go on once the visible label is gone.",
|
|
12462
|
-
"type": "string"
|
|
12463
|
-
},
|
|
12464
|
-
{
|
|
12465
|
-
"name": "languages",
|
|
12466
|
-
"description": "The languages on offer, as language code to display name — `{\"en\": \"English\", \"fr\": \"French\"}`. Writing the code\nas the name (`{\"en\": \"EN\"}`) is also accepted. `en` is the language every other one falls back to. Set on every\nchild, so they do not need their own copy.",
|
|
12467
|
-
"type": "Record<string, string>"
|
|
12468
|
-
},
|
|
12469
|
-
{ "name": "basis", "type": "number" },
|
|
12470
|
-
{ "name": "caption", "type": "string" },
|
|
12471
|
-
{ "name": "icon", "type": "string" },
|
|
12472
|
-
{ "name": "tabbed", "type": "boolean" },
|
|
12473
|
-
{ "name": "headerBorderless", "type": "boolean" },
|
|
12474
|
-
{ "name": "cosmic", "type": "boolean" },
|
|
12475
|
-
{ "name": "flush", "type": "boolean" },
|
|
12476
|
-
{ "name": "flushX", "type": "boolean" },
|
|
12477
|
-
{ "name": "flushY", "type": "boolean" },
|
|
12478
|
-
{ "name": "flushFooter", "type": "boolean" },
|
|
12479
|
-
{ "name": "transparent", "type": "boolean" },
|
|
12480
|
-
{ "name": "shadow", "type": "boolean" }
|
|
12481
|
-
],
|
|
12482
|
-
"events": [
|
|
12483
|
-
{
|
|
12484
|
-
"name": "zn-language-change",
|
|
12485
|
-
"description": "Emitted when the active language changes. Detail: `{ language: string }`."
|
|
12486
|
-
}
|
|
12487
|
-
]
|
|
12488
|
-
}
|
|
12489
|
-
},
|
|
12490
12376
|
{
|
|
12491
12377
|
"name": "zn-translations",
|
|
12492
12378
|
"description": "Collects one piece of text in several languages, one language at a time.\n\n---\n\n\n### **Events:**\n - **zn-change** - Emitted when a translation's value changes.\n- **zn-input** - Emitted when a translation receives input.\n\n### **Methods:**\n - **setActiveLanguage(language: _string_)** - Sets the active language externally. Used by zn-translation-group. Browsing to a language does not create a key\nfor it — an untouched language stays absent from `values` so it is not submitted as an empty translation.\n- **getActiveLanguage(): _string_** - Returns the currently active language.\n- **addLanguageKey(languageCode: _string_)** - Adds a language key to this component's values if not already present. Used by zn-translation-group.\n- **getValueLanguages(): _string[]_** - Returns all language codes that have values.\n- **hasTranslation(language: _string_): _boolean_** - Whether the language carries a translation of its own, rather than falling back to English.\n\n### **Slots:**\n - **label** - The field's label. Alternatively, use the `label` attribute.\n- **help-text** - Text describing how to fill the field in, shown below it and shared by every language. Alternatively, use the `help-text` attribute.\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, the language select, the field and the help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The wrapper around the field being edited.\n- **form-control-help-text** - The help text's wrapper.\n- **language-select** - The select that chooses the language being edited.",
|
|
@@ -12776,6 +12662,120 @@
|
|
|
12776
12662
|
]
|
|
12777
12663
|
}
|
|
12778
12664
|
},
|
|
12665
|
+
{
|
|
12666
|
+
"name": "zn-translation-group",
|
|
12667
|
+
"description": "Puts several zn-translations fields behind one language select, so a whole form's worth of copy is\ntranslated a language at a time.\n\n---\n\n\n### **Events:**\n - **zn-language-change** - Emitted when the active language changes. Detail: `{ language: string }`.\n\n### **Slots:**\n - _default_ - The `zn-translations` fields the select drives.\n- **actions** - Buttons for the bottom of the panel, on the white body rather than the grey footer. They sit on the right, as zinc's form action rows do; `align=\"start\"` moves one to the left. Write them in the order they should be read — the sides are set by CSS ordering, so markup order is what a keyboard follows.\n- **footer** - Content displayed in the grey panel footer.\n\n### **CSS Properties:**\n - **--zn-panel-basis** - The flex-basis of the panel. Can be set using the basis-px attribute. _(default: undefined)_\n- **--zn-panel-header-padding** - Padding around the header row. Defaults to `--zn-base-gap`. _(default: undefined)_\n- **--zn-panel-footer-padding** - Padding around the footer row. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **form-group** - The form group holding the caption, the language select and the fields.\n- **actions** - The row of buttons at the bottom of the body.\n- **language-field** - The select that chooses the language every child is editing, in the group's chip slot.\n- **language-select** - The select itself.\n- **header** - The header region, when a caption or actions are given.\n- **header-content** - The padded row inside the header, forwarded from zn-header.\n- **footer** - The footer region, when the footer slot is filled.",
|
|
12668
|
+
"doc-url": "",
|
|
12669
|
+
"attributes": [
|
|
12670
|
+
{
|
|
12671
|
+
"name": "label",
|
|
12672
|
+
"description": "The form group's label. An alias for the inherited `caption`, which wins where both are set.",
|
|
12673
|
+
"value": { "type": "string", "default": "''" }
|
|
12674
|
+
},
|
|
12675
|
+
{
|
|
12676
|
+
"name": "help-text",
|
|
12677
|
+
"description": "Sits under the label, above the language select, as help text does in any other form group.",
|
|
12678
|
+
"value": { "type": "string", "default": "''" }
|
|
12679
|
+
},
|
|
12680
|
+
{
|
|
12681
|
+
"name": "inline",
|
|
12682
|
+
"description": "Drops the panel chrome — border, background and padding — so the group reads as a section of the surrounding form\nrather than a panel of its own. For groups nested inside another panel, where the fields would otherwise sit\nindented behind a second border.",
|
|
12683
|
+
"value": { "type": "boolean", "default": "false" }
|
|
12684
|
+
},
|
|
12685
|
+
{
|
|
12686
|
+
"name": "language-label",
|
|
12687
|
+
"description": "The select's accessible name. Not shown — the caption is what names the section on screen — but read out by a\nscreen reader, which has nothing else to go on once the visible label is gone.",
|
|
12688
|
+
"value": { "type": "string", "default": "'Edit Languages'" }
|
|
12689
|
+
},
|
|
12690
|
+
{
|
|
12691
|
+
"name": "languages",
|
|
12692
|
+
"description": "The languages on offer, as language code to display name — `{\"en\": \"English\", \"fr\": \"French\"}`. Writing the code\nas the name (`{\"en\": \"EN\"}`) is also accepted. `en` is the language every other one falls back to. Set on every\nchild, so they do not need their own copy.",
|
|
12693
|
+
"value": {
|
|
12694
|
+
"type": "Record<string, string>",
|
|
12695
|
+
"default": "{ 'en': 'EN' }"
|
|
12696
|
+
}
|
|
12697
|
+
},
|
|
12698
|
+
{ "name": "basis-px", "value": { "type": "number" } },
|
|
12699
|
+
{ "name": "caption", "value": { "type": "string" } },
|
|
12700
|
+
{ "name": "icon", "value": { "type": "string" } },
|
|
12701
|
+
{ "name": "tabbed", "value": { "type": "boolean" } },
|
|
12702
|
+
{ "name": "header-borderless", "value": { "type": "boolean" } },
|
|
12703
|
+
{ "name": "cosmic", "value": { "type": "boolean" } },
|
|
12704
|
+
{ "name": "flush", "value": { "type": "boolean" } },
|
|
12705
|
+
{ "name": "flush-x", "value": { "type": "boolean" } },
|
|
12706
|
+
{ "name": "flush-y", "value": { "type": "boolean" } },
|
|
12707
|
+
{ "name": "flush-footer", "value": { "type": "boolean" } },
|
|
12708
|
+
{ "name": "transparent", "value": { "type": "boolean" } },
|
|
12709
|
+
{ "name": "shadow", "value": { "type": "boolean" } }
|
|
12710
|
+
],
|
|
12711
|
+
"slots": [
|
|
12712
|
+
{
|
|
12713
|
+
"name": "",
|
|
12714
|
+
"description": "The `zn-translations` fields the select drives."
|
|
12715
|
+
},
|
|
12716
|
+
{
|
|
12717
|
+
"name": "actions",
|
|
12718
|
+
"description": "Buttons for the bottom of the panel, on the white body rather than the grey footer. They sit on the right, as zinc's form action rows do; `align=\"start\"` moves one to the left. Write them in the order they should be read — the sides are set by CSS ordering, so markup order is what a keyboard follows."
|
|
12719
|
+
},
|
|
12720
|
+
{
|
|
12721
|
+
"name": "footer",
|
|
12722
|
+
"description": "Content displayed in the grey panel footer."
|
|
12723
|
+
}
|
|
12724
|
+
],
|
|
12725
|
+
"events": [
|
|
12726
|
+
{
|
|
12727
|
+
"name": "zn-language-change",
|
|
12728
|
+
"description": "Emitted when the active language changes. Detail: `{ language: string }`."
|
|
12729
|
+
}
|
|
12730
|
+
],
|
|
12731
|
+
"js": {
|
|
12732
|
+
"properties": [
|
|
12733
|
+
{
|
|
12734
|
+
"name": "label",
|
|
12735
|
+
"description": "The form group's label. An alias for the inherited `caption`, which wins where both are set.",
|
|
12736
|
+
"type": "string"
|
|
12737
|
+
},
|
|
12738
|
+
{
|
|
12739
|
+
"name": "helpText",
|
|
12740
|
+
"description": "Sits under the label, above the language select, as help text does in any other form group.",
|
|
12741
|
+
"type": "string"
|
|
12742
|
+
},
|
|
12743
|
+
{
|
|
12744
|
+
"name": "inline",
|
|
12745
|
+
"description": "Drops the panel chrome — border, background and padding — so the group reads as a section of the surrounding form\nrather than a panel of its own. For groups nested inside another panel, where the fields would otherwise sit\nindented behind a second border.",
|
|
12746
|
+
"type": "boolean"
|
|
12747
|
+
},
|
|
12748
|
+
{
|
|
12749
|
+
"name": "languageLabel",
|
|
12750
|
+
"description": "The select's accessible name. Not shown — the caption is what names the section on screen — but read out by a\nscreen reader, which has nothing else to go on once the visible label is gone.",
|
|
12751
|
+
"type": "string"
|
|
12752
|
+
},
|
|
12753
|
+
{
|
|
12754
|
+
"name": "languages",
|
|
12755
|
+
"description": "The languages on offer, as language code to display name — `{\"en\": \"English\", \"fr\": \"French\"}`. Writing the code\nas the name (`{\"en\": \"EN\"}`) is also accepted. `en` is the language every other one falls back to. Set on every\nchild, so they do not need their own copy.",
|
|
12756
|
+
"type": "Record<string, string>"
|
|
12757
|
+
},
|
|
12758
|
+
{ "name": "basis", "type": "number" },
|
|
12759
|
+
{ "name": "caption", "type": "string" },
|
|
12760
|
+
{ "name": "icon", "type": "string" },
|
|
12761
|
+
{ "name": "tabbed", "type": "boolean" },
|
|
12762
|
+
{ "name": "headerBorderless", "type": "boolean" },
|
|
12763
|
+
{ "name": "cosmic", "type": "boolean" },
|
|
12764
|
+
{ "name": "flush", "type": "boolean" },
|
|
12765
|
+
{ "name": "flushX", "type": "boolean" },
|
|
12766
|
+
{ "name": "flushY", "type": "boolean" },
|
|
12767
|
+
{ "name": "flushFooter", "type": "boolean" },
|
|
12768
|
+
{ "name": "transparent", "type": "boolean" },
|
|
12769
|
+
{ "name": "shadow", "type": "boolean" }
|
|
12770
|
+
],
|
|
12771
|
+
"events": [
|
|
12772
|
+
{
|
|
12773
|
+
"name": "zn-language-change",
|
|
12774
|
+
"description": "Emitted when the active language changes. Detail: `{ language: string }`."
|
|
12775
|
+
}
|
|
12776
|
+
]
|
|
12777
|
+
}
|
|
12778
|
+
},
|
|
12779
12779
|
{
|
|
12780
12780
|
"name": "zn-vertical-stepper",
|
|
12781
12781
|
"description": "Vertical steppers display a sequence of steps in a vertical layout with descriptions and optional icons.\n\n---\n\n\n### **Slots:**\n - **icon** - Optional slot for adding an icon or indicator before the step content.\n\n### **CSS Parts:**\n - **vs** - The main container for the vertical stepper.\n- **vs__left** - The left section containing the icon and connecting line.\n- **vs__icon** - The icon container.\n- **vs__line** - The vertical connecting line between steps.\n- **vs__right** - The right section containing caption and description text.\n- **vs__caption** - The caption/title text element.\n- **vs__description** - The description text element.",
|
package/dist/zn.d.ts
CHANGED
|
@@ -2954,6 +2954,12 @@ declare module "components/select/select.component" {
|
|
|
2954
2954
|
private handleSearchInput;
|
|
2955
2955
|
/** Filters visible options based on the current search query */
|
|
2956
2956
|
private filterOptions;
|
|
2957
|
+
/**
|
|
2958
|
+
* Nothing for the user to pick: either the option list is empty or every option is filtered out.
|
|
2959
|
+
* The search paths track this themselves, so this covers opening a dropdown with no query.
|
|
2960
|
+
*/
|
|
2961
|
+
private updateEmptyState;
|
|
2962
|
+
private get emptyStateText();
|
|
2957
2963
|
/** Clears the search query and shows all options */
|
|
2958
2964
|
private clearSearch;
|
|
2959
2965
|
private updateOptGroupSeparators;
|
|
@@ -9156,6 +9162,8 @@ declare module "components/reveal/reveal.component" {
|
|
|
9156
9162
|
hideDelay: number;
|
|
9157
9163
|
/** Disables click-to-toggle so the value is only revealed on hover. Clicks still bubble to the parent. */
|
|
9158
9164
|
noToggle: boolean;
|
|
9165
|
+
/** Nothing is hidden when the revealed value is what's already on show, so there is nothing to reveal. */
|
|
9166
|
+
private get _isMasked();
|
|
9159
9167
|
private _isRevealed;
|
|
9160
9168
|
private _isToggled;
|
|
9161
9169
|
private _hideTimer?;
|