@wikicasa-dev/components 2.2.9-alpha.5 → 2.2.9-alpha.50

package/dist/composables/mock.d.ts

@@ -0,0 +1,25 @@
+import { Ref } from 'vue';
+interface KeyboardControllerProps {
+    optionsLength: Ref<number> | number;
+    isDropdownOpen?: Ref<boolean>;
+    disableSpaceHandler?: boolean;
+    activate?: boolean;
+    /**
+     * If true, the listener will be initialized on the document element
+     */
+    global?: boolean;
+    /**
+     * List of keys that will close the dropdown.
+     * For the full list of keys, see
+     * @link https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values
+     * @default "Escape" and "Enter"
+     */
+    closeKeys?: string[];
+}
+export declare const useKeyboardController: (props: KeyboardControllerProps) => {
+    activeIdx: Ref<number, number>;
+    selectedIdx: Ref<number, number>;
+    $reset: () => void;
+    onKeyDownHandler: (e: KeyboardEvent) => void;
+};
+export {};

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,95 @@
-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 i } from "./packages/components/lib/UIKit/Accordion/BaseAccordion.vue.js";
+import { default as n } 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 C } 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/CheckboxBtn.css';import './assets/BaseAccordionItem.css';/* empty css                                                               */
+import { default as A } from "./packages/components/lib/UIKit/BaseSelect/SelectItem.vue.js";
+import { default as T } 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 w } from "./packages/components/lib/UIKit/Checkbox/CheckboxGroup.vue.js";
+import { default as k } from "./packages/components/lib/UIKit/Tab/BaseTabView.vue.js";
+import { default as v } from "./packages/components/lib/UIKit/Tab/BaseTab.vue.js";
+import { default as G } from "./packages/components/lib/UIKit/Radio/RadioButton.vue.js";
+import { default as O } from "./packages/components/lib/UIKit/Radio/RadioGroup.vue.js";
+import { default as P } from "./packages/components/lib/UIKit/AccessibleSelect.vue.js";
+/* empty css                                                    */
+import { default as V } 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 q } 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 z } 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 H } 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 K } from "./packages/components/lib/UIKit/BaseButton.vue.js";
+import { default as Q } from "./packages/components/lib/UIKit/BaseCard.vue.js";
+/* empty css                                            */
+import { default as X } from "./UIKit/BaseComplexToggle.js";
+import { default as Z } 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 ae } from "./UIKit/BaseInput.js";
+import { default as te } from "./packages/components/lib/UIKit/BasePagination.vue.js";
+import { default as fe } from "./UIKit/BaseSlider.js";
+import { default as le } from "./UIKit/BaseTextarea.js";
+import { default as me } from "./UIKit/BaseToggle.js";
+import { default as ue } from "./UIKit/BaseTooltip.js";
+import { default as ie } from "./packages/components/lib/UIKit/BaseUploadFile.vue.js";
+import { default as ne } 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 Se } from "./UIKit/StaticSpinner.js";
+import { default as Ce } from "./UIKit/ShimmerLoader/BaseShimmerLoader.js";
+import { default as Ae } from "./packages/components/lib/UIKit/ShimmerLoader/ShimmerMultiLine.vue.js";
+import { default as Te } from "./packages/components/lib/chart/DoughnutChart.vue.js";
+import { default as we } from "./packages/components/lib/chart/LineChart.vue.js";
+import { default as ke } from "./UIKit/Slider/SimpleSlider.js";
+import { default as ve } 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 Ge } from "./packages/components/lib/components/IntersectionObserver/IntersectionObservable.vue.js";
+import { default as Oe } from "./packages/components/lib/components/IntersectionObserver/IntersectionObserver.vue.js";
+import { default as Pe } from "./components/carousel/SwiperCarousel.js";
+import { default as Ve } from "./components/carousel/SwiperSlide.js";
+import { default as qe } 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
+  P as AccessibleSelect,
+  i as BaseAccordion,
+  n as BaseAccordionBtn,
+  S as BaseAccordionContent,
+  C as BaseAccordionItem,
+  V as BaseAlert,
+  q as BaseAutocomplete,
+  H as BaseBadge,
+  qe as BaseBreadcrumb,
+  K as BaseButton,
+  Q as BaseCard,
+  X as BaseComplexToggle,
+  Z as BaseDropDown,
+  $ as BaseFloatingLabel,
+  ae as BaseInput,
+  ne as BaseModal,
+  te as BasePagination,
+  Ce as BaseShimmerLoader,
+  fe as BaseSlider,
+  ve as BaseSnackbar,
+  v as BaseTab,
+  k as BaseTabView,
+  le as BaseTextarea,
+  me as BaseToggle,
+  ue as BaseTooltip,
+  ie as BaseUploadFile,
+  T as CheckboxBtn,
+  w as CheckboxGroup,
+  z as ClearableAutocomplete,
+  Te as DoughnutChart,
+  Ge as IntersectionObservable,
+  Oe as IntersectionObserver,
+  we as LineChart,
+  G as RadioButton,
+  O as RadioGroup,
+  A as SelectItem,
+  Ae as ShimmerMultiLine,
+  ke as SimpleSlider,
+  Se as StaticSpinner,
+  Pe as SwiperCarousel,
+  Ve 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,173 @@ 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]),
+        "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: 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", "data-cy", "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 {