@kubex/zinc 1.1.12 → 1.1.14

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

@@ -0,0 +1,168 @@
+---
+meta:
+  title: Channel Tile
+  description: A channel/queue slot tile with an active (occupied) face showing an in-progress item, and an available (empty) face advertising capacity with optional auto-accept.
+layout: component
+---
+
+The channel tile represents a single slot in a queue or channel rail. It has two faces:
+
+- **Active** — the slot is occupied by an in-progress item (header, leading icon, title/subtitle, and a progress/SLA bar).
+- **Available** — the slot is empty and advertising capacity. When `incoming` is set it reserves an arriving item with a countdown that can auto-accept.
+
+Tiles are designed to sit side by side in a horizontal rail; each is a fixed-width block with a right divider.
+
+```html:preview
+<div style="display: flex;">
+  <zn-channel-tile
+    header="Acme Support"
+    icon="chat"
+    color="info"
+    title="Jane Cooper"
+    subtitle="Billing question"
+    progress="60"
+    progress-color="rgb(var(--zn-color-info))">
+  </zn-channel-tile>
+  <zn-channel-tile available header="Acme Support" subtitle="Waiting for the next chat"></zn-channel-tile>
+</div>
+```
+
+## Examples
+
+### Active Tile
+
+The default (occupied) face. Set `header` for the top bar, `icon` + `color` for the leading badge, and `title`/`subtitle` for the item. The `progress` value (0–100) fills the SLA bar along the bottom edge.
+
+```html:preview
+<div style="display: flex;">
+  <zn-channel-tile
+    header="Acme Support"
+    icon="chat"
+    color="info"
+    title="Jane Cooper"
+    subtitle="Billing question"
+    progress="45"
+    progress-color="rgb(var(--zn-color-info))">
+  </zn-channel-tile>
+</div>
+```
+
+### Available Tile
+
+Set `available` to render the empty face. When `title` is omitted it defaults to "Available". The leading slot shows a built-in accept button.
+
+```html:preview
+<div style="display: flex;">
+  <zn-channel-tile available subtitle="Ready for the next interaction"></zn-channel-tile>
+</div>
+```
+
+### Accepting an Item
+
+Provide `accept-uri` and the built-in accept button becomes a link to it. When a tile is accepted, a cancelable `zn-accept` event fires before the fetch — call `preventDefault()` on it to take over the accept yourself.
+
+```html:preview
+<div style="display: flex;">
+  <zn-channel-tile
+    available
+    item-id="chat-4821"
+    accept-uri="/queue/accept/chat-4821"
+    subtitle="Click to accept">
+  </zn-channel-tile>
+</div>
+```
+
+### Incoming with Auto-Accept
+
+An `available` tile with `incoming` reserves an arriving item. Provide `reserved-until` (an epoch in seconds or milliseconds marking the end of the window) and `auto-accept-delay` (the window length in milliseconds) to drive the countdown overlay. When the window elapses the tile auto-accepts via `accept-uri`.
+
+```html:preview
+<div style="display: flex;">
+  <zn-channel-tile
+    available
+    incoming
+    rejectable
+    item-id="chat-5500"
+    title="Incoming chat"
+    subtitle="Auto-accepting…"
+    accept-uri="/queue/accept/chat-5500"
+    auto-accept-delay="15000">
+  </zn-channel-tile>
+</div>
+
+<script>
+  // Set the reservation window relative to now so the countdown animates.
+  const tile = document.currentScript.previousElementSibling.querySelector('zn-channel-tile');
+  tile.reservedUntil = Date.now() + 15000;
+</script>
+```
+
+### Rejectable
+
+Add `rejectable` to an incoming tile to offer a reject control. Pressing it emits `zn-reject` (and suppresses accept).
+
+```html:preview
+<div style="display: flex;">
+  <zn-channel-tile
+    available
+    incoming
+    rejectable
+    item-id="call-7700"
+    title="Incoming call"
+    subtitle="Reject to pass"
+    reject-icon="call_end"
+    reject-label="Reject call">
+  </zn-channel-tile>
+</div>
+```
+
+### Colors
+
+The `color` attribute sets the accent (the leading icon badge and the `--channel-tile-color` custom property). Available colors are: `default`, `primary`, `info`, `success`, `warning`, `error`, and `disabled`.
+
+```html:preview
+<div style="display: flex; flex-wrap: wrap;">
+  <zn-channel-tile icon="chat" color="primary" title="Primary" subtitle="Accent example"></zn-channel-tile>
+  <zn-channel-tile icon="chat" color="info" title="Info" subtitle="Accent example"></zn-channel-tile>
+  <zn-channel-tile icon="chat" color="success" title="Success" subtitle="Accent example"></zn-channel-tile>
+  <zn-channel-tile icon="chat" color="warning" title="Warning" subtitle="Accent example"></zn-channel-tile>
+  <zn-channel-tile icon="chat" color="error" title="Error" subtitle="Accent example"></zn-channel-tile>
+  <zn-channel-tile icon="chat" color="disabled" title="Disabled" subtitle="Accent example"></zn-channel-tile>
+</div>
+```
+
+### Custom Leading Content
+
+Use the `leading` slot to replace the leading icon in the active state.
+
+```html:preview
+<div style="display: flex;">
+  <zn-channel-tile header="Acme Support" title="Jane Cooper" subtitle="VIP customer">
+    <zn-icon slot="leading" library="avatar" src="Jane Cooper" size="36" round></zn-icon>
+  </zn-channel-tile>
+</div>
+```
+
+### Custom Action
+
+Use the `action` slot to replace the default accept button on an available tile — for example with a form.
+
+```html:preview
+<div style="display: flex;">
+  <zn-channel-tile available subtitle="Pick a queue to join">
+    <zn-button slot="action" icon="login" icon-size="20" icon-button="round" color="success"></zn-button>
+  </zn-channel-tile>
+</div>
+```
+
+### Footer
+
+Use the `footer` slot for trailing content such as status badges in the active state.
+
+```html:preview
+<div style="display: flex;">
+  <zn-channel-tile header="Acme Support" icon="chat" color="info" title="Jane Cooper" subtitle="Billing question">
+    <zn-chip slot="footer" type="warning">SLA</zn-chip>
+  </zn-channel-tile>
+</div>
+```

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

@@ -0,0 +1,54 @@
+---
+meta:
+  title: Chat Message Attachment
+  description: A file or link attachment for a chat message, rendered as an icon and label.
+layout: component
+---
+
+`zn-chat-message-attachment` represents a single file or link beneath a message. It is intended to be
+used only inside a [`zn-chat-message`](/components/chat-message) — it automatically assigns itself to
+that component's `attachments` slot, so you can drop it straight into the message.
+
+```html:preview
+<zn-chat-message sender="Agent Name" time="1718193420">
+  Here are the documents you requested.
+  <zn-chat-message-attachment href="#" name="invoice.pdf"></zn-chat-message-attachment>
+  <zn-chat-message-attachment href="#" name="statement.pdf"></zn-chat-message-attachment>
+</zn-chat-message>
+```
+
+## Examples
+
+### Custom Icon
+
+Use the `icon` attribute to change the leading icon (any `zn-icon` name).
+
+```html:preview
+<zn-chat-message sender="Agent Name" time="1718193420">
+  A couple of links for you.
+  <zn-chat-message-attachment href="#" name="View dashboard" icon="link"></zn-chat-message-attachment>
+  <zn-chat-message-attachment href="#" name="screenshot.png" icon="image"></zn-chat-message-attachment>
+</zn-chat-message>
+```
+
+### Download
+
+Set `download` to prompt a download rather than navigating to the link.
+
+```html:preview
+<zn-chat-message sender="Agent Name" time="1718193420">
+  Your export is ready.
+  <zn-chat-message-attachment href="#" name="export.csv" download></zn-chat-message-attachment>
+</zn-chat-message>
+```
+
+### Custom Label
+
+The default slot overrides the `name` attribute when you need richer label content.
+
+```html:preview
+<zn-chat-message sender="Agent Name" time="1718193420">
+  See attached.
+  <zn-chat-message-attachment href="#">contract_<strong>final</strong>.pdf</zn-chat-message-attachment>
+</zn-chat-message>
+```

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

@@ -50,7 +50,24 @@ Use the `edit-dialog-trigger` slot to add an action to the end of the bubble, su
 </zn-chat-message>
 ```
 
-### Custom Bubble Colour
+### Attachments
+
+Use [`zn-chat-message-attachment`](/components/chat-message-attachment) to display files or links
+beneath the message content. They are automatically placed in the `attachments` slot and wrap onto
+multiple lines when they overflow.
+
+```html:preview
+<zn-chat-message sender="Agent Name" time="1718193420">
+  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-attachment href="#" name="this_is_an_attachment.pdf"></zn-chat-message-attachment>
+  <zn-chat-message-attachment href="#" name="quarterly_report.xlsx"></zn-chat-message-attachment>
+  <zn-chat-message-attachment href="#" name="screenshot.png"></zn-chat-message-attachment>
+</zn-chat-message>
+```
+
+### Custom Bubble Color
 
 The bubble background can be themed with the `--message-background` custom property.
 

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

@@ -20,8 +20,6 @@ fullWidth: true
     {"key":"date","label":"Date Joined", "sortable":true}
   ]'>
 
-  <zn-data-table-search slot="search" placeholder="Search records..."></zn-data-table-search>
-
 </zn-data-table>
 ```
 
@@ -792,4 +790,4 @@ For POST requests, the table sends:
 }
 ```
 
-Additional parameters from the `inputs` slot are merged into the request.
+Additional parameters from the `inputs` slot are merged into the request.

package/package.json

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

package/scss/shared/_table.scss

@@ -8,14 +8,16 @@ table:not(.remarkd-table) {
   max-width: 100%;
   table-layout: auto;
   text-align: left;
-  font-size: var(--zn-text-table-content-font-size);
-  line-height: var(--zn-text-table-content-line-height);
-  font-weight: var(--zn-text-table-content-font-weight);
+  @include m.text-style(table-content);
 
   thead {
     font-weight: var(--zn-font-weight-medium);
   }
 
+  thead tr th {
+    background-color: rgb(var(--zn-table-header-background-color));
+  }
+
   tbody {
     //background-color: rgba(var(--zn-panel), var(--zn-panel-opacity));
 
@@ -33,28 +35,10 @@ table:not(.remarkd-table) {
     border-top: 0 !important;
   }
 
-  tbody tr:nth-of-type(even) {
-    background-color: rgba(var(--zn-body));
-  }
-
-  thead tr th:first-of-type,
-  tbody tr td:first-of-type {
-    padding-left: var(--zn-base-gap, 14px);
-  }
-
-  thead tr th:last-of-type,
-  tbody tr td:last-of-type {
-    padding-right: var(--zn-base-gap, 14px);
-  }
-
   th, td {
-    padding: m.spacing(sm);
+    padding: var(--zn-spacing-small) var(--zn-spacing-medium);
     min-width: 90px;
     white-space: nowrap;
-
-    &:first-child {
-      padding-left: 0;
-    }
   }
 
   td > span {
@@ -62,7 +46,9 @@ table:not(.remarkd-table) {
   }
 
   th {
-    padding-bottom: 0;
+    @include m.text-style(button-label);
+    text-transform: capitalize;
+    border-top: 1px solid rgb(var(--zn-border-color));
     border-bottom: 1px solid rgb(var(--zn-border-color));
   }
 }

package/scss/themes/_dark.scss

@@ -274,4 +274,7 @@
 
   /* Tooltips */
   --zn-tooltip-background-color: var(--zn-color-neutral-800);
+
+  /* tables */
+  --zn-table-header-background-color: 27, 27, 30;
 }

package/scss/themes/_light.scss

@@ -298,4 +298,8 @@
   --zn-z-index-toast: 950;
   --zn-z-index-tooltip: 1000;
   --zn-z-index-editor-action: 1000000;
+
+
+  /* tables */
+  --zn-table-header-background-color: 252, 251, 254;
 }

package/scss/themes/_typography.scss

@@ -24,6 +24,7 @@ $text-styles: (
   "h1": ("size": 16px, "line": 16px, "spacing": 18px, "weight": semibold, "color": default, "transform": none),
   "h2": ("size": 14px, "line": 16px, "spacing": 15px, "weight": semibold, "color": default, "transform": none),
   "h3": ("size": 11px, "line": 16px, "spacing": 15px, "weight": semibold, "color": default, "transform": none),
+  "heading-section": ("size": 14px, "line": 16px, "spacing": 15px, "weight": semibold, "color": default, "transform": none),
   "subheading": ("size": 14px, "line": 16px, "spacing": 15px, "weight": normal, "color": muted, "transform": none),
   "subheading-small": ("size": 13px, "line": 16px, "spacing": 15px, "weight": normal, "color": muted, "transform": none),
   "input-placeholder": ("size": 14px, "line": 24px, "spacing": 18px, "weight": normal, "color": muted, "transform": none),

package/src/components/button/button.scss

@@ -319,6 +319,10 @@
       background: rgb(var(--zn-panel));
     }
 
+    &.button--icon-button-round:hover:not([disabled]), &.button--icon-button-round:active:not([disabled]) {
+      background: rgb(var(--zn-color-tab));
+    }
+
     &.button--plain:hover:not([disabled]), &.button--plain:active:not([disabled]) {
       background: transparent;
     }

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

@@ -0,0 +1,280 @@
+import {classMap} from 'lit/directives/class-map.js';
+import {type CSSResultGroup, html, type PropertyValues, unsafeCSS} from 'lit';
+import {property} from 'lit/decorators.js';
+import ZincElement from '../../internal/zinc-element';
+
+import styles from './channel-tile.scss';
+
+export type ChannelTileColor =
+  'default' | 'primary' | 'info' | 'success' | 'warning' | 'error' | 'disabled';
+
+/**
+ * @summary A channel/queue slot tile with two faces: an active (occupied) state
+ * showing an in-progress item, and an available (empty) state advertising
+ * capacity — optionally reserving an incoming item with an auto-accept countdown.
+ * @documentation https://zinc.style/components/channel-tile
+ * @status experimental
+ * @since 1.0
+ *
+ * @dependency zn-button
+ * @dependency zn-icon
+ *
+ * @event zn-accept - Emitted when an available tile is accepted (click or auto-accept).
+ *  Cancelable — call `preventDefault()` to suppress the built-in `accept-uri` fetch.
+ * @event zn-reject - Emitted when the reject control is pressed.
+ *
+ * @slot leading - Replaces the leading icon in the active state.
+ * @slot action - Action content for the available state (e.g. a form). Falls back to a default accept button.
+ * @slot footer - Trailing content (e.g. status badges) in the active state.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart progress - The progress indicator (incoming countdown overlay or active progress bar).
+ *
+ * @cssproperty --channel-tile-color - Resolved accent color (set from the `color` property).
+ */
+export default class ZnChannelTile extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+
+  /** Renders the empty/available face instead of the active face. */
+  @property({type: Boolean, reflect: true}) available: boolean = false;
+
+  /** (Available only) the tile is reserving an incoming item awaiting acceptance. */
+  @property({type: Boolean, reflect: true}) incoming: boolean = false;
+
+  /** Free-form grouping/theming key (reflected so consumers can query/style by it). */
+  @property({reflect: true}) variant: string = '';
+
+  /** Top-bar text (e.g. brand). */
+  @property() header: string = '';
+
+  /** Leading icon (active state). */
+  @property() icon: string = '';
+
+  /** Accent color driving the leading icon and `--channel-tile-color`. */
+  @property({reflect: true}) color: ChannelTileColor = 'default';
+
+  /** Primary line. Defaults to "Available" in the available state when unset. */
+  @property() title: string = '';
+
+  /** Secondary line. */
+  @property() subtitle: string = '';
+
+  /** (Active only) progress bar fill, 0–100. */
+  @property({type: Number}) progress: number = 0;
+
+  /** (Active only) CSS color for the progress bar fill. */
+  @property({attribute: 'progress-color'}) progressColor: string = '';
+
+  /** Identifier carried in `zn-accept` / `zn-reject` event details. */
+  @property({attribute: 'item-id'}) itemId: string = '';
+
+  /** (Available only) when set, accepting fetches this URI unless `zn-accept` is canceled. */
+  @property({attribute: 'accept-uri'}) acceptUri: string = '';
+
+  /** (Available/incoming) epoch (seconds or millis) at which the reservation window ends. */
+  @property({type: Number, attribute: 'reserved-until'}) reservedUntil: number = 0;
+
+  /** (Available/incoming) auto-accept window length in milliseconds. */
+  @property({type: Number, attribute: 'auto-accept-delay'}) autoAcceptDelay: number = 0;
+
+  /** (Available/incoming) whether a reject control is offered. */
+  @property({type: Boolean, reflect: true}) rejectable: boolean = false;
+
+  /** Icon for the built-in accept button. */
+  @property({attribute: 'accept-icon'}) acceptIcon: string = 'plus@lu';
+
+  /** Optional analytics id forwarded to the built-in accept button. */
+  @property({attribute: 'accept-gaid'}) acceptGaid: string = '';
+
+  /** Icon for the reject control. */
+  @property({attribute: 'reject-icon'}) rejectIcon: string = 'call_end';
+
+  /** Accessible label for the reject control. */
+  @property({attribute: 'reject-label'}) rejectLabel: string = 'Reject';
+
+  private _tickInterval: number | undefined;
+  private _autoAcceptFired: string = '';
+
+  protected firstUpdated(changed: PropertyValues) {
+    super.firstUpdated(changed);
+    this._startTicker();
+  }
+
+  disconnectedCallback() {
+    this._stopTicker();
+    super.disconnectedCallback();
+  }
+
+  protected updated(changed: PropertyValues) {
+    super.updated(changed);
+    if (changed.has('itemId') && this.itemId !== this._autoAcceptFired) {
+      this._autoAcceptFired = '';
+    }
+  }
+
+  private _isCountingDown(): boolean {
+    return this.available && this.incoming;
+  }
+
+  private _startTicker() {
+    if (this._tickInterval !== undefined) return;
+    this._tickInterval = window.setInterval(() => {
+      // Only the incoming countdown needs a self-driven re-render; active
+      // tiles are refreshed by the consumer setting `progress`/`color`.
+      if (!this._isCountingDown()) return;
+      this.requestUpdate();
+      this._maybeAutoAccept();
+    }, 200);
+  }
+
+  private _stopTicker() {
+    if (this._tickInterval !== undefined) {
+      clearInterval(this._tickInterval);
+      this._tickInterval = undefined;
+    }
+  }
+
+  private _maybeAutoAccept() {
+    if (!this._isCountingDown()) return;
+    if (!this.acceptUri) return;
+    if (!this.autoAcceptDelay || !this.reservedUntil) return;
+    if (this._autoAcceptFired === this.itemId) return;
+
+    const until = this._reservedUntilMs();
+    if (!until || Date.now() < until) return;
+
+    this._autoAcceptFired = this.itemId;
+    this._accept();
+  }
+
+  private _accept(): void {
+    const event = this.emit('zn-accept', {
+      cancelable: true,
+      detail: {itemId: this.itemId, acceptUri: this.acceptUri},
+    });
+    if (event.defaultPrevented || !this.acceptUri) return;
+    fetch(this.acceptUri, {credentials: 'same-origin'}).catch((err) => {
+      console.error('Error accepting interaction', err);
+    });
+  }
+
+  private _reservedUntilMs(): number {
+    if (!this.reservedUntil) return 0;
+    return this.reservedUntil.toString().length === 10
+      ? this.reservedUntil * 1000
+      : this.reservedUntil;
+  }
+
+  private _countdownPercent(): number {
+    const until = this._reservedUntilMs();
+    if (!until || !this.autoAcceptDelay) return 0;
+    const total = this.autoAcceptDelay;
+    const remaining = Math.max(0, until - Date.now());
+    const elapsed = Math.max(0, total - remaining);
+    return Math.min(100, Math.max(0, (elapsed / total) * 100));
+  }
+
+  private _handleReject = (e: MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    this.emit('zn-reject', {detail: {itemId: this.itemId, variant: this.variant}});
+  };
+
+  private _handleClick = (e: MouseEvent) => {
+    if (!this._isCountingDown() || !this.acceptUri) return;
+    if (e.defaultPrevented) return;
+    e.preventDefault();
+    e.stopPropagation();
+    this._accept();
+  };
+
+  protected render(): unknown {
+    const title = this.title || (this.available ? 'Available' : '');
+    const countdown = this._isCountingDown() ? this._countdownPercent() : null;
+
+    return html`
+      <div
+        part="base"
+        class=${classMap({
+          'channel-tile': true,
+          'channel-tile--available': this.available,
+          'channel-tile--active': !this.available,
+          'channel-tile--incoming': this.available && this.incoming,
+          [`channel-tile--${this.color}`]: true,
+        })}
+        role="button"
+        tabindex="0"
+        @click=${this._handleClick}>
+        <div class="channel-tile__header">${this.header ? html`<h3>${this.header}</h3>` : ''}</div>
+        ${countdown !== null
+          ? html`
+            <div part="progress" class="channel-tile__overlay" style="width: ${countdown}%"></div>`
+          : ''}
+        <div class="channel-tile__body">
+          ${this._renderLeading()}
+          <div class="channel-tile__content">
+            <h3 class="channel-tile__title">${title}</h3>
+            <p class="channel-tile__subtitle">${this.subtitle}</p>
+          </div>
+          <slot name="footer" class="channel-tile__footer"></slot>
+        </div>
+        ${!this.available
+          ? html`
+            <div part="progress" class="channel-tile__bar">
+              <div class="channel-tile__bar-fill"
+                   style="width: ${this.progress}%; background-color: ${this.progressColor || 'transparent'};"></div>
+            </div>`
+          : ''}
+      </div>`;
+  }
+
+  private _renderLeading() {
+    if (this.available) {
+      return this._renderAvailableAction();
+    }
+
+    return html`
+      <slot name="leading">
+        ${this.icon
+          ? html`
+            <zn-button icon=${this.icon}
+                       icon-size="20"
+                       icon-button="round"
+                       color=${this.color}
+                       no-hover></zn-button>`
+          : ''}
+      </slot>`;
+  }
+
+  private _renderAvailableAction() {
+    if (this.incoming && this.rejectable) {
+      return html`
+        <button class="channel-tile__reject" type="button" aria-label=${this.rejectLabel}
+                @click=${this._handleReject}>
+          <zn-icon src=${this.rejectIcon} size="22"></zn-icon>
+        </button>`;
+    }
+
+    if (this.acceptUri) {
+      return html`
+        <zn-button href=${this.acceptUri}
+                   icon=${this.acceptIcon}
+                   icon-size="20"
+                   icon-button="round"
+                   gaid=${this.acceptGaid}
+                   loading-text="Accepting"
+                   no-hover>
+        </zn-button>`;
+    }
+
+    return html`
+      <slot name="action">
+        <zn-button icon=${this.acceptIcon}
+                   icon-size="20"
+                   icon-button="round"
+                   gaid=${this.acceptGaid}
+                   no-hover>
+        </zn-button>
+      </slot>`;
+  }
+}