@kubex/zinc 1.1.28 → 1.1.31

package/src/components/page-builder/modules/page-palette-item/index.ts

@@ -0,0 +1,12 @@
+import ZnPagePaletteItem from './page-palette-item.component';
+
+export * from './page-palette-item.component';
+export default ZnPagePaletteItem;
+
+ZnPagePaletteItem.define('zn-page-palette-item');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'zn-page-palette-item': ZnPagePaletteItem;
+  }
+}

package/src/components/page-builder/modules/page-palette-item/page-palette-item.component.ts

@@ -0,0 +1,71 @@
+import {type CSSResultGroup, html, type PropertyValues, unsafeCSS} from 'lit';
+import {ifDefined} from 'lit/directives/if-defined.js';
+import {property} from 'lit/decorators.js';
+import ZincElement from '../../../../internal/zinc-element';
+import ZnIcon from '../../../icon';
+
+import {PAGE_TYPE_MIME} from '../../page.types';
+
+import styles from './page-palette-item.scss';
+
+/**
+ * @summary A draggable palette entry in `<zn-page-builder>`, representing a registered
+ *   section type. Drag it onto the canvas to add that section. Unlike zn-page-section-card
+ *   (host-wired), this element wires its own drag behaviour so it is draggable standalone.
+ * @documentation https://zinc.style/components/page-palette-item
+ * @status experimental
+ * @since 1.0
+ *
+ * @dependency zn-icon
+ *
+ * @csspart base - The card row.
+ */
+export default class ZnPagePaletteItem extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+
+  static dependencies = {'zn-icon': ZnIcon};
+
+  /** The section type id this item creates when dropped. */
+  @property() type: string;
+  @property() label: string;
+  @property() description: string;
+  @property() icon: string;
+  @property({attribute: 'icon-library'}) iconLibrary: string;
+  @property() color: string;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.draggable = true;
+    this.addEventListener('dragstart', this._onDragStart);
+  }
+
+  disconnectedCallback() {
+    this.removeEventListener('dragstart', this._onDragStart);
+    super.disconnectedCallback();
+  }
+
+  protected updated(changed: PropertyValues) {
+    super.updated(changed);
+    this.style.setProperty('--section-accent', this.color ?? 'rgb(var(--zn-color-primary))');
+  }
+
+  private _onDragStart = (e: DragEvent) => {
+    if (!e.dataTransfer || !this.type) return;
+    e.dataTransfer.setData(PAGE_TYPE_MIME, this.type);
+    e.dataTransfer.effectAllowed = 'copy';
+  };
+
+  render() {
+    return html`
+      <div part="base" class="item">
+        <span class="item__icon">
+          <zn-icon src="${this.icon ?? 'widgets'}" library="${ifDefined(this.iconLibrary)}" size="16"></zn-icon>
+        </span>
+        <span class="item__text">
+          <span class="item__label">${this.label ?? ''}</span>
+          ${this.description ? html`<span class="item__description">${this.description}</span>` : ''}
+        </span>
+      </div>
+    `;
+  }
+}

package/src/components/page-builder/modules/page-palette-item/page-palette-item.scss

@@ -0,0 +1,70 @@
+@use "../../../../wc";
+
+// The card chrome lives on an inner wrapper, not :host — document-level CSS
+// resets (e.g. the docs site's `*` border reset) override :host rules but
+// cannot reach inside the shadow root.
+:host {
+  --section-accent: rgb(var(--zn-color-primary));
+
+  display: block;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+.item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 10px;
+  background: rgb(var(--zn-panel));
+  border: 1px solid rgb(var(--zn-border-color));
+  border-radius: 8px;
+  overflow: hidden;
+  cursor: grab;
+  transition: border-color 0.12s ease, box-shadow 0.12s ease;
+}
+
+.item:hover {
+  border-color: rgb(var(--zn-color-border-active));
+  box-shadow: 0 1px 3px rgba(var(--zn-shadow), 0.4);
+}
+
+:host(:active) .item {
+  cursor: grabbing;
+}
+
+.item__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  width: 28px;
+  height: 28px;
+  border-radius: 6px;
+  background: color-mix(in srgb, var(--section-accent) 15%, transparent);
+  color: var(--section-accent);
+}
+
+.item__text {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.item__label {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 0.8125rem;
+}
+
+.item__description {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 0.75rem;
+  color: rgb(var(--zn-color-muted-text));
+}

package/src/components/page-builder/modules/page-palette-item/page-palette-item.test.ts

@@ -0,0 +1,20 @@
+import '../../../../../dist/zn.min.js';
+import {expect, fixture, html} from '@open-wc/testing';
+import type ZnPagePaletteItem from './page-palette-item.component';
+
+describe('<zn-page-palette-item>', () => {
+  it('should render the label and description', async () => {
+    const el = await fixture<ZnPagePaletteItem>(html`
+      <zn-page-palette-item type="hero" label="Hero" description="Big banner"></zn-page-palette-item>`);
+    expect(el.shadowRoot?.querySelector('.item__label')?.textContent).to.equal('Hero');
+    expect(el.shadowRoot?.querySelector('.item__description')?.textContent).to.equal('Big banner');
+  });
+
+  it('should carry its type in the drag payload', async () => {
+    const el = await fixture<ZnPagePaletteItem>(html`
+      <zn-page-palette-item type="hero" label="Hero"></zn-page-palette-item>`);
+    const dataTransfer = new DataTransfer();
+    el.dispatchEvent(new DragEvent('dragstart', {dataTransfer, bubbles: true, cancelable: true}));
+    expect(dataTransfer.getData('application/x-zn-page-type')).to.equal('hero');
+  });
+});

package/src/components/page-builder/modules/page-section-card/index.ts

@@ -0,0 +1,12 @@
+import ZnPageSectionCard from './page-section-card.component';
+
+export * from './page-section-card.component';
+export default ZnPageSectionCard;
+
+ZnPageSectionCard.define('zn-page-section-card');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'zn-page-section-card': ZnPageSectionCard;
+  }
+}

package/src/components/page-builder/modules/page-section-card/page-section-card.component.ts

@@ -0,0 +1,93 @@
+import {type CSSResultGroup, html, type PropertyValues, unsafeCSS} from 'lit';
+import {ifDefined} from 'lit/directives/if-defined.js';
+import {property} from 'lit/decorators.js';
+import ZincElement from '../../../../internal/zinc-element';
+import ZnButton from '../../../button';
+import ZnIcon from '../../../icon';
+
+import styles from './page-section-card.scss';
+
+/**
+ * @summary A section card on the `<zn-page-builder>` canvas: icon tile, label, one-line
+ *   summary, and hover actions (duplicate / remove). Purely presentational — the builder
+ *   wires up dragging, focus, selection and keyboard handling on the host element.
+ * @documentation https://zinc.style/components/page-section-card
+ * @status experimental
+ * @since 1.0
+ *
+ * @dependency zn-button
+ * @dependency zn-icon
+ *
+ * @event page-card-duplicate - The duplicate action was clicked (internal; not in the typed event map).
+ * @event page-card-remove - The remove action was clicked (internal; not in the typed event map).
+ *
+ * @csspart base - The card row.
+ */
+export default class ZnPageSectionCard extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+
+  static dependencies = {
+    'zn-button': ZnButton,
+    'zn-icon': ZnIcon,
+  };
+
+  @property() label = '';
+  @property() summary = '';
+  @property() icon = '';
+  @property({attribute: 'icon-library'}) iconLibrary: string;
+  @property() color = '';
+  @property({type: Boolean, reflect: true}) selected = false;
+  /** Set when the section's type has no registered template — renders greyed. */
+  @property({type: Boolean, reflect: true}) unknown = false;
+
+  protected updated(changed: PropertyValues) {
+    super.updated(changed);
+    this.style.setProperty('--section-accent', this.color || 'rgb(var(--zn-color-primary))');
+  }
+
+  private _action(e: Event, name: 'page-card-duplicate' | 'page-card-remove') {
+    e.stopPropagation();
+    this.dispatchEvent(new CustomEvent(name, {bubbles: true, composed: true}));
+  }
+
+  // Keep Enter/Space on the action buttons from reaching the host, where the
+  // builder's card keydown handler would preventDefault and suppress the
+  // button's native activation.
+  private _actionKeydown(e: KeyboardEvent) {
+    if (e.key === 'Enter' || e.key === ' ') e.stopPropagation();
+  }
+
+  render() {
+    return html`
+      <div part="base" class="card">
+        <span class="card__icon">
+          <zn-icon src="${this.icon || 'widgets'}" library="${ifDefined(this.iconLibrary)}" size="18"></zn-icon>
+        </span>
+        <span class="card__text">
+          <span class="card__label">${this.label}</span>
+          ${this.summary ? html`<span class="card__summary">${this.summary}</span>` : ''}
+        </span>
+        <span class="card__actions" @keydown="${this._actionKeydown}">
+          <zn-button
+            class="card__action"
+            icon-button="small"
+            plain
+            icon="content_copy"
+            icon-size="14"
+            title="Duplicate section"
+            aria-label="Duplicate section"
+            @click="${(e: Event) => this._action(e, 'page-card-duplicate')}"></zn-button>
+          <zn-button
+            class="card__action"
+            icon-button="small"
+            plain
+            icon="delete"
+            icon-size="14"
+            title="Remove section"
+            aria-label="Remove section"
+            @click="${(e: Event) => this._action(e, 'page-card-remove')}"></zn-button>
+        </span>
+      </div>
+    `;
+  }
+}

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

@@ -0,0 +1,92 @@
+@use "../../../../wc";
+
+:host {
+  --section-accent: rgb(var(--zn-color-primary));
+
+  display: block;
+  width: 100%;
+  max-width: var(--pb-card-width, 560px);
+  margin: 0 auto;
+  cursor: grab;
+  outline: none;
+}
+
+:host(:active) {
+  cursor: grabbing;
+}
+
+.card {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 14px;
+  background: rgb(var(--zn-panel));
+  border: 1px solid rgb(var(--zn-border-color));
+  border-radius: 8px;
+  transition: border-color 0.12s ease, box-shadow 0.12s ease;
+}
+
+:host(:hover) .card,
+:host(:focus-visible) .card {
+  border-color: rgb(var(--zn-color-border-active));
+  box-shadow: 0 1px 3px rgba(var(--zn-shadow), 0.4);
+}
+
+:host([selected]) .card {
+  border-color: var(--section-accent);
+  box-shadow: 0 0 0 1px var(--section-accent);
+}
+
+:host([unknown]) .card {
+  opacity: 0.6;
+  border-style: dashed;
+}
+
+.card__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  width: 34px;
+  height: 34px;
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--section-accent) 15%, transparent);
+  color: var(--section-accent);
+}
+
+.card__text {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.card__label {
+  font-weight: 600;
+  font-size: 13px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.card__summary {
+  font-size: 12px;
+  opacity: 0.7;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+// Space is always reserved (visibility, not display) so the card never
+// changes size or shifts its text when the actions appear on hover.
+.card__actions {
+  display: flex;
+  gap: 4px;
+  visibility: hidden;
+}
+
+:host(:hover) .card__actions,
+:host(:focus-within) .card__actions,
+:host([selected]) .card__actions {
+  visibility: visible;
+}

package/src/components/page-builder/modules/page-section-card/page-section-card.test.ts

@@ -0,0 +1,50 @@
+import '../../../../../dist/zn.min.js';
+import {expect, fixture, html} from '@open-wc/testing';
+import type ZnPageSectionCard from './page-section-card.component';
+
+describe('<zn-page-section-card>', () => {
+  it('should render the label and summary', async () => {
+    const el = await fixture<ZnPageSectionCard>(html`
+      <zn-page-section-card label="Hero" summary="Big banner"></zn-page-section-card>`);
+    expect(el.shadowRoot?.querySelector('.card__label')?.textContent).to.equal('Hero');
+    expect(el.shadowRoot?.querySelector('.card__summary')?.textContent).to.equal('Big banner');
+  });
+
+  it('should dispatch action events without triggering selection clicks', async () => {
+    const el = await fixture<ZnPageSectionCard>(html`
+      <zn-page-section-card label="Hero"></zn-page-section-card>`);
+    const fired: string[] = [];
+    el.addEventListener('page-card-duplicate', () => fired.push('duplicate'));
+    el.addEventListener('page-card-remove', () => fired.push('remove'));
+    el.addEventListener('click', () => fired.push('click'));
+
+    // Real MouseEvents, not .click() — zn-button overrides the native click()
+    // method with internal handling that dispatches no event.
+    const buttons = el.shadowRoot!.querySelectorAll('zn-button.card__action');
+    const click = () => new MouseEvent('click', {bubbles: true, composed: true, cancelable: true});
+    buttons[0].dispatchEvent(click());
+    buttons[1].dispatchEvent(click());
+
+    expect(fired).to.deep.equal(['duplicate', 'remove']); // stopPropagation keeps click out
+  });
+
+  it('should keep Enter/Space on action buttons from reaching the host', async () => {
+    const el = await fixture<ZnPageSectionCard>(html`
+      <zn-page-section-card label="Hero"></zn-page-section-card>`);
+    let hostSawKeydown = false;
+    el.addEventListener('keydown', () => (hostSawKeydown = true));
+
+    const button = el.shadowRoot!.querySelector<HTMLButtonElement>('.card__action')!;
+    button.dispatchEvent(new KeyboardEvent('keydown', {key: 'Enter', bubbles: true, composed: true, cancelable: true}));
+    button.dispatchEvent(new KeyboardEvent('keydown', {key: ' ', bubbles: true, composed: true, cancelable: true}));
+
+    expect(hostSawKeydown, 'host keydown suppressed for button activation keys').to.be.false;
+  });
+
+  it('should reflect selected and unknown states', async () => {
+    const el = await fixture<ZnPageSectionCard>(html`
+      <zn-page-section-card label="Hero" selected unknown></zn-page-section-card>`);
+    expect(el.hasAttribute('selected')).to.be.true;
+    expect(el.hasAttribute('unknown')).to.be.true;
+  });
+});