@geckou/ui-react 0.7.0 → 0.9.0

package/README.md

@@ -108,6 +108,31 @@ props は Vue 版（`@geckou/ui-vue`）と揃えている。`v-model` にあた
 yarn workspace @geckou/ui-react test
 ```
 
+## 0.9.0 の変更
+
+- `DropdownUi` が Escape で閉じ、トリガーへフォーカスを戻す。処理したときは
+  `preventDefault()` するので、`ModalBox` の中に置いてもダイアログまで閉じない
+- `DropdownUi` / `SlideDownUi` のトリガーに `aria-controls` が付き、
+  `DropdownUi` には `aria-haspopup="true"` も付く
+
+## 0.8.0 の変更
+
+- `BasicButton` はローディング中に `disabled` にしない（押した瞬間にフォーカスが
+  `body` へ落ちるため）。代わりに `aria-disabled` / `aria-busy` を付け、
+  `pointer-events` と `onClick` ガードで押せなくする。**`:disabled` を前提に
+  スタイルを当てている場合は `[aria-disabled]` の追従が要る**
+- `BasicButton` のローディング中もアクセシブル名を保つ（`invisible` → `opacity-0`）。
+  `LoadingSpinner` は `aria-hidden="true"`
+- `BasicButton` の hover 色が `color-mix()` になった。`${色}cc` の文字列連結だったため、
+  3 桁 hex（`'#fff'`）・`rgb()`・名前色・`var()` では不正値になっていた
+- `PopupBox` は**表示している間だけ**子要素を描画する。常時 DOM にあると
+  `opacity` の切り替えでは支援技術に通知されず、非表示中も文言が読めていた
+- `ModalBox` は開いたままアンマウントされてもフォーカスを戻す
+- `ModalBox` の背景クリック判定が「押し始めも背景だったとき」だけになった。
+  ダイアログ内でテキスト選択を始めて背景で離すと閉じていた
+- `RadioButtons` が `role="radiogroup"` になり、`ariaLabel` / `ariaLabelledBy` を受ける。
+  エラーは `aria-describedby` で結び付く
+- `ErrorMessage` が `id` を受ける（`aria-describedby` から参照するため）
 ## 0.7.0 の変更
 
 - `CheckBox` / `LabeledCheckbox` に `value` を追加。`CheckBoxes` は各選択肢の

package/dist/components/BasicButton.js

@@ -1,57 +1,72 @@
 "use client";
-import { jsxs as z, jsx as t } from "react/jsx-runtime";
-import { LoadingSpinner as $ } from "./LoadingSpinner.js";
-import { COLOR as n } from "@geckou/ui-core";
-function B({
+import { jsxs as j, jsx as i } from "react/jsx-runtime";
+import { LoadingSpinner as I } from "./LoadingSpinner.js";
+import { COLOR as d } from "@geckou/ui-core";
+function O({
   cssStyle: r,
-  duration: m = 0.3,
-  isLoading: d,
-  isDisabled: a,
+  duration: p = 0.3,
+  isLoading: a,
+  isDisabled: n,
   buttonType: v = "button",
-  onClick: f,
-  loading: k,
-  children: p
+  onClick: b,
+  loading: w,
+  children: k
 }) {
-  var b, u, i, l, c, s, h, x, g;
-  const w = a ? r == null ? void 0 : r.disabled : r == null ? void 0 : r.default, o = {
-    textColor: n.white,
-    backgroundColor: a ? n.darkGray : n.blue,
+  var u, l, s, c, h, f, x, m, g;
+  const z = n ? r == null ? void 0 : r.disabled : r == null ? void 0 : r.default, e = {
+    textColor: d.white,
+    backgroundColor: n ? d.darkGray : d.blue,
     backgroundImage: "none",
     border: {
-      color: a ? n.darkGray : n.blue,
+      color: n ? d.darkGray : d.blue,
       size: "1px",
       radius: ".25rem"
     },
     boxShadow: "0 0 0 0 transparent",
-    ...w
-  }, e = (r == null ? void 0 : r.hover) || {}, C = {
-    "--text-color": o.textColor,
-    "--background-color": o.backgroundColor,
-    "--background-image": o.backgroundImage,
-    "--radius-size": (b = o.border) == null ? void 0 : b.radius,
-    "--button-shadow": `0 0 0 ${(u = o.border) == null ? void 0 : u.size} ${(i = o.border) == null ? void 0 : i.color} inset, ${o.boxShadow}`,
-    "--hover-text-color": e.textColor || o.textColor,
-    "--hover-background-color": e.backgroundColor || o.backgroundColor && `${o.backgroundColor}cc`,
-    "--hover-background-image": e.backgroundImage || o.backgroundImage,
-    "--hover-radius-size": ((l = e.border) == null ? void 0 : l.radius) || ((c = o.border) == null ? void 0 : c.radius),
-    "--hover-button-shadow": `0 0 0 ${((s = e.border) == null ? void 0 : s.size) || ((h = o.border) == null ? void 0 : h.size)} ${((x = e.border) == null ? void 0 : x.color) || ((g = o.border) == null ? void 0 : g.color)} inset, ${e.boxShadow || o.boxShadow}`,
-    "--duration": `${m}s`
+    ...z
+  }, o = (r == null ? void 0 : r.hover) || {}, $ = (t) => t && `color-mix(in srgb, ${t} 80%, transparent)`, C = {
+    "--text-color": e.textColor,
+    "--background-color": e.backgroundColor,
+    "--background-image": e.backgroundImage,
+    "--radius-size": (u = e.border) == null ? void 0 : u.radius,
+    "--button-shadow": `0 0 0 ${(l = e.border) == null ? void 0 : l.size} ${(s = e.border) == null ? void 0 : s.color} inset, ${e.boxShadow}`,
+    "--hover-text-color": o.textColor || e.textColor,
+    "--hover-background-color": o.backgroundColor || $(e.backgroundColor),
+    "--hover-background-image": o.backgroundImage || e.backgroundImage,
+    "--hover-radius-size": ((c = o.border) == null ? void 0 : c.radius) || ((h = e.border) == null ? void 0 : h.radius),
+    "--hover-button-shadow": `0 0 0 ${((f = o.border) == null ? void 0 : f.size) || ((x = e.border) == null ? void 0 : x.size)} ${((m = o.border) == null ? void 0 : m.color) || ((g = e.border) == null ? void 0 : g.color)} inset, ${o.boxShadow || e.boxShadow}`,
+    "--duration": `${p}s`
   };
-  return /* @__PURE__ */ z(
+  return /* @__PURE__ */ j(
     "button",
     {
       type: v,
-      disabled: a || d,
-      onClick: f,
+      disabled: n,
+      "aria-disabled": n || a || void 0,
+      "aria-busy": a || void 0,
+      onClick: (t) => {
+        if (a) {
+          t.preventDefault();
+          return;
+        }
+        b == null || b(t);
+      },
       style: C,
-      className: "relative inline-flex w-max cursor-pointer items-center justify-center rounded-(--radius-size) border-none bg-(--background-color) px-8 py-4 leading-none text-(--text-color) shadow-(--button-shadow) transition-all duration-(--duration) enabled:hover:rounded-(--hover-radius-size) enabled:hover:bg-(--hover-background-color) enabled:hover:text-(--hover-text-color) enabled:hover:shadow-(--hover-button-shadow) disabled:pointer-events-none disabled:before:pointer-events-auto disabled:before:absolute disabled:before:inset-0 disabled:before:cursor-not-allowed disabled:before:content-['']",
+      className: "relative inline-flex w-max cursor-pointer items-center justify-center rounded-(--radius-size) border-none bg-(--background-color) px-8 py-4 leading-none text-(--text-color) shadow-(--button-shadow) transition-all duration-(--duration) enabled:hover:rounded-(--hover-radius-size) enabled:hover:bg-(--hover-background-color) enabled:hover:text-(--hover-text-color) enabled:hover:shadow-(--hover-button-shadow) disabled:pointer-events-none disabled:before:pointer-events-auto disabled:before:absolute disabled:before:inset-0 disabled:before:cursor-not-allowed disabled:before:content-[''] aria-disabled:pointer-events-none aria-disabled:before:pointer-events-auto aria-disabled:before:absolute aria-disabled:before:inset-0 aria-disabled:before:cursor-not-allowed aria-disabled:before:content-['']",
       children: [
-        d && /* @__PURE__ */ t("span", { className: "absolute inset-0 m-auto flex max-h-[calc(100%-1.5rem)] items-center justify-center fill-current text-current [&_*]:max-h-full [&_*]:fill-current", children: k ?? /* @__PURE__ */ t($, {}) }),
-        /* @__PURE__ */ t("span", { className: d ? "invisible" : void 0, children: p })
+        a && /* @__PURE__ */ i(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "absolute inset-0 m-auto flex max-h-[calc(100%-1.5rem)] items-center justify-center fill-current text-current [&_*]:max-h-full [&_*]:fill-current",
+            children: w ?? /* @__PURE__ */ i(I, {})
+          }
+        ),
+        /* @__PURE__ */ i("span", { className: a ? "opacity-0" : void 0, children: k })
       ]
     }
   );
 }
 export {
-  B as BasicButton
+  O as BasicButton
 };

package/dist/components/DropdownUi.js

@@ -1,88 +1,105 @@
 "use client";
-import { jsxs as f, jsx as a } from "react/jsx-runtime";
-import { useState as v, useRef as p, useImperativeHandle as I, useEffect as b } from "react";
-import { KeyboardArrowDownIcon as N } from "./icons/KeyboardArrowDownIcon.js";
-import { COLOR as h } from "@geckou/ui-core";
-function L({
-  isHiddenArrow: g = !1,
-  contentAlignment: i = "left",
-  isDisabled: s = !1,
-  contentsWidth: x = "auto",
-  trigger: w,
-  contents: o,
-  ref: C
+import { jsxs as b, jsx as l } from "react/jsx-runtime";
+import { useState as g, useRef as i, useId as H, useImperativeHandle as N, useEffect as h } from "react";
+import { KeyboardArrowDownIcon as S } from "./icons/KeyboardArrowDownIcon.js";
+import { COLOR as w } from "@geckou/ui-core";
+function K({
+  isHiddenArrow: x = !1,
+  contentAlignment: c = "left",
+  isDisabled: a = !1,
+  contentsWidth: C = "auto",
+  trigger: y,
+  contents: t,
+  ref: k
 }) {
-  const [t, c] = v(!1), [z, O] = v(0), u = p(null), d = p(null), k = () => c((e) => !e), l = () => c(!1);
-  I(C, () => ({
-    isContentsOpened: () => t,
-    close: l
-  })), b(() => {
-    const e = (r) => {
-      const n = u.current;
-      n && !n.contains(r.target) && l();
+  const [n, u] = g(!1), [z, I] = g(0), d = i(null), f = i(null), m = i(null), p = `${H()}-panel`, O = () => u((e) => !e), r = () => u(!1), R = () => {
+    var e;
+    r(), (e = m.current) == null || e.focus();
+  };
+  N(k, () => ({
+    isContentsOpened: () => n,
+    close: r
+  })), h(() => {
+    const e = (s) => {
+      const o = d.current;
+      o && !o.contains(s.target) && r();
     };
     return document.addEventListener("pointerdown", e), () => document.removeEventListener("pointerdown", e);
-  }, []), b(() => {
-    const e = d.current;
+  }, []), h(() => {
+    const e = f.current;
     if (!e)
       return;
-    const r = () => O(e.clientHeight);
-    r();
-    const n = new ResizeObserver(r);
-    return n.observe(e), () => n.disconnect();
-  }, [!!o]);
-  const m = s || !o, y = {
-    "--trigger-color": m ? h.black : h.blue
-  }, H = {
-    boxShadow: t ? "0 0 6px #33333333" : "none",
-    blockSize: t ? `${z}px` : 0,
-    inlineSize: x,
-    right: i === "right" ? "calc(var(--bv, 0.375rem) * -0.5)" : "auto",
-    left: i === "left" ? "calc(var(--bv, 0.375rem) * -0.5)" : "auto",
+    const s = () => I(e.clientHeight);
+    s();
+    const o = new ResizeObserver(s);
+    return o.observe(e), () => o.disconnect();
+  }, [!!t]);
+  const v = a || !t, D = {
+    "--trigger-color": v ? w.black : w.blue
+  }, E = {
+    boxShadow: n ? "0 0 6px #33333333" : "none",
+    blockSize: n ? `${z}px` : 0,
+    inlineSize: C,
+    right: c === "right" ? "calc(var(--bv, 0.375rem) * -0.5)" : "auto",
+    left: c === "left" ? "calc(var(--bv, 0.375rem) * -0.5)" : "auto",
     zIndex: 2
   };
-  return /* @__PURE__ */ f("div", { ref: u, className: "relative", children: [
-    /* @__PURE__ */ f(
-      "button",
-      {
-        type: "button",
-        disabled: s,
-        "aria-expanded": t,
-        style: { ...y, cursor: m ? "auto" : "pointer" },
-        className: "flex size-full items-center gap-[var(--sp-small,0.375rem)] text-(--trigger-color)",
-        onClick: (e) => {
-          e.preventDefault(), k();
-        },
-        children: [
-          w,
-          !(g || !o || s) && /* @__PURE__ */ a(
-            N,
-            {
-              className: `size-[var(--icon-small,0.9375rem)] flex-none transition-all duration-100 ${t ? "rotate-180" : ""}`
-            }
-          )
-        ]
-      }
-    ),
-    o && /* @__PURE__ */ a(
-      "div",
-      {
-        style: H,
-        inert: !t,
-        className: "absolute top-[calc(100%-var(--sp-min,0.1875rem))] cursor-pointer overflow-hidden rounded-[var(--radius-small,0.1875rem)] transition-[block-size] duration-100",
-        children: /* @__PURE__ */ a(
+  return /* @__PURE__ */ b(
+    "div",
+    {
+      ref: d,
+      className: "relative",
+      onKeyDown: (e) => {
+        e.key !== "Escape" || !n || (e.preventDefault(), R());
+      },
+      children: [
+        /* @__PURE__ */ b(
+          "button",
+          {
+            ref: m,
+            type: "button",
+            disabled: a,
+            "aria-expanded": n,
+            "aria-haspopup": t ? !0 : void 0,
+            "aria-controls": t ? p : void 0,
+            style: { ...D, cursor: v ? "auto" : "pointer" },
+            className: "flex size-full items-center gap-[var(--sp-small,0.375rem)] text-(--trigger-color)",
+            onClick: (e) => {
+              e.preventDefault(), O();
+            },
+            children: [
+              y,
+              !(x || !t || a) && /* @__PURE__ */ l(
+                S,
+                {
+                  className: `size-[var(--icon-small,0.9375rem)] flex-none transition-all duration-100 ${n ? "rotate-180" : ""}`
+                }
+              )
+            ]
+          }
+        ),
+        t && /* @__PURE__ */ l(
           "div",
           {
-            ref: d,
-            className: "max-h-[calc(var(--bv,0.375rem)*56)] min-w-[calc(var(--bv,0.375rem)*20)] overflow-auto bg-white",
-            onClick: l,
-            children: o
+            id: p,
+            style: E,
+            inert: !n,
+            className: "absolute top-[calc(100%-var(--sp-min,0.1875rem))] cursor-pointer overflow-hidden rounded-[var(--radius-small,0.1875rem)] transition-[block-size] duration-100",
+            children: /* @__PURE__ */ l(
+              "div",
+              {
+                ref: f,
+                className: "max-h-[calc(var(--bv,0.375rem)*56)] min-w-[calc(var(--bv,0.375rem)*20)] overflow-auto bg-white",
+                onClick: r,
+                children: t
+              }
+            )
           }
         )
-      }
-    )
-  ] });
+      ]
+    }
+  );
 }
 export {
-  L as DropdownUi
+  K as DropdownUi
 };

package/dist/components/ErrorMessage.d.ts

@@ -1,9 +1,11 @@
 type Props = {
+    /** aria-describedby から参照させたいときに渡す */
+    id?: string;
     errorMessages?: string[];
     cssStyle?: {
         textColor?: string;
         backgroundColor?: string;
     };
 };
-export declare function ErrorMessage({ errorMessages, cssStyle }: Props): import("react").JSX.Element | null;
+export declare function ErrorMessage({ id, errorMessages, cssStyle }: Props): import("react").JSX.Element | null;
 export {};

package/dist/components/ErrorMessage.js

@@ -1,22 +1,23 @@
 import { jsx as e } from "react/jsx-runtime";
 import { COLOR as n } from "@geckou/ui-core";
-function m({ errorMessages: o, cssStyle: r }) {
+function c({ id: t, errorMessages: o, cssStyle: r }) {
   if (!o || !o.length)
     return null;
-  const t = {
+  const b = {
     "--error-text-color": (r == null ? void 0 : r.textColor) || n.white,
     "--error-background-color": (r == null ? void 0 : r.backgroundColor) || n.red
   };
   return /* @__PURE__ */ e(
     "div",
     {
+      id: t,
       role: "alert",
       className: "absolute top-[calc(100%+0.25rem)] flex w-max flex-col gap-2 rounded-sm bg-(--error-background-color) px-3 py-2 text-sm leading-none text-(--error-text-color) shadow-[0_0_0.5rem_0.25rem_#33333322] before:absolute before:bottom-[calc(100%-1px)] before:left-[0.85rem] before:block before:h-[0.53rem] before:w-[0.85rem] before:bg-(--error-background-color) before:content-[''] before:[clip-path:polygon(50%_0%,100%_100%,0%_100%)]",
-      style: t,
-      children: o.map((b, l) => /* @__PURE__ */ e("span", { children: b }, l))
+      style: b,
+      children: o.map((l, a) => /* @__PURE__ */ e("span", { children: l }, a))
     }
   );
 }
 export {
-  m as ErrorMessage
+  c as ErrorMessage
 };

package/dist/components/LoadingSpinner.js

@@ -1,25 +1,37 @@
 import { jsx as c, jsxs as r } from "react/jsx-runtime";
 function i() {
-  return /* @__PURE__ */ c("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ r("g", { children: [
-    /* @__PURE__ */ c("circle", { cx: "12", cy: "2.5", r: "1.5", opacity: ".14" }),
-    /* @__PURE__ */ c("circle", { cx: "16.75", cy: "3.77", r: "1.5", opacity: ".29" }),
-    /* @__PURE__ */ c("circle", { cx: "20.23", cy: "7.25", r: "1.5", opacity: ".43" }),
-    /* @__PURE__ */ c("circle", { cx: "21.50", cy: "12.00", r: "1.5", opacity: ".57" }),
-    /* @__PURE__ */ c("circle", { cx: "20.23", cy: "16.75", r: "1.5", opacity: ".71" }),
-    /* @__PURE__ */ c("circle", { cx: "16.75", cy: "20.23", r: "1.5", opacity: ".86" }),
-    /* @__PURE__ */ c("circle", { cx: "12", cy: "21.5", r: "1.5" }),
+  return (
+    // 装飾。読み上げ対象にしない（状態は呼び出し側の aria-busy で伝える）
     /* @__PURE__ */ c(
-      "animateTransform",
+      "svg",
       {
-        attributeName: "transform",
-        type: "rotate",
-        calcMode: "discrete",
-        dur: "0.75s",
-        values: "0 12 12;30 12 12;60 12 12;90 12 12;120 12 12;150 12 12;180 12 12;210 12 12;240 12 12;270 12 12;300 12 12;330 12 12;360 12 12",
-        repeatCount: "indefinite"
+        viewBox: "0 0 24 24",
+        xmlns: "http://www.w3.org/2000/svg",
+        "aria-hidden": "true",
+        focusable: "false",
+        children: /* @__PURE__ */ r("g", { children: [
+          /* @__PURE__ */ c("circle", { cx: "12", cy: "2.5", r: "1.5", opacity: ".14" }),
+          /* @__PURE__ */ c("circle", { cx: "16.75", cy: "3.77", r: "1.5", opacity: ".29" }),
+          /* @__PURE__ */ c("circle", { cx: "20.23", cy: "7.25", r: "1.5", opacity: ".43" }),
+          /* @__PURE__ */ c("circle", { cx: "21.50", cy: "12.00", r: "1.5", opacity: ".57" }),
+          /* @__PURE__ */ c("circle", { cx: "20.23", cy: "16.75", r: "1.5", opacity: ".71" }),
+          /* @__PURE__ */ c("circle", { cx: "16.75", cy: "20.23", r: "1.5", opacity: ".86" }),
+          /* @__PURE__ */ c("circle", { cx: "12", cy: "21.5", r: "1.5" }),
+          /* @__PURE__ */ c(
+            "animateTransform",
+            {
+              attributeName: "transform",
+              type: "rotate",
+              calcMode: "discrete",
+              dur: "0.75s",
+              values: "0 12 12;30 12 12;60 12 12;90 12 12;120 12 12;150 12 12;180 12 12;210 12 12;240 12 12;270 12 12;300 12 12;330 12 12;360 12 12",
+              repeatCount: "indefinite"
+            }
+          )
+        ] })
       }
     )
-  ] }) });
+  );
 }
 export {
   i as LoadingSpinner

package/dist/components/ModalBox.js

@@ -1,71 +1,75 @@
 "use client";
-import { jsx as t, jsxs as b } from "react/jsx-runtime";
-import { useId as g, useRef as i, useEffect as u } from "react";
-import { createScrollLock as y, createModalLayer as w, handleTabKey as h } from "@geckou/ui-core";
-const k = {
+import { jsx as a, jsxs as b } from "react/jsx-runtime";
+import { useId as y, useRef as o, useEffect as i } from "react";
+import { createScrollLock as w, createModalLayer as h, handleTabKey as k } from "@geckou/ui-core";
+const E = {
   small: "max-w-[var(--mobile-lower-width,430px)]",
   medium: "max-w-[var(--desktop-lower-width,1025px)]",
   large: "max-w-[var(--contents-max-width,1440px)]"
 };
-function E() {
-  return /* @__PURE__ */ t(
+function L() {
+  return /* @__PURE__ */ a(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 -960 960 960",
       fill: "currentColor",
-      children: /* @__PURE__ */ t("path", { d: "m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z" })
+      children: /* @__PURE__ */ a("path", { d: "m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z" })
     }
   );
 }
 function _({
   isShown: r,
-  size: p = "medium",
-  onClose: o,
-  header: n,
+  size: f = "medium",
+  onClose: n,
+  header: u,
   footer: d,
-  children: f,
-  ariaLabel: v
+  children: v,
+  ariaLabel: x
 }) {
-  const c = g(), m = i(null), x = i(y());
-  u(() => {
-    const e = x.current;
+  const s = y(), m = o(null), g = o(w());
+  i(() => {
+    const e = g.current;
     return e.toggle(r), () => e.release();
   }, [r]);
-  const s = i(w());
-  u(() => {
-    const e = s.current;
+  const p = o(h());
+  i(() => {
+    const e = p.current;
     return e.toggle(r, m.current), () => e.release();
   }, [r]);
-  const l = i(null);
-  return u(() => {
-    var e, a;
-    if (r) {
-      l.current ?? (l.current = document.activeElement), (e = m.current) == null || e.focus();
-      return;
-    }
-    (a = l.current) == null || a.focus(), l.current = null;
-  }, [r]), u(() => {
+  const l = o(null), c = o(!1);
+  return i(() => {
+    var e;
+    if (r)
+      return l.current ?? (l.current = document.activeElement), (e = m.current) == null || e.focus(), () => {
+        var t;
+        (t = l.current) == null || t.focus(), l.current = null;
+      };
+  }, [r]), i(() => {
     if (!r)
       return;
-    const e = (a) => {
-      if (s.current.isTopmost() && !a.defaultPrevented) {
-        if (a.key === "Escape") {
-          a.preventDefault(), o();
+    const e = (t) => {
+      if (p.current.isTopmost() && !t.defaultPrevented) {
+        if (t.key === "Escape") {
+          t.preventDefault(), n();
           return;
         }
-        h(m.current, a, document.activeElement);
+        k(m.current, t, document.activeElement);
       }
     };
     return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
-  }, [r, o]), /* @__PURE__ */ t(
+  }, [r, n]), /* @__PURE__ */ a(
     "div",
     {
       className: `fixed top-0 left-0 z-50 flex h-dvh w-dvw cursor-pointer items-center justify-center overflow-hidden bg-[#33333380] p-[var(--sp-larger,3rem)] backdrop-blur-sm transition-opacity duration-100 max-md:px-[var(--sp-large,1.5rem)] ${r ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0"}`,
       "aria-hidden": !r,
       inert: !r,
+      onPointerDown: (e) => {
+        c.current = e.target === e.currentTarget;
+      },
       onClick: (e) => {
-        e.target === e.currentTarget && o();
+        const t = c.current;
+        c.current = !1, t && e.target === e.currentTarget && n();
       },
       children: /* @__PURE__ */ b(
         "div",
@@ -73,29 +77,29 @@ function _({
           ref: m,
           role: "dialog",
           "aria-modal": "true",
-          "aria-labelledby": n ? c : void 0,
-          "aria-label": n ? void 0 : v ?? "ダイアログ",
+          "aria-labelledby": u ? s : void 0,
+          "aria-label": u ? void 0 : x ?? "ダイアログ",
           tabIndex: -1,
-          className: `relative flex max-h-full w-full cursor-auto flex-col rounded-[var(--radius-small,0.1875rem)] bg-white drop-shadow-[0_0_6px_#33333355] ${k[p]}`,
+          className: `relative flex max-h-full w-full cursor-auto flex-col rounded-[var(--radius-small,0.1875rem)] bg-white drop-shadow-[0_0_6px_#33333355] ${E[f]}`,
           children: [
-            n && /* @__PURE__ */ t(
+            u && /* @__PURE__ */ a(
               "header",
               {
-                id: c,
+                id: s,
                 className: "border-b border-[#eee] px-[var(--sp-large,1.5rem)] py-[var(--sp-medium,0.75rem)] max-md:p-[var(--sp-medium,0.75rem)] [&>h2]:font-bold [&>h2]:text-[var(--fs-large,0.875rem)]",
-                children: n
+                children: u
               }
             ),
-            /* @__PURE__ */ t("div", { className: "flex-auto overflow-auto p-[var(--sp-large,1.5rem)] max-md:p-[var(--sp-medium,0.75rem)]", children: f }),
-            d && /* @__PURE__ */ t("footer", { className: "flex justify-center gap-[var(--sp-large,1.5rem)] border-t border-[#eee] px-[var(--sp-large,1.5rem)] py-[var(--sp-medium,0.75rem)] max-md:gap-[var(--sp-medium,0.75rem)] max-md:p-[var(--sp-medium,0.75rem)] max-md:[&>*]:flex-auto", children: d }),
-            /* @__PURE__ */ t(
+            /* @__PURE__ */ a("div", { className: "flex-auto overflow-auto p-[var(--sp-large,1.5rem)] max-md:p-[var(--sp-medium,0.75rem)]", children: v }),
+            d && /* @__PURE__ */ a("footer", { className: "flex justify-center gap-[var(--sp-large,1.5rem)] border-t border-[#eee] px-[var(--sp-large,1.5rem)] py-[var(--sp-medium,0.75rem)] max-md:gap-[var(--sp-medium,0.75rem)] max-md:p-[var(--sp-medium,0.75rem)] max-md:[&>*]:flex-auto", children: d }),
+            /* @__PURE__ */ a(
               "button",
               {
                 type: "button",
                 "aria-label": "閉じる",
                 className: "absolute bottom-full left-full size-[var(--icon-medium,1.125rem)] cursor-pointer leading-none text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white [&>*]:size-full",
-                onClick: o,
-                children: /* @__PURE__ */ t(E, {})
+                onClick: n,
+                children: /* @__PURE__ */ a(L, {})
               }
             )
           ]

package/dist/components/PopupBox.js

@@ -1,28 +1,28 @@
 "use client";
 import { jsx as i } from "react/jsx-runtime";
-import { useState as o, useRef as c, useEffect as l, useImperativeHandle as f } from "react";
+import { useState as n, useRef as c, useEffect as l, useImperativeHandle as f } from "react";
 import { createPortal as p } from "react-dom";
 import { COLOR as d } from "@geckou/ui-core";
 const x = {
   left: "left-[max(calc((100vw-64rem)/2),1rem)]",
   right: "right-[max(calc((100vw-64rem)/2),1rem)]",
   center: "inset-0 m-auto"
-}, S = {
+}, h = {
   top: "top-14",
   bottom: "bottom-4",
   center: "inset-0 m-auto"
 };
 function y({
   position: t = { x: "right", y: "top" },
-  ref: n,
-  children: m
+  ref: m,
+  children: s
 }) {
-  const [s, r] = o(!1), [u, a] = o(!1), e = c(null);
+  const [r, o] = n(!1), [u, a] = n(!1), e = c(null);
   return l(() => (a(!0), () => {
     e.current && clearTimeout(e.current);
-  }), []), f(n, () => ({
+  }), []), f(m, () => ({
     showPopup: () => {
-      r(!0), e.current && clearTimeout(e.current), e.current = setTimeout(() => r(!1), 3e3);
+      o(!0), e.current && clearTimeout(e.current), e.current = setTimeout(() => o(!1), 3e3);
     }
   })), u ? p(
     /* @__PURE__ */ i(
@@ -30,8 +30,8 @@ function y({
       {
         role: "status",
         style: { borderColor: d.blue },
-        className: `pointer-events-none fixed z-50 h-max w-max max-w-40 rounded-[var(--radius-small,0.1875rem)] border bg-white p-[var(--sp-medium,0.75rem)] transition-[transform,opacity] duration-300 ${x[t.x]} ${S[t.y]} ${s ? "opacity-100" : "opacity-0"}`,
-        children: m
+        className: `pointer-events-none fixed z-50 h-max w-max max-w-40 rounded-[var(--radius-small,0.1875rem)] border bg-white p-[var(--sp-medium,0.75rem)] transition-[transform,opacity] duration-300 ${x[t.x]} ${h[t.y]} ${r ? "opacity-100" : "opacity-0"}`,
+        children: r && s
       }
     ),
     document.body

package/dist/components/RadioButtons.d.ts

@@ -8,6 +8,12 @@ type Props = {
     isRequired?: boolean;
     cssStyle?: RadioButtonStyleForEachStatus;
     isDisableAnimation?: boolean;
+    /**
+     * ラジオグループ自体のアクセシブル名。
+     * 可視ラベル（見出し等）があるなら ariaLabelledBy でその要素を指すこと
+     */
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
 };
-export declare function RadioButtons({ value, onChange, options, name, isDisabled, isRequired, cssStyle, isDisableAnimation, }: Props): import("react").JSX.Element;
+export declare function RadioButtons({ value, onChange, options, name, isDisabled, isRequired, cssStyle, isDisableAnimation, ariaLabel, ariaLabelledBy, }: Props): import("react").JSX.Element;
 export {};

package/dist/components/RadioButtons.js

@@ -1,70 +1,83 @@
 "use client";
-import { jsxs as f, jsx as u } from "react/jsx-runtime";
-import { useState as N, useRef as G, useEffect as R, useId as z } from "react";
-import { isEmptyValue as M, MESSAGES as V, COLOR as o } from "@geckou/ui-core";
-import { ErrorMessage as j } from "./ErrorMessage.js";
-function A({
-  value: p,
-  onChange: s,
-  options: m,
-  name: _,
+import { jsxs as _, jsx as d } from "react/jsx-runtime";
+import { useState as M, useRef as R, useEffect as V, useId as g } from "react";
+import { isEmptyValue as j, MESSAGES as q, COLOR as o } from "@geckou/ui-core";
+import { ErrorMessage as I } from "./ErrorMessage.js";
+function $({
+  value: v,
+  onChange: n,
+  options: x,
+  name: h,
   isDisabled: a,
-  isRequired: n,
+  isRequired: u,
   cssStyle: e,
-  isDisableAnimation: v
+  isDisableAnimation: k,
+  ariaLabel: w,
+  ariaLabelledBy: i
 }) {
-  var i, d;
-  const r = p ?? "", [g, x] = N(!1), c = G(r);
-  R(() => {
-    c.current !== r && (c.current = r, x(!0));
+  var f, p;
+  const r = v ?? "", [C, E] = M(!1), s = R(r);
+  V(() => {
+    s.current !== r && (s.current = r, E(!0));
   }, [r]);
-  const h = g && n && M(r) ? [V.required] : void 0, k = z(), w = _ ?? k, C = a ? e == null ? void 0 : e.disabled : e == null ? void 0 : e.default, l = {
+  const c = C && u && j(r) ? [q.required] : void 0, N = g(), G = h ?? N, b = g(), y = a ? e == null ? void 0 : e.disabled : e == null ? void 0 : e.default, l = {
     textColor: a ? o.darkGray : o.black,
     backgroundColor: a ? o.lightGray : o.white,
     border: {
       color: a ? o.darkGray : o.blue,
       size: "1px"
     },
-    ...C ?? {}
-  }, E = {
+    ...y ?? {}
+  }, z = {
     "--text-color": l.textColor,
-    "--border-color": (i = l.border) == null ? void 0 : i.color,
-    "--border-size": (d = l.border) == null ? void 0 : d.size,
+    "--border-color": (f = l.border) == null ? void 0 : f.color,
+    "--border-size": (p = l.border) == null ? void 0 : p.size,
     "--background-color": l.backgroundColor,
-    "--duration": v ? "0s" : ".3s"
+    "--duration": k ? "0s" : ".3s"
   };
-  return /* @__PURE__ */ f("div", { className: "relative flex flex-wrap items-center gap-4", children: [
-    /* @__PURE__ */ u("style", { children: "@keyframes uiRadioPop{0%{scale:1}10%{scale:.8}50%{scale:1.2}100%{scale:1}}" }),
-    m.map((t) => {
-      const b = t.value === r;
-      return /* @__PURE__ */ f(
-        "label",
-        {
-          style: E,
-          className: `relative grid cursor-pointer grid-cols-[auto_1fr] items-center gap-2 before:inline-block before:aspect-square before:w-4 before:rounded-full before:transition-all before:duration-(--duration) before:ease-linear before:content-[''] has-[input:disabled]:cursor-not-allowed has-[input:focus-visible]:outline-2 has-[input:focus-visible]:outline-offset-2 has-[input:focus-visible]:outline-(--border-color) ${b ? "text-(--text-color) before:animate-[uiRadioPop_var(--duration)_ease-out] before:bg-(--border-color) before:shadow-[0_0_0_2px_var(--background-color)_inset,0_0_0_1px_var(--border-color)]" : "text-(--border-color) before:bg-(--background-color) before:shadow-[0_0_0_1px_var(--border-color)_inset]"}`,
-          children: [
-            /* @__PURE__ */ u(
-              "input",
-              {
-                type: "radio",
-                name: w,
-                value: t.value,
-                disabled: a,
-                required: n,
-                checked: b,
-                onChange: () => s == null ? void 0 : s(t.value),
-                className: "sr-only"
-              }
-            ),
-            /* @__PURE__ */ u("span", { children: t.label })
-          ]
-        },
-        t.value
-      );
-    }),
-    /* @__PURE__ */ u(j, { errorMessages: h })
-  ] });
+  return /* @__PURE__ */ _(
+    "div",
+    {
+      role: "radiogroup",
+      "aria-label": i ? void 0 : w,
+      "aria-labelledby": i,
+      "aria-required": u || void 0,
+      "aria-describedby": c ? b : void 0,
+      className: "relative flex flex-wrap items-center gap-4",
+      children: [
+        /* @__PURE__ */ d("style", { children: "@keyframes uiRadioPop{0%{scale:1}10%{scale:.8}50%{scale:1.2}100%{scale:1}}" }),
+        x.map((t) => {
+          const m = t.value === r;
+          return /* @__PURE__ */ _(
+            "label",
+            {
+              style: z,
+              className: `relative grid cursor-pointer grid-cols-[auto_1fr] items-center gap-2 before:inline-block before:aspect-square before:w-4 before:rounded-full before:transition-all before:duration-(--duration) before:ease-linear before:content-[''] has-[input:disabled]:cursor-not-allowed has-[input:focus-visible]:outline-2 has-[input:focus-visible]:outline-offset-2 has-[input:focus-visible]:outline-(--border-color) ${m ? "text-(--text-color) before:animate-[uiRadioPop_var(--duration)_ease-out] before:bg-(--border-color) before:shadow-[0_0_0_2px_var(--background-color)_inset,0_0_0_1px_var(--border-color)]" : "text-(--border-color) before:bg-(--background-color) before:shadow-[0_0_0_1px_var(--border-color)_inset]"}`,
+              children: [
+                /* @__PURE__ */ d(
+                  "input",
+                  {
+                    type: "radio",
+                    name: G,
+                    value: t.value,
+                    disabled: a,
+                    required: u,
+                    checked: m,
+                    onChange: () => n == null ? void 0 : n(t.value),
+                    className: "sr-only"
+                  }
+                ),
+                /* @__PURE__ */ d("span", { children: t.label })
+              ]
+            },
+            t.value
+          );
+        }),
+        /* @__PURE__ */ d(I, { id: b, errorMessages: c })
+      ]
+    }
+  );
 }
 export {
-  A as RadioButtons
+  $ as RadioButtons
 };

package/dist/components/SlideDownUi.js

@@ -1,20 +1,20 @@
 "use client";
 import { jsxs as v, jsx as i } from "react/jsx-runtime";
-import { useState as a, useRef as p, useImperativeHandle as E, useEffect as l } from "react";
-import { KeyboardArrowDownIcon as I } from "./icons/KeyboardArrowDownIcon.js";
-import { COLOR as N } from "@geckou/ui-core";
-function $({
+import { useState as a, useRef as h, useId as E, useImperativeHandle as N, useEffect as l } from "react";
+import { KeyboardArrowDownIcon as O } from "./icons/KeyboardArrowDownIcon.js";
+import { COLOR as $ } from "@geckou/ui-core";
+function S({
   isOpened: n = null,
-  isHiddenArrow: h = !1,
-  isDisabled: b = !1,
+  isHiddenArrow: b = !1,
+  isDisabled: g = !1,
   isDisableClickOutside: f = !1,
   duration: c = 0.3,
-  trigger: g,
-  children: w,
-  ref: x
+  trigger: w,
+  children: x,
+  ref: C
 }) {
-  const [t, r] = a(n || !1), [C, u] = a(n || !1), [y, k] = a(0), d = p(null), m = p(null), H = () => r((e) => !e);
-  E(x, () => ({
+  const [t, r] = a(n || !1), [y, u] = a(n || !1), [I, k] = a(0), d = h(null), m = h(null), p = `${E()}-panel`, H = () => r((e) => !e);
+  N(C, () => ({
     isOpenedContents: () => t,
     close: () => r(!1)
   })), l(() => {
@@ -43,22 +43,23 @@ function $({
     const e = setTimeout(() => u(!0), c * 1e3);
     return () => clearTimeout(e);
   }, [t, c]);
-  const R = { "--link-color": N.blue };
+  const R = { "--link-color": $.blue };
   return /* @__PURE__ */ v("div", { ref: d, style: R, children: [
     /* @__PURE__ */ v(
       "button",
       {
         type: "button",
-        disabled: b,
+        disabled: g,
         "aria-expanded": t,
+        "aria-controls": p,
         className: "relative grid w-full cursor-pointer grid-cols-[1fr_auto] items-center justify-items-start text-(--link-color)",
         onClick: (e) => {
           e.preventDefault(), H();
         },
         children: [
-          /* @__PURE__ */ i("span", { className: "block w-full text-left", children: g }),
-          !h && /* @__PURE__ */ i(
-            I,
+          /* @__PURE__ */ i("span", { className: "block w-full text-left", children: w }),
+          !b && /* @__PURE__ */ i(
+            O,
             {
               className: `size-[var(--icon-medium,1.125rem)] flex-none text-(--link-color) transition-all duration-100 ${t ? "rotate-180" : ""}`
             }
@@ -69,18 +70,19 @@ function $({
     /* @__PURE__ */ i(
       "div",
       {
+        id: p,
         style: {
-          height: t ? `${y}px` : 0,
+          height: t ? `${I}px` : 0,
           transitionDuration: `${c}s`,
-          overflow: C ? "visible" : "hidden"
+          overflow: y ? "visible" : "hidden"
         },
         inert: !t,
         className: "transition-[height]",
-        children: /* @__PURE__ */ i("div", { ref: m, children: w })
+        children: /* @__PURE__ */ i("div", { ref: m, children: x })
       }
     )
   ] });
 }
 export {
-  $ as SlideDownUi
+  S as SlideDownUi
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geckou/ui-react",
-  "version": "0.7.0",
+  "version": "0.9.0",
   "description": "A set of reusable React UI components (forms) by Geckou",
   "type": "module",
   "sideEffects": [
@@ -40,7 +40,7 @@
     "react-dom": "^19.0.0"
   },
   "dependencies": {
-    "@geckou/ui-core": "^0.7.0"
+    "@geckou/ui-core": "^0.8.0"
   },
   "scripts": {
     "build": "vite build && node scripts/copy-assets.mjs",