@kubex/zinc 1.1.84 → 1.1.86

package/package.json

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

package/src/components/flow-builder/flow-builder.scss

@@ -141,6 +141,12 @@
   // rather than the navbar's default body colour.
   --zn-active-nav-background: var(--zn-panel);
 
+  // Themes with a glass page tab bar (e.g. Aura) frost inactive tabs on every
+  // navbar under a zn-page — over the panel the translucent white just reads
+  // as white. Pin the standard tab tint instead.
+  --navbar-page-inactive-tab-background: rgb(var(--zn-color-tab));
+  --navbar-page-inactive-tab-filter: none;
+
   border-right: 1px solid rgb(var(--zn-border-color));
 
   // The registry-driven steps panel fills the column below the title block.

package/src/components/preview-frame/preview-frame.component.ts

@@ -62,6 +62,11 @@ export default class ZnPreviewFrame extends ZincElement {
    * refresh the preview. These are never intercepted: the shell submits them
    * (so its own response handling — alerts, refreshes — runs as normal) and the
    * preview re-fetches its config once the shell reports the save complete.
+   * Matched by delegation on the shell's bubbled `complete` event rather than
+   * by attaching to the forms themselves, so a save anywhere on the page
+   * refreshes the preview — including forms in a different DOM root, e.g. a
+   * page-level form saved while the preview sits inside a tab panel's shadow
+   * root (a page's Template select lives on one tab, its preview on another).
    * Set empty to disable.
    */
   @property({attribute: 'refresh-on'}) refreshOn = 'form';
@@ -141,8 +146,13 @@ export default class ZnPreviewFrame extends ZincElement {
   private _contentObserver: ResizeObserver | undefined;
 
   private readonly _watchedForms = new Set<HTMLFormElement>();
-  private readonly _refreshForms = new Set<HTMLFormElement>();
   private readonly _debounceTimers = new Map<HTMLFormElement, number>();
+  // 'complete' delegation targets: the document always, plus the component's
+  // own shadow root when it has one (a non-composed event never reaches the
+  // document). A composed event inside the shadow root hits both, so the
+  // handler dedupes by event object.
+  private _shellSaveRoots: EventTarget[] = [];
+  private _lastShellSave: Event | undefined;
 
   // Forms are siblings in light DOM and get replaced when other content
   // re-renders; re-resolve them whenever the surrounding DOM changes.
@@ -158,6 +168,8 @@ export default class ZnPreviewFrame extends ZincElement {
     window.addEventListener('message', this._onMessage);
     this._attachForms();
     const root = this.getRootNode();
+    this._shellSaveRoots = root instanceof ShadowRoot ? [document, root] : [document];
+    this._shellSaveRoots.forEach(target => target.addEventListener('complete', this._onShellSave));
     if (root instanceof Document) {
       this._formObserver.observe(root.body);
     } else if (root instanceof ShadowRoot) {
@@ -178,8 +190,8 @@ export default class ZnPreviewFrame extends ZincElement {
     this._contentObserver = undefined;
     this._watchedForms.forEach(form => this._detachForm(form));
     this._watchedForms.clear();
-    this._refreshForms.forEach(form => form.removeEventListener('complete', this._onShellSave));
-    this._refreshForms.clear();
+    this._shellSaveRoots.forEach(target => target.removeEventListener('complete', this._onShellSave));
+    this._shellSaveRoots = [];
   }
 
   private readonly _onMessage = (e: MessageEvent) => {
@@ -315,30 +327,18 @@ export default class ZnPreviewFrame extends ZincElement {
       form.addEventListener('zn-input', this._onChange);
       form.addEventListener('change', this._onChange);
     });
-
-    // Shell-saved forms: the shell fires 'complete' on the form it submitted.
-    const refreshMatched = new Set<HTMLFormElement>();
-    if (this.refreshOn) {
-      root.querySelectorAll(this.refreshOn).forEach(node => {
-        if (node instanceof HTMLFormElement && !matched.has(node)) refreshMatched.add(node);
-      });
-    }
-
-    this._refreshForms.forEach(form => {
-      if (!refreshMatched.has(form)) {
-        form.removeEventListener('complete', this._onShellSave);
-        this._refreshForms.delete(form);
-      }
-    });
-
-    refreshMatched.forEach(form => {
-      if (this._refreshForms.has(form)) return;
-      this._refreshForms.add(form);
-      form.addEventListener('complete', this._onShellSave);
-    });
   }
 
-  private readonly _onShellSave = () => {
+  // Shell-saved forms: the shell fires a bubbling 'complete' on the form it
+  // submitted. composedPath()[0] recovers the form when the event was
+  // retargeted crossing a shadow boundary on its way to the document.
+  private readonly _onShellSave = (e: Event) => {
+    if (e === this._lastShellSave) return;
+    this._lastShellSave = e;
+    if (!this.refreshOn) return;
+    const origin = e.composedPath()[0];
+    if (!(origin instanceof HTMLFormElement) || !origin.matches(this.refreshOn)) return;
+    if (this._watchedForms.has(origin)) return; // auto-saved forms refresh via _save
     void this._sendConfig();
   };
 

package/src/components/preview-frame/preview-frame.test.ts

@@ -248,6 +248,54 @@ describe('<zn-preview-frame>', () => {
     expect(posted[0]['type']).to.equal('hp-preview:config');
   });
 
+  // A uri tab panel puts the preview in the tabs component's shadow root while
+  // page-level forms (e.g. the page's Template select) stay in the document —
+  // a save out there must still refresh the preview.
+  it('refreshes on a shell save of a form outside the component\'s own root', async () => {
+    const wrapper = await fixture(html`
+      <div>
+        <form action="/save" method="post"><input name="template" value="flow"></form>
+        <div id="host"></div>
+      </div>`);
+
+    const shadow = wrapper.querySelector('#host')!.attachShadow({mode: 'open'});
+    const el = document.createElement('zn-preview-frame');
+    el.setAttribute('src', 'about:blank');
+    el.setAttribute('frame-origin', 'https://site.example');
+    el.setAttribute('data-uri', '/payload');
+    shadow.appendChild(el);
+    await (el as HTMLElement & {updateComplete: Promise<boolean>}).updateComplete;
+
+    wrapper.querySelector('form')!.dispatchEvent(
+      new CustomEvent('complete', {bubbles: true, detail: {}}));
+
+    await waitUntil(() => fetchCalls.length === 1);
+    expect(fetchCalls[0].uri).to.equal('/payload');
+  });
+
+  it('refreshes once for a composed complete event inside its own shadow root', async () => {
+    const wrapper = await fixture(html`<div><div id="host"></div></div>`);
+
+    const shadow = wrapper.querySelector('#host')!.attachShadow({mode: 'open'});
+    const form = document.createElement('form');
+    form.setAttribute('action', '/save');
+    shadow.appendChild(form);
+    const el = document.createElement('zn-preview-frame');
+    el.setAttribute('src', 'about:blank');
+    el.setAttribute('frame-origin', 'https://site.example');
+    el.setAttribute('data-uri', '/payload');
+    shadow.appendChild(el);
+    await (el as HTMLElement & {updateComplete: Promise<boolean>}).updateComplete;
+
+    // the shell fires composed events, so this reaches both the shadow root
+    // and the document — it must trigger a single refresh
+    form.dispatchEvent(new CustomEvent('complete', {bubbles: true, composed: true, detail: {}}));
+
+    await waitUntil(() => fetchCalls.length === 1);
+    await new Promise(resolve => setTimeout(resolve, 50));
+    expect(fetchCalls.length).to.equal(1);
+  });
+
   it('does not intercept the submit of a refresh-on form', async () => {
     const wrapper = await fixture(html`
       <div>

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

@@ -5,6 +5,7 @@ import { MutationController } from '@lit-labs/observers/mutation-controller.js';
 import { property, query, queryAll, state } from 'lit/decorators.js';
 import ZincElement from '../../internal/zinc-element';
 import ZnButton from '../button';
+import ZnButtonGroup from '../button-group';
 import ZnCollapsible from '../collapsible';
 import ZnIcon from '../icon';
 import ZnNavbar from '../navbar';
@@ -84,6 +85,7 @@ interface DerivedStructure {
  * @dependency zn-preview-frame
  * @dependency zn-icon
  * @dependency zn-button
+ * @dependency zn-button-group
  * @dependency zn-tabs
  * @dependency zn-navbar
  * @dependency zn-select
@@ -135,6 +137,7 @@ export default class ZnThemeEditor extends ZincElement {
     'zn-preview-frame': ZnPreviewFrame,
     'zn-icon': ZnIcon,
     'zn-button': ZnButton,
+    'zn-button-group': ZnButtonGroup,
     'zn-tabs': ZnTabs,
     'zn-navbar': ZnNavbar,
     'zn-select': ZnSelect,
@@ -822,13 +825,14 @@ export default class ZnThemeEditor extends ZincElement {
           <div class="editor__controls-inner">
             <div part="controls-header" class="editor__controls-header">
               ${this.controlsCaption ? html`<span class="editor__caption">${this.controlsCaption}</span>` : nothing}
-              <button type="button"
-                      class="editor__mode"
-                      data-mode-toggle
-                      aria-label="${this.mode === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}"
-                      @click="${this._toggleMode}">
-                <zn-icon src="${this.mode === 'dark' ? 'sun' : 'moon'}" library="lucide" size="16"></zn-icon>
-              </button>
+              <zn-button class="editor__mode"
+                         icon-button="small"
+                         icon-size="20"
+                         icon="${this.mode === 'dark' ? 'sun@lu' : 'moon@lu'}"
+                         data-mode-toggle
+                         tooltip="${this.mode === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}"
+                         aria-label="${this.mode === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}"
+                         @click="${this._toggleMode}"></zn-button>
             </div>
             <div class="editor__controls-body">
               <div
@@ -870,17 +874,17 @@ export default class ZnThemeEditor extends ZincElement {
           <div part="toolbar" class="editor__toolbar">
             ${this.previewCaption ? html`<span class="editor__caption">${this.previewCaption}</span>` : nothing}
             <div class="editor__toolbar-actions">
-              <div class="editor__devices" role="group" aria-label="Preview width">
+              <zn-button-group class="editor__devices" aria-label="Preview width">
                 ${DEVICES.map(d => html`
-                  <button type="button"
-                          class="editor__device"
-                          data-device="${d.id}"
-                          aria-label="${d.label}"
-                          aria-pressed="${this.device === d.id ? 'true' : 'false'}"
-                          @click="${() => this._setDevice(d.id)}">
-                    <zn-icon src="${d.icon}" library="lucide" size="16"></zn-icon>
-                  </button>`)}
-              </div>
+                  <zn-button class="editor__device"
+                             icon-button="small"
+                             icon-size="20"
+                             icon="${d.icon}@lu"
+                             data-device="${d.id}"
+                             aria-label="${d.label}"
+                             aria-pressed="${this.device === d.id ? 'true' : 'false'}"
+                             @click="${() => this._setDevice(d.id)}"></zn-button>`)}
+              </zn-button-group>
               ${this._sourcesSafe().length > 0 ? html`
                 <zn-select
                   class="editor__sources"

package/src/components/theme-editor/theme-editor.scss

@@ -70,6 +70,12 @@
   // rather than the navbar's default body colour (flow-builder pattern).
   --zn-active-nav-background: var(--zn-panel);
 
+  // Themes with a glass page tab bar (e.g. Aura) frost inactive tabs on every
+  // navbar under a zn-page — over the editor's opaque panel the translucent
+  // white just reads as white. Pin the standard tab tint instead.
+  --navbar-page-inactive-tab-background: rgb(var(--zn-color-tab));
+  --navbar-page-inactive-tab-filter: none;
+
   position: relative;
   display: flex;
   flex-direction: column;
@@ -235,44 +241,21 @@
   }
 }
 
-.editor__devices {
-  display: flex;
-  border: 1px solid rgb(var(--zn-border-color));
-  border-radius: 4px;
-  overflow: hidden;
-}
-
-.editor__device,
-.editor__mode {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 30px;
-  height: 28px;
-  padding: 0;
-  border: 0;
-  background: transparent;
-  color: rgb(var(--zn-text));
-  cursor: pointer;
-}
-
-.editor__device + .editor__device {
-  border-left: 1px solid rgb(var(--zn-border-color));
-}
-
-.editor__device:hover,
-.editor__mode:hover {
-  background: rgba(var(--zn-border-color), 0.5);
-}
-
+// The device switcher is zn-button[icon-button="small"]s joined into a
+// segmented control by zn-button-group; only the active fill is styled here.
 .editor__device[aria-pressed="true"] {
-  background: rgb(var(--zn-primary));
-  color: white;
+  // The button's shadow border-color is !important, so it can only be
+  // overridden through its own custom property.
+  --zn-button-border-color: rgb(var(--zn-primary));
+
+  // !important so the fill also beats the button's shadow hover background.
+  &::part(base) {
+    background: rgb(var(--zn-primary)) !important;
+    color: white !important;
+  }
 }
 
 .editor__mode {
-  border: 1px solid rgb(var(--zn-border-color));
-  border-radius: 4px;
   // Sole occupant of .editor__controls-header's right side, beside the caption.
   margin-left: auto;
 }