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

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/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),
@@ -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-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),
@@ -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,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", 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 });
@@ -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/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,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: { 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 });
@@ -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/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);
@@ -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/menu-group.d.ts

@@ -24,6 +24,8 @@ export declare class LuzmoMenuGroup implements OnChanges, ControlValueAccessor {
     menuSlot?: unknown;
     focusedItemIndex?: number;
     focusInItemIndex?: number;
+    shouldSupportDragAndSelect?: boolean;
+    isScrolling?: boolean;
     handleSubmenuClosed?: unknown;
     handleSubmenuOpened?: unknown;
     /** Announces that the `value` of the element has changed */
@@ -49,7 +51,7 @@ export declare class LuzmoMenuGroup implements OnChanges, ControlValueAccessor {
     setDisabledState(isDisabled: boolean): void;
     focus({ preventScroll }: FocusOptions): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoMenuGroup, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoMenuGroup, "luzmo-menu-group", ["luzmoMenuGroup"], { "size": { "alias": "size"; "required": false; }; "label": { "alias": "label"; "required": false; }; "ignore": { "alias": "ignore"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "selects": { "alias": "selects"; "required": false; }; "value": { "alias": "value"; "required": false; }; "valueSeparator": { "alias": "valueSeparator"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "selectedItems": { "alias": "selectedItems"; "required": false; }; "menuSlot": { "alias": "menuSlot"; "required": false; }; "focusedItemIndex": { "alias": "focusedItemIndex"; "required": false; }; "focusInItemIndex": { "alias": "focusInItemIndex"; "required": false; }; "handleSubmenuClosed": { "alias": "handleSubmenuClosed"; "required": false; }; "handleSubmenuOpened": { "alias": "handleSubmenuOpened"; "required": false; }; }, { "changeEvent": "change"; "closeEvent": "close"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoMenuGroup, "luzmo-menu-group", ["luzmoMenuGroup"], { "size": { "alias": "size"; "required": false; }; "label": { "alias": "label"; "required": false; }; "ignore": { "alias": "ignore"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "selects": { "alias": "selects"; "required": false; }; "value": { "alias": "value"; "required": false; }; "valueSeparator": { "alias": "valueSeparator"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "selectedItems": { "alias": "selectedItems"; "required": false; }; "menuSlot": { "alias": "menuSlot"; "required": false; }; "focusedItemIndex": { "alias": "focusedItemIndex"; "required": false; }; "focusInItemIndex": { "alias": "focusInItemIndex"; "required": false; }; "shouldSupportDragAndSelect": { "alias": "shouldSupportDragAndSelect"; "required": false; }; "isScrolling": { "alias": "isScrolling"; "required": false; }; "handleSubmenuClosed": { "alias": "handleSubmenuClosed"; "required": false; }; "handleSubmenuOpened": { "alias": "handleSubmenuOpened"; "required": false; }; }, { "changeEvent": "change"; "closeEvent": "close"; }, never, ["*"], true, never>;
 }
 /** The underlying custom element type for LuzmoMenuGroup */
 export type LuzmoMenuGroupElement = LuzmoMenuGroupHostElement;

package/esm/components/menu-group.js

@@ -31,6 +31,8 @@ export class LuzmoMenuGroup {
     menuSlot;
     focusedItemIndex;
     focusInItemIndex;
+    shouldSupportDragAndSelect;
+    isScrolling;
     handleSubmenuClosed;
     handleSubmenuOpened;
     /** Announces that the `value` of the element has changed */
@@ -83,6 +85,12 @@ export class LuzmoMenuGroup {
                 case 'focusInItemIndex':
                     this.setHostProperty('focusInItemIndex', changes['focusInItemIndex'].currentValue);
                     break;
+                case 'shouldSupportDragAndSelect':
+                    this.setHostProperty('shouldSupportDragAndSelect', changes['shouldSupportDragAndSelect'].currentValue);
+                    break;
+                case 'isScrolling':
+                    this.setHostProperty('isScrolling', changes['isScrolling'].currentValue);
+                    break;
                 case 'handleSubmenuClosed':
                     this.setHostProperty('handleSubmenuClosed', changes['handleSubmenuClosed'].currentValue);
                     break;
@@ -156,7 +164,7 @@ export class LuzmoMenuGroup {
         return this.host.focus({ preventScroll });
     }
     static ɵfac = function LuzmoMenuGroup_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoMenuGroup)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoMenuGroup, selectors: [["luzmo-menu-group"]], inputs: { size: "size", label: "label", ignore: "ignore", variant: "variant", selects: "selects", value: "value", valueSeparator: "valueSeparator", selected: "selected", selectedItems: "selectedItems", menuSlot: "menuSlot", focusedItemIndex: "focusedItemIndex", focusInItemIndex: "focusInItemIndex", handleSubmenuClosed: "handleSubmenuClosed", handleSubmenuOpened: "handleSubmenuOpened" }, outputs: { changeEvent: "change", closeEvent: "close" }, exportAs: ["luzmoMenuGroup"], features: [i0.ɵɵProvidersFeature([
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoMenuGroup, selectors: [["luzmo-menu-group"]], inputs: { size: "size", label: "label", ignore: "ignore", variant: "variant", selects: "selects", value: "value", valueSeparator: "valueSeparator", selected: "selected", selectedItems: "selectedItems", menuSlot: "menuSlot", focusedItemIndex: "focusedItemIndex", focusInItemIndex: "focusInItemIndex", shouldSupportDragAndSelect: "shouldSupportDragAndSelect", isScrolling: "isScrolling", handleSubmenuClosed: "handleSubmenuClosed", handleSubmenuOpened: "handleSubmenuOpened" }, outputs: { changeEvent: "change", closeEvent: "close" }, exportAs: ["luzmoMenuGroup"], features: [i0.ɵɵProvidersFeature([
                 {
                     provide: NG_VALUE_ACCESSOR,
                     useExisting: forwardRef(() => LuzmoMenuGroup),
@@ -219,6 +227,12 @@ export class LuzmoMenuGroup {
         }], focusInItemIndex: [{
             type: Input,
             args: [{ alias: 'focusInItemIndex' }]
+        }], shouldSupportDragAndSelect: [{
+            type: Input,
+            args: [{ alias: 'shouldSupportDragAndSelect' }]
+        }], isScrolling: [{
+            type: Input,
+            args: [{ alias: 'isScrolling' }]
         }], handleSubmenuClosed: [{
             type: Input,
             args: [{ alias: 'handleSubmenuClosed' }]

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

@@ -42,8 +42,8 @@ export declare class LuzmoMenuItem implements OnChanges {
     disabled?: boolean;
     /** The tab index to apply to this control. See general documentation about the tabindex HTML property */
     tabIndex?: number;
-    /** announces the item has been added so a parent menu can take ownerships */
-    readonly luzmoMenuItemAddedEvent: import("@angular/core").OutputEmitterRef<CustomEvent<unknown>>;
+    /** announces the item has been added or updated so a parent menu can take ownership */
+    readonly luzmoMenuItemAddedOrUpdatedEvent: import("@angular/core").OutputEmitterRef<CustomEvent<unknown>>;
     /** Trick :focus-visible polyfill into thinking keyboard based focus */
     readonly keydownEvent: import("@angular/core").OutputEmitterRef<unknown>;
     constructor();
@@ -58,7 +58,7 @@ export declare class LuzmoMenuItem implements OnChanges {
     private bindEvents;
     focus(options?: FocusOptions): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoMenuItem, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoMenuItem, "luzmo-menu-item", ["luzmoMenuItem"], { "abortControllerSubmenu": { "alias": "abortControllerSubmenu"; "required": false; }; "active": { "alias": "active"; "required": false; }; "focused": { "alias": "focused"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "value": { "alias": "value"; "required": false; }; "hasSubmenu": { "alias": "hasSubmenu"; "required": false; }; "tooltip": { "alias": "tooltip"; "required": false; }; "tooltipPlacement": { "alias": "tooltipPlacement"; "required": false; }; "contentSlot": { "alias": "contentSlot"; "required": false; }; "iconSlot": { "alias": "iconSlot"; "required": false; }; "noWrap": { "alias": "noWrap"; "required": false; }; "overlayElement": { "alias": "overlayElement"; "required": false; }; "open": { "alias": "open"; "required": false; }; "menuData": { "alias": "menuData"; "required": false; }; "download": { "alias": "download"; "required": false; }; "label": { "alias": "label"; "required": false; }; "href": { "alias": "href"; "required": false; }; "target": { "alias": "target"; "required": false; }; "referrerpolicy": { "alias": "referrerpolicy"; "required": false; }; "rel": { "alias": "rel"; "required": false; }; "managePresenceObservedSlot": { "alias": "managePresenceObservedSlot"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, { "luzmoMenuItemAddedEvent": "luzmo-menu-item-added"; "keydownEvent": "keydown"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoMenuItem, "luzmo-menu-item", ["luzmoMenuItem"], { "abortControllerSubmenu": { "alias": "abortControllerSubmenu"; "required": false; }; "active": { "alias": "active"; "required": false; }; "focused": { "alias": "focused"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "value": { "alias": "value"; "required": false; }; "hasSubmenu": { "alias": "hasSubmenu"; "required": false; }; "tooltip": { "alias": "tooltip"; "required": false; }; "tooltipPlacement": { "alias": "tooltipPlacement"; "required": false; }; "contentSlot": { "alias": "contentSlot"; "required": false; }; "iconSlot": { "alias": "iconSlot"; "required": false; }; "noWrap": { "alias": "noWrap"; "required": false; }; "overlayElement": { "alias": "overlayElement"; "required": false; }; "open": { "alias": "open"; "required": false; }; "menuData": { "alias": "menuData"; "required": false; }; "download": { "alias": "download"; "required": false; }; "label": { "alias": "label"; "required": false; }; "href": { "alias": "href"; "required": false; }; "target": { "alias": "target"; "required": false; }; "referrerpolicy": { "alias": "referrerpolicy"; "required": false; }; "rel": { "alias": "rel"; "required": false; }; "managePresenceObservedSlot": { "alias": "managePresenceObservedSlot"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, { "luzmoMenuItemAddedOrUpdatedEvent": "luzmo-menu-item-added-or-updated"; "keydownEvent": "keydown"; }, never, ["*"], true, never>;
 }
 /** The underlying custom element type for LuzmoMenuItem */
 export type LuzmoMenuItemElement = LuzmoMenuItemHostElement;

package/esm/components/menu-item.js

@@ -52,8 +52,8 @@ export class LuzmoMenuItem {
     disabled;
     /** The tab index to apply to this control. See general documentation about the tabindex HTML property */
     tabIndex;
-    /** announces the item has been added so a parent menu can take ownerships */
-    luzmoMenuItemAddedEvent = output({ alias: 'luzmo-menu-item-added' });
+    /** announces the item has been added or updated so a parent menu can take ownership */
+    luzmoMenuItemAddedOrUpdatedEvent = output({ alias: 'luzmo-menu-item-added-or-updated' });
     /** Trick :focus-visible polyfill into thinking keyboard based focus */
     keydownEvent = output({ alias: 'keydown' });
     constructor() {
@@ -151,8 +151,8 @@ export class LuzmoMenuItem {
         this.renderer.setProperty(this.host, key, value);
     }
     bindEvents() {
-        this.listenerCleanup.push(this.renderer.listen(this.host, 'luzmo-menu-item-added', (event) => {
-            this.luzmoMenuItemAddedEvent.emit(event);
+        this.listenerCleanup.push(this.renderer.listen(this.host, 'luzmo-menu-item-added-or-updated', (event) => {
+            this.luzmoMenuItemAddedOrUpdatedEvent.emit(event);
         }));
         this.listenerCleanup.push(this.renderer.listen(this.host, 'keydown', (event) => {
             this.keydownEvent.emit(event);
@@ -162,7 +162,7 @@ export class LuzmoMenuItem {
         return this.host.focus(options);
     }
     static ɵfac = function LuzmoMenuItem_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoMenuItem)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoMenuItem, selectors: [["luzmo-menu-item"]], inputs: { abortControllerSubmenu: "abortControllerSubmenu", active: "active", focused: "focused", selected: "selected", value: "value", hasSubmenu: "hasSubmenu", tooltip: "tooltip", tooltipPlacement: "tooltipPlacement", contentSlot: "contentSlot", iconSlot: "iconSlot", noWrap: "noWrap", overlayElement: "overlayElement", open: "open", menuData: "menuData", download: "download", label: "label", href: "href", target: "target", referrerpolicy: "referrerpolicy", rel: "rel", managePresenceObservedSlot: "managePresenceObservedSlot", disabled: "disabled", tabIndex: "tabIndex" }, outputs: { luzmoMenuItemAddedEvent: "luzmo-menu-item-added", keydownEvent: "keydown" }, exportAs: ["luzmoMenuItem"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoMenuItem_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoMenuItem, selectors: [["luzmo-menu-item"]], inputs: { abortControllerSubmenu: "abortControllerSubmenu", active: "active", focused: "focused", selected: "selected", value: "value", hasSubmenu: "hasSubmenu", tooltip: "tooltip", tooltipPlacement: "tooltipPlacement", contentSlot: "contentSlot", iconSlot: "iconSlot", noWrap: "noWrap", overlayElement: "overlayElement", open: "open", menuData: "menuData", download: "download", label: "label", href: "href", target: "target", referrerpolicy: "referrerpolicy", rel: "rel", managePresenceObservedSlot: "managePresenceObservedSlot", disabled: "disabled", tabIndex: "tabIndex" }, outputs: { luzmoMenuItemAddedOrUpdatedEvent: "luzmo-menu-item-added-or-updated", keydownEvent: "keydown" }, exportAs: ["luzmoMenuItem"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoMenuItem_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
         } }, encapsulation: 2 });
@@ -245,5 +245,5 @@ export class LuzmoMenuItem {
         }], tabIndex: [{
             type: Input,
             args: [{ alias: 'tabIndex' }]
-        }], luzmoMenuItemAddedEvent: [{ type: i0.Output, args: ["luzmo-menu-item-added"] }], keydownEvent: [{ type: i0.Output, args: ["keydown"] }] }); })();
+        }], luzmoMenuItemAddedOrUpdatedEvent: [{ type: i0.Output, args: ["luzmo-menu-item-added-or-updated"] }], keydownEvent: [{ type: i0.Output, args: ["keydown"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoMenuItem, { className: "LuzmoMenuItem", filePath: "components/menu-item.ts", lineNumber: 22 }); })();

package/esm/components/menu.d.ts

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

package/esm/components/menu.js

@@ -29,6 +29,8 @@ export class LuzmoMenu {
     menuSlot;
     focusedItemIndex;
     focusInItemIndex;
+    shouldSupportDragAndSelect;
+    isScrolling;
     handleSubmenuClosed;
     handleSubmenuOpened;
     size;
@@ -79,6 +81,12 @@ export class LuzmoMenu {
                 case 'focusInItemIndex':
                     this.setHostProperty('focusInItemIndex', changes['focusInItemIndex'].currentValue);
                     break;
+                case 'shouldSupportDragAndSelect':
+                    this.setHostProperty('shouldSupportDragAndSelect', changes['shouldSupportDragAndSelect'].currentValue);
+                    break;
+                case 'isScrolling':
+                    this.setHostProperty('isScrolling', changes['isScrolling'].currentValue);
+                    break;
                 case 'handleSubmenuClosed':
                     this.setHostProperty('handleSubmenuClosed', changes['handleSubmenuClosed'].currentValue);
                     break;
@@ -155,7 +163,7 @@ export class LuzmoMenu {
         return this.host.focus({ preventScroll });
     }
     static ɵfac = function LuzmoMenu_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoMenu)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoMenu, selectors: [["luzmo-menu"]], inputs: { label: "label", ignore: "ignore", variant: "variant", selects: "selects", value: "value", valueSeparator: "valueSeparator", selected: "selected", selectedItems: "selectedItems", menuSlot: "menuSlot", focusedItemIndex: "focusedItemIndex", focusInItemIndex: "focusInItemIndex", handleSubmenuClosed: "handleSubmenuClosed", handleSubmenuOpened: "handleSubmenuOpened", size: "size" }, outputs: { changeEvent: "change", closeEvent: "close" }, exportAs: ["luzmoMenu"], features: [i0.ɵɵProvidersFeature([
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoMenu, selectors: [["luzmo-menu"]], inputs: { label: "label", ignore: "ignore", variant: "variant", selects: "selects", value: "value", valueSeparator: "valueSeparator", selected: "selected", selectedItems: "selectedItems", menuSlot: "menuSlot", focusedItemIndex: "focusedItemIndex", focusInItemIndex: "focusInItemIndex", shouldSupportDragAndSelect: "shouldSupportDragAndSelect", isScrolling: "isScrolling", handleSubmenuClosed: "handleSubmenuClosed", handleSubmenuOpened: "handleSubmenuOpened", size: "size" }, outputs: { changeEvent: "change", closeEvent: "close" }, exportAs: ["luzmoMenu"], features: [i0.ɵɵProvidersFeature([
                 {
                     provide: NG_VALUE_ACCESSOR,
                     useExisting: forwardRef(() => LuzmoMenu),
@@ -215,6 +223,12 @@ export class LuzmoMenu {
         }], focusInItemIndex: [{
             type: Input,
             args: [{ alias: 'focusInItemIndex' }]
+        }], shouldSupportDragAndSelect: [{
+            type: Input,
+            args: [{ alias: 'shouldSupportDragAndSelect' }]
+        }], isScrolling: [{
+            type: Input,
+            args: [{ alias: 'isScrolling' }]
         }], handleSubmenuClosed: [{
             type: Input,
             args: [{ alias: 'handleSubmenuClosed' }]