@kubex/zinc 1.0.119 → 1.1.0

package/src/components/button-menu/button-menu.component.ts

@@ -40,7 +40,7 @@ export default class ZnButtonMenu extends ZincElement {
   @property({type: Number, attribute: 'max-level'})
   public maxLevel: number = 2; // primary = 1, secondary = 2, transparent = 3
 
-  @property({type: Number, attribute: 'icon-size', reflect: true}) iconSize: number = 24;
+  @property({type: Number, attribute: 'icon-size', reflect: true}) iconSize: number = 20;
 
   @property({type: Boolean, attribute: 'no-gap'}) public noGap: boolean;
 
@@ -172,9 +172,6 @@ export default class ZnButtonMenu extends ZincElement {
       if (index < visibleButtons) {
         this.shadowRoot?.querySelector('.button-menu__container')?.appendChild(button.button);
 
-        if (!button.button.hasAttribute('color')) {
-          button.button.setAttribute('color', button.button.hasAttribute('primary') ? 'primary' : button.button.hasAttribute('secondary') ? 'secondary' : 'transparent');
-        }
         if (button.button.hasAttribute('primary') || button.button.hasAttribute('secondary')) {
           button.button.setAttribute('text', "");
         }
@@ -200,7 +197,7 @@ export default class ZnButtonMenu extends ZincElement {
         buttons.forEach((button: CustomButtonWidths, index: number) => {
           if (index >= visibleButtons) {
             const menuItem = document.createElement('zn-menu-item');
-            menuItem.innerText = this.getButtonLabel(button.button);
+            menuItem.textContent = this.getButtonLabel(button.button);
             menuItem.setAttribute('id', button.button.id || `zn-button-menu-item-${index}`);
             menuItem.setAttribute('role', 'menuitem');
             const attr = button.button.attributes;
@@ -215,6 +212,10 @@ export default class ZnButtonMenu extends ZincElement {
             if (icon) {
               const iconElement = document.createElement('zn-icon');
               iconElement.setAttribute('src', icon);
+              const iconLibrary = button.button.getAttribute('icon-library');
+              if (iconLibrary) {
+                iconElement.setAttribute('library', iconLibrary);
+              }
               iconElement.setAttribute('size', '18');
               iconElement.setAttribute('slot', 'prefix');
               menuItem.appendChild(iconElement);
@@ -236,7 +237,7 @@ export default class ZnButtonMenu extends ZincElement {
             menuItems[category].forEach((item: Element) => {
               menu.appendChild(item);
             });
-            // if only 1 catefory item
+            // if only 1 category item
           } else if (menuItems[category].length === 1) {
             const menuItem = menuItems[category][0] as ZnMenuItem;
             menu.appendChild(menuItem);
@@ -246,6 +247,7 @@ export default class ZnButtonMenu extends ZincElement {
             menuItem.innerText = category.charAt(0).toUpperCase() + category.slice(1);
             const submenu = document.createElement('zn-menu');
             submenu.setAttribute('slot', 'submenu');
+            submenu.setAttribute('variant', menu.variant);
 
             menuItems[category].forEach((item: Element) => {
               submenu.appendChild(item);
@@ -273,12 +275,19 @@ export default class ZnButtonMenu extends ZincElement {
       .join('')
       .trim() : '';
 
-    return slottedLabel ||
+    const label = slottedLabel ||
       button.content ||
       button.getAttribute('content') ||
       (button as ZnButton & { caption?: string }).caption ||
       button.getAttribute('caption') ||
-      button.button.innerText;
+      button.tooltip ||
+      button.getAttribute('tooltip') ||
+      button.getAttribute('aria-label') ||
+      button.button?.innerText ||
+      button.textContent ||
+      '';
+
+    return label.trim();
   }
 
   render() {
@@ -290,7 +299,11 @@ export default class ZnButtonMenu extends ZincElement {
       })}">
         <div class="button-menu__container"></div>
         <zn-dropdown placement="bottom-end">
-          <zn-button slot="trigger" icon="more_vert" icon-size="${this.iconSize}" color="transparent"></zn-button>
+          <zn-button slot="trigger"
+                     icon="ellipsis"
+                     icon-library="lucide"
+                     icon-size="${this.iconSize}"
+                     icon-button="small"></zn-button>
           <zn-menu></zn-menu>
         </zn-dropdown>
         <slot></slot>

package/src/components/button-menu/button-menu.scss

@@ -3,7 +3,7 @@
 :host {
   display: block;
   max-width: 100%;
-  --menu-gap: var(--zn-spacing-2x-small);
+  --menu-gap: var(--zn-spacing-x-small);
 }
 
 .button-menu--no-gap {
@@ -14,7 +14,6 @@
   display: flex;
   flex-direction: row;
   justify-content: flex-end;
-  padding: var(--zn-spacing-small) 0;
   margin: 0;
 
   min-width: 34px;

package/src/components/button-menu/button-menu.test.ts

@@ -45,6 +45,24 @@ describe('<zn-button-menu>', () => {
     expect(menuItem!.innerText).to.equal('Content Label');
   });
 
+  it('uses the aria-label of an icon button when creating collapsed menu items', async () => {
+    const el = await fixture<ZnButtonMenu>(html`
+      <zn-button-menu limit="0">
+        <zn-button id="icon-label" icon="pencil-ruler@lu" icon-button="small"
+                   aria-label="Customer Details"></zn-button>
+      </zn-button-menu>
+    `);
+
+    await el.updateComplete;
+    await aTimeout(20);
+    el.calculateVisibleButtons();
+
+    const menuItem = el.shadowRoot!.querySelector('zn-menu-item');
+
+    expect(menuItem).to.exist;
+    expect(menuItem!.textContent?.trim()).to.equal('Customer Details');
+  });
+
   it('uses the button caption attribute when creating collapsed menu items', async () => {
     const el = await fixture<ZnButtonMenu>(html`
       <zn-button-menu limit="0">

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

@@ -0,0 +1,73 @@
+import {type CSSResultGroup, html, unsafeCSS} from 'lit';
+import {property} from "lit/decorators.js";
+import ZincElement from '../../internal/zinc-element';
+import ZnIcon from "../icon";
+
+import styles from './chat-message.scss';
+
+/**
+ * @summary A single message in a chat-style conversation: avatar, sender,
+ * time, optional badge, and a message bubble with optional actions.
+ * @documentation https://zinc.style/components/chat-message
+ * @status experimental
+ * @since 1.0
+ *
+ * @dependency zn-icon
+ *
+ * @slot - The message content.
+ * @slot badge - Rendered in the header after the sender and time (e.g. an INTERNAL NOTE chip).
+ * @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.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart avatar - The avatar column.
+ * @csspart body - The header and bubble column.
+ * @csspart header - The sender/time/badge row.
+ * @csspart bubble - The message bubble.
+ * @csspart content - The message content within the bubble.
+ *
+ * @cssproperty --message-background - The bubble's background colour.
+ */
+export default class ZnChatMessage extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+  static dependencies = {
+    'zn-icon': ZnIcon
+  };
+
+  /** The sender's name, also used for the avatar initials. */
+  @property() sender: string = '';
+
+  /** Unix timestamp (seconds) of the message, shown as HH:MM. */
+  @property() time: string = '';
+
+  private getTime(time: string) {
+    const date = new Date(parseInt(time, 10) * 1000);
+    return date.toLocaleTimeString([], {hour: '2-digit', minute: '2-digit'});
+  }
+
+  protected render() {
+    return html`
+      <div part="base" class="message">
+        <div part="avatar" class="message__avatar">
+          <zn-icon library="avatar" src="${this.sender}" size="36" round></zn-icon>
+        </div>
+        <div part="body" class="message__body">
+          <div part="header" class="message__header">
+            <span class="message__sender">${this.sender}</span>
+            ${this.time ? html`<span class="message__time">${this.getTime(this.time)}</span>` : null}
+            <slot name="badge"></slot>
+          </div>
+          <div part="bubble" class="message__bubble">
+            <div part="content" class="message__content">
+              <slot></slot>
+            </div>
+            <div class="message__actions">
+              <slot name="edit-dialog-trigger"></slot>
+            </div>
+          </div>
+        </div>
+      </div>
+      <slot name="edit-dialog"></slot>
+    `;
+  }
+}

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

@@ -0,0 +1,60 @@
+@use "../../wc";
+
+:host {
+  display: block;
+}
+
+.message {
+  display: flex;
+  gap: var(--zn-spacing-small);
+
+  &__avatar {
+    flex-shrink: 0;
+  }
+
+  &__body {
+    flex: 1 1 auto;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--zn-spacing-x-small);
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    gap: var(--zn-spacing-x-small);
+    min-height: 36px; // keeps the header centred against the avatar
+  }
+
+  &__sender {
+    @include wc.text-style(h1);
+  }
+
+  &__time {
+    @include wc.text-style(subheading-small);
+  }
+
+  &__bubble {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--zn-spacing-small);
+    padding: var(--zn-spacing-small);
+    border-radius: var(--zn-border-radius);
+    background: var(--message-background, hsl(48, 78%, 94%));
+  }
+
+  &__content {
+    @include wc.text-style(chat);
+
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow-wrap: anywhere;
+  }
+
+  &__actions {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+  }
+}

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

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

package/src/components/checkbox/checkbox.scss

@@ -116,7 +116,7 @@
   box-shadow: var(--zn-shadow-x-small);
   border: solid var(--zn-input-border-width) var(--checkbox-border-color);
   background-color: var(--checkbox-bg-color);
-  border-radius: 2px;
+  border-radius: var(--zn-border-radius-small);
   color: var(--checkbox-icon-color);
   transition: var(--zn-transition-fast) border-color,
   var(--zn-transition-fast) background-color,
@@ -260,7 +260,7 @@
 .checkbox--contained {
   padding: 1.375rem var(--zn-spacing-large) 1.375rem var(--zn-spacing-medium);
   border: 1px solid var(--zn-color-gray-400);
-  border-radius: var(--zn-border-radius-medium);
+  border-radius: var(--zn-border-radius);
   width: 100%;
   height: 100%;
 }

package/src/components/chip/chip.component.ts

@@ -34,8 +34,6 @@ export default class ZnChip extends ZincElement {
   @property() type: 'info' | 'success' | 'warning' | 'error' | 'primary' |
     'transparent' | 'custom' | 'neutral' = 'neutral';
 
-  @property() size: 'small' | 'medium' | 'large'; // Defaults to base chip styling
-
   @property({attribute: 'flush', type: Boolean, reflect: true}) flush: boolean = false;
   @property({attribute: 'flush-x', type: Boolean, reflect: true}) flushX: boolean = false;
   @property({attribute: 'flush-y', type: Boolean, reflect: true}) flushY: boolean = false;
@@ -61,9 +59,6 @@ export default class ZnChip extends ZincElement {
         'chip--transparent': this.type === 'transparent',
         'chip--custom': this.type === 'custom',
         'chip--neutral': this.type === 'neutral',
-        'chip--small': this.size === 'small',
-        'chip--medium': this.size === 'medium',
-        'chip--large': this.size === 'large',
       })}">
         ${this.icon ? html`
           <zn-icon src="${this.icon}" size="${this.iconSize}"></zn-icon>` : ''}

package/src/components/chip/chip.scss

@@ -7,22 +7,25 @@
 
 .chip {
   display: inline-flex;
-  border-radius: 7px;
-  padding: var(--zn-spacing-3x-small) var(--zn-spacing-x-small);
+  font-size: var(--zn-text-chip-font-size);
+  font-family: var(--zn-font-family-sans);
+  font-weight: var(--zn-text-chip-font-weight);
+  border-radius: var(--zn-border-radius-small);
+  padding-inline: var(--zn-spacing-x-small);
+  padding-block: 0;
+  height: 24px;
   text-align: center;
-  font-size: 12px;
   gap: 4px;
   width: fit-content;
-  margin: 1px;
   justify-content: center;
   align-items: center;
-  border: 1px solid transparent;
-  line-height: 24px;
+  line-height: var(--zn-text-chip-line-height);
+  letter-spacing: var(--zn-letter-spacing-loose);
   white-space: nowrap;
-  text-transform: uppercase;
 
   &--flush {
     padding: 0;
+    height: auto;
   }
 
   &--flush-x {
@@ -31,90 +34,66 @@
 
   &--flush-y {
     padding-block: 0;
+    height: auto;
   }
 }
 
 .chip--primary {
   color: rgba(var(--zn-primary), 0.9);
-  border-color: rgb(var(--zn-primary));
   background: rgba(var(--zn-primary), .10);
 }
 
 .chip--error {
   color: rgb(var(--zn-color-error));
-  border-color: rgb(var(--zn-color-error));
   background: rgba(var(--zn-color-error), .10);
 }
 
 .chip--info {
   color: rgb(var(--zn-color-info));
-  border-color: rgb(var(--zn-color-info));
   background: rgba(var(--zn-color-info), .10);
 }
 
 .chip--warning {
   color: rgb(var(--zn-color-warning));
-  border-color: rgb(var(--zn-color-warning));
   background: rgba(var(--zn-color-warning), .10);
 }
 
 .chip--success {
   color: rgb(var(--zn-color-success));
-  border-color: rgb(var(--zn-color-success));
   background: rgba(var(--zn-color-success), .10);
 }
 
 .chip--neutral {
   color: rgb(var(--zn-text));
-  border-color: rgb(var(--zn-border-color));
   background: rgba(var(--zn-border-color), .10);
 }
 
 .chip--transparent {
   color: rgb(var(--zn-text));
-  border-color: transparent;
   background: transparent;
 }
 
 .chip--custom {
   color: rgb(var(--zn-text));
-  border-color: hsl(from var(--chip-color-override, inherit) h s l / 0.6);
   background-color: hsl(from var(--chip-color-override, inherit) h s l / 0.1);
 }
 
 .chip__value {
   overflow: hidden;
   text-overflow: ellipsis;
+  text-transform: var(--zn-text-chip-transform);
 }
 
 .chip__caption {
   opacity: 0.7;
-  font-weight: 600;
+  font-weight: var(--zn-text-chip-font-weight);
+  text-transform: var(--zn-text-chip-transform);
 
   &::after {
     content: ":";
   }
 }
 
-.chip__action {
-}
-
-.chip--small {
-  font-size: var(--zn-font-size-small);
-  padding: var(--zn-spacing-2x-small) var(--zn-spacing-x-small);
-  line-height: var(--zn-line-height-dense);
-}
-
-.chip--medium {
-  font-size: var(--zn-font-size-medium);
-  padding: var(--zn-spacing-2x-small) var(--zn-spacing-small);
-}
-
-.chip--large {
-  font-size: var(--zn-font-size-large);
-  padding: var(--zn-spacing-x-small) var(--zn-spacing-x-large);
-}
-
 .chip--no-content {
   padding: var(--zn-spacing-3x-small) var(--zn-spacing-2x-small);
 }

package/src/components/content-block/content-block.component.ts

@@ -1,12 +1,12 @@
 import {classMap} from "lit/directives/class-map.js";
 import {deepQuerySelectorAll} from "../../utilities/query";
 import {HasSlotController} from "../../internal/slot";
-import type {PropertyValues} from 'lit';
-import {html, nothing, unsafeCSS} from 'lit';
+import {html, unsafeCSS} from 'lit';
 import {MutationController} from '@lit-labs/observers/mutation-controller.js';
 import {property, queryAssignedNodes, queryAsync} from 'lit/decorators.js';
 import {unsafeHTML} from 'lit-html/directives/unsafe-html.js';
 import ZincElement from "../../internal/zinc-element";
+import type {PropertyValues} from 'lit';
 import type ZnTile from "../tile";
 
 import styles from './content-block.scss';
@@ -87,23 +87,24 @@ export default class ContentBlock extends ZincElement {
     if (this.noCollapse) {
       return;
     }
-    const target = e.target as HTMLElement;
-    const headerClick = target.classList.contains('content-block-header') ||
-      target.parentElement?.classList.contains('content-block-header');
-
-    if (headerClick && target.slot !== 'nav') {
-      this.short = !this.short;
-      this.requestUpdate();
-      this.updateComplete.then(() => {
-        if (!this.short) {
-          this.iframe.then((iframe) => {
-            if (iframe && !iframe.classList.contains('hidden')) {
-              this._resizeIframe(iframe);
-            }
-          });
-        }
-      });
+
+    const fromActions = e.composedPath().some((el) =>
+      el instanceof HTMLElement && el.classList.contains('content-block-header__actions'));
+    if (fromActions) {
+      return;
     }
+
+    this.short = !this.short;
+    this.requestUpdate();
+    this.updateComplete.then(() => {
+      if (!this.short) {
+        this.iframe.then((iframe) => {
+          if (iframe && !iframe.classList.contains('hidden')) {
+            this._resizeIframe(iframe);
+          }
+        });
+      }
+    });
   }
 
   private _toggleText() {
@@ -184,32 +185,33 @@ export default class ContentBlock extends ZincElement {
     const initialShowHtml = hasHtmlSlot && (!hasTextSlot || this.defaultDisplay === 'html');
 
     return html`
-      <zn-panel flush
-                tabbed
-                flush-footer="${hasFooter || nothing}"
-                class="${classMap({
-                  'content-block--outbound': this.outbound,
-                  'content-block--short': this.short,
-                  'content-block--collapsible': !this.noCollapse
-                })}">
-
-        <zn-header class="content-block-header"
-                   description="${this.truncateText()}"
-                   @click="${this._collapseContent}">
-
-          <slot name="icon">
-            <zn-icon src="${this.avatar}"
-                     library="avatar"
-                     round></zn-icon>
-          </slot>
-
-          <slot name="caption" slot="caption">${this.sender}</slot>
-
-          <div slot="actions">
+      <div class="${classMap({
+        'content-block--outbound': this.outbound,
+        'content-block--short': this.short,
+        'content-block--collapsible': !this.noCollapse
+      })}">
+
+        <div class="content-block-header" @click="${this._collapseContent}">
+          <div class="content-block-header__icon">
+            <slot name="icon">
+              <zn-icon src="${this.avatar}"
+                       library="avatar"
+                       round></zn-icon>
+            </slot>
+          </div>
+
+          <div class="content-block-header__main">
+            <span class="content-block-header__caption">
+              <slot name="caption">${this.sender}</slot>
+            </span>
+            <span class="content-block-header__description">${this.truncateText()}</span>
+          </div>
+
+          <div class="content-block-header__actions">
             <slot name="actions"><small>${this.time}</small></slot>
             ${showActions ? html`
               <zn-dropdown>
-                <zn-button slot="trigger" icon="more_vert" icon-size="24" color="transparent"></zn-button>
+                <zn-button slot="trigger" icon="ellipsis@lu" icon-size="20" icon-button="small" plain></zn-button>
                 <zn-menu>
                   <zn-menu-item @click="${this._toggleHtml}">
                     Show HTML
@@ -221,10 +223,9 @@ export default class ContentBlock extends ZincElement {
               </zn-dropdown>
             ` : ''}
           </div>
+        </div>
 
-        </zn-header>
-
-        <zn-sp no-gap>
+        <zn-sp no-gap flush-x>
           <iframe class="${classMap({'hidden': !initialShowHtml})}" title="Content block HTML preview"></iframe>
           <slot class="html-content" name="html" style="display: none;"></slot>
           <slot name="text" style="display: none;"></slot>
@@ -246,7 +247,7 @@ export default class ContentBlock extends ZincElement {
 
         ${hasFooter ? html`
           <slot slot="footer" name="footer" @slotchange="${this._handleSlotChange}"></slot>` : ''}
-      </zn-panel>
+      </div>
     `;
   }