@ionic/core 8.8.11 → 8.8.12-dev.11781793379.156d3260

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

@@ -0,0 +1,115 @@
+/**
+ * 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 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: Background of the segment button
+   */
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  display: grid;
+  grid-auto-columns: 1fr;
+  position: relative;
+  align-items: stretch;
+  justify-content: center;
+  width: 100%;
+  background: var(--background);
+  text-align: center;
+  contain: paint;
+  user-select: none;
+}
+
+:host(.segment-scrollable) {
+  justify-content: start;
+  width: auto;
+  overflow-x: auto;
+  grid-auto-columns: minmax(min-content, 1fr);
+}
+
+:host(.segment-scrollable::-webkit-scrollbar) {
+  display: none;
+}
+
+:host {
+  --background: var(--token-bg-surface-default, var(--token-primitives-base-white, #ffffff));
+}

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

@@ -1,3 +1,9 @@
+/**
+ * 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
@@ -53,11 +59,32 @@
  *   }
  * }
  */
+/**
+ * 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;
@@ -67,7 +94,6 @@
   justify-content: center;
   width: 100%;
   background: var(--background);
-  font-family: var(--ion-font-family, inherit);
   text-align: center;
   contain: paint;
   user-select: none;
@@ -84,6 +110,17 @@
   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
@@ -139,6 +176,12 @@
  *   }
  * }
  */
+/**
+ * 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/segment.js

@@ -5,9 +5,10 @@ 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 { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } from "../../global/ionic-global";
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @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.
  */
 export class Segment {
     constructor() {
@@ -546,28 +547,30 @@ export class Segment {
         current.setFocus();
     }
     render() {
-        const mode = getIonMode(this);
-        return (h(Host, { key: 'eda6b7b88b7967b55cf9098c59b655b348a42224', role: "tablist", onClick: this.onClick, class: createColorClasses(this.color, {
-                [mode]: true,
+        const theme = getIonTheme(this);
+        return (h(Host, { key: '65c576c0bb9ff0602793f75321d676a34b306b3b', role: "tablist", onClick: this.onClick, class: createColorClasses(this.color, {
+                [theme]: 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: 'fdb451f235ce59c5bb50c61a13c69160ece2d5df', onSlotchange: this.onSlottedItemsChange })));
+            }) }, h("slot", { key: '210750a65ccada549bccf026871477ee2b7bdc69', 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"]
+            "md": ["segment.md.scss"],
+            "ionic": ["segment.ionic.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["segment.ios.css"],
-            "md": ["segment.md.css"]
+            "md": ["segment.md.css"],
+            "ionic": ["segment.ionic.css"]
         };
     }
     static get properties() {

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

@@ -1,3 +1,9 @@
+/**
+ * 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
@@ -53,11 +59,32 @@
  *   }
  * }
  */
+/**
+ * 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;
@@ -67,7 +94,6 @@
   justify-content: center;
   width: 100%;
   background: var(--background);
-  font-family: var(--ion-font-family, inherit);
   text-align: center;
   contain: paint;
   user-select: none;
@@ -84,6 +110,17 @@
   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
@@ -139,6 +176,12 @@
  *   }
  * }
  */
+/**
+ * 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.ionic.css

@@ -0,0 +1,353 @@
+/**
+ * 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 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: Background of the segment button
+   * @prop --background-checked: Background of the checked segment button
+   *
+   * @prop --color: Color of the segment button
+   * @prop --color-checked: Color of the checked segment button
+   *
+   * @prop --border-radius: Radius of the segment button border
+   * @prop --border-color: Color of the segment button border
+   * @prop --border-style: Style of the segment button border
+   * @prop --border-width: Width of the segment button border
+   *
+   * @prop --margin-top: Top margin of the segment button
+   * @prop --margin-end: Right margin if direction is left-to-right, and left margin if direction is right-to-left of the segment button
+   * @prop --margin-bottom: Bottom margin of the segment button
+   * @prop --margin-start: Left margin if direction is left-to-right, and right margin if direction is right-to-left of the segment button
+   *
+   * @prop --padding-top: Top padding of the segment button
+   * @prop --padding-end: Right padding if direction is left-to-right, and left padding if direction is right-to-left of the segment button
+   * @prop --padding-bottom: Bottom padding of the segment button
+   * @prop --padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the segment button
+   *
+   * @prop --transition: Transition of the segment button
+   *
+   * @prop --indicator-height: Height of the indicator for the checked segment button
+   * @prop --indicator-box-shadow: Box shadow on the indicator for the checked segment button
+   * @prop --indicator-color: Color of the indicator for the checked segment button
+   * @prop --indicator-transition: Transition of the indicator for the checked segment button
+   * @prop --indicator-transform: Transform of the indicator for the checked segment button
+   */
+  border-radius: var(--border-radius);
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  height: auto;
+  background: var(--background);
+  color: var(--color);
+  text-decoration: none;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+  grid-row: 1;
+  font-kerning: none;
+}
+
+.button-native {
+  border-radius: 0;
+  -webkit-margin-start: var(--margin-start);
+  margin-inline-start: var(--margin-start);
+  -webkit-margin-end: var(--margin-end);
+  margin-inline-end: var(--margin-end);
+  margin-top: var(--margin-top);
+  margin-bottom: var(--margin-bottom);
+  -webkit-padding-start: var(--padding-start);
+  padding-inline-start: var(--padding-start);
+  -webkit-padding-end: var(--padding-end);
+  padding-inline-end: var(--padding-end);
+  padding-top: var(--padding-top);
+  padding-bottom: var(--padding-bottom);
+  transform: translate3d(0,  0,  0);
+  display: flex;
+  position: relative;
+  flex-direction: inherit;
+  flex-grow: 1;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-width: inherit;
+  max-width: inherit;
+  height: auto;
+  min-height: inherit;
+  max-height: inherit;
+  transition: var(--transition);
+  border: none;
+  outline: none;
+  background: transparent;
+  contain: content;
+  pointer-events: none;
+  overflow: hidden;
+  z-index: 2;
+}
+
+.button-inner {
+  display: flex;
+  position: relative;
+  flex-flow: inherit;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+}
+
+:host(.segment-button-checked) {
+  background: var(--background-checked);
+  color: var(--color-checked);
+}
+
+:host(.segment-button-disabled) {
+  cursor: default;
+  pointer-events: none;
+}
+
+::slotted(ion-icon) {
+  flex-shrink: 0;
+  order: -1;
+  pointer-events: none;
+}
+
+::slotted(ion-label) {
+  display: block;
+  align-self: center;
+  max-width: 100%;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  box-sizing: border-box;
+  pointer-events: none;
+}
+
+:host(.segment-button-layout-icon-top) .button-native {
+  flex-direction: column;
+}
+
+:host(.segment-button-layout-icon-start) .button-native {
+  flex-direction: row;
+}
+
+:host(.segment-button-layout-icon-end) .button-native {
+  flex-direction: row-reverse;
+}
+
+:host(.segment-button-layout-icon-bottom) .button-native {
+  flex-direction: column-reverse;
+}
+
+:host(.segment-button-layout-icon-hide) ::slotted(ion-icon) {
+  display: none;
+}
+
+:host(.segment-button-layout-label-hide) ::slotted(ion-label) {
+  display: none;
+}
+
+.segment-button-indicator {
+  transform-origin: left;
+  position: absolute;
+  opacity: 0;
+  box-sizing: border-box;
+  will-change: transform, opacity;
+  pointer-events: none;
+}
+
+.segment-button-indicator-background {
+  width: 100%;
+  height: var(--indicator-height);
+  transform: var(--indicator-transform);
+  background: var(--indicator-color);
+  box-shadow: var(--indicator-box-shadow);
+  pointer-events: none;
+}
+
+.segment-button-indicator-animated {
+  transition: var(--indicator-transition);
+}
+
+:host(.segment-button-checked) .segment-button-indicator {
+  opacity: 1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .segment-button-indicator-background {
+    transform: none;
+  }
+  .segment-button-indicator-animated {
+    transition: none;
+  }
+}
+:host {
+  /**
+   * @prop --color-disabled: Color of the disabled segment button
+   */
+  --background: none;
+  --background-checked: var(--background);
+  --color: var(--token-primitives-neutral-1200, #242424);
+  --color-checked: var(--token-semantics-primary-base, var(--token-semantics-primary-700, var(--token-primitives-blue-700, #105cef)));
+  --color-disabled: var(--token-primitives-neutral-500, #a2a2a2);
+  --border-width: var(--token-border-size-025, var(--token-scale-025, 1px));
+  --border-color: var(--token-primitives-neutral-300, #e0e0e0);
+  --border-style: var(--token-border-style-solid, solid);
+  --indicator-box-shadow: none;
+  --indicator-color: var(--color-checked);
+  --indicator-height: var(--token-border-size-025, var(--token-scale-025, 1px));
+  --indicator-transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  --indicator-transform: none;
+  --padding-top: var(--token-space-200, var(--token-scale-200, 8px));
+  --padding-end: var(--token-space-200, var(--token-scale-200, 8px));
+  --padding-bottom: var(--token-space-200, var(--token-scale-200, 8px));
+  --padding-start: var(--token-space-200, var(--token-scale-200, 8px));
+  --transition: color 0.15s linear 0s, opacity 0.15s linear 0s;
+  min-width: var(--token-scale-1200, 48px);
+  min-height: var(--token-scale-1200, 48px);
+}
+
+.button-native {
+  border-bottom: var(--border-width) var(--border-style) var(--border-color);
+  z-index: 1;
+}
+
+.button-inner {
+  padding-top: var(--token-space-100, var(--token-scale-100, 4px));
+  padding-bottom: var(--token-space-100, var(--token-scale-100, 4px));
+  gap: var(--token-space-100, var(--token-scale-100, 4px));
+}
+
+::slotted(*) {
+  color: var(--color);
+}
+
+::slotted(ion-label) {
+  font-size: var(--token-font-size-350, 0.875rem);
+  font-weight: var(--token-font-weight-medium, 500);
+  letter-spacing: var(--token-font-letter-spacing-1, 1%);
+  line-height: var(--token-font-line-height-500, var(--token-scale-500, 20px));
+  text-decoration: none;
+  text-transform: none;
+}
+
+::slotted(ion-icon) {
+  width: var(--token-scale-600, 24px);
+  height: var(--token-scale-600, 24px);
+}
+
+:host(.segment-button-checked) ::slotted(*) {
+  color: var(--color-checked);
+}
+
+:host(.segment-button-disabled) ::slotted(*) {
+  color: var(--color-disabled);
+}
+
+:host(.ion-focused) .button-inner {
+  outline-offset: var(--token-border-size-050, var(--token-scale-050, 2px));
+  outline: var(--token-border-size-050, var(--token-scale-050, 2px)) var(--token-border-style-solid, solid) var(--token-border-focus-default, var(--token-primitives-blue-400, #b5c0f7));
+}
+
+.segment-button-indicator {
+  right: 0;
+  left: 0;
+  bottom: 0;
+  z-index: 2;
+}
+
+:host(.segment-button-layout-icon-top),
+:host(.segment-button-layout-icon-bottom) {
+  height: var(--token-scale-1800, 72px);
+}
+
+:host(.segment-button-has-label-only),
+:host(.segment-button-has-icon-only),
+:host(.segment-button-layout-icon-start),
+:host(.segment-button-layout-icon-end) {
+  height: var(--token-scale-1200, 48px);
+}
+
+:host(.segment-button-layout-icon-start) .button-inner,
+:host(.segment-button-layout-icon-end) .button-inner {
+  gap: var(--token-space-200, var(--token-scale-200, 8px));
+}