@kubex/zinc 1.1.182 → 1.1.184

package/dist/zn.d.ts

@@ -4383,7 +4383,7 @@ declare module "components/data-table/index" {
     }
 }
 declare module "components/cols/cols.component" {
-    import { type CSSResultGroup } from 'lit';
+    import { type CSSResultGroup, type PropertyValues } from 'lit';
     import ZincElement from "internal/zinc-element";
     /**
      * @summary Short summary of the component's intended use.
@@ -4419,8 +4419,15 @@ declare module "components/cols/cols.component" {
         padX: boolean;
         padY: boolean;
         private readonly childObserver;
+        private readonly resizeObserver;
         connectedCallback(): void;
         disconnectedCallback(): void;
+        protected updated(changed: PropertyValues<this>): void;
+        /**
+         * Flags each child that ends its row as laid out, so `divide` only draws between neighbours on the same row
+         * however the columns have wrapped.
+         */
+        private markRowEnds;
         /**
          * Reads the `stack-order` attribute of an element, returning null when it does not declare one.
          */

package/dist/zn.min.js

@@ -1631,7 +1631,7 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
                   </zn-menu-item>`})}
           </zn-menu>
         </zn-dropdown>
-      </td>`}};ke.styles=[k(pl),k(gx)],ke.dependencies={"zn-alert":cf,"zn-button":Oe,"zn-empty-state":Nf,"zn-chip":_o,"zn-hover-container":Pf,"zn-dropdown":Mr,"zn-menu":In,"zn-menu-item":Wi,"zn-panel":Hf,"zn-button-group":Nc,"zn-confirm":as,"zn-skeleton":Ff,"zn-style":Bf,"zn-data-table-search":Of},ke._sharableKnownKeys=["search","filter","sortColumn","sortDirection","page","perPage"],c([p({attribute:"data-uri"})],ke.prototype,"dataUri",2),c([p({attribute:"data",type:Object})],ke.prototype,"data",2),c([p({attribute:"sort-column"})],ke.prototype,"sortColumn",2),c([p({attribute:"sort-direction"})],ke.prototype,"sortDirection",2),c([p({attribute:"local-sort",type:Boolean})],ke.prototype,"localSort",2),c([p({attribute:"filter"})],ke.prototype,"filter",2),c([p({attribute:"search"})],ke.prototype,"search",2),c([p({attribute:"wide-column"})],ke.prototype,"wideColumn",2),c([p({attribute:"key"})],ke.prototype,"key",2),c([p({attribute:"headers",type:Object})],ke.prototype,"headers",2),c([p({attribute:!1})],ke.prototype,"displayTemplates",2),c([p({attribute:"hide-headers",type:Object})],ke.prototype,"hiddenHeaders",2),c([p({attribute:"hide-columns",type:Object})],ke.prototype,"hiddenColumns",2),c([p({attribute:"unsortable-headers",type:Object})],ke.prototype,"unsortableHeaders",2),c([p({attribute:"unsortable",type:Boolean})],ke.prototype,"unsortable",2),c([p({attribute:"hide-pagination",type:Boolean})],ke.prototype,"hidePagination",2),c([p({attribute:"hide-column-select",type:Boolean})],ke.prototype,"hideColumnSelect",2),c([p({attribute:"hide-refresh",type:Boolean})],ke.prototype,"hideRefresh",2),c([p({type:Boolean})],ke.prototype,"standalone",2),c([p()],ke.prototype,"caption",2),c([p({attribute:"empty-state-caption"})],ke.prototype,"emptyStateCaption",2),c([p({attribute:"empty-state-icon"})],ke.prototype,"emptyStateIcon",2),c([p()],ke.prototype,"filters",2),c([p()],ke.prototype,"method",2),c([p({attribute:"no-initial-load",type:Boolean})],ke.prototype,"noInitialLoad",2),c([p({attribute:"sharable",type:Boolean})],ke.prototype,"sharable",2),c([p({attribute:"wrap-search-fields",type:Boolean})],ke.prototype,"wrapSearchFields",2),c([p({attribute:"group-by"})],ke.prototype,"groupBy",2),c([p()],ke.prototype,"groups",2),c([p({attribute:"per-page-size",type:Number})],ke.prototype,"itemsPerPage",2),c([D()],ke.prototype,"_deselectedColumns",2),c([D()],ke.prototype,"_filtersOpen",2);var hl=ke;var S9=hl;hl.define("zn-data-table");var vx=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}*,*::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--no-gap.cols--divide ::slotted(*:not(:last-child)):after{right: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}:host([stack-at=sm]) .cols--no-gap.cols--divide ::slotted(*:not(:last-child)):after{display:block;top:auto;right:0;bottom:0;left:0;width:auto;height:1px}}@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}:host([stack-at=smp]) .cols--no-gap.cols--divide ::slotted(*:not(:last-child)):after{display:block;top:auto;right:0;bottom:0;left:0;width:auto;height:1px}}@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}:host([stack-at=ph]) .cols--no-gap.cols--divide ::slotted(*:not(:last-child)):after{display:block;top:auto;right:0;bottom:0;left:0;width:auto;height:1px}}@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}:host([stack-at=md]) .cols--no-gap.cols--divide ::slotted(*:not(:last-child)):after{display:block;top:auto;right:0;bottom:0;left:0;width:auto;height:1px}}@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}:host([stack-at=lg]) .cols--no-gap.cols--divide ::slotted(*:not(:last-child)):after{display:block;top:auto;right:0;bottom:0;left:0;width:auto;height:1px}}@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}:host([stack-at=hd]) .cols--no-gap.cols--divide ::slotted(*:not(:last-child)):after{display:block;top:auto;right:0;bottom:0;left:0;width:auto;height:1px}}@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}:host([stack-at="3k"]) .cols--no-gap.cols--divide ::slotted(*:not(:last-child)):after{display:block;top:auto;right:0;bottom:0;left:0;width:auto;height:1px}}@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}:host([stack-at="4k"]) .cols--no-gap.cols--divide ::slotted(*:not(:last-child)):after{display:block;top:auto;right:0;bottom:0;left:0;width:auto;height:1px}}`;var yx={first:-1,high:-1,last:1,low:1},C9="lg",Yr=class extends T{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 yx)return yx[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=C9),u`
+      </td>`}};ke.styles=[k(pl),k(gx)],ke.dependencies={"zn-alert":cf,"zn-button":Oe,"zn-empty-state":Nf,"zn-chip":_o,"zn-hover-container":Pf,"zn-dropdown":Mr,"zn-menu":In,"zn-menu-item":Wi,"zn-panel":Hf,"zn-button-group":Nc,"zn-confirm":as,"zn-skeleton":Ff,"zn-style":Bf,"zn-data-table-search":Of},ke._sharableKnownKeys=["search","filter","sortColumn","sortDirection","page","perPage"],c([p({attribute:"data-uri"})],ke.prototype,"dataUri",2),c([p({attribute:"data",type:Object})],ke.prototype,"data",2),c([p({attribute:"sort-column"})],ke.prototype,"sortColumn",2),c([p({attribute:"sort-direction"})],ke.prototype,"sortDirection",2),c([p({attribute:"local-sort",type:Boolean})],ke.prototype,"localSort",2),c([p({attribute:"filter"})],ke.prototype,"filter",2),c([p({attribute:"search"})],ke.prototype,"search",2),c([p({attribute:"wide-column"})],ke.prototype,"wideColumn",2),c([p({attribute:"key"})],ke.prototype,"key",2),c([p({attribute:"headers",type:Object})],ke.prototype,"headers",2),c([p({attribute:!1})],ke.prototype,"displayTemplates",2),c([p({attribute:"hide-headers",type:Object})],ke.prototype,"hiddenHeaders",2),c([p({attribute:"hide-columns",type:Object})],ke.prototype,"hiddenColumns",2),c([p({attribute:"unsortable-headers",type:Object})],ke.prototype,"unsortableHeaders",2),c([p({attribute:"unsortable",type:Boolean})],ke.prototype,"unsortable",2),c([p({attribute:"hide-pagination",type:Boolean})],ke.prototype,"hidePagination",2),c([p({attribute:"hide-column-select",type:Boolean})],ke.prototype,"hideColumnSelect",2),c([p({attribute:"hide-refresh",type:Boolean})],ke.prototype,"hideRefresh",2),c([p({type:Boolean})],ke.prototype,"standalone",2),c([p()],ke.prototype,"caption",2),c([p({attribute:"empty-state-caption"})],ke.prototype,"emptyStateCaption",2),c([p({attribute:"empty-state-icon"})],ke.prototype,"emptyStateIcon",2),c([p()],ke.prototype,"filters",2),c([p()],ke.prototype,"method",2),c([p({attribute:"no-initial-load",type:Boolean})],ke.prototype,"noInitialLoad",2),c([p({attribute:"sharable",type:Boolean})],ke.prototype,"sharable",2),c([p({attribute:"wrap-search-fields",type:Boolean})],ke.prototype,"wrapSearchFields",2),c([p({attribute:"group-by"})],ke.prototype,"groupBy",2),c([p()],ke.prototype,"groups",2),c([p({attribute:"per-page-size",type:Number})],ke.prototype,"itemsPerPage",2),c([D()],ke.prototype,"_deselectedColumns",2),c([D()],ke.prototype,"_filtersOpen",2);var hl=ke;var S9=hl;hl.define("zn-data-table");var vx=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}*,*::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--divide ::slotted([data-row-end]):after{display:none}.cols--no-gap{gap:0}.cols--no-gap.cols--divide ::slotted(*:not(:last-child)):after{right: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}:host([stack-at=sm]) .cols--no-gap.cols--divide ::slotted(*:not(:last-child)):after{display:block;top:auto;right:0;bottom:0;left:0;width:auto;height:1px}}@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}:host([stack-at=smp]) .cols--no-gap.cols--divide ::slotted(*:not(:last-child)):after{display:block;top:auto;right:0;bottom:0;left:0;width:auto;height:1px}}@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}:host([stack-at=ph]) .cols--no-gap.cols--divide ::slotted(*:not(:last-child)):after{display:block;top:auto;right:0;bottom:0;left:0;width:auto;height:1px}}@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}:host([stack-at=md]) .cols--no-gap.cols--divide ::slotted(*:not(:last-child)):after{display:block;top:auto;right:0;bottom:0;left:0;width:auto;height:1px}}@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}:host([stack-at=lg]) .cols--no-gap.cols--divide ::slotted(*:not(:last-child)):after{display:block;top:auto;right:0;bottom:0;left:0;width:auto;height:1px}}@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}:host([stack-at=hd]) .cols--no-gap.cols--divide ::slotted(*:not(:last-child)):after{display:block;top:auto;right:0;bottom:0;left:0;width:auto;height:1px}}@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}:host([stack-at="3k"]) .cols--no-gap.cols--divide ::slotted(*:not(:last-child)):after{display:block;top:auto;right:0;bottom:0;left:0;width:auto;height:1px}}@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}:host([stack-at="4k"]) .cols--no-gap.cols--divide ::slotted(*:not(:last-child)):after{display:block;top:auto;right:0;bottom:0;left:0;width:auto;height:1px}}`;var yx={first:-1,high:-1,last:1,low:1},C9="lg",Yr=class extends T{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());this.resizeObserver=new ResizeObserver(()=>this.markRowEnds())}connectedCallback(){super.connectedCallback(),this.childObserver.observe(this,{childList:!0}),this.resizeObserver.observe(this)}disconnectedCallback(){super.disconnectedCallback(),this.childObserver.disconnect(),this.resizeObserver.disconnect()}updated(t){super.updated(t),this.markRowEnds()}markRowEnds(){let t=Array.from(this.querySelectorAll(":scope > *:not([slot])"));if(!this.divide){t.forEach(n=>n.removeAttribute("data-row-end"));return}let r=t.map(n=>n.getBoundingClientRect());t.forEach((n,a)=>{let s=r[a],l=!r.some(d=>d!==s&&d.top<s.bottom&&d.bottom>s.top&&d.left>s.left);n.toggleAttribute("data-row-end",l)})}stackOrder(t){let r=t.getAttribute("stack-order");if(r===null)return null;let n=r.trim().toLowerCase();if(n in yx)return yx[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=C9),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>
@@ -1730,20 +1730,20 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
           </div>`:""}
         <slot name="footer" class="note__footer"></slot>
       </div>
-    `}};dn.styles=k(wx),c([p({reflect:!0})],dn.prototype,"color",2),c([p({reflect:!0})],dn.prototype,"caption",2),c([p({reflect:!0})],dn.prototype,"date",2),c([p({type:HTMLElement,reflect:!0})],dn.prototype,"body",2),c([D()],dn.prototype,"expanded",2);var $9=dn;dn.define("zn-note");var _x=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}*,*::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}.tile{position:relative;display:flex;align-items:center;justify-content:space-between;min-height:48px;-moz-column-gap:var(--zn-spacing-large);column-gap:var(--zn-spacing-large);font-size:var(--zn-text-table-content-font-size);line-height:var(--zn-text-table-content-line-height);font-weight:var(--zn-text-table-content-font-weight);color:var(--zn-text-table-content-color)}.tile--has-image,.tile--has-caption,.tile--has-description,.tile--has-properties,.tile--has-actions{padding-inline:var(--zn-base-gap)}.tile--has-description.tile--has-caption{padding-block:var(--zn-base-gap)}.tile--has-image{padding:var(--zn-base-gap)}.tile--has-href{cursor:pointer}.tile--has-href:hover{background-color:var(--zn-color-neutral-100)}.tile--flush{padding:0}.tile--flush-x{padding-inline:0}.tile--flush-y{padding-block:0}a{color:inherit;text-decoration:none;cursor:pointer}::slotted(zn-icon){display:flex;justify-content:center;align-items:center}.tile__link{display:flex;align-items:center;justify-content:space-between;flex:1;-moz-column-gap:var(--zn-spacing-small);column-gap:var(--zn-spacing-small);min-width:0}.tile__left{display:flex;align-items:center;-moz-column-gap:var(--zn-spacing-small);column-gap:var(--zn-spacing-small);min-width:0}.tile__image{display:flex;align-items:center;flex-shrink:0}.tile__content{display:flex;flex-direction:column;justify-content:center;min-width:0}.tile--inline .tile__content{flex-direction:row;align-items:center;-moz-column-gap:var(--zn-spacing-x-small);column-gap:var(--zn-spacing-x-small)}.tile__caption{margin:0;font-weight:600;color:rgb(var(--zn-text-heading));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tile--plain .tile__caption{font-weight:var(--zn-text-table-content-font-weight);color:var(--zn-text-table-content-color)}.tile__description{margin:var(--zn-spacing-3x-small) 0 0;font-weight:var(--zn-text-table-content-font-weight);color:var(--zn-text-table-content-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}slot.tile__description{display:block}.tile--inline .tile__description{margin:0}.tile__right{display:flex;align-items:center;justify-content:flex-end;-moz-column-gap:var(--zn-spacing-large);column-gap:var(--zn-spacing-large);min-width:0}.tile__properties{display:flex;flex-direction:row;align-items:center;-moz-column-gap:var(--zn-spacing-large);column-gap:var(--zn-spacing-large);min-width:0;flex-shrink:0;overflow:hidden}.tile__properties ::slotted(*){white-space:nowrap}@container (max-width:359px){.tile__properties{display:none}}.tile__actions{display:flex;align-items:center;-moz-column-gap:var(--zn-spacing-small);column-gap:var(--zn-spacing-small);flex-shrink:0}:host([grouped]){display:grid;grid-column:1/-1;grid-template-columns:subgrid;align-items:center}:host([grouped]) .tile{display:grid;grid-column:1/-1;grid-template-columns:subgrid;align-items:center;justify-items:end;min-height:48px}:host([grouped]) .tile__link,:host([grouped]) .tile__right,:host([grouped]) .tile__properties,:host([grouped]) .tile__actions{display:contents}:host([grouped]) .tile__left{grid-column:1;justify-self:stretch;min-width:0;overflow:hidden}:host([stack-actions]){container-type:inline-size}@container (max-width:599px){:host([stack-actions]) .tile{flex-wrap:wrap;row-gap:var(--zn-spacing-x-small)}:host([stack-actions]) .tile .tile__link{flex-basis:100%}:host([stack-actions]) .tile .tile__right{justify-content:flex-start;flex-wrap:wrap}:host([stack-actions]) .tile .tile__actions{flex-wrap:wrap;row-gap:var(--zn-spacing-x-small)}}`;var ar=class extends T{constructor(){super(...arguments);this.hasSlotController=new te(this,"[default]","properties","actions","image")}_isLink(){return this.href||this.dataUri}_handleActionsClick(t){if(this._isLink()){for(let r of t.composedPath()){if(r===this)break;if(!(r instanceof Element))continue;let n=r.getAttribute("href");if(r.hasAttribute("data-uri")||n!==null&&n!==""&&!n.startsWith("#"))return}t.stopPropagation()}}render(){let t=this._isLink(),r=t?an`a`:an`div`,n=this.caption&&this.caption.length>0,a=this.description&&this.description.length>0,s=this.hasSlotController.test("properties"),l=this.hasSlotController.test("actions"),d=this.hasSlotController.test("image");return De`
+    `}};dn.styles=k(wx),c([p({reflect:!0})],dn.prototype,"color",2),c([p({reflect:!0})],dn.prototype,"caption",2),c([p({reflect:!0})],dn.prototype,"date",2),c([p({type:HTMLElement,reflect:!0})],dn.prototype,"body",2),c([D()],dn.prototype,"expanded",2);var $9=dn;dn.define("zn-note");var _x=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}*,*::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}.tile{position:relative;display:flex;align-items:center;justify-content:space-between;min-height:48px;-moz-column-gap:var(--zn-spacing-large);column-gap:var(--zn-spacing-large);font-size:var(--zn-text-table-content-font-size);line-height:var(--zn-text-table-content-line-height);font-weight:var(--zn-text-table-content-font-weight);color:var(--zn-text-table-content-color)}.tile--has-image,.tile--has-caption,.tile--has-description,.tile--has-properties,.tile--has-actions{padding-inline:var(--zn-base-gap)}.tile--has-description.tile--has-caption{padding-block:var(--zn-base-gap)}.tile--has-image{padding:var(--zn-base-gap)}.tile--has-href{cursor:pointer}.tile--has-href:hover{background-color:var(--zn-color-neutral-100)}.tile--flush{padding:0}.tile--flush-x{padding-inline:0}.tile--flush-y{padding-block:0}a{color:inherit;text-decoration:none;cursor:pointer}::slotted(zn-icon){display:flex;justify-content:center;align-items:center}.tile__link{display:flex;align-items:center;justify-content:space-between;flex:1;-moz-column-gap:var(--zn-spacing-small);column-gap:var(--zn-spacing-small);min-width:0}.tile__left{display:flex;align-items:center;-moz-column-gap:var(--zn-spacing-small);column-gap:var(--zn-spacing-small);min-width:0}.tile__image{display:flex;align-items:center;flex-shrink:0}.tile__content{display:flex;flex-direction:column;justify-content:center;min-width:0}.tile--inline .tile__content{flex-direction:row;align-items:center;-moz-column-gap:var(--zn-spacing-x-small);column-gap:var(--zn-spacing-x-small)}.tile__caption{margin:0;font-weight:600;color:rgb(var(--zn-text-heading));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tile--plain .tile__caption{font-weight:var(--zn-text-table-content-font-weight);color:var(--zn-text-table-content-color)}.tile__description{margin:var(--zn-spacing-3x-small) 0 0;font-weight:var(--zn-text-table-content-font-weight);color:var(--zn-text-table-content-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}slot.tile__description{display:block}.tile--inline .tile__description{margin:0}.tile__right{display:flex;align-items:center;justify-content:flex-end;-moz-column-gap:var(--zn-spacing-large);column-gap:var(--zn-spacing-large);min-width:0}.tile__properties{display:flex;flex-direction:row;align-items:center;-moz-column-gap:var(--zn-spacing-large);column-gap:var(--zn-spacing-large);min-width:0;flex-shrink:0;overflow:hidden}.tile__properties ::slotted(*){white-space:nowrap}@container (max-width:359px){.tile__properties{display:none}}.tile__actions{display:flex;align-items:center;-moz-column-gap:var(--zn-spacing-small);column-gap:var(--zn-spacing-small);flex-shrink:0}:host([grouped]){display:grid;grid-column:1/-1;grid-template-columns:subgrid;align-items:center}:host([grouped]) .tile{display:grid;grid-column:1/-1;grid-template-columns:subgrid;align-items:center;justify-items:end;min-height:48px}:host([grouped]) .tile__link,:host([grouped]) .tile__right,:host([grouped]) .tile__properties,:host([grouped]) .tile__actions{display:contents}:host([grouped]) .tile__left{grid-column:1;justify-self:stretch;min-width:0;overflow:hidden}:host([stack-actions]){container-type:inline-size}@container (max-width:599px){:host([stack-actions]) .tile{flex-wrap:wrap;row-gap:var(--zn-spacing-x-small)}:host([stack-actions]) .tile .tile__link{flex-basis:100%}:host([stack-actions]) .tile .tile__right{justify-content:flex-start;flex-wrap:wrap}:host([stack-actions]) .tile .tile__actions{flex-wrap:wrap;row-gap:var(--zn-spacing-x-small)}}`;var ar=class extends T{constructor(){super(...arguments);this.hasSlotController=new te(this,"[default]","caption","description","properties","actions","image")}_isLink(){return this.href||this.dataUri}_handleActionsClick(t){if(this._isLink()){for(let r of t.composedPath()){if(r===this)break;if(!(r instanceof Element))continue;let n=r.getAttribute("href");if(r.hasAttribute("data-uri")||n!==null&&n!==""&&!n.startsWith("#"))return}t.stopPropagation()}}render(){let t=this._isLink(),r=t?an`a`:an`div`,n=this.caption&&this.caption.length>0||this.hasSlotController.test("caption"),a=this.description&&this.description.length>0,s=a||this.hasSlotController.test("description"),l=this.hasSlotController.test("properties"),d=this.hasSlotController.test("actions"),h=this.hasSlotController.test("image");return De`
       <div
-        class="${q({tile:!0,"tile--flush":this.flush,"tile--flush-x":this.flushX,"tile--flush-y":this.flushY,"tile--inline":this.inline,"tile--plain":this.plain,"tile--has-href":t,"tile--has-caption":n,"tile--has-description":a,"tile--has-properties":s,"tile--has-actions":l,"tile--has-image":d})}">
+        class="${q({tile:!0,"tile--flush":this.flush,"tile--flush-x":this.flushX,"tile--flush-y":this.flushY,"tile--inline":this.inline,"tile--plain":this.plain,"tile--has-href":t,"tile--has-caption":n,"tile--has-description":s,"tile--has-properties":l,"tile--has-actions":d,"tile--has-image":h})}">
         <${r}
           href="${P(this.href)}"
           data-uri="${P(this.dataUri)}"
           gaid="${P(this.gaid)}"
           data-target="${P(this.dataTarget)}"
           class="tile__link">
-          ${!n&&!a&&!s&&!l?De`
+          ${!n&&!s&&!l&&!d?De`
             <slot></slot>
           `:De`
             <div class="tile__left">
-              ${d?De`
+              ${h?De`
                 <slot name="image" part="image" class="tile__image"></slot>`:De``}
               <div class="tile__content">
                 <p part="caption" class="tile__caption">
@@ -1754,12 +1754,12 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
                     ${this.description}</p>`:De`<slot name="description" class="tile__description"></slot>`}
               </div>
             </div>
-            ${s?De`
+            ${l?De`
               <slot name="properties" part="properties" class="tile__properties"></slot>`:""}
           `}
         </${r}>
 
-        ${l?De`
+        ${d?De`
           <div class="tile__right">
             <!-- Kept outside the link so slotted controls retain their default behaviour. -->
               <slot name="actions" part="actions" class="tile__actions"
@@ -2619,8 +2619,8 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
           ${i}
         </div>
       </div>
-    `}};hn.styles=k(hw),c([p({reflect:!0})],hn.prototype,"caption",2),c([p({reflect:!0})],hn.prototype,"label",2),c([p({type:Number,reflect:!0})],hn.prototype,"steps",2),c([p({type:Number,reflect:!0})],hn.prototype,"value",2),c([p({type:Boolean,reflect:!0,attribute:"show-progress"})],hn.prototype,"showProgress",2);var aE=hn;hn.define("zn-stepper");var uw=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}*,*::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:contents}:host([layout=value-first]){display:block}.stat-tile .caption,.stat-tile .description,.stat-tile .amount,.stat-tile .bottom{margin:0}.stat-tile .caption{margin-bottom:var(--zn-spacing-x-small);font-size:var(--zn-text-chart-minor-font-size);line-height:var(--zn-text-chart-minor-line-height);font-weight:var(--zn-text-chart-minor-font-weight);color:var(--zn-text-chart-minor-color)}.stat-tile .container{display:flex;flex-direction:row;gap:var(--zn-spacing-medium);height:100%}.stat-tile .left{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}.stat-tile .amount{color:var(--zn-text-chart-major-color);font-weight:var(--zn-text-chart-major-font-weight);font-size:var(--zn-text-chart-major-font-size);line-height:var(--zn-text-chart-major-line-height);display:flex;flex-grow:1;align-items:center}.stat-tile .bottom{color:rgb(var(--zn-text));font-weight:400;padding-top:var(--zn-spacing-medium);font-size:var(--zn-font-size-small)}.stat-tile .bottom:empty{display:none}.stat-tile .diff .positive{color:rgb(var(--zn-color-success))}.stat-tile .diff .negative{color:rgb(var(--zn-color-error))}.stat-tile .diff .neutral{color:rgb(var(--zn-color-warning))}.stat-tile .icon{margin-left:var(--zn-spacing-x-small)}.stat-tile--value-first{display:flex;flex-direction:column;gap:var(--zn-spacing-2x-small);color:var(--zn-text-chart-major-color)}.stat-tile--value-first .caption{margin-bottom:0}.stat-tile--value-first .amount{flex-grow:0;gap:var(--zn-spacing-x-small);color:inherit}.stat-tile--value-first .diff{font-size:var(--zn-font-size-small);font-weight:400}.stat-tile--value-first .diff .neutral,.stat-tile--value-first .description{color:rgba(var(--zn-color-text),0.6)}.stat-tile--value-first .description{font-size:var(--zn-font-size-x-small)}.stat-tile--value-first .icon{margin-left:0}.stat-tile--padded{padding:var(--zn-spacing-large)}.stat-tile--large .amount{font-size:var(--zn-font-size-3x-large);font-weight:var(--zn-font-weight-semibold);line-height:1.15}.stat-tile--chart .amount{padding-top:var(--zn-spacing-small)}.stat-tile--chart .bottom{padding-top:var(--zn-spacing-small)}.stat-tile--primary{color:rgb(var(--zn-primary))}.stat-tile--error{color:rgb(var(--zn-color-error))}.stat-tile--info{color:rgb(var(--zn-color-info))}.stat-tile--warning{color:rgb(var(--zn-color-warning))}.stat-tile--success{color:rgb(var(--zn-color-success))}.stat-tile--neutral{color:rgb(var(--zn-text))}.stat-tile--value-first.stat-tile--neutral{color:var(--zn-text-chart-major-color)}@container (max-width:550px){.stat-tile ::slotted(.zn-col-1){flex-basis:170px}.stat-tile .amount{font-size:20px;line-height:20px;padding-top:5px}.stat-tile--large .amount{font-size:var(--zn-font-size-2x-large);line-height:1.15;padding-top:0}}`;var Jt=class extends T{constructor(){super(...arguments);this.caption="";this.description="";this.amount="0";this.type="number";this.previous="0";this.currency="";this.showDelta=!1;this.color="primary";this.layout="default";this.deltaFormat="percent";this.icon="";this.size="medium";this.padded=!1}calcPercentageDifference(){let t=parseFloat(this.previous),n=(parseFloat(this.amount)-t)/t*100;return n=Math.round(n*10)/10,n}getCurrentAmount(){if(this.currency==="")return this.amount;let t=parseFloat(this.amount),r=this.currency,n=t.toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g,",");return`${r}${n}`}getDisplayAmount(){if(this.currency!=="")return this.getCurrentAmount();if(this.type==="percent")return`${this.amount}%`;if(this.type==="time"){let t=parseInt(this.amount),r=Math.floor(t/60),n=Math.floor(r/60);return n<=0?[r%60,t%60].map(a=>a.toString().padStart(2,"0")).join(":")+"s":[n,r%60,t%60].map(a=>a.toString().padStart(2,"0")).join(":")+"s"}return this.amount}diffText(){if(this.showDelta){let t=this.calcPercentageDifference(),r="neutral",n="~";return t>0&&(r="positive",n="+"),t<0&&(r="negative",n="-"),this.deltaFormat==="points"?u`<p class="diff">${this.pointsDelta()} on Previous Period</p>`:u`<p class="diff"><span class="${r}">${n}${t}%</span> on Previous Period</p>`}return null}pointsDelta(){let t=Math.round((parseFloat(this.amount)-parseFloat(this.previous))*10)/10;return t>0?u`<span class="positive">+${t} pts</span>`:t<0?u`<span class="negative">-${Math.abs(t)} pts</span>`:u`<span class="neutral">No change</span>`}renderAmount(){return u`${this.getDisplayAmount()}${this.icon?u`
-      <zn-icon class="icon" src="${this.icon}" size="20" color="${P(this.iconColor)}"></zn-icon>`:null}`}renderValueFirst(){let t=this.showDelta?this.deltaFormat==="points"?this.pointsDelta():this.percentDelta():null;return u`
+    `}};hn.styles=k(hw),c([p({reflect:!0})],hn.prototype,"caption",2),c([p({reflect:!0})],hn.prototype,"label",2),c([p({type:Number,reflect:!0})],hn.prototype,"steps",2),c([p({type:Number,reflect:!0})],hn.prototype,"value",2),c([p({type:Boolean,reflect:!0,attribute:"show-progress"})],hn.prototype,"showProgress",2);var aE=hn;hn.define("zn-stepper");var uw=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}*,*::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:contents}:host([layout=value-first]){display:block}.stat-tile .caption,.stat-tile .description,.stat-tile .amount,.stat-tile .bottom{margin:0}.stat-tile .caption{margin-bottom:var(--zn-spacing-x-small);font-size:var(--zn-text-chart-minor-font-size);line-height:var(--zn-text-chart-minor-line-height);font-weight:var(--zn-text-chart-minor-font-weight);color:var(--zn-text-chart-minor-color)}.stat-tile .container{display:flex;flex-direction:row;gap:var(--zn-spacing-medium);height:100%}.stat-tile .left{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}.stat-tile .amount{color:var(--zn-text-chart-major-color);font-weight:var(--zn-text-chart-major-font-weight);font-size:var(--zn-text-chart-major-font-size);line-height:var(--zn-text-chart-major-line-height);display:flex;flex-grow:1;align-items:center}.stat-tile .bottom{color:rgb(var(--zn-text));font-weight:400;padding-top:var(--zn-spacing-medium);font-size:var(--zn-font-size-small)}.stat-tile .bottom:empty{display:none}.stat-tile .diff .positive{color:rgb(var(--zn-color-success))}.stat-tile .diff .negative{color:rgb(var(--zn-color-error))}.stat-tile .diff .neutral{color:rgb(var(--zn-color-warning))}.stat-tile .value{display:inline-flex;align-items:center;white-space:nowrap}.stat-tile .icon{margin-left:var(--zn-spacing-x-small)}.stat-tile--value-first{display:flex;flex-direction:column;gap:var(--zn-spacing-2x-small);color:var(--zn-text-chart-major-color)}.stat-tile--value-first .caption{margin-bottom:0}.stat-tile--value-first .amount{flex-grow:0;flex-wrap:wrap;-moz-column-gap:var(--zn-spacing-x-small);column-gap:var(--zn-spacing-x-small);color:inherit}.stat-tile--value-first .value{gap:var(--zn-spacing-x-small)}.stat-tile--value-first .diff{font-size:var(--zn-font-size-small);font-weight:400;white-space:nowrap}.stat-tile--value-first .diff .neutral,.stat-tile--value-first .description{color:rgba(var(--zn-color-text),0.6)}.stat-tile--value-first .description{font-size:var(--zn-font-size-x-small)}.stat-tile--value-first .icon{margin-left:0}.stat-tile--padded{padding:var(--zn-spacing-large)}.stat-tile--large .amount{font-size:var(--zn-font-size-3x-large);font-weight:var(--zn-font-weight-semibold);line-height:1.15}.stat-tile--chart .amount{padding-top:var(--zn-spacing-small)}.stat-tile--chart .bottom{padding-top:var(--zn-spacing-small)}.stat-tile--primary{color:rgb(var(--zn-primary))}.stat-tile--error{color:rgb(var(--zn-color-error))}.stat-tile--info{color:rgb(var(--zn-color-info))}.stat-tile--warning{color:rgb(var(--zn-color-warning))}.stat-tile--success{color:rgb(var(--zn-color-success))}.stat-tile--neutral{color:rgb(var(--zn-text))}.stat-tile--value-first.stat-tile--neutral{color:var(--zn-text-chart-major-color)}@container (max-width:550px){.stat-tile ::slotted(.zn-col-1){flex-basis:170px}.stat-tile .amount{font-size:20px;line-height:20px;padding-top:5px}.stat-tile--large .amount{font-size:var(--zn-font-size-2x-large);line-height:1.15;padding-top:0}}`;var Jt=class extends T{constructor(){super(...arguments);this.caption="";this.description="";this.amount="0";this.type="number";this.previous="0";this.currency="";this.showDelta=!1;this.color="primary";this.layout="default";this.deltaFormat="percent";this.icon="";this.size="medium";this.padded=!1}calcPercentageDifference(){let t=parseFloat(this.previous),n=(parseFloat(this.amount)-t)/t*100;return n=Math.round(n*10)/10,n}getCurrentAmount(){if(this.currency==="")return this.amount;let t=parseFloat(this.amount),r=this.currency,n=t.toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g,",");return`${r}${n}`}getDisplayAmount(){if(this.currency!=="")return this.getCurrentAmount();if(this.type==="percent")return`${this.amount}%`;if(this.type==="time"){let t=parseInt(this.amount),r=Math.floor(t/60),n=Math.floor(r/60);return n<=0?[r%60,t%60].map(a=>a.toString().padStart(2,"0")).join(":")+"s":[n,r%60,t%60].map(a=>a.toString().padStart(2,"0")).join(":")+"s"}return this.amount}diffText(){if(this.showDelta){let t=this.calcPercentageDifference(),r="neutral",n="~";return t>0&&(r="positive",n="+"),t<0&&(r="negative",n="-"),this.deltaFormat==="points"?u`<p class="diff">${this.pointsDelta()} on Previous Period</p>`:u`<p class="diff"><span class="${r}">${n}${t}%</span> on Previous Period</p>`}return null}pointsDelta(){let t=Math.round((parseFloat(this.amount)-parseFloat(this.previous))*10)/10;return t>0?u`<span class="positive">+${t} pts</span>`:t<0?u`<span class="negative">-${Math.abs(t)} pts</span>`:u`<span class="neutral">No change</span>`}renderAmount(){return u`<span class="value">${this.getDisplayAmount()}${this.icon?u`
+      <zn-icon class="icon" src="${this.icon}" size="20" color="${P(this.iconColor)}"></zn-icon>`:null}</span>`}renderValueFirst(){let t=this.showDelta?this.deltaFormat==="points"?this.pointsDelta():this.percentDelta():null;return u`
       <div class="${q({"stat-tile":!0,"stat-tile--value-first":!0,"stat-tile--large":this.size==="large","stat-tile--padded":this.padded,[`stat-tile--${this.color}`]:!0})}">
         <h3 class="caption">${this.caption}</h3>
         <p class="amount">${this.renderAmount()}${t?u`<span class="diff">${t}</span>`:null}</p>

package/package.json

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

package/src/components/cols/cols.component.ts

@@ -1,5 +1,5 @@
 import {classMap} from "lit/directives/class-map.js";
-import {type CSSResultGroup, html, unsafeCSS} from 'lit';
+import {type CSSResultGroup, html, type PropertyValues, unsafeCSS} from 'lit';
 import {property} from 'lit/decorators.js';
 import ZincElement from '../../internal/zinc-element';
 
@@ -65,14 +65,43 @@ export default class ZnCols extends ZincElement {
   // the whole subtree, to avoid reacting to unrelated content updates deeper in a column.
   private readonly childObserver: MutationObserver = new MutationObserver(() => this.requestUpdate());
 
+  private readonly resizeObserver: ResizeObserver = new ResizeObserver(() => this.markRowEnds());
+
   connectedCallback() {
     super.connectedCallback();
     this.childObserver.observe(this, {childList: true});
+    this.resizeObserver.observe(this);
   }
 
   disconnectedCallback() {
     super.disconnectedCallback();
     this.childObserver.disconnect();
+    this.resizeObserver.disconnect();
+  }
+
+  protected updated(changed: PropertyValues<this>) {
+    super.updated(changed);
+    this.markRowEnds();
+  }
+
+  /**
+   * Flags each child that ends its row as laid out, so `divide` only draws between neighbours on the same row
+   * however the columns have wrapped.
+   */
+  private markRowEnds() {
+    const children = Array.from(this.querySelectorAll(':scope > *:not([slot])'));
+    if (!this.divide) {
+      children.forEach((child) => child.removeAttribute('data-row-end'));
+      return;
+    }
+
+    const rects = children.map((child) => child.getBoundingClientRect());
+    children.forEach((child, i) => {
+      const rect = rects[i];
+      const rowEnd = !rects.some((other) =>
+        other !== rect && other.top < rect.bottom && other.bottom > rect.top && other.left > rect.left);
+      child.toggleAttribute('data-row-end', rowEnd);
+    });
   }
 
   /**

package/src/components/cols/cols.scss

@@ -63,6 +63,10 @@
         background-color: rgb(var(--zn-border-color));
       }
     }
+
+    ::slotted([data-row-end]):after {
+      display: none;
+    }
   }
 
   &--no-gap {

package/src/components/cols/cols.test.ts

@@ -135,4 +135,35 @@ describe('<zn-cols>', () => {
       expect(orderOf(el.querySelector('#usage'))).to.equal('-1');
     });
   });
+
+  describe('dividers', () => {
+    const dividerOf = (el: Element | null) => getComputedStyle(el!, '::after').display;
+
+    it('should only divide neighbours on the same row', async () => {
+      const el = await cols(`
+        <zn-cols layout="1,1" divide style="width: 600px">
+          <div id="a" style="height: 20px"></div>
+          <div id="b" style="height: 20px"></div>
+          <div id="c" style="height: 20px"></div>
+          <div id="d" style="height: 20px"></div>
+        </zn-cols>`);
+
+      expect(dividerOf(el.querySelector('#a'))).to.equal('block');
+      expect(dividerOf(el.querySelector('#b'))).to.equal('none');
+      expect(dividerOf(el.querySelector('#c'))).to.equal('block');
+    });
+
+    it('should drop the dividers once the columns wrap', async () => {
+      const el = await cols(`
+        <zn-cols layout="1,1" divide style="width: 600px">
+          <div id="a" style="height: 20px"></div>
+          <div id="b" style="height: 20px"></div>
+        </zn-cols>`);
+
+      el.style.width = '400px';
+      await aTimeout(100);
+
+      expect(dividerOf(el.querySelector('#a'))).to.equal('none');
+    });
+  });
 });

package/src/components/stat/stat.component.ts

@@ -127,8 +127,8 @@ export default class ZnStatsTile extends ZincElement {
   }
 
   private renderAmount() {
-    return html`${this.getDisplayAmount()}${this.icon ? html`
-      <zn-icon class="icon" src="${this.icon}" size="20" color="${ifDefined(this.iconColor)}"></zn-icon>` : null}`;
+    return html`<span class="value">${this.getDisplayAmount()}${this.icon ? html`
+      <zn-icon class="icon" src="${this.icon}" size="20" color="${ifDefined(this.iconColor)}"></zn-icon>` : null}</span>`;
   }
 
   private renderValueFirst() {

package/src/components/stat/stat.scss

@@ -73,6 +73,12 @@
     }
   }
 
+  .value {
+    display: inline-flex;
+    align-items: center;
+    white-space: nowrap;
+  }
+
   .icon {
     margin-left: var(--zn-spacing-x-small);
   }
@@ -89,13 +95,19 @@
 
     .amount {
       flex-grow: 0;
-      gap: var(--zn-spacing-x-small);
+      flex-wrap: wrap;
+      column-gap: var(--zn-spacing-x-small);
       color: inherit;
     }
 
+    .value {
+      gap: var(--zn-spacing-x-small);
+    }
+
     .diff {
       font-size: var(--zn-font-size-small);
       font-weight: 400;
+      white-space: nowrap;
     }
 
     .diff .neutral,

package/src/components/tile/tile.component.ts

@@ -28,7 +28,7 @@ import styles from './tile.scss';
 export default class ZnTile extends ZincElement {
   static styles: CSSResultGroup = unsafeCSS(styles);
 
-  private readonly hasSlotController = new HasSlotController(this, '[default]', 'properties', 'actions', 'image');
+  private readonly hasSlotController = new HasSlotController(this, '[default]', 'caption', 'description', 'properties', 'actions', 'image');
 
   @property({attribute: 'caption'}) caption: string;
 
@@ -84,8 +84,9 @@ export default class ZnTile extends ZincElement {
   render() {
     const isLink = this._isLink();
     const tag = isLink ? literal`a` : literal`div`;
-    const hasCaption = this.caption && this.caption.length > 0;
-    const hasDescription = this.description && this.description.length > 0;
+    const hasCaption = (this.caption && this.caption.length > 0) || this.hasSlotController.test('caption');
+    const hasDescriptionAttr = this.description && this.description.length > 0;
+    const hasDescription = hasDescriptionAttr || this.hasSlotController.test('description');
     const hasProperties = this.hasSlotController.test('properties');
     const hasActions = this.hasSlotController.test('actions');
     const hasImage = this.hasSlotController.test('image');
@@ -122,7 +123,7 @@ export default class ZnTile extends ZincElement {
                 <p part="caption" class="tile__caption">
                   <slot name="caption">${this.caption}</slot>
                 </p>
-                ${hasDescription ? html`
+                ${hasDescriptionAttr ? html`
                   <p part="description" class="tile__description">
                     ${this.description}</p>` : html`<slot name="description" class="tile__description"></slot>`}
               </div>

package/src/components/tile/tile.test.ts

@@ -9,6 +9,17 @@ describe('<zn-tile>', () => {
     expect(el).to.exist;
   });
 
+  it('should render a slotted caption and image without caption or description attributes', async () => {
+    const el = await fixture<ZnTile>(html`
+      <zn-tile>
+        <zn-icon slot="image" src="user@lu"></zn-icon>
+        <span slot="caption">Leslie Alexander</span>
+      </zn-tile>`);
+
+    expect(el.shadowRoot!.querySelector('slot[name="caption"]')).to.exist;
+    expect(el.shadowRoot!.querySelector('slot[name="image"]')).to.exist;
+  });
+
   it('should render its content as a link when href is set', async () => {
     const el = await fixture<ZnTile>(html`
       <zn-tile href="/users/leslie" caption="Leslie Alexander"></zn-tile>`);