@getflip/swirl-components 0.288.0 → 0.289.0

package/dist/collection/components/swirl-tab-bar/swirl-tab-bar.css

@@ -12,9 +12,19 @@
   display: flex;
   width: 100%;
   justify-content: flex-start;
-  border-bottom: var(--swirl-tab-bar-border-width) solid var(--s-border-default);
+  overflow-x: auto;
+  scrollbar-width: none;
 }
 
+.tab-bar.tab-bar--variant-default {
+    border-bottom: var(--swirl-tab-bar-border-width) solid
+      var(--s-border-default);
+  }
+
+.tab-bar.tab-bar--variant-pill {
+    gap: var(--s-space-8);
+  }
+
 .tab-bar--justify-evenly > * {
   flex: 1;
 }
@@ -22,13 +32,12 @@
 .tab-bar__tab {
   position: relative;
   display: flex;
-  min-width: 0;
+  min-width: -webkit-fit-content;
+  min-width: -moz-fit-content;
+  min-width: fit-content;
   margin: 0;
-  padding: var(--s-space-4) var(--s-space-8);
   align-items: center;
   border: none;
-  color: var(--s-interactive-neutral-default);
-  background-color: transparent;
   font: inherit;
   font-weight: var(--s-font-weight-medium);
   line-height: var(--s-line-height-lg);
@@ -36,28 +45,77 @@
   justify-content: center;
 }
 
-.tab-bar__tab:focus {
-    outline: none;
+.tab-bar__tab.tab-bar__tab--variant-default {
+    background-color: transparent;
+    color: var(--s-interactive-neutral-default);
+    padding: var(--s-space-4) var(--s-space-8);
   }
 
-.tab-bar__tab:focus-visible .tab-bar__tab-label {
-      border-radius: var(--s-border-radius-s);
-      box-shadow: inset 0 0 0 0.125rem var(--s-focus-default);
+.tab-bar__tab.tab-bar__tab--variant-default:not(.tab-bar__tab--active):hover:after {
+          position: absolute;
+          bottom: 0;
+          left: 50%;
+          width: calc(100% - var(--s-space-8));
+          height: 0.1875rem;
+          border-radius: 0.125rem;
+          background-color: var(--s-border-default);
+          content: "";
+          transform: translateX(-50%);
+          pointer-events: none;
+        }
+
+.tab-bar__tab.tab-bar__tab--variant-default.tab-bar__tab--active {
+      color: var(--s-text-highlight);
     }
 
-.tab-bar__tab:not(.tab-bar__tab--active):hover:after {
+.tab-bar__tab.tab-bar__tab--variant-default.tab-bar__tab--active:after {
         position: absolute;
         bottom: 0;
         left: 50%;
         width: calc(100% - var(--s-space-8));
         height: 0.1875rem;
         border-radius: 0.125rem;
-        background-color: var(--s-border-default);
+        background-color: var(--s-border-highlight);
         content: "";
         transform: translateX(-50%);
         pointer-events: none;
       }
 
+.tab-bar__tab.tab-bar__tab--variant-default:focus {
+      outline: none;
+    }
+
+.tab-bar__tab.tab-bar__tab--variant-default:focus-visible .tab-bar__tab-label {
+        border-radius: var(--s-border-radius-s);
+        box-shadow: inset 0 0 0 0.125rem var(--s-focus-default);
+      }
+
+.tab-bar__tab.tab-bar__tab--variant-pill {
+    border-radius: var(--s-border-radius-full-round);
+    background: var(--s-action-neutral-default);
+    color: var(--s-text-default);
+    padding: var(--s-space-8) var(--s-space-16);
+    gap: var(--s-space-8);
+  }
+
+.tab-bar__tab.tab-bar__tab--variant-pill:hover {
+      background: var(--s-action-neutral-hovered);
+    }
+
+.tab-bar__tab.tab-bar__tab--variant-pill:active {
+      background: var(--s-action-neutral-pressed);
+    }
+
+.tab-bar__tab.tab-bar__tab--variant-pill.tab-bar__tab--active {
+      background: var(--s-action-primary-default);
+      color: var(--s-text-on-action-primary);
+    }
+
+.tab-bar__tab.tab-bar__tab--variant-pill:focus-visible {
+      outline-color: var(--s-focus-default);
+      outline-offset: var(--s-space-2);
+    }
+
 @media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {
 
 .tab-bar__tab {
@@ -73,26 +131,10 @@
 
 .tab-bar__tab-label {
   display: inline-flex;
-  overflow: hidden;
   padding: var(--s-space-8) var(--s-space-8);
   text-align: center;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-.tab-bar__tab--active {
-  color: var(--s-text-highlight);
 }
 
-.tab-bar__tab--active:after {
-    position: absolute;
-    bottom: 0;
-    left: 50%;
-    width: calc(100% - var(--s-space-8));
-    height: 0.1875rem;
-    border-radius: 0.125rem;
-    background-color: var(--s-border-highlight);
-    content: "";
-    transform: translateX(-50%);
-    pointer-events: none;
+.tab-bar__tab-label.tab-bar__tab-label--variant-pill {
+    padding: 0;
   }

package/dist/collection/components/swirl-tab-bar/swirl-tab-bar.js

@@ -1,26 +1,44 @@
-import { h, Host } from "@stencil/core";
+import { h, Host, } from "@stencil/core";
 import classnames from "classnames";
+import { getCircularArrayIndex } from "../../utils";
 export class SwirlTabBar {
     constructor() {
         this.onKeyDown = (event) => {
             if (event.code === "ArrowLeft") {
                 event.preventDefault();
+                this.focusAdjacentTab(true);
                 this.activatePreviousTab.emit();
             }
             else if (event.code === "ArrowRight") {
                 event.preventDefault();
+                this.focusAdjacentTab(false);
                 this.activateNextTab.emit();
             }
         };
         this.disableTabSemantics = undefined;
         this.label = undefined;
         this.justify = "start";
+        this.paddingBlockEnd = undefined;
+        this.paddingBlockStart = undefined;
         this.paddingInlineEnd = undefined;
         this.paddingInlineStart = undefined;
         this.tabs = [];
+        this.variant = "default";
+    }
+    focusAdjacentTab(previous) {
+        const tabs = this.getTabs();
+        const selectedTabIndex = tabs.findIndex((tab) => tab.ariaSelected === "true");
+        const nextIndex = getCircularArrayIndex(previous ? selectedTabIndex - 1 : selectedTabIndex + 1, tabs.length);
+        tabs[nextIndex].focus();
+    }
+    getTabs() {
+        return Array.from(this.el.querySelectorAll('[role="tab"]'));
     }
     render() {
-        const className = classnames("tab-bar", `tab-bar--justify-${this.justify}`);
+        const className = classnames("tab-bar", `tab-bar--justify-${this.justify}`, {
+            "tab-bar--variant-pill": this.variant === "pill",
+            "tab-bar--variant-default": this.variant === "default",
+        });
         const styles = {
             paddingInlineEnd: Boolean(this.paddingInlineEnd)
                 ? `var(--s-space-${this.paddingInlineEnd})`
@@ -28,10 +46,21 @@ export class SwirlTabBar {
             paddingInlineStart: Boolean(this.paddingInlineStart)
                 ? `var(--s-space-${this.paddingInlineStart})`
                 : undefined,
+            paddingBlockEnd: Boolean(this.paddingBlockEnd)
+                ? `var(--s-space-${this.paddingBlockEnd})`
+                : undefined,
+            paddingBlockStart: Boolean(this.paddingBlockStart)
+                ? `var(--s-space-${this.paddingBlockStart})`
+                : undefined,
         };
-        return (h(Host, { key: 'd883f7af119dd81a09081301e1e48c9f65e4a822' }, h("div", { key: '016e1125ef12dac89655aee9cae6e7514ba42e67', "aria-label": this.label, class: className, onKeyDown: this.onKeyDown, role: this.disableTabSemantics ? undefined : "tablist", style: styles }, this.tabs.map((tab) => {
+        return (h(Host, { key: 'deb50eba4e47565ae6338a5af43b7a0a1054e6b1' }, h("div", { key: '75cc9b8e1ffbe76ff00165fb3428799fcd7ea2ac', "aria-label": this.label, class: className, onKeyDown: this.onKeyDown, role: this.disableTabSemantics ? undefined : "tablist", style: styles }, this.tabs.map((tab) => {
             const className = classnames("tab-bar__tab", {
                 "tab-bar__tab--active": tab.active,
+                "tab-bar__tab--variant-pill": this.variant === "pill",
+                "tab-bar__tab--variant-default": this.variant === "default",
+            });
+            const labelClassName = classnames("tab-bar__tab-label", {
+                "tab-bar__tab-label--variant-pill": this.variant === "pill",
             });
             return (h("button", { "aria-controls": this.disableTabSemantics ? undefined : tab.id, "aria-selected": this.disableTabSemantics
                     ? undefined
@@ -39,7 +68,7 @@ export class SwirlTabBar {
                         ? "true"
                         : "false", class: className, id: `tab-${tab.id}`, key: tab.id,
                 // eslint-disable-next-line react/jsx-no-bind
-                onClick: () => this.activateTab.emit(tab.id), role: this.disableTabSemantics ? undefined : "tab", tabIndex: this.disableTabSemantics ? undefined : tab.active ? 0 : -1, type: "button" }, tab.icon && (h("span", { class: "tab-bar__tab-icon", innerHTML: tab.icon })), h("span", { class: "tab-bar__tab-label" }, tab.label)));
+                onClick: () => this.activateTab.emit(tab.id), role: this.disableTabSemantics ? undefined : "tab", tabIndex: this.disableTabSemantics ? undefined : tab.active ? 0 : -1, type: "button" }, tab.icon && (h("span", { class: "tab-bar__tab-icon", innerHTML: tab.icon })), h("span", { class: labelClassName }, tab.label)));
         }))));
     }
     static get is() { return "swirl-tab-bar"; }
@@ -114,6 +143,52 @@ export class SwirlTabBar {
                 "reflect": false,
                 "defaultValue": "\"start\""
             },
+            "paddingBlockEnd": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SwirlTabBarPadding",
+                    "resolved": "\"0\" | \"12\" | \"16\" | \"2\" | \"20\" | \"24\" | \"4\" | \"8\"",
+                    "references": {
+                        "SwirlTabBarPadding": {
+                            "location": "local",
+                            "path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-tab-bar/swirl-tab-bar.tsx",
+                            "id": "src/components/swirl-tab-bar/swirl-tab-bar.tsx::SwirlTabBarPadding"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "padding-block-end",
+                "reflect": false
+            },
+            "paddingBlockStart": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SwirlTabBarPadding",
+                    "resolved": "\"0\" | \"12\" | \"16\" | \"2\" | \"20\" | \"24\" | \"4\" | \"8\"",
+                    "references": {
+                        "SwirlTabBarPadding": {
+                            "location": "local",
+                            "path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-tab-bar/swirl-tab-bar.tsx",
+                            "id": "src/components/swirl-tab-bar/swirl-tab-bar.tsx::SwirlTabBarPadding"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "padding-block-start",
+                "reflect": false
+            },
             "paddingInlineEnd": {
                 "type": "string",
                 "mutable": false,
@@ -181,6 +256,30 @@ export class SwirlTabBar {
                     "text": ""
                 },
                 "defaultValue": "[]"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SwirlTabBarVariant",
+                    "resolved": "\"default\" | \"pill\"",
+                    "references": {
+                        "SwirlTabBarVariant": {
+                            "location": "local",
+                            "path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-tab-bar/swirl-tab-bar.tsx",
+                            "id": "src/components/swirl-tab-bar/swirl-tab-bar.tsx::SwirlTabBarVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "variant",
+                "reflect": false,
+                "defaultValue": "\"default\""
             }
         };
     }
@@ -232,4 +331,5 @@ export class SwirlTabBar {
                 }
             }];
     }
+    static get elementRef() { return "el"; }
 }

package/dist/collection/components/swirl-tab-bar/swirl-tab-bar.spec.js

@@ -26,18 +26,18 @@ describe("swirl-tab-bar", () => {
         await page.waitForChanges();
         expect(page.root).toEqualHtml(`
       <swirl-tab-bar label="Tabs">
-        <div aria-label="Tabs" class="tab-bar tab-bar--justify-start" role="tablist">
-          <button aria-controls="tab1" aria-selected="false" class="tab-bar__tab" id="tab-tab1" role="tab" tabindex="-1" type="button">
+        <div aria-label="Tabs" class="tab-bar tab-bar--justify-start tab-bar--variant-default" role="tablist">
+          <button aria-controls="tab1" aria-selected="false" class="tab-bar__tab tab-bar__tab--variant-default" id="tab-tab1" role="tab" tabindex="-1" type="button">
             <span class="tab-bar__tab-label">
               Tab #1
             </span>
           </button>
-          <button aria-controls="tab2" aria-selected="true" class="tab-bar__tab tab-bar__tab--active" id="tab-tab2" role="tab" tabindex="0" type="button">
+          <button aria-controls="tab2" aria-selected="true" class="tab-bar__tab tab-bar__tab--variant-default tab-bar__tab--active" id="tab-tab2" role="tab" tabindex="0" type="button">
             <span class="tab-bar__tab-label">
               Tab #2
             </span>
           </button>
-          <button aria-controls="tab3" aria-selected="false" class="tab-bar__tab" id="tab-tab3" role="tab" tabindex="-1" type="button">
+          <button aria-controls="tab3" aria-selected="false" class="tab-bar__tab  tab-bar__tab--variant-default" id="tab-tab3" role="tab" tabindex="-1" type="button">
             <span class="tab-bar__tab-label">
               Tab #3
             </span>

package/dist/collection/components/swirl-tabs/swirl-tabs.js

@@ -1,4 +1,5 @@
 import { h, Host, } from "@stencil/core";
+import { getCircularArrayIndex } from "../../utils";
 export class SwirlTabs {
     constructor() {
         this.tabs = [];
@@ -14,8 +15,11 @@ export class SwirlTabs {
         this.initialTab = undefined;
         this.label = undefined;
         this.justifyTabBar = undefined;
+        this.tabBarPaddingBlockEnd = undefined;
+        this.tabBarPaddingBlockStart = undefined;
         this.tabBarPaddingInlineEnd = undefined;
         this.tabBarPaddingInlineStart = undefined;
+        this.tabBarVariant = "default";
         this.activeTab = undefined;
         this.tabBarTabs = [];
     }
@@ -43,7 +47,7 @@ export class SwirlTabs {
     }
     activateNextTab() {
         const currentIndex = this.tabs.findIndex((tab) => tab.tabId === this.activeTab);
-        const nextIndex = Math.min(this.tabs.length - 1, currentIndex + 1);
+        const nextIndex = getCircularArrayIndex(currentIndex + 1, this.tabs.length);
         this.activateTab(this.tabs[nextIndex].tabId);
         requestAnimationFrame(() => {
             this.el.querySelector(".tabs__tab--active")?.focus();
@@ -51,7 +55,7 @@ export class SwirlTabs {
     }
     activatePreviousTab() {
         const currentIndex = this.tabs.findIndex((tab) => tab.tabId === this.activeTab);
-        const previousIndex = Math.max(0, currentIndex - 1);
+        const previousIndex = getCircularArrayIndex(currentIndex - 1, this.tabs.length);
         this.activateTab(this.tabs[previousIndex].tabId);
         requestAnimationFrame(() => {
             this.el.querySelector(".tabs__tab--active")?.focus();
@@ -74,7 +78,7 @@ export class SwirlTabs {
         }));
     }
     render() {
-        return (h(Host, { key: '44caea9a926dc297cd030eb005fc3f6123a8d505' }, h("div", { key: '34a91794a16c5bf3f274edafd9a9cba4d4784ce0', class: "tabs" }, h("swirl-tab-bar", { key: '7d7351ea490ba3cd2d8863da2ce302bd4761fc6f', label: this.label, onActivateNextTab: this.onActivateNextTab, onActivatePreviousTab: this.onActivatePreviousTab, onActivateTab: this.onActivateTab, tabs: this.tabBarTabs, justify: this.justifyTabBar, paddingInlineEnd: this.tabBarPaddingInlineEnd, paddingInlineStart: this.tabBarPaddingInlineStart })), h("slot", { key: '35a4ab2fe39e56da291bfe5e3b624ffed3ce6220' })));
+        return (h(Host, { key: '1ac2dfa2ae746878117dd5a9d084c4f01b3bfea8' }, h("div", { key: '01e1a9a7f5fd4801af2bd54750f3e7954a6fff50', class: "tabs" }, h("swirl-tab-bar", { key: '9435cfed3336d04ae4f531992c26e1fbd54c4520', label: this.label, onActivateNextTab: this.onActivateNextTab, onActivatePreviousTab: this.onActivatePreviousTab, onActivateTab: this.onActivateTab, tabs: this.tabBarTabs, justify: this.justifyTabBar, paddingBlockEnd: this.tabBarPaddingBlockEnd, paddingBlockStart: this.tabBarPaddingBlockStart, paddingInlineEnd: this.tabBarPaddingInlineEnd, paddingInlineStart: this.tabBarPaddingInlineStart, variant: this.tabBarVariant })), h("slot", { key: '649844c197a13ebc8cd4a7925acb1cf48d728404' })));
     }
     static get is() { return "swirl-tabs"; }
     static get encapsulation() { return "scoped"; }
@@ -147,6 +151,52 @@ export class SwirlTabs {
                 "attribute": "justify-tab-bar",
                 "reflect": false
             },
+            "tabBarPaddingBlockEnd": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SwirlTabBarPadding",
+                    "resolved": "\"0\" | \"12\" | \"16\" | \"2\" | \"20\" | \"24\" | \"4\" | \"8\"",
+                    "references": {
+                        "SwirlTabBarPadding": {
+                            "location": "import",
+                            "path": "../swirl-tab-bar/swirl-tab-bar",
+                            "id": "src/components/swirl-tab-bar/swirl-tab-bar.tsx::SwirlTabBarPadding"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "tab-bar-padding-block-end",
+                "reflect": false
+            },
+            "tabBarPaddingBlockStart": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SwirlTabBarPadding",
+                    "resolved": "\"0\" | \"12\" | \"16\" | \"2\" | \"20\" | \"24\" | \"4\" | \"8\"",
+                    "references": {
+                        "SwirlTabBarPadding": {
+                            "location": "import",
+                            "path": "../swirl-tab-bar/swirl-tab-bar",
+                            "id": "src/components/swirl-tab-bar/swirl-tab-bar.tsx::SwirlTabBarPadding"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "tab-bar-padding-block-start",
+                "reflect": false
+            },
             "tabBarPaddingInlineEnd": {
                 "type": "string",
                 "mutable": false,
@@ -192,6 +242,30 @@ export class SwirlTabs {
                 },
                 "attribute": "tab-bar-padding-inline-start",
                 "reflect": false
+            },
+            "tabBarVariant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SwirlTabBarVariant",
+                    "resolved": "\"default\" | \"pill\"",
+                    "references": {
+                        "SwirlTabBarVariant": {
+                            "location": "import",
+                            "path": "../swirl-tab-bar/swirl-tab-bar",
+                            "id": "src/components/swirl-tab-bar/swirl-tab-bar.tsx::SwirlTabBarVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "tab-bar-variant",
+                "reflect": false,
+                "defaultValue": "\"default\""
             }
         };
     }

package/dist/collection/components/swirl-tabs/swirl-tabs.spec.js

@@ -17,7 +17,7 @@ describe("swirl-tabs", () => {
         expect(page.root).toEqualHtml(`
       <swirl-tabs label="Tabs">
         <div class="tabs">
-          <swirl-tab-bar label="Tabs"></swirl-tab-bar>
+          <swirl-tab-bar label="Tabs" variant="default"></swirl-tab-bar>
         </div>
         <swirl-tab aria-labelledby="tab-tab-1" class="tab tab--active" id="tab-1" label="Tab #1" role="tabpanel" tab-id="tab-1" tabindex="0" style="padding: var(--s-space-8);">
           <mock:shadow-root>

package/dist/collection/utils.js

@@ -194,3 +194,18 @@ export function getISODateString(date) {
     }
     return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
 }
+/**
+ * Adjusts the index to fit inside the length of the array, going in a circular fashion.
+ * Index of 5 in a list of length = 5 becomes 0 (first item).
+ * Index of -1 in a list of length = 5 becomes 4 (last item).
+ *
+ * This function is needed due to a known Javascript issue with the modulo operator.
+ * https://stackoverflow.com/questions/4467539/javascript-modulo-gives-a-negative-result-for-negative-numbers
+ *
+ * @param index - The next desired index
+ * @param arrayLength - The length of the array
+ * @returns The adjusted index
+ */
+export function getCircularArrayIndex(index, arrayLength) {
+    return ((index % arrayLength) + arrayLength) % arrayLength;
+}

package/dist/components/swirl-app-layout2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { c as classNames } from './index2.js';
-import { g as getDesktopMediaQuery, d as debounce, i as isMobileViewport, f as prefersReducedMotion } from './utils.js';
+import { g as getDesktopMediaQuery, d as debounce, i as isMobileViewport, h as prefersReducedMotion } from './utils.js';
 import { d as defineCustomElement$2 } from './swirl-button2.js';
 import { d as defineCustomElement$1 } from './swirl-heading2.js';
 

package/dist/components/swirl-date-picker2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { r as removeTimezoneOffset, h as getISODateString } from './utils.js';
+import { r as removeTimezoneOffset, j as getISODateString } from './utils.js';
 import { d as defineCustomElement$1 } from './wc-datepicker2.js';
 
 const swirlDatePickerCss = ":host{display:block}:host *{box-sizing:border-box}.date-picker{padding:var(--s-space-8) var(--s-space-16);background-color:var(--s-surface-overlay-default);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);letter-spacing:var(--s-letter-spacing-tighter)}@media (min-width: 768px){.date-picker{max-width:17.5rem}}.date-picker__header{display:flex;margin-bottom:var(--s-space-8);align-items:center}.date-picker__current-month{display:flex;padding:var(--s-space-8);flex-grow:1;align-items:center;order:1;gap:var(--s-space-4)}.date-picker__next-month-button,.date-picker__previous-month-button{position:relative;display:inline-flex;width:2.5rem;height:2.5rem;margin:0;padding:0;flex-shrink:0;justify-content:center;align-items:center;border:none;border-radius:50%;color:var(--s-icon-highlight);background-color:transparent;cursor:pointer}.date-picker__next-month-button:after,.date-picker__previous-month-button:after{position:absolute;background-color:currentColor;content:\"\";inset:0;-webkit-mask-position:center center;mask-position:center center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.date-picker__next-month-button:hover,.date-picker__previous-month-button:hover{background-color:var(--s-surface-overlay-hovered)}.date-picker__next-month-button:focus:not(:focus-visible),.date-picker__previous-month-button:focus:not(:focus-visible){outline:none}.date-picker__next-month-button:focus-visible,.date-picker__previous-month-button:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-2)}.date-picker__next-month-button>svg,.date-picker__previous-month-button>svg{display:none}.date-picker__next-month-button{order:3}.date-picker__next-month-button:after{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg class='swirl-icon swirl-icon--size-24' fill='none' height='24' part='icon' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.59999 17.4C8.38333 17.1834 8.27499 16.9167 8.27499 16.6C8.27499 16.2834 8.38333 16.0167 8.59999 15.8L12.4 12L8.59999 8.20002C8.38333 7.98336 8.27499 7.71669 8.27499 7.40002C8.27499 7.08336 8.38333 6.81669 8.59999 6.60002C8.81666 6.38336 9.08333 6.27502 9.39999 6.27502C9.71666 6.27502 9.98333 6.38336 10.2 6.60002L14.8 11.2C14.9167 11.3167 15 11.4417 15.05 11.575C15.1 11.7084 15.125 11.85 15.125 12C15.125 12.15 15.1 12.2917 15.05 12.425C15 12.5584 14.9167 12.6834 14.8 12.8L10.2 17.4C9.98333 17.6167 9.71666 17.725 9.39999 17.725C9.08333 17.725 8.81666 17.6167 8.59999 17.4Z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg class='swirl-icon swirl-icon--size-24' fill='none' height='24' part='icon' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.59999 17.4C8.38333 17.1834 8.27499 16.9167 8.27499 16.6C8.27499 16.2834 8.38333 16.0167 8.59999 15.8L12.4 12L8.59999 8.20002C8.38333 7.98336 8.27499 7.71669 8.27499 7.40002C8.27499 7.08336 8.38333 6.81669 8.59999 6.60002C8.81666 6.38336 9.08333 6.27502 9.39999 6.27502C9.71666 6.27502 9.98333 6.38336 10.2 6.60002L14.8 11.2C14.9167 11.3167 15 11.4417 15.05 11.575C15.1 11.7084 15.125 11.85 15.125 12C15.125 12.15 15.1 12.2917 15.05 12.425C15 12.5584 14.9167 12.6834 14.8 12.8L10.2 17.4C9.98333 17.6167 9.71666 17.725 9.39999 17.725C9.08333 17.725 8.81666 17.6167 8.59999 17.4Z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E\")}.date-picker__previous-month-button{order:2}.date-picker__previous-month-button:after{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg class='swirl-icon swirl-icon--size-24' fill='none' height='24' part='icon' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.2 17.4L8.59999 12.8C8.48333 12.6834 8.39999 12.5584 8.34999 12.425C8.29999 12.2917 8.27499 12.15 8.27499 12C8.27499 11.85 8.29999 11.7084 8.34999 11.575C8.39999 11.4417 8.48333 11.3167 8.59999 11.2L13.2 6.60002C13.4167 6.38336 13.6833 6.27502 14 6.27502C14.3167 6.27502 14.5833 6.38336 14.8 6.60002C15.0167 6.81669 15.125 7.08336 15.125 7.40002C15.125 7.71669 15.0167 7.98336 14.8 8.20002L11 12L14.8 15.8C15.0167 16.0167 15.125 16.2834 15.125 16.6C15.125 16.9167 15.0167 17.1834 14.8 17.4C14.5833 17.6167 14.3167 17.725 14 17.725C13.6833 17.725 13.4167 17.6167 13.2 17.4Z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg class='swirl-icon swirl-icon--size-24' fill='none' height='24' part='icon' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.2 17.4L8.59999 12.8C8.48333 12.6834 8.39999 12.5584 8.34999 12.425C8.29999 12.2917 8.27499 12.15 8.27499 12C8.27499 11.85 8.29999 11.7084 8.34999 11.575C8.39999 11.4417 8.48333 11.3167 8.59999 11.2L13.2 6.60002C13.4167 6.38336 13.6833 6.27502 14 6.27502C14.3167 6.27502 14.5833 6.38336 14.8 6.60002C15.0167 6.81669 15.125 7.08336 15.125 7.40002C15.125 7.71669 15.0167 7.98336 14.8 8.20002L11 12L14.8 15.8C15.0167 16.0167 15.125 16.2834 15.125 16.6C15.125 16.9167 15.0167 17.1834 14.8 17.4C14.5833 17.6167 14.3167 17.725 14 17.725C13.6833 17.725 13.4167 17.6167 13.2 17.4Z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E\")}.date-picker__month-select,.date-picker__year-select{margin:0;padding:0;border:none;background-color:var(--s-surface-overlay-default);font:inherit;font-size:var(--s-font-size-base);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);text-align:left;cursor:pointer}.date-picker__month-select:focus:not(:focus-visible),.date-picker__year-select:focus:not(:focus-visible){outline:none}.date-picker__month-select:focus-visible,.date-picker__year-select:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.date-picker__month-select,.date-picker__year-select{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.date-picker__month-select{-webkit-appearance:none;-moz-appearance:none;appearance:none}.date-picker__year-select{max-width:4rem}.date-picker__calendar{display:block;width:100%}.date-picker__calendar tbody{display:block}.date-picker__calendar-header{display:block}.date-picker__weekday-row,.date-picker__calendar-row{display:flex}.date-picker__weekday-row{margin-bottom:var(--s-space-8)}.date-picker__weekday{display:inline-flex;min-width:2.25rem;flex-basis:calc(100 / 7 * 1%);justify-content:center;align-items:center;color:var(--s-text-subdued);font-weight:var(--s-font-weight-regular);aspect-ratio:1}.date-picker__date{position:relative;z-index:1;display:inline-flex;min-width:2.25rem;flex-basis:calc(100 / 7 * 1%);justify-content:center;align-items:center;font-weight:var(--s-font-weight-medium);cursor:pointer;aspect-ratio:1}.date-picker__date:before{position:absolute;z-index:-1;border-radius:50%;background-color:transparent;content:\"\";inset:0}.date-picker__date:hover:before{background-color:var(--s-surface-overlay-hovered)}.date-picker__date--current:before{background-color:var(--s-surface-overlay-hovered)}.date-picker__date--current:focus:not(:focus-visible){outline:none}.date-picker__date--current:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-2)}.date-picker__date--overflowing{color:var(--s-text-subdued)}.date-picker__date--selected{color:var(--s-text-on-action-primary)}.date-picker__date--selected:before{background-color:var(--s-action-primary-default)}.date-picker__date--selected:hover{color:var(--s-text-on-action-primary)}.date-picker__date--selected:hover:before{background-color:var(--s-action-primary-hovered)}.date-picker__date--selected>strong{font-weight:var(--s-font-weight-medium)}.date-picker__date--in-range:not(.date-picker__date--selected):after{position:absolute;border-radius:0px;background-color:var(--s-action-primary-default);content:\"\";opacity:0.2;inset:0.0625rem 0px}.date-picker__date--start:not(.date-picker__date--end){color:var(--s-text-on-action-primary)}.date-picker__date--start:not(.date-picker__date--end):before{background-color:var(--s-action-primary-default)}.date-picker__date--start:not(.date-picker__date--end):after{position:absolute;z-index:-1;border-radius:0;background-color:var(--s-action-primary-default);content:\"\";opacity:0.2;inset:0.0625rem 0 0.0625rem 50%}.date-picker__date--end:not(.date-picker__date--start){color:var(--s-text-on-action-primary)}.date-picker__date--end:not(.date-picker__date--start):before{background-color:var(--s-action-primary-default)}.date-picker__date--end:not(.date-picker__date--start):after{position:absolute;z-index:-1;border-radius:0;background-color:var(--s-action-primary-default);content:\"\";opacity:0.2;inset:0.0625rem 50% 0.0625rem 0}.date-picker__date--today:before{box-shadow:inset 0 0 0 var(--s-border-width-default)\n      var(--s-border-highlight)}.date-picker__date--today>em{font-style:normal}.date-picker__date--disabled{color:var(--s-text-disabled);cursor:default;pointer-events:none}.date-picker__date--disabled:before{background-color:transparent}.date-picker__date--disabled:hover{color:var(--s-text-disabled)}.date-picker__date--disabled:hover:before{background-color:transparent}";

package/dist/components/swirl-file-viewer-pdf2.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement as HTMLElement$1, createEvent, h, Host } from '@stencil/core/internal/client';
 import { c as classNames } from './index2.js';
 import { c as commonjsGlobal, g as getAugmentedNamespace, a as getDefaultExportFromCjs, b as commonjsRequire } from './_commonjsHelpers.js';
-import { d as debounce, j as getVisibleHeight, i as isMobileViewport } from './utils.js';
+import { d as debounce, k as getVisibleHeight, i as isMobileViewport } from './utils.js';
 import { d as defineCustomElement$4 } from './swirl-icon-error2.js';
 import { d as defineCustomElement$3 } from './swirl-inline-error2.js';
 import { d as defineCustomElement$2 } from './swirl-spinner2.js';

package/dist/components/swirl-modal.js

@@ -7,7 +7,7 @@ import { d as defineCustomElement$4 } from './swirl-button-group2.js';
 import { d as defineCustomElement$3 } from './swirl-heading2.js';
 import { d as defineCustomElement$2 } from './swirl-stack2.js';
 
-const swirlModalCss = ":host{display:block}:host *{box-sizing:border-box}.modal{--swirl-ghost-button-background-default:var(--s-surface-overlay-default);--swirl-ghost-button-background-hovered:var(--s-surface-overlay-hovered);--swirl-ghost-button-background-pressed:var(--s-surface-overlay-pressed);--swirl-resource-list-item-background-default:var(\n    --s-surface-overlay-default\n  );--swirl-resource-list-item-background-hovered:var(\n    --s-surface-overlay-hovered\n  );--swirl-resource-list-item-background-pressed:var(\n    --s-surface-overlay-pressed\n  );--swirl-modal-height:auto;--swirl-modal-max-height:90vh;--swirl-modal-view-height:100vh;--swirl-modal-max-width:40rem;--swirl-modal-footer-padding-small:var(--s-space-12) var(--s-space-16)\n    var(--s-space-12) var(--s-space-16);--swirl-modal-footer-padding-large:var(--s-space-16) var(--s-space-24)\n    var(--s-space-16) var(--s-space-24)}@supports (height: 100dvh){.modal{--swirl-modal-max-height:90dvh;--swirl-modal-view-height:100dvh}}.modal{position:fixed;z-index:var(--s-z-40);display:flex;justify-content:center;align-items:center;height:var(--swirl-modal-view-height);inset:0}.modal[aria-hidden=\"true\"]{display:none}.modal--variant-default.modal--closing{animation:0.15s modal-fade-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.modal--variant-default.modal--closing{animation:none}}.modal--variant-default:not(.modal--closing) .modal__backdrop{animation:0.15s modal-backdrop-fade-in}@media (prefers-reduced-motion){.modal--variant-default:not(.modal--closing) .modal__backdrop{animation:none}}.modal--variant-default:not(.modal--closing) .modal__body{animation:0.15s modal-scale-in}@media (prefers-reduced-motion){.modal--variant-default:not(.modal--closing) .modal__body{animation:none}}.modal--variant-drawer{justify-content:end;align-items:stretch}.modal--variant-drawer.modal--closing{animation:0.15s modal-drawer-slide-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.modal--variant-drawer.modal--closing{animation:none}}@media (min-width: 768px){.modal--variant-drawer.modal--hide-label .modal__header-bar{height:auto;padding-top:var(--s-space-4);padding-bottom:var(--s-space-4)}}.modal--variant-drawer .modal__backdrop{background-color:transparent;animation:none}.modal--variant-drawer .modal__body{height:100%;max-height:none;border-radius:0;animation:0.15s modal-drawer-slide-in;box-shadow:var(--s-shadow-level-3)}@media (prefers-reduced-motion){.modal--variant-drawer .modal__body{animation:none}}.modal--variant-drawer .modal__header-bar{background-color:var(--s-surface-overlay-default)}.modal--variant-drawer .modal__header-bar .modal__close-button{margin-left:calc(-1 * var(--s-space-8))}@media (min-width: 768px){.modal--variant-drawer .modal__header-bar{flex-direction:row}}@media (min-width: 768px){.modal--variant-drawer.modal--padded .modal__content{padding-top:var(--s-space-8)}}.modal--padded .modal__content{padding-top:var(--s-space-24);padding-right:var(--s-space-16);padding-bottom:var(--s-space-24);padding-left:var(--s-space-16)}@media (min-width: 768px){.modal--padded .modal__content{padding-top:0;padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-left:var(--s-space-24)}}@media (min-width: 768px){.modal--scrollable .modal__content{padding-bottom:0}}.modal--scrollable:not(.modal--scrolled-down).modal--has-custom-footer .modal__custom-footer{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal--scrollable:not(.modal--scrolled-down):not(.modal--has-custom-footer) .modal__controls{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal--has-custom-header .modal__custom-header{display:block}.modal--has-custom-header .modal__content{padding-top:var(--s-space-16)}.modal--has-custom-footer .modal__custom-footer{padding:var(--swirl-modal-footer-padding-small)}@media (min-width: 768px){.modal--has-custom-footer .modal__custom-footer{padding:var(--swirl-modal-footer-padding-large)}}.modal--has-header-tools .modal__header{border-bottom-color:transparent}.modal--has-header-tools .modal__header-tools{display:block}.modal--has-secondary-content .modal__body{max-width:64rem}.modal--has-secondary-content:not(.modal--has-header-tools):not(.modal--hide-secondary-content-borders) .modal__header{border-bottom-color:var(--s-border-default)}.modal--has-secondary-content.modal--has-header-tools:not(.modal--hide-secondary-content-borders) .modal__header-tools{border-bottom-color:var(--s-border-default)}.modal--has-secondary-content.modal--has-custom-footer:not(.modal--hide-secondary-content-borders) .modal__custom-footer{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal--has-secondary-content:not(.modal--has-custom-footer):not(.modal--hide-secondary-content-borders) .modal__controls{border-top:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 992px){.modal--has-secondary-content .modal__header-tools,.modal--has-secondary-content .modal__content{padding-right:0}}.modal--has-secondary-content .modal__primary-content{overflow:visible;max-height:60%;flex-basis:auto}@media (min-width: 992px){.modal--has-secondary-content .modal__primary-content{max-width:calc(100% - 24rem);max-height:none;flex-basis:calc(100% - 24rem)}}.modal--has-secondary-content .modal__secondary-content{display:block}@media (min-width: 768px){.modal--scrolled:not(.modal--has-header-tools) .modal__header{border-bottom-color:var(--s-border-default)}.modal--scrolled.modal--has-header-tools .modal__header-tools{border-bottom-color:var(--s-border-default)}}.modal__backdrop{position:fixed;background-color:rgba(0, 0, 0, 0.2);inset:0}.modal__body{--swirl-card-background-default:var(--s-surface-overlay-default);--swirl-card-background-hovered:var(--s-surface-overlay-hovered);--swirl-card-background-pressed:var(--s-surface-overlay-pressed);--swirl-accordion-item-toggle-default:var(--s-surface-overlay-default);--swirl-accordion-item-toggle-hovered:var(--s-surface-overlay-hovered);--swirl-accordion-item-toggle-pressed:var(--s-surface-overlay-pressed);position:relative;z-index:var(--s-z-40);display:flex;overflow:hidden;width:100vw;height:var(--swirl-modal-view-height);background-color:var(--s-surface-overlay-default);flex-direction:column}@media (min-width: 768px){.modal__body{width:90vw;max-width:var(--swirl-modal-max-width);max-height:var(--swirl-modal-max-height);border-radius:var(--s-border-radius-base);box-shadow:var(--s-shadow-level-3)}}@media (min-width: 992px){.modal__body{height:var(--swirl-modal-height)}}.modal__header{border-bottom:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 768px){.modal__header{border-bottom:var(--s-border-width-default) solid transparent}}.modal__header-bar{display:flex;height:3.5rem;padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:var(--s-space-16);flex-shrink:0;align-items:center;gap:var(--s-space-8)}@media (min-width: 768px){.modal__header-bar{height:3.75rem;padding-top:var(--s-space-12);padding-right:var(--s-space-24);padding-bottom:var(--s-space-12);padding-left:var(--s-space-24);flex-direction:row-reverse;gap:var(--s-space-16)}}.modal__header-tools{display:none;padding-right:var(--s-space-16);padding-left:var(--s-space-16);border-bottom:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 768px){.modal__header-tools{padding-right:var(--s-space-24);padding-left:var(--s-space-24);border-bottom-color:transparent}}.modal__custom-header{display:none;flex-shrink:0;border-bottom:var(--s-border-width-default) solid var(--s-border-default)}.modal__heading{overflow:hidden}.modal__heading .heading{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.modal__content-container{display:flex;overflow:hidden;flex-grow:1;flex-direction:column;gap:var(--s-space-24)}@media (min-width: 992px){.modal__content-container{flex-direction:row}}.modal__primary-content{display:flex;overflow:hidden;flex-basis:100%;flex-direction:column}.modal__content{overflow-x:hidden;overflow-y:auto;height:100%}.modal__content ::slotted(*){margin:0}.modal__secondary-content{display:none;overflow:visible;overflow-x:hidden;overflow-y:auto;max-width:none;max-height:40%;padding-right:var(--s-space-16);padding-left:var(--s-space-16)}@media (min-width: 768px){.modal__secondary-content{padding-left:var(--s-space-24)}}@media (min-width: 992px){.modal__secondary-content{overflow-x:hidden;overflow-y:auto;max-width:24rem;max-height:none;padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-left:0;flex-basis:50%}}.modal__custom-footer{flex-shrink:0}.modal__controls{display:flex;padding:var(--swirl-modal-footer-padding-small);flex-shrink:0;justify-content:flex-end}@media (min-width: 768px){.modal__controls{padding:var(--swirl-modal-footer-padding-large)}}@keyframes modal-scale-in{from{transform:scale(0)}to{transform:scale(1)}}@keyframes modal-backdrop-fade-in{from{opacity:0}to{opacity:1}}@keyframes modal-fade-out{from{opacity:1}to{opacity:0}}@keyframes modal-drawer-slide-in{from{transform:translate3d(100%, 0, 0)}to{transform:translate3d(0, 0, 0)}}@keyframes modal-drawer-slide-out{from{transform:translate3d(0, 0, 0)}to{transform:translate3d(100%, 0, 0)}}";
+const swirlModalCss = ":host{display:block}:host *{box-sizing:border-box}.modal{--swirl-ghost-button-background-default:var(--s-surface-overlay-default);--swirl-ghost-button-background-hovered:var(--s-surface-overlay-hovered);--swirl-ghost-button-background-pressed:var(--s-surface-overlay-pressed);--swirl-resource-list-item-background-default:var(\n    --s-surface-overlay-default\n  );--swirl-resource-list-item-background-hovered:var(\n    --s-surface-overlay-hovered\n  );--swirl-resource-list-item-background-pressed:var(\n    --s-surface-overlay-pressed\n  );--swirl-modal-height:auto;--swirl-modal-max-height:90vh;--swirl-modal-view-height:100vh;--swirl-modal-max-width:40rem;--swirl-modal-footer-padding-small:var(--s-space-12) var(--s-space-16)\n    var(--s-space-12) var(--s-space-16);--swirl-modal-footer-padding-large:var(--s-space-16) var(--s-space-24)\n    var(--s-space-16) var(--s-space-24)}@supports (height: 100dvh){.modal{--swirl-modal-max-height:90dvh;--swirl-modal-view-height:100dvh}}.modal{position:fixed;z-index:var(--s-z-40);display:flex;justify-content:center;align-items:center;height:var(--swirl-modal-view-height);inset:0}.modal[aria-hidden=\"true\"]{display:none}.modal--variant-default.modal--closing{animation:0.15s modal-fade-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.modal--variant-default.modal--closing{animation:none}}.modal--variant-default:not(.modal--closing) .modal__backdrop{animation:0.15s modal-backdrop-fade-in}@media (prefers-reduced-motion){.modal--variant-default:not(.modal--closing) .modal__backdrop{animation:none}}.modal--variant-default:not(.modal--closing) .modal__body{animation:0.15s modal-scale-in}@media (prefers-reduced-motion){.modal--variant-default:not(.modal--closing) .modal__body{animation:none}}.modal--variant-drawer{justify-content:end;align-items:stretch}.modal--variant-drawer.modal--closing{animation:0.15s modal-drawer-slide-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.modal--variant-drawer.modal--closing{animation:none}}@media (min-width: 768px){.modal--variant-drawer.modal--hide-label .modal__header-bar{height:auto;padding-top:var(--s-space-4);padding-bottom:var(--s-space-4)}}.modal--variant-drawer .modal__backdrop{background-color:transparent;animation:none}.modal--variant-drawer .modal__body{height:100%;max-height:none;border-radius:0;animation:0.15s modal-drawer-slide-in;box-shadow:var(--s-shadow-level-3)}@media (prefers-reduced-motion){.modal--variant-drawer .modal__body{animation:none}}.modal--variant-drawer .modal__header-bar{background-color:var(--s-surface-overlay-default)}.modal--variant-drawer .modal__header-bar .modal__close-button{margin-left:calc(-1 * var(--s-space-8))}@media (min-width: 768px){.modal--variant-drawer .modal__header-bar{flex-direction:row}}@media (min-width: 768px){.modal--variant-drawer.modal--padded .modal__content{padding-top:var(--s-space-8)}}.modal--padded .modal__content{padding-top:var(--s-space-24);padding-right:var(--s-space-16);padding-bottom:var(--s-space-24);padding-left:var(--s-space-16)}@media (min-width: 768px){.modal--padded .modal__content{padding-top:0;padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-left:var(--s-space-24)}}@media (min-width: 768px){.modal--scrollable .modal__content{padding-bottom:0}}.modal--scrollable:not(.modal--scrolled-down).modal--has-custom-footer .modal__custom-footer{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal--scrollable:not(.modal--scrolled-down):not(.modal--has-custom-footer) .modal__controls{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal--has-custom-header .modal__custom-header{display:block}.modal--has-custom-header .modal__content{padding-top:var(--s-space-16)}.modal--has-custom-footer .modal__custom-footer{padding:var(--swirl-modal-footer-padding-small)}@media (min-width: 768px){.modal--has-custom-footer .modal__custom-footer{padding:var(--swirl-modal-footer-padding-large)}}.modal--has-header-tools .modal__header{border-bottom-color:transparent}.modal--has-header-tools .modal__header-tools{display:block}.modal--has-secondary-content .modal__body{max-width:64rem}.modal--has-secondary-content:not(.modal--has-header-tools):not(.modal--hide-secondary-content-borders) .modal__header{border-bottom-color:var(--s-border-default)}.modal--has-secondary-content.modal--has-header-tools:not(.modal--hide-secondary-content-borders) .modal__header-tools{border-bottom-color:var(--s-border-default)}.modal--has-secondary-content.modal--has-custom-footer:not(.modal--hide-secondary-content-borders) .modal__custom-footer{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal--has-secondary-content:not(.modal--has-custom-footer):not(.modal--hide-secondary-content-borders) .modal__controls{border-top:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 992px){.modal--has-secondary-content .modal__header-tools,.modal--has-secondary-content .modal__content{padding-right:0}}.modal--has-secondary-content .modal__primary-content{overflow:visible;max-height:60%;flex-basis:auto}@media (min-width: 992px){.modal--has-secondary-content .modal__primary-content{max-width:calc(100% - 24rem);max-height:none;flex-basis:calc(100% - 24rem)}}.modal--has-secondary-content .modal__secondary-content{display:block}@media (min-width: 768px){.modal--scrolled:not(.modal--has-header-tools) .modal__header{border-bottom-color:var(--s-border-default)}.modal--scrolled.modal--has-header-tools .modal__header-tools{border-bottom-color:var(--s-border-default)}.modal--scrolled .modal__custom-header{border-bottom-color:var(--s-border-default)}}.modal__backdrop{position:fixed;background-color:rgba(0, 0, 0, 0.2);inset:0}.modal__body{--swirl-card-background-default:var(--s-surface-overlay-default);--swirl-card-background-hovered:var(--s-surface-overlay-hovered);--swirl-card-background-pressed:var(--s-surface-overlay-pressed);--swirl-accordion-item-toggle-default:var(--s-surface-overlay-default);--swirl-accordion-item-toggle-hovered:var(--s-surface-overlay-hovered);--swirl-accordion-item-toggle-pressed:var(--s-surface-overlay-pressed);position:relative;z-index:var(--s-z-40);display:flex;overflow:hidden;width:100vw;height:var(--swirl-modal-view-height);background-color:var(--s-surface-overlay-default);flex-direction:column}@media (min-width: 768px){.modal__body{width:90vw;max-width:var(--swirl-modal-max-width);max-height:var(--swirl-modal-max-height);border-radius:var(--s-border-radius-base);box-shadow:var(--s-shadow-level-3)}}@media (min-width: 992px){.modal__body{height:var(--swirl-modal-height)}}.modal__header{border-bottom:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 768px){.modal__header{border-bottom:var(--s-border-width-default) solid transparent}}.modal__header-bar{display:flex;height:3.5rem;padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:var(--s-space-16);flex-shrink:0;align-items:center;gap:var(--s-space-8)}@media (min-width: 768px){.modal__header-bar{height:3.75rem;padding-top:var(--s-space-12);padding-right:var(--s-space-24);padding-bottom:var(--s-space-12);padding-left:var(--s-space-24);flex-direction:row-reverse;gap:var(--s-space-16)}}.modal__header-tools{display:none;padding-right:var(--s-space-16);padding-left:var(--s-space-16);border-bottom:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 768px){.modal__header-tools{padding-right:var(--s-space-24);padding-left:var(--s-space-24);border-bottom-color:transparent}}.modal__custom-header{display:none;flex-shrink:0;border-bottom:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 768px){.modal__custom-header{border-bottom-color:transparent}}.modal__heading{overflow:hidden}.modal__heading .heading{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.modal__content-container{display:flex;overflow:hidden;flex-grow:1;flex-direction:column;gap:var(--s-space-24)}@media (min-width: 992px){.modal__content-container{flex-direction:row}}.modal__primary-content{display:flex;overflow:hidden;flex-basis:100%;flex-direction:column}.modal__content{overflow-x:hidden;overflow-y:auto;height:100%}.modal__content ::slotted(*){margin:0}.modal__secondary-content{display:none;overflow:visible;overflow-x:hidden;overflow-y:auto;max-width:none;max-height:40%;padding-right:var(--s-space-16);padding-left:var(--s-space-16)}@media (min-width: 768px){.modal__secondary-content{padding-left:var(--s-space-24)}}@media (min-width: 992px){.modal__secondary-content{overflow-x:hidden;overflow-y:auto;max-width:24rem;max-height:none;padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-left:0;flex-basis:50%}}.modal__custom-footer{flex-shrink:0}.modal__controls{display:flex;padding:var(--swirl-modal-footer-padding-small);flex-shrink:0;justify-content:flex-end}@media (min-width: 768px){.modal__controls{padding:var(--swirl-modal-footer-padding-large)}}@keyframes modal-scale-in{from{transform:scale(0)}to{transform:scale(1)}}@keyframes modal-backdrop-fade-in{from{opacity:0}to{opacity:1}}@keyframes modal-fade-out{from{opacity:1}to{opacity:0}}@keyframes modal-drawer-slide-in{from{transform:translate3d(100%, 0, 0)}to{transform:translate3d(0, 0, 0)}}@keyframes modal-drawer-slide-out{from{transform:translate3d(0, 0, 0)}to{transform:translate3d(100%, 0, 0)}}";
 const SwirlModalStyle0 = swirlModalCss;
 
 const SwirlModal$1 = /*@__PURE__*/ proxyCustomElement(class SwirlModal extends HTMLElement {