@luzmo/ngx-lucero 1.0.3-alpha.7 → 1.0.3-alpha.9

package/esm/components/menu-divider.d.ts

@@ -0,0 +1,29 @@
+import { OnChanges, SimpleChanges } from '@angular/core';
+import '@luzmo/lucero/menu';
+import type { LuzmoMenuDivider as LuzmoMenuDividerHostElement } from '@luzmo/lucero/menu';
+import * as i0 from "@angular/core";
+export type { MenuChildItem, MenuItemChildren } from '@luzmo/lucero/menu';
+export declare class LuzmoMenuDivider implements OnChanges {
+    private readonly elementRef;
+    private readonly renderer;
+    private readonly destroyRef;
+    private readonly host;
+    private readonly listenerCleanup;
+    /** The underlying custom element instance. Use to call imperative methods. */
+    get nativeElement(): LuzmoMenuDividerHostElement;
+    size?: ('xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl');
+    constructor();
+    ngOnChanges(changes: SimpleChanges): void;
+    /**
+     * Forward a wrapper @Input to the underlying host element via Renderer2 so
+     * the wrapper stays compatible with non-DOM Angular platforms (SSR, tests).
+     * Unlike a "skip undefined" guard, this lets consumers reset values back to
+     * undefined / null by clearing their bindings.
+     */
+    private setHostProperty;
+    private bindEvents;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoMenuDivider, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoMenuDivider, "luzmo-menu-divider", ["luzmoMenuDivider"], { "size": { "alias": "size"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+/** The underlying custom element type for LuzmoMenuDivider */
+export type LuzmoMenuDividerElement = LuzmoMenuDividerHostElement;

package/esm/components/menu-divider.js

@@ -0,0 +1,69 @@
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, Renderer2 } from '@angular/core';
+import '@luzmo/lucero/menu';
+import * as i0 from "@angular/core";
+const _c0 = ["*"];
+/**
+ * Angular wrapper component for <luzmo-menu-divider>
+ */
+export class LuzmoMenuDivider {
+    elementRef = inject(ElementRef);
+    renderer = inject(Renderer2);
+    destroyRef = inject(DestroyRef);
+    host = this.elementRef.nativeElement;
+    listenerCleanup = [];
+    /** The underlying custom element instance. Use to call imperative methods. */
+    get nativeElement() {
+        return this.host;
+    }
+    size;
+    constructor() {
+        this.bindEvents();
+        this.destroyRef.onDestroy(() => {
+            for (const cleanup of this.listenerCleanup) {
+                cleanup();
+            }
+        });
+    }
+    ngOnChanges(changes) {
+        for (const key of Object.keys(changes)) {
+            switch (key) {
+                case 'size':
+                    this.setHostProperty('size', changes['size'].currentValue);
+                    break;
+                default:
+                    break;
+            }
+        }
+    }
+    /**
+     * Forward a wrapper @Input to the underlying host element via Renderer2 so
+     * the wrapper stays compatible with non-DOM Angular platforms (SSR, tests).
+     * Unlike a "skip undefined" guard, this lets consumers reset values back to
+     * undefined / null by clearing their bindings.
+     */
+    setHostProperty(key, value) {
+        this.renderer.setProperty(this.host, key, value);
+    }
+    bindEvents() {
+        // No custom events for this wrapper.
+    }
+    static ɵfac = function LuzmoMenuDivider_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoMenuDivider)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoMenuDivider, selectors: [["luzmo-menu-divider"]], inputs: { size: "size" }, exportAs: ["luzmoMenuDivider"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoMenuDivider_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵprojection(0);
+        } }, encapsulation: 2 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LuzmoMenuDivider, [{
+        type: Component,
+        args: [{
+                selector: 'luzmo-menu-divider',
+                exportAs: 'luzmoMenuDivider',
+                standalone: true,
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content />'
+            }]
+    }], () => [], { size: [{
+            type: Input,
+            args: [{ alias: 'size' }]
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoMenuDivider, { className: "LuzmoMenuDivider", filePath: "components/menu-divider.ts", lineNumber: 16 }); })();

package/esm/components/menu-group.d.ts

@@ -0,0 +1,55 @@
+import { OnChanges, SimpleChanges } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import '@luzmo/lucero/menu';
+import type { LuzmoMenuGroup as LuzmoMenuGroupHostElement } from '@luzmo/lucero/menu';
+import * as i0 from "@angular/core";
+export type { MenuChildItem, MenuItemChildren } from '@luzmo/lucero/menu';
+export declare class LuzmoMenuGroup implements OnChanges, ControlValueAccessor {
+    private readonly elementRef;
+    private readonly renderer;
+    private readonly destroyRef;
+    private readonly host;
+    private readonly listenerCleanup;
+    /** The underlying custom element instance. Use to call imperative methods. */
+    get nativeElement(): LuzmoMenuGroupHostElement;
+    size?: ('xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl');
+    label?: string;
+    ignore?: boolean;
+    variant?: 'checkmarks' | 'highlight';
+    selects?: never | 'inherit' | 'single' | 'multiple';
+    value?: string;
+    valueSeparator?: string;
+    selected?: string[];
+    selectedItems?: unknown;
+    menuSlot?: unknown;
+    focusedItemIndex?: number;
+    focusInItemIndex?: number;
+    handleSubmenuClosed?: unknown;
+    handleSubmenuOpened?: unknown;
+    /** Announces that the `value` of the element has changed */
+    readonly changeEvent: import("@angular/core").OutputEmitterRef<Event>;
+    readonly closeEvent: import("@angular/core").OutputEmitterRef<Event>;
+    constructor();
+    ngOnChanges(changes: SimpleChanges): void;
+    /**
+     * Forward a wrapper @Input to the underlying host element via Renderer2 so
+     * the wrapper stays compatible with non-DOM Angular platforms (SSR, tests).
+     * Unlike a "skip undefined" guard, this lets consumers reset values back to
+     * undefined / null by clearing their bindings.
+     */
+    private setHostProperty;
+    private bindEvents;
+    private onChange;
+    private onTouched;
+    private isWritingValue;
+    private lastCvaValue;
+    writeValue(value: string): void;
+    registerOnChange(fn: (value: string) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    focus({ preventScroll }: FocusOptions): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoMenuGroup, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoMenuGroup, "luzmo-menu-group", ["luzmoMenuGroup"], { "size": { "alias": "size"; "required": false; }; "label": { "alias": "label"; "required": false; }; "ignore": { "alias": "ignore"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "selects": { "alias": "selects"; "required": false; }; "value": { "alias": "value"; "required": false; }; "valueSeparator": { "alias": "valueSeparator"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "selectedItems": { "alias": "selectedItems"; "required": false; }; "menuSlot": { "alias": "menuSlot"; "required": false; }; "focusedItemIndex": { "alias": "focusedItemIndex"; "required": false; }; "focusInItemIndex": { "alias": "focusInItemIndex"; "required": false; }; "handleSubmenuClosed": { "alias": "handleSubmenuClosed"; "required": false; }; "handleSubmenuOpened": { "alias": "handleSubmenuOpened"; "required": false; }; }, { "changeEvent": "change"; "closeEvent": "close"; }, never, ["*"], true, never>;
+}
+/** The underlying custom element type for LuzmoMenuGroup */
+export type LuzmoMenuGroupElement = LuzmoMenuGroupHostElement;

package/esm/components/menu-group.js

@@ -0,0 +1,229 @@
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, forwardRef, inject, Input, output, Renderer2 } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import '@luzmo/lucero/menu';
+import * as i0 from "@angular/core";
+const _c0 = ["*"];
+/**
+ * Angular wrapper component for <luzmo-menu-group>
+ *
+ * @slot header - headline of the menu group
+ * @slot (default) - menu items to be listed in the group
+ */
+export class LuzmoMenuGroup {
+    elementRef = inject(ElementRef);
+    renderer = inject(Renderer2);
+    destroyRef = inject(DestroyRef);
+    host = this.elementRef.nativeElement;
+    listenerCleanup = [];
+    /** The underlying custom element instance. Use to call imperative methods. */
+    get nativeElement() {
+        return this.host;
+    }
+    size;
+    label;
+    ignore;
+    variant;
+    selects;
+    value;
+    valueSeparator;
+    selected;
+    selectedItems;
+    menuSlot;
+    focusedItemIndex;
+    focusInItemIndex;
+    handleSubmenuClosed;
+    handleSubmenuOpened;
+    /** Announces that the `value` of the element has changed */
+    changeEvent = output({ alias: 'change' });
+    closeEvent = output({ alias: 'close' });
+    constructor() {
+        this.bindEvents();
+        this.destroyRef.onDestroy(() => {
+            for (const cleanup of this.listenerCleanup) {
+                cleanup();
+            }
+        });
+    }
+    ngOnChanges(changes) {
+        for (const key of Object.keys(changes)) {
+            switch (key) {
+                case 'size':
+                    this.setHostProperty('size', changes['size'].currentValue);
+                    break;
+                case 'label':
+                    this.setHostProperty('label', changes['label'].currentValue);
+                    break;
+                case 'ignore':
+                    this.setHostProperty('ignore', changes['ignore'].currentValue);
+                    break;
+                case 'variant':
+                    this.setHostProperty('variant', changes['variant'].currentValue);
+                    break;
+                case 'selects':
+                    this.setHostProperty('selects', changes['selects'].currentValue);
+                    break;
+                case 'value':
+                    this.setHostProperty('value', changes['value'].currentValue);
+                    break;
+                case 'valueSeparator':
+                    this.setHostProperty('valueSeparator', changes['valueSeparator'].currentValue);
+                    break;
+                case 'selected':
+                    this.setHostProperty('selected', changes['selected'].currentValue);
+                    break;
+                case 'selectedItems':
+                    this.setHostProperty('selectedItems', changes['selectedItems'].currentValue);
+                    break;
+                case 'menuSlot':
+                    this.setHostProperty('menuSlot', changes['menuSlot'].currentValue);
+                    break;
+                case 'focusedItemIndex':
+                    this.setHostProperty('focusedItemIndex', changes['focusedItemIndex'].currentValue);
+                    break;
+                case 'focusInItemIndex':
+                    this.setHostProperty('focusInItemIndex', changes['focusInItemIndex'].currentValue);
+                    break;
+                case 'handleSubmenuClosed':
+                    this.setHostProperty('handleSubmenuClosed', changes['handleSubmenuClosed'].currentValue);
+                    break;
+                case 'handleSubmenuOpened':
+                    this.setHostProperty('handleSubmenuOpened', changes['handleSubmenuOpened'].currentValue);
+                    break;
+                default:
+                    break;
+            }
+        }
+    }
+    /**
+     * Forward a wrapper @Input to the underlying host element via Renderer2 so
+     * the wrapper stays compatible with non-DOM Angular platforms (SSR, tests).
+     * Unlike a "skip undefined" guard, this lets consumers reset values back to
+     * undefined / null by clearing their bindings.
+     */
+    setHostProperty(key, value) {
+        this.renderer.setProperty(this.host, key, value);
+    }
+    bindEvents() {
+        this.listenerCleanup.push(this.renderer.listen(this.host, 'change', (event) => {
+            this.changeEvent.emit(event);
+            if (!this.isWritingValue) {
+                const eventWithDetail = event;
+                const eventTarget = event.target;
+                const detail = 'detail' in eventWithDetail ? eventWithDetail.detail : undefined;
+                const detailRecord = detail != null && typeof detail === 'object' ? detail : undefined;
+                const hostRecord = this.host;
+                const nextValue = (detailRecord != null && 'value' in detailRecord
+                    ? detailRecord['value']
+                    : (detailRecord === undefined ? detail : undefined)
+                        ?? eventTarget?.['value']
+                        ?? hostRecord['value']);
+                if (Object.is(this.lastCvaValue, nextValue)) {
+                    return;
+                }
+                this.lastCvaValue = nextValue;
+                this.setHostProperty('value', nextValue);
+                this.onChange(nextValue);
+            }
+        }));
+        this.listenerCleanup.push(this.renderer.listen(this.host, 'close', (event) => {
+            this.closeEvent.emit(event);
+        }));
+        this.listenerCleanup.push(this.renderer.listen(this.host, 'blur', () => {
+            this.onTouched();
+        }));
+    }
+    onChange = () => { };
+    onTouched = () => { };
+    isWritingValue = false;
+    lastCvaValue;
+    writeValue(value) {
+        this.isWritingValue = true;
+        this.lastCvaValue = value;
+        this.setHostProperty('value', value);
+        this.isWritingValue = false;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        // Underlying element does not declare a 'disabled' field; nothing to do.
+        void isDisabled;
+    }
+    focus({ preventScroll }) {
+        return this.host.focus({ preventScroll });
+    }
+    static ɵfac = function LuzmoMenuGroup_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoMenuGroup)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoMenuGroup, selectors: [["luzmo-menu-group"]], inputs: { size: "size", label: "label", ignore: "ignore", variant: "variant", selects: "selects", value: "value", valueSeparator: "valueSeparator", selected: "selected", selectedItems: "selectedItems", menuSlot: "menuSlot", focusedItemIndex: "focusedItemIndex", focusInItemIndex: "focusInItemIndex", handleSubmenuClosed: "handleSubmenuClosed", handleSubmenuOpened: "handleSubmenuOpened" }, outputs: { changeEvent: "change", closeEvent: "close" }, exportAs: ["luzmoMenuGroup"], features: [i0.ɵɵProvidersFeature([
+                {
+                    provide: NG_VALUE_ACCESSOR,
+                    useExisting: forwardRef(() => LuzmoMenuGroup),
+                    multi: true
+                }
+            ]), i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoMenuGroup_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵprojection(0);
+        } }, encapsulation: 2 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LuzmoMenuGroup, [{
+        type: Component,
+        args: [{
+                selector: 'luzmo-menu-group',
+                exportAs: 'luzmoMenuGroup',
+                standalone: true,
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content />',
+                providers: [
+                    {
+                        provide: NG_VALUE_ACCESSOR,
+                        useExisting: forwardRef(() => LuzmoMenuGroup),
+                        multi: true
+                    }
+                ]
+            }]
+    }], () => [], { size: [{
+            type: Input,
+            args: [{ alias: 'size' }]
+        }], label: [{
+            type: Input,
+            args: [{ alias: 'label' }]
+        }], ignore: [{
+            type: Input,
+            args: [{ alias: 'ignore' }]
+        }], variant: [{
+            type: Input,
+            args: [{ alias: 'variant' }]
+        }], selects: [{
+            type: Input,
+            args: [{ alias: 'selects' }]
+        }], value: [{
+            type: Input,
+            args: [{ alias: 'value' }]
+        }], valueSeparator: [{
+            type: Input,
+            args: [{ alias: 'valueSeparator' }]
+        }], selected: [{
+            type: Input,
+            args: [{ alias: 'selected' }]
+        }], selectedItems: [{
+            type: Input,
+            args: [{ alias: 'selectedItems' }]
+        }], menuSlot: [{
+            type: Input,
+            args: [{ alias: 'menuSlot' }]
+        }], focusedItemIndex: [{
+            type: Input,
+            args: [{ alias: 'focusedItemIndex' }]
+        }], focusInItemIndex: [{
+            type: Input,
+            args: [{ alias: 'focusInItemIndex' }]
+        }], handleSubmenuClosed: [{
+            type: Input,
+            args: [{ alias: 'handleSubmenuClosed' }]
+        }], handleSubmenuOpened: [{
+            type: Input,
+            args: [{ alias: 'handleSubmenuOpened' }]
+        }], changeEvent: [{ type: i0.Output, args: ["change"] }], closeEvent: [{ type: i0.Output, args: ["close"] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoMenuGroup, { className: "LuzmoMenuGroup", filePath: "components/menu-group.ts", lineNumber: 27 }); })();

package/esm/components/menu-item.d.ts

@@ -0,0 +1,64 @@
+import { OnChanges, SimpleChanges } from '@angular/core';
+import '@luzmo/lucero/menu';
+import type { LuzmoMenuItem as LuzmoMenuItemHostElement } from '@luzmo/lucero/menu';
+import * as i0 from "@angular/core";
+export type { MenuChildItem, MenuItemChildren } from '@luzmo/lucero/menu';
+export declare class LuzmoMenuItem implements OnChanges {
+    private readonly elementRef;
+    private readonly renderer;
+    private readonly destroyRef;
+    private readonly host;
+    private readonly listenerCleanup;
+    /** The underlying custom element instance. Use to call imperative methods. */
+    get nativeElement(): LuzmoMenuItemHostElement;
+    abortControllerSubmenu?: unknown;
+    active?: boolean;
+    focused?: boolean;
+    selected?: boolean;
+    value?: string;
+    hasSubmenu?: boolean;
+    tooltip?: string;
+    tooltipPlacement?: 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
+    contentSlot?: unknown;
+    iconSlot?: unknown;
+    noWrap?: boolean;
+    overlayElement?: unknown;
+    open?: boolean;
+    menuData?: unknown;
+    /** Causes the browser to treat the linked URL as a download. */
+    download?: string;
+    /** An accessible label that describes the component. It will be applied to aria-label, but not visually rendered. */
+    label?: string;
+    /** The URL that the hyperlink points to. */
+    href?: string;
+    /** Where to display the linked URL, as the name for a browsing context (a tab, window, or <iframe>). */
+    target?: '_blank' | '_parent' | '_self' | '_top';
+    /** How much of the referrer to send when following the link. */
+    referrerpolicy?: 'no-referrer' | 'no-referrer-when-downgrade' | 'origin' | 'origin-when-cross-origin' | 'same-origin' | 'strict-origin' | 'strict-origin-when-cross-origin' | 'unsafe-url';
+    /** The relationship of the linked URL as space-separated link types. */
+    rel?: string;
+    managePresenceObservedSlot?: unknown;
+    /** Disable this control. It will not receive focus or events */
+    disabled?: boolean;
+    /** The tab index to apply to this control. See general documentation about the tabindex HTML property */
+    tabIndex?: number;
+    /** announces the item has been added so a parent menu can take ownerships */
+    readonly luzmoMenuItemAddedEvent: import("@angular/core").OutputEmitterRef<CustomEvent<unknown>>;
+    /** Trick :focus-visible polyfill into thinking keyboard based focus */
+    readonly keydownEvent: import("@angular/core").OutputEmitterRef<unknown>;
+    constructor();
+    ngOnChanges(changes: SimpleChanges): void;
+    /**
+     * Forward a wrapper @Input to the underlying host element via Renderer2 so
+     * the wrapper stays compatible with non-DOM Angular platforms (SSR, tests).
+     * Unlike a "skip undefined" guard, this lets consumers reset values back to
+     * undefined / null by clearing their bindings.
+     */
+    private setHostProperty;
+    private bindEvents;
+    focus(options?: FocusOptions): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoMenuItem, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoMenuItem, "luzmo-menu-item", ["luzmoMenuItem"], { "abortControllerSubmenu": { "alias": "abortControllerSubmenu"; "required": false; }; "active": { "alias": "active"; "required": false; }; "focused": { "alias": "focused"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "value": { "alias": "value"; "required": false; }; "hasSubmenu": { "alias": "hasSubmenu"; "required": false; }; "tooltip": { "alias": "tooltip"; "required": false; }; "tooltipPlacement": { "alias": "tooltipPlacement"; "required": false; }; "contentSlot": { "alias": "contentSlot"; "required": false; }; "iconSlot": { "alias": "iconSlot"; "required": false; }; "noWrap": { "alias": "noWrap"; "required": false; }; "overlayElement": { "alias": "overlayElement"; "required": false; }; "open": { "alias": "open"; "required": false; }; "menuData": { "alias": "menuData"; "required": false; }; "download": { "alias": "download"; "required": false; }; "label": { "alias": "label"; "required": false; }; "href": { "alias": "href"; "required": false; }; "target": { "alias": "target"; "required": false; }; "referrerpolicy": { "alias": "referrerpolicy"; "required": false; }; "rel": { "alias": "rel"; "required": false; }; "managePresenceObservedSlot": { "alias": "managePresenceObservedSlot"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, { "luzmoMenuItemAddedEvent": "luzmo-menu-item-added"; "keydownEvent": "keydown"; }, never, ["*"], true, never>;
+}
+/** The underlying custom element type for LuzmoMenuItem */
+export type LuzmoMenuItemElement = LuzmoMenuItemHostElement;

package/esm/components/menu-item.js

@@ -0,0 +1,249 @@
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, output, Renderer2 } from '@angular/core';
+import '@luzmo/lucero/menu';
+import * as i0 from "@angular/core";
+const _c0 = ["*"];
+/**
+ * Angular wrapper component for <luzmo-menu-item>
+ *
+ * @slot (default) - text content to display within the Menu Item
+ * @slot description - description to be placed below the label of the Menu Item
+ * @slot icon - icon element to be placed at the start of the Menu Item
+ * @slot value - content placed at the end of the Menu Item like values, keyboard shortcuts, etc.
+ * @slot submenu - content placed in a submenu
+ */
+export class LuzmoMenuItem {
+    elementRef = inject(ElementRef);
+    renderer = inject(Renderer2);
+    destroyRef = inject(DestroyRef);
+    host = this.elementRef.nativeElement;
+    listenerCleanup = [];
+    /** The underlying custom element instance. Use to call imperative methods. */
+    get nativeElement() {
+        return this.host;
+    }
+    abortControllerSubmenu;
+    active;
+    focused;
+    selected;
+    value;
+    hasSubmenu;
+    tooltip;
+    tooltipPlacement;
+    contentSlot;
+    iconSlot;
+    noWrap;
+    overlayElement;
+    open;
+    menuData;
+    /** Causes the browser to treat the linked URL as a download. */
+    download;
+    /** An accessible label that describes the component. It will be applied to aria-label, but not visually rendered. */
+    label;
+    /** The URL that the hyperlink points to. */
+    href;
+    /** Where to display the linked URL, as the name for a browsing context (a tab, window, or &lt;iframe&gt;). */
+    target;
+    /** How much of the referrer to send when following the link. */
+    referrerpolicy;
+    /** The relationship of the linked URL as space-separated link types. */
+    rel;
+    managePresenceObservedSlot;
+    /** Disable this control. It will not receive focus or events */
+    disabled;
+    /** The tab index to apply to this control. See general documentation about the tabindex HTML property */
+    tabIndex;
+    /** announces the item has been added so a parent menu can take ownerships */
+    luzmoMenuItemAddedEvent = output({ alias: 'luzmo-menu-item-added' });
+    /** Trick :focus-visible polyfill into thinking keyboard based focus */
+    keydownEvent = output({ alias: 'keydown' });
+    constructor() {
+        this.bindEvents();
+        this.destroyRef.onDestroy(() => {
+            for (const cleanup of this.listenerCleanup) {
+                cleanup();
+            }
+        });
+    }
+    ngOnChanges(changes) {
+        for (const key of Object.keys(changes)) {
+            switch (key) {
+                case 'abortControllerSubmenu':
+                    this.setHostProperty('abortControllerSubmenu', changes['abortControllerSubmenu'].currentValue);
+                    break;
+                case 'active':
+                    this.setHostProperty('active', changes['active'].currentValue);
+                    break;
+                case 'focused':
+                    this.setHostProperty('focused', changes['focused'].currentValue);
+                    break;
+                case 'selected':
+                    this.setHostProperty('selected', changes['selected'].currentValue);
+                    break;
+                case 'value':
+                    this.setHostProperty('value', changes['value'].currentValue);
+                    break;
+                case 'hasSubmenu':
+                    this.setHostProperty('hasSubmenu', changes['hasSubmenu'].currentValue);
+                    break;
+                case 'tooltip':
+                    this.setHostProperty('tooltip', changes['tooltip'].currentValue);
+                    break;
+                case 'tooltipPlacement':
+                    this.setHostProperty('tooltipPlacement', changes['tooltipPlacement'].currentValue);
+                    break;
+                case 'contentSlot':
+                    this.setHostProperty('contentSlot', changes['contentSlot'].currentValue);
+                    break;
+                case 'iconSlot':
+                    this.setHostProperty('iconSlot', changes['iconSlot'].currentValue);
+                    break;
+                case 'noWrap':
+                    this.setHostProperty('noWrap', changes['noWrap'].currentValue);
+                    break;
+                case 'overlayElement':
+                    this.setHostProperty('overlayElement', changes['overlayElement'].currentValue);
+                    break;
+                case 'open':
+                    this.setHostProperty('open', changes['open'].currentValue);
+                    break;
+                case 'menuData':
+                    this.setHostProperty('menuData', changes['menuData'].currentValue);
+                    break;
+                case 'download':
+                    this.setHostProperty('download', changes['download'].currentValue);
+                    break;
+                case 'label':
+                    this.setHostProperty('label', changes['label'].currentValue);
+                    break;
+                case 'href':
+                    this.setHostProperty('href', changes['href'].currentValue);
+                    break;
+                case 'target':
+                    this.setHostProperty('target', changes['target'].currentValue);
+                    break;
+                case 'referrerpolicy':
+                    this.setHostProperty('referrerpolicy', changes['referrerpolicy'].currentValue);
+                    break;
+                case 'rel':
+                    this.setHostProperty('rel', changes['rel'].currentValue);
+                    break;
+                case 'managePresenceObservedSlot':
+                    this.setHostProperty('managePresenceObservedSlot', changes['managePresenceObservedSlot'].currentValue);
+                    break;
+                case 'disabled':
+                    this.setHostProperty('disabled', changes['disabled'].currentValue);
+                    break;
+                case 'tabIndex':
+                    this.setHostProperty('tabIndex', changes['tabIndex'].currentValue);
+                    break;
+                default:
+                    break;
+            }
+        }
+    }
+    /**
+     * Forward a wrapper @Input to the underlying host element via Renderer2 so
+     * the wrapper stays compatible with non-DOM Angular platforms (SSR, tests).
+     * Unlike a "skip undefined" guard, this lets consumers reset values back to
+     * undefined / null by clearing their bindings.
+     */
+    setHostProperty(key, value) {
+        this.renderer.setProperty(this.host, key, value);
+    }
+    bindEvents() {
+        this.listenerCleanup.push(this.renderer.listen(this.host, 'luzmo-menu-item-added', (event) => {
+            this.luzmoMenuItemAddedEvent.emit(event);
+        }));
+        this.listenerCleanup.push(this.renderer.listen(this.host, 'keydown', (event) => {
+            this.keydownEvent.emit(event);
+        }));
+    }
+    focus(options) {
+        return this.host.focus(options);
+    }
+    static ɵfac = function LuzmoMenuItem_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoMenuItem)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoMenuItem, selectors: [["luzmo-menu-item"]], inputs: { abortControllerSubmenu: "abortControllerSubmenu", active: "active", focused: "focused", selected: "selected", value: "value", hasSubmenu: "hasSubmenu", tooltip: "tooltip", tooltipPlacement: "tooltipPlacement", contentSlot: "contentSlot", iconSlot: "iconSlot", noWrap: "noWrap", overlayElement: "overlayElement", open: "open", menuData: "menuData", download: "download", label: "label", href: "href", target: "target", referrerpolicy: "referrerpolicy", rel: "rel", managePresenceObservedSlot: "managePresenceObservedSlot", disabled: "disabled", tabIndex: "tabIndex" }, outputs: { luzmoMenuItemAddedEvent: "luzmo-menu-item-added", keydownEvent: "keydown" }, exportAs: ["luzmoMenuItem"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoMenuItem_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵprojection(0);
+        } }, encapsulation: 2 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LuzmoMenuItem, [{
+        type: Component,
+        args: [{
+                selector: 'luzmo-menu-item',
+                exportAs: 'luzmoMenuItem',
+                standalone: true,
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content />'
+            }]
+    }], () => [], { abortControllerSubmenu: [{
+            type: Input,
+            args: [{ alias: 'abortControllerSubmenu' }]
+        }], active: [{
+            type: Input,
+            args: [{ alias: 'active' }]
+        }], focused: [{
+            type: Input,
+            args: [{ alias: 'focused' }]
+        }], selected: [{
+            type: Input,
+            args: [{ alias: 'selected' }]
+        }], value: [{
+            type: Input,
+            args: [{ alias: 'value' }]
+        }], hasSubmenu: [{
+            type: Input,
+            args: [{ alias: 'hasSubmenu' }]
+        }], tooltip: [{
+            type: Input,
+            args: [{ alias: 'tooltip' }]
+        }], tooltipPlacement: [{
+            type: Input,
+            args: [{ alias: 'tooltipPlacement' }]
+        }], contentSlot: [{
+            type: Input,
+            args: [{ alias: 'contentSlot' }]
+        }], iconSlot: [{
+            type: Input,
+            args: [{ alias: 'iconSlot' }]
+        }], noWrap: [{
+            type: Input,
+            args: [{ alias: 'noWrap' }]
+        }], overlayElement: [{
+            type: Input,
+            args: [{ alias: 'overlayElement' }]
+        }], open: [{
+            type: Input,
+            args: [{ alias: 'open' }]
+        }], menuData: [{
+            type: Input,
+            args: [{ alias: 'menuData' }]
+        }], download: [{
+            type: Input,
+            args: [{ alias: 'download' }]
+        }], label: [{
+            type: Input,
+            args: [{ alias: 'label' }]
+        }], href: [{
+            type: Input,
+            args: [{ alias: 'href' }]
+        }], target: [{
+            type: Input,
+            args: [{ alias: 'target' }]
+        }], referrerpolicy: [{
+            type: Input,
+            args: [{ alias: 'referrerpolicy' }]
+        }], rel: [{
+            type: Input,
+            args: [{ alias: 'rel' }]
+        }], managePresenceObservedSlot: [{
+            type: Input,
+            args: [{ alias: 'managePresenceObservedSlot' }]
+        }], disabled: [{
+            type: Input,
+            args: [{ alias: 'disabled' }]
+        }], tabIndex: [{
+            type: Input,
+            args: [{ alias: 'tabIndex' }]
+        }], luzmoMenuItemAddedEvent: [{ type: i0.Output, args: ["luzmo-menu-item-added"] }], keydownEvent: [{ type: i0.Output, args: ["keydown"] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoMenuItem, { className: "LuzmoMenuItem", filePath: "components/menu-item.ts", lineNumber: 22 }); })();

package/esm/components/menu.d.ts

@@ -3,6 +3,7 @@ import { ControlValueAccessor } from '@angular/forms';
 import '@luzmo/lucero/menu';
 import type { LuzmoMenu as LuzmoMenuHostElement } from '@luzmo/lucero/menu';
 import * as i0 from "@angular/core";
+export type { MenuChildItem, MenuItemChildren } from '@luzmo/lucero/menu';
 export declare class LuzmoMenu implements OnChanges, ControlValueAccessor {
     private readonly elementRef;
     private readonly renderer;

package/esm/components/menu.js

@@ -225,4 +225,4 @@ export class LuzmoMenu {
             type: Input,
             args: [{ alias: 'size' }]
         }], changeEvent: [{ type: i0.Output, args: ["change"] }], closeEvent: [{ type: i0.Output, args: ["close"] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoMenu, { className: "LuzmoMenu", filePath: "components/menu.ts", lineNumber: 25 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoMenu, { className: "LuzmoMenu", filePath: "components/menu.ts", lineNumber: 26 }); })();

package/esm/components/prompt-box.d.ts

@@ -1,8 +1,8 @@
 import { OnChanges, SimpleChanges } from '@angular/core';
 import '@luzmo/lucero/prompt-box';
-import type { LuzmoPromptBox as LuzmoPromptBoxHostElement, PromptBoxSegment, TriggerConfig } from '@luzmo/lucero/prompt-box';
+import type { LuzmoPromptBox as LuzmoPromptBoxHostElement, PromptBoxFileIcons, PromptBoxSegment, TriggerConfig } from '@luzmo/lucero/prompt-box';
 import * as i0 from "@angular/core";
-export type { ActionValue, PromptBoxAttachment, PromptBoxElement, PromptBoxElementInsertedDetail, PromptBoxElementRemovedDetail, PromptBoxRecordErrorDetail, PromptBoxRecordingCompleteDetail, PromptBoxSegment, PromptBoxSubmitDetail, TriggerConfig, TriggerMenuChangeDetail, TriggerMenuSelectDetail, TriggerOption } from '@luzmo/lucero/prompt-box';
+export type { ActionValue, PromptBoxAttachment, PromptBoxElement, PromptBoxElementInsertedDetail, PromptBoxElementRemovedDetail, PromptBoxFileIcons, PromptBoxRecordErrorDetail, PromptBoxRecordingCompleteDetail, PromptBoxSegment, PromptBoxSubmitDetail, TriggerConfig, TriggerMenuChangeDetail, TriggerMenuSelectDetail, TriggerOption } from '@luzmo/lucero/prompt-box';
 export declare class LuzmoPromptBox implements OnChanges {
     private readonly elementRef;
     private readonly renderer;
@@ -45,6 +45,10 @@ export declare class LuzmoPromptBox implements OnChanges {
     allowFiles?: boolean;
     /** Accepted file types for attachments (MIME types or extensions). */
     acceptedFileTypes?: string[];
+    /** Custom icons for file attachment tiles, keyed by extension without a leading dot (e.g. `pdf`, `csv`, `svg`). Merged over the built-in defaults (`DEFAULT_FILE_ICONS`); unmatched extensions fall back to the generic document icon.  ```ts promptBox.fileIcons = {   pdf: luzmoHeart,   svg: luzmoFileImage }; ``` */
+    fileIcons?: PromptBoxFileIcons;
+    /** Formats the accessible name for attachment remove buttons. Override to localize; receives the file name.  ```ts promptBox.removeAttachmentLabel = (name) => `Verwijder ${name}`; ``` */
+    removeAttachmentLabel?: unknown;
     /** Whether to enable rich input mode with inline element badges. When enabled, the textarea is replaced with a contenteditable div. */
     allowElements?: boolean;
     /** Optional filter for accepted element types during drag-and-drop. */
@@ -87,7 +91,7 @@ export declare class LuzmoPromptBox implements OnChanges {
     clear(): void;
     submit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoPromptBox, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoPromptBox, "luzmo-prompt-box", ["luzmoPromptBox"], { "rows": { "alias": "rows"; "required": false; }; "grows": { "alias": "grows"; "required": false; }; "maxRows": { "alias": "maxRows"; "required": false; }; "recording": { "alias": "recording"; "required": false; }; "hideSubmit": { "alias": "hideSubmit"; "required": false; }; "disableSubmit": { "alias": "disableSubmit"; "required": false; }; "singleLine": { "alias": "singleLine"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "value": { "alias": "value"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "maxlength": { "alias": "maxlength"; "required": false; }; "pending": { "alias": "pending"; "required": false; }; "stoppable": { "alias": "stoppable"; "required": false; }; "allowImages": { "alias": "allowImages"; "required": false; }; "allowFiles": { "alias": "allowFiles"; "required": false; }; "acceptedFileTypes": { "alias": "acceptedFileTypes"; "required": false; }; "allowElements": { "alias": "allowElements"; "required": false; }; "acceptedElementTypes": { "alias": "acceptedElementTypes"; "required": false; }; "triggers": { "alias": "triggers"; "required": false; }; "segments": { "alias": "segments"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, { "luzmoSubmitEvent": "luzmo-submit"; "luzmoStopEvent": "luzmo-stop"; "luzmoTriggerChangeEvent": "luzmo-trigger-change"; "luzmoElementInsertedEvent": "luzmo-element-inserted"; "luzmoElementRemovedEvent": "luzmo-element-removed"; "luzmoAttachmentsChangeEvent": "luzmo-attachments-change"; "luzmoRecordEvent": "luzmo-record"; "luzmoRecordingCompleteEvent": "luzmo-recording-complete"; "luzmoRecordCancelEvent": "luzmo-record-cancel"; "luzmoRecordErrorEvent": "luzmo-record-error"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoPromptBox, "luzmo-prompt-box", ["luzmoPromptBox"], { "rows": { "alias": "rows"; "required": false; }; "grows": { "alias": "grows"; "required": false; }; "maxRows": { "alias": "maxRows"; "required": false; }; "recording": { "alias": "recording"; "required": false; }; "hideSubmit": { "alias": "hideSubmit"; "required": false; }; "disableSubmit": { "alias": "disableSubmit"; "required": false; }; "singleLine": { "alias": "singleLine"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "value": { "alias": "value"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "maxlength": { "alias": "maxlength"; "required": false; }; "pending": { "alias": "pending"; "required": false; }; "stoppable": { "alias": "stoppable"; "required": false; }; "allowImages": { "alias": "allowImages"; "required": false; }; "allowFiles": { "alias": "allowFiles"; "required": false; }; "acceptedFileTypes": { "alias": "acceptedFileTypes"; "required": false; }; "fileIcons": { "alias": "fileIcons"; "required": false; }; "removeAttachmentLabel": { "alias": "removeAttachmentLabel"; "required": false; }; "allowElements": { "alias": "allowElements"; "required": false; }; "acceptedElementTypes": { "alias": "acceptedElementTypes"; "required": false; }; "triggers": { "alias": "triggers"; "required": false; }; "segments": { "alias": "segments"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, { "luzmoSubmitEvent": "luzmo-submit"; "luzmoStopEvent": "luzmo-stop"; "luzmoTriggerChangeEvent": "luzmo-trigger-change"; "luzmoElementInsertedEvent": "luzmo-element-inserted"; "luzmoElementRemovedEvent": "luzmo-element-removed"; "luzmoAttachmentsChangeEvent": "luzmo-attachments-change"; "luzmoRecordEvent": "luzmo-record"; "luzmoRecordingCompleteEvent": "luzmo-recording-complete"; "luzmoRecordCancelEvent": "luzmo-record-cancel"; "luzmoRecordErrorEvent": "luzmo-record-error"; }, never, ["*"], true, never>;
 }
 /** The underlying custom element type for LuzmoPromptBox */
 export type LuzmoPromptBoxElement = LuzmoPromptBoxHostElement;

package/esm/components/prompt-box.js

@@ -55,6 +55,10 @@ export class LuzmoPromptBox {
     allowFiles;
     /** Accepted file types for attachments (MIME types or extensions). */
     acceptedFileTypes;
+    /** Custom icons for file attachment tiles, keyed by extension without a leading dot (e.g. `pdf`, `csv`, `svg`). Merged over the built-in defaults (`DEFAULT_FILE_ICONS`); unmatched extensions fall back to the generic document icon.  ```ts promptBox.fileIcons = {   pdf: luzmoHeart,   svg: luzmoFileImage }; ``` */
+    fileIcons;
+    /** Formats the accessible name for attachment remove buttons. Override to localize; receives the file name.  ```ts promptBox.removeAttachmentLabel = (name) => `Verwijder ${name}`; ``` */
+    removeAttachmentLabel;
     /** Whether to enable rich input mode with inline element badges. When enabled, the textarea is replaced with a contenteditable div. */
     allowElements;
     /** Optional filter for accepted element types during drag-and-drop. */
@@ -145,6 +149,12 @@ export class LuzmoPromptBox {
                 case 'acceptedFileTypes':
                     this.setHostProperty('acceptedFileTypes', changes['acceptedFileTypes'].currentValue);
                     break;
+                case 'fileIcons':
+                    this.setHostProperty('fileIcons', changes['fileIcons'].currentValue);
+                    break;
+                case 'removeAttachmentLabel':
+                    this.setHostProperty('removeAttachmentLabel', changes['removeAttachmentLabel'].currentValue);
+                    break;
                 case 'allowElements':
                     this.setHostProperty('allowElements', changes['allowElements'].currentValue);
                     break;
@@ -216,7 +226,7 @@ export class LuzmoPromptBox {
         return this.host.submit();
     }
     static ɵfac = function LuzmoPromptBox_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoPromptBox)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoPromptBox, selectors: [["luzmo-prompt-box"]], inputs: { rows: "rows", grows: "grows", maxRows: "maxRows", recording: "recording", hideSubmit: "hideSubmit", disableSubmit: "disableSubmit", singleLine: "singleLine", placeholder: "placeholder", value: "value", disabled: "disabled", readonly: "readonly", maxlength: "maxlength", pending: "pending", stoppable: "stoppable", allowImages: "allowImages", allowFiles: "allowFiles", acceptedFileTypes: "acceptedFileTypes", allowElements: "allowElements", acceptedElementTypes: "acceptedElementTypes", triggers: "triggers", segments: "segments", size: "size" }, outputs: { luzmoSubmitEvent: "luzmo-submit", luzmoStopEvent: "luzmo-stop", luzmoTriggerChangeEvent: "luzmo-trigger-change", luzmoElementInsertedEvent: "luzmo-element-inserted", luzmoElementRemovedEvent: "luzmo-element-removed", luzmoAttachmentsChangeEvent: "luzmo-attachments-change", luzmoRecordEvent: "luzmo-record", luzmoRecordingCompleteEvent: "luzmo-recording-complete", luzmoRecordCancelEvent: "luzmo-record-cancel", luzmoRecordErrorEvent: "luzmo-record-error" }, exportAs: ["luzmoPromptBox"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoPromptBox_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoPromptBox, selectors: [["luzmo-prompt-box"]], inputs: { rows: "rows", grows: "grows", maxRows: "maxRows", recording: "recording", hideSubmit: "hideSubmit", disableSubmit: "disableSubmit", singleLine: "singleLine", placeholder: "placeholder", value: "value", disabled: "disabled", readonly: "readonly", maxlength: "maxlength", pending: "pending", stoppable: "stoppable", allowImages: "allowImages", allowFiles: "allowFiles", acceptedFileTypes: "acceptedFileTypes", fileIcons: "fileIcons", removeAttachmentLabel: "removeAttachmentLabel", allowElements: "allowElements", acceptedElementTypes: "acceptedElementTypes", triggers: "triggers", segments: "segments", size: "size" }, outputs: { luzmoSubmitEvent: "luzmo-submit", luzmoStopEvent: "luzmo-stop", luzmoTriggerChangeEvent: "luzmo-trigger-change", luzmoElementInsertedEvent: "luzmo-element-inserted", luzmoElementRemovedEvent: "luzmo-element-removed", luzmoAttachmentsChangeEvent: "luzmo-attachments-change", luzmoRecordEvent: "luzmo-record", luzmoRecordingCompleteEvent: "luzmo-recording-complete", luzmoRecordCancelEvent: "luzmo-record-cancel", luzmoRecordErrorEvent: "luzmo-record-error" }, exportAs: ["luzmoPromptBox"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoPromptBox_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
         } }, encapsulation: 2 });
@@ -281,6 +291,12 @@ export class LuzmoPromptBox {
         }], acceptedFileTypes: [{
             type: Input,
             args: [{ alias: 'acceptedFileTypes' }]
+        }], fileIcons: [{
+            type: Input,
+            args: [{ alias: 'fileIcons' }]
+        }], removeAttachmentLabel: [{
+            type: Input,
+            args: [{ alias: 'removeAttachmentLabel' }]
         }], allowElements: [{
             type: Input,
             args: [{ alias: 'allowElements' }]

package/esm/index.d.ts

@@ -33,6 +33,9 @@ import { LuzmoIcon } from './components/icon.js';
 import { LuzmoInfieldButton } from './components/infield-button.js';
 import { LuzmoLabel } from './components/label.js';
 import { LuzmoMenu } from './components/menu.js';
+import { LuzmoMenuDivider } from './components/menu-divider.js';
+import { LuzmoMenuGroup } from './components/menu-group.js';
+import { LuzmoMenuItem } from './components/menu-item.js';
 import { LuzmoMultiLanguageField } from './components/multi-language-field.js';
 import { LuzmoNumberField } from './components/number-field.js';
 import { LuzmoOptions } from './components/options.js';
@@ -100,6 +103,9 @@ export { LuzmoIcon, type LuzmoIconElement } from './components/icon.js';
 export { LuzmoInfieldButton, type LuzmoInfieldButtonElement } from './components/infield-button.js';
 export { LuzmoLabel, type LuzmoLabelElement } from './components/label.js';
 export { LuzmoMenu, type LuzmoMenuElement } from './components/menu.js';
+export { LuzmoMenuDivider, type LuzmoMenuDividerElement } from './components/menu-divider.js';
+export { LuzmoMenuGroup, type LuzmoMenuGroupElement } from './components/menu-group.js';
+export { LuzmoMenuItem, type LuzmoMenuItemElement } from './components/menu-item.js';
 export { LuzmoMultiLanguageField, type LuzmoMultiLanguageFieldElement } from './components/multi-language-field.js';
 export { LuzmoNumberField, type LuzmoNumberFieldElement } from './components/number-field.js';
 export { LuzmoOptions, type LuzmoOptionsElement } from './components/options.js';
@@ -132,6 +138,6 @@ export { LuzmoToast, type LuzmoToastElement } from './components/toast.js';
 export { LuzmoTooltip, type LuzmoTooltipElement } from './components/tooltip.js';
 export { LuzmoTopNav, type LuzmoTopNavElement } from './components/top-nav.js';
 export { LuzmoTopNavItem, type LuzmoTopNavItemElement } from './components/top-nav-item.js';
-export declare const LUZMO_ANGULAR_COMPONENTS: readonly [typeof LuzmoAccordion, typeof LuzmoAccordionItem, typeof LuzmoActionBar, typeof LuzmoActionButton, typeof LuzmoActionGroup, typeof LuzmoActionMenu, typeof LuzmoAvatar, typeof LuzmoBadge, typeof LuzmoButton, typeof LuzmoButtonGroup, typeof LuzmoCalendar, typeof LuzmoChatMessage, typeof LuzmoChatMessageGroup, typeof LuzmoCheckbox, typeof LuzmoClearButton, typeof LuzmoCloseButton, typeof LuzmoColorArea, typeof LuzmoColorField, typeof LuzmoColorHandle, typeof LuzmoColorLoupe, typeof LuzmoColorMenu, typeof LuzmoColorPalette, typeof LuzmoColorPaletteGroup, typeof LuzmoColorPicker, typeof LuzmoColorSlider, typeof LuzmoDateRangePicker, typeof LuzmoDateTimePicker, typeof LuzmoDivider, typeof LuzmoFieldGroup, typeof LuzmoFieldLabel, typeof LuzmoHelpText, typeof LuzmoIcon, typeof LuzmoInfieldButton, typeof LuzmoLabel, typeof LuzmoMenu, typeof LuzmoMultiLanguageField, typeof LuzmoNumberField, typeof LuzmoOptions, typeof LuzmoOverlay, typeof LuzmoPicker, typeof LuzmoPickerButton, typeof LuzmoPopover, typeof LuzmoProgressBar, typeof LuzmoProgressCircle, typeof LuzmoProgressSteps, typeof LuzmoPromptBox, typeof LuzmoRadio, typeof LuzmoRadioGroup, typeof LuzmoSearch, typeof LuzmoSelect, typeof LuzmoSkeletonLoader, typeof LuzmoSlider, typeof LuzmoStatusLight, typeof LuzmoSwatch, typeof LuzmoSwatchGroup, typeof LuzmoSwitch, typeof LuzmoTab, typeof LuzmoTabPanel, typeof LuzmoTabs, typeof LuzmoTabsOverflow, typeof LuzmoTag, typeof LuzmoTags, typeof LuzmoTextField, typeof LuzmoToast, typeof LuzmoTooltip, typeof LuzmoTopNav, typeof LuzmoTopNavItem];
-export declare const LUZMO_ANGULAR_COMPONENT_NAMES: readonly ["LuzmoAccordion", "LuzmoAccordionItem", "LuzmoActionBar", "LuzmoActionButton", "LuzmoActionGroup", "LuzmoActionMenu", "LuzmoAvatar", "LuzmoBadge", "LuzmoButton", "LuzmoButtonGroup", "LuzmoCalendar", "LuzmoChatMessage", "LuzmoChatMessageGroup", "LuzmoCheckbox", "LuzmoClearButton", "LuzmoCloseButton", "LuzmoColorArea", "LuzmoColorField", "LuzmoColorHandle", "LuzmoColorLoupe", "LuzmoColorMenu", "LuzmoColorPalette", "LuzmoColorPaletteGroup", "LuzmoColorPicker", "LuzmoColorSlider", "LuzmoDateRangePicker", "LuzmoDateTimePicker", "LuzmoDivider", "LuzmoFieldGroup", "LuzmoFieldLabel", "LuzmoHelpText", "LuzmoIcon", "LuzmoInfieldButton", "LuzmoLabel", "LuzmoMenu", "LuzmoMultiLanguageField", "LuzmoNumberField", "LuzmoOptions", "LuzmoOverlay", "LuzmoPicker", "LuzmoPickerButton", "LuzmoPopover", "LuzmoProgressBar", "LuzmoProgressCircle", "LuzmoProgressSteps", "LuzmoPromptBox", "LuzmoRadio", "LuzmoRadioGroup", "LuzmoSearch", "LuzmoSelect", "LuzmoSkeletonLoader", "LuzmoSlider", "LuzmoStatusLight", "LuzmoSwatch", "LuzmoSwatchGroup", "LuzmoSwitch", "LuzmoTab", "LuzmoTabPanel", "LuzmoTabs", "LuzmoTabsOverflow", "LuzmoTag", "LuzmoTags", "LuzmoTextField", "LuzmoToast", "LuzmoTooltip", "LuzmoTopNav", "LuzmoTopNavItem"];
+export declare const LUZMO_ANGULAR_COMPONENTS: readonly [typeof LuzmoAccordion, typeof LuzmoAccordionItem, typeof LuzmoActionBar, typeof LuzmoActionButton, typeof LuzmoActionGroup, typeof LuzmoActionMenu, typeof LuzmoAvatar, typeof LuzmoBadge, typeof LuzmoButton, typeof LuzmoButtonGroup, typeof LuzmoCalendar, typeof LuzmoChatMessage, typeof LuzmoChatMessageGroup, typeof LuzmoCheckbox, typeof LuzmoClearButton, typeof LuzmoCloseButton, typeof LuzmoColorArea, typeof LuzmoColorField, typeof LuzmoColorHandle, typeof LuzmoColorLoupe, typeof LuzmoColorMenu, typeof LuzmoColorPalette, typeof LuzmoColorPaletteGroup, typeof LuzmoColorPicker, typeof LuzmoColorSlider, typeof LuzmoDateRangePicker, typeof LuzmoDateTimePicker, typeof LuzmoDivider, typeof LuzmoFieldGroup, typeof LuzmoFieldLabel, typeof LuzmoHelpText, typeof LuzmoIcon, typeof LuzmoInfieldButton, typeof LuzmoLabel, typeof LuzmoMenu, typeof LuzmoMenuDivider, typeof LuzmoMenuGroup, typeof LuzmoMenuItem, typeof LuzmoMultiLanguageField, typeof LuzmoNumberField, typeof LuzmoOptions, typeof LuzmoOverlay, typeof LuzmoPicker, typeof LuzmoPickerButton, typeof LuzmoPopover, typeof LuzmoProgressBar, typeof LuzmoProgressCircle, typeof LuzmoProgressSteps, typeof LuzmoPromptBox, typeof LuzmoRadio, typeof LuzmoRadioGroup, typeof LuzmoSearch, typeof LuzmoSelect, typeof LuzmoSkeletonLoader, typeof LuzmoSlider, typeof LuzmoStatusLight, typeof LuzmoSwatch, typeof LuzmoSwatchGroup, typeof LuzmoSwitch, typeof LuzmoTab, typeof LuzmoTabPanel, typeof LuzmoTabs, typeof LuzmoTabsOverflow, typeof LuzmoTag, typeof LuzmoTags, typeof LuzmoTextField, typeof LuzmoToast, typeof LuzmoTooltip, typeof LuzmoTopNav, typeof LuzmoTopNavItem];
+export declare const LUZMO_ANGULAR_COMPONENT_NAMES: readonly ["LuzmoAccordion", "LuzmoAccordionItem", "LuzmoActionBar", "LuzmoActionButton", "LuzmoActionGroup", "LuzmoActionMenu", "LuzmoAvatar", "LuzmoBadge", "LuzmoButton", "LuzmoButtonGroup", "LuzmoCalendar", "LuzmoChatMessage", "LuzmoChatMessageGroup", "LuzmoCheckbox", "LuzmoClearButton", "LuzmoCloseButton", "LuzmoColorArea", "LuzmoColorField", "LuzmoColorHandle", "LuzmoColorLoupe", "LuzmoColorMenu", "LuzmoColorPalette", "LuzmoColorPaletteGroup", "LuzmoColorPicker", "LuzmoColorSlider", "LuzmoDateRangePicker", "LuzmoDateTimePicker", "LuzmoDivider", "LuzmoFieldGroup", "LuzmoFieldLabel", "LuzmoHelpText", "LuzmoIcon", "LuzmoInfieldButton", "LuzmoLabel", "LuzmoMenu", "LuzmoMenuDivider", "LuzmoMenuGroup", "LuzmoMenuItem", "LuzmoMultiLanguageField", "LuzmoNumberField", "LuzmoOptions", "LuzmoOverlay", "LuzmoPicker", "LuzmoPickerButton", "LuzmoPopover", "LuzmoProgressBar", "LuzmoProgressCircle", "LuzmoProgressSteps", "LuzmoPromptBox", "LuzmoRadio", "LuzmoRadioGroup", "LuzmoSearch", "LuzmoSelect", "LuzmoSkeletonLoader", "LuzmoSlider", "LuzmoStatusLight", "LuzmoSwatch", "LuzmoSwatchGroup", "LuzmoSwitch", "LuzmoTab", "LuzmoTabPanel", "LuzmoTabs", "LuzmoTabsOverflow", "LuzmoTag", "LuzmoTags", "LuzmoTextField", "LuzmoToast", "LuzmoTooltip", "LuzmoTopNav", "LuzmoTopNavItem"];
 export type LuzmoAngularComponentName = (typeof LUZMO_ANGULAR_COMPONENT_NAMES)[number];

package/esm/index.js

@@ -34,6 +34,9 @@ import { LuzmoIcon } from './components/icon.js';
 import { LuzmoInfieldButton } from './components/infield-button.js';
 import { LuzmoLabel } from './components/label.js';
 import { LuzmoMenu } from './components/menu.js';
+import { LuzmoMenuDivider } from './components/menu-divider.js';
+import { LuzmoMenuGroup } from './components/menu-group.js';
+import { LuzmoMenuItem } from './components/menu-item.js';
 import { LuzmoMultiLanguageField } from './components/multi-language-field.js';
 import { LuzmoNumberField } from './components/number-field.js';
 import { LuzmoOptions } from './components/options.js';
@@ -101,6 +104,9 @@ export { LuzmoIcon } from './components/icon.js';
 export { LuzmoInfieldButton } from './components/infield-button.js';
 export { LuzmoLabel } from './components/label.js';
 export { LuzmoMenu } from './components/menu.js';
+export { LuzmoMenuDivider } from './components/menu-divider.js';
+export { LuzmoMenuGroup } from './components/menu-group.js';
+export { LuzmoMenuItem } from './components/menu-item.js';
 export { LuzmoMultiLanguageField } from './components/multi-language-field.js';
 export { LuzmoNumberField } from './components/number-field.js';
 export { LuzmoOptions } from './components/options.js';
@@ -169,6 +175,9 @@ export const LUZMO_ANGULAR_COMPONENTS = [
     LuzmoInfieldButton,
     LuzmoLabel,
     LuzmoMenu,
+    LuzmoMenuDivider,
+    LuzmoMenuGroup,
+    LuzmoMenuItem,
     LuzmoMultiLanguageField,
     LuzmoNumberField,
     LuzmoOptions,
@@ -238,6 +247,9 @@ export const LUZMO_ANGULAR_COMPONENT_NAMES = [
     'LuzmoInfieldButton',
     'LuzmoLabel',
     'LuzmoMenu',
+    'LuzmoMenuDivider',
+    'LuzmoMenuGroup',
+    'LuzmoMenuItem',
     'LuzmoMultiLanguageField',
     'LuzmoNumberField',
     'LuzmoOptions',

package/package.json

@@ -29,9 +29,9 @@
   "peerDependencies": {
     "@angular/core": "^17.3.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0 || ^22.0.0",
     "@angular/forms": "^17.3.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0 || ^22.0.0",
-    "@luzmo/lucero": "1.0.3-alpha.7"
+    "@luzmo/lucero": "1.0.3-alpha.9"
   },
-  "version": "1.0.3-alpha.7",
+  "version": "1.0.3-alpha.9",
   "peerDependenciesMeta": {
     "@angular/forms": {
       "optional": true