@geckou/ui-vue 0.10.0 → 0.13.0

package/README.md

@@ -301,6 +301,37 @@ const articles = ref<any[]>([])
 
 定義例はデモの `demo/styles/base.scss` を参照。
 
+## 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 に無く、
+  黙って Standard になっていた）。`<ul>` の `list-style` もリセットする
+- `CategoryList` / `MetadataList` が引き当てに失敗した値（空文字）を描かない。
+  `categoryData` を渡し忘れると、ID の数だけ空の `<li>` が並んでいた
+- `MetadataList` の `icon.name` が prop の変更に追従する（setup 時の一度きりだった）
+- `News` / `Row` カードが `isPickUpItem` を宣言した（`ispickupitem` 属性として
+  `<a>` に落ちていた）
+- `News` カードの `AuthorInfo` へ渡す文字サイズを `text.fontSize` に直した
+  （`fontSize` は prop ではなく、小さくなっていなかった）
+- `DateSelector` の使われていないクリックハンドラ（`openDropdown`）を削除
 ## 0.10.0 の変更
 
 - `DatePicker` の年月日欄は**入力中にエラー文言を出さない**。判定は入力のたびに

package/dist/components/ArticleList/Card/News.vue.d.ts

@@ -2,6 +2,7 @@ import { Article, Category, PostConfig } from '../../../types';
 type __VLS_Props = {
     article: Article;
     path: string;
+    isPickUpItem?: boolean;
     postConfig: PostConfig;
     categories: Category[];
 };

package/dist/components/ArticleList/Card/News.vue2.js

@@ -8,11 +8,12 @@ import h from "../Parts/CategoryList.vue.js";
 import C from "../Parts/TagList.vue.js";
 import $ from "../Parts/PostedDate.vue.js";
 import b from "../Parts/ExcerptText.vue.js";
-const B = /* @__PURE__ */ m({
+const A = /* @__PURE__ */ m({
   __name: "News",
   props: {
     article: {},
     path: {},
+    isPickUpItem: { type: Boolean },
     postConfig: {},
     categories: {}
   },
@@ -79,9 +80,9 @@ const B = /* @__PURE__ */ m({
             class: t(a.$style.author),
             text: {
               color: "var(--gray)",
-              preposition: "by"
+              preposition: "by",
+              fontSize: "small"
             },
-            fontSize: "small",
             style: { "grid-area": "author" }
           }, null, 8, ["name", "class"])) : o("", !0)
         ];
@@ -91,5 +92,5 @@ const B = /* @__PURE__ */ m({
   }
 });
 export {
-  B as default
+  A as default
 };

package/dist/components/ArticleList/Card/Row.vue.d.ts

@@ -2,6 +2,7 @@ import { Article, Category, PostConfig } from '../../../types';
 type __VLS_Props = {
     article: Article;
     path: string;
+    isPickUpItem?: boolean;
     postConfig: PostConfig;
     categories: Category[];
 };

package/dist/components/ArticleList/Card/Row.vue2.js

@@ -6,18 +6,19 @@ import u from "../Parts/AuthorInfo.vue.js";
 import h from "../Parts/CardHeading.vue.js";
 import C from "../Parts/CategoryList.vue.js";
 import $ from "../Parts/TagList.vue.js";
-import v from "../Parts/PostedDate.vue.js";
-import b from "../Parts/ExcerptText.vue.js";
-const R = /* @__PURE__ */ g({
+import k from "../Parts/PostedDate.vue.js";
+import v from "../Parts/ExcerptText.vue.js";
+const N = /* @__PURE__ */ g({
   __name: "Row",
   props: {
     article: {},
     path: {},
+    isPickUpItem: { type: Boolean },
     postConfig: {},
     categories: {}
   },
   setup(e) {
-    return (a, k) => e.article ? (r(), l(y, {
+    return (a, b) => e.article ? (r(), l(y, {
       key: 0,
       class: t(a.$style.container),
       path: e.path
@@ -46,7 +47,7 @@ const R = /* @__PURE__ */ g({
             class: t(a.$style.thumbnail),
             style: { "grid-area": "thumbnail" }
           }, null, 8, ["article", "class"]),
-          o(v, {
+          o(k, {
             date: e.article.date,
             formatString: "yy.M.d",
             class: t(a.$style.date),
@@ -58,7 +59,7 @@ const R = /* @__PURE__ */ g({
             class: t(a.$style.heading),
             style: { "grid-area": "heading" }
           }, null, 8, ["heading", "class"]),
-          o(b, {
+          o(v, {
             excerpt: e.article.excerpt.rendered,
             class: t(a.$style.excerpt),
             fontSize: "small",
@@ -93,5 +94,5 @@ const R = /* @__PURE__ */ g({
   }
 });
 export {
-  R as default
+  N as default
 };

package/dist/components/ArticleList/GenericArticleList.vue2.js

@@ -1,4 +1,4 @@
-import { defineComponent as f, computed as r, openBlock as n, createElementBlock as a, normalizeStyle as c, normalizeClass as C, Fragment as g, renderList as b, createBlock as y, resolveDynamicComponent as k, unref as h } from "vue";
+import { defineComponent as f, computed as t, openBlock as n, createElementBlock as i, normalizeStyle as c, normalizeClass as C, Fragment as g, renderList as b, createBlock as y, resolveDynamicComponent as k, unref as h } from "vue";
 import { normalizePostConfig as v, returnArticlePath as N } from "../../scripts/utils.js";
 import u from "./Card/Standard.vue.js";
 import P from "./Card/Rounded.vue.js";
@@ -7,9 +7,10 @@ import w from "./Card/Tile.vue.js";
 import E from "./Card/Simple.vue.js";
 import z from "./Card/Row.vue.js";
 import A from "./Card/News.vue.js";
-import B from "./Card/Entertainment.vue.js";
+import B from "./Card/Grid.vue.js";
+import G from "./Card/Entertainment.vue.js";
 import I from "./Card/Gallery.vue.js";
-const K = /* @__PURE__ */ f({
+const O = /* @__PURE__ */ f({
   __name: "GenericArticleList",
   props: {
     articles: {},
@@ -19,10 +20,10 @@ const K = /* @__PURE__ */ f({
     settings: {}
   },
   setup(e) {
-    const t = e, d = r(() => t.settings.domainToUse), i = r(() => t.settings.isEnabledPickUp), s = r(
-      () => v(t.settings.postConfig)
-    ), p = r(() => {
-      switch (t.theme) {
+    const r = e, d = t(() => r.settings.domainToUse), a = t(() => r.settings.isEnabledPickUp), s = t(
+      () => v(r.settings.postConfig)
+    ), p = t(() => {
+      switch (r.theme) {
         case "standard":
           return u;
         case "rounded":
@@ -37,29 +38,31 @@ const K = /* @__PURE__ */ f({
           return z;
         case "news":
           return A;
+        case "grid":
+          return B;
         case "gallery":
           return I;
         case "entertainment":
-          return B;
+          return G;
         default:
           return u;
       }
     });
-    return (m, S) => (n(), a("ul", {
+    return (m, S) => (n(), i("ul", {
       style: c({
         "--column-number": e.columnNumber,
         "--tablet-column-number": e.columnNumber - 1 ? e.columnNumber - 1 : 1
       }),
-      class: C([m.$style.list, { [m.$style.pickup]: i.value }])
+      class: C([m.$style.list, { [m.$style.pickup]: a.value }])
     }, [
-      (n(!0), a(g, null, b(e.articles, (o, l) => (n(), a("li", {
+      (n(!0), i(g, null, b(e.articles, (o, l) => (n(), i("li", {
         key: o.id,
         style: c({ animationDelay: `${Number(l) * 0.1}s` })
       }, [
         (n(), y(k(p.value), {
           path: h(N)(s.value, d.value, o.id),
           article: o,
-          isPickUpItem: Number(l) === 0 && i.value,
+          isPickUpItem: Number(l) === 0 && a.value,
           postConfig: s.value,
           categories: e.categories
         }, null, 8, ["path", "article", "isPickUpItem", "postConfig", "categories"]))
@@ -68,5 +71,5 @@ const K = /* @__PURE__ */ f({
   }
 });
 export {
-  K as default
+  O as default
 };

package/dist/components/ArticleList/GenericArticleList.vue3.js

@@ -1,11 +1,11 @@
-const t = "_list_h2kvz_1", s = "_fadeIn_h2kvz_1", _ = "_pickup_h2kvz_39", c = {
-  list: t,
-  fadeIn: s,
-  pickup: _
+const c = "_list_cv8hf_1", t = "_fadeIn_cv8hf_1", s = "_pickup_cv8hf_42", _ = {
+  list: c,
+  fadeIn: t,
+  pickup: s
 };
 export {
-  c as default,
-  s as fadeIn,
-  t as list,
-  _ as pickup
+  _ as default,
+  t as fadeIn,
+  c as list,
+  s as pickup
 };

package/dist/components/ArticleList/Parts/CategoryList.vue.js

@@ -9,26 +9,26 @@ const b = /* @__PURE__ */ m({
     label: {},
     delimiter: {}
   },
-  setup(e) {
-    const n = e, l = (t, c) => {
+  setup(t) {
+    const n = t, l = (e, i) => {
       var a;
-      return t.length ? ((a = t.find((o) => String(o.id) === String(c))) == null ? void 0 : a.name) ?? "" : "";
+      return e.length ? ((a = e.find((o) => String(o.id) === String(i))) == null ? void 0 : a.name) ?? "" : "";
     }, r = d(
       () => n.categoryIds.map(
-        (t) => l(n.categoryData, t)
-      )
+        (e) => l(n.categoryData, e)
+      ).filter((e) => e !== "")
     );
-    return (t, c) => {
-      var a, o, i;
+    return (e, i) => {
+      var a, o, c;
       return s(), u(g, {
         metadata: r.value,
         icon: {
-          name: (a = e.icon) != null && a.color ? "FolderIcon" : null,
-          color: (o = e.icon) == null ? void 0 : o.color,
-          size: (i = e.icon) == null ? void 0 : i.size
+          name: (a = t.icon) != null && a.color ? "FolderIcon" : null,
+          color: (o = t.icon) == null ? void 0 : o.color,
+          size: (c = t.icon) == null ? void 0 : c.size
         },
-        label: e.label,
-        delimiter: e.delimiter
+        label: t.label,
+        delimiter: t.delimiter
       }, null, 8, ["metadata", "icon", "label", "delimiter"]);
     };
   }

package/dist/components/ArticleList/Parts/MetadataList.vue2.js

@@ -1,7 +1,7 @@
-import { defineComponent as s, openBlock as a, createElementBlock as o, normalizeClass as t, normalizeStyle as n, createBlock as m, resolveDynamicComponent as d, unref as u, createCommentVNode as i, createElementVNode as b, Fragment as f, renderList as y, toDisplayString as g } from "vue";
-import k from "../../Icon/Folder.vue.js";
-import v from "../../Icon/Tag.vue.js";
-const z = ["data-delimiter"], F = /* @__PURE__ */ s({
+import { defineComponent as b, computed as c, openBlock as a, createElementBlock as o, normalizeClass as t, normalizeStyle as n, createBlock as f, resolveDynamicComponent as y, createCommentVNode as m, createElementVNode as v, Fragment as g, renderList as k, toDisplayString as z } from "vue";
+import C from "../../Icon/Folder.vue.js";
+import h from "../../Icon/Tag.vue.js";
+const $ = ["data-delimiter"], q = /* @__PURE__ */ b({
   __name: "MetadataList",
   props: {
     metadata: {},
@@ -20,25 +20,27 @@ const z = ["data-delimiter"], F = /* @__PURE__ */ s({
     delimiter: { default: "" }
   },
   setup(e) {
-    const c = e.icon.name === "FolderIcon" ? k : v;
-    return (l, C) => e.metadata.length ? (a(), o("div", {
+    const r = e, d = c(
+      () => r.icon.name === "FolderIcon" ? C : h
+    ), i = c(() => r.metadata.filter((l) => l !== ""));
+    return (l, S) => i.value.length ? (a(), o("div", {
       key: 0,
       class: t(l.$style.metadata_list),
       style: n({ "--icon-color": e.icon.color })
     }, [
-      e.icon.name ? (a(), m(d(u(c)), {
+      e.icon.name ? (a(), f(y(d.value), {
         key: 0,
         class: t(l.$style.icon),
         style: n({
           "--icon-color": e.icon.color,
           "--icon-size": e.icon.size === "small" ? "var(--small-icon-size, 0.9375rem)" : "var(--medium-icon-size, 1.125rem)"
         })
-      }, null, 8, ["class", "style"])) : i("", !0),
-      b("ul", {
+      }, null, 8, ["class", "style"])) : m("", !0),
+      v("ul", {
         class: t(l.$style.list)
       }, [
-        (a(!0), o(f, null, y(e.metadata, (r) => (a(), o("li", {
-          key: r,
+        (a(!0), o(g, null, k(i.value, (s, u) => (a(), o("li", {
+          key: `${u}_${s}`,
           class: t([
             l.$style.list_item,
             l.$style[e.label.shape ?? "square"],
@@ -52,11 +54,11 @@ const z = ["data-delimiter"], F = /* @__PURE__ */ s({
             "--label-font-weight": e.label.fontWeight ?? "normal"
           }),
           "data-delimiter": e.delimiter
-        }, g(r), 15, z))), 128))
+        }, z(s), 15, $))), 128))
       ], 2)
-    ], 6)) : i("", !0);
+    ], 6)) : m("", !0);
   }
 });
 export {
-  F as default
+  q as default
 };

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;