@avento-space/ts-ui 1.2.3 → 1.2.5

package/README.md

@@ -1,187 +1,180 @@
-# Avento TS UI
-
-**Web Components UI library — framework-agnostic, signal-driven, tree-shakeable.**
-
-Build reactive UIs with native web components. Works with any framework (React, Vue, Angular, or vanilla JS) or no framework at all.
-
----
-
-## Features
-
-- **50+ production-ready components** — buttons, modals, tables, forms, overlays, and more
-- **Shadow DOM** — encapsulated styles, no leaks
-- **Signal-based reactivity** — fine-grained updates without virtual DOM
-- **Tree-shakeable** — import only what you use
-- **Framework-agnostic** — use directly as HTML tags or via React wrappers
-- **Accessible** — WAI-ARIA patterns, keyboard navigation, focus management
-- **Icon system** — 3000+ SVG icons built in
-- **Zero dependencies** — only TypeScript
-
----
-
-## Quick Start
-
-### Install
-
-```bash
-npm install @avento-space/ts-ui
-```
-
-### Usage (vanilla JS / any framework)
-
-```typescript
-import { defineComponents } from '@avento-space/ts-ui';
-
-// Register all components (prefix: u-)
-defineComponents();
-
-// Components are now available as HTML tags
-```
-
-```html
-<u-button variant="primary">Click me</u-button>
-<u-modal title="Hello" open>
-  <p>Modal content</p>
-</u-modal>
-```
-
-### Usage with React
-
-```tsx
-import { defineComponents } from '@avento-space/ts-ui';
-import { Button, Modal } from '@avento-space/ts-ui/react';
-
-defineComponents();
-
-function App() {
-  return (
-    <Button variant="primary" onClick={() => alert('Hi!')}>
-      Click me
-    </Button>
-  );
-}
-```
-
----
-
-## Components
-
-| Component | Tag | Description |
-|-----------|-----|-------------|
-| Accordion | `<u-accordion>` | Collapsible sections |
-| Badge | `<u-badge>` | Status indicators, labels |
-| Box | `<u-box>` | Semantic layout wrapper |
-| Breadcrumb | `<u-breadcrumb>` | Navigation trail |
-| Button | `<u-button>` | Primary, secondary, ghost, danger, link |
-| Calendar | `<u-calendar>` | Date picker |
-| Card | `<u-card>` | Content container with header/footer |
-| Checkbox | `<u-checkbox>` | Toggle option |
-| Collection | `<u-collection>` | Managed item selection |
-| Combobox | `<u-combobox>` | Autocomplete input |
-| CommandPalette | `<u-command-palette>` | ⌘K command menu |
-| Container | `<u-container>` | Max-width layout wrapper |
-| ContextMenu | `<u-context-menu>` | Right-click menu |
-| DataTable | `<u-data-table>` | Sortable, filterable table |
-| DialogRoot | `<u-dialog-root>` | Dialog base behavior |
-| DismissableLayer | `<u-dismissable-layer>` | Click-outside handler |
-| Drawer | `<u-drawer>` | Slide-in panel |
-| Dropdown | `<u-dropdown>` | Menu button |
-| Field | `<u-field>` | Label + input wrapper |
-| FocusManager | `<u-focus-manager>` | Keyboard focus orchestration |
-| FocusScope | `<u-focus-scope>` | Isolated focus zone |
-| FocusTrap | `<u-focus-trap>` | Tab cycle trapping |
-| Form | `<u-form>` | Form validation wrapper |
-| Grid | `<u-grid>` | CSS Grid layout |
-| Hoverable | `<u-hoverable>` | Hover state behavior |
-| Input | `<u-input>` | Text input |
-| KeyboardNavigation | `<u-keyboard-navigation>` | Arrow key navigation |
-| Label | `<u-label>` | Form label |
-| Link | `<u-link>` | Styled anchor |
-| List | `<u-list>` | Keyed list renderer |
-| LiveRegion | `<u-live-region>` | Screen reader announcements |
-| Modal | `<u-modal>` | Dialog overlay |
-| Overlay | `<u-overlay>` | Backdrop layer |
-| Popover | `<u-popover>` | Hover/focus tooltip-like |
-| Popper | `<u-popper>` | Positioning utility |
-| Portal | `<u-portal>` | Teleport to another node |
-| Presence | `<u-presence>` | Mount/unmount animation |
-| Pressable | `<u-pressable>` | Press interaction behavior |
-| RadioGroup | `<u-radio-group>` | Radio button group |
-| RouterView | `<u-router-view>` | Router outlet |
-| Select | `<u-select>` | Native select replacement |
-| Slot | `<u-slot>` | Named slot content |
-| Sortable | `<u-sortable>` | Drag-to-reorder list |
-| Spacer | `<u-spacer>` | Flex spacing utility |
-| Stack / HStack | `<u-stack>` / `<u-hstack>` | Flexbox layouts |
-| Switch | `<u-switch>` | Toggle control |
-| Table | `<u-table>` | Data table |
-| Tabs | `<u-tabs>` | Tabbed interface |
-| Text | `<u-text>` | Typography with size/weight/color |
-| Textarea | `<u-textarea>` | Multi-line input |
-| Toast | `<u-toast>` | Notification popup |
-| TooltipRoot | `<u-tooltip-root>` | Hover tooltip |
-| Transition | `<u-transition>` | CSS transition behavior |
-| Tree | `<u-tree>` | Hierarchical list |
-| VisuallyHidden | `<u-visually-hidden>` | Screen reader-only content |
-| Icon | `<u-icon>` | 3000+ SVG icons |
-
----
-
-## Styling
-
-All components use **Shadow DOM** for style encapsulation. Override styles via:
-
-```css
-/* CSS parts */
-u-button::part(button) { font-weight: 700; }
-u-modal::part(modal-wrapper) { border-radius: 16px; }
-```
-
-Design tokens are available as CSS custom properties:
-
-```css
-:root {
-  --u-color-primary: #3b82f6;
-  --u-color-text: #111827;
-  --u-color-text-muted: #4b5563;
-  --u-radius-2xl: 12px;
-}
-```
-
----
-
-## React Wrappers
-
-```tsx
-import { Button, Modal, Tabs, Text, Badge, Card } from '@avento-space/ts-ui/react';
-```
-
-Each web component has a React wrapper that forwards props and refs.
-
----
-
-## Icons
-
-```html
-<u-icon name="heart"></u-icon>
-<u-icon name="settings" size="32" stroke-width="1.5"></u-icon>
-```
-
-3000+ icons available. See the icon registry for all names.
-
----
-
-## Scripts
-
-| Command | Description |
-|---------|-------------|
-| `npm run build` | Build with tsup (ESM + .d.ts) |
-| `npm test` | Run vitest |
-| `npm run typecheck` | TypeScript check |
-| `npm run lint` | ESLint |
-
----
-
-## License
-
-MIT
+# Avento TS UI
+
+**Web Components UI library — framework-agnostic, signal-driven, tree-shakeable.**
+
+Build reactive UIs with native web components. Works with any framework (React, Vue, Angular, or vanilla JS) or no framework at all.
+
+---
+
+## Features
+
+- **50+ production-ready components** — buttons, modals, tables, forms, overlays, and more
+- **Shadow DOM** — encapsulated styles, no leaks
+- **Signal-based reactivity** — fine-grained updates without virtual DOM
+- **Tree-shakeable** — import only what you use
+- **Framework-agnostic** — use directly as HTML tags or via React wrappers
+- **Accessible** — WAI-ARIA patterns, keyboard navigation, focus management
+- **Icon system** — 3000+ SVG icons built in
+- **Zero dependencies** — only TypeScript
+
+---
+
+## Quick Start
+
+### Install
+
+```bash
+npm install @avento-space/ts-ui
+```
+
+### Usage (vanilla JS / any framework)
+
+```typescript
+import { defineComponents } from '@avento-space/ts-ui';
+
+// Register all components (prefix: u-)
+defineComponents();
+
+// Components are now available as HTML tags
+```
+
+```html
+<u-button variant="primary">Click me</u-button>
+<u-modal title="Hello" open>
+  <p>Modal content</p>
+</u-modal>
+```
+
+### Usage with React
+
+```tsx
+import { defineComponents } from '@avento-space/ts-ui';
+import { Button, Modal } from '@avento-space/ts-ui/react';
+
+defineComponents();
+
+function App() {
+  return (
+    <Button variant="primary" onClick={() => alert('Hi!')}>
+      Click me
+    </Button>
+  );
+}
+```
+
+---
+
+## Components
+
+| Component | Tag | Description |
+|-----------|-----|-------------|
+| Accordion | `<u-accordion>` | Collapsible sections |
+| Badge | `<u-badge>` | Status indicators, labels |
+| Box | `<u-box>` | Semantic layout wrapper |
+| Breadcrumb | `<u-breadcrumb>` | Navigation trail |
+| Button | `<u-button>` | Primary, secondary, ghost, danger, link |
+| Calendar | `<u-calendar>` | Date picker |
+| Card | `<u-card>` | Content container with header/footer |
+| Checkbox | `<u-checkbox>` | Toggle option |
+| Collection | `<u-collection>` | Managed item selection |
+| Combobox | `<u-combobox>` | Autocomplete input |
+| CommandPalette | `<u-command-palette>` | ⌘K command menu |
+| Container | `<u-container>` | Max-width layout wrapper |
+| ContextMenu | `<u-context-menu>` | Right-click menu |
+| DataTable | `<u-data-table>` | Sortable, filterable table |
+| DialogRoot | `<u-dialog-root>` | Dialog base behavior |
+| DismissableLayer | `<u-dismissable-layer>` | Click-outside handler |
+| Drawer | `<u-drawer>` | Slide-in panel |
+| Dropdown | `<u-dropdown>` | Menu button |
+| Field | `<u-field>` | Label + input wrapper |
+| FocusManager | `<u-focus-manager>` | Keyboard focus orchestration |
+| FocusScope | `<u-focus-scope>` | Isolated focus zone |
+| FocusTrap | `<u-focus-trap>` | Tab cycle trapping |
+| Form | `<u-form>` | Form validation wrapper |
+| Grid | `<u-grid>` | CSS Grid layout |
+| Hoverable | `<u-hoverable>` | Hover state behavior |
+| Input | `<u-input>` | Text input |
+| KeyboardNavigation | `<u-keyboard-navigation>` | Arrow key navigation |
+| Label | `<u-label>` | Form label |
+| Link | `<u-link>` | Styled anchor |
+| List | `<u-list>` | Keyed list renderer |
+| LiveRegion | `<u-live-region>` | Screen reader announcements |
+| Modal | `<u-modal>` | Dialog overlay |
+| Overlay | `<u-overlay>` | Backdrop layer |
+| Popover | `<u-popover>` | Hover/focus tooltip-like |
+| Popper | `<u-popper>` | Positioning utility |
+| Portal | `<u-portal>` | Teleport to another node |
+| Presence | `<u-presence>` | Mount/unmount animation |
+| Pressable | `<u-pressable>` | Press interaction behavior |
+| RadioGroup | `<u-radio-group>` | Radio button group |
+| RouterView | `<u-router-view>` | Router outlet |
+| Select | `<u-select>` | Native select replacement |
+| Slot | `<u-slot>` | Named slot content |
+| Sortable | `<u-sortable>` | Drag-to-reorder list |
+| Spacer | `<u-spacer>` | Flex spacing utility |
+| Stack / HStack | `<u-stack>` / `<u-hstack>` | Flexbox layouts |
+| Switch | `<u-switch>` | Toggle control |
+| Table | `<u-table>` | Data table |
+| Tabs | `<u-tabs>` | Tabbed interface |
+| Text | `<u-text>` | Typography with size/weight/color |
+| Textarea | `<u-textarea>` | Multi-line input |
+| Toast | `<u-toast>` | Notification popup |
+| TooltipRoot | `<u-tooltip-root>` | Hover tooltip |
+| Transition | `<u-transition>` | CSS transition behavior |
+| Tree | `<u-tree>` | Hierarchical list |
+| VisuallyHidden | `<u-visually-hidden>` | Screen reader-only content |
+| Icon | `<u-icon>` | 3000+ SVG icons |
+
+---
+
+## Styling
+
+Components use **Shadow DOM**, so global CSS (Tailwind, modules, etc.) cannot style internal elements. Use **CSS custom properties** for design tokens and **`::part()` selectors** for targeting specific internal elements.
+
+> 📖 **Full documentation:** [`docs/theming.md`](./docs/theming.md) — includes the complete token table, stacking/z-index guide, React patterns, migration notes, and the optional [Tailwind plugin](docs/theming.md#7-optional-tailwind-plugin) for autocomplete-friendly `--u-*` utilities.
+
+```css
+/* Token override — affects all components */
+:root { --u-color-primary: #7c3aed; }
+
+/* Part selector — styles the internal <button> */
+u-button::part(button) { font-weight: 700; text-transform: uppercase; }
+```
+
+---
+
+## React Wrappers
+
+```tsx
+import { Button, Modal, Tabs, Text, Badge, Card } from '@avento-space/ts-ui/react';
+```
+
+Each web component has a React wrapper that forwards props and refs.
+
+---
+
+## Icons
+
+```html
+<u-icon name="heart"></u-icon>
+<u-icon name="settings" size="32" stroke-width="1.5"></u-icon>
+```
+
+3000+ icons available. See the icon registry for all names.
+
+---
+
+## Scripts
+
+| Command | Description |
+|---------|-------------|
+| `npm run build` | Build with tsup (ESM + .d.ts) |
+| `npm test` | Run vitest |
+| `npm run typecheck` | TypeScript check |
+| `npm run lint` | ESLint |
+
+---
+
+## License
+
+MIT

package/dist/{card.wc-CLzyZAbJ.d.ts → card.wc-83Ws3o27.d.ts}

@@ -1624,4 +1624,4 @@ declare class UCard extends UElement {
     _mount(): void;
 }
 
-export { type TreeProps as $, type AccordionProps as A, type BadgeProps as B, type CalendarProps as C, type DataTableProps as D, type RouterViewProps as E, type FieldProps as F, type GridProps as G, type HoverableProps as H, type InputProps as I, type SelectProps as J, type KeyboardNavigationProps as K, type LabelProps as L, type ModalProps as M, type SortableProps as N, type OverlayProps as O, type PopoverProps as P, type SpacerProps as Q, type RadioGroupProps as R, type StackProps as S, type SwitchProps as T, type TableProps as U, type TabsProps as V, type TextProps as W, type TextareaProps as X, type ToastProps as Y, type TooltipRootProps as Z, type TransitionProps as _, type AnimateProps as a, UModal as a$, type VirtualListProps as a0, type VisuallyHiddenProps as a1, type AccordionItemProps as a2, type AnimatePreset as a3, type BadgeSize as a4, type BadgeVariant as a5, type BoxAs as a6, type BreadcrumbItem as a7, type CardPadding as a8, type CardVariant as a9, UCalendar as aA, UCard as aB, UCheckbox as aC, UCollection as aD, UCombobox as aE, UCommandPalette as aF, UContainer as aG, UContextMenu as aH, UDataTable as aI, UDialogRoot as aJ, UDismissableLayer as aK, UDrawer as aL, UDropdown as aM, UField as aN, UFocusManager as aO, UFocusScope as aP, UFocusTrap as aQ, UForm as aR, UGrid as aS, UHStack as aT, UHoverable as aU, UInput as aV, UKeyboardNavigation as aW, ULabel as aX, ULink as aY, UList as aZ, ULiveRegion as a_, type CollectionSelection as aa, type ComboboxOption as ab, type CommandItem as ac, type ContextMenuItem as ad, type DataTableColumn as ae, type DrawerSide as af, type DropdownItem as ag, type LiveRegionPoliteness as ah, type PopperPlacement as ai, type PresenceAnimation as aj, type RadioProps as ak, type SelectOption as al, type TableColumn as am, type TextColor as an, type TextSize as ao, type TextWeight as ap, type ToastOptions as aq, type TransitionType as ar, type TreeNodeData as as, UAccordion as at, UAccordionItem as au, UAnimate as av, UBadge as aw, UBox as ax, UBreadcrumb as ay, UButton as az, type BoxProps as b, UOverlay as b0, UPopover as b1, UPopper as b2, UPortal as b3, UPresence as b4, UPressable as b5, URadio as b6, URadioGroup as b7, URouterView as b8, USelect as b9, USortable as ba, USpacer as bb, UStack as bc, USwitch as bd, UTable as be, UTabs as bf, UText as bg, UTextarea as bh, UToast as bi, UTooltipRoot as bj, UTransition as bk, UTree as bl, UVirtualList as bm, UVisuallyHidden as bn, createControlledInput as bo, setPortalRoot as bp, type BreadcrumbProps as c, type ButtonProps as d, type CardProps as e, type CheckboxProps as f, type CollectionProps as g, type ComboboxProps as h, type CommandPaletteProps as i, type ContainerProps as j, type ContextMenuProps as k, type DialogRootProps as l, type DismissableLayerProps as m, type DrawerProps as n, type DropdownProps as o, type FocusManagerProps as p, type FocusScopeProps as q, type FocusTrapProps as r, type FormProps as s, type LinkProps as t, type ListProps as u, type LiveRegionProps as v, type PopperProps as w, type PortalProps as x, type PresenceProps as y, type PressableProps as z };
+export { type PortalProps as $, type AccordionItemProps as A, type BadgeProps as B, type CalendarProps as C, type DataTableColumn as D, type DrawerProps as E, type DrawerSide as F, type DropdownItem as G, type DropdownProps as H, type FieldProps as I, type FocusManagerProps as J, type FocusScopeProps as K, type FocusTrapProps as L, type FormProps as M, type GridProps as N, type HoverableProps as O, type InputProps as P, type KeyboardNavigationProps as Q, type LabelProps as R, type LinkProps as S, type ListProps as T, type LiveRegionPoliteness as U, type LiveRegionProps as V, type ModalProps as W, type OverlayProps as X, type PopoverProps as Y, type PopperPlacement as Z, type PopperProps as _, type AccordionProps as a, UPopover as a$, type PresenceAnimation as a0, type PresenceProps as a1, type PressableProps as a2, type RadioGroupProps as a3, type RadioProps as a4, type RouterViewProps as a5, type SelectOption as a6, type SelectProps as a7, type SortableProps as a8, type SpacerProps as a9, UCheckbox as aA, UCollection as aB, UCombobox as aC, UCommandPalette as aD, UContainer as aE, UContextMenu as aF, UDataTable as aG, UDialogRoot as aH, UDismissableLayer as aI, UDrawer as aJ, UDropdown as aK, UField as aL, UFocusManager as aM, UFocusScope as aN, UFocusTrap as aO, UForm as aP, UGrid as aQ, UHStack as aR, UHoverable as aS, UInput as aT, UKeyboardNavigation as aU, ULabel as aV, ULink as aW, UList as aX, ULiveRegion as aY, UModal as aZ, UOverlay as a_, type StackProps as aa, type SwitchProps as ab, type TableColumn as ac, type TableProps as ad, type TabsProps as ae, type TextColor as af, type TextProps as ag, type TextSize as ah, type TextWeight as ai, type TextareaProps as aj, type ToastOptions as ak, type ToastProps as al, type TooltipRootProps as am, type TransitionProps as an, type TransitionType as ao, type TreeNodeData as ap, type TreeProps as aq, UAccordion as ar, UAccordionItem as as, UAnimate as at, UBadge as au, UBox as av, UBreadcrumb as aw, UButton as ax, UCalendar as ay, UCard as az, type AnimatePreset as b, UPopper as b0, UPortal as b1, UPresence as b2, UPressable as b3, URadio as b4, URadioGroup as b5, URouterView as b6, USelect as b7, USortable as b8, USpacer as b9, UStack as ba, USwitch as bb, UTable as bc, UTabs as bd, UText as be, UTextarea as bf, UToast as bg, UTooltipRoot as bh, UTransition as bi, UTree as bj, UVirtualList as bk, UVisuallyHidden as bl, type VirtualListProps as bm, type VisuallyHiddenProps as bn, createControlledInput as bo, setPortalRoot as bp, type AnimateProps as c, type BadgeSize as d, type BadgeVariant as e, type BoxAs as f, type BoxProps as g, type BreadcrumbItem as h, type BreadcrumbProps as i, type ButtonProps as j, type CardPadding as k, type CardProps as l, type CardVariant as m, type CheckboxProps as n, type CollectionProps as o, type CollectionSelection as p, type ComboboxOption as q, type ComboboxProps as r, type CommandItem as s, type CommandPaletteProps as t, type ContainerProps as u, type ContextMenuItem as v, type ContextMenuProps as w, type DataTableProps as x, type DialogRootProps as y, type DismissableLayerProps as z };