@k8ordo/ui 2.0.0 → 2.1.0

package/dist/components/overlays/dropdown-menu/sub-menu.mjs

@@ -1,20 +1,20 @@
 "use client";
-import { cn } from "../../../helpers/cn.mjs";
 import { mergeRefs } from "../../../helpers/merge-refs.mjs";
+import { ChevronIcon } from "../../icons/lucide.mjs";
 import { useCanHover } from "../_internal/use-can-hover.mjs";
 import { useHoverIntent } from "../_internal/use-hover-intent.mjs";
 import { useListNavigation } from "../_internal/use-list-navigation.mjs";
 import { useOpenContext, usePopoverContext } from "../popover/hooks.mjs";
 import { Popover } from "../popover/index.mjs";
-import { ChevronIcon } from "../../icons/lucide.mjs";
 import { MenuContextProvider, useMenuContext } from "./hooks.mjs";
-import { cloneWithIndex, itemClass, panelClass } from "./shared.mjs";
+import { itemClass, panelClass } from "./shared.mjs";
 import { useSafeTriangle } from "./use-safe-triangle.mjs";
-import { useEffect, useRef, useState } from "react";
+import sub_menu_module_default from "./sub-menu.module.mjs";
+import { clsx } from "clsx";
+import { useEffect, useId, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/overlays/dropdown-menu/sub-menu.tsx
 const SUBMENU_CLOSE_DELAY = 150;
-const safeTriangleClass = cn("after:absolute after:z-10", "after:top-(--safe-top) after:left-(--safe-left)", "after:h-(--safe-height) after:w-(--safe-width)", "after:[clip-path:var(--safe-clip)]");
 const NAVIGATION_KEYS = /* @__PURE__ */ new Set([
 	"ArrowDown",
 	"ArrowUp",
@@ -22,21 +22,21 @@ const NAVIGATION_KEYS = /* @__PURE__ */ new Set([
 	"Home",
 	"End"
 ]);
-const SubMenu = ({ label, children, index = 0 }) => {
+const SubMenu = ({ label, children }) => {
 	const { isOpen: isParentOpen } = useOpenContext();
 	return /* @__PURE__ */ jsx(Popover.Root, {
 		placement: "right-start",
 		trapFocus: false,
 		role: "menu",
 		children: /* @__PURE__ */ jsx(SubMenuInner, {
-			index,
 			isParentOpen,
 			label,
 			children
 		})
 	});
 };
-const SubMenuInner = ({ label, index, isParentOpen, children }) => {
+const SubMenuInner = ({ label, isParentOpen, children }) => {
+	const id = useId();
 	const parentMenu = useMenuContext();
 	const popover = usePopoverContext();
 	const canHover = useCanHover("(hover: hover) and (pointer: fine)");
@@ -48,11 +48,11 @@ const SubMenuInner = ({ label, index, isParentOpen, children }) => {
 		closeDelay: SUBMENU_CLOSE_DELAY,
 		enabled: canHover
 	});
-	const [activeIndex, setActiveIndex] = useState(null);
+	const [activeId, setActiveId] = useState(null);
 	const nav = useListNavigation({
 		open: popover.isOpen,
-		activeIndex,
-		setActiveIndex,
+		activeId,
+		setActiveId,
 		loop: true,
 		autoActivateOnOpen: false
 	});
@@ -81,7 +81,7 @@ const SubMenuInner = ({ label, index, isParentOpen, children }) => {
 	const openByKeyboard = () => {
 		openedByKeyboardRef.current = true;
 		popover.onOpen();
-		setActiveIndex(0);
+		nav.activateFirst();
 	};
 	const handleTriggerKeyDown = (event) => {
 		if (event.key === "Enter" || event.key === " " || event.key === "ArrowRight") {
@@ -101,12 +101,12 @@ const SubMenuInner = ({ label, index, isParentOpen, children }) => {
 		if (NAVIGATION_KEYS.has(event.key)) event.stopPropagation();
 	};
 	const updateSafeTriangle = useSafeTriangle(panelRef, popover.isOpen && canHover);
-	const parentItemProps = parentMenu.getItemProps(index);
+	const parentItemProps = parentMenu.getItemProps(id);
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("button", {
 		"aria-controls": popover.isOpen ? `${popover.rootId}_list` : void 0,
 		"aria-expanded": popover.isOpen,
 		"aria-haspopup": "menu",
-		className: cn(itemClass, "relative flex items-center justify-between gap-2", popover.isOpen && "bg-bg-subtle", popover.isOpen && canHover && safeTriangleClass),
+		className: clsx(itemClass, sub_menu_module_default.trigger, popover.isOpen && sub_menu_module_default.open, popover.isOpen && canHover && sub_menu_module_default.safeTriangle),
 		"data-submenu-trigger": "",
 		onClick: popover.onOpen,
 		onKeyDown: handleTriggerKeyDown,
@@ -135,7 +135,7 @@ const SubMenuInner = ({ label, index, isParentOpen, children }) => {
 			ref: mergeRefs(props.ref, panelRef),
 			role: "menu",
 			tabIndex: -1,
-			children: cloneWithIndex(children)
+			children
 		}) })
 	})] });
 };

package/dist/components/overlays/dropdown-menu/sub-menu.module.mjs

@@ -0,0 +1,9 @@
+import './sub-menu.css';
+//#region src/components/overlays/dropdown-menu/sub-menu.module.css
+var sub_menu_module_default = {
+	"open": "_3Nd7bW_open",
+	"safeTriangle": "_3Nd7bW_safeTriangle",
+	"trigger": "_3Nd7bW_trigger"
+};
+//#endregion
+export { sub_menu_module_default as default };

package/dist/components/overlays/dropdown-menu/use-safe-triangle.d.mts

@@ -13,6 +13,5 @@ import { PointerEvent, RefObject } from "react";
  *
  * 参考: https://ics.media/entry/260803/
  */
-declare const useSafeTriangle: (panelRef: RefObject<HTMLElement | null>, enabled: boolean) => ((event: PointerEvent<HTMLElement>) => void);
-//#endregion
-export { useSafeTriangle };
+export declare const useSafeTriangle: (panelRef: RefObject<HTMLElement | null>, enabled: boolean) => ((event: PointerEvent<HTMLElement>) => void);
+//#endregion

package/dist/components/overlays/list-box/hooks.d.mts

@@ -7,7 +7,7 @@ type MenuContext = ListNavigation & {
   handleSelect: (index: number) => void;
 };
 declare const MenuContextProvider: import("react").Context<MenuContext | null>;
-declare const useMenuContent: () => {
+export declare const useMenuContent: () => {
   options: readonly Readonly<{
     value: string;
     label: string;
@@ -17,10 +17,11 @@ declare const useMenuContent: () => {
     onKeyDown: (event: import("react").KeyboardEvent<HTMLElement>) => void;
   };
 };
-declare const useMenuItem: (index: number) => {
+export declare const useMenuItem: (index: number, id: string) => {
   selected: boolean;
   props: {
-    ref: (node: HTMLElement | null) => void;
+    id: string;
+    ref: (node: HTMLElement | null) => (() => void) | undefined;
     tabIndex: number;
     onFocus: () => void;
     role: 'option';
@@ -28,8 +29,8 @@ declare const useMenuItem: (index: number) => {
     onClick: () => void;
   };
 };
-declare const useMenuTrigger: () => {
+export declare const useMenuTrigger: () => {
   valueLabel: string;
 };
 //#endregion
-export { MenuContextProvider, useMenuContent, useMenuItem, useMenuTrigger };
+export { MenuContextProvider };

package/dist/components/overlays/list-box/hooks.mjs

@@ -1,5 +1,5 @@
 "use client";
-import { useMessages } from "../../../i18n/context.mjs";
+import { getMessages } from "../../../i18n/current.mjs";
 import { createSafeContext } from "../../../helpers/create-safe-context.mjs";
 import { useOpenContext } from "../popover/hooks.mjs";
 import { useMemo } from "react";
@@ -13,7 +13,7 @@ const useMenuContent = () => {
 		contentProps: menu.getContentProps()
 	}), [menu]);
 };
-const useMenuItem = (index) => {
+const useMenuItem = (index, id) => {
 	const menu = useMenuContext();
 	const { onClose } = useOpenContext();
 	return useMemo(() => ({
@@ -21,13 +21,14 @@ const useMenuItem = (index) => {
 		props: {
 			role: "option",
 			"aria-selected": menu.selectedIndex === index,
-			...menu.getItemProps(index),
+			...menu.getItemProps(id),
 			onClick: () => {
 				menu.handleSelect(index);
 				onClose();
 			}
 		}
 	}), [
+		id,
 		index,
 		menu,
 		onClose
@@ -35,7 +36,7 @@ const useMenuItem = (index) => {
 };
 const useMenuTrigger = () => {
 	const menu = useMenuContext();
-	const defaultLabel = useMessages().listBoxPlaceholder;
+	const defaultLabel = getMessages().listBoxPlaceholder;
 	const valueLabel = menu.selectedIndex < 0 ? defaultLabel : menu.options[menu.selectedIndex]?.label ?? defaultLabel;
 	return useMemo(() => ({ valueLabel }), [valueLabel]);
 };

package/dist/components/overlays/list-box/index.d.mts

@@ -3,7 +3,7 @@ import { Option, Placement } from "../../../types/variables.mjs";
 import "../../index.mjs";
 import "../../../index.mjs";
 //#region src/components/overlays/list-box/index.d.ts
-declare const ListBox: {
+export declare const ListBox: {
   readonly Root: import("react").FC<import("react").PropsWithChildren<{
     placement?: Placement;
     options: readonly Option[];
@@ -24,5 +24,4 @@ declare const ListBox: {
     label?: string;
   }>;
 };
-//#endregion
-export { ListBox };
+//#endregion

package/dist/components/overlays/list-box/list-box.css

@@ -0,0 +1,74 @@
+@layer properties, theme, base;
+
+@layer components {
+  .jzknNW_panel {
+    max-height: calc(var(--spacing) * 48);
+    min-width: calc(var(--spacing) * 40);
+    border-radius: var(--radius-lg);
+    border-style: solid;
+    border-width: 1px;
+    border-color: var(--color-border-subtle);
+    background-color: var(--color-bg-raised);
+    padding-block: calc(var(--spacing) * 2);
+    box-shadow: var(--shadow-md);
+    flex-direction: column;
+    display: flex;
+
+    @container style(--writing: vertical) {
+      min-width: 0;
+      max-height: none;
+      max-width: calc(var(--spacing) * 48);
+      min-height: calc(var(--spacing) * 40);
+    }
+  }
+
+  .jzknNW_list {
+    flex-direction: column;
+    min-width: 0;
+    min-height: 0;
+    display: flex;
+    overflow-y: auto;
+
+    @container style(--writing: vertical) {
+      overflow: auto visible;
+    }
+  }
+
+  .jzknNW_item {
+    width: 100%;
+    padding-inline: calc(var(--spacing) * 3);
+    padding-block: calc(var(--spacing) * 2);
+    text-align: left;
+    outline-offset: -2px;
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
+    transition-duration: var(--duration-fast);
+    transition-timing-function: var(--easing-out);
+    outline-color: #0000;
+    justify-content: space-between;
+    align-items: center;
+    display: flex;
+
+    &:focus-visible {
+      background-color: var(--color-bg-subtle);
+      border-color: #0000;
+      outline-width: 2px;
+      outline-style: solid;
+    }
+
+    @media (prefers-contrast: more) {
+      outline-color: var(--color-border-base);
+    }
+  }
+
+  @media (hover: hover) {
+    .jzknNW_item:hover {
+      background-color: var(--color-bg-subtle);
+    }
+  }
+
+  .jzknNW_check {
+    color: var(--color-fg-success);
+  }
+}
+
+@layer utilities;

package/dist/components/overlays/list-box/list-box.d.mts

@@ -3,24 +3,23 @@ import "../../buttons/button/index.mjs";
 import { Option, Placement } from "../../../types/variables.mjs";
 import { ComponentProps, FC, PropsWithChildren, ReactElement } from "react";
 //#region src/components/overlays/list-box/list-box.d.ts
-declare const Root: FC<PropsWithChildren<{
+export declare const Root: FC<PropsWithChildren<{
   placement?: Placement;
   options: readonly Option[];
   value?: Option['value'];
   defaultValue?: Option['value'];
   onChange?: (value: Option['value']) => void;
 }>>;
-declare const Content: FC<{
+export declare const Content: FC<{
   helpContent?: ReactElement;
 }>;
-declare const Trigger: FC<{
+export declare const Trigger: FC<{
   size?: ComponentProps<typeof Button>['size'];
   label?: string;
 }>;
-declare const IconTrigger: FC<{
+export declare const IconTrigger: FC<{
   size?: ComponentProps<typeof Button>['size'];
   icon: ReactElement;
   label?: string;
 }>;
-//#endregion
-export { Content, IconTrigger, Root, Trigger };
+//#endregion

package/dist/components/overlays/list-box/list-box.mjs

@@ -1,13 +1,14 @@
 "use client";
-import { cn } from "../../../helpers/cn.mjs";
+import sr_only_module_default from "../../_internal/sr-only.module.mjs";
 import { Button } from "../../buttons/button/button.mjs";
+import { CheckIcon, ChevronIcon } from "../../icons/lucide.mjs";
 import { useListNavigation } from "../_internal/use-list-navigation.mjs";
 import { useControllableState } from "../../../hooks/controllable-state/index.mjs";
 import { useOpenContext } from "../popover/hooks.mjs";
 import { Popover } from "../popover/index.mjs";
 import { IconButton } from "../../buttons/icon-button/icon-button.mjs";
-import { CheckIcon, ChevronIcon } from "../../icons/lucide.mjs";
 import { MenuContextProvider, useMenuContent, useMenuItem, useMenuTrigger } from "./hooks.mjs";
+import list_box_module_default from "./list-box.module.mjs";
 import { useId, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/overlays/list-box/list-box.tsx
@@ -34,11 +35,11 @@ const Root = ({ children, placement = "bottom", options, value, defaultValue, on
 const MenuProvider = ({ children, options, onChange, value }) => {
 	const { isOpen } = useOpenContext();
 	const selectedIndex = options.findIndex((option) => option.value === value);
-	const [activeIndex, setActiveIndex] = useState(null);
+	const [activeId, setActiveId] = useState(null);
 	const nav = useListNavigation({
 		open: isOpen,
-		activeIndex,
-		setActiveIndex,
+		activeId,
+		setActiveId,
 		selectedIndex,
 		loop: true
 	});
@@ -60,7 +61,7 @@ const Content = ({ helpContent }) => {
 	const { options, contentProps } = useMenuContent();
 	const helpId = useId();
 	return /* @__PURE__ */ jsx(Popover.Content, { renderItem: ({ ref, ...listProps }) => /* @__PURE__ */ jsxs("div", {
-		className: "bg-bg-raised border-border-subtle vertical:max-h-none vertical:min-w-0 vertical:max-w-48 vertical:min-h-40 flex max-h-48 min-w-40 flex-col rounded-lg border py-2 shadow-md",
+		className: list_box_module_default.panel,
 		ref,
 		children: [helpContent === void 0 ? null : /* @__PURE__ */ jsx("div", {
 			id: helpId,
@@ -69,7 +70,7 @@ const Content = ({ helpContent }) => {
 			...listProps,
 			...contentProps,
 			"aria-describedby": helpContent === void 0 ? void 0 : helpId,
-			className: "vertical:overflow-x-auto vertical:overflow-y-visible flex min-h-0 min-w-0 flex-col overflow-y-auto",
+			className: list_box_module_default.list,
 			children: options.map(({ value, label }, idx) => /* @__PURE__ */ jsx(Item, {
 				index: idx,
 				label
@@ -78,13 +79,14 @@ const Content = ({ helpContent }) => {
 	}) });
 };
 const Item = ({ label, index }) => {
-	const { props, selected } = useMenuItem(index);
+	const id = useId();
+	const { props, selected } = useMenuItem(index, id);
 	return /* @__PURE__ */ jsxs("button", {
-		className: cn("flex w-full items-center justify-between px-3 py-2 text-left transition-colors", "hover:bg-bg-subtle", "focus-visible:border-transparent focus-visible:bg-bg-subtle focus-visible:outline-hidden"),
+		className: list_box_module_default.item,
 		type: "button",
 		...props,
 		children: [label, selected && /* @__PURE__ */ jsx("span", {
-			className: "text-fg-success",
+			className: list_box_module_default.check,
 			children: /* @__PURE__ */ jsx(CheckIcon, {})
 		})]
 	});
@@ -103,7 +105,7 @@ const useTriggerLabels = (label) => {
 const Trigger = ({ size = "md", label }) => {
 	const { valueLabel, labelId, valueId, labelledBy } = useTriggerLabels(label);
 	return /* @__PURE__ */ jsx(Popover.Trigger, { renderItem: (props) => /* @__PURE__ */ jsxs(Fragment$1, { children: [label !== void 0 && /* @__PURE__ */ jsx("span", {
-		className: "sr-only",
+		className: sr_only_module_default.srOnly,
 		id: labelId,
 		children: label
 	}), /* @__PURE__ */ jsx(Button, {
@@ -124,7 +126,7 @@ const Trigger = ({ size = "md", label }) => {
 const IconTrigger = ({ size = "md", icon, label }) => {
 	const { valueLabel, labelId, valueId, labelledBy } = useTriggerLabels(label);
 	return /* @__PURE__ */ jsx(Popover.Trigger, { renderItem: (props) => /* @__PURE__ */ jsxs(Fragment$1, { children: [label !== void 0 && /* @__PURE__ */ jsx("span", {
-		className: "sr-only",
+		className: sr_only_module_default.srOnly,
 		id: labelId,
 		children: label
 	}), /* @__PURE__ */ jsxs(IconButton, {
@@ -134,7 +136,7 @@ const IconTrigger = ({ size = "md", icon, label }) => {
 		tooltipDisabled: true,
 		...props,
 		children: [icon, /* @__PURE__ */ jsx("span", {
-			className: "sr-only",
+			className: sr_only_module_default.srOnly,
 			id: valueId,
 			children: valueLabel
 		})]

package/dist/components/overlays/list-box/list-box.module.mjs

@@ -0,0 +1,10 @@
+import './list-box.css';
+//#region src/components/overlays/list-box/list-box.module.css
+var list_box_module_default = {
+	"check": "jzknNW_check",
+	"item": "jzknNW_item",
+	"list": "jzknNW_list",
+	"panel": "jzknNW_panel"
+};
+//#endregion
+export { list_box_module_default as default };

package/dist/components/overlays/modal/modal.css

@@ -0,0 +1,119 @@
+@layer properties, theme, base;
+
+@layer components {
+  .T8UDzW_root {
+    z-index: var(--z-index-modal);
+    background-color: var(--color-bg-raised);
+    color: var(--color-fg-base);
+    box-shadow: var(--shadow-md);
+    opacity: 0;
+    transition-property: opacity, scale, translate;
+    transition-duration: var(--duration-moderate);
+    transition-timing-function: var(--easing-in-out);
+
+    &[open] {
+      opacity: 1;
+    }
+
+    &::backdrop {
+      background-color: var(--color-back-drop);
+      opacity: 0;
+      transition-property: opacity;
+      transition-duration: var(--duration-moderate);
+      transition-timing-function: var(--easing-in-out);
+    }
+
+    &[open]::backdrop {
+      opacity: 1;
+    }
+  }
+
+  @starting-style {
+    .T8UDzW_root[open], .T8UDzW_root[open]::backdrop {
+      opacity: 0;
+    }
+  }
+
+  .T8UDzW_center {
+    max-height: calc(var(--spacing) * 128);
+    border-radius: var(--radius-lg);
+    width: 83.3333%;
+    max-width: 42rem;
+    margin: auto;
+    scale: .9;
+
+    &[open] {
+      scale: 1;
+    }
+
+    @container style(--writing: vertical) {
+      height: 83.3333%;
+      max-height: calc(var(--spacing) * 168);
+      width: auto;
+      max-width: 32rem;
+    }
+  }
+
+  .T8UDzW_bottom {
+    border-top-left-radius: var(--radius-lg);
+    border-top-right-radius: var(--radius-lg);
+    width: 100vw;
+    max-width: 100vw;
+    margin-top: auto;
+    translate: 0 100%;
+  }
+
+  .T8UDzW_right {
+    border-top-left-radius: var(--radius-lg);
+    border-bottom-left-radius: var(--radius-lg);
+    width: 100vw;
+    max-width: 24rem;
+    height: 100svh;
+    max-height: none;
+    transition-duration: var(--duration-slow);
+    margin-left: auto;
+    translate: 100%;
+  }
+
+  .T8UDzW_left {
+    border-top-right-radius: var(--radius-lg);
+    border-bottom-right-radius: var(--radius-lg);
+    width: 100vw;
+    max-width: 24rem;
+    height: 100svh;
+    max-height: none;
+    transition-duration: var(--duration-slow);
+    margin-right: auto;
+    translate: -100%;
+  }
+
+  .T8UDzW_bottom[open], .T8UDzW_right[open], .T8UDzW_left[open] {
+    translate: 0;
+  }
+
+  @starting-style {
+    .T8UDzW_center[open] {
+      scale: .9;
+    }
+
+    .T8UDzW_bottom[open] {
+      translate: 0 100%;
+    }
+
+    .T8UDzW_right[open] {
+      translate: 100%;
+    }
+
+    .T8UDzW_left[open] {
+      translate: -100%;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .T8UDzW_root, .T8UDzW_root::backdrop {
+      transition: none;
+    }
+  }
+}
+
+@layer utilities;

package/dist/components/overlays/modal/modal.d.mts

@@ -1,7 +1,7 @@
 import { ModalSide } from "../../../types/variables.mjs";
 import { FC, PropsWithChildren, Ref } from "react";
 //#region src/components/overlays/modal/modal.d.ts
-declare const Modal: FC<PropsWithChildren<{
+export declare const Modal: FC<PropsWithChildren<{
   ref?: Ref<HTMLDialogElement>;
   side?: ModalSide;
   defaultOpen?: boolean;
@@ -11,5 +11,4 @@ declare const Modal: FC<PropsWithChildren<{
   'aria-labelledby'?: string;
   'aria-describedby'?: string;
 }>>;
-//#endregion
-export { Modal };
+//#endregion

package/dist/components/overlays/modal/modal.mjs

@@ -1,12 +1,20 @@
 "use client";
-import { cn } from "../../../helpers/cn.mjs";
 import { mergeRefs } from "../../../helpers/merge-refs.mjs";
+import high_contrast_module_default from "../../_internal/high-contrast.module.mjs";
 import { ToastProvider } from "../../feedback/toast/provider.mjs";
-import { ModalDialogProvider } from "../_internal/modal-dialog-context.mjs";
 import { PortalRootProvider } from "../../providers/portal-root.mjs";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { ModalDialogProvider } from "../_internal/modal-dialog-context.mjs";
+import modal_module_default from "./modal.module.mjs";
+import { clsx } from "clsx";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/overlays/modal/modal.tsx
+const SIDE = {
+	center: modal_module_default.center,
+	bottom: modal_module_default.bottom,
+	right: modal_module_default.right,
+	left: modal_module_default.left
+};
 const Modal = ({ ref, side = "center", defaultOpen, isOpen, onClose, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, children }) => {
 	const dialogRef = useRef(null);
 	const mergedRef = useMemo(() => mergeRefs(dialogRef, ref), [ref]);
@@ -14,11 +22,6 @@ const Modal = ({ ref, side = "center", defaultOpen, isOpen, onClose, "aria-label
 	const [registeredLabelledBy, setRegisteredLabelledBy] = useState(void 0);
 	const [registeredDescribedBy, setRegisteredDescribedBy] = useState(void 0);
 	const realDialogOpen = isOpen === true || isOpen === false ? isOpen : dialogOpen;
-	const realOnClose = useCallback(() => {
-		onClose?.();
-		if (isOpen === void 0) return;
-		setDialogOpen(false);
-	}, [isOpen, onClose]);
 	const modalDialogContext = useMemo(() => ({
 		registerLabelledBy: setRegisteredLabelledBy,
 		registerDescribedBy: setRegisteredDescribedBy
@@ -49,11 +52,11 @@ const Modal = ({ ref, side = "center", defaultOpen, isOpen, onClose, "aria-label
 		"aria-describedby": describedBy,
 		"aria-label": ariaLabel,
 		"aria-labelledby": labelledBy,
-		className: cn("ao-modal bg-bg-raised text-fg-base z-modal shadow-md backdrop:bg-back-drop", side === "center" && "ao-modal-center m-auto max-h-128 w-5/6 max-w-2xl rounded-lg vertical:h-5/6 vertical:max-h-168 vertical:w-auto vertical:max-w-lg", side === "bottom" && "ao-modal-bottom mt-auto w-screen max-w-screen rounded-t-lg", side === "right" && "ao-modal-right ml-auto h-svh max-h-none w-screen max-w-sm rounded-l-lg", side === "left" && "ao-modal-left mr-auto h-svh max-h-none w-screen max-w-sm rounded-r-lg"),
+		className: clsx(modal_module_default.root, high_contrast_module_default.edge, SIDE[side]),
 		onClick: (e) => {
-			if (e.target === e.currentTarget) dialogRef.current?.close();
+			if (e.target === e.currentTarget && dialogRef.current) dialogRef.current.close();
 		},
-		onClose: realOnClose,
+		onClose,
 		ref: mergedRef,
 		children: /* @__PURE__ */ jsx(ModalDialogProvider, {
 			value: modalDialogContext,

package/dist/components/overlays/modal/modal.module.mjs

@@ -0,0 +1,11 @@
+import './modal.css';
+//#region src/components/overlays/modal/modal.module.css
+var modal_module_default = {
+	"bottom": "T8UDzW_bottom",
+	"center": "T8UDzW_center",
+	"left": "T8UDzW_left",
+	"right": "T8UDzW_right",
+	"root": "T8UDzW_root"
+};
+//#endregion
+export { modal_module_default as default };

package/dist/components/overlays/popover/anchor-positioning.d.mts

@@ -5,7 +5,7 @@ import { CSSProperties } from "react";
  * CSS Anchor Positioning による配置ヘルパー。
  *
  * placement を position-area / position-try-fallbacks / 対向辺マージン（offset 相当）へ
- * 変換する。旧 floating-ui のミドルウェア（offset / flip / autoUpdate）の置き換え。
+ * 変換する。
  *
  * 注意: CSS Anchor Positioning は Baseline newly available（2026-01）で、
  * 縦書き / RTL のインライン軸補正にエンジン差（既知の interop バグ）がある。
@@ -16,11 +16,10 @@ type AnchorCSSProperties = CSSProperties & {
   positionTryFallbacks?: string;
   '--ao-anchor'?: string;
 };
-declare const toAnchorName: (id: string) => string;
+export declare const toAnchorName: (id: string) => string;
 /**
  * Popover content（位置決め対象）に適用する style。
  * `flipDisabled` のときは position-try-fallbacks を付けず、はみ出しても反転しない。
  */
-declare const getContentAnchorStyle: (anchorName: string, placement: Placement, flipDisabled: boolean) => AnchorCSSProperties;
-//#endregion
-export { getContentAnchorStyle, toAnchorName };
+export declare const getContentAnchorStyle: (anchorName: string, placement: Placement, flipDisabled: boolean) => AnchorCSSProperties;
+//#endregion

package/dist/components/overlays/popover/escape-stack.d.mts

@@ -2,6 +2,5 @@
 /**
  * ポップオーバーを最上位レイヤーとして積む。戻り値を呼ぶと取り除かれる。
  */
-declare const pushEscapeLayer: (close: () => void) => (() => void);
-//#endregion
-export { pushEscapeLayer };
+export declare const pushEscapeLayer: (close: () => void) => (() => void);
+//#endregion