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

package/README.md

@@ -35,6 +35,43 @@ 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.
 
+## Router links
+
+Angular 20 and newer recognize Lucero components with an `href` property as
+link-compatible custom elements. Import `RouterLink` and apply it directly to
+the Lucero component:
+
+```ts
+import { Component } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { LuzmoActionButton } from '@luzmo/ngx-lucero';
+
+@Component({
+  selector: 'app-settings-link',
+  standalone: true,
+  imports: [LuzmoActionButton, RouterLink],
+  template: `
+    <luzmo-action-button routerLink="/settings">
+      Settings
+    </luzmo-action-button>
+  `
+})
+export class SettingsLinkComponent {}
+```
+
+`RouterLink` writes the resolved `href`, handles the click with the Angular
+router, and prevents a full page refresh. The component forwards exactly one
+`click` event per activation, so the router navigates once.
+
+Because activation is proxied through an anchor inside the component's shadow
+root, the button does not expose native link affordances: modified clicks
+(<kbd>Cmd</kbd>/<kbd>Ctrl</kbd>/<kbd>Shift</kbd>) and **Open link in new tab**
+from the context menu are not available. Use a plain `<a>` where those matter.
+
+Angular 17–19 do not recognize custom elements as anchor-like. On those
+versions, use `routerLink` without a separate `href` for client-side navigation,
+or upgrade to Angular 20+ when native link behavior is required.
+
 ## Notes
 
 - This package depends on `@luzmo/lucero` for the underlying custom elements.

package/esm/components/accordion-item.js

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

package/esm/components/accordion.js

@@ -81,7 +81,7 @@ export class LuzmoAccordion {
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoAccordion, selectors: [["luzmo-accordion"]], inputs: { allowMultiple: "allowMultiple", density: "density", headerCase: "headerCase", noContentPadding: "noContentPadding", variant: "variant", size: "size" }, exportAs: ["luzmoAccordion"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoAccordion_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
-        } }, encapsulation: 2, changeDetection: 0 });
+        } }, encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LuzmoAccordion, [{
         type: Component,

package/esm/components/action-bar.js

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

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

@@ -1,9 +1,9 @@
 import { OnChanges, SimpleChanges } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import '@luzmo/lucero/action-button';
-import type { LuzmoActionButton as LuzmoActionButtonHostElement, ActionButtonVariants } from '@luzmo/lucero/action-button';
+import type { LuzmoActionButton as LuzmoActionButtonHostElement, ActionButtonTreatments, ActionButtonVariants } from '@luzmo/lucero/action-button';
 import * as i0 from "@angular/core";
-export type { ActionButtonVariants } from '@luzmo/lucero/action-button';
+export type { ActionButtonTreatments, ActionButtonVariants } from '@luzmo/lucero/action-button';
 export declare class LuzmoActionButton implements OnChanges, ControlValueAccessor {
     private readonly elementRef;
     private readonly renderer;
@@ -18,6 +18,8 @@ export declare class LuzmoActionButton implements OnChanges, ControlValueAccesso
     holdAffordance?: boolean;
     /** Whether the Action Button should show in a quiet state */
     quiet?: boolean;
+    /** The surface treatment for neutral action buttons. `outline` preserves the standard surface; `fill` uses highlighted neutral surface tokens. Quiet, selected, and static-color appearances take precedence. Other variants retain their existing appearance. */
+    treatment?: ActionButtonTreatments;
     /** The role for the Action Button */
     role?: string;
     /** Whether an Action Button with `role='button'` should also be `aria-pressed='true'` */
@@ -26,7 +28,7 @@ export declare class LuzmoActionButton implements OnChanges, ControlValueAccesso
     toggles?: boolean;
     /** The static color variant to use for the action button. */
     staticColor?: 'white' | 'black';
-    /** The appearance preset to apply to this action button. - `neutral` (default): the standard action button. - `pill`: a content-width chip using the standard action-button radius. - `accent`: a content-width chip with a soft, primary-tinted theme. */
+    /** The appearance preset to apply to this action button. - `neutral` (default): the standard action button. - `primary`: a primary-colored outline action button. - `negative`: a destructive tool with negative text and icon colors. - `pill`: a content-width chip using the standard action-button radius. - `accent`: a content-width chip with a soft, primary-tinted theme. */
     variant?: ActionButtonVariants;
     /** The value of the Action Button */
     value?: string;
@@ -76,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; }; "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; }; }, { "longpressEvent": "longpress"; "changeEvent": "change"; "keydownEvent": "keydown"; }, never, ["*"], true, never>;
 }
 /** The underlying custom element type for LuzmoActionButton */
 export type LuzmoActionButtonElement = LuzmoActionButtonHostElement;

package/esm/components/action-button.js

@@ -25,6 +25,8 @@ export class LuzmoActionButton {
     holdAffordance;
     /** Whether the Action Button should show in a quiet state */
     quiet;
+    /** The surface treatment for neutral action buttons. `outline` preserves the standard surface; `fill` uses highlighted neutral surface tokens. Quiet, selected, and static-color appearances take precedence. Other variants retain their existing appearance. */
+    treatment;
     /** The role for the Action Button */
     role;
     /** Whether an Action Button with `role='button'` should also be `aria-pressed='true'` */
@@ -33,7 +35,7 @@ export class LuzmoActionButton {
     toggles;
     /** The static color variant to use for the action button. */
     staticColor;
-    /** The appearance preset to apply to this action button. - `neutral` (default): the standard action button. - `pill`: a content-width chip using the standard action-button radius. - `accent`: a content-width chip with a soft, primary-tinted theme. */
+    /** The appearance preset to apply to this action button. - `neutral` (default): the standard action button. - `primary`: a primary-colored outline action button. - `negative`: a destructive tool with negative text and icon colors. - `pill`: a content-width chip using the standard action-button radius. - `accent`: a content-width chip with a soft, primary-tinted theme. */
     variant;
     /** The value of the Action Button */
     value;
@@ -83,6 +85,9 @@ export class LuzmoActionButton {
                 case 'quiet':
                     this.setHostProperty('quiet', changes['quiet'].currentValue);
                     break;
+                case 'treatment':
+                    this.setHostProperty('treatment', changes['treatment'].currentValue);
+                    break;
                 case 'role':
                     this.setHostProperty('role', changes['role'].currentValue);
                     break;
@@ -209,7 +214,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", 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: { longpressEvent: "longpress", changeEvent: "change", keydownEvent: "keydown" }, exportAs: ["luzmoActionButton"], features: [i0.ɵɵProvidersFeature([
                 {
                     provide: NG_VALUE_ACCESSOR,
                     useExisting: forwardRef(() => LuzmoActionButton),
@@ -218,7 +223,7 @@ export class LuzmoActionButton {
             ]), i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoActionButton_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
-        } }, encapsulation: 2, changeDetection: 0 });
+        } }, encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LuzmoActionButton, [{
         type: Component,
@@ -245,6 +250,9 @@ export class LuzmoActionButton {
         }], quiet: [{
             type: Input,
             args: [{ alias: 'quiet' }]
+        }], treatment: [{
+            type: Input,
+            args: [{ alias: 'treatment' }]
         }], role: [{
             type: Input,
             args: [{ alias: 'role' }]

package/esm/components/action-group.js

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

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

@@ -44,6 +44,7 @@ export declare class LuzmoActionMenu implements OnChanges, ControlValueAccessor
     selectedItem?: unknown;
     dependencyManager?: unknown;
     isMobile?: unknown;
+    isTouchDevice?: unknown;
     strategy?: unknown;
     pendingStateController?: unknown;
     applyFocusElementLabel?: unknown;
@@ -75,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; }; "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": "change"; "scrollEvent": "scroll"; "keydownEvent": "keydown"; }, never, ["*"], true, never>;
 }
 /** The underlying custom element type for LuzmoActionMenu */
 export type LuzmoActionMenuElement = LuzmoActionMenuHostElement;

package/esm/components/action-menu.js

@@ -55,6 +55,7 @@ export class LuzmoActionMenu {
     selectedItem;
     dependencyManager;
     isMobile;
+    isTouchDevice;
     strategy;
     pendingStateController;
     applyFocusElementLabel;
@@ -153,6 +154,9 @@ export class LuzmoActionMenu {
                 case 'isMobile':
                     this.setHostProperty('isMobile', changes['isMobile'].currentValue);
                     break;
+                case 'isTouchDevice':
+                    this.setHostProperty('isTouchDevice', changes['isTouchDevice'].currentValue);
+                    break;
                 case 'strategy':
                     this.setHostProperty('strategy', changes['strategy'].currentValue);
                     break;
@@ -246,7 +250,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", 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: "change", scrollEvent: "scroll", keydownEvent: "keydown" }, exportAs: ["luzmoActionMenu"], features: [i0.ɵɵProvidersFeature([
                 {
                     provide: NG_VALUE_ACCESSOR,
                     useExisting: forwardRef(() => LuzmoActionMenu),
@@ -255,7 +259,7 @@ export class LuzmoActionMenu {
             ]), i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoActionMenu_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
-        } }, encapsulation: 2, changeDetection: 0 });
+        } }, encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LuzmoActionMenu, [{
         type: Component,
@@ -351,6 +355,9 @@ export class LuzmoActionMenu {
         }], isMobile: [{
             type: Input,
             args: [{ alias: 'isMobile' }]
+        }], isTouchDevice: [{
+            type: Input,
+            args: [{ alias: 'isTouchDevice' }]
         }], strategy: [{
             type: Input,
             args: [{ alias: 'strategy' }]

package/esm/components/avatar.d.ts

@@ -16,6 +16,10 @@ export declare class LuzmoAvatar implements OnChanges {
     rounding?: 'none' | 'full';
     /** The src of the avatar image. */
     src?: string;
+    /** The letter to show when no image is available. Pass a single character; the host decides what to display (for example the first letter of a name). */
+    letter?: string;
+    /** When true, the letter fallback derives its background color from the letter instead of using the neutral default. */
+    colorFromLetter?: boolean;
     /** When true, marks the avatar image as decorative (sets alt=""). Use when the avatar does not convey meaningful information. */
     isDecorative?: boolean;
     /** Causes the browser to treat the linked URL as a download. */
@@ -49,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; }; "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": "keydown"; }, never, ["*"], true, never>;
 }
 /** The underlying custom element type for LuzmoAvatar */
 export type LuzmoAvatarElement = LuzmoAvatarHostElement;

package/esm/components/avatar.js

@@ -21,6 +21,10 @@ export class LuzmoAvatar {
     rounding;
     /** The src of the avatar image. */
     src;
+    /** The letter to show when no image is available. Pass a single character; the host decides what to display (for example the first letter of a name). */
+    letter;
+    /** When true, the letter fallback derives its background color from the letter instead of using the neutral default. */
+    colorFromLetter;
     /** When true, marks the avatar image as decorative (sets alt=""). Use when the avatar does not convey meaningful information. */
     isDecorative;
     /** Causes the browser to treat the linked URL as a download. */
@@ -62,6 +66,12 @@ export class LuzmoAvatar {
                 case 'src':
                     this.setHostProperty('src', changes['src'].currentValue);
                     break;
+                case 'letter':
+                    this.setHostProperty('letter', changes['letter'].currentValue);
+                    break;
+                case 'colorFromLetter':
+                    this.setHostProperty('colorFromLetter', changes['colorFromLetter'].currentValue);
+                    break;
                 case 'isDecorative':
                     this.setHostProperty('isDecorative', changes['isDecorative'].currentValue);
                     break;
@@ -115,10 +125,10 @@ 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", 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: "keydown" }, 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, changeDetection: 0 });
+        } }, encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LuzmoAvatar, [{
         type: Component,
@@ -138,6 +148,12 @@ export class LuzmoAvatar {
         }], src: [{
             type: Input,
             args: [{ alias: 'src' }]
+        }], letter: [{
+            type: Input,
+            args: [{ alias: 'letter' }]
+        }], colorFromLetter: [{
+            type: Input,
+            args: [{ alias: 'colorFromLetter' }]
         }], isDecorative: [{
             type: Input,
             args: [{ alias: 'isDecorative' }]

package/esm/components/badge.js

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

package/esm/components/button-group.js

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

package/esm/components/button.d.ts

@@ -38,8 +38,6 @@ export declare class LuzmoButton implements OnChanges {
     disabled?: boolean;
     /** The tab index to apply to this control. See general documentation about the tabindex HTML property */
     tabIndex?: number;
-    /** Announces that the `value` of the element has changed */
-    readonly changeEvent: import("@angular/core").OutputEmitterRef<CustomEvent<unknown>>;
     /** Trick :focus-visible polyfill into thinking keyboard based focus */
     readonly keydownEvent: import("@angular/core").OutputEmitterRef<unknown>;
     constructor();
@@ -54,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; }; }, { "changeEvent": "change"; "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": "keydown"; }, never, ["*"], true, never>;
 }
 /** The underlying custom element type for LuzmoButton */
 export type LuzmoButtonElement = LuzmoButtonHostElement;

package/esm/components/button.js

@@ -46,8 +46,6 @@ export class LuzmoButton {
     disabled;
     /** The tab index to apply to this control. See general documentation about the tabindex HTML property */
     tabIndex;
-    /** Announces that the `value` of the element has changed */
-    changeEvent = output({ alias: 'change' });
     /** Trick :focus-visible polyfill into thinking keyboard based focus */
     keydownEvent = output({ alias: 'keydown' });
     constructor() {
@@ -133,9 +131,6 @@ export class LuzmoButton {
         this.renderer.setProperty(this.host, key, value);
     }
     bindEvents() {
-        this.listenerCleanup.push(this.renderer.listen(this.host, 'change', (event) => {
-            this.changeEvent.emit(event);
-        }));
         this.listenerCleanup.push(this.renderer.listen(this.host, 'keydown', (event) => {
             this.keydownEvent.emit(event);
         }));
@@ -144,10 +139,10 @@ 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: { changeEvent: "change", 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: "keydown" }, 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, changeDetection: 0 });
+        } }, encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LuzmoButton, [{
         type: Component,
@@ -215,5 +210,5 @@ export class LuzmoButton {
         }], tabIndex: [{
             type: Input,
             args: [{ alias: 'tabIndex' }]
-        }], changeEvent: [{ type: i0.Output, args: ["change"] }], keydownEvent: [{ type: i0.Output, args: ["keydown"] }] }); })();
+        }], keydownEvent: [{ type: i0.Output, args: ["keydown"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoButton, { className: "LuzmoButton", filePath: "components/button.ts", lineNumber: 18 }); })();

package/esm/components/calendar.js

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

package/esm/components/chat-message-group.js

@@ -62,7 +62,7 @@ export class LuzmoChatMessageGroup {
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoChatMessageGroup, selectors: [["luzmo-chat-message-group"]], inputs: { avatarPlacement: "avatarPlacement", size: "size" }, exportAs: ["luzmoChatMessageGroup"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoChatMessageGroup_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
-        } }, encapsulation: 2, changeDetection: 0 });
+        } }, encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LuzmoChatMessageGroup, [{
         type: Component,

package/esm/components/chat-message.js

@@ -112,7 +112,7 @@ export class LuzmoChatMessage {
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoChatMessage, selectors: [["luzmo-chat-message"]], inputs: { position: "position", variant: "variant", treatment: "treatment", quiet: "quiet", name: "name", datetime: "datetime", datetimeFormatOptions: "datetimeFormatOptions", datetimeLanguage: "datetimeLanguage", meta: "meta", actionsPosition: [0, "actions", "actionsPosition"], avatarPlacement: "avatarPlacement", size: "size" }, exportAs: ["luzmoChatMessage"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoChatMessage_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
-        } }, encapsulation: 2, changeDetection: 0 });
+        } }, encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LuzmoChatMessage, [{
         type: Component,

package/esm/components/checkbox.js

@@ -7,6 +7,7 @@ const _c0 = ["*"];
  * Angular wrapper component for <luzmo-checkbox>
  *
  * @slot (default) - content to display as the label for the Checkbox
+ * @csspart control - Native checkbox indicator. Hidden when used inside `luzmo-question-box`.
  */
 export class LuzmoCheckbox {
     elementRef = inject(ElementRef);
@@ -154,7 +155,7 @@ export class LuzmoCheckbox {
             ]), i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoCheckbox_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
-        } }, encapsulation: 2, changeDetection: 0 });
+        } }, encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LuzmoCheckbox, [{
         type: Component,
@@ -203,4 +204,4 @@ export class LuzmoCheckbox {
             type: Input,
             args: [{ alias: 'readonly' }]
         }], changeEvent: [{ type: i0.Output, args: ["change"] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoCheckbox, { className: "LuzmoCheckbox", filePath: "components/checkbox.ts", lineNumber: 25 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoCheckbox, { className: "LuzmoCheckbox", filePath: "components/checkbox.ts", lineNumber: 26 }); })();

package/esm/components/clear-button.js

@@ -115,7 +115,7 @@ export class LuzmoClearButton {
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoClearButton, selectors: [["luzmo-clear-button"]], inputs: { variant: "variant", 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: ["luzmoClearButton"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoClearButton_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
-        } }, encapsulation: 2, changeDetection: 0 });
+        } }, encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LuzmoClearButton, [{
         type: Component,

package/esm/components/close-button.js

@@ -119,7 +119,7 @@ export class LuzmoCloseButton {
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoCloseButton, selectors: [["luzmo-close-button"]], inputs: { variant: "variant", staticColor: "staticColor", 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: ["luzmoCloseButton"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoCloseButton_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
-        } }, encapsulation: 2, changeDetection: 0 });
+        } }, encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LuzmoCloseButton, [{
         type: Component,

package/esm/components/color-area.js

@@ -105,7 +105,7 @@ export class LuzmoColorArea {
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoColorArea, selectors: [["luzmo-color-area"]], inputs: { disabled: "disabled", focused: "focused", labelX: "labelX", labelY: "labelY", hue: "hue", color: "color", x: "x", y: "y", step: "step", inputX: "inputX", inputY: "inputY" }, outputs: { inputEvent: "input", changeEvent: "change" }, exportAs: ["luzmoColorArea"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoColorArea_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
-        } }, encapsulation: 2, changeDetection: 0 });
+        } }, encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LuzmoColorArea, [{
         type: Component,

package/esm/components/color-field.js

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

package/esm/components/color-handle.js

@@ -63,7 +63,7 @@ export class LuzmoColorHandle {
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoColorHandle, selectors: [["luzmo-color-handle"]], inputs: { disabled: "disabled", focused: "focused", open: "open", color: "color" }, exportAs: ["luzmoColorHandle"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoColorHandle_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
-        } }, encapsulation: 2, changeDetection: 0 });
+        } }, encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LuzmoColorHandle, [{
         type: Component,

package/esm/components/color-loupe.js

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

package/esm/components/color-menu.js

@@ -92,7 +92,7 @@ export class LuzmoColorMenu {
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoColorMenu, selectors: [["luzmo-color-menu"]], inputs: { color: "color", noAlphaChannel: "noAlphaChannel", swatches: "swatches", areaElement: "areaElement", size: "size", disabled: "disabled", tabIndex: "tabIndex" }, outputs: { changeEvent: "change", keydownEvent: "keydown" }, exportAs: ["luzmoColorMenu"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoColorMenu_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
-        } }, encapsulation: 2, changeDetection: 0 });
+        } }, encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LuzmoColorMenu, [{
         type: Component,

package/esm/components/color-palette-group.js

@@ -88,7 +88,7 @@ export class LuzmoColorPaletteGroup {
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoColorPaletteGroup, selectors: [["luzmo-color-palette-group"]], inputs: { disabled: "disabled", horizontal: "horizontal", rovingTabindexController: "rovingTabindexController", label: "label", selected: "selected", slotElement: "slotElement", size: "size" }, outputs: { changeEvent: "change" }, exportAs: ["luzmoColorPaletteGroup"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoColorPaletteGroup_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
-        } }, encapsulation: 2, changeDetection: 0 });
+        } }, encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LuzmoColorPaletteGroup, [{
         type: Component,

package/esm/components/color-palette.js

@@ -103,7 +103,7 @@ export class LuzmoColorPalette {
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoColorPalette, selectors: [["luzmo-color-palette"]], inputs: { disabled: "disabled", focused: "focused", selected: "selected", active: "active", value: "value", colors: "colors", reverse: "reverse", horizontal: "horizontal", size: "size", tabIndex: "tabIndex" }, outputs: { keydownEvent: "keydown" }, exportAs: ["luzmoColorPalette"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoColorPalette_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
-        } }, encapsulation: 2, changeDetection: 0 });
+        } }, encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LuzmoColorPalette, [{
         type: Component,

package/esm/components/color-picker.js

@@ -105,7 +105,7 @@ export class LuzmoColorPicker {
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoColorPicker, selectors: [["luzmo-color-picker"]], inputs: { color: "color", open: "open", disabled: "disabled", readOnly: "readOnly", placement: "placement", rounding: "rounding", shape: "shape", swatches: "swatches", noAlphaChannel: "noAlphaChannel", size: "size" }, outputs: { changeEvent: "change", inputEvent: "input" }, exportAs: ["luzmoColorPicker"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoColorPicker_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
-        } }, encapsulation: 2, changeDetection: 0 });
+        } }, encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LuzmoColorPicker, [{
         type: Component,