@ionic/core 8.8.18-dev.11786108988.1fd94742 → 8.8.18-dev.11786109471.1285bcfb

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

@@ -1,167 +1,3 @@
-/**
- * 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
@@ -406,39 +242,6 @@ ion-checkbox.select-option-has-rich-content::part(label),
   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 {
@@ -616,10 +419,10 @@ textarea.alert-input {
 }
 
 .alert-head {
-  -webkit-padding-start: 24px;
-  padding-inline-start: 24px;
-  -webkit-padding-end: 24px;
-  padding-inline-end: 24px;
+  -webkit-padding-start: 23px;
+  padding-inline-start: 23px;
+  -webkit-padding-end: 23px;
+  padding-inline-end: 23px;
   padding-top: 20px;
   padding-bottom: 15px;
   text-align: start;
@@ -719,56 +522,30 @@ 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;
-  max-width: calc(100% - 20px);
+  flex: 1;
   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));
 }
-
-.radio-label-placement-end .alert-radio-icon {
-  inset-inline-start: 24px;
-}
-
-.radio-label-placement-start .alert-radio-icon {
-  inset-inline-end: 24px;
+.alert-radio-icon {
+  inset-inline-start: 26px;
 }
 
 .alert-radio-inner {
@@ -798,42 +575,22 @@ 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;
-  max-width: calc(100% - 16px);
+  flex: 1;
+  width: calc(100% - 53px);
   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;
@@ -841,13 +598,8 @@ textarea.alert-input {
   border-color: var(--ion-color-step-550, var(--ion-background-color-step-550, #737373));
   contain: strict;
 }
-
-.checkbox-label-placement-end .alert-checkbox-icon {
-  inset-inline-start: 24px;
-}
-
-.checkbox-label-placement-start .alert-checkbox-icon {
-  inset-inline-end: 24px;
+.alert-checkbox-icon {
+  inset-inline-start: 26px;
 }
 
 [aria-checked=true] .alert-checkbox-icon {
@@ -906,7 +658,7 @@ textarea.alert-input {
   overflow: hidden;
 }
 
-.alert-button-group .alert-button-inner {
+.alert-button-inner {
   justify-content: flex-end;
 }
 

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

@@ -8,9 +8,6 @@ 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,40 +15,25 @@ import { getIonMode } from "../../global/ionic-global";
  * @part text - The back button text.
  */
 export class BackButton {
-    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;
+    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);
+        };
+    }
     componentWillLoad() {
         this.inheritedAttributes = inheritAriaAttributes(this.el);
         if (this.defaultHref === undefined) {
@@ -83,14 +68,6 @@ 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,22 +4,20 @@
 import { Host, h } from "@stencil/core";
 import { getIonMode } from "../../global/ionic-global";
 export class Backdrop {
-    /**
-     * 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;
+    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;
+    }
     onMouseDown(ev) {
         this.emitTap(ev);
     }

package/dist/collection/components/badge/badge.js

@@ -8,12 +8,6 @@ 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,102 +14,41 @@ import { getIonMode } from "../../global/ionic-global";
  * @part collapsed-indicator - The indicator element that shows the breadcrumbs are collapsed.
  */
 export class Breadcrumb {
-    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;
+    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 });
+        };
+    }
     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();
@@ -139,7 +78,7 @@ export class Breadcrumb {
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
                 'ion-activatable': clickable,
                 'ion-focusable': clickable,
-            }) }, 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: {
+            }) }, 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: {
                 'breadcrumbs-collapsed-indicator': true,
             } }, h("ion-icon", { key: 'a849e1142a86f06f207cf11662fa2a560ab7fc6a', "aria-hidden": "true", icon: ellipsisHorizontal, lazy: false }))), showSeparator && (
         /**