Headless Primitives

Facet includes behavior cores for interactive patterns in src/primitives and re-exports them from the package.

Primitive cores

• createTabs
• createDisclosure
• createSwitch
• createDialog
• createMenu
• createCombobox
• createTooltip
• createAccordion
• createPopover

Each core exposes state + prop generators + an event entrypoint (for example key handling or selection callbacks), and a subscribe hook for adapter wiring.

React, Vue, Svelte, and Web Component adapters

• React: useTabs, useDisclosure, useSwitch, useDialog, useMenu, useCombobox, useTooltip, useAccordion, usePopover
• Vue: useTabs, useDisclosure, useSwitch, useDialog, useMenu, useCombobox, useTooltip, useAccordion, usePopover
• Svelte: createTabsStore, createDisclosureStore, createSwitchStore, createDialogStore, createMenuStore, createComboboxStore, createTooltipStore, createAccordionStore, createPopoverStore
• Web Component: createFacetTabsElement, defineFacetElements

Usage sketch

import { createTabs } from "facet"; // or primitives.createTabs

const tabs = createTabs({ ids: ["a", "b", "c"], onChange: (id) => render(id) });
tabs.next();
tabs.tabProps("a");

import { useTabs } from "facet/adapters/react";

const tabs = useTabs({ ids: ["a", "b", "c"] });
// use tabs.listProps(), tabs.tabProps(id), tabs.panelProps(id), and tabs.onKey(event.key)

Planning note

These cores are intentionally small and framework-agnostic in the current source. The implementation level is pre-release and explicitly marked as a workstream in roadmap context.