@festo-ui/web-essentials 10.1.0 → 10.1.1-dev.919

package/llm-doc/components.md

@@ -0,0 +1,643 @@
+# Components
+
+## Accordion
+
+Collapsible content panels using native `<details>`/`<summary>` elements.
+
+```html
+<div class="fwe-accordion">
+  <div class="fwe-accordion-header">Optional Header</div>
+  <details class="fwe-accordion-item" open>
+    <summary class="fwe-accordion-item-header">Title</summary>
+    <div class="fwe-accordion-item-body">Content</div>
+  </details>
+  <details class="fwe-accordion-item">
+    <summary class="fwe-accordion-item-header">Title 2</summary>
+    <div class="fwe-accordion-item-body">Content 2</div>
+  </details>
+</div>
+```
+
+---
+
+## Badge
+
+Small status/label indicators.
+
+```html
+<span class="fwe-badge">5</span>
+<span class="fwe-badge fwe-badge-hero">Hero</span>
+```
+
+### Sizes
+
+| Class | Description |
+|---|---|
+| `fwe-badge-xl` | Extra large |
+| `fwe-badge-lg` | Large |
+| `fwe-badge-md` | Medium |
+| `fwe-badge-sm` | Small |
+
+### Colors
+
+`fwe-badge-caerul`, `fwe-badge-dark`, `fwe-badge-green`, `fwe-badge-yellow`, `fwe-badge-orange`, `fwe-badge-red`, `fwe-badge-hero`, `fwe-badge-control`
+
+### Text-Badge
+
+```html
+<span class="fwe-badge-text">12</span>
+```
+
+---
+
+## Bottom Navigation
+
+Mobile tab bar at the bottom of the screen.
+
+```html
+<div class="fwe-bottom-navigation">
+  <button class="fwe-bottom-navigation-button fwe-selected">
+    <i class="fwe-icon fwe-icon-menu-home"></i>
+    <span>Home</span>
+  </button>
+  <button class="fwe-bottom-navigation-button">
+    <i class="fwe-icon fwe-icon-file-search"></i>
+    <span>Search</span>
+  </button>
+</div>
+```
+
+---
+
+## Bottom Sheet
+
+Mobile slide-up panel.
+
+```html
+<div class="fwe-bottom-sheet-backdrop fwe-bottom-sheet-backdrop--visible">
+  <div class="fwe-bottom-sheet-container fwe-bottom-sheet-container--open">
+    <div class="fwe-bottom-sheet-header">
+      <div class="fwe-bottom-sheet-drag-handle-container">
+        <div class="fwe-bottom-sheet-drag-handle"></div>
+      </div>
+      <button class="fwe-bottom-sheet-close-btn"></button>
+    </div>
+    <div class="fwe-bottom-sheet-content">Content</div>
+  </div>
+</div>
+```
+
+### Variants
+
+| Class | Description |
+|---|---|
+| `fwe-bottom-sheet-container--expanded` | Fully expanded |
+| `fwe-bottom-sheet-container--expand-from-center` | Expands from center |
+
+---
+
+## Breadcrumb
+
+Navigation breadcrumb trail.
+
+```html
+<nav aria-label="Breadcrumb" class="fwe-breadcrumb">
+  <ol>
+    <li><a href="/page1">Page 1</a></li>
+    <li><a href="/page2">Page 2</a></li>
+    <li><a href="" aria-current="page">Current Page</a></li>
+  </ol>
+</nav>
+```
+
+### Mobile Variant
+
+```html
+<nav aria-label="Breadcrumb" class="fwe-breadcrumb fwe-breadcrumb--mobile">
+  ...
+</nav>
+```
+
+### Custom Color
+
+```html
+<nav class="fwe-breadcrumb" style="color: var(--fwe-text-light)">
+  ...
+</nav>
+```
+
+---
+
+## Button
+
+```html
+<!-- Primary (Hero) -->
+<button class="fwe-btn fwe-btn-hero">Primary</button>
+
+<!-- Secondary (Standard) -->
+<button class="fwe-btn">Secondary</button>
+
+<!-- Link-Style -->
+<button class="fwe-btn fwe-btn-link">Link</button>
+
+<!-- Dark Link -->
+<button class="fwe-btn fwe-btn-link fwe-dark">Dark Link</button>
+
+<!-- Icon-Button -->
+<button class="fwe-btn fwe-btn-icon">
+  <i class="fwe-icon fwe-icon-file-edit"></i>
+</button>
+```
+
+### Sizes
+
+| Class | Description |
+|---|---|
+| *(default)* | Normal |
+| `fwe-btn-lg` | Large |
+
+### Block Button
+
+```html
+<button class="fwe-btn fwe-btn-hero fwe-btn-block">Full width</button>
+```
+
+### Floating Action Button
+
+```html
+<button class="fwe-btn fwe-btn-floating">
+  <i class="fwe-icon fwe-icon-menu-add"></i>
+</button>
+```
+
+### States
+
+`disabled` attribute for disabled state.
+
+---
+
+## Card
+
+```html
+<div class="fwe-card">
+  <div class="fwe-card-header">
+    <h4 class="fwe-card-title">Title</h4>
+  </div>
+  <div class="fwe-card-body">
+    <p class="fwe-card-text">Content</p>
+  </div>
+</div>
+```
+
+### With Image
+
+```html
+<div class="fwe-card">
+  <div class="fwe-card-img-169">
+    <img src="image.jpg" />
+  </div>
+  <div class="fwe-card-body">...</div>
+</div>
+```
+
+Image formats: `fwe-card-img-169` (16:9), `fwe-card-img-32` (3:2)
+
+### With Notification
+
+```html
+<div class="fwe-card">
+  <div class="fwe-card-notification">Notification text</div>
+  <div class="fwe-card-body">...</div>
+</div>
+```
+
+---
+
+## Chips
+
+Selectable tag/filter buttons.
+
+```html
+<div class="fwe-chip-container">
+  <button class="fwe-chip">Chip 1</button>
+  <button class="fwe-chip fwe-selected">Chip 2 (active)</button>
+  <button class="fwe-chip fwe-disabled">Chip 3 (disabled)</button>
+</div>
+```
+
+### Variants
+
+| Class | Description |
+|---|---|
+| *(default)* | Choice Chip |
+| `fwe-category` | Category Chip |
+| `fwe-filter` | Filter Chip |
+| `fwe-readonly` | Read-only |
+
+### Large Chips
+
+```html
+<div class="fwe-chip-container fwe-chip-container-lg">...</div>
+```
+
+---
+
+## List
+
+```html
+<ul class="fwe-list-group">
+  <li class="fwe-list-group-item">Item 1</li>
+  <li class="fwe-list-group-item fwe-active">Item 2 (active)</li>
+  <li class="fwe-list-group-item fwe-disabled">Item 3 (disabled)</li>
+</ul>
+```
+
+### As Links
+
+```html
+<div class="fwe-list-group">
+  <a class="fwe-list-group-item" href="#">Link Item</a>
+</div>
+```
+
+### As Buttons
+
+```html
+<div class="fwe-list-group">
+  <button class="fwe-list-group-item">Button Item</button>
+</div>
+```
+
+### With Borders
+
+```html
+<ul class="fwe-list-group fwe-list-group-border">...</ul>
+```
+
+### Horizontal
+
+```html
+<ul class="fwe-list-group fwe-list-group-horizontal">...</ul>
+```
+
+### Custom Content
+
+```html
+<div class="fwe-list-group">
+  <div class="fwe-list-group-item fwe-list-group-item-custom">
+    <div class="fwe-list-group-item-head">Header</div>
+    <div class="fwe-list-group-item-body">Body</div>
+    <div class="fwe-list-group-item-footer">Footer</div>
+  </div>
+</div>
+```
+
+---
+
+## Loading Indicator
+
+```html
+<div class="fwe-waiting-container">
+  <div class="fwe-waiting-indicator">
+    <div class="fwe-waiting-circle-1"></div>
+    <div class="fwe-waiting-circle-2"></div>
+    <div class="fwe-waiting-circle-3"></div>
+    <div class="fwe-waiting-circle-4"></div>
+  </div>
+</div>
+```
+
+### Sizes
+
+| Class | Description |
+|---|---|
+| `fwe-waiting-container` | Default |
+| `fwe-waiting-container-sm` | Small |
+| `fwe-waiting-indicator-md` | Medium indicator |
+| `fwe-waiting-indicator-sm` | Small indicator |
+
+### With Text
+
+```html
+<div class="fwe-waiting-container">
+  <div class="fwe-waiting-indicator">...</div>
+  <div class="fwe-waiting-content-container">Loading...</div>
+</div>
+```
+
+---
+
+## Modal
+
+```html
+<div class="fwe-modal-backdrop">
+  <div class="fwe-modal">
+    <button class="fwe-modal-close-btn"></button>
+    <div class="fwe-modal-header">
+      <h2 class="fwe-modal-h1">Title</h2>
+      <h3 class="fwe-modal-h2">Subtitle</h3>
+    </div>
+    <div class="fwe-modal-body">Content</div>
+    <div class="fwe-modal-footer">
+      <div class="fwe-modal-buttons">
+        <button class="fwe-btn">Cancel</button>
+        <button class="fwe-btn fwe-btn-hero">OK</button>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+### Variants
+
+| Class | Description |
+|---|---|
+| `fwe-modal--warning` | Warning |
+| `fwe-modal--error fwe-modal--with-indicator-bar` | Error with indicator bar |
+| `fwe-modal--large` | Large modal |
+
+---
+
+## Navbar
+
+```html
+<header class="fwe-fixed-header">
+  <nav class="fwe-navbar">
+    <div class="fwe-container">
+      <div class="fwe-app-logo-container">
+        <img src="app-logo.png" />
+      </div>
+      <nav class="fwe-navlist fwe-d-none fwe-d-md-flex">
+        <a href="#" class="fwe-active">Page 1</a>
+        <a href="#">Page 2</a>
+      </nav>
+      <div class="fwe-logo-container">
+        <div class="fwe-festo-logo"></div>
+      </div>
+    </div>
+  </nav>
+</header>
+<div class="fwe-navbar-spacer"></div>
+```
+
+### Mobile Flyout
+
+```html
+<div class="fwe-mobile-flyout fwe-d-block fwe-d-md-none">
+  <button class="fwe-burger-button"></button>
+</div>
+<div class="fwe-mobile-flyout-container opened">
+  <div class="fwe-mobile-flyout-page">
+    <button class="fwe-close-button"></button>
+    <div class="fwe-mobile-flyout-item-container">
+      <a class="fwe-mobile-flyout-item fwe-active">Page 1</a>
+      <a class="fwe-mobile-flyout-item">Page 2</a>
+    </div>
+  </div>
+</div>
+```
+
+### App Title (without Logo)
+
+```html
+<nav class="fwe-navbar fwe-navbar--no-logo">
+  <div class="fwe-container">
+    <div class="fwe-app-title-container">APP NAME</div>
+    ...
+  </div>
+</nav>
+```
+
+---
+
+## Navbar Menu
+
+Dropdown menus in the navbar (profile, notifications).
+
+```html
+<div class="fwe-button-container">
+  <button class="fwe-btn fwe-btn-link fwe-dark">
+    <i class="fwe-icon fwe-icon-communication-notification fwe-icon-lg"></i>
+  </button>
+</div>
+```
+
+---
+
+## Pagination
+
+```html
+<!-- Navigation Buttons -->
+<div class="fwe-pagination">
+  <button class="fwe-navigate-btn-down" disabled></button>
+  <button class="fwe-navigate-btn-up"></button>
+</div>
+
+<!-- Page Dots -->
+<div class="fwe-pagination">
+  <span class="fwe-page-dot fwe-selected"></span>
+  <span class="fwe-page-dot"></span>
+  <span class="fwe-page-dot"></span>
+</div>
+
+<!-- Page Numbers -->
+<div class="fwe-pagination">
+  <button class="fwe-navigate-btn-down"></button>
+  <span class="fwe-page-current">12</span>
+  <span class="fwe-page-max">50</span>
+  <button class="fwe-navigate-btn-up"></button>
+</div>
+```
+
+On dark background: `fwe-pagination--on-dark-bg`
+
+---
+
+## Popover
+
+```html
+<div class="fwe-popover-container">
+  <div class="fwe-triangle fwe-triangle-top"></div>
+  <div class="fwe-popover">Popover content</div>
+</div>
+```
+
+### Triangle-Positionen
+
+`fwe-triangle-top`, `fwe-triangle-bottom`, `fwe-triangle-left`, `fwe-triangle-right`
+
+### Popover Variants
+
+| Class | Description |
+|---|---|
+| `fwe-popover` | Default (text) |
+| `fwe-popover--menu` | Menu with buttons |
+| `fwe-popover--legend` | Legend with `<dl>` |
+
+### Popover-Menu-Trigger
+
+```html
+<button class="fwe-popover-menu-trigger">
+  <i class="fwe-icon fwe-icon-lg fwe-icon-menu-more"></i>
+</button>
+```
+
+---
+
+## Progress
+
+```html
+<div class="fwe-progress">
+  <div class="fwe-progress-bar" role="progressbar"
+       style="width: 50%"
+       aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
+  </div>
+</div>
+```
+
+Change color: `fwe-bg-red` etc. on `.fwe-progress-bar`.
+
+---
+
+## Scrollbar
+
+Custom scrollbar styling.
+
+```html
+<div class="fwe-scrollbar" style="overflow-y: auto; height: 300px;">
+  Long content...
+</div>
+```
+
+---
+
+## Side Menu
+
+```html
+<!-- Vertical -->
+<nav class="fwe-side-menu">
+  <a class="fwe-side-menu-item fwe-active">Subpage 1</a>
+  <a class="fwe-side-menu-item">Subpage 2</a>
+</nav>
+
+<!-- Horizontal -->
+<nav class="fwe-side-menu fwe-side-menu--horizontal">
+  <a class="fwe-side-menu-item fwe-active">Subpage 1</a>
+  <a class="fwe-side-menu-item">Subpage 2</a>
+</nav>
+```
+
+---
+
+## Sidebar Menu (Overlay)
+
+```html
+<div class="fwe-sidebar-overlay fwe-sidebar-overlay--open">
+  <button class="fwe-sidebar-overlay-close-btn"></button>
+  <div>Type</div>
+  <h1 class="fwe-mt-0">Name</h1>
+  <p>Details</p>
+</div>
+```
+
+With Navbar: add `fwe-navbar-margin` class.
+
+---
+
+## Snackbar
+
+```html
+<!-- Type A (with shadow) -->
+<div class="fwe-snackbar fwe-snackbar-shadow">Info text</div>
+
+<!-- Type B (without shadow) -->
+<div class="fwe-snackbar fwe-snackbar-b">Info text</div>
+
+<!-- Type C (compact) -->
+<div class="fwe-snackbar fwe-snackbar-c fwe-snackbar-shadow">Info text</div>
+```
+
+### Variants
+
+| Class | Meaning |
+|---|---|
+| `fwe-snackbar-info` | Info (blue) |
+| `fwe-snackbar-warning` | Warning (yellow) |
+| `fwe-snackbar-error` | Error (red) |
+
+### With Actions
+
+```html
+<div class="fwe-snackbar fwe-snackbar-shadow fwe-snackbar-warning">
+  <span>Warning!</span>
+  <button class="fwe-snackbar-link-btn">Details</button>
+  <div class="fwe-snackbar-separator"></div>
+  <button class="fwe-snackbar-close-btn"></button>
+</div>
+```
+
+---
+
+## Stepper
+
+### Horizontal
+
+```html
+<div class="fwe-stepper-horizontal">
+  <div class="fwe-step-container fwe-step-done">
+    <div class="fwe-step">
+      <div class="fwe-step-no">1</div>
+      <div class="fwe-step-name">Step 1</div>
+    </div>
+  </div>
+  <div class="fwe-step-container fwe-step-active">
+    <div class="fwe-step">
+      <div class="fwe-step-no">2</div>
+      <div class="fwe-step-name">Step 2</div>
+    </div>
+  </div>
+  <div class="fwe-step-container">
+    <div class="fwe-step">
+      <div class="fwe-step-no">3</div>
+      <div class="fwe-step-name">Step 3</div>
+    </div>
+  </div>
+</div>
+```
+
+### Vertical
+
+```html
+<div class="fwe-stepper-vertical">
+  <div class="fwe-step-container fwe-step-active">
+    <div class="fwe-step">
+      <div class="fwe-step-no">1</div>
+      <div class="fwe-step-name">Step 1</div>
+    </div>
+    <div class="fwe-step-content-container">
+      <div class="fwe-step-content">Content</div>
+    </div>
+  </div>
+</div>
+```
+
+Step states: `fwe-step-done`, `fwe-step-active`, *(empty = pending)*
+
+---
+
+## Toolbar
+
+```html
+<div class="fwe-toolbar">
+  <div class="fwe-toolbar-actions">
+    <button class="fwe-btn fwe-btn-link fwe-active">
+      <i class="fwe-icon fwe-icon-list-filter fwe-icon-lg"></i>
+    </button>
+    <button class="fwe-btn fwe-btn-link fwe-dark">
+      <i class="fwe-icon fwe-icon-menu-more fwe-icon-lg"></i>
+    </button>
+  </div>
+</div>
+```
+
+Right toolbar: `fwe-toolbar fwe-toolbar-right`