@poppy-ui/vue 0.3.7 → 0.3.9

package/dist/index.js

@@ -1,4 +1,4 @@
-import { defineContainer, defineStencilSSRComponent } from '@stencil/vue-output-target/runtime';
+import { defineComponent, ref, getCurrentInstance, inject, h, withDirectives } from 'vue';
 import { defineCustomElement } from '@poppy-ui/core/components/pop-accordion.js';
 import { defineCustomElement as defineCustomElement$1 } from '@poppy-ui/core/components/pop-accordion-group.js';
 import { defineCustomElement as defineCustomElement$2 } from '@poppy-ui/core/components/pop-avatar.js';
@@ -37,68 +37,221 @@ import { defineCustomElement as defineCustomElement$y } from '@poppy-ui/core/com
 import { defineCustomElement as defineCustomElement$z } from '@poppy-ui/core/components/pop-tooltip.js';
 import { initialize } from '@poppy-ui/core/components';
 
+// @ts-nocheck
+// It's easier and safer for Volar to disable typechecking and let the return type inference do its job.
+const UPDATE_VALUE_EVENT = 'update:modelValue';
+const MODEL_VALUE = 'modelValue';
+const ROUTER_LINK_VALUE = 'routerLink';
+const NAV_MANAGER = 'navManager';
+const ROUTER_PROP_PREFIX = 'router';
+const ARIA_PROP_PREFIX = 'aria';
+/**
+ * Starting in Vue 3.1.0, all properties are
+ * added as keys to the props object, even if
+ * they are not being used. In order to correctly
+ * account for both value props and v-model props,
+ * we need to check if the key exists for Vue <3.1.0
+ * and then check if it is not undefined for Vue >= 3.1.0.
+ * See https://github.com/vuejs/vue-next/issues/3889
+ */
+const EMPTY_PROP = Symbol();
+const DEFAULT_EMPTY_PROP = { default: EMPTY_PROP };
+const getComponentClasses = (classes) => {
+    return (classes === null || classes === void 0 ? void 0 : classes.split(' ')) || [];
+};
+const getElementClasses = (ref, componentClasses, defaultClasses = []) => {
+    var _a;
+    return [...Array.from(((_a = ref.value) === null || _a === void 0 ? void 0 : _a.classList) || []), ...defaultClasses].filter((c, i, self) => !componentClasses.has(c) && self.indexOf(c) === i);
+};
+/**
+ * Create a callback to define a Vue component wrapper around a Web Component.
+ *
+ * @prop name - The component tag name (i.e. `ion-button`)
+ * @prop componentProps - An array of properties on the
+ * component. These usually match up with the @Prop definitions
+ * in each component's TSX file.
+ * @prop customElement - An option custom element instance to pass
+ * to customElements.define. Only set if `includeImportCustomElements: true` in your config.
+ * @prop modelProp - The prop that v-model binds to (i.e. value)
+ * @prop modelUpdateEvent - The event that is fired from your Web Component when the value changes (i.e. ionChange)
+ */
+const defineContainer = (name, defineCustomElement, componentProps = [], modelProp, modelUpdateEvent) => {
+    /**
+     * Create a Vue component wrapper around a Web Component.
+     * Note: The `props` here are not all properties on a component.
+     * They refer to whatever properties are set on an instance of a component.
+     */
+    if (defineCustomElement !== undefined) {
+        defineCustomElement();
+    }
+    const Container = defineComponent((props, { attrs, slots, emit }) => {
+        var _a;
+        let modelPropValue = props[modelProp];
+        const containerRef = ref();
+        const classes = new Set(getComponentClasses(attrs.class));
+        /**
+         * This directive is responsible for updating any reactive
+         * reference associated with v-model on the component.
+         * This code must be run inside of the "created" callback.
+         * Since the following listener callbacks as well as any potential
+         * event callback defined in the developer's app are set on
+         * the same element, we need to make sure the following callbacks
+         * are set first so they fire first. If the developer's callback fires first
+         * then the reactive reference will not have been updated yet.
+         */
+        const vModelDirective = {
+            created: (el) => {
+                const eventsNames = Array.isArray(modelUpdateEvent) ? modelUpdateEvent : [modelUpdateEvent];
+                eventsNames.forEach((eventName) => {
+                    el.addEventListener(eventName.toLowerCase(), (e) => {
+                        /**
+                         * Only update the v-model binding if the event's target is the element we are
+                         * listening on. For example, Component A could emit ionChange, but it could also
+                         * have a descendant Component B that also emits ionChange. We only want to update
+                         * the v-model for Component A when ionChange originates from that element and not
+                         * when ionChange bubbles up from Component B.
+                         */
+                        if (e.target.tagName === el.tagName) {
+                            modelPropValue = (e === null || e === void 0 ? void 0 : e.target)[modelProp];
+                            emit(UPDATE_VALUE_EVENT, modelPropValue);
+                        }
+                    });
+                });
+            },
+        };
+        const currentInstance = getCurrentInstance();
+        const hasRouter = (_a = currentInstance === null || currentInstance === void 0 ? void 0 : currentInstance.appContext) === null || _a === void 0 ? void 0 : _a.provides[NAV_MANAGER];
+        const navManager = hasRouter ? inject(NAV_MANAGER) : undefined;
+        const handleRouterLink = (ev) => {
+            const { routerLink } = props;
+            if (routerLink === EMPTY_PROP)
+                return;
+            if (navManager !== undefined) {
+                /**
+                 * This prevents the browser from
+                 * performing a page reload when pressing
+                 * an Ionic component with routerLink.
+                 * The page reload interferes with routing
+                 * and causes ion-back-button to disappear
+                 * since the local history is wiped on reload.
+                 */
+                ev.preventDefault();
+                let navigationPayload = { event: ev };
+                for (const key in props) {
+                    const value = props[key];
+                    if (props.hasOwnProperty(key) && key.startsWith(ROUTER_PROP_PREFIX) && value !== EMPTY_PROP) {
+                        navigationPayload[key] = value;
+                    }
+                }
+                navManager.navigate(navigationPayload);
+            }
+            else {
+                console.warn('Tried to navigate, but no router was found. Make sure you have mounted Vue Router.');
+            }
+        };
+        return () => {
+            modelPropValue = props[modelProp];
+            getComponentClasses(attrs.class).forEach((value) => {
+                classes.add(value);
+            });
+            const oldClick = props.onClick;
+            const handleClick = (ev) => {
+                if (oldClick !== undefined) {
+                    oldClick(ev);
+                }
+                if (!ev.defaultPrevented) {
+                    handleRouterLink(ev);
+                }
+            };
+            let propsToAdd = {
+                ref: containerRef,
+                class: getElementClasses(containerRef, classes),
+                onClick: handleClick,
+            };
+            /**
+             * We can use Object.entries here
+             * to avoid the hasOwnProperty check,
+             * but that would require 2 iterations
+             * where as this only requires 1.
+             */
+            for (const key in props) {
+                const value = props[key];
+                if ((props.hasOwnProperty(key) && value !== EMPTY_PROP) || key.startsWith(ARIA_PROP_PREFIX)) {
+                    propsToAdd[key] = value;
+                }
+            }
+            if (modelProp) {
+                /**
+                 * If form value property was set using v-model
+                 * then we should use that value.
+                 * Otherwise, check to see if form value property
+                 * was set as a static value (i.e. no v-model).
+                 */
+                if (props[MODEL_VALUE] !== EMPTY_PROP) {
+                    propsToAdd = Object.assign(Object.assign({}, propsToAdd), { [modelProp]: props[MODEL_VALUE] });
+                }
+                else if (modelPropValue !== EMPTY_PROP) {
+                    propsToAdd = Object.assign(Object.assign({}, propsToAdd), { [modelProp]: modelPropValue });
+                }
+            }
+            // If router link is defined, add href to props
+            // in order to properly render an anchor tag inside
+            // of components that should become activatable and
+            // focusable with router link.
+            if (props[ROUTER_LINK_VALUE] !== EMPTY_PROP) {
+                propsToAdd = Object.assign(Object.assign({}, propsToAdd), { href: props[ROUTER_LINK_VALUE] });
+            }
+            /**
+             * vModelDirective is only needed on components that support v-model.
+             * As a result, we conditionally call withDirectives with v-model components.
+             */
+            const node = h(name, propsToAdd, slots.default && slots.default());
+            return modelProp === undefined ? node : withDirectives(node, [[vModelDirective]]);
+        };
+    });
+    if (typeof Container !== 'function') {
+        Container.name = name;
+        Container.props = {
+            [ROUTER_LINK_VALUE]: DEFAULT_EMPTY_PROP,
+        };
+        componentProps.forEach((componentProp) => {
+            Container.props[componentProp] = DEFAULT_EMPTY_PROP;
+        });
+        if (modelProp) {
+            Container.props[MODEL_VALUE] = DEFAULT_EMPTY_PROP;
+            Container.emits = [UPDATE_VALUE_EVENT];
+        }
+    }
+    return Container;
+};
+
 /* eslint-disable */
 /* tslint:disable */
 /* auto-generated vue proxies */
-const PopAccordion =  globalThis.window ? defineContainer('pop-accordion', defineCustomElement, [
+const PopAccordion = /*@__PURE__*/ defineContainer('pop-accordion', defineCustomElement, [
     'readonly',
     'disabled',
     'name',
     'open'
-]) : defineStencilSSRComponent({
-    tagName: 'pop-accordion',
-    hydrateModule: import('@poppy-ui/core/hydrate'),
-    props: {
-        'readonly': [Boolean, "readonly"],
-        'disabled': [Boolean, "disabled"],
-        'name': [String, "name"],
-        'open': [Boolean, "open"]
-    }
-});
-const PopAccordionGroup =  globalThis.window ? defineContainer('pop-accordion-group', defineCustomElement$1, [
+]);
+const PopAccordionGroup = /*@__PURE__*/ defineContainer('pop-accordion-group', defineCustomElement$1, [
     'readonly',
     'disabled',
     'multiple',
     'active',
     'popChange',
     'popActiveChange'
-], 'active', 'pop-change') : defineStencilSSRComponent({
-    tagName: 'pop-accordion-group',
-    hydrateModule: import('@poppy-ui/core/hydrate'),
-    props: {
-        'readonly': [Boolean, "readonly"],
-        'disabled': [Boolean, "disabled"],
-        'multiple': [Boolean, "multiple"],
-        'active': [String, "active"],
-        'onPopChange': [Function],
-        'onPopActiveChange': [Function]
-    }
-});
-const PopAvatar =  globalThis.window ? defineContainer('pop-avatar', defineCustomElement$2, [
+], 'active', 'pop-change');
+const PopAvatar = /*@__PURE__*/ defineContainer('pop-avatar', defineCustomElement$2, [
     'placeholder'
-]) : defineStencilSSRComponent({
-    tagName: 'pop-avatar',
-    hydrateModule: import('@poppy-ui/core/hydrate'),
-    props: {
-        'placeholder': [Boolean, "placeholder"]
-    }
-});
-const PopBadge =  globalThis.window ? defineContainer('pop-badge', defineCustomElement$3, [
+]);
+const PopBadge = /*@__PURE__*/ defineContainer('pop-badge', defineCustomElement$3, [
     'color',
     'size',
     'outlined',
     'as'
-]) : defineStencilSSRComponent({
-    tagName: 'pop-badge',
-    hydrateModule: import('@poppy-ui/core/hydrate'),
-    props: {
-        'color': [String, "color"],
-        'size': [String, "size"],
-        'outlined': [Boolean, "outlined"],
-        'as': [String, "as"]
-    }
-});
-const PopButton =  globalThis.window ? defineContainer('pop-button', defineCustomElement$4, [
+]);
+const PopButton = /*@__PURE__*/ defineContainer('pop-button', defineCustomElement$4, [
     'type',
     'form',
     'disabled',
@@ -110,48 +263,14 @@ const PopButton =  globalThis.window ? defineContainer('pop-button', defineCusto
     'active',
     'popFocus',
     'popBlur'
-]) : defineStencilSSRComponent({
-    tagName: 'pop-button',
-    hydrateModule: import('@poppy-ui/core/hydrate'),
-    props: {
-        'type': [String, "type"],
-        'form': [String, "form"],
-        'disabled': [Boolean, "disabled"],
-        'color': [String, "color"],
-        'size': [String, "size"],
-        'outlined': [Boolean, "outlined"],
-        'shape': [String, "shape"],
-        'expand': [String, "expand"],
-        'active': [Boolean, "active"],
-        'onPopFocus': [Function],
-        'onPopBlur': [Function]
-    }
-});
-const PopCard =  globalThis.window ? defineContainer('pop-card', defineCustomElement$5, [
+]);
+const PopCard = /*@__PURE__*/ defineContainer('pop-card', defineCustomElement$5, [
     'compact'
-]) : defineStencilSSRComponent({
-    tagName: 'pop-card',
-    hydrateModule: import('@poppy-ui/core/hydrate'),
-    props: {
-        'compact': [Boolean, "compact"]
-    }
-});
-const PopCardActions =  globalThis.window ? defineContainer('pop-card-actions', defineCustomElement$6) : defineStencilSSRComponent({
-    tagName: 'pop-card-actions',
-    hydrateModule: import('@poppy-ui/core/hydrate'),
-    props: {}
-});
-const PopCardBody =  globalThis.window ? defineContainer('pop-card-body', defineCustomElement$7) : defineStencilSSRComponent({
-    tagName: 'pop-card-body',
-    hydrateModule: import('@poppy-ui/core/hydrate'),
-    props: {}
-});
-const PopCardTitle =  globalThis.window ? defineContainer('pop-card-title', defineCustomElement$8) : defineStencilSSRComponent({
-    tagName: 'pop-card-title',
-    hydrateModule: import('@poppy-ui/core/hydrate'),
-    props: {}
-});
-const PopCheckbox =  globalThis.window ? defineContainer('pop-checkbox', defineCustomElement$9, [
+]);
+const PopCardActions = /*@__PURE__*/ defineContainer('pop-card-actions', defineCustomElement$6);
+const PopCardBody = /*@__PURE__*/ defineContainer('pop-card-body', defineCustomElement$7);
+const PopCardTitle = /*@__PURE__*/ defineContainer('pop-card-title', defineCustomElement$8);
+const PopCheckbox = /*@__PURE__*/ defineContainer('pop-checkbox', defineCustomElement$9, [
     'name',
     'value',
     'required',
@@ -165,109 +284,42 @@ const PopCheckbox =  globalThis.window ? defineContainer('pop-checkbox', defineC
     'popChange',
     'popFocus',
     'popBlur'
-], 'checked', 'pop-change') : defineStencilSSRComponent({
-    tagName: 'pop-checkbox',
-    hydrateModule: import('@poppy-ui/core/hydrate'),
-    props: {
-        'name': [String, "name"],
-        'value': [String, "value"],
-        'required': [Boolean, "required"],
-        'readonly': [Boolean, "readonly"],
-        'checked': [Boolean, "checked"],
-        'indeterminate': [Boolean, "indeterminate"],
-        'disabled': [Boolean, "disabled"],
-        'color': [String, "color"],
-        'size': [String, "size"],
-        'placement': [String, "placement"],
-        'onPopChange': [Function],
-        'onPopFocus': [Function],
-        'onPopBlur': [Function]
-    }
-});
-const PopDivider =  globalThis.window ? defineContainer('pop-divider', defineCustomElement$a, [
+], 'checked', 'pop-change');
+const PopDivider = /*@__PURE__*/ defineContainer('pop-divider', defineCustomElement$a, [
     'orientation',
     'placement',
     'color'
-]) : defineStencilSSRComponent({
-    tagName: 'pop-divider',
-    hydrateModule: import('@poppy-ui/core/hydrate'),
-    props: {
-        'orientation': [String, "orientation"],
-        'placement': [String, "placement"],
-        'color': [String, "color"]
-    }
-});
-const PopDrawer =  globalThis.window ? defineContainer('pop-drawer', defineCustomElement$b, [
+]);
+const PopDrawer = /*@__PURE__*/ defineContainer('pop-drawer', defineCustomElement$b, [
     'trigger',
     'triggerAction',
     'side',
     'open',
     'popDidPresent',
     'popDidDismiss'
-]) : defineStencilSSRComponent({
-    tagName: 'pop-drawer',
-    hydrateModule: import('@poppy-ui/core/hydrate'),
-    props: {
-        'trigger': [String, "trigger"],
-        'triggerAction': [String, "trigger-action"],
-        'side': [String, "side"],
-        'open': [Boolean, "open"],
-        'onPopDidPresent': [Function],
-        'onPopDidDismiss': [Function]
-    }
-});
-const PopDropdown =  globalThis.window ? defineContainer('pop-dropdown', defineCustomElement$c, [
+]);
+const PopDropdown = /*@__PURE__*/ defineContainer('pop-dropdown', defineCustomElement$c, [
     'side',
     'align',
     'open',
     'triggerAction',
     'debounce',
     'showBackdrop',
-    'didPresent',
-    'didDismiss'
-]) : defineStencilSSRComponent({
-    tagName: 'pop-dropdown',
-    hydrateModule: import('@poppy-ui/core/hydrate'),
-    props: {
-        'side': [String, "side"],
-        'align': [String, "align"],
-        'open': [Boolean, "open"],
-        'triggerAction': [String, "trigger-action"],
-        'debounce': [Number, "debounce"],
-        'showBackdrop': [Boolean, "show-backdrop"],
-        'onDidPresent': [Function],
-        'onDidDismiss': [Function]
-    }
-});
-const PopImg =  globalThis.window ? defineContainer('pop-img', defineCustomElement$d, [
+    'present',
+    'dismiss'
+]);
+const PopImg = /*@__PURE__*/ defineContainer('pop-img', defineCustomElement$d, [
     'src',
     'alt',
     'popWillLoad',
     'popDidLoad',
     'popError'
-]) : defineStencilSSRComponent({
-    tagName: 'pop-img',
-    hydrateModule: import('@poppy-ui/core/hydrate'),
-    props: {
-        'src': [String, "src"],
-        'alt': [String, "alt"],
-        'onPopWillLoad': [Function],
-        'onPopDidLoad': [Function],
-        'onPopError': [Function]
-    }
-});
-const PopIndicator =  globalThis.window ? defineContainer('pop-indicator', defineCustomElement$e, [
+]);
+const PopIndicator = /*@__PURE__*/ defineContainer('pop-indicator', defineCustomElement$e, [
     'side',
     'position'
-]) : defineStencilSSRComponent({
-    tagName: 'pop-indicator',
-    hydrateModule: import('@poppy-ui/core/hydrate'),
-    props: {
-        'side': [String, "side"],
-        'position': [String, "position"]
-    }
-});
-const PopInput =  globalThis.window ? defineContainer('pop-input', defineCustomElement$f, [
+]);
+const PopInput = /*@__PURE__*/ defineContainer('pop-input', defineCustomElement$f, [
     'name',
     'type',
     'placeholder',
@@ -300,42 +352,8 @@ const PopInput =  globalThis.window ? defineContainer('pop-input', defineCustomE
     'popInput',
     'popFocus',
     'popBlur'
-], 'value', 'pop-input') : defineStencilSSRComponent({
-    tagName: 'pop-input',
-    hydrateModule: import('@poppy-ui/core/hydrate'),
-    props: {
-        'name': [String, "name"],
-        'type': [String, "type"],
-        'placeholder': [String, "placeholder"],
-        'min': [Number, "min"],
-        'step': [String, "step"],
-        'minLength': [Number, "min-length"],
-        'maxLength': [Number, "max-length"],
-        'multiple': [Boolean, "multiple"],
-        'pattern': [String, "pattern"],
-        'required': [Boolean, "required"],
-        'readonly': [Boolean, "readonly"],
-        'disabled': [Boolean, "disabled"],
-        'autoFocus': [Boolean, "auto-focus"],
-        'keyboard': [String, "keyboard"],
-        'enterkeyhint': [String, "enterkeyhint"],
-        'spellcheck': [Boolean, "spellcheck"],
-        'autoComplete': [String, "auto-complete"],
-        'autoCapitalize': [String, "auto-capitalize"],
-        'bordered': [Boolean, "bordered"],
-        'color': [String, "color"],
-        'size': [String, "size"],
-        'helperText': [String, "helper-text"],
-        'errorText': [String, "error-text"],
-        'counter': [Boolean, "counter"],
-        'debounce': [Number, "debounce"],
-        'onPopChange': [Function],
-        'onPopInput': [Function],
-        'onPopFocus': [Function],
-        'onPopBlur': [Function]
-    }
-});
-const PopInputFile =  globalThis.window ? defineContainer('pop-input-file', defineCustomElement$g, [
+], 'value', 'pop-input');
+const PopInputFile = /*@__PURE__*/ defineContainer('pop-input-file', defineCustomElement$g, [
     'name',
     'value',
     'multiple',
@@ -351,85 +369,28 @@ const PopInputFile =  globalThis.window ? defineContainer('pop-input-file', defi
     'popChange',
     'popFocus',
     'popBlur'
-]) : defineStencilSSRComponent({
-    tagName: 'pop-input-file',
-    hydrateModule: import('@poppy-ui/core/hydrate'),
-    props: {
-        'name': [String, "name"],
-        'multiple': [Boolean, "multiple"],
-        'required': [Boolean, "required"],
-        'readonly': [Boolean, "readonly"],
-        'disabled': [Boolean, "disabled"],
-        'autoFocus': [Boolean, "auto-focus"],
-        'bordered': [Boolean, "bordered"],
-        'color': [String, "color"],
-        'size': [String, "size"],
-        'helperText': [String, "helper-text"],
-        'errorText': [String, "error-text"],
-        'onPopChange': [Function],
-        'onPopFocus': [Function],
-        'onPopBlur': [Function]
-    }
-});
-const PopItem =  globalThis.window ? defineContainer('pop-item', defineCustomElement$h, [
+]);
+const PopItem = /*@__PURE__*/ defineContainer('pop-item', defineCustomElement$h, [
     'disabled'
-]) : defineStencilSSRComponent({
-    tagName: 'pop-item',
-    hydrateModule: import('@poppy-ui/core/hydrate'),
-    props: {
-        'disabled': [Boolean, "disabled"]
-    }
-});
-const PopJoin =  globalThis.window ? defineContainer('pop-join', defineCustomElement$i, [
+]);
+const PopJoin = /*@__PURE__*/ defineContainer('pop-join', defineCustomElement$i, [
     'orientation'
-]) : defineStencilSSRComponent({
-    tagName: 'pop-join',
-    hydrateModule: import('@poppy-ui/core/hydrate'),
-    props: {
-        'orientation': [String, "orientation"]
-    }
-});
-const PopKbd =  globalThis.window ? defineContainer('pop-kbd', defineCustomElement$j, [
+]);
+const PopKbd = /*@__PURE__*/ defineContainer('pop-kbd', defineCustomElement$j, [
     'size'
-]) : defineStencilSSRComponent({
-    tagName: 'pop-kbd',
-    hydrateModule: import('@poppy-ui/core/hydrate'),
-    props: {
-        'size': [String, "size"]
-    }
-});
-const PopList =  globalThis.window ? defineContainer('pop-list', defineCustomElement$k, [
+]);
+const PopList = /*@__PURE__*/ defineContainer('pop-list', defineCustomElement$k, [
     'size',
     'orientation'
-]) : defineStencilSSRComponent({
-    tagName: 'pop-list',
-    hydrateModule: import('@poppy-ui/core/hydrate'),
-    props: {
-        'size': [String, "size"],
-        'orientation': [String, "orientation"]
-    }
-});
-const PopLoading =  globalThis.window ? defineContainer('pop-loading', defineCustomElement$l, [
+]);
+const PopLoading = /*@__PURE__*/ defineContainer('pop-loading', defineCustomElement$l, [
     'type',
     'size'
-]) : defineStencilSSRComponent({
-    tagName: 'pop-loading',
-    hydrateModule: import('@poppy-ui/core/hydrate'),
-    props: {
-        'type': [String, "type"],
-        'size': [String, "size"]
-    }
-});
-const PopMask =  globalThis.window ? defineContainer('pop-mask', defineCustomElement$m, [
+]);
+const PopMask = /*@__PURE__*/ defineContainer('pop-mask', defineCustomElement$m, [
     'type'
-]) : defineStencilSSRComponent({
-    tagName: 'pop-mask',
-    hydrateModule: import('@poppy-ui/core/hydrate'),
-    props: {
-        'type': [String, "type"]
-    }
-});
-const PopModal =  globalThis.window ? defineContainer('pop-modal', defineCustomElement$n, [
+]);
+const PopModal = /*@__PURE__*/ defineContainer('pop-modal', defineCustomElement$n, [
     'trigger',
     'component',
     'componentProps',
@@ -438,25 +399,9 @@ const PopModal =  globalThis.window ? defineContainer('pop-modal', defineCustomE
     'open',
     'present',
     'dismiss'
-]) : defineStencilSSRComponent({
-    tagName: 'pop-modal',
-    hydrateModule: import('@poppy-ui/core/hydrate'),
-    props: {
-        'trigger': [String, "trigger"],
-        'component': [String, "component"],
-        'showBackdrop': [Boolean, "show-backdrop"],
-        'backdropDismiss': [Boolean, "backdrop-dismiss"],
-        'open': [Boolean, "open"],
-        'onPresent': [Function],
-        'onDismiss': [Function]
-    }
-});
-const PopNavbar =  globalThis.window ? defineContainer('pop-navbar', defineCustomElement$o) : defineStencilSSRComponent({
-    tagName: 'pop-navbar',
-    hydrateModule: import('@poppy-ui/core/hydrate'),
-    props: {}
-});
-const PopPopover =  globalThis.window ? defineContainer('pop-popover', defineCustomElement$p, [
+]);
+const PopNavbar = /*@__PURE__*/ defineContainer('pop-navbar', defineCustomElement$o);
+const PopPopover = /*@__PURE__*/ defineContainer('pop-popover', defineCustomElement$p, [
     'open',
     'animated',
     'showBackdrop',
@@ -470,36 +415,13 @@ const PopPopover =  globalThis.window ? defineContainer('pop-popover', defineCus
     'didPresent',
     'willDismiss',
     'didDismiss'
-]) : defineStencilSSRComponent({
-    tagName: 'pop-popover',
-    hydrateModule: import('@poppy-ui/core/hydrate'),
-    props: {
-        'open': [Boolean, "open"],
-        'showBackdrop': [Boolean, "show-backdrop"],
-        'backdropDismiss': [Boolean, "backdrop-dismiss"],
-        'trigger': [String, "trigger"],
-        'triggerAction': [String, "trigger-action"],
-        'component': [String, "component"],
-        'onWillPresent': [Function],
-        'onDidPresent': [Function],
-        'onWillDismiss': [Function],
-        'onDidDismiss': [Function]
-    }
-});
-const PopProgress =  globalThis.window ? defineContainer('pop-progress', defineCustomElement$q, [
+]);
+const PopProgress = /*@__PURE__*/ defineContainer('pop-progress', defineCustomElement$q, [
     'value',
     'max',
     'color'
-]) : defineStencilSSRComponent({
-    tagName: 'pop-progress',
-    hydrateModule: import('@poppy-ui/core/hydrate'),
-    props: {
-        'value': [Number, "value"],
-        'max': [Number, "max"],
-        'color': [String, "color"]
-    }
-});
-const PopRadio =  globalThis.window ? defineContainer('pop-radio', defineCustomElement$r, [
+]);
+const PopRadio = /*@__PURE__*/ defineContainer('pop-radio', defineCustomElement$r, [
     'name',
     'value',
     'checked',
@@ -510,22 +432,8 @@ const PopRadio =  globalThis.window ? defineContainer('pop-radio', defineCustomE
     'size',
     'popFocus',
     'popBlur'
-], 'value', 'pop-change') : defineStencilSSRComponent({
-    tagName: 'pop-radio',
-    hydrateModule: import('@poppy-ui/core/hydrate'),
-    props: {
-        'name': [String, "name"],
-        'checked': [Boolean, "checked"],
-        'required': [Boolean, "required"],
-        'disabled': [Boolean, "disabled"],
-        'autoFocus': [Boolean, "auto-focus"],
-        'color': [String, "color"],
-        'size': [String, "size"],
-        'onPopFocus': [Function],
-        'onPopBlur': [Function]
-    }
-});
-const PopRadioGroup =  globalThis.window ? defineContainer('pop-radio-group', defineCustomElement$s, [
+], 'value', 'pop-change');
+const PopRadioGroup = /*@__PURE__*/ defineContainer('pop-radio-group', defineCustomElement$s, [
     'name',
     'value',
     'required',
@@ -536,22 +444,8 @@ const PopRadioGroup =  globalThis.window ? defineContainer('pop-radio-group', de
     'size',
     'popChange',
     'popValueChange'
-], 'value', 'pop-change') : defineStencilSSRComponent({
-    tagName: 'pop-radio-group',
-    hydrateModule: import('@poppy-ui/core/hydrate'),
-    props: {
-        'name': [String, "name"],
-        'required': [Boolean, "required"],
-        'disabled': [Boolean, "disabled"],
-        'allowEmpty': [Boolean, "allow-empty"],
-        'compare': [String, "compare"],
-        'color': [String, "color"],
-        'size': [String, "size"],
-        'onPopChange': [Function],
-        'onPopValueChange': [Function]
-    }
-});
-const PopRange =  globalThis.window ? defineContainer('pop-range', defineCustomElement$t, [
+], 'value', 'pop-change');
+const PopRange = /*@__PURE__*/ defineContainer('pop-range', defineCustomElement$t, [
     'name',
     'value',
     'min',
@@ -566,27 +460,8 @@ const PopRange =  globalThis.window ? defineContainer('pop-range', defineCustomE
     'popChange',
     'popFocus',
     'popBlur'
-], 'value', 'pop-change') : defineStencilSSRComponent({
-    tagName: 'pop-range',
-    hydrateModule: import('@poppy-ui/core/hydrate'),
-    props: {
-        'name': [String, "name"],
-        'value': [Number, "value"],
-        'min': [Number, "min"],
-        'max': [Number, "max"],
-        'step': [Number, "step"],
-        'required': [Boolean, "required"],
-        'disabled': [Boolean, "disabled"],
-        'autoFocus': [Boolean, "auto-focus"],
-        'color': [String, "color"],
-        'size': [String, "size"],
-        'debounce': [Number, "debounce"],
-        'onPopChange': [Function],
-        'onPopFocus': [Function],
-        'onPopBlur': [Function]
-    }
-});
-const PopSelect =  globalThis.window ? defineContainer('pop-select', defineCustomElement$u, [
+], 'value', 'pop-change');
+const PopSelect = /*@__PURE__*/ defineContainer('pop-select', defineCustomElement$u, [
     'name',
     'placeholder',
     'value',
@@ -594,6 +469,7 @@ const PopSelect =  globalThis.window ? defineContainer('pop-select', defineCusto
     'min',
     'max',
     'required',
+    'readonly',
     'disabled',
     'autoFocus',
     'bordered',
@@ -604,64 +480,24 @@ const PopSelect =  globalThis.window ? defineContainer('pop-select', defineCusto
     'notEnoughErrorText',
     'tooManyErrorText',
     'compare',
-    'popDismiss',
+    'present',
+    'dismiss',
     'popChange',
     'popFocus',
     'popBlur'
-], 'value', 'pop-change') : defineStencilSSRComponent({
-    tagName: 'pop-select',
-    hydrateModule: import('@poppy-ui/core/hydrate'),
-    props: {
-        'name': [String, "name"],
-        'placeholder': [String, "placeholder"],
-        'multiple': [Boolean, "multiple"],
-        'min': [Number, "min"],
-        'max': [Number, "max"],
-        'required': [Boolean, "required"],
-        'disabled': [Boolean, "disabled"],
-        'autoFocus': [Boolean, "auto-focus"],
-        'bordered': [Boolean, "bordered"],
-        'color': [String, "color"],
-        'size': [String, "size"],
-        'selectedText': [String, "selected-text"],
-        'helperText': [String, "helper-text"],
-        'notEnoughErrorText': [String, "not-enough-error-text"],
-        'tooManyErrorText': [String, "too-many-error-text"],
-        'compare': [String, "compare"],
-        'onPopDismiss': [Function],
-        'onPopChange': [Function],
-        'onPopFocus': [Function],
-        'onPopBlur': [Function]
-    }
-});
-const PopSelectOption =  globalThis.window ? defineContainer('pop-select-option', defineCustomElement$v, [
+], 'value', 'pop-change');
+const PopSelectOption = /*@__PURE__*/ defineContainer('pop-select-option', defineCustomElement$v, [
     'value',
     'disabled',
     'color',
     'size'
-]) : defineStencilSSRComponent({
-    tagName: 'pop-select-option',
-    hydrateModule: import('@poppy-ui/core/hydrate'),
-    props: {
-        'disabled': [Boolean, "disabled"],
-        'color': [String, "color"],
-        'size': [String, "size"]
-    }
-});
-const PopSwap =  globalThis.window ? defineContainer('pop-swap', defineCustomElement$w, [
+]);
+const PopSwap = /*@__PURE__*/ defineContainer('pop-swap', defineCustomElement$w, [
     'type',
     'active',
     'popSwap'
-], 'active', 'pop-change') : defineStencilSSRComponent({
-    tagName: 'pop-swap',
-    hydrateModule: import('@poppy-ui/core/hydrate'),
-    props: {
-        'type': [String, "type"],
-        'active': [Boolean, "active"],
-        'onPopSwap': [Function]
-    }
-});
-const PopTextarea =  globalThis.window ? defineContainer('pop-textarea', defineCustomElement$x, [
+], 'active', 'pop-change');
+const PopTextarea = /*@__PURE__*/ defineContainer('pop-textarea', defineCustomElement$x, [
     'name',
     'placeholder',
     'value',
@@ -690,40 +526,8 @@ const PopTextarea =  globalThis.window ? defineContainer('pop-textarea', defineC
     'popInput',
     'popFocus',
     'popBlur'
-], 'value', 'pop-input') : defineStencilSSRComponent({
-    tagName: 'pop-textarea',
-    hydrateModule: import('@poppy-ui/core/hydrate'),
-    props: {
-        'name': [String, "name"],
-        'placeholder': [String, "placeholder"],
-        'value': [String, "value"],
-        'minLength': [Number, "min-length"],
-        'maxLength': [Number, "max-length"],
-        'cols': [Number, "cols"],
-        'rows': [Number, "rows"],
-        'required': [Boolean, "required"],
-        'readonly': [Boolean, "readonly"],
-        'disabled': [Boolean, "disabled"],
-        'autoFocus': [Boolean, "auto-focus"],
-        'keyboard': [String, "keyboard"],
-        'enterkeyhint': [String, "enterkeyhint"],
-        'spellcheck': [Boolean, "spellcheck"],
-        'autoCapitalize': [String, "auto-capitalize"],
-        'wrap': [String, "wrap"],
-        'bordered': [Boolean, "bordered"],
-        'color': [String, "color"],
-        'size': [String, "size"],
-        'helperText': [String, "helper-text"],
-        'errorText': [String, "error-text"],
-        'counter': [Boolean, "counter"],
-        'debounce': [Number, "debounce"],
-        'onPopChange': [Function],
-        'onPopInput': [Function],
-        'onPopFocus': [Function],
-        'onPopBlur': [Function]
-    }
-});
-const PopToggle =  globalThis.window ? defineContainer('pop-toggle', defineCustomElement$y, [
+], 'value', 'pop-input');
+const PopToggle = /*@__PURE__*/ defineContainer('pop-toggle', defineCustomElement$y, [
     'name',
     'value',
     'required',
@@ -736,39 +540,13 @@ const PopToggle =  globalThis.window ? defineContainer('pop-toggle', defineCusto
     'popChange',
     'popFocus',
     'popBlur'
-], 'checked', 'pop-change') : defineStencilSSRComponent({
-    tagName: 'pop-toggle',
-    hydrateModule: import('@poppy-ui/core/hydrate'),
-    props: {
-        'name': [String, "name"],
-        'value': [String, "value"],
-        'required': [Boolean, "required"],
-        'readonly': [Boolean, "readonly"],
-        'checked': [Boolean, "checked"],
-        'indeterminate': [Boolean, "indeterminate"],
-        'disabled': [Boolean, "disabled"],
-        'color': [String, "color"],
-        'size': [String, "size"],
-        'onPopChange': [Function],
-        'onPopFocus': [Function],
-        'onPopBlur': [Function]
-    }
-});
-const PopTooltip =  globalThis.window ? defineContainer('pop-tooltip', defineCustomElement$z, [
+], 'checked', 'pop-change');
+const PopTooltip = /*@__PURE__*/ defineContainer('pop-tooltip', defineCustomElement$z, [
     'value',
     'color',
     'position',
     'open'
-]) : defineStencilSSRComponent({
-    tagName: 'pop-tooltip',
-    hydrateModule: import('@poppy-ui/core/hydrate'),
-    props: {
-        'value': [String, "value"],
-        'color': [String, "color"],
-        'position': [String, "position"],
-        'open': [Boolean, "open"]
-    }
-});
+]);
 
 const toKebabCase = (eventName) => {
     return eventName.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();