@wikicasa-dev/components 2.2.9-alpha.9 → 2.3.1-alpha.0

package/dist/index.js

@@ -1,93 +1,104 @@
-import { default as u } from "./packages/components/lib/UIKit/Accordion/BaseAccordion.vue.js";
-import { default as i } from "./packages/components/lib/UIKit/Accordion/BaseAccordionBtn.vue.js";
-import { default as n } from "./packages/components/lib/UIKit/Accordion/BaseAccordionContent.vue.js";
-import { default as S } from "./packages/components/lib/UIKit/Accordion/BaseAccordionItem.vue.js";
-import './assets/BaseSnackbar.css';import './assets/BaseModal.css';import './assets/BaseDropDown.css';import './assets/BaseBadge.css';import './assets/ClearableAutocomplete.css';import './assets/BaseAutocomplete.css';import './assets/BaseAlert.css';import './assets/CheckboxBtn.css';import './assets/BaseAccordionItem.css';/* empty css                                                               */
-import { default as C } from "./packages/components/lib/UIKit/BaseSelect/SelectItem.vue.js";
-import { default as A } from "./packages/components/lib/UIKit/Checkbox/CheckboxBtn.vue.js";
+import { default as B } from "./packages/components/lib/UIKit/Accordion/BaseAccordion.vue.js";
+import { default as c } from "./packages/components/lib/UIKit/Accordion/BaseAccordionBtn.vue.js";
+import { default as S } from "./packages/components/lib/UIKit/Accordion/BaseAccordionContent.vue.js";
+import { default as g } from "./packages/components/lib/UIKit/Accordion/BaseAccordionItem.vue.js";
+import './assets/BaseSnackbar.css';import './assets/BaseModal.css';import './assets/BaseDropDown.css';import './assets/BaseCard.css';import './assets/BaseBadge.css';import './assets/ClearableAutocomplete.css';import './assets/BaseAutocomplete.css';import './assets/BaseAlert.css';import './assets/AccessibleSelect.css';import './assets/RadioButtonItem.css';import './assets/CheckboxBtn.css';import './assets/BaseAccordionItem.css';/* empty css                                                               */
+import { default as A } from "./packages/components/lib/UIKit/BaseSelect/SelectItem.vue.js";
+import { default as R } from "./packages/components/lib/UIKit/Checkbox/CheckboxBtn.vue.js";
 /* empty css                                                        */
-import { default as T } from "./packages/components/lib/UIKit/Checkbox/CheckboxGroup.vue.js";
-import { default as w } from "./packages/components/lib/UIKit/Tab/BaseTabView.vue.js";
-import { default as k } from "./packages/components/lib/UIKit/Tab/BaseTab.vue.js";
-import { default as v } from "./packages/components/lib/UIKit/Radio/RadioButton.vue.js";
-import { default as G } from "./packages/components/lib/UIKit/Radio/RadioGroup.vue.js";
-import { default as O } from "./packages/components/lib/UIKit/AccessibleSelect.vue.js";
-import { default as P } from "./packages/components/lib/UIKit/BaseAlert.vue.js";
+import { default as G } from "./packages/components/lib/UIKit/Checkbox/CheckboxGroup.vue.js";
+import { default as w } from "./packages/components/lib/UIKit/Checkbox/v2/CheckboxButtonGroup.vue.js";
+import { default as v } from "./packages/components/lib/UIKit/Tab/BaseTabView.vue.js";
+import { default as F } from "./packages/components/lib/UIKit/Tab/BaseTab.vue.js";
+import { default as O } from "./packages/components/lib/UIKit/Radio/RadioButton.vue.js";
+import { default as U } from "./packages/components/lib/UIKit/Radio/RadioGroup.vue.js";
+import { default as j } from "./packages/components/lib/UIKit/Radio/v2/RadioButtonGroup.vue.js";
+import { default as y } from "./packages/components/lib/UIKit/Radio/v2/RadioButtonItem.vue.js";
+/* empty css                                                            */
+import { RadioGroupItem as E } from "reka-ui";
+import { default as J } from "./packages/components/lib/UIKit/AccessibleSelect.vue.js";
+/* empty css                                                    */
+import { default as N } from "./packages/components/lib/UIKit/BaseAlert.vue.js";
 /* empty css                                             */
-import { default as V } from "./packages/components/lib/UIKit/BaseAutocomplete.vue.js";
+import { default as W } from "./packages/components/lib/UIKit/BaseAutocomplete.vue.js";
 /* empty css                                                    */
-import { default as q } from "./packages/components/lib/UIKit/Autocomplete/ClearableAutocomplete.vue.js";
+import { default as Y } from "./packages/components/lib/UIKit/Autocomplete/ClearableAutocomplete.vue.js";
 /* empty css                                                                      */
-import { default as z } from "./packages/components/lib/UIKit/BaseBadge.vue.js";
+import { default as _ } from "./packages/components/lib/UIKit/BaseBadge.vue.js";
 /* empty css                                             */
-import { default as H } from "./packages/components/lib/UIKit/BaseButton.vue.js";
-import { default as K } from "./UIKit/BaseCard.js";
-import { default as Q } from "./UIKit/BaseComplexToggle.js";
-import { default as X } from "./packages/components/lib/UIKit/BaseDropDown.vue.js";
+import { default as ee } from "./packages/components/lib/UIKit/BaseButton.vue.js";
+import { default as te } from "./packages/components/lib/UIKit/BaseCard.vue.js";
+/* empty css                                            */
+import { default as re } from "./UIKit/BaseComplexToggle.js";
+import { default as se } from "./packages/components/lib/UIKit/BaseDropDown.vue.js";
 /* empty css                                                */
-import { default as Z } from "./UIKit/BaseFloatingLabel.js";
-import { default as $ } from "./UIKit/BaseInput.js";
-import { default as ae } from "./packages/components/lib/UIKit/BasePagination.vue.js";
-import { default as te } from "./UIKit/BaseSlider.js";
-import { default as fe } from "./UIKit/BaseTextarea.js";
-import { default as le } from "./UIKit/BaseToggle.js";
-import { default as me } from "./UIKit/BaseTooltip.js";
-import { default as ue } from "./packages/components/lib/UIKit/BaseUploadFile.vue.js";
-import { default as ie } from "./packages/components/lib/UIKit/BaseModal.vue.js";
+import { default as me } from "./UIKit/BaseFloatingLabel.js";
+import { default as de } from "./UIKit/BaseInput.js";
+import { default as xe } from "./packages/components/lib/UIKit/BasePagination.vue.js";
+import { default as Be } from "./UIKit/BaseSlider.js";
+import { default as ce } from "./UIKit/BaseTextarea.js";
+import { default as Se } from "./packages/components/lib/UIKit/BaseToggle.vue.js";
+import { default as ge } from "./UIKit/BaseTooltip.js";
+import { default as Ae } from "./packages/components/lib/UIKit/BaseUploadFile.vue.js";
+import { default as Re } from "./packages/components/lib/UIKit/BaseModal.vue.js";
 /* empty css                                             */
-import { default as ne } from "./UIKit/StaticSpinner.js";
-import { default as Se } from "./UIKit/ShimmerLoader/BaseShimmerLoader.js";
-import { default as Ce } from "./packages/components/lib/UIKit/ShimmerLoader/ShimmerMultiLine.vue.js";
-import { default as Ae } from "./packages/components/lib/chart/DoughnutChart.vue.js";
-import { default as Te } from "./packages/components/lib/chart/LineChart.vue.js";
-import { default as we } from "./UIKit/Slider/SimpleSlider.js";
-import { default as ke } from "./packages/components/lib/UIKit/BaseSnackbar.vue.js";
+import { default as Ge } from "./UIKit/StaticSpinner.js";
+import { default as we } from "./UIKit/ShimmerLoader/BaseShimmerLoader.js";
+import { default as ve } from "./packages/components/lib/UIKit/ShimmerLoader/ShimmerMultiLine.vue.js";
+import { default as Fe } from "./packages/components/lib/chart/DoughnutChart.vue.js";
+import { default as Oe } from "./packages/components/lib/chart/LineChart.vue.js";
+import { default as Ue } from "./UIKit/Slider/SimpleSlider.js";
+import { default as je } from "./packages/components/lib/UIKit/BaseSnackbar.vue.js";
 /* empty css                                                */
-import { default as ve } from "./packages/components/lib/components/IntersectionObserver/IntersectionObservable.vue.js";
-import { default as Ge } from "./packages/components/lib/components/IntersectionObserver/IntersectionObserver.vue.js";
-import { default as Oe } from "./components/carousel/SwiperCarousel.js";
-import { default as Pe } from "./components/carousel/SwiperSlide.js";
-import { default as Ve } from "./packages/components/lib/UIKit/BaseBreadcrumb.vue.js";
+import { default as ye } from "./packages/components/lib/components/IntersectionObserver/IntersectionObservable.vue.js";
+import { default as Ee } from "./packages/components/lib/components/IntersectionObserver/IntersectionObserver.vue.js";
+import { default as Je } from "./components/carousel/SwiperCarousel.js";
+import { default as Ne } from "./components/carousel/SwiperSlide.js";
+import { default as We } from "./packages/components/lib/UIKit/BaseBreadcrumb.vue.js";
 export {
-  O as AccessibleSelect,
-  u as BaseAccordion,
-  i as BaseAccordionBtn,
-  n as BaseAccordionContent,
-  S as BaseAccordionItem,
-  P as BaseAlert,
-  V as BaseAutocomplete,
-  z as BaseBadge,
-  Ve as BaseBreadcrumb,
-  H as BaseButton,
-  K as BaseCard,
-  Q as BaseComplexToggle,
-  X as BaseDropDown,
-  Z as BaseFloatingLabel,
-  $ as BaseInput,
-  ie as BaseModal,
-  ae as BasePagination,
-  Se as BaseShimmerLoader,
-  te as BaseSlider,
-  ke as BaseSnackbar,
-  k as BaseTab,
-  w as BaseTabView,
-  fe as BaseTextarea,
-  le as BaseToggle,
-  me as BaseTooltip,
-  ue as BaseUploadFile,
-  A as CheckboxBtn,
-  T as CheckboxGroup,
-  q as ClearableAutocomplete,
-  Ae as DoughnutChart,
-  ve as IntersectionObservable,
-  Ge as IntersectionObserver,
-  Te as LineChart,
-  v as RadioButton,
-  G as RadioGroup,
-  C as SelectItem,
-  Ce as ShimmerMultiLine,
-  we as SimpleSlider,
-  ne as StaticSpinner,
-  Oe as SwiperCarousel,
-  Pe as SwiperSlide
+  J as AccessibleSelect,
+  B as BaseAccordion,
+  c as BaseAccordionBtn,
+  S as BaseAccordionContent,
+  g as BaseAccordionItem,
+  N as BaseAlert,
+  W as BaseAutocomplete,
+  _ as BaseBadge,
+  We as BaseBreadcrumb,
+  ee as BaseButton,
+  te as BaseCard,
+  re as BaseComplexToggle,
+  se as BaseDropDown,
+  me as BaseFloatingLabel,
+  de as BaseInput,
+  Re as BaseModal,
+  xe as BasePagination,
+  we as BaseShimmerLoader,
+  Be as BaseSlider,
+  je as BaseSnackbar,
+  F as BaseTab,
+  v as BaseTabView,
+  ce as BaseTextarea,
+  Se as BaseToggle,
+  ge as BaseTooltip,
+  Ae as BaseUploadFile,
+  R as CheckboxBtn,
+  w as CheckboxButtonGroup,
+  G as CheckboxGroup,
+  Y as ClearableAutocomplete,
+  Fe as DoughnutChart,
+  ye as IntersectionObservable,
+  Ee as IntersectionObserver,
+  Oe as LineChart,
+  O as RadioButton,
+  j as RadioButtonGroup,
+  y as RadioButtonItem,
+  E as RadioButtonItemPrimitive,
+  U as RadioGroup,
+  A as SelectItem,
+  ve as ShimmerMultiLine,
+  Ue as SimpleSlider,
+  Ge as StaticSpinner,
+  Je as SwiperCarousel,
+  Ne as SwiperSlide
 };

package/dist/packages/components/lib/UIKit/AccessibleSelect.vue.js

@@ -1,10 +1,10 @@
-import { defineComponent as H, mergeModels as $, useModel as p, useId as I, computed as M, ref as D, watch as h, onMounted as F, onUnmounted as P, createElementBlock as u, openBlock as n, normalizeClass as a, createElementVNode as o, createCommentVNode as r, withModifiers as c, renderSlot as z, unref as b, createBlock as A, createVNode as E, Fragment as V, renderList as N } from "vue";
-import { useKeyboardController as O } from "@wikicasa-dev/vue-composables";
-import { WarningIconRounded as S, ArrowIcon as q } from "@wikicasa-dev/svg-icons";
-const j = ["id", "innerHTML"], K = ["id", "data-cy", "aria-required", "aria-controls", "aria-labelledby", "aria-expanded", "aria-activedescendant", "aria-invalid", "aria-describedby"], R = ["innerHTML"], U = { class: "uikit-pointer-events-none uikit-mt-1 uikit-inline-flex" }, W = ["innerHTML"], G = ["data-cy"], J = ["id", "aria-selected", "onClick", "onMouseover"], Q = { class: "uikit-inline-block uikit-cursor-pointer uikit-text-sm" }, X = ["name", "checked", "onInput"], Y = ["innerHTML"], Z = ["id", "arial-live", "innerHTML"], _ = ["id", "arial-live", "innerHTML"], le = /* @__PURE__ */ H({
-  inheritAttrs: !1,
+import { defineComponent as H, mergeModels as y, useModel as C, useId as F, useTemplateRef as z, computed as p, watch as I, createElementBlock as a, openBlock as l, createVNode as $, createCommentVNode as u, normalizeClass as n, withCtx as x, Fragment as g, renderList as N, withModifiers as f, createElementVNode as d, renderSlot as P, createBlock as A, unref as M } from "vue";
+import { WarningIconRounded as E, ArrowIcon as R } from "@wikicasa-dev/svg-icons";
+import S from "./BaseDropDown.vue.js";
+import '../../../../assets/BaseDropDown.css';/* empty css                  */
+const q = { class: "uikit-relative uikit-flex uikit-h-[var(--btn-height)] uikit-items-center" }, K = ["id", "innerHTML"], j = ["onClick"], U = ["id", "data-cy", "aria-required", "aria-controls", "aria-labelledby", "aria-expanded", "aria-activedescendant", "aria-invalid", "aria-describedby", "onClick", "onKeydown"], W = ["innerHTML"], D = ["innerHTML"], G = ["id", "aria-selected", "onClick", "onMouseover"], J = { class: "uikit-inline-block uikit-cursor-pointer uikit-text-sm" }, O = ["name", "checked", "onInput"], Q = ["innerHTML"], X = ["id", "arial-live", "innerHTML"], Y = ["id", "arial-live", "innerHTML"], te = /* @__PURE__ */ H({
   __name: "AccessibleSelect",
-  props: /* @__PURE__ */ $({
+  props: /* @__PURE__ */ y({
     label: { default: "" },
     dropdownPosition: { default: "bottom" },
     namespace: {},
@@ -13,6 +13,7 @@ const j = ["id", "innerHTML"], K = ["id", "data-cy", "aria-required", "aria-cont
     feedback: {},
     closeOnBodyPressed: { type: Boolean, default: !0 },
     border: { type: Boolean, default: !0 },
+    withFieldset: { type: Boolean, default: !0 },
     fieldsetClasses: {},
     legendClasses: {},
     dropdownClasses: {},
@@ -28,181 +29,178 @@ const j = ["id", "innerHTML"], K = ["id", "data-cy", "aria-required", "aria-cont
       default: () => ({ id: "", label: "" })
     },
     modelModifiers: {},
-    toggleDropdown: { type: Boolean, default: void 0 },
-    toggleDropdownModifiers: {}
+    open: { type: Boolean, default: !1 },
+    openModifiers: {}
   }),
-  emits: /* @__PURE__ */ $(["click", "update:dropdownState"], ["update:modelValue", "update:toggleDropdown"]),
-  setup(e, { emit: L }) {
-    const y = L, k = p(e, "modelValue"), g = p(e, "toggleDropdown"), T = I(), l = M(() => e.namespace || T), t = D(!1), m = M(() => !!k.value.label), { activeIdx: v, selectedIdx: B } = O({
-      optionsLength: e.options.length,
-      isDropdownOpen: t
-    }), w = (i) => {
-      t.value = !1, k.value = i;
+  emits: /* @__PURE__ */ y(["click", "update:dropdownState"], ["update:modelValue", "update:open"]),
+  setup(e, { emit: V }) {
+    const T = V, k = C(e, "modelValue"), m = C(e, "open"), L = F(), B = z("dropdownRef"), t = p(() => e.namespace || L), w = p(() => !!k.value.label), h = (i) => {
+      m.value = !1, k.value = i;
     };
-    h(B, (i) => {
-      w(e.options[i]), t.value = !1;
-    }), h(g, (i) => {
-      i && (t.value = !t.value, g.value = !1);
-    }), h(t, (i) => {
-      y("update:dropdownState", i);
-    });
-    const C = ({ target: i }) => {
-      `${l.value}_btn` !== i.id && (t.value = !1);
-    };
-    return F(() => {
-      e.closeOnBodyPressed && document.addEventListener("click", C);
-    }), P(() => {
-      e.closeOnBodyPressed && document.removeEventListener("click", C);
-    }), (i, s) => (n(), u("div", {
-      class: a(i.$attrs.class)
-    }, [
-      o("div", {
-        class: a(["uikit-relative uikit-flex uikit-h-12 uikit-items-center", e.wrapperClasses])
-      }, [
-        e.label ? (n(), u("label", {
-          key: 0,
-          id: `${l.value}_label`,
-          class: a(["uikit-pointer-events-none uikit-absolute uikit-z-10 uikit-text-sm uikit-font-medium uikit-transition-all uikit-ease-in-out", [
-            m.value ? "as-floating -uikit-top-1 uikit-left-[22px] uikit-text-w-black" : "as-inline uikit-top-4 uikit-text-w-gray",
-            e.labelClasses,
-            { "uikit-left-9": i.$slots.lefticon && !m.value },
-            { "uikit-left-4": !i.$slots.lefticon && !m.value }
-          ]]),
-          innerHTML: e.label
-        }, null, 10, j)) : r("", !0),
-        i.$slots.lefticon ? (n(), u("span", {
-          key: 1,
-          class: "uikit-z-20 uikit-mt-2 uikit-pl-2",
-          onClick: s[0] || (s[0] = c((d) => t.value = !t.value, ["stop"]))
-        }, [
-          z(i.$slots, "lefticon")
-        ])) : r("", !0),
-        o("button", {
-          id: `${l.value}_btn`,
-          ref: "btnEl",
-          type: "button",
-          "data-cy": e.dataCy,
-          class: a(["uikit-peer uikit-relative uikit-z-10 uikit-flex uikit-h-full uikit-w-full uikit-items-center uikit-justify-between uikit-truncate uikit-border-0 uikit-bg-transparent uikit-pr-4 uikit-text-left focus-visible:uikit-outline-0", [i.$slots.lefticon ? "uikit-pl-2" : "uikit-pl-4", e.btnClasses]]),
-          "aria-required": !!i.$attrs.required,
-          role: "combobox",
-          "aria-haspopup": "listbox",
-          "aria-controls": `${l.value}_dropdown`,
-          "aria-labelledby": `${l.value}_label ${l.value}_btn`,
-          "aria-expanded": t.value,
-          "aria-activedescendant": b(v) >= 0 && t.value ? `${l.value}_element_${e.options[b(v)].label}` : "",
-          "aria-invalid": e.isValid === !1,
-          "aria-describedby": e.isValid === !1 ? `${l.value}_invalid_msg` : void 0,
-          onClick: s[1] || (s[1] = (d) => {
-            t.value = !t.value, y("click", d);
-          })
-        }, [
-          o("span", {
-            class: a(["uikit-pointer-events-none uikit-mt-1", e.btnTextClasses]),
-            innerHTML: k.value.visibleLabel || k.value.label
-          }, null, 10, R),
-          o("span", U, [
-            e.isValid == !1 ? (n(), A(b(S), {
+    return I(
+      () => B.value?.selectedIdx,
+      (i) => {
+        i === void 0 || i === -1 || (h(e.options[i]), m.value = !1);
+      }
+    ), (i, v) => (l(), a("div", null, [
+      $(S, {
+        ref: "dropdownRef",
+        open: m.value,
+        "onUpdate:open": v[1] || (v[1] = (r) => m.value = r),
+        class: n(["uikit-select-wrapper", e.wrapperClasses]),
+        "data-cy": e.dataCy,
+        "activate-keyboard-controller": "",
+        "close-when-clicked-outside": e.closeOnBodyPressed,
+        direction: e.dropdownPosition === "top" ? "up" : "down",
+        "dropdown-element": "ul",
+        "dropdown-classes": [
+          "uikit-select-dropdown uikit-z-30 uikit-mb-0",
+          e.dropdownClasses
+        ],
+        "dropdown-attrs": {
+          role: "listbox",
+          tabindex: -1,
+          "aria-multiselectable": !1
+        }
+      }, {
+        btn_slot: x(({ toggleDropdown: r, isOpen: b, activeIdx: o, setSelectedIdx: c }) => [
+          d("div", q, [
+            e.label ? (l(), a("label", {
               key: 0,
-              class: "uikit-mr-1",
-              width: 20,
-              height: 20,
-              "stroke-color": "#FA4F64"
-            })) : r("", !0),
-            E(b(q), {
-              class: a(["uikit-transition-transform motion-reduce:uikit-transition-none", [
-                t.value ? "uikit-rotate-180" : "",
-                e.arrowIcon?.classes
+              id: `${t.value}_label`,
+              class: n(["uikit-pointer-events-none uikit-absolute uikit-z-10 uikit-text-sm uikit-font-medium uikit-transition-all uikit-ease-in-out", [
+                w.value ? "as-floating -uikit-top-1 uikit-left-[22px] uikit-text-w-black" : "as-inline uikit-top-4 uikit-text-w-gray",
+                e.labelClasses,
+                { "uikit-left-9": i.$slots.lefticon && !w.value },
+                { "uikit-left-4": !i.$slots.lefticon && !w.value }
               ]]),
-              width: e.arrowIcon?.width ?? 18,
-              height: e.arrowIcon?.height ?? 18,
-              "stroke-color": e.isValid ? "#2B5DFF" : e.isValid === !1 ? "#FA4F64" : e.arrowIcon?.strokeColor ?? "#222"
-            }, null, 8, ["class", "width", "height", "stroke-color"])
-          ])
-        ], 10, K),
-        o("fieldset", {
-          "aria-hidden": "true",
-          class: a(["uikit-pointer-events-none uikit-absolute uikit-bottom-0 uikit-left-0 uikit-right-0 uikit-m-0 uikit-box-border uikit-h-12 uikit-cursor-pointer uikit-rounded-xs uikit-bg-white uikit-px-2 uikit-py-0 peer-focus:uikit-border-2", [
-            e.fieldsetClasses,
-            e.isValid ? "uikit-border-w-primary" : e.isValid === !1 ? "uikit-border-w-danger" : "uikit-border-w-secondary",
-            {
-              "uikit-border uikit-border-solid peer-focus:uikit-border-w-primary peer-focus-visible:uikit-border-2 peer-focus-visible:uikit-border-w-primary peer-aria-invalid:uikit-border-w-danger": e.border
-            },
-            { "uikit-border-0 peer-focus:uikit-border-0": !e.border }
-          ]])
-        }, [
-          o("legend", {
-            class: a([[e.legendClasses, { "uikit-m-0 uikit-w-0": !e.label }], "uikit-ml-2 uikit-h-3 uikit-px-0 uikit-text-sm"])
-          }, [
-            e.label ? (n(), u("span", {
-              key: 0,
-              class: a(["uikit-mx-5px", [k.value.label ? "uikit-invisible" : "uikit-hidden"]]),
               innerHTML: e.label
-            }, null, 10, W)) : r("", !0)
-          ], 2)
-        ], 2),
-        o("ul", {
-          "data-cy": e.dataCy && `${e.dataCy}_dropdown`,
-          role: "listbox",
-          tabindex: -1,
-          "aria-multiselectable": !1,
-          class: a(["uikit-absolute uikit-z-30 uikit-m-0 uikit-max-h-[225px] uikit-w-full uikit-min-w-full uikit-list-none uikit-overflow-y-auto uikit-p-0 uikit-no-scrollbar", [
-            { "uikit-h-0 uikit-w-0 uikit-overflow-hidden": !t.value },
-            {
-              "uikit-rounded-xs uikit-border uikit-border-solid uikit-border-w-secondary uikit-bg-white": t.value
-            },
-            { "uikit-bottom-[55px]": e.dropdownPosition === "top" },
-            { "uikit-top-[55px]": e.dropdownPosition === "bottom" },
-            e.dropdownClasses
-          ]]),
-          onClick: s[3] || (s[3] = c(() => {
-          }, ["stop"]))
-        }, [
-          (n(!0), u(V, null, N(e.options, (d, f) => (n(), u("li", {
-            id: `${l.value}_element_${e.options[f].label}`,
-            key: `${d.label}_${f}`,
+            }, null, 10, K)) : u("", !0),
+            i.$slots.lefticon ? (l(), a("span", {
+              key: 1,
+              class: "uikit-z-20 uikit-mt-2 uikit-pl-2",
+              onClick: f((s) => r(), ["stop"])
+            }, [
+              P(i.$slots, "lefticon")
+            ], 8, j)) : u("", !0),
+            d("button", {
+              id: `${t.value}_btn`,
+              ref: "btnEl",
+              type: "button",
+              "data-cy": e.dataCy,
+              class: n(["uikit-peer uikit-relative uikit-z-10 uikit-flex uikit-h-full uikit-w-full uikit-items-center uikit-justify-between uikit-truncate uikit-border-0 uikit-bg-transparent uikit-pr-4 uikit-text-left focus-visible:uikit-outline-0", [i.$slots.lefticon ? "uikit-pl-2" : "uikit-pl-4", e.btnClasses]]),
+              "aria-required": !!i.$attrs.required,
+              role: "combobox",
+              "aria-haspopup": "listbox",
+              "aria-controls": `${t.value}_dropdown`,
+              "aria-labelledby": `${t.value}_label ${t.value}_btn`,
+              "aria-expanded": b,
+              "aria-activedescendant": o >= 0 && b ? `${t.value}_element_${e.options[o].label}` : "",
+              "aria-invalid": e.isValid === !1,
+              "aria-describedby": e.isValid === !1 ? `${t.value}_invalid_msg` : void 0,
+              onClick: (s) => {
+                r(), T("click", s);
+              },
+              onKeydown: (s) => {
+                ["Enter", "Space"].includes(s.key) && (s.preventDefault(), s.stopPropagation(), c(o), r());
+              }
+            }, [
+              d("span", {
+                class: n(["uikit-pointer-events-none", [e.btnTextClasses, { "uikit-mt-1": e.withFieldset }]]),
+                innerHTML: k.value?.visibleLabel || k.value?.label
+              }, null, 10, W),
+              d("span", {
+                class: n(["uikit-pointer-events-none uikit-inline-flex", [{ "uikit-mt-1": e.withFieldset }]])
+              }, [
+                e.isValid == !1 ? (l(), A(M(E), {
+                  key: 0,
+                  class: "uikit-mr-1",
+                  width: 20,
+                  height: 20,
+                  "stroke-color": "#FA4F64"
+                })) : u("", !0),
+                $(M(R), {
+                  class: n(["uikit-transition-transform motion-reduce:uikit-transition-none", [b ? "uikit-rotate-180" : "", e.arrowIcon?.classes]]),
+                  width: e.arrowIcon?.width ?? 18,
+                  height: e.arrowIcon?.height ?? 18,
+                  "stroke-color": e.isValid ? "#2B5DFF" : e.isValid === !1 ? "#FA4F64" : e.arrowIcon?.strokeColor ?? "#222"
+                }, null, 8, ["class", "width", "height", "stroke-color"])
+              ], 2)
+            ], 42, U),
+            e.withFieldset ? (l(), a("fieldset", {
+              key: 2,
+              "aria-hidden": "true",
+              class: n(["uikit-pointer-events-none uikit-absolute uikit-bottom-0 uikit-left-0 uikit-right-0 uikit-m-0 uikit-box-border uikit-h-12 uikit-cursor-pointer uikit-rounded-xs uikit-bg-white uikit-px-2 uikit-py-0 peer-focus:uikit-border-2", [
+                e.fieldsetClasses,
+                e.isValid ? "uikit-border-w-primary" : e.isValid === !1 ? "uikit-border-w-danger" : "uikit-border-w-secondary",
+                {
+                  "uikit-border uikit-border-solid peer-focus:uikit-border-w-primary peer-focus-visible:uikit-border-2 peer-focus-visible:uikit-border-w-primary peer-aria-invalid:uikit-border-w-danger": e.border
+                },
+                { "uikit-border-0 peer-focus:uikit-border-0": !e.border }
+              ]])
+            }, [
+              d("legend", {
+                class: n([[e.legendClasses, { "uikit-m-0 uikit-w-0": !e.label }], "uikit-ml-2 uikit-h-3 uikit-px-0 uikit-text-sm"])
+              }, [
+                e.label ? (l(), a("span", {
+                  key: 0,
+                  class: n(["uikit-mx-5px", [
+                    k.value.label ? "uikit-invisible" : "uikit-hidden"
+                  ]]),
+                  innerHTML: e.label
+                }, null, 10, D)) : u("", !0)
+              ], 2)
+            ], 2)) : u("", !0)
+          ])
+        ]),
+        default: x(({ activeIdx: r, setActiveIdx: b }) => [
+          (l(!0), a(g, null, N(e.options, (o, c) => (l(), a("li", {
+            id: `${t.value}_element_${e.options[c].label}`,
+            key: `${o.label}_${c}`,
             role: "option",
-            "aria-selected": b(v) === f,
-            class: a(["uikit-m-1 uikit-cursor-pointer uikit-px-20px uikit-py-10px uikit-text aria-selected:uikit-rounded-xs aria-selected:uikit-bg-w-cultured", e.dropdownItemClasses]),
-            onClick: c((x) => w(d), ["stop"]),
-            onMouseover: c((x) => v.value = f, ["stop"]),
-            onBlur: s[2] || (s[2] = c(() => {
+            "aria-selected": r === c,
+            class: n(["uikit-m-1 uikit-cursor-pointer uikit-px-20px uikit-py-10px uikit-text aria-selected:uikit-rounded-xs aria-selected:uikit-bg-w-cultured", e.dropdownItemClasses]),
+            onClick: f((s) => h(o), ["stop"]),
+            onMouseover: f((s) => b(c), ["stop"]),
+            onBlur: v[0] || (v[0] = f(() => {
             }, ["stop"]))
           }, [
-            o("label", Q, [
-              o("input", {
+            d("label", J, [
+              d("input", {
                 tabindex: "-1",
                 class: "uikit-m-0 uikit-appearance-none",
-                name: `${l.value}_radio`,
+                name: `${t.value}_radio`,
                 type: "radio",
-                checked: d.label === k.value.label,
-                onInput: c((x) => w(d), ["stop"])
-              }, null, 40, X),
-              o("span", {
-                innerHTML: d.label
-              }, null, 8, Y)
+                checked: o.label === k.value.label,
+                onInput: f((s) => h(o), ["stop"])
+              }, null, 40, O),
+              d("span", {
+                innerHTML: o.label
+              }, null, 8, Q)
             ])
-          ], 42, J))), 128))
-        ], 10, G)
-      ], 2),
-      e.feedback ? (n(), u(V, { key: 0 }, [
-        e.feedback.valid ? (n(), u("span", {
+          ], 42, G))), 128))
+        ]),
+        _: 3
+      }, 8, ["open", "class", "data-cy", "close-when-clicked-outside", "direction", "dropdown-classes"]),
+      e.feedback ? (l(), a(g, { key: 0 }, [
+        e.feedback.valid ? (l(), a("span", {
           key: 0,
-          id: `${l.value}_valid_msg`,
+          id: `${t.value}_valid_msg`,
           "arial-live": i.$attrs["aria-live"],
           class: "uikit-mt-1 uikit-inline-block uikit-text-12",
           innerHTML: e.isValid ? e.feedback.valid : ""
-        }, null, 8, Z)) : r("", !0),
-        e.feedback.invalid ? (n(), u("span", {
+        }, null, 8, X)) : u("", !0),
+        e.feedback.invalid ? (l(), a("span", {
           key: 1,
-          id: `${l.value}_invalid_msg`,
+          id: `${t.value}_invalid_msg`,
           "arial-live": i.$attrs["aria-live"],
           class: "uikit-mt-1 uikit-inline-block uikit-text-12 uikit-text-w-danger",
           innerHTML: e.isValid === !1 ? e.feedback.invalid : ""
-        }, null, 8, _)) : r("", !0)
-      ], 64)) : r("", !0)
-    ], 2));
+        }, null, 8, Y)) : u("", !0)
+      ], 64)) : u("", !0)
+    ]));
   }
 });
 export {
-  le as default
+  te as default
 };

package/dist/packages/components/lib/UIKit/Accordion/BaseAccordionItem.vue.js

@@ -17,10 +17,7 @@ const b = /* @__PURE__ */ n({
   },
   setup(e) {
     const o = c("isActive");
-    return (i, v) => (d(), u(t(h), {
-      value: e.value,
-      "data-cy": e.dataCy
-    }, {
+    return (i, v) => (d(), u(t(h), { value: e.value }, {
       default: a(() => [
         s(t(m), {
           as: e.headerTag,
@@ -32,6 +29,7 @@ const b = /* @__PURE__ */ n({
           default: a(() => [
             l(i.$slots, "header-content"),
             s(t(g), {
+              "data-cy": e.dataCy,
               class: r([
                 e.triggerClasses,
                 {
@@ -54,7 +52,7 @@ const b = /* @__PURE__ */ n({
                 ])
               ]),
               _: 3
-            }, 8, ["class"])
+            }, 8, ["data-cy", "class"])
           ]),
           _: 3
         }, 8, ["as", "class"]),
@@ -71,7 +69,7 @@ const b = /* @__PURE__ */ n({
         }, 8, ["class"])
       ]),
       _: 3
-    }, 8, ["value", "data-cy"]));
+    }, 8, ["value"]));
   }
 });
 export {