@kubex/zinc 1.1.127 → 1.1.128
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 +791 -791
- package/dist/vscode.html-custom-data.json +102 -102
- package/dist/web-types.json +214 -214
- package/dist/zn.min.css +1 -1
- package/dist/zn.min.js +3 -3
- package/package.json +1 -1
- package/scss/themes/_light.scss +3 -0
- package/src/components/button/button.scss +2 -1
- package/src/components/header/header.scss +1 -2
|
@@ -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.",
|
|
@@ -64,6 +53,17 @@
|
|
|
64
53
|
}
|
|
65
54
|
]
|
|
66
55
|
},
|
|
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",
|
|
@@ -2844,47 +2844,47 @@
|
|
|
2844
2844
|
]
|
|
2845
2845
|
},
|
|
2846
2846
|
{
|
|
2847
|
-
"name": "zn-
|
|
2848
|
-
"description": "
|
|
2847
|
+
"name": "zn-opt-group",
|
|
2848
|
+
"description": "Groups options within a `<zn-select>` under a labeled header, similar to `<optgroup>` in native HTML.\n---\n\n\n### **Slots:**\n - _default_ - The default slot for `<zn-option>` elements.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **label** - The group label element.",
|
|
2849
2849
|
"attributes": [
|
|
2850
2850
|
{
|
|
2851
|
-
"name": "
|
|
2852
|
-
"description": "The
|
|
2851
|
+
"name": "label",
|
|
2852
|
+
"description": "The label for the opt-group, displayed as a non-selectable header above the grouped options.",
|
|
2853
2853
|
"values": []
|
|
2854
2854
|
},
|
|
2855
2855
|
{
|
|
2856
2856
|
"name": "disabled",
|
|
2857
|
-
"description": "
|
|
2857
|
+
"description": "Disables all options within the group.",
|
|
2858
2858
|
"values": []
|
|
2859
|
-
}
|
|
2860
|
-
{ "name": "selected", "values": [] }
|
|
2859
|
+
}
|
|
2861
2860
|
],
|
|
2862
2861
|
"references": [
|
|
2863
2862
|
{
|
|
2864
2863
|
"name": "Documentation",
|
|
2865
|
-
"url": "https://zinc.style/components/
|
|
2864
|
+
"url": "https://zinc.style/components/opt-group"
|
|
2866
2865
|
}
|
|
2867
2866
|
]
|
|
2868
2867
|
},
|
|
2869
2868
|
{
|
|
2870
|
-
"name": "zn-
|
|
2871
|
-
"description": "
|
|
2869
|
+
"name": "zn-option",
|
|
2870
|
+
"description": "Short summary of the component's intended use.\n---\n\n\n### **Methods:**\n - **getTextLabel()** - Returns a plain text label based on the option's content.\n\n### **Slots:**\n - _default_ - The option's label.\n- **prefix** - Used to prepend an icon or similar element to the menu item.\n- **suffix** - Used to append an icon or similar element to the menu item.\n\n### **CSS Parts:**\n - **checked-option-icon** - The checked option icon, an `<zn-icon>` element.\n- **base** - The component's base wrapper.\n- **label** - The option's label.\n- **prefix** - The container that wraps the prefix.\n- **suffix** - The container that wraps the suffix.",
|
|
2872
2871
|
"attributes": [
|
|
2873
2872
|
{
|
|
2874
|
-
"name": "
|
|
2875
|
-
"description": "The
|
|
2873
|
+
"name": "value",
|
|
2874
|
+
"description": "The option's value. When selected, the containing form control will receive this value. The value must be unique\nfrom other options in the same group. Values may contain spaces when using JSON array syntax on the parent select.",
|
|
2876
2875
|
"values": []
|
|
2877
2876
|
},
|
|
2878
2877
|
{
|
|
2879
2878
|
"name": "disabled",
|
|
2880
|
-
"description": "
|
|
2879
|
+
"description": "Draws the option in a disabled state, preventing selection.",
|
|
2881
2880
|
"values": []
|
|
2882
|
-
}
|
|
2881
|
+
},
|
|
2882
|
+
{ "name": "selected", "values": [] }
|
|
2883
2883
|
],
|
|
2884
2884
|
"references": [
|
|
2885
2885
|
{
|
|
2886
2886
|
"name": "Documentation",
|
|
2887
|
-
"url": "https://zinc.style/components/
|
|
2887
|
+
"url": "https://zinc.style/components/option"
|
|
2888
2888
|
}
|
|
2889
2889
|
]
|
|
2890
2890
|
},
|
|
@@ -3522,6 +3522,82 @@
|
|
|
3522
3522
|
}
|
|
3523
3523
|
]
|
|
3524
3524
|
},
|
|
3525
|
+
{
|
|
3526
|
+
"name": "zn-radio-group",
|
|
3527
|
+
"description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Methods:**\n - **checkValidity()** - Checks for 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(): _boolean_** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--zn-radio-group-column-width** - Minimum column width used by the horizontal contained grid, or the card basis when `wrap` is set. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
|
|
3528
|
+
"attributes": [
|
|
3529
|
+
{
|
|
3530
|
+
"name": "label",
|
|
3531
|
+
"description": "The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.",
|
|
3532
|
+
"values": []
|
|
3533
|
+
},
|
|
3534
|
+
{
|
|
3535
|
+
"name": "label-tooltip",
|
|
3536
|
+
"description": "Text that appears in a tooltip next to the label. If you need to display HTML in the tooltip, use the `label-tooltip` slot instead.",
|
|
3537
|
+
"values": []
|
|
3538
|
+
},
|
|
3539
|
+
{
|
|
3540
|
+
"name": "help-text",
|
|
3541
|
+
"description": "The radio groups' help text. If you need to display HTML, use the `help-text` slot instead.",
|
|
3542
|
+
"values": []
|
|
3543
|
+
},
|
|
3544
|
+
{
|
|
3545
|
+
"name": "name",
|
|
3546
|
+
"description": "The name of the radio group, submitted as a name/value pair with form data.",
|
|
3547
|
+
"values": []
|
|
3548
|
+
},
|
|
3549
|
+
{
|
|
3550
|
+
"name": "value",
|
|
3551
|
+
"description": "The current value of the radio group, submitted as a name/value pair with form data.",
|
|
3552
|
+
"values": []
|
|
3553
|
+
},
|
|
3554
|
+
{
|
|
3555
|
+
"name": "size",
|
|
3556
|
+
"description": "The radio group's size. This size will be applied to all child radios",
|
|
3557
|
+
"values": [
|
|
3558
|
+
{ "name": "small" },
|
|
3559
|
+
{ "name": "medium" },
|
|
3560
|
+
{ "name": "large" }
|
|
3561
|
+
]
|
|
3562
|
+
},
|
|
3563
|
+
{
|
|
3564
|
+
"name": "horizontal",
|
|
3565
|
+
"description": "The radio group's orientation. Changes the group's layout from the default (vertical) to horizontal.",
|
|
3566
|
+
"values": []
|
|
3567
|
+
},
|
|
3568
|
+
{
|
|
3569
|
+
"name": "contained",
|
|
3570
|
+
"description": "The radio group's style. Changes the group's style from the default (plain) style to the 'contained' style. This style will be applied to all child radios.",
|
|
3571
|
+
"values": []
|
|
3572
|
+
},
|
|
3573
|
+
{
|
|
3574
|
+
"name": "square",
|
|
3575
|
+
"description": "Squares off the corners of every contained radio in the group, which are rounded by default.",
|
|
3576
|
+
"values": []
|
|
3577
|
+
},
|
|
3578
|
+
{
|
|
3579
|
+
"name": "wrap",
|
|
3580
|
+
"description": "Lays horizontal contained radios out as a wrapping row instead of an equal-width grid, so each one sizes from\n`--zn-radio-group-column-width` (set it to `auto` to size from content) and wraps onto a new line when needed.",
|
|
3581
|
+
"values": []
|
|
3582
|
+
},
|
|
3583
|
+
{
|
|
3584
|
+
"name": "form",
|
|
3585
|
+
"description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
|
|
3586
|
+
"values": []
|
|
3587
|
+
},
|
|
3588
|
+
{
|
|
3589
|
+
"name": "required",
|
|
3590
|
+
"description": "Ensures a child radio is checked before allowing the containing form to submit.",
|
|
3591
|
+
"values": []
|
|
3592
|
+
}
|
|
3593
|
+
],
|
|
3594
|
+
"references": [
|
|
3595
|
+
{
|
|
3596
|
+
"name": "Documentation",
|
|
3597
|
+
"url": "https://zinc.style/components/radio-group"
|
|
3598
|
+
}
|
|
3599
|
+
]
|
|
3600
|
+
},
|
|
3525
3601
|
{
|
|
3526
3602
|
"name": "zn-rating",
|
|
3527
3603
|
"description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Methods:**\n - **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.",
|
|
@@ -3651,82 +3727,6 @@
|
|
|
3651
3727
|
}
|
|
3652
3728
|
]
|
|
3653
3729
|
},
|
|
3654
|
-
{
|
|
3655
|
-
"name": "zn-radio-group",
|
|
3656
|
-
"description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Methods:**\n - **checkValidity()** - Checks for 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(): _boolean_** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--zn-radio-group-column-width** - Minimum column width used by the horizontal contained grid, or the card basis when `wrap` is set. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
|
|
3657
|
-
"attributes": [
|
|
3658
|
-
{
|
|
3659
|
-
"name": "label",
|
|
3660
|
-
"description": "The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.",
|
|
3661
|
-
"values": []
|
|
3662
|
-
},
|
|
3663
|
-
{
|
|
3664
|
-
"name": "label-tooltip",
|
|
3665
|
-
"description": "Text that appears in a tooltip next to the label. If you need to display HTML in the tooltip, use the `label-tooltip` slot instead.",
|
|
3666
|
-
"values": []
|
|
3667
|
-
},
|
|
3668
|
-
{
|
|
3669
|
-
"name": "help-text",
|
|
3670
|
-
"description": "The radio groups' help text. If you need to display HTML, use the `help-text` slot instead.",
|
|
3671
|
-
"values": []
|
|
3672
|
-
},
|
|
3673
|
-
{
|
|
3674
|
-
"name": "name",
|
|
3675
|
-
"description": "The name of the radio group, submitted as a name/value pair with form data.",
|
|
3676
|
-
"values": []
|
|
3677
|
-
},
|
|
3678
|
-
{
|
|
3679
|
-
"name": "value",
|
|
3680
|
-
"description": "The current value of the radio group, submitted as a name/value pair with form data.",
|
|
3681
|
-
"values": []
|
|
3682
|
-
},
|
|
3683
|
-
{
|
|
3684
|
-
"name": "size",
|
|
3685
|
-
"description": "The radio group's size. This size will be applied to all child radios",
|
|
3686
|
-
"values": [
|
|
3687
|
-
{ "name": "small" },
|
|
3688
|
-
{ "name": "medium" },
|
|
3689
|
-
{ "name": "large" }
|
|
3690
|
-
]
|
|
3691
|
-
},
|
|
3692
|
-
{
|
|
3693
|
-
"name": "horizontal",
|
|
3694
|
-
"description": "The radio group's orientation. Changes the group's layout from the default (vertical) to horizontal.",
|
|
3695
|
-
"values": []
|
|
3696
|
-
},
|
|
3697
|
-
{
|
|
3698
|
-
"name": "contained",
|
|
3699
|
-
"description": "The radio group's style. Changes the group's style from the default (plain) style to the 'contained' style. This style will be applied to all child radios.",
|
|
3700
|
-
"values": []
|
|
3701
|
-
},
|
|
3702
|
-
{
|
|
3703
|
-
"name": "square",
|
|
3704
|
-
"description": "Squares off the corners of every contained radio in the group, which are rounded by default.",
|
|
3705
|
-
"values": []
|
|
3706
|
-
},
|
|
3707
|
-
{
|
|
3708
|
-
"name": "wrap",
|
|
3709
|
-
"description": "Lays horizontal contained radios out as a wrapping row instead of an equal-width grid, so each one sizes from\n`--zn-radio-group-column-width` (set it to `auto` to size from content) and wraps onto a new line when needed.",
|
|
3710
|
-
"values": []
|
|
3711
|
-
},
|
|
3712
|
-
{
|
|
3713
|
-
"name": "form",
|
|
3714
|
-
"description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
|
|
3715
|
-
"values": []
|
|
3716
|
-
},
|
|
3717
|
-
{
|
|
3718
|
-
"name": "required",
|
|
3719
|
-
"description": "Ensures a child radio is checked before allowing the containing form to submit.",
|
|
3720
|
-
"values": []
|
|
3721
|
-
}
|
|
3722
|
-
],
|
|
3723
|
-
"references": [
|
|
3724
|
-
{
|
|
3725
|
-
"name": "Documentation",
|
|
3726
|
-
"url": "https://zinc.style/components/radio-group"
|
|
3727
|
-
}
|
|
3728
|
-
]
|
|
3729
|
-
},
|
|
3730
3730
|
{
|
|
3731
3731
|
"name": "zn-schedule-builder",
|
|
3732
3732
|
"description": "Builds a weekly opening-hours schedule as a drag-to-paint calendar or a compact list of\ntime ranges, and posts the result as JSON.\n---\n\n\n### **Events:**\n - **zn-change** - Emitted when the schedule changes.\n\n### **Methods:**\n - **checkValidity(): _boolean_** - Checks validity but does not show a validation message.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity(): _boolean_** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **setDay(day: _ScheduleDay_, ranges: _ScheduleRange[]_)** - Replaces the hours for a single day, in the save timezone.\n- **getDay(day: _ScheduleDay_): _ScheduleRange[]_** - Reads the hours for a single day, in the save timezone.\n- **setDisplayDay(day: _ScheduleDay_, ranges: _ScheduleRange[]_)** - Replaces the hours for a single day, given in the display timezone.\n\n### **Slots:**\n - **label** - The schedule's label. Alternatively, use the `label` attribute.\n- **help-text** - Text that describes how to use the schedule. Alternatively, use the `help-text` attribute.\n\n### **CSS Properties:**\n - **--slot-height** - The height of a single time slot in the calendar. Defaults to `18px`. _(default: undefined)_\n- **--gutter-width** - The width of the calendar's time gutter. Defaults to `64px`. _(default: undefined)_\n- **--open-color** - The fill used for open hours. _(default: undefined)_\n- **--reduced-color** - The fill used for hours an exception removes. _(default: undefined)_\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the builder, label and help text.\n- **base** - The component's base wrapper.\n- **toolbar** - The row above the builder holding the hint, legend and view toggle.\n- **calendar** - The calendar view wrapper.\n- **list** - The form (list) view wrapper.\n- **summary** - The summary panel beside the calendar.",
|