survey-vue3-ui 1.9.107 → 1.9.108

package/survey-vue3-ui.es.js

@@ -1,5 +1,5 @@
-import { shallowReactive as ce, watch as _, onBeforeUnmount as U, onMounted as A, ref as S, shallowRef as F, triggerRef as oe, unref as f, isRef as pe, defineComponent as C, computed as T, onUpdated as Z, resolveComponent as v, openBlock as t, createElementBlock as u, normalizeClass as l, createVNode as b, createCommentVNode as m, Fragment as w, renderList as R, createBlock as q, createElementVNode as p, normalizeStyle as $, onUnmounted as V, withDirectives as D, resolveDynamicComponent as N, vShow as H, toDisplayString as I, vModelCheckbox as z, vModelRadio as J, resolveDirective as Y, vModelSelect as ve, vModelText as qe, getCurrentInstance as x, withCtx as ye, createStaticVNode as ge, normalizeProps as Ce, guardReactiveProps as he, toRaw as be, Teleport as ke } from "vue";
-import { Base as fe, RendererFactory as G, DropdownListModel as Ie, Helpers as we, DropdownMultiSelectListModel as Se, doKey2ClickUp as de, createSvg as Te, ActionDropdownViewModel as Re, getActionDropdownButtonTarget as $e, createPopupViewModel as te, SurveyProgressModel as ie, SurveyProgressButtonsModel as Be, TOCModel as Le, SvgRegistry as De, PopupSurveyModel as Pe, settings as O, createDialogOptions as Me, createPopupModalViewModel as Ne, SurveyModel as He, doKey2ClickDown as Ae, doKey2ClickBlur as Ee } from "survey-core";
+import { shallowReactive as ce, watch as Q, onBeforeUnmount as U, onMounted as A, ref as S, shallowRef as F, triggerRef as oe, unref as f, isRef as pe, defineComponent as C, computed as R, onUpdated as Z, resolveComponent as v, openBlock as t, createElementBlock as u, normalizeClass as l, createVNode as b, createCommentVNode as m, Fragment as w, renderList as T, createBlock as q, createElementVNode as p, normalizeStyle as $, onUnmounted as V, withDirectives as L, resolveDynamicComponent as N, vShow as H, toDisplayString as I, vModelCheckbox as z, vModelRadio as J, resolveDirective as Y, vModelSelect as ve, vModelText as qe, getCurrentInstance as x, withCtx as ye, createStaticVNode as ge, normalizeProps as Ce, guardReactiveProps as he, toRaw as be, Teleport as ke } from "vue";
+import { Base as fe, RendererFactory as G, DropdownListModel as Ie, Helpers as we, DropdownMultiSelectListModel as Se, doKey2ClickUp as de, createSvg as Re, ActionDropdownViewModel as Te, getActionDropdownButtonTarget as $e, createPopupViewModel as te, SurveyProgressModel as ie, SurveyProgressButtonsModel as Be, TOCModel as Le, SvgRegistry as De, PopupSurveyModel as Pe, settings as O, createDialogOptions as Me, createPopupModalViewModel as Ne, SurveyModel as He, doKey2ClickDown as Ae, doKey2ClickBlur as Ee } from "survey-core";
 fe.createPropertiesHash = () => ce({});
 function Ve(r) {
   return !r || r.__vueImplemented ? !1 : (r.createArrayCoreHandler = (o, n) => {
@@ -25,7 +25,7 @@ function le(r, o) {
 }
 function B(r, o, n) {
   let s = !1;
-  const e = _(
+  const e = Q(
     r,
     (i, a) => {
       o && o(i), a && (le(a, s), n && n(a)), s = Ve(i);
@@ -51,7 +51,7 @@ function W(r) {
     o.value = e.renderedHtml, e.onChanged = () => {
       o.value = e.renderedHtml;
     };
-  }, s = _(
+  }, s = Q(
     r,
     (e, i) => {
       i && (i.onChanged = () => {
@@ -76,7 +76,7 @@ const Oe = /* @__PURE__ */ C({
   setup(r) {
     const o = r, n = S(null);
     B(() => o.page);
-    const s = T(() => o.page._showDescription), e = T(() => o.page.rows);
+    const s = R(() => o.page._showDescription), e = R(() => o.page.rows);
     return A(() => {
       o.survey && o.survey.afterRenderPage(n.value);
     }), Z(() => {
@@ -100,7 +100,7 @@ const Oe = /* @__PURE__ */ C({
             locString: i.page.locDescription
           }, null, 8, ["locString"])
         ], 2)) : m("", !0),
-        (t(!0), u(w, null, R(e.value, (h, g) => (t(), u(w, null, [
+        (t(!0), u(w, null, T(e.value, (h, g) => (t(), u(w, null, [
           h.visible ? (t(), q(y, {
             key: i.page.id + "_" + g,
             row: h,
@@ -195,7 +195,7 @@ const Oe = /* @__PURE__ */ C({
     survey: {}
   },
   setup(r) {
-    const o = r, n = T(
+    const o = r, n = R(
       () => o.row.visibleElements
     ), s = S();
     return B(() => o.row), A(() => {
@@ -215,7 +215,7 @@ const Oe = /* @__PURE__ */ C({
         ref_key: "root",
         ref: s
       }, [
-        (t(!0), u(w, null, R(n.value, (c) => (t(), u("div", {
+        (t(!0), u(w, null, T(n.value, (c) => (t(), u("div", {
           style: $(c.rootStyle)
         }, [
           c.isPanel ? m("", !0) : (t(), q(a, {
@@ -235,7 +235,7 @@ const Oe = /* @__PURE__ */ C({
       ], 2);
     };
   }
-}), Ke = ["id", "role", "aria-required", "aria-invalid", "aria-labelledby", "data-name"], je = /* @__PURE__ */ C({
+}), Ke = ["id", "role", "aria-required", "aria-invalid", "aria-labelledby", "data-name"], _e = /* @__PURE__ */ C({
   __name: "Element",
   props: {
     survey: {},
@@ -244,7 +244,7 @@ const Oe = /* @__PURE__ */ C({
     css: {}
   },
   setup(r) {
-    const o = r, n = S(null), s = T(() => !o.element.isPanel && o.element.showErrorOnTop), e = T(() => !o.element.isPanel && o.element.showErrorOnBottom), i = (d) => d.customWidget ? "survey-customwidget" : d.getType() === "panel" || d.isDefaultRendering() ? "survey-" + d.getTemplate() : d.getComponentName(), a = (d) => d.cssContent;
+    const o = r, n = S(null), s = R(() => !o.element.isPanel && o.element.showErrorOnTop), e = R(() => !o.element.isPanel && o.element.showErrorOnBottom), i = (d) => d.customWidget ? "survey-customwidget" : d.getType() === "panel" || d.isDefaultRendering() ? "survey-" + d.getTemplate() : d.getComponentName(), a = (d) => d.cssContent;
     return B(() => o.element), A(() => {
       o.element.isPanel || o.element.afterRender(n.value);
     }), (d, c) => {
@@ -272,7 +272,7 @@ const Oe = /* @__PURE__ */ C({
           element: d.element,
           css: d.css
         }, null, 8, ["element", "css"])) : m("", !0),
-        D(p("div", {
+        L(p("div", {
           class: l(a(d.element) || void 0),
           role: "presentation"
         }, [
@@ -332,7 +332,7 @@ const Oe = /* @__PURE__ */ C({
       }, null, 8, ["element", "css"])) : m("", !0);
     };
   }
-}), Qe = ["id"], _e = ["id"], Ze = /* @__PURE__ */ C({
+}), je = ["id"], Qe = ["id"], Ze = /* @__PURE__ */ C({
   __name: "Panel",
   props: {
     question: {},
@@ -340,7 +340,7 @@ const Oe = /* @__PURE__ */ C({
     css: {}
   },
   setup(r) {
-    const o = r, n = S(!1), s = S(null), e = T(() => o.question.rows), i = T(() => o.question.survey), a = T(() => n.value);
+    const o = r, n = S(!1), s = S(null), e = R(() => o.question.rows), i = R(() => o.question.survey), a = R(() => n.value);
     return B(() => o.question), A(() => {
       o.question.survey && o.question.survey.afterRenderPanel(o.question, s.value), n.value = o.question.isCollapsed;
       const d = o.question;
@@ -378,9 +378,9 @@ const Oe = /* @__PURE__ */ C({
           style: $({ paddingLeft: d.question.innerPaddingLeft }),
           class: l(d.question.cssClasses.panel.content)
         }, [
-          (t(!0), u(w, null, R(e.value, (P, L) => (t(), u(w, null, [
+          (t(!0), u(w, null, T(e.value, (P, D) => (t(), u(w, null, [
             P.visible ? (t(), q(g, {
-              key: d.question.id + "_" + L,
+              key: d.question.id + "_" + D,
               row: P,
               survey: i.value,
               css: d.css
@@ -389,8 +389,8 @@ const Oe = /* @__PURE__ */ C({
           b(k, {
             model: d.question.getFooterToolbar()
           }, null, 8, ["model"])
-        ], 14, _e))
-      ], 10, Qe)) : m("", !0);
+        ], 14, Qe))
+      ], 10, je)) : m("", !0);
     };
   }
 }), Ge = /* @__PURE__ */ C({
@@ -413,7 +413,7 @@ const Oe = /* @__PURE__ */ C({
           element: s.element,
           css: s.css
         }, null, 8, ["element", "css"]),
-        s.element.hasDescriptionUnderTitle ? D((t(), u("div", {
+        s.element.hasDescriptionUnderTitle ? L((t(), u("div", {
           key: 0,
           class: l(s.element.cssDescription)
         }, [
@@ -517,7 +517,7 @@ const Oe = /* @__PURE__ */ C({
         p("datalist", {
           id: s.question.dataListId
         }, [
-          (t(!0), u(w, null, R(s.question.dataList, (a) => (t(), u("option", { value: a }, null, 8, is))), 256))
+          (t(!0), u(w, null, T(s.question.dataList, (a) => (t(), u("option", { value: a }, null, 8, is))), 256))
         ], 8, ts)
       ], 512)) : (t(), q(i, {
         key: 2,
@@ -535,7 +535,7 @@ const Oe = /* @__PURE__ */ C({
   setup(r) {
     const o = r;
     B(() => o.question);
-    const n = T(() => o.question.inputStyle);
+    const n = R(() => o.question.inputStyle);
     return (s, e) => {
       const i = v("sv-character-counter");
       return s.question.getMaxLength() ? (t(), u("div", as, [
@@ -599,10 +599,10 @@ const Oe = /* @__PURE__ */ C({
       }, null, 46, rs));
     };
   }
-}), ms = /* @__PURE__ */ p("legend", {
+}), ms = ["role", "aria-required", "aria-label", "aria-labelledby", "aria-invalid", "aria-describedby"], cs = /* @__PURE__ */ p("legend", {
   role: "presentation",
   class: "sv-hidden"
-}, null, -1), cs = /* @__PURE__ */ C({
+}, null, -1), ps = /* @__PURE__ */ C({
   __name: "Checkbox",
   props: {
     question: {}
@@ -613,17 +613,22 @@ const Oe = /* @__PURE__ */ C({
       const i = v("survey-checkbox-item"), a = v("survey-other-choice");
       return t(), u("fieldset", {
         class: l(s.question.getSelectBaseRootCss()),
-        role: "presentation"
+        role: s.question.a11y_input_ariaRole,
+        "aria-required": s.question.a11y_input_ariaRequired,
+        "aria-label": s.question.a11y_input_ariaLabel,
+        "aria-labelledby": s.question.a11y_input_ariaLabelledBy,
+        "aria-invalid": s.question.a11y_input_ariaInvalid,
+        "aria-describedby": s.question.a11y_input_ariaDescribedBy
       }, [
-        ms,
-        s.question.hasHeadItems ? (t(!0), u(w, { key: 0 }, R(s.question.headItems, (d, c) => (t(), q(i, {
+        cs,
+        s.question.hasHeadItems ? (t(!0), u(w, { key: 0 }, T(s.question.headItems, (d, c) => (t(), q(i, {
           key: d.value,
           class: l(s.question.getItemClass(d)),
           question: s.question,
           item: d,
           index: "" + c
         }, null, 8, ["class", "question", "item", "index"]))), 128)) : m("", !0),
-        !s.question.hasColumns && !s.question.blockedRow ? (t(!0), u(w, { key: 1 }, R(s.question.bodyItems, (d, c) => (t(), q(i, {
+        !s.question.hasColumns && !s.question.blockedRow ? (t(!0), u(w, { key: 1 }, T(s.question.bodyItems, (d, c) => (t(), q(i, {
           key: d.value,
           class: l(s.question.getItemClass(d)),
           question: s.question,
@@ -634,7 +639,7 @@ const Oe = /* @__PURE__ */ C({
           key: 2,
           class: l(s.question.cssClasses.rootRow)
         }, [
-          !s.question.hasColumns && s.question.blockedRow ? (t(!0), u(w, { key: 0 }, R(s.question.dataChoices, (d, c) => (t(), q(i, {
+          !s.question.hasColumns && s.question.blockedRow ? (t(!0), u(w, { key: 0 }, T(s.question.dataChoices, (d, c) => (t(), q(i, {
             key: d.value,
             class: l(s.question.getItemClass(d)),
             question: s.question,
@@ -646,12 +651,12 @@ const Oe = /* @__PURE__ */ C({
           key: 3,
           class: l(s.question.cssClasses.rootMultiColumn)
         }, [
-          (t(!0), u(w, null, R(s.question.columns, (d, c) => (t(), u("div", {
+          (t(!0), u(w, null, T(s.question.columns, (d, c) => (t(), u("div", {
             key: c,
             class: l(s.question.getColumnClass()),
             role: "presentation"
           }, [
-            (t(!0), u(w, null, R(d, (y, h) => (t(), q(i, {
+            (t(!0), u(w, null, T(d, (y, h) => (t(), q(i, {
               key: y.value,
               class: l(s.question.getItemClass(y)),
               question: s.question,
@@ -660,7 +665,7 @@ const Oe = /* @__PURE__ */ C({
             }, null, 8, ["class", "question", "item", "index"]))), 128))
           ], 2))), 128))
         ], 2)) : m("", !0),
-        s.question.hasFootItems ? (t(!0), u(w, { key: 4 }, R(s.question.footItems, (d, c) => (t(), q(i, {
+        s.question.hasFootItems ? (t(!0), u(w, { key: 4 }, T(s.question.footItems, (d, c) => (t(), q(i, {
           key: d.value,
           class: l(s.question.getItemClass(d)),
           question: s.question,
@@ -671,10 +676,10 @@ const Oe = /* @__PURE__ */ C({
           key: 5,
           question: s.question
         }, null, 8, ["question"])) : m("", !0)
-      ], 2);
+      ], 10, ms);
     };
   }
-}), ps = { role: "presentation" }, vs = ["aria-label"], qs = ["name", "value", "id", "disabled", "aria-describedby"], ys = ["name", "value", "id", "disabled", "aria-describedby"], gs = ["xlink:href"], Cs = /* @__PURE__ */ C({
+}), vs = { role: "presentation" }, qs = ["name", "value", "id", "disabled"], ys = ["name", "value", "id", "disabled"], gs = ["xlink:href"], Cs = /* @__PURE__ */ C({
   __name: "CheckboxItem",
   props: {
     question: {},
@@ -683,7 +688,7 @@ const Oe = /* @__PURE__ */ C({
     hideLabel: { type: Boolean }
   },
   setup(r) {
-    const o = r, n = T({
+    const o = r, n = R({
       get() {
         return o.question.isAllSelected || "";
       },
@@ -694,35 +699,30 @@ const Oe = /* @__PURE__ */ C({
     });
     return B(() => o.item), (s, e) => {
       const i = v("survey-string");
-      return t(), u("div", ps, [
+      return t(), u("div", vs, [
         p("label", {
-          class: l(s.question.getLabelClass(s.item)),
-          "aria-label": s.question.getAriaItemLabel(s.item)
+          class: l(s.question.getLabelClass(s.item))
         }, [
-          s.item == s.question.selectAllItem ? D((t(), u("input", {
+          s.item == s.question.selectAllItem ? L((t(), u("input", {
             key: 0,
-            role: "option",
             type: "checkbox",
             name: s.question.name,
             value: n.value,
             "onUpdate:modelValue": e[0] || (e[0] = (a) => n.value = a),
             id: s.question.getItemId(s.item),
             disabled: !s.question.getItemEnabled(s.item),
-            "aria-describedby": s.question.ariaDescribedBy,
             class: l(s.question.cssClasses.itemControl)
           }, null, 10, qs)), [
             [z, n.value]
           ]) : m("", !0),
-          s.item != s.question.selectAllItem ? D((t(), u("input", {
+          s.item != s.question.selectAllItem ? L((t(), u("input", {
             key: 1,
-            role: "option",
             type: "checkbox",
             name: s.question.name,
             value: s.item.value,
             "onUpdate:modelValue": e[1] || (e[1] = (a) => s.question.renderedValue = a),
             id: s.question.getItemId(s.item),
             disabled: !s.question.getItemEnabled(s.item),
-            "aria-describedby": s.question.ariaDescribedBy,
             class: l(s.question.cssClasses.itemControl)
           }, null, 10, ys)), [
             [z, s.question.renderedValue]
@@ -748,11 +748,11 @@ const Oe = /* @__PURE__ */ C({
               locString: s.item.locText
             }, null, 8, ["locString"])
           ], 2))
-        ], 10, vs)
+        ], 2)
       ]);
     };
   }
-}), hs = { key: 5 }, bs = ["value"], ks = /* @__PURE__ */ C({
+}), hs = ["role", "aria-required", "aria-label", "aria-labelledby", "aria-invalid", "aria-describedby"], bs = { key: 5 }, ks = ["value"], fs = /* @__PURE__ */ C({
   __name: "Radiogroup",
   props: {
     question: {}
@@ -762,12 +762,17 @@ const Oe = /* @__PURE__ */ C({
     return M(o, n), (s, e) => {
       const i = v("survey-radiogroup-item"), a = v("survey-other-choice");
       return t(), u("fieldset", {
-        role: "presentation",
         class: l(s.question.getSelectBaseRootCss()),
         ref_key: "root",
-        ref: n
+        ref: n,
+        role: s.question.a11y_input_ariaRole,
+        "aria-required": s.question.a11y_input_ariaRequired,
+        "aria-label": s.question.a11y_input_ariaLabel,
+        "aria-labelledby": s.question.a11y_input_ariaLabelledBy,
+        "aria-invalid": s.question.a11y_input_ariaInvalid,
+        "aria-describedby": s.question.a11y_input_ariaDescribedBy
       }, [
-        !s.question.hasColumns && !s.question.blockedRow ? (t(!0), u(w, { key: 0 }, R(s.question.visibleChoices, (d, c) => (t(), q(i, {
+        !s.question.hasColumns && !s.question.blockedRow ? (t(!0), u(w, { key: 0 }, T(s.question.visibleChoices, (d, c) => (t(), q(i, {
           key: d.value,
           class: l(s.question.getItemClass(d)),
           question: s.question,
@@ -778,7 +783,7 @@ const Oe = /* @__PURE__ */ C({
           key: 1,
           class: l(s.question.cssClasses.rootRow)
         }, [
-          !s.question.hasColumns && s.question.blockedRow ? (t(!0), u(w, { key: 0 }, R(s.question.dataChoices, (d, c) => (t(), q(i, {
+          !s.question.hasColumns && s.question.blockedRow ? (t(!0), u(w, { key: 0 }, T(s.question.dataChoices, (d, c) => (t(), q(i, {
             key: d.value,
             class: l(s.question.getItemClass(d)),
             question: s.question,
@@ -790,11 +795,11 @@ const Oe = /* @__PURE__ */ C({
           key: 2,
           class: l(s.question.cssClasses.rootMultiColumn)
         }, [
-          s.question.hasColumns ? (t(!0), u(w, { key: 0 }, R(s.question.columns, (d, c) => (t(), u("div", {
+          s.question.hasColumns ? (t(!0), u(w, { key: 0 }, T(s.question.columns, (d, c) => (t(), u("div", {
             class: l(s.question.getColumnClass()),
             role: "presentation"
           }, [
-            (t(!0), u(w, null, R(d, (y, h) => (t(), q(i, {
+            (t(!0), u(w, null, T(d, (y, h) => (t(), q(i, {
               key: y.value,
               class: l(s.question.getItemClass(y)),
               question: s.question,
@@ -803,7 +808,7 @@ const Oe = /* @__PURE__ */ C({
             }, null, 8, ["class", "question", "item", "index"]))), 128))
           ], 2))), 256)) : m("", !0)
         ], 2)) : m("", !0),
-        s.question.hasFootItems ? (t(!0), u(w, { key: 3 }, R(s.question.footItems, (d, c) => (t(), q(i, {
+        s.question.hasFootItems ? (t(!0), u(w, { key: 3 }, T(s.question.footItems, (d, c) => (t(), q(i, {
           key: d.value,
           class: l(s.question.getItemClass(d)),
           question: s.question,
@@ -814,7 +819,7 @@ const Oe = /* @__PURE__ */ C({
           key: 4,
           question: s.question
         }, null, 8, ["question"])) : m("", !0),
-        s.question.showClearButtonInContent ? (t(), u("div", hs, [
+        s.question.showClearButtonInContent ? (t(), u("div", bs, [
           p("input", {
             type: "button",
             class: l(s.question.cssClasses.clearButton),
@@ -822,12 +827,12 @@ const Oe = /* @__PURE__ */ C({
               s.question.clearValue();
             }),
             value: s.question.clearButtonCaption
-          }, null, 10, bs)
+          }, null, 10, ks)
         ])) : m("", !0)
-      ], 2);
+      ], 10, hs);
     };
   }
-}), fs = { role: "presentation" }, Is = ["aria-label"], ws = ["name", "value", "id", "aria-describedby", "disabled"], Ss = ["xlink:href"], Ts = /* @__PURE__ */ C({
+}), Is = { role: "presentation" }, ws = ["name", "value", "id", "aria-describedby", "disabled"], Ss = ["xlink:href"], Rs = /* @__PURE__ */ C({
   __name: "RadiogroupItem",
   props: {
     question: {},
@@ -839,13 +844,12 @@ const Oe = /* @__PURE__ */ C({
     const o = r, n = (e) => o.question.getLabelClass(e), s = (e) => o.question.getControlLabelClass(e);
     return B(() => o.item), (e, i) => {
       const a = v("survey-string");
-      return t(), u("div", fs, [
+      return t(), u("div", Is, [
         p("label", {
           onMousedown: i[1] || (i[1] = (d) => e.question.onMouseDown()),
-          class: l(n(e.item)),
-          "aria-label": e.question.getAriaItemLabel(e.item)
+          class: l(n(e.item))
         }, [
-          D(p("input", {
+          L(p("input", {
             type: "radio",
             name: e.question.questionName,
             value: e.item.value,
@@ -878,11 +882,11 @@ const Oe = /* @__PURE__ */ C({
               locString: e.item.locText
             }, null, 8, ["locString"])
           ], 2))
-        ], 42, Is)
+        ], 34)
       ]);
     };
   }
-}), Rs = ["src", "width", "height"], $s = ["title"], Bs = { key: 0 }, Ls = /* @__PURE__ */ C({
+}), Ts = ["src", "width", "height"], $s = ["title"], Bs = { key: 0 }, Ls = /* @__PURE__ */ C({
   __name: "Signaturepad",
   props: {
     question: {}
@@ -900,7 +904,7 @@ const Oe = /* @__PURE__ */ C({
           width: s.question.signatureWidth + "px"
         })
       }, [
-        D(p("div", {
+        L(p("div", {
           class: l(s.question.cssClasses.placeholder)
         }, I(s.question.placeHolderText), 3), [
           [H, s.question.needShowPlaceholder()]
@@ -912,7 +916,7 @@ const Oe = /* @__PURE__ */ C({
             src: s.question.backgroundImage,
             width: s.question.signatureWidth,
             height: s.question.signatureHeight
-          }, null, 10, Rs)) : m("", !0),
+          }, null, 10, Ts)) : m("", !0),
           p("canvas", {
             tabindex: "0",
             class: l(s.question.cssClasses.canvas)
@@ -973,7 +977,7 @@ const Oe = /* @__PURE__ */ C({
         ref_key: "root",
         ref: n
       }, [
-        e.question.renderedMode === "image" ? D((t(), u("img", {
+        e.question.renderedMode === "image" ? L((t(), u("img", {
           key: 0,
           class: l(e.question.getImageCss()),
           src: f(s),
@@ -994,7 +998,7 @@ const Oe = /* @__PURE__ */ C({
         }, null, 46, Ms)), [
           [H, f(s) && !e.question.contentNotLoaded]
         ]) : m("", !0),
-        e.question.renderedMode === "video" ? D((t(), u("video", {
+        e.question.renderedMode === "video" ? L((t(), u("video", {
           key: 1,
           controls: "",
           class: l(e.question.getImageCss()),
@@ -1052,7 +1056,7 @@ const Oe = /* @__PURE__ */ C({
       ref: n
     }, I(s.question.formatedValue), 3));
   }
-}), Vs = ["id", "aria-required", "aria-label", "aria-invalid", "aria-describedby", "multiple", "title", "accept", "capture"], Os = ["id", "multiple", "placeholder"], Fs = ["for", "aria-label"], Ws = ["onClick", "href", "title", "download"], zs = ["src"], Us = ["onClick"], Ks = ["onClick", "href", "title", "download"], js = /* @__PURE__ */ C({
+}), Vs = ["id", "aria-required", "aria-label", "aria-invalid", "aria-describedby", "multiple", "title", "accept", "capture"], Os = ["id", "multiple", "placeholder"], Fs = ["for", "aria-label"], Ws = ["onClick", "href", "title", "download"], zs = ["src"], Us = ["onClick"], Ks = ["onClick", "href", "title", "download"], _s = /* @__PURE__ */ C({
   __name: "File",
   props: {
     question: {}
@@ -1110,7 +1114,7 @@ const Oe = /* @__PURE__ */ C({
               p("div", {
                 class: l(e.question.cssClasses.wrapper)
               }, [
-                e.question.isReadOnly ? m("", !0) : D((t(), u("label", {
+                e.question.isReadOnly ? m("", !0) : L((t(), u("label", {
                   key: 0,
                   role: "button",
                   tabindex: "0",
@@ -1153,7 +1157,7 @@ const Oe = /* @__PURE__ */ C({
             key: 1,
             class: l(e.question.cssClasses.fileList || void 0)
           }, [
-            (t(!0), u(w, null, R(e.question.previewValue, (h, g) => D((t(), u("span", {
+            (t(!0), u(w, null, T(e.question.previewValue, (h, g) => L((t(), u("span", {
               key: e.question.inputId + "_" + g,
               class: l(e.question.cssClasses.preview)
             }, [
@@ -1234,15 +1238,15 @@ const Oe = /* @__PURE__ */ C({
               title: e.question.clearButtonCaption
             }, null, 8, ["iconName", "title"])) : m("", !0)
           ], 2)) : m("", !0),
-          e.question.mobileFileNavigatorVisible ? (t(), q(c, {
+          e.question.fileNavigatorVisible ? (t(), q(c, {
             key: 3,
-            model: e.question.mobileFileNavigator
+            model: e.question.fileNavigator
           }, null, 8, ["model"])) : m("", !0)
         ], 34)
       ], 2);
     };
   }
-}), Qs = ["aria-label"], _s = /* @__PURE__ */ C({
+}), js = ["aria-label"], Qs = /* @__PURE__ */ C({
   __name: "Imagepicker",
   props: {
     question: {}
@@ -1259,18 +1263,18 @@ const Oe = /* @__PURE__ */ C({
         p("legend", {
           role: "radio",
           "aria-label": s.question.locTitle.renderedHtml
-        }, null, 8, Qs),
-        s.question.hasColumns ? m("", !0) : (t(!0), u(w, { key: 0 }, R(s.question.visibleChoices, (a) => (t(), q(i, {
+        }, null, 8, js),
+        s.question.hasColumns ? m("", !0) : (t(!0), u(w, { key: 0 }, T(s.question.visibleChoices, (a) => (t(), q(i, {
           key: a.value,
           question: s.question,
           item: a
         }, null, 8, ["question", "item"]))), 128)),
-        s.question.hasColumns ? (t(!0), u(w, { key: 1 }, R(s.question.columns, (a, d) => (t(), u("div", {
+        s.question.hasColumns ? (t(!0), u(w, { key: 1 }, T(s.question.columns, (a, d) => (t(), u("div", {
           class: l(s.question.getColumnClass()),
           key: d,
           role: "presentation"
         }, [
-          (t(!0), u(w, null, R(a, (c) => (t(), q(i, {
+          (t(!0), u(w, null, T(a, (c) => (t(), q(i, {
             key: c.value,
             question: s.question,
             item: c
@@ -1297,7 +1301,7 @@ const Oe = /* @__PURE__ */ C({
         p("label", {
           class: l(e.question.cssClasses.label)
         }, [
-          e.question.multiSelect ? D((t(), u("input", {
+          e.question.multiSelect ? L((t(), u("input", {
             key: 0,
             type: "checkbox",
             name: e.question.questionName,
@@ -1312,7 +1316,7 @@ const Oe = /* @__PURE__ */ C({
             class: l(e.question.cssClasses.itemControl)
           }, null, 10, Zs)), [
             [z, e.question.value]
-          ]) : D((t(), u("input", {
+          ]) : L((t(), u("input", {
             key: 1,
             type: "radio",
             name: e.question.questionName,
@@ -1528,7 +1532,7 @@ const rn = /* @__PURE__ */ C({
       o.question.onClick(a);
     }, e = (a) => {
       o.question.onKeyUp(a);
-    }, i = T({
+    }, i = R({
       get() {
         var a;
         return (a = o.question.value) != null ? a : "";
@@ -1551,7 +1555,7 @@ const rn = /* @__PURE__ */ C({
             disabled: "",
             id: a.question.inputId,
             class: l(a.question.getControlClass())
-          }, I(a.question.readOnlyText), 11, ln)) : D((t(), u("select", {
+          }, I(a.question.readOnlyText), 11, ln)) : L((t(), u("select", {
             key: 0,
             id: a.question.inputId,
             "onUpdate:modelValue": d[0] || (d[0] = (g) => i.value = g),
@@ -1566,7 +1570,7 @@ const rn = /* @__PURE__ */ C({
             required: a.question.isRequired
           }, [
             a.question.allowClear ? (t(), u("option", tn, I(a.question.placeholder), 1)) : m("", !0),
-            (t(!0), u(w, null, R(a.question.visibleChoices, (g) => (t(), q(c, {
+            (t(!0), u(w, null, T(a.question.visibleChoices, (g) => (t(), q(c, {
               item: g,
               key: g.id
             }, null, 8, ["item"]))), 128))
@@ -1609,7 +1613,7 @@ const rn = /* @__PURE__ */ C({
     question: {}
   },
   setup(r) {
-    const o = r, n = S(null), s = T(() => {
+    const o = r, n = S(null), s = R(() => {
       const g = o.question;
       return g.dropdownListModel || (g.dropdownListModel = new Ie(g)), o.question.dropdownListModel;
     }), e = (g) => {
@@ -1636,7 +1640,7 @@ const rn = /* @__PURE__ */ C({
       s.value.inputStringRendered = g.target.value;
     };
     return B(() => s.value), Z(d), A(d), (g, k) => {
-      const P = v("survey-string"), L = v("sv-svg-icon"), E = v("sv-popup");
+      const P = v("survey-string"), D = v("sv-svg-icon"), E = v("sv-popup");
       return t(), u("div", {
         class: l(g.question.cssClasses.selectWrapper),
         onClick: e
@@ -1706,12 +1710,12 @@ const rn = /* @__PURE__ */ C({
               onFocus: y
             }, null, 42, cn)
           ], 2),
-          g.question.allowClear && g.question.cssClasses.cleanButtonIconId ? D((t(), u("div", {
+          g.question.allowClear && g.question.cssClasses.cleanButtonIconId ? L((t(), u("div", {
             key: 1,
             class: l(g.question.cssClasses.cleanButton),
             onClick: i
           }, [
-            b(L, {
+            b(D, {
               class: l(g.question.cssClasses.cleanButtonSvg),
               iconName: g.question.cssClasses.cleanButtonIconId,
               title: g.question.clearCaption,
@@ -1740,7 +1744,7 @@ const rn = /* @__PURE__ */ C({
           key: 3,
           class: l(g.question.cssClasses.chevronButton)
         }, [
-          b(L, {
+          b(D, {
             class: l(g.question.cssClasses.chevronButtonSvg),
             iconName: g.question.cssClasses.chevronButtonIconId,
             size: "auto"
@@ -1777,7 +1781,7 @@ const rn = /* @__PURE__ */ C({
     question: {}
   },
   setup(r) {
-    const o = r, n = T(() => {
+    const o = r, n = R(() => {
       const d = o.question;
       return d.dropdownListModel || (d.dropdownListModel = new Se(d)), o.question.dropdownListModel;
     }), s = (d) => {
@@ -1820,17 +1824,17 @@ const rn = /* @__PURE__ */ C({
           p("div", {
             class: l(d.question.cssClasses.controlValue)
           }, [
-            (t(!0), u(w, null, R(d.question.selectedChoices, (P, L) => (t(), q(y, {
+            (t(!0), u(w, null, T(d.question.selectedChoices, (P, D) => (t(), q(y, {
               item: P,
               question: d.question,
-              key: "item" + L
+              key: "item" + D
             }, null, 8, ["item", "question"]))), 128)),
             b(h, {
               model: n.value,
               question: d.question
             }, null, 8, ["model", "question"])
           ], 2),
-          d.question.allowClear && d.question.cssClasses.cleanButtonIconId ? D((t(), u("div", {
+          d.question.allowClear && d.question.cssClasses.cleanButtonIconId ? L((t(), u("div", {
             key: 0,
             class: l(d.question.cssClasses.cleanButton),
             onClick: e
@@ -1911,7 +1915,7 @@ const rn = /* @__PURE__ */ C({
             p("span", hn, I(a.model.inputStringRendered), 1),
             p("span", null, I(a.model.hintStringSuffix), 1)
           ], 2)) : m("", !0),
-          D(p("input", {
+          L(p("input", {
             type: "text",
             autocomplete: "off",
             "onUpdate:modelValue": d[0] || (d[0] = (y) => a.model.inputStringRendered = y),
@@ -1988,7 +1992,7 @@ const rn = /* @__PURE__ */ C({
         ref_key: "root",
         ref: n
       }, [
-        e.question.selectToRankEnabled ? m("", !0) : (t(!0), u(w, { key: 0 }, R(e.question.rankingChoices, (d, c) => (t(), q(a, {
+        e.question.selectToRankEnabled ? m("", !0) : (t(!0), u(w, { key: 0 }, T(e.question.rankingChoices, (d, c) => (t(), q(a, {
           key: d.value + "-" + c + "-item",
           class: l(e.question.getItemClass(d)),
           text: d.locText,
@@ -2003,7 +2007,7 @@ const rn = /* @__PURE__ */ C({
           class: l(e.question.getContainerClasses("from")),
           "data-ranking": "from-container"
         }, [
-          (t(!0), u(w, null, R(e.question.unRankingChoices, (d, c) => (t(), q(a, {
+          (t(!0), u(w, null, T(e.question.unRankingChoices, (d, c) => (t(), q(a, {
             key: d.value + "-" + c + "-item",
             class: l(e.question.getItemClass(d)),
             text: d.locText,
@@ -2028,7 +2032,7 @@ const rn = /* @__PURE__ */ C({
           class: l(e.question.getContainerClasses("to")),
           "data-ranking": "to-container"
         }, [
-          (t(!0), u(w, null, R(e.question.rankingChoices, (d, c) => (t(), q(a, {
+          (t(!0), u(w, null, T(e.question.rankingChoices, (d, c) => (t(), q(a, {
             key: d.value + "-" + c + "-item",
             class: l(e.question.getItemClass(d)),
             text: d.locText,
@@ -2046,11 +2050,11 @@ const rn = /* @__PURE__ */ C({
       ], 2);
     };
   }
-}), Sn = ["tabindex", "data-sv-drop-target-ranking-item"], Tn = {
+}), Sn = ["tabindex", "data-sv-drop-target-ranking-item"], Rn = {
   tabindex: "-1",
   style: { outline: "none" }
-}, Rn = /* @__PURE__ */ p("path", { d: "M6 2C6 0.9 6.9 0 8 0C9.1 0 10 0.9 10 2C10 3.1 9.1 4 8 4C6.9 4 6 3.1 6 2ZM2 0C0.9 0 0 0.9 0 2C0 3.1 0.9 4 2 4C3.1 4 4 3.1 4 2C4 0.9 3.1 0 2 0ZM8 6C6.9 6 6 6.9 6 8C6 9.1 6.9 10 8 10C9.1 10 10 9.1 10 8C10 6.9 9.1 6 8 6ZM2 6C0.9 6 0 6.9 0 8C0 9.1 0.9 10 2 10C3.1 10 4 9.1 4 8C4 6.9 3.1 6 2 6ZM8 12C6.9 12 6 12.9 6 14C6 15.1 6.9 16 8 16C9.1 16 10 15.1 10 14C10 12.9 9.1 12 8 12ZM2 12C0.9 12 0 12.9 0 14C0 15.1 0.9 16 2 16C3.1 16 4 15.1 4 14C4 12.9 3.1 12 2 12Z" }, null, -1), $n = [
-  Rn
+}, Tn = /* @__PURE__ */ p("path", { d: "M6 2C6 0.9 6.9 0 8 0C9.1 0 10 0.9 10 2C10 3.1 9.1 4 8 4C6.9 4 6 3.1 6 2ZM2 0C0.9 0 0 0.9 0 2C0 3.1 0.9 4 2 4C3.1 4 4 3.1 4 2C4 0.9 3.1 0 2 0ZM8 6C6.9 6 6 6.9 6 8C6 9.1 6.9 10 8 10C9.1 10 10 9.1 10 8C10 6.9 9.1 6 8 6ZM2 6C0.9 6 0 6.9 0 8C0 9.1 0.9 10 2 10C3.1 10 4 9.1 4 8C4 6.9 3.1 6 2 6ZM8 12C6.9 12 6 12.9 6 14C6 15.1 6.9 16 8 16C9.1 16 10 15.1 10 14C10 12.9 9.1 12 8 12ZM2 12C0.9 12 0 12.9 0 14C0 15.1 0.9 16 2 16C3.1 16 4 15.1 4 14C4 12.9 3.1 12 2 12Z" }, null, -1), $n = [
+  Tn
 ], Bn = /* @__PURE__ */ p("path", { d: "M10 5L5 0L0 5H4V9H6V5H10Z" }, null, -1), Ln = /* @__PURE__ */ p("path", { d: "M6 19V15H4V19H0L5 24L10 19H6Z" }, null, -1), Dn = [
   Bn,
   Ln
@@ -2086,7 +2090,7 @@ const rn = /* @__PURE__ */ C({
           );
         })
       }, [
-        p("div", Tn, [
+        p("div", Rn, [
           p("div", {
             class: l(n.cssClasses.itemGhostNode)
           }, null, 2),
@@ -2153,7 +2157,7 @@ const rn = /* @__PURE__ */ C({
               locString: e.question.locMinRateDescription
             }, null, 8, ["locString"])
           ], 2)) : m("", !0),
-          (t(!0), u(w, null, R(e.question.renderedRateItems, (d, c) => (t(), q(N(e.question.itemComponentName), {
+          (t(!0), u(w, null, T(e.question.renderedRateItems, (d, c) => (t(), q(N(e.question.itemComponentName), {
             key: s(c),
             item: d,
             index: c,
@@ -2343,7 +2347,7 @@ const zn = /* @__PURE__ */ C({
         p("label", {
           class: l(i.question.getItemCss())
         }, [
-          D(p("input", {
+          L(p("input", {
             type: "checkbox",
             name: i.question.name,
             value: (c = i.question.booleanValue) != null ? c : "",
@@ -2410,7 +2414,7 @@ G.Instance.registerRenderer(
   "radio",
   "sv-boolean-radio"
 );
-const jn = /* @__PURE__ */ C({
+const _n = /* @__PURE__ */ C({
   __name: "BooleanRadio",
   props: {
     question: {}
@@ -2444,7 +2448,7 @@ const jn = /* @__PURE__ */ C({
       ], 2);
     };
   }
-}), Qn = ["name", "value", "checked", "aria-describedby", "disabled"], _n = ["xlink:href"], Zn = /* @__PURE__ */ C({
+}), jn = ["name", "value", "checked", "aria-describedby", "disabled"], Qn = ["xlink:href"], Zn = /* @__PURE__ */ C({
   __name: "BooleanRadioItem",
   props: {
     question: {},
@@ -2474,7 +2478,7 @@ const jn = /* @__PURE__ */ C({
             disabled: s.question.isInputReadOnly,
             class: l(s.question.cssClasses.itemRadioControl),
             onChange: n
-          }, null, 42, Qn),
+          }, null, 42, jn),
           s.question.cssClasses.materialRadioDecorator ? (t(), u("span", {
             key: 0,
             class: l(s.question.cssClasses.materialRadioDecorator)
@@ -2485,7 +2489,7 @@ const jn = /* @__PURE__ */ C({
             }, [
               p("use", {
                 "xlink:href": s.question.itemSvgIcon
-              }, null, 8, _n)
+              }, null, 8, Qn)
             ], 2)) : m("", !0)
           ], 2)) : m("", !0),
           p("span", {
@@ -2525,7 +2529,7 @@ const xn = /* @__PURE__ */ C({
           p("label", {
             class: l(s.question.cssClasses.checkboxLabel)
           }, [
-            D(p("input", {
+            L(p("input", {
               type: "checkbox",
               name: s.question.name,
               value: (c = s.question.booleanValue) != null ? c : "",
@@ -2593,19 +2597,19 @@ const xn = /* @__PURE__ */ C({
     return M(o, n), (s, e) => {
       const i = v("survey-multipletext-item");
       return t(), u("table", {
-        class: l(s.question.cssClasses.root),
+        class: l(s.question.getQuestionRootCss()),
         ref_key: "root",
         ref: n
       }, [
         p("tbody", null, [
-          (t(!0), u(w, null, R(s.question.getRows(), (a, d) => (t(), u(w, {
+          (t(!0), u(w, null, T(s.question.getRows(), (a, d) => (t(), u(w, {
             key: s.question.inputId + "rowkey" + d
           }, [
             a.isVisible ? (t(), u("tr", {
               key: 0,
               class: l(s.question.cssClasses.row)
             }, [
-              (t(!0), u(w, null, R(a.cells, (c) => (t(), u("td", {
+              (t(!0), u(w, null, T(a.cells, (c) => (t(), u("td", {
                 key: "item" + c.item.editor.id,
                 class: l(c.className)
               }, [
@@ -2629,7 +2633,7 @@ const xn = /* @__PURE__ */ C({
   setup(r) {
     const o = r, n = (e) => ee(e);
     B(() => o.cell.item.editor);
-    const s = T(() => o.cell.item);
+    const s = R(() => o.cell.item);
     return (e, i) => {
       const a = v("survey-string"), d = v("survey-errors");
       return e.cell.isErrorsCell ? (t(), q(d, {
@@ -2708,7 +2712,7 @@ const xn = /* @__PURE__ */ C({
             i.question.showHeader ? (t(), u("thead", to, [
               p("tr", null, [
                 i.question.hasRows ? (t(), u("td", io)) : m("", !0),
-                (t(!0), u(w, null, R(i.question.visibleColumns, (c, y) => (t(), u("th", {
+                (t(!0), u(w, null, T(i.question.visibleColumns, (c, y) => (t(), u("th", {
                   key: y,
                   class: l(i.question.cssClasses.headerCell),
                   style: $({
@@ -2723,11 +2727,11 @@ const xn = /* @__PURE__ */ C({
               ])
             ])) : m("", !0),
             p("tbody", null, [
-              (t(!0), u(w, null, R(s.value, (c, y) => (t(), u("tr", {
+              (t(!0), u(w, null, T(s.value, (c, y) => (t(), u("tr", {
                 key: "row_" + c.name + "_" + y,
                 class: l(c.rowClasses || void 0)
               }, [
-                D(p("td", {
+                L(p("td", {
                   class: l(i.question.cssClasses.rowTextCell),
                   style: $({
                     minWidth: i.question.rowTitleWidth,
@@ -2740,7 +2744,7 @@ const xn = /* @__PURE__ */ C({
                 ], 6), [
                   [H, i.question.hasRows]
                 ]),
-                i.question.hasCellText ? (t(!0), u(w, { key: 0 }, R(i.question.visibleColumns, (h, g) => (t(), u("td", {
+                i.question.hasCellText ? (t(!0), u(w, { key: 0 }, T(i.question.visibleColumns, (h, g) => (t(), u("td", {
                   key: g,
                   class: l(i.question.getItemClass(c, h)),
                   onClick: (k) => e(c, h)
@@ -2749,7 +2753,7 @@ const xn = /* @__PURE__ */ C({
                     locString: i.question.getCellDisplayLocText(c.name, h)
                   }, null, 8, ["locString"])
                 ], 10, lo))), 128)) : m("", !0),
-                i.question.hasCellText ? m("", !0) : (t(!0), u(w, { key: 1 }, R(i.question.visibleColumns, (h, g) => (t(), u("td", {
+                i.question.hasCellText ? m("", !0) : (t(!0), u(w, { key: 1 }, T(i.question.visibleColumns, (h, g) => (t(), u("td", {
                   key: g,
                   "data-responsive-title": h.locText.renderedHtml,
                   class: l(i.question.cssClasses.cell),
@@ -2759,7 +2763,7 @@ const xn = /* @__PURE__ */ C({
                     onMousedown: a[0] || (a[0] = (k) => i.question.onMouseDown()),
                     class: l(i.question.getItemClass(c, h))
                   }, [
-                    D(p("input", {
+                    L(p("input", {
                       type: "radio",
                       class: l(i.question.cssClasses.itemValue),
                       name: c.fullName,
@@ -2786,7 +2790,7 @@ const xn = /* @__PURE__ */ C({
                         }, null, 8, uo)
                       ], 2)) : m("", !0)
                     ], 2),
-                    D(p("span", {
+                    L(p("span", {
                       class: l(i.question.cssClasses.cellResponsiveTitle)
                     }, [
                       b(d, {
@@ -2826,7 +2830,7 @@ const xn = /* @__PURE__ */ C({
     question: {}
   },
   setup(r) {
-    const o = r, n = T(() => o.question.renderedTable);
+    const o = r, n = R(() => o.question.renderedTable);
     return B(
       () => n.value,
       (s) => {
@@ -2851,7 +2855,7 @@ const xn = /* @__PURE__ */ C({
         }, [
           n.value.showHeader ? (t(), u("thead", po, [
             p("tr", null, [
-              (t(!0), u(w, null, R(n.value.headerRow.cells, (c) => (t(), u(w, null, [
+              (t(!0), u(w, null, T(n.value.headerRow.cells, (c) => (t(), u(w, null, [
                 c.hasTitle ? (t(), u("th", {
                   class: l(c.className),
                   key: "header_" + c.id,
@@ -2875,7 +2879,7 @@ const xn = /* @__PURE__ */ C({
             ])
           ])) : m("", !0),
           p("tbody", null, [
-            (t(!0), u(w, null, R(n.value.rows, (c) => (t(), u(w, {
+            (t(!0), u(w, null, T(n.value.rows, (c) => (t(), u(w, {
               key: s.question.inputId + "_" + c.id
             }, [
               c.visible ? (t(), u("tr", {
@@ -2883,7 +2887,7 @@ const xn = /* @__PURE__ */ C({
                 "data-sv-drop-target-matrix-row": c.row && c.row.id,
                 class: l(c.className)
               }, [
-                (t(!0), u(w, null, R(c.cells, (y, h) => (t(), q(d, {
+                (t(!0), u(w, null, T(c.cells, (y, h) => (t(), q(d, {
                   cell: y,
                   question: s.question,
                   key: c.id + "_" + h
@@ -2893,7 +2897,7 @@ const xn = /* @__PURE__ */ C({
           ]),
           n.value.showFooter ? (t(), u("tfoot", qo, [
             p("tr", null, [
-              (t(!0), u(w, null, R(n.value.footerRow.cells, (c, y) => (t(), q(d, {
+              (t(!0), u(w, null, T(n.value.footerRow.cells, (c, y) => (t(), q(d, {
                 cell: c,
                 question: s.question,
                 key: "footer_" + y
@@ -2943,7 +2947,7 @@ const xn = /* @__PURE__ */ C({
         o.question.survey.matrixAfterCellRender(o.question, y);
       }
     }), (y, h) => {
-      const g = v("survey-errors"), k = v("sv-matrix-drag-drop-icon"), P = v("sv-action-bar"), L = v("survey-radiogroup-item"), E = v("survey-checkbox-item"), j = v("survey-other-choice"), X = v("survey-string");
+      const g = v("survey-errors"), k = v("sv-matrix-drag-drop-icon"), P = v("sv-action-bar"), D = v("survey-radiogroup-item"), E = v("survey-checkbox-item"), _ = v("survey-other-choice"), X = v("survey-string");
       return t(), u("td", {
         class: l(y.cell.className),
         "data-responsive-title": e(),
@@ -2976,19 +2980,19 @@ const xn = /* @__PURE__ */ C({
           key: 4,
           class: l(y.question.cssClasses.cellQuestionWrapper)
         }, [
-          !y.cell.isChoice && y.cell.question.isDefaultRendering() ? D((t(), q(N(c(y.cell.question)), {
+          !y.cell.isChoice && y.cell.question.isDefaultRendering() ? L((t(), q(N(c(y.cell.question)), {
             key: 0,
             question: y.cell.question
           }, null, 8, ["question"])), [
             [H, n.value]
           ]) : m("", !0),
-          !y.cell.isChoice && !y.cell.question.isDefaultRendering() ? D((t(), q(N(y.cell.question.getComponentName()), {
+          !y.cell.isChoice && !y.cell.question.isDefaultRendering() ? L((t(), q(N(y.cell.question.getComponentName()), {
             key: 1,
             question: y.cell.question
           }, null, 8, ["question"])), [
             [H, n.value]
           ]) : m("", !0),
-          y.cell.isRadio ? (t(), q(L, {
+          y.cell.isRadio ? (t(), q(D, {
             key: y.cell.item.value,
             class: l(y.cell.question.getItemClass(y.cell.item)),
             question: y.cell.question,
@@ -3004,7 +3008,7 @@ const xn = /* @__PURE__ */ C({
             index: a(),
             hideLabel: !0
           }, null, 8, ["class", "question", "item", "index"])) : m("", !0),
-          y.cell.isOtherChoice ? (t(), q(j, {
+          y.cell.isOtherChoice ? (t(), q(_, {
             key: 4,
             question: y.cell.question
           }, null, 8, ["question"])) : m("", !0)
@@ -3105,8 +3109,8 @@ const xn = /* @__PURE__ */ C({
 });
 function se(r, o = !0) {
   return {
-    question: T(() => r.item.data.question),
-    row: o ? T(() => r.item.data.row) : void 0
+    question: R(() => r.item.data.question),
+    row: o ? R(() => r.item.data.row) : void 0
   };
 }
 const fo = ["disabled"], Io = /* @__PURE__ */ C({
@@ -3152,7 +3156,7 @@ const fo = ["disabled"], Io = /* @__PURE__ */ C({
       class: l(f(n).cssClasses.iconDrag)
     }, null, 2));
   }
-}), To = ["aria-expanded", "aria-controls"], Ro = /* @__PURE__ */ C({
+}), Ro = ["aria-expanded", "aria-controls"], To = /* @__PURE__ */ C({
   __name: "DetailButton",
   props: {
     item: {}
@@ -3173,7 +3177,7 @@ const fo = ["disabled"], Io = /* @__PURE__ */ C({
           iconName: f(n).getDetailPanelIconId(f(s)),
           size: "auto"
         }, null, 8, ["class", "iconName"])
-      ], 10, To);
+      ], 10, Ro);
     };
   }
 }), $o = /* @__PURE__ */ C({
@@ -3206,7 +3210,7 @@ const fo = ["disabled"], Io = /* @__PURE__ */ C({
         };
       }
     );
-    const e = T(() => {
+    const e = R(() => {
       if (o.question.isRenderModeList)
         return o.question.panels;
       const a = [];
@@ -3246,24 +3250,24 @@ const fo = ["disabled"], Io = /* @__PURE__ */ C({
           key: 2,
           question: a.question
         }, null, 8, ["question"])) : m("", !0),
-        (t(!0), u(w, null, R(e.value, (L, E) => (t(), u(w, {
-          key: L.id
+        (t(!0), u(w, null, T(e.value, (D, E) => (t(), u(w, {
+          key: D.id
         }, [
           p("div", {
             class: l(a.question.getPanelWrapperCss())
           }, [
             b(g, {
-              question: L,
+              question: D,
               css: a.css
             }, null, 8, ["question", "css"]),
-            a.question.panelRemoveButtonLocation === "right" && a.question.canRemovePanel && L.state !== "collapsed" ? (t(), q(k, {
+            a.question.panelRemoveButtonLocation === "right" && a.question.canRemovePanel && D.state !== "collapsed" ? (t(), q(k, {
               key: 0,
-              data: { question: a.question, panel: L }
+              data: { question: a.question, panel: D }
             }, null, 8, ["data"])) : m("", !0)
           ], 2),
           a.question.isRenderModeList && E < a.question.visiblePanelCount - 1 ? (t(), u("hr", {
             class: l(a.question.cssClasses.separator),
-            key: "separator" + L.id
+            key: "separator" + D.id
           }, null, 2)) : m("", !0)
         ], 64))), 128)),
         i() && a.question.isProgressBottomShowing ? (t(), q(h, {
@@ -3365,7 +3369,7 @@ const fo = ["disabled"], Io = /* @__PURE__ */ C({
   }
 });
 function K(r) {
-  return T(
+  return R(
     () => r.item && r.item.data.question || r.data.question
   );
 }
@@ -3445,7 +3449,7 @@ const Do = /* @__PURE__ */ C({
     data: {}
   },
   setup(r) {
-    const o = r, n = K(o), s = T(
+    const o = r, n = K(o), s = R(
       () => o.item && o.item.data.panel || o.data.panel
     ), e = (i) => {
       n.value.isInputReadOnly || n.value.removePanelUI(i);
@@ -3494,7 +3498,7 @@ const Do = /* @__PURE__ */ C({
         ref_key: "root",
         ref: o
       }, [
-        (t(!0), u(w, null, R(n.element.errors, (i, a) => (t(), u("div", {
+        (t(!0), u(w, null, T(n.element.errors, (i, a) => (t(), u("div", {
           key: "error_" + a
         }, [
           p("span", {
@@ -3532,8 +3536,8 @@ const Do = /* @__PURE__ */ C({
       value: o.question.comment,
       maxlength: o.question.getOthersMaxLength(),
       placeholder: o.question.renderedCommentPlaceholder,
-      "aria-label": o.question.ariaLabel,
-      "aria-required": o.question.ariaRequired,
+      "aria-label": o.question.ariaLabel || o.question.a11y_input_ariaLabel,
+      "aria-required": o.question.ariaRequired || o.question.a11y_input_ariaRequired,
       style: $({ resize: o.question.resizeStyle }),
       onChange: n[0] || (n[0] = (s) => {
         o.question.onCommentChange(s);
@@ -3583,7 +3587,7 @@ const Do = /* @__PURE__ */ C({
       }, 40, ["class", "aria-label", "id", "tabindex", "aria-expanded", "role"])) : m("", !0);
     };
   }
-}), Ko = { class: "sv-vue-title-additional-div" }, jo = { key: 3 }, Qo = { key: 5 }, _o = { key: 7 }, Zo = /* @__PURE__ */ C({
+}), Ko = { class: "sv-vue-title-additional-div" }, _o = { key: 3 }, jo = { key: 5 }, Qo = { key: 7 }, Zo = /* @__PURE__ */ C({
   __name: "TitleContent",
   props: {
     element: {},
@@ -3608,18 +3612,18 @@ const Do = /* @__PURE__ */ C({
           class: l(o.element.cssTitleNumber),
           "aria-hidden": !0
         }, I(o.element.no), 3)) : m("", !0),
-        !o.element.isTitleRenderedAsString && o.element.no ? (t(), u("span", jo, "\xA0")) : m("", !0),
+        !o.element.isTitleRenderedAsString && o.element.no ? (t(), u("span", _o, "\xA0")) : m("", !0),
         !o.element.isTitleRenderedAsString && o.element.isRequireTextBeforeTitle ? (t(), u("span", {
           key: 4,
           class: l(o.element.cssClasses.requiredText),
           "aria-hidden": !0
         }, I(o.element.requiredText), 3)) : m("", !0),
-        !o.element.isTitleRenderedAsString && o.element.isRequireTextBeforeTitle ? (t(), u("span", Qo, "\xA0")) : m("", !0),
+        !o.element.isTitleRenderedAsString && o.element.isRequireTextBeforeTitle ? (t(), u("span", jo, "\xA0")) : m("", !0),
         o.element.isTitleRenderedAsString ? m("", !0) : (t(), q(s, {
           key: 6,
           locString: o.element.locTitle
         }, null, 8, ["locString"])),
-        !o.element.isTitleRenderedAsString && o.element.isRequireTextAfterTitle ? (t(), u("span", _o, "\xA0")) : m("", !0),
+        !o.element.isTitleRenderedAsString && o.element.isRequireTextAfterTitle ? (t(), u("span", Qo, "\xA0")) : m("", !0),
         !o.element.isTitleRenderedAsString && o.element.isRequireTextAfterTitle ? (t(), u("span", {
           key: 8,
           class: l(o.element.cssClasses.requiredText),
@@ -3635,7 +3639,7 @@ const Do = /* @__PURE__ */ C({
     css: {}
   },
   setup(r) {
-    const o = r, n = T(() => o.element.getTitleToolbar());
+    const o = r, n = R(() => o.element.getTitleToolbar());
     return (s, e) => {
       const i = v("survey-string"), a = v("survey-element-title-content"), d = v("sv-action-bar");
       return t(), u("div", Go, [
@@ -3678,7 +3682,7 @@ const ot = /* @__PURE__ */ me(Yo, [["render", nt]]), tt = ["aria-label"], it = /
   },
   setup(r) {
     const o = r, n = S(), s = () => {
-      Te(
+      Re(
         o.size,
         o.width,
         o.height,
@@ -3723,7 +3727,7 @@ const ot = /* @__PURE__ */ me(Yo, [["render", nt]]), tt = ["aria-label"], it = /
           a.stopPropagation();
         })
       }, [
-        (t(!0), u(w, null, R(s.model.renderedActions, (a) => (t(), q(i, {
+        (t(!0), u(w, null, T(s.model.renderedActions, (a) => (t(), q(i, {
           key: a.id,
           item: a
         }, null, 8, ["item"]))), 128))
@@ -3736,7 +3740,7 @@ const ot = /* @__PURE__ */ me(Yo, [["render", nt]]), tt = ["aria-label"], it = /
     item: {}
   },
   setup(r) {
-    const o = r, n = T(
+    const o = r, n = R(
       () => o.item.component || "sv-action-bar-item"
     );
     return B(() => o.item), (s, e) => {
@@ -3802,7 +3806,7 @@ const ot = /* @__PURE__ */ me(Yo, [["render", nt]]), tt = ["aria-label"], it = /
     return B(
       () => o.item,
       (e) => {
-        s = new Re(e);
+        s = new Te(e);
       },
       () => {
         s.dispose();
@@ -3849,7 +3853,7 @@ const ot = /* @__PURE__ */ me(Yo, [["render", nt]]), tt = ["aria-label"], it = /
     item: {}
   },
   setup(r) {
-    const o = r, n = T(() => o.item && o.item.innerCss);
+    const o = r, n = R(() => o.item && o.item.innerCss);
     return (s, e) => (t(), u("div", {
       class: l(["sv-action-bar-separator", n.value])
     }, null, 2));
@@ -3912,7 +3916,7 @@ const ot = /* @__PURE__ */ me(Yo, [["render", nt]]), tt = ["aria-label"], it = /
             })
           ], 2)) : m("", !0)
         ], 2)) : m("", !0),
-        D(p("div", {
+        L(p("div", {
           class: l(a.model.cssClasses.emptyContainer)
         }, [
           p("div", {
@@ -3922,7 +3926,7 @@ const ot = /* @__PURE__ */ me(Yo, [["render", nt]]), tt = ["aria-label"], it = /
         ], 2), [
           [H, a.model.isEmpty]
         ]),
-        a.model.renderElements ? D((t(), u("ul", {
+        a.model.renderElements ? L((t(), u("ul", {
           key: 1,
           class: l(a.model.getListClass()),
           role: "listbox",
@@ -3935,7 +3939,7 @@ const ot = /* @__PURE__ */ me(Yo, [["render", nt]]), tt = ["aria-label"], it = /
             a.model.onKeyDown(h);
           })
         }, [
-          (t(!0), u(w, null, R(a.model.renderedActions, (h) => (t(), q(y, {
+          (t(!0), u(w, null, T(a.model.renderedActions, (h) => (t(), q(y, {
             item: h,
             model: a.model,
             key: h.id
@@ -3953,7 +3957,7 @@ const ot = /* @__PURE__ */ me(Yo, [["render", nt]]), tt = ["aria-label"], it = /
     item: {}
   },
   setup(r) {
-    const o = r, n = T(() => o.item.elementId), s = (e) => {
+    const o = r, n = R(() => o.item.elementId), s = (e) => {
       o.model.onItemClick(o.item), e.stopPropagation();
     };
     return B(() => o.item), A(() => {
@@ -3962,7 +3966,7 @@ const ot = /* @__PURE__ */ me(Yo, [["render", nt]]), tt = ["aria-label"], it = /
       });
     }), (e, i) => {
       const a = v("sv-svg-icon"), d = v("survey-string"), c = Y("key2click");
-      return D((t(), u("li", {
+      return L((t(), u("li", {
         tabindex: "0",
         role: "option",
         "aria-selected": e.model.isItemSelected(e.item),
@@ -4010,7 +4014,7 @@ const ot = /* @__PURE__ */ me(Yo, [["render", nt]]), tt = ["aria-label"], it = /
     const o = r, n = F(
       te(o.model, void 0)
     ), s = S(null);
-    return _(
+    return Q(
       () => o.model,
       (e) => {
         n.value.dispose(), n.value = te(e, void 0);
@@ -4034,10 +4038,10 @@ const ot = /* @__PURE__ */ me(Yo, [["render", nt]]), tt = ["aria-label"], it = /
       ], 512);
     };
   }
-}), wt = { class: "sv-popup__shadow" }, St = { class: "sv-popup__body-content" }, Tt = {
+}), wt = { class: "sv-popup__shadow" }, St = { class: "sv-popup__body-content" }, Rt = {
   key: 0,
   class: "sv-popup__body-header"
-}, Rt = { class: "sv-popup__scrolling-content" }, $t = { class: "sv-popup__content" }, Bt = {
+}, Tt = { class: "sv-popup__scrolling-content" }, $t = { class: "sv-popup__content" }, Bt = {
   key: 1,
   class: "sv-popup__body-footer"
 }, Lt = /* @__PURE__ */ C({
@@ -4056,7 +4060,7 @@ const ot = /* @__PURE__ */ me(Yo, [["render", nt]]), tt = ["aria-label"], it = /
       !n && e.isVisible && o.model.updateOnShowing(), n = e.isVisible;
     }), (e, i) => {
       const a = v("sv-action-bar");
-      return D((t(), u("div", {
+      return L((t(), u("div", {
         tabindex: "-1",
         class: l(["sv-popup", e.model.styleClass]),
         onKeydown: i[0] || (i[0] = (d) => {
@@ -4083,8 +4087,8 @@ const ot = /* @__PURE__ */ me(Yo, [["render", nt]]), tt = ["aria-label"], it = /
               model: e.model
             }, null, 8, ["model"])) : m("", !0),
             p("div", St, [
-              e.model.title ? (t(), u("div", Tt, I(e.model.title), 1)) : m("", !0),
-              p("div", Rt, [
+              e.model.title ? (t(), u("div", Rt, I(e.model.title), 1)) : m("", !0),
+              p("div", Tt, [
                 p("div", $t, [
                   (t(), q(N(e.model.contentComponentName), Ce(he(e.model.contentComponentData)), null, 16))
                 ])
@@ -4127,23 +4131,23 @@ const ot = /* @__PURE__ */ me(Yo, [["render", nt]]), tt = ["aria-label"], it = /
     needRenderWrapper: {}
   },
   setup(r) {
-    const o = r, n = T(
+    const o = r, n = R(
       () => o.survey.getContainerContent(o.container)
     );
     return (s, e) => n.value.length > 0 ? (t(), u(w, { key: 0 }, [
       s.needRenderWrapper ? (t(), u("div", Pt, [
-        (t(!0), u(w, null, R(n.value, (i, a) => (t(), q(N(i.component), {
+        (t(!0), u(w, null, T(n.value, (i, a) => (t(), q(N(i.component), {
           survey: s.survey,
           container: s.container,
           model: i.data
         }, null, 8, ["survey", "container", "model"]))), 256))
-      ])) : (t(!0), u(w, { key: 1 }, R(n.value, (i, a) => (t(), q(N(i.component), {
+      ])) : (t(!0), u(w, { key: 1 }, T(n.value, (i, a) => (t(), q(N(i.component), {
         survey: s.survey,
         model: i.data
       }, null, 8, ["survey", "model"]))), 256))
     ], 64)) : m("", !0);
   }
-}), Q = /* @__PURE__ */ C({
+}), j = /* @__PURE__ */ C({
   __name: "Progress",
   props: {
     survey: {},
@@ -4151,7 +4155,7 @@ const ot = /* @__PURE__ */ me(Yo, [["render", nt]]), tt = ["aria-label"], it = /
     css: {}
   },
   setup(r) {
-    const o = r, n = T(() => o.survey.progressValue + "%"), s = (i) => ie.getProgressTextInBarCss(i), e = (i) => ie.getProgressTextUnderBarCss(i);
+    const o = r, n = R(() => o.survey.progressValue + "%"), s = (i) => ie.getProgressTextInBarCss(i), e = (i) => ie.getProgressTextUnderBarCss(i);
     return (i, a) => (t(), u("div", {
       class: l(i.survey.getProgressCssClasses(i.container))
     }, [
@@ -4177,7 +4181,7 @@ const ot = /* @__PURE__ */ me(Yo, [["render", nt]]), tt = ["aria-label"], it = /
     survey: {}
   },
   setup(r) {
-    const o = r, n = new Be(o.survey), s = S(!1), e = S(), i = T(() => o.survey.css);
+    const o = r, n = new Be(o.survey), s = S(!1), e = S(), i = R(() => o.survey.css);
     let a;
     const d = (k) => n.isListElementClickable(k), c = (k) => n.getListElementCss(k), y = (k) => {
       n.clickListElement(k);
@@ -4200,7 +4204,7 @@ const ot = /* @__PURE__ */ me(Yo, [["render", nt]]), tt = ["aria-label"], it = /
       }, [
         p("div", {
           class: l(h(s.value, !0)),
-          onClick: P[0] || (P[0] = (L) => g(!0)),
+          onClick: P[0] || (P[0] = (D) => g(!0)),
           role: "button"
         }, null, 2),
         p("div", {
@@ -4211,25 +4215,25 @@ const ot = /* @__PURE__ */ me(Yo, [["render", nt]]), tt = ["aria-label"], it = /
           p("ul", {
             class: l(i.value.progressButtonsList)
           }, [
-            (t(!0), u(w, null, R(k.survey.visiblePages, (L, E) => (t(), u("li", {
+            (t(!0), u(w, null, T(k.survey.visiblePages, (D, E) => (t(), u("li", {
               key: "listelement" + E,
               class: l(c(E)),
-              onClick: (j) => d(E) ? y(E) : null
+              onClick: (_) => d(E) ? y(E) : null
             }, [
               p("div", {
                 class: l(i.value.progressButtonsPageTitle),
-                title: L.locNavigationTitle.renderedHtml || L.name
-              }, I(L.locNavigationTitle.renderedHtml || L.name), 11, Ht),
+                title: D.renderedNavigationTitle
+              }, I(D.renderedNavigationTitle), 11, Ht),
               p("div", {
                 class: l(i.value.progressButtonsPageDescription),
-                title: L.locNavigationDescription.renderedHtml
-              }, I(L.locNavigationDescription.renderedHtml), 11, At)
+                title: D.locNavigationDescription.renderedHtml
+              }, I(D.locNavigationDescription.renderedHtml), 11, At)
             ], 10, Nt))), 128))
           ], 2)
         ], 2),
         p("div", {
           class: l(h(s.value, !1)),
-          onClick: P[1] || (P[1] = (L) => g(!1)),
+          onClick: P[1] || (P[1] = (D) => g(!1)),
           role: "button"
         }, null, 2)
       ], 2)
@@ -4247,7 +4251,7 @@ const ot = /* @__PURE__ */ me(Yo, [["render", nt]]), tt = ["aria-label"], it = /
       return t(), u("div", {
         class: l(f(n).containerCss)
       }, [
-        f(n).isMobile ? D((t(), u("div", {
+        f(n).isMobile ? L((t(), u("div", {
           key: 0,
           onClick: e[0] || (e[0] = (...y) => f(n).togglePopup && f(n).togglePopup(...y))
         }, [
@@ -4270,42 +4274,42 @@ const ot = /* @__PURE__ */ me(Yo, [["render", nt]]), tt = ["aria-label"], it = /
 }), Ot = { onsubmit: "return false;" }, Ft = {
   key: 0,
   class: "sv_custom_header"
-}, Wt = ["id"], zt = { key: 1 }, Ut = ["innerHTML"], Kt = ["innerHTML"], jt = ["innerHTML"], re = /* @__PURE__ */ C({
+}, Wt = ["id"], zt = { key: 1 }, Ut = ["innerHTML"], Kt = ["innerHTML"], _t = ["innerHTML"], re = /* @__PURE__ */ C({
   __name: "Survey",
   props: {
     model: {},
     survey: {}
   },
   setup(r) {
-    const o = r, n = S(), s = S(""), e = S(1), i = T(() => {
+    const o = r, n = S(), s = S(""), e = S(1), i = R(() => {
       const k = o.survey ? o.survey : o.model;
       return be(k);
-    }), a = T(() => i.value.activePage ? i.value.activePage.id : ""), d = () => {
+    }), a = R(() => i.value.activePage ? i.value.activePage.id : ""), d = () => {
       const k = a.value;
       return !!i.value && k + e.value.toString();
-    }, c = T(
+    }, c = R(
       () => i.value.showCompletedPage && i.value.state === "completed"
-    ), y = T(() => i.value.css), h = T(() => "page" + d()), g = () => c.value ? (s.value || (s.value = i.value.processedCompletedHtml), s.value) : "";
+    ), y = R(() => i.value.css), h = R(() => "page" + d()), g = () => c.value ? (s.value || (s.value = i.value.processedCompletedHtml), s.value) : "";
     return B(() => i.value), A(() => {
       if (!!i.value) {
         i.value.needRenderIcons && De.renderIcons();
         var k = n.value;
         k && i.value.afterRenderSurvey(k), i.value.renderCallback = () => {
-          var P, L;
-          e.value++, (L = (P = x()) == null ? void 0 : P.proxy) == null || L.$forceUpdate();
+          var P, D;
+          e.value++, (D = (P = x()) == null ? void 0 : P.proxy) == null || D.$forceUpdate();
         }, i.value.startTimerFromUI();
       }
     }), V(() => {
       i.value.stopTimer(), i.value.renderCallback = void 0;
     }), (k, P) => {
-      const L = v("survey-popup-modal"), E = v("survey-header"), j = v("survey-page"), X = v("sv-brand-info"), ne = v("sv-notifier");
+      const D = v("survey-popup-modal"), E = v("survey-header"), _ = v("survey-page"), X = v("sv-brand-info"), ne = v("sv-notifier");
       return t(), u("div", {
         class: l(i.value.getRootCss()),
         style: $(i.value.themeVariables),
         ref_key: "root",
         ref: n
       }, [
-        b(L),
+        b(D),
         i.value.renderBackgroundImage ? (t(), u("div", {
           key: 0,
           class: l(y.value.rootBackgroundImage),
@@ -4341,7 +4345,7 @@ const ot = /* @__PURE__ */ me(Yo, [["render", nt]]), tt = ["aria-label"], it = /
                   container: "contentTop",
                   needRenderWrapper: !0
                 }, null, 8, ["survey"])),
-                (t(), q(j, {
+                (t(), q(_, {
                   key: h.value,
                   survey: i.value,
                   page: i.value.activePage,
@@ -4379,7 +4383,7 @@ const ot = /* @__PURE__ */ me(Yo, [["render", nt]]), tt = ["aria-label"], it = /
               key: 3,
               class: l(i.value.loadingBodyCss),
               innerHTML: i.value.processedLoadingHtml
-            }, null, 10, jt)) : m("", !0),
+            }, null, 10, _t)) : m("", !0),
             i.value.state === "empty" ? (t(), u("div", {
               key: 4,
               class: l(y.value.bodyEmpty)
@@ -4393,7 +4397,7 @@ const ot = /* @__PURE__ */ me(Yo, [["render", nt]]), tt = ["aria-label"], it = /
       ], 6);
     };
   }
-}), Qt = /* @__PURE__ */ C({
+}), jt = /* @__PURE__ */ C({
   __name: "Notifier",
   props: {
     model: {}
@@ -4402,7 +4406,7 @@ const ot = /* @__PURE__ */ me(Yo, [["render", nt]]), tt = ["aria-label"], it = /
     const o = r;
     return B(() => o.model), (n, s) => {
       const e = v("sv-action-bar");
-      return D((t(), u("div", {
+      return L((t(), u("div", {
         class: l(n.model.css),
         style: $({ visibility: n.model.active ? "visible" : "hidden" }),
         role: "alert",
@@ -4417,7 +4421,7 @@ const ot = /* @__PURE__ */ me(Yo, [["render", nt]]), tt = ["aria-label"], it = /
       ]);
     };
   }
-}), _t = ["id", "readonly", "disabled", "value", "maxlength", "placeholder", "aria-label", "aria-required"], Zt = { key: 1 }, Gt = /* @__PURE__ */ C({
+}), Qt = ["id", "readonly", "disabled", "value", "maxlength", "placeholder", "aria-label", "aria-required"], Zt = { key: 1 }, Gt = /* @__PURE__ */ C({
   __name: "QuestionOther",
   props: {
     question: {},
@@ -4436,8 +4440,8 @@ const ot = /* @__PURE__ */ me(Yo, [["render", nt]]), tt = ["aria-label"], it = /
         value: o.question.otherValue,
         maxlength: o.question.getOthersMaxLength(),
         placeholder: o.question.otherPlaceholder,
-        "aria-label": o.question.ariaLabel,
-        "aria-required": o.question.ariaRequired,
+        "aria-label": o.question.ariaLabel || o.question.a11y_input_ariaLabel,
+        "aria-required": o.question.ariaRequired || o.question.a11y_input_ariaRequired,
         style: $({ resize: o.question.resizeStyle }),
         onChange: n[0] || (n[0] = (s) => {
           o.question.onOtherValueChange(s);
@@ -4445,7 +4449,7 @@ const ot = /* @__PURE__ */ me(Yo, [["render", nt]]), tt = ["aria-label"], it = /
         onInput: n[1] || (n[1] = (s) => {
           o.question.onOtherValueInput(s);
         })
-      }, null, 46, _t)),
+      }, null, 46, Qt)),
       o.question.isReadOnlyRenderDiv() ? (t(), u("div", Zt, I(o.question.otherValue), 1)) : m("", !0)
     ], 2));
   }
@@ -4475,10 +4479,10 @@ const ot = /* @__PURE__ */ me(Yo, [["render", nt]]), tt = ["aria-label"], it = /
     closeOnCompleteTimeout: {}
   },
   setup(r) {
-    const o = r, n = F(), s = T(() => o.survey ? o.survey.getCss() : {}), e = T(() => {
+    const o = r, n = F(), s = R(() => o.survey ? o.survey.getCss() : {}), e = R(() => {
       var g;
       return (g = n.value) != null && g.isExpanded ? s.value.window.header.buttonCollapsed : s.value.window.header.buttonExpanded;
-    }), i = T(() => {
+    }), i = R(() => {
       var g;
       return (g = n.value) == null ? void 0 : g.isExpanded;
     }), a = () => {
@@ -4489,7 +4493,7 @@ const ot = /* @__PURE__ */ me(Yo, [["render", nt]]), tt = ["aria-label"], it = /
       n.value.onScroll();
     };
     B(() => n.value);
-    const h = _(
+    const h = Q(
       () => o.survey,
       (g) => {
         const k = new Pe(null, g);
@@ -4502,7 +4506,7 @@ const ot = /* @__PURE__ */ me(Yo, [["render", nt]]), tt = ["aria-label"], it = /
     return V(() => {
       h();
     }), (g, k) => {
-      const P = v("survey-string"), L = v("sv-svg-icon");
+      const P = v("survey-string"), D = v("sv-svg-icon");
       return n.value.isShowing ? (t(), u("div", {
         key: 0,
         style: $([{ position: "fixed", bottom: "3px", right: "10px" }, {
@@ -4537,7 +4541,7 @@ const ot = /* @__PURE__ */ me(Yo, [["render", nt]]), tt = ["aria-label"], it = /
             onClick: d,
             style: { transform: "rotate(45deg)", float: "right", cursor: "pointer", "user-select": "none", width: "24px", height: "24px" }
           }, [
-            b(L, {
+            b(D, {
               iconName: "icon-expanddetail",
               size: 16
             })
@@ -4548,7 +4552,7 @@ const ot = /* @__PURE__ */ me(Yo, [["render", nt]]), tt = ["aria-label"], it = /
             onClick: a,
             style: { float: "right", cursor: "pointer", "user-select": "none", width: "24px", height: "24px" }
           }, [
-            b(L, {
+            b(D, {
               iconName: "icon-collapsedetail",
               size: 16
             })
@@ -4571,11 +4575,11 @@ const ot = /* @__PURE__ */ me(Yo, [["render", nt]]), tt = ["aria-label"], it = /
     css: {}
   },
   setup(r) {
-    const o = r, n = S(), s = T(
+    const o = r, n = S(), s = R(
       () => o.question.customWidget.isDefaultRender
-    ), e = T(
+    ), e = R(
       () => !!o.question.customWidget.htmlTemplate
-    ), i = T(() => o.question.customWidget.htmlTemplate), a = T(() => "survey-" + o.question.getTemplate());
+    ), i = R(() => o.question.customWidget.htmlTemplate), a = R(() => "survey-" + o.question.getTemplate());
     return A(() => {
       o.question.customWidget.afterRender(o.question, n.value);
     }), U(() => {
@@ -4658,7 +4662,7 @@ const ot = /* @__PURE__ */ me(Yo, [["render", nt]]), tt = ["aria-label"], it = /
   setup(r) {
     const o = r, n = S(null);
     M(o, n);
-    const s = T(() => o.question.contentPanel);
+    const s = R(() => o.question.contentPanel);
     return (e, i) => {
       const a = v("survey-panel");
       return t(), q(a, {
@@ -4678,7 +4682,7 @@ const ot = /* @__PURE__ */ me(Yo, [["render", nt]]), tt = ["aria-label"], it = /
   setup(r) {
     const o = r, n = S(null);
     M(o, n);
-    const s = T(() => o.question.contentQuestion), e = (i) => ee(i);
+    const s = R(() => o.question.contentQuestion), e = (i) => ee(i);
     return (i, a) => (t(), q(N(e(s.value)), {
       ref: n.value,
       question: s.value,
@@ -4694,7 +4698,7 @@ const ot = /* @__PURE__ */ me(Yo, [["render", nt]]), tt = ["aria-label"], it = /
     css: {}
   },
   setup(r) {
-    const o = r, n = T(() => ue * o.model.progress), s = T(() => o.model.text);
+    const o = r, n = R(() => ue * o.model.progress), s = R(() => o.model.text);
     return B(() => o.model), (e, i) => e.model.isRunning && e.model.showTimerAsClock ? (t(), u("div", {
       key: 0,
       class: l(e.model.rootCss)
@@ -4715,7 +4719,7 @@ const ot = /* @__PURE__ */ me(Yo, [["render", nt]]), tt = ["aria-label"], it = /
           class: l(e.model.minorTextCss)
         }, I(e.model.clockMinorText), 3)) : m("", !0)
       ], 2)
-    ], 2)) : D((t(), u("div", {
+    ], 2)) : L((t(), u("div", {
       key: 1,
       class: l(e.model.survey.getCss().timerRoot)
     }, I(s.value), 3)), [
@@ -4735,7 +4739,7 @@ function ui(r, o) {
 const di = /* @__PURE__ */ me(ri, [["render", ui]]);
 He.platform = "vue3";
 function mi(r) {
-  r.component("SurveyComponent", re), r.component("PopupSurveyComponent", ae), r.component("survey", re), r.component("popup-survey", ae), r.component("survey-header", ze), r.component("survey-page", Oe), r.component("survey-row", Ue), r.component("survey-element", je), r.component("survey-panel", Ze), r.component("survey-element-header", Ge), r.component("survey-string", Xe), r.component("sv-string-viewer", xe), r.component("sv-string-editor", ss), r.component("sv-skeleton", os), r.component("survey-text", ls), r.component("survey-text-input", ds), r.component("survey-checkbox", cs), r.component("survey-checkbox-item", Cs), r.component("survey-radiogroup", ks), r.component("survey-radiogroup-item", Ts), r.component("survey-signaturepad", Ls), r.component("survey-html", Ps), r.component("survey-image", As), r.component("survey-expression", Es), r.component("survey-file", js), r.component("survey-imagepicker", _s), r.component("survey-imagepicker-item", Ys), r.component("survey-comment", sn), r.component("survey-dropdown", nn), r.component("sv-dropdown-select", rn), r.component("sv-dropdown-option-item", un), r.component("sv-dropdown", vn), r.component("survey-tagbox", qn), r.component("sv-tagbox", Cn), r.component("sv-tagbox-item", In), r.component("sv-tagbox-filter", kn), r.component("survey-ranking", wn), r.component("survey-ranking-item", Pn), r.component("survey-rating", Hn), r.component("sv-rating-item", En), r.component("sv-rating-item-smiley", On), r.component("sv-rating-item-star", Wn), r.component("sv-rating-dropdown", zn), r.component("survey-boolean", Kn), r.component("sv-boolean-radio", jn), r.component("sv-boolean-radio-item", Zn), r.component("sv-boolean-checkbox", xn), r.component("survey-multipletext", eo), r.component("survey-multipletext-item", no), r.component("survey-matrix", mo), r.component("survey-matrixdropdown", co), r.component("survey-matrixtable", yo), r.component("survey-matrixheaderrequired", Co), r.component("survey-matrixcell", bo), r.component("survey-matrixdynamic", ko), r.component("sv-matrix-remove-button", Io), r.component("sv-matrix-drag-drop-icon", So), r.component("sv-matrix-detail-button", Ro), r.component("survey-paneldynamic", $o), r.component("survey-paneldynamicprogress", Bo), r.component("survey-paneldynamicprogress-v2", Lo), r.component("sv-paneldynamic-add-btn", Do), r.component("sv-paneldynamic-next-btn", Mo), r.component("sv-paneldynamic-prev-btn", Ho), r.component("sv-paneldynamic-remove-btn", Ao), r.component("sv-paneldynamic-progress-text", Eo), r.component("sv-components-container", Mt), r.component("sv-progress-buttons", Et), r.component("sv-progress-toc", Vt), r.component("sv-progress-pages", Q), r.component("sv-progress-questions", Q), r.component("sv-progress-correctquestions", Q), r.component("sv-progress-requiredquestions", Q), r.component("survey-errors", Oo), r.component("survey-question-comment", zo), r.component("survey-element-title", Uo), r.component("survey-element-title-content", Zo), r.component("sv-title-actions", Jo), r.component("sv-brand-info", ot), r.component("sv-svg-icon", rt), r.component("sv-action-bar", at), r.component("sv-action", mt), r.component("sv-action-bar-item", pt), r.component("sv-action-bar-item-dropdown", qt), r.component("sv-action-bar-separator", yt), r.component("sv-list", bt), r.component("sv-list-item", ft), r.component("sv-popup", It), r.component("sv-popup-container", Lt), r.component("popup-pointer", Dt), r.component("sv-notifier", Qt), r.component("survey-other-choice", Gt), r.component("sv-nav-btn", Jt), r.component("survey-customwidget", xt), r.component("survey-popup-modal", ei), r.component("sv-character-counter", si), r.component("survey-composite", ni), r.component("survey-custom", oi), r.component("sv-timerpanel", li), r.component("sv-loading-indicator", di), r.directive("key2click", {
+  r.component("SurveyComponent", re), r.component("PopupSurveyComponent", ae), r.component("survey", re), r.component("popup-survey", ae), r.component("survey-header", ze), r.component("survey-page", Oe), r.component("survey-row", Ue), r.component("survey-element", _e), r.component("survey-panel", Ze), r.component("survey-element-header", Ge), r.component("survey-string", Xe), r.component("sv-string-viewer", xe), r.component("sv-string-editor", ss), r.component("sv-skeleton", os), r.component("survey-text", ls), r.component("survey-text-input", ds), r.component("survey-checkbox", ps), r.component("survey-checkbox-item", Cs), r.component("survey-radiogroup", fs), r.component("survey-radiogroup-item", Rs), r.component("survey-signaturepad", Ls), r.component("survey-html", Ps), r.component("survey-image", As), r.component("survey-expression", Es), r.component("survey-file", _s), r.component("survey-imagepicker", Qs), r.component("survey-imagepicker-item", Ys), r.component("survey-comment", sn), r.component("survey-dropdown", nn), r.component("sv-dropdown-select", rn), r.component("sv-dropdown-option-item", un), r.component("sv-dropdown", vn), r.component("survey-tagbox", qn), r.component("sv-tagbox", Cn), r.component("sv-tagbox-item", In), r.component("sv-tagbox-filter", kn), r.component("survey-ranking", wn), r.component("survey-ranking-item", Pn), r.component("survey-rating", Hn), r.component("sv-rating-item", En), r.component("sv-rating-item-smiley", On), r.component("sv-rating-item-star", Wn), r.component("sv-rating-dropdown", zn), r.component("survey-boolean", Kn), r.component("sv-boolean-radio", _n), r.component("sv-boolean-radio-item", Zn), r.component("sv-boolean-checkbox", xn), r.component("survey-multipletext", eo), r.component("survey-multipletext-item", no), r.component("survey-matrix", mo), r.component("survey-matrixdropdown", co), r.component("survey-matrixtable", yo), r.component("survey-matrixheaderrequired", Co), r.component("survey-matrixcell", bo), r.component("survey-matrixdynamic", ko), r.component("sv-matrix-remove-button", Io), r.component("sv-matrix-drag-drop-icon", So), r.component("sv-matrix-detail-button", To), r.component("survey-paneldynamic", $o), r.component("survey-paneldynamicprogress", Bo), r.component("survey-paneldynamicprogress-v2", Lo), r.component("sv-paneldynamic-add-btn", Do), r.component("sv-paneldynamic-next-btn", Mo), r.component("sv-paneldynamic-prev-btn", Ho), r.component("sv-paneldynamic-remove-btn", Ao), r.component("sv-paneldynamic-progress-text", Eo), r.component("sv-components-container", Mt), r.component("sv-progress-buttons", Et), r.component("sv-progress-toc", Vt), r.component("sv-progress-pages", j), r.component("sv-progress-questions", j), r.component("sv-progress-correctquestions", j), r.component("sv-progress-requiredquestions", j), r.component("survey-errors", Oo), r.component("survey-question-comment", zo), r.component("survey-element-title", Uo), r.component("survey-element-title-content", Zo), r.component("sv-title-actions", Jo), r.component("sv-brand-info", ot), r.component("sv-svg-icon", rt), r.component("sv-action-bar", at), r.component("sv-action", mt), r.component("sv-action-bar-item", pt), r.component("sv-action-bar-item-dropdown", qt), r.component("sv-action-bar-separator", yt), r.component("sv-list", bt), r.component("sv-list-item", ft), r.component("sv-popup", It), r.component("sv-popup-container", Lt), r.component("popup-pointer", Dt), r.component("sv-notifier", jt), r.component("survey-other-choice", Gt), r.component("sv-nav-btn", Jt), r.component("survey-customwidget", xt), r.component("survey-popup-modal", ei), r.component("sv-character-counter", si), r.component("survey-composite", ni), r.component("survey-custom", oi), r.component("sv-timerpanel", li), r.component("sv-loading-indicator", di), r.directive("key2click", {
     mounted: function(o, n) {
       const s = { ...n.value };
       s.disableTabStop || (o.tabIndex = 0), o.addEventListener("keyup", (e) => (e.preventDefault(), e.stopPropagation(), de(e, s), !1)), o.addEventListener("keydown", (e) => {