@getflip/swirl-components 0.315.1 → 0.317.0

package/components.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2025-04-02T18:10:41",
+  "timestamp": "2025-04-08T10:58:12",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.18.1",
@@ -16724,6 +16724,288 @@
       "dependencies": [],
       "dependencyGraph": {}
     },
+    {
+      "filePath": "src/components/swirl-icon/icons/swirl-icon-call.tsx",
+      "encapsulation": "shadow",
+      "tag": "swirl-icon-call",
+      "docs": "",
+      "docsTags": [],
+      "usage": {},
+      "props": [
+        {
+          "name": "color",
+          "type": "\"critical\" | \"default\" | \"disabled\" | \"highlight\" | \"info\" | \"on-action-primary\" | \"on-image\" | \"on-status\" | \"on-surface-highlight\" | \"on-surface-highlight-subdued\" | \"strong\" | \"success\" | \"warning\"",
+          "complexType": {
+            "original": "SwirlIconColor",
+            "resolved": "\"critical\" | \"default\" | \"disabled\" | \"highlight\" | \"info\" | \"on-action-primary\" | \"on-image\" | \"on-status\" | \"on-surface-highlight\" | \"on-surface-highlight-subdued\" | \"strong\" | \"success\" | \"warning\"",
+            "references": {
+              "SwirlIconColor": {
+                "location": "import",
+                "path": "../swirl-icon",
+                "id": "src/components/swirl-icon/swirl-icon.tsx::SwirlIconColor"
+              }
+            }
+          },
+          "mutable": false,
+          "attr": "color",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [],
+          "values": [
+            {
+              "value": "critical",
+              "type": "string"
+            },
+            {
+              "value": "default",
+              "type": "string"
+            },
+            {
+              "value": "disabled",
+              "type": "string"
+            },
+            {
+              "value": "highlight",
+              "type": "string"
+            },
+            {
+              "value": "info",
+              "type": "string"
+            },
+            {
+              "value": "on-action-primary",
+              "type": "string"
+            },
+            {
+              "value": "on-image",
+              "type": "string"
+            },
+            {
+              "value": "on-status",
+              "type": "string"
+            },
+            {
+              "value": "on-surface-highlight",
+              "type": "string"
+            },
+            {
+              "value": "on-surface-highlight-subdued",
+              "type": "string"
+            },
+            {
+              "value": "strong",
+              "type": "string"
+            },
+            {
+              "value": "success",
+              "type": "string"
+            },
+            {
+              "value": "warning",
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "size",
+          "type": "16 | 20 | 24 | 28",
+          "complexType": {
+            "original": "SwirlIconSize",
+            "resolved": "16 | 20 | 24 | 28",
+            "references": {
+              "SwirlIconSize": {
+                "location": "import",
+                "path": "../swirl-icon.types",
+                "id": "src/components/swirl-icon/swirl-icon.types.ts::SwirlIconSize"
+              }
+            }
+          },
+          "mutable": false,
+          "attr": "size",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [],
+          "default": "24",
+          "values": [
+            {
+              "value": "16",
+              "type": "number"
+            },
+            {
+              "value": "20",
+              "type": "number"
+            },
+            {
+              "value": "24",
+              "type": "number"
+            },
+            {
+              "value": "28",
+              "type": "number"
+            }
+          ],
+          "optional": false,
+          "required": false
+        }
+      ],
+      "methods": [],
+      "events": [],
+      "listeners": [],
+      "styles": [],
+      "slots": [],
+      "parts": [
+        {
+          "name": "icon",
+          "docs": ""
+        }
+      ],
+      "dependents": [],
+      "dependencies": [],
+      "dependencyGraph": {}
+    },
+    {
+      "filePath": "src/components/swirl-icon/icons/swirl-icon-call-end.tsx",
+      "encapsulation": "shadow",
+      "tag": "swirl-icon-call-end",
+      "docs": "",
+      "docsTags": [],
+      "usage": {},
+      "props": [
+        {
+          "name": "color",
+          "type": "\"critical\" | \"default\" | \"disabled\" | \"highlight\" | \"info\" | \"on-action-primary\" | \"on-image\" | \"on-status\" | \"on-surface-highlight\" | \"on-surface-highlight-subdued\" | \"strong\" | \"success\" | \"warning\"",
+          "complexType": {
+            "original": "SwirlIconColor",
+            "resolved": "\"critical\" | \"default\" | \"disabled\" | \"highlight\" | \"info\" | \"on-action-primary\" | \"on-image\" | \"on-status\" | \"on-surface-highlight\" | \"on-surface-highlight-subdued\" | \"strong\" | \"success\" | \"warning\"",
+            "references": {
+              "SwirlIconColor": {
+                "location": "import",
+                "path": "../swirl-icon",
+                "id": "src/components/swirl-icon/swirl-icon.tsx::SwirlIconColor"
+              }
+            }
+          },
+          "mutable": false,
+          "attr": "color",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [],
+          "values": [
+            {
+              "value": "critical",
+              "type": "string"
+            },
+            {
+              "value": "default",
+              "type": "string"
+            },
+            {
+              "value": "disabled",
+              "type": "string"
+            },
+            {
+              "value": "highlight",
+              "type": "string"
+            },
+            {
+              "value": "info",
+              "type": "string"
+            },
+            {
+              "value": "on-action-primary",
+              "type": "string"
+            },
+            {
+              "value": "on-image",
+              "type": "string"
+            },
+            {
+              "value": "on-status",
+              "type": "string"
+            },
+            {
+              "value": "on-surface-highlight",
+              "type": "string"
+            },
+            {
+              "value": "on-surface-highlight-subdued",
+              "type": "string"
+            },
+            {
+              "value": "strong",
+              "type": "string"
+            },
+            {
+              "value": "success",
+              "type": "string"
+            },
+            {
+              "value": "warning",
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "size",
+          "type": "16 | 20 | 24 | 28",
+          "complexType": {
+            "original": "SwirlIconSize",
+            "resolved": "16 | 20 | 24 | 28",
+            "references": {
+              "SwirlIconSize": {
+                "location": "import",
+                "path": "../swirl-icon.types",
+                "id": "src/components/swirl-icon/swirl-icon.types.ts::SwirlIconSize"
+              }
+            }
+          },
+          "mutable": false,
+          "attr": "size",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [],
+          "default": "24",
+          "values": [
+            {
+              "value": "16",
+              "type": "number"
+            },
+            {
+              "value": "20",
+              "type": "number"
+            },
+            {
+              "value": "24",
+              "type": "number"
+            },
+            {
+              "value": "28",
+              "type": "number"
+            }
+          ],
+          "optional": false,
+          "required": false
+        }
+      ],
+      "methods": [],
+      "events": [],
+      "listeners": [],
+      "styles": [],
+      "slots": [],
+      "parts": [
+        {
+          "name": "icon",
+          "docs": ""
+        }
+      ],
+      "dependents": [],
+      "dependencies": [],
+      "dependencyGraph": {}
+    },
     {
       "filePath": "src/components/swirl-icon/icons/swirl-icon-cancel.tsx",
       "encapsulation": "shadow",
@@ -41262,6 +41544,147 @@
       "dependencies": [],
       "dependencyGraph": {}
     },
+    {
+      "filePath": "src/components/swirl-icon/icons/swirl-icon-volume-up.tsx",
+      "encapsulation": "shadow",
+      "tag": "swirl-icon-volume-up",
+      "docs": "",
+      "docsTags": [],
+      "usage": {},
+      "props": [
+        {
+          "name": "color",
+          "type": "\"critical\" | \"default\" | \"disabled\" | \"highlight\" | \"info\" | \"on-action-primary\" | \"on-image\" | \"on-status\" | \"on-surface-highlight\" | \"on-surface-highlight-subdued\" | \"strong\" | \"success\" | \"warning\"",
+          "complexType": {
+            "original": "SwirlIconColor",
+            "resolved": "\"critical\" | \"default\" | \"disabled\" | \"highlight\" | \"info\" | \"on-action-primary\" | \"on-image\" | \"on-status\" | \"on-surface-highlight\" | \"on-surface-highlight-subdued\" | \"strong\" | \"success\" | \"warning\"",
+            "references": {
+              "SwirlIconColor": {
+                "location": "import",
+                "path": "../swirl-icon",
+                "id": "src/components/swirl-icon/swirl-icon.tsx::SwirlIconColor"
+              }
+            }
+          },
+          "mutable": false,
+          "attr": "color",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [],
+          "values": [
+            {
+              "value": "critical",
+              "type": "string"
+            },
+            {
+              "value": "default",
+              "type": "string"
+            },
+            {
+              "value": "disabled",
+              "type": "string"
+            },
+            {
+              "value": "highlight",
+              "type": "string"
+            },
+            {
+              "value": "info",
+              "type": "string"
+            },
+            {
+              "value": "on-action-primary",
+              "type": "string"
+            },
+            {
+              "value": "on-image",
+              "type": "string"
+            },
+            {
+              "value": "on-status",
+              "type": "string"
+            },
+            {
+              "value": "on-surface-highlight",
+              "type": "string"
+            },
+            {
+              "value": "on-surface-highlight-subdued",
+              "type": "string"
+            },
+            {
+              "value": "strong",
+              "type": "string"
+            },
+            {
+              "value": "success",
+              "type": "string"
+            },
+            {
+              "value": "warning",
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "size",
+          "type": "16 | 20 | 24 | 28",
+          "complexType": {
+            "original": "SwirlIconSize",
+            "resolved": "16 | 20 | 24 | 28",
+            "references": {
+              "SwirlIconSize": {
+                "location": "import",
+                "path": "../swirl-icon.types",
+                "id": "src/components/swirl-icon/swirl-icon.types.ts::SwirlIconSize"
+              }
+            }
+          },
+          "mutable": false,
+          "attr": "size",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [],
+          "default": "24",
+          "values": [
+            {
+              "value": "16",
+              "type": "number"
+            },
+            {
+              "value": "20",
+              "type": "number"
+            },
+            {
+              "value": "24",
+              "type": "number"
+            },
+            {
+              "value": "28",
+              "type": "number"
+            }
+          ],
+          "optional": false,
+          "required": false
+        }
+      ],
+      "methods": [],
+      "events": [],
+      "listeners": [],
+      "styles": [],
+      "slots": [],
+      "parts": [
+        {
+          "name": "icon",
+          "docs": ""
+        }
+      ],
+      "dependents": [],
+      "dependencies": [],
+      "dependencyGraph": {}
+    },
     {
       "filePath": "src/components/swirl-icon/icons/swirl-icon-warning.tsx",
       "encapsulation": "shadow",
@@ -44031,7 +44454,11 @@
         },
         {
           "name": "slot",
-          "text": "sidebar-content - Sidebar content"
+          "text": "sidebar-content - Sidebar content; Only visible on viewports larger than tablet"
+        },
+        {
+          "name": "slot",
+          "text": "sidebar-footer - Optional custom footer below the Sidebar"
         }
       ],
       "usage": {},
@@ -44798,6 +45225,28 @@
           "optional": true,
           "required": false
         },
+        {
+          "name": "sidebarFooterPadded",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "sidebar-footer-padded",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [],
+          "default": "true",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
         {
           "name": "sidebarLabel",
           "type": "string",
@@ -44819,6 +45268,28 @@
           "optional": true,
           "required": false
         },
+        {
+          "name": "sidebarPadded",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "sidebar-padded",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [],
+          "default": "true",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
         {
           "name": "variant",
           "type": "\"default\" | \"drawer\"",
@@ -45021,7 +45492,11 @@
         },
         {
           "name": "sidebar-content",
-          "docs": "Sidebar content"
+          "docs": "Sidebar content; Only visible on viewports larger than tablet"
+        },
+        {
+          "name": "sidebar-footer",
+          "docs": "Optional custom footer below the Sidebar"
         },
         {
           "name": "slot",

package/dist/cjs/file-manager.cjs.entry.js

@@ -62,7 +62,7 @@ const FileManager = class {
             onClick: () => this.selectItem(item) }, "type" in item ? (index.h("swirl-icon-file", { slot: "media" })) : (index.h("swirl-icon-folder-shared", { slot: "media" })))))) : (index.h("swirl-box", { padding: "16" }, index.h("swirl-text", { color: "subdued", weight: "medium" }, "This directory is empty.")));
     }
     render() {
-        return (index.h(index.Host, { key: '43d7139cd0dfe3093a3373c412912e70dcd73a1f' }, index.h("swirl-app-layout", { key: '417e375d94b816fec1281b8fd9dfa5eabcb538c2', appName: "Documents", backToNavigationViewButtonLabel: "Back to documents list", ctaIcon: "<swirl-icon-add></swirl-icon-add>", ctaLabel: "Upload file", navigationLabel: "Documents", onNavigationBackButtonClick: this.resetSelectedDirectory, ref: (el) => (this.layout = el), sidebarCloseButtonLabel: "Close file info", sidebarHeading: "File info", showNavigationBackButton: Boolean(this.selectedDirectory), transitionStyle: "dialog" }, index.h("swirl-resource-list", { key: '9a0b7f02b9189a8c80590b5bf12f6b2e8c559496', label: "Documents", slot: "navigation" }, this.renderNavigation()), index.h("swirl-popover-trigger", { key: 'af708e0be50f798c4185474ddcee0b6395da94b5', swirlPopover: this.sortMenu, slot: "navigation-controls" }, index.h("swirl-button", { key: '722ce6c225e57ab70dc9f612fdfba6945279a2aa', label: "Sort items" })), index.h("swirl-stack", { key: '36337d16816c4d93b7b959de08204044c0fb8af4', orientation: "horizontal", slot: "app-bar" }, index.h("swirl-stack", { key: 'c0e390059cb104e117adbfde6669669f16370cfa' }, index.h("swirl-heading", { key: '9afaa8ec286165a28b4f4bd0fff2e56e77e2ef34', as: "h2", level: 4, text: this.selectedFile?.name }), index.h("swirl-text", { key: '20268f492ddcc7ab3d67f1b2833ed05b0147ffed', color: "subdued", truncate: true }, this.selectedFile?.description))), Boolean(this.selectedFile) ? (index.h("swirl-file-viewer", { file: this.selectedFile.url, slot: "content", type: this.selectedFile.type })) : (index.h("swirl-box", { cover: true, centerBlock: true, centerInline: true, padding: "16", slot: "content" }, index.h("swirl-empty-state", { heading: "Nothing to see here.", illustration: "/images/empty-state-1.svg" }, "Please select a file from the list."))), index.h("div", { key: '356a6d6accdb5f81287ecc30176cd05316e0cbd1', slot: "app-bar-controls" }, this.selectedFile && (index.h("swirl-button", { key: 'e611b83e0a4a1bd374725ad4513825633a482bc4', "hide-label": true, class: "info-button", icon: "<swirl-icon-info></swirl-icon-info>", label: "Open file info", onClick: this.toggleSidebar }))), index.h("swirl-box", { key: '3fb01c15a15f72a0cd23f0f04a46ec5f7a02512a', padding: "16", slot: "sidebar" }, index.h("swirl-text", { key: '096e30dba3eee05de14cd5f16811eb05fc683096', color: "subdued", weight: "medium" }, "File info goes here \u2026"))), index.h("swirl-popover", { key: '0db3195dca9277c90681a3ea1593f374637928db', label: "Sort items", ref: (el) => (this.sortMenu = el) }, index.h("swirl-option-list", { key: '209bdb21d12a693eb5d032595d52a12cb9f67bc1', value: ["ascending"] }, index.h("swirl-option-list-item", { key: '298593b1684f7da3eed0b11ee3bcd3b13f0425d1', icon: "<swirl-icon-expand-less></swirl-icon-expand-less>", label: "Ascending", value: "ascending" }), index.h("swirl-option-list-item", { key: '1dc162a7eb90a121f91a36f4048f4a5964017bd1', icon: "<swirl-icon-expand-more></swirl-icon-expand-more>", label: "Descending", value: "descending" }), index.h("swirl-option-list-item", { key: '1d4601e6adce6e7e01176b60195e08b6541715cf', icon: "<swirl-icon-time-outlined></swirl-icon-time-outlined>", label: "By date", value: "date" })))));
+        return (index.h(index.Host, { key: 'f71a4bf5c3919d810c13f85f823ba90f1eba9865' }, index.h("swirl-app-layout", { key: '4d079a504ad5c179e0c820443052917bd649d5b0', appName: "Documents", backToNavigationViewButtonLabel: "Back to documents list", ctaIcon: "<swirl-icon-add></swirl-icon-add>", ctaLabel: "Upload file", navigationLabel: "Documents", onNavigationBackButtonClick: this.resetSelectedDirectory, ref: (el) => (this.layout = el), sidebarCloseButtonLabel: "Close file info", sidebarHeading: "File info", showNavigationBackButton: Boolean(this.selectedDirectory), transitionStyle: "dialog" }, index.h("swirl-resource-list", { key: '5ee9fb1c54fed5b72dde7505fa2ab5edcb627daa', label: "Documents", slot: "navigation" }, this.renderNavigation()), index.h("swirl-popover-trigger", { key: 'e9e4d4705f58718f3a8520aa8c36d1931eeca5f8', swirlPopover: this.sortMenu, slot: "navigation-controls" }, index.h("swirl-button", { key: '191e37c2f4f32278753b3d651dc80c1925ed5be3', label: "Sort items" })), index.h("swirl-stack", { key: '86ce5ecc9095ef64d1bf2ed81cde4144cb0e2654', orientation: "horizontal", slot: "app-bar" }, index.h("swirl-stack", { key: '5663407b7808b77de32c1695147873c62e19e39b' }, index.h("swirl-heading", { key: 'f7fd4d4eb998d28dae95a55a63eaa56f7d926150', as: "h2", level: 4, text: this.selectedFile?.name }), index.h("swirl-text", { key: '6d4ba8cd0f8331f8909398cc03dda69165096d75', color: "subdued", truncate: true }, this.selectedFile?.description))), Boolean(this.selectedFile) ? (index.h("swirl-file-viewer", { file: this.selectedFile.url, slot: "content", type: this.selectedFile.type })) : (index.h("swirl-box", { cover: true, centerBlock: true, centerInline: true, padding: "16", slot: "content" }, index.h("swirl-empty-state", { heading: "Nothing to see here.", illustration: "/images/empty-state-1.svg" }, "Please select a file from the list."))), index.h("div", { key: '679c8aebdc4ffb632363a7e753ee73c06447da37', slot: "app-bar-controls" }, this.selectedFile && (index.h("swirl-button", { key: 'bb6cdc735eb931d9224d8f6e9424ba6e1eca7b3c', "hide-label": true, class: "info-button", icon: "<swirl-icon-info></swirl-icon-info>", label: "Open file info", onClick: this.toggleSidebar }))), index.h("swirl-box", { key: '5483d86d3322959cd2d03fbee03ca3884a34a298', padding: "16", slot: "sidebar" }, index.h("swirl-text", { key: '5d4e0958202667ba467fb7640d958af2338c98cf', color: "subdued", weight: "medium" }, "File info goes here \u2026"))), index.h("swirl-popover", { key: '58d6c2bb8beede481204484fac91f3c4e36a984c', label: "Sort items", ref: (el) => (this.sortMenu = el) }, index.h("swirl-option-list", { key: '9786bef660947ee2e122636c13ad6bc239f310c2', value: ["ascending"] }, index.h("swirl-option-list-item", { key: '84be9f6eb524d185b3fffde2bcd182bd77a9d996', icon: "<swirl-icon-expand-less></swirl-icon-expand-less>", label: "Ascending", value: "ascending" }), index.h("swirl-option-list-item", { key: 'bd0f8a227dc4739afefe2f246c5f255e21c097d4', icon: "<swirl-icon-expand-more></swirl-icon-expand-more>", label: "Descending", value: "descending" }), index.h("swirl-option-list-item", { key: 'b6f49fe3b225802fac6df65f5b69e7af2fc85ca0', icon: "<swirl-icon-time-outlined></swirl-icon-time-outlined>", label: "By date", value: "date" })))));
     }
 };
 

package/dist/cjs/index-2c919933.js

@@ -2040,6 +2040,14 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
                         /* webpackMode: "lazy" */
                         './swirl-icon-bookmark-filled.cjs.entry.js')); }).then(processMod, consoleError);
+                case 'swirl-icon-call.cjs':
+                    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+                        /* webpackMode: "lazy" */
+                        './swirl-icon-call.cjs.entry.js')); }).then(processMod, consoleError);
+                case 'swirl-icon-call-end.cjs':
+                    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+                        /* webpackMode: "lazy" */
+                        './swirl-icon-call-end.cjs.entry.js')); }).then(processMod, consoleError);
                 case 'swirl-icon-chat-bubble.cjs':
                     return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
                         /* webpackMode: "lazy" */
@@ -2596,6 +2604,10 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
                         /* webpackMode: "lazy" */
                         './swirl-icon-voice.cjs.entry.js')); }).then(processMod, consoleError);
+                case 'swirl-icon-volume-up.cjs':
+                    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+                        /* webpackMode: "lazy" */
+                        './swirl-icon-volume-up.cjs.entry.js')); }).then(processMod, consoleError);
                 case 'swirl-icon-web-asset.cjs':
                     return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
                         /* webpackMode: "lazy" */