@nanahoshi/mona-ui 0.3.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",
@@ -209,6 +255,8 @@ const dark$5 = Object.freeze({
     "--color-surface-muted": "#161718",
     "--color-surface-raised": "#242528",
     "--color-surface-overlay": "#161718",
+    "--color-card": "var(--color-surface-raised)",
+    "--color-card-foreground": "var(--color-foreground)",
     "--color-foreground": "#D6D6D8",
     "--color-muted-foreground": "#A8A8AD",
     "--color-input-background": "#1D1E20",
@@ -269,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",
@@ -293,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"
@@ -364,6 +391,8 @@ const light$3 = Object.freeze({
     "--color-surface-muted": "#f3f4f5",
     "--color-surface-raised": "#fbfbfb",
     "--color-surface-overlay": "#f9f9fa",
+    "--color-card": "var(--mona-effect-raised-background-color)",
+    "--color-card-foreground": "var(--color-foreground)",
     "--color-foreground": "#252525",
     "--color-muted-foreground": "#6f7074",
     "--color-input-background": "#f3f4f5",
@@ -416,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",
@@ -437,6 +469,8 @@ const dark$3 = Object.freeze({
     "--color-surface-muted": "#252527",
     "--color-surface-raised": "#202022",
     "--color-surface-overlay": "#262628",
+    "--color-card": "var(--mona-effect-raised-background-color)",
+    "--color-card-foreground": "var(--color-foreground)",
     "--color-foreground": "#f5f5f6",
     "--color-muted-foreground": "#a9aaae",
     "--color-input-background": "#252527",
@@ -489,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",
@@ -686,6 +722,8 @@ const light$1 = Object.freeze({
     "--color-surface-muted": "oklch(96.7% 0.001 286.375)",
     "--color-surface-raised": "oklch(100% 0 0)",
     "--color-surface-overlay": "oklch(100% 0 0)",
+    "--color-card": "var(--color-surface-raised)",
+    "--color-card-foreground": "var(--color-foreground)",
     "--color-foreground": "oklch(14.1% 0.005 285.823)",
     "--color-muted-foreground": "oklch(55.2% 0.016 285.938)",
     "--color-input-background": "oklch(100% 0 0)",
@@ -725,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)",
@@ -746,6 +787,8 @@ const dark$1 = Object.freeze({
     "--color-surface-muted": "oklch(20.5% 0.006 285.885)",
     "--color-surface-raised": "oklch(24% 0.006 286.033)",
     "--color-surface-overlay": "oklch(27.4% 0.006 286.033)",
+    "--color-card": "var(--color-surface-raised)",
+    "--color-card-foreground": "var(--color-foreground)",
     "--color-foreground": "oklch(98.5% 0 0)",
     "--color-muted-foreground": "oklch(70.5% 0.015 286.067)",
     "--color-input-background": "oklch(20.5% 0.006 285.885)",
@@ -785,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)",
@@ -1152,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.3.0",
+  "version": "0.5.0",
   "description": "A very light Angular UI framework",
   "author": "Nanahoshi",
   "repository": {
@@ -85,6 +85,10 @@
       "types": "./types/nanahoshi-mona-ui-calendar.d.ts",
       "default": "./fesm2022/nanahoshi-mona-ui-calendar.mjs"
     },
+    "./card": {
+      "types": "./types/nanahoshi-mona-ui-card.d.ts",
+      "default": "./fesm2022/nanahoshi-mona-ui-card.mjs"
+    },
     "./check-box": {
       "types": "./types/nanahoshi-mona-ui-check-box.d.ts",
       "default": "./fesm2022/nanahoshi-mona-ui-check-box.mjs"
@@ -97,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"
@@ -257,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-card.d.ts

@@ -0,0 +1,104 @@
+import * as _angular_core from '@angular/core';
+import { TemplateRef } from '@angular/core';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantInputs } from '@nanahoshi/mona-ui/internal';
+import { VariantProps } from 'class-variance-authority';
+import { ClassInputType } from '@nanahoshi/mona-ui/common';
+
+declare class CardContentDirective {
+    readonly templateRef: TemplateRef<any>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CardContentDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<CardContentDirective, "[monaCardContent]", never, {}, {}, never, never, true, never>;
+}
+
+declare const cardBaseThemeVariants: (props?: ({
+    rounded?: "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | null | undefined;
+    hasFooter?: boolean | null | undefined;
+    hasHeader?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type CardBaseVariantProps = VariantProps<typeof cardBaseThemeVariants>;
+type CardBaseVariantInput = VariantInputs<CardBaseVariantProps>;
+type CardVariantProps = CardBaseVariantProps;
+type CardVariantInput = Omit<CardBaseVariantInput, "hasFooter" | "hasHeader">;
+
+declare class CardComponent implements CardVariantInput {
+    #private;
+    protected readonly actionsCellClass: string;
+    protected readonly actionTemplate: _angular_core.Signal<_angular_core.TemplateRef<unknown>[]>;
+    protected readonly baseClass: _angular_core.Signal<string>;
+    protected readonly contentDirective: _angular_core.Signal<CardContentDirective | undefined>;
+    protected readonly descriptionCellClass: string;
+    protected readonly descriptionId: _angular_core.Signal<string | null>;
+    protected readonly descriptionTemplate: _angular_core.Signal<_angular_core.TemplateRef<unknown> | null>;
+    protected readonly footerClass: _angular_core.Signal<string>;
+    protected readonly footerTemplate: _angular_core.Signal<_angular_core.TemplateRef<unknown> | null>;
+    protected readonly headerClass: _angular_core.Signal<string>;
+    protected readonly headerTemplate: _angular_core.Signal<_angular_core.TemplateRef<unknown> | null>;
+    protected readonly titleCellClass: string;
+    protected readonly titleId: _angular_core.Signal<string | null>;
+    protected readonly titleTemplate: _angular_core.Signal<_angular_core.TemplateRef<unknown> | null>;
+    /**
+     * @description Controls the border radius applied to the card and its header/footer regions.
+     * @default "medium"
+     */
+    readonly rounded: _angular_core.InputSignal<"small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | null | undefined>;
+    /**
+     * @description Additional CSS classes merged onto the host element via `tailwind-merge`.
+     * @default ""
+     */
+    readonly userClass: _angular_core.InputSignal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CardComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CardComponent, "mona-card", never, { "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, ["contentDirective"], never, true, never>;
+}
+
+declare class CardFooterComponent {
+    #private;
+    private readonly footerTemplate;
+    /**
+     * @description Additional CSS classes merged onto the rendered footer element via `tailwind-merge`.
+     * @default ""
+     */
+    readonly userClass: _angular_core.InputSignal<ClassInputType>;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CardFooterComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CardFooterComponent, "mona-card-footer", never, { "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+declare class CardHeaderComponent {
+    #private;
+    private readonly actionDirective;
+    private readonly descriptionDirective;
+    private readonly headerTemplate;
+    private readonly titleDirective;
+    /**
+     * @description Additional CSS classes merged onto the rendered header element via `tailwind-merge`.
+     * @default ""
+     */
+    readonly userClass: _angular_core.InputSignal<ClassInputType>;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CardHeaderComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CardHeaderComponent, "mona-card-header", never, { "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, ["actionDirective", "descriptionDirective", "titleDirective"], ["*"], true, never>;
+}
+
+declare class CardActionDirective {
+    readonly templateRef: TemplateRef<any>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CardActionDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<CardActionDirective, "[monaCardAction]", never, {}, {}, never, never, true, never>;
+}
+
+declare class CardDescriptionDirective {
+    readonly id: string;
+    readonly templateRef: TemplateRef<any>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CardDescriptionDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<CardDescriptionDirective, "[monaCardDescription]", never, {}, {}, never, never, true, never>;
+}
+
+declare class CardTitleDirective {
+    readonly id: string;
+    readonly templateRef: TemplateRef<any>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CardTitleDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<CardTitleDirective, "[monaCardTitle]", never, {}, {}, never, never, true, never>;
+}
+
+export { CardActionDirective, CardComponent, CardContentDirective, CardDescriptionDirective, CardFooterComponent, CardHeaderComponent, CardTitleDirective };
+export type { CardVariantProps };

package/types/nanahoshi-mona-ui-circular-progress-bar.d.ts

@@ -22,8 +22,9 @@ declare const circularProgressBarBaseThemeVariants: (props?: ({
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type CircularProgressBarBaseVariantProps = VariantProps<typeof circularProgressBarBaseThemeVariants>;
 type CircularProgressBarBaseVariantInput = VariantInputs<CircularProgressBarBaseVariantProps>;
+type CircularProgressBarVariantInput = CircularProgressBarBaseVariantInput;
 
-declare class CircularProgressBarComponent implements CircularProgressBarBaseVariantInput {
+declare class CircularProgressBarComponent implements CircularProgressBarVariantInput {
     protected readonly baseClasses: _angular_core.Signal<string>;
     protected readonly center: _angular_core.Signal<{
         x: number;