pxd 0.0.55 → 0.0.60

package/dist/components/input/index.vue

@@ -3,12 +3,12 @@ import CrossIcon from "@gdsicon/vue/cross";
 import EyeIcon from "@gdsicon/vue/eye";
 import EyeOffIcon from "@gdsicon/vue/eye-off";
 import { computed, shallowRef } from "vue";
-import { useConfigProvider } from "../../composables/use-config-provider-context";
+import { useConfigProvider } from "../../contexts/config-provider";
 import { useModelValue } from "../../composables/use-model-value";
 import { NOOP } from "../../utils/event";
 import { isTruthyProp } from "../../utils/format";
 import { getUniqueId } from "../../utils/uid";
-import { inputVariant } from "./cn";
+import { tv } from "tailwind-variants";
 defineOptions({
   name: "PInput",
   inheritAttrs: false,
@@ -18,7 +18,7 @@ defineOptions({
   }
 });
 const props = defineProps({
-  size: { type: null, required: false },
+  size: { type: String, required: false },
   error: { type: [Boolean, String], required: false },
   min: { type: [Number, String], required: false },
   max: { type: [Number, String], required: false },
@@ -26,23 +26,57 @@ const props = defineProps({
   readonly: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
   password: { type: Boolean, required: false },
-  required: { type: Boolean, required: false },
   autofocus: { type: Boolean, required: false },
-  inputType: { type: null, required: false },
-  inputmode: { type: null, required: false },
+  inputType: { type: String, required: false },
+  inputmode: { type: String, required: false },
   minlength: { type: [Number, String], required: false },
   maxlength: { type: [Number, String], required: false },
   clearable: { type: Boolean, required: false },
-  clearValue: { type: null, required: false },
-  modelValue: { type: null, required: false },
+  clearValue: { type: [String, Number, null], required: false },
+  modelValue: { type: [String, Number, 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 }
+  prefixClass: { type: [String, Array, Object], required: false },
+  suffixClass: { type: [String, Array, Object], required: false },
+  selectOnFocus: { type: Boolean, required: false },
+  defaultPrefixStyle: { type: Boolean, required: false, default: true },
+  defaultSuffixStyle: { type: Boolean, required: false, default: true }
 });
 const emits = defineEmits(["click", "input", "change", "focus", "blur", "keydown", "update:modelValue", "compositionstart", "compositionupdate", "compositionend"]);
+const inputVariant = tv({
+  base: "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",
+  variants: {
+    size: {
+      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"
+    },
+    align: {
+      left: "text-left",
+      center: "text-center",
+      right: "text-right"
+    },
+    disabled: {
+      true: "is-disabled",
+      false: ""
+    },
+    readonly: {
+      true: "is-readonly",
+      false: ""
+    },
+    error: {
+      true: "is-error",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    align: "left",
+    disabled: false,
+    readonly: false,
+    error: false
+  }
+});
 const uniqueId = getUniqueId();
 const inputRef = shallowRef();
 const configProvider = useConfigProvider();
@@ -150,7 +184,7 @@ defineExpose({
       v-if="$slots.prefix"
       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 },
+  { 'px-3 rounded-l-inherit border-r border-gray-300 bg-background-200': defaultPrefixStyle },
   prefixClass
 ]"
       @pointerdown.prevent="NOOP"
@@ -161,7 +195,7 @@ defineExpose({
     <input
       :id="uniqueId"
       ref="inputRef"
-      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"
+      class="px-3 py-0 file:font-medium size-full appearance-none rounded-none 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"
@@ -171,7 +205,6 @@ defineExpose({
       :value="modelValue"
       :readonly="readonly"
       :disabled="disabled"
-      :required="required"
       :inputmode="inputmode"
       :minlength="minlength"
       :maxlength="maxlength"
@@ -192,12 +225,12 @@ defineExpose({
       v-if="password || clearable"
       v-show="modelValue"
       :class="{ 'pr-2': password && clearable }"
-      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"
+      class="pxd-input--icon top-0 right-0 gap-1 flex aspect-square h-full items-center justify-center rounded-r-inherit text-foreground-secondary"
       @pointerdown.prevent="NOOP"
     >
       <button
         v-if="password"
-        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"
+        class="p-1 cursor-pointer 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="toggleType"
       >
         <EyeOffIcon v-if="isPasswordVisible" class="size-3 pointer-events-none" />
@@ -205,7 +238,7 @@ defineExpose({
       </button>
       <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"
+        class="p-1 cursor-pointer 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="clear"
       >
         <CrossIcon class="size-3 pointer-events-none" />
@@ -216,7 +249,7 @@ defineExpose({
       v-if="$slots.suffix"
       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 },
+  { 'px-3 rounded-r-inherit border-l border-gray-300 bg-background-200': defaultSuffixStyle },
   suffixClass
 ]"
       @pointerdown.prevent="NOOP"
@@ -227,5 +260,5 @@ defineExpose({
 </template>
 
 <style>
-.pxd-input:has(.pxd-input--prefix) input{border-bottom-left-radius:0;border-top-left-radius:0}.pxd-input:has(.pxd-input--suffix) input{border-bottom-right-radius:0;border-top-right-radius:0}
+input:-webkit-autofill,input:-webkit-autofill:active,input:-webkit-autofill:focus,input:-webkit-autofill:hover{--autofill-delay:calc(infinity*1s);-webkit-transition:background-color var(--autofill-delay) ease-in-out 0s,color var(--autofill-delay) ease-in-out 0s;transition:background-color var(--autofill-delay) ease-in-out 0s,color var(--autofill-delay) ease-in-out 0s}
 </style>

package/dist/components/input/types.d.ts

@@ -1,6 +1,4 @@
-import type { HTMLAttributes } from 'vue'
-
-import type { ComponentSizeWithXs } from '../shared/props'
+import type { ComponentSizeWithXs, ComponentClass } from '../../types/shared'
 
 export interface InputProps {
   size?: ComponentSizeWithXs
@@ -11,21 +9,20 @@ export interface InputProps {
   readonly?: boolean
   disabled?: boolean
   password?: boolean
-  required?: boolean
   autofocus?: boolean
-  inputType?: HTMLInputElement['type']
-  inputmode?: HTMLAttributes['inputmode']
+  inputType?: string
+  inputmode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'
   minlength?: number | string
   maxlength?: number | string
   clearable?: boolean
-  clearValue?: string | number | null | undefined
-  modelValue?: string | number | null | undefined
+  clearValue?: string | number | null
+  modelValue?: string | number | null
   placeholder?: string
-  prefixStyle?: boolean
-  suffixStyle?: boolean
   prefixClass?: ComponentClass
   suffixClass?: ComponentClass
   selectOnFocus?: boolean
+  defaultPrefixStyle?: boolean
+  defaultSuffixStyle?: boolean
 }
 
 export interface InputEmits {

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

@@ -19,7 +19,6 @@ declare const __VLS_base: import("vue").DefineComponent<IntersectionObserverProp
     "onBefore-hide"?: (() => any) | undefined;
 }>, {
     threshold: number | number[];
-    root: Element | Document | null;
     rootMargin: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -4,13 +4,14 @@ import { useIntersectionObserver } from "../../composables/use-browser-observer"
 import { getCssUnitValue } from "../../utils/format";
 import FragmentContainer from "../_internal/fragment-container.vue";
 defineOptions({
-  name: "PIntersectionObserver"
+  name: "PIntersectionObserver",
+  inheritAttrs: false
 });
 const props = defineProps({
   width: { type: [Number, String], required: false },
   height: { type: [Number, String], required: false },
   keepAlive: { type: Boolean, required: false },
-  root: { type: null, required: false, default: null },
+  root: { type: null, required: false },
   rootMargin: { type: String, required: false, default: "20%" },
   threshold: { type: [Number, Array], required: false, default: 0 }
 });
@@ -18,12 +19,14 @@ const emits = defineEmits(["visible-change", "before-show", "before-hide", "show
 const isVisible = shallowRef(false);
 const containerRef = shallowRef();
 const containerSize = shallowRef({
+  "contain-intrinsic-size": `auto ${getCssUnitValue(props.height)}`,
   "--slot-estimated-width": getCssUnitValue(props.width),
   "--slot-estimated-height": getCssUnitValue(props.height)
 });
 function getRenderedSlotSize() {
   const rect = containerRef.value.getBoundingClientRect();
   containerSize.value = {
+    "contain-intrinsic-size": `auto ${rect.height}px`,
     "--slot-estimated-width": `${rect.width}px`,
     "--slot-estimated-height": `${rect.height}px`
   };
@@ -55,12 +58,18 @@ useIntersectionObserver(
 </script>
 
 <template>
-  <div ref="containerRef" class="pxd-intersection-observer" :style="containerSize">
+  <div
+    ref="containerRef"
+    class="pxd-intersection-observer content-visibility-auto"
+    :style="containerSize"
+    v-bind="$attrs"
+  >
     <KeepAlive v-if="keepAlive">
       <FragmentContainer v-if="isVisible">
         <slot />
       </FragmentContainer>
     </KeepAlive>
+
     <template v-else>
       <slot v-if="isVisible" />
     </template>

package/dist/components/kbd/index.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { useConfigProvider } from "pxd";
+import { useConfigProvider } from "../../contexts/config-provider";
 import { computed } from "vue";
 import { getFallbackValue } from "../../utils/get";
 defineOptions({

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

@@ -13,7 +13,7 @@ declare const __VLS_base: import("vue").DefineComponent<LinkButtonProps, {}, {},
     onClick?: ((args_0: MouseEvent) => any) | undefined;
 }>, {
     align: "left" | "center" | "right";
-    target: HTMLAnchorElement["target"];
+    target: "_blank" | "_self" | "_parent" | "_top";
 }, {}, {}, {}, 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

@@ -4,19 +4,20 @@ import { computed, useAttrs } from "vue";
 import { isExternalLink } from "../../utils/format";
 import PButton from "../button/index.vue";
 defineOptions({
-  name: "PLinkButton"
+  name: "PLinkButton",
+  inheritAttrs: false
 });
 const props = defineProps({
   href: { type: String, required: true },
   text: { type: String, required: false },
   align: { type: String, required: false, default: "left" },
-  target: { type: null, required: false, default: "_self" },
+  target: { type: String, required: false, default: "_self" },
   variant: { type: String, required: false },
   externalIcon: { type: Boolean, required: false }
 });
 const emits = defineEmits(["click"]);
 const attrs = useAttrs();
-const linkButtonAttrs = computed(() => {
+const computedAttrs = computed(() => {
   const { externalIcon, text, href, ...restProps } = props;
   const baseAttrs = {
     ...attrs,
@@ -47,7 +48,7 @@ function onLinkClick(ev) {
 </script>
 
 <template>
-  <PButton v-bind="linkButtonAttrs">
+  <PButton v-bind="computedAttrs">
     <template #prefix>
       <slot name="prefix" />
     </template>

package/dist/components/link-button/types.d.ts

@@ -4,7 +4,7 @@ export interface LinkButtonProps {
   href: string
   text?: string
   align?: 'left' | 'center' | 'right'
-  target?: HTMLAnchorElement['target']
+  target?: '_blank' | '_self' | '_parent' | '_top'
   variant?: ButtonVariant
   externalIcon?: boolean
 }

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

@@ -2,16 +2,20 @@ import type { ListProps, ListOptionSelected } from './types';
 declare function updateListItem(): void;
 declare function isNoVisibleItem(): boolean;
 declare function setActiveValue(newValue?: string): void;
-declare function setActiveValueToFirst(): void;
-declare var __VLS_7: {};
+declare function setFirstAsActive(): void;
+declare var __VLS_7: {}, __VLS_15: {
+    item: import("./types").ListOption;
+};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_7) => any;
+} & {
+    item?: (props: typeof __VLS_15) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<ListProps, {
     setActiveValue: typeof setActiveValue;
     updateListItem: typeof updateListItem;
     isNoVisibleItem: typeof isNoVisibleItem;
-    setActiveValueToFirst: typeof setActiveValueToFirst;
+    setFirstAsActive: typeof setFirstAsActive;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     select: (args_0: MouseEvent, args_1: ListOptionSelected) => any;
     toggle: () => any;
@@ -23,8 +27,7 @@ declare const __VLS_base: import("vue").DefineComponent<ListProps, {
 }>, {
     options: import("./types").ListOption[];
     loop: boolean;
-    keyListener: boolean;
-    itemTransition: boolean;
+    toggleOnKeyPress: boolean;
 }, {}, {}, {}, 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/list/index.vue

@@ -13,8 +13,7 @@ defineOptions({
 const props = defineProps({
   loop: { type: Boolean, required: false, default: true },
   options: { type: Array, required: false, default: () => [] },
-  keyListener: { type: Boolean, required: false, default: true },
-  itemTransition: { type: Boolean, required: false, default: true },
+  toggleOnKeyPress: { type: Boolean, required: false, default: true },
   closeOnPressEscape: { type: Boolean, required: false }
 });
 const emits = defineEmits(["toggle", "escape", "select"]);
@@ -28,15 +27,37 @@ const FUNCTION_KEYS = ["Enter", "Tab", "Home", "End"];
 const PREVENT_DEFAULT_KEYS = [...FUNCTION_KEYS, ...PREV_KEYS, ...NEXT_KEYS];
 const listItemKeys = [];
 const listItemsMap = /* @__PURE__ */ new Map();
+function resolveNavigationTarget(key) {
+  const len = listItemKeys.length;
+  if (key === "Home") {
+    return listItemKeys[0];
+  }
+  if (key === "End") {
+    return listItemKeys[len - 1];
+  }
+  const dir = PREV_KEYS.includes(key) ? -1 : NEXT_KEYS.includes(key) ? 1 : void 0;
+  if (dir === void 0) {
+    return void 0;
+  }
+  if (!activeValue.value) {
+    return dir === -1 ? listItemKeys[len - 1] : listItemKeys[0];
+  }
+  const index = listItemKeys.indexOf(activeValue.value);
+  if (index === -1) {
+    return dir === -1 ? listItemKeys[len - 1] : listItemKeys[0];
+  }
+  if (props.loop) {
+    return listItemKeys[(index + dir + len) % len];
+  }
+  const nextIndex = index + dir;
+  return nextIndex >= 0 && nextIndex < len ? listItemKeys[nextIndex] : void 0;
+}
 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;
@@ -45,38 +66,8 @@ const containerKeydownThrottled = throttle(
       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 if (key === "Home") {
-      newActiveValue = listItemKeys[0];
-    } else if (key === "End") {
-      newActiveValue = listItemKeys[listItemKeyLength - 1];
-    }
-    if (!newActiveValue) {
+    const newActiveValue = resolveNavigationTarget(key);
+    if (newActiveValue === void 0) {
       return;
     }
     if (activeValue.value !== newActiveValue) {
@@ -89,7 +80,7 @@ const containerKeydownThrottled = throttle(
   { edges: ["leading"] }
 );
 function onContainerKeydown(ev) {
-  if (!props.keyListener || listItemKeys.length === 0) {
+  if (!props.toggleOnKeyPress || listItemKeys.length === 0) {
     return;
   }
   if (PREVENT_DEFAULT_KEYS.includes(ev.key)) {
@@ -108,26 +99,31 @@ function onPointerOver(ev) {
   activeValue.value = itemValue;
 }
 function onOptionClick(item, ev) {
-  const { as, onClick, ...option } = item;
   activeValue.value = "";
-  emits("select", ev, option);
+  emits("select", ev, item);
 }
 function updateListItem() {
-  listItemsMap.clear();
-  listItemKeys.splice(0);
+  cleanupListItem();
+  if (!containerRef.value) {
+    return;
+  }
   Array.from(containerRef.value.querySelectorAll(itemSelector)).forEach((el) => {
     const key = el.dataset.value;
     listItemsMap.set(key, el);
     listItemKeys.push(key);
   });
 }
+function cleanupListItem() {
+  listItemsMap.clear();
+  listItemKeys.splice(0);
+}
 function isNoVisibleItem() {
   return listItemsMap.size === 0;
 }
 function setActiveValue(newValue = "") {
   activeValue.value = newValue;
 }
-function setActiveValueToFirst() {
+function setFirstAsActive() {
   setActiveValue(listItemKeys[0]);
 }
 provideListContext({
@@ -143,15 +139,14 @@ onMounted(async () => {
   cachedOn(document, "keydown", onContainerKeydown);
 });
 onBeforeUnmount(() => {
-  listItemsMap.clear();
-  listItemKeys.splice(0);
+  cleanupListItem();
   cachedOff(document, "keydown", onContainerKeydown);
 });
 defineExpose({
   setActiveValue,
   updateListItem,
   isNoVisibleItem,
-  setActiveValueToFirst
+  setFirstAsActive
 });
 </script>
 
@@ -160,18 +155,19 @@ defineExpose({
     ref="containerRef"
     role="list"
     tabindex="-1"
-    :data-transition="itemTransition"
-    class="pxd-list group/list m-0 p-0 max-w-full list-none bg-background-100 outline-none"
+    class="pxd-list m-0 p-0 max-w-full list-none bg-background-100 outline-none"
     v-bind="$attrs"
     @pointerover="onPointerOver"
   >
-    <PScrollable class="p-2 h-full max-h-inherit rounded-inherit" fader-direction="vertical">
+    <PScrollable
+      class="h-full max-h-inherit rounded-inherit"
+      content-class="p-2"
+      fader-direction="vertical"
+    >
       <slot>
-        <PListItem
-          v-for="(option, index) in options"
-          :key="option.value ?? index"
-          v-bind="option"
-        />
+        <PListItem v-for="(option, index) in options" :key="option.value ?? index" v-bind="option">
+          <slot name="item" :item="option" />
+        </PListItem>
       </slot>
     </PScrollable>
   </ul>

package/dist/components/list/types.d.ts

@@ -1,11 +1,8 @@
-import type { ComponentAs, ComponentLabel } from '../shared'
+import type { ComponentAs, ComponentLabel, ComponentOption } from '../../types/shared'
 
-export interface ListOption extends Record<string, any> {
+export interface ListOption extends Partial<ComponentOption> {
   as?: ComponentAs
   type?: 'default' | 'error' | 'warning' | 'separator'
-  label?: ComponentLabel
-  value?: any
-  disabled?: boolean
   description?: ComponentLabel
   onClick?: (item: ListOptionSelected, ev: MouseEvent) => void
 }
@@ -15,8 +12,7 @@ export type ListOptionSelected = Omit<ListOption, 'as' | 'onClick'>
 export interface ListProps {
   loop?: boolean
   options?: ListOption[]
-  keyListener?: boolean
-  itemTransition?: boolean
+  toggleOnKeyPress?: boolean
   closeOnPressEscape?: boolean
 }
 
@@ -25,16 +21,3 @@ export interface ListEmits {
   escape: [KeyboardEvent]
   select: [MouseEvent, ListOptionSelected]
 }
-
-export interface ListItemProps {
-  as?: ListOption['as']
-  type?: ListOption['type']
-  label?: ListOption['label']
-  value?: ListOption['value']
-  disabled?: ListOption['disabled']
-  description?: ListOption['description']
-}
-
-export interface ListItemEmits {
-  click: [ListOptionSelected, MouseEvent]
-}

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

@@ -1,4 +1,4 @@
-import type { ListItemProps } from '../list/types';
+import type { ListItemProps } from './types';
 declare var __VLS_11: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_11) => any;
@@ -8,9 +8,10 @@ declare const __VLS_base: import("vue").DefineComponent<ListItemProps, {}, {}, {
 }, string, import("vue").PublicProps, Readonly<ListItemProps> & Readonly<{
     onClick?: ((args_0: import("../list/types").ListOptionSelected, args_1: MouseEvent) => any) | undefined;
 }>, {
-    type: "default" | "error" | "warning" | "separator";
+    type: "error" | "default" | "warning" | "separator";
+    as: import("../../types/shared").ComponentAs;
     disabled: boolean;
-    as: import("../list/types").ListOption["as"];
+    keywords: string[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;