@luzmo/ngx-lucero 1.0.3-alpha.8 → 2.0.0

package/esm/components/color-slider.js

@@ -163,7 +163,7 @@ export class LuzmoColorSlider {
             ]), i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoColorSlider_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
-        } }, encapsulation: 2, changeDetection: 0 });
+        } }, encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LuzmoColorSlider, [{
         type: Component,

package/esm/components/date-range-picker.js

@@ -178,7 +178,7 @@ export class LuzmoDateRangePicker {
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoDateRangePicker, selectors: [["luzmo-date-range-picker"]], inputs: { startDate: "startDate", endDate: "endDate", min: "min", max: "max", dateFormat: "dateFormat", dateSeparator: "dateSeparator", precision: "precision", calendars: "calendars", showDefinedRanges: "showDefinedRanges", definedRanges: "definedRanges", invalid: "invalid", readonly: "readonly", quiet: "quiet", placement: "placement", timeZone: "timeZone", language: "language", labels: "labels", focused: "focused", helpTextManager: "helpTextManager", size: "size", disabled: "disabled", tabIndex: "tabIndex" }, outputs: { changeEvent: "change", inputEvent: "input", keydownEvent: "keydown" }, exportAs: ["luzmoDateRangePicker"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoDateRangePicker_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
-        } }, encapsulation: 2, changeDetection: 0 });
+        } }, encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LuzmoDateRangePicker, [{
         type: Component,

package/esm/components/date-time-picker.js

@@ -212,7 +212,7 @@ export class LuzmoDateTimePicker {
             ]), i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoDateTimePicker_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
-        } }, encapsulation: 2, changeDetection: 0 });
+        } }, encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LuzmoDateTimePicker, [{
         type: Component,

package/esm/components/divider.js

@@ -61,7 +61,7 @@ export class LuzmoDivider {
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoDivider, selectors: [["luzmo-divider"]], inputs: { vertical: "vertical", staticColor: "staticColor", size: "size" }, exportAs: ["luzmoDivider"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoDivider_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
-        } }, encapsulation: 2, changeDetection: 0 });
+        } }, encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LuzmoDivider, [{
         type: Component,

package/esm/components/field-group.js

@@ -71,7 +71,7 @@ export class LuzmoFieldGroup {
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoFieldGroup, selectors: [["luzmo-field-group"]], inputs: { horizontal: "horizontal", invalid: "invalid", label: "label", vertical: "vertical", helpTextManager: "helpTextManager" }, exportAs: ["luzmoFieldGroup"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoFieldGroup_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
-        } }, encapsulation: 2, changeDetection: 0 });
+        } }, encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LuzmoFieldGroup, [{
         type: Component,

package/esm/components/field-label.js

@@ -78,7 +78,7 @@ export class LuzmoFieldLabel {
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoFieldLabel, selectors: [["luzmo-field-label"]], inputs: { disabled: "disabled", for: "for", required: "required", slotEl: "slotEl", sideAligned: "sideAligned", size: "size" }, exportAs: ["luzmoFieldLabel"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoFieldLabel_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
-        } }, encapsulation: 2, changeDetection: 0 });
+        } }, encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LuzmoFieldLabel, [{
         type: Component,

package/esm/components/help-text.js

@@ -60,7 +60,7 @@ export class LuzmoHelpText {
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoHelpText, selectors: [["luzmo-help-text"]], inputs: { icon: "icon", variant: "variant", size: "size" }, exportAs: ["luzmoHelpText"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoHelpText_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
-        } }, encapsulation: 2, changeDetection: 0 });
+        } }, encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LuzmoHelpText, [{
         type: Component,

package/esm/components/icon.js

@@ -71,7 +71,7 @@ export class LuzmoIcon {
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoIcon, selectors: [["luzmo-icon"]], inputs: { src: "src", options: "options", icon: "icon", block: "block", label: "label", size: "size" }, exportAs: ["luzmoIcon"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoIcon_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
-        } }, encapsulation: 2, changeDetection: 0 });
+        } }, encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LuzmoIcon, [{
         type: Component,

package/esm/components/infield-button.js

@@ -124,7 +124,7 @@ export class LuzmoInfieldButton {
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoInfieldButton, selectors: [["luzmo-infield-button"]], inputs: { block: "block", inline: "inline", quiet: "quiet", size: "size", download: "download", label: "label", href: "href", target: "target", referrerpolicy: "referrerpolicy", rel: "rel", active: "active", type: "type", disabled: "disabled", tabIndex: "tabIndex" }, outputs: { keydownEvent: "keydown" }, exportAs: ["luzmoInfieldButton"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoInfieldButton_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
-        } }, encapsulation: 2, changeDetection: 0 });
+        } }, encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LuzmoInfieldButton, [{
         type: Component,

package/esm/components/label.js

@@ -55,7 +55,7 @@ export class LuzmoLabel {
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoLabel, selectors: [["luzmo-label"]], inputs: { label: "label", tooltip: "tooltip" }, exportAs: ["luzmoLabel"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoLabel_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
-        } }, encapsulation: 2, changeDetection: 0 });
+        } }, encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LuzmoLabel, [{
         type: Component,

package/esm/components/menu-divider.js

@@ -51,7 +51,7 @@ export class 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, changeDetection: 0 });
+        } }, encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LuzmoMenuDivider, [{
         type: Component,

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

@@ -24,6 +24,8 @@ export declare class LuzmoMenuGroup implements OnChanges, ControlValueAccessor {
     menuSlot?: unknown;
     focusedItemIndex?: number;
     focusInItemIndex?: number;
+    shouldSupportDragAndSelect?: boolean;
+    isScrolling?: boolean;
     handleSubmenuClosed?: unknown;
     handleSubmenuOpened?: unknown;
     /** Announces that the `value` of the element has changed */
@@ -49,7 +51,7 @@ export declare class LuzmoMenuGroup implements OnChanges, ControlValueAccessor {
     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>;
+    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; }; "shouldSupportDragAndSelect": { "alias": "shouldSupportDragAndSelect"; "required": false; }; "isScrolling": { "alias": "isScrolling"; "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

@@ -31,6 +31,8 @@ export class LuzmoMenuGroup {
     menuSlot;
     focusedItemIndex;
     focusInItemIndex;
+    shouldSupportDragAndSelect;
+    isScrolling;
     handleSubmenuClosed;
     handleSubmenuOpened;
     /** Announces that the `value` of the element has changed */
@@ -83,6 +85,12 @@ export class LuzmoMenuGroup {
                 case 'focusInItemIndex':
                     this.setHostProperty('focusInItemIndex', changes['focusInItemIndex'].currentValue);
                     break;
+                case 'shouldSupportDragAndSelect':
+                    this.setHostProperty('shouldSupportDragAndSelect', changes['shouldSupportDragAndSelect'].currentValue);
+                    break;
+                case 'isScrolling':
+                    this.setHostProperty('isScrolling', changes['isScrolling'].currentValue);
+                    break;
                 case 'handleSubmenuClosed':
                     this.setHostProperty('handleSubmenuClosed', changes['handleSubmenuClosed'].currentValue);
                     break;
@@ -156,7 +164,7 @@ export class LuzmoMenuGroup {
         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([
+    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", shouldSupportDragAndSelect: "shouldSupportDragAndSelect", isScrolling: "isScrolling", handleSubmenuClosed: "handleSubmenuClosed", handleSubmenuOpened: "handleSubmenuOpened" }, outputs: { changeEvent: "change", closeEvent: "close" }, exportAs: ["luzmoMenuGroup"], features: [i0.ɵɵProvidersFeature([
                 {
                     provide: NG_VALUE_ACCESSOR,
                     useExisting: forwardRef(() => LuzmoMenuGroup),
@@ -165,7 +173,7 @@ export class LuzmoMenuGroup {
             ]), i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoMenuGroup_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
-        } }, encapsulation: 2, changeDetection: 0 });
+        } }, encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LuzmoMenuGroup, [{
         type: Component,
@@ -219,6 +227,12 @@ export class LuzmoMenuGroup {
         }], focusInItemIndex: [{
             type: Input,
             args: [{ alias: 'focusInItemIndex' }]
+        }], shouldSupportDragAndSelect: [{
+            type: Input,
+            args: [{ alias: 'shouldSupportDragAndSelect' }]
+        }], isScrolling: [{
+            type: Input,
+            args: [{ alias: 'isScrolling' }]
         }], handleSubmenuClosed: [{
             type: Input,
             args: [{ alias: 'handleSubmenuClosed' }]

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

@@ -42,8 +42,8 @@ export declare class LuzmoMenuItem implements OnChanges {
     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>>;
+    /** announces the item has been added or updated so a parent menu can take ownership */
+    readonly luzmoMenuItemAddedOrUpdatedEvent: import("@angular/core").OutputEmitterRef<CustomEvent<unknown>>;
     /** Trick :focus-visible polyfill into thinking keyboard based focus */
     readonly keydownEvent: import("@angular/core").OutputEmitterRef<unknown>;
     constructor();
@@ -58,7 +58,7 @@ export declare class LuzmoMenuItem implements OnChanges {
     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>;
+    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; }; }, { "luzmoMenuItemAddedOrUpdatedEvent": "luzmo-menu-item-added-or-updated"; "keydownEvent": "keydown"; }, never, ["*"], true, never>;
 }
 /** The underlying custom element type for LuzmoMenuItem */
 export type LuzmoMenuItemElement = LuzmoMenuItemHostElement;

package/esm/components/menu-item.js

@@ -52,8 +52,8 @@ export class LuzmoMenuItem {
     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' });
+    /** announces the item has been added or updated so a parent menu can take ownership */
+    luzmoMenuItemAddedOrUpdatedEvent = output({ alias: 'luzmo-menu-item-added-or-updated' });
     /** Trick :focus-visible polyfill into thinking keyboard based focus */
     keydownEvent = output({ alias: 'keydown' });
     constructor() {
@@ -151,8 +151,8 @@ export class LuzmoMenuItem {
         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, 'luzmo-menu-item-added-or-updated', (event) => {
+            this.luzmoMenuItemAddedOrUpdatedEvent.emit(event);
         }));
         this.listenerCleanup.push(this.renderer.listen(this.host, 'keydown', (event) => {
             this.keydownEvent.emit(event);
@@ -162,10 +162,10 @@ export class LuzmoMenuItem {
         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) {
+    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: { luzmoMenuItemAddedOrUpdatedEvent: "luzmo-menu-item-added-or-updated", 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, changeDetection: 0 });
+        } }, encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LuzmoMenuItem, [{
         type: Component,
@@ -245,5 +245,5 @@ export class LuzmoMenuItem {
         }], tabIndex: [{
             type: Input,
             args: [{ alias: 'tabIndex' }]
-        }], luzmoMenuItemAddedEvent: [{ type: i0.Output, args: ["luzmo-menu-item-added"] }], keydownEvent: [{ type: i0.Output, args: ["keydown"] }] }); })();
+        }], luzmoMenuItemAddedOrUpdatedEvent: [{ type: i0.Output, args: ["luzmo-menu-item-added-or-updated"] }], 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

@@ -1,7 +1,7 @@
 import { OnChanges, SimpleChanges } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import '@luzmo/lucero/menu';
-import type { LuzmoMenu as LuzmoMenuHostElement } from '@luzmo/lucero/menu';
+import type { LuzmoMenu as LuzmoMenuHostElement, LuzmoMenuItem } 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 {
@@ -19,10 +19,12 @@ export declare class LuzmoMenu implements OnChanges, ControlValueAccessor {
     value?: string;
     valueSeparator?: string;
     selected?: string[];
-    selectedItems?: unknown;
+    selectedItems?: LuzmoMenuItem[];
     menuSlot?: unknown;
     focusedItemIndex?: number;
     focusInItemIndex?: number;
+    shouldSupportDragAndSelect?: boolean;
+    isScrolling?: boolean;
     handleSubmenuClosed?: unknown;
     handleSubmenuOpened?: unknown;
     size?: ('xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl');
@@ -49,7 +51,7 @@ export declare class LuzmoMenu implements OnChanges, ControlValueAccessor {
     setDisabledState(isDisabled: boolean): void;
     focus({ preventScroll }: FocusOptions): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoMenu, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoMenu, "luzmo-menu", ["luzmoMenu"], { "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; }; "size": { "alias": "size"; "required": false; }; }, { "changeEvent": "change"; "closeEvent": "close"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoMenu, "luzmo-menu", ["luzmoMenu"], { "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; }; "shouldSupportDragAndSelect": { "alias": "shouldSupportDragAndSelect"; "required": false; }; "isScrolling": { "alias": "isScrolling"; "required": false; }; "handleSubmenuClosed": { "alias": "handleSubmenuClosed"; "required": false; }; "handleSubmenuOpened": { "alias": "handleSubmenuOpened"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, { "changeEvent": "change"; "closeEvent": "close"; }, never, ["*"], true, never>;
 }
 /** The underlying custom element type for LuzmoMenu */
 export type LuzmoMenuElement = LuzmoMenuHostElement;

package/esm/components/menu.js

@@ -29,6 +29,8 @@ export class LuzmoMenu {
     menuSlot;
     focusedItemIndex;
     focusInItemIndex;
+    shouldSupportDragAndSelect;
+    isScrolling;
     handleSubmenuClosed;
     handleSubmenuOpened;
     size;
@@ -79,6 +81,12 @@ export class LuzmoMenu {
                 case 'focusInItemIndex':
                     this.setHostProperty('focusInItemIndex', changes['focusInItemIndex'].currentValue);
                     break;
+                case 'shouldSupportDragAndSelect':
+                    this.setHostProperty('shouldSupportDragAndSelect', changes['shouldSupportDragAndSelect'].currentValue);
+                    break;
+                case 'isScrolling':
+                    this.setHostProperty('isScrolling', changes['isScrolling'].currentValue);
+                    break;
                 case 'handleSubmenuClosed':
                     this.setHostProperty('handleSubmenuClosed', changes['handleSubmenuClosed'].currentValue);
                     break;
@@ -155,7 +163,7 @@ export class LuzmoMenu {
         return this.host.focus({ preventScroll });
     }
     static ɵfac = function LuzmoMenu_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoMenu)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoMenu, selectors: [["luzmo-menu"]], inputs: { 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", size: "size" }, outputs: { changeEvent: "change", closeEvent: "close" }, exportAs: ["luzmoMenu"], features: [i0.ɵɵProvidersFeature([
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoMenu, selectors: [["luzmo-menu"]], inputs: { label: "label", ignore: "ignore", variant: "variant", selects: "selects", value: "value", valueSeparator: "valueSeparator", selected: "selected", selectedItems: "selectedItems", menuSlot: "menuSlot", focusedItemIndex: "focusedItemIndex", focusInItemIndex: "focusInItemIndex", shouldSupportDragAndSelect: "shouldSupportDragAndSelect", isScrolling: "isScrolling", handleSubmenuClosed: "handleSubmenuClosed", handleSubmenuOpened: "handleSubmenuOpened", size: "size" }, outputs: { changeEvent: "change", closeEvent: "close" }, exportAs: ["luzmoMenu"], features: [i0.ɵɵProvidersFeature([
                 {
                     provide: NG_VALUE_ACCESSOR,
                     useExisting: forwardRef(() => LuzmoMenu),
@@ -164,7 +172,7 @@ export class LuzmoMenu {
             ]), i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoMenu_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
-        } }, encapsulation: 2, changeDetection: 0 });
+        } }, encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LuzmoMenu, [{
         type: Component,
@@ -215,6 +223,12 @@ export class LuzmoMenu {
         }], focusInItemIndex: [{
             type: Input,
             args: [{ alias: 'focusInItemIndex' }]
+        }], shouldSupportDragAndSelect: [{
+            type: Input,
+            args: [{ alias: 'shouldSupportDragAndSelect' }]
+        }], isScrolling: [{
+            type: Input,
+            args: [{ alias: 'isScrolling' }]
         }], handleSubmenuClosed: [{
             type: Input,
             args: [{ alias: 'handleSubmenuClosed' }]

package/esm/components/multi-language-field.js

@@ -188,7 +188,7 @@ export class LuzmoMultiLanguageField {
             ]), i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoMultiLanguageField_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
-        } }, encapsulation: 2, changeDetection: 0 });
+        } }, encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LuzmoMultiLanguageField, [{
         type: Component,

package/esm/components/notice.d.ts

@@ -0,0 +1,49 @@
+import { OnChanges, SimpleChanges } from '@angular/core';
+import '@luzmo/lucero/notice';
+import type { LuzmoNotice as LuzmoNoticeHostElement, NoticeCloseDetail, NoticeLabels, NoticeVariant } from '@luzmo/lucero/notice';
+import * as i0 from "@angular/core";
+export type { NoticeCloseDetail, NoticeCloseReason, NoticeLabels, NoticeVariant } from '@luzmo/lucero/notice';
+export declare class LuzmoNotice 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(): LuzmoNoticeHostElement;
+    /** Whether the notice is visible. */
+    open?: boolean;
+    /** The semantic appearance and live-region priority. */
+    variant?: NoticeVariant;
+    /** Whether to hide the automatic semantic icon. */
+    hideIcon?: boolean;
+    /** Whether to render a manual close control. Timed notices always render it. */
+    closeable?: boolean;
+    /** Plain-text heading fallback for the `heading` slot. */
+    heading?: string;
+    /** Plain-text description fallback for the default slot. */
+    description?: string;
+    /** Automatic-close delay in seconds. Positive values are clamped to at least six seconds; null and non-positive values disable automatic closing. Hover pauses the countdown while the pointer stays inside. The first keyboard focus latches the pause until the notice is dismissed. */
+    duration?: number | null;
+    /** Localized close-control and semantic-icon labels. */
+    labels?: NoticeLabels;
+    size?: ('xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl');
+    /** Cancelable request to close the notice. Detail contains the `manual`, `automatic`, or `programmatic` reason. */
+    readonly luzmoNoticeCloseEvent: import("@angular/core").OutputEmitterRef<CustomEvent<NoticeCloseDetail>>;
+    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;
+    /** Requests closure and emits the cancelable `luzmo-notice-close` event. */
+    close(reason?: 'manual' | 'automatic' | 'programmatic'): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoNotice, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoNotice, "luzmo-notice", ["luzmoNotice"], { "open": { "alias": "open"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "hideIcon": { "alias": "hideIcon"; "required": false; }; "closeable": { "alias": "closeable"; "required": false; }; "heading": { "alias": "heading"; "required": false; }; "description": { "alias": "description"; "required": false; }; "duration": { "alias": "duration"; "required": false; }; "labels": { "alias": "labels"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, { "luzmoNoticeCloseEvent": "luzmo-notice-close"; }, never, ["*"], true, never>;
+}
+/** The underlying custom element type for LuzmoNotice */
+export type LuzmoNoticeElement = LuzmoNoticeHostElement;

package/esm/components/notice.js

@@ -0,0 +1,145 @@
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, output, Renderer2 } from '@angular/core';
+import '@luzmo/lucero/notice';
+import * as i0 from "@angular/core";
+const _c0 = ["*"];
+/**
+ * An inline semantic message with optional dismissal behavior.
+ *
+ * @slot (default) - Rich description content. Replaces the `description` fallback.
+ * @slot heading - Rich heading content. Replaces the `heading` fallback.
+ * @slot icon - Icon that replaces the automatic semantic icon.
+ */
+export class LuzmoNotice {
+    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;
+    }
+    /** Whether the notice is visible. */
+    open;
+    /** The semantic appearance and live-region priority. */
+    variant;
+    /** Whether to hide the automatic semantic icon. */
+    hideIcon;
+    /** Whether to render a manual close control. Timed notices always render it. */
+    closeable;
+    /** Plain-text heading fallback for the `heading` slot. */
+    heading;
+    /** Plain-text description fallback for the default slot. */
+    description;
+    /** Automatic-close delay in seconds. Positive values are clamped to at least six seconds; null and non-positive values disable automatic closing. Hover pauses the countdown while the pointer stays inside. The first keyboard focus latches the pause until the notice is dismissed. */
+    duration;
+    /** Localized close-control and semantic-icon labels. */
+    labels;
+    size;
+    /** Cancelable request to close the notice. Detail contains the `manual`, `automatic`, or `programmatic` reason. */
+    luzmoNoticeCloseEvent = output({ alias: 'luzmo-notice-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 'open':
+                    this.setHostProperty('open', changes['open'].currentValue);
+                    break;
+                case 'variant':
+                    this.setHostProperty('variant', changes['variant'].currentValue);
+                    break;
+                case 'hideIcon':
+                    this.setHostProperty('hideIcon', changes['hideIcon'].currentValue);
+                    break;
+                case 'closeable':
+                    this.setHostProperty('closeable', changes['closeable'].currentValue);
+                    break;
+                case 'heading':
+                    this.setHostProperty('heading', changes['heading'].currentValue);
+                    break;
+                case 'description':
+                    this.setHostProperty('description', changes['description'].currentValue);
+                    break;
+                case 'duration':
+                    this.setHostProperty('duration', changes['duration'].currentValue);
+                    break;
+                case 'labels':
+                    this.setHostProperty('labels', changes['labels'].currentValue);
+                    break;
+                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() {
+        this.listenerCleanup.push(this.renderer.listen(this.host, 'luzmo-notice-close', (event) => {
+            this.luzmoNoticeCloseEvent.emit(event);
+        }));
+    }
+    /** Requests closure and emits the cancelable `luzmo-notice-close` event. */
+    close(reason) {
+        return this.host.close(reason);
+    }
+    static ɵfac = function LuzmoNotice_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoNotice)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoNotice, selectors: [["luzmo-notice"]], inputs: { open: "open", variant: "variant", hideIcon: "hideIcon", closeable: "closeable", heading: "heading", description: "description", duration: "duration", labels: "labels", size: "size" }, outputs: { luzmoNoticeCloseEvent: "luzmo-notice-close" }, exportAs: ["luzmoNotice"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoNotice_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵprojection(0);
+        } }, encapsulation: 2 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LuzmoNotice, [{
+        type: Component,
+        args: [{
+                selector: 'luzmo-notice',
+                exportAs: 'luzmoNotice',
+                standalone: true,
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content />'
+            }]
+    }], () => [], { open: [{
+            type: Input,
+            args: [{ alias: 'open' }]
+        }], variant: [{
+            type: Input,
+            args: [{ alias: 'variant' }]
+        }], hideIcon: [{
+            type: Input,
+            args: [{ alias: 'hideIcon' }]
+        }], closeable: [{
+            type: Input,
+            args: [{ alias: 'closeable' }]
+        }], heading: [{
+            type: Input,
+            args: [{ alias: 'heading' }]
+        }], description: [{
+            type: Input,
+            args: [{ alias: 'description' }]
+        }], duration: [{
+            type: Input,
+            args: [{ alias: 'duration' }]
+        }], labels: [{
+            type: Input,
+            args: [{ alias: 'labels' }]
+        }], size: [{
+            type: Input,
+            args: [{ alias: 'size' }]
+        }], luzmoNoticeCloseEvent: [{ type: i0.Output, args: ["luzmo-notice-close"] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoNotice, { className: "LuzmoNotice", filePath: "components/notice.ts", lineNumber: 20 }); })();

package/esm/components/number-field.js

@@ -293,7 +293,7 @@ export class LuzmoNumberField {
             ]), i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoNumberField_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
-        } }, encapsulation: 2, changeDetection: 0 });
+        } }, encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LuzmoNumberField, [{
         type: Component,