@ionic/core 8.4.2-dev.11734347773.16e58dbd → 8.4.2-dev.11736265112.120bf7af

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

@@ -5,10 +5,9 @@ import { Host, h, writeTask } from "@stencil/core";
 import { raf } from "../../utils/helpers";
 import { isRTL } from "../../utils/rtl/index";
 import { createColorClasses, hostContext } from "../../utils/theme";
-import { getIonTheme } from "../../global/ionic-global";
+import { getIonMode } from "../../global/ionic-global";
 /**
- * @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.
  */
 export class Segment {
     constructor() {
@@ -150,6 +149,7 @@ export class Segment {
         this.emitStyle();
     }
     async componentDidLoad() {
+        this.segmentViewEl = this.getSegmentView();
         this.setCheckedClasses();
         /**
          * We need to wait for the buttons to all be rendered
@@ -529,30 +529,28 @@ export class Segment {
         current.setFocus();
     }
     render() {
-        const theme = getIonTheme(this);
-        return (h(Host, { key: '844dfde9cc22bbe24f63e97805d6bcbe5c48ce83', role: "tablist", onClick: this.onClick, class: createColorClasses(this.color, {
-                [theme]: true,
+        const mode = getIonMode(this);
+        return (h(Host, { key: 'b1eb4a6e4f953f6c4882395585799503735bbc6b', role: "tablist", onClick: this.onClick, class: createColorClasses(this.color, {
+                [mode]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
                 'segment-activated': this.activated,
                 'segment-disabled': this.disabled,
                 'segment-scrollable': this.scrollable,
-            }) }, h("slot", { key: '2318a0c7c054860e0a9b9259e91d0c823b2bdfcf', onSlotchange: this.onSlottedItemsChange })));
+            }) }, h("slot", { key: 'e7df6b017d154f30eb8021bc965f2e6c8e6480bf', onSlotchange: this.onSlottedItemsChange })));
     }
     static get is() { return "ion-segment"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["segment.ios.scss"],
-            "md": ["segment.md.scss"],
-            "ionic": ["segment.ionic.scss"]
+            "md": ["segment.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["segment.ios.css"],
-            "md": ["segment.md.css"],
-            "ionic": ["segment.ionic.css"]
+            "md": ["segment.md.css"]
         };
     }
     static get properties() {
@@ -577,6 +575,8 @@ export class Segment {
                     "tags": [],
                     "text": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics)."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "color",
                 "reflect": true
             },
@@ -594,6 +594,8 @@ export class Segment {
                     "tags": [],
                     "text": "If `true`, the user cannot interact with the segment."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
@@ -612,6 +614,8 @@ export class Segment {
                     "tags": [],
                     "text": "If `true`, the segment buttons will overflow and the user can swipe to see them.\nIn addition, this will disable the gesture to drag the indicator between the buttons\nin order to swipe to see hidden buttons."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "scrollable",
                 "reflect": false,
                 "defaultValue": "false"
@@ -630,6 +634,8 @@ export class Segment {
                     "tags": [],
                     "text": "If `true`, users will be able to swipe between segment buttons to activate them."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "swipe-gesture",
                 "reflect": false,
                 "defaultValue": "true"
@@ -654,6 +660,8 @@ export class Segment {
                     "tags": [],
                     "text": "the value of the segment."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "value",
                 "reflect": false
             },
@@ -671,6 +679,8 @@ export class Segment {
                     "tags": [],
                     "text": "If `true`, navigating to an `ion-segment-button` with the keyboard will focus and select the element.\nIf `false`, keyboard navigation will only focus the `ion-segment-button` element."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "select-on-focus",
                 "reflect": false,
                 "defaultValue": "false"

package/dist/collection/components/segment/segment.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,32 +53,11 @@
  *   }
  * }
  */
-/**
- * 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 {
   /**
    * @prop --background: Background of the segment button
    */
+  --ripple-color: currentColor;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   display: grid;
@@ -94,6 +67,7 @@
   justify-content: center;
   width: 100%;
   background: var(--background);
+  font-family: var(--ion-font-family, inherit);
   text-align: center;
   contain: paint;
   user-select: none;
@@ -110,17 +84,6 @@
   display: none;
 }
 
-:host {
-  --ripple-color: currentColor;
-  font-family: var(--ion-font-family, inherit);
-}
-
-/**
- * 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
@@ -176,12 +139,6 @@
  *   }
  * }
  */
-/**
- * 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/segment-button/segment-button.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.
@@ -25,8 +58,16 @@
    * @prop --background: Background of the segment button
    * @prop --background-checked: Background of the checked segment button
    *
+   * @prop --background-hover: Background of the segment button on hover
+   * @prop --background-focused: Background of the segment button when focused with the tab key
+   *
+   * @prop --background-hover-opacity: Opacity of the segment button background on hover
+   * @prop --background-focused-opacity: Opacity of the segment button background when focused with the tab key
+   *
    * @prop --color: Color of the segment button
    * @prop --color-checked: Color of the checked segment button
+   * @prop --color-hover: Color of the segment button on hover
+   * @prop --color-focused: Color of the segment button when focused with the tab key
    *
    * @prop --border-radius: Radius of the segment button border
    * @prop --border-color: Color of the segment button border
@@ -51,6 +92,14 @@
    * @prop --indicator-transition: Transition of the indicator for the checked segment button
    * @prop --indicator-transform: Transform of the indicator for the checked segment button
    */
+  --color: initial;
+  --color-hover: var(--color);
+  --color-checked: var(--color);
+  --color-disabled: var(--color);
+  --padding-start: 0;
+  --padding-end: 0;
+  --padding-top: 0;
+  --padding-bottom: 0;
   border-radius: var(--border-radius);
   display: flex;
   position: relative;
@@ -68,6 +117,18 @@
 
 .button-native {
   border-radius: 0;
+  font-family: inherit;
+  font-size: inherit;
+  font-style: inherit;
+  font-weight: inherit;
+  letter-spacing: inherit;
+  text-decoration: inherit;
+  text-indent: inherit;
+  text-overflow: inherit;
+  text-transform: inherit;
+  text-align: inherit;
+  white-space: inherit;
+  color: inherit;
   -webkit-margin-start: var(--margin-start);
   margin-inline-start: var(--margin-start);
   -webkit-margin-end: var(--margin-end);
@@ -103,6 +164,16 @@
   z-index: 2;
 }
 
+.button-native::after {
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  position: absolute;
+  content: "";
+  opacity: 0;
+}
+
 .button-inner {
   display: flex;
   position: relative;
@@ -124,6 +195,30 @@
   pointer-events: none;
 }
 
+:host(.ion-focused) .button-native {
+  color: var(--color-focused);
+}
+:host(.ion-focused) .button-native::after {
+  background: var(--background-focused);
+  opacity: var(--background-focused-opacity);
+}
+
+:host(:focus) {
+  outline: none;
+}
+
+@media (any-hover: hover) {
+  :host(:hover) .button-native {
+    color: var(--color-hover);
+  }
+  :host(:hover) .button-native::after {
+    background: var(--background-hover);
+    opacity: var(--background-hover-opacity);
+  }
+  :host(.segment-button-checked:hover) .button-native {
+    color: var(--color-checked);
+  }
+}
 ::slotted(ion-icon) {
   flex-shrink: 0;
   order: -1;
@@ -134,6 +229,7 @@
   display: block;
   align-self: center;
   max-width: 100%;
+  line-height: 22px;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
@@ -165,6 +261,10 @@
   display: none;
 }
 
+ion-ripple-effect {
+  color: var(--ripple-color, var(--color-checked));
+}
+
 .segment-button-indicator {
   transform-origin: left;
   position: absolute;
@@ -178,7 +278,6 @@
   width: 100%;
   height: var(--indicator-height);
   transform: var(--indicator-transform);
-  background: var(--indicator-color);
   box-shadow: var(--indicator-box-shadow);
   pointer-events: none;
 }
@@ -199,150 +298,6 @@
     transition: 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
- * 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 {
-  /**
-   * @prop --background-hover: Background of the segment button on hover
-   * @prop --background-focused: Background of the segment button when focused with the tab key
-   *
-   * @prop --background-hover-opacity: Opacity of the segment button background on hover
-   * @prop --background-focused-opacity: Opacity of the segment button background when focused with the tab key
-   *
-   * @prop --color-hover: Color of the segment button on hover
-   * @prop --color-focused: Color of the segment button when focused with the tab key
-   */
-  --color: initial;
-  --color-hover: var(--color);
-  --color-checked: var(--color);
-  --padding-start: 0;
-  --padding-end: 0;
-  --padding-top: 0;
-  --padding-bottom: 0;
-}
-
-.button-native {
-  color: inherit;
-  font-family: inherit;
-  font-size: inherit;
-  font-style: inherit;
-  font-weight: inherit;
-  letter-spacing: inherit;
-  text-align: inherit;
-  text-decoration: inherit;
-  text-indent: inherit;
-  text-overflow: inherit;
-  text-transform: inherit;
-  white-space: inherit;
-}
-
-.button-native::after {
-  right: 0;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  position: absolute;
-  content: "";
-  opacity: 0;
-}
-
-:host(.ion-focused) .button-native {
-  color: var(--color-focused);
-}
-:host(.ion-focused) .button-native::after {
-  background: var(--background-focused);
-  opacity: var(--background-focused-opacity);
-}
-
-:host(:focus) {
-  outline: none;
-}
-
-@media (any-hover: hover) {
-  :host(:hover) .button-native {
-    color: var(--color-hover);
-  }
-  :host(:hover) .button-native::after {
-    background: var(--background-hover);
-    opacity: var(--background-hover-opacity);
-  }
-  :host(.segment-button-checked:hover) .button-native {
-    color: var(--color-checked);
-  }
-}
-::slotted(ion-label) {
-  line-height: 22px;
-}
-
-ion-ripple-effect {
-  color: var(--ripple-color, var(--color-checked));
-}
-
-/**
- * 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
@@ -475,14 +430,18 @@ ion-ripple-effect {
   padding-inline-start: 2px;
   -webkit-padding-end: 2px;
   padding-inline-end: 2px;
-  right: 0;
   left: 0;
+  right: 0;
   top: 0;
   bottom: 0;
 }
 
 .segment-button-indicator-background {
   border-radius: var(--border-radius);
+  background: var(--indicator-color);
+}
+
+.segment-button-indicator-background {
   transition: var(--indicator-transition);
 }
 

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

@@ -4,11 +4,10 @@
 import { Host, forceUpdate, h } from "@stencil/core";
 import { addEventListener, removeEventListener, inheritAttributes } from "../../utils/helpers";
 import { hostContext } from "../../utils/theme";
-import { getIonTheme } from "../../global/ionic-global";
+import { getIonMode } from "../../global/ionic-global";
 let ids = 0;
 /**
- * @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.
  *
  * @part native - The native HTML button element that wraps all child elements.
  * @part indicator - The indicator displayed on the checked segment button.
@@ -98,10 +97,10 @@ export class SegmentButton {
     }
     render() {
         const { checked, type, disabled, hasIcon, hasLabel, layout, segmentEl } = this;
-        const theme = getIonTheme(this);
+        const mode = getIonMode(this);
         const hasSegmentColor = () => (segmentEl === null || segmentEl === void 0 ? void 0 : segmentEl.color) !== undefined;
-        return (h(Host, { key: '751d7da683ac43596d2086c698752d211473bc39', class: {
-                [theme]: true,
+        return (h(Host, { key: 'd50a5d5e2f6206e8523598f258d8217d2903f69b', class: {
+                [mode]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
                 'in-segment': hostContext('ion-segment', this.el),
@@ -116,22 +115,20 @@ export class SegmentButton {
                 'ion-activatable': true,
                 'ion-activatable-instant': true,
                 'ion-focusable': true,
-            } }, h("button", Object.assign({ key: '67642bd479026c61dfd9b26109ed4357246c4696', "aria-selected": checked ? 'true' : 'false', role: "tab", ref: (el) => (this.nativeEl = el), type: type, class: "button-native", part: "native", disabled: disabled }, this.inheritedAttributes), h("span", { key: '90cca1b21a7ac38e90deb5bcad82dd9f77473a23', class: "button-inner" }, h("slot", { key: 'fd6b271d71aa21e77662163715d9a916bb901532' })), theme === 'md' && h("ion-ripple-effect", { key: 'a86825274c5e99652efd7a8a73d38f38ef885d16' })), h("div", { key: '6d492ef2c6f65de3af604f2f591ccaf3b617ba4b', part: "indicator", class: "segment-button-indicator segment-button-indicator-animated" }, h("div", { key: 'c6cb604f71269c36b0105c98420492a1b77d81b4', part: "indicator-background", class: "segment-button-indicator-background" }))));
+            } }, h("button", Object.assign({ key: 'b4f6f145286ba8ab79669e11035b906daa85ae7e', "aria-selected": checked ? 'true' : 'false', role: "tab", ref: (el) => (this.nativeEl = el), type: type, class: "button-native", part: "native", disabled: disabled }, this.inheritedAttributes), h("span", { key: '67965996c9ffe70553875e00d3da0ae5b2b1d814', class: "button-inner" }, h("slot", { key: '5087988fe45a8fdf388ec44c395d0b745b207806' })), mode === 'md' && h("ion-ripple-effect", { key: 'b24858de0750bbc769b3183fac0077dfe817ba27' })), h("div", { key: '97b4359432acd1c9da0816360cd1df9472e183f7', part: "indicator", class: "segment-button-indicator segment-button-indicator-animated" }, h("div", { key: '0561738ea15b0986f4ed3d8276d5e6f2d13f7e51', part: "indicator-background", class: "segment-button-indicator-background" }))));
     }
     static get is() { return "ion-segment-button"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["segment-button.ios.scss"],
-            "md": ["segment-button.md.scss"],
-            "ionic": ["segment-button.ionic.scss"]
+            "md": ["segment-button.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["segment-button.ios.css"],
-            "md": ["segment-button.md.css"],
-            "ionic": ["segment-button.ionic.css"]
+            "md": ["segment-button.md.css"]
         };
     }
     static get properties() {
@@ -150,6 +147,8 @@ export class SegmentButton {
                     "tags": [],
                     "text": "The `id` of the segment content."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "content-id",
                 "reflect": true
             },
@@ -167,6 +166,8 @@ export class SegmentButton {
                     "tags": [],
                     "text": "If `true`, the user cannot interact with the segment button."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
@@ -191,6 +192,8 @@ export class SegmentButton {
                     "tags": [],
                     "text": "Set the layout of the text and icon in the segment."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "layout",
                 "reflect": false,
                 "defaultValue": "'icon-top'"
@@ -209,6 +212,8 @@ export class SegmentButton {
                     "tags": [],
                     "text": "The type of the button."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "type",
                 "reflect": false,
                 "defaultValue": "'button'"
@@ -233,6 +238,8 @@ export class SegmentButton {
                     "tags": [],
                     "text": "The value of the segment button."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "value",
                 "reflect": false,
                 "defaultValue": "'ion-sb-' + ids++"