@pod-os/elements 0.11.1-7f3678c.0 → 0.11.1-e89c280.0

package/dist/components/ion-input.js

@@ -1,353 +1,4 @@
-import { proxyCustomElement, HTMLElement, createEvent, Build, h, Host } from '@stencil/core/internal/client';
-import { j as closeCircle, k as closeSharp } from './index2.js';
-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 { c as createColorClasses } from './theme.js';
-import { d as defineCustomElement$2 } from './icon.js';
-
-const inputIosCss = ".sc-ion-input-ios-h{--placeholder-color:initial;--placeholder-font-style:initial;--placeholder-font-weight:initial;--placeholder-opacity:.5;--padding-top:0;--padding-end:0;--padding-bottom:0;--padding-start:0;--background:transparent;--color:initial;display:flex;position:relative;flex:1;align-items:center;width:100%;padding:0 !important;background:var(--background);color:var(--color);font-family:var(--ion-font-family, inherit);z-index:2}ion-item.sc-ion-input-ios-h:not(.item-label),ion-item:not(.item-label) .sc-ion-input-ios-h{--padding-start:0}.ion-color.sc-ion-input-ios-h{color:var(--ion-color-base)}.native-input.sc-ion-input-ios{border-radius:var(--border-radius);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;display:inline-block;flex:1;width:100%;max-width:100%;max-height:100%;border:0;outline:none;background:transparent;box-sizing:border-box;appearance:none}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.native-input.sc-ion-input-ios{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-input.sc-ion-input-ios::placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-input.sc-ion-input-ios:-webkit-autofill{background-color:transparent}.native-input.sc-ion-input-ios:invalid{box-shadow:none}.native-input.sc-ion-input-ios::-ms-clear{display:none}.native-input[disabled].sc-ion-input-ios:not(.cloned-input){opacity:0.4}.cloned-input.sc-ion-input-ios{left:0;top:0;position:absolute;pointer-events:none}[dir=rtl].sc-ion-input-ios .cloned-input.sc-ion-input-ios,[dir=rtl].sc-ion-input-ios-h .cloned-input.sc-ion-input-ios,[dir=rtl] .sc-ion-input-ios-h .cloned-input.sc-ion-input-ios{left:unset;right:unset;right:0}.cloned-input.sc-ion-input-ios:disabled{opacity:1}.input-clear-icon.sc-ion-input-ios{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;background-position:center;display:flex;align-items:center;justify-content:center;width:30px;height:30px;border:0;outline:none;background-color:transparent;background-repeat:no-repeat;visibility:hidden;appearance:none}.input-clear-icon.sc-ion-input-ios ion-icon.sc-ion-input-ios{color:var(--ion-color-step-600, #666666)}.input-clear-icon.sc-ion-input-ios:focus{opacity:0.5}.has-value.sc-ion-input-ios-h .input-clear-icon.sc-ion-input-ios{visibility:visible}.has-focus.sc-ion-input-ios-h{pointer-events:none}.has-focus.sc-ion-input-ios-h input.sc-ion-input-ios,.has-focus.sc-ion-input-ios-h a.sc-ion-input-ios,.has-focus.sc-ion-input-ios-h button.sc-ion-input-ios{pointer-events:auto}.item-label-floating.item-has-placeholder.sc-ion-input-ios-h:not(.item-has-value),.item-label-floating.item-has-placeholder:not(.item-has-value) .sc-ion-input-ios-h{opacity:0}.item-label-floating.item-has-placeholder.sc-ion-input-ios-h:not(.item-has-value).item-has-focus,.item-label-floating.item-has-placeholder:not(.item-has-value).item-has-focus .sc-ion-input-ios-h{transition:opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);opacity:1}.sc-ion-input-ios-h{--padding-top:10px;--padding-end:10px;--padding-bottom:10px;--padding-start:0;font-size:inherit}.item-label-stacked.sc-ion-input-ios-h,.item-label-stacked .sc-ion-input-ios-h,.item-label-floating.sc-ion-input-ios-h,.item-label-floating .sc-ion-input-ios-h{--padding-top:8px;--padding-bottom:8px;--padding-start:0px}.input-clear-icon.sc-ion-input-ios ion-icon.sc-ion-input-ios{width:18px;height:18px}";
-
-const inputMdCss = ".sc-ion-input-md-h{--placeholder-color:initial;--placeholder-font-style:initial;--placeholder-font-weight:initial;--placeholder-opacity:.5;--padding-top:0;--padding-end:0;--padding-bottom:0;--padding-start:0;--background:transparent;--color:initial;display:flex;position:relative;flex:1;align-items:center;width:100%;padding:0 !important;background:var(--background);color:var(--color);font-family:var(--ion-font-family, inherit);z-index:2}ion-item.sc-ion-input-md-h:not(.item-label),ion-item:not(.item-label) .sc-ion-input-md-h{--padding-start:0}.ion-color.sc-ion-input-md-h{color:var(--ion-color-base)}.native-input.sc-ion-input-md{border-radius:var(--border-radius);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;display:inline-block;flex:1;width:100%;max-width:100%;max-height:100%;border:0;outline:none;background:transparent;box-sizing:border-box;appearance:none}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.native-input.sc-ion-input-md{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-input.sc-ion-input-md::placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-input.sc-ion-input-md:-webkit-autofill{background-color:transparent}.native-input.sc-ion-input-md:invalid{box-shadow:none}.native-input.sc-ion-input-md::-ms-clear{display:none}.native-input[disabled].sc-ion-input-md:not(.cloned-input){opacity:0.4}.cloned-input.sc-ion-input-md{left:0;top:0;position:absolute;pointer-events:none}[dir=rtl].sc-ion-input-md .cloned-input.sc-ion-input-md,[dir=rtl].sc-ion-input-md-h .cloned-input.sc-ion-input-md,[dir=rtl] .sc-ion-input-md-h .cloned-input.sc-ion-input-md{left:unset;right:unset;right:0}.cloned-input.sc-ion-input-md:disabled{opacity:1}.input-clear-icon.sc-ion-input-md{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;background-position:center;display:flex;align-items:center;justify-content:center;width:30px;height:30px;border:0;outline:none;background-color:transparent;background-repeat:no-repeat;visibility:hidden;appearance:none}.input-clear-icon.sc-ion-input-md ion-icon.sc-ion-input-md{color:var(--ion-color-step-600, #666666)}.input-clear-icon.sc-ion-input-md:focus{opacity:0.5}.has-value.sc-ion-input-md-h .input-clear-icon.sc-ion-input-md{visibility:visible}.has-focus.sc-ion-input-md-h{pointer-events:none}.has-focus.sc-ion-input-md-h input.sc-ion-input-md,.has-focus.sc-ion-input-md-h a.sc-ion-input-md,.has-focus.sc-ion-input-md-h button.sc-ion-input-md{pointer-events:auto}.item-label-floating.item-has-placeholder.sc-ion-input-md-h:not(.item-has-value),.item-label-floating.item-has-placeholder:not(.item-has-value) .sc-ion-input-md-h{opacity:0}.item-label-floating.item-has-placeholder.sc-ion-input-md-h:not(.item-has-value).item-has-focus,.item-label-floating.item-has-placeholder:not(.item-has-value).item-has-focus .sc-ion-input-md-h{transition:opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);opacity:1}.sc-ion-input-md-h{--padding-top:10px;--padding-end:0;--padding-bottom:10px;--padding-start:8px;font-size:inherit}.item-label-stacked.sc-ion-input-md-h,.item-label-stacked .sc-ion-input-md-h,.item-label-floating.sc-ion-input-md-h,.item-label-floating .sc-ion-input-md-h{--padding-top:8px;--padding-bottom:8px;--padding-start:0}.input-clear-icon.sc-ion-input-md ion-icon.sc-ion-input-md{width:22px;height:22px}";
-
-const Input = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.ionInput = createEvent(this, "ionInput", 7);
-    this.ionChange = createEvent(this, "ionChange", 7);
-    this.ionBlur = createEvent(this, "ionBlur", 7);
-    this.ionFocus = createEvent(this, "ionFocus", 7);
-    this.ionStyle = createEvent(this, "ionStyle", 7);
-    this.inputId = `ion-input-${inputIds++}`;
-    this.didBlurAfterEdit = false;
-    this.inheritedAttributes = {};
-    this.isComposing = false;
-    /**
-     * This is required for a WebKit bug which requires us to
-     * blur and focus an input to properly focus the input in
-     * an item with delegatesFocus. It will no longer be needed
-     * with iOS 14.
-     *
-     * @internal
-     */
-    this.fireFocusEvents = true;
-    this.hasFocus = false;
-    /**
-     * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.
-     * Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
-     */
-    this.autocapitalize = 'off';
-    /**
-     * Indicates whether the value of the control can be automatically completed by the browser.
-     */
-    this.autocomplete = 'off';
-    /**
-     * Whether auto correction should be enabled when the user is entering/editing the text value.
-     */
-    this.autocorrect = 'off';
-    /**
-     * This Boolean attribute lets you specify that a form control should have input focus when the page loads.
-     */
-    this.autofocus = false;
-    /**
-     * If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input.
-     */
-    this.clearInput = false;
-    /**
-     * Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.
-     */
-    this.debounce = 0;
-    /**
-     * If `true`, the user cannot interact with the input.
-     */
-    this.disabled = false;
-    /**
-     * The name of the control, which is submitted with the form data.
-     */
-    this.name = this.inputId;
-    /**
-     * If `true`, the user cannot modify the value.
-     */
-    this.readonly = false;
-    /**
-     * If `true`, the user must fill in a value before submitting a form.
-     */
-    this.required = false;
-    /**
-     * If `true`, the element will have its spelling and grammar checked.
-     */
-    this.spellcheck = false;
-    /**
-     * The type of control to display. The default type is text.
-     */
-    this.type = 'text';
-    /**
-     * The value of the input.
-     */
-    this.value = '';
-    this.onInput = (ev) => {
-      const input = ev.target;
-      if (input) {
-        this.value = input.value || '';
-      }
-      this.ionInput.emit(ev);
-    };
-    this.onBlur = (ev) => {
-      this.hasFocus = false;
-      this.focusChanged();
-      this.emitStyle();
-      if (this.fireFocusEvents) {
-        this.ionBlur.emit(ev);
-      }
-    };
-    this.onFocus = (ev) => {
-      this.hasFocus = true;
-      this.focusChanged();
-      this.emitStyle();
-      if (this.fireFocusEvents) {
-        this.ionFocus.emit(ev);
-      }
-    };
-    this.onKeydown = (ev) => {
-      if (this.shouldClearOnEdit()) {
-        // Did the input value change after it was blurred and edited?
-        // Do not clear if user is hitting Enter to submit form
-        if (this.didBlurAfterEdit && this.hasValue() && ev.key !== 'Enter') {
-          // Clear the input
-          this.clearTextInput();
-        }
-        // Reset the flag
-        this.didBlurAfterEdit = false;
-      }
-    };
-    this.onCompositionStart = () => {
-      this.isComposing = true;
-    };
-    this.onCompositionEnd = () => {
-      this.isComposing = false;
-    };
-    this.clearTextInput = (ev) => {
-      if (this.clearInput && !this.readonly && !this.disabled && ev) {
-        ev.preventDefault();
-        ev.stopPropagation();
-        // Attempt to focus input again after pressing clear button
-        this.setFocus();
-      }
-      this.value = '';
-      /**
-       * This is needed for clearOnEdit
-       * Otherwise the value will not be cleared
-       * if user is inside the input
-       */
-      if (this.nativeInput) {
-        this.nativeInput.value = '';
-      }
-    };
-  }
-  debounceChanged() {
-    this.ionChange = debounceEvent(this.ionChange, this.debounce);
-  }
-  disabledChanged() {
-    this.emitStyle();
-  }
-  /**
-   * Update the item classes when the placeholder changes
-   */
-  placeholderChanged() {
-    this.emitStyle();
-  }
-  /**
-   * Update the native input element when the value changes
-   */
-  valueChanged() {
-    const nativeInput = this.nativeInput;
-    const value = this.getValue();
-    if (nativeInput && nativeInput.value !== value && !this.isComposing) {
-      /**
-       * Assigning the native input's value on attribute
-       * value change, allows `ionInput` implementations
-       * to override the control's value.
-       *
-       * Used for patterns such as input trimming (removing whitespace),
-       * or input masking.
-       */
-      nativeInput.value = value;
-    }
-    this.emitStyle();
-    this.ionChange.emit({ value: this.value == null ? this.value : this.value.toString() });
-  }
-  componentWillLoad() {
-    this.inheritedAttributes = Object.assign(Object.assign({}, inheritAriaAttributes(this.el)), inheritAttributes(this.el, ['tabindex', 'title', 'data-form-type']));
-  }
-  connectedCallback() {
-    this.emitStyle();
-    this.debounceChanged();
-    if (Build.isBrowser) {
-      document.dispatchEvent(new CustomEvent('ionInputDidLoad', {
-        detail: this.el,
-      }));
-    }
-  }
-  componentDidLoad() {
-    const nativeInput = this.nativeInput;
-    if (nativeInput) {
-      // TODO: FW-729 Update to JSX bindings when Stencil resolves bug with:
-      // https://github.com/ionic-team/stencil/issues/3235
-      nativeInput.addEventListener('compositionstart', this.onCompositionStart);
-      nativeInput.addEventListener('compositionend', this.onCompositionEnd);
-    }
-  }
-  disconnectedCallback() {
-    if (Build.isBrowser) {
-      document.dispatchEvent(new CustomEvent('ionInputDidUnload', {
-        detail: this.el,
-      }));
-    }
-    const nativeInput = this.nativeInput;
-    if (nativeInput) {
-      nativeInput.removeEventListener('compositionstart', this.onCompositionStart);
-      nativeInput.removeEventListener('compositionEnd', this.onCompositionEnd);
-    }
-  }
-  /**
-   * Sets focus on the native `input` in `ion-input`. Use this method instead of the global
-   * `input.focus()`.
-   *
-   * Developers who wish to focus an input when a page enters
-   * should call `setFocus()` in the `ionViewDidEnter()` lifecycle method.
-   */
-  async setFocus() {
-    if (this.nativeInput) {
-      this.nativeInput.focus();
-    }
-  }
-  /**
-   * Sets blur on the native `input` in `ion-input`. Use this method instead of the global
-   * `input.blur()`.
-   * @internal
-   */
-  async setBlur() {
-    if (this.nativeInput) {
-      this.nativeInput.blur();
-    }
-  }
-  /**
-   * Returns the native `<input>` element used under the hood.
-   */
-  getInputElement() {
-    return Promise.resolve(this.nativeInput);
-  }
-  shouldClearOnEdit() {
-    const { type, clearOnEdit } = this;
-    return clearOnEdit === undefined ? type === 'password' : clearOnEdit;
-  }
-  getValue() {
-    return typeof this.value === 'number' ? this.value.toString() : (this.value || '').toString();
-  }
-  emitStyle() {
-    this.ionStyle.emit({
-      interactive: true,
-      input: true,
-      'has-placeholder': this.placeholder !== undefined,
-      'has-value': this.hasValue(),
-      'has-focus': this.hasFocus,
-      'interactive-disabled': this.disabled,
-    });
-  }
-  focusChanged() {
-    // If clearOnEdit is enabled and the input blurred but has a value, set a flag
-    if (!this.hasFocus && this.shouldClearOnEdit() && this.hasValue()) {
-      this.didBlurAfterEdit = true;
-    }
-  }
-  hasValue() {
-    return this.getValue().length > 0;
-  }
-  render() {
-    const mode = getIonMode(this);
-    const value = this.getValue();
-    const labelId = this.inputId + '-lbl';
-    const label = findItemLabel(this.el);
-    if (label) {
-      label.id = labelId;
-    }
-    return (h(Host, { "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
-        [mode]: true,
-        'has-value': this.hasValue(),
-        'has-focus': this.hasFocus,
-      }) }, h("input", Object.assign({ class: "native-input", ref: (input) => (this.nativeInput = input), "aria-labelledby": label ? labelId : null, disabled: this.disabled, accept: this.accept, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, size: this.size, type: this.type, value: value, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown }, this.inheritedAttributes)), this.clearInput && !this.readonly && !this.disabled && (h("button", { "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
-        /**
-         * This prevents mobile browsers from
-         * blurring the input when the clear
-         * button is activated.
-         */
-        ev.preventDefault();
-      }, onClick: this.clearTextInput }, h("ion-icon", { "aria-hidden": "true", icon: mode === 'ios' ? closeCircle : closeSharp })))));
-  }
-  get el() { return this; }
-  static get watchers() { return {
-    "debounce": ["debounceChanged"],
-    "disabled": ["disabledChanged"],
-    "placeholder": ["placeholderChanged"],
-    "value": ["valueChanged"]
-  }; }
-  static get style() { return {
-    ios: inputIosCss,
-    md: inputMdCss
-  }; }
-}, [34, "ion-input", {
-    "fireFocusEvents": [4, "fire-focus-events"],
-    "color": [513],
-    "accept": [1],
-    "autocapitalize": [1],
-    "autocomplete": [1],
-    "autocorrect": [1],
-    "autofocus": [4],
-    "clearInput": [4, "clear-input"],
-    "clearOnEdit": [4, "clear-on-edit"],
-    "debounce": [2],
-    "disabled": [4],
-    "enterkeyhint": [1],
-    "inputmode": [1],
-    "max": [8],
-    "maxlength": [2],
-    "min": [8],
-    "minlength": [2],
-    "multiple": [4],
-    "name": [1],
-    "pattern": [1],
-    "placeholder": [1],
-    "readonly": [4],
-    "required": [4],
-    "spellcheck": [4],
-    "step": [1],
-    "size": [2],
-    "type": [1],
-    "value": [1032],
-    "hasFocus": [32],
-    "setFocus": [64],
-    "setBlur": [64],
-    "getInputElement": [64]
-  }]);
-let inputIds = 0;
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["ion-input", "ion-icon"];
-  components.forEach(tagName => { switch (tagName) {
-    case "ion-input":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, Input);
-      }
-      break;
-    case "ion-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
-}
+import { I as Input, d as defineCustomElement$1 } from './input.js';
 
 const IonInput = Input;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ion-item-options.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { g as getIonMode } from './ionic-global.js';
-import { j as isEndSide } from './helpers.js';
+import { f as isEndSide } from './helpers.js';
 
 const itemOptionsIosCss = "ion-item-options{top:0;right:0;justify-content:flex-end;display:none;position:absolute;height:100%;font-size:14px;user-select:none;z-index:1}[dir=rtl] ion-item-options,:host-context([dir=rtl]) ion-item-options{justify-content:flex-start}[dir=rtl] ion-item-options:not(.item-options-end),:host-context([dir=rtl]) ion-item-options:not(.item-options-end){right:auto;left:0;justify-content:flex-end}.item-options-start{right:auto;left:0;justify-content:flex-start}[dir=rtl] .item-options-start,:host-context([dir=rtl]) .item-options-start{justify-content:flex-end}.item-options-start ion-item-option:first-child{padding-right:var(--ion-safe-area-left)}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.item-options-start ion-item-option:first-child{padding-right:unset;-webkit-padding-end:var(--ion-safe-area-left);padding-inline-end:var(--ion-safe-area-left)}}.item-options-end ion-item-option:last-child{padding-right:var(--ion-safe-area-right)}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.item-options-end ion-item-option:last-child{padding-right:unset;-webkit-padding-end:var(--ion-safe-area-right);padding-inline-end:var(--ion-safe-area-right)}}[dir=rtl] .item-sliding-active-slide.item-sliding-active-options-start ion-item-options:not(.item-options-end),:host-context([dir=rtl]) .item-sliding-active-slide.item-sliding-active-options-start ion-item-options:not(.item-options-end){width:100%;visibility:visible}.item-sliding-active-slide ion-item-options{display:flex;visibility:hidden}.item-sliding-active-slide.item-sliding-active-options-start .item-options-start,.item-sliding-active-slide.item-sliding-active-options-end ion-item-options:not(.item-options-start){width:100%;visibility:visible}.item-options-ios{border-bottom-width:0;border-bottom-style:solid;border-bottom-color:var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, #c8c7cc)))}.item-options-ios.item-options-end{border-bottom-width:0.55px}.list-ios-lines-none .item-options-ios{border-bottom-width:0}.list-ios-lines-full .item-options-ios,.list-ios-lines-inset .item-options-ios.item-options-end{border-bottom-width:0.55px}";
 

package/dist/components/ion-item-sliding.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { g as getIonMode } from './ionic-global.js';
 import { f as findClosestIonContent, d as disableContentScrollY, r as resetContentScrollY } from './index5.js';
-import { j as isEndSide } from './helpers.js';
+import { f as isEndSide } from './helpers.js';
 
 const itemSlidingCss = "ion-item-sliding{display:block;position:relative;width:100%;overflow:hidden;user-select:none}ion-item-sliding .item{user-select:none}.item-sliding-active-slide .item{position:relative;transition:transform 500ms cubic-bezier(0.36, 0.66, 0.04, 1);opacity:1;z-index:2;pointer-events:none;will-change:transform}.item-sliding-active-swipe-end .item-options-end .item-option-expandable{padding-left:100%;order:1;transition-duration:0.6s;transition-property:padding-left}[dir=rtl] .item-sliding-active-swipe-end .item-options-end .item-option-expandable,:host-context([dir=rtl]) .item-sliding-active-swipe-end .item-options-end .item-option-expandable{order:-1}.item-sliding-active-swipe-start .item-options-start .item-option-expandable{padding-right:100%;order:-1;transition-duration:0.6s;transition-property:padding-right}[dir=rtl] .item-sliding-active-swipe-start .item-options-start .item-option-expandable,:host-context([dir=rtl]) .item-sliding-active-swipe-start .item-options-start .item-option-expandable{order:1}";
 

package/dist/components/ion-menu-button.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { m as menuOutline, l as menuSharp } from './index2.js';
+import { m as menuOutline, j as menuSharp } from './index2.js';
 import { g as getIonMode, c as config } from './ionic-global.js';
 import { i as inheritAriaAttributes } from './helpers.js';
 import { m as menuController } from './index6.js';

package/dist/components/ion-menu.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, Build, h, Host } from '@s
 import { c as config, g as getIonMode } from './ionic-global.js';
 import { g as getTimeGivenProgression } from './cubic-bezier.js';
 import { G as GESTURE_CONTROLLER } from './gesture-controller.js';
-import { j as isEndSide, i as inheritAriaAttributes, k as assert, l as clamp } from './helpers.js';
+import { f as isEndSide, i as inheritAriaAttributes, h as assert, j as clamp } from './helpers.js';
 import { m as menuController } from './index6.js';
 import { g as getOverlay } from './overlays.js';
 import { d as defineCustomElement$2 } from './backdrop.js';
@@ -160,6 +160,7 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.updateState();
   }
   onBackdropClick(ev) {
+    // TODO(FW-2832): type (CustomEvent triggers errors which should be sorted)
     if (this._isOpen && this.lastOnEnd < ev.timeStamp - 100) {
       const shouldClose = ev.composedPath ? !ev.composedPath().includes(this.menuInnerEl) : false;
       if (shouldClose) {

package/dist/components/ion-modal.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, writeTask, h, Host } from
 import { g as getIonMode, c as config } from './ionic-global.js';
 import { f as findClosestIonContent, i as isIonContent, d as disableContentScrollY, r as resetContentScrollY, a as findIonContent, p as printIonContentErrorMsg } from './index5.js';
 import { C as CoreDelegate, a as attachComponent, d as detachComponent } from './framework-delegate.js';
-import { g as getElementRoot, l as clamp, r as raf, e as inheritAttributes } from './helpers.js';
+import { g as getElementRoot, j as clamp, r as raf, e as inheritAttributes } from './helpers.js';
 import { KEYBOARD_DID_OPEN } from './keyboard.js';
 import { p as printIonWarning } from './index4.js';
 import { w as win } from './index10.js';
@@ -1207,8 +1207,12 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       if (destroyTriggerInteraction) {
         destroyTriggerInteraction();
       }
+      if (trigger === undefined) {
+        return;
+      }
       const 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-modal.`, this.el);
         return;
       }
       const configureTriggerInteraction = (trigEl, modalEl) => {
@@ -1396,9 +1400,8 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
      * need to reset the current breakpoint to the initial breakpoint.
      */
     this.currentBreakpoint = this.initialBreakpoint;
-    const data = Object.assign(Object.assign({}, this.componentProps), { modal: this.el });
     const { inline, delegate } = this.getDelegate(true);
-    this.usersElement = await attachComponent(delegate, this.el, this.component, ['ion-page'], data, inline);
+    this.usersElement = await attachComponent(delegate, this.el, this.component, ['ion-page'], this.componentProps, inline);
     await deepReady(this.usersElement);
     writeTask(() => this.el.classList.add('show-modal'));
     this.currentTransition = present(this, 'modalEnter', iosEnterAnimation, mdEnterAnimation, {

package/dist/components/ion-nav.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Build } from '@stencil/core/internal/client';
 import { g as getIonMode, c as config } from './ionic-global.js';
 import { g as getTimeGivenProgression } from './cubic-bezier.js';
-import { k as assert, s as shallowEqualStringMap } from './helpers.js';
+import { h as assert, s as shallowEqualStringMap } from './helpers.js';
 import { l as lifecycle, t as transition, s as setPageHidden, L as LIFECYCLE_WILL_UNLOAD, a as LIFECYCLE_WILL_LEAVE, b as LIFECYCLE_DID_LEAVE } from './index7.js';
 import { a as attachComponent } from './framework-delegate.js';
 
@@ -11,6 +11,7 @@ import { a as attachComponent } from './framework-delegate.js';
 const VIEW_STATE_NEW = 1;
 const VIEW_STATE_ATTACHED = 2;
 const VIEW_STATE_DESTROYED = 3;
+// TODO(FW-2832): types
 class ViewController {
   constructor(component, params) {
     this.component = component;

package/dist/components/ion-range.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { g as getIonMode } from './ionic-global.js';
 import { f as findClosestIonContent, d as disableContentScrollY, r as resetContentScrollY } from './index5.js';
-import { l as clamp, f as debounceEvent, i as inheritAriaAttributes, m as getAriaLabel, c as renderHiddenInput } from './helpers.js';
+import { j as clamp, k as debounceEvent, i as inheritAriaAttributes, l as getAriaLabel, c as renderHiddenInput } from './helpers.js';
 import { p as printIonWarning } from './index4.js';
 import { i as isRTL } from './dir.js';
 import { c as createColorClasses, h as hostContext } from './theme.js';

package/dist/components/ion-refresher-content.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { n as caretBackSharp, o as arrowDown } from './index2.js';
+import { k as caretBackSharp, l as arrowDown } from './index2.js';
 import { g as getIonMode, c as config, a as isPlatform } from './ionic-global.js';
 import { s as sanitizeDOMString } from './index3.js';
 import { d as defineCustomElement$2, S as SPINNERS } from './spinner.js';

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 = {