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

package/dist/components/ion-tabs.js

@@ -0,0 +1,176 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+
+const tabsCss = ":host{left:0;right:0;top:0;bottom:0;display:flex;position:absolute;flex-direction:column;width:100%;height:100%;contain:layout size style;z-index:0}.tabs-inner{position:relative;flex:1;contain:layout size style}";
+
+const Tabs = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.ionNavWillLoad = createEvent(this, "ionNavWillLoad", 7);
+    this.ionTabsWillChange = createEvent(this, "ionTabsWillChange", 3);
+    this.ionTabsDidChange = createEvent(this, "ionTabsDidChange", 3);
+    this.transitioning = false;
+    /** @internal */
+    this.useRouter = false;
+    this.onTabClicked = (ev) => {
+      const { href, tab } = ev.detail;
+      if (this.useRouter && href !== undefined) {
+        const router = document.querySelector('ion-router');
+        if (router) {
+          router.push(href);
+        }
+      }
+      else {
+        this.select(tab);
+      }
+    };
+  }
+  async componentWillLoad() {
+    if (!this.useRouter) {
+      this.useRouter = !!document.querySelector('ion-router') && !this.el.closest('[no-router]');
+    }
+    if (!this.useRouter) {
+      const tabs = this.tabs;
+      if (tabs.length > 0) {
+        await this.select(tabs[0]);
+      }
+    }
+    this.ionNavWillLoad.emit();
+  }
+  componentWillRender() {
+    const tabBar = this.el.querySelector('ion-tab-bar');
+    if (tabBar) {
+      const tab = this.selectedTab ? this.selectedTab.tab : undefined;
+      tabBar.selectedTab = tab;
+    }
+  }
+  /**
+   * Select a tab by the value of its `tab` property or an element reference.
+   *
+   * @param tab The tab instance to select. If passed a string, it should be the value of the tab's `tab` property.
+   */
+  async select(tab) {
+    const selectedTab = getTab(this.tabs, tab);
+    if (!this.shouldSwitch(selectedTab)) {
+      return false;
+    }
+    await this.setActive(selectedTab);
+    await this.notifyRouter();
+    this.tabSwitch();
+    return true;
+  }
+  /**
+   * Get a specific tab by the value of its `tab` property or an element reference.
+   *
+   * @param tab The tab instance to select. If passed a string, it should be the value of the tab's `tab` property.
+   */
+  async getTab(tab) {
+    return getTab(this.tabs, tab);
+  }
+  /**
+   * Get the currently selected tab.
+   */
+  getSelected() {
+    return Promise.resolve(this.selectedTab ? this.selectedTab.tab : undefined);
+  }
+  /** @internal */
+  async setRouteId(id) {
+    const selectedTab = getTab(this.tabs, id);
+    if (!this.shouldSwitch(selectedTab)) {
+      return { changed: false, element: this.selectedTab };
+    }
+    await this.setActive(selectedTab);
+    return {
+      changed: true,
+      element: this.selectedTab,
+      markVisible: () => this.tabSwitch(),
+    };
+  }
+  /** @internal */
+  async getRouteId() {
+    var _a;
+    const tabId = (_a = this.selectedTab) === null || _a === void 0 ? void 0 : _a.tab;
+    return tabId !== undefined ? { id: tabId, element: this.selectedTab } : undefined;
+  }
+  setActive(selectedTab) {
+    if (this.transitioning) {
+      return Promise.reject('transitioning already happening');
+    }
+    this.transitioning = true;
+    this.leavingTab = this.selectedTab;
+    this.selectedTab = selectedTab;
+    this.ionTabsWillChange.emit({ tab: selectedTab.tab });
+    selectedTab.active = true;
+    return Promise.resolve();
+  }
+  tabSwitch() {
+    const selectedTab = this.selectedTab;
+    const leavingTab = this.leavingTab;
+    this.leavingTab = undefined;
+    this.transitioning = false;
+    if (!selectedTab) {
+      return;
+    }
+    if (leavingTab !== selectedTab) {
+      if (leavingTab) {
+        leavingTab.active = false;
+      }
+      this.ionTabsDidChange.emit({ tab: selectedTab.tab });
+    }
+  }
+  notifyRouter() {
+    if (this.useRouter) {
+      const router = document.querySelector('ion-router');
+      if (router) {
+        return router.navChanged('forward');
+      }
+    }
+    return Promise.resolve(false);
+  }
+  shouldSwitch(selectedTab) {
+    const leavingTab = this.selectedTab;
+    return selectedTab !== undefined && selectedTab !== leavingTab && !this.transitioning;
+  }
+  get tabs() {
+    return Array.from(this.el.querySelectorAll('ion-tab'));
+  }
+  render() {
+    return (h(Host, { onIonTabButtonClick: this.onTabClicked }, h("slot", { name: "top" }), h("div", { class: "tabs-inner" }, h("slot", null)), h("slot", { name: "bottom" })));
+  }
+  get el() { return this; }
+  static get style() { return tabsCss; }
+}, [1, "ion-tabs", {
+    "useRouter": [1028, "use-router"],
+    "selectedTab": [32],
+    "select": [64],
+    "getTab": [64],
+    "getSelected": [64],
+    "setRouteId": [64],
+    "getRouteId": [64]
+  }]);
+const getTab = (tabs, tab) => {
+  const tabEl = typeof tab === 'string' ? tabs.find((t) => t.tab === tab) : tab;
+  if (!tabEl) {
+    console.error(`tab with id: "${tabEl}" does not exist`);
+  }
+  return tabEl;
+};
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ion-tabs"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ion-tabs":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Tabs);
+      }
+      break;
+  } });
+}
+
+const IonTabs = Tabs;
+const defineCustomElement = defineCustomElement$1;
+
+export { IonTabs, defineCustomElement };

package/dist/components/ion-text.js

@@ -0,0 +1,40 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { g as getIonMode } from './ionic-global.js';
+import { c as createColorClasses } from './theme.js';
+
+const textCss = ":host(.ion-color){color:var(--ion-color-base)}";
+
+const Text = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    const mode = getIonMode(this);
+    return (h(Host, { class: createColorClasses(this.color, {
+        [mode]: true,
+      }) }, h("slot", null)));
+  }
+  static get style() { return textCss; }
+}, [1, "ion-text", {
+    "color": [513]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ion-text"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ion-text":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Text);
+      }
+      break;
+  } });
+}
+
+const IonText = Text;
+const defineCustomElement = defineCustomElement$1;
+
+export { IonText, defineCustomElement };

package/dist/components/ion-textarea.js

@@ -0,0 +1,287 @@
+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 { 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}";
+
+const textareaMdCss = ".sc-ion-textarea-md-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-md-h{background:initial}.ion-color.sc-ion-textarea-md-h{color:var(--ion-color-base)}ion-item.sc-ion-textarea-md-h,ion-item .sc-ion-textarea-md-h{align-self:baseline}ion-item.sc-ion-textarea-md-h:not(.item-label),ion-item:not(.item-label) .sc-ion-textarea-md-h{--padding-start:0}.textarea-wrapper.sc-ion-textarea-md{display:grid;min-width:inherit;max-width:inherit;min-height:inherit;max-height:inherit}.textarea-wrapper.sc-ion-textarea-md::after{white-space:pre-wrap;content:attr(data-replicated-value) \" \";visibility:hidden}.native-textarea.sc-ion-textarea-md,.textarea-wrapper.sc-ion-textarea-md::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-md,.textarea-wrapper.sc-ion-textarea-md::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-md{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-md::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-md:not(.cloned-input){opacity:0.4}.cloned-input.sc-ion-textarea-md{left:0;top:0;position:absolute;pointer-events:none}[dir=rtl].sc-ion-textarea-md .cloned-input.sc-ion-textarea-md,[dir=rtl].sc-ion-textarea-md-h .cloned-input.sc-ion-textarea-md,[dir=rtl] .sc-ion-textarea-md-h .cloned-input.sc-ion-textarea-md{left:unset;right:unset;right:0}.cloned-input.sc-ion-textarea-md:disabled{opacity:1}[auto-grow=true].sc-ion-textarea-md-h .cloned-input.sc-ion-textarea-md{height:100%}.item-label-floating.item-has-placeholder.sc-ion-textarea-md-h:not(.item-has-value),.item-label-floating.item-has-placeholder:not(.item-has-value) .sc-ion-textarea-md-h{opacity:0}.item-label-floating.item-has-placeholder.sc-ion-textarea-md-h:not(.item-has-value).item-has-focus,.item-label-floating.item-has-placeholder:not(.item-has-value).item-has-focus .sc-ion-textarea-md-h{transition:opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);opacity:1}[auto-grow=true].sc-ion-textarea-md-h .native-textarea.sc-ion-textarea-md{overflow:hidden}.sc-ion-textarea-md-h{--padding-top:10px;--padding-end:0;--padding-bottom:11px;--padding-start:8px;margin-left:0;margin-right:0;margin-top:8px;margin-bottom:0;font-size:inherit}.item-label-stacked.sc-ion-textarea-md-h,.item-label-stacked .sc-ion-textarea-md-h,.item-label-floating.sc-ion-textarea-md-h,.item-label-floating .sc-ion-textarea-md-h{--padding-top:8px;--padding-bottom:8px;--padding-start:0}";
+
+const Textarea = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.ionChange = createEvent(this, "ionChange", 7);
+    this.ionInput = createEvent(this, "ionInput", 7);
+    this.ionStyle = createEvent(this, "ionStyle", 7);
+    this.ionBlur = createEvent(this, "ionBlur", 7);
+    this.ionFocus = createEvent(this, "ionFocus", 7);
+    this.inputId = `ion-textarea-${textareaIds++}`;
+    this.didBlurAfterEdit = false;
+    this.inheritedAttributes = {};
+    /**
+     * 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 = 'none';
+    /**
+     * This Boolean attribute lets you specify that a form control should have input focus when the page loads.
+     */
+    this.autofocus = false;
+    /**
+     * If `true`, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `"password"`, `false` for all other types.
+     */
+    this.clearOnEdit = 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 textarea.
+     */
+    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;
+    /**
+     * If `true`, the textarea container will grow and shrink based
+     * on the contents of the textarea.
+     */
+    this.autoGrow = false;
+    /**
+     * The value of the textarea.
+     */
+    this.value = '';
+    this.onInput = (ev) => {
+      if (this.nativeInput) {
+        this.value = this.nativeInput.value;
+      }
+      this.emitStyle();
+      this.ionInput.emit(ev);
+    };
+    this.onFocus = (ev) => {
+      this.hasFocus = true;
+      this.focusChange();
+      if (this.fireFocusEvents) {
+        this.ionFocus.emit(ev);
+      }
+    };
+    this.onBlur = (ev) => {
+      this.hasFocus = false;
+      this.focusChange();
+      if (this.fireFocusEvents) {
+        this.ionBlur.emit(ev);
+      }
+    };
+    this.onKeyDown = () => {
+      this.checkClearOnEdit();
+    };
+  }
+  debounceChanged() {
+    this.ionChange = debounceEvent(this.ionChange, this.debounce);
+  }
+  disabledChanged() {
+    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) {
+      nativeInput.value = value;
+    }
+    this.runAutoGrow();
+    this.emitStyle();
+    this.ionChange.emit({ value });
+  }
+  connectedCallback() {
+    this.emitStyle();
+    this.debounceChanged();
+    if (Build.isBrowser) {
+      document.dispatchEvent(new CustomEvent('ionInputDidLoad', {
+        detail: this.el,
+      }));
+    }
+  }
+  disconnectedCallback() {
+    if (Build.isBrowser) {
+      document.dispatchEvent(new CustomEvent('ionInputDidUnload', {
+        detail: this.el,
+      }));
+    }
+  }
+  componentWillLoad() {
+    this.inheritedAttributes = Object.assign(Object.assign({}, inheritAriaAttributes(this.el)), inheritAttributes(this.el, ['data-form-type', 'title']));
+  }
+  componentDidLoad() {
+    this.runAutoGrow();
+  }
+  /**
+   * Sets focus on the native `textarea` in `ion-textarea`. Use this method instead of the global
+   * `textarea.focus()`.
+   */
+  async setFocus() {
+    if (this.nativeInput) {
+      this.nativeInput.focus();
+    }
+  }
+  /**
+   * Sets blur on the native `textarea` in `ion-textarea`. Use this method instead of the global
+   * `textarea.blur()`.
+   * @internal
+   */
+  async setBlur() {
+    if (this.nativeInput) {
+      this.nativeInput.blur();
+    }
+  }
+  /**
+   * Returns the native `<textarea>` element used under the hood.
+   */
+  getInputElement() {
+    return Promise.resolve(this.nativeInput);
+  }
+  emitStyle() {
+    this.ionStyle.emit({
+      interactive: true,
+      textarea: true,
+      input: true,
+      'interactive-disabled': this.disabled,
+      'has-placeholder': this.placeholder !== undefined,
+      'has-value': this.hasValue(),
+      'has-focus': this.hasFocus,
+    });
+  }
+  runAutoGrow() {
+    if (this.nativeInput && this.autoGrow) {
+      writeTask(() => {
+        var _a;
+        if (this.textareaWrapper) {
+          // Replicated value is an attribute to be used in the stylesheet
+          // to set the inner contents of a pseudo element.
+          this.textareaWrapper.dataset.replicatedValue = (_a = this.value) !== null && _a !== void 0 ? _a : '';
+        }
+      });
+    }
+  }
+  /**
+   * Check if we need to clear the text input if clearOnEdit is enabled
+   */
+  checkClearOnEdit() {
+    if (!this.clearOnEdit) {
+      return;
+    }
+    // Did the input value change after it was blurred and edited?
+    if (this.didBlurAfterEdit && this.hasValue()) {
+      // Clear the input
+      this.value = '';
+    }
+    // Reset the flag
+    this.didBlurAfterEdit = false;
+  }
+  focusChange() {
+    // If clearOnEdit is enabled and the input blurred but has a value, set a flag
+    if (this.clearOnEdit && !this.hasFocus && this.hasValue()) {
+      this.didBlurAfterEdit = true;
+    }
+    this.emitStyle();
+  }
+  hasValue() {
+    return this.getValue() !== '';
+  }
+  getValue() {
+    return this.value || '';
+  }
+  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,
+      }) }, h("div", { class: "textarea-wrapper", ref: (el) => (this.textareaWrapper = el) }, h("textarea", Object.assign({ class: "native-textarea", "aria-labelledby": label ? labelId : null, ref: (el) => (this.nativeInput = el), autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, disabled: this.disabled, maxLength: this.maxlength, minLength: this.minlength, name: this.name, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown }, this.inheritedAttributes), value))));
+  }
+  get el() { return this; }
+  static get watchers() { return {
+    "debounce": ["debounceChanged"],
+    "disabled": ["disabledChanged"],
+    "value": ["valueChanged"]
+  }; }
+  static get style() { return {
+    ios: textareaIosCss,
+    md: textareaMdCss
+  }; }
+}, [34, "ion-textarea", {
+    "fireFocusEvents": [4, "fire-focus-events"],
+    "color": [513],
+    "autocapitalize": [1],
+    "autofocus": [4],
+    "clearOnEdit": [1028, "clear-on-edit"],
+    "debounce": [2],
+    "disabled": [4],
+    "inputmode": [1],
+    "enterkeyhint": [1],
+    "maxlength": [2],
+    "minlength": [2],
+    "name": [1],
+    "placeholder": [1],
+    "readonly": [4],
+    "required": [4],
+    "spellcheck": [4],
+    "cols": [2],
+    "rows": [2],
+    "wrap": [1],
+    "autoGrow": [516, "auto-grow"],
+    "value": [1025],
+    "hasFocus": [32],
+    "setFocus": [64],
+    "setBlur": [64],
+    "getInputElement": [64]
+  }]);
+let textareaIds = 0;
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ion-textarea"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ion-textarea":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Textarea);
+      }
+      break;
+  } });
+}
+
+const IonTextarea = Textarea;
+const defineCustomElement = defineCustomElement$1;
+
+export { IonTextarea, defineCustomElement };

package/dist/components/ion-thumbnail.js

@@ -0,0 +1,34 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { g as getIonMode } from './ionic-global.js';
+
+const thumbnailCss = ":host{--size:48px;--border-radius:0;border-radius:var(--border-radius);display:block;width:var(--size);height:var(--size)}::slotted(ion-img),::slotted(img){border-radius:var(--border-radius);width:100%;height:100%;object-fit:cover;overflow:hidden}";
+
+const Thumbnail = /*@__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 thumbnailCss; }
+}, [1, "ion-thumbnail"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ion-thumbnail"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ion-thumbnail":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Thumbnail);
+      }
+      break;
+  } });
+}
+
+const IonThumbnail = Thumbnail;
+const defineCustomElement = defineCustomElement$1;
+
+export { IonThumbnail, defineCustomElement };

package/dist/components/ion-title.js

@@ -0,0 +1,6 @@
+import { T as ToolbarTitle, d as defineCustomElement$1 } from './title.js';
+
+const IonTitle = ToolbarTitle;
+const defineCustomElement = defineCustomElement$1;
+
+export { IonTitle, defineCustomElement };