@ionic/core 8.8.19 → 8.8.20-dev.11787158518.168a2fea

package/dist/collection/components/breadcrumbs/breadcrumbs.js

@@ -9,97 +9,39 @@ import { getIonMode } from "../../global/ionic-global";
  *
  */
 export class Breadcrumbs {
-    constructor() {
-        /**
-         * The number of breadcrumbs to show before the collapsed indicator.
-         * If `itemsBeforeCollapse` + `itemsAfterCollapse` is greater than `maxItems`,
-         * the breadcrumbs will not be collapsed.
-         */
-        this.itemsBeforeCollapse = 1;
-        /**
-         * The number of breadcrumbs to show after the collapsed indicator.
-         * If `itemsBeforeCollapse` + `itemsAfterCollapse` is greater than `maxItems`,
-         * the breadcrumbs will not be collapsed.
-         */
-        this.itemsAfterCollapse = 1;
-        this.breadcrumbsInit = () => {
-            this.setBreadcrumbSeparator();
-            this.setMaxItems();
-        };
-        this.resetActiveBreadcrumb = () => {
-            const breadcrumbs = this.getBreadcrumbs();
-            // Only reset the active breadcrumb if we were the ones to change it
-            // otherwise use the one set on the component
-            const activeBreadcrumb = breadcrumbs.find((breadcrumb) => breadcrumb.active);
-            if (activeBreadcrumb && this.activeChanged) {
-                activeBreadcrumb.active = false;
-            }
-        };
-        this.setMaxItems = () => {
-            const { itemsAfterCollapse, itemsBeforeCollapse, maxItems } = this;
-            const breadcrumbs = this.getBreadcrumbs();
-            for (const breadcrumb of breadcrumbs) {
-                breadcrumb.showCollapsedIndicator = false;
-                breadcrumb.collapsed = false;
-            }
-            // If the number of breadcrumbs exceeds the maximum number of items
-            // that should show and the items before / after collapse do not
-            // exceed the maximum items then we need to collapse the breadcrumbs
-            const shouldCollapse = maxItems !== undefined && breadcrumbs.length > maxItems && itemsBeforeCollapse + itemsAfterCollapse <= maxItems;
-            if (shouldCollapse) {
-                // Show the collapsed indicator in the first breadcrumb that collapses
-                breadcrumbs.forEach((breadcrumb, index) => {
-                    if (index === itemsBeforeCollapse) {
-                        breadcrumb.showCollapsedIndicator = true;
-                    }
-                    // Collapse all breadcrumbs that have an index greater than or equal to
-                    // the number before collapse and an index less than the total number
-                    // of breadcrumbs minus the items that should show after the collapse
-                    if (index >= itemsBeforeCollapse && index < breadcrumbs.length - itemsAfterCollapse) {
-                        breadcrumb.collapsed = true;
-                    }
-                });
-            }
-        };
-        this.setBreadcrumbSeparator = () => {
-            const { itemsAfterCollapse, itemsBeforeCollapse, maxItems } = this;
-            const breadcrumbs = this.getBreadcrumbs();
-            // Check if an active breadcrumb exists already
-            const active = breadcrumbs.find((breadcrumb) => breadcrumb.active);
-            // Set the separator on all but the last breadcrumb
-            for (const breadcrumb of breadcrumbs) {
-                // The only time the last breadcrumb changes is when
-                // itemsAfterCollapse is set to 0, in this case the
-                // last breadcrumb will be the collapsed indicator
-                const last = maxItems !== undefined && itemsAfterCollapse === 0
-                    ? breadcrumb === breadcrumbs[itemsBeforeCollapse]
-                    : breadcrumb === breadcrumbs[breadcrumbs.length - 1];
-                breadcrumb.last = last;
-                // If the breadcrumb has defined whether or not to show the
-                // separator then use that value, otherwise check if it's the
-                // last breadcrumb
-                const separator = breadcrumb.separator !== undefined ? breadcrumb.separator : last ? undefined : true;
-                breadcrumb.separator = separator;
-                // If there is not an active breadcrumb already
-                // set the last one to active
-                if (!active && last) {
-                    breadcrumb.active = true;
-                    this.activeChanged = true;
-                }
-            }
-        };
-        this.getBreadcrumbs = () => {
-            return Array.from(this.el.querySelectorAll('ion-breadcrumb'));
-        };
-        this.slotChanged = () => {
-            this.resetActiveBreadcrumb();
-            this.breadcrumbsInit();
-        };
-    }
+    collapsed;
+    activeChanged;
+    el;
+    /**
+     * 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).
+     */
+    color;
+    /**
+     * The maximum number of breadcrumbs to show before collapsing.
+     */
+    maxItems;
+    /**
+     * The number of breadcrumbs to show before the collapsed indicator.
+     * If `itemsBeforeCollapse` + `itemsAfterCollapse` is greater than `maxItems`,
+     * the breadcrumbs will not be collapsed.
+     */
+    itemsBeforeCollapse = 1;
+    /**
+     * The number of breadcrumbs to show after the collapsed indicator.
+     * If `itemsBeforeCollapse` + `itemsAfterCollapse` is greater than `maxItems`,
+     * the breadcrumbs will not be collapsed.
+     */
+    itemsAfterCollapse = 1;
+    /**
+     * Emitted when the collapsed indicator is clicked on.
+     */
+    ionCollapsedClick;
     onCollapsedClick(ev) {
         const breadcrumbs = this.getBreadcrumbs();
         const collapsedBreadcrumbs = breadcrumbs.filter((breadcrumb) => breadcrumb.collapsed);
-        this.ionCollapsedClick.emit(Object.assign(Object.assign({}, ev.detail), { collapsedBreadcrumbs }));
+        this.ionCollapsedClick.emit({ ...ev.detail, collapsedBreadcrumbs });
     }
     maxItemsChanged() {
         this.resetActiveBreadcrumb();
@@ -108,6 +50,79 @@ export class Breadcrumbs {
     componentWillLoad() {
         this.breadcrumbsInit();
     }
+    breadcrumbsInit = () => {
+        this.setBreadcrumbSeparator();
+        this.setMaxItems();
+    };
+    resetActiveBreadcrumb = () => {
+        const breadcrumbs = this.getBreadcrumbs();
+        // Only reset the active breadcrumb if we were the ones to change it
+        // otherwise use the one set on the component
+        const activeBreadcrumb = breadcrumbs.find((breadcrumb) => breadcrumb.active);
+        if (activeBreadcrumb && this.activeChanged) {
+            activeBreadcrumb.active = false;
+        }
+    };
+    setMaxItems = () => {
+        const { itemsAfterCollapse, itemsBeforeCollapse, maxItems } = this;
+        const breadcrumbs = this.getBreadcrumbs();
+        for (const breadcrumb of breadcrumbs) {
+            breadcrumb.showCollapsedIndicator = false;
+            breadcrumb.collapsed = false;
+        }
+        // If the number of breadcrumbs exceeds the maximum number of items
+        // that should show and the items before / after collapse do not
+        // exceed the maximum items then we need to collapse the breadcrumbs
+        const shouldCollapse = maxItems !== undefined && breadcrumbs.length > maxItems && itemsBeforeCollapse + itemsAfterCollapse <= maxItems;
+        if (shouldCollapse) {
+            // Show the collapsed indicator in the first breadcrumb that collapses
+            breadcrumbs.forEach((breadcrumb, index) => {
+                if (index === itemsBeforeCollapse) {
+                    breadcrumb.showCollapsedIndicator = true;
+                }
+                // Collapse all breadcrumbs that have an index greater than or equal to
+                // the number before collapse and an index less than the total number
+                // of breadcrumbs minus the items that should show after the collapse
+                if (index >= itemsBeforeCollapse && index < breadcrumbs.length - itemsAfterCollapse) {
+                    breadcrumb.collapsed = true;
+                }
+            });
+        }
+    };
+    setBreadcrumbSeparator = () => {
+        const { itemsAfterCollapse, itemsBeforeCollapse, maxItems } = this;
+        const breadcrumbs = this.getBreadcrumbs();
+        // Check if an active breadcrumb exists already
+        const active = breadcrumbs.find((breadcrumb) => breadcrumb.active);
+        // Set the separator on all but the last breadcrumb
+        for (const breadcrumb of breadcrumbs) {
+            // The only time the last breadcrumb changes is when
+            // itemsAfterCollapse is set to 0, in this case the
+            // last breadcrumb will be the collapsed indicator
+            const last = maxItems !== undefined && itemsAfterCollapse === 0
+                ? breadcrumb === breadcrumbs[itemsBeforeCollapse]
+                : breadcrumb === breadcrumbs[breadcrumbs.length - 1];
+            breadcrumb.last = last;
+            // If the breadcrumb has defined whether or not to show the
+            // separator then use that value, otherwise check if it's the
+            // last breadcrumb
+            const separator = breadcrumb.separator !== undefined ? breadcrumb.separator : last ? undefined : true;
+            breadcrumb.separator = separator;
+            // If there is not an active breadcrumb already
+            // set the last one to active
+            if (!active && last) {
+                breadcrumb.active = true;
+                this.activeChanged = true;
+            }
+        }
+    };
+    getBreadcrumbs = () => {
+        return Array.from(this.el.querySelectorAll('ion-breadcrumb'));
+    };
+    slotChanged = () => {
+        this.resetActiveBreadcrumb();
+        this.breadcrumbsInit();
+    };
     render() {
         const { color, collapsed } = this;
         const mode = getIonMode(this);

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

@@ -17,71 +17,113 @@ import { getIonMode } from "../../global/ionic-global";
  * @part native - The native HTML button or anchor element that wraps all child elements.
  */
 export class Button {
-    constructor() {
-        this.inItem = false;
-        this.inListHeader = false;
-        this.inToolbar = false;
-        this.formButtonEl = null;
-        this.formEl = null;
-        this.inheritedAttributes = {};
-        /**
-         * If `true`, the button only has an icon.
-         */
-        this.isCircle = false;
-        /**
-         * The type of button.
-         */
-        this.buttonType = 'button';
-        /**
-         * If `true`, the user cannot interact with the button.
-         */
-        this.disabled = false;
-        /**
-         * When using a router, it specifies the transition direction when navigating to
-         * another page using `href`.
-         */
-        this.routerDirection = 'forward';
-        /**
-         * If `true`, activates a button with a heavier font weight.
-         */
-        this.strong = false;
-        /**
-         * The type of the button.
-         */
-        this.type = 'button';
-        this.handleClick = (ev) => {
-            const { el } = this;
-            if (this.type === 'button') {
-                openURL(this.href, ev, this.routerDirection, this.routerAnimation);
-            }
-            else if (hasShadowDom(el)) {
-                this.submitForm(ev);
-            }
-        };
-        this.onFocus = () => {
-            this.ionFocus.emit();
-        };
-        this.onBlur = () => {
-            this.ionBlur.emit();
-        };
-        this.slotChanged = () => {
-            /**
-             * Ensures that the 'has-icon-only' class is properly added
-             * or removed from `ion-button` when manipulating the
-             * `icon-only` slot.
-             *
-             * Without this, the 'has-icon-only' class is only checked
-             * or added when `ion-button` component first renders.
-             */
-            this.isCircle = this.hasIconOnly;
-        };
-    }
+    inItem = false;
+    inListHeader = false;
+    inToolbar = false;
+    formButtonEl = null;
+    formEl = null;
+    inheritedAttributes = {};
+    el;
+    /**
+     * If `true`, the button only has an icon.
+     */
+    isCircle = 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).
+     */
+    color;
+    /**
+     * The type of button.
+     */
+    buttonType = 'button';
+    /**
+     * If `true`, the user cannot interact with the button.
+     */
+    disabled = false;
     disabledChanged() {
         const { disabled } = this;
         if (this.formButtonEl) {
             this.formButtonEl.disabled = disabled;
         }
     }
+    /**
+     * Set to `"block"` for a full-width button or to `"full"` for a full-width button
+     * with square corners and no left or right borders.
+     */
+    expand;
+    /**
+     * Set to `"clear"` for a transparent button that resembles a flat button, to `"outline"`
+     * for a transparent button with a border, or to `"solid"` for a button with a filled background.
+     * The default fill is `"solid"` except inside of a toolbar, where the default is `"clear"`.
+     */
+    fill;
+    /**
+     * When using a router, it specifies the transition direction when navigating to
+     * another page using `href`.
+     */
+    routerDirection = 'forward';
+    /**
+     * When using a router, it specifies the transition animation when navigating to
+     * another page using `href`.
+     */
+    routerAnimation;
+    /**
+     * This attribute instructs browsers to download a URL instead of navigating to
+     * it, so the user will be prompted to save it as a local file. If the attribute
+     * has a value, it is used as the pre-filled file name in the Save prompt
+     * (the user can still change the file name if they want).
+     */
+    download;
+    /**
+     * Contains a URL or a URL fragment that the hyperlink points to.
+     * If this property is set, an anchor tag will be rendered.
+     */
+    href;
+    /**
+     * Specifies the relationship of the target object to the link object.
+     * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).
+     */
+    rel;
+    /**
+     * Set to `"round"` for a button with more rounded corners.
+     */
+    shape;
+    /**
+     * Set to `"small"` for a button with less height and padding, to `"default"`
+     * for a button with the default height and padding, or to `"large"` for a button
+     * with more height and padding. By default the size is unset, unless the button
+     * is inside of an item, where the size is `"small"` by default. Set the size to
+     * `"default"` inside of an item to make it a standard size button.
+     */
+    size;
+    /**
+     * If `true`, activates a button with a heavier font weight.
+     */
+    strong = false;
+    /**
+     * Specifies where to display the linked URL.
+     * Only applies when an `href` is provided.
+     * Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
+     */
+    target;
+    /**
+     * The type of the button.
+     */
+    type = 'button';
+    /**
+     * The HTML form element or form element id. Used to submit a form when the button is not a child of the form.
+     */
+    form;
+    /**
+     * Emitted when the button has focus.
+     */
+    ionFocus;
+    /**
+     * Emitted when the button loses focus.
+     */
+    ionBlur;
     /**
      * This component is used within the `ion-input-password-toggle` component
      * to toggle the visibility of the password input.
@@ -93,7 +135,10 @@ export class Button {
      * @param propName
      */
     onAriaChanged(newValue, _oldValue, propName) {
-        this.inheritedAttributes = Object.assign(Object.assign({}, this.inheritedAttributes), { [propName]: newValue });
+        this.inheritedAttributes = {
+            ...this.inheritedAttributes,
+            [propName]: newValue,
+        };
         forceUpdate(this);
     }
     /**
@@ -206,6 +251,32 @@ export class Button {
             this.formButtonEl.click();
         }
     }
+    handleClick = (ev) => {
+        const { el } = this;
+        if (this.type === 'button') {
+            openURL(this.href, ev, this.routerDirection, this.routerAnimation);
+        }
+        else if (hasShadowDom(el)) {
+            this.submitForm(ev);
+        }
+    };
+    onFocus = () => {
+        this.ionFocus.emit();
+    };
+    onBlur = () => {
+        this.ionBlur.emit();
+    };
+    slotChanged = () => {
+        /**
+         * Ensures that the 'has-icon-only' class is properly added
+         * or removed from `ion-button` when manipulating the
+         * `icon-only` slot.
+         *
+         * Without this, the 'has-icon-only' class is only checked
+         * or added when `ion-button` component first renders.
+         */
+        this.isCircle = this.hasIconOnly;
+    };
     render() {
         const mode = getIonMode(this);
         const { buttonType, type, disabled, rel, target, size, href, color, expand, hasIconOnly, shape, strong, inheritedAttributes, } = this;
@@ -248,7 +319,7 @@ export class Button {
                 'button-disabled': disabled,
                 'ion-activatable': true,
                 'ion-focusable': true,
-            }) }, h(TagType, Object.assign({ key: '53f4cb366bac796ab38f609e858bc1a55fce7641' }, attrs, { class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, inheritedAttributes), h("span", { key: '40e127fc11c889e77b8bf02e8714f0dea83bfce7', class: "button-inner" }, h("slot", { key: 'e11c8c86d3f0894658a8999129425c9c111f5540', name: "icon-only", onSlotchange: this.slotChanged }), h("slot", { key: '105ea9259ea17036359e6fe7eced8b267ab8e0f6', name: "start" }), h("slot", { key: '0d7b0966e328a5b10b0562dacbd638dfd08d92af' }), h("slot", { key: 'c542b40685802464d69f57ecc0a7c3465d24a417', name: "end" })), mode === 'md' && h("ion-ripple-effect", { key: '46df4cbeb057b0a8daab92226121d8bbb8c0ee07', type: this.rippleType }))));
+            }) }, h(TagType, { key: '53f4cb366bac796ab38f609e858bc1a55fce7641', ...attrs, class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur, ...inheritedAttributes }, h("span", { key: '40e127fc11c889e77b8bf02e8714f0dea83bfce7', class: "button-inner" }, h("slot", { key: 'e11c8c86d3f0894658a8999129425c9c111f5540', name: "icon-only", onSlotchange: this.slotChanged }), h("slot", { key: '105ea9259ea17036359e6fe7eced8b267ab8e0f6', name: "start" }), h("slot", { key: '0d7b0966e328a5b10b0562dacbd638dfd08d92af' }), h("slot", { key: 'c542b40685802464d69f57ecc0a7c3465d24a417', name: "end" })), mode === 'md' && h("ion-ripple-effect", { key: '46df4cbeb057b0a8daab92226121d8bbb8c0ee07', type: this.rippleType }))));
     }
     static get is() { return "ion-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/buttons/buttons.js

@@ -4,21 +4,19 @@
 import { Host, h } from "@stencil/core";
 import { getIonMode } from "../../global/ionic-global";
 export class Buttons {
-    constructor() {
-        /**
-         * If true, buttons will disappear when its
-         * parent toolbar has fully collapsed if the toolbar
-         * is not the first toolbar. If the toolbar is the
-         * first toolbar, the buttons will be hidden and will
-         * only be shown once all toolbars have fully collapsed.
-         *
-         * Only applies in `ios` mode with `collapse` set to
-         * `true` on `ion-header`.
-         *
-         * Typically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)
-         */
-        this.collapse = false;
-    }
+    /**
+     * If true, buttons will disappear when its
+     * parent toolbar has fully collapsed if the toolbar
+     * is not the first toolbar. If the toolbar is the
+     * first toolbar, the buttons will be hidden and will
+     * only be shown once all toolbars have fully collapsed.
+     *
+     * Only applies in `ios` mode with `collapse` set to
+     * `true` on `ion-header`.
+     *
+     * Typically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)
+     */
+    collapse = false;
     render() {
         const mode = getIonMode(this);
         return (h(Host, { key: '58c1fc5eb867d0731c63549b1ccb3ec3bbbe6e1b', class: {

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

@@ -11,26 +11,59 @@ import { getIonMode } from "../../global/ionic-global";
  * @part native - The native HTML button, anchor, or div element that wraps all child elements.
  */
 export class Card {
-    constructor() {
-        this.inheritedAriaAttributes = {};
-        /**
-         * If `true`, a button tag will be rendered and the card will be tappable.
-         */
-        this.button = false;
-        /**
-         * The type of the button. Only used when an `onclick` or `button` property is present.
-         */
-        this.type = 'button';
-        /**
-         * If `true`, the user cannot interact with the card.
-         */
-        this.disabled = false;
-        /**
-         * When using a router, it specifies the transition direction when navigating to
-         * another page using `href`.
-         */
-        this.routerDirection = 'forward';
-    }
+    inheritedAriaAttributes = {};
+    el;
+    /**
+     * 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).
+     */
+    color;
+    /**
+     * If `true`, a button tag will be rendered and the card will be tappable.
+     */
+    button = false;
+    /**
+     * The type of the button. Only used when an `onclick` or `button` property is present.
+     */
+    type = 'button';
+    /**
+     * If `true`, the user cannot interact with the card.
+     */
+    disabled = false;
+    /**
+     * This attribute instructs browsers to download a URL instead of navigating to
+     * it, so the user will be prompted to save it as a local file. If the attribute
+     * has a value, it is used as the pre-filled file name in the Save prompt
+     * (the user can still change the file name if they want).
+     */
+    download;
+    /**
+     * Contains a URL or a URL fragment that the hyperlink points to.
+     * If this property is set, an anchor tag will be rendered.
+     */
+    href;
+    /**
+     * Specifies the relationship of the target object to the link object.
+     * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).
+     */
+    rel;
+    /**
+     * When using a router, it specifies the transition direction when navigating to
+     * another page using `href`.
+     */
+    routerDirection = 'forward';
+    /**
+     * When using a router, it specifies the transition animation when navigating to
+     * another page using `href`.
+     */
+    routerAnimation;
+    /**
+     * Specifies where to display the linked URL.
+     * Only applies when an `href` is provided.
+     * Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
+     */
+    target;
     componentWillLoad() {
         this.inheritedAriaAttributes = inheritAttributes(this.el, ['aria-label']);
     }
@@ -52,7 +85,7 @@ export class Card {
                 rel: this.rel,
                 target: this.target,
             };
-        return (h(TagType, Object.assign({}, attrs, inheritedAriaAttributes, { 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)));
+        return (h(TagType, { ...attrs, ...inheritedAriaAttributes, 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);

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

@@ -8,14 +8,18 @@ import { getIonMode } from "../../global/ionic-global";
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
 export class CardHeader {
-    constructor() {
-        /**
-         * If `true`, the card header will be translucent.
-         * Only applies when the mode is `"ios"` and the device supports
-         * [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
-         */
-        this.translucent = 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).
+     */
+    color;
+    /**
+     * If `true`, the card header will be translucent.
+     * Only applies when the mode is `"ios"` and the device supports
+     * [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
+     */
+    translucent = false;
     render() {
         const mode = getIonMode(this);
         return (h(Host, { key: '64246b81931203a64d553c788cd736f41e23f37b', class: createColorClasses(this.color, {

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

@@ -8,6 +8,12 @@ import { getIonMode } from "../../global/ionic-global";
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
 export class CardSubtitle {
+    /**
+     * 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).
+     */
+    color;
     render() {
         const mode = getIonMode(this);
         return (h(Host, { key: '84d820a19d9074f9c8bc61ccba1ca40062a60b73', role: "heading", "aria-level": "3", class: createColorClasses(this.color, {

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

@@ -8,6 +8,12 @@ import { getIonMode } from "../../global/ionic-global";
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
 export class CardTitle {
+    /**
+     * 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).
+     */
+    color;
     render() {
         const mode = getIonMode(this);
         return (h(Host, { key: 'fca001a86396e83718d5211cd71912fdf40dea2f', role: "heading", "aria-level": "2", class: createColorClasses(this.color, {