@pod-os/elements 0.11.1-497f3ef.0 → 0.11.1-5e652ae.0

package/dist/components/ion-refresher.js

@@ -2,7 +2,7 @@ import { writeTask, proxyCustomElement, HTMLElement, createEvent, readTask, h, H
 import { a as isPlatform, g as getIonMode } from './ionic-global.js';
 import { g as getTimeGivenProgression } from './cubic-bezier.js';
 import { I as ION_CONTENT_ELEMENT_SELECTOR, p as printIonContentErrorMsg, b as ION_CONTENT_CLASS_SELECTOR, g as getScrollElement } from './index5.js';
-import { t as transitionEndAsync, d as componentOnReady, l as clamp, g as getElementRoot, r as raf } from './helpers.js';
+import { t as transitionEndAsync, d as componentOnReady, j as clamp, g as getElementRoot, r as raf } from './helpers.js';
 import { h as hapticImpact } from './haptic.js';
 import { c as createAnimation } from './animation.js';
 
@@ -20,6 +20,7 @@ const createPullingAnimation = (type, pullingSpinner, refresherEl) => {
     : createTranslateAnimation(pullingSpinner, refresherEl);
 };
 const createBaseAnimation = (pullingRefresherIcon) => {
+  // TODO(FW-2832): add types/re-evaluate asserting so many things
   const spinner = pullingRefresherIcon.querySelector('ion-spinner');
   const circle = spinner.shadowRoot.querySelector('circle');
   const spinnerArrowContainer = pullingRefresherIcon.querySelector('.spinner-arrow-container');
@@ -628,6 +629,7 @@ const Refresher = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   onStart() {
     this.progress = 0;
     this.state = 1 /* RefresherState.Inactive */;
+    this.memoizeOverflowStyle();
   }
   onMove(detail) {
     if (!this.scrollEl) {
@@ -749,7 +751,7 @@ const Refresher = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       this.didStart = false;
       this.setCss(0, '0ms', false, '');
     }, 600);
-    // reset set the styles on the scroll element
+    // reset the styles on the scroll element
     // set that the refresh is actively cancelling/completing
     this.state = state;
     this.setCss(0, this.closeDuration, true, delay);
@@ -766,10 +768,34 @@ const Refresher = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         scrollStyle.transform = backgroundStyle.transform = y > 0 ? `translateY(${y}px) translateZ(0px)` : '';
         scrollStyle.transitionDuration = backgroundStyle.transitionDuration = duration;
         scrollStyle.transitionDelay = backgroundStyle.transitionDelay = delay;
-        scrollStyle.overflow = overflowVisible ? 'hidden' : '';
+        if (overflowVisible) {
+          scrollStyle.overflow = 'hidden';
+        }
+        else {
+          this.restoreOverflowStyle();
+        }
       }
     });
   }
+  memoizeOverflowStyle() {
+    if (this.scrollEl) {
+      const { overflow, overflowX, overflowY } = this.scrollEl.style;
+      this.overflowStyles = {
+        overflow: overflow !== null && overflow !== void 0 ? overflow : '',
+        overflowX: overflowX !== null && overflowX !== void 0 ? overflowX : '',
+        overflowY: overflowY !== null && overflowY !== void 0 ? overflowY : '',
+      };
+    }
+  }
+  restoreOverflowStyle() {
+    if (this.overflowStyles !== undefined && this.scrollEl !== undefined) {
+      const { overflow, overflowX, overflowY } = this.overflowStyles;
+      this.scrollEl.style.overflow = overflow;
+      this.scrollEl.style.overflowX = overflowX;
+      this.scrollEl.style.overflowY = overflowY;
+      this.overflowStyles = undefined;
+    }
+  }
   render() {
     const mode = getIonMode(this);
     return (h(Host, { slot: "fixed", class: {

package/dist/components/ion-reorder.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { r as reorderThreeOutline, p as reorderTwoSharp } from './index2.js';
+import { r as reorderThreeOutline, n as reorderTwoSharp } from './index2.js';
 import { g as getIonMode } from './ionic-global.js';
 import { d as defineCustomElement$2 } from './icon.js';
 

package/dist/components/ion-router.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent } from '@stencil/core/internal/client';
-import { d as componentOnReady, n as debounce } from './helpers.js';
+import { d as componentOnReady, m as debounce } from './helpers.js';
 
 /*!
  * (C) Ionic http://ionicframework.com - MIT License

package/dist/components/ion-select.js

@@ -1,6 +1,6 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host, forceUpdate } from '@stencil/core/internal/client';
 import { g as getIonMode } from './ionic-global.js';
-import { o as focusElement, h as findItemLabel, m as getAriaLabel, c as renderHiddenInput } from './helpers.js';
+import { n as focusElement, o as findItemLabel, l as getAriaLabel, c as renderHiddenInput } from './helpers.js';
 import { c as popoverController, f as actionSheetController, h as alertController } from './overlays.js';
 import { h as hostContext } from './theme.js';
 import { d as defineCustomElement$g } from './action-sheet.js';
@@ -22,6 +22,7 @@ import { d as defineCustomElement$2 } from './select-popover.js';
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
+// TODO(FW-2832): types
 const watchForOptions = (containerEl, tagName, onChange) => {
   if (typeof MutationObserver === 'undefined') {
     return;
@@ -133,6 +134,13 @@ const Select = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.emitStyle();
     this.mutationO = watchForOptions(this.el, 'ion-select-option', async () => {
       this.updateOverlayOptions();
+      /**
+       * We need to re-render the component
+       * because one of the new ion-select-option
+       * elements may match the value. In this case,
+       * the rendered selected text should be updated.
+       */
+      forceUpdate(this);
     });
   }
   disconnectedCallback() {
@@ -167,9 +175,24 @@ const Select = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     if (this.interface === 'popover') {
       let indexOfSelected = this.childOpts.map((o) => o.value).indexOf(this.value);
       indexOfSelected = indexOfSelected > -1 ? indexOfSelected : 0; // default to first option if nothing selected
-      const selectedEl = overlay.querySelector(`.select-interface-option:nth-child(${indexOfSelected + 1})`);
-      if (selectedEl) {
-        focusElement(selectedEl);
+      const selectedItem = overlay.querySelector(`.select-interface-option:nth-child(${indexOfSelected + 1})`);
+      if (selectedItem) {
+        focusElement(selectedItem);
+        /**
+         * Browsers such as Firefox do not
+         * correctly delegate focus when manually
+         * focusing an element with delegatesFocus.
+         * We work around this by manually focusing
+         * the interactive element.
+         * ion-radio and ion-checkbox are the only
+         * elements that ion-select-popover uses, so
+         * we only need to worry about those two components
+         * when focusing.
+         */
+        const interactiveEl = selectedItem.querySelector('ion-radio, ion-checkbox');
+        if (interactiveEl) {
+          interactiveEl.focus();
+        }
       }
     }
     return overlay;

package/dist/components/ion-split-pane.js

@@ -5,6 +5,7 @@ const splitPaneIosCss = ":host{--side-width:100%;left:0;right:0;top:0;bottom:0;d
 
 const splitPaneMdCss = ":host{--side-width:100%;left:0;right:0;top:0;bottom:0;display:flex;position:absolute;flex-direction:row;flex-wrap:nowrap;contain:strict}::slotted(ion-menu.menu-pane-visible){flex:0 1 auto;width:var(--side-width);min-width:var(--side-min-width);max-width:var(--side-max-width)}:host(.split-pane-visible) ::slotted(.split-pane-side),:host(.split-pane-visible) ::slotted(.split-pane-main){left:0;right:0;top:0;bottom:0;position:relative;box-shadow:none !important;z-index:0}:host(.split-pane-visible) ::slotted(.split-pane-main){flex:1}:host(.split-pane-visible) ::slotted(.split-pane-side:not(ion-menu)),:host(.split-pane-visible) ::slotted(ion-menu.split-pane-side.menu-enabled){display:flex;flex-shrink:0}::slotted(.split-pane-side:not(ion-menu)){display:none}:host(.split-pane-visible) ::slotted(.split-pane-side){order:-1}:host(.split-pane-visible) ::slotted(.split-pane-side[side=end]){order:1}:host{--border:1px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, 0.13))));--side-min-width:270px;--side-max-width:28%}:host(.split-pane-visible) ::slotted(.split-pane-side){border-left:0;border-right:var(--border);border-top:0;border-bottom:0;min-width:var(--side-min-width);max-width:var(--side-max-width)}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host(.split-pane-visible) ::slotted(.split-pane-side){border-left:unset;border-right:unset;-webkit-border-start:0;border-inline-start:0;-webkit-border-end:var(--border);border-inline-end:var(--border)}}:host(.split-pane-visible) ::slotted(.split-pane-side[side=end]){border-left:var(--border);border-right:0;border-top:0;border-bottom:0;min-width:var(--side-min-width);max-width:var(--side-max-width)}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host(.split-pane-visible) ::slotted(.split-pane-side[side=end]){border-left:unset;border-right:unset;-webkit-border-start:var(--border);border-inline-start:var(--border);-webkit-border-end:0;border-inline-end:0}}";
 
+// TODO(FW-2832): types
 const SPLIT_PANE_MAIN = 'split-pane-main';
 const SPLIT_PANE_SIDE = 'split-pane-side';
 const QUERY = {
@@ -40,7 +41,7 @@ const SplitPane = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   async connectedCallback() {
     // TODO: connectedCallback is fired in CE build
     // before WC is defined. This needs to be fixed in Stencil.
-    if (typeof customElements !== 'undefined') {
+    if (typeof customElements !== 'undefined' && customElements != null) {
       await customElements.whenDefined('ion-split-pane');
     }
     this.styleChildren();

package/dist/components/ion-textarea.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, Build, writeTask, h, Host } from '@stencil/core/internal/client';
 import { g as getIonMode } from './ionic-global.js';
-import { f as debounceEvent, i as inheritAriaAttributes, e as inheritAttributes, h as findItemLabel } from './helpers.js';
+import { k as debounceEvent, i as inheritAriaAttributes, e as inheritAttributes, o as findItemLabel } from './helpers.js';
 import { c as createColorClasses } from './theme.js';
 
 const textareaIosCss = ".sc-ion-textarea-ios-h{--background:initial;--color:initial;--placeholder-color:initial;--placeholder-font-style:initial;--placeholder-font-weight:initial;--placeholder-opacity:0.5;--padding-top:0;--padding-end:0;--padding-bottom:0;--padding-start:0;--border-radius:0;display:block;position:relative;flex:1;width:100%;background:var(--background);color:var(--color);font-family:var(--ion-font-family, inherit);white-space:pre-wrap;z-index:2;box-sizing:border-box}.ion-color.sc-ion-textarea-ios-h{background:initial}.ion-color.sc-ion-textarea-ios-h{color:var(--ion-color-base)}ion-item.sc-ion-textarea-ios-h,ion-item .sc-ion-textarea-ios-h{align-self:baseline}ion-item.sc-ion-textarea-ios-h:not(.item-label),ion-item:not(.item-label) .sc-ion-textarea-ios-h{--padding-start:0}.textarea-wrapper.sc-ion-textarea-ios{display:grid;min-width:inherit;max-width:inherit;min-height:inherit;max-height:inherit}.textarea-wrapper.sc-ion-textarea-ios::after{white-space:pre-wrap;content:attr(data-replicated-value) \" \";visibility:hidden}.native-textarea.sc-ion-textarea-ios,.textarea-wrapper.sc-ion-textarea-ios::after{padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;grid-area:1/1/2/2;word-break:break-word}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.native-textarea.sc-ion-textarea-ios,.textarea-wrapper.sc-ion-textarea-ios::after{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}.native-textarea.sc-ion-textarea-ios{border-radius:var(--border-radius);margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:block;width:100%;max-width:100%;max-height:100%;border:0;outline:none;background:transparent;box-sizing:border-box;resize:none;appearance:none}.native-textarea.sc-ion-textarea-ios::placeholder{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-textarea[disabled].sc-ion-textarea-ios:not(.cloned-input){opacity:0.4}.cloned-input.sc-ion-textarea-ios{left:0;top:0;position:absolute;pointer-events:none}[dir=rtl].sc-ion-textarea-ios .cloned-input.sc-ion-textarea-ios,[dir=rtl].sc-ion-textarea-ios-h .cloned-input.sc-ion-textarea-ios,[dir=rtl] .sc-ion-textarea-ios-h .cloned-input.sc-ion-textarea-ios{left:unset;right:unset;right:0}.cloned-input.sc-ion-textarea-ios:disabled{opacity:1}[auto-grow=true].sc-ion-textarea-ios-h .cloned-input.sc-ion-textarea-ios{height:100%}.item-label-floating.item-has-placeholder.sc-ion-textarea-ios-h:not(.item-has-value),.item-label-floating.item-has-placeholder:not(.item-has-value) .sc-ion-textarea-ios-h{opacity:0}.item-label-floating.item-has-placeholder.sc-ion-textarea-ios-h:not(.item-has-value).item-has-focus,.item-label-floating.item-has-placeholder:not(.item-has-value).item-has-focus .sc-ion-textarea-ios-h{transition:opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);opacity:1}[auto-grow=true].sc-ion-textarea-ios-h .native-textarea.sc-ion-textarea-ios{overflow:hidden}.sc-ion-textarea-ios-h{--padding-top:10px;--padding-end:10px;--padding-bottom:10px;--padding-start:0;font-size:inherit}.item-label-stacked.sc-ion-textarea-ios-h,.item-label-stacked .sc-ion-textarea-ios-h,.item-label-floating.sc-ion-textarea-ios-h,.item-label-floating .sc-ion-textarea-ios-h{--padding-top:8px;--padding-bottom:8px;--padding-start:0px}";
@@ -136,7 +136,7 @@ const Textarea = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     }
   }
   componentWillLoad() {
-    this.inheritedAttributes = Object.assign(Object.assign({}, inheritAriaAttributes(this.el)), inheritAttributes(this.el, ['data-form-type', 'title']));
+    this.inheritedAttributes = Object.assign(Object.assign({}, inheritAriaAttributes(this.el)), inheritAttributes(this.el, ['data-form-type', 'title', 'tabindex']));
   }
   componentDidLoad() {
     this.runAutoGrow();

package/dist/components/ion-toast.js

@@ -1,5 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { c as config, g as getIonMode } from './ionic-global.js';
+import { a as printIonWarning } from './index4.js';
 import { i as isCancel, p as prepareOverlay, a as present, d as dismiss, e as eventMethod, s as safeCall } from './overlays.js';
 import { s as sanitizeDOMString } from './index3.js';
 import { g as getClassMap, c as createColorClasses } from './theme.js';
@@ -113,9 +114,9 @@ const mdLeaveAnimation = (baseEl) => {
   return baseAnimation.easing('cubic-bezier(.36,.66,.04,1)').duration(300).addAnimation(wrapperAnimation);
 };
 
-const toastIosCss = ":host{--border-width:0;--border-style:none;--border-color:initial;--box-shadow:none;--min-width:auto;--width:auto;--min-height:auto;--height:auto;--max-height:auto;--white-space:normal;left:0;top:0;display:block;position:absolute;width:100%;height:100%;outline:none;color:var(--color);font-family:var(--ion-font-family, inherit);contain:strict;z-index:1001;pointer-events:none}:host-context([dir=rtl]){left:unset;right:unset;right:0}:host(.overlay-hidden){display:none}:host(.ion-color){--button-color:inherit;color:var(--ion-color-contrast)}:host(.ion-color) .toast-button-cancel{color:inherit}:host(.ion-color) .toast-wrapper{background:var(--ion-color-base)}.toast-wrapper{border-radius:var(--border-radius);left:var(--start);right:var(--end);width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);box-shadow:var(--box-shadow)}[dir=rtl] .toast-wrapper,:host-context([dir=rtl]) .toast-wrapper{left:unset;right:unset;left:var(--end);right:var(--start)}.toast-container{display:flex;align-items:center;pointer-events:auto;height:inherit;min-height:inherit;max-height:inherit;contain:content}.toast-content{display:flex;flex:1;flex-direction:column;justify-content:center}.toast-icon{margin-left:16px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.toast-icon{margin-left:unset;-webkit-margin-start:16px;margin-inline-start:16px}}.toast-message{flex:1;white-space:var(--white-space)}.toast-button-group{display:flex}.toast-button{border:0;outline:none;color:var(--button-color);z-index:0}.toast-icon,.toast-button-icon{font-size:1.4em}.toast-button-inner{display:flex;align-items:center}@media (any-hover: hover){.toast-button:hover{cursor:pointer}}:host{--background:var(--ion-color-step-50, #f2f2f2);--border-radius:14px;--button-color:var(--ion-color-primary, #3880ff);--color:var(--ion-color-step-850, #262626);--max-width:700px;--start:10px;--end:10px;font-size:14px}.toast-wrapper{margin-left:auto;margin-right:auto;margin-top:auto;margin-bottom:auto;display:block;position:absolute;z-index:10}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.toast-wrapper{margin-left:unset;margin-right:unset;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto}}@supports (backdrop-filter: blur(0)){:host(.toast-translucent) .toast-wrapper{background:rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8);backdrop-filter:saturate(180%) blur(20px)}}.toast-wrapper.toast-top{transform:translate3d(0,  -100%,  0);top:0}.toast-wrapper.toast-middle{opacity:0.01}.toast-wrapper.toast-bottom{transform:translate3d(0,  100%,  0);bottom:0}.toast-content{padding-left:15px;padding-right:15px;padding-top:15px;padding-bottom:15px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.toast-content{padding-left:unset;padding-right:unset;-webkit-padding-start:15px;padding-inline-start:15px;-webkit-padding-end:15px;padding-inline-end:15px}}.toast-header{margin-bottom:2px;font-weight:500}.toast-button{padding-left:15px;padding-right:15px;padding-top:10px;padding-bottom:10px;height:44px;transition:background-color, opacity 100ms linear;border:0;background-color:transparent;font-family:var(--ion-font-family);font-size:17px;font-weight:500;overflow:hidden}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.toast-button{padding-left:unset;padding-right:unset;-webkit-padding-start:15px;padding-inline-start:15px;-webkit-padding-end:15px;padding-inline-end:15px}}.toast-button.ion-activated{opacity:0.4}@media (any-hover: hover){.toast-button:hover{opacity:0.6}}";
+const toastIosCss = ":host{--border-width:0;--border-style:none;--border-color:initial;--box-shadow:none;--min-width:auto;--width:auto;--min-height:auto;--height:auto;--max-height:auto;--white-space:normal;left:0;top:0;display:block;position:absolute;width:100%;height:100%;outline:none;color:var(--color);font-family:var(--ion-font-family, inherit);contain:strict;z-index:1001;pointer-events:none}:host-context([dir=rtl]){left:unset;right:unset;right:0}:host(.overlay-hidden){display:none}:host(.ion-color){--button-color:inherit;color:var(--ion-color-contrast)}:host(.ion-color) .toast-button-cancel{color:inherit}:host(.ion-color) .toast-wrapper{background:var(--ion-color-base)}.toast-wrapper{border-radius:var(--border-radius);left:var(--start);right:var(--end);width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);box-shadow:var(--box-shadow)}[dir=rtl] .toast-wrapper,:host-context([dir=rtl]) .toast-wrapper{left:unset;right:unset;left:var(--end);right:var(--start)}.toast-container{display:flex;align-items:center;pointer-events:auto;height:inherit;min-height:inherit;max-height:inherit;contain:content}.toast-layout-stacked .toast-container{flex-wrap:wrap}.toast-layout-baseline .toast-content{display:flex;flex:1;flex-direction:column;justify-content:center}.toast-icon{margin-left:16px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.toast-icon{margin-left:unset;-webkit-margin-start:16px;margin-inline-start:16px}}.toast-message{flex:1;white-space:var(--white-space)}.toast-button-group{display:flex}.toast-layout-stacked .toast-button-group{justify-content:end;width:100%}.toast-button{border:0;outline:none;color:var(--button-color);z-index:0}.toast-icon,.toast-button-icon{font-size:1.4em}.toast-button-inner{display:flex;align-items:center}@media (any-hover: hover){.toast-button:hover{cursor:pointer}}:host{--background:var(--ion-color-step-50, #f2f2f2);--border-radius:14px;--button-color:var(--ion-color-primary, #3880ff);--color:var(--ion-color-step-850, #262626);--max-width:700px;--start:10px;--end:10px;font-size:14px}.toast-wrapper{margin-left:auto;margin-right:auto;margin-top:auto;margin-bottom:auto;display:block;position:absolute;z-index:10}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.toast-wrapper{margin-left:unset;margin-right:unset;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto}}@supports (backdrop-filter: blur(0)){:host(.toast-translucent) .toast-wrapper{background:rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8);backdrop-filter:saturate(180%) blur(20px)}}.toast-wrapper.toast-top{transform:translate3d(0,  -100%,  0);top:0}.toast-wrapper.toast-middle{opacity:0.01}.toast-wrapper.toast-bottom{transform:translate3d(0,  100%,  0);bottom:0}.toast-content{padding-left:15px;padding-right:15px;padding-top:15px;padding-bottom:15px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.toast-content{padding-left:unset;padding-right:unset;-webkit-padding-start:15px;padding-inline-start:15px;-webkit-padding-end:15px;padding-inline-end:15px}}.toast-header{margin-bottom:2px;font-weight:500}.toast-button{padding-left:15px;padding-right:15px;padding-top:10px;padding-bottom:10px;height:44px;transition:background-color, opacity 100ms linear;border:0;background-color:transparent;font-family:var(--ion-font-family);font-size:17px;font-weight:500;overflow:hidden}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.toast-button{padding-left:unset;padding-right:unset;-webkit-padding-start:15px;padding-inline-start:15px;-webkit-padding-end:15px;padding-inline-end:15px}}.toast-button.ion-activated{opacity:0.4}@media (any-hover: hover){.toast-button:hover{opacity:0.6}}";
 
-const toastMdCss = ":host{--border-width:0;--border-style:none;--border-color:initial;--box-shadow:none;--min-width:auto;--width:auto;--min-height:auto;--height:auto;--max-height:auto;--white-space:normal;left:0;top:0;display:block;position:absolute;width:100%;height:100%;outline:none;color:var(--color);font-family:var(--ion-font-family, inherit);contain:strict;z-index:1001;pointer-events:none}:host-context([dir=rtl]){left:unset;right:unset;right:0}:host(.overlay-hidden){display:none}:host(.ion-color){--button-color:inherit;color:var(--ion-color-contrast)}:host(.ion-color) .toast-button-cancel{color:inherit}:host(.ion-color) .toast-wrapper{background:var(--ion-color-base)}.toast-wrapper{border-radius:var(--border-radius);left:var(--start);right:var(--end);width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);box-shadow:var(--box-shadow)}[dir=rtl] .toast-wrapper,:host-context([dir=rtl]) .toast-wrapper{left:unset;right:unset;left:var(--end);right:var(--start)}.toast-container{display:flex;align-items:center;pointer-events:auto;height:inherit;min-height:inherit;max-height:inherit;contain:content}.toast-content{display:flex;flex:1;flex-direction:column;justify-content:center}.toast-icon{margin-left:16px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.toast-icon{margin-left:unset;-webkit-margin-start:16px;margin-inline-start:16px}}.toast-message{flex:1;white-space:var(--white-space)}.toast-button-group{display:flex}.toast-button{border:0;outline:none;color:var(--button-color);z-index:0}.toast-icon,.toast-button-icon{font-size:1.4em}.toast-button-inner{display:flex;align-items:center}@media (any-hover: hover){.toast-button:hover{cursor:pointer}}:host{--background:var(--ion-color-step-800, #333333);--border-radius:4px;--box-shadow:0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);--button-color:var(--ion-color-primary, #3880ff);--color:var(--ion-color-step-50, #f2f2f2);--max-width:700px;--start:8px;--end:8px;font-size:14px}.toast-wrapper{margin-left:auto;margin-right:auto;margin-top:auto;margin-bottom:auto;display:block;position:absolute;opacity:0.01;z-index:10}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.toast-wrapper{margin-left:unset;margin-right:unset;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto}}.toast-content{padding-left:16px;padding-right:16px;padding-top:14px;padding-bottom:14px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.toast-content{padding-left:unset;padding-right:unset;-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px}}.toast-header{margin-bottom:2px;font-weight:500;line-height:20px}.toast-message{line-height:20px}.toast-button-group-start{margin-left:8px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.toast-button-group-start{margin-left:unset;-webkit-margin-start:8px;margin-inline-start:8px}}.toast-button-group-end{margin-right:8px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.toast-button-group-end{margin-right:unset;-webkit-margin-end:8px;margin-inline-end:8px}}.toast-button{padding-left:15px;padding-right:15px;padding-top:10px;padding-bottom:10px;position:relative;background-color:transparent;font-family:var(--ion-font-family);font-size:14px;font-weight:500;letter-spacing:0.84px;text-transform:uppercase;overflow:hidden}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.toast-button{padding-left:unset;padding-right:unset;-webkit-padding-start:15px;padding-inline-start:15px;-webkit-padding-end:15px;padding-inline-end:15px}}.toast-button-cancel{color:var(--ion-color-step-100, #e6e6e6)}.toast-button-icon-only{border-radius:50%;padding-left:9px;padding-right:9px;padding-top:9px;padding-bottom:9px;width:36px;height:36px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.toast-button-icon-only{padding-left:unset;padding-right:unset;-webkit-padding-start:9px;padding-inline-start:9px;-webkit-padding-end:9px;padding-inline-end:9px}}@media (any-hover: hover){.toast-button:hover{background-color:rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.08)}.toast-button-cancel:hover{background-color:rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.08)}}";
+const toastMdCss = ":host{--border-width:0;--border-style:none;--border-color:initial;--box-shadow:none;--min-width:auto;--width:auto;--min-height:auto;--height:auto;--max-height:auto;--white-space:normal;left:0;top:0;display:block;position:absolute;width:100%;height:100%;outline:none;color:var(--color);font-family:var(--ion-font-family, inherit);contain:strict;z-index:1001;pointer-events:none}:host-context([dir=rtl]){left:unset;right:unset;right:0}:host(.overlay-hidden){display:none}:host(.ion-color){--button-color:inherit;color:var(--ion-color-contrast)}:host(.ion-color) .toast-button-cancel{color:inherit}:host(.ion-color) .toast-wrapper{background:var(--ion-color-base)}.toast-wrapper{border-radius:var(--border-radius);left:var(--start);right:var(--end);width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);box-shadow:var(--box-shadow)}[dir=rtl] .toast-wrapper,:host-context([dir=rtl]) .toast-wrapper{left:unset;right:unset;left:var(--end);right:var(--start)}.toast-container{display:flex;align-items:center;pointer-events:auto;height:inherit;min-height:inherit;max-height:inherit;contain:content}.toast-layout-stacked .toast-container{flex-wrap:wrap}.toast-layout-baseline .toast-content{display:flex;flex:1;flex-direction:column;justify-content:center}.toast-icon{margin-left:16px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.toast-icon{margin-left:unset;-webkit-margin-start:16px;margin-inline-start:16px}}.toast-message{flex:1;white-space:var(--white-space)}.toast-button-group{display:flex}.toast-layout-stacked .toast-button-group{justify-content:end;width:100%}.toast-button{border:0;outline:none;color:var(--button-color);z-index:0}.toast-icon,.toast-button-icon{font-size:1.4em}.toast-button-inner{display:flex;align-items:center}@media (any-hover: hover){.toast-button:hover{cursor:pointer}}:host{--background:var(--ion-color-step-800, #333333);--border-radius:4px;--box-shadow:0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);--button-color:var(--ion-color-primary, #3880ff);--color:var(--ion-color-step-50, #f2f2f2);--max-width:700px;--start:8px;--end:8px;font-size:14px}.toast-wrapper{margin-left:auto;margin-right:auto;margin-top:auto;margin-bottom:auto;display:block;position:absolute;opacity:0.01;z-index:10}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.toast-wrapper{margin-left:unset;margin-right:unset;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto}}.toast-content{padding-left:16px;padding-right:16px;padding-top:14px;padding-bottom:14px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.toast-content{padding-left:unset;padding-right:unset;-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px}}.toast-header{margin-bottom:2px;font-weight:500;line-height:20px}.toast-message{line-height:20px}.toast-layout-baseline .toast-button-group-start{margin-left:8px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.toast-layout-baseline .toast-button-group-start{margin-left:unset;-webkit-margin-start:8px;margin-inline-start:8px}}.toast-layout-stacked .toast-button-group-start{margin-right:8px;margin-top:8px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.toast-layout-stacked .toast-button-group-start{margin-right:unset;-webkit-margin-end:8px;margin-inline-end:8px}}.toast-layout-baseline .toast-button-group-end{margin-right:8px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.toast-layout-baseline .toast-button-group-end{margin-right:unset;-webkit-margin-end:8px;margin-inline-end:8px}}.toast-layout-stacked .toast-button-group-end{margin-right:8px;margin-bottom:8px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.toast-layout-stacked .toast-button-group-end{margin-right:unset;-webkit-margin-end:8px;margin-inline-end:8px}}.toast-button{padding-left:15px;padding-right:15px;padding-top:10px;padding-bottom:10px;position:relative;background-color:transparent;font-family:var(--ion-font-family);font-size:14px;font-weight:500;letter-spacing:0.84px;text-transform:uppercase;overflow:hidden}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.toast-button{padding-left:unset;padding-right:unset;-webkit-padding-start:15px;padding-inline-start:15px;-webkit-padding-end:15px;padding-inline-end:15px}}.toast-button-cancel{color:var(--ion-color-step-100, #e6e6e6)}.toast-button-icon-only{border-radius:50%;padding-left:9px;padding-right:9px;padding-top:9px;padding-bottom:9px;width:36px;height:36px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.toast-button-icon-only{padding-left:unset;padding-right:unset;-webkit-padding-start:9px;padding-inline-start:9px;-webkit-padding-end:9px;padding-inline-end:9px}}@media (any-hover: hover){.toast-button:hover{background-color:rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.08)}.toast-button-cancel:hover{background-color:rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.08)}}";
 
 const Toast = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -132,6 +133,14 @@ const Toast = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
      * until `dismiss()` is called.
      */
     this.duration = config.getNumber('toastDuration', 0);
+    /**
+     * Defines how the message and buttons are laid out in the toast.
+     * 'baseline': The message and the buttons will appear on the same line.
+     * Message text may wrap within the message container.
+     * 'stacked': The buttons containers and message will stack on top
+     * of each other. Use this if you have long text in your buttons.
+     */
+    this.layout = 'baseline';
     /**
      * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
      */
@@ -245,6 +254,7 @@ const Toast = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     return (h("div", { class: buttonGroupsClasses }, buttons.map((b) => (h("button", { type: "button", class: buttonClass(b), tabIndex: 0, onClick: () => this.buttonClick(b), part: "button" }, h("div", { class: "toast-button-inner" }, b.icon && (h("ion-icon", { icon: b.icon, slot: b.text === undefined ? 'icon-only' : undefined, class: "toast-button-icon" })), b.text), mode === 'md' && (h("ion-ripple-effect", { type: b.icon !== undefined && b.text === undefined ? 'unbounded' : 'bounded' })))))));
   }
   render() {
+    const { layout, el } = this;
     const allButtons = this.getButtons();
     const startButtons = allButtons.filter((b) => b.side === 'start');
     const endButtons = allButtons.filter((b) => b.side !== 'start');
@@ -252,8 +262,16 @@ const Toast = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     const wrapperClass = {
       'toast-wrapper': true,
       [`toast-${this.position}`]: true,
+      [`toast-layout-${layout}`]: true,
     };
     const role = allButtons.length > 0 ? 'dialog' : 'status';
+    /**
+     * Stacked buttons are only meant to be
+     *  used with one type of button.
+     */
+    if (layout === 'stacked' && startButtons.length > 0 && endButtons.length > 0) {
+      printIonWarning('This toast is using start and end buttons with the stacked toast layout. We recommend following the best practice of using either start or end buttons with the stacked toast layout.', el);
+    }
     return (h(Host, Object.assign({ "aria-live": "polite", "aria-atomic": "true", role: role, tabindex: "-1" }, this.htmlAttributes, { style: {
         zIndex: `${60000 + this.overlayIndex}`,
       }, class: createColorClasses(this.color, Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), h("div", { class: wrapperClass }, h("div", { class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (h("ion-icon", { class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), h("div", { class: "toast-content" }, this.header !== undefined && (h("div", { class: "toast-header", part: "header" }, this.header)), this.message !== undefined && (h("div", { class: "toast-message", part: "message", innerHTML: sanitizeDOMString(this.message) }))), this.renderButtons(endButtons, 'end')))));
@@ -271,6 +289,7 @@ const Toast = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "cssClass": [1, "css-class"],
     "duration": [2],
     "header": [1],
+    "layout": [1],
     "message": [1],
     "keyboardClose": [4, "keyboard-close"],
     "position": [1],

package/dist/components/ion-toggle.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { q as checkmarkOutline, s as removeOutline, t as ellipseOutline } from './index2.js';
+import { o as checkmarkOutline, p as removeOutline, q as ellipseOutline } from './index2.js';
 import { c as config, g as getIonMode } from './ionic-global.js';
-import { m as getAriaLabel, c as renderHiddenInput } from './helpers.js';
+import { l as getAriaLabel, c as renderHiddenInput } from './helpers.js';
 import { d as hapticSelection } from './haptic.js';
 import { i as isRTL } from './dir.js';
 import { c as createColorClasses, h as hostContext } from './theme.js';
@@ -135,7 +135,7 @@ const Toggle = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     return (h("ion-icon", { class: {
         'toggle-switch-icon': true,
         'toggle-switch-icon-checked': checked,
-      }, icon: icon }));
+      }, icon: icon, "aria-hidden": "true" }));
   }
   render() {
     const { activated, color, checked, disabled, el, inputId, name, enableOnOffLabels } = this;

package/dist/components/ionic-global.js

@@ -3,6 +3,7 @@ import { getMode, Context, setPlatformHelpers, setMode } from '@stencil/core/int
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
+// TODO(FW-2832): types
 class Config {
   constructor() {
     this.m = new Map();

package/dist/components/ios.transition.js

@@ -5,6 +5,7 @@ import { g as getIonPageElement } from './index7.js';
  * (C) Ionic http://ionicframework.com - MIT License
  */
 const DURATION = 540;
+// TODO(FW-2832): types
 const getClonedElement = (tagName) => {
   return document.querySelector(`${tagName}.ion-cloned-element`);
 };

package/dist/components/item.js

@@ -1,8 +1,8 @@
 import { proxyCustomElement, HTMLElement, forceUpdate, h, Host } from '@stencil/core/internal/client';
 import { f as chevronForward } from './index2.js';
 import { g as getIonMode } from './ionic-global.js';
-import { r as raf, e as inheritAttributes } from './helpers.js';
-import { a as printIonError } from './index4.js';
+import { e as inheritAttributes, r as raf } from './helpers.js';
+import { p as printIonError } from './index4.js';
 import { h as hostContext, c as createColorClasses, o as openURL } from './theme.js';
 import { d as defineCustomElement$3 } from './icon.js';
 import { d as defineCustomElement$2 } from './note.js';
@@ -112,9 +112,11 @@ const Item = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       this.clickListener = undefined;
     }
   }
+  componentWillLoad() {
+    this.inheritedAriaAttributes = inheritAttributes(this.el, ['aria-label']);
+  }
   componentDidLoad() {
     raf(() => {
-      this.inheritedAriaAttributes = inheritAttributes(this.el, ['aria-label']);
       this.setMultipleInputs();
       this.focusable = this.isFocusable();
     });
@@ -249,6 +251,7 @@ const Item = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     return (h(Host, { "aria-disabled": ariaDisabled, class: Object.assign(Object.assign(Object.assign({}, childStyles), labelColorStyles), createColorClasses(this.color, {
         item: true,
         [mode]: true,
+        'item-lines-default': lines === undefined,
         [`item-lines-${lines}`]: lines !== undefined,
         [`item-fill-${fillValue}`]: true,
         [`item-shape-${shape}`]: shape !== undefined,

package/dist/components/keyboard.js

@@ -4,6 +4,7 @@
 const KEYBOARD_DID_OPEN = 'ionKeyboardDidShow';
 const KEYBOARD_DID_CLOSE = 'ionKeyboardDidHide';
 const KEYBOARD_THRESHOLD = 150;
+// TODO(FW-2832): types
 let previousVisualViewport = {};
 let currentVisualViewport = {};
 let keyboardOpen = false;

package/dist/components/list.js

@@ -1,9 +1,9 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { g as getIonMode } from './ionic-global.js';
 
-const listIosCss = "ion-list{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;display:block;contain:content;list-style-type:none}ion-list.list-inset{transform:translateZ(0);overflow:hidden}.list-ios{background:var(--ion-item-background, var(--ion-background-color, #fff))}.list-ios.list-inset{margin-left:16px;margin-right:16px;margin-top:16px;margin-bottom:16px;border-radius:10px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.list-ios.list-inset{margin-left:unset;margin-right:unset;-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:16px;margin-inline-end:16px}}.list-ios.list-inset ion-item{--border-width:0 0 1px 0;--inner-border-width:0}.list-ios.list-inset ion-item:last-child{--border-width:0;--inner-border-width:0}.list-ios.list-inset+ion-list.list-inset{margin-top:0}.list-ios-lines-none .item{--border-width:0;--inner-border-width:0}.list-ios-lines-full .item,.list-ios .item-lines-full{--border-width:0 0 0.55px 0}.list-ios-lines-full .item{--inner-border-width:0}.list-ios-lines-inset .item,.list-ios .item-lines-inset{--inner-border-width:0 0 0.55px 0}.list-ios .item-lines-inset{--border-width:0}.list-ios .item-lines-full{--inner-border-width:0}.list-ios .item-lines-none{--border-width:0;--inner-border-width:0}ion-card .list-ios{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}";
+const listIosCss = "ion-list{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;display:block;contain:content;list-style-type:none}ion-list.list-inset{transform:translateZ(0);overflow:hidden}.list-ios{background:var(--ion-item-background, var(--ion-background-color, #fff))}.list-ios.list-inset{margin-left:16px;margin-right:16px;margin-top:16px;margin-bottom:16px;border-radius:10px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.list-ios.list-inset{margin-left:unset;margin-right:unset;-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:16px;margin-inline-end:16px}}.list-ios.list-inset ion-item:last-child{--border-width:0;--inner-border-width:0}.list-ios.list-inset+ion-list.list-inset{margin-top:0}.list-ios-lines-none .item-lines-default{--inner-border-width:0px;--border-width:0px}.list-ios-lines-full .item-lines-default{--inner-border-width:0px;--border-width:0 0 0.55px 0}.list-ios-lines-inset .item-lines-default{--inner-border-width:0 0 0.55px 0;--border-width:0px}ion-card .list-ios{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}";
 
-const listMdCss = "ion-list{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;display:block;contain:content;list-style-type:none}ion-list.list-inset{transform:translateZ(0);overflow:hidden}.list-md{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:8px;padding-bottom:8px;background:var(--ion-item-background, var(--ion-background-color, #fff))}.list-md>.input:last-child::after{left:0}[dir=rtl] .list-md>.input:last-child::after,:host-context([dir=rtl]) .list-md>.input:last-child::after{left:unset;right:unset;right:0}.list-md.list-inset{margin-left:16px;margin-right:16px;margin-top:16px;margin-bottom:16px;border-radius:2px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.list-md.list-inset{margin-left:unset;margin-right:unset;-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:16px;margin-inline-end:16px}}.list-md.list-inset ion-item:first-child{--border-radius:2px 2px 0 0}.list-md.list-inset ion-item:last-child{--border-radius:0 0 2px, 2px;--border-width:0;--inner-border-width:0}.list-md.list-inset .item-interactive{--padding-start:0;--padding-end:0}.list-md.list-inset+ion-list.list-inset{margin-top:0}.list-md-lines-none .item{--border-width:0;--inner-border-width:0}.list-md-lines-full .item,.list-md .item-lines-full{--border-width:0 0 1px 0}.list-md-lines-full .item{--inner-border-width:0}.list-md-lines-inset .item,.list-md .item-lines-inset{--inner-border-width:0 0 1px 0}.list-md .item-lines-inset{--border-width:0}.list-md .item-lines-full{--inner-border-width:0}.list-md .item-lines-none{--border-width:0;--inner-border-width:0}ion-card .list-md{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}";
+const listMdCss = "ion-list{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;display:block;contain:content;list-style-type:none}ion-list.list-inset{transform:translateZ(0);overflow:hidden}.list-md{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:8px;padding-bottom:8px;background:var(--ion-item-background, var(--ion-background-color, #fff))}.list-md>.input:last-child::after{left:0}[dir=rtl] .list-md>.input:last-child::after,:host-context([dir=rtl]) .list-md>.input:last-child::after{left:unset;right:unset;right:0}.list-md.list-inset{margin-left:16px;margin-right:16px;margin-top:16px;margin-bottom:16px;border-radius:2px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.list-md.list-inset{margin-left:unset;margin-right:unset;-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:16px;margin-inline-end:16px}}.list-md.list-inset ion-item:first-child{--border-radius:2px 2px 0 0}.list-md.list-inset ion-item:last-child{--border-radius:0 0 2px, 2px;--border-width:0;--inner-border-width:0}.list-md.list-inset+ion-list.list-inset{margin-top:0}.list-md-lines-none .item-lines-default{--inner-border-width:0px;--border-width:0px}.list-md-lines-full .item-lines-default{--inner-border-width:0px;--border-width:0 0 1px 0}.list-md-lines-inset .item-lines-default{--inner-border-width:0 0 1px 0;--border-width:0px}ion-card .list-md{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}";
 
 const List = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/overlays.js

@@ -1,6 +1,6 @@
 import { g as getIonMode, c as config } from './ionic-global.js';
 import { OVERLAY_BACK_BUTTON_PRIORITY } from './hardware-back-button.js';
-import { d as componentOnReady, a as addEventListener, o as focusElement, b as removeEventListener, g as getElementRoot } from './helpers.js';
+import { d as componentOnReady, a as addEventListener, n as focusElement, b as removeEventListener, g as getElementRoot } from './helpers.js';
 
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
@@ -23,6 +23,7 @@ const createController = (tagName) => {
 const alertController = /*@__PURE__*/ createController('ion-alert');
 const actionSheetController = /*@__PURE__*/ createController('ion-action-sheet');
 const popoverController = /*@__PURE__*/ createController('ion-popover');
+const toastController = /*@__PURE__*/ createController('ion-toast');
 const prepareOverlay = (el) => {
   if (typeof document !== 'undefined') {
     connectListeners(document);
@@ -425,6 +426,13 @@ const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLeaveAnim
      */
     overlay.el.classList.add('overlay-hidden');
     overlay.el.style.removeProperty('pointer-events');
+    /**
+     * Clear any focus trapping references
+     * when the overlay is dismissed.
+     */
+    if (overlay.el.lastFocus !== undefined) {
+      overlay.el.lastFocus = undefined;
+    }
   }
   catch (err) {
     console.error(err);
@@ -499,4 +507,4 @@ const safeCall = (handler, arg) => {
 const BACKDROP = 'backdrop';
 const GESTURE = 'gesture';
 
-export { BACKDROP as B, GESTURE as G, present as a, activeAnimations as b, popoverController as c, dismiss as d, eventMethod as e, actionSheetController as f, getOverlay as g, alertController as h, isCancel as i, focusFirstDescendant as j, prepareOverlay as p, safeCall as s };
+export { BACKDROP as B, GESTURE as G, present as a, activeAnimations as b, popoverController as c, dismiss as d, eventMethod as e, actionSheetController as f, getOverlay as g, alertController as h, isCancel as i, focusFirstDescendant as j, prepareOverlay as p, safeCall as s, toastController as t };

package/dist/components/picker-column-internal.js

@@ -269,6 +269,7 @@ const PickerColumnInternal = /*@__PURE__*/ proxyCustomElement(class extends HTML
     new IntersectionObserver(visibleCallback, { threshold: 0.001 }).observe(this.el);
     const parentEl = (this.parentEl = this.el.closest('ion-picker-internal'));
     if (parentEl !== null) {
+      // TODO(FW-2832): type
       parentEl.addEventListener('ionInputModeChange', (ev) => this.inputModeChange(ev));
     }
   }

package/dist/components/picker-column.js

@@ -1,7 +1,8 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { g as getIonMode } from './ionic-global.js';
-import { l as clamp } from './helpers.js';
+import { j as clamp } from './helpers.js';
 import { b as hapticSelectionChanged, c as hapticSelectionEnd, a as hapticSelectionStart } from './haptic.js';
+import { g as getClassMap } from './theme.js';
 
 const pickerColumnIosCss = ".picker-col{display:flex;position:relative;flex:1;justify-content:center;height:100%;box-sizing:content-box;contain:content}.picker-opts{position:relative;flex:1;max-width:100%}.picker-opt{left:0;top:0;display:block;position:absolute;width:100%;border:0;text-align:center;text-overflow:ellipsis;white-space:nowrap;contain:strict;overflow:hidden;will-change:transform}[dir=rtl] .picker-opt,:host-context([dir=rtl]) .picker-opt{left:unset;right:unset;right:0}.picker-opt.picker-opt-disabled{pointer-events:none}.picker-opt-disabled{opacity:0}.picker-opts-left{justify-content:flex-start}.picker-opts-right{justify-content:flex-end}.picker-opt:active,.picker-opt:focus{outline:none}.picker-prefix{position:relative;flex:1;text-align:end;white-space:nowrap}.picker-suffix{position:relative;flex:1;text-align:start;white-space:nowrap}.picker-col{padding-left:4px;padding-right:4px;padding-top:0;padding-bottom:0;transform-style:preserve-3d}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.picker-col{padding-left:unset;padding-right:unset;-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px}}.picker-prefix,.picker-suffix,.picker-opts{top:77px;transform-style:preserve-3d;color:inherit;font-size:20px;line-height:42px;pointer-events:none}.picker-opt{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;transform-origin:center center;height:46px;transform-style:preserve-3d;transition-timing-function:ease-out;background:transparent;color:inherit;font-size:20px;line-height:42px;backface-visibility:hidden;pointer-events:auto}[dir=rtl] .picker-opt,:host-context([dir=rtl]) .picker-opt{transform-origin:calc(100% - center) center}";
 
@@ -58,8 +59,10 @@ const PickerColumnCmp = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     this.refresh();
   }
   disconnectedCallback() {
-    cancelAnimationFrame(this.rafId);
-    clearTimeout(this.tmrId);
+    if (this.rafId !== undefined)
+      cancelAnimationFrame(this.rafId);
+    if (this.tmrId)
+      clearTimeout(this.tmrId);
     if (this.gesture) {
       this.gesture.destroy();
       this.gesture = undefined;
@@ -74,7 +77,8 @@ const PickerColumnCmp = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     const y = selectedIndex > -1 ? -(selectedIndex * this.optHeight) : 0;
     this.velocity = 0;
     // set what y position we're at
-    cancelAnimationFrame(this.rafId);
+    if (this.rafId !== undefined)
+      cancelAnimationFrame(this.rafId);
     this.update(y, duration, true);
     this.emitColChange();
   }
@@ -200,7 +204,8 @@ const PickerColumnCmp = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     detail.event.stopPropagation();
     hapticSelectionStart();
     // reset everything
-    cancelAnimationFrame(this.rafId);
+    if (this.rafId !== undefined)
+      cancelAnimationFrame(this.rafId);
     const options = this.col.options;
     let minY = options.length - 1;
     let maxY = 0;
@@ -300,16 +305,10 @@ const PickerColumnCmp = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
   }
   render() {
     const col = this.col;
-    const Button = 'button';
     const mode = getIonMode(this);
-    return (h(Host, { class: {
-        [mode]: true,
-        'picker-col': true,
-        'picker-opts-left': this.col.align === 'left',
-        'picker-opts-right': this.col.align === 'right',
-      }, style: {
+    return (h(Host, { class: Object.assign({ [mode]: true, 'picker-col': true, 'picker-opts-left': this.col.align === 'left', 'picker-opts-right': this.col.align === 'right' }, getClassMap(col.cssClass)), style: {
         'max-width': this.col.columnWidth,
-      } }, col.prefix && (h("div", { class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), h("div", { class: "picker-opts", style: { maxWidth: col.optionsWidth }, ref: (el) => (this.optsEl = el) }, col.options.map((o, index) => (h(Button, { type: "button", class: { 'picker-opt': true, 'picker-opt-disabled': !!o.disabled }, "opt-index": index }, o.text)))), col.suffix && (h("div", { class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
+      } }, col.prefix && (h("div", { class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), h("div", { class: "picker-opts", style: { maxWidth: col.optionsWidth }, ref: (el) => (this.optsEl = el) }, col.options.map((o, index) => (h("button", { "aria-label": o.ariaLabel, class: { 'picker-opt': true, 'picker-opt-disabled': !!o.disabled }, "opt-index": index }, o.text)))), col.suffix && (h("div", { class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
   }
   get el() { return this; }
   static get watchers() { return {

package/dist/components/picker-internal.js

@@ -37,6 +37,7 @@ const PickerInternal = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
      * that focused means we are still in input mode.
      */
     this.onFocusOut = (ev) => {
+      // TODO(FW-2832): type
       const { relatedTarget } = ev;
       if (!relatedTarget || (relatedTarget.tagName !== 'ION-PICKER-COLUMN-INTERNAL' && relatedTarget !== this.inputEl)) {
         this.exitInputMode();
@@ -48,6 +49,7 @@ const PickerInternal = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
      * whether to enter/exit input mode.
      */
     this.onFocusIn = (ev) => {
+      // TODO(FW-2832): type
       const { target } = ev;
       /**
        * Due to browser differences in how/when focus

package/dist/components/popover.js

@@ -2,6 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { g as getIonMode, a as isPlatform } from './ionic-global.js';
 import { C as CoreDelegate, a as attachComponent, d as detachComponent } from './framework-delegate.js';
 import { r as raf, g as getElementRoot, a as addEventListener } from './helpers.js';
+import { a as printIonWarning } from './index4.js';
 import { B as BACKDROP, p as prepareOverlay, d as dismiss, e as eventMethod, a as present, j as focusFirstDescendant } from './overlays.js';
 import { g as getClassMap } from './theme.js';
 import { d as deepReady } from './index7.js';
@@ -758,6 +759,7 @@ const POPOVER_IOS_BODY_PADDING = 5;
 /**
  * iOS Popover Enter Animation
  */
+// TODO(FW-2832): types
 const iosEnterAnimation = (baseEl, opts) => {
   var _a;
   const { event: ev, size, trigger, reference, side, align } = opts;
@@ -873,6 +875,7 @@ const POPOVER_MD_BODY_PADDING = 12;
 /**
  * Md Popover Enter Animation
  */
+// TODO(FW-2832): types
 const mdEnterAnimation = (baseEl, opts) => {
   var _a;
   const { event: ev, size, trigger, reference, side, align } = opts;
@@ -1110,8 +1113,12 @@ const Popover = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       if (destroyTriggerInteraction) {
         destroyTriggerInteraction();
       }
+      if (trigger === undefined) {
+        return;
+      }
       const triggerEl = (this.triggerEl = trigger !== undefined ? document.getElementById(trigger) : null);
       if (!triggerEl) {
+        printIonWarning(`A trigger element with the ID "${trigger}" was not found in the DOM. The trigger element must be in the DOM when the "trigger" property is set on ion-popover.`, this.el);
         return;
       }
       this.destroyTriggerInteraction = configureTriggerInteraction(triggerEl, triggerAction, el);
@@ -1247,9 +1254,8 @@ const Popover = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     if (this.currentTransition !== undefined) {
       await this.currentTransition;
     }
-    const data = Object.assign(Object.assign({}, this.componentProps), { popover: this.el });
     const { inline, delegate } = this.getDelegate(true);
-    this.usersElement = await attachComponent(delegate, this.el, this.component, ['popover-viewport'], data, inline);
+    this.usersElement = await attachComponent(delegate, this.el, this.component, ['popover-viewport'], this.componentProps, inline);
     await deepReady(this.usersElement);
     if (!this.keyboardEvents) {
       this.configureKeyboardInteraction();

package/dist/components/pos-add-literal-value.d.ts

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

package/dist/components/pos-add-literal-value.js

@@ -0,0 +1,6 @@
+import { P as PosAddLiteralValue$1, d as defineCustomElement$1 } from './pos-add-literal-value2.js';
+
+const PosAddLiteralValue = PosAddLiteralValue$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PosAddLiteralValue, defineCustomElement };