@getflip/swirl-ai 0.523.0 → 0.524.0

package/dist/agent/components/swirl-avatar-group.md

@@ -12,7 +12,7 @@ _None._
 
 - `badge` (string | undefined) – 
 - `label` (string | undefined) – 
-- `layout` ("diagonal" | "horizontal" | undefined) – 
+- `layout` ("centered" | "diagonal" | "horizontal" | undefined) – 
 - `semantics` ("group" | "list" | undefined) – 
 
 ## Slots

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

@@ -17,6 +17,7 @@ The SwirlDialog component is used to overlay the user interface with content tha
 - `returnFocusTo` (HTMLElement | string | undefined) – 
 - `secondaryActionLabel` (string | undefined) – 
 - `size` ("default" | "large" | undefined) – 
+- `translucent` (boolean | undefined) – 
 
 ## Slots
 

package/dist/agent/components/swirl-icon-volume-off.md

@@ -0,0 +1,50 @@
+# `<swirl-icon-volume-off>`
+
+## Purpose
+
+Custom element: swirl-icon-volume-off.
+
+## Required props
+
+_None._
+
+## Optional props
+
+- `color` ("critical" | "default" | "disabled" | "highlight" | "info" | "on-action-primary" | "on-image" | "on-status" | "on-surface-highlight" | "on-surface-highlight-subdued" | "strong" | "success" | "warning" | undefined) – 
+- `label` (string | undefined) – 
+- `size` (16 | 20 | 24 | 28 | undefined) – 
+
+## Slots
+
+_None._
+
+## Events
+
+_None._
+
+## Methods
+
+_None._
+
+## Related components
+
+_See description for usage context._
+
+## Accessibility
+
+_See full docs for accessibility details._
+
+## Minimal example
+
+```html
+<swirl-icon-volume-off></swirl-icon-volume-off>
+```
+
+## Usage example
+
+_No usage example in docs._
+
+## Common mistakes
+
+- Ensure required props are set.
+- Use only allowed slot names and child components where documented.

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

@@ -17,6 +17,7 @@ The SwirlPopover component is used to display small non-modal dialogs or menus.
 - `fallbackAxisSideDirection` ("end" | "none" | "start" | undefined) – 
 - `fullscreenBottomSheet` (boolean | undefined) – 
 - `maxHeight` (string | undefined) – 
+- `mobileBottomSheet` (boolean | undefined) – 
 - `offset` (number | number[] | undefined) – 
 - `padded` (boolean | undefined) – 
 - `placement` ("bottom" | "bottom-end" | "bottom-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start" | undefined) – 

package/dist/agent/components/swirl-progress-indicator.md

@@ -10,7 +10,7 @@ The SwirlProgressIndicator component is used to display the progress of a long r
 
 ## Optional props
 
-- `size` ("m" | "s" | "xs" | undefined) – 
+- `size` ("l" | "m" | "s" | "xs" | undefined) – 
 - `value` (number | undefined) – 
 - `variant` ("bar" | "circle" | undefined) – 
 

package/dist/agent/components-index.json

@@ -1318,6 +1318,10 @@
       "tag": "swirl-icon-voice",
       "summary": "swirl-icon-voice"
     },
+    {
+      "tag": "swirl-icon-volume-off",
+      "summary": "swirl-icon-volume-off"
+    },
     {
       "tag": "swirl-icon-volume-up",
       "summary": "swirl-icon-volume-up"

package/dist/custom-elements.manifest.json

@@ -2535,7 +2535,7 @@
             {
               "name": "layout",
               "type": {
-                "text": "\"diagonal\" | \"horizontal\" | undefined",
+                "text": "\"centered\" | \"diagonal\" | \"horizontal\" | undefined",
                 "references": [
                   {
                     "name": "SwirlAvatarGroupLayout"
@@ -2582,7 +2582,7 @@
               "kind": "field",
               "name": "layout",
               "type": {
-                "text": "\"diagonal\" | \"horizontal\" | undefined",
+                "text": "\"centered\" | \"diagonal\" | \"horizontal\" | undefined",
                 "references": [
                   {
                     "name": "SwirlAvatarGroupLayout"
@@ -7961,6 +7961,13 @@
               },
               "default": "\"default\"",
               "fieldName": "size"
+            },
+            {
+              "name": "translucent",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "fieldName": "translucent"
             }
           ],
           "members": [
@@ -8061,6 +8068,15 @@
               "readonly": true,
               "attribute": "size"
             },
+            {
+              "kind": "field",
+              "name": "translucent",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "readonly": true,
+              "attribute": "translucent"
+            },
             {
               "kind": "method",
               "name": "close",
@@ -8185,6 +8201,9 @@
             },
             {
               "name": "dialog__heading"
+            },
+            {
+              "name": "dialog__scroll-container"
             }
           ],
           "description": "The SwirlDialog component is used to overlay the user interface with content that needs the user's confirmation or action.\n\nAccessibility\n\n### ARIA\n\nThe component follows the\n[WAI-ARIA Alert and Message Dialogs Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/).\n\n| ARIA                 | Usage                                               |\n| -------------------- | --------------------------------------------------- |\n| `role=\"alertdialog\"` | The dialog has the `alertdialog` role.              |\n| `aria-hidden`        | Set to \"true\" if dialog is hidden.                  |\n| `aria-modal`         | Set to \"true\".                                      |\n| `aria-label`         | Set on the dialog if label is hidden.               |\n| `aria-labelledby`    | Set on the dialog to refer to the dialog's label.   |\n| `aria-describedby`   | Set on the dialog to refer to the dialog's content. |\n\n### Keyboard\n\n| Key                                               | Action                                                                                                  |\n| ------------------------------------------------- | ------------------------------------------------------------------------------------------------------- |\n| <kbd>ESC</kbd>                                    | Closes the dialog.                                                                                      |\n| <kbd>TAB</kbd>, <kbd>SHIFT</kbd> + <kbd>TAB</kbd> | Cycles through the focusable elements inside the dialog. Focus is trapped inside the dialog while open. |\n\n### Focus handling\n\n- Focus is moved to the secondary button when the dialog is opened. If no\n  secondary button is provided, the primary button is focused.\n- After closing, the focus is returned to last the focused element."
@@ -40928,6 +40947,117 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/swirl-icon/icons/swirl-icon-volume-off.tsx",
+      "declarations": [
+        {
+          "kind": "class",
+          "customElement": true,
+          "tagName": "swirl-icon-volume-off",
+          "name": "SwirlIconVolumeOff",
+          "attributes": [
+            {
+              "name": "color",
+              "type": {
+                "text": "\"critical\" | \"default\" | \"disabled\" | \"highlight\" | \"info\" | \"on-action-primary\" | \"on-image\" | \"on-status\" | \"on-surface-highlight\" | \"on-surface-highlight-subdued\" | \"strong\" | \"success\" | \"warning\" | undefined",
+                "references": [
+                  {
+                    "name": "SwirlIconColor",
+                    "module": "../swirl-icon"
+                  }
+                ]
+              },
+              "fieldName": "color"
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "fieldName": "label"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "16 | 20 | 24 | 28 | undefined",
+                "references": [
+                  {
+                    "name": "SwirlIconSize",
+                    "module": "../swirl-icon.types"
+                  }
+                ]
+              },
+              "default": "24",
+              "fieldName": "size"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "color",
+              "type": {
+                "text": "\"critical\" | \"default\" | \"disabled\" | \"highlight\" | \"info\" | \"on-action-primary\" | \"on-image\" | \"on-status\" | \"on-surface-highlight\" | \"on-surface-highlight-subdued\" | \"strong\" | \"success\" | \"warning\" | undefined",
+                "references": [
+                  {
+                    "name": "SwirlIconColor",
+                    "module": "../swirl-icon"
+                  }
+                ]
+              },
+              "readonly": true,
+              "attribute": "color"
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "readonly": true,
+              "attribute": "label"
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "16 | 20 | 24 | 28 | undefined",
+                "references": [
+                  {
+                    "name": "SwirlIconSize",
+                    "module": "../swirl-icon.types"
+                  }
+                ]
+              },
+              "default": "24",
+              "readonly": true,
+              "attribute": "size"
+            }
+          ],
+          "cssParts": [
+            {
+              "name": "icon"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "SwirlIconVolumeOff",
+          "declaration": {
+            "name": "SwirlIconVolumeOff"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "swirl-icon-volume-off",
+          "declaration": {
+            "name": "SwirlIconVolumeOff"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/components/swirl-icon/icons/swirl-icon-volume-up.tsx",
@@ -47578,6 +47708,14 @@
               "default": "\"22rem\"",
               "fieldName": "maxHeight"
             },
+            {
+              "name": "mobile-bottom-sheet",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "default": "true",
+              "fieldName": "mobileBottomSheet"
+            },
             {
               "name": "offset",
               "type": {
@@ -47752,6 +47890,16 @@
               "readonly": true,
               "attribute": "max-height"
             },
+            {
+              "kind": "field",
+              "name": "mobileBottomSheet",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "default": "true",
+              "readonly": true,
+              "attribute": "mobile-bottom-sheet"
+            },
             {
               "kind": "field",
               "name": "offset",
@@ -48324,7 +48472,7 @@
             {
               "name": "size",
               "type": {
-                "text": "\"m\" | \"s\" | \"xs\" | undefined",
+                "text": "\"l\" | \"m\" | \"s\" | \"xs\" | undefined",
                 "references": [
                   {
                     "name": "SwirlProgressIndicatorSize"
@@ -48370,7 +48518,7 @@
               "kind": "field",
               "name": "size",
               "type": {
-                "text": "\"m\" | \"s\" | \"xs\" | undefined",
+                "text": "\"l\" | \"m\" | \"s\" | \"xs\" | undefined",
                 "references": [
                   {
                     "name": "SwirlProgressIndicatorSize"

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

@@ -1,4 +1,4 @@
-export type SwirlAvatarGroupLayout = "diagonal" | "horizontal";
+export type SwirlAvatarGroupLayout = "centered" | "diagonal" | "horizontal";
 export type SwirlAvatarGroupSemantics = "list" | "group";
 /**
  * @slot slot - Your avatar components
@@ -14,5 +14,6 @@ export declare class SwirlAvatarGroup {
     private forceBadgeProps;
     private onSlotChange;
     private layOutAvatars;
+    private getCenteredArrangement;
     render(): any;
 }

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

@@ -23,3 +23,4 @@ export default _default;
 export declare const SwirlAvatarGroup: any;
 export declare const WithHorizontalLayout: any;
 export declare const WithSquareAvatars: any;
+export declare const WithCenteredLayout: any;

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

@@ -17,6 +17,7 @@ export declare class SwirlDialog {
     primaryActionLabel?: string;
     returnFocusTo?: HTMLElement | string;
     secondaryActionLabel?: string;
+    translucent?: boolean;
     dialogClose: EventEmitter<void>;
     dialogOpen: EventEmitter<void>;
     primaryAction: EventEmitter<MouseEvent>;

package/dist/types/components/swirl-icon/icons/swirl-icon-volume-off.d.ts

@@ -0,0 +1,8 @@
+import { SwirlIconSize } from "../swirl-icon.types";
+import { SwirlIconColor } from "../swirl-icon";
+export declare class SwirlIconVolumeOff {
+    color?: SwirlIconColor;
+    label?: string;
+    size: SwirlIconSize;
+    render(): any;
+}

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

@@ -18,6 +18,7 @@ export declare class SwirlPopover {
     fullscreenBottomSheet?: boolean;
     label: string;
     maxHeight?: string;
+    mobileBottomSheet?: boolean;
     offset?: number | number[];
     padded?: boolean;
     popoverId?: string;
@@ -69,6 +70,7 @@ export declare class SwirlPopover {
      */
     toggle(triggerEl?: HTMLElement, via?: SwirlPopoverControlMethod): Promise<void>;
     togglePopover: (event: Event) => void;
+    private get bottomSheetActive();
     private connectTrigger;
     private getNativeTriggerElement;
     private onKeydown;

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

@@ -5,6 +5,10 @@ declare const _default: {
             description: string;
             name: string;
         };
+        mobileBottomSheet: {
+            description: string;
+            name: string;
+        };
         offset: {
             description: string;
             control: {

package/dist/types/components/swirl-progress-indicator/swirl-progress-indicator.d.ts

@@ -1,4 +1,4 @@
-export type SwirlProgressIndicatorSize = "xs" | "s" | "m";
+export type SwirlProgressIndicatorSize = "xs" | "s" | "m" | "l";
 export type SwirlProgressIndicatorVariant = "bar" | "circle";
 export declare class SwirlProgressIndicator {
     label: string;

package/dist/types/components.d.ts

@@ -969,6 +969,7 @@ export namespace Components {
           * @default "default"
          */
         "size"?: SwirlDialogSize;
+        "translucent"?: boolean;
     }
     interface SwirlEmoji {
         /**
@@ -3439,6 +3440,14 @@ export namespace Components {
          */
         "size": SwirlIconSize;
     }
+    interface SwirlIconVolumeOff {
+        "color"?: SwirlIconColor1;
+        "label"?: string;
+        /**
+          * @default 24
+         */
+        "size": SwirlIconSize;
+    }
     interface SwirlIconVolumeUp {
         "color"?: SwirlIconColor1;
         "label"?: string;
@@ -4128,6 +4137,10 @@ export namespace Components {
           * @default "22rem"
          */
         "maxHeight"?: string;
+        /**
+          * @default true
+         */
+        "mobileBottomSheet"?: boolean;
         /**
           * @default 8
          */
@@ -8356,6 +8369,12 @@ declare global {
         prototype: HTMLSwirlIconVoiceElement;
         new (): HTMLSwirlIconVoiceElement;
     };
+    interface HTMLSwirlIconVolumeOffElement extends Components.SwirlIconVolumeOff, HTMLStencilElement {
+    }
+    var HTMLSwirlIconVolumeOffElement: {
+        prototype: HTMLSwirlIconVolumeOffElement;
+        new (): HTMLSwirlIconVolumeOffElement;
+    };
     interface HTMLSwirlIconVolumeUpElement extends Components.SwirlIconVolumeUp, HTMLStencilElement {
     }
     var HTMLSwirlIconVolumeUpElement: {
@@ -10453,6 +10472,7 @@ declare global {
         "swirl-icon-visibility": HTMLSwirlIconVisibilityElement;
         "swirl-icon-visibility-off": HTMLSwirlIconVisibilityOffElement;
         "swirl-icon-voice": HTMLSwirlIconVoiceElement;
+        "swirl-icon-volume-off": HTMLSwirlIconVolumeOffElement;
         "swirl-icon-volume-up": HTMLSwirlIconVolumeUpElement;
         "swirl-icon-warning": HTMLSwirlIconWarningElement;
         "swirl-icon-waving-hand": HTMLSwirlIconWavingHandElement;
@@ -11436,6 +11456,7 @@ declare namespace LocalJSX {
           * @default "default"
          */
         "size"?: SwirlDialogSize;
+        "translucent"?: boolean;
     }
     interface SwirlEmoji {
         /**
@@ -13888,6 +13909,14 @@ declare namespace LocalJSX {
          */
         "size"?: SwirlIconSize;
     }
+    interface SwirlIconVolumeOff {
+        "color"?: SwirlIconColor1;
+        "label"?: string;
+        /**
+          * @default 24
+         */
+        "size"?: SwirlIconSize;
+    }
     interface SwirlIconVolumeUp {
         "color"?: SwirlIconColor1;
         "label"?: string;
@@ -14505,6 +14534,10 @@ declare namespace LocalJSX {
           * @default "22rem"
          */
         "maxHeight"?: string;
+        /**
+          * @default true
+         */
+        "mobileBottomSheet"?: boolean;
         /**
           * @default 8
          */
@@ -16585,6 +16618,7 @@ declare namespace LocalJSX {
         "primaryActionLabel": string;
         "returnFocusTo": HTMLElement | string;
         "secondaryActionLabel": string;
+        "translucent": boolean;
     }
     interface SwirlEmojiAttributes {
         "label": string;
@@ -18065,6 +18099,11 @@ declare namespace LocalJSX {
         "label": string;
         "size": SwirlIconSize;
     }
+    interface SwirlIconVolumeOffAttributes {
+        "color": SwirlIconColor;
+        "label": string;
+        "size": SwirlIconSize;
+    }
     interface SwirlIconVolumeUpAttributes {
         "color": SwirlIconColor;
         "label": string;
@@ -18309,6 +18348,7 @@ declare namespace LocalJSX {
         "fullscreenBottomSheet": boolean;
         "label": string;
         "maxHeight": string;
+        "mobileBottomSheet": boolean;
         "offset": number | number[];
         "padded": boolean;
         "popoverId": string;
@@ -19450,6 +19490,7 @@ declare namespace LocalJSX {
         "swirl-icon-visibility": Omit<SwirlIconVisibility, keyof SwirlIconVisibilityAttributes> & { [K in keyof SwirlIconVisibility & keyof SwirlIconVisibilityAttributes]?: SwirlIconVisibility[K] } & { [K in keyof SwirlIconVisibility & keyof SwirlIconVisibilityAttributes as `attr:${K}`]?: SwirlIconVisibilityAttributes[K] } & { [K in keyof SwirlIconVisibility & keyof SwirlIconVisibilityAttributes as `prop:${K}`]?: SwirlIconVisibility[K] };
         "swirl-icon-visibility-off": Omit<SwirlIconVisibilityOff, keyof SwirlIconVisibilityOffAttributes> & { [K in keyof SwirlIconVisibilityOff & keyof SwirlIconVisibilityOffAttributes]?: SwirlIconVisibilityOff[K] } & { [K in keyof SwirlIconVisibilityOff & keyof SwirlIconVisibilityOffAttributes as `attr:${K}`]?: SwirlIconVisibilityOffAttributes[K] } & { [K in keyof SwirlIconVisibilityOff & keyof SwirlIconVisibilityOffAttributes as `prop:${K}`]?: SwirlIconVisibilityOff[K] };
         "swirl-icon-voice": Omit<SwirlIconVoice, keyof SwirlIconVoiceAttributes> & { [K in keyof SwirlIconVoice & keyof SwirlIconVoiceAttributes]?: SwirlIconVoice[K] } & { [K in keyof SwirlIconVoice & keyof SwirlIconVoiceAttributes as `attr:${K}`]?: SwirlIconVoiceAttributes[K] } & { [K in keyof SwirlIconVoice & keyof SwirlIconVoiceAttributes as `prop:${K}`]?: SwirlIconVoice[K] };
+        "swirl-icon-volume-off": Omit<SwirlIconVolumeOff, keyof SwirlIconVolumeOffAttributes> & { [K in keyof SwirlIconVolumeOff & keyof SwirlIconVolumeOffAttributes]?: SwirlIconVolumeOff[K] } & { [K in keyof SwirlIconVolumeOff & keyof SwirlIconVolumeOffAttributes as `attr:${K}`]?: SwirlIconVolumeOffAttributes[K] } & { [K in keyof SwirlIconVolumeOff & keyof SwirlIconVolumeOffAttributes as `prop:${K}`]?: SwirlIconVolumeOff[K] };
         "swirl-icon-volume-up": Omit<SwirlIconVolumeUp, keyof SwirlIconVolumeUpAttributes> & { [K in keyof SwirlIconVolumeUp & keyof SwirlIconVolumeUpAttributes]?: SwirlIconVolumeUp[K] } & { [K in keyof SwirlIconVolumeUp & keyof SwirlIconVolumeUpAttributes as `attr:${K}`]?: SwirlIconVolumeUpAttributes[K] } & { [K in keyof SwirlIconVolumeUp & keyof SwirlIconVolumeUpAttributes as `prop:${K}`]?: SwirlIconVolumeUp[K] };
         "swirl-icon-warning": Omit<SwirlIconWarning, keyof SwirlIconWarningAttributes> & { [K in keyof SwirlIconWarning & keyof SwirlIconWarningAttributes]?: SwirlIconWarning[K] } & { [K in keyof SwirlIconWarning & keyof SwirlIconWarningAttributes as `attr:${K}`]?: SwirlIconWarningAttributes[K] } & { [K in keyof SwirlIconWarning & keyof SwirlIconWarningAttributes as `prop:${K}`]?: SwirlIconWarning[K] };
         "swirl-icon-waving-hand": Omit<SwirlIconWavingHand, keyof SwirlIconWavingHandAttributes> & { [K in keyof SwirlIconWavingHand & keyof SwirlIconWavingHandAttributes]?: SwirlIconWavingHand[K] } & { [K in keyof SwirlIconWavingHand & keyof SwirlIconWavingHandAttributes as `attr:${K}`]?: SwirlIconWavingHandAttributes[K] } & { [K in keyof SwirlIconWavingHand & keyof SwirlIconWavingHandAttributes as `prop:${K}`]?: SwirlIconWavingHand[K] };
@@ -20007,6 +20048,7 @@ declare module "@stencil/core" {
             "swirl-icon-visibility": LocalJSX.IntrinsicElements["swirl-icon-visibility"] & JSXBase.HTMLAttributes<HTMLSwirlIconVisibilityElement>;
             "swirl-icon-visibility-off": LocalJSX.IntrinsicElements["swirl-icon-visibility-off"] & JSXBase.HTMLAttributes<HTMLSwirlIconVisibilityOffElement>;
             "swirl-icon-voice": LocalJSX.IntrinsicElements["swirl-icon-voice"] & JSXBase.HTMLAttributes<HTMLSwirlIconVoiceElement>;
+            "swirl-icon-volume-off": LocalJSX.IntrinsicElements["swirl-icon-volume-off"] & JSXBase.HTMLAttributes<HTMLSwirlIconVolumeOffElement>;
             "swirl-icon-volume-up": LocalJSX.IntrinsicElements["swirl-icon-volume-up"] & JSXBase.HTMLAttributes<HTMLSwirlIconVolumeUpElement>;
             "swirl-icon-warning": LocalJSX.IntrinsicElements["swirl-icon-warning"] & JSXBase.HTMLAttributes<HTMLSwirlIconWarningElement>;
             "swirl-icon-waving-hand": LocalJSX.IntrinsicElements["swirl-icon-waving-hand"] & JSXBase.HTMLAttributes<HTMLSwirlIconWavingHandElement>;

package/package.json

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