@kubex/zinc 1.1.15 → 1.1.17

package/package.json

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

package/scss/shared/_table.scss

@@ -48,7 +48,6 @@ table:not(.remarkd-table) {
   th {
     @include m.text-style(button-label);
     text-transform: capitalize;
-    border-top: 1px solid rgb(var(--zn-border-color));
     border-bottom: 1px solid rgb(var(--zn-border-color));
   }
 }

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

@@ -1,6 +1,6 @@
 import {cleanHTML} from "./clean-message";
 import {type CSSResultGroup, html, nothing, unsafeCSS} from 'lit';
-import {property} from "lit/decorators.js";
+import {property, state} from "lit/decorators.js";
 import {unsafeHTML} from "lit/directives/unsafe-html.js";
 import ZincElement from '../../internal/zinc-element';
 import ZnIcon from "../icon";
@@ -80,6 +80,9 @@ export default class ZnChatMessage extends ZincElement {
   /** Marks the message as initiated by an agent (affects styling and grouping). */
   @property({type: Boolean, reflect: true, attribute: 'agent-initiated'}) agentInitiated = false;
 
+  /** Whether any element is assigned to the `attachments` slot — drives the attachments row visibility. */
+  @state() private hasAttachments = false;
+
   connectedCallback() {
     const isContent = !this.actionType || this.actionType === 'internal';
     const agentInitiated = isContent && this.agentInitiated;
@@ -122,7 +125,12 @@ export default class ZnChatMessage extends ZincElement {
           <div part="bubble" class="message__bubble ${sending ? 'message__bubble--sending' : ''}">
             <div class="message__main">
               <div part="content" class="message__content">${this.renderContent()}</div>
-              <slot name="attachments" part="attachments" class="message__attachments"></slot>
+              <slot
+                name="attachments"
+                part="attachments"
+                class="message__attachments ${this.hasAttachments ? 'message__attachments--visible' : ''}"
+                @slotchange=${this.handleAttachmentsSlotChange}
+              ></slot>
             </div>
             ${sending ? html`
               <div class="message__meta">Sending...</div>` : html`
@@ -136,6 +144,20 @@ export default class ZnChatMessage extends ZincElement {
     `;
   }
 
+  protected firstUpdated() {
+    this.syncHasAttachments();
+    Promise.resolve().then(() => this.syncHasAttachments());
+  }
+
+  private handleAttachmentsSlotChange() {
+    this.syncHasAttachments();
+  }
+
+  private syncHasAttachments() {
+    const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot[name="attachments"]');
+    this.hasAttachments = !!slot && slot.assignedElements().length > 0;
+  }
+
   private isSystemMessage() {
     return ZnChatMessage.SYSTEM_ACTION_TYPES.includes(this.actionType);
   }

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

@@ -65,15 +65,16 @@
   }
 
   &__attachments {
-    // Always rendered so projection is reliable regardless of when children are
-    // parsed/added, but kept out of flow (no phantom gap below the bubble) until
-    // an attachment actually exists — toggled on via :host(:has(...)) below.
     display: none;
     flex-direction: row;
     flex-wrap: wrap;
     align-items: center;
     gap: var(--zn-spacing-small);
 
+    &--visible {
+      display: flex;
+    }
+
     ::slotted(zn-chat-message-attachment) {
       min-width: 0;
     }
@@ -168,13 +169,6 @@
   }
 }
 
-// Reveal the attachments row only when an attachment is actually present. Using
-// :has on the host keeps this live and parse-order independent — no reliance on
-// conditional rendering that could miss a child added during parsing.
-:host(:has([slot="attachments"])) .message__attachments {
-  display: flex;
-}
-
 // Bubble tints by message origin / type.
 :host([agent-initiated]) .message__bubble {
   background: var(--message-background, rgba(var(--zn-color-info), 0.1));

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

@@ -35,7 +35,7 @@ export default class ZnChatMessageAttachment extends ZincElement {
   @property() name: string = '';
 
   /** The leading icon name. */
-  @property() icon: string = 'attach_file';
+  @property() icon: string = 'paperclip@lu';
 
   /** Where to open the link. Defaults to a new tab. */
   @property() target: string = '_blank';
@@ -46,13 +46,11 @@ export default class ZnChatMessageAttachment extends ZincElement {
   connectedCallback() {
     super.connectedCallback();
 
-    // This component is only meaningful inside the attachments row of a chat message —
-    // slot it there automatically so consumers don't have to.
-    if (!this.slot) {
-      this.slot = 'attachments';
-    }
-
-    if (!this.closest('zn-chat-message')) {
+    if (this.closest('zn-chat-message')) {
+      if (!this.slot) {
+        this.slot = 'attachments';
+      }
+    } else {
       console.warn('<zn-chat-message-attachment> can only be used inside a <zn-chat-message>.', this);
     }
   }

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

@@ -22,6 +22,17 @@ describe('<zn-chat-message-attachment>', () => {
     expect(attachment?.getAttribute('slot')).to.equal('attachments');
   });
 
+  it('should reveal the attachments row when an attachment is slotted in', async () => {
+    const el = await fixture<HTMLElement>(html`
+      <zn-chat-message message="Test">
+        <zn-chat-message-attachment href="#" name="file.pdf"></zn-chat-message-attachment>
+      </zn-chat-message>`);
+
+    const row = el.shadowRoot!.querySelector('.message__attachments') as HTMLElement;
+    // The row is display:none until something is slotted in; a slotted attachment must reveal it.
+    expect(getComputedStyle(row).display).to.not.equal('none');
+  });
+
   it('should render the name in the link', async () => {
     const el = await fixture<HTMLElement>(html`
       <zn-chat-message>

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

@@ -1339,9 +1339,9 @@ export default class ZnDataTable extends ZincElement {
       <td class="table__cell table__cell--actions">
         <zn-dropdown placement="bottom-end">
           <zn-button slot="trigger"
-                     icon-button
-                     plain
+                     icon-button="small"
                      icon="ellipsis@lu"
+                     plain
                      aria-label="Row actions">
           </zn-button>
           <zn-menu>

package/src/components/data-table/data-table.scss

@@ -80,7 +80,6 @@ table {
 
   th {
     @include wc.text-style(button-label);
-    border-top: 1px solid rgb(var(--zn-border-color));
     border-bottom: 1px solid rgb(var(--zn-border-color));
   }
 }

package/src/components/editor/editor.component.ts

@@ -261,6 +261,13 @@ export default class ZnEditor extends ZincElement implements ZincFormControl {
 
     this.quillElement = quill;
 
+    this.getForm()?.addEventListener('submit', () => {
+      setTimeout(() => {
+        const attachmentModule = this.quillElement.getModule('attachment') as Attachment;
+        attachmentModule?.reset();
+      }, 0);
+    });
+
     // @ts-expect-error getSelection is available it lies.
     const hasShadowRootSelection = !!(document.createElement('div').attachShadow({mode: 'open'}).getSelection);
     // Each browser engine has a different implementation for retrieving the Range
@@ -400,7 +407,10 @@ export default class ZnEditor extends ZincElement implements ZincFormControl {
 
           if (this.interactionType === 'chat') {
             const form = this.closest('form');
-            if (form && this.value && this.value.trim().length > 0 && !empty(this.value)) {
+            const hasText = !!this.value && this.value.trim().length > 0 && !empty(this.value);
+            const attachmentInput = form?.querySelector('input[name="attachments"]') as HTMLInputElement | null;
+            const hasAttachments = !!attachmentInput?.value && attachmentInput.value !== '[]';
+            if (form && (hasText || hasAttachments)) {
               this.emit('zn-submit', {detail: {value: this.value, element: this}});
               form.requestSubmit();
               this.quillElement.setText('');

package/src/components/editor/modules/attachment/attachment.ts

@@ -57,7 +57,7 @@ export default class Attachment {
   public addAttachment(file: File, dataUrl?: string) {
     const attachmentId = generateId();
     const insertWithDataUrl = (base64: string) => {
-      this._insertAttachment({ dataUrl: base64, file, id: attachmentId });
+      this._insertAttachment({dataUrl: base64, file, id: attachmentId});
     };
 
     if (dataUrl) {
@@ -72,8 +72,8 @@ export default class Attachment {
     }
 
     if (typeof this._options.upload === 'function') {
-      this._options.upload(file).then(({ path, url }: { path: string; url: string }) => {
-        this._uploadAttachment(file, url);
+      this._options.upload(file).then(async ({path, url}: { path: string; url: string }) => {
+        await this._uploadAttachment(file, url);
         this._updateAttachment(attachmentId, url, path);
       }).catch((err: { message: string }) => {
         console.warn(err.message);
@@ -163,6 +163,15 @@ export default class Attachment {
     return attachment;
   }
 
+  /** Clear every staged attachment preview and reset the backing form input. */
+  public reset() {
+    this._attachmentContainer.replaceChildren();
+    const attachments = this._options.attachmentInput;
+    if (attachments) {
+      attachments.value = '';
+    }
+  }
+
   private _removeAttachment(id: string) {
     const attachment = this._quill.container.querySelector(`#${id}`);
     if (attachment) {
@@ -184,24 +193,26 @@ export default class Attachment {
     }
   }
 
-  private _uploadAttachment(file: File, url: string) {
-    const xhr = new XMLHttpRequest();
+  private _uploadAttachment(file: File, url: string): Promise<void> {
+    return new Promise<void>((resolve, reject) => {
+      const xhr = new XMLHttpRequest();
 
-    xhr.open('PUT', url, true);
-    xhr.setRequestHeader('Content-Type', file.type);
+      xhr.open('PUT', url, true);
+      xhr.setRequestHeader('Content-Type', file.type);
 
-    xhr.onload = () => {
-      if (xhr.status >= 200 && xhr.status < 300) {
-        console.log(`[Quill Attachment Module] File uploaded successfully to ${url}`);
-      } else {
-        console.error(`[Quill Attachment Module] Failed to upload file. Status: ${xhr.status}`);
-      }
-    };
+      xhr.onload = () => {
+        if (xhr.status >= 200 && xhr.status < 300) {
+          resolve();
+        } else {
+          reject(new Error(`[Quill Attachment Module] Failed to upload file. Status: ${xhr.status}`));
+        }
+      };
 
-    xhr.onerror = () => {
-      console.error(`[Quill Attachment Module] Error occurred while uploading file.`);
-    };
+      xhr.onerror = () => {
+        reject(new Error(`[Quill Attachment Module] Error occurred while uploading file.`));
+      };
 
-    xhr.send(file);
+      xhr.send(file);
+    });
   }
 }

package/src/components/input/input.scss

@@ -167,7 +167,7 @@ input[type='text'].input__control[data-color-input] {
 
 .input--x-small .input__control {
   height: calc(var(--zn-input-height-x-small) - var(--zn-input-border-width) * 2);
-  padding: 0 var(--zn-input-spacing-small);
+  padding: 0 var(--zn-input-spacing-small) 0 var(--zn-spacing-small);
 }
 
 .input--x-small .input__clear,
@@ -201,7 +201,7 @@ input[type='text'].input__control[data-color-input] {
 
 .input--small .input__control {
   height: calc(var(--zn-input-height-small) - var(--zn-input-border-width) * 2);
-  padding: 0 var(--zn-input-spacing-small);
+  padding: 0 var(--zn-input-spacing-small) 0 var(--zn-spacing-small);
 }
 
 .input--small .input__clear,
@@ -235,7 +235,7 @@ input[type='text'].input__control[data-color-input] {
 
 .input--medium .input__control {
   height: calc(var(--zn-input-height-medium) - var(--zn-input-border-width) * 2);
-  padding: 0 var(--zn-input-spacing-small);
+  padding: 0 var(--zn-input-spacing-small) 0 var(--zn-spacing-small);
 }
 
 .input--medium .input__clear,
@@ -283,7 +283,7 @@ input[type='text'].input__control[data-color-input] {
 
 .input--large .input__control {
   height: calc(var(--zn-input-height-large) - var(--zn-input-border-width) * 2);
-  padding: 0 var(--zn-input-spacing-medium);
+  padding: 0 var(--zn-input-spacing-medium) 0 var(--zn-spacing-small);
 }
 
 .input--large .input__clear,

package/src/components/select/select.scss

@@ -208,7 +208,7 @@
   font-size: var(--zn-input-font-size-small);
   min-height: var(--zn-input-height-small);
   padding-block: 0;
-  padding-inline: var(--zn-input-spacing-small);
+  padding-inline: var(--zn-spacing-small);
 }
 
 .select--small .select__clear {
@@ -233,7 +233,7 @@
   font-size: var(--zn-input-font-size-medium);
   min-height: var(--zn-input-height-medium);
   padding-block: 0;
-  padding-inline: var(--zn-input-spacing-medium);
+  padding-inline: var(--zn-spacing-small);
 }
 
 .select--has-input-prefix.select--medium .select__combobox {
@@ -262,7 +262,7 @@
   font-size: var(--zn-input-font-size-large);
   min-height: var(--zn-input-height-large);
   padding-block: 0;
-  padding-inline: var(--zn-input-spacing-large);
+  padding-inline: var(--zn-spacing-small);
 }
 
 .select--has-input-prefix.select--large .select__combobox {

package/src/components/toggle/toggle.scss

@@ -30,8 +30,8 @@
 }
 
 :host([checked]) .switch__input-wrapper {
-  background-color: rgba(105, 54, 245, 1);
-  border-color: rgba(105, 54, 245, 1);
+  background-color: rgb(var(--zn-color-primary));
+  border-color: rgb(var(--zn-color-primary));
 
   .switch__control {
     transform: translate(16px, -50%);

package/src/form-control.scss

@@ -1,5 +1,5 @@
 .form-control-input {
-  margin: var(--zn-spacing-2x-small) 3px 3px;
+  margin: var(--zn-spacing-2x-small) 3px 3px 0;
 }
 
 .form-control-input--flush {
@@ -20,7 +20,7 @@
   color: var(--zn-input-label-color);
   font-weight: var(--zn-input-label-font-weight);
   line-height: var(--zn-input-label-line-height);
-  margin-bottom: var(--zn-spacing-2x-small);
+  margin-bottom: var(--zn-spacing-x-small);
 }
 
 .form-control--has-label.form-control--medium .form-control__label {