@semplice-studio/pa-design-system 0.2.0 → 0.3.0

package/dist/components/PaSearchBar/PaSearchBar.vue2.js

@@ -1,16 +1,11 @@
-import { defineComponent as Z, useModel as ee, computed as h, ref as x, watch as w, nextTick as E, onBeforeUnmount as ae, openBlock as c, createElementBlock as d, normalizeClass as F, toDisplayString as g, createCommentVNode as m, createElementVNode as f, withDirectives as le, vModelText as te, createVNode as P, Fragment as ne, renderList as oe, createBlock as se, mergeModels as H } from "vue";
+import { defineComponent as Z, useModel as ee, useId as ae, computed as h, ref as w, watch as x, nextTick as E, onBeforeUnmount as le, openBlock as c, createElementBlock as d, normalizeClass as U, toDisplayString as g, createCommentVNode as m, createElementVNode as f, withDirectives as te, vModelText as ne, createVNode as H, Fragment as oe, renderList as se, createBlock as ie, mergeModels as K } from "vue";
 import I from "../PaIcon/PaIcon.vue.js";
-const re = ["for"], ie = { class: "pa-search-bar__wrapper" }, ce = { class: "pa-search-bar__input-cell" }, ue = ["id", "aria-expanded", "aria-activedescendant", "placeholder", "disabled"], de = ["aria-label"], fe = ["disabled"], be = { class: "pa-search-bar__button-label" }, pe = ["id", "aria-selected", "aria-disabled", "onClick"], ve = { class: "pa-search-bar__option-label" }, he = {
+const re = ["for"], ce = { class: "pa-search-bar__wrapper" }, ue = { class: "pa-search-bar__input-cell" }, de = ["id", "aria-expanded", "aria-activedescendant", "placeholder", "disabled"], fe = ["aria-label"], be = ["disabled"], pe = { class: "pa-search-bar__button-label" }, ve = ["id", "aria-selected", "aria-disabled", "onClick"], he = { class: "pa-search-bar__option-label" }, me = {
   key: 2,
   class: "pa-search-bar__helper"
-};
-let me = 0;
-function _e() {
-  return `pa-search-bar-${++me}`;
-}
-const xe = /* @__PURE__ */ Z({
+}, ye = /* @__PURE__ */ Z({
   __name: "PaSearchBar",
-  props: /* @__PURE__ */ H({
+  props: /* @__PURE__ */ K({
     label: {},
     placeholder: {},
     helperText: {},
@@ -24,34 +19,34 @@ const xe = /* @__PURE__ */ Z({
     value: { default: "" },
     valueModifiers: {}
   }),
-  emits: /* @__PURE__ */ H(["search", "clear", "select"], ["update:value"]),
-  setup(o, { emit: K }) {
-    const t = o, _ = K, i = ee(o, "value"), D = _e(), $ = h(() => t.id ?? `${D}__input`), L = `${D}__listbox`, V = h(
+  emits: /* @__PURE__ */ K(["search", "clear", "select"], ["update:value"]),
+  setup(o, { emit: P }) {
+    const t = o, _ = P, r = ee(o, "value"), D = `pa-search-bar-${ae()}`, $ = h(() => t.id ?? `${D}__input`), L = `${D}__listbox`, V = h(
       () => (t.options ?? []).map((e, a) => `${D}__option-${a}`)
-    ), k = x(null), T = x([]), s = x(!1), n = x(-1), B = h(
+    ), k = w(null), T = w([]), s = w(!1), n = w(-1), C = h(
       () => Array.isArray(t.options) && t.options.length > 0
-    ), j = h(() => i.value.length > 0 && !t.disabled), q = h(
+    ), j = h(() => r.value.length > 0 && !t.disabled), q = h(
       () => s.value && n.value >= 0 ? V.value[n.value] : void 0
     );
     let b = null, p = null;
-    function C() {
+    function M() {
       b && (clearTimeout(b), b = null);
     }
     function y() {
       p && (clearTimeout(p), p = null);
     }
-    function M() {
-      t.disabled || !B.value || (s.value = !0);
+    function B() {
+      t.disabled || !C.value || (s.value = !0);
     }
     function v() {
       s.value = !1, n.value = -1;
     }
     function O() {
       var e;
-      t.disabled || (C(), _("search", i.value), (e = k.value) == null || e.blur());
+      t.disabled || (M(), _("search", r.value), (e = k.value) == null || e.blur());
     }
     function G() {
-      y(), M();
+      y(), B();
     }
     function J() {
       y(), p = setTimeout(() => {
@@ -59,7 +54,7 @@ const xe = /* @__PURE__ */ Z({
       }, 150);
     }
     function Q() {
-      t.disabled || (i.value = "", _("clear"), E(() => {
+      t.disabled || (r.value = "", _("clear"), E(() => {
         var e;
         return (e = k.value) == null ? void 0 : e.focus();
       }));
@@ -68,19 +63,19 @@ const xe = /* @__PURE__ */ Z({
       e.preventDefault(), y();
     }
     function R(e) {
-      t.disabled || e.disabled || (i.value = e.value, _("select", e), v(), E(() => {
+      t.disabled || e.disabled || (r.value = e.value, _("select", e), v(), E(() => {
         var a;
         return (a = k.value) == null ? void 0 : a.focus();
       }));
     }
     function z(e, a) {
-      const l = t.options ?? [], r = l.length;
-      if (r === 0) return -1;
+      const l = t.options ?? [], i = l.length;
+      if (i === 0) return -1;
       let u = e;
-      for (let S = 0; S < r; S++) {
-        u = (u + a + r) % r;
-        const U = l[u];
-        if (U && !U.disabled) return u;
+      for (let F = 0; F < i; F++) {
+        u = (u + a + i) % i;
+        const S = l[u];
+        if (S && !S.disabled) return u;
       }
       return -1;
     }
@@ -104,12 +99,12 @@ const xe = /* @__PURE__ */ Z({
       if (!t.disabled)
         switch (e.key) {
           case "ArrowDown": {
-            e.preventDefault(), s.value ? n.value = z(n.value, 1) : B.value && (M(), n.value = A());
+            e.preventDefault(), s.value ? n.value = z(n.value, 1) : C.value && (B(), n.value = A());
             break;
           }
           case "ArrowUp": {
             if (e.preventDefault(), !s.value)
-              B.value && (M(), n.value = N());
+              C.value && (B(), n.value = N());
             else {
               const a = n.value < 0 ? 0 : n.value;
               n.value = z(a, -1);
@@ -143,12 +138,12 @@ const xe = /* @__PURE__ */ Z({
     function Y(e, a) {
       e && (T.value[a] = e);
     }
-    return w(n, async (e) => {
+    return x(n, async (e) => {
       if (e < 0) return;
       await E();
       const a = T.value[e];
       a && typeof a.scrollIntoView == "function" && a.scrollIntoView({ block: "nearest" });
-    }), w(
+    }), x(
       () => {
         var e;
         return ((e = t.options) == null ? void 0 : e.length) ?? 0;
@@ -156,19 +151,19 @@ const xe = /* @__PURE__ */ Z({
       (e) => {
         T.value.length = e, e === 0 ? v() : n.value >= e && (n.value = -1);
       }
-    ), w(
+    ), x(
       () => t.disabled,
       (e) => {
         e && v();
       }
-    ), w(i, () => {
-      t.disabled || (C(), t.debounceMs > 0 && (b = setTimeout(() => {
-        _("search", i.value), b = null;
+    ), x(r, () => {
+      t.disabled || (M(), t.debounceMs > 0 && (b = setTimeout(() => {
+        _("search", r.value), b = null;
       }, t.debounceMs)));
-    }), ae(() => {
-      C(), y();
+    }), le(() => {
+      M(), y();
     }), (e, a) => (c(), d("div", {
-      class: F([
+      class: U([
         "pa-search-bar",
         {
           "pa-search-bar--disabled": o.disabled,
@@ -181,13 +176,13 @@ const xe = /* @__PURE__ */ Z({
         for: $.value,
         class: "pa-search-bar__label"
       }, g(o.label), 9, re)) : m("", !0),
-      f("div", ie, [
-        f("div", ce, [
-          le(f("input", {
+      f("div", ce, [
+        f("div", ue, [
+          te(f("input", {
             id: $.value,
             ref_key: "inputRef",
             ref: k,
-            "onUpdate:modelValue": a[0] || (a[0] = (l) => i.value = l),
+            "onUpdate:modelValue": a[0] || (a[0] = (l) => r.value = l),
             type: "search",
             autocomplete: "off",
             class: "pa-search-bar__input",
@@ -201,8 +196,8 @@ const xe = /* @__PURE__ */ Z({
             onKeydown: X,
             onFocus: G,
             onBlur: J
-          }, null, 40, ue), [
-            [te, i.value]
+          }, null, 40, de), [
+            [ne, r.value]
           ]),
           j.value ? (c(), d("button", {
             key: 0,
@@ -211,11 +206,11 @@ const xe = /* @__PURE__ */ Z({
             "aria-label": o.clearLabel,
             onClick: Q
           }, [
-            P(I, {
+            H(I, {
               name: "x",
               size: "sm"
             })
-          ], 8, de)) : m("", !0)
+          ], 8, fe)) : m("", !0)
         ]),
         f("button", {
           type: "button",
@@ -223,12 +218,12 @@ const xe = /* @__PURE__ */ Z({
           disabled: o.disabled,
           onClick: O
         }, [
-          f("span", be, g(o.searchLabel), 1),
-          P(I, {
+          f("span", pe, g(o.searchLabel), 1),
+          H(I, {
             name: "magnifying-glass",
             size: "sm"
           })
-        ], 8, fe)
+        ], 8, be)
       ]),
       s.value ? (c(), d("ul", {
         key: 1,
@@ -236,36 +231,35 @@ const xe = /* @__PURE__ */ Z({
         role: "listbox",
         class: "pa-search-bar__listbox"
       }, [
-        (c(!0), d(ne, null, oe(o.options, (l, r) => (c(), d("li", {
-          key: `option-${r}`,
+        (c(!0), d(oe, null, se(o.options, (l, i) => (c(), d("li", {
+          key: `option-${i}`,
           ref_for: !0,
-          ref: (u) => Y(u, r),
-          id: V.value[r],
+          ref: (u) => Y(u, i),
+          id: V.value[i],
           role: "option",
-          "aria-selected": r === n.value ? "true" : "false",
+          "aria-selected": i === n.value ? "true" : "false",
           "aria-disabled": l.disabled ? "true" : void 0,
-          class: F([
+          class: U([
             "pa-search-bar__option",
             { "pa-search-bar__option--disabled": l.disabled }
           ]),
           onMousedown: W,
           onClick: (u) => R(l)
         }, [
-          f("span", ve, g(l.value), 1),
-          r === n.value && !l.disabled ? (c(), se(I, {
+          f("span", he, g(l.value), 1),
+          i === n.value && !l.disabled ? (c(), ie(I, {
             key: 0,
             name: "check",
             size: "sm",
             class: "pa-search-bar__option-check"
           })) : m("", !0)
-        ], 42, pe))), 128))
+        ], 42, ve))), 128))
       ])) : m("", !0),
-      o.helperText ? (c(), d("p", he, g(o.helperText), 1)) : m("", !0)
+      o.helperText ? (c(), d("p", me, g(o.helperText), 1)) : m("", !0)
     ], 2));
   }
 });
 export {
-  xe as default,
-  _e as nextPaSearchBarId
+  ye as default
 };
 //# sourceMappingURL=PaSearchBar.vue2.js.map

package/dist/components/PaSearchBar/PaSearchBar.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaSearchBar.vue2.js","sources":["../../../src/components/PaSearchBar/PaSearchBar.vue"],"sourcesContent":["<script lang=\"ts\">\nlet searchBarUid = 0\nexport function nextPaSearchBarId() {\n  return `pa-search-bar-${++searchBarUid}`\n}\n\nexport interface PaSearchBarOption {\n  value: string\n  disabled?: boolean\n}\n\nexport interface PaSearchBarProps {\n  label?: string\n  placeholder?: string\n  helperText?: string\n  disabled?: boolean\n  id?: string\n  searchLabel?: string\n  clearLabel?: string\n  debounceMs?: number\n  options?: PaSearchBarOption[]\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'\nimport PaIcon from '../PaIcon/PaIcon.vue'\n\nconst props = withDefaults(defineProps<PaSearchBarProps>(), {\n  disabled: false,\n  searchLabel: 'Ricerca',\n  clearLabel: 'Cancella ricerca',\n  debounceMs: 0,\n})\n\nconst emit = defineEmits<{\n  search: [value: string]\n  clear: []\n  select: [option: PaSearchBarOption]\n}>()\n\nconst model = defineModel<string>('value', { default: '' })\n\nconst baseId = nextPaSearchBarId()\nconst inputId = computed(() => props.id ?? `${baseId}__input`)\nconst listboxId = `${baseId}__listbox`\nconst optionIds = computed(() =>\n  (props.options ?? []).map((_, i) => `${baseId}__option-${i}`),\n)\n\nconst inputRef = ref<HTMLInputElement | null>(null)\nconst optionRefs = ref<HTMLLIElement[]>([])\nconst dropdownOpen = ref(false)\nconst activeIndex = ref(-1)\n\nconst hasOptions = computed(\n  () => Array.isArray(props.options) && props.options.length > 0,\n)\n\nconst showClear = computed(() => model.value.length > 0 && !props.disabled)\n\nconst activeDescendant = computed(() =>\n  dropdownOpen.value && activeIndex.value >= 0\n    ? optionIds.value[activeIndex.value]\n    : undefined,\n)\n\nlet debounceTimer: ReturnType<typeof setTimeout> | null = null\nlet blurTimer: ReturnType<typeof setTimeout> | null = null\n\nfunction clearDebounce() {\n  if (debounceTimer) {\n    clearTimeout(debounceTimer)\n    debounceTimer = null\n  }\n}\n\nfunction clearBlurTimer() {\n  if (blurTimer) {\n    clearTimeout(blurTimer)\n    blurTimer = null\n  }\n}\n\nfunction openDropdown() {\n  if (props.disabled || !hasOptions.value) return\n  dropdownOpen.value = true\n}\n\nfunction closeDropdown() {\n  dropdownOpen.value = false\n  activeIndex.value = -1\n}\n\nfunction triggerSearch() {\n  if (props.disabled) return\n  clearDebounce()\n  emit('search', model.value)\n  inputRef.value?.blur()\n}\n\nfunction onFocus() {\n  clearBlurTimer()\n  openDropdown()\n}\n\nfunction onBlur() {\n  clearBlurTimer()\n  blurTimer = setTimeout(() => {\n    closeDropdown()\n    blurTimer = null\n  }, 150)\n}\n\nfunction onClear() {\n  if (props.disabled) return\n  model.value = ''\n  emit('clear')\n  nextTick(() => inputRef.value?.focus())\n}\n\nfunction onOptionMousedown(event: MouseEvent) {\n  event.preventDefault()\n  clearBlurTimer()\n}\n\nfunction selectOption(option: PaSearchBarOption) {\n  if (props.disabled || option.disabled) return\n  model.value = option.value\n  emit('select', option)\n  closeDropdown()\n  nextTick(() => inputRef.value?.focus())\n}\n\nfunction findNextEnabled(from: number, dir: 1 | -1): number {\n  const opts = props.options ?? []\n  const n = opts.length\n  if (n === 0) return -1\n  let i = from\n  for (let step = 0; step < n; step++) {\n    i = (i + dir + n) % n\n    const opt = opts[i]\n    if (opt && !opt.disabled) return i\n  }\n  return -1\n}\n\nfunction findFirstEnabled(): number {\n  const opts = props.options ?? []\n  for (let i = 0; i < opts.length; i++) {\n    const opt = opts[i]\n    if (opt && !opt.disabled) return i\n  }\n  return -1\n}\n\nfunction findLastEnabled(): number {\n  const opts = props.options ?? []\n  for (let i = opts.length - 1; i >= 0; i--) {\n    const opt = opts[i]\n    if (opt && !opt.disabled) return i\n  }\n  return -1\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n  if (props.disabled) return\n  switch (event.key) {\n    case 'ArrowDown': {\n      event.preventDefault()\n      if (!dropdownOpen.value) {\n        if (hasOptions.value) {\n          openDropdown()\n          activeIndex.value = findFirstEnabled()\n        }\n      } else {\n        activeIndex.value = findNextEnabled(activeIndex.value, 1)\n      }\n      break\n    }\n    case 'ArrowUp': {\n      event.preventDefault()\n      if (!dropdownOpen.value) {\n        if (hasOptions.value) {\n          openDropdown()\n          activeIndex.value = findLastEnabled()\n        }\n      } else {\n        const from = activeIndex.value < 0 ? 0 : activeIndex.value\n        activeIndex.value = findNextEnabled(from, -1)\n      }\n      break\n    }\n    case 'Home': {\n      if (dropdownOpen.value) {\n        event.preventDefault()\n        activeIndex.value = findFirstEnabled()\n      }\n      break\n    }\n    case 'End': {\n      if (dropdownOpen.value) {\n        event.preventDefault()\n        activeIndex.value = findLastEnabled()\n      }\n      break\n    }\n    case 'Enter': {\n      event.preventDefault()\n      const opts = props.options ?? []\n      const opt = activeIndex.value >= 0 ? opts[activeIndex.value] : undefined\n      if (dropdownOpen.value && opt && !opt.disabled) {\n        selectOption(opt)\n        return\n      }\n      triggerSearch()\n      break\n    }\n    case 'Escape': {\n      if (dropdownOpen.value) {\n        event.preventDefault()\n        closeDropdown()\n      }\n      break\n    }\n  }\n}\n\nfunction setOptionRef(el: Element | null, i: number) {\n  if (el) optionRefs.value[i] = el as HTMLLIElement\n}\n\nwatch(activeIndex, async (i) => {\n  if (i < 0) return\n  await nextTick()\n  const el = optionRefs.value[i]\n  if (el && typeof el.scrollIntoView === 'function') {\n    el.scrollIntoView({ block: 'nearest' })\n  }\n})\n\nwatch(\n  () => props.options?.length ?? 0,\n  (n) => {\n    optionRefs.value.length = n\n    if (n === 0) closeDropdown()\n    else if (activeIndex.value >= n) activeIndex.value = -1\n  },\n)\n\nwatch(\n  () => props.disabled,\n  (d) => {\n    if (d) closeDropdown()\n  },\n)\n\nwatch(model, () => {\n  if (props.disabled) return\n  clearDebounce()\n  if (props.debounceMs > 0) {\n    debounceTimer = setTimeout(() => {\n      emit('search', model.value)\n      debounceTimer = null\n    }, props.debounceMs)\n  }\n})\n\nonBeforeUnmount(() => {\n  clearDebounce()\n  clearBlurTimer()\n})\n</script>\n\n<template>\n  <div\n    :class=\"[\n      'pa-search-bar',\n      {\n        'pa-search-bar--disabled': disabled,\n        'pa-search-bar--open': dropdownOpen,\n      },\n    ]\"\n  >\n    <label v-if=\"label\" :for=\"inputId\" class=\"pa-search-bar__label\">\n      {{ label }}\n    </label>\n    <div class=\"pa-search-bar__wrapper\">\n      <div class=\"pa-search-bar__input-cell\">\n        <input\n          :id=\"inputId\"\n          ref=\"inputRef\"\n          v-model=\"model\"\n          type=\"search\"\n          autocomplete=\"off\"\n          class=\"pa-search-bar__input\"\n          role=\"combobox\"\n          aria-autocomplete=\"list\"\n          :aria-controls=\"listboxId\"\n          :aria-expanded=\"dropdownOpen\"\n          :aria-activedescendant=\"activeDescendant\"\n          :placeholder=\"placeholder\"\n          :disabled=\"disabled\"\n          @keydown=\"onKeydown\"\n          @focus=\"onFocus\"\n          @blur=\"onBlur\"\n        />\n        <button\n          v-if=\"showClear\"\n          type=\"button\"\n          class=\"pa-search-bar__clear\"\n          :aria-label=\"clearLabel\"\n          @click=\"onClear\"\n        >\n          <PaIcon name=\"x\" size=\"sm\" />\n        </button>\n      </div>\n      <button\n        type=\"button\"\n        class=\"pa-search-bar__button\"\n        :disabled=\"disabled\"\n        @click=\"triggerSearch\"\n      >\n        <span class=\"pa-search-bar__button-label\">{{ searchLabel }}</span>\n        <PaIcon name=\"magnifying-glass\" size=\"sm\" />\n      </button>\n    </div>\n    <ul\n      v-if=\"dropdownOpen\"\n      :id=\"listboxId\"\n      role=\"listbox\"\n      class=\"pa-search-bar__listbox\"\n    >\n      <li\n        v-for=\"(opt, i) in options\"\n        :key=\"`option-${i}`\"\n        :ref=\"(el) => setOptionRef(el as Element | null, i)\"\n        :id=\"optionIds[i]\"\n        role=\"option\"\n        :aria-selected=\"i === activeIndex ? 'true' : 'false'\"\n        :aria-disabled=\"opt.disabled ? 'true' : undefined\"\n        :class=\"[\n          'pa-search-bar__option',\n          { 'pa-search-bar__option--disabled': opt.disabled },\n        ]\"\n        @mousedown=\"onOptionMousedown\"\n        @click=\"selectOption(opt)\"\n      >\n        <span class=\"pa-search-bar__option-label\">{{ opt.value }}</span>\n        <PaIcon\n          v-if=\"i === activeIndex && !opt.disabled\"\n          name=\"check\"\n          size=\"sm\"\n          class=\"pa-search-bar__option-check\"\n        />\n      </li>\n    </ul>\n    <p v-if=\"helperText\" class=\"pa-search-bar__helper\">{{ helperText }}</p>\n  </div>\n</template>\n\n<style scoped>\n.pa-search-bar {\n  display: flex;\n  flex-direction: column;\n  font-family: var(--pa-font-family-base);\n  container-type: inline-size;\n}\n\n.pa-search-bar__label {\n  font-size: var(--pa-font-label-sm-size);\n  line-height: var(--pa-font-label-sm-line-height);\n  font-weight: var(--pa-font-label-sm-weight);\n  color: var(--pa-color-text-secondary-gray);\n  padding-bottom: var(--pa-space-xs);\n}\n\n.pa-search-bar__wrapper {\n  display: flex;\n  align-items: stretch;\n  box-sizing: border-box;\n  background: var(--pa-color-bg-white);\n  border: var(--pa-border-xs) solid var(--pa-color-bg-secondary-light-50);\n  border-radius: 9px;\n  overflow: hidden;\n  transition: border-color 120ms ease, box-shadow 120ms ease,\n    border-radius 120ms ease;\n}\n\n.pa-search-bar__wrapper:hover {\n  border-color: var(--pa-color-neutral-gray);\n}\n\n.pa-search-bar__wrapper:focus-within {\n  border-color: var(--pa-color-primary);\n  box-shadow: 0 0 0 2px var(--pa-color-primary-focus-border);\n}\n\n.pa-search-bar--open .pa-search-bar__wrapper {\n  border-bottom-left-radius: 0;\n  border-bottom-right-radius: 0;\n}\n\n.pa-search-bar__input-cell {\n  flex: 1 1 auto;\n  min-width: 0;\n  display: flex;\n  align-items: center;\n  gap: var(--pa-space-xs);\n  padding-right: var(--pa-space-sm);\n}\n\n.pa-search-bar__input {\n  flex: 1 1 auto;\n  min-width: 0;\n  margin: 0;\n  padding: 12px var(--pa-space-sm);\n  background: transparent;\n  border: none;\n  outline: none;\n  color: var(--pa-color-text-secondary-gray);\n  font-family: inherit;\n  font-size: var(--pa-font-body-size);\n  line-height: var(--pa-font-body-line-height);\n  font-weight: var(--pa-font-body-weight);\n}\n\n.pa-search-bar__input::placeholder {\n  color: var(--pa-color-text-disabled-gray);\n}\n\n.pa-search-bar__input::-webkit-search-decoration,\n.pa-search-bar__input::-webkit-search-cancel-button,\n.pa-search-bar__input::-webkit-search-results-button,\n.pa-search-bar__input::-webkit-search-results-decoration {\n  appearance: none;\n  -webkit-appearance: none;\n}\n\n.pa-search-bar__clear {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex: 0 0 auto;\n  width: 24px;\n  height: 24px;\n  margin: 0;\n  padding: 0;\n  background: transparent;\n  border: none;\n  border-radius: var(--pa-radius-smooth);\n  color: var(--pa-color-text-secondary-gray);\n  cursor: pointer;\n}\n\n.pa-search-bar__clear:hover {\n  color: var(--pa-color-neutral-charcoal);\n}\n\n.pa-search-bar__clear:focus-visible {\n  outline: 2px solid var(--pa-color-primary-focus-border);\n  outline-offset: 1px;\n}\n\n.pa-search-bar__button {\n  flex: 0 0 auto;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--pa-space-xs);\n  margin: 0;\n  padding: 12px var(--pa-space-2xl);\n  background: var(--pa-color-primary);\n  border: none;\n  border-radius: 0;\n  color: var(--pa-color-text-white);\n  font-family: inherit;\n  font-size: var(--pa-font-label-sm-size);\n  line-height: var(--pa-font-label-sm-line-height);\n  font-weight: var(--pa-font-label-sm-weight);\n  cursor: pointer;\n  transition: background-color 120ms ease;\n}\n\n.pa-search-bar__button:hover {\n  background: var(--pa-color-primary-hover);\n}\n\n.pa-search-bar__button:active {\n  background: var(--pa-color-primary-pressed);\n}\n\n.pa-search-bar__button:focus-visible {\n  outline: 2px solid var(--pa-color-text-white);\n  outline-offset: -4px;\n}\n\n.pa-search-bar__listbox {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  background: var(--pa-color-bg-white);\n  max-height: 320px;\n  overflow-y: auto;\n}\n\n.pa-search-bar__option {\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--pa-space-xs);\n  padding: var(--pa-space-sm);\n  background: var(--pa-color-bg-white);\n  border: var(--pa-border-xs) solid var(--pa-color-bg-secondary-light-50);\n  margin-bottom: -1px;\n  color: var(--pa-color-text-secondary-gray);\n  font-size: var(--pa-font-body-size);\n  line-height: var(--pa-font-body-line-height);\n  font-weight: var(--pa-font-body-weight);\n  cursor: pointer;\n  user-select: none;\n  transition: background-color 80ms ease, color 80ms ease,\n    border-color 80ms ease;\n}\n\n.pa-search-bar__option:last-child {\n  margin-bottom: 0;\n  border-bottom-left-radius: var(--pa-radius-smooth);\n  border-bottom-right-radius: var(--pa-radius-smooth);\n}\n\n.pa-search-bar__option:hover {\n  background: var(--pa-color-primary-hover);\n  color: var(--pa-color-text-white);\n}\n\n.pa-search-bar__option:active {\n  background: var(--pa-color-primary-pressed);\n  color: var(--pa-color-text-white);\n}\n\n.pa-search-bar__option:focus-visible {\n  outline: none;\n  border-color: var(--pa-color-primary);\n}\n\n.pa-search-bar__option[aria-selected='true'] {\n  background: var(--pa-color-primary);\n  color: var(--pa-color-text-white);\n}\n\n.pa-search-bar__option--disabled,\n.pa-search-bar__option--disabled:hover,\n.pa-search-bar__option--disabled:active {\n  background: var(--pa-color-bg-disabled-gray);\n  color: var(--pa-color-text-disabled-gray);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.pa-search-bar__option-check {\n  flex: 0 0 auto;\n}\n\n.pa-search-bar__helper {\n  margin: 0;\n  padding-top: var(--pa-space-xs);\n  font-size: var(--pa-font-label-helper-size);\n  line-height: var(--pa-font-label-helper-line-height);\n  font-weight: var(--pa-font-label-helper-weight);\n  color: var(--pa-color-text-secondary-gray);\n}\n\n.pa-search-bar--disabled .pa-search-bar__wrapper,\n.pa-search-bar--disabled .pa-search-bar__wrapper:hover {\n  background: var(--pa-color-bg-secondary-light-40);\n  border-color: var(--pa-color-bg-secondary-light-50);\n}\n\n.pa-search-bar--disabled .pa-search-bar__input {\n  color: var(--pa-color-text-disabled-gray);\n  cursor: not-allowed;\n}\n\n.pa-search-bar--disabled .pa-search-bar__button {\n  background: var(--pa-color-bg-secondary-light-40);\n  color: var(--pa-color-text-disabled-gray);\n  cursor: not-allowed;\n}\n\n.pa-search-bar--disabled .pa-search-bar__button:hover {\n  background: var(--pa-color-bg-secondary-light-40);\n}\n\n@container (max-width: 600px) {\n  .pa-search-bar__wrapper {\n    flex-direction: column;\n    gap: var(--pa-space-xs);\n    background: transparent;\n    border: none;\n    border-radius: 0;\n    overflow: visible;\n  }\n\n  .pa-search-bar__wrapper:hover,\n  .pa-search-bar__wrapper:focus-within {\n    border-color: transparent;\n    box-shadow: none;\n  }\n\n  .pa-search-bar--open .pa-search-bar__wrapper {\n    border-radius: 0;\n  }\n\n  .pa-search-bar__input-cell {\n    background: var(--pa-color-bg-white);\n    border: var(--pa-border-xs) solid var(--pa-color-bg-secondary-light-50);\n    border-radius: var(--pa-radius-smooth);\n    transition: border-color 120ms ease, box-shadow 120ms ease;\n  }\n\n  .pa-search-bar__input-cell:focus-within {\n    border-color: var(--pa-color-primary);\n    box-shadow: 0 0 0 2px var(--pa-color-primary-focus-border);\n  }\n\n  .pa-search-bar--open .pa-search-bar__input-cell {\n    border-bottom-left-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n\n  .pa-search-bar__button {\n    width: 100%;\n    height: 52px;\n    border-radius: var(--pa-radius-smooth);\n  }\n\n  .pa-search-bar--disabled .pa-search-bar__input-cell {\n    background: var(--pa-color-bg-secondary-light-40);\n  }\n}\n</style>\n"],"names":["searchBarUid","nextPaSearchBarId","props","__props","emit","__emit","model","_useModel","baseId","inputId","computed","listboxId","optionIds","_","i","inputRef","ref","optionRefs","dropdownOpen","activeIndex","hasOptions","showClear","activeDescendant","debounceTimer","blurTimer","clearDebounce","clearBlurTimer","openDropdown","closeDropdown","triggerSearch","_a","onFocus","onBlur","onClear","nextTick","onOptionMousedown","event","selectOption","option","findNextEnabled","from","dir","opts","n","step","opt","findFirstEnabled","findLastEnabled","onKeydown","setOptionRef","el","watch","d","onBeforeUnmount","_createElementBlock","_normalizeClass","_hoisted_1","_createElementVNode","_hoisted_2","_hoisted_3","$event","_createVNode","PaIcon","_hoisted_7","_toDisplayString","_openBlock","_Fragment","_renderList","_hoisted_9","_createBlock","_hoisted_10"],"mappings":"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"}
+{"version":3,"file":"PaSearchBar.vue2.js","sources":["../../../src/components/PaSearchBar/PaSearchBar.vue"],"sourcesContent":["<script lang=\"ts\">\n\nexport interface PaSearchBarOption {\n  value: string\n  disabled?: boolean\n}\n\nexport interface PaSearchBarProps {\n  label?: string\n  placeholder?: string\n  helperText?: string\n  disabled?: boolean\n  id?: string\n  searchLabel?: string\n  clearLabel?: string\n  debounceMs?: number\n  options?: PaSearchBarOption[]\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, nextTick, onBeforeUnmount, ref, useId, watch } from 'vue'\nimport PaIcon from '../PaIcon/PaIcon.vue'\n\nconst props = withDefaults(defineProps<PaSearchBarProps>(), {\n  disabled: false,\n  searchLabel: 'Ricerca',\n  clearLabel: 'Cancella ricerca',\n  debounceMs: 0,\n})\n\nconst emit = defineEmits<{\n  search: [value: string]\n  clear: []\n  select: [option: PaSearchBarOption]\n}>()\n\nconst model = defineModel<string>('value', { default: '' })\n\nconst baseId = `pa-search-bar-${useId()}`\nconst inputId = computed(() => props.id ?? `${baseId}__input`)\nconst listboxId = `${baseId}__listbox`\nconst optionIds = computed(() =>\n  (props.options ?? []).map((_, i) => `${baseId}__option-${i}`),\n)\n\nconst inputRef = ref<HTMLInputElement | null>(null)\nconst optionRefs = ref<HTMLLIElement[]>([])\nconst dropdownOpen = ref(false)\nconst activeIndex = ref(-1)\n\nconst hasOptions = computed(\n  () => Array.isArray(props.options) && props.options.length > 0,\n)\n\nconst showClear = computed(() => model.value.length > 0 && !props.disabled)\n\nconst activeDescendant = computed(() =>\n  dropdownOpen.value && activeIndex.value >= 0\n    ? optionIds.value[activeIndex.value]\n    : undefined,\n)\n\nlet debounceTimer: ReturnType<typeof setTimeout> | null = null\nlet blurTimer: ReturnType<typeof setTimeout> | null = null\n\nfunction clearDebounce() {\n  if (debounceTimer) {\n    clearTimeout(debounceTimer)\n    debounceTimer = null\n  }\n}\n\nfunction clearBlurTimer() {\n  if (blurTimer) {\n    clearTimeout(blurTimer)\n    blurTimer = null\n  }\n}\n\nfunction openDropdown() {\n  if (props.disabled || !hasOptions.value) return\n  dropdownOpen.value = true\n}\n\nfunction closeDropdown() {\n  dropdownOpen.value = false\n  activeIndex.value = -1\n}\n\nfunction triggerSearch() {\n  if (props.disabled) return\n  clearDebounce()\n  emit('search', model.value)\n  inputRef.value?.blur()\n}\n\nfunction onFocus() {\n  clearBlurTimer()\n  openDropdown()\n}\n\nfunction onBlur() {\n  clearBlurTimer()\n  blurTimer = setTimeout(() => {\n    closeDropdown()\n    blurTimer = null\n  }, 150)\n}\n\nfunction onClear() {\n  if (props.disabled) return\n  model.value = ''\n  emit('clear')\n  nextTick(() => inputRef.value?.focus())\n}\n\nfunction onOptionMousedown(event: MouseEvent) {\n  event.preventDefault()\n  clearBlurTimer()\n}\n\nfunction selectOption(option: PaSearchBarOption) {\n  if (props.disabled || option.disabled) return\n  model.value = option.value\n  emit('select', option)\n  closeDropdown()\n  nextTick(() => inputRef.value?.focus())\n}\n\nfunction findNextEnabled(from: number, dir: 1 | -1): number {\n  const opts = props.options ?? []\n  const n = opts.length\n  if (n === 0) return -1\n  let i = from\n  for (let step = 0; step < n; step++) {\n    i = (i + dir + n) % n\n    const opt = opts[i]\n    if (opt && !opt.disabled) return i\n  }\n  return -1\n}\n\nfunction findFirstEnabled(): number {\n  const opts = props.options ?? []\n  for (let i = 0; i < opts.length; i++) {\n    const opt = opts[i]\n    if (opt && !opt.disabled) return i\n  }\n  return -1\n}\n\nfunction findLastEnabled(): number {\n  const opts = props.options ?? []\n  for (let i = opts.length - 1; i >= 0; i--) {\n    const opt = opts[i]\n    if (opt && !opt.disabled) return i\n  }\n  return -1\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n  if (props.disabled) return\n  switch (event.key) {\n    case 'ArrowDown': {\n      event.preventDefault()\n      if (!dropdownOpen.value) {\n        if (hasOptions.value) {\n          openDropdown()\n          activeIndex.value = findFirstEnabled()\n        }\n      } else {\n        activeIndex.value = findNextEnabled(activeIndex.value, 1)\n      }\n      break\n    }\n    case 'ArrowUp': {\n      event.preventDefault()\n      if (!dropdownOpen.value) {\n        if (hasOptions.value) {\n          openDropdown()\n          activeIndex.value = findLastEnabled()\n        }\n      } else {\n        const from = activeIndex.value < 0 ? 0 : activeIndex.value\n        activeIndex.value = findNextEnabled(from, -1)\n      }\n      break\n    }\n    case 'Home': {\n      if (dropdownOpen.value) {\n        event.preventDefault()\n        activeIndex.value = findFirstEnabled()\n      }\n      break\n    }\n    case 'End': {\n      if (dropdownOpen.value) {\n        event.preventDefault()\n        activeIndex.value = findLastEnabled()\n      }\n      break\n    }\n    case 'Enter': {\n      event.preventDefault()\n      const opts = props.options ?? []\n      const opt = activeIndex.value >= 0 ? opts[activeIndex.value] : undefined\n      if (dropdownOpen.value && opt && !opt.disabled) {\n        selectOption(opt)\n        return\n      }\n      triggerSearch()\n      break\n    }\n    case 'Escape': {\n      if (dropdownOpen.value) {\n        event.preventDefault()\n        closeDropdown()\n      }\n      break\n    }\n  }\n}\n\nfunction setOptionRef(el: Element | null, i: number) {\n  if (el) optionRefs.value[i] = el as HTMLLIElement\n}\n\nwatch(activeIndex, async (i) => {\n  if (i < 0) return\n  await nextTick()\n  const el = optionRefs.value[i]\n  if (el && typeof el.scrollIntoView === 'function') {\n    el.scrollIntoView({ block: 'nearest' })\n  }\n})\n\nwatch(\n  () => props.options?.length ?? 0,\n  (n) => {\n    optionRefs.value.length = n\n    if (n === 0) closeDropdown()\n    else if (activeIndex.value >= n) activeIndex.value = -1\n  },\n)\n\nwatch(\n  () => props.disabled,\n  (d) => {\n    if (d) closeDropdown()\n  },\n)\n\nwatch(model, () => {\n  if (props.disabled) return\n  clearDebounce()\n  if (props.debounceMs > 0) {\n    debounceTimer = setTimeout(() => {\n      emit('search', model.value)\n      debounceTimer = null\n    }, props.debounceMs)\n  }\n})\n\nonBeforeUnmount(() => {\n  clearDebounce()\n  clearBlurTimer()\n})\n</script>\n\n<template>\n  <div\n    :class=\"[\n      'pa-search-bar',\n      {\n        'pa-search-bar--disabled': disabled,\n        'pa-search-bar--open': dropdownOpen,\n      },\n    ]\"\n  >\n    <label v-if=\"label\" :for=\"inputId\" class=\"pa-search-bar__label\">\n      {{ label }}\n    </label>\n    <div class=\"pa-search-bar__wrapper\">\n      <div class=\"pa-search-bar__input-cell\">\n        <input\n          :id=\"inputId\"\n          ref=\"inputRef\"\n          v-model=\"model\"\n          type=\"search\"\n          autocomplete=\"off\"\n          class=\"pa-search-bar__input\"\n          role=\"combobox\"\n          aria-autocomplete=\"list\"\n          :aria-controls=\"listboxId\"\n          :aria-expanded=\"dropdownOpen\"\n          :aria-activedescendant=\"activeDescendant\"\n          :placeholder=\"placeholder\"\n          :disabled=\"disabled\"\n          @keydown=\"onKeydown\"\n          @focus=\"onFocus\"\n          @blur=\"onBlur\"\n        />\n        <button\n          v-if=\"showClear\"\n          type=\"button\"\n          class=\"pa-search-bar__clear\"\n          :aria-label=\"clearLabel\"\n          @click=\"onClear\"\n        >\n          <PaIcon name=\"x\" size=\"sm\" />\n        </button>\n      </div>\n      <button\n        type=\"button\"\n        class=\"pa-search-bar__button\"\n        :disabled=\"disabled\"\n        @click=\"triggerSearch\"\n      >\n        <span class=\"pa-search-bar__button-label\">{{ searchLabel }}</span>\n        <PaIcon name=\"magnifying-glass\" size=\"sm\" />\n      </button>\n    </div>\n    <ul\n      v-if=\"dropdownOpen\"\n      :id=\"listboxId\"\n      role=\"listbox\"\n      class=\"pa-search-bar__listbox\"\n    >\n      <li\n        v-for=\"(opt, i) in options\"\n        :key=\"`option-${i}`\"\n        :ref=\"(el) => setOptionRef(el as Element | null, i)\"\n        :id=\"optionIds[i]\"\n        role=\"option\"\n        :aria-selected=\"i === activeIndex ? 'true' : 'false'\"\n        :aria-disabled=\"opt.disabled ? 'true' : undefined\"\n        :class=\"[\n          'pa-search-bar__option',\n          { 'pa-search-bar__option--disabled': opt.disabled },\n        ]\"\n        @mousedown=\"onOptionMousedown\"\n        @click=\"selectOption(opt)\"\n      >\n        <span class=\"pa-search-bar__option-label\">{{ opt.value }}</span>\n        <PaIcon\n          v-if=\"i === activeIndex && !opt.disabled\"\n          name=\"check\"\n          size=\"sm\"\n          class=\"pa-search-bar__option-check\"\n        />\n      </li>\n    </ul>\n    <p v-if=\"helperText\" class=\"pa-search-bar__helper\">{{ helperText }}</p>\n  </div>\n</template>\n\n<style scoped>\n.pa-search-bar {\n  display: flex;\n  flex-direction: column;\n  font-family: var(--pa-font-family-base);\n  container-type: inline-size;\n}\n\n.pa-search-bar__label {\n  font-size: var(--pa-font-label-sm-size);\n  line-height: var(--pa-font-label-sm-line-height);\n  font-weight: var(--pa-font-label-sm-weight);\n  color: var(--pa-color-text-secondary-gray);\n  padding-bottom: var(--pa-space-xs);\n}\n\n.pa-search-bar__wrapper {\n  display: flex;\n  align-items: stretch;\n  box-sizing: border-box;\n  background: var(--pa-color-bg-white);\n  border: var(--pa-border-xs) solid var(--pa-color-bg-secondary-light-50);\n  border-radius: 9px;\n  overflow: hidden;\n  transition: border-color 120ms ease, box-shadow 120ms ease,\n    border-radius 120ms ease;\n}\n\n.pa-search-bar__wrapper:hover {\n  border-color: var(--pa-color-neutral-gray);\n}\n\n.pa-search-bar__wrapper:focus-within {\n  border-color: var(--pa-color-primary);\n  box-shadow: 0 0 0 2px var(--pa-color-primary-focus-border);\n}\n\n.pa-search-bar--open .pa-search-bar__wrapper {\n  border-bottom-left-radius: 0;\n  border-bottom-right-radius: 0;\n}\n\n.pa-search-bar__input-cell {\n  flex: 1 1 auto;\n  min-width: 0;\n  display: flex;\n  align-items: center;\n  gap: var(--pa-space-xs);\n  padding-right: var(--pa-space-sm);\n}\n\n.pa-search-bar__input {\n  flex: 1 1 auto;\n  min-width: 0;\n  margin: 0;\n  padding: 12px var(--pa-space-sm);\n  background: transparent;\n  border: none;\n  outline: none;\n  color: var(--pa-color-text-secondary-gray);\n  font-family: inherit;\n  font-size: var(--pa-font-body-size);\n  line-height: var(--pa-font-body-line-height);\n  font-weight: var(--pa-font-body-weight);\n}\n\n.pa-search-bar__input::placeholder {\n  color: var(--pa-color-text-disabled-gray);\n}\n\n.pa-search-bar__input::-webkit-search-decoration,\n.pa-search-bar__input::-webkit-search-cancel-button,\n.pa-search-bar__input::-webkit-search-results-button,\n.pa-search-bar__input::-webkit-search-results-decoration {\n  appearance: none;\n  -webkit-appearance: none;\n}\n\n.pa-search-bar__clear {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex: 0 0 auto;\n  width: 24px;\n  height: 24px;\n  margin: 0;\n  padding: 0;\n  background: transparent;\n  border: none;\n  border-radius: var(--pa-radius-smooth);\n  color: var(--pa-color-text-secondary-gray);\n  cursor: pointer;\n}\n\n.pa-search-bar__clear:hover {\n  color: var(--pa-color-neutral-charcoal);\n}\n\n.pa-search-bar__clear:focus-visible {\n  outline: 2px solid var(--pa-color-primary-focus-border);\n  outline-offset: 1px;\n}\n\n.pa-search-bar__button {\n  flex: 0 0 auto;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--pa-space-xs);\n  margin: 0;\n  padding: 12px var(--pa-space-2xl);\n  background: var(--pa-color-primary);\n  border: none;\n  border-radius: 0;\n  color: var(--pa-color-text-white);\n  font-family: inherit;\n  font-size: var(--pa-font-label-sm-size);\n  line-height: var(--pa-font-label-sm-line-height);\n  font-weight: var(--pa-font-label-sm-weight);\n  cursor: pointer;\n  transition: background-color 120ms ease;\n}\n\n.pa-search-bar__button:hover {\n  background: var(--pa-color-primary-hover);\n}\n\n.pa-search-bar__button:active {\n  background: var(--pa-color-primary-pressed);\n}\n\n.pa-search-bar__button:focus-visible {\n  outline: 2px solid var(--pa-color-text-white);\n  outline-offset: -4px;\n}\n\n.pa-search-bar__listbox {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  background: var(--pa-color-bg-white);\n  max-height: 320px;\n  overflow-y: auto;\n}\n\n.pa-search-bar__option {\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--pa-space-xs);\n  padding: var(--pa-space-sm);\n  background: var(--pa-color-bg-white);\n  border: var(--pa-border-xs) solid var(--pa-color-bg-secondary-light-50);\n  margin-bottom: -1px;\n  color: var(--pa-color-text-secondary-gray);\n  font-size: var(--pa-font-body-size);\n  line-height: var(--pa-font-body-line-height);\n  font-weight: var(--pa-font-body-weight);\n  cursor: pointer;\n  user-select: none;\n  transition: background-color 80ms ease, color 80ms ease,\n    border-color 80ms ease;\n}\n\n.pa-search-bar__option:last-child {\n  margin-bottom: 0;\n  border-bottom-left-radius: var(--pa-radius-smooth);\n  border-bottom-right-radius: var(--pa-radius-smooth);\n}\n\n.pa-search-bar__option:hover {\n  background: var(--pa-color-primary-hover);\n  color: var(--pa-color-text-white);\n}\n\n.pa-search-bar__option:active {\n  background: var(--pa-color-primary-pressed);\n  color: var(--pa-color-text-white);\n}\n\n.pa-search-bar__option:focus-visible {\n  outline: none;\n  border-color: var(--pa-color-primary);\n}\n\n.pa-search-bar__option[aria-selected='true'] {\n  background: var(--pa-color-primary);\n  color: var(--pa-color-text-white);\n}\n\n.pa-search-bar__option--disabled,\n.pa-search-bar__option--disabled:hover,\n.pa-search-bar__option--disabled:active {\n  background: var(--pa-color-bg-disabled-gray);\n  color: var(--pa-color-text-disabled-gray);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.pa-search-bar__option-check {\n  flex: 0 0 auto;\n}\n\n.pa-search-bar__helper {\n  margin: 0;\n  padding-top: var(--pa-space-xs);\n  font-size: var(--pa-font-label-helper-size);\n  line-height: var(--pa-font-label-helper-line-height);\n  font-weight: var(--pa-font-label-helper-weight);\n  color: var(--pa-color-text-secondary-gray);\n}\n\n.pa-search-bar--disabled .pa-search-bar__wrapper,\n.pa-search-bar--disabled .pa-search-bar__wrapper:hover {\n  background: var(--pa-color-bg-secondary-light-40);\n  border-color: var(--pa-color-bg-secondary-light-50);\n}\n\n.pa-search-bar--disabled .pa-search-bar__input {\n  color: var(--pa-color-text-disabled-gray);\n  cursor: not-allowed;\n}\n\n.pa-search-bar--disabled .pa-search-bar__button {\n  background: var(--pa-color-bg-secondary-light-40);\n  color: var(--pa-color-text-disabled-gray);\n  cursor: not-allowed;\n}\n\n.pa-search-bar--disabled .pa-search-bar__button:hover {\n  background: var(--pa-color-bg-secondary-light-40);\n}\n\n@container (max-width: 600px) {\n  .pa-search-bar__wrapper {\n    flex-direction: column;\n    gap: var(--pa-space-xs);\n    background: transparent;\n    border: none;\n    border-radius: 0;\n    overflow: visible;\n  }\n\n  .pa-search-bar__wrapper:hover,\n  .pa-search-bar__wrapper:focus-within {\n    border-color: transparent;\n    box-shadow: none;\n  }\n\n  .pa-search-bar--open .pa-search-bar__wrapper {\n    border-radius: 0;\n  }\n\n  .pa-search-bar__input-cell {\n    background: var(--pa-color-bg-white);\n    border: var(--pa-border-xs) solid var(--pa-color-bg-secondary-light-50);\n    border-radius: var(--pa-radius-smooth);\n    transition: border-color 120ms ease, box-shadow 120ms ease;\n  }\n\n  .pa-search-bar__input-cell:focus-within {\n    border-color: var(--pa-color-primary);\n    box-shadow: 0 0 0 2px var(--pa-color-primary-focus-border);\n  }\n\n  .pa-search-bar--open .pa-search-bar__input-cell {\n    border-bottom-left-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n\n  .pa-search-bar__button {\n    width: 100%;\n    height: 52px;\n    border-radius: var(--pa-radius-smooth);\n  }\n\n  .pa-search-bar--disabled .pa-search-bar__input-cell {\n    background: var(--pa-color-bg-secondary-light-40);\n  }\n}\n</style>\n"],"names":["props","__props","emit","__emit","model","_useModel","baseId","useId","inputId","computed","listboxId","optionIds","_","i","inputRef","ref","optionRefs","dropdownOpen","activeIndex","hasOptions","showClear","activeDescendant","debounceTimer","blurTimer","clearDebounce","clearBlurTimer","openDropdown","closeDropdown","triggerSearch","_a","onFocus","onBlur","onClear","nextTick","onOptionMousedown","event","selectOption","option","findNextEnabled","from","dir","opts","n","step","opt","findFirstEnabled","findLastEnabled","onKeydown","setOptionRef","el","watch","d","onBeforeUnmount","_createElementBlock","_normalizeClass","_hoisted_1","_createElementVNode","_hoisted_2","_hoisted_3","$event","_createVNode","PaIcon","_hoisted_7","_toDisplayString","_openBlock","_Fragment","_renderList","_hoisted_9","_createBlock","_hoisted_10"],"mappings":"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"}

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

@@ -19,14 +19,13 @@ export interface PaSelectProps {
     readonly?: boolean;
     placeholder?: string;
 }
-export declare function nextPaSelectId(): string;
-declare const _default: import("vue").DefineComponent<PaSelectProps & {
+type __VLS_Props = PaSelectProps;
+type __VLS_PublicProps = __VLS_Props & {
     modelValue?: string;
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+};
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string) => any;
-}, string, import("vue").PublicProps, Readonly<PaSelectProps & {
-    modelValue?: string;
-}> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
     error: string | boolean;

package/dist/components/PaSelect/PaSelect.vue.js

@@ -1,10 +1,8 @@
-import t from "./PaSelect.vue2.js";
-import { nextPaSelectId as c } from "./PaSelect.vue2.js";
+import o from "./PaSelect.vue2.js";
 /* empty css              */
-import e from "../../_virtual/_plugin-vue_export-helper.js";
-const f = /* @__PURE__ */ e(t, [["__scopeId", "data-v-4228fedd"]]);
+import t from "../../_virtual/_plugin-vue_export-helper.js";
+const c = /* @__PURE__ */ t(o, [["__scopeId", "data-v-091fc6ee"]]);
 export {
-  f as default,
-  c as nextPaSelectId
+  c as default
 };
 //# sourceMappingURL=PaSelect.vue.js.map

package/dist/components/PaSelect/PaSelect.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaSelect.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}
+{"version":3,"file":"PaSelect.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/components/PaSelect/PaSelect.vue2.js

@@ -1,22 +1,17 @@
-import { defineComponent as B, useModel as V, computed as a, openBlock as t, createElementBlock as d, normalizeClass as h, createTextVNode as k, toDisplayString as s, createCommentVNode as i, createElementVNode as b, withDirectives as x, Fragment as M, renderList as S, vModelSelect as w, createVNode as z, mergeModels as I } from "vue";
-import N from "../PaIcon/PaIcon.vue.js";
-const T = ["for"], $ = {
+import { defineComponent as B, useModel as V, useId as k, computed as a, openBlock as t, createElementBlock as d, normalizeClass as h, createTextVNode as x, toDisplayString as r, createCommentVNode as i, createElementVNode as b, withDirectives as M, Fragment as S, renderList as w, vModelSelect as z, createVNode as I, mergeModels as N } from "vue";
+import T from "../PaIcon/PaIcon.vue.js";
+const $ = ["for"], C = {
   key: 0,
   class: "pa-select__required",
   "aria-hidden": "true"
-}, C = { class: "pa-select__field" }, A = ["id", "disabled", "required", "name", "autocomplete", "aria-required", "aria-invalid", "aria-describedby"], D = {
+}, A = { class: "pa-select__field" }, D = ["id", "disabled", "required", "name", "autocomplete", "aria-required", "aria-invalid", "aria-describedby"], E = {
   key: 0,
   value: "",
   disabled: "",
   hidden: ""
-}, E = ["value", "disabled"], P = ["id"];
-let F = 0;
-function L() {
-  return `pa-select-${++F}`;
-}
-const H = /* @__PURE__ */ B({
+}, F = ["value", "disabled"], L = ["id"], G = /* @__PURE__ */ B({
   __name: "PaSelect",
-  props: /* @__PURE__ */ I({
+  props: /* @__PURE__ */ N({
     options: {},
     size: { default: "sm" },
     label: {},
@@ -36,21 +31,21 @@ const H = /* @__PURE__ */ B({
   }),
   emits: ["update:modelValue"],
   setup(e) {
-    const l = e, n = V(e, "modelValue"), p = L(), c = a(() => l.id ?? p), v = a(() => `${c.value}-msg`), r = a(() => !!l.error), m = a(() => l.valid && !r.value), y = a(
+    const l = e, n = V(e, "modelValue"), p = `pa-select-${k()}`, c = a(() => l.id ?? p), v = a(() => `${c.value}-msg`), s = a(() => !!l.error), m = a(() => l.valid && !s.value), y = a(
       () => typeof l.error == "string" && l.error.length > 0 ? l.error : null
     ), g = a(
-      () => !r.value && !m.value && l.helperText ? l.helperText : null
+      () => !s.value && !m.value && l.helperText ? l.helperText : null
     ), u = a(() => y.value ?? g.value), q = a(
       () => l.placeholder !== void 0 && n.value === ""
     );
-    return (U, f) => (t(), d("div", {
+    return (P, f) => (t(), d("div", {
       class: h([
         "pa-select",
         `pa-select--${e.size}`,
         {
           "pa-select--disabled": e.disabled && !e.readonly,
           "pa-select--readonly": e.readonly,
-          "pa-select--error": r.value,
+          "pa-select--error": s.value,
           "pa-select--valid": m.value,
           "pa-select--placeholder-shown": q.value
         }
@@ -61,11 +56,11 @@ const H = /* @__PURE__ */ B({
         for: c.value,
         class: "pa-select__label"
       }, [
-        k(s(e.label), 1),
-        e.required ? (t(), d("span", $, "*")) : i("", !0)
-      ], 8, T)) : i("", !0),
-      b("div", C, [
-        x(b("select", {
+        x(r(e.label), 1),
+        e.required ? (t(), d("span", C, "*")) : i("", !0)
+      ], 8, $)) : i("", !0),
+      b("div", A, [
+        M(b("select", {
           id: c.value,
           "onUpdate:modelValue": f[0] || (f[0] = (o) => n.value = o),
           disabled: e.disabled || e.readonly,
@@ -73,20 +68,20 @@ const H = /* @__PURE__ */ B({
           name: e.name,
           autocomplete: e.autocomplete,
           "aria-required": e.required || void 0,
-          "aria-invalid": r.value || void 0,
+          "aria-invalid": s.value || void 0,
           "aria-describedby": u.value ? v.value : void 0,
           class: "pa-select__control"
         }, [
-          e.placeholder ? (t(), d("option", D, s(e.placeholder), 1)) : i("", !0),
-          (t(!0), d(M, null, S(e.options, (o) => (t(), d("option", {
+          e.placeholder ? (t(), d("option", E, r(e.placeholder), 1)) : i("", !0),
+          (t(!0), d(S, null, w(e.options, (o) => (t(), d("option", {
             key: o.value,
             value: o.value,
             disabled: o.disabled
-          }, s(o.label), 9, E))), 128))
-        ], 8, A), [
-          [w, n.value]
+          }, r(o.label), 9, F))), 128))
+        ], 8, D), [
+          [z, n.value]
         ]),
-        z(N, {
+        I(T, {
           name: "caret-up-down",
           size: "md",
           class: "pa-select__chevron"
@@ -95,13 +90,12 @@ const H = /* @__PURE__ */ B({
       u.value ? (t(), d("div", {
         key: 1,
         id: v.value,
-        class: h(["pa-select__message", { "pa-select__message--error": r.value }])
-      }, s(u.value), 11, P)) : i("", !0)
+        class: h(["pa-select__message", { "pa-select__message--error": s.value }])
+      }, r(u.value), 11, L)) : i("", !0)
     ], 2));
   }
 });
 export {
-  H as default,
-  L as nextPaSelectId
+  G as default
 };
 //# sourceMappingURL=PaSelect.vue2.js.map

package/dist/components/PaSelect/PaSelect.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaSelect.vue2.js","sources":["../../../src/components/PaSelect/PaSelect.vue"],"sourcesContent":["<script lang=\"ts\">\nlet uid = 0\nexport function nextPaSelectId() {\n  return `pa-select-${++uid}`\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport PaIcon from '../PaIcon/PaIcon.vue'\n\nexport type PaSelectSize = 'sm' | 'lg'\n\nexport interface PaSelectOption {\n  value: string\n  label: string\n  disabled?: boolean\n}\n\nexport interface PaSelectProps {\n  options: PaSelectOption[]\n  size?: PaSelectSize\n  label?: string\n  disabled?: boolean\n  id?: string\n  helperText?: string\n  error?: string | boolean\n  valid?: boolean\n  name?: string\n  autocomplete?: string\n  required?: boolean\n  readonly?: boolean\n  placeholder?: string\n}\n\nconst props = withDefaults(defineProps<PaSelectProps>(), {\n  size: 'sm',\n  disabled: false,\n  error: false,\n  valid: false,\n  required: false,\n  readonly: false,\n})\n\nconst model = defineModel<string>({ default: '' })\n\nconst generatedId = nextPaSelectId()\nconst inputId = computed(() => props.id ?? generatedId)\nconst messageId = computed(() => `${inputId.value}-msg`)\n\nconst errorActive = computed(() => Boolean(props.error))\nconst validActive = computed(() => props.valid && !errorActive.value)\n\nconst errorMessage = computed(() =>\n  typeof props.error === 'string' && props.error.length > 0 ? props.error : null,\n)\nconst helperMessage = computed(() =>\n  !errorActive.value && !validActive.value && props.helperText ? props.helperText : null,\n)\nconst message = computed(() => errorMessage.value ?? helperMessage.value)\n\nconst placeholderShown = computed(\n  () => props.placeholder !== undefined && model.value === '',\n)\n</script>\n\n<template>\n  <div\n    :class=\"[\n      'pa-select',\n      `pa-select--${size}`,\n      {\n        'pa-select--disabled': disabled && !readonly,\n        'pa-select--readonly': readonly,\n        'pa-select--error': errorActive,\n        'pa-select--valid': validActive,\n        'pa-select--placeholder-shown': placeholderShown,\n      },\n    ]\"\n  >\n    <label v-if=\"label\" :for=\"inputId\" class=\"pa-select__label\">\n      {{ label }}<span v-if=\"required\" class=\"pa-select__required\" aria-hidden=\"true\">*</span>\n    </label>\n    <div class=\"pa-select__field\">\n      <select\n        :id=\"inputId\"\n        v-model=\"model\"\n        :disabled=\"disabled || readonly\"\n        :required=\"required\"\n        :name=\"name\"\n        :autocomplete=\"autocomplete\"\n        :aria-required=\"required || undefined\"\n        :aria-invalid=\"errorActive || undefined\"\n        :aria-describedby=\"message ? messageId : undefined\"\n        class=\"pa-select__control\"\n      >\n        <option v-if=\"placeholder\" value=\"\" disabled hidden>{{ placeholder }}</option>\n        <option\n          v-for=\"opt in options\"\n          :key=\"opt.value\"\n          :value=\"opt.value\"\n          :disabled=\"opt.disabled\"\n        >\n          {{ opt.label }}\n        </option>\n      </select>\n      <PaIcon name=\"caret-up-down\" size=\"md\" class=\"pa-select__chevron\" />\n    </div>\n    <div\n      v-if=\"message\"\n      :id=\"messageId\"\n      :class=\"['pa-select__message', { 'pa-select__message--error': errorActive }]\"\n    >\n      {{ message }}\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.pa-select {\n  display: flex;\n  flex-direction: column;\n  gap: var(--pa-space-2xs);\n  font-family: var(--pa-font-family-base);\n}\n\n.pa-select__label {\n  font-size: var(--pa-font-label-sm-size);\n  line-height: var(--pa-font-label-sm-line-height);\n  font-weight: var(--pa-font-label-sm-weight);\n  color: var(--pa-color-text-secondary-gray);\n}\n\n.pa-select__field {\n  display: flex;\n  align-items: center;\n  gap: var(--pa-space-xs);\n  box-sizing: border-box;\n  background: var(--pa-color-bg-white);\n  border: var(--pa-border-xs) solid var(--pa-color-bg-secondary-light-50);\n  border-radius: var(--pa-radius-smooth);\n  transition: border-color 120ms ease, background-color 120ms ease;\n}\n\n.pa-select__field:hover {\n  border-color: var(--pa-color-neutral-gray);\n}\n\n.pa-select__field:focus-within {\n  outline: 3px solid var(--pa-color-primary-focus-border);\n  outline-offset: 0;\n  border-color: var(--pa-color-primary);\n}\n\n.pa-select__control {\n  flex: 1 1 auto;\n  min-width: 0;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  padding: 0;\n  background: transparent;\n  border: none;\n  outline: none;\n  appearance: none;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  color: var(--pa-color-text-black);\n  font-family: inherit;\n  font-size: var(--pa-font-body-size);\n  line-height: var(--pa-font-body-line-height);\n  font-weight: var(--pa-font-body-weight);\n  cursor: pointer;\n}\n\n.pa-select__chevron {\n  flex: 0 0 auto;\n  pointer-events: none;\n  color: var(--pa-color-text-secondary-gray);\n}\n\n.pa-select--sm .pa-select__field {\n  height: 44px;\n  padding: 0 var(--pa-space-sm);\n}\n\n.pa-select--lg .pa-select__field {\n  height: 60px;\n  padding: 0 var(--pa-space-sm);\n}\n\n.pa-select--lg .pa-select__label {\n  font-size: var(--pa-font-label-md-size);\n  line-height: var(--pa-font-label-md-line-height);\n  font-weight: var(--pa-font-label-md-weight);\n}\n\n.pa-select--placeholder-shown .pa-select__control {\n  color: var(--pa-color-text-disabled-gray);\n}\n\n.pa-select--disabled .pa-select__field {\n  background: var(--pa-color-bg-disabled-gray);\n  border-color: var(--pa-color-bg-secondary-light-50);\n}\n\n.pa-select--disabled .pa-select__field:hover {\n  border-color: var(--pa-color-bg-secondary-light-50);\n}\n\n.pa-select--disabled .pa-select__label,\n.pa-select--disabled .pa-select__control,\n.pa-select--disabled .pa-select__chevron {\n  color: var(--pa-color-text-disabled-gray);\n}\n\n.pa-select--disabled .pa-select__control {\n  cursor: not-allowed;\n}\n\n.pa-select--error .pa-select__field {\n  border-color: var(--pa-color-error);\n  border-width: var(--pa-border-sm);\n}\n.pa-select--error .pa-select__field:hover {\n  border-color: var(--pa-color-error);\n}\n\n.pa-select--valid .pa-select__field {\n  border-color: var(--pa-color-success);\n  border-width: var(--pa-border-sm);\n}\n.pa-select--valid .pa-select__field:hover {\n  border-color: var(--pa-color-success);\n}\n\n.pa-select__message {\n  font-size: var(--pa-font-label-helper-size);\n  line-height: var(--pa-font-label-helper-line-height);\n  font-weight: var(--pa-font-label-helper-weight);\n  color: var(--pa-color-text-secondary-gray);\n}\n\n.pa-select__message--error {\n  color: var(--pa-color-error);\n}\n\n.pa-select__required {\n  margin-left: var(--pa-space-3xs);\n  color: var(--pa-color-error);\n}\n\n.pa-select--readonly .pa-select__field {\n  background: var(--pa-color-bg-primary-light-40);\n  border-color: var(--pa-color-bg-secondary-light-50);\n}\n.pa-select--readonly .pa-select__field:hover {\n  border-color: var(--pa-color-bg-secondary-light-50);\n}\n.pa-select--readonly .pa-select__control {\n  cursor: not-allowed;\n}\n</style>\n"],"names":["uid","nextPaSelectId","props","__props","model","_useModel","generatedId","inputId","computed","messageId","errorActive","validActive","errorMessage","helperMessage","message","placeholderShown","_createElementBlock","_normalizeClass","_hoisted_2","_createElementVNode","_hoisted_3","$event","_hoisted_5","_toDisplayString","_Fragment","_renderList","opt","_hoisted_6","_createVNode","PaIcon","_hoisted_7"],"mappings":";;;;;;;;;;;;AACA,IAAIA,IAAM;AACH,SAASC,IAAiB;AAC/B,SAAO,aAAa,EAAED,CAAG;AAC3B;;;;;;;;;;;;;;;;;;;;;;;AA+BA,UAAME,IAAQC,GASRC,IAAQC,EAAmBF,GAAA,YAAgB,GAE3CG,IAAcL,EAAA,GACdM,IAAUC,EAAS,MAAMN,EAAM,MAAMI,CAAW,GAChDG,IAAYD,EAAS,MAAM,GAAGD,EAAQ,KAAK,MAAM,GAEjDG,IAAcF,EAAS,MAAM,EAAQN,EAAM,KAAM,GACjDS,IAAcH,EAAS,MAAMN,EAAM,SAAS,CAACQ,EAAY,KAAK,GAE9DE,IAAeJ;AAAA,MAAS,MAC5B,OAAON,EAAM,SAAU,YAAYA,EAAM,MAAM,SAAS,IAAIA,EAAM,QAAQ;AAAA,IAAA,GAEtEW,IAAgBL;AAAA,MAAS,MAC7B,CAACE,EAAY,SAAS,CAACC,EAAY,SAAST,EAAM,aAAaA,EAAM,aAAa;AAAA,IAAA,GAE9EY,IAAUN,EAAS,MAAMI,EAAa,SAASC,EAAc,KAAK,GAElEE,IAAmBP;AAAA,MACvB,MAAMN,EAAM,gBAAgB,UAAaE,EAAM,UAAU;AAAA,IAAA;2BAKzDY,EAgDM,OAAA;AAAA,MA/CH,OAAKC,EAAA;AAAA;sBAA2Cd,EAAA,IAAI;AAAA;UAA2C,uBAAAA,EAAA,aAAaA,EAAA;AAAA,iCAAyCA,EAAA;AAAA,8BAAsCO,EAAA;AAAA,8BAAyCC,EAAA;AAAA,0CAAqDI,EAAA;AAAA,QAAA;AAAA;;MAY7QZ,EAAA,cAAba,EAEQ,SAAA;AAAA;QAFa,KAAKT,EAAA;AAAA,QAAS,OAAM;AAAA,MAAA;YACpCJ,EAAA,KAAK,GAAA,CAAA;AAAA,QAAeA,EAAA,iBAAZa,EAA6E,QAA7EE,GAAqE,GAAC;;MAEnFC,EAwBM,OAxBNC,GAwBM;AAAA,UAvBJD,EAqBS,UAAA;AAAA,UApBN,IAAIZ,EAAA;AAAA,wDACIH,EAAK,QAAAiB;AAAA,UACb,UAAUlB,EAAA,YAAYA,EAAA;AAAA,UACtB,UAAUA,EAAA;AAAA,UACV,MAAMA,EAAA;AAAA,UACN,cAAcA,EAAA;AAAA,UACd,iBAAeA,EAAA,YAAY;AAAA,UAC3B,gBAAcO,EAAA,SAAe;AAAA,UAC7B,oBAAkBI,EAAA,QAAUL,EAAA,QAAY;AAAA,UACzC,OAAM;AAAA,QAAA;UAEQN,EAAA,oBAAda,EAA8E,UAA9EM,GAA8EC,EAAvBpB,EAAA,WAAW,GAAA,CAAA;kBAClEa,EAOSQ,GAAA,MAAAC,EANOtB,EAAA,SAAO,CAAduB,YADTV,EAOS,UAAA;AAAA,YALN,KAAKU,EAAI;AAAA,YACT,OAAOA,EAAI;AAAA,YACX,UAAUA,EAAI;AAAA,UAAA,GAEZH,EAAAG,EAAI,KAAK,GAAA,GAAAC,CAAA;;cAjBLvB,EAAA,KAAK;AAAA,QAAA;QAoBhBwB,EAAoEC,GAAA;AAAA,UAA5D,MAAK;AAAA,UAAgB,MAAK;AAAA,UAAK,OAAM;AAAA,QAAA;;MAGvCf,EAAA,cADRE,EAMM,OAAA;AAAA;QAJH,IAAIP,EAAA;AAAA,QACJ,+DAA6DC,EAAA,OAAW,CAAA;AAAA,MAAA,KAEtEI,EAAA,KAAO,GAAA,IAAAgB,CAAA;;;;"}
+{"version":3,"file":"PaSelect.vue2.js","sources":["../../../src/components/PaSelect/PaSelect.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, useId } from 'vue'\nimport PaIcon from '../PaIcon/PaIcon.vue'\n\nexport type PaSelectSize = 'sm' | 'lg'\n\nexport interface PaSelectOption {\n  value: string\n  label: string\n  disabled?: boolean\n}\n\nexport interface PaSelectProps {\n  options: PaSelectOption[]\n  size?: PaSelectSize\n  label?: string\n  disabled?: boolean\n  id?: string\n  helperText?: string\n  error?: string | boolean\n  valid?: boolean\n  name?: string\n  autocomplete?: string\n  required?: boolean\n  readonly?: boolean\n  placeholder?: string\n}\n\nconst props = withDefaults(defineProps<PaSelectProps>(), {\n  size: 'sm',\n  disabled: false,\n  error: false,\n  valid: false,\n  required: false,\n  readonly: false,\n})\n\nconst model = defineModel<string>({ default: '' })\n\nconst generatedId = `pa-select-${useId()}`\nconst inputId = computed(() => props.id ?? generatedId)\nconst messageId = computed(() => `${inputId.value}-msg`)\n\nconst errorActive = computed(() => Boolean(props.error))\nconst validActive = computed(() => props.valid && !errorActive.value)\n\nconst errorMessage = computed(() =>\n  typeof props.error === 'string' && props.error.length > 0 ? props.error : null,\n)\nconst helperMessage = computed(() =>\n  !errorActive.value && !validActive.value && props.helperText ? props.helperText : null,\n)\nconst message = computed(() => errorMessage.value ?? helperMessage.value)\n\nconst placeholderShown = computed(\n  () => props.placeholder !== undefined && model.value === '',\n)\n</script>\n\n<template>\n  <div\n    :class=\"[\n      'pa-select',\n      `pa-select--${size}`,\n      {\n        'pa-select--disabled': disabled && !readonly,\n        'pa-select--readonly': readonly,\n        'pa-select--error': errorActive,\n        'pa-select--valid': validActive,\n        'pa-select--placeholder-shown': placeholderShown,\n      },\n    ]\"\n  >\n    <label v-if=\"label\" :for=\"inputId\" class=\"pa-select__label\">\n      {{ label }}<span v-if=\"required\" class=\"pa-select__required\" aria-hidden=\"true\">*</span>\n    </label>\n    <div class=\"pa-select__field\">\n      <select\n        :id=\"inputId\"\n        v-model=\"model\"\n        :disabled=\"disabled || readonly\"\n        :required=\"required\"\n        :name=\"name\"\n        :autocomplete=\"autocomplete\"\n        :aria-required=\"required || undefined\"\n        :aria-invalid=\"errorActive || undefined\"\n        :aria-describedby=\"message ? messageId : undefined\"\n        class=\"pa-select__control\"\n      >\n        <option v-if=\"placeholder\" value=\"\" disabled hidden>{{ placeholder }}</option>\n        <option\n          v-for=\"opt in options\"\n          :key=\"opt.value\"\n          :value=\"opt.value\"\n          :disabled=\"opt.disabled\"\n        >\n          {{ opt.label }}\n        </option>\n      </select>\n      <PaIcon name=\"caret-up-down\" size=\"md\" class=\"pa-select__chevron\" />\n    </div>\n    <div\n      v-if=\"message\"\n      :id=\"messageId\"\n      :class=\"['pa-select__message', { 'pa-select__message--error': errorActive }]\"\n    >\n      {{ message }}\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.pa-select {\n  display: flex;\n  flex-direction: column;\n  gap: var(--pa-space-2xs);\n  font-family: var(--pa-font-family-base);\n}\n\n.pa-select__label {\n  font-size: var(--pa-font-label-sm-size);\n  line-height: var(--pa-font-label-sm-line-height);\n  font-weight: var(--pa-font-label-sm-weight);\n  color: var(--pa-color-text-secondary-gray);\n}\n\n.pa-select__field {\n  display: flex;\n  align-items: center;\n  gap: var(--pa-space-xs);\n  box-sizing: border-box;\n  background: var(--pa-color-bg-white);\n  border: var(--pa-border-xs) solid var(--pa-color-bg-secondary-light-50);\n  border-radius: var(--pa-radius-smooth);\n  transition: border-color 120ms ease, background-color 120ms ease;\n}\n\n.pa-select__field:hover {\n  border-color: var(--pa-color-neutral-gray);\n}\n\n.pa-select__field:focus-within {\n  outline: 3px solid var(--pa-color-primary-focus-border);\n  outline-offset: 0;\n  border-color: var(--pa-color-primary);\n}\n\n.pa-select__control {\n  flex: 1 1 auto;\n  min-width: 0;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  padding: 0;\n  background: transparent;\n  border: none;\n  outline: none;\n  appearance: none;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  color: var(--pa-color-text-black);\n  font-family: inherit;\n  font-size: var(--pa-font-body-size);\n  line-height: var(--pa-font-body-line-height);\n  font-weight: var(--pa-font-body-weight);\n  cursor: pointer;\n}\n\n.pa-select__chevron {\n  flex: 0 0 auto;\n  pointer-events: none;\n  color: var(--pa-color-text-secondary-gray);\n}\n\n.pa-select--sm .pa-select__field {\n  height: 44px;\n  padding: 0 var(--pa-space-sm);\n}\n\n.pa-select--lg .pa-select__field {\n  height: 60px;\n  padding: 0 var(--pa-space-sm);\n}\n\n.pa-select--lg .pa-select__label {\n  font-size: var(--pa-font-label-md-size);\n  line-height: var(--pa-font-label-md-line-height);\n  font-weight: var(--pa-font-label-md-weight);\n}\n\n.pa-select--placeholder-shown .pa-select__control {\n  color: var(--pa-color-text-disabled-gray);\n}\n\n.pa-select--disabled .pa-select__field {\n  background: var(--pa-color-bg-disabled-gray);\n  border-color: var(--pa-color-bg-secondary-light-50);\n}\n\n.pa-select--disabled .pa-select__field:hover {\n  border-color: var(--pa-color-bg-secondary-light-50);\n}\n\n.pa-select--disabled .pa-select__label,\n.pa-select--disabled .pa-select__control,\n.pa-select--disabled .pa-select__chevron {\n  color: var(--pa-color-text-disabled-gray);\n}\n\n.pa-select--disabled .pa-select__control {\n  cursor: not-allowed;\n}\n\n.pa-select--error .pa-select__field {\n  border-color: var(--pa-color-error);\n  border-width: var(--pa-border-sm);\n}\n.pa-select--error .pa-select__field:hover {\n  border-color: var(--pa-color-error);\n}\n\n.pa-select--valid .pa-select__field {\n  border-color: var(--pa-color-success);\n  border-width: var(--pa-border-sm);\n}\n.pa-select--valid .pa-select__field:hover {\n  border-color: var(--pa-color-success);\n}\n\n.pa-select__message {\n  font-size: var(--pa-font-label-helper-size);\n  line-height: var(--pa-font-label-helper-line-height);\n  font-weight: var(--pa-font-label-helper-weight);\n  color: var(--pa-color-text-secondary-gray);\n}\n\n.pa-select__message--error {\n  color: var(--pa-color-error);\n}\n\n.pa-select__required {\n  margin-left: var(--pa-space-3xs);\n  color: var(--pa-color-error);\n}\n\n.pa-select--readonly .pa-select__field {\n  background: var(--pa-color-bg-primary-light-40);\n  border-color: var(--pa-color-bg-secondary-light-50);\n}\n.pa-select--readonly .pa-select__field:hover {\n  border-color: var(--pa-color-bg-secondary-light-50);\n}\n.pa-select--readonly .pa-select__control {\n  cursor: not-allowed;\n}\n</style>\n"],"names":["props","__props","model","_useModel","generatedId","useId","inputId","computed","messageId","errorActive","validActive","errorMessage","helperMessage","message","placeholderShown","_createElementBlock","_normalizeClass","_hoisted_2","_createElementVNode","_hoisted_3","$event","_hoisted_5","_toDisplayString","_Fragment","_renderList","opt","_hoisted_6","_createVNode","PaIcon","_hoisted_7"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BA,UAAMA,IAAQC,GASRC,IAAQC,EAAmBF,GAAA,YAAgB,GAE3CG,IAAc,aAAaC,EAAA,CAAO,IAClCC,IAAUC,EAAS,MAAMP,EAAM,MAAMI,CAAW,GAChDI,IAAYD,EAAS,MAAM,GAAGD,EAAQ,KAAK,MAAM,GAEjDG,IAAcF,EAAS,MAAM,EAAQP,EAAM,KAAM,GACjDU,IAAcH,EAAS,MAAMP,EAAM,SAAS,CAACS,EAAY,KAAK,GAE9DE,IAAeJ;AAAA,MAAS,MAC5B,OAAOP,EAAM,SAAU,YAAYA,EAAM,MAAM,SAAS,IAAIA,EAAM,QAAQ;AAAA,IAAA,GAEtEY,IAAgBL;AAAA,MAAS,MAC7B,CAACE,EAAY,SAAS,CAACC,EAAY,SAASV,EAAM,aAAaA,EAAM,aAAa;AAAA,IAAA,GAE9Ea,IAAUN,EAAS,MAAMI,EAAa,SAASC,EAAc,KAAK,GAElEE,IAAmBP;AAAA,MACvB,MAAMP,EAAM,gBAAgB,UAAaE,EAAM,UAAU;AAAA,IAAA;2BAKzDa,EAgDM,OAAA;AAAA,MA/CH,OAAKC,EAAA;AAAA;sBAA2Cf,EAAA,IAAI;AAAA;UAA2C,uBAAAA,EAAA,aAAaA,EAAA;AAAA,iCAAyCA,EAAA;AAAA,8BAAsCQ,EAAA;AAAA,8BAAyCC,EAAA;AAAA,0CAAqDI,EAAA;AAAA,QAAA;AAAA;;MAY7Qb,EAAA,cAAbc,EAEQ,SAAA;AAAA;QAFa,KAAKT,EAAA;AAAA,QAAS,OAAM;AAAA,MAAA;YACpCL,EAAA,KAAK,GAAA,CAAA;AAAA,QAAeA,EAAA,iBAAZc,EAA6E,QAA7EE,GAAqE,GAAC;;MAEnFC,EAwBM,OAxBNC,GAwBM;AAAA,UAvBJD,EAqBS,UAAA;AAAA,UApBN,IAAIZ,EAAA;AAAA,wDACIJ,EAAK,QAAAkB;AAAA,UACb,UAAUnB,EAAA,YAAYA,EAAA;AAAA,UACtB,UAAUA,EAAA;AAAA,UACV,MAAMA,EAAA;AAAA,UACN,cAAcA,EAAA;AAAA,UACd,iBAAeA,EAAA,YAAY;AAAA,UAC3B,gBAAcQ,EAAA,SAAe;AAAA,UAC7B,oBAAkBI,EAAA,QAAUL,EAAA,QAAY;AAAA,UACzC,OAAM;AAAA,QAAA;UAEQP,EAAA,oBAAdc,EAA8E,UAA9EM,GAA8EC,EAAvBrB,EAAA,WAAW,GAAA,CAAA;kBAClEc,EAOSQ,GAAA,MAAAC,EANOvB,EAAA,SAAO,CAAdwB,YADTV,EAOS,UAAA;AAAA,YALN,KAAKU,EAAI;AAAA,YACT,OAAOA,EAAI;AAAA,YACX,UAAUA,EAAI;AAAA,UAAA,GAEZH,EAAAG,EAAI,KAAK,GAAA,GAAAC,CAAA;;cAjBLxB,EAAA,KAAK;AAAA,QAAA;QAoBhByB,EAAoEC,GAAA;AAAA,UAA5D,MAAK;AAAA,UAAgB,MAAK;AAAA,UAAK,OAAM;AAAA,QAAA;;MAGvCf,EAAA,cADRE,EAMM,OAAA;AAAA;QAJH,IAAIP,EAAA;AAAA,QACJ,+DAA6DC,EAAA,OAAW,CAAA;AAAA,MAAA,KAEtEI,EAAA,KAAO,GAAA,IAAAgB,CAAA;;;;"}

package/dist/components/PaTabs/PaTabs.vue.js

@@ -2,7 +2,7 @@ import o from "./PaTabs.vue2.js";
 import { PaTabsKey as f } from "./PaTabs.vue2.js";
 /* empty css            */
 import a from "../../_virtual/_plugin-vue_export-helper.js";
-const m = /* @__PURE__ */ a(o, [["__scopeId", "data-v-bb2485e5"]]);
+const m = /* @__PURE__ */ a(o, [["__scopeId", "data-v-8560e34a"]]);
 export {
   f as PaTabsKey,
   m as default