@kubex/zinc 1.1.46 → 1.1.48

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

@@ -52,6 +52,35 @@ layout: component
 </zn-content-block>
 ```
 
+### Subject
+
+When a subject is available it is always shown in the header after the sender — expanded or
+collapsed — in place of the truncated body preview. When `subject` is empty,
+`subject-placeholder` is shown dimmed in its place. Omit both attributes to fall back to the
+body preview (e.g. notes).
+
+```html:preview
+
+<zn-content-block
+  time="16 Jun 2025, 13:00"
+  sender="John Smith"
+  avatar="JS"
+  subject="Re: Help with my order"
+>
+  <div slot="text">Text formatted message goes here.</div>
+</zn-content-block>
+
+<zn-content-block
+  time="16 Jun 2025, 13:05"
+  sender="John Smith"
+  avatar="JS"
+  subject=""
+  subject-placeholder="This message has no subject."
+>
+  <div slot="text">Text formatted message goes here.</div>
+</zn-content-block>
+```
+
 ### Attachments
 
 Attachments render in a row at the bottom of the content and are only visible while the block

package/package.json

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

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

@@ -176,6 +176,13 @@ export default class ZnChannelTile extends ZincElement {
     return Math.min(100, Math.max(0, (elapsed / total) * 100));
   }
 
+  private _remainingSeconds(): number | null {
+    // Only surfaced for auto-accept countdowns, not plain reservation windows.
+    const until = this._reservedUntilMs();
+    if (!until || !this.autoAcceptDelay) return null;
+    return Math.max(0, Math.ceil((until - Date.now()) / 1000));
+  }
+
   private _handleReject = (e: MouseEvent) => {
     e.preventDefault();
     e.stopPropagation();
@@ -193,6 +200,7 @@ export default class ZnChannelTile extends ZincElement {
   protected render(): unknown {
     const title = this.title || (this.available ? 'Available' : '');
     const countdown = this._isCountingDown() ? this._countdownPercent() : null;
+    const remaining = this._isCountingDown() ? this._remainingSeconds() : null;
 
     return html`
       <div
@@ -215,8 +223,12 @@ export default class ZnChannelTile extends ZincElement {
         <div class="channel-tile__body">
           ${this._renderLeading()}
           <div class="channel-tile__content">
-            <h3 class="channel-tile__title"><slot name="title">${title}</slot></h3>
-            <p class="channel-tile__subtitle"><slot name="subtitle">${this.subtitle}</slot></p>
+            ${remaining !== null
+              ? html`
+                <h3 class="channel-tile__title">${this.subtitle} (${remaining}s)</h3>`
+              : html`
+                <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/channel-tile/channel-tile.scss

@@ -69,11 +69,11 @@
 
 .channel-tile__overlay {
   position: absolute;
-  top: 0;
+  top: 24px; // sit below the header strip (fixed 24px)
   left: 0;
   bottom: 0;
   width: 0;
-  background-color: rgba(var(--zn-color-success), 0.55);
+  background-color: rgb(154, 232, 162);
   transition: width 0.2s linear;
   pointer-events: none;
   z-index: 0;

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

@@ -35,6 +35,16 @@ export default class ContentBlock extends ZincElement {
   @property() sender = '';
   @property() avatar = '';
 
+  /** The message subject, shown in the header after the sender. */
+  @property() subject = '';
+
+  /**
+   * Placeholder shown dimmed in place of the subject when `subject` is empty
+   * (e.g. "This message has no subject."). Omit both for content without a
+   * subject line (e.g. notes).
+   */
+  @property({attribute: 'subject-placeholder'}) subjectPlaceholder = '';
+
   @property({type: Boolean, reflect: true}) outbound = false;
 
   @property({type: Boolean, attribute: "no-collapse"}) noCollapse = false;
@@ -225,7 +235,12 @@ export default class ContentBlock extends ZincElement {
             <span class="content-block-header__caption">
               <slot name="caption">${this.sender}</slot>
             </span>
-            <span class="content-block-header__description">${this.truncateText()}</span>
+            ${this.subject || this.subjectPlaceholder ? html`
+              <span class="${classMap({
+                'content-block-header__subject': true,
+                'content-block-header__subject--empty': !this.subject
+              })}">${this.subject || this.subjectPlaceholder}</span>` : html`
+              <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}

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

@@ -6,6 +6,9 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 
+  background-color: rgba(var(--zn-panel), var(--zn-panel-opacity));
+  border-bottom: 1px solid rgb(var(--zn-border-color));
+
   padding-inline: calc(var(--zn-gutter, 0) + var(--zn-base-gap, 0));
 
   *, *::before, *::after {
@@ -58,6 +61,19 @@
   text-overflow: ellipsis;
 }
 
+.content-block-header__subject {
+  flex: 1 1 auto;
+  min-width: 0;
+  font-size: var(--zn-font-size-medium);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+
+  &--empty {
+    opacity: 0.5;
+  }
+}
+
 .content-block-header__description {
   flex: 1 1 auto;
   min-width: 0;

package/src/components/file/file.component.ts

@@ -421,18 +421,26 @@ export default class ZnFile extends ZincElement implements ZincFormControl {
     // Use the transferred file list from the drag drop interface
     const hasTrigger = this.hasSlotController.test('trigger');
     if (!hasTrigger) {
-      const disappearAnimation = getAnimation(this.inputChosen, 'file.text.disappear', {dir: this.localize.dir()});
-      const appearAnimation = getAnimation(this.inputChosen, 'file.text.appear', {dir: this.localize.dir()});
+      const inputChosen = this.inputChosen;
+      const dropareaIcon = this.dropareaIcon;
 
-      if (this.droparea) {
-        const dropIconAnimation = getAnimation(this.dropareaIcon, 'file.iconDrop', {dir: this.localize.dir()});
+      if (this.droparea && dropareaIcon) {
+        const dropIconAnimation = getAnimation(dropareaIcon, 'file.iconDrop', {dir: this.localize.dir()});
         // eslint-disable-next-line @typescript-eslint/no-floating-promises
-        animateTo(this.dropareaIcon, dropIconAnimation.keyframes, dropIconAnimation.options);
+        animateTo(dropareaIcon, dropIconAnimation.keyframes, dropIconAnimation.options);
       }
-      // eslint-disable-next-line max-len
-      await animateTo(this.inputChosen, disappearAnimation.keyframes, disappearAnimation.options);
+
+      if (inputChosen) {
+        const disappearAnimation = getAnimation(inputChosen, 'file.text.disappear', {dir: this.localize.dir()});
+        await animateTo(inputChosen, disappearAnimation.keyframes, disappearAnimation.options);
+      }
+
       this.handleFiles(files);
-      await animateTo(this.inputChosen, appearAnimation.keyframes, appearAnimation.options);
+
+      if (inputChosen) {
+        const appearAnimation = getAnimation(inputChosen, 'file.text.appear', {dir: this.localize.dir()});
+        await animateTo(inputChosen, appearAnimation.keyframes, appearAnimation.options);
+      }
     } else {
       this.handleFiles(files);
     }

package/src/components/file/file.test.ts

@@ -1,10 +1,34 @@
 import '../../../dist/zn.min.js';
-import { expect, fixture, html } from '@open-wc/testing';
+import {expect, fixture, html, oneEvent} from '@open-wc/testing';
+import type ZnFile from './file.component';
 
-describe('<zn-drag-upload>', () => {
+describe('<zn-file>', () => {
   it('should render a component', async () => {
-    const el = await fixture(html` <zn-drag-upload></zn-drag-upload> `);
+    const el = await fixture(html`<zn-file></zn-file>`);
 
     expect(el).to.exist;
   });
+
+  for (const droparea of [false, true]) {
+    it(`accepts a drop when the ${droparea ? 'droparea' : 'standard input'} has no animation target`, async () => {
+      const el = await fixture<ZnFile>(html`<zn-file ?droparea=${droparea}></zn-file>`);
+      const dataTransfer = new DataTransfer();
+      dataTransfer.items.add(new File(['content'], 'example.txt', {type: 'text/plain'}));
+      const dropHandler = el as unknown as {
+        handleTransferItems: (items: DataTransferItemList | null) => Promise<FileList>;
+      };
+      dropHandler.handleTransferItems = () => Promise.resolve(dataTransfer.files);
+
+      const changed = oneEvent(el, 'zn-change');
+      el.shadowRoot!.querySelector<HTMLElement>('.form-control')!.dispatchEvent(new DragEvent('drop', {
+        bubbles: true,
+        cancelable: true,
+        dataTransfer
+      }));
+      await changed;
+
+      expect(el.files).to.have.length(1);
+      expect(el.files![0].name).to.equal('example.txt');
+    });
+  }
 });

package/src/components/textarea/textarea.scss

@@ -164,4 +164,10 @@
     border: none !important;
     background-color: transparent !important;
   }
+
+  & .textarea__control {
+    background-color: transparent;
+    box-shadow: none;
+    border: none;
+  }
 }