@ionic/core 8.5.4-dev.11744052844.17c6a004 → 8.5.4-dev.11744209290.123af9eb

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 .ion-focused is present then
+ * set it when .has-focus is present then
  * the highlight color would change
  * from the valid color to the component's
  * color during the transition after the
@@ -328,10 +328,8 @@ button {
  * is currently focused. Do not show the valid
  * highlight when the select is blurred.
  */
-:host(.ion-focused.ion-valid),
-:host(.select-expanded.ion-valid),
-:host(.ion-touched.ion-invalid),
-:host(.select-expanded.ion-touched.ion-invalid) {
+:host(.has-focus.ion-valid),
+:host(.ion-touched.ion-invalid) {
   --border-color: var(--highlight-color);
 }
 
@@ -822,8 +820,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(.ion-focused.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);
 }
@@ -853,7 +850,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(--highlight-color);
+  --border-color: var(--ion-color-step-750, var(--ion-background-color-step-750, #404040));
 }
 
 :host(.select-fill-solid) .select-wrapper {
@@ -875,17 +872,6 @@ 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
@@ -959,7 +945,7 @@ button {
  * If the select has a validity state, the
  * border should reflect that as a color.
  */
-:host(.ion-focused.select-fill-outline.ion-valid),
+:host(.has-focus.select-fill-outline.ion-valid),
 :host(.select-fill-outline.ion-touched.ion-invalid) {
   --border-color: var(--highlight-color);
 }
@@ -1181,23 +1167,18 @@ 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
@@ -1210,9 +1191,9 @@ button {
   color: var(--highlight-color);
 }
 
-:host(.ion-focused.select-label-placement-floating.ion-valid) .label-text-wrapper,
+:host(.has-focus.select-label-placement-floating.ion-valid) .label-text-wrapper,
 :host(.select-label-placement-floating.ion-touched.ion-invalid) .label-text-wrapper,
-:host(.ion-focused.select-label-placement-stacked.ion-valid) .label-text-wrapper,
+:host(.has-focus.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);
 }
@@ -1247,12 +1228,6 @@ 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.
@@ -1262,17 +1237,6 @@ 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.
@@ -1280,7 +1244,7 @@ button {
  * color if there is a validation state.
  */
 :host(.select-expanded) .select-wrapper .select-icon,
-:host(.ion-focused.ion-valid) .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 {
   color: var(--highlight-color);

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

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

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

@@ -6,8 +6,10 @@ 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) });
@@ -28,6 +30,7 @@ export class SelectOption {
         return {
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -40,12 +43,14 @@ 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."
                 },
-                "attribute": "disabled",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "value": {
                 "type": "any",
+                "attribute": "value",
                 "mutable": false,
                 "complexType": {
                     "original": "any | null",
@@ -58,7 +63,8 @@ export class SelectOption {
                     "tags": [],
                     "text": "The text value of the option."
                 },
-                "attribute": "value",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             }
         };

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

@@ -10,10 +10,9 @@ import { getIonMode } from "../../global/ionic-global";
  */
 export class SelectPopover {
     constructor() {
-        this.header = undefined;
-        this.subHeader = undefined;
-        this.message = undefined;
-        this.multiple = undefined;
+        /**
+         * An array of options for the popover
+         */
         this.options = [];
     }
     findOptionFromEvent(ev) {
@@ -122,6 +121,7 @@ export class SelectPopover {
         return {
             "header": {
                 "type": "string",
+                "attribute": "header",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -134,11 +134,13 @@ export class SelectPopover {
                     "tags": [],
                     "text": "The header text of the popover"
                 },
-                "attribute": "header",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "subHeader": {
                 "type": "string",
+                "attribute": "sub-header",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -151,11 +153,13 @@ export class SelectPopover {
                     "tags": [],
                     "text": "The subheader text of the popover"
                 },
-                "attribute": "sub-header",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "message": {
                 "type": "string",
+                "attribute": "message",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -168,11 +172,13 @@ export class SelectPopover {
                     "tags": [],
                     "text": "The text content of the popover body"
                 },
-                "attribute": "message",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "multiple": {
                 "type": "boolean",
+                "attribute": "multiple",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -185,11 +191,13 @@ export class SelectPopover {
                     "tags": [],
                     "text": "If true, the select accepts multiple values"
                 },
-                "attribute": "multiple",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "options": {
                 "type": "unknown",
+                "attribute": "options",
                 "mutable": false,
                 "complexType": {
                     "original": "SelectPopoverOption[]",
@@ -208,6 +216,8 @@ 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,6 +7,9 @@ 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() {
@@ -47,6 +50,7 @@ export class SkeletonText {
         return {
             "animated": {
                 "type": "boolean",
+                "attribute": "animated",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -59,7 +63,8 @@ export class SkeletonText {
                     "tags": [],
                     "text": "If `true`, the skeleton text will animate."
                 },
-                "attribute": "animated",
+                "getter": false,
+                "setter": false,
                 "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() {
-        this.color = undefined;
-        this.duration = undefined;
-        this.name = undefined;
+        /**
+         * If `true`, the spinner's animation will be paused.
+         */
         this.paused = false;
     }
     getName() {
@@ -61,6 +61,7 @@ export class Spinner {
         return {
             "color": {
                 "type": "string",
+                "attribute": "color",
                 "mutable": false,
                 "complexType": {
                     "original": "Color",
@@ -79,11 +80,13 @@ 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)."
                 },
-                "attribute": "color",
+                "getter": false,
+                "setter": false,
                 "reflect": true
             },
             "duration": {
                 "type": "number",
+                "attribute": "duration",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -96,11 +99,13 @@ export class Spinner {
                     "tags": [],
                     "text": "Duration of the spinner animation in milliseconds. The default varies based on the spinner."
                 },
-                "attribute": "duration",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "name": {
                 "type": "string",
+                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "SpinnerTypes",
@@ -119,11 +124,13 @@ 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."
                 },
-                "attribute": "name",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "paused": {
                 "type": "boolean",
+                "attribute": "paused",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -136,7 +143,8 @@ export class Spinner {
                     "tags": [],
                     "text": "If `true`, the spinner's animation will be paused."
                 },
-                "attribute": "paused",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             }

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

@@ -17,8 +17,15 @@ const QUERY = {
 export class SplitPane {
     constructor() {
         this.visible = false;
-        this.contentId = undefined;
+        /**
+         * If `true`, the split pane will be hidden.
+         */
         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) {
@@ -143,6 +150,7 @@ export class SplitPane {
         return {
             "contentId": {
                 "type": "string",
+                "attribute": "content-id",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -155,11 +163,13 @@ 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`."
                 },
-                "attribute": "content-id",
+                "getter": false,
+                "setter": false,
                 "reflect": true
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -172,12 +182,14 @@ export class SplitPane {
                     "tags": [],
                     "text": "If `true`, the split pane will be hidden."
                 },
-                "attribute": "disabled",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "when": {
                 "type": "any",
+                "attribute": "when",
                 "mutable": false,
                 "complexType": {
                     "original": "string | boolean",
@@ -190,7 +202,8 @@ 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."
                 },
-                "attribute": "when",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "QUERY['lg']"
             }

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

@@ -6,10 +6,8 @@ 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) {
@@ -69,6 +67,7 @@ export class Tab {
         return {
             "active": {
                 "type": "boolean",
+                "attribute": "active",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -84,12 +83,14 @@ export class Tab {
                         }],
                     "text": ""
                 },
-                "attribute": "active",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "delegate": {
                 "type": "unknown",
+                "attribute": "delegate",
                 "mutable": false,
                 "complexType": {
                     "original": "FrameworkDelegate",
@@ -110,10 +111,13 @@ export class Tab {
                             "text": undefined
                         }],
                     "text": ""
-                }
+                },
+                "getter": false,
+                "setter": false
             },
             "tab": {
                 "type": "string",
+                "attribute": "tab",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -126,11 +130,13 @@ 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."
                 },
-                "attribute": "tab",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "component": {
                 "type": "string",
+                "attribute": "component",
                 "mutable": false,
                 "complexType": {
                     "original": "ComponentRef",
@@ -149,7 +155,8 @@ export class Tab {
                     "tags": [],
                     "text": "The component to display inside of the tab."
                 },
-                "attribute": "component",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             }
         };

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

@@ -12,8 +12,11 @@ export class TabBar {
     constructor() {
         this.keyboardCtrl = null;
         this.keyboardVisible = false;
-        this.color = undefined;
-        this.selectedTab = undefined;
+        /**
+         * 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.translucent = false;
     }
     selectedTabChanged() {
@@ -75,6 +78,7 @@ export class TabBar {
         return {
             "color": {
                 "type": "string",
+                "attribute": "color",
                 "mutable": false,
                 "complexType": {
                     "original": "Color",
@@ -93,11 +97,13 @@ 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)."
                 },
-                "attribute": "color",
+                "getter": false,
+                "setter": false,
                 "reflect": true
             },
             "selectedTab": {
                 "type": "string",
+                "attribute": "selected-tab",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -110,11 +116,13 @@ export class TabBar {
                     "tags": [],
                     "text": "The selected tab component"
                 },
-                "attribute": "selected-tab",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "translucent": {
                 "type": "boolean",
+                "attribute": "translucent",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -127,7 +135,8 @@ 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)."
                 },
-                "attribute": "translucent",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             }