@nanahoshi/mona-ui 0.4.0 → 0.5.0

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

@@ -0,0 +1,96 @@
+import * as i0 from '@angular/core';
+import { computed, input, Component } from '@angular/core';
+import { classInputToClass } from '@nanahoshi/mona-ui/common';
+import { twMerge } from 'tailwind-merge';
+import { cva } from 'class-variance-authority';
+
+const skeletonBaseThemeVariants = cva(`
+        block shrink-0
+        bg-accent
+        motion-safe:animate-pulse
+    `, {
+    variants: {
+        rounded: {
+            small: "rounded-sm",
+            medium: "rounded-md",
+            large: "rounded-lg",
+            full: "rounded-full",
+            none: "rounded-none"
+        }
+    }
+});
+
+/**
+ * @description
+ * A placeholder block standing in for content that has not loaded yet. Size it with `width` and
+ * `height`, or with utility classes for anything more involved.
+ *
+ * It is decorative, so it is hidden from assistive technology. Mark the region it fills with
+ * `aria-busy` and describe what is loading there instead.
+ */
+class SkeletonComponent {
+    constructor() {
+        this.baseClass = computed(() => {
+            const variantClass = skeletonBaseThemeVariants({ rounded: this.rounded() });
+            return twMerge(variantClass, this.userClass());
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
+        this.heightString = computed(() => this.toCssSize(this.height()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "heightString" }] : /* istanbul ignore next */ []));
+        this.widthString = computed(() => this.toCssSize(this.width()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "widthString" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Height of the placeholder. Numbers are treated as pixels.
+         * @default "1rem"
+         */
+        this.height = input("1rem", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Border-radius preset applied to the placeholder.
+         * @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",
+            transform: value => classInputToClass(value) });
+        /**
+         * @description Width of the placeholder. Numbers are treated as pixels.
+         * @default "100%"
+         */
+        this.width = input("100%", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    }
+    toCssSize(value) {
+        return typeof value === "number" ? `${value}px` : value;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.6", type: SkeletonComponent, isStandalone: true, selector: "mona-skeleton", inputs: { height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-hidden": "'true'", "class": "baseClass()", "style.height": "heightString()", "style.width": "widthString()" } }, ngImport: i0, template: ``, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkeletonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "mona-skeleton",
+                    template: ``,
+                    host: {
+                        "[attr.aria-hidden]": "'true'",
+                        "[class]": "baseClass()",
+                        "[style.height]": "heightString()",
+                        "[style.width]": "widthString()"
+                    }
+                }]
+        }], propDecorators: { height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }] } });
+
+/*
+ * Public API Surface of @nanahoshi/mona-ui/skeleton
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SkeletonComponent };
+//# sourceMappingURL=nanahoshi-mona-ui-skeleton.mjs.map

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

@@ -371,7 +371,7 @@ class SplitButtonComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SplitButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: SplitButtonComponent, isStandalone: true, selector: "mona-split-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 }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, menuButtonAriaLabel: { classPropertyName: "menuButtonAriaLabel", publicName: "menuButtonAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, popupWidth: { classPropertyName: "popupWidth", publicName: "popupWidth", 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: { buttonClick: "buttonClick", menuItemClick: "menuItemClick" }, host: { properties: { "class": "classes()" } }, queries: [{ propertyName: "menuItemComponents", predicate: PopupMenuToken, isSignal: true }, { propertyName: "groupTemplate", first: true, predicate: SplitButtonMenuGroupTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "iconTemplate", first: true, predicate: SplitButtonMenuItemIconTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "mainButtonTextTemplate", first: true, predicate: SplitButtonTextTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "menuButtonTemplate", first: true, predicate: SplitButtonMenuButtonTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "shortcutTemplate", first: true, predicate: SplitButtonMenuItemShortcutTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "textTemplate", first: true, predicate: SplitButtonMenuItemTextTemplateDirective, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "menuButtonRef", first: true, predicate: ["menuButton"], descendants: true, isSignal: true }, { propertyName: "popupMenuRef", first: true, predicate: ["popupMenu"], descendants: true, isSignal: true }], ngImport: i0, template: "<button\n    monaButton\n    (click)=\"buttonClick.emit($event)\"\n    [disabled]=\"disabled()\"\n    [look]=\"look()\"\n    [size]=\"size()\"\n    [rounded]=\"rounded()\"\n    class=\"rounded-tr-none rounded-br-none\"\n    [attr.aria-label]=\"splitButtonAriaLabel() || null\"\n    [attr.aria-labelledby]=\"ariaLabelledby() || null\"\n    [tabindex]=\"disabled() ? -1 : 0\"\n    #mainButton>\n    @if (mainButtonTextTemplate()) {\n        <ng-container [ngTemplateOutlet]=\"mainButtonTextTemplate()\"></ng-container>\n    } @else {\n        <span>{{ text() }}</span>\n    }\n</button>\n<button\n    monaButton\n    [disabled]=\"disabled()\"\n    [iconOnly]=\"true\"\n    [look]=\"look()\"\n    [size]=\"size()\"\n    [rounded]=\"rounded()\"\n    class=\"rounded-tl-none rounded-bl-none border-l-0\"\n    [attr.aria-haspopup]=\"'menu'\"\n    [attr.aria-expanded]=\"menuOpen()\"\n    [attr.aria-controls]=\"menuId\"\n    [attr.aria-label]=\"menuButtonAriaLabel()\"\n    [tabindex]=\"disabled() ? -1 : 0\"\n    #menuButton>\n    @if (menuButtonTemplate()) {\n        <ng-container [ngTemplateOutlet]=\"menuButtonTemplate()\"></ng-container>\n    } @else {\n        <svg lucideChevronDown [size]=\"16\"></svg>\n    }\n</button>\n\n<mona-popup-menu\n    [anchorConnectionPoint]=\"'bottomleft'\"\n    [anchor]=\"mainButton\"\n    [items]=\"menuItems()\"\n    (menuClick)=\"onMenuItemClick($event)\"\n    (open)=\"onMenuOpen()\"\n    (close)=\"onMenuClose()\"\n    [offset]=\"{ horizontal: 0, vertical: 2 }\"\n    [popupConnectionPoint]=\"'topleft'\"\n    [rounded]=\"popupMenuRounded()\"\n    [size]=\"size()\"\n    [target]=\"menuButton\"\n    [trigger]=\"'click'\"\n    [id]=\"menuId\"\n    [minWidth]=\"popupWidth() || undefined\"\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: "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: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "component", type: LucideChevronDown, selector: "svg[lucideChevronDown]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: SplitButtonComponent, isStandalone: true, selector: "mona-split-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 }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, menuButtonAriaLabel: { classPropertyName: "menuButtonAriaLabel", publicName: "menuButtonAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, popupWidth: { classPropertyName: "popupWidth", publicName: "popupWidth", 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: { buttonClick: "buttonClick", menuItemClick: "menuItemClick" }, host: { properties: { "class": "classes()" } }, queries: [{ propertyName: "menuItemComponents", predicate: PopupMenuToken, isSignal: true }, { propertyName: "groupTemplate", first: true, predicate: SplitButtonMenuGroupTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "iconTemplate", first: true, predicate: SplitButtonMenuItemIconTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "mainButtonTextTemplate", first: true, predicate: SplitButtonTextTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "menuButtonTemplate", first: true, predicate: SplitButtonMenuButtonTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "shortcutTemplate", first: true, predicate: SplitButtonMenuItemShortcutTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "textTemplate", first: true, predicate: SplitButtonMenuItemTextTemplateDirective, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "menuButtonRef", first: true, predicate: ["menuButton"], descendants: true, isSignal: true }, { propertyName: "popupMenuRef", first: true, predicate: ["popupMenu"], descendants: true, isSignal: true }], ngImport: i0, template: "<button\n    monaButton\n    (click)=\"buttonClick.emit($event)\"\n    [disabled]=\"disabled()\"\n    [look]=\"look()\"\n    [size]=\"size()\"\n    [rounded]=\"rounded()\"\n    class=\"rounded-tr-none rounded-br-none\"\n    [attr.aria-label]=\"splitButtonAriaLabel() || null\"\n    [attr.aria-labelledby]=\"ariaLabelledby() || null\"\n    [tabindex]=\"disabled() ? -1 : 0\"\n    #mainButton>\n    @if (mainButtonTextTemplate()) {\n        <ng-container [ngTemplateOutlet]=\"mainButtonTextTemplate()\"></ng-container>\n    } @else {\n        <span>{{ text() }}</span>\n    }\n</button>\n<button\n    monaButton\n    [disabled]=\"disabled()\"\n    [iconOnly]=\"true\"\n    [look]=\"look()\"\n    [size]=\"size()\"\n    [rounded]=\"rounded()\"\n    class=\"rounded-tl-none rounded-bl-none border-l-0\"\n    [attr.aria-haspopup]=\"'menu'\"\n    [attr.aria-expanded]=\"menuOpen()\"\n    [attr.aria-controls]=\"menuId\"\n    [attr.aria-label]=\"menuButtonAriaLabel()\"\n    [tabindex]=\"disabled() ? -1 : 0\"\n    #menuButton>\n    @if (menuButtonTemplate()) {\n        <ng-container [ngTemplateOutlet]=\"menuButtonTemplate()\"></ng-container>\n    } @else {\n        <svg lucideChevronDown [size]=\"16\"></svg>\n    }\n</button>\n\n<mona-popup-menu\n    [anchorConnectionPoint]=\"'bottomleft'\"\n    [anchor]=\"mainButton\"\n    [items]=\"menuItems()\"\n    (menuClick)=\"onMenuItemClick($event)\"\n    (open)=\"onMenuOpen()\"\n    (close)=\"onMenuClose()\"\n    [offset]=\"{ horizontal: 0, vertical: 2 }\"\n    [popupConnectionPoint]=\"'topleft'\"\n    [rounded]=\"popupMenuRounded()\"\n    [size]=\"size()\"\n    [target]=\"menuButton\"\n    [trigger]=\"'click'\"\n    [id]=\"menuId\"\n    [minWidth]=\"popupWidth() || undefined\"\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: "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: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "component", type: LucideChevronDown, selector: "svg[lucideChevronDown]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SplitButtonComponent, decorators: [{
             type: Component,

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

@@ -195,6 +195,52 @@ function clamp(value, minimum, maximum) {
     return Math.min(Math.max(value, minimum), maximum);
 }
 
+function createDefaultThemeEffects() {
+    return Object.freeze({
+        "--mona-effect-control-background-color": "var(--color-input-background)",
+        "--mona-effect-control-fallback-background-color": "var(--color-input-background)",
+        "--mona-effect-control-background-image": "none",
+        "--mona-effect-control-backdrop-filter": "none",
+        "--mona-effect-raised-background-color": "var(--color-surface-raised)",
+        "--mona-effect-raised-fallback-background-color": "var(--color-surface-raised)",
+        "--mona-effect-raised-background-image": "none",
+        "--mona-effect-raised-backdrop-filter": "none",
+        "--mona-effect-overlay-background-color": "var(--color-surface-overlay)",
+        "--mona-effect-overlay-fallback-background-color": "var(--color-surface-overlay)",
+        "--mona-effect-overlay-background-image": "none",
+        "--mona-effect-overlay-backdrop-filter": "none"
+    });
+}
+function createDefaultThemeShape() {
+    return Object.freeze({
+        "--radius-sm": "0.25rem",
+        "--radius-md": "0.375rem",
+        "--radius-lg": "0.5rem"
+    });
+}
+/**
+ * Builds the sidebar's own colour roles. The sidebar is a persistent chrome region rather than page
+ * content, so it is given a surface of its own instead of borrowing the page's — which is what lets a
+ * theme sit it slightly apart from the content beside it without every consumer restyling it.
+ *
+ * Only `background` has to be chosen per theme. Hover defaults to the neutral interaction roles, while
+ * the sidebar's primary pair follows the selected-state roles. This keeps ordinary navigation quiet,
+ * reserves identity colour for the current item, and makes runtime primary-palette changes flow through
+ * without rebuilding the sidebar recipe.
+ */
+function createSidebarColorRoles(seeds) {
+    return Object.freeze({
+        "--color-sidebar": seeds.background,
+        "--color-sidebar-foreground": seeds.foreground ?? "var(--color-foreground)",
+        "--color-sidebar-primary": seeds.primary ?? "var(--color-selected)",
+        "--color-sidebar-primary-foreground": seeds.primaryForeground ?? "var(--color-selected-foreground)",
+        "--color-sidebar-accent": seeds.accent ?? "var(--color-hover)",
+        "--color-sidebar-accent-foreground": seeds.accentForeground ?? "var(--color-foreground)",
+        "--color-sidebar-border": seeds.border ?? "var(--color-border)",
+        "--color-sidebar-ring": seeds.ring ?? "var(--color-focus-indicator)"
+    });
+}
+
 const generatedRoles$2 = generateThemeColorPalette({
     primary: "#583573",
     secondary: "#3A3B40",
@@ -271,6 +317,9 @@ const dark$5 = Object.freeze({
     "--color-destructive-foreground": "var(--color-error-foreground)",
     "--color-input": "var(--color-border-control)",
     "--color-disabled": "var(--color-disabled-foreground)",
+    // Anna's canvas is already dark, so the sidebar recedes below it rather than lifting off it —
+    // the same relationship its scrollbar track and popovers use.
+    ...createSidebarColorRoles({ background: "var(--color-surface-muted)" }),
     "--color-chart-1": "#A174C2",
     "--color-chart-2": "#6F4A8A",
     "--color-chart-3": "#4DA3FF",
@@ -295,30 +344,6 @@ const dark$4 = Object.freeze({
 });
 const annaThemeShadows = Object.freeze({ dark: dark$4 });
 
-function createDefaultThemeEffects() {
-    return Object.freeze({
-        "--mona-effect-control-background-color": "var(--color-input-background)",
-        "--mona-effect-control-fallback-background-color": "var(--color-input-background)",
-        "--mona-effect-control-background-image": "none",
-        "--mona-effect-control-backdrop-filter": "none",
-        "--mona-effect-raised-background-color": "var(--color-surface-raised)",
-        "--mona-effect-raised-fallback-background-color": "var(--color-surface-raised)",
-        "--mona-effect-raised-background-image": "none",
-        "--mona-effect-raised-backdrop-filter": "none",
-        "--mona-effect-overlay-background-color": "var(--color-surface-overlay)",
-        "--mona-effect-overlay-fallback-background-color": "var(--color-surface-overlay)",
-        "--mona-effect-overlay-background-image": "none",
-        "--mona-effect-overlay-backdrop-filter": "none"
-    });
-}
-function createDefaultThemeShape() {
-    return Object.freeze({
-        "--radius-sm": "0.25rem",
-        "--radius-md": "0.375rem",
-        "--radius-lg": "0.5rem"
-    });
-}
-
 const motion$1 = Object.freeze({
     "--mona-motion-fast": "150ms",
     "--mona-motion-standard": "150ms"
@@ -420,6 +445,9 @@ const light$3 = Object.freeze({
     "--color-destructive-foreground": "var(--color-error-foreground)",
     "--color-input": "var(--color-border-control)",
     "--color-disabled": "var(--color-disabled-foreground)",
+    // Navigation is part of Luna's raised glass layer. Reduced-transparency mode replaces this with
+    // the exact opaque raised fallback during runtime profile resolution.
+    ...createSidebarColorRoles({ background: "var(--mona-effect-raised-background-color)" }),
     "--color-chart-1": "#3f6be2",
     "--color-chart-2": "#667085",
     "--color-chart-3": "#4f8a70",
@@ -495,6 +523,8 @@ const dark$3 = Object.freeze({
     "--color-destructive-foreground": "var(--color-error-foreground)",
     "--color-input": "var(--color-border-control)",
     "--color-disabled": "var(--color-disabled-foreground)",
+    // Keep navigation on the same independent raised-glass material as the light profile.
+    ...createSidebarColorRoles({ background: "var(--mona-effect-raised-background-color)" }),
     "--color-chart-1": "#7f9bf0",
     "--color-chart-2": "#9ba3b2",
     "--color-chart-3": "#70aa8e",
@@ -733,6 +763,9 @@ const light$1 = Object.freeze({
     "--color-destructive-foreground": "var(--color-error-foreground)",
     "--color-input": "var(--color-border-control)",
     "--color-disabled": "var(--color-disabled-foreground)",
+    // Mona's content sits on pure white, so the sidebar takes the canvas tone to read as chrome
+    // rather than as another card.
+    ...createSidebarColorRoles({ background: "var(--color-canvas)" }),
     "--color-chart-1": "oklch(20.5% 0.006 285.885)",
     "--color-chart-2": "oklch(37.1% 0.008 285.805)",
     "--color-chart-3": "oklch(55.2% 0.010 285.938)",
@@ -795,6 +828,9 @@ const dark$1 = Object.freeze({
     "--color-destructive-foreground": "var(--color-error-foreground)",
     "--color-input": "var(--color-border-control)",
     "--color-disabled": "var(--color-disabled-foreground)",
+    // Dark mode inverts the relationship: the canvas is the darkest tone, so the sidebar lifts off it
+    // instead of sinking into it.
+    ...createSidebarColorRoles({ background: "var(--color-surface-muted)" }),
     "--color-chart-1": "oklch(92.2% 0.004 286.320)",
     "--color-chart-2": "oklch(80.5% 0.008 286.067)",
     "--color-chart-3": "oklch(70.5% 0.010 286.067)",
@@ -1162,5 +1198,5 @@ function provideThemeColorPalette(registration) {
  * Generated bundle index. Do not edit.
  */
 
-export { THEME_STRATEGY, ThemeService, flattenThemeProfile, generateThemeColorPalette, provideThemeColorPalette, provideThemeFamily, provideThemeOptions, provideThemeOverrides };
+export { THEME_STRATEGY, ThemeService, createSidebarColorRoles, flattenThemeProfile, generateThemeColorPalette, provideThemeColorPalette, provideThemeFamily, provideThemeOptions, provideThemeOverrides };
 //# sourceMappingURL=nanahoshi-mona-ui-theme.mjs.map

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

@@ -356,6 +356,7 @@ class TooltipDirective {
     #injector;
     #popupService;
     #renderer;
+    #selfTitleWrites;
     #currentAnchor;
     #hideTimeoutId;
     #mutationObserver;
@@ -369,6 +370,7 @@ class TooltipDirective {
         this.#injector = inject(EnvironmentInjector);
         this.#popupService = inject(PopupService);
         this.#renderer = inject(Renderer2);
+        this.#selfTitleWrites = new Map();
         this.#currentAnchor = null;
         this.#hideTimeoutId = null;
         this.#mutationObserver = null;
@@ -441,8 +443,13 @@ class TooltipDirective {
                 this.#mutationObserver?.disconnect();
                 this.#mutationObserver = null;
                 if (this.mode() === "content") {
-                    this.#mutationObserver = new MutationObserver(() => this.#refreshSubscription());
-                    this.#mutationObserver.observe(this.#host.nativeElement, { childList: true, subtree: true });
+                    this.#mutationObserver = new MutationObserver(records => this.#onMutations(records));
+                    this.#mutationObserver.observe(this.#host.nativeElement, {
+                        attributeFilter: ["title"],
+                        attributes: true,
+                        childList: true,
+                        subtree: true
+                    });
                 }
             }
         });
@@ -497,6 +504,7 @@ class TooltipDirective {
                 this.#currentAnchor = null;
             }
             this.#renderer.removeAttribute(anchor, "aria-describedby");
+            this.#markSelfTitleWrite(anchor);
             this.#renderer.setAttribute(anchor, "title", text);
             component.destroy();
             this.hidden.emit();
@@ -542,6 +550,9 @@ class TooltipDirective {
         }
         this.#popupRef?.close();
         const title = targetElement.getAttribute("title") || "";
+        if (title) {
+            this.#markSelfTitleWrite(targetElement);
+        }
         this.#renderer.removeAttribute(targetElement, "title");
         if (this.mode() === "host") {
             this.originalTitle.set(title);
@@ -561,6 +572,42 @@ class TooltipDirective {
             }
         }
     }
+    /**
+     * The directive strips a `title` while its tooltip is open and restores it on close. Those writes
+     * reach the observer too, so each one is booked ahead of time and cancelled out here — otherwise
+     * showing a tooltip would tear down and rebuild the very subscriptions driving it.
+     */
+    #isSelfTitleWrite(element) {
+        const pending = this.#selfTitleWrites.get(element) ?? 0;
+        if (pending <= 0) {
+            return false;
+        }
+        if (pending === 1) {
+            this.#selfTitleWrites.delete(element);
+        }
+        else {
+            this.#selfTitleWrites.set(element, pending - 1);
+        }
+        return true;
+    }
+    #markSelfTitleWrite(element) {
+        this.#selfTitleWrites.set(element, (this.#selfTitleWrites.get(element) ?? 0) + 1);
+    }
+    #onMutations(records) {
+        // Mapped rather than short circuited, so every self inflicted record is still cancelled out.
+        const externalChanges = records.map(record => {
+            if (record.type !== "attributes") {
+                return true;
+            }
+            if (record.attributeName !== "title") {
+                return false;
+            }
+            return !this.#isSelfTitleWrite(record.target);
+        });
+        if (externalChanges.some(Boolean)) {
+            this.#refreshSubscription();
+        }
+    }
     #refreshSubscription() {
         if (this.#subscription) {
             this.#subscription.unsubscribe();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nanahoshi/mona-ui",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "A very light Angular UI framework",
   "author": "Nanahoshi",
   "repository": {
@@ -101,6 +101,10 @@
       "types": "./types/nanahoshi-mona-ui-circular-progress-bar.d.ts",
       "default": "./fesm2022/nanahoshi-mona-ui-circular-progress-bar.mjs"
     },
+    "./collapsible": {
+      "types": "./types/nanahoshi-mona-ui-collapsible.d.ts",
+      "default": "./fesm2022/nanahoshi-mona-ui-collapsible.mjs"
+    },
     "./color-gradient": {
       "types": "./types/nanahoshi-mona-ui-color-gradient.d.ts",
       "default": "./fesm2022/nanahoshi-mona-ui-color-gradient.mjs"
@@ -261,6 +265,14 @@
       "types": "./types/nanahoshi-mona-ui-scroll-view.d.ts",
       "default": "./fesm2022/nanahoshi-mona-ui-scroll-view.mjs"
     },
+    "./sidebar": {
+      "types": "./types/nanahoshi-mona-ui-sidebar.d.ts",
+      "default": "./fesm2022/nanahoshi-mona-ui-sidebar.mjs"
+    },
+    "./skeleton": {
+      "types": "./types/nanahoshi-mona-ui-skeleton.d.ts",
+      "default": "./fesm2022/nanahoshi-mona-ui-skeleton.mjs"
+    },
     "./slider": {
       "types": "./types/nanahoshi-mona-ui-slider.d.ts",
       "default": "./fesm2022/nanahoshi-mona-ui-slider.mjs"

package/sidebar/package.json

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

package/skeleton/package.json

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

package/types/nanahoshi-mona-ui-collapsible.d.ts

@@ -0,0 +1,92 @@
+import * as _angular_core from '@angular/core';
+import { Signal, InjectionToken } from '@angular/core';
+import * as _nanahoshi_mona_ui_collapsible from '@nanahoshi/mona-ui/collapsible';
+
+declare const CollapsibleToken: InjectionToken<CollapsibleConfig>;
+/**
+ * The contract a collapsible root exposes to its trigger and content parts.
+ */
+interface CollapsibleConfig {
+    readonly animate: Signal<boolean>;
+    collapse(): void;
+    readonly contentId: string;
+    readonly disabled: Signal<boolean>;
+    expand(): void;
+    readonly expanded: Signal<boolean>;
+    toggle(): void;
+}
+
+/**
+ * @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`.
+ */
+declare class CollapsibleDirective implements CollapsibleConfig {
+    protected readonly state: _angular_core.Signal<"open" | "closed">;
+    /**
+     * @description Enables the height transition applied to the collapsible content.
+     * @default true
+     */
+    readonly animate: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Id assigned to the content element and referenced by the trigger through `aria-controls`.
+     */
+    readonly contentId: string;
+    /**
+     * @description Suppresses toggling through the trigger. `expand()` and `collapse()` still apply.
+     * @default false
+     */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Sets whether the content is expanded. Supports two-way binding.
+     * @default false
+     */
+    readonly expanded: _angular_core.ModelSignal<boolean>;
+    collapse(): void;
+    expand(): void;
+    toggle(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CollapsibleDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<CollapsibleDirective, "[monaCollapsible]", ["monaCollapsible"], { "animate": { "alias": "animate"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; }, { "expanded": "expandedChange"; }, never, never, true, never>;
+}
+
+/**
+ * @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).
+ */
+declare class CollapsibleContentDirective {
+    #private;
+    protected readonly collapsible: _nanahoshi_mona_ui_collapsible.CollapsibleConfig;
+    protected readonly inert: _angular_core.Signal<true | null>;
+    protected readonly state: _angular_core.Signal<"open" | "closed">;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CollapsibleContentDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<CollapsibleContentDirective, "[monaCollapsibleContent]", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * @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.
+ */
+declare class CollapsibleTriggerDirective {
+    #private;
+    protected readonly ariaDisabled: _angular_core.Signal<"true" | null>;
+    protected readonly collapsible: _nanahoshi_mona_ui_collapsible.CollapsibleConfig;
+    protected readonly nativeDisabled: _angular_core.Signal<"" | null>;
+    protected readonly role: string | null;
+    protected readonly state: _angular_core.Signal<"open" | "closed">;
+    protected readonly tabIndex: _angular_core.Signal<0 | -1 | null>;
+    protected readonly type: string | null;
+    protected onClick(): void;
+    protected onEnterKeydown(event: Event): void;
+    protected onSpaceKeydown(event: Event): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CollapsibleTriggerDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<CollapsibleTriggerDirective, "[monaCollapsibleTrigger]", never, {}, {}, never, never, true, never>;
+}
+
+export { CollapsibleContentDirective, CollapsibleDirective, CollapsibleToken, CollapsibleTriggerDirective };
+export type { CollapsibleConfig };

package/types/nanahoshi-mona-ui-expansion-panel.d.ts

@@ -1,5 +1,6 @@
 import * as _angular_core from '@angular/core';
 import { TemplateRef } from '@angular/core';
+import { CollapsibleConfig } from '@nanahoshi/mona-ui/collapsible';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantInputs } from '@nanahoshi/mona-ui/internal';
 import { VariantProps } from 'class-variance-authority';
@@ -27,16 +28,21 @@ type ExpansionPanelIconContainerVariantProps = VariantProps<typeof expansionPane
 type ExpansionPanelIconContainerVariantInput = VariantInputs<ExpansionPanelIconContainerVariantProps>;
 type ExpansionPanelVariantInput = ExpansionPanelBaseVariantInput & Omit<ExpansionPanelHeaderVariantInput, "collapsed"> & ExpansionPanelContentVariantInput & Omit<ExpansionPanelIconContainerVariantInput, "hasTemplate">;
 
-declare class ExpansionPanelComponent implements ExpansionPanelVariantInput {
+declare class ExpansionPanelComponent implements ExpansionPanelVariantInput, CollapsibleConfig {
     protected readonly actionsTemplateList: _angular_core.Signal<readonly TemplateRef<any>[]>;
     protected readonly baseClass: _angular_core.Signal<string>;
     protected readonly contentClass: _angular_core.Signal<string>;
-    protected readonly contentId: string;
     protected readonly headerClass: _angular_core.Signal<string>;
     protected readonly headerTitleClass: _angular_core.Signal<string>;
     protected readonly iconContainerClass: _angular_core.Signal<string>;
     protected readonly iconTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
     protected readonly titleTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
+    /**
+     * @description Always enabled. Satisfies the `CollapsibleConfig` contract for `monaCollapsibleTrigger`;
+     * this component doesn't use `monaCollapsibleContent`, so no animation ever consults it.
+     */
+    readonly animate: _angular_core.Signal<boolean>;
+    readonly contentId: string;
     /**
      * @description Disables header interaction, suppressing click and keyboard toggling.
      * @default false
@@ -62,7 +68,9 @@ declare class ExpansionPanelComponent implements ExpansionPanelVariantInput {
      * @default ""
      */
     readonly userClass: _angular_core.InputSignal<string>;
-    protected toggle(): void;
+    collapse(): void;
+    expand(): void;
+    toggle(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ExpansionPanelComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ExpansionPanelComponent, "mona-expansion-panel", never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "userClass": { "alias": "userClass"; "required": false; "isSignal": true; }; }, { "expanded": "expandedChange"; }, ["actionsTemplateList", "iconTemplate", "titleTemplate"], ["*"], true, never>;
 }

package/types/nanahoshi-mona-ui-popup-menu.d.ts

@@ -1,8 +1,8 @@
 import * as _angular_core from '@angular/core';
 import { Signal, TemplateRef, ElementRef, InjectionToken, OnInit } from '@angular/core';
 import * as _mirei_ts_collections from '@mirei/ts-collections';
+import { PreventableEvent, ClassInputType } from '@nanahoshi/mona-ui/common';
 import { PopupCloseEvent, PopupRef, ConnectionPoint, PopupOffset } from '@nanahoshi/mona-ui/popup';
-import { PreventableEvent } from '@nanahoshi/mona-ui/common';
 import { Subject } from 'rxjs';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
@@ -165,6 +165,7 @@ declare class PopupMenuComponent implements PopupMenuVariantInput {
      * This will be applied to the root menu and all submenus.
      */
     readonly width: _angular_core.InputSignal<string | number | undefined>;
+    readonly userClass: _angular_core.InputSignalWithTransform<string | undefined, ClassInputType>;
     constructor();
     clearFocusRestoration(): void;
     closeMenu(): void;
@@ -178,7 +179,7 @@ declare class PopupMenuComponent implements PopupMenuVariantInput {
     private setSubscriptions;
     private setTriggerSubscription;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<PopupMenuComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PopupMenuComponent, "mona-popup-menu", never, { "anchor": { "alias": "anchor"; "required": false; "isSignal": true; }; "anchorConnectionPoint": { "alias": "anchorConnectionPoint"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; "menuId": { "alias": "id"; "required": false; "isSignal": true; }; "minWidth": { "alias": "minWidth"; "required": false; "isSignal": true; }; "offset": { "alias": "offset"; "required": false; "isSignal": true; }; "popupConnectionPoint": { "alias": "popupConnectionPoint"; "required": false; "isSignal": true; }; "precise": { "alias": "precise"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "target": { "alias": "target"; "required": true; "isSignal": true; }; "trigger": { "alias": "trigger"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; }, { "close": "close"; "menuClick": "menuClick"; "navigate": "navigate"; "open": "open"; }, ["groupTemplateConfig", "iconTemplateConfig", "nestedComponents", "shortcutTemplateConfig", "textTemplateConfig"], never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PopupMenuComponent, "mona-popup-menu", never, { "anchor": { "alias": "anchor"; "required": false; "isSignal": true; }; "anchorConnectionPoint": { "alias": "anchorConnectionPoint"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; "menuId": { "alias": "id"; "required": false; "isSignal": true; }; "minWidth": { "alias": "minWidth"; "required": false; "isSignal": true; }; "offset": { "alias": "offset"; "required": false; "isSignal": true; }; "popupConnectionPoint": { "alias": "popupConnectionPoint"; "required": false; "isSignal": true; }; "precise": { "alias": "precise"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "target": { "alias": "target"; "required": true; "isSignal": true; }; "trigger": { "alias": "trigger"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, { "close": "close"; "menuClick": "menuClick"; "navigate": "navigate"; "open": "open"; }, ["groupTemplateConfig", "iconTemplateConfig", "nestedComponents", "shortcutTemplateConfig", "textTemplateConfig"], never, true, never>;
 }
 
 declare const PopupMenuToken: InjectionToken<PopupMenuConfig>;
@@ -289,17 +290,18 @@ declare class PopupMenuItemComponent implements PopupMenuConfig, OnInit {
 }
 
 declare class PopupMenuGroupComponent implements PopupMenuConfig {
+    #private;
     protected readonly groupTemplateConfig: _angular_core.Signal<_nanahoshi_mona_ui_popup_menu.PopupTemplateConfig | undefined>;
     protected readonly items: _angular_core.Signal<readonly PopupMenuConfig[]>;
     readonly origin: PopupMenuOrigin;
     /**
      * @description Sets the title of the menu group.
      */
-    readonly title: _angular_core.InputSignal<string>;
+    readonly title: _angular_core.InputSignal<string | undefined>;
     readonly type = PopupMenuItemType.MenuGroup;
     getPopupMenuItem(): PopupMenuItem[];
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<PopupMenuGroupComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PopupMenuGroupComponent, "mona-popup-menu-group", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; }, {}, ["groupTemplateConfig", "items"], never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PopupMenuGroupComponent, "mona-popup-menu-group", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; }, {}, ["groupTemplateConfig", "items"], never, true, never>;
 }
 
 declare class PopupMenuRadioGroupComponent implements PopupMenuConfig, OnInit {