@getflip/swirl-ai 0.448.0

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

@@ -0,0 +1,112 @@
+# `<swirl-resource-list-item>`
+
+## Purpose
+
+The SwirlResourceListItem component can be used to represent an object, like media, a group or a chat within a collection. It should only be used inside the [SwirlResourceList component](?path=/docs/components-swirlresourcelist--docs).
+
+## Required props
+
+- `label` (string) – 
+
+## Optional props
+
+- `active` (boolean | undefined) – 
+- `alignItems` (string | undefined) – 
+- `allowDrag` (boolean | undefined) – 
+- `allowHtml` (boolean | undefined) – 
+- `checked` (boolean | undefined) – 
+- `compact` (boolean | undefined) – 
+- `description` (string | undefined) – 
+- `descriptionWrap` (boolean | undefined) – 
+- `disabled` (boolean | undefined) – 
+- `dragHandleDescription` (string | undefined) – 
+- `dragHandleLabel` (string | undefined) – 
+- `dragging` (boolean | undefined) – 
+- `hideDivider` (boolean | undefined) – 
+- `href` (string | undefined) – 
+- `interactive` (boolean | undefined) – 
+- `labelMinHeight` (string | undefined) – 
+- `labelTooltip` (string | undefined) – 
+- `labelTooltipPosition` ("bottom" | "left" | "right" | "top" | undefined) – 
+- `labelWeight` ("bold" | "medium" | "regular" | "semibold" | undefined) – 
+- `labelWrap` (boolean | undefined) – 
+- `menuTriggerId` (string | undefined) – 
+- `menuTriggerLabel` (string | undefined) – 
+- `meta` (string | undefined) – 
+- `selectable` (boolean | undefined) – 
+- `swirlAriaCurrent` ("date" | "location" | "page" | "step" | "time" | "true" | undefined) – 
+- `swirlAriaLabel` (string | undefined) – 
+- `value` (string | undefined) – 
+
+## Slots
+
+- **`badges`** – Badges displayed inside the item
+- **`control`** – Used to add a menu button to the item
+- **`media`** – Media displayed inside the item (e.g. swirl-avatar)
+
+## Events
+
+- `toggleDrag` – CustomEvent<HTMLSwirlResourceListItemElement>
+- `valueChange` – CustomEvent<boolean>
+
+## Methods
+
+_None._
+
+## Related components
+
+- **[swirl-resource-list](?path=/docs/components-swirlresourcelist--docs)**
+  (parent) — Container for resource list items and sections; use as a direct
+  child of `swirl-resource-list` or inside `swirl-resource-list-section`.
+
+## Accessibility
+
+### ARIA
+
+Depending on the purpose, the item can be used as a button, link or checkbox
+control.
+
+| ARIA              | Usage                                                                                           |
+| ----------------- | ----------------------------------------------------------------------------------------------- |
+| `role="row"`      | Set on the element; for usage inside the SwirlResourceList component.                           |
+| `role="gridcell"` | Set on the inner container element; for usage inside the SwirlResourceList component.           |
+| `role="button"`   | Implicit when used as a button.                                                                 |
+| `role="link"`     | Implicit when used as a link.                                                                   |
+| `role="checkbox"` | Set on the interactive part if used as a checkbox.                                              |
+| `aria-disabled`   | If not used as a link, the `aria-disabled` attribute is set to `true` for the disabled element. |
+
+### Keyboard
+
+| Key              | Action                                                                                  |
+| ---------------- | --------------------------------------------------------------------------------------- |
+| <kbd>ENTER</kbd> | Activates the item if used as a button or link.                                         |
+| <kbd>SPACE</kbd> | Activates the item if used as a button or link. Toggles the item if used as a checkbox. |
+
+## Minimal example
+
+```html
+<swirl-resource-list-item label="..."></swirl-resource-list-item>
+```
+
+## Usage example
+
+```html
+<swirl-resource-list-item description="With a description" label="This is a resource item" meta="Today">
+    <swirl-avatar
+        slot="media"
+        label="Jane Doe"
+        size="l"
+        src="https://api.dicebear.com/7.x/bottts-neutral/svg?size=144&seed=a"
+    ></swirl-avatar>
+
+    <swirl-stack slot="badges" align="center" orientation="horizontal" spacing="8">
+        <swirl-icon-notifications-off size="16"></swirl-icon-notifications-off>
+        <swirl-badge label="1" size="xs"></swirl-badge>
+    </swirl-stack>
+</swirl-resource-list-item>
+```
+
+## Common mistakes
+
+- Ensure required props are set.
+- Use only allowed slot names and child components where documented.

package/dist/agent/components/swirl-resource-list-section.md

@@ -0,0 +1,64 @@
+# `<swirl-resource-list-section>`
+
+## Purpose
+
+The SwirlResourceListSection component is used to group related [SwirlResourceListItems](?path=/docs/components-swirlresourcelistitem--docs).
+
+## Required props
+
+- `label` (string) – 
+
+## Optional props
+
+- `hasSeparator` (boolean | undefined) – 
+- `separatorSpacing` ("0" | "12" | "16" | "2" | "24" | "32" | "4" | "8" | undefined) – 
+- `spacing` ("0" | "12" | "16" | "2" | "24" | "32" | "4" | "40" | "48" | "64" | "8" | undefined) – 
+
+## Slots
+
+- **`slot`** – The resource list item components
+
+## Events
+
+_None._
+
+## Methods
+
+_None._
+
+## Related components
+
+- **[swirl-resource-list](?path=/docs/components-swirlresourcelist--docs)**
+  (parent) — Container for resource list items and sections; use as a direct
+  child of `swirl-resource-list`.
+- **[swirl-resource-list-item](?path=/docs/components-swirlresourcelistitem--docs)**
+  (child) — Individual list items; use as direct children of this section.
+
+## Accessibility
+
+### ARIA
+
+| ARIA              | Usage                                                   |
+| ----------------- | ------------------------------------------------------- |
+| `role="rowgroup"` | The resource list section has `role` set to `rowgroup`. |
+
+### Keyboard
+
+No component-specific keyboard behavior.
+
+## Minimal example
+
+```html
+<swirl-resource-list-section label="..."></swirl-resource-list-section>
+```
+
+## Usage example
+
+```html
+<swirl-resource-list-section label="Section label"></swirl-resource-list-section>
+```
+
+## Common mistakes
+
+- Ensure required props are set.
+- Use only allowed slot names and child components where documented.

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

@@ -0,0 +1,116 @@
+# `<swirl-resource-list>`
+
+## Purpose
+
+The SwirlResourceList component is used to display a collection of resources, like media, groups or chats.
+
+## Required props
+
+_None._
+
+## Optional props
+
+- `allowDrag` (boolean | undefined) – 
+- `assistiveTextItemGrabbed` (string | undefined) – 
+- `assistiveTextItemMoved` (string | undefined) – 
+- `assistiveTextItemMoving` (string | undefined) – 
+- `label` (string | undefined) – 
+- `padding` ("0" | "12" | "16" | "2" | "4" | "8" | undefined) – 
+- `paddingBlockEnd` ("0" | "12" | "16" | "2" | "4" | "8" | undefined) – 
+- `paddingBlockStart` ("0" | "12" | "16" | "2" | "4" | "8" | undefined) – 
+- `paddingInlineEnd` ("0" | "12" | "16" | "2" | "4" | "8" | undefined) – 
+- `paddingInlineStart` ("0" | "12" | "16" | "2" | "4" | "8" | undefined) – 
+- `semantics` ("grid" | "list" | undefined) – 
+- `spacing` ("0" | "12" | "16" | "2" | "24" | "32" | "4" | "40" | "48" | "64" | "8" | undefined) – 
+- `controllingElement` (HTMLElement | undefined) – 
+
+## Slots
+
+- **`slot`** – The resource list items and sections (e.g. swirl-resource-list-item, swirl-resource-list-section).
+
+## Events
+
+- `itemDrop` – CustomEvent<{ item: HTMLSwirlResourceListItemElement; oldIndex: number; newIndex: number; }>
+
+## Methods
+
+- `resetFocus()` – 
+
+## Related components
+
+- **[swirl-resource-list-section](?path=/docs/components-swirlresourcelistsection--docs)**
+  (child) — Optional grouping for items; use as a direct child of
+  `swirl-resource-list`.
+- **[swirl-resource-list-item](?path=/docs/components-swirlresourcelistitem--docs)**
+  (child) — Individual list items; use as direct children of
+  `swirl-resource-list` or inside `swirl-resource-list-section`.
+
+## Accessibility
+
+### ARIA
+
+The component follows the
+[WAI-ARIA Grid Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/grid/).
+
+| ARIA          | Usage |
+| ------------- | ----- |
+| `role="grid"` |       |
+
+### Keyboard
+
+| Key             | Action                                                                                                 |
+| --------------- | ------------------------------------------------------------------------------------------------------ |
+| <kbd>TAB</kbd>  | Moves focus into and out of the resource list.                                                         |
+| <kbd>DOWN</kbd> | Focuses the next resource list item; moves focus to the first item, if the last one was in focus.      |
+| <kbd>UP</kbd>   | Focuses thev previous resource list item; moves focus to the last ietm, if the first one was in focus. |
+| <kbd>HOME</kbd> | Moves focus to the first resource list item.                                                           |
+| <kbd>END</kbd>  | Moves focus to the last resource list item.                                                            |
+
+## Minimal example
+
+```html
+<swirl-resource-list></swirl-resource-list>
+```
+
+## Usage example
+
+```html
+<swirl-resource-list label="A resource list" semantics="list">
+    <swirl-resource-list-item description="With a description" label="This is a resource item 1">
+        <swirl-avatar label="John Doe" size="l" src="https://picsum.photos/id/1025/144/144" slot="media"></swirl-avatar>
+    </swirl-resource-list-item>
+    <swirl-resource-list-item description="With a description" label="This is a resource item 2">
+        <swirl-avatar label="John Doe" size="l" src="https://picsum.photos/id/1026/144/144" slot="media"></swirl-avatar>
+    </swirl-resource-list-item>
+    <swirl-resource-list-item description="With a description" label="This is a resource item 3">
+        <swirl-avatar label="John Doe" size="l" src="https://picsum.photos/id/1027/144/144" slot="media"></swirl-avatar>
+    </swirl-resource-list-item>
+    <swirl-resource-list-section label="Item section">
+        <swirl-resource-list-item
+            description="With a <strong>description</strong>"
+            label="This is a <strong>resource item 4</strong>"
+            meta="Yesterday"
+        >
+            <swirl-avatar
+                label="John Doe"
+                size="l"
+                src="https://picsum.photos/id/1028/144/144"
+                slot="media"
+            ></swirl-avatar>
+        </swirl-resource-list-item>
+        <swirl-resource-list-item description="With a description" label="This is a resource item 5">
+            <swirl-avatar
+                label="John Doe"
+                size="l"
+                src="https://picsum.photos/id/1029/144/144"
+                slot="media"
+            ></swirl-avatar>
+        </swirl-resource-list-item>
+    </swirl-resource-list-section>
+</swirl-resource-list>
+```
+
+## Common mistakes
+
+- Ensure required props are set.
+- Use only allowed slot names and child components where documented.

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

@@ -0,0 +1,79 @@
+# `<swirl-search>`
+
+## Purpose
+
+The SwirlSearch component is used to provide a search input field.
+
+## Required props
+
+_None._
+
+## Optional props
+
+- `autoFocus` (boolean | undefined) – 
+- `clearButtonLabel` (string | undefined) – 
+- `clearable` (boolean | undefined) – 
+- `disabled` (boolean | undefined) – 
+- `inputId` (string | undefined) – 
+- `inputName` (string | undefined) – 
+- `label` (string | undefined) – 
+- `placeholder` (string | undefined) – 
+- `value` (string | undefined) – 
+- `variant` ("filled" | "ghost" | "outline" | undefined) – 
+
+## Slots
+
+_None._
+
+## Events
+
+- `clear` – CustomEvent<void>
+- `inputBlur` – CustomEvent<FocusEvent>
+- `inputFocus` – CustomEvent<FocusEvent>
+- `inputInput` – CustomEvent<string>
+- `valueChange` – CustomEvent<string>
+
+## Methods
+
+_None._
+
+## Related components
+
+No related components.
+
+## Accessibility
+
+Please consider the
+[W3C Search Landmark](https://www.w3.org/WAI/ARIA/apg/example-index/landmarks/search.html)
+recommendations when using this component.
+
+### ARIA
+
+| ARIA            | Usage                                                                           |
+| --------------- | ------------------------------------------------------------------------------- |
+| `aria-label`    | An accessible label is provided via the `aria-label` attribute.                 |
+| `aria-disabled` | If the input field is disabled, the `aria-disabled` attribute is set to `true`. |
+
+### Keyboard
+
+| Key                                | Action                          |
+| ---------------------------------- | ------------------------------- |
+| <kbd>CTRL/CMD</kbd> + <kbd>/</kbd> | Focuses the search input field. |
+| <kbd>CTRL/CMD</kbd> + <kbd>K</kbd> | Focuses the search input field. |
+
+## Minimal example
+
+```html
+<swirl-search></swirl-search>
+```
+
+## Usage example
+
+```html
+<swirl-search label="Search"></swirl-search>
+```
+
+## Common mistakes
+
+- Ensure required props are set.
+- Use only allowed slot names and child components where documented.

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

@@ -0,0 +1,86 @@
+# `<swirl-select>`
+
+## Purpose
+
+The SwirlSelect component is used to allow users to select one or multiple options from a predefined list. **It's value is always an array of type string even though it is a single select**. It should always be used in combination with the [SwirlFormControl component](?path=/docs/components-swirlformcontrol--docs).
+
+## Required props
+
+- `label` (string) – 
+
+## Optional props
+
+- `allowDeselect` (boolean | undefined) – 
+- `disabled` (boolean | undefined) – 
+- `emptyListLabel` (string | undefined) – 
+- `inline` (boolean | undefined) – 
+- `invalid` (boolean | undefined) – 
+- `multiSelect` (boolean | undefined) – 
+- `required` (boolean | undefined) – 
+- `searchInputLabel` (string | undefined) – 
+- `searchLoading` (boolean | undefined) – 
+- `searchPlaceholder` (string | undefined) – 
+- `selectId` (string | undefined) – 
+- `standalone` (boolean | undefined) – 
+- `swirlAriaDescribedby` (string | undefined) – 
+- `withSearch` (boolean | undefined) – 
+- `value` (string[] | undefined) – 
+
+## Slots
+
+_None._
+
+## Events
+
+- `searchChange` – CustomEvent<string>
+- `valueChange` – CustomEvent<string[]>
+
+## Methods
+
+_None._
+
+## Related components
+
+- **[swirl-form-control](?path=/docs/components-swirlformcontrol--docs)**
+  (parent) — Wraps the select with label and description; use `swirl-select` in
+  the default slot of `swirl-form-control`.
+- **[swirl-option-list](?path=/docs/components-swirloptionlist--docs)**
+  (internal) — Select uses `swirl-option-list` and
+  [swirl-popover](?path=/docs/components-swirlpopover--docs) for the dropdown.
+
+## Accessibility
+
+See the documentation of the
+[SwirlOptionList](?path=/docs/components-swirloptionlist--docs) and
+[SwirlPopover](?path=/docs/components-swirlpopover--docs) components.
+
+### Keyboard
+
+Keyboard behavior is defined by SwirlOptionList and SwirlPopover (e.g. arrow
+keys, Enter, Escape).
+
+## Minimal example
+
+```html
+<swirl-select label="..."></swirl-select>
+```
+
+## Usage example
+
+```html
+<swirl-select label="Select" search-placeholder="Search …" value='["2"]' with-search>
+    <swirl-option-list-section label="Section 1">
+        <swirl-option-list-item label="This is an option 1" value="1"></swirl-option-list-item>
+        <swirl-option-list-item label="This is an option 2" value="2"></swirl-option-list-item>
+        <swirl-option-list-item label="This is an option 3" value="3"></swirl-option-list-item>
+    </swirl-option-list-section>
+    <swirl-option-list-section label="Section 2">
+        <swirl-option-list-item label="This is an option 4" value="4"></swirl-option-list-item>
+    </swirl-option-list-section>
+</swirl-select>
+```
+
+## Common mistakes
+
+- Ensure required props are set.
+- Use only allowed slot names and child components where documented.

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

@@ -0,0 +1,63 @@
+# `<swirl-separator>`
+
+## Purpose
+
+The SwirlSeparator component is used to separate sections of content or groups of menu items.
+
+## Required props
+
+_None._
+
+## Optional props
+
+- `borderColor` ("critical" | "default" | "highlight" | "strong" | undefined) – 
+- `color` ("critical" | "default" | "highlight" | "strong" | undefined) – 
+- `label` (string | undefined) – 
+- `orientation` ("horizontal" | "vertical" | undefined) – 
+- `semantics` ("none" | "separator" | undefined) – 
+- `spacing` ("0" | "12" | "16" | "2" | "24" | "32" | "4" | "8" | undefined) – 
+
+## Slots
+
+_None._
+
+## Events
+
+_None._
+
+## Methods
+
+_None._
+
+## Related components
+
+No related components.
+
+## Accessibility
+
+### ARIA
+
+| ARIA               | Usage |
+| ------------------ | ----- |
+| `role="separator"` |       |
+
+### Keyboard
+
+No component-specific keyboard behavior.
+
+## Minimal example
+
+```html
+<swirl-separator></swirl-separator>
+```
+
+## Usage example
+
+```html
+<swirl-separator></swirl-separator>
+```
+
+## Common mistakes
+
+- Ensure required props are set.
+- Use only allowed slot names and child components where documented.

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

@@ -0,0 +1,78 @@
+# `<swirl-shell-layout>`
+
+## Purpose
+
+The SwirlShellLayout component provides the outer layout of the Flip Desktop app.
+
+## Required props
+
+_None._
+
+## Optional props
+
+- `brandedHeader` (boolean | undefined) – 
+- `browserBackButtonLabel` (string | undefined) – 
+- `browserForwardButtonLabel` (string | undefined) – 
+- `collapseNavigationButtonLabel` (string | undefined) – 
+- `enableSecondaryNavGridLayout` (boolean | undefined) – 
+- `expandNavigationButtonLabel` (string | undefined) – 
+- `gridNavLayoutToggleLabel` (string | undefined) – 
+- `hideMobileNavigationButtonLabel` (string | undefined) – 
+- `listNavLayoutToggleLabel` (string | undefined) – 
+- `navigationLabel` (string | undefined) – 
+- `secondaryNavCollapseLabel` (string | undefined) – 
+- `secondaryNavExpandLabel` (string | undefined) – 
+- `secondaryNavGridLayoutVariant` ("app-icon" | "tiled" | undefined) – 
+- `skipLinkLabel` (string | undefined) – 
+
+## Slots
+
+- **`avatar`** – User avatar positioned on the header's right-hand side.
+- **`left-header-tools`** – Tools positioned on the header's left-hand side.
+- **`logo`** – Logo shown inside header.
+- **`mobile-header-tools`** – Tools positioned in the mobile drawer header.
+- **`mobile-logo`** – Logo shown inside the mobile navigation drawer.
+- **`nav`** – Items shown in the lower sidebar part.
+- **`right-header-tools`** – Tools positioned on the header's right-hand side.
+- **`secondary-nav`** – Items shown in the secondary navigation area (e.g. when using grid layout).
+- **`slot`** – Contents of the main area.
+
+## Events
+
+- `historyBackClick` – CustomEvent<MouseEvent>
+- `historyForwardClick` – CustomEvent<MouseEvent>
+- `skipLinkClick` – CustomEvent<MouseEvent>
+
+## Methods
+
+- `hideMobileNavigation()` – Hides the mobile navigation.
+- `showMobileNavigation()` – Opens the mobile navigation.
+
+## Related components
+
+No related components.
+
+## Accessibility
+
+SwirlShellLayout is a layout shell with no ARIA attributes or keyboard-specific
+behavior. Ensure slotted navigation and main content provide appropriate
+landmarks and focus order.
+
+### Keyboard
+
+No component-specific keyboard behavior.
+
+## Minimal example
+
+```html
+<swirl-shell-layout></swirl-shell-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-shell-navigation-item.md

@@ -0,0 +1,87 @@
+# `<swirl-shell-navigation-item>`
+
+## Purpose
+
+The SwirlShellNavigationItem component is used to provide the main navigation for the [SwirlShellLayout](?path=/docs/components-swirlshelllayout--docs).
+
+## Required props
+
+- `label` (string) – 
+
+## Optional props
+
+- `active` (boolean | undefined) – 
+- `badgeLabel` (string | undefined) – 
+- `boxed` (boolean | undefined) – 
+- `description` (string | undefined) – 
+- `filled` (boolean | undefined) – 
+- `hideLabel` (boolean | undefined) – 
+- `href` (string | undefined) – 
+- `inlineLabel` (boolean | undefined) – 
+- `inlineLabelColor` ("dark" | "default" | "light" | undefined) – 
+- `markAsNew` (boolean | undefined) – 
+- `markAsNewLabel` (string | undefined) – 
+- `swirlAriaCurrent` ("page" | "true" | undefined) – 
+- `target` (string | undefined) – 
+- `useCustomIconSize` (boolean | undefined) – 
+- `variant` ("app-icon" | "default" | "tiled" | undefined) – 
+- `withGradient` (boolean | undefined) – 
+
+## Slots
+
+- **`icon`** – Image or icon to display in the navigation item.
+
+## Events
+
+_None._
+
+## Methods
+
+_None._
+
+## Related components
+
+No related components.
+
+## Accessibility
+
+### ARIA
+
+The component follows the
+[WAI-ARIA Link Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/link/).
+
+| ARIA          | Usage |
+| ------------- | ----- |
+| `role="link"` |       |
+
+### Keyboard
+
+| Key              | Action              |
+| ---------------- | ------------------- |
+| <kbd>ENTER</kbd> | Activates the link. |
+
+## Minimal example
+
+```html
+<swirl-shell-navigation-item label="..."></swirl-shell-navigation-item>
+```
+
+## Usage example
+
+```html
+<swirl-shell-navigation-item
+    label="Label"
+    badge-label="1"
+    variant="tiled"
+    inline-label
+    with-gradient
+    inline-label-color="light"
+>
+    <swirl-app-icon slot="icon" label="link" src="https://picsum.photos/id/25/200/300"></swirl-app-icon>
+</swirl-shell-navigation-item>
+```
+
+## Common mistakes
+
+- Ensure required props are set.
+- Use only allowed slot names and child components where documented.