@festo-ui/react 10.1.0-dev.875 → 10.1.1-dev.918

package/dist/components/popovers/popover/Popover.js

@@ -54,7 +54,11 @@ const Popover = /*#__PURE__*/ forwardRef(({ children, className, style, containe
         children: [
             /*#__PURE__*/ jsx("div", {
                 className: className,
-                style: style,
+                style: {
+                    width: 'fit-content',
+                    height: 'fit-content',
+                    ...style
+                },
                 ref: (node)=>{
                     refs.setReference(node);
                     if ('function' == typeof handleRef) handleRef(node);

package/llm-doc/README.md

@@ -0,0 +1,20 @@
+# @festo-ui/react — AI Agent Documentation
+
+This documentation describes the React component library `@festo-ui/react` of the Festo Design System. It is optimized for AI agents that should use this library in projects.
+
+## Overview
+
+| File | Content |
+|------|--------|
+| [installation.md](./installation.md) | Installation, setup, imports |
+| [components.md](./components.md) | All UI components (Accordion, Button, Card, Modal, etc.) |
+| [forms.md](./forms.md) | All form components (TextInput, Select, Checkbox, etc.) |
+| [patterns.md](./patterns.md) | Common patterns: Controlled/Uncontrolled, FormData, Styling |
+
+## Quick Reference
+
+**Package:** `@festo-ui/react`  
+**CSS:** `@festo-ui/react/index.css`  
+**License:** Apache-2.0  
+**Peer Dependencies:** React 18+  
+**CSS Prefix:** `fwe-` (Festo Web Essentials)

package/llm-doc/components.md

@@ -0,0 +1,661 @@
+# UI Components
+
+## Accordion
+
+Collapsible content sections.
+
+### Components
+- `Accordion` — Container
+- `AccordionHeader` — Header of the entire accordion
+- `AccordionItem` — Single collapsible element
+- `AccordionItemHeader` — Header of an item
+- `AccordionItemBody` — Content of an item
+
+### Accordion Props
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `showMore` | `string` | `"Show more"` | Text for "Show more" |
+| `showLess` | `string` | `"Show less"` | Text for "Show less" |
+| `keepItemsOpen` | `boolean` | `true` | Multiple items open simultaneously. `false` = auto-collapse |
+| `transparent` | `boolean` | `false` | Transparent background |
+| `highlighted` | `boolean` | `true` | Highlighted style |
+
+### AccordionItem Props
+| Prop | Type | Description |
+|------|------|-------------|
+| `expanded` | `boolean` | Controlled: whether open |
+| `defaultExpanded` | `boolean` | Initial state (default: `false`) |
+| `onChange` | `(expanded: boolean, event) => void` | Callback on state change |
+
+### Example — Basic
+```tsx
+<Accordion>
+  <AccordionHeader>Title</AccordionHeader>
+  <AccordionItem>
+    <AccordionItemHeader>Item 1</AccordionItemHeader>
+    <AccordionItemBody>Content 1</AccordionItemBody>
+  </AccordionItem>
+  <AccordionItem>
+    <AccordionItemHeader>Item 2</AccordionItemHeader>
+    <AccordionItemBody>Content 2</AccordionItemBody>
+  </AccordionItem>
+</Accordion>
+```
+
+### Example — Auto-Collapse
+```tsx
+<Accordion keepItemsOpen={false}>
+  <AccordionHeader>Title</AccordionHeader>
+  <AccordionItem>
+    <AccordionItemHeader>Item 1</AccordionItemHeader>
+    <AccordionItemBody>Content 1</AccordionItemBody>
+  </AccordionItem>
+</Accordion>
+```
+
+### Example — Controlled
+```tsx
+const [expanded, setExpanded] = useState('item1');
+const handleChange = (panel) => (isExpanded) => {
+  setExpanded(isExpanded ? panel : false);
+};
+
+<Accordion>
+  <AccordionItem expanded={expanded === 'item1'} onChange={handleChange('item1')}>
+    <AccordionItemHeader>Item 1</AccordionItemHeader>
+    <AccordionItemBody>Content 1</AccordionItemBody>
+  </AccordionItem>
+</Accordion>
+```
+
+---
+
+## BottomSheet
+
+Mobile bottom sheet overlay.
+
+### Props
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `open` | `boolean` | — | Controlled: whether visible |
+| `defaultExpanded` | `boolean` | — | Initial state |
+| `expandFrom` | `"center" \| "bottom"` | `"center"` | Expand direction |
+| `hasBackdrop` | `boolean` | `true` | Show backdrop overlay |
+| `hideCloseIcon` | `boolean` | — | Hide close icon |
+| `onOpenChange` | `(value: boolean) => void` | — | Callback on open/close |
+
+### Example
+```tsx
+const [open, setOpen] = useState(false);
+
+<button onClick={() => setOpen(true)}>Open</button>
+<BottomSheet open={open} onOpenChange={setOpen}>
+  <p>Content</p>
+</BottomSheet>
+```
+
+---
+
+## Breadcrumb
+
+Navigation path display.
+
+### Props
+| Prop | Type | Description |
+|------|------|-------------|
+| `locations` | `BreadcrumbLocation[]` | Array with `{ text, href }` |
+| `onClick` | `(event) => void` | Click handler for links |
+
+### Example — With locations array
+```tsx
+<Breadcrumb
+  locations={[
+    { text: 'Home', href: '/' },
+    { text: 'Products', href: '/products' },
+    { text: 'Current', href: '/products/current' },
+  ]}
+  onClick={(e) => e.preventDefault()}
+/>
+```
+
+### Example — With children
+```tsx
+<Breadcrumb>
+  <a href="/components">Components</a>
+  <a href="/components/breadcrumbs">Breadcrumbs</a>
+</Breadcrumb>
+```
+
+---
+
+## Button
+
+Standard buttons in various variants.
+
+### Props
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `primary` | `boolean` | `false` | Primary/hero button |
+| `tertiary` | `boolean` | `false` | Tertiary button (text style) |
+| `icon` | `ReactNode` | — | Icon element |
+| `iconOnly` | `boolean` | `false` | Icon only, no text |
+| `large` | `boolean` | `false` | Larger variant |
+| `floating` | `boolean` | `false` | Floating action button |
+| `disabled` | `boolean` | `false` | Disabled |
+
+### Examples
+```tsx
+<Button>Default</Button>
+<Button primary>Primary</Button>
+<Button tertiary>Tertiary</Button>
+<Button large>Large</Button>
+<Button icon={<IconCoreRangeProduct />}>With Icon</Button>
+<Button iconOnly icon={<IconCoreRangeProduct />} />
+<Button iconOnly large primary floating icon={<IconCoreRangeProduct />} />
+```
+
+---
+
+## Card
+
+Card component with header, body, and notifications.
+
+### Components
+- `Card` — Container
+- `CardHeader` — Header with optional image, subtitle, and action
+- `CardBody` — Text content with optional children
+- `CardNotification` — Notification bar
+
+### Example
+```tsx
+<Card>
+  <CardHeader
+    title="Card Title"
+    subtitle="Description"
+    image={{ src: 'image.webp', alt: 'Image', aspectRatio: '16/9' }}
+    action={<button className="fwe-btn fwe-btn-icon">...</button>}
+  />
+  <CardBody text="Card text">
+    <button className="fwe-btn fwe-btn-hero fwe-btn-block">Action</button>
+  </CardBody>
+  <CardNotification className="fwe-bg-orange" title="Warning" message="Details" />
+</Card>
+```
+
+---
+
+## Chip / ChipContainer
+
+Chips for filters, categories, selection, and actions.
+
+### Chip Props
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `type` | `ChipType` | `ChipType.Choice` | Chip type: `Choice`, `Category`, `Filter`, `Action`, `Readonly` |
+| `icon` | `ReactNode` | — | Icon |
+| `selected` | `boolean` | `false` | Selected |
+| `disabled` | `boolean` | `false` | Disabled |
+| `large` | `boolean` | `false` | Large |
+
+### ChipContainer Props
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `large` | `boolean` | `false` | Large chips in container |
+
+### Example
+```tsx
+import { Chip, ChipContainer, ChipType } from '@festo-ui/react';
+
+<ChipContainer>
+  <Chip>Choice</Chip>
+  <Chip selected>Selected</Chip>
+  <Chip type={ChipType.Filter} selected>Filter</Chip>
+  <Chip type={ChipType.Action} icon={<IconCoreRangeProduct />}>Action</Chip>
+  <Chip type={ChipType.Readonly}>Readonly</Chip>
+</ChipContainer>
+```
+
+---
+
+## LoadingIndicator
+
+Loading indicator in three sizes.
+
+### Props
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `size` | `"large" \| "medium" \| "small"` | `"large"` | Size |
+
+### Example
+```tsx
+<LoadingIndicator />
+<LoadingIndicator size="medium">Loading...</LoadingIndicator>
+<LoadingIndicator size="small">Loading...</LoadingIndicator>
+```
+
+---
+
+## MobileFlyout
+
+Mobile navigation with nested pages.
+
+### MobileFlyout Props
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `open` | `boolean` | — | Controlled: whether open |
+| `defaultOpen` | `boolean` | — | Initial state |
+| `visible` | `string[]` | — | Controlled: visible pages |
+| `defaultVisible` | `string[]` | `['root']` | Initially visible pages |
+| `onOpenChange` | `(value: boolean) => void` | — | Callback |
+| `onVisibleChange` | `(value: string) => void` | — | Callback |
+| `back` | `string` | — | Back text |
+
+### MobileFlyoutItem Props
+| Prop | Type | Description |
+|------|------|-------------|
+| `icon` | `ReactNode` | Icon |
+| `pageLink` | `string` | Links to a MobileFlyoutPage |
+| `active` | `boolean` | Active state |
+| `component` | `ElementType` | Alternative HTML element |
+
+### MobileFlyoutPage Props
+| Prop | Type | Description |
+|------|------|-------------|
+| `name` | `string` | Unique page name |
+| `root` | `boolean` | Whether this is the root page |
+| `back` | `string` | Back text |
+
+### Example
+```tsx
+<MobileFlyout>
+  <MobileFlyoutPage root name="root">
+    <MobileFlyoutItem href="/page1">Page 1</MobileFlyoutItem>
+    <MobileFlyoutItem icon={<IconSettings />} pageLink="settings">
+      Settings
+    </MobileFlyoutItem>
+  </MobileFlyoutPage>
+  <MobileFlyoutPage name="settings">
+    <h3>Settings</h3>
+    <MobileFlyoutItem pageLink="advanced">Advanced</MobileFlyoutItem>
+  </MobileFlyoutPage>
+</MobileFlyout>
+```
+
+---
+
+## Modals (AlertModal, ConfirmModal, CustomModal, Prompt)
+
+Various dialog types.
+
+### AlertModal
+Displays a warning/info dialog.
+```tsx
+<AlertModal
+  isOpen={open}
+  onClose={() => setOpen(false)}
+  onCancel={() => setOpen(false)}
+  onOk={() => setOpen(false)}
+  title="Title"
+  subtitle="Subtitle"
+  body="Message"
+  alertType="info"  // or "warning"
+  cancel="Cancel"
+  ok="OK"
+  strong={false}  // true for strong warning
+/>
+```
+
+### ConfirmModal
+Confirmation dialog.
+```tsx
+<ConfirmModal
+  isOpen={open}
+  onClose={() => setOpen(false)}
+  onCancel={() => setOpen(false)}
+  onOk={() => setOpen(false)}
+  title="Confirmation"
+  subtitle="Subtitle"
+  body="Do you want to continue?"
+  cancel="Cancel"
+  ok="OK"
+  large={false}  // true for large scrollable variant
+/>
+```
+
+### Prompt
+Input dialog.
+```tsx
+<Prompt
+  isOpen={open}
+  onClose={() => setOpen(false)}
+  onCancel={() => setOpen(false)}
+  onOk={() => setOpen(false)}
+  title="Headline"
+  subtitle="Category"
+  label="Label"
+  hint="Optional hint"
+  cancel="Cancel"
+  ok="Send"
+/>
+```
+
+### CustomModal
+Freely customizable dialog.
+```tsx
+<CustomModal
+  isOpen={open}
+  onClose={() => setOpen(false)}
+  title="Title"
+  subtitle="Subtitle"
+  closeOnBackdrop={false}
+>
+  <form onSubmit={handleSubmit}>
+    <div className="fwe-modal-body">
+      {/* Form content */}
+    </div>
+    <div className="fwe-modal-footer">
+      <div className="fwe-modal-buttons">
+        <button type="button" className="fwe-btn fwe-btn-lg" onClick={() => setOpen(false)}>
+          Cancel
+        </button>
+        <button className="fwe-btn fwe-btn-lg fwe-btn-hero" type="submit">
+          Submit
+        </button>
+      </div>
+    </div>
+  </form>
+</CustomModal>
+```
+
+### Common Modal Props
+| Prop | Type | Description |
+|------|------|-------------|
+| `isOpen` | `boolean` | **Required.** Whether the dialog is visible |
+| `isLoading` | `boolean` | Show loading state |
+| `closeOnBackdrop` | `boolean` | Close by clicking backdrop (default: `true`) |
+| `onClose` | `() => void` | Callback on close |
+| `onCloseDone` | `() => void` | Callback after close animation |
+
+---
+
+## ImageGallery
+
+Fullscreen image gallery overlay.
+
+### Props
+| Prop | Type | Description |
+|------|------|-------------|
+| `isOpen` | `boolean` | **Required.** Whether open |
+| `startIndex` | `number` | **Required.** Starting image index |
+| `images` | `ImageGalleryItemData[]` | Array of images |
+| `thumbnailImages` | `ImageGalleryItemData[]` | Thumbnail images |
+| `pagination` | `number \| boolean` | Show pagination |
+| `showScaleButton` | `boolean` | Show zoom button |
+| `descriptiveContent` | `boolean \| (index: number) => ReactNode` | Descriptive text |
+| `onClose` | `() => void` | Callback on close |
+| `onSlideChanged` | `(index: number) => void` | Callback on slide change |
+
+### Example
+```tsx
+const [open, setOpen] = useState(false);
+
+<button onClick={() => setOpen(true)}>Open Gallery</button>
+<ImageGallery
+  isOpen={open}
+  onClose={() => setOpen(false)}
+  images={images}
+  startIndex={0}
+  pagination
+  thumbnailImages={images}
+  showScaleButton
+  descriptiveContent
+/>
+```
+
+---
+
+## Pagination
+
+Page navigation in three styles.
+
+### Props
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `type` | `"NUMERIC" \| "SIMPLE" \| "DOTS"` | `"NUMERIC"` | Display style |
+| `pageMax` | `number` | — | **Required.** Maximum page count |
+| `pageCurrent` | `number` | — | Controlled: current page |
+| `defaultPageCurrent` | `number` | `1` | Initial page |
+| `onChange` | `(page: number, event) => void` | — | Callback |
+
+### Example
+```tsx
+<Pagination pageMax={10} defaultPageCurrent={3} />
+<Pagination pageMax={10} defaultPageCurrent={3} type="SIMPLE" />
+<Pagination pageMax={5} defaultPageCurrent={3} type="DOTS" />
+```
+
+---
+
+## Popover / Tooltip / Legend / PopoverMenu
+
+Overlay elements for additional information.
+
+### Popover Props
+| Prop | Type | Description |
+|------|------|-------------|
+| `content` | `ReactNode` | Popover content |
+| `position` | `Placement` | Position (e.g. `"right"`, `"top"`) |
+| `isOpen` | `boolean` | Controlled |
+| `onChange` | `(isOpen: boolean) => void` | Callback |
+| `openOnHover` | `boolean` | Open on hover |
+| `openByDefault` | `boolean` | Initially open |
+| `onTriggerClick` | `(event) => void` | Custom trigger handler |
+
+### Examples
+```tsx
+<Popover content="Content">Click me</Popover>
+<Popover position="right" content="Right">Click</Popover>
+<Popover openOnHover content="Hover info">Hover</Popover>
+<Tooltip content="Tooltip text">Element</Tooltip>
+
+<PopoverMenu items={[
+  { text: 'Download', icon: <IconDownload />, onClick: () => {} },
+  { text: 'Delete', icon: <IconDelete />, onClick: () => {} },
+]}>
+  <IconMore size={24} />
+</PopoverMenu>
+
+<Legend items={[{ name: 'PN', text: 'Part Number' }]}>
+  <button className="fwe-btn fwe-btn-link fwe-dark"><IconInfo />Legend</button>
+</Legend>
+```
+
+---
+
+## Progress
+
+Progress bar.
+
+### Props
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `progress` | `number` | — | **Required.** Progress 0–100 |
+| `background` | `"white" \| "background" \| "black"` | `"white"` | Background color |
+| `error` | `boolean` | `false` | Error state (red) |
+
+### Example
+```tsx
+<Progress progress={50} />
+<Progress progress={50} error />
+<Progress progress={75} background="background" />
+```
+
+---
+
+## SearchInput
+
+Search field with autocomplete suggestions.
+
+### SearchInput Props
+| Prop | Type | Description |
+|------|------|-------------|
+| `label` | `string` | Placeholder text |
+| `value` | `string` | Controlled |
+| `defaultValue` | `string` | Initial value |
+| `debounceTime` | `number` | Debounce in ms (default: 0) |
+| `onChange` | `(value: string) => void` | Callback on input |
+| `onSearch` | `(value: string) => void` | Callback on Enter/selection |
+
+### Example
+```tsx
+const [query, setQuery] = useState('');
+const [results, setResults] = useState([]);
+
+function handleChange(value) {
+  setQuery(value);
+  setResults(allItems.filter(s => s.toLowerCase().includes(value.toLowerCase())));
+}
+
+<SearchInput label="Search" onChange={handleChange} onSearch={console.log}>
+  {results.map(item => (
+    <SearchInputOption key={item} value={item}>
+      <SearchResult label={item} query={query} />
+    </SearchInputOption>
+  ))}
+</SearchInput>
+```
+
+---
+
+## Snackbar
+
+Toast notifications.
+
+### Setup
+Wrap with `SnackbarProvider` at the root:
+```tsx
+<SnackbarProvider>
+  <App />
+</SnackbarProvider>
+```
+
+### Usage with hook
+```tsx
+const showSnackbar = useSnackbar();
+showSnackbar({ text: 'Successfully saved!' });
+```
+
+### Usage without hook
+```tsx
+import { addSnackbar } from '@festo-ui/react';
+addSnackbar({ text: 'Saved!' });
+```
+
+---
+
+## Stepper (Vertical & Horizontal)
+
+Step indicator for multi-step processes.
+
+### Example — Vertical
+```tsx
+const [stepIndex, setStepIndex] = useState(0);
+
+<StepperVertical stepIndex={stepIndex} onChange={setStepIndex}>
+  <StepVertical title="Step 1">
+    <p>Content</p>
+    <button className="fwe-btn" onClick={() => setStepIndex(stepIndex + 1)}>Next</button>
+  </StepVertical>
+  <StepVertical title="Step 2">
+    <p>Content</p>
+  </StepVertical>
+</StepperVertical>
+```
+
+### Example — Horizontal
+```tsx
+<StepperHorizontal stepIndex={stepIndex} onChange={setStepIndex}>
+  <StepHorizontal title="Step 1">Content</StepHorizontal>
+  <StepHorizontal title="Step 2">Content</StepHorizontal>
+</StepperHorizontal>
+```
+
+---
+
+## Tabs
+
+Tab navigation with content areas.
+
+### Props
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `config` | `TabsConfiguration` | — | Configuration (tabBar, tabItems) |
+| `viewType` | `"responsive" \| "legacy"` | `"responsive"` | View type |
+| `showDivider` | `boolean` | `false` | Divider line under tabs |
+| `onChange` | `({ previous, current }) => void` | — | Callback on tab change |
+
+### TabPane Props
+| Prop | Type | Description |
+|------|------|-------------|
+| `name` | `string` | **Required.** Tab name/label |
+| `icon` | `ReactNode` | Optional: icon in tab |
+
+### Example
+```tsx
+<Tabs>
+  <TabPane name="Tab 1">Content 1</TabPane>
+  <TabPane name="Tab 2">Content 2</TabPane>
+  <TabPane name="Tab 3">Content 3</TabPane>
+</Tabs>
+```
+
+### Configuration example
+```tsx
+<Tabs
+  viewType="legacy"
+  config={{
+    tabBar: { fullWidth: true },
+    tabItems: { appearance: 'fill' },  // 'equal' | 'fill'
+  }}
+>
+  <TabPane name="Tab 1">Content</TabPane>
+</Tabs>
+```
+
+---
+
+## TableHeaderCell
+
+Sortable table header cell.
+
+### Props
+| Prop | Type | Description |
+|------|------|-------------|
+| `active` | `boolean` | Whether this column is actively sorted |
+| `ascending` | `boolean` | **Required.** Sort direction |
+
+### Example
+```tsx
+const [orderBy, setOrderBy] = useState('name');
+const [ascending, setAscending] = useState(true);
+
+<table className="fwe-table">
+  <thead>
+    <tr>
+      <TableHeaderCell
+        ascending={ascending}
+        active={orderBy === 'name'}
+        onClick={() => {
+          setAscending(orderBy === 'name' ? !ascending : true);
+          setOrderBy('name');
+        }}
+      >
+        Name
+      </TableHeaderCell>
+    </tr>
+  </thead>
+  <tbody>
+    <tr className="fwe-tr-md"><td>Entry</td></tr>
+  </tbody>
+</table>
+```

package/llm-doc/forms.md

@@ -0,0 +1,333 @@
+# Form Components
+
+## TextInput
+
+Text field with label, hint, error display, and icon.
+
+### Props
+| Prop | Type | Description |
+|------|------|-------------|
+| `label` | `string` | Label text |
+| `value` | `string` | Controlled |
+| `defaultValue` | `string` | Initial value |
+| `onChange` | `(value: string, event) => void` | Callback |
+| `hint` | `string` | Hint text |
+| `error` | `string` | Error text |
+| `icon` | `ReactNode` | Icon on the right |
+| `readonly` | `boolean` | Read-only |
+
+### Example
+```tsx
+<TextInput label="Username" defaultValue="max" hint="Hint" placeholder="Enter..." />
+```
+
+### Controlled
+```tsx
+const [value, setValue] = useState('');
+<TextInput label="Name" value={value} onChange={setValue} />
+```
+
+### Validation
+```tsx
+<TextInput label="Name" defaultValue="" minLength={5} required />
+<TextInput label="Error" aria-invalid error="Required field" icon={<IconClose className="fwe-color-red" />} />
+```
+
+---
+
+## TextArea
+
+Multi-line text field.
+
+### Props
+| Prop | Type | Description |
+|------|------|-------------|
+| `label` | `string` | **Required.** Label |
+| `value` | `string` | Controlled |
+| `defaultValue` | `string` | Initial value |
+| `onChange` | `(value: string, event) => void` | Callback |
+| `hint` | `string` | Hint text |
+| `error` | `string` | Error text |
+| `rows` | `number` | Rows (0 = auto-grow) |
+| `maxLength` | `number` | Max character count |
+
+### Example
+```tsx
+<TextArea label="Description" rows={3} hint="Hint" maxLength={200} />
+```
+
+---
+
+## Select
+
+Dropdown selection.
+
+### Props
+| Prop | Type | Description |
+|------|------|-------------|
+| `options` | `SelectOption<T>[]` | **Required.** Array with `{ data: T, label: string \| ReactNode }` |
+| `value` | `T` | Controlled |
+| `defaultValue` | `T` | Initial value |
+| `onChange` | `(value: T) => void` | Callback |
+| `label` | `string` | Label |
+| `name` | `string` | FormData name |
+| `hint` | `string` | Hint text |
+| `error` | `string` | Error text |
+| `placeholder` | `string` | Placeholder |
+| `disabled` | `boolean` | Disabled |
+| `required` | `boolean` | Required |
+
+### Example
+```tsx
+const options = [
+  { data: 1, label: 'Option A' },
+  { data: 2, label: 'Option B' },
+  { data: 3, label: 'Option C' },
+];
+
+<Select label="Selection" options={options} defaultValue={1} />
+```
+
+### Controlled
+```tsx
+const [value, setValue] = useState(1);
+<Select label="Selection" options={options} value={value} onChange={setValue} />
+```
+
+---
+
+## ComboBox
+
+Searchable dropdown (Select with text input).
+
+### Props
+Same as `Select`, plus:
+| Prop | Type | Description |
+|------|------|-------------|
+| `onInputChange` | `(value: string) => void` | Callback on text input |
+| `emptyMessage` | `string` | Text when no results |
+
+### Example
+```tsx
+<ComboBox label="Search" options={options} defaultValue={2} />
+```
+
+---
+
+## MultiSelect
+
+Multi-selection dropdown.
+
+### Props
+| Prop | Type | Description |
+|------|------|-------------|
+| `options` | `SelectOption<T>[]` | Options |
+| `value` | `T[]` | Controlled: selected values |
+| `defaultValue` | `T[]` | Initial values |
+| `onChange` | `(value: T[]) => void` | Callback |
+| `label` | `string` | Label |
+| `name` | `string` | FormData name |
+| `hint` | `string` | Hint text |
+| `error` | `string` | Error text |
+| `placeholder` | `string` | Placeholder |
+| `disabled` | `boolean` | Disabled |
+
+### Example
+```tsx
+<MultiSelect
+  label="Categories"
+  options={options}
+  defaultValue={[1, 3]}
+  placeholder="Select..."
+/>
+```
+
+---
+
+## Checkbox
+
+### Props
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `checked` | `boolean` | — | Controlled |
+| `defaultChecked` | `boolean` | — | Initial value |
+| `onChange` | `(value: boolean, event) => void` | — | Callback |
+| `large` | `boolean` | `false` | Large |
+| `valid` | `boolean` | `true` | Validation status |
+| `labelPosition` | `"after" \| "before"` | `"after"` | Label position |
+| `indeterminate` | `boolean` | `false` | Indeterminate state |
+
+### Example
+```tsx
+<Checkbox id="terms" name="acceptTerms">Accept terms</Checkbox>
+<Checkbox id="large" large>Large checkbox</Checkbox>
+<Checkbox valid={false}>Invalid</Checkbox>
+<Checkbox indeterminate>Partial</Checkbox>
+```
+
+---
+
+## RadioGroup / RadioButton
+
+### RadioGroup Props
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value` | `string` | — | Controlled |
+| `defaultValue` | `string` | — | Initial value |
+| `onValueChange` | `(value: string) => void` | — | Callback |
+| `name` | `string` | — | FormData name |
+| `large` | `boolean` | `false` | Large |
+| `labelPosition` | `"after" \| "before" \| "below"` | `"after"` | Label position |
+| `disabled` | `boolean` | `false` | Disabled |
+| `required` | `boolean` | `false` | Required |
+
+### RadioButton Props
+| Prop | Type | Description |
+|------|------|-------------|
+| `value` | `string` | **Required.** Value |
+| `disabled` | `boolean` | Individually disabled |
+
+### Example
+```tsx
+<RadioGroup name="color" defaultValue="blue">
+  <RadioButton value="red">Red</RadioButton>
+  <RadioButton value="blue">Blue</RadioButton>
+  <RadioButton value="green">Green</RadioButton>
+</RadioGroup>
+```
+
+### Controlled
+```tsx
+const [value, setValue] = useState('blue');
+<RadioGroup value={value} onValueChange={setValue}>
+  <RadioButton value="red">Red</RadioButton>
+  <RadioButton value="blue">Blue</RadioButton>
+</RadioGroup>
+```
+
+---
+
+## Segment / SegmentControl
+
+Segmented control (toggle button group).
+
+### Segment Props
+| Prop | Type | Description |
+|------|------|-------------|
+| `legend` | `string` | **Required.** Description |
+| `config` | `SegmentConfiguration` | `{ outline?: boolean, iconOnly?: boolean }` |
+| `value` | `any` | Controlled |
+| `onChange` | `(value, event) => void` | Callback |
+
+### SegmentControl Props
+| Prop | Type | Description |
+|------|------|-------------|
+| `label` | `string` | **Required.** Label |
+| `value` | `any` | **Required.** Value |
+| `icon` | `ReactNode` | Icon |
+| `checked` | `boolean` | Selected |
+| `iconOnly` | `boolean` | Show icon only |
+
+### Example
+```tsx
+<Segment legend="Choose view">
+  <SegmentControl name="view" label="List" value="list" />
+  <SegmentControl name="view" label="Tiles" value="grid" />
+  <SegmentControl name="view" label="Table" value="table" />
+</Segment>
+```
+
+---
+
+## Switch
+
+Toggle switch.
+
+### Props
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `title` | `string` | — | **Required.** Label (also for accessibility) |
+| `value` | `boolean` | — | Controlled |
+| `defaultValue` | `boolean` | — | Initial value |
+| `onChange` | `(value: boolean, event) => void` | — | Callback |
+| `labelPosition` | `"after" \| "before" \| "below"` | `"after"` | Label position |
+| `large` | `boolean` | `false` | Large |
+
+### Example
+```tsx
+<Switch title="Notifications" defaultValue={true} />
+<Switch title="Large" large labelPosition="before" />
+```
+
+---
+
+## Slider
+
+Range slider.
+
+### Props
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `min` | `number` | — | **Required.** Minimum |
+| `max` | `number` | — | **Required.** Maximum |
+| `value` | `number` | — | **Required.** Value |
+| `step` | `number` | — | Step size |
+| `onChange` | `(value: number, event) => void` | — | Callback on change |
+| `onChangeCommitted` | `(value: number) => void` | — | Callback on release |
+| `label` | `string` | — | Label |
+| `showValue` | `boolean` | `true` | Show value |
+
+### Example
+```tsx
+const [value, setValue] = useState(50);
+<Slider min={0} max={100} value={value} onChange={setValue} label="Volume" />
+```
+
+---
+
+## TimePicker
+
+Time selection.
+
+### Props
+| Prop | Type | Description |
+|------|------|-------------|
+| `value` | `Date` | Controlled |
+| `defaultValue` | `Date` | Initial value |
+| `name` | `string` | FormData name |
+| `onChange` | `(date: Date) => void` | Callback |
+| `options` | `TimePickerOptions` | Configuration |
+| `formatDate` | `(date: Date) => string` | Formatting |
+| `disabled` | `boolean` | Disabled |
+| `required` | `boolean` | Required |
+| `error` | `string` | Error text |
+| `hint` | `string` | Hint text |
+
+### TimePickerOptions
+```ts
+{
+  timeFormat?: '12' | '24',
+  showSeconds?: boolean,
+  minuteStepSize?: number,
+  range?: { minValue: Date, maxValue: Date },
+}
+```
+
+### Example
+```tsx
+<TimePicker defaultValue={new Date()} style={{ width: 330 }}>
+  Time
+</TimePicker>
+```
+
+### 12h format with seconds
+```tsx
+<TimePicker
+  value={date}
+  onChange={setDate}
+  options={{ timeFormat: '12', showSeconds: true }}
+  formatDate={Intl.DateTimeFormat('en-US', { hour: 'numeric', minute: 'numeric', second: 'numeric' }).format}
+>
+  Time AM/PM
+</TimePicker>
+```

package/llm-doc/installation.md

@@ -0,0 +1,75 @@
+# Installation & Setup
+
+## Installation
+
+```bash
+npm install @festo-ui/react
+```
+
+## Including CSS
+
+The library requires its CSS stylesheet. Import it once at the root of your application:
+
+```tsx
+import '@festo-ui/react/index.css';
+```
+
+## Imports
+
+All components are exported as named exports from the main package:
+
+```tsx
+import { Button, TextInput, Select, Modal, Accordion } from '@festo-ui/react';
+```
+
+### Complete Export List
+
+**Components:**
+- `Accordion`, `AccordionHeader`, `AccordionItem`, `AccordionItemBody`, `AccordionItemHeader`
+- `BottomSheet`
+- `Breadcrumb`
+- `Button`
+- `Card`, `CardBody`, `CardHeader`, `CardNotification`
+- `Chip`, `ChipContainer`, `ChipType`
+- `LoadingIndicator`
+- `MobileFlyout`, `MobileFlyoutItem`, `MobileFlyoutPage`
+- `AlertModal`, `ConfirmModal`, `CustomModal`, `Prompt`
+- `ImageGallery`, `ImageGalleryContent`, `ImageGallerySwiper`, `ImageGalleryThumbsSwiper`
+- `Pagination`
+- `Popover`, `PopoverMenu`, `PopoverMenuItem`, `PopoverMenuContext`, `Tooltip`, `Legend`
+- `Progress`
+- `SearchInput`, `SearchInputOption`, `SearchResult`
+- `Snackbar`, `SnackbarProvider`, `addSnackbar`, `useSnackbar`
+- `StepperVertical`, `StepVertical`, `StepperHorizontal`, `StepHorizontal`
+- `Tabs`, `TabPane`
+- `TableHeaderCell`
+
+**Forms:**
+- `Checkbox`
+- `ComboBox`
+- `MultiSelect`
+- `RadioGroup`, `RadioButton`
+- `Segment`, `SegmentControl`
+- `Select`
+- `Slider`
+- `Switch`
+- `TextArea`
+- `TextInput`
+- `TimePicker`
+
+**Types (TypeScript):**
+All components export their props types, e.g. `ButtonProps`, `TextInputProps`, `SelectProps`, etc.
+
+## CSS Utility Classes
+
+The library uses CSS classes with the prefix `fwe-`. Commonly used:
+
+- Layout: `fwe-grid`, `fwe-col-{n}`, `fwe-container`, `fwe-d-flex`
+- Spacing: `fwe-m-{size}`, `fwe-p-{size}`, `fwe-mt-{size}`, `fwe-mb-{size}`, `fwe-mr-{size}`, `fwe-ml-{size}`, `fwe-my-{size}`, `fwe-mx-{size}`
+  - Sizes: `xxxs`, `xxs`, `xs`, `s`, `m`, `l`, `xl`, `xxl`
+- Buttons: `fwe-btn`, `fwe-btn-hero`, `fwe-btn-icon`, `fwe-btn-link`, `fwe-btn-lg`, `fwe-btn-block`
+- Colors: `fwe-bg-white`, `fwe-bg-background`, `fwe-bg-black`, `fwe-bg-gray-300`, `fwe-color-red`
+- Flex: `fwe-align-items-center`, `fwe-mr-auto`, `fwe-ml-auto`
+- Table: `fwe-table`, `fwe-tr-sm`, `fwe-tr-md`, `fwe-tr-lg`
+- Text: `fwe-font-size-small`
+- Other: `fwe-dark`, `fwe-b`

package/llm-doc/patterns.md

@@ -0,0 +1,179 @@
+# Patterns & Best Practices
+
+## Controlled vs. Uncontrolled
+
+All form components support both modes:
+
+### Uncontrolled (simpler)
+State is managed internally. Use `defaultValue` / `defaultChecked`:
+```tsx
+<TextInput label="Name" defaultValue="Max" />
+<Checkbox defaultChecked>Option</Checkbox>
+<Select defaultValue={1} options={options} />
+<RadioGroup defaultValue="a"><RadioButton value="a">A</RadioButton></RadioGroup>
+```
+
+### Controlled (full control)
+State is managed externally. Use `value` + `onChange`:
+```tsx
+const [value, setValue] = useState('');
+<TextInput label="Name" value={value} onChange={setValue} />
+```
+
+**Note:** The `onChange` signature varies by component:
+- `TextInput`, `TextArea`: `(value: string, event) => void`
+- `Select`, `ComboBox`: `(value: T) => void`
+- `MultiSelect`: `(value: T[]) => void`
+- `Checkbox`: `(value: boolean, event) => void`
+- `Switch`: `(value: boolean, event) => void`
+- `RadioGroup`: `onValueChange: (value: string) => void`
+- `Slider`: `(value: number, event) => void`
+- `TimePicker`: `(date: Date) => void`
+
+---
+
+## FormData Integration
+
+All form components support native FormData via the `name` prop:
+
+```tsx
+function handleSubmit(event) {
+  event.preventDefault();
+  const formData = new FormData(event.currentTarget);
+  const value = formData.get('fieldName');
+}
+
+<form onSubmit={handleSubmit}>
+  <TextInput name="username" label="Username" />
+  <Select name="role" label="Role" options={roleOptions} />
+  <Checkbox name="acceptTerms">Accept terms</Checkbox>
+  <Switch name="notifications" title="Notifications" />
+  <RadioGroup name="color">
+    <RadioButton value="red">Red</RadioButton>
+    <RadioButton value="blue">Blue</RadioButton>
+  </RadioGroup>
+  <MultiSelect name="categories" label="Categories" options={catOptions} />
+  <TimePicker name="meetingTime">Time</TimePicker>
+  <Slider name="volume" min={0} max={100} value={50} label="Volume" />
+  <button className="fwe-btn fwe-btn-hero" type="submit">Submit</button>
+</form>
+```
+
+---
+
+## Validation
+
+### Error display
+Most form components have an `error` prop:
+```tsx
+<TextInput label="Email" error="Invalid email address" />
+<Select label="Selection" error="Please select" options={options} />
+<TextArea label="Text" error="Required field" />
+```
+
+### HTML5 validation
+```tsx
+<TextInput label="Name" required minLength={3} />
+<TextArea label="Text" required maxLength={500} />
+```
+
+### Checkbox validation
+```tsx
+<Checkbox valid={false}>Invalid option</Checkbox>
+```
+
+---
+
+## Hint Texts
+
+Many components support `hint` for help text:
+```tsx
+<TextInput label="Email" hint="e.g. max@example.com" />
+<Select label="Role" hint="Choose your primary role" options={options} />
+<TimePicker hint="Please select a time">Time</TimePicker>
+```
+
+---
+
+## CSS Classes for Layout
+
+### Grid System
+```tsx
+<div className="fwe-grid">
+  <div className="fwe-col-4">1/3 width</div>
+  <div className="fwe-col-8">2/3 width</div>
+</div>
+```
+
+### Container
+```tsx
+<div className="fwe-container">Centered container</div>
+```
+
+### Buttons with CSS classes (alternative to Button component)
+```tsx
+<button className="fwe-btn">Default</button>
+<button className="fwe-btn fwe-btn-hero">Primary</button>
+<button className="fwe-btn fwe-btn-lg">Large</button>
+<button className="fwe-btn fwe-btn-block">Full width</button>
+<button className="fwe-btn fwe-btn-icon"><Icon /></button>
+<button className="fwe-btn fwe-btn-link fwe-dark">Link</button>
+```
+
+### Spacing
+Prefix `fwe-m-` (margin) and `fwe-p-` (padding), suffixes:
+- Direction: `t` (top), `b` (bottom), `l` (left), `r` (right), `x` (horizontal), `y` (vertical)
+- Sizes: `xxxs`, `xxs`, `xs`, `s`, `m`, `l`, `xl`, `xxl`
+
+```tsx
+<div className="fwe-mt-m fwe-mb-s fwe-px-l">Content with spacing</div>
+```
+
+---
+
+## Navbar Structure
+
+```tsx
+<header className="fwe-fixed-header">
+  <nav className="fwe-navbar">
+    <div className="fwe-container">
+      <MobileFlyout className="fwe-mr-auto">...</MobileFlyout>
+      <div className="fwe-logo-container">
+        <div className="fwe-festo-logo" />
+      </div>
+    </div>
+  </nav>
+</header>
+<div className="fwe-navbar-spacer" />
+```
+
+---
+
+## Tables
+
+```tsx
+<table className="fwe-table">
+  <thead>
+    <tr>
+      <TableHeaderCell ascending={ascending} active={orderBy === 'name'} onClick={...}>
+        Name
+      </TableHeaderCell>
+    </tr>
+  </thead>
+  <tbody>
+    <tr className="fwe-tr-md"><td>Content</td></tr>
+    <tr className="fwe-tr-lg"><td>Content</td></tr>
+    <tr className="fwe-tr-sm"><td>Content</td></tr>
+  </tbody>
+</table>
+```
+
+---
+
+## Important Notes
+
+1. **Import CSS:** Always include `import '@festo-ui/react/index.css'`
+2. **Icons:** Icons are provided separately (e.g. `IconCoreRangeProduct`, `IconSettings`, `IconMore`, `IconDownload`, `IconDelete`, `IconInfo`, `IconWarning`, `IconClose`, `IconCheckSmall`, `IconWorksheet`, `IconMessage`, `IconGridView`, `IconListView`)
+3. **Snackbar:** Requires `<SnackbarProvider>` as wrapper
+4. **Modals:** All modals are controlled via `isOpen` + `onClose`
+5. **All components** accept standard HTML attributes like `className`, `style`, `data-testid`, etc.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@festo-ui/react",
-  "version": "10.1.0-dev.875",
+  "version": "10.1.1-dev.918",
   "author": "Festo UI (styleguide@festo.com)",
   "copyright": "Copyright (c) 2025 Festo SE & Co. KG. All rights reserved.",
   "license": "apache-2.0",
@@ -16,7 +16,8 @@
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "files": [
-    "dist"
+    "dist",
+    "llm-doc"
   ],
   "sideEffects": [
     "**/*.css"
@@ -44,6 +45,7 @@
   "devDependencies": {
     "@biomejs/biome": "2.3.2",
     "@chromatic-com/storybook": "^5.0.0",
+    "@festo-ui/web-essentials": "*",
     "@rsbuild/core": "~1.6.2",
     "@rsbuild/plugin-react": "^1.4.1",
     "@rsbuild/plugin-sass": "^1.4.0",
@@ -52,6 +54,7 @@
     "@rstest/core": "^0.6.5",
     "@rstest/coverage-istanbul": "^0.0.5",
     "@storybook/addon-docs": "^10.2.3",
+    "@storybook/addon-mcp": "^0.6.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",