pxd 0.0.61 → 0.0.63

package/dist/components/index.js

@@ -5,7 +5,9 @@ export { default as Backtop } from "./backtop/index.vue";
 export { default as Badge } from "./badge/index.vue";
 export { default as Book } from "./book/index.vue";
 export { default as Browser } from "./browser/index.vue";
+export { default as Bubble } from "./bubble/index.vue";
 export { default as Button } from "./button/index.vue";
+export { default as ButtonGroup } from "./button-group/index.vue";
 export { default as Carousel } from "./carousel/index.vue";
 export { default as CarouselItem } from "./carousel-item/index.vue";
 export { default as Checkbox } from "./checkbox/index.vue";
@@ -15,6 +17,7 @@ export { default as Choicebox } from "./choicebox/index.vue";
 export { default as ChoiceboxItem } from "./choicebox-item/index.vue";
 export { default as Collapse } from "./collapse/index.vue";
 export { default as CollapseGroup } from "./collapse-group/index.vue";
+export { default as ColorSelector } from "./color-selector/index.vue";
 export { default as CommandMenu } from "./command-menu/index.vue";
 export { default as CommandMenuGroup } from "./command-menu-group/index.vue";
 export { default as ConfigProvider } from "./config-provider/index.vue";
@@ -60,7 +63,9 @@ export { default as RadioGroup } from "./radio-group/index.vue";
 export { default as Resizable } from "./resizable/index.vue";
 export { default as ResizableHandle } from "./resizable-handle/index.vue";
 export { default as ResizablePanel } from "./resizable-panel/index.vue";
+export { default as ScalableText } from "./scalable-text/index.vue";
 export { default as Scrollable } from "./scrollable/index.vue";
+export { default as Separator } from "./separator/index.vue";
 export { default as Skeleton } from "./skeleton/index.vue";
 export { default as Slider } from "./slider/index.vue";
 export { default as Snippet } from "./snippet/index.vue";
@@ -69,6 +74,8 @@ export { default as Stack } from "./stack/index.vue";
 export { default as StatusDot } from "./status-dot/index.vue";
 export { default as Switch } from "./switch/index.vue";
 export { default as SwitchItem } from "./switch-item/index.vue";
+export { default as Tabs } from "./tabs/index.vue";
+export { default as TabsItem } from "./tabs-item/index.vue";
 export { default as Teleport } from "./teleport/index.vue";
 export { default as Text } from "./text/index.vue";
 export { default as Textarea } from "./textarea/index.vue";

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

@@ -15,27 +15,27 @@ declare const __VLS_base: import("vue").DefineComponent<InputProps, {
     focus: typeof focus;
     select: typeof select;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    input: (args_0: string) => any;
-    click: (args_0: MouseEvent) => any;
     change: (args_0: string, args_1: Event) => any;
     "update:modelValue": (args_0: string) => any;
+    input: (args_0: string) => any;
+    click: (args_0: MouseEvent) => any;
     keydown: (args_0: KeyboardEvent) => any;
+    focus: (args_0: FocusEvent) => any;
     blur: (args_0: FocusEvent) => any;
-    compositionend: (args_0: CompositionEvent) => any;
     compositionstart: (args_0: CompositionEvent) => any;
     compositionupdate: (args_0: CompositionEvent) => any;
-    focus: (args_0: FocusEvent) => any;
+    compositionend: (args_0: CompositionEvent) => any;
 }, string, import("vue").PublicProps, Readonly<InputProps> & Readonly<{
-    onInput?: ((args_0: string) => any) | undefined;
-    onClick?: ((args_0: MouseEvent) => any) | undefined;
     onChange?: ((args_0: string, args_1: Event) => any) | undefined;
     "onUpdate:modelValue"?: ((args_0: string) => any) | undefined;
+    onInput?: ((args_0: string) => any) | undefined;
+    onClick?: ((args_0: MouseEvent) => any) | undefined;
     onKeydown?: ((args_0: KeyboardEvent) => any) | undefined;
+    onFocus?: ((args_0: FocusEvent) => any) | undefined;
     onBlur?: ((args_0: FocusEvent) => 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;
+    onCompositionend?: ((args_0: CompositionEvent) => any) | undefined;
 }>, {
     align: "left" | "center" | "right";
     defaultPrefixStyle: boolean;

package/dist/components/input/index.vue

@@ -5,6 +5,7 @@ import EyeOffIcon from "@gdsicon/vue/eye-off";
 import { tv } from "tailwind-variants";
 import { computed, shallowRef } from "vue";
 import { useModelValue } from "../../composables/use-model-value";
+import { BASIC_HEIGHTS } from "../../constants/size";
 import { useConfigProvider } from "../../contexts/config-provider";
 import { NOOP } from "../../utils/event";
 import { isTruthyProp } from "../../utils/format";
@@ -46,10 +47,10 @@ 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"
+      xs: `${BASIC_HEIGHTS.xs} text-sm rounded-sm`,
+      sm: `${BASIC_HEIGHTS.sm} text-sm rounded-md`,
+      md: `${BASIC_HEIGHTS.md} text-sm rounded-md`,
+      lg: `${BASIC_HEIGHTS.lg} text-base rounded-lg`
     },
     align: {
       left: "text-left",

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

@@ -24,11 +24,11 @@ const containerSize = shallowRef({
   "--slot-estimated-height": getCssUnitValue(props.height)
 });
 function getRenderedSlotSize() {
-  const rect = containerRef.value.getBoundingClientRect();
+  const { offsetWidth, offsetHeight } = containerRef.value;
   containerSize.value = {
-    "contain-intrinsic-size": `auto ${rect.height}px`,
-    "--slot-estimated-width": `${rect.width}px`,
-    "--slot-estimated-height": `${rect.height}px`
+    "contain-intrinsic-size": `auto ${offsetHeight}px`,
+    "--slot-estimated-width": `${offsetWidth}px`,
+    "--slot-estimated-height": `${offsetHeight}px`
   };
 }
 function onVisibleChange(isIntersecting) {

package/dist/components/kbd/index.vue

@@ -38,7 +38,7 @@ const internalKey = computed(() => {
 
 <template>
   <kbd
-    class="pxd-keyboard px-1.5 ml-1 inline-flex items-center rounded-md border border-input bg-background-100 text-center font-sans text-nowrap whitespace-nowrap text-gray-1000"
+    class="pxd-keyboard px-1.5 ml-1 inline-flex items-center rounded-md border bg-background-100 text-center font-sans leading-none text-nowrap whitespace-nowrap text-gray-1000"
     :class="computedSize"
     v-bind="$attrs"
   >

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

@@ -1,11 +1,11 @@
 import type { LinkButtonProps } from './types';
-declare var __VLS_9: {}, __VLS_11: {}, __VLS_14: {};
+declare var __VLS_11: {}, __VLS_13: {}, __VLS_16: {};
 type __VLS_Slots = {} & {
-    prefix?: (props: typeof __VLS_9) => any;
+    prefix?: (props: typeof __VLS_11) => any;
 } & {
-    default?: (props: typeof __VLS_11) => any;
+    default?: (props: typeof __VLS_13) => any;
 } & {
-    suffix?: (props: typeof __VLS_14) => any;
+    suffix?: (props: typeof __VLS_16) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<LinkButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     click: (args_0: MouseEvent) => any;

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

@@ -1,27 +1,28 @@
 <script setup>
 import ExternalIcon from "@gdsicon/vue/external";
-import { computed } from "vue";
+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: String, required: false, default: "_self" },
-  variant: { type: String, required: false },
   externalIcon: { type: Boolean, required: false }
 });
 const emits = defineEmits(["click"]);
+const attrs = useAttrs();
 const computedAttrs = computed(() => {
-  const { externalIcon, text, href, ...restProps } = props;
+  const { align, target, href } = props;
   const baseAttrs = {
-    ...restProps,
-    class: "pxd-link-button",
+    align,
+    target,
     rel: "noopener noreferrer",
-    onClick: onLinkClick
+    ...attrs
   };
   if (!href) {
     return baseAttrs;
@@ -45,7 +46,7 @@ function onLinkClick(ev) {
 </script>
 
 <template>
-  <PButton v-bind="computedAttrs">
+  <PButton class="pxd-link-button" v-bind="computedAttrs" @click="onLinkClick">
     <template #prefix>
       <slot name="prefix" />
     </template>

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

@@ -1,11 +1,8 @@
-import type { ButtonVariant } from '../button/types'
-
 export interface LinkButtonProps {
   href: string
   text?: string
   align?: 'left' | 'center' | 'right'
   target?: '_blank' | '_self' | '_parent' | '_top'
-  variant?: ButtonVariant
   externalIcon?: boolean
 }
 

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

@@ -1,33 +1,28 @@
 import type { ListProps, ListOptionSelected } from './types';
-declare function updateListItem(): void;
-declare function isNoVisibleItem(): boolean;
-declare function setActiveValue(newValue?: string): void;
-declare function setFirstAsActive(): void;
-declare var __VLS_7: {}, __VLS_15: {
+declare var __VLS_1: {}, __VLS_9: {
     item: import("./types").ListOption;
 };
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_7) => any;
+    default?: (props: typeof __VLS_1) => any;
 } & {
-    item?: (props: typeof __VLS_15) => any;
+    item?: (props: typeof __VLS_9) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<ListProps, {
-    setActiveValue: typeof setActiveValue;
-    updateListItem: typeof updateListItem;
-    isNoVisibleItem: typeof isNoVisibleItem;
-    setFirstAsActive: typeof setFirstAsActive;
+    isEmpty: () => boolean;
+    refreshItems: () => Promise<void>;
+    setActiveIndex: (index: number) => void;
+    setFirstAsActive: () => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    select: (args_0: MouseEvent, args_1: ListOptionSelected) => any;
+    select: (args_0: ListOptionSelected, args_1: MouseEvent) => any;
     toggle: () => any;
-    escape: (args_0: KeyboardEvent) => any;
 }, string, import("vue").PublicProps, Readonly<ListProps> & Readonly<{
-    onSelect?: ((args_0: MouseEvent, args_1: ListOptionSelected) => any) | undefined;
+    onSelect?: ((args_0: ListOptionSelected, args_1: MouseEvent) => any) | undefined;
     onToggle?: (() => any) | undefined;
-    onEscape?: ((args_0: KeyboardEvent) => any) | undefined;
 }>, {
     options: import("./types").ListOption[];
     loop: boolean;
     toggleOnKeyPress: boolean;
+    defaultActiveIndex: number;
 }, {}, {}, {}, 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

@@ -1,151 +1,84 @@
 <script setup>
-import { nextTick, onBeforeUnmount, onMounted, shallowRef } from "vue";
-import { provideListContext } from "../../contexts/list";
+import { onBeforeUnmount, onMounted, shallowRef, watch } from "vue";
+import { useListNavigation } from "../../composables/use-list-navigation";
+import { provideListContext, useListFilterContext } from "../../contexts/list";
 import { cachedOff, cachedOn } from "../../utils/event";
 import { isServer } from "../../utils/is";
-import { throttle } from "../../utils/throttle";
 import PListItem from "../list-item/index.vue";
-import PScrollable from "../scrollable/index.vue";
 defineOptions({
   name: "PList",
   inheritAttrs: false
 });
 const props = defineProps({
   loop: { type: Boolean, required: false, default: true },
+  visible: { type: Boolean, required: false },
   options: { type: Array, required: false, default: () => [] },
   toggleOnKeyPress: { type: Boolean, required: false, default: true },
-  closeOnPressEscape: { type: Boolean, required: false }
+  defaultActiveIndex: { type: Number, required: false, default: -1 }
 });
-const emits = defineEmits(["toggle", "escape", "select"]);
-const activeValue = shallowRef("");
+const emits = defineEmits(["toggle", "select"]);
 const containerRef = shallowRef();
-const ITEM_CLASS = "pxd-list-item";
-const itemSelector = `.${ITEM_CLASS}:not([data-disabled="true"])`;
-const PREV_KEYS = ["ArrowUp", "ArrowLeft"];
-const NEXT_KEYS = ["ArrowDown", "ArrowRight"];
-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;
+function onOptionClick(item, ev) {
+  emits("select", item, ev);
 }
-const containerKeydownThrottled = throttle(
-  (ev) => {
-    if (ev.ctrlKey || ev.metaKey || ev.altKey || ev.shiftKey) {
-      return;
-    }
-    const { key } = ev;
-    if (key === "Enter") {
-      listItemsMap.get(activeValue.value)?.click();
-      return;
-    }
-    if (key === "Escape" && props.closeOnPressEscape) {
-      emits("escape", ev);
-      return;
-    }
-    const newActiveValue = resolveNavigationTarget(key);
-    if (newActiveValue === void 0) {
-      return;
-    }
-    if (activeValue.value !== newActiveValue) {
-      emits("toggle");
-      activeValue.value = newActiveValue;
+const {
+  activeIndex,
+  isEmpty,
+  onKeydown,
+  setActiveIndex,
+  registerItem,
+  unregisterItem,
+  onPointerOver,
+  refreshItems,
+  setFirstAsActive
+} = useListNavigation(containerRef, {
+  loop: props.loop,
+  itemSelector: `[data-list-item]:not([data-disabled="true"],[hidden])`,
+  toggleOnKeyPress: props.toggleOnKeyPress,
+  defaultActiveIndex: props.defaultActiveIndex,
+  onToggle: () => emits("toggle")
+});
+const filterCtx = useListFilterContext(null);
+if (filterCtx) {
+  watch(
+    () => filterCtx.searchValue.value.trim(),
+    async () => {
+      await refreshItems();
+      setFirstAsActive();
     }
-    listItemsMap.get(activeValue.value)?.scrollIntoView({ block: "nearest" });
-  },
-  100,
-  { edges: ["leading"] }
-);
-function onContainerKeydown(ev) {
-  if (!props.toggleOnKeyPress || listItemKeys.length === 0) {
-    return;
-  }
-  if (PREVENT_DEFAULT_KEYS.includes(ev.key)) {
-    ev.preventDefault();
-  }
-  ev.stopPropagation();
-  containerKeydownThrottled(ev);
-}
-function onPointerOver(ev) {
-  const target = ev.target;
-  const listItem = target.closest(`.${ITEM_CLASS}`);
-  const itemValue = listItem?.dataset.value;
-  if (!listItem || itemValue === void 0) {
-    return;
-  }
-  activeValue.value = itemValue;
-}
-function onOptionClick(item, ev) {
-  activeValue.value = "";
-  emits("select", ev, item);
+  );
 }
-function updateListItem() {
-  cleanupListItem();
-  if (!containerRef.value) {
-    return;
+watch(
+  () => props.visible,
+  (visible) => {
+    if (visible) {
+      cachedOff(document, "keydown", onKeydown);
+      cachedOn(document, "keydown", onKeydown);
+    } else {
+      setActiveIndex(-1);
+      cachedOff(document, "keydown", onKeydown);
+    }
   }
-  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 setFirstAsActive() {
-  setActiveValue(listItemKeys[0]);
-}
+);
 provideListContext({
-  activeValue,
+  activeIndex,
+  registerItem,
+  unregisterItem,
   onOptionClick
 });
 onMounted(async () => {
   if (isServer()) {
     return;
   }
-  await nextTick();
-  updateListItem();
-  cachedOn(document, "keydown", onContainerKeydown);
+  cachedOn(document, "keydown", onKeydown);
 });
 onBeforeUnmount(() => {
-  cleanupListItem();
-  cachedOff(document, "keydown", onContainerKeydown);
+  cachedOff(document, "keydown", onKeydown);
 });
 defineExpose({
-  setActiveValue,
-  updateListItem,
-  isNoVisibleItem,
+  isEmpty,
+  refreshItems,
+  setActiveIndex,
   setFirstAsActive
 });
 </script>
@@ -155,20 +88,14 @@ defineExpose({
     ref="containerRef"
     role="list"
     tabindex="-1"
-    class="pxd-list m-0 p-0 max-w-full list-none bg-background-100 outline-none"
+    class="pxd-list m-0 p-2 max-w-full list-none overflow-auto bg-background-100 outline-none"
     v-bind="$attrs"
     @pointerover="onPointerOver"
   >
-    <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">
-          <slot name="item" :item="option" />
-        </PListItem>
-      </slot>
-    </PScrollable>
+    <slot>
+      <PListItem v-for="(option, index) in options" :key="option.value ?? index" v-bind="option">
+        <slot name="item" :item="option" />
+      </PListItem>
+    </slot>
   </ul>
 </template>

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

@@ -2,7 +2,7 @@ import type { ComponentAs, ComponentLabel, ComponentOption } from '../../types/s
 
 export interface ListOption extends Partial<ComponentOption> {
   as?: ComponentAs
-  type?: 'default' | 'error' | 'warning' | 'separator'
+  type?: 'default' | 'error' | 'warning'
   description?: ComponentLabel
   onClick?: (item: ListOptionSelected, ev: MouseEvent) => void
 }
@@ -11,13 +11,13 @@ export type ListOptionSelected = Omit<ListOption, 'as' | 'onClick'>
 
 export interface ListProps {
   loop?: boolean
+  visible?: boolean
   options?: ListOption[]
   toggleOnKeyPress?: boolean
-  closeOnPressEscape?: boolean
+  defaultActiveIndex?: number
 }
 
 export interface ListEmits {
   toggle: []
-  escape: [KeyboardEvent]
-  select: [MouseEvent, ListOptionSelected]
+  select: [ListOptionSelected, MouseEvent]
 }

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

@@ -8,9 +8,9 @@ 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";
-    as: import("../../types/shared").ComponentAs;
     disabled: boolean;
+    type: "default" | "error" | "warning";
+    as: import("../../types/shared").ComponentAs;
     keywords: string[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -1,7 +1,7 @@
 <script setup>
 import { tv } from "tailwind-variants";
-import { computed, shallowRef } from "vue";
-import { useListContext, useListFilterValue } from "../../contexts/list";
+import { computed, onBeforeUnmount, onMounted, shallowRef } from "vue";
+import { useListContext, useListFilterContext, useListFilterGroupId } from "../../contexts/list";
 import { unrefElement } from "../../utils/ref";
 import { getUniqueId } from "../../utils/uid";
 defineOptions({
@@ -19,73 +19,78 @@ const props = defineProps({
 });
 const emits = defineEmits(["click"]);
 const listItemVariant = tv({
-  base: "pxd-list-item h-10 gap-3 px-2 text-sm flex w-full cursor-pointer items-center rounded-md outline-none [contain-intrinsic-size:auto_2.5rem] content-visibility-auto data-[disabled=true]:pointer-events-none data-[disabled=true]:text-gray-700 motion-safe:transition-colors",
+  base: "pxd-list-item sm:h-10 h-11 gap-3 px-2 scroll-m-2 text-sm flex w-full cursor-pointer items-center rounded-md outline-none [contain-intrinsic-size:auto_2.5rem] content-visibility-auto data-[disabled=true]:pointer-events-none data-[disabled=true]:text-gray-700",
   variants: {
     type: {
-      error: "text-red-900 pointer-coarse:active:bg-red-100 pointer-fine:data-[selected=true]:bg-red-100",
-      warning: "text-amber-900 pointer-coarse:active:bg-amber-100 pointer-fine:data-[selected=true]:bg-amber-100",
-      default: "text-foreground pointer-coarse:active:bg-gray-alpha-100 pointer-fine:data-[selected=true]:bg-gray-alpha-100",
-      separator: "h-0! px-0 m-1.5 w-auto! border-b"
+      error: "text-red-900 active:bg-red-100 pointer-fine:aria-selected:bg-red-100",
+      warning: "text-amber-900 active:bg-amber-100 pointer-fine:aria-selected:bg-amber-100",
+      default: "text-foreground active:bg-gray-alpha-100 pointer-fine:aria-selected:bg-gray-alpha-100"
     }
-  },
-  defaultVariants: {
-    type: "default"
   }
 });
-const { activeValue, onOptionClick } = useListContext();
-const uniqueId = getUniqueId();
-const filterValue = useListFilterValue();
+const { activeIndex, registerItem, unregisterItem, onOptionClick } = useListContext();
+const groupId = useListFilterGroupId(null);
+const filterCtx = useListFilterContext(null);
+const itemId = getUniqueId("list-item");
 const itemRef = shallowRef();
-const searchableText = computed(() => {
-  const keywordsText = props.keywords.length > 0 ? props.keywords.join("").toLowerCase().replace(/\s/g, "") : "";
-  if (props.label) {
-    const propsText = `${String(props.label || "")}${props.description || ""}`.toLowerCase().replace(/\s/g, "");
-    return propsText + keywordsText;
+const itemIndex = shallowRef(-1);
+const isVisible = computed(() => {
+  if (!filterCtx || !filterCtx.searchValue.value.trim()) {
+    return true;
   }
-  if (keywordsText) {
-    return keywordsText;
-  }
-  return getCachedTextContent();
+  return filterCtx.isItemVisible(itemId);
 });
-const isVisible = computed(
-  () => filterValue?.value ? searchableText.value.includes(filterValue.value.toLowerCase()) : true
-);
-const isSelected = computed(() => activeValue.value === uniqueId);
-const isDisabled = computed(() => props.disabled || props.type === "separator");
+const isSelected = computed(() => itemIndex.value !== -1 && itemIndex.value === activeIndex.value);
 const computedClasses = computed(() => {
   return listItemVariant({ type: props.type });
 });
-let cachedTextContent = "";
-function getCachedTextContent() {
-  const text = unrefElement(itemRef.value)?.textContent || "";
-  if (text) {
-    cachedTextContent = text.toLowerCase().replace(/\s/g, "");
-  }
-  return cachedTextContent;
+function getValue() {
+  return `${String(props.label ?? "")}${String(props.description ?? "")}`.trim();
+}
+function getKeywords() {
+  return props.keywords;
 }
 function onItemClick(ev) {
   const { as, keywords, ...restProps } = props;
   emits("click", restProps, ev);
   onOptionClick?.(restProps, ev);
 }
+onMounted(() => {
+  const el = unrefElement(itemRef.value);
+  if (el) {
+    registerItem(el, itemIndex);
+  }
+  filterCtx?.registerItem(itemId, {
+    groupId,
+    getValue,
+    getKeywords
+  });
+});
+onBeforeUnmount(() => {
+  const el = unrefElement(itemRef.value);
+  if (el) {
+    unregisterItem(el);
+  }
+  filterCtx?.unregisterItem(itemId);
+});
 </script>
 
 <template>
   <Component
     :is="as"
-    v-if="isVisible"
     ref="itemRef"
     tabindex="-1"
     role="listitem"
+    data-list-item
     :data-type="type"
-    :data-value="uniqueId"
-    :data-selected="isSelected"
-    :data-disabled="isDisabled"
+    :data-disabled="disabled"
+    :aria-selected="isSelected"
+    :hidden="!isVisible"
     :class="computedClasses"
     v-bind="$attrs"
     @click.prevent.stop="onItemClick"
   >
-    <slot v-if="type !== 'separator'">
+    <slot>
       <span>{{ label }}</span>
       <span v-if="description" class="text-foreground-secondary">{{ description }}</span>
     </slot>