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

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

@@ -1,3 +1,167 @@
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+ * A heuristic that applies CSS to mobile
+ * viewports (i.e. phones, not tablets).
+ *
+ * Usage:
+ * @include mobile-viewport() {
+ *   :host {
+ *     background-color: blue;
+ *   }
+ * }
+ */
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @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.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @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.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @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.
+ */
+.action-sheet-button-label-has-rich-content,
+.alert-radio-label-has-rich-content,
+.alert-checkbox-label-has-rich-content,
+.select-option-label-has-rich-content {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+/**
+ * Outer label container has rich content
+ * (start, content, description, end) that needs the
+ * label to span the available row width.
+ */
+.action-sheet-button-label-has-rich-content,
+.alert-radio-label-has-rich-content,
+.alert-checkbox-label-has-rich-content,
+.select-option-content {
+  flex: 1;
+}
+
+.action-sheet-button-label-text,
+.alert-checkbox-label-text,
+.alert-radio-label-text,
+.select-option-label-text {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.select-option-start,
+.select-option-end {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.select-option-description {
+  padding-left: 0;
+  padding-right: 0;
+  padding-top: 5px;
+  padding-bottom: 0;
+  display: block;
+  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
+  font-size: 0.75rem;
+}
+
+/**
+ * Non-rich labels are plain text and should ellipsize when they
+ * overflow the row. Rich-content labels switch to flex so the
+ * start / content / end pieces can lay out side-by-side and wrap.
+ */
+.select-option-label:not(.select-option-label-has-rich-content) {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.select-option-label-has-rich-content {
+  display: flex;
+  align-items: center;
+}
+
+ion-radio.select-option-has-rich-content::part(label),
+ion-checkbox.select-option-has-rich-content::part(label),
+.select-option-content {
+  flex: 1;
+  /**
+   * Let rich content wrap instead of inheriting the label part's
+   * single-line truncation, so arbitrary slotted elements render
+   * without clipping.
+   */
+  white-space: normal;
+}
+
+/**
+ * Cap slotted children so they can't stretch the option
+ * row out of proportion, keeping rows visually uniform
+ * regardless of the content.
+ */
+.select-option-start > ion-avatar,
+.select-option-end > ion-avatar {
+  width: 40px;
+  height: 40px;
+}
+
+.select-option-start > ion-icon,
+.select-option-end > ion-icon {
+  font-size: 24px;
+}
+
+.select-option-start > ion-img,
+.select-option-start > img,
+.select-option-start > svg,
+.select-option-start > ion-thumbnail,
+.select-option-end > ion-img,
+.select-option-end > img,
+.select-option-end > svg,
+.select-option-end > ion-thumbnail {
+  width: 56px;
+  height: 56px;
+}
+
+.select-option-start > video,
+.select-option-end > video {
+  width: 114px;
+  height: 56px;
+}
+
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -242,6 +406,39 @@
   min-height: inherit;
 }
 
+/**
+ * Label is on the right of the radio in LTR and
+ * on the left in RTL.
+ */
+.radio-label-placement-start,
+.checkbox-label-placement-start {
+  flex-direction: row-reverse;
+}
+
+/**
+ * Label is on the left of the radio in LTR and
+ * on the right in RTL.
+ */
+.radio-label-placement-end,
+.checkbox-label-placement-end {
+  flex-direction: row;
+}
+
+.radio-justify-start,
+.checkbox-justify-start {
+  justify-content: start;
+}
+
+.radio-justify-end,
+.checkbox-justify-end {
+  justify-content: end;
+}
+
+.radio-justify-space-between,
+.checkbox-justify-space-between {
+  justify-content: space-between;
+}
+
 .alert-input-disabled,
 .alert-checkbox-button-disabled .alert-button-inner,
 .alert-radio-button-disabled .alert-button-inner {
@@ -419,10 +616,10 @@ textarea.alert-input {
 }
 
 .alert-head {
-  -webkit-padding-start: 23px;
-  padding-inline-start: 23px;
-  -webkit-padding-end: 23px;
-  padding-inline-end: 23px;
+  -webkit-padding-start: 24px;
+  padding-inline-start: 24px;
+  -webkit-padding-end: 24px;
+  padding-inline-end: 24px;
   padding-top: 20px;
   padding-bottom: 15px;
   text-align: start;
@@ -522,30 +719,56 @@ textarea.alert-input {
 }
 
 .alert-radio-label {
-  -webkit-padding-start: 52px;
-  padding-inline-start: 52px;
-  -webkit-padding-end: 26px;
-  padding-inline-end: 26px;
   padding-top: 13px;
   padding-bottom: 13px;
-  flex: 1;
+  max-width: calc(100% - 20px);
   color: var(--ion-color-step-850, var(--ion-text-color-step-150, #262626));
   font-size: 1rem;
 }
 
+.radio-label-placement-end .alert-radio-label {
+  /**
+   * The label's inline padding clears space for the icon on the icon's side.
+   * When the label is placed at the end, the icon is at the start, so the
+   * larger padding clears it on the start side.
+   */
+  -webkit-padding-start: 56px;
+  padding-inline-start: 56px;
+  -webkit-padding-end: 24px;
+  padding-inline-end: 24px;
+}
+
+.radio-label-placement-start .alert-radio-label {
+  /**
+   * The label's inline padding clears space for the icon on the icon's side.
+   * When the label is placed at the start, the icon is at the end, so the
+   * larger padding clears it on the end side.
+   */
+  -webkit-padding-start: 24px;
+  padding-inline-start: 24px;
+  -webkit-padding-end: 56px;
+  padding-inline-end: 56px;
+}
+
 .alert-radio-icon {
   top: 0;
   border-radius: 50%;
   display: block;
   position: relative;
+  flex-shrink: 0;
   width: 20px;
   height: 20px;
   border-width: 2px;
   border-style: solid;
   border-color: var(--ion-color-step-550, var(--ion-background-color-step-550, #737373));
 }
-.alert-radio-icon {
-  inset-inline-start: 26px;
+
+.radio-label-placement-end .alert-radio-icon {
+  inset-inline-start: 24px;
+}
+
+.radio-label-placement-start .alert-radio-icon {
+  inset-inline-end: 24px;
 }
 
 .alert-radio-inner {
@@ -575,22 +798,42 @@ textarea.alert-input {
 }
 
 .alert-checkbox-label {
-  -webkit-padding-start: 53px;
-  padding-inline-start: 53px;
-  -webkit-padding-end: 26px;
-  padding-inline-end: 26px;
   padding-top: 13px;
   padding-bottom: 13px;
-  flex: 1;
-  width: calc(100% - 53px);
+  max-width: calc(100% - 16px);
   color: var(--ion-color-step-850, var(--ion-text-color-step-150, #262626));
   font-size: 1rem;
 }
 
+.checkbox-label-placement-end .alert-checkbox-label {
+  /**
+   * The label's inline padding clears space for the icon on the icon's side.
+   * When the label is placed at the end, the icon is at the start, so the
+   * larger padding clears it on the start side.
+   */
+  -webkit-padding-start: 56px;
+  padding-inline-start: 56px;
+  -webkit-padding-end: 24px;
+  padding-inline-end: 24px;
+}
+
+.checkbox-label-placement-start .alert-checkbox-label {
+  /**
+   * The label's inline padding clears space for the icon on the icon's side.
+   * When the label is placed at the start, the icon is at the end, so the
+   * larger padding clears it on the end side.
+   */
+  -webkit-padding-start: 24px;
+  padding-inline-start: 24px;
+  -webkit-padding-end: 56px;
+  padding-inline-end: 56px;
+}
+
 .alert-checkbox-icon {
   top: 0;
   border-radius: 2px;
   position: relative;
+  flex-shrink: 0;
   width: 16px;
   height: 16px;
   border-width: 2px;
@@ -598,8 +841,13 @@ textarea.alert-input {
   border-color: var(--ion-color-step-550, var(--ion-background-color-step-550, #737373));
   contain: strict;
 }
-.alert-checkbox-icon {
-  inset-inline-start: 26px;
+
+.checkbox-label-placement-end .alert-checkbox-icon {
+  inset-inline-start: 24px;
+}
+
+.checkbox-label-placement-start .alert-checkbox-icon {
+  inset-inline-end: 24px;
 }
 
 [aria-checked=true] .alert-checkbox-icon {
@@ -658,7 +906,7 @@ textarea.alert-input {
   overflow: hidden;
 }
 
-.alert-button-inner {
+.alert-button-group .alert-button-inner {
   justify-content: flex-end;
 }
 

package/dist/collection/components/app/app.js

@@ -8,6 +8,9 @@ import { isPlatform } from "../../utils/platform";
 import { config } from "../../global/config";
 import { getIonMode } from "../../global/ionic-global";
 export class App {
+    focusVisible;
+    loadTimeout;
+    el;
     componentDidLoad() {
         if (Build.isBrowser) {
             this.rIC(async () => {

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

@@ -15,25 +15,40 @@ import { getIonMode } from "../../global/ionic-global";
  * @part text - The back button text.
  */
 export class BackButton {
-    constructor() {
-        this.inheritedAttributes = {};
-        /**
-         * If `true`, the user cannot interact with the button.
-         */
-        this.disabled = false;
-        /**
-         * The type of the button.
-         */
-        this.type = 'button';
-        this.onClick = async (ev) => {
-            const nav = this.el.closest('ion-nav');
-            ev.preventDefault();
-            if (nav && (await nav.canGoBack())) {
-                return nav.pop({ animationBuilder: this.routerAnimation, skipIfBusy: true });
-            }
-            return openURL(this.defaultHref, ev, 'back', this.routerAnimation);
-        };
-    }
+    inheritedAttributes = {};
+    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 url to navigate back to by default when there is no history.
+     */
+    defaultHref;
+    /**
+     * If `true`, the user cannot interact with the button.
+     */
+    disabled = false;
+    /**
+     * The built-in named SVG icon name or the exact `src` of an SVG file
+     * to use for the back button.
+     */
+    icon;
+    /**
+     * The text to display in the back button.
+     */
+    text;
+    /**
+     * The type of the button.
+     */
+    type = 'button';
+    /**
+     * When using a router, it specifies the transition animation when navigating to
+     * another page.
+     */
+    routerAnimation;
     componentWillLoad() {
         this.inheritedAttributes = inheritAriaAttributes(this.el);
         if (this.defaultHref === undefined) {
@@ -68,6 +83,14 @@ export class BackButton {
         }
         return 'bounded';
     }
+    onClick = async (ev) => {
+        const nav = this.el.closest('ion-nav');
+        ev.preventDefault();
+        if (nav && (await nav.canGoBack())) {
+            return nav.pop({ animationBuilder: this.routerAnimation, skipIfBusy: true });
+        }
+        return openURL(this.defaultHref, ev, 'back', this.routerAnimation);
+    };
     render() {
         const { color, defaultHref, disabled, type, hasIconOnly, backButtonIcon, backButtonText, icon, inheritedAttributes, } = this;
         const showBackButton = defaultHref !== undefined;

package/dist/collection/components/backdrop/backdrop.js

@@ -4,20 +4,22 @@
 import { Host, h } from "@stencil/core";
 import { getIonMode } from "../../global/ionic-global";
 export class Backdrop {
-    constructor() {
-        /**
-         * If `true`, the backdrop will be visible.
-         */
-        this.visible = true;
-        /**
-         * If `true`, the backdrop will can be clicked and will emit the `ionBackdropTap` event.
-         */
-        this.tappable = true;
-        /**
-         * If `true`, the backdrop will stop propagation on tap.
-         */
-        this.stopPropagation = true;
-    }
+    /**
+     * If `true`, the backdrop will be visible.
+     */
+    visible = true;
+    /**
+     * If `true`, the backdrop will can be clicked and will emit the `ionBackdropTap` event.
+     */
+    tappable = true;
+    /**
+     * If `true`, the backdrop will stop propagation on tap.
+     */
+    stopPropagation = true;
+    /**
+     * Emitted when the backdrop is tapped.
+     */
+    ionBackdropTap;
     onMouseDown(ev) {
         this.emitTap(ev);
     }

package/dist/collection/components/badge/badge.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 Badge {
+    /**
+     * 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: '1a2d39c5deec771a2f2196447627b62a7d4c8389', class: createColorClasses(this.color, {

package/dist/collection/components/breadcrumb/breadcrumb.js

@@ -14,41 +14,102 @@ import { getIonMode } from "../../global/ionic-global";
  * @part collapsed-indicator - The indicator element that shows the breadcrumbs are collapsed.
  */
 export class Breadcrumb {
-    constructor() {
-        this.inheritedAttributes = {};
-        /** @internal */
-        this.collapsed = false;
-        /**
-         * If `true`, the breadcrumb will take on a different look to show that
-         * it is the currently active breadcrumb. Defaults to `true` for the
-         * last breadcrumb if it is not set on any.
-         */
-        this.active = false;
-        /**
-         * If `true`, the user cannot interact with the breadcrumb.
-         */
-        this.disabled = false;
-        /**
-         * When using a router, it specifies the transition direction when navigating to
-         * another page using `href`.
-         */
-        this.routerDirection = 'forward';
-        this.onFocus = () => {
-            this.ionFocus.emit();
-        };
-        this.onBlur = () => {
-            this.ionBlur.emit();
-        };
-        this.collapsedIndicatorClick = () => {
-            this.collapsedClick.emit({ ionShadowTarget: this.collapsedRef });
-        };
-    }
+    inheritedAttributes = {};
+    collapsedRef;
+    /** @internal */
+    collapsed = false;
+    /** @internal */
+    last;
+    /** @internal */
+    showCollapsedIndicator;
+    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`, the breadcrumb will take on a different look to show that
+     * it is the currently active breadcrumb. Defaults to `true` for the
+     * last breadcrumb if it is not set on any.
+     */
+    active = false;
+    /**
+     * If `true`, the user cannot interact with the breadcrumb.
+     */
+    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;
+    /**
+     * If true, show a separator between this breadcrumb and the next.
+     * Defaults to `true` for all breadcrumbs except the last.
+     */
+    separator;
+    /**
+     * Specifies where to display the linked URL.
+     * Only applies when an `href` is provided.
+     * Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
+     */
+    target;
+    /**
+     * 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;
+    /**
+     * Emitted when the breadcrumb has focus.
+     */
+    ionFocus;
+    /**
+     * Emitted when the breadcrumb loses focus.
+     */
+    ionBlur;
+    /**
+     * Emitted when the collapsed indicator is clicked on.
+     * `ion-breadcrumbs` will listen for this and emit ionCollapsedClick.
+     * Normally we could just emit this as `ionCollapsedClick`
+     * and let the event bubble to `ion-breadcrumbs`,
+     * but if the event custom event is not set on `ion-breadcrumbs`,
+     * TypeScript will throw an error in user applications.
+     * @internal
+     */
+    collapsedClick;
     componentWillLoad() {
         this.inheritedAttributes = inheritAriaAttributes(this.el);
     }
     isClickable() {
         return this.href !== undefined;
     }
+    onFocus = () => {
+        this.ionFocus.emit();
+    };
+    onBlur = () => {
+        this.ionBlur.emit();
+    };
+    collapsedIndicatorClick = () => {
+        this.collapsedClick.emit({ ionShadowTarget: this.collapsedRef });
+    };
     render() {
         const { color, active, collapsed, disabled, download, el, inheritedAttributes, last, routerAnimation, routerDirection, separator, showCollapsedIndicator, target, } = this;
         const clickable = this.isClickable();
@@ -78,7 +139,7 @@ export class Breadcrumb {
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
                 'ion-activatable': clickable,
                 'ion-focusable': clickable,
-            }) }, h(TagType, Object.assign({ key: '479feb845f4a6d8009d5422b33eb423730b9722b' }, attrs, { class: "breadcrumb-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, inheritedAttributes), h("slot", { key: '3c5dcaeb0d258235d1b7707868026ff1d1404099', name: "start" }), h("slot", { key: 'f1cfb934443cd97dc220882c5e3596ea879d66cf' }), h("slot", { key: '539710121b5b1f3ee8d4c24a9651b67c2ae08add', name: "end" })), showCollapsedIndicator && (h("button", { key: 'ed53a95ccd89022c8b7bee0658a221ec62a5c73b', part: "collapsed-indicator", "aria-label": "Show more breadcrumbs", onClick: () => this.collapsedIndicatorClick(), ref: (collapsedEl) => (this.collapsedRef = collapsedEl), class: {
+            }) }, h(TagType, { key: '479feb845f4a6d8009d5422b33eb423730b9722b', ...attrs, class: "breadcrumb-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur, ...inheritedAttributes }, h("slot", { key: '3c5dcaeb0d258235d1b7707868026ff1d1404099', name: "start" }), h("slot", { key: 'f1cfb934443cd97dc220882c5e3596ea879d66cf' }), h("slot", { key: '539710121b5b1f3ee8d4c24a9651b67c2ae08add', name: "end" })), showCollapsedIndicator && (h("button", { key: 'ed53a95ccd89022c8b7bee0658a221ec62a5c73b', part: "collapsed-indicator", "aria-label": "Show more breadcrumbs", onClick: () => this.collapsedIndicatorClick(), ref: (collapsedEl) => (this.collapsedRef = collapsedEl), class: {
                 'breadcrumbs-collapsed-indicator': true,
             } }, h("ion-icon", { key: 'a849e1142a86f06f207cf11662fa2a560ab7fc6a', "aria-hidden": "true", icon: ellipsisHorizontal, lazy: false }))), showSeparator && (
         /**