@kubex/zinc 1.0.14 → 1.0.16

package/src/components/note/note.component.ts

@@ -5,6 +5,7 @@ import {property, state} from "lit/decorators.js";
 import ZincElement from '../../internal/zinc-element';
 
 import styles from './note.scss';
+import {HasSlotController} from "../../internal/slot";
 
 /**
  * @summary Short summary of the component's intended use.
@@ -32,36 +33,19 @@ export default class ZnNote extends ZincElement {
   @property({reflect: true}) date: string = '';
   @property({type: HTMLElement, reflect: true}) body: string = '';
 
-  // Number of lines at which the note body collapses; 0 disables collapsing
-  @property({type: Number, attribute: 'collapse-at-lines', reflect: true}) collapseAtLines: number = 3;
+  private readonly hasSlotController = new HasSlotController(this, 'caption', 'date', '[default]', 'snippet', 'footer');
 
-  // Internal state: whether the body is currently expanded
-  @state() private expanded = false;
+  @state()
+  private expanded: boolean = false;
 
-  private _toggleExpand = () => {
+  private _toggleExpand(): void {
     this.expanded = !this.expanded;
-    this.updateComplete.then(() => this._measureOverflow());
-  }
-
-  private _measureOverflow() {
-    const container = this.shadowRoot?.querySelector('.note__body-container') as HTMLElement | null;
-    if (!container || this.collapseAtLines <= 0) {
-      return;
-    }
-
-    container.style.setProperty('--note-collapse-lines', String(this.collapseAtLines));
-    container.classList.toggle('note__body--clamped', !this.expanded);
-  }
-
-  protected firstUpdated() {
-    this._measureOverflow();
-  }
-
-  protected updated() {
-    this._measureOverflow();
   }
 
   protected render(): unknown {
+    const showExpandableButton: boolean = this.hasSlotController.test('snippet')
+      && this.hasSlotController.test('[default]');
+
     return html`
       <div class="${classMap({
         'note': true,
@@ -80,15 +64,18 @@ export default class ZnNote extends ZincElement {
           <slot name="date" class="note__header__date">
             <small>${this.date}</small>
           </slot>
-          <slot name="action"></slot>
-        </div>
-        <div class="${classMap({
-          'note__body-container': true,
-          'note__body--clamped': this.collapseAtLines > 0 && !this.expanded
-        })}" style="--note-collapse-lines: ${this.collapseAtLines}">
-          <slot class="note__body"></slot>
         </div>
-        ${this.collapseAtLines > 0 ? html`
+
+        ${this.expanded && showExpandableButton ?
+          html`
+            <slot class="note__body"></slot>` :
+          html`
+            <slot name="snippet" class="note__snippet"></slot>`}
+
+        ${!showExpandableButton ? html`
+          <slot class="note__body"></slot>` : ' '}
+
+        ${!showExpandableButton ? '' : html`
           <div class="note__toggle">
             <zn-button color="transparent"
                        size="content"
@@ -97,8 +84,7 @@ export default class ZnNote extends ZincElement {
                        aria-expanded="${String(this.expanded)}">
               ${this.expanded ? 'Show less' : 'Show more'}
             </zn-button>
-          </div>
-        ` : ''}
+          </div>`}
         <slot name="footer" class="note__footer"></slot>
       </div>
     `;

package/src/components/note/note.scss

@@ -64,6 +64,14 @@ $colors: (
     padding: 0;
   }
 
+  &__body--clamped {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: var(--note-collapse-lines, 0);
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
   @each $name, $color in $colors {
     &--#{'' + $name} {
       .note__header__caption {

package/src/components/option/option.component.ts

@@ -1,8 +1,8 @@
-import {classMap} from "lit/directives/class-map.js";
-import {type CSSResultGroup, html, unsafeCSS} from 'lit';
-import {LocalizeController} from "../../utilities/localize";
-import {property, query, state} from 'lit/decorators.js';
-import {watch} from '../../internal/watch';
+import { classMap } from "lit/directives/class-map.js";
+import { type CSSResultGroup, html, unsafeCSS } from 'lit';
+import { LocalizeController } from "../../utilities/localize";
+import { property, query, state } from 'lit/decorators.js';
+import { watch } from '../../internal/watch';
 import ZincElement from '../../internal/zinc-element';
 import ZnIcon from "../icon";
 
@@ -28,7 +28,7 @@ import styles from './option.scss';
  */
 export default class ZnOption extends ZincElement {
   static styles: CSSResultGroup = unsafeCSS(styles);
-  static dependencies = {'zn-icon': ZnIcon};
+  static dependencies = { 'zn-icon': ZnIcon };
 
   private cachedTextLabel: string;
   // @ts-expect-error - Controller is currently unused
@@ -39,7 +39,6 @@ export default class ZnOption extends ZincElement {
   @query('.option__label') defaultSlot: HTMLSlotElement;
 
   @state() current = false; // the user has keyed into the option, but hasn't selected it yet (shows a highlight)
-  @state() selected = false; // the option is selected and has aria-selected="true"
   @state() hasHover = false; // we need this because Safari doesn't honor :hover styles while dragging
 
   /**
@@ -47,10 +46,12 @@ export default class ZnOption extends ZincElement {
    * from other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing
    * multiple values.
    */
-  @property({reflect: true}) value = '';
+  @property({ reflect: true }) value = '';
 
   /** Draws the option in a disabled state, preventing selection. */
-  @property({type: Boolean, reflect: true}) disabled = false;
+  @property({ type: Boolean, reflect: true }) disabled = false;
+
+  @property({ type: Boolean, reflect: true }) selected = false;
 
   connectedCallback() {
     super.connectedCallback();
@@ -70,7 +71,7 @@ export default class ZnOption extends ZincElement {
     // When the label changes, emit a slotchange event so parent controls see it
     if (textLabel !== this.cachedTextLabel) {
       this.cachedTextLabel = textLabel;
-      this.emit('slotchange', {bubbles: true, composed: false, cancelable: false});
+      this.emit('slotchange', { bubbles: true, composed: false, cancelable: false });
     }
   }
 

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

@@ -68,7 +68,6 @@
 
 .row {
   background-color: rgba(var(--zn-panel-highlight), var(--zn-panel-highlight-opacity, 1));
-  margin-top: 20px;
 }
 
 .header-item {
@@ -101,6 +100,10 @@
   @include wc.container-query(md) {
     border-bottom: none;
   }
+
+  &:first-of-type {
+    margin-top: 0;
+  }
 }
 
 .sub {

package/src/components/select/select.component.ts

@@ -1,21 +1,22 @@
-import {animateTo, stopAnimations} from '../../internal/animate.js';
-import {classMap} from "lit/directives/class-map.js";
-import {type CSSResultGroup, html, nothing, type TemplateResult, unsafeCSS, PropertyValues} from 'lit';
-import {FormControlController} from "../../internal/form";
-import {getAnimation, setDefaultAnimation} from "../../utilities/animation-registry";
-import {HasSlotController} from "../../internal/slot";
-import {LocalizeController} from "../../utilities/localize";
-import {property, query, state} from 'lit/decorators.js';
-import {scrollIntoView} from "../../internal/scroll";
-import {unsafeHTML} from "lit/directives/unsafe-html.js";
-import {waitForEvent} from "../../internal/event";
-import {watch} from '../../internal/watch';
-import type {ZincFormControl} from '../../internal/zinc-element';
+import { animateTo, stopAnimations } from '../../internal/animate.js';
+import { classMap } from "lit/directives/class-map.js";
+import { type CSSResultGroup, html, nothing, PropertyValues, type TemplateResult, unsafeCSS } from 'lit';
+import {deepQuerySelectorAll} from "../../utilities/query";
+import { FormControlController } from "../../internal/form";
+import { getAnimation, setDefaultAnimation } from "../../utilities/animation-registry";
+import { HasSlotController } from "../../internal/slot";
+import { LocalizeController } from "../../utilities/localize";
+import { property, query, state } from 'lit/decorators.js';
+import { scrollIntoView } from "../../internal/scroll";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { waitForEvent } from "../../internal/event";
+import { watch } from '../../internal/watch';
 import ZincElement from '../../internal/zinc-element';
 import ZnChip from "../chip";
 import ZnIcon from "../icon";
 import ZnPopup from "../popup";
-import type {ZnRemoveEvent} from "../../events/zn-remove";
+import type { ZincFormControl } from '../../internal/zinc-element';
+import type { ZnRemoveEvent } from "../../events/zn-remove";
 import type ZnOption from "../option";
 
 import styles from './select.scss';
@@ -141,73 +142,73 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
   }) defaultValue: string | string[] = '';
 
   /** The select's size. */
-  @property({reflect: true}) size: 'small' | 'medium' | 'large' = 'medium';
+  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
 
   /** Placeholder text to show as a hint when the select is empty. */
   @property() placeholder = '';
 
   /** Allows more than one option to be selected. */
-  @property({type: Boolean, reflect: true}) multiple = false;
+  @property({ type: Boolean, reflect: true }) multiple = false;
 
   /** Max number of options that can be selected when `multiple` is true. Set to 0 to allow unlimited selections. */
-  @property({attribute: 'max-options', type: Number}) maxOptions = 0;
+  @property({ attribute: 'max-options', type: Number }) maxOptions = 0;
 
   /**
    * The maximum number of selected options to show when `multiple` is true. After the maximum, "+n" will be shown to
    * indicate the number of additional items that are selected. Set to 0 to remove the limit.
    */
-  @property({attribute: 'max-options-visible', type: Number}) maxOptionsVisible = 3;
+  @property({ attribute: 'max-options-visible', type: Number }) maxOptionsVisible = 3;
 
   /** Disables the select control. */
-  @property({type: Boolean, reflect: true}) disabled = false;
+  @property({ type: Boolean, reflect: true }) disabled = false;
 
   /** Adds a clear button when the select is not empty. */
-  @property({type: Boolean}) clearable = false;
+  @property({ type: Boolean }) clearable = false;
 
   /**
    * Indicates whether or not the select is open. You can toggle this attribute to show and hide the menu, or you can
    * use the `show()` and `hide()` methods and this attribute will reflect the select's open state.
    */
-  @property({type: Boolean, reflect: true}) open = false;
+  @property({ type: Boolean, reflect: true }) open = false;
 
   /**
    * Enable this option to prevent the listbox from being clipped when the component is placed inside a container with
    * `overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.
    */
-  @property({type: Boolean}) hoist = false;
+  @property({ type: Boolean }) hoist = false;
 
   /** Draws a pill-style select with rounded edges. */
-  @property({type: Boolean, reflect: true}) pill = false;
+  @property({ type: Boolean, reflect: true }) pill = false;
 
   /** The select's label. If you need to display HTML, use the `label` slot instead. */
   @property() label = '';
 
   /** Text that appears in a tooltip next to the label. If you need to display HTML in the tooltip, use the `label-tooltip` slot instead. */
-  @property({attribute: 'label-tooltip'}) labelTooltip = '';
+  @property({ attribute: 'label-tooltip' }) labelTooltip = '';
 
   /** Text that appears above the input, on the right, to add additional context. If you need to display HTML in this text, use the `context-note` slot instead. */
-  @property({attribute: 'context-note'}) contextNote = '';
+  @property({ attribute: 'context-note' }) contextNote = '';
 
   /**
    * The preferred placement of the selects menu. Note that the actual placement may vary as needed to keep the listbox
    * inside the viewport.
    */
-  @property({reflect: true}) placement: 'top' | 'bottom' = 'bottom';
+  @property({ reflect: true }) placement: 'top' | 'bottom' = 'bottom';
 
   /** The select's help text. If you need to display HTML, use the `help-text` slot instead. */
-  @property({attribute: 'help-text'}) helpText = '';
+  @property({ attribute: 'help-text' }) helpText = '';
 
   /**
    * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
    * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
    * the same document or shadow root for this to work.
    */
-  @property({reflect: true}) form: string;
+  @property({ reflect: true }) form: string;
 
   /** The select's required attribute. */
-  @property({type: Boolean, reflect: true}) required = false;
+  @property({ type: Boolean, reflect: true }) required = false;
 
-  @property({attribute: 'cache-key'}) cacheKey: string = "";
+  @property({ attribute: 'cache-key' }) cacheKey: string = "";
 
   /**
    * A function that customizes the tags to be rendered when multiple=true. The first argument is the option, the second
@@ -277,7 +278,7 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
       this.closeWatcher.onclose = () => {
         if (this.open) {
           this.hide();
-          this.displayInput.focus({preventScroll: true});
+          this.displayInput.focus({ preventScroll: true });
         }
       };
     }
@@ -329,7 +330,7 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
       event.preventDefault();
       event.stopPropagation();
       this.hide();
-      this.displayInput.focus({preventScroll: true});
+      this.displayInput.focus({ preventScroll: true });
     }
 
     // Handle enter and space. When pressing space, we allow for type to select behaviors so if there's anything in the
@@ -361,7 +362,7 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
 
         if (!this.multiple) {
           this.hide();
-          this.displayInput.focus({preventScroll: true});
+          this.displayInput.focus({ preventScroll: true });
         }
       }
 
@@ -468,7 +469,7 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
     }
 
     event.preventDefault();
-    this.displayInput.focus({preventScroll: true});
+    this.displayInput.focus({ preventScroll: true });
     this.open = !this.open;
   }
 
@@ -486,7 +487,7 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
 
     if (this.value !== '') {
       this.setSelectedOptions([]);
-      this.displayInput.focus({preventScroll: true});
+      this.displayInput.focus({ preventScroll: true });
 
       // Emit after update
       this.updateComplete.then(() => {
@@ -525,7 +526,7 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
       }
 
       // Set focus after updating so the value is announced by screen readers
-      this.updateComplete.then(() => this.displayInput.focus({preventScroll: true}));
+      this.updateComplete.then(() => this.displayInput.focus({ preventScroll: true }));
 
       if (this.value !== oldValue) {
         // Emit after updating
@@ -537,7 +538,7 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
 
       if (!this.multiple) {
         this.hide();
-        this.displayInput.focus({preventScroll: true});
+        this.displayInput.focus({ preventScroll: true });
       }
     }
   }
@@ -558,6 +559,18 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
 
     // Select only the options that match the new value
     this.setSelectedOptions(allOptions.filter(el => value.includes(el.value)));
+
+    // of check if an option has selected attribute set initially
+    if (!this.valueHasChanged) {
+      const initiallySelectedOptions = allOptions.filter(el => el.hasAttribute('selected'));
+      if (initiallySelectedOptions.length) {
+        if (this.multiple) {
+          this.setSelectedOptions(initiallySelectedOptions);
+        } else {
+          this.setSelectedOptions(initiallySelectedOptions[0]);
+        }
+      }
+    }
   }
 
   private handleTagRemove(event: ZnRemoveEvent, option: ZnOption) {
@@ -718,9 +731,8 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
     }
 
     if (this.conditional !== "") {
-      const conditionalSelect = document.querySelector(`zn-select[id="${this.conditional}"]`) as ZnSelect;
-      console.log('conditionalSelect', conditionalSelect);
-      if (conditionalSelect) {
+      const conditionalSelectList = deepQuerySelectorAll(`#${this.conditional}`, document.documentElement, '') as ZnSelect[];
+      conditionalSelectList.forEach((conditionalSelect) => {
         // disable if the other has any options selected
         conditionalSelect.addEventListener('zn-change', () => {
           let linkedValues = Array.isArray(conditionalSelect.value) ? conditionalSelect.value : [conditionalSelect.value];
@@ -731,11 +743,11 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
 
         // trigger the event once to initialize
         conditionalSelect.dispatchEvent(new Event('zn-input'));
-      }
+      });
     }
   }
 
-  @watch('disabled', {waitUntilFirstUpdate: true})
+  @watch('disabled', { waitUntilFirstUpdate: true })
   handleDisabledChange() {
     // Close the listbox when the control is disabled
     if (this.disabled) {
@@ -756,7 +768,7 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
     }
   }
 
-  @watch(['defaultValue', 'value'], {waitUntilFirstUpdate: true})
+  @watch(['defaultValue', 'value'], { waitUntilFirstUpdate: true })
   handleValueChange() {
     if (!this.valueHasChanged) {
       const cachedValueHasChanged = this.valueHasChanged;
@@ -772,7 +784,7 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
     this.setSelectedOptions(allOptions.filter(el => value.includes(el.value)));
   }
 
-  @watch('open', {waitUntilFirstUpdate: true})
+  @watch('open', { waitUntilFirstUpdate: true })
   async handleOpenChange() {
     if (this.open && !this.disabled) {
       // Reset the current option
@@ -791,7 +803,7 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
         this.setCurrentOption(this.currentOption);
       });
 
-      const {keyframes, options} = getAnimation(this, 'select.show', {dir: this.localize.dir()});
+      const { keyframes, options } = getAnimation(this, 'select.show', { dir: this.localize.dir() });
       await animateTo(this.popup.popup, keyframes, options);
 
       // Make sure the current option is scrolled into view (required for Safari)
@@ -806,7 +818,7 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
       this.removeOpenListeners();
 
       await stopAnimations(this);
-      const {keyframes, options} = getAnimation(this, 'select.hide', {dir: this.localize.dir()});
+      const { keyframes, options } = getAnimation(this, 'select.hide', { dir: this.localize.dir() });
       await animateTo(this.popup.popup, keyframes, options);
       this.listbox.hidden = true;
       this.popup.active = false;
@@ -1037,16 +1049,16 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
 
 setDefaultAnimation('select.show', {
   keyframes: [
-    {opacity: 0, scale: 0.9},
-    {opacity: 1, scale: 1}
+    { opacity: 0, scale: 0.9 },
+    { opacity: 1, scale: 1 }
   ],
-  options: {duration: 100, easing: 'ease'}
+  options: { duration: 100, easing: 'ease' }
 });
 
 setDefaultAnimation('select.hide', {
   keyframes: [
-    {opacity: 1, scale: 1},
-    {opacity: 0, scale: 0.9}
+    { opacity: 1, scale: 1 },
+    { opacity: 0, scale: 0.9 }
   ],
-  options: {duration: 100, easing: 'ease'}
+  options: { duration: 100, easing: 'ease' }
 });

package/src/components/style/style.component.ts

@@ -20,6 +20,7 @@ export default class ZnStyle extends ZincElement {
   @property({type: Boolean}) primary = false;
   @property({type: Boolean}) accent = false;
   @property({type: Boolean}) center = false;
+  @property({type: String}) display = 'contents';
   @property() font = '';
   @property() width = '';
   @property() height = '';
@@ -30,7 +31,7 @@ export default class ZnStyle extends ZincElement {
   connectedCallback() {
     super.connectedCallback();
 
-    let display = 'contents';
+    let display = this.display || 'contents';
 
     if (this.color === '') {
       if (this.error) {
@@ -165,6 +166,11 @@ export default class ZnStyle extends ZincElement {
       }
     }
 
+    if (this.display) {
+      // Force attribute display
+      display = this.display
+    }
+
     this.style.display = display;
   }
 

package/src/components/textarea/textarea.component.ts

@@ -43,6 +43,8 @@ export default class ZnTextarea extends ZincElement implements ZincFormControl {
   });
   private readonly hasSlotController = new HasSlotController(this, 'help-text', 'label');
   private resizeObserver: ResizeObserver;
+  /** Ensures we only attempt to derive the initial value from light DOM content once */
+  private _didInitFromContent = false;
 
   @query('.form-control-input') formControl: HTMLElement;
   @query('.textarea__control') input: HTMLTextAreaElement;
@@ -94,6 +96,8 @@ export default class ZnTextarea extends ZincElement implements ZincFormControl {
    */
   @property({reflect: true}) form = '';
 
+  @property({type: Boolean, reflect: true}) flush = false;
+
   /** Makes the textarea a required field. */
   @property({type: Boolean, reflect: true}) required = false;
 
@@ -155,6 +159,34 @@ export default class ZnTextarea extends ZincElement implements ZincFormControl {
 
   connectedCallback() {
     super.connectedCallback();
+    // Initialize the value from the element's light DOM text content when no value attribute/property is set.
+    // This allows usage like: <zn-textarea>Initial content</zn-textarea>
+    if (!this._didInitFromContent) {
+      this._didInitFromContent = true;
+
+      const hasValueAttribute = this.hasAttribute('value');
+      const hasProgrammaticValue = typeof this.value === 'string' && this.value.length > 0;
+
+      if (!hasValueAttribute && !hasProgrammaticValue) {
+        // Collect only top-level text nodes to avoid pulling in slotted element text (e.g., label/help-text)
+        const textNodes = Array.from(this.childNodes).filter(n => n.nodeType === Node.TEXT_NODE);
+        const raw = textNodes.map(n => n.textContent ?? '').join('');
+        const content = raw.replace(/\r\n/g, '\n').trim();
+
+        if (content.length > 0) {
+          this.value = content;
+          this.defaultValue = content;
+          // Remove the consumed text nodes to prevent stray light DOM text
+          textNodes.forEach(n => {
+            // Only remove nodes that actually contributed non-whitespace content
+            if ((n.textContent ?? '').trim().length > 0) {
+              n.parentNode?.removeChild(n);
+            }
+          });
+        }
+      }
+    }
+
     this.resizeObserver = new ResizeObserver(() => this.setTextareaHeight());
 
     this.updateComplete.then(() => {
@@ -360,7 +392,10 @@ export default class ZnTextarea extends ZincElement implements ZincFormControl {
             name="context-note">${this.contextNote}</slot></span>`
           : ''}
 
-        <div part="form-control-input" class="form-control-input">
+        <div part="form-control-input" class=${classMap({
+          "form-control-input": true,
+          "form-control-input--flush": this.flush
+        })}>
           <div
             part="base"
             class=${classMap({

package/src/components/textarea/textarea.scss

@@ -121,7 +121,7 @@
 }
 
 .textarea--medium .textarea__control {
-  padding: 0.75em var(--zn-input-spacing-medium);
+  padding: var(--zn-input-spacing-small);
 }
 
 .textarea--large {
@@ -151,7 +151,7 @@
   overflow-y: hidden;
 }
 
-.form-control-input {
+.form-control-input--flush {
   margin: 0 !important;
 }