@pantograph/vue 0.34.43 → 0.35.1

package/README.md

@@ -7,11 +7,13 @@
 Pantograph's Vue 3 component library, built with TypeScript and token-based design. Ready to use in your apps with light/dark token switching and simple, consistent APIs.
 
 ## Install
+
 ```bash
 npm i @pantograph/vue
 ```
 
 ## Quick usage
+
 ```vue
 <script setup lang="ts">
 import { Button } from '@pantograph/vue'
@@ -19,13 +21,30 @@ import '@pantograph/styles'
 </script>
 
 <template>
-  <Button>Click me</Button>
+  <Button variant="primary">Click me</Button>
 </template>
 ```
 
+## Key Features
+
+- **80+ WAI-ARIA components** built on top of `reka-ui` for robust accessibility
+- **Base → Public pattern**: Internal base components (e.g., `BaseButton`) are wrapped and styled into public Pantograph components (e.g., `Button`)
+- **CSS-in-JS styling**: Style imports are handled via `useCssInJs` from `useConfig()` — no `<style>` tags required for component styling
+- **Dark mode**: Activated via CSS class (`pantograph-dark` or `pantograph-light`) on the root element; never uses `.dark` CSS rules
+- **Token system**: All CSS variables use the `--pt-*` prefix for consistent theming
+- **Strict exports**: Named exports only; no default exports and no subpath imports (e.g., `@pantograph/vue/Button` is not allowed)
+- **Component structure**: Each component follows a standardized layout: `.vue` + `index.ts` + `types.ts` + `constant.ts` + `model.ts` + `context.ts`
+
+## Navigation
+
+For a complete map of all packages, components, and import paths, refer to the centralized navigation index:
+- [`.ai/NAVIGATION.md`](../../.ai/NAVIGATION.md)
+
 ## Documentation
+
 For full documentation and live examples, visit the Pantograph docs:
 
 - Docs: [Introduction & Stories](https://panto.stg.bounteco.com/story/src-story-introduction-story-js)
-
-
+- Component APIs: [`.ai/component-contracts.json`](../../.ai/component-contracts.json)
+- Import paths: [`.ai/symbol-map.json`](../../.ai/symbol-map.json)
+- Run `npm run ai:index` to regenerate indexes after structural changes

package/dist/index.d.ts

@@ -15953,331 +15953,341 @@ export declare type VisibleColorPair = Exclude<ColorPair, ColorPairHsv>;
 export { }
 
 
+/** component declare **/
 declare module 'vue' {
     interface GlobalComponents {
-        Image: DefineComponent<ImageProps, ImageSlots>;
+        Accordion: DefineComponent<AccordionProps, AccordionSlots, AccordionEmits>;
+        AccordionItem: DefineComponent<AccordionItemProps, AccordionItemSlots>;
     }
 }
 
 
 declare module 'vue' {
     interface GlobalComponents {
-        CheckboxGroup: DefineComponent<CheckboxGroupProps, Record<string, any>, CheckboxGroupEmits>;
+        Breadcrumb: DefineComponent<BreadcrumbProps, BreadcrumbSlots, BreadcrumbEmits>;
     }
 }
 
 
 declare module 'vue' {
     interface GlobalComponents {
-        AlertDialog: DefineComponent<AlertDialogProps, AlertDialogSlots, AlertDialogEmits>;
+        Badge: DefineComponent<BadgeProps, BadgeSlots>;
     }
 }
 
 
 declare module 'vue' {
     interface GlobalComponents {
-        Card: DefineComponent<CardProps, CardSlots>;
+        Avatar: DefineComponent<AvatarProps, AvatarSlots, AvatarEmits>;
     }
 }
 
 
 declare module 'vue' {
     interface GlobalComponents {
-        Combobox: DefineComponent<ComboboxProps, ComboboxSlots, ComboboxEmits>;
-        ComboboxInput: DefineComponent<ComboboxInputProps>;
-        ComboboxOption: DefineComponent;
+        ColorPicker: DefineComponent<ColorPickerProps, undefined, ColorPickerEmits>;
     }
 }
 
 
 declare module 'vue' {
     interface GlobalComponents {
-        ActionButton: DefineComponent<ActionButtonProps, ActionButtonSlots>;
+        CheckboxGroup: DefineComponent<CheckboxGroupProps, Record<string, any>, CheckboxGroupEmits>;
     }
 }
 
 
 declare module 'vue' {
     interface GlobalComponents {
-        Menu: DefineComponent<MenuProps, MenuSlots, MenuEmits>;
-        MenuItemWrapper: DefineComponent<MenuItemWrapperProps, SubMenuSlots>;
+        Upload: DefineComponent<UploadProps, UploadSlots, UploadEmits>;
+        UploadList: DefineComponent<UploadProps, UploadSlots, UploadEmits>;
+        UploadTrigger: DefineComponent<Record<string, any>, Record<string, any>, UploadTriggerEmits>;
     }
 }
 
 
+/**
+ * Global component declaration for TypeScript support
+ * Enables <Tooltip> usage in templates without explicit import
+ */
 declare module 'vue' {
     interface GlobalComponents {
-        Blanket: DefineComponent<BlanketProps>;
+        Tooltip: DefineComponent<TooltipProps, TooltipSlots>;
+        TooltipProvider: DefineComponent<TooltipProviderProps>;
     }
 }
 
 
 declare module 'vue' {
     interface GlobalComponents {
-        ColorSwatchGroup: DefineComponent<ColorSwatchGroupProps, ColorSwatchGroupSlots, ColorSwatchGroupEmits>;
+        Toast: DefineComponent<ToastProps, ToastSlots, ToastEmits>;
     }
 }
 
 
-/** component declare **/
 declare module 'vue' {
     interface GlobalComponents {
-        Accordion: DefineComponent<AccordionProps, AccordionSlots, AccordionEmits>;
-        AccordionItem: DefineComponent<AccordionItemProps, AccordionItemSlots>;
+        ConfigProvider: DefineComponent<ConfigProviderProps, ConfigProviderSlots>;
     }
 }
 
 
 declare module 'vue' {
     interface GlobalComponents {
-        RadioGroup: DefineComponent<RadioGroupProps, Record<string, any>, RadioGroupEmits>;
-        RadioGroupItem: DefineComponent<RadioGroupItemProps, RadioGroupSlots, RadioGroupItemEmits>;
+        Table: DefineComponent<TableProps, Record<string, any>, Record<string, any>>;
+        Th: DefineComponent<ThProps, ThSlots>;
+        Td: DefineComponent<TdProps, TdSlots>;
+        Tr: DefineComponent<TrProps>;
+        TBody: DefineComponent<TBodyProps>;
+        THead: DefineComponent<THeadProps>;
+        TFoot: DefineComponent<TFootProps>;
     }
 }
 
 
 declare module 'vue' {
     interface GlobalComponents {
-        Drawer: DefineComponent<DrawerProps, DrawerSlots, DrawerEmits>;
-        DrawerTitle: DefineComponent<DrawerTitleProps, DrawerTitleSlots>;
+        IndentLevel: DefineComponent<IndentLevelProps>;
     }
 }
 
 
 declare module 'vue' {
     interface GlobalComponents {
-        InputNumber: DefineComponent<InputNumberProps, InputNumberSlots, InputNumberEmits>;
+        IconButton: DefineComponent<IconButtonProps, IconButtonSlots>;
     }
 }
 
 
 declare module 'vue' {
     interface GlobalComponents {
-        ChipGroup: DefineComponent<ChipGroupProps, ChipGroupSlots, ChipGroupEmits>;
+        Popover: DefineComponent<PopoverProps, PopoverSlots, PopoverEmits>;
     }
 }
 
 
 declare module 'vue' {
     interface GlobalComponents {
-        AvatarGroup: DefineComponent<AvatarGroupProps, AvatarGroupSlots>;
+        Banner: DefineComponent<BannerProps, BannerSlots, BannerEmits>;
     }
 }
 
 
 declare module 'vue' {
     interface GlobalComponents {
-        IconButton: DefineComponent<IconButtonProps, IconButtonSlots>;
+        Chip: DefineComponent<ChipProps, ChipSlots, ChipEmits>;
     }
 }
 
 
 declare module 'vue' {
     interface GlobalComponents {
-        Banner: DefineComponent<BannerProps, BannerSlots, BannerEmits>;
+        FormValidation: DefineComponent<FormValidationProps>;
     }
 }
 
 
 declare module 'vue' {
     interface GlobalComponents {
-        ColorPicker: DefineComponent<ColorPickerProps, undefined, ColorPickerEmits>;
+        ColorSwatch: DefineComponent<ColorSwatchProps, ColorSwatchSlots, undefined>;
     }
 }
 
 
 declare module 'vue' {
     interface GlobalComponents {
-        Spinner: DefineComponent<SpinnerProps, SpinnerSlots, SpinnerEmits>;
+        Divider: DefineComponent<DividerProps>;
     }
 }
 
 
 declare module 'vue' {
     interface GlobalComponents {
-        SubMenu: DefineComponent<SubMenuProps, SubMenuSlots>;
+        GraphicalObjectGroup: DefineComponent<GraphicalObjectGroupProps, GraphicalObjectGroupSlots>;
     }
 }
 
 
 declare module 'vue' {
     interface GlobalComponents {
-        Alert: DefineComponent<AlertProps, AlertSlots, AlertEmits>;
+        Combobox: DefineComponent<ComboboxProps, ComboboxSlots, ComboboxEmits>;
+        ComboboxInput: DefineComponent<ComboboxInputProps>;
+        ComboboxOption: DefineComponent;
     }
 }
 
 
 declare module 'vue' {
     interface GlobalComponents {
-        Rate: DefineComponent<RateProps, RateSlots, RateEmits>;
+        GraphicalObject: DefineComponent<GraphicalObjectProps, GraphicalObjectSlots>;
     }
 }
 
 
 declare module 'vue' {
     interface GlobalComponents {
-        Button: DefineComponent<ButtonProps, ButtonSlots>;
+        Drawer: DefineComponent<DrawerProps, DrawerSlots, DrawerEmits>;
+        DrawerTitle: DefineComponent<DrawerTitleProps, DrawerTitleSlots>;
     }
 }
 
 
 declare module 'vue' {
     interface GlobalComponents {
-        Segmented: DefineComponent<SegmentedProps, SegmentedSlots, SegmentedEmits>;
+        Spinner: DefineComponent<SpinnerProps, SpinnerSlots, SpinnerEmits>;
     }
 }
 
 
 declare module 'vue' {
     interface GlobalComponents {
-        Toast: DefineComponent<ToastProps, ToastSlots, ToastEmits>;
+        Dialog: DefineComponent<DialogProps, DialogSlots, DialogEmits>;
+        DialogTitle: DefineComponent<DialogTitleProps, DialogTitleSlots>;
     }
 }
 
 
 declare module 'vue' {
     interface GlobalComponents {
-        Popover: DefineComponent<PopoverProps, PopoverSlots, PopoverEmits>;
+        Segmented: DefineComponent<SegmentedProps, SegmentedSlots, SegmentedEmits>;
     }
 }
 
 
 declare module 'vue' {
     interface GlobalComponents {
-        Icon: DefineComponent<IconProps>;
+        Tree: DefineComponent<TreeProps, TreeSlots, TreeEmits>;
+        TreeNode: DefineComponent<TreeNodeProps, TreeNodeSlots>;
     }
 }
 
 
 declare module 'vue' {
     interface GlobalComponents {
-        Input: DefineComponent<InputProps, InputSlots, InputEmits>;
+        Alert: DefineComponent<AlertProps, AlertSlots, AlertEmits>;
     }
 }
 
 
 declare module 'vue' {
     interface GlobalComponents {
-        GraphicalObjectGroup: DefineComponent<GraphicalObjectGroupProps, GraphicalObjectGroupSlots>;
+        InputGroup: DefineComponent<InputGroupProps>;
     }
 }
 
 
 declare module 'vue' {
     interface GlobalComponents {
-        Switch: DefineComponent<SwitchProps, SwitchSlots, SwitchEmits>;
+        Input: DefineComponent<InputProps, InputSlots, InputEmits>;
     }
 }
 
 
 declare module 'vue' {
     interface GlobalComponents {
-        Badge: DefineComponent<BadgeProps, BadgeSlots>;
+        Empty: DefineComponent<EmptyProps, EmptySlots>;
     }
 }
 
 
 declare module 'vue' {
     interface GlobalComponents {
-        Dialog: DefineComponent<DialogProps, DialogSlots, DialogEmits>;
-        DialogTitle: DefineComponent<DialogTitleProps, DialogTitleSlots>;
+        Kbd: DefineComponent<KbdProps, KbdSlots>;
     }
 }
 
 
 declare module 'vue' {
     interface GlobalComponents {
-        DropZone: DefineComponent<DropZoneProps, DropZoneSlots, DropZoneEmits>;
+        ActionButton: DefineComponent<ActionButtonProps, ActionButtonSlots>;
     }
 }
 
 
 declare module 'vue' {
     interface GlobalComponents {
-        Table: DefineComponent<TableProps, Record<string, any>, Record<string, any>>;
-        Th: DefineComponent<ThProps, ThSlots>;
-        Td: DefineComponent<TdProps, TdSlots>;
-        Tr: DefineComponent<TrProps>;
-        TBody: DefineComponent<TBodyProps>;
-        THead: DefineComponent<THeadProps>;
-        TFoot: DefineComponent<TFootProps>;
+        Select: DefineComponent<SelectProps, SelectSlots, SelectEmits>;
+        SelectOption: DefineComponent<SelectOptionProps, SelectOptionSlots>;
+        SelectLabel: DefineComponent;
     }
 }
 
 
 declare module 'vue' {
     interface GlobalComponents {
-        PageIndicator: DefineComponent<PageIndicatorProps, PageIndicatorSlots, PageIndicatorEmits>;
+        PinInput: DefineComponent<PinInputProps, undefined, PinInputEmits>;
     }
 }
 
 
 declare module 'vue' {
     interface GlobalComponents {
-        ConfigProvider: DefineComponent<ConfigProviderProps, ConfigProviderSlots>;
+        ColorTrigger: DefineComponent<ColorTriggerProps, ColorTriggerSlots>;
     }
 }
 
 
 declare module 'vue' {
     interface GlobalComponents {
-        HoverCard: DefineComponent<HoverCardProps, HoverCardSlots, HoverCardEmits>;
+        Steps: DefineComponent<StepsProps, StepsSlots, StepsEmits>;
+        Step: DefineComponent<StepItemProps, StepItemSlots>;
     }
 }
 
 
 declare module 'vue' {
     interface GlobalComponents {
-        ColorTrigger: DefineComponent<ColorTriggerProps, ColorTriggerSlots>;
+        Rate: DefineComponent<RateProps, RateSlots, RateEmits>;
     }
 }
 
 
 declare module 'vue' {
     interface GlobalComponents {
-        ButtonGroup: DefineComponent<ButtonGroupProps>;
+        Shortcut: DefineComponent<ShortcutProps, ShortcutSlots>;
     }
 }
 
 
 declare module 'vue' {
     interface GlobalComponents {
-        Skeleton: DefineComponent<SkeletonProps>;
+        ColorSwatchGroup: DefineComponent<ColorSwatchGroupProps, ColorSwatchGroupSlots, ColorSwatchGroupEmits>;
     }
 }
 
 
 declare module 'vue' {
     interface GlobalComponents {
-        Chip: DefineComponent<ChipProps, ChipSlots, ChipEmits>;
+        RadioGroup: DefineComponent<RadioGroupProps, Record<string, any>, RadioGroupEmits>;
+        RadioGroupItem: DefineComponent<RadioGroupItemProps, RadioGroupSlots, RadioGroupItemEmits>;
     }
 }
 
 
 declare module 'vue' {
     interface GlobalComponents {
-        Empty: DefineComponent<EmptyProps, EmptySlots>;
+        AvatarGroup: DefineComponent<AvatarGroupProps, AvatarGroupSlots>;
     }
 }
 
 
 declare module 'vue' {
     interface GlobalComponents {
-        PinInput: DefineComponent<PinInputProps, undefined, PinInputEmits>;
+        Blanket: DefineComponent<BlanketProps>;
     }
 }
 
 
 declare module 'vue' {
     interface GlobalComponents {
-        IndentLevel: DefineComponent<IndentLevelProps>;
+        Switch: DefineComponent<SwitchProps, SwitchSlots, SwitchEmits>;
     }
 }
 
 
 declare module 'vue' {
     interface GlobalComponents {
-        Checkbox: DefineComponent<CheckboxProps, CheckboxSlots, CheckboxEmits>;
+        Label: DefineComponent<LabelProps, LabelSlots>;
     }
 }
 
@@ -16291,151 +16301,145 @@ declare module 'vue' {
 
 declare module 'vue' {
     interface GlobalComponents {
-        ColorSwatch: DefineComponent<ColorSwatchProps, ColorSwatchSlots, undefined>;
+        MenuItem: DefineComponent<MenuItemProps, MenuItemSlots>;
     }
 }
 
 
 declare module 'vue' {
     interface GlobalComponents {
-        MenuItem: DefineComponent<MenuItemProps, MenuItemSlots>;
+        AlertDialog: DefineComponent<AlertDialogProps, AlertDialogSlots, AlertDialogEmits>;
     }
 }
 
 
 declare module 'vue' {
     interface GlobalComponents {
-        FormValidation: DefineComponent<FormValidationProps>;
+        Card: DefineComponent<CardProps, CardSlots>;
     }
 }
 
 
 declare module 'vue' {
     interface GlobalComponents {
-        Link: DefineComponent<LinkProps, LinkSlots, LinkEmits>;
+        Textarea: DefineComponent<TextareaProps, Record<string, any>, TextareaEmits>;
     }
 }
 
 
 declare module 'vue' {
     interface GlobalComponents {
-        Label: DefineComponent<LabelProps, LabelSlots>;
+        InputNumber: DefineComponent<InputNumberProps, InputNumberSlots, InputNumberEmits>;
     }
 }
 
 
 declare module 'vue' {
     interface GlobalComponents {
-        GraphicalObject: DefineComponent<GraphicalObjectProps, GraphicalObjectSlots>;
+        Indicator: DefineComponent<IndicatorProps>;
     }
 }
 
 
 declare module 'vue' {
     interface GlobalComponents {
-        Divider: DefineComponent<DividerProps>;
+        Button: DefineComponent<ButtonProps, ButtonSlots>;
     }
 }
 
 
 declare module 'vue' {
     interface GlobalComponents {
-        Tree: DefineComponent<TreeProps, TreeSlots, TreeEmits>;
-        TreeNode: DefineComponent<TreeNodeProps, TreeNodeSlots>;
+        ChipGroup: DefineComponent<ChipGroupProps, ChipGroupSlots, ChipGroupEmits>;
     }
 }
 
 
 declare module 'vue' {
     interface GlobalComponents {
-        Pagination: DefineComponent<PaginationProps, Record<string, any>, PaginationEmits>;
+        Tabs: DefineComponent<TabsProps, Record<string, any>, TabsEmits>;
+        TabList: DefineComponent<TabListProps, TabListSlots>;
+        TabTrigger: DefineComponent<TabTriggerProps, TabTriggerSlots>;
+        TabContent: DefineComponent;
     }
 }
 
 
 declare module 'vue' {
     interface GlobalComponents {
-        Kbd: DefineComponent<KbdProps, KbdSlots>;
+        Checkbox: DefineComponent<CheckboxProps, CheckboxSlots, CheckboxEmits>;
     }
 }
 
 
 declare module 'vue' {
     interface GlobalComponents {
-        Upload: DefineComponent<UploadProps, UploadSlots, UploadEmits>;
-        UploadList: DefineComponent<UploadProps, UploadSlots, UploadEmits>;
-        UploadTrigger: DefineComponent<Record<string, any>, Record<string, any>, UploadTriggerEmits>;
+        DropZone: DefineComponent<DropZoneProps, DropZoneSlots, DropZoneEmits>;
     }
 }
 
 
 declare module 'vue' {
     interface GlobalComponents {
-        Indicator: DefineComponent<IndicatorProps>;
+        Skeleton: DefineComponent<SkeletonProps>;
     }
 }
 
 
 declare module 'vue' {
     interface GlobalComponents {
-        InputGroup: DefineComponent<InputGroupProps>;
+        SubMenu: DefineComponent<SubMenuProps, SubMenuSlots>;
     }
 }
 
 
 declare module 'vue' {
     interface GlobalComponents {
-        Textarea: DefineComponent<TextareaProps, Record<string, any>, TextareaEmits>;
+        Image: DefineComponent<ImageProps, ImageSlots>;
     }
 }
 
 
 declare module 'vue' {
     interface GlobalComponents {
-        Avatar: DefineComponent<AvatarProps, AvatarSlots, AvatarEmits>;
+        ButtonGroup: DefineComponent<ButtonGroupProps>;
     }
 }
 
 
-/**
- * Global component declaration for TypeScript support
- * Enables <Tooltip> usage in templates without explicit import
- */
 declare module 'vue' {
     interface GlobalComponents {
-        Tooltip: DefineComponent<TooltipProps, TooltipSlots>;
-        TooltipProvider: DefineComponent<TooltipProviderProps>;
+        Modal: DefineComponent<ModalProps, ModalSlots, ModalEmits>;
+        ModalTitle: DefineComponent<ModalTitleProps, ModalTitleSlots>;
     }
 }
 
 
 declare module 'vue' {
     interface GlobalComponents {
-        Breadcrumb: DefineComponent<BreadcrumbProps, BreadcrumbSlots, BreadcrumbEmits>;
+        ScrollContainer: DefineComponent<ScrollContainerProps>;
     }
 }
 
 
 declare module 'vue' {
     interface GlobalComponents {
-        Select: DefineComponent<SelectProps, SelectSlots, SelectEmits>;
-        SelectOption: DefineComponent<SelectOptionProps, SelectOptionSlots>;
-        SelectLabel: DefineComponent;
+        Menu: DefineComponent<MenuProps, MenuSlots, MenuEmits>;
+        MenuItemWrapper: DefineComponent<MenuItemWrapperProps, SubMenuSlots>;
     }
 }
 
 
 declare module 'vue' {
     interface GlobalComponents {
-        Modal: DefineComponent<ModalProps, ModalSlots, ModalEmits>;
-        ModalTitle: DefineComponent<ModalTitleProps, ModalTitleSlots>;
+        HoverCard: DefineComponent<HoverCardProps, HoverCardSlots, HoverCardEmits>;
     }
 }
 
 
 declare module 'vue' {
     interface GlobalComponents {
-        ScrollContainer: DefineComponent<ScrollContainerProps>;
+        Pagination: DefineComponent<PaginationProps, Record<string, any>, PaginationEmits>;
     }
 }
 
@@ -16449,25 +16453,21 @@ declare module 'vue' {
 
 declare module 'vue' {
     interface GlobalComponents {
-        Tabs: DefineComponent<TabsProps, Record<string, any>, TabsEmits>;
-        TabList: DefineComponent<TabListProps, TabListSlots>;
-        TabTrigger: DefineComponent<TabTriggerProps, TabTriggerSlots>;
-        TabContent: DefineComponent;
+        Icon: DefineComponent<IconProps>;
     }
 }
 
 
 declare module 'vue' {
     interface GlobalComponents {
-        Shortcut: DefineComponent<ShortcutProps, ShortcutSlots>;
+        Link: DefineComponent<LinkProps, LinkSlots, LinkEmits>;
     }
 }
 
 
 declare module 'vue' {
     interface GlobalComponents {
-        Steps: DefineComponent<StepsProps, StepsSlots, StepsEmits>;
-        Step: DefineComponent<StepItemProps, StepItemSlots>;
+        PageIndicator: DefineComponent<PageIndicatorProps, PageIndicatorSlots, PageIndicatorEmits>;
     }
 }