@geckou/ui-react 0.4.0 → 0.5.0

package/README.md

@@ -84,6 +84,16 @@ props は Vue 版（`@geckou/ui-vue`）と揃えている。`v-model` にあた
 | `DateRangePicker` | `{ start: string; end: string }` | `DatePicker` と同じ（開始日と終了日の min / max が自動連動）。各入力の name は `<name>Start` / `<name>End` |
 | `DateSelector` | `string`（`YYYY-MM-DD` / `type="month"` なら `YYYY-MM`） | `name` / `isRequired` / `type` / `formValidationStore` |
 
+`DatePicker` / `DateSelector` の年月日欄の読み上げ名は、既定では `name` から作られます
+（`name="startedOn"` なら「startedOnの年」）。`CheckBox` と同じ `ariaLabel` / `ariaLabelledBy`
+を渡すと、そちらを土台に「の年」「の月」「の日」を繋げます。可視ラベルがあるなら
+`ariaLabelledBy` でその要素を指してください（WCAG 2.5.3 Label in Name）。
+
+```tsx
+<DatePicker name="startedOn" ariaLabel="開始日" /> {/* 「開始日の年」 */}
+<DatePicker name="startedOn" ariaLabelledBy={labelId} /> {/* 可視ラベル + 「の年」 */}
+```
+
 ## 収録コンポーネント
 
 フォーム系 25 種（`TextBox` / `TextArea` / `SelectBox` / `SearchableSelectBox` / `CheckBox` 系 /
@@ -98,6 +108,17 @@ props は Vue 版（`@geckou/ui-vue`）と揃えている。`v-model` にあた
 yarn workspace @geckou/ui-react test
 ```
 
+## 0.5.0 の変更
+
+- `DatePicker` / `DateSelector` が `ariaLabel` / `ariaLabelledBy` を受ける
+  （未指定なら従来どおり `name` から読み上げ名を作る）
+- `CheckBox` / `ToggleButton` が `<button>` の中に `<input>` を置かなくなった。
+  状態は `<button>` の `data-checked` / `disabled` で表し、送信用の入力は
+  チェック時だけ `<input type="hidden">` として `<button>` の外に描かれる。
+  DOM を辿っているテストやスタイルがあれば追従が要る
+- `ModalBox` が開いている間、Tab / Shift+Tab をダイアログ内で循環させる（フォーカストラップ）
+- `SearchableSelectBox` が WAI-ARIA の Combobox パターンに沿い、↑↓ / Enter / Escape で操作できる
+
 ## 0.4.0 の変更
 
 - `RadioButtons` が必須エラー（「必須項目です」）を描画する。Vue 版と同じく、

package/dist/components/CheckBox.js

@@ -1,20 +1,20 @@
 "use client";
-import { jsxs as f, Fragment as _, jsx as d } from "react/jsx-runtime";
-import { CheckIcon as z } from "./icons/CheckIcon.js";
+import { jsxs as v, Fragment as C, jsx as i } from "react/jsx-runtime";
+import { CheckIcon as _ } from "./icons/CheckIcon.js";
 import { COLOR as t } from "@geckou/ui-core";
-function g({
+function j({
   name: l,
-  checked: p,
-  onChange: r,
+  checked: s,
+  onChange: c,
   isDisabled: e,
-  cssStyle: o,
-  isDisableAnimation: k,
-  check: h,
-  ariaLabel: x,
-  ariaLabelledBy: u
+  cssStyle: r,
+  isDisableAnimation: f,
+  check: k,
+  ariaLabel: p,
+  ariaLabelledBy: a
 }) {
-  var n, s, b;
-  const i = p ?? !1, m = e ? o == null ? void 0 : o.disabled : o == null ? void 0 : o.default, c = {
+  var n, u, b;
+  const o = s ?? !1, h = e ? r == null ? void 0 : r.disabled : r == null ? void 0 : r.default, d = {
     textColor: e ? t.darkGray : t.blue,
     backgroundColor: e ? t.lightGray : t.white,
     border: {
@@ -22,57 +22,44 @@ function g({
       size: "1px",
       radius: ".25rem"
     },
-    ...m
-  }, v = {
-    "--text-color": c.textColor,
-    "--border-color": (n = c.border) == null ? void 0 : n.color,
-    "--border-size": (s = c.border) == null ? void 0 : s.size,
-    "--radius-size": (b = c.border) == null ? void 0 : b.radius,
-    "--background-color": c.backgroundColor,
-    "--duration": k ? "0s" : ".3s"
+    ...h
+  }, x = {
+    "--text-color": d.textColor,
+    "--border-color": (n = d.border) == null ? void 0 : n.color,
+    "--border-size": (u = d.border) == null ? void 0 : u.size,
+    "--radius-size": (b = d.border) == null ? void 0 : b.radius,
+    "--background-color": d.backgroundColor,
+    "--duration": f ? "0s" : ".3s"
   };
-  return /* @__PURE__ */ f(_, { children: [
-    /* @__PURE__ */ d("style", { children: "@keyframes uiCheckPop{0%{scale:1}10%{scale:.8}50%{scale:1.1}100%{scale:1}}" }),
-    /* @__PURE__ */ f(
+  return /* @__PURE__ */ v(C, { children: [
+    /* @__PURE__ */ i("style", { children: "@keyframes uiCheckPop{0%{scale:1}10%{scale:.8}50%{scale:1.1}100%{scale:1}}" }),
+    /* @__PURE__ */ i(
       "button",
       {
         type: "button",
-        style: v,
+        style: x,
         role: "checkbox",
-        "aria-checked": i,
-        "aria-labelledby": u,
-        "aria-label": u ? void 0 : x ?? l,
+        "aria-checked": o,
+        "data-checked": o,
+        "aria-labelledby": a,
+        "aria-label": a ? void 0 : p ?? l,
         disabled: e,
-        onClick: (a) => {
-          a.stopPropagation(), e || r == null || r(!i);
+        onClick: (m) => {
+          m.stopPropagation(), e || c == null || c(!o);
         },
-        className: `relative flex h-6 w-6 cursor-pointer items-center justify-center rounded-(--radius-size) border-none shadow-[0_0_0_var(--border-size)_var(--border-color)_inset] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--border-color) has-[input:disabled]:pointer-events-none has-[input:disabled]:before:pointer-events-auto has-[input:disabled]:before:absolute has-[input:disabled]:before:inset-0 has-[input:disabled]:before:cursor-not-allowed has-[input:disabled]:before:content-[''] ${i ? "animate-[uiCheckPop_var(--duration)_ease-out] bg-(--border-color)" : "bg-(--background-color)"}`,
-        children: [
-          /* @__PURE__ */ d(
-            "input",
-            {
-              type: "checkbox",
-              name: l,
-              checked: i,
-              disabled: e,
-              onChange: (a) => {
-                e || r == null || r(a.target.checked);
-              },
-              className: "hidden"
-            }
-          ),
-          /* @__PURE__ */ d(
-            "div",
-            {
-              className: `flex h-4 w-4 items-center justify-center [&>*]:fill-current [&>*]:text-current ${i ? "text-(--background-color)" : "text-(--border-color)"}`,
-              children: h ?? /* @__PURE__ */ d(z, {})
-            }
-          )
-        ]
+        className: `relative flex h-6 w-6 cursor-pointer items-center justify-center rounded-(--radius-size) border-none shadow-[0_0_0_var(--border-size)_var(--border-color)_inset] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--border-color) disabled:pointer-events-none disabled:before:pointer-events-auto disabled:before:absolute disabled:before:inset-0 disabled:before:cursor-not-allowed disabled:before:content-[''] ${o ? "animate-[uiCheckPop_var(--duration)_ease-out] bg-(--border-color)" : "bg-(--background-color)"}`,
+        children: /* @__PURE__ */ i(
+          "div",
+          {
+            className: `flex h-4 w-4 items-center justify-center [&>*]:fill-current [&>*]:text-current ${o ? "text-(--background-color)" : "text-(--border-color)"}`,
+            children: k ?? /* @__PURE__ */ i(_, {})
+          }
+        )
       }
-    )
+    ),
+    o && /* @__PURE__ */ i("input", { type: "hidden", name: l, value: "on", disabled: e })
   ] });
 }
 export {
-  g as CheckBox
+  j as CheckBox
 };

package/dist/components/DatePicker.d.ts

@@ -13,6 +13,13 @@ type Props = {
     maxDate?: string;
     size?: 'small' | 'medium';
     type?: 'date' | 'month';
+    /**
+     * 年月日それぞれの読み上げ名の土台。「の年」「の月」「の日」を後ろに繋げる。
+     * 可視ラベルがあるなら ariaLabelledBy でその要素を指すこと。
+     * どちらも無いときだけ name を使う（機械名でも無いよりはマシ）
+     */
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
 };
-export declare function DatePicker({ name, value, onChange, cssStyle, isDisabled, isRequired, formValidationStore, minDate, maxDate, size, type, }: Props): import("react").JSX.Element;
+export declare function DatePicker({ name, value, onChange, cssStyle, isDisabled, isRequired, formValidationStore, minDate, maxDate, size, type, ariaLabel, ariaLabelledBy, }: Props): import("react").JSX.Element;
 export {};

package/dist/components/DatePicker.js

@@ -1,131 +1,138 @@
 "use client";
-import { jsxs as N, jsx as t } from "react/jsx-runtime";
-import { formatDateValue as g, splitDate as k, COLOR as G, MESSAGES as R, composeDateValue as q, validateDateObject as C } from "@geckou/ui-core";
-import { useState as o, useRef as F, useEffect as H } from "react";
-import { InputBox as J } from "./InputBox.js";
-import { ErrorMessage as K } from "./ErrorMessage.js";
-import { CalendarIcon as Q } from "./icons/CalendarIcon.js";
-import { useRegisterValidation as T } from "../hooks/useFormValidation.js";
-function ae({
-  name: l,
+import { jsxs as j, jsx as r } from "react/jsx-runtime";
+import { formatDateValue as V, splitDate as w, COLOR as H, MESSAGES as J, composeDateValue as K, validateDateObject as Q } from "@geckou/ui-core";
+import { useState as m, useRef as T, useEffect as U, useId as W } from "react";
+import { InputBox as X } from "./InputBox.js";
+import { ErrorMessage as Y } from "./ErrorMessage.js";
+import { CalendarIcon as Z } from "./icons/CalendarIcon.js";
+import { useRegisterValidation as _ } from "../hooks/useFormValidation.js";
+function le({
+  name: o,
   value: a,
   onChange: s,
-  cssStyle: E,
+  cssStyle: M,
   isDisabled: i,
-  isRequired: n,
-  formValidationStore: S,
-  minDate: I = "",
-  maxDate: M = "",
-  size: D = "medium",
-  type: r = "date"
+  isRequired: d,
+  formValidationStore: D,
+  minDate: L = "",
+  maxDate: z = "",
+  size: P = "medium",
+  type: t = "date",
+  ariaLabel: A,
+  ariaLabelledBy: p
 }) {
-  const [j, d] = o(
-    () => a ? g(a, r) : ""
-  ), [c, p] = o(
-    () => a ? k(g(a, r)) : { year: "", month: "", day: "" }
-  ), [u, V] = o(""), [L, f] = o(!0), $ = F(a);
-  H(() => {
-    if ($.current === a)
+  const [y, u] = m(
+    () => a ? V(a, t) : ""
+  ), [l, f] = m(
+    () => a ? w(V(a, t)) : { year: "", month: "", day: "" }
+  ), [v, O] = m(""), [G, h] = m(!0), N = T(a);
+  U(() => {
+    if (N.current === a)
       return;
-    $.current = a;
-    const e = a ? g(a, r) : "";
-    d(e), p(k(e)), f(!0);
-  }, [a, r]);
-  const w = (e) => !e && n ? { isValid: !1, message: R.required } : { isValid: !0, message: "" }, z = (e) => C(e, { type: r, isRequired: n }), P = (e) => {
-    d(e), p(k(e));
-    const { message: x } = w(e);
-    V(x), f(!0), s == null || s(e);
-  }, v = (e, x) => {
-    const h = { ...c, [e]: x };
-    p(h);
-    const { isValid: y, message: B } = z(h);
-    if (V(B), f(y), y) {
-      const O = q(h, r);
-      d(O), s == null || s(O);
+    N.current = a;
+    const e = a ? V(a, t) : "";
+    u(e), f(w(e)), h(!0);
+  }, [a, t]);
+  const I = (e) => !e && d ? { isValid: !1, message: J.required } : { isValid: !0, message: "" }, R = (e) => Q(e, { type: t, isRequired: d }), q = (e) => {
+    u(e), f(w(e));
+    const { message: $ } = I(e);
+    O($), h(!0), s == null || s(e);
+  }, b = (e, $) => {
+    const k = { ...l, [e]: $ };
+    f(k);
+    const { isValid: E, message: F } = R(k);
+    if (O(F), h(E), E) {
+      const S = K(k, t);
+      u(S), s == null || s(S);
     }
   };
-  T(
-    S,
-    l,
-    w(j).isValid && L
+  _(
+    D,
+    o,
+    I(y).isValid && G
   );
-  const m = D === "small", b = `flex-none! ${m ? "px-[var(--sp-small,0.375rem)]! py-[var(--sp-min,0.1875rem)]! text-[length:var(--fs-small,0.6875rem)]" : "p-[var(--sp-medium,0.75rem)]!"}`, A = { "--icon-color": G.blue };
-  return /* @__PURE__ */ N(
-    J,
+  const c = W(), x = (e) => p ? { "aria-labelledby": `${p} ${c}-${e}` } : { "aria-label": `${A ?? o}の${e}` }, n = P === "small", g = `flex-none! ${n ? "px-[var(--sp-small,0.375rem)]! py-[var(--sp-min,0.1875rem)]! text-[length:var(--fs-small,0.6875rem)]" : "p-[var(--sp-medium,0.75rem)]!"}`, C = { "--icon-color": H.blue };
+  return /* @__PURE__ */ j(
+    X,
     {
-      cssStyle: E,
+      cssStyle: M,
       isDisabled: i,
-      isErrored: !!u,
-      className: `flex w-full items-center leading-none ${m ? "h-[calc(var(--bv,0.375rem)*5)] px-[var(--sp-min,0.1875rem)]" : "h-[calc(var(--bv,0.375rem)*6)] px-[var(--sp-small,0.375rem)]"}`,
+      isErrored: !!v,
+      className: `flex w-full items-center leading-none ${n ? "h-[calc(var(--bv,0.375rem)*5)] px-[var(--sp-min,0.1875rem)]" : "h-[calc(var(--bv,0.375rem)*6)] px-[var(--sp-small,0.375rem)]"}`,
       children: [
-        /* @__PURE__ */ N("div", { className: "relative flex-none", style: A, children: [
-          /* @__PURE__ */ t(
-            Q,
+        /* @__PURE__ */ j("div", { className: "relative flex-none", style: C, children: [
+          /* @__PURE__ */ r(
+            Z,
             {
-              className: `pointer-events-none absolute inset-y-0 left-[var(--sp-small,0.375rem)] m-auto fill-(--icon-color) ${m ? "size-[var(--icon-small,0.9375rem)]" : "size-[var(--icon-medium,1.125rem)]"}`
+              className: `pointer-events-none absolute inset-y-0 left-[var(--sp-small,0.375rem)] m-auto fill-(--icon-color) ${n ? "size-[var(--icon-small,0.9375rem)]" : "size-[var(--icon-medium,1.125rem)]"}`
             }
           ),
-          /* @__PURE__ */ t(
+          /* @__PURE__ */ r(
             "input",
             {
-              type: r,
-              name: l,
-              value: j,
-              max: M,
-              min: I,
-              required: n,
+              type: t,
+              name: o,
+              value: y,
+              max: z,
+              min: L,
+              required: d,
               disabled: i,
-              onChange: (e) => P(e.target.value),
-              className: `w-[calc(var(--icon-medium,1.125rem)+var(--sp-small,0.375rem)*2)]! cursor-pointer px-[var(--sp-small,0.375rem)]! opacity-0 [&::-webkit-calendar-picker-indicator]:absolute [&::-webkit-calendar-picker-indicator]:left-0 [&::-webkit-calendar-picker-indicator]:h-full [&::-webkit-calendar-picker-indicator]:w-full [&::-webkit-calendar-picker-indicator]:cursor-pointer [&::-webkit-calendar-picker-indicator]:opacity-0 ${m ? "py-[var(--sp-min,0.1875rem)]!" : "py-[var(--sp-medium,0.75rem)]!"}`
+              onChange: (e) => q(e.target.value),
+              className: `w-[calc(var(--icon-medium,1.125rem)+var(--sp-small,0.375rem)*2)]! cursor-pointer px-[var(--sp-small,0.375rem)]! opacity-0 [&::-webkit-calendar-picker-indicator]:absolute [&::-webkit-calendar-picker-indicator]:left-0 [&::-webkit-calendar-picker-indicator]:h-full [&::-webkit-calendar-picker-indicator]:w-full [&::-webkit-calendar-picker-indicator]:cursor-pointer [&::-webkit-calendar-picker-indicator]:opacity-0 ${n ? "py-[var(--sp-min,0.1875rem)]!" : "py-[var(--sp-medium,0.75rem)]!"}`
             }
           )
         ] }),
-        /* @__PURE__ */ t(
+        /* @__PURE__ */ r(
           "input",
           {
-            value: c.year,
+            value: l.year,
             placeholder: "年",
-            "aria-label": `${l}の年`,
+            ...x("年"),
             maxLength: 4,
             type: "text",
             disabled: i,
-            onChange: (e) => v("year", e.target.value),
-            className: `w-[calc(var(--sp-medium,0.75rem)*2+5ch)]! ${b}`
+            onChange: (e) => b("year", e.target.value),
+            className: `w-[calc(var(--sp-medium,0.75rem)*2+5ch)]! ${g}`
           }
         ),
         "/",
-        /* @__PURE__ */ t(
+        /* @__PURE__ */ r(
           "input",
           {
-            value: c.month,
+            value: l.month,
             placeholder: "月",
-            "aria-label": `${l}の月`,
+            ...x("月"),
             maxLength: 2,
             type: "text",
             disabled: i,
-            onChange: (e) => v("month", e.target.value),
-            className: `w-[calc(var(--sp-medium,0.75rem)*2+3ch)]! ${b}`
+            onChange: (e) => b("month", e.target.value),
+            className: `w-[calc(var(--sp-medium,0.75rem)*2+3ch)]! ${g}`
           }
         ),
-        r === "date" && /* @__PURE__ */ t("span", { children: "/" }),
-        r === "date" && /* @__PURE__ */ t(
+        t === "date" && /* @__PURE__ */ r("span", { children: "/" }),
+        t === "date" && /* @__PURE__ */ r(
           "input",
           {
-            value: c.day,
+            value: l.day,
             placeholder: "日",
-            "aria-label": `${l}の日`,
+            ...x("日"),
             maxLength: 2,
             type: "text",
             disabled: i,
-            onChange: (e) => v("day", e.target.value),
-            className: `w-[calc(var(--sp-medium,0.75rem)*2+3ch)]! ${b}`
+            onChange: (e) => b("day", e.target.value),
+            className: `w-[calc(var(--sp-medium,0.75rem)*2+3ch)]! ${g}`
           }
         ),
-        /* @__PURE__ */ t(K, { errorMessages: u ? [u] : void 0 })
+        p && /* @__PURE__ */ j("span", { className: "sr-only", children: [
+          /* @__PURE__ */ r("span", { id: `${c}-年`, children: "の年" }),
+          /* @__PURE__ */ r("span", { id: `${c}-月`, children: "の月" }),
+          /* @__PURE__ */ r("span", { id: `${c}-日`, children: "の日" })
+        ] }),
+        /* @__PURE__ */ r(Y, { errorMessages: v ? [v] : void 0 })
       ]
     }
   );
 }
 export {
-  ae as DatePicker
+  le as DatePicker
 };

package/dist/components/DateSelector.d.ts

@@ -11,6 +11,13 @@ type Props = {
     /** 選べる年の下限・上限。既定は「今年 -100 〜 今年 -14」（生年月日向け） */
     minYear?: number;
     maxYear?: number;
+    /**
+     * 年月日それぞれの読み上げ名の土台。「の年」「の月」「の日」を後ろに繋げる。
+     * 可視ラベルがあるなら ariaLabelledBy でその要素を指すこと。
+     * どちらも無いときだけ name を使う（機械名でも無いよりはマシ）
+     */
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
 };
-export declare function DateSelector({ name, value, onChange, isRequired, formValidationStore, type, minYear, maxYear, }: Props): import("react").JSX.Element;
+export declare function DateSelector({ name, value, onChange, isRequired, formValidationStore, type, minYear, maxYear, ariaLabel, ariaLabelledBy, }: Props): import("react").JSX.Element;
 export {};

package/dist/components/DateSelector.js

@@ -1,134 +1,141 @@
 "use client";
-import { jsxs as s, jsx as l } from "react/jsx-runtime";
-import { useState as C, useEffect as F } from "react";
-import { splitDate as z, COLOR as I, daysInMonth as H } from "@geckou/ui-core";
-import { InputBox as K } from "./InputBox.js";
-import { KeyboardArrowDownIcon as f } from "./icons/KeyboardArrowDownIcon.js";
-import { useRegisterValidation as L } from "../hooks/useFormValidation.js";
-const b = { year: "", month: "", day: "" };
-function R({
-  name: o,
-  value: i,
-  onChange: n,
+import { jsxs as o, jsx as r } from "react/jsx-runtime";
+import { useState as H, useEffect as K, useId as L } from "react";
+import { splitDate as V, COLOR as O, daysInMonth as q } from "@geckou/ui-core";
+import { InputBox as G } from "./InputBox.js";
+import { KeyboardArrowDownIcon as g } from "./icons/KeyboardArrowDownIcon.js";
+import { useRegisterValidation as J } from "../hooks/useFormValidation.js";
+const S = { year: "", month: "", day: "" };
+function ee({
+  name: n,
+  value: m,
+  onChange: s,
   isRequired: c,
-  formValidationStore: $,
-  type: m = "date",
-  minYear: A,
-  maxYear: M
+  formValidationStore: k,
+  type: d = "date",
+  minYear: B,
+  maxYear: E,
+  ariaLabel: T,
+  ariaLabelledBy: u
 }) {
-  const [r, d] = C(b), g = !!(r.year && r.month && (m === "month" || r.day)), O = !r.year && !r.month && !r.day;
-  L(
-    $,
-    o,
-    c ? g : g || O
-  ), F(() => {
-    d(i ? z(i) : b);
-  }, [i]);
-  const N = (/* @__PURE__ */ new Date()).getFullYear(), S = A ?? N - 100, k = M ?? N - 14, E = Array.from(
-    { length: Math.max(k - S + 1, 0) },
-    (e, a) => (S + a).toString()
-  ).map((e) => ({ label: e, value: e })), T = Array.from({ length: 12 }, (e, a) => {
+  const [l, p] = H(S), $ = !!(l.year && l.month && (d === "month" || l.day)), Y = !l.year && !l.month && !l.day;
+  J(
+    k,
+    n,
+    c ? $ : $ || Y
+  ), K(() => {
+    p(m ? V(m) : S);
+  }, [m]);
+  const w = (/* @__PURE__ */ new Date()).getFullYear(), D = B ?? w - 100, _ = E ?? w - 14, j = Array.from(
+    { length: Math.max(_ - D + 1, 0) },
+    (e, a) => (D + a).toString()
+  ).map((e) => ({ label: e, value: e })), C = Array.from({ length: 12 }, (e, a) => {
     const t = (a + 1).toString();
     return { label: t, value: t.padStart(2, "0") };
-  }), w = (e, a) => H(Number(e) || 2e3, Number(a)), Y = w(r.year, r.month), _ = Array.from({ length: Y }, (e, a) => {
+  }), I = (e, a) => q(Number(e) || 2e3, Number(a)), F = I(l.year, l.month), P = Array.from({ length: F }, (e, a) => {
     const t = (a + 1).toString();
     return { label: t, value: t.padStart(2, "0") };
-  }), D = (e) => {
-    d(e);
-    const a = m === "month" ? [e.year, e.month] : [e.year, e.month, e.day];
+  }), x = (e) => {
+    p(e);
+    const a = d === "month" ? [e.year, e.month] : [e.year, e.month, e.day];
     if (!e.year && !e.month && !e.day)
-      n == null || n("");
+      s == null || s("");
     else {
       if (a.some((t) => !t))
         return;
-      n == null || n(a.join("-"));
+      s == null || s(a.join("-"));
     }
-  }, u = (e, a) => {
-    const t = { ...r, [e]: a };
+  }, h = (e, a) => {
+    const t = { ...l, [e]: a };
     if (e !== "day" && t.day && t.month) {
-      const B = w(t.year, t.month);
-      Number(t.day) > B && (t.day = String(B).padStart(2, "0"));
+      const M = I(t.year, t.month);
+      Number(t.day) > M && (t.day = String(M).padStart(2, "0"));
     }
-    D(t);
-  }, p = (e) => {
+    x(t);
+  }, y = (e) => {
     const t = e.currentTarget.firstElementChild;
     t && t.click();
-  }, y = "relative w-max [&:has(select:focus)>svg]:rotate-180", v = "pointer-events-none absolute inset-y-0 right-[var(--sp-small,0.375rem)] m-auto size-[var(--icon-medium,1.125rem)] fill-(--icon-color)", x = "w-[calc(3ch+var(--sp-medium,0.75rem)*2+var(--icon-medium,1.125rem))]! p-[var(--sp-medium,0.75rem)]! pe-[calc(var(--sp-small,0.375rem)*2+var(--icon-medium,1.125rem))]! cursor-pointer", h = { "--icon-color": I.blue }, j = { "--caution-color": I.red };
-  return /* @__PURE__ */ s(K, { className: "flex w-max items-center [&>*:not(:last-of-type)]:after:content-['/']", children: [
-    /* @__PURE__ */ s("div", { className: y, style: h, onClick: p, children: [
-      /* @__PURE__ */ s(
+  }, i = L(), v = (e) => u ? { "aria-labelledby": `${u} ${i}-${e}` } : { "aria-label": `${T ?? n}の${e}` }, f = "relative w-max [&:has(select:focus)>svg]:rotate-180", b = "pointer-events-none absolute inset-y-0 right-[var(--sp-small,0.375rem)] m-auto size-[var(--icon-medium,1.125rem)] fill-(--icon-color)", A = "w-[calc(3ch+var(--sp-medium,0.75rem)*2+var(--icon-medium,1.125rem))]! p-[var(--sp-medium,0.75rem)]! pe-[calc(var(--sp-small,0.375rem)*2+var(--icon-medium,1.125rem))]! cursor-pointer", N = { "--icon-color": O.blue }, z = { "--caution-color": O.red };
+  return /* @__PURE__ */ o(G, { className: "flex w-max items-center [&>*:not(:last-of-type)]:after:content-['/']", children: [
+    /* @__PURE__ */ o("div", { className: f, style: N, onClick: y, children: [
+      /* @__PURE__ */ o(
         "select",
         {
-          value: r.year,
-          name: `${o}-year`,
-          "aria-label": `${o}の年`,
+          value: l.year,
+          name: `${n}-year`,
+          ...v("年"),
           required: c,
-          onChange: (e) => u("year", e.target.value),
+          onChange: (e) => h("year", e.target.value),
           className: "w-[calc(5ch+var(--sp-medium,0.75rem)*2+var(--icon-medium,1.125rem))]! cursor-pointer p-[var(--sp-medium,0.75rem)]! pe-[calc(var(--sp-small,0.375rem)*2+var(--icon-medium,1.125rem))]!",
           children: [
-            /* @__PURE__ */ l("option", { disabled: !0, value: "", children: "年" }),
-            E.map((e) => /* @__PURE__ */ l("option", { value: e.value, children: e.label }, e.value))
+            /* @__PURE__ */ r("option", { disabled: !0, value: "", children: "年" }),
+            j.map((e) => /* @__PURE__ */ r("option", { value: e.value, children: e.label }, e.value))
           ]
         }
       ),
-      /* @__PURE__ */ l(f, { className: v })
+      /* @__PURE__ */ r(g, { className: b })
     ] }),
-    /* @__PURE__ */ s("div", { className: y, style: h, onClick: p, children: [
-      /* @__PURE__ */ s(
+    /* @__PURE__ */ o("div", { className: f, style: N, onClick: y, children: [
+      /* @__PURE__ */ o(
         "select",
         {
-          value: r.month,
-          name: `${o}-month`,
-          "aria-label": `${o}の月`,
+          value: l.month,
+          name: `${n}-month`,
+          ...v("月"),
           required: c,
-          onChange: (e) => u("month", e.target.value),
-          className: x,
+          onChange: (e) => h("month", e.target.value),
+          className: A,
           children: [
-            /* @__PURE__ */ l("option", { disabled: !0, value: "", children: "月" }),
-            T.map((e) => /* @__PURE__ */ l("option", { value: e.value, children: e.label }, e.value))
+            /* @__PURE__ */ r("option", { disabled: !0, value: "", children: "月" }),
+            C.map((e) => /* @__PURE__ */ r("option", { value: e.value, children: e.label }, e.value))
           ]
         }
       ),
-      /* @__PURE__ */ l(f, { className: v })
+      /* @__PURE__ */ r(g, { className: b })
     ] }),
-    m === "date" && /* @__PURE__ */ s(
+    d === "date" && /* @__PURE__ */ o(
       "div",
       {
-        className: y,
-        style: h,
-        onClick: p,
+        className: f,
+        style: N,
+        onClick: y,
         children: [
-          /* @__PURE__ */ s(
+          /* @__PURE__ */ o(
             "select",
             {
-              value: r.day,
-              name: `${o}-day`,
-              "aria-label": `${o}の日`,
+              value: l.day,
+              name: `${n}-day`,
+              ...v("日"),
               required: c,
-              onChange: (e) => u("day", e.target.value),
-              className: x,
+              onChange: (e) => h("day", e.target.value),
+              className: A,
               children: [
-                /* @__PURE__ */ l("option", { disabled: !0, value: "", children: "日" }),
-                _.map((e) => /* @__PURE__ */ l("option", { value: e.value, children: e.label }, e.value))
+                /* @__PURE__ */ r("option", { disabled: !0, value: "", children: "日" }),
+                P.map((e) => /* @__PURE__ */ r("option", { value: e.value, children: e.label }, e.value))
               ]
             }
           ),
-          /* @__PURE__ */ l(f, { className: v })
+          /* @__PURE__ */ r(g, { className: b })
         ]
       }
     ),
-    /* @__PURE__ */ l(
+    u && /* @__PURE__ */ o("span", { className: "sr-only", children: [
+      /* @__PURE__ */ r("span", { id: `${i}-年`, children: "の年" }),
+      /* @__PURE__ */ r("span", { id: `${i}-月`, children: "の月" }),
+      /* @__PURE__ */ r("span", { id: `${i}-日`, children: "の日" })
+    ] }),
+    /* @__PURE__ */ r(
       "button",
       {
         type: "button",
-        style: j,
+        style: z,
         className: "mx-[var(--sp-medium,0.75rem)] inline-flex cursor-pointer items-center gap-[var(--sp-min,0.1875rem)] text-[length:var(--fs-small,0.6875rem)] text-(--caution-color)",
-        onClick: () => D(b),
+        onClick: () => x(S),
         children: "削除"
       }
     )
   ] });
 }
 export {
-  R as DateSelector
+  ee as DateSelector
 };