@getflip/swirl-ai 0.448.0

package/dist/agent/components/swirl-app-layout.md

@@ -0,0 +1,93 @@
+# `<swirl-app-layout>`
+
+## Purpose
+
+The SwirlAppLayout component provides a basic layout used by app integrations to arrange content on the screen.
+
+## Required props
+
+- `appName` (string) – 
+- `hasNavigation` (boolean) – 
+
+## Optional props
+
+- `backToNavigationViewButtonLabel` (string | undefined) – 
+- `collapsibleNavigation` (boolean | undefined) – 
+- `ctaIcon` (string | undefined) – 
+- `ctaLabel` (string | undefined) – 
+- `hideAppBar` (boolean | undefined) – 
+- `initialMobileView` ("body" | "navigation" | "sidebar" | undefined) – 
+- `navigationBackButtonLabel` (string | undefined) – 
+- `navigationExpansionStateStorageKey` (string | undefined) – 
+- `navigationLabel` (string | undefined) – 
+- `navigationOverlayLabel` (string | undefined) – 
+- `navigationToggleLabel` (string | undefined) – 
+- `roundedCorners` (boolean | undefined) – 
+- `showNavigationBackButton` (boolean | undefined) – 
+- `sidebarCloseButtonLabel` (string | undefined) – 
+- `sidebarHeading` (string | undefined) – 
+- `sidebarPositioning` ("auto" | "overlay" | undefined) – 
+- `transitionStyle` (string | undefined) – 
+
+## Slots
+
+- **`app-bar`** – The app bar contents
+- **`app-bar-mobile-menu-button`** – Used to add a mobile shell layout menu button to the app bar
+- **`banner`** – Used to show a banner below the app bar
+- **`bottom-bar`** – The bottom bar contents
+- **`content`** – Main content area
+- **`custom-app-bar-back-button`** – Replaces the mobile default back button of the content app bar
+- **`custom-sidebar-header`** – Replaces the default sidebar header
+- **`floating-action-button`** – Floating button displayed in the bottom right corner
+- **`navigation`** – The navigation area content
+- **`navigation-controls`** – Controls for the navigation header
+- **`navigation-mobile-menu-button`** – Used to add a mobile shell layout menu button to navigation
+- **`sidebar`** – Content of the right sidebar
+
+## Events
+
+- `ctaClick` – CustomEvent<MouseEvent>
+- `mobileViewChange` – CustomEvent<"body" | "navigation" | "sidebar">
+- `navigationBackButtonClick` – CustomEvent<MouseEvent>
+- `navigationExpansionStateChange` – CustomEvent<"collapsed" | "expanded" | "overlayed">
+- `sidebarToggle` – CustomEvent<boolean>
+
+## Methods
+
+- `changeMobileView()` – Change the currently displayed view on mobile viewports
+- `getCollapsibleNavigationState()` – Get state of the collapsible navigation
+- `hideSidebar()` – Hide the sidebar
+- `setCollapsibleNavigationState()` – Set state of the collapsible navigation
+- `showSidebar()` – Show the sidebar
+- `toggleSidebar()` – Toggle the sidebar
+
+## Related components
+
+No related components.
+
+## Accessibility
+
+### ARIA
+
+| ARIA              | Usage |
+| ----------------- | ----- |
+| `role="document"` |       |
+
+### Keyboard
+
+No component-specific keyboard behavior.
+
+## Minimal example
+
+```html
+<swirl-app-layout appName="..."></swirl-app-layout>
+```
+
+## Usage example
+
+_No usage example in docs._
+
+## Common mistakes
+
+- Ensure required props are set.
+- Use only allowed slot names and child components where documented.

package/dist/agent/components/swirl-autocomplete.md

@@ -0,0 +1,90 @@
+# `<swirl-autocomplete>`
+
+## Purpose
+
+The SwirlAutocomplete component is used to provide a text input field showing selectable suggestions while the user interacts with the input. It should always be used in combination with the [SwirlFormControl component](?path=/docs/components-swirlformcontrol--docs).
+
+## Required props
+
+_None._
+
+## Optional props
+
+- `autoSelect` (boolean | undefined) – 
+- `clearButtonLabel` (string | undefined) – 
+- `clearable` (boolean | undefined) – 
+- `disabled` (boolean | undefined) – 
+- `inline` (boolean | undefined) – 
+- `invalid` (boolean | undefined) – 
+- `maxLength` (number | undefined) – 
+- `menuLabel` (string | undefined) – 
+- `mode` ("decimal" | "email" | "numeric" | "search" | "tel" | "text" | "url" | undefined) – 
+- `multiSelect` (boolean | undefined) – 
+- `placeholder` (string | undefined) – 
+- `required` (boolean | undefined) – 
+- `spellCheck` (boolean | undefined) – 
+- `swirlAriaDescribedby` (string | undefined) – 
+- `generateSuggestions` ((term: string) => Promise<SwirlAutocompleteSuggestion[]> | undefined) – 
+- `value` (SwirlAutocompleteSuggestion[] | { disabled?: boolean; id: string; label: string; } | undefined) – 
+
+## Slots
+
+_None._
+
+## Events
+
+- `valueChange` – CustomEvent<SwirlAutocompleteSuggestion[] | { disabled?: boolean; id: string; label: string; }>
+
+## Methods
+
+_None._
+
+## Related components
+
+No related components.
+
+## Accessibility
+
+### ARIA
+
+The component follows the
+[WAI-ARIA Combobox Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/).
+
+| ARIA                       | Usage                                                  |
+| -------------------------- | ------------------------------------------------------ |
+| `role="combobox"`          | Set on the text input.                                 |
+| `aria-autocomplete="list"` | Set on the text input.                                 |
+| `aria-controls`            | Set on the text input. References the suggestion menu. |
+| `aria-expanded`            | Set on the text input.                                 |
+
+The suggestion menu uses the
+[SwirlOptionList component](?path=/docs/components-swirloptionlist--docs).
+
+### Keyboard
+
+| Key                                | Action                                                         |
+| ---------------------------------- | -------------------------------------------------------------- |
+| <kbd>DOWN</kbd>                    | Moves focus to the suggestion menu.                            |
+| <kbd>ESC</kbd>                     | Closes the suggestion menu.                                    |
+| <kbd>SPACE</kbd>, <kbd>ENTER</kbd> | Sets the value to the selected suggestion and closes the menu. |
+
+See the
+[SwirlOptionList component](?path=/docs/components-swirloptionlist--docs) for
+further keyboard controls.
+
+## Minimal example
+
+```html
+<swirl-autocomplete></swirl-autocomplete>
+```
+
+## Usage example
+
+```html
+<swirl-autocomplete></swirl-autocomplete>
+```
+
+## Common mistakes
+
+- Ensure required props are set.
+- Use only allowed slot names and child components where documented.

package/dist/agent/components/swirl-avatar-group.md

@@ -0,0 +1,73 @@
+# `<swirl-avatar-group>`
+
+## Purpose
+
+The SwirlAvatarGroup component is used to display a stack of two avatars.
+
+## Required props
+
+_None._
+
+## Optional props
+
+- `badge` (string | undefined) – 
+- `label` (string | undefined) – 
+- `layout` ("diagonal" | "horizontal" | undefined) – 
+- `semantics` ("group" | "list" | undefined) – 
+
+## Slots
+
+- **`slot`** – Your avatar components
+
+## Events
+
+_None._
+
+## Methods
+
+_None._
+
+## Related components
+
+No related components.
+
+## Accessibility
+
+### ARIA
+
+| ARIA           | Usage                                                                          |
+| -------------- | ------------------------------------------------------------------------------ |
+| `role="group"` | Default role for the avatar-group                                              |
+| `role="list"`  | Configurable role for the avatar-group. Children should have `role="listitem"` |
+
+### Keyboard
+
+No component-specific keyboard behavior.
+
+## Minimal example
+
+```html
+<swirl-avatar-group></swirl-avatar-group>
+```
+
+## Usage example
+
+```html
+<swirl-avatar-group badge='<swirl-badge aria-label="3 new messages" label="3"></swirl-badge>'>
+    <swirl-avatar
+        label="Jane Doe"
+        src="https://api.dicebear.com/7.x/bottts-neutral/svg?size=144&seed=a"
+        size="s"
+    ></swirl-avatar>
+    <swirl-avatar
+        label="John Doe"
+        src="https://api.dicebear.com/7.x/bottts-neutral/svg?size=144&seed=b"
+        size="s"
+    ></swirl-avatar>
+</swirl-avatar-group>
+```
+
+## Common mistakes
+
+- Ensure required props are set.
+- Use only allowed slot names and child components where documented.

package/dist/agent/components/swirl-avatar.md

@@ -0,0 +1,79 @@
+# `<swirl-avatar>`
+
+## Purpose
+
+The SwirlAvatar component is used to represent a user via an image, icon or initials.
+
+## Required props
+
+- `label` (string) – 
+
+## Optional props
+
+- `badge` (string | undefined) – 
+- `badgePosition` ("bottom" | "top" | undefined) – 
+- `color` ("banana" | "blueberry" | "chilli" | "grape" | "kiwi" | "neutral" | "pumpkin" | "radish" | undefined) – 
+- `icon` (string | undefined) – 
+- `initials` (string | undefined) – 
+- `interactive` (boolean | undefined) – 
+- `loading` ("auto" | "eager" | "intersecting" | "lazy" | undefined) – 
+- `showLabel` (boolean | undefined) – 
+- `size` ("2xl" | "2xs" | "3xs" | "l" | "m" | "s" | "xl" | "xs" | undefined) – 
+- `src` (string | undefined) – 
+- `toolPosition` ("bottom" | "top" | undefined) – 
+- `variant` ("round" | "square" | undefined) – 
+
+## Slots
+
+- **`tool`** – Used to show a badge or (icon) button on the avatar.
+
+## Events
+
+- `imageError` – CustomEvent<void>
+- `imageLoad` – CustomEvent<void>
+
+## Methods
+
+_None._
+
+## Related components
+
+No related components.
+
+## Accessibility
+
+### ARIA
+
+| ARIA            | Usage                                                   |
+| --------------- | ------------------------------------------------------- |
+| `role="img"`    | Role set for the avatar.                                |
+| `role="button"` | Role set for the interactive avatar.                    |
+| `aria-label`    | The `aria-label` is set to provide an accessible label. |
+
+### Keyboard
+
+Only applicable for interactive avatars:
+
+| Key              | Action                            |
+| ---------------- | --------------------------------- |
+| <kbd>ENTER</kbd> | Activates the interactive avatar. |
+| <kbd>SPACE</kbd> | Activates the interactive avatar. |
+
+## Minimal example
+
+```html
+<swirl-avatar label="..."></swirl-avatar>
+```
+
+## Usage example
+
+```html
+<swirl-avatar label="John Doe" initials="PS" src="https://picsum.photos/id/433/144/144">
+    <swirl-badge label="3" size="s" slot="tool"></swirl-badge>
+</swirl-avatar>
+```
+
+## Common mistakes
+
+- Ensure required props are set.
+- Use only allowed slot names and child components where documented.

package/dist/agent/components/swirl-badge.md

@@ -0,0 +1,62 @@
+# `<swirl-badge>`
+
+## Purpose
+
+The SwirlBadge component is used to inform about the status of an object or action.
+
+## Required props
+
+- `label` (string) – 
+
+## Optional props
+
+- `icon` (string | undefined) – 
+- `intent` ("banana" | "blueberry" | "chilli" | "critical" | "grape" | "info" | "kiwi" | "neutral" | "pumpkin" | "radish" | "strong" | undefined) – 
+- `size` ("m" | "s" | "xs" | undefined) – 
+- `variant` ("default" | "dot" | undefined) – 
+
+## Slots
+
+_None._
+
+## Events
+
+_None._
+
+## Methods
+
+_None._
+
+## Related components
+
+No related components.
+
+## Accessibility
+
+### ARIA
+
+| ARIA            | Usage                                                                                                                                       |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
+| `role="status"` | All badges have the aria role "status" added.                                                                                               |
+| `aria-label`    | If no accessible label is provided via the label prop (e.g. a plain number), the `aria-label` or `aria-labelledby` attribute has to be set. |
+
+### Keyboard
+
+No component-specific keyboard behavior.
+
+## Minimal example
+
+```html
+<swirl-badge label="..."></swirl-badge>
+```
+
+## Usage example
+
+```html
+<swirl-badge label="3 new messages"></swirl-badge>
+```
+
+## Common mistakes
+
+- Ensure required props are set.
+- Use only allowed slot names and child components where documented.

package/dist/agent/components/swirl-banner.md

@@ -0,0 +1,77 @@
+# `<swirl-banner>`
+
+## Purpose
+
+The SwirlBanner component is used to display a prominent message at the top of the screen.
+
+## Required props
+
+- `content` (string) – 
+
+## Optional props
+
+- `actionLabel` (string | undefined) – 
+- `dismissLabel` (string | undefined) – 
+- `dismissable` (boolean | undefined) – 
+- `icon` (string | undefined) – 
+- `importance` ("alert" | "status" | undefined) – 
+- `intent` ("critical" | "default" | "info" | "success" | "warning" | undefined) – 
+- `showIcon` (boolean | undefined) – 
+- `size` ("m" | "s" | undefined) – 
+
+## Slots
+
+_None._
+
+## Events
+
+- `action` – CustomEvent<MouseEvent>
+- `dismiss` – CustomEvent<MouseEvent>
+
+## Methods
+
+_None._
+
+## Related components
+
+No related components.
+
+## Accessibility
+
+### ARIA
+
+The component follows the
+[WAI-ARIA Alert Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/alert/).
+
+| ARIA               | Usage                                                                                         |
+| ------------------ | --------------------------------------------------------------------------------------------- |
+| `role="alert"`     | The banner gets the `alert` role if it contains critical info or warnings.                    |
+| `role="status"`    | The banner gets the `status` role for non-critical info.                                      |
+| `aria-describedby` | The `aria-describedby` property is automatically set to reference the banner's title or body. |
+
+### Keyboard
+
+No component-specific keyboard behavior; dismiss and action buttons use standard
+button semantics.
+
+## Minimal example
+
+```html
+<swirl-banner content="..."></swirl-banner>
+```
+
+## Usage example
+
+```html
+<swirl-banner
+    action-label="Action"
+    content="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua."
+    dismissable
+    intent="critical"
+></swirl-banner>
+```
+
+## Common mistakes
+
+- Ensure required props are set.
+- Use only allowed slot names and child components where documented.

package/dist/agent/components/swirl-box.md

@@ -0,0 +1,92 @@
+# `<swirl-box>`
+
+## Purpose
+
+The SwirlBox is a generic layout component for padding, positioning and scaling its contents.
+
+## Required props
+
+_None._
+
+## Optional props
+
+- `basis` (string | undefined) – 
+- `borderColor` ("default" | "strong" | undefined) – 
+- `bordered` (boolean | undefined) – 
+- `borderedBlockEnd` (boolean | undefined) – 
+- `borderedBlockEndWhenScrolled` (boolean | undefined) – 
+- `borderedBlockStart` (boolean | undefined) – 
+- `borderedBlockStartWhenScrolled` (boolean | undefined) – 
+- `borderedInlineEnd` (boolean | undefined) – 
+- `borderedInlineStart` (boolean | undefined) – 
+- `bottom` (string | undefined) – 
+- `centerBlock` (boolean | undefined) – 
+- `centerInline` (boolean | undefined) – 
+- `cover` (boolean | undefined) – 
+- `grow` (string | undefined) – 
+- `height` (string | undefined) – 
+- `hideScrollbar` (boolean | undefined) – 
+- `left` (string | undefined) – 
+- `maxHeight` (string | undefined) – 
+- `maxWidth` (string | undefined) – 
+- `minHeight` (string | undefined) – 
+- `minWidth` (string | undefined) – 
+- `overflow` ("auto" | "clip" | "hidden" | "scroll" | "visible" | undefined) – 
+- `overflowX` ("auto" | "clip" | "hidden" | "scroll" | "visible" | undefined) – 
+- `overflowY` ("auto" | "clip" | "hidden" | "scroll" | "visible" | undefined) – 
+- `padding` ("0" | "12" | "16" | "2" | "20" | "24" | "32" | "4" | "8" | undefined) – 
+- `paddingBlockEnd` ("0" | "12" | "16" | "2" | "20" | "24" | "32" | "4" | "8" | undefined) – 
+- `paddingBlockStart` ("0" | "12" | "16" | "2" | "20" | "24" | "32" | "4" | "8" | undefined) – 
+- `paddingInlineEnd` ("0" | "12" | "16" | "2" | "20" | "24" | "32" | "4" | "8" | undefined) – 
+- `paddingInlineStart` ("0" | "12" | "16" | "2" | "20" | "24" | "32" | "4" | "8" | undefined) – 
+- `position` ("absolute" | "fixed" | "relative" | "static" | "sticky" | undefined) – 
+- `right` (string | undefined) – 
+- `shrink` (string | undefined) – 
+- `top` (string | undefined) – 
+- `width` (string | undefined) – 
+- `zIndex` (string | undefined) – 
+
+## Slots
+
+- **`slot`** – The box contents
+
+## Events
+
+- `componentLoad` – CustomEvent<void>
+
+## Methods
+
+_None._
+
+## Related components
+
+No related components.
+
+## Accessibility
+
+SwirlBox is a presentational layout wrapper with no ARIA attributes or
+keyboard-specific behavior. Ensure slotted content provides appropriate
+semantics.
+
+### Keyboard
+
+No component-specific keyboard behavior.
+
+## Minimal example
+
+```html
+<swirl-box></swirl-box>
+```
+
+## Usage example
+
+```html
+<swirl-box>
+    <swirl-chip label="Label"></swirl-chip>
+</swirl-box>
+```
+
+## Common mistakes
+
+- Ensure required props are set.
+- Use only allowed slot names and child components where documented.

package/dist/agent/components/swirl-button-group.md

@@ -0,0 +1,72 @@
+# `<swirl-button-group>`
+
+## Purpose
+
+The SwirlButtonGroup component is used to group buttons in a horizontal or vertical stack.
+
+## Required props
+
+_None._
+
+## Optional props
+
+- `orientation` ("horizontal" | "horizontal-reverse" | "vertical" | "vertical-reverse" | undefined) – 
+- `segmented` (boolean | undefined) – 
+- `spacing` ("0" | "12" | "16" | "2" | "24" | "32" | "4" | "40" | "48" | "64" | "8" | undefined) – 
+- `stretch` (boolean | undefined) – 
+- `wrap` (boolean | undefined) – 
+
+## Slots
+
+_None._
+
+## Events
+
+_None._
+
+## Methods
+
+_None._
+
+## Related components
+
+No related components.
+
+## Accessibility
+
+### ARIA
+
+| ARIA           | Usage |
+| -------------- | ----- |
+| `role="group"` |       |
+
+### Keyboard
+
+No component-specific keyboard behavior; slotted buttons handle focus and
+activation.
+
+## Minimal example
+
+```html
+<swirl-button-group></swirl-button-group>
+```
+
+## Usage example
+
+```html
+<swirl-button-group>
+    <swirl-button label="Button" variant="flat"></swirl-button>
+    <swirl-button label="Button" variant="flat"></swirl-button>
+    <swirl-button
+        icon="<swirl-icon-expand-more></swirl-icon-expand-more>"
+        label="Button"
+        hide-label
+        variant="flat"
+    ></swirl-button>
+</swirl-button-group>
+```
+
+## Common mistakes
+
+- Ensure required props are set.
+- Use only allowed slot names and child components where documented.