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

package/dist/components/ion-breadcrumb.js

@@ -0,0 +1,135 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { e as ellipsisHorizontal, d as chevronForwardOutline } from './index2.js';
+import { 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$2 } from './icon.js';
+
+const breadcrumbIosCss = ":host{display:flex;flex:0 0 auto;align-items:center;color:var(--color);font-size:16px;font-weight:400;line-height:1.5}.breadcrumb-native{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;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:flex;align-items:center;width:100%;outline:none;background:inherit}:host(.breadcrumb-disabled){cursor:default;opacity:0.5;pointer-events:none}:host(.breadcrumb-active){color:var(--color-active)}:host(.ion-focused){color:var(--color-focused)}:host(.ion-focused) .breadcrumb-native{background:var(--background-focused)}@media (any-hover: hover){:host(.ion-activatable:hover){color:var(--color-hover)}:host(.ion-activatable.in-breadcrumbs-color:hover),:host(.ion-activatable.ion-color:hover){color:var(--ion-color-shade)}}.breadcrumb-separator{display:inline-flex}:host(.breadcrumb-collapsed) .breadcrumb-native{display:none}:host(.in-breadcrumbs-color),:host(.in-breadcrumbs-color.breadcrumb-active){color:var(--ion-color-base)}:host(.in-breadcrumbs-color) .breadcrumb-separator{color:var(--ion-color-base)}:host(.ion-color){color:var(--ion-color-base)}:host(.in-toolbar-color),:host(.in-toolbar-color) .breadcrumb-separator{color:rgba(var(--ion-color-contrast-rgb), 0.8)}:host(.in-toolbar-color.breadcrumb-active){color:var(--ion-color-contrast)}.breadcrumbs-collapsed-indicator{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:14px;margin-right:14px;margin-top:0;margin-bottom:0;display:flex;flex:1 1 100%;align-items:center;justify-content:center;width:32px;height:18px;border:0;outline:none;cursor:pointer;appearance:none}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.breadcrumbs-collapsed-indicator{margin-left:unset;margin-right:unset;-webkit-margin-start:14px;margin-inline-start:14px;-webkit-margin-end:14px;margin-inline-end:14px}}.breadcrumbs-collapsed-indicator ion-icon{margin-top:1px;font-size:22px}:host{--color:var(--ion-color-step-850, #2d4665);--color-active:var(--ion-text-color, #03060b);--color-hover:var(--ion-text-color, #03060b);--color-focused:var(--color-active);--background-focused:var(--ion-color-step-50, rgba(233, 237, 243, 0.7))}:host(.breadcrumb-active){font-weight:600}.breadcrumb-native{border-radius:4px;padding-left:12px;padding-right:12px;padding-top:5px;padding-bottom:5px;border:1px solid transparent}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.breadcrumb-native{padding-left:unset;padding-right:unset;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px}}:host(.ion-focused) .breadcrumb-native{border-radius:8px}:host(.in-breadcrumbs-color.ion-focused) .breadcrumb-native,:host(.ion-color.ion-focused) .breadcrumb-native{background:rgba(var(--ion-color-base-rgb), 0.1);color:var(--ion-color-base)}:host(.ion-focused) ::slotted(ion-icon),:host(.in-breadcrumbs-color.ion-focused) ::slotted(ion-icon),:host(.ion-color.ion-focused) ::slotted(ion-icon){color:var(--ion-color-step-750, #445b78)}.breadcrumb-separator{color:var(--ion-color-step-550, #73849a)}::slotted(ion-icon){color:var(--ion-color-step-400, #92a0b3);font-size:18px}::slotted(ion-icon[slot=start]){margin-right:8px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted(ion-icon[slot=start]){margin-right:unset;-webkit-margin-end:8px;margin-inline-end:8px}}::slotted(ion-icon[slot=end]){margin-left:8px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted(ion-icon[slot=end]){margin-left:unset;-webkit-margin-start:8px;margin-inline-start:8px}}:host(.breadcrumb-active) ::slotted(ion-icon){color:var(--ion-color-step-850, #242d39)}.breadcrumbs-collapsed-indicator{border-radius:4px;background:var(--ion-color-step-100, #e9edf3);color:var(--ion-color-step-550, #73849a)}.breadcrumbs-collapsed-indicator:hover{opacity:0.45}.breadcrumbs-collapsed-indicator:focus{background:var(--ion-color-step-150, #d9e0ea)}";
+
+const breadcrumbMdCss = ":host{display:flex;flex:0 0 auto;align-items:center;color:var(--color);font-size:16px;font-weight:400;line-height:1.5}.breadcrumb-native{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;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:flex;align-items:center;width:100%;outline:none;background:inherit}:host(.breadcrumb-disabled){cursor:default;opacity:0.5;pointer-events:none}:host(.breadcrumb-active){color:var(--color-active)}:host(.ion-focused){color:var(--color-focused)}:host(.ion-focused) .breadcrumb-native{background:var(--background-focused)}@media (any-hover: hover){:host(.ion-activatable:hover){color:var(--color-hover)}:host(.ion-activatable.in-breadcrumbs-color:hover),:host(.ion-activatable.ion-color:hover){color:var(--ion-color-shade)}}.breadcrumb-separator{display:inline-flex}:host(.breadcrumb-collapsed) .breadcrumb-native{display:none}:host(.in-breadcrumbs-color),:host(.in-breadcrumbs-color.breadcrumb-active){color:var(--ion-color-base)}:host(.in-breadcrumbs-color) .breadcrumb-separator{color:var(--ion-color-base)}:host(.ion-color){color:var(--ion-color-base)}:host(.in-toolbar-color),:host(.in-toolbar-color) .breadcrumb-separator{color:rgba(var(--ion-color-contrast-rgb), 0.8)}:host(.in-toolbar-color.breadcrumb-active){color:var(--ion-color-contrast)}.breadcrumbs-collapsed-indicator{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:14px;margin-right:14px;margin-top:0;margin-bottom:0;display:flex;flex:1 1 100%;align-items:center;justify-content:center;width:32px;height:18px;border:0;outline:none;cursor:pointer;appearance:none}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.breadcrumbs-collapsed-indicator{margin-left:unset;margin-right:unset;-webkit-margin-start:14px;margin-inline-start:14px;-webkit-margin-end:14px;margin-inline-end:14px}}.breadcrumbs-collapsed-indicator ion-icon{margin-top:1px;font-size:22px}:host{--color:var(--ion-color-step-600, #677483);--color-active:var(--ion-text-color, #03060b);--color-hover:var(--ion-text-color, #03060b);--color-focused:var(--ion-color-step-800, #35404e);--background-focused:$breadcrumb-md-background-focused}:host(.breadcrumb-active){font-weight:500}.breadcrumb-native{padding-left:12px;padding-right:12px;padding-top:6px;padding-bottom:6px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.breadcrumb-native{padding-left:unset;padding-right:unset;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px}}.breadcrumb-separator{margin-left:10px;margin-right:10px;margin-top:-1px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.breadcrumb-separator{margin-left:unset;margin-right:unset;-webkit-margin-start:10px;margin-inline-start:10px;-webkit-margin-end:10px;margin-inline-end:10px}}:host(.ion-focused) .breadcrumb-native{border-radius:4px;box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2), 0px 2px 8px rgba(0, 0, 0, 0.12)}.breadcrumb-separator{color:var(--ion-color-step-550, #73849a)}::slotted(ion-icon){color:var(--ion-color-step-550, #7d8894);font-size:18px}::slotted(ion-icon[slot=start]){margin-right:8px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted(ion-icon[slot=start]){margin-right:unset;-webkit-margin-end:8px;margin-inline-end:8px}}::slotted(ion-icon[slot=end]){margin-left:8px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted(ion-icon[slot=end]){margin-left:unset;-webkit-margin-start:8px;margin-inline-start:8px}}:host(.breadcrumb-active) ::slotted(ion-icon){color:var(--ion-color-step-850, #222d3a)}.breadcrumbs-collapsed-indicator{border-radius:2px;background:var(--ion-color-step-100, #eef1f3);color:var(--ion-color-step-550, #73849a)}.breadcrumbs-collapsed-indicator:hover{opacity:0.7}.breadcrumbs-collapsed-indicator:focus{background:var(--ion-color-step-150, #dfe5e8)}";
+
+const Breadcrumb = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.ionFocus = createEvent(this, "ionFocus", 7);
+    this.ionBlur = createEvent(this, "ionBlur", 7);
+    this.collapsedClick = createEvent(this, "collapsedClick", 7);
+    this.inheritedAttributes = {};
+    /** @internal */
+    this.collapsed = false;
+    /**
+     * If `true`, the breadcrumb will take on a different look to show that
+     * it is the currently active breadcrumb. Defaults to `true` for the
+     * last breadcrumb if it is not set on any.
+     */
+    this.active = false;
+    /**
+     * If `true`, the user cannot interact with the breadcrumb.
+     */
+    this.disabled = false;
+    /**
+     * When using a router, it specifies the transition direction when navigating to
+     * another page using `href`.
+     */
+    this.routerDirection = 'forward';
+    this.onFocus = () => {
+      this.ionFocus.emit();
+    };
+    this.onBlur = () => {
+      this.ionBlur.emit();
+    };
+    this.collapsedIndicatorClick = () => {
+      this.collapsedClick.emit({ ionShadowTarget: this.collapsedRef });
+    };
+  }
+  componentWillLoad() {
+    this.inheritedAttributes = inheritAriaAttributes(this.el);
+  }
+  isClickable() {
+    return this.href !== undefined;
+  }
+  render() {
+    const { color, active, collapsed, disabled, download, el, inheritedAttributes, last, routerAnimation, routerDirection, separator, showCollapsedIndicator, target, } = this;
+    const clickable = this.isClickable();
+    const TagType = this.href === undefined ? 'span' : 'a';
+    // Links can still be tabbed to when set to disabled if they have an href
+    // in order to truly disable them we can keep it as an anchor but remove the href
+    const href = disabled ? undefined : this.href;
+    const mode = getIonMode(this);
+    const attrs = TagType === 'span'
+      ? {}
+      : {
+        download,
+        href,
+        target,
+      };
+    // If the breadcrumb is collapsed, check if it contains the collapsed indicator
+    // to show the separator as long as it isn't also the last breadcrumb
+    // otherwise if not collapsed use the value in separator
+    const showSeparator = last ? false : collapsed ? (showCollapsedIndicator && !last ? true : false) : separator;
+    return (h(Host, { onClick: (ev) => openURL(href, ev, routerDirection, routerAnimation), "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
+        [mode]: true,
+        'breadcrumb-active': active,
+        'breadcrumb-collapsed': collapsed,
+        'breadcrumb-disabled': disabled,
+        'in-breadcrumbs-color': hostContext('ion-breadcrumbs[color]', el),
+        'in-toolbar': hostContext('ion-toolbar', this.el),
+        'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
+        'ion-activatable': clickable,
+        'ion-focusable': clickable,
+      }) }, h(TagType, Object.assign({}, attrs, { class: "breadcrumb-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, inheritedAttributes), h("slot", { name: "start" }), h("slot", null), h("slot", { name: "end" })), showCollapsedIndicator && (h("button", { part: "collapsed-indicator", onClick: () => this.collapsedIndicatorClick(), ref: (collapsedEl) => (this.collapsedRef = collapsedEl), class: {
+        'breadcrumbs-collapsed-indicator': true,
+      } }, h("ion-icon", { icon: ellipsisHorizontal, lazy: false }))), showSeparator && (
+    /**
+     * Separators should not be announced by narrators.
+     * We add aria-hidden on the span so that this applies
+     * to any custom separators too.
+     */
+    h("span", { class: "breadcrumb-separator", part: "separator", "aria-hidden": "true" }, h("slot", { name: "separator" }, mode === 'ios' ? (h("ion-icon", { icon: chevronForwardOutline, lazy: false, "flip-rtl": true })) : (h("span", null, "/")))))));
+  }
+  get el() { return this; }
+  static get style() { return {
+    ios: breadcrumbIosCss,
+    md: breadcrumbMdCss
+  }; }
+}, [33, "ion-breadcrumb", {
+    "collapsed": [4],
+    "last": [4],
+    "showCollapsedIndicator": [4, "show-collapsed-indicator"],
+    "color": [1],
+    "active": [4],
+    "disabled": [4],
+    "download": [1],
+    "href": [1],
+    "rel": [1],
+    "separator": [4],
+    "target": [1],
+    "routerDirection": [1, "router-direction"],
+    "routerAnimation": [16]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ion-breadcrumb", "ion-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ion-breadcrumb":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Breadcrumb);
+      }
+      break;
+    case "ion-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const IonBreadcrumb = Breadcrumb;
+const defineCustomElement = defineCustomElement$1;
+
+export { IonBreadcrumb, defineCustomElement };

package/dist/components/ion-breadcrumbs.js

@@ -0,0 +1,158 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { g as getIonMode } from './ionic-global.js';
+import { c as createColorClasses, h as hostContext } from './theme.js';
+
+const breadcrumbsIosCss = ":host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:flex;flex-wrap:wrap;align-items:center}:host(.in-toolbar-color),:host(.in-toolbar-color) .breadcrumbs-collapsed-indicator ion-icon{color:var(--ion-color-contrast)}:host(.in-toolbar-color) .breadcrumbs-collapsed-indicator{background:rgba(var(--ion-color-contrast-rgb), 0.11)}:host(.in-toolbar){padding-left:20px;padding-right:20px;padding-top:0;padding-bottom:0;justify-content:center}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host(.in-toolbar){padding-left:unset;padding-right:unset;-webkit-padding-start:20px;padding-inline-start:20px;-webkit-padding-end:20px;padding-inline-end:20px}}";
+
+const breadcrumbsMdCss = ":host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:flex;flex-wrap:wrap;align-items:center}:host(.in-toolbar-color),:host(.in-toolbar-color) .breadcrumbs-collapsed-indicator ion-icon{color:var(--ion-color-contrast)}:host(.in-toolbar-color) .breadcrumbs-collapsed-indicator{background:rgba(var(--ion-color-contrast-rgb), 0.11)}:host(.in-toolbar){padding-left:8px;padding-right:8px;padding-top:0;padding-bottom:0}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host(.in-toolbar){padding-left:unset;padding-right:unset;-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px}}";
+
+const Breadcrumbs = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.ionCollapsedClick = createEvent(this, "ionCollapsedClick", 7);
+    /**
+     * The number of breadcrumbs to show before the collapsed indicator.
+     * If `itemsBeforeCollapse` + `itemsAfterCollapse` is greater than `maxItems`,
+     * the breadcrumbs will not be collapsed.
+     */
+    this.itemsBeforeCollapse = 1;
+    /**
+     * The number of breadcrumbs to show after the collapsed indicator.
+     * If `itemsBeforeCollapse` + `itemsAfterCollapse` is greater than `maxItems`,
+     * the breadcrumbs will not be collapsed.
+     */
+    this.itemsAfterCollapse = 1;
+    this.breadcrumbsInit = () => {
+      this.setBreadcrumbSeparator();
+      this.setMaxItems();
+    };
+    this.resetActiveBreadcrumb = () => {
+      const breadcrumbs = this.getBreadcrumbs();
+      // Only reset the active breadcrumb if we were the ones to change it
+      // otherwise use the one set on the component
+      const activeBreadcrumb = breadcrumbs.find((breadcrumb) => breadcrumb.active);
+      if (activeBreadcrumb && this.activeChanged) {
+        activeBreadcrumb.active = false;
+      }
+    };
+    this.setMaxItems = () => {
+      const { itemsAfterCollapse, itemsBeforeCollapse, maxItems } = this;
+      const breadcrumbs = this.getBreadcrumbs();
+      for (const breadcrumb of breadcrumbs) {
+        breadcrumb.showCollapsedIndicator = false;
+        breadcrumb.collapsed = false;
+      }
+      // If the number of breadcrumbs exceeds the maximum number of items
+      // that should show and the items before / after collapse do not
+      // exceed the maximum items then we need to collapse the breadcrumbs
+      const shouldCollapse = maxItems !== undefined && breadcrumbs.length > maxItems && itemsBeforeCollapse + itemsAfterCollapse <= maxItems;
+      if (shouldCollapse) {
+        // Show the collapsed indicator in the first breadcrumb that collapses
+        breadcrumbs.forEach((breadcrumb, index) => {
+          if (index === itemsBeforeCollapse) {
+            breadcrumb.showCollapsedIndicator = true;
+          }
+          // Collapse all breadcrumbs that have an index greater than or equal to
+          // the number before collapse and an index less than the total number
+          // of breadcrumbs minus the items that should show after the collapse
+          if (index >= itemsBeforeCollapse && index < breadcrumbs.length - itemsAfterCollapse) {
+            breadcrumb.collapsed = true;
+          }
+        });
+      }
+    };
+    this.setBreadcrumbSeparator = () => {
+      const { itemsAfterCollapse, itemsBeforeCollapse, maxItems } = this;
+      const breadcrumbs = this.getBreadcrumbs();
+      // Check if an active breadcrumb exists already
+      const active = breadcrumbs.find((breadcrumb) => breadcrumb.active);
+      // Set the separator on all but the last breadcrumb
+      for (const breadcrumb of breadcrumbs) {
+        // The only time the last breadcrumb changes is when
+        // itemsAfterCollapse is set to 0, in this case the
+        // last breadcrumb will be the collapsed indicator
+        const last = maxItems !== undefined && itemsAfterCollapse === 0
+          ? breadcrumb === breadcrumbs[itemsBeforeCollapse]
+          : breadcrumb === breadcrumbs[breadcrumbs.length - 1];
+        breadcrumb.last = last;
+        // If the breadcrumb has defined whether or not to show the
+        // separator then use that value, otherwise check if it's the
+        // last breadcrumb
+        const separator = breadcrumb.separator !== undefined ? breadcrumb.separator : last ? undefined : true;
+        breadcrumb.separator = separator;
+        // If there is not an active breadcrumb already
+        // set the last one to active
+        if (!active && last) {
+          breadcrumb.active = true;
+          this.activeChanged = true;
+        }
+      }
+    };
+    this.getBreadcrumbs = () => {
+      return Array.from(this.el.querySelectorAll('ion-breadcrumb'));
+    };
+    this.slotChanged = () => {
+      this.resetActiveBreadcrumb();
+      this.breadcrumbsInit();
+    };
+  }
+  onCollapsedClick(ev) {
+    const breadcrumbs = this.getBreadcrumbs();
+    const collapsedBreadcrumbs = breadcrumbs.filter((breadcrumb) => breadcrumb.collapsed);
+    this.ionCollapsedClick.emit(Object.assign(Object.assign({}, ev.detail), { collapsedBreadcrumbs }));
+  }
+  maxItemsChanged() {
+    this.resetActiveBreadcrumb();
+    this.breadcrumbsInit();
+  }
+  componentWillLoad() {
+    this.breadcrumbsInit();
+  }
+  render() {
+    const { color, collapsed } = this;
+    const mode = getIonMode(this);
+    return (h(Host, { class: createColorClasses(color, {
+        [mode]: true,
+        'in-toolbar': hostContext('ion-toolbar', this.el),
+        'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
+        'breadcrumbs-collapsed': collapsed,
+      }) }, h("slot", { onSlotchange: this.slotChanged })));
+  }
+  get el() { return this; }
+  static get watchers() { return {
+    "maxItems": ["maxItemsChanged"],
+    "itemsBeforeCollapse": ["maxItemsChanged"],
+    "itemsAfterCollapse": ["maxItemsChanged"]
+  }; }
+  static get style() { return {
+    ios: breadcrumbsIosCss,
+    md: breadcrumbsMdCss
+  }; }
+}, [33, "ion-breadcrumbs", {
+    "color": [1],
+    "maxItems": [2, "max-items"],
+    "itemsBeforeCollapse": [2, "items-before-collapse"],
+    "itemsAfterCollapse": [2, "items-after-collapse"],
+    "collapsed": [32],
+    "activeChanged": [32]
+  }, [[0, "collapsedClick", "onCollapsedClick"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ion-breadcrumbs"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ion-breadcrumbs":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Breadcrumbs);
+      }
+      break;
+  } });
+}
+
+const IonBreadcrumbs = Breadcrumbs;
+const defineCustomElement = defineCustomElement$1;
+
+export { IonBreadcrumbs, defineCustomElement };

package/dist/components/ion-button.js

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

package/dist/components/ion-buttons.js

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

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

@@ -0,0 +1,6 @@
+import { C as CardContent, d as defineCustomElement$1 } from './card-content.js';
+
+const IonCardContent = CardContent;
+const defineCustomElement = defineCustomElement$1;
+
+export { IonCardContent, defineCustomElement };

package/dist/components/ion-card-header.js

@@ -0,0 +1,6 @@
+import { C as CardHeader, d as defineCustomElement$1 } from './card-header.js';
+
+const IonCardHeader = CardHeader;
+const defineCustomElement = defineCustomElement$1;
+
+export { IonCardHeader, defineCustomElement };

package/dist/components/ion-card-subtitle.js

@@ -0,0 +1,46 @@
+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 cardSubtitleIosCss = ":host{display:block;position:relative;color:var(--color)}:host(.ion-color){color:var(--ion-color-base)}:host{--color:var(--ion-color-step-600, #666666);margin-left:0;margin-right:0;margin-top:0;margin-bottom:4px;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;font-size:12px;font-weight:700;letter-spacing:0.4px;text-transform:uppercase}";
+
+const cardSubtitleMdCss = ":host{display:block;position:relative;color:var(--color)}:host(.ion-color){color:var(--ion-color-base)}:host{--color:var(--ion-color-step-550, #737373);margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;font-size:14px;font-weight:500}";
+
+const CardSubtitle = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    const mode = getIonMode(this);
+    return (h(Host, { role: "heading", "aria-level": "3", class: createColorClasses(this.color, {
+        'ion-inherit-color': true,
+        [mode]: true,
+      }) }, h("slot", null)));
+  }
+  static get style() { return {
+    ios: cardSubtitleIosCss,
+    md: cardSubtitleMdCss
+  }; }
+}, [33, "ion-card-subtitle", {
+    "color": [513]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ion-card-subtitle"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ion-card-subtitle":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, CardSubtitle);
+      }
+      break;
+  } });
+}
+
+const IonCardSubtitle = CardSubtitle;
+const defineCustomElement = defineCustomElement$1;
+
+export { IonCardSubtitle, defineCustomElement };

package/dist/components/ion-card-title.js

@@ -0,0 +1,6 @@
+import { C as CardTitle, d as defineCustomElement$1 } from './card-title.js';
+
+const IonCardTitle = CardTitle;
+const defineCustomElement = defineCustomElement$1;
+
+export { IonCardTitle, defineCustomElement };

package/dist/components/ion-card.js

@@ -0,0 +1,6 @@
+import { C as Card, d as defineCustomElement$1 } from './card.js';
+
+const IonCard = Card;
+const defineCustomElement = defineCustomElement$1;
+
+export { IonCard, defineCustomElement };

package/dist/components/ion-checkbox.js

@@ -0,0 +1,6 @@
+import { C as Checkbox, d as defineCustomElement$1 } from './checkbox.js';
+
+const IonCheckbox = Checkbox;
+const defineCustomElement = defineCustomElement$1;
+
+export { IonCheckbox, defineCustomElement };

package/dist/components/ion-chip.js

@@ -0,0 +1,59 @@
+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';
+import { d as defineCustomElement$2 } from './ripple-effect.js';
+
+const chipCss = ":host{--background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.12);--color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.87);border-radius:16px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;margin-left:4px;margin-right:4px;margin-top:4px;margin-bottom:4px;padding-left:12px;padding-right:12px;padding-top:7px;padding-bottom:7px;display:inline-flex;position:relative;align-items:center;height:32px;background:var(--background);color:var(--color);font-family:var(--ion-font-family, inherit);font-size:14px;line-height:1;cursor:pointer;overflow:hidden;vertical-align:middle;box-sizing:border-box}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{margin-left:unset;margin-right:unset;-webkit-margin-start:4px;margin-inline-start:4px;-webkit-margin-end:4px;margin-inline-end:4px}}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{padding-left:unset;padding-right:unset;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px}}:host(.chip-disabled){cursor:default;opacity:0.4;pointer-events:none}:host(.ion-color){background:rgba(var(--ion-color-base-rgb), 0.08);color:var(--ion-color-shade)}:host(.ion-color:focus){background:rgba(var(--ion-color-base-rgb), 0.12)}:host(.ion-color.ion-activated){background:rgba(var(--ion-color-base-rgb), 0.16)}:host(.chip-outline){border-width:1px;border-style:solid}:host(.chip-outline){border-color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.32);background:transparent}:host(.chip-outline.ion-color){border-color:rgba(var(--ion-color-base-rgb), 0.32)}:host(.chip-outline:not(.ion-color):focus){background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.04)}:host(.chip-outline.ion-activated:not(.ion-color)){background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.08)}::slotted(ion-icon){font-size:20px}:host(:not(.ion-color)) ::slotted(ion-icon){color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.54)}::slotted(ion-icon:first-child){margin-left:-4px;margin-right:8px;margin-top:-4px;margin-bottom:-4px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted(ion-icon:first-child){margin-left:unset;margin-right:unset;-webkit-margin-start:-4px;margin-inline-start:-4px;-webkit-margin-end:8px;margin-inline-end:8px}}::slotted(ion-icon:last-child){margin-left:8px;margin-right:-4px;margin-top:-4px;margin-bottom:-4px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted(ion-icon:last-child){margin-left:unset;margin-right:unset;-webkit-margin-start:8px;margin-inline-start:8px;-webkit-margin-end:-4px;margin-inline-end:-4px}}::slotted(ion-avatar){width:24px;height:24px}::slotted(ion-avatar:first-child){margin-left:-8px;margin-right:8px;margin-top:-4px;margin-bottom:-4px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted(ion-avatar:first-child){margin-left:unset;margin-right:unset;-webkit-margin-start:-8px;margin-inline-start:-8px;-webkit-margin-end:8px;margin-inline-end:8px}}::slotted(ion-avatar:last-child){margin-left:8px;margin-right:-8px;margin-top:-4px;margin-bottom:-4px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted(ion-avatar:last-child){margin-left:unset;margin-right:unset;-webkit-margin-start:8px;margin-inline-start:8px;-webkit-margin-end:-8px;margin-inline-end:-8px}}:host(:focus){outline:none}:host(:focus){--background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.16)}:host(.ion-activated){--background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2)}@media (any-hover: hover){:host(:hover){--background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.16)}:host(.ion-color:hover){background:rgba(var(--ion-color-base-rgb), 0.12)}:host(.chip-outline:not(.ion-color):hover){background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.04)}}";
+
+const Chip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+     * Display an outline style button.
+     */
+    this.outline = false;
+    /**
+     * If `true`, the user cannot interact with the chip.
+     */
+    this.disabled = false;
+  }
+  render() {
+    const mode = getIonMode(this);
+    return (h(Host, { "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
+        [mode]: true,
+        'chip-outline': this.outline,
+        'chip-disabled': this.disabled,
+        'ion-activatable': true,
+      }) }, h("slot", null), mode === 'md' && h("ion-ripple-effect", null)));
+  }
+  static get style() { return chipCss; }
+}, [1, "ion-chip", {
+    "color": [513],
+    "outline": [4],
+    "disabled": [4]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ion-chip", "ion-ripple-effect"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ion-chip":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Chip);
+      }
+      break;
+    case "ion-ripple-effect":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const IonChip = Chip;
+const defineCustomElement = defineCustomElement$1;
+
+export { IonChip, defineCustomElement };

package/dist/components/ion-col.js

@@ -0,0 +1,6 @@
+import { C as Col, d as defineCustomElement$1 } from './col.js';
+
+const IonCol = Col;
+const defineCustomElement = defineCustomElement$1;
+
+export { IonCol, defineCustomElement };

package/dist/components/ion-content.js

@@ -0,0 +1,6 @@
+import { C as Content, d as defineCustomElement$1 } from './content.js';
+
+const IonContent = Content;
+const defineCustomElement = defineCustomElement$1;
+
+export { IonContent, defineCustomElement };