@kubex/zinc 1.0.118 → 1.1.0

package/docs/assets/styles/docs.css

@@ -169,7 +169,7 @@ img {
 }
 
 .badges img {
-  border-radius: var(--zn-border-radius-medium);
+  border-radius: var(--zn-border-radius);
 }
 
 .callout img,

package/docs/pages/components/button.md

@@ -117,17 +117,35 @@ Buttons can be used with just an icon and no text by omitting the button label.
 <zn-button icon="add" color="info"></zn-button>
 ```
 
-### Icon Button Style
+### Icon Buttons
 
-Use `icon-button` to make only the nested icon appear clickable. The hover color defaults to `--zn-primary`; use `color` and `hover-color` to customize the icon colors.
+Use `icon-button` to render a chromed icon button: a 40x36 white button with a border, a 6px radius, and a centred 20px icon. Pass `small` for the 36x36 variant or `round` for a 36x36 circle on the tab tint. The icon button style takes precedence over color variants like `secondary` — the `color` attribute only tints the icon.
 
 ```html:preview
-<zn-button icon-button icon="settings"></zn-button>
+<zn-button icon-button icon="inventory_2"></zn-button>
+<zn-button icon-button="small" icon="inventory_2"></zn-button>
+<zn-button icon-button="round" icon="search"></zn-button>
 <zn-button icon-button icon="favorite" color="error"></zn-button>
-<zn-button icon-button icon="share" color="#64748b" hover-color="#0f172a"></zn-button>
-<zn-button icon-button color="success" hover-color="warning">
-  <zn-icon src="add" size="16"></zn-icon>
-</zn-button>
+<zn-button icon-button icon="check" color="success"></zn-button>
+```
+
+### Plain Icon Buttons
+
+Add `plain` to remove the white background and border while keeping the button's size, for quiet inline actions. Hovering tints the background with the tab colour; add `no-hover` to suppress that too, for placements where the tint doesn't fit (e.g. on an already-tinted surface).
+
+```html:preview
+<zn-button icon-button plain icon="settings"></zn-button>
+<zn-button icon-button="small" plain icon="close" color="error" tooltip="Remove"></zn-button>
+<zn-button icon-button plain no-hover icon="close" color="error" tooltip="Remove Note"></zn-button>
+```
+
+### Icon Library
+
+Use `icon-library` to load the button's icon from a different icon library, passed through to the nested `zn-icon`.
+
+```html:preview
+<zn-button icon-button icon="flag" icon-library="lucide"></zn-button>
+<zn-button icon="rocket" icon-library="lucide">Launch</zn-button>
 ```
 
 ### Icon Position

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

@@ -0,0 +1,62 @@
+---
+meta:
+  title: Chat Message
+  description: A single message in a chat-style conversation, with an avatar, sender, time, optional badge, and a message bubble.
+layout: component
+---
+
+```html:preview
+<zn-chat-message sender="Agent Name" time="1718193420">
+  <zn-chip slot="badge" type="info">Internal Note</zn-chip>
+  The customer disconnected before I could answer his questions.
+  <zn-button slot="edit-dialog-trigger" icon="close" icon-button plain no-hover
+             color="error" tooltip="Remove Note"></zn-button>
+</zn-chat-message>
+```
+
+## Examples
+
+### Basic Message
+
+The avatar initials and colour are derived from `sender`. `time` is a unix timestamp, displayed as a localised HH:MM.
+
+```html:preview
+<zn-chat-message sender="Alan Jones" time="1718193420">
+  Thanks for getting in touch — I'll take a look at your account now.
+</zn-chat-message>
+```
+
+### Badge
+
+Use the `badge` slot to annotate the message in the header, for example marking it as an internal note.
+
+```html:preview
+<zn-chat-message sender="Agent Name" time="1718193420">
+  <zn-chip slot="badge" type="info">Internal Note</zn-chip>
+  Customer has been refunded — keep an eye out for a follow-up email.
+</zn-chat-message>
+```
+
+### Actions
+
+Use the `edit-dialog-trigger` slot to add an action to the end of the bubble, such as a remove button.
+
+```html:preview
+<zn-chat-message sender="Agent Name" time="1718193420">
+  <zn-chip slot="badge" type="info">Internal Note</zn-chip>
+  Interaction abandoned — the customer disconnected before I could answer.
+  <zn-button slot="edit-dialog-trigger" icon="close" icon-button plain no-hover
+             color="error" tooltip="Remove Note"></zn-button>
+</zn-chat-message>
+```
+
+### Custom Bubble Colour
+
+The bubble background can be themed with the `--message-background` custom property.
+
+```html:preview
+<zn-chat-message sender="Agent Name" time="1718193420"
+                 style="--message-background: rgba(var(--zn-color-info), 0.08)">
+  This one uses an info-tinted bubble instead of the default cream.
+</zn-chat-message>
+```

package/docs/pages/components/data-table-search.md

@@ -101,7 +101,7 @@ The component emits a `zn-search-change` event when the search value changes (af
 ```html:preview
 <zn-data-table-search class="search-demo" placeholder="Type to search..."></zn-data-table-search>
 
-<div class="search-results" style="margin-top: 1rem; padding: 1rem; background: var(--zn-color-neutral-50); border-radius: var(--zn-border-radius-medium);">
+<div class="search-results" style="margin-top: 1rem; padding: 1rem; background: var(--zn-color-neutral-50); border-radius: var(--zn-border-radius);">
   <strong>Search Results:</strong>
   <div class="results-content">No search performed yet</div>
 </div>
@@ -143,7 +143,7 @@ The component supports slotting additional form controls that will be included i
   </zn-select>
 </zn-data-table-search>
 
-<div class="filter-results" style="margin-top: 1rem; padding: 1rem; background: var(--zn-color-neutral-50); border-radius: var(--zn-border-radius-medium);">
+<div class="filter-results" style="margin-top: 1rem; padding: 1rem; background: var(--zn-color-neutral-50); border-radius: var(--zn-border-radius);">
   <strong>Search Parameters:</strong>
   <pre class="filter-content" style="margin-top: 0.5rem; font-size: 0.875rem;">No search performed yet</pre>
 </div>
@@ -194,7 +194,7 @@ The following input types are supported in the default slot and will have their
   <input type="hidden" name="includeArchived" value="false" />
 </zn-data-table-search>
 
-<div class="advanced-results" style="margin-top: 1rem; padding: 1rem; background: var(--zn-color-neutral-50); border-radius: var(--zn-border-radius-medium);">
+<div class="advanced-results" style="margin-top: 1rem; padding: 1rem; background: var(--zn-color-neutral-50); border-radius: var(--zn-border-radius);">
   <strong>All Search Parameters:</strong>
   <pre class="advanced-content" style="margin-top: 0.5rem; font-size: 0.875rem;">No search performed yet</pre>
 </div>
@@ -259,7 +259,7 @@ The `zn-data-table-search` component is designed to work seamlessly with the `zn
   placeholder="Search users by name or email...">
 </zn-data-table-search>
 
-<div class="search-status" style="margin: 1rem 0; padding: 0.75rem; background: var(--zn-color-primary-50); border-radius: var(--zn-border-radius-medium); font-size: 0.875rem;">
+<div class="search-status" style="margin: 1rem 0; padding: 0.75rem; background: var(--zn-color-primary-50); border-radius: var(--zn-border-radius); font-size: 0.875rem;">
   Ready to search
 </div>
 
@@ -310,7 +310,7 @@ The component implements the `ZincFormControl` interface and can be used within
   </zn-button>
 </form>
 
-<div class="form-output" style="margin-top: 1rem; padding: 1rem; background: var(--zn-color-neutral-50); border-radius: var(--zn-border-radius-medium);">
+<div class="form-output" style="margin-top: 1rem; padding: 1rem; background: var(--zn-color-neutral-50); border-radius: var(--zn-border-radius);">
   <strong>Form Data:</strong>
   <pre class="form-content" style="margin-top: 0.5rem; font-size: 0.875rem;">No form submission yet</pre>
 </div>
@@ -355,7 +355,7 @@ Use the `getFormData()` method to retrieve all form data from the search compone
   Get Form Data
 </zn-button>
 
-<div class="data-output" style="margin-top: 1rem; padding: 1rem; background: var(--zn-color-neutral-50); border-radius: var(--zn-border-radius-medium);">
+<div class="data-output" style="margin-top: 1rem; padding: 1rem; background: var(--zn-color-neutral-50); border-radius: var(--zn-border-radius);">
   <strong>Form Data Object:</strong>
   <pre class="data-content" style="margin-top: 0.5rem; font-size: 0.875rem;">Click the button to retrieve form data</pre>
 </div>

package/docs/pages/components/editor.md

@@ -288,7 +288,7 @@ Add custom tools to the editor toolbar using the `zn-editor-tool` component in t
   style="height: 300px">
   <zn-editor-tool
     slot="tools"
-    icon="lightbulb"
+    icon="lightbulb@lu"
     label="Insert Tip"
     handler="dialog"
     uri="/custom/tip"

package/docs/pages/components/file.md

@@ -263,7 +263,7 @@ Use the `trigger` slot to provide completely custom content for the file control
 
 ```html:preview
 <zn-file name="custom-upload" multiple>
-  <div slot="trigger" style="padding: 2rem; border: 2px dashed var(--zn-color-neutral-300); border-radius: var(--zn-border-radius-medium); text-align: center; cursor: pointer;">
+  <div slot="trigger" style="padding: 2rem; border: 2px dashed var(--zn-color-neutral-300); border-radius: var(--zn-border-radius); text-align: center; cursor: pointer;">
     <zn-icon src="cloud_upload" style="font-size: 3rem; color: var(--zn-color-primary-600);"></zn-icon>
     <p style="margin: 0.5rem 0 0; font-weight: var(--zn-font-weight-semibold);">Click to upload or drag and drop</p>
     <p style="margin: 0.25rem 0 0; font-size: var(--zn-font-size-small); color: var(--zn-color-neutral-600);">SVG, PNG, JPG or GIF (max. 800x400px)</p>

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

@@ -363,7 +363,7 @@ Form groups expose several CSS parts that can be styled to customize their appea
   .custom-form-group::part(form-control) {
     padding: var(--zn-spacing-large);
     border: 2px solid var(--zn-color-primary-300);
-    border-radius: var(--zn-border-radius-medium);
+    border-radius: var(--zn-border-radius);
     background-color: var(--zn-color-primary-50);
   }
 

package/docs/pages/components/icon.md

@@ -66,6 +66,20 @@ Additional color options are available for specific use cases:
 <zn-icon src="palette" color="white" size="32" style="background: #333; padding: 4px;"></zn-icon>
 ```
 
+### Fill
+
+Lucide icons render as outlines by default. Use the `fill` attribute to fill the shape. On its own, `fill` uses the icon's current colour; pass a preset or custom colour to fill with that colour instead. The `fill` attribute only affects the Lucide library.
+
+```html:preview
+<zn-icon src="star@lucide" size="32"></zn-icon>
+<zn-icon src="star@lucide" size="32" fill></zn-icon>
+<zn-icon src="star@lucide" size="32" fill="warning"></zn-icon>
+<zn-icon src="heart@lucide" size="32" color="error" fill></zn-icon>
+<zn-icon src="heart@lucide" size="32" fill="blue"></zn-icon>
+<zn-icon src="badge-check@lucide" size="32" fill="success"></zn-icon>
+<zn-icon src="circle@lucide" size="32" fill="#ff9900"></zn-icon>
+```
+
 ### Round Icons
 
 Add the `round` attribute to give icons a circular background.
@@ -197,6 +211,8 @@ Lucide icons are rendered as inline SVGs. Use `library="lucide"` or the `@lucide
 <zn-icon src="circle-alert@lu" size="32" color="warning"></zn-icon>
 ```
 
+You can fill Lucide outlines with the `fill` attribute — see [Fill](#fill).
+
 ### Brand Icons
 
 Display brand logos and custom company icons using the brands library.
@@ -430,6 +446,7 @@ The icon component exposes CSS custom properties for advanced styling:
 
 - `--icon-size`: Controls the icon dimensions (default: 24px)
 - `--icon-color`: Controls the icon color (default: inherit)
+- `--icon-fill`: Controls the fill color of Lucide icons when the `fill` attribute is present (default: `currentColor`)
 
 ```html:preview
 <zn-icon src="settings" style="--icon-size: 48px; --icon-color: #ff5722;"></zn-icon>
@@ -648,7 +665,7 @@ your HTML like this:
 <style>
   .icon-search {
     border: solid 1px var(--zn-panel-border-color);
-    border-radius: var(--zn-border-radius-medium);
+    border-radius: var(--zn-border-radius);
     padding: var(--zn-spacing-medium);
   }
 
@@ -693,7 +710,7 @@ your HTML like this:
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    border-radius: var(--zn-border-radius-medium);
+    border-radius: var(--zn-border-radius);
     font-size: 24px;
     width: 2em;
     height: 2em;

package/docs/pages/components/menu.md

@@ -28,7 +28,7 @@ Menus are typically used in combination with dropdowns to display a list of acti
 
 ### Basic Menu
 
-A basic menu with simple text items.
+A basic menu with simple text items. Menus render as a white panel with a soft shadow; items use the muted menu-link text style and highlight with a subtle grey background on hover, with no separators between them.
 
 ```html:preview
 <zn-menu>
@@ -79,6 +79,27 @@ Use the `prefix` slot to add icons to menu items.
 </zn-menu>
 ```
 
+### 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.
+
+```html:preview
+<zn-menu variant="shell">
+  <zn-menu-item>
+    <zn-icon slot="prefix" src="admin_panel_settings" size="24"></zn-icon>
+    Admin
+  </zn-menu-item>
+  <zn-menu-item>
+    <zn-icon slot="prefix" src="alt_route" size="24"></zn-icon>
+    Selectors
+  </zn-menu-item>
+  <zn-menu-item>
+    <zn-icon slot="prefix" src="settings" size="24"></zn-icon>
+    Settings
+  </zn-menu-item>
+</zn-menu>
+```
+
 ### Menu Items with Value
 
 Use the `value` attribute to associate a value with each menu item. This is useful for identifying which item was selected.
@@ -292,7 +313,7 @@ Menus support full keyboard navigation:
 
 ### Dividers
 
-You can add visual separators between menu items using HTML elements with `role="separator"`.
+Menu items have no built-in separators — to group items visually, add HTML elements with `role="separator"`.
 
 ```html:preview
 <zn-menu>

package/docs/pages/components/select.md

@@ -228,7 +228,7 @@ If the server returns fewer results than `max-results`, further refinements of t
     help-text="Try typing 'a' then narrowing to 'al' — the second query filters locally."
   ></zn-select>
 
-  <div id="remote-search-log" style="margin-top: 1rem; padding: 0.75rem 1rem; background: var(--zn-color-neutral-100); border-radius: var(--zn-border-radius-medium); font-family: var(--zn-font-mono); font-size: var(--zn-font-size-small); max-height: 8rem; overflow-y: auto;">
+  <div id="remote-search-log" style="margin-top: 1rem; padding: 0.75rem 1rem; background: var(--zn-color-neutral-100); border-radius: var(--zn-border-radius); font-family: var(--zn-font-mono); font-size: var(--zn-font-size-small); max-height: 8rem; overflow-y: auto;">
     <strong>Request log:</strong>
   </div>
 </div>
@@ -421,7 +421,7 @@ Use `search-only` with `search` and `data-uri` to defer all fetching until the u
     placeholder="Start typing a city name..."
   ></zn-select>
 
-  <div id="search-only-log" style="margin-top: 1rem; padding: 0.75rem 1rem; background: var(--zn-color-neutral-100); border-radius: var(--zn-border-radius-medium); font-family: var(--zn-font-mono); font-size: var(--zn-font-size-small); max-height: 8rem; overflow-y: auto;">
+  <div id="search-only-log" style="margin-top: 1rem; padding: 0.75rem 1rem; background: var(--zn-color-neutral-100); border-radius: var(--zn-border-radius); font-family: var(--zn-font-mono); font-size: var(--zn-font-size-small); max-height: 8rem; overflow-y: auto;">
     <strong>Request log:</strong>
   </div>
 </div>

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

@@ -0,0 +1,92 @@
+---
+meta:
+  title: Tile Group
+  description: Aligns a list of tiles into shared, content-driven columns so values and actions line up across every row.
+layout: component
+---
+
+A plain list of `zn-tile` rows lays each row out independently, so columns drift out of alignment whenever content widths differ (for example a wider "Manual Renewal" chip shifts that row). `zn-tile-group` wraps the rows in a shared grid: every tile becomes a row of the same columns, so captions, values and actions line up down the list.
+
+```html:preview
+<zn-tile-group divide>
+  <zn-tile caption="Test" plain>
+    <span slot="properties">Default</span>
+    <span slot="properties">£9.99/mo</span>
+    <zn-chip slot="actions" type="info">Auto Renewal</zn-chip>
+    <zn-chip slot="actions" type="success">Active</zn-chip>
+  </zn-tile>
+
+  <zn-tile caption="Test" plain>
+    <span slot="properties">Default</span>
+    <span slot="properties">£9.99/mo</span>
+    <zn-chip slot="actions" type="warning">Manual Renewal</zn-chip>
+    <zn-chip slot="actions" type="success">Active</zn-chip>
+  </zn-tile>
+
+  <zn-tile caption="Test" plain>
+    <span slot="properties">Default</span>
+    <span slot="properties">£9.99/mo</span>
+    <zn-chip slot="actions" type="info">Auto Renewal</zn-chip>
+    <zn-chip slot="actions" type="success">Active</zn-chip>
+  </zn-tile>
+</zn-tile-group>
+```
+
+## Examples
+
+### Dividers
+
+Add the `divide` attribute to draw a border between rows.
+
+```html:preview
+<zn-tile-group divide>
+  <zn-tile caption="Leslie Alexander" plain>
+    <span slot="properties">Co-Founder / CEO</span>
+    <zn-chip slot="actions" type="success">Active</zn-chip>
+  </zn-tile>
+
+  <zn-tile caption="Michael Foster" plain>
+    <span slot="properties">Engineering Lead</span>
+    <zn-chip slot="actions" type="success">Active</zn-chip>
+  </zn-tile>
+
+  <zn-tile caption="Emma Davis" plain>
+    <span slot="properties">Product Manager</span>
+    <zn-chip slot="actions">Away</zn-chip>
+  </zn-tile>
+</zn-tile-group>
+```
+
+### Without Dividers
+
+Omit `divide` for a borderless list.
+
+```html:preview
+<zn-tile-group>
+  <zn-tile caption="Wireless Headphones" plain>
+    <span slot="properties">In Stock</span>
+    <span slot="properties">$299</span>
+  </zn-tile>
+
+  <zn-tile caption="Smart Watch" plain>
+    <span slot="properties">Low Stock</span>
+    <span slot="properties">$399</span>
+  </zn-tile>
+</zn-tile-group>
+```
+
+## How It Works
+
+The group is a CSS grid: a flexible caption column on the left, then one shared, content-sized column for each value/action. Each tile is rendered as a [subgrid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Subgrid) row spanning those columns, so a column is only as wide as its widest cell across the whole list and every row aligns to it. Value/action columns are right-aligned, so chips of differing widths (Auto vs Manual Renewal) still share a clean right edge.
+
+The number of shared columns is detected automatically from the row with the most `properties` + `actions`, and published as the `--zn-tile-cols` custom property.
+
+## Usage Notes
+
+- Use a consistent set of `properties`/`actions` across rows for the cleanest alignment; rows with fewer cells leave trailing columns empty.
+- Captions render in the bold tile weight by default; add `plain` to the tiles for the regular table-content weight (as in the examples above).
+- Dividers are drawn between rows and are inset by the group's horizontal padding.
+
+## CSS Custom Properties
+
+- `--zn-tile-cols` - The number of shared value/action columns. Set automatically; you normally don't need to touch it.

package/docs/pages/components/tile.md

@@ -5,24 +5,82 @@ meta:
 layout: component
 ---
 
-Tiles are versatile components designed for building lists of structured content. They provide a consistent, responsive layout for displaying items with associated metadata, images, properties, and actions. Tiles can be clickable links or static containers, making them ideal for user lists, product catalogs, file browsers, and more.
+Tiles are compact, single-line rows (48px tall) that inherit table content typography, making them ideal for building structured lists: a leading value, optional inline values, and an optional chip or action on the right. The same flexible component covers everything from a plain phone number to a multi-value transaction row.
 
 ```html:preview
 <zn-sp divide no-gap>
-  <zn-tile caption="Leslie Alexander" description="leslie.alexander@example.com" href="https://google.com">
-    <zn-icon slot="image" size="40" src="https://i.pravatar.cc/60?img=70" round></zn-icon>
-    <zn-tile-property slot="properties" caption="Co-Founder / CEO">Last seen 2h ago</zn-tile-property>
+  <zn-tile caption="Total VPN">
+    <span slot="properties">Professional</span>
+    <span slot="properties">$9.95/mo</span>
+    <zn-chip slot="actions" type="success">Active</zn-chip>
   </zn-tile>
 
-  <zn-tile caption="Michael Foster" description="michael.foster@example.com" href="https://google.com">
-    <zn-icon slot="image" size="40" src="https://i.pravatar.cc/60?img=51" round></zn-icon>
-    <zn-tile-property slot="properties" caption="Engineering Lead">Active now</zn-tile-property>
-    <div slot="actions"><zn-button>Contact</zn-button></div>
+  <zn-tile caption="Galaxy 16 Plus Pro">
+    <span slot="properties">Android</span>
+    <zn-chip slot="actions" type="success">In Use</zn-chip>
   </zn-tile>
 
-  <zn-tile caption="Emma Davis" description="emma.davis@example.com">
-    <zn-icon slot="image" size="40" src="https://i.pravatar.cc/60?img=47" round></zn-icon>
-    <zn-tile-property slot="properties" caption="Product Manager">Last seen 1d ago</zn-tile-property>
+  <zn-tile caption="customer.name@example.com"></zn-tile>
+</zn-sp>
+```
+
+## Tile Row Variants
+
+A single tile adapts to a wide range of content. The leading `caption` is bold by default; add the `plain` attribute for the normal table-content weight. Values placed in the `properties` slot align to the right, and a chip or button in the `actions` slot pins to the far right.
+
+```html:preview
+<zn-sp divide no-gap>
+  <zn-tile caption="This is a Tile Row Value" plain>
+    <span slot="properties">Row value</span>
+    <span slot="properties">Row value</span>
+    <span slot="properties">Row value</span>
+    <zn-chip slot="actions">Chip</zn-chip>
+  </zn-tile>
+
+  <zn-tile caption="Total VPN" plain>
+    <span slot="properties">Professional</span>
+    <span slot="properties">$9.95/mo</span>
+    <zn-chip slot="actions" type="success">Active</zn-chip>
+  </zn-tile>
+
+  <zn-tile caption="+1 (541) 555-0198" plain></zn-tile>
+
+  <zn-tile caption="customer.name@example.com" plain></zn-tile>
+
+  <zn-tile caption="742 Evergreen Terrace, Apt 4B, Building C, Springfield, Oregon, 94777-1246" plain></zn-tile>
+
+  <zn-tile caption="14th August 2025" plain>
+    <span slot="properties">$9.95/mo</span>
+    <span slot="properties">Capture Auth [paypal-connector]</span>
+    <span slot="properties">Completed</span>
+    <zn-chip slot="actions" type="success">Capture Auth</zn-chip>
+  </zn-tile>
+
+  <zn-tile caption="Brand">
+    <span slot="properties">BrightCloud</span>
+  </zn-tile>
+
+  <zn-tile caption="Galaxy 16 Plus Pro" plain>
+    <span slot="properties">Android</span>
+    <zn-chip slot="actions" type="success">In Use</zn-chip>
+  </zn-tile>
+
+  <zn-tile caption="14th August 2026" description="Event Name"></zn-tile>
+</zn-sp>
+```
+
+### Emphasised Caption
+
+The leading caption renders bold by default to lead the row. Add `plain` when the first value should match the regular table-content weight (most data rows).
+
+```html:preview
+<zn-sp divide no-gap>
+  <zn-tile caption="Brand">
+    <span slot="properties">BrightCloud</span>
+  </zn-tile>
+
+  <zn-tile caption="Region" plain>
+    <span slot="properties">BrightCloud</span>
   </zn-tile>
 </zn-sp>
 ```
@@ -339,10 +397,10 @@ Tiles are responsive and adapt to different screen sizes. On smaller screens (be
 ### Layout Structure
 
 When using structured content (caption, description, properties, or actions), the tile automatically:
-- Applies padding (`var(--zn-spacing-large)`)
-- Creates a horizontal layout with left and right sections
-- The left section contains the image and content (max-width: 400px on desktop, 320px on tablet)
-- The right section contains properties and actions (50% width, grows to fill space)
+- Renders as a single-line row with a minimum height of `48px`, vertically centred
+- Inherits the table content typography (`--zn-text-table-content-*`)
+- Applies horizontal padding (`var(--zn-base-gap)`)
+- Creates a horizontal layout: the leading image, caption and description sit on the left; properties and actions align to the right
 
 ### Hover Effects
 
@@ -361,9 +419,8 @@ The tile uses different rendering logic based on slot usage:
 ### Content Overflow
 
 Text content in tiles uses ellipsis overflow handling:
-- Captions and descriptions are truncated with ellipsis if too long
-- Properties have a max-width of 150px and use ellipsis overflow
-- The properties container has horizontal scrolling on overflow
+- Captions and descriptions are kept on a single line and truncated with ellipsis if too long
+- The properties container hides its overflow to keep the row on a single line
 
 ## Tile Property Component
 
@@ -400,11 +457,9 @@ The following CSS parts are available for styling:
 
 Tiles use the following CSS custom properties from the Zinc design system:
 
-- `--zn-spacing-large` - Padding around tile content
-- `--zn-spacing-medium` - Gap between image and content
-- `--zn-spacing-small` - Gap between action buttons
-- `--zn-spacing-2x-small` - Margin above description text
+- `--zn-text-table-content-*` - Row typography (font-size, line-height, weight, color)
+- `--zn-base-gap` - Horizontal padding around tile content
+- `--zn-spacing-large` - Gap between properties and between left/right sections
+- `--zn-spacing-small` - Gap between action buttons and image/content
 - `--zn-color-neutral-100` - Hover background color
-- `--zn-text-heading` - Caption text color
-- `--zn-text-color` - Description text color
-- `--zn-font-size-medium` - Description font size
+- `--zn-text-heading` - Bold caption text color

package/package.json

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

package/scss/_root.scss

@@ -127,7 +127,7 @@
 [t="light"], .theme-light {
   // Theme Light
   --zn-panel-opacity: 1;
-  --zn-shadow: 236, 233, 241;
+  --zn-shadow: 236, 235, 249;
 
   --zn-panel-secondary: 246 246 246;
   --zn-panel-highlight: 248, 249, 252;

package/scss/mixins/_spacing-mixins.scss

@@ -33,6 +33,26 @@
   }
 }
 
+@mixin gutter {
+  @container (width > 1024px) {
+    :host {
+      --zn-gutter: 16px;
+    }
+  }
+
+  @container (width > 1400px) {
+    :host {
+      --zn-gutter: 24px;
+    }
+  }
+
+  @container (width > 1500px) {
+    :host {
+      --zn-gutter: 32px;
+    }
+  }
+}
+
 @mixin gap {
   gap: var(--zn-gap, 0);
 }

package/scss/mixins/_typography-mixins.scss

@@ -0,0 +1,22 @@
+/**
+ * Apply a text style role defined in scss/themes/_typography.scss.
+ *
+ * Usage:
+ *   @include text-style(h2);
+ *   @include text-style(button-label);
+ *
+ * Pass $spacing: true to also emit the role's paragraph spacing
+ * as margin-block-end.
+ */
+@mixin text-style($role, $spacing: false) {
+  font-family: var(--zn-font-sans);
+  font-size: var(--zn-text-#{$role}-font-size);
+  font-weight: var(--zn-text-#{$role}-font-weight);
+  line-height: var(--zn-text-#{$role}-line-height);
+  color: var(--zn-text-#{$role}-color);
+  text-transform: var(--zn-text-#{$role}-transform);
+
+  @if $spacing {
+    margin-block-end: var(--zn-text-#{$role}-spacing);
+  }
+}

package/scss/mixins/index.scss

@@ -1,5 +1,6 @@
 @forward "spacing-mixins";
 @forward "helper-mixins";
+@forward "typography-mixins";
 
 
 @mixin cosmic-border() {
@@ -15,7 +16,7 @@
     width: calc(100% + 4px);
     filter: blur(var(--zn-blur, 1px));
     opacity: 0.9;
-    border-radius: var(--zn-border-radius-large);
+    border-radius: var(--zn-border-radius);
 
     background-image: conic-gradient(
         from var(--rotate) at 50% 50%,