@kubex/zinc 1.1.71 → 1.1.73

package/dist/custom-elements.json

@@ -47,6 +47,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/alert/alert.js",
@@ -241,79 +314,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/animated-button/animated-button.js",
@@ -17204,6 +17204,19 @@
               "kind": "method",
               "name": "_handleTriggerClick",
               "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_handleTriggerKeyDown",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
             }
           ],
           "attributes": [
@@ -43877,7 +43890,7 @@
   "package": {
     "name": "@kubex/zinc",
     "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
-    "version": "1.1.71",
+    "version": "1.1.73",
     "author": "",
     "license": "MIT"
   }

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

@@ -13,6 +13,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-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.",
@@ -53,17 +64,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-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.71",
+  "version": "1.1.73",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -15,6 +15,28 @@
           "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.",
@@ -83,28 +105,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.",
-          "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

@@ -4759,6 +4759,7 @@ declare module "components/icon-picker/icon-picker.component" {
         private handleFreeInput;
         private handleClear;
         private _handleTriggerClick;
+        private _handleTriggerKeyDown;
         render(): import("lit-html").TemplateResult<1>;
     }
 }

package/dist/zn.min.js

@@ -1658,7 +1658,7 @@ import{a as En,b as c_,c as pr,d as c,e as B}from"./chunks/zn.UBLZO6CI.js";var Z
           </div>
         </div>
       </div>
-    `}};Ce.styles=[jo.styles,E(wv)],Ce.dependencies={"zn-button":Ct,"zn-copy-button":$h,"zn-expanding-action":Xh,"zn-icon":ct,"zn-navbar":aa,"zn-tab":Qh},c([p()],Ce.prototype,"caption",2),c([p({attribute:"entity-id"})],Ce.prototype,"entityId",2),c([p({attribute:"entity-id-show",type:Boolean})],Ce.prototype,"entityIdShow",2),c([p({attribute:"full-location"})],Ce.prototype,"fullLocation",2),c([p({type:Boolean,reflect:!0})],Ce.prototype,"modal",2),c([p({type:Boolean,reflect:!0})],Ce.prototype,"nested",2),c([p({type:Boolean,reflect:!0})],Ce.prototype,"primary",2),c([p({attribute:"previous-path"})],Ce.prototype,"previousPath",2),c([p({attribute:"previous-target"})],Ce.prototype,"previousTarget",2),c([p()],Ce.prototype,"summary",2),c([O()],Ce.prototype,"scrolled",2),c([O()],Ce.prototype,"tabDefinitions",2),c([O()],Ce.prototype,"hasExpandingActions",2);var z3=Ce;Ce.define("zn-page");var _v=S`@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)}.form-control-input{margin:var(--zn-spacing-2x-small) 3px 3px 0}.form-control-input--flush{margin:0}.form-control .form-control__label{display:none}.form-control .form-control__help-text{display:none}.form-control--has-label .form-control__label{display:inline-block;color:var(--zn-input-label-color);font-weight:var(--zn-input-label-font-weight);line-height:var(--zn-input-label-line-height);margin-bottom:var(--zn-spacing-x-small)}.form-control--has-label.form-control--medium .form-control__label{font-size:var(--zn-input-label-font-size-medium)}.form-control--has-label.form-control--large .form-control__label{font-size:var(--zn-input-label-font-size-large)}:host([required]) .form-control--has-label .form-control__label::after{content:var(--zn-input-required-content);margin-inline-start:var(--zn-input-required-content-offset);color:var(--zn-input-required-content-color)}.form-control--has-label.form-control--radio-group .form-control__label,.form-control--has-label.form-control--checkbox-group .form-control__label{margin-bottom:0}.form-control--has-label.form-control--has-label-tooltip .form-control__label{display:inline-flex;align-items:center;gap:var(--zn-spacing-2x-small)}.form-control--has-label.form-control--small .form-control__label{font-size:var(--zn-input-label-font-size-small)}.form-control--label-tooltip{color:var(--zn-color-neutral-700);font-size:var(--zn-font-size-small)}.form-control--label-tooltip zn-icon{--icon-color:var(--zn-color-neutral-700);--icon-size:var(--zn-font-size-small)}.form-control--has-label.form-control--has-context-note{display:flex;justify-content:space-between;flex-wrap:wrap}.form-control__label-context-note{color:var(--zn-input-help-text-color);font-size:var(--zn-font-size-small);margin-bottom:var(--zn-spacing-2x-small)}.form-control--has-label.form-control--has-context-note .form-control-input{width:100%}.form-control--has-help-text .form-control__help-text,.radio--has-description .radio__description,.checkbox--has-description .checkbox__description{display:block;color:var(--zn-input-help-text-color);margin-top:var(--zn-spacing-x-small)}.radio--has-description .radio__description,.checkbox--has-description .checkbox__description{margin-top:0.375rem}.radio--has-selected-content .radio__selected-content,.checkbox--has-selected-content .checkbox__selected-content{display:block;margin-top:var(--zn-spacing-small)}.form-control--has-help-text.form-control--small .form-control__help-text{font-size:var(--zn-input-help-text-font-size-small)}.form-control--has-help-text.form-control--medium .form-control__help-text,.radio--has-description .radio__description,.checkbox--has-description .checkbox__description{font-size:var(--zn-input-help-text-font-size-medium)}.form-control--has-help-text.form-control--large .form-control__help-text{font-size:var(--zn-input-help-text-font-size-large)}.form-control--has-help-text.form-control--radio-group .form-control__help-text,.form-control--has-help-text.form-control--checkbox-group .form-control__help-text{margin-top:var(--zn-spacing-medium)}.form-control--has-help-text .switch .form-control__help-text{margin-top:var(--zn-spacing-3x-small)}.form-control--checkbox-contained-wrapper{height:100%}: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__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))}`;var zt=class zt extends C{constructor(){super(...arguments);this.formControlController=new ot(this,{assumeInteractionOn:["zn-change"],value:t=>t._file??t.icon});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 zt.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;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()}render(){let t=!!this.label,r=!!this.helpText,n=!!this.icon||!!this._file,a=this._fileUrl??this.icon,s=n&&!this.isImageValue?this.library:V,l=this._pendingFileUrl??(this.isImageValue&&!this._file?this.icon:this._fileUrl);return u`
+    `}};Ce.styles=[jo.styles,E(wv)],Ce.dependencies={"zn-button":Ct,"zn-copy-button":$h,"zn-expanding-action":Xh,"zn-icon":ct,"zn-navbar":aa,"zn-tab":Qh},c([p()],Ce.prototype,"caption",2),c([p({attribute:"entity-id"})],Ce.prototype,"entityId",2),c([p({attribute:"entity-id-show",type:Boolean})],Ce.prototype,"entityIdShow",2),c([p({attribute:"full-location"})],Ce.prototype,"fullLocation",2),c([p({type:Boolean,reflect:!0})],Ce.prototype,"modal",2),c([p({type:Boolean,reflect:!0})],Ce.prototype,"nested",2),c([p({type:Boolean,reflect:!0})],Ce.prototype,"primary",2),c([p({attribute:"previous-path"})],Ce.prototype,"previousPath",2),c([p({attribute:"previous-target"})],Ce.prototype,"previousTarget",2),c([p()],Ce.prototype,"summary",2),c([O()],Ce.prototype,"scrolled",2),c([O()],Ce.prototype,"tabDefinitions",2),c([O()],Ce.prototype,"hasExpandingActions",2);var z3=Ce;Ce.define("zn-page");var _v=S`@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)}.form-control-input{margin:var(--zn-spacing-2x-small) 3px 3px 0}.form-control-input--flush{margin:0}.form-control .form-control__label{display:none}.form-control .form-control__help-text{display:none}.form-control--has-label .form-control__label{display:inline-block;color:var(--zn-input-label-color);font-weight:var(--zn-input-label-font-weight);line-height:var(--zn-input-label-line-height);margin-bottom:var(--zn-spacing-x-small)}.form-control--has-label.form-control--medium .form-control__label{font-size:var(--zn-input-label-font-size-medium)}.form-control--has-label.form-control--large .form-control__label{font-size:var(--zn-input-label-font-size-large)}:host([required]) .form-control--has-label .form-control__label::after{content:var(--zn-input-required-content);margin-inline-start:var(--zn-input-required-content-offset);color:var(--zn-input-required-content-color)}.form-control--has-label.form-control--radio-group .form-control__label,.form-control--has-label.form-control--checkbox-group .form-control__label{margin-bottom:0}.form-control--has-label.form-control--has-label-tooltip .form-control__label{display:inline-flex;align-items:center;gap:var(--zn-spacing-2x-small)}.form-control--has-label.form-control--small .form-control__label{font-size:var(--zn-input-label-font-size-small)}.form-control--label-tooltip{color:var(--zn-color-neutral-700);font-size:var(--zn-font-size-small)}.form-control--label-tooltip zn-icon{--icon-color:var(--zn-color-neutral-700);--icon-size:var(--zn-font-size-small)}.form-control--has-label.form-control--has-context-note{display:flex;justify-content:space-between;flex-wrap:wrap}.form-control__label-context-note{color:var(--zn-input-help-text-color);font-size:var(--zn-font-size-small);margin-bottom:var(--zn-spacing-2x-small)}.form-control--has-label.form-control--has-context-note .form-control-input{width:100%}.form-control--has-help-text .form-control__help-text,.radio--has-description .radio__description,.checkbox--has-description .checkbox__description{display:block;color:var(--zn-input-help-text-color);margin-top:var(--zn-spacing-x-small)}.radio--has-description .radio__description,.checkbox--has-description .checkbox__description{margin-top:0.375rem}.radio--has-selected-content .radio__selected-content,.checkbox--has-selected-content .checkbox__selected-content{display:block;margin-top:var(--zn-spacing-small)}.form-control--has-help-text.form-control--small .form-control__help-text{font-size:var(--zn-input-help-text-font-size-small)}.form-control--has-help-text.form-control--medium .form-control__help-text,.radio--has-description .radio__description,.checkbox--has-description .checkbox__description{font-size:var(--zn-input-help-text-font-size-medium)}.form-control--has-help-text.form-control--large .form-control__help-text{font-size:var(--zn-input-help-text-font-size-large)}.form-control--has-help-text.form-control--radio-group .form-control__help-text,.form-control--has-help-text.form-control--checkbox-group .form-control__help-text{margin-top:var(--zn-spacing-medium)}.form-control--has-help-text .switch .form-control__help-text{margin-top:var(--zn-spacing-3x-small)}.form-control--checkbox-contained-wrapper{height:100%}: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 zt=class zt extends C{constructor(){super(...arguments);this.formControlController=new ot(this,{assumeInteractionOn:["zn-change"],value:t=>t._file??t.icon});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 zt.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;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:V,l=this._pendingFileUrl??(this.isImageValue&&!this._file?this.icon:this._fileUrl);return u`
       <div part="form-control"
            class="form-control ${t?"form-control--has-label":""} ${r?"form-control--has-help-text":""}">
 
@@ -1668,27 +1668,51 @@ import{a as En,b as c_,c as pr,d as c,e as B}from"./chunks/zn.UBLZO6CI.js";var Z
         </label>
 
         <div part="form-control-input" class="form-control-input">
-          <zn-button
-            part="trigger"
-            class="icon-picker__trigger"
-            panel-bg
-            icon=${n?a:V}
-            icon-library=${s}
-            icon-color=${n&&!this.isImageValue&&this.color||V}
-            icon-size="24"
-            ?disabled=${this.disabled}
-            @click=${this._handleTriggerClick}>
-            ${n?"Click to edit":"Set an icon"}
-          </zn-button>
-          ${n?u`
+          ${n&&this.isImageValue?u`
+            <div
+              part="trigger"
+              class="icon-picker__image-trigger"
+              role="button"
+              aria-label="Click to edit"
+              tabindex=${this.disabled?"-1":"0"}
+              @click=${this._handleTriggerClick}
+              @keydown=${this._handleTriggerKeyDown}>
+              <zn-button
+                class="icon-picker__image-clear"
+                color="default"
+                outline
+                icon="close"
+                icon-size="18"
+                ?disabled=${this.disabled}
+                @click="${this.handleClear}"
+              ></zn-button>
+              <div class="icon-picker__image-trigger-background">
+                <img class="icon-picker__image-trigger-preview" src=${a} alt="">
+              </div>
+            </div>
+          `:u`
             <zn-button
-              class="icon-picker__clear"
-              color="transparent"
-              icon="close"
-              icon-size="16"
-              @click="${this.handleClear}"
-            ></zn-button>
-          `:V}
+              part="trigger"
+              class="icon-picker__trigger"
+              panel-bg
+              icon=${n?a:V}
+              icon-library=${s}
+              icon-color=${n&&this.color||V}
+              icon-size="24"
+              ?disabled=${this.disabled}
+              @click=${this._handleTriggerClick}>
+              ${n?"Click to edit":"Set an icon"}
+            </zn-button>
+            ${n?u`
+              <zn-button
+                class="icon-picker__clear"
+                color="transparent"
+                icon="close"
+                icon-size="16"
+                @click="${this.handleClear}"
+              ></zn-button>
+            `:V}
+          `}
         </div>
 
         ${this.name?u`
@@ -1853,11 +1877,11 @@ import{a as En,b as c_,c as pr,d as c,e as B}from"./chunks/zn.UBLZO6CI.js";var Z
               </div>
             </div>
 
-            <div slot="footer">
-              <zn-button color="default" @click=${this.handleCancel}>Cancel</zn-button>
-              <zn-button color="primary" @click=${this.handleConfirm}
+            <div slot="footer" class="icon-picker__footer">
+              <zn-button panel-bg icon="close" @click=${this.handleCancel}>Cancel</zn-button>
+              <zn-button color="primary" icon="check" @click=${this.handleConfirm}
                          ?disabled=${this._mode==="upload"?!this._pendingFile&&!this.isImageValue:!this._pendingIcon}>
-                Confirm
+                Save
               </zn-button>
             </div>
           </zn-dialog>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubex/zinc",
-  "version": "1.1.71",
+  "version": "1.1.73",
   "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

@@ -300,6 +300,13 @@ export default class ZnIconPicker extends ZincElement implements ZincFormControl
     this.openDialog();
   }
 
+  private _handleTriggerKeyDown(e: KeyboardEvent) {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      this._handleTriggerClick();
+    }
+  }
+
   render() {
     const hasLabel = !!this.label;
     const hasHelpText = !!this.helpText;
@@ -320,27 +327,51 @@ export default class ZnIconPicker extends ZincElement implements ZincFormControl
         </label>
 
         <div part="form-control-input" class="form-control-input">
-          <zn-button
-            part="trigger"
-            class="icon-picker__trigger"
-            panel-bg
-            icon=${hasValue ? triggerIcon : nothing}
-            icon-library=${triggerLibrary}
-            icon-color=${(hasValue && !this.isImageValue && this.color) || nothing}
-            icon-size="24"
-            ?disabled=${this.disabled}
-            @click=${this._handleTriggerClick}>
-            ${hasValue ? 'Click to edit' : 'Set an icon'}
-          </zn-button>
-          ${hasValue ? html`
+          ${hasValue && this.isImageValue ? html`
+            <div
+              part="trigger"
+              class="icon-picker__image-trigger"
+              role="button"
+              aria-label="Click to edit"
+              tabindex=${this.disabled ? '-1' : '0'}
+              @click=${this._handleTriggerClick}
+              @keydown=${this._handleTriggerKeyDown}>
+              <zn-button
+                class="icon-picker__image-clear"
+                color="default"
+                outline
+                icon="close"
+                icon-size="18"
+                ?disabled=${this.disabled}
+                @click="${this.handleClear}"
+              ></zn-button>
+              <div class="icon-picker__image-trigger-background">
+                <img class="icon-picker__image-trigger-preview" src=${triggerIcon} alt="">
+              </div>
+            </div>
+          ` : html`
             <zn-button
-              class="icon-picker__clear"
-              color="transparent"
-              icon="close"
-              icon-size="16"
-              @click="${this.handleClear}"
-            ></zn-button>
-          ` : nothing}
+              part="trigger"
+              class="icon-picker__trigger"
+              panel-bg
+              icon=${hasValue ? triggerIcon : nothing}
+              icon-library=${triggerLibrary}
+              icon-color=${(hasValue && this.color) || nothing}
+              icon-size="24"
+              ?disabled=${this.disabled}
+              @click=${this._handleTriggerClick}>
+              ${hasValue ? 'Click to edit' : 'Set an icon'}
+            </zn-button>
+            ${hasValue ? html`
+              <zn-button
+                class="icon-picker__clear"
+                color="transparent"
+                icon="close"
+                icon-size="16"
+                @click="${this.handleClear}"
+              ></zn-button>
+            ` : nothing}
+          `}
         </div>
 
         ${this.name ? html`
@@ -508,11 +539,11 @@ export default class ZnIconPicker extends ZincElement implements ZincFormControl
               </div>
             </div>
 
-            <div slot="footer">
-              <zn-button color="default" @click=${this.handleCancel}>Cancel</zn-button>
-              <zn-button color="primary" @click=${this.handleConfirm}
+            <div slot="footer" class="icon-picker__footer">
+              <zn-button panel-bg icon="close" @click=${this.handleCancel}>Cancel</zn-button>
+              <zn-button color="primary" icon="check" @click=${this.handleConfirm}
                          ?disabled=${this._mode === 'upload' ? !this._pendingFile && !this.isImageValue : !this._pendingIcon}>
-                Confirm
+                Save
               </zn-button>
             </div>
           </zn-dialog>

package/src/components/icon-picker/icon-picker.scss

@@ -16,6 +16,77 @@ zn-dialog {
   --icon-color: rgb(var(--zn-text));
 }
 
+// Mirrors zn-file's droparea preview so a chosen image reads the same as an
+// uploaded file.
+.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;
+
+  &:focus-visible {
+    border-color: var(--zn-color-primary-600);
+    outline: var(--zn-focus-ring);
+    outline-offset: var(--zn-focus-ring-offset);
+  }
+
+  &: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;
+  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);
@@ -195,3 +266,14 @@ zn-dialog {
   color: rgb(var(--zn-text-muted));
 }
 
+// Mirrors the global .form-actions layout, which isn't available in the
+// shadow DOM. currentColor undoes the dialog-wide --icon-color override so
+// button icons match their button's text colour.
+.icon-picker__footer {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: var(--zn-spacing-small);
+  --icon-color: currentColor;
+}
+