@kubex/zinc 1.1.168 → 1.1.170

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

@@ -52,35 +52,6 @@ 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.168",
+  "version": "1.1.170",
   "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

@@ -34,16 +34,6 @@ 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;
@@ -235,12 +225,7 @@ export default class ContentBlock extends ZincElement {
             <span class="content-block-header__caption">
               <slot name="caption">${this.sender}</slot>
             </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>`}
+            <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}
@@ -265,7 +250,7 @@ export default class ContentBlock extends ZincElement {
           </div>
         </div>
 
-        <zn-sp no-gap flush-x>
+        <zn-sp no-gap flush-x flush-t>
           <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>

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

@@ -51,19 +51,6 @@
   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/linked-select/linked-select.component.ts

@@ -152,7 +152,12 @@ export default class ZnLinkedSelect extends ZincElement implements ZincFormContr
     // The inner select only auto-selects on slotchange, which lit skips when it
     // can reuse the option elements of the outgoing group, so the first option of
     // the new group is resolved here rather than left to the select.
-    this.value = this.multiple ? [] : this.selectFirst ? Object.keys(this.currentOptions())[0] ?? "" : "";
+    const keys = Object.keys(this.currentOptions());
+    if (this.multiple) {
+      this.value = keys.length === 1 ? keys : [];
+    } else {
+      this.value = keys[0] ?? "";
+    }
     this.requestUpdate();
     this.formControlController.updateValidity();
     // A host reading the value off change events would otherwise keep the
@@ -191,6 +196,7 @@ export default class ZnLinkedSelect extends ZincElement implements ZincFormContr
 
   render() {
     const options = this.currentOptions();
+    const placeholder = Object.keys(options).length ? this.placeholder : 'No options available';
     return html`
       <zn-select part="select"
                  class="linked-select"
@@ -201,7 +207,7 @@ export default class ZnLinkedSelect extends ZincElement implements ZincFormContr
                  ?multiple="${this.multiple}"
                  ?clearable="${this.clearable}"
                  ?search="${this.search}"
-                 placeholder="${this.placeholder}"
+                 placeholder="${placeholder}"
                  help-text="${this.helpText}"
                  .value="${this.value}"
                  @zn-change=${this.handleSelectChange}

package/src/components/linked-select/linked-select.test.ts

@@ -57,6 +57,11 @@ describe('<zn-linked-select>', () => {
     expect(childOptions(child)).to.deep.equal([]);
   });
 
+  it('should say no options are available in the placeholder when the group is empty', async () => {
+    const { child } = await group();
+    expect(child.input.placeholder).to.equal('No options available');
+  });
+
   it('should keep an array value when multiple', async () => {
     const { parent, child } = await group(true);
     parent.value = 'cat-1';
@@ -81,7 +86,7 @@ describe('<zn-linked-select>', () => {
     child.value = ['cat-1-a'];
     await child.updateComplete;
 
-    parent.value = 'cat-2';
+    parent.value = 'cat-1';
     const changed = oneEvent(child, 'zn-change');
     parent.emit('zn-change');
     await changed;
@@ -94,10 +99,40 @@ describe('<zn-linked-select>', () => {
     let changes = 0;
     child.addEventListener('zn-change', () => changes++);
 
-    parent.value = 'cat-2';
+    parent.value = 'cat-1';
     parent.emit('zn-change');
     await child.updateComplete;
 
     expect(changes).to.equal(0);
   });
+
+  it('should preselect the only option of the linked group', async () => {
+    const { parent, child } = await group();
+    parent.value = 'cat-2';
+    const changed = oneEvent(child, 'zn-change');
+    parent.emit('zn-change');
+    await changed;
+
+    expect(child.value).to.equal('cat-2-a');
+  });
+
+  it('should preselect the first option of the linked group', async () => {
+    const { parent, child } = await group();
+    parent.value = 'cat-1';
+    const changed = oneEvent(child, 'zn-change');
+    parent.emit('zn-change');
+    await changed;
+
+    expect(child.value).to.equal('cat-1-a');
+  });
+
+  it('should preselect the only option of the linked group when multiple', async () => {
+    const { parent, child } = await group(true);
+    parent.value = 'cat-2';
+    const changed = oneEvent(child, 'zn-change');
+    parent.emit('zn-change');
+    await changed;
+
+    expect(child.value).to.deep.equal(['cat-2-a']);
+  });
 });