@ionic/core 8.3.2-dev.11728314937.130218e6 → 8.3.2-dev.11729014526.1ab61c12

package/dist/collection/components/footer/footer.js

@@ -4,7 +4,6 @@
 import { Host, h } from "@stencil/core";
 import { findIonContent, getScrollElement, printIonContentErrorMsg } from "../../utils/content/index";
 import { createKeyboardController } from "../../utils/keyboard/keyboard-controller";
-import { config } from "../../global/config";
 import { getIonTheme } from "../../global/ionic-global";
 import { handleFooterFade } from "./footer.utils";
 /**
@@ -23,8 +22,7 @@ export class Footer {
             const hasFade = collapse === 'fade';
             this.destroyCollapsibleFooter();
             if (hasFade) {
-                const appRootSelector = config.get('appRootSelector', 'ion-app');
-                const pageEl = this.el.closest(`${appRootSelector},ion-page,.ion-page,page-inner`);
+                const pageEl = this.el.closest('ion-app,ion-page,.ion-page,page-inner');
                 const contentEl = pageEl ? findIonContent(pageEl) : null;
                 if (!contentEl) {
                     printIonContentErrorMsg(this.el);
@@ -83,7 +81,7 @@ export class Footer {
         const theme = getIonTheme(this);
         const tabs = this.el.closest('ion-tabs');
         const tabBar = tabs === null || tabs === void 0 ? void 0 : tabs.querySelector(':scope > ion-tab-bar');
-        return (h(Host, { key: '4d217c3986708145ae20c4702c0a6343c2300530', role: "contentinfo", class: {
+        return (h(Host, { key: 'd7358eba783967c0a5deaff543f9ea172baf7ec3', role: "contentinfo", class: {
                 [theme]: true,
                 // Used internally for styling
                 [`footer-${theme}`]: true,
@@ -91,7 +89,7 @@ export class Footer {
                 [`footer-translucent-${theme}`]: translucent,
                 ['footer-toolbar-padding']: !this.keyboardVisible && (!tabBar || tabBar.slot !== 'bottom'),
                 [`footer-collapse-${collapse}`]: collapse !== undefined,
-            } }, theme === 'ios' && translucent && h("div", { key: 'c17c1cc7f073186594604dbf366d7a1c31f7cb0f', class: "footer-background" }), h("slot", { key: '043d2fea09805fed312774970ef353eca579710a' })));
+            } }, theme === 'ios' && translucent && h("div", { key: '1af37a980ee38cbe8b774af553caed43420ffe20', class: "footer-background" }), h("slot", { key: '2cd84214b1611b814b616eda67df8792f7b00447' })));
     }
     static get is() { return "ion-footer"; }
     static get originalStyleUrls() {

package/dist/collection/components/header/header.js

@@ -5,7 +5,6 @@ import { Host, h, writeTask } from "@stencil/core";
 import { findIonContent, getScrollElement, printIonContentErrorMsg } from "../../utils/content/index";
 import { inheritAriaAttributes } from "../../utils/helpers";
 import { hostContext } from "../../utils/theme";
-import { config } from "../../global/config";
 import { getIonTheme } from "../../global/ionic-global";
 import { cloneElement, createHeaderIndex, handleContentScroll, handleHeaderFade, handleToolbarIntersection, setHeaderActive, setToolbarBackgroundOpacity, } from "./header.utils";
 /**
@@ -52,8 +51,7 @@ export class Header {
         const hasFade = collapse === 'fade';
         this.destroyCollapsibleHeader();
         if (hasCondense) {
-            const appRootSelector = config.get('appRootSelector', 'ion-app');
-            const pageEl = this.el.closest(`${appRootSelector},ion-page,.ion-page,page-inner`);
+            const pageEl = this.el.closest('ion-app,ion-page,.ion-page,page-inner');
             const contentEl = pageEl ? findIonContent(pageEl) : null;
             // Cloned elements are always needed in iOS transition
             writeTask(() => {
@@ -64,7 +62,7 @@ export class Header {
             await this.setupCondenseHeader(contentEl, pageEl);
         }
         else if (hasFade) {
-            const pageEl = this.el.closest('ion-app,.ion-app,ion-page,.ion-page,page-inner');
+            const pageEl = this.el.closest('ion-app,ion-page,.ion-page,page-inner');
             const contentEl = pageEl ? findIonContent(pageEl) : null;
             if (!contentEl) {
                 printIonContentErrorMsg(this.el);
@@ -144,7 +142,7 @@ export class Header {
         const collapse = this.collapse || 'none';
         // banner role must be at top level, so remove role if inside a menu
         const roleType = hostContext('ion-menu', this.el) ? 'none' : 'banner';
-        return (h(Host, Object.assign({ key: '97f8672c11986b50e3abb741fdb2a931aeacfbdf', role: roleType, class: {
+        return (h(Host, Object.assign({ key: 'adbbe07d77bad24706b0bd759f8170494a81a289', role: roleType, class: {
                 [theme]: true,
                 // Used internally for styling
                 [`header-${theme}`]: true,
@@ -152,7 +150,7 @@ export class Header {
                 [`header-collapse-${collapse}`]: true,
                 [`header-translucent-${theme}`]: this.translucent,
                 ['header-divider']: divider,
-            } }, inheritedAttributes), theme === 'ios' && translucent && h("div", { key: '47279f7dcc4c138ab431aba4c240d53f8574eb31', class: "header-background" }), h("slot", { key: '44001b96332d3d95d443d8782fa582f931221cde' })));
+            } }, inheritedAttributes), theme === 'ios' && translucent && h("div", { key: '658e2bd6083b7025fe25f3a7ef7e068b5de85d26', class: "header-background" }), h("slot", { key: 'd15ec6f1c6dcf4a316461dc917aceb50e54bd2c3' })));
     }
     static get is() { return "ion-header"; }
     static get originalStyleUrls() {

package/dist/collection/components/input/input.js

@@ -585,7 +585,7 @@ export class Input {
                 "mutable": false,
                 "complexType": {
                     "original": "AutocompleteTypes",
-                    "resolved": "\"name\" | \"url\" | \"off\" | \"on\" | \"additional-name\" | \"address-level1\" | \"address-level2\" | \"address-level3\" | \"address-level4\" | \"address-line1\" | \"address-line2\" | \"address-line3\" | \"bday-day\" | \"bday-month\" | \"bday-year\" | \"cc-csc\" | \"cc-exp\" | \"cc-exp-month\" | \"cc-exp-year\" | \"cc-family-name\" | \"cc-given-name\" | \"cc-name\" | \"cc-number\" | \"cc-type\" | \"country\" | \"country-name\" | \"current-password\" | \"family-name\" | \"given-name\" | \"honorific-prefix\" | \"honorific-suffix\" | \"new-password\" | \"one-time-code\" | \"organization\" | \"postal-code\" | \"street-address\" | \"transaction-amount\" | \"transaction-currency\" | \"username\" | \"email\" | \"tel\" | \"tel-area-code\" | \"tel-country-code\" | \"tel-extension\" | \"tel-local\" | \"tel-national\" | \"nickname\" | \"organization-title\" | \"cc-additional-name\" | \"language\" | \"bday\" | \"sex\" | \"impp\" | \"photo\"",
+                    "resolved": "\"name\" | \"email\" | \"tel\" | \"url\" | \"on\" | \"off\" | \"honorific-prefix\" | \"given-name\" | \"additional-name\" | \"family-name\" | \"honorific-suffix\" | \"nickname\" | \"username\" | \"new-password\" | \"current-password\" | \"one-time-code\" | \"organization-title\" | \"organization\" | \"street-address\" | \"address-line1\" | \"address-line2\" | \"address-line3\" | \"address-level4\" | \"address-level3\" | \"address-level2\" | \"address-level1\" | \"country\" | \"country-name\" | \"postal-code\" | \"cc-name\" | \"cc-given-name\" | \"cc-additional-name\" | \"cc-family-name\" | \"cc-number\" | \"cc-exp\" | \"cc-exp-month\" | \"cc-exp-year\" | \"cc-csc\" | \"cc-type\" | \"transaction-currency\" | \"transaction-amount\" | \"language\" | \"bday\" | \"bday-day\" | \"bday-month\" | \"bday-year\" | \"sex\" | \"tel-country-code\" | \"tel-national\" | \"tel-area-code\" | \"tel-local\" | \"tel-extension\" | \"impp\" | \"photo\"",
                     "references": {
                         "AutocompleteTypes": {
                             "location": "import",

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

@@ -1,3 +1,68 @@
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
+/**
+ * This is an auto-generated file, please do not change it directly.
+ * Ionic Design System
+ */
+/**
+ * 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 font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
 /**
  * A heuristic that applies CSS to tablet
  * viewports.
@@ -149,122 +214,134 @@
   display: block;
 }
 
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
-/**
- * This is an auto-generated file, please do not change it directly.
- * Ionic Design System
- */
-/**
- * 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 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 --focus-ring-color: The color of the ring around the focused element.
+   * @prop --focus-ring-width: The width of the ring around the focused element.
+   */
   --background: var(--ionic-color-neutral-100, #f1f1f1);
-  --border-radius: var(--ionic-border-radius-800, 32px);
+  --border-radius: var(--ionic-border-radius-400, 16px);
   --box-shadow: none;
   --cancel-button-color: var(--ionic-color-neutral-800, #626262);
-  --clear-button-color: var(--ionic-color-neutral-800, #626262);
-  --color: var(--ionic-color-neutral-800, #626262);
+  --clear-button-color: var(--ionic-color-neutral-1000, #3b3b3b);
+  --color: var(--ionic-color-neutral-1200, #242424);
   --icon-color: var(--ionic-color-neutral-800, #626262);
+  --placeholder-color: var(--ionic-color-neutral-800, #626262);
+  --focus-ring-color: var(--ionic-state-focus-1, #9ec4fd);
+  --focus-ring-width: var(--ionic-border-size-050, 2px);
+  font-size: var(--ionic-font-size-350, 0.875rem);
+  font-weight: var(--ionic-font-weight-regular, 400);
+  letter-spacing: var(--ionic-letter-spacing-0, 0);
+  line-height: var(--ionic-line-height-600, 24px);
+  text-decoration: none;
+  text-transform: none;
   padding-left: 0;
   padding-right: 0;
   padding-top: 0;
   padding-bottom: 0;
-  min-height: var(--ionic-scale-1000, 40px);
-  contain: content;
 }
 
-.searchbar-input-container {
-  min-height: var(--ionic-scale-1000, 40px);
+.searchbar-search-icon {
+  top: var(--ionic-scale-400, 16px);
+  width: var(--ionic-scale-400, 16px);
+  height: var(--ionic-scale-400, 16px);
 }
-
 .searchbar-search-icon {
-  display: none;
+  inset-inline-start: var(--ionic-scale-400, 16px);
 }
 
 .searchbar-input {
-  -webkit-padding-start: var(--ionic-space-300, 12px);
-  padding-inline-start: var(--ionic-space-300, 12px);
-  -webkit-padding-end: var(--ionic-space-300, 12px);
-  padding-inline-end: var(--ionic-space-300, 12px);
+  /**
+   * Padding start is based on
+   * desired padding from design,
+   * the size of the search icon,
+   * and the gap between the icon and the input.
+   *
+   * Padding end is based on
+   * desired padding from design,
+   * the size of the clear icon,
+   * and the gap between the icon and the input.
+   */
+  -webkit-padding-start: calc(var(--ionic-space-400, 16px) + var(--ionic-scale-400, 16px) + var(--ionic-space-200, 8px));
+  padding-inline-start: calc(var(--ionic-space-400, 16px) + var(--ionic-scale-400, 16px) + var(--ionic-space-200, 8px));
+  -webkit-padding-end: calc(var(--ionic-space-400, 16px) + var(--ionic-scale-400, 16px) + var(--ionic-space-200, 8px));
+  padding-inline-end: calc(var(--ionic-space-400, 16px) + var(--ionic-scale-400, 16px) + var(--ionic-space-200, 8px));
   padding-top: var(--ionic-space-300, 12px);
   padding-bottom: var(--ionic-space-300, 12px);
-  height: 100%;
-  font-size: var(--ionic-font-size-350, 0.875rem);
-  font-weight: var(--ionic-font-weight-regular, 400);
+  min-height: var(--ionic-scale-1200, 48px);
   contain: strict;
 }
 
 .searchbar-clear-button {
-  top: 50%;
-  position: absolute;
-  width: var(--ionic-scale-600, 24px);
-  height: var(--ionic-scale-600, 24px);
-  transform: translateY(-50%);
+  top: var(--ionic-scale-400, 16px);
+  width: var(--ionic-scale-400, 16px);
+  height: var(--ionic-scale-400, 16px);
   background-color: transparent;
-  font-size: var(--ionic-font-size-400, 1rem);
+  font-size: var(--ionic-scale-400, 16px);
   contain: strict;
 }
 .searchbar-clear-button {
-  inset-inline-end: var(--ionic-space-200, 8px);
+  inset-inline-end: var(--ionic-scale-400, 16px);
+}
+
+.searchbar-cancel-button {
+  /**
+   * The left edge of the cancel button
+   * should align with the left edge
+   * of the back button if the searchbar
+   * is used in a toolbar.
+   */
+  top: 0;
+  background-color: transparent;
+  font-size: var(--ionic-font-size-400, 1rem);
+}
+.searchbar-cancel-button {
+  inset-inline-start: 9px;
+}
+
+.searchbar-search-icon,
+.searchbar-clear-button,
+.searchbar-cancel-button {
+  position: absolute;
+}
+
+.searchbar-clear-button:focus-visible,
+.searchbar-cancel-button:focus-visible ion-icon {
+  border-radius: var(--ionic-border-radius-100, 4px);
+  outline: var(--ionic-border-size-050, 2px) var(--ionic-border-style-solid, solid) var(--ionic-state-focus-1, #9ec4fd);
+  opacity: 1;
 }
 
 :host-context(ion-toolbar) {
-  min-height: var(--ionic-scale-1000, 40px);
+  min-height: var(--ionic-scale-1200, 48px);
+}
+
+/* Hover */
+:host(:hover) {
+  --background: var(--ionic-color-neutral-200, #e7e7e7);
+}
+
+/* Focus */
+:host(.searchbar-has-focus) .searchbar-input {
+  outline: var(--focus-ring-width) var(--ionic-border-style-solid, solid) var(--focus-ring-color);
+}
+
+:host(.searchbar-has-focus) .searchbar-search-icon,
+:host(.searchbar-has-focus) .searchbar-cancel-button,
+:host(.searchbar-should-show-cancel) .searchbar-cancel-button {
+  display: block;
+}
+
+:host(.searchbar-has-focus) .searchbar-cancel-button + .searchbar-search-icon,
+:host(.searchbar-should-show-cancel) .searchbar-cancel-button + .searchbar-search-icon {
+  display: none;
+}
+
+/* Disabled */
+:host(.searchbar-disabled) {
+  --color: var(--ionic-color-neutral-500, #a2a2a2);
+  --icon-color: var(--ionic-color-neutral-500, #a2a2a2);
+  --placeholder-color: var(--ionic-color-neutral-500, #a2a2a2);
+  cursor: default;
+  pointer-events: none;
 }

package/dist/collection/components/searchbar/searchbar.js

@@ -551,7 +551,7 @@ export class Searchbar {
                 "mutable": false,
                 "complexType": {
                     "original": "AutocompleteTypes",
-                    "resolved": "\"name\" | \"url\" | \"off\" | \"on\" | \"additional-name\" | \"address-level1\" | \"address-level2\" | \"address-level3\" | \"address-level4\" | \"address-line1\" | \"address-line2\" | \"address-line3\" | \"bday-day\" | \"bday-month\" | \"bday-year\" | \"cc-csc\" | \"cc-exp\" | \"cc-exp-month\" | \"cc-exp-year\" | \"cc-family-name\" | \"cc-given-name\" | \"cc-name\" | \"cc-number\" | \"cc-type\" | \"country\" | \"country-name\" | \"current-password\" | \"family-name\" | \"given-name\" | \"honorific-prefix\" | \"honorific-suffix\" | \"new-password\" | \"one-time-code\" | \"organization\" | \"postal-code\" | \"street-address\" | \"transaction-amount\" | \"transaction-currency\" | \"username\" | \"email\" | \"tel\" | \"tel-area-code\" | \"tel-country-code\" | \"tel-extension\" | \"tel-local\" | \"tel-national\" | \"nickname\" | \"organization-title\" | \"cc-additional-name\" | \"language\" | \"bday\" | \"sex\" | \"impp\" | \"photo\"",
+                    "resolved": "\"name\" | \"email\" | \"tel\" | \"url\" | \"on\" | \"off\" | \"honorific-prefix\" | \"given-name\" | \"additional-name\" | \"family-name\" | \"honorific-suffix\" | \"nickname\" | \"username\" | \"new-password\" | \"current-password\" | \"one-time-code\" | \"organization-title\" | \"organization\" | \"street-address\" | \"address-line1\" | \"address-line2\" | \"address-line3\" | \"address-level4\" | \"address-level3\" | \"address-level2\" | \"address-level1\" | \"country\" | \"country-name\" | \"postal-code\" | \"cc-name\" | \"cc-given-name\" | \"cc-additional-name\" | \"cc-family-name\" | \"cc-number\" | \"cc-exp\" | \"cc-exp-month\" | \"cc-exp-year\" | \"cc-csc\" | \"cc-type\" | \"transaction-currency\" | \"transaction-amount\" | \"language\" | \"bday\" | \"bday-day\" | \"bday-month\" | \"bday-year\" | \"sex\" | \"tel-country-code\" | \"tel-national\" | \"tel-area-code\" | \"tel-local\" | \"tel-extension\" | \"impp\" | \"photo\"",
                     "references": {
                         "AutocompleteTypes": {
                             "location": "import",