@wirekyt/svelte 0.0.1 → 0.0.2

package/dist/components/json-tree-view/props-context.d.ts

@@ -0,0 +1,5 @@
+import type { JsonNodePreviewOptions } from "@wirekyt/dom/json-tree-utils";
+export interface JsonTreeViewOptions extends Partial<JsonNodePreviewOptions> {
+    quotesOnKeys?: boolean;
+}
+export declare const JsonTreeViewPropsProvider: (opts: () => JsonTreeViewOptions) => void, useJsonTreeViewPropsContext: (fallback?: (() => JsonTreeViewOptions) | undefined) => () => JsonTreeViewOptions;

package/dist/components/json-tree-view/props-context.js

@@ -0,0 +1,6 @@
+import { createContext } from "../../utils";
+export const [JsonTreeViewPropsProvider, useJsonTreeViewPropsContext] = createContext({
+    name: "JsonTreeViewPropsContext",
+    hookName: "useJsonTreeViewPropsContext",
+    providerName: "<JsonTreeViewPropsProvider />",
+});

package/dist/components/json-tree-view/root-provider.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import type { JsonNode } from "@wirekyt/dom/json-tree-utils";
+
+  import type { UseJsonTreeViewReturn } from "./use-view.svelte";
+
+  import { TreeViewRootProvider, type TreeViewRootProviderProps } from "../tree-view";
+  import { JsonTreeViewPropsProvider } from "./props-context";
+
+  export interface JsonTreeViewRootProviderProps extends TreeViewRootProviderProps<JsonNode> {}
+
+  const { value, ...props }: JsonTreeViewRootProviderProps = $props();
+
+  const jsonTreeView = $derived(value() as unknown as UseJsonTreeViewReturn);
+
+  JsonTreeViewPropsProvider(() => jsonTreeView().options);
+</script>
+
+<TreeViewRootProvider data-scope="json-tree-view" value={jsonTreeView} {...props}>
+  {@render props.children?.()}
+</TreeViewRootProvider>

package/dist/components/json-tree-view/root-provider.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { JsonNode } from "@wirekyt/dom/json-tree-utils";
+import { type TreeViewRootProviderProps } from "../tree-view";
+export interface JsonTreeViewRootProviderProps extends TreeViewRootProviderProps<JsonNode> {
+}
+declare const RootProvider: import("svelte").Component<JsonTreeViewRootProviderProps, {}, "">;
+type RootProvider = ReturnType<typeof RootProvider>;
+export default RootProvider;

package/dist/components/json-tree-view/root.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+  import { createSplitProps } from "../../utils";
+  import {
+    type JsonNode,
+    getRootNode,
+    nodeToString,
+    nodeToValue,
+  } from "@wirekyt/dom/json-tree-utils";
+
+  import { TreeView, createTreeCollection, type TreeViewRootProps } from "../tree-view";
+  import { getBranchValues } from "./get-branch-value";
+  import { type JsonTreeViewOptions, JsonTreeViewPropsProvider } from "./props-context";
+
+  export interface JsonTreeViewRootBaseProps extends JsonTreeViewOptions {
+    data: unknown;
+
+    defaultExpandedDepth?: number;
+  }
+
+  export interface JsonTreeViewRootProps
+    extends Omit<TreeViewRootProps<JsonNode>, "collection">, JsonTreeViewRootBaseProps {}
+
+  const { data, defaultExpandedDepth, ...props }: JsonTreeViewRootProps = $props();
+
+  const splitJsonTreeViewProps = createSplitProps<JsonTreeViewOptions>();
+
+  const [jsonTreeProps, localProps] = $derived(
+    splitJsonTreeViewProps(props, [
+      "maxPreviewItems",
+      "collapseStringsAfterLength",
+      "quotesOnKeys",
+      "groupArraysAfterLength",
+      "showNonenumerable",
+    ]),
+  );
+
+  const collection = $derived(
+    createTreeCollection<JsonNode>({
+      nodeToValue,
+      nodeToString,
+      rootNode: getRootNode(data),
+    }),
+  );
+
+  const defaultExpandedValue = $derived(
+    defaultExpandedDepth != null ? getBranchValues(collection, defaultExpandedDepth) : undefined,
+  );
+
+  JsonTreeViewPropsProvider(() => jsonTreeProps);
+</script>
+
+<TreeView.Root data-scope="json-tree-view" {collection} {defaultExpandedValue} {...localProps}>
+  {@render props.children?.()}
+</TreeView.Root>

package/dist/components/json-tree-view/root.svelte.d.ts

@@ -0,0 +1,12 @@
+import { type JsonNode } from "@wirekyt/dom/json-tree-utils";
+import { type TreeViewRootProps } from "../tree-view";
+import { type JsonTreeViewOptions } from "./props-context";
+export interface JsonTreeViewRootBaseProps extends JsonTreeViewOptions {
+    data: unknown;
+    defaultExpandedDepth?: number;
+}
+export interface JsonTreeViewRootProps extends Omit<TreeViewRootProps<JsonNode>, "collection">, JsonTreeViewRootBaseProps {
+}
+declare const Root: import("svelte").Component<JsonTreeViewRootProps, {}, "">;
+type Root = ReturnType<typeof Root>;
+export default Root;

package/dist/components/json-tree-view/tree.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import { createSplitProps } from "../../utils";
+
+  import { TreeView, useTreeViewContext, type TreeViewTreeProps } from "../tree-view";
+  import JsonTreeViewNode, { type JsonTreeViewNodeBaseProps } from "./node.svelte";
+
+  export interface JsonTreeViewTreeBaseProps extends JsonTreeViewNodeBaseProps {}
+
+  export interface JsonTreeViewTreeProps extends TreeViewTreeProps, JsonTreeViewTreeBaseProps {}
+
+  const props: JsonTreeViewTreeProps = $props();
+
+  const splitTreeNodeProps = createSplitProps<JsonTreeViewNodeBaseProps>();
+  const [nodeProps, treeProps] = $derived(
+    splitTreeNodeProps(props, ["arrow", "indentGuide", "renderValue"]),
+  );
+
+  const tree = useTreeViewContext();
+  const children = $derived(tree().collection.getNodeChildren(tree().collection.rootNode));
+</script>
+
+<TreeView.Tree data-scope="json-tree-view" {...treeProps}>
+  {#each children as child, index (index)}
+    <JsonTreeViewNode node={child} indexPath={[index]} {...nodeProps} />
+  {/each}
+</TreeView.Tree>

package/dist/components/json-tree-view/tree.svelte.d.ts

@@ -0,0 +1,9 @@
+import { type TreeViewTreeProps } from "../tree-view";
+import { type JsonTreeViewNodeBaseProps } from "./node.svelte";
+export interface JsonTreeViewTreeBaseProps extends JsonTreeViewNodeBaseProps {
+}
+export interface JsonTreeViewTreeProps extends TreeViewTreeProps, JsonTreeViewTreeBaseProps {
+}
+declare const Tree: import("svelte").Component<JsonTreeViewTreeProps, {}, "">;
+type Tree = ReturnType<typeof Tree>;
+export default Tree;

package/dist/components/json-tree-view/use-view.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Accessor } from "../../core";
+import type { PropTypes } from "../../core";
+import type * as treeView from "@wirekyt/dom/machines/tree-view";
+import type { MaybeFunction } from "@wirekyt/dom/utils";
+import { type JsonNode } from "@wirekyt/dom/json-tree-utils";
+import type { JsonTreeViewOptions } from "./props-context";
+import { type UseTreeViewProps } from "../tree-view";
+export interface UseJsonTreeViewProps extends Omit<UseTreeViewProps<JsonNode>, "collection">, JsonTreeViewOptions {
+    data: unknown;
+    defaultExpandedDepth?: number;
+}
+export interface UseJsonTreeViewReturn extends Accessor<treeView.Api<PropTypes, JsonNode> & {
+    options: JsonTreeViewOptions;
+}> {
+}
+export declare const useJsonTreeView: (props: MaybeFunction<UseJsonTreeViewProps>) => UseJsonTreeViewReturn;

package/dist/components/json-tree-view/use-view.svelte.js

@@ -0,0 +1,34 @@
+import { createSplitProps } from "../../utils";
+import { runIfFn } from "../../utils";
+import { getRootNode, nodeToString, nodeToValue, } from "@wirekyt/dom/json-tree-utils";
+import { untrack } from "svelte";
+import { createTreeCollection, useTreeView } from "../tree-view";
+import { getBranchValues } from "./get-branch-value";
+const splitJsonTreeViewProps = createSplitProps();
+export const useJsonTreeView = (props) => {
+    const [jsonTreeProps, localProps] = splitJsonTreeViewProps(runIfFn(props), [
+        "maxPreviewItems",
+        "collapseStringsAfterLength",
+        "quotesOnKeys",
+        "groupArraysAfterLength",
+        "showNonenumerable",
+    ]);
+    const machineProps = $derived.by(() => {
+        const { data, defaultExpandedDepth, ...restProps } = localProps;
+        const collection = createTreeCollection({
+            nodeToValue,
+            nodeToString,
+            rootNode: getRootNode(data),
+        });
+        const defaultExpandedValue = untrack(() => defaultExpandedDepth != null ? getBranchValues(collection, defaultExpandedDepth) : undefined);
+        return {
+            collection,
+            defaultExpandedValue,
+            ...restProps,
+            typeahead: false,
+        };
+    });
+    const treeView = useTreeView(() => machineProps);
+    const api = $derived({ ...treeView(), options: jsonTreeProps });
+    return () => api;
+};

package/dist/components/json-tree-view/value-node.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import type { JsonNodeHastElement } from "@wirekyt/dom/json-tree-utils";
+  import type { Snippet } from "svelte";
+
+  import JsonTreeViewValueNode from "./value-node.svelte";
+
+  interface JsonTreeViewValueNodeProps {
+    node: JsonNodeHastElement;
+    renderValue?: Snippet<[JsonNodeHastElement]>;
+  }
+
+  let { node, renderValue }: JsonTreeViewValueNodeProps = $props();
+</script>
+
+{#if node.type === "text"}
+  {#if renderValue}
+    {@render renderValue(node)}
+  {:else}
+    {node.value}
+  {/if}
+{:else}
+  <svelte:element
+    this={node.tagName}
+    data-root={node.properties.root ? "" : undefined}
+    data-type={node.properties.nodeType}
+    data-kind={node.properties.kind}
+  >
+    {#each node.children as child, index (index)}
+      <JsonTreeViewValueNode node={child} {renderValue} />
+    {/each}
+  </svelte:element>
+{/if}

package/dist/components/json-tree-view/value-node.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { JsonNodeHastElement } from "@wirekyt/dom/json-tree-utils";
+import type { Snippet } from "svelte";
+interface JsonTreeViewValueNodeProps {
+    node: JsonNodeHastElement;
+    renderValue?: Snippet<[JsonNodeHastElement]>;
+}
+declare const ValueNode: import("svelte").Component<JsonTreeViewValueNodeProps, {}, "">;
+type ValueNode = ReturnType<typeof ValueNode>;
+export default ValueNode;

package/dist/components/listbox/anatomy.d.ts

@@ -0,0 +1 @@
+export declare const listboxAnatomy: import("@wirekyt/dom/anatomy").AnatomyInstance<"label" | "input" | "root" | "content" | "item" | "valueText" | "itemGroup" | "itemGroupLabel" | "itemIndicator" | "itemText" | "empty">;

package/dist/components/listbox/anatomy.js

@@ -0,0 +1,2 @@
+import { anatomy } from "@wirekyt/dom/machines/listbox";
+export const listboxAnatomy = anatomy.extendWith("empty");

package/dist/components/listbox/content.svelte

@@ -0,0 +1,20 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from "../../core";
+
+  export interface ListboxContentBaseProps extends PolymorphicProps<"div">, RefAttribute {}
+  export interface ListboxContentProps extends Assign<HTMLProps<"div">, ListboxContentBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from "../../core";
+
+  import { Wire } from "../factory";
+  import { useListboxContext } from "./use-context";
+
+  let { ref = $bindable(null), ...props }: ListboxContentProps = $props();
+
+  const listbox = useListboxContext();
+  const mergedProps = $derived(mergeProps(listbox().getContentProps(), props));
+</script>
+
+<Wire as="div" bind:ref {...mergedProps} />

package/dist/components/listbox/content.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from "../../core";
+export interface ListboxContentBaseProps extends PolymorphicProps<"div">, RefAttribute {
+}
+export interface ListboxContentProps extends Assign<HTMLProps<"div">, ListboxContentBaseProps> {
+}
+declare const Content: import("svelte").Component<ListboxContentProps, {}, "ref">;
+type Content = ReturnType<typeof Content>;
+export default Content;

package/dist/components/listbox/context.svelte

@@ -0,0 +1,21 @@
+<script module lang="ts">
+  import type { Snippet } from "svelte";
+
+  import type { CollectionItem } from "../collection";
+
+  export interface ListboxContextProps<T extends CollectionItem> {
+    render: Snippet<[UseListboxContext<T>]>;
+  }
+</script>
+
+<script lang="ts" generics="T extends CollectionItem">
+  import type { UseListboxContext } from "./use-context";
+
+  import { useListboxContext } from "./use-context";
+
+  let { render }: ListboxContextProps<T> = $props();
+
+  const context = useListboxContext();
+</script>
+
+{@render render(context)}

package/dist/components/listbox/context.svelte.d.ts

@@ -0,0 +1,30 @@
+import type { Snippet } from "svelte";
+import type { CollectionItem } from "../collection";
+export interface ListboxContextProps<T extends CollectionItem> {
+    render: Snippet<[UseListboxContext<T>]>;
+}
+import type { UseListboxContext } from "./use-context";
+declare function $$render<T extends CollectionItem>(): {
+    props: ListboxContextProps<T>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends CollectionItem> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends CollectionItem>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends CollectionItem>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Context: $$IsomorphicComponent;
+type Context<T extends CollectionItem> = InstanceType<typeof Context<T>>;
+export default Context;

package/dist/components/listbox/empty.svelte

@@ -0,0 +1,23 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from "../../core";
+
+  export interface ListboxEmptyBaseProps extends PolymorphicProps<"div">, RefAttribute {}
+  export interface ListboxEmptyProps extends Assign<HTMLProps<"div">, ListboxEmptyBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { Wire } from "../factory";
+  import { listboxAnatomy } from "./anatomy";
+  import { useListboxContext } from "./use-context";
+
+  const parts = listboxAnatomy.build();
+
+  let { ref = $bindable(null), ...props }: ListboxEmptyProps = $props();
+
+  const listbox = useListboxContext();
+  const isEmpty = $derived(listbox().collection.size === 0);
+</script>
+
+{#if isEmpty}
+  <Wire as="div" bind:ref {...parts.empty.attrs} {...props} role="presentation" />
+{/if}

package/dist/components/listbox/empty.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from "../../core";
+export interface ListboxEmptyBaseProps extends PolymorphicProps<"div">, RefAttribute {
+}
+export interface ListboxEmptyProps extends Assign<HTMLProps<"div">, ListboxEmptyBaseProps> {
+}
+declare const Empty: import("svelte").Component<ListboxEmptyProps, {}, "ref">;
+type Empty = ReturnType<typeof Empty>;
+export default Empty;

package/dist/components/listbox/index.d.ts

@@ -0,0 +1,21 @@
+export type { HighlightChangeDetails as ListboxHighlightChangeDetails, ScrollToIndexDetails as ListboxScrollToIndexDetails, SelectionDetails as ListboxSelectionDetails, SelectionMode as ListboxSelectionMode, ValueChangeDetails as ListboxValueChangeDetails, } from "@wirekyt/dom/machines/listbox";
+export { createListCollection, type CollectionItem, type ListCollection } from "../collection";
+export { default as ListboxContent, type ListboxContentBaseProps, type ListboxContentProps, } from "./content.svelte";
+export { default as ListboxContext, type ListboxContextProps } from "./context.svelte";
+export { default as ListboxEmpty, type ListboxEmptyBaseProps, type ListboxEmptyProps, } from "./empty.svelte";
+export { default as ListboxInput, type ListboxInputBaseProps, type ListboxInputProps, } from "./input.svelte";
+export { default as ListboxItem, type ListboxItemBaseProps, type ListboxItemProps, } from "./item.svelte";
+export { default as ListboxItemContext, type ListboxItemContextProps } from "./item-context.svelte";
+export { default as ListboxItemGroup, type ListboxItemGroupBaseProps, type ListboxItemGroupProps, } from "./item-group.svelte";
+export { default as ListboxItemGroupLabel, type ListboxItemGroupLabelBaseProps, type ListboxItemGroupLabelProps, } from "./item-group-label.svelte";
+export { default as ListboxItemIndicator, type ListboxItemIndicatorBaseProps, type ListboxItemIndicatorProps, } from "./item-indicator.svelte";
+export { default as ListboxItemText, type ListboxItemTextBaseProps, type ListboxItemTextProps, } from "./item-text.svelte";
+export { default as ListboxLabel, type ListboxLabelBaseProps, type ListboxLabelProps, } from "./label.svelte";
+export { default as ListboxRoot, type ListboxRootBaseProps, type ListboxRootProps, type ListboxRootComponent, type ListboxRootComponentProps, } from "./root.svelte";
+export { default as ListboxRootProvider, type ListboxRootProviderBaseProps, type ListboxRootProviderProps, type ListboxRootProviderComponent, } from "./root-provider.svelte";
+export { default as ListboxValueText, type ListboxValueTextBaseProps, type ListboxValueTextProps, } from "./value-text.svelte";
+export { listboxAnatomy } from "./anatomy";
+export { useListbox, type UseListboxProps, type UseListboxReturn } from "./use.svelte";
+export { useListboxContext, type UseListboxContext } from "./use-context";
+export { useListboxItemContext, type UseListboxItemContext } from "./use-item-context";
+export * as Listbox from "./listbox";

package/dist/components/listbox/index.js

@@ -0,0 +1,20 @@
+export { createListCollection } from "../collection";
+export { default as ListboxContent, } from "./content.svelte";
+export { default as ListboxContext } from "./context.svelte";
+export { default as ListboxEmpty, } from "./empty.svelte";
+export { default as ListboxInput, } from "./input.svelte";
+export { default as ListboxItem, } from "./item.svelte";
+export { default as ListboxItemContext } from "./item-context.svelte";
+export { default as ListboxItemGroup, } from "./item-group.svelte";
+export { default as ListboxItemGroupLabel, } from "./item-group-label.svelte";
+export { default as ListboxItemIndicator, } from "./item-indicator.svelte";
+export { default as ListboxItemText, } from "./item-text.svelte";
+export { default as ListboxLabel, } from "./label.svelte";
+export { default as ListboxRoot, } from "./root.svelte";
+export { default as ListboxRootProvider, } from "./root-provider.svelte";
+export { default as ListboxValueText, } from "./value-text.svelte";
+export { listboxAnatomy } from "./anatomy";
+export { useListbox } from "./use.svelte";
+export { useListboxContext } from "./use-context";
+export { useListboxItemContext } from "./use-item-context";
+export * as Listbox from "./listbox";

package/dist/components/listbox/input.svelte

@@ -0,0 +1,26 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from "../../core";
+  import type { InputProps } from "@wirekyt/dom/machines/listbox";
+
+  export interface ListboxInputBaseProps
+    extends InputProps, PolymorphicProps<"input">, RefAttribute {}
+  export interface ListboxInputProps extends Assign<HTMLProps<"input">, ListboxInputBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from "../../core";
+  import { createSplitProps } from "../../utils";
+
+  import { Wire } from "../factory";
+  import { useListboxContext } from "./use-context";
+
+  let { ref = $bindable(null), ...props }: ListboxInputProps = $props();
+
+  const [inputProps, localProps] = $derived(
+    createSplitProps<InputProps>()(props, ["autoHighlight", "keyboardPriority"]),
+  );
+  const listbox = useListboxContext();
+  const mergedProps = $derived(mergeProps(listbox().getInputProps(inputProps), localProps));
+</script>
+
+<Wire as="input" bind:ref {...mergedProps} />

package/dist/components/listbox/input.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from "../../core";
+import type { InputProps } from "@wirekyt/dom/machines/listbox";
+export interface ListboxInputBaseProps extends InputProps, PolymorphicProps<"input">, RefAttribute {
+}
+export interface ListboxInputProps extends Assign<HTMLProps<"input">, ListboxInputBaseProps> {
+}
+declare const Input: import("svelte").Component<ListboxInputProps, {}, "ref">;
+type Input = ReturnType<typeof Input>;
+export default Input;

package/dist/components/listbox/item-context.svelte

@@ -0,0 +1,19 @@
+<script module lang="ts">
+  import type { Snippet } from "svelte";
+
+  export interface ListboxItemContextProps {
+    render: Snippet<[UseListboxItemContext]>;
+  }
+</script>
+
+<script lang="ts">
+  import type { UseListboxItemContext } from "./use-item-context";
+
+  import { useListboxItemContext } from "./use-item-context";
+
+  let { render }: ListboxItemContextProps = $props();
+
+  const context = useListboxItemContext();
+</script>
+
+{@render render(context)}

package/dist/components/listbox/item-context.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from "svelte";
+export interface ListboxItemContextProps {
+    render: Snippet<[UseListboxItemContext]>;
+}
+import type { UseListboxItemContext } from "./use-item-context";
+declare const ItemContext: import("svelte").Component<ListboxItemContextProps, {}, "">;
+type ItemContext = ReturnType<typeof ItemContext>;
+export default ItemContext;

package/dist/components/listbox/item-group-label.svelte

@@ -0,0 +1,27 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from "../../core";
+
+  export interface ListboxItemGroupLabelBaseProps extends PolymorphicProps<"div">, RefAttribute {}
+  export interface ListboxItemGroupLabelProps extends Assign<
+    HTMLProps<"div">,
+    ListboxItemGroupLabelBaseProps
+  > {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from "../../core";
+
+  import { Wire } from "../factory";
+  import { useListboxContext } from "./use-context";
+  import { useListboxItemGroupPropsContext } from "./use-item-group-props";
+
+  let { ref = $bindable(null), ...props }: ListboxItemGroupLabelProps = $props();
+
+  const listbox = useListboxContext();
+  const groupProps = useListboxItemGroupPropsContext();
+  const mergedProps = $derived(
+    mergeProps(listbox().getItemGroupLabelProps({ htmlFor: groupProps().id }), props),
+  );
+</script>
+
+<Wire as="div" bind:ref {...mergedProps} />

package/dist/components/listbox/item-group-label.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from "../../core";
+export interface ListboxItemGroupLabelBaseProps extends PolymorphicProps<"div">, RefAttribute {
+}
+export interface ListboxItemGroupLabelProps extends Assign<HTMLProps<"div">, ListboxItemGroupLabelBaseProps> {
+}
+declare const ItemGroupLabel: import("svelte").Component<ListboxItemGroupLabelProps, {}, "ref">;
+type ItemGroupLabel = ReturnType<typeof ItemGroupLabel>;
+export default ItemGroupLabel;

package/dist/components/listbox/item-group.svelte

@@ -0,0 +1,29 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from "../../core";
+
+  export interface ListboxItemGroupBaseProps extends PolymorphicProps<"div">, RefAttribute {}
+  export interface ListboxItemGroupProps extends Assign<
+    HTMLProps<"div">,
+    ListboxItemGroupBaseProps
+  > {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from "../../core";
+
+  import { Wire } from "../factory";
+  import { useListboxContext } from "./use-context";
+  import { ListboxItemGroupPropsProvider } from "./use-item-group-props";
+
+  let { ref = $bindable(null), ...props }: ListboxItemGroupProps = $props();
+  const providedId = $props.id();
+
+  const listbox = useListboxContext();
+
+  const groupProps = $derived({ id: providedId });
+  const mergedProps = $derived(mergeProps(listbox().getItemGroupProps(groupProps), props));
+
+  ListboxItemGroupPropsProvider(() => groupProps);
+</script>
+
+<Wire as="div" bind:ref {...mergedProps} />

package/dist/components/listbox/item-group.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from "../../core";
+export interface ListboxItemGroupBaseProps extends PolymorphicProps<"div">, RefAttribute {
+}
+export interface ListboxItemGroupProps extends Assign<HTMLProps<"div">, ListboxItemGroupBaseProps> {
+}
+declare const ItemGroup: import("svelte").Component<ListboxItemGroupProps, {}, "ref">;
+type ItemGroup = ReturnType<typeof ItemGroup>;
+export default ItemGroup;

package/dist/components/listbox/item-indicator.svelte

@@ -0,0 +1,25 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from "../../core";
+
+  export interface ListboxItemIndicatorBaseProps extends PolymorphicProps<"div">, RefAttribute {}
+  export interface ListboxItemIndicatorProps extends Assign<
+    HTMLProps<"div">,
+    ListboxItemIndicatorBaseProps
+  > {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from "../../core";
+
+  import { Wire } from "../factory";
+  import { useListboxContext } from "./use-context";
+  import { useListboxItemPropsContext } from "./use-item-props-context";
+
+  let { ref = $bindable(null), ...props }: ListboxItemIndicatorProps = $props();
+
+  const listbox = useListboxContext();
+  const itemProps = useListboxItemPropsContext();
+  const mergedProps = $derived(mergeProps(listbox().getItemIndicatorProps(itemProps()), props));
+</script>
+
+<Wire as="div" bind:ref {...mergedProps} />

package/dist/components/listbox/item-indicator.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from "../../core";
+export interface ListboxItemIndicatorBaseProps extends PolymorphicProps<"div">, RefAttribute {
+}
+export interface ListboxItemIndicatorProps extends Assign<HTMLProps<"div">, ListboxItemIndicatorBaseProps> {
+}
+declare const ItemIndicator: import("svelte").Component<ListboxItemIndicatorProps, {}, "ref">;
+type ItemIndicator = ReturnType<typeof ItemIndicator>;
+export default ItemIndicator;

package/dist/components/listbox/item-text.svelte

@@ -0,0 +1,25 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from "../../core";
+
+  export interface ListboxItemTextBaseProps extends PolymorphicProps<"span">, RefAttribute {}
+  export interface ListboxItemTextProps extends Assign<
+    HTMLProps<"span">,
+    ListboxItemTextBaseProps
+  > {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from "../../core";
+
+  import { Wire } from "../factory";
+  import { useListboxContext } from "./use-context";
+  import { useListboxItemPropsContext } from "./use-item-props-context";
+
+  let { ref = $bindable(null), ...props }: ListboxItemTextProps = $props();
+
+  const listbox = useListboxContext();
+  const itemProps = useListboxItemPropsContext();
+  const mergedProps = $derived(mergeProps(listbox().getItemTextProps(itemProps()), props));
+</script>
+
+<Wire as="span" bind:ref {...mergedProps} />

package/dist/components/listbox/item-text.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from "../../core";
+export interface ListboxItemTextBaseProps extends PolymorphicProps<"span">, RefAttribute {
+}
+export interface ListboxItemTextProps extends Assign<HTMLProps<"span">, ListboxItemTextBaseProps> {
+}
+declare const ItemText: import("svelte").Component<ListboxItemTextProps, {}, "ref">;
+type ItemText = ReturnType<typeof ItemText>;
+export default ItemText;