@ngneers/controls-playwright 0.0.1-next.0

package/dist/components/toast.js

@@ -0,0 +1,68 @@
+import { toastControlTemplate } from '@ngneers/controls-themes/templates/toast';
+import { themeClasses } from '../utils/theme';
+import test, { expect } from '@playwright/test';
+export class NgnToastHarness {
+    classes = themeClasses(toastControlTemplate);
+    locator;
+    header;
+    content;
+    icon;
+    closeButton;
+    constructor(locator) {
+        this.locator = locator;
+        this.header = locator.locator(this.classes.defaultHeader);
+        this.content = locator.locator(this.classes.defaultContent);
+        this.icon = this.header.locator('ngn-icon').first();
+        this.closeButton = this.header.locator('button');
+    }
+    async expectVisible() {
+        await expect(this.locator).toBeVisible();
+    }
+    async expectHidden() {
+        await expect(this.locator).not.toBeVisible();
+    }
+    async expectHeader(text) {
+        await expect(this.header).toContainText(text);
+    }
+    async expectContent(text) {
+        await expect(this.content).toContainText(text);
+    }
+    async expectIcon(hasIcon) {
+        if (hasIcon) {
+            await expect(this.icon).toBeVisible();
+        }
+        else {
+            await expect(this.icon).not.toBeVisible();
+        }
+    }
+    async expectClosable(closable) {
+        if (closable) {
+            await expect(this.closeButton).toBeVisible();
+        }
+        else {
+            await expect(this.closeButton).not.toBeVisible();
+        }
+    }
+    async close() {
+        await this.closeButton.click();
+    }
+}
+export class NgnToastHostHarness {
+    classes = themeClasses(toastControlTemplate);
+    locator;
+    constructor(page) {
+        this.locator = page.locator('ngn-toast-host');
+    }
+    getToast(index = 0) {
+        return new NgnToastHarness(this.locator.locator('ngn-toast').nth(index));
+    }
+    getAllToasts() {
+        return this.locator.locator('ngn-toast');
+    }
+    async expectToastCount(count) {
+        await expect(this.getAllToasts()).toHaveCount(count);
+    }
+    async expectVisible() {
+        await expect(this.locator).toBeVisible();
+    }
+}

package/dist/components/toggle-button.d.ts

@@ -0,0 +1,10 @@
+import { type Locator } from '@playwright/test';
+export declare class NgnToggleButtonHarness {
+    readonly classes: import("@ngneers/controls-themes").ThemeClasses<import("@ngneers/controls-themes").ControlTemplate<"toggle-button", ["root", "invalid", "button", "label", "active", "placeholder", "placeholder-active"], readonly []>>;
+    readonly locator: Locator;
+    constructor(locator: Locator);
+    click(force?: boolean): Promise<void>;
+    expectActive(active: boolean): Promise<void>;
+    expectDisabled(disabled: boolean): Promise<void>;
+}
+//# sourceMappingURL=toggle-button.d.ts.map

package/dist/components/toggle-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-button.d.ts","sourceRoot":"","sources":["../../src/components/toggle-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,OAAO,EAAU,MAAM,kBAAkB,CAAC;AAIxD,qBAAa,sBAAsB;IACjC,SAAgB,OAAO,2NAA6C;IAEpE,SAAgB,OAAO,EAAE,OAAO,CAAC;gBAErB,OAAO,EAAE,OAAO;IAIf,KAAK,CAAC,KAAK,UAAQ;IAInB,YAAY,CAAC,MAAM,EAAE,OAAO;IAQ5B,cAAc,CAAC,QAAQ,EAAE,OAAO;CAO9C"}

package/dist/components/toggle-button.js

@@ -0,0 +1,29 @@
+import { expect } from '@playwright/test';
+import { themeClasses } from '../utils/theme';
+import { toggleButtonControlTemplate } from '@ngneers/controls-themes/templates/toggle-button';
+export class NgnToggleButtonHarness {
+    classes = themeClasses(toggleButtonControlTemplate);
+    locator;
+    constructor(locator) {
+        this.locator = locator;
+    }
+    async click(force = false) {
+        await this.locator.click({ force });
+    }
+    async expectActive(active) {
+        if (active) {
+            await expect(this.locator).toHaveClass(new RegExp(this.classes.active));
+        }
+        else {
+            await expect(this.locator).not.toHaveClass(new RegExp(this.classes.active));
+        }
+    }
+    async expectDisabled(disabled) {
+        if (disabled) {
+            await expect(this.locator).toBeDisabled();
+        }
+        else {
+            await expect(this.locator).not.toBeDisabled();
+        }
+    }
+}

package/dist/components/tooltip.d.ts

@@ -0,0 +1,12 @@
+import { type Locator } from '@playwright/test';
+export declare class NgnTooltipHarness {
+    readonly classes: import("@ngneers/controls-themes").ThemeClasses<import("@ngneers/controls-themes").ControlTemplate<"tooltip", ["root", "content", "text", "with-arrow", "closing", "fade-in", "fade-out", "top", "bottom", "left", "right", "start", "end"], readonly []>>;
+    private readonly _ngnDefer;
+    private readonly _contentWrapper;
+    readonly locator: Locator;
+    readonly content: Locator;
+    constructor(locator: Locator);
+    expectOpened(opened?: boolean): Promise<void>;
+    expectRendered(rendered?: boolean): Promise<void>;
+}
+//# sourceMappingURL=tooltip.d.ts.map

package/dist/components/tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../src/components/tooltip.ts"],"names":[],"mappings":"AAEA,OAAO,EAAU,KAAK,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAExD,qBAAa,iBAAiB;IAC5B,SAAgB,OAAO,6PAAwC;IAE/D,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAU;IACpC,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAU;IAE1C,SAAgB,OAAO,EAAE,OAAO,CAAC;IACjC,SAAgB,OAAO,EAAE,OAAO,CAAC;gBAErB,OAAO,EAAE,OAAO;IAOf,YAAY,CAAC,MAAM,UAAO;IAI1B,cAAc,CAAC,QAAQ,UAAO,GAAG,OAAO,CAAC,IAAI,CAAC;CAa5D"}

package/dist/components/tooltip.js

@@ -0,0 +1,32 @@
+import { tooltipControlTemplate } from '@ngneers/controls-themes/templates/tooltip';
+import { themeClasses } from '../utils/theme';
+import { expect } from '@playwright/test';
+export class NgnTooltipHarness {
+    classes = themeClasses(tooltipControlTemplate);
+    _ngnDefer;
+    _contentWrapper;
+    locator;
+    content;
+    constructor(locator) {
+        this.locator = locator;
+        this._ngnDefer = locator.locator('ngn-defer');
+        this._contentWrapper = locator.locator(this.classes.content);
+        this.content = this._ngnDefer.locator('> *');
+    }
+    async expectOpened(opened = true) {
+        await expect(this._contentWrapper).toBeVisible({ visible: opened });
+    }
+    async expectRendered(rendered = true) {
+        await expect(this._ngnDefer).toBeAttached();
+        await expect(async () => {
+            const el = await this._ngnDefer.elementHandle();
+            const hasContent = !!(await el?.innerText()) || !!(await el?.evaluate(e => e.childElementCount));
+            if (rendered) {
+                expect(hasContent).toBeTruthy();
+            }
+            else {
+                expect(hasContent).toBeFalsy();
+            }
+        }).toPass({ timeout: 2000 });
+    }
+}

package/dist/components/tree.d.ts

@@ -0,0 +1,47 @@
+import { type Locator } from '@playwright/test';
+import { NgnScrollerHarness } from './scroller';
+export declare class NgnTreeHarness {
+    locator: Locator;
+    readonly classes: import("@ngneers/controls-themes").ThemeClasses<import("@ngneers/controls-themes").ControlTemplate<"tree", ["root", "empty", "invalid", "item", "group", "default-item", "toggle", "toggle-placeholder", "toggle-icon", "toggle-arrow", "item-checkbox-placeholder", "item-selectable", "item-selected", "item-highlighted", "item-disabled", "item-expanded"], readonly [{
+        readonly class: "scroller";
+        readonly template: import("@ngneers/controls-themes").ControlTemplate<"scroller", ["root", "virtual", "item", "item-sticky"], readonly []>;
+    }, {
+        readonly class: "item-checkbox";
+        readonly template: import("@ngneers/controls-themes").ControlTemplate<"checkbox", ["root", "input", "box", "box-checked", "box-indeterminate", "box-icon", "box-icon-visible", "invalid"], readonly []>;
+    }]>>;
+    /** All currently rendered nodes (branches and leaves). */
+    readonly node: Locator;
+    /** Leaf rows. */
+    readonly item: Locator;
+    /** Branch rows (nodes with children). */
+    readonly group: Locator;
+    readonly toggle: Locator;
+    readonly itemSelected: Locator;
+    readonly itemHighlighted: Locator;
+    readonly itemDisabled: Locator;
+    readonly itemExpanded: Locator;
+    readonly checkbox: Locator;
+    readonly empty: Locator;
+    readonly spinner: Locator;
+    readonly scroller: NgnScrollerHarness;
+    constructor(locator: Locator);
+    /** A single node located by its exact (trimmed, case-insensitive) label. */
+    getNode(text: string): Locator;
+    /** A single node located by the `testId` of its item. */
+    getNodeByTestId(testId: string): Locator;
+    expectNodeCount(count: number): Promise<void>;
+    expectItemCount(count: number): Promise<void>;
+    expectGroupCount(count: number): Promise<void>;
+    expectNodeTexts(texts: string[]): Promise<void>;
+    /** Click a node's row (selects / checks it when selectable). */
+    clickNode(text: string): Promise<void>;
+    /** Click a branch node's expand/collapse toggle. */
+    toggleNode(text: string): Promise<void>;
+    expectExpanded(text: string, expanded?: boolean): Promise<void>;
+    expectSelected(text: string, selected?: boolean): Promise<void>;
+    expectChecked(text: string, state: 'true' | 'false' | 'mixed'): Promise<void>;
+    expectDisabled(text: string, disabled?: boolean): Promise<void>;
+    /** Assert the tree's `aria-activedescendant` points at the given node. */
+    expectActiveDescendant(text: string): Promise<void>;
+}
+//# sourceMappingURL=tree.d.ts.map

package/dist/components/tree.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree.d.ts","sourceRoot":"","sources":["../../src/components/tree.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAGxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAEhD,qBAAa,cAAc;IAkBN,OAAO,EAAE,OAAO;IAjBnC,SAAgB,OAAO;;;;;;SAAqC;IAC5D,0DAA0D;IAC1D,SAAgB,IAAI,EAAE,OAAO,CAAC;IAC9B,iBAAiB;IACjB,SAAgB,IAAI,EAAE,OAAO,CAAC;IAC9B,yCAAyC;IACzC,SAAgB,KAAK,EAAE,OAAO,CAAC;IAC/B,SAAgB,MAAM,EAAE,OAAO,CAAC;IAChC,SAAgB,YAAY,EAAE,OAAO,CAAC;IACtC,SAAgB,eAAe,EAAE,OAAO,CAAC;IACzC,SAAgB,YAAY,EAAE,OAAO,CAAC;IACtC,SAAgB,YAAY,EAAE,OAAO,CAAC;IACtC,SAAgB,QAAQ,EAAE,OAAO,CAAC;IAClC,SAAgB,KAAK,EAAE,OAAO,CAAC;IAC/B,SAAgB,OAAO,EAAE,OAAO,CAAC;IACjC,SAAgB,QAAQ,EAAE,kBAAkB,CAAC;gBAE1B,OAAO,EAAE,OAAO;IAenC,4EAA4E;IACrE,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO;IAIrC,yDAAyD;IAClD,eAAe,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO;IAIxC,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IAI7C,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IAI7C,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IAI9C,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC;IAItD,gEAAgE;IACzD,SAAS,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IAI7C,oDAAoD;IAC7C,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IAIvC,cAAc,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,UAAO,GAAG,OAAO,CAAC,IAAI,CAAC;IAI5D,cAAc,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,UAAO,GAAG,OAAO,CAAC,IAAI,CAAC;IAI5D,aAAa,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC;IAI7E,cAAc,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,UAAO,GAAG,OAAO,CAAC,IAAI,CAAC;IAMnE,0EAA0E;IAC7D,sBAAsB,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;CAIjE"}

package/dist/components/tree.js

@@ -0,0 +1,85 @@
+import { expect } from '@playwright/test';
+import { themeClasses } from '../utils/theme';
+import { treeControlTemplate } from '@ngneers/controls-themes/templates/tree';
+import { NgnScrollerHarness } from './scroller';
+export class NgnTreeHarness {
+    locator;
+    classes = themeClasses(treeControlTemplate);
+    /** All currently rendered nodes (branches and leaves). */
+    node;
+    /** Leaf rows. */
+    item;
+    /** Branch rows (nodes with children). */
+    group;
+    toggle;
+    itemSelected;
+    itemHighlighted;
+    itemDisabled;
+    itemExpanded;
+    checkbox;
+    empty;
+    spinner;
+    scroller;
+    constructor(locator) {
+        this.locator = locator;
+        this.node = locator.locator('[role="treeitem"]');
+        this.item = locator.locator(this.classes['item']);
+        this.group = locator.locator(this.classes['group']);
+        this.toggle = locator.locator(this.classes['toggle']);
+        this.itemSelected = locator.locator(this.classes['item-selected']);
+        this.itemHighlighted = locator.locator(this.classes['item-highlighted']);
+        this.itemDisabled = locator.locator(this.classes['item-disabled']);
+        this.itemExpanded = locator.locator(this.classes['item-expanded']);
+        this.checkbox = locator.locator(this.classes['item-checkbox']['root']);
+        this.empty = locator.locator(this.classes['empty']);
+        this.spinner = locator.locator('ngn-spinner');
+        this.scroller = new NgnScrollerHarness(locator.locator(this.classes['scroller']['root']));
+    }
+    /** A single node located by its exact (trimmed, case-insensitive) label. */
+    getNode(text) {
+        return this.node.filter({ hasText: new RegExp(`^\\s*${text}\\s*$`, 'i') });
+    }
+    /** A single node located by the `testId` of its item. */
+    getNodeByTestId(testId) {
+        return this.node.filter({ has: this.locator.locator(`[data-testid="${testId}"]`) });
+    }
+    expectNodeCount(count) {
+        return expect(this.node).toHaveCount(count);
+    }
+    expectItemCount(count) {
+        return expect(this.item).toHaveCount(count);
+    }
+    expectGroupCount(count) {
+        return expect(this.group).toHaveCount(count);
+    }
+    expectNodeTexts(texts) {
+        return expect(this.node).toHaveText(texts.map(t => new RegExp(`^\\s*${t}\\s*$`)));
+    }
+    /** Click a node's row (selects / checks it when selectable). */
+    clickNode(text) {
+        return this.getNode(text).click();
+    }
+    /** Click a branch node's expand/collapse toggle. */
+    toggleNode(text) {
+        return this.getNode(text).locator(this.classes['toggle']).click();
+    }
+    expectExpanded(text, expanded = true) {
+        return expect(this.getNode(text)).toHaveAttribute('aria-expanded', String(expanded));
+    }
+    expectSelected(text, selected = true) {
+        return expect(this.getNode(text)).toHaveAttribute('aria-selected', String(selected));
+    }
+    expectChecked(text, state) {
+        return expect(this.getNode(text)).toHaveAttribute('aria-checked', state);
+    }
+    expectDisabled(text, disabled = true) {
+        return disabled
+            ? expect(this.getNode(text)).toHaveAttribute('aria-disabled', 'true')
+            : expect(this.getNode(text)).not.toHaveAttribute('aria-disabled', 'true');
+    }
+    /** Assert the tree's `aria-activedescendant` points at the given node. */
+    async expectActiveDescendant(text) {
+        const id = await this.getNode(text).getAttribute('id');
+        await expect(this.locator).toHaveAttribute('aria-activedescendant', id ?? '');
+    }
+}

package/dist/components/upload.d.ts

@@ -0,0 +1,27 @@
+import { type Locator } from '@playwright/test';
+export declare class NgnUploadHarness {
+    readonly classes: import("@ngneers/controls-themes").ThemeClasses<import("@ngneers/controls-themes").ControlTemplate<"upload", ["root", "dragover", "disabled", "clickable", "draggable", "has-files", "list-top", "list-bottom", "list-left", "list-right", "main", "zone", "icon", "placeholder", "list", "item", "item-pending", "item-uploading", "item-done", "item-failed", "status", "file", "name", "size", "progress", "actions", "action", "footer", "trigger"], readonly []>>;
+    readonly locator: Locator;
+    readonly zone: Locator;
+    readonly input: Locator;
+    readonly list: Locator;
+    readonly items: Locator;
+    constructor(locator: Locator);
+    /** Item `<li>` at the given index. */
+    item(index?: number): Locator;
+    name(index?: number): Locator;
+    expectItemCount(count: number): Promise<void>;
+    expectItemName(index: number, text: string): Promise<void>;
+    expectItemState(index: number, state: 'pending' | 'uploading' | 'done' | 'failed'): Promise<void>;
+    /** Select files through the projected native input (click-select path). */
+    selectFiles(files: Array<{
+        name: string;
+        mimeType: string;
+        buffer: Buffer;
+    }>): Promise<void>;
+    /** Action button ('upload' | 'cancel' | 'retry' | 'remove') on an item. */
+    actionButton(index: number, label: string): Locator;
+    /** The "Upload" button rendered in confirm mode (`confirmTrigger: 'all'`). */
+    uploadAllButton(): Locator;
+}
+//# sourceMappingURL=upload.d.ts.map

package/dist/components/upload.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"upload.d.ts","sourceRoot":"","sources":["../../src/components/upload.ts"],"names":[],"mappings":"AAEA,OAAO,EAAU,KAAK,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAExD,qBAAa,gBAAgB;IAC3B,SAAgB,OAAO,ycAAuC;IAE9D,SAAgB,OAAO,EAAE,OAAO,CAAC;IACjC,SAAgB,IAAI,EAAE,OAAO,CAAC;IAC9B,SAAgB,KAAK,EAAE,OAAO,CAAC;IAC/B,SAAgB,IAAI,EAAE,OAAO,CAAC;IAC9B,SAAgB,KAAK,EAAE,OAAO,CAAC;gBAEnB,OAAO,EAAE,OAAO;IAQ5B,sCAAsC;IAC/B,IAAI,CAAC,KAAK,GAAE,MAAU,GAAG,OAAO;IAIhC,IAAI,CAAC,KAAK,GAAE,MAAU,GAAG,OAAO;IAI1B,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IAI7C,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IAI1D,eAAe,CAC1B,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,SAAS,GAAG,WAAW,GAAG,MAAM,GAAG,QAAQ,GACjD,OAAO,CAAC,IAAI,CAAC;IAKhB,2EAA2E;IAC9D,WAAW,CACtB,KAAK,EAAE,KAAK,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC,GAC/D,OAAO,CAAC,IAAI,CAAC;IAIhB,2EAA2E;IACpE,YAAY,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,OAAO;IAI1D,8EAA8E;IACvE,eAAe,IAAI,OAAO;CAGlC"}

package/dist/components/upload.js

@@ -0,0 +1,47 @@
+import { uploadControlTemplate } from '@ngneers/controls-themes/templates/upload';
+import { themeClasses } from '../utils/theme';
+import { expect } from '@playwright/test';
+export class NgnUploadHarness {
+    classes = themeClasses(uploadControlTemplate);
+    locator;
+    zone;
+    input;
+    list;
+    items;
+    constructor(locator) {
+        this.locator = locator;
+        this.zone = locator.locator(this.classes.zone);
+        this.input = locator.locator('input[type=file]');
+        this.list = locator.locator(this.classes.list);
+        this.items = this.list.locator(this.classes.item);
+    }
+    /** Item `<li>` at the given index. */
+    item(index = 0) {
+        return this.items.nth(index);
+    }
+    name(index = 0) {
+        return this.item(index).locator(this.classes.name);
+    }
+    async expectItemCount(count) {
+        await expect(this.items).toHaveCount(count);
+    }
+    async expectItemName(index, text) {
+        await expect(this.name(index)).toHaveText(text);
+    }
+    async expectItemState(index, state) {
+        const stateClass = this.classes[`item-${state}`].slice(1); // strip leading '.'
+        await expect(this.item(index)).toHaveClass(new RegExp(stateClass));
+    }
+    /** Select files through the projected native input (click-select path). */
+    async selectFiles(files) {
+        await this.input.setInputFiles(files);
+    }
+    /** Action button ('upload' | 'cancel' | 'retry' | 'remove') on an item. */
+    actionButton(index, label) {
+        return this.item(index).getByLabel(new RegExp(`^${label}`, 'i'));
+    }
+    /** The "Upload" button rendered in confirm mode (`confirmTrigger: 'all'`). */
+    uploadAllButton() {
+        return this.locator.locator(this.classes.trigger);
+    }
+}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './components';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/dist/index.js

@@ -0,0 +1 @@
+export * from './components';

package/dist/utils/classes.d.ts

@@ -0,0 +1,119 @@
+export declare const NGN_CLASSES: {
+    avatar: import("@ngneers/controls-themes").ThemeClasses<import("@ngneers/controls-themes").ControlTemplate<"avatar", ["root", "image", "initials", `kind-${string}`], readonly []>>;
+    button: import("@ngneers/controls-themes").ThemeClasses<import("@ngneers/controls-themes").ControlTemplate<"button", ["root", "inline", "loading", `kind-${string}`, `color-${string}`], readonly []>>;
+    calendar: import("@ngneers/controls-themes").ThemeClasses<import("@ngneers/controls-themes").ControlTemplate<"calendar", ["root", "inline", "invalid", "details", "header", "navigation", "days", "week-day", "day", "day-selected", "day-today", "day-other-month", "months", "month", "time", "input-field"], readonly [{
+        readonly class: "input";
+        readonly template: import("@ngneers/controls-themes").ControlTemplate<"mask-input", ["root", "section", "section-active", "section-placeholder", "separator", "proxy", "sr-only"], readonly []>;
+    }, {
+        readonly class: "trigger-icon";
+        readonly template: import("@ngneers/controls-themes").ControlTemplate<"icon", ["root", "default"], readonly []>;
+    }, {
+        readonly class: "popover";
+        readonly template: import("@ngneers/controls-themes").ControlTemplate<"popover", ["root", "content", "content-closing"], readonly []>;
+    }, {
+        readonly class: "previous";
+        readonly template: import("@ngneers/controls-themes").ControlTemplate<"button", ["root", "inline", "loading", `kind-${string}`, `color-${string}`], readonly []>;
+    }, {
+        readonly class: "next";
+        readonly template: import("@ngneers/controls-themes").ControlTemplate<"button", ["root", "inline", "loading", `kind-${string}`, `color-${string}`], readonly []>;
+    }, {
+        readonly class: "current-month";
+        readonly template: import("@ngneers/controls-themes").ControlTemplate<"select", ["root", "combobox", "input", "icon", "input-editable", "popover-content", "filter-icon", "list-box-empty"], readonly [{
+            readonly class: "popover";
+            readonly template: import("@ngneers/controls-themes").ControlTemplate<"popover", ["root", "content", "content-closing"], readonly []>;
+        }, {
+            readonly class: "list-box";
+            readonly template: import("@ngneers/controls-themes").ControlTemplate<"list-box", ["root", "empty", "invalid", "item", "group", "default-item", "default-group", "item-selected", "item-highlighted", "item-disabled"], readonly [{
+                readonly class: "checkbox";
+                readonly template: import("@ngneers/controls-themes").ControlTemplate<"checkbox", ["root", "input", "box", "box-checked", "box-indeterminate", "box-icon", "box-icon-visible", "invalid"], readonly []>;
+            }, {
+                readonly class: "scroller";
+                readonly template: import("@ngneers/controls-themes").ControlTemplate<"scroller", ["root", "virtual", "item", "item-sticky"], readonly []>;
+            }]>;
+        }, {
+            readonly class: "filter";
+            readonly template: import("@ngneers/controls-themes").ControlTemplate<"input-field", ["root", "host", "disabled", "readonly", "invalid", "label", "clear-button", `labelKind-${string}`], readonly [{
+                readonly class: "input";
+                readonly template: import("@ngneers/controls-themes").ControlTemplate<"input", ["root", "invalid", "empty"], readonly []>;
+                readonly projected: true;
+            }]>;
+        }]>;
+    }, {
+        readonly class: "current-year";
+        readonly template: import("@ngneers/controls-themes").ControlTemplate<"select", ["root", "combobox", "input", "icon", "input-editable", "popover-content", "filter-icon", "list-box-empty"], readonly [{
+            readonly class: "popover";
+            readonly template: import("@ngneers/controls-themes").ControlTemplate<"popover", ["root", "content", "content-closing"], readonly []>;
+        }, {
+            readonly class: "list-box";
+            readonly template: import("@ngneers/controls-themes").ControlTemplate<"list-box", ["root", "empty", "invalid", "item", "group", "default-item", "default-group", "item-selected", "item-highlighted", "item-disabled"], readonly [{
+                readonly class: "checkbox";
+                readonly template: import("@ngneers/controls-themes").ControlTemplate<"checkbox", ["root", "input", "box", "box-checked", "box-indeterminate", "box-icon", "box-icon-visible", "invalid"], readonly []>;
+            }, {
+                readonly class: "scroller";
+                readonly template: import("@ngneers/controls-themes").ControlTemplate<"scroller", ["root", "virtual", "item", "item-sticky"], readonly []>;
+            }]>;
+        }, {
+            readonly class: "filter";
+            readonly template: import("@ngneers/controls-themes").ControlTemplate<"input-field", ["root", "host", "disabled", "readonly", "invalid", "label", "clear-button", `labelKind-${string}`], readonly [{
+                readonly class: "input";
+                readonly template: import("@ngneers/controls-themes").ControlTemplate<"input", ["root", "invalid", "empty"], readonly []>;
+                readonly projected: true;
+            }]>;
+        }]>;
+    }, {
+        readonly class: "current-month-field";
+        readonly template: import("@ngneers/controls-themes").ControlTemplate<"input-field", ["root", "host", "disabled", "readonly", "invalid", "label", "clear-button", `labelKind-${string}`], readonly [{
+            readonly class: "input";
+            readonly template: import("@ngneers/controls-themes").ControlTemplate<"input", ["root", "invalid", "empty"], readonly []>;
+            readonly projected: true;
+        }]>;
+    }, {
+        readonly class: "current-year-field";
+        readonly template: import("@ngneers/controls-themes").ControlTemplate<"input-field", ["root", "host", "disabled", "readonly", "invalid", "label", "clear-button", `labelKind-${string}`], readonly [{
+            readonly class: "input";
+            readonly template: import("@ngneers/controls-themes").ControlTemplate<"input", ["root", "invalid", "empty"], readonly []>;
+            readonly projected: true;
+        }]>;
+    }]>>;
+    checkbox: import("@ngneers/controls-themes").ThemeClasses<import("@ngneers/controls-themes").ControlTemplate<"checkbox", ["root", "input", "box", "box-checked", "box-indeterminate", "box-icon", "box-icon-visible", "invalid"], readonly []>>;
+    input: import("@ngneers/controls-themes").ThemeClasses<import("@ngneers/controls-themes").ControlTemplate<"input", ["root", "invalid", "empty"], readonly []>>;
+    inputField: import("@ngneers/controls-themes").ThemeClasses<import("@ngneers/controls-themes").ControlTemplate<"input-field", ["root", "host", "disabled", "readonly", "invalid", "label", "clear-button", `labelKind-${string}`], readonly [{
+        readonly class: "input";
+        readonly template: import("@ngneers/controls-themes").ControlTemplate<"input", ["root", "invalid", "empty"], readonly []>;
+        readonly projected: true;
+    }]>>;
+    maskInput: import("@ngneers/controls-themes").ThemeClasses<import("@ngneers/controls-themes").ControlTemplate<"mask-input", ["root", "section", "section-active", "section-placeholder", "separator", "proxy", "sr-only"], readonly []>>;
+    listBox: import("@ngneers/controls-themes").ThemeClasses<import("@ngneers/controls-themes").ControlTemplate<"list-box", ["root", "empty", "invalid", "item", "group", "default-item", "default-group", "item-selected", "item-highlighted", "item-disabled"], readonly [{
+        readonly class: "checkbox";
+        readonly template: import("@ngneers/controls-themes").ControlTemplate<"checkbox", ["root", "input", "box", "box-checked", "box-indeterminate", "box-icon", "box-icon-visible", "invalid"], readonly []>;
+    }, {
+        readonly class: "scroller";
+        readonly template: import("@ngneers/controls-themes").ControlTemplate<"scroller", ["root", "virtual", "item", "item-sticky"], readonly []>;
+    }]>>;
+    popover: import("@ngneers/controls-themes").ThemeClasses<import("@ngneers/controls-themes").ControlTemplate<"popover", ["root", "content", "content-closing"], readonly []>>;
+    scroller: import("@ngneers/controls-themes").ThemeClasses<import("@ngneers/controls-themes").ControlTemplate<"scroller", ["root", "virtual", "item", "item-sticky"], readonly []>>;
+    select: import("@ngneers/controls-themes").ThemeClasses<import("@ngneers/controls-themes").ControlTemplate<"select", ["root", "combobox", "input", "icon", "input-editable", "popover-content", "filter-icon", "list-box-empty"], readonly [{
+        readonly class: "popover";
+        readonly template: import("@ngneers/controls-themes").ControlTemplate<"popover", ["root", "content", "content-closing"], readonly []>;
+    }, {
+        readonly class: "list-box";
+        readonly template: import("@ngneers/controls-themes").ControlTemplate<"list-box", ["root", "empty", "invalid", "item", "group", "default-item", "default-group", "item-selected", "item-highlighted", "item-disabled"], readonly [{
+            readonly class: "checkbox";
+            readonly template: import("@ngneers/controls-themes").ControlTemplate<"checkbox", ["root", "input", "box", "box-checked", "box-indeterminate", "box-icon", "box-icon-visible", "invalid"], readonly []>;
+        }, {
+            readonly class: "scroller";
+            readonly template: import("@ngneers/controls-themes").ControlTemplate<"scroller", ["root", "virtual", "item", "item-sticky"], readonly []>;
+        }]>;
+    }, {
+        readonly class: "filter";
+        readonly template: import("@ngneers/controls-themes").ControlTemplate<"input-field", ["root", "host", "disabled", "readonly", "invalid", "label", "clear-button", `labelKind-${string}`], readonly [{
+            readonly class: "input";
+            readonly template: import("@ngneers/controls-themes").ControlTemplate<"input", ["root", "invalid", "empty"], readonly []>;
+            readonly projected: true;
+        }]>;
+    }]>>;
+    splitter: import("@ngneers/controls-themes").ThemeClasses<import("@ngneers/controls-themes").ControlTemplate<"splitter", ["root", "horizontal", "vertical", "panel", "divider", "divider-handle", "dragging", "divider-dragging", `kind-${string}`], readonly []>>;
+    tabs: import("@ngneers/controls-themes").ThemeClasses<import("@ngneers/controls-themes").ControlTemplate<"tabs", ["root", "headers-container", "headers", "header", "header-active", "header-active-indicator", "scroll-left", "scroll-right", "content"], readonly []>>;
+    tooltip: import("@ngneers/controls-themes").ThemeClasses<import("@ngneers/controls-themes").ControlTemplate<"tooltip", ["root", "content", "text", "with-arrow", "closing", "fade-in", "fade-out", "top", "bottom", "left", "right", "start", "end"], readonly []>>;
+};
+//# sourceMappingURL=classes.d.ts.map

package/dist/utils/classes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"classes.d.ts","sourceRoot":"","sources":["../../src/utils/classes.ts"],"names":[],"mappings":"AAgBA,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAevB,CAAC"}

package/dist/utils/classes.js

@@ -0,0 +1,31 @@
+import { avatarControlTemplate } from '@ngneers/controls-themes/templates/avatar';
+import { themeClasses } from './theme';
+import { buttonControlTemplate } from '@ngneers/controls-themes/templates/button';
+import { calendarControlTemplate } from '@ngneers/controls-themes/templates/calendar';
+import { checkboxControlTemplate } from '@ngneers/controls-themes/templates/checkbox';
+import { inputControlTemplate } from '@ngneers/controls-themes/templates/input';
+import { maskInputControlTemplate } from '@ngneers/controls-themes/templates/mask-input';
+import { inputFieldControlTemplate } from '@ngneers/controls-themes/templates/input-field';
+import { listBoxControlTemplate } from '@ngneers/controls-themes/templates/list-box';
+import { popoverControlTemplate } from '@ngneers/controls-themes/templates/popover';
+import { scrollerControlTemplate } from '@ngneers/controls-themes/templates/scroller';
+import { selectControlTemplate } from '@ngneers/controls-themes/templates/select';
+import { splitterControlTemplate } from '@ngneers/controls-themes/templates/splitter';
+import { tabsControlTemplate } from '@ngneers/controls-themes/templates/tabs';
+import { tooltipControlTemplate } from '@ngneers/controls-themes/templates/tooltip';
+export const NGN_CLASSES = {
+    avatar: themeClasses(avatarControlTemplate),
+    button: themeClasses(buttonControlTemplate),
+    calendar: themeClasses(calendarControlTemplate),
+    checkbox: themeClasses(checkboxControlTemplate),
+    input: themeClasses(inputControlTemplate),
+    inputField: themeClasses(inputFieldControlTemplate),
+    maskInput: themeClasses(maskInputControlTemplate),
+    listBox: themeClasses(listBoxControlTemplate),
+    popover: themeClasses(popoverControlTemplate),
+    scroller: themeClasses(scrollerControlTemplate),
+    select: themeClasses(selectControlTemplate),
+    splitter: themeClasses(splitterControlTemplate),
+    tabs: themeClasses(tabsControlTemplate),
+    tooltip: themeClasses(tooltipControlTemplate),
+};

package/dist/utils/theme.d.ts

@@ -0,0 +1,3 @@
+import type { ControlTemplate, ThemeClasses } from '@ngneers/controls-themes';
+export declare function themeClasses<CT extends ControlTemplate>(template: CT): ThemeClasses<CT>;
+//# sourceMappingURL=theme.d.ts.map

package/dist/utils/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/utils/theme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAE9E,wBAAgB,YAAY,CAAC,EAAE,SAAS,eAAe,EAAE,QAAQ,EAAE,EAAE,GAAG,YAAY,CAAC,EAAE,CAAC,CAwBvF"}

package/dist/utils/theme.js

@@ -0,0 +1,41 @@
+export function themeClasses(template) {
+    const result = {};
+    for (const className of template.classNames) {
+        result[className] = `.ngn-${template.scope}-${className}`;
+    }
+    for (const dep of template.dependencies ?? []) {
+        const childClasses = themeClasses(dep.template);
+        // Non-projected deps get a `[ptDep]` marker class (`.ngn-{scope}-{depClass}`) applied to
+        // the child's host element (see `NgnPt`/`apply-theme.ts`'s `d()`). Whether a given child
+        // class then lives on that SAME host element or on an element nested inside the child's own
+        // template depends on which classNames the child passes as `hostClass` to
+        // `injectThemeTemplate` (e.g. list-box binds its own 'root' straight to its host, so marker
+        // and 'root' land on one element; input-field reserves a separate 'host' key for its host
+        // binding and keeps 'root' on an inner div, so marker and 'root' land on two elements).
+        // The theme package has no visibility into that per-component choice, so instead of guessing
+        // we match BOTH shapes via `:is()`: compound (same element) or descendant (nested element).
+        // Projected deps have no marker (no host the parent controls), so their classes stay raw,
+        // matching how `apply-theme.ts` resolves `projected: true` deps directly off the child's own
+        // scope.
+        result[dep.class] = dep.projected
+            ? childClasses
+            : scopeByMarker(childClasses, `.ngn-${template.scope}-${dep.class}`);
+    }
+    return result;
+}
+/**
+ * Scopes every selector string in a (possibly nested) theme-classes object to `marker`, matching
+ * either a compound (same-element) or descendant (nested-element) relationship — see the
+ * `dep.projected` branch above for why both shapes are needed. Recurses into nested dependency
+ * objects so grandchild slots are scoped transitively through every ancestor marker.
+ */
+function scopeByMarker(classes, marker) {
+    const scoped = {};
+    for (const [key, value] of Object.entries(classes)) {
+        scoped[key] =
+            typeof value === 'string'
+                ? `:is(${marker}${value}, ${marker} ${value})`
+                : scopeByMarker(value, marker);
+    }
+    return scoped;
+}