@getflip/swirl-components 0.5.0 → 0.6.0

package/dist/components/flip-icon-help.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface FlipIconHelp extends Components.FlipIconHelp, HTMLElement {}
+export const FlipIconHelp: {
+  prototype: FlipIconHelp;
+  new (): FlipIconHelp;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/flip-icon-help.js

@@ -0,0 +1,37 @@
+import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
+
+const flipIconCss = ":host{display:inline-flex}";
+
+const FlipIconHelp$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.size = 24;
+  }
+  render() {
+    return (h("svg", { class: "flip-icon", fill: "none", height: this.size, part: "icon", viewBox: `0 0 ${this.size} ${this.size}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && (h(Fragment, null, h("path", { d: "M7.96665 11.9987C8.19998 11.9987 8.39731 11.918 8.55865 11.7567C8.71953 11.5958 8.79998 11.3987 8.79998 11.1654C8.79998 10.932 8.71953 10.7349 8.55865 10.574C8.39731 10.4127 8.19998 10.332 7.96665 10.332C7.73331 10.332 7.53598 10.4127 7.37465 10.574C7.21376 10.7349 7.13331 10.932 7.13331 11.1654C7.13331 11.3987 7.21376 11.5958 7.37465 11.7567C7.53598 11.918 7.73331 11.9987 7.96665 11.9987ZM8.06665 5.13203C8.37776 5.13203 8.62776 5.21803 8.81665 5.39003C9.00554 5.56248 9.09998 5.78759 9.09998 6.06536C9.09998 6.25425 9.0362 6.44581 8.90865 6.64003C8.78065 6.8347 8.59998 7.03759 8.36665 7.2487C8.03331 7.53759 7.78887 7.81536 7.63331 8.08203C7.47776 8.3487 7.39998 8.61536 7.39998 8.88203C7.39998 9.03759 7.45842 9.16803 7.57531 9.27336C7.69176 9.37914 7.82776 9.43203 7.98331 9.43203C8.13887 9.43203 8.27776 9.37648 8.39998 9.26536C8.5222 9.15425 8.59998 9.01536 8.63331 8.8487C8.66665 8.65981 8.74176 8.48492 8.85865 8.32403C8.97509 8.1627 9.16665 7.95425 9.43331 7.6987C9.77776 7.37648 10.0195 7.08203 10.1586 6.81536C10.2973 6.5487 10.3666 6.25425 10.3666 5.93203C10.3666 5.36536 10.1529 4.90136 9.72531 4.54003C9.29731 4.17914 8.74442 3.9987 8.06665 3.9987C7.59998 3.9987 7.1862 4.08759 6.82531 4.26536C6.46398 4.44314 6.18331 4.71536 5.98331 5.08203C5.90554 5.22648 5.87776 5.36803 5.89998 5.5067C5.9222 5.64581 5.99998 5.75981 6.13331 5.8487C6.27776 5.93759 6.4362 5.96536 6.60865 5.93203C6.78065 5.8987 6.9222 5.80425 7.03331 5.6487C7.15554 5.48203 7.30287 5.35425 7.47531 5.26536C7.64731 5.17648 7.84442 5.13203 8.06665 5.13203ZM7.99998 14.6654C7.08887 14.6654 6.22776 14.4903 5.41665 14.14C4.60554 13.7903 3.89731 13.3154 3.29198 12.7154C2.6862 12.1154 2.20842 11.4098 1.85865 10.5987C1.50842 9.78759 1.33331 8.92092 1.33331 7.9987C1.33331 7.07648 1.50842 6.20981 1.85865 5.3987C2.20842 4.58759 2.6862 3.88203 3.29198 3.28203C3.89731 2.68203 4.60554 2.20692 5.41665 1.8567C6.22776 1.50692 7.08887 1.33203 7.99998 1.33203C8.93331 1.33203 9.80553 1.50692 10.6166 1.8567C11.4278 2.20692 12.1333 2.68203 12.7333 3.28203C13.3333 3.88203 13.8055 4.58759 14.15 5.3987C14.4944 6.20981 14.6666 7.07648 14.6666 7.9987C14.6666 8.92092 14.4944 9.78759 14.15 10.5987C13.8055 11.4098 13.3333 12.1154 12.7333 12.7154C12.1333 13.3154 11.4278 13.7903 10.6166 14.14C9.80553 14.4903 8.93331 14.6654 7.99998 14.6654ZM7.99998 13.332C9.48887 13.332 10.75 12.8127 11.7833 11.774C12.8166 10.7349 13.3333 9.47647 13.3333 7.9987C13.3333 6.52092 12.8166 5.26248 11.7833 4.22336C10.75 3.1847 9.48887 2.66536 7.99998 2.66536C6.54442 2.66536 5.29153 3.1847 4.24131 4.22336C3.19154 5.26248 2.66665 6.52092 2.66665 7.9987C2.66665 9.47647 3.19154 10.7349 4.24131 11.774C5.29153 12.8127 6.54442 13.332 7.99998 13.332Z", fill: "currentColor" }))), this.size === 24 && (h(Fragment, null, h("path", { d: "M11.95 18C12.3 18 12.596 17.879 12.838 17.637C13.0793 17.3957 13.2 17.1 13.2 16.75C13.2 16.4 13.0793 16.1043 12.838 15.863C12.596 15.621 12.3 15.5 11.95 15.5C11.6 15.5 11.304 15.621 11.062 15.863C10.8207 16.1043 10.7 16.4 10.7 16.75C10.7 17.1 10.8207 17.3957 11.062 17.637C11.304 17.879 11.6 18 11.95 18ZM12.1 7.7C12.5667 7.7 12.9417 7.829 13.225 8.087C13.5083 8.34567 13.65 8.68333 13.65 9.1C13.65 9.38333 13.5543 9.67067 13.363 9.962C13.171 10.254 12.9 10.5583 12.55 10.875C12.05 11.3083 11.6833 11.725 11.45 12.125C11.2167 12.525 11.1 12.925 11.1 13.325C11.1 13.5583 11.1877 13.754 11.363 13.912C11.5377 14.0707 11.7417 14.15 11.975 14.15C12.2083 14.15 12.4167 14.0667 12.6 13.9C12.7833 13.7333 12.9 13.525 12.95 13.275C13 12.9917 13.1127 12.7293 13.288 12.488C13.4627 12.246 13.75 11.9333 14.15 11.55C14.6667 11.0667 15.0293 10.625 15.238 10.225C15.446 9.825 15.55 9.38333 15.55 8.9C15.55 8.05 15.2293 7.354 14.588 6.812C13.946 6.27067 13.1167 6 12.1 6C11.4 6 10.7793 6.13333 10.238 6.4C9.696 6.66667 9.275 7.075 8.975 7.625C8.85833 7.84167 8.81667 8.054 8.85 8.262C8.88333 8.47067 9 8.64167 9.2 8.775C9.41667 8.90833 9.65433 8.95 9.913 8.9C10.171 8.85 10.3833 8.70833 10.55 8.475C10.7333 8.225 10.9543 8.03333 11.213 7.9C11.471 7.76667 11.7667 7.7 12.1 7.7ZM12 22C10.6333 22 9.34167 21.7373 8.125 21.212C6.90833 20.6873 5.846 19.975 4.938 19.075C4.02933 18.175 3.31267 17.1167 2.788 15.9C2.26267 14.6833 2 13.3833 2 12C2 10.6167 2.26267 9.31667 2.788 8.1C3.31267 6.88333 4.02933 5.825 4.938 4.925C5.846 4.025 6.90833 3.31233 8.125 2.787C9.34167 2.26233 10.6333 2 12 2C13.4 2 14.7083 2.26233 15.925 2.787C17.1417 3.31233 18.2 4.025 19.1 4.925C20 5.825 20.7083 6.88333 21.225 8.1C21.7417 9.31667 22 10.6167 22 12C22 13.3833 21.7417 14.6833 21.225 15.9C20.7083 17.1167 20 18.175 19.1 19.075C18.2 19.975 17.1417 20.6873 15.925 21.212C14.7083 21.7373 13.4 22 12 22ZM12 20C14.2333 20 16.125 19.221 17.675 17.663C19.225 16.1043 20 14.2167 20 12C20 9.78333 19.225 7.89567 17.675 6.337C16.125 4.779 14.2333 4 12 4C9.81667 4 7.93733 4.779 6.362 6.337C4.78733 7.89567 4 9.78333 4 12C4 14.2167 4.78733 16.1043 6.362 17.663C7.93733 19.221 9.81667 20 12 20Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M13.9417 20.9999C14.35 20.9999 14.6953 20.8588 14.9777 20.5764C15.2592 20.2949 15.4 19.9499 15.4 19.5416C15.4 19.1333 15.2592 18.7883 14.9777 18.5068C14.6953 18.2244 14.35 18.0833 13.9417 18.0833C13.5333 18.0833 13.188 18.2244 12.9057 18.5068C12.6241 18.7883 12.4833 19.1333 12.4833 19.5416C12.4833 19.9499 12.6241 20.2949 12.9057 20.5764C13.188 20.8588 13.5333 20.9999 13.9417 20.9999ZM14.1167 8.98325C14.6611 8.98325 15.0986 9.13375 15.4292 9.43475C15.7597 9.73653 15.925 10.1305 15.925 10.6166C15.925 10.9471 15.8134 11.2824 15.5902 11.6223C15.3662 11.9629 15.05 12.318 14.6417 12.6874C14.0583 13.193 13.6306 13.6791 13.3583 14.1458C13.0861 14.6124 12.95 15.0791 12.95 15.5458C12.95 15.818 13.0523 16.0463 13.2568 16.2306C13.4606 16.4157 13.6986 16.5083 13.9708 16.5083C14.2431 16.5083 14.4861 16.411 14.7 16.2166C14.9139 16.0221 15.05 15.7791 15.1083 15.4874C15.1667 15.1569 15.2981 14.8508 15.5027 14.5693C15.7064 14.2869 16.0417 13.9221 16.5083 13.4749C17.1111 12.911 17.5342 12.3958 17.7777 11.9291C18.0203 11.4624 18.1417 10.9471 18.1417 10.3833C18.1417 9.39159 17.7676 8.57959 17.0193 7.94725C16.2703 7.3157 15.3028 6.99992 14.1167 6.99992C13.3 6.99992 12.5759 7.15547 11.9443 7.46659C11.312 7.7777 10.8208 8.25409 10.4708 8.89575C10.3347 9.14853 10.2861 9.39625 10.325 9.63892C10.3639 9.88236 10.5 10.0819 10.7333 10.2374C10.9861 10.393 11.2634 10.4416 11.5652 10.3833C11.8662 10.3249 12.1139 10.1596 12.3083 9.88742C12.5222 9.59575 12.7801 9.37214 13.0818 9.21659C13.3828 9.06103 13.7278 8.98325 14.1167 8.98325ZM14 25.6666C12.4056 25.6666 10.8986 25.3601 9.47917 24.7473C8.05973 24.1351 6.82034 23.3041 5.761 22.2541C4.70089 21.2041 3.86478 19.9694 3.25267 18.5499C2.63978 17.1305 2.33334 15.6138 2.33334 13.9999C2.33334 12.386 2.63978 10.8694 3.25267 9.44992C3.86478 8.03048 4.70089 6.79575 5.761 5.74575C6.82034 4.69575 8.05973 3.86431 9.47917 3.25142C10.8986 2.63931 12.4056 2.33325 14 2.33325C15.6333 2.33325 17.1597 2.63931 18.5792 3.25142C19.9986 3.86431 21.2333 4.69575 22.2833 5.74575C23.3333 6.79575 24.1597 8.03048 24.7625 9.44992C25.3653 10.8694 25.6667 12.386 25.6667 13.9999C25.6667 15.6138 25.3653 17.1305 24.7625 18.5499C24.1597 19.9694 23.3333 21.2041 22.2833 22.2541C21.2333 23.3041 19.9986 24.1351 18.5792 24.7473C17.1597 25.3601 15.6333 25.6666 14 25.6666ZM14 23.3333C16.6056 23.3333 18.8125 22.4244 20.6208 20.6068C22.4292 18.7883 23.3333 16.586 23.3333 13.9999C23.3333 11.4138 22.4292 9.21153 20.6208 7.39309C18.8125 5.57542 16.6056 4.66659 14 4.66659C11.4528 4.66659 9.26023 5.57542 7.42234 7.39309C5.58523 9.21153 4.66667 11.4138 4.66667 13.9999C4.66667 16.586 5.58523 18.7883 7.42234 20.6068C9.26023 22.4244 11.4528 23.3333 14 23.3333Z", fill: "currentColor" })))));
+  }
+  static get style() { return flipIconCss; }
+}, [1, "flip-icon-help", {
+    "size": [2]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["flip-icon-help"];
+  components.forEach(tagName => { switch (tagName) {
+    case "flip-icon-help":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, FlipIconHelp$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const FlipIconHelp = FlipIconHelp$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { FlipIconHelp, defineCustomElement };

package/dist/components/flip-option-list2.js

@@ -10,9 +10,15 @@ const FlipOptionList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     this.valueChange = createEvent(this, "valueChange", 7);
     this.value = [];
     this.onFocus = () => {
-      this.focusItem(0);
+      if (Boolean(this.focusedItem)) {
+        this.focusItem(this.getActiveItemIndex());
+      }
+      else {
+        this.focusItem(0);
+      }
     };
     this.onClick = (event) => {
+      event.preventDefault();
       const target = event.target;
       const item = target === null || target === void 0 ? void 0 : target.closest("flip-option-list-item");
       if (!Boolean(item)) {
@@ -149,6 +155,7 @@ const FlipOptionList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     }
     item.setAttribute("tabIndex", "0");
     item.focus();
+    this.focusedItem = item;
   }
   focusNextItem() {
     if (this.disabled) {
@@ -166,12 +173,7 @@ const FlipOptionList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
   getActiveItemIndex() {
     return this.items
       .map((item) => item.shadowRoot.querySelector('[role="option"]'))
-      .findIndex((item) => {
-      var _a, _b;
-      return item === document.activeElement ||
-        item ===
-          ((_b = (_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('[role="option"]'));
-    });
+      .findIndex((item) => item === this.focusedItem);
   }
   render() {
     const ariaMultiselectable = this.multiSelect ? "true" : undefined;

package/dist/components/flip-pdf-reader.js

@@ -21,7 +21,7 @@ import { d as defineCustomElement$4 } from './flip-inline-error2.js';
 import { d as defineCustomElement$3 } from './flip-spinner2.js';
 import { d as defineCustomElement$2 } from './flip-visually-hidden2.js';
 
-const flipPdfReaderCss = ":host{display:block}:host *{box-sizing:border-box}.pdf-reader{position:fixed;z-index:var(--s-z-40);background-color:var(--s-surface-raised-default);inset:0;touch-action:pan-x pan-y}.pdf-reader[aria-hidden=\"true\"]{display:none}.pdf-reader:not(.pdf-reader--closing) .pdf-reader__body{-webkit-animation:0.15s pdf-reader-fade-in;animation:0.15s pdf-reader-fade-in}@media (prefers-reduced-motion){.pdf-reader:not(.pdf-reader--closing) .pdf-reader__body{-webkit-animation:none;animation:none}}.pdf-reader--closing{-webkit-animation:0.15s pdf-reader-fade-out;animation:0.15s pdf-reader-fade-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@media (prefers-reduced-motion){.pdf-reader--closing{-webkit-animation:none;animation:none}}.pdf-reader__body{position:relative;width:100%;height:100%}.pdf-reader__header{display:flex;height:4rem;padding-right:var(--s-space-16);padding-left:var(--s-space-16);align-items:center;border-bottom:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);gap:var(--s-space-8)}.pdf-reader__header-left,.pdf-reader__header-right{display:flex;flex-grow:1;align-items:center;gap:var(--s-space-8)}@media (min-width: 768px){.pdf-reader__header-left,.pdf-reader__header-right{flex-basis:calc(100 / 3 * 1%);flex-grow:0}}.pdf-reader__header-right{justify-content:flex-end}.pdf-reader__header-center{display:none;flex-grow:1;justify-content:center;align-items:center;align-items:center;gap:var(--s-space-16)}@media (min-width: 768px){.pdf-reader__header-center{display:flex}}.pdf-reader__label{overflow:hidden;flex-grow:1;font-weight:var(--s-font-weight-semibold);white-space:nowrap;text-overflow:ellipsis}.pdf-reader__zoom-button-container{display:flex;align-items:center;gap:var(--s-space-8)}.pdf-reader__zoom-button-container>*:not(:last-child){position:relative}.pdf-reader__zoom-button-container>*:not(:last-child):after{position:absolute;top:50%;right:calc(-1 * var(--s-space-4));width:var(--s-border-width-default);height:1.5rem;background-color:var(--s-border-default);content:\"\";transform:translate3d(50%, -50%, 0)}.pdf-reader__zoom-select-container{position:relative}.pdf-reader__zoom-select{display:inline-flex;height:2.5rem;padding-right:var(--s-space-12);padding-right:calc(var(--s-space-8) + 1.5rem + var(--s-space-12));padding-left:var(--s-space-12);justify-content:flex-start;align-items:center;border:var(--s-border-width-default) solid var(--s-border-default);border-radius:var(--s-border-radius-sm);color:var(--s-interactive-neutral-default);background-color:transparent;font:inherit;font-weight:var(--s-font-weight-medium);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.pdf-reader__zoom-select:focus{outline-color:var(--s-focus-default)}.pdf-reader__zoom-select-icon{position:absolute;top:50%;right:var(--s-space-8);display:inline-flex;transform:translateY(-50%);pointer-events:none}.pdf-reader__content{width:100%;height:calc(100% - 4rem)}.pdf-reader__mobile-zoom-controls{position:absolute;z-index:1;right:var(--s-space-16);bottom:var(--s-space-32);display:flex;padding-bottom:var(--s-space-4);flex-direction:column;gap:var(--s-space-8)}@media (min-width: 768px){.pdf-reader__mobile-zoom-controls{display:none}}.pdf-reader__mobile-zoom-button{display:inline-flex;width:2.5rem;height:2.5rem;justify-content:center;align-items:center;border:none;border-radius:50%;color:var(--s-icon-on-image);background-color:rgba(0, 0, 0, 0.6);cursor:pointer;transition:opacity 0.15s;pointer-events:auto}.pdf-reader__mobile-zoom-button:disabled{cursor:default}@-webkit-keyframes pdf-reader-fade-in{from{opacity:0}to{opacity:1}}@keyframes pdf-reader-fade-in{from{opacity:0}to{opacity:1}}@-webkit-keyframes pdf-reader-fade-out{from{opacity:1}to{opacity:0}}@keyframes pdf-reader-fade-out{from{opacity:1}to{opacity:0}}";
+const flipPdfReaderCss = ":host{display:block}:host *{box-sizing:border-box}.pdf-reader{position:fixed;z-index:var(--s-z-40);background-color:var(--s-surface-raised-default);inset:0;touch-action:pan-x pan-y}.pdf-reader[aria-hidden=\"true\"]{display:none}.pdf-reader:not(.pdf-reader--closing) .pdf-reader__body{-webkit-animation:0.15s pdf-reader-fade-in;animation:0.15s pdf-reader-fade-in}@media (prefers-reduced-motion){.pdf-reader:not(.pdf-reader--closing) .pdf-reader__body{-webkit-animation:none;animation:none}}.pdf-reader--closing{-webkit-animation:0.15s pdf-reader-fade-out;animation:0.15s pdf-reader-fade-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@media (prefers-reduced-motion){.pdf-reader--closing{-webkit-animation:none;animation:none}}.pdf-reader__body{position:relative;width:100%;height:100%}.pdf-reader__header{display:flex;height:4rem;padding-right:var(--s-space-16);padding-left:var(--s-space-16);align-items:center;border-bottom:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);gap:var(--s-space-8)}.pdf-reader__header-left,.pdf-reader__header-right{display:flex;flex-grow:1;align-items:center;gap:var(--s-space-8)}@media (min-width: 768px){.pdf-reader__header-left,.pdf-reader__header-right{flex-basis:calc(100 / 3 * 1%);flex-grow:0}}.pdf-reader__header-right{justify-content:flex-end}.pdf-reader__header-center{display:none;flex-grow:1;justify-content:center;align-items:center;gap:var(--s-space-16)}@media (min-width: 768px){.pdf-reader__header-center{display:flex}}.pdf-reader__label{overflow:hidden;flex-grow:1;font-weight:var(--s-font-weight-semibold);white-space:nowrap;text-overflow:ellipsis}.pdf-reader__zoom-button-container{display:flex;align-items:center;gap:var(--s-space-8)}.pdf-reader__zoom-button-container>*:not(:last-child){position:relative}.pdf-reader__zoom-button-container>*:not(:last-child):after{position:absolute;top:50%;right:calc(-1 * var(--s-space-4));width:var(--s-border-width-default);height:1.5rem;background-color:var(--s-border-default);content:\"\";transform:translate3d(50%, -50%, 0)}.pdf-reader__zoom-select-container{position:relative}.pdf-reader__zoom-select{display:inline-flex;height:2.5rem;padding-right:var(--s-space-12);padding-right:calc(var(--s-space-8) + 1.5rem + var(--s-space-12));padding-left:var(--s-space-12);justify-content:flex-start;align-items:center;border:var(--s-border-width-default) solid var(--s-border-default);border-radius:var(--s-border-radius-sm);color:var(--s-interactive-neutral-default);background-color:transparent;font:inherit;font-weight:var(--s-font-weight-medium);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.pdf-reader__zoom-select:focus{outline-color:var(--s-focus-default)}.pdf-reader__zoom-select-icon{position:absolute;top:50%;right:var(--s-space-8);display:inline-flex;transform:translateY(-50%);pointer-events:none}.pdf-reader__content{width:100%;height:calc(100% - 4rem)}.pdf-reader__mobile-zoom-controls{position:absolute;z-index:1;right:var(--s-space-16);bottom:var(--s-space-32);display:flex;padding-bottom:var(--s-space-4);flex-direction:column;gap:var(--s-space-8)}@media (min-width: 768px){.pdf-reader__mobile-zoom-controls{display:none}}.pdf-reader__mobile-zoom-button{display:inline-flex;width:2.5rem;height:2.5rem;justify-content:center;align-items:center;border:none;border-radius:50%;color:var(--s-icon-on-image);background-color:rgba(0, 0, 0, 0.6);cursor:pointer;transition:opacity 0.15s;pointer-events:auto}.pdf-reader__mobile-zoom-button:disabled{cursor:default}@-webkit-keyframes pdf-reader-fade-in{from{opacity:0}to{opacity:1}}@keyframes pdf-reader-fade-in{from{opacity:0}to{opacity:1}}@-webkit-keyframes pdf-reader-fade-out{from{opacity:1}to{opacity:0}}@keyframes pdf-reader-fade-out{from{opacity:1}to{opacity:0}}";
 
 const FlipPdfReader$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/flip-popover2.js

@@ -1,29 +1,24 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { c as computePosition, a as autoUpdate, s as shift, f as flip } from './floating-ui.dom.esm.js';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { c as computePosition, a as autoUpdate, o as offset, s as shift, f as flip } from './floating-ui.dom.esm.js';
 import { e as enableBodyScroll, d as disableBodyScroll } from './bodyScrollLock.esm.js';
 import { c as classnames } from './index2.js';
 import { i as isMobileViewport, q as querySelectorAllDeep } from './utils.js';
 
-const flipPopoverCss = ":host{position:relative;z-index:var(--s-z-40);display:inline-flex}:host *{box-sizing:border-box}.popover--active:not(.popover--closing) .popover__backdrop{-webkit-animation:0.15s popover-fade-in;animation:0.15s popover-fade-in}@media (prefers-reduced-motion){.popover--active:not(.popover--closing) .popover__backdrop{-webkit-animation:none;animation:none}}.popover--active:not(.popover--closing) .popover__content{-webkit-animation:0.15s popover-slide-in;animation:0.15s popover-slide-in}@media (min-width: 768px){.popover--active:not(.popover--closing) .popover__content{transform-origin:top left;-webkit-animation:0.15s popover-fade-scale-in;animation:0.15s popover-fade-scale-in}}@media (prefers-reduced-motion){.popover--active:not(.popover--closing) .popover__content{-webkit-animation:none;animation:none}}.popover--closing .popover__backdrop{-webkit-animation:0.15s popover-fade-out;animation:0.15s popover-fade-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@media (prefers-reduced-motion){.popover--closing .popover__backdrop{-webkit-animation:none;animation:none}}.popover--closing .popover__content{-webkit-animation:0.15s popover-slide-out;animation:0.15s popover-slide-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@media (min-width: 768px){.popover--closing .popover__content{-webkit-animation:0.15s popover-fade-out;animation:0.15s popover-fade-out}}@media (prefers-reduced-motion){.popover--closing .popover__content{-webkit-animation:none;animation:none}}.popover--inactive .popover__content{display:none}.popover__backdrop{position:fixed;z-index:0;background-color:rgba(0, 0, 0, 0.2);-webkit-animation:0.15s popover-backdrop-fade-in;animation:0.15s popover-backdrop-fade-in;inset:0}@media (prefers-reduced-motion){.popover__backdrop{-webkit-animation:none;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-sm);-webkit-animation:none;animation:none;box-shadow:0.125rem 0.25rem 2.5rem rgba(0, 0, 0, 0.14)}}.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:var(--s-space-8);padding-bottom:var(--s-space-8)}}.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}}@-webkit-keyframes popover-slide-in{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes popover-slide-in{from{transform:translateY(100%)}to{transform:translateY(0)}}@-webkit-keyframes popover-slide-out{from{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes popover-slide-out{from{transform:translateY(0)}to{transform:translateY(100%)}}@-webkit-keyframes popover-fade-in{from{opacity:0}to{opacity:1}}@keyframes popover-fade-in{from{opacity:0}to{opacity:1}}@-webkit-keyframes popover-fade-out{from{opacity:1}to{opacity:0}}@keyframes popover-fade-out{from{opacity:1}to{opacity:0}}@-webkit-keyframes popover-fade-scale-in{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@keyframes popover-fade-scale-in{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}";
+const flipPopoverCss = ":host{position:relative;z-index:var(--s-z-40);display:inline-flex}:host *{box-sizing:border-box}.popover--active:not(.popover--closing) .popover__backdrop{-webkit-animation:0.15s popover-fade-in;animation:0.15s popover-fade-in}@media (prefers-reduced-motion){.popover--active:not(.popover--closing) .popover__backdrop{-webkit-animation:none;animation:none}}.popover--active:not(.popover--closing) .popover__content{-webkit-animation:0.15s popover-slide-in;animation:0.15s popover-slide-in}@media (min-width: 768px){.popover--active:not(.popover--closing) .popover__content{transform-origin:top left;-webkit-animation:0.15s popover-fade-scale-in-xy;animation:0.15s popover-fade-scale-in-xy}}@media (prefers-reduced-motion){.popover--active:not(.popover--closing) .popover__content{-webkit-animation:none;animation:none}}.popover--closing .popover__backdrop{-webkit-animation:0.15s popover-fade-out;animation:0.15s popover-fade-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@media (prefers-reduced-motion){.popover--closing .popover__backdrop{-webkit-animation:none;animation:none}}.popover--closing .popover__content{-webkit-animation:0.15s popover-slide-out;animation:0.15s popover-slide-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@media (min-width: 768px){.popover--closing .popover__content{-webkit-animation:0.15s popover-fade-out;animation:0.15s popover-fade-out}}@media (prefers-reduced-motion){.popover--closing .popover__content{-webkit-animation:none;animation:none}}.popover--inactive .popover__content{display:none}@media (min-width: 768px){.popover--animation-scale-in-y.popover--active:not(.popover--closing) .popover__content{-webkit-animation:0.15s popover-fade-scale-in-y;animation:0.15s popover-fade-scale-in-y}}@media (prefers-reduced-motion){.popover--animation-scale-in-y.popover--active:not(.popover--closing) .popover__content{-webkit-animation:none;animation:none}}.popover__backdrop{position:fixed;z-index:0;background-color:rgba(0, 0, 0, 0.2);-webkit-animation:0.15s popover-backdrop-fade-in;animation:0.15s popover-backdrop-fade-in;inset:0}@media (prefers-reduced-motion){.popover__backdrop{-webkit-animation:none;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-sm);-webkit-animation:none;animation:none;box-shadow:0.125rem 0.25rem 2.5rem rgba(0, 0, 0, 0.14)}}.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:var(--s-space-8);padding-bottom:var(--s-space-8)}}.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}}@-webkit-keyframes popover-slide-in{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes popover-slide-in{from{transform:translateY(100%)}to{transform:translateY(0)}}@-webkit-keyframes popover-slide-out{from{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes popover-slide-out{from{transform:translateY(0)}to{transform:translateY(100%)}}@-webkit-keyframes popover-fade-in{from{opacity:0}to{opacity:1}}@keyframes popover-fade-in{from{opacity:0}to{opacity:1}}@-webkit-keyframes popover-fade-out{from{opacity:1}to{opacity:0}}@keyframes popover-fade-out{from{opacity:1}to{opacity:0}}@-webkit-keyframes popover-fade-scale-in-xy{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@keyframes popover-fade-scale-in-xy{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@-webkit-keyframes popover-fade-scale-in-y{from{transform:scaleY(0);opacity:0}to{transform:scaleY(1);opacity:1}}@keyframes popover-fade-scale-in-y{from{transform:scaleY(0);opacity:0}to{transform:scaleY(1);opacity:1}}";
 
 const FlipPopover = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.__attachShadow();
+    this.popoverClose = createEvent(this, "popoverClose", 7);
+    this.popoverOpen = createEvent(this, "popoverOpen", 7);
+    this.animation = "scale-in-xy";
+    this.enableFlip = true;
+    this.offset = 8;
     this.placement = "bottom-start";
     this.active = false;
     this.closing = false;
-    this.onFocusOut = (event) => {
-      if (!this.active) {
-        return;
-      }
-      const target = event.relatedTarget || event.target;
-      const popoverLostFocus = !this.el.contains(target);
-      if (popoverLostFocus) {
-        this.close();
-      }
-    };
     this.toggle = (event) => {
       event.stopPropagation();
       if (this.active) {
@@ -47,8 +42,14 @@ const FlipPopover = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         this.position = undefined;
         return;
       }
+      const offsetOptions = typeof this.offset === "number"
+        ? { mainAxis: this.offset, crossAxis: 0 }
+        : { mainAxis: this.offset[0], crossAxis: this.offset[1] };
+      const middleware = this.enableFlip
+        ? [offset(offsetOptions), shift(), flip()]
+        : [offset(offsetOptions), shift()];
       this.position = await computePosition(this.triggerEl, this.contentContainer, {
-        middleware: [shift(), flip()],
+        middleware,
         placement: this.placement,
         strategy: "fixed",
       });
@@ -59,15 +60,35 @@ const FlipPopover = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   componentDidLoad() {
     this.connectTrigger();
-    this.updateChildMenuItems();
+    this.updateFocusableChildren();
     this.updateTriggerAttributes();
   }
   disconnectedCallback() {
     enableBodyScroll(this.scrollContainer);
   }
+  onWindowFocusIn(event) {
+    if (!this.active) {
+      return;
+    }
+    const target = event.target;
+    const popoverLostFocus = !this.el.contains(target);
+    if (popoverLostFocus) {
+      this.close();
+    }
+  }
   onWindowClick(event) {
+    if (!this.active) {
+      return;
+    }
     const target = event.target;
-    if (!this.el.contains(target)) {
+    const clickedChild = this.el.contains(target);
+    const clickedShadowChild = event
+      .composedPath()
+      .some((el) => Boolean(el) && el instanceof Node
+      ? this.el.contains(el)
+      : false);
+    const clickedTrigger = event.target === this.triggerEl;
+    if (!clickedChild && !clickedShadowChild && !clickedTrigger) {
       this.close();
     }
   }
@@ -80,6 +101,7 @@ const FlipPopover = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     if (this.closing || !this.active) {
       return;
     }
+    this.popoverClose.emit();
     if (this.disableAutoUpdate) {
       this.disableAutoUpdate();
     }
@@ -97,13 +119,18 @@ const FlipPopover = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
    * @returns
    */
   async open() {
+    if (this.active) {
+      return;
+    }
+    this.adjustWidth();
     this.active = true;
-    this.updateChildMenuItems();
+    this.popoverOpen.emit();
+    this.updateFocusableChildren();
     this.updateTriggerAttributes();
     requestAnimationFrame(async () => {
       await this.reposition();
-      if (this.childMenuItems.length > 0) {
-        this.childMenuItems[0].focus();
+      if (this.focusableChildren.length > 0) {
+        this.focusableChildren[0].focus();
       }
       else {
         this.contentContainer.focus();
@@ -121,7 +148,9 @@ const FlipPopover = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     if (!Boolean(this.triggerEl)) {
       return;
     }
-    this.triggerEl.addEventListener("click", this.toggle);
+    this.triggerEl.addEventListener("click", (event) => {
+      this.toggle(event);
+    });
   }
   getNativeTriggerElement() {
     var _a, _b, _c;
@@ -140,8 +169,30 @@ const FlipPopover = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     nativeTriggerEl.setAttribute("aria-expanded", String(this.active));
     nativeTriggerEl.setAttribute("aria-haspopup", "dialog");
   }
-  updateChildMenuItems() {
-    this.childMenuItems = querySelectorAllDeep(this.el, '[role="menuitem"]');
+  updateFocusableChildren() {
+    this.focusableChildren = querySelectorAllDeep(this.el, '[role="menuitem"], [role="listbox"]');
+  }
+  adjustWidth() {
+    let useContainerWidth = this.useContainerWidth;
+    if ([true, "true"].includes(this.useContainerWidth)) {
+      useContainerWidth = true;
+    }
+    else if ([false, "false"].includes(this.useContainerWidth)) {
+      useContainerWidth = false;
+    }
+    const mobile = !window.matchMedia("(min-width: 768px)").matches;
+    if (Boolean(useContainerWidth) && !mobile) {
+      const container = typeof useContainerWidth === "string"
+        ? this.el.closest(useContainerWidth) || this.el.parentElement
+        : this.el.parentElement;
+      this.contentContainer.style.maxWidth = "none";
+      this.contentContainer.style.width =
+        container.getBoundingClientRect().width + "px";
+    }
+    else {
+      this.contentContainer.style.maxWidth = "";
+      this.contentContainer.style.width = "";
+    }
   }
   lockBodyScroll() {
     const mobile = isMobileViewport();
@@ -155,29 +206,33 @@ const FlipPopover = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   render() {
     var _a, _b;
-    const className = classnames("popover", {
+    const className = classnames("popover", `popover--animation-${this.animation}`, {
       "popover--closing": this.closing,
       "popover--active": this.active,
       "popover--inactive": !this.active,
     });
-    return (h(Host, { id: this.popoverId, onFocusout: this.onFocusOut }, h("div", { class: className, onKeyDown: this.onKeydown }, h("div", { "aria-hidden": !this.active ? "true" : "false", "aria-label": this.label, class: "popover__content", role: "dialog", tabindex: "-1", ref: (el) => (this.contentContainer = el), style: {
+    return (h(Host, { id: this.popoverId }, h("div", { class: className, onKeyDown: this.onKeydown }, h("div", { "aria-hidden": !this.active ? "true" : "false", "aria-label": this.label, class: "popover__content", role: "dialog", ref: (el) => (this.contentContainer = el), style: {
         top: Boolean(this.position) ? `${(_a = this.position) === null || _a === void 0 ? void 0 : _a.y}px` : "",
         left: Boolean(this.position) ? `${(_b = this.position) === null || _b === void 0 ? void 0 : _b.x}px` : "",
-      } }, h("span", { class: "popover__handle" }), h("div", { class: "popover__scroll-container", ref: (el) => (this.scrollContainer = el) }, h("slot", null))), this.active && (h("div", { class: "popover__backdrop", onClick: this.onCloseButtonClick })))));
+      }, tabindex: "-1" }, h("span", { class: "popover__handle" }), h("div", { class: "popover__scroll-container", ref: (el) => (this.scrollContainer = el) }, h("slot", null))), this.active && (h("div", { class: "popover__backdrop", onClick: this.onCloseButtonClick })))));
   }
   get el() { return this; }
   static get style() { return flipPopoverCss; }
 }, [1, "flip-popover", {
+    "animation": [1],
+    "enableFlip": [4, "enable-flip"],
     "label": [1],
+    "offset": [2],
     "placement": [1],
     "popoverId": [1, "popover-id"],
     "trigger": [1],
+    "useContainerWidth": [8, "use-container-width"],
     "active": [32],
     "closing": [32],
     "position": [32],
     "close": [64],
     "open": [64]
-  }, [[8, "click", "onWindowClick"]]]);
+  }, [[8, "focusin", "onWindowFocusIn"], [8, "click", "onWindowClick"]]]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;

package/dist/components/flip-radio.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { c as classnames } from './index2.js';
 import { d as defineCustomElement$2 } from './flip-visually-hidden2.js';
 
-const flipRadioCss = ".sc-flip-radio-h{display:inline-flex}.sc-flip-radio-h *.sc-flip-radio{box-sizing:border-box}.radio.sc-flip-radio{display:inline-flex;cursor:pointer;line-height:var(--s-line-height-base)}.radio.sc-flip-radio:focus-within .radio__box.sc-flip-radio{box-shadow:0 0 0 0.0625rem var(--s-background-default),\n      0 0 0 0.1875rem var(--s-focus-default)}.radio--checked.sc-flip-radio .radio__control.sc-flip-radio:hover .radio__box.sc-flip-radio{border-color:var(--s-interactive-primary-hovered);background-color:var(--s-interactive-primary-hovered)}.radio--checked.sc-flip-radio .radio__box.sc-flip-radio{position:relative;border-color:var(--s-icon-highlight);background-color:var(--s-icon-highlight)}.radio--checked.sc-flip-radio .radio__box.sc-flip-radio:after{position:absolute;top:50%;left:50%;width:0.5rem;height:0.5rem;border-radius:50%;background-color:var(--s-background-default);content:\"\";transform:translate3d(-50%, -50%, 0)}.radio--invalid.radio--checked.sc-flip-radio .radio__box.sc-flip-radio,.radio--invalid.radio--indeterminate.sc-flip-radio .radio__box.sc-flip-radio{background-color:var(--s-icon-critical)}.radio--invalid.sc-flip-radio .radio__box.sc-flip-radio{border-color:var(--s-icon-critical)}.radio--disabled.sc-flip-radio{cursor:default}.radio--disabled.radio--checked.sc-flip-radio .radio__control.sc-flip-radio:hover .radio__box.sc-flip-radio{border-color:var(--s-icon-disabled);background-color:transparent}.radio--disabled.radio--checked.sc-flip-radio .radio__box.sc-flip-radio{border-color:var(--s-icon-disabled);background-color:var(--s-background-default)}.radio--disabled.radio--checked.sc-flip-radio .radio__box.sc-flip-radio:after{background-color:var(--s-icon-disabled)}.radio--disabled.sc-flip-radio .radio__control.sc-flip-radio:hover .radio__box.sc-flip-radio{background-color:transparent}.radio--disabled.sc-flip-radio .radio__box.sc-flip-radio{border-color:var(--s-icon-disabled);backround-color:var(--s-icon-disabled)}.radio--disabled.sc-flip-radio .radio__description.sc-flip-radio,.radio--disabled.sc-flip-radio .radio__label.sc-flip-radio{color:var(--s-text-disabled)}.radio__control.sc-flip-radio{position:relative;display:inline-flex;width:1.5rem;height:1.5rem;padding:var(--s-space-2);flex-shrink:0}.radio__control.sc-flip-radio:hover .radio__box.sc-flip-radio{background-color:var(--s-action-neutral-hovered)}.radio__box.sc-flip-radio{position:relative;display:flex;width:100%;height:100%;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:50%}.radio__label-container.sc-flip-radio{display:inline-flex;margin-left:var(--s-space-8);padding-top:var(--s-space-2);flex-direction:column}.radio__label.sc-flip-radio{font-weight:var(--s-font-weight-medium)}.radio__description.sc-flip-radio{color:var(--s-text-subdued)}";
+const flipRadioCss = ".sc-flip-radio-h{display:inline-flex}.sc-flip-radio-h *.sc-flip-radio{box-sizing:border-box}.radio.sc-flip-radio{display:inline-flex;cursor:pointer;line-height:var(--s-line-height-base)}.radio.sc-flip-radio:focus-within .radio__box.sc-flip-radio{box-shadow:0 0 0 0.0625rem var(--s-background-default),\n      0 0 0 0.1875rem var(--s-focus-default)}.radio--checked.sc-flip-radio .radio__control.sc-flip-radio:hover .radio__box.sc-flip-radio{border-color:var(--s-interactive-primary-hovered);background-color:var(--s-interactive-primary-hovered)}.radio--checked.sc-flip-radio .radio__box.sc-flip-radio{position:relative;border-color:var(--s-icon-highlight);background-color:var(--s-icon-highlight)}.radio--checked.sc-flip-radio .radio__box.sc-flip-radio:after{position:absolute;top:50%;left:50%;width:0.5rem;height:0.5rem;border-radius:50%;background-color:var(--s-background-default);content:\"\";transform:translate3d(-50%, -50%, 0)}.radio--invalid.radio--checked.sc-flip-radio .radio__box.sc-flip-radio,.radio--invalid.radio--indeterminate.sc-flip-radio .radio__box.sc-flip-radio{background-color:var(--s-icon-critical)}.radio--invalid.sc-flip-radio .radio__box.sc-flip-radio{border-color:var(--s-icon-critical)}.radio--disabled.sc-flip-radio{cursor:default}.radio--disabled.radio--checked.sc-flip-radio .radio__control.sc-flip-radio:hover .radio__box.sc-flip-radio{border-color:var(--s-icon-disabled);background-color:transparent}.radio--disabled.radio--checked.sc-flip-radio .radio__box.sc-flip-radio{border-color:var(--s-icon-disabled);background-color:var(--s-background-default)}.radio--disabled.radio--checked.sc-flip-radio .radio__box.sc-flip-radio:after{background-color:var(--s-icon-disabled)}.radio--disabled.sc-flip-radio .radio__control.sc-flip-radio:hover .radio__box.sc-flip-radio{background-color:transparent}.radio--disabled.sc-flip-radio .radio__box.sc-flip-radio{border-color:var(--s-icon-disabled)}.radio--disabled.sc-flip-radio .radio__description.sc-flip-radio,.radio--disabled.sc-flip-radio .radio__label.sc-flip-radio{color:var(--s-text-disabled)}.radio__control.sc-flip-radio{position:relative;display:inline-flex;width:1.5rem;height:1.5rem;padding:var(--s-space-2);flex-shrink:0}.radio__control.sc-flip-radio:hover .radio__box.sc-flip-radio{background-color:var(--s-action-neutral-hovered)}.radio__box.sc-flip-radio{position:relative;display:flex;width:100%;height:100%;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:50%}.radio__label-container.sc-flip-radio{display:inline-flex;margin-left:var(--s-space-8);padding-top:var(--s-space-2);flex-direction:column}.radio__label.sc-flip-radio{font-weight:var(--s-font-weight-medium)}.radio__description.sc-flip-radio{color:var(--s-text-subdued)}";
 
 const FlipRadio$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -16,10 +16,19 @@ const FlipRadio$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       this.valueChange.emit(this.value);
     };
   }
+  getAriaCheckedLabel(checked, unchecked) {
+    if (checked) {
+      return "true";
+    }
+    else if (unchecked) {
+      return "false";
+    }
+    return "mixed";
+  }
   render() {
     const unchecked = this.checked === false || this.checked === "false";
     const checked = this.checked === true || this.checked === "true";
-    const ariaCheckedLabel = checked ? "true" : unchecked ? "false" : "mixed";
+    const ariaCheckedLabel = this.getAriaCheckedLabel(checked, unchecked);
     const ariaInvalid = this.invalid;
     const className = classnames("radio", {
       "radio--checked": checked,

package/dist/components/flip-select.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface FlipSelect extends Components.FlipSelect, HTMLElement {}
+export const FlipSelect: {
+  prototype: FlipSelect;
+  new (): FlipSelect;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/flip-select.js

@@ -0,0 +1,118 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+import { q as querySelectorAllDeep } from './utils.js';
+import { d as defineCustomElement$5 } from './flip-icon-expand-less2.js';
+import { d as defineCustomElement$4 } from './flip-icon-expand-more2.js';
+import { d as defineCustomElement$3 } from './flip-option-list2.js';
+import { d as defineCustomElement$2 } from './flip-popover2.js';
+
+const flipSelectCss = ".sc-flip-select-h{display:block;width:100%}.sc-flip-select-h *.sc-flip-select{box-sizing:border-box}.select.sc-flip-select{position:relative;display:flex;width:100%}.select--disabled.sc-flip-select .select__label.sc-flip-select{color:var(--s-text-disabled)}.select--disabled.sc-flip-select .select__indicator.sc-flip-select{color:var(--s-icon-disabled)}.select__label.sc-flip-select{display:block;overflow:hidden;width:100%;height:1.375rem;margin:0;padding:0;padding-right:calc(1.5rem + var(--s-space-8));border:none;background-color:transparent;font:inherit;line-height:var(--s-line-height-base);text-align:left;white-space:nowrap;text-overflow:ellipsis;cursor:default}.select__label.sc-flip-select:focus{outline:none}.select__indicator.sc-flip-select{position:absolute;top:calc(-1 * var(--s-space-12));right:0;display:inline-flex;color:var(--s-icon-default)}";
+
+const FlipSelect$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.valueChange = createEvent(this, "valueChange", 7);
+    this.options = [];
+    this.select = (event) => {
+      this.value = event.detail;
+      this.valueChange.emit(this.value);
+      if (!this.multiSelect) {
+        this.popover.close();
+      }
+    };
+    this.onSlotChange = () => {
+      this.updateOptions();
+    };
+    this.onOpen = () => {
+      this.open = true;
+    };
+    this.onClose = () => {
+      this.open = false;
+    };
+    this.onKeyDown = (event) => {
+      if (event.code === "Space" || event.code === "Enter") {
+        event.preventDefault();
+        this.popover.open();
+      }
+    };
+  }
+  componentWillLoad() {
+    queueMicrotask(() => {
+      this.updateOptions();
+    });
+  }
+  onWindowFocusIn(event) {
+    if (event.target === this.el.querySelector("input")) {
+      event.stopImmediatePropagation();
+    }
+  }
+  updateOptions() {
+    this.options = querySelectorAllDeep(this.el, "flip-option-list-item");
+  }
+  render() {
+    const label = Boolean(this.value)
+      ? this.value
+        .map((value) => { var _a; return (_a = this.options.find((option) => option.value === value)) === null || _a === void 0 ? void 0 : _a.label; })
+        .join(", ")
+      : "";
+    const ariaInvalid = this.invalid === true || this.invalid === false
+      ? String(this.invalid)
+      : undefined;
+    const className = classnames("select", {
+      "select--disabled": this.disabled,
+    });
+    return (h(Host, { onKeyDown: this.onKeyDown }, h("div", { class: className }, h("input", { "aria-describedby": this.flipAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, class: "select__label", disabled: this.disabled, id: "trigger", readOnly: true, type: "text", value: label }), h("span", { class: "select__indicator" }, this.open ? (h("flip-icon-expand-less", null)) : (h("flip-icon-expand-more", null))), h("flip-popover", { animation: "scale-in-y", class: "select__popover", enableFlip: false, label: this.label, offset: [16, -16], onPopoverClose: this.onClose, onPopoverOpen: this.onOpen, popoverId: "select-options", ref: (el) => (this.popover = el), trigger: "trigger", useContainerWidth: "flip-form-control" }, h("flip-option-list", { onValueChange: this.select, multiSelect: this.multiSelect, value: this.value }, h("slot", { onSlotchange: this.onSlotChange }))))));
+  }
+  get el() { return this; }
+  static get style() { return flipSelectCss; }
+}, [6, "flip-select", {
+    "disabled": [4],
+    "flipAriaDescribedby": [1, "flip-aria-describedby"],
+    "invalid": [4],
+    "label": [1],
+    "multiSelect": [4, "multi-select"],
+    "required": [4],
+    "value": [1040],
+    "options": [32],
+    "open": [32]
+  }, [[8, "focusin", "onWindowFocusIn"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["flip-select", "flip-icon-expand-less", "flip-icon-expand-more", "flip-option-list", "flip-popover"];
+  components.forEach(tagName => { switch (tagName) {
+    case "flip-select":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, FlipSelect$1);
+      }
+      break;
+    case "flip-icon-expand-less":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "flip-icon-expand-more":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "flip-option-list":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "flip-popover":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const FlipSelect = FlipSelect$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { FlipSelect, defineCustomElement };

package/dist/components/flip-text-input2.js

@@ -6,7 +6,7 @@ import { d as defineCustomElement$3 } from './flip-icon-expand-more2.js';
 import { d as defineCustomElement$2 } from './flip-icon-visibility2.js';
 import { d as defineCustomElement$1 } from './flip-icon-visibility-off2.js';
 
-const flipTextInputCss = ".sc-flip-text-input-h{display:block;width:100%}.sc-flip-text-input-h *.sc-flip-text-input{box-sizing:border-box}.text-input.sc-flip-text-input{position:relative;display:flex;width:100%;align-items:center;color:var(--s-text-default);font:inherit;line-height:var(--s-line-height-sm)}.text-input--clearable.sc-flip-text-input{padding-right:calc(1.5rem + var(--s-space-8))}.text-input--type-number.sc-flip-text-input{padding-right:calc(1.5rem + var(--s-space-8))}.text-input--show-password.sc-flip-text-input .text-input__input.sc-flip-text-input{width:100%}.text-input--disabled.sc-flip-text-input .text-input__character-counter.sc-flip-text-input{color:var(--s-text-disabled)}.text-input__input.sc-flip-text-input{display:inline-flex;width:100%;max-height:13.75rem;margin:0;padding:0;border:none;color:var(--s-text-default);background-color:transparent;font:inherit;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);resize:none;caret-color:var(--s-border-highlight)}.text-input__input.sc-flip-text-input:focus{outline:none}.text-input__input.sc-flip-text-input:disabled{color:var(--s-text-disabled);background-color:transparent}.text-input__input.sc-flip-text-input::-webkit-outer-spin-button,.text-input__input.sc-flip-text-input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}.text-input__input[type=\"number\"].sc-flip-text-input{-moz-appearance:textfield}input.text-input__input.sc-flip-text-input:not([type=\"password\"]){width:0.25rem;min-width:0.25rem}.text-input--disable-dynamic-width.sc-flip-text-input input.text-input__input.sc-flip-text-input:not([type=\"password\"]){width:100%;min-width:0}.text-input__clear-button.sc-flip-text-input,.text-input__password-toggle.sc-flip-text-input{position:absolute;top:calc(-1 * var(--s-space-12));right:0;display:inline-flex;margin:0;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer}.text-input__clear-button.sc-flip-text-input:focus,.text-input__password-toggle.sc-flip-text-input:focus{outline-color:var(--s-focus-default)}.text-input__stepper.sc-flip-text-input{position:absolute;top:-1.4375rem;right:0;display:flex;flex-direction:column}.text-input__step-button.sc-flip-text-input{display:inline-flex;margin:0;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer}.text-input__step-button.sc-flip-text-input:focus{outline-color:var(--s-focus-default)}.text-input__character-counter.sc-flip-text-input{position:absolute;top:-1.375rem;right:0;display:flex;color:var(--s-text-subdued);line-height:var(--s-line-height-sm);flex-direction:column}.text-input__prefix.sc-flip-text-input{padding-right:var(--s-space-4);color:var(--s-text-subdued);font-size:var(--s-font-size-base)}.text-input__suffix.sc-flip-text-input{padding-left:var(--s-space-4);color:var(--s-text-subdued);font-size:var(--s-font-size-base)}";
+const flipTextInputCss = ".sc-flip-text-input-h{display:block;width:100%}.sc-flip-text-input-h *.sc-flip-text-input{box-sizing:border-box}.text-input.sc-flip-text-input{position:relative;display:flex;width:100%;align-items:center;color:var(--s-text-default);font:inherit;line-height:var(--s-line-height-sm)}.text-input--clearable.sc-flip-text-input,.text-input--type-number.sc-flip-text-input,.text-input--type-password.sc-flip-text-input{padding-right:calc(1.5rem + var(--s-space-8))}.text-input--show-password.sc-flip-text-input .text-input__input.sc-flip-text-input{width:100%}.text-input--disabled.sc-flip-text-input .text-input__character-counter.sc-flip-text-input{color:var(--s-text-disabled)}.text-input__input.sc-flip-text-input{display:inline-flex;width:100%;max-height:13.75rem;margin:0;padding:0;border:none;color:var(--s-text-default);background-color:transparent;font:inherit;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);resize:none;caret-color:var(--s-border-highlight)}.text-input__input.sc-flip-text-input:focus{outline:none}.text-input__input.sc-flip-text-input:disabled{color:var(--s-text-disabled);background-color:transparent}.text-input__input.sc-flip-text-input::-webkit-outer-spin-button,.text-input__input.sc-flip-text-input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}.text-input__input[type=\"number\"].sc-flip-text-input{-moz-appearance:textfield}input.text-input__input.sc-flip-text-input:not([type=\"password\"]){width:0.25rem;min-width:0.25rem}.text-input--disable-dynamic-width.sc-flip-text-input input.text-input__input.sc-flip-text-input:not([type=\"password\"]){width:100%;min-width:0}.text-input__clear-button.sc-flip-text-input,.text-input__password-toggle.sc-flip-text-input{position:absolute;top:calc(-1 * var(--s-space-12));right:0;display:inline-flex;margin:0;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer}.text-input__clear-button.sc-flip-text-input:focus,.text-input__password-toggle.sc-flip-text-input:focus{outline-color:var(--s-focus-default)}.text-input__stepper.sc-flip-text-input{position:absolute;top:-1.4375rem;right:0;display:flex;flex-direction:column}.text-input__step-button.sc-flip-text-input{display:inline-flex;margin:0;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer}.text-input__step-button.sc-flip-text-input:focus{outline-color:var(--s-focus-default)}.text-input__character-counter.sc-flip-text-input{position:absolute;top:-1.375rem;right:0;display:flex;color:var(--s-text-subdued);line-height:var(--s-line-height-sm);flex-direction:column}.text-input__prefix.sc-flip-text-input{padding-right:var(--s-space-4);color:var(--s-text-subdued);font-size:var(--s-font-size-base)}.text-input__suffix.sc-flip-text-input{padding-left:var(--s-space-4);color:var(--s-text-subdued);font-size:var(--s-font-size-base)}";
 
 const FlipTextInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -55,11 +55,10 @@ const FlipTextInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
         return;
       }
       const step = this.step || 1;
-      const currentValue = isNaN(this.inputEl.valueAsNumber)
-        ? this.min !== undefined
-          ? this.min + 1
-          : 1
-        : this.inputEl.valueAsNumber;
+      let currentValue = this.inputEl.valueAsNumber;
+      if (isNaN(this.inputEl.valueAsNumber)) {
+        currentValue = this.min !== undefined ? this.min + 1 : 1;
+      }
       this.value = String(Math.max(this.min || -Infinity, currentValue - step));
       this.valueChange.emit(this.value);
     };
@@ -68,11 +67,10 @@ const FlipTextInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
         return;
       }
       const step = this.step || 1;
-      const currentValue = isNaN(this.inputEl.valueAsNumber)
-        ? this.min !== undefined
-          ? this.min - 1
-          : -1
-        : this.inputEl.valueAsNumber;
+      let currentValue = this.inputEl.valueAsNumber;
+      if (isNaN(this.inputEl.valueAsNumber)) {
+        currentValue = this.min !== undefined ? this.min - 1 : -1;
+      }
       this.value = String(Math.min(this.max || Infinity, currentValue + step));
       this.valueChange.emit(this.value);
     };
@@ -109,11 +107,9 @@ const FlipTextInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   render() {
     var _a;
     const Tag = this.rows === 1 ? "input" : "textarea";
-    const ariaInvalid = this.invalid === true
-      ? "true"
-      : this.invalid === false
-        ? "false"
-        : undefined;
+    const ariaInvalid = this.invalid === true || this.invalid === false
+      ? String(this.invalid)
+      : undefined;
     const showStepper = this.type === "number" && !this.disabled;
     const showPasswordToggle = this.type === "password" && !this.disabled;
     const showClearButton = this.clearable &&

package/dist/components/flip-text2.js

@@ -18,7 +18,7 @@ const FlipText = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   render() {
     const Tag = this.as;
     const className = classnames("text", `text--align-${this.align}`, `text--color-${this.color}`, `text--font-style-${this.fontStyle}`, `text--size-${this.size}`, `text--weight-${this.weight}`);
-    return (h(Host, null, h(Tag, { class: className }, h("slot", null))));
+    return (h(Host, null, h(Tag, { class: className, part: "text" }, h("slot", null))));
   }
   static get style() { return flipTextCss; }
 }, [1, "flip-text", {

package/dist/components/flip-toast-provider.js

@@ -38,11 +38,13 @@ const FlipToastProvider$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLE
     if (this.toasts.some((toast) => toast.toastId === newToast.toastId)) {
       return;
     }
-    const duration = this.globalDuration === undefined
-      ? newToast.duration
-      : this.globalDuration === 0
-        ? undefined
-        : this.globalDuration;
+    let duration = this.globalDuration;
+    if (this.globalDuration === undefined) {
+      duration = newToast.duration;
+    }
+    else if (this.globalDuration === 0) {
+      duration = undefined;
+    }
     const newToastWithId = Object.assign(Object.assign({}, newToast), { createdAt: new Date(), duration, toastId: newToast.toastId || String(Math.round(Math.random() * 10000)) });
     this.toasts = [...this.toasts, newToastWithId];
     return newToastWithId;

package/dist/components/flip-tooltip.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { c as computePosition, o as offset, s as shift, f as flip } from './floating-ui.dom.esm.js';
 
-const flipTooltipCss = ":host{display:inline-flex}:host *{box-sizing:border-box}.tooltip{display:inline-flex}.tooltip .tooltip__reference{display:inline-flex}.tooltip__popper{position:fixed;z-index:var(--s-z-40);max-width:17.5rem}.tooltip__bubble{position:relative;display:block;padding-top:var(--s-space-8);padding-right:var(--s-space-12);padding-bottom:var(--s-space-8);padding-left:var(--s-space-12);border-radius:var(--s-border-radius-sm);color:var(--s-text-on-status);background-color:var(--s-surface-neutral-default);line-height:var(--s-line-height-base);-webkit-animation:tooltip-fade-in 0.1s;animation:tooltip-fade-in 0.1s;backgrund-color:red}.tooltip__arrow{position:absolute;width:0.5rem;height:0.5rem;background-color:var(--s-surface-neutral-default)}@-webkit-keyframes tooltip-fade-in{from{opacity:0}to{opacity:1}}@keyframes tooltip-fade-in{from{opacity:0}to{opacity:1}}";
+const flipTooltipCss = ":host{display:inline-flex}:host *{box-sizing:border-box}.tooltip{display:inline-flex}.tooltip .tooltip__reference{display:inline-flex}.tooltip__popper{position:fixed;z-index:var(--s-z-40);max-width:17.5rem}.tooltip__bubble{position:relative;display:block;padding-top:var(--s-space-8);padding-right:var(--s-space-12);padding-bottom:var(--s-space-8);padding-left:var(--s-space-12);border-radius:var(--s-border-radius-sm);color:var(--s-text-on-status);background-color:var(--s-surface-neutral-default);line-height:var(--s-line-height-base);-webkit-animation:tooltip-fade-in 0.1s;animation:tooltip-fade-in 0.1s}.tooltip__arrow{position:absolute;width:0.5rem;height:0.5rem;background-color:var(--s-surface-neutral-default)}@-webkit-keyframes tooltip-fade-in{from{opacity:0}to{opacity:1}}@keyframes tooltip-fade-in{from{opacity:0}to{opacity:1}}";
 
 const FlipTooltip$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {