@kubex/zinc 1.1.103 → 1.1.104

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",
@@ -50588,7 +50588,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.104",
     "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.104",
   "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.min.js

@@ -3647,24 +3647,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 +3701,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 +3723,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.104",
   "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()}