@kubex/zinc 1.1.46 → 1.1.47

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.47",
   "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
   "keywords": [
     "web components",

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;