@k8o/arte-odyssey 5.0.4 → 6.0.0

package/dist/components/buttons/button/button.d.mts

@@ -4,7 +4,7 @@ import { FC, HTMLProps, ReactNode } from "react";
 declare const Button: FC<{
   type?: 'button' | 'submit';
   size?: 'sm' | 'md' | 'lg';
-  color?: 'primary' | 'gray';
+  color?: 'primary' | 'secondary' | 'gray';
   variant?: 'contained' | 'outlined' | 'skeleton';
   fullWidth?: boolean;
   startIcon?: ReactNode;

package/dist/components/buttons/button/button.mjs

@@ -4,14 +4,18 @@ import { jsxs } from "react/jsx-runtime";
 const Button = ({ ref, children, type = "button", size = "md", color = "primary", variant = "contained", disabled = false, fullWidth = false, onClick, startIcon, endIcon, ...rest }) => {
 	return /* @__PURE__ */ jsxs("button", {
 		className: cn("cursor-pointer rounded-full border-2 text-center font-bold transition-colors", {
-			"border-transparent bg-primary-bg text-fg hover:bg-primary-bg/90 active:bg-primary-bg/80": variant === "contained" && color === "primary",
-			"border-transparent bg-bg-subtle text-fg-base hover:bg-bg-mute active:bg-bg-emphasize": variant === "contained" && color === "gray",
-			"cursor-not-allowed opacity-35 hover:bg-primary-bg active:bg-primary-bg": disabled && variant === "contained",
-			"border-primary-border bg-bg-base text-primary-fg hover:bg-bg-subtle active:bg-bg-emphasize": variant === "outlined" && color === "primary",
-			"border-border-base bg-bg-base text-fg-base hover:bg-bg-subtle active:bg-bg-emphasize": variant === "outlined" && color === "gray",
+			"border-transparent bg-primary-bg text-fg hover:bg-primary-bg-emphasize/80 active:bg-primary-bg-emphasize": variant === "contained" && color === "primary",
+			"border-transparent bg-secondary-bg text-fg hover:bg-secondary-bg-emphasize/80 active:bg-secondary-bg-emphasize": variant === "contained" && color === "secondary",
+			"border-transparent bg-bg-subtle text-fg-base hover:bg-bg-mute/80 active:bg-bg-mute": variant === "contained" && color === "gray",
+			"cursor-not-allowed opacity-35 hover:bg-primary-bg active:bg-primary-bg": disabled && variant === "contained" && color === "primary",
+			"cursor-not-allowed opacity-35 hover:bg-secondary-bg active:bg-secondary-bg": disabled && variant === "contained" && color === "secondary",
+			"cursor-not-allowed opacity-35 hover:bg-bg-subtle active:bg-bg-subtle": disabled && variant === "contained" && color === "gray",
+			"border-primary-border bg-bg-base text-primary-fg hover:bg-bg-subtle active:bg-bg-mute": variant === "outlined" && color === "primary",
+			"border-secondary-border bg-bg-base text-secondary-fg hover:bg-bg-subtle active:bg-bg-mute": variant === "outlined" && color === "secondary",
+			"border-border-base bg-bg-base text-fg-base hover:bg-bg-subtle active:bg-bg-mute": variant === "outlined" && color === "gray",
 			"cursor-not-allowed bg-bg-base opacity-35 hover:bg-bg-base active:bg-bg-base": disabled && variant === "outlined",
-			"border-transparent bg-transparent text-fg-mute hover:text-fg-base active:text-fg-base": variant === "skeleton",
-			"cursor-not-allowed bg-transparent text-fg-mute opacity-35 hover:text-fg-mute active:text-fg-mute": disabled && variant === "skeleton"
+			"border-transparent bg-transparent text-fg-mute hover:bg-bg-subtle hover:text-fg-base active:bg-bg-mute active:text-fg-base": variant === "skeleton",
+			"cursor-not-allowed bg-transparent text-fg-mute opacity-35 hover:bg-transparent hover:text-fg-mute active:bg-transparent active:text-fg-mute": disabled && variant === "skeleton"
 		}, "focus-visible:border-transparent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-border-info", size === "sm" && "px-3 py-1 text-sm", size === "md" && "px-4 py-2 text-md", size === "lg" && "px-6 py-3 text-lg", fullWidth && "w-full", Boolean(startIcon ?? endIcon) && "flex items-center gap-2", startIcon && endIcon ? "justify-between" : startIcon && variant !== "skeleton" ? "justify-center" : endIcon && "justify-between"),
 		disabled,
 		onClick,

package/dist/components/buttons/icon-button/icon-button.d.mts

@@ -3,7 +3,7 @@ import { FC, HTMLProps } from "react";
 //#region src/components/buttons/icon-button/icon-button.d.ts
 type Props = {
   size?: 'sm' | 'md' | 'lg';
-  bg?: 'transparent' | 'base' | 'primary';
+  bg?: 'transparent' | 'base' | 'primary' | 'secondary';
   label: string;
 } & Omit<HTMLProps<HTMLButtonElement>, 'size' | 'type'>;
 declare const IconButton: FC<Props>;

package/dist/components/buttons/icon-button/icon-button.mjs

@@ -4,7 +4,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 const IconButton = ({ ref, size = "md", bg = "transparent", label, children, ...props }) => {
 	return /* @__PURE__ */ jsxs("button", {
 		"aria-label": props.role ? label : void 0,
-		className: cn("inline-flex cursor-pointer rounded-full bg-transparent transition-colors", "hover:bg-bg-subtle", "focus-visible:border-transparent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-border-info active:bg-bg-emphasize", bg === "base" && "bg-bg-base", bg === "transparent" && "bg-transparent", bg === "primary" && "bg-primary-bg hover:bg-primary-bg/90 active:bg-primary-bg-emphasize", size === "sm" && "p-1", size === "md" && "p-2", size === "lg" && "p-3", props.disabled && "cursor-not-allowed opacity-50 hover:bg-transparent active:bg-transparent"),
+		className: cn("inline-flex cursor-pointer rounded-full transition-colors", "focus-visible:border-transparent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-border-info", (bg === "transparent" || bg === "base") && "hover:bg-bg-subtle active:bg-bg-mute", bg === "base" && "bg-bg-base", bg === "transparent" && "bg-transparent", bg === "primary" && "bg-primary-bg hover:bg-primary-bg-emphasize/80 active:bg-primary-bg-emphasize", bg === "secondary" && "bg-secondary-bg hover:bg-secondary-bg-emphasize/80 active:bg-secondary-bg-emphasize", size === "sm" && "p-1", size === "md" && "p-2", size === "lg" && "p-3", props.disabled && "cursor-not-allowed opacity-50 hover:bg-transparent active:bg-transparent"),
 		ref,
 		...props,
 		children: [!props.role && /* @__PURE__ */ jsx("span", {

package/dist/components/buttons/icon-link/icon-link.d.mts

@@ -11,7 +11,7 @@ declare const IconLink: <T extends string>({
   renderAnchor
 }: PropsWithChildren<{
   size?: "sm" | "md" | "lg";
-  bg?: "transparent" | "base" | "primary";
+  bg?: "transparent" | "base" | "primary" | "secondary";
   label?: string;
   href: T;
   openInNewTab?: boolean;

package/dist/components/buttons/icon-link/icon-link.mjs

@@ -12,7 +12,7 @@ const IconLink = ({ size = "md", bg = "transparent", label, href, children, open
 	};
 	return renderAnchor({
 		href,
-		className: cn("inline-flex rounded-full transition-colors hover:bg-bg-subtle active:bg-bg-emphasize focus-visible:ring-2 focus-visible:ring-border-info", bg === "base" && "bg-bg-base", bg === "transparent" && "bg-transparent", bg === "primary" && "bg-primary-bg hover:bg-primary-bg/90 active:bg-primary-bg-emphasize", size === "sm" && "p-1", size === "md" && "p-2", size === "lg" && "p-3"),
+		className: cn("inline-flex rounded-full transition-colors focus-visible:ring-2 focus-visible:ring-border-info", (bg === "transparent" || bg === "base") && "hover:bg-bg-subtle active:bg-bg-mute", bg === "base" && "bg-bg-base", bg === "transparent" && "bg-transparent", bg === "primary" && "bg-primary-bg hover:bg-primary-bg-emphasize/80 active:bg-primary-bg-emphasize", bg === "secondary" && "bg-secondary-bg hover:bg-secondary-bg-emphasize/80 active:bg-secondary-bg-emphasize", size === "sm" && "p-1", size === "md" && "p-2", size === "lg" && "p-3"),
 		...props,
 		children: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
 			className: "sr-only",

package/dist/components/buttons/link-button/link-button.d.mts

@@ -15,7 +15,7 @@ declare const LinkButton: <T extends string>({
 }: {
   variant?: "contained" | "outlined" | "skeleton";
   size?: "sm" | "md" | "lg";
-  color?: "primary" | "gray";
+  color?: "primary" | "secondary" | "gray";
   href: T;
   startIcon?: ReactNode;
   endIcon?: ReactNode;

package/dist/components/buttons/link-button/link-button.mjs

@@ -13,11 +13,13 @@ const LinkButton = ({ children, size = "md", color = "primary", variant = "conta
 	return renderAnchor({
 		href,
 		className: cn("rounded-full border-2 text-center font-bold transition-colors", {
-			"border-transparent bg-primary-bg text-fg hover:bg-primary-bg/90 active:bg-primary-bg/80": variant === "contained" && color === "primary",
-			"border-transparent bg-bg-subtle text-fg-base hover:bg-bg-mute active:bg-bg-emphasize": variant === "contained" && color === "gray",
-			"border-primary-border bg-bg-base text-primary-fg hover:bg-bg-subtle active:bg-bg-emphasize": variant === "outlined" && color === "primary",
-			"border-border-base bg-bg-base text-fg-base hover:bg-bg-subtle active:bg-bg-emphasize": variant === "outlined" && color === "gray",
-			"border-transparent bg-transparent text-fg-mute hover:text-fg-base active:text-fg-base": variant === "skeleton"
+			"border-transparent bg-primary-bg text-fg hover:bg-primary-bg-emphasize/80 active:bg-primary-bg-emphasize": variant === "contained" && color === "primary",
+			"border-transparent bg-secondary-bg text-fg hover:bg-secondary-bg-emphasize/80 active:bg-secondary-bg-emphasize": variant === "contained" && color === "secondary",
+			"border-transparent bg-bg-subtle text-fg-base hover:bg-bg-mute/80 active:bg-bg-mute": variant === "contained" && color === "gray",
+			"border-primary-border bg-bg-base text-primary-fg hover:bg-bg-subtle active:bg-bg-mute": variant === "outlined" && color === "primary",
+			"border-secondary-border bg-bg-base text-secondary-fg hover:bg-bg-subtle active:bg-bg-mute": variant === "outlined" && color === "secondary",
+			"border-border-base bg-bg-base text-fg-base hover:bg-bg-subtle active:bg-bg-mute": variant === "outlined" && color === "gray",
+			"border-transparent bg-transparent text-fg-mute hover:bg-bg-subtle hover:text-fg-base active:bg-bg-mute active:text-fg-base": variant === "skeleton"
 		}, "focus-visible:border-transparent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-border-info", size === "sm" && "px-3 py-1 text-sm", size === "md" && "px-4 py-2 text-md", size === "lg" && "px-6 py-3 text-lg", Boolean(startIcon ?? endIcon) && "flex items-center gap-2", Boolean(endIcon) && "justify-between", active && "text-fg-info hover:text-fg-info active:text-fg-info"),
 		"aria-label": children,
 		...props,

package/dist/components/data-display/accordion/accordion-button.mjs

@@ -11,7 +11,7 @@ const AccordionButton = ({ children }) => {
 	return /* @__PURE__ */ jsxs("button", {
 		"aria-controls": `${id}-panel`,
 		"aria-expanded": open,
-		className: cn("flex w-full cursor-pointer items-center justify-between rounded-md p-4 text-fg-base", "hover:text-primary-fg", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-info"),
+		className: cn("flex w-full cursor-pointer items-center justify-between rounded-md p-4 text-fg-base transition-colors", "hover:bg-primary-bg-subtle hover:text-primary-fg", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-info"),
 		id: `${id}-button`,
 		onClick: toggleOpen,
 		type: "button",

package/dist/components/data-display/card/card.mjs

@@ -1,8 +1,8 @@
 import { cn } from "../../../helpers/cn.mjs";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/data-display/card/card.tsx
-const Card = ({ children, variant = "primary", width = "full", appearance = "shadow" }) => /* @__PURE__ */ jsx("div", {
-	className: cn("rounded-xl", appearance === "shadow" && "shadow-sm", appearance === "bordered" && "border border-border-mute", width === "full" && "w-full", width === "fit" && "w-fit", variant === "primary" && "bg-bg-base", variant === "secondary" && "bg-bg-mute"),
+const Card = ({ children, width = "full", appearance = "shadow" }) => /* @__PURE__ */ jsx("div", {
+	className: cn("rounded-xl", appearance === "shadow" && "shadow-sm dark:border dark:border-border-mute", appearance === "bordered" && "border border-border-mute", width === "full" && "w-full", width === "fit" && "w-fit", "bg-bg-raised"),
 	children
 });
 //#endregion

package/dist/components/data-display/card/interactive-card.mjs

@@ -1,8 +1,8 @@
 import { cn } from "../../../helpers/cn.mjs";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/data-display/card/interactive-card.tsx
-const InteractiveCard = ({ children, variant = "primary", width = "full", appearance = "shadow" }) => /* @__PURE__ */ jsx("div", {
-	className: cn("rounded-xl transition-transform hover:scale-[1.02] active:scale-[0.98]", appearance === "shadow" && "shadow-sm", appearance === "bordered" && "border border-border-mute", width === "full" && "w-full", width === "fit" && "w-fit", variant === "primary" && "bg-bg-base", variant === "secondary" && "bg-bg-mute"),
+const InteractiveCard = ({ children, width = "full", appearance = "shadow" }) => /* @__PURE__ */ jsx("div", {
+	className: cn("rounded-xl transition-transform hover:scale-[1.02] active:scale-[0.98]", appearance === "shadow" && "shadow-sm dark:border dark:border-border-mute", appearance === "bordered" && "border border-border-mute", width === "full" && "w-full", width === "fit" && "w-fit", "bg-bg-raised"),
 	children
 });
 //#endregion

package/dist/components/data-display/card/type.d.mts

@@ -2,7 +2,6 @@ import { PropsWithChildren } from "react";
 
 //#region src/components/data-display/card/type.d.ts
 type CardProps = PropsWithChildren<{
-  variant?: 'primary' | 'secondary';
   width?: 'full' | 'fit';
   appearance?: 'shadow' | 'bordered';
 }>;

package/dist/components/form/autocomplete/autocomplete.mjs

@@ -142,7 +142,7 @@ const Autocomplete = ({ id, name, describedbyId, isInvalid, isDisabled, isRequir
 			/* @__PURE__ */ jsx("div", {
 				className: "relative w-full",
 				children: open && /* @__PURE__ */ jsx("div", {
-					className: "absolute top-1 z-10 w-full rounded-xl border border-border-mute bg-bg-base shadow-md",
+					className: "absolute top-1 z-10 w-full rounded-xl bg-bg-raised shadow-md",
 					role: "presentation",
 					children: /* @__PURE__ */ jsxs("ul", {
 						className: "max-h-96 py-2",
@@ -153,7 +153,7 @@ const Autocomplete = ({ id, name, describedbyId, isInvalid, isDisabled, isRequir
 						}), filteredOptions.map((option, idx) => {
 							const selected = currentValue.includes(option.value);
 							return /* @__PURE__ */ jsx("li", {
-								className: cn("cursor-pointer px-3 py-2", selected && "bg-bg-mute", selectIndex === idx && !selected && "bg-bg-emphasize", selectIndex === idx && selected && "bg-bg-mute"),
+								className: cn("cursor-pointer px-3 py-2 transition-colors", selected && "bg-primary-bg-subtle text-primary-fg", selectIndex === idx && !selected && "bg-bg-subtle", selectIndex === idx && selected && "bg-primary-bg-mute text-primary-fg"),
 								id: `${id}_option_${option.value}`,
 								onClick: (e) => {
 									e.stopPropagation();

package/dist/components/form/checkbox-card/checkbox-card.mjs

@@ -22,7 +22,7 @@ const CheckboxCard = ({ labelId, name, isDisabled, isInvalid = false, options, v
 			const disabled = isDisabled || option.disabled;
 			const optionId = `${groupId}-${option.value}`;
 			return /* @__PURE__ */ jsxs("label", {
-				className: cn("flex w-full min-w-0 rounded-xl border bg-bg-base p-4 text-left transition-colors", "has-[input:focus-visible]:outline-hidden has-[input:focus-visible]:ring-2 has-[input:focus-visible]:ring-border-info", checked && "border-border-info bg-bg-subtle", isInvalid ? "border-border-error" : "border-border-mute hover:bg-bg-mute", disabled && "cursor-not-allowed border-border-mute bg-bg-subtle text-fg-mute"),
+				className: cn("flex w-full min-w-0 rounded-xl border bg-bg-base p-4 text-left transition-colors", "has-[input:focus-visible]:outline-hidden has-[input:focus-visible]:ring-2 has-[input:focus-visible]:ring-border-info", checked && "border-primary-border bg-primary-bg-subtle hover:bg-primary-bg-mute", isInvalid ? "border-border-error" : !checked && "border-border-mute hover:bg-bg-subtle", disabled && "cursor-not-allowed border-border-mute bg-bg-subtle text-fg-mute"),
 				id: optionId,
 				children: [
 					/* @__PURE__ */ jsx("input", {
@@ -55,7 +55,7 @@ const CheckboxCard = ({ labelId, name, isDisabled, isInvalid = false, options, v
 					}),
 					/* @__PURE__ */ jsx("span", {
 						"aria-hidden": true,
-						className: cn("mt-0.5 ml-4 inline-flex size-5 shrink-0 items-center justify-center rounded-md border", checked ? "border-border-info bg-primary-bg text-fg-base" : "border-border-mute bg-bg-base text-transparent"),
+						className: cn("mt-0.5 ml-4 inline-flex size-5 shrink-0 items-center justify-center rounded-md border", checked ? "border-border-base bg-primary-bg text-fg-base" : "border-border-mute bg-bg-base text-transparent"),
 						children: /* @__PURE__ */ jsx(CheckIcon, { size: "sm" })
 					})
 				]

package/dist/components/form/form-control/form-control.mjs

@@ -10,7 +10,7 @@ const FormControl = ({ isDisabled = false, isInvalid = false, isRequired = false
 		className: "flex w-full flex-col",
 		children: [
 			labelAs === "label" ? /* @__PURE__ */ jsxs("label", {
-				className: "mb-1 flex gap-2 font-bold text-fg-base text-md",
+				className: "mb-1 flex gap-2 pl-0.5 font-bold text-fg-base text-md",
 				htmlFor: id,
 				id: labelId,
 				children: [label, isRequired && /* @__PURE__ */ jsx("span", {
@@ -18,7 +18,7 @@ const FormControl = ({ isDisabled = false, isInvalid = false, isRequired = false
 					children: "必須"
 				})]
 			}) : /* @__PURE__ */ jsxs("legend", {
-				className: "mb-1 flex gap-2 font-bold text-fg-base text-md",
+				className: "mb-1 flex gap-2 pl-0.5 font-bold text-fg-base text-md",
 				children: [label, isRequired && /* @__PURE__ */ jsx("span", {
 					className: "font-medium text-fg-error",
 					children: "必須"
@@ -34,11 +34,11 @@ const FormControl = ({ isDisabled = false, isInvalid = false, isRequired = false
 			}),
 			isInvalid && errorText ? /* @__PURE__ */ jsx("p", {
 				"aria-live": "polite",
-				className: "text-fg-error text-sm",
+				className: "mt-1 pl-0.5 text-fg-error text-sm",
 				id: `${id}-feedback`,
 				children: errorText
 			}) : helpText && /* @__PURE__ */ jsx("p", {
-				className: "text-fg-mute text-sm",
+				className: "mt-1 pl-0.5 text-fg-mute text-sm",
 				id: `${id}-helptext`,
 				children: helpText
 			})

package/dist/components/form/number-field/number-field.mjs

@@ -1,6 +1,6 @@
 "use client";
 import { cn } from "../../../helpers/cn.mjs";
-import { MinusIcon, PlusIcon } from "../../icons/lucide.mjs";
+import { ChevronIcon } from "../../icons/lucide.mjs";
 import { between } from "../../../helpers/number/between.mjs";
 import { toPrecision } from "../../../helpers/number/to-precision.mjs";
 import { cast } from "../../../helpers/number/cast.mjs";
@@ -66,9 +66,9 @@ const NumberField = ({ id, name, describedbyId, isInvalid, isDisabled, isRequire
 			value: displayValue
 		}), /* @__PURE__ */ jsxs("div", {
 			"aria-hidden": "true",
-			className: "absolute right-0 flex h-full flex-col",
+			className: "absolute right-1 flex h-full flex-col py-1",
 			children: [/* @__PURE__ */ jsxs("button", {
-				className: cn("flex w-6 grow items-center justify-center rounded-tr-xl border-border-base border-b border-l bg-bg-mute", "disabled:cursor-not-allowed"),
+				className: cn("flex w-6 grow items-center justify-center rounded-md text-fg-mute transition-colors", "hover:bg-bg-mute hover:text-fg-base", "disabled:cursor-not-allowed disabled:text-fg-mute disabled:hover:bg-transparent"),
 				disabled: isDisabled,
 				onClick: () => {
 					const newValue = between(toPrecision(cast(displayValue, precision) + step, precision), min, max);
@@ -80,9 +80,12 @@ const NumberField = ({ id, name, describedbyId, isInvalid, isDisabled, isRequire
 				children: [/* @__PURE__ */ jsx("span", {
 					className: "sr-only",
 					children: "増やす"
-				}), /* @__PURE__ */ jsx(PlusIcon, { size: "sm" })]
+				}), /* @__PURE__ */ jsx(ChevronIcon, {
+					direction: "up",
+					size: "sm"
+				})]
 			}), /* @__PURE__ */ jsxs("button", {
-				className: cn("flex w-6 grow items-center justify-center rounded-br-xl border-border-base border-l bg-bg-mute", "disabled:cursor-not-allowed"),
+				className: cn("flex w-6 grow items-center justify-center rounded-md text-fg-mute transition-colors", "hover:bg-bg-mute hover:text-fg-base", "disabled:cursor-not-allowed disabled:text-fg-mute disabled:hover:bg-transparent"),
 				disabled: isDisabled,
 				onClick: () => {
 					const newValue = between(toPrecision(cast(displayValue, precision) - step, precision), min, max);
@@ -94,7 +97,10 @@ const NumberField = ({ id, name, describedbyId, isInvalid, isDisabled, isRequire
 				children: [/* @__PURE__ */ jsx("span", {
 					className: "sr-only",
 					children: "減らす"
-				}), /* @__PURE__ */ jsx(MinusIcon, { size: "sm" })]
+				}), /* @__PURE__ */ jsx(ChevronIcon, {
+					direction: "down",
+					size: "sm"
+				})]
 			})]
 		})]
 	});

package/dist/components/form/radio-card/radio-card.mjs

@@ -36,7 +36,7 @@ const RadioCard = ({ labelId, name, isDisabled, isInvalid = false, options, valu
 			return /* @__PURE__ */ jsxs("button", {
 				"aria-describedby": option.description ? `${optionId}-description` : void 0,
 				"aria-pressed": checked,
-				className: cn("flex w-full min-w-0 rounded-xl border bg-bg-base p-4 text-left transition-colors", "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-border-info", checked && "border-border-info bg-bg-subtle", isInvalid ? "border-border-error" : "border-border-mute hover:bg-bg-mute", disabled && "cursor-not-allowed border-border-mute bg-bg-subtle text-fg-mute"),
+				className: cn("flex w-full min-w-0 rounded-xl border bg-bg-base p-4 text-left transition-colors", "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-border-info", checked && "border-primary-border bg-primary-bg-subtle hover:bg-primary-bg-mute", isInvalid ? "border-border-error" : !checked && "border-border-mute hover:bg-bg-subtle", disabled && "cursor-not-allowed border-border-mute bg-bg-subtle text-fg-mute"),
 				disabled,
 				id: optionId,
 				onClick: () => {

package/dist/components/form/switch/switch.mjs

@@ -34,7 +34,7 @@ const Switch = ({ value, defaultChecked, describedbyId, id, isDisabled, isInvali
 				type: "checkbox"
 			}), /* @__PURE__ */ jsx("span", {
 				"aria-hidden": true,
-				className: cn("inline-flex h-7 w-12 items-center rounded-full border transition-colors", isInvalid && "border-border-error", isSelected ? "border-border-base bg-primary-bg" : "border-border-mute bg-bg-mute", isDisabled && "border-border-mute bg-bg-subtle", "peer-focus-visible:outline-hidden peer-focus-visible:ring-2 peer-focus-visible:ring-border-info peer-focus-visible:ring-offset-2"),
+				className: cn("inline-flex h-7 w-12 items-center rounded-full transition-colors", isInvalid && "ring-2 ring-border-error", isSelected ? "bg-primary-bg" : "bg-bg-mute", isDisabled && "bg-bg-subtle", "peer-focus-visible:outline-hidden peer-focus-visible:ring-2 peer-focus-visible:ring-border-info peer-focus-visible:ring-offset-2"),
 				children: /* @__PURE__ */ jsx("span", { className: cn("ml-0.5 size-5 rounded-full bg-bg-base shadow-xs transition-transform", isSelected && "translate-x-5", isDisabled && "bg-bg-emphasize") })
 			})]
 		}), label ? /* @__PURE__ */ jsx("span", { children: label }) : null]

package/dist/components/index.d.mts

@@ -41,6 +41,7 @@ import { ScrollLinked } from "./layout/scroll-linked/scroll-linked.mjs";
 import { Separator } from "./layout/separator/separator.mjs";
 import { Anchor } from "./navigation/anchor/anchor.mjs";
 import { Breadcrumb } from "./navigation/breadcrumb/breadcrumb.mjs";
+import { Pagination } from "./navigation/pagination/pagination.mjs";
 import { Tabs } from "./navigation/tabs/tabs.mjs";
 import { Dialog } from "./overlays/dialog/dialog.mjs";
 import { Drawer } from "./overlays/drawer/drawer.mjs";
@@ -52,4 +53,4 @@ import { Popover } from "./overlays/popover/popover.mjs";
 import { Tooltip } from "./overlays/tooltip/tooltip.mjs";
 import { ArteOdysseyProvider } from "./providers/arte-odyssey-provider.mjs";
 import { PortalRootProvider, usePortalRoot } from "./providers/portal-root.mjs";
-export { AIIcon, AccessibilityIcon, Accordion, Alert, AlertIcon, Anchor, ArteOdyssey, ArteOdysseyProvider, AtomIcon, Autocomplete, Avatar, BadIcon, Badge, BaselineStatus, BlogIcon, BoringIcon, Breadcrumb, Button, Card, CheckIcon, Checkbox, CheckboxCard, CheckboxGroup, ChevronIcon, CloseIcon, Code, ColorContrastIcon, ColorInfoIcon, CopyIcon, DarkModeIcon, Dialog, DifficultIcon, Drawer, DropdownMenu, EasyIcon, ExternalLinkIcon, FileField, FormControl, FormIcon, GitHubIcon, GoodIcon, Heading, HistoryIcon, IconButton, IconLink, InformativeIcon, InteractiveCard, InterestingIcon, LightModeIcon, LinkButton, LinkIcon, ListBox, ListIcon, LocationIcon, Logo, LogoIcon, MailIcon, MinusIcon, MixedColorIcon, Modal, NavigationMenuIcon, NewsIcon, NumberField, PaletteIcon, PasswordInput, PlusIcon, Popover, PortalRootProvider, PrepareIcon, Progress, PublishDateIcon, QiitaIcon, RSSIcon, Radio, RadioCard, ScrollLinked, Select, SendIcon, Separator, ShallowIcon, ShieldCheckIcon, Skeleton, SlideIcon, Slider, SparklesIcon, Spinner, SubscribeIcon, Switch, Table, TableIcon, Tabs, TagIcon, TextField, Textarea, ToastProvider, Tooltip, TwitterIcon, UpdateDateIcon, ViewIcon, ViewOffIcon, useOpenContext, usePortalRoot, useToast };
+export { AIIcon, AccessibilityIcon, Accordion, Alert, AlertIcon, Anchor, ArteOdyssey, ArteOdysseyProvider, AtomIcon, Autocomplete, Avatar, BadIcon, Badge, BaselineStatus, BlogIcon, BoringIcon, Breadcrumb, Button, Card, CheckIcon, Checkbox, CheckboxCard, CheckboxGroup, ChevronIcon, CloseIcon, Code, ColorContrastIcon, ColorInfoIcon, CopyIcon, DarkModeIcon, Dialog, DifficultIcon, Drawer, DropdownMenu, EasyIcon, ExternalLinkIcon, FileField, FormControl, FormIcon, GitHubIcon, GoodIcon, Heading, HistoryIcon, IconButton, IconLink, InformativeIcon, InteractiveCard, InterestingIcon, LightModeIcon, LinkButton, LinkIcon, ListBox, ListIcon, LocationIcon, Logo, LogoIcon, MailIcon, MinusIcon, MixedColorIcon, Modal, NavigationMenuIcon, NewsIcon, NumberField, Pagination, PaletteIcon, PasswordInput, PlusIcon, Popover, PortalRootProvider, PrepareIcon, Progress, PublishDateIcon, QiitaIcon, RSSIcon, Radio, RadioCard, ScrollLinked, Select, SendIcon, Separator, ShallowIcon, ShieldCheckIcon, Skeleton, SlideIcon, Slider, SparklesIcon, Spinner, SubscribeIcon, Switch, Table, TableIcon, Tabs, TagIcon, TextField, Textarea, ToastProvider, Tooltip, TwitterIcon, UpdateDateIcon, ViewIcon, ViewOffIcon, useOpenContext, usePortalRoot, useToast };

package/dist/components/index.mjs

@@ -41,6 +41,7 @@ import { ScrollLinked } from "./layout/scroll-linked/scroll-linked.mjs";
 import { Separator } from "./layout/separator/separator.mjs";
 import { Anchor } from "./navigation/anchor/anchor.mjs";
 import { Breadcrumb } from "./navigation/breadcrumb/breadcrumb.mjs";
+import { Pagination } from "./navigation/pagination/pagination.mjs";
 import { Tabs } from "./navigation/tabs/tabs.mjs";
 import { Dialog } from "./overlays/dialog/dialog.mjs";
 import { Modal } from "./overlays/modal/modal.mjs";
@@ -52,4 +53,4 @@ import { Popover } from "./overlays/popover/popover.mjs";
 import { DropdownMenu } from "./overlays/dropdown-menu/dropdown-menu.mjs";
 import { ListBox } from "./overlays/list-box/list-box.mjs";
 import { Tooltip } from "./overlays/tooltip/tooltip.mjs";
-export { AIIcon, AccessibilityIcon, Accordion, Alert, AlertIcon, Anchor, ArteOdyssey, ArteOdysseyProvider, AtomIcon, Autocomplete, Avatar, BadIcon, Badge, BaselineStatus, BlogIcon, BoringIcon, Breadcrumb, Button, Card, CheckIcon, Checkbox, CheckboxCard, CheckboxGroup, ChevronIcon, CloseIcon, Code, ColorContrastIcon, ColorInfoIcon, CopyIcon, DarkModeIcon, Dialog, DifficultIcon, Drawer, DropdownMenu, EasyIcon, ExternalLinkIcon, FileField, FormControl, FormIcon, GitHubIcon, GoodIcon, Heading, HistoryIcon, IconButton, IconLink, InformativeIcon, InteractiveCard, InterestingIcon, LightModeIcon, LinkButton, LinkIcon, ListBox, ListIcon, LocationIcon, Logo, LogoIcon, MailIcon, MinusIcon, MixedColorIcon, Modal, NavigationMenuIcon, NewsIcon, NumberField, PaletteIcon, PasswordInput, PlusIcon, Popover, PortalRootProvider, PrepareIcon, Progress, PublishDateIcon, QiitaIcon, RSSIcon, Radio, RadioCard, ScrollLinked, Select, SendIcon, Separator, ShallowIcon, ShieldCheckIcon, Skeleton, SlideIcon, Slider, SparklesIcon, Spinner, SubscribeIcon, Switch, Table, TableIcon, Tabs, TagIcon, TextField, Textarea, ToastProvider, Tooltip, TwitterIcon, UpdateDateIcon, ViewIcon, ViewOffIcon, useOpenContext, usePortalRoot, useToast };
+export { AIIcon, AccessibilityIcon, Accordion, Alert, AlertIcon, Anchor, ArteOdyssey, ArteOdysseyProvider, AtomIcon, Autocomplete, Avatar, BadIcon, Badge, BaselineStatus, BlogIcon, BoringIcon, Breadcrumb, Button, Card, CheckIcon, Checkbox, CheckboxCard, CheckboxGroup, ChevronIcon, CloseIcon, Code, ColorContrastIcon, ColorInfoIcon, CopyIcon, DarkModeIcon, Dialog, DifficultIcon, Drawer, DropdownMenu, EasyIcon, ExternalLinkIcon, FileField, FormControl, FormIcon, GitHubIcon, GoodIcon, Heading, HistoryIcon, IconButton, IconLink, InformativeIcon, InteractiveCard, InterestingIcon, LightModeIcon, LinkButton, LinkIcon, ListBox, ListIcon, LocationIcon, Logo, LogoIcon, MailIcon, MinusIcon, MixedColorIcon, Modal, NavigationMenuIcon, NewsIcon, NumberField, Pagination, PaletteIcon, PasswordInput, PlusIcon, Popover, PortalRootProvider, PrepareIcon, Progress, PublishDateIcon, QiitaIcon, RSSIcon, Radio, RadioCard, ScrollLinked, Select, SendIcon, Separator, ShallowIcon, ShieldCheckIcon, Skeleton, SlideIcon, Slider, SparklesIcon, Spinner, SubscribeIcon, Switch, Table, TableIcon, Tabs, TagIcon, TextField, Textarea, ToastProvider, Tooltip, TwitterIcon, UpdateDateIcon, ViewIcon, ViewOffIcon, useOpenContext, usePortalRoot, useToast };

package/dist/components/navigation/pagination/index.d.mts

@@ -0,0 +1,2 @@
+import { Pagination } from "./pagination.mjs";
+export { Pagination };

package/dist/components/navigation/pagination/index.mjs

@@ -0,0 +1,2 @@
+import { Pagination } from "./pagination.mjs";
+export { Pagination };

package/dist/components/navigation/pagination/pagination.d.mts

@@ -0,0 +1,15 @@
+import { FC } from "react";
+
+//#region src/components/navigation/pagination/pagination.d.ts
+type Props = {
+  totalPages: number;
+  currentPage: number;
+  onPageChange: (page: number) => void;
+  isDisabled?: boolean;
+  prevLabel?: string;
+  nextLabel?: string;
+  'aria-label'?: string;
+};
+declare const Pagination: FC<Props>;
+//#endregion
+export { Pagination };

package/dist/components/navigation/pagination/pagination.mjs

@@ -0,0 +1,65 @@
+"use client";
+import { Button } from "../../buttons/button/button.mjs";
+import { ChevronIcon } from "../../icons/lucide.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/navigation/pagination/pagination.tsx
+const Pagination = ({ totalPages, currentPage, onPageChange, isDisabled = false, prevLabel = "前へ", nextLabel = "次へ", "aria-label": ariaLabel = "ページネーション" }) => {
+	const safeTotal = Math.max(1, totalPages);
+	const safeCurrent = Math.min(Math.max(1, currentPage), safeTotal);
+	const isFirst = safeCurrent <= 1;
+	const isLast = safeCurrent >= safeTotal;
+	return /* @__PURE__ */ jsx("nav", {
+		"aria-label": ariaLabel,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-center gap-2",
+			children: [
+				/* @__PURE__ */ jsx(Button, {
+					color: "gray",
+					disabled: isDisabled || isFirst,
+					onClick: () => {
+						onPageChange(safeCurrent - 1);
+					},
+					size: "sm",
+					startIcon: /* @__PURE__ */ jsx(ChevronIcon, {
+						direction: "left",
+						size: "sm"
+					}),
+					variant: "skeleton",
+					children: prevLabel
+				}),
+				/* @__PURE__ */ jsxs("p", {
+					"aria-current": "page",
+					"aria-live": "polite",
+					className: "px-3 text-fg-mute text-sm tabular-nums",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: "text-fg-base",
+							children: safeCurrent
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "mx-1",
+							children: "/"
+						}),
+						/* @__PURE__ */ jsx("span", { children: safeTotal })
+					]
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					color: "gray",
+					disabled: isDisabled || isLast,
+					endIcon: /* @__PURE__ */ jsx(ChevronIcon, {
+						direction: "right",
+						size: "sm"
+					}),
+					onClick: () => {
+						onPageChange(safeCurrent + 1);
+					},
+					size: "sm",
+					variant: "skeleton",
+					children: nextLabel
+				})
+			]
+		})
+	});
+};
+//#endregion
+export { Pagination };

package/dist/components/navigation/tabs/tabs.mjs

@@ -66,7 +66,7 @@ const Tab = ({ id, children }) => {
 	return /* @__PURE__ */ jsxs("div", {
 		"aria-controls": selectedId === id ? `${rootId}-panel-${id}` : void 0,
 		"aria-selected": selectedId === id,
-		className: cn("relative cursor-pointer rounded-lg p-2 transition-colors", "focus-visible:border-transparent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-border-info"),
+		className: cn("relative cursor-pointer rounded-lg p-2 transition-colors", selectedId !== id && "hover:bg-primary-bg-subtle hover:text-primary-fg", "focus-visible:border-transparent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-border-info"),
 		id: `${rootId}-tab-${id}`,
 		onClick: () => {
 			setSelectedId(id);

package/dist/components/overlays/dialog/dialog.mjs

@@ -17,7 +17,7 @@ const Root = ({ ref, id, children, tabIndex, role = "dialog" }) => {
 	return /* @__PURE__ */ jsx("section", {
 		"aria-describedby": `${rootId}-content`,
 		"aria-labelledby": `${rootId}-header`,
-		className: "relative w-full rounded-lg border border-border-mute bg-bg-base shadow-md",
+		className: "relative w-full rounded-lg bg-bg-raised shadow-md",
 		id,
 		ref,
 		role,

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

@@ -44,7 +44,7 @@ const Content = ({ children }) => {
 		children: /* @__PURE__ */ jsx(Popover.Content, { renderItem: (props) => /* @__PURE__ */ jsx("div", {
 			...props,
 			...contentProps,
-			className: "flex min-w-40 flex-col rounded-lg border border-border-mute bg-bg-base py-2 shadow-md",
+			className: "flex min-w-40 flex-col rounded-lg bg-bg-raised py-2 shadow-md",
 			children
 		}) })
 	});
@@ -52,7 +52,7 @@ const Content = ({ children }) => {
 const Item = ({ label, onClick }) => {
 	const props = useMenuItem({ onClick });
 	return /* @__PURE__ */ jsx("button", {
-		className: cn("w-full px-2 py-1 text-left transition-colors", "hover:bg-bg-mute", "focus-visible:bg-bg-mute focus-visible:outline-none"),
+		className: cn("w-full px-2 py-1 text-left transition-colors", "hover:bg-bg-subtle", "focus-visible:bg-bg-subtle focus-visible:outline-none"),
 		...props,
 		children: label
 	});

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

@@ -59,7 +59,7 @@ const Content = ({ helpContent }) => {
 		children: /* @__PURE__ */ jsx(Popover.Content, { renderItem: (props) => /* @__PURE__ */ jsxs("div", {
 			...props,
 			...contentProps,
-			className: "flex max-h-48 min-w-40 flex-col overflow-y-auto rounded-lg border border-border-mute bg-bg-base py-2 shadow-md",
+			className: "flex max-h-48 min-w-40 flex-col overflow-y-auto rounded-lg bg-bg-raised py-2 shadow-md",
 			children: [helpContent, options.map(({ key, label }, idx) => /* @__PURE__ */ jsx(Item, {
 				index: idx,
 				label
@@ -70,7 +70,7 @@ const Content = ({ helpContent }) => {
 const Item = ({ label, index }) => {
 	const { props, selected } = useMenuItem(index);
 	return /* @__PURE__ */ jsxs("button", {
-		className: cn("flex w-full items-center justify-between px-3 py-2 text-left transition-colors", "hover:bg-bg-mute", "focus-visible:border-transparent focus-visible:bg-bg-mute focus-visible:outline-hidden"),
+		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"),
 		...props,
 		children: [label, selected && /* @__PURE__ */ jsx("span", {
 			className: "text-fg-success",

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

@@ -140,7 +140,7 @@ const Modal = ({ ref, type = "center", defaultOpen, isOpen, onClose, children })
 	]);
 	return /* @__PURE__ */ jsx(motion.dialog, {
 		animate: realDialogOpen ? "open" : "closed",
-		className: cn("border-border-mute bg-bg-base text-fg-base shadow-md backdrop:bg-back-drop", type === "center" && "m-auto max-h-lg w-5/6 max-w-2xl rounded-lg dark:border", type === "bottom" && "mt-auto w-screen max-w-screen rounded-t-lg dark:border-t", type === "right" && "ml-auto h-svh max-h-none w-screen max-w-sm rounded-l-lg dark:border-l", type === "left" && "mr-auto h-svh max-h-none w-screen max-w-sm rounded-r-lg dark:border-r"),
+		className: cn("bg-bg-raised text-fg-base shadow-md backdrop:bg-back-drop", type === "center" && "m-auto max-h-lg w-5/6 max-w-2xl rounded-lg", type === "bottom" && "mt-auto w-screen max-w-screen rounded-t-lg", type === "right" && "ml-auto h-svh max-h-none w-screen max-w-sm rounded-l-lg", type === "left" && "mr-auto h-svh max-h-none w-screen max-w-sm rounded-r-lg"),
 		exit: "closed",
 		initial: "closed",
 		onClick: (e) => {

package/dist/components/overlays/tooltip/tooltip.mjs

@@ -39,7 +39,7 @@ const Content = ({ children }) => {
 		},
 		renderItem: (props) => /* @__PURE__ */ jsx("div", {
 			...props,
-			className: "rounded-lg border border-border-mute bg-bg-base px-4 py-2 shadow-md",
+			className: "rounded-lg bg-bg-inverse px-4 py-2 text-fg-inverse shadow-md",
 			children
 		})
 	});

package/dist/hooks/scroll-direction/index.d.mts

@@ -1,8 +1,14 @@
+import { RefObject } from "react";
+
 //#region src/hooks/scroll-direction/index.d.ts
 type ScrollDirection = {
   x: 'left' | 'right';
   y: 'up' | 'down';
 };
-declare const useScrollDirection: (threshold?: number) => ScrollDirection;
+type UseScrollDirectionOptions = {
+  threshold?: number;
+  target?: RefObject<HTMLElement | null>;
+};
+declare const useScrollDirection: (options?: UseScrollDirectionOptions) => ScrollDirection;
 //#endregion
 export { useScrollDirection };

package/dist/hooks/scroll-direction/index.mjs

@@ -6,7 +6,8 @@ const SERVER_SNAPSHOT = {
 	y: "up"
 };
 const getServerSnapshot = () => SERVER_SNAPSHOT;
-const useScrollDirection = (threshold = 50) => {
+const useScrollDirection = (options = {}) => {
+	const { threshold = 50, target } = options;
 	const stateRef = useRef({
 		direction: {
 			x: "right",
@@ -16,9 +17,20 @@ const useScrollDirection = (threshold = 50) => {
 		prevScrollY: 0
 	});
 	const subscribe = useCallback((callback) => {
+		const element = target?.current ?? null;
+		const eventTarget = element ?? window;
+		const getScroll = () => {
+			if (element) return {
+				x: element.scrollLeft,
+				y: element.scrollTop
+			};
+			return {
+				x: window.scrollX,
+				y: window.scrollY
+			};
+		};
 		const handleScroll = () => {
-			const currentScrollY = window.scrollY;
-			const currentScrollX = window.scrollX;
+			const { x: currentScrollX, y: currentScrollY } = getScroll();
 			const state = stateRef.current;
 			let changed = false;
 			const newDirection = { ...state.direction };
@@ -51,11 +63,11 @@ const useScrollDirection = (threshold = 50) => {
 			};
 			if (changed) callback();
 		};
-		window.addEventListener("scroll", handleScroll, { passive: true });
+		eventTarget.addEventListener("scroll", handleScroll, { passive: true });
 		return () => {
-			window.removeEventListener("scroll", handleScroll);
+			eventTarget.removeEventListener("scroll", handleScroll);
 		};
-	}, [threshold]);
+	}, [threshold, target]);
 	const getSnapshot = () => stateRef.current.direction;
 	return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
 };

package/dist/hooks/scroll-lock/index.d.mts

@@ -1,8 +1,10 @@
+import { RefObject } from "react";
+
 //#region src/hooks/scroll-lock/index.d.ts
 type UseScrollLockReturn = {
   lock: () => void;
   unlock: () => void;
 };
-declare const useScrollLock: () => UseScrollLockReturn;
+declare const useScrollLock: (target?: RefObject<HTMLElement | null>) => UseScrollLockReturn;
 //#endregion
 export { useScrollLock };

package/dist/hooks/scroll-lock/index.mjs

@@ -1,36 +1,55 @@
 "use client";
 import { useCallback, useEffect, useRef } from "react";
 //#region src/hooks/scroll-lock/index.ts
-let lockCount = 0;
-let originalOverflow = null;
-const useScrollLock = () => {
+const lockRegistry = /* @__PURE__ */ new WeakMap();
+const resolveTarget = (target) => {
+	return target?.current ?? document.body;
+};
+const useScrollLock = (target) => {
 	const isLockedRef = useRef(false);
+	const lockedElementRef = useRef(null);
 	const lock = useCallback(() => {
 		if (isLockedRef.current) return;
+		const element = resolveTarget(target);
 		isLockedRef.current = true;
-		if (lockCount === 0) {
-			originalOverflow = document.body.style.overflow;
-			document.body.style.overflow = "hidden";
+		lockedElementRef.current = element;
+		const entry = lockRegistry.get(element);
+		if (entry) entry.count++;
+		else {
+			lockRegistry.set(element, {
+				count: 1,
+				originalOverflow: element.style.overflow
+			});
+			element.style.overflow = "hidden";
 		}
-		lockCount++;
-	}, []);
+	}, [target]);
 	const unlock = useCallback(() => {
 		if (!isLockedRef.current) return;
+		const element = lockedElementRef.current;
+		if (!element) return;
 		isLockedRef.current = false;
-		lockCount--;
-		if (lockCount === 0 && originalOverflow !== null) {
-			document.body.style.overflow = originalOverflow;
-			originalOverflow = null;
+		lockedElementRef.current = null;
+		const entry = lockRegistry.get(element);
+		if (!entry) return;
+		entry.count--;
+		if (entry.count === 0) {
+			element.style.overflow = entry.originalOverflow;
+			lockRegistry.delete(element);
 		}
 	}, []);
 	useEffect(() => {
 		return () => {
 			if (isLockedRef.current) {
+				const element = lockedElementRef.current;
 				isLockedRef.current = false;
-				lockCount--;
-				if (lockCount === 0 && originalOverflow !== null) {
-					document.body.style.overflow = originalOverflow;
-					originalOverflow = null;
+				lockedElementRef.current = null;
+				if (!element) return;
+				const entry = lockRegistry.get(element);
+				if (!entry) return;
+				entry.count--;
+				if (entry.count === 0) {
+					element.style.overflow = entry.originalOverflow;
+					lockRegistry.delete(element);
 				}
 			}
 		};

package/dist/index.d.mts

@@ -42,6 +42,7 @@ import { ScrollLinked } from "./components/layout/scroll-linked/scroll-linked.mj
 import { Separator } from "./components/layout/separator/separator.mjs";
 import { Anchor } from "./components/navigation/anchor/anchor.mjs";
 import { Breadcrumb } from "./components/navigation/breadcrumb/breadcrumb.mjs";
+import { Pagination } from "./components/navigation/pagination/pagination.mjs";
 import { Tabs } from "./components/navigation/tabs/tabs.mjs";
 import { Dialog } from "./components/overlays/dialog/dialog.mjs";
 import { Drawer } from "./components/overlays/drawer/drawer.mjs";
@@ -83,4 +84,4 @@ import { useThrottle, useThrottledCallback } from "./hooks/throttle/index.mjs";
 import { useTimeout } from "./hooks/timeout/index.mjs";
 import { useWindowResize } from "./hooks/window-resize/index.mjs";
 import { useWindowSize } from "./hooks/window-size/index.mjs";
-export { AIIcon, AccessibilityIcon, Accordion, Alert, AlertIcon, Anchor, ArteOdyssey, ArteOdysseyProvider, AtomIcon, Autocomplete, Avatar, BadIcon, Badge, BaselineStatus, BlogIcon, BoringIcon, Breadcrumb, Button, Card, CheckIcon, Checkbox, CheckboxCard, CheckboxGroup, ChevronIcon, CloseIcon, Code, ColorContrastIcon, ColorInfoIcon, CopyIcon, DarkModeIcon, Dialog, DifficultIcon, Direction, Drawer, DropdownMenu, EasyIcon, ExternalLinkIcon, FileField, FormControl, FormIcon, GitHubIcon, GoodIcon, Heading, HistoryIcon, IconButton, IconLink, InformativeIcon, InteractiveCard, InterestingIcon, LightModeIcon, LinkButton, LinkIcon, ListBox, ListIcon, LocationIcon, Logo, LogoIcon, MailIcon, MinusIcon, MixedColorIcon, Modal, NavigationMenuIcon, NewsIcon, NumberField, Option, PaletteIcon, PasswordInput, PlusIcon, Popover, PortalRootProvider, PrepareIcon, Progress, PublishDateIcon, QiitaIcon, RSSIcon, Radio, RadioCard, ScrollLinked, Select, SendIcon, Separator, ShallowIcon, ShieldCheckIcon, Skeleton, SlideIcon, Slider, SparklesIcon, Spinner, Status, SubscribeIcon, Switch, Table, TableIcon, Tabs, TagIcon, TextField, Textarea, ToastProvider, Tooltip, TwitterIcon, UpdateDateIcon, ViewIcon, ViewOffIcon, between, cast, cn, commalize, findAllColors, isInternalRoute, toPrecision, useBreakpoint, useClickAway, useClient, useClipboard, useControllableState, useDebounce, useDebouncedCallback, useDisclosure, useHash, useHover, useInView, useIntersectionObserver, useInterval, useLocalStorage, useOpenContext, usePortalRoot, useResize, useScrollDirection, useScrollLock, useSessionStorage, useStep, useThrottle, useThrottledCallback, useTimeout, useToast, useWindowResize, useWindowSize, uuidV4 };
+export { AIIcon, AccessibilityIcon, Accordion, Alert, AlertIcon, Anchor, ArteOdyssey, ArteOdysseyProvider, AtomIcon, Autocomplete, Avatar, BadIcon, Badge, BaselineStatus, BlogIcon, BoringIcon, Breadcrumb, Button, Card, CheckIcon, Checkbox, CheckboxCard, CheckboxGroup, ChevronIcon, CloseIcon, Code, ColorContrastIcon, ColorInfoIcon, CopyIcon, DarkModeIcon, Dialog, DifficultIcon, Direction, Drawer, DropdownMenu, EasyIcon, ExternalLinkIcon, FileField, FormControl, FormIcon, GitHubIcon, GoodIcon, Heading, HistoryIcon, IconButton, IconLink, InformativeIcon, InteractiveCard, InterestingIcon, LightModeIcon, LinkButton, LinkIcon, ListBox, ListIcon, LocationIcon, Logo, LogoIcon, MailIcon, MinusIcon, MixedColorIcon, Modal, NavigationMenuIcon, NewsIcon, NumberField, Option, Pagination, PaletteIcon, PasswordInput, PlusIcon, Popover, PortalRootProvider, PrepareIcon, Progress, PublishDateIcon, QiitaIcon, RSSIcon, Radio, RadioCard, ScrollLinked, Select, SendIcon, Separator, ShallowIcon, ShieldCheckIcon, Skeleton, SlideIcon, Slider, SparklesIcon, Spinner, Status, SubscribeIcon, Switch, Table, TableIcon, Tabs, TagIcon, TextField, Textarea, ToastProvider, Tooltip, TwitterIcon, UpdateDateIcon, ViewIcon, ViewOffIcon, between, cast, cn, commalize, findAllColors, isInternalRoute, toPrecision, useBreakpoint, useClickAway, useClient, useClipboard, useControllableState, useDebounce, useDebouncedCallback, useDisclosure, useHash, useHover, useInView, useIntersectionObserver, useInterval, useLocalStorage, useOpenContext, usePortalRoot, useResize, useScrollDirection, useScrollLock, useSessionStorage, useStep, useThrottle, useThrottledCallback, useTimeout, useToast, useWindowResize, useWindowSize, uuidV4 };

package/dist/index.mjs

@@ -52,6 +52,7 @@ import { ScrollLinked } from "./components/layout/scroll-linked/scroll-linked.mj
 import { Separator } from "./components/layout/separator/separator.mjs";
 import { Anchor } from "./components/navigation/anchor/anchor.mjs";
 import { Breadcrumb } from "./components/navigation/breadcrumb/breadcrumb.mjs";
+import { Pagination } from "./components/navigation/pagination/pagination.mjs";
 import { Tabs } from "./components/navigation/tabs/tabs.mjs";
 import { Dialog } from "./components/overlays/dialog/dialog.mjs";
 import { Modal } from "./components/overlays/modal/modal.mjs";
@@ -82,4 +83,4 @@ import { useStep } from "./hooks/step/index.mjs";
 import { useThrottle, useThrottledCallback } from "./hooks/throttle/index.mjs";
 import { useWindowResize } from "./hooks/window-resize/index.mjs";
 import { useWindowSize } from "./hooks/window-size/index.mjs";
-export { AIIcon, AccessibilityIcon, Accordion, Alert, AlertIcon, Anchor, ArteOdyssey, ArteOdysseyProvider, AtomIcon, Autocomplete, Avatar, BadIcon, Badge, BaselineStatus, BlogIcon, BoringIcon, Breadcrumb, Button, Card, CheckIcon, Checkbox, CheckboxCard, CheckboxGroup, ChevronIcon, CloseIcon, Code, ColorContrastIcon, ColorInfoIcon, CopyIcon, DarkModeIcon, Dialog, DifficultIcon, Drawer, DropdownMenu, EasyIcon, ExternalLinkIcon, FileField, FormControl, FormIcon, GitHubIcon, GoodIcon, Heading, HistoryIcon, IconButton, IconLink, InformativeIcon, InteractiveCard, InterestingIcon, LightModeIcon, LinkButton, LinkIcon, ListBox, ListIcon, LocationIcon, Logo, LogoIcon, MailIcon, MinusIcon, MixedColorIcon, Modal, NavigationMenuIcon, NewsIcon, NumberField, PaletteIcon, PasswordInput, PlusIcon, Popover, PortalRootProvider, PrepareIcon, Progress, PublishDateIcon, QiitaIcon, RSSIcon, Radio, RadioCard, ScrollLinked, Select, SendIcon, Separator, ShallowIcon, ShieldCheckIcon, Skeleton, SlideIcon, Slider, SparklesIcon, Spinner, SubscribeIcon, Switch, Table, TableIcon, Tabs, TagIcon, TextField, Textarea, ToastProvider, Tooltip, TwitterIcon, UpdateDateIcon, ViewIcon, ViewOffIcon, between, cast, cn, commalize, findAllColors, isInternalRoute, toPrecision, useBreakpoint, useClickAway, useClient, useClipboard, useControllableState, useDebounce, useDebouncedCallback, useDisclosure, useHash, useHover, useInView, useIntersectionObserver, useInterval, useLocalStorage, useOpenContext, usePortalRoot, useResize, useScrollDirection, useScrollLock, useSessionStorage, useStep, useThrottle, useThrottledCallback, useTimeout, useToast, useWindowResize, useWindowSize, uuidV4 };
+export { AIIcon, AccessibilityIcon, Accordion, Alert, AlertIcon, Anchor, ArteOdyssey, ArteOdysseyProvider, AtomIcon, Autocomplete, Avatar, BadIcon, Badge, BaselineStatus, BlogIcon, BoringIcon, Breadcrumb, Button, Card, CheckIcon, Checkbox, CheckboxCard, CheckboxGroup, ChevronIcon, CloseIcon, Code, ColorContrastIcon, ColorInfoIcon, CopyIcon, DarkModeIcon, Dialog, DifficultIcon, Drawer, DropdownMenu, EasyIcon, ExternalLinkIcon, FileField, FormControl, FormIcon, GitHubIcon, GoodIcon, Heading, HistoryIcon, IconButton, IconLink, InformativeIcon, InteractiveCard, InterestingIcon, LightModeIcon, LinkButton, LinkIcon, ListBox, ListIcon, LocationIcon, Logo, LogoIcon, MailIcon, MinusIcon, MixedColorIcon, Modal, NavigationMenuIcon, NewsIcon, NumberField, Pagination, PaletteIcon, PasswordInput, PlusIcon, Popover, PortalRootProvider, PrepareIcon, Progress, PublishDateIcon, QiitaIcon, RSSIcon, Radio, RadioCard, ScrollLinked, Select, SendIcon, Separator, ShallowIcon, ShieldCheckIcon, Skeleton, SlideIcon, Slider, SparklesIcon, Spinner, SubscribeIcon, Switch, Table, TableIcon, Tabs, TagIcon, TextField, Textarea, ToastProvider, Tooltip, TwitterIcon, UpdateDateIcon, ViewIcon, ViewOffIcon, between, cast, cn, commalize, findAllColors, isInternalRoute, toPrecision, useBreakpoint, useClickAway, useClient, useClipboard, useControllableState, useDebounce, useDebouncedCallback, useDisclosure, useHash, useHover, useInView, useIntersectionObserver, useInterval, useLocalStorage, useOpenContext, usePortalRoot, useResize, useScrollDirection, useScrollLock, useSessionStorage, useStep, useThrottle, useThrottledCallback, useTimeout, useToast, useWindowResize, useWindowSize, uuidV4 };

package/dist/styles/index.css

@@ -222,6 +222,7 @@
   --fg-error: var(--red-800);
 
   --bg-base: var(--white);
+  --bg-raised: var(--white);
   --bg-surface: var(--gray-50);
   --bg-subtle: var(--gray-100);
   --bg-mute: var(--gray-200);
@@ -275,6 +276,7 @@
   --fg-error: var(--red-200);
 
   --bg-base: var(--gray-900);
+  --bg-raised: var(--gray-800);
   --bg-surface: var(--gray-950);
   --bg-subtle: var(--gray-800);
   --bg-mute: var(--gray-700);
@@ -328,6 +330,7 @@
   --color-fg-error: var(--fg-error);
 
   --color-bg-base: var(--bg-base);
+  --color-bg-raised: var(--bg-raised);
   --color-bg-surface: var(--bg-surface);
   --color-bg-subtle: var(--bg-subtle);
   --color-bg-mute: var(--bg-mute);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k8o/arte-odyssey",
-  "version": "5.0.4",
+  "version": "6.0.0",
   "description": "k8o's react ui library",
   "keywords": [
     "components",
@@ -52,6 +52,7 @@
     "@chromatic-com/storybook": "5.1.1",
     "@storybook/addon-a11y": "10.3.4",
     "@storybook/addon-docs": "10.3.4",
+    "@storybook/addon-mcp": "0.5.0",
     "@storybook/addon-vitest": "10.3.4",
     "@storybook/react-vite": "10.3.4",
     "@tailwindcss/postcss": "4.2.2",