@ionic/core 8.6.0 → 8.6.1-dev.11749483665.140e610d

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,12 +122,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;
@@ -121,21 +137,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 +147,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 +160,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 +180,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 +202,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 +211,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 +230,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 +299,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 +480,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

@@ -4,9 +4,10 @@
 import { Host, h } from "@stencil/core";
 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.
  *
@@ -62,6 +63,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';
         /**
          * Sets the checked property and emits
          * the ionChange event. Use this to update the
@@ -145,33 +150,43 @@ export class Checkbox {
         return (h("div", { class: "checkbox-bottom" }, h("div", { id: helperTextId, class: "helper-text", part: "supporting-text helper-text" }, helperText), h("div", { id: errorTextId, class: "error-text", part: "supporting-text error-text" }, errorText)));
     }
     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 hasLabelContent = el.textContent !== '';
         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: '26cbe7220e555107200e9b5deeae754aa534a80b', role: "checkbox", "aria-checked": indeterminate ? 'mixed' : `${checked}`, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === this.errorTextId, "aria-labelledby": hasLabelContent ? this.inputLabelId : null, "aria-label": inheritedAttributes['aria-label'] || null, "aria-disabled": disabled ? 'true' : null, tabindex: disabled ? undefined : 0, onKeyDown: this.onKeyDown, class: createColorClasses(color, {
-                [mode]: true,
+        return (h(Host, { key: 'd6cffe4c15f84f1d80996b152e24a27410f67974', role: "checkbox", "aria-checked": indeterminate ? 'mixed' : `${checked}`, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === this.errorTextId, "aria-labelledby": hasLabelContent ? this.inputLabelId : null, "aria-label": inheritedAttributes['aria-label'] || null, "aria-disabled": disabled ? 'true' : null, tabindex: disabled ? undefined : 0, onKeyDown: this.onKeyDown, class: createColorClasses(color, {
+                [theme]: 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,
-            }), onClick: this.onClick }, h("label", { key: 'f025cec5ff08e8be4487b9cc0324616ca5dfae2a', class: "checkbox-wrapper", htmlFor: inputId }, h("input", Object.assign({ key: 'dc53f7e4e240dc2e18556e6350df2b5c3169f553', type: "checkbox", checked: checked ? true : undefined, disabled: disabled, id: inputId, onChange: this.toggleChecked, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl), required: required }, inheritedAttributes)), h("div", { key: 'a625e9b50c3b617de8bbbfd624d772454fecaf2d', class: {
+                [`checkbox-size-${size}`]: size !== undefined,
+                [`checkbox-shape-${shape}`]: true,
+            }), onClick: this.onClick }, h("label", { key: '8718460c6d837cc85dd4abc499e272dd54c99123', class: "checkbox-wrapper", htmlFor: inputId }, h("input", Object.assign({ key: '5890992eab61c5559fc07fd2c8376ffe2f832d30', type: "checkbox", checked: checked ? true : undefined, disabled: disabled, id: inputId, onChange: this.toggleChecked, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl), required: required }, inheritedAttributes)), h("div", { key: '31393af0106b916dac2cee77fa481e3d5693b3b5', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabelContent,
-            }, part: "label", id: this.inputLabelId, onClick: this.onDivLabelClick }, h("slot", { key: '87d1a90691327945f4343406706e4ab27f453844' }), this.renderHintText()), h("div", { key: 'b57fed8cdecee4df1ef0d57f157267ee77fac653', class: "native-wrapper" }, h("svg", { key: 'd472a06ec6c8b74dfb651415d2236db8080f6805', class: "checkbox-icon", viewBox: "0 0 24 24", part: "container" }, path)))));
+            }, part: "label", id: this.inputLabelId, onClick: this.onDivLabelClick }, h("slot", { key: 'd4fc48668b7b07e6d9f227bd1bf41482602fdbe6' }), this.renderHintText()), h("div", { key: '02758e75d81616e5ffa764b5e6d7f3137473a408', class: "native-wrapper" }, h("svg", { key: '7cfb1f3d85b6df12b7039dc933fd38e8fb478c87', class: "checkbox-icon", viewBox: theme === 'ionic' ? '0 0 256 256' : '0 0 24 24', part: "container" }, 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"; }
@@ -179,13 +194,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() {
@@ -430,6 +447,45 @@ export class Checkbox {
                 "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "shape": {
+                "type": "string",
+                "attribute": "shape",
+                "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,
+                "defaultValue": "'soft'"
+            },
+            "size": {
+                "type": "string",
+                "attribute": "size",
+                "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
             }
         };
     }
@@ -442,7 +498,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",