@furystack/shades-common-components 11.0.0 → 12.0.0

package/CHANGELOG.md

@@ -1,5 +1,435 @@
 # Changelog
 
+## [12.0.0] - 2026-02-09
+
+### 💥 Breaking Changes
+
+### `Theme` interface extended with 6 new required properties
+
+The `Theme` interface now requires the following additional properties: `action`, `shape`, `shadows`, `typography`, `transitions`, and `spacing`. Any custom theme objects must be updated to include these new token groups. See `defaultDarkTheme` and `defaultLightTheme` for reference implementations.
+
+### Requires `@furystack/shades` v3
+
+This package now depends on the new major version of `@furystack/shades` which removed the `constructed` callback. All components have been migrated to use `useDisposable()` inside `render` for one-time setup and cleanup.
+
+### Migrated All Components from `element` to `useHostProps` and `useRef`
+
+All components in this package have been updated to use the new declarative `useHostProps` and `useRef` APIs from `@furystack/shades`, replacing direct imperative DOM manipulation via the removed `element` parameter.
+
+**Impact:** Components no longer accept or use the `element` render option. Any custom components that extended or wrapped these components and relied on `element` access patterns need to be updated.
+
+**Migration:** The component API and behavior remain the same from a consumer perspective — this is a breaking change only due to the peer dependency bump on `@furystack/shades`.
+
+- `AppBarLink` props changed from `RouteLinkProps` to `NestedRouteLinkProps` — `href` is now required and the rendered shadow DOM element changed from `route-link` to `nested-route-link`
+
+### ✨ Features
+
+### Component Pack 1 — 15 new UI components
+
+Added a full set of general-purpose UI components, all themed via CSS variable tokens, with ARIA attributes, keyboard navigation, and `FormService` integration where applicable:
+
+**Data Display:**
+
+- `Accordion` / `AccordionItem` — Collapsible content sections with animated expand/collapse, keyboard support, and `outlined` / `elevation` variants
+- `Badge` — Count or status-dot overlay with configurable `max`, palette colors, and show/hide animation
+- `Chip` — Compact tag/label element with `filled` / `outlined` variants, optional delete button, and size options
+- `Tooltip` — Contextual hover/focus popup with four placement options, configurable delay, and arrow indicator
+
+**Feedback:**
+
+- `Alert` — Severity-coded message banner (`error` / `warning` / `info` / `success`) with `filled`, `outlined`, and `standard` variants and an optional close button
+- `CircularProgress` — SVG-based circular indicator with `determinate` and `indeterminate` variants, customisable size and thickness
+- `LinearProgress` — Horizontal progress bar with `determinate` and `indeterminate` variants and size options
+
+**Surfaces:**
+
+- `Card` — Content surface with `CardHeader`, `CardContent`, `CardMedia`, and `CardActions` sub-components, elevation levels 0–3, and an outlined variant
+- `Dialog` — Modal dialog with title, body, and action slots, backdrop overlay, show/hide animation, and a `ConfirmDialog` helper function
+
+**Layout:**
+
+- `Divider` — Visual separator with horizontal/vertical orientation, `full` / `inset` / `middle` variants, and optional inline text content
+- `Pagination` — Page navigator with ellipsis, configurable sibling/boundary counts, prev/next buttons, and size/color variants
+
+**Inputs:**
+
+- `Checkbox` — Checkbox with label, indeterminate state, palette colors, and `FormService` integration
+- `Radio` / `RadioGroup` — Radio buttons with a group container supporting controlled and uncontrolled modes, orientation options, and shared palette color
+- `Select` — Custom dropdown with full keyboard navigation (Arrow, Enter, Escape, Home, End), validation and helper-text support, and `contained` / `outlined` variants
+- `Switch` — Animated toggle switch with `small` / `medium` sizes and palette color support
+
+### New design token groups on the `Theme` interface
+
+Extended the theme system with six new token groups, enabling centralised control over interactive states, shape, elevation, typography, motion, and spacing:
+
+- `action` — Interactive state colors (`hoverBackground`, `selectedBackground`, `activeBackground`, `focusRing`, `disabledOpacity`, `backdrop`, `subtleBorder`)
+- `shape` — Border radius scale (`xs` through `full`) for consistent rounded corners
+- `shadows` — Elevation presets (`none`, `sm`, `md`, `lg`, `xl`) for layered depth
+- `typography` — Font family, size scale, weight scale, and line height scale
+- `transitions` — Duration presets (`fast`, `normal`, `slow`) and easing functions (`default`, `easeOut`, `easeInOut`)
+- `spacing` — Spacing scale (`xs` through `xl`) for consistent padding, margins, and gaps
+
+All new tokens are available in `defaultDarkTheme`, `defaultLightTheme`, and `cssVariableTheme`.
+
+### New exported types
+
+All token group types are exported for type-safe custom themes: `ActionColors`, `BorderRadiusScale`, `Shape`, `Shadows`, `FontSizeScale`, `FontWeightScale`, `LineHeightScale`, `Typography`, `TransitionDurations`, `TransitionEasings`, `Transitions`, `Spacing`.
+
+### `buildTransition` helper
+
+New utility function `buildTransition(...specs)` that builds CSS transition strings from `[property, duration, easing]` tuples, reducing boilerplate when composing multi-property transitions.
+
+### New Layout System Components
+
+A complete layout system for building application shells with AppBar, drawers, and content areas.
+
+#### PageLayout Component
+
+Full viewport layout component that orchestrates AppBar and drawer positioning with automatic CSS variable management.
+
+**Features:**
+
+- Optional AppBar with `permanent` or `auto-hide` variants
+- Left and/or right drawers with `permanent`, `collapsible`, or `temporary` variants
+- Responsive drawer collapse via `collapseOnBreakpoint` prop
+- Configurable gaps between AppBar/drawers and content
+- Scoped `LayoutService` instance for child components
+
+**Usage:**
+
+```tsx
+<PageLayout
+  appBar={{
+    variant: 'permanent',
+    height: '64px',
+    component: <MyAppBar />,
+  }}
+  drawer={{
+    left: {
+      variant: 'collapsible',
+      width: '280px',
+      component: <Sidebar />,
+      collapseOnBreakpoint: 'md', // Auto-collapse below 960px
+    },
+  }}
+  topGap="16px"
+  sideGap="24px"
+>
+  <MainContent />
+</PageLayout>
+```
+
+#### Drawer Component
+
+Standalone drawer component for sidebars and navigation panels with three behavior variants.
+
+**Variants:**
+
+- `permanent`: Always visible, cannot be closed
+- `collapsible`: Toggleable, pushes content when open
+- `temporary`: Overlays content with backdrop, closes on backdrop click
+
+**Usage:**
+
+```tsx
+<Drawer position="left" variant="collapsible" collapseOnBreakpoint="md">
+  <nav>Navigation items...</nav>
+</Drawer>
+```
+
+#### DrawerToggleButton Component
+
+A button component to toggle drawer open/close state, integrates with `LayoutService`.
+
+**Usage:**
+
+```tsx
+<DrawerToggleButton position="left" />
+```
+
+#### PageContainer Component
+
+Container component for consistent page content styling with max-width, centering, and spacing.
+
+**Usage:**
+
+```tsx
+<PageContainer maxWidth="1200px" centered padding="48px" gap="24px">
+  <PageHeader icon="👥" title="Users" description="Manage user accounts" />
+  <Paper>Content here...</Paper>
+</PageContainer>
+```
+
+#### PageHeader Component
+
+Styled header component with optional icon, title, and description.
+
+**Usage:**
+
+```tsx
+<PageHeader icon="📊" title="Dashboard" description="Overview of your application metrics" />
+```
+
+#### LayoutService
+
+Service for managing layout state with observable values and CSS custom properties.
+
+**Features:**
+
+- Drawer state management (`drawerState`, `toggleDrawer`, `setDrawerOpen`)
+- AppBar visibility control (`appBarVisible`, `appBarVariant`)
+- Gap configuration (`topGap`, `sideGap`)
+- Scoped CSS variables via `LAYOUT_CSS_VARIABLES` constant
+
+**CSS Variables:**
+
+```typescript
+import { LAYOUT_CSS_VARIABLES } from '@furystack/shades-common-components'
+
+// Available CSS variables:
+// --layout-appbar-height
+// --layout-drawer-left-width
+// --layout-drawer-right-width
+// --layout-content-margin-left
+// --layout-content-margin-right
+// --layout-content-padding-top
+// --layout-top-gap
+// --layout-side-gap
+```
+
+### List Component
+
+Added `List` and `ListItem` components for rendering selectable, keyboard-navigable lists with support for single and multi-selection.
+
+- Click to focus, `ArrowUp`/`ArrowDown` to navigate, `Enter` to activate an item
+- Multi-selection via `Ctrl+Click` (toggle), `Shift+Click` (range), `Space` (toggle focused), `+` (select all), `-` (deselect all)
+- Type-ahead search when `searchField` is configured on `ListService`
+- Supports custom `renderItem`, `renderIcon`, and `renderSecondaryActions` render props
+- Click-away detection to release focus
+- Smooth scroll-into-view when navigating with keyboard
+
+Added `ListService` - a standalone state manager for list focus, selection, and keyboard navigation that can be used independently of the component.
+
+### Tree Component
+
+Added `Tree` and `TreeItem` components for rendering hierarchical data with expand/collapse, indented levels, and keyboard navigation.
+
+- `ArrowRight` expands a collapsed node or moves focus to its first child; `ArrowLeft` collapses an expanded node or moves focus to the parent
+- Double-click toggles expand/collapse on parent nodes, activates leaf nodes
+- Inherits all selection and navigation behavior from `ListService`
+- Renders expand/collapse indicators (`▸`/`▾`) with level-based indentation
+- Supports custom `renderItem` and `renderIcon` render props
+
+Added `TreeService` - extends `ListService` with tree-specific state including expand/collapse tracking, flattened visible node list, and parent lookup.
+
+### Context Menu Component
+
+Added `ContextMenu` and `ContextMenuItemComponent` for rendering positioned popup menus with keyboard navigation and item selection.
+
+- Supports both right-click and programmatic trigger via `ContextMenuManager.open()`
+- Items can have labels, descriptions, icons, disabled state, and separators
+- `ArrowUp`/`ArrowDown` to navigate, `Enter` to select, `Escape` to close, `Home`/`End` to jump
+- Clicking the backdrop or right-clicking elsewhere closes the menu
+- Disabled items are skipped during keyboard navigation
+
+Added `ContextMenuManager` - manages context menu state including open/close, item list, focus index, positioning, and keyboard navigation. Emits `onSelectItem` events via `EventHub`.
+
+### Breadcrumb Component
+
+Added a new `Breadcrumb` component for navigating hierarchical route structures with automatic active state detection.
+
+**Features:**
+
+- Dynamic route parameter support (e.g., `/users/:id`)
+- Custom label rendering with `render` prop
+- Configurable separators (string or JSX element)
+- Active item detection based on current URL
+- Optional home/root link
+- Last item clickable/non-clickable configuration
+
+**Basic Usage:**
+
+```typescript
+import { Breadcrumb } from '@furystack/shades-common-components'
+
+<Breadcrumb
+  homeItem={{ path: '/', label: 'Home' }}
+  items={[
+    { path: '/users', label: 'Users' },
+    { path: '/users/:id', label: 'User Details', params: { id: '123' } },
+  ]}
+  separator=" › "
+/>
+```
+
+**Type-Safe Usage:**
+
+The `createBreadcrumb<TRoutes>()` helper provides compile-time route validation:
+
+```typescript
+import { createBreadcrumb } from '@furystack/shades-common-components'
+import type { appRoutes } from './routes'
+
+const AppBreadcrumb = createBreadcrumb<typeof appRoutes>()
+
+// ✅ Type-safe: only valid paths accepted
+<AppBreadcrumb
+  items={[{ path: '/buttons', label: 'Buttons' }]}
+/>
+
+// ❌ TypeScript error: invalid path
+<AppBreadcrumb items={[{ path: '/nonexistent', label: 'Error' }]} />
+```
+
+**Route Parameters:**
+
+Route parameters are automatically inferred from the path pattern:
+
+- `path="/buttons"` — `params` is optional
+- `path="/users/:id"` — `params: { id: string }` is required
+
+### AppBarLink Enhancements
+
+- Added `routingOptions` prop to `AppBarLink` for customizing route matching behavior using `path-to-regexp` options
+- Added `createAppBarLink<TRoutes>()` helper for type-safe app bar links constrained to specific route trees
+
+### New Components
+
+- Added `ButtonGroup` - groups multiple buttons with shared variant, color, orientation, and disabled state
+- Added `Carousel` - content carousel with slide/fade transitions, autoplay, dot indicators, vertical mode, and keyboard navigation
+- Added `Dropdown` - dropdown menu with items, groups, and dividers, configurable placement, keyboard navigation, and click-away closing
+- Added `Icon` - SVG icon component with size variants (small/medium/large/custom), palette colors, and accessibility support (`ariaLabel` / `aria-hidden`)
+- Added 50+ SVG icon definitions (`icons` namespace) for common UI actions, navigation, status indicators, and more
+- Added `Image` - image component with loading skeleton, error fallback, preview/lightbox overlay, and load/error animations
+- Added `Menu` - navigation menu with vertical, horizontal, and inline modes, expandable groups, and keyboard navigation
+- Added `MenuEntry` types (`MenuItemEntry`, `MenuGroupEntry`, `MenuDividerEntry`) and `getNavigableKeys` utility for building menu structures
+- Added `Rating` - star rating with configurable max, half-star precision, multiple sizes, palette colors, read-only mode, and keyboard accessibility
+- Added `Result` - status feedback component for success/error/warning/info and HTTP error codes (403, 404, 500) with icon, title, and subtitle
+- Added `Timeline` and `TimelineItem` - vertical timeline with color-coded dots, connector lines, and alternate/left/right positioning modes
+- Added `Typography` - text component with semantic variants (h1–h6, subtitle, body, caption, overline), palette colors, ellipsis truncation, and copyable text
+- Added `Slider` - range/value slider with min/max/step, marks with labels, tooltips, range mode (two thumbs), and keyboard accessibility
+- Added `InputNumber` - numeric input with +/- stepper buttons, min/max/step constraints, decimal precision, form integration, and validation
+
+### Enhanced Components
+
+- Added `text` variant, `size` prop (small/medium/large), `danger` flag, `loading` spinner, and `startIcon`/`endIcon` support to `Button`
+- Added controlled mode (`activeKey`/`onTabChange`), `line`/`card` visual styles, `vertical` orientation, closable tabs with `onClose`, and an add button with `onAdd` to `Tabs`
+- Added option groups (`optionGroups`), multi-select mode with chip display, and search/filter input to `Select`
+
+### Theme Design Tokens
+
+- Added `ZIndex` type with stacking layers: `drawer`, `appBar`, `modal`, `tooltip`, `dropdown`
+- Added `Effects` type with blur tokens: `blurSm`, `blurMd`, `blurLg`, `blurXl`
+- Added `LetterSpacingScale` type with spacing values: `tight`, `dense`, `normal`, `wide`, `wider`, `widest`
+- All three theme presets (`defaultDarkTheme`, `defaultLightTheme`, `cssVariableTheme`) updated with the new tokens
+
+### Migrated `styles.tsx` to CSS Variable Theme
+
+- `colors` and `glassBox` exports now reference `cssVariableTheme` tokens instead of hardcoded values, ensuring consistency with the active theme
+
+### 🐛 Bug Fixes
+
+- Fixed `defaultDarkTheme.divider` using a light-theme value (`rgba(0, 0, 0, 0.12)`) — now correctly uses `rgba(255, 255, 255, 0.12)`
+- Fixed DataGrid row keyboard navigation not scrolling the focused row into view
+- Fixed `Autocomplete` datalist binding to use `setTimeout` instead of `queueMicrotask`, avoiding conflicts with the new microtask-based component update batching in `@furystack/shades`. Also added proper cleanup via `clearTimeout` on dispose.
+
+### ♻️ Refactoring
+
+### Components migrated to declarative host manipulation
+
+All components now use `useHostProps` to set data attributes, ARIA attributes, CSS custom properties, and styles on the host element instead of imperatively calling `element.setAttribute()`, `element.style.setProperty()`, etc. This includes:
+
+- **Button** — color custom properties, variant/size/loading data attributes
+- **Checkbox** — disabled/indeterminate data attributes, color custom property, replaced `querySelector` with `useRef` for form input registration
+- **Input** — focus/validation state, label/helper text attributes
+- **InputNumber** — stepper button refs, value formatting
+- **Select** — open/disabled state, option list management
+- **Slider** — track/thumb positioning via refs and host props
+- **Switch** — checked/disabled state attributes
+- **TextArea** — focus/validation state
+- **Radio / RadioGroup** — checked/disabled state, group management
+- **Autocomplete** — dropdown state management
+- **Accordion** — expanded state toggling
+- **Alert** — severity data attribute and color
+- **AppBar / AppBarLink** — layout positioning
+- **Avatar** — size and color attributes
+- **Badge** — position and color
+- **Carousel** — slide positioning and navigation via refs
+- **Chip** — variant and deletable state
+- **CircularProgress** — progress value and size via host props
+- **CommandPalette** — open state and input focus via refs
+- **ContextMenu** — position and visibility
+- **DataGrid / DataGridRow** — selection state, column sizing
+- **Dialog** — open state and focus management via refs
+- **Divider** — orientation attribute
+- **Dropdown** — open/closed state
+- **Fab** — position and color
+- **Form** — validation state
+- **Icon** — size attribute and SVG rendering
+- **Image** — loading/error state
+- **LinearProgress** — progress value host props
+- **List / ListItem** — selection state
+- **Loader** — active state
+- **Menu** — open state and positioning
+- **Modal** — visibility and backdrop
+- **NotyList** — notification state
+- **PageContainer / PageLayout** — layout dimensions
+- **Pagination** — page state
+- **Rating** — value and hover state via refs
+- **Skeleton** — animation variant
+- **Suggest** — dropdown state and input refs
+- **Tabs** — active tab indicator
+- **Timeline** — item positioning
+- **Tooltip** — visibility and positioning
+- **Tree / TreeItem** — expanded/selected state
+- **Typography** — variant data attribute
+
+### Services updated
+
+- **ClickAwayService** — updated for compatibility with new rendering model
+- **LayoutService** — updated for compatibility with new rendering model
+
+- Replaced hardcoded `rgba(128,128,128,...)` backgrounds across all interactive components with `action.*` theme tokens
+- Replaced hardcoded `border-radius` pixel values with `shape.borderRadius.*` tokens
+- Replaced hardcoded `box-shadow` definitions with `shadows.*` elevation tokens
+- Replaced hardcoded `font-size` and `font-weight` values with `typography.*` tokens
+- Replaced hardcoded transition timing strings with `transitions.*` tokens
+- Replaced hardcoded spacing pixel values with `spacing.*` tokens
+- Replaced hardcoded disabled opacity, focus ring, and backdrop overlay values with `action.*` tokens
+- Refactored `Button` to use `buildTransition()` helper and `spacing.lg` token instead of hardcoded values
+- Migrated `Dropdown` keyboard event handler from `constructed` to `useDisposable()` in `render`
+- Migrated `Checkbox`, `Input`, `InputNumber`, `Select`, `Switch`, `Slider`, `Autocomplete`, `Radio`, and `RadioGroup` form service registration from `constructed` to `useDisposable()` in `render`
+- Migrated `NotyComponent` enter animation from `constructed` to `useDisposable()` in `render`
+- Migrated `ButtonGroup`, `AppBar`, `CircularProgress`, `ContextMenu`, `ContextMenuItem`, `DataGrid`, `LinearProgress`, `List`, and `Tree` initialization logic from `constructed` to `useDisposable()` in `render`
+- Migrated `AppBarLink` from the deprecated `RouteLink` to `NestedRouteLink` for SPA navigation
+- Renamed `Typography` type to `ThemeTypography` in `ThemeProviderService` to avoid naming conflict with the new `Typography` component
+- Made `zIndex`, `effects`, and `typography.letterSpacing` optional on the `Theme` interface for backward compatibility with existing custom themes
+
+### 🧪 Tests
+
+- Added unit tests for all 15 new components (`accordion`, `alert`, `badge`, `card`, `chip`, `circular-progress`, `dialog`, `divider`, `linear-progress`, `pagination`, `tooltip`, `checkbox`, `radio`, `radio-group`, `select`, `switch`)
+- Updated `fab.spec.tsx` and `loader.spec.tsx` to assert against theme tokens instead of hardcoded values
+- Fixed `styles.spec.ts` to match updated `rgba` formatting in `glassBox` border
+- Added unit tests for `Drawer`, `DrawerToggleButton`, `PageLayout`, `PageContainer`, `PageHeader`, and `LayoutService`
+- Updated component tests to align with the removal of `constructed` callback
+- Added tests for `ListService` covering selection, focus, keyboard navigation, type-ahead search, click handling, and disposal
+- Added tests for `List` and `ListItem` components verifying rendering, keyboard interactions, click behaviors, and selection callbacks
+- Added tests for `TreeService` covering expand/collapse, flattened node generation, keyboard navigation (`ArrowRight`/`ArrowLeft`), parent lookup, and disposal
+- Added tests for `Tree` and `TreeItem` components verifying hierarchical rendering, expand/collapse interactions, and activation callbacks
+- Added tests for `ContextMenuManager` covering open/close, item selection, keyboard navigation, disabled item skipping, and disposal
+- Added tests for `ContextMenu` and `ContextMenuItemComponent` verifying rendering, focus highlighting, click handling, and backdrop dismiss
+- Updated tests across multiple components (accordion, alert, badge, breadcrumb, card, chip, divider, icon, autocomplete, pagination, result, suggest-input, suggestion-list, timeline, tooltip) to work with microtask-based rendering
+- Refactored tests across all components (AppBar, Button, CommandPalette, DataGrid, Drawer, Fab, Form, Grid, Input, TextArea, Loader, NotyList, PageLayout, Paper, Skeleton, Suggest, Wizard) to use `usingAsync` for proper `Injector` disposal
+- Updated tests across components to accommodate the new rendering flow and `flushUpdates()` for async assertions
+- Updated visual snapshot baselines for form fieldset tests
+- Added full test coverage for `Breadcrumb` component including runtime behavior tests and type safety validation
+- Added unit tests for all new components: `ButtonGroup`, `Carousel`, `Dropdown`, `Icon`, `Image`, `Menu`, `MenuTypes`, `Rating`, `Result`, `Timeline`, `Typography`, `Slider`, and `InputNumber`
+- Extended unit tests for enhanced `Button`, `Tabs`, and `Select` components
+
+### ⬆️ Dependencies
+
+- Peer dependency on `@furystack/shades` bumped to new major version
+
 ## [11.0.0] - 2026-02-01
 
 ### 💥 Breaking Changes

package/esm/components/accordion/accordion-item.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Props for the AccordionItem component.
+ */
+export type AccordionItemProps = {
+    /** The header content displayed in the clickable toggle area */
+    title: JSX.Element | string;
+    /** Whether the item starts in the expanded state. Defaults to false */
+    defaultExpanded?: boolean;
+    /** Whether the item is disabled (non-interactive) */
+    disabled?: boolean;
+    /** Optional icon displayed before the title */
+    icon?: JSX.Element | string;
+};
+/**
+ * An individual collapsible section for use within an Accordion container.
+ *
+ * Supports animated expand/collapse, keyboard accessibility, and optional icon.
+ *
+ * @example
+ * ```tsx
+ * <AccordionItem title="Section 1" defaultExpanded>
+ *   <p>Content goes here</p>
+ * </AccordionItem>
+ * ```
+ */
+export declare const AccordionItem: (props: AccordionItemProps & Omit<Partial<HTMLElement>, "style"> & {
+    style?: Partial<CSSStyleDeclaration>;
+} & {
+    ref?: import("@furystack/shades").RefObject<Element>;
+}, children?: import("@furystack/shades").ChildrenList) => JSX.Element;
+//# sourceMappingURL=accordion-item.d.ts.map

package/esm/components/accordion/accordion-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion-item.d.ts","sourceRoot":"","sources":["../../../src/components/accordion/accordion-item.tsx"],"names":[],"mappings":"AAMA;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAC/B,gEAAgE;IAChE,KAAK,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAA;IAC3B,uEAAuE;IACvE,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,+CAA+C;IAC/C,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAA;CAC5B,CAAA;AAED;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,aAAa;;;;sEAoKxB,CAAA"}

package/esm/components/accordion/accordion-item.js

@@ -0,0 +1,147 @@
+import { Shade, createComponent } from '@furystack/shades';
+import { buildTransition, cssVariableTheme } from '../../services/css-variable-theme.js';
+import { collapse, expand } from '../animations.js';
+import { Icon } from '../icons/icon.js';
+import { chevronDown } from '../icons/icon-definitions.js';
+/**
+ * An individual collapsible section for use within an Accordion container.
+ *
+ * Supports animated expand/collapse, keyboard accessibility, and optional icon.
+ *
+ * @example
+ * ```tsx
+ * <AccordionItem title="Section 1" defaultExpanded>
+ *   <p>Content goes here</p>
+ * </AccordionItem>
+ * ```
+ */
+export const AccordionItem = Shade({
+    shadowDomName: 'shade-accordion-item',
+    css: {
+        display: 'block',
+        fontFamily: cssVariableTheme.typography.fontFamily,
+        '&:not(:last-child)': {
+            borderBottom: `1px solid color-mix(in srgb, ${cssVariableTheme.text.secondary} 20%, transparent)`,
+        },
+        // Header
+        '& .accordion-header': {
+            display: 'flex',
+            alignItems: 'center',
+            gap: cssVariableTheme.spacing.sm,
+            padding: `${cssVariableTheme.spacing.md} ${cssVariableTheme.spacing.lg}`,
+            cursor: 'pointer',
+            userSelect: 'none',
+            backgroundColor: 'transparent',
+            border: 'none',
+            width: '100%',
+            textAlign: 'left',
+            outline: 'none',
+            color: 'inherit',
+            transition: buildTransition([
+                'background-color',
+                cssVariableTheme.transitions.duration.fast,
+                cssVariableTheme.transitions.easing.default,
+            ]),
+        },
+        '& .accordion-header:hover:not([data-disabled])': {
+            backgroundColor: `color-mix(in srgb, ${cssVariableTheme.text.secondary} 8%, transparent)`,
+        },
+        '& .accordion-header:focus-visible': {
+            boxShadow: cssVariableTheme.action.focusRing,
+        },
+        // Icon
+        '& .accordion-icon': {
+            display: 'inline-flex',
+            alignItems: 'center',
+            flexShrink: '0',
+            fontSize: '1.2em',
+        },
+        // Title
+        '& .accordion-title': {
+            flex: '1',
+            fontSize: cssVariableTheme.typography.fontSize.md,
+            fontWeight: cssVariableTheme.typography.fontWeight.medium,
+            color: cssVariableTheme.text.primary,
+        },
+        // Chevron
+        '& .accordion-chevron': {
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            flexShrink: '0',
+            fontSize: '1.2em',
+            color: cssVariableTheme.text.secondary,
+            transform: 'rotate(-90deg)',
+            transition: buildTransition([
+                'transform',
+                cssVariableTheme.transitions.duration.fast,
+                cssVariableTheme.transitions.easing.default,
+            ]),
+        },
+        '&[data-expanded] .accordion-chevron': {
+            transform: 'rotate(0deg)',
+        },
+        // Content wrapper (animated)
+        '& .accordion-content': {
+            overflow: 'hidden',
+        },
+        // Content inner (provides padding)
+        '& .accordion-content-inner': {
+            padding: `0 ${cssVariableTheme.spacing.lg} ${cssVariableTheme.spacing.lg}`,
+        },
+        // Disabled state
+        '&[data-disabled]': {
+            opacity: cssVariableTheme.action.disabledOpacity,
+            pointerEvents: 'none',
+        },
+        '&[data-disabled] .accordion-header': {
+            cursor: 'not-allowed',
+        },
+    },
+    render: ({ props, children, useHostProps, useRef, useState }) => {
+        const [isExpanded, setIsExpanded] = useState('expanded', !!props.defaultExpanded);
+        useHostProps({
+            'data-disabled': props.disabled ? '' : undefined,
+            'data-expanded': isExpanded ? '' : undefined,
+        });
+        const contentRef = useRef('content');
+        const handleToggle = async () => {
+            if (props.disabled)
+                return;
+            const content = contentRef.current;
+            if (!content)
+                return;
+            if (isExpanded) {
+                setIsExpanded(false);
+                await collapse(content, { duration: 250 });
+            }
+            else {
+                setIsExpanded(true);
+                await expand(content, { duration: 250 });
+            }
+        };
+        const handleKeyDown = (ev) => {
+            if (ev.key === 'Enter' || ev.key === ' ') {
+                ev.preventDefault();
+                void handleToggle();
+            }
+        };
+        const headerEl = (createComponent("div", { className: "accordion-header", role: "button", tabIndex: props.disabled ? -1 : 0, onclick: handleToggle, onkeydown: handleKeyDown },
+            props.icon ? createComponent("span", { className: "accordion-icon" }, props.icon) : null,
+            createComponent("span", { className: "accordion-title" }, props.title),
+            createComponent("span", { className: "accordion-chevron" },
+                createComponent(Icon, { icon: chevronDown, size: 16 }))));
+        headerEl.setAttribute('aria-expanded', String(isExpanded));
+        if (props.disabled) {
+            headerEl.setAttribute('data-disabled', '');
+        }
+        return (createComponent(createComponent, null,
+            headerEl,
+            createComponent("div", { ref: contentRef, className: "accordion-content", style: {
+                    height: isExpanded ? undefined : '0px',
+                    opacity: isExpanded ? '1' : '0',
+                } },
+                createComponent("div", { className: "accordion-content-inner" }, children))));
+    },
+});
+//# sourceMappingURL=accordion-item.js.map

package/esm/components/accordion/accordion-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion-item.js","sourceRoot":"","sources":["../../../src/components/accordion/accordion-item.tsx"],"names":[],"mappings":"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"}

package/esm/components/accordion/accordion.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Props for the Accordion container component.
+ */
+export type AccordionProps = {
+    /** Visual variant of the accordion container */
+    variant?: 'outlined' | 'elevation';
+};
+/**
+ * A container component that groups AccordionItem children with consistent styling.
+ *
+ * Provides a bordered or elevated surface with rounded corners. Use it to wrap
+ * multiple AccordionItem components into a visually cohesive group.
+ *
+ * @example
+ * ```tsx
+ * <Accordion>
+ *   <AccordionItem title="Section 1">Content 1</AccordionItem>
+ *   <AccordionItem title="Section 2">Content 2</AccordionItem>
+ * </Accordion>
+ * ```
+ */
+export declare const Accordion: (props: AccordionProps & Omit<Partial<HTMLElement>, "style"> & {
+    style?: Partial<CSSStyleDeclaration>;
+} & {
+    ref?: import("@furystack/shades").RefObject<Element>;
+}, children?: import("@furystack/shades").ChildrenList) => JSX.Element;
+//# sourceMappingURL=accordion.d.ts.map

package/esm/components/accordion/accordion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../../src/components/accordion/accordion.tsx"],"names":[],"mappings":"AAGA;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG;IAC3B,gDAAgD;IAChD,OAAO,CAAC,EAAE,UAAU,GAAG,WAAW,CAAA;CACnC,CAAA;AAED;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,SAAS;;;;sEAwBpB,CAAA"}