@kubex/zinc 1.1.109 → 1.1.111

package/package.json

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

package/src/components/page/page.scss

@@ -406,3 +406,27 @@ zn-navbar {
 :host .page__tabs #content.page__content {
   padding: 0 var(--zn-gutter, 0);
 }
+
+// On narrow pages the breadcrumb is supporting context, not a second title.
+// Stack it above the current page caption and reduce its visual weight instead
+// of forcing both labels and their separator into the same cramped row.
+@container (max-width: 600px) {
+  .header--has-breadcrumb {
+    .header__caption {
+      align-items: flex-start;
+      flex-direction: column;
+      gap: var(--zn-spacing-3x-small);
+    }
+
+    .breadcrumb {
+      color: rgb(var(--zn-text-muted));
+      font-size: var(--zn-font-size-small);
+      font-weight: var(--zn-font-weight-normal);
+      line-height: var(--zn-line-height-dense);
+    }
+
+    .breadcrumb__separator {
+      display: none;
+    }
+  }
+}

package/src/components/popup/popup.component.ts

@@ -268,6 +268,7 @@ export default class ZnPopup extends ZincElement {
     if (!this.anchorEl) {
       return;
     }
+    this.cleanup?.();
     this.cleanup = autoUpdate(this.anchorEl, this.popup, () => {
       this.reposition();
     });
@@ -406,7 +407,9 @@ export default class ZnPopup extends ZincElement {
 
       if (!this.popup?.isConnected) return;
 
-      this.popup.showPopover();
+      if (!this.popup.matches(':popover-open')) {
+        this.popup.showPopover();
+      }
 
       if (this.arrow) {
         const arrowX = middlewareData.arrow!.x;
@@ -537,7 +540,7 @@ export default class ZnPopup extends ZincElement {
       <div
         id="popup"
         part="popup"
-        popover
+        popover="manual"
         class="${classMap({
           popup: true,
           'popup--active': this.active,

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

@@ -1,5 +1,5 @@
 import '../../../dist/zn.min.js';
-import {expect, fixture, html} from '@open-wc/testing';
+import {expect, fixture, html, waitUntil} from '@open-wc/testing';
 import type ZnOption from '../option/option.component';
 import type ZnSelect from './select.component';
 
@@ -824,4 +824,44 @@ describe('<zn-select>', () => {
       expect(getComputedStyle(addRow).fontSize).to.equal('11px');
     });
   });
+
+  it('does not flicker the open listbox when a second select is opened', async () => {
+    const wrapper = await fixture(html`
+      <div>
+        <zn-select id="first">
+          <zn-option value="apple">Apple</zn-option>
+          <zn-option value="banana">Banana</zn-option>
+        </zn-select>
+        <zn-select id="second">
+          <zn-option value="cherry">Cherry</zn-option>
+          <zn-option value="date">Date</zn-option>
+        </zn-select>
+      </div>
+    `);
+
+    const first = wrapper.querySelector<ZnSelect>('#first')!;
+    const second = wrapper.querySelector<ZnSelect>('#second')!;
+    await Promise.all([first.updateComplete, second.updateComplete]);
+
+    const popoverOf = (el: ZnSelect) =>
+      el.shadowRoot!.querySelector('zn-popup')!.shadowRoot!.querySelector<HTMLElement>('#popup')!;
+
+    const states: string[] = [];
+    popoverOf(first).addEventListener('beforetoggle', (event: Event) =>
+      states.push((event as ToggleEvent).newState));
+
+    await first.show();
+    states.length = 0;
+
+    // Mimic a click on the second select: the document mousedown closes the first, the combobox
+    // mousedown opens the second
+    document.dispatchEvent(new MouseEvent('mousedown', {bubbles: true, composed: true}));
+    second.shadowRoot!.querySelector('.select__combobox')!
+      .dispatchEvent(new MouseEvent('mousedown', {bubbles: true, composed: true}));
+    await second.updateComplete;
+    await waitUntil(() => !first.open && states.includes('closed'));
+
+    expect(states).to.deep.equal(['closed']);
+    expect(popoverOf(second).matches(':popover-open')).to.be.true;
+  });
 });

package/src/components/tabs/tabs.component.ts

@@ -413,14 +413,20 @@ export default class ZnTabs extends ZincElement {
   _handleClick(event: PointerEvent) {
     // ts-ignore
     const target = (event.relatedTarget ?? event.target) as HTMLElement;
-    if (target) {
-      if ('startViewTransition' in document) {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        (document as any).startViewTransition(() => this.clickTab(target, event.altKey, true));
-      } else {
-        this.clickTab(target, event.altKey, true)
-      }
+    if (!target) {
+      return;
     }
+
+    if (!('startViewTransition' in document)) {
+      this.clickTab(target, event.altKey, true);
+      return;
+    }
+
+    const transition = document.startViewTransition(() => this.clickTab(target, event.altKey, true));
+
+    void transition.ready.catch(() => undefined);
+    void transition.finished.catch(() => undefined);
+    void transition.updateCallbackDone.catch(() => undefined);
   }
 
   fetchUriTab(target: HTMLElement) {