@kubex/zinc 1.1.114 → 1.1.115

package/dist/custom-elements.json

@@ -50889,7 +50889,7 @@
   "package": {
     "name": "@kubex/zinc",
     "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
-    "version": "1.1.114",
+    "version": "1.1.115",
     "author": "",
     "license": "MIT"
   }

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@kubex/zinc",
-  "version": "1.1.114",
+  "version": "1.1.115",
   "description-markup": "markdown",
   "contributions": {
     "html": {

package/dist/zn.min.js

@@ -1072,7 +1072,7 @@ import{a as Bn,b as s3,c as zr,d as c,e as V}from"./chunks/zn.UBLZO6CI.js";var L
                   </zn-menu-item>`})}
           </zn-menu>
         </zn-dropdown>
-      </td>`}};we.styles=[z(hs),z(h0)],we.dependencies={"zn-alert":Su,"zn-button":_e,"zn-empty-state":Fu,"zn-chip":Rl,"zn-hover-container":Bu,"zn-dropdown":jt,"zn-menu":gi,"zn-menu-item":rn,"zn-button-group":Gn,"zn-confirm":Pl,"zn-skeleton":Vu,"zn-style":Uu,"zn-data-table-search":Hu},c([p({attribute:"data-uri"})],we.prototype,"dataUri",2),c([p({attribute:"data",type:Object})],we.prototype,"data",2),c([p({attribute:"sort-column"})],we.prototype,"sortColumn",2),c([p({attribute:"sort-direction"})],we.prototype,"sortDirection",2),c([p({attribute:"local-sort",type:Boolean})],we.prototype,"localSort",2),c([p({attribute:"filter"})],we.prototype,"filter",2),c([p({attribute:"search"})],we.prototype,"search",2),c([p({attribute:"wide-column"})],we.prototype,"wideColumn",2),c([p({attribute:"key"})],we.prototype,"key",2),c([p({attribute:"headers",type:Object})],we.prototype,"headers",2),c([p({attribute:!1})],we.prototype,"displayTemplates",2),c([p({attribute:"hide-headers",type:Object})],we.prototype,"hiddenHeaders",2),c([p({attribute:"hide-columns",type:Object})],we.prototype,"hiddenColumns",2),c([p({attribute:"unsortable-headers",type:Object})],we.prototype,"unsortableHeaders",2),c([p({attribute:"unsortable",type:Boolean})],we.prototype,"unsortable",2),c([p({attribute:"hide-pagination",type:Boolean})],we.prototype,"hidePagination",2),c([p({type:Boolean})],we.prototype,"standalone",2),c([p()],we.prototype,"caption",2),c([p({attribute:"empty-state-caption"})],we.prototype,"emptyStateCaption",2),c([p({attribute:"empty-state-icon"})],we.prototype,"emptyStateIcon",2),c([p({attribute:"hide-checkboxes",type:Boolean})],we.prototype,"hideCheckboxes",2),c([p()],we.prototype,"filters",2),c([p()],we.prototype,"method",2),c([p({attribute:"no-initial-load",type:Boolean})],we.prototype,"noInitialLoad",2),c([p({attribute:"group-by"})],we.prototype,"groupBy",2),c([p()],we.prototype,"groups",2),c([p({attribute:"per-page-size",type:Number})],we.prototype,"itemsPerPage",2),c([F("#select-all-rows")],we.prototype,"selectAllButton",2);var d4=we;we.define("zn-data-table");var m0=_`@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}*,*::before,*::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;--zn-col-basis:250px;--col-width:23%}:host([contents]){display:contents}.cols{display:flex;flex-wrap:wrap;flex-grow:1;flex-shrink:1;width:100%;container-type:inline-size;overflow:hidden;gap:var(--zn-gap);max-width:100%}.cols ::slotted(.zn-col-1){flex-basis:calc(var(--zn-col-basis) * 1);min-width:calc(var(--col-width) * 1);flex-grow:1}.cols ::slotted(.zn-col-2){flex-basis:calc(var(--zn-col-basis) * 2);min-width:calc(var(--col-width) * 2);flex-grow:2}.cols ::slotted(.zn-col-3){flex-basis:calc(var(--zn-col-basis) * 3);min-width:calc(var(--col-width) * 3);flex-grow:3}.cols ::slotted(.zn-col-4){flex-basis:calc(var(--zn-col-basis) * 4);min-width:calc(var(--col-width) * 4);flex-grow:4}.cols ::slotted(.zn-col-5){flex-basis:calc(var(--zn-col-basis) * 5);min-width:calc(var(--col-width) * 5);flex-grow:5}.cols ::slotted(.zn-col-6){flex-basis:calc(var(--zn-col-basis) * 6);min-width:calc(var(--col-width) * 6);flex-grow:6}.cols ::slotted(.zn-col-7){flex-basis:calc(var(--zn-col-basis) * 7);min-width:calc(var(--col-width) * 7);flex-grow:7}.cols ::slotted(.zn-col-8){flex-basis:calc(var(--zn-col-basis) * 8);min-width:calc(var(--col-width) * 8);flex-grow:8}.cols ::slotted(.zn-col-9){flex-basis:calc(var(--zn-col-basis) * 9);min-width:calc(var(--col-width) * 9);flex-grow:9}.cols ::slotted(.zn-col-10){flex-basis:calc(var(--zn-col-basis) * 10);min-width:calc(var(--col-width) * 10);flex-grow:10}.cols ::slotted(.zn-col-11){flex-basis:calc(var(--zn-col-basis) * 11);min-width:calc(var(--col-width) * 11);flex-grow:11}.cols ::slotted(.zn-col-12){flex-basis:calc(var(--zn-col-basis) * 12);min-width:calc(var(--col-width) * 12);flex-grow:12}.cols--mc-1{--col-width:calc(100% / 2)}.cols--mc-2{--col-width:calc(100% / 3)}.cols--mc-3{--col-width:calc(100% / 4)}.cols--mc-4{--col-width:calc(100% / 5)}.cols--mc-5{--col-width:calc(100% / 6)}.cols--mc-6{--col-width:calc(100% / 7)}.cols--mc-7{--col-width:calc(100% / 8)}.cols--mc-8{--col-width:calc(100% / 9)}.cols--mc-9{--col-width:calc(100% / 10)}.cols--mc-10{--col-width:calc(100% / 11)}.cols--mc-11{--col-width:calc(100% / 12)}.cols--mc-12{--col-width:calc(100% / 13)}.cols--layout-121 ::slotted(.zn-col-2){order:-1;min-width:100%}@container (min-width:1440px){.cols--layout-121 ::slotted(.zn-col-2){order:initial;min-width:46%}}.cols--divide ::slotted(*:not(:last-child)){position:relative}.cols--divide ::slotted(*:not(:last-child)):after{content:"";position:absolute;display:block;width:1px;top:0;height:100%;max-height:100%;right:calc(var(--zn-spacing-small) / 2 * -1);background-color:rgb(var(--zn-border-color))}.cols--no-gap{gap:0}.cols--border ::slotted(*){position:relative;padding-bottom:var(--zn-spacing-small)}.cols--border ::slotted(*):before{content:"";position:absolute;bottom:-1px;left:-100vw;right:-5px;z-index:1111;border-bottom:1px solid rgb(var(--zn-border-color)) !important}.cols ::slotted([stack-split]){display:flex;flex-direction:column;gap:var(--zn-gap)}.cols--pad{padding:var(--zn-spacing-2x-small)}.cols--pad-x{padding-inline:var(--zn-spacing-2x-small)}.cols--pad-y{padding-block:var(--zn-spacing-2x-small)}@container (max-width:359px){:host([stack-at=sm]) .cols ::slotted(*){--zn-stacked:1;--zn-stack-basis:100%;flex-basis:100%;min-width:100%;max-width:100%}:host([stack-at=sm]) .cols ::slotted([stack-split]){display:contents}:host([stack-at=sm]) .cols--divide ::slotted(*:not(:last-child)):after{display:none}}@container (max-width:479px){:host([stack-at=smp]) .cols ::slotted(*){--zn-stacked:1;--zn-stack-basis:100%;flex-basis:100%;min-width:100%;max-width:100%}:host([stack-at=smp]) .cols ::slotted([stack-split]){display:contents}:host([stack-at=smp]) .cols--divide ::slotted(*:not(:last-child)):after{display:none}}@container (max-width:599px){:host([stack-at=ph]) .cols ::slotted(*){--zn-stacked:1;--zn-stack-basis:100%;flex-basis:100%;min-width:100%;max-width:100%}:host([stack-at=ph]) .cols ::slotted([stack-split]){display:contents}:host([stack-at=ph]) .cols--divide ::slotted(*:not(:last-child)):after{display:none}}@container (max-width:767px){:host([stack-at=md]) .cols ::slotted(*){--zn-stacked:1;--zn-stack-basis:100%;flex-basis:100%;min-width:100%;max-width:100%}:host([stack-at=md]) .cols ::slotted([stack-split]){display:contents}:host([stack-at=md]) .cols--divide ::slotted(*:not(:last-child)):after{display:none}}@container (max-width:1099px){:host([stack-at=lg]) .cols ::slotted(*){--zn-stacked:1;--zn-stack-basis:100%;flex-basis:100%;min-width:100%;max-width:100%}:host([stack-at=lg]) .cols ::slotted([stack-split]){display:contents}:host([stack-at=lg]) .cols--divide ::slotted(*:not(:last-child)):after{display:none}}@container (max-width:1439px){:host([stack-at=hd]) .cols ::slotted(*){--zn-stacked:1;--zn-stack-basis:100%;flex-basis:100%;min-width:100%;max-width:100%}:host([stack-at=hd]) .cols ::slotted([stack-split]){display:contents}:host([stack-at=hd]) .cols--divide ::slotted(*:not(:last-child)):after{display:none}}@container (max-width:1959px){:host([stack-at="3k"]) .cols ::slotted(*){--zn-stacked:1;--zn-stack-basis:100%;flex-basis:100%;min-width:100%;max-width:100%}:host([stack-at="3k"]) .cols ::slotted([stack-split]){display:contents}:host([stack-at="3k"]) .cols--divide ::slotted(*:not(:last-child)):after{display:none}}@container (max-width:2559px){:host([stack-at="4k"]) .cols ::slotted(*){--zn-stacked:1;--zn-stack-basis:100%;flex-basis:100%;min-width:100%;max-width:100%}:host([stack-at="4k"]) .cols ::slotted([stack-split]){display:contents}:host([stack-at="4k"]) .cols--divide ::slotted(*:not(:last-child)):after{display:none}}`;var f0={first:-1,high:-1,last:1,low:1},p4="lg",kr=class extends k{constructor(){super(...arguments);this.layout="";this.stackAt="";this.maxColumns=0;this.noGap=!1;this.border=!1;this.divide=!1;this.childObserver=new MutationObserver(()=>this.requestUpdate())}connectedCallback(){super.connectedCallback(),this.childObserver.observe(this,{childList:!0})}disconnectedCallback(){super.disconnectedCallback(),this.childObserver.disconnect()}stackOrder(t){let r=t.getAttribute("stack-order");if(r===null)return null;let n=r.trim().toLowerCase();if(n in f0)return f0[n];let a=parseInt(n,10);return isNaN(a)?null:a}applyStackOrder(t,r){let n=this.stackOrder(t);return t.style.order=n===null?"":`calc(var(--zn-stacked, 0) * ${n})`,r&&(t.style.flexBasis="var(--zn-stack-basis, auto)"),n}render(){let t=this.layout.split(/[\s,]+/).map(d=>parseInt(d)).filter(d=>!!d);t.length===0&&t.push(1,1,1,1),this.layout=t.join(","),this.maxColumns=t.reduce((d,h)=>d+h,0);let r="zn-col-",n=Array.from(this.querySelectorAll(":scope > *:not([slot])")),a=t.length,s=n.length-(n.length%a||a),l=!1;return n.forEach((d,h)=>{let m=d.className.split(" ").filter(b=>!b.startsWith(r));d.className=m.join(" ");let f=h%a;d.classList.add(r+t[f]),this.border&&h>=s?d.style.overflow="hidden":d.style.overflow="",l=this.applyStackOrder(d,!1)!==null||l,d.hasAttribute("stack-split")&&(l=!0,this.childObserver.observe(d,{childList:!0}),Array.from(d.children).forEach(b=>this.applyStackOrder(b,!0)))}),l&&!this.stackAt&&(this.stackAt=p4),u`
+      </td>`}};we.styles=[z(hs),z(h0)],we.dependencies={"zn-alert":Su,"zn-button":_e,"zn-empty-state":Fu,"zn-chip":Rl,"zn-hover-container":Bu,"zn-dropdown":jt,"zn-menu":gi,"zn-menu-item":rn,"zn-button-group":Gn,"zn-confirm":Pl,"zn-skeleton":Vu,"zn-style":Uu,"zn-data-table-search":Hu},c([p({attribute:"data-uri"})],we.prototype,"dataUri",2),c([p({attribute:"data",type:Object})],we.prototype,"data",2),c([p({attribute:"sort-column"})],we.prototype,"sortColumn",2),c([p({attribute:"sort-direction"})],we.prototype,"sortDirection",2),c([p({attribute:"local-sort",type:Boolean})],we.prototype,"localSort",2),c([p({attribute:"filter"})],we.prototype,"filter",2),c([p({attribute:"search"})],we.prototype,"search",2),c([p({attribute:"wide-column"})],we.prototype,"wideColumn",2),c([p({attribute:"key"})],we.prototype,"key",2),c([p({attribute:"headers",type:Object})],we.prototype,"headers",2),c([p({attribute:!1})],we.prototype,"displayTemplates",2),c([p({attribute:"hide-headers",type:Object})],we.prototype,"hiddenHeaders",2),c([p({attribute:"hide-columns",type:Object})],we.prototype,"hiddenColumns",2),c([p({attribute:"unsortable-headers",type:Object})],we.prototype,"unsortableHeaders",2),c([p({attribute:"unsortable",type:Boolean})],we.prototype,"unsortable",2),c([p({attribute:"hide-pagination",type:Boolean})],we.prototype,"hidePagination",2),c([p({type:Boolean})],we.prototype,"standalone",2),c([p()],we.prototype,"caption",2),c([p({attribute:"empty-state-caption"})],we.prototype,"emptyStateCaption",2),c([p({attribute:"empty-state-icon"})],we.prototype,"emptyStateIcon",2),c([p({attribute:"hide-checkboxes",type:Boolean})],we.prototype,"hideCheckboxes",2),c([p()],we.prototype,"filters",2),c([p()],we.prototype,"method",2),c([p({attribute:"no-initial-load",type:Boolean})],we.prototype,"noInitialLoad",2),c([p({attribute:"group-by"})],we.prototype,"groupBy",2),c([p()],we.prototype,"groups",2),c([p({attribute:"per-page-size",type:Number})],we.prototype,"itemsPerPage",2),c([F("#select-all-rows")],we.prototype,"selectAllButton",2);var d4=we;we.define("zn-data-table");var m0=_`@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}*,*::before,*::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;--zn-col-basis:250px;--col-width:23%}:host([contents]){display:contents}.cols{display:flex;flex-wrap:wrap;flex-grow:1;flex-shrink:1;width:100%;container-type:inline-size;gap:var(--zn-gap);max-width:100%}.cols ::slotted(.zn-col-1){flex-basis:calc(var(--zn-col-basis) * 1);min-width:calc(var(--col-width) * 1);flex-grow:1}.cols ::slotted(.zn-col-2){flex-basis:calc(var(--zn-col-basis) * 2);min-width:calc(var(--col-width) * 2);flex-grow:2}.cols ::slotted(.zn-col-3){flex-basis:calc(var(--zn-col-basis) * 3);min-width:calc(var(--col-width) * 3);flex-grow:3}.cols ::slotted(.zn-col-4){flex-basis:calc(var(--zn-col-basis) * 4);min-width:calc(var(--col-width) * 4);flex-grow:4}.cols ::slotted(.zn-col-5){flex-basis:calc(var(--zn-col-basis) * 5);min-width:calc(var(--col-width) * 5);flex-grow:5}.cols ::slotted(.zn-col-6){flex-basis:calc(var(--zn-col-basis) * 6);min-width:calc(var(--col-width) * 6);flex-grow:6}.cols ::slotted(.zn-col-7){flex-basis:calc(var(--zn-col-basis) * 7);min-width:calc(var(--col-width) * 7);flex-grow:7}.cols ::slotted(.zn-col-8){flex-basis:calc(var(--zn-col-basis) * 8);min-width:calc(var(--col-width) * 8);flex-grow:8}.cols ::slotted(.zn-col-9){flex-basis:calc(var(--zn-col-basis) * 9);min-width:calc(var(--col-width) * 9);flex-grow:9}.cols ::slotted(.zn-col-10){flex-basis:calc(var(--zn-col-basis) * 10);min-width:calc(var(--col-width) * 10);flex-grow:10}.cols ::slotted(.zn-col-11){flex-basis:calc(var(--zn-col-basis) * 11);min-width:calc(var(--col-width) * 11);flex-grow:11}.cols ::slotted(.zn-col-12){flex-basis:calc(var(--zn-col-basis) * 12);min-width:calc(var(--col-width) * 12);flex-grow:12}.cols--mc-1{--col-width:calc(100% / 2)}.cols--mc-2{--col-width:calc(100% / 3)}.cols--mc-3{--col-width:calc(100% / 4)}.cols--mc-4{--col-width:calc(100% / 5)}.cols--mc-5{--col-width:calc(100% / 6)}.cols--mc-6{--col-width:calc(100% / 7)}.cols--mc-7{--col-width:calc(100% / 8)}.cols--mc-8{--col-width:calc(100% / 9)}.cols--mc-9{--col-width:calc(100% / 10)}.cols--mc-10{--col-width:calc(100% / 11)}.cols--mc-11{--col-width:calc(100% / 12)}.cols--mc-12{--col-width:calc(100% / 13)}.cols--layout-121 ::slotted(.zn-col-2){order:-1;min-width:100%}@container (min-width:1440px){.cols--layout-121 ::slotted(.zn-col-2){order:initial;min-width:46%}}.cols--divide ::slotted(*:not(:last-child)){position:relative}.cols--divide ::slotted(*:not(:last-child)):after{content:"";position:absolute;display:block;width:1px;top:0;height:100%;max-height:100%;right:calc(var(--zn-spacing-small) / 2 * -1);background-color:rgb(var(--zn-border-color))}.cols--no-gap{gap:0}.cols--border{overflow:hidden}.cols--border ::slotted(*){position:relative;padding-bottom:var(--zn-spacing-small)}.cols--border ::slotted(*):before{content:"";position:absolute;bottom:-1px;left:-100vw;right:-5px;z-index:1111;border-bottom:1px solid rgb(var(--zn-border-color)) !important}.cols ::slotted([stack-split]){display:flex;flex-direction:column;gap:var(--zn-gap)}.cols--pad{padding:var(--zn-spacing-2x-small)}.cols--pad-x{padding-inline:var(--zn-spacing-2x-small)}.cols--pad-y{padding-block:var(--zn-spacing-2x-small)}@container (max-width:359px){:host([stack-at=sm]) .cols ::slotted(*){--zn-stacked:1;--zn-stack-basis:100%;flex-basis:100%;min-width:100%;max-width:100%}:host([stack-at=sm]) .cols ::slotted([stack-split]){display:contents}:host([stack-at=sm]) .cols--divide ::slotted(*:not(:last-child)):after{display:none}}@container (max-width:479px){:host([stack-at=smp]) .cols ::slotted(*){--zn-stacked:1;--zn-stack-basis:100%;flex-basis:100%;min-width:100%;max-width:100%}:host([stack-at=smp]) .cols ::slotted([stack-split]){display:contents}:host([stack-at=smp]) .cols--divide ::slotted(*:not(:last-child)):after{display:none}}@container (max-width:599px){:host([stack-at=ph]) .cols ::slotted(*){--zn-stacked:1;--zn-stack-basis:100%;flex-basis:100%;min-width:100%;max-width:100%}:host([stack-at=ph]) .cols ::slotted([stack-split]){display:contents}:host([stack-at=ph]) .cols--divide ::slotted(*:not(:last-child)):after{display:none}}@container (max-width:767px){:host([stack-at=md]) .cols ::slotted(*){--zn-stacked:1;--zn-stack-basis:100%;flex-basis:100%;min-width:100%;max-width:100%}:host([stack-at=md]) .cols ::slotted([stack-split]){display:contents}:host([stack-at=md]) .cols--divide ::slotted(*:not(:last-child)):after{display:none}}@container (max-width:1099px){:host([stack-at=lg]) .cols ::slotted(*){--zn-stacked:1;--zn-stack-basis:100%;flex-basis:100%;min-width:100%;max-width:100%}:host([stack-at=lg]) .cols ::slotted([stack-split]){display:contents}:host([stack-at=lg]) .cols--divide ::slotted(*:not(:last-child)):after{display:none}}@container (max-width:1439px){:host([stack-at=hd]) .cols ::slotted(*){--zn-stacked:1;--zn-stack-basis:100%;flex-basis:100%;min-width:100%;max-width:100%}:host([stack-at=hd]) .cols ::slotted([stack-split]){display:contents}:host([stack-at=hd]) .cols--divide ::slotted(*:not(:last-child)):after{display:none}}@container (max-width:1959px){:host([stack-at="3k"]) .cols ::slotted(*){--zn-stacked:1;--zn-stack-basis:100%;flex-basis:100%;min-width:100%;max-width:100%}:host([stack-at="3k"]) .cols ::slotted([stack-split]){display:contents}:host([stack-at="3k"]) .cols--divide ::slotted(*:not(:last-child)):after{display:none}}@container (max-width:2559px){:host([stack-at="4k"]) .cols ::slotted(*){--zn-stacked:1;--zn-stack-basis:100%;flex-basis:100%;min-width:100%;max-width:100%}:host([stack-at="4k"]) .cols ::slotted([stack-split]){display:contents}:host([stack-at="4k"]) .cols--divide ::slotted(*:not(:last-child)):after{display:none}}`;var f0={first:-1,high:-1,last:1,low:1},p4="lg",kr=class extends k{constructor(){super(...arguments);this.layout="";this.stackAt="";this.maxColumns=0;this.noGap=!1;this.border=!1;this.divide=!1;this.childObserver=new MutationObserver(()=>this.requestUpdate())}connectedCallback(){super.connectedCallback(),this.childObserver.observe(this,{childList:!0})}disconnectedCallback(){super.disconnectedCallback(),this.childObserver.disconnect()}stackOrder(t){let r=t.getAttribute("stack-order");if(r===null)return null;let n=r.trim().toLowerCase();if(n in f0)return f0[n];let a=parseInt(n,10);return isNaN(a)?null:a}applyStackOrder(t,r){let n=this.stackOrder(t);return t.style.order=n===null?"":`calc(var(--zn-stacked, 0) * ${n})`,r&&(t.style.flexBasis="var(--zn-stack-basis, auto)"),n}render(){let t=this.layout.split(/[\s,]+/).map(d=>parseInt(d)).filter(d=>!!d);t.length===0&&t.push(1,1,1,1),this.layout=t.join(","),this.maxColumns=t.reduce((d,h)=>d+h,0);let r="zn-col-",n=Array.from(this.querySelectorAll(":scope > *:not([slot])")),a=t.length,s=n.length-(n.length%a||a),l=!1;return n.forEach((d,h)=>{let m=d.className.split(" ").filter(b=>!b.startsWith(r));d.className=m.join(" ");let f=h%a;d.classList.add(r+t[f]),this.border&&h>=s?d.style.overflow="hidden":d.style.overflow="",l=this.applyStackOrder(d,!1)!==null||l,d.hasAttribute("stack-split")&&(l=!0,this.childObserver.observe(d,{childList:!0}),Array.from(d.children).forEach(b=>this.applyStackOrder(b,!0)))}),l&&!this.stackAt&&(this.stackAt=p4),u`
       <div part="base" class="${q({cols:!0,"cols--no-gap":this.noGap,"cols--border":this.border,"cols--pad":this.pad,"cols--pad-x":this.padX,"cols--pad-y":this.padY,"cols--divide":this.divide,[`cols--layout-${this.layout.replaceAll(",","")}`]:!!this.layout,[`cols--mc-${this.maxColumns}`]:!!this.maxColumns})}">
         <slot></slot>
       </div>

package/package.json

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

package/src/components/cols/cols.scss

@@ -17,7 +17,6 @@
   flex-shrink: 1;
   width: 100%;
   container-type: inline-size;
-  overflow: hidden;
   gap: var(--zn-gap);
 
   max-width: 100%;
@@ -70,6 +69,12 @@
     gap: 0;
   }
 
+  // The row rule below each child is drawn by a pseudo reaching to -100vw, so border mode has to clip. Clipping
+  // every layout would cut the focus ring off any control sitting flush against a column edge.
+  &--border {
+    overflow: hidden;
+  }
+
   &--border ::slotted(*) {
     position: relative;
     padding-bottom: var(--zn-spacing-small); // Add spacing between element and border