@ionic/core 8.8.11 → 8.8.12-dev.11781793379.156d3260

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

@@ -1,3 +1,9 @@
+/**
+ * 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
@@ -53,11 +59,32 @@
  *   }
  * }
  */
+/**
+ * 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
@@ -71,15 +98,10 @@
    * @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) {
@@ -100,10 +122,8 @@
   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);
+:host(:focus) {
+  outline: none;
 }
 
 .checkbox-wrapper {
@@ -121,21 +141,6 @@
   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
@@ -146,7 +151,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 {
@@ -159,37 +164,19 @@ 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
@@ -197,12 +184,10 @@ 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 {
@@ -221,18 +206,6 @@ 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.
@@ -242,30 +215,6 @@ 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.
@@ -285,23 +234,6 @@ 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;
 }
@@ -371,6 +303,132 @@ 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
@@ -426,6 +484,12 @@ 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,9 +5,10 @@ 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 { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } from "../../global/ionic-global";
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @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.
  *
  * @slot - The label text to associate with the checkbox. Use the "labelPlacement" property to control where the label is placed relative to the checkbox.
  *
@@ -63,6 +64,10 @@ 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.
          */
@@ -205,32 +210,44 @@ 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, } = this;
-        const mode = getIonMode(this);
-        const path = getSVGPath(mode, indeterminate);
+        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 inItem = hostContext('ion-item', el);
         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: '0da370f94c5cdf3b08bc9008395558334a300f35', 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),
+        return (h(Host, { key: '1c387e5a6506d2b5beff97dfbff2bbcc8c449d26', 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,
+                'in-item': inItem,
                 'checkbox-checked': checked,
                 'checkbox-disabled': disabled,
+                // Focus styling should not apply when the checkbox is in an item
+                'ion-focusable': !inItem,
                 'checkbox-indeterminate': indeterminate,
                 interactive: true,
                 [`checkbox-justify-${justify}`]: justify !== undefined,
                 [`checkbox-alignment-${alignment}`]: alignment !== undefined,
                 [`checkbox-label-placement-${labelPlacement}`]: true,
-            }) }, h("label", { key: '991f1763356671230af119a5fbdc22d0a39974e7', class: "checkbox-wrapper", htmlFor: inputId }, h("input", Object.assign({ key: '982f8a7f84d013b272b17607936355d2b6c251f4', type: "checkbox", checked: checked ? true : undefined, disabled: disabled, id: inputId, onChange: this.toggleChecked, required: required }, inheritedAttributes)), h("div", { key: 'c8f9e8baa20ac68e69fd3c6fcf0e7a26a1084d83', class: {
+                [`checkbox-size-${size}`]: size !== undefined,
+                [`checkbox-shape-${shape}`]: true,
+            }) }, h("label", { key: 'b1a38637c935c039fbf45b260b2c07850be1dddc', class: "checkbox-wrapper", htmlFor: inputId }, h("input", Object.assign({ key: '0203c263e31cd264d28e89767423d039f9651586', type: "checkbox", checked: checked ? true : undefined, disabled: disabled, id: inputId, onChange: this.toggleChecked, required: required }, inheritedAttributes)), h("div", { key: '2cc1ee54d4df207d3d07a21e6b2727c9975a7308', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !this.hasLabelContent,
-            }, part: "label", id: this.inputLabelId, onClick: this.onDivLabelClick }, h("slot", { key: '6018205e0a73dec826c7881d687f1c2ca8dcb0ab' }), this.renderHintText()), h("div", { key: '57530b9d6ff59ee7ab98f960cd65d66ee87cfd1d', class: "native-wrapper" }, h("svg", { key: '63d719154ff44459e9ca448e3f5d7de94d9ab248', class: "checkbox-icon", viewBox: "0 0 24 24", part: "container", "aria-hidden": "true" }, path)))));
+            }, part: "label", id: this.inputLabelId, onClick: this.onDivLabelClick }, h("slot", { key: '8a78b7397384ee6a557eb8eb9bbc12d2888dc388' }), this.renderHintText()), h("div", { key: '6a184af5730c5ef57e831bc5afac5df3511a82a9', class: "native-wrapper" }, h("svg", { key: 'c5dc481f96bbade83f6a34783d369c4ef07ee7ca', class: "checkbox-icon", viewBox: theme === 'ionic' ? '0 0 256 256' : '0 0 24 24', part: "container", "aria-hidden": "true" }, path)))));
     }
-    getSVGPath(mode, indeterminate) {
+    getSVGPath(theme, 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 (mode === 'md') {
+        if (theme === '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"; }
@@ -238,13 +255,15 @@ export class Checkbox {
     static get originalStyleUrls() {
         return {
             "ios": ["checkbox.ios.scss"],
-            "md": ["checkbox.md.scss"]
+            "md": ["checkbox.md.scss"],
+            "ionic": ["checkbox.ionic.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["checkbox.ios.css"],
-            "md": ["checkbox.md.css"]
+            "md": ["checkbox.md.css"],
+            "ionic": ["checkbox.ionic.css"]
         };
     }
     static get properties() {
@@ -490,6 +509,45 @@ 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"
             }
         };
     }
@@ -509,7 +567,7 @@ export class Checkbox {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "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."
+                    "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."
                 },
                 "complexType": {
                     "original": "CheckboxChangeEventDetail",