@getflip/swirl-ai 0.519.0 → 0.520.0

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

@@ -14,6 +14,7 @@ The SwirlResourceListItem component can be used to represent an object, like med
 - `alignItems` (string | undefined) – 
 - `allowDrag` (boolean | undefined) – 
 - `allowHtml` (boolean | undefined) – 
+- `checkboxLabel` (string | undefined) – 
 - `checked` (boolean | undefined) – 
 - `compact` (boolean | undefined) – 
 - `description` (string | undefined) – 
@@ -36,6 +37,7 @@ The SwirlResourceListItem component can be used to represent an object, like med
 - `meta` (string | undefined) – 
 - `rel` ("external" | "nofollow" | "noindex" | "noopener noreferrer" | "noopener" | "noreferrer" | undefined) – 
 - `selectable` (boolean | undefined) – 
+- `selectionMode` ("checkbox" | "row" | undefined) – 
 - `swirlAriaCurrent` ("date" | "location" | "page" | "step" | "time" | "true" | undefined) – 
 - `swirlAriaLabel` (string | undefined) – 
 - `target` ("_blank" | "_parent" | "_self" | "_top" | undefined) – 
@@ -49,6 +51,7 @@ The SwirlResourceListItem component can be used to represent an object, like med
 
 ## Events
 
+- `activate` – CustomEvent<HTMLSwirlResourceListItemElement>
 - `toggleDrag` – CustomEvent<HTMLSwirlResourceListItemElement>
 - `valueChange` – CustomEvent<boolean>
 
@@ -75,7 +78,7 @@ control.
 | `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.                                              |
+| `role="checkbox"` | Set on the interactive part if used as a checkbox, or on the checkbox itself with `selection-mode="checkbox"`. |
 | `aria-disabled`   | If not used as a link, the `aria-disabled` attribute is set to `true` for the disabled element. |
 
 ### Keyboard
@@ -85,6 +88,11 @@ control.
 | <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. |
 
+With `selection-mode="checkbox"`, <kbd>ENTER</kbd> on the row activates it, and
+<kbd>SPACE</kbd> or <kbd>ENTER</kbd> on the checkbox toggles it. Inside a
+`swirl-resource-list` with grid semantics the checkbox is reached with
+<kbd>TAB</kbd> from the row, while the arrow keys keep moving between rows.
+
 ## Minimal example
 
 ```html

package/dist/custom-elements.manifest.json

@@ -49301,6 +49301,14 @@
               },
               "fieldName": "allowHtml"
             },
+            {
+              "name": "checkbox-label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "default": "\"Select\"",
+              "fieldName": "checkboxLabel"
+            },
             {
               "name": "checked",
               "type": {
@@ -49487,6 +49495,20 @@
               },
               "fieldName": "selectable"
             },
+            {
+              "name": "selection-mode",
+              "type": {
+                "text": "\"checkbox\" | \"row\" | undefined",
+                "references": [
+                  {
+                    "name": "SwirlResourceListItemSelectionMode",
+                    "module": "./swirl-resource-list-item.types"
+                  }
+                ]
+              },
+              "default": "\"row\"",
+              "fieldName": "selectionMode"
+            },
             {
               "name": "swirl-aria-current",
               "type": {
@@ -49565,6 +49587,16 @@
               "readonly": true,
               "attribute": "allow-html"
             },
+            {
+              "kind": "field",
+              "name": "checkboxLabel",
+              "type": {
+                "text": "string | undefined"
+              },
+              "default": "\"Select\"",
+              "readonly": true,
+              "attribute": "checkbox-label"
+            },
             {
               "kind": "field",
               "name": "checked",
@@ -49796,6 +49828,22 @@
               "readonly": true,
               "attribute": "selectable"
             },
+            {
+              "kind": "field",
+              "name": "selectionMode",
+              "type": {
+                "text": "\"checkbox\" | \"row\" | undefined",
+                "references": [
+                  {
+                    "name": "SwirlResourceListItemSelectionMode",
+                    "module": "./swirl-resource-list-item.types"
+                  }
+                ]
+              },
+              "default": "\"row\"",
+              "readonly": true,
+              "attribute": "selection-mode"
+            },
             {
               "kind": "field",
               "name": "swirlAriaCurrent",
@@ -49846,6 +49894,18 @@
             }
           ],
           "events": [
+            {
+              "name": "activate",
+              "type": {
+                "text": "CustomEvent<HTMLSwirlResourceListItemElement>",
+                "references": [
+                  {
+                    "name": "HTMLSwirlResourceListItemElement",
+                    "package": "global:"
+                  }
+                ]
+              }
+            },
             {
               "name": "toggleDrag",
               "type": {
@@ -49884,7 +49944,7 @@
               "name": "resource-list-item__content"
             }
           ],
-          "description": "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).\n\nAccessibility\n\n### ARIA\n\nDepending on the purpose, the item can be used as a button, link or checkbox\ncontrol.\n\n| ARIA              | Usage                                                                                           |\n| ----------------- | ----------------------------------------------------------------------------------------------- |\n| `role=\"row\"`      | Set on the element; for usage inside the SwirlResourceList component.                           |\n| `role=\"gridcell\"` | Set on the inner container element; for usage inside the SwirlResourceList component.           |\n| `role=\"button\"`   | Implicit when used as a button.                                                                 |\n| `role=\"link\"`     | Implicit when used as a link.                                                                   |\n| `role=\"checkbox\"` | Set on the interactive part if used as a checkbox.                                              |\n| `aria-disabled`   | If not used as a link, the `aria-disabled` attribute is set to `true` for the disabled element. |\n\n### Keyboard\n\n| Key              | Action                                                                                  |\n| ---------------- | --------------------------------------------------------------------------------------- |\n| <kbd>ENTER</kbd> | Activates the item if used as a button or link.                                         |\n| <kbd>SPACE</kbd> | Activates the item if used as a button or link. Toggles the item if used as a checkbox. |"
+          "description": "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).\n\nAccessibility\n\n### ARIA\n\nDepending on the purpose, the item can be used as a button, link or checkbox\ncontrol.\n\n| ARIA              | Usage                                                                                           |\n| ----------------- | ----------------------------------------------------------------------------------------------- |\n| `role=\"row\"`      | Set on the element; for usage inside the SwirlResourceList component.                           |\n| `role=\"gridcell\"` | Set on the inner container element; for usage inside the SwirlResourceList component.           |\n| `role=\"button\"`   | Implicit when used as a button.                                                                 |\n| `role=\"link\"`     | Implicit when used as a link.                                                                   |\n| `role=\"checkbox\"` | Set on the interactive part if used as a checkbox, or on the checkbox itself with `selection-mode=\"checkbox\"`. |\n| `aria-disabled`   | If not used as a link, the `aria-disabled` attribute is set to `true` for the disabled element. |\n\n### Keyboard\n\n| Key              | Action                                                                                  |\n| ---------------- | --------------------------------------------------------------------------------------- |\n| <kbd>ENTER</kbd> | Activates the item if used as a button or link.                                         |\n| <kbd>SPACE</kbd> | Activates the item if used as a button or link. Toggles the item if used as a checkbox. |\n\nWith `selection-mode=\"checkbox\"`, <kbd>ENTER</kbd> on the row activates it, and\n<kbd>SPACE</kbd> or <kbd>ENTER</kbd> on the checkbox toggles it. Inside a\n`swirl-resource-list` with grid semantics the checkbox is reached with\n<kbd>TAB</kbd> from the row, while the arrow keys keep moving between rows."
         }
       ],
       "exports": [

package/dist/types/components/swirl-resource-list-item/swirl-resource-list-item.d.ts

@@ -1,6 +1,6 @@
 import { EventEmitter } from "../../stencil-public-runtime";
 import { SwirlTooltipPosition } from "../swirl-tooltip/swirl-tooltip";
-import { SwirlResourceListItemAriaCurrent, SwirlResourceListItemLabelWeight, SwirlResourceListItemRel, SwirlResourceListItemTarget } from "./swirl-resource-list-item.types";
+import { SwirlResourceListItemAriaCurrent, SwirlResourceListItemLabelWeight, SwirlResourceListItemRel, SwirlResourceListItemSelectionMode, SwirlResourceListItemTarget } from "./swirl-resource-list-item.types";
 /**
  * @slot control - Used to add a menu button to the item
  * @slot badges - Badges displayed inside the item
@@ -11,6 +11,7 @@ export declare class SwirlResourceListItem {
     active?: boolean;
     allowDrag?: boolean;
     allowHtml?: boolean;
+    checkboxLabel?: string;
     checked?: boolean;
     compact?: boolean;
     description?: string;
@@ -34,6 +35,7 @@ export declare class SwirlResourceListItem {
     meta?: string;
     rel?: SwirlResourceListItemRel;
     selectable?: boolean;
+    selectionMode?: SwirlResourceListItemSelectionMode;
     swirlAriaCurrent?: SwirlResourceListItemAriaCurrent;
     swirlAriaLabel?: string;
     target?: SwirlResourceListItemTarget;
@@ -41,28 +43,34 @@ export declare class SwirlResourceListItem {
     alignItems?: string;
     hasMedia: boolean;
     iconSize: 20 | 24;
+    activate: EventEmitter<HTMLSwirlResourceListItemElement>;
     toggleDrag: EventEmitter<HTMLSwirlResourceListItemElement>;
     valueChange: EventEmitter<boolean>;
+    private checkboxEl;
     private elementId;
     private iconEl;
     private mediaQueryUnsubscribe;
     private parentSemantics;
+    private rowHasFocus;
     componentWillLoad(): void;
     componentDidLoad(): void;
+    componentDidRender(): void;
     disconnectedCallback(): void;
+    onFocusIn(): void;
+    onFocusOut(event: FocusEvent): void;
+    private get hasInteractiveCheckbox();
     private get hasBadges();
     private get showMeta();
     private forceIconProps;
     private updateIconSize;
     private updateMediaState;
     private getControl;
-    private makeControlFocusable;
-    private makeControlUnfocusable;
+    private syncTabIndex;
     private onClick;
-    private onBlur;
-    private onFocus;
     private onMenuTriggerClick;
     private onDragHandleKeyDown;
     private onControlClick;
+    private onCheckboxClick;
+    private toggle;
     render(): any;
 }

package/dist/types/components/swirl-resource-list-item/swirl-resource-list-item.types.d.ts

@@ -9,4 +9,5 @@ export declare const swirlResourceListItemRel: {
     readonly noreferrer: "noreferrer";
 };
 export type SwirlResourceListItemRel = (typeof swirlResourceListItemRel)[keyof typeof swirlResourceListItemRel];
+export type SwirlResourceListItemSelectionMode = "row" | "checkbox";
 export type SwirlResourceListItemTarget = "_self" | "_blank" | "_parent" | "_top";

package/dist/types/components.d.ts

@@ -58,7 +58,7 @@ import { SwirlPopover } from "./components/swirl-popover/swirl-popover";
 import { SwirlProgressIndicatorSize, SwirlProgressIndicatorVariant } from "./components/swirl-progress-indicator/swirl-progress-indicator";
 import { SwirlRadioState, SwirlRadioVariant } from "./components/swirl-radio/swirl-radio";
 import { SwirlBoxPadding as SwirlBoxPadding1, SwirlResourceListSemantics } from "./components/swirl-resource-list/swirl-resource-list";
-import { SwirlResourceListItemAriaCurrent, SwirlResourceListItemLabelWeight, SwirlResourceListItemRel, SwirlResourceListItemTarget } from "./components/swirl-resource-list-item/swirl-resource-list-item.types";
+import { SwirlResourceListItemAriaCurrent, SwirlResourceListItemLabelWeight, SwirlResourceListItemRel, SwirlResourceListItemSelectionMode, SwirlResourceListItemTarget } from "./components/swirl-resource-list-item/swirl-resource-list-item.types";
 import { SwirlTooltipPosition } from "./components/swirl-tooltip/swirl-tooltip";
 import { SwirlSearchVariant } from "./components/swirl-search/swirl-search";
 import { SwirlSeparatorColor, SwirlSeparatorOrientation, SwirlSeparatorSemantics, SwirlSeparatorSpacing as SwirlSeparatorSpacing1 } from "./components/swirl-separator/swirl-separator";
@@ -142,7 +142,7 @@ export { SwirlPopover } from "./components/swirl-popover/swirl-popover";
 export { SwirlProgressIndicatorSize, SwirlProgressIndicatorVariant } from "./components/swirl-progress-indicator/swirl-progress-indicator";
 export { SwirlRadioState, SwirlRadioVariant } from "./components/swirl-radio/swirl-radio";
 export { SwirlBoxPadding as SwirlBoxPadding1, SwirlResourceListSemantics } from "./components/swirl-resource-list/swirl-resource-list";
-export { SwirlResourceListItemAriaCurrent, SwirlResourceListItemLabelWeight, SwirlResourceListItemRel, SwirlResourceListItemTarget } from "./components/swirl-resource-list-item/swirl-resource-list-item.types";
+export { SwirlResourceListItemAriaCurrent, SwirlResourceListItemLabelWeight, SwirlResourceListItemRel, SwirlResourceListItemSelectionMode, SwirlResourceListItemTarget } from "./components/swirl-resource-list-item/swirl-resource-list-item.types";
 export { SwirlTooltipPosition } from "./components/swirl-tooltip/swirl-tooltip";
 export { SwirlSearchVariant } from "./components/swirl-search/swirl-search";
 export { SwirlSeparatorColor, SwirlSeparatorOrientation, SwirlSeparatorSemantics, SwirlSeparatorSpacing as SwirlSeparatorSpacing1 } from "./components/swirl-separator/swirl-separator";
@@ -4285,6 +4285,10 @@ export namespace Components {
         "alignItems"?: string;
         "allowDrag"?: boolean;
         "allowHtml"?: boolean;
+        /**
+          * @default "Select"
+         */
+        "checkboxLabel"?: string;
         /**
           * @default false
          */
@@ -4329,6 +4333,10 @@ export namespace Components {
         "meta"?: string;
         "rel"?: SwirlResourceListItemRel;
         "selectable"?: boolean;
+        /**
+          * @default "row"
+         */
+        "selectionMode"?: SwirlResourceListItemSelectionMode;
         "swirlAriaCurrent"?: SwirlResourceListItemAriaCurrent;
         "swirlAriaLabel"?: string;
         "target"?: SwirlResourceListItemTarget;
@@ -8943,6 +8951,7 @@ declare global {
         new (): HTMLSwirlResourceListFileItemElement;
     };
     interface HTMLSwirlResourceListItemElementEventMap {
+        "activate": HTMLSwirlResourceListItemElement;
         "toggleDrag": HTMLSwirlResourceListItemElement;
         "valueChange": boolean;
     }
@@ -14654,6 +14663,10 @@ declare namespace LocalJSX {
         "alignItems"?: string;
         "allowDrag"?: boolean;
         "allowHtml"?: boolean;
+        /**
+          * @default "Select"
+         */
+        "checkboxLabel"?: string;
         /**
           * @default false
          */
@@ -14696,10 +14709,15 @@ declare namespace LocalJSX {
          */
         "menuTriggerLabel"?: string;
         "meta"?: string;
+        "onActivate"?: (event: SwirlResourceListItemCustomEvent<HTMLSwirlResourceListItemElement>) => void;
         "onToggleDrag"?: (event: SwirlResourceListItemCustomEvent<HTMLSwirlResourceListItemElement>) => void;
         "onValueChange"?: (event: SwirlResourceListItemCustomEvent<boolean>) => void;
         "rel"?: SwirlResourceListItemRel;
         "selectable"?: boolean;
+        /**
+          * @default "row"
+         */
+        "selectionMode"?: SwirlResourceListItemSelectionMode;
         "swirlAriaCurrent"?: SwirlResourceListItemAriaCurrent;
         "swirlAriaLabel"?: string;
         "target"?: SwirlResourceListItemTarget;
@@ -18369,6 +18387,7 @@ declare namespace LocalJSX {
         "active": boolean;
         "allowDrag": boolean;
         "allowHtml": boolean;
+        "checkboxLabel": string;
         "checked": boolean;
         "compact": boolean;
         "description": string;
@@ -18392,6 +18411,7 @@ declare namespace LocalJSX {
         "meta": string;
         "rel": SwirlResourceListItemRel;
         "selectable": boolean;
+        "selectionMode": SwirlResourceListItemSelectionMode;
         "swirlAriaCurrent": SwirlResourceListItemAriaCurrent;
         "swirlAriaLabel": string;
         "target": SwirlResourceListItemTarget;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getflip/swirl-ai",
-  "version": "0.519.0",
+  "version": "0.520.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.519.0",
+    "@getflip/swirl-components": "0.520.0",
     "@getflip/swirl-tokens": "2.14.3",
     "@types/node": "25.3.0",
     "tsx": "^4.7.0",