@kubex/zinc 1.1.13 → 1.1.14

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

@@ -65,7 +65,7 @@ Provide `accept-uri` and the built-in accept button becomes a link to it. When a
 <div style="display: flex;">
   <zn-channel-tile
     available
-    fid="chat-4821"
+    item-id="chat-4821"
     accept-uri="/queue/accept/chat-4821"
     subtitle="Click to accept">
   </zn-channel-tile>
@@ -82,7 +82,7 @@ An `available` tile with `incoming` reserves an arriving item. Provide `reserved
     available
     incoming
     rejectable
-    fid="chat-5500"
+    item-id="chat-5500"
     title="Incoming chat"
     subtitle="Auto-accepting…"
     accept-uri="/queue/accept/chat-5500"
@@ -107,7 +107,7 @@ Add `rejectable` to an incoming tile to offer a reject control. Pressing it emit
     available
     incoming
     rejectable
-    fid="call-7700"
+    item-id="call-7700"
     title="Incoming call"
     subtitle="Reject to pass"
     reject-icon="call_end"

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.13",
+  "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/src/components/channel-tile/channel-tile.component.ts

@@ -66,7 +66,7 @@ export default class ZnChannelTile extends ZincElement {
   @property({attribute: 'progress-color'}) progressColor: string = '';
 
   /** Identifier carried in `zn-accept` / `zn-reject` event details. */
-  @property() fid: string = '';
+  @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 = '';
@@ -107,7 +107,7 @@ export default class ZnChannelTile extends ZincElement {
 
   protected updated(changed: PropertyValues) {
     super.updated(changed);
-    if (changed.has('fid') && this.fid !== this._autoAcceptFired) {
+    if (changed.has('itemId') && this.itemId !== this._autoAcceptFired) {
       this._autoAcceptFired = '';
     }
   }
@@ -138,19 +138,19 @@ export default class ZnChannelTile extends ZincElement {
     if (!this._isCountingDown()) return;
     if (!this.acceptUri) return;
     if (!this.autoAcceptDelay || !this.reservedUntil) return;
-    if (this._autoAcceptFired === this.fid) return;
+    if (this._autoAcceptFired === this.itemId) return;
 
     const until = this._reservedUntilMs();
     if (!until || Date.now() < until) return;
 
-    this._autoAcceptFired = this.fid;
+    this._autoAcceptFired = this.itemId;
     this._accept();
   }
 
   private _accept(): void {
     const event = this.emit('zn-accept', {
       cancelable: true,
-      detail: {fid: this.fid, acceptUri: this.acceptUri},
+      detail: {itemId: this.itemId, acceptUri: this.acceptUri},
     });
     if (event.defaultPrevented || !this.acceptUri) return;
     fetch(this.acceptUri, {credentials: 'same-origin'}).catch((err) => {
@@ -177,7 +177,7 @@ export default class ZnChannelTile extends ZincElement {
   private _handleReject = (e: MouseEvent) => {
     e.preventDefault();
     e.stopPropagation();
-    this.emit('zn-reject', {detail: {fid: this.fid, variant: this.variant}});
+    this.emit('zn-reject', {detail: {itemId: this.itemId, variant: this.variant}});
   };
 
   private _handleClick = (e: MouseEvent) => {

package/src/components/chat-message/chat-message.component.ts

@@ -23,6 +23,8 @@ export type ChatMessageActionType = '' | 'connected.agent' | 'attachment.added'
  *
  * @slot - The message content. Ignored when the `message` attribute is set.
  * @slot badge - Rendered in the header after the sender and time (e.g. an INTERNAL NOTE chip).
+ * @slot attachments - Attachments displayed beneath the message content. Use `zn-chat-message-attachment`,
+ * which auto-assigns itself to this slot.
  * @slot edit-dialog-trigger - Action rendered at the end of the bubble (e.g. a remove icon button).
  * @slot edit-dialog - Pass-through for an associated dialog element.
  *
@@ -32,9 +34,10 @@ export type ChatMessageActionType = '' | 'connected.agent' | 'attachment.added'
  * @csspart header - The sender/time/badge row.
  * @csspart bubble - The message bubble.
  * @csspart content - The message content within the bubble.
+ * @csspart attachments - The attachments row beneath the message content.
  * @csspart system-card - The card rendered for system action types.
  *
- * @cssproperty --message-background - The bubble's background colour.
+ * @cssproperty --message-background - The bubble's background color.
  */
 export default class ZnChatMessage extends ZincElement {
   static styles: CSSResultGroup = unsafeCSS(styles);
@@ -117,8 +120,12 @@ export default class ZnChatMessage extends ZincElement {
         <div part="body" class="message__body">
           ${sending ? null : this.renderHeader()}
           <div part="bubble" class="message__bubble ${sending ? 'message__bubble--sending' : ''}">
-            <div part="content" class="message__content">${this.renderContent()}</div>
-            ${sending ? html`<div class="message__meta">Sending...</div>` : html`
+            <div class="message__main">
+              <div part="content" class="message__content">${this.renderContent()}</div>
+              <slot name="attachments" part="attachments" class="message__attachments"></slot>
+            </div>
+            ${sending ? html`
+              <div class="message__meta">Sending...</div>` : html`
               <div class="message__actions">
                 <slot name="edit-dialog-trigger"></slot>
               </div>`}
@@ -172,14 +179,16 @@ export default class ZnChatMessage extends ZincElement {
       <div part="header" class="message__header">
         <span class="message__sender">${this.sender || (this.customerInitiated ? 'Customer' : 'You')}</span>
         ${this.time ? html`<span class="message__time">${this.getSentTime()}</span>` : nothing}
-        ${this.actionType === 'internal' ? html`<span class="message__badge">INTERNAL</span>` : nothing}
+        ${this.actionType === 'internal' ? html`
+          <zn-chip type="info">Internal</zn-chip>` : nothing}
         <slot name="badge"></slot>
       </div>`;
   }
 
   private renderContent() {
     if (!this.message) {
-      return html`<slot></slot>`;
+      return html`
+        <slot></slot>`;
     }
 
     let content = cleanHTML(this.message);

package/src/components/chat-message/chat-message.scss

@@ -2,6 +2,7 @@
 
 :host {
   display: block;
+  padding-inline: calc(var(--zn-gutter, 0) + var(--zn-base-gap, 0));
 }
 
 .message {
@@ -38,18 +39,6 @@
     @include wc.text-style(subheading-small);
   }
 
-  &__badge {
-    font-size: 10px;
-    font-weight: 600;
-    letter-spacing: 0.5px;
-    padding: 2px 6px;
-    border-radius: var(--zn-border-radius);
-    border: 1px solid rgba(var(--zn-color-info), 0.4);
-    color: rgb(var(--zn-color-info));
-    background: rgba(var(--zn-color-info), 0.08);
-    text-transform: uppercase;
-  }
-
   &__bubble {
     box-sizing: border-box;
     display: flex;
@@ -67,6 +56,29 @@
     }
   }
 
+  &__main {
+    flex: 1 1 auto;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--zn-spacing-small);
+  }
+
+  &__attachments {
+    // Always rendered so projection is reliable regardless of when children are
+    // parsed/added, but kept out of flow (no phantom gap below the bubble) until
+    // an attachment actually exists — toggled on via :host(:has(...)) below.
+    display: none;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--zn-spacing-small);
+
+    ::slotted(zn-chat-message-attachment) {
+      min-width: 0;
+    }
+  }
+
   &__content {
     @include wc.text-style(chat);
 
@@ -74,6 +86,12 @@
     min-width: 0;
     overflow-wrap: anywhere;
 
+    // Bodies passed through the default slot (e.g. alongside attachments) must
+    // match the chat type scale, not inherit the host's default size.
+    ::slotted(*) {
+      @include wc.text-style(chat);
+    }
+
     p {
       margin: 0;
       padding: 0;
@@ -150,6 +168,13 @@
   }
 }
 
+// Reveal the attachments row only when an attachment is actually present. Using
+// :has on the host keeps this live and parse-order independent — no reliance on
+// conditional rendering that could miss a child added during parsing.
+:host(:has([slot="attachments"])) .message__attachments {
+  display: flex;
+}
+
 // Bubble tints by message origin / type.
 :host([agent-initiated]) .message__bubble {
   background: var(--message-background, rgba(var(--zn-color-info), 0.1));

package/src/components/chat-message-attachment/chat-message-attachment.component.ts

@@ -0,0 +1,78 @@
+import {type CSSResultGroup, html, nothing, unsafeCSS} from 'lit';
+import {property} from "lit/decorators.js";
+import ZincElement from '../../internal/zinc-element';
+import ZnIcon from "../icon";
+
+import styles from './chat-message-attachment.scss';
+
+/**
+ * @summary A single file or link attachment for a `zn-chat-message`. Renders an
+ * icon and a label as a link, styled to match the message's attachments row. It is
+ * intended to be used only inside a `zn-chat-message` and is automatically placed in
+ * that component's `attachments` slot.
+ * @documentation https://zinc.style/components/chat-message-attachment
+ * @status experimental
+ * @since 1.0
+ *
+ * @dependency zn-icon
+ *
+ * @slot - The attachment label. Falls back to the `name` attribute when empty.
+ *
+ * @csspart base - The attachment link.
+ * @csspart icon - The leading icon.
+ * @csspart label - The attachment label.
+ */
+export default class ZnChatMessageAttachment extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+  static dependencies = {
+    'zn-icon': ZnIcon
+  };
+
+  /** The URL the attachment links to. */
+  @property() href: string = '';
+
+  /** The attachment label (e.g. the file name). Used when the default slot is empty. */
+  @property() name: string = '';
+
+  /** The leading icon name. */
+  @property() icon: string = 'attach_file';
+
+  /** Where to open the link. Defaults to a new tab. */
+  @property() target: string = '_blank';
+
+  /** Prompt a download rather than navigating to the link. */
+  @property({type: Boolean}) download = false;
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    // This component is only meaningful inside the attachments row of a chat message —
+    // slot it there automatically so consumers don't have to.
+    if (!this.slot) {
+      this.slot = 'attachments';
+    }
+
+    if (!this.closest('zn-chat-message')) {
+      console.warn('<zn-chat-message-attachment> can only be used inside a <zn-chat-message>.', this);
+    }
+  }
+
+  protected render() {
+    const newTab = this.target === '_blank';
+
+    return html`
+      <a
+        part="base"
+        class="attachment"
+        href=${this.href || '#'}
+        target=${this.target || nothing}
+        rel=${newTab ? 'noreferrer noopener' : nothing}
+        ?download=${this.download}
+      >
+        ${this.icon ? html`
+          <zn-icon part="icon" class="paperclip@lu" src=${this.icon} size="20"></zn-icon>` : nothing}
+        <span part="label" class="attachment__label"><slot>${this.name}</slot></span>
+      </a>
+    `;
+  }
+}

package/src/components/chat-message-attachment/chat-message-attachment.scss

@@ -0,0 +1,32 @@
+@use "../../wc";
+
+:host {
+  display: inline-flex;
+  min-width: 0;
+}
+
+.attachment {
+  @include wc.text-style(paragraph);
+
+  display: inline-flex;
+  align-items: center;
+  gap: var(--zn-spacing-2x-small);
+  color: rgb(var(--zn-text));
+  text-decoration: none;
+  min-width: 0;
+
+  &__icon {
+    flex: 0 0 auto;
+  }
+
+  &__label {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &:hover .attachment__label {
+    text-decoration: underline;
+  }
+}

package/src/components/chat-message-attachment/chat-message-attachment.test.ts

@@ -0,0 +1,36 @@
+import '../../../dist/zn.min.js';
+import { expect, fixture, html } from '@open-wc/testing';
+
+describe('<zn-chat-message-attachment>', () => {
+  it('should render a component', async () => {
+    const el = await fixture(html`
+      <zn-chat-message>
+        <zn-chat-message-attachment href="#" name="file.pdf"></zn-chat-message-attachment>
+      </zn-chat-message>`);
+
+    const attachment = el.querySelector('zn-chat-message-attachment');
+    expect(attachment).to.exist;
+  });
+
+  it('should auto-assign itself to the attachments slot', async () => {
+    const el = await fixture(html`
+      <zn-chat-message>
+        <zn-chat-message-attachment href="#" name="file.pdf"></zn-chat-message-attachment>
+      </zn-chat-message>`);
+
+    const attachment = el.querySelector('zn-chat-message-attachment');
+    expect(attachment?.getAttribute('slot')).to.equal('attachments');
+  });
+
+  it('should render the name in the link', async () => {
+    const el = await fixture<HTMLElement>(html`
+      <zn-chat-message>
+        <zn-chat-message-attachment href="https://example.com/file.pdf" name="file.pdf"></zn-chat-message-attachment>
+      </zn-chat-message>`);
+
+    const attachment = el.querySelector('zn-chat-message-attachment')!;
+    const link = attachment.shadowRoot!.querySelector('a')!;
+    expect(link.getAttribute('href')).to.equal('https://example.com/file.pdf');
+    expect(link.textContent).to.contain('file.pdf');
+  });
+});

package/src/components/chat-message-attachment/index.ts

@@ -0,0 +1,12 @@
+import ZnChatMessageAttachment from './chat-message-attachment.component';
+
+export * from './chat-message-attachment.component';
+export default ZnChatMessageAttachment;
+
+ZnChatMessageAttachment.define('zn-chat-message-attachment');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'zn-chat-message-attachment': ZnChatMessageAttachment;
+  }
+}