@kubex/zinc 1.1.47 → 1.1.49

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@kubex/zinc",
-  "version": "1.1.47",
+  "version": "1.1.49",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -15,28 +15,6 @@
           "events": [],
           "js": { "properties": [], "events": [] }
         },
-        {
-          "name": "zn-action-bar",
-          "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.",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            { "name": "", "description": "The default slot." },
-            { "name": "example", "description": "An example slot." }
-          ],
-          "events": [
-            { "name": "zn-event-name", "description": "Emitted as an example." }
-          ],
-          "js": {
-            "properties": [],
-            "events": [
-              {
-                "name": "zn-event-name",
-                "description": "Emitted as an example."
-              }
-            ]
-          }
-        },
         {
           "name": "zn-alert",
           "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.",
@@ -100,6 +78,28 @@
             ]
           }
         },
+        {
+          "name": "zn-action-bar",
+          "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.",
+          "doc-url": "",
+          "attributes": [],
+          "slots": [
+            { "name": "", "description": "The default slot." },
+            { "name": "example", "description": "An example slot." }
+          ],
+          "events": [
+            { "name": "zn-event-name", "description": "Emitted as an example." }
+          ],
+          "js": {
+            "properties": [],
+            "events": [
+              {
+                "name": "zn-event-name",
+                "description": "Emitted as an example."
+              }
+            ]
+          }
+        },
         {
           "name": "zn-animated-button",
           "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",
@@ -1722,6 +1722,110 @@
             "events": []
           }
         },
+        {
+          "name": "zn-color-select",
+          "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).",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "name",
+              "description": "The name of the select. Used for form submission.",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "value",
+              "description": "The selected color (lowercase name, e.g. \"red\"). Used for form submission.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "label",
+              "description": "The select's label.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "help-text",
+              "description": "The select's help text.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "disabled",
+              "description": "Disables the select.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "required",
+              "description": "Makes the select a required field.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "clearable",
+              "description": "Shows a clear button when a color is selected.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "events": [
+            {
+              "name": "zn-input",
+              "description": "Emitted when the selected color changes."
+            },
+            {
+              "name": "zn-clear",
+              "description": "Emitted when the clear button is activated."
+            }
+          ],
+          "js": {
+            "properties": [
+              { "name": "select", "type": "ZnSelect" },
+              {
+                "name": "name",
+                "description": "The name of the select. Used for form submission.",
+                "type": "string"
+              },
+              {
+                "name": "value",
+                "description": "The selected color (lowercase name, e.g. \"red\"). Used for form submission.",
+                "type": "string"
+              },
+              {
+                "name": "label",
+                "description": "The select's label.",
+                "type": "string"
+              },
+              {
+                "name": "helpText",
+                "description": "The select's help text.",
+                "type": "string"
+              },
+              {
+                "name": "disabled",
+                "description": "Disables the select.",
+                "type": "boolean"
+              },
+              {
+                "name": "required",
+                "description": "Makes the select a required field.",
+                "type": "boolean"
+              },
+              {
+                "name": "clearable",
+                "description": "Shows a clear button when a color is selected.",
+                "type": "boolean"
+              },
+              { "name": "validity", "type": "ValidityState" },
+              { "name": "validationMessage", "type": "string" }
+            ],
+            "events": [
+              {
+                "name": "zn-input",
+                "description": "Emitted when the selected color changes."
+              },
+              {
+                "name": "zn-clear",
+                "description": "Emitted when the clear button is activated."
+              }
+            ]
+          }
+        },
         {
           "name": "zn-cols",
           "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.",

package/dist/zn.d.ts

@@ -3980,6 +3980,7 @@ declare module "components/channel-tile/channel-tile.component" {
         private _accept;
         private _reservedUntilMs;
         private _countdownPercent;
+        private _remainingSeconds;
         private _handleReject;
         private _handleClick;
         protected render(): unknown;
@@ -7352,6 +7353,73 @@ declare module "components/item/index" {
         }
     }
 }
+declare module "components/color-select/color-select.component" {
+    import { type CSSResultGroup } from 'lit';
+    import ZincElement from "internal/zinc-element";
+    import ZnOption from "components/option/index";
+    import ZnSelect from "components/select/index";
+    import type { ZincFormControl } from "internal/zinc-element";
+    /**
+     * @summary A simple color picker. The dropdown lists color swatches with names; the closed control shows only the selected color's swatch.
+     * @documentation https://zinc.style/components/color-select
+     * @status experimental
+     * @since 1.0
+     *
+     * @dependency zn-select
+     * @dependency zn-option
+     *
+     * @event zn-input - Emitted when the selected color changes.
+     * @event zn-clear - Emitted when the clear button is activated.
+     *
+     * @csspart swatch - The color swatch shown in the closed control.
+     * @csspart combobox - The container that wraps the swatch and expand button (forwarded from zn-select).
+     * @csspart form-control-help-text - The help text's wrapper (forwarded from zn-select).
+     * @csspart form-control-input - The select's wrapper (forwarded from zn-select).
+     */
+    export default class ZnColorSelect extends ZincElement implements ZincFormControl {
+        static styles: CSSResultGroup;
+        static dependencies: {
+            'zn-select': typeof ZnSelect;
+            'zn-option': typeof ZnOption;
+        };
+        select: ZnSelect;
+        /** The name of the select. Used for form submission. */
+        name: string;
+        /** The selected color (lowercase name, e.g. "red"). Used for form submission. */
+        value: string;
+        /** The select's label. */
+        label: string;
+        /** The select's help text. */
+        helpText: string;
+        /** Disables the select. */
+        disabled: boolean;
+        /** Makes the select a required field. */
+        required: boolean;
+        /** Shows a clear button when a color is selected. */
+        clearable: boolean;
+        private readonly formControlController;
+        get validity(): ValidityState;
+        get validationMessage(): string;
+        checkValidity(): boolean;
+        getForm(): HTMLFormElement | null;
+        reportValidity(): boolean;
+        setCustomValidity(message: string): void;
+        handleValueChange(): void;
+        private handleInput;
+        private handleClear;
+        protected render(): import("lit-html").TemplateResult<1>;
+    }
+}
+declare module "components/color-select/index" {
+    import ZnColorSelect from "components/color-select/color-select.component";
+    export * from "components/color-select/color-select.component";
+    export default ZnColorSelect;
+    global {
+        interface HTMLElementTagNameMap {
+            'zn-color-select': ZnColorSelect;
+        }
+    }
+}
 declare module "components/button-menu/button-menu.component" {
     import { type CSSResultGroup, type PropertyValues } from 'lit';
     import ZincElement from "internal/zinc-element";
@@ -10301,6 +10369,7 @@ declare module "zinc" {
     export { default as CheckboxGroup } from "components/checkbox-group/index";
     export { default as Item } from "components/item/index";
     export { default as DataSelect } from "components/data-select/index";
+    export { default as ColorSelect } from "components/color-select/index";
     export { default as ButtonMenu } from "components/button-menu/index";
     export { default as HoverContainer } from "components/hover-container/index";
     export { default as Slideout } from "components/slideout/index";