@kubex/zinc 1.1.185 → 2.0.0

package/docs/pages/components/editor.md

@@ -119,6 +119,61 @@ In ticket mode (default), Enter creates new lines. Forms must be submitted using
 </script>
 ```
 
+### Compact
+
+Add `compact` to draw the editor as a form field: a bordered, resizable box under a small toolbar of bold, italic,
+link and lists. Add `source` for a button that switches to editing the raw HTML, which is submitted exactly as written.
+Switching back to the editor reduces the HTML to what the editor can show.
+
+```html:preview
+<zn-editor
+  name="body"
+  interaction-type="ticket"
+  compact
+  source
+  links
+  placeholder="Write the email"
+  help-text="Use Source to paste a designed HTML email."
+  value="<p>Thanks for signing up.</p><p>Reply to this email if you need anything.</p>">
+</zn-editor>
+```
+
+### Help Text
+
+Add text under the editor with the `help-text` attribute, or the `help-text` slot for HTML.
+
+```html:preview
+<zn-editor
+  name="content"
+  help-text="Type / to see what you can insert."
+  style="height: 250px">
+</zn-editor>
+```
+
+{% raw %}
+
+### Merge Fields
+
+Add `merge-fields` to show `{{token}}` replacements as highlighted chips. Each chip is labelled from the
+`zn-editor-quick-action` whose `content` is that token, so the same actions offer them from the `/` menu. The editor's
+value keeps the raw tokens, and tokens inside attributes such as a link's `href` are left as text.
+
+```html:preview
+<zn-editor
+  name="body"
+  interaction-type="ticket"
+  merge-fields
+  value="<p>Hi {{recipient.firstName}}, welcome to {{brand.displayName}}.</p>"
+  style="height: 250px">
+  <zn-editor-quick-action slot="context-items" icon="braces@lu" label="First name"
+                          content="{{recipient.firstName}}"></zn-editor-quick-action>
+  <zn-editor-quick-action slot="context-items" icon="braces@lu" label="Brand name"
+                          content="{{brand.displayName}}"></zn-editor-quick-action>
+</zn-editor>
+```
+
+{% endraw %}
+
 ### Caching Unsent Content
 
 Set a `store-key` to cache what the agent has typed, so an unsent reply survives page reloads and navigation. Content is saved as it is typed, restored when an editor with the same key next loads, and cleared when the form is submitted or the editor is emptied.

package/docs/pages/components/icon.md

@@ -335,6 +335,50 @@ Using shorthand notation:
 <zn-icon src="Jane Smith@av" size="40" round></zn-icon>
 ```
 
+#### Avatar Sizes
+
+`size` takes the named avatar sizes `sm` (22px), `md` (28px), `lg` (40px) and `xl` (56px), as well as a number of pixels.
+
+```html:preview
+<zn-icon src="Fiona Hart" library="avatar" size="sm" round></zn-icon>
+<zn-icon src="Fiona Hart" library="avatar" size="md" round></zn-icon>
+<zn-icon src="Fiona Hart" library="avatar" size="lg" round></zn-icon>
+<zn-icon src="Harry Hill" library="avatar" size="xl" round></zn-icon>
+```
+
+#### Presence
+
+Set `presence` to `online`, `away`, `busy`, `meeting` or `offline` to show a live-status dot. Use it only where live
+status matters, such as agents and teams.
+
+```html:preview
+<zn-icon src="Ben Brooks" library="avatar" size="md" color="success" presence="online" round></zn-icon>
+<zn-icon src="Jade Ellis" library="avatar" size="md" color="warning" presence="away" round></zn-icon>
+<zn-icon src="Kai Walsh" library="avatar" size="md" color="error" presence="busy" round></zn-icon>
+<zn-icon src="Mia Nash" library="avatar" size="md" presence="meeting" round></zn-icon>
+<zn-icon src="Ola Reed" library="avatar" size="md" presence="offline" round></zn-icon>
+```
+
+#### Tinted and Solid Avatars
+
+Avatars are solid circles unless the theme tints them — the OpenByte theme draws initials on a tinted circle. Add
+`solid` to keep an avatar solid in a tinting theme, such as a dark `default` avatar for the signed-in user.
+
+```html:preview
+<zn-icon src="Ann Isaacs" library="avatar" size="md" color="violet" round></zn-icon>
+<zn-icon src="Mark Nolan" library="avatar" size="md" color="default" solid round></zn-icon>
+```
+
+Theme tokens control the look:
+
+- `--zn-avatar-tint`: `1` draws a tinted circle with darker initials; `0` (the default) a solid circle
+- `--zn-avatar-default-color`: the colour of avatars without a `color`, in place of the colour picked from the name
+- `--zn-avatar-font-scale`: the initials' size as a fraction of the avatar's (default `0.4167`)
+- `--zn-avatar-font-weight`: the initials' weight
+- `--zn-avatar-ring-color`: the ring around the presence dot (default: the panel surface)
+
+To overlap several avatars with a tooltip on each, use [Avatar Group](/components/avatar-group).
+
 ### Gravatar
 
 Gravatar provides globally recognized avatars based on email addresses. Simply provide an email address as the `src` and the component will automatically detect it and use Gravatar.
@@ -455,7 +499,8 @@ The icon component exposes CSS custom properties for advanced styling:
 
 ### CSS Parts
 
-The icon component exposes the `icon` part for styling the internal icon element:
+The icon component exposes the `icon` part for styling the internal icon element, and `presence` for an avatar's
+status dot:
 
 ```html:preview
 <style>

package/docs/pages/components/input.md

@@ -36,6 +36,17 @@ Add descriptive help text to an input with the `help-text` attribute. For help t
 </zn-input>
 ```
 
+### Label Note
+
+Use the `label-note` attribute to show short text next to the label, styled like the help text. This is useful for
+marking a field as optional.
+
+```html:preview
+<zn-input label="Middle name" label-note="optional"></zn-input>
+<br />
+<zn-input label="Nickname" label-note="optional" label-tooltip="What friends call you"></zn-input>
+```
+
 ### Label with Tooltip
 
 Use the `label-tooltip` attribute to add text that appears in a tooltip triggered by an info icon next to the label.
@@ -136,27 +147,35 @@ the [Properties table](#properties) for the full list of options.
 
 #### Color Input
 
-The color input type displays a clickable color swatch on the right that opens the browser's native color picker. The color value is shown as editable text in the input field, allowing users to either pick a color visually or enter a color value directly.
+A colour input shows the colour and its value in one field: a swatch, then the value. Type a colour in any format —
+HEX, RGB, HSL, OKLCH, a colour name or a CSS variable such as `var(--zn-color-primary)` — and the swatch follows. The
+field works out which format was typed and keeps writing the value that way. A value that isn't a colour turns the field
+red.
+
+The swatch opens a panel with a colour area (saturation across, brightness down), a hue slider and the colour's HEX,
+RGB, HSL and OKLCH values. Edit any one and the others follow; working in a row switches the field to that format.
+Escape or a click outside closes the panel.
 
-Use the `color-format` attribute to specify the format: `hex` (default), `rgb`, or `oklch`.
+`color-format` sets the format the value starts in: `hex` (default), `rgb`, `hsl` or `oklch`.
 
 ```html:preview
-<zn-input type="color" label="Hex Format (default)" value="#3b82f6">
-  <div slot="help-text">Default format. Click the swatch to pick a color, or type a hex value like #3b82f6.</div>
-</zn-input>
+<zn-input type="color" label="Brand colour" value="#085EFD"></zn-input>
 <br />
-<zn-input type="color" label="RGB Format" color-format="rgb" value="rgb(139, 92, 246)">
-  <div slot="help-text">Type RGB values like rgb(139, 92, 246). The picker converts to/from hex automatically.</div>
+<zn-input type="color" label="Accent" color-format="rgb" value="#7557F5">
+  <div slot="help-text">Starts as RGB.</div>
 </zn-input>
 <br />
-<zn-input type="color" label="OKLCH Format" color-format="oklch" value="oklch(0.628 0.225 292.6)">
-  <div slot="help-text">Type OKLCH values like oklch(0.628 0.225 292.6). The picker converts to/from hex automatically.</div>
+<zn-input type="color" label="Highlight" color-format="hsl" value="hsl(219, 100%, 50%)">
+  <div slot="help-text">Starts as HSL.</div>
 </zn-input>
 <br />
-<zn-input type="color" label="Background Color" value="#f59e0b" clearable>
-  <div slot="help-text">Use the <code>clearable</code> attribute to allow clearing the color value.</div>
+<zn-input type="color" label="Surface" color-format="oklch" value="oklch(37.1% 0.222 274.9)">
+  <div slot="help-text">Starts as OKLCH.</div>
 </zn-input>
 <br />
+<zn-input type="color" label="Background colour" value="#F59E0B" clearable>
+  <div slot="help-text">Use the <code>clearable</code> attribute to allow clearing the colour.</div>
+</zn-input>
 ```
 
 #### Range Input

package/docs/pages/components/item.md

@@ -49,6 +49,41 @@ Use `align-end` to right align the content value.
 </zn-sp>
 ```
 
+### Facts
+
+Use `fact` for a grid of headline attributes: a small muted caption above the value. Lay them out with `zn-cols`.
+
+```html:preview
+<zn-cols layout="1,1,1" basis="150">
+  <zn-item fact caption="Sender">noreply@example.com</zn-item>
+  <zn-item fact caption="Service">Fortifi (Email)</zn-item>
+  <zn-item fact caption="List type">Customer</zn-item>
+  <zn-item fact caption="Created">17 Sep 2026</zn-item>
+</zn-cols>
+```
+
+### Key–Value
+
+Use `key-value` for the rows of a record's details: a small muted caption beside a right-aligned value on a compact
+row. Add `mono` to show identifiers in the monospace font. Put the rows in a flush, divided `zn-sp` inside a flush
+panel so the dividers run edge to edge.
+
+```html:preview
+<zn-panel caption="Details" flush>
+  <zn-sp flush divide no-gap>
+    <zn-item key-value mono caption="Charge ID">
+      fVeWtIUlss82t3RvFxD
+      <zn-copy-button slot="actions" value="fVeWtIUlss82t3RvFxD" size="16"></zn-copy-button>
+    </zn-item>
+    <zn-item key-value mono caption="Legacy ID">
+      XX:d3efbe77-d20c-11f1-b5b2-726fd569efa7:1
+      <zn-copy-button slot="actions" value="XX:d3efbe77-d20c-11f1-b5b2-726fd569efa7:1" size="16"></zn-copy-button>
+    </zn-item>
+    <zn-item key-value caption="Status"><zn-badge type="success" dot>Active</zn-badge></zn-item>
+  </zn-sp>
+</zn-panel>
+```
+
 ### Icons
 
 ```html:preview

package/docs/pages/components/key-value.md

@@ -0,0 +1,25 @@
+---
+meta:
+  title: Key Value
+  description: Edits a list of name and value pairs, submitted as a JSON object.
+layout: component
+---
+
+```html:preview
+<zn-key-value label="Placeholders" name="placeholders" key-label="Name" value-label="Value"
+              value='{"1": "{{recipient.firstName}}"}'></zn-key-value>
+```
+
+## Examples
+
+### Labels
+
+Use `key-label` and `value-label` for the placeholder of each input, and `add-text` for the add button.
+
+```html:preview
+<zn-key-value label="Headers" key-label="Header" value-label="Content" add-text="Add header"></zn-key-value>
+```
+
+### Merge fields
+
+`slash-items` is passed to each value input, so typing `/` offers the same insertions as `zn-input`.

package/docs/pages/components/menu.md

@@ -79,6 +79,73 @@ Use the `prefix` slot to add icons to menu items.
 </zn-menu>
 ```
 
+### Section Labels
+
+Head a group of items with `zn-menu-label`. Labels are skipped by keyboard navigation.
+
+```html:preview
+<zn-menu>
+  <zn-menu-label>Customer</zn-menu-label>
+  <zn-menu-item>Send email</zn-menu-item>
+  <zn-menu-item>Issue refund</zn-menu-item>
+  <zn-menu-label>Account</zn-menu-label>
+  <zn-menu-item>Change plan</zn-menu-item>
+</zn-menu>
+```
+
+### Keyboard Shortcuts
+
+Set `shortcut` on an item to show its keyboard shortcut as a key cap at the end of the row. It labels the shortcut only;
+handle the key press yourself.
+
+```html:preview
+<zn-menu>
+  <zn-menu-item shortcut="E">
+    <zn-icon slot="prefix" src="mail@lu" size="18"></zn-icon>
+    Send email
+  </zn-menu-item>
+  <zn-menu-item shortcut="R">
+    <zn-icon slot="prefix" src="undo-2@lu" size="18"></zn-icon>
+    Issue refund
+  </zn-menu-item>
+</zn-menu>
+```
+
+### Actions Menu
+
+A typical actions menu: a label, items with icons and shortcuts, and a destructive item last, after a divider.
+
+```html:preview
+<zn-dropdown>
+  <zn-button slot="trigger" caret color="secondary">Actions</zn-button>
+  <zn-menu>
+    <zn-menu-label>Customer</zn-menu-label>
+    <zn-menu-item shortcut="E"><zn-icon slot="prefix" src="mail@lu" size="18"></zn-icon>Send email</zn-menu-item>
+    <zn-menu-item shortcut="R"><zn-icon slot="prefix" src="undo-2@lu" size="18"></zn-icon>Issue refund</zn-menu-item>
+    <zn-menu-item><zn-icon slot="prefix" src="repeat@lu" size="18"></zn-icon>Retry payment</zn-menu-item>
+    <zn-menu-item><zn-icon slot="prefix" src="copy@lu" size="18"></zn-icon>Copy customer ID</zn-menu-item>
+    <hr>
+    <zn-menu-item color="error"><zn-icon slot="prefix" src="trash-2@lu" size="18"></zn-icon>Delete customer</zn-menu-item>
+  </zn-menu>
+</zn-dropdown>
+```
+
+The `actions` property builds the same menu from data: `type: "label"` adds a label, `type: "divider"` a divider, and
+an item's `color` and `shortcut` work as the attributes do.
+
+```html:preview
+<zn-menu id="actions-menu"></zn-menu>
+<script>
+  document.getElementById('actions-menu').actions = [
+    {type: 'label', title: 'Customer'},
+    {title: 'Send email', icon: 'mail@lu', shortcut: 'E', path: '#'},
+    {title: 'Issue refund', icon: 'undo-2@lu', shortcut: 'R', path: '#'},
+    {type: 'divider'},
+    {title: 'Delete customer', icon: 'trash-2@lu', color: 'error', path: '#'}
+  ];
+</script>
+```
+
 ### Shell Variant
 
 Use `variant="shell"` for the app-shell header dropdown look: a padded, translucent panel with floating rounded items that highlight with the primary colour on hover. The variant is automatically propagated to the menu's items.
@@ -313,16 +380,16 @@ Menus support full keyboard navigation:
 
 ### Dividers
 
-Menu items have no built-in separators — to group items visually, add HTML elements with `role="separator"`.
+Add an `<hr>` between menu items to split them into groups.
 
 ```html:preview
 <zn-menu>
   <zn-menu-item>Cut</zn-menu-item>
   <zn-menu-item>Copy</zn-menu-item>
   <zn-menu-item>Paste</zn-menu-item>
-  <hr style="margin: 0; border: none; border-top: 1px solid rgba(0,0,0,0.1);">
+  <hr>
   <zn-menu-item>Select All</zn-menu-item>
-  <hr style="margin: 0; border: none; border-top: 1px solid rgba(0,0,0,0.1);">
+  <hr>
   <zn-menu-item color="error">Delete</zn-menu-item>
 </zn-menu>
 ```
@@ -351,7 +418,7 @@ A comprehensive example showing various menu features together.
         <zn-menu-item value="doc3">document3.txt</zn-menu-item>
       </zn-menu>
     </zn-menu-item>
-    <hr style="margin: 0; border: none; border-top: 1px solid rgba(0,0,0,0.1);">
+    <hr>
     <zn-menu-item value="save">
       <zn-icon slot="prefix" src="save" size="20"></zn-icon>
       Save
@@ -360,14 +427,14 @@ A comprehensive example showing various menu features together.
       <zn-icon slot="prefix" src="save_as" size="20"></zn-icon>
       Save As...
     </zn-menu-item>
-    <hr style="margin: 0; border: none; border-top: 1px solid rgba(0,0,0,0.1);">
+    <hr>
     <zn-menu-item type="checkbox" value="auto-save" checked>
       Auto Save
     </zn-menu-item>
     <zn-menu-item type="checkbox" value="show-line-numbers">
       Show Line Numbers
     </zn-menu-item>
-    <hr style="margin: 0; border: none; border-top: 1px solid rgba(0,0,0,0.1);">
+    <hr>
     <zn-menu-item value="export">
       Export
       <zn-menu slot="submenu">
@@ -381,7 +448,7 @@ A comprehensive example showing various menu features together.
         </zn-menu-item>
       </zn-menu>
     </zn-menu-item>
-    <hr style="margin: 0; border: none; border-top: 1px solid rgba(0,0,0,0.1);">
+    <hr>
     <zn-menu-item value="close" color="error">
       <zn-icon slot="prefix" src="close" size="20"></zn-icon>
       Close File

package/docs/pages/components/nav-item.md

@@ -0,0 +1,15 @@
+---
+meta:
+  title: Nav Item
+  description: A selectable row in a nav list, with an optional description and count.
+layout: component
+---
+
+```html:preview
+<zn-nav-list>
+  <zn-nav-item count="4">Monthly plans</zn-nav-item>
+  <zn-nav-item count="3">Annual plans</zn-nav-item>
+</zn-nav-list>
+```
+
+Nav items are used inside a [Nav List](/components/nav-list). See its page for the master–detail layout.

package/docs/pages/components/nav-list.md

@@ -0,0 +1,132 @@
+---
+meta:
+  title: Nav List
+  description: A card of selectable groups shown beside the selected group's contents, for a master–detail layout.
+layout: component
+---
+
+```html:preview
+<zn-tabs flush gap>
+  <zn-nav-list slot="left">
+    <zn-nav-item tab="" count="4">Monthly plans</zn-nav-item>
+    <zn-nav-item tab="annual-plans" count="3">Annual plans</zn-nav-item>
+    <zn-nav-item tab="billing" count="3">Billing preferences</zn-nav-item>
+  </zn-nav-list>
+
+  <zn-panel id="" caption="Monthly plans">
+    <p>The selected group's contents (usually a data table).</p>
+  </zn-panel>
+  <zn-panel id="annual-plans" caption="Annual plans">
+    <p>Annual plan contents.</p>
+  </zn-panel>
+  <zn-panel id="billing" caption="Billing preferences">
+    <p>Billing preference contents.</p>
+  </zn-panel>
+</zn-tabs>
+```
+
+## Examples
+
+### Master–Detail
+
+Use a nav list when a long set of groups sits beside the selected group's contents. Place it in the `left` slot of
+a `zn-tabs` with the `flush` and `gap` attributes. Each `zn-nav-item` takes a `tab` attribute naming the `id` of its panel, the
+same way tab navigation does, so the selection can also be remembered with `store-key` and panels loaded with
+`tab-uri`.
+
+When the tabs are narrower than 900px, the list moves above the contents and scrolls after 224px.
+
+```html:preview
+<zn-tabs flush gap>
+  <zn-nav-list slot="left">
+    <zn-nav-item tab="" count="12">Customers</zn-nav-item>
+    <zn-nav-item tab="leads" count="48">Leads</zn-nav-item>
+    <zn-nav-item tab="archived">Archived</zn-nav-item>
+  </zn-nav-list>
+
+  <zn-panel id="" caption="Customers">
+    <p>Customer contents.</p>
+  </zn-panel>
+  <zn-panel id="leads" caption="Leads">
+    <p>Lead contents.</p>
+  </zn-panel>
+  <zn-panel id="archived" caption="Archived">
+    <p>Archived contents.</p>
+  </zn-panel>
+</zn-tabs>
+```
+
+### Counts
+
+Set `count` on an item to show a count at the end of the row. Long labels are truncated with an ellipsis.
+
+```html:preview
+<zn-nav-list>
+  <zn-nav-item count="4">Monthly plans</zn-nav-item>
+  <zn-nav-item count="128">A group with a much longer name than the list is wide</zn-nav-item>
+  <zn-nav-item>No count</zn-nav-item>
+</zn-nav-list>
+```
+
+### Divided
+
+Add the `divide` attribute for full-width rows split by dividers, with the selected row marked by a bar on its edge
+and counts drawn as pills. Give an item a `description` for a line of detail below its label.
+
+```html:preview
+<zn-tabs flush gap>
+  <zn-nav-list slot="left" caption="Sections" divide>
+    <zn-nav-item tab="" count="6" description="Opening, discovery and resolution">General</zn-nav-item>
+    <zn-nav-item tab="security" count="5" description="Identity checks and disclosures">Security &amp; compliance</zn-nav-item>
+    <zn-nav-item tab="closing" count="3" description="Wrap-up and follow-up">Closing</zn-nav-item>
+  </zn-nav-list>
+
+  <zn-panel id="" caption="General"><p>General contents.</p></zn-panel>
+  <zn-panel id="security" caption="Security &amp; compliance"><p>Security contents.</p></zn-panel>
+  <zn-panel id="closing" caption="Closing"><p>Closing contents.</p></zn-panel>
+</zn-tabs>
+```
+
+### Search
+
+Add the `searchable` attribute to filter the items by their label. Set `search-placeholder` and `empty-label` to change
+the input's placeholder and the message shown when nothing matches.
+
+```html:preview
+<zn-tabs flush gap>
+  <zn-nav-list slot="left" searchable search-placeholder="Search groups">
+    <zn-nav-item tab="" count="4">Monthly plans</zn-nav-item>
+    <zn-nav-item tab="annual-plans" count="3">Annual plans</zn-nav-item>
+    <zn-nav-item tab="billing" count="3">Billing preferences</zn-nav-item>
+    <zn-nav-item tab="notifications" count="7">Notifications</zn-nav-item>
+    <zn-nav-item tab="security" count="2">Security</zn-nav-item>
+  </zn-nav-list>
+
+  <zn-panel id="" caption="Monthly plans"><p>Monthly plan contents.</p></zn-panel>
+  <zn-panel id="annual-plans" caption="Annual plans"><p>Annual plan contents.</p></zn-panel>
+  <zn-panel id="billing" caption="Billing preferences"><p>Billing preference contents.</p></zn-panel>
+  <zn-panel id="notifications" caption="Notifications"><p>Notification contents.</p></zn-panel>
+  <zn-panel id="security" caption="Security"><p>Security contents.</p></zn-panel>
+</zn-tabs>
+```
+
+### Width and Height
+
+Set `--zn-nav-list-width` to change the card's width, and `--zn-nav-list-max-height` to cap its height. The list
+scrolls inside the card once it reaches the cap.
+
+```html:preview
+<zn-nav-list style="--zn-nav-list-width: 12rem; --zn-nav-list-max-height: 9rem;">
+  <zn-nav-item count="1">January</zn-nav-item>
+  <zn-nav-item count="4">February</zn-nav-item>
+  <zn-nav-item count="2">March</zn-nav-item>
+  <zn-nav-item count="6">April</zn-nav-item>
+  <zn-nav-item count="3">May</zn-nav-item>
+  <zn-nav-item count="5">June</zn-nav-item>
+</zn-nav-list>
+```
+
+### Keyboard
+
+The list is a single tab stop. Arrow Up and Arrow Down move between items, Home and End jump to the first and last, and
+Enter or Space selects the focused item.

package/docs/pages/components/navbar.md

@@ -54,4 +54,103 @@ layout: component
 
 <zn-navbar small icon-bar rounded  navigation="[{&quot;path&quot;:&quot;#&quot;,&quot;title&quot;:&quot;HTML&quot;},{&quot;path&quot;:&quot;#&quot;,&quot;title&quot;:&quot;Text&quot;}]">>
 </zn-navbar>
-```
+```
+
+### Pill
+
+Add the `pill` attribute to draw the tabs as a segmented control: a grey track with a raised pill that slides to the
+active tab, stretching and settling with a spring as it moves.
+
+```html:preview
+<zn-tabs>
+  <zn-navbar slot="top" pill navigation='[{"tab":"","title":"All"},{"tab":"active","title":"Active"},{"tab":"draft","title":"Draft"},{"tab":"archived","title":"Archived"}]'></zn-navbar>
+  <div id="">All</div>
+  <div id="active">Active</div>
+  <div id="draft">Draft</div>
+  <div id="archived">Archived</div>
+</zn-tabs>
+```
+
+### Sliding Indicator
+
+Set `--zn-navbar-tab-indicator-slide: 1` to replace each tab's own line with a single indicator that slides to the active tab. Style it with `::part(indicator)`; `--zn-navbar-indicator-top` and `--zn-navbar-indicator-height` give the active tab's box, so the indicator can fill the tab as a pill instead of underlining it.
+
+```html:preview
+<style>
+  .pill-tabs zn-navbar {
+    --zn-navbar-tab-indicator-slide: 1;
+    --zn-navbar-tab-background: transparent;
+    --zn-navbar-tab-hover-background: transparent;
+    --zn-navbar-tab-hover-backdrop: transparent;
+    --zn-navbar-tab-active-background: transparent;
+  }
+
+  .pill-tabs zn-navbar::part(container) {
+    border-bottom: 0;
+  }
+
+  .pill-tabs zn-navbar::part(navbar) {
+    width: fit-content;
+    height: auto;
+    padding: 4px;
+    border-radius: 10px;
+    background: var(--zn-color-neutral-100);
+  }
+
+  .pill-tabs zn-navbar::part(navbar-item) {
+    z-index: 1;
+    min-height: 32px;
+    border: 0;
+  }
+
+  .pill-tabs zn-navbar::part(indicator) {
+    z-index: 0;
+    top: var(--zn-navbar-indicator-top);
+    bottom: auto;
+    height: var(--zn-navbar-indicator-height);
+    border-radius: 7px;
+    background: #fff;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
+  }
+</style>
+
+<zn-tabs class="pill-tabs">
+  <zn-navbar slot="top" navigation='[{"tab":"","title":"All"},{"tab":"active","title":"Active"},{"tab":"draft","title":"Draft"},{"tab":"archived","title":"Archived"}]'></zn-navbar>
+  <div id="">All</div>
+  <div id="active">Active</div>
+  <div id="draft">Draft</div>
+  <div id="archived">Archived</div>
+</zn-tabs>
+```
+
+### Liquid Indicator
+
+`zn-navbar pill` draws the tabs as a segmented control with this motion built in. The indicator moves by its two
+edges: on a tab change it squishes slightly during `--zn-navbar-tab-indicator-delay`, then its leading edge glides to
+the new tab while the trailing edge follows on a damped spring, so it stretches a little and settles. Neither edge
+travels beyond the new tab. Reduced motion turns all of this off.
+
+```html:preview
+<style>
+  .liquid-tabs zn-navbar {
+    /* Squish, then move once the squish is at its deepest */
+    --zn-navbar-tab-indicator-delay: 60ms;
+    --zn-navbar-tab-indicator-squash: 0.87;
+    /* The leading edge glides in on a drawer curve */
+    --zn-navbar-tab-indicator-duration: 280ms;
+    --zn-navbar-tab-indicator-easing: cubic-bezier(0.32, 0.72, 0, 1);
+    /* The trailing edge follows on a spring that overshoots once as it catches up */
+    --zn-navbar-tab-indicator-trail-duration: 400ms;
+    --zn-navbar-tab-indicator-trail-easing: linear(0, 0.044, 0.151, 0.286, 0.428, 0.562, 0.681, 0.78, 0.86, 0.92, 0.964, 0.993, 1.012, 1.023, 1.028, 1.028, 1.026, 1.023, 1.019, 1.015, 1.011, 1.008, 1.005, 1.003, 1.002, 1.001, 1, 1, 1);
+  }
+</style>
+
+<zn-tabs class="pill-tabs liquid-tabs">
+  <zn-navbar slot="top" navigation='[{"tab":"","title":"All"},{"tab":"active","title":"Active"},{"tab":"draft","title":"Draft"},{"tab":"suspended","title":"Suspended"},{"tab":"archived","title":"Archived"}]'></zn-navbar>
+  <div id="">All</div>
+  <div id="active">Active</div>
+  <div id="draft">Draft</div>
+  <div id="suspended">Suspended</div>
+  <div id="archived">Archived</div>
+</zn-tabs>
+```