@ionic/core 8.8.4-dev.11776186452.1cc0af05 → 8.8.4-dev.11776330355.18181725

package/dist/collection/components/alert/alert.js

@@ -9,7 +9,6 @@ import { createLockController } from "../../utils/lock-controller";
 import { printIonWarning } from "../../utils/logging/index";
 import { createDelegateController, createTriggerController, BACKDROP, dismiss, eventMethod, isCancel, prepareOverlay, present, safeCall, setOverlayId, } from "../../utils/overlays";
 import { sanitizeDOMString } from "../../utils/sanitization/index";
-import { renderOptionLabel } from "../../utils/select-option-render";
 import { getClassMap } from "../../utils/theme";
 import { config } from "../../global/config";
 import { getIonMode, getIonTheme } from "../../global/ionic-global";
@@ -173,7 +172,22 @@ export class Alert {
         this.inputType = inputTypes.values().next().value;
         this.processedInputs = inputs.map((i, index) => {
             var _a;
-            return Object.assign(Object.assign({}, i), { type: i.type || 'text', name: i.name || `${index}`, placeholder: i.placeholder || '', checked: !!i.checked, disabled: !!i.disabled, id: i.id || `alert-input-${this.overlayIndex}-${index}`, cssClass: (_a = i.cssClass) !== null && _a !== void 0 ? _a : '', attributes: i.attributes || {}, tabindex: i.type === 'radio' && i !== focusable ? -1 : 0 });
+            return ({
+                type: i.type || 'text',
+                name: i.name || `${index}`,
+                placeholder: i.placeholder || '',
+                value: i.value,
+                label: i.label,
+                checked: !!i.checked,
+                disabled: !!i.disabled,
+                id: i.id || `alert-input-${this.overlayIndex}-${index}`,
+                handler: i.handler,
+                min: i.min,
+                max: i.max,
+                cssClass: (_a = i.cssClass) !== null && _a !== void 0 ? _a : '',
+                attributes: i.attributes || {},
+                tabindex: i.type === 'radio' && i !== focusable ? -1 : 0,
+            });
         });
     }
     connectedCallback() {
@@ -361,46 +375,14 @@ export class Alert {
         if (inputs.length === 0) {
             return null;
         }
-        return (h("div", { class: "alert-checkbox-group" }, inputs.map((i) => {
-            /**
-             * Cast to `SelectAlertInput` to access rich content
-             * fields (`startContent`, `endContent`, `description`)
-             * that are passed through from `ion-select` but not
-             * part of the public `AlertInput` interface.
-             */
-            const richInput = i;
-            const optionLabelOptions = {
-                id: richInput.id,
-                label: richInput.label,
-                startContent: richInput.startContent,
-                endContent: richInput.endContent,
-                description: richInput.description,
-            };
-            return (h("button", { type: "button", onClick: () => this.cbClick(i), "aria-checked": `${i.checked}`, id: i.id, disabled: i.disabled, tabIndex: i.tabindex, role: "checkbox", class: Object.assign(Object.assign({}, getClassMap(i.cssClass)), { 'alert-tappable': true, 'alert-checkbox': true, 'alert-checkbox-button': true, 'ion-focusable': true, 'alert-checkbox-button-disabled': i.disabled || false }) }, h("div", { class: "alert-button-inner" }, h("div", { class: "alert-checkbox-icon" }, h("div", { class: "alert-checkbox-inner" })), renderOptionLabel(optionLabelOptions, 'alert-checkbox-label')), theme === 'md' && h("ion-ripple-effect", null)));
-        })));
+        return (h("div", { class: "alert-checkbox-group" }, inputs.map((i) => (h("button", { type: "button", onClick: () => this.cbClick(i), "aria-checked": `${i.checked}`, id: i.id, disabled: i.disabled, tabIndex: i.tabindex, role: "checkbox", class: Object.assign(Object.assign({}, getClassMap(i.cssClass)), { 'alert-tappable': true, 'alert-checkbox': true, 'alert-checkbox-button': true, 'ion-focusable': true, 'alert-checkbox-button-disabled': i.disabled || false }) }, h("div", { class: "alert-button-inner" }, h("div", { class: "alert-checkbox-icon" }, h("div", { class: "alert-checkbox-inner" })), h("div", { class: "alert-checkbox-label" }, i.label)), theme === 'md' && h("ion-ripple-effect", null))))));
     }
     renderRadio() {
         const inputs = this.processedInputs;
         if (inputs.length === 0) {
             return null;
         }
-        return (h("div", { class: "alert-radio-group", role: "radiogroup", "aria-activedescendant": this.activeId }, inputs.map((i) => {
-            /**
-             * Cast to `SelectAlertInput` to access rich content
-             * fields (`startContent`, `endContent`, `description`)
-             * that are passed through from `ion-select` but not
-             * part of the public `AlertInput` interface.
-             */
-            const richInput = i;
-            const optionLabelOptions = {
-                id: richInput.id,
-                label: richInput.label,
-                startContent: richInput.startContent,
-                endContent: richInput.endContent,
-                description: richInput.description,
-            };
-            return (h("button", { type: "button", onClick: () => this.rbClick(i), "aria-checked": `${i.checked}`, disabled: i.disabled, id: i.id, tabIndex: i.tabindex, class: Object.assign(Object.assign({}, getClassMap(i.cssClass)), { 'alert-radio-button': true, 'alert-tappable': true, 'alert-radio': true, 'ion-focusable': true, 'alert-radio-button-disabled': i.disabled || false }), role: "radio" }, h("div", { class: "alert-button-inner" }, h("div", { class: "alert-radio-icon" }, h("div", { class: "alert-radio-inner" })), renderOptionLabel(optionLabelOptions, 'alert-radio-label'))));
-        })));
+        return (h("div", { class: "alert-radio-group", role: "radiogroup", "aria-activedescendant": this.activeId }, inputs.map((i) => (h("button", { type: "button", onClick: () => this.rbClick(i), "aria-checked": `${i.checked}`, disabled: i.disabled, id: i.id, tabIndex: i.tabindex, class: Object.assign(Object.assign({}, getClassMap(i.cssClass)), { 'alert-radio-button': true, 'alert-tappable': true, 'alert-radio': true, 'ion-focusable': true, 'alert-radio-button-disabled': i.disabled || false }), role: "radio" }, h("div", { class: "alert-button-inner" }, h("div", { class: "alert-radio-icon" }, h("div", { class: "alert-radio-inner" })), h("div", { class: "alert-radio-label" }, i.label)))))));
     }
     renderInput() {
         const inputs = this.processedInputs;
@@ -459,9 +441,9 @@ export class Alert {
          * If neither are defined, do not set aria-labelledby.
          */
         const ariaLabelledBy = header && subHeader ? `${hdrId} ${subHdrId}` : header ? hdrId : subHeader ? subHdrId : null;
-        return (h(Host, { key: '643939c4af9c1a68b60eea5724f8662f13bb3f72', tabindex: "-1", style: {
+        return (h(Host, { key: '53f8b0e1035ca965ba44f8e1314c59a227b08173', tabindex: "-1", style: {
                 zIndex: `${20000 + overlayIndex}`,
-            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [theme]: true, 'overlay-hidden': true, 'alert-translucent': this.translucent }), onIonAlertWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }, h("ion-backdrop", { key: '4780caec3fe71a8d5f2112b8b8726d5a7de91192', tappable: this.backdropDismiss }), h("div", { key: 'cc401fcade02bfc557820d31554d5e054da79b28', tabindex: "0", "aria-hidden": "true" }), h("div", Object.assign({ key: '234caa09b6e0d224bdce0de0659dcdbd668cad91', class: "alert-wrapper ion-overlay-wrapper", role: role, "aria-modal": "true", "aria-labelledby": ariaLabelledBy, "aria-describedby": message !== undefined ? msgId : null, tabindex: "0", ref: (el) => (this.wrapperEl = el) }, htmlAttributes), h("div", { key: 'c8c72cd019eace73b622f2510e533c281267c48a', class: "alert-head" }, header && (h("h2", { key: '0d95f68560dbb67721476d184df0d8654a07959c', id: hdrId, class: "alert-title" }, header)), subHeader && !header && (h("h2", { key: '6444463a2aeef3f076b0bfdfeba4387ced177826', id: subHdrId, class: "alert-sub-title" }, subHeader)), subHeader && header && (h("h3", { key: 'a92d7b54567152b57a8ccab6840e851c8fe5a47b', id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), h("div", { key: '3ba2cdf15219f03123f6dd884eb7a4da38549c08', tabindex: "0", "aria-hidden": "true" })));
+            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [theme]: true, 'overlay-hidden': true, 'alert-translucent': this.translucent }), onIonAlertWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }, h("ion-backdrop", { key: '39499a198543709f538fa0328214d742754543ab', tappable: this.backdropDismiss }), h("div", { key: '16417758e5ac05cfa049db5086c1ffde81fc6156', tabindex: "0", "aria-hidden": "true" }), h("div", Object.assign({ key: 'cc7dde0877f70be21019cd2e8e6c843815ec9682', class: "alert-wrapper ion-overlay-wrapper", role: role, "aria-modal": "true", "aria-labelledby": ariaLabelledBy, "aria-describedby": message !== undefined ? msgId : null, tabindex: "0", ref: (el) => (this.wrapperEl = el) }, htmlAttributes), h("div", { key: '525d28d77b6467b441ff9d357049aec7565e6f6a', class: "alert-head" }, header && (h("h2", { key: '974fc725163da00216c3c8b7b6c72c005628e0fc', id: hdrId, class: "alert-title" }, header)), subHeader && !header && (h("h2", { key: 'eedf04dbe331917c7b1348f8020d959119cc9f0f', id: subHdrId, class: "alert-sub-title" }, subHeader)), subHeader && header && (h("h3", { key: '80dbbd75184a3857172eca25f30dee950c08709b', id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), h("div", { key: '0d83a74b7ae595d0593edadfe6b812435534abea', tabindex: "0", "aria-hidden": "true" })));
     }
     static get is() { return "ion-alert"; }
     static get encapsulation() { return "scoped"; }
@@ -469,14 +451,14 @@ export class Alert {
         return {
             "ios": ["alert.ios.scss"],
             "md": ["alert.md.scss"],
-            "ionic": ["alert.ionic.scss"]
+            "ionic": ["alert.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["alert.ios.css"],
             "md": ["alert.md.css"],
-            "ionic": ["alert.ionic.css"]
+            "ionic": ["alert.md.css"]
         };
     }
     static get properties() {

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

@@ -1,58 +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.
- */
 /**
  * Convert a pixels given value into rem
  * 
@@ -349,34 +294,6 @@ textarea.alert-input {
   resize: none;
 }
 
-.alert-radio-label,
-.alert-checkbox-label {
-  display: flex;
-  align-items: center;
-}
-
-.select-option-content {
-  flex: 1;
-}
-
-.select-option-description {
-  display: block;
-}
-
-.alert-radio-label,
-.alert-checkbox-label {
-  gap: 12px;
-}
-
-.select-option-description {
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 5px;
-  padding-bottom: 0;
-  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
-  font-size: 0.75rem;
-}
-
 /**
  * Convert a pixels given value into rem
  * 

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

@@ -430,28 +430,32 @@
   margin-bottom: calc(var(--token-space-200, var(--token-scale-200, 8px)) + var(--token-font-size-300, 0.75rem));
 }
 
-.range-bar.range-bar-active {
-  bottom: 0;
-  width: auto;
-  background: var(--bar-background-active);
+.range-bar.has-ticks {
+  border-radius: 0;
 }
+
 .range-bar.range-bar-active.has-ticks {
-  border-radius: 0;
   -webkit-margin-start: calc(-1 * var(--token-scale-100, 4px) * 0.5);
   margin-inline-start: calc(-1 * var(--token-scale-100, 4px) * 0.5);
   -webkit-margin-end: calc(-1 * var(--token-scale-100, 4px) * 0.5);
   margin-inline-end: calc(-1 * var(--token-scale-100, 4px) * 0.5);
 }
 
+.range-bar.range-bar-active {
+  bottom: 0;
+  width: auto;
+  background: var(--bar-background-active);
+}
+
 .range-tick {
   -webkit-margin-start: calc(var(--token-scale-100, 4px) * -0.5);
   margin-inline-start: calc(var(--token-scale-100, 4px) * -0.5);
-  border-radius: var(--token-border-radius-0, var(--token-scale-0, 0px));
+  border-radius: var(--token-border-radius-400, var(--token-scale-400, 16px));
   position: absolute;
-  top: calc(var(--height) * 0.5 - var(--token-scale-300, 12px) * 0.5);
-  width: var(--token-scale-100, 4px);
-  height: var(--token-scale-300, 12px);
-  background: var(--token-primitives-neutral-100, #f3f3f3);
+  top: calc(var(--height) * 0.5 - var(--token-scale-400, 16px) * 0.5);
+  width: var(--token-scale-050, 2px);
+  height: var(--token-scale-400, 16px);
+  background: var(--bar-background);
   pointer-events: none;
 }
 

package/dist/collection/components/range/range.js

@@ -692,7 +692,10 @@ export class Range {
             } }, ticks.map((tick) => (h("div", { style: tickStyle(tick), role: "presentation", class: {
                 'range-tick': true,
                 'range-tick-active': tick.active,
-            }, part: tick.active ? 'tick-active' : 'tick' }))), h("div", { class: "range-bar-container" }, h("div", { class: "range-bar", role: "presentation", part: "bar" }), h("div", { class: {
+            }, part: tick.active ? 'tick-active' : 'tick' }))), h("div", { class: "range-bar-container" }, h("div", { class: {
+                'range-bar': true,
+                'has-ticks': ticks.length > 0,
+            }, role: "presentation", part: "bar" }), h("div", { class: {
                 'range-bar': true,
                 'range-bar-active': true,
                 'has-ticks': ticks.length > 0,
@@ -770,7 +773,7 @@ export class Range {
         const valueAtMin = dualKnobs ? this.valA === min || this.valB === min : this.valA === min;
         const valueAtMax = dualKnobs ? this.valA === max || this.valB === max : this.valA === max;
         renderHiddenInput(true, el, this.name, JSON.stringify(this.getValue()), disabled);
-        return (h(Host, { key: 'a6262069e7dcc01413f9ade5ad4972127c2dd523', onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses(this.color, {
+        return (h(Host, { key: '1b8ca217fa6965fc038fb4ca8f0bc9142b3893ad', onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses(this.color, {
                 [theme]: true,
                 'in-item': inItem,
                 'range-disabled': disabled,
@@ -784,10 +787,10 @@ export class Range {
                 'range-item-end-adjustment': needsEndAdjustment,
                 'range-value-min': valueAtMin,
                 'range-value-max': valueAtMax,
-            }) }, h("label", { key: 'e39421b320cc84f9f42840bd4d9d8d2bb241518f', class: "range-wrapper", id: "range-label" }, h("div", { key: '818f6e03be2264327e5b31e4b129f6493b9268dd', class: {
+            }) }, h("label", { key: '98b02130c9bb5a9ba6557be28f1ac09be0d10806', class: "range-wrapper", id: "range-label" }, h("div", { key: '570083103b51b335c805672918d69e997dc30e66', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label" }, label !== undefined ? h("div", { class: "label-text" }, label) : h("slot", { name: "label" })), h("div", { key: '8eb7dd434857a6ffc4e65db43876c61f6fd88cc8', class: "native-wrapper" }, h("slot", { key: 'bf0d3de82b50057f3e53001f66dc9da815b52ed3', name: "start" }), this.renderRangeSlider(), h("slot", { key: '46db83c94be79b8c4bf37eeab0531723a8f2b237', name: "end" })))));
+            }, part: "label" }, label !== undefined ? h("div", { class: "label-text" }, label) : h("slot", { name: "label" })), h("div", { key: '1e3233a747d0adca6611234d0675ce049ef979cf', class: "native-wrapper" }, h("slot", { key: '4f06a217592a98d889420468eb282ba8652ef1cc', name: "start" }), this.renderRangeSlider(), h("slot", { key: '4286279dbadf0e92bffbd5e98d5e36cba095be3c', name: "end" })))));
     }
     static get is() { return "ion-range"; }
     static get encapsulation() { return "shadow"; }

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

@@ -81,13 +81,6 @@
    * @prop --border-width: Width of the select border
    *
    * @prop --ripple-color: The color of the ripple effect on MD mode.
-   *
-   * @prop --select-text-media-width: The width of media (icons/images) in the select text.
-   * @prop --select-text-media-height: The height of media (icons/images) in the select text.
-   * @prop --select-text-media-border-width: The border width of media (icons/images) in the select text.
-   * @prop --select-text-media-border-color: The border color of media (icons/images) in the select text.
-   * @prop --select-text-media-border-radius: The border radius of media (icons/images) in the select text.
-   * @prop --select-text-media-border-style: The border style of media (icons/images) in the select text.
    */
   --padding-top: 0px;
   --padding-end: 0px;
@@ -99,8 +92,6 @@
   --highlight-color-focused: ion-color(primary, base);
   --highlight-color-valid: ion-color(success, base);
   --highlight-color-invalid: ion-color(danger, base);
-  --select-text-media-height: 1.5em;
-  --select-text-media-width: 1.5em;
   /**
    * This is a private API that is used to switch
    * out the highlight color based on the state
@@ -205,19 +196,6 @@ button {
   overflow: hidden;
 }
 
-.select-text img,
-.select-text ion-img,
-.select-text ion-icon,
-.select-text ion-thumbnail,
-.select-text ion-avatar {
-  border-radius: var(--select-text-media-border-radius);
-  width: var(--select-text-media-width);
-  height: var(--select-text-media-height);
-  border-width: var(--select-text-media-border-width);
-  border-style: var(--select-text-media-border-style);
-  border-color: var(--select-text-media-border-color);
-}
-
 .select-wrapper {
   display: flex;
   position: relative;
@@ -589,15 +567,6 @@ button {
   color: var(--token-text-default, var(--token-primitives-neutral-1200, #242424));
 }
 
-/**
- * If the select text contains rich content, we want to add some
- * spacing between the items without changing the display to prevent
- * losing the ellipsis behavior.
- */
-.select-text > * {
-  margin-inline-start: var(--token-space-200, var(--token-scale-200, 8px));
-}
-
 .label-text-wrapper {
   font-size: var(--token-font-size-300, 0.75rem);
   font-weight: var(--token-font-weight-medium, 500);

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

@@ -103,13 +103,6 @@
    * @prop --border-width: Width of the select border
    *
    * @prop --ripple-color: The color of the ripple effect on MD mode.
-   *
-   * @prop --select-text-media-width: The width of media (icons/images) in the select text.
-   * @prop --select-text-media-height: The height of media (icons/images) in the select text.
-   * @prop --select-text-media-border-width: The border width of media (icons/images) in the select text.
-   * @prop --select-text-media-border-color: The border color of media (icons/images) in the select text.
-   * @prop --select-text-media-border-radius: The border radius of media (icons/images) in the select text.
-   * @prop --select-text-media-border-style: The border style of media (icons/images) in the select text.
    */
   --padding-top: 0px;
   --padding-end: 0px;
@@ -121,8 +114,6 @@
   --highlight-color-focused: var(--ion-color-primary, #0054e9);
   --highlight-color-valid: var(--ion-color-success, #2dd55b);
   --highlight-color-invalid: var(--ion-color-danger, #c5000f);
-  --select-text-media-height: 1.5em;
-  --select-text-media-width: 1.5em;
   /**
    * This is a private API that is used to switch
    * out the highlight color based on the state
@@ -227,19 +218,6 @@ button {
   overflow: hidden;
 }
 
-.select-text img,
-.select-text ion-img,
-.select-text ion-icon,
-.select-text ion-thumbnail,
-.select-text ion-avatar {
-  border-radius: var(--select-text-media-border-radius);
-  width: var(--select-text-media-width);
-  height: var(--select-text-media-height);
-  border-width: var(--select-text-media-border-width);
-  border-style: var(--select-text-media-border-style);
-  border-color: var(--select-text-media-border-color);
-}
-
 .select-wrapper {
   display: flex;
   position: relative;
@@ -641,15 +619,6 @@ button {
   min-width: 16px;
 }
 
-/**
- * If the select text contains rich content, we want to add some
- * spacing between the items without changing the display to prevent
- * losing the ellipsis behavior.
- */
-.select-text > * {
-  margin-inline-start: 8px;
-}
-
 .label-text-wrapper {
   /**
    * Label text should not extend