@ionic/core 8.2.2-dev.11717796763.1aa87d5c → 8.2.2-dev.11718204308.11b678e2

package/dist/cjs/ion-searchbar.cjs.entry.js

@@ -6,15 +6,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-7f6ce0b7.js');
-const ghostDuotone = require('./ghost-duotone-cd930d5c.js');
 const helpers = require('./helpers-afaa9001.js');
 const dir = require('./dir-94c21456.js');
 const theme = require('./theme-d1c573d2.js');
 const index$1 = require('./index-073c7cdc.js');
 const ionicGlobal = require('./ionic-global-2bd379ad.js');
 
-const backspaceSvg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTYgMjU2IiBmaWxsPSJjdXJyZW50Q29sb3IiPjxwYXRoIGQ9Ik0yMTYsNDBINjguNTNhMTYuMDgsMTYuMDgsMCwwLDAtMTMuNzIsNy43N0w5LjE0LDEyMy44OGE4LDgsMCwwLDAsMCw4LjI0bDQ1LjY3LDc2LjExQTE2LjA4LDE2LjA4LDAsMCwwLDY4LjUzLDIxNkgyMTZhMTYsMTYsMCwwLDAsMTYtMTZWNTZBMTYsMTYsMCwwLDAsMjE2LDQwWk02MS42NywyMDQuMTIsNjguNTMsMjAwaDBaTTIxNiwyMDBINjguNTNsLTQzLjItNzIsNDMuMi03MkgyMTZaTTEwNi4zNCwxNDYuMzQsMTI0LjY5LDEyOGwtMTguMzUtMTguMzRhOCw4LDAsMCwxLDExLjMyLTExLjMyTDEzNiwxMTYuNjlsMTguMzQtMTguMzVhOCw4LDAsMCwxLDExLjMyLDExLjMyTDE0Ny4zMSwxMjhsMTguMzUsMTguMzRhOCw4LDAsMCwxLTExLjMyLDExLjMyTDEzNiwxMzkuMzFsLTE4LjM0LDE4LjM1YTgsOCwwLDAsMS0xMS4zMi0xMS4zMloiLz48L3N2Zz4=';
-
 const ionicSearchbarMdCss = ".sc-ion-searchbar-ionic-h{--placeholder-color:initial;--placeholder-font-style:initial;--placeholder-font-weight:initial;--placeholder-opacity:var(--ion-placeholder-opacity, 0.6);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;width:100%;color:var(--color);font-family:var(--ion-font-family, inherit);-webkit-box-sizing:border-box;box-sizing:border-box}.ion-color.sc-ion-searchbar-ionic-h{color:var(--ion-color-contrast)}.ion-color.sc-ion-searchbar-ionic-h .searchbar-input.sc-ion-searchbar-ionic{background:var(--ion-color-base)}.ion-color.sc-ion-searchbar-ionic-h .searchbar-clear-button.sc-ion-searchbar-ionic,.ion-color.sc-ion-searchbar-ionic-h .searchbar-cancel-button.sc-ion-searchbar-ionic,.ion-color.sc-ion-searchbar-ionic-h .searchbar-search-icon.sc-ion-searchbar-ionic{color:inherit}.searchbar-search-icon.sc-ion-searchbar-ionic{color:var(--icon-color);pointer-events:none}.searchbar-input-container.sc-ion-searchbar-ionic{display:block;position:relative;-ms-flex-negative:1;flex-shrink:1;width:100%}.searchbar-input.sc-ion-searchbar-ionic{color:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-align:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;white-space:inherit;border-radius:var(--border-radius);display:block;width:100%;min-height:inherit;border:0;outline:none;background:var(--background);font-family:inherit;-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none}.searchbar-input.sc-ion-searchbar-ionic::-webkit-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.searchbar-input.sc-ion-searchbar-ionic::-moz-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.searchbar-input.sc-ion-searchbar-ionic:-ms-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.searchbar-input.sc-ion-searchbar-ionic::-ms-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.searchbar-input.sc-ion-searchbar-ionic::placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.searchbar-input.sc-ion-searchbar-ionic::-webkit-search-cancel-button,.searchbar-input.sc-ion-searchbar-ionic::-ms-clear{display:none}.searchbar-cancel-button.sc-ion-searchbar-ionic{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:none;height:100%;border:0;outline:none;color:var(--cancel-button-color);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.searchbar-cancel-button.sc-ion-searchbar-ionic>div.sc-ion-searchbar-ionic{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%}.searchbar-clear-button.sc-ion-searchbar-ionic{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;display:none;min-height:0;outline:none;color:var(--clear-button-color);-webkit-appearance:none;-moz-appearance:none;appearance:none}.searchbar-clear-button.sc-ion-searchbar-ionic:focus{opacity:0.5}.searchbar-has-value.searchbar-should-show-clear.sc-ion-searchbar-ionic-h .searchbar-clear-button.sc-ion-searchbar-ionic{display:block}.searchbar-disabled.sc-ion-searchbar-ionic-h{cursor:default;opacity:0.4;pointer-events:none}.sc-ion-searchbar-ionic-h{--background:var(--ion-background-color, #fff);--border-radius:2px;--box-shadow:0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);--cancel-button-color:var(--ion-color-step-900, var(--ion-text-color-step-100, #1a1a1a));--clear-button-color:initial;--color:var(--ion-color-step-850, var(--ion-text-color-step-150, #262626));--icon-color:var(--ion-color-step-600, var(--ion-text-color-step-400, #666666));-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px;padding-top:8px;padding-bottom:8px;background:inherit}.searchbar-search-icon.sc-ion-searchbar-ionic{top:11px;width:1.3125rem;height:1.3125rem}.searchbar-search-icon.sc-ion-searchbar-ionic{inset-inline-start:16px}.searchbar-cancel-button.sc-ion-searchbar-ionic{top:0;background-color:transparent;font-size:1.5em}.searchbar-cancel-button.sc-ion-searchbar-ionic{inset-inline-start:9px}.searchbar-search-icon.sc-ion-searchbar-ionic,.searchbar-cancel-button.sc-ion-searchbar-ionic{position:absolute}.searchbar-search-icon.ion-activated.sc-ion-searchbar-ionic,.searchbar-cancel-button.ion-activated.sc-ion-searchbar-ionic{background-color:transparent}.searchbar-input.sc-ion-searchbar-ionic{-webkit-padding-start:3.4375rem;padding-inline-start:3.4375rem;-webkit-padding-end:3.4375rem;padding-inline-end:3.4375rem;padding-top:0.375rem;padding-bottom:0.375rem;background-position:left 8px center;height:auto;font-size:1rem;font-weight:400;line-height:30px}[dir=rtl].sc-ion-searchbar-ionic-h .searchbar-input.sc-ion-searchbar-ionic,[dir=rtl] .sc-ion-searchbar-ionic-h .searchbar-input.sc-ion-searchbar-ionic{background-position:right 8px center}[dir=rtl].sc-ion-searchbar-ionic .searchbar-input.sc-ion-searchbar-ionic{background-position:right 8px center}@supports selector(:dir(rtl)){.searchbar-input.sc-ion-searchbar-ionic:dir(rtl){background-position:right 8px center}}.searchbar-clear-button.sc-ion-searchbar-ionic{top:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;position:absolute;height:100%;border:0;background-color:transparent}.searchbar-clear-button.sc-ion-searchbar-ionic{inset-inline-end:13px}.searchbar-clear-button.ion-activated.sc-ion-searchbar-ionic{background-color:transparent}.searchbar-clear-icon.sc-ion-searchbar-ionic{width:1.375rem;height:100%}.searchbar-has-focus.sc-ion-searchbar-ionic-h .searchbar-search-icon.sc-ion-searchbar-ionic{display:block}.searchbar-has-focus.sc-ion-searchbar-ionic-h .searchbar-cancel-button.sc-ion-searchbar-ionic,.searchbar-should-show-cancel.sc-ion-searchbar-ionic-h .searchbar-cancel-button.sc-ion-searchbar-ionic{display:block}.searchbar-has-focus.sc-ion-searchbar-ionic-h .searchbar-cancel-button.sc-ion-searchbar-ionic+.searchbar-search-icon.sc-ion-searchbar-ionic,.searchbar-should-show-cancel.sc-ion-searchbar-ionic-h .searchbar-cancel-button.sc-ion-searchbar-ionic+.searchbar-search-icon.sc-ion-searchbar-ionic{display:none}ion-toolbar.sc-ion-searchbar-ionic-h,ion-toolbar .sc-ion-searchbar-ionic-h{-webkit-padding-start:7px;padding-inline-start:7px;-webkit-padding-end:7px;padding-inline-end:7px;padding-top:3px;padding-bottom:3px}";
 const IonSearchbarIonicStyle0 = ionicSearchbarMdCss;
 
@@ -401,20 +398,13 @@ const Searchbar = class {
      * @returns {string} The icon to use for the clear icon.
      */
     get searchbarClearIcon() {
-        // Return the icon if it is explicitly set
-        if (this.clearIcon) {
-            return this.clearIcon;
-        }
-        // Determine the theme and map to default icons
         const theme = ionicGlobal.getIonTheme(this);
-        const defaultIcons = {
-            ios: index$1.closeCircle,
-            ionic: backspaceSvg,
-            md: index$1.closeSharp,
-        };
-        // Get the default icon based on the theme, falling back to 'md' icon if necessary
-        const defaultIcon = defaultIcons[theme] || defaultIcons.md;
-        // Return the configured searchbar clear icon or the default icon
+        const icon = this.clearIcon;
+        const defaultIcon = theme === 'ios' ? index$1.closeCircle : index$1.closeSharp;
+        if (icon !== undefined) {
+            // Icon is set on the component.
+            return icon;
+        }
         return ionicGlobal.config.get('searchbarClearIcon', defaultIcon);
     }
     /**
@@ -426,20 +416,13 @@ const Searchbar = class {
      * @returns {string} The icon to use for the search icon.
      */
     get searchbarSearchIcon() {
-        // Return the icon if it is explicitly set
-        if (this.searchIcon) {
-            return this.searchIcon;
-        }
-        // Determine the theme and map to default icons
         const theme = ionicGlobal.getIonTheme(this);
-        const defaultIcons = {
-            ios: index$1.searchOutline,
-            ionic: ghostDuotone.ghostDuotoneSvg,
-            md: index$1.searchSharp,
-        };
-        // Get the default icon based on the theme, falling back to 'md' icon if necessary
-        const defaultIcon = defaultIcons[theme] || defaultIcons.md;
-        // Return the configured searchbar search icon or the default icon
+        const icon = this.searchIcon;
+        const defaultIcon = theme === 'ios' ? index$1.searchOutline : index$1.searchSharp;
+        if (icon !== undefined) {
+            // Icon is set on the component.
+            return icon;
+        }
         return ionicGlobal.config.get('searchbarSearchIcon', defaultIcon);
     }
     render() {
@@ -455,8 +438,8 @@ const Searchbar = class {
          * icon in sync.
          */
         const searchbarCancelIcon = (_a = this.cancelButtonIcon) !== null && _a !== void 0 ? _a : ionicGlobal.config.get('searchbarCancelIcon', ionicGlobal.config.get('backButtonIcon', index$1.arrowBackSharp));
-        const cancelButton = this.showCancelButton !== 'never' && (index.h("button", { key: '1325b5d3cd50fde86f2d5631d9d7dcd53c656cc3', "aria-label": cancelButtonText, "aria-hidden": shouldShowCancelButton ? undefined : 'true', type: "button", tabIndex: theme$1 === 'ios' && !shouldShowCancelButton ? -1 : undefined, onMouseDown: this.onCancelSearchbar, onTouchStart: this.onCancelSearchbar, class: "searchbar-cancel-button" }, index.h("div", { key: '05b21511f6f0a8f13b6bdb52e4197b550e3a224c', "aria-hidden": "true" }, theme$1 === 'md' ? (index.h("ion-icon", { "aria-hidden": "true", icon: searchbarCancelIcon, lazy: false })) : (cancelButtonText))));
-        return (index.h(index.Host, { key: '8c83e95c9331195f271ee3878b56331cc55b246d', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: theme.createColorClasses(this.color, {
+        const cancelButton = this.showCancelButton !== 'never' && (index.h("button", { key: '0f2eba25249738e27c3034c7eec7115923750f81', "aria-label": cancelButtonText, "aria-hidden": shouldShowCancelButton ? undefined : 'true', type: "button", tabIndex: theme$1 === 'ios' && !shouldShowCancelButton ? -1 : undefined, onMouseDown: this.onCancelSearchbar, onTouchStart: this.onCancelSearchbar, class: "searchbar-cancel-button" }, index.h("div", { key: '6681fbb58ef02f92921f323a72811fc9944a8bc5', "aria-hidden": "true" }, theme$1 === 'md' ? (index.h("ion-icon", { "aria-hidden": "true", icon: searchbarCancelIcon, lazy: false })) : (cancelButtonText))));
+        return (index.h(index.Host, { key: 'a3096793c67003c9877e82c84f1a3322f0f7dd43', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: theme.createColorClasses(this.color, {
                 [theme$1]: true,
                 'searchbar-animated': animated,
                 'searchbar-disabled': this.disabled,
@@ -466,14 +449,14 @@ const Searchbar = class {
                 'searchbar-has-focus': this.focused,
                 'searchbar-should-show-clear': this.shouldShowClearButton(),
                 'searchbar-should-show-cancel': this.shouldShowCancelButton(),
-            }) }, index.h("div", { key: 'af3619276aff948d14b4db312b558b191efdab75', class: "searchbar-input-container" }, index.h("input", Object.assign({ key: '8e00bddb2c1e7a51548d7887161c375ed3a064d9', "aria-label": "search text", disabled: this.disabled, ref: (el) => (this.nativeInput = el), class: "searchbar-input", inputMode: this.inputmode, enterKeyHint: this.enterkeyhint, name: this.name, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, minLength: this.minlength, maxLength: this.maxlength, placeholder: this.placeholder, type: this.type, value: this.getValue(), autoCapitalize: autocapitalize === 'default' ? undefined : autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, spellcheck: this.spellcheck }, this.inheritedAttributes)), theme$1 === 'md' && cancelButton, index.h("ion-icon", { key: '7823dc3661a5ddc45c84f801e74b12d5b85dee1b', "aria-hidden": "true", icon: searchbarSearchIcon, lazy: false, class: "searchbar-search-icon" }), index.h("button", { key: '02a1492e69abe727e795590648590d2af2249907', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
+            }) }, index.h("div", { key: '1a7b5e5c5b0b833f09b338695277c6b5cafc2821', class: "searchbar-input-container" }, index.h("input", Object.assign({ key: '83d441c6380d96768da82a67c695ecc04ed3f8d1', "aria-label": "search text", disabled: this.disabled, ref: (el) => (this.nativeInput = el), class: "searchbar-input", inputMode: this.inputmode, enterKeyHint: this.enterkeyhint, name: this.name, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, minLength: this.minlength, maxLength: this.maxlength, placeholder: this.placeholder, type: this.type, value: this.getValue(), autoCapitalize: autocapitalize === 'default' ? undefined : autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, spellcheck: this.spellcheck }, this.inheritedAttributes)), theme$1 === 'md' && cancelButton, index.h("ion-icon", { key: '5505461cd3fef4bcd758cbe8e1c36afa2e0c207b', "aria-hidden": "true", icon: searchbarSearchIcon, lazy: false, class: "searchbar-search-icon" }), index.h("button", { key: '9b8c98830670a64abb5b40f8889a1acc7bc87651', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
                 /**
                  * This prevents mobile browsers from
                  * blurring the input when the clear
                  * button is activated.
                  */
                 ev.preventDefault();
-            }, onClick: () => this.onClearInput(true) }, index.h("ion-icon", { key: '6eccaa09b92b263d825cc0cd1918168a8bcfc151', "aria-hidden": "true", icon: searchbarClearIcon, lazy: false, class: "searchbar-clear-icon" }))), theme$1 === 'ios' && cancelButton));
+            }, onClick: () => this.onClearInput(true) }, index.h("ion-icon", { key: 'f729feadcdbe5bf4511358d2cc8eb531c353982f', "aria-hidden": "true", icon: searchbarClearIcon, lazy: false, class: "searchbar-clear-icon" }))), theme$1 === 'ios' && cancelButton));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/collection/components/back-button/back-button.js

@@ -1,7 +1,6 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import ghostDuotone from "@phosphor-icons/core/assets/duotone/ghost-duotone.svg";
 import { Host, h } from "@stencil/core";
 import { inheritAriaAttributes } from "../../utils/helpers";
 import { createColorClasses, hostContext, openURL } from "../../utils/theme";
@@ -42,21 +41,17 @@ export class BackButton {
         }
     }
     get backButtonIcon() {
-        // Return the icon if it is explicitly set
-        if (this.icon) {
-            return this.icon;
+        const icon = this.icon;
+        if (icon != null) {
+            // Icon is set on the component or by the config.
+            return icon;
         }
-        // Determine the theme and map to default icons
-        const theme = getIonTheme(this);
-        const defaultIcons = {
-            ios: chevronBack,
-            ionic: ghostDuotone,
-            md: arrowBackSharp,
-        };
-        // Get the default icon based on the theme, falling back to 'md' icon if necessary
-        const defaultIcon = defaultIcons[theme] || defaultIcons.md;
-        // Return the configured back button icon or the default icon
-        return config.get('backButtonIcon', defaultIcon);
+        if (getIonTheme(this) === 'ios') {
+            // default ios back button icon
+            return config.get('backButtonIcon', chevronBack);
+        }
+        // default md back button icon
+        return config.get('backButtonIcon', arrowBackSharp);
     }
     get backButtonText() {
         const defaultBackButtonText = getIonTheme(this) === 'ios' ? 'Back' : null;
@@ -78,7 +73,7 @@ export class BackButton {
         const showBackButton = defaultHref !== undefined;
         const theme = getIonTheme(this);
         const ariaLabel = inheritedAttributes['aria-label'] || backButtonText || 'back';
-        return (h(Host, { key: '2312557fad91c04bc77bc79feb55dc83e7820429', onClick: this.onClick, class: createColorClasses(color, {
+        return (h(Host, { key: '2a5ed71efffb6cad9e0d2182cfa77f291a6e044b', onClick: this.onClick, class: createColorClasses(color, {
                 [theme]: true,
                 button: true, // ion-buttons target .button
                 'back-button-disabled': disabled,
@@ -88,7 +83,7 @@ export class BackButton {
                 'ion-activatable': true,
                 'ion-focusable': true,
                 'show-back-button': showBackButton,
-            }) }, h("button", { key: '309ba8ef79ac364a065a69aa9df9980b0acc9ce0', type: type, disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }, h("span", { key: 'c1aabce609fd6a6d4474bd2a76a011c461b5f5f8', class: "button-inner" }, backButtonIcon && (h("ion-icon", { key: 'f372b3d13faaa5c2e2f5b1a6c4468c708176cf27', part: "icon", icon: backButtonIcon, "aria-hidden": "true", lazy: false, "flip-rtl": icon === undefined })), backButtonText && (h("span", { key: '4cfa2579dbb36b85cfd30a17ab2c93fdeef621dc', part: "text", "aria-hidden": "true", class: "button-text" }, backButtonText))), theme === 'md' && h("ion-ripple-effect", { key: '1a18479d6c3130cf19188f1422639f953724c913', type: this.rippleType }))));
+            }) }, h("button", { key: 'e380bfec2ce8c6bf8da3029183a2533d15c67393', type: type, disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }, h("span", { key: '7e9092d5ef0761488d573ded9bf5fee893400c7d', class: "button-inner" }, backButtonIcon && (h("ion-icon", { key: '35e43b83a2776f2339700850f2b28ccb81dbc8bf', part: "icon", icon: backButtonIcon, "aria-hidden": "true", lazy: false, "flip-rtl": icon === undefined })), backButtonText && (h("span", { key: '8a448be4ee9074d973ab1eafab3e423f86a0cb0d', part: "text", "aria-hidden": "true", class: "button-text" }, backButtonText))), theme === 'md' && h("ion-ripple-effect", { key: '9ed811f7cb7fb1111b1242a6156582acceea4b98', type: this.rippleType }))));
     }
     static get is() { return "ion-back-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -4,6 +4,32 @@
  * @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
@@ -37,49 +63,18 @@
  * @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.
- *
- * Usage:
- * @include tablet-viewport() {
- *   :host {
- *     background-color: green;
- *   }
- * }
- */
-/**
- * A heuristic that applies CSS to mobile
- * viewports (i.e. phones, not tablets).
- *
- * Usage:
- * @include mobile-viewport() {
- *   :host {
- *     background-color: blue;
- *   }
- * }
- */
 :host {
-  /**
-   * @prop --size: Size of the checkbox icon
-   *
-   * @prop --checkbox-background: Background of the checkbox icon
-   * @prop --checkbox-background-checked: Background of the checkbox icon when checked
-   *
-   * @prop --border-color: Border color of the checkbox icon
-   * @prop --border-radius: Border radius of the checkbox icon
-   * @prop --border-width: Border width of the checkbox icon
-   * @prop --border-style: Border style of the checkbox icon
-   * @prop --border-color-checked: Border color of the checkbox icon when checked
-   *
-   * @prop --transition: Transition of the checkbox icon
-   *
-   * @prop --checkmark-color: Color of the checkbox checkmark when checked
-   * @prop --checkmark-width: Stroke width of the checkbox checkmark
-   */
-  --checkbox-background-checked: var(--ion-color-primary, #0054e9);
-  --border-color-checked: var(--ion-color-primary, #0054e9);
-  --checkmark-color: var(--ion-color-primary-contrast, #fff);
+  --border-width: var(--ionic-border-size-025, 1px);
+  --border-style: var(--ionic-border-style-solid, solid);
+  --border-color: var(--ionic-color-neutral-800, #626262);
+  --checkmark-width: 3;
+  --focus-ring-color: var(--ionic-state-focus-1, #9ec4fd);
+  --focus-ring-width: var(--ionic-border-size-050, 2px);
+  --focus-ring-offset: var(--ionic-space-050, 2px);
+  --size: var(--ionic-scale-600, 24px);
+  --checkbox-background-checked: var(--ionic-color-primary-base, #105cef);
+  --border-color-checked: var(--ionic-color-primary-base, #105cef);
+  --checkmark-color: var(--ionic-color-base-white, #ffffff);
   --transition: none;
   display: inline-block;
   position: relative;
@@ -87,6 +82,21 @@
   user-select: none;
   z-index: 2;
 }
+:host::after {
+  right: 0;
+  left: 0;
+  top: 50%;
+  position: absolute;
+  height: 100%;
+  min-height: var(--ionic-scale-1200, 48px);
+  transform: translateY(-50%);
+  content: "";
+  cursor: pointer;
+  z-index: 1;
+}
+:host .native-wrapper {
+  position: relative;
+}
 
 :host(.in-item) {
   flex: 1 1 0;
@@ -106,12 +116,6 @@
   width: auto;
 }
 
-:host(.ion-color) {
-  --checkbox-background-checked: var(--ion-color-base);
-  --border-color-checked: var(--ion-color-base);
-  --checkmark-color: var(--ion-color-contrast);
-}
-
 .checkbox-wrapper {
   display: flex;
   flex-grow: 1;
@@ -127,17 +131,17 @@
 }
 
 :host(.in-item) .label-text-wrapper {
-  margin-top: 10px;
-  margin-bottom: 10px;
+  margin-top: var(--ionic-space-250, 10px);
+  margin-bottom: var(--ionic-space-250, 10px);
 }
 
 :host(.in-item.checkbox-label-placement-stacked) .label-text-wrapper {
-  margin-top: 10px;
-  margin-bottom: 16px;
+  margin-top: var(--ionic-space-250, 10px);
+  margin-bottom: var(--ionic-space-400, 16px);
 }
 
 :host(.in-item.checkbox-label-placement-stacked) .native-wrapper {
-  margin-bottom: 10px;
+  margin-bottom: var(--ionic-space-250, 10px);
 }
 
 /**
@@ -229,8 +233,8 @@ input {
    */
   -webkit-margin-start: 0;
   margin-inline-start: 0;
-  -webkit-margin-end: 16px;
-  margin-inline-end: 16px;
+  -webkit-margin-end: var(--ionic-space-400, 16px);
+  margin-inline-end: var(--ionic-space-400, 16px);
 }
 
 /**
@@ -247,8 +251,8 @@ input {
  * when the label sits at the end.
  */
 :host(.checkbox-label-placement-end) .label-text-wrapper {
-  -webkit-margin-start: 16px;
-  margin-inline-start: 16px;
+  -webkit-margin-start: var(--ionic-space-400, 16px);
+  margin-inline-start: var(--ionic-space-400, 16px);
   -webkit-margin-end: 0;
   margin-inline-end: 0;
 }
@@ -261,8 +265,8 @@ input {
    */
   -webkit-margin-start: 0;
   margin-inline-start: 0;
-  -webkit-margin-end: 16px;
-  margin-inline-end: 16px;
+  -webkit-margin-end: var(--ionic-space-400, 16px);
+  margin-inline-end: var(--ionic-space-400, 16px);
 }
 
 /**
@@ -292,38 +296,16 @@ input {
    */
   margin-left: 0;
   margin-right: 0;
-  margin-bottom: 16px;
+  margin-bottom: var(--ionic-space-400, 16px);
   /**
    * Label text should not extend
    * beyond the bounds of the checkbox.
    */
-  max-width: calc(100% / 0.75);
-}
-
-:host(.checkbox-label-placement-stacked.checkbox-alignment-start) .label-text-wrapper {
-  transform-origin: left top;
-}
-:host-context([dir=rtl]):host(.checkbox-label-placement-stacked.checkbox-alignment-start) .label-text-wrapper, :host-context([dir=rtl]).checkbox-label-placement-stacked.checkbox-alignment-start .label-text-wrapper {
-  transform-origin: right top;
+  max-width: 133.3333333333%;
 }
 
-@supports selector(:dir(rtl)) {
-  :host(.checkbox-label-placement-stacked.checkbox-alignment-start:dir(rtl)) .label-text-wrapper {
-    transform-origin: right top;
-  }
-}
-
-:host(.checkbox-label-placement-stacked.checkbox-alignment-center) .label-text-wrapper {
-  transform-origin: center top;
-}
-:host-context([dir=rtl]):host(.checkbox-label-placement-stacked.checkbox-alignment-center) .label-text-wrapper, :host-context([dir=rtl]).checkbox-label-placement-stacked.checkbox-alignment-center .label-text-wrapper {
-  transform-origin: calc(100% - center) top;
-}
-
-@supports selector(:dir(rtl)) {
-  :host(.checkbox-label-placement-stacked.checkbox-alignment-center:dir(rtl)) .label-text-wrapper {
-    transform-origin: calc(100% - center) top;
-  }
+:host(.checkbox-size-small) {
+  --size: var(--ionic-scale-400, 16px);
 }
 
 :host(.checkbox-checked) .checkbox-icon,
@@ -337,162 +319,73 @@ input {
   opacity: 1;
 }
 
+:host(.ion-invalid) {
+  --focus-ring-color: var(--ionic-state-focus-2, #ffafaf);
+}
+:host(.ion-invalid) .checkbox-icon {
+  border-color: var(--ionic-color-danger-800, #bf2222);
+}
+
 :host(.checkbox-disabled) {
   pointer-events: none;
 }
 
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
-/**
- * Convert a font size to a dynamic font size.
- * Fonts that participate in Dynamic Type should use
- * 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.
- *
- * 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;
- *   }
- * }
- */
-/* Rectangular */
-:host {
-  --border-radius: calc(var(--size) / 4 - 2px);
-  --border-width: 1px;
-  --border-style: solid;
-  --border-color: var(--ion-color-step-400, var(--ion-background-color-step-400, #999999));
-  --checkmark-width: 3;
-  --focus-ring-color: #9ec4fd;
-  --focus-ring-width: 2px;
-  --focus-ring-offset: 2px;
-  --size: 24px;
-}
-:host::after {
+:host(.checkbox-disabled) .native-wrapper:after {
   right: 0;
   left: 0;
-  top: 50%;
+  top: 0;
+  bottom: 0;
   position: absolute;
-  height: 100%;
-  min-height: 48px;
-  transform: translateY(-50%);
+  background-color: var(--ionic-state-disabled, rgba(255, 255, 255, 0.6));
   content: "";
-  cursor: pointer;
-  z-index: 1;
-}
-:host .native-wrapper {
-  position: relative;
-}
-
-:host(.checkbox-size-small) {
-  --size: 16px;
-}
-
-:host(.ion-invalid) {
-  --focus-ring-color: #ffafaf;
-}
-:host(.ion-invalid) .checkbox-icon {
-  border-color: #f72c2c;
-}
-
-:host(.checkbox-disabled.checkbox-indeterminate) .checkbox-icon {
-  /* TODO(FW-6183): Use design token variables */
-  border-width: 0;
-  background-color: var(--ion-color-step-600, var(--ion-background-color-step-600, #666666));
+  pointer-events: none;
 }
 
 :host(.checkbox-disabled) .checkbox-icon {
-  /* TODO(FW-6183): Use design token variables */
-  border-color: #c9c9c9;
-  background-color: #f5f5f5;
+  border-color: var(--ionic-color-neutral-800, #626262);
+  background-color: var(--ionic-state-disabled, rgba(255, 255, 255, 0.6));
 }
 
 :host(.checkbox-disabled.checkbox-checked) .checkbox-icon {
-  border-width: 0;
-  background-color: var(--ion-color-step-100, var(--ion-background-color-step-100, #e6e6e6));
+  border-width: var(--ionic-border-size-0, 0px);
+  background-color: var(--ionic-color-primary-base, #105cef);
 }
 
 @media (any-hover: hover) {
   :host(:hover) .checkbox-icon {
-    /* TODO(FW-6183): Use design token variables */
-    background-color: #ececec;
+    background-color: var(--ionic-color-neutral-100, #f1f1f1);
   }
   :host(:hover.checkbox-checked) .checkbox-icon,
   :host(:hover.checkbox-indeterminate) .checkbox-icon {
-    /* TODO(FW-6183): Use design token variables */
-    background-color: #1061da;
+    background-color: var(--ionic-color-primary-800, #0f54da);
   }
 }
 :host(.ion-focused:not(.checkbox-disabled)) .checkbox-icon {
-  outline: var(--focus-ring-width) solid var(--focus-ring-color);
+  outline: var(--focus-ring-width) var(--ionic-border-style-solid, solid) var(--focus-ring-color);
   outline-offset: var(--focus-ring-offset);
 }
 
 :host(.ion-activated) .checkbox-icon {
-  /* TODO(FW-6183): Use design token variables */
-  background-color: #e3e3e3;
+  background-color: var(--ionic-color-neutral-200, #e7e7e7);
 }
 
 :host(.ion-activated.checkbox-checked) .checkbox-icon,
 :host(.ion-activated.checkbox-indeterminate) .checkbox-icon {
-  /* TODO(FW-6183): Use design token variables */
-  background-color: #105ed1;
+  background-color: var(--ionic-color-primary-900, #0d4bc3);
 }
 
 :host(.checkbox-shape-soft) {
-  --border-radius: calc(var(--size) / 4 - 2px);
+  --border-radius: var(--ionic-border-radius-100, 4px);
+}
+
+:host(.checkbox-size-small.checkbox-shape-soft) {
+  --border-radius: var(--ionic-border-radius-050, 2px);
 }
 
 :host(.checkbox-shape-rectangular) {
-  --border-radius: 0;
+  --border-radius: var(--ionic-border-radius-0, 0px);
 }
 
 .checkbox-wrapper {
-  min-height: 48px;
+  min-height: var(--ionic-scale-1200, 48px);
 }

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

@@ -569,7 +569,7 @@ export class Input {
                 "mutable": false,
                 "complexType": {
                     "original": "AutocompleteTypes",
-                    "resolved": "\"name\" | \"email\" | \"country\" | \"on\" | \"off\" | \"tel\" | \"url\" | \"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-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\"",
+                    "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/item/item.ionic.css

@@ -66,6 +66,7 @@
 :host {
   /**
     * @prop --background: Background of the item
+    * @prop --background-activated: Background of the item when pressed. Note: setting this will interfere with the Material Design ripple.
     *
     * @prop --border-color: Color of the item border
     * @prop --border-style: Style of the item border
@@ -80,6 +81,7 @@
     *
     */
   --background: var(--ionic-color-base-white, #ffffff);
+  --background-activated: var(--ionic-color-neutral-200, #e7e7e7);
   --border-color: var(--ionic-color-neutral-300, #cfcfcf);
   --border-style: var(--ionic-border-style-solid, solid);
   --border-width: var(--ionic-border-size-025, 1px);
@@ -134,4 +136,34 @@
   flex: 1;
   overflow: inherit;
   box-sizing: border-box;
+}
+
+:host(.item-disabled) {
+  cursor: default;
+  pointer-events: none;
+}
+:host(.item-disabled)::after {
+  right: 0;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  position: absolute;
+  background: var(--ionic-state-disabled, rgba(255, 255, 255, 0.6));
+  content: "";
+}
+
+:host(.ion-activated) .item-native {
+  background: var(--background-activated);
+}
+
+:host(.ion-focused) .item-native::after {
+  right: 0;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  position: absolute;
+  border-width: var(--ionic-border-size-050, 2px);
+  border-style: var(--ionic-border-style-solid, solid);
+  border-color: var(--ionic-state-focus-1, #9ec4fd);
+  content: "";
 }

package/dist/collection/components/item/test/disabled/item.e2e.js

@@ -6,7 +6,7 @@ import { configs, test } from "../../../../utils/test/playwright/index";
 /**
  * This behavior does not vary across directions
  */
-configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+configs({ modes: ['ionic-md', 'md', 'ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
     test.describe(title('item: disabled state'), () => {
         test('should not have visual regressions', async ({ page }) => {
             await page.goto(`/src/components/item/test/disabled`, config);