@venite/components 0.16.35 → 0.16.37

package/dist/esm/ion-card-content_6.entry.js

@@ -1,12 +1,13 @@
-import { r as registerInstance, h, H as Host, f as forceUpdate, c as createEvent, a as getElement } from './index-67fab020.js';
-import { g as getIonMode } from './ionic-global-6ad8a48f.js';
-import { c as createColorClasses } from './theme-74c22054.js';
-import { f as alertController } from './overlays-5eeb3167.js';
+import { r as registerInstance, h, H as Host, f as forceUpdate, c as createEvent, d as getElement } from './index-034add74.js';
+import { g as getIonMode } from './ionic-global-24253941.js';
+import { c as createColorClasses } from './theme-7ef00c83.js';
+import { f as alertController } from './overlays-59377e10.js';
 import './book-4795ea34.js';
 import { R as Refrain } from './refrain-984f9410.js';
 import { C as Change } from './change-ea574d32.js';
 import { g as getComponentClosestLanguage } from './locale-de430ca1.js';
-import './hardware-back-button-b3b61715.js';
+import './hardware-back-button-fa04d6e9.js';
+import './helpers-af86adf0.js';
 
 const cardContentIosCss = "ion-card-content{display:block;position:relative}.card-content-ios{padding-left:20px;padding-right:20px;padding-top:20px;padding-bottom:20px;font-size:16px;line-height:1.4}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.card-content-ios{padding-left:unset;padding-right:unset;-webkit-padding-start:20px;padding-inline-start:20px;-webkit-padding-end:20px;padding-inline-end:20px}}.card-content-ios h1{margin-left:0;margin-right:0;margin-top:0;margin-bottom:2px;font-size:24px;font-weight:normal}.card-content-ios h2{margin-left:0;margin-right:0;margin-top:2px;margin-bottom:2px;font-size:16px;font-weight:normal}.card-content-ios h3,.card-content-ios h4,.card-content-ios h5,.card-content-ios h6{margin-left:0;margin-right:0;margin-top:2px;margin-bottom:2px;font-size:14px;font-weight:normal}.card-content-ios p{margin-left:0;margin-right:0;margin-top:0;margin-bottom:2px;font-size:14px}ion-card-header+.card-content-ios{padding-top:0}";
 
@@ -21,7 +22,7 @@ const CardContent = class {
     return (h(Host, { class: {
         [mode]: true,
         // Used internally for styling
-        [`card-content-${mode}`]: true
+        [`card-content-${mode}`]: true,
       } }));
   }
 };
@@ -40,7 +41,10 @@ const CardTitle = class {
   }
   render() {
     const mode = getIonMode(this);
-    return (h(Host, { role: "heading", "aria-level": "2", class: Object.assign(Object.assign({}, createColorClasses(this.color)), { 'ion-inherit-color': true, [mode]: true }) }, h("slot", null)));
+    return (h(Host, { role: "heading", "aria-level": "2", class: createColorClasses(this.color, {
+        'ion-inherit-color': true,
+        [mode]: true,
+      }) }, h("slot", null)));
   }
 };
 CardTitle.style = {
@@ -48,31 +52,35 @@ CardTitle.style = {
   md: cardTitleMdCss
 };
 
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
 const SIZE_TO_MEDIA = {
-    'xs': '(min-width: 0px)',
-    'sm': '(min-width: 576px)',
-    'md': '(min-width: 768px)',
-    'lg': '(min-width: 992px)',
-    'xl': '(min-width: 1200px)',
+  xs: '(min-width: 0px)',
+  sm: '(min-width: 576px)',
+  md: '(min-width: 768px)',
+  lg: '(min-width: 992px)',
+  xl: '(min-width: 1200px)',
 };
 // Check if the window matches the media query
 // at the breakpoint passed
 // e.g. matchBreakpoint('sm') => true if screen width exceeds 576px
 const matchBreakpoint = (breakpoint) => {
-    if (breakpoint === undefined || breakpoint === '') {
-        return true;
-    }
-    if (window.matchMedia) {
-        const mediaQuery = SIZE_TO_MEDIA[breakpoint];
-        return window.matchMedia(mediaQuery).matches;
-    }
-    return false;
+  if (breakpoint === undefined || breakpoint === '') {
+    return true;
+  }
+  if (window.matchMedia) {
+    const mediaQuery = SIZE_TO_MEDIA[breakpoint];
+    return window.matchMedia(mediaQuery).matches;
+  }
+  return false;
 };
 
 const colCss = ":host{padding-left:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));padding-right:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));padding-top:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));padding-bottom:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;box-sizing:border-box;position:relative;flex-basis:0;flex-grow:1;width:100%;max-width:100%;min-height:1px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));padding-inline-start:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));-webkit-padding-end:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));padding-inline-end:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px))}}@media (min-width: 576px){:host{padding-left:var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px));padding-right:var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px));padding-top:var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px));padding-bottom:var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px))}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px));padding-inline-start:var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px));-webkit-padding-end:var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px));padding-inline-end:var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px))}}}@media (min-width: 768px){:host{padding-left:var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px));padding-right:var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px));padding-top:var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px));padding-bottom:var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px))}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px));padding-inline-start:var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px));-webkit-padding-end:var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px));padding-inline-end:var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px))}}}@media (min-width: 992px){:host{padding-left:var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px));padding-right:var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px));padding-top:var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px));padding-bottom:var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px))}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px));padding-inline-start:var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px));-webkit-padding-end:var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px));padding-inline-end:var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px))}}}@media (min-width: 1200px){:host{padding-left:var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px));padding-right:var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px));padding-top:var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px));padding-bottom:var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px))}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px));padding-inline-start:var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px));-webkit-padding-end:var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px));padding-inline-end:var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px))}}}";
 
-const win = window;
-const SUPPORTS_VARS = !!(win.CSS && win.CSS.supports && win.CSS.supports('--a: 0'));
+const win = typeof window !== 'undefined' ? window : undefined;
+// eslint-disable-next-line @typescript-eslint/prefer-optional-chain
+const SUPPORTS_VARS = win && !!(win.CSS && win.CSS.supports && win.CSS.supports('--a: 0'));
 const BREAKPOINTS = ['', 'xs', 'sm', 'md', 'lg', 'xl'];
 const Col = class {
   constructor(hostRef) {
@@ -108,17 +116,18 @@ const Col = class {
       return;
     }
     // If the size is set to auto then don't calculate a size
-    const colSize = (columns === 'auto')
+    const colSize = columns === 'auto'
       ? 'auto'
-      // If CSS supports variables we should use the grid columns var
-      : SUPPORTS_VARS ? `calc(calc(${columns} / var(--ion-grid-columns, 12)) * 100%)`
-        // Convert the columns to a percentage by dividing by the total number
-        // of columns (12) and then multiplying by 100
-        : ((columns / 12) * 100) + '%';
+      : // If CSS supports variables we should use the grid columns var
+        SUPPORTS_VARS
+          ? `calc(calc(${columns} / var(--ion-grid-columns, 12)) * 100%)`
+          : // Convert the columns to a percentage by dividing by the total number
+            // of columns (12) and then multiplying by 100
+            (columns / 12) * 100 + '%';
     return {
-      'flex': `0 0 ${colSize}`,
-      'width': `${colSize}`,
-      'max-width': `${colSize}`
+      flex: `0 0 ${colSize}`,
+      width: `${colSize}`,
+      'max-width': `${colSize}`,
     };
   }
   // Called by push, pull, and offset since they use the same calculations
@@ -130,13 +139,15 @@ const Col = class {
     // If the number of columns passed are greater than 0 and less than
     // 12 we can position the column, else default to auto
     const amount = SUPPORTS_VARS
-      // If CSS supports variables we should use the grid columns var
-      ? `calc(calc(${columns} / var(--ion-grid-columns, 12)) * 100%)`
-      // Convert the columns to a percentage by dividing by the total number
-      // of columns (12) and then multiplying by 100
-      : (columns > 0 && columns < 12) ? (columns / 12 * 100) + '%' : 'auto';
+      ? // If CSS supports variables we should use the grid columns var
+        `calc(calc(${columns} / var(--ion-grid-columns, 12)) * 100%)`
+      : // Convert the columns to a percentage by dividing by the total number
+        // of columns (12) and then multiplying by 100
+        columns > 0 && columns < 12
+          ? (columns / 12) * 100 + '%'
+          : 'auto';
     return {
-      [modifier]: amount
+      [modifier]: amount,
     };
   }
   calculateOffset(isRTL) {
@@ -152,7 +163,7 @@ const Col = class {
     const isRTL = document.dir === 'rtl';
     const mode = getIonMode(this);
     return (h(Host, { class: {
-        [mode]: true
+        [mode]: true,
       }, style: Object.assign(Object.assign(Object.assign(Object.assign({}, this.calculateOffset(isRTL)), this.calculatePull(isRTL)), this.calculatePush(isRTL)), this.calculateSize()) }, h("slot", null)));
   }
 };
@@ -172,7 +183,7 @@ const Grid = class {
     const mode = getIonMode(this);
     return (h(Host, { class: {
         [mode]: true,
-        'grid-fixed': this.fixed
+        'grid-fixed': this.fixed,
       } }, h("slot", null)));
   }
 };

package/dist/esm/ion-card-subtitle.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, H as Host } from './index-67fab020.js';
-import { g as getIonMode } from './ionic-global-6ad8a48f.js';
-import { c as createColorClasses } from './theme-74c22054.js';
+import { r as registerInstance, h, H as Host } from './index-034add74.js';
+import { g as getIonMode } from './ionic-global-24253941.js';
+import { c as createColorClasses } from './theme-7ef00c83.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}";
 
@@ -12,7 +12,10 @@ const CardSubtitle = class {
   }
   render() {
     const mode = getIonMode(this);
-    return (h(Host, { role: "heading", "aria-level": "3", class: Object.assign(Object.assign({}, createColorClasses(this.color)), { 'ion-inherit-color': true, [mode]: true }) }, h("slot", null)));
+    return (h(Host, { role: "heading", "aria-level": "3", class: createColorClasses(this.color, {
+        'ion-inherit-color': true,
+        [mode]: true,
+      }) }, h("slot", null)));
   }
 };
 CardSubtitle.style = {

package/dist/esm/ion-card_2.entry.js

@@ -1,10 +1,10 @@
-import { r as registerInstance, h, H as Host } from './index-67fab020.js';
-import { g as getIonMode } from './ionic-global-6ad8a48f.js';
-import { o as openURL, c as createColorClasses } from './theme-74c22054.js';
+import { r as registerInstance, h, H as Host } from './index-034add74.js';
+import { g as getIonMode } from './ionic-global-24253941.js';
+import { o as openURL, c as createColorClasses } from './theme-7ef00c83.js';
 
-const cardIosCss = ":host{--ion-safe-area-left:0px;--ion-safe-area-right:0px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;position:relative;background:var(--background);color:var(--color);font-family:var(--ion-font-family, inherit);overflow:hidden}:host(.ion-color){background:var(--ion-color-base);color:var(--ion-color-contrast)}:host(.card-disabled){cursor:default;opacity:0.3;pointer-events:none}.card-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:block;width:100%;min-height:var(--min-height);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);outline:none;background:inherit}.card-native::-moz-focus-inner{border:0}button,a{cursor:pointer;user-select:none;-webkit-user-drag:none}ion-ripple-effect{color:var(--ripple-color)}:host{--background:var(--ion-item-background, var(--ion-background-color, #fff));--color:var(--ion-color-step-600, #666666);margin-left:16px;margin-right:16px;margin-top:24px;margin-bottom:24px;border-radius:8px;transform:translateZ(0);transition:transform 500ms cubic-bezier(0.12, 0.72, 0.29, 1);font-size:14px;box-shadow:0 4px 16px rgba(0, 0, 0, 0.12)}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{margin-left:unset;margin-right:unset;-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:16px;margin-inline-end:16px}}:host(.ion-activated){transform:scale3d(0.97, 0.97, 1)}";
+const cardIosCss = ":host{--ion-safe-area-left:0px;--ion-safe-area-right:0px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;position:relative;background:var(--background);color:var(--color);font-family:var(--ion-font-family, inherit);overflow:hidden}:host(.ion-color){background:var(--ion-color-base);color:var(--ion-color-contrast)}:host(.card-disabled){cursor:default;opacity:0.3;pointer-events:none}.card-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:block;width:100%;min-height:var(--min-height);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);outline:none;background:inherit}.card-native::-moz-focus-inner{border:0}button,a{cursor:pointer;user-select:none;-webkit-user-drag:none}ion-ripple-effect{color:var(--ripple-color)}:host{--background:var(--ion-card-background, var(--ion-item-background, var(--ion-background-color, #fff)));--color:var(--ion-card-color, var(--ion-item-color, var(--ion-color-step-600, #666666)));margin-left:16px;margin-right:16px;margin-top:24px;margin-bottom:24px;border-radius:8px;transform:translateZ(0);transition:transform 500ms cubic-bezier(0.12, 0.72, 0.29, 1);font-size:14px;box-shadow:0 4px 16px rgba(0, 0, 0, 0.12)}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{margin-left:unset;margin-right:unset;-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:16px;margin-inline-end:16px}}:host(.ion-activated){transform:scale3d(0.97, 0.97, 1)}";
 
-const cardMdCss = ":host{--ion-safe-area-left:0px;--ion-safe-area-right:0px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;position:relative;background:var(--background);color:var(--color);font-family:var(--ion-font-family, inherit);overflow:hidden}:host(.ion-color){background:var(--ion-color-base);color:var(--ion-color-contrast)}:host(.card-disabled){cursor:default;opacity:0.3;pointer-events:none}.card-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:block;width:100%;min-height:var(--min-height);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);outline:none;background:inherit}.card-native::-moz-focus-inner{border:0}button,a{cursor:pointer;user-select:none;-webkit-user-drag:none}ion-ripple-effect{color:var(--ripple-color)}:host{--background:var(--ion-item-background, var(--ion-background-color, #fff));--color:var(--ion-color-step-550, #737373);margin-left:10px;margin-right:10px;margin-top:10px;margin-bottom:10px;border-radius:4px;font-size:14px;box-shadow:0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12)}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{margin-left:unset;margin-right:unset;-webkit-margin-start:10px;margin-inline-start:10px;-webkit-margin-end:10px;margin-inline-end:10px}}";
+const cardMdCss = ":host{--ion-safe-area-left:0px;--ion-safe-area-right:0px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;position:relative;background:var(--background);color:var(--color);font-family:var(--ion-font-family, inherit);overflow:hidden}:host(.ion-color){background:var(--ion-color-base);color:var(--ion-color-contrast)}:host(.card-disabled){cursor:default;opacity:0.3;pointer-events:none}.card-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:block;width:100%;min-height:var(--min-height);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);outline:none;background:inherit}.card-native::-moz-focus-inner{border:0}button,a{cursor:pointer;user-select:none;-webkit-user-drag:none}ion-ripple-effect{color:var(--ripple-color)}:host{--background:var(--ion-card-background, var(--ion-item-background, var(--ion-background-color, #fff)));--color:var(--ion-card-color, var(--ion-item-color, var(--ion-color-step-550, #737373)));margin-left:10px;margin-right:10px;margin-top:10px;margin-bottom:10px;border-radius:4px;font-size:14px;box-shadow:0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12)}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{margin-left:unset;margin-right:unset;-webkit-margin-start:10px;margin-inline-start:10px;-webkit-margin-end:10px;margin-inline-end:10px}}";
 
 const Card = class {
   constructor(hostRef) {
@@ -28,30 +28,32 @@ const Card = class {
     this.routerDirection = 'forward';
   }
   isClickable() {
-    return (this.href !== undefined || this.button);
+    return this.href !== undefined || this.button;
   }
   renderCard(mode) {
     const clickable = this.isClickable();
     if (!clickable) {
-      return [
-        h("slot", null)
-      ];
+      return [h("slot", null)];
     }
-    const { href, routerDirection } = this;
+    const { href, routerAnimation, routerDirection } = this;
     const TagType = clickable ? (href === undefined ? 'button' : 'a') : 'div';
-    const attrs = (TagType === 'button')
+    const attrs = TagType === 'button'
       ? { type: this.type }
       : {
         download: this.download,
         href: this.href,
         rel: this.rel,
-        target: this.target
+        target: this.target,
       };
-    return (h(TagType, Object.assign({}, attrs, { class: "card-native", disabled: this.disabled, onClick: (ev) => openURL(href, ev, routerDirection) }), h("slot", null), clickable && mode === 'md' && h("ion-ripple-effect", null)));
+    return (h(TagType, Object.assign({}, attrs, { class: "card-native", part: "native", disabled: this.disabled, onClick: (ev) => openURL(href, ev, routerDirection, routerAnimation) }), h("slot", null), clickable && mode === 'md' && h("ion-ripple-effect", null)));
   }
   render() {
     const mode = getIonMode(this);
-    return (h(Host, { class: Object.assign(Object.assign({ [mode]: true }, createColorClasses(this.color)), { 'card-disabled': this.disabled, 'ion-activatable': this.isClickable() }) }, this.renderCard(mode)));
+    return (h(Host, { class: createColorClasses(this.color, {
+        [mode]: true,
+        'card-disabled': this.disabled,
+        'ion-activatable': this.isClickable(),
+      }) }, this.renderCard(mode)));
   }
 };
 Card.style = {
@@ -75,7 +77,11 @@ const CardHeader = class {
   }
   render() {
     const mode = getIonMode(this);
-    return (h(Host, { class: Object.assign(Object.assign({}, createColorClasses(this.color)), { 'card-header-translucent': this.translucent, 'ion-inherit-color': true, [mode]: true }) }, h("slot", null)));
+    return (h(Host, { class: createColorClasses(this.color, {
+        'card-header-translucent': this.translucent,
+        'ion-inherit-color': true,
+        [mode]: true,
+      }) }, h("slot", null)));
   }
 };
 CardHeader.style = {

package/dist/esm/ion-chip.entry.js

@@ -1,10 +1,10 @@
-import { r as registerInstance, h, H as Host } from './index-67fab020.js';
-import { g as getIonMode } from './ionic-global-6ad8a48f.js';
-import { c as createColorClasses } from './theme-74c22054.js';
+import { r as registerInstance, h, H as Host } from './index-034add74.js';
+import { g as getIonMode } from './ionic-global-24253941.js';
+import { c as createColorClasses } from './theme-7ef00c83.js';
 
-const chipIosCss = ":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(.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(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(0, 0, 0, 0.04)}:host(.chip-outline.ion-activated:not(.ion-color)){background:rgba(0, 0, 0, 0.08)}::slotted(ion-icon){font-size:20px}:host(:not(.ion-color)) ::slotted(ion-icon){color:rgba(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 chipIosCss = ":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(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(0, 0, 0, 0.04)}:host(.chip-outline.ion-activated:not(.ion-color)){background:rgba(0, 0, 0, 0.08)}::slotted(ion-icon){font-size:20px}:host(:not(.ion-color)) ::slotted(ion-icon){color:rgba(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 chipMdCss = ":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(.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(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(0, 0, 0, 0.04)}:host(.chip-outline.ion-activated:not(.ion-color)){background:rgba(0, 0, 0, 0.08)}::slotted(ion-icon){font-size:20px}:host(:not(.ion-color)) ::slotted(ion-icon){color:rgba(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 chipMdCss = ":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(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(0, 0, 0, 0.04)}:host(.chip-outline.ion-activated:not(.ion-color)){background:rgba(0, 0, 0, 0.08)}::slotted(ion-icon){font-size:20px}:host(:not(.ion-color)) ::slotted(ion-icon){color:rgba(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 = class {
   constructor(hostRef) {
@@ -13,10 +13,19 @@ const Chip = class {
      * 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, { class: Object.assign(Object.assign({}, createColorClasses(this.color)), { [mode]: true, 'chip-outline': this.outline, 'ion-activatable': true }) }, h("slot", null), mode === 'md' && h("ion-ripple-effect", null)));
+    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)));
   }
 };
 Chip.style = {

package/dist/esm/ion-datetime-button.entry.js

@@ -0,0 +1,308 @@
+import { r as registerInstance, h, H as Host, d as getElement } from './index-034add74.js';
+import { g as getIonMode } from './ionic-global-24253941.js';
+import { b as addEventListener, c as componentOnReady } from './helpers-af86adf0.js';
+import { b as printIonWarning, p as printIonError } from './index-ac6e5d74.js';
+import { c as createColorClasses } from './theme-7ef00c83.js';
+import { p as parseDate, g as getToday, i as is24Hour, a as getLocalizedDateTime, b as getMonthAndYear, c as getLocalizedTime, d as getMonthDayAndYear } from './parse-9ce69067.js';
+
+const iosDatetimeButtonCss = ":host{display:flex;align-items:center;justify-content:center}:host button{border-radius:8px;padding-left:12px;padding-right:12px;padding-top:6px;padding-bottom:6px;margin-left:2px;margin-right:2px;margin-top:0px;margin-bottom:0px;position:relative;transition:150ms color ease-in-out;border:none;background:var(--ion-color-step-300, #edeef0);color:var(--ion-text-color, #000);font-family:inherit;font-size:inherit;cursor:pointer;appearance:none;overflow:hidden}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host button{padding-left:unset;padding-right:unset;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px}}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host button{margin-left:unset;margin-right:unset;-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:2px;margin-inline-end:2px}}:host(.time-active) #time-button,:host(.date-active) #date-button{color:var(--ion-color-base)}:host(.datetime-button-disabled){pointer-events:none}:host(.datetime-button-disabled) button{opacity:0.4}";
+
+const mdDatetimeButtonCss = ":host{display:flex;align-items:center;justify-content:center}:host button{border-radius:8px;padding-left:12px;padding-right:12px;padding-top:6px;padding-bottom:6px;margin-left:2px;margin-right:2px;margin-top:0px;margin-bottom:0px;position:relative;transition:150ms color ease-in-out;border:none;background:var(--ion-color-step-300, #edeef0);color:var(--ion-text-color, #000);font-family:inherit;font-size:inherit;cursor:pointer;appearance:none;overflow:hidden}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host button{padding-left:unset;padding-right:unset;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px}}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host button{margin-left:unset;margin-right:unset;-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:2px;margin-inline-end:2px}}:host(.time-active) #time-button,:host(.date-active) #date-button{color:var(--ion-color-base)}:host(.datetime-button-disabled){pointer-events:none}:host(.datetime-button-disabled) button{opacity:0.4}";
+
+const DatetimeButton = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.datetimeEl = null;
+    this.overlayEl = null;
+    this.datetimePresentation = 'date-time';
+    this.datetimeActive = false;
+    /**
+     * The color to use from your application's color palette.
+     * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
+     * For more information on colors, see [theming](/docs/theming/basics).
+     */
+    this.color = 'primary';
+    /**
+     * If `true`, the user cannot interact with the button.
+     */
+    this.disabled = false;
+    /**
+     * Check the value property on the linked
+     * ion-datetime and then format it according
+     * to the locale specified on ion-datetime.
+     */
+    this.setDateTimeText = () => {
+      const { datetimeEl, datetimePresentation } = this;
+      if (!datetimeEl) {
+        return;
+      }
+      const { value, locale, hourCycle, preferWheel, multiple } = datetimeEl;
+      if (multiple) {
+        printIonWarning(`Multi-date selection cannot be used with ion-datetime-button.
+
+Please upvote https://github.com/ionic-team/ionic-framework/issues/25668 if you are interested in seeing this functionality added.
+      `, this.el);
+        return;
+      }
+      /**
+       * Both ion-datetime and ion-datetime-button default
+       * to today's date and time if no value is set.
+       */
+      const parsedDatetime = parseDate(value || getToday());
+      const use24Hour = is24Hour(locale, hourCycle);
+      // TODO(FW-1865) - Remove once FW-1831 is fixed.
+      parsedDatetime.tzOffset = undefined;
+      this.dateText = this.timeText = undefined;
+      switch (datetimePresentation) {
+        case 'date-time':
+        case 'time-date':
+          const dateText = getMonthDayAndYear(locale, parsedDatetime);
+          const timeText = getLocalizedTime(locale, parsedDatetime, use24Hour);
+          if (preferWheel) {
+            this.dateText = `${dateText} ${timeText}`;
+          }
+          else {
+            this.dateText = dateText;
+            this.timeText = timeText;
+          }
+          break;
+        case 'date':
+          this.dateText = getMonthDayAndYear(locale, parsedDatetime);
+          break;
+        case 'time':
+          this.timeText = getLocalizedTime(locale, parsedDatetime, use24Hour);
+          break;
+        case 'month-year':
+          this.dateText = getMonthAndYear(locale, parsedDatetime);
+          break;
+        case 'month':
+          this.dateText = getLocalizedDateTime(locale, parsedDatetime, { month: 'long' });
+          break;
+        case 'year':
+          this.dateText = getLocalizedDateTime(locale, parsedDatetime, { year: 'numeric' });
+          break;
+      }
+    };
+    /**
+     * Waits for the ion-datetime to re-render.
+     * This is needed in order to correctly position
+     * a popover relative to the trigger element.
+     */
+    this.waitForDatetimeChanges = async () => {
+      const { datetimeEl } = this;
+      if (!datetimeEl) {
+        return Promise.resolve();
+      }
+      return new Promise((resolve) => {
+        addEventListener(datetimeEl, 'ionRender', resolve, { once: true });
+      });
+    };
+    this.handleDateClick = async (ev) => {
+      const { datetimeEl, datetimePresentation } = this;
+      if (!datetimeEl) {
+        return;
+      }
+      let needsPresentationChange = false;
+      /**
+       * When clicking the date button,
+       * we need to make sure that only a date
+       * picker is displayed. For presentation styles
+       * that display content other than a date picker,
+       * we need to update the presentation style.
+       */
+      switch (datetimePresentation) {
+        case 'date-time':
+        case 'time-date':
+          const needsChange = datetimeEl.presentation !== 'date';
+          /**
+           * The date+time wheel picker
+           * shows date and time together,
+           * so do not adjust the presentation
+           * in that case.
+           */
+          if (!datetimeEl.preferWheel && needsChange) {
+            datetimeEl.presentation = 'date';
+            needsPresentationChange = true;
+          }
+          break;
+      }
+      /**
+       * Track which button was clicked
+       * so that it can have the correct
+       * activated styles applied when
+       * the modal/popover containing
+       * the datetime is opened.
+       */
+      this.selectedButton = 'date';
+      this.presentOverlay(ev, needsPresentationChange, this.dateTargetEl);
+    };
+    this.handleTimeClick = (ev) => {
+      const { datetimeEl, datetimePresentation } = this;
+      if (!datetimeEl) {
+        return;
+      }
+      let needsPresentationChange = false;
+      /**
+       * When clicking the time button,
+       * we need to make sure that only a time
+       * picker is displayed. For presentation styles
+       * that display content other than a time picker,
+       * we need to update the presentation style.
+       */
+      switch (datetimePresentation) {
+        case 'date-time':
+        case 'time-date':
+          const needsChange = datetimeEl.presentation !== 'time';
+          if (needsChange) {
+            datetimeEl.presentation = 'time';
+            needsPresentationChange = true;
+          }
+          break;
+      }
+      /**
+       * Track which button was clicked
+       * so that it can have the correct
+       * activated styles applied when
+       * the modal/popover containing
+       * the datetime is opened.
+       */
+      this.selectedButton = 'time';
+      this.presentOverlay(ev, needsPresentationChange, this.timeTargetEl);
+    };
+    /**
+     * If the datetime is presented in an
+     * overlay, the datetime and overlay
+     * should be appropriately sized.
+     * These classes provide default sizing values
+     * that developers can customize.
+     * The goal is to provide an overlay that is
+     * reasonably sized with a datetime that
+     * fills the entire container.
+     */
+    this.presentOverlay = async (ev, needsPresentationChange, triggerEl) => {
+      const { overlayEl } = this;
+      if (!overlayEl) {
+        return;
+      }
+      if (overlayEl.tagName === 'ION-POPOVER') {
+        /**
+         * When the presentation on datetime changes,
+         * we need to wait for the component to re-render
+         * otherwise the computed width/height of the
+         * popover content will be wrong, causing
+         * the popover to not align with the trigger element.
+         */
+        if (needsPresentationChange) {
+          await this.waitForDatetimeChanges();
+        }
+        /**
+         * We pass the trigger button element
+         * so that the popover aligns with the individual
+         * button that was clicked, not the component container.
+         */
+        overlayEl.present(Object.assign(Object.assign({}, ev), { detail: {
+            ionShadowTarget: triggerEl,
+          } }));
+      }
+      else {
+        overlayEl.present();
+      }
+    };
+  }
+  async componentWillLoad() {
+    const { datetime } = this;
+    if (!datetime) {
+      printIonError('An ID associated with an ion-datetime instance is required for ion-datetime-button to function properly.', this.el);
+      return;
+    }
+    const datetimeEl = (this.datetimeEl = document.getElementById(datetime));
+    if (!datetimeEl) {
+      printIonError(`No ion-datetime instance found for ID '${datetime}'.`, this.el);
+      return;
+    }
+    /**
+     * Since the datetime can be used in any context (overlays, accordion, etc)
+     * we track when it is visible to determine when it is active.
+     * This informs which button is highlighted as well as the
+     * aria-expanded state.
+     */
+    const io = new IntersectionObserver((entries) => {
+      const ev = entries[0];
+      this.datetimeActive = ev.isIntersecting;
+    }, {
+      threshold: 0.01,
+    });
+    io.observe(datetimeEl);
+    /**
+     * Get a reference to any modal/popover
+     * the datetime is being used in so we can
+     * correctly size it when it is presented.
+     */
+    const overlayEl = (this.overlayEl = datetimeEl.closest('ion-modal, ion-popover'));
+    /**
+     * The .ion-datetime-button-overlay class contains
+     * styles that allow any modal/popover to be
+     * sized according to the dimensions of the datetime.
+     * If developers want a smaller/larger overlay all they need
+     * to do is change the width/height of the datetime.
+     * Additionally, this lets us avoid having to set
+     * explicit widths on each variant of datetime.
+     */
+    if (overlayEl) {
+      overlayEl.classList.add('ion-datetime-button-overlay');
+    }
+    componentOnReady(datetimeEl, () => {
+      const datetimePresentation = (this.datetimePresentation = datetimeEl.presentation || 'date-time');
+      /**
+       * Set the initial display
+       * in the rendered buttons.
+       *
+       * From there, we need to listen
+       * for ionChange to be emitted
+       * from datetime so we know when
+       * to re-render the displayed
+       * text in the buttons.
+       */
+      this.setDateTimeText();
+      addEventListener(datetimeEl, 'ionChange', this.setDateTimeText);
+      /**
+       * Configure the initial selected button
+       * in the event that the datetime is displayed
+       * without clicking one of the datetime buttons.
+       * For example, a datetime could be expanded
+       * in an accordion. In this case users only
+       * need to click the accordion header to show
+       * the datetime.
+       */
+      switch (datetimePresentation) {
+        case 'date-time':
+        case 'date':
+        case 'month-year':
+        case 'month':
+        case 'year':
+          this.selectedButton = 'date';
+          break;
+        case 'time-date':
+        case 'time':
+          this.selectedButton = 'time';
+          break;
+      }
+    });
+  }
+  render() {
+    const { color, dateText, timeText, selectedButton, datetimeActive, disabled } = this;
+    const mode = getIonMode(this);
+    return (h(Host, { class: createColorClasses(color, {
+        [mode]: true,
+        [`${selectedButton}-active`]: datetimeActive,
+        ['datetime-button-disabled']: disabled,
+      }) }, dateText && (h("button", { class: "ion-activatable", id: "date-button", "aria-expanded": datetimeActive ? 'true' : 'false', onClick: this.handleDateClick, disabled: disabled, part: "native", ref: (el) => (this.dateTargetEl = el) }, h("slot", { name: "date-target" }, dateText), mode === 'md' && h("ion-ripple-effect", null))), timeText && (h("button", { class: "ion-activatable", id: "time-button", "aria-expanded": datetimeActive ? 'true' : 'false', onClick: this.handleTimeClick, disabled: disabled, part: "native", ref: (el) => (this.timeTargetEl = el) }, h("slot", { name: "time-target" }, timeText), mode === 'md' && h("ion-ripple-effect", null)))));
+  }
+  get el() { return getElement(this); }
+};
+DatetimeButton.style = {
+  ios: iosDatetimeButtonCss,
+  md: mdDatetimeButtonCss
+};
+
+export { DatetimeButton as ion_datetime_button };