@nanahoshi/mona-ui 0.3.0 → 0.5.0

package/card/package.json

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

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-card.mjs

@@ -0,0 +1,307 @@
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, TemplateRef, Directive, signal, Service, computed, contentChild, input, Component, viewChild, afterRenderEffect, DestroyRef, contentChildren } from '@angular/core';
+import { classInputToClass } from '@nanahoshi/mona-ui/common';
+import { twMerge } from 'tailwind-merge';
+import { themeRaisedBackdropClasses, createElementControlId } from '@nanahoshi/mona-ui/internal';
+import { cva } from 'class-variance-authority';
+
+class CardContentDirective {
+    constructor() {
+        this.templateRef = inject(TemplateRef);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CardContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: CardContentDirective, isStandalone: true, selector: "[monaCardContent]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CardContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[monaCardContent]"
+                }]
+        }] });
+
+class CardService {
+    constructor() {
+        this.actionTemplate = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "actionTemplate" }] : /* istanbul ignore next */ []));
+        this.descriptionId = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "descriptionId" }] : /* istanbul ignore next */ []));
+        this.descriptionTemplate = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "descriptionTemplate" }] : /* istanbul ignore next */ []));
+        this.footerClass = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "footerClass" }] : /* istanbul ignore next */ []));
+        this.footerTemplate = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "footerTemplate" }] : /* istanbul ignore next */ []));
+        this.headerClass = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "headerClass" }] : /* istanbul ignore next */ []));
+        this.headerTemplate = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "headerTemplate" }] : /* istanbul ignore next */ []));
+        this.titleId = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "titleId" }] : /* istanbul ignore next */ []));
+        this.titleTemplate = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "titleTemplate" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CardService, deps: [], target: i0.ɵɵFactoryTarget.Service }); }
+    static { this.ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.0.6", ngImport: i0, type: CardService, autoProvided: false }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CardService, decorators: [{
+            type: Service,
+            args: [{ autoProvided: false }]
+        }] });
+
+const roundedTopVariants = {
+    small: "rounded-tl-sm rounded-tr-sm",
+    medium: "rounded-tl-md rounded-tr-md",
+    large: "rounded-tl-lg rounded-tr-lg",
+    xlarge: "rounded-tl-xl rounded-tr-xl",
+    xxlarge: "rounded-tl-2xl rounded-tr-2xl",
+    none: "rounded-none"
+};
+const roundedBottomVariants = {
+    small: "rounded-bl-sm rounded-br-sm",
+    medium: "rounded-bl-md rounded-br-md",
+    large: "rounded-bl-lg rounded-br-lg",
+    xlarge: "rounded-bl-xl rounded-br-xl",
+    xxlarge: "rounded-bl-2xl rounded-br-2xl",
+    none: "rounded-none"
+};
+const roundedAllVariants = {
+    small: "rounded-sm",
+    medium: "rounded-md",
+    large: "rounded-lg",
+    xlarge: "rounded-xl",
+    xxlarge: "rounded-2xl",
+    none: "rounded-none"
+};
+const cardBaseThemeVariants = cva(`
+        flex flex-col gap-2 py-4
+        ${themeRaisedBackdropClasses}
+        border border-border
+        bg-(--color-card) text-(--color-card-foreground)
+        shadow-(--shadow-raised)
+    `, {
+    variants: {
+        rounded: roundedAllVariants,
+        hasFooter: {
+            true: "pb-0",
+            false: ""
+        },
+        hasHeader: {
+            true: "pt-0",
+            false: ""
+        }
+    }
+});
+const cardFooterThemeVariants = cva(`
+        flex flex-row
+        justify-between
+        items-center
+        p-4
+        border-t
+        border-border
+    `, {
+    variants: {
+        rounded: roundedBottomVariants
+    }
+});
+const cardHeaderThemeVariants = cva(`
+        grid grid-cols-[1fr_auto] grid-rows-2
+        p-4 pb-0
+    `, {
+    variants: {
+        rounded: roundedTopVariants
+    }
+});
+const cardHeaderTitleThemeVariants = cva(`col-start-1 row-start-1 items-center`);
+const cardHeaderDescriptionThemeVariants = cva(`col-start-1 row-start-2`);
+const cardHeaderActionsThemeVariants = cva(`col-start-2 row-start-1 row-span-2 self-start justify-self-end`);
+
+class CardComponent {
+    constructor() {
+        this.#cardService = inject(CardService);
+        this.actionsCellClass = cardHeaderActionsThemeVariants();
+        this.actionTemplate = this.#cardService.actionTemplate.asReadonly();
+        this.baseClass = computed(() => {
+            const rounded = this.rounded();
+            const hasHeader = !!this.headerTemplate();
+            const hasFooter = !!this.footerTemplate();
+            const variantClass = cardBaseThemeVariants({ rounded, hasHeader, hasFooter });
+            const userClass = classInputToClass(this.userClass());
+            return twMerge(variantClass, userClass);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
+        this.contentDirective = contentChild(CardContentDirective, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "contentDirective" }] : /* istanbul ignore next */ []));
+        this.descriptionCellClass = cardHeaderDescriptionThemeVariants();
+        this.descriptionId = this.#cardService.descriptionId.asReadonly();
+        this.descriptionTemplate = this.#cardService.descriptionTemplate.asReadonly();
+        this.footerClass = computed(() => {
+            const rounded = this.rounded();
+            const variantClass = cardFooterThemeVariants({ rounded });
+            const userClass = classInputToClass(this.#cardService.footerClass());
+            return twMerge(variantClass, userClass);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "footerClass" }] : /* istanbul ignore next */ []));
+        this.footerTemplate = this.#cardService.footerTemplate.asReadonly();
+        this.headerClass = computed(() => {
+            const rounded = this.rounded();
+            const variantClass = cardHeaderThemeVariants({ rounded });
+            const userClass = classInputToClass(this.#cardService.headerClass());
+            return twMerge(variantClass, userClass);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "headerClass" }] : /* istanbul ignore next */ []));
+        this.headerTemplate = this.#cardService.headerTemplate.asReadonly();
+        this.titleCellClass = cardHeaderTitleThemeVariants();
+        this.titleId = this.#cardService.titleId.asReadonly();
+        this.titleTemplate = this.#cardService.titleTemplate.asReadonly();
+        /**
+         * @description Controls the border radius applied to the card and its header/footer regions.
+         * @default "medium"
+         */
+        this.rounded = input("medium", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Additional CSS classes merged onto the host element via `tailwind-merge`.
+         * @default ""
+         */
+        this.userClass = input("", { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: "class" });
+    }
+    #cardService;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: CardComponent, isStandalone: true, selector: "mona-card", inputs: { rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "baseClass()", "attr.aria-labelledby": "titleId()", "attr.aria-describedby": "descriptionId()" } }, providers: [CardService], queries: [{ propertyName: "contentDirective", first: true, predicate: CardContentDirective, descendants: true, isSignal: true }], ngImport: i0, template: "@if (headerTemplate()) {\n    <div [class]=\"headerClass()\">\n        @if (titleTemplate()) {\n            <div [class]=\"titleCellClass\">\n                <ng-container [ngTemplateOutlet]=\"titleTemplate()\" [ngTemplateOutletContext]=\"{ $implicit: titleId() }\" />\n            </div>\n        }\n        @if (descriptionTemplate()) {\n            <div [class]=\"descriptionCellClass\">\n                <ng-container\n                    [ngTemplateOutlet]=\"descriptionTemplate()\"\n                    [ngTemplateOutletContext]=\"{ $implicit: descriptionId() }\"\n                />\n            </div>\n        }\n        @if (actionTemplate().length > 0) {\n            <div [class]=\"actionsCellClass\" role=\"group\" aria-label=\"Card actions\">\n                @for (template of actionTemplate(); track template) {\n                    <ng-container [ngTemplateOutlet]=\"template\" />\n                }\n            </div>\n        }\n    </div>\n}\n<ng-container [ngTemplateOutlet]=\"contentDirective()?.templateRef ?? null\" />\n@if (footerTemplate()) {\n    <div [class]=\"footerClass()\">\n        <ng-container [ngTemplateOutlet]=\"footerTemplate()\" />\n    </div>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-card", imports: [NgTemplateOutlet], host: {
+                        "[class]": "baseClass()",
+                        "[attr.aria-labelledby]": "titleId()",
+                        "[attr.aria-describedby]": "descriptionId()"
+                    }, providers: [CardService], template: "@if (headerTemplate()) {\n    <div [class]=\"headerClass()\">\n        @if (titleTemplate()) {\n            <div [class]=\"titleCellClass\">\n                <ng-container [ngTemplateOutlet]=\"titleTemplate()\" [ngTemplateOutletContext]=\"{ $implicit: titleId() }\" />\n            </div>\n        }\n        @if (descriptionTemplate()) {\n            <div [class]=\"descriptionCellClass\">\n                <ng-container\n                    [ngTemplateOutlet]=\"descriptionTemplate()\"\n                    [ngTemplateOutletContext]=\"{ $implicit: descriptionId() }\"\n                />\n            </div>\n        }\n        @if (actionTemplate().length > 0) {\n            <div [class]=\"actionsCellClass\" role=\"group\" aria-label=\"Card actions\">\n                @for (template of actionTemplate(); track template) {\n                    <ng-container [ngTemplateOutlet]=\"template\" />\n                }\n            </div>\n        }\n    </div>\n}\n<ng-container [ngTemplateOutlet]=\"contentDirective()?.templateRef ?? null\" />\n@if (footerTemplate()) {\n    <div [class]=\"footerClass()\">\n        <ng-container [ngTemplateOutlet]=\"footerTemplate()\" />\n    </div>\n}\n" }]
+        }], propDecorators: { contentDirective: [{ type: i0.ContentChild, args: [i0.forwardRef(() => CardContentDirective), { isSignal: true }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+class CardFooterComponent {
+    #cardService;
+    constructor() {
+        this.#cardService = inject(CardService);
+        this.footerTemplate = viewChild.required(TemplateRef, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "footerTemplate" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Additional CSS classes merged onto the rendered footer element via `tailwind-merge`.
+         * @default ""
+         */
+        this.userClass = input("", { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: "class" });
+        afterRenderEffect({
+            read: () => {
+                this.#cardService.footerTemplate.set(this.footerTemplate());
+                this.#cardService.footerClass.set(this.userClass());
+            }
+        });
+        inject(DestroyRef).onDestroy(() => {
+            this.#cardService.footerTemplate.set(null);
+            this.#cardService.footerClass.set(null);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CardFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: CardFooterComponent, isStandalone: true, selector: "mona-card-footer", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "footerTemplate", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template>\n    <ng-content></ng-content>\n</ng-template>\n" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CardFooterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-card-footer", imports: [], template: "<ng-template>\n    <ng-content></ng-content>\n</ng-template>\n" }]
+        }], ctorParameters: () => [], propDecorators: { footerTemplate: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+class CardActionDirective {
+    constructor() {
+        this.templateRef = inject(TemplateRef);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CardActionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: CardActionDirective, isStandalone: true, selector: "[monaCardAction]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CardActionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[monaCardAction]"
+                }]
+        }] });
+
+class CardDescriptionDirective {
+    constructor() {
+        this.id = createElementControlId();
+        this.templateRef = inject(TemplateRef);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CardDescriptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: CardDescriptionDirective, isStandalone: true, selector: "[monaCardDescription]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CardDescriptionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[monaCardDescription]"
+                }]
+        }] });
+
+class CardTitleDirective {
+    constructor() {
+        this.id = createElementControlId();
+        this.templateRef = inject(TemplateRef);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CardTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: CardTitleDirective, isStandalone: true, selector: "[monaCardTitle]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CardTitleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[monaCardTitle]"
+                }]
+        }] });
+
+class CardHeaderComponent {
+    #cardService;
+    constructor() {
+        this.#cardService = inject(CardService);
+        this.actionDirective = contentChildren(CardActionDirective, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "actionDirective" }] : /* istanbul ignore next */ []));
+        this.descriptionDirective = contentChild(CardDescriptionDirective, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "descriptionDirective" }] : /* istanbul ignore next */ []));
+        this.headerTemplate = viewChild.required(TemplateRef, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "headerTemplate" }] : /* istanbul ignore next */ []));
+        this.titleDirective = contentChild(CardTitleDirective, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "titleDirective" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Additional CSS classes merged onto the rendered header element via `tailwind-merge`.
+         * @default ""
+         */
+        this.userClass = input("", { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: "class" });
+        afterRenderEffect({
+            read: () => {
+                this.#cardService.actionTemplate.set(this.actionDirective().map(directive => directive.templateRef));
+                this.#cardService.descriptionId.set(this.descriptionDirective()?.id ?? null);
+                this.#cardService.descriptionTemplate.set(this.descriptionDirective()?.templateRef ?? null);
+                this.#cardService.headerTemplate.set(this.headerTemplate());
+                this.#cardService.headerClass.set(this.userClass());
+                this.#cardService.titleId.set(this.titleDirective()?.id ?? null);
+                this.#cardService.titleTemplate.set(this.titleDirective()?.templateRef ?? null);
+            }
+        });
+        inject(DestroyRef).onDestroy(() => {
+            this.#cardService.actionTemplate.set([]);
+            this.#cardService.descriptionId.set(null);
+            this.#cardService.descriptionTemplate.set(null);
+            this.#cardService.headerTemplate.set(null);
+            this.#cardService.headerClass.set(null);
+            this.#cardService.titleId.set(null);
+            this.#cardService.titleTemplate.set(null);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CardHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: CardHeaderComponent, isStandalone: true, selector: "mona-card-header", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "actionDirective", predicate: CardActionDirective, isSignal: true }, { propertyName: "descriptionDirective", first: true, predicate: CardDescriptionDirective, descendants: true, isSignal: true }, { propertyName: "titleDirective", first: true, predicate: CardTitleDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "headerTemplate", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template>\n    <ng-content></ng-content>\n</ng-template>\n" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CardHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-card-header", template: "<ng-template>\n    <ng-content></ng-content>\n</ng-template>\n" }]
+        }], ctorParameters: () => [], propDecorators: { actionDirective: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => CardActionDirective), { isSignal: true }] }], descriptionDirective: [{ type: i0.ContentChild, args: [i0.forwardRef(() => CardDescriptionDirective), { isSignal: true }] }], headerTemplate: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }], titleDirective: [{ type: i0.ContentChild, args: [i0.forwardRef(() => CardTitleDirective), { isSignal: true }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CardActionDirective, CardComponent, CardContentDirective, CardDescriptionDirective, CardFooterComponent, CardHeaderComponent, CardTitleDirective };
+//# sourceMappingURL=nanahoshi-mona-ui-card.mjs.map

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