@kubex/zinc 1.1.44 → 1.1.46

package/docs/pages/components/content-block.md

@@ -52,6 +52,26 @@ layout: component
 </zn-content-block>
 ```
 
+### Attachments
+
+Attachments render in a row at the bottom of the content and are only visible while the block
+is expanded. Use `zn-chat-message-attachment`, which assigns itself to the `attachments` slot.
+When a block has attachments, a paperclip icon and count are shown in the header after the
+preview text.
+
+```html:preview
+
+<zn-content-block
+  time="16 Jun 2025, 13:00"
+  sender="John Smith"
+  avatar="JS"
+>
+  <div slot="text">Text formatted message goes here.</div>
+  <zn-chat-message-attachment href="/" name="filename1.txt" download></zn-chat-message-attachment>
+  <zn-chat-message-attachment href="/" name="filename2.png" download></zn-chat-message-attachment>
+</zn-content-block>
+```
+
 ### Content Footer
 
 Basic Footer

package/package.json

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

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

@@ -6,10 +6,10 @@ 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.
+ * @summary A single file or link attachment for a `zn-chat-message` or `zn-content-block`.
+ * 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` or `zn-content-block` and is automatically
+ * placed in that component's `attachments` slot.
  * @documentation https://zinc.style/components/chat-message-attachment
  * @status experimental
  * @since 1.0
@@ -51,12 +51,12 @@ export default class ZnChatMessageAttachment extends ZincElement {
   connectedCallback() {
     super.connectedCallback();
 
-    if (this.closest('zn-chat-message')) {
+    if (this.closest('zn-chat-message, zn-content-block')) {
       if (!this.slot) {
         this.slot = 'attachments';
       }
     } else {
-      console.warn('<zn-chat-message-attachment> can only be used inside a <zn-chat-message>.', this);
+      console.warn('<zn-chat-message-attachment> can only be used inside a <zn-chat-message> or <zn-content-block>.', this);
     }
   }
 

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

@@ -3,7 +3,7 @@ import {deepQuerySelectorAll} from "../../utilities/query";
 import {HasSlotController} from "../../internal/slot";
 import {html, unsafeCSS} from 'lit';
 import {MutationController} from '@lit-labs/observers/mutation-controller.js';
-import {property, queryAssignedNodes, queryAsync} from 'lit/decorators.js';
+import {property, queryAssignedNodes, queryAsync, state} from 'lit/decorators.js';
 import {unsafeHTML} from 'lit-html/directives/unsafe-html.js';
 import ZincElement from "../../internal/zinc-element";
 import type {PropertyValues} from 'lit';
@@ -21,6 +21,12 @@ interface TextRow {
  * @documentation https://zinc.style/components/content-block
  * @status experimental
  * @since 1.0
+ *
+ * @slot attachments - Attachments displayed at the bottom of the content when the block is
+ * expanded. Use `zn-chat-message-attachment`, which auto-assigns itself to this slot.
+ *
+ * @csspart attachments - The attachments row at the bottom of the content.
+ * @csspart header-attachments - The attachment count indicator in the header.
  */
 export default class ContentBlock extends ZincElement {
   static styles = unsafeCSS(styles);
@@ -43,6 +49,8 @@ export default class ContentBlock extends ZincElement {
 
   private readonly hasSlotController = new HasSlotController(this, 'text', 'html');
 
+  @state() private attachmentCount = 0;
+
   private _textRows: TextRow[] = [];
 
   private readonly _footerObserver = new MutationController(this, {
@@ -163,9 +171,21 @@ export default class ContentBlock extends ZincElement {
     }
   }
 
+  private handleAttachmentsSlotChange() {
+    this.syncAttachmentCount();
+  }
+
+  private syncAttachmentCount() {
+    const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot[name="attachments"]');
+    this.attachmentCount = slot?.assignedElements().length ?? 0;
+  }
+
   protected firstUpdated(_changedProperties: PropertyValues) {
     super.firstUpdated(_changedProperties);
 
+    this.syncAttachmentCount();
+    Promise.resolve().then(() => this.syncAttachmentCount());
+
     const textContent = this.shadowRoot?.querySelectorAll('.text-section');
     if (textContent && textContent.length > 0) {
       textContent.forEach((content) => {
@@ -196,6 +216,7 @@ export default class ContentBlock extends ZincElement {
             <slot name="icon">
               <zn-icon src="${this.avatar}"
                        library="avatar"
+                       size="36"
                        round></zn-icon>
             </slot>
           </div>
@@ -205,6 +226,10 @@ export default class ContentBlock extends ZincElement {
               <slot name="caption">${this.sender}</slot>
             </span>
             <span class="content-block-header__description">${this.truncateText()}</span>
+            ${this.attachmentCount > 0 ? html`
+              <span class="content-block-header__attachments" part="header-attachments">
+                <zn-icon src="paperclip@lu" size="14"></zn-icon>${this.attachmentCount}
+              </span>` : ''}
           </div>
 
           <div class="content-block-header__actions">
@@ -245,6 +270,13 @@ export default class ContentBlock extends ZincElement {
           </div>
         </zn-sp>
 
+        <slot
+          name="attachments"
+          part="attachments"
+          class="content-block__attachments ${this.attachmentCount > 0 ? 'content-block__attachments--visible' : ''}"
+          @slotchange=${this.handleAttachmentsSlotChange}
+        ></slot>
+
         ${hasFooter ? html`
           <slot slot="footer" name="footer" @slotchange="${this._handleSlotChange}"></slot>` : ''}
       </div>

package/src/components/content-block/content-block.scss

@@ -16,10 +16,10 @@
 .content-block-header {
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: var(--zn-spacing-small);
   width: 100%;
   max-width: 100%;
-  padding: var(--zn-base-gap) 0;
+  padding-block: var(--zn-spacing-small);
   position: relative;
 }
 
@@ -37,7 +37,7 @@
   display: flex;
   flex-direction: row;
   align-items: center;
-  gap: 10px;
+  gap: var(--zn-spacing-small);
   min-width: 0;
   flex-grow: 1;
   overflow: hidden;
@@ -51,7 +51,7 @@
   margin: 0;
   display: flex;
   align-items: center;
-  gap: var(--zn-spacing-x-small);
+  gap: var(--zn-spacing-small);
   flex-shrink: 0;
   overflow: hidden;
   white-space: nowrap;
@@ -69,16 +69,43 @@
   display: none;
 }
 
+.content-block-header__attachments {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--zn-spacing-2x-small);
+  font-size: var(--zn-font-size-small);
+  color: rgb(var(--zn-text-muted));
+  flex-shrink: 0;
+  margin-left: auto;
+}
+
 .content-block-header__actions {
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: var(--zn-spacing-small);
   margin-left: auto;
   flex-shrink: 0;
 }
 
+.content-block__attachments {
+  display: none;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--zn-spacing-small);
+  padding-block-end: var(--zn-spacing-small);
+
+  &--visible {
+    display: flex;
+  }
+
+  ::slotted(zn-chat-message-attachment) {
+    min-width: 0;
+  }
+}
+
 .content-block--short {
-  zn-sp {
+  zn-sp, .content-block__attachments {
     display: none;
   }
 
@@ -92,11 +119,10 @@
 }
 
 .text-section {
-  font-size: 13px;
-  line-height: 19px;
+  @include wc.text-style(paragraph);
 
   a {
-    font-size: 10px;
+    font-size: var(--zn-font-size-small);
     opacity: 0.8;
   }
 }

package/src/components/data-table/data-table.component.ts

@@ -245,6 +245,7 @@ export default class ZnDataTable extends ZincElement {
 
   // Data Table Properties
   private _initialLoad = true;
+  private _hasLoadedData = false;
   private _lastTableContent: TemplateResult = html``;
 
   private readonly resizeObserver = new ResizeController(this, {
@@ -363,7 +364,9 @@ export default class ZnDataTable extends ZincElement {
     } else if (this.dataUri) {
       tableBody = this._dataTask.render({
         pending: () => {
-          if (this._initialLoad) {
+          // Show the skeleton until data has rendered at least once, so the
+          // first fetch on a no-initial-load table doesn't render blank space
+          if (this._initialLoad || !this._hasLoadedData) {
             return html`
               <div>${this.loadingTable()}</div>`;
           }
@@ -372,6 +375,7 @@ export default class ZnDataTable extends ZincElement {
         },
         complete: (data) => {
           this._initialLoad = false;
+          this._hasLoadedData = true;
           this._lastTableContent = html`
             <div>${this.renderTable(data as Response)}</div>`;
           return this._lastTableContent;
@@ -401,6 +405,7 @@ export default class ZnDataTable extends ZincElement {
         page: 1,
       };
       this._initialLoad = false;
+      this._hasLoadedData = true;
       this._lastTableContent = html`
             <div>${this.renderTable(response)}</div>`;
       tableBody = this._lastTableContent;

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

@@ -1,6 +1,6 @@
-import {type CSSResultGroup, html, unsafeCSS} from 'lit';
-import {ifDefined} from "lit/directives/if-defined.js";
-import {property, query} from 'lit/decorators.js';
+import { type CSSResultGroup, html, unsafeCSS } from 'lit';
+import { ifDefined } from "lit/directives/if-defined.js";
+import { property, query } from 'lit/decorators.js';
 import ZincElement from '../../internal/zinc-element';
 import ZnConfirm from "../confirm";
 import ZnDropdown from "../dropdown";
@@ -9,6 +9,7 @@ import ZnMenuItem from "../menu-item";
 import ZnTooltip from "../tooltip";
 
 import styles from './menu.scss';
+import { classMap } from "lit/directives/class-map.js";
 
 interface NavItem {
   title: string;
@@ -56,12 +57,12 @@ export default class ZnMenu extends ZincElement {
 
   @query('slot') defaultSlot: HTMLSlotElement;
 
-  @property({attribute: 'actions', type: Array}) actions = [];
+  @property({ attribute: 'actions', type: Array }) actions = [];
 
   /** The menu's visual style. `shell` renders the app-shell header dropdown
    * look: a padded panel with floating rounded items. Propagated to the
    * menu's items. */
-  @property({reflect: true}) variant: 'default' | 'shell' = 'default';
+  @property({ reflect: true }) variant: 'default' | 'shell' = 'default';
 
   connectedCallback() {
     super.connectedCallback();
@@ -70,7 +71,7 @@ export default class ZnMenu extends ZincElement {
 
   /** @internal Gets all slotted menu items, ignoring dividers, headers, and other elements. */
   getAllItems() {
-    return [...this.defaultSlot.assignedElements({flatten: true})].filter((el: HTMLElement) => {
+    return [...this.defaultSlot.assignedElements({ flatten: true })].filter((el: HTMLElement) => {
       return !(el.inert || !this.isMenuItem(el));
 
     }) as ZnMenuItem[];
@@ -100,15 +101,19 @@ export default class ZnMenu extends ZincElement {
   render() {
     return html`
       <div
+        class="${classMap({
+          'menu': true,
+          'menu--shell': this.variant === 'shell',
+        })}"
         @slotchange=${this.handleSlotChange}
         @keydown=${this.handleKeyDown}
         @mousedown=${this.handleMouseDown}>
         <slot></slot>
         ${this.actions.map((item: NavItem) => {
-          if( item === null || item === undefined) {
+          if (item === null || item === undefined) {
             return html``; // Skip null or undefined items
           }
-          if ( item?.confirm) {
+          if (item?.confirm) {
             return html`
               <zn-confirm trigger="${ifDefined(item.confirm?.trigger)}"
                           type="${ifDefined(item.confirm?.type)}"
@@ -177,7 +182,7 @@ export default class ZnMenu extends ZincElement {
     // get the parent dropdown and close it
     (closestMenu?.closest('zn-dropdown') as ZnDropdown | null)?.hide();
 
-    this.emit('zn-select', {detail: {item}});
+    this.emit('zn-select', { detail: { item } });
   }
 
   private handleKeyDown(event: KeyboardEvent) {

package/src/components/menu/menu.scss

@@ -1,10 +1,10 @@
 @use "../../wc";
 
-:host {
+.menu {
   display: block;
   position: relative;
   padding: 1px;
-  border: 1px solid rgb(var(--zn-border-color));
+  border: 1px solid rgb(var(--zn-border-color)) !important;
   border-radius: var(--zn-border-radius);
   width: fit-content;
   min-width: var(--zn-size-spanel);
@@ -19,7 +19,7 @@
 
 // Shell variant — the app-shell header dropdown look (as used by Rubix):
 // padded panel with floating rounded items, translucent blurred background
-:host([variant="shell"]) {
+.menu--shell {
   display: flex;
   flex-direction: column;
   gap: var(--zn-spacing-2x-small);
@@ -35,3 +35,8 @@
   background-color: rgba(var(--zn-color-navigation, 255, 255, 255), 0.95);
   backdrop-filter: blur(3px);
 }
+
+
+::slotted(zn-menu-item + zn-menu-item) {
+  border-top: 1px solid rgb(var(--zn-border-color));
+}

package/src/components/navbar/navbar.component.ts

@@ -62,8 +62,8 @@ export default class ZnNavbar extends ZincElement {
   @property({attribute: 'store-ttl', type: Number, reflect: true}) storeTtl = 0;
   @property({attribute: 'local-storage', type: Boolean, reflect: true}) localStorage: boolean;
 
-  private _preItems: NodeListOf<Element>;
-  private _postItems: NodeListOf<Element>;
+  private _preItems: HTMLElement[] = [];
+  private _postItems: HTMLElement[] = [];
   @property()
   private _appended: Element[];
   private _expanding: Element[] = [];
@@ -79,6 +79,7 @@ export default class ZnNavbar extends ZincElement {
   private _expandable: HTMLElement | null = null;
   private _extendedMenu: HTMLElement | null = null;
   private readonly _cloneSources = new WeakMap<HTMLElement, HTMLElement>();
+  private readonly _lightDomClones = new WeakMap<HTMLElement, HTMLElement>();
   private _navItemsGap: number = 0;
   private _expandableMargin: number = 0;
   private _totalItemWidth: number = 0;
@@ -91,6 +92,40 @@ export default class ZnNavbar extends ZincElement {
     this._appended = [...(this._appended || []), item];
   }
 
+  private _cloneLightItem(item: HTMLElement): HTMLElement {
+    const existing = this._lightDomClones.get(item);
+    if (existing) {
+      return existing;
+    }
+
+    const clone = item.cloneNode(true) as HTMLElement;
+    this._cloneSources.set(clone, item);
+    this._lightDomClones.set(item, clone);
+    clone.addEventListener('click', () => item.click());
+    return clone;
+  }
+
+  private _syncLightDomItems() {
+    const preItems: HTMLElement[] = [];
+    const postItems: HTMLElement[] = [];
+
+    Array.from(this.children).forEach(child => {
+      if (!(child instanceof HTMLElement) || child.tagName !== 'LI') {
+        return;
+      }
+
+      const clone = this._cloneLightItem(child);
+      if (child.hasAttribute('suffix')) {
+        postItems.push(clone);
+      } else {
+        preItems.push(clone);
+      }
+    });
+
+    this._preItems = preItems;
+    this._postItems = postItems;
+  }
+
   addExpandingAction(action: Element) {
     if (!this._expanding.includes(action)) {
       this._expanding = [...this._expanding, action];
@@ -141,31 +176,26 @@ export default class ZnNavbar extends ZincElement {
   }
 
   private _adoptNewLightItems(mutations: MutationRecord[]) {
-    const ul = this.shadowRoot?.querySelector('ul');
-    if (!ul) return;
-    const moreItem = ul.querySelector('li.more');
     for (const m of mutations) {
       for (const node of Array.from(m.addedNodes)) {
         if (node instanceof Element && node.tagName === 'ZN-EXPANDING-ACTION') {
           this.addExpandingAction(node);
-          continue;
-        }
-
-        if (!(node instanceof HTMLLIElement)) continue;
-        if (node.hasAttribute('suffix')) continue;
-        if (moreItem) {
-          ul.insertBefore(node, moreItem);
-        } else {
-          ul.appendChild(node);
         }
       }
     }
+
+    if (mutations.some(mutation =>
+      Array.from(mutation.addedNodes).some(node => node instanceof HTMLLIElement) ||
+      Array.from(mutation.removedNodes).some(node => node instanceof HTMLLIElement)
+    )) {
+      this._syncLightDomItems();
+      this.requestUpdate();
+    }
   }
 
   connectedCallback() {
     super.connectedCallback();
-    this._preItems = this.querySelectorAll('li:not([suffix])');
-    this._postItems = this.querySelectorAll('li[suffix]');
+    this._syncLightDomItems();
     this._expanding = Array.from(this.querySelectorAll('zn-expanding-action'));
 
     if (!this.masterId) {

package/src/components/navbar/navbar.scss

@@ -242,7 +242,7 @@ ul.navbar.navbar--stacked.navbar--icon-bar {
 
 :host(:not([stacked]):not([icon-bar]):not([icon-only])) {
   ul.navbar {
-    min-width: 180px;
+    min-width: 200px;
   }
 }
 
@@ -279,7 +279,7 @@ ul.navbar.navbar--stacked.navbar--icon-bar {
       }
     }
 
-    &:not(.has-hidden) > li.last-visible {
+    > li.last-visible {
       border-top-right-radius: 6px;
     }
 

package/src/components/navbar/navbar.test.ts

@@ -1,5 +1,6 @@
 import '../../../dist/zn.min.js';
 import {aTimeout, expect, fixture, html, waitUntil} from '@open-wc/testing';
+import {render} from 'lit';
 import type ZnNavbar from './navbar.component';
 
 describe('<zn-navbar>', () => {
@@ -9,6 +10,40 @@ describe('<zn-navbar>', () => {
     expect(el).to.exist;
   });
 
+  it('does not move Lit-owned light DOM items when the parent rerenders', async () => {
+    const host = document.createElement('div');
+    document.body.append(host);
+
+    try {
+      render(html`
+        <zn-navbar>
+          <li tab="one">One</li>
+        </zn-navbar>
+      `, host);
+      await aTimeout(20);
+
+      render(html`
+        <zn-navbar>
+          <li tab="one">One</li>
+          <li tab="two">Two</li>
+        </zn-navbar>
+      `, host);
+      await aTimeout(20);
+
+      const navbar = host.querySelector<ZnNavbar>('zn-navbar')!;
+      const shadowItems = navbar.shadowRoot!.querySelectorAll('li[tab]');
+      const lightItems = navbar.querySelectorAll('li[tab]');
+
+      expect(lightItems.length).to.equal(2);
+      expect(shadowItems.length).to.equal(2);
+      expect(shadowItems[0]).to.not.equal(lightItems[0]);
+      expect(shadowItems[1].textContent?.trim()).to.equal('Two');
+    } finally {
+      render(html``, host);
+      host.remove();
+    }
+  });
+
   it('reserves at least 200px for visible nav items when expandables need space', async () => {
     const el = await fixture<ZnNavbar>(html`
       <zn-navbar>