@zenkigen-inc/component-ui 1.22.0 → 1.24.0

package/dist/index.mjs

@@ -1502,7 +1502,7 @@ import {
 import { DayPicker } from "react-day-picker";
 
 // src/popover/popover.tsx
-import { autoUpdate as autoUpdate2, offset as offset2, useFloating as useFloating2, useId as useFloatingId } from "@floating-ui/react";
+import { autoUpdate as autoUpdate2, flip as flip2, offset as offset2, shift, useFloating as useFloating2, useId as useFloatingId } from "@floating-ui/react";
 import { useEffect as useEffect8, useMemo as useMemo4, useRef as useRef7 } from "react";
 
 // src/popover/popover-content.tsx
@@ -1544,6 +1544,9 @@ function isElement(node) {
   return node != null && typeof node === "object" && "type" in node;
 }
 
+// src/utils/top-layer.ts
+var TOP_LAYER_ATTRIBUTE = "data-zenkigen-top-layer";
+
 // src/popover/popover-context.ts
 import { createContext as createContext5, useContext as useContext5 } from "react";
 var PopoverContext = createContext5(null);
@@ -1672,6 +1675,7 @@ var PopoverTrigger = forwardRef7(function PopoverTrigger2({ children }, ref) {
 
 // src/popover/popover.tsx
 import { jsx as jsx21 } from "react/jsx-runtime";
+var FLOATING_VIEWPORT_PADDING2 = 8;
 function Popover({
   isOpen,
   children,
@@ -1681,6 +1685,14 @@ function Popover({
   anchorRef
 }) {
   const triggerRef = useRef7(null);
+  const middleware = useMemo4(
+    () => [
+      offset2(offsetValue),
+      flip2({ padding: FLOATING_VIEWPORT_PADDING2, flipAlignment: false }),
+      shift({ padding: FLOATING_VIEWPORT_PADDING2 })
+    ],
+    [offsetValue]
+  );
   const floating = useFloating2({
     open: isOpen,
     onOpenChange: (open) => {
@@ -1689,7 +1701,7 @@ function Popover({
       }
     },
     placement,
-    middleware: [offset2(offsetValue)],
+    middleware,
     whileElementsMounted: autoUpdate2,
     strategy: "fixed"
   });
@@ -1737,27 +1749,83 @@ import { DayButton } from "react-day-picker";
 import { clsx as clsx15 } from "clsx";
 import { getDefaultClassNames } from "react-day-picker";
 var defaultDayPickerClassNames = getDefaultClassNames();
-var DAY_PICKER_FONT_SIZE = "12px";
-var dayPickerStyle = {
-  "--rdp-nav-height": "30px",
-  "--rdp-day-width": "30px",
-  "--rdp-day-height": "30px",
-  "--rdp-day_button-width": "28px",
-  "--rdp-day_button-height": "28px",
-  "--rdp-day_button-border": "1px solid transparent",
-  "--rdp-weekday-padding": "0px",
-  fontFamily: "Arial, 'Noto Sans JP', sans-serif",
-  fontSize: DAY_PICKER_FONT_SIZE,
-  fontWeight: 700
+var BASE_TOKENS = {
+  triggerIcon: "small",
+  dayPickerStyle: {
+    "--rdp-nav-height": "30px",
+    "--rdp-day-width": "30px",
+    "--rdp-day-height": "30px",
+    "--rdp-day_button-width": "28px",
+    "--rdp-day_button-height": "28px",
+    "--rdp-day_button-border": "1px solid transparent",
+    "--rdp-weekday-padding": "0px",
+    fontFamily: "Arial, 'Noto Sans JP', sans-serif",
+    fontSize: "12px",
+    fontWeight: 700
+  },
+  dayPickerClassNames: {
+    month: clsx15(defaultDayPickerClassNames.month, "flex flex-col px-[7px] py-2")
+  },
+  dayButtonClass: "relative grid size-full place-items-center rounded-full !border !border-solid",
+  dayButtonFontSize: "12px",
+  monthCaptionClass: "flex items-center justify-between px-1 pb-0.5",
+  monthCaptionTypography: "typography-label12bold",
+  navIconButton: "small",
+  weekdayClass: "m-0 size-7 p-0 text-center align-middle",
+  footerIconButton: "medium",
+  footerClearButton: "small",
+  errorTypography: "typography-label11regular"
+};
+var LARGE_TOKENS = {
+  ...BASE_TOKENS,
+  triggerIcon: "medium",
+  errorTypography: "typography-label12regular"
+};
+var X_LARGE_TOKENS = {
+  triggerIcon: "medium",
+  dayPickerStyle: {
+    "--rdp-nav-height": "40px",
+    "--rdp-day-width": "48px",
+    "--rdp-day-height": "48px",
+    "--rdp-day_button-width": "40px",
+    "--rdp-day_button-height": "40px",
+    "--rdp-day_button-border": "1px solid transparent",
+    "--rdp-weekday-padding": "0px",
+    fontFamily: "Arial, 'Noto Sans JP', sans-serif",
+    fontSize: "16px",
+    fontWeight: 700
+  },
+  dayPickerClassNames: {
+    month: clsx15(defaultDayPickerClassNames.month, "flex flex-col px-[3px] pb-1 pt-2")
+  },
+  dayButtonClass: "relative grid size-10 place-items-center rounded-full !border !border-solid",
+  dayButtonFontSize: "16px",
+  // caption は height 固定（--rdp-nav-height: 40px）のため pb-2 は食い込みとして働き、
+  // ナビボタンが上へ 4px はみ出して月ヘッダーと曜日行の視覚間隔が 8px になる（上部ブロックコメント参照）
+  monthCaptionClass: "flex items-center justify-between px-1 pb-2",
+  monthCaptionTypography: "typography-label16bold",
+  // IconButton に x-large は無いが、large が 40px で Figma と一致する（内部アイコンも 24px になる）
+  navIconButton: "large",
+  weekdayClass: "m-0 size-12 p-0 text-center align-middle",
+  footerIconButton: "large",
+  footerClearButton: "large",
+  errorTypography: "typography-label12regular"
 };
-var dayPickerClassNames = {
-  month: clsx15(defaultDayPickerClassNames.month, "flex flex-col px-[7px] py-2")
+var DATE_PICKER_SIZE_TOKENS = {
+  small: BASE_TOKENS,
+  medium: BASE_TOKENS,
+  large: LARGE_TOKENS,
+  "x-large": X_LARGE_TOKENS
+};
+var useDatePickerSizeTokens = (componentName = "DatePicker \u306E\u30AB\u30EC\u30F3\u30C0\u30FC") => {
+  const context = useDatePickerCompoundContext(componentName);
+  return { ...context, tokens: DATE_PICKER_SIZE_TOKENS[context.size] };
 };
-var dayButtonBaseClass = "relative grid size-full place-items-center rounded-full !border !border-solid";
 
 // src/date-picker/date-picker-day-button.tsx
 import { jsx as jsx22 } from "react/jsx-runtime";
 var CustomDayButton = ({ day, modifiers, className, style, ...buttonProps }) => {
+  const { tokens } = useDatePickerSizeTokens();
   const isSelected = Boolean(modifiers.selected);
   const isOutside = Boolean(modifiers.outside);
   const isMinMaxDisabled = Boolean(modifiers.minMaxDisabled);
@@ -1770,10 +1838,10 @@ var CustomDayButton = ({ day, modifiers, className, style, ...buttonProps }) =>
       ...buttonProps,
       day,
       modifiers,
-      style: { ...style, fontSize: DAY_PICKER_FONT_SIZE },
+      style: { ...style, fontSize: tokens.dayButtonFontSize },
       className: clsx16(
         className,
-        dayButtonBaseClass,
+        tokens.dayButtonClass,
         // 共通: フォーカスリング（有効な日のみ）
         // react-day-picker の rdp-day_button クラスが outline: none を設定しているため、!important で上書き
         !isDisabledDay && focusVisible5.normalImportant,
@@ -1799,8 +1867,8 @@ import { forwardRef as forwardRef8 } from "react";
 import { jsx as jsx23 } from "react/jsx-runtime";
 var DatePickerErrorMessage = forwardRef8(
   ({ "aria-live": ariaLive = "assertive", ...props }, ref) => {
-    const { size, isError } = useDatePickerCompoundContext("DatePicker.ErrorMessage");
-    const typographyClass = size === "large" ? "typography-label12regular" : "typography-label11regular";
+    const { isError, tokens } = useDatePickerSizeTokens("DatePicker.ErrorMessage");
+    const typographyClass = tokens.errorTypography;
     if (isError !== true) {
       return null;
     }
@@ -1881,11 +1949,12 @@ import { jsx as jsx24, jsxs as jsxs7 } from "react/jsx-runtime";
 var CustomMonthCaption = ({ calendarMonth, className, displayIndex, style, ...props }) => {
   void displayIndex;
   const { goToMonth, nextMonth, previousMonth } = useDayPicker();
+  const { tokens } = useDatePickerSizeTokens();
   const captionMonth = calendarMonth.date;
   return /* @__PURE__ */ jsxs7(
     "div",
     {
-      className: clsx18("flex items-center justify-between px-1 pb-0.5", className),
+      className: clsx18(tokens.monthCaptionClass, className),
       style: { ...style, fontSize: "inherit", fontWeight: "inherit" },
       ...props,
       children: [
@@ -1893,19 +1962,19 @@ var CustomMonthCaption = ({ calendarMonth, className, displayIndex, style, ...pr
           IconButton,
           {
             icon: "angle-left",
-            size: "small",
+            size: tokens.navIconButton,
             variant: "text",
             isDisabled: !previousMonth,
             "aria-label": "\u524D\u306E\u6708",
             onClick: () => previousMonth && goToMonth(previousMonth)
           }
         ),
-        /* @__PURE__ */ jsx24("span", { className: "typography-label12bold text-text02", children: formatMonthLabel(captionMonth) }),
+        /* @__PURE__ */ jsx24("span", { className: clsx18(tokens.monthCaptionTypography, "text-text02"), children: formatMonthLabel(captionMonth) }),
         /* @__PURE__ */ jsx24(
           IconButton,
           {
             icon: "angle-right",
-            size: "small",
+            size: tokens.navIconButton,
             variant: "text",
             isDisabled: !nextMonth,
             "aria-label": "\u6B21\u306E\u6708",
@@ -1921,11 +1990,12 @@ var CustomMonthCaption = ({ calendarMonth, className, displayIndex, style, ...pr
 import { clsx as clsx19 } from "clsx";
 import { jsx as jsx25 } from "react/jsx-runtime";
 var CustomWeekday = ({ className, children, style, ...props }) => {
+  const { tokens } = useDatePickerSizeTokens();
   return /* @__PURE__ */ jsx25(
     "th",
     {
       ...props,
-      className: clsx19(className, "m-0 size-7 p-0 text-center align-middle text-text02"),
+      className: clsx19(className, tokens.weekdayClass, "text-text02"),
       style: { ...style, fontSize: "inherit", fontWeight: "bold" },
       children
     }
@@ -2060,7 +2130,7 @@ var DatePicker = ({
       formatWeekdayName: (date) => weekdayFormatter.format(date)
     };
   }, []);
-  const iconSize = size === "large" ? "medium" : "small";
+  const tokens = DATE_PICKER_SIZE_TOKENS[size];
   const displayText = value ? formatDisplayDate(value, timeZone) : placeholder;
   const displayTextClasses = "min-w-0 truncate";
   const errorIds = [];
@@ -2108,7 +2178,7 @@ var DatePicker = ({
         size,
         variant: isError ? "outlineDanger" : "outline",
         isDisabled,
-        before: /* @__PURE__ */ jsx26(Icon, { name: "calendar", size: iconSize }),
+        before: /* @__PURE__ */ jsx26(Icon, { name: "calendar", size: tokens.triggerIcon }),
         justifyContent: "start",
         onClick: handleTriggerClick,
         children: /* @__PURE__ */ jsx26("span", { className: displayTextClasses, children: displayText })
@@ -2122,7 +2192,7 @@ var DatePicker = ({
           showOutsideDays: true,
           hideNavigation: true,
           weekStartsOn: 0,
-          style: dayPickerStyle,
+          style: tokens.dayPickerStyle,
           month: displayMonth,
           onMonthChange: setDisplayMonth,
           selected: selectedDate,
@@ -2130,7 +2200,7 @@ var DatePicker = ({
           today: todayForCalendar,
           disabled: disabledDays,
           modifiers: { minMaxDisabled: isMinMaxDisabled },
-          classNames: dayPickerClassNames,
+          classNames: tokens.dayPickerClassNames,
           formatters,
           fixedWeeks: true,
           components: { MonthCaption: CustomMonthCaption, DayButton: CustomDayButton, Weekday: CustomWeekday }
@@ -2141,14 +2211,14 @@ var DatePicker = ({
           IconButton,
           {
             icon: "calendar-today",
-            size: "medium",
+            size: tokens.footerIconButton,
             variant: "text",
             "aria-label": "\u4ECA\u65E5\u306B\u623B\u308B",
             iconAccentColor: "supportInfo",
             onClick: handleClickToday
           }
         ),
-        /* @__PURE__ */ jsx26(Button, { type: "button", size: "small", variant: "text", onClick: handleClear, children: "\u30AF\u30EA\u30A2" })
+        /* @__PURE__ */ jsx26(Button, { type: "button", size: tokens.footerClearButton, variant: "text", onClick: handleClear, children: "\u30AF\u30EA\u30A2" })
       ] })
     ] }) })
   ] });
@@ -2828,7 +2898,8 @@ function Loading({ size = "medium", position = "fixed", height = "100%" }) {
 }
 
 // src/modal/modal.tsx
-import { useEffect as useEffect10, useState as useState9 } from "react";
+import { FloatingFocusManager, useFloating as useFloating3 } from "@floating-ui/react";
+import { useEffect as useEffect10, useId as useId5, useLayoutEffect as useLayoutEffect3, useRef as useRef11, useState as useState9 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
 
 // src/modal/body-scroll-lock.tsx
@@ -2902,10 +2973,16 @@ function ModalFooter({ children, isNoBorder = false }) {
 
 // src/modal/modal-header.tsx
 import clsx28 from "clsx";
-import { useContext as useContext9 } from "react";
+import { useContext as useContext9, useLayoutEffect as useLayoutEffect2 } from "react";
 import { jsx as jsx36, jsxs as jsxs13 } from "react/jsx-runtime";
 function ModalHeader({ children, isNoBorder = false }) {
-  const { onClose } = useContext9(ModalContext);
+  const { onClose, titleId, setHasTitle } = useContext9(ModalContext);
+  useLayoutEffect2(() => {
+    setHasTitle?.(true);
+    return () => {
+      setHasTitle?.(false);
+    };
+  }, [setHasTitle]);
   const headerClasses = clsx28(
     "typography-h5 flex w-full shrink-0 items-center justify-between rounded-t-lg px-6 text-text01",
     {
@@ -2915,7 +2992,7 @@ function ModalHeader({ children, isNoBorder = false }) {
     }
   );
   return /* @__PURE__ */ jsxs13("div", { className: headerClasses, children: [
-    /* @__PURE__ */ jsx36("div", { children }),
+    /* @__PURE__ */ jsx36("div", { id: titleId, children }),
     onClose && /* @__PURE__ */ jsx36(IconButton, { icon: "close", size: "small", variant: "text", onClick: onClose })
   ] });
 }
@@ -2924,6 +3001,9 @@ function ModalHeader({ children, isNoBorder = false }) {
 import { Fragment as Fragment5, jsx as jsx37, jsxs as jsxs14 } from "react/jsx-runtime";
 var LIMIT_WIDTH = 320;
 var LIMIT_HEIGHT = 184;
+var MODAL_OVERLAY_ATTRIBUTE = "data-zenkigen-modal-overlay";
+var FOLLOWING_INSIDE_SELECTOR = `[data-floating-ui-portal],[${MODAL_OVERLAY_ATTRIBUTE}],[data-floating-ui-focus-guard]`;
+var isFollowing = (base, target) => (base.compareDocumentPosition(target) & Node.DOCUMENT_POSITION_FOLLOWING) !== 0;
 function Modal({
   children,
   width = 480,
@@ -2934,6 +3014,26 @@ function Modal({
   portalTargetRef
 }) {
   const [isMounted, setIsMounted] = useState9(false);
+  const overlayRef = useRef11(null);
+  const titleId = useId5();
+  const [hasTitle, setHasTitle] = useState9(false);
+  const { refs, context } = useFloating3({ open: isOpen });
+  const returnFocusRef = useRef11(null);
+  useLayoutEffect3(() => {
+    if (isOpen) {
+      returnFocusRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    }
+  }, [isOpen]);
+  const getInsideElements = () => {
+    const overlay = overlayRef.current;
+    const topLayers = Array.from(document.querySelectorAll(`[${TOP_LAYER_ATTRIBUTE}]`));
+    const following = overlay == null ? [] : Array.from(document.querySelectorAll(FOLLOWING_INSIDE_SELECTOR)).filter(
+      (element) => isFollowing(overlay, element)
+    );
+    return [...topLayers, ...following].filter(
+      (element) => element !== document.body && element !== document.documentElement
+    );
+  };
   const renderWidth = typeof width === "number" ? Math.max(width, LIMIT_WIDTH) : width;
   const renderHeight = typeof height === "number" ? Math.max(height, LIMIT_HEIGHT) : height;
   useEffect10(() => {
@@ -2947,16 +3047,36 @@ function Modal({
   return isMounted && isOpen ? /* @__PURE__ */ jsxs14(Fragment5, { children: [
     /* @__PURE__ */ jsx37(BodyScrollLock, {}),
     createPortal2(
-      /* @__PURE__ */ jsx37(ModalContext.Provider, { value: { onClose }, children: /* @__PURE__ */ jsx37("div", { className: "fixed left-0 top-0 z-overlay flex size-full items-center justify-center bg-backgroundOverlayBlack py-4", children: /* @__PURE__ */ jsx37(
-        "div",
+      /* @__PURE__ */ jsx37(ModalContext.Provider, { value: { onClose, titleId, setHasTitle }, children: /* @__PURE__ */ jsx37(
+        FloatingFocusManager,
         {
-          role: "dialog",
-          "aria-modal": "true",
-          className: "grid max-h-full min-h-[120px] grid-rows-[max-content_1fr_max-content] flex-col rounded-lg bg-uiBackground01 shadow-modalShadow",
-          style: { width: renderWidth, height: renderHeight, maxWidth },
-          children
+          context,
+          initialFocus: refs.floating,
+          returnFocus: returnFocusRef,
+          outsideElementsInert: true,
+          getInsideElements,
+          children: /* @__PURE__ */ jsx37(
+            "div",
+            {
+              ref: overlayRef,
+              ...{ [MODAL_OVERLAY_ATTRIBUTE]: "" },
+              className: "fixed left-0 top-0 z-overlay flex size-full items-center justify-center bg-backgroundOverlayBlack py-4",
+              children: /* @__PURE__ */ jsx37(
+                "div",
+                {
+                  ref: refs.setFloating,
+                  role: "dialog",
+                  "aria-modal": "true",
+                  ...hasTitle && { "aria-labelledby": titleId },
+                  className: "grid max-h-full min-h-[120px] grid-rows-[max-content_1fr_max-content] flex-col rounded-lg bg-uiBackground01 shadow-modalShadow outline-none",
+                  style: { width: renderWidth, height: renderHeight, maxWidth },
+                  children
+                }
+              )
+            }
+          )
         }
-      ) }) }),
+      ) }),
       portalTargetRef?.current != null ? portalTargetRef.current : document.body
     )
   ] }) : null;
@@ -2995,7 +3115,8 @@ function NotificationInline({ state = "default", size = "medium", variant = "def
     "fill-supportSuccess": state === "success"
   });
   const textClasses = clsx29("flex-1", {
-    "pt-[2px]": size === "medium" && state !== "default"
+    "pt-[3px]": size === "medium" && state !== "default",
+    "pt-[1px]": size === "small" && state !== "default"
   });
   const iconName = {
     attention: "attention",
@@ -3116,15 +3237,16 @@ function Pagination({ currentPage, totalPage, sideNumPagesToShow = 3, onClick })
 }
 
 // src/select/select.tsx
-import { autoUpdate as autoUpdate3, FloatingPortal as FloatingPortal3, offset as offset3, size as sizeMiddleware2, useFloating as useFloating3 } from "@floating-ui/react";
+import { autoUpdate as autoUpdate3, FloatingPortal as FloatingPortal3, offset as offset3, size as sizeMiddleware2, useFloating as useFloating4 } from "@floating-ui/react";
 import { focusVisible as focusVisible11, selectColors } from "@zenkigen-inc/component-theme";
 import clsx33 from "clsx";
-import { useRef as useRef11, useState as useState10 } from "react";
+import { useRef as useRef12, useState as useState10 } from "react";
 
 // src/select/select-context.ts
 import { createContext as createContext10 } from "react";
 var SelectContext = createContext10({
   size: "medium",
+  isDeselectVisible: false,
   setIsOptionListOpen: () => false,
   variant: "outline",
   isError: false
@@ -3163,31 +3285,43 @@ function SelectItem({ option }) {
 // src/select/select-list.tsx
 import { focusVisible as focusVisible10 } from "@zenkigen-inc/component-theme";
 import clsx32 from "clsx";
-import { forwardRef as forwardRef10, useContext as useContext12, useLayoutEffect as useLayoutEffect2 } from "react";
+import { forwardRef as forwardRef10, useContext as useContext12, useLayoutEffect as useLayoutEffect4 } from "react";
 import { jsx as jsx42, jsxs as jsxs18 } from "react/jsx-runtime";
 var SelectList = forwardRef10(({ children, maxHeight }, ref) => {
-  const { selectedOption, setIsOptionListOpen, variant, placeholder, onChange, floatingStyles, floatingRef, size } = useContext12(SelectContext);
+  const {
+    selectedOption,
+    setIsOptionListOpen,
+    variant,
+    isDeselectVisible,
+    onChange,
+    floatingStyles,
+    floatingRef,
+    size
+  } = useContext12(SelectContext);
   const handleClickDeselect = () => {
     onChange?.(null);
     setIsOptionListOpen(false);
   };
-  useLayoutEffect2(() => {
-    if (maxHeight != null && selectedOption != null) {
-      const container = floatingRef?.current;
-      if (container != null) {
-        const element = container.querySelector(`[data-id="${selectedOption.id}"]`);
-        if (element != null) {
-          const htmlElement = element;
-          const elementTop = htmlElement.offsetTop;
-          const elementHeight = htmlElement.offsetHeight;
-          const containerHeight = container.clientHeight;
-          const scrollTop = elementTop - (containerHeight - elementHeight) / 2;
-          container.scrollTo({
-            top: Math.max(0, scrollTop)
-          });
-        }
-      }
+  useLayoutEffect4(() => {
+    if (selectedOption == null) {
+      return;
+    }
+    const container = floatingRef?.current;
+    if (container == null || container.scrollHeight <= container.clientHeight) {
+      return;
+    }
+    const element = container.querySelector(`[data-id="${selectedOption.id}"]`);
+    if (element == null) {
+      return;
     }
+    const htmlElement = element;
+    const elementTop = htmlElement.offsetTop;
+    const elementHeight = htmlElement.offsetHeight;
+    const containerHeight = container.clientHeight;
+    const scrollTop = elementTop - (containerHeight - elementHeight) / 2;
+    container.scrollTo({
+      top: Math.max(0, scrollTop)
+    });
   }, [selectedOption, maxHeight, floatingRef]);
   const listClasses = clsx32("overflow-y-auto rounded bg-uiBackground01 py-2 shadow-floatingShadow", {
     "border-solid border border-uiBorder01": variant === "outline"
@@ -3202,7 +3336,7 @@ var SelectList = forwardRef10(({ children, maxHeight }, ref) => {
   );
   return /* @__PURE__ */ jsxs18("ul", { className: listClasses, style: { maxHeight, ...floatingStyles }, ref, children: [
     children,
-    placeholder != null && selectedOption !== null && /* @__PURE__ */ jsx42("li", { children: /* @__PURE__ */ jsx42("button", { className: deselectButtonClasses, type: "button", onClick: handleClickDeselect, children: "\u9078\u629E\u89E3\u9664" }) })
+    isDeselectVisible && selectedOption !== null && /* @__PURE__ */ jsx42("li", { children: /* @__PURE__ */ jsx42("button", { className: deselectButtonClasses, type: "button", onClick: handleClickDeselect, children: "\u9078\u629E\u89E3\u9664" }) })
   ] });
 });
 SelectList.displayName = "SelectList";
@@ -3210,6 +3344,10 @@ SelectList.displayName = "SelectList";
 // src/select/select.tsx
 import { jsx as jsx43, jsxs as jsxs19 } from "react/jsx-runtime";
 var FLOATING_OFFSET2 = 4;
+var OPTION_HEIGHT_PX = { "x-small": 32, small: 32, medium: 32, large: 40 };
+var DEFAULT_VISIBLE_OPTION_COUNT = 8.5;
+var LIST_VERTICAL_CHROME_PX = 10;
+var getDefaultOptionListMaxHeight = (size) => OPTION_HEIGHT_PX[size] * DEFAULT_VISIBLE_OPTION_COUNT + LIST_VERTICAL_CHROME_PX;
 function Select({
   children,
   size = "medium",
@@ -3222,6 +3360,7 @@ function Select({
   isDisabled = false,
   isError = false,
   isOptionSelected = false,
+  hasDeselectButton,
   onChange,
   optionListMaxHeight,
   matchListToTrigger = false,
@@ -3229,14 +3368,14 @@ function Select({
   "aria-describedby": ariaDescribedby
 }) {
   const [isOptionListOpen, setIsOptionListOpen] = useState10(false);
-  const targetRef = useRef11(null);
+  const targetRef = useRef12(null);
   useOutsideClick(targetRef, () => setIsOptionListOpen(false));
   useDismissOnModalOpen(() => {
     if (isOptionListOpen) {
       setIsOptionListOpen(false);
     }
   });
-  const { refs, floatingStyles } = useFloating3({
+  const { refs, floatingStyles } = useFloating4({
     open: isOptionListOpen,
     onOpenChange: setIsOptionListOpen,
     placement: "bottom-start",
@@ -3257,8 +3396,10 @@ function Select({
     whileElementsMounted: autoUpdate3
   });
   const handleClickToggle = () => setIsOptionListOpen((prev) => !prev);
+  const resolvedOptionListMaxHeight = optionListMaxHeight ?? getDefaultOptionListMaxHeight(size);
   const buttonVariant = isError && !isDisabled ? `${variant}Error` : variant;
   const isSelected = isOptionSelected && !isDisabled && selectedOption !== null && !isError;
+  const isDeselectVisible = hasDeselectButton ?? placeholder != null;
   const wrapperClasses = clsx33("relative flex shrink-0 items-center gap-1 rounded bg-uiBackground01", {
     "h-6": size === "x-small" || size === "small",
     "h-8": size === "medium",
@@ -3294,7 +3435,7 @@ function Select({
       value: {
         size,
         variant,
-        placeholder,
+        isDeselectVisible,
         setIsOptionListOpen,
         selectedOption,
         onChange,
@@ -3327,7 +3468,7 @@ function Select({
             ]
           }
         ),
-        isOptionListOpen && !isDisabled && /* @__PURE__ */ jsx43(FloatingPortal3, { children: /* @__PURE__ */ jsx43("div", { className: "relative z-popover", children: /* @__PURE__ */ jsx43(SelectList, { ref: refs.setFloating, maxHeight: optionListMaxHeight, children }) }) })
+        isOptionListOpen && !isDisabled && /* @__PURE__ */ jsx43(FloatingPortal3, { children: /* @__PURE__ */ jsx43("div", { className: "relative z-popover", children: /* @__PURE__ */ jsx43(SelectList, { ref: refs.setFloating, maxHeight: resolvedOptionListMaxHeight, children }) }) })
       ] })
     }
   );
@@ -3621,7 +3762,7 @@ function Radio({
 }
 
 // src/radio-card/radio-card.tsx
-import { Children as Children5, cloneElement as cloneElement5, isValidElement as isValidElement5, useId as useId6, useMemo as useMemo6 } from "react";
+import { Children as Children5, cloneElement as cloneElement5, isValidElement as isValidElement5, useId as useId7, useMemo as useMemo6 } from "react";
 
 // src/radio-card/radio-card-context.ts
 import { createContext as createContext12, useContext as useContext15 } from "react";
@@ -3667,11 +3808,11 @@ RadioCardGroup.displayName = "RadioCard.Group";
 // src/radio-card/radio-card-item.tsx
 import { focusVisible as focusVisible13 } from "@zenkigen-inc/component-theme";
 import clsx35 from "clsx";
-import { useId as useId5 } from "react";
+import { useId as useId6 } from "react";
 import { jsx as jsx53, jsxs as jsxs23 } from "react/jsx-runtime";
 function RadioCardItem({ value, label, description, isDisabled: itemDisabled = false, id }) {
   const context = useRadioCardContext("RadioCard.Item");
-  const autoId = useId5();
+  const autoId = useId6();
   const inputId = id ?? autoId;
   const labelId = `${inputId}-label`;
   const descriptionId = `${inputId}-description`;
@@ -3765,8 +3906,8 @@ function RadioCardRoot({
   "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledby
 }) {
-  const autoName = useId6();
-  const baseId = useId6();
+  const autoName = useId7();
+  const baseId = useId7();
   const resolvedName = name ?? autoName;
   const errorIds = [];
   const enhancedChildren = Children5.map(children, (child) => {
@@ -3846,7 +3987,7 @@ var Search = forwardRef12(({ width = "100%", size = "medium", ...props }, ref) =
 Search.displayName = "Search";
 
 // src/segmented-control/segmented-control.tsx
-import React4, { Children as Children6, useRef as useRef13 } from "react";
+import React4, { Children as Children6, useRef as useRef14 } from "react";
 
 // src/segmented-control/segmented-control-context.ts
 import { createContext as createContext13 } from "react";
@@ -3855,7 +3996,7 @@ var SegmentedControlContext = createContext13(null);
 // src/segmented-control/segmented-control-item.tsx
 import { focusVisible as focusVisible14 } from "@zenkigen-inc/component-theme";
 import { clsx as clsx37 } from "clsx";
-import { useContext as useContext16, useEffect as useEffect11, useRef as useRef12 } from "react";
+import { useContext as useContext16, useEffect as useEffect11, useRef as useRef13 } from "react";
 import { jsx as jsx56, jsxs as jsxs25 } from "react/jsx-runtime";
 var SegmentedControlItem = ({
   label,
@@ -3866,8 +4007,8 @@ var SegmentedControlItem = ({
   ...rest
 }) => {
   const context = useContext16(SegmentedControlContext);
-  const buttonRef = useRef12(null);
-  const lastInteractionWasMouse = useRef12(false);
+  const buttonRef = useRef13(null);
+  const lastInteractionWasMouse = useRef13(false);
   if (context === null) {
     throw new Error("SegmentedControl.Item must be used within SegmentedControl");
   }
@@ -3960,7 +4101,7 @@ var SegmentedControl = ({
   "aria-label": ariaLabel,
   ...rest
 }) => {
-  const containerRef = useRef13(null);
+  const containerRef = useRef14(null);
   const itemIds = Children6.toArray(children).filter((child) => {
     if (!React4.isValidElement(child) || typeof child.props !== "object" || child.props === null || !("value" in child.props)) {
       return false;
@@ -4014,7 +4155,7 @@ SegmentedControl.Item = SegmentedControlItem;
 // src/select-sort/select-sort.tsx
 import { buttonColors as buttonColors4, focusVisible as focusVisible17 } from "@zenkigen-inc/component-theme";
 import clsx40 from "clsx";
-import { useCallback as useCallback13, useRef as useRef14, useState as useState13 } from "react";
+import { useCallback as useCallback13, useRef as useRef15, useState as useState13 } from "react";
 
 // src/select-sort/select-list.tsx
 import { focusVisible as focusVisible16 } from "@zenkigen-inc/component-theme";
@@ -4082,7 +4223,7 @@ function SelectSort({
   onClickDeselect
 }) {
   const [isOptionListOpen, setIsOptionListOpen] = useState13(false);
-  const targetRef = useRef14(null);
+  const targetRef = useRef15(null);
   useOutsideClick(targetRef, () => setIsOptionListOpen(false));
   useDismissOnModalOpen(() => {
     if (isOptionListOpen) {
@@ -4227,7 +4368,7 @@ function SortButton({
 
 // src/steps/steps.tsx
 import { clsx as clsx44 } from "clsx";
-import { Children as Children7, Fragment as Fragment7, isValidElement as isValidElement6, useId as useId7, useMemo as useMemo7, useState as useState14 } from "react";
+import { Children as Children7, Fragment as Fragment7, isValidElement as isValidElement6, useId as useId8, useMemo as useMemo7, useState as useState14 } from "react";
 
 // src/steps/steps-context.ts
 import { createContext as createContext14, useContext as useContext17 } from "react";
@@ -4412,7 +4553,7 @@ function StepsRoot({
   variant = "solid",
   "aria-label": ariaLabel
 }) {
-  const baseId = useId7();
+  const baseId = useId8();
   const [internalStep] = useState14(defaultCurrentStep ?? 0);
   const resolvedCurrentStep = currentStep ?? internalStep;
   const itemElements = useMemo7(() => collectStepsItems(children), [children]);
@@ -4616,7 +4757,7 @@ function Tag({ id, children, color, variant = "normal", size = "medium", isEdita
 
 // src/text-area/text-area.tsx
 import { clsx as clsx53 } from "clsx";
-import { Children as Children9, cloneElement as cloneElement6, forwardRef as forwardRef15, isValidElement as isValidElement7, useId as useId8, useMemo as useMemo8 } from "react";
+import { Children as Children9, cloneElement as cloneElement6, forwardRef as forwardRef15, isValidElement as isValidElement7, useId as useId9, useMemo as useMemo8 } from "react";
 
 // src/text-area/text-area-context.tsx
 import { createContext as createContext16, useContext as useContext19 } from "react";
@@ -4677,7 +4818,7 @@ function TextAreaInner({
   maxLength,
   ...props
 }, ref) {
-  const autoGeneratedId = useId8();
+  const autoGeneratedId = useId9();
   const textAreaPropsForContext = useMemo8(
     () => ({
       size,
@@ -4840,7 +4981,7 @@ var TextArea = attachStatics2(TextAreaBase);
 
 // src/time-picker/time-picker.tsx
 import { clsx as clsx55 } from "clsx";
-import { Children as Children10, cloneElement as cloneElement7, Fragment as Fragment8, isValidElement as isValidElement8, useId as useId9, useMemo as useMemo9 } from "react";
+import { Children as Children10, cloneElement as cloneElement7, Fragment as Fragment8, isValidElement as isValidElement8, useId as useId10, useMemo as useMemo9 } from "react";
 
 // src/time-picker/time-picker-context.tsx
 import { createContext as createContext17, useContext as useContext20 } from "react";
@@ -4980,7 +5121,7 @@ var TimePicker = ({
   isError = false,
   children
 }) => {
-  const autoGeneratedId = useId9();
+  const autoGeneratedId = useId10();
   const hourOptions = useMemo9(() => generateHourOptions(minuteStep, minTime, maxTime), [minuteStep, minTime, maxTime]);
   const minuteOptions = useMemo9(
     () => generateMinuteOptions(minuteStep, value.hour, minTime, maxTime),
@@ -5071,40 +5212,88 @@ TimePicker.ErrorMessage = TimePickerErrorMessage;
 TimePicker.displayName = "TimePicker";
 
 // src/toast/toast.tsx
-import clsx56 from "clsx";
-import { useCallback as useCallback15, useEffect as useEffect12, useState as useState15 } from "react";
+import { clsx as clsx56 } from "clsx";
+import { useCallback as useCallback15, useEffect as useEffect12, useRef as useRef16, useState as useState15 } from "react";
 import { jsx as jsx77, jsxs as jsxs35 } from "react/jsx-runtime";
 var CLOSE_TIME_MSEC = 5e3;
+var REMOVAL_FALLBACK_MSEC = 1e3;
 function Toast({
   state = "information",
   width = "auto",
+  // 既定 false は v1.22.0 までの互換維持のため据え置き（自動クローズしない既定では、安全弁により閉じるボタンが表示される）。
+  // 「自動クローズ・閉じるボタンなし」の新しい既定は ToastProvider が isAutoClose を明示的に渡すことで実現している。
   isAutoClose = false,
   isAnimation = false,
+  hasCloseButton = false,
+  description,
   children,
   onClickClose
 }) {
   const [isRemoving, setIsRemoving] = useState15(false);
+  const onClickCloseRef = useRef16(onClickClose);
+  useEffect12(() => {
+    onClickCloseRef.current = onClickClose;
+  }, [onClickClose]);
+  const hasNotifiedCloseRef = useRef16(false);
+  const notifyClose = useCallback15(() => {
+    if (hasNotifiedCloseRef.current) {
+      return;
+    }
+    hasNotifiedCloseRef.current = true;
+    onClickCloseRef.current();
+  }, []);
   const handleClose = useCallback15(() => {
     if (isAnimation) {
       setIsRemoving(true);
     } else {
-      onClickClose();
+      notifyClose();
     }
-  }, [isAnimation, onClickClose]);
-  const handleAnimationEnd = (e) => window.getComputedStyle(e.currentTarget).opacity === "0" && onClickClose();
-  const wrapperClasses = clsx56("pointer-events-auto flex items-start gap-1 bg-white p-4 shadow-floatingShadow", {
-    ["animate-toast-in"]: isAnimation && !isRemoving,
-    ["animate-toast-out opacity-0"]: isAnimation && isRemoving
-  });
-  const iconClasses = clsx56("flex items-center", {
+  }, [isAnimation, notifyClose]);
+  const handleAnimationEnd = (e) => {
+    if (e.target !== e.currentTarget) {
+      return;
+    }
+    if (window.getComputedStyle(e.currentTarget).opacity === "0") {
+      notifyClose();
+    }
+  };
+  useEffect12(() => {
+    if (!isAutoClose) {
+      return;
+    }
+    const timer = window.setTimeout(() => {
+      if (isAnimation) {
+        setIsRemoving(true);
+      } else {
+        notifyClose();
+      }
+    }, CLOSE_TIME_MSEC);
+    return () => window.clearTimeout(timer);
+  }, [isAutoClose, isAnimation, notifyClose]);
+  useEffect12(() => {
+    if (!isRemoving) {
+      return;
+    }
+    const fallbackTimer = window.setTimeout(notifyClose, REMOVAL_FALLBACK_MSEC);
+    return () => window.clearTimeout(fallbackTimer);
+  }, [isRemoving, notifyClose]);
+  const isCloseButtonShown = hasCloseButton || !isAutoClose;
+  const wrapperClasses = clsx56(
+    "pointer-events-auto flex items-center gap-3 rounded border border-solid border-uiBorder01 bg-uiBackground01 p-4 shadow-floatingShadow",
+    {
+      ["animate-toast-in"]: isAnimation && !isRemoving,
+      ["animate-toast-out opacity-0"]: isAnimation && isRemoving
+    }
+  );
+  const iconClasses = clsx56("flex shrink-0 items-center", {
     "fill-supportSuccess": state === "success",
     "fill-supportError": state === "error",
     "fill-supportWarning": state === "warning",
     "fill-supportInfo": state === "information"
   });
-  const textClasses = clsx56("typography-body13regular flex-1 pt-[3px]", {
+  const titleClasses = clsx56("typography-body13regular break-words", {
     "text-supportError": state === "error",
-    "text-text01": state === "success" || state === "warning" || state === "information"
+    "text-text01": state !== "error"
   });
   const iconName = {
     success: "success-filled",
@@ -5112,32 +5301,45 @@ function Toast({
     warning: "warning",
     information: "information-filled"
   };
-  useEffect12(() => {
-    const timer = window.setTimeout(() => {
-      if (isAutoClose) {
-        setIsRemoving(true);
-      }
-    }, CLOSE_TIME_MSEC);
-    return () => window.clearTimeout(timer);
-  }, [isAutoClose]);
   return /* @__PURE__ */ jsxs35("div", { className: wrapperClasses, style: { width }, onAnimationEnd: handleAnimationEnd, children: [
-    /* @__PURE__ */ jsx77("div", { className: iconClasses, children: /* @__PURE__ */ jsx77(Icon, { name: iconName[state] }) }),
-    /* @__PURE__ */ jsx77("p", { className: textClasses, children }),
-    /* @__PURE__ */ jsx77(IconButton, { icon: "close", size: "medium", variant: "text", onClick: handleClose, isNoPadding: true })
+    /* @__PURE__ */ jsxs35("div", { className: "flex min-w-0 flex-1 items-start gap-1", children: [
+      /* @__PURE__ */ jsx77("div", { className: iconClasses, children: /* @__PURE__ */ jsx77(Icon, { name: iconName[state] }) }),
+      /* @__PURE__ */ jsxs35("div", { className: "flex min-w-0 flex-1 flex-col gap-2 pt-[3px]", children: [
+        /* @__PURE__ */ jsx77("p", { className: titleClasses, children }),
+        description != null && description !== "" && /* @__PURE__ */ jsx77("p", { className: "typography-label12regular break-words text-text01", children: description })
+      ] })
+    ] }),
+    isCloseButtonShown && /* @__PURE__ */ jsx77("div", { className: "flex shrink-0 items-center", children: /* @__PURE__ */ jsx77(IconButton, { icon: "close", size: "medium", variant: "text", isNoPadding: true, "aria-label": "\u9589\u3058\u308B", onClick: handleClose }) })
   ] });
 }
 
 // src/toast/toast-provider.tsx
-import { createContext as createContext18, useCallback as useCallback16, useContext as useContext21, useEffect as useEffect13, useState as useState16 } from "react";
+import { createContext as createContext18, useCallback as useCallback16, useContext as useContext21, useEffect as useEffect13, useRef as useRef17, useState as useState16 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
 import { jsx as jsx78, jsxs as jsxs36 } from "react/jsx-runtime";
 var ToastContext = createContext18({});
-var ToastProvider = ({ children }) => {
+var ToastProvider = ({ children, hasCloseButton = false }) => {
   const [isClientRender, setIsClientRender] = useState16(false);
   const [toasts, setToasts] = useState16([]);
-  const addToast = useCallback16(({ message, state }) => {
-    setToasts((prev) => [...prev, { id: Math.trunc(Math.random() * 1e5), message, state }]);
-  }, []);
+  const nextIdRef = useRef17(0);
+  const addToast = useCallback16(
+    (args) => {
+      nextIdRef.current += 1;
+      const id = nextIdRef.current;
+      setToasts((prev) => [
+        ...prev,
+        {
+          id,
+          message: args.message,
+          state: args.state,
+          description: args.description,
+          hasCloseButton: args.hasCloseButton ?? hasCloseButton,
+          isAutoClose: args.isAutoClose ?? true
+        }
+      ]);
+    },
+    [hasCloseButton]
+  );
   const removeToast = useCallback16((id) => {
     setToasts((prev) => prev.filter((snackbar) => snackbar.id !== id));
   }, []);
@@ -5147,7 +5349,28 @@ var ToastProvider = ({ children }) => {
   return /* @__PURE__ */ jsxs36(ToastContext.Provider, { value: { addToast, removeToast }, children: [
     children,
     isClientRender && createPortal3(
-      /* @__PURE__ */ jsx78("div", { className: "pointer-events-none fixed bottom-0 left-0 z-toast mb-4 ml-4 flex w-full flex-col-reverse gap-[16px]", children: toasts.map(({ id, message, state }) => /* @__PURE__ */ jsx78(Toast, { state, isAutoClose: true, isAnimation: true, onClickClose: () => removeToast(id), width: 475, children: message }, id)) }),
+      /* @__PURE__ */ jsx78(
+        "div",
+        {
+          ...{ [TOP_LAYER_ATTRIBUTE]: "" },
+          role: "region",
+          "aria-label": "\u901A\u77E5",
+          className: "pointer-events-none fixed bottom-0 left-0 z-toast mb-4 ml-4 flex w-full flex-col-reverse gap-4",
+          children: toasts.map((toast) => /* @__PURE__ */ jsx78("div", { role: toast.state === "error" ? "alert" : "status", children: /* @__PURE__ */ jsx78(
+            Toast,
+            {
+              state: toast.state,
+              description: toast.description,
+              hasCloseButton: toast.hasCloseButton,
+              isAutoClose: toast.isAutoClose,
+              isAnimation: true,
+              width: 475,
+              onClickClose: () => removeToast(toast.id),
+              children: toast.message
+            }
+          ) }, toast.id))
+        }
+      ),
       document.body
     )
   ] });
@@ -5213,7 +5436,7 @@ function Toggle({
 }
 
 // src/tooltip/tooltip.tsx
-import { useCallback as useCallback18, useEffect as useEffect14, useRef as useRef15, useState as useState17 } from "react";
+import { useCallback as useCallback18, useEffect as useEffect14, useRef as useRef18, useState as useState17 } from "react";
 import { createPortal as createPortal4 } from "react-dom";
 
 // src/tooltip/tooltip-content.tsx
@@ -5384,7 +5607,7 @@ function Tooltip({
     translateX: "0",
     translateY: "0"
   });
-  const targetRef = useRef15(null);
+  const targetRef = useRef18(null);
   const handleMouseOverWrapper = useCallback18(() => {
     if (isDisabledHover) {
       return;