@geckou/ui-vue 0.10.0 → 0.13.0

package/dist/components/CheckBoxes.vue2.js

@@ -1,8 +1,9 @@
-import { defineComponent as V, ref as k, computed as E, watch as m, openBlock as i, createElementBlock as y, normalizeClass as q, Fragment as M, renderList as x, createBlock as B, createVNode as D } from "vue";
-import { COLOR as v, MESSAGES as _ } from "@geckou/ui-core";
-import A from "./LabeledCheckbox.vue.js";
-import L from "./ErrorMessage.vue.js";
-const F = /* @__PURE__ */ V({
+import { defineComponent as B, ref as p, computed as k, watch as m, openBlock as v, createElementBlock as g, normalizeClass as E, unref as S, Fragment as q, renderList as x, createBlock as M, createVNode as D } from "vue";
+import { COLOR as b, MESSAGES as A } from "@geckou/ui-core";
+import I from "./LabeledCheckbox.vue.js";
+import R from "./ErrorMessage.vue.js";
+import { nextUniqueId as U } from "../scripts/unique-id.js";
+const z = ["aria-label", "aria-labelledby", "aria-describedby"], $ = /* @__PURE__ */ B({
   __name: "CheckBoxes",
   props: {
     name: {},
@@ -10,12 +11,14 @@ const F = /* @__PURE__ */ V({
     modelValue: { default: void 0 },
     isDisabled: { type: Boolean },
     isRequired: { type: Boolean },
-    cssStyle: { default: void 0 }
+    cssStyle: { default: void 0 },
+    ariaLabel: { default: void 0 },
+    ariaLabelledBy: { default: void 0 }
   },
   emits: ["update:modelValue"],
-  setup(p, { emit: g }) {
-    var b, f;
-    const S = g, a = p, s = k(
+  setup(s, { emit: C }) {
+    var y;
+    const V = C, a = s, f = U("check_boxes_error"), u = p(
       a.options.map((e) => {
         var r;
         return {
@@ -24,22 +27,22 @@ const F = /* @__PURE__ */ V({
           checked: ((r = a.modelValue) == null ? void 0 : r.includes(e.value)) || !1
         };
       })
-    ), c = E(
-      () => s.value.filter((e) => e.checked).map((e) => e.value)
-    ), n = k(""), C = () => n.value = a.isRequired && c.value.length === 0 ? _.required : "";
+    ), n = k(
+      () => u.value.filter((e) => e.checked).map((e) => e.value)
+    ), o = p(""), L = () => o.value = a.isRequired && n.value.length === 0 ? A.required : "";
     m(
-      c,
+      n,
       (e, r) => {
-        r && ((l, u) => l.length === u.length && l.every((o, d) => o === u[d]))(e, r) || (C(), S("update:modelValue", e));
+        r && ((l, d) => l.length === d.length && l.every((i, c) => i === d[c]))(e, r) || (L(), V("update:modelValue", e));
       },
       {
         deep: !0,
-        immediate: !!((b = a.modelValue) != null && b.length)
+        immediate: !!((y = a.modelValue) != null && y.length)
       }
     ), m(
       () => a.modelValue,
       (e) => {
-        e && s.value.forEach(
+        e && u.value.forEach(
           (r) => r.checked = e.includes(r.value)
         );
       },
@@ -50,15 +53,15 @@ const F = /* @__PURE__ */ V({
     ), m(
       () => a.options,
       (e) => {
-        if (e.length === s.value.length && e.every(
-          (l, u) => {
-            var o, d;
-            return l.value === ((o = s.value[u]) == null ? void 0 : o.value) && l.label === ((d = s.value[u]) == null ? void 0 : d.label);
+        if (e.length === u.value.length && e.every(
+          (l, d) => {
+            var i, c;
+            return l.value === ((i = u.value[d]) == null ? void 0 : i.value) && l.label === ((c = u.value[d]) == null ? void 0 : c.label);
           }
         ))
           return;
-        const t = new Set(c.value);
-        s.value = e.map((l) => ({
+        const t = new Set(n.value);
+        u.value = e.map((l) => ({
           value: l.value,
           label: l.label,
           checked: a.modelValue ? a.modelValue.includes(l.value) : t.has(l.value)
@@ -66,39 +69,47 @@ const F = /* @__PURE__ */ V({
       },
       { deep: !0 }
     );
-    const h = {
-      ...((f = a.cssStyle) == null ? void 0 : f.error) ?? {},
-      textColor: v.white,
-      backgroundColor: v.red,
-      border: {
-        color: v.red,
-        size: "1px",
-        radius: ".25rem"
-      }
-    };
-    return (e, r) => (i(), y("div", {
-      class: q(e.$style.check_boxes)
+    const h = k(() => {
+      var e;
+      return {
+        ...((e = a.cssStyle) == null ? void 0 : e.error) ?? {},
+        textColor: b.white,
+        backgroundColor: b.red,
+        border: {
+          color: b.red,
+          size: "1px",
+          radius: ".25rem"
+        }
+      };
+    });
+    return (e, r) => (v(), g("div", {
+      class: E(e.$style.check_boxes),
+      role: "group",
+      "aria-label": s.ariaLabelledBy ? void 0 : s.ariaLabel,
+      "aria-labelledby": s.ariaLabelledBy,
+      "aria-describedby": o.value ? S(f) : void 0
     }, [
-      (i(!0), y(M, null, x(s.value, (t, l) => (i(), B(A, {
+      (v(!0), g(q, null, x(u.value, (t, l) => (v(), M(I, {
         key: t.value,
-        modelValue: s.value[l].checked,
-        "onUpdate:modelValue": (u) => s.value[l].checked = u,
-        name: p.name,
+        modelValue: u.value[l].checked,
+        "onUpdate:modelValue": (d) => u.value[l].checked = d,
+        name: s.name,
         value: t.value,
         label: t.label,
         isDisabled: a.isDisabled,
         cssStyle: a.cssStyle
       }, null, 8, ["modelValue", "onUpdate:modelValue", "name", "value", "label", "isDisabled", "cssStyle"]))), 128)),
-      D(L, {
-        errorMessages: n.value ? [n.value] : [],
+      D(R, {
+        id: S(f),
+        errorMessages: o.value ? [o.value] : [],
         cssStyle: {
-          textColor: h.textColor,
-          backgroundColor: h.backgroundColor
+          textColor: h.value.textColor,
+          backgroundColor: h.value.backgroundColor
         }
-      }, null, 8, ["errorMessages", "cssStyle"])
-    ], 2));
+      }, null, 8, ["id", "errorMessages", "cssStyle"])
+    ], 10, z));
   }
 });
 export {
-  F as default
+  $ as default
 };

package/dist/components/CheckButton.vue.d.ts

@@ -5,6 +5,13 @@ type __VLS_Props = {
     isDisabled?: boolean;
     cssStyle?: CheckBoxStyleForEachStatus;
     isDisableAnimation?: boolean;
+    /**
+     * アクセシブル名。可視ラベルがあるなら ariaLabelledBy でその要素を指すこと。
+     * 文言を持たない label で包むだけだったため、
+     * スクリーンリーダーでは「チェックボックス」としか読まれなかった
+     */
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
 };
 declare function __VLS_template(): {
     attrs: Partial<{}>;
@@ -21,6 +28,8 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}
     "onUpdate:modelValue"?: ((newValue: boolean) => any) | undefined;
 }>, {
     cssStyle: CheckBoxStyleForEachStatus;
+    ariaLabel: string;
+    ariaLabelledBy: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLLabelElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

package/dist/components/CheckButton.vue2.js

@@ -1,54 +1,58 @@
-import { defineComponent as C, ref as V, computed as B, watch as b, openBlock as k, createElementBlock as D, normalizeClass as f, normalizeStyle as S, withDirectives as z, createElementVNode as p, vModelCheckbox as $, renderSlot as g, createBlock as w, createCommentVNode as x } from "vue";
-import A from "./Icon/CheckIcon.vue.js";
-const E = ["name", "disabled"], M = /* @__PURE__ */ C({
+import { defineComponent as C, ref as V, computed as p, watch as b, openBlock as f, createElementBlock as D, normalizeClass as y, normalizeStyle as S, withDirectives as z, createElementVNode as k, vModelCheckbox as L, renderSlot as $, createBlock as g, createCommentVNode as w } from "vue";
+import x from "./Icon/CheckIcon.vue.js";
+const A = ["name", "aria-label", "aria-labelledby", "disabled"], I = /* @__PURE__ */ C({
   __name: "CheckButton",
   props: {
     name: {},
     modelValue: { type: Boolean },
     isDisabled: { type: Boolean },
     cssStyle: { default: () => ({ default: {} }) },
-    isDisableAnimation: { type: Boolean }
+    isDisableAnimation: { type: Boolean },
+    ariaLabel: { default: void 0 },
+    ariaLabelledBy: { default: void 0 }
   },
   emits: ["update:modelValue"],
-  setup(o, { emit: y }) {
-    const h = y, l = o, t = V(l.modelValue ?? !1), a = B(() => l.isDisabled ? l.cssStyle.disabled : l.cssStyle.default);
+  setup(e, { emit: h }) {
+    const v = h, l = e, t = V(l.modelValue ?? !1), o = p(() => l.isDisabled ? l.cssStyle.disabled : l.cssStyle.default);
     return b(
       () => t.value,
-      (e) => h("update:modelValue", e)
+      (a) => v("update:modelValue", a)
     ), b(
       () => l.modelValue,
-      (e) => t.value = e,
+      (a) => t.value = a,
       { immediate: !0 }
-    ), (e, s) => {
-      var r, n, i, d, c, u, m;
-      return k(), D("label", {
-        class: f(e.$style.check_box),
+    ), (a, d) => {
+      var i, r, n, s, u, c, m;
+      return f(), D("label", {
+        class: y(a.$style.check_box),
         style: S({
-          "--border-color": ((n = (r = a.value) == null ? void 0 : r.border) == null ? void 0 : n.color) || "blue",
-          "--border-size": ((d = (i = a.value) == null ? void 0 : i.border) == null ? void 0 : d.size) || "1px",
-          "--radius-size": ((u = (c = a.value) == null ? void 0 : c.border) == null ? void 0 : u.radius) || "0.25rem",
-          "--background-color": ((m = a.value) == null ? void 0 : m.backgroundColor) || "#fff",
-          "--duration": o.isDisableAnimation ? "0s" : ".3s"
+          "--border-color": ((r = (i = o.value) == null ? void 0 : i.border) == null ? void 0 : r.color) || "blue",
+          "--border-size": ((s = (n = o.value) == null ? void 0 : n.border) == null ? void 0 : s.size) || "1px",
+          "--radius-size": ((c = (u = o.value) == null ? void 0 : u.border) == null ? void 0 : c.radius) || "0.25rem",
+          "--background-color": ((m = o.value) == null ? void 0 : m.backgroundColor) || "#fff",
+          "--duration": e.isDisableAnimation ? "0s" : ".3s"
         })
       }, [
-        z(p("input", {
-          "onUpdate:modelValue": s[0] || (s[0] = (v) => t.value = v),
+        z(k("input", {
+          "onUpdate:modelValue": d[0] || (d[0] = (B) => t.value = B),
           type: "checkbox",
-          name: o.name,
-          disabled: o.isDisabled
-        }, null, 8, E), [
-          [$, t.value]
+          name: e.name,
+          "aria-label": e.ariaLabelledBy ? void 0 : e.ariaLabel ?? e.name,
+          "aria-labelledby": e.ariaLabelledBy,
+          disabled: e.isDisabled
+        }, null, 8, A), [
+          [L, t.value]
         ]),
-        p("div", {
-          class: f(e.$style.check_container)
+        k("div", {
+          class: y(a.$style.check_container)
         }, [
-          g(e.$slots, "check"),
-          e.$slots.check ? x("", !0) : (k(), w(A, { key: 0 }))
+          $(a.$slots, "check"),
+          a.$slots.check ? w("", !0) : (f(), g(x, { key: 0 }))
         ], 2)
       ], 6);
     };
   }
 });
 export {
-  M as default
+  I as default
 };

package/dist/components/DateSelector.vue2.js

@@ -1,10 +1,10 @@
-import { defineComponent as T, ref as x, computed as y, watch as M, watchEffect as A, onBeforeUnmount as O, openBlock as s, createBlock as j, normalizeClass as u, withCtx as U, createElementVNode as o, createElementBlock as d, Fragment as h, renderList as $, toDisplayString as B, createVNode as c, createCommentVNode as Y, unref as k } from "vue";
-import { daysInMonth as z, splitDate as H } from "@geckou/ui-core";
-import P from "./InputBox.vue.js";
-import C from "./Icon/KeyboardArrowDownIcon.vue.js";
-import G from "./TextButton.vue.js";
-import { nextUniqueId as J } from "../scripts/unique-id.js";
-const K = ["value", "name", "aria-label", "aria-labelledby", "required"], Q = ["value"], W = ["value", "name", "aria-label", "aria-labelledby", "required"], X = ["value"], Z = ["value", "name", "aria-label", "aria-labelledby", "required"], w = ["value"], _ = ["id"], ee = ["id"], te = ["id"], de = /* @__PURE__ */ T({
+import { defineComponent as F, ref as x, computed as y, watch as I, watchEffect as A, onBeforeUnmount as O, openBlock as d, createBlock as T, normalizeClass as u, withCtx as _, createElementVNode as o, createElementBlock as s, Fragment as h, renderList as g, toDisplayString as $, createVNode as c, createCommentVNode as M, unref as B } from "vue";
+import { daysInMonth as j, splitDate as U } from "@geckou/ui-core";
+import z from "./InputBox.vue.js";
+import q from "./Icon/KeyboardArrowDownIcon.vue.js";
+import H from "./TextButton.vue.js";
+import { nextUniqueId as P } from "../scripts/unique-id.js";
+const G = ["value", "name", "aria-label", "aria-labelledby", "required"], J = ["value"], K = ["value", "name", "aria-label", "aria-labelledby", "required"], Q = ["value"], W = ["value", "name", "aria-label", "aria-labelledby", "required"], X = ["value"], Z = ["id"], w = ["id"], ee = ["id"], de = /* @__PURE__ */ F({
   __name: "DateSelector",
   props: {
     name: {},
@@ -18,67 +18,64 @@ const K = ["value", "name", "aria-label", "aria-labelledby", "required"], Q = ["
     ariaLabelledBy: { default: void 0 }
   },
   emits: ["update:modelValue"],
-  setup(i, { emit: D }) {
-    const q = D, l = i, m = J("date_selector_unit"), f = (e) => l.ariaLabelledBy ? void 0 : `${l.ariaLabel ?? l.name}の${e}`, v = (e) => l.ariaLabelledBy ? `${l.ariaLabelledBy} ${m}_${e}` : void 0, n = x({
+  setup(i, { emit: Y }) {
+    const S = Y, l = i, m = P("date_selector_unit"), v = (e) => l.ariaLabelledBy ? void 0 : `${l.ariaLabel ?? l.name}の${e}`, b = (e) => l.ariaLabelledBy ? `${l.ariaLabelledBy} ${m}_${e}` : void 0, n = x({
       year: "",
       month: "",
       day: ""
-    }), E = y(() => {
-      const e = (/* @__PURE__ */ new Date()).getFullYear(), a = l.minYear ?? e - 100, t = l.maxYear ?? e - 14, r = Math.max(t - a + 1, 0);
-      return Array.from({ length: r }, (g, F) => (a + F).toString()).map((g) => ({ label: g, value: g }));
-    }), N = y(() => Array.from({ length: 12 }, (e, a) => {
-      const t = (a + 1).toString();
+    }), D = y(() => {
+      const e = (/* @__PURE__ */ new Date()).getFullYear(), t = l.minYear ?? e - 100, a = l.maxYear ?? e - 14, r = Math.max(a - t + 1, 0);
+      return Array.from({ length: r }, (p, V) => (t + V).toString()).map((p) => ({ label: p, value: p }));
+    }), E = y(() => Array.from({ length: 12 }, (e, t) => {
+      const a = (t + 1).toString();
       return {
-        label: t,
-        value: t.padStart(2, "0")
+        label: a,
+        value: a.padStart(2, "0")
       };
-    })), S = y(() => {
-      var t, r;
-      const e = Number((t = n.value) == null ? void 0 : t.month);
+    })), L = y(() => {
+      var a, r;
+      const e = Number((a = n.value) == null ? void 0 : a.month);
       if (!e)
         return 31;
-      const a = Number((r = n.value) == null ? void 0 : r.year) || 2e3;
-      return z(a, e);
-    }), R = y(() => {
-      const e = [], a = S.value;
-      for (let t = 1; t <= a; t++) {
-        const r = t.toString();
+      const t = Number((r = n.value) == null ? void 0 : r.year) || 2e3;
+      return j(t, e);
+    }), N = y(() => {
+      const e = [], t = L.value;
+      for (let a = 1; a <= t; a++) {
+        const r = a.toString();
         e.push(r);
       }
-      return e.map((t) => ({
-        label: t,
-        value: String(t).padStart(2, "0")
+      return e.map((a) => ({
+        label: a,
+        value: String(a).padStart(2, "0")
       }));
-    }), b = (e) => {
-      const t = e.currentTarget.firstElementChild;
-      t && t.click();
-    }, p = (e, a) => {
-      const t = e.target, { value: r } = t;
-      n.value = { ...n.value, [a]: r };
+    }), f = (e, t) => {
+      const a = e.target, { value: r } = a;
+      n.value = { ...n.value, [t]: r };
     };
-    M(S, (e) => {
-      const a = Number(n.value.day);
-      a && a > e && (n.value = { ...n.value, day: String(e).padStart(2, "0") });
+    I(L, (e) => {
+      const t = Number(n.value.day);
+      t && t > e && (n.value = { ...n.value, day: String(e).padStart(2, "0") });
     });
-    const V = { year: "", month: "", day: "" };
+    const R = { year: "", month: "", day: "" };
     A(() => {
-      n.value = l.modelValue ? H(l.modelValue) : { ...V };
+      n.value = l.modelValue ? U(l.modelValue) : { ...R };
     });
-    const L = (e) => {
+    const k = (e) => {
       l.formValidationManager && l.formValidationManager.setValid(l.name, e);
-    }, I = (e) => {
-      const a = !!(e.year && e.month && (l.type === "month" || e.day)), t = !e.year && !e.month && !e.day;
-      return l.isRequired ? a : a || t;
+    }, C = (e) => {
+      const t = !!(e.year && e.month && (l.type === "month" || e.day)), a = !e.year && !e.month && !e.day;
+      return l.isRequired ? t : t || a;
     };
-    return L(I(n.value)), M(
+    return k(C(n.value)), I(
       () => n.value,
       (e) => {
-        const a = !!(e.year && e.month && (l.type === "month" || e.day)), t = !e.year && !e.month && !e.day;
-        if (L(I(e)), t)
-          q("update:modelValue", "");
-        else if (a) {
+        const t = !!(e.year && e.month && (l.type === "month" || e.day)), a = !e.year && !e.month && !e.day;
+        if (k(C(e)), a)
+          S("update:modelValue", "");
+        else if (t) {
           const r = l.type === "month" ? [e.year, e.month] : [e.year, e.month, e.day];
-          q("update:modelValue", r.filter(Boolean).join("-"));
+          S("update:modelValue", r.filter(Boolean).join("-"));
         } else
           return;
       },
@@ -86,103 +83,100 @@ const K = ["value", "name", "aria-label", "aria-labelledby", "required"], Q = ["
     ), O(() => {
       var e;
       return (e = l.formValidationManager) == null ? void 0 : e.remove(l.name);
-    }), (e, a) => (s(), j(P, {
+    }), (e, t) => (d(), T(z, {
       class: u(e.$style.date_selector)
     }, {
-      default: U(() => [
+      default: _(() => [
         o("div", {
-          class: u([e.$style.selector_wrapper]),
-          onClick: a[1] || (a[1] = (t) => b(t))
+          class: u([e.$style.selector_wrapper])
         }, [
           o("select", {
             value: n.value.year,
             name: `${i.name}-year`,
-            "aria-label": f("年"),
-            "aria-labelledby": v("年"),
+            "aria-label": v("年"),
+            "aria-labelledby": b("年"),
             required: i.isRequired,
             class: u(e.$style.year),
-            onChange: a[0] || (a[0] = (t) => p(t, "year"))
+            onChange: t[0] || (t[0] = (a) => f(a, "year"))
           }, [
-            a[7] || (a[7] = o("option", {
+            t[4] || (t[4] = o("option", {
               disabled: "",
               selected: "",
               value: ""
             }, "年", -1)),
-            (s(!0), d(h, null, $(E.value, (t) => (s(), d("option", {
-              key: t.value,
-              value: t.value
-            }, B(t.label), 9, Q))), 128))
-          ], 42, K),
-          c(C)
+            (d(!0), s(h, null, g(D.value, (a) => (d(), s("option", {
+              key: a.value,
+              value: a.value
+            }, $(a.label), 9, J))), 128))
+          ], 42, G),
+          c(q)
         ], 2),
         o("div", {
-          class: u([e.$style.selector_wrapper]),
-          onClick: a[3] || (a[3] = (t) => b(t))
+          class: u([e.$style.selector_wrapper])
         }, [
           o("select", {
             value: n.value.month,
             name: `${i.name}-month`,
-            "aria-label": f("月"),
-            "aria-labelledby": v("月"),
+            "aria-label": v("月"),
+            "aria-labelledby": b("月"),
             required: i.isRequired,
-            onChange: a[2] || (a[2] = (t) => p(t, "month"))
+            onChange: t[1] || (t[1] = (a) => f(a, "month"))
           }, [
-            a[8] || (a[8] = o("option", {
+            t[5] || (t[5] = o("option", {
               disabled: "",
               selected: "",
               value: ""
             }, "月", -1)),
-            (s(!0), d(h, null, $(N.value, (t) => (s(), d("option", {
-              key: t.value,
-              value: t.value
-            }, B(t.label), 9, X))), 128))
-          ], 40, W),
-          c(C)
+            (d(!0), s(h, null, g(E.value, (a) => (d(), s("option", {
+              key: a.value,
+              value: a.value
+            }, $(a.label), 9, Q))), 128))
+          ], 40, K),
+          c(q)
         ], 2),
-        i.type === "date" ? (s(), d("div", {
+        i.type === "date" ? (d(), s("div", {
           key: 0,
-          class: u([e.$style.selector_wrapper]),
-          onClick: a[5] || (a[5] = (t) => b(t))
+          class: u([e.$style.selector_wrapper])
         }, [
           o("select", {
             value: n.value.day,
             name: `${i.name}-day`,
-            "aria-label": f("日"),
-            "aria-labelledby": v("日"),
+            "aria-label": v("日"),
+            "aria-labelledby": b("日"),
             required: i.isRequired,
-            onChange: a[4] || (a[4] = (t) => p(t, "day"))
+            onChange: t[2] || (t[2] = (a) => f(a, "day"))
           }, [
-            a[9] || (a[9] = o("option", {
+            t[6] || (t[6] = o("option", {
               disabled: "",
               selected: "",
               value: ""
             }, "日", -1)),
-            (s(!0), d(h, null, $(R.value, (t) => (s(), d("option", {
-              key: t.value,
-              value: t.value
-            }, B(t.label), 9, w))), 128))
-          ], 40, Z),
-          c(C)
-        ], 2)) : Y("", !0),
-        i.ariaLabelledBy ? (s(), d("span", {
+            (d(!0), s(h, null, g(N.value, (a) => (d(), s("option", {
+              key: a.value,
+              value: a.value
+            }, $(a.label), 9, X))), 128))
+          ], 40, W),
+          c(q)
+        ], 2)) : M("", !0),
+        i.ariaLabelledBy ? (d(), s("span", {
           key: 1,
           class: u(e.$style.unit_labels)
         }, [
           o("span", {
-            id: `${k(m)}_年`
-          }, "の年", 8, _),
+            id: `${B(m)}_年`
+          }, "の年", 8, Z),
           o("span", {
-            id: `${k(m)}_月`
-          }, "の月", 8, ee),
+            id: `${B(m)}_月`
+          }, "の月", 8, w),
           o("span", {
-            id: `${k(m)}_日`
-          }, "の日", 8, te)
-        ], 2)) : Y("", !0),
-        c(G, {
+            id: `${B(m)}_日`
+          }, "の日", 8, ee)
+        ], 2)) : M("", !0),
+        c(H, {
           text: "削除",
           variant: "caution",
           class: u(e.$style.delete_button),
-          onClick: a[6] || (a[6] = (t) => n.value = { year: "", month: "", day: "" })
+          onClick: t[3] || (t[3] = (a) => n.value = { year: "", month: "", day: "" })
         }, null, 8, ["class"])
       ]),
       _: 1

package/dist/components/ErrorMessage.vue.d.ts

@@ -1,4 +1,6 @@
 type __VLS_Props = {
+    /** aria-describedby から参照させたいときに渡す */
+    id?: string;
     cssStyle?: {
         textColor: string | undefined;
         backgroundColor: string | undefined;

package/dist/components/ErrorMessage.vue2.js

@@ -1,30 +1,32 @@
-import { defineComponent as c, withDirectives as i, openBlock as r, createElementBlock as o, normalizeClass as m, normalizeStyle as u, unref as g, Fragment as f, renderList as y, toDisplayString as d, vShow as C } from "vue";
-import { COLOR as S } from "@geckou/ui-core";
-const v = /* @__PURE__ */ c({
+import { defineComponent as i, withDirectives as d, openBlock as r, createElementBlock as o, normalizeClass as m, normalizeStyle as g, unref as u, Fragment as f, renderList as y, toDisplayString as C, vShow as S } from "vue";
+import { COLOR as h } from "@geckou/ui-core";
+const k = ["id"], b = /* @__PURE__ */ i({
   __name: "ErrorMessage",
   props: {
+    id: {},
     cssStyle: {},
     errorMessages: {}
   },
   setup(e) {
-    const { red: n } = S;
-    return (a, k) => {
+    const { red: l } = h;
+    return (n, M) => {
       var s, t;
-      return i((r(), o("div", {
+      return d((r(), o("div", {
+        id: e.id,
         role: "alert",
-        class: m(a.$style.error_messages),
-        style: u({
+        class: m(n.$style.error_messages),
+        style: g({
           "--error-text-color": ((s = e.cssStyle) == null ? void 0 : s.textColor) || "#fff",
-          "--error-background-color": ((t = e.cssStyle) == null ? void 0 : t.backgroundColor) || g(n)
+          "--error-background-color": ((t = e.cssStyle) == null ? void 0 : t.backgroundColor) || u(l)
         })
       }, [
-        (r(!0), o(f, null, y(e.errorMessages, (l) => (r(), o("span", { key: l }, d(l), 1))), 128))
-      ], 6)), [
-        [C, e.errorMessages && e.errorMessages.length]
+        (r(!0), o(f, null, y(e.errorMessages, (a, c) => (r(), o("span", { key: c }, C(a), 1))), 128))
+      ], 14, k)), [
+        [S, e.errorMessages && e.errorMessages.length]
       ]);
     };
   }
 });
 export {
-  v as default
+  b as default
 };

package/dist/components/LoadingSpinner.vue.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, SVGSVGElement>;
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/components/LoadingSpinner.vue.js

@@ -1,11 +1,13 @@
-import { openBlock as r, createElementBlock as e, createStaticVNode as t } from "vue";
+import { openBlock as e, createElementBlock as r, createStaticVNode as t } from "vue";
 import i from "../_virtual/_plugin-vue_export-helper.js";
 const o = {}, a = {
   viewBox: "0 0 24 24",
-  xmlns: "http://www.w3.org/2000/svg"
+  xmlns: "http://www.w3.org/2000/svg",
+  "aria-hidden": "true",
+  focusable: "false"
 };
 function n(l, c) {
-  return r(), e("svg", a, [...c[0] || (c[0] = [
+  return e(), r("svg", a, [...c[0] || (c[0] = [
     t('<g><circle cx="12" cy="2.5" r="1.5" opacity=".14"></circle><circle cx="16.75" cy="3.77" r="1.5" opacity=".29"></circle><circle cx="20.23" cy="7.25" r="1.5" opacity=".43"></circle><circle cx="21.50" cy="12.00" r="1.5" opacity=".57"></circle><circle cx="20.23" cy="16.75" r="1.5" opacity=".71"></circle><circle cx="16.75" cy="20.23" r="1.5" opacity=".86"></circle><circle cx="12" cy="21.5" r="1.5"></circle><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"></animateTransform></g>', 1)
   ])]);
 }