@luzmo/ngx-lucero 1.0.3-alpha.13 → 1.0.3-alpha.15

package/esm/components/option.d.ts

@@ -0,0 +1,68 @@
+import { OnChanges, SimpleChanges } from '@angular/core';
+import '@luzmo/lucero/options';
+import type { LuzmoOption as LuzmoOptionHostElement } from '@luzmo/lucero/options';
+import * as i0 from "@angular/core";
+export type { FlatOptionValue, OptionChildren, OptionIconRenderer, OptionValue } from '@luzmo/lucero/options';
+export declare class LuzmoOption 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(): LuzmoOptionHostElement;
+    active?: boolean;
+    focused?: boolean;
+    selected?: boolean;
+    emphasized?: boolean;
+    /** Whether this option has children and can be expanded/collapsed. */
+    expandable?: boolean;
+    /** Whether this expandable option is currently expanded. */
+    expanded?: boolean;
+    /** Whether this option is a child of an expandable parent. */
+    childOption?: boolean;
+    /** Whether this expandable parent has at least one selected child. */
+    hasSelectedChild?: boolean;
+    /** Type of visual selection */
+    variant?: 'checkmarks' | 'checkboxes' | 'highlight';
+    value?: string | number;
+    contentSlot?: unknown;
+    iconSlot?: unknown;
+    noWrap?: boolean;
+    /** 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 luzmoOptionAddedEvent: 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<LuzmoOption, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoOption, "luzmo-option", ["luzmoOption"], { "active": { "alias": "active"; "required": false; }; "focused": { "alias": "focused"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "emphasized": { "alias": "emphasized"; "required": false; }; "expandable": { "alias": "expandable"; "required": false; }; "expanded": { "alias": "expanded"; "required": false; }; "childOption": { "alias": "childOption"; "required": false; }; "hasSelectedChild": { "alias": "hasSelectedChild"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "value": { "alias": "value"; "required": false; }; "contentSlot": { "alias": "contentSlot"; "required": false; }; "iconSlot": { "alias": "iconSlot"; "required": false; }; "noWrap": { "alias": "noWrap"; "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; }; }, { "luzmoOptionAddedEvent": "luzmo-option-added"; "keydownEvent": "keydown"; }, never, ["*"], true, never>;
+}
+/** The underlying custom element type for LuzmoOption */
+export type LuzmoOptionElement = LuzmoOptionHostElement;

package/esm/components/option.js

@@ -0,0 +1,246 @@
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, output, Renderer2 } from '@angular/core';
+import '@luzmo/lucero/options';
+import * as i0 from "@angular/core";
+const _c0 = ["*"];
+/**
+ * Angular wrapper component for <luzmo-option>
+ *
+ * @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.
+ */
+export class LuzmoOption {
+    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;
+    }
+    active;
+    focused;
+    selected;
+    emphasized;
+    /** Whether this option has children and can be expanded/collapsed. */
+    expandable;
+    /** Whether this expandable option is currently expanded. */
+    expanded;
+    /** Whether this option is a child of an expandable parent. */
+    childOption;
+    /** Whether this expandable parent has at least one selected child. */
+    hasSelectedChild;
+    /** Type of visual selection */
+    variant;
+    value;
+    contentSlot;
+    iconSlot;
+    noWrap;
+    /** 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 */
+    luzmoOptionAddedEvent = output({ alias: 'luzmo-option-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 '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 'emphasized':
+                    this.setHostProperty('emphasized', changes['emphasized'].currentValue);
+                    break;
+                case 'expandable':
+                    this.setHostProperty('expandable', changes['expandable'].currentValue);
+                    break;
+                case 'expanded':
+                    this.setHostProperty('expanded', changes['expanded'].currentValue);
+                    break;
+                case 'childOption':
+                    this.setHostProperty('childOption', changes['childOption'].currentValue);
+                    break;
+                case 'hasSelectedChild':
+                    this.setHostProperty('hasSelectedChild', changes['hasSelectedChild'].currentValue);
+                    break;
+                case 'variant':
+                    this.setHostProperty('variant', changes['variant'].currentValue);
+                    break;
+                case 'value':
+                    this.setHostProperty('value', changes['value'].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 '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-option-added', (event) => {
+            this.luzmoOptionAddedEvent.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 LuzmoOption_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoOption)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoOption, selectors: [["luzmo-option"]], inputs: { active: "active", focused: "focused", selected: "selected", emphasized: "emphasized", expandable: "expandable", expanded: "expanded", childOption: "childOption", hasSelectedChild: "hasSelectedChild", variant: "variant", value: "value", contentSlot: "contentSlot", iconSlot: "iconSlot", noWrap: "noWrap", download: "download", label: "label", href: "href", target: "target", referrerpolicy: "referrerpolicy", rel: "rel", managePresenceObservedSlot: "managePresenceObservedSlot", disabled: "disabled", tabIndex: "tabIndex" }, outputs: { luzmoOptionAddedEvent: "luzmo-option-added", keydownEvent: "keydown" }, exportAs: ["luzmoOption"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoOption_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵprojection(0);
+        } }, encapsulation: 2 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LuzmoOption, [{
+        type: Component,
+        args: [{
+                selector: 'luzmo-option',
+                exportAs: 'luzmoOption',
+                standalone: true,
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content />'
+            }]
+    }], () => [], { active: [{
+            type: Input,
+            args: [{ alias: 'active' }]
+        }], focused: [{
+            type: Input,
+            args: [{ alias: 'focused' }]
+        }], selected: [{
+            type: Input,
+            args: [{ alias: 'selected' }]
+        }], emphasized: [{
+            type: Input,
+            args: [{ alias: 'emphasized' }]
+        }], expandable: [{
+            type: Input,
+            args: [{ alias: 'expandable' }]
+        }], expanded: [{
+            type: Input,
+            args: [{ alias: 'expanded' }]
+        }], childOption: [{
+            type: Input,
+            args: [{ alias: 'childOption' }]
+        }], hasSelectedChild: [{
+            type: Input,
+            args: [{ alias: 'hasSelectedChild' }]
+        }], variant: [{
+            type: Input,
+            args: [{ alias: 'variant' }]
+        }], value: [{
+            type: Input,
+            args: [{ alias: 'value' }]
+        }], contentSlot: [{
+            type: Input,
+            args: [{ alias: 'contentSlot' }]
+        }], iconSlot: [{
+            type: Input,
+            args: [{ alias: 'iconSlot' }]
+        }], noWrap: [{
+            type: Input,
+            args: [{ alias: 'noWrap' }]
+        }], 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' }]
+        }], luzmoOptionAddedEvent: [{ type: i0.Output, args: ["luzmo-option-added"] }], keydownEvent: [{ type: i0.Output, args: ["keydown"] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoOption, { className: "LuzmoOption", filePath: "components/option.ts", lineNumber: 21 }); })();

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

@@ -0,0 +1,29 @@
+import { OnChanges, SimpleChanges } from '@angular/core';
+import '@luzmo/lucero/options';
+import type { LuzmoOptionsDivider as LuzmoOptionsDividerHostElement } from '@luzmo/lucero/options';
+import * as i0 from "@angular/core";
+export type { FlatOptionValue, OptionChildren, OptionIconRenderer, OptionValue } from '@luzmo/lucero/options';
+export declare class LuzmoOptionsDivider 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(): LuzmoOptionsDividerHostElement;
+    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<LuzmoOptionsDivider, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoOptionsDivider, "luzmo-options-divider", ["luzmoOptionsDivider"], { "size": { "alias": "size"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+/** The underlying custom element type for LuzmoOptionsDivider */
+export type LuzmoOptionsDividerElement = LuzmoOptionsDividerHostElement;

package/esm/components/options-divider.js

@@ -0,0 +1,69 @@
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, Renderer2 } from '@angular/core';
+import '@luzmo/lucero/options';
+import * as i0 from "@angular/core";
+const _c0 = ["*"];
+/**
+ * Angular wrapper component for <luzmo-options-divider>
+ */
+export class LuzmoOptionsDivider {
+    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 LuzmoOptionsDivider_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoOptionsDivider)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoOptionsDivider, selectors: [["luzmo-options-divider"]], inputs: { size: "size" }, exportAs: ["luzmoOptionsDivider"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoOptionsDivider_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵprojection(0);
+        } }, encapsulation: 2 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LuzmoOptionsDivider, [{
+        type: Component,
+        args: [{
+                selector: 'luzmo-options-divider',
+                exportAs: 'luzmoOptionsDivider',
+                standalone: true,
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content />'
+            }]
+    }], () => [], { size: [{
+            type: Input,
+            args: [{ alias: 'size' }]
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoOptionsDivider, { className: "LuzmoOptionsDivider", filePath: "components/options-divider.ts", lineNumber: 16 }); })();

package/esm/components/options.d.ts

@@ -1,8 +1,9 @@
 import { OnChanges, SimpleChanges } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import '@luzmo/lucero/options';
-import type { LuzmoOptions as LuzmoOptionsHostElement } from '@luzmo/lucero/options';
+import type { LuzmoOptions as LuzmoOptionsHostElement, OptionIconRenderer, OptionValue } from '@luzmo/lucero/options';
 import * as i0 from "@angular/core";
+export type { FlatOptionValue, OptionChildren, OptionIconRenderer, OptionValue } from '@luzmo/lucero/options';
 export declare class LuzmoOptions implements OnChanges, ControlValueAccessor {
     private readonly elementRef;
     private readonly renderer;
@@ -17,12 +18,12 @@ export declare class LuzmoOptions implements OnChanges, ControlValueAccessor {
     emphasized?: boolean;
     pending?: boolean;
     /** options - The options to be listed in the options menu OptionValue is an object with the following properties: - label: string - value: string | number | null - disabled: boolean - divider: boolean - icon: IconDefinition - imgSrc: string */
-    options?: unknown;
+    options?: OptionValue[];
     noWrap?: boolean;
     /** value - The value of the selected options */
     value?: string | number | null;
     /** Optional icon renderer callback for option icon area. When it returns null, default icon rendering is used. */
-    optionIconRenderer?: unknown;
+    optionIconRenderer?: OptionIconRenderer;
     size?: ('xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl');
     /** Announces that the user has scrolled within the options menu. Only fires when the options menu is virtualized. */
     readonly luzmoScrolledEvent: import("@angular/core").OutputEmitterRef<CustomEvent<unknown>>;

package/esm/components/options.js

@@ -214,4 +214,4 @@ export class LuzmoOptions {
             type: Input,
             args: [{ alias: 'size' }]
         }], luzmoScrolledEvent: [{ type: i0.Output, args: ["luzmo-scrolled"] }], changeEvent: [{ type: i0.Output, args: ["change"] }], luzmoExceededTopEvent: [{ type: i0.Output, args: ["luzmo-exceeded-top"] }], luzmoExceededBottomEvent: [{ type: i0.Output, args: ["luzmo-exceeded-bottom"] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoOptions, { className: "LuzmoOptions", filePath: "components/options.ts", lineNumber: 25 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoOptions, { className: "LuzmoOptions", filePath: "components/options.ts", lineNumber: 26 }); })();

package/esm/components/overlay-trigger.d.ts

@@ -0,0 +1,45 @@
+import { OnChanges, SimpleChanges } from '@angular/core';
+import '@luzmo/lucero/overlay';
+import type { LuzmoOverlayTrigger as LuzmoOverlayTriggerHostElement, LuzmoOverlay, OverlayContentTypes, TriggeredByType } from '@luzmo/lucero/overlay';
+import type { Placement as __extt_Placement } from '@floating-ui/dom';
+import * as i0 from "@angular/core";
+export type { OverlayContentTypes, TriggeredByType } from '@luzmo/lucero/overlay';
+export declare class LuzmoOverlayTrigger 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(): LuzmoOverlayTriggerHostElement;
+    content?: string;
+    /** Optional property to optimize performance and prevent race conditions.  By explicitly declaring which content types are used (e.g. "click", "longpress hover"), we can avoid: 1. Extra renders from unnecessary slot reparenting 2. Potential infinite render loops during content detection 3. Race conditions during slot assignment  By only returning overlay wrappers for explicitly declared content types, we minimize unecessary DOM nodes, operations and ensure a more stable rendering behavior. */
+    triggeredBy?: TriggeredByType;
+    placement?: __extt_Placement;
+    type?: (Extract<(('auto' | 'hint' | 'manual' | 'modal' | 'page')), 'inline' | 'modal' | 'replace'>);
+    offset?: number;
+    open?: OverlayContentTypes;
+    disabled?: boolean;
+    receivesFocus?: 'true' | 'false' | 'auto';
+    clickOverlayElement?: LuzmoOverlay;
+    longpressOverlayElement?: LuzmoOverlay;
+    hoverOverlayElement?: LuzmoOverlay;
+    /** Announces that the overlay has been opened */
+    readonly luzmoOpenedEvent: import("@angular/core").OutputEmitterRef<CustomEvent<unknown>>;
+    /** Announces that the overlay has been closed */
+    readonly luzmoClosedEvent: import("@angular/core").OutputEmitterRef<CustomEvent<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;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoOverlayTrigger, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoOverlayTrigger, "luzmo-overlay-trigger", ["luzmoOverlayTrigger"], { "content": { "alias": "content"; "required": false; }; "triggeredBy": { "alias": "triggeredBy"; "required": false; }; "placement": { "alias": "placement"; "required": false; }; "type": { "alias": "type"; "required": false; }; "offset": { "alias": "offset"; "required": false; }; "open": { "alias": "open"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "receivesFocus": { "alias": "receivesFocus"; "required": false; }; "clickOverlayElement": { "alias": "clickOverlayElement"; "required": false; }; "longpressOverlayElement": { "alias": "longpressOverlayElement"; "required": false; }; "hoverOverlayElement": { "alias": "hoverOverlayElement"; "required": false; }; }, { "luzmoOpenedEvent": "luzmo-opened"; "luzmoClosedEvent": "luzmo-closed"; }, never, ["*"], true, never>;
+}
+/** The underlying custom element type for LuzmoOverlayTrigger */
+export type LuzmoOverlayTriggerElement = LuzmoOverlayTriggerHostElement;

package/esm/components/overlay-trigger.js

@@ -0,0 +1,155 @@
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, output, Renderer2 } from '@angular/core';
+import '@luzmo/lucero/overlay';
+import * as i0 from "@angular/core";
+const _c0 = ["*"];
+/**
+ * Angular wrapper component for <luzmo-overlay-trigger>
+ *
+ * @slot trigger - The content that will trigger the various overlays
+ * @slot hover-content - The content that will be displayed on hover
+ * @slot click-content - The content that will be displayed on click
+ * @slot longpress-content - The content that will be displayed on longpress
+ * @slot longpress-describedby-descriptor - Description for longpress content
+ */
+export class LuzmoOverlayTrigger {
+    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;
+    }
+    content;
+    /** Optional property to optimize performance and prevent race conditions.  By explicitly declaring which content types are used (e.g. "click", "longpress hover"), we can avoid: 1. Extra renders from unnecessary slot reparenting 2. Potential infinite render loops during content detection 3. Race conditions during slot assignment  By only returning overlay wrappers for explicitly declared content types, we minimize unecessary DOM nodes, operations and ensure a more stable rendering behavior. */
+    triggeredBy;
+    placement;
+    type;
+    offset;
+    open;
+    disabled;
+    receivesFocus;
+    clickOverlayElement;
+    longpressOverlayElement;
+    hoverOverlayElement;
+    /** Announces that the overlay has been opened */
+    luzmoOpenedEvent = output({ alias: 'luzmo-opened' });
+    /** Announces that the overlay has been closed */
+    luzmoClosedEvent = output({ alias: 'luzmo-closed' });
+    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 'content':
+                    this.setHostProperty('content', changes['content'].currentValue);
+                    break;
+                case 'triggeredBy':
+                    this.setHostProperty('triggeredBy', changes['triggeredBy'].currentValue);
+                    break;
+                case 'placement':
+                    this.setHostProperty('placement', changes['placement'].currentValue);
+                    break;
+                case 'type':
+                    this.setHostProperty('type', changes['type'].currentValue);
+                    break;
+                case 'offset':
+                    this.setHostProperty('offset', changes['offset'].currentValue);
+                    break;
+                case 'open':
+                    this.setHostProperty('open', changes['open'].currentValue);
+                    break;
+                case 'disabled':
+                    this.setHostProperty('disabled', changes['disabled'].currentValue);
+                    break;
+                case 'receivesFocus':
+                    this.setHostProperty('receivesFocus', changes['receivesFocus'].currentValue);
+                    break;
+                case 'clickOverlayElement':
+                    this.setHostProperty('clickOverlayElement', changes['clickOverlayElement'].currentValue);
+                    break;
+                case 'longpressOverlayElement':
+                    this.setHostProperty('longpressOverlayElement', changes['longpressOverlayElement'].currentValue);
+                    break;
+                case 'hoverOverlayElement':
+                    this.setHostProperty('hoverOverlayElement', changes['hoverOverlayElement'].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-opened', (event) => {
+            this.luzmoOpenedEvent.emit(event);
+        }));
+        this.listenerCleanup.push(this.renderer.listen(this.host, 'luzmo-closed', (event) => {
+            this.luzmoClosedEvent.emit(event);
+        }));
+    }
+    static ɵfac = function LuzmoOverlayTrigger_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoOverlayTrigger)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoOverlayTrigger, selectors: [["luzmo-overlay-trigger"]], inputs: { content: "content", triggeredBy: "triggeredBy", placement: "placement", type: "type", offset: "offset", open: "open", disabled: "disabled", receivesFocus: "receivesFocus", clickOverlayElement: "clickOverlayElement", longpressOverlayElement: "longpressOverlayElement", hoverOverlayElement: "hoverOverlayElement" }, outputs: { luzmoOpenedEvent: "luzmo-opened", luzmoClosedEvent: "luzmo-closed" }, exportAs: ["luzmoOverlayTrigger"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoOverlayTrigger_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵprojection(0);
+        } }, encapsulation: 2 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LuzmoOverlayTrigger, [{
+        type: Component,
+        args: [{
+                selector: 'luzmo-overlay-trigger',
+                exportAs: 'luzmoOverlayTrigger',
+                standalone: true,
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content />'
+            }]
+    }], () => [], { content: [{
+            type: Input,
+            args: [{ alias: 'content' }]
+        }], triggeredBy: [{
+            type: Input,
+            args: [{ alias: 'triggeredBy' }]
+        }], placement: [{
+            type: Input,
+            args: [{ alias: 'placement' }]
+        }], type: [{
+            type: Input,
+            args: [{ alias: 'type' }]
+        }], offset: [{
+            type: Input,
+            args: [{ alias: 'offset' }]
+        }], open: [{
+            type: Input,
+            args: [{ alias: 'open' }]
+        }], disabled: [{
+            type: Input,
+            args: [{ alias: 'disabled' }]
+        }], receivesFocus: [{
+            type: Input,
+            args: [{ alias: 'receivesFocus' }]
+        }], clickOverlayElement: [{
+            type: Input,
+            args: [{ alias: 'clickOverlayElement' }]
+        }], longpressOverlayElement: [{
+            type: Input,
+            args: [{ alias: 'longpressOverlayElement' }]
+        }], hoverOverlayElement: [{
+            type: Input,
+            args: [{ alias: 'hoverOverlayElement' }]
+        }], luzmoOpenedEvent: [{ type: i0.Output, args: ["luzmo-opened"] }], luzmoClosedEvent: [{ type: i0.Output, args: ["luzmo-closed"] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoOverlayTrigger, { className: "LuzmoOverlayTrigger", filePath: "components/overlay-trigger.ts", lineNumber: 23 }); })();

package/esm/components/overlay.d.ts

@@ -2,6 +2,7 @@ import { OnChanges, SimpleChanges } from '@angular/core';
 import '@luzmo/lucero/overlay';
 import type { LuzmoOverlay as LuzmoOverlayHostElement } from '@luzmo/lucero/overlay';
 import * as i0 from "@angular/core";
+export type { OverlayContentTypes, TriggeredByType } from '@luzmo/lucero/overlay';
 export declare class LuzmoOverlay implements OnChanges {
     private readonly elementRef;
     private readonly renderer;
@@ -19,7 +20,7 @@ export declare class LuzmoOverlay implements OnChanges {
     /** A query to gather all elements slotted into the default slot, excluding elements with the slot name "longpress-describedby-descriptor". */
     elements?: unknown;
     /** A reference to the parent overlay that should be force-closed, if any. */
-    parentOverlayToForceClose?: unknown;
+    parentOverlayToForceClose?: LuzmoOverlayHostElement;
     /** The `offset` property accepts either a single number to define the offset of the Overlay along the main axis from the trigger, or a 2-tuple to define the offset along both the main axis and the cross axis. This option has no effect when there is no trigger element. */
     offset?: number | [number, number];
     /** Indicates whether the Overlay is projected onto the "top layer" or not.  When set to `true`, the overlay is open and visible. When set to `false`, the overlay is closed and hidden. */

package/esm/components/overlay.js

@@ -209,4 +209,4 @@ export class LuzmoOverlay {
             type: Input,
             args: [{ alias: 'type' }]
         }], luzmoOpenedEvent: [{ type: i0.Output, args: ["luzmo-opened"] }], luzmoClosedEvent: [{ type: i0.Output, args: ["luzmo-closed"] }], slottableRequestEvent: [{ type: i0.Output, args: ["slottable-request"] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoOverlay, { className: "LuzmoOverlay", filePath: "components/overlay.ts", lineNumber: 15 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoOverlay, { className: "LuzmoOverlay", filePath: "components/overlay.ts", lineNumber: 16 }); })();

package/esm/components/tag.d.ts

@@ -13,7 +13,7 @@ export declare class LuzmoTag implements OnChanges {
     get nativeElement(): LuzmoTagHostElement;
     /** Color variant. Optional — when unset the tag keeps its neutral default appearance. Accepts the same semantic and non-semantic palette as `luzmo-badge`. Invalid values reset the tag to its variantless default. */
     variant?: TagVariants;
-    /** Visual treatment of the color variant: `outline` (default) draws the variant color as border and text, `fill` paints it as the background. Only takes effect when `variant` is set. */
+    /** Visual treatment of the color variant: `outline` (default) draws the variant color as border and text, `subtle` adds a tinted surface, and `fill` paints the variant color as the background. Only takes effect when `variant` is set. */
     treatment?: TagTreatments;
     deletable?: boolean;
     disabled?: boolean;

package/esm/components/tag.js

@@ -21,7 +21,7 @@ export class LuzmoTag {
     }
     /** Color variant. Optional — when unset the tag keeps its neutral default appearance. Accepts the same semantic and non-semantic palette as `luzmo-badge`. Invalid values reset the tag to its variantless default. */
     variant;
-    /** Visual treatment of the color variant: `outline` (default) draws the variant color as border and text, `fill` paints it as the background. Only takes effect when `variant` is set. */
+    /** Visual treatment of the color variant: `outline` (default) draws the variant color as border and text, `subtle` adds a tinted surface, and `fill` paints the variant color as the background. Only takes effect when `variant` is set. */
     treatment;
     deletable;
     disabled;

package/esm/index.d.ts

@@ -38,8 +38,11 @@ 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 { LuzmoOption } from './components/option.js';
 import { LuzmoOptions } from './components/options.js';
+import { LuzmoOptionsDivider } from './components/options-divider.js';
 import { LuzmoOverlay } from './components/overlay.js';
+import { LuzmoOverlayTrigger } from './components/overlay-trigger.js';
 import { LuzmoPicker } from './components/picker.js';
 import { LuzmoPickerButton } from './components/picker-button.js';
 import { LuzmoPopover } from './components/popover.js';
@@ -108,8 +111,11 @@ export { LuzmoMenuGroup, type LuzmoMenuGroupElement } from './components/menu-gr
 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 { LuzmoOption, type LuzmoOptionElement } from './components/option.js';
 export { LuzmoOptions, type LuzmoOptionsElement } from './components/options.js';
+export { LuzmoOptionsDivider, type LuzmoOptionsDividerElement } from './components/options-divider.js';
 export { LuzmoOverlay, type LuzmoOverlayElement } from './components/overlay.js';
+export { LuzmoOverlayTrigger, type LuzmoOverlayTriggerElement } from './components/overlay-trigger.js';
 export { LuzmoPicker, type LuzmoPickerElement } from './components/picker.js';
 export { LuzmoPickerButton, type LuzmoPickerButtonElement } from './components/picker-button.js';
 export { LuzmoPopover, type LuzmoPopoverElement } from './components/popover.js';
@@ -138,6 +144,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 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 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 LuzmoOption, typeof LuzmoOptions, typeof LuzmoOptionsDivider, typeof LuzmoOverlay, typeof LuzmoOverlayTrigger, 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", "LuzmoOption", "LuzmoOptions", "LuzmoOptionsDivider", "LuzmoOverlay", "LuzmoOverlayTrigger", "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

@@ -39,8 +39,11 @@ 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 { LuzmoOption } from './components/option.js';
 import { LuzmoOptions } from './components/options.js';
+import { LuzmoOptionsDivider } from './components/options-divider.js';
 import { LuzmoOverlay } from './components/overlay.js';
+import { LuzmoOverlayTrigger } from './components/overlay-trigger.js';
 import { LuzmoPicker } from './components/picker.js';
 import { LuzmoPickerButton } from './components/picker-button.js';
 import { LuzmoPopover } from './components/popover.js';
@@ -109,8 +112,11 @@ 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 { LuzmoOption } from './components/option.js';
 export { LuzmoOptions } from './components/options.js';
+export { LuzmoOptionsDivider } from './components/options-divider.js';
 export { LuzmoOverlay } from './components/overlay.js';
+export { LuzmoOverlayTrigger } from './components/overlay-trigger.js';
 export { LuzmoPicker } from './components/picker.js';
 export { LuzmoPickerButton } from './components/picker-button.js';
 export { LuzmoPopover } from './components/popover.js';
@@ -180,8 +186,11 @@ export const LUZMO_ANGULAR_COMPONENTS = [
     LuzmoMenuItem,
     LuzmoMultiLanguageField,
     LuzmoNumberField,
+    LuzmoOption,
     LuzmoOptions,
+    LuzmoOptionsDivider,
     LuzmoOverlay,
+    LuzmoOverlayTrigger,
     LuzmoPicker,
     LuzmoPickerButton,
     LuzmoPopover,
@@ -252,8 +261,11 @@ export const LUZMO_ANGULAR_COMPONENT_NAMES = [
     'LuzmoMenuItem',
     'LuzmoMultiLanguageField',
     'LuzmoNumberField',
+    'LuzmoOption',
     'LuzmoOptions',
+    'LuzmoOptionsDivider',
     'LuzmoOverlay',
+    'LuzmoOverlayTrigger',
     'LuzmoPicker',
     'LuzmoPickerButton',
     'LuzmoPopover',

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.13"
+    "@luzmo/lucero": "1.0.3-alpha.15"
   },
-  "version": "1.0.3-alpha.13",
+  "version": "1.0.3-alpha.15",
   "peerDependenciesMeta": {
     "@angular/forms": {
       "optional": true