@nanahoshi/mona-ui 0.1.1 → 0.2.0

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

@@ -4,13 +4,12 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { PopupDataInjectionToken, PopupCloseEvent, PopupCloseSource, PopupService } from '@nanahoshi/mona-ui/popup';
 import { Subject, map, takeUntil, take } from 'rxjs';
 import { PreventableEvent, AnyPipe } from '@nanahoshi/mona-ui/common';
-import { createElementControlId, focusElement, setWindowStyles } from '@nanahoshi/mona-ui/internal';
+import { themeOverlaySurfaceClasses, createElementControlId, focusElement, setWindowStyles } from '@nanahoshi/mona-ui/internal';
 import * as i1 from '@angular/cdk/a11y';
 import { CdkTrapFocus } from '@angular/cdk/a11y';
 import { NgTemplateOutlet } from '@angular/common';
 import { LucideOctagonAlert, LucideCircleCheckBig, LucideBadgeInfo, LucideOctagonX, LucideBadgeQuestionMark, LucideX, LucideDynamicIcon } from '@lucide/angular';
 import { ButtonDirective } from '@nanahoshi/mona-ui/button';
-import { ThemeService } from '@nanahoshi/mona-ui/theme';
 import { cva } from 'class-variance-authority';
 
 class DialogContentTemplateDirective {
@@ -85,12 +84,10 @@ class DialogActionEvent extends PreventableEvent {
     }
 }
 
-const dialogBaseVariants = cva(`
-        flex flex-col gap-0.5
-        w-full h-full
-        bg-background text-foreground
-        border border-border shadow-sm
-        outline-none overflow-hidden
+const dialogBaseThemeVariants = cva(`
+        flex h-full w-full flex-col gap-0.5 overflow-hidden
+        ${themeOverlaySurfaceClasses} text-foreground
+        border border-border shadow-(--shadow-overlay) outline-none
     `, {
     variants: {
         rounded: {
@@ -104,12 +101,11 @@ const dialogBaseVariants = cva(`
         rounded: "medium"
     }
 });
-const dialogContentContainerVariants = cva(`
-        flex flex-row gap-1 flex-1
+const dialogContentContainerThemeVariants = cva(`
+        flex flex-1 flex-row gap-1
     `);
-const dialogBodyVariants = cva(`
-        flex flex-col gap-0 pb-2
-        w-full h-full pr-2
+const dialogBodyThemeVariants = cva(`
+        flex h-full w-full flex-col gap-0 pr-2 pb-2
     `, {
     variants: {
         hasIcon: {
@@ -118,18 +114,18 @@ const dialogBodyVariants = cva(`
         }
     }
 });
-const dialogHeaderVariants = cva(`
-        flex flex-row gap-2
-        pt-4 select-none
+const dialogHeaderThemeVariants = cva(`
+        flex flex-row gap-2 pt-4
+        select-none
     `);
-const dialogIconContainerVariants = cva(`
+const dialogIconContainerThemeVariants = cva(`
         flex items-start justify-center pt-8 pr-4 pl-6
     `);
-const dialogIconVariants = cva(`
-        rounded-full w-fit h-fit p-1.5 border relative
+const dialogIconThemeVariants = cva(`
+        relative h-fit w-fit rounded-full border p-1.5
         [&>span]:absolute [&>span]:flex [&>span]:rounded-full
         [&>span]:-top-3 [&>span]:-right-3 [&>span]:-bottom-3 [&>span]:-left-3
-        [&>span]:border [&>span]:min-w-full [&>span]:min-h-full
+        [&>span]:min-h-full [&>span]:min-w-full [&>span]:border
     `, {
     variants: {
         type: {
@@ -144,27 +140,29 @@ const dialogIconVariants = cva(`
         type: "info"
     }
 });
-const dialogTitleContainerVariants = cva(`
-        flex flex-1 items-center justify-start select-none p-1
+const dialogTitleContainerThemeVariants = cva(`
+        flex flex-1 items-center justify-start p-1
+        select-none
     `);
-const dialogCloseButtonContainerVariants = cva(`
+const dialogCloseButtonContainerThemeVariants = cva(`
         flex items-start justify-end
     `);
-const dialogTitleVariants = cva(`
+const dialogTitleThemeVariants = cva(`
         text-lg font-semibold leading-none tracking-tight
     `);
-const dialogDescriptionVariants = cva(`
+const dialogDescriptionThemeVariants = cva(`
         text-sm text-muted-foreground
         select-none
     `);
-const dialogContentVariants = cva(`
+const dialogContentThemeVariants = cva(`
         flex-1 overflow-auto p-1
+        [scrollbar-color:var(--color-scrollbar-thumb)_var(--color-scrollbar-track)] [scrollbar-width:thin]
     `);
-const dialogFooterVariants = cva(`
-        flex flex-row
-        gap-2 px-4 py-2
-        border-t border-border
+const dialogFooterThemeVariants = cva(`
+        flex flex-row gap-2 px-4 py-2
         select-none
+        bg-surface-muted
+        border-t border-border-subtle
     `, {
     variants: {
         layout: {
@@ -185,108 +183,10 @@ const dialogFooterVariants = cva(`
     }
 });
 
-const dialogBaseThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return dialogBaseVariants;
-        default:
-            return dialogBaseVariants;
-    }
-};
-const dialogIconThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return dialogIconVariants;
-        default:
-            return dialogIconVariants;
-    }
-};
-const dialogBodyThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return dialogBodyVariants;
-        default:
-            return dialogBodyVariants;
-    }
-};
-const dialogContentContainerThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return dialogContentContainerVariants;
-        default:
-            return dialogContentContainerVariants;
-    }
-};
-const dialogHeaderThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return dialogHeaderVariants;
-        default:
-            return dialogHeaderVariants;
-    }
-};
-const dialogIconContainerThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return dialogIconContainerVariants;
-        default:
-            return dialogIconContainerVariants;
-    }
-};
-const dialogTitleContainerThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return dialogTitleContainerVariants;
-        default:
-            return dialogTitleContainerVariants;
-    }
-};
-const dialogCloseButtonContainerThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return dialogCloseButtonContainerVariants;
-        default:
-            return dialogCloseButtonContainerVariants;
-    }
-};
-const dialogTitleThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return dialogTitleVariants;
-        default:
-            return dialogTitleVariants;
-    }
-};
-const dialogDescriptionThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return dialogDescriptionVariants;
-        default:
-            return dialogDescriptionVariants;
-    }
-};
-const dialogContentThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return dialogContentVariants;
-        default:
-            return dialogContentVariants;
-    }
-};
-const dialogFooterThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return dialogFooterVariants;
-        default:
-            return dialogFooterVariants;
-    }
-};
-
 class DialogContentComponent {
     #hostElementRef;
     #iconMap;
     #injectedData;
-    #themeService;
     #trapFocus;
     constructor() {
         this.#hostElementRef = inject(ElementRef);
@@ -298,33 +198,27 @@ class DialogContentComponent {
             warning: { color: "var(--color-warning)", icon: LucideOctagonAlert }
         };
         this.#injectedData = inject(PopupDataInjectionToken);
-        this.#themeService = inject(ThemeService);
         this.#trapFocus = inject(CdkTrapFocus);
         this.baseClass = computed(() => {
-            const theme = this.#themeService.theme();
             const rounded = this.dialogData().rounded;
-            return dialogBaseThemeVariants(theme)({ rounded });
+            return dialogBaseThemeVariants({ rounded });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
         this.bodyClass = computed(() => {
-            const theme = this.#themeService.theme();
             const hasIcon = this.dialogData().type != null;
-            return dialogBodyThemeVariants(theme)({ hasIcon });
+            return dialogBodyThemeVariants({ hasIcon });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "bodyClass" }] : /* istanbul ignore next */ []));
         this.closeButtonContainerClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return dialogCloseButtonContainerThemeVariants(theme)();
+            return dialogCloseButtonContainerThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "closeButtonContainerClass" }] : /* istanbul ignore next */ []));
         this.contentClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return dialogContentThemeVariants(theme)();
+            return dialogContentThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "contentClass" }] : /* istanbul ignore next */ []));
         this.contentContainerClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return dialogContentContainerThemeVariants(theme)();
+            return dialogContentContainerThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "contentContainerClass" }] : /* istanbul ignore next */ []));
         this.describedById = computed(() => {
@@ -333,8 +227,7 @@ class DialogContentComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "describedById" }] : /* istanbul ignore next */ []));
         this.descriptionClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return dialogDescriptionThemeVariants(theme)();
+            return dialogDescriptionThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "descriptionClass" }] : /* istanbul ignore next */ []));
         this.descriptionId = createElementControlId();
@@ -342,15 +235,13 @@ class DialogContentComponent {
         ...(ngDevMode ? [{ debugName: "dialogData" }] : /* istanbul ignore next */ []));
         this.dialogReference = this.#injectedData.dialogReference;
         this.footerClass = computed(() => {
-            const theme = this.#themeService.theme();
             const layout = this.dialogData().actionsLayout;
             const rounded = this.dialogData().rounded;
-            return dialogFooterThemeVariants(theme)({ layout, rounded });
+            return dialogFooterThemeVariants({ layout, rounded });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "footerClass" }] : /* istanbul ignore next */ []));
         this.headerClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return dialogHeaderThemeVariants(theme)();
+            return dialogHeaderThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "headerClass" }] : /* istanbul ignore next */ []));
         this.headerId = createElementControlId();
@@ -360,14 +251,12 @@ class DialogContentComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
         this.iconClass = computed(() => {
-            const theme = this.#themeService.theme();
             const type = this.dialogData().type;
-            return dialogIconThemeVariants(theme)({ type });
+            return dialogIconThemeVariants({ type });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "iconClass" }] : /* istanbul ignore next */ []));
         this.iconContainerClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return dialogIconContainerThemeVariants(theme)();
+            return dialogIconContainerThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "iconContainerClass" }] : /* istanbul ignore next */ []));
         this.role = computed(() => {
@@ -376,13 +265,11 @@ class DialogContentComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));
         this.titleClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return dialogTitleThemeVariants(theme)();
+            return dialogTitleThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "titleClass" }] : /* istanbul ignore next */ []));
         this.titleContainerClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return dialogTitleContainerThemeVariants(theme)();
+            return dialogTitleContainerThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "titleContainerClass" }] : /* istanbul ignore next */ []));
         this.#trapFocus.autoCapture = true;

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

@@ -4,10 +4,9 @@ import { Directive, inject, DestroyRef, ElementRef, linkedSignal, computed, cont
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i1 from '@nanahoshi/mona-ui/dropdowns';
 import { DropdownListService, DropdownService, DropdownFooterTemplateDirective, DropdownGroupHeaderTemplateDirective, DropdownHeaderTemplateDirective, DropdownItemTemplateDirective, dropdownPopupThemeVariants, DropdownNoDataTemplateDirective, DropdownPrefixTemplateDirective, DropdownLiveRegionDirective, DropdownDataInputToken, DropdownPopupInputToken, DropdownDataHandlerDirective, DropdownListPopupHandlerDirective } from '@nanahoshi/mona-ui/dropdowns';
-import { createElementControlId, isTypeaheadKey, setupTypeahead } from '@nanahoshi/mona-ui/internal';
+import { themeControlSurfaceClasses, createElementControlId, isTypeaheadKey, setupTypeahead } from '@nanahoshi/mona-ui/internal';
 import { IndicatorIconComponent } from '@nanahoshi/mona-ui/internal/indicator-icon';
 import { ListService, ListComponent, ListItemTemplateDirective, ListGroupHeaderTemplateDirective, ListFooterTemplateDirective, ListHeaderTemplateDirective, ListNoDataTemplateDirective } from '@nanahoshi/mona-ui/internal/list';
-import { ThemeService } from '@nanahoshi/mona-ui/theme';
 import { Subject } from 'rxjs';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
@@ -23,32 +22,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }] });
 
-const dropdownListInputVariants = cva(`
+const dropdownListInputThemeVariants = cva(`
         inline-flex items-center
-
-        border border-input-border
-        bg-background outline-none
-        text-foreground shadow-xs
         cursor-pointer select-none
-
-        hover:bg-accent hover:text-accent-foreground
-        transition-[color,box-shadow,border] ease-in-out duration-300
-        focus-within:ring-1 focus-within:ring-primary/40
+        ${themeControlSurfaceClasses} text-foreground
+        border border-input-border shadow-(--shadow-control) outline-none
+        transition-[color,box-shadow,border] duration-(--mona-motion-standard) ease-in-out
+        data-[readonly='true']:cursor-default
+        hover:bg-hover active:bg-active
+        focus-within:border-focus-indicator focus-within:ring-2 focus-within:ring-focus-indicator/35
     `, {
     variants: {
         disabled: {
-            true: "pointer-events-none cursor-not-allowed opacity-50",
+            true: `
+                    pointer-events-none cursor-not-allowed
+                    bg-disabled-background text-disabled-foreground
+                    border-disabled-border shadow-none
+                `,
             false: ""
         },
         expanded: {
-            true: "ring-1 ring-primary/40",
+            true: "border-focus-indicator ring-2 ring-focus-indicator/35",
             false: ""
         },
         hasPrefix: {
             false: "ps-2"
         },
         invalid: {
-            true: "border-error ring-1 ring-error/40",
+            true: "border-error ring-2 ring-error/35 focus-within:border-error focus-within:ring-error/35",
             false: ""
         },
         rounded: {
@@ -63,41 +64,23 @@ const dropdownListInputVariants = cva(`
             medium: "h-9 text-sm",
             small: "h-8 text-xs"
         }
-    }
+    },
+    compoundVariants: [
+        {
+            expanded: true,
+            invalid: true,
+            class: "border-error ring-error/35"
+        }
+    ]
 });
-const dropdownListValueContainerVariants = cva(`overflow-hidden h-full w-full flex items-center`, {
+const dropdownListValueContainerThemeVariants = cva(`flex h-full w-full items-center overflow-hidden`, {
     variants: {
         hasTemplate: {
             false: "[&>span]:truncate [&>span]:items-center [&>span]:inline-block"
         }
     }
 });
-const dropdownListAffixContainerVariants = cva(`h-full flex flex-none items-center justify-center`);
-
-const dropdownListAffixContainerThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return dropdownListAffixContainerVariants;
-        default:
-            return dropdownListAffixContainerVariants;
-    }
-};
-const dropdownListInputThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return dropdownListInputVariants;
-        default:
-            return dropdownListInputVariants;
-    }
-};
-const dropdownListValueContainerThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return dropdownListValueContainerVariants;
-        default:
-            return dropdownListValueContainerVariants;
-    }
-};
+const dropdownListAffixContainerThemeVariants = cva(`flex h-full flex-none items-center justify-center`);
 
 class DropdownListComponent {
     #destroyRef;
@@ -106,7 +89,6 @@ class DropdownListComponent {
     #hostElementRef;
     #navigatedValue;
     #listService;
-    #themeService;
     #typeaheadKey;
     constructor() {
         this.#destroyRef = inject(DestroyRef);
@@ -116,7 +98,6 @@ class DropdownListComponent {
         this.#navigatedValue = linkedSignal(() => this.value(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#navigatedValue" }] : /* istanbul ignore next */ []));
         this.#listService = inject(ListService);
-        this.#themeService = inject(ThemeService);
         this.#typeaheadKey = new Subject();
         this.activeDescendant = computed(() => {
             const highlightedItem = this.#listService.highlightedItem();
@@ -124,19 +105,17 @@ class DropdownListComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "activeDescendant" }] : /* istanbul ignore next */ []));
         this.affixClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return dropdownListAffixContainerThemeVariants(theme)();
+            return dropdownListAffixContainerThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "affixClass" }] : /* istanbul ignore next */ []));
         this.baseClass = computed(() => {
-            const theme = this.#themeService.theme();
             const disabled = this.disabled();
             const expanded = this.expanded();
             const hasPrefix = this.prefixTemplate() != null;
             const invalid = this.invalidState();
             const rounded = this.rounded();
             const size = this.size();
-            const classes = dropdownListInputThemeVariants(theme)({
+            const classes = dropdownListInputThemeVariants({
                 disabled,
                 expanded,
                 hasPrefix,
@@ -162,11 +141,10 @@ class DropdownListComponent {
         ...(ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []));
         this.listId = createElementControlId();
         this.listPopupClass = computed(() => {
-            const theme = this.#themeService.theme();
             const rounded = this.rounded();
             const size = this.size();
             const userClass = this.popupClass();
-            const variantClass = dropdownPopupThemeVariants(theme)({ rounded, size });
+            const variantClass = dropdownPopupThemeVariants({ rounded, size });
             return twMerge(variantClass, userClass);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "listPopupClass" }] : /* istanbul ignore next */ []));
@@ -188,9 +166,8 @@ class DropdownListComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "selectedListItem" }] : /* istanbul ignore next */ []));
         this.valueContainerClass = computed(() => {
-            const theme = this.#themeService.theme();
             const hasTemplate = this.valueTemplate() != null;
-            return dropdownListValueContainerThemeVariants(theme)({ hasTemplate });
+            return dropdownListValueContainerThemeVariants({ hasTemplate });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "valueContainerClass" }] : /* istanbul ignore next */ []));
         this.valueTemplate = contentChild(DropdownListValueTemplateDirective, { ...(ngDevMode ? { debugName: "valueTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
@@ -537,7 +514,7 @@ class DropdownListComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DropdownListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: DropdownListComponent, isStandalone: true, selector: "mona-dropdown-list", 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 }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, itemDisabled: { classPropertyName: "itemDisabled", publicName: "itemDisabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, popupClass: { classPropertyName: "popupClass", publicName: "popupClass", isSignal: true, isRequired: false, transformFunction: null }, popupHeight: { classPropertyName: "popupHeight", publicName: "popupHeight", isSignal: true, isRequired: false, transformFunction: null }, popupWidth: { classPropertyName: "popupWidth", publicName: "popupWidth", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, textField: { classPropertyName: "textField", publicName: "textField", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, valueField: { classPropertyName: "valueField", publicName: "valueField", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close", closed: "closed", disabled: "disabledChange", open: "open", opened: "opened", touch: "touch", value: "valueChange" }, host: { listeners: { "blur": "onBlur()" }, properties: { "attr.aria-activedescendant": "activeDescendant()", "attr.aria-busy": "loading() ? 'true' : undefined", "attr.aria-controls": "listId", "attr.aria-disabled": "disabled() ? true : undefined", "attr.aria-expanded": "expanded()", "attr.aria-haspopup": "'listbox'", "attr.aria-invalid": "invalidState() ? true : undefined", "attr.aria-label": "effectiveAriaLabel() || null", "attr.aria-labelledby": "ariaLabelledBy()", "attr.aria-readonly": "readonly() ? true : undefined", "attr.aria-required": "required() ? true : undefined", "attr.data-invalid": "invalidState() || null", "attr.role": "'combobox'", "attr.tabindex": "disabled() ? null : 0", "class": "baseClass()" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: DropdownListComponent, isStandalone: true, selector: "mona-dropdown-list", 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 }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, itemDisabled: { classPropertyName: "itemDisabled", publicName: "itemDisabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, popupClass: { classPropertyName: "popupClass", publicName: "popupClass", isSignal: true, isRequired: false, transformFunction: null }, popupHeight: { classPropertyName: "popupHeight", publicName: "popupHeight", isSignal: true, isRequired: false, transformFunction: null }, popupWidth: { classPropertyName: "popupWidth", publicName: "popupWidth", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, textField: { classPropertyName: "textField", publicName: "textField", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, valueField: { classPropertyName: "valueField", publicName: "valueField", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close", closed: "closed", disabled: "disabledChange", open: "open", opened: "opened", touch: "touch", value: "valueChange" }, host: { listeners: { "blur": "onBlur()" }, properties: { "attr.aria-activedescendant": "activeDescendant()", "attr.aria-busy": "loading() ? 'true' : undefined", "attr.aria-controls": "listId", "attr.aria-disabled": "disabled() ? true : undefined", "attr.aria-expanded": "expanded()", "attr.aria-haspopup": "'listbox'", "attr.aria-invalid": "invalidState() ? true : undefined", "attr.aria-label": "effectiveAriaLabel() || null", "attr.aria-labelledby": "ariaLabelledBy()", "attr.aria-readonly": "readonly() ? true : undefined", "attr.aria-required": "required() ? true : undefined", "attr.data-disabled": "disabled() || null", "attr.data-invalid": "invalidState() || null", "attr.data-readonly": "readonly() || null", "attr.role": "'combobox'", "attr.tabindex": "disabled() ? null : 0", "class": "baseClass()" } }, providers: [
             ListService,
             DropdownService,
             DropdownListService,
@@ -591,7 +568,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         "[attr.aria-labelledby]": "ariaLabelledBy()",
                         "[attr.aria-readonly]": "readonly() ? true : undefined",
                         "[attr.aria-required]": "required() ? true : undefined",
+                        "[attr.data-disabled]": "disabled() || null",
                         "[attr.data-invalid]": "invalidState() || null",
+                        "[attr.data-readonly]": "readonly() || null",
                         "[attr.role]": "'combobox'",
                         "[attr.tabindex]": "disabled() ? null : 0",
                         "[class]": "baseClass()",

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

@@ -7,6 +7,7 @@ import { Subject, takeUntil, take, filter, switchMap, fromEvent } from 'rxjs';
 import { ConnectionPositionPair } from '@angular/cdk/overlay';
 import { PopupService, dropdownPopupAnimation } from '@nanahoshi/mona-ui/popup';
 import { cva } from 'class-variance-authority';
+import { themeOverlaySurfaceClasses } from '@nanahoshi/mona-ui/internal';
 
 const DropdownDataInputToken = new InjectionToken("DROPDOWN_DATA_INPUT");
 
@@ -659,10 +660,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }] });
 
-const dropdownPopupVariants = cva(`
-        bg-background shadow-md text-foreground
-        border border-input-border
+const dropdownPopupThemeVariants = cva(`
         h-full max-h-64 overflow-auto
+        [scrollbar-color:var(--color-scrollbar-thumb)_var(--color-scrollbar-track)] [scrollbar-width:thin]
+        text-foreground
+        ${themeOverlaySurfaceClasses}
+        [&_mona-list]:[background-color:var(--mona-dropdown-popup-list-background,var(--mona-list-background))]!
+        border border-border shadow-(--shadow-overlay)
     `, {
     variants: {
         rounded: {
@@ -684,15 +688,6 @@ const dropdownPopupVariants = cva(`
     }
 });
 
-const dropdownPopupThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return dropdownPopupVariants;
-        default:
-            return dropdownPopupVariants;
-    }
-};
-
 /**
  * Generated bundle index. Do not edit.
  */