@kubex/zinc 1.1.182 → 1.1.183

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

@@ -912,28 +912,6 @@
         }
       ]
     },
-    {
-      "name": "zn-cols",
-      "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": [
-        { "name": "layout", "values": [] },
-        {
-          "name": "stack-at",
-          "description": "Container width the columns collapse to a single column below, as one of the named zinc\ncontainer sizes (sm, smp, ph, md, lg, hd, 3k, 4k). Defaults to `lg` when a child declares\n`stack-order` or `stack-split`, otherwise the columns never explicitly stack.",
-          "values": []
-        },
-        { "name": "mc", "values": [] },
-        { "name": "no-gap", "values": [] },
-        { "name": "border", "values": [] },
-        { "name": "pad", "values": [] },
-        { "name": "divide", "values": [] },
-        { "name": "pad-x", "values": [] },
-        { "name": "pad-y", "values": [] }
-      ],
-      "references": [
-        { "name": "Documentation", "url": "https://zinc.style/components/cols" }
-      ]
-    },
     {
       "name": "zn-color-select",
       "description": "A simple color picker. The dropdown lists color swatches with names; the closed control shows only the selected color's swatch.\n---\n\n\n### **Events:**\n - **zn-input** - Emitted when the selected color changes.\n- **zn-clear** - Emitted when the clear button is activated.\n\n### **CSS Parts:**\n - **swatch** - The color swatch shown in the closed control.\n- **combobox** - The container that wraps the swatch and expand button (forwarded from zn-select).\n- **form-control-help-text** - The help text's wrapper (forwarded from zn-select).\n- **form-control-input** - The select's wrapper (forwarded from zn-select).",
@@ -977,6 +955,28 @@
         }
       ]
     },
+    {
+      "name": "zn-cols",
+      "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": [
+        { "name": "layout", "values": [] },
+        {
+          "name": "stack-at",
+          "description": "Container width the columns collapse to a single column below, as one of the named zinc\ncontainer sizes (sm, smp, ph, md, lg, hd, 3k, 4k). Defaults to `lg` when a child declares\n`stack-order` or `stack-split`, otherwise the columns never explicitly stack.",
+          "values": []
+        },
+        { "name": "mc", "values": [] },
+        { "name": "no-gap", "values": [] },
+        { "name": "border", "values": [] },
+        { "name": "pad", "values": [] },
+        { "name": "divide", "values": [] },
+        { "name": "pad-x", "values": [] },
+        { "name": "pad-y", "values": [] }
+      ],
+      "references": [
+        { "name": "Documentation", "url": "https://zinc.style/components/cols" }
+      ]
+    },
     {
       "name": "zn-confirm",
       "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.",

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.182",
+  "version": "1.1.183",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -2003,68 +2003,6 @@
             "events": []
           }
         },
-        {
-          "name": "zn-cols",
-          "description": "Short summary of the component's intended use.\n\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": [
-            {
-              "name": "layout",
-              "value": { "type": "string", "default": "''" }
-            },
-            {
-              "name": "stack-at",
-              "description": "Container width the columns collapse to a single column below, as one of the named zinc\ncontainer sizes (sm, smp, ph, md, lg, hd, 3k, 4k). Defaults to `lg` when a child declares\n`stack-order` or `stack-split`, otherwise the columns never explicitly stack.",
-              "value": { "type": "string", "default": "''" }
-            },
-            { "name": "mc", "value": { "type": "number", "default": "0" } },
-            {
-              "name": "no-gap",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "border",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            { "name": "pad", "value": { "type": "boolean" } },
-            {
-              "name": "divide",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            { "name": "pad-x", "value": { "type": "boolean" } },
-            { "name": "pad-y", "value": { "type": "boolean" } }
-          ],
-          "slots": [
-            { "name": "", "description": "The default slot." },
-            { "name": "example", "description": "An example slot." }
-          ],
-          "events": [
-            { "name": "zn-event-name", "description": "Emitted as an example." }
-          ],
-          "js": {
-            "properties": [
-              { "name": "layout", "type": "string" },
-              {
-                "name": "stackAt",
-                "description": "Container width the columns collapse to a single column below, as one of the named zinc\ncontainer sizes (sm, smp, ph, md, lg, hd, 3k, 4k). Defaults to `lg` when a child declares\n`stack-order` or `stack-split`, otherwise the columns never explicitly stack.",
-                "type": "string"
-              },
-              { "name": "maxColumns", "type": "number" },
-              { "name": "noGap", "type": "boolean" },
-              { "name": "border", "type": "boolean" },
-              { "name": "pad", "type": "boolean" },
-              { "name": "divide", "type": "boolean" },
-              { "name": "padX", "type": "boolean" },
-              { "name": "padY", "type": "boolean" }
-            ],
-            "events": [
-              {
-                "name": "zn-event-name",
-                "description": "Emitted as an example."
-              }
-            ]
-          }
-        },
         {
           "name": "zn-color-select",
           "description": "A simple color picker. The dropdown lists color swatches with names; the closed control shows only the selected color's swatch.\n\n---\n\n\n### **Events:**\n - **zn-input** - Emitted when the selected color changes.\n- **zn-clear** - Emitted when the clear button is activated.\n\n### **CSS Parts:**\n - **swatch** - The color swatch shown in the closed control.\n- **combobox** - The container that wraps the swatch and expand button (forwarded from zn-select).\n- **form-control-help-text** - The help text's wrapper (forwarded from zn-select).\n- **form-control-input** - The select's wrapper (forwarded from zn-select).",
@@ -2169,6 +2107,68 @@
             ]
           }
         },
+        {
+          "name": "zn-cols",
+          "description": "Short summary of the component's intended use.\n\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": [
+            {
+              "name": "layout",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "stack-at",
+              "description": "Container width the columns collapse to a single column below, as one of the named zinc\ncontainer sizes (sm, smp, ph, md, lg, hd, 3k, 4k). Defaults to `lg` when a child declares\n`stack-order` or `stack-split`, otherwise the columns never explicitly stack.",
+              "value": { "type": "string", "default": "''" }
+            },
+            { "name": "mc", "value": { "type": "number", "default": "0" } },
+            {
+              "name": "no-gap",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "border",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            { "name": "pad", "value": { "type": "boolean" } },
+            {
+              "name": "divide",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            { "name": "pad-x", "value": { "type": "boolean" } },
+            { "name": "pad-y", "value": { "type": "boolean" } }
+          ],
+          "slots": [
+            { "name": "", "description": "The default slot." },
+            { "name": "example", "description": "An example slot." }
+          ],
+          "events": [
+            { "name": "zn-event-name", "description": "Emitted as an example." }
+          ],
+          "js": {
+            "properties": [
+              { "name": "layout", "type": "string" },
+              {
+                "name": "stackAt",
+                "description": "Container width the columns collapse to a single column below, as one of the named zinc\ncontainer sizes (sm, smp, ph, md, lg, hd, 3k, 4k). Defaults to `lg` when a child declares\n`stack-order` or `stack-split`, otherwise the columns never explicitly stack.",
+                "type": "string"
+              },
+              { "name": "maxColumns", "type": "number" },
+              { "name": "noGap", "type": "boolean" },
+              { "name": "border", "type": "boolean" },
+              { "name": "pad", "type": "boolean" },
+              { "name": "divide", "type": "boolean" },
+              { "name": "padX", "type": "boolean" },
+              { "name": "padY", "type": "boolean" }
+            ],
+            "events": [
+              {
+                "name": "zn-event-name",
+                "description": "Emitted as an example."
+              }
+            ]
+          }
+        },
         {
           "name": "zn-confirm",
           "description": "Short summary of the component's intended use.\n\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.",

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>
@@ -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.183",
   "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,