@ionic/core 8.5.4-dev.11743814940.14e938eb → 8.5.4-dev.11744052844.17c6a004

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

@@ -289,7 +289,7 @@ button {
  * The component highlight is only shown
  * on focus, so we can safely set the valid
  * color state when touched/valid. If we
- * set it when .has-focus is present then
+ * set it when .ion-focused is present then
  * the highlight color would change
  * from the valid color to the component's
  * color during the transition after the
@@ -328,8 +328,10 @@ button {
  * is currently focused. Do not show the valid
  * highlight when the select is blurred.
  */
-:host(.has-focus.ion-valid),
-:host(.ion-touched.ion-invalid) {
+:host(.ion-focused.ion-valid),
+:host(.select-expanded.ion-valid),
+:host(.ion-touched.ion-invalid),
+:host(.select-expanded.ion-touched.ion-invalid) {
   --border-color: var(--highlight-color);
 }
 
@@ -820,7 +822,8 @@ button {
  * If the select has a validity state, the
  * border should reflect that as a color.
  */
-:host(.has-focus.select-fill-solid.ion-valid),
+:host(.select-expanded.select-fill-solid.ion-valid),
+:host(.ion-focused.select-fill-solid.ion-valid),
 :host(.select-fill-solid.ion-touched.ion-invalid) {
   --border-color: var(--highlight-color);
 }
@@ -850,7 +853,7 @@ button {
 :host(.select-fill-solid.select-expanded),
 :host(.select-fill-solid.ion-focused) {
   --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,17 @@ button {
   max-width: calc(100% / 0.75);
 }
 
+/**
+ * When the select has a fill, is
+ * in an item, and is expanded, 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 {
+  color: var(--highlight-color);
+}
+
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -945,7 +959,7 @@ button {
  * If the select has a validity state, the
  * border should reflect that as a color.
  */
-:host(.has-focus.select-fill-outline.ion-valid),
+:host(.ion-focused.select-fill-outline.ion-valid),
 :host(.select-fill-outline.ion-touched.ion-invalid) {
   --border-color: var(--highlight-color);
 }
@@ -1167,18 +1181,23 @@ button {
   border-top: none;
 }
 
+/**
+ * When the select has a fill, is
+ * in an item, and is expanded, 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 {
+  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
@@ -1191,9 +1210,9 @@ button {
   color: var(--highlight-color);
 }
 
-:host(.has-focus.select-label-placement-floating.ion-valid) .label-text-wrapper,
+:host(.ion-focused.select-label-placement-floating.ion-valid) .label-text-wrapper,
 :host(.select-label-placement-floating.ion-touched.ion-invalid) .label-text-wrapper,
-:host(.has-focus.select-label-placement-stacked.ion-valid) .label-text-wrapper,
+:host(.ion-focused.select-label-placement-stacked.ion-valid) .label-text-wrapper,
 :host(.select-label-placement-stacked.ion-touched.ion-invalid) .label-text-wrapper {
   color: var(--highlight-color);
 }
@@ -1228,6 +1247,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 +1262,17 @@ button {
   transform: rotate(180deg);
 }
 
+/**
+ * When the select has no fill, is
+ * in an item, and is expanded, 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 {
+  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.
@@ -1244,7 +1280,7 @@ button {
  * color if there is a validation state.
  */
 :host(.select-expanded) .select-wrapper .select-icon,
-:host(.has-focus.ion-valid) .select-wrapper .select-icon,
+:host(.ion-focused.ion-valid) .select-wrapper .select-icon,
 :host(.ion-touched.ion-invalid) .select-wrapper .select-icon,
 :host(.ion-focused) .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"
             }