@kubex/zinc 1.1.101 → 1.1.103

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

@@ -14,6 +14,7 @@ import ZnOption from '../option';
 import ZnSelect from '../select';
 import type {ZincFormControl} from '../../internal/zinc-element';
 
+import formControlStyles from '../../form-control.scss';
 import styles from './schedule-builder.scss';
 
 /** The seven weekday keys used throughout the schedule. */
@@ -533,7 +534,7 @@ type SlotState = 'closed' | 'open' | 'reduced';
  * @cssproperty --reduced-color - The fill used for hours an exception removes.
  */
 export default class ZnScheduleBuilder extends ZincElement implements ZincFormControl {
-  static styles: CSSResultGroup = unsafeCSS(styles);
+  static styles: CSSResultGroup = [unsafeCSS(formControlStyles), unsafeCSS(styles)];
 
   static formAssociated = true;
 

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

@@ -1,5 +1,4 @@
 @use "../../wc";
-@use "../../form-control";
 
 :host {
   --slot-height: 18px;

package/src/components/select/select.component.ts

@@ -21,6 +21,7 @@ import type {CSSResultGroup, PropertyValues, TemplateResult} from 'lit';
 import type {ZincFormControl} from '../../internal/zinc-element';
 import type {ZnRemoveEvent} from "../../events/zn-remove";
 
+import formControlStyles from '../../form-control.scss';
 import styles from './select.scss';
 
 /**
@@ -77,7 +78,7 @@ import styles from './select.scss';
  * @csspart expand-icon - The container that wraps the expand icon.
  */
 export default class ZnSelect extends ZincElement implements ZincFormControl {
-  static styles: CSSResultGroup = unsafeCSS(styles);
+  static styles: CSSResultGroup = [unsafeCSS(formControlStyles), unsafeCSS(styles)];
   static dependencies = {
     'zn-icon': ZnIcon,
     'zn-opt-group': ZnOptGroup,

package/src/components/select/select.scss

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

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

@@ -1,6 +1,8 @@
 @use "../../wc";
 
 :host {
+  @include wc.scrollbars;
+
   --slash-menu-width: 320px;
   --slash-menu-max-height: 260px;
   --slash-menu-border-radius: 12px;

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

@@ -17,6 +17,8 @@ import {property} from 'lit/decorators.js';
 import {Store} from "../../internal/storage";
 import ZincElement from '../../internal/zinc-element';
 
+// Tabs load in such a way that the global sheet has to be re-applied inside the shadow root.
+import bootStyles from '../../../scss/boot.scss';
 import styles from './tabs.scss';
 
 // Every element that manages its own tabs (ZnTabs and its subclasses). Tab
@@ -42,7 +44,7 @@ const tabContainerSelector = 'zn-tabs, zn-page, zn-page-nav';
  * @cssproperty --example - An example CSS custom property.
  */
 export default class ZnTabs extends ZincElement {
-  static styles: CSSResultGroup = unsafeCSS(styles);
+  static styles: CSSResultGroup = [unsafeCSS(bootStyles), unsafeCSS(styles)];
   @property({attribute: 'master-id', reflect: true}) masterId: string;
   @property({attribute: 'default-uri', reflect: true}) defaultUri = '';
   @property({attribute: 'active', reflect: true}) _current = '';

package/src/components/tabs/tabs.scss

@@ -1,5 +1,4 @@
 @use "../../wc";
-@use "../../../scss/boot"; // Tabs load in such a way we need to include the global styles on them again
 
 :host {
   @include wc.scrollbars;

package/src/components/textarea/textarea.component.ts

@@ -14,6 +14,7 @@ import ZincElement, {type ZincFormControl} from '../../internal/zinc-element';
 import ZnSlashItem from "../slash-item";
 import ZnSlashMenu from "../slash-menu";
 
+import formControlStyles from '../../form-control.scss';
 import styles from './textarea.scss';
 
 /**
@@ -52,7 +53,7 @@ import styles from './textarea.scss';
  * @csspart slash-menu - The slash menu shown at the caret.
  */
 export default class ZnTextarea extends ZincElement implements ZincFormControl {
-  static styles: CSSResultGroup = unsafeCSS(styles);
+  static styles: CSSResultGroup = [unsafeCSS(formControlStyles), unsafeCSS(styles)];
   static dependencies = {
     'zn-slash-item': ZnSlashItem,
     'zn-slash-menu': ZnSlashMenu

package/src/components/textarea/textarea.scss

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

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/toolbar-overflow.ts

@@ -0,0 +1,100 @@
+import {ResizeController} from '@lit-labs/observers/resize-controller.js';
+import type {ReactiveController, ReactiveControllerHost} from 'lit';
+
+interface ToolbarOverflowOptions {
+  /** The measurable group elements, in toolbar order. */
+  groups: () => HTMLElement[];
+  /** The element whose width the groups have to fit inside. */
+  container: () => HTMLElement | null | undefined;
+  /** Space to keep for the overflow trigger. Defaults to 44px. */
+  reserve?: number;
+}
+
+/**
+ * Reports how many leading toolbar groups fit the container, so the host can render the
+ * rest into an overflow menu. Two passes: the first ignores the trigger, because when
+ * everything fits there is no trigger to make room for.
+ */
+export class ToolbarOverflowController implements ReactiveController {
+  visibleCount = Infinity;
+
+  private readonly host: ReactiveControllerHost & Element;
+  private readonly options: ToolbarOverflowOptions;
+  private resizeRafId = 0;
+
+  constructor(host: ReactiveControllerHost & Element, options: ToolbarOverflowOptions) {
+    this.host = host;
+    this.options = options;
+    host.addController(this);
+    // Deferred to a rAF rather than measuring inline: measure() mutates the display of
+    // elements inside the observed host, and doing that synchronously in the observer's own
+    // callback is what trips "ResizeObserver loop completed with undelivered notifications"
+    // (fatal in WebKit's test runner, not just a console warning). Same fix as button-menu.
+    // eslint-disable-next-line no-new -- ResizeController registers itself with the host.
+    new ResizeController(host, {
+      callback: () => {
+        if (this.resizeRafId) return;
+        this.resizeRafId = requestAnimationFrame(() => {
+          this.resizeRafId = 0;
+          this.measure();
+        });
+      },
+    });
+  }
+
+  hostUpdated() {
+    this.measure();
+  }
+
+  private measure() {
+    const groups = this.options.groups();
+    const container = this.options.container();
+    if (!groups.length || !container) return;
+
+    // clientWidth includes the container's own padding, so it has to come back out — and so
+    // does any non-group sibling (the raw-source toggle, or the trigger itself once it
+    // exists) that is really sitting in the same row and eating into the same space. Without
+    // this, `total <= available` can read true while a sibling's real footprint still clips
+    // trailing groups off-screen with no trigger rendered to reach them.
+    const style = getComputedStyle(container);
+    const paddingX = parseFloat(style.paddingLeft) + parseFloat(style.paddingRight);
+    const siblingsWidth = [...container.children]
+      .filter(child => !child.classList.contains('toolbar__group'))
+      .reduce((sum, child) => sum + child.getBoundingClientRect().width, 0);
+    const available = container.clientWidth - paddingX - siblingsWidth;
+    if (available <= 0) return;
+
+    // Show everything before measuring: a collapsed group measures 0, which would let the
+    // next pass re-expand it and oscillate forever. Same reason the editor toolbar resets
+    // display before each pass. Reads and writes stay in this frame, so nothing flickers.
+    groups.forEach(group => (group.style.display = ''));
+    const widths = groups.map(group => group.getBoundingClientRect().width);
+    const total = widths.reduce((sum, width) => sum + width, 0);
+
+    const next = total <= available
+      ? groups.length
+      : this.countThatFit(widths, available - (this.options.reserve ?? 44));
+
+    groups.forEach((group, index) => (group.style.display = index < next ? '' : 'none'));
+
+    if (next !== this.visibleCount) {
+      this.visibleCount = next;
+      this.host.requestUpdate();
+    }
+  }
+
+  private countThatFit(widths: number[], available: number): number {
+    let used = 0;
+    let count = 0;
+    for (const width of widths) {
+      if (used + width > available) break;
+      used += width;
+      count++;
+    }
+    // No `Math.max(count, 1)` floor here: forcing at least one group into the bar when even
+    // that group alone doesn't fit `available` pushed the trigger past the host's own
+    // `overflow: hidden` edge — clipped and unreachable, not just visually tight. Zero visible
+    // groups is the correct answer in that case; every action still reaches the menu.
+    return count;
+  }
+}

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);
   }