@pod-os/elements 0.7.1-92705ee.0 → 0.7.1-a71f01c.0

package/dist/components/ion-accordion.js

@@ -0,0 +1,365 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as chevronDown } from './index2.js';
+import { c as config, g as getIonMode } from './ionic-global.js';
+import { r as raf, a as addEventListener, b as removeEventListener, g as getElementRoot, t as transitionEndAsync } from './helpers.js';
+import { d as defineCustomElement$2 } from './icon.js';
+
+const accordionIosCss = ":host{display:block;position:relative;width:100%;background-color:var(--ion-background-color, #ffffff);overflow:hidden;z-index:0}:host(.accordion-expanding) ::slotted(ion-item[slot=header]),:host(.accordion-expanded) ::slotted(ion-item[slot=header]){--border-width:0px}:host(.accordion-animated){transition:all 300ms cubic-bezier(0.25, 0.8, 0.5, 1)}:host(.accordion-animated) #content{transition:max-height 300ms cubic-bezier(0.25, 0.8, 0.5, 1)}#content{overflow:hidden;will-change:max-height}:host(.accordion-collapsing) #content{max-height:0 !important}:host(.accordion-collapsed) #content{display:none}:host(.accordion-expanding) #content{max-height:0}:host(.accordion-disabled) #header,:host(.accordion-readonly) #header,:host(.accordion-disabled) #content,:host(.accordion-readonly) #content{pointer-events:none}:host(.accordion-disabled) #header,:host(.accordion-disabled) #content{opacity:0.4}@media (prefers-reduced-motion: reduce){:host,#content{transition:none !important}}:host(.accordion-next) ::slotted(ion-item[slot=header]){--border-width:0.55px 0px 0.55px 0px}";
+
+const accordionMdCss = ":host{display:block;position:relative;width:100%;background-color:var(--ion-background-color, #ffffff);overflow:hidden;z-index:0}:host(.accordion-expanding) ::slotted(ion-item[slot=header]),:host(.accordion-expanded) ::slotted(ion-item[slot=header]){--border-width:0px}:host(.accordion-animated){transition:all 300ms cubic-bezier(0.25, 0.8, 0.5, 1)}:host(.accordion-animated) #content{transition:max-height 300ms cubic-bezier(0.25, 0.8, 0.5, 1)}#content{overflow:hidden;will-change:max-height}:host(.accordion-collapsing) #content{max-height:0 !important}:host(.accordion-collapsed) #content{display:none}:host(.accordion-expanding) #content{max-height:0}:host(.accordion-disabled) #header,:host(.accordion-readonly) #header,:host(.accordion-disabled) #content,:host(.accordion-readonly) #content{pointer-events:none}:host(.accordion-disabled) #header,:host(.accordion-disabled) #content{opacity:0.4}@media (prefers-reduced-motion: reduce){:host,#content{transition:none !important}}";
+
+const Accordion = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.updateListener = () => this.updateState(false);
+    this.state = 1 /* AccordionState.Collapsed */;
+    this.isNext = false;
+    this.isPrevious = false;
+    /**
+     * The value of the accordion. Defaults to an autogenerated
+     * value.
+     */
+    this.value = `ion-accordion-${accordionIds++}`;
+    /**
+     * If `true`, the accordion cannot be interacted with.
+     */
+    this.disabled = false;
+    /**
+     * If `true`, the accordion cannot be interacted with,
+     * but does not alter the opacity.
+     */
+    this.readonly = false;
+    /**
+     * The toggle icon to use. This icon will be
+     * rotated when the accordion is expanded
+     * or collapsed.
+     */
+    this.toggleIcon = chevronDown;
+    /**
+     * The slot inside of `ion-item` to
+     * place the toggle icon. Defaults to `'end'`.
+     */
+    this.toggleIconSlot = 'end';
+    this.setItemDefaults = () => {
+      const ionItem = this.getSlottedHeaderIonItem();
+      if (!ionItem) {
+        return;
+      }
+      /**
+       * For a11y purposes, we make
+       * the ion-item a button so users
+       * can tab to it and use keyboard
+       * navigation to get around.
+       */
+      ionItem.button = true;
+      ionItem.detail = false;
+      /**
+       * By default, the lines in an
+       * item should be full here, but
+       * only do that if a user has
+       * not explicitly overridden them
+       */
+      if (ionItem.lines === undefined) {
+        ionItem.lines = 'full';
+      }
+    };
+    this.getSlottedHeaderIonItem = () => {
+      const { headerEl } = this;
+      if (!headerEl) {
+        return;
+      }
+      /**
+       * Get the first ion-item
+       * slotted in the header slot
+       */
+      const slot = headerEl.querySelector('slot');
+      if (!slot) {
+        return;
+      }
+      // This is not defined in unit tests
+      if (slot.assignedElements === undefined)
+        return;
+      return slot.assignedElements().find((el) => el.tagName === 'ION-ITEM');
+    };
+    this.setAria = (expanded = false) => {
+      const ionItem = this.getSlottedHeaderIonItem();
+      if (!ionItem) {
+        return;
+      }
+      /**
+       * Get the native <button> element inside of
+       * ion-item because that is what will be focused
+       */
+      const root = getElementRoot(ionItem);
+      const button = root.querySelector('button');
+      if (!button) {
+        return;
+      }
+      button.setAttribute('aria-expanded', `${expanded}`);
+    };
+    this.slotToggleIcon = () => {
+      const ionItem = this.getSlottedHeaderIonItem();
+      if (!ionItem) {
+        return;
+      }
+      const { toggleIconSlot, toggleIcon } = this;
+      /**
+       * Check if there already is a toggle icon.
+       * If so, do not add another one.
+       */
+      const existingToggleIcon = ionItem.querySelector('.ion-accordion-toggle-icon');
+      if (existingToggleIcon) {
+        return;
+      }
+      const iconEl = document.createElement('ion-icon');
+      iconEl.slot = toggleIconSlot;
+      iconEl.lazy = false;
+      iconEl.classList.add('ion-accordion-toggle-icon');
+      iconEl.icon = toggleIcon;
+      iconEl.setAttribute('aria-hidden', 'true');
+      ionItem.appendChild(iconEl);
+    };
+    this.expandAccordion = (initialUpdate = false) => {
+      const { contentEl, contentElWrapper } = this;
+      if (initialUpdate || contentEl === undefined || contentElWrapper === undefined) {
+        this.state = 4 /* AccordionState.Expanded */;
+        return;
+      }
+      if (this.state === 4 /* AccordionState.Expanded */) {
+        return;
+      }
+      if (this.currentRaf !== undefined) {
+        cancelAnimationFrame(this.currentRaf);
+      }
+      if (this.shouldAnimate()) {
+        raf(() => {
+          this.state = 8 /* AccordionState.Expanding */;
+          this.currentRaf = raf(async () => {
+            const contentHeight = contentElWrapper.offsetHeight;
+            const waitForTransition = transitionEndAsync(contentEl, 2000);
+            contentEl.style.setProperty('max-height', `${contentHeight}px`);
+            await waitForTransition;
+            this.state = 4 /* AccordionState.Expanded */;
+            contentEl.style.removeProperty('max-height');
+          });
+        });
+      }
+      else {
+        this.state = 4 /* AccordionState.Expanded */;
+      }
+    };
+    this.collapseAccordion = (initialUpdate = false) => {
+      const { contentEl } = this;
+      if (initialUpdate || contentEl === undefined) {
+        this.state = 1 /* AccordionState.Collapsed */;
+        return;
+      }
+      if (this.state === 1 /* AccordionState.Collapsed */) {
+        return;
+      }
+      if (this.currentRaf !== undefined) {
+        cancelAnimationFrame(this.currentRaf);
+      }
+      if (this.shouldAnimate()) {
+        this.currentRaf = raf(async () => {
+          const contentHeight = contentEl.offsetHeight;
+          contentEl.style.setProperty('max-height', `${contentHeight}px`);
+          raf(async () => {
+            const waitForTransition = transitionEndAsync(contentEl, 2000);
+            this.state = 2 /* AccordionState.Collapsing */;
+            await waitForTransition;
+            this.state = 1 /* AccordionState.Collapsed */;
+            contentEl.style.removeProperty('max-height');
+          });
+        });
+      }
+      else {
+        this.state = 1 /* AccordionState.Collapsed */;
+      }
+    };
+    /**
+     * Helper function to determine if
+     * something should animate.
+     * If prefers-reduced-motion is set
+     * then we should not animate, regardless
+     * of what is set in the config.
+     */
+    this.shouldAnimate = () => {
+      if (typeof window === 'undefined') {
+        return false;
+      }
+      const prefersReducedMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
+      if (prefersReducedMotion) {
+        return false;
+      }
+      const animated = config.get('animated', true);
+      if (!animated) {
+        return false;
+      }
+      if (this.accordionGroupEl && !this.accordionGroupEl.animated) {
+        return false;
+      }
+      return true;
+    };
+    this.updateState = async (initialUpdate = false) => {
+      const accordionGroup = this.accordionGroupEl;
+      const accordionValue = this.value;
+      if (!accordionGroup) {
+        return;
+      }
+      const value = accordionGroup.value;
+      const shouldExpand = Array.isArray(value) ? value.includes(accordionValue) : value === accordionValue;
+      if (shouldExpand) {
+        this.expandAccordion(initialUpdate);
+        this.isNext = this.isPrevious = false;
+      }
+      else {
+        this.collapseAccordion(initialUpdate);
+        /**
+         * When using popout or inset,
+         * the collapsed accordion items
+         * may need additional border radius
+         * applied. Check to see if the
+         * next or previous accordion is selected.
+         */
+        const nextAccordion = this.getNextSibling();
+        const nextAccordionValue = nextAccordion === null || nextAccordion === void 0 ? void 0 : nextAccordion.value;
+        if (nextAccordionValue !== undefined) {
+          this.isPrevious = Array.isArray(value) ? value.includes(nextAccordionValue) : value === nextAccordionValue;
+        }
+        const previousAccordion = this.getPreviousSibling();
+        const previousAccordionValue = previousAccordion === null || previousAccordion === void 0 ? void 0 : previousAccordion.value;
+        if (previousAccordionValue !== undefined) {
+          this.isNext = Array.isArray(value) ? value.includes(previousAccordionValue) : value === previousAccordionValue;
+        }
+      }
+    };
+    this.getNextSibling = () => {
+      if (!this.el) {
+        return;
+      }
+      const nextSibling = this.el.nextElementSibling;
+      if ((nextSibling === null || nextSibling === void 0 ? void 0 : nextSibling.tagName) !== 'ION-ACCORDION') {
+        return;
+      }
+      return nextSibling;
+    };
+    this.getPreviousSibling = () => {
+      if (!this.el) {
+        return;
+      }
+      const previousSibling = this.el.previousElementSibling;
+      if ((previousSibling === null || previousSibling === void 0 ? void 0 : previousSibling.tagName) !== 'ION-ACCORDION') {
+        return;
+      }
+      return previousSibling;
+    };
+  }
+  connectedCallback() {
+    var _a;
+    const accordionGroupEl = (this.accordionGroupEl = (_a = this.el) === null || _a === void 0 ? void 0 : _a.closest('ion-accordion-group'));
+    if (accordionGroupEl) {
+      this.updateState(true);
+      addEventListener(accordionGroupEl, 'ionChange', this.updateListener);
+    }
+  }
+  disconnectedCallback() {
+    const accordionGroupEl = this.accordionGroupEl;
+    if (accordionGroupEl) {
+      removeEventListener(accordionGroupEl, 'ionChange', this.updateListener);
+    }
+  }
+  componentDidLoad() {
+    this.setItemDefaults();
+    this.slotToggleIcon();
+    /**
+     * We need to wait a tick because we
+     * just set ionItem.button = true and
+     * the button has not have been rendered yet.
+     */
+    raf(() => {
+      /**
+       * Set aria label on button inside of ion-item
+       * once the inner content has been rendered.
+       */
+      const expanded = this.state === 4 /* AccordionState.Expanded */ || this.state === 8 /* AccordionState.Expanding */;
+      this.setAria(expanded);
+    });
+  }
+  toggleExpanded() {
+    const { accordionGroupEl, value, state } = this;
+    if (accordionGroupEl) {
+      /**
+       * Because the accordion group may or may
+       * not allow multiple accordions open, we
+       * need to request the toggling of this
+       * accordion and the accordion group will
+       * make the decision on whether or not
+       * to allow it.
+       */
+      const expand = state === 1 /* AccordionState.Collapsed */ || state === 2 /* AccordionState.Collapsing */;
+      accordionGroupEl.requestAccordionToggle(value, expand);
+    }
+  }
+  render() {
+    const { disabled, readonly } = this;
+    const mode = getIonMode(this);
+    const expanded = this.state === 4 /* AccordionState.Expanded */ || this.state === 8 /* AccordionState.Expanding */;
+    const headerPart = expanded ? 'header expanded' : 'header';
+    const contentPart = expanded ? 'content expanded' : 'content';
+    this.setAria(expanded);
+    return (h(Host, { class: {
+        [mode]: true,
+        'accordion-expanding': this.state === 8 /* AccordionState.Expanding */,
+        'accordion-expanded': this.state === 4 /* AccordionState.Expanded */,
+        'accordion-collapsing': this.state === 2 /* AccordionState.Collapsing */,
+        'accordion-collapsed': this.state === 1 /* AccordionState.Collapsed */,
+        'accordion-next': this.isNext,
+        'accordion-previous': this.isPrevious,
+        'accordion-disabled': disabled,
+        'accordion-readonly': readonly,
+        'accordion-animated': config.getBoolean('animated', true),
+      } }, h("div", { onClick: () => this.toggleExpanded(), id: "header", part: headerPart, "aria-controls": "content", ref: (headerEl) => (this.headerEl = headerEl) }, h("slot", { name: "header" })), h("div", { id: "content", part: contentPart, role: "region", "aria-labelledby": "header", ref: (contentEl) => (this.contentEl = contentEl) }, h("div", { id: "content-wrapper", ref: (contentElWrapper) => (this.contentElWrapper = contentElWrapper) }, h("slot", { name: "content" })))));
+  }
+  static get delegatesFocus() { return true; }
+  get el() { return this; }
+  static get style() { return {
+    ios: accordionIosCss,
+    md: accordionMdCss
+  }; }
+}, [49, "ion-accordion", {
+    "value": [1],
+    "disabled": [4],
+    "readonly": [4],
+    "toggleIcon": [1, "toggle-icon"],
+    "toggleIconSlot": [1, "toggle-icon-slot"],
+    "state": [32],
+    "isNext": [32],
+    "isPrevious": [32]
+  }]);
+let accordionIds = 0;
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ion-accordion", "ion-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ion-accordion":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Accordion);
+      }
+      break;
+    case "ion-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const IonAccordion = Accordion;
+const defineCustomElement = defineCustomElement$1;
+
+export { IonAccordion, defineCustomElement };

package/dist/components/ion-action-sheet.js

@@ -0,0 +1,6 @@
+import { A as ActionSheet, d as defineCustomElement$1 } from './action-sheet.js';
+
+const IonActionSheet = ActionSheet;
+const defineCustomElement = defineCustomElement$1;
+
+export { IonActionSheet, defineCustomElement };

package/dist/components/ion-alert.js

@@ -0,0 +1,6 @@
+import { A as Alert, d as defineCustomElement$1 } from './alert.js';
+
+const IonAlert = Alert;
+const defineCustomElement = defineCustomElement$1;
+
+export { IonAlert, defineCustomElement };

package/dist/components/ion-app.js

@@ -0,0 +1,6 @@
+import { A as App, d as defineCustomElement$1 } from './app.js';
+
+const IonApp = App;
+const defineCustomElement = defineCustomElement$1;
+
+export { IonApp, defineCustomElement };

package/dist/components/ion-avatar.js

@@ -0,0 +1,39 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { g as getIonMode } from './ionic-global.js';
+
+const avatarIosCss = ":host{border-radius:var(--border-radius);display:block}::slotted(ion-img),::slotted(img){border-radius:var(--border-radius);width:100%;height:100%;object-fit:cover;overflow:hidden}:host{--border-radius:50%;width:48px;height:48px}";
+
+const avatarMdCss = ":host{border-radius:var(--border-radius);display:block}::slotted(ion-img),::slotted(img){border-radius:var(--border-radius);width:100%;height:100%;object-fit:cover;overflow:hidden}:host{--border-radius:50%;width:64px;height:64px}";
+
+const Avatar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    return (h(Host, { class: getIonMode(this) }, h("slot", null)));
+  }
+  static get style() { return {
+    ios: avatarIosCss,
+    md: avatarMdCss
+  }; }
+}, [33, "ion-avatar"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ion-avatar"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ion-avatar":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Avatar);
+      }
+      break;
+  } });
+}
+
+const IonAvatar = Avatar;
+const defineCustomElement = defineCustomElement$1;
+
+export { IonAvatar, defineCustomElement };

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

@@ -0,0 +1,128 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { a as chevronBack, b as arrowBackSharp } from './index2.js';
+import { c as config, g as getIonMode } from './ionic-global.js';
+import { i as inheritAriaAttributes } from './helpers.js';
+import { o as openURL, c as createColorClasses, h as hostContext } from './theme.js';
+import { d as defineCustomElement$3 } from './icon.js';
+import { d as defineCustomElement$2 } from './ripple-effect.js';
+
+const backButtonIosCss = ":host{--background:transparent;--color-focused:currentColor;--color-hover:currentColor;--icon-margin-top:0;--icon-margin-bottom:0;--icon-padding-top:0;--icon-padding-end:0;--icon-padding-bottom:0;--icon-padding-start:0;--margin-top:0;--margin-end:0;--margin-bottom:0;--margin-start:0;--min-width:auto;--min-height:auto;--padding-top:0;--padding-end:0;--padding-bottom:0;--padding-start:0;--opacity:1;--ripple-color:currentColor;--transition:background-color, opacity 100ms linear;display:none;min-width:var(--min-width);min-height:var(--min-height);color:var(--color);font-family:var(--ion-font-family, inherit);text-align:center;text-decoration:none;text-overflow:ellipsis;text-transform:none;white-space:nowrap;user-select:none;font-kerning:none}ion-ripple-effect{color:var(--ripple-color)}:host(.ion-color) .button-native{color:var(--ion-color-base)}:host(.show-back-button){display:block}:host(.back-button-disabled){cursor:default;opacity:0.5;pointer-events:none}.button-native{border-radius:var(--border-radius);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;margin-left:var(--margin-start);margin-right:var(--margin-end);margin-top:var(--margin-top);margin-bottom:var(--margin-bottom);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:block;position:relative;width:100%;height:100%;min-height:inherit;transition:var(--transition);border:0;outline:none;background:var(--background);line-height:1;cursor:pointer;opacity:var(--opacity);overflow:hidden;user-select:none;z-index:0;appearance:none}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.button-native{margin-left:unset;margin-right:unset;-webkit-margin-start:var(--margin-start);margin-inline-start:var(--margin-start);-webkit-margin-end:var(--margin-end);margin-inline-end:var(--margin-end)}}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.button-native{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)}}.button-inner{display:flex;position:relative;flex-flow:row nowrap;flex-shrink:0;align-items:center;justify-content:center;width:100%;height:100%;z-index:1}ion-icon{padding-left:var(--icon-padding-start);padding-right:var(--icon-padding-end);padding-top:var(--icon-padding-top);padding-bottom:var(--icon-padding-bottom);margin-left:var(--icon-margin-start);margin-right:var(--icon-margin-end);margin-top:var(--icon-margin-top);margin-bottom:var(--icon-margin-bottom);display:inherit;font-size:var(--icon-font-size);font-weight:var(--icon-font-weight);pointer-events:none}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){ion-icon{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--icon-padding-start);padding-inline-start:var(--icon-padding-start);-webkit-padding-end:var(--icon-padding-end);padding-inline-end:var(--icon-padding-end)}}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){ion-icon{margin-left:unset;margin-right:unset;-webkit-margin-start:var(--icon-margin-start);margin-inline-start:var(--icon-margin-start);-webkit-margin-end:var(--icon-margin-end);margin-inline-end:var(--icon-margin-end)}}:host(.ion-focused) .button-native{color:var(--color-focused)}:host(.ion-focused) .button-native::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}.button-native::after{left:0;right:0;top:0;bottom:0;position:absolute;content:\"\";opacity:0}@media (any-hover: hover){:host(:hover) .button-native{color:var(--color-hover)}:host(:hover) .button-native::after{background:var(--background-hover);opacity:var(--background-hover-opacity)}}:host(.ion-color.ion-focused) .button-native{color:var(--ion-color-base)}@media (any-hover: hover){:host(.ion-color:hover) .button-native{color:var(--ion-color-base)}}:host(.in-toolbar:not(.in-toolbar-color)){color:var(--ion-toolbar-color, var(--color))}:host{--background-hover:transparent;--background-hover-opacity:1;--background-focused:currentColor;--background-focused-opacity:.1;--border-radius:4px;--color:var(--ion-color-primary, #3880ff);--icon-margin-end:-5px;--icon-margin-start:-4px;--icon-font-size:1.85em;--min-height:32px;font-size:17px}.button-native{transform:translateZ(0);overflow:visible;z-index:99}:host(.ion-activated) .button-native{opacity:0.4}@media (any-hover: hover){:host(:hover){opacity:0.6}}:host(.ion-color.ion-focused) .button-native::after{background:var(--ion-color-base)}";
+
+const backButtonMdCss = ":host{--background:transparent;--color-focused:currentColor;--color-hover:currentColor;--icon-margin-top:0;--icon-margin-bottom:0;--icon-padding-top:0;--icon-padding-end:0;--icon-padding-bottom:0;--icon-padding-start:0;--margin-top:0;--margin-end:0;--margin-bottom:0;--margin-start:0;--min-width:auto;--min-height:auto;--padding-top:0;--padding-end:0;--padding-bottom:0;--padding-start:0;--opacity:1;--ripple-color:currentColor;--transition:background-color, opacity 100ms linear;display:none;min-width:var(--min-width);min-height:var(--min-height);color:var(--color);font-family:var(--ion-font-family, inherit);text-align:center;text-decoration:none;text-overflow:ellipsis;text-transform:none;white-space:nowrap;user-select:none;font-kerning:none}ion-ripple-effect{color:var(--ripple-color)}:host(.ion-color) .button-native{color:var(--ion-color-base)}:host(.show-back-button){display:block}:host(.back-button-disabled){cursor:default;opacity:0.5;pointer-events:none}.button-native{border-radius:var(--border-radius);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;margin-left:var(--margin-start);margin-right:var(--margin-end);margin-top:var(--margin-top);margin-bottom:var(--margin-bottom);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:block;position:relative;width:100%;height:100%;min-height:inherit;transition:var(--transition);border:0;outline:none;background:var(--background);line-height:1;cursor:pointer;opacity:var(--opacity);overflow:hidden;user-select:none;z-index:0;appearance:none}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.button-native{margin-left:unset;margin-right:unset;-webkit-margin-start:var(--margin-start);margin-inline-start:var(--margin-start);-webkit-margin-end:var(--margin-end);margin-inline-end:var(--margin-end)}}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.button-native{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)}}.button-inner{display:flex;position:relative;flex-flow:row nowrap;flex-shrink:0;align-items:center;justify-content:center;width:100%;height:100%;z-index:1}ion-icon{padding-left:var(--icon-padding-start);padding-right:var(--icon-padding-end);padding-top:var(--icon-padding-top);padding-bottom:var(--icon-padding-bottom);margin-left:var(--icon-margin-start);margin-right:var(--icon-margin-end);margin-top:var(--icon-margin-top);margin-bottom:var(--icon-margin-bottom);display:inherit;font-size:var(--icon-font-size);font-weight:var(--icon-font-weight);pointer-events:none}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){ion-icon{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--icon-padding-start);padding-inline-start:var(--icon-padding-start);-webkit-padding-end:var(--icon-padding-end);padding-inline-end:var(--icon-padding-end)}}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){ion-icon{margin-left:unset;margin-right:unset;-webkit-margin-start:var(--icon-margin-start);margin-inline-start:var(--icon-margin-start);-webkit-margin-end:var(--icon-margin-end);margin-inline-end:var(--icon-margin-end)}}:host(.ion-focused) .button-native{color:var(--color-focused)}:host(.ion-focused) .button-native::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}.button-native::after{left:0;right:0;top:0;bottom:0;position:absolute;content:\"\";opacity:0}@media (any-hover: hover){:host(:hover) .button-native{color:var(--color-hover)}:host(:hover) .button-native::after{background:var(--background-hover);opacity:var(--background-hover-opacity)}}:host(.ion-color.ion-focused) .button-native{color:var(--ion-color-base)}@media (any-hover: hover){:host(.ion-color:hover) .button-native{color:var(--ion-color-base)}}:host(.in-toolbar:not(.in-toolbar-color)){color:var(--ion-toolbar-color, var(--color))}:host{--border-radius:4px;--background-focused:currentColor;--background-focused-opacity:.12;--background-hover:currentColor;--background-hover-opacity:0.04;--color:currentColor;--icon-margin-end:0;--icon-margin-start:0;--icon-font-size:24px;--icon-font-weight:normal;--min-height:32px;--min-width:44px;--padding-start:12px;--padding-end:12px;font-size:14px;font-weight:500;text-transform:uppercase}:host(.back-button-has-icon-only){--border-radius:50%;min-width:48px;height:48px}.button-native{box-shadow:none}.button-text{padding-left:4px;padding-right:4px;padding-top:0;padding-bottom:0}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.button-text{padding-left:unset;padding-right:unset;-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px}}ion-icon{line-height:0.67;text-align:start}@media (any-hover: hover){:host(.ion-color:hover) .button-native::after{background:var(--ion-color-base)}}:host(.ion-color.ion-focused) .button-native::after{background:var(--ion-color-base)}";
+
+const BackButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.inheritedAttributes = {};
+    /**
+     * If `true`, the user cannot interact with the button.
+     */
+    this.disabled = false;
+    /**
+     * The type of the button.
+     */
+    this.type = 'button';
+    this.onClick = async (ev) => {
+      const nav = this.el.closest('ion-nav');
+      ev.preventDefault();
+      if (nav && (await nav.canGoBack())) {
+        return nav.pop({ animationBuilder: this.routerAnimation, skipIfBusy: true });
+      }
+      return openURL(this.defaultHref, ev, 'back', this.routerAnimation);
+    };
+  }
+  componentWillLoad() {
+    this.inheritedAttributes = inheritAriaAttributes(this.el);
+    if (this.defaultHref === undefined) {
+      this.defaultHref = config.get('backButtonDefaultHref');
+    }
+  }
+  get backButtonIcon() {
+    const icon = this.icon;
+    if (icon != null) {
+      // icon is set on the component or by the config
+      return icon;
+    }
+    if (getIonMode(this) === 'ios') {
+      // default ios back button icon
+      return config.get('backButtonIcon', chevronBack);
+    }
+    // default md back button icon
+    return config.get('backButtonIcon', arrowBackSharp);
+  }
+  get backButtonText() {
+    const defaultBackButtonText = getIonMode(this) === 'ios' ? 'Back' : null;
+    return this.text != null ? this.text : config.get('backButtonText', defaultBackButtonText);
+  }
+  get hasIconOnly() {
+    return this.backButtonIcon && !this.backButtonText;
+  }
+  get rippleType() {
+    // If the button only has an icon we use the unbounded
+    // "circular" ripple effect
+    if (this.hasIconOnly) {
+      return 'unbounded';
+    }
+    return 'bounded';
+  }
+  render() {
+    const { color, defaultHref, disabled, type, hasIconOnly, backButtonIcon, backButtonText, icon, inheritedAttributes, } = this;
+    const showBackButton = defaultHref !== undefined;
+    const mode = getIonMode(this);
+    const ariaLabel = inheritedAttributes['aria-label'] || backButtonText || 'back';
+    return (h(Host, { onClick: this.onClick, class: createColorClasses(color, {
+        [mode]: true,
+        button: true,
+        'back-button-disabled': disabled,
+        'back-button-has-icon-only': hasIconOnly,
+        'in-toolbar': hostContext('ion-toolbar', this.el),
+        'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
+        'ion-activatable': true,
+        'ion-focusable': true,
+        'show-back-button': showBackButton,
+      }) }, h("button", { type: type, disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }, h("span", { class: "button-inner" }, backButtonIcon && (h("ion-icon", { part: "icon", icon: backButtonIcon, "aria-hidden": "true", lazy: false, "flip-rtl": icon === undefined })), backButtonText && (h("span", { part: "text", "aria-hidden": "true", class: "button-text" }, backButtonText))), mode === 'md' && h("ion-ripple-effect", { type: this.rippleType }))));
+  }
+  get el() { return this; }
+  static get style() { return {
+    ios: backButtonIosCss,
+    md: backButtonMdCss
+  }; }
+}, [33, "ion-back-button", {
+    "color": [513],
+    "defaultHref": [1025, "default-href"],
+    "disabled": [516],
+    "icon": [1],
+    "text": [1],
+    "type": [1],
+    "routerAnimation": [16]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ion-back-button", "ion-icon", "ion-ripple-effect"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ion-back-button":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, BackButton);
+      }
+      break;
+    case "ion-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "ion-ripple-effect":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const IonBackButton = BackButton;
+const defineCustomElement = defineCustomElement$1;
+
+export { IonBackButton, defineCustomElement };

package/dist/components/ion-backdrop.js

@@ -0,0 +1,6 @@
+import { B as Backdrop, d as defineCustomElement$1 } from './backdrop.js';
+
+const IonBackdrop = Backdrop;
+const defineCustomElement = defineCustomElement$1;
+
+export { IonBackdrop, defineCustomElement };

package/dist/components/ion-badge.js

@@ -0,0 +1,6 @@
+import { B as Badge, d as defineCustomElement$1 } from './badge.js';
+
+const IonBadge = Badge;
+const defineCustomElement = defineCustomElement$1;
+
+export { IonBadge, defineCustomElement };