@getflip/swirl-ai 0.448.0

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

@@ -0,0 +1,99 @@
+# `<swirl-button>`
+
+## Purpose
+
+The SwirlButton component is used to trigger actions or events.
+
+## Required props
+
+- `label` (string) – 
+
+## Optional props
+
+- `cursor` ("alias" | "all-scroll" | "auto" | "cell" | "col-resize" | "context-menu" | "copy" | "crosshair" | "default" | "e-resize" | "ew-resize" | "grab" | "grabbing" | "help" | "move" | "n-resize" | "ne-resize" | "nesw-resize" | "no-drop" | "none" | "not-allowed" | "ns-resize" | "nw-resize" | "nwse-resize" | "pointer" | "progress" | "row-resize" | "s-resize" | "se-resize" | "sw-resize" | "text" | "vertical-text" | "w-resize" | "wait" | "zoom-in" | "zoom-out" | undefined) – 
+- `disabled` (boolean | undefined) – 
+- `download` (string | undefined) – 
+- `elevated` (boolean | undefined) – 
+- `form` (string | undefined) – 
+- `hideLabel` (boolean | undefined) – 
+- `href` (string | undefined) – 
+- `icon` (string | undefined) – 
+- `iconPosition` ("end" | "start" | undefined) – 
+- `inheritFontSize` (boolean | undefined) – 
+- `intent` ("critical" | "default" | "primary" | "strong" | undefined) – 
+- `name` (string | undefined) – 
+- `pill` (boolean | undefined) – 
+- `pressed` (boolean | undefined) – 
+- `size` ("l" | "m" | undefined) – 
+- `swirlAriaControls` (string | undefined) – 
+- `swirlAriaCurrent` (string | undefined) – 
+- `swirlAriaDescribedby` (string | undefined) – 
+- `swirlAriaExpanded` (string | undefined) – 
+- `swirlAriaHaspopup` (string | undefined) – 
+- `swirlAriaLabel` (string | undefined) – 
+- `target` (string | undefined) – 
+- `textAlign` ("center" | "end" | "start" | undefined) – 
+- `type` ("button" | "submit" | undefined) – 
+- `value` (string | undefined) – 
+- `variant` ("flat" | "floating" | "ghost" | "on-image" | "outline" | "plain" | "translucent" | undefined) – 
+
+## Slots
+
+- **`icon`** – Icon to be displayed inside the button.
+- **`tag`** – Tag to be displayed inside the button.
+- **`trailing`** – Trailing slot for content to be displayed at the end.
+
+## Events
+
+_None._
+
+## Methods
+
+_None._
+
+## Related components
+
+No related components.
+
+## Accessibility
+
+### ARIA
+
+The component follows the
+[WAI-ARIA Button Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/button/).
+
+| ARIA               | Usage                                                                                      |
+| ------------------ | ------------------------------------------------------------------------------------------ |
+| `role="button"`    | Implicit when rendered as <code>&lt;button&gt;</code>; link when <code>href</code> is set. |
+| `aria-label`       | Set when the label is hidden (e.g. icon-only) or via <code>swirlAriaLabel</code>.          |
+| `aria-disabled`    | Set to <code>true</code> when the button is disabled (button only, not link).              |
+| `aria-pressed`     | Set to <code>true</code> when <code>pressed</code> is true (toggle buttons).               |
+| `aria-controls`    | Optional; set via <code>swirlAriaControls</code>.                                          |
+| `aria-current`     | Optional; set via <code>swirlAriaCurrent</code>.                                           |
+| `aria-describedby` | Optional; set via <code>swirlAriaDescribedby</code>.                                       |
+| `aria-expanded`    | Optional; set via <code>swirlAriaExpanded</code> (e.g. for popover triggers).              |
+| `aria-haspopup`    | Optional; set via <code>swirlAriaHaspopup</code>.                                          |
+
+### Keyboard
+
+| Key              | Action                |
+| ---------------- | --------------------- |
+| <kbd>ENTER</kbd> | Activates the button. |
+| <kbd>SPACE</kbd> | Activates the button. |
+
+## Minimal example
+
+```html
+<swirl-button label="..."></swirl-button>
+```
+
+## Usage example
+
+```html
+<swirl-button icon="<swirl-icon-add></swirl-icon-add>" label="Label"></swirl-button>
+```
+
+## Common mistakes
+
+- Ensure required props are set.
+- Use only allowed slot names and child components where documented.

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

@@ -0,0 +1,110 @@
+# `<swirl-card>`
+
+## Purpose
+
+The SwirlCard component is used to provide a container for related pieces of information.
+
+## Required props
+
+_None._
+
+## Optional props
+
+- `as` (string | undefined) – 
+- `borderRadius` (string | undefined) – 
+- `customBackdropFilter` (string | undefined) – 
+- `customBackgroundColor` (string | undefined) – 
+- `elevated` (boolean | undefined) – 
+- `elevationLevel` (1 | 2 | 3 | undefined) – 
+- `height` (string | undefined) – 
+- `highlighted` (boolean | undefined) – 
+- `href` (string | undefined) – 
+- `imageAspectRatio` (string | undefined) – 
+- `intent` ("critical-subdued" | "default" | "default-subdued" | "highlight" | "info-subdued" | "success-subdued" | "warning-subdued" | undefined) – 
+- `interactive` (boolean | undefined) – 
+- `isBorderless` (boolean | undefined) – 
+- `justifyContent` ("center" | "end" | "start" | undefined) – 
+- `linkTarget` (string | undefined) – 
+- `minHeight` (string | undefined) – 
+- `overflow` ("auto" | "hidden" | "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) – 
+- `swirlAriaCurrent` ("date" | "location" | "page" | "step" | "time" | "true" | undefined) – 
+- `swirlAriaLabel` (string | undefined) – 
+- `swirlAriaLabelledby` (string | undefined) – 
+
+## Slots
+
+- **`content`** – The card contents
+- **`floating-controls`** – Optional controls displayed on hover in the top right corner
+- **`image`** – Optional image or image grid
+
+## Events
+
+- `componentLoad` – CustomEvent<void>
+
+## Methods
+
+- `flash()` – Flashes the card to draw focus.
+
+## Related components
+
+No related components.
+
+## Accessibility
+
+### ARIA
+
+When used as a link (`href`) or with `swirlAriaLabel` / `swirlAriaLabelledby`,
+the card exposes optional ARIA for assistive technologies.
+
+| ARIA              | Usage                                                                 |
+| ----------------- | --------------------------------------------------------------------- |
+| `aria-current`    | Optional; set via `swirlAriaCurrent` (e.g. `"page"`, `"step"`).       |
+| `aria-label`      | Optional; set via `swirlAriaLabel` when the card has no visible text. |
+| `aria-labelledby` | Optional; set via `swirlAriaLabelledby` to reference a visible label. |
+
+### Keyboard
+
+When the card is interactive (e.g. has `href`), it uses native link semantics:
+
+<kbd>Enter</kbd> activates. No component-specific shortcuts.
+
+## Minimal example
+
+```html
+<swirl-card></swirl-card>
+```
+
+## Usage example
+
+```html
+<swirl-card>
+    <img slot="image" alt="Dog in a blanket." src="/sample-2.jpg" />
+    <swirl-stack slot="content" spacing="12">
+        <swirl-stack>
+            <swirl-stack orientation="horizontal">
+                <swirl-text color="subdued" size="sm" weight="semibold">New •&nbsp;</swirl-text>
+                <swirl-text color="subdued" size="sm">A sub heading.</swirl-text>
+            </swirl-stack>
+            <swirl-heading as="h2" level="4" text="This is the heading of the card."></swirl-heading>
+        </swirl-stack>
+        <swirl-text 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. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+            clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
+            consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
+            sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
+            sea takimata sanctus est Lorem ipsum dolor sit amet.
+        </swirl-text>
+    </swirl-stack>
+</swirl-card>
+```
+
+## Common mistakes
+
+- Ensure required props are set.
+- Use only allowed slot names and child components where documented.

package/dist/agent/components/swirl-carousel-slide.md

@@ -0,0 +1,70 @@
+# `<swirl-carousel-slide>`
+
+## Purpose
+
+The SwirlCarouselSlide component is used to display a single slide inside the [SwirlCarousel component](?path=/docs/components-swirldescriptionlist--docs).
+
+## Required props
+
+_None._
+
+## Optional props
+
+- `aspectRatio` (string | undefined) – 
+- `label` (string | undefined) – 
+- `minHeight` (string | undefined) – 
+- `width` (string | undefined) – 
+
+## Slots
+
+_None._
+
+## Events
+
+_None._
+
+## Methods
+
+_None._
+
+## Related components
+
+- **[swirl-carousel](?path=/docs/components-swirlcarousel--docs)** (parent) —
+  Carousel container; use `swirl-carousel-slide` as a direct child of
+  `swirl-carousel`.
+
+## Accessibility
+
+### ARIA
+
+The component follows the
+[WAI-ARIA Carousel Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/carousel/).
+
+| ARIA                   | Usage                       |
+| ---------------------- | --------------------------- |
+| `role="group"`         |                             |
+| `aria-roledescription` | Set to "slide".             |
+| `aria-label`           | Set on the slide container. |
+
+### Keyboard
+
+No component-specific keyboard behavior.
+
+## Minimal example
+
+```html
+<swirl-carousel-slide></swirl-carousel-slide>
+```
+
+## Usage example
+
+```html
+<swirl-carousel-slide label="Label">
+    <img alt="Description" src="/sample-3.jpg" />
+</swirl-carousel-slide>
+```
+
+## Common mistakes
+
+- Ensure required props are set.
+- Use only allowed slot names and child components where documented.

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

@@ -0,0 +1,169 @@
+# `<swirl-carousel>`
+
+## Purpose
+
+The SwirlCarousel component is used to display a set of slides, highlighting one at a time.
+
+## Required props
+
+- `label` (string) – 
+
+## Optional props
+
+- `fade` (boolean | undefined) – 
+- `fadeColor` ("default" | "on-surface-overlay" | undefined) – 
+- `loopAround` (boolean | undefined) – 
+- `nextSlideButtonLabel` (string | undefined) – 
+- `padding` ("0" | "12" | "16" | "2" | "24" | "32" | "4" | "40" | "48" | "64" | "8" | undefined) – 
+- `paddingBlockEnd` ("0" | "12" | "16" | "2" | "24" | "32" | "4" | "40" | "48" | "64" | "8" | undefined) – 
+- `paddingBlockStart` ("0" | "12" | "16" | "2" | "24" | "32" | "4" | "40" | "48" | "64" | "8" | undefined) – 
+- `paddingInlineEnd` ("0" | "12" | "16" | "2" | "24" | "32" | "4" | "40" | "48" | "64" | "8" | undefined) – 
+- `paddingInlineStart` ("0" | "12" | "16" | "2" | "24" | "32" | "4" | "40" | "48" | "64" | "8" | undefined) – 
+- `previousSlideButtonLabel` (string | undefined) – 
+- `spacing` ("0" | "12" | "16" | "2" | "24" | "32" | "4" | "40" | "48" | "64" | "8" | undefined) – 
+
+## Slots
+
+_None._
+
+## Events
+
+- `activeSlidesChange` – CustomEvent<HTMLSwirlCarouselSlideElement[]>
+
+## Methods
+
+- `scrollToSlide()` – Scroll to slide with id.
+
+## Related components
+
+- **[swirl-carousel-slide](?path=/docs/components-swirlcarouselslide--docs)**
+  (child) — Slides; use as direct children of `swirl-carousel`.
+
+## Accessibility
+
+### ARIA
+
+The component follows the
+[WAI-ARIA Carousel Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/carousel/).
+
+| ARIA                   | Usage                                                                               |
+| ---------------------- | ----------------------------------------------------------------------------------- |
+| `role="group"`         | Set on the carousel container and each slide container.                             |
+| `aria-roledescription` | Set on the carousel container to "carousel" and on each slide container to "slide". |
+| `aria-label`           | Set on the container to label the carousel and on each slide container.             |
+
+### Keyboard
+
+No component-specific keyboard behavior; navigation (e.g. arrow keys) is
+provided by the host or slotted controls.
+
+## Minimal example
+
+```html
+<swirl-carousel label="..."></swirl-carousel>
+```
+
+## Usage example
+
+```html
+<swirl-carousel label="Carousel" loop-around>
+    <swirl-carousel-slide min-height="10rem">
+        <swirl-card image-aspect-ratio="16/9" height="100%" interactive elevated>
+            <img slot="image" alt="Dog in a blanket." src="/sample.jpg" />
+            <swirl-stack slot="content" spacing="12">
+                <swirl-heading
+                    as="h2"
+                    level="4"
+                    text="This is the pretty pretty long heading of the card. Like really long."
+                    lines="2"
+                    truncate
+                ></swirl-heading>
+            </swirl-stack>
+        </swirl-card>
+    </swirl-carousel-slide>
+    <swirl-carousel-slide min-height="10rem">
+        <swirl-card image-aspect-ratio="16/9" height="100%" interactive elevated>
+            <swirl-stack slot="content" spacing="12">
+                <swirl-heading
+                    as="h2"
+                    level="4"
+                    text="This is the pretty pretty long heading of the card. Like really long."
+                    lines="3"
+                    truncate
+                ></swirl-heading>
+                <swirl-text size="sm" truncate lines="5">
+                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
+                    labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
+                    et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
+                    labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
+                    et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+                </swirl-text>
+            </swirl-stack>
+        </swirl-card>
+    </swirl-carousel-slide>
+    <swirl-carousel-slide min-height="10rem">
+        <swirl-card image-aspect-ratio="16/9" height="100%" interactive elevated>
+            <img slot="image" alt="Dog in a blanket." src="/sample-3.jpg" />
+            <swirl-stack slot="content" spacing="12">
+                <swirl-heading
+                    as="h2"
+                    level="4"
+                    text="This is the heading of the card."
+                    lines="2"
+                    truncate
+                ></swirl-heading>
+            </swirl-stack>
+        </swirl-card>
+    </swirl-carousel-slide>
+    <swirl-carousel-slide min-height="10rem">
+        <swirl-card image-aspect-ratio="16/9" height="100%" interactive elevated>
+            <img slot="image" alt="Dog in a blanket." src="/sample.jpg" />
+            <swirl-stack slot="content" spacing="12">
+                <swirl-heading
+                    as="h2"
+                    level="4"
+                    text="This is the heading of the card."
+                    lines="2"
+                    truncate
+                ></swirl-heading>
+            </swirl-stack>
+        </swirl-card>
+    </swirl-carousel-slide>
+    <swirl-carousel-slide min-height="10rem">
+        <swirl-card image-aspect-ratio="16/9" height="100%" interactive elevated>
+            <img slot="image" alt="Dog in a blanket." src="/sample.jpg" />
+            <swirl-stack slot="content" spacing="12">
+                <swirl-heading
+                    as="h2"
+                    level="4"
+                    text="This is the pretty pretty long heading of the card. Like really long."
+                    lines="2"
+                    truncate
+                ></swirl-heading>
+            </swirl-stack>
+        </swirl-card>
+    </swirl-carousel-slide>
+    <swirl-carousel-slide min-height="10rem">
+        <swirl-card image-aspect-ratio="16/9" height="100%" interactive elevated>
+            <swirl-stack slot="content" spacing="12">
+                <swirl-heading
+                    as="h2"
+                    level="4"
+                    text="This is the pretty pretty long heading of the card. Like really long."
+                    lines="3"
+                    truncate
+                ></swirl-heading>
+                <swirl-text size="sm" truncate lines="5">
+                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.
+                </swirl-text>
+            </swirl-stack>
+        </swirl-card>
+    </swirl-carousel-slide>
+</swirl-carousel>
+```
+
+## Common mistakes
+
+- Ensure required props are set.
+- Use only allowed slot names and child components where documented.

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

@@ -0,0 +1,83 @@
+# `<swirl-checkbox>`
+
+## Purpose
+
+The SwirlCheckbox component is used as a form control to allow a user to select one or multiple choices from a list of options.
+
+## Required props
+
+- `inputId` (string) – 
+- `inputName` (string) – 
+
+## Optional props
+
+- `checked` ("false" | "indeterminate" | "true" | boolean | undefined) – 
+- `description` (string | undefined) – 
+- `disabled` (boolean | undefined) – 
+- `invalid` (boolean | undefined) – 
+- `label` (string | undefined) – 
+- `labelWeight` ("medium" | "regular" | undefined) – 
+- `swirlAriaDescribedby` (string | undefined) – 
+- `swirlAriaLabel` (string | undefined) – 
+- `value` (string | undefined) – 
+- `variant` ("card" | "default" | undefined) – 
+
+## Slots
+
+_None._
+
+## Events
+
+- `valueChange` – CustomEvent<boolean>
+
+## Methods
+
+_None._
+
+## Related components
+
+- **[swirl-form-control](?path=/docs/components-swirlformcontrol--docs)**
+  (parent) — Wraps the checkbox with label and description; use `swirl-checkbox`
+  in the default slot of `swirl-form-control`.
+
+## Accessibility
+
+### ARIA
+
+The component follows the
+[WAI-ARIA Checkbox Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/).
+
+| ARIA              | Usage                                                                                                                                                |
+| ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `role="checkbox"` |                                                                                                                                                      |
+| `aria-label`      | If no accessible label is provided via the checkbox's label prop, the `aria-label` or `aria-labelledby` attribute has to be set.                     |
+| `aria-checked`    | The checkbox gets the `aria-checked` attribute set to `true` in checked state, to `false` in unchecked state, and to `mixed` in indeterminate state. |
+
+### Keyboard
+
+| Key              | Action                             |
+| ---------------- | ---------------------------------- |
+| <kbd>SPACE</kbd> | Changes the state of the checkbox. |
+
+## Minimal example
+
+```html
+<swirl-checkbox inputId="..." inputName="..."></swirl-checkbox>
+```
+
+## Usage example
+
+```html
+<swirl-checkbox
+    checked
+    description="Optional description of the item."
+    input-id="checkbox"
+    input-name="Checkbox"
+    label="Checkbox"
+></swirl-checkbox>
+```
+
+## Common mistakes
+
+- Ensure required props are set.
+- Use only allowed slot names and child components where documented.

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

@@ -0,0 +1,73 @@
+# `<swirl-chip>`
+
+## Purpose
+
+The SwirlChip component is used to represent an input, attribute, or action.
+
+## Required props
+
+- `label` (string) – 
+
+## Optional props
+
+- `borderRadius` ("pill" | "sm" | undefined) – 
+- `icon` (string | undefined) – 
+- `iconColor` ("default" | "highlight" | undefined) – 
+- `intent` ("critical" | "default" | "success" | undefined) – 
+- `interactive` (boolean | undefined) – 
+- `pressed` (boolean | undefined) – 
+- `progress` (number | undefined) – 
+- `progressBarLabel` (string | undefined) – 
+- `removable` (boolean | undefined) – 
+- `removeButtonLabel` (string | undefined) – 
+- `size` ("m" | "s" | undefined) – 
+- `variant` ("outline" | "plain" | undefined) – 
+
+## Slots
+
+- **`avatar`** – Optional avatar displayed inside the chip. Should have size "xs".
+
+## Events
+
+- `chipClick` – CustomEvent<MouseEvent>
+- `remove` – CustomEvent<MouseEvent>
+
+## Methods
+
+_None._
+
+## Related components
+
+No related components.
+
+## Accessibility
+
+### ARIA
+
+| ARIA            | Usage                                                               |
+| --------------- | ------------------------------------------------------------------- |
+| `role="button"` | For interactive chips; achieved by using a native `button` element. |
+
+### Keyboard
+
+| Key              | Action                          |
+| ---------------- | ------------------------------- |
+| <kbd>ENTER</kbd> | Activates the interactive chip. |
+| <kbd>SPACE</kbd> | Activates the interactive chip. |
+
+## Minimal example
+
+```html
+<swirl-chip label="..."></swirl-chip>
+```
+
+## Usage example
+
+```html
+<swirl-chip label="Label" removable></swirl-chip>
+```
+
+## Common mistakes
+
+- Ensure required props are set.
+- Use only allowed slot names and child components where documented.

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

@@ -0,0 +1,76 @@
+# `<swirl-color-input>`
+
+## Purpose
+
+The SwirlTextInput component is used to render a text input field with a preview for entered hex color values. 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) – 
+- `disabled` (boolean | undefined) – 
+- `inline` (boolean | undefined) – 
+- `invalid` (boolean | undefined) – 
+- `pickerButtonLabel` (string | undefined) – 
+- `pickerLabel` (string | undefined) – 
+- `placeholder` (string | undefined) – 
+- `readonly` (boolean | undefined) – 
+- `required` (boolean | undefined) – 
+- `swirlAriaDescribedby` (string | undefined) – 
+- `value` (string | undefined) – 
+
+## Slots
+
+_None._
+
+## Events
+
+- `inputBlur` – CustomEvent<FocusEvent>
+- `inputFocus` – CustomEvent<FocusEvent>
+- `valueChange` – CustomEvent<string>
+
+## Methods
+
+_None._
+
+## Related components
+
+No related components.
+
+## Accessibility
+
+### ARIA
+
+| ARIA               | Usage                                                           |
+| ------------------ | --------------------------------------------------------------- |
+| `aria-describedby` | Optional; set via `swirlAriaDescribedby`.                       |
+| `aria-disabled`    | Set on the input when disabled.                                 |
+| `aria-invalid`     | Set when the value is invalid.                                  |
+| `aria-label`       | Set on the color picker trigger button via `pickerButtonLabel`. |
+
+### Keyboard
+
+Standard text input and button behavior. The picker button is activated with
+
+<kbd>Enter</kbd> or <kbd>Space</kbd>. No component-specific shortcuts.
+
+## Minimal example
+
+```html
+<swirl-color-input></swirl-color-input>
+```
+
+## Usage example
+
+```html
+<swirl-color-input></swirl-color-input>
+```
+
+## Common mistakes
+
+- Ensure required props are set.
+- Use only allowed slot names and child components where documented.