@ionic/core 8.7.6-dev.11759493293.13f81b9f → 8.7.6-dev.11759523190.11a976aa

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

@@ -4,10 +4,9 @@
 import { Host, h } from "@stencil/core";
 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.
  *
@@ -63,10 +62,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';
         /**
          * Sets the checked property and emits
          * the ionChange event. Use this to update the
@@ -150,43 +145,33 @@ 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, 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);
         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: '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,
+        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,
                 '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,
-            }), 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: {
+            }), 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: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabelContent,
-            }, part: "label", id: this.inputLabelId, onClick: this.onDivLabelClick }, h("slot", { key: 'd4fc48668b7b07e6d9f227bd1bf41482602fdbe6' }), this.renderHintText()), h("div", { key: '02758e75d81616e5ffa764b5e6d7f3137473a408', class: "native-wrapper" }, h("svg", { key: '770fd7b860b07cd8d174337b90e5d4d24d175268', 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: '87d1a90691327945f4343406706e4ab27f453844' }), this.renderHintText()), h("div", { key: 'b57fed8cdecee4df1ef0d57f157267ee77fac653', class: "native-wrapper" }, h("svg", { key: '13a8aac044d46dc99e3b60a1a643785511f216ac', 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"; }
@@ -194,21 +179,20 @@ 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() {
         return {
             "color": {
                 "type": "string",
+                "attribute": "color",
                 "mutable": false,
                 "complexType": {
                     "original": "Color",
@@ -229,11 +213,11 @@ export class Checkbox {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true,
-                "attribute": "color"
+                "reflect": true
             },
             "name": {
                 "type": "string",
+                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -249,11 +233,11 @@ export class Checkbox {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "name",
                 "defaultValue": "this.inputId"
             },
             "checked": {
                 "type": "boolean",
+                "attribute": "checked",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -269,11 +253,11 @@ export class Checkbox {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "checked",
                 "defaultValue": "false"
             },
             "indeterminate": {
                 "type": "boolean",
+                "attribute": "indeterminate",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -289,11 +273,11 @@ export class Checkbox {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "indeterminate",
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -309,11 +293,11 @@ export class Checkbox {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "errorText": {
                 "type": "string",
+                "attribute": "error-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -328,11 +312,11 @@ export class Checkbox {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
-                "attribute": "error-text"
+                "reflect": false
             },
             "helperText": {
                 "type": "string",
+                "attribute": "helper-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -347,11 +331,11 @@ export class Checkbox {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
-                "attribute": "helper-text"
+                "reflect": false
             },
             "value": {
                 "type": "any",
+                "attribute": "value",
                 "mutable": false,
                 "complexType": {
                     "original": "any | null",
@@ -367,11 +351,11 @@ export class Checkbox {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "value",
                 "defaultValue": "'on'"
             },
             "labelPlacement": {
                 "type": "string",
+                "attribute": "label-placement",
                 "mutable": false,
                 "complexType": {
                     "original": "'start' | 'end' | 'fixed' | 'stacked'",
@@ -387,11 +371,11 @@ export class Checkbox {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "label-placement",
                 "defaultValue": "'start'"
             },
             "justify": {
                 "type": "string",
+                "attribute": "justify",
                 "mutable": false,
                 "complexType": {
                     "original": "'start' | 'end' | 'space-between'",
@@ -406,11 +390,11 @@ export class Checkbox {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
-                "attribute": "justify"
+                "reflect": false
             },
             "alignment": {
                 "type": "string",
+                "attribute": "alignment",
                 "mutable": false,
                 "complexType": {
                     "original": "'start' | 'center'",
@@ -425,11 +409,11 @@ export class Checkbox {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
-                "attribute": "alignment"
+                "reflect": false
             },
             "required": {
                 "type": "boolean",
+                "attribute": "required",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -445,47 +429,7 @@ export class Checkbox {
                 "getter": false,
                 "setter": false,
                 "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"
             }
         };
     }
@@ -498,7 +442,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",

package/dist/collection/components/checkbox/checkbox.md.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
@@ -542,7 +482,7 @@ input {
  * }
  */
 :host {
-  --border-radius: calc(var(--size) * 0.125);
+  --border-radius: calc(var(--size) * .125);
   --border-width: 2px;
   --border-style: solid;
   --border-color: rgb(var(--ion-text-color-rgb, 0, 0, 0), 0.6);