@nanahoshi/mona-ui 0.4.0 → 0.5.0

package/collapsible/package.json

@@ -0,0 +1,4 @@
+{
+  "module": "../fesm2022/nanahoshi-mona-ui-collapsible.mjs",
+  "typings": "../types/nanahoshi-mona-ui-collapsible.d.ts"
+}

package/fesm2022/nanahoshi-mona-ui-button.mjs

@@ -305,8 +305,7 @@ class ButtonDirective {
             const size = this.effectiveSize();
             const selected = this.selected();
             const userClass = this.userClass();
-            const variants = buttonThemeVariants;
-            const variantClasses = variants({ disabled, iconOnly, loading, look, rounded, selected, size });
+            const variantClasses = buttonThemeVariants({ disabled, iconOnly, loading, look, rounded, selected, size });
             return twMerge(variantClasses, userClass);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));

package/fesm2022/nanahoshi-mona-ui-collapsible.mjs

@@ -0,0 +1,304 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, computed, input, model, forwardRef, Directive, inject, ElementRef, signal, DestroyRef, afterNextRender, effect, untracked } from '@angular/core';
+import { createElementControlId } from '@nanahoshi/mona-ui/internal';
+
+const CollapsibleToken = new InjectionToken("MONA_COLLAPSIBLE");
+
+/**
+ * @description
+ * Headless disclosure root. Adds no markup of its own, so it can be applied to any element
+ * (`li`, `div`, `section`) and paired with `monaCollapsibleTrigger` and `monaCollapsibleContent`.
+ */
+class CollapsibleDirective {
+    constructor() {
+        this.state = computed(() => (this.expanded() ? "open" : "closed"), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Enables the height transition applied to the collapsible content.
+         * @default true
+         */
+        this.animate = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "animate" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Id assigned to the content element and referenced by the trigger through `aria-controls`.
+         */
+        this.contentId = createElementControlId();
+        /**
+         * @description Suppresses toggling through the trigger. `expand()` and `collapse()` still apply.
+         * @default false
+         */
+        this.disabled = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets whether the content is expanded. Supports two-way binding.
+         * @default false
+         */
+        this.expanded = model(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+    }
+    collapse() {
+        this.expanded.set(false);
+    }
+    expand() {
+        this.expanded.set(true);
+    }
+    toggle() {
+        if (this.disabled()) {
+            return;
+        }
+        this.expanded.update(expanded => !expanded);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CollapsibleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: CollapsibleDirective, isStandalone: true, selector: "[monaCollapsible]", inputs: { animate: { classPropertyName: "animate", publicName: "animate", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange" }, host: { properties: { "attr.data-state": "state()" } }, providers: [{ provide: CollapsibleToken, useExisting: forwardRef(() => CollapsibleDirective) }], exportAs: ["monaCollapsible"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CollapsibleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[monaCollapsible]",
+                    exportAs: "monaCollapsible",
+                    host: {
+                        "[attr.data-state]": "state()"
+                    },
+                    providers: [{ provide: CollapsibleToken, useExisting: forwardRef(() => CollapsibleDirective) }]
+                }]
+        }], propDecorators: { animate: [{ type: i0.Input, args: [{ isSignal: true, alias: "animate", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }] } });
+
+const CONTENT_HEIGHT_VARIABLE = "--mona-collapsible-content-height";
+/**
+ * @description
+ * Animates the height of the collapsible content between `0` and its measured size. Adds no wrapper
+ * element, so it can be applied directly to a `ul`, `div` or any other container with any number of children.
+ *
+ * The measured size is also published on the host as the `--mona-collapsible-content-height` custom
+ * property, so consumers can drive their own animation instead (pair it with `[animate]="false"` on the root).
+ */
+class CollapsibleContentDirective {
+    #element;
+    #initialized;
+    #reducedMotion;
+    #fallbackId;
+    constructor() {
+        this.#element = inject(ElementRef).nativeElement;
+        this.#initialized = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#initialized" }] : /* istanbul ignore next */ []));
+        this.#reducedMotion = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#reducedMotion" }] : /* istanbul ignore next */ []));
+        this.#fallbackId = null;
+        this.collapsible = inject(CollapsibleToken);
+        this.inert = computed(() => (this.collapsible.expanded() ? null : true), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "inert" }] : /* istanbul ignore next */ []));
+        this.state = computed(() => (this.collapsible.expanded() ? "open" : "closed"), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+        const destroyRef = inject(DestroyRef);
+        if (typeof window !== "undefined" && typeof window.matchMedia === "function") {
+            const query = window.matchMedia("(prefers-reduced-motion: reduce)");
+            const onPreferenceChange = (event) => this.#reducedMotion.set(event.matches);
+            this.#reducedMotion.set(query.matches);
+            query.addEventListener("change", onPreferenceChange);
+            destroyRef.onDestroy(() => query.removeEventListener("change", onPreferenceChange));
+        }
+        const onTransitionEnd = (event) => {
+            if (event.propertyName !== "height" || event.target !== this.#element) {
+                return;
+            }
+            this.#settle();
+        };
+        this.#element.addEventListener("transitionend", onTransitionEnd);
+        destroyRef.onDestroy(() => {
+            this.#element.removeEventListener("transitionend", onTransitionEnd);
+            this.#clearFallback();
+        });
+        afterNextRender(() => {
+            this.#settle();
+            this.#initialized.set(true);
+        });
+        effect(() => {
+            const expanded = this.collapsible.expanded();
+            untracked(() => {
+                if (!this.#initialized()) {
+                    return;
+                }
+                this.#animateTo(expanded);
+            });
+        });
+    }
+    /** Runs the height transition towards the requested state. */
+    #animateTo(expanded) {
+        this.#clearFallback();
+        if (!this.collapsible.animate() || this.#reducedMotion()) {
+            this.#settle();
+            return;
+        }
+        const element = this.#element;
+        const contentHeight = element.scrollHeight;
+        element.style.setProperty(CONTENT_HEIGHT_VARIABLE, `${contentHeight}px`);
+        this.#clip();
+        this.#setTransitionEnabled(true);
+        if (expanded) {
+            element.style.height = "0px";
+            void element.offsetHeight; // force a reflow so the browser has a start value to animate from
+            element.style.height = `${contentHeight}px`;
+        }
+        else {
+            element.style.height = `${element.offsetHeight}px`;
+            void element.offsetHeight;
+            element.style.height = "0px";
+        }
+        this.#scheduleFallback();
+    }
+    #clearFallback() {
+        if (this.#fallbackId !== null) {
+            clearTimeout(this.#fallbackId);
+            this.#fallbackId = null;
+        }
+    }
+    /**
+     * Clips the box so an explicit height is actually honoured. `min-height` matters because a flex item
+     * defaults to `min-height: auto`, which would otherwise hold the element open at its content height.
+     */
+    #clip() {
+        this.#element.style.overflow = "hidden";
+        this.#element.style.minHeight = "0px";
+    }
+    /** Reads the resolved transition duration in milliseconds, which comes from a theme custom property. */
+    #getTransitionDuration() {
+        const declared = getComputedStyle(this.#element).transitionDuration;
+        const durations = declared.split(",").map(part => {
+            const trimmed = part.trim();
+            const parsed = Number.parseFloat(trimmed);
+            if (!Number.isFinite(parsed)) {
+                return 0;
+            }
+            return trimmed.endsWith("ms") ? parsed : parsed * 1000;
+        });
+        return Math.max(0, ...durations);
+    }
+    /** Guards against a `transitionend` that never arrives, e.g. when an ancestor hides the element mid-flight. */
+    #scheduleFallback() {
+        this.#fallbackId = setTimeout(() => this.#settle(), this.#getTransitionDuration() + 50);
+    }
+    #setTransitionEnabled(enabled) {
+        const style = this.#element.style;
+        if (!enabled) {
+            style.transitionProperty = "";
+            style.transitionDuration = "";
+            style.transitionTimingFunction = "";
+            return;
+        }
+        style.transitionProperty = "height";
+        style.transitionDuration = `var(--mona-motion-standard, 300ms)`;
+        style.transitionTimingFunction = "ease-out";
+    }
+    /** Drops the transition and pins the element to the resting representation of the current state. */
+    #settle() {
+        this.#clearFallback();
+        this.#setTransitionEnabled(false);
+        const element = this.#element;
+        if (this.collapsible.expanded()) {
+            element.style.height = "";
+            element.style.overflow = "";
+            element.style.minHeight = "";
+        }
+        else {
+            element.style.height = "0px";
+            this.#clip();
+        }
+        element.style.setProperty(CONTENT_HEIGHT_VARIABLE, `${element.scrollHeight}px`);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CollapsibleContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: CollapsibleContentDirective, isStandalone: true, selector: "[monaCollapsibleContent]", host: { properties: { "attr.data-state": "state()", "attr.id": "collapsible.contentId", "attr.inert": "inert()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CollapsibleContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[monaCollapsibleContent]",
+                    host: {
+                        "[attr.data-state]": "state()",
+                        "[attr.id]": "collapsible.contentId",
+                        "[attr.inert]": "inert()"
+                    }
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * @description
+ * Toggles the closest `monaCollapsible`. Wires `aria-expanded` / `aria-controls` automatically and
+ * only adds `role`, `tabindex` and keyboard handling when the host element is not already interactive.
+ */
+class CollapsibleTriggerDirective {
+    constructor() {
+        this.#element = inject(ElementRef).nativeElement;
+        this.#nativeAnchor = this.#element.tagName === "A";
+        this.#nativeButton = this.#element.tagName === "BUTTON" || this.#element.tagName === "INPUT" || this.#element.tagName === "SUMMARY";
+        this.ariaDisabled = computed(() => (this.collapsible.disabled() ? "true" : null), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaDisabled" }] : /* istanbul ignore next */ []));
+        this.collapsible = inject(CollapsibleToken);
+        this.nativeDisabled = computed(() => this.#element.tagName === "BUTTON" && this.collapsible.disabled() ? "" : null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "nativeDisabled" }] : /* istanbul ignore next */ []));
+        this.role = this.#nativeButton || this.#nativeAnchor ? null : "button";
+        this.state = computed(() => (this.collapsible.expanded() ? "open" : "closed"), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+        this.tabIndex = computed(() => {
+            if (this.#nativeButton || this.#nativeAnchor) {
+                return null;
+            }
+            return this.collapsible.disabled() ? -1 : 0;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tabIndex" }] : /* istanbul ignore next */ []));
+        this.type = this.#element.tagName === "BUTTON" ? "button" : null;
+    }
+    #element;
+    #nativeAnchor;
+    #nativeButton;
+    onClick() {
+        this.collapsible.toggle();
+    }
+    onEnterKeydown(event) {
+        // Buttons and anchors already synthesise a click for Enter.
+        if (this.#nativeButton || this.#nativeAnchor) {
+            return;
+        }
+        event.preventDefault();
+        this.collapsible.toggle();
+    }
+    onSpaceKeydown(event) {
+        // Buttons already synthesise a click for Space; anchors scroll the page instead.
+        if (this.#nativeButton) {
+            return;
+        }
+        event.preventDefault();
+        this.collapsible.toggle();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CollapsibleTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: CollapsibleTriggerDirective, isStandalone: true, selector: "[monaCollapsibleTrigger]", host: { listeners: { "click": "onClick()", "keydown.enter": "onEnterKeydown($event)", "keydown.space": "onSpaceKeydown($event)" }, properties: { "attr.aria-controls": "collapsible.contentId", "attr.aria-disabled": "ariaDisabled()", "attr.aria-expanded": "collapsible.expanded()", "attr.data-state": "state()", "attr.disabled": "nativeDisabled()", "attr.role": "role", "attr.tabindex": "tabIndex()", "attr.type": "type" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CollapsibleTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[monaCollapsibleTrigger]",
+                    host: {
+                        "[attr.aria-controls]": "collapsible.contentId",
+                        "[attr.aria-disabled]": "ariaDisabled()",
+                        "[attr.aria-expanded]": "collapsible.expanded()",
+                        "[attr.data-state]": "state()",
+                        "[attr.disabled]": "nativeDisabled()",
+                        "[attr.role]": "role",
+                        "[attr.tabindex]": "tabIndex()",
+                        "[attr.type]": "type",
+                        "(click)": "onClick()",
+                        "(keydown.enter)": "onEnterKeydown($event)",
+                        "(keydown.space)": "onSpaceKeydown($event)"
+                    }
+                }]
+        }] });
+
+/*
+ * Public API Surface of @nanahoshi/mona-ui/collapsible
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CollapsibleContentDirective, CollapsibleDirective, CollapsibleToken, CollapsibleTriggerDirective };
+//# sourceMappingURL=nanahoshi-mona-ui-collapsible.mjs.map

package/fesm2022/nanahoshi-mona-ui-contextmenu.mjs

@@ -269,7 +269,7 @@ class ContextMenuComponent {
         targetElement.setAttribute("aria-expanded", this.#isMenuOpen().toString());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ContextMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: ContextMenuComponent, isStandalone: true, selector: "mona-contextmenu", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: true, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { menuClick: "menuClick" }, queries: [{ propertyName: "menuItemComponents", predicate: PopupMenuToken, isSignal: true }, { propertyName: "groupTemplate", first: true, predicate: ContextMenuGroupTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "iconTemplate", first: true, predicate: ContextMenuIconTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "shortcutTemplate", first: true, predicate: ContextMenuShortcutTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "textTemplate", first: true, predicate: ContextMenuTextTemplateDirective, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "popupMenuRef", first: true, predicate: ["popupMenu"], descendants: true, isSignal: true }], ngImport: i0, template: "<mona-popup-menu\n    [target]=\"target()\"\n    [trigger]=\"'contextmenu'\"\n    [items]=\"menuItems()\"\n    [minWidth]=\"minWidth()\"\n    [width]=\"width()\"\n    [rounded]=\"rounded()\"\n    [size]=\"size()\"\n    [precise]=\"true\"\n    (menuClick)=\"menuClick.emit($event)\"\n    (open)=\"onMenuOpen()\"\n    (close)=\"onMenuClose()\"\n    [id]=\"menuId\"\n    #popupMenu>\n    @if (groupTemplate()) {\n        <ng-template monaPopupMenuGroupTemplate let-group>\n            <ng-container\n                [ngTemplateOutlet]=\"groupTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: group }\"></ng-container>\n        </ng-template>\n    }\n    @if (iconTemplate()) {\n        <ng-template monaPopupMenuIconTemplate let-item>\n            <ng-container\n                [ngTemplateOutlet]=\"iconTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n        </ng-template>\n    }\n    @if (shortcutTemplate()) {\n        <ng-template monaPopupMenuShortcutTemplate let-item>\n            <ng-container\n                [ngTemplateOutlet]=\"shortcutTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n        </ng-template>\n    }\n    @if (textTemplate()) {\n        <ng-template monaPopupMenuTextTemplate let-item>\n            <ng-container\n                [ngTemplateOutlet]=\"textTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n        </ng-template>\n    }\n</mona-popup-menu>\n", dependencies: [{ kind: "component", type: PopupMenuComponent, selector: "mona-popup-menu", inputs: ["anchor", "anchorConnectionPoint", "items", "id", "minWidth", "offset", "popupConnectionPoint", "precise", "rounded", "size", "target", "trigger", "width"], outputs: ["close", "menuClick", "navigate", "open"] }, { kind: "directive", type: PopupMenuTextTemplateDirective, selector: "ng-template[monaPopupMenuTextTemplate]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: PopupMenuIconTemplateDirective, selector: "ng-template[monaPopupMenuIconTemplate]" }, { kind: "directive", type: PopupMenuShortcutTemplateDirective, selector: "ng-template[monaPopupMenuShortcutTemplate]" }, { kind: "directive", type: PopupMenuGroupTemplateDirective, selector: "ng-template[monaPopupMenuGroupTemplate]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: ContextMenuComponent, isStandalone: true, selector: "mona-contextmenu", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: true, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { menuClick: "menuClick" }, queries: [{ propertyName: "menuItemComponents", predicate: PopupMenuToken, isSignal: true }, { propertyName: "groupTemplate", first: true, predicate: ContextMenuGroupTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "iconTemplate", first: true, predicate: ContextMenuIconTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "shortcutTemplate", first: true, predicate: ContextMenuShortcutTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "textTemplate", first: true, predicate: ContextMenuTextTemplateDirective, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "popupMenuRef", first: true, predicate: ["popupMenu"], descendants: true, isSignal: true }], ngImport: i0, template: "<mona-popup-menu\n    [target]=\"target()\"\n    [trigger]=\"'contextmenu'\"\n    [items]=\"menuItems()\"\n    [minWidth]=\"minWidth()\"\n    [width]=\"width()\"\n    [rounded]=\"rounded()\"\n    [size]=\"size()\"\n    [precise]=\"true\"\n    (menuClick)=\"menuClick.emit($event)\"\n    (open)=\"onMenuOpen()\"\n    (close)=\"onMenuClose()\"\n    [id]=\"menuId\"\n    #popupMenu>\n    @if (groupTemplate()) {\n        <ng-template monaPopupMenuGroupTemplate let-group>\n            <ng-container\n                [ngTemplateOutlet]=\"groupTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: group }\"></ng-container>\n        </ng-template>\n    }\n    @if (iconTemplate()) {\n        <ng-template monaPopupMenuIconTemplate let-item>\n            <ng-container\n                [ngTemplateOutlet]=\"iconTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n        </ng-template>\n    }\n    @if (shortcutTemplate()) {\n        <ng-template monaPopupMenuShortcutTemplate let-item>\n            <ng-container\n                [ngTemplateOutlet]=\"shortcutTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n        </ng-template>\n    }\n    @if (textTemplate()) {\n        <ng-template monaPopupMenuTextTemplate let-item>\n            <ng-container\n                [ngTemplateOutlet]=\"textTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n        </ng-template>\n    }\n</mona-popup-menu>\n", dependencies: [{ kind: "component", type: PopupMenuComponent, selector: "mona-popup-menu", inputs: ["anchor", "anchorConnectionPoint", "items", "id", "minWidth", "offset", "popupConnectionPoint", "precise", "rounded", "size", "target", "trigger", "width", "class"], outputs: ["close", "menuClick", "navigate", "open"] }, { kind: "directive", type: PopupMenuTextTemplateDirective, selector: "ng-template[monaPopupMenuTextTemplate]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: PopupMenuIconTemplateDirective, selector: "ng-template[monaPopupMenuIconTemplate]" }, { kind: "directive", type: PopupMenuShortcutTemplateDirective, selector: "ng-template[monaPopupMenuShortcutTemplate]" }, { kind: "directive", type: PopupMenuGroupTemplateDirective, selector: "ng-template[monaPopupMenuGroupTemplate]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ContextMenuComponent, decorators: [{
             type: Component,

package/fesm2022/nanahoshi-mona-ui-dropdown-button.mjs

@@ -271,7 +271,7 @@ class DropdownButtonComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DropdownButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: DropdownButtonComponent, isStandalone: true, selector: "mona-dropdown-button", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { menuItemClick: "menuItemClick" }, host: { properties: { "class": "userClass()" } }, queries: [{ propertyName: "menuItemComponents", predicate: PopupMenuToken, isSignal: true }, { propertyName: "groupTemplate", first: true, predicate: DropdownButtonMenuGroupTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "menuItemIconTemplate", first: true, predicate: DropdownButtonMenuItemIconTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "menuItemShortcutTemplate", first: true, predicate: DropdownButtonMenuItemShortcutTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "menuItemTextTemplate", first: true, predicate: DropdownButtonMenuItemTextTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "textTemplate", first: true, predicate: DropdownButtonTextTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "buttonRef", first: true, predicate: ["dropdownButton"], descendants: true, isSignal: true }, { propertyName: "popupMenuRef", first: true, predicate: ["popupMenu"], descendants: true, isSignal: true }], ngImport: i0, template: "<button\n    monaButton\n    [look]=\"look()\"\n    [size]=\"size()\"\n    [iconOnly]=\"iconOnly()\"\n    [loading]=\"loading()\"\n    [rounded]=\"rounded()\"\n    [disabled]=\"disabled()\"\n    [attr.aria-label]=\"ariaLabelledby() ? null : dropdownButtonAriaLabel() || null\"\n    [attr.aria-labelledby]=\"ariaLabelledby() || null\"\n    [attr.aria-haspopup]=\"'menu'\"\n    [attr.aria-expanded]=\"isMenuOpen()\"\n    [attr.aria-controls]=\"menuId\"\n    #dropdownButton>\n    @if (textTemplate()) {\n        <ng-container\n            [ngTemplateOutlet]=\"textTemplate()\"\n            [ngTemplateOutletContext]=\"{ $implicit: text() }\"></ng-container>\n    } @else {\n        {{ text() }}\n    }\n</button>\n\n<mona-popup-menu\n    #popupMenu\n    (close)=\"onMenuClose()\"\n    (menuClick)=\"onMenuItemClick($event)\"\n    (open)=\"onMenuOpen()\"\n    [anchorConnectionPoint]=\"'bottomcenter'\"\n    [id]=\"menuId\"\n    [items]=\"menuItems()\"\n    [offset]=\"{ horizontal: 0, vertical: 2 }\"\n    [popupConnectionPoint]=\"'topcenter'\"\n    [size]=\"size()\"\n    [target]=\"dropdownButton\"\n    [trigger]=\"'click'\">\n    @if (groupTemplate()) {\n        <ng-template monaPopupMenuGroupTemplate let-group>\n            <ng-container\n                [ngTemplateOutlet]=\"groupTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: group }\"></ng-container>\n        </ng-template>\n    }\n    @if (menuItemIconTemplate()) {\n        <ng-template monaPopupMenuIconTemplate let-item>\n            <ng-container\n                [ngTemplateOutlet]=\"menuItemIconTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n        </ng-template>\n    }\n    @if (menuItemShortcutTemplate()) {\n        <ng-template monaPopupMenuShortcutTemplate let-item>\n            <ng-container\n                [ngTemplateOutlet]=\"menuItemShortcutTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n        </ng-template>\n    }\n    @if (menuItemTextTemplate()) {\n        <ng-template monaPopupMenuTextTemplate let-item>\n            <ng-container\n                [ngTemplateOutlet]=\"menuItemTextTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n        </ng-template>\n    }\n</mona-popup-menu>\n", dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "component", type: PopupMenuComponent, selector: "mona-popup-menu", inputs: ["anchor", "anchorConnectionPoint", "items", "id", "minWidth", "offset", "popupConnectionPoint", "precise", "rounded", "size", "target", "trigger", "width"], outputs: ["close", "menuClick", "navigate", "open"] }, { kind: "directive", type: PopupMenuGroupTemplateDirective, selector: "ng-template[monaPopupMenuGroupTemplate]" }, { kind: "directive", type: PopupMenuIconTemplateDirective, selector: "ng-template[monaPopupMenuIconTemplate]" }, { kind: "directive", type: PopupMenuShortcutTemplateDirective, selector: "ng-template[monaPopupMenuShortcutTemplate]" }, { kind: "directive", type: PopupMenuTextTemplateDirective, selector: "ng-template[monaPopupMenuTextTemplate]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: DropdownButtonComponent, isStandalone: true, selector: "mona-dropdown-button", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { menuItemClick: "menuItemClick" }, host: { properties: { "class": "userClass()" } }, queries: [{ propertyName: "menuItemComponents", predicate: PopupMenuToken, isSignal: true }, { propertyName: "groupTemplate", first: true, predicate: DropdownButtonMenuGroupTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "menuItemIconTemplate", first: true, predicate: DropdownButtonMenuItemIconTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "menuItemShortcutTemplate", first: true, predicate: DropdownButtonMenuItemShortcutTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "menuItemTextTemplate", first: true, predicate: DropdownButtonMenuItemTextTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "textTemplate", first: true, predicate: DropdownButtonTextTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "buttonRef", first: true, predicate: ["dropdownButton"], descendants: true, isSignal: true }, { propertyName: "popupMenuRef", first: true, predicate: ["popupMenu"], descendants: true, isSignal: true }], ngImport: i0, template: "<button\n    monaButton\n    [look]=\"look()\"\n    [size]=\"size()\"\n    [iconOnly]=\"iconOnly()\"\n    [loading]=\"loading()\"\n    [rounded]=\"rounded()\"\n    [disabled]=\"disabled()\"\n    [attr.aria-label]=\"ariaLabelledby() ? null : dropdownButtonAriaLabel() || null\"\n    [attr.aria-labelledby]=\"ariaLabelledby() || null\"\n    [attr.aria-haspopup]=\"'menu'\"\n    [attr.aria-expanded]=\"isMenuOpen()\"\n    [attr.aria-controls]=\"menuId\"\n    #dropdownButton>\n    @if (textTemplate()) {\n        <ng-container\n            [ngTemplateOutlet]=\"textTemplate()\"\n            [ngTemplateOutletContext]=\"{ $implicit: text() }\"></ng-container>\n    } @else {\n        {{ text() }}\n    }\n</button>\n\n<mona-popup-menu\n    #popupMenu\n    (close)=\"onMenuClose()\"\n    (menuClick)=\"onMenuItemClick($event)\"\n    (open)=\"onMenuOpen()\"\n    [anchorConnectionPoint]=\"'bottomcenter'\"\n    [id]=\"menuId\"\n    [items]=\"menuItems()\"\n    [offset]=\"{ horizontal: 0, vertical: 2 }\"\n    [popupConnectionPoint]=\"'topcenter'\"\n    [size]=\"size()\"\n    [target]=\"dropdownButton\"\n    [trigger]=\"'click'\">\n    @if (groupTemplate()) {\n        <ng-template monaPopupMenuGroupTemplate let-group>\n            <ng-container\n                [ngTemplateOutlet]=\"groupTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: group }\"></ng-container>\n        </ng-template>\n    }\n    @if (menuItemIconTemplate()) {\n        <ng-template monaPopupMenuIconTemplate let-item>\n            <ng-container\n                [ngTemplateOutlet]=\"menuItemIconTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n        </ng-template>\n    }\n    @if (menuItemShortcutTemplate()) {\n        <ng-template monaPopupMenuShortcutTemplate let-item>\n            <ng-container\n                [ngTemplateOutlet]=\"menuItemShortcutTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n        </ng-template>\n    }\n    @if (menuItemTextTemplate()) {\n        <ng-template monaPopupMenuTextTemplate let-item>\n            <ng-container\n                [ngTemplateOutlet]=\"menuItemTextTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n        </ng-template>\n    }\n</mona-popup-menu>\n", dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "component", type: PopupMenuComponent, selector: "mona-popup-menu", inputs: ["anchor", "anchorConnectionPoint", "items", "id", "minWidth", "offset", "popupConnectionPoint", "precise", "rounded", "size", "target", "trigger", "width", "class"], outputs: ["close", "menuClick", "navigate", "open"] }, { kind: "directive", type: PopupMenuGroupTemplateDirective, selector: "ng-template[monaPopupMenuGroupTemplate]" }, { kind: "directive", type: PopupMenuIconTemplateDirective, selector: "ng-template[monaPopupMenuIconTemplate]" }, { kind: "directive", type: PopupMenuShortcutTemplateDirective, selector: "ng-template[monaPopupMenuShortcutTemplate]" }, { kind: "directive", type: PopupMenuTextTemplateDirective, selector: "ng-template[monaPopupMenuTextTemplate]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DropdownButtonComponent, decorators: [{
             type: Component,

package/fesm2022/nanahoshi-mona-ui-expansion-panel.mjs

@@ -1,7 +1,8 @@
 import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Directive, contentChildren, TemplateRef, computed, contentChild, input, model, Component } from '@angular/core';
+import { Directive, contentChildren, TemplateRef, computed, contentChild, input, model, forwardRef, Component } from '@angular/core';
 import { LucideMinus, LucidePlus } from '@lucide/angular';
+import { CollapsibleTriggerDirective, CollapsibleToken } from '@nanahoshi/mona-ui/collapsible';
 import { createElementControlId } from '@nanahoshi/mona-ui/internal';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
@@ -55,7 +56,7 @@ const expansionPanelBaseThemeVariants = cva(`
 });
 const expansionPanelHeaderThemeVariants = cva(`
         relative flex w-full items-center justify-between
-        px-2 py-1
+        px-2 py-2
         cursor-pointer
         select-none
         font-medium text-foreground
@@ -76,9 +77,7 @@ const expansionPanelHeaderThemeVariants = cva(`
         }
     }
 });
-const expansionPanelHeaderTitleThemeVariants = cva(`
-        p-1 flex-1
-    `);
+const expansionPanelHeaderTitleThemeVariants = cva(`flex-1`);
 const expansionPanelIconContainerThemeVariants = cva(``, {
     variants: {
         hasTemplate: {
@@ -115,7 +114,6 @@ class ExpansionPanelComponent {
             return expansionPanelContentThemeVariants({ expanded });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "contentClass" }] : /* istanbul ignore next */ []));
-        this.contentId = createElementControlId();
         this.headerClass = computed(() => {
             const collapsed = !this.expanded();
             const disabled = this.disabled();
@@ -133,6 +131,13 @@ class ExpansionPanelComponent {
         ...(ngDevMode ? [{ debugName: "iconContainerClass" }] : /* istanbul ignore next */ []));
         this.iconTemplate = contentChild(ExpansionPanelIconTemplateDirective, { ...(ngDevMode ? { debugName: "iconTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
         this.titleTemplate = contentChild(ExpansionPanelTitleTemplateDirective, { ...(ngDevMode ? { debugName: "titleTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        /**
+         * @description Always enabled. Satisfies the `CollapsibleConfig` contract for `monaCollapsibleTrigger`;
+         * this component doesn't use `monaCollapsibleContent`, so no animation ever consults it.
+         */
+        this.animate = computed(() => true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "animate" }] : /* istanbul ignore next */ []));
+        this.contentId = createElementControlId();
         /**
          * @description Disables header interaction, suppressing click and keyboard toggling.
          * @default false
@@ -164,6 +169,12 @@ class ExpansionPanelComponent {
         this.userClass = input("", /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "userClass" }] : /* istanbul ignore next */ []));
     }
+    collapse() {
+        this.expanded.set(false);
+    }
+    expand() {
+        this.expanded.set(true);
+    }
     toggle() {
         if (this.disabled()) {
             return;
@@ -171,13 +182,13 @@ class ExpansionPanelComponent {
         this.expanded.update(expanded => !expanded);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ExpansionPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: ExpansionPanelComponent, isStandalone: true, selector: "mona-expansion-panel", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "userClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange" }, host: { properties: { "class": "baseClass()" } }, queries: [{ propertyName: "actionsTemplateList", predicate: ExpansionPanelActionsTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "iconTemplate", first: true, predicate: ExpansionPanelIconTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "titleTemplate", first: true, predicate: ExpansionPanelTitleTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "<div\n    [class]=\"headerClass()\"\n    role=\"button\"\n    [attr.tabindex]=\"disabled() ? -1 : 0\"\n    [attr.aria-expanded]=\"expanded()\"\n    [attr.aria-controls]=\"contentId\"\n    [attr.aria-disabled]=\"disabled() ? 'true' : undefined\"\n    (click)=\"toggle()\"\n    (keydown.enter)=\"$event.preventDefault(); toggle()\"\n    (keydown.space)=\"$event.preventDefault(); toggle()\">\n    <div [class]=\"headerTitleClass()\">\n        @if (titleTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"titleTemplate()\"></ng-container>\n        } @else {\n            {{ title() }}\n        }\n    </div>\n    <div>\n        @for (action of actionsTemplateList(); track $index) {\n            <ng-container [ngTemplateOutlet]=\"action\"></ng-container>\n        }\n    </div>\n    <div [class]=\"iconContainerClass()\">\n        @if (iconTemplate()) {\n            <ng-container\n                [ngTemplateOutlet]=\"iconTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: expanded() }\"></ng-container>\n        } @else {\n            @if (expanded()) {\n                <svg lucideMinus [size]=\"14\"></svg>\n            } @else {\n                <svg lucidePlus [size]=\"14\"></svg>\n            }\n        }\n    </div>\n</div>\n<div\n    [id]=\"contentId\"\n    [class]=\"contentClass()\"\n    [attr.aria-hidden]=\"!expanded()\"\n    [attr.inert]=\"!expanded() ? true : undefined\">\n    <div>\n        <ng-content></ng-content>\n    </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LucideMinus, selector: "svg[lucideMinus]" }, { kind: "component", type: LucidePlus, selector: "svg[lucidePlus]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: ExpansionPanelComponent, isStandalone: true, selector: "mona-expansion-panel", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "userClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange" }, host: { properties: { "class": "baseClass()" } }, providers: [{ provide: CollapsibleToken, useExisting: forwardRef(() => ExpansionPanelComponent) }], queries: [{ propertyName: "actionsTemplateList", predicate: ExpansionPanelActionsTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "iconTemplate", first: true, predicate: ExpansionPanelIconTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "titleTemplate", first: true, predicate: ExpansionPanelTitleTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "<div monaCollapsibleTrigger [class]=\"headerClass()\">\n    <div [class]=\"headerTitleClass()\">\n        @if (titleTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"titleTemplate()\"></ng-container>\n        } @else {\n            {{ title() }}\n        }\n    </div>\n    <div>\n        @for (action of actionsTemplateList(); track $index) {\n            <ng-container [ngTemplateOutlet]=\"action\"></ng-container>\n        }\n    </div>\n    <div [class]=\"iconContainerClass()\">\n        @if (iconTemplate()) {\n            <ng-container\n                [ngTemplateOutlet]=\"iconTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: expanded() }\"></ng-container>\n        } @else {\n            @if (expanded()) {\n                <svg lucideMinus [size]=\"14\"></svg>\n            } @else {\n                <svg lucidePlus [size]=\"14\"></svg>\n            }\n        }\n    </div>\n</div>\n<div\n    [id]=\"contentId\"\n    [class]=\"contentClass()\"\n    [attr.aria-hidden]=\"!expanded()\"\n    [attr.inert]=\"!expanded() ? true : undefined\">\n    <div>\n        <ng-content></ng-content>\n    </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LucideMinus, selector: "svg[lucideMinus]" }, { kind: "component", type: LucidePlus, selector: "svg[lucidePlus]" }, { kind: "directive", type: CollapsibleTriggerDirective, selector: "[monaCollapsibleTrigger]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ExpansionPanelComponent, decorators: [{
             type: Component,
-            args: [{ selector: "mona-expansion-panel", imports: [NgTemplateOutlet, LucideMinus, LucidePlus], host: {
+            args: [{ selector: "mona-expansion-panel", imports: [NgTemplateOutlet, LucideMinus, LucidePlus, CollapsibleTriggerDirective], host: {
                         "[class]": "baseClass()"
-                    }, template: "<div\n    [class]=\"headerClass()\"\n    role=\"button\"\n    [attr.tabindex]=\"disabled() ? -1 : 0\"\n    [attr.aria-expanded]=\"expanded()\"\n    [attr.aria-controls]=\"contentId\"\n    [attr.aria-disabled]=\"disabled() ? 'true' : undefined\"\n    (click)=\"toggle()\"\n    (keydown.enter)=\"$event.preventDefault(); toggle()\"\n    (keydown.space)=\"$event.preventDefault(); toggle()\">\n    <div [class]=\"headerTitleClass()\">\n        @if (titleTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"titleTemplate()\"></ng-container>\n        } @else {\n            {{ title() }}\n        }\n    </div>\n    <div>\n        @for (action of actionsTemplateList(); track $index) {\n            <ng-container [ngTemplateOutlet]=\"action\"></ng-container>\n        }\n    </div>\n    <div [class]=\"iconContainerClass()\">\n        @if (iconTemplate()) {\n            <ng-container\n                [ngTemplateOutlet]=\"iconTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: expanded() }\"></ng-container>\n        } @else {\n            @if (expanded()) {\n                <svg lucideMinus [size]=\"14\"></svg>\n            } @else {\n                <svg lucidePlus [size]=\"14\"></svg>\n            }\n        }\n    </div>\n</div>\n<div\n    [id]=\"contentId\"\n    [class]=\"contentClass()\"\n    [attr.aria-hidden]=\"!expanded()\"\n    [attr.inert]=\"!expanded() ? true : undefined\">\n    <div>\n        <ng-content></ng-content>\n    </div>\n</div>\n" }]
+                    }, providers: [{ provide: CollapsibleToken, useExisting: forwardRef(() => ExpansionPanelComponent) }], template: "<div monaCollapsibleTrigger [class]=\"headerClass()\">\n    <div [class]=\"headerTitleClass()\">\n        @if (titleTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"titleTemplate()\"></ng-container>\n        } @else {\n            {{ title() }}\n        }\n    </div>\n    <div>\n        @for (action of actionsTemplateList(); track $index) {\n            <ng-container [ngTemplateOutlet]=\"action\"></ng-container>\n        }\n    </div>\n    <div [class]=\"iconContainerClass()\">\n        @if (iconTemplate()) {\n            <ng-container\n                [ngTemplateOutlet]=\"iconTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: expanded() }\"></ng-container>\n        } @else {\n            @if (expanded()) {\n                <svg lucideMinus [size]=\"14\"></svg>\n            } @else {\n                <svg lucidePlus [size]=\"14\"></svg>\n            }\n        }\n    </div>\n</div>\n<div\n    [id]=\"contentId\"\n    [class]=\"contentClass()\"\n    [attr.aria-hidden]=\"!expanded()\"\n    [attr.inert]=\"!expanded() ? true : undefined\">\n    <div>\n        <ng-content></ng-content>\n    </div>\n</div>\n" }]
         }], propDecorators: { actionsTemplateList: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => ExpansionPanelActionsTemplateDirective), { ...{
                             read: TemplateRef
                         }, isSignal: true }] }], iconTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ExpansionPanelIconTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], titleTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ExpansionPanelTitleTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "userClass", required: false }] }] } });

package/fesm2022/{nanahoshi-mona-ui-grid-grid-footer-cell.component-B6FBLtrr.mjs → nanahoshi-mona-ui-grid-grid-footer-cell.component-D-JCCvYJ.mjs}

@@ -2,7 +2,7 @@ import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
 import { inject, computed, input, ChangeDetectionStrategy, Component } from '@angular/core';
 import { ImmutableDictionary } from '@mirei/ts-collections';
-import { c as GridService } from './nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-BRZUd8cE.mjs';
+import { c as GridService } from './nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-A6Cq2a4Q.mjs';
 
 class GridFooterCellComponent {
     constructor() {
@@ -102,4 +102,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
         }], propDecorators: { column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }], columnIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnIndex", required: true }] }], groupKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupKey", required: false }] }] } });
 
 export { GridFooterCellComponent };
-//# sourceMappingURL=nanahoshi-mona-ui-grid-grid-footer-cell.component-B6FBLtrr.mjs.map
+//# sourceMappingURL=nanahoshi-mona-ui-grid-grid-footer-cell.component-D-JCCvYJ.mjs.map

package/fesm2022/{nanahoshi-mona-ui-grid-grid-footer-table-cell.directive-OJe4UYuw.mjs → nanahoshi-mona-ui-grid-grid-footer-table-cell.directive-7zwgl7u1.mjs}

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { computed, input, Directive } from '@angular/core';
-import { v as gridFooterTableCellThemeVariants } from './nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-BRZUd8cE.mjs';
+import { v as gridFooterTableCellThemeVariants } from './nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-A6Cq2a4Q.mjs';
 
 class GridFooterTableCellDirective {
     constructor() {
@@ -35,4 +35,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
         }], propDecorators: { footerCellMinWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerCellMinWidth", required: false }] }], footerCellWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerCellWidth", required: false }] }], footerColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerColumn", required: false }] }] } });
 
 export { GridFooterTableCellDirective };
-//# sourceMappingURL=nanahoshi-mona-ui-grid-grid-footer-table-cell.directive-OJe4UYuw.mjs.map
+//# sourceMappingURL=nanahoshi-mona-ui-grid-grid-footer-table-cell.directive-7zwgl7u1.mjs.map

package/fesm2022/{nanahoshi-mona-ui-grid-grid-list.component-DCd8K6ng.mjs → nanahoshi-mona-ui-grid-grid-list.component-n3eQNIza.mjs}

@@ -6,10 +6,10 @@ import { ImmutableList, ImmutableSet, span } from '@mirei/ts-collections';
 import { SlicePipe } from '@nanahoshi/mona-ui/common';
 import { ContextMenuComponent } from '@nanahoshi/mona-ui/contextmenu';
 import { fromEvent } from 'rxjs';
-import { G as GridAddRowComponent, a as GridCellComponent, b as GridRowDirective, c as GridCellDirective, d as GridDetailRowDirective, e as GridDetailIndentCellDirective, f as GridDetailContentCellDirective, g as GridToggleComponent } from './nanahoshi-mona-ui-grid-grid-toggle.component-Dl8Hlkhj.mjs';
-import { GridFooterTableCellDirective } from './nanahoshi-mona-ui-grid-grid-footer-table-cell.directive-OJe4UYuw.mjs';
-import { G as GridNavigationService, a as GridRowFlattenerService, g as gridListBaseThemeVariants, b as gridFooterTableRowThemeVariants, c as GridService, d as gridGroupRowThemeVariants, e as gridListTableThemeVariants, f as GridLogicalCellDirective, h as GridLockedCellDirective } from './nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-BRZUd8cE.mjs';
-import { GridFooterCellComponent } from './nanahoshi-mona-ui-grid-grid-footer-cell.component-B6FBLtrr.mjs';
+import { G as GridAddRowComponent, a as GridCellComponent, b as GridRowDirective, c as GridCellDirective, d as GridDetailRowDirective, e as GridDetailIndentCellDirective, f as GridDetailContentCellDirective, g as GridToggleComponent } from './nanahoshi-mona-ui-grid-grid-toggle.component-BhS7c7rW.mjs';
+import { GridFooterTableCellDirective } from './nanahoshi-mona-ui-grid-grid-footer-table-cell.directive-7zwgl7u1.mjs';
+import { G as GridNavigationService, a as GridRowFlattenerService, g as gridListBaseThemeVariants, b as gridFooterTableRowThemeVariants, c as GridService, d as gridGroupRowThemeVariants, e as gridListTableThemeVariants, f as GridLogicalCellDirective, h as GridLockedCellDirective } from './nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-A6Cq2a4Q.mjs';
+import { GridFooterCellComponent } from './nanahoshi-mona-ui-grid-grid-footer-cell.component-D-JCCvYJ.mjs';
 
 class GridListComponent {
     #destroyRef;
@@ -118,4 +118,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
         }], ctorParameters: () => [], propDecorators: { bodyTableElementRef: [{ type: i0.ViewChild, args: ["bodyTable", { isSignal: true }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }] } });
 
 export { GridListComponent };
-//# sourceMappingURL=nanahoshi-mona-ui-grid-grid-list.component-DCd8K6ng.mjs.map
+//# sourceMappingURL=nanahoshi-mona-ui-grid-grid-list.component-n3eQNIza.mjs.map

package/fesm2022/{nanahoshi-mona-ui-grid-grid-toggle.component-Dl8Hlkhj.mjs → nanahoshi-mona-ui-grid-grid-toggle.component-BhS7c7rW.mjs}

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { computed, input, Directive, inject, Component, signal, ElementRef, viewChild, output, effect, untracked, afterNextRender, ChangeDetectionStrategy, LOCALE_ID, model } from '@angular/core';
-import { k as gridListTableCellThemeVariants, l as gridDetailContentCellThemeVariants, m as gridDetailIndentCellThemeVariants, n as gridDetailRowThemeVariants, c as GridService, o as gridListTableRowThemeVariants, p as gridCellEditorBaseThemeVariants, q as gridCellEditorInputThemeVariants, h as GridLockedCellDirective, f as GridLogicalCellDirective, r as gridCellBaseThemeVariants, s as gridCellContainerThemeVariants, t as gridCellDirtyIndicatorThemeVariants, u as gridCellTextThemeVariants } from './nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-BRZUd8cE.mjs';
+import { k as gridListTableCellThemeVariants, l as gridDetailContentCellThemeVariants, m as gridDetailIndentCellThemeVariants, n as gridDetailRowThemeVariants, c as GridService, o as gridListTableRowThemeVariants, p as gridCellEditorBaseThemeVariants, q as gridCellEditorInputThemeVariants, h as GridLockedCellDirective, f as GridLogicalCellDirective, r as gridCellBaseThemeVariants, s as gridCellContainerThemeVariants, t as gridCellDirtyIndicatorThemeVariants, u as gridCellTextThemeVariants } from './nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-A6Cq2a4Q.mjs';
 import { ImmutableList } from '@mirei/ts-collections';
 import * as i1 from '@angular/cdk/a11y';
 import { A11yModule } from '@angular/cdk/a11y';
@@ -741,4 +741,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
         }], propDecorators: { expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: true }] }, { type: i0.Output, args: ["expandedChange"] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: true }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: true }] }] } });
 
 export { GridAddRowComponent as G, GridCellComponent as a, GridRowDirective as b, GridCellDirective as c, GridDetailRowDirective as d, GridDetailIndentCellDirective as e, GridDetailContentCellDirective as f, GridToggleComponent as g };
-//# sourceMappingURL=nanahoshi-mona-ui-grid-grid-toggle.component-Dl8Hlkhj.mjs.map
+//# sourceMappingURL=nanahoshi-mona-ui-grid-grid-toggle.component-BhS7c7rW.mjs.map

package/fesm2022/{nanahoshi-mona-ui-grid-grid-virtual-list.component-C5FRZlvv.mjs → nanahoshi-mona-ui-grid-grid-virtual-list.component-B4VB3xFw.mjs}

@@ -8,10 +8,10 @@ import { SlicePipe } from '@nanahoshi/mona-ui/common';
 import { ContextMenuComponent } from '@nanahoshi/mona-ui/contextmenu';
 import { rxTimeout } from '@nanahoshi/mona-ui/internal';
 import { fromEvent } from 'rxjs';
-import { G as GridAddRowComponent, a as GridCellComponent, b as GridRowDirective, c as GridCellDirective, d as GridDetailRowDirective, e as GridDetailIndentCellDirective, f as GridDetailContentCellDirective, g as GridToggleComponent } from './nanahoshi-mona-ui-grid-grid-toggle.component-Dl8Hlkhj.mjs';
-import { GridFooterTableCellDirective } from './nanahoshi-mona-ui-grid-grid-footer-table-cell.directive-OJe4UYuw.mjs';
-import { G as GridNavigationService, c as GridService, a as GridRowFlattenerService, g as gridListBaseThemeVariants, i as gridFooterThemeVariants, j as gridFooterTableThemeVariants, b as gridFooterTableRowThemeVariants, d as gridGroupRowThemeVariants, e as gridListTableThemeVariants, f as GridLogicalCellDirective, h as GridLockedCellDirective } from './nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-BRZUd8cE.mjs';
-import { GridFooterCellComponent } from './nanahoshi-mona-ui-grid-grid-footer-cell.component-B6FBLtrr.mjs';
+import { G as GridAddRowComponent, a as GridCellComponent, b as GridRowDirective, c as GridCellDirective, d as GridDetailRowDirective, e as GridDetailIndentCellDirective, f as GridDetailContentCellDirective, g as GridToggleComponent } from './nanahoshi-mona-ui-grid-grid-toggle.component-BhS7c7rW.mjs';
+import { GridFooterTableCellDirective } from './nanahoshi-mona-ui-grid-grid-footer-table-cell.directive-7zwgl7u1.mjs';
+import { G as GridNavigationService, c as GridService, a as GridRowFlattenerService, g as gridListBaseThemeVariants, i as gridFooterThemeVariants, j as gridFooterTableThemeVariants, b as gridFooterTableRowThemeVariants, d as gridGroupRowThemeVariants, e as gridListTableThemeVariants, f as GridLogicalCellDirective, h as GridLockedCellDirective } from './nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-A6Cq2a4Q.mjs';
+import { GridFooterCellComponent } from './nanahoshi-mona-ui-grid-grid-footer-cell.component-D-JCCvYJ.mjs';
 
 class GridVirtualListComponent {
     #destroyRef;
@@ -228,4 +228,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
         }], ctorParameters: () => [], propDecorators: { addRowScrollElementRef: [{ type: i0.ViewChild, args: ["addRowScrollElement", { isSignal: true }] }], bodyTableElementRef: [{ type: i0.ViewChild, args: ["bodyTable", { isSignal: true }] }], footerScrollElementRef: [{ type: i0.ViewChild, args: ["footerScrollElement", { isSignal: true }] }], viewport: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkVirtualScrollViewport), { isSignal: true }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }] } });
 
 export { GridVirtualListComponent };
-//# sourceMappingURL=nanahoshi-mona-ui-grid-grid-virtual-list.component-C5FRZlvv.mjs.map
+//# sourceMappingURL=nanahoshi-mona-ui-grid-grid-virtual-list.component-B4VB3xFw.mjs.map