@ionic/core 8.7.16-dev.11769699401.1dc7caf4 → 8.7.16-dev.11770318223.1177a6ea

package/dist/cjs/{overlays-CRSQCKrz.js → overlays-CA-nLfRi.js}

@@ -3,10 +3,10 @@
  */
 'use strict';
 
-var ionicGlobal = require('./ionic-global-DpRwOXLK.js');
-var helpers = require('./helpers-DnouLczu.js');
-var index = require('./index-D6Wc6v08.js');
-var frameworkDelegate = require('./framework-delegate-Bwdk9vFS.js');
+var ionicGlobal = require('./ionic-global-Dq_E1GCa.js');
+var helpers = require('./helpers-DF1tCuxf.js');
+var index = require('./index-DjlJwy91.js');
+var frameworkDelegate = require('./framework-delegate-C7fZ8bup.js');
 var gestureController = require('./gesture-controller-dtqlP_q4.js');
 
 /**
@@ -21,7 +21,7 @@ var gestureController = require('./gesture-controller-dtqlP_q4.js');
  * Note: We need this distinction because `disabled="false"` is
  * valid usage for the disabled property on ion-button.
  */
-const focusableQueryString = '[tabindex]:not([tabindex^="-"]):not([hidden]):not([disabled]), input:not([type=hidden]):not([tabindex^="-"]):not([hidden]):not([disabled]), textarea:not([tabindex^="-"]):not([hidden]):not([disabled]), button:not([tabindex^="-"]):not([hidden]):not([disabled]), select:not([tabindex^="-"]):not([hidden]):not([disabled]), ion-checkbox:not([tabindex^="-"]):not([hidden]):not([disabled]), ion-radio:not([tabindex^="-"]):not([hidden]):not([disabled]), .ion-focusable:not([tabindex^="-"]):not([hidden]):not([disabled]), .ion-focusable[disabled="false"]:not([tabindex^="-"]):not([hidden])';
+const focusableQueryString = '[tabindex]:not([tabindex^="-"]):not([hidden]):not([disabled]), input:not([type=hidden]):not([tabindex^="-"]):not([hidden]):not([disabled]), textarea:not([tabindex^="-"]):not([hidden]):not([disabled]), button:not([tabindex^="-"]):not([hidden]):not([disabled]), select:not([tabindex^="-"]):not([hidden]):not([disabled]), ion-checkbox:not([tabindex^="-"]):not([hidden]):not([disabled]), ion-radio:not([tabindex^="-"]):not([hidden]):not([disabled]), ion-textarea:not([tabindex^="-"]):not([hidden]):not([disabled]), .ion-focusable:not([tabindex^="-"]):not([hidden]):not([disabled]), .ion-focusable[disabled="false"]:not([tabindex^="-"]):not([hidden])';
 /**
  * Focuses the first descendant in a context
  * that can receive focus. If none exists,
@@ -73,7 +73,18 @@ const focusElementInContext = (hostToFocus, fallbackElement) => {
     const shadowRoot = hostToFocus === null || hostToFocus === void 0 ? void 0 : hostToFocus.shadowRoot;
     if (shadowRoot) {
         // If there are no inner focusable elements, just focus the host element.
-        elementToFocus = shadowRoot.querySelector(focusableQueryString) || hostToFocus;
+        const innerFocusable = shadowRoot.querySelector(focusableQueryString);
+        // If the host has a setFocus() method, use it to delegate focus properly.
+        // This is needed for shadow DOM components like ion-textarea that override
+        // focus() to delegate to their inner native elements.
+        const hasSetFocus = typeof hostToFocus.setFocus === 'function';
+        if (innerFocusable && hasSetFocus) {
+            // Keep the host element so we can call setFocus() on it
+            elementToFocus = hostToFocus;
+        }
+        else {
+            elementToFocus = innerFocusable || hostToFocus;
+        }
     }
     if (elementToFocus) {
         const radioGroup = elementToFocus.closest('ion-radio-group');
@@ -398,6 +409,86 @@ const connectListeners = (doc) => {
         doc.addEventListener('focus', (ev) => {
             trapKeyboardFocus(ev, doc);
         }, true);
+        // Listen for keydown events to intercept Tab navigation.
+        // This is needed for Safari and Firefox which may skip focusable
+        // elements or allow focus to escape the overlay.
+        // It also ensures proper focus delegation for shadow DOM elements
+        // like ion-textarea.
+        doc.addEventListener('keydown', (ev) => {
+            var _a, _b, _c;
+            if (ev.key !== 'Tab' && ev.key !== 'Alt+Tab')
+                return;
+            const lastOverlay = getPresentedOverlay(doc, 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-picker-legacy,ion-popover');
+            if (!lastOverlay || lastOverlay.classList.contains(FOCUS_TRAP_DISABLE_CLASS))
+                return;
+            const activeElement = doc.activeElement;
+            if (activeElement === lastOverlay) {
+                ev.preventDefault();
+                focusFirstDescendant(lastOverlay);
+                return;
+            }
+            // Check if activeElement is inside the overlay (including shadow DOM)
+            const isInsideOverlay = activeElement
+                ? lastOverlay.contains(activeElement) ||
+                    (activeElement.getRootNode() instanceof ShadowRoot &&
+                        lastOverlay.contains(activeElement.getRootNode().host)) ||
+                    ((_b = (_a = lastOverlay.shadowRoot) === null || _a === void 0 ? void 0 : _a.contains(activeElement)) !== null && _b !== void 0 ? _b : false)
+                : false;
+            if (!isInsideOverlay)
+                return;
+            // Get all focusable elements from both light and shadow DOM
+            const allFocusable = [
+                ...lastOverlay.querySelectorAll(focusableQueryString),
+                ...(((_c = lastOverlay.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelectorAll(focusableQueryString)) || []),
+            ];
+            if (allFocusable.length === 0) {
+                ev.preventDefault();
+                return;
+            }
+            // Find current element's index (accounting for shadow DOM)
+            const currentIndex = activeElement
+                ? allFocusable.findIndex((el) => {
+                    var _a;
+                    if (el === activeElement)
+                        return true;
+                    if ((_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.contains(activeElement))
+                        return true;
+                    const rootNode = activeElement.getRootNode();
+                    return rootNode instanceof ShadowRoot && rootNode.host === el;
+                })
+                : -1;
+            ev.preventDefault();
+            // Helper to focus an element, handling shadow DOM properly
+            const focusElement = (element) => {
+                const shadowRoot = element.shadowRoot;
+                if (shadowRoot) {
+                    const innerFocusable = shadowRoot.querySelector(focusableQueryString);
+                    if (innerFocusable && typeof element.setFocus !== 'function') {
+                        helpers.focusVisibleElement(innerFocusable);
+                        return;
+                    }
+                }
+                helpers.focusVisibleElement(element);
+            };
+            if (ev.shiftKey) {
+                // Shift+Tab: previous element, wrap to last if at first
+                if (currentIndex <= 0) {
+                    focusLastDescendant(lastOverlay);
+                }
+                else {
+                    focusElement(allFocusable[currentIndex - 1]);
+                }
+            }
+            else {
+                // Tab: next element, wrap to first if at last
+                if (currentIndex < 0 || currentIndex >= allFocusable.length - 1) {
+                    focusFirstDescendant(lastOverlay);
+                }
+                else {
+                    focusElement(allFocusable[currentIndex + 1]);
+                }
+            }
+        }, true);
         // handle back-button click
         doc.addEventListener('ionBackButton', (ev) => {
             const lastOverlay = getPresentedOverlay(doc);

package/dist/cjs/{status-tap-e-hyosXV.js → status-tap-BLw3gi_z.js}

@@ -3,9 +3,9 @@
  */
 'use strict';
 
-var index = require('./index-D6Wc6v08.js');
-var index$1 = require('./index-DUoP_H1L.js');
-var helpers = require('./helpers-DnouLczu.js');
+var index = require('./index-DjlJwy91.js');
+var index$1 = require('./index-C2sRwpb7.js');
+var helpers = require('./helpers-DF1tCuxf.js');
 require('./focus-visible-BIj-I3-C.js');
 
 const startStatusTap = () => {

package/dist/cjs/{swipe-back-CR060nOX.js → swipe-back-BD2lWufH.js}

@@ -3,11 +3,11 @@
  */
 'use strict';
 
-var helpers = require('./helpers-DnouLczu.js');
+var helpers = require('./helpers-DF1tCuxf.js');
 var dir = require('./dir-Cn0z1rJH.js');
 var index = require('./index-CAvQ7Tka.js');
 require('./focus-visible-BIj-I3-C.js');
-require('./index-D6Wc6v08.js');
+require('./index-DjlJwy91.js');
 require('./gesture-controller-dtqlP_q4.js');
 
 const createSwipeBackGesture = (el, canStartHandler, onStartHandler, onMoveHandler, onEndHandler) => {

package/dist/cjs/{theme-CeDs6Hcv.js → theme-IlOsGAz7.js}

@@ -3,8 +3,32 @@
  */
 'use strict';
 
+/**
+ * Checks if an element has a parent matching the specified selector.
+ * This handles an element in both light DOM and shadow DOM contexts.
+ * @param selector The parent selector to check for (e.g., 'ion-datetime'
+ * or 'ion-toolbar[color]').
+ * @param el The element to check.
+ * @returns `true` if the element has a parent matching the specified selector,
+ * `false` otherwise.
+ */
 const hostContext = (selector, el) => {
-    return el.closest(selector) !== null;
+    // Check the light DOM first
+    if (el.closest(selector) !== null) {
+        return true;
+    }
+    // For attribute or class selectors (e.g., 'ion-toolbar[color]' or
+    // 'ion-toolbar.ion-color') we can only check light DOM since tagName
+    // doesn't include attributes or classes.
+    if (selector.includes('[') || selector.includes('.')) {
+        return false;
+    }
+    // Check the shadow DOM by looking at the shadow root host and
+    // converting the selector to uppercase to compare with tagName
+    const upperCaseTagName = selector.toUpperCase();
+    const rootNode = el.getRootNode();
+    const shadowHost = rootNode instanceof ShadowRoot ? rootNode.host : null;
+    return (shadowHost === null || shadowHost === void 0 ? void 0 : shadowHost.tagName) === upperCaseTagName;
 };
 /**
  * Create the mode and color classes for the component based on the classes passed in

package/dist/cjs/validity-QmuwEptc.js

@@ -0,0 +1,51 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+'use strict';
+
+/**
+ * Checks if the form element is in an invalid state based on
+ * Ionic validation classes.
+ *
+ * @param el The form element to check.
+ * @returns `true` if the element is invalid, `false` otherwise.
+ */
+const checkInvalidState = (el) => {
+    const hasIonTouched = el.classList.contains('ion-touched');
+    const hasIonInvalid = el.classList.contains('ion-invalid');
+    return hasIonTouched && hasIonInvalid;
+};
+const getValidityFlags = (validity) => {
+    return {
+        badInput: validity.badInput,
+        customError: validity.customError,
+        patternMismatch: validity.patternMismatch,
+        rangeOverflow: validity.rangeOverflow,
+        rangeUnderflow: validity.rangeUnderflow,
+        stepMismatch: validity.stepMismatch,
+        tooLong: validity.tooLong,
+        tooShort: validity.tooShort,
+        typeMismatch: validity.typeMismatch,
+        valueMissing: validity.valueMissing,
+    };
+};
+/**
+ * Reports the validity state of a native form element to ElementInternals.
+ * This delegates to the native element's built-in validation, which automatically
+ * handles required, minlength, maxlength, and other constraints.
+ */
+const reportValidityToElementInternals = (nativeElement, internals) => {
+    if (!(nativeElement === null || nativeElement === void 0 ? void 0 : nativeElement.validity)) {
+        return;
+    }
+    if (nativeElement.validity.valid) {
+        internals.setValidity({});
+    }
+    else {
+        const validityFlags = getValidityFlags(nativeElement.validity);
+        internals.setValidity(validityFlags, nativeElement.validationMessage, nativeElement);
+    }
+};
+
+exports.checkInvalidState = checkInvalidState;
+exports.reportValidityToElementInternals = reportValidityToElementInternals;

package/dist/collection/components/button/button.ionic.css

@@ -633,4 +633,14 @@ ion-ripple-effect {
 }
 :host(.button-large) ::slotted(ion-badge:not(.long-badge).badge-vertical-bottom) {
   inset-inline-end: var(--token-space-200, var(--token-scale-200, 8px));
+}
+
+:host(.in-datetime) {
+  font-size: var(--token-font-size-400, 16px);
+  font-weight: var(--token-font-weight-medium, 500);
+  letter-spacing: var(--token-font-letter-spacing-1, 1%);
+  line-height: var(--token-font-line-height-600, var(--token-scale-600, 24px));
+  text-decoration: none;
+  text-transform: none;
+  min-height: var(--token-space-1200, var(--token-scale-1200, 48px));
 }

package/dist/collection/components/button/button.ios.css

@@ -395,6 +395,16 @@ ion-ripple-effect {
   padding-bottom: 2px;
 }
 
+:host(.in-datetime) {
+  -webkit-margin-start: 2px;
+  margin-inline-start: 2px;
+  -webkit-margin-end: 2px;
+  margin-inline-end: 2px;
+  margin-top: 0px;
+  margin-bottom: 0px;
+  min-height: 32px;
+}
+
 /**
  * Convert a pixels given value into rem
  * 
@@ -743,4 +753,13 @@ ion-ripple-effect {
 :host(.button-outline.ion-activated.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native {
   background: var(--ion-toolbar-color, var(--color));
   color: var(--ion-toolbar-background, var(--background), var(--ion-color-primary-contrast, #fff));
+}
+
+:host(.in-datetime) {
+  --padding-top: 3px;
+  --padding-bottom: 3px;
+  --padding-start: 5px;
+  --padding-end: 5px;
+  font-size: clamp(17px, 1.0625rem, 21.08px);
+  font-weight: 400;
 }

package/dist/collection/components/button/button.js

@@ -19,9 +19,10 @@ import { getIonTheme, getIonMode } from "../../global/ionic-global";
  */
 export class Button {
     constructor() {
+        this.inDatetime = false;
         this.inItem = false;
         this.inListHeader = false;
-        this.inToolbar = false;
+        this.inButtons = false;
         this.formButtonEl = null;
         this.formEl = null;
         this.inheritedAttributes = {};
@@ -127,9 +128,10 @@ export class Button {
         }
     }
     componentWillLoad() {
-        this.inToolbar = !!this.el.closest('ion-buttons');
-        this.inListHeader = !!this.el.closest('ion-list-header');
-        this.inItem = !!this.el.closest('ion-item') || !!this.el.closest('ion-item-divider');
+        this.inDatetime = hostContext('ion-datetime', this.el);
+        this.inButtons = hostContext('ion-buttons', this.el);
+        this.inListHeader = hostContext('ion-list-header', this.el);
+        this.inItem = hostContext('ion-item', this.el) || hostContext('ion-item-divider', this.el);
         this.inheritedAttributes = inheritAriaAttributes(this.el);
     }
     get hasIconOnly() {
@@ -140,9 +142,11 @@ export class Button {
     }
     get rippleType() {
         const hasClearFill = this.fill === undefined || this.fill === 'clear';
-        // If the button is in a toolbar, has a clear fill (which is the default)
-        // and only has an icon we use the unbounded "circular" ripple effect
-        if (hasClearFill && this.hasIconOnly && this.inToolbar) {
+        // Use the unbounded "circular" ripple effect if it:
+        // - Has a clear fill (the default)
+        // - Only has an icon and
+        // - Is inside of buttons (used in a toolbar) or a datetime
+        if (hasClearFill && this.hasIconOnly && (this.inButtons || this.inDatetime)) {
             return 'unbounded';
         }
         return 'bounded';
@@ -245,7 +249,7 @@ export class Button {
             };
         let fill = this.fill;
         if (fill === undefined) {
-            fill = this.inToolbar || this.inListHeader ? 'clear' : 'solid';
+            fill = this.inDatetime || this.inButtons || this.inListHeader ? 'clear' : 'solid';
         }
         /**
          * We call renderHiddenButton in the render function to account
@@ -257,7 +261,7 @@ export class Button {
         {
             type !== 'button' && this.renderHiddenButton();
         }
-        return (h(Host, { key: '346791d13d8866ea7051d9147ab3c6ece0714825', onClick: this.handleClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
+        return (h(Host, { key: '9e59432c723f240b0b7b2d5536b175ea13ac9fdd', onClick: this.handleClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
                 [theme]: true,
                 [buttonType]: true,
                 [`${buttonType}-${expand}`]: expand !== undefined,
@@ -265,15 +269,16 @@ export class Button {
                 [`${buttonType}-${shape}`]: true,
                 [`${buttonType}-${fill}`]: true,
                 [`${buttonType}-strong`]: strong,
+                'in-datetime': this.inDatetime,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
-                'in-buttons': hostContext('ion-buttons', this.el),
+                'in-buttons': this.inButtons,
                 'button-has-icon-only': hasIconOnly,
                 'button-has-badge': hasBadge,
                 'button-disabled': disabled,
                 'ion-activatable': true,
                 'ion-focusable': true,
-            }) }, h(TagType, Object.assign({ key: 'e59ca440e1e05dce6df3b2df94547c7ebde4281e' }, attrs, { class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, inheritedAttributes), h("span", { key: '7b5a6c15c8a0aa371a2aa7da0dca5d3b0fe64edd', class: "button-inner" }, h("slot", { key: 'c5432839f3339c9ab6e1846ebd2d5e640a5db416', name: "icon-only", onSlotchange: this.slotChanged }), h("slot", { key: '8a7e2ba259cff5bd35baf977ef6411e23e78bc1f', name: "start" }), h("slot", { key: '77bc39e3f9ce152a8cf7776fdc1a8de7c1797ac3' }), h("slot", { key: '0cb5f3d62580ec980c99986ef50e90cd401800a7', name: "end" })), mode === 'md' && h("ion-ripple-effect", { key: 'd1bb52466e293a768c9949d16d957818ee5573fa', type: this.rippleType }))));
+            }) }, h(TagType, Object.assign({ key: '8f003ff3e91da74d83ff20fe14bc16133d20d3fb' }, attrs, { class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, inheritedAttributes), h("span", { key: 'fb0f32c83c884d131a5f62464990434a552c2221', class: "button-inner" }, h("slot", { key: '163f8bd2e1fc0790aed3db9691f564bb2796a4ee', name: "icon-only", onSlotchange: this.slotChanged }), h("slot", { key: 'a858bcdf6040488745720147d9e653746a329623', name: "start" }), h("slot", { key: 'c36663965130158fa0e29cd889dedfec9d4d7a07' }), h("slot", { key: '5f567b14d90ed9a00e2958d4383659a13535c66f', name: "end" })), mode === 'md' && h("ion-ripple-effect", { key: '15d3a9674f73b4757c8c7d5a5df75ac113f10ba5', type: this.rippleType }))));
     }
     static get is() { return "ion-button"; }
     static get encapsulation() { return "shadow"; }
@@ -389,7 +394,7 @@ export class Button {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Set to `\"clear\"` for a transparent button that resembles a flat button, to `\"outline\"`\nfor a transparent button with a border, or to `\"solid\"` for a button with a filled background.\nThe default fill is `\"solid\"` except inside of a toolbar, where the default is `\"clear\"`."
+                    "text": "Set to `\"clear\"` for a transparent button that resembles a flat button, to `\"outline\"`\nfor a transparent button with a border, or to `\"solid\"` for a button with a filled background.\nThe default fill is `\"solid\"` except when inside of a buttons or datetime component, where\nthe default fill is `\"clear\"`."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/button/button.md.css

@@ -395,6 +395,16 @@ ion-ripple-effect {
   padding-bottom: 2px;
 }
 
+:host(.in-datetime) {
+  -webkit-margin-start: 2px;
+  margin-inline-start: 2px;
+  -webkit-margin-end: 2px;
+  margin-inline-end: 2px;
+  margin-top: 0px;
+  margin-bottom: 0px;
+  min-height: 32px;
+}
+
 /**
  * Convert a pixels given value into rem
  * 
@@ -647,4 +657,18 @@ ion-ripple-effect {
 :host(.button-outline.ion-activated.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native {
   background: var(--ion-toolbar-background, var(--color));
   color: var(--ion-toolbar-color, var(--background), var(--ion-color-primary-contrast, #fff));
+}
+
+:host(.in-datetime) {
+  --padding-top: 3px;
+  --padding-bottom: 3px;
+  --padding-start: 8px;
+  --padding-end: 8px;
+  --box-shadow: none;
+}
+
+:host(.in-datetime.button-clear) {
+  --background-activated: transparent;
+  --background-focused: currentColor;
+  --background-hover: currentColor;
 }

package/dist/collection/components/card-content/card-content.ionic.css

@@ -1,4 +1,4 @@
-ion-card-content {
+:host {
   position: relative;
 }
 
@@ -63,7 +63,7 @@ ion-card-content {
  * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
  * convert to a unit other than $baselineUnit.
  */
-.card-content-ionic {
+:host {
   -webkit-padding-start: var(--token-space-400, var(--token-scale-400, 16px));
   padding-inline-start: var(--token-space-400, var(--token-scale-400, 16px));
   -webkit-padding-end: var(--token-space-400, var(--token-scale-400, 16px));
@@ -80,13 +80,10 @@ ion-card-content {
   flex-direction: column;
   gap: var(--token-space-400, var(--token-scale-400, 16px));
 }
-.card-content-ionic img {
+
+::slotted(img) {
   margin-left: 0;
   margin-right: 0;
   margin-top: var(--token-space-200, var(--token-scale-200, 8px));
   margin-bottom: var(--token-space-200, var(--token-scale-200, 8px));
-}
-
-ion-card-header + .card-content-ionic {
-  padding-top: 0;
 }

package/dist/collection/components/card-content/card-content.ios.css

@@ -1,4 +1,4 @@
-ion-card-content {
+:host {
   position: relative;
 }
 
@@ -63,7 +63,7 @@ ion-card-content {
  *   }
  * }
  */
-ion-card-content {
+:host {
   display: block;
 }
 
@@ -128,7 +128,7 @@ ion-card-content {
  *   }
  * }
  */
-.card-content-ios {
+:host {
   -webkit-padding-start: 20px;
   padding-inline-start: 20px;
   -webkit-padding-end: 20px;
@@ -138,41 +138,11 @@ ion-card-content {
   font-size: 1rem;
   line-height: 1.4;
 }
-.card-content-ios h1 {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  margin-bottom: 2px;
-  font-size: 1.5rem;
-  font-weight: normal;
-}
-.card-content-ios h2 {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 2px;
-  margin-bottom: 2px;
-  font-size: 1rem;
-  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: 0.875rem;
-  font-weight: normal;
-}
-.card-content-ios p {
+
+::slotted(p) {
   margin-left: 0;
   margin-right: 0;
   margin-top: 0;
   margin-bottom: 2px;
   font-size: 0.875rem;
-}
-
-ion-card-header + .card-content-ios {
-  padding-top: 0;
 }

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

@@ -10,13 +10,12 @@ import { getIonTheme } from "../../global/ionic-global";
 export class CardContent {
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: '9e0a23306b43bafffd82900a4da7e020fe45c04f', class: {
+        return (h(Host, { key: 'c01bc2a0212e1567b9654a4a79670ae636779764', class: {
                 [theme]: true,
-                // Used internally for styling
-                [`card-content-${theme}`]: true,
-            } }));
+            } }, h("slot", { key: 'beb72f0ed2c9924eb198a30bf6942a430b22d2a7' })));
     }
     static get is() { return "ion-card-content"; }
+    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["card-content.ios.scss"],

package/dist/collection/components/card-content/card-content.md.css

@@ -1,4 +1,4 @@
-ion-card-content {
+:host {
   position: relative;
 }
 
@@ -63,7 +63,7 @@ ion-card-content {
  *   }
  * }
  */
-ion-card-content {
+:host {
   display: block;
 }
 
@@ -128,7 +128,7 @@ ion-card-content {
  *   }
  * }
  */
-.card-content-md {
+:host {
   -webkit-padding-start: 16px;
   padding-inline-start: 16px;
   -webkit-padding-end: 16px;
@@ -138,34 +138,8 @@ ion-card-content {
   font-size: 0.875rem;
   line-height: 1.5;
 }
-.card-content-md h1 {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  margin-bottom: 2px;
-  font-size: 1.5rem;
-  font-weight: normal;
-}
-.card-content-md h2 {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 2px;
-  margin-bottom: 2px;
-  font-size: 1rem;
-  font-weight: normal;
-}
-.card-content-md h3,
-.card-content-md h4,
-.card-content-md h5,
-.card-content-md h6 {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 2px;
-  margin-bottom: 2px;
-  font-size: 0.875rem;
-  font-weight: normal;
-}
-.card-content-md p {
+
+::slotted(p) {
   margin-left: 0;
   margin-right: 0;
   margin-top: 0;
@@ -173,8 +147,4 @@ ion-card-content {
   font-size: 0.875rem;
   font-weight: normal;
   line-height: 1.5;
-}
-
-ion-card-header + .card-content-md {
-  padding-top: 0;
 }

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

@@ -19,11 +19,11 @@ export class CardHeader {
     }
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: '2d5d1399c54960f0ccb114a6aaddd7ff16d3d091', class: createColorClasses(this.color, {
+        return (h(Host, { key: '5bc382eaec57b8b5805ebbe6e20975fef774863e', class: createColorClasses(this.color, {
                 'card-header-translucent': this.translucent,
                 'ion-inherit-color': true,
                 [theme]: true,
-            }) }, h("slot", { key: 'aae02f8bcd357d741990353cc09dafcbce3139c5' })));
+            }) }, h("slot", { key: 'ffa37e23c45c9df26198b78c152252afa62c436e' })));
     }
     static get is() { return "ion-card-header"; }
     static get encapsulation() { return "shadow"; }

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

@@ -11,10 +11,10 @@ import { getIonTheme } from "../../global/ionic-global";
 export class CardSubtitle {
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: '91e326f598ccf4f2c6b3030cbdb69b065d9a8434', role: "heading", "aria-level": "3", class: createColorClasses(this.color, {
+        return (h(Host, { key: '2599d9c0cdbe4dc8d35a0013d9884b88cd96acfc', role: "heading", "aria-level": "3", class: createColorClasses(this.color, {
                 'ion-inherit-color': true,
                 [theme]: true,
-            }) }, h("slot", { key: 'b23b77de6877e1e1212bc624410ad4d0ce4727a9' })));
+            }) }, h("slot", { key: 'e786776c98e3a8b046777f185bb721fe6739c4cf' })));
     }
     static get is() { return "ion-card-subtitle"; }
     static get encapsulation() { return "shadow"; }

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

@@ -11,10 +11,10 @@ import { getIonTheme } from "../../global/ionic-global";
 export class CardTitle {
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: 'abcd0c06a8afd4b358442588a0171354c4b24b45', role: "heading", "aria-level": "2", class: createColorClasses(this.color, {
+        return (h(Host, { key: 'bf74b6498640e8207d9962453e5b351aad480547', role: "heading", "aria-level": "2", class: createColorClasses(this.color, {
                 'ion-inherit-color': true,
                 [theme]: true,
-            }) }, h("slot", { key: '8bf45935b7d625d379d7fb6e87fc9db7dddd15f9' })));
+            }) }, h("slot", { key: 'ffc0863719f4582028a1249fdcb78aa03b123d3f' })));
     }
     static get is() { return "ion-card-title"; }
     static get encapsulation() { return "shadow"; }