@kubex/zinc 1.1.103 → 1.1.105

package/dist/custom-elements.json

@@ -56,79 +56,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/action-bar/action-bar.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "ZnActionBar",
-          "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": "An example slot.",
-              "name": "example"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "localize",
-              "privacy": "private",
-              "readonly": true,
-              "default": "new LocalizeController(this)"
-            }
-          ],
-          "events": [
-            {
-              "description": "Emitted as an example.",
-              "name": "zn-event-name"
-            }
-          ],
-          "superclass": {
-            "name": "ZincElement",
-            "module": "/src/internal/zinc-element"
-          },
-          "summary": "Short summary of the component's intended use.",
-          "tagNameWithoutPrefix": "action-bar",
-          "tagName": "zn-action-bar",
-          "customElement": true,
-          "jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/action-bar\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-example\n *\n * @event zn-event-name - Emitted as an example.\n *\n * @slot - The default slot.\n * @slot example - An example 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/action-bar",
-          "status": "experimental",
-          "since": "1.0",
-          "dependencies": [
-            "zn-example"
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "ZnActionBar",
-            "module": "components/action-bar/action-bar.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/alert/alert.js",
@@ -323,6 +250,79 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/action-bar/action-bar.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "ZnActionBar",
+          "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": "An example slot.",
+              "name": "example"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "localize",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new LocalizeController(this)"
+            }
+          ],
+          "events": [
+            {
+              "description": "Emitted as an example.",
+              "name": "zn-event-name"
+            }
+          ],
+          "superclass": {
+            "name": "ZincElement",
+            "module": "/src/internal/zinc-element"
+          },
+          "summary": "Short summary of the component's intended use.",
+          "tagNameWithoutPrefix": "action-bar",
+          "tagName": "zn-action-bar",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/action-bar\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-example\n *\n * @event zn-event-name - Emitted as an example.\n *\n * @slot - The default slot.\n * @slot example - An example 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/action-bar",
+          "status": "experimental",
+          "since": "1.0",
+          "dependencies": [
+            "zn-example"
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "ZnActionBar",
+            "module": "components/action-bar/action-bar.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/animated-button/animated-button.js",
@@ -17855,6 +17855,11 @@
               "name": "clearFile",
               "privacy": "private"
             },
+            {
+              "kind": "method",
+              "name": "syncHiddenInputs",
+              "privacy": "private"
+            },
             {
               "kind": "method",
               "name": "handleSearchInput",
@@ -50588,7 +50593,7 @@
   "package": {
     "name": "@kubex/zinc",
     "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
-    "version": "1.1.103",
+    "version": "1.1.105",
     "author": "",
     "license": "MIT"
   }

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

@@ -13,17 +13,6 @@
         }
       ]
     },
-    {
-      "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.",
-      "attributes": [],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://zinc.style/components/action-bar"
-        }
-      ]
-    },
     {
       "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.",
@@ -64,6 +53,17 @@
         }
       ]
     },
+    {
+      "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.",
+      "attributes": [],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://zinc.style/components/action-bar"
+        }
+      ]
+    },
     {
       "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",

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.103",
+  "version": "1.1.105",
   "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.",
@@ -105,6 +83,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",

package/dist/zn.d.ts

@@ -5177,7 +5177,7 @@ declare module "components/icon-picker/material-icons" {
     export const material_symbols_outlinedIcons: string[];
 }
 declare module "components/icon-picker/icon-picker.component" {
-    import { type CSSResultGroup } from 'lit';
+    import { type CSSResultGroup, type PropertyValues } from 'lit';
     import ZincElement from "internal/zinc-element";
     import ZnButton from "components/button/index";
     import ZnDialog from "components/dialog/index";
@@ -5249,6 +5249,8 @@ declare module "components/icon-picker/icon-picker.component" {
         private discardPendingFile;
         private clearFile;
         disconnectedCallback(): void;
+        private syncHiddenInputs;
+        protected updated(changedProperties: PropertyValues): void;
         private handleSearchInput;
         private filterIcons;
         private handleIconSelect;

package/dist/zn.min.js

@@ -1380,7 +1380,7 @@ import{a as Fn,b as i3,c as yr,d as c,e as V}from"./chunks/zn.UBLZO6CI.js";var $
           </div>`:""}
         <slot name="footer" class="note__footer"></slot>
       </div>
-    `}};Ai.styles=z(y0),c([p({reflect:!0})],Ai.prototype,"color",2),c([p({reflect:!0})],Ai.prototype,"caption",2),c([p({reflect:!0})],Ai.prototype,"date",2),c([p({type:HTMLElement,reflect:!0})],Ai.prototype,"body",2),c([R()],Ai.prototype,"expanded",2);var h4=Ai;Ai.define("zn-note");var x0=_`@keyframes rotate-gradient{from{--rotate:0deg}to{--rotate:360deg}}:host{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-transform:none}:host *,:host *::before,:host *::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:rgb(var(--zn-border-color))}[hidden]{display:none !important}.width-container,.form-container,.wide-form-container{height:100%;width:100%;margin:var(--zn-default-margin,0 auto)}.width-container{max-width:var(--zn-container)}.form-container{max-width:var(--zn-container-ph)}.wide-form-container{max-width:var(--zn-container-lg)}:host{display:block}.tile{position:relative;display:flex;align-items:center;justify-content:space-between;min-height:48px;-moz-column-gap:var(--zn-spacing-large);column-gap:var(--zn-spacing-large);font-size:var(--zn-text-table-content-font-size);line-height:var(--zn-text-table-content-line-height);font-weight:var(--zn-text-table-content-font-weight);color:var(--zn-text-table-content-color)}.tile--has-image,.tile--has-caption,.tile--has-description,.tile--has-properties,.tile--has-actions{padding-inline:var(--zn-base-gap)}.tile--has-description.tile--has-caption{padding-block:var(--zn-base-gap)}.tile--has-image{padding:var(--zn-base-gap)}.tile--has-href{cursor:pointer}.tile--has-href:hover{background-color:var(--zn-color-neutral-100)}.tile--flush{padding:0}.tile--flush-x{padding-inline:0}.tile--flush-y{padding-block:0}a{color:inherit;text-decoration:none;cursor:pointer}::slotted(zn-icon){display:flex;justify-content:center;align-items:center}.tile__link{display:flex;align-items:center;justify-content:space-between;flex:1;-moz-column-gap:var(--zn-spacing-small);column-gap:var(--zn-spacing-small);min-width:0}.tile__left{display:flex;align-items:center;-moz-column-gap:var(--zn-spacing-small);column-gap:var(--zn-spacing-small);min-width:0}.tile__image{display:flex;align-items:center;flex-shrink:0}.tile__content{display:flex;flex-direction:column;justify-content:center;min-width:0}.tile--inline .tile__content{flex-direction:row;align-items:center;-moz-column-gap:var(--zn-spacing-x-small);column-gap:var(--zn-spacing-x-small)}.tile__caption{margin:0;font-weight:600;color:rgb(var(--zn-text-heading));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tile--plain .tile__caption{font-weight:var(--zn-text-table-content-font-weight);color:var(--zn-text-table-content-color)}.tile__description{margin:var(--zn-spacing-3x-small) 0 0;font-weight:var(--zn-text-table-content-font-weight);color:var(--zn-text-table-content-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tile--inline .tile__description{margin:0}.tile__right{display:flex;align-items:center;justify-content:flex-end;-moz-column-gap:var(--zn-spacing-large);column-gap:var(--zn-spacing-large);min-width:0}.tile__properties{display:flex;flex-direction:row;align-items:center;-moz-column-gap:var(--zn-spacing-large);column-gap:var(--zn-spacing-large);min-width:0;overflow:hidden}.tile__properties ::slotted(*){white-space:nowrap}@container (max-width:359px){.tile__properties{display:none}}.tile__actions{display:flex;align-items:center;-moz-column-gap:var(--zn-spacing-small);column-gap:var(--zn-spacing-small);flex-shrink:0}:host([grouped]){display:grid;grid-column:1/-1;grid-template-columns:subgrid;align-items:center}:host([grouped]) .tile{display:grid;grid-column:1/-1;grid-template-columns:subgrid;align-items:center;justify-items:end;min-height:48px}:host([grouped]) .tile__link,:host([grouped]) .tile__right,:host([grouped]) .tile__properties,:host([grouped]) .tile__actions{display:contents}:host([grouped]) .tile__left{grid-column:1;justify-self:stretch;min-width:0;overflow:hidden}`;var We=class extends C{constructor(){super(...arguments);this.hasSlotController=new Y(this,"[default]","properties","actions","image")}_isLink(){return this.href||this.dataUri}_handleActionsClick(t){if(this._isLink()){for(let r of t.composedPath()){if(r===this)break;if(!(r instanceof Element))continue;let n=r.getAttribute("href");if(r.hasAttribute("data-uri")||n!==null&&n!==""&&!n.startsWith("#"))return}t.stopPropagation()}}render(){let t=this._isLink(),r=t?Ei`a`:Ei`div`,n=this.caption&&this.caption.length>0,a=this.description&&this.description.length>0,s=this.hasSlotController.test("properties"),l=this.hasSlotController.test("actions"),d=this.hasSlotController.test("image");return kt`
+    `}};Ai.styles=z(y0),c([p({reflect:!0})],Ai.prototype,"color",2),c([p({reflect:!0})],Ai.prototype,"caption",2),c([p({reflect:!0})],Ai.prototype,"date",2),c([p({type:HTMLElement,reflect:!0})],Ai.prototype,"body",2),c([R()],Ai.prototype,"expanded",2);var h4=Ai;Ai.define("zn-note");var x0=_`@keyframes rotate-gradient{from{--rotate:0deg}to{--rotate:360deg}}:host{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-transform:none}:host *,:host *::before,:host *::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:rgb(var(--zn-border-color))}[hidden]{display:none !important}.width-container,.form-container,.wide-form-container{height:100%;width:100%;margin:var(--zn-default-margin,0 auto)}.width-container{max-width:var(--zn-container)}.form-container{max-width:var(--zn-container-ph)}.wide-form-container{max-width:var(--zn-container-lg)}:host{display:block}.tile{position:relative;display:flex;align-items:center;justify-content:space-between;min-height:48px;-moz-column-gap:var(--zn-spacing-large);column-gap:var(--zn-spacing-large);font-size:var(--zn-text-table-content-font-size);line-height:var(--zn-text-table-content-line-height);font-weight:var(--zn-text-table-content-font-weight);color:var(--zn-text-table-content-color)}.tile--has-image,.tile--has-caption,.tile--has-description,.tile--has-properties,.tile--has-actions{padding-inline:var(--zn-base-gap)}.tile--has-description.tile--has-caption{padding-block:var(--zn-base-gap)}.tile--has-image{padding:var(--zn-base-gap)}.tile--has-href{cursor:pointer}.tile--has-href:hover{background-color:var(--zn-color-neutral-100)}.tile--flush{padding:0}.tile--flush-x{padding-inline:0}.tile--flush-y{padding-block:0}a{color:inherit;text-decoration:none;cursor:pointer}::slotted(zn-icon){display:flex;justify-content:center;align-items:center}.tile__link{display:flex;align-items:center;justify-content:space-between;flex:1;-moz-column-gap:var(--zn-spacing-small);column-gap:var(--zn-spacing-small);min-width:0}.tile__left{display:flex;align-items:center;-moz-column-gap:var(--zn-spacing-small);column-gap:var(--zn-spacing-small);min-width:0}.tile__image{display:flex;align-items:center;flex-shrink:0}.tile__content{display:flex;flex-direction:column;justify-content:center;min-width:0}.tile--inline .tile__content{flex-direction:row;align-items:center;-moz-column-gap:var(--zn-spacing-x-small);column-gap:var(--zn-spacing-x-small)}.tile__caption{margin:0;font-weight:600;color:rgb(var(--zn-text-heading));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tile--plain .tile__caption{font-weight:var(--zn-text-table-content-font-weight);color:var(--zn-text-table-content-color)}.tile__description{margin:var(--zn-spacing-3x-small) 0 0;font-weight:var(--zn-text-table-content-font-weight);color:var(--zn-text-table-content-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tile--inline .tile__description{margin:0}.tile__right{display:flex;align-items:center;justify-content:flex-end;-moz-column-gap:var(--zn-spacing-large);column-gap:var(--zn-spacing-large);min-width:0}.tile__properties{display:flex;flex-direction:row;align-items:center;-moz-column-gap:var(--zn-spacing-large);column-gap:var(--zn-spacing-large);min-width:0;flex-shrink:0;overflow:hidden}.tile__properties ::slotted(*){white-space:nowrap}@container (max-width:359px){.tile__properties{display:none}}.tile__actions{display:flex;align-items:center;-moz-column-gap:var(--zn-spacing-small);column-gap:var(--zn-spacing-small);flex-shrink:0}:host([grouped]){display:grid;grid-column:1/-1;grid-template-columns:subgrid;align-items:center}:host([grouped]) .tile{display:grid;grid-column:1/-1;grid-template-columns:subgrid;align-items:center;justify-items:end;min-height:48px}:host([grouped]) .tile__link,:host([grouped]) .tile__right,:host([grouped]) .tile__properties,:host([grouped]) .tile__actions{display:contents}:host([grouped]) .tile__left{grid-column:1;justify-self:stretch;min-width:0;overflow:hidden}`;var We=class extends C{constructor(){super(...arguments);this.hasSlotController=new Y(this,"[default]","properties","actions","image")}_isLink(){return this.href||this.dataUri}_handleActionsClick(t){if(this._isLink()){for(let r of t.composedPath()){if(r===this)break;if(!(r instanceof Element))continue;let n=r.getAttribute("href");if(r.hasAttribute("data-uri")||n!==null&&n!==""&&!n.startsWith("#"))return}t.stopPropagation()}}render(){let t=this._isLink(),r=t?Ei`a`:Ei`div`,n=this.caption&&this.caption.length>0,a=this.description&&this.description.length>0,s=this.hasSlotController.test("properties"),l=this.hasSlotController.test("actions"),d=this.hasSlotController.test("image");return kt`
       <div
         class="${q({tile:!0,"tile--flush":this.flush,"tile--flush-x":this.flushX,"tile--flush-y":this.flushY,"tile--inline":this.inline,"tile--plain":this.plain,"tile--has-href":t,"tile--has-caption":n,"tile--has-description":a,"tile--has-properties":s,"tile--has-actions":l,"tile--has-image":d})}">
         <${r}
@@ -1736,7 +1736,7 @@ import{a as Fn,b as i3,c as yr,d as c,e as V}from"./chunks/zn.UBLZO6CI.js";var $
           </div>
         </div>
       </div>
-    `}};ar.styles=[sn.styles,z(Z0)],ar.dependencies={"zn-button":Et,"zn-copy-button":Su,"zn-expanding-action":Qu,"zn-icon":nt,"zn-navbar":_a,"zn-tab":Ju},c([p()],ar.prototype,"caption",2),c([p({attribute:"entity-id"})],ar.prototype,"entityId",2),c([p({attribute:"entity-id-show",type:Boolean})],ar.prototype,"entityIdShow",2),c([p({attribute:"full-location"})],ar.prototype,"fullLocation",2),c([p({type:Boolean,reflect:!0})],ar.prototype,"modal",2),c([p({type:Boolean,reflect:!0})],ar.prototype,"nested",2),c([p({type:Boolean,reflect:!0})],ar.prototype,"primary",2),c([p({attribute:"previous-path"})],ar.prototype,"previousPath",2),c([p({attribute:"previous-target"})],ar.prototype,"previousTarget",2),c([p()],ar.prototype,"summary",2),c([R()],ar.prototype,"scrolled",2),c([R()],ar.prototype,"tabDefinitions",2),c([R()],ar.prototype,"hasExpandingActions",2);var us=ar;var $4=us;us.define("zn-page");var t1=_`@keyframes rotate-gradient{from{--rotate:0deg}to{--rotate:360deg}}:host{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-transform:none}:host *,:host *::before,:host *::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:rgb(var(--zn-border-color))}[hidden]{display:none !important}.width-container,.form-container,.wide-form-container{height:100%;width:100%;margin:var(--zn-default-margin,0 auto)}.width-container{max-width:var(--zn-container)}.form-container{max-width:var(--zn-container-ph)}.wide-form-container{max-width:var(--zn-container-lg)}:host{display:block}.form-control-input{display:flex;align-items:center;gap:var(--zn-spacing-x-small)}zn-dialog{--width:min(80vw,900px);--icon-color:rgb(var(--zn-text))}.icon-picker__image-trigger{position:relative;flex:1;min-width:0;min-height:180px;border:1px solid var(--zn-input-border-color);border-radius:var(--zn-border-radius);cursor:pointer;transition:var(--zn-transition-medium) background,var(--zn-transition-medium) border-color}.icon-picker__image-trigger:focus-visible{border-color:var(--zn-color-primary-600);outline:var(--zn-focus-ring);outline-offset:var(--zn-focus-ring-offset)}.icon-picker__image-trigger:not(:focus-visible):hover{border-color:var(--zn-color-primary-700)}:host([disabled]) .icon-picker__image-trigger{cursor:not-allowed;opacity:0.5}.icon-picker__image-trigger-background{--zn-droparea-checker-size:12px;--zn-droparea-checker-a:var(--zn-color-neutral-50);--zn-droparea-checker-b:var(--zn-color-neutral-100);display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:inherit;padding:var(--zn-spacing-large) var(--zn-spacing-medium);box-sizing:border-box;background-color:var(--zn-droparea-checker-a);background-image:linear-gradient(45deg,var(--zn-droparea-checker-b) 25%,transparent 25%),linear-gradient(-45deg,var(--zn-droparea-checker-b) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--zn-droparea-checker-b) 75%),linear-gradient(-45deg,transparent 75%,var(--zn-droparea-checker-b) 75%);background-size:var(--zn-droparea-checker-size) var(--zn-droparea-checker-size);background-position:0 0,0 calc(var(--zn-droparea-checker-size) / 2),calc(var(--zn-droparea-checker-size) / 2) calc(var(--zn-droparea-checker-size) / -2),calc(var(--zn-droparea-checker-size) / -2) 0;border-radius:calc(var(--zn-border-radius) - 1px)}.icon-picker__image-trigger-preview{display:block;width:100%;height:150px;-o-object-fit:contain;object-fit:contain}.icon-picker__image-clear{position:absolute;top:var(--zn-spacing-small);right:var(--zn-spacing-small);z-index:1}.icon-picker__dialog-layout{display:flex;gap:var(--zn-spacing-large);height:40vh}.icon-picker__dialog-main{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden}.icon-picker__dialog-sidebar{width:180px;flex-shrink:0}@media (max-width:640px){zn-dialog{--width:100vw}zn-dialog::part(base){max-width:100%;max-height:100%;margin:0;border-radius:0;height:100dvh;width:100vw}.icon-picker__dialog-layout{height:calc(100dvh - 8rem);flex-direction:column}.icon-picker__dialog-sidebar{width:100%;flex-shrink:0}}.icon-picker__mode-switch{display:flex;gap:var(--zn-spacing-x-small);margin-bottom:var(--zn-spacing-small)}.icon-picker__upload{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--zn-spacing-small);border:dashed 1px rgb(var(--zn-border-color));border-radius:var(--zn-border-radius);padding:var(--zn-spacing-large);color:rgb(var(--zn-text-muted))}.icon-picker__upload-preview{max-width:100%;max-height:160px;-o-object-fit:contain;object-fit:contain;border-radius:var(--zn-border-radius)}.icon-picker__upload-filename{font-size:var(--zn-font-size-small);color:rgb(var(--zn-text-muted));word-break:break-all}.icon-picker__dialog-controls{display:flex;gap:var(--zn-spacing-small);margin-bottom:var(--zn-spacing-small)}.icon-picker__library-select{flex:1;min-width:0}.icon-picker__color-input{width:140px;flex-shrink:0}.icon-picker__icon-input{margin-bottom:var(--zn-spacing-small)}.icon-picker__search{margin-bottom:var(--zn-spacing-small)}.icon-picker__free-input{margin-bottom:var(--zn-spacing-small)}.icon-picker__grid{display:flex;flex-wrap:wrap;gap:var(--zn-spacing-x-small);flex:1;overflow-y:auto;align-content:flex-start;border:solid 1px rgb(var(--zn-border-color));border-radius:var(--zn-border-radius);padding:var(--zn-spacing-x-small)}.icon-picker__grid-item{display:flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0;border:2px solid transparent;border-radius:var(--zn-border-radius);background:transparent;color:var(--zn-text-color);cursor:pointer;transition:var(--zn-transition-fast) background-color,var(--zn-transition-fast) border-color}.icon-picker__grid-item:hover{background-color:rgba(var(--zn-color-primary),0.1)}.icon-picker__grid-item--selected{border-color:rgb(var(--zn-color-primary));background-color:rgba(var(--zn-color-primary),0.1)}.icon-picker__no-results{width:100%;text-align:center;padding:var(--zn-spacing-large);color:rgb(var(--zn-text-muted))}.icon-picker__preview{display:flex;flex-direction:column;align-items:center;gap:var(--zn-spacing-small);padding:var(--zn-spacing-medium);background-color:rgba(var(--zn-panel-secondary),0.5);border-radius:var(--zn-border-radius);text-align:center}.icon-picker__preview--empty{color:rgb(var(--zn-text-muted))}.icon-picker__preview-name{font-size:var(--zn-font-size-medium);font-family:var(--zn-font-mono);word-break:break-all}.icon-picker__preview-library{font-size:var(--zn-font-size-small);color:rgb(var(--zn-text-muted))}.icon-picker__preview-hint{font-size:var(--zn-font-size-small);color:rgb(var(--zn-text-muted))}.icon-picker__footer{display:flex;justify-content:flex-end;align-items:center;gap:var(--zn-spacing-small);--icon-color:currentColor}`;var _t=class _t extends C{constructor(){super(...arguments);this.formControlController=new rt(this,{assumeInteractionOn:["zn-change"],value:t=>t._file??t.icon,setValue:(t,r)=>{t.clearFile(),t.icon=r??""}});this.name="";this.icon="";this.label="";this.library="material-symbols-outlined";this.color="";this.noColor=!1;this.noLibrary=!1;this.helpText="";this.disabled=!1;this.required=!1;this.triggerSubmit=!1;this.allowUpload=!1;this.accept="image/*";this.defaultValue="";this._dialogOpen=!1;this._searchQuery="";this._iconList=[];this._filteredIcons=[];this._pendingIcon="";this._pendingLibrary="";this._pendingColor="";this._pendingFile=null;this._pendingFileUrl=null;this._mode="icon";this._file=null;this._fileUrl=null}get value(){return this.icon}set value(t){this.icon=t}get file(){return this._file}get isImageValue(){return!!this._file||this.icon.includes("/")}get validity(){return this.required&&!this.icon&&!this._file?{valid:!1,valueMissing:!0,badInput:!1,customError:!1,patternMismatch:!1,rangeOverflow:!1,rangeUnderflow:!1,stepMismatch:!1,tooLong:!1,tooShort:!1,typeMismatch:!1}:{valid:!0,valueMissing:!1,badInput:!1,customError:!1,patternMismatch:!1,rangeOverflow:!1,rangeUnderflow:!1,stepMismatch:!1,tooLong:!1,tooShort:!1,typeMismatch:!1}}get validationMessage(){return this.required&&!this.icon&&!this._file?"Please select an icon.":""}checkValidity(){return this.validity.valid}getForm(){return this.formControlController.getForm()}reportValidity(){return this.checkValidity()}setCustomValidity(t){this.formControlController.updateValidity()}isFreeInputLibrary(t){return _t.freeInputLibraries.has(t)}async getIconsForLibrary(t){try{switch(t){case"brands":return(await import("./chunks/zn.CU5HCKLN.js")).brandIcons;case"line":return(await import("./chunks/zn.7VCR5ZZL.js")).lineIcons;case"lucide":return(await import("./chunks/zn.R2EAU6OS.js")).lucideIcons;default:{let r=await import("./chunks/zn.NKUIXDNI.js");switch(t){case"material-outlined":return r.material_outlinedIcons;case"material-round":return r.material_roundIcons;case"material-sharp":return r.material_sharpIcons;case"material-two-tone":return r.material_two_toneIcons;case"material-symbols-outlined":return r.material_symbols_outlinedIcons;default:return r.materialIcons}}}}catch{return[]}}async openDialog(){this._pendingIcon=this.isImageValue?"":this.icon,this._pendingLibrary=this.library,this._pendingColor=this.color,this._searchQuery="",this._mode=this.allowUpload&&this.isImageValue?"upload":"icon",this._iconList=await this.getIconsForLibrary(this.library),this._filteredIcons=this._iconList.slice(0,200),this._dialogOpen=!0,await this.updateComplete,this._dialog.show()}closeDialog(){this.discardPendingFile(),this._dialog.hide(),this._dialogOpen=!1}handleConfirm(){this._mode==="upload"?this._pendingFile&&(this._fileUrl&&URL.revokeObjectURL(this._fileUrl),this._file=this._pendingFile,this._fileUrl=this._pendingFileUrl,this._pendingFile=null,this._pendingFileUrl=null,this.icon=""):(this.icon=this._pendingIcon,this.library=this._pendingLibrary,this.color=this._pendingColor,this.clearFile()),this.closeDialog(),this.emit("zn-change"),this.triggerSubmit&&this.formControlController.submit()}handleCancel(){this.closeDialog()}handleFileSelect(t){let r=t.target,n=r.files?.[0]??null;n&&(this.discardPendingFile(),this._pendingFile=n,this._pendingFileUrl=URL.createObjectURL(n),r.value="")}discardPendingFile(){this._pendingFileUrl&&URL.revokeObjectURL(this._pendingFileUrl),this._pendingFile=null,this._pendingFileUrl=null}clearFile(){this._fileUrl&&URL.revokeObjectURL(this._fileUrl),this._file=null,this._fileUrl=null}disconnectedCallback(){super.disconnectedCallback(),this.discardPendingFile(),this._fileUrl&&URL.revokeObjectURL(this._fileUrl)}handleSearchInput(t){let r=t.target;this._searchQuery=r.value.toLowerCase(),this.filterIcons()}filterIcons(){this._searchQuery?this._filteredIcons=this._iconList.filter(t=>t.includes(this._searchQuery)).slice(0,200):this._filteredIcons=this._iconList.slice(0,200)}handleIconSelect(t){this._pendingIcon=t}async handleLibraryChange(t){let r=t.target,n=this.isFreeInputLibrary(this._pendingLibrary);this._pendingLibrary=r.value;let a=this.isFreeInputLibrary(this._pendingLibrary);n!==a&&(this._pendingIcon=""),a||(this._iconList=await this.getIconsForLibrary(this._pendingLibrary),this.filterIcons())}handleColorInput(t){let r=t.target;this._pendingColor=r.value}handleFreeInput(t){let r=t.target;this._pendingIcon=r.value}handleClear(t){t.stopPropagation(),this.icon="",this.color="",this.clearFile(),this.emit("zn-change"),this.triggerSubmit&&this.formControlController.submit()}_handleTriggerClick(){this.disabled||this.openDialog()}_handleTriggerKeyDown(t){(t.key==="Enter"||t.key===" ")&&(t.preventDefault(),this._handleTriggerClick())}render(){let t=!!this.label,r=!!this.helpText,n=!!this.icon||!!this._file,a=this._fileUrl??this.icon,s=n&&!this.isImageValue?this.library:B,l=this._pendingFileUrl??(this.isImageValue&&!this._file?this.icon:this._fileUrl);return u`
+    `}};ar.styles=[sn.styles,z(Z0)],ar.dependencies={"zn-button":Et,"zn-copy-button":Su,"zn-expanding-action":Qu,"zn-icon":nt,"zn-navbar":_a,"zn-tab":Ju},c([p()],ar.prototype,"caption",2),c([p({attribute:"entity-id"})],ar.prototype,"entityId",2),c([p({attribute:"entity-id-show",type:Boolean})],ar.prototype,"entityIdShow",2),c([p({attribute:"full-location"})],ar.prototype,"fullLocation",2),c([p({type:Boolean,reflect:!0})],ar.prototype,"modal",2),c([p({type:Boolean,reflect:!0})],ar.prototype,"nested",2),c([p({type:Boolean,reflect:!0})],ar.prototype,"primary",2),c([p({attribute:"previous-path"})],ar.prototype,"previousPath",2),c([p({attribute:"previous-target"})],ar.prototype,"previousTarget",2),c([p()],ar.prototype,"summary",2),c([R()],ar.prototype,"scrolled",2),c([R()],ar.prototype,"tabDefinitions",2),c([R()],ar.prototype,"hasExpandingActions",2);var us=ar;var $4=us;us.define("zn-page");var t1=_`@keyframes rotate-gradient{from{--rotate:0deg}to{--rotate:360deg}}:host{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-transform:none}:host *,:host *::before,:host *::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:rgb(var(--zn-border-color))}[hidden]{display:none !important}.width-container,.form-container,.wide-form-container{height:100%;width:100%;margin:var(--zn-default-margin,0 auto)}.width-container{max-width:var(--zn-container)}.form-container{max-width:var(--zn-container-ph)}.wide-form-container{max-width:var(--zn-container-lg)}:host{display:block}.form-control-input{display:flex;align-items:center;gap:var(--zn-spacing-x-small)}zn-dialog{--width:min(80vw,900px);--icon-color:rgb(var(--zn-text))}.icon-picker__image-trigger{position:relative;flex:1;min-width:0;min-height:180px;border:1px solid var(--zn-input-border-color);border-radius:var(--zn-border-radius);cursor:pointer;transition:var(--zn-transition-medium) background,var(--zn-transition-medium) border-color}.icon-picker__image-trigger:focus-visible{border-color:var(--zn-color-primary-600);outline:var(--zn-focus-ring);outline-offset:var(--zn-focus-ring-offset)}.icon-picker__image-trigger:not(:focus-visible):hover{border-color:var(--zn-color-primary-700)}:host([disabled]) .icon-picker__image-trigger{cursor:not-allowed;opacity:0.5}.icon-picker__image-trigger-background{--zn-droparea-checker-size:12px;--zn-droparea-checker-a:var(--zn-color-neutral-50);--zn-droparea-checker-b:var(--zn-color-neutral-100);display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:inherit;padding:var(--zn-spacing-large) var(--zn-spacing-medium);box-sizing:border-box;background-color:var(--zn-droparea-checker-a);background-image:linear-gradient(45deg,var(--zn-droparea-checker-b) 25%,transparent 25%),linear-gradient(-45deg,var(--zn-droparea-checker-b) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--zn-droparea-checker-b) 75%),linear-gradient(-45deg,transparent 75%,var(--zn-droparea-checker-b) 75%);background-size:var(--zn-droparea-checker-size) var(--zn-droparea-checker-size);background-position:0 0,0 calc(var(--zn-droparea-checker-size) / 2),calc(var(--zn-droparea-checker-size) / 2) calc(var(--zn-droparea-checker-size) / -2),calc(var(--zn-droparea-checker-size) / -2) 0;border-radius:calc(var(--zn-border-radius) - 1px)}.icon-picker__image-trigger-preview{display:block;width:100%;height:150px;-o-object-fit:contain;object-fit:contain}.icon-picker__image-clear{position:absolute;top:var(--zn-spacing-small);right:var(--zn-spacing-small);z-index:1}.icon-picker__dialog-layout{display:flex;gap:var(--zn-spacing-large);height:40vh}.icon-picker__dialog-main{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden}.icon-picker__dialog-sidebar{width:180px;flex-shrink:0}@media (max-width:640px){zn-dialog{--width:100vw}zn-dialog::part(base){max-width:100%;max-height:100%;margin:0;border-radius:0;height:100dvh;width:100vw}.icon-picker__dialog-layout{height:calc(100dvh - 8rem);flex-direction:column}.icon-picker__dialog-sidebar{width:100%;flex-shrink:0}}.icon-picker__mode-switch{display:flex;gap:var(--zn-spacing-x-small);margin-bottom:var(--zn-spacing-small)}.icon-picker__upload{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--zn-spacing-small);border:dashed 1px rgb(var(--zn-border-color));border-radius:var(--zn-border-radius);padding:var(--zn-spacing-large);color:rgb(var(--zn-text-muted))}.icon-picker__upload-preview{max-width:100%;max-height:160px;-o-object-fit:contain;object-fit:contain;border-radius:var(--zn-border-radius)}.icon-picker__upload-filename{font-size:var(--zn-font-size-small);color:rgb(var(--zn-text-muted));word-break:break-all}.icon-picker__dialog-controls{display:flex;gap:var(--zn-spacing-small);margin-bottom:var(--zn-spacing-small)}.icon-picker__library-select{flex:1;min-width:0}.icon-picker__color-input{width:140px;flex-shrink:0}.icon-picker__icon-input{margin-bottom:var(--zn-spacing-small)}.icon-picker__search{margin-bottom:var(--zn-spacing-small)}.icon-picker__free-input{margin-bottom:var(--zn-spacing-small)}.icon-picker__grid{display:flex;flex-wrap:wrap;gap:var(--zn-spacing-x-small);flex:1;overflow-y:auto;align-content:flex-start;border:solid 1px rgb(var(--zn-border-color));border-radius:var(--zn-border-radius);padding:var(--zn-spacing-x-small)}.icon-picker__grid-item{display:flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0;border:2px solid transparent;border-radius:var(--zn-border-radius);background:transparent;color:var(--zn-text-color);cursor:pointer;transition:var(--zn-transition-fast) background-color,var(--zn-transition-fast) border-color}.icon-picker__grid-item:hover{background-color:rgba(var(--zn-color-primary),0.1)}.icon-picker__grid-item--selected{border-color:rgb(var(--zn-color-primary));background-color:rgba(var(--zn-color-primary),0.1)}.icon-picker__no-results{width:100%;text-align:center;padding:var(--zn-spacing-large);color:rgb(var(--zn-text-muted))}.icon-picker__preview{display:flex;flex-direction:column;align-items:center;gap:var(--zn-spacing-small);padding:var(--zn-spacing-medium);background-color:rgba(var(--zn-panel-secondary),0.5);border-radius:var(--zn-border-radius);text-align:center}.icon-picker__preview--empty{color:rgb(var(--zn-text-muted))}.icon-picker__preview-name{font-size:var(--zn-font-size-medium);font-family:var(--zn-font-mono);word-break:break-all}.icon-picker__preview-library{font-size:var(--zn-font-size-small);color:rgb(var(--zn-text-muted))}.icon-picker__preview-hint{font-size:var(--zn-font-size-small);color:rgb(var(--zn-text-muted))}.icon-picker__footer{display:flex;justify-content:flex-end;align-items:center;gap:var(--zn-spacing-small);--icon-color:currentColor}`;var _t=class _t extends C{constructor(){super(...arguments);this.formControlController=new rt(this,{assumeInteractionOn:["zn-change"],value:t=>t._file??t.icon,setValue:(t,r)=>{t.clearFile(),t.icon=r??""}});this.name="";this.icon="";this.label="";this.library="material-symbols-outlined";this.color="";this.noColor=!1;this.noLibrary=!1;this.helpText="";this.disabled=!1;this.required=!1;this.triggerSubmit=!1;this.allowUpload=!1;this.accept="image/*";this.defaultValue="";this._dialogOpen=!1;this._searchQuery="";this._iconList=[];this._filteredIcons=[];this._pendingIcon="";this._pendingLibrary="";this._pendingColor="";this._pendingFile=null;this._pendingFileUrl=null;this._mode="icon";this._file=null;this._fileUrl=null}get value(){return this.icon}set value(t){this.icon=t}get file(){return this._file}get isImageValue(){return!!this._file||this.icon.includes("/")}get validity(){return this.required&&!this.icon&&!this._file?{valid:!1,valueMissing:!0,badInput:!1,customError:!1,patternMismatch:!1,rangeOverflow:!1,rangeUnderflow:!1,stepMismatch:!1,tooLong:!1,tooShort:!1,typeMismatch:!1}:{valid:!0,valueMissing:!1,badInput:!1,customError:!1,patternMismatch:!1,rangeOverflow:!1,rangeUnderflow:!1,stepMismatch:!1,tooLong:!1,tooShort:!1,typeMismatch:!1}}get validationMessage(){return this.required&&!this.icon&&!this._file?"Please select an icon.":""}checkValidity(){return this.validity.valid}getForm(){return this.formControlController.getForm()}reportValidity(){return this.checkValidity()}setCustomValidity(t){this.formControlController.updateValidity()}isFreeInputLibrary(t){return _t.freeInputLibraries.has(t)}async getIconsForLibrary(t){try{switch(t){case"brands":return(await import("./chunks/zn.CU5HCKLN.js")).brandIcons;case"line":return(await import("./chunks/zn.7VCR5ZZL.js")).lineIcons;case"lucide":return(await import("./chunks/zn.R2EAU6OS.js")).lucideIcons;default:{let r=await import("./chunks/zn.NKUIXDNI.js");switch(t){case"material-outlined":return r.material_outlinedIcons;case"material-round":return r.material_roundIcons;case"material-sharp":return r.material_sharpIcons;case"material-two-tone":return r.material_two_toneIcons;case"material-symbols-outlined":return r.material_symbols_outlinedIcons;default:return r.materialIcons}}}}catch{return[]}}async openDialog(){this._pendingIcon=this.isImageValue?"":this.icon,this._pendingLibrary=this.library,this._pendingColor=this.color,this._searchQuery="",this._mode=this.allowUpload&&this.isImageValue?"upload":"icon",this._iconList=await this.getIconsForLibrary(this.library),this._filteredIcons=this._iconList.slice(0,200),this._dialogOpen=!0,await this.updateComplete,this._dialog.show()}closeDialog(){this.discardPendingFile(),this._dialog.hide(),this._dialogOpen=!1}handleConfirm(){this._mode==="upload"?this._pendingFile&&(this._fileUrl&&URL.revokeObjectURL(this._fileUrl),this._file=this._pendingFile,this._fileUrl=this._pendingFileUrl,this._pendingFile=null,this._pendingFileUrl=null,this.icon=""):(this.icon=this._pendingIcon,this.library=this._pendingLibrary,this.color=this._pendingColor,this.clearFile()),this.closeDialog(),this.emit("zn-change"),this.triggerSubmit&&this.formControlController.submit()}handleCancel(){this.closeDialog()}handleFileSelect(t){let r=t.target,n=r.files?.[0]??null;n&&(this.discardPendingFile(),this._pendingFile=n,this._pendingFileUrl=URL.createObjectURL(n),r.value="")}discardPendingFile(){this._pendingFileUrl&&URL.revokeObjectURL(this._pendingFileUrl),this._pendingFile=null,this._pendingFileUrl=null}clearFile(){this._fileUrl&&URL.revokeObjectURL(this._fileUrl),this._file=null,this._fileUrl=null}disconnectedCallback(){super.disconnectedCallback(),this.discardPendingFile(),this._fileUrl&&URL.revokeObjectURL(this._fileUrl)}syncHiddenInputs(){let t=[["icon",this.icon,!0],["library",this.library,!this.noLibrary],["color",this.color,!this.noColor]];for(let[r,n,a]of t){let s=`${this.name}[${r}]`,l=this.querySelector(`input[type="hidden"][name="${s}"]`);if(!this.name||!a){l?.remove();continue}l||(l=document.createElement("input"),l.type="hidden",l.name=s,this.appendChild(l)),l.value=n??""}}updated(t){super.updated(t),this.syncHiddenInputs()}handleSearchInput(t){let r=t.target;this._searchQuery=r.value.toLowerCase(),this.filterIcons()}filterIcons(){this._searchQuery?this._filteredIcons=this._iconList.filter(t=>t.includes(this._searchQuery)).slice(0,200):this._filteredIcons=this._iconList.slice(0,200)}handleIconSelect(t){this._pendingIcon=t}async handleLibraryChange(t){let r=t.target,n=this.isFreeInputLibrary(this._pendingLibrary);this._pendingLibrary=r.value;let a=this.isFreeInputLibrary(this._pendingLibrary);n!==a&&(this._pendingIcon=""),a||(this._iconList=await this.getIconsForLibrary(this._pendingLibrary),this.filterIcons())}handleColorInput(t){let r=t.target;this._pendingColor=r.value}handleFreeInput(t){let r=t.target;this._pendingIcon=r.value}handleClear(t){t.stopPropagation(),this.icon="",this.color="",this.clearFile(),this.emit("zn-change"),this.triggerSubmit&&this.formControlController.submit()}_handleTriggerClick(){this.disabled||this.openDialog()}_handleTriggerKeyDown(t){(t.key==="Enter"||t.key===" ")&&(t.preventDefault(),this._handleTriggerClick())}render(){let t=!!this.label,r=!!this.helpText,n=!!this.icon||!!this._file,a=this._fileUrl??this.icon,s=n&&!this.isImageValue?this.library:B,l=this._pendingFileUrl??(this.isImageValue&&!this._file?this.icon:this._fileUrl);return u`
       <div part="form-control"
            class="form-control form-control--medium ${t?"form-control--has-label":""} ${r?"form-control--has-help-text":""}">
 
@@ -1793,12 +1793,6 @@ import{a as Fn,b as i3,c as yr,d as c,e as V}from"./chunks/zn.UBLZO6CI.js";var $
           `}
         </div>
 
-        ${this.name?u`
-          <input type="hidden" name="${this.name}[icon]" .value=${this.icon}>
-          ${this.noLibrary?B:u`<input type="hidden" name="${this.name}[library]" .value=${this.library}>`}
-          ${this.noColor?B:u`<input type="hidden" name="${this.name}[color]" .value=${this.color}>`}
-        `:B}
-
         <div
           part="form-control-help-text"
           class="form-control__help-text"
@@ -3647,24 +3641,24 @@ ${Da(this.code(i,t))}
           <slot name="help-text">${this.helpText}</slot>
         </div>
       </fieldset>
-    `}};le.styles=[z(Ct),z(j_)],c([F("slot:not([name])")],le.prototype,"defaultSlot",2),c([F(".radio-group__validation-input")],le.prototype,"validationInput",2),c([R()],le.prototype,"errorMessage",2),c([R()],le.prototype,"defaultValue",2),c([p()],le.prototype,"label",2),c([p({attribute:"label-tooltip"})],le.prototype,"labelTooltip",2),c([p({attribute:"help-text"})],le.prototype,"helpText",2),c([p()],le.prototype,"name",2),c([p({reflect:!0})],le.prototype,"value",2),c([p({reflect:!0})],le.prototype,"size",2),c([p({type:Boolean,reflect:!0})],le.prototype,"horizontal",2),c([p({type:Boolean,reflect:!0})],le.prototype,"contained",2),c([p({type:Boolean,reflect:!0})],le.prototype,"square",2),c([p({type:Boolean,reflect:!0})],le.prototype,"wrap",2),c([p({reflect:!0})],le.prototype,"form",2),c([p({type:Boolean,reflect:!0})],le.prototype,"required",2),c([K("size",{waitUntilFirstUpdate:!0})],le.prototype,"handleSizeChange",1),c([K("value")],le.prototype,"handleValueChange",1);var XM=le;le.define("zn-radio-group");var G_=(o,i,t)=>{let r=new Map;for(let n=i;n<=t;n++)r.set(o[n],n);return r},Xo=be(class extends ir{constructor(o){if(super(o),o.type!==cr.CHILD)throw Error("repeat() can only be used in text expressions")}dt(o,i,t){let r;t===void 0?t=i:i!==void 0&&(r=i);let n=[],a=[],s=0;for(let l of o)n[s]=r?r(l,s):s,a[s]=t(l,s),s++;return{values:a,keys:n}}render(o,i,t){return this.dt(o,i,t).values}update(o,[i,t,r]){let n=Hb(o),{values:a,keys:s}=this.dt(i,t,r);if(!Array.isArray(n))return this.ut=s,a;let l=this.ut??(this.ut=[]),d=[],h,m,f=0,b=n.length-1,g=0,v=a.length-1;for(;f<=b&&g<=v;)if(n[f]===null)f++;else if(n[b]===null)b--;else if(l[f]===s[g])d[g]=go(n[f],a[g]),f++,g++;else if(l[b]===s[v])d[v]=go(n[b],a[v]),b--,v--;else if(l[f]===s[v])d[v]=go(n[f],a[v]),ts(o,d[v+1],n[f]),f++,v--;else if(l[b]===s[g])d[g]=go(n[b],a[g]),ts(o,n[f],n[b]),b--,g++;else if(h===void 0&&(h=G_(s,g,v),m=G_(l,f,b)),h.has(l[f]))if(h.has(l[b])){let y=m.get(s[g]),S=y!==void 0?n[y]:null;if(S===null){let E=ts(o,n[f]);go(E,a[g]),d[g]=E}else d[g]=go(S,a[g]),ts(o,n[f],S),n[y]=null;g++}else vd(n[b]),b--;else vd(n[f]),f++;for(;g<=v;){let y=ts(o,d[v+1]);go(y,a[g]),d[g++]=y}for(;f<=b;){let y=n[f++];y!==null&&vd(y)}return this.ut=s,es(o,d),ge}});var W_=_`@keyframes rotate-gradient{from{--rotate:0deg}to{--rotate:360deg}}:host{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-transform:none}:host *,:host *::before,:host *::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:rgb(var(--zn-border-color))}[hidden]{display:none !important}.width-container,.form-container,.wide-form-container{height:100%;width:100%;margin:var(--zn-default-margin,0 auto)}.width-container{max-width:var(--zn-container)}.form-container{max-width:var(--zn-container-ph)}.wide-form-container{max-width:var(--zn-container-lg)}:host{display:block}.input__control{border:0;clip-path:inset(50%);height:1px;margin:0;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.form-control--droparea .input__control{left:50%}.form-control-input{position:relative}.button__wrapper{align-items:center;display:flex;gap:var(--zn-input-spacing-medium)}.form-control--small .button__wrapper{gap:var(--zn-input-spacing-small)}:host([size=large]) .button__wrapper{gap:var(--zn-input-spacing-large)}.input__value{display:inline-flex;justify-content:center;align-items:center;gap:var(--zn-spacing-small);color:var(--zn-input-color);font-size:var(--zn-input-label-font-size-medium)}.input__value.input__value--hidden{display:none}.input__delete{cursor:pointer;color:var(--zn-input-color);font-size:var(--zn-input-label-font-size-medium)}.input__delete:hover{color:var(--zn-color-primary-600)}.input__value--placeholder{color:var(--zn-input-help-text-color)}.form-control--small .input__value{font-size:var(--zn-input-label-font-size-small)}.form-control--large .input__value{font-size:var(--zn-input-label-font-size-large)}.form-control--user-dragging:not([disabled]) .button::part(base){background:none;border-color:var(--zn-color-primary-900);color:var(--zn-color-primary-900)}.droparea{--highlight-color:var(--zn-color-primary-600);position:relative;border:1px solid var(--zn-input-border-color);border-radius:var(--zn-border-radius);font:var(--zn-font-size-medium);min-height:180px;transition:var(--zn-transition-medium) background,var(--zn-transition-medium) border-color}.droparea:focus-visible{border-color:var(--zn-color-primary-600);outline:var(--zn-focus-ring);outline-offset:var(--zn-focus-ring-offset)}:host([disabled]) .droparea{--highlight-color:var(--zn-color-neutral-600)}:host([disabled]) .input__value{display:none}.droparea__background{align-items:center;display:flex;justify-content:center;gap:var(--zn-spacing-x-small);padding:var(--zn-spacing-large) var(--zn-spacing-medium);width:100%;height:100%;min-height:inherit;box-sizing:border-box}.droparea__clear{position:absolute;top:var(--zn-spacing-small);right:var(--zn-spacing-small);z-index:1}.droparea__upload{text-transform:uppercase;letter-spacing:0.02em}.droparea--has-preview .droparea__background{--zn-droparea-checker-size:12px;--zn-droparea-checker-a:var(--zn-color-neutral-50);--zn-droparea-checker-b:var(--zn-color-neutral-100);background-color:var(--zn-droparea-checker-a);background-image:linear-gradient(45deg,var(--zn-droparea-checker-b) 25%,transparent 25%),linear-gradient(-45deg,var(--zn-droparea-checker-b) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--zn-droparea-checker-b) 75%),linear-gradient(-45deg,transparent 75%,var(--zn-droparea-checker-b) 75%);background-size:var(--zn-droparea-checker-size) var(--zn-droparea-checker-size);background-position:0 0,0 calc(var(--zn-droparea-checker-size) / 2),calc(var(--zn-droparea-checker-size) / 2) calc(var(--zn-droparea-checker-size) / -2),calc(var(--zn-droparea-checker-size) / -2) 0;border-radius:calc(var(--zn-border-radius) - 1px)}.droparea__preview{display:block;position:relative;z-index:1;width:100%;height:150px;max-width:100%;-o-object-fit:contain;object-fit:contain;overflow:hidden;overflow-wrap:anywhere;word-break:break-word;text-align:center;font-size:var(--zn-input-help-text-font-size-medium);color:var(--zn-input-color)}.droparea__filename{color:var(--zn-input-color);font-size:var(--zn-input-label-font-size-medium);font-weight:var(--zn-font-weight-medium);word-break:break-all;text-align:center;padding:0 var(--zn-spacing-3x-large)}.file-wrapper{display:flex;flex-direction:row;flex-wrap:wrap}.form-control--small .droparea{font:var(--zn-font-size-small);min-height:140px}.form-control--small .droparea__preview{height:110px}.form-control--large .droparea{font:var(--zn-font-size-large);min-height:220px}.form-control--large .droparea__preview{height:190px}:host([disabled]) .droparea,:host([disabled]) .input__value{cursor:not-allowed;opacity:0.5}:host(:not([disabled])) .form-control--user-dragging .droparea{background:var(--zn-color-primary-50);border-color:var(--zn-color-primary-600);cursor:pointer}:host(:not([disabled])) .droparea:not(:focus-visible):hover{--highlight-color:var(--zn-color-primary-800);border-color:var(--zn-color-primary-700);cursor:pointer}:host(:not([disabled])) .droparea:hover .droparea__upload::part(base),:host(:not([disabled])) .droparea__upload:hover::part(base),:host(:not([disabled])) .form-control--user-dragging .droparea__upload::part(base){background:var(--zn-color-primary-50);border-color:var(--zn-color-primary-700);color:var(--zn-color-primary-800)}.droparea__upload::part(icon){pointer-events:none}:host([data-user-invalid]:not([disabled])) .droparea{border-color:var(--zn-color-error)}.clear-confirm__text{margin:0;color:var(--zn-input-color)}.form-control__link{display:inline-block;margin-top:var(--zn-spacing-x-small);font-size:var(--zn-input-help-text-font-size-medium);color:var(--zn-color-primary-700);word-break:break-all;text-decoration:none;max-width:100%}.form-control__link:hover{color:var(--zn-color-primary-800);text-decoration:underline}`;var ft=class extends C{constructor(){super(...arguments);this.formControlController=new rt(this,{assumeInteractionOn:["zn-change"],value:t=>t.uploadUrl?t.src?t.src:t.clearedByUser?"":void 0:t.files?.length?t.files:t.clearedByUser?"":void 0});this.clearedByUser=!1;this.hasSlotController=new Y(this,"help-text","label");this.localize=new He(this);this.userIsDragging=!1;this.fileObjectUrl=null;this.name="";this.defaultValue="";this.size="medium";this.label="";this.clearable=!1;this.helpText="";this.disabled=!1;this.droparea=!1;this.accept="";this.multiple=!1;this.webkitdirectory=!1;this.form="";this.required=!1;this.hideValue=!1;this.src="";this.triggerSubmit=!1;this.showLink=!1;this.uploadUrl="";this.uploading=!1;this.handleInvalid=t=>{this.formControlController.setValidity(!1),this.formControlController.emitInvalidEvent(t)};this.handleDragOver=t=>{t.preventDefault(),t.stopPropagation(),this.userIsDragging=!0};this.handleDragLeave=t=>{t.preventDefault(),t.stopPropagation(),this.userIsDragging=!1};this.handleDrop=async t=>{if(t.preventDefault(),t.stopPropagation(),!t.dataTransfer)return;let r=await this.handleTransferItems(t.dataTransfer.items);if(this.userIsDragging=!1,!r)return;if(!this.multiple&&!this.webkitdirectory&&r.length>1){this.emit("zn-error");return}if(this.hasSlotController.test("trigger"))this.handleFiles(r);else{let a=this.inputChosen,s=this.dropareaIcon;if(this.droparea&&s){let l=Sn(s,"file.iconDrop",{dir:this.localize.dir()});gi(s,l.keyframes,l.options)}if(a){let l=Sn(a,"file.text.disappear",{dir:this.localize.dir()});await gi(a,l.keyframes,l.options)}if(this.handleFiles(r),a){let l=Sn(a,"file.text.appear",{dir:this.localize.dir()});await gi(a,l.keyframes,l.options)}}this.input.dispatchEvent(new Event("change"))};this.removeFile=t=>{t.preventDefault(),t.stopPropagation();let r=Array.from(this.files||[]),n=t.target.parentElement?.getAttribute("data-file-name"),a=r.findIndex(l=>l.name===n);a!==-1&&r.splice(a,1);let s=new DataTransfer;r.forEach(l=>s.items.add(l)),this.files=s.files,s.files.length||(this.clearedByUser=!0),this.input.dispatchEvent(new Event("change"))};this.handleClearClick=t=>{t.preventDefault(),t.stopPropagation(),this.clearConfirmDialog?.show()};this.confirmClear=()=>{let t=(this.files?.length??0)>0;this.input.value="",this.files=null,t||(this.src=""),this.clearedByUser=!0,this.clearConfirmDialog?.hide(),this.input.dispatchEvent(new Event("change")),this.emit("zn-clear")}}set files(t){this.input&&(this.input.files=t,t?.length&&(this.clearedByUser=!1),this.updatePreview())}get files(){return this.input?.files}set value(t){if(this.uploadUrl){this.src=t??"";return}this.input&&(this.input.value=t)}get value(){return this.uploadUrl?this.src??"":this.input?.value}get validity(){return this.input?.validity}get validationMessage(){return this.input.validationMessage}checkValidity(){return this.input.checkValidity()}getForm(){return this.formControlController.getForm()}reportValidity(){return this.input.reportValidity()}setCustomValidity(t){this.input.setCustomValidity(t),this.formControlController.updateValidity()}handleDisabledChange(){this.formControlController.setValidity(this.disabled)}async handleValueChange(){await this.updateComplete,this.formControlController.updateValidity()}focus(t){if(this.droparea){this.dropareaWrapper?.focus(t);return}this.button?.focus(t)}blur(){if(this.droparea){this.dropareaWrapper?.blur();return}this.button?.blur()}handleFiles(t){if(!t){this.value="";return}this.files=t}async handleTransferItems(t){if(!t)return this.value="",new Promise((d,h)=>{h(new Error("No proper items found"))});let n=Array.from(t).map(d=>d.webkitGetAsEntry()).map(d=>this.getFilesFromEntry(d)),s=(await Promise.all(n)).flat(),l=new DataTransfer;return Array.from(s).forEach(d=>l.items.add(d)),l.files}async getFilesFromEntry(t){return t?t.isFile?new Promise((r,n)=>{t.file(a=>r([a]),n)}):t.isDirectory?new Promise((r,n)=>{t.createReader().readEntries(s=>{Promise.all(s.map(l=>this.getFilesFromEntry(l))).then(l=>{r(l.flat())}).catch(n)})}):[]:[]}handleClick(t){t.preventDefault(),this.input.click()}handleChange(t){t.preventDefault(),t.stopPropagation(),this.updatePreview();let r=this.files?.[0];if(this.uploadUrl&&r){this.uploadFile(r);return}this.emit("zn-input"),this.emit("zn-change"),this.triggerSubmit&&this.formControlController.submit()}async uploadFile(t){this.uploading=!0;try{let r=new FormData;r.append("file",t,t.name);let n=await fetch(this.uploadUrl,{method:"POST",body:r,credentials:"same-origin"});if(!n.ok)throw new Error(`upload failed with status ${n.status}`);let a=await n.json();if(!a.url)throw new Error("upload response missing url");this.src=a.url,this.input.value="",this.files=null,this.clearedByUser=!1,this.emit("zn-input"),this.emit("zn-change"),this.triggerSubmit&&this.formControlController.submit()}catch(r){console.warn("<zn-file> upload failed",r),this.input.value="",this.files=null,this.emit("zn-error")}finally{this.uploading=!1}}handleFocus(){this.emit("zn-focus")}handleBlur(){this.emit("zn-blur")}clear(){this.input&&(this.input.value=""),this.files=null,this.src="",this.updatePreview(),this.formControlController.updateValidity()}updatePreview(){this.fileObjectUrl&&(URL.revokeObjectURL(this.fileObjectUrl),this.fileObjectUrl=null);let t=this.files?.[0];t&&t.type.startsWith("image/")&&(this.fileObjectUrl=URL.createObjectURL(t))}get previewSrc(){return this.fileObjectUrl??this.src??""}disconnectedCallback(){super.disconnectedCallback(),this.fileObjectUrl&&(URL.revokeObjectURL(this.fileObjectUrl),this.fileObjectUrl=null)}renderFileValueWithDelete(){let t=Array.from(this.files||[]),r=this.clearable,n=this.localize.term("numFilesSelected",0,this.webkitdirectory);return u`
+    `}};le.styles=[z(Ct),z(j_)],c([F("slot:not([name])")],le.prototype,"defaultSlot",2),c([F(".radio-group__validation-input")],le.prototype,"validationInput",2),c([R()],le.prototype,"errorMessage",2),c([R()],le.prototype,"defaultValue",2),c([p()],le.prototype,"label",2),c([p({attribute:"label-tooltip"})],le.prototype,"labelTooltip",2),c([p({attribute:"help-text"})],le.prototype,"helpText",2),c([p()],le.prototype,"name",2),c([p({reflect:!0})],le.prototype,"value",2),c([p({reflect:!0})],le.prototype,"size",2),c([p({type:Boolean,reflect:!0})],le.prototype,"horizontal",2),c([p({type:Boolean,reflect:!0})],le.prototype,"contained",2),c([p({type:Boolean,reflect:!0})],le.prototype,"square",2),c([p({type:Boolean,reflect:!0})],le.prototype,"wrap",2),c([p({reflect:!0})],le.prototype,"form",2),c([p({type:Boolean,reflect:!0})],le.prototype,"required",2),c([K("size",{waitUntilFirstUpdate:!0})],le.prototype,"handleSizeChange",1),c([K("value")],le.prototype,"handleValueChange",1);var XM=le;le.define("zn-radio-group");var G_=(o,i,t)=>{let r=new Map;for(let n=i;n<=t;n++)r.set(o[n],n);return r},Xo=be(class extends ir{constructor(o){if(super(o),o.type!==cr.CHILD)throw Error("repeat() can only be used in text expressions")}dt(o,i,t){let r;t===void 0?t=i:i!==void 0&&(r=i);let n=[],a=[],s=0;for(let l of o)n[s]=r?r(l,s):s,a[s]=t(l,s),s++;return{values:a,keys:n}}render(o,i,t){return this.dt(o,i,t).values}update(o,[i,t,r]){let n=Hb(o),{values:a,keys:s}=this.dt(i,t,r);if(!Array.isArray(n))return this.ut=s,a;let l=this.ut??(this.ut=[]),d=[],h,m,f=0,b=n.length-1,g=0,v=a.length-1;for(;f<=b&&g<=v;)if(n[f]===null)f++;else if(n[b]===null)b--;else if(l[f]===s[g])d[g]=go(n[f],a[g]),f++,g++;else if(l[b]===s[v])d[v]=go(n[b],a[v]),b--,v--;else if(l[f]===s[v])d[v]=go(n[f],a[v]),ts(o,d[v+1],n[f]),f++,v--;else if(l[b]===s[g])d[g]=go(n[b],a[g]),ts(o,n[f],n[b]),b--,g++;else if(h===void 0&&(h=G_(s,g,v),m=G_(l,f,b)),h.has(l[f]))if(h.has(l[b])){let y=m.get(s[g]),S=y!==void 0?n[y]:null;if(S===null){let E=ts(o,n[f]);go(E,a[g]),d[g]=E}else d[g]=go(S,a[g]),ts(o,n[f],S),n[y]=null;g++}else vd(n[b]),b--;else vd(n[f]),f++;for(;g<=v;){let y=ts(o,d[v+1]);go(y,a[g]),d[g++]=y}for(;f<=b;){let y=n[f++];y!==null&&vd(y)}return this.ut=s,es(o,d),ge}});var W_=_`@keyframes rotate-gradient{from{--rotate:0deg}to{--rotate:360deg}}:host{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-transform:none}:host *,:host *::before,:host *::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:rgb(var(--zn-border-color))}[hidden]{display:none !important}.width-container,.form-container,.wide-form-container{height:100%;width:100%;margin:var(--zn-default-margin,0 auto)}.width-container{max-width:var(--zn-container)}.form-container{max-width:var(--zn-container-ph)}.wide-form-container{max-width:var(--zn-container-lg)}:host{display:block}.input__control{border:0;clip-path:inset(50%);height:1px;margin:0;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.form-control--droparea .input__control{left:50%}.form-control-input{position:relative}.button__wrapper{align-items:center;display:flex;gap:var(--zn-input-spacing-medium)}.form-control--small .button__wrapper{gap:var(--zn-input-spacing-small)}:host([size=large]) .button__wrapper{gap:var(--zn-input-spacing-large)}.input__value{display:inline-flex;justify-content:center;align-items:center;gap:var(--zn-spacing-small);color:var(--zn-input-color);font-size:var(--zn-input-label-font-size-medium)}.input__value.input__value--hidden{display:none}.input__delete{cursor:pointer;color:var(--zn-input-color);font-size:var(--zn-input-label-font-size-medium)}.input__delete:hover{color:var(--zn-color-primary-600)}.input__value--placeholder{color:var(--zn-input-help-text-color)}.form-control--small .input__value{font-size:var(--zn-input-label-font-size-small)}.form-control--large .input__value{font-size:var(--zn-input-label-font-size-large)}.form-control--user-dragging:not([disabled]) .button::part(base){background:none;border-color:var(--zn-color-primary-900);color:var(--zn-color-primary-900)}.droparea{--highlight-color:var(--zn-color-primary-600);position:relative;border:1px solid var(--zn-input-border-color);border-radius:var(--zn-border-radius);font:var(--zn-font-size-medium);min-height:180px;transition:var(--zn-transition-medium) background,var(--zn-transition-medium) border-color}.droparea:focus-visible{border-color:var(--zn-color-primary-600);outline:var(--zn-focus-ring);outline-offset:var(--zn-focus-ring-offset)}:host([disabled]) .droparea{--highlight-color:var(--zn-color-neutral-600)}:host([disabled]) .input__value{display:none}.droparea__background{align-items:center;display:flex;justify-content:center;gap:var(--zn-spacing-x-small);padding:var(--zn-spacing-large) var(--zn-spacing-medium);width:100%;height:100%;min-height:inherit;box-sizing:border-box}.droparea__clear{position:absolute;top:var(--zn-spacing-small);right:var(--zn-spacing-small);z-index:1}.droparea__upload{text-transform:uppercase;letter-spacing:0.02em}.droparea--has-preview .droparea__background{--zn-droparea-checker-size:12px;--zn-droparea-checker-a:var(--zn-color-neutral-50);--zn-droparea-checker-b:var(--zn-color-neutral-100);background-color:var(--zn-droparea-checker-a);background-image:linear-gradient(45deg,var(--zn-droparea-checker-b) 25%,transparent 25%),linear-gradient(-45deg,var(--zn-droparea-checker-b) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--zn-droparea-checker-b) 75%),linear-gradient(-45deg,transparent 75%,var(--zn-droparea-checker-b) 75%);background-size:var(--zn-droparea-checker-size) var(--zn-droparea-checker-size);background-position:0 0,0 calc(var(--zn-droparea-checker-size) / 2),calc(var(--zn-droparea-checker-size) / 2) calc(var(--zn-droparea-checker-size) / -2),calc(var(--zn-droparea-checker-size) / -2) 0;border-radius:calc(var(--zn-border-radius) - 1px)}.droparea__preview{display:block;position:relative;z-index:1;width:100%;height:150px;max-width:100%;-o-object-fit:contain;object-fit:contain;overflow:hidden;overflow-wrap:anywhere;word-break:break-word;text-align:center;font-size:var(--zn-input-help-text-font-size-medium);color:var(--zn-input-color)}.droparea__filename{color:var(--zn-input-color);font-size:var(--zn-input-label-font-size-medium);font-weight:var(--zn-font-weight-medium);word-break:break-all;text-align:center;padding:0 var(--zn-spacing-3x-large)}.file-wrapper{display:flex;flex-direction:row;flex-wrap:wrap}.form-control--small .droparea{font:var(--zn-font-size-small);min-height:140px}.form-control--small .droparea__preview{height:110px}.form-control--large .droparea{font:var(--zn-font-size-large);min-height:220px}.form-control--large .droparea__preview{height:190px}:host([disabled]) .droparea,:host([disabled]) .input__value{cursor:not-allowed;opacity:0.5}:host(:not([disabled])) .form-control--user-dragging .droparea{background:var(--zn-color-primary-50);border-color:var(--zn-color-primary-600);cursor:pointer}:host(:not([disabled])) .droparea:not(:focus-visible):hover{--highlight-color:var(--zn-color-primary-800);border-color:var(--zn-color-primary-700);cursor:pointer}:host(:not([disabled])) .droparea:hover .droparea__upload::part(base),:host(:not([disabled])) .droparea__upload:hover::part(base),:host(:not([disabled])) .form-control--user-dragging .droparea__upload::part(base){background:var(--zn-color-primary-50);border-color:var(--zn-color-primary-700);color:var(--zn-color-primary-800)}.droparea__upload::part(icon){pointer-events:none}:host([data-user-invalid]:not([disabled])) .droparea{border-color:var(--zn-color-error)}.clear-confirm__text{margin:0;color:var(--zn-input-color)}.form-control__link{display:inline-block;margin-top:var(--zn-spacing-x-small);font-size:var(--zn-input-help-text-font-size-medium);color:var(--zn-color-primary-700);word-break:break-all;text-decoration:none;max-width:100%}.form-control__link:hover{color:var(--zn-color-primary-800);text-decoration:underline}`;var ft=class extends C{constructor(){super(...arguments);this.formControlController=new rt(this,{assumeInteractionOn:["zn-change"],value:t=>t.uploadUrl?t.src?t.src:t.clearedByUser?"":void 0:t.files?.length?t.files:t.clearedByUser?"":void 0});this.clearedByUser=!1;this.hasSlotController=new Y(this,"help-text","label");this.localize=new He(this);this.userIsDragging=!1;this.fileObjectUrl=null;this.name="";this.defaultValue="";this.size="medium";this.label="";this.clearable=!1;this.helpText="";this.disabled=!1;this.droparea=!1;this.accept="";this.multiple=!1;this.webkitdirectory=!1;this.form="";this.required=!1;this.hideValue=!1;this.src="";this.triggerSubmit=!1;this.showLink=!1;this.uploadUrl="";this.uploading=!1;this.handleInvalid=t=>{this.formControlController.setValidity(!1),this.formControlController.emitInvalidEvent(t)};this.handleDragOver=t=>{t.preventDefault(),t.stopPropagation(),this.userIsDragging=!0};this.handleDragLeave=t=>{t.preventDefault(),t.stopPropagation(),this.userIsDragging=!1};this.handleDrop=async t=>{if(t.preventDefault(),t.stopPropagation(),!t.dataTransfer)return;let r=await this.handleTransferItems(t.dataTransfer.items);if(this.userIsDragging=!1,!r)return;if(!this.multiple&&!this.webkitdirectory&&r.length>1){this.emit("zn-error");return}if(this.hasSlotController.test("trigger"))this.handleFiles(r);else{let a=this.inputChosen,s=this.dropareaIcon;if(this.droparea&&s){let l=Sn(s,"file.iconDrop",{dir:this.localize.dir()});gi(s,l.keyframes,l.options)}if(a){let l=Sn(a,"file.text.disappear",{dir:this.localize.dir()});await gi(a,l.keyframes,l.options)}if(this.handleFiles(r),a){let l=Sn(a,"file.text.appear",{dir:this.localize.dir()});await gi(a,l.keyframes,l.options)}}this.input.dispatchEvent(new Event("change"))};this.removeFile=t=>{t.preventDefault(),t.stopPropagation();let r=Array.from(this.files||[]),n=t.target.closest("[data-file-name]")?.getAttribute("data-file-name"),a=r.findIndex(l=>l.name===n);a!==-1&&r.splice(a,1);let s=new DataTransfer;r.forEach(l=>s.items.add(l)),this.files=s.files,s.files.length||(this.clearedByUser=!0),this.input.dispatchEvent(new Event("change"))};this.handleClearClick=t=>{t.preventDefault(),t.stopPropagation(),this.clearConfirmDialog?.show()};this.confirmClear=()=>{let t=(this.files?.length??0)>0;this.input.value="",this.files=null,t||(this.src=""),this.clearedByUser=!0,this.clearConfirmDialog?.hide(),this.input.dispatchEvent(new Event("change")),this.emit("zn-clear")}}set files(t){this.input&&(this.input.files=t,t?.length&&(this.clearedByUser=!1),this.updatePreview())}get files(){return this.input?.files}set value(t){if(this.uploadUrl){this.src=t??"";return}this.input&&(this.input.value=t)}get value(){return this.uploadUrl?this.src??"":this.input?.value}get validity(){return this.input?.validity}get validationMessage(){return this.input.validationMessage}checkValidity(){return this.input.checkValidity()}getForm(){return this.formControlController.getForm()}reportValidity(){return this.input.reportValidity()}setCustomValidity(t){this.input.setCustomValidity(t),this.formControlController.updateValidity()}handleDisabledChange(){this.formControlController.setValidity(this.disabled)}async handleValueChange(){await this.updateComplete,this.formControlController.updateValidity()}focus(t){if(this.droparea){this.dropareaWrapper?.focus(t);return}this.button?.focus(t)}blur(){if(this.droparea){this.dropareaWrapper?.blur();return}this.button?.blur()}handleFiles(t){if(!t){this.value="";return}this.files=t}async handleTransferItems(t){if(!t)return this.value="",new Promise((d,h)=>{h(new Error("No proper items found"))});let n=Array.from(t).map(d=>d.webkitGetAsEntry()).map(d=>this.getFilesFromEntry(d)),s=(await Promise.all(n)).flat(),l=new DataTransfer;return Array.from(s).forEach(d=>l.items.add(d)),l.files}async getFilesFromEntry(t){return t?t.isFile?new Promise((r,n)=>{t.file(a=>r([a]),n)}):t.isDirectory?new Promise((r,n)=>{t.createReader().readEntries(s=>{Promise.all(s.map(l=>this.getFilesFromEntry(l))).then(l=>{r(l.flat())}).catch(n)})}):[]:[]}handleClick(t){t.preventDefault(),this.input.click()}handleChange(t){t.preventDefault(),t.stopPropagation(),this.updatePreview();let r=this.files?.[0];if(this.uploadUrl&&r){this.uploadFile(r);return}this.emit("zn-input"),this.emit("zn-change"),this.triggerSubmit&&this.formControlController.submit()}async uploadFile(t){this.uploading=!0;try{let r=new FormData;r.append("file",t,t.name);let n=await fetch(this.uploadUrl,{method:"POST",body:r,credentials:"same-origin"});if(!n.ok)throw new Error(`upload failed with status ${n.status}`);let a=await n.json();if(!a.url)throw new Error("upload response missing url");this.src=a.url,this.input.value="",this.files=null,this.clearedByUser=!1,this.emit("zn-input"),this.emit("zn-change"),this.triggerSubmit&&this.formControlController.submit()}catch(r){console.warn("<zn-file> upload failed",r),this.input.value="",this.files=null,this.emit("zn-error")}finally{this.uploading=!1}}handleFocus(){this.emit("zn-focus")}handleBlur(){this.emit("zn-blur")}clear(){this.input&&(this.input.value=""),this.files=null,this.src="",this.updatePreview(),this.formControlController.updateValidity()}updatePreview(){this.fileObjectUrl&&(URL.revokeObjectURL(this.fileObjectUrl),this.fileObjectUrl=null);let t=this.files?.[0];t&&t.type.startsWith("image/")&&(this.fileObjectUrl=URL.createObjectURL(t))}get previewSrc(){return this.fileObjectUrl??this.src??""}disconnectedCallback(){super.disconnectedCallback(),this.fileObjectUrl&&(URL.revokeObjectURL(this.fileObjectUrl),this.fileObjectUrl=null)}renderFileValueWithDelete(){let t=Array.from(this.files||[]),r=this.clearable,n=this.localize.term("numFilesSelected",0,this.webkitdirectory);return u`
       ${t?u`
         <div class="file_wrapper">
           ${Xo(t,a=>u`
             <zn-chip
               class=${q({input__value:!0,"input__value--hidden":this.hideValue})}
               data-file-name="${a.name}"
+              type="primary"
               part="value">
               ${a.name}
               ${r?u`
-                <zn-button
+                <zn-icon
                   slot="action"
                   class="input__delete"
-                  color="transparent"
-                  icon="close"
-                  icon-size="18"
+                  src="close"
+                  size="16"
                   @click="${this.removeFile}"
-                  part="delete"></zn-button>`:""}
+                  part="delete"></zn-icon>`:""}
             </zn-chip>
           `)}
         </div>`:u`${n}`}`}renderDroparea(){let t=Array.from(this.files||[]),r=t[0],n=t.length>0,a=!n&&!!this.src,s=n||a,l=n?this.fileObjectUrl:a?this.src:null,d=!!l,h=n?r.name:a?this.src:"",m=this.localize.term("fileButtonText");return this.multiple&&(m=this.localize.term("fileButtonTextMultiple")),this.webkitdirectory&&(m=this.localize.term("folderButtonText")),u`
@@ -3701,8 +3695,7 @@ ${Da(this.code(i,t))}
                   class="droparea__upload"
                   icon="cloud_upload"
                   icon-size="20"
-                  color="default"
-                  outline
+                  panel-bg
                   ?disabled=${this.disabled}
                   part="upload">
                   ${m}
@@ -3724,7 +3717,7 @@ ${Da(this.code(i,t))}
           ?disabled=${this.disabled}
           exportparts="base:button__base"
           part="button"
-          outline>
+          panel-bg>
           ${t}
         </zn-button>
         ${this.renderFileValueWithDelete()}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubex/zinc",
-  "version": "1.1.103",
+  "version": "1.1.105",
   "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
   "keywords": [
     "web components",

package/src/components/file/file.component.ts

@@ -551,7 +551,7 @@ export default class ZnFile extends ZincElement implements ZincFormControl {
     e.stopPropagation();
 
     const files = Array.from(this.files || []);
-    const file = (e.target as ZnButton).parentElement?.getAttribute('data-file-name');
+    const file = (e.target as HTMLElement).closest('[data-file-name]')?.getAttribute('data-file-name');
 
     const index = files.findIndex(f => f.name === file);
 
@@ -652,17 +652,17 @@ export default class ZnFile extends ZincElement implements ZincFormControl {
                 'input__value--hidden': this.hideValue,
               })}
               data-file-name="${file.name}"
+              type="primary"
               part="value">
               ${file.name}
               ${isClearable ? html`
-                <zn-button
+                <zn-icon
                   slot="action"
                   class="input__delete"
-                  color="transparent"
-                  icon="close"
-                  icon-size="18"
+                  src="close"
+                  size="16"
                   @click="${this.removeFile}"
-                  part="delete"></zn-button>` : ''}
+                  part="delete"></zn-icon>` : ''}
             </zn-chip>
           `)}
         </div>` : html`${fileChosenLabel}`}`;
@@ -725,8 +725,7 @@ export default class ZnFile extends ZincElement implements ZincFormControl {
                   class="droparea__upload"
                   icon="cloud_upload"
                   icon-size="20"
-                  color="default"
-                  outline
+                  panel-bg
                   ?disabled=${this.disabled}
                   part="upload">
                   ${buttonText}
@@ -760,7 +759,7 @@ export default class ZnFile extends ZincElement implements ZincFormControl {
           ?disabled=${this.disabled}
           exportparts="base:button__base"
           part="button"
-          outline>
+          panel-bg>
           ${buttonText}
         </zn-button>
         ${this.renderFileValueWithDelete()}

package/src/components/icon-picker/icon-picker.component.ts

@@ -1,5 +1,5 @@
 import {classMap} from 'lit/directives/class-map.js';
-import {type CSSResultGroup, html, nothing, unsafeCSS} from 'lit';
+import {type CSSResultGroup, html, nothing, type PropertyValues, unsafeCSS} from 'lit';
 import {defaultValue} from '../../internal/default-value';
 import {FormControlController} from '../../internal/form';
 import {property, query, state} from 'lit/decorators.js';
@@ -244,6 +244,36 @@ export default class ZnIconPicker extends ZincElement implements ZincFormControl
     }
   }
 
+  // The [icon]/[library]/[color] hidden inputs must live in the light DOM —
+  // shadow DOM inputs are invisible to form submission.
+  private syncHiddenInputs() {
+    const fields: [string, string, boolean][] = [
+      ['icon', this.icon, true],
+      ['library', this.library, !this.noLibrary],
+      ['color', this.color, !this.noColor],
+    ];
+    for (const [key, value, enabled] of fields) {
+      const name = `${this.name}[${key}]`;
+      let input = this.querySelector<HTMLInputElement>(`input[type="hidden"][name="${name}"]`);
+      if (!this.name || !enabled) {
+        input?.remove();
+        continue;
+      }
+      if (!input) {
+        input = document.createElement('input');
+        input.type = 'hidden';
+        input.name = name;
+        this.appendChild(input);
+      }
+      input.value = value ?? '';
+    }
+  }
+
+  protected updated(changedProperties: PropertyValues) {
+    super.updated(changedProperties);
+    this.syncHiddenInputs();
+  }
+
   private handleSearchInput(e: Event) {
     const input = e.target as HTMLInputElement;
     this._searchQuery = input.value.toLowerCase();
@@ -381,12 +411,6 @@ export default class ZnIconPicker extends ZincElement implements ZincFormControl
           `}
         </div>
 
-        ${this.name ? html`
-          <input type="hidden" name="${this.name}[icon]" .value=${this.icon}>
-          ${!this.noLibrary ? html`<input type="hidden" name="${this.name}[library]" .value=${this.library}>` : nothing}
-          ${!this.noColor ? html`<input type="hidden" name="${this.name}[color]" .value=${this.color}>` : nothing}
-        ` : nothing}
-
         <div
           part="form-control-help-text"
           class="form-control__help-text"

package/src/components/tile/tile.scss

@@ -142,6 +142,7 @@ a {
   align-items: center;
   column-gap: var(--zn-spacing-large);
   min-width: 0;
+  flex-shrink: 0;
   overflow: hidden;
 
   ::slotted(*) {