@kubex/zinc 1.1.48 → 1.1.50

package/dist/custom-elements.json

@@ -5684,6 +5684,305 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/color-select/color-select.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "ZnColorSelect",
+          "cssParts": [
+            {
+              "description": "The color swatch shown in the closed control.",
+              "name": "swatch"
+            },
+            {
+              "description": "The container that wraps the swatch and expand button (forwarded from zn-select).",
+              "name": "combobox"
+            },
+            {
+              "description": "The help text's wrapper (forwarded from zn-select).",
+              "name": "form-control-help-text"
+            },
+            {
+              "description": "The select's wrapper (forwarded from zn-select).",
+              "name": "form-control-input"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "dependencies",
+              "type": {
+                "text": "object"
+              },
+              "static": true,
+              "default": "{ 'zn-select': ZnSelect, 'zn-option': ZnOption, }"
+            },
+            {
+              "kind": "field",
+              "name": "select",
+              "type": {
+                "text": "ZnSelect"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "description": "The name of the select. Used for form submission.",
+              "attribute": "name"
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The selected color (lowercase name, e.g. \"red\"). Used for form submission.",
+              "attribute": "value"
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The select's label.",
+              "attribute": "label"
+            },
+            {
+              "kind": "field",
+              "name": "helpText",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The select's help text.",
+              "attribute": "help-text"
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the select.",
+              "attribute": "disabled",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Makes the select a required field.",
+              "attribute": "required",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "clearable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Shows a clear button when a color is selected.",
+              "attribute": "clearable"
+            },
+            {
+              "kind": "field",
+              "name": "formControlController",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new FormControlController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "validity",
+              "type": {
+                "text": "ValidityState"
+              },
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "validationMessage",
+              "type": {
+                "text": "string"
+              },
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "checkValidity",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "getForm",
+              "return": {
+                "type": {
+                  "text": "HTMLFormElement | null"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "reportValidity",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "setCustomValidity",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "message",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleValueChange"
+            },
+            {
+              "kind": "field",
+              "name": "handleInput",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "handleClear",
+              "privacy": "private"
+            }
+          ],
+          "events": [
+            {
+              "description": "Emitted when the selected color changes.",
+              "name": "zn-input"
+            },
+            {
+              "description": "Emitted when the clear button is activated.",
+              "name": "zn-clear"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "description": "The name of the select. Used for form submission.",
+              "fieldName": "name"
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The selected color (lowercase name, e.g. \"red\"). Used for form submission.",
+              "fieldName": "value"
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The select's label.",
+              "fieldName": "label"
+            },
+            {
+              "name": "help-text",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The select's help text.",
+              "fieldName": "helpText"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the select.",
+              "fieldName": "disabled"
+            },
+            {
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Makes the select a required field.",
+              "fieldName": "required"
+            },
+            {
+              "name": "clearable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Shows a clear button when a color is selected.",
+              "fieldName": "clearable"
+            }
+          ],
+          "superclass": {
+            "name": "ZincElement",
+            "module": "/src/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.",
+          "tagNameWithoutPrefix": "color-select",
+          "tagName": "zn-color-select",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary A simple color picker. The dropdown lists color swatches with names; the closed control shows only the selected color's swatch.\n * @documentation https://zinc.style/components/color-select\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-select\n * @dependency zn-option\n *\n * @event zn-input - Emitted when the selected color changes.\n * @event zn-clear - Emitted when the clear button is activated.\n *\n * @csspart swatch - The color swatch shown in the closed control.\n * @csspart combobox - The container that wraps the swatch and expand button (forwarded from zn-select).\n * @csspart form-control-help-text - The help text's wrapper (forwarded from zn-select).\n * @csspart form-control-input - The select's wrapper (forwarded from zn-select).\n */",
+          "documentation": "https://zinc.style/components/color-select",
+          "status": "experimental",
+          "since": "1.0",
+          "dependencies": [
+            "zn-select",
+            "zn-option"
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "ZnColorSelect",
+            "module": "components/color-select/color-select.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/cols/cols.js",
@@ -40324,7 +40623,7 @@
   "package": {
     "name": "@kubex/zinc",
     "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
-    "version": "1.1.48",
+    "version": "1.1.50",
     "author": "",
     "license": "MIT"
   }

package/dist/vscode.html-custom-data.json

@@ -785,6 +785,49 @@
         }
       ]
     },
+    {
+      "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).",
+      "attributes": [
+        {
+          "name": "name",
+          "description": "The name of the select. Used for form submission.",
+          "values": []
+        },
+        {
+          "name": "value",
+          "description": "The selected color (lowercase name, e.g. \"red\"). Used for form submission.",
+          "values": []
+        },
+        { "name": "label", "description": "The select's label.", "values": [] },
+        {
+          "name": "help-text",
+          "description": "The select's help text.",
+          "values": []
+        },
+        {
+          "name": "disabled",
+          "description": "Disables the select.",
+          "values": []
+        },
+        {
+          "name": "required",
+          "description": "Makes the select a required field.",
+          "values": []
+        },
+        {
+          "name": "clearable",
+          "description": "Shows a clear button when a color is selected.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://zinc.style/components/color-select"
+        }
+      ]
+    },
     {
       "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/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.48",
+  "version": "1.1.50",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -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

@@ -7353,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";
@@ -10302,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";