@getflip/swirl-components 0.447.0 → 0.448.0

package/dist/collection/components/swirl-popover/swirl-popover.css

@@ -197,7 +197,8 @@
     background: var(--s-translucent-low-default);
     -webkit-backdrop-filter: blur(var(--s-blur-l));
             backdrop-filter: blur(var(--s-blur-l));
-    outline: var(--s-border-width-default) solid var(--s-border-translucent-outline);
+    outline: var(--s-border-width-default) solid
+      var(--s-border-translucent-outline);
   }
 
 .popover--translucent .popover__handle {
@@ -244,8 +245,11 @@
     right: unset;
     bottom: unset;
     left: unset;
+    border-radius: var(
+      --swirl-popover-border-radius,
+      var(--s-border-radius-base)
+    );
     max-width: 22.5rem;
-    border-radius: var(--s-border-radius-base);
     animation: none;
     box-shadow: var(--s-shadow-level-2)
 }

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

@@ -2,8 +2,9 @@ import { autoUpdate, computePosition, flip, offset, shift, } from "@floating-ui/
 import { h, Host, } from "@stencil/core";
 import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock";
 import classnames from "classnames";
-import { getActiveElement, getPixelsFromRemToken, isMobileViewport, querySelectorAllDeep, } from "../../utils";
 import { tabbable } from "tabbable";
+import { getActiveElement, getPixelsFromRemToken, isMobileViewport, querySelectorAllDeep, } from "../../utils";
+const swirlPopoverBorderRadiusTokens = ["xs", "sm", "base", "l", "xl"];
 /**
  * @slot slot - The popover content.
  */
@@ -16,6 +17,7 @@ export class SwirlPopover {
         this.padded = true;
         this.placement = "bottom-start";
         this.returnFocusToTrigger = true;
+        this.borderRadius = "base";
         this.active = false;
         this.closing = false;
         this.togglePopover = (event) => {
@@ -286,6 +288,9 @@ export class SwirlPopover {
     }
     render() {
         const mobile = !window.matchMedia("(min-width: 768px)").matches;
+        const borderRadius = swirlPopoverBorderRadiusTokens.includes(this.borderRadius)
+            ? `var(--s-border-radius-${this.borderRadius})`
+            : this.borderRadius;
         const className = classnames("popover", `popover--animation-${this.animation}`, `popover--placement-${this.position?.placement}`, {
             "popover--active": this.active,
             "popover--closing": this.closing,
@@ -295,14 +300,15 @@ export class SwirlPopover {
             "popover--transparent": this.transparent,
             "popover--padded": this.padded,
         });
-        return (h(Host, { key: '39ae7696ee83b03e68bd73de64b339f86350ba27' }, h("div", { key: '185309886173bcf9ddf5d4c1ab0c2e7eafd3d61c', popover: "manual", class: className, onKeyDown: this.onKeydown, ref: (el) => (this.popoverEl = el) }, h("div", { key: '3de117dc62ca81de759ecd6be3bb9d2fb526e894', "aria-hidden": !this.active ? "true" : "false", "aria-label": this.label, class: "popover__content", id: this.popoverId, part: "popover__content", role: "dialog", ref: (el) => (this.contentContainer = el), style: {
+        return (h(Host, { key: 'a2a763e0cf93585b67adfca26fcf24fbd62ffd70' }, h("div", { key: '245f55eba39ea78e9451998a4f306ceb3c144749', popover: "manual", class: className, onKeyDown: this.onKeydown, ref: (el) => (this.popoverEl = el) }, h("div", { key: '971e861993eba21da4404d93ecabe6ff098a23ce', "aria-hidden": !this.active ? "true" : "false", "aria-label": this.label, class: "popover__content", id: this.popoverId, part: "popover__content", role: "dialog", ref: (el) => (this.contentContainer = el), style: {
                 top: Boolean(this.position) ? `${this.position?.y}px` : "",
                 left: Boolean(this.position) ? `${this.position?.x}px` : "",
-            }, tabindex: "-1" }, h("span", { key: 'c95c1196115de24cf5174822d16213bff34d0a88', class: "popover__handle" }), h("div", { key: 'f811b8d69483f0bb09eba756405e51dd6662ebc1', class: "popover__scroll-container", part: "popover__scroll-container", ref: (el) => (this.scrollContainer = el), style: {
+                "--swirl-popover-border-radius": borderRadius,
+            }, tabindex: "-1" }, h("span", { key: '76f0726441b1f18753b8215c65ce2c62c262d73c', class: "popover__handle" }), h("div", { key: '633139376e5cabfa0ead3985b60154fbbb803fa1', class: "popover__scroll-container", part: "popover__scroll-container", ref: (el) => (this.scrollContainer = el), style: {
                 maxHeight: !mobile && Boolean(this.maxHeight)
                     ? this.maxHeight
                     : undefined,
-            } }, h("slot", { key: 'f53af8e67d43f2adb425145529f00375dcbc2814' }))), this.active && (h("div", { key: '6ffeeeeb9b46325bb83e64eac66eeb84eb35a3b1', class: "popover__backdrop", onClick: this.onCloseButtonClick })))));
+            } }, h("slot", { key: 'cec72df14222730bf06ee988e64b1ea6b296ed8c' }))), this.active && (h("div", { key: 'bad63d1ee57e5a7cc845fe2effead56b0399e233', class: "popover__backdrop", onClick: this.onCloseButtonClick })))));
     }
     static get is() { return "swirl-popover"; }
     static get encapsulation() { return "shadow"; }
@@ -649,6 +655,32 @@ export class SwirlPopover {
                 "getter": false,
                 "setter": false,
                 "reflect": false
+            },
+            "borderRadius": {
+                "type": "string",
+                "attribute": "border-radius",
+                "mutable": false,
+                "complexType": {
+                    "original": "SwirlPopoverBorderRadius",
+                    "resolved": "string",
+                    "references": {
+                        "SwirlPopoverBorderRadius": {
+                            "location": "local",
+                            "path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-popover/swirl-popover.tsx",
+                            "id": "src/components/swirl-popover/swirl-popover.tsx::SwirlPopoverBorderRadius"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"base\""
             }
         };
     }

package/dist/components/swirl-popover2.js

@@ -2,11 +2,12 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { c as computePosition, a as autoUpdate, s as shift, o as offset, f as flip } from './floating-ui.dom.js';
 import { d as disableBodyScroll, e as enableBodyScroll } from './bodyScrollLock.esm.js';
 import { c as classNames } from './index2.js';
-import { i as isMobileViewport, t as getPixelsFromRemToken, k as getActiveElement, q as querySelectorAllDeep } from './utils.js';
 import { t as tabbable } from './index.esm.js';
+import { i as isMobileViewport, t as getPixelsFromRemToken, k as getActiveElement, q as querySelectorAllDeep } from './utils.js';
 
-const swirlPopoverCss = ":host{position:relative;z-index:var(--s-z-40);display:contents}:host *{box-sizing:border-box}.popover{border:none;padding:0;margin:0}.popover::backdrop{display:none}.popover--active:not(.popover--closing) .popover__backdrop{animation:0.15s popover-fade-in}@media (prefers-reduced-motion){.popover--active:not(.popover--closing) .popover__backdrop{animation:none}}.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-slide-in}@media (min-width: 768px){.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-fade-scale-in-xy}}@media (prefers-reduced-motion){.popover--active:not(.popover--closing) .popover__content{animation:none}}.popover--closing .popover__backdrop{animation:0.15s popover-fade-out forwards}@media (prefers-reduced-motion){.popover--closing .popover__backdrop{animation:none}}.popover--closing .popover__content{animation:0.15s popover-slide-out forwards}@media (min-width: 768px){.popover--closing .popover__content{animation:0.15s popover-fade-out forwards}}@media (prefers-reduced-motion){.popover--closing .popover__content{animation:none}}.popover--inactive .popover__content{display:none}@media (max-width: 767px){.popover--fullscreen-bottom-sheet.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-fade-in}@media (prefers-reduced-motion){.popover--fullscreen-bottom-sheet.popover--active:not(.popover--closing) .popover__content{animation:none}}.popover--fullscreen-bottom-sheet.popover--closing .popover__content{animation:0.15s popover-fade-out forwards}@media (prefers-reduced-motion){.popover--fullscreen-bottom-sheet.popover--closing .popover__content{animation:none}}.popover--fullscreen-bottom-sheet .popover__backdrop{display:none}.popover--fullscreen-bottom-sheet .popover__content{top:0;border-top-left-radius:0;border-top-right-radius:0}.popover--fullscreen-bottom-sheet .popover__scroll-container{height:100%;max-height:none;padding-top:0;padding-bottom:0}.popover--fullscreen-bottom-sheet .popover__handle{display:none}}@media (min-width: 768px){.popover--animation-scale-in-y.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-fade-scale-in-y}}@media (prefers-reduced-motion){.popover--animation-scale-in-y.popover--active:not(.popover--closing) .popover__content{animation:none}}@media (min-width: 768px){.popover--animation-fade-in.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-fade-in}}@media (prefers-reduced-motion){.popover--animation-fade-in.popover--active:not(.popover--closing) .popover__content{animation:none}}@media (min-width: 768px){.popover--placement-bottom .popover__content,.popover--placement-bottom-start .popover__content,.popover--placement-right .popover__content,.popover--placement-right-start .popover__content{transform-origin:top left}}@media (min-width: 768px){.popover--placement-bottom-end .popover__content,.popover--placement-left .popover__content,.popover--placement-left-start .popover__content{transform-origin:top right}}@media (min-width: 768px){.popover--placement-top .popover__content,.popover--placement-top-start .popover__content,.popover--placement-right-end .popover__content{transform-origin:bottom left}}@media (min-width: 768px){.popover--placement-top-end .popover__content,.popover--placement-left-end .popover__content{transform-origin:bottom right}}@media (min-width: 768px){.popover--transparent .popover__content{background-color:transparent;box-shadow:none}}@media (min-width: 768px){.popover--transparent .popover__scroll-container{padding:0}}.popover--translucent .popover__content{background:var(--s-translucent-low-default);-webkit-backdrop-filter:blur(var(--s-blur-l));backdrop-filter:blur(var(--s-blur-l));outline:var(--s-border-width-default) solid var(--s-border-translucent-outline)}.popover--translucent .popover__handle{background-color:var(--s-border-on-translucent)}.popover__backdrop{position:fixed;z-index:0;background-color:rgba(0, 0, 0, 0.2);animation:0.15s popover-backdrop-fade-in;inset:0}@media (prefers-reduced-motion){.popover__backdrop{animation:none}}@media (min-width: 768px){.popover__backdrop{display:none}}.popover__content{position:fixed;z-index:2;right:0;bottom:0;left:0;overflow:hidden;border-top-left-radius:var(--s-border-radius-xl);border-top-right-radius:var(--s-border-radius-xl);background-color:var(--s-surface-overlay-default)}@media (min-width: 768px){.popover__content{right:unset;bottom:unset;left:unset;max-width:22.5rem;border-radius:var(--s-border-radius-base);animation:none;box-shadow:var(--s-shadow-level-2)}}.popover__scroll-container{overflow-x:hidden;overflow-y:auto;width:100%;max-height:90vh;padding-top:var(--s-space-24);padding-bottom:var(--s-space-24);overscroll-behavior:contain}@media (min-width: 768px){.popover__scroll-container{max-height:22rem;padding-top:0;padding-bottom:0}}@media (min-width: 768px){.popover--padded .popover__scroll-container{padding:var(--s-space-4)}}.popover__handle{position:absolute;top:var(--s-space-8);left:50%;width:2.5rem;height:0.375rem;border-radius:0.1875rem;background-color:var(--s-border-default);transform:translatex(-50%)}@media (min-width: 768px){.popover__handle{display:none}}@keyframes popover-slide-in{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes popover-slide-out{from{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes popover-fade-in{from{opacity:0}to{opacity:1}}@keyframes popover-fade-out{from{opacity:1}to{opacity:0}}@keyframes popover-fade-scale-in-xy{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@keyframes popover-fade-scale-in-y{from{transform:scaleY(0);opacity:0}to{transform:scaleY(1);opacity:1}}";
+const swirlPopoverCss = ":host{position:relative;z-index:var(--s-z-40);display:contents}:host *{box-sizing:border-box}.popover{border:none;padding:0;margin:0}.popover::backdrop{display:none}.popover--active:not(.popover--closing) .popover__backdrop{animation:0.15s popover-fade-in}@media (prefers-reduced-motion){.popover--active:not(.popover--closing) .popover__backdrop{animation:none}}.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-slide-in}@media (min-width: 768px){.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-fade-scale-in-xy}}@media (prefers-reduced-motion){.popover--active:not(.popover--closing) .popover__content{animation:none}}.popover--closing .popover__backdrop{animation:0.15s popover-fade-out forwards}@media (prefers-reduced-motion){.popover--closing .popover__backdrop{animation:none}}.popover--closing .popover__content{animation:0.15s popover-slide-out forwards}@media (min-width: 768px){.popover--closing .popover__content{animation:0.15s popover-fade-out forwards}}@media (prefers-reduced-motion){.popover--closing .popover__content{animation:none}}.popover--inactive .popover__content{display:none}@media (max-width: 767px){.popover--fullscreen-bottom-sheet.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-fade-in}@media (prefers-reduced-motion){.popover--fullscreen-bottom-sheet.popover--active:not(.popover--closing) .popover__content{animation:none}}.popover--fullscreen-bottom-sheet.popover--closing .popover__content{animation:0.15s popover-fade-out forwards}@media (prefers-reduced-motion){.popover--fullscreen-bottom-sheet.popover--closing .popover__content{animation:none}}.popover--fullscreen-bottom-sheet .popover__backdrop{display:none}.popover--fullscreen-bottom-sheet .popover__content{top:0;border-top-left-radius:0;border-top-right-radius:0}.popover--fullscreen-bottom-sheet .popover__scroll-container{height:100%;max-height:none;padding-top:0;padding-bottom:0}.popover--fullscreen-bottom-sheet .popover__handle{display:none}}@media (min-width: 768px){.popover--animation-scale-in-y.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-fade-scale-in-y}}@media (prefers-reduced-motion){.popover--animation-scale-in-y.popover--active:not(.popover--closing) .popover__content{animation:none}}@media (min-width: 768px){.popover--animation-fade-in.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-fade-in}}@media (prefers-reduced-motion){.popover--animation-fade-in.popover--active:not(.popover--closing) .popover__content{animation:none}}@media (min-width: 768px){.popover--placement-bottom .popover__content,.popover--placement-bottom-start .popover__content,.popover--placement-right .popover__content,.popover--placement-right-start .popover__content{transform-origin:top left}}@media (min-width: 768px){.popover--placement-bottom-end .popover__content,.popover--placement-left .popover__content,.popover--placement-left-start .popover__content{transform-origin:top right}}@media (min-width: 768px){.popover--placement-top .popover__content,.popover--placement-top-start .popover__content,.popover--placement-right-end .popover__content{transform-origin:bottom left}}@media (min-width: 768px){.popover--placement-top-end .popover__content,.popover--placement-left-end .popover__content{transform-origin:bottom right}}@media (min-width: 768px){.popover--transparent .popover__content{background-color:transparent;box-shadow:none}}@media (min-width: 768px){.popover--transparent .popover__scroll-container{padding:0}}.popover--translucent .popover__content{background:var(--s-translucent-low-default);-webkit-backdrop-filter:blur(var(--s-blur-l));backdrop-filter:blur(var(--s-blur-l));outline:var(--s-border-width-default) solid\n      var(--s-border-translucent-outline)}.popover--translucent .popover__handle{background-color:var(--s-border-on-translucent)}.popover__backdrop{position:fixed;z-index:0;background-color:rgba(0, 0, 0, 0.2);animation:0.15s popover-backdrop-fade-in;inset:0}@media (prefers-reduced-motion){.popover__backdrop{animation:none}}@media (min-width: 768px){.popover__backdrop{display:none}}.popover__content{position:fixed;z-index:2;right:0;bottom:0;left:0;overflow:hidden;border-top-left-radius:var(--s-border-radius-xl);border-top-right-radius:var(--s-border-radius-xl);background-color:var(--s-surface-overlay-default)}@media (min-width: 768px){.popover__content{right:unset;bottom:unset;left:unset;border-radius:var(\n      --swirl-popover-border-radius,\n      var(--s-border-radius-base)\n    );max-width:22.5rem;animation:none;box-shadow:var(--s-shadow-level-2)}}.popover__scroll-container{overflow-x:hidden;overflow-y:auto;width:100%;max-height:90vh;padding-top:var(--s-space-24);padding-bottom:var(--s-space-24);overscroll-behavior:contain}@media (min-width: 768px){.popover__scroll-container{max-height:22rem;padding-top:0;padding-bottom:0}}@media (min-width: 768px){.popover--padded .popover__scroll-container{padding:var(--s-space-4)}}.popover__handle{position:absolute;top:var(--s-space-8);left:50%;width:2.5rem;height:0.375rem;border-radius:0.1875rem;background-color:var(--s-border-default);transform:translatex(-50%)}@media (min-width: 768px){.popover__handle{display:none}}@keyframes popover-slide-in{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes popover-slide-out{from{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes popover-fade-in{from{opacity:0}to{opacity:1}}@keyframes popover-fade-out{from{opacity:1}to{opacity:0}}@keyframes popover-fade-scale-in-xy{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@keyframes popover-fade-scale-in-y{from{transform:scaleY(0);opacity:0}to{transform:scaleY(1);opacity:1}}";
 
+const swirlPopoverBorderRadiusTokens = ["xs", "sm", "base", "l", "xl"];
 const SwirlPopover = /*@__PURE__*/ proxyCustomElement(class SwirlPopover extends HTMLElement {
     constructor() {
         super();
@@ -21,6 +22,7 @@ const SwirlPopover = /*@__PURE__*/ proxyCustomElement(class SwirlPopover extends
         this.padded = true;
         this.placement = "bottom-start";
         this.returnFocusToTrigger = true;
+        this.borderRadius = "base";
         this.active = false;
         this.closing = false;
         this.togglePopover = (event) => {
@@ -291,6 +293,9 @@ const SwirlPopover = /*@__PURE__*/ proxyCustomElement(class SwirlPopover extends
     }
     render() {
         const mobile = !window.matchMedia("(min-width: 768px)").matches;
+        const borderRadius = swirlPopoverBorderRadiusTokens.includes(this.borderRadius)
+            ? `var(--s-border-radius-${this.borderRadius})`
+            : this.borderRadius;
         const className = classNames("popover", `popover--animation-${this.animation}`, `popover--placement-${this.position?.placement}`, {
             "popover--active": this.active,
             "popover--closing": this.closing,
@@ -300,14 +305,15 @@ const SwirlPopover = /*@__PURE__*/ proxyCustomElement(class SwirlPopover extends
             "popover--transparent": this.transparent,
             "popover--padded": this.padded,
         });
-        return (h(Host, { key: '39ae7696ee83b03e68bd73de64b339f86350ba27' }, h("div", { key: '185309886173bcf9ddf5d4c1ab0c2e7eafd3d61c', popover: "manual", class: className, onKeyDown: this.onKeydown, ref: (el) => (this.popoverEl = el) }, h("div", { key: '3de117dc62ca81de759ecd6be3bb9d2fb526e894', "aria-hidden": !this.active ? "true" : "false", "aria-label": this.label, class: "popover__content", id: this.popoverId, part: "popover__content", role: "dialog", ref: (el) => (this.contentContainer = el), style: {
+        return (h(Host, { key: 'a2a763e0cf93585b67adfca26fcf24fbd62ffd70' }, h("div", { key: '245f55eba39ea78e9451998a4f306ceb3c144749', popover: "manual", class: className, onKeyDown: this.onKeydown, ref: (el) => (this.popoverEl = el) }, h("div", { key: '971e861993eba21da4404d93ecabe6ff098a23ce', "aria-hidden": !this.active ? "true" : "false", "aria-label": this.label, class: "popover__content", id: this.popoverId, part: "popover__content", role: "dialog", ref: (el) => (this.contentContainer = el), style: {
                 top: Boolean(this.position) ? `${this.position?.y}px` : "",
                 left: Boolean(this.position) ? `${this.position?.x}px` : "",
-            }, tabindex: "-1" }, h("span", { key: 'c95c1196115de24cf5174822d16213bff34d0a88', class: "popover__handle" }), h("div", { key: 'f811b8d69483f0bb09eba756405e51dd6662ebc1', class: "popover__scroll-container", part: "popover__scroll-container", ref: (el) => (this.scrollContainer = el), style: {
+                "--swirl-popover-border-radius": borderRadius,
+            }, tabindex: "-1" }, h("span", { key: '76f0726441b1f18753b8215c65ce2c62c262d73c', class: "popover__handle" }), h("div", { key: '633139376e5cabfa0ead3985b60154fbbb803fa1', class: "popover__scroll-container", part: "popover__scroll-container", ref: (el) => (this.scrollContainer = el), style: {
                 maxHeight: !mobile && Boolean(this.maxHeight)
                     ? this.maxHeight
                     : undefined,
-            } }, h("slot", { key: 'f53af8e67d43f2adb425145529f00375dcbc2814' }))), this.active && (h("div", { key: '6ffeeeeb9b46325bb83e64eac66eeb84eb35a3b1', class: "popover__backdrop", onClick: this.onCloseButtonClick })))));
+            } }, h("slot", { key: 'cec72df14222730bf06ee988e64b1ea6b296ed8c' }))), this.active && (h("div", { key: 'bad63d1ee57e5a7cc845fe2effead56b0399e233', class: "popover__backdrop", onClick: this.onCloseButtonClick })))));
     }
     get el() { return this; }
     static get style() { return swirlPopoverCss; }
@@ -328,6 +334,7 @@ const SwirlPopover = /*@__PURE__*/ proxyCustomElement(class SwirlPopover extends
         "trigger": [1],
         "triggerContainer": [16, "trigger-container"],
         "useContainerWidth": [8, "use-container-width"],
+        "borderRadius": [1, "border-radius"],
         "active": [32],
         "closing": [32],
         "position": [32],