@kubex/zinc 1.1.11 → 1.1.13

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
+    fid="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
+    fid="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
+    fid="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/package.json

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

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() fid: 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('fid') && this.fid !== 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.fid) return;
+
+    const until = this._reservedUntilMs();
+    if (!until || Date.now() < until) return;
+
+    this._autoAcceptFired = this.fid;
+    this._accept();
+  }
+
+  private _accept(): void {
+    const event = this.emit('zn-accept', {
+      cancelable: true,
+      detail: {fid: this.fid, 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: {fid: this.fid, 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>`;
+  }
+}

package/src/components/channel-tile/channel-tile.scss

@@ -0,0 +1,197 @@
+:host {
+  --channel-tile-color: var(--zn-color-border);
+
+  flex: 1 1 280px;
+  width: 280px;
+  min-width: 180px;
+  max-width: 320px;
+  display: block;
+}
+
+.channel-tile {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+  cursor: pointer;
+  border-right: 1px solid rgb(var(--zn-border-color));
+  background-color: rgb(var(--zn-body));
+  transition: background-color 0.15s ease;
+  user-select: none;
+
+  &:focus-visible {
+    outline: 2px solid rgb(var(--zn-primary));
+    outline-offset: -2px;
+  }
+}
+
+:host(.active) .channel-tile {
+  background-color: rgb(var(--zn-panel));
+  cursor: default;
+}
+
+:host(:not(.active)) .channel-tile--active:hover {
+  background-color: rgb(var(--zn-panel));
+}
+
+.channel-tile--incoming {
+  background-color: rgba(var(--zn-color-success), 0.15);
+
+  &:hover {
+    background-color: rgba(var(--zn-color-success), 0.22);
+  }
+}
+
+.channel-tile--disabled .channel-tile__body {
+  opacity: 0.6;
+}
+
+.channel-tile__header {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  height: 24px;
+  padding: 0 var(--zn-spacing-small);
+  background-color: rgb(var(--zn-color-tab));
+
+  h3 {
+    margin: 0;
+    font-size: var(--zn-text-h3-font-size);
+    line-height: var(--zn-text-h3-line-height);
+    font-weight: var(--zn-text-h3-font-weight);
+    color: rgb(var(--zn-text-heading));
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+}
+
+.channel-tile__overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 0;
+  background-color: rgba(var(--zn-color-success), 0.55);
+  transition: width 0.2s linear;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.channel-tile__body {
+  position: relative;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: var(--zn-spacing-small);
+  padding: var(--zn-spacing-x-small) var(--zn-spacing-small);
+  width: 100%;
+  overflow: hidden;
+  z-index: 1;
+}
+
+.channel-tile__content {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  gap: 4px;
+  overflow: hidden;
+
+  @container (max-width: 200px) {
+    display: none;
+  }
+}
+
+.channel-tile__title {
+  margin: 0;
+  font-size: var(--zn-text-heading-section-font-size);
+  line-height: var(--zn-text-heading-section-line-height);
+  font-weight: var(--zn-text-heading-section-font-weight);
+  color: var(--zn-text-heading-section-color);
+  text-transform: var(--zn-text-heading-section-transform);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.channel-tile__subtitle {
+  margin: 0;
+  font-size: var(--zn-text-subheading-small-font-size);
+  line-height: var(--zn-text-subheading-small-line-height);
+  font-weight: var(--zn-text-subheading-small-font-weight);
+  color: var(--zn-text-subheading-small-color);
+  text-transform: var(--zn-text-subheading-small-transform);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.channel-tile__footer {
+  display: flex;
+  align-items: center;
+  align-self: flex-start;
+  gap: var(--zn-spacing-small);
+}
+
+.channel-tile__reject {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  border: none;
+  padding: 0;
+  margin: 0;
+  background-color: rgb(var(--zn-panel));
+  color: rgb(var(--zn-color-error));
+  cursor: pointer;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
+
+  &:hover {
+    background-color: rgba(var(--zn-color-error), 0.1);
+  }
+}
+
+.channel-tile__bar {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background-color: rgba(var(--zn-shadow), 0.2);
+  overflow: hidden;
+  z-index: 1;
+
+  &-fill {
+    height: 100%;
+    width: 0;
+    transition: width 0.5s linear, background-color 0.5s ease;
+  }
+}
+
+.channel-tile--primary {
+  --channel-tile-color: var(--zn-color-primary);
+}
+
+.channel-tile--info {
+  --channel-tile-color: var(--zn-color-info);
+}
+
+.channel-tile--success {
+  --channel-tile-color: var(--zn-color-success);
+}
+
+.channel-tile--warning {
+  --channel-tile-color: var(--zn-color-warning);
+}
+
+.channel-tile--error {
+  --channel-tile-color: var(--zn-color-error);
+}
+
+.channel-tile--disabled {
+  --channel-tile-color: var(--zn-color-disabled, 204, 204, 204);
+}

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

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

package/src/components/page/page.scss

@@ -99,7 +99,7 @@
     display: flex;
     justify-content: flex-start;
     flex-direction: column;
-    gap: 4px;
+    gap: var(--zn-spacing-x-small);
     min-height: 36px;
     flex-shrink: 1;
     max-width: 100%;