@kubex/zinc 1.1.104 → 1.1.105

package/dist/custom-elements.json

@@ -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.104",
+    "version": "1.1.105",
     "author": "",
     "license": "MIT"
   }

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.104",
+  "version": "1.1.105",
   "description-markup": "markdown",
   "contributions": {
     "html": {

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"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubex/zinc",
-  "version": "1.1.104",
+  "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/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(*) {