@getflip/swirl-ai 0.483.0 → 0.485.0

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

@@ -28,6 +28,7 @@ The SwirlAppLayout component provides a basic layout used by app integrations to
 - `sidebarCloseButtonLabel` (string | undefined) – 
 - `sidebarHeading` (string | undefined) – 
 - `sidebarPositioning` ("auto" | "overlay" | undefined) – 
+- `sidebarWidth` (string | undefined) – 
 - `transitionStyle` (string | undefined) – 
 
 ## Slots

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

@@ -11,12 +11,18 @@ The SwirlThumbnail component is used to visually represent an object via a small
 
 ## 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) – 
 - `editButtonIcon` (string | undefined) – 
 - `editButtonLabel` (string | undefined) – 
+- `error` (boolean | undefined) – 
 - `format` ("landscape" | "portrait" | "square" | undefined) – 
 - `interactive` (boolean | undefined) – 
+- `menuButtonLabel` (string | undefined) – 
+- `openButtonIcon` (string | undefined) – 
+- `openButtonLabel` (string | undefined) – 
 - `progress` (number | undefined) – 
 - `progressLabel` (string | undefined) – 
+- `removeButtonIcon` (string | undefined) – 
 - `removeButtonLabel` (string | undefined) – 
 - `showEditButton` (boolean | undefined) – 
 - `showRemoveButton` (boolean | undefined) – 
@@ -44,12 +50,17 @@ No related components.
 ## Accessibility
 
 SwirlThumbnail is a presentational image wrapper with no ARIA attributes or
-keyboard-specific behavior. Provide an accessible name for the image via slotted
-content or a parent label.
+keyboard-specific behavior by default. When `interactive` is enabled, the image
+becomes a focusable `<button>`. Action buttons rendered by `show-edit-button`
+and `show-remove-button` expose accessible names via the `edit-button-label`
+and `remove-button-label` props. On compact sizes, actions are grouped behind a
+menu button whose label is set via the `menu-button-label` prop.
 
 ### Keyboard
 
-No component-specific keyboard behavior.
+When action buttons or the compact menu button receive keyboard focus, they
+become visible. The compact menu button opens a popover that can be navigated
+with standard keyboard controls.
 
 ## Minimal example
 

package/dist/custom-elements.manifest.json

@@ -1323,6 +1323,13 @@
               "default": "\"auto\"",
               "fieldName": "sidebarPositioning"
             },
+            {
+              "name": "sidebar-width",
+              "type": {
+                "text": "string | undefined"
+              },
+              "fieldName": "sidebarWidth"
+            },
             {
               "name": "transition-style",
               "type": {
@@ -1520,6 +1527,15 @@
               "readonly": true,
               "attribute": "sidebar-positioning"
             },
+            {
+              "kind": "field",
+              "name": "sidebarWidth",
+              "type": {
+                "text": "string | undefined"
+              },
+              "readonly": true,
+              "attribute": "sidebar-width"
+            },
             {
               "kind": "field",
               "name": "transitionStyle",
@@ -59470,6 +59486,20 @@
               },
               "fieldName": "alt"
             },
+            {
+              "name": "cursor",
+              "type": {
+                "text": "\"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",
+                "references": [
+                  {
+                    "name": "SwirlCursor",
+                    "module": "../../utils"
+                  }
+                ]
+              },
+              "default": "\"pointer\"",
+              "fieldName": "cursor"
+            },
             {
               "name": "edit-button-icon",
               "type": {
@@ -59486,6 +59516,13 @@
               "default": "\"Edit\"",
               "fieldName": "editButtonLabel"
             },
+            {
+              "name": "error",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "fieldName": "error"
+            },
             {
               "name": "format",
               "type": {
@@ -59506,6 +59543,30 @@
               },
               "fieldName": "interactive"
             },
+            {
+              "name": "menu-button-label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "default": "\"More actions\"",
+              "fieldName": "menuButtonLabel"
+            },
+            {
+              "name": "open-button-icon",
+              "type": {
+                "text": "string | undefined"
+              },
+              "default": "\"<swirl-icon-visibility></swirl-icon-visibility>\"",
+              "fieldName": "openButtonIcon"
+            },
+            {
+              "name": "open-button-label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "default": "\"Open\"",
+              "fieldName": "openButtonLabel"
+            },
             {
               "name": "progress",
               "type": {
@@ -59521,6 +59582,14 @@
               "default": "\"Loading progress\"",
               "fieldName": "progressLabel"
             },
+            {
+              "name": "remove-button-icon",
+              "type": {
+                "text": "string | undefined"
+              },
+              "default": "\"<swirl-icon-delete></swirl-icon-delete>\"",
+              "fieldName": "removeButtonIcon"
+            },
             {
               "name": "remove-button-label",
               "type": {
@@ -59581,6 +59650,22 @@
               "readonly": true,
               "attribute": "alt"
             },
+            {
+              "kind": "field",
+              "name": "cursor",
+              "type": {
+                "text": "\"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",
+                "references": [
+                  {
+                    "name": "SwirlCursor",
+                    "module": "../../utils"
+                  }
+                ]
+              },
+              "default": "\"pointer\"",
+              "readonly": true,
+              "attribute": "cursor"
+            },
             {
               "kind": "field",
               "name": "editButtonIcon",
@@ -59601,6 +59686,15 @@
               "readonly": true,
               "attribute": "edit-button-label"
             },
+            {
+              "kind": "field",
+              "name": "error",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "readonly": true,
+              "attribute": "error"
+            },
             {
               "kind": "field",
               "name": "format",
@@ -59625,6 +59719,36 @@
               "readonly": true,
               "attribute": "interactive"
             },
+            {
+              "kind": "field",
+              "name": "menuButtonLabel",
+              "type": {
+                "text": "string | undefined"
+              },
+              "default": "\"More actions\"",
+              "readonly": true,
+              "attribute": "menu-button-label"
+            },
+            {
+              "kind": "field",
+              "name": "openButtonIcon",
+              "type": {
+                "text": "string | undefined"
+              },
+              "default": "\"<swirl-icon-visibility></swirl-icon-visibility>\"",
+              "readonly": true,
+              "attribute": "open-button-icon"
+            },
+            {
+              "kind": "field",
+              "name": "openButtonLabel",
+              "type": {
+                "text": "string | undefined"
+              },
+              "default": "\"Open\"",
+              "readonly": true,
+              "attribute": "open-button-label"
+            },
             {
               "kind": "field",
               "name": "progress",
@@ -59644,6 +59768,16 @@
               "readonly": true,
               "attribute": "progress-label"
             },
+            {
+              "kind": "field",
+              "name": "removeButtonIcon",
+              "type": {
+                "text": "string | undefined"
+              },
+              "default": "\"<swirl-icon-delete></swirl-icon-delete>\"",
+              "readonly": true,
+              "attribute": "remove-button-icon"
+            },
             {
               "kind": "field",
               "name": "removeButtonLabel",
@@ -59744,7 +59878,7 @@
               }
             }
           ],
-          "description": "The SwirlThumbnail component is used to visually represent an object via a small image.\n\nAccessibility\n\nSwirlThumbnail is a presentational image wrapper with no ARIA attributes or\nkeyboard-specific behavior. Provide an accessible name for the image via slotted\ncontent or a parent label.\n\n### Keyboard\n\nNo component-specific keyboard behavior."
+          "description": "The SwirlThumbnail component is used to visually represent an object via a small image.\n\nAccessibility\n\nSwirlThumbnail is a presentational image wrapper with no ARIA attributes or\nkeyboard-specific behavior by default. When `interactive` is enabled, the image\nbecomes a focusable `<button>`. Action buttons rendered by `show-edit-button`\nand `show-remove-button` expose accessible names via the `edit-button-label`\nand `remove-button-label` props. On compact sizes, actions are grouped behind a\nmenu button whose label is set via the `menu-button-label` prop.\n\n### Keyboard\n\nWhen action buttons or the compact menu button receive keyboard focus, they\nbecome visible. The compact menu button opens a popover that can be navigated\nwith standard keyboard controls."
         }
       ],
       "exports": [

package/dist/types/components/swirl-app-layout/swirl-app-layout.d.ts

@@ -38,6 +38,7 @@ export declare class SwirlAppLayout {
     sidebarPositioning?: SwirlAppLayoutSidebarPositioning;
     sidebarCloseButtonLabel?: string;
     sidebarHeading?: string;
+    sidebarWidth?: string;
     transitionStyle?: string;
     contentScrollState: {
         scrollable: boolean;

package/dist/types/components/swirl-app-layout/swirl-app-layout.stories.d.ts

@@ -4,6 +4,9 @@ declare const _default: {
         appName: {
             description: string;
         };
+        sidebarWidth: {
+            description: string;
+        };
         transitionStyle: {
             control: string;
             options: string[];

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

@@ -1,10 +1,11 @@
+import { SwirlCursor } from "../../utils";
 export type SwirlButtonIconPosition = "start" | "end";
 export type SwirlButtonIntent = "default" | "primary" | "critical" | "strong";
 export type SwirlButtonSize = "m" | "l";
 export type SwirlButtonTextAlign = "start" | "center" | "end";
 export type SwirlButtonType = "button" | "submit";
 export type SwirlButtonVariant = "flat" | "ghost" | "plain" | "floating" | "on-image" | "outline" | "translucent";
-export type SwirlButtonCursor = "auto" | "default" | "none" | "context-menu" | "help" | "pointer" | "progress" | "wait" | "cell" | "crosshair" | "text" | "vertical-text" | "alias" | "copy" | "move" | "no-drop" | "not-allowed" | "grab" | "grabbing" | "e-resize" | "n-resize" | "ne-resize" | "nw-resize" | "s-resize" | "se-resize" | "sw-resize" | "w-resize" | "ew-resize" | "ns-resize" | "nesw-resize" | "nwse-resize" | "col-resize" | "row-resize" | "all-scroll" | "zoom-in" | "zoom-out";
+export type SwirlButtonCursor = SwirlCursor;
 /**
  * @slot icon - Icon to be displayed inside the button.
  * @slot tag - Tag to be displayed inside the button.

package/dist/types/components/swirl-image-grid-item/swirl-image-grid-item.d.ts

@@ -39,6 +39,7 @@ export declare class SwirlImageGridItem {
     componentWillLoad(): void;
     componentDidLoad(): void;
     componentDidRender(): void;
+    connectedCallback(): void;
     disconnectedCallback(): void;
     private setupIntersectionObserver;
     private handleIntersectionEntries;

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

@@ -1,14 +1,21 @@
 import { EventEmitter } from "../../stencil-public-runtime";
+import { SwirlCursor } from "../../utils";
 export type SwirlThumbnailFormat = "portrait" | "landscape" | "square";
 export type SwirlThumbnailSize = "s" | "m" | "l" | "xl" | "2xl";
 export declare class SwirlThumbnail {
     alt: string;
+    cursor?: SwirlCursor;
     editButtonIcon?: string;
     editButtonLabel?: string;
+    error?: boolean;
     format?: SwirlThumbnailFormat;
     interactive?: boolean;
+    menuButtonLabel?: string;
+    openButtonIcon?: string;
+    openButtonLabel?: string;
     progress?: number;
     progressLabel?: string;
+    removeButtonIcon?: string;
     removeButtonLabel?: string;
     showEditButton?: boolean;
     showRemoveButton?: boolean;
@@ -18,5 +25,16 @@ export declare class SwirlThumbnail {
     edit: EventEmitter<MouseEvent>;
     remove: EventEmitter<MouseEvent>;
     thumbnailClick: EventEmitter<MouseEvent>;
+    hasHover: boolean;
+    private hoverMediaQuery?;
+    private popoverEl?;
+    private popoverTriggerEl?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    componentDidRender(): void;
+    private onEditClick;
+    private onOpenClick;
+    private onRemoveClick;
+    private onHoverChange;
     render(): any;
 }

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

@@ -1,6 +1,27 @@
 import Docs from "./swirl-thumbnail.mdx";
 declare const _default: {
     argTypes: {
+        editButtonIcon: {
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        removeButtonIcon: {
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        openButtonIcon: {
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
         showEditButton: {
             description: string;
         };
@@ -10,13 +31,8 @@ declare const _default: {
         timestamp: {
             description: string;
         };
-        editButtonIcon: {
-            table: {
-                type: {
-                    detail: string;
-                    summary: string;
-                };
-            };
+        progress: {
+            description: string;
         };
     };
     component: string;

package/dist/types/components.d.ts

@@ -28,7 +28,7 @@ import { SwirlColumnsSpacing } from "./components/swirl-columns/swirl-columns";
 import { SwirlDataCellIntent } from "./components/swirl-data-cell/swirl-data-cell";
 import { WCDatepickerLabels } from "wc-datepicker/dist/types/components/wc-datepicker/wc-datepicker";
 import { SwirlDialogIntent } from "./components/swirl-dialog/swirl-dialog";
-import { SwirlDialogToggleEvent } from "./utils";
+import { SwirlCursor, SwirlDialogToggleEvent } from "./utils";
 import { SwirlEmojiSize } from "./components/swirl-emoji/swirl-emoji.types";
 import { SwirlButtonVariant as SwirlButtonVariant1 } from "./components/swirl-button/swirl-button";
 import { SwirlFileViewerPdfViewMode, SwirlFileViewerPdfZoom } from "./components/swirl-file-viewer/viewers/swirl-file-viewer-pdf/swirl-file-viewer-pdf";
@@ -110,7 +110,7 @@ export { SwirlColumnsSpacing } from "./components/swirl-columns/swirl-columns";
 export { SwirlDataCellIntent } from "./components/swirl-data-cell/swirl-data-cell";
 export { WCDatepickerLabels } from "wc-datepicker/dist/types/components/wc-datepicker/wc-datepicker";
 export { SwirlDialogIntent } from "./components/swirl-dialog/swirl-dialog";
-export { SwirlDialogToggleEvent } from "./utils";
+export { SwirlCursor, SwirlDialogToggleEvent } from "./utils";
 export { SwirlEmojiSize } from "./components/swirl-emoji/swirl-emoji.types";
 export { SwirlButtonVariant as SwirlButtonVariant1 } from "./components/swirl-button/swirl-button";
 export { SwirlFileViewerPdfViewMode, SwirlFileViewerPdfZoom } from "./components/swirl-file-viewer/viewers/swirl-file-viewer-pdf/swirl-file-viewer-pdf";
@@ -357,6 +357,7 @@ export namespace Components {
           * @default "auto"
          */
         "sidebarPositioning"?: SwirlAppLayoutSidebarPositioning;
+        "sidebarWidth"?: string;
         /**
           * Toggle the sidebar
          */
@@ -5337,6 +5338,10 @@ export namespace Components {
     }
     interface SwirlThumbnail {
         "alt": string;
+        /**
+          * @default "pointer"
+         */
+        "cursor"?: SwirlCursor;
         /**
           * @default "<swirl-icon-crop></swirl-icon-crop>"
          */
@@ -5345,16 +5350,33 @@ export namespace Components {
           * @default "Edit"
          */
         "editButtonLabel"?: string;
+        "error"?: boolean;
         /**
           * @default "landscape"
          */
         "format"?: SwirlThumbnailFormat;
         "interactive"?: boolean;
+        /**
+          * @default "More actions"
+         */
+        "menuButtonLabel"?: string;
+        /**
+          * @default "<swirl-icon-visibility></swirl-icon-visibility>"
+         */
+        "openButtonIcon"?: string;
+        /**
+          * @default "Open"
+         */
+        "openButtonLabel"?: string;
         "progress"?: number;
         /**
           * @default "Loading progress"
          */
         "progressLabel"?: string;
+        /**
+          * @default "<swirl-icon-delete></swirl-icon-delete>"
+         */
+        "removeButtonIcon"?: string;
         /**
           * @default "Remove"
          */
@@ -10139,6 +10161,7 @@ declare namespace LocalJSX {
           * @default "auto"
          */
         "sidebarPositioning"?: SwirlAppLayoutSidebarPositioning;
+        "sidebarWidth"?: string;
         /**
           * @default "slides"
          */
@@ -14994,6 +15017,10 @@ declare namespace LocalJSX {
     }
     interface SwirlThumbnail {
         "alt": string;
+        /**
+          * @default "pointer"
+         */
+        "cursor"?: SwirlCursor;
         /**
           * @default "<swirl-icon-crop></swirl-icon-crop>"
          */
@@ -15002,19 +15029,36 @@ declare namespace LocalJSX {
           * @default "Edit"
          */
         "editButtonLabel"?: string;
+        "error"?: boolean;
         /**
           * @default "landscape"
          */
         "format"?: SwirlThumbnailFormat;
         "interactive"?: boolean;
+        /**
+          * @default "More actions"
+         */
+        "menuButtonLabel"?: string;
         "onEdit"?: (event: SwirlThumbnailCustomEvent<MouseEvent>) => void;
         "onRemove"?: (event: SwirlThumbnailCustomEvent<MouseEvent>) => void;
         "onThumbnailClick"?: (event: SwirlThumbnailCustomEvent<MouseEvent>) => void;
+        /**
+          * @default "<swirl-icon-visibility></swirl-icon-visibility>"
+         */
+        "openButtonIcon"?: string;
+        /**
+          * @default "Open"
+         */
+        "openButtonLabel"?: string;
         "progress"?: number;
         /**
           * @default "Loading progress"
          */
         "progressLabel"?: string;
+        /**
+          * @default "<swirl-icon-delete></swirl-icon-delete>"
+         */
+        "removeButtonIcon"?: string;
         /**
           * @default "Remove"
          */
@@ -15287,6 +15331,7 @@ declare namespace LocalJSX {
         "sidebarPositioning": SwirlAppLayoutSidebarPositioning;
         "sidebarCloseButtonLabel": string;
         "sidebarHeading": string;
+        "sidebarWidth": string;
         "transitionStyle": string;
     }
     interface SwirlAutocompleteAttributes {
@@ -17896,12 +17941,18 @@ declare namespace LocalJSX {
     }
     interface SwirlThumbnailAttributes {
         "alt": string;
+        "cursor": SwirlCursor;
         "editButtonIcon": string;
         "editButtonLabel": string;
+        "error": boolean;
         "format": SwirlThumbnailFormat;
         "interactive": boolean;
+        "menuButtonLabel": string;
+        "openButtonIcon": string;
+        "openButtonLabel": string;
         "progress": number;
         "progressLabel": string;
+        "removeButtonIcon": string;
         "removeButtonLabel": string;
         "showEditButton": boolean;
         "showRemoveButton": boolean;

package/dist/types/index.d.ts

@@ -8,4 +8,4 @@ export { SwirlTableDropRowEvent } from "./components/swirl-table/swirl-table";
 export { SwirlOSTheme, SwirlOSThemeChangeEventData, SwirlThemeProviderConfig, SwirlThemeProviderStorage, SwirlTheme as Theme, SwirlThemeDesignToken as ThemeDesignToken, SwirlThemeIcon as ThemeIcon, SwirlThemeImage as ThemeImage, SwirlThemeRgbaColor as ThemeRgbaColor, SwirlThemes as Themes, } from "./components/swirl-theme-provider/swirl-theme-provider.types";
 export { SwirlTreeViewItemKeyboardMoveEvent } from "./components/swirl-tree-view-item/swirl-tree-view-item";
 export { SwirlTreeViewCanDropHandler, SwirlTreeViewDropItemEvent, } from "./components/swirl-tree-view/swirl-tree-view";
-export { SwirlDialogToggleEvent } from "./utils";
+export { SwirlCursor, SwirlDialogToggleEvent } from "./utils";

package/dist/types/utils/body-scroll-lock.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Body scroll lock utility.
+ *
+ * - Non-iOS: sets `overflow: hidden` on body
+ * - iOS: uses `position: fixed` + scroll position preservation
+ *   (iOS Safari ignores `overflow: hidden` on body)
+ *
+ * Uses reference counting so multiple simultaneous locks are safe.
+ */
+export declare function disableBodyScroll(targetElement: Element | null | undefined): void;
+export declare function enableBodyScroll(targetElement: Element | null | undefined): void;

package/dist/types/utils.d.ts

@@ -1,4 +1,5 @@
 import { EventEmitter } from "./stencil-public-runtime";
+export type SwirlCursor = "auto" | "default" | "none" | "context-menu" | "help" | "pointer" | "progress" | "wait" | "cell" | "crosshair" | "text" | "vertical-text" | "alias" | "copy" | "move" | "no-drop" | "not-allowed" | "grab" | "grabbing" | "e-resize" | "n-resize" | "ne-resize" | "nw-resize" | "s-resize" | "se-resize" | "sw-resize" | "w-resize" | "ew-resize" | "ns-resize" | "nesw-resize" | "nwse-resize" | "col-resize" | "row-resize" | "all-scroll" | "zoom-in" | "zoom-out";
 export type SwirlDialogToggleEvent = {
     newState: "open" | "closed";
     dialog: HTMLDialogElement;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getflip/swirl-ai",
-  "version": "0.483.0",
+  "version": "0.485.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.483.0",
+    "@getflip/swirl-components": "0.485.0",
     "@types/node": "25.3.0",
     "tsx": "^4.7.0",
     "typescript": "5.9.3"