@geckou/ui-vue 0.12.0 → 0.14.0

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)
   ])]);
 }

package/dist/components/ModalBox.vue2.js

@@ -1,8 +1,8 @@
-import { defineComponent as g, ref as C, watch as k, nextTick as E, computed as B, onMounted as M, onBeforeUnmount as I, openBlock as d, createElementBlock as c, normalizeClass as t, withModifiers as z, createElementVNode as u, unref as w, renderSlot as m, createCommentVNode as p, createVNode as N } from "vue";
-import { createScrollLock as T, createModalLayer as q, handleTabKey as D } from "@geckou/ui-core";
-import K from "./Icon/CloseIcon.vue.js";
-import { nextUniqueId as U } from "../scripts/unique-id.js";
-const V = ["aria-hidden", "inert"], P = ["aria-labelledby", "aria-label"], j = ["id"], O = /* @__PURE__ */ g({
+import { defineComponent as E, ref as M, watch as $, nextTick as I, computed as O, onMounted as T, onBeforeUnmount as z, openBlock as c, createElementBlock as u, normalizeClass as t, withModifiers as D, createElementVNode as m, unref as b, renderSlot as f, createCommentVNode as v, createVNode as N } from "vue";
+import { createScrollLock as P, createModalLayer as q, handleTabKey as K } from "@geckou/ui-core";
+import U from "./Icon/CloseIcon.vue.js";
+import { nextUniqueId as V } from "../scripts/unique-id.js";
+const j = ["aria-hidden", "inert"], A = ["aria-labelledby", "aria-label"], G = ["id"], W = /* @__PURE__ */ E({
   __name: "ModalBox",
   props: {
     isShown: { type: Boolean },
@@ -10,85 +10,95 @@ const V = ["aria-hidden", "inert"], P = ["aria-labelledby", "aria-label"], j = [
     ariaLabel: {}
   },
   emits: ["close"],
-  setup(n, { emit: v }) {
-    const o = n, f = U("modal_header"), a = C(null), S = v, h = T(), y = (e) => h.toggle(e), s = () => S("close"), r = q(), $ = (e) => r.toggle(e, a.value);
-    k(
+  setup(n, { emit: S }) {
+    const o = n, h = V("modal_header"), l = M(null), g = S, y = P(), k = (e) => y.toggle(e), s = () => g("close"), r = q(), p = (e) => r.toggle(e, l.value);
+    $(
       () => o.isShown,
       (e) => {
-        y(e), $(e);
+        k(e), p(e);
       }
     );
-    let l = null;
-    k(
+    let a = null;
+    $(
       () => o.isShown,
       async (e) => {
-        var i;
+        var d;
         if (!e) {
-          l == null || l.focus(), l = null;
+          a == null || a.focus(), a = null;
           return;
         }
-        l = typeof document > "u" ? null : document.activeElement, await E(), (i = a.value) == null || i.focus();
-      }
+        a = typeof document > "u" ? null : document.activeElement, await I(), (d = l.value) == null || d.focus();
+      },
+      // マウント時点で isShown が true のときも実行する。immediate が無かったため、
+      // 最初から開いた状態で描画するとフォーカスが body に残っていた（React 版と乖離）
+      { immediate: !0 }
     );
-    const L = B(() => !o.isShown || void 0), b = (e) => {
+    let i = !1;
+    const L = (e) => {
+      i = e.target === e.currentTarget;
+    }, C = () => {
+      const e = i;
+      i = !1, e && s();
+    }, B = O(() => !o.isShown || void 0), w = (e) => {
       if (o.isShown && r.isTopmost() && !e.defaultPrevented) {
         if (e.key === "Escape") {
           e.preventDefault(), s();
           return;
         }
-        D(a.value, e, document.activeElement);
+        K(l.value, e, document.activeElement);
       }
     };
-    return M(() => {
-      y(o.isShown), $(o.isShown), document.addEventListener("keydown", b);
-    }), I(() => {
-      h.release(), r.release(), document.removeEventListener("keydown", b);
-    }), (e, i) => (d(), c("div", {
+    return T(() => {
+      k(o.isShown), p(o.isShown), document.addEventListener("keydown", w);
+    }), z(() => {
+      y.release(), r.release(), document.removeEventListener("keydown", w);
+    }), (e, d) => (c(), u("div", {
       class: t([e.$style.overlay, { [e.$style.display]: n.isShown }]),
       "aria-hidden": !n.isShown,
-      inert: L.value,
-      onClick: z(s, ["self"])
+      inert: B.value,
+      onPointerdown: L,
+      onClick: D(C, ["self"])
     }, [
-      u("div", {
+      m("div", {
         ref_key: "dialog",
-        ref: a,
+        ref: l,
         role: "dialog",
         "aria-modal": "true",
-        "aria-labelledby": e.$slots.header ? w(f) : void 0,
+        "aria-labelledby": e.$slots.header ? b(h) : void 0,
         "aria-label": e.$slots.header ? void 0 : n.ariaLabel ?? "ダイアログ",
         tabindex: -1,
         class: t([e.$style.container, e.$style[n.size ?? "medium"]])
       }, [
-        e.$slots.header ? (d(), c("header", {
+        e.$slots.header ? (c(), u("header", {
           key: 0,
-          id: w(f),
+          id: b(h),
           class: t(e.$style.header)
         }, [
-          m(e.$slots, "header")
-        ], 10, j)) : p("", !0),
-        u("div", {
+          f(e.$slots, "header")
+        ], 10, G)) : v("", !0),
+        m("div", {
           class: t(e.$style.contents)
         }, [
-          m(e.$slots, "default")
+          f(e.$slots, "default")
         ], 2),
-        e.$slots.footer ? (d(), c("footer", {
+        e.$slots.footer ? (c(), u("footer", {
           key: 1,
           class: t(e.$style.footer)
         }, [
-          m(e.$slots, "footer")
-        ], 2)) : p("", !0),
-        u("button", {
+          f(e.$slots, "footer")
+        ], 2)) : v("", !0),
+        m("button", {
           type: "button",
           "aria-label": "閉じる",
           class: t(e.$style.close_button),
           onClick: s
         }, [
-          N(K)
+          N(U)
         ], 2)
-      ], 10, P)
-    ], 10, V));
+      ], 10, A)
+    ], 42, j));
   }
 });
 export {
-  O as default
+  W as default
 };

package/dist/components/PopupBox.vue2.js

@@ -1,36 +1,36 @@
-import { defineComponent as u, ref as r, onBeforeUnmount as a, openBlock as i, createBlock as p, Teleport as f, createElementVNode as m, normalizeClass as c, renderSlot as d } from "vue";
-const h = /* @__PURE__ */ u({
+import { defineComponent as u, ref as r, onBeforeUnmount as a, openBlock as i, createBlock as p, Teleport as d, createElementVNode as f, normalizeClass as m, renderSlot as c, createCommentVNode as y } from "vue";
+const v = /* @__PURE__ */ u({
   __name: "PopupBox",
   props: {
     position: { default: () => ({ x: "right", y: "top" }) }
   },
-  setup(t, { expose: s }) {
-    const l = r(!1);
+  setup(l, { expose: n }) {
+    const t = r(!1);
     let e = null;
-    const n = () => {
-      l.value = !0, e !== null && clearTimeout(e), e = setTimeout(() => {
-        l.value = !1, e = null;
+    const s = () => {
+      t.value = !0, e !== null && clearTimeout(e), e = setTimeout(() => {
+        t.value = !1, e = null;
       }, 3e3);
     };
     return a(() => {
       e !== null && clearTimeout(e);
-    }), s({
-      showPopup: n
-    }), (o, y) => (i(), p(f, { to: "body" }, [
-      m("div", {
+    }), n({
+      showPopup: s
+    }), (o, $) => (i(), p(d, { to: "body" }, [
+      f("div", {
         role: "status",
-        class: c([
+        class: m([
           o.$style.popup,
-          o.$style[`x-${t.position.x}`],
-          o.$style[`y-${t.position.y}`],
-          { [o.$style.show]: l.value }
+          o.$style[`x-${l.position.x}`],
+          o.$style[`y-${l.position.y}`],
+          { [o.$style.show]: t.value }
         ])
       }, [
-        d(o.$slots, "default")
+        t.value ? c(o.$slots, "default", {}, void 0, void 0, 0) : y("", !0)
       ], 2)
     ]));
   }
 });
 export {
-  h as default
+  v as default
 };

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

@@ -8,6 +8,12 @@ type __VLS_Props = {
     isRequired?: boolean;
     cssStyle?: RadioButtonStyleForEachStatus;
     isDisableAnimation?: boolean;
+    /**
+     * ラジオグループ自体のアクセシブル名。
+     * 可視ラベル（見出し等）があるなら ariaLabelledBy でその要素を指すこと
+     */
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
 };
 declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     "update:modelValue": (newValue: SelectValue) => any;
@@ -16,5 +22,7 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {
 }>, {
     cssStyle: RadioButtonStyleForEachStatus;
     name: string;
+    ariaLabel: string;
+    ariaLabelledBy: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 export default _default;

package/dist/components/RadioButtons.vue2.js

@@ -1,8 +1,8 @@
-import { defineComponent as C, ref as B, computed as y, watch as E, openBlock as u, createElementBlock as n, normalizeClass as f, Fragment as M, renderList as R, normalizeStyle as z, withDirectives as G, createElementVNode as g, unref as w, vModelRadio as x, toDisplayString as A, createVNode as N } from "vue";
-import { COLOR as r, isEmptyValue as k, MESSAGES as L } from "@geckou/ui-core";
-import { nextUniqueId as O } from "../scripts/unique-id.js";
-import U from "./ErrorMessage.vue.js";
-const $ = ["name", "value", "disabled", "required", "checked"], J = /* @__PURE__ */ C({
+import { defineComponent as E, ref as M, computed as k, watch as x, openBlock as u, createElementBlock as n, normalizeClass as V, unref as c, Fragment as z, renderList as G, normalizeStyle as w, withDirectives as A, createElementVNode as q, vModelRadio as N, toDisplayString as I, createVNode as O } from "vue";
+import { COLOR as i, isEmptyValue as D, MESSAGES as U } from "@geckou/ui-core";
+import { nextUniqueId as S } from "../scripts/unique-id.js";
+import $ from "./ErrorMessage.vue.js";
+const F = ["aria-label", "aria-labelledby", "aria-required", "aria-describedby"], j = ["name", "value", "disabled", "required", "checked"], Q = /* @__PURE__ */ E({
   __name: "RadioButtons",
   props: {
     modelValue: {},
@@ -11,65 +11,76 @@ const $ = ["name", "value", "disabled", "required", "checked"], J = /* @__PURE__
     isDisabled: { type: Boolean },
     isRequired: { type: Boolean },
     cssStyle: { default: void 0 },
-    isDisableAnimation: { type: Boolean }
+    isDisableAnimation: { type: Boolean },
+    ariaLabel: { default: void 0 },
+    ariaLabelledBy: { default: void 0 }
   },
   emits: ["update:modelValue"],
-  setup(s, { emit: V }) {
-    const D = V, e = s, S = e.name ?? O("radio_group"), i = B([]), o = y({
+  setup(a, { emit: h }) {
+    const B = h, e = a, C = e.name ?? S("radio_group"), b = S("radio_group_error"), t = M([]), d = k({
       get: () => e.modelValue ?? "",
-      set: (a) => D("update:modelValue", a)
-    }), d = y(() => {
-      var t, l;
-      const a = e.isDisabled ? (t = e.cssStyle) == null ? void 0 : t.disabled : (l = e.cssStyle) == null ? void 0 : l.default;
+      set: (r) => B("update:modelValue", r)
+    }), s = k(() => {
+      var o, l;
+      const r = e.isDisabled ? (o = e.cssStyle) == null ? void 0 : o.disabled : (l = e.cssStyle) == null ? void 0 : l.default;
       return {
-        textColor: e.isDisabled ? r.darkGray : r.black,
-        backgroundColor: e.isDisabled ? r.lightGray : r.white,
+        textColor: e.isDisabled ? i.darkGray : i.black,
+        backgroundColor: e.isDisabled ? i.lightGray : i.white,
         border: {
-          color: e.isDisabled ? r.darkGray : r.blue,
+          color: e.isDisabled ? i.darkGray : i.blue,
           size: "1px"
         },
-        ...a ?? {}
+        ...r ?? {}
       };
-    }), h = () => {
-      i.value = [], k(o.value) && e.isRequired && i.value.push(L.required);
+    }), L = () => {
+      t.value = [], D(d.value) && e.isRequired && t.value.push(U.required);
     };
-    return E(
-      () => o.value,
-      () => h(),
-      { immediate: !k(e.modelValue) }
-    ), (a, t) => (u(), n("div", {
-      class: f(a.$style.radios)
+    return x(
+      () => d.value,
+      () => L(),
+      { immediate: !D(e.modelValue) }
+    ), (r, o) => (u(), n("div", {
+      class: V(r.$style.radios),
+      role: "radiogroup",
+      "aria-label": a.ariaLabelledBy ? void 0 : a.ariaLabel,
+      "aria-labelledby": a.ariaLabelledBy,
+      "aria-required": a.isRequired || void 0,
+      "aria-describedby": t.value.length ? c(b) : void 0
     }, [
-      (u(!0), n(M, null, R(s.options, (l) => {
-        var c, m, b, v, p;
+      (u(!0), n(z, null, G(a.options, (l) => {
+        var m, y, f, v, g, p;
         return u(), n("label", {
           key: l.value,
-          class: f(a.$style.radio),
-          style: z({
-            "--border-color": (m = (c = d.value) == null ? void 0 : c.border) == null ? void 0 : m.color,
-            "--border-size": (v = (b = d.value) == null ? void 0 : b.border) == null ? void 0 : v.size,
-            "--background-color": (p = d.value) == null ? void 0 : p.backgroundColor,
-            "--duration": s.isDisableAnimation ? "0s" : ".3s"
+          class: V(r.$style.radio),
+          style: w({
+            "--text-color": (m = s.value) == null ? void 0 : m.textColor,
+            "--border-color": (f = (y = s.value) == null ? void 0 : y.border) == null ? void 0 : f.color,
+            "--border-size": (g = (v = s.value) == null ? void 0 : v.border) == null ? void 0 : g.size,
+            "--background-color": (p = s.value) == null ? void 0 : p.backgroundColor,
+            "--duration": a.isDisableAnimation ? "0s" : ".3s"
           })
         }, [
-          G(g("input", {
-            "onUpdate:modelValue": t[0] || (t[0] = (q) => o.value = q),
+          A(q("input", {
+            "onUpdate:modelValue": o[0] || (o[0] = (R) => d.value = R),
             type: "radio",
-            name: w(S),
+            name: c(C),
             value: l.value,
-            disabled: s.isDisabled,
-            required: s.isRequired,
-            checked: l.value === o.value
-          }, null, 8, $), [
-            [x, o.value]
+            disabled: a.isDisabled,
+            required: a.isRequired,
+            checked: l.value === d.value
+          }, null, 8, j), [
+            [N, d.value]
           ]),
-          g("span", null, A(l.label), 1)
+          q("span", null, I(l.label), 1)
         ], 6);
       }), 128)),
-      N(U, { errorMessages: i.value }, null, 8, ["errorMessages"])
-    ], 2));
+      O($, {
+        id: c(b),
+        errorMessages: t.value
+      }, null, 8, ["id", "errorMessages"])
+    ], 10, F));
   }
 });
 export {
-  J as default
+  Q as default
 };

package/dist/components/SlideDownUi.vue2.js

@@ -1,7 +1,8 @@
-import { defineComponent as h, ref as s, onMounted as k, onUpdated as C, watch as $, openBlock as p, createElementBlock as b, normalizeClass as o, normalizeStyle as f, createElementVNode as l, withModifiers as B, renderSlot as y, createBlock as D, createCommentVNode as O } from "vue";
-import w from "./Icon/KeyboardArrowDownIcon.vue.js";
-import { useClickOutside as H } from "../scripts/use-click-outside.js";
-const S = ["disabled", "aria-expanded"], z = ["inert"], U = /* @__PURE__ */ h({
+import { defineComponent as k, ref as l, onMounted as C, onBeforeUnmount as $, watch as B, openBlock as v, createElementBlock as O, normalizeClass as t, normalizeStyle as y, createElementVNode as i, withModifiers as w, renderSlot as m, createBlock as D, createCommentVNode as H } from "vue";
+import z from "./Icon/KeyboardArrowDownIcon.vue.js";
+import { useClickOutside as I } from "../scripts/use-click-outside.js";
+import { nextUniqueId as S } from "../scripts/unique-id.js";
+const U = ["disabled", "aria-expanded"], V = ["inert"], R = /* @__PURE__ */ k({
   __name: "SlideDownUi",
   props: {
     isOpened: { type: [Boolean, null], default: null },
@@ -10,57 +11,65 @@ const S = ["disabled", "aria-expanded"], z = ["inert"], U = /* @__PURE__ */ h({
     isDisableClickOutside: { type: Boolean },
     duration: { default: 0.3 }
   },
-  setup(i, { expose: v }) {
-    const n = i, t = s(n.isOpened || !1), a = s(null), r = s(null), d = s(0), m = () => t.value = !t.value, c = () => t.value = !1, g = () => {
-      n.isDisableClickOutside || c();
-    }, u = () => {
+  setup(a, { expose: g }) {
+    const s = a, n = l(s.isOpened || !1), d = l(null), r = l(null), c = l(0), u = S("slide_down") + "_panel", b = () => n.value = !n.value, p = () => n.value = !1, h = () => {
+      s.isDisableClickOutside || p();
+    }, f = () => {
       const e = r.value;
-      e && (d.value = e.clientHeight);
+      e && (c.value = e.clientHeight);
     };
-    return H(a, () => g()), k(() => u()), C(() => u()), $(
-      () => n.isOpened,
+    I(d, () => h());
+    let o = null;
+    return C(() => {
+      f();
+      const e = r.value;
+      !e || typeof ResizeObserver > "u" || (o = new ResizeObserver(f), o.observe(e));
+    }), $(() => o == null ? void 0 : o.disconnect()), B(
+      () => s.isOpened,
       (e) => {
-        typeof e == "boolean" && (t.value = e);
+        typeof e == "boolean" && (n.value = e);
       }
-    ), v({ isOpenedContents: t, close: c }), (e, A) => (p(), b("div", {
+    ), g({ isOpenedContents: n, close: p }), (e, _) => (v(), O("div", {
       ref_key: "root",
-      ref: a,
-      class: o({ [e.$style.opened]: t.value }),
-      style: f({ "--accordion-toggle-duration": `${n.duration}s` })
+      ref: d,
+      class: t({ [e.$style.opened]: n.value }),
+      style: y({ "--accordion-toggle-duration": `${s.duration}s` })
     }, [
-      l("button", {
-        class: o(e.$style.trigger),
-        disabled: i.isDisabled,
-        "aria-expanded": t.value,
+      i("button", {
+        class: t(e.$style.trigger),
+        disabled: a.isDisabled,
+        "aria-expanded": n.value,
+        "aria-controls": u,
         type: "button",
-        onClick: B(m, ["prevent"])
+        onClick: w(b, ["prevent"])
       }, [
-        l("div", {
-          class: o(e.$style.trigger_content)
+        i("div", {
+          class: t(e.$style.trigger_content)
         }, [
-          y(e.$slots, "trigger")
+          m(e.$slots, "trigger")
         ], 2),
-        i.isHiddenArrow ? O("", !0) : (p(), D(w, {
+        a.isHiddenArrow ? H("", !0) : (v(), D(z, {
           key: 0,
-          class: o(e.$style.icon)
+          class: t(e.$style.icon)
         }, null, 8, ["class"]))
-      ], 10, S),
-      l("div", {
-        style: f({ height: t.value ? `${d.value}px` : 0 }),
-        class: o(e.$style.contents),
-        inert: !t.value || void 0
+      ], 10, U),
+      i("div", {
+        id: u,
+        style: y({ height: n.value ? `${c.value}px` : 0 }),
+        class: t(e.$style.contents),
+        inert: !n.value || void 0
       }, [
-        l("div", {
+        i("div", {
           ref_key: "contents",
           ref: r,
-          class: o(e.$style.container)
+          class: t(e.$style.container)
         }, [
-          y(e.$slots, "default")
+          m(e.$slots, "default")
         ], 2)
-      ], 14, z)
+      ], 14, V)
     ], 6));
   }
 });
 export {
-  U as default
+  R as default
 };