@kubex/zinc 1.1.20 → 1.1.22

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

@@ -7,8 +7,10 @@ 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.
+- **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.
 
@@ -31,7 +33,8 @@ Tiles are designed to sit side by side in a horizontal rail; each is a fixed-wid
 
 ### 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.
+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;">
@@ -49,7 +52,8 @@ The default (occupied) face. Set `header` for the top bar, `icon` + `color` for
 
 ### 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.
+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;">
@@ -59,7 +63,8 @@ Set `available` to render the empty face. When `title` is omitted it defaults to
 
 ### 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.
+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;">
@@ -74,7 +79,9 @@ Provide `accept-uri` and the built-in accept button becomes a link to it. When a
 
 ### 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`.
+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;">
@@ -118,7 +125,8 @@ Add `rejectable` to an incoming tile to offer a reject control. Pressing it emit
 
 ### 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`.
+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;">
@@ -131,6 +139,21 @@ The `color` attribute sets the accent (the leading icon badge and the `--channel
 </div>
 ```
 
+### Custom Title and Subtitle
+
+The `title` and `subtitle` attributes cover plain text. For richer content, use the `title` and `subtitle` slots — they
+override the matching attribute (which is used as the fallback when the slot is empty).
+
+```html:preview
+<div style="display: flex;">
+  <zn-channel-tile header="Acme Support" icon="chat" color="info" progress="60"
+                   progress-color="rgb(var(--zn-color-info))">
+    <span slot="title">Jane <strong>Cooper</strong></span>
+    <span slot="subtitle">Billing question · <a href="#">#4821</a></span>
+  </zn-channel-tile>
+</div>
+```
+
 ### Custom Leading Content
 
 Use the `leading` slot to replace the leading icon in the active state.

package/package.json

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

package/scss/shared/_table.scss

@@ -55,7 +55,3 @@ table:not(.remarkd-table) {
 .zn-table-fixed {
   table-layout: fixed;
 }
-
-thead tr:last-of-type th {
-  border-bottom: 0;
-}

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

@@ -23,6 +23,8 @@ export type ChannelTileColor =
  *  Cancelable — call `preventDefault()` to suppress the built-in `accept-uri` fetch.
  * @event zn-reject - Emitted when the reject control is pressed.
  *
+ * @slot title - Replaces the primary line. Falls back to the `title` attribute (or "Available" when unset in the available state).
+ * @slot subtitle - Replaces the secondary line. Falls back to the `subtitle` attribute.
  * @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.
@@ -213,8 +215,8 @@ export default class ZnChannelTile extends ZincElement {
         <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>
+            <h3 class="channel-tile__title"><slot name="title">${title}</slot></h3>
+            <p class="channel-tile__subtitle"><slot name="subtitle">${this.subtitle}</slot></p>
           </div>
           <slot name="footer" class="channel-tile__footer"></slot>
         </div>

package/src/components/icon/icon.component.ts

@@ -1,6 +1,6 @@
 import {choose} from 'lit/directives/choose.js';
 import {classMap} from "lit/directives/class-map.js";
-import {type CSSResultGroup, html, render, unsafeCSS} from 'lit';
+import {type CSSResultGroup, html, type PropertyValues, render, unsafeCSS} from 'lit';
 import {icons} from 'lucide';
 import {property} from 'lit/decorators.js';
 import {sha256} from '../../utilities/sha256';
@@ -90,6 +90,8 @@ export default class ZnIcon extends ZincElement {
   gravatarOptions = "";
   defaultLibrary: IconLibrary = "material-symbols-outlined";
 
+  private libraryAutoSet = false;
+
   convertToLibrary(input: string): IconLibrary {
     return this.convertIndicatorToLibrary(input) ?? this.defaultLibrary
   }
@@ -140,6 +142,33 @@ export default class ZnIcon extends ZincElement {
   connectedCallback() {
     super.connectedCallback();
 
+    // load the material icons font if the library is set to material
+    render(html`
+      <link
+        href="https://cdn.jsdelivr.net/gh/kubex/icons@0.0.8/dist/kubex-icons.css"
+        rel="stylesheet">
+      <link
+        href="https://cdn.lineicons.com/5.0/lineicons.css"
+        rel="stylesheet">
+      <link
+        href="https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined|Material+Icons|Material+Icons+Round|Material+Icons+Sharp|Material+Icons+Two+Tone|Material+Icons+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
+        rel="stylesheet">`, document.head);
+  }
+
+  protected override willUpdate(changedProperties: PropertyValues<this>) {
+    super.willUpdate(changedProperties);
+
+    if (changedProperties.has('src')) {
+      this.parseSrc();
+    }
+  }
+
+  private parseSrc() {
+    if (this.libraryAutoSet) {
+      this.library = undefined as unknown as IconLibrary;
+      this.libraryAutoSet = false;
+    }
+
     let hashFragment = '';
 
     if (this.src && this.src.includes('#')) {
@@ -157,8 +186,8 @@ export default class ZnIcon extends ZincElement {
       if (libraryOrDomain.includes('.')) {
         this.library = this.library ?? "gravatar";
       } else if ((this.library === undefined) && indicatedLibrary !== undefined) {
-        // if split[1] is a valid library name, set it
         this.library = indicatedLibrary;
+        this.libraryAutoSet = true;
         this.src = this.src.slice(0, atIndex);
       } else if (this.library !== undefined && indicatedLibrary === this.library) {
         this.src = this.src.slice(0, atIndex);
@@ -173,21 +202,10 @@ export default class ZnIcon extends ZincElement {
     } else if (!this.library && this.src && !this.src.includes('/')) {
       this.applyHashFragment(hashFragment);
       this.library = this.defaultLibrary;
+      this.libraryAutoSet = true;
     } else {
       this.applyHashFragment(hashFragment);
     }
-
-    // load the material icons font if the library is set to material
-    render(html`
-      <link
-        href="https://cdn.jsdelivr.net/gh/kubex/icons@0.0.8/dist/kubex-icons.css"
-        rel="stylesheet">
-      <link
-        href="https://cdn.lineicons.com/5.0/lineicons.css"
-        rel="stylesheet">
-      <link
-        href="https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined|Material+Icons|Material+Icons+Round|Material+Icons+Sharp|Material+Icons+Two+Tone|Material+Icons+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
-        rel="stylesheet">`, document.head);
   }
 
   private applyHashFragment(hashFragment: string) {

package/src/components/status-indicator/status-indicator.scss

@@ -116,7 +116,7 @@
   50% {
     background-color: rgba(var(--indicator-alt-color), 0.8);
     border-color: rgb(var(--indicator-alt-color));
-    box-shadow: 0 0 3px 1px rgba(var(--indicator-alt-color), 0.5);
+    box-shadow: 0 0 4px 2px rgba(var(--indicator-alt-color), 0.5);
   }
 }