@wikicasa-dev/components 2.2.9-alpha.4 → 2.2.9-alpha.41

package/dist/composables/mock.js

@@ -0,0 +1,49 @@
+import { ref as _, onMounted as A, onUnmounted as D, unref as p } from "vue";
+const u = "ArrowUp", a = "ArrowDown", c = "Enter", i = "Escape", v = " ", d = "PageUp", K = "Home", E = "PageDown", m = "End", O = (l) => {
+  const {
+    isDropdownOpen: t,
+    disableSpaceHandler: P,
+    global: f = !0,
+    closeKeys: Y = [i, c]
+  } = l, n = _(-1), o = _(-1), w = l.activate === void 0 ? !0 : l.activate, y = () => {
+    n.value = -1, o.value = -1, t && (t.value = !1);
+  }, k = (e) => {
+    t && Y.includes(e) && (t.value = !1);
+  }, r = (e) => {
+    if (!t?.value || ![
+      u,
+      a,
+      c,
+      i,
+      v,
+      d,
+      K,
+      E,
+      m
+    ].includes(e.key))
+      return;
+    const s = p(l.optionsLength);
+    if ([u, a, d, E].includes(e.key) && e.preventDefault(), e.key === u)
+      n.value = n.value === 0 ? s - 1 : n.value - 1;
+    else if (e.key === a)
+      n.value = (n.value + 1) % s;
+    else if (e.key === c || e.key === v) {
+      if (e.key === v && P) return;
+      o.value = n.value, k(e.key);
+    } else e.key === i ? (n.value = o.value, k(e.key)) : e.key === d || e.key === K ? n.value = 0 : (e.key === E || e.key === m) && (n.value = s - 1);
+    e.stopPropagation();
+  };
+  return w ? (A(() => {
+    !document || !f || document.addEventListener("keydown", r);
+  }), D(() => {
+    !document || !f || document.removeEventListener("keydown", r);
+  }), {
+    activeIdx: n,
+    selectedIdx: o,
+    onKeyDownHandler: r,
+    $reset: y
+  }) : { activeIdx: n, selectedIdx: o, $reset: y, onKeyDownHandler: r };
+};
+export {
+  O as useKeyboardController
+};

package/dist/index.js

@@ -1,93 +1,94 @@
-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 x } from "./packages/components/lib/UIKit/Accordion/BaseAccordion.vue.js";
+import { default as B } from "./packages/components/lib/UIKit/Accordion/BaseAccordionBtn.vue.js";
+import { default as c } from "./packages/components/lib/UIKit/Accordion/BaseAccordionContent.vue.js";
+import { default as b } 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/AccessibleSelect.css';import './assets/CheckboxBtn.css';import './assets/BaseAccordionItem.css';/* empty css                                                               */
+import { default as g } from "./packages/components/lib/UIKit/BaseSelect/SelectItem.vue.js";
+import { default as h } 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 I } from "./packages/components/lib/UIKit/Checkbox/CheckboxGroup.vue.js";
+import { default as L } from "./packages/components/lib/UIKit/Tab/BaseTabView.vue.js";
+import { default as D } from "./packages/components/lib/UIKit/Tab/BaseTab.vue.js";
+import { default as F } from "./packages/components/lib/UIKit/Radio/RadioButton.vue.js";
+import { default as M } from "./packages/components/lib/UIKit/Radio/RadioGroup.vue.js";
+import { default as R } from "./packages/components/lib/UIKit/AccessibleSelect.vue.js";
+/* empty css                                                    */
+import { default as U } 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 j } 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 E } 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 J } from "./packages/components/lib/UIKit/BaseButton.vue.js";
+import { default as N } from "./UIKit/BaseCard.js";
+import { default as W } from "./UIKit/BaseComplexToggle.js";
+import { default as Y } 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 _ } from "./UIKit/BaseFloatingLabel.js";
+import { default as ee } from "./UIKit/BaseInput.js";
+import { default as oe } from "./packages/components/lib/UIKit/BasePagination.vue.js";
+import { default as re } from "./UIKit/BaseSlider.js";
+import { default as se } from "./UIKit/BaseTextarea.js";
+import { default as pe } from "./UIKit/BaseToggle.js";
+import { default as de } from "./UIKit/BaseTooltip.js";
+import { default as xe } from "./packages/components/lib/UIKit/BaseUploadFile.vue.js";
+import { default as Be } 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 ce } from "./UIKit/StaticSpinner.js";
+import { default as be } from "./UIKit/ShimmerLoader/BaseShimmerLoader.js";
+import { default as ge } from "./packages/components/lib/UIKit/ShimmerLoader/ShimmerMultiLine.vue.js";
+import { default as he } from "./packages/components/lib/chart/DoughnutChart.vue.js";
+import { default as Ie } from "./packages/components/lib/chart/LineChart.vue.js";
+import { default as Le } from "./UIKit/Slider/SimpleSlider.js";
+import { default as De } 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 Fe } from "./packages/components/lib/components/IntersectionObserver/IntersectionObservable.vue.js";
+import { default as Me } from "./packages/components/lib/components/IntersectionObserver/IntersectionObserver.vue.js";
+import { default as Re } from "./components/carousel/SwiperCarousel.js";
+import { default as Ue } from "./components/carousel/SwiperSlide.js";
+import { default as je } 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
+  R as AccessibleSelect,
+  x as BaseAccordion,
+  B as BaseAccordionBtn,
+  c as BaseAccordionContent,
+  b as BaseAccordionItem,
+  U as BaseAlert,
+  j as BaseAutocomplete,
+  E as BaseBadge,
+  je as BaseBreadcrumb,
+  J as BaseButton,
+  N as BaseCard,
+  W as BaseComplexToggle,
+  Y as BaseDropDown,
+  _ as BaseFloatingLabel,
+  ee as BaseInput,
+  Be as BaseModal,
+  oe as BasePagination,
+  be as BaseShimmerLoader,
+  re as BaseSlider,
+  De as BaseSnackbar,
+  D as BaseTab,
+  L as BaseTabView,
+  se as BaseTextarea,
+  pe as BaseToggle,
+  de as BaseTooltip,
+  xe as BaseUploadFile,
+  h as CheckboxBtn,
+  I as CheckboxGroup,
+  y as ClearableAutocomplete,
+  he as DoughnutChart,
+  Fe as IntersectionObservable,
+  Me as IntersectionObserver,
+  Ie as LineChart,
+  F as RadioButton,
+  M as RadioGroup,
+  g as SelectItem,
+  ge as ShimmerMultiLine,
+  Le as SimpleSlider,
+  ce as StaticSpinner,
+  Re as SwiperCarousel,
+  Ue 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 B, mergeModels as y, useModel as p, useId as F, useTemplateRef as z, computed as C, watch as I, createElementBlock as o, openBlock as l, createVNode as $, createCommentVNode as r, normalizeClass as s, withCtx as x, Fragment as g, renderList as N, withModifiers as f, createElementVNode as u, 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-12 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 = { class: "uikit-pointer-events-none uikit-mt-1 uikit-inline-flex" }, G = ["innerHTML"], J = ["id", "aria-selected", "onClick", "onMouseover"], O = { class: "uikit-inline-block uikit-cursor-pointer uikit-text-sm" }, Q = ["name", "checked", "onInput"], X = ["innerHTML"], Y = ["id", "arial-live", "innerHTML"], Z = ["id", "arial-live", "innerHTML"], le = /* @__PURE__ */ B({
   __name: "AccessibleSelect",
-  props: /* @__PURE__ */ $({
+  props: /* @__PURE__ */ y({
     label: { default: "" },
     dropdownPosition: { default: "bottom" },
     namespace: {},
@@ -28,179 +28,172 @@ 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 = p(e, "modelValue"), m = p(e, "open"), L = F(), H = z("dropdownRef"), t = C(() => e.namespace || L), w = C(() => !!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(
+      () => H.value?.selectedIdx,
+      (i) => {
+        i === void 0 || i === -1 || (h(e.options[i]), m.value = !1);
+      }
+    ), (i, v) => (l(), o("div", null, [
+      $(S, {
+        ref: "dropdownRef",
+        open: m.value,
+        "onUpdate:open": v[1] || (v[1] = (d) => m.value = d),
+        class: s([e.wrapperClasses]),
+        "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: d, isOpen: b, activeIdx: a, setSelectedIdx: c }) => [
+          u("div", q, [
+            e.label ? (l(), o("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: s(["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)) : r("", !0),
+            i.$slots.lefticon ? (l(), o("span", {
+              key: 1,
+              class: "uikit-z-20 uikit-mt-2 uikit-pl-2",
+              onClick: f((n) => d(), ["stop"])
+            }, [
+              P(i.$slots, "lefticon")
+            ], 8, j)) : r("", !0),
+            u("button", {
+              id: `${t.value}_btn`,
+              ref: "btnEl",
+              type: "button",
+              "data-cy": e.dataCy,
+              class: s(["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": a >= 0 && b ? `${t.value}_element_${e.options[a].label}` : "",
+              "aria-invalid": e.isValid === !1,
+              "aria-describedby": e.isValid === !1 ? `${t.value}_invalid_msg` : void 0,
+              onClick: (n) => {
+                d(), T("click", n);
+              },
+              onKeydown: (n) => {
+                ["Enter", "Space"].includes(n.key) && (n.preventDefault(), n.stopPropagation(), c(a), d());
+              }
+            }, [
+              u("span", {
+                class: s(["uikit-pointer-events-none uikit-mt-1", e.btnTextClasses]),
+                innerHTML: k.value?.visibleLabel || k.value?.label
+              }, null, 10, W),
+              u("span", D, [
+                e.isValid == !1 ? (l(), A(M(E), {
+                  key: 0,
+                  class: "uikit-mr-1",
+                  width: 20,
+                  height: 20,
+                  "stroke-color": "#FA4F64"
+                })) : r("", !0),
+                $(M(R), {
+                  class: s(["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"])
+              ])
+            ], 42, U),
+            u("fieldset", {
+              "aria-hidden": "true",
+              class: s(["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 }
+              ]])
+            }, [
+              u("legend", {
+                class: s([[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(), o("span", {
+                  key: 0,
+                  class: s(["uikit-mx-5px", [
+                    k.value.label ? "uikit-invisible" : "uikit-hidden"
+                  ]]),
+                  innerHTML: e.label
+                }, null, 10, G)) : r("", !0)
+              ], 2)
+            ], 2)
+          ])
+        ]),
+        default: x(({ activeIdx: d, setActiveIdx: b }) => [
+          (l(!0), o(g, null, N(e.options, (a, c) => (l(), o("li", {
+            id: `${t.value}_element_${e.options[c].label}`,
+            key: `${a.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": d === c,
+            class: s(["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((n) => h(a), ["stop"]),
+            onMouseover: f((n) => b(c), ["stop"]),
+            onBlur: v[0] || (v[0] = f(() => {
             }, ["stop"]))
           }, [
-            o("label", Q, [
-              o("input", {
+            u("label", O, [
+              u("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: a.label === k.value.label,
+                onInput: f((n) => h(a), ["stop"])
+              }, null, 40, Q),
+              u("span", {
+                innerHTML: a.label
+              }, null, 8, X)
             ])
           ], 42, J))), 128))
-        ], 10, G)
-      ], 2),
-      e.feedback ? (n(), u(V, { key: 0 }, [
-        e.feedback.valid ? (n(), u("span", {
+        ]),
+        _: 3
+      }, 8, ["open", "class", "close-when-clicked-outside", "direction", "dropdown-classes"]),
+      e.feedback ? (l(), o(g, { key: 0 }, [
+        e.feedback.valid ? (l(), o("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, Y)) : r("", !0),
+        e.feedback.invalid ? (l(), o("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)
+        }, null, 8, Z)) : r("", !0)
       ], 64)) : r("", !0)
-    ], 2));
+    ]));
   }
 });
 export {