@ionic/core 9.0.6-dev.11790349282.1a877abd → 9.0.6-dev.11790776272.1d27d1bd

package/dist/collection/components/spinner/spinner.native.css

@@ -0,0 +1,199 @@
+/**
+ * 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 --color: Color of the spinner
+   */
+  display: inline-block;
+  position: relative;
+  width: 28px;
+  height: 28px;
+  color: var(--color);
+  overflow: hidden;
+  user-select: none;
+}
+
+:host(.ion-color) {
+  color: var(--ion-color-base);
+}
+
+svg {
+  transform-origin: center;
+  position: absolute;
+  /**
+   * Do not use @include position
+   * as the alignment of the elements with
+   * a spinner should not be RTL aware.
+   */
+  top: 0;
+  /* stylelint-disable-next-line property-disallowed-list */
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform: translateZ(0);
+}
+:host-context([dir=rtl]) svg {
+  transform-origin: calc(100% - center);
+}
+
+[dir=rtl] svg {
+  transform-origin: calc(100% - center);
+}
+
+@supports selector(:dir(rtl)) {
+  svg:dir(rtl) {
+    transform-origin: calc(100% - center);
+  }
+}
+
+:host(.spinner-lines) line,
+:host(.spinner-lines-small) line,
+:host(.spinner-lines-sharp) line,
+:host(.spinner-lines-sharp-small) line {
+  stroke-linecap: round;
+  stroke: currentColor;
+}
+
+:host(.spinner-lines) svg,
+:host(.spinner-lines-small) svg,
+:host(.spinner-lines-sharp) svg,
+:host(.spinner-lines-sharp-small) svg {
+  animation: spinner-fade-out 1s linear infinite;
+}
+
+:host(.spinner-bubbles) svg {
+  animation: spinner-scale-out 1s linear infinite;
+  fill: currentColor;
+}
+
+:host(.spinner-circles) svg {
+  animation: spinner-fade-out 1s linear infinite;
+  fill: currentColor;
+}
+
+:host(.spinner-crescent) circle {
+  fill: transparent;
+  stroke-width: 4px;
+  stroke-dasharray: 128px;
+  stroke-dashoffset: 82px;
+  stroke: currentColor;
+}
+
+:host(.spinner-crescent) svg {
+  animation: spinner-rotate 1s linear infinite;
+}
+
+:host(.spinner-dots) circle {
+  stroke-width: 0;
+  fill: currentColor;
+}
+
+:host(.spinner-dots) svg {
+  animation: spinner-dots 1s linear infinite;
+}
+
+:host(.spinner-circular) svg {
+  animation: spinner-circular linear infinite;
+}
+
+:host(.spinner-circular) circle {
+  animation: spinner-circular-inner ease-in-out infinite;
+  stroke: currentColor;
+  stroke-dasharray: 80px, 200px;
+  stroke-dashoffset: 0px;
+  stroke-width: 5.6;
+  fill: none;
+}
+
+:host(.spinner-paused),
+:host(.spinner-paused) svg,
+:host(.spinner-paused) circle {
+  animation-play-state: paused;
+}
+
+@keyframes spinner-fade-out {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+@keyframes spinner-scale-out {
+  0% {
+    transform: scale(1, 1);
+  }
+  100% {
+    transform: scale(0, 0);
+  }
+}
+@keyframes spinner-rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes spinner-dots {
+  0% {
+    transform: scale(1, 1);
+    opacity: 0.9;
+  }
+  50% {
+    transform: scale(0.4, 0.4);
+    opacity: 0.3;
+  }
+  100% {
+    transform: scale(1, 1);
+    opacity: 0.9;
+  }
+}
+@keyframes spinner-circular {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes spinner-circular-inner {
+  0% {
+    stroke-dasharray: 1px, 200px;
+    stroke-dashoffset: 0px;
+  }
+  50% {
+    stroke-dasharray: 100px, 200px;
+    stroke-dashoffset: -15px;
+  }
+  100% {
+    stroke-dasharray: 100px, 200px;
+    stroke-dashoffset: -125px;
+  }
+}
+:host(.spinner-lines) line,
+:host(.spinner-lines-small) line {
+  stroke-width: 7px;
+}
+
+:host(.spinner-lines-sharp) line,
+:host(.spinner-lines-sharp-small) line {
+  stroke-width: 4px;
+}

package/dist/collection/components/split-pane/split-pane.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,6 +59,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
@@ -116,8 +128,8 @@
    * @prop --side-width: Width of the side pane. Does not apply when split pane is collapsed.
    */
   --side-width: 100%;
-  left: 0;
   right: 0;
+  left: 0;
   top: 0;
   bottom: 0;
   display: flex;
@@ -128,8 +140,8 @@
 }
 
 :host(.split-pane-visible) ::slotted(.split-pane-main) {
-  left: 0;
   right: 0;
+  left: 0;
   top: 0;
   bottom: 0;
   position: relative;
@@ -151,6 +163,12 @@
   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

package/dist/collection/components/split-pane/split-pane.js

@@ -3,10 +3,11 @@
  */
 import { Build, Host, h } from "@stencil/core";
 import { printIonWarning } from "../../utils/logging/index";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } from "../../global/ionic-global";
 // TODO(FW-2832): types
 const SPLIT_PANE_MAIN = 'split-pane-main';
 const SPLIT_PANE_SIDE = 'split-pane-side';
+// TODO(FW-7285): Replace with global breakpoints
 const QUERY = {
     xs: '(min-width: 0px)',
     sm: '(min-width: 576px)',
@@ -15,6 +16,10 @@ const QUERY = {
     xl: '(min-width: 1200px)',
     never: '',
 };
+/**
+ * @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 SplitPane {
     constructor() {
         this.visible = false;
@@ -125,26 +130,28 @@ export class SplitPane {
         }
     }
     render() {
-        const mode = getIonMode(this);
-        return (h(Host, { key: '652bc0965ae962dc36a67fd7129dacaa1ba8e551', class: {
-                [mode]: true,
+        const theme = getIonTheme(this);
+        return (h(Host, { key: '71de4de3669d40a3ee68b2f0e2ca36ebe92bbf7d', class: {
+                [theme]: true,
                 // Used internally for styling
-                [`split-pane-${mode}`]: true,
+                [`split-pane-${theme}`]: true,
                 'split-pane-visible': this.visible,
-            } }, h("slot", { key: '9eac85f4c4e33ec00e8e16e2679f5975d7652452' })));
+            } }, h("slot", { key: '94e330fa309a15b99fe9ed04f6b2a26f26996186' })));
     }
     static get is() { return "ion-split-pane"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["split-pane.ios.scss"],
-            "md": ["split-pane.md.scss"]
+            "md": ["split-pane.md.scss"],
+            "ionic": ["split-pane.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["split-pane.ios.css"],
-            "md": ["split-pane.md.css"]
+            "md": ["split-pane.md.css"],
+            "ionic": ["split-pane.md.css"]
         };
     }
     static get properties() {

package/dist/collection/components/split-pane/split-pane.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,6 +59,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
@@ -116,8 +128,8 @@
    * @prop --side-width: Width of the side pane. Does not apply when split pane is collapsed.
    */
   --side-width: 100%;
-  left: 0;
   right: 0;
+  left: 0;
   top: 0;
   bottom: 0;
   display: flex;
@@ -128,8 +140,8 @@
 }
 
 :host(.split-pane-visible) ::slotted(.split-pane-main) {
-  left: 0;
   right: 0;
+  left: 0;
   top: 0;
   bottom: 0;
   position: relative;
@@ -151,6 +163,12 @@
   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

package/dist/collection/components/tab/tab.js

@@ -4,6 +4,10 @@
 import { Build, Host, h } from "@stencil/core";
 import { attachComponent } from "../../utils/framework-delegate";
 import { printIonError } from "../../utils/logging/index";
+/**
+ * @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 Tab {
     constructor() {
         /** @internal */
@@ -54,10 +58,10 @@ export class Tab {
     }
     render() {
         const { tab, active, component } = this;
-        return (h(Host, { key: '8ecbd7a85d3370ed8ed40561cd8134e71584d6aa', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
+        return (h(Host, { key: '55fcfffda80394774dbd65b2a0318ba81347aeee', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
                 'ion-page': component === undefined,
                 'tab-hidden': !active,
-            } }, h("slot", { key: '8d6326d75812888e33fd09665b7e588e1e270df1' })));
+            } }, h("slot", { key: '9cedef6f713f4d7a6cc8863b84dfc69276a52280' })));
     }
     static get is() { return "ion-tab"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tab-bar/tab-bar.ionic.css

@@ -0,0 +1,249 @@
+/**
+ * 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.
+ */
+:host {
+  /**
+   * @prop --background: Background of the tab bar
+   * @prop --border: Border of the tab bar
+   * @prop --color: Color of the tab bar
+   */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-top: var(--border);
+  background: var(--background);
+  color: var(--color);
+  text-align: center;
+  user-select: none;
+  /* stylelint-disable-next-line declaration-no-important */
+  box-sizing: content-box !important;
+}
+
+:host(.ion-color) ::slotted(ion-tab-button.ion-focused),
+:host(.tab-bar-translucent) ::slotted(ion-tab-button.ion-focused) {
+  background: var(--background-focused);
+}
+
+:host(.tab-bar-translucent) ::slotted(ion-tab-button) {
+  background: transparent;
+}
+
+:host([slot=top]) {
+  border-top: 0;
+  border-bottom: var(--border);
+}
+
+:host(.tab-bar-hidden) {
+  /* stylelint-disable-next-line declaration-no-important */
+  display: none !important;
+}
+
+/* Full */
+:host(.tab-bar-full) {
+  width: auto;
+  contain: strict;
+  /* stylelint-disable */
+  padding-bottom: var(--ion-safe-area-bottom, 0);
+  padding-right: var(--ion-safe-area-right);
+  padding-left: var(--ion-safe-area-left);
+  /* stylelint-enable */
+}
+
+:host([slot=top].tab-bar-full) {
+  padding-top: var(--ion-safe-area-top, 0);
+  padding-bottom: 0;
+}
+
+:host(.tab-bar-scroll-effect-hide) {
+  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+:host(.tab-bar-scroll-effect-hide.tab-bar-scroll-hidden) {
+  transform: translateY(100%);
+  transition: transform 350ms cubic-bezier(0.4, 0, 1, 1);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :host(.tab-bar-scroll-effect-hide),
+  :host(.tab-bar-scroll-effect-hide.tab-bar-scroll-hidden) {
+    transition: none;
+  }
+}
+:host {
+  --background: var(--ion-tab-bar-background, var(--token-bg-surface-default, var(--token-primitives-base-white, #ffffff)));
+  --background-activated: var(--ion-tab-bar-background-activated, var(--token-bg-select-default, var(--token-semantics-primary-100, var(--token-primitives-blue-100, #f0f2ff))));
+  --background-focused: var(--ion-tab-bar-background-focused, transparent);
+  --border: var(--token-border-size-0, var(--token-scale-0, 0px)) solid var(--ion-tab-bar-border-color, transparent);
+  --color: var(--ion-tab-bar-color, var(--token-primitives-neutral-800, #6c727a));
+  --color-selected: var(--ion-tab-bar-color-selected, var(--token-text-primary, var(--token-semantics-primary-800, var(--token-primitives-blue-800, #0f54da))));
+  /*
+   * In case there's scrolling, justify the content to the start.
+   */
+  justify-content: unset;
+  /*
+   * Ensure the tab bar does not grow larger than the viewport width.
+   * Useful for when the tab buttons have large labels, allowing the space
+   * to be evenly divided among the buttons.
+   */
+  max-width: 100%;
+  /**
+   * Tab bar has a box sizing of content-box to ensure the padding
+   * is not included in the height. This is important for the
+   * component to adjust to the safe area bottom.
+   *
+   * In order for the height to be calculated correctly, the padding
+   * top and bottom must be excluded from the height calculation.
+   */
+  min-height: calc(var(--token-scale-1400, 56px) - var(--token-space-100, var(--token-scale-100, 4px)) * 2);
+  gap: var(--token-space-300, var(--token-scale-300, 12px));
+  box-shadow: var(--token-elevation-2, var(--token-shadow-offset-0, 0px) var(--token-shadow-offset-8, 8px) var(--token-shadow-blur-25, 25px) var(--token-shadow-spread-0, 0px) var(--token-shadow-4, rgba(0, 0, 0, 0.0784313725)), var(--token-shadow-offset-0, 0px) var(--token-shadow-offset-1, 1px) var(--token-shadow-blur-5, 5px) var(--token-shadow-spread-0, 0px) var(--token-shadow-2, rgba(0, 0, 0, 0.0509803922)));
+  /*
+   * In case there are more tab buttons than can fit in the tab bar, enable
+   * horizontal scrolling.
+   */
+  overflow: auto hidden;
+  z-index: 10;
+}
+
+/* Full */
+:host(.tab-bar-full) {
+  /* stylelint-disable */
+  padding-top: var(--token-space-100, var(--token-scale-100, 4px));
+  padding-bottom: calc(var(--token-space-100, var(--token-scale-100, 4px)) + var(--ion-safe-area-bottom, 0));
+  padding-right: calc(var(--token-space-400, var(--token-scale-400, 16px)) + var(--ion-safe-area-right, 0));
+  padding-left: calc(var(--token-space-400, var(--token-scale-400, 16px)) + var(--ion-safe-area-left, 0));
+  /* stylelint-enable */
+}
+
+:host([slot=top].tab-bar-full) {
+  padding-top: calc(var(--token-space-100, var(--token-scale-100, 4px)) + var(--ion-safe-area-top, 0));
+  padding-bottom: var(--token-space-100, var(--token-scale-100, 4px));
+}
+
+/* Compact */
+:host(.tab-bar-compact) {
+  -webkit-padding-start: var(--token-space-400, var(--token-scale-400, 16px));
+  padding-inline-start: var(--token-space-400, var(--token-scale-400, 16px));
+  -webkit-padding-end: var(--token-space-400, var(--token-scale-400, 16px));
+  padding-inline-end: var(--token-space-400, var(--token-scale-400, 16px));
+  padding-top: var(--token-space-100, var(--token-scale-100, 4px));
+  padding-bottom: var(--token-space-100, var(--token-scale-100, 4px));
+  position: absolute;
+  align-self: center;
+  width: fit-content;
+  transform: translateX(-50%);
+  contain: content;
+}
+:host(.tab-bar-compact) {
+  inset-inline-start: 50%;
+}
+
+:host([slot=top].tab-bar-compact) {
+  top: calc(var(--token-space-100, var(--token-scale-100, 4px)) + var(--ion-safe-area-top, 0));
+}
+
+:host([slot=bottom].tab-bar-compact) {
+  bottom: calc(var(--token-space-400, var(--token-scale-400, 16px)) + var(--ion-safe-area-bottom, 0));
+}
+
+:host(.tab-bar-scroll-effect-hide) {
+  transition: transform var(--token-transition-time-200, 200ms) var(--token-transition-curve-spring, cubic-bezier(0.16, 1, 0.3, 1));
+}
+
+:host(.tab-bar-compact.tab-bar-scroll-hidden) {
+  transform: translateY(calc(100% + var(--ion-safe-area-bottom, 0) + var(--token-space-1000, var(--token-scale-1000, 40px)))) translateX(-50%);
+  transition: transform var(--token-transition-time-300, 300ms) var(--token-transition-curve-base, cubic-bezier(0.4, 0, 1, 1));
+}
+
+:host([slot=top].tab-bar-compact.tab-bar-scroll-hidden) {
+  transform: translateY(-100%) translateX(-50%);
+}
+
+@supports (backdrop-filter: blur(0)) {
+  :host(.tab-bar-translucent) {
+    --background: rgba(255, 255, 255, 0.6);
+    backdrop-filter: var(--tab-bar-backdrop-filter, blur(12px));
+  }
+  :host(.tab-bar-translucent) ::slotted(ion-tab-button.ion-focused) {
+    --background: transparent;
+  }
+}
+/* Soft */
+:host(.tab-bar-soft) {
+  border-radius: var(--token-border-radius-400, var(--token-scale-400, 16px));
+}
+
+/* Round */
+:host(.tab-bar-round) {
+  border-radius: var(--token-border-radius-full, 999px);
+}
+
+/* Rectangular */
+:host(.tab-bar-rectangular) {
+  border-radius: var(--token-border-radius-0, var(--token-scale-0, 0px));
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :host(.tab-bar-scroll-effect-hide),
+  :host(.tab-bar-compact.tab-bar-scroll-hidden) {
+    transition: none;
+  }
+}