@festo-ui/react 11.0.0-dev.961 → 11.0.0-dev.962

package/dist/components/button/Button.js

@@ -10,7 +10,7 @@ const Button = /*#__PURE__*/ forwardRef(({ icon, type = 'button', disabled = fal
     }, {
         'fwe-btn-hero': primary && !tertiary
     }, {
-        'fwe-btn-link': tertiary && !primary
+        'fwe-btn-tertiary': tertiary && !primary
     }, {
         'fwe-btn-lg': large
     }, {

package/dist/components/modals/AlertModal.js

@@ -33,7 +33,7 @@ const AlertModal = /*#__PURE__*/ forwardRef(({ title, subtitle, alertType, stron
                     type: "button",
                     "aria-label": "Cancel",
                     className: classnames('fwe-btn fwe-btn-lg', {
-                        'fwe-btn-link': strong
+                        'fwe-btn-tertiary': strong
                     }),
                     onClick: onCancel,
                     children: cancel

package/llm-doc/components.md

@@ -5,6 +5,7 @@
 Collapsible content sections.
 
 ### Components
+
 - `Accordion` — Container
 - `AccordionHeader` — Header of the entire accordion
 - `AccordionItem` — Single collapsible element
@@ -12,22 +13,25 @@ Collapsible content sections.
 - `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 |
+
+| 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 |
+
+| 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>
@@ -43,6 +47,7 @@ Collapsible content sections.
 ```
 
 ### Example — Auto-Collapse
+
 ```tsx
 <Accordion keepItemsOpen={false}>
   <AccordionHeader>Title</AccordionHeader>
@@ -54,9 +59,10 @@ Collapsible content sections.
 ```
 
 ### Example — Controlled
+
 ```tsx
 const [expanded, setExpanded] = useState('item1');
-const handleChange = (panel) => (isExpanded) => {
+const handleChange = panel => isExpanded => {
   setExpanded(isExpanded ? panel : false);
 };
 
@@ -65,7 +71,7 @@ const handleChange = (panel) => (isExpanded) => {
     <AccordionItemHeader>Item 1</AccordionItemHeader>
     <AccordionItemBody>Content 1</AccordionItemBody>
   </AccordionItem>
-</Accordion>
+</Accordion>;
 ```
 
 ---
@@ -75,16 +81,18 @@ const handleChange = (panel) => (isExpanded) => {
 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 |
+
+| 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);
 
@@ -101,24 +109,27 @@ const [open, setOpen] = useState(false);
 Navigation path display.
 
 ### Props
-| Prop | Type | Description |
-|------|------|-------------|
+
+| Prop        | Type                   | Description                 |
+| ----------- | ---------------------- | --------------------------- |
 | `locations` | `BreadcrumbLocation[]` | Array with `{ text, href }` |
-| `onClick` | `(event) => void` | Click handler for links |
+| `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' },
+    { text: 'Current', href: '/products/current' }
   ]}
-  onClick={(e) => e.preventDefault()}
+  onClick={e => e.preventDefault()}
 />
 ```
 
 ### Example — With children
+
 ```tsx
 <Breadcrumb>
   <a href="/components">Components</a>
@@ -133,17 +144,19 @@ Navigation path display.
 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 |
+
+| 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>
@@ -161,12 +174,14 @@ Standard buttons in various variants.
 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
@@ -189,30 +204,37 @@ Card component with header, body, and notifications.
 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 |
+
+| 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 |
-|------|------|---------|-------------|
+
+| 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.Filter} selected>
+    Filter
+  </Chip>
+  <Chip type={ChipType.Action} icon={<IconCoreRangeProduct />}>
+    Action
+  </Chip>
   <Chip type={ChipType.Readonly}>Readonly</Chip>
-</ChipContainer>
+</ChipContainer>;
 ```
 
 ---
@@ -222,11 +244,13 @@ import { Chip, ChipContainer, ChipType } from '@festo-ui/react';
 Loading indicator in three sizes.
 
 ### Props
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `size` | `"large" \| "medium" \| "small"` | `"large"` | Size |
+
+| Prop   | Type                             | Default   | Description |
+| ------ | -------------------------------- | --------- | ----------- |
+| `size` | `"large" \| "medium" \| "small"` | `"large"` | Size        |
 
 ### Example
+
 ```tsx
 <LoadingIndicator />
 <LoadingIndicator size="medium">Loading...</LoadingIndicator>
@@ -240,32 +264,36 @@ Loading indicator in three sizes.
 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 |
+
+| 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 |
+
+| 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 |
+
+| Prop   | Type      | Description                   |
+| ------ | --------- | ----------------------------- |
+| `name` | `string`  | Unique page name              |
 | `root` | `boolean` | Whether this is the root page |
-| `back` | `string` | Back text |
+| `back` | `string`  | Back text                     |
 
 ### Example
+
 ```tsx
 <MobileFlyout>
   <MobileFlyoutPage root name="root">
@@ -288,7 +316,9 @@ Mobile navigation with nested pages.
 Various dialog types.
 
 ### AlertModal
+
 Displays a warning/info dialog.
+
 ```tsx
 <AlertModal
   isOpen={open}
@@ -298,15 +328,17 @@ Displays a warning/info dialog.
   title="Title"
   subtitle="Subtitle"
   body="Message"
-  alertType="info"  // or "warning"
+  alertType="info" // or "warning"
   cancel="Cancel"
   ok="OK"
-  strong={false}  // true for strong warning
+  strong={false} // true for strong warning
 />
 ```
 
 ### ConfirmModal
+
 Confirmation dialog.
+
 ```tsx
 <ConfirmModal
   isOpen={open}
@@ -318,12 +350,14 @@ Confirmation dialog.
   body="Do you want to continue?"
   cancel="Cancel"
   ok="OK"
-  large={false}  // true for large scrollable variant
+  large={false} // true for large scrollable variant
 />
 ```
 
 ### Prompt
+
 Input dialog.
+
 ```tsx
 <Prompt
   isOpen={open}
@@ -340,19 +374,13 @@ Input dialog.
 ```
 
 ### CustomModal
+
 Freely customizable dialog.
+
 ```tsx
-<CustomModal
-  isOpen={open}
-  onClose={() => setOpen(false)}
-  title="Title"
-  subtitle="Subtitle"
-  closeOnBackdrop={false}
->
+<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-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)}>
@@ -368,13 +396,14 @@ Freely customizable dialog.
 ```
 
 ### 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 |
+
+| 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               |
 
 ---
 
@@ -383,19 +412,21 @@ Freely customizable dialog.
 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 |
+
+| 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);
 
@@ -419,39 +450,43 @@ const [open, setOpen] = useState(false);
 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 |
+
+| 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" />
 ```
 
----
+## fwe-btn-tertiary
 
 ## 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 |
+
+| 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>
@@ -466,7 +501,7 @@ Overlay elements for additional information.
 </PopoverMenu>
 
 <Legend items={[{ name: 'PN', text: 'Part Number' }]}>
-  <button className="fwe-btn fwe-btn-link fwe-dark"><IconInfo />Legend</button>
+  <button className="fwe-btn fwe-btn-tertiary fwe-dark"><IconInfo />Legend</button>
 </Legend>
 ```
 
@@ -477,13 +512,15 @@ Overlay elements for additional information.
 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) |
+
+| 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 />
@@ -497,16 +534,18 @@ Progress bar.
 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 |
+
+| 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([]);
@@ -522,7 +561,7 @@ function handleChange(value) {
       <SearchResult label={item} query={query} />
     </SearchInputOption>
   ))}
-</SearchInput>
+</SearchInput>;
 ```
 
 ---
@@ -532,7 +571,9 @@ function handleChange(value) {
 Toast notifications.
 
 ### Setup
+
 Wrap with `SnackbarProvider` at the root:
+
 ```tsx
 <SnackbarProvider>
   <App />
@@ -540,12 +581,14 @@ Wrap with `SnackbarProvider` at the root:
 ```
 
 ### Usage with hook
+
 ```tsx
 const showSnackbar = useSnackbar();
 showSnackbar({ text: 'Successfully saved!' });
 ```
 
 ### Usage without hook
+
 ```tsx
 import { addSnackbar } from '@festo-ui/react';
 addSnackbar({ text: 'Saved!' });
@@ -558,21 +601,25 @@ addSnackbar({ text: 'Saved!' });
 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>
+    <button className="fwe-btn" onClick={() => setStepIndex(stepIndex + 1)}>
+      Next
+    </button>
   </StepVertical>
   <StepVertical title="Step 2">
     <p>Content</p>
   </StepVertical>
-</StepperVertical>
+</StepperVertical>;
 ```
 
 ### Example — Horizontal
+
 ```tsx
 <StepperHorizontal stepIndex={stepIndex} onChange={setStepIndex}>
   <StepHorizontal title="Step 1">Content</StepHorizontal>
@@ -587,20 +634,23 @@ const [stepIndex, setStepIndex] = useState(0);
 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 |
+
+| 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 |
+
+| 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>
@@ -610,12 +660,13 @@ Tab navigation with content areas.
 ```
 
 ### Configuration example
+
 ```tsx
 <Tabs
   viewType="legacy"
   config={{
     tabBar: { fullWidth: true },
-    tabItems: { appearance: 'fill' },  // 'equal' | 'fill'
+    tabItems: { appearance: 'fill' } // 'equal' | 'fill'
   }}
 >
   <TabPane name="Tab 1">Content</TabPane>
@@ -629,12 +680,14 @@ Tab navigation with content areas.
 Sortable table header cell.
 
 ### Props
-| Prop | Type | Description |
-|------|------|-------------|
-| `active` | `boolean` | Whether this column is actively sorted |
-| `ascending` | `boolean` | **Required.** Sort direction |
+
+| 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);
@@ -655,7 +708,9 @@ const [ascending, setAscending] = useState(true);
     </tr>
   </thead>
   <tbody>
-    <tr className="fwe-tr-md"><td>Entry</td></tr>
+    <tr className="fwe-tr-md">
+      <td>Entry</td>
+    </tr>
   </tbody>
-</table>
+</table>;
 ```

package/llm-doc/installation.md

@@ -25,6 +25,7 @@ import { Button, TextInput, Select, Modal, Accordion } from '@festo-ui/react';
 ### Complete Export List
 
 **Components:**
+
 - `Accordion`, `AccordionHeader`, `AccordionItem`, `AccordionItemBody`, `AccordionItemHeader`
 - `BottomSheet`
 - `Breadcrumb`
@@ -45,6 +46,7 @@ import { Button, TextInput, Select, Modal, Accordion } from '@festo-ui/react';
 - `TableHeaderCell`
 
 **Forms:**
+
 - `Checkbox`
 - `ComboBox`
 - `MultiSelect`
@@ -67,7 +69,7 @@ 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`
+- Buttons: `fwe-btn`, `fwe-btn-hero`, `fwe-btn-icon`, `fwe-btn-tertiary`, `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`

package/llm-doc/patterns.md

@@ -5,7 +5,9 @@
 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>
@@ -14,13 +16,16 @@ State is managed internally. Use `defaultValue` / `defaultChecked`:
 ```
 
 ### Controlled (full control)
+
 State is managed externally. Use `value` + `onChange`:
+
 ```tsx
 const [value, setValue] = useState('');
-<TextInput label="Name" value={value} onChange={setValue} />
+<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`
@@ -55,8 +60,10 @@ function handleSubmit(event) {
   <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>
+  <button className="fwe-btn fwe-btn-hero" type="submit">
+    Submit
+  </button>
+</form>;
 ```
 
 ---
@@ -64,7 +71,9 @@ function handleSubmit(event) {
 ## 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} />
@@ -72,12 +81,14 @@ Most form components have an `error` prop:
 ```
 
 ### HTML5 validation
+
 ```tsx
 <TextInput label="Name" required minLength={3} />
 <TextArea label="Text" required maxLength={500} />
 ```
 
 ### Checkbox validation
+
 ```tsx
 <Checkbox valid={false}>Invalid option</Checkbox>
 ```
@@ -87,6 +98,7 @@ Most form components have an `error` prop:
 ## 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} />
@@ -98,6 +110,7 @@ Many components support `hint` for help text:
 ## CSS Classes for Layout
 
 ### Grid System
+
 ```tsx
 <div className="fwe-grid">
   <div className="fwe-col-4">1/3 width</div>
@@ -106,22 +119,26 @@ Many components support `hint` for help text:
 ```
 
 ### 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>
+<button className="fwe-btn fwe-btn-tertiary 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`
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@festo-ui/react",
-  "version": "11.0.0-dev.961",
+  "version": "11.0.0-dev.962",
   "author": "Festo UI (styleguide@festo.com)",
   "copyright": "Copyright (c) 2025 Festo SE & Co. KG. All rights reserved.",
   "license": "apache-2.0",