@ionic/core 8.7.6-dev.11759493293.13f81b9f → 8.7.6-dev.11759524961.1cff6814

package/dist/collection/components/radio-group/radio-group.md.css

@@ -1,9 +1,3 @@
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -59,36 +53,6 @@
  *   }
  * }
  */
-ion-radio-group {
-  vertical-align: top;
-}
-
-/**
- * Error text should only be shown when .ion-invalid is present
- * on the radio group. Otherwise the helper text should be shown.
- */
-.radio-group-top .error-text {
-  display: none;
-}
-
-.radio-group-top .helper-text {
-  display: block;
-}
-
-.ion-touched.ion-invalid .radio-group-top .error-text {
-  display: block;
-}
-
-.ion-touched.ion-invalid .radio-group-top .helper-text {
-  display: none;
-}
-
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -144,6 +108,10 @@ ion-radio-group {
  *   }
  * }
  */
+ion-radio-group {
+  vertical-align: top;
+}
+
 .radio-group-wrapper {
   display: inline;
 }
@@ -152,20 +120,28 @@ ion-radio-group {
   line-height: 1.5;
 }
 
+/**
+ * Error text should only be shown when .ion-invalid is present
+ * on the radio group. Otherwise the helper text should be shown.
+ */
 .radio-group-top .error-text {
+  display: none;
   color: var(--ion-color-danger, #c5000f);
 }
 
 .radio-group-top .helper-text {
+  display: block;
   color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
 }
 
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
+.ion-touched.ion-invalid .radio-group-top .error-text {
+  display: block;
+}
+
+.ion-touched.ion-invalid .radio-group-top .helper-text {
+  display: none;
+}
+
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use

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

@@ -1,3 +1,36 @@
+/**
+ * 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.
+ */
 /**
  * A heuristic that applies CSS to tablet
  * viewports.
@@ -34,11 +67,14 @@
    * @prop --pin-background: Background of the range pin (only available in MD mode)
    * @prop --pin-color: Color of the range pin (only available in MD mode)
    */
+  --knob-handle-size: calc(var(--knob-size) * 2);
   display: flex;
   position: relative;
   flex: 3;
   align-items: center;
+  font-family: var(--ion-font-family, inherit);
   user-select: none;
+  z-index: 2;
 }
 
 :host(.range-disabled) {
@@ -49,6 +85,10 @@
   flex: initial;
 }
 
+::slotted(ion-icon[slot]) {
+  font-size: 24px;
+}
+
 .range-slider {
   position: relative;
   flex: 1;
@@ -65,8 +105,8 @@
 
 .range-pin {
   position: absolute;
-  background: current-color(base);
-  color: current-color(contrast);
+  background: var(--ion-color-base);
+  color: var(--ion-color-contrast);
   text-align: center;
   box-sizing: border-box;
 }
@@ -215,6 +255,7 @@
    * only the label would show and users
    * would not be able to see the range.
    */
+  max-width: 200px;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
@@ -243,121 +284,6 @@
   flex-direction: row;
 }
 
-/**
- * Label is on the right of the range in LTR and
- * on the left in RTL.
- */
-:host(.range-label-placement-end) .range-wrapper {
-  flex-direction: row-reverse;
-}
-
-/**
- * Label is on the left of the range in LTR and
- * on the right in RTL. Label also has a fixed width.
- */
-:host(.range-label-placement-fixed) .label-text-wrapper {
-  flex: 0 0 100px;
-  width: 100px;
-  min-width: 100px;
-  max-width: 200px;
-}
-
-/**
- * Label is on top of the range.
- */
-:host(.range-label-placement-stacked) .range-wrapper {
-  flex-direction: column;
-  align-items: stretch;
-}
-
-:host(.range-label-placement-stacked) .label-text-wrapper {
-  transform-origin: left top;
-}
-:host-context([dir=rtl]):host(.range-label-placement-stacked) .label-text-wrapper, :host-context([dir=rtl]).range-label-placement-stacked .label-text-wrapper {
-  transform-origin: right top;
-}
-
-@supports selector(:dir(rtl)) {
-  :host(.range-label-placement-stacked:dir(rtl)) .label-text-wrapper {
-    transform-origin: right top;
-  }
-}
-
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
-/**
- * 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.
- */
-/**
- * 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;
- *   }
- * }
- */
-:host {
-  --knob-handle-size: calc(var(--knob-size) * 2);
-  font-family: var(--ion-font-family, inherit);
-  z-index: 2;
-}
-
-::slotted(ion-icon[slot]) {
-  font-size: 24px;
-}
-
-::slotted([slot=label]) {
-  max-width: 200px;
-}
-
 :host(.range-label-placement-start) .label-text-wrapper {
   /**
    * The margin between the label and
@@ -372,12 +298,20 @@
   margin-bottom: 0;
 }
 
+/**
+ * Label is on the right of the range in LTR and
+ * on the left in RTL.
+ */
+:host(.range-label-placement-end) .range-wrapper {
+  flex-direction: row-reverse;
+}
+
+/**
+ * The margin between the label and
+ * the range should be on the start
+ * when the label sits at the end.
+ */
 :host(.range-label-placement-end) .label-text-wrapper {
-  /**
-   * The margin between the label and
-   * the range should be on the start
-   * when the label sits at the end.
-   */
   -webkit-margin-start: 16px;
   margin-inline-start: 16px;
   -webkit-margin-end: 0;
@@ -400,7 +334,27 @@
   margin-bottom: 0;
 }
 
+/**
+ * Label is on the left of the range in LTR and
+ * on the right in RTL. Label also has a fixed width.
+ */
+:host(.range-label-placement-fixed) .label-text-wrapper {
+  flex: 0 0 100px;
+  width: 100px;
+  min-width: 100px;
+  max-width: 200px;
+}
+
+/**
+ * Label is on top of the range.
+ */
+:host(.range-label-placement-stacked) .range-wrapper {
+  flex-direction: column;
+  align-items: stretch;
+}
+
 :host(.range-label-placement-stacked) .label-text-wrapper {
+  transform-origin: left top;
   transform: scale(0.75);
   /**
   * The margin between the label and
@@ -416,6 +370,15 @@
    */
   max-width: calc(100% / 0.75);
 }
+:host-context([dir=rtl]):host(.range-label-placement-stacked) .label-text-wrapper, :host-context([dir=rtl]).range-label-placement-stacked .label-text-wrapper {
+  transform-origin: right top;
+}
+
+@supports selector(:dir(rtl)) {
+  :host(.range-label-placement-stacked:dir(rtl)) .label-text-wrapper {
+    transform-origin: right top;
+  }
+}
 
 :host(.in-item.range-label-placement-stacked) .label-text-wrapper {
   margin-top: 10px;
@@ -426,12 +389,6 @@
   margin-bottom: 0px;
 }
 
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use

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

@@ -7,12 +7,11 @@ import { inheritAriaAttributes, clamp, debounceEvent, renderHiddenInput, isSafeN
 import { printIonWarning } from "../../utils/logging/index";
 import { isRTL } from "../../utils/rtl/index";
 import { createColorClasses, hostContext } from "../../utils/theme";
-import { getIonTheme } from "../../global/ionic-global";
+import { getIonMode } from "../../global/ionic-global";
 import { roundToMaxDecimalPlaces } from "../../utils/floating-point";
 // TODO(FW-2832): types
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  *
  * @slot label - The label text to associate with the range. Use the "labelPlacement" property to control where the label is placed relative to the range.
  * @slot start - Content is placed to the left of the range slider in LTR, and to the right in RTL.
@@ -680,10 +679,10 @@ export class Range {
          */
         const hasEndContent = (hasLabel && labelPlacement === 'end') || this.hasEndSlotContent;
         const needsEndAdjustment = inItem && !hasEndContent;
-        const theme = getIonTheme(this);
+        const mode = getIonMode(this);
         renderHiddenInput(true, el, this.name, JSON.stringify(this.getValue()), disabled);
-        return (h(Host, { key: 'abffed8811679954ae1ccded14b09c1070aec868', onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses(this.color, {
-                [theme]: true,
+        return (h(Host, { key: 'ef7b01f80515bcaeb2983934ad7f10a6bd5d13ec', onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses(this.color, {
+                [mode]: true,
                 'in-item': inItem,
                 'range-disabled': disabled,
                 'range-pressed': pressedKnob !== undefined,
@@ -691,31 +690,30 @@ export class Range {
                 [`range-label-placement-${labelPlacement}`]: true,
                 'range-item-start-adjustment': needsStartAdjustment,
                 'range-item-end-adjustment': needsEndAdjustment,
-            }) }, h("label", { key: '4296d7310d335ba9783d96e982159e8563a3ea35', class: "range-wrapper", id: "range-label" }, h("div", { key: '8087acc009ee1287f0ddd483669cd6284ff84004', class: {
+            }) }, h("label", { key: 'fd8aa90a9d52be9da024b907e68858dae424449d', class: "range-wrapper", id: "range-label" }, h("div", { key: '2172b4f329c22017dd23475c80aac25ba6e753eb', 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: 'fa1207cbb99ccb9a9cc60c2409977c1b925476b0', class: "native-wrapper" }, h("slot", { key: 'fdbe6f0c142f3511e1b526f6d4df195c105660c5', name: "start" }), this.renderRangeSlider(), h("slot", { key: '3f03f148fbd461a7a87c8f2da5e5cba37213ef30', name: "end" })))));
+            }, part: "label" }, label !== undefined ? h("div", { class: "label-text" }, label) : h("slot", { name: "label" })), h("div", { key: '3c318bf2ea0576646d4c010bf44573fd0f483186', class: "native-wrapper" }, h("slot", { key: '6586fd6fc96271e73f8a86c202d1913ad1a26f96', name: "start" }), this.renderRangeSlider(), h("slot", { key: '74ac0bc2d2cb66ef708bb729f88b6ecbc1b2155d', name: "end" })))));
     }
     static get is() { return "ion-range"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["range.ios.scss"],
-            "md": ["range.md.scss"],
-            "ionic": ["range.ionic.scss"]
+            "md": ["range.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["range.ios.css"],
-            "md": ["range.md.css"],
-            "ionic": ["range.ionic.css"]
+            "md": ["range.md.css"]
         };
     }
     static get properties() {
         return {
             "color": {
                 "type": "string",
+                "attribute": "color",
                 "mutable": false,
                 "complexType": {
                     "original": "Color",
@@ -736,11 +734,11 @@ export class Range {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true,
-                "attribute": "color"
+                "reflect": true
             },
             "debounce": {
                 "type": "number",
+                "attribute": "debounce",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -755,11 +753,11 @@ export class Range {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
-                "attribute": "debounce"
+                "reflect": false
             },
             "name": {
                 "type": "string",
+                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -775,11 +773,11 @@ export class Range {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "name",
                 "defaultValue": "this.rangeId"
             },
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -794,11 +792,11 @@ export class Range {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
-                "attribute": "label"
+                "reflect": false
             },
             "dualKnobs": {
                 "type": "boolean",
+                "attribute": "dual-knobs",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -814,11 +812,11 @@ export class Range {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "dual-knobs",
                 "defaultValue": "false"
             },
             "min": {
                 "type": "number",
+                "attribute": "min",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -834,11 +832,11 @@ export class Range {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "min",
                 "defaultValue": "0"
             },
             "max": {
                 "type": "number",
+                "attribute": "max",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -854,11 +852,11 @@ export class Range {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "max",
                 "defaultValue": "100"
             },
             "pin": {
                 "type": "boolean",
+                "attribute": "pin",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -874,11 +872,11 @@ export class Range {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "pin",
                 "defaultValue": "false"
             },
             "pinFormatter": {
                 "type": "unknown",
+                "attribute": "pin-formatter",
                 "mutable": false,
                 "complexType": {
                     "original": "PinFormatter",
@@ -903,6 +901,7 @@ export class Range {
             },
             "snaps": {
                 "type": "boolean",
+                "attribute": "snaps",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -918,11 +917,11 @@ export class Range {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "snaps",
                 "defaultValue": "false"
             },
             "step": {
                 "type": "number",
+                "attribute": "step",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -938,11 +937,11 @@ export class Range {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "step",
                 "defaultValue": "1"
             },
             "ticks": {
                 "type": "boolean",
+                "attribute": "ticks",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -958,11 +957,11 @@ export class Range {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "ticks",
                 "defaultValue": "true"
             },
             "activeBarStart": {
                 "type": "number",
+                "attribute": "active-bar-start",
                 "mutable": true,
                 "complexType": {
                     "original": "number",
@@ -977,11 +976,11 @@ export class Range {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
-                "attribute": "active-bar-start"
+                "reflect": false
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -997,11 +996,11 @@ export class Range {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "value": {
                 "type": "number",
+                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "RangeValue",
@@ -1023,11 +1022,11 @@ export class Range {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "value",
                 "defaultValue": "0"
             },
             "labelPlacement": {
                 "type": "string",
+                "attribute": "label-placement",
                 "mutable": false,
                 "complexType": {
                     "original": "'start' | 'end' | 'fixed' | 'stacked'",
@@ -1043,7 +1042,6 @@ export class Range {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "label-placement",
                 "defaultValue": "'start'"
             }
         };