@getflip/swirl-ai 0.525.0 → 0.527.0

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

@@ -10,8 +10,12 @@ _None._
 
 ## Optional props
 
+- `href` (string | undefined) – 
 - `intent` ("critical" | "default" | "info" | "special" | "subdued" | "success" | "translucent" | "warning" | undefined) – 
+- `interactive` (boolean | undefined) – 
 - `label` (string | undefined) – 
+- `linkTarget` (string | undefined) – 
+- `size` ("m" | "s" | undefined) – 
 - `tooltip` (string | undefined) – 
 - `value` (string | undefined) – 
 - `vertical` (boolean | undefined) – 
@@ -40,22 +44,31 @@ _None._
 
 ### ARIA
 
-The component structures label-value pairs for assistive technologies.
-
-| ARIA                | Usage                                                             |
-| ------------------- | ----------------------------------------------------------------- |
-| `role="group"`      | Set on the host when `swirl-data-cell` is used standalone.        |
-| `role="listitem"`   | Set on the host when `swirl-data-cell` is used in a stack/list.   |
-| `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. |
+The component structures label-value pairs for assistive technologies. When
+`interactive` or `href` is set, the cell renders as a native button or link
+instead, so the `term`/`definition` roles are omitted — a button/link already
+computes its accessible name from its contents.
+
+| ARIA                | Usage                                                                                    |
+| ------------------- | ----------------------------------------------------------------------------------------- |
+| `role="group"`      | Set on the host when `swirl-data-cell` is used standalone.                               |
+| `role="listitem"`   | Set on the host when `swirl-data-cell` is used in a stack/list.                          |
+| `role="term"`       | Set on the label element (omitted when `interactive`/`href` is set).                      |
+| `role="definition"` | Set on the value/definition container (omitted when `interactive`/`href` is set).         |
+| `aria-labelledby`   | Set on the definition, referencing the label ID (omitted when `interactive`/`href` is set). |
+| `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.
+Keyboard behavior is determined by slotted content (e.g. form controls), plus
+the following when `interactive` or `href` is set:
+
+| Key             | Action                                    |
+| --------------- | ------------------------------------------ |
+| <kbd>TAB</kbd>  | Moves focus to/from the cell.              |
+| <kbd>ENTER</kbd> | Activates the interactive cell or link.   |
+| <kbd>SPACE</kbd> | Activates the interactive cell (buttons only). |
 
 ## Minimal example
 

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

@@ -13,6 +13,7 @@ The SwirlModal component is used to overlay the user interface with content that
 - `closable` (boolean | undefined) – 
 - `closeButtonLabel` (string | undefined) – 
 - `contentGap` ("0" | "12" | "16" | "2" | "20" | "24" | "32" | "4" | "8" | undefined) – 
+- `disableBackdropClose` (boolean | undefined) – 
 - `fullscreenDisableButtonLabel` (string | undefined) – 
 - `fullscreenEnableButtonLabel` (string | undefined) – 
 - `hasSidebarCloseButton` (boolean | undefined) – 

package/dist/custom-elements.manifest.json

@@ -6915,6 +6915,13 @@
           "tagName": "swirl-data-cell",
           "name": "SwirlDataCell",
           "attributes": [
+            {
+              "name": "href",
+              "type": {
+                "text": "string | undefined"
+              },
+              "fieldName": "href"
+            },
             {
               "name": "intent",
               "type": {
@@ -6928,6 +6935,14 @@
               "default": "\"default\"",
               "fieldName": "intent"
             },
+            {
+              "name": "interactive",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "default": "false",
+              "fieldName": "interactive"
+            },
             {
               "name": "label",
               "type": {
@@ -6935,6 +6950,26 @@
               },
               "fieldName": "label"
             },
+            {
+              "name": "link-target",
+              "type": {
+                "text": "string | undefined"
+              },
+              "fieldName": "linkTarget"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "\"m\" | \"s\" | undefined",
+                "references": [
+                  {
+                    "name": "SwirlDataCellSize"
+                  }
+                ]
+              },
+              "default": "\"m\"",
+              "fieldName": "size"
+            },
             {
               "name": "tooltip",
               "type": {
@@ -6959,6 +6994,15 @@
             }
           ],
           "members": [
+            {
+              "kind": "field",
+              "name": "href",
+              "type": {
+                "text": "string | undefined"
+              },
+              "readonly": true,
+              "attribute": "href"
+            },
             {
               "kind": "field",
               "name": "intent",
@@ -6974,6 +7018,16 @@
               "readonly": true,
               "attribute": "intent"
             },
+            {
+              "kind": "field",
+              "name": "interactive",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "default": "false",
+              "readonly": true,
+              "attribute": "interactive"
+            },
             {
               "kind": "field",
               "name": "label",
@@ -6983,6 +7037,31 @@
               "readonly": true,
               "attribute": "label"
             },
+            {
+              "kind": "field",
+              "name": "linkTarget",
+              "type": {
+                "text": "string | undefined"
+              },
+              "readonly": true,
+              "attribute": "link-target"
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "\"m\" | \"s\" | undefined",
+                "references": [
+                  {
+                    "name": "SwirlDataCellSize"
+                  }
+                ]
+              },
+              "default": "\"m\"",
+              "readonly": true,
+              "attribute": "size",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "tooltip",
@@ -7045,7 +7124,7 @@
               "name": "data-cell"
             }
           ],
-          "description": "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.\n\nAccessibility\n\n### ARIA\n\nThe component structures label-value pairs for assistive technologies.\n\n| ARIA                | Usage                                                             |\n| ------------------- | ----------------------------------------------------------------- |\n| `role=\"group\"`      | Set on the host when `swirl-data-cell` is used standalone.        |\n| `role=\"listitem\"`   | Set on the host when `swirl-data-cell` is used in a stack/list.   |\n| `role=\"term\"`       | Set on the label element.                                         |\n| `role=\"definition\"` | Set on the value/definition container.                            |\n| `aria-labelledby`   | Set on the definition, referencing the label ID.                  |\n| `aria-hidden`       | Set on the media container when present.                          |\n| `role=\"button\"`     | Optional; set when the cell contains a checkbox or radio control. |\n\n### Keyboard\n\nKeyboard behavior is determined by slotted content (e.g. form controls). No\ncomponent-specific shortcuts."
+          "description": "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.\n\nAccessibility\n\n### ARIA\n\nThe component structures label-value pairs for assistive technologies. When\n`interactive` or `href` is set, the cell renders as a native button or link\ninstead, so the `term`/`definition` roles are omitted — a button/link already\ncomputes its accessible name from its contents.\n\n| ARIA                | Usage                                                                                    |\n| ------------------- | ----------------------------------------------------------------------------------------- |\n| `role=\"group\"`      | Set on the host when `swirl-data-cell` is used standalone.                               |\n| `role=\"listitem\"`   | Set on the host when `swirl-data-cell` is used in a stack/list.                          |\n| `role=\"term\"`       | Set on the label element (omitted when `interactive`/`href` is set).                      |\n| `role=\"definition\"` | Set on the value/definition container (omitted when `interactive`/`href` is set).         |\n| `aria-labelledby`   | Set on the definition, referencing the label ID (omitted when `interactive`/`href` is set). |\n| `aria-hidden`       | Set on the media container when present.                                                  |\n| `role=\"button\"`     | Optional; set when the cell contains a checkbox or radio control.                        |\n\n### Keyboard\n\nKeyboard behavior is determined by slotted content (e.g. form controls), plus\nthe following when `interactive` or `href` is set:\n\n| Key             | Action                                    |\n| --------------- | ------------------------------------------ |\n| <kbd>TAB</kbd>  | Moves focus to/from the cell.              |\n| <kbd>ENTER</kbd> | Activates the interactive cell or link.   |\n| <kbd>SPACE</kbd> | Activates the interactive cell (buttons only). |"
         }
       ],
       "exports": [
@@ -45088,6 +45167,13 @@
               },
               "fieldName": "contentGap"
             },
+            {
+              "name": "disable-backdrop-close",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "fieldName": "disableBackdropClose"
+            },
             {
               "name": "fullscreen-disable-button-label",
               "type": {
@@ -45405,6 +45491,15 @@
               "readonly": true,
               "attribute": "content-gap"
             },
+            {
+              "kind": "field",
+              "name": "disableBackdropClose",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "readonly": true,
+              "attribute": "disable-backdrop-close"
+            },
             {
               "kind": "field",
               "name": "fullscreenDisableButtonLabel",

package/dist/types/components/swirl-avatar-group/swirl-avatar-group.stories.d.ts

@@ -24,3 +24,4 @@ export declare const SwirlAvatarGroup: any;
 export declare const WithHorizontalLayout: any;
 export declare const WithSquareAvatars: any;
 export declare const WithCenteredLayout: any;
+export declare const WithCenteredLayoutTwoAvatars: any;

package/dist/types/components/swirl-data-cell/swirl-data-cell.d.ts

@@ -1,5 +1,6 @@
 import { EventEmitter } from "../../stencil-public-runtime";
 export type SwirlDataCellIntent = "default" | "critical" | "warning" | "success" | "info" | "special" | "translucent" | "subdued";
+export type SwirlDataCellSize = "s" | "m";
 /**
  * @slot media - Optional media content (e.g., swirl-avatar, icons). Only swirl-avatar and icon elements are styled.
  * @slot 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.
@@ -7,8 +8,12 @@ export type SwirlDataCellIntent = "default" | "critical" | "warning" | "success"
  */
 export declare class SwirlDataCell {
     el: HTMLElement;
+    href?: string;
     intent?: SwirlDataCellIntent;
+    interactive?: boolean;
     label?: string;
+    linkTarget?: string;
+    size?: SwirlDataCellSize;
     tooltip?: string;
     value?: string;
     vertical?: boolean;

package/dist/types/components/swirl-data-cell/swirl-data-cell.stories.d.ts

@@ -15,4 +15,5 @@ export declare const MultipleCells: () => HTMLElement;
 export declare const WithInput: () => HTMLElement;
 export declare const WithSelect: () => HTMLElement;
 export declare const WithCheckbox: () => HTMLElement;
+export declare const InteractiveCompactCells: () => HTMLElement;
 export declare const WithRadioButton: () => HTMLElement;

package/dist/types/components/swirl-modal/swirl-modal.d.ts

@@ -15,6 +15,7 @@ export declare class SwirlModal {
     el: HTMLElement;
     closable?: boolean;
     closeButtonLabel?: string;
+    disableBackdropClose?: boolean;
     fullscreenEnableButtonLabel?: string;
     fullscreenDisableButtonLabel?: string;
     height?: string;

package/dist/types/components/swirl-modal/swirl-modal.stories.d.ts

@@ -1,6 +1,9 @@
 import Docs from "./swirl-modal.mdx";
 declare const _default: {
     argTypes: {
+        disableBackdropClose: {
+            description: string;
+        };
         returnFocusTo: {
             control: string;
             description: string;

package/dist/types/components.d.ts

@@ -25,7 +25,7 @@ import { SwirlCarouselFadeColor, SwirlCarouselPadding, SwirlCarouselSpacing } fr
 import { SwirlCheckboxLabelWeight, SwirlCheckboxState, SwirlCheckboxVariant } from "./components/swirl-checkbox/swirl-checkbox";
 import { SwirlChipIconColor, SwirlChipIntent } from "./components/swirl-chip/swirl-chip";
 import { SwirlColumnsSpacing } from "./components/swirl-columns/swirl-columns";
-import { SwirlDataCellIntent } from "./components/swirl-data-cell/swirl-data-cell";
+import { SwirlDataCellIntent, SwirlDataCellSize } from "./components/swirl-data-cell/swirl-data-cell";
 import { WCDatepickerLabels } from "wc-datepicker/dist/types/components/wc-datepicker/wc-datepicker";
 import { SwirlButtonGroupOrientation as SwirlButtonGroupOrientation1 } from "./components/swirl-button-group/swirl-button-group";
 import { SwirlDialogIntent, SwirlDialogSize } from "./components/swirl-dialog/swirl-dialog";
@@ -109,7 +109,7 @@ export { SwirlCarouselFadeColor, SwirlCarouselPadding, SwirlCarouselSpacing } fr
 export { SwirlCheckboxLabelWeight, SwirlCheckboxState, SwirlCheckboxVariant } from "./components/swirl-checkbox/swirl-checkbox";
 export { SwirlChipIconColor, SwirlChipIntent } from "./components/swirl-chip/swirl-chip";
 export { SwirlColumnsSpacing } from "./components/swirl-columns/swirl-columns";
-export { SwirlDataCellIntent } from "./components/swirl-data-cell/swirl-data-cell";
+export { SwirlDataCellIntent, SwirlDataCellSize } from "./components/swirl-data-cell/swirl-data-cell";
 export { WCDatepickerLabels } from "wc-datepicker/dist/types/components/wc-datepicker/wc-datepicker";
 export { SwirlButtonGroupOrientation as SwirlButtonGroupOrientation1 } from "./components/swirl-button-group/swirl-button-group";
 export { SwirlDialogIntent, SwirlDialogSize } from "./components/swirl-dialog/swirl-dialog";
@@ -838,11 +838,21 @@ export namespace Components {
         "toggleSidebar": () => Promise<void>;
     }
     interface SwirlDataCell {
+        "href"?: string;
         /**
           * @default "default"
          */
         "intent"?: SwirlDataCellIntent;
+        /**
+          * @default false
+         */
+        "interactive"?: boolean;
         "label"?: string;
+        "linkTarget"?: string;
+        /**
+          * @default "m"
+         */
+        "size"?: SwirlDataCellSize;
         "tooltip"?: string;
         "value"?: string;
         /**
@@ -3818,6 +3828,7 @@ export namespace Components {
          */
         "closeButtonLabel"?: string;
         "contentGap"?: SwirlModalSpacing;
+        "disableBackdropClose"?: boolean;
         /**
           * @default "Exit full screen"
          */
@@ -11333,12 +11344,22 @@ declare namespace LocalJSX {
         "subheading"?: string;
     }
     interface SwirlDataCell {
+        "href"?: string;
         /**
           * @default "default"
          */
         "intent"?: SwirlDataCellIntent;
+        /**
+          * @default false
+         */
+        "interactive"?: boolean;
         "label"?: string;
+        "linkTarget"?: string;
         "onValueChange"?: (event: SwirlDataCellCustomEvent<MouseEvent>) => void;
+        /**
+          * @default "m"
+         */
+        "size"?: SwirlDataCellSize;
         "tooltip"?: string;
         "value"?: string;
         /**
@@ -14226,6 +14247,7 @@ declare namespace LocalJSX {
          */
         "closeButtonLabel"?: string;
         "contentGap"?: SwirlModalSpacing;
+        "disableBackdropClose"?: boolean;
         /**
           * @default "Exit full screen"
          */
@@ -16577,8 +16599,12 @@ declare namespace LocalJSX {
         "hideContentHeader": boolean;
     }
     interface SwirlDataCellAttributes {
+        "href": string;
         "intent": SwirlDataCellIntent;
+        "interactive": boolean;
         "label": string;
+        "linkTarget": string;
+        "size": SwirlDataCellSize;
         "tooltip": string;
         "value": string;
         "vertical": boolean;
@@ -18235,6 +18261,7 @@ declare namespace LocalJSX {
     interface SwirlModalAttributes {
         "closable": boolean;
         "closeButtonLabel": string;
+        "disableBackdropClose": boolean;
         "fullscreenEnableButtonLabel": string;
         "fullscreenDisableButtonLabel": string;
         "height": string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getflip/swirl-ai",
-  "version": "0.525.0",
+  "version": "0.527.0",
   "description": "Swirl Design System AI package with artifacts for AI agents",
   "author": "Flip GmbH",
   "repository": {
@@ -26,7 +26,7 @@
     "lint": "tsc --noEmit"
   },
   "devDependencies": {
-    "@getflip/swirl-components": "0.525.0",
+    "@getflip/swirl-components": "0.527.0",
     "@getflip/swirl-tokens": "2.14.3",
     "@types/node": "25.3.0",
     "tsx": "^4.7.0",