@geckou/ui-vue 0.12.0 → 0.14.0

package/README.md

@@ -301,6 +301,35 @@ const articles = ref<any[]>([])
 
 定義例はデモの `demo/styles/base.scss` を参照。
 
+## 0.14.0 の変更
+
+- `DropdownUi` が Escape で閉じ、トリガーへフォーカスを戻す。処理したときは
+  `preventDefault()` するので、`ModalBox` の中に置いてもダイアログまで閉じない
+- `DropdownUi` / `SlideDownUi` のトリガーに `aria-controls` が付き、
+  `DropdownUi` には `aria-haspopup="true"` も付く
+- `DropdownUi` / `SlideDownUi` の中身の高さを `ResizeObserver` で測るようにした。
+  `onUpdated` だけでは、スロットの中の子コンポーネントが自前の状態で伸縮したときに
+  高さがずれていた
+
+## 0.13.0 の変更
+
+- `BasicButton` はローディング中に `disabled` にしない（押した瞬間にフォーカスが
+  `body` へ落ちるため）。代わりに `aria-disabled` / `aria-busy` を付け、
+  `pointer-events` と click ガードで押せなくする。**`:disabled` を前提に
+  スタイルを当てている場合は `[aria-disabled]` の追従が要る**
+- `BasicButton` のローディング中もアクセシブル名を保つ（`visibility: hidden` → `opacity: 0`）。
+  `LoadingSpinner` は `aria-hidden="true"`
+- `BasicButton` の hover 色が `color-mix()` になった（3 桁 hex 等で不正値になっていた）。
+  `cssStyle` の差し替えにも追従する（`hoverStyle` を `computed` に）
+- `PopupBox` は**表示している間だけ**スロットを描画する
+- `ModalBox` はマウント時点で `isShown` が true でもダイアログへフォーカスを移す
+- `ModalBox` の背景クリック判定が「押し始めも背景だったとき」だけになった
+- `RadioButtons` が `role="radiogroup"`、`CheckBoxes` が `role="group"` になり、
+  どちらも `ariaLabel` / `ariaLabelledBy` を受ける。エラーは `aria-describedby` で結び付く
+- `RadioButtons` が `cssStyle.textColor` を `--text-color` へ出す（React 版と揃えた）
+- `CheckButton` が `ariaLabel` / `ariaLabelledBy` を受ける
+- `CheckBoxes` の `errorColor` が `cssStyle` の差し替えに追従する
+- `ErrorMessage` が `id` を受ける
 ## 0.12.0 の変更
 
 - `GenericArticleList` が `theme='grid'` を実装した（型には含まれるのに switch に無く、

package/dist/components/BasicButton.vue2.js

@@ -1,7 +1,7 @@
-import { defineComponent as K, computed as M, openBlock as A, createElementBlock as P, normalizeClass as F, normalizeStyle as Q, unref as l, withDirectives as U, createElementVNode as H, renderSlot as J, createBlock as W, vShow as X } from "vue";
-import Y from "./LoadingSpinner.vue.js";
-import { COLOR as s } from "@geckou/ui-core";
-const Z = ["type", "disabled"], ro = /* @__PURE__ */ K({
+import { defineComponent as J, computed as R, openBlock as V, createElementBlock as K, normalizeClass as j, normalizeStyle as M, withDirectives as Q, createElementVNode as q, renderSlot as A, createBlock as U, vShow as W } from "vue";
+import X from "./LoadingSpinner.vue.js";
+import { COLOR as i } from "@geckou/ui-core";
+const Y = ["type", "disabled", "aria-disabled", "aria-busy"], oe = /* @__PURE__ */ J({
   __name: "BasicButton",
   props: {
     cssStyle: {},
@@ -10,62 +10,70 @@ const Z = ["type", "disabled"], ro = /* @__PURE__ */ K({
     isDisabled: { type: Boolean },
     buttonType: {}
   },
-  setup(r) {
-    var i;
-    const d = r, o = M(() => {
-      var n, t;
-      const e = d.isDisabled ? (n = d.cssStyle) == null ? void 0 : n.disabled : (t = d.cssStyle) == null ? void 0 : t.default;
+  setup(a) {
+    const r = a, o = R(() => {
+      var t, d;
+      const e = r.isDisabled ? (t = r.cssStyle) == null ? void 0 : t.disabled : (d = r.cssStyle) == null ? void 0 : d.default;
       return {
-        textColor: s.white,
-        backgroundColor: d.isDisabled ? s.darkGray : s.blue,
+        textColor: i.white,
+        backgroundColor: r.isDisabled ? i.darkGray : i.blue,
         backgroundImage: "none",
         border: {
-          color: d.isDisabled ? s.darkGray : s.blue,
+          color: r.isDisabled ? i.darkGray : i.blue,
           size: "1px",
           radius: ".25rem"
         },
         boxShadow: "0 0 0 0 transparent",
         ...e
       };
-    }), a = ((i = d.cssStyle) == null ? void 0 : i.hover) || {};
-    return (e, n) => {
-      var t, u, b, c, g, v, m, y, h, k, S, C, f, z, p, w, x, $, B, D, L, I, E, G, O, T, N, R, V, j, q;
-      return A(), P("button", {
-        class: F([e.$style.button, { [e.$style.loading]: r.isLoading }]),
-        style: Q({
-          "--text-color": (t = o.value) == null ? void 0 : t.textColor,
-          "--background-color": (u = o.value) == null ? void 0 : u.backgroundColor,
-          "--background-image": (b = o.value) == null ? void 0 : b.backgroundImage,
-          "--border-color": (g = (c = o.value) == null ? void 0 : c.border) == null ? void 0 : g.color,
-          "--border-size": (m = (v = o.value) == null ? void 0 : v.border) == null ? void 0 : m.size,
-          "--radius-size": (h = (y = o.value) == null ? void 0 : y.border) == null ? void 0 : h.radius,
-          "--box-shadow": (k = o.value) == null ? void 0 : k.boxShadow,
-          "--hover-text-color": ((S = l(a)) == null ? void 0 : S.textColor) || ((C = o.value) == null ? void 0 : C.textColor),
-          "--hover-background-color": ((f = l(a)) == null ? void 0 : f.backgroundColor) || ((z = o.value) == null ? void 0 : z.backgroundColor) && `${(p = o.value) == null ? void 0 : p.backgroundColor}cc`,
-          "--hover-background-image": ((w = l(a)) == null ? void 0 : w.backgroundImage) || ((x = o.value) == null ? void 0 : x.backgroundImage),
-          "--hover-border-color": ((B = ($ = l(a)) == null ? void 0 : $.border) == null ? void 0 : B.color) || ((L = (D = o.value) == null ? void 0 : D.border) == null ? void 0 : L.color),
-          "--hover-border-size": ((E = (I = l(a)) == null ? void 0 : I.border) == null ? void 0 : E.size) || ((O = (G = o.value) == null ? void 0 : G.border) == null ? void 0 : O.size),
-          "--hover-radius-size": ((N = (T = l(a)) == null ? void 0 : T.border) == null ? void 0 : N.radius) || ((V = (R = o.value) == null ? void 0 : R.border) == null ? void 0 : V.radius),
-          "--hover-box-shadow": ((j = l(a)) == null ? void 0 : j.boxShadow) || ((q = o.value) == null ? void 0 : q.boxShadow),
-          "--duration": `${r.duration || 0.3}s`
+    }), l = R(() => {
+      var e;
+      return ((e = r.cssStyle) == null ? void 0 : e.hover) || {};
+    }), F = (e) => e && `color-mix(in srgb, ${e} 80%, transparent)`, H = (e) => {
+      r.isLoading && (e.preventDefault(), e.stopImmediatePropagation());
+    };
+    return (e, t) => {
+      var d, n, s, u, b, c, v, g, m, y, h, k, S, f, C, x, z, p, w, D, L, $, B, I, E, G, O, T, N, P;
+      return V(), K("button", {
+        class: j([e.$style.button, { [e.$style.loading]: a.isLoading }]),
+        style: M({
+          "--text-color": (d = o.value) == null ? void 0 : d.textColor,
+          "--background-color": (n = o.value) == null ? void 0 : n.backgroundColor,
+          "--background-image": (s = o.value) == null ? void 0 : s.backgroundImage,
+          "--border-color": (b = (u = o.value) == null ? void 0 : u.border) == null ? void 0 : b.color,
+          "--border-size": (v = (c = o.value) == null ? void 0 : c.border) == null ? void 0 : v.size,
+          "--radius-size": (m = (g = o.value) == null ? void 0 : g.border) == null ? void 0 : m.radius,
+          "--box-shadow": (y = o.value) == null ? void 0 : y.boxShadow,
+          "--hover-text-color": ((h = l.value) == null ? void 0 : h.textColor) || ((k = o.value) == null ? void 0 : k.textColor),
+          "--hover-background-color": ((S = l.value) == null ? void 0 : S.backgroundColor) || F((f = o.value) == null ? void 0 : f.backgroundColor),
+          "--hover-background-image": ((C = l.value) == null ? void 0 : C.backgroundImage) || ((x = o.value) == null ? void 0 : x.backgroundImage),
+          "--hover-border-color": ((p = (z = l.value) == null ? void 0 : z.border) == null ? void 0 : p.color) || ((D = (w = o.value) == null ? void 0 : w.border) == null ? void 0 : D.color),
+          "--hover-border-size": (($ = (L = l.value) == null ? void 0 : L.border) == null ? void 0 : $.size) || ((I = (B = o.value) == null ? void 0 : B.border) == null ? void 0 : I.size),
+          "--hover-radius-size": ((G = (E = l.value) == null ? void 0 : E.border) == null ? void 0 : G.radius) || ((T = (O = o.value) == null ? void 0 : O.border) == null ? void 0 : T.radius),
+          "--hover-box-shadow": ((N = l.value) == null ? void 0 : N.boxShadow) || ((P = o.value) == null ? void 0 : P.boxShadow),
+          "--duration": `${a.duration || 0.3}s`
         }),
-        type: r.buttonType || "button",
-        disabled: r.isDisabled || r.isLoading
+        type: a.buttonType || "button",
+        disabled: a.isDisabled,
+        "aria-disabled": a.isDisabled || a.isLoading || void 0,
+        "aria-busy": a.isLoading || void 0,
+        onClick: H
       }, [
-        U(H("div", {
-          class: F(e.$style.loading_animation)
+        Q(q("div", {
+          class: j(e.$style.loading_animation),
+          "aria-hidden": "true"
         }, [
-          e.$slots.loading ? J(e.$slots, "loading", {}, void 0, void 0, 0) : (A(), W(Y, { key: 1 }))
+          e.$slots.loading ? A(e.$slots, "loading", {}, void 0, void 0, 0) : (V(), U(X, { key: 1 }))
         ], 2), [
-          [X, r.isLoading]
+          [W, a.isLoading]
         ]),
-        H("div", null, [
-          J(e.$slots, "default")
+        q("div", null, [
+          A(e.$slots, "default")
         ])
-      ], 14, Z);
+      ], 14, Y);
     };
   }
 });
 export {
-  ro as default
+  oe as default
 };

package/dist/components/BasicButton.vue3.js

@@ -1,11 +1,11 @@
-const n = "_button_pz98w_1", o = "_loading_pz98w_25", t = "_loading_animation_pz98w_35", a = {
-  button: n,
-  loading: o,
+const o = "_button_1ocs4_1", n = "_loading_1ocs4_25", t = "_loading_animation_1ocs4_35", a = {
+  button: o,
+  loading: n,
   loading_animation: t
 };
 export {
-  n as button,
+  o as button,
   a as default,
-  o as loading,
+  n as loading,
   t as loading_animation
 };

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

@@ -6,6 +6,12 @@ type __VLS_Props = {
     isDisabled?: boolean;
     isRequired?: boolean;
     cssStyle?: CheckBoxStyleForEachStatus;
+    /**
+     * チェックボックス群自体のアクセシブル名。
+     * 可視ラベル（見出し等）があるなら ariaLabelledBy でその要素を指すこと
+     */
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
 };
 declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     "update:modelValue": (newValue: SelectValue[]) => any;
@@ -14,5 +20,7 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {
 }>, {
     cssStyle: CheckBoxStyleForEachStatus;
     modelValue: SelectValue[];
+    ariaLabel: string;
+    ariaLabelledBy: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 export default _default;

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/DropdownUi.vue.d.ts

@@ -12,6 +12,7 @@ declare function __VLS_template(): {
     };
     refs: {
         root: HTMLDivElement;
+        trigger: HTMLButtonElement;
         contents: HTMLDivElement;
     };
     rootEl: HTMLDivElement;
@@ -27,6 +28,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {
     contentsWidth: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     root: HTMLDivElement;
+    trigger: HTMLButtonElement;
     contents: HTMLDivElement;
 }, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;

package/dist/components/DropdownUi.vue2.js

@@ -1,7 +1,8 @@
-import { defineComponent as h, ref as o, onMounted as k, onUpdated as $, openBlock as a, createElementBlock as u, normalizeClass as l, createElementVNode as f, normalizeStyle as v, withModifiers as p, renderSlot as m, createBlock as w, createCommentVNode as b } from "vue";
-import C from "./Icon/KeyboardArrowDownIcon.vue.js";
-import { useClickOutside as D } from "../scripts/use-click-outside.js";
-const B = ["disabled", "aria-expanded"], z = ["inert"], E = /* @__PURE__ */ h({
+import { defineComponent as D, ref as s, onMounted as C, onBeforeUnmount as z, openBlock as c, createElementBlock as m, normalizeClass as a, withKeys as B, createElementVNode as y, normalizeStyle as b, withModifiers as A, renderSlot as g, createBlock as H, createCommentVNode as h } from "vue";
+import S from "./Icon/KeyboardArrowDownIcon.vue.js";
+import { useClickOutside as I } from "../scripts/use-click-outside.js";
+import { nextUniqueId as O } from "../scripts/unique-id.js";
+const V = ["disabled", "aria-expanded", "aria-haspopup", "aria-controls"], R = ["inert"], N = /* @__PURE__ */ D({
   __name: "DropdownUi",
   props: {
     isHiddenArrow: { type: Boolean, default: !1 },
@@ -9,57 +10,72 @@ const B = ["disabled", "aria-expanded"], z = ["inert"], E = /* @__PURE__ */ h({
     isDisabled: { type: Boolean, default: !1 },
     contentsWidth: { default: "auto" }
   },
-  setup(n, { expose: y }) {
-    const t = o(!1), i = o(null), r = o(null), c = o(0), g = () => t.value = !t.value, s = () => t.value = !1, d = () => {
-      const e = r.value;
-      e && (c.value = e.clientHeight);
+  setup(n, { expose: $ }) {
+    const t = s(!1), d = s(null), i = s(null), u = s(null), f = s(0), v = O("dropdown") + "_panel", k = () => t.value = !t.value, l = () => t.value = !1, w = (e) => {
+      var r;
+      t.value && (e.preventDefault(), l(), (r = u.value) == null || r.focus());
+    }, p = () => {
+      const e = i.value;
+      e && (f.value = e.clientHeight);
     };
-    return D(i, () => s()), k(() => d()), $(() => d()), y({ isContentsOpened: t, close: s }), (e, A) => (a(), u("div", {
+    I(d, () => l());
+    let o = null;
+    return C(() => {
+      p();
+      const e = i.value;
+      !e || typeof ResizeObserver > "u" || (o = new ResizeObserver(p), o.observe(e));
+    }), z(() => o == null ? void 0 : o.disconnect()), $({ isContentsOpened: t, close: l }), (e, r) => (c(), m("div", {
       ref_key: "root",
-      ref: i,
-      class: l(e.$style.drop_down_box)
+      ref: d,
+      class: a(e.$style.drop_down_box),
+      onKeydown: B(w, ["escape"])
     }, [
-      f("button", {
-        class: l(e.$style.button),
+      y("button", {
+        ref_key: "trigger",
+        ref: u,
+        class: a(e.$style.button),
         disabled: n.isDisabled,
         "aria-expanded": t.value,
+        "aria-haspopup": e.$slots.contents ? "true" : void 0,
+        "aria-controls": e.$slots.contents ? v : void 0,
         type: "button",
-        style: v({
+        style: b({
           "--trigger-color": n.isDisabled || !e.$slots.contents ? "var(--text-color)" : "var(--link-color)",
           cursor: n.isDisabled || !e.$slots.contents ? "auto" : "pointer"
         }),
-        onClick: p(g, ["prevent"])
+        onClick: A(k, ["prevent"])
       }, [
-        m(e.$slots, "trigger"),
-        n.isHiddenArrow || !e.$slots.contents || n.isDisabled ? b("", !0) : (a(), w(C, {
+        g(e.$slots, "trigger"),
+        n.isHiddenArrow || !e.$slots.contents || n.isDisabled ? h("", !0) : (c(), H(S, {
           key: 0,
-          class: l([e.$style.icon, { [e.$style.open]: t.value }])
+          class: a([e.$style.icon, { [e.$style.open]: t.value }])
         }, null, 8, ["class"]))
-      ], 14, B),
-      e.$slots.contents ? (a(), u("div", {
+      ], 14, V),
+      e.$slots.contents ? (c(), m("div", {
         key: 0,
-        class: l(e.$style.contents),
+        id: v,
+        class: a(e.$style.contents),
         inert: !t.value || void 0,
-        style: v({
+        style: b({
           boxShadow: t.value ? "var(--box-shadow)" : "none",
-          blockSize: t.value ? `${c.value}px` : 0,
+          blockSize: t.value ? `${f.value}px` : 0,
           inlineSize: n.contentsWidth,
           right: n.contentAlignment === "right" ? "calc(var(--bv) * -0.5)" : "auto",
           left: n.contentAlignment === "left" ? "calc(var(--bv) * -0.5)" : "auto",
           zIndex: "2"
         })
       }, [
-        f("div", {
+        y("div", {
           ref_key: "contents",
-          ref: r,
-          onClick: s
+          ref: i,
+          onClick: l
         }, [
-          m(e.$slots, "contents")
+          g(e.$slots, "contents")
         ], 512)
-      ], 14, z)) : b("", !0)
-    ], 2));
+      ], 14, R)) : h("", !0)
+    ], 34));
   }
 });
 export {
-  E as default
+  N as default
 };

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;