@kubex/zinc 1.1.136 → 1.1.138

package/package.json

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

package/src/components/button-menu/button-menu.scss

@@ -31,6 +31,16 @@
     gap: var(--menu-gap);
     margin: 0;
     max-width: calc(100% - 34px);
+
+    &:empty {
+      display: none;
+    }
+  }
+
+  // Buttons are hoisted into __container, so anything left in the default slot
+  // is non-visual (zn-confirm) and must not claim a flex gap.
+  ::slotted(*) {
+    display: contents;
   }
 
   zn-button {

package/src/components/chip/chip.scss

@@ -1,7 +1,7 @@
 @use "../../wc";
 
 :host {
-  display: inline-block;
+  display: inline-flex;
   vertical-align: middle;
 }
 

package/src/components/page/page.scss

@@ -167,7 +167,7 @@
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
-    gap: 2px;
+    gap: var(--zn-spacing-x-small);
     max-width: 100%;
     min-width: 0;
     min-height: 36px;
@@ -212,6 +212,7 @@
     gap: var(--zn-spacing-2x-small);
     align-items: center;
     text-wrap: auto;
+    min-height: 36px; // Keep in step with the actions row: both bands share a centre line.
   }
 
   &__description {
@@ -257,6 +258,7 @@
   slot[name="actions"] {
     justify-content: end;
     flex-wrap: nowrap;
+    min-height: 36px;
   }
 
   slot[name="actions"]::slotted(zn-button-menu) {

package/src/components/page-builder/modules/page-section-card/page-section-card.scss

@@ -21,6 +21,9 @@
 }
 
 .card {
+  --card-actions-inset: 14px;
+
+  position: relative;
   display: flex;
   align-items: center;
   gap: 12px;
@@ -90,11 +93,21 @@
   opacity: 0.45;
 }
 
-// Space is always reserved (visibility, not display) so the card never
-// changes size or shifts its text when the actions appear on hover.
+:host([locked]) .card {
+  // Clear the always-visible lock: its 14px icon plus the row gap.
+  --card-actions-inset: 40px;
+}
+
+// Overlaid rather than laid out, so the text gets the full card width and never
+// reflows on hover; the gradient pad hides whatever text runs underneath.
 .card__actions {
+  position: absolute;
+  inset: 0 var(--card-actions-inset) 0 auto;
   display: flex;
-  gap: 4px;
+  align-items: center;
+  gap: var(--zn-spacing-2x-small);
+  padding-left: 28px;
+  background: linear-gradient(to right, rgba(var(--zn-panel), 0), rgb(var(--zn-panel)) 28px);
   visibility: hidden;
 }
 

package/src/components/page-builder/page-builder.component.ts

@@ -684,6 +684,9 @@ export default class ZnPageBuilder extends ZincElement {
     const [removed, sections] = this._extract(id);
     if (!removed) return;
     this._pushHistory();
+    // Cards are rendered unkeyed, so the focused action button survives the
+    // re-render as part of whichever section shifts into this slot.
+    this._blurActiveCard();
     // Clear selection for the removed section AND anything inside it.
     if (this._selectedId === id || removed.children?.some(c => c?.id === this._selectedId)) {
       this._select(null);
@@ -702,6 +705,7 @@ export default class ZnPageBuilder extends ZincElement {
       sections.splice(index + 1, 0, copy);
       this._commit({ sections });
       this._select(copy.id);
+      void this._focusCard(copy.id);
       return;
     }
     // A slotted child duplicates into its container's next empty slot, if any.
@@ -719,10 +723,32 @@ export default class ZnPageBuilder extends ZincElement {
       this._pushHistory();
       this._commit({ sections: this._patchSection(s.id, x => ({ ...x, children })) });
       this._select(copy.id);
+      void this._focusCard(copy.id);
       return;
     }
   }
 
+  /**
+   * Hands focus to a card, moving it off the action button that was just used.
+   * Cards render unkeyed, so focus left behind stays with the original card's
+   * element and keeps its hover actions showing after the pointer leaves.
+   */
+  private async _focusCard(id: string) {
+    this._blurActiveCard();
+    await this.updateComplete;
+    this.shadowRoot?.querySelector<HTMLElement>(`zn-page-section-card[data-id="${id}"]`)?.focus();
+  }
+
+  private _blurActiveCard() {
+    const focused = this.shadowRoot?.activeElement;
+    if (!(focused instanceof HTMLElement) || !focused.closest('zn-page-section-card')) return;
+    let active: HTMLElement = focused;
+    // activeElement retargets to the card host; the real focus is the action
+    // button nested in its shadow root, and only that responds to blur().
+    while (active.shadowRoot?.activeElement instanceof HTMLElement) active = active.shadowRoot.activeElement;
+    active.blur();
+  }
+
   /** Moves a section (top-level or slotted) to a top-level position. */
   private _moveSection(id: string, index: number) {
     if (this._isPinned(id)) return;
@@ -993,6 +1019,7 @@ export default class ZnPageBuilder extends ZincElement {
     return html`
       <zn-page-section-card
         class="${extraClass}"
+        data-id="${section.id}"
         draggable="${pinned ? 'false' : 'true'}"
         tabindex="0"
         label="${section.label ?? type?.label ?? section.type}"