@festo-ui/react 11.0.1 → 11.1.0-dev.1008

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-primary`, `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-primary" 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-primary">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.1",
+  "version": "11.1.0-dev.1008",
   "author": "Festo UI (styleguide@festo.com)",
   "copyright": "Copyright (c) 2025 Festo SE & Co. KG. All rights reserved.",
   "license": "apache-2.0",