@kubex/zinc 1.1.97 → 1.1.99

package/src/components/checkbox-group/checkbox-group.component.ts

@@ -34,6 +34,8 @@ import styles from './checkbox-group.scss';
  * @csspart form-control-label - The label's wrapper.
  * @csspart form-control-input - The input's wrapper.
  * @csspart form-control-help-text - The help text's wrapper.
+ *
+ * @cssproperty --zn-checkbox-group-column-width - Minimum column width used by the horizontal contained grid, or the card basis when `wrap` is set.
  */
 export default class ZnCheckboxGroup extends ZincElement implements ZincFormControl {
   static styles: CSSResultGroup = unsafeCSS(styles);
@@ -75,6 +77,15 @@ export default class ZnCheckboxGroup extends ZincElement implements ZincFormCont
   /** The checkbox group's style. Changes the group's style from the default (plain) style to the 'contained' style. This style will be applied to all child checkboxes. */
   @property({type: Boolean, reflect: true}) contained = false;
 
+  /** Squares off the corners of every contained checkbox in the group, which are rounded by default. */
+  @property({type: Boolean, reflect: true}) square = false;
+
+  /**
+   * Lays horizontal contained checkboxes out as a wrapping row instead of an equal-width grid, so each one sizes from
+   * `--zn-checkbox-group-column-width` (set it to `auto` to size from content) and wraps onto a new line when needed.
+   */
+  @property({type: Boolean, reflect: true}) wrap = false;
+
   /**
    * 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
@@ -158,6 +169,10 @@ export default class ZnCheckboxGroup extends ZincElement implements ZincFormCont
         checkbox.size = this.size;
         checkbox.horizontal = this.horizontal;
 
+        if (this.square) {
+          checkbox.square = true;
+        }
+
         // Add class to checkboxes in a Checkbox Group so that we can style them without using :slotted
         checkbox.classList.add('groupedCheckbox');
 

package/src/components/checkbox-group/checkbox-group.scss

@@ -8,8 +8,9 @@
 
 :host([horizontal]) .form-control-input {
   display: flex;
-  column-gap: var(--zn-spacing-2x-large);
   flex-wrap: wrap;
+  column-gap: var(--zn-spacing-2x-large);
+  row-gap: var(--zn-spacing-small);
 }
 
 ::slotted(zn-checkbox[horizontal]) {
@@ -17,15 +18,16 @@
   min-width: 100px;
 }
 
-:host([contained]) .form-control-input {
+/* The label supplies the gap above the options, so a group without one starts flush. */
+:host([contained]) .form-control--has-label .form-control-input {
   margin-top: var(--zn-spacing-medium);
 }
 
 :host([horizontal][contained]) .form-control-input {
-  margin-top: var(--zn-spacing-medium);
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(152px, 1fr));
-  gap: var(--zn-spacing-x-small);
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--zn-checkbox-group-column-width, 152px)), 1fr));
+  align-items: stretch;
+  gap: var(--zn-spacing-small);
 }
 
 ::slotted(zn-checkbox) {
@@ -42,6 +44,22 @@
   height: 100%;
 }
 
+/* `wrap` swaps the equal-width grid for a flex row: cards start from their basis and wrap onto new lines. */
+:host([horizontal][contained][wrap]) .form-control-input {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: stretch;
+  gap: var(--zn-spacing-x-small);
+}
+
+:host([wrap]) ::slotted(zn-checkbox[horizontal][contained]) {
+  flex: 1 1 var(--zn-checkbox-group-column-width, 152px);
+  min-width: 0;
+
+  /* A percentage height would resolve against every line, not the card's own. */
+  height: auto;
+}
+
 
 .form-control {
   position: relative;

package/src/components/checkbox-group/checkbox-group.test.ts

@@ -7,4 +7,19 @@ describe('<zn-checkbox-group>', () => {
 
     expect(el).to.exist;
   });
+
+  it('propagates contained and square to its checkboxs', async () => {
+    const el = await fixture<HTMLElement>(html`
+      <zn-checkbox-group contained square>
+        <zn-checkbox value="one">One</zn-checkbox>
+        <zn-checkbox value="two">Two</zn-checkbox>
+      </zn-checkbox-group>
+    `);
+    await new Promise(resolve => requestAnimationFrame(resolve));
+
+    el.querySelectorAll('zn-checkbox').forEach(child => {
+      expect(child).to.have.attribute('contained');
+      expect(child).to.have.attribute('square');
+    });
+  });
 });

package/src/components/collapsible/collapsible.component.ts

@@ -52,6 +52,10 @@ export default class ZnCollapsible extends ZincElement {
 
   @state() numberOfItems: number = 0;
 
+  @state() private animating: boolean = false;
+
+  private animatingTimer?: ReturnType<typeof setTimeout>;
+
   protected _store: Store;
 
   private readonly hasSlotController = new HasSlotController(this, '[default]', 'header', 'caption', 'label', 'description');
@@ -94,6 +98,11 @@ export default class ZnCollapsible extends ZincElement {
     }
   }
 
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    clearTimeout(this.animatingTimer);
+  }
+
   // this is for handling global toggles
   public handleCaptionToggle = (e: ZnInputEvent) => {
     const toggle = e.target as ZnToggle;
@@ -104,8 +113,38 @@ export default class ZnCollapsible extends ZincElement {
 
   protected updated(changedProperties: PropertyValues) {
     super.updated(changedProperties);
-    if (changedProperties.has('expanded') && this.storeKey) {
-      this._store.set(this.storeKey, this.expanded.toString());
+    if (changedProperties.has('expanded')) {
+      if (changedProperties.get('expanded') !== undefined) {
+        this.startAnimating();
+      }
+
+      if (this.storeKey) {
+        this._store.set(this.storeKey, this.expanded.toString());
+      }
+    }
+  }
+
+  // Content is only clipped while the height transition runs, so expanded
+  // content can overflow the host. The timer covers a transitionend that never
+  // arrives (reduced motion, hidden host).
+  private startAnimating() {
+    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+      return;
+    }
+
+    this.animating = true;
+    clearTimeout(this.animatingTimer);
+    this.animatingTimer = setTimeout(() => (this.animating = false), 600);
+  }
+
+  private stopAnimating() {
+    clearTimeout(this.animatingTimer);
+    this.animating = false;
+  }
+
+  private handleTransitionEnd = (e: TransitionEvent) => {
+    if (e.target === e.currentTarget && e.propertyName === 'grid-template-rows') {
+      this.stopAnimating();
     }
   }
 
@@ -160,8 +199,14 @@ export default class ZnCollapsible extends ZincElement {
               <zn-icon library="material-outlined" src="expand_more" class="expand"></zn-icon>` : ''}
           </div>
         </slot>
-        <div class=${classMap({ 'content': true, 'content--flush': this.flush, })} part="content">
-          <slot @slotchange="${this.requestUpdate}"></slot>
+        <div class=${classMap({
+          'content': true,
+          'content--flush': this.flush,
+          'content--animating': this.animating,
+        })} part="content" @transitionend="${this.handleTransitionEnd}">
+          <div class="content__inner">
+            <slot @slotchange="${this.requestUpdate}"></slot>
+          </div>
         </div>
       </div>`;
   }

package/src/components/collapsible/collapsible.scss

@@ -76,29 +76,48 @@
   }
 }
 
-:host(:not([flush])).content {
-  @include wc.padding();
+// Height animates via grid-template-rows 0fr -> 1fr; the inline padding is
+// constant so the content never reflows (and re-wraps) mid-transition.
+.content {
+  display: grid;
+  grid-template-rows: 0fr;
+  opacity: 0;
+  transition: grid-template-rows var(--zn-transition-medium) cubic-bezier(0.32, 0.72, 0, 1),
+  opacity var(--zn-transition-fast) ease-out;
+
+  &__inner {
+    min-height: 0;
+    padding: 0 var(--zn-spacing-medium) var(--zn-spacing-medium);
+    transform: translateY(-4px);
+    transition: transform var(--zn-transition-medium) cubic-bezier(0.32, 0.72, 0, 1);
+  }
+
+  &--flush &__inner {
+    padding: 0;
+  }
 }
 
-.content {
-  transition: .1s all ease-out;
+// Clipped while collapsed or mid-transition only, so expanded content can still
+// overflow the host (dropdowns, tooltips).
+:host(:not([expanded])) .content,
+.content--animating {
+  overflow: hidden;
 }
 
 :host([expanded]) .content {
-  margin: 0 var(--zn-spacing-medium);
-  padding-bottom: var(--zn-spacing-medium);
+  grid-template-rows: 1fr;
+  opacity: 1;
 
-  &--flush {
-    margin: 0;
-    padding: 0;
+  .content__inner {
+    transform: none;
   }
 }
 
-:host(:not([expanded])) .content {
-  max-height: 0;
-  opacity: 0;
-  overflow: hidden;
-  padding: 0;
+@media (prefers-reduced-motion: reduce) {
+  .content,
+  .content__inner {
+    transition-duration: 0s;
+  }
 }
 
 .expand {

package/src/components/confirm/confirm.component.ts

@@ -1,6 +1,6 @@
 import {classMap} from "lit/directives/class-map.js";
 import {type CSSResultGroup, html, nothing, type PropertyValues, unsafeCSS} from 'lit';
-import {deepQuerySelectorAll} from "../../utilities/query";
+import {deepQuerySelectorAll, idSelector} from "../../utilities/query";
 import {HasSlotController} from "../../internal/slot";
 import {ifDefined} from "lit/directives/if-defined.js";
 import {property, query, state} from 'lit/decorators.js';
@@ -97,7 +97,7 @@ export default class ZnConfirm extends ZincElement {
       const trigger = this.hasSlotController.getSlot('trigger');
       trigger?.addEventListener('click', this.show);
     } else if (this.trigger) {
-      const triggers = deepQuerySelectorAll('#' + this.trigger, this.parentElement as Element, '');
+      const triggers = deepQuerySelectorAll(idSelector(this.trigger), this.parentElement as Element, '');
       triggers.forEach((el: HTMLButtonElement) => {
         el.addEventListener('click', this.show);
       });
@@ -105,7 +105,7 @@ export default class ZnConfirm extends ZincElement {
   }
 
   updateTriggers() {
-    const triggers = deepQuerySelectorAll('#' + this.trigger, this.parentElement as Element, '');
+    const triggers = deepQuerySelectorAll(idSelector(this.trigger), this.parentElement as Element, '');
     triggers.forEach((el: HTMLButtonElement) => {
       // if already has a click listener, remove it
       el.removeEventListener('click', this.show);

package/src/components/confirm/confirm.test.ts

@@ -7,4 +7,19 @@ describe('<zn-confirm-modal>', () => {
 
     expect(el).to.exist;
   });
+
+  it('connects a trigger whose id contains CSS syntax characters', async () => {
+    const id = 'delete-enum-cloud_hosting_&_infrastructure';
+    const el = await fixture<HTMLElement>(html`
+      <div>
+        <button id="${id}">Delete</button>
+        <zn-confirm trigger="${id}" caption="Delete"></zn-confirm>
+      </div>
+    `);
+    const confirm = el.querySelector<HTMLElement & {updateComplete: Promise<void>}>('zn-confirm')!;
+    await confirm.updateComplete;
+
+    // An unescaped `#id` selector throws a SyntaxError here, leaving the component unrendered.
+    expect(confirm.shadowRoot!.querySelector('zn-dialog')).to.exist;
+  });
 });

package/src/components/dialog/dialog.component.ts

@@ -1,6 +1,7 @@
 import {classMap} from "lit/directives/class-map.js";
 import {type CSSResultGroup, html, type PropertyValues, unsafeCSS} from 'lit';
 import {HasSlotController} from "../../internal/slot";
+import {idSelector} from "../../utilities/query";
 import {ifDefined} from "lit/directives/if-defined.js";
 import {property, query} from 'lit/decorators.js';
 import {unlockBodyScrolling} from "../../internal/scroll";
@@ -105,7 +106,7 @@ export default class ZnDialog extends ZincElement {
     this.shadowRoot?.addEventListener('click', this.closeClickHandler);
 
     if (this.trigger) {
-      const trigger = this.parentNode?.querySelector('#' + this.trigger);
+      const trigger = this.parentNode?.querySelector(idSelector(this.trigger));
       if (trigger) {
         trigger.addEventListener('click', () => this.show());
       }
@@ -132,7 +133,7 @@ export default class ZnDialog extends ZincElement {
     this.removeEventListener('click', this.closeClickHandler);
 
     if (this.trigger) {
-      const trigger = this.parentElement?.querySelector('#' + this.trigger);
+      const trigger = this.parentElement?.querySelector(idSelector(this.trigger));
       if (trigger) {
         trigger.removeEventListener('click', () => this.show());
       }

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

@@ -1,5 +1,5 @@
 import {type CSSResultGroup, html, type PropertyValues, unsafeCSS} from 'lit';
-import {deepQuerySelectorAll} from "../../utilities/query";
+import {deepQuerySelectorAll, idSelector} from "../../utilities/query";
 import {FormControlController} from '../../internal/form';
 import {on} from "../../utilities/on";
 import {property, query} from 'lit/decorators.js';
@@ -489,12 +489,13 @@ export default class ZnEditor extends ZincElement implements ZincFormControl {
 
     // Find which element contains the content to insert
     // Priority: currentTarget > selectedTarget > target > composedPath > querySelector
+    const contentSelector = idSelector(contentContainer);
     const contentElement: Element | null =
-      (e.currentTarget instanceof Element && e.currentTarget.closest('#' + contentContainer)) ||
-      (e.selectedTarget instanceof Element && e.selectedTarget.closest('#' + contentContainer)) ||
-      (e.target instanceof Element && e.target.closest('#' + contentContainer)) ||
-      ((e.composedPath()[0] as Element)?.closest('#' + contentContainer)) ||
-      deepQuerySelectorAll(`#${contentContainer}`, document.documentElement, '')[0];
+      (e.currentTarget instanceof Element && e.currentTarget.closest(contentSelector)) ||
+      (e.selectedTarget instanceof Element && e.selectedTarget.closest(contentSelector)) ||
+      (e.target instanceof Element && e.target.closest(contentSelector)) ||
+      ((e.composedPath()[0] as Element)?.closest(contentSelector)) ||
+      deepQuerySelectorAll(contentSelector, document.documentElement, '')[0];
     if (!contentElement) return;
 
     let content = contentElement.textContent;

package/src/components/header/header.scss

@@ -24,7 +24,7 @@
     white-space: nowrap;
     text-overflow: ellipsis;
     display: flex;
-    gap: var(--zn-spacing-x-small);
+    gap: var(--zn-spacing-2x-small);
     align-items: center;
     text-wrap: auto;
   }
@@ -110,6 +110,7 @@
     width: 100%;
     max-width: 100%;
     height: fit-content;
+    min-height: var(--zn-input-height-medium, 36px);
     gap: 10px;
     margin: 0 auto;
     padding: var(--zn-base-gap);
@@ -226,7 +227,6 @@
   slot[name="actions"] {
     justify-content: end;
     flex-wrap: nowrap;
-    height: var(--zn-icon-size, 20px);
   }
 
   slot[name="actions"]::slotted(zn-button-menu) {

package/src/components/icon-picker/icon-picker.component.ts

@@ -131,6 +131,8 @@ export default class ZnIconPicker extends ZincElement implements ZincFormControl
           return (await import('./brand-icons')).brandIcons;
         case 'line':
           return (await import('./line-icons')).lineIcons;
+        case 'lucide':
+          return (await import('./lucide-icons')).lucideIcons;
         default: {
           const lists = await import('./material-icons');
           switch (library) {
@@ -438,6 +440,7 @@ export default class ZnIconPicker extends ZincElement implements ZincFormControl
                       <zn-option value="material-symbols-outlined">Material Symbols Outlined</zn-option>
                       <zn-option value="brands">Brands</zn-option>
                       <zn-option value="line">Line</zn-option>
+                      <zn-option value="lucide">Lucide</zn-option>
                       <zn-option value="gravatar">Gravatar</zn-option>
                       <zn-option value="libravatar">Libravatar</zn-option>
                       <zn-option value="avatar">Avatar</zn-option>