@ionic/core 8.4.1-dev.11730807985.1b046f37 → 8.4.1-dev.11730889290.1eacfaf8

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

@@ -1,42 +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
- * 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.
@@ -73,14 +34,11 @@
    * @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) {
@@ -91,10 +49,6 @@
   flex: initial;
 }
 
-::slotted(ion-icon[slot]) {
-  font-size: 24px;
-}
-
 .range-slider {
   position: relative;
   flex: 1;
@@ -111,8 +65,8 @@
 
 .range-pin {
   position: absolute;
-  background: var(--ion-color-base);
-  color: var(--ion-color-contrast);
+  background: current-color(base);
+  color: current-color(contrast);
   text-align: center;
   box-sizing: border-box;
 }
@@ -261,7 +215,6 @@
    * 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;
@@ -290,6 +243,121 @@
   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
@@ -304,20 +372,12 @@
   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;
@@ -340,27 +400,7 @@
   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
@@ -376,15 +416,6 @@
    */
   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;

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

@@ -565,7 +565,7 @@ export class Range {
         const needsEndAdjustment = inItem && !hasEndContent;
         const theme = getIonTheme(this);
         renderHiddenInput(true, el, this.name, JSON.stringify(this.getValue()), disabled);
-        return (h(Host, { key: '3b2f7fd206cf2f4db5013f07d93c8a2e4d633849', onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses(this.color, {
+        return (h(Host, { key: 'b0c385f75bcfdfd1e0300688385acfe37e1473f1', onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses(this.color, {
                 [theme]: true,
                 'in-item': inItem,
                 'range-disabled': disabled,
@@ -574,10 +574,10 @@ export class Range {
                 [`range-label-placement-${labelPlacement}`]: true,
                 'range-item-start-adjustment': needsStartAdjustment,
                 'range-item-end-adjustment': needsEndAdjustment,
-            }) }, h("label", { key: 'ddaa73ffb5784e957027c9e5a99d8074bad674f5', class: "range-wrapper", id: "range-label" }, h("div", { key: '7c75e897653685f287dc7d2020df2a0de8ebc026', class: {
+            }) }, h("label", { key: '0807b9fbc23a522494a3a97e72963994a4e51dd2', class: "range-wrapper", id: "range-label" }, h("div", { key: 'da8dcd26be7cfd7e873333e77a93ae918a2d4c80', 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: '9ac6e18c11f148336a0e30a73f838c48bd6fe9cd', class: "native-wrapper" }, h("slot", { key: '73853675902e105bd1c0ebd10d97e46b5e71bd3e', name: "start" }), this.renderRangeSlider(), h("slot", { key: '1df30434c1473e470e6157eec9e955c495304ad4', name: "end" })))));
+            }, part: "label" }, label !== undefined ? h("div", { class: "label-text" }, label) : h("slot", { name: "label" })), h("div", { key: '9f6eb9d2008d9a7058e1101d6fdfa1544284984b', class: "native-wrapper" }, h("slot", { key: '59da842f09322a5f0eaf8e721249ea0e57a334d3', name: "start" }), this.renderRangeSlider(), h("slot", { key: '208a729e13c0ab6daeda6b25bdeda341518e6d4b', name: "end" })))));
     }
     static get is() { return "ion-range"; }
     static get encapsulation() { return "shadow"; }
@@ -585,14 +585,14 @@ export class Range {
         return {
             "ios": ["range.ios.scss"],
             "md": ["range.md.scss"],
-            "ionic": ["range.md.scss"]
+            "ionic": ["range.ionic.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["range.ios.css"],
             "md": ["range.md.css"],
-            "ionic": ["range.md.css"]
+            "ionic": ["range.ionic.css"]
         };
     }
     static get properties() {

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

@@ -1,42 +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
- * 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.
@@ -73,14 +34,11 @@
    * @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) {
@@ -91,10 +49,6 @@
   flex: initial;
 }
 
-::slotted(ion-icon[slot]) {
-  font-size: 24px;
-}
-
 .range-slider {
   position: relative;
   flex: 1;
@@ -111,8 +65,8 @@
 
 .range-pin {
   position: absolute;
-  background: var(--ion-color-base);
-  color: var(--ion-color-contrast);
+  background: current-color(base);
+  color: current-color(contrast);
   text-align: center;
   box-sizing: border-box;
 }
@@ -261,7 +215,6 @@
    * 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;
@@ -290,6 +243,121 @@
   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
@@ -304,20 +372,12 @@
   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;
@@ -340,27 +400,7 @@
   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
@@ -376,15 +416,6 @@
    */
   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;

package/dist/collection/components/segment-view/segment-view.js

@@ -94,23 +94,25 @@ export class SegmentView {
     }
     render() {
         const { disabled, isManualScroll } = this;
-        return (h(Host, { key: '4d51263d62b33762e7bbea48834b1701014c7f99', class: {
+        return (h(Host, { key: 'a0b77ea1b2805b87da550d576aa9b0a36ada5d9f', class: {
                 'segment-view-disabled': disabled,
                 'segment-view-scroll-disabled': isManualScroll === false,
-            } }, h("slot", { key: '4191dcd9964efc4815ceec776a953f24ad75f02d' })));
+            } }, h("slot", { key: '0170106f9448d8d05d929ca0dc05add670db96b4' })));
     }
     static get is() { return "ion-segment-view"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["segment-view.ios.scss"],
-            "md": ["segment-view.md.scss"]
+            "md": ["segment-view.md.scss"],
+            "ionic": ["segment-view.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["segment-view.ios.css"],
-            "md": ["segment-view.md.css"]
+            "md": ["segment-view.md.css"],
+            "ionic": ["segment-view.md.css"]
         };
     }
     static get properties() {

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2024-11-05T12:02:25",
+  "timestamp": "2024-11-06T10:37:39",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.20.0",