@kubex/zinc 1.1.102 → 1.1.103

package/src/components/tile/tile.component.ts

@@ -61,10 +61,21 @@ export default class ZnTile extends ZincElement {
   }
 
   private _handleActionsClick(e: MouseEvent) {
-    if (this._isLink()) {
-      e.preventDefault();
-      e.stopPropagation();
+    if (!this._isLink()) return;
+
+    // Let Rubix's delegated pagelet handler see an action's own link. For controls without
+    // navigation metadata, stop before the handler can walk up to the tile host's href.
+    for (const target of e.composedPath()) {
+      if (target === this) break;
+      if (!(target instanceof Element)) continue;
+
+      const href = target.getAttribute('href');
+      if (target.hasAttribute('data-uri') || (href !== null && href !== '' && !href.startsWith('#'))) {
+        return;
+      }
     }
+
+    e.stopPropagation();
   }
 
   render() {
@@ -77,11 +88,7 @@ export default class ZnTile extends ZincElement {
     const hasImage = this.hasSlotController.test('image');
 
     return html`
-      <${tag}
-        href="${ifDefined(this.href)}"
-        data-uri="${ifDefined(this.dataUri)}"
-        gaid="${ifDefined(this.gaid)}"
-        data-target="${ifDefined(this.dataTarget)}"
+      <div
         class="${classMap({
           tile: true,
           'tile--flush': this.flush,
@@ -96,11 +103,15 @@ export default class ZnTile extends ZincElement {
           'tile--has-actions': hasActions,
           'tile--has-image': hasImage,
         })}">
-        ${!hasCaption && !hasDescription && !hasProperties && !hasActions ? html`
-          <slot></slot>
-        ` : html`
-          <div
-            class="tile__link">
+        <${tag}
+          href="${ifDefined(this.href)}"
+          data-uri="${ifDefined(this.dataUri)}"
+          gaid="${ifDefined(this.gaid)}"
+          data-target="${ifDefined(this.dataTarget)}"
+          class="tile__link">
+          ${!hasCaption && !hasDescription && !hasProperties && !hasActions ? html`
+            <slot></slot>
+          ` : html`
             <div class="tile__left">
               ${hasImage ? html`
                 <slot name="image" part="image" class="tile__image"></slot>` : html``}
@@ -113,15 +124,17 @@ export default class ZnTile extends ZincElement {
                     ${this.description}</p>` : html`<slot name="description" class="tile__description"></slot>`}
               </div>
             </div>
-          </div>
-
-          <div class="tile__right">
             ${hasProperties ? html`
               <slot name="properties" part="properties" class="tile__properties"></slot>` : ''}
-            ${hasActions ? html`
+          `}
+        </${tag}>
+
+        ${hasActions ? html`
+          <div class="tile__right">
+            <!-- Kept outside the link so slotted controls retain their default behaviour. -->
               <slot name="actions" part="actions" class="tile__actions"
-                    @click=${this._handleActionsClick}></slot>` : ''}
-          </div>`}
-      </${tag}>`;
+                    @click=${this._handleActionsClick}></slot>
+          </div>` : ''}
+      </div>`;
   }
 }

package/src/components/tile/tile.scss

@@ -69,6 +69,8 @@ a {
 .tile__link {
   display: flex;
   align-items: center;
+  justify-content: space-between;
+  flex: 1;
   column-gap: var(--zn-spacing-small);
   min-width: 0;
 }

package/src/components/tile/tile.test.ts

@@ -1,10 +1,71 @@
 import '../../../dist/zn.min.js';
-import { expect, fixture, html } from '@open-wc/testing';
+import {expect, fixture, html} from '@open-wc/testing';
+import type ZnTile from './tile.component';
 
-describe('<zn-list-tile>', () => {
+describe('<zn-tile>', () => {
   it('should render a component', async () => {
-    const el = await fixture(html` <zn-list-tile></zn-list-tile> `);
+    const el = await fixture(html`<zn-tile></zn-tile>`);
 
     expect(el).to.exist;
   });
+
+  it('should render its content as a link when href is set', async () => {
+    const el = await fixture<ZnTile>(html`
+      <zn-tile href="/users/leslie" caption="Leslie Alexander"></zn-tile>`);
+
+    const link = el.shadowRoot!.querySelector<HTMLAnchorElement>('a.tile__link')!;
+    expect(link).to.exist;
+    expect(link.getAttribute('href')).to.equal('/users/leslie');
+  });
+
+  it('should render actions outside the link', async () => {
+    const el = await fixture<ZnTile>(html`
+      <zn-tile href="/users/leslie" caption="Leslie Alexander">
+        <zn-button slot="actions">Edit</zn-button>
+      </zn-tile>`);
+
+    const link = el.shadowRoot!.querySelector<HTMLAnchorElement>('a.tile__link')!;
+    const actions = el.shadowRoot!.querySelector<HTMLSlotElement>('slot[name="actions"]')!;
+    expect(link.contains(actions)).to.be.false;
+  });
+
+  it('should not cancel clicks from a slotted action', async () => {
+    const el = await fixture<ZnTile>(html`
+      <zn-tile href="/users/leslie" caption="Leslie Alexander">
+        <zn-button slot="actions">Edit</zn-button>
+      </zn-tile>`);
+
+    const action = el.querySelector<HTMLElement>('zn-button')!;
+    const button = action.shadowRoot!.querySelector<HTMLButtonElement>('button')!;
+    let click: MouseEvent | undefined;
+    action.addEventListener('click', event => (click = event as MouseEvent));
+
+    button.click();
+
+    expect(click).to.exist;
+    expect(click!.defaultPrevented).to.be.false;
+  });
+
+  it('should let a linked action reach delegated navigation handlers', async () => {
+    const el = await fixture<ZnTile>(html`
+      <zn-tile href="/users/leslie" caption="Leslie Alexander">
+        <zn-button slot="actions" href="/users/leslie/edit" data-target="modal">Edit</zn-button>
+      </zn-tile>`);
+
+    const action = el.querySelector<HTMLElement>('zn-button')!;
+    const buttonLink = action.shadowRoot!.querySelector<HTMLAnchorElement>('a')!;
+    let selectedLink: Element | undefined;
+    const handleDocumentClick = (event: MouseEvent) => {
+      selectedLink = event.composedPath().find(target =>
+        target instanceof Element && target.matches('[href]')) as Element | undefined;
+      event.preventDefault();
+    };
+    document.addEventListener('click', handleDocumentClick, {once: true});
+
+    buttonLink.click();
+
+    expect(selectedLink).to.equal(buttonLink);
+    expect(selectedLink!.getAttribute('href')).to.equal('/users/leslie/edit');
+    expect(selectedLink!.getAttribute('data-target')).to.equal('modal');
+  });
 });

package/src/components/toggle/toggle.component.ts

@@ -8,6 +8,7 @@ import { live } from "lit/directives/live.js";
 import { property, query, state } from 'lit/decorators.js';
 import ZincElement, { type ZincFormControl } from '../../internal/zinc-element';
 
+import formControlStyles from '../../form-control.scss';
 import styles from './toggle.scss';
 
 /**
@@ -32,7 +33,7 @@ import styles from './toggle.scss';
  * @cssproperty --zn-toggle-margin - The margin around the toggle switch. Defaults to `8px 0`.
  */
 export default class ZnToggle extends ZincElement implements ZincFormControl {
-  static styles: CSSResultGroup = unsafeCSS(styles);
+  static styles: CSSResultGroup = [unsafeCSS(formControlStyles), unsafeCSS(styles)];
 
   private readonly hasSlotController = new HasSlotController(this, 'help-text', 'description');
 

package/src/components/toggle/toggle.scss

@@ -1,5 +1,4 @@
 @use "../../wc";
-@use "../../form-control";
 
 :host {
   --zn-toggle-margin: 8px 0;

package/src/components/translations/translations.component.ts

@@ -19,10 +19,11 @@ import type {PropertyValues} from 'lit';
 import type {ZincFormControl} from '../../internal/zinc-element';
 import type {ZnMenuSelectEvent} from '../../events/zn-menu-select';
 
+import formControlStyles from '../../form-control.scss';
 import styles from './translations.scss';
 
 export default class ZnTranslations extends ZincElement implements ZincFormControl {
-  static styles = unsafeCSS(styles);
+  static styles = [unsafeCSS(formControlStyles), unsafeCSS(styles)];
   static dependencies = {
     'zn-button': ZnButton,
     'zn-button-group': ZnButtonGroup,

package/src/components/translations/translations.scss

@@ -1,4 +1,3 @@
-@use "../../form-control";
 
 :host {
   display: block;

package/src/internal/theme.ts

@@ -1,13 +1,28 @@
 import {signal, SignalWatcher} from '@lit-labs/signals';
 
+// Theming has two independent dimensions:
+//   `t` — the theme family (base, aura, ...), carrying the identity/palette.
+//   `m` — the rendered mode ('light' | 'dark') the family is currently drawn in.
+// The host shell owns both attributes on <html>; components mirror them so CSS
+// selectors like `[m="dark"]` and `:host-context([t="aura"])` keep working.
+
+function readRootAttribute(name: string, fallback: string): string {
+  if (typeof document === 'undefined') return fallback;
+  return document.documentElement.getAttribute(name)
+    || document.body?.getAttribute(name)
+    || fallback;
+}
+
 function getDefaultTheme(): string {
-  if (typeof document === 'undefined') return 'light';
-  return document.documentElement.getAttribute('t')
-    || document.body.getAttribute('t')
-    || 'light';
+  return readRootAttribute('t', 'light');
+}
+
+function getDefaultMode(): string {
+  return readRootAttribute('m', 'light');
 }
 
 export const themeSignal = signal<string>(getDefaultTheme());
+export const modeSignal = signal<string>(getDefaultMode());
 
 let listenerInstalled = false;
 
@@ -17,18 +32,28 @@ export function installThemeListener(): void {
 
   window.addEventListener('theme-change', (e: Event) => {
     const detail: unknown = (e as CustomEvent<unknown>).detail;
-    let next: string;
+    let theme: string | undefined;
+    let mode: string | undefined;
+
     if (typeof detail === 'string') {
-      next = detail;
-    } else if (detail && typeof detail === 'object' && 'theme' in detail && typeof (detail as {theme: unknown}).theme === 'string') {
-      next = (detail as {theme: string}).theme;
-    } else {
-      next = getDefaultTheme();
+      // Legacy payload: the theme name on its own.
+      theme = detail;
+    } else if (detail && typeof detail === 'object') {
+      const d = detail as {theme?: unknown; mode?: unknown};
+      if (typeof d.theme === 'string') theme = d.theme;
+      if (typeof d.mode === 'string') mode = d.mode;
     }
-    if (next !== themeSignal.get()) themeSignal.set(next);
+
+    // Anything the event did not carry is read back off the document, which the
+    // shell always writes before dispatching.
+    if (theme === undefined) theme = getDefaultTheme();
+    if (mode === undefined) mode = getDefaultMode();
+
+    if (theme !== themeSignal.get()) themeSignal.set(theme);
+    if (mode !== modeSignal.get()) modeSignal.set(mode);
   });
 }
 
 installThemeListener();
 
-export {SignalWatcher};
+export {SignalWatcher};

package/src/internal/zinc-element.ts

@@ -1,6 +1,6 @@
 import {LitElement, type PropertyValues} from "lit";
 import {property} from "lit/decorators.js";
-import {SignalWatcher, themeSignal} from "./theme";
+import {modeSignal, SignalWatcher, themeSignal} from "./theme";
 import type {
   EventTypeDoesNotRequireDetail,
   EventTypeRequiresDetail,
@@ -19,13 +19,15 @@ const ZincElementBase: typeof LitElement & Constructor<SignalWatcherApi> = Signa
 export default class ZincElement extends ZincElementBase {
   @property() dir: string; // LTR or RTL direction
   @property() lang: string; // Language
-  @property({reflect: true}) t: string; // Theme (light or dark)
+  @property({reflect: true}) t: string; // Theme family (base, aura, ...)
+  @property({reflect: true}) m: string; // Rendered mode (light or dark)
 
   protected override willUpdate(changed: PropertyValues): void {
-    // Reading themeSignal here subscribes this component to theme changes
-    // via the SignalWatcher mixin. The reflected `t` attribute keeps existing
-    // CSS selectors like `[t="dark"]` working.
+    // Reading these signals here subscribes this component to theme changes via
+    // the SignalWatcher mixin. The reflected attributes keep CSS selectors like
+    // `[m="dark"]` and `:host-context([t="aura"])` working inside shadow roots.
     this.t = themeSignal.get();
+    this.m = modeSignal.get();
     super.willUpdate(changed);
   }