@festo-ui/web-essentials 10.1.1 → 11.0.0-dev.930

package/llm-doc/forms.md

@@ -0,0 +1,288 @@
+# Forms
+
+## Text Input
+
+```html
+<label class="fwe-input-text">
+  <input type="text" value="Value" />
+  <span class="fwe-input-text-label">Label</span>
+  <span class="fwe-input-text-info">Optional description</span>
+  <span class="fwe-input-text-invalid">Error description</span>
+</label>
+```
+
+### With Validation Icons
+
+```html
+<label class="fwe-input-text fwe-input-text--with-validation-icons">
+  <input type="text" value="Value" required />
+  <span class="fwe-input-text-label">Label</span>
+  <span class="fwe-input-text-invalid">Invalid description</span>
+</label>
+```
+
+### Force Validation States
+
+```html
+<!-- Manually valid -->
+<label class="fwe-input-text fwe-input-text--valid fwe-input-text--with-validation-icons">
+  ...
+</label>
+
+<!-- Manually invalid -->
+<label class="fwe-input-text fwe-input-text--invalid fwe-input-text--with-validation-icons">
+  ...
+</label>
+```
+
+### With Icon
+
+```html
+<label class="fwe-input-text fwe-input-text-icon">
+  <input type="text" value="Value" />
+  <i class="fwe-icon fwe-icon-ecommerce-core-range-product"></i>
+  <span class="fwe-input-text-label">Label</span>
+</label>
+```
+
+### Disabled
+
+```html
+<label class="fwe-input-text">
+  <input type="text" value="" disabled />
+  <span class="fwe-input-text-label">Label</span>
+</label>
+```
+
+---
+
+## Text Area
+
+```html
+<label class="fwe-input-text">
+  <textarea class="fwe-row-5">Content</textarea>
+  <span class="fwe-input-text-label">Label</span>
+  <span class="fwe-input-text-info">Optional description</span>
+  <span class="fwe-input-text-invalid">Error description</span>
+</label>
+```
+
+Rows: `fwe-row-3`, `fwe-row-5` etc.
+
+---
+
+## Select
+
+```html
+<div class="fwe-select-wrapper" style="width: 300px">
+  <select class="fwe-select" name="select-a" id="select-a">
+    <option value=""></option>
+    <option value="a">Option A</option>
+    <option value="b">Option B</option>
+  </select>
+  <label class="fwe-select-label" for="select-a">Label</label>
+  <div class="fwe-select-description">Optional description</div>
+  <div class="fwe-select-invalid">Error message</div>
+</div>
+```
+
+### Custom Options Container
+
+```html
+<div class="fwe-options-container">
+  <option class="fwe-combobox-option" value="a">Option A</option>
+  <option class="fwe-combobox-option fwe-selected" value="b">Option B</option>
+  <option class="fwe-combobox-option fwe-disabled" value="c">Option C</option>
+</div>
+```
+
+### Multi-Select
+
+```html
+<div class="fwe-options-container fwe-options-container--multi-select">
+  <label class="fwe-checkbox" for="ms-a">
+    <input type="checkbox" id="ms-a">
+    <div class="fwe-checkbox-checkmark"></div>
+    <div class="fwe-checkbox-label-content">Option A</div>
+  </label>
+  <!-- ... -->
+</div>
+```
+
+---
+
+## Checkbox
+
+```html
+<label class="fwe-checkbox" for="cb1">
+  <input type="checkbox" id="cb1">
+  <div class="fwe-checkbox-checkmark"></div>
+  <div class="fwe-checkbox-label-content">Label</div>
+</label>
+```
+
+### Sizes
+
+| Class | Description |
+|---|---|
+| *(default)* | Normal |
+| `fwe-checkbox-lg` | Large |
+
+### Label Placement
+
+| Class | Description |
+|---|---|
+| `fwe-checkbox-label-after` | Label right (default) |
+| `fwe-checkbox-label-before` | Label left |
+| `fwe-checkbox-label-below` | Label below the checkbox |
+
+### Checkbox Group
+
+```html
+<fieldset class="fwe-checkbox-group">
+  <legend>Group Label</legend>
+  <label class="fwe-checkbox" for="g1">...</label>
+  <label class="fwe-checkbox" for="g2">...</label>
+</fieldset>
+```
+
+### Indeterminate State
+
+Via JavaScript: `checkbox.indeterminate = true;`
+
+---
+
+## Radio
+
+```html
+<div class="fwe-radio-group">
+  <label class="fwe-radio" for="r1">
+    <input type="radio" name="group" id="r1">
+    <div class="fwe-radio-checkmark"></div>
+    <div class="fwe-radio-label-content">Option A</div>
+  </label>
+  <label class="fwe-radio" for="r2">
+    <input type="radio" name="group" id="r2">
+    <div class="fwe-radio-checkmark"></div>
+    <div class="fwe-radio-label-content">Option B</div>
+  </label>
+</div>
+```
+
+### Sizes & Label Placement
+
+| Class | Description |
+|---|---|
+| `fwe-radio-lg` | Large |
+| `fwe-radio-label-before` | Label left |
+| `fwe-radio-label-below` | Label below |
+
+---
+
+## Switch
+
+```html
+<label class="fwe-switch" for="sw1">
+  <input type="checkbox" id="sw1">
+  <div class="fwe-switch-track"></div>
+  <div class="fwe-switch-label-content">Switch Label</div>
+</label>
+```
+
+### Sizes & Label Placement
+
+| Class | Description |
+|---|---|
+| `fwe-switch-lg` | Large |
+| `fwe-switch-label-after` | Label right |
+| `fwe-switch-label-before` | Label left |
+| `fwe-switch-label-below` | Label below |
+
+---
+
+## Slider
+
+```html
+<input class="fwe-slider-input" type="range" min="1" max="100" />
+```
+
+### With Label
+
+```html
+<label class="fwe-slider">
+  <span>Label</span>
+  <input class="fwe-slider-input" type="range" min="1" max="100" />
+</label>
+```
+
+---
+
+## Segment (Toggle Group)
+
+### Outline Variant (Normal)
+
+```html
+<fieldset class="fwe-segment fwe-segment-outline">
+  <div class="fwe-segment-group">
+    <input class="fwe-segment-input" id="seg1" type="radio" name="group" value="day" checked />
+    <label class="fwe-segment-label" for="seg1">Day</label>
+    <input class="fwe-segment-input" id="seg2" type="radio" name="group" value="week" />
+    <label class="fwe-segment-label" for="seg2">Week</label>
+  </div>
+</fieldset>
+```
+
+### Strong Variant
+
+```html
+<fieldset class="fwe-segment">
+  <div class="fwe-segment-group">...</div>
+</fieldset>
+```
+
+### With Icons
+
+Add class `fwe-segment-icon`:
+
+```html
+<fieldset class="fwe-segment fwe-segment-icon fwe-segment-outline">
+  <div class="fwe-segment-group">
+    <input class="fwe-segment-input" id="seg1" type="radio" name="view" value="list" checked />
+    <label class="fwe-segment-label" for="seg1">
+      <i aria-hidden="true" class="fwe-icon fwe-icon-list-list-view"></i>
+    </label>
+  </div>
+</fieldset>
+```
+
+---
+
+## Search Input
+
+```html
+<label class="fwe-search-input">
+  <input placeholder="Search" type="search" value="an" />
+  <div class="fwe-search-icon"></div>
+  <div class="fwe-clear-icon"></div>
+  <div class="fwe-search-suggestions">
+    <div class="fwe-search-suggestion">Apple</div>
+    <div class="fwe-search-suggestion">B<strong>anan</strong>a</div>
+  </div>
+</label>
+```
+
+Disabled: `<input ... disabled />`
+
+---
+
+## Date Picker
+
+Custom Element:
+
+```html
+<!-- Single date -->
+<fwe-date-picker></fwe-date-picker>
+
+<!-- Range -->
+<fwe-date-picker data-type="range"></fwe-date-picker>
+```

package/llm-doc/icons.md

@@ -0,0 +1,45 @@
+# Icons
+
+## Usage
+
+Icons are included via `<i>` elements with CSS classes:
+
+```html
+<i class="fwe-icon fwe-icon-{category}-{name}"></i>
+```
+
+## Sizes
+
+| Class | Description |
+|---|---|
+| `fwe-icon` | Default size |
+| `fwe-icon-lg` | Large |
+| `fwe-icon-2x` | 2x |
+| `fwe-icon-3x` | 3x |
+| `fwe-icon-4x` | 4x |
+
+## Beispiele
+
+```html
+<i class="fwe-icon fwe-icon-file-edit"></i>
+<i class="fwe-icon fwe-icon-file-delete fwe-icon-lg"></i>
+<i class="fwe-icon fwe-icon-communication-notification fwe-icon-2x"></i>
+<i class="fwe-icon fwe-icon-list-filter fwe-icon-lg"></i>
+<i class="fwe-icon fwe-icon-menu-more fwe-icon-lg"></i>
+<i class="fwe-icon fwe-icon-menu-add fwe-icon-lg"></i>
+<i class="fwe-icon fwe-icon-copy"></i>
+<i class="fwe-icon fwe-icon-list-list-view"></i>
+<i class="fwe-icon fwe-icon-list-grid-view"></i>
+<i class="fwe-icon fwe-icon-communication-message"></i>
+<i class="fwe-icon fwe-icon-file-visible"></i>
+<i class="fwe-icon fwe-icon-file-search"></i>
+<i class="fwe-icon fwe-icon-ecommerce-core-range-product"></i>
+```
+
+### With aria-hidden
+
+Decorative icons should include `aria-hidden="true"`:
+
+```html
+<i aria-hidden="true" class="fwe-icon fwe-icon-list-list-view"></i>
+```

package/llm-doc/layout.md

@@ -0,0 +1,46 @@
+# Layout & Grid
+
+## Grid System
+
+12-column CSS grid layout with responsive breakpoints.
+
+### Container
+
+```html
+<div class="fwe-grid">
+  <div class="fwe-col-6">Half width</div>
+  <div class="fwe-col-6">Half width</div>
+</div>
+```
+
+### Column Classes
+
+| Class | Description |
+|---|---|
+| `fwe-col` | Auto width |
+| `fwe-col-{1-12}` | Fixed column width (out of 12) |
+| `fwe-col-sm-{n}` | From breakpoint `sm` (≥576px) |
+| `fwe-col-md-{n}` | From breakpoint `md` (≥768px) |
+| `fwe-col-lg-{n}` | From breakpoint `lg` (≥992px) |
+| `fwe-col-xl-{n}` | From breakpoint `xl` (≥1200px) |
+| `fwe-col-xxl-{n}` | From breakpoint `xxl` (≥1400px) |
+
+### Responsive Example
+
+```html
+<div class="fwe-grid">
+  <div class="fwe-col-12 fwe-col-sm-6 fwe-col-lg-4">
+    Full width → half width → third
+  </div>
+  <div class="fwe-col-12 fwe-col-sm-6 fwe-col-lg-4">...</div>
+  <div class="fwe-col-12 fwe-col-sm-12 fwe-col-lg-4">...</div>
+</div>
+```
+
+## Layout Classes
+
+| Class | Description |
+|---|---|
+| `fwe-container` | Centered container with max-width |
+| `fwe-layout-1024` | Limits layout to 1024px width |
+| `fwe-w-100` | Full width (width: 100%) |

package/llm-doc/organisms.md

@@ -0,0 +1,198 @@
+# Organisms
+
+Larger, composite components.
+
+## Footer
+
+```html
+<footer class="fwe-footer">
+  <div class="fwe-container">
+    <div class="fwe-social-media">
+      <a class="fwe-social-media-link" href="#">
+        <i class="fwe-icon fwe-icon-social-facebook fwe-icon-lg"></i>
+      </a>
+      <!-- more social links -->
+    </div>
+    <div class="fwe-footer-details fwe-grid">
+      <div class="fwe-col-12 fwe-col-md-4">
+        <h4>Column 1</h4>
+        <ul>
+          <li><a href="#">Link 1</a></li>
+        </ul>
+      </div>
+      <!-- more columns -->
+    </div>
+  </div>
+  <div class="fwe-bottomline">
+    <div class="fwe-container">
+      <div class="fwe-sitelinks">
+        <div class="fwe-sitelinks-groupa">
+          <a href="#">Imprint</a>
+          <a href="#">Privacy</a>
+        </div>
+        <div class="fwe-sitelinks-groupb">
+          <a href="#">Terms of Use</a>
+        </div>
+      </div>
+      <div class="fwe-copyright">© Festo SE & Co. KG</div>
+    </div>
+  </div>
+</footer>
+```
+
+### Light Variant
+
+Minimal footer with bottom line only (without social media and columns).
+
+---
+
+## Login
+
+```html
+<div class="fwe-login-layout">
+  <!-- Navbar on top -->
+  <header class="fwe-fixed-header">
+    <nav class="fwe-navbar">...</nav>
+  </header>
+  <div class="fwe-navbar-spacer"></div>
+
+  <!-- Background image (optional) -->
+  <div class="fwe-login-background" style="background-image: url(...)"></div>
+
+  <!-- Login container -->
+  <div class="fwe-login-container">
+    <div class="fwe-login-form">
+      <h2>Login</h2>
+      <label class="fwe-input-text">
+        <input type="email" placeholder="Email" />
+        <span class="fwe-input-text-label">Email</span>
+      </label>
+      <label class="fwe-input-text">
+        <input type="password" placeholder="Password" />
+        <span class="fwe-input-text-label">Password</span>
+      </label>
+      <label class="fwe-checkbox" for="remember">
+        <input type="checkbox" id="remember" />
+        <div class="fwe-checkbox-checkmark"></div>
+        <div class="fwe-checkbox-label-content">Remember me</div>
+      </label>
+      <button class="fwe-btn fwe-btn-hero fwe-btn-block">Login</button>
+      <div class="fwe-login-link-container">
+        <a class="fwe-text-link" href="#">Forgot password?</a>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+---
+
+## Header Slider
+
+Full-screen header with image slider.
+
+```html
+<div class="fwe-header-slider">
+  <div class="fwe-header-slider-item">
+    <img src="slide1.jpg" />
+    <div class="fwe-header-slider-content">
+      <h1>Title</h1>
+      <p>Description</p>
+    </div>
+  </div>
+</div>
+```
+
+---
+
+## Header Module (Small)
+
+Compact header area.
+
+```html
+<div class="fwe-headermodul-small">
+  <div class="fwe-headermodul-small-content">
+    <h1>Page Title</h1>
+  </div>
+</div>
+```
+
+---
+
+## Image Gallery
+
+Image gallery as modal overlay.
+
+```html
+<div class="fwe-modal-backdrop">
+  <div class="fwe-modal fwe-modal-image-gallery">
+    <div class="fwe-image-gallery-header">
+      <div class="fwe-pagination fwe-pagination--on-dark-bg">
+        <button class="fwe-navigate-btn-down"></button>
+        <span class="fwe-page-current">01</span>
+        <span class="fwe-page-max">12</span>
+        <button class="fwe-navigate-btn-up"></button>
+      </div>
+      <button class="fwe-image-gallery-scale-btn fwe-ml-auto"></button>
+      <button class="fwe-image-gallery-close-btn fwe-ml-3"></button>
+    </div>
+    <div class="fwe-image-gallery">
+      <img src="image.jpg" />
+    </div>
+  </div>
+</div>
+```
+
+### Variants
+
+| Class | Description |
+|---|---|
+| `fwe-modal-image-gallery` | Default |
+| `fwe-modal-image-gallery--with-container` | With text container |
+| `fwe-modal-image-gallery--with-thumbnails` | With thumbnail strip |
+
+### With Thumbnails
+
+```html
+<div class="fwe-image-gallery-thumbs">
+  <div class="fwe-image-gallery-thumbs-nail fwe-active">
+    <img src="thumb1.jpg" />
+  </div>
+  <div class="fwe-image-gallery-thumbs-nail">
+    <img src="thumb2.jpg" />
+  </div>
+</div>
+```
+
+### With Text Container
+
+```html
+<div class="fwe-image-gallery-container">
+  <div class="fwe-image-gallery">
+    <img src="image.jpg" />
+  </div>
+  <div class="fwe-image-gallery-content">
+    <h3>Title</h3>
+    <p>Description</p>
+  </div>
+</div>
+```
+
+---
+
+## Teaser (H07/H08)
+
+Content teaser module.
+
+```html
+<div class="fwe-teaser">
+  <div class="fwe-teaser-image">
+    <img src="teaser.jpg" />
+  </div>
+  <div class="fwe-teaser-content">
+    <h3>Title</h3>
+    <p>Description</p>
+    <a class="fwe-text-link" href="#">Learn more</a>
+  </div>
+</div>
+```

package/llm-doc/typography.md

@@ -0,0 +1,34 @@
+# Typography
+
+## Headings
+
+Styled by default via HTML tags `<h1>`–`<h4>`:
+
+| Tag | Size | Weight |
+|---|---|---|
+| `h1` | 32pt | Bold |
+| `h2` | 24pt | Bold |
+| `h3` | 24pt | Regular |
+| `h4` | 16pt | Bold |
+
+### Intro Heading
+
+```html
+<h1 class="fwe-h-intro">Large Intro Heading</h1>
+```
+
+## Body Text
+
+| Class | Size |
+|---|---|
+| *(default)* | 16pt |
+| `fwe-font-size-md` | 14pt |
+| `fwe-font-size-small` | 12pt |
+
+### Example
+
+```html
+<p>Normal text (16pt)</p>
+<p class="fwe-font-size-md">Smaller text (14pt)</p>
+<p class="fwe-font-size-small">Smallest text (12pt)</p>
+```