@kubex/zinc 1.0.18 → 1.0.19

package/dist/custom-elements.json

@@ -290,6 +290,174 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/audio-select/audio-select.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "ZnAudioSelect",
+          "cssProperties": [
+            {
+              "description": "An example CSS custom property.",
+              "name": "--example"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The component's base wrapper.",
+              "name": "base"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The default slot.",
+              "name": ""
+            },
+            {
+              "description": "The actions slot.",
+              "name": "actions"
+            },
+            {
+              "description": "The footer slot.",
+              "name": "footer"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "_selectedUrl",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "private",
+              "default": "''"
+            },
+            {
+              "kind": "field",
+              "name": "_isPlaying",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "_audio",
+              "type": {
+                "text": "HTMLAudioElement"
+              },
+              "privacy": "private",
+              "readonly": true,
+              "default": "new Audio()"
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "label"
+            },
+            {
+              "kind": "field",
+              "name": "placeholder",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "placeholder"
+            },
+            {
+              "kind": "field",
+              "name": "files",
+              "type": {
+                "text": "AudioFile[]"
+              },
+              "attribute": "files"
+            },
+            {
+              "kind": "method",
+              "name": "_stopAudio"
+            },
+            {
+              "kind": "method",
+              "name": "handleSelectChange",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "ZnChangeEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "togglePreview",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "CustomEvent"
+                  }
+                }
+              ]
+            }
+          ],
+          "attributes": [
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "label"
+            },
+            {
+              "name": "placeholder",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "placeholder"
+            },
+            {
+              "name": "files",
+              "type": {
+                "text": "AudioFile[]"
+              },
+              "fieldName": "files"
+            }
+          ],
+          "superclass": {
+            "name": "ZincElement",
+            "module": "/src/internal/zinc-element"
+          },
+          "summary": "Short summary of the component's intended use.",
+          "tagNameWithoutPrefix": "audio-select",
+          "tagName": "zn-audio-select",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/audio-select\n * @status experimental\n * @since 1.0\n *\n * @slot - The default slot.\n * @slot actions - The actions slot.\n * @slot footer - The footer slot.\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --example - An example CSS custom property.\n */",
+          "documentation": "https://zinc.style/components/audio-select",
+          "status": "experimental",
+          "since": "1.0"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "ZnAudioSelect",
+            "module": "components/audio-select/audio-select.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/bulk-actions/bulk-actions.js",
@@ -2222,6 +2390,10 @@
               "description": "The checked icon, an `<zn-icon>` element.",
               "name": "checked-icon"
             },
+            {
+              "description": "The unchecked icon, an `<zn-icon>` element.",
+              "name": "unchecked-icon"
+            },
             {
               "description": "The indeterminate icon, an `<zn-icon>` element.",
               "name": "indeterminate-icon"
@@ -2444,6 +2616,55 @@
               },
               "attribute": "label-tooltip"
             },
+            {
+              "kind": "field",
+              "name": "checkedIcon",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The icon to show when the checkbox is checked.",
+              "attribute": "checked-icon"
+            },
+            {
+              "kind": "field",
+              "name": "uncheckedIcon",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The icon to show when the checkbox is unchecked.",
+              "attribute": "unchecked-icon"
+            },
+            {
+              "kind": "field",
+              "name": "color",
+              "type": {
+                "text": "ColorOption"
+              },
+              "default": "'default'",
+              "description": "The color of the checkbox.",
+              "attribute": "color",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "checkedColor",
+              "type": {
+                "text": "ColorOption"
+              },
+              "description": "The color of the checkbox when checked. Overrides `color`.",
+              "attribute": "checked-color"
+            },
+            {
+              "kind": "field",
+              "name": "uncheckedColor",
+              "type": {
+                "text": "ColorOption"
+              },
+              "description": "The color of the checkbox when unchecked. Overrides `color`.",
+              "attribute": "unchecked-color"
+            },
             {
               "kind": "field",
               "name": "validity",
@@ -2715,6 +2936,49 @@
                 "text": "string"
               },
               "fieldName": "labelTooltip"
+            },
+            {
+              "name": "checked-icon",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The icon to show when the checkbox is checked.",
+              "fieldName": "checkedIcon"
+            },
+            {
+              "name": "unchecked-icon",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The icon to show when the checkbox is unchecked.",
+              "fieldName": "uncheckedIcon"
+            },
+            {
+              "name": "color",
+              "type": {
+                "text": "ColorOption"
+              },
+              "default": "'default'",
+              "description": "The color of the checkbox.",
+              "fieldName": "color"
+            },
+            {
+              "name": "checked-color",
+              "type": {
+                "text": "ColorOption"
+              },
+              "description": "The color of the checkbox when checked. Overrides `color`.",
+              "fieldName": "checkedColor"
+            },
+            {
+              "name": "unchecked-color",
+              "type": {
+                "text": "ColorOption"
+              },
+              "description": "The color of the checkbox when unchecked. Overrides `color`.",
+              "fieldName": "uncheckedColor"
             }
           ],
           "superclass": {
@@ -2725,7 +2989,7 @@
           "tagNameWithoutPrefix": "checkbox",
           "tagName": "zn-checkbox",
           "customElement": true,
-          "jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/checkbox\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-icon\n *\n * @slot - The checkbox's label.\n * @slot description - A description of the checkbox's label. Serves as help text for a checkbox item. Alternatively, you can use the `description` attribute.\n *  @slot selected-content - Use to nest rich content (like an input) inside a selected checkbox item. Use only with the contained style.\n *\n * @event zn-blur - Emitted when the checkbox loses focus.\n * @event zn-change - Emitted when the checked state changes.\n * @event zn-focus - Emitted when the checkbox gains focus.\n * @event zn-input - Emitted when the checkbox receives input.\n * @event zn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart base - The component's base wrapper.\n * @csspart control - The square container that wraps the checkbox's checked state.\n * @csspart control--checked - Matches the control part when the checkbox is checked.\n * @csspart control--indeterminate - Matches the control part when the checkbox is indeterminate.\n * @csspart checked-icon - The checked icon, an `<zn-icon>` element.\n * @csspart indeterminate-icon - The indeterminate icon, an `<zn-icon>` element.\n * @csspart label - The container that wraps the checkbox's label.\n * @csspart description - The container that wraps the checkbox's description.\n * @csspart selected-content - The container that wraps optional content that appears when a checkbox is checked.\n */",
+          "jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/checkbox\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-icon\n *\n * @slot - The checkbox's label.\n * @slot description - A description of the checkbox's label. Serves as help text for a checkbox item. Alternatively, you can use the `description` attribute.\n * @slot selected-content - Use to nest rich content (like an input) inside a selected checkbox item. Use only with the contained style.\n *\n * @event zn-blur - Emitted when the checkbox loses focus.\n * @event zn-change - Emitted when the checked state changes.\n * @event zn-focus - Emitted when the checkbox gains focus.\n * @event zn-input - Emitted when the checkbox receives input.\n * @event zn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart base - The component's base wrapper.\n * @csspart control - The square container that wraps the checkbox's checked state.\n * @csspart control--checked - Matches the control part when the checkbox is checked.\n * @csspart control--indeterminate - Matches the control part when the checkbox is indeterminate.\n * @csspart checked-icon - The checked icon, an `<zn-icon>` element.\n * @csspart unchecked-icon - The unchecked icon, an `<zn-icon>` element.\n * @csspart indeterminate-icon - The indeterminate icon, an `<zn-icon>` element.\n * @csspart label - The container that wraps the checkbox's label.\n * @csspart description - The container that wraps the checkbox's description.\n * @csspart selected-content - The container that wraps optional content that appears when a checkbox is checked.\n */",
           "documentation": "https://zinc.style/components/checkbox",
           "status": "experimental",
           "since": "1.0",
@@ -19775,7 +20039,7 @@
             },
             {
               "kind": "field",
-              "name": "hasCheckboxPrefix",
+              "name": "inputPrefix",
               "type": {
                 "text": "boolean"
               },
@@ -20052,7 +20316,7 @@
             },
             {
               "kind": "method",
-              "name": "updateHasCheckboxPrefix",
+              "name": "updateHasInputPrefix",
               "privacy": "private"
             },
             {
@@ -26536,7 +26800,7 @@
   "package": {
     "name": "@kubex/zinc",
     "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
-    "version": "1.0.18",
+    "version": "1.0.19",
     "author": "",
     "license": "MIT"
   }

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

@@ -59,6 +59,21 @@
         }
       ]
     },
+    {
+      "name": "zn-audio-select",
+      "description": "Short summary of the component's intended use.\n---\n\n\n### **Slots:**\n - _default_ - The default slot.\n- **actions** - The actions slot.\n- **footer** - The footer 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.",
+      "attributes": [
+        { "name": "label", "values": [] },
+        { "name": "placeholder", "values": [] },
+        { "name": "files", "values": [{ "name": "AudioFile[]" }] }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://zinc.style/components/audio-select"
+        }
+      ]
+    },
     {
       "name": "zn-bulk-actions",
       "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.",
@@ -274,7 +289,7 @@
     },
     {
       "name": "zn-checkbox",
-      "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-blur** - Emitted when the checkbox loses focus.\n- **zn-change** - Emitted when the checked state changes.\n- **zn-focus** - Emitted when the checkbox gains focus.\n- **zn-input** - Emitted when the checkbox receives input.\n- **zn-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **click()** - Simulates a click on the checkbox.\n- **focus(options: _FocusOptions_)** - Sets focus on the checkbox.\n- **blur()** - Removes focus from the checkbox.\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()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear\nthe custom validation message, call this method with an empty string.\n\n### **Slots:**\n - _default_ - The checkbox's label.\n- **description** - A description of the checkbox's label. Serves as help text for a checkbox item. Alternatively, you can use the `description` attribute.\n- **selected-content** - Use to nest rich content (like an input) inside a selected checkbox item. Use only with the contained style.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **control** - The square container that wraps the checkbox's checked state.\n- **control--checked** - Matches the control part when the checkbox is checked.\n- **control--indeterminate** - Matches the control part when the checkbox is indeterminate.\n- **checked-icon** - The checked icon, an `<zn-icon>` element.\n- **indeterminate-icon** - The indeterminate icon, an `<zn-icon>` element.\n- **label** - The container that wraps the checkbox's label.\n- **description** - The container that wraps the checkbox's description.\n- **selected-content** - The container that wraps optional content that appears when a checkbox is checked.",
+      "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-blur** - Emitted when the checkbox loses focus.\n- **zn-change** - Emitted when the checked state changes.\n- **zn-focus** - Emitted when the checkbox gains focus.\n- **zn-input** - Emitted when the checkbox receives input.\n- **zn-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **click()** - Simulates a click on the checkbox.\n- **focus(options: _FocusOptions_)** - Sets focus on the checkbox.\n- **blur()** - Removes focus from the checkbox.\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()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear\nthe custom validation message, call this method with an empty string.\n\n### **Slots:**\n - _default_ - The checkbox's label.\n- **description** - A description of the checkbox's label. Serves as help text for a checkbox item. Alternatively, you can use the `description` attribute.\n- **selected-content** - Use to nest rich content (like an input) inside a selected checkbox item. Use only with the contained style.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **control** - The square container that wraps the checkbox's checked state.\n- **control--checked** - Matches the control part when the checkbox is checked.\n- **control--indeterminate** - Matches the control part when the checkbox is indeterminate.\n- **checked-icon** - The checked icon, an `<zn-icon>` element.\n- **unchecked-icon** - The unchecked icon, an `<zn-icon>` element.\n- **indeterminate-icon** - The indeterminate icon, an `<zn-icon>` element.\n- **label** - The container that wraps the checkbox's label.\n- **description** - The container that wraps the checkbox's description.\n- **selected-content** - The container that wraps optional content that appears when a checkbox is checked.",
       "attributes": [
         { "name": "title", "values": [] },
         {
@@ -337,7 +352,32 @@
           "values": []
         },
         { "name": "label", "values": [] },
-        { "name": "label-tooltip", "values": [] }
+        { "name": "label-tooltip", "values": [] },
+        {
+          "name": "checked-icon",
+          "description": "The icon to show when the checkbox is checked.",
+          "values": []
+        },
+        {
+          "name": "unchecked-icon",
+          "description": "The icon to show when the checkbox is unchecked.",
+          "values": []
+        },
+        {
+          "name": "color",
+          "description": "The color of the checkbox.",
+          "values": [{ "name": "ColorOption" }]
+        },
+        {
+          "name": "checked-color",
+          "description": "The color of the checkbox when checked. Overrides `color`.",
+          "values": [{ "name": "ColorOption" }]
+        },
+        {
+          "name": "unchecked-color",
+          "description": "The color of the checkbox when unchecked. Overrides `color`.",
+          "values": [{ "name": "ColorOption" }]
+        }
       ],
       "references": [
         {

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.0.18",
+  "version": "1.0.19",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -92,6 +92,33 @@
             ]
           }
         },
+        {
+          "name": "zn-audio-select",
+          "description": "Short summary of the component's intended use.\n---\n\n\n### **Slots:**\n - _default_ - The default slot.\n- **actions** - The actions slot.\n- **footer** - The footer 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": [
+            { "name": "label", "value": { "type": "string", "default": "''" } },
+            {
+              "name": "placeholder",
+              "value": { "type": "string", "default": "''" }
+            },
+            { "name": "files", "value": { "type": "AudioFile[]" } }
+          ],
+          "slots": [
+            { "name": "", "description": "The default slot." },
+            { "name": "actions", "description": "The actions slot." },
+            { "name": "footer", "description": "The footer slot." }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "label", "type": "string" },
+              { "name": "placeholder", "type": "string" },
+              { "name": "files", "type": "AudioFile[]" }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "zn-bulk-actions",
           "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.",
@@ -533,7 +560,7 @@
         },
         {
           "name": "zn-checkbox",
-          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-blur** - Emitted when the checkbox loses focus.\n- **zn-change** - Emitted when the checked state changes.\n- **zn-focus** - Emitted when the checkbox gains focus.\n- **zn-input** - Emitted when the checkbox receives input.\n- **zn-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **click()** - Simulates a click on the checkbox.\n- **focus(options: _FocusOptions_)** - Sets focus on the checkbox.\n- **blur()** - Removes focus from the checkbox.\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()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear\nthe custom validation message, call this method with an empty string.\n\n### **Slots:**\n - _default_ - The checkbox's label.\n- **description** - A description of the checkbox's label. Serves as help text for a checkbox item. Alternatively, you can use the `description` attribute.\n- **selected-content** - Use to nest rich content (like an input) inside a selected checkbox item. Use only with the contained style.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **control** - The square container that wraps the checkbox's checked state.\n- **control--checked** - Matches the control part when the checkbox is checked.\n- **control--indeterminate** - Matches the control part when the checkbox is indeterminate.\n- **checked-icon** - The checked icon, an `<zn-icon>` element.\n- **indeterminate-icon** - The indeterminate icon, an `<zn-icon>` element.\n- **label** - The container that wraps the checkbox's label.\n- **description** - The container that wraps the checkbox's description.\n- **selected-content** - The container that wraps optional content that appears when a checkbox is checked.",
+          "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-blur** - Emitted when the checkbox loses focus.\n- **zn-change** - Emitted when the checked state changes.\n- **zn-focus** - Emitted when the checkbox gains focus.\n- **zn-input** - Emitted when the checkbox receives input.\n- **zn-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **click()** - Simulates a click on the checkbox.\n- **focus(options: _FocusOptions_)** - Sets focus on the checkbox.\n- **blur()** - Removes focus from the checkbox.\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()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear\nthe custom validation message, call this method with an empty string.\n\n### **Slots:**\n - _default_ - The checkbox's label.\n- **description** - A description of the checkbox's label. Serves as help text for a checkbox item. Alternatively, you can use the `description` attribute.\n- **selected-content** - Use to nest rich content (like an input) inside a selected checkbox item. Use only with the contained style.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **control** - The square container that wraps the checkbox's checked state.\n- **control--checked** - Matches the control part when the checkbox is checked.\n- **control--indeterminate** - Matches the control part when the checkbox is indeterminate.\n- **checked-icon** - The checked icon, an `<zn-icon>` element.\n- **unchecked-icon** - The unchecked icon, an `<zn-icon>` element.\n- **indeterminate-icon** - The indeterminate icon, an `<zn-icon>` element.\n- **label** - The container that wraps the checkbox's label.\n- **description** - The container that wraps the checkbox's description.\n- **selected-content** - The container that wraps optional content that appears when a checkbox is checked.",
           "doc-url": "",
           "attributes": [
             { "name": "title", "value": { "type": "string", "default": "''" } },
@@ -596,7 +623,32 @@
               "value": { "type": "string", "default": "''" }
             },
             { "name": "label", "value": { "type": "string" } },
-            { "name": "label-tooltip", "value": { "type": "string" } }
+            { "name": "label-tooltip", "value": { "type": "string" } },
+            {
+              "name": "checked-icon",
+              "description": "The icon to show when the checkbox is checked.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "unchecked-icon",
+              "description": "The icon to show when the checkbox is unchecked.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "color",
+              "description": "The color of the checkbox.",
+              "value": { "type": "ColorOption", "default": "'default'" }
+            },
+            {
+              "name": "checked-color",
+              "description": "The color of the checkbox when checked. Overrides `color`.",
+              "value": { "type": "ColorOption" }
+            },
+            {
+              "name": "unchecked-color",
+              "description": "The color of the checkbox when unchecked. Overrides `color`.",
+              "value": { "type": "ColorOption" }
+            }
           ],
           "slots": [
             { "name": "", "description": "The checkbox's label." },
@@ -697,6 +749,31 @@
               },
               { "name": "label", "type": "string" },
               { "name": "labelTooltip", "type": "string" },
+              {
+                "name": "checkedIcon",
+                "description": "The icon to show when the checkbox is checked.",
+                "type": "string"
+              },
+              {
+                "name": "uncheckedIcon",
+                "description": "The icon to show when the checkbox is unchecked.",
+                "type": "string"
+              },
+              {
+                "name": "color",
+                "description": "The color of the checkbox.",
+                "type": "ColorOption"
+              },
+              {
+                "name": "checkedColor",
+                "description": "The color of the checkbox when checked. Overrides `color`.",
+                "type": "ColorOption"
+              },
+              {
+                "name": "uncheckedColor",
+                "description": "The color of the checkbox when unchecked. Overrides `color`.",
+                "type": "ColorOption"
+              },
               {
                 "name": "validity",
                 "description": "Gets the validity state object"

package/dist/zn.d.ts

@@ -2025,7 +2025,7 @@ declare module "components/select/select.component" {
         currentOption: ZnOption;
         selectedOptions: ZnOption[];
         private valueHasChanged;
-        private hasCheckboxPrefix;
+        private inputPrefix;
         /** The name of the select, submitted as a name/value pair with form data. */
         name: string;
         private _value;
@@ -2103,7 +2103,7 @@ declare module "components/select/select.component" {
         /** Gets the validation message */
         get validationMessage(): string;
         connectedCallback(): void;
-        private updateHasCheckboxPrefix;
+        private updateHasInputPrefix;
         private addOpenListeners;
         private removeOpenListeners;
         private handleFocus;
@@ -4951,6 +4951,7 @@ declare module "components/checkbox/checkbox.component" {
     import ZincElement from "internal/zinc-element";
     import ZnIcon from "components/icon/index";
     import type { ZincFormControl } from "internal/zinc-element";
+    type ColorOption = 'default' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' | 'transparent';
     /**
      * @summary Short summary of the component's intended use.
      * @documentation https://zinc.style/components/checkbox
@@ -4961,7 +4962,7 @@ declare module "components/checkbox/checkbox.component" {
      *
      * @slot - The checkbox's label.
      * @slot description - A description of the checkbox's label. Serves as help text for a checkbox item. Alternatively, you can use the `description` attribute.
-     *  @slot selected-content - Use to nest rich content (like an input) inside a selected checkbox item. Use only with the contained style.
+     * @slot selected-content - Use to nest rich content (like an input) inside a selected checkbox item. Use only with the contained style.
      *
      * @event zn-blur - Emitted when the checkbox loses focus.
      * @event zn-change - Emitted when the checked state changes.
@@ -4974,6 +4975,7 @@ declare module "components/checkbox/checkbox.component" {
      * @csspart control--checked - Matches the control part when the checkbox is checked.
      * @csspart control--indeterminate - Matches the control part when the checkbox is indeterminate.
      * @csspart checked-icon - The checked icon, an `<zn-icon>` element.
+     * @csspart unchecked-icon - The unchecked icon, an `<zn-icon>` element.
      * @csspart indeterminate-icon - The indeterminate icon, an `<zn-icon>` element.
      * @csspart label - The container that wraps the checkbox's label.
      * @csspart description - The container that wraps the checkbox's description.
@@ -5022,6 +5024,16 @@ declare module "components/checkbox/checkbox.component" {
         description: string;
         label: string;
         labelTooltip: string;
+        /** The icon to show when the checkbox is checked. */
+        checkedIcon: string;
+        /** The icon to show when the checkbox is unchecked. */
+        uncheckedIcon: string;
+        /** The color of the checkbox. */
+        color: ColorOption;
+        /** The color of the checkbox when checked. Overrides `color`. */
+        checkedColor: ColorOption;
+        /** The color of the checkbox when unchecked. Overrides `color`. */
+        uncheckedColor: ColorOption;
         /** Gets the validity state object */
         get validity(): ValidityState;
         get isChecked(): boolean;
@@ -6580,6 +6592,54 @@ declare module "components/reveal/index" {
         }
     }
 }
+declare module "components/audio-select/audio-select.component" {
+    import { type CSSResultGroup } from 'lit';
+    import ZincElement from "internal/zinc-element";
+    import type { ZnChangeEvent } from "events/zn-change";
+    interface AudioFile {
+        name: string;
+        url: string;
+    }
+    /**
+     * @summary Short summary of the component's intended use.
+     * @documentation https://zinc.style/components/audio-select
+     * @status experimental
+     * @since 1.0
+     *
+     * @slot - The default slot.
+     * @slot actions - The actions slot.
+     * @slot footer - The footer slot.
+     *
+     * @csspart base - The component's base wrapper.
+     *
+     * @cssproperty --example - An example CSS custom property.
+     */
+    export default class ZnAudioSelect extends ZincElement {
+        static styles: CSSResultGroup;
+        private _selectedUrl;
+        private _isPlaying;
+        private readonly _audio;
+        label: string;
+        placeholder: string;
+        files: AudioFile[];
+        constructor();
+        disconnectedCallback(): void;
+        _stopAudio(): void;
+        handleSelectChange(e: ZnChangeEvent): void;
+        togglePreview(e: CustomEvent): void;
+        render(): import("lit").TemplateResult<1>;
+    }
+}
+declare module "components/audio-select/index" {
+    import ZnAudioSelect from "components/audio-select/audio-select.component";
+    export * from "components/audio-select/audio-select.component";
+    export default ZnAudioSelect;
+    global {
+        interface HTMLElementTagNameMap {
+            'zn-audio-select': ZnAudioSelect;
+        }
+    }
+}
 declare module "events/zn-after-hide" {
     export type ZnAfterHideEvent = CustomEvent<Record<PropertyKey, never>>;
     global {
@@ -6721,6 +6781,7 @@ declare module "zinc" {
     export { default as SettingsContainer } from "components/settings-container/index";
     export { default as FilterContainer } from "components/filter-container/index";
     export { default as Reveal } from "components/reveal/index";
+    export { default as AudioSelect } from "components/audio-select/index";
     export { default as ZincElement } from "internal/zinc-element";
     export * from "utilities/on";
     export * from "utilities/query";