pxd 0.0.52 → 0.0.53

package/dist/components/input/index.d.vue.ts

@@ -1,6 +1,8 @@
 import type { InputProps } from '../../types/components/input';
-declare function setNativeInputValue(value: any): void;
-declare function clearValue(): void;
+declare function blur(): void;
+declare function focus(): void;
+declare function select(): void;
+declare function clear(): void;
 declare var __VLS_1: {}, __VLS_18: {};
 type __VLS_Slots = {} & {
     prefix?: (props: typeof __VLS_1) => any;
@@ -8,40 +10,36 @@ type __VLS_Slots = {} & {
     suffix?: (props: typeof __VLS_18) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<InputProps, {
-    blur: () => void | undefined;
-    focus: () => void | undefined;
-    select: () => void | undefined;
-    clear: typeof clearValue;
-    setInputValue: typeof setNativeInputValue;
+    blur: typeof blur;
+    clear: typeof clear;
+    focus: typeof focus;
+    select: typeof select;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     input: (args_0: string) => any;
-    click: (args_0: MouseEvent) => any;
-    clear: (args_0: string) => any;
     blur: (args_0: FocusEvent) => any;
-    change: (args_0: string) => any;
+    change: (args_0: string, args_1: Event) => any;
+    click: (args_0: MouseEvent) => any;
     compositionend: (args_0: CompositionEvent) => any;
     compositionstart: (args_0: CompositionEvent) => any;
     compositionupdate: (args_0: CompositionEvent) => any;
     focus: (args_0: FocusEvent) => any;
     keydown: (args_0: KeyboardEvent) => any;
+    clear: (args_0: string) => any;
     "update:modelValue": (args_0: string) => any;
 }, string, import("vue").PublicProps, Readonly<InputProps> & Readonly<{
     onInput?: ((args_0: string) => any) | undefined;
-    onClick?: ((args_0: MouseEvent) => any) | undefined;
-    onClear?: ((args_0: string) => any) | undefined;
     onBlur?: ((args_0: FocusEvent) => any) | undefined;
-    onChange?: ((args_0: string) => any) | undefined;
+    onChange?: ((args_0: string, args_1: Event) => any) | undefined;
+    onClick?: ((args_0: MouseEvent) => any) | undefined;
     onCompositionend?: ((args_0: CompositionEvent) => any) | undefined;
     onCompositionstart?: ((args_0: CompositionEvent) => any) | undefined;
     onCompositionupdate?: ((args_0: CompositionEvent) => any) | undefined;
     onFocus?: ((args_0: FocusEvent) => any) | undefined;
     onKeydown?: ((args_0: KeyboardEvent) => any) | undefined;
+    onClear?: ((args_0: string) => any) | undefined;
     "onUpdate:modelValue"?: ((args_0: string) => any) | undefined;
 }>, {
     align: "left" | "center" | "right";
-    error: boolean | string;
-    placeholder: string;
-    modelValue: import("../../types/shared").ComponentLabel;
     prefixStyle: boolean;
     suffixStyle: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/components/input/index.vue

@@ -2,13 +2,13 @@
 import CrossIcon from "@gdsicon/vue/cross";
 import EyeIcon from "@gdsicon/vue/eye";
 import EyeOffIcon from "@gdsicon/vue/eye-off";
-import { computed, nextTick, onMounted, shallowRef, watch } from "vue";
+import { computed, shallowRef } from "vue";
 import { useConfigProvider } from "../../composables/use-config-provider-context";
 import { useModelValue } from "../../composables/use-model-value";
 import { NOOP } from "../../utils/event";
 import { isTruthyProp } from "../../utils/format";
-import { getFallbackValue } from "../../utils/get";
 import { getUniqueId } from "../../utils/uid";
+import { inputVariant } from "./cn";
 defineOptions({
   name: "PInput",
   inheritAttrs: false,
@@ -19,11 +19,10 @@ defineOptions({
 });
 const props = defineProps({
   size: { type: String, required: false },
-  error: { type: [Boolean, String], required: false, default: false },
+  error: { type: [Boolean, String], required: false },
   min: { type: [Number, String], required: false },
   max: { type: [Number, String], required: false },
   align: { type: String, required: false, default: "left" },
-  label: { type: [String, Number, Array, null], required: false },
   readonly: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
   password: { type: Boolean, required: false },
@@ -34,66 +33,34 @@ const props = defineProps({
   minlength: { type: [Number, String], required: false },
   maxlength: { type: [Number, String], required: false },
   clearable: { type: Boolean, required: false },
-  modelValue: { type: [String, Number, Array, null], required: false, default: "" },
-  placeholder: { type: String, required: false, default: "" },
+  clearValue: { type: null, required: false },
+  modelValue: { type: null, required: false },
+  placeholder: { type: String, required: false },
   prefixStyle: { type: Boolean, required: false, default: true },
   suffixStyle: { type: Boolean, required: false, default: true },
   prefixClass: { type: null, required: false },
   suffixClass: { type: null, required: false },
-  selectOnFocus: { type: Boolean, required: false },
-  parser: { type: Function, required: false },
-  formatter: { type: Function, required: false }
+  selectOnFocus: { type: Boolean, required: false }
 });
 const emits = defineEmits(["click", "clear", "input", "change", "focus", "blur", "keydown", "update:modelValue", "compositionstart", "compositionupdate", "compositionend"]);
-const SIZES = {
-  xs: "h-6 text-xs rounded-sm",
-  sm: "h-7.5 text-sm rounded-md",
-  md: "h-9 text-sm rounded-md",
-  lg: "h-10 text-base rounded-lg"
-};
-const ALIGN = {
-  left: "text-left",
-  center: "text-center",
-  right: "text-right"
-};
 const uniqueId = getUniqueId();
 const inputRef = shallowRef();
-const config = useConfigProvider();
-const computedModelValue = useModelValue(props, emits);
+const configProvider = useConfigProvider();
+const modelValue = useModelValue(props, emits, { withChange: false });
 const isComposing = shallowRef(false);
 const isPasswordVisible = shallowRef(!props.password);
-const internalInputType = computed(() => props.inputType || isPasswordVisible.value ? "text" : "password");
-const computedClass = computed(() => {
-  const classes = [];
-  classes.push(getFallbackValue(props.size, SIZES, config.size), props.align && ALIGN[props.align]);
-  if (isTruthyProp(props.disabled)) {
-    classes.push("is-disabled");
-  }
-  if (isTruthyProp(props.readonly)) {
-    classes.push("is-readonly");
-  }
-  if (props.error) {
-    classes.push("is-error");
-  }
-  return classes.join(" ");
+const inputType = computed(() => props.inputType || isPasswordVisible.value ? "text" : "password");
+const computedClasses = computed(() => {
+  return inputVariant({
+    size: props.size || configProvider.size,
+    align: props.align,
+    error: isTruthyProp(props.error),
+    disabled: isTruthyProp(props.disabled),
+    readonly: isTruthyProp(props.readonly)
+  });
 });
-function getValueFromEvent(ev) {
-  let { value } = ev.target;
-  if (props.parser) {
-    value = props.parser(value);
-  }
-  return value;
-}
-function getFormattedValue(value) {
-  return typeof props.formatter === "function" ? props.formatter(value) : value;
-}
-function setNativeInputValue(value) {
-  const input = inputRef.value;
-  const formatterValue = getFormattedValue(value);
-  if (input == null || input.value === formatterValue) {
-    return;
-  }
-  input.value = formatterValue;
+function getInputValue(ev) {
+  return ev.target.value;
 }
 function onFocus(event) {
   if (props.selectOnFocus) {
@@ -104,24 +71,29 @@ function onFocus(event) {
 function onBlur(event) {
   emits("blur", event);
 }
-function onChange(event) {
-  emits("change", getValueFromEvent(event));
-}
 function onClick(event) {
   emits("click", event);
 }
+function onChange(event) {
+  const inputValue = getInputValue(event);
+  emits("change", inputValue, event);
+}
 async function onInput(event) {
   const ev = event;
   if (ev.isComposing || isComposing.value) {
     return;
   }
-  const value = getValueFromEvent(event);
-  computedModelValue.value = value;
-  emits("input", value);
-  await nextTick();
-  setNativeInputValue(value);
+  const inputValue = getInputValue(event);
+  modelValue.value = inputValue;
+  emits("input", inputValue);
 }
 function onKeydown(event) {
+  if (props.readonly) {
+    return;
+  }
+  if (event.key === "Enter") {
+    onChange(event);
+  }
   emits("keydown", event);
 }
 function onCompositionStart(event) {
@@ -133,56 +105,53 @@ function onCompositionUpdate(event) {
   emits("compositionupdate", event);
 }
 async function onCompositionEnd(event) {
-  if (isComposing.value) {
-    const value = getValueFromEvent(event);
-    computedModelValue.value = value;
-    isComposing.value = false;
-  }
+  isComposing.value = false;
   emits("compositionend", event);
-  await nextTick();
-  setNativeInputValue(getValueFromEvent(event));
+  const inputValue = getInputValue(event);
+  modelValue.value = inputValue;
+  emits("input", inputValue);
 }
 function toggleType() {
   isPasswordVisible.value = !isPasswordVisible.value;
 }
-function clearValue() {
-  emits("clear", "");
-  setNativeInputValue("");
-  computedModelValue.value = "";
+function blur() {
+  inputRef.value?.blur();
+}
+function focus() {
+  inputRef.value?.focus();
+}
+function select() {
+  inputRef.value?.select();
+}
+function clear() {
+  const clearValue = props.clearValue ?? "";
+  emits("clear", clearValue);
+  modelValue.value = clearValue;
 }
-const blur = () => inputRef.value?.blur();
-const focus = () => inputRef.value?.focus();
-const select = () => inputRef.value?.select();
-watch(() => props.modelValue, (value) => {
-  setNativeInputValue(getFormattedValue(value));
-});
-onMounted(async () => {
-  await nextTick();
-  setNativeInputValue(getFormattedValue(computedModelValue.value));
-});
 defineExpose({
   blur,
+  clear,
   focus,
-  select,
-  clear: clearValue,
-  setInputValue: setNativeInputValue
+  select
 });
 </script>
 
 <template>
   <label
-    class="pxd-input pxd-input--border group relative flex w-full max-w-full items-center overflow-hidden bg-background-100 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:bg-gray-100 motion-safe:transition-all"
     :for="uniqueId"
     :data-disabled="disabled"
-    :class="computedClass"
+    :class="computedClasses"
     v-bind="$attrs"
     @click="onClick"
     @dragstart.prevent="NOOP"
   >
     <div
       v-if="$slots.prefix"
-      class="pxd-input--prefix text-sm pl-3 flex h-full items-center text-foreground-secondary"
-      :class="[{ 'pr-3 rounded-l-inherit border-r border-gray-300 bg-background-200': prefixStyle }, prefixClass]"
+      class="pxd-input--prefix text-sm flex h-full items-center text-foreground-secondary"
+      :class="[
+  { 'px-3 rounded-l-inherit border-r border-gray-300 bg-background-200': prefixStyle },
+  prefixClass
+]"
       @pointerdown.prevent="NOOP"
     >
       <slot name="prefix" />
@@ -191,13 +160,14 @@ defineExpose({
     <input
       :id="uniqueId"
       ref="inputRef"
-      class="px-3 py-0 size-full appearance-none rounded-inherit border-none bg-transparent [text-align:inherit] font-inherit outline-none select-auto file:font-medium file:border-0 file:bg-transparent placeholder:text-gray-600 placeholder:select-none read-only:cursor-default disabled:cursor-not-allowed disabled:text-gray-700 disabled:placeholder:text-gray-500"
-      :type="internalInputType"
-      :min="min"
-      :max="max"
+      class="px-3 py-0 file:font-medium size-full appearance-none rounded-inherit border-none bg-transparent [text-align:inherit] font-inherit outline-none select-auto file:border-0 file:bg-transparent placeholder:text-gray-600 placeholder:select-none read-only:cursor-default disabled:cursor-not-allowed disabled:text-gray-700 disabled:placeholder:text-gray-500"
       autocorrect="off"
       autocomplete="off"
       autocapitalize="off"
+      :min="min"
+      :max="max"
+      :type="inputType"
+      :value="modelValue"
       :readonly="readonly"
       :disabled="disabled"
       :required="required"
@@ -205,9 +175,8 @@ defineExpose({
       :minlength="minlength"
       :maxlength="maxlength"
       :autofocus="autofocus"
-      :placeholder="placeholder"
       :aria-disabled="disabled"
-      :data-value="computedModelValue"
+      :placeholder="placeholder"
       @blur="onBlur"
       @focus="onFocus"
       @input="onInput"
@@ -216,13 +185,14 @@ defineExpose({
       @compositionstart="onCompositionStart"
       @compositionupdate="onCompositionUpdate"
       @compositionend="onCompositionEnd"
-    >
+    />
 
     <div
       v-if="password || clearable"
-      v-show="computedModelValue"
+      v-show="modelValue"
       :class="{ 'pr-2': password && clearable }"
-      class="pxd-input--icon right-0 top-0 gap-1 flex aspect-square h-full cursor-pointer items-center justify-center rounded-r-inherit text-foreground-secondary"
+      class="pxd-input--icon top-0 right-0 gap-1 flex aspect-square h-full cursor-pointer items-center justify-center rounded-r-inherit text-foreground-secondary"
+      @pointerdown.prevent="NOOP"
     >
       <button
         v-if="password"
@@ -235,7 +205,7 @@ defineExpose({
       <button
         v-if="clearable"
         class="p-1 appearance-none rounded-sm font-inherit self-focus-ring outline-none hover:bg-background-hover hover:text-foreground active:bg-background-active motion-safe:transition-colors"
-        @click.stop.prevent="clearValue"
+        @click.stop.prevent="clear"
       >
         <CrossIcon class="size-3 pointer-events-none" />
       </button>
@@ -243,8 +213,11 @@ defineExpose({
 
     <div
       v-if="$slots.suffix"
-      class="pxd-input--suffix text-sm pr-3 flex h-full items-center text-foreground-secondary"
-      :class="[{ 'pl-3 rounded-r-inherit border-l border-gray-300 bg-background-200': suffixStyle }, suffixClass]"
+      class="pxd-input--suffix text-sm flex h-full items-center text-foreground-secondary"
+      :class="[
+  { 'px-3 rounded-r-inherit border-l border-gray-300 bg-background-200': suffixStyle },
+  suffixClass
+]"
       @pointerdown.prevent="NOOP"
     >
       <slot name="suffix" />

package/dist/components/intersection-observer/index.vue

@@ -45,9 +45,13 @@ function onVisibleChange(isIntersecting) {
   }
   emits("visible-change", isIntersecting);
 }
-useIntersectionObserver(containerRef, ([entry]) => {
-  onVisibleChange(entry.isIntersecting);
-}, props);
+useIntersectionObserver(
+  containerRef,
+  ([entry]) => {
+    onVisibleChange(entry.isIntersecting);
+  },
+  props
+);
 </script>
 
 <template>

package/dist/components/kbd/index.vue

@@ -27,8 +27,8 @@ const INTERNAL_KEYS = {
   ctrl: "Ctrl",
   enter: "\u21B5"
 };
-const config = useConfigProvider();
-const computedSize = computed(() => getFallbackValue(props.size, SIZES, config.size));
+const configProvider = useConfigProvider();
+const computedSize = computed(() => getFallbackValue(props.size, SIZES, configProvider.size));
 const internalKey = computed(() => {
   return Object.entries(INTERNAL_KEYS).filter(([k]) => {
     return props[k];

package/dist/components/link-button/index.d.vue.ts

@@ -1,27 +1,27 @@
+import type { ButtonVariant } from '../../types/components/button';
 interface Props {
     href: string;
     text?: string;
-    type?: 'button' | 'text';
     align?: 'left' | 'center' | 'right';
-    target?: '_blank' | '_self' | '_parent' | '_top';
+    target?: HTMLAnchorElement['target'];
+    variant?: ButtonVariant;
     externalIcon?: boolean;
 }
-declare var __VLS_11: {}, __VLS_13: {}, __VLS_16: {};
+declare var __VLS_9: {}, __VLS_11: {}, __VLS_14: {};
 type __VLS_Slots = {} & {
-    prefix?: (props: typeof __VLS_11) => any;
+    prefix?: (props: typeof __VLS_9) => any;
 } & {
-    default?: (props: typeof __VLS_13) => any;
+    default?: (props: typeof __VLS_11) => any;
 } & {
-    suffix?: (props: typeof __VLS_16) => any;
+    suffix?: (props: typeof __VLS_14) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     click: (args_0: MouseEvent) => any;
 }, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
     onClick?: ((args_0: MouseEvent) => any) | undefined;
 }>, {
-    type: "button" | "text";
     align: "left" | "center" | "right";
-    target: "_blank" | "_self" | "_parent" | "_top";
+    target: HTMLAnchorElement["target"];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/link-button/index.vue

@@ -9,39 +9,36 @@ defineOptions({
 const props = defineProps({
   href: { type: String, required: true },
   text: { type: String, required: false },
-  type: { type: String, required: false, default: "button" },
   align: { type: String, required: false, default: "left" },
-  target: { type: String, required: false, default: "_self" },
+  target: { type: null, required: false, default: "_self" },
+  variant: { type: String, required: false },
   externalIcon: { type: Boolean, required: false }
 });
 const emits = defineEmits(["click"]);
 const attrs = useAttrs();
-const computedClass = computed(() => {
-  const classes = ["pxd-link-button"];
-  if (props.type === "text") {
-    classes.push("font-medium hover:underline hover:opacity-70 active:opacity-90 motion-safe:transition-opacity");
-  }
-  return classes.join(" ");
-});
-const computedAttrs = computed(() => {
-  const { href, target, type } = props;
+const linkButtonAttrs = computed(() => {
+  const { externalIcon, text, href, ...restProps } = props;
+  const baseAttrs = {
+    ...attrs,
+    ...restProps,
+    class: "pxd-link-button",
+    rel: "noopener noreferrer",
+    onClick: onLinkClick
+  };
   if (!href) {
-    return null;
+    return baseAttrs;
   }
-  const variant = type === "text" ? "simple" : attrs.variant || "default";
   if (isExternalLink(href)) {
     return {
+      ...baseAttrs,
       as: "a",
-      href,
-      target,
-      variant,
-      rel: "noopener noreferrer"
+      href
     };
   }
   return {
+    ...baseAttrs,
     as: "router-link",
-    to: href,
-    variant
+    to: href
   };
 });
 function onLinkClick(ev) {
@@ -50,12 +47,7 @@ function onLinkClick(ev) {
 </script>
 
 <template>
-  <PButton
-    :align="align"
-    :class="computedClass"
-    v-bind="computedAttrs"
-    @click="onLinkClick"
-  >
+  <PButton v-bind="linkButtonAttrs">
     <template #prefix>
       <slot name="prefix" />
     </template>

package/dist/components/list/index.d.vue.ts

@@ -1,7 +1,6 @@
 import type { ListOption, ListOptionSelected } from '../../types/components/list';
 interface Props {
     loop?: boolean;
-    width?: string | number;
     options?: ListOption[];
     keyListener?: boolean;
     itemTransition?: boolean;

package/dist/components/list/index.vue

@@ -2,7 +2,6 @@
 import { nextTick, onBeforeUnmount, onMounted, shallowRef } from "vue";
 import { provideListContext } from "../../contexts/list";
 import { cachedOff, cachedOn } from "../../utils/event";
-import { getCssUnitValue } from "../../utils/format";
 import { isServer } from "../../utils/is";
 import { throttle } from "../../utils/throttle";
 import PListItem from "../list-item/index.vue";
@@ -13,7 +12,6 @@ defineOptions({
 });
 const props = defineProps({
   loop: { type: Boolean, required: false, default: true },
-  width: { type: [String, Number], required: false },
   options: { type: Array, required: false, default: () => [] },
   keyListener: { type: Boolean, required: false, default: true },
   itemTransition: { type: Boolean, required: false, default: true },
@@ -30,62 +28,66 @@ const FUNCTION_KEYS = ["Enter", "Tab", "Home", "End"];
 const PREVENT_DEFAULT_KEYS = [...FUNCTION_KEYS, ...PREV_KEYS, ...NEXT_KEYS];
 const listItemKeys = [];
 const listItemsMap = /* @__PURE__ */ new Map();
-const containerKeydownThrottled = throttle((ev) => {
-  if (ev.ctrlKey || ev.metaKey || ev.altKey || ev.shiftKey) {
-    return;
-  }
-  const { key } = ev;
-  if (key === "Tab") {
-    return;
-  }
-  if (key === "Enter") {
-    listItemsMap.get(activeValue.value)?.click();
-    return;
-  }
-  if (key === "Escape" && props.closeOnPressEscape) {
-    emits("escape", ev);
-    return;
-  }
-  let newActiveValue = "";
-  const listItemKeyLength = listItemKeys.length;
-  if (PREV_KEYS.includes(key)) {
-    if (activeValue.value) {
-      const index = listItemKeys.indexOf(activeValue.value);
-      if (props.loop) {
-        const prevIndex = (index - 1 + listItemKeys.length) % listItemKeys.length;
-        newActiveValue = listItemKeys[prevIndex];
-      } else if (index > 0) {
-        newActiveValue = listItemKeys[index - 1];
-      }
-    } else {
-      newActiveValue = listItemKeys[listItemKeyLength - 1];
+const containerKeydownThrottled = throttle(
+  (ev) => {
+    if (ev.ctrlKey || ev.metaKey || ev.altKey || ev.shiftKey) {
+      return;
+    }
+    const { key } = ev;
+    if (key === "Tab") {
+      return;
     }
-  } else if (NEXT_KEYS.includes(key)) {
-    if (activeValue.value) {
-      const index = listItemKeys.indexOf(activeValue.value);
-      if (props.loop) {
-        const nextIndex = (index + 1) % listItemKeys.length;
-        newActiveValue = listItemKeys[nextIndex];
-      } else if (index < listItemKeys.length - 1) {
-        newActiveValue = listItemKeys[index + 1];
+    if (key === "Enter") {
+      listItemsMap.get(activeValue.value)?.click();
+      return;
+    }
+    if (key === "Escape" && props.closeOnPressEscape) {
+      emits("escape", ev);
+      return;
+    }
+    let newActiveValue = "";
+    const listItemKeyLength = listItemKeys.length;
+    if (PREV_KEYS.includes(key)) {
+      if (activeValue.value) {
+        const index = listItemKeys.indexOf(activeValue.value);
+        if (props.loop) {
+          const prevIndex = (index - 1 + listItemKeys.length) % listItemKeys.length;
+          newActiveValue = listItemKeys[prevIndex];
+        } else if (index > 0) {
+          newActiveValue = listItemKeys[index - 1];
+        }
+      } else {
+        newActiveValue = listItemKeys[listItemKeyLength - 1];
+      }
+    } else if (NEXT_KEYS.includes(key)) {
+      if (activeValue.value) {
+        const index = listItemKeys.indexOf(activeValue.value);
+        if (props.loop) {
+          const nextIndex = (index + 1) % listItemKeys.length;
+          newActiveValue = listItemKeys[nextIndex];
+        } else if (index < listItemKeys.length - 1) {
+          newActiveValue = listItemKeys[index + 1];
+        }
+      } else {
+        newActiveValue = listItemKeys[0];
       }
-    } else {
+    } else if (key === "Home") {
       newActiveValue = listItemKeys[0];
+    } else if (key === "End") {
+      newActiveValue = listItemKeys[listItemKeyLength - 1];
     }
-  } else if (key === "Home") {
-    newActiveValue = listItemKeys[0];
-  } else if (key === "End") {
-    newActiveValue = listItemKeys[listItemKeyLength - 1];
-  }
-  if (!newActiveValue) {
-    return;
-  }
-  if (activeValue.value !== newActiveValue) {
-    emits("toggle");
-    activeValue.value = newActiveValue;
-  }
-  listItemsMap.get(activeValue.value)?.scrollIntoView({ block: "nearest" });
-}, 100, { edges: ["leading"] });
+    if (!newActiveValue) {
+      return;
+    }
+    if (activeValue.value !== newActiveValue) {
+      emits("toggle");
+      activeValue.value = newActiveValue;
+    }
+    listItemsMap.get(activeValue.value)?.scrollIntoView({ block: "nearest" });
+  },
+  100,
+  { edges: ["leading"] }
+);
 function onContainerKeydown(ev) {
   if (!props.keyListener || listItemKeys.length === 0) {
     return;
@@ -105,7 +107,7 @@ function onPointerOver(ev) {
   }
   activeValue.value = itemValue;
 }
-function onOptionClick(ev, item) {
+function onOptionClick(item, ev) {
   const { as, onClick, ...option } = item;
   activeValue.value = "";
   emits("select", ev, option);
@@ -159,8 +161,7 @@ defineExpose({
     role="list"
     tabindex="-1"
     :data-transition="itemTransition"
-    class="pxd-list group/list max-w-full list-none bg-background-100 outline-none"
-    :style="{ width: getCssUnitValue(width) }"
+    class="pxd-list group/list m-0 p-0 max-w-full list-none bg-background-100 outline-none"
     v-bind="$attrs"
     @pointerover="onPointerOver"
   >