@getflip/swirl-ai 0.528.0 → 0.529.0

package/dist/agent/components/swirl-popover-trigger.md

@@ -14,6 +14,7 @@ The SwirlPopoverTrigger component is used to position and open a referenced [Swi
 - `hoverDelay` (number | undefined) – 
 - `hoverLingerDuration` (number | undefined) – 
 - `setAriaAttributes` (boolean | undefined) – 
+- `trigger` (SwirlPopoverTriggerMethod[] | string | undefined) – 
 - `triggerOnClick` (boolean | undefined) – 
 - `triggerOnHover` (boolean | undefined) – 
 - `parentScrollContainer` (HTMLElement | undefined) – 
@@ -48,8 +49,14 @@ _None._
 
 ### Keyboard
 
-Keyboard behavior is defined by the associated SwirlPopover (e.g. Enter/Space to
-open, Escape to close).
+| Key                        | Function                                                                    |
+| --------------------------- | ---------------------------------------------------------------------------- |
+| <kbd>Tab</kbd>              | Moves focus to the trigger, opening the popover when `"focus"` is active.   |
+| <kbd>Escape</kbd>           | Closes the popover while the trigger has focus.                            |
+| <kbd>Enter</kbd>/<kbd>Space</kbd> | Toggles the popover when `"click"` is active (native button behavior). |
+
+Further keyboard behavior (moving focus within the popover, closing on
+outside click) is defined by the associated SwirlPopover.
 
 ## Minimal example
 

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

@@ -79,6 +79,11 @@ The SwirlPopover component is used to display small non-modal dialogs or menus.
 - After closing, the focus is returned to the trigger.
 - Moving focus outside the popover closes it.
 
+⚠️ **Hover/focus-triggered popovers behave differently:** when opened via
+[swirl-popover-trigger](?path=/docs/components-swirlpopovertrigger--docs)'s
+`"hover"` or `"focus"` trigger, focus is never moved into the popover content,
+and focus is never returned to the trigger on close.
+
 ## Minimal example
 
 ```html

package/dist/custom-elements.manifest.json

@@ -48311,7 +48311,7 @@
                 {
                   "name": "via",
                   "type": {
-                    "text": "\"click\" | \"hover\" | \"programmatic\"",
+                    "text": "\"click\" | \"focus\" | \"hover\" | \"programmatic\"",
                     "references": [
                       {
                         "name": "Promise",
@@ -48374,7 +48374,7 @@
                 {
                   "name": "via",
                   "type": {
-                    "text": "\"click\" | \"hover\" | \"programmatic\"",
+                    "text": "\"click\" | \"focus\" | \"hover\" | \"programmatic\"",
                     "references": [
                       {
                         "name": "Promise",
@@ -48445,7 +48445,7 @@
               "name": "popover__scroll-container"
             }
           ],
-          "description": "The SwirlPopover component is used to display small non-modal dialogs or menus.\n\nAccessibility\n\n### ARIA\n\n| ARIA            | Usage                                                   |\n| --------------- | ------------------------------------------------------- |\n| `role=\"dialog\"` | The popover content has `role` set to `dialog`.         |\n| `aria-label`    | Describes the popover content.                          |\n| `aria-controls` | Associates the popover and its trigger.                 |\n| `aria-expanded` | Used on the trigger to convey the state of the popover. |\n| `aria-haspopup` | Set on the trigger to denote that it opens a popover.   |\n\n### Keyboard\n\n| Key              | Action                                       |\n| ---------------- | -------------------------------------------- |\n| <kbd>ENTER</kbd> | Activates the trigger and opens the popover. |\n| <kbd>SPACE</kbd> | Activates the trigger and opens the popover. |\n| <kbd>ESC</kbd>   | Closes the popover.                          |\n\n### Focus handling\n\n- Focus is moved to the popover content when opened.\n- After closing, the focus is returned to the trigger.\n- Moving focus outside the popover closes it."
+          "description": "The SwirlPopover component is used to display small non-modal dialogs or menus.\n\nAccessibility\n\n### ARIA\n\n| ARIA            | Usage                                                   |\n| --------------- | ------------------------------------------------------- |\n| `role=\"dialog\"` | The popover content has `role` set to `dialog`.         |\n| `aria-label`    | Describes the popover content.                          |\n| `aria-controls` | Associates the popover and its trigger.                 |\n| `aria-expanded` | Used on the trigger to convey the state of the popover. |\n| `aria-haspopup` | Set on the trigger to denote that it opens a popover.   |\n\n### Keyboard\n\n| Key              | Action                                       |\n| ---------------- | -------------------------------------------- |\n| <kbd>ENTER</kbd> | Activates the trigger and opens the popover. |\n| <kbd>SPACE</kbd> | Activates the trigger and opens the popover. |\n| <kbd>ESC</kbd>   | Closes the popover.                          |\n\n### Focus handling\n\n- Focus is moved to the popover content when opened.\n- After closing, the focus is returned to the trigger.\n- Moving focus outside the popover closes it.\n\n⚠️ **Hover/focus-triggered popovers behave differently:** when opened via\n[swirl-popover-trigger](?path=/docs/components-swirlpopovertrigger--docs)'s\n`\"hover\"` or `\"focus\"` trigger, focus is never moved into the popover content,\nand focus is never returned to the trigger on close."
         }
       ],
       "exports": [
@@ -48522,13 +48522,26 @@
               },
               "fieldName": "swirlPopover"
             },
+            {
+              "name": "trigger",
+              "type": {
+                "text": "SwirlPopoverTriggerMethod[] | string | undefined",
+                "references": [
+                  {
+                    "name": "SwirlPopoverTriggerMethod"
+                  }
+                ]
+              },
+              "fieldName": "trigger"
+            },
             {
               "name": "trigger-on-click",
               "type": {
                 "text": "boolean | undefined"
               },
               "default": "true",
-              "fieldName": "triggerOnClick"
+              "fieldName": "triggerOnClick",
+              "deprecated": "Please use the \"trigger\" prop instead, e.g. trigger=\"click\"."
             },
             {
               "name": "trigger-on-hover",
@@ -48536,7 +48549,8 @@
                 "text": "boolean | undefined"
               },
               "default": "false",
-              "fieldName": "triggerOnHover"
+              "fieldName": "triggerOnHover",
+              "deprecated": "Please use the \"trigger\" prop instead, e.g. trigger=\"hover focus\"."
             }
           ],
           "members": [
@@ -48611,6 +48625,20 @@
               "readonly": true,
               "attribute": "swirl-popover"
             },
+            {
+              "kind": "field",
+              "name": "trigger",
+              "type": {
+                "text": "SwirlPopoverTriggerMethod[] | string | undefined",
+                "references": [
+                  {
+                    "name": "SwirlPopoverTriggerMethod"
+                  }
+                ]
+              },
+              "readonly": true,
+              "attribute": "trigger"
+            },
             {
               "kind": "field",
               "name": "triggerOnClick",
@@ -48618,6 +48646,7 @@
                 "text": "boolean | undefined"
               },
               "default": "true",
+              "deprecated": "Please use the \"trigger\" prop instead, e.g. trigger=\"click\".",
               "readonly": true,
               "attribute": "trigger-on-click"
             },
@@ -48628,6 +48657,7 @@
                 "text": "boolean | undefined"
               },
               "default": "false",
+              "deprecated": "Please use the \"trigger\" prop instead, e.g. trigger=\"hover focus\".",
               "readonly": true,
               "attribute": "trigger-on-hover"
             }
@@ -48638,7 +48668,7 @@
               "description": "The trigger element (e.g. a button) that opens the popover."
             }
           ],
-          "description": "The SwirlPopoverTrigger component is used to position and open a referenced [SwirlPopover component](?path=/docs/components-swirlpopover--docs).\n\nAccessibility\n\n### ARIA\n\n| ARIA            | Usage                                                                |\n| --------------- | -------------------------------------------------------------------- |\n| `aria-controls` | Set on the wrapped trigger element, referencing the popover element. |\n| `aria-expanded` | Set on the wrapped trigger element.                                  |\n| `aria-haspopup` | Set to \"dialog\" on the wrapped trigger element.                      |\n\n### Keyboard\n\nKeyboard behavior is defined by the associated SwirlPopover (e.g. Enter/Space to\nopen, Escape to close)."
+          "description": "The SwirlPopoverTrigger component is used to position and open a referenced [SwirlPopover component](?path=/docs/components-swirlpopover--docs).\n\nAccessibility\n\n### ARIA\n\n| ARIA            | Usage                                                                |\n| --------------- | -------------------------------------------------------------------- |\n| `aria-controls` | Set on the wrapped trigger element, referencing the popover element. |\n| `aria-expanded` | Set on the wrapped trigger element.                                  |\n| `aria-haspopup` | Set to \"dialog\" on the wrapped trigger element.                      |\n\n### Keyboard\n\n| Key                        | Function                                                                    |\n| --------------------------- | ---------------------------------------------------------------------------- |\n| <kbd>Tab</kbd>              | Moves focus to the trigger, opening the popover when `\"focus\"` is active.   |\n| <kbd>Escape</kbd>           | Closes the popover while the trigger has focus.                            |\n| <kbd>Enter</kbd>/<kbd>Space</kbd> | Toggles the popover when `\"click\"` is active (native button behavior). |\n\nFurther keyboard behavior (moving focus within the popover, closing on\noutside click) is defined by the associated SwirlPopover."
         }
       ],
       "exports": [

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

@@ -1,7 +1,7 @@
 import { ComputePositionReturn, Placement } from "@floating-ui/dom";
 import { EventEmitter } from "../../stencil-public-runtime";
 export type SwirlPopoverAnimation = "fade-in" | "scale-in-xy" | "scale-in-y";
-export type SwirlPopoverControlMethod = "click" | "hover" | "programmatic";
+export type SwirlPopoverControlMethod = "click" | "hover" | "focus" | "programmatic";
 declare const swirlPopoverBorderRadiusTokens: readonly ["xs", "sm", "base", "l", "xl"];
 export type SwirlPopoverBorderRadius = (typeof swirlPopoverBorderRadiusTokens)[number] | string;
 /** Mirrors {@link https://floating-ui.com/docs/flip#fallbackaxissidedirection Floating UI `flip`}. */

package/dist/types/components/swirl-popover-trigger/swirl-popover-trigger.d.ts

@@ -1,4 +1,5 @@
 import { SwirlPopover } from "../swirl-popover/swirl-popover";
+export type SwirlPopoverTriggerMethod = "click" | "hover" | "focus";
 /**
  * @slot slot - The trigger element (e.g. a button) that opens the popover.
  */
@@ -8,7 +9,10 @@ export declare class SwirlPopoverTrigger {
     parentScrollContainer?: HTMLElement;
     setAriaAttributes?: boolean;
     swirlPopover: string | HTMLSwirlPopoverElement | SwirlPopover;
+    trigger?: SwirlPopoverTriggerMethod[] | string;
+    /** @deprecated Please use the "trigger" prop instead, e.g. trigger="click". */
     triggerOnClick?: boolean;
+    /** @deprecated Please use the "trigger" prop instead, e.g. trigger="hover focus". */
     triggerOnHover?: boolean;
     hoverLingerDuration?: number;
     hoverDelay?: number;
@@ -18,11 +22,15 @@ export declare class SwirlPopoverTrigger {
     private hoverDelayReference?;
     private popoverElRef?;
     private triggerIsActive;
+    private triggerMethods;
     connectedCallback(): void;
+    componentWillLoad(): void;
     componentDidLoad(): void;
     disconnectedCallback(): void;
     watchPopover(): void;
-    watchHover(): void;
+    watchTrigger(): void;
+    private warnAboutDeprecatedProps;
+    private resolveTriggerMethods;
     private getPopoverEl;
     private getTriggerEl;
     private setupIntersectionObserver;
@@ -32,13 +40,23 @@ export declare class SwirlPopoverTrigger {
     popoverMouseEnter: () => void;
     popoverMouseLeave: () => void;
     private onMouseenter;
-    private mouseenterHandler;
     private onMouseleave;
     private mouseleaveHandler;
     private startHoverLingerTimer;
     private stopHoverLingerTimer;
     private onClick;
+    private onFocusin;
+    private onFocusout;
+    private onKeyDown;
+    private focusStaysWithin;
+    private ariaOpenHandler;
+    private ariaCloseHandler;
+    private removeAriaSyncListeners;
+    private syncAriaOnNextTransition;
+    private openPopover;
+    private closePopover;
     private updateTriggerElAriaAttributes;
+    private get opensWithoutActivation();
     private isPopoverOpen;
     render(): any;
 }

package/dist/types/components/swirl-popover-trigger/swirl-popover-trigger.stories.d.ts

@@ -7,6 +7,19 @@ declare const _default: {
                 type: string;
             };
         };
+        trigger: {
+            description: string;
+            control: {
+                type: string;
+            };
+            options: string[];
+        };
+        triggerOnClick: {
+            description: string;
+        };
+        triggerOnHover: {
+            description: string;
+        };
     };
     component: string;
     tags: string[];

package/dist/types/components.d.ts

@@ -55,6 +55,7 @@ import { SwirlOptionListItemContext, SwirlOptionListItemRole } from "./component
 import { SwirlPaginationVariant } from "./components/swirl-pagination/swirl-pagination";
 import { SwirlPopoverAnimation, SwirlPopoverBorderRadius, SwirlPopoverControlMethod, SwirlPopoverFallbackAxisSideDirection } from "./components/swirl-popover/swirl-popover";
 import { SwirlPopover } from "./components/swirl-popover/swirl-popover";
+import { SwirlPopoverTriggerMethod } from "./components/swirl-popover-trigger/swirl-popover-trigger";
 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";
@@ -139,6 +140,7 @@ export { SwirlOptionListItemContext, SwirlOptionListItemRole } from "./component
 export { SwirlPaginationVariant } from "./components/swirl-pagination/swirl-pagination";
 export { SwirlPopoverAnimation, SwirlPopoverBorderRadius, SwirlPopoverControlMethod, SwirlPopoverFallbackAxisSideDirection } from "./components/swirl-popover/swirl-popover";
 export { SwirlPopover } from "./components/swirl-popover/swirl-popover";
+export { SwirlPopoverTriggerMethod } from "./components/swirl-popover-trigger/swirl-popover-trigger";
 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";
@@ -4208,11 +4210,14 @@ export namespace Components {
          */
         "setAriaAttributes"?: boolean;
         "swirlPopover": string | HTMLSwirlPopoverElement | SwirlPopover;
+        "trigger"?: SwirlPopoverTriggerMethod[] | string;
         /**
+          * @deprecated Please use the "trigger" prop instead, e.g. trigger="click".
           * @default true
          */
         "triggerOnClick"?: boolean;
         /**
+          * @deprecated Please use the "trigger" prop instead, e.g. trigger="hover focus".
           * @default false
          */
         "triggerOnHover"?: boolean;
@@ -14629,11 +14634,14 @@ declare namespace LocalJSX {
          */
         "setAriaAttributes"?: boolean;
         "swirlPopover": string | HTMLSwirlPopoverElement | SwirlPopover;
+        "trigger"?: SwirlPopoverTriggerMethod[] | string;
         /**
+          * @deprecated Please use the "trigger" prop instead, e.g. trigger="click".
           * @default true
          */
         "triggerOnClick"?: boolean;
         /**
+          * @deprecated Please use the "trigger" prop instead, e.g. trigger="hover focus".
           * @default false
          */
         "triggerOnHover"?: boolean;
@@ -18429,6 +18437,7 @@ declare namespace LocalJSX {
         "hidePopoverWhenInvisible": boolean;
         "setAriaAttributes": boolean;
         "swirlPopover": string | HTMLSwirlPopoverElement | SwirlPopover;
+        "trigger": SwirlPopoverTriggerMethod[] | string;
         "triggerOnClick": boolean;
         "triggerOnHover": boolean;
         "hoverLingerDuration": number;

package/package.json

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