@ionic/core 8.8.7-dev.11779467048.1641d05e → 8.8.7-dev.11779921691.1777274a

package/dist/cjs/ion-col_3.cjs.entry.js

@@ -3,10 +3,9 @@
  */
 'use strict';
 
-var index = require('./index-CzcLEdQ5.js');
-var ionicGlobal = require('./ionic-global-CSEbHD_F.js');
+var focusVisible = require('./index-BDthk8R7.js');
+var ionicGlobal = require('./ionic-global-DMWqcBn0.js');
 
-// TODO(FW-7285): Replace with global breakpoints
 const SIZE_TO_MEDIA = {
     xs: '(min-width: 0px)',
     sm: '(min-width: 576px)',
@@ -30,15 +29,14 @@ const matchBreakpoint = (breakpoint) => {
 
 const colCss = () => `:host{--col-unit-size:calc(     (100% - (var(--ion-grid-columns, 12) - 1) * var(--ion-grid-gap, 0px)) / var(--ion-grid-columns, 12)   );-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));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;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;-ms-flex:1;flex:1;min-height:1px;overflow:auto}@media (min-width: 576px){:host{-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));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))}}@media (min-width: 768px){:host{-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));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))}}@media (min-width: 992px){:host{-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));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))}}@media (min-width: 1200px){:host{-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));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))}}:host(.ion-grid-col-auto){-ms-flex:0 0 auto;flex:0 0 auto}:host([class^=ion-grid-col--]),:host([class*=" ion-grid-col--"]){-ms-flex:0 0 calc(var(--ion-grid-col-span) * var(--col-unit-size) + (var(--ion-grid-col-span) - 1) * var(--ion-grid-gap, 0px));flex:0 0 calc(var(--ion-grid-col-span) * var(--col-unit-size) + (var(--ion-grid-col-span) - 1) * var(--ion-grid-gap, 0px));max-width:calc(var(--ion-grid-col-span) * var(--col-unit-size) + (var(--ion-grid-col-span) - 1) * var(--ion-grid-gap, 0px))}:host([class^=ion-grid-offset-col--]),:host([class*=" ion-grid-offset-col--"]){--margin-calc:calc(     var(--col-unit-size) * var(--ion-grid-col-margin) + (var(--ion-grid-gap, 0px) * var(--ion-grid-col-margin))   );-webkit-margin-start:var(--margin-calc);margin-inline-start:var(--margin-calc);-webkit-margin-end:0;margin-inline-end:0}:host(.ion-grid-col--1){--ion-grid-col-span:1}:host(.ion-grid-order-col--1){-ms-flex-order:1;order:1}:host(.ion-grid-offset-col--1){--ion-grid-col-margin:1}:host(.ion-grid-col--2){--ion-grid-col-span:2}:host(.ion-grid-order-col--2){-ms-flex-order:2;order:2}:host(.ion-grid-offset-col--2){--ion-grid-col-margin:2}:host(.ion-grid-col--3){--ion-grid-col-span:3}:host(.ion-grid-order-col--3){-ms-flex-order:3;order:3}:host(.ion-grid-offset-col--3){--ion-grid-col-margin:3}:host(.ion-grid-col--4){--ion-grid-col-span:4}:host(.ion-grid-order-col--4){-ms-flex-order:4;order:4}:host(.ion-grid-offset-col--4){--ion-grid-col-margin:4}:host(.ion-grid-col--5){--ion-grid-col-span:5}:host(.ion-grid-order-col--5){-ms-flex-order:5;order:5}:host(.ion-grid-offset-col--5){--ion-grid-col-margin:5}:host(.ion-grid-col--6){--ion-grid-col-span:6}:host(.ion-grid-order-col--6){-ms-flex-order:6;order:6}:host(.ion-grid-offset-col--6){--ion-grid-col-margin:6}:host(.ion-grid-col--7){--ion-grid-col-span:7}:host(.ion-grid-order-col--7){-ms-flex-order:7;order:7}:host(.ion-grid-offset-col--7){--ion-grid-col-margin:7}:host(.ion-grid-col--8){--ion-grid-col-span:8}:host(.ion-grid-order-col--8){-ms-flex-order:8;order:8}:host(.ion-grid-offset-col--8){--ion-grid-col-margin:8}:host(.ion-grid-col--9){--ion-grid-col-span:9}:host(.ion-grid-order-col--9){-ms-flex-order:9;order:9}:host(.ion-grid-offset-col--9){--ion-grid-col-margin:9}:host(.ion-grid-col--10){--ion-grid-col-span:10}:host(.ion-grid-order-col--10){-ms-flex-order:10;order:10}:host(.ion-grid-offset-col--10){--ion-grid-col-margin:10}:host(.ion-grid-col--11){--ion-grid-col-span:11}:host(.ion-grid-order-col--11){-ms-flex-order:11;order:11}:host(.ion-grid-offset-col--11){--ion-grid-col-margin:11}:host(.ion-grid-col--12){--ion-grid-col-span:12}:host(.ion-grid-order-col--12){-ms-flex-order:12;order:12}:host(.ion-grid-offset-col--12){--ion-grid-col-margin:12}`;
 
-// TODO(FW-7285): Replace with global breakpoints
 // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
 const BREAKPOINTS = ['', 'xs', 'sm', 'md', 'lg', 'xl'];
 const Col = class {
     constructor(hostRef) {
-        index.registerInstance(this, hostRef);
+        focusVisible.registerInstance(this, hostRef);
     }
     onResize() {
-        index.forceUpdate(this);
+        focusVisible.forceUpdate(this);
     }
     // Loop through all of the breakpoints to see if the media query
     // matches and grab the column value from the relevant prop if so
@@ -97,7 +95,7 @@ const Col = class {
             this.pushSm ||
             this.pushXl ||
             this.pushXs) {
-            index.printIonWarning('[ion-col] - The pull and push properties are deprecated and no longer work, in favor of the order and size properties.', this.el);
+            focusVisible.printIonWarning('[ion-col] - The pull and push properties are deprecated and no longer work, in favor of the order and size properties.', this.el);
         }
     }
     render() {
@@ -105,14 +103,14 @@ const Col = class {
         const colSize = this.getSizeClass();
         const colOrder = this.getOrderClass();
         const colOffset = this.getOffsetClass();
-        return (index.h(index.Host, { key: '7fc98e15bd75e9c22fe7eaf71f2f49f5d987613a', class: {
+        return (focusVisible.h(focusVisible.Host, { key: '4620a4eb3c94f744d6169ae9d4cc43e86a271a52', class: {
                 [theme]: true,
                 [`${colSize}`]: colSize !== undefined,
                 [`${colOrder}`]: colOrder !== undefined,
                 [`${colOffset}`]: colOffset !== undefined,
-            } }, index.h("slot", { key: '6ed04a2c2bcdb0400354368c568e58414a60fc39' })));
+            } }, focusVisible.h("slot", { key: '5c3be98deed2050634396339b7787f2770a05d35' })));
     }
-    get el() { return index.getElement(this); }
+    get el() { return focusVisible.getElement(this); }
 };
 Col.style = colCss();
 
@@ -120,7 +118,7 @@ const gridCss = () => `:host{-webkit-padding-start:var(--ion-grid-padding-xs, va
 
 const Grid = class {
     constructor(hostRef) {
-        index.registerInstance(this, hostRef);
+        focusVisible.registerInstance(this, hostRef);
         /**
          * If `true`, the grid will have a fixed width based on the screen size.
          */
@@ -128,10 +126,10 @@ const Grid = class {
     }
     render() {
         const theme = ionicGlobal.getIonTheme(this);
-        return (index.h(index.Host, { key: '43b4e05ef076160d901c70dc37e177f19b524349', class: {
+        return (focusVisible.h(focusVisible.Host, { key: 'cd55886cabaeab57e3b13193381b196bec2f07f8', class: {
                 [theme]: true,
                 'grid-fixed': this.fixed,
-            } }, index.h("slot", { key: 'f3805936034708e6783223ded72c0ecfd40e5fb0' })));
+            } }, focusVisible.h("slot", { key: 'c9b95999e6a274a8a0c997451c0be45b1304d77b' })));
     }
 };
 Grid.style = gridCss();
@@ -140,13 +138,13 @@ const rowCss = () => `:host{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;
 
 const Row = class {
     constructor(hostRef) {
-        index.registerInstance(this, hostRef);
+        focusVisible.registerInstance(this, hostRef);
     }
     render() {
         const theme = ionicGlobal.getIonTheme(this);
-        return (index.h(index.Host, { key: '64ff6346d95be8d99d6500a6263067081f3fe254', class: {
+        return (focusVisible.h(focusVisible.Host, { key: '6f5dd5032485a69ddf9510e2e539a7ba90afda47', class: {
                 [theme]: true,
-            } }, index.h("slot", { key: 'e9b4c111f3a49515a721bf679ef2f1a039c9822a' })));
+            } }, focusVisible.h("slot", { key: '994dcbbc871d606b61ff5993fb29aa1fa349c483' })));
     }
 };
 Row.style = rowCss();

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

@@ -3,22 +3,19 @@
  */
 'use strict';
 
-var index = require('./index-CzcLEdQ5.js');
-var helpers = require('./helpers-DJYxKN5U.js');
-var theme = require('./theme-IlOsGAz7.js');
-var ionicGlobal = require('./ionic-global-CSEbHD_F.js');
-var data = require('./data-DuOuKG7I.js');
-require('./focus-visible-BIj-I3-C.js');
+var focusVisible = require('./index-BDthk8R7.js');
+var ionicGlobal = require('./ionic-global-DMWqcBn0.js');
+var data = require('./data-BsQBKyvn.js');
 
-const ionicDatetimeButtonMdCss = () => `:host{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}:host button{border-radius:8px;-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:2px;margin-inline-end:2px;margin-top:0px;margin-bottom:0px;position:relative;-webkit-transition:150ms color ease-in-out;transition:150ms color ease-in-out;border:none;background:var(--ion-color-step-300, var(--ion-background-color-step-300, #edeef0));color:var(--ion-text-color, #000);font-family:inherit;font-size:1rem;cursor:pointer;overflow:hidden;-webkit-appearance:none;-moz-appearance:none;appearance:none}: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}:host button{-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px;padding-top:6px;padding-bottom:6px}`;
+const ionicDatetimeButtonMdCss = () => `:host{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}:host button{border-radius:8px;-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:2px;margin-inline-end:2px;margin-top:0px;margin-bottom:0px;position:relative;-webkit-transition:150ms color ease-in-out;transition:150ms color ease-in-out;border:none;background:var(--ion-background-color-step-300, #edeef0);color:var(--ion-text-color, #000);font-family:inherit;font-size:1rem;cursor:pointer;overflow:hidden;-webkit-appearance:none;-moz-appearance:none;appearance:none}: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}:host button{-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px;padding-top:6px;padding-bottom:6px}`;
 
-const datetimeButtonIosCss = () => `:host{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}:host button{border-radius:8px;-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:2px;margin-inline-end:2px;margin-top:0px;margin-bottom:0px;position:relative;-webkit-transition:150ms color ease-in-out;transition:150ms color ease-in-out;border:none;background:var(--ion-color-step-300, var(--ion-background-color-step-300, #edeef0));color:var(--ion-text-color, #000);font-family:inherit;font-size:1rem;cursor:pointer;overflow:hidden;-webkit-appearance:none;-moz-appearance:none;appearance:none}: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}:host button{-webkit-padding-start:13px;padding-inline-start:13px;-webkit-padding-end:13px;padding-inline-end:13px;padding-top:7px;padding-bottom:7px}:host button.ion-activated{color:var(--ion-color-step-600, var(--ion-text-color-step-400, #666666))}`;
+const datetimeButtonIosCss = () => `:host{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}:host button{border-radius:8px;-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:2px;margin-inline-end:2px;margin-top:0px;margin-bottom:0px;position:relative;-webkit-transition:150ms color ease-in-out;transition:150ms color ease-in-out;border:none;background:var(--ion-background-color-step-300, #edeef0);color:var(--ion-text-color, #000);font-family:inherit;font-size:1rem;cursor:pointer;overflow:hidden;-webkit-appearance:none;-moz-appearance:none;appearance:none}: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}:host button{-webkit-padding-start:13px;padding-inline-start:13px;-webkit-padding-end:13px;padding-inline-end:13px;padding-top:7px;padding-bottom:7px}:host button.ion-activated{color:var(--ion-text-color-step-400, #666666)}`;
 
-const datetimeButtonMdCss = () => `:host{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}:host button{border-radius:8px;-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:2px;margin-inline-end:2px;margin-top:0px;margin-bottom:0px;position:relative;-webkit-transition:150ms color ease-in-out;transition:150ms color ease-in-out;border:none;background:var(--ion-color-step-300, var(--ion-background-color-step-300, #edeef0));color:var(--ion-text-color, #000);font-family:inherit;font-size:1rem;cursor:pointer;overflow:hidden;-webkit-appearance:none;-moz-appearance:none;appearance:none}: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}:host button{-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px;padding-top:6px;padding-bottom:6px}`;
+const datetimeButtonMdCss = () => `:host{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}:host button{border-radius:8px;-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:2px;margin-inline-end:2px;margin-top:0px;margin-bottom:0px;position:relative;-webkit-transition:150ms color ease-in-out;transition:150ms color ease-in-out;border:none;background:var(--ion-background-color-step-300, #edeef0);color:var(--ion-text-color, #000);font-family:inherit;font-size:1rem;cursor:pointer;overflow:hidden;-webkit-appearance:none;-moz-appearance:none;appearance:none}: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}:host button{-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px;padding-top:6px;padding-bottom:6px}`;
 
 const DatetimeButton = class {
     constructor(hostRef) {
-        index.registerInstance(this, hostRef);
+        focusVisible.registerInstance(this, hostRef);
         this.datetimeEl = null;
         this.overlayEl = null;
         this.datetimePresentation = 'date-time';
@@ -100,7 +97,7 @@ const DatetimeButton = class {
                                 headerText = titleSelectedDatesFormatter(parsedValues);
                             }
                             catch (e) {
-                                index.printIonError('[ion-datetime-button] - Exception in provided `titleSelectedDatesFormatter`:', e);
+                                focusVisible.printIonError('[ion-datetime-button] - Exception in provided `titleSelectedDatesFormatter`:', e);
                             }
                         }
                         this.dateText = headerText;
@@ -134,7 +131,7 @@ const DatetimeButton = class {
                 return Promise.resolve();
             }
             return new Promise((resolve) => {
-                helpers.addEventListener(datetimeEl, 'ionRender', resolve, { once: true });
+                focusVisible.addEventListener(datetimeEl, 'ionRender', resolve, { once: true });
             });
         };
         this.handleDateClick = async (ev) => {
@@ -252,12 +249,12 @@ const DatetimeButton = class {
     async componentWillLoad() {
         const { datetime } = this;
         if (!datetime) {
-            index.printIonError('[ion-datetime-button] - An ID associated with an ion-datetime instance is required to function properly.', this.el);
+            focusVisible.printIonError('[ion-datetime-button] - An ID associated with an ion-datetime instance is required to function properly.', this.el);
             return;
         }
         const datetimeEl = (this.datetimeEl = document.getElementById(datetime));
         if (!datetimeEl) {
-            index.printIonError(`[ion-datetime-button] - No ion-datetime instance found for ID '${datetime}'.`, this.el);
+            focusVisible.printIonError(`[ion-datetime-button] - No ion-datetime instance found for ID '${datetime}'.`, this.el);
             return;
         }
         /**
@@ -265,7 +262,7 @@ const DatetimeButton = class {
          * if a non-datetime element was provided.
          */
         if (datetimeEl.tagName !== 'ION-DATETIME') {
-            index.printIonError(`[ion-datetime-button] - Expected an ion-datetime instance for ID '${datetime}' but received '${datetimeEl.tagName.toLowerCase()}' instead.`, datetimeEl);
+            focusVisible.printIonError(`[ion-datetime-button] - Expected an ion-datetime instance for ID '${datetime}' but received '${datetimeEl.tagName.toLowerCase()}' instead.`, datetimeEl);
             return;
         }
         /**
@@ -299,7 +296,7 @@ const DatetimeButton = class {
         if (overlayEl) {
             overlayEl.classList.add('ion-datetime-button-overlay');
         }
-        helpers.componentOnReady(datetimeEl, () => {
+        focusVisible.componentOnReady(datetimeEl, () => {
             const datetimePresentation = (this.datetimePresentation = datetimeEl.presentation || 'date-time');
             /**
              * Set the initial display
@@ -312,7 +309,7 @@ const DatetimeButton = class {
              * text in the buttons.
              */
             this.setDateTimeText();
-            helpers.addEventListener(datetimeEl, 'ionValueChange', this.setDateTimeText);
+            focusVisible.addEventListener(datetimeEl, 'ionValueChange', this.setDateTimeText);
             /**
              * Configure the initial selected button
              * in the event that the datetime is displayed
@@ -339,14 +336,14 @@ const DatetimeButton = class {
     }
     render() {
         const { color, dateText, timeText, selectedButton, datetimeActive, disabled } = this;
-        const theme$1 = ionicGlobal.getIonTheme(this);
-        return (index.h(index.Host, { key: '3051e96ef973302ba87c85515660c48b8136cba2', class: theme.createColorClasses(color, {
-                [theme$1]: true,
+        const theme = ionicGlobal.getIonTheme(this);
+        return (focusVisible.h(focusVisible.Host, { key: '3051e96ef973302ba87c85515660c48b8136cba2', class: focusVisible.createColorClasses(color, {
+                [theme]: true,
                 [`${selectedButton}-active`]: datetimeActive,
                 ['datetime-button-disabled']: disabled,
-            }) }, dateText && (index.h("button", { key: 'e3d968bcf0e7c1911bb16076123ffc1daeee62ed', class: "ion-activatable", id: "date-button", "aria-expanded": datetimeActive ? 'true' : 'false', onClick: this.handleDateClick, disabled: disabled, part: "native", ref: (el) => (this.dateTargetEl = el) }, index.h("slot", { key: 'cdf1f60a0e42cd32633563c8256a1132798e47a1', name: "date-target" }, dateText), theme$1 === 'md' && index.h("ion-ripple-effect", { key: '2284ac36fd7522a6a2e9f7f906b2e94c48680045' }))), timeText && (index.h("button", { key: 'e591b668ffd90538716082a3648a50422c24a7c1', class: "ion-activatable", id: "time-button", "aria-expanded": datetimeActive ? 'true' : 'false', onClick: this.handleTimeClick, disabled: disabled, part: "native", ref: (el) => (this.timeTargetEl = el) }, index.h("slot", { key: '5ef09df0f59663bf2437d05e16ef9d1f05ba25bd', name: "time-target" }, timeText), theme$1 === 'md' && index.h("ion-ripple-effect", { key: 'a7b5de6e3d0df722cc62abf0e8a1140463af35b5' })))));
+            }) }, dateText && (focusVisible.h("button", { key: 'e3d968bcf0e7c1911bb16076123ffc1daeee62ed', class: "ion-activatable", id: "date-button", "aria-expanded": datetimeActive ? 'true' : 'false', onClick: this.handleDateClick, disabled: disabled, part: "native", ref: (el) => (this.dateTargetEl = el) }, focusVisible.h("slot", { key: 'cdf1f60a0e42cd32633563c8256a1132798e47a1', name: "date-target" }, dateText), theme === 'md' && focusVisible.h("ion-ripple-effect", { key: '2284ac36fd7522a6a2e9f7f906b2e94c48680045' }))), timeText && (focusVisible.h("button", { key: 'e591b668ffd90538716082a3648a50422c24a7c1', class: "ion-activatable", id: "time-button", "aria-expanded": datetimeActive ? 'true' : 'false', onClick: this.handleTimeClick, disabled: disabled, part: "native", ref: (el) => (this.timeTargetEl = el) }, focusVisible.h("slot", { key: '5ef09df0f59663bf2437d05e16ef9d1f05ba25bd', name: "time-target" }, timeText), theme === 'md' && focusVisible.h("ion-ripple-effect", { key: 'a7b5de6e3d0df722cc62abf0e8a1140463af35b5' })))));
     }
-    get el() { return index.getElement(this); }
+    get el() { return focusVisible.getElement(this); }
 };
 DatetimeButton.style = {
     ionic: ionicDatetimeButtonMdCss(),