@kubex/zinc 1.1.184 → 2.0.0

package/docs/data/report-table.json

@@ -0,0 +1,314 @@
+{
+  "dimension": {
+    "label": "Publisher"
+  },
+  "groups": [
+    {
+      "label": "Difference between 2026-10-19 and 2026-10-20",
+      "columns": [
+        {
+          "key": "revenue",
+          "label": "Revenue",
+          "format": "currency",
+          "style": "breakeven",
+          "formula": "{d2.total.revenue} - {d1.total.revenue}"
+        },
+        {
+          "key": "inbound",
+          "label": "Inbound Actions",
+          "format": "number",
+          "style": "breakeven",
+          "formula": "{d2.i.unique} - {d1.i.unique}"
+        },
+        {
+          "key": "leads",
+          "label": "Leads",
+          "format": "number",
+          "style": "breakeven",
+          "formula": "{d2.lead.total} - {d1.lead.total}"
+        },
+        {
+          "key": "acquisitions",
+          "label": "Acquisitions",
+          "format": "number",
+          "style": "breakeven",
+          "formula": "{d2.acquisition.total} - {d1.acquisition.total}"
+        },
+        {
+          "key": "ca",
+          "label": "Click / Acquisition",
+          "format": "percent",
+          "decimals": 2,
+          "style": "breakeven",
+          "formula": "({d2.acquisition.total} / {d2.i.unique}) - ({d1.acquisition.total} / {d1.i.unique})"
+        },
+        {
+          "key": "spend",
+          "label": "Spend Difference",
+          "format": "currency",
+          "style": "breakeven",
+          "formula": "{d2.total.commission} - {d1.total.commission}"
+        }
+      ]
+    },
+    {
+      "label": "2026-10-19",
+      "columns": [
+        {
+          "key": "d1Inbound",
+          "label": "Inbound Actions",
+          "format": "number",
+          "value": "d1.i.unique"
+        },
+        {
+          "key": "d1Leads",
+          "label": "Leads",
+          "format": "number",
+          "value": "d1.lead.total"
+        }
+      ]
+    },
+    {
+      "label": "2026-10-20",
+      "columns": [
+        {
+          "key": "d2Inbound",
+          "label": "Inbound Actions",
+          "format": "number",
+          "value": "d2.i.unique"
+        },
+        {
+          "key": "d2Leads",
+          "label": "Leads",
+          "format": "number",
+          "value": "d2.lead.total"
+        }
+      ]
+    }
+  ],
+  "rows": [
+    {
+      "id": "AFF-1",
+      "label": "NovaBeyond - Push/Display - Jake",
+      "uri": "#publisher-1",
+      "values": {
+        "d1": {
+          "total": {
+            "revenue": 2097.41,
+            "commission": 1650.2
+          },
+          "i": {
+            "unique": 1298
+          },
+          "lead": {
+            "total": 592
+          },
+          "acquisition": {
+            "total": 29
+          }
+        },
+        "d2": {
+          "total": {
+            "revenue": 700.68,
+            "commission": 1004.34
+          },
+          "i": {
+            "unique": 9200
+          },
+          "lead": {
+            "total": 1252
+          },
+          "acquisition": {
+            "total": 31
+          }
+        }
+      }
+    },
+    {
+      "id": "AFF-2",
+      "label": "AdLion - Bigo/DSP - Priya",
+      "uri": "#publisher-2",
+      "values": {
+        "d1": {
+          "total": {
+            "revenue": 14820.66,
+            "commission": 12410.18
+          },
+          "i": {
+            "unique": 48211
+          },
+          "lead": {
+            "total": 15302
+          },
+          "acquisition": {
+            "total": 402
+          }
+        },
+        "d2": {
+          "total": {
+            "revenue": 7825.52,
+            "commission": 4624.87
+          },
+          "i": {
+            "unique": 16083
+          },
+          "lead": {
+            "total": 5776
+          },
+          "acquisition": {
+            "total": 334
+          }
+        }
+      }
+    },
+    {
+      "id": "AFF-3",
+      "label": "UPBeat - Monthly - Dev",
+      "uri": "#publisher-3",
+      "values": {
+        "d1": {
+          "total": {
+            "revenue": 8211.09,
+            "commission": 6120.55
+          },
+          "i": {
+            "unique": 20114
+          },
+          "lead": {
+            "total": 4980
+          },
+          "acquisition": {
+            "total": 171
+          }
+        },
+        "d2": {
+          "total": {
+            "revenue": 11211.48,
+            "commission": 7671.39
+          },
+          "i": {
+            "unique": 13031
+          },
+          "lead": {
+            "total": 3568
+          },
+          "acquisition": {
+            "total": 197
+          }
+        }
+      }
+    },
+    {
+      "id": "AFF-4",
+      "label": "MobPlus - Native - Billy",
+      "uri": "#publisher-4",
+      "values": {
+        "d1": {
+          "total": {
+            "revenue": 22904.18,
+            "commission": 19877.42
+          },
+          "i": {
+            "unique": 15871
+          },
+          "lead": {
+            "total": 6215
+          },
+          "acquisition": {
+            "total": 388
+          }
+        },
+        "d2": {
+          "total": {
+            "revenue": 42857.51,
+            "commission": 41658.05
+          },
+          "i": {
+            "unique": 26666
+          },
+          "lead": {
+            "total": 13255
+          },
+          "acquisition": {
+            "total": 706
+          }
+        }
+      }
+    },
+    {
+      "id": "AFF-5",
+      "label": "ClickHarbor - Search - Tom",
+      "uri": "#publisher-5",
+      "values": {
+        "d1": {
+          "total": {
+            "revenue": 4120.77,
+            "commission": 3399.01
+          },
+          "i": {
+            "unique": 6122
+          },
+          "lead": {
+            "total": 2080
+          },
+          "acquisition": {
+            "total": 98
+          }
+        },
+        "d2": {
+          "total": {
+            "revenue": 5153.2,
+            "commission": 4949.98
+          },
+          "i": {
+            "unique": 8169
+          },
+          "lead": {
+            "total": 2779
+          },
+          "acquisition": {
+            "total": 109
+          }
+        }
+      }
+    },
+    {
+      "id": "AFF-6",
+      "label": "Brightwave - Social - Maya",
+      "uri": "#publisher-6",
+      "values": {
+        "d1": {
+          "total": {
+            "revenue": 61402.35,
+            "commission": 55290.64
+          },
+          "i": {
+            "unique": 26131
+          },
+          "lead": {
+            "total": 11208
+          },
+          "acquisition": {
+            "total": 905
+          }
+        },
+        "d2": {
+          "total": {
+            "revenue": 20071.26,
+            "commission": 16785.52
+          },
+          "i": {
+            "unique": 11673
+          },
+          "lead": {
+            "total": 4661
+          },
+          "acquisition": {
+            "total": 485
+          }
+        }
+      }
+    }
+  ],
+  "currency": "USD"
+}

package/docs/pages/components/avatar-group.md

@@ -0,0 +1,57 @@
+---
+meta:
+  title: Avatar Group
+  description: Overlapping avatars that show each person's name on hover, collapsing any past a limit into a "+N" count.
+layout: component
+---
+
+```html:preview
+<zn-avatar-group>
+  <zn-icon src="Ben Brooks" library="avatar" size="md" color="success"></zn-icon>
+  <zn-icon src="Jade Ellis" library="avatar" size="md" color="warning"></zn-icon>
+  <zn-icon src="Kai Walsh" library="avatar" size="md" color="error"></zn-icon>
+</zn-avatar-group>
+```
+
+## Examples
+
+### Tooltips
+
+Hovering or focusing an avatar shows its name in a tooltip: the avatar's `alt`, or its `src` when it has none. Each
+avatar is lifted over its neighbours while hovered so it shows in full.
+
+```html:preview
+<zn-avatar-group>
+  <zn-icon src="BB" alt="Ben Brooks (Support)" library="avatar" size="lg" color="success"></zn-icon>
+  <zn-icon src="JE" alt="Jade Ellis (Sales)" library="avatar" size="lg" color="warning"></zn-icon>
+  <zn-icon src="KW" alt="Kai Walsh (Billing)" library="avatar" size="lg" color="error"></zn-icon>
+</zn-avatar-group>
+```
+
+### Maximum
+
+Set `max` to show at most that many avatars. The rest are counted in a "+N" avatar whose tooltip lists their names.
+
+```html:preview
+<zn-avatar-group max="3">
+  <zn-icon src="Ben Brooks" library="avatar" size="md" color="success"></zn-icon>
+  <zn-icon src="Jade Ellis" library="avatar" size="md" color="warning"></zn-icon>
+  <zn-icon src="Kai Walsh" library="avatar" size="md" color="error"></zn-icon>
+  <zn-icon src="Ann Isaacs" library="avatar" size="md" color="violet"></zn-icon>
+  <zn-icon src="Fiona Hart" library="avatar" size="md"></zn-icon>
+  <zn-icon src="Harry Hill" library="avatar" size="md"></zn-icon>
+  <zn-icon src="Mark Nolan" library="avatar" size="md"></zn-icon>
+</zn-avatar-group>
+```
+
+### Presence
+
+Avatars keep their presence dot inside a group.
+
+```html:preview
+<zn-avatar-group>
+  <zn-icon src="Ben Brooks" library="avatar" size="md" color="success" presence="online"></zn-icon>
+  <zn-icon src="Jade Ellis" library="avatar" size="md" color="warning" presence="away"></zn-icon>
+  <zn-icon src="Kai Walsh" library="avatar" size="md" color="error" presence="busy"></zn-icon>
+</zn-avatar-group>
+```

package/docs/pages/components/badge.md

@@ -0,0 +1,67 @@
+---
+meta:
+  title: Badge
+  description: Badges label the status or category of a record, such as "Active" or "Past due".
+layout: component
+---
+
+```html:preview
+<zn-badge>Neutral</zn-badge>
+<zn-badge type="success">Active</zn-badge>
+<zn-badge type="warning">Past due</zn-badge>
+<zn-badge type="danger">Cancelled</zn-badge>
+<zn-badge type="info">Trial</zn-badge>
+<zn-badge type="ai">AI suggested</zn-badge>
+<zn-badge type="success" dot>Completed</zn-badge>
+<zn-badge type="danger" dot>Failed</zn-badge>
+<zn-badge type="info" solid>VIP</zn-badge>
+<zn-badge type="danger" solid>Urgent</zn-badge>
+<zn-badge type="success" size="large" dot>Large</zn-badge>
+```
+
+## Examples
+
+### Types
+
+Use the `type` attribute to set the badge's colour: `neutral` (default), `success`, `warning`, `danger`, `info` or `ai`. Reserve `ai` for AI-generated content — it is the only type that carries an icon.
+
+```html:preview
+<zn-badge>Neutral</zn-badge>
+<zn-badge type="success">Active</zn-badge>
+<zn-badge type="warning">Past due</zn-badge>
+<zn-badge type="danger">Cancelled</zn-badge>
+<zn-badge type="info">Trial</zn-badge>
+<zn-badge type="ai">AI suggested</zn-badge>
+```
+
+### Status Dot
+
+Use `dot` to lead the label with a status indicator in the type colour.
+
+```html:preview
+<zn-badge type="success" dot>Completed</zn-badge>
+<zn-badge type="warning" dot>Pending</zn-badge>
+<zn-badge type="danger" dot>Failed</zn-badge>
+<zn-badge dot>Draft</zn-badge>
+```
+
+### Solid
+
+Use `solid` to fill the badge with its type colour for labels that need to stand out, such as VIP or urgent.
+
+```html:preview
+<zn-badge type="info" solid>VIP</zn-badge>
+<zn-badge type="danger" solid>Urgent</zn-badge>
+<zn-badge type="success" solid>Paid</zn-badge>
+<zn-badge type="warning" solid>Overdue</zn-badge>
+```
+
+### Large
+
+Use `size="large"` for a larger badge.
+
+```html:preview
+<zn-badge type="success" size="large" dot>Large</zn-badge>
+<zn-badge type="ai" size="large">AI suggested</zn-badge>
+<zn-badge type="danger" size="large" solid>Urgent</zn-badge>
+```

package/docs/pages/components/button.md

@@ -61,9 +61,22 @@ Use the `color` attribute to set the button's color.
 <zn-button color="info">Info</zn-button>
 <zn-button color="warning">Warning</zn-button>
 <zn-button color="error">Error</zn-button>
+<zn-button color="ai" icon="auto_awesome">AI</zn-button>
 <zn-button color="transparent">Transparent</zn-button>
 ```
 
+Reserve `color="ai"` for actions that invoke AI or act on AI-generated content.
+
+### Sizes
+
+Use the `size` attribute to pick a smaller or larger button. Heights follow the theme's density.
+
+```html:preview
+<zn-button size="small">Small</zn-button>
+<zn-button>Medium</zn-button>
+<zn-button size="large">Large</zn-button>
+```
+
 ### Outline
 
 Use the `outline` attribute to set the button's outline.
@@ -189,7 +202,7 @@ Use the `square` attribute to create square-shaped buttons, useful for icon-only
 
 ### Pill Buttons
 
-Use the `pill` attribute for a label-like trigger rather than an action: fully rounded, sentence case and regular weight, so it reads as a value you can change rather than a command. Used for the filter chips in `zn-data-table-filter`.
+Use the `pill` attribute for a label-like trigger rather than an action: fully rounded, sentence case and regular weight, so it reads as a value you can change rather than a command.
 
 ```html:preview
 <zn-button pill panel-bg icon="chevron-down@lu" icon-position="right">Role</zn-button>
@@ -276,6 +289,33 @@ You can also override form attributes using `formaction`, `formmethod`, `formenc
 </form>
 ```
 
+### Long Press Menu
+
+Put a `<zn-menu>` in the `menu` slot to give a button advanced options, the way an app in the macOS Dock shows its menu when held. A click still runs the button's own action; holding it for `long-press-delay` milliseconds (500 by default) opens the menu instead. Keep holding and drag onto an item, then release, to choose it in one gesture.
+
+Right click, <kbd>Arrow Down</kbd>, <kbd>Shift</kbd>+<kbd>F10</kbd> and the context menu key also open the menu. Use `menu-placement` to change where it opens.
+
+Clicks on menu items bubble through the button, so a `click` listener on the button also hears them. Wire item actions through the menu's `zn-select` event, or check `event.target`.
+
+```html:preview
+<zn-button color="primary" class="long-press-example" long-press-delay="400">
+  Send
+  <zn-menu slot="menu">
+    <zn-menu-item value="schedule">Schedule send</zn-menu-item>
+    <zn-menu-item value="draft">Save as draft</zn-menu-item>
+    <zn-menu-item value="test">Send a test to myself</zn-menu-item>
+  </zn-menu>
+</zn-button>
+
+<script type="module">
+  const button = document.querySelector('.long-press-example');
+  button.addEventListener('click', e => {
+    if (e.target === button) alert('Send');
+  });
+  button.querySelector('zn-menu').addEventListener('zn-select', e => alert(e.detail.item.value));
+</script>
+```
+
 ### Dropdown Closer
 
 Use the `dropdown-closer` attribute to automatically close parent dropdowns when the button is clicked.

package/docs/pages/components/chat-message.md

@@ -67,6 +67,22 @@ multiple lines when they overflow.
 </zn-chat-message>
 ```
 
+### Footer
+
+Use the `footer` slot for content beneath the bubble, such as reactions or a thread summary. The row
+only takes up space when something is slotted into it.
+
+```html:preview
+<zn-chat-message sender="Agent Name" time="1718193420">
+  Deploy is out — let me know if anything looks off.
+  <div slot="footer">
+    <zn-chip>👍 3</zn-chip>
+    <zn-chip>🎉 1</zn-chip>
+    <zn-button size="small" color="transparent">2 replies</zn-button>
+  </div>
+</zn-chat-message>
+```
+
 ### Custom Bubble Color
 
 The bubble background can be themed with the `--message-background` custom property.

package/docs/pages/components/checkbox.md

@@ -172,7 +172,7 @@ Use the `checked-icon` and `unchecked-icon` attributes to display custom icons f
 
 ### Contained Style
 
-Add the `contained` attribute to draw a card-like container around a checkbox. This style is useful for giving more emphasis to a checkbox or list of checkboxes.
+Add the `contained` attribute to draw a card-like container around a checkbox. This style is useful for giving more emphasis to a checkbox or list of checkboxes. The container shows the checked state, so the checkbox indicator is hidden; set `control-position` to place one in the card.
 
 ```html:preview
 <zn-checkbox description="Grants access to cash account and charge card features" contained>Financial products access</zn-checkbox>

package/docs/pages/components/chip.md

@@ -29,7 +29,7 @@ A basic chip displays text content with default neutral styling.
 
 ### Types
 
-Use the `type` attribute to change the semantic color and styling of the chip. Available types are: `neutral` (default), `primary`, `info`, `success`, `warning`, `error`, `transparent`, and `custom`.
+Use the `type` attribute to change the semantic color and styling of the chip. Available types are: `neutral` (default), `primary`, `info`, `success`, `warning`, `error`, `ai`, `transparent`, and `custom`. Reserve `ai` for AI-generated content.
 
 ```html:preview
 <zn-chip type="neutral">Neutral</zn-chip>
@@ -38,9 +38,21 @@ Use the `type` attribute to change the semantic color and styling of the chip. A
 <zn-chip type="success">Success</zn-chip>
 <zn-chip type="warning">Warning</zn-chip>
 <zn-chip type="error">Error</zn-chip>
+<zn-chip type="ai">AI</zn-chip>
 <zn-chip type="transparent">Transparent</zn-chip>
 ```
 
+### Dot and Solid
+
+Use `dot` to lead the label with a dot in the type colour, and `solid` to fill the chip with it.
+
+```html:preview
+<zn-chip type="success" dot>Paid</zn-chip>
+<zn-chip type="warning" dot>Pending</zn-chip>
+<zn-chip type="warning" solid>Overdue</zn-chip>
+<zn-chip type="error" solid>Failed</zn-chip>
+```
+
 ### With Icons
 
 Use the `icon` attribute to add an icon to the chip. Icons appear on the left side of the chip content.
@@ -111,15 +123,15 @@ Chips can include an action button, typically used for removing or closing the c
 ```html:preview
 <zn-chip icon="tag" type="info">
   Removable Tag
-  <zn-button icon="close" slot="action" icon-size="12" color="transparent"></zn-button>
+  <zn-button icon="close" slot="action" icon-size="14" color="transparent"></zn-button>
 </zn-chip>
 <zn-chip icon="label" type="success">
   Another Tag
-  <zn-button icon="close" slot="action" icon-size="12" color="transparent"></zn-button>
+  <zn-button icon="close" slot="action" icon-size="14" color="transparent"></zn-button>
 </zn-chip>
 <zn-chip icon="bookmark" type="warning">
   Bookmark
-  <zn-button icon="close" slot="action" icon-size="12" color="transparent"></zn-button>
+  <zn-button icon="close" slot="action" icon-size="14" color="transparent"></zn-button>
 </zn-chip>
 ```
 
@@ -189,19 +201,19 @@ Chips work well when grouped together to represent multiple tags or categories.
 <div style="display: flex; gap: 8px; flex-wrap: wrap;">
   <zn-chip icon="tag" type="info">
     Frontend
-    <zn-button icon="close" slot="action" icon-size="12" color="transparent"></zn-button>
+    <zn-button icon="close" slot="action" icon-size="14" color="transparent"></zn-button>
   </zn-chip>
   <zn-chip icon="tag" type="info">
     Backend
-    <zn-button icon="close" slot="action" icon-size="12" color="transparent"></zn-button>
+    <zn-button icon="close" slot="action" icon-size="14" color="transparent"></zn-button>
   </zn-chip>
   <zn-chip icon="tag" type="info">
     Database
-    <zn-button icon="close" slot="action" icon-size="12" color="transparent"></zn-button>
+    <zn-button icon="close" slot="action" icon-size="14" color="transparent"></zn-button>
   </zn-chip>
   <zn-chip icon="tag" type="info">
     DevOps
-    <zn-button icon="close" slot="action" icon-size="12" color="transparent"></zn-button>
+    <zn-button icon="close" slot="action" icon-size="14" color="transparent"></zn-button>
   </zn-chip>
 </div>
 ```
@@ -231,7 +243,7 @@ Chips can be used to display user information or assignments.
   <zn-chip icon="person" type="primary">Bob Johnson</zn-chip>
   <zn-chip icon="person" type="primary">
     Alice Williams
-    <zn-button icon="close" slot="action" icon-size="12" color="transparent"></zn-button>
+    <zn-button icon="close" slot="action" icon-size="14" color="transparent"></zn-button>
   </zn-chip>
 </div>
 ```
@@ -244,19 +256,19 @@ Here's a complete example demonstrating removable chips with JavaScript interact
 <div id="chip-container" style="display: flex; gap: 8px; flex-wrap: wrap;">
   <zn-chip icon="tag" type="info">
     Design
-    <zn-button icon="close" slot="action" icon-size="12" color="transparent"></zn-button>
+    <zn-button icon="close" slot="action" icon-size="14" color="transparent"></zn-button>
   </zn-chip>
   <zn-chip icon="tag" type="info">
     Development
-    <zn-button icon="close" slot="action" icon-size="12" color="transparent"></zn-button>
+    <zn-button icon="close" slot="action" icon-size="14" color="transparent"></zn-button>
   </zn-chip>
   <zn-chip icon="tag" type="info">
     Testing
-    <zn-button icon="close" slot="action" icon-size="12" color="transparent"></zn-button>
+    <zn-button icon="close" slot="action" icon-size="14" color="transparent"></zn-button>
   </zn-chip>
   <zn-chip icon="tag" type="info">
     Documentation
-    <zn-button icon="close" slot="action" icon-size="12" color="transparent"></zn-button>
+    <zn-button icon="close" slot="action" icon-size="14" color="transparent"></zn-button>
   </zn-chip>
 </div>
 

package/docs/pages/components/color-picker.md

@@ -0,0 +1,37 @@
+---
+meta:
+  title: Color Picker
+  description: A colour panel with a saturation and brightness area, a hue slider and the colour's HEX, RGB, HSL and OKLCH values.
+layout: component
+---
+
+```html:preview
+<zn-color-picker value="#085EFD"></zn-color-picker>
+```
+
+The panel that a [colour input](/components/input#color-input) opens from its swatch. In a form, use
+`<zn-input type="color">` rather than the panel on its own.
+
+## Examples
+
+### Using the Panel
+
+The colour area sets saturation (left to right) and brightness (bottom to top); click or drag, or use the arrow keys
+(Shift for bigger steps). The hue slider sits under it. HEX, RGB, HSL and OKLCH are always shown together: edit any one
+and the others follow, and an out-of-range number is marked red.
+
+`value` accepts any CSS colour and reads back as `#RRGGBB`. `format` is the row last worked in, which a colour input
+uses as the format to write its value in. Listen for `zn-input` to follow changes.
+
+```html:preview
+<zn-color-picker class="color-picker-demo" value="rgb(117, 87, 245)"></zn-color-picker>
+<p>Value: <code class="color-picker-demo-value">#7557F5</code> · format: <code class="color-picker-demo-format">hex</code></p>
+
+<script type="module">
+  const picker = document.querySelector('.color-picker-demo');
+  picker.addEventListener('zn-input', () => {
+    document.querySelector('.color-picker-demo-value').textContent = picker.value;
+    document.querySelector('.color-picker-demo-format').textContent = picker.format;
+  });
+</script>
+```