@getflip/swirl-ai 0.448.0

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

@@ -0,0 +1,76 @@
+# `<swirl-columns>`
+
+## Purpose
+
+The SwirlColumns component is used to display its children as columns.
+
+## Required props
+
+_None._
+
+## Optional props
+
+- `columns` (string | undefined) – 
+- `spacing` ("0" | "12" | "16" | "2" | "24" | "32" | "4" | "8" | undefined) – 
+
+## Slots
+
+_None._
+
+## Events
+
+_None._
+
+## Methods
+
+_None._
+
+## Related components
+
+No related components.
+
+## Accessibility
+
+SwirlColumns is a presentational layout component with no ARIA attributes or
+keyboard-specific behavior. Ensure slotted content provides appropriate
+semantics.
+
+### Keyboard
+
+No component-specific keyboard behavior.
+
+## Minimal example
+
+```html
+<swirl-columns></swirl-columns>
+```
+
+## Usage example
+
+```html
+<swirl-columns spacing="16">
+    <swirl-box bordered padding="16">
+        <swirl-text color="subdued" size="sm">
+            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
+            dolore magna aliquyam erat, sed diam voluptua.
+        </swirl-text>
+    </swirl-box>
+    <swirl-box bordered padding="16">
+        <swirl-text color="subdued" size="sm">
+            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
+            dolore magna aliquyam erat, sed diam voluptua.
+        </swirl-text>
+    </swirl-box>
+    <swirl-box bordered padding="16">
+        <swirl-text color="subdued" size="sm">
+            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
+            dolore magna aliquyam erat, sed diam voluptua.
+        </swirl-text>
+    </swirl-box>
+</swirl-columns>
+```
+
+## Common mistakes
+
+- Ensure required props are set.
+- Use only allowed slot names and child components where documented.

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

@@ -0,0 +1,76 @@
+# `<swirl-console-layout>`
+
+## Purpose
+
+The SwirlConsoleLayout component provides the basic shell layout for the Flip admin tools.
+
+## Required props
+
+_None._
+
+## Optional props
+
+- `appName` (string | undefined) – 
+- `backButonLabel` (string | undefined) – 
+- `heading` (string | undefined) – 
+- `helpButonLabel` (string | undefined) – 
+- `hideContentHeader` (boolean | undefined) – 
+- `hideNavigationButtonLabel` (string | undefined) – 
+- `logoText` (string | undefined) – 
+- `maxContentWidth` (string | undefined) – 
+- `navigationLabel` (string | undefined) – 
+- `showBackButton` (boolean | undefined) – 
+- `showHelpButton` (boolean | undefined) – 
+- `showNavigationButtonLabel` (string | undefined) – 
+- `subheading` (string | undefined) – 
+
+## Slots
+
+- **`app-bar`** – Custom app bar content (replaces the default app bar when provided)
+- **`content`** – The main content
+- **`content-header-tools`** – Button positioned next to the heading
+- **`footer`** – Footer content positioned at the bottom of the layout
+- **`heading`** – The main content's heading (only rendered if "heading" prop is not set).
+- **`navigation`** – The main navigation
+- **`overlays`** – Overlays like dialogs, modals and toasts
+- **`user`** – The signed in user information at the bottom of the sidebar
+
+## Events
+
+- `backButtonClick` – CustomEvent<MouseEvent>
+- `helpButtonClick` – CustomEvent<MouseEvent>
+
+## Methods
+
+- `hideSidebar()` – Hide the mobile navigation.
+- `showSidebar()` – Show the mobile navigation.
+- `toggleSidebar()` – Toggle the mobile navigation visibility.
+
+## Related components
+
+No related components.
+
+## Accessibility
+
+SwirlConsoleLayout is a layout shell with no ARIA attributes or
+keyboard-specific behavior. Ensure slotted navigation and content provide
+appropriate semantics and focus management.
+
+### Keyboard
+
+No component-specific keyboard behavior.
+
+## Minimal example
+
+```html
+<swirl-console-layout></swirl-console-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-data-cell-stack.md

@@ -0,0 +1,82 @@
+# `<swirl-data-cell-stack>`
+
+## Purpose
+
+The SwirlDataCellStack component is a container for grouping multiple SwirlDataCell components with an optional label, description, and call-to-action slot.
+
+## Required props
+
+_None._
+
+## Optional props
+
+- `description` (string | undefined) – 
+- `hideLabel` (boolean | undefined) – 
+- `label` (string | undefined) – 
+
+## Slots
+
+- **``** – The data cell items
+- **`cta`** – Optional call-to-action (e.g., button)
+
+## Events
+
+_None._
+
+## Methods
+
+_None._
+
+## Related components
+
+- **[swirl-data-cell](?path=/docs/components-swirldatacell--docs)** (child) —
+  Data cells; use as direct children in the default slot of
+  `swirl-data-cell-stack`.
+
+## Accessibility
+
+### ARIA
+
+| ARIA               | Usage                                             |
+| ------------------ | ------------------------------------------------- |
+| `role="group"`     | Set on the stack container.                       |
+| `role="list"`      | Set on the list of data cells.                    |
+| `aria-labelledby`  | References the optional label when present.       |
+| `aria-describedby` | References the optional description when present. |
+
+### Keyboard
+
+No component-specific keyboard behavior; interaction is handled by slotted
+SwirlDataCell content.
+
+## Minimal example
+
+```html
+<swirl-data-cell-stack></swirl-data-cell-stack>
+```
+
+## Usage example
+
+```html
+<swirl-data-cell-stack label="User Information" description="Basic user contact details">
+    <swirl-data-cell label="Name" value="John Doe">
+        <swirl-avatar
+            slot="media"
+            label="John Doe"
+            icon="<swirl-icon-person></swirl-icon-person>"
+            size="s"
+        ></swirl-avatar>
+    </swirl-data-cell>
+    <swirl-data-cell label="Email" value="john.doe@example.com">
+        <swirl-avatar slot="media" label="Email" icon="<swirl-icon-mail></swirl-icon-mail>" size="s"></swirl-avatar>
+    </swirl-data-cell>
+    <swirl-data-cell label="Phone" value="+1 234 567 8900">
+        <swirl-avatar slot="media" label="Phone" icon="<swirl-icon-phone></swirl-icon-phone>" size="s"></swirl-avatar>
+    </swirl-data-cell>
+</swirl-data-cell-stack>
+```
+
+## Common mistakes
+
+- Ensure required props are set.
+- Use only allowed slot names and child components where documented.

package/dist/agent/components/swirl-data-cell.md

@@ -0,0 +1,77 @@
+# `<swirl-data-cell>`
+
+## Purpose
+
+The SwirlDataCell component displays a label-value pair with optional media slot (e.g., swirl-avatar, icons), tooltip support with an info icon, and a suffix slot for additional content. It also supports interactive form controls through the content slot, allowing for editable data cells with inputs and selects.
+
+## Required props
+
+_None._
+
+## Optional props
+
+- `intent` ("critical" | "default" | "info" | "special" | "success" | "translucent" | "warning" | undefined) – 
+- `label` (string | undefined) – 
+- `tooltip` (string | undefined) – 
+- `value` (string | undefined) – 
+- `vertical` (boolean | undefined) – 
+
+## Slots
+
+- **`content`** – Optional content element (e.g., swirl-text-input, swirl-select). When provided, the value prop is ignored. Content automatically takes 100% width when no label is present.
+- **`media`** – Optional media content (e.g., swirl-avatar, icons). Only swirl-avatar and icon elements are styled.
+- **`suffix`** – Optional suffix content (e.g., buttons, badges)
+
+## Events
+
+- `valueChange` – CustomEvent<MouseEvent>
+
+## Methods
+
+_None._
+
+## Related components
+
+- **[swirl-data-cell-stack](?path=/docs/components-swirldatacellstack--docs)**
+  (parent) — Groups data cells; use `swirl-data-cell` in the default slot of
+  `swirl-data-cell-stack`.
+
+## Accessibility
+
+### ARIA
+
+The component structures label-value pairs for assistive technologies.
+
+| ARIA                | Usage                                                             |
+| ------------------- | ----------------------------------------------------------------- |
+| `role="group"`      | Set on the host to group label and value.                         |
+| `role="term"`       | Set on the label element.                                         |
+| `role="definition"` | Set on the value/definition container.                            |
+| `aria-labelledby`   | Set on the definition, referencing the label ID.                  |
+| `aria-hidden`       | Set on the media container when present.                          |
+| `role="button"`     | Optional; set when the cell contains a checkbox or radio control. |
+
+### Keyboard
+
+Keyboard behavior is determined by slotted content (e.g. form controls). No
+component-specific shortcuts.
+
+## Minimal example
+
+```html
+<swirl-data-cell></swirl-data-cell>
+```
+
+## Usage example
+
+```html
+<swirl-data-cell label="Name" value="John Doe" tooltip="This is a tooltip">
+    <swirl-avatar slot="media" label="John Doe" icon="<swirl-icon-person></swirl-icon-person>" size="s"></swirl-avatar>
+    <swirl-tag slot="suffix" label="Active" intent="success"></swirl-tag>
+</swirl-data-cell>
+```
+
+## Common mistakes
+
+- Ensure required props are set.
+- Use only allowed slot names and child components where documented.

package/dist/agent/components/swirl-date-input.md

@@ -0,0 +1,84 @@
+# `<swirl-date-input>`
+
+## Purpose
+
+The SwirlDateInput component is used to render a date input with a date picker. It should always be used in combination with the [SwirlFormControl component](?path=/docs/components-swirlformcontrol--docs).
+
+## Required props
+
+_None._
+
+## Optional props
+
+- `autoFocus` (boolean | undefined) – 
+- `autoSelect` (boolean | undefined) – 
+- `datePickerLabel` (string | undefined) – 
+- `datePickerTriggerLabel` (string | undefined) – 
+- `disabled` (boolean | undefined) – 
+- `firstDayOfWeek` (number | undefined) – 
+- `format` (string | undefined) – 
+- `inline` (boolean | undefined) – 
+- `invalid` (boolean | undefined) – 
+- `locale` (string | undefined) – 
+- `placeholder` (string | undefined) – 
+- `preferredInputMode` ("input" | "pick" | undefined) – 
+- `readonly` (boolean | undefined) – 
+- `required` (boolean | undefined) – 
+- `swirlAriaDescribedby` (string | undefined) – 
+- `value` (string | undefined) – 
+- `datePickerDisableDate` ((date: Date) => boolean | undefined) – 
+- `labels` ({ clearButton: string; monthSelect: string; nextMonthButton: string; nextYearButton: string; picker: string; previousMonthButton: string; previousYearButton: string; todayButton: string; yearSelect: string; } | undefined) – 
+
+## Slots
+
+_None._
+
+## Events
+
+- `invalidInput` – CustomEvent<string>
+- `valueChange` – CustomEvent<string>
+
+## Methods
+
+- `openPicker()` – Opens the date picker popover.
+
+## Related components
+
+- **[swirl-form-control](?path=/docs/components-swirlformcontrol--docs)**
+  (parent) — Wraps the input with label and description; use `swirl-date-input`
+  in the default slot of `swirl-form-control`.
+
+## Accessibility
+
+### ARIA
+
+The input and date picker trigger expose ARIA for form and button semantics.
+
+| ARIA               | Usage                                                               |
+| ------------------ | ------------------------------------------------------------------- |
+| `aria-describedby` | Optional; set via `swirlAriaDescribedby`.                           |
+| `aria-disabled`    | Set when the control is disabled.                                   |
+| `aria-invalid`     | Set when the value is invalid.                                      |
+| `aria-label`       | Set on the date picker trigger button via `datePickerTriggerLabel`. |
+
+### Keyboard
+
+Standard text input and button behavior. The date picker trigger is activated
+with <kbd>Enter</kbd> or <kbd>Space</kbd>. No component-specific shortcuts.
+
+## Minimal example
+
+```html
+<swirl-date-input></swirl-date-input>
+```
+
+## Usage example
+
+```html
+<swirl-date-input></swirl-date-input>
+```
+
+## Common mistakes
+
+- Ensure required props are set.
+- Use only allowed slot names and child components where documented.

package/dist/agent/components/swirl-date-picker.md

@@ -0,0 +1,65 @@
+# `<swirl-date-picker>`
+
+## Purpose
+
+The SwirlDatePicker component allows users to select a date from a calendar.
+
+## Required props
+
+_None._
+
+## Optional props
+
+- `firstDayOfWeek` (number | undefined) – 
+- `fixedMaxWidth` (boolean | undefined) – 
+- `locale` (string | undefined) – 
+- `range` (boolean | undefined) – 
+- `disableDate` ((date: Date) => boolean | undefined) – 
+- `labels` ({ clearButton: string; monthSelect: string; nextMonthButton: string; nextYearButton: string; picker: string; previousMonthButton: string; previousYearButton: string; todayButton: string; yearSelect: string; } | undefined) – 
+- `startDate` (Date | undefined) – 
+- `value` (Date | Date[] | undefined) – 
+
+## Slots
+
+_None._
+
+## Events
+
+- `valueChange` – CustomEvent<Date | Date[]>
+
+## Methods
+
+_None._
+
+## Related components
+
+No related components.
+
+## Accessibility
+
+SwirlDatePicker is typically used inside SwirlDateInput or a popover; its
+calendar grid and navigation are exposed for assistive technologies by the host.
+No component-specific ARIA table or keyboard section here; refer to the
+embedding component (e.g. SwirlDateInput) for full behavior.
+
+### Keyboard
+
+Calendar navigation and date selection are handled by the embedding component or
+host.
+
+## Minimal example
+
+```html
+<swirl-date-picker></swirl-date-picker>
+```
+
+## Usage example
+
+```html
+<swirl-date-picker></swirl-date-picker>
+```
+
+## Common mistakes
+
+- Ensure required props are set.
+- Use only allowed slot names and child components where documented.

package/dist/agent/components/swirl-description-list-item.md

@@ -0,0 +1,62 @@
+# `<swirl-description-list-item>`
+
+## Purpose
+
+The SwirlDescriptionListItem component is used to define terms by providing a short description. It should only be used inside the [SwirlDescriptionList component](?path=/docs/components-swirldescriptionlist--docs).
+
+## Required props
+
+- `term` (string) – 
+
+## Optional props
+
+- `bordered` (boolean | undefined) – 
+- `maxWidth` (string | undefined) – 
+- `tooltip` (string | undefined) – 
+
+## Slots
+
+- **`additional-content`** – Optional additional content displayed at the bottom of the item
+- **`slot`** – The description
+- **`tools`** – Optional tools to be displayed on the right side of the item
+
+## Events
+
+_None._
+
+## Methods
+
+_None._
+
+## Related components
+
+- **[swirl-description-list](?path=/docs/components-swirldescriptionlist--docs)**
+  (parent) — Container for description list items; use as a direct child of
+  `swirl-description-list`.
+
+## Accessibility
+
+SwirlDescriptionListItem renders term and description semantics for use inside
+SwirlDescriptionList. No component-specific ARIA or keyboard behavior beyond
+native list semantics.
+
+### Keyboard
+
+No component-specific keyboard behavior.
+
+## Minimal example
+
+```html
+<swirl-description-list-item term="..."></swirl-description-list-item>
+```
+
+## Usage example
+
+```html
+<swirl-description-list-item term="Term or label"> A short description </swirl-description-list-item>
+```
+
+## Common mistakes
+
+- Ensure required props are set.
+- Use only allowed slot names and child components where documented.

package/dist/agent/components/swirl-description-list.md

@@ -0,0 +1,68 @@
+# `<swirl-description-list>`
+
+## Purpose
+
+The SwirlDescriptionList component is used to provide a list of terms with short descriptions. It is used in conjunction with the [SwirlDescriptionListItem component](?path=/docs/components-swirldescriptionlistitem--docs).
+
+## Required props
+
+_None._
+
+## Optional props
+
+_None._
+
+## Slots
+
+- **`slot`** – The description list items
+
+## Events
+
+_None._
+
+## Methods
+
+_None._
+
+## Related components
+
+- **[swirl-description-list-item](?path=/docs/components-swirldescriptionlistitem--docs)**
+  (child) — Term/value pairs; use as direct children of
+  `swirl-description-list`.
+
+## Accessibility
+
+The component uses a HTML description list to communicate the relationship
+between the terms and descriptions to assistive technology.
+
+### Keyboard
+
+No component-specific keyboard behavior.
+
+## Minimal example
+
+```html
+<swirl-description-list></swirl-description-list>
+```
+
+## Usage example
+
+```html
+<swirl-description-list>
+    <swirl-description-list-item term="Term #1"> A short description </swirl-description-list-item>
+    <swirl-description-list-item term="A longer term that might wrap">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Metus eu consectetur vestibulum tempus, nulla lobortis
+        ipsum. Odio a ipsum purus pellentesque maecenas.
+        <swirl-button label="A button" slot="tools" variant="outline"></swirl-button>
+        <swirl-inline-notification heading="Notification title" slot="additional-content">
+            Lorem ipsum dolor sit amet. <swirl-link href="#" label="With a link."></swirl-link>
+        </swirl-inline-notification>
+    </swirl-description-list-item>
+    <swirl-description-list-item term="Term #3"> A short description </swirl-description-list-item>
+</swirl-description-list>
+```
+
+## Common mistakes
+
+- Ensure required props are set.
+- Use only allowed slot names and child components where documented.

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

@@ -0,0 +1,87 @@
+# `<swirl-dialog>`
+
+## Purpose
+
+The SwirlDialog component is used to overlay the user interface with content that needs the user's confirmation or action.
+
+## Required props
+
+- `label` (string) – 
+
+## Optional props
+
+- `hideLabel` (boolean | undefined) – 
+- `intent` ("critical" | "primary" | undefined) – 
+- `primaryActionLabel` (string | undefined) – 
+- `returnFocusTo` (HTMLElement | string | undefined) – 
+- `secondaryActionLabel` (string | undefined) – 
+
+## Slots
+
+- **`left-controls`** – Controls displayed on the left side of the default ones
+- **`slot`** – The dialog content
+
+## Events
+
+- `dialogClose` – CustomEvent<void>
+- `dialogOpen` – CustomEvent<void>
+- `primaryAction` – CustomEvent<MouseEvent>
+- `secondaryAction` – CustomEvent<MouseEvent>
+- `toggleDialog` – CustomEvent<{ newState: "open" | "closed"; dialog: HTMLDialogElement; }>
+
+## Methods
+
+- `close()` – Close the dialog.
+- `open()` – Open the dialog.
+
+## Related components
+
+No related components.
+
+## Accessibility
+
+### ARIA
+
+The component follows the
+[WAI-ARIA Alert and Message Dialogs Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/).
+
+| ARIA                 | Usage                                               |
+| -------------------- | --------------------------------------------------- |
+| `role="alertdialog"` | The dialog has the `alertdialog` role.              |
+| `aria-hidden`        | Set to "true" if dialog is hidden.                  |
+| `aria-modal`         | Set to "true".                                      |
+| `aria-label`         | Set on the dialog if label is hidden.               |
+| `aria-labelledby`    | Set on the dialog to refer to the dialog's label.   |
+| `aria-describedby`   | Set on the dialog to refer to the dialog's content. |
+
+### Keyboard
+
+| Key                                               | Action                                                                                                  |
+| ------------------------------------------------- | ------------------------------------------------------------------------------------------------------- |
+| <kbd>ESC</kbd>                                    | Closes the dialog.                                                                                      |
+| <kbd>TAB</kbd>, <kbd>SHIFT</kbd> + <kbd>TAB</kbd> | Cycles through the focusable elements inside the dialog. Focus is trapped inside the dialog while open. |
+
+### Focus handling
+
+- Focus is moved to the secondary button when the dialog is opened. If no
+  secondary button is provided, the primary button is focused.
+- After closing, the focus is returned to last the focused element.
+
+## Minimal example
+
+```html
+<swirl-dialog label="..."></swirl-dialog>
+```
+
+## Usage example
+
+```html
+<swirl-dialog intent="primary" label="Dialog" primary-action-label="Leave" secondary-action-label="Cancel">
+    <p>Do you really want to leave this group chat?</p>
+</swirl-dialog>
+```
+
+## Common mistakes
+
+- Ensure required props are set.
+- Use only allowed slot names and child components where documented.