@luzmo/ngx-lucero 2.1.0 → 2.2.0

package/README.md

@@ -35,6 +35,20 @@ The wrapper class name mirrors the host element (`LuzmoButton`); the
 underlying `HTMLElement` subclass type is re-exported as
 `LuzmoButtonElement` for `@ViewChild` / `ElementRef<T>` use cases.
 
+## Events
+
+Native events keep their DOM names, such as `(change)`. Typed Angular outputs
+for reserved native event names append `Event` to avoid subscribing the same
+callback to both the native and Angular event paths:
+
+```html
+<luzmo-slider (changeEvent)="onSliderChange($event)"></luzmo-slider>
+```
+
+The output is also available for programmatic subscriptions through the
+wrapper instance's `changeEvent` property. Non-reserved custom events keep
+their existing names, such as `(luzmo-opened)`.
+
 ## Router links
 
 Angular 20 and newer recognize Lucero components with an `href` property as

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

@@ -18,7 +18,7 @@ export declare class LuzmoAccordionItem implements OnChanges {
     /** The tab index to apply to this control. See general documentation about the tabindex HTML property */
     tabIndex?: number;
     /** Announce that an accordion item has been toggled while allowing the event to be cancelled. */
-    readonly luzmoAccordionItemToggleEvent: import("@angular/core").OutputEmitterRef<CustomEvent<unknown>>;
+    readonly luzmoAccordionItemToggle: import("@angular/core").OutputEmitterRef<CustomEvent<unknown>>;
     /** Trick :focus-visible polyfill into thinking keyboard based focus */
     readonly keydownEvent: import("@angular/core").OutputEmitterRef<unknown>;
     constructor();
@@ -33,7 +33,7 @@ export declare class LuzmoAccordionItem implements OnChanges {
     private bindEvents;
     focus(options?: FocusOptions): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoAccordionItem, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoAccordionItem, "luzmo-accordion-item", ["luzmoAccordionItem"], { "open": { "alias": "open"; "required": false; }; "label": { "alias": "label"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "size": { "alias": "size"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, { "luzmoAccordionItemToggleEvent": "luzmo-accordion-item-toggle"; "keydownEvent": "keydown"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoAccordionItem, "luzmo-accordion-item", ["luzmoAccordionItem"], { "open": { "alias": "open"; "required": false; }; "label": { "alias": "label"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "size": { "alias": "size"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, { "luzmoAccordionItemToggle": "luzmo-accordion-item-toggle"; "keydownEvent": "keydownEvent"; }, never, ["*"], true, never>;
 }
 /** The underlying custom element type for LuzmoAccordionItem */
 export type LuzmoAccordionItemElement = LuzmoAccordionItemHostElement;

package/esm/components/accordion-item.js

@@ -25,9 +25,9 @@ export class LuzmoAccordionItem {
     /** The tab index to apply to this control. See general documentation about the tabindex HTML property */
     tabIndex;
     /** Announce that an accordion item has been toggled while allowing the event to be cancelled. */
-    luzmoAccordionItemToggleEvent = output({ alias: 'luzmo-accordion-item-toggle' });
+    luzmoAccordionItemToggle = output({ alias: 'luzmo-accordion-item-toggle' });
     /** Trick :focus-visible polyfill into thinking keyboard based focus */
-    keydownEvent = output({ alias: 'keydown' });
+    keydownEvent = output();
     constructor() {
         this.bindEvents();
         this.destroyRef.onDestroy(() => {
@@ -70,7 +70,7 @@ export class LuzmoAccordionItem {
     }
     bindEvents() {
         this.listenerCleanup.push(this.renderer.listen(this.host, 'luzmo-accordion-item-toggle', (event) => {
-            this.luzmoAccordionItemToggleEvent.emit(event);
+            this.luzmoAccordionItemToggle.emit(event);
         }));
         this.listenerCleanup.push(this.renderer.listen(this.host, 'keydown', (event) => {
             this.keydownEvent.emit(event);
@@ -80,7 +80,7 @@ export class LuzmoAccordionItem {
         return this.host.focus(options);
     }
     static ɵfac = function LuzmoAccordionItem_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoAccordionItem)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoAccordionItem, selectors: [["luzmo-accordion-item"]], inputs: { open: "open", label: "label", disabled: "disabled", size: "size", tabIndex: "tabIndex" }, outputs: { luzmoAccordionItemToggleEvent: "luzmo-accordion-item-toggle", keydownEvent: "keydown" }, exportAs: ["luzmoAccordionItem"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoAccordionItem_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoAccordionItem, selectors: [["luzmo-accordion-item"]], inputs: { open: "open", label: "label", disabled: "disabled", size: "size", tabIndex: "tabIndex" }, outputs: { luzmoAccordionItemToggle: "luzmo-accordion-item-toggle", keydownEvent: "keydownEvent" }, exportAs: ["luzmoAccordionItem"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoAccordionItem_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
         } }, encapsulation: 2 });
@@ -109,5 +109,5 @@ export class LuzmoAccordionItem {
         }], tabIndex: [{
             type: Input,
             args: [{ alias: 'tabIndex' }]
-        }], luzmoAccordionItemToggleEvent: [{ type: i0.Output, args: ["luzmo-accordion-item-toggle"] }], keydownEvent: [{ type: i0.Output, args: ["keydown"] }] }); })();
+        }], luzmoAccordionItemToggle: [{ type: i0.Output, args: ["luzmo-accordion-item-toggle"] }], keydownEvent: [{ type: i0.Output, args: ["keydownEvent"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoAccordionItem, { className: "LuzmoAccordionItem", filePath: "components/accordion-item.ts", lineNumber: 17 }); })();

package/esm/components/action-bar.d.ts

@@ -26,7 +26,7 @@ export declare class LuzmoActionBar implements OnChanges {
     private setHostProperty;
     private bindEvents;
     static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoActionBar, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoActionBar, "luzmo-action-bar", ["luzmoActionBar"], { "emphasized": { "alias": "emphasized"; "required": false; }; "open": { "alias": "open"; "required": false; }; }, { "closeEvent": "close"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoActionBar, "luzmo-action-bar", ["luzmoActionBar"], { "emphasized": { "alias": "emphasized"; "required": false; }; "open": { "alias": "open"; "required": false; }; }, { "closeEvent": "closeEvent"; }, never, ["*"], true, never>;
 }
 /** The underlying custom element type for LuzmoActionBar */
 export type LuzmoActionBarElement = LuzmoActionBarHostElement;

package/esm/components/action-bar.js

@@ -21,7 +21,7 @@ export class LuzmoActionBar {
     emphasized;
     /** The `open` attribute is used to control the visibility of the popover. */
     open;
-    closeEvent = output({ alias: 'close' });
+    closeEvent = output();
     constructor() {
         this.bindEvents();
         this.destroyRef.onDestroy(() => {
@@ -59,7 +59,7 @@ export class LuzmoActionBar {
         }));
     }
     static ɵfac = function LuzmoActionBar_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoActionBar)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoActionBar, selectors: [["luzmo-action-bar"]], inputs: { emphasized: "emphasized", open: "open" }, outputs: { closeEvent: "close" }, exportAs: ["luzmoActionBar"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoActionBar_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoActionBar, selectors: [["luzmo-action-bar"]], inputs: { emphasized: "emphasized", open: "open" }, outputs: { closeEvent: "closeEvent" }, exportAs: ["luzmoActionBar"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoActionBar_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
         } }, encapsulation: 2 });
@@ -79,5 +79,5 @@ export class LuzmoActionBar {
         }], open: [{
             type: Input,
             args: [{ alias: 'open' }]
-        }], closeEvent: [{ type: i0.Output, args: ["close"] }] }); })();
+        }], closeEvent: [{ type: i0.Output, args: ["closeEvent"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoActionBar, { className: "LuzmoActionBar", filePath: "components/action-bar.ts", lineNumber: 17 }); })();

package/esm/components/action-button.d.ts

@@ -53,7 +53,7 @@ export declare class LuzmoActionButton implements OnChanges, ControlValueAccesso
     /** The tab index to apply to this control. See general documentation about the tabindex HTML property */
     tabIndex?: number;
     /** Synthesizes a "longpress" interaction that signifies a `pointerdown` event that is >=300ms or a keyboard event where code is `Space` or code is `ArrowDown` while `altKey===true`. */
-    readonly longpressEvent: import("@angular/core").OutputEmitterRef<CustomEvent<unknown>>;
+    readonly longpress: import("@angular/core").OutputEmitterRef<CustomEvent<unknown>>;
     /** Announces a change in the `selected` property of an action button */
     readonly changeEvent: import("@angular/core").OutputEmitterRef<CustomEvent<unknown>>;
     /** Trick :focus-visible polyfill into thinking keyboard based focus */
@@ -78,7 +78,7 @@ export declare class LuzmoActionButton implements OnChanges, ControlValueAccesso
     setDisabledState(isDisabled: boolean): void;
     focus(options?: FocusOptions): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoActionButton, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoActionButton, "luzmo-action-button", ["luzmoActionButton"], { "emphasized": { "alias": "emphasized"; "required": false; }; "holdAffordance": { "alias": "holdAffordance"; "required": false; }; "quiet": { "alias": "quiet"; "required": false; }; "treatment": { "alias": "treatment"; "required": false; }; "role": { "alias": "role"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "toggles": { "alias": "toggles"; "required": false; }; "staticColor": { "alias": "staticColor"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "value": { "alias": "value"; "required": false; }; "size": { "alias": "size"; "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; }; "active": { "alias": "active"; "required": false; }; "type": { "alias": "type"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, { "longpressEvent": "longpress"; "changeEvent": "change"; "keydownEvent": "keydown"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoActionButton, "luzmo-action-button", ["luzmoActionButton"], { "emphasized": { "alias": "emphasized"; "required": false; }; "holdAffordance": { "alias": "holdAffordance"; "required": false; }; "quiet": { "alias": "quiet"; "required": false; }; "treatment": { "alias": "treatment"; "required": false; }; "role": { "alias": "role"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "toggles": { "alias": "toggles"; "required": false; }; "staticColor": { "alias": "staticColor"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "value": { "alias": "value"; "required": false; }; "size": { "alias": "size"; "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; }; "active": { "alias": "active"; "required": false; }; "type": { "alias": "type"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, { "longpress": "longpress"; "changeEvent": "changeEvent"; "keydownEvent": "keydownEvent"; }, never, ["*"], true, never>;
 }
 /** The underlying custom element type for LuzmoActionButton */
 export type LuzmoActionButtonElement = LuzmoActionButtonHostElement;

package/esm/components/action-button.js

@@ -60,11 +60,11 @@ export class LuzmoActionButton {
     /** The tab index to apply to this control. See general documentation about the tabindex HTML property */
     tabIndex;
     /** Synthesizes a "longpress" interaction that signifies a `pointerdown` event that is >=300ms or a keyboard event where code is `Space` or code is `ArrowDown` while `altKey===true`. */
-    longpressEvent = output({ alias: 'longpress' });
+    longpress = output({ alias: 'longpress' });
     /** Announces a change in the `selected` property of an action button */
-    changeEvent = output({ alias: 'change' });
+    changeEvent = output();
     /** Trick :focus-visible polyfill into thinking keyboard based focus */
-    keydownEvent = output({ alias: 'keydown' });
+    keydownEvent = output();
     constructor() {
         this.bindEvents();
         this.destroyRef.onDestroy(() => {
@@ -155,10 +155,9 @@ export class LuzmoActionButton {
     }
     bindEvents() {
         this.listenerCleanup.push(this.renderer.listen(this.host, 'longpress', (event) => {
-            this.longpressEvent.emit(event);
+            this.longpress.emit(event);
         }));
         this.listenerCleanup.push(this.renderer.listen(this.host, 'change', (event) => {
-            this.changeEvent.emit(event);
             if (!this.isWritingValue) {
                 const eventWithDetail = event;
                 const eventTarget = event.target;
@@ -170,13 +169,13 @@ export class LuzmoActionButton {
                     : (detailRecord === undefined ? detail : undefined)
                         ?? eventTarget?.['value']
                         ?? hostRecord['value']);
-                if (Object.is(this.lastCvaValue, nextValue)) {
-                    return;
+                if (!Object.is(this.lastCvaValue, nextValue)) {
+                    this.lastCvaValue = nextValue;
+                    this.setHostProperty('value', nextValue);
+                    this.onChange(nextValue);
                 }
-                this.lastCvaValue = nextValue;
-                this.setHostProperty('value', nextValue);
-                this.onChange(nextValue);
             }
+            this.changeEvent.emit(event);
         }));
         this.listenerCleanup.push(this.renderer.listen(this.host, 'keydown', (event) => {
             this.keydownEvent.emit(event);
@@ -214,7 +213,7 @@ export class LuzmoActionButton {
         return this.host.focus(options);
     }
     static ɵfac = function LuzmoActionButton_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoActionButton)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoActionButton, selectors: [["luzmo-action-button"]], inputs: { emphasized: "emphasized", holdAffordance: "holdAffordance", quiet: "quiet", treatment: "treatment", role: "role", selected: "selected", toggles: "toggles", staticColor: "staticColor", variant: "variant", value: "value", size: "size", download: "download", label: "label", href: "href", target: "target", referrerpolicy: "referrerpolicy", rel: "rel", active: "active", type: "type", disabled: "disabled", tabIndex: "tabIndex" }, outputs: { longpressEvent: "longpress", changeEvent: "change", keydownEvent: "keydown" }, exportAs: ["luzmoActionButton"], features: [i0.ɵɵProvidersFeature([
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoActionButton, selectors: [["luzmo-action-button"]], inputs: { emphasized: "emphasized", holdAffordance: "holdAffordance", quiet: "quiet", treatment: "treatment", role: "role", selected: "selected", toggles: "toggles", staticColor: "staticColor", variant: "variant", value: "value", size: "size", download: "download", label: "label", href: "href", target: "target", referrerpolicy: "referrerpolicy", rel: "rel", active: "active", type: "type", disabled: "disabled", tabIndex: "tabIndex" }, outputs: { longpress: "longpress", changeEvent: "changeEvent", keydownEvent: "keydownEvent" }, exportAs: ["luzmoActionButton"], features: [i0.ɵɵProvidersFeature([
                 {
                     provide: NG_VALUE_ACCESSOR,
                     useExisting: forwardRef(() => LuzmoActionButton),
@@ -304,5 +303,5 @@ export class LuzmoActionButton {
         }], tabIndex: [{
             type: Input,
             args: [{ alias: 'tabIndex' }]
-        }], longpressEvent: [{ type: i0.Output, args: ["longpress"] }], changeEvent: [{ type: i0.Output, args: ["change"] }], keydownEvent: [{ type: i0.Output, args: ["keydown"] }] }); })();
+        }], longpress: [{ type: i0.Output, args: ["longpress"] }], changeEvent: [{ type: i0.Output, args: ["changeEvent"] }], keydownEvent: [{ type: i0.Output, args: ["keydownEvent"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoActionButton, { className: "LuzmoActionButton", filePath: "components/action-button.ts", lineNumber: 27 }); })();

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

@@ -37,7 +37,7 @@ export declare class LuzmoActionGroup implements OnChanges {
     private bindEvents;
     focus(options?: FocusOptions): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoActionGroup, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoActionGroup, "luzmo-action-group", ["luzmoActionGroup"], { "buttons": { "alias": "buttons"; "required": false; }; "rovingTabindexController": { "alias": "rovingTabindexController"; "required": false; }; "compact": { "alias": "compact"; "required": false; }; "emphasized": { "alias": "emphasized"; "required": false; }; "justified": { "alias": "justified"; "required": false; }; "label": { "alias": "label"; "required": false; }; "quiet": { "alias": "quiet"; "required": false; }; "selects": { "alias": "selects"; "required": false; }; "staticColor": { "alias": "staticColor"; "required": false; }; "vertical": { "alias": "vertical"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "slotElement": { "alias": "slotElement"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, { "changeEvent": "change"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoActionGroup, "luzmo-action-group", ["luzmoActionGroup"], { "buttons": { "alias": "buttons"; "required": false; }; "rovingTabindexController": { "alias": "rovingTabindexController"; "required": false; }; "compact": { "alias": "compact"; "required": false; }; "emphasized": { "alias": "emphasized"; "required": false; }; "justified": { "alias": "justified"; "required": false; }; "label": { "alias": "label"; "required": false; }; "quiet": { "alias": "quiet"; "required": false; }; "selects": { "alias": "selects"; "required": false; }; "staticColor": { "alias": "staticColor"; "required": false; }; "vertical": { "alias": "vertical"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "slotElement": { "alias": "slotElement"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, { "changeEvent": "changeEvent"; }, never, ["*"], true, never>;
 }
 /** The underlying custom element type for LuzmoActionGroup */
 export type LuzmoActionGroupElement = LuzmoActionGroupHostElement;

package/esm/components/action-group.js

@@ -31,7 +31,7 @@ export class LuzmoActionGroup {
     slotElement;
     size;
     /** Announces that selection state has been changed by user */
-    changeEvent = output({ alias: 'change' });
+    changeEvent = output();
     constructor() {
         this.bindEvents();
         this.destroyRef.onDestroy(() => {
@@ -105,7 +105,7 @@ export class LuzmoActionGroup {
         return this.host.focus(options);
     }
     static ɵfac = function LuzmoActionGroup_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoActionGroup)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoActionGroup, selectors: [["luzmo-action-group"]], inputs: { buttons: "buttons", rovingTabindexController: "rovingTabindexController", compact: "compact", emphasized: "emphasized", justified: "justified", label: "label", quiet: "quiet", selects: "selects", staticColor: "staticColor", vertical: "vertical", selected: "selected", slotElement: "slotElement", size: "size" }, outputs: { changeEvent: "change" }, exportAs: ["luzmoActionGroup"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoActionGroup_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoActionGroup, selectors: [["luzmo-action-group"]], inputs: { buttons: "buttons", rovingTabindexController: "rovingTabindexController", compact: "compact", emphasized: "emphasized", justified: "justified", label: "label", quiet: "quiet", selects: "selects", staticColor: "staticColor", vertical: "vertical", selected: "selected", slotElement: "slotElement", size: "size" }, outputs: { changeEvent: "changeEvent" }, exportAs: ["luzmoActionGroup"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoActionGroup_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
         } }, encapsulation: 2 });
@@ -158,5 +158,5 @@ export class LuzmoActionGroup {
         }], size: [{
             type: Input,
             args: [{ alias: 'size' }]
-        }], changeEvent: [{ type: i0.Output, args: ["change"] }] }); })();
+        }], changeEvent: [{ type: i0.Output, args: ["changeEvent"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoActionGroup, { className: "LuzmoActionGroup", filePath: "components/action-group.ts", lineNumber: 17 }); })();

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

@@ -76,7 +76,7 @@ export declare class LuzmoActionMenu implements OnChanges, ControlValueAccessor
     toggle(target?: boolean): void;
     close(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoActionMenu, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoActionMenu, "luzmo-action-menu", ["luzmoActionMenu"], { "selects": { "alias": "selects"; "required": false; }; "staticColor": { "alias": "staticColor"; "required": false; }; "handleSlottableRequest": { "alias": "handleSlottableRequest"; "required": false; }; "managePresenceObservedSlot": { "alias": "managePresenceObservedSlot"; "required": false; }; "size": { "alias": "size"; "required": false; }; "appliedLabel": { "alias": "appliedLabel"; "required": false; }; "button": { "alias": "button"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "focused": { "alias": "focused"; "required": false; }; "icons": { "alias": "icons"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "invalid": { "alias": "invalid"; "required": false; }; "pending": { "alias": "pending"; "required": false; }; "pendingLabel": { "alias": "pendingLabel"; "required": false; }; "label": { "alias": "label"; "required": false; }; "open": { "alias": "open"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "labelAlignment": { "alias": "labelAlignment"; "required": false; }; "optionsMenu": { "alias": "optionsMenu"; "required": false; }; "overlayElement": { "alias": "overlayElement"; "required": false; }; "placement": { "alias": "placement"; "required": false; }; "quiet": { "alias": "quiet"; "required": false; }; "value": { "alias": "value"; "required": false; }; "selectedItem": { "alias": "selectedItem"; "required": false; }; "dependencyManager": { "alias": "dependencyManager"; "required": false; }; "isMobile": { "alias": "isMobile"; "required": false; }; "isTouchDevice": { "alias": "isTouchDevice"; "required": false; }; "strategy": { "alias": "strategy"; "required": false; }; "pendingStateController": { "alias": "pendingStateController"; "required": false; }; "applyFocusElementLabel": { "alias": "applyFocusElementLabel"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, { "changeEvent": "change"; "scrollEvent": "scroll"; "keydownEvent": "keydown"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoActionMenu, "luzmo-action-menu", ["luzmoActionMenu"], { "selects": { "alias": "selects"; "required": false; }; "staticColor": { "alias": "staticColor"; "required": false; }; "handleSlottableRequest": { "alias": "handleSlottableRequest"; "required": false; }; "managePresenceObservedSlot": { "alias": "managePresenceObservedSlot"; "required": false; }; "size": { "alias": "size"; "required": false; }; "appliedLabel": { "alias": "appliedLabel"; "required": false; }; "button": { "alias": "button"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "focused": { "alias": "focused"; "required": false; }; "icons": { "alias": "icons"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "invalid": { "alias": "invalid"; "required": false; }; "pending": { "alias": "pending"; "required": false; }; "pendingLabel": { "alias": "pendingLabel"; "required": false; }; "label": { "alias": "label"; "required": false; }; "open": { "alias": "open"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "labelAlignment": { "alias": "labelAlignment"; "required": false; }; "optionsMenu": { "alias": "optionsMenu"; "required": false; }; "overlayElement": { "alias": "overlayElement"; "required": false; }; "placement": { "alias": "placement"; "required": false; }; "quiet": { "alias": "quiet"; "required": false; }; "value": { "alias": "value"; "required": false; }; "selectedItem": { "alias": "selectedItem"; "required": false; }; "dependencyManager": { "alias": "dependencyManager"; "required": false; }; "isMobile": { "alias": "isMobile"; "required": false; }; "isTouchDevice": { "alias": "isTouchDevice"; "required": false; }; "strategy": { "alias": "strategy"; "required": false; }; "pendingStateController": { "alias": "pendingStateController"; "required": false; }; "applyFocusElementLabel": { "alias": "applyFocusElementLabel"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, { "changeEvent": "changeEvent"; "scrollEvent": "scrollEvent"; "keydownEvent": "keydownEvent"; }, never, ["*"], true, never>;
 }
 /** The underlying custom element type for LuzmoActionMenu */
 export type LuzmoActionMenuElement = LuzmoActionMenuHostElement;

package/esm/components/action-menu.js

@@ -61,10 +61,10 @@ export class LuzmoActionMenu {
     applyFocusElementLabel;
     /** The tab index to apply to this control. See general documentation about the tabindex HTML property */
     tabIndex;
-    changeEvent = output({ alias: 'change' });
-    scrollEvent = output({ alias: 'scroll' });
+    changeEvent = output();
+    scrollEvent = output();
     /** Trick :focus-visible polyfill into thinking keyboard based focus */
-    keydownEvent = output({ alias: 'keydown' });
+    keydownEvent = output();
     constructor() {
         this.bindEvents();
         this.destroyRef.onDestroy(() => {
@@ -185,7 +185,6 @@ export class LuzmoActionMenu {
     }
     bindEvents() {
         this.listenerCleanup.push(this.renderer.listen(this.host, 'change', (event) => {
-            this.changeEvent.emit(event);
             if (!this.isWritingValue) {
                 const eventWithDetail = event;
                 const eventTarget = event.target;
@@ -197,13 +196,13 @@ export class LuzmoActionMenu {
                     : (detailRecord === undefined ? detail : undefined)
                         ?? eventTarget?.['value']
                         ?? hostRecord['value']);
-                if (Object.is(this.lastCvaValue, nextValue)) {
-                    return;
+                if (!Object.is(this.lastCvaValue, nextValue)) {
+                    this.lastCvaValue = nextValue;
+                    this.setHostProperty('value', nextValue);
+                    this.onChange(nextValue);
                 }
-                this.lastCvaValue = nextValue;
-                this.setHostProperty('value', nextValue);
-                this.onChange(nextValue);
             }
+            this.changeEvent.emit(event);
         }));
         this.listenerCleanup.push(this.renderer.listen(this.host, 'scroll', (event) => {
             this.scrollEvent.emit(event);
@@ -250,7 +249,7 @@ export class LuzmoActionMenu {
         return this.host.close();
     }
     static ɵfac = function LuzmoActionMenu_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoActionMenu)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoActionMenu, selectors: [["luzmo-action-menu"]], inputs: { selects: "selects", staticColor: "staticColor", handleSlottableRequest: "handleSlottableRequest", managePresenceObservedSlot: "managePresenceObservedSlot", size: "size", appliedLabel: "appliedLabel", button: "button", disabled: "disabled", focused: "focused", icons: "icons", variant: "variant", invalid: "invalid", pending: "pending", pendingLabel: "pendingLabel", label: "label", open: "open", readonly: "readonly", labelAlignment: "labelAlignment", optionsMenu: "optionsMenu", overlayElement: "overlayElement", placement: "placement", quiet: "quiet", value: "value", selectedItem: "selectedItem", dependencyManager: "dependencyManager", isMobile: "isMobile", isTouchDevice: "isTouchDevice", strategy: "strategy", pendingStateController: "pendingStateController", applyFocusElementLabel: "applyFocusElementLabel", tabIndex: "tabIndex" }, outputs: { changeEvent: "change", scrollEvent: "scroll", keydownEvent: "keydown" }, exportAs: ["luzmoActionMenu"], features: [i0.ɵɵProvidersFeature([
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoActionMenu, selectors: [["luzmo-action-menu"]], inputs: { selects: "selects", staticColor: "staticColor", handleSlottableRequest: "handleSlottableRequest", managePresenceObservedSlot: "managePresenceObservedSlot", size: "size", appliedLabel: "appliedLabel", button: "button", disabled: "disabled", focused: "focused", icons: "icons", variant: "variant", invalid: "invalid", pending: "pending", pendingLabel: "pendingLabel", label: "label", open: "open", readonly: "readonly", labelAlignment: "labelAlignment", optionsMenu: "optionsMenu", overlayElement: "overlayElement", placement: "placement", quiet: "quiet", value: "value", selectedItem: "selectedItem", dependencyManager: "dependencyManager", isMobile: "isMobile", isTouchDevice: "isTouchDevice", strategy: "strategy", pendingStateController: "pendingStateController", applyFocusElementLabel: "applyFocusElementLabel", tabIndex: "tabIndex" }, outputs: { changeEvent: "changeEvent", scrollEvent: "scrollEvent", keydownEvent: "keydownEvent" }, exportAs: ["luzmoActionMenu"], features: [i0.ɵɵProvidersFeature([
                 {
                     provide: NG_VALUE_ACCESSOR,
                     useExisting: forwardRef(() => LuzmoActionMenu),
@@ -370,5 +369,5 @@ export class LuzmoActionMenu {
         }], tabIndex: [{
             type: Input,
             args: [{ alias: 'tabIndex' }]
-        }], changeEvent: [{ type: i0.Output, args: ["change"] }], scrollEvent: [{ type: i0.Output, args: ["scroll"] }], keydownEvent: [{ type: i0.Output, args: ["keydown"] }] }); })();
+        }], changeEvent: [{ type: i0.Output, args: ["changeEvent"] }], scrollEvent: [{ type: i0.Output, args: ["scrollEvent"] }], keydownEvent: [{ type: i0.Output, args: ["keydownEvent"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoActionMenu, { className: "LuzmoActionMenu", filePath: "components/action-menu.ts", lineNumber: 29 }); })();

package/esm/components/avatar.d.ts

@@ -53,7 +53,7 @@ export declare class LuzmoAvatar implements OnChanges {
     private bindEvents;
     focus(options?: FocusOptions): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoAvatar, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoAvatar, "luzmo-avatar", ["luzmoAvatar"], { "border": { "alias": "border"; "required": false; }; "rounding": { "alias": "rounding"; "required": false; }; "src": { "alias": "src"; "required": false; }; "letter": { "alias": "letter"; "required": false; }; "colorFromLetter": { "alias": "colorFromLetter"; "required": false; }; "isDecorative": { "alias": "isDecorative"; "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; }; "size": { "alias": "size"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, { "keydownEvent": "keydown"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoAvatar, "luzmo-avatar", ["luzmoAvatar"], { "border": { "alias": "border"; "required": false; }; "rounding": { "alias": "rounding"; "required": false; }; "src": { "alias": "src"; "required": false; }; "letter": { "alias": "letter"; "required": false; }; "colorFromLetter": { "alias": "colorFromLetter"; "required": false; }; "isDecorative": { "alias": "isDecorative"; "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; }; "size": { "alias": "size"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, { "keydownEvent": "keydownEvent"; }, never, ["*"], true, never>;
 }
 /** The underlying custom element type for LuzmoAvatar */
 export type LuzmoAvatarElement = LuzmoAvatarHostElement;

package/esm/components/avatar.js

@@ -45,7 +45,7 @@ export class LuzmoAvatar {
     /** The tab index to apply to this control. See general documentation about the tabindex HTML property */
     tabIndex;
     /** Trick :focus-visible polyfill into thinking keyboard based focus */
-    keydownEvent = output({ alias: 'keydown' });
+    keydownEvent = output();
     constructor() {
         this.bindEvents();
         this.destroyRef.onDestroy(() => {
@@ -125,7 +125,7 @@ export class LuzmoAvatar {
         return this.host.focus(options);
     }
     static ɵfac = function LuzmoAvatar_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoAvatar)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoAvatar, selectors: [["luzmo-avatar"]], inputs: { border: "border", rounding: "rounding", src: "src", letter: "letter", colorFromLetter: "colorFromLetter", isDecorative: "isDecorative", download: "download", label: "label", href: "href", target: "target", referrerpolicy: "referrerpolicy", rel: "rel", size: "size", disabled: "disabled", tabIndex: "tabIndex" }, outputs: { keydownEvent: "keydown" }, exportAs: ["luzmoAvatar"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoAvatar_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoAvatar, selectors: [["luzmo-avatar"]], inputs: { border: "border", rounding: "rounding", src: "src", letter: "letter", colorFromLetter: "colorFromLetter", isDecorative: "isDecorative", download: "download", label: "label", href: "href", target: "target", referrerpolicy: "referrerpolicy", rel: "rel", size: "size", disabled: "disabled", tabIndex: "tabIndex" }, outputs: { keydownEvent: "keydownEvent" }, exportAs: ["luzmoAvatar"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoAvatar_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
         } }, encapsulation: 2 });
@@ -184,5 +184,5 @@ export class LuzmoAvatar {
         }], tabIndex: [{
             type: Input,
             args: [{ alias: 'tabIndex' }]
-        }], keydownEvent: [{ type: i0.Output, args: ["keydown"] }] }); })();
+        }], keydownEvent: [{ type: i0.Output, args: ["keydownEvent"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoAvatar, { className: "LuzmoAvatar", filePath: "components/avatar.ts", lineNumber: 15 }); })();

package/esm/components/button.d.ts

@@ -52,7 +52,7 @@ export declare class LuzmoButton implements OnChanges {
     private bindEvents;
     focus(options?: FocusOptions): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoButton, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoButton, "luzmo-button", ["luzmoButton"], { "pendingLabel": { "alias": "pendingLabel"; "required": false; }; "pending": { "alias": "pending"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "staticColor": { "alias": "staticColor"; "required": false; }; "treatment": { "alias": "treatment"; "required": false; }; "quiet": { "alias": "quiet"; "required": false; }; "noWrap": { "alias": "noWrap"; "required": false; }; "pendingStateController": { "alias": "pendingStateController"; "required": false; }; "size": { "alias": "size"; "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; }; "active": { "alias": "active"; "required": false; }; "type": { "alias": "type"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, { "keydownEvent": "keydown"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoButton, "luzmo-button", ["luzmoButton"], { "pendingLabel": { "alias": "pendingLabel"; "required": false; }; "pending": { "alias": "pending"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "staticColor": { "alias": "staticColor"; "required": false; }; "treatment": { "alias": "treatment"; "required": false; }; "quiet": { "alias": "quiet"; "required": false; }; "noWrap": { "alias": "noWrap"; "required": false; }; "pendingStateController": { "alias": "pendingStateController"; "required": false; }; "size": { "alias": "size"; "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; }; "active": { "alias": "active"; "required": false; }; "type": { "alias": "type"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, { "keydownEvent": "keydownEvent"; }, never, ["*"], true, never>;
 }
 /** The underlying custom element type for LuzmoButton */
 export type LuzmoButtonElement = LuzmoButtonHostElement;

package/esm/components/button.js

@@ -47,7 +47,7 @@ export class LuzmoButton {
     /** The tab index to apply to this control. See general documentation about the tabindex HTML property */
     tabIndex;
     /** Trick :focus-visible polyfill into thinking keyboard based focus */
-    keydownEvent = output({ alias: 'keydown' });
+    keydownEvent = output();
     constructor() {
         this.bindEvents();
         this.destroyRef.onDestroy(() => {
@@ -139,7 +139,7 @@ export class LuzmoButton {
         return this.host.focus(options);
     }
     static ɵfac = function LuzmoButton_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoButton)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoButton, selectors: [["luzmo-button"]], inputs: { pendingLabel: "pendingLabel", pending: "pending", variant: "variant", staticColor: "staticColor", treatment: "treatment", quiet: "quiet", noWrap: "noWrap", pendingStateController: "pendingStateController", 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: ["luzmoButton"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoButton_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoButton, selectors: [["luzmo-button"]], inputs: { pendingLabel: "pendingLabel", pending: "pending", variant: "variant", staticColor: "staticColor", treatment: "treatment", quiet: "quiet", noWrap: "noWrap", pendingStateController: "pendingStateController", size: "size", download: "download", label: "label", href: "href", target: "target", referrerpolicy: "referrerpolicy", rel: "rel", active: "active", type: "type", disabled: "disabled", tabIndex: "tabIndex" }, outputs: { keydownEvent: "keydownEvent" }, exportAs: ["luzmoButton"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoButton_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
         } }, encapsulation: 2 });
@@ -210,5 +210,5 @@ export class LuzmoButton {
         }], tabIndex: [{
             type: Input,
             args: [{ alias: 'tabIndex' }]
-        }], keydownEvent: [{ type: i0.Output, args: ["keydown"] }] }); })();
+        }], keydownEvent: [{ type: i0.Output, args: ["keydownEvent"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoButton, { className: "LuzmoButton", filePath: "components/button.ts", lineNumber: 18 }); })();

package/esm/components/calendar.d.ts

@@ -34,10 +34,10 @@ export declare class LuzmoCalendar implements OnChanges, ControlValueAccessor {
     /** The date being hovered, used for range preview between start and end during range selection. Can be set externally to synchronize hover previews across multiple calendar instances. */
     hoveredDate?: __extt_CalendarDate;
     size?: ('xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl');
-    readonly monthChangeEvent: import("@angular/core").OutputEmitterRef<CustomEvent<unknown>>;
+    readonly monthChange: import("@angular/core").OutputEmitterRef<CustomEvent<unknown>>;
     readonly changeEvent: import("@angular/core").OutputEmitterRef<CustomEvent<unknown>>;
-    readonly rangeSelectEvent: import("@angular/core").OutputEmitterRef<CustomEvent<unknown>>;
-    readonly hoverDateEvent: import("@angular/core").OutputEmitterRef<CustomEvent<unknown>>;
+    readonly rangeSelect: import("@angular/core").OutputEmitterRef<CustomEvent<unknown>>;
+    readonly hoverDate: import("@angular/core").OutputEmitterRef<CustomEvent<unknown>>;
     constructor();
     ngOnChanges(changes: SimpleChanges): void;
     /**
@@ -59,7 +59,7 @@ export declare class LuzmoCalendar implements OnChanges, ControlValueAccessor {
     /** Resets the component's value */
     clear(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoCalendar, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoCalendar, "luzmo-calendar", ["luzmoCalendar"], { "value": { "alias": "value"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "language": { "alias": "language"; "required": false; }; "labels": { "alias": "labels"; "required": false; }; "selectionMode": { "alias": "selectionMode"; "required": false; }; "startDate": { "alias": "startDate"; "required": false; }; "endDate": { "alias": "endDate"; "required": false; }; "hoveredDate": { "alias": "hoveredDate"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, { "monthChangeEvent": "month-change"; "changeEvent": "change"; "rangeSelectEvent": "range-select"; "hoverDateEvent": "hover-date"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoCalendar, "luzmo-calendar", ["luzmoCalendar"], { "value": { "alias": "value"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "language": { "alias": "language"; "required": false; }; "labels": { "alias": "labels"; "required": false; }; "selectionMode": { "alias": "selectionMode"; "required": false; }; "startDate": { "alias": "startDate"; "required": false; }; "endDate": { "alias": "endDate"; "required": false; }; "hoveredDate": { "alias": "hoveredDate"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, { "monthChange": "month-change"; "changeEvent": "changeEvent"; "rangeSelect": "range-select"; "hoverDate": "hover-date"; }, never, ["*"], true, never>;
 }
 /** The underlying custom element type for LuzmoCalendar */
 export type LuzmoCalendarElement = LuzmoCalendarHostElement;

package/esm/components/calendar.js

@@ -37,10 +37,10 @@ export class LuzmoCalendar {
     /** The date being hovered, used for range preview between start and end during range selection. Can be set externally to synchronize hover previews across multiple calendar instances. */
     hoveredDate;
     size;
-    monthChangeEvent = output({ alias: 'month-change' });
-    changeEvent = output({ alias: 'change' });
-    rangeSelectEvent = output({ alias: 'range-select' });
-    hoverDateEvent = output({ alias: 'hover-date' });
+    monthChange = output({ alias: 'month-change' });
+    changeEvent = output();
+    rangeSelect = output({ alias: 'range-select' });
+    hoverDate = output({ alias: 'hover-date' });
     constructor() {
         this.bindEvents();
         this.destroyRef.onDestroy(() => {
@@ -101,10 +101,9 @@ export class LuzmoCalendar {
     }
     bindEvents() {
         this.listenerCleanup.push(this.renderer.listen(this.host, 'month-change', (event) => {
-            this.monthChangeEvent.emit(event);
+            this.monthChange.emit(event);
         }));
         this.listenerCleanup.push(this.renderer.listen(this.host, 'change', (event) => {
-            this.changeEvent.emit(event);
             if (!this.isWritingValue) {
                 const eventWithDetail = event;
                 const eventTarget = event.target;
@@ -116,19 +115,19 @@ export class LuzmoCalendar {
                     : (detailRecord === undefined ? detail : undefined)
                         ?? eventTarget?.['value']
                         ?? hostRecord['value']);
-                if (Object.is(this.lastCvaValue, nextValue)) {
-                    return;
+                if (!Object.is(this.lastCvaValue, nextValue)) {
+                    this.lastCvaValue = nextValue;
+                    this.setHostProperty('value', nextValue);
+                    this.onChange(nextValue);
                 }
-                this.lastCvaValue = nextValue;
-                this.setHostProperty('value', nextValue);
-                this.onChange(nextValue);
             }
+            this.changeEvent.emit(event);
         }));
         this.listenerCleanup.push(this.renderer.listen(this.host, 'range-select', (event) => {
-            this.rangeSelectEvent.emit(event);
+            this.rangeSelect.emit(event);
         }));
         this.listenerCleanup.push(this.renderer.listen(this.host, 'hover-date', (event) => {
-            this.hoverDateEvent.emit(event);
+            this.hoverDate.emit(event);
         }));
         this.listenerCleanup.push(this.renderer.listen(this.host, 'blur', () => {
             this.onTouched();
@@ -164,7 +163,7 @@ export class LuzmoCalendar {
         return this.host.clear();
     }
     static ɵfac = function LuzmoCalendar_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoCalendar)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoCalendar, selectors: [["luzmo-calendar"]], inputs: { value: "value", min: "min", max: "max", disabled: "disabled", language: "language", labels: "labels", selectionMode: "selectionMode", startDate: "startDate", endDate: "endDate", hoveredDate: "hoveredDate", size: "size" }, outputs: { monthChangeEvent: "month-change", changeEvent: "change", rangeSelectEvent: "range-select", hoverDateEvent: "hover-date" }, exportAs: ["luzmoCalendar"], features: [i0.ɵɵProvidersFeature([
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoCalendar, selectors: [["luzmo-calendar"]], inputs: { value: "value", min: "min", max: "max", disabled: "disabled", language: "language", labels: "labels", selectionMode: "selectionMode", startDate: "startDate", endDate: "endDate", hoveredDate: "hoveredDate", size: "size" }, outputs: { monthChange: "month-change", changeEvent: "changeEvent", rangeSelect: "range-select", hoverDate: "hover-date" }, exportAs: ["luzmoCalendar"], features: [i0.ɵɵProvidersFeature([
                 {
                     provide: NG_VALUE_ACCESSOR,
                     useExisting: forwardRef(() => LuzmoCalendar),
@@ -224,5 +223,5 @@ export class LuzmoCalendar {
         }], size: [{
             type: Input,
             args: [{ alias: 'size' }]
-        }], monthChangeEvent: [{ type: i0.Output, args: ["month-change"] }], changeEvent: [{ type: i0.Output, args: ["change"] }], rangeSelectEvent: [{ type: i0.Output, args: ["range-select"] }], hoverDateEvent: [{ type: i0.Output, args: ["hover-date"] }] }); })();
+        }], monthChange: [{ type: i0.Output, args: ["month-change"] }], changeEvent: [{ type: i0.Output, args: ["changeEvent"] }], rangeSelect: [{ type: i0.Output, args: ["range-select"] }], hoverDate: [{ type: i0.Output, args: ["hover-date"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoCalendar, { className: "LuzmoCalendar", filePath: "components/calendar.ts", lineNumber: 25 }); })();

package/esm/components/checkbox.d.ts

@@ -50,7 +50,7 @@ export declare class LuzmoCheckbox implements OnChanges, ControlValueAccessor {
     registerOnTouched(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoCheckbox, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoCheckbox, "luzmo-checkbox", ["luzmoCheckbox"], { "disabled": { "alias": "disabled"; "required": false; }; "indeterminate": { "alias": "indeterminate"; "required": false; }; "autofocus": { "alias": "autofocus"; "required": false; }; "invalid": { "alias": "invalid"; "required": false; }; "emphasized": { "alias": "emphasized"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "size": { "alias": "size"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "name": { "alias": "name"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; }, { "changeEvent": "change"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoCheckbox, "luzmo-checkbox", ["luzmoCheckbox"], { "disabled": { "alias": "disabled"; "required": false; }; "indeterminate": { "alias": "indeterminate"; "required": false; }; "autofocus": { "alias": "autofocus"; "required": false; }; "invalid": { "alias": "invalid"; "required": false; }; "emphasized": { "alias": "emphasized"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "size": { "alias": "size"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "name": { "alias": "name"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; }, { "changeEvent": "changeEvent"; }, never, ["*"], true, never>;
 }
 /** The underlying custom element type for LuzmoCheckbox */
 export type LuzmoCheckboxElement = LuzmoCheckboxHostElement;

package/esm/components/checkbox.js

@@ -38,7 +38,7 @@ export class LuzmoCheckbox {
     /** Whether the element is read-only */
     readonly;
     /** Announces a change in the `checked` property of a Checkbox */
-    changeEvent = output({ alias: 'change' });
+    changeEvent = output();
     constructor() {
         this.bindEvents();
         this.destroyRef.onDestroy(() => {
@@ -96,7 +96,6 @@ export class LuzmoCheckbox {
     }
     bindEvents() {
         this.listenerCleanup.push(this.renderer.listen(this.host, 'change', (event) => {
-            this.changeEvent.emit(event);
             if (!this.isWritingValue) {
                 const eventWithDetail = event;
                 const eventTarget = event.target;
@@ -108,13 +107,13 @@ export class LuzmoCheckbox {
                     : (detailRecord === undefined ? detail : undefined)
                         ?? eventTarget?.['checked']
                         ?? hostRecord['checked']);
-                if (Object.is(this.lastCvaValue, nextValue)) {
-                    return;
+                if (!Object.is(this.lastCvaValue, nextValue)) {
+                    this.lastCvaValue = nextValue;
+                    this.setHostProperty('checked', nextValue);
+                    this.onChange(nextValue);
                 }
-                this.lastCvaValue = nextValue;
-                this.setHostProperty('checked', nextValue);
-                this.onChange(nextValue);
             }
+            this.changeEvent.emit(event);
         }));
         this.listenerCleanup.push(this.renderer.listen(this.host, 'blur', () => {
             this.onTouched();
@@ -146,7 +145,7 @@ export class LuzmoCheckbox {
         }
     }
     static ɵfac = function LuzmoCheckbox_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoCheckbox)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoCheckbox, selectors: [["luzmo-checkbox"]], inputs: { disabled: "disabled", indeterminate: "indeterminate", autofocus: "autofocus", invalid: "invalid", emphasized: "emphasized", tabIndex: "tabIndex", size: "size", checked: "checked", name: "name", readonly: "readonly" }, outputs: { changeEvent: "change" }, exportAs: ["luzmoCheckbox"], features: [i0.ɵɵProvidersFeature([
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoCheckbox, selectors: [["luzmo-checkbox"]], inputs: { disabled: "disabled", indeterminate: "indeterminate", autofocus: "autofocus", invalid: "invalid", emphasized: "emphasized", tabIndex: "tabIndex", size: "size", checked: "checked", name: "name", readonly: "readonly" }, outputs: { changeEvent: "changeEvent" }, exportAs: ["luzmoCheckbox"], features: [i0.ɵɵProvidersFeature([
                 {
                     provide: NG_VALUE_ACCESSOR,
                     useExisting: forwardRef(() => LuzmoCheckbox),
@@ -203,5 +202,5 @@ export class LuzmoCheckbox {
         }], readonly: [{
             type: Input,
             args: [{ alias: 'readonly' }]
-        }], changeEvent: [{ type: i0.Output, args: ["change"] }] }); })();
+        }], changeEvent: [{ type: i0.Output, args: ["changeEvent"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoCheckbox, { className: "LuzmoCheckbox", filePath: "components/checkbox.ts", lineNumber: 26 }); })();