@ionic/core 8.4.2-dev.11736265112.120bf7af → 8.4.2-dev.11736507189.18234064

package/dist/collection/components/item-option/item-option.ionic.css

@@ -0,0 +1,332 @@
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
+/*
+Do not edit directly, this file was auto-generated.
+*/ /**
+ * 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
+ * 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.
+ */
+/**
+ * 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;
+ *   }
+ * }
+ */
+:host {
+  /**
+   * @prop --background: Background of the item option
+   * @prop --color: Color of the item option
+   */
+  --background: var(--ion-color-primary, #0054e9);
+  --color: var(--ion-color-primary-contrast, #fff);
+  background: var(--background);
+  color: var(--color);
+  font-family: var(--ion-font-family, inherit);
+}
+
+:host(.ion-color) {
+  background: var(--ion-color-base);
+  color: var(--ion-color-contrast);
+}
+
+.button-native {
+  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;
+  -webkit-padding-start: 0.7em;
+  padding-inline-start: 0.7em;
+  -webkit-padding-end: 0.7em;
+  padding-inline-end: 0.7em;
+  padding-top: 0;
+  padding-bottom: 0;
+  display: inline-block;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  outline: none;
+  background: transparent;
+  cursor: pointer;
+  appearance: none;
+  box-sizing: border-box;
+}
+
+.button-inner {
+  display: flex;
+  flex-flow: column nowrap;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
+.horizontal-wrapper {
+  display: flex;
+  flex-flow: row nowrap;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+}
+
+::slotted(*) {
+  flex-shrink: 0;
+}
+
+::slotted([slot=start]) {
+  -webkit-margin-start: 0;
+  margin-inline-start: 0;
+  -webkit-margin-end: 5px;
+  margin-inline-end: 5px;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+::slotted([slot=end]) {
+  -webkit-margin-start: 5px;
+  margin-inline-start: 5px;
+  -webkit-margin-end: 0;
+  margin-inline-end: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+::slotted([slot=icon-only]) {
+  padding-left: 0;
+  padding-right: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+  -webkit-margin-start: 10px;
+  margin-inline-start: 10px;
+  -webkit-margin-end: 10px;
+  margin-inline-end: 10px;
+  margin-top: 0;
+  margin-bottom: 0;
+  min-width: 0.9em;
+  font-size: 1.8em;
+}
+
+:host(.item-option-expandable) {
+  flex-shrink: 0;
+  transition-duration: 0;
+  transition-property: none;
+  transition-timing-function: cubic-bezier(0.65, 0.05, 0.36, 1);
+}
+
+:host(.item-option-disabled) {
+  pointer-events: none;
+}
+
+:host(.item-option-disabled) .button-native {
+  cursor: default;
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+:host {
+  padding-left: 0;
+  padding-right: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+  font-size: var(--ion-font-size-350, 0.875rem);
+  font-weight: var(--ion-font-weight-medium, 500);
+  line-height: var(--ion-font-line-height-500, 20px);
+}
+
+.button-native {
+  -webkit-padding-start: var(--ion-space-200, 8px);
+  padding-inline-start: var(--ion-space-200, 8px);
+  -webkit-padding-end: var(--ion-space-200, 8px);
+  padding-inline-end: var(--ion-space-200, 8px);
+  padding-top: var(--ion-space-200, 8px);
+  padding-bottom: var(--ion-space-200, 8px);
+  min-width: var(--ion-scale-1600, 64px);
+  height: var(--ion-scale-1600, 64px);
+}
+
+::slotted([slot=top]) {
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 0;
+  margin-bottom: var(--ion-space-100, 4px);
+}
+
+::slotted([slot=bottom]) {
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: var(--ion-space-100, 4px);
+  margin-bottom: 0;
+}
+
+::slotted([slot=start]) {
+  -webkit-margin-start: 0;
+  margin-inline-start: 0;
+  -webkit-margin-end: var(--ion-space-100, 4px);
+  margin-inline-end: var(--ion-space-100, 4px);
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+::slotted([slot=end]) {
+  -webkit-margin-start: var(--ion-space-100, 4px);
+  margin-inline-start: var(--ion-space-100, 4px);
+  -webkit-margin-end: 0;
+  margin-inline-end: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+::slotted(ion-icon),
+::slotted([slot=icon-only]) {
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+  width: var(--ion-scale-500, 20px);
+  min-width: initial;
+  height: var(--ion-scale-500, 20px);
+}
+
+/* Round */
+:host(.item-option-round) {
+  border-radius: var(--ion-border-radius-300, 12px);
+}
+
+/* Soft */
+:host(.item-option-soft) {
+  border-radius: var(--ion-border-radius-200, 8px);
+}
+
+/* Rectangular */
+:host(.item-option-rectangular) {
+  border-radius: var(--ion-border-radius-0, 0px);
+}
+
+/* Disabled */
+:host(.item-option-disabled) {
+  opacity: 0.6;
+}
+
+:host(.item-option-disabled) .button-native {
+  opacity: 1;
+}

package/dist/collection/components/item-option/item-option.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
@@ -71,18 +77,18 @@
 }
 
 .button-native {
+  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;
-  text-align: inherit;
   white-space: inherit;
-  color: inherit;
   -webkit-padding-start: 0.7em;
   padding-inline-start: 0.7em;
   -webkit-padding-end: 0.7em;
@@ -174,6 +180,12 @@
   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

package/dist/collection/components/item-option/item-option.js

@@ -3,9 +3,10 @@
  */
 import { Host, h } from "@stencil/core";
 import { createColorClasses } 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 - Content is placed between the named slots if provided without a slot.
  * @slot start - Content is placed to the left of the option text in LTR, and to the right in RTL.
@@ -32,11 +33,25 @@ export class ItemOption {
         this.rel = undefined;
         this.target = undefined;
         this.type = 'button';
+        this.shape = undefined;
+    }
+    getShape() {
+        const theme = getIonTheme(this);
+        const { shape } = this;
+        // TODO(ROU-10841): Remove theme check when shapes are defined for all themes.
+        if (theme !== 'ionic') {
+            return undefined;
+        }
+        if (shape === undefined) {
+            return 'round';
+        }
+        return shape;
     }
     render() {
         const { disabled, expandable, href } = this;
         const TagType = href === undefined ? 'button' : 'a';
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
+        const shape = this.getShape();
         const attrs = TagType === 'button'
             ? { type: this.type }
             : {
@@ -44,25 +59,28 @@ export class ItemOption {
                 href: this.href,
                 target: this.target,
             };
-        return (h(Host, { key: '89310624997821858c1abde60c0ffb142ca466e0', onClick: this.onClick, class: createColorClasses(this.color, {
-                [mode]: true,
+        return (h(Host, { key: '98e904fe4f24298fcf04bac2bba9c467dad0a793', onClick: this.onClick, class: createColorClasses(this.color, {
+                [theme]: true,
+                [`item-option-${shape}`]: shape !== undefined,
                 'item-option-disabled': disabled,
                 'item-option-expandable': expandable,
                 'ion-activatable': true,
-            }) }, h(TagType, Object.assign({ key: 'e4dfbb3048eed03a7f7e84c6f75545e0ca9b45fb' }, attrs, { class: "button-native", part: "native", disabled: disabled }), h("span", { key: 'dffcf437fbdc15f2e7a19e60a015e90c73c8377d', class: "button-inner" }, h("slot", { key: '48a23512e0601e062118d8b2c46c8bb96f25509f', name: "top" }), h("div", { key: '952a9a9aa3a476aa1f4408d7e208bf9e916b8c30', class: "horizontal-wrapper" }, h("slot", { key: 'f8d18a61c1ecec4a22a55443cf72bbc51383b64f', name: "start" }), h("slot", { key: '1f9f219e6f879d2e0bf6d80cf0d3f518eb14ce0e', name: "icon-only" }), h("slot", { key: 'a55adcdbe68131e5b1855c2dd45dd9454ab544fb' }), h("slot", { key: '3c4c85a4fbb7efc797d8bc5adf6d238da022ff9f', name: "end" })), h("slot", { key: '503c7e4b306745c523f57f24399ea06ba9b1e21d', name: "bottom" })), mode === 'md' && h("ion-ripple-effect", { key: 'b0e270b0c4f3ff9f9b6d74bad12a9278d7633226' }))));
+            }) }, h(TagType, Object.assign({ key: '406d1949fe07d104e4ab45fd6d2eca43d774dee0' }, attrs, { class: "button-native", part: "native", disabled: disabled }), h("span", { key: '3ee708dbb67da61704447aa5ba6ac7a6eaef241d', class: "button-inner" }, h("slot", { key: '235b13ed2c658e04434de20b7a9a00a74407f085', name: "top" }), h("div", { key: '7b1f782c7863a20e1df74b59848315768b745781', class: "horizontal-wrapper" }, h("slot", { key: '33e8e8d52383c496f6d36f619e50712eead826f3', name: "start" }), h("slot", { key: 'd9265245343b691095ee83de733c4aefb0ed65ca', name: "icon-only" }), h("slot", { key: '2cc5feeff80c58404b20e6b715d5a7e323872bbe' }), h("slot", { key: '336868d076d8f9ec40a4e3cc8e3f37ef6525ef9e', name: "end" })), h("slot", { key: '7092df0dd0ce3b68c843140fbe05d38bca17d402', name: "bottom" })), theme === 'md' && h("ion-ripple-effect", { key: '6ef0fdddafa015c2d85f37d1e4600df2830eb0f0' }))));
     }
     static get is() { return "ion-item-option"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["item-option.ios.scss"],
-            "md": ["item-option.md.scss"]
+            "md": ["item-option.md.scss"],
+            "ionic": ["item-option.ionic.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["item-option.ios.css"],
-            "md": ["item-option.md.css"]
+            "md": ["item-option.md.css"],
+            "ionic": ["item-option.ionic.css"]
         };
     }
     static get properties() {
@@ -87,8 +105,6 @@ export class ItemOption {
                     "tags": [],
                     "text": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics)."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "color",
                 "reflect": true
             },
@@ -106,8 +122,6 @@ export class ItemOption {
                     "tags": [],
                     "text": "If `true`, the user cannot interact with the item option."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
@@ -126,8 +140,6 @@ export class ItemOption {
                     "tags": [],
                     "text": "This attribute instructs browsers to download a URL instead of navigating to\nit, so the user will be prompted to save it as a local file. If the attribute\nhas a value, it is used as the pre-filled file name in the Save prompt\n(the user can still change the file name if they want)."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "download",
                 "reflect": false
             },
@@ -145,8 +157,6 @@ export class ItemOption {
                     "tags": [],
                     "text": "If `true`, the option will expand to take up the available width and cover any other options."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "expandable",
                 "reflect": false,
                 "defaultValue": "false"
@@ -165,8 +175,6 @@ export class ItemOption {
                     "tags": [],
                     "text": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "href",
                 "reflect": false
             },
@@ -184,8 +192,6 @@ export class ItemOption {
                     "tags": [],
                     "text": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "rel",
                 "reflect": false
             },
@@ -203,8 +209,6 @@ export class ItemOption {
                     "tags": [],
                     "text": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "target",
                 "reflect": false
             },
@@ -222,11 +226,26 @@ export class ItemOption {
                     "tags": [],
                     "text": "The type of the button."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "type",
                 "reflect": false,
                 "defaultValue": "'button'"
+            },
+            "shape": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'soft' | 'round' | 'rectangular'",
+                    "resolved": "\"rectangular\" | \"round\" | \"soft\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to `\"rectangular\"` for non-rounded corners.\nSet to `\"soft\"` for slightly rounded corners.\nSet to `\"round\"` for fully rounded corners.\n\nDefaults to `\"round\"` for the `ionic` theme, undefined for all other themes."
+                },
+                "attribute": "shape",
+                "reflect": false
             }
         };
     }

package/dist/collection/components/item-option/item-option.md.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
@@ -71,18 +77,18 @@
 }
 
 .button-native {
+  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;
-  text-align: inherit;
   white-space: inherit;
-  color: inherit;
   -webkit-padding-start: 0.7em;
   padding-inline-start: 0.7em;
   -webkit-padding-end: 0.7em;
@@ -174,6 +180,12 @@
   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