@kubex/zinc 1.1.19 → 1.1.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubex/zinc",
-  "version": "1.1.19",
+  "version": "1.1.21",
   "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/chat-message/chat-message.component.ts

@@ -202,7 +202,7 @@ export default class ZnChatMessage extends ZincElement {
         <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`
-          <zn-chip type="info">Internal</zn-chip>` : nothing}
+          <zn-chip type="info">Internal Note</zn-chip>` : nothing}
         <slot name="badge"></slot>
       </div>`;
   }

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

@@ -3,6 +3,11 @@
 :host {
   display: block;
   padding-inline: calc(var(--zn-gutter, 0) + var(--zn-base-gap, 0));
+
+  // Bubble tints by message origin / type (overridable per consumer).
+  --message-bubble-agent: rgba(4, 114, 225, 0.1);
+  --message-bubble-customer: rgba(48, 170, 61, 0.1);
+  --message-bubble-internal: rgba(255, 203, 0, 0.1);
 }
 
 .message {
@@ -46,7 +51,7 @@
     gap: var(--zn-spacing-small);
     padding: 11px var(--zn-spacing-small); // 11px top/bottom + 24px line = 46px base
     border-radius: var(--zn-border-radius);
-    background: var(--message-background, hsl(48, 78%, 94%));
+    background: var(--message-bubble-agent);
     min-height: 46px; // base (padding included); grows only when text wraps
 
     &--sending {
@@ -171,11 +176,15 @@
 
 // Bubble tints by message origin / type.
 :host([agent-initiated]) .message__bubble {
-  background: var(--message-background, rgba(var(--zn-color-info), 0.1));
+  background: var(--message-background, var(--message-bubble-agent));
+}
+
+:host([customer-initiated]) .message__bubble {
+  background: var(--message-background, var(--message-bubble-customer));
 }
 
 :host([action-type="internal"]) .message__bubble {
-  background: var(--message-background, rgba(var(--zn-color-warning), 0.15));
+  background: var(--message-background, var(--message-bubble-internal));
 }
 
 :host([action-type="error"]) .message__bubble {

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);
   }
 }