@ionic/core 8.5.4-dev.11744646756.1244bf71 → 8.5.4-dev.11744657992.1bb14c4f

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

@@ -126,7 +126,7 @@
   pointer-events: none;
 }
 
-:host(.ion-focused) button {
+:host(.has-focus) button {
   border: 2px solid #5e9ed6;
 }
 
@@ -329,7 +329,9 @@ button {
  * highlight when the select is blurred.
  */
 :host(.has-focus.ion-valid),
-:host(.ion-touched.ion-invalid) {
+:host(.select-expanded.ion-valid),
+:host(.ion-touched.ion-invalid),
+:host(.select-expanded.ion-touched.ion-invalid) {
   --border-color: var(--highlight-color);
 }
 
@@ -596,7 +598,7 @@ button {
  * :host(.label-floating.select-label-placement-floating) .native-wrapper .select-placeholder
  */
 :host(.select-expanded.select-label-placement-floating) .native-wrapper .select-placeholder,
-:host(.ion-focused.select-label-placement-floating) .native-wrapper .select-placeholder,
+:host(.has-focus.select-label-placement-floating) .native-wrapper .select-placeholder,
 :host(.has-value.select-label-placement-floating) .native-wrapper .select-placeholder {
   opacity: 1;
 }
@@ -820,6 +822,7 @@ button {
  * If the select has a validity state, the
  * border should reflect that as a color.
  */
+:host(.select-expanded.select-fill-solid.ion-valid),
 :host(.has-focus.select-fill-solid.ion-valid),
 :host(.select-fill-solid.ion-touched.ion-invalid) {
   --border-color: var(--highlight-color);
@@ -848,9 +851,9 @@ button {
  * much darker on focus.
  */
 :host(.select-fill-solid.select-expanded),
-:host(.select-fill-solid.ion-focused) {
+:host(.select-fill-solid.has-focus) {
   --background: var(--ion-color-step-150, var(--ion-background-color-step-150, #d9d9d9));
-  --border-color: var(--ion-color-step-750, var(--ion-background-color-step-750, #404040));
+  --border-color: var(--highlight-color);
 }
 
 :host(.select-fill-solid) .select-wrapper {
@@ -872,6 +875,20 @@ button {
   max-width: calc(100% / 0.75);
 }
 
+/**
+ * When the select has a fill, is
+ * in an item, and is expanded or focused,
+ * then the icon should take on the
+ * highlight color.
+ */
+:host(.in-item.select-expanded.select-fill-solid) .select-wrapper .select-icon,
+:host(.in-item.select-expanded.ion-touched.ion-invalid.select-fill-solid) .select-wrapper .select-icon,
+:host(.in-item.has-focus.select-fill-solid) .select-wrapper .select-icon,
+:host(.in-item.has-focus.ion-valid.select-fill-solid) .select-wrapper .select-icon,
+:host(.in-item.has-focus.ion-touched.ion-invalid.select-fill-solid) .select-wrapper .select-icon {
+  color: var(--highlight-color);
+}
+
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -965,7 +982,7 @@ button {
  * the select is focused.
  */
 :host(.select-fill-outline.select-expanded),
-:host(.select-fill-outline.ion-focused) {
+:host(.select-fill-outline.has-focus) {
   --border-width: var(--highlight-height);
   --border-color: var(--highlight-color);
 }
@@ -1167,27 +1184,35 @@ button {
   border-top: none;
 }
 
+/**
+ * When the select has a fill, is
+ * in an item, and is expanded or focused,
+ * then the icon should take on the
+ * highlight color.
+ */
+:host(.in-item.select-expanded.select-fill-outline) .select-wrapper .select-icon,
+:host(.in-item.select-expanded.ion-touched.ion-invalid.select-fill-outline) .select-wrapper .select-icon,
+:host(.in-item.has-focus.select-fill-outline) .select-wrapper .select-icon,
+:host(.in-item.has-focus.ion-valid.select-fill-outline) .select-wrapper .select-icon,
+:host(.in-item.has-focus.ion-touched.ion-invalid.select-fill-outline) .select-wrapper .select-icon {
+  color: var(--highlight-color);
+}
+
 :host {
   --border-width: 1px;
   --border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.13)))));
   --highlight-height: 2px;
 }
 
-.select-icon {
-  width: 0.8125rem;
-  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
-  color: var(--ion-color-step-500, var(--ion-text-color-step-500, gray));
-}
-
 /**
  * When the select is focused the label should
  * take on the highlight color. This should
  * only apply to floating or stacked labels.
  */
 :host(.select-label-placement-floating.select-expanded) .label-text-wrapper,
-:host(.select-label-placement-floating.ion-focused) .label-text-wrapper,
+:host(.select-label-placement-floating.has-focus) .label-text-wrapper,
 :host(.select-label-placement-stacked.select-expanded) .label-text-wrapper,
-:host(.select-label-placement-stacked.ion-focused) .label-text-wrapper {
+:host(.select-label-placement-stacked.has-focus) .label-text-wrapper {
   color: var(--highlight-color);
 }
 
@@ -1212,7 +1237,7 @@ button {
 }
 
 :host(.select-expanded) .select-highlight,
-:host(.ion-focused) .select-highlight {
+:host(.has-focus) .select-highlight {
   transform: scale(1);
 }
 
@@ -1228,6 +1253,12 @@ button {
   inset-inline-start: 0;
 }
 
+.select-icon {
+  width: 0.8125rem;
+  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+  color: var(--ion-color-step-500, var(--ion-text-color-step-500, gray));
+}
+
 /**
  * This rotates the chevron icon
  * when the select is activated.
@@ -1237,6 +1268,20 @@ button {
   transform: rotate(180deg);
 }
 
+/**
+ * When the select has no fill, is
+ * in an item, and is expanded or focused,
+ * then the icon should be the same color
+ * as the text color.
+ */
+:host(.in-item.select-expanded) .select-wrapper .select-icon,
+:host(.in-item.select-expanded.ion-touched.ion-invalid) .select-wrapper .select-icon,
+:host(.in-item.has-focus) .select-wrapper .select-icon,
+:host(.in-item.has-focus.ion-valid) .select-wrapper .select-icon,
+:host(.in-item.has-focus.ion-touched.ion-invalid) .select-wrapper .select-icon {
+  color: var(--ion-color-step-500, var(--ion-text-color-step-500, gray));
+}
+
 /**
  * When the select is focused the icon should
  * take on the highlight color.
@@ -1246,7 +1291,7 @@ button {
 :host(.select-expanded) .select-wrapper .select-icon,
 :host(.has-focus.ion-valid) .select-wrapper .select-icon,
 :host(.ion-touched.ion-invalid) .select-wrapper .select-icon,
-:host(.ion-focused) .select-wrapper .select-icon {
+:host(.has-focus) .select-wrapper .select-icon {
   color: var(--highlight-color);
 }
 

package/dist/collection/components/select-modal/select-modal.js

@@ -7,6 +7,8 @@ import { safeCall } from "../../utils/overlays";
 import { getClassMap } from "../../utils/theme";
 export class SelectModal {
     constructor() {
+        this.header = undefined;
+        this.multiple = undefined;
         this.options = [];
     }
     closeModal() {
@@ -97,7 +99,6 @@ export class SelectModal {
         return {
             "header": {
                 "type": "string",
-                "attribute": "header",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -110,13 +111,11 @@ export class SelectModal {
                     "tags": [],
                     "text": ""
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "header",
                 "reflect": false
             },
             "multiple": {
                 "type": "boolean",
-                "attribute": "multiple",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -129,13 +128,11 @@ export class SelectModal {
                     "tags": [],
                     "text": ""
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "multiple",
                 "reflect": false
             },
             "options": {
                 "type": "unknown",
-                "attribute": "options",
                 "mutable": false,
                 "complexType": {
                     "original": "SelectModalOption[]",
@@ -154,8 +151,6 @@ export class SelectModal {
                     "tags": [],
                     "text": ""
                 },
-                "getter": false,
-                "setter": false,
                 "defaultValue": "[]"
             }
         };

package/dist/collection/components/select-option/select-option.js

@@ -6,10 +6,8 @@ import { getIonMode } from "../../global/ionic-global";
 export class SelectOption {
     constructor() {
         this.inputId = `ion-selopt-${selectOptionIds++}`;
-        /**
-         * If `true`, the user cannot interact with the select option. This property does not apply when `interface="action-sheet"` as `ion-action-sheet` does not allow for disabled buttons.
-         */
         this.disabled = false;
+        this.value = undefined;
     }
     render() {
         return h(Host, { key: '8c96c199ce3a3065de3fe446500f567236e0610a', role: "option", id: this.inputId, class: getIonMode(this) });
@@ -30,7 +28,6 @@ export class SelectOption {
         return {
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -43,14 +40,12 @@ export class SelectOption {
                     "tags": [],
                     "text": "If `true`, the user cannot interact with the select option. This property does not apply when `interface=\"action-sheet\"` as `ion-action-sheet` does not allow for disabled buttons."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "value": {
                 "type": "any",
-                "attribute": "value",
                 "mutable": false,
                 "complexType": {
                     "original": "any | null",
@@ -63,8 +58,7 @@ export class SelectOption {
                     "tags": [],
                     "text": "The text value of the option."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "value",
                 "reflect": false
             }
         };

package/dist/collection/components/select-popover/select-popover.js

@@ -10,9 +10,10 @@ import { getIonMode } from "../../global/ionic-global";
  */
 export class SelectPopover {
     constructor() {
-        /**
-         * An array of options for the popover
-         */
+        this.header = undefined;
+        this.subHeader = undefined;
+        this.message = undefined;
+        this.multiple = undefined;
         this.options = [];
     }
     findOptionFromEvent(ev) {
@@ -121,7 +122,6 @@ export class SelectPopover {
         return {
             "header": {
                 "type": "string",
-                "attribute": "header",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -134,13 +134,11 @@ export class SelectPopover {
                     "tags": [],
                     "text": "The header text of the popover"
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "header",
                 "reflect": false
             },
             "subHeader": {
                 "type": "string",
-                "attribute": "sub-header",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -153,13 +151,11 @@ export class SelectPopover {
                     "tags": [],
                     "text": "The subheader text of the popover"
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "sub-header",
                 "reflect": false
             },
             "message": {
                 "type": "string",
-                "attribute": "message",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -172,13 +168,11 @@ export class SelectPopover {
                     "tags": [],
                     "text": "The text content of the popover body"
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "message",
                 "reflect": false
             },
             "multiple": {
                 "type": "boolean",
-                "attribute": "multiple",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -191,13 +185,11 @@ export class SelectPopover {
                     "tags": [],
                     "text": "If true, the select accepts multiple values"
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "multiple",
                 "reflect": false
             },
             "options": {
                 "type": "unknown",
-                "attribute": "options",
                 "mutable": false,
                 "complexType": {
                     "original": "SelectPopoverOption[]",
@@ -216,8 +208,6 @@ export class SelectPopover {
                     "tags": [],
                     "text": "An array of options for the popover"
                 },
-                "getter": false,
-                "setter": false,
                 "defaultValue": "[]"
             }
         };

package/dist/collection/components/skeleton-text/skeleton-text.js

@@ -7,9 +7,6 @@ import { config } from "../../global/config";
 import { getIonMode } from "../../global/ionic-global";
 export class SkeletonText {
     constructor() {
-        /**
-         * If `true`, the skeleton text will animate.
-         */
         this.animated = false;
     }
     componentWillLoad() {
@@ -50,7 +47,6 @@ export class SkeletonText {
         return {
             "animated": {
                 "type": "boolean",
-                "attribute": "animated",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -63,8 +59,7 @@ export class SkeletonText {
                     "tags": [],
                     "text": "If `true`, the skeleton text will animate."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "animated",
                 "reflect": false,
                 "defaultValue": "false"
             }

package/dist/collection/components/spinner/spinner.js

@@ -8,9 +8,9 @@ import { getIonMode } from "../../global/ionic-global";
 import { SPINNERS } from "./spinner-configs";
 export class Spinner {
     constructor() {
-        /**
-         * If `true`, the spinner's animation will be paused.
-         */
+        this.color = undefined;
+        this.duration = undefined;
+        this.name = undefined;
         this.paused = false;
     }
     getName() {
@@ -61,7 +61,6 @@ export class Spinner {
         return {
             "color": {
                 "type": "string",
-                "attribute": "color",
                 "mutable": false,
                 "complexType": {
                     "original": "Color",
@@ -80,13 +79,11 @@ export class Spinner {
                     "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
             },
             "duration": {
                 "type": "number",
-                "attribute": "duration",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -99,13 +96,11 @@ export class Spinner {
                     "tags": [],
                     "text": "Duration of the spinner animation in milliseconds. The default varies based on the spinner."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "duration",
                 "reflect": false
             },
             "name": {
                 "type": "string",
-                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "SpinnerTypes",
@@ -124,13 +119,11 @@ export class Spinner {
                     "tags": [],
                     "text": "The name of the SVG spinner to use. If a name is not provided, the platform's default\nspinner will be used."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "name",
                 "reflect": false
             },
             "paused": {
                 "type": "boolean",
-                "attribute": "paused",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -143,8 +136,7 @@ export class Spinner {
                     "tags": [],
                     "text": "If `true`, the spinner's animation will be paused."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "paused",
                 "reflect": false,
                 "defaultValue": "false"
             }

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

@@ -17,15 +17,8 @@ const QUERY = {
 export class SplitPane {
     constructor() {
         this.visible = false;
-        /**
-         * If `true`, the split pane will be hidden.
-         */
+        this.contentId = undefined;
         this.disabled = false;
-        /**
-         * When the split-pane should be shown.
-         * Can be a CSS media query expression, or a shortcut expression.
-         * Can also be a boolean expression.
-         */
         this.when = QUERY['lg'];
     }
     visibleChanged(visible) {
@@ -150,7 +143,6 @@ export class SplitPane {
         return {
             "contentId": {
                 "type": "string",
-                "attribute": "content-id",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -163,13 +155,11 @@ export class SplitPane {
                     "tags": [],
                     "text": "The `id` of the main content. When using\na router this is typically `ion-router-outlet`.\nWhen not using a router, this is typically\nyour main view's `ion-content`. This is not the\nid of the `ion-content` inside of your `ion-menu`."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "content-id",
                 "reflect": true
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -182,14 +172,12 @@ export class SplitPane {
                     "tags": [],
                     "text": "If `true`, the split pane will be hidden."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "when": {
                 "type": "any",
-                "attribute": "when",
                 "mutable": false,
                 "complexType": {
                     "original": "string | boolean",
@@ -202,8 +190,7 @@ export class SplitPane {
                     "tags": [],
                     "text": "When the split-pane should be shown.\nCan be a CSS media query expression, or a shortcut expression.\nCan also be a boolean expression."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "when",
                 "reflect": false,
                 "defaultValue": "QUERY['lg']"
             }

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

@@ -6,8 +6,10 @@ import { attachComponent } from "../../utils/framework-delegate";
 export class Tab {
     constructor() {
         this.loaded = false;
-        /** @internal */
         this.active = false;
+        this.delegate = undefined;
+        this.tab = undefined;
+        this.component = undefined;
     }
     async componentWillLoad() {
         if (Build.isDev) {
@@ -67,7 +69,6 @@ export class Tab {
         return {
             "active": {
                 "type": "boolean",
-                "attribute": "active",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -83,14 +84,12 @@ export class Tab {
                         }],
                     "text": ""
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "active",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "delegate": {
                 "type": "unknown",
-                "attribute": "delegate",
                 "mutable": false,
                 "complexType": {
                     "original": "FrameworkDelegate",
@@ -111,13 +110,10 @@ export class Tab {
                             "text": undefined
                         }],
                     "text": ""
-                },
-                "getter": false,
-                "setter": false
+                }
             },
             "tab": {
                 "type": "string",
-                "attribute": "tab",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -130,13 +126,11 @@ export class Tab {
                     "tags": [],
                     "text": "A tab id must be provided for each `ion-tab`. It's used internally to reference\nthe selected tab or by the router to switch between them."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "tab",
                 "reflect": false
             },
             "component": {
                 "type": "string",
-                "attribute": "component",
                 "mutable": false,
                 "complexType": {
                     "original": "ComponentRef",
@@ -155,8 +149,7 @@ export class Tab {
                     "tags": [],
                     "text": "The component to display inside of the tab."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "component",
                 "reflect": false
             }
         };

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

@@ -12,11 +12,8 @@ export class TabBar {
     constructor() {
         this.keyboardCtrl = null;
         this.keyboardVisible = false;
-        /**
-         * If `true`, the tab bar will be translucent.
-         * Only applies when the mode is `"ios"` and the device supports
-         * [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
-         */
+        this.color = undefined;
+        this.selectedTab = undefined;
         this.translucent = false;
     }
     selectedTabChanged() {
@@ -78,7 +75,6 @@ export class TabBar {
         return {
             "color": {
                 "type": "string",
-                "attribute": "color",
                 "mutable": false,
                 "complexType": {
                     "original": "Color",
@@ -97,13 +93,11 @@ export class TabBar {
                     "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
             },
             "selectedTab": {
                 "type": "string",
-                "attribute": "selected-tab",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -116,13 +110,11 @@ export class TabBar {
                     "tags": [],
                     "text": "The selected tab component"
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "selected-tab",
                 "reflect": false
             },
             "translucent": {
                 "type": "boolean",
-                "attribute": "translucent",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -135,8 +127,7 @@ export class TabBar {
                     "tags": [],
                     "text": "If `true`, the tab bar will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility)."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "translucent",
                 "reflect": false,
                 "defaultValue": "false"
             }