@ionic/core 8.8.9-dev.11781024903.1e4268e5 → 8.8.9-dev.11781201980.1b6e8398

package/dist/collection/components/select-modal/select-modal.md.css

@@ -1,64 +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
- * 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;
- *   }
- * }
- */
 /**
  * A heuristic that applies CSS to tablet
  * viewports.
@@ -114,204 +53,23 @@
  * @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.
  */
-.action-sheet-button-label-has-rich-content,
-.alert-radio-label-has-rich-content,
-.alert-checkbox-label-has-rich-content,
-.select-option-label-has-rich-content {
-  gap: 16px;
-}
-
-.action-sheet-button-label-text,
-.alert-checkbox-label-text,
-.alert-radio-label-text,
-.select-option-label-text {
-  gap: 12px;
+:host {
+  height: 100%;
 }
 
-.select-option-start,
-.select-option-end {
-  gap: 8px;
+.select-option-label {
+  display: flex;
+  align-items: center;
 }
 
 .select-option-description {
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 5px;
-  padding-bottom: 0;
-  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
-  font-size: 0.75rem;
-}
-
-/**
- * Cap slotted children so they can't stretch the option
- * row out of proportion, keeping rows visually uniform
- * regardless of the content.
- */
-.select-option-start > ion-avatar,
-.select-option-end > ion-avatar {
-  width: 40px;
-  height: 40px;
-}
-
-.select-option-start > ion-icon,
-.select-option-end > ion-icon {
-  width: 24px;
-  height: 24px;
-}
-
-.select-option-start > ion-img,
-.select-option-start > img,
-.select-option-start > svg,
-.select-option-start > ion-thumbnail,
-.select-option-end > ion-img,
-.select-option-end > img,
-.select-option-end > svg,
-.select-option-end > ion-thumbnail {
-  width: 56px;
-  height: 56px;
-}
-
-.select-option-start > video,
-.select-option-end > video {
-  width: 114px;
-  height: 56px;
-}
-
-/**
- * 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;
- *   }
- * }
- */
-.action-sheet-button-label-has-rich-content,
-.alert-radio-label-has-rich-content,
-.alert-checkbox-label-has-rich-content,
-.select-option-label-has-rich-content {
-  gap: 16px;
+  display: block;
 }
 
-.action-sheet-button-label-text,
-.alert-checkbox-label-text,
-.alert-radio-label-text,
-.select-option-label-text {
+.select-option-label {
   gap: 12px;
 }
 
-.select-option-start,
-.select-option-end {
-  gap: 8px;
-}
-
 .select-option-description {
   padding-left: 0;
   padding-right: 0;
@@ -321,76 +79,6 @@
   font-size: 0.75rem;
 }
 
-.action-sheet-button-label-has-rich-content,
-.alert-radio-label-has-rich-content,
-.alert-checkbox-label-has-rich-content,
-.select-option-label-has-rich-content {
-  display: flex;
-  align-items: center;
-}
-
-/**
- * Outer label container has rich content
- * (start, content, description, end) that needs the
- * label to span the available row width.
- */
-.action-sheet-button-label-has-rich-content,
-.alert-radio-label-has-rich-content,
-.alert-checkbox-label-has-rich-content,
-.select-option-content {
-  flex: 1;
-}
-
-.action-sheet-button-label-text,
-.alert-checkbox-label-text,
-.alert-radio-label-text,
-.select-option-label-text {
-  display: flex;
-  align-items: center;
-}
-
-.select-option-start,
-.select-option-end {
-  display: flex;
-  align-items: center;
-}
-
-.select-option-description {
-  display: block;
-}
-
-/**
- * Non-rich labels are plain text and should ellipsize when they
- * overflow the row. Rich-content labels switch to flex so the
- * start / content / end pieces can lay out side-by-side and wrap.
- */
-.select-option-label:not(.select-option-label-has-rich-content) {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-}
-
-.select-option-label-has-rich-content {
-  display: flex;
-  align-items: center;
-}
-
-ion-radio.select-option-has-rich-content::part(label),
-ion-checkbox.select-option-has-rich-content::part(label),
-.select-option-content {
-  flex: 1;
-  /**
-   * Let rich content wrap instead of inheriting the label part's
-   * single-line truncation, so arbitrary slotted elements render
-   * without clipping.
-   */
-  white-space: normal;
-}
-
-:host {
-  height: 100%;
-}
-
 /**
  * A heuristic that applies CSS to tablet
  * viewports.

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

@@ -21,7 +21,7 @@ export class SelectOption {
     }
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: 'c6bae36cad97e86a7f8884634d4e520d0c09fbd9', class: {
+        return (h(Host, { key: 'd7baa96e166b66c8f14c97e56674db4dfec2152c', class: {
                 [theme]: true,
             }, role: "option", id: this.inputId }));
     }
@@ -96,44 +96,6 @@ export class SelectOption {
                 "setter": false,
                 "reflect": false,
                 "attribute": "description"
-            },
-            "labelPlacement": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'start' | 'end'",
-                    "resolved": "\"end\" | \"start\" | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Where the label is placed relative to the option's selection control\n(radio circle or checkbox box) when the option is rendered in an\n`alert`, `popover`, or `modal` interface.\n`\"start\"`: The label will appear to the left of the radio in LTR and to the right in RTL.\n`\"end\"`: The label will appear to the right of the radio in LTR and to the left in RTL.\n\nApplies to the `alert`, `popover`, and `modal` interfaces, but has no\nvisible effect on radio options in `popover` or `modal` on the `md`\nand `ionic` themes (the radio control is hidden there).\n\nWhen unset, the interface picks a default based on theme and control\ntype."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "label-placement"
-            },
-            "justify": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'start' | 'end' | 'space-between'",
-                    "resolved": "\"end\" | \"space-between\" | \"start\" | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "How to pack the label and the option's selection control within a line.\n`\"start\"`: The label and radio will appear on the left in LTR and\non the right in RTL.\n`\"end\"`: The label and radio will appear on the right in LTR and\non the left in RTL.\n`\"space-between\"`: The label and radio will appear on opposite\nends of the line with space between the two elements.\n\nApplies to the `alert`, `popover`, and `modal` interfaces, but has no\nvisible effect on radio options in `popover` or `modal` on the `md`\nand `ionic` themes (the radio control is hidden there).\n\nWhen unset, the interface picks a default based on theme and control\ntype."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "justify"
             }
         };
     }