@ionic/core 8.8.4-dev.11775576543.172b7b99 → 8.8.4-dev.11775852701.1bbb2b3e

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

@@ -1,9 +1,3 @@
-/**
- * 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
@@ -59,32 +53,11 @@
  *   }
  * }
  */
-/**
- * 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
@@ -98,10 +71,15 @@
    * @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);
+  --transition: none;
   display: inline-block;
   position: relative;
   cursor: pointer;
   user-select: none;
+  z-index: 2;
 }
 
 :host(.in-item) {
@@ -122,6 +100,12 @@
   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;
@@ -137,6 +121,21 @@
   overflow: hidden;
 }
 
+:host(.in-item) .label-text-wrapper,
+:host(.in-item:not(.checkbox-label-placement-stacked):not([slot])) .native-wrapper {
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+:host(.in-item.checkbox-label-placement-stacked) .label-text-wrapper {
+  margin-top: 10px;
+  margin-bottom: 16px;
+}
+
+:host(.in-item.checkbox-label-placement-stacked) .native-wrapper {
+  margin-bottom: 10px;
+}
+
 /**
  * If no label text is placed into the slot
  * then the element should be hidden otherwise
@@ -147,7 +146,7 @@
 }
 
 /**
- * The native input must be hidden with display instead of visibility or
+ * The native input must be hidden with display instead of visibility or 
  * aria-hidden to avoid accessibility issues with nested interactive elements.
  */
 input {
@@ -160,19 +159,37 @@ input {
 }
 
 .checkbox-icon {
+  border-radius: var(--border-radius);
   position: relative;
+  width: var(--size);
+  height: var(--size);
+  transition: var(--transition);
+  border-width: var(--border-width);
+  border-style: var(--border-style);
+  border-color: var(--border-color);
+  background: var(--checkbox-background);
+  box-sizing: border-box;
 }
 
 .checkbox-icon path {
+  fill: none;
+  stroke: var(--checkmark-color);
+  stroke-width: var(--checkmark-width);
   opacity: 0;
 }
 
 .checkbox-bottom {
+  padding-top: 4px;
   display: flex;
   justify-content: space-between;
+  font-size: 0.75rem;
   white-space: normal;
 }
 
+:host(.checkbox-label-placement-stacked) .checkbox-bottom {
+  font-size: 1rem;
+}
+
 /**
  * Error text should only be shown when .ion-invalid is
  * present on the checkbox. Otherwise the helper text should
@@ -180,10 +197,12 @@ input {
  */
 .checkbox-bottom .error-text {
   display: none;
+  color: var(--ion-color-danger, #c5000f);
 }
 
 .checkbox-bottom .helper-text {
   display: block;
+  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
 }
 
 :host(.ion-touched.ion-invalid) .checkbox-bottom .error-text {
@@ -202,6 +221,18 @@ input {
   flex-direction: row;
 }
 
+:host(.checkbox-label-placement-start) .label-text-wrapper {
+  /**
+   * The margin between the label and
+   * the checkbox should be on the end
+   * when the label sits at the start.
+   */
+  -webkit-margin-start: 0;
+  margin-inline-start: 0;
+  -webkit-margin-end: 16px;
+  margin-inline-end: 16px;
+}
+
 /**
  * Label is on the right of the checkbox in LTR and
  * on the left in RTL.
@@ -211,6 +242,30 @@ input {
   justify-content: start;
 }
 
+/**
+ * The margin between the label and
+ * the checkbox should be on the start
+ * 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-end: 0;
+  margin-inline-end: 0;
+}
+
+:host(.checkbox-label-placement-fixed) .label-text-wrapper {
+  /**
+   * The margin between the label and
+   * the checkbox should be on the end
+   * when the label sits at the start.
+   */
+  -webkit-margin-start: 0;
+  margin-inline-start: 0;
+  -webkit-margin-end: 16px;
+  margin-inline-end: 16px;
+}
+
 /**
  * Label is on the left of the checkbox in LTR and
  * on the right in RTL. Label also has a fixed width.
@@ -230,6 +285,23 @@ input {
   text-align: center;
 }
 
+:host(.checkbox-label-placement-stacked) .label-text-wrapper {
+  transform: scale(0.75);
+  /**
+   * The margin between the label and
+   * the checkbox should be on the bottom
+   * when the label sits at the top.
+   */
+  margin-left: 0;
+  margin-right: 0;
+  margin-bottom: 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;
 }
@@ -299,132 +371,6 @@ input {
   pointer-events: none;
 }
 
-:host {
-  /**
-   * @prop --checkbox-background: Background of the checkbox icon
-   */
-  --checkbox-background-checked: var(--ion-color-primary, #0054e9);
-  --border-color-checked: var(--ion-color-primary, #0054e9);
-  --checkmark-color: var(--ion-color-primary-contrast, #fff);
-  --transition: none;
-  z-index: 2;
-}
-
-:host(.ion-color) {
-  --checkbox-background-checked: var(--ion-color-base);
-  --border-color-checked: var(--ion-color-base);
-  --checkmark-color: var(--ion-color-contrast);
-}
-
-:host(.in-item) .label-text-wrapper,
-:host(.in-item:not(.checkbox-label-placement-stacked):not([slot])) .native-wrapper {
-  margin-top: 10px;
-  margin-bottom: 10px;
-}
-
-:host(.in-item.checkbox-label-placement-stacked) .label-text-wrapper {
-  margin-top: 10px;
-  margin-bottom: 16px;
-}
-
-:host(.in-item.checkbox-label-placement-stacked) .native-wrapper {
-  margin-bottom: 10px;
-}
-
-.checkbox-icon {
-  border-radius: var(--border-radius);
-  width: var(--size);
-  height: var(--size);
-  transition: var(--transition);
-  border-width: var(--border-width);
-  border-style: var(--border-style);
-  border-color: var(--border-color);
-  background: var(--checkbox-background);
-  box-sizing: border-box;
-}
-
-.checkbox-icon path {
-  fill: none;
-  stroke: var(--checkmark-color);
-  stroke-width: var(--checkmark-width);
-}
-
-.checkbox-bottom {
-  padding-top: 4px;
-  font-size: 0.75rem;
-}
-
-:host(.checkbox-label-placement-stacked) .checkbox-bottom {
-  font-size: 1rem;
-}
-
-.checkbox-bottom .error-text {
-  color: var(--ion-color-danger, #c5000f);
-}
-
-.checkbox-bottom .helper-text {
-  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
-}
-
-:host(.checkbox-label-placement-start) .label-text-wrapper {
-  /**
-   * The margin between the label and
-   * the checkbox should be on the end
-   * when the label sits at the start.
-   */
-  -webkit-margin-start: 0;
-  margin-inline-start: 0;
-  -webkit-margin-end: 16px;
-  margin-inline-end: 16px;
-}
-
-/**
- * The margin between the label and
- * the checkbox should be on the start
- * 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-end: 0;
-  margin-inline-end: 0;
-}
-
-:host(.checkbox-label-placement-fixed) .label-text-wrapper {
-  /**
-   * The margin between the label and
-   * the checkbox should be on the end
-   * when the label sits at the start.
-   */
-  -webkit-margin-start: 0;
-  margin-inline-start: 0;
-  -webkit-margin-end: 16px;
-  margin-inline-end: 16px;
-}
-
-:host(.checkbox-label-placement-stacked) .label-text-wrapper {
-  transform: scale(0.75);
-  /**
-   * The margin between the label and
-   * the checkbox should be on the bottom
-   * when the label sits at the top.
-   */
-  margin-left: 0;
-  margin-right: 0;
-  margin-bottom: 16px;
-  /**
-   * Label text should not extend
-   * beyond the bounds of the checkbox.
-   */
-  max-width: calc(100% / 0.75);
-}
-
-/**
- * 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
@@ -480,12 +426,6 @@ input {
  *   }
  * }
  */
-/**
- * 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

package/dist/collection/components/checkbox/checkbox.js

@@ -5,10 +5,9 @@ import { Build, Host, h } from "@stencil/core";
 import { checkInvalidState } from "../../utils/forms/index";
 import { inheritAriaAttributes, renderHiddenInput } from "../../utils/helpers";
 import { createColorClasses, hostContext } from "../../utils/theme";
-import { getIonTheme } from "../../global/ionic-global";
+import { getIonMode } from "../../global/ionic-global";
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  *
  * @slot - The label text to associate with the checkbox. Use the "labelPlacement" property to control where the label is placed relative to the checkbox.
  *
@@ -64,10 +63,6 @@ export class Checkbox {
          * submitting if the value is invalid.
          */
         this.required = false;
-        /**
-         * Set to `"soft"` for a checkbox with more rounded corners. Only available when the theme is `"ionic"`.
-         */
-        this.shape = 'soft';
         /**
          * Track validation state for proper aria-live announcements.
          */
@@ -203,42 +198,32 @@ export class Checkbox {
         return (h("div", { class: "checkbox-bottom" }, h("div", { id: helperTextId, class: "helper-text", part: "supporting-text helper-text", "aria-live": "polite" }, !isInvalid ? helperText : null), h("div", { id: errorTextId, class: "error-text", part: "supporting-text error-text", role: "alert" }, isInvalid ? errorText : null)));
     }
     render() {
-        const { color, checked, disabled, el, getSVGPath, indeterminate, inheritedAttributes, inputId, justify, labelPlacement, name, value, alignment, required, shape, size, } = this;
-        const theme = getIonTheme(this);
-        const path = getSVGPath(theme, indeterminate);
+        const { color, checked, disabled, el, getSVGPath, indeterminate, inheritedAttributes, inputId, justify, labelPlacement, name, value, alignment, required, } = this;
+        const mode = getIonMode(this);
+        const path = getSVGPath(mode, indeterminate);
         renderHiddenInput(true, el, name, checked ? value : '', disabled);
         // The host element must have a checkbox role to ensure proper VoiceOver
         // support in Safari for accessibility.
-        return (h(Host, { key: '93f14dd62086e4f0401c9cadd45629e544ea8c23', role: "checkbox", "aria-checked": indeterminate ? 'mixed' : `${checked}`, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, "aria-labelledby": this.hasLabelContent ? this.inputLabelId : null, "aria-label": inheritedAttributes['aria-label'] || null, "aria-disabled": disabled ? 'true' : null, "aria-required": required ? 'true' : undefined, tabindex: disabled ? undefined : 0, onKeyDown: this.onKeyDown, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses(color, {
-                [theme]: true,
+        return (h(Host, { key: '78eb720868106bcbe8357e50ebae2ab2fce8bdd6', role: "checkbox", "aria-checked": indeterminate ? 'mixed' : `${checked}`, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, "aria-labelledby": this.hasLabelContent ? this.inputLabelId : null, "aria-label": inheritedAttributes['aria-label'] || null, "aria-disabled": disabled ? 'true' : null, "aria-required": required ? 'true' : undefined, tabindex: disabled ? undefined : 0, onKeyDown: this.onKeyDown, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses(color, {
+                [mode]: true,
                 'in-item': hostContext('ion-item', el),
                 'checkbox-checked': checked,
                 'checkbox-disabled': disabled,
-                'ion-focusable': true,
                 'checkbox-indeterminate': indeterminate,
                 interactive: true,
                 [`checkbox-justify-${justify}`]: justify !== undefined,
                 [`checkbox-alignment-${alignment}`]: alignment !== undefined,
                 [`checkbox-label-placement-${labelPlacement}`]: true,
-                [`checkbox-size-${size}`]: size !== undefined,
-                [`checkbox-shape-${shape}`]: true,
-            }) }, h("label", { key: 'eee67d0a275982a5df44a0211d9a82f4a2da85a5', class: "checkbox-wrapper", htmlFor: inputId }, h("input", Object.assign({ key: '5daef189ffabda19ed902497e4f6ab73b80600bc', type: "checkbox", checked: checked ? true : undefined, disabled: disabled, id: inputId, onChange: this.toggleChecked, required: required }, inheritedAttributes)), h("div", { key: '3bcefc64f9514d3a5794a2945a6be7b328b05da3', class: {
+            }) }, h("label", { key: '3bd09a96e126bc72a0589a9c9ff8459cb60e1084', class: "checkbox-wrapper", htmlFor: inputId }, h("input", Object.assign({ key: 'f55c566f36dc6b0f069c75dccdebd2c5b3e7385e', type: "checkbox", checked: checked ? true : undefined, disabled: disabled, id: inputId, onChange: this.toggleChecked, required: required }, inheritedAttributes)), h("div", { key: '11db1139eabfe0b83688c574b81d1a6e8b7ae8c6', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !this.hasLabelContent,
-            }, part: "label", id: this.inputLabelId, onClick: this.onDivLabelClick }, h("slot", { key: '4c14d18adaa4521b17c639661227ead927d200b6', onSlotchange: this.onSlotChange }), this.renderHintText()), h("div", { key: 'a643299d2f78e34dc2aa40b0f915d5eda212c546', class: "native-wrapper" }, h("svg", { key: '664ea2c91e4a037863fb074f2624e13a34909e1e', class: "checkbox-icon", viewBox: theme === 'ionic' ? '0 0 256 256' : '0 0 24 24', part: "container", "aria-hidden": "true" }, path)))));
+            }, part: "label", id: this.inputLabelId, onClick: this.onDivLabelClick }, h("slot", { key: '6b3dd09e86063e2bc48014a1715cd788038ca01d', onSlotchange: this.onSlotChange }), this.renderHintText()), h("div", { key: 'bb2c75c8a893fd81e213c6b2ba807d5cba5a4966', class: "native-wrapper" }, h("svg", { key: '028a4c7d211c3697a91743d6242f202209e14c1a', class: "checkbox-icon", viewBox: "0 0 24 24", part: "container", "aria-hidden": "true" }, path)))));
     }
-    getSVGPath(theme, indeterminate) {
+    getSVGPath(mode, indeterminate) {
         let path = indeterminate ? (h("path", { d: "M6 12L18 12", part: "mark" })) : (h("path", { d: "M5.9,12.5l3.8,3.8l8.8-8.8", part: "mark" }));
-        if (theme === 'md') {
+        if (mode === 'md') {
             path = indeterminate ? (h("path", { d: "M2 12H22", part: "mark" })) : (h("path", { d: "M1.73,12.91 8.1,19.28 22.79,4.59", part: "mark" }));
         }
-        else if (theme === 'ionic') {
-            path = indeterminate ? (
-            // Phosphor Icon - minus bold
-            h("path", { d: "M228,128a12,12,0,0,1-12,12H40a12,12,0,0,1,0-24H216A12,12,0,0,1,228,128Z" })) : (
-            // Phosphor Icon - check bold
-            h("path", { d: "M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z" }));
-        }
         return path;
     }
     static get is() { return "ion-checkbox"; }
@@ -246,15 +231,13 @@ export class Checkbox {
     static get originalStyleUrls() {
         return {
             "ios": ["checkbox.ios.scss"],
-            "md": ["checkbox.md.scss"],
-            "ionic": ["checkbox.ionic.scss"]
+            "md": ["checkbox.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["checkbox.ios.css"],
-            "md": ["checkbox.md.css"],
-            "ionic": ["checkbox.ionic.css"]
+            "md": ["checkbox.md.css"]
         };
     }
     static get properties() {
@@ -500,45 +483,6 @@ export class Checkbox {
                 "reflect": false,
                 "attribute": "required",
                 "defaultValue": "false"
-            },
-            "shape": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'soft' | 'rectangular'",
-                    "resolved": "\"rectangular\" | \"soft\" | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Set to `\"soft\"` for a checkbox with more rounded corners. Only available when the theme is `\"ionic\"`."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "shape",
-                "defaultValue": "'soft'"
-            },
-            "size": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'small'",
-                    "resolved": "\"small\" | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Set to `\"small\"` for a checkbox with less height and padding."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "size"
             }
         };
     }
@@ -558,7 +502,7 @@ export class Checkbox {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when the checked property has changed\nas a result of a user action such as a click.\nThis event will not emit when programmatically\nsetting the `checked` property."
+                    "text": "Emitted when the checked property has changed as a result of a user action such as a click.\n\nThis event will not emit when programmatically setting the `checked` property."
                 },
                 "complexType": {
                     "original": "CheckboxChangeEventDetail",