@kubex/zinc 1.1.160 → 1.1.161
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 +967 -921
- package/dist/vscode.html-custom-data.json +104 -95
- package/dist/web-types.json +206 -196
- package/dist/zn.d.ts +10 -1
- package/dist/zn.min.js +71 -68
- package/package.json +1 -1
- package/src/components/button/button.component.ts +4 -0
- package/src/components/button/button.test.ts +10 -0
- package/src/components/content-block/content-block.component.ts +2 -3
- package/src/components/flow-builder/modules/flow-node/flow-node.test.ts +2 -3
- package/src/components/flow-builder/modules/flow-step-group/flow-step-group.test.ts +14 -8
- package/src/components/form-actions/form-actions.test.ts +4 -1
- package/src/components/form-group/form-group.component.ts +45 -15
- package/src/components/navbar/navbar.test.ts +3 -2
- package/src/components/page/page.component.ts +1 -1
- package/src/components/page/page.test.ts +16 -16
- package/src/components/sp/sp.test.ts +2 -2
- package/src/components/theme-editor/theme-editor.component.ts +3 -2
- package/src/components/theme-editor/theme-editor.test.ts +30 -28
- package/src/components/translation-group/translation-group.test.ts +0 -2
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.161",
|
|
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",
|
|
@@ -520,6 +520,11 @@
|
|
|
520
520
|
"description": "Accessible name for the button. Icon-only buttons fall back to `tooltip`.",
|
|
521
521
|
"value": { "type": "string" }
|
|
522
522
|
},
|
|
523
|
+
{
|
|
524
|
+
"name": "aria-pressed",
|
|
525
|
+
"description": "Toggle state, forwarded to the inner button's `aria-pressed`.",
|
|
526
|
+
"value": { "type": "'true' | 'false' | 'mixed'" }
|
|
527
|
+
},
|
|
523
528
|
{
|
|
524
529
|
"name": "auto-click",
|
|
525
530
|
"value": { "type": "boolean", "default": "false" }
|
|
@@ -648,6 +653,11 @@
|
|
|
648
653
|
"description": "Accessible name for the button. Icon-only buttons fall back to `tooltip`.",
|
|
649
654
|
"type": "string"
|
|
650
655
|
},
|
|
656
|
+
{
|
|
657
|
+
"name": "pressed",
|
|
658
|
+
"description": "Toggle state, forwarded to the inner button's `aria-pressed`.",
|
|
659
|
+
"type": "'true' | 'false' | 'mixed'"
|
|
660
|
+
},
|
|
651
661
|
{ "name": "autoClick", "type": "boolean" },
|
|
652
662
|
{ "name": "autoClickDelay", "type": "number" },
|
|
653
663
|
{ "name": "loadingText", "type": "string" },
|
|
@@ -8487,49 +8497,94 @@
|
|
|
8487
8497
|
}
|
|
8488
8498
|
},
|
|
8489
8499
|
{
|
|
8490
|
-
"name": "zn-
|
|
8491
|
-
"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.",
|
|
8500
|
+
"name": "zn-rating",
|
|
8501
|
+
"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### **Methods:**\n - **checkValidity(): _boolean_** - Checks the validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity()** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n- **help-text** - Text that describes how to use the rating. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n- **--preview-color** - The color of the preview value. _(default: undefined)_\n- **--preview-size** - The font size of the preview value. _(default: undefined)_\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the symbols and help text.\n- **form-control-help-text** - The help text's wrapper.\n- **base** - The component's base wrapper.\n- **preview** - The value shown next to the symbols when `preview` is enabled.",
|
|
8492
8502
|
"doc-url": "",
|
|
8493
8503
|
"attributes": [
|
|
8504
|
+
{ "name": "label", "value": { "type": "string" } },
|
|
8494
8505
|
{
|
|
8495
|
-
"name": "
|
|
8496
|
-
"
|
|
8506
|
+
"name": "help-text",
|
|
8507
|
+
"description": "The rating's help text. If you need to display HTML, use the `help-text` slot instead.",
|
|
8508
|
+
"value": { "type": "string", "default": "''" }
|
|
8497
8509
|
},
|
|
8510
|
+
{ "name": "name", "value": { "type": "string" } },
|
|
8511
|
+
{ "name": "value", "value": { "type": "number", "default": "0" } },
|
|
8512
|
+
{ "name": "max", "value": { "type": "number", "default": "5" } },
|
|
8498
8513
|
{
|
|
8499
|
-
"name": "
|
|
8500
|
-
"value": { "type": "
|
|
8514
|
+
"name": "precision",
|
|
8515
|
+
"value": { "type": "number", "default": "1" }
|
|
8501
8516
|
},
|
|
8502
8517
|
{
|
|
8503
|
-
"name": "
|
|
8504
|
-
"value": { "type": "
|
|
8518
|
+
"name": "readonly",
|
|
8519
|
+
"value": { "type": "boolean", "default": "false" }
|
|
8505
8520
|
},
|
|
8506
8521
|
{
|
|
8507
|
-
"name": "
|
|
8508
|
-
"value": { "type": "
|
|
8522
|
+
"name": "disabled",
|
|
8523
|
+
"value": { "type": "boolean", "default": "false" }
|
|
8509
8524
|
},
|
|
8510
8525
|
{
|
|
8511
|
-
"name": "
|
|
8512
|
-
"description": "
|
|
8526
|
+
"name": "preview",
|
|
8527
|
+
"description": "Displays the value alongside the symbols, updating live as the pointer moves across them.",
|
|
8513
8528
|
"value": { "type": "boolean", "default": "false" }
|
|
8529
|
+
},
|
|
8530
|
+
{
|
|
8531
|
+
"name": "size",
|
|
8532
|
+
"value": {
|
|
8533
|
+
"type": "'small' | 'medium' | 'large'",
|
|
8534
|
+
"default": "'medium'"
|
|
8535
|
+
}
|
|
8536
|
+
},
|
|
8537
|
+
{
|
|
8538
|
+
"name": "getSymbol",
|
|
8539
|
+
"value": { "type": "(value: number) => string" }
|
|
8514
8540
|
}
|
|
8515
8541
|
],
|
|
8516
8542
|
"slots": [
|
|
8517
8543
|
{ "name": "", "description": "The default slot." },
|
|
8518
|
-
{ "name": "example", "description": "An example slot." }
|
|
8544
|
+
{ "name": "example", "description": "An example slot." },
|
|
8545
|
+
{
|
|
8546
|
+
"name": "help-text",
|
|
8547
|
+
"description": "Text that describes how to use the rating. Alternatively, you can use the `help-text` attribute."
|
|
8548
|
+
}
|
|
8519
8549
|
],
|
|
8520
8550
|
"events": [
|
|
8521
8551
|
{ "name": "zn-event-name", "description": "Emitted as an example." }
|
|
8522
8552
|
],
|
|
8523
8553
|
"js": {
|
|
8524
8554
|
"properties": [
|
|
8525
|
-
{ "name": "
|
|
8526
|
-
{ "name": "
|
|
8527
|
-
{ "name": "
|
|
8528
|
-
{ "name": "hideDelay", "type": "number" },
|
|
8555
|
+
{ "name": "rating", "type": "HTMLElement" },
|
|
8556
|
+
{ "name": "symbols", "type": "HTMLElement" },
|
|
8557
|
+
{ "name": "label", "type": "string" },
|
|
8529
8558
|
{
|
|
8530
|
-
"name": "
|
|
8531
|
-
"description": "
|
|
8559
|
+
"name": "helpText",
|
|
8560
|
+
"description": "The rating's help text. If you need to display HTML, use the `help-text` slot instead.",
|
|
8561
|
+
"type": "string"
|
|
8562
|
+
},
|
|
8563
|
+
{ "name": "name", "type": "string" },
|
|
8564
|
+
{ "name": "value", "type": "number" },
|
|
8565
|
+
{
|
|
8566
|
+
"name": "defaultValue",
|
|
8567
|
+
"description": "The default value of the form control. Primarily used for resetting the form control.",
|
|
8568
|
+
"type": "number"
|
|
8569
|
+
},
|
|
8570
|
+
{ "name": "max", "type": "number" },
|
|
8571
|
+
{ "name": "precision", "type": "number" },
|
|
8572
|
+
{ "name": "readonly", "type": "boolean" },
|
|
8573
|
+
{ "name": "disabled", "type": "boolean" },
|
|
8574
|
+
{
|
|
8575
|
+
"name": "preview",
|
|
8576
|
+
"description": "Displays the value alongside the symbols, updating live as the pointer moves across them.",
|
|
8532
8577
|
"type": "boolean"
|
|
8578
|
+
},
|
|
8579
|
+
{ "name": "size", "type": "'small' | 'medium' | 'large'" },
|
|
8580
|
+
{ "name": "getSymbol", "type": "(value: number) => string" },
|
|
8581
|
+
{
|
|
8582
|
+
"name": "validity",
|
|
8583
|
+
"description": "Gets the validity state object"
|
|
8584
|
+
},
|
|
8585
|
+
{
|
|
8586
|
+
"name": "validationMessage",
|
|
8587
|
+
"description": "Gets the validation message"
|
|
8533
8588
|
}
|
|
8534
8589
|
],
|
|
8535
8590
|
"events": [
|
|
@@ -8689,94 +8744,49 @@
|
|
|
8689
8744
|
}
|
|
8690
8745
|
},
|
|
8691
8746
|
{
|
|
8692
|
-
"name": "zn-
|
|
8693
|
-
"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### **
|
|
8747
|
+
"name": "zn-reveal",
|
|
8748
|
+
"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.",
|
|
8694
8749
|
"doc-url": "",
|
|
8695
8750
|
"attributes": [
|
|
8696
|
-
{ "name": "label", "value": { "type": "string" } },
|
|
8697
8751
|
{
|
|
8698
|
-
"name": "
|
|
8699
|
-
"
|
|
8700
|
-
"value": { "type": "string", "default": "''" }
|
|
8752
|
+
"name": "duration",
|
|
8753
|
+
"value": { "type": "number", "default": "2000" }
|
|
8701
8754
|
},
|
|
8702
|
-
{ "name": "name", "value": { "type": "string" } },
|
|
8703
|
-
{ "name": "value", "value": { "type": "number", "default": "0" } },
|
|
8704
|
-
{ "name": "max", "value": { "type": "number", "default": "5" } },
|
|
8705
8755
|
{
|
|
8706
|
-
"name": "
|
|
8707
|
-
"value": { "type": "
|
|
8756
|
+
"name": "initial",
|
|
8757
|
+
"value": { "type": "string", "default": "''" }
|
|
8708
8758
|
},
|
|
8709
8759
|
{
|
|
8710
|
-
"name": "
|
|
8711
|
-
"value": { "type": "
|
|
8760
|
+
"name": "revealed",
|
|
8761
|
+
"value": { "type": "string", "default": "''" }
|
|
8712
8762
|
},
|
|
8713
8763
|
{
|
|
8714
|
-
"name": "
|
|
8715
|
-
"value": { "type": "
|
|
8764
|
+
"name": "hide-delay",
|
|
8765
|
+
"value": { "type": "number", "default": "150" }
|
|
8716
8766
|
},
|
|
8717
8767
|
{
|
|
8718
|
-
"name": "
|
|
8719
|
-
"description": "
|
|
8768
|
+
"name": "no-toggle",
|
|
8769
|
+
"description": "Disables click-to-toggle so the value is only revealed on hover. Clicks still bubble to the parent.",
|
|
8720
8770
|
"value": { "type": "boolean", "default": "false" }
|
|
8721
|
-
},
|
|
8722
|
-
{
|
|
8723
|
-
"name": "size",
|
|
8724
|
-
"value": {
|
|
8725
|
-
"type": "'small' | 'medium' | 'large'",
|
|
8726
|
-
"default": "'medium'"
|
|
8727
|
-
}
|
|
8728
|
-
},
|
|
8729
|
-
{
|
|
8730
|
-
"name": "getSymbol",
|
|
8731
|
-
"value": { "type": "(value: number) => string" }
|
|
8732
8771
|
}
|
|
8733
8772
|
],
|
|
8734
8773
|
"slots": [
|
|
8735
8774
|
{ "name": "", "description": "The default slot." },
|
|
8736
|
-
{ "name": "example", "description": "An example slot." }
|
|
8737
|
-
{
|
|
8738
|
-
"name": "help-text",
|
|
8739
|
-
"description": "Text that describes how to use the rating. Alternatively, you can use the `help-text` attribute."
|
|
8740
|
-
}
|
|
8775
|
+
{ "name": "example", "description": "An example slot." }
|
|
8741
8776
|
],
|
|
8742
8777
|
"events": [
|
|
8743
8778
|
{ "name": "zn-event-name", "description": "Emitted as an example." }
|
|
8744
8779
|
],
|
|
8745
8780
|
"js": {
|
|
8746
8781
|
"properties": [
|
|
8747
|
-
{ "name": "
|
|
8748
|
-
{ "name": "
|
|
8749
|
-
{ "name": "
|
|
8750
|
-
{
|
|
8751
|
-
"name": "helpText",
|
|
8752
|
-
"description": "The rating's help text. If you need to display HTML, use the `help-text` slot instead.",
|
|
8753
|
-
"type": "string"
|
|
8754
|
-
},
|
|
8755
|
-
{ "name": "name", "type": "string" },
|
|
8756
|
-
{ "name": "value", "type": "number" },
|
|
8757
|
-
{
|
|
8758
|
-
"name": "defaultValue",
|
|
8759
|
-
"description": "The default value of the form control. Primarily used for resetting the form control.",
|
|
8760
|
-
"type": "number"
|
|
8761
|
-
},
|
|
8762
|
-
{ "name": "max", "type": "number" },
|
|
8763
|
-
{ "name": "precision", "type": "number" },
|
|
8764
|
-
{ "name": "readonly", "type": "boolean" },
|
|
8765
|
-
{ "name": "disabled", "type": "boolean" },
|
|
8782
|
+
{ "name": "duration", "type": "number" },
|
|
8783
|
+
{ "name": "initial", "type": "string" },
|
|
8784
|
+
{ "name": "revealed", "type": "string" },
|
|
8785
|
+
{ "name": "hideDelay", "type": "number" },
|
|
8766
8786
|
{
|
|
8767
|
-
"name": "
|
|
8768
|
-
"description": "
|
|
8787
|
+
"name": "noToggle",
|
|
8788
|
+
"description": "Disables click-to-toggle so the value is only revealed on hover. Clicks still bubble to the parent.",
|
|
8769
8789
|
"type": "boolean"
|
|
8770
|
-
},
|
|
8771
|
-
{ "name": "size", "type": "'small' | 'medium' | 'large'" },
|
|
8772
|
-
{ "name": "getSymbol", "type": "(value: number) => string" },
|
|
8773
|
-
{
|
|
8774
|
-
"name": "validity",
|
|
8775
|
-
"description": "Gets the validity state object"
|
|
8776
|
-
},
|
|
8777
|
-
{
|
|
8778
|
-
"name": "validationMessage",
|
|
8779
|
-
"description": "Gets the validation message"
|
|
8780
8790
|
}
|
|
8781
8791
|
],
|
|
8782
8792
|
"events": [
|
|
@@ -11600,96 +11610,6 @@
|
|
|
11600
11610
|
]
|
|
11601
11611
|
}
|
|
11602
11612
|
},
|
|
11603
|
-
{
|
|
11604
|
-
"name": "zn-tile",
|
|
11605
|
-
"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.",
|
|
11606
|
-
"doc-url": "",
|
|
11607
|
-
"attributes": [
|
|
11608
|
-
{ "name": "caption", "value": { "type": "string" } },
|
|
11609
|
-
{ "name": "description", "value": { "type": "string" } },
|
|
11610
|
-
{ "name": "href", "value": { "type": "string" } },
|
|
11611
|
-
{ "name": "data-target", "value": { "type": "string" } },
|
|
11612
|
-
{ "name": "gaid", "value": { "type": "string" } },
|
|
11613
|
-
{ "name": "data-uri", "value": { "type": "string" } },
|
|
11614
|
-
{ "name": "flush", "value": { "type": "boolean" } },
|
|
11615
|
-
{ "name": "flush-x", "value": { "type": "boolean" } },
|
|
11616
|
-
{ "name": "flush-y", "value": { "type": "boolean" } },
|
|
11617
|
-
{ "name": "inline", "value": { "type": "boolean" } },
|
|
11618
|
-
{
|
|
11619
|
-
"name": "plain",
|
|
11620
|
-
"description": "Renders the caption in the normal table-content weight instead of bold.",
|
|
11621
|
-
"value": { "type": "boolean" }
|
|
11622
|
-
},
|
|
11623
|
-
{
|
|
11624
|
-
"name": "grouped",
|
|
11625
|
-
"description": "Set by `zn-tile-group` to lay the tile out as a shared-column subgrid row.",
|
|
11626
|
-
"value": { "type": "boolean" }
|
|
11627
|
-
}
|
|
11628
|
-
],
|
|
11629
|
-
"slots": [
|
|
11630
|
-
{ "name": "", "description": "The default slot." },
|
|
11631
|
-
{ "name": "example", "description": "An example slot." }
|
|
11632
|
-
],
|
|
11633
|
-
"events": [
|
|
11634
|
-
{ "name": "zn-event-name", "description": "Emitted as an example." }
|
|
11635
|
-
],
|
|
11636
|
-
"js": {
|
|
11637
|
-
"properties": [
|
|
11638
|
-
{ "name": "caption", "type": "string" },
|
|
11639
|
-
{ "name": "description", "type": "string" },
|
|
11640
|
-
{ "name": "href", "type": "string" },
|
|
11641
|
-
{ "name": "dataTarget", "type": "string" },
|
|
11642
|
-
{ "name": "gaid", "type": "string" },
|
|
11643
|
-
{ "name": "dataUri", "type": "string" },
|
|
11644
|
-
{ "name": "flush", "type": "boolean" },
|
|
11645
|
-
{ "name": "flushX", "type": "boolean" },
|
|
11646
|
-
{ "name": "flushY", "type": "boolean" },
|
|
11647
|
-
{ "name": "inline", "type": "boolean" },
|
|
11648
|
-
{
|
|
11649
|
-
"name": "plain",
|
|
11650
|
-
"description": "Renders the caption in the normal table-content weight instead of bold.",
|
|
11651
|
-
"type": "boolean"
|
|
11652
|
-
},
|
|
11653
|
-
{
|
|
11654
|
-
"name": "grouped",
|
|
11655
|
-
"description": "Set by `zn-tile-group` to lay the tile out as a shared-column subgrid row.",
|
|
11656
|
-
"type": "boolean"
|
|
11657
|
-
}
|
|
11658
|
-
],
|
|
11659
|
-
"events": [
|
|
11660
|
-
{
|
|
11661
|
-
"name": "zn-event-name",
|
|
11662
|
-
"description": "Emitted as an example."
|
|
11663
|
-
}
|
|
11664
|
-
]
|
|
11665
|
-
}
|
|
11666
|
-
},
|
|
11667
|
-
{
|
|
11668
|
-
"name": "zn-tile-group",
|
|
11669
|
-
"description": "Aligns a list of `zn-tile` rows into shared, content-driven columns so values\nand actions line up across every row, with optional dividing borders.\n\n---\n\n\n### **Slots:**\n - _default_ - One or more `zn-tile` elements.\n\n### **CSS Properties:**\n - **--zn-tile-cols** - The number of value/action columns (set automatically). _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper (the grid container).",
|
|
11670
|
-
"doc-url": "",
|
|
11671
|
-
"attributes": [
|
|
11672
|
-
{
|
|
11673
|
-
"name": "divide",
|
|
11674
|
-
"description": "Draws a dividing border between rows.",
|
|
11675
|
-
"value": { "type": "boolean", "default": "false" }
|
|
11676
|
-
}
|
|
11677
|
-
],
|
|
11678
|
-
"slots": [
|
|
11679
|
-
{ "name": "", "description": "One or more `zn-tile` elements." }
|
|
11680
|
-
],
|
|
11681
|
-
"events": [],
|
|
11682
|
-
"js": {
|
|
11683
|
-
"properties": [
|
|
11684
|
-
{
|
|
11685
|
-
"name": "divide",
|
|
11686
|
-
"description": "Draws a dividing border between rows.",
|
|
11687
|
-
"type": "boolean"
|
|
11688
|
-
}
|
|
11689
|
-
],
|
|
11690
|
-
"events": []
|
|
11691
|
-
}
|
|
11692
|
-
},
|
|
11693
11613
|
{
|
|
11694
11614
|
"name": "zn-thumbnail",
|
|
11695
11615
|
"description": "A captioned image tile — a fixed aspect-ratio preview with a title beneath it, optional\ncorner badges and actions, and an optional full-screen preview that grows out of the thumbnail.\n\n---\n\n\n### **Events:**\n - **zn-select** - Emitted when an enabled thumbnail is activated by click or keyboard. Cancelable — call `preventDefault()` to stop the preview from opening and to stop a parent `zn-thumbnail-group` from changing its selection.\n- **zn-show** - Emitted when the preview overlay starts opening.\n- **zn-close** - Emitted once the preview overlay has finished closing.\n\n### **Methods:**\n - **showPreview()** - Opens the preview overlay.\n- **hidePreview()** - Closes the preview overlay.\n\n### **Slots:**\n - _default_ - Fallback content rendered in place of the media when no `src` is set.\n- **image** - Replaces the built-in `<img>` (e.g. a video, canvas or `zn-icon`).\n- **caption** - Replaces the caption text.\n- **badge** - Content pinned to the bottom-left of the media (e.g. a play indicator). Badges take no pointer events and are held back on opacity, so they read as information about the asset rather than as something to click.\n- **actions** - Controls pinned to the bottom-right of the media (e.g. a download button). Each slotted element becomes its own chip, so several actions read as separate icons on the thumbnail rather than one grouped pill. This sits outside the thumbnail's link, so buttons and links here behave normally and never select the thumbnail or follow its `href`.\n- **preview** - Replaces the preview media (e.g. a `<video>` for the full-size asset).\n\n### **CSS Properties:**\n - **--zn-thumbnail-aspect-ratio** - Aspect ratio of the media frame. Defaults to 16 / 9. The `aspect-ratio` attribute sets this on the thumbnail itself; set the property on any ancestor (including a `zn-thumbnail-group`) to apply it to every thumbnail beneath it. _(default: undefined)_\n- **--zn-thumbnail-radius** - Corner radius of the media frame. _(default: undefined)_\n- **--zn-thumbnail-preview-aspect-ratio** - Overrides the measured aspect ratio of the preview panel. By default the panel takes the asset's own ratio so it wraps the image exactly. _(default: undefined)_\n- **--zn-thumbnail-preview-max-width** - Largest width the preview may take. Defaults to 70vw. _(default: undefined)_\n- **--zn-thumbnail-preview-max-height** - Largest height the preview may take. Defaults to 70vh. _(default: undefined)_\n- **--zn-thumbnail-preview-radius** - Corner radius of the preview panel. _(default: undefined)_\n- **--zn-thumbnail-chip-radius** - Corner radius of a badge, action or preview chip. _(default: undefined)_\n- **--zn-thumbnail-chip-background** - Background of a badge, action or preview chip. _(default: undefined)_\n- **--zn-thumbnail-chip-background-hover** - Hover background of an action or preview chip. _(default: undefined)_\n- **--zn-thumbnail-chip-color** - Foreground colour of a badge, action or preview chip. _(default: undefined)_\n- **--zn-thumbnail-chip-gap** - Gap between adjacent chips. _(default: undefined)_\n- **--zn-thumbnail-badge-opacity** - Opacity of a badge, holding it back from the action chips beside it. Defaults to 0.65. _(default: undefined)_\n- **--zn-thumbnail-selected-color** - Ring colour for the selected state. _(default: undefined)_\n- **--zn-thumbnail-active-color** - Ring colour for the active state. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **link** - The anchor (or div) covering the media and caption.\n- **media** - The fixed aspect-ratio media frame.\n- **image** - The built-in image element.\n- **overlay** - The layer holding the badge, actions and preview button.\n- **badge** - The bottom-left badge container.\n- **actions** - The bottom-right actions container.\n- **preview-button** - The built-in preview trigger, when `preview-trigger=\"button\"`.\n- **caption** - The caption beneath the media.\n- **preview** - The preview `<dialog>`.\n- **preview-backdrop** - The full-screen backdrop behind the preview.\n- **preview-frame** - The rounded panel the preview media sits in.\n- **preview-image** - The full-size image inside the preview.\n- **preview-close** - The preview's close button.",
|
|
@@ -12082,6 +12002,96 @@
|
|
|
12082
12002
|
]
|
|
12083
12003
|
}
|
|
12084
12004
|
},
|
|
12005
|
+
{
|
|
12006
|
+
"name": "zn-tile",
|
|
12007
|
+
"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.",
|
|
12008
|
+
"doc-url": "",
|
|
12009
|
+
"attributes": [
|
|
12010
|
+
{ "name": "caption", "value": { "type": "string" } },
|
|
12011
|
+
{ "name": "description", "value": { "type": "string" } },
|
|
12012
|
+
{ "name": "href", "value": { "type": "string" } },
|
|
12013
|
+
{ "name": "data-target", "value": { "type": "string" } },
|
|
12014
|
+
{ "name": "gaid", "value": { "type": "string" } },
|
|
12015
|
+
{ "name": "data-uri", "value": { "type": "string" } },
|
|
12016
|
+
{ "name": "flush", "value": { "type": "boolean" } },
|
|
12017
|
+
{ "name": "flush-x", "value": { "type": "boolean" } },
|
|
12018
|
+
{ "name": "flush-y", "value": { "type": "boolean" } },
|
|
12019
|
+
{ "name": "inline", "value": { "type": "boolean" } },
|
|
12020
|
+
{
|
|
12021
|
+
"name": "plain",
|
|
12022
|
+
"description": "Renders the caption in the normal table-content weight instead of bold.",
|
|
12023
|
+
"value": { "type": "boolean" }
|
|
12024
|
+
},
|
|
12025
|
+
{
|
|
12026
|
+
"name": "grouped",
|
|
12027
|
+
"description": "Set by `zn-tile-group` to lay the tile out as a shared-column subgrid row.",
|
|
12028
|
+
"value": { "type": "boolean" }
|
|
12029
|
+
}
|
|
12030
|
+
],
|
|
12031
|
+
"slots": [
|
|
12032
|
+
{ "name": "", "description": "The default slot." },
|
|
12033
|
+
{ "name": "example", "description": "An example slot." }
|
|
12034
|
+
],
|
|
12035
|
+
"events": [
|
|
12036
|
+
{ "name": "zn-event-name", "description": "Emitted as an example." }
|
|
12037
|
+
],
|
|
12038
|
+
"js": {
|
|
12039
|
+
"properties": [
|
|
12040
|
+
{ "name": "caption", "type": "string" },
|
|
12041
|
+
{ "name": "description", "type": "string" },
|
|
12042
|
+
{ "name": "href", "type": "string" },
|
|
12043
|
+
{ "name": "dataTarget", "type": "string" },
|
|
12044
|
+
{ "name": "gaid", "type": "string" },
|
|
12045
|
+
{ "name": "dataUri", "type": "string" },
|
|
12046
|
+
{ "name": "flush", "type": "boolean" },
|
|
12047
|
+
{ "name": "flushX", "type": "boolean" },
|
|
12048
|
+
{ "name": "flushY", "type": "boolean" },
|
|
12049
|
+
{ "name": "inline", "type": "boolean" },
|
|
12050
|
+
{
|
|
12051
|
+
"name": "plain",
|
|
12052
|
+
"description": "Renders the caption in the normal table-content weight instead of bold.",
|
|
12053
|
+
"type": "boolean"
|
|
12054
|
+
},
|
|
12055
|
+
{
|
|
12056
|
+
"name": "grouped",
|
|
12057
|
+
"description": "Set by `zn-tile-group` to lay the tile out as a shared-column subgrid row.",
|
|
12058
|
+
"type": "boolean"
|
|
12059
|
+
}
|
|
12060
|
+
],
|
|
12061
|
+
"events": [
|
|
12062
|
+
{
|
|
12063
|
+
"name": "zn-event-name",
|
|
12064
|
+
"description": "Emitted as an example."
|
|
12065
|
+
}
|
|
12066
|
+
]
|
|
12067
|
+
}
|
|
12068
|
+
},
|
|
12069
|
+
{
|
|
12070
|
+
"name": "zn-tile-group",
|
|
12071
|
+
"description": "Aligns a list of `zn-tile` rows into shared, content-driven columns so values\nand actions line up across every row, with optional dividing borders.\n\n---\n\n\n### **Slots:**\n - _default_ - One or more `zn-tile` elements.\n\n### **CSS Properties:**\n - **--zn-tile-cols** - The number of value/action columns (set automatically). _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper (the grid container).",
|
|
12072
|
+
"doc-url": "",
|
|
12073
|
+
"attributes": [
|
|
12074
|
+
{
|
|
12075
|
+
"name": "divide",
|
|
12076
|
+
"description": "Draws a dividing border between rows.",
|
|
12077
|
+
"value": { "type": "boolean", "default": "false" }
|
|
12078
|
+
}
|
|
12079
|
+
],
|
|
12080
|
+
"slots": [
|
|
12081
|
+
{ "name": "", "description": "One or more `zn-tile` elements." }
|
|
12082
|
+
],
|
|
12083
|
+
"events": [],
|
|
12084
|
+
"js": {
|
|
12085
|
+
"properties": [
|
|
12086
|
+
{
|
|
12087
|
+
"name": "divide",
|
|
12088
|
+
"description": "Draws a dividing border between rows.",
|
|
12089
|
+
"type": "boolean"
|
|
12090
|
+
}
|
|
12091
|
+
],
|
|
12092
|
+
"events": []
|
|
12093
|
+
}
|
|
12094
|
+
},
|
|
12085
12095
|
{
|
|
12086
12096
|
"name": "zn-tile-property",
|
|
12087
12097
|
"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.",
|
package/dist/zn.d.ts
CHANGED
|
@@ -1254,6 +1254,8 @@ declare module "components/button/button.component" {
|
|
|
1254
1254
|
tooltip: string;
|
|
1255
1255
|
/** Accessible name for the button. Icon-only buttons fall back to `tooltip`. */
|
|
1256
1256
|
label: string;
|
|
1257
|
+
/** Toggle state, forwarded to the inner button's `aria-pressed`. */
|
|
1258
|
+
pressed: 'true' | 'false' | 'mixed';
|
|
1257
1259
|
autoClick: boolean;
|
|
1258
1260
|
autoClickDelay: number;
|
|
1259
1261
|
loadingText: string;
|
|
@@ -7550,11 +7552,12 @@ declare module "components/form-group/form-group.component" {
|
|
|
7550
7552
|
private rebind;
|
|
7551
7553
|
private offset;
|
|
7552
7554
|
private resizeObserver;
|
|
7555
|
+
private observedAncestors;
|
|
7553
7556
|
connectedCallback(): void;
|
|
7554
7557
|
disconnectedCallback(): void;
|
|
7555
7558
|
protected firstUpdated(changedProperties: PropertyValues): void;
|
|
7556
7559
|
private get labelColumn();
|
|
7557
|
-
/** Coalesces scroll and resize work into one frame
|
|
7560
|
+
/** Coalesces scroll and resize work into one frame. */
|
|
7558
7561
|
private schedule;
|
|
7559
7562
|
/**
|
|
7560
7563
|
* Native sticky only follows the nearest scroll container. Where that container isn't the one
|
|
@@ -7570,6 +7573,12 @@ declare module "components/form-group/form-group.component" {
|
|
|
7570
7573
|
private scrollLinkedTravel;
|
|
7571
7574
|
/** Drops everything this component has put on the label or on the scroller. */
|
|
7572
7575
|
private detach;
|
|
7576
|
+
/**
|
|
7577
|
+
* The label's travel is measured against the scroller, so content growing elsewhere in it — a sibling group revealing
|
|
7578
|
+
* more fields — leaves the label at a stale position until something re-measures. Any such growth resizes a box
|
|
7579
|
+
* between this group and the scroller.
|
|
7580
|
+
*/
|
|
7581
|
+
private observeAncestors;
|
|
7573
7582
|
/** The document scrolls through the window, every other scroller reports its own events. */
|
|
7574
7583
|
private scrollTarget;
|
|
7575
7584
|
/** Where the scroller's own top edge sits, which for the document is the top of the viewport. */
|