@ionic/core 8.4.1-dev.11730909308.11b6f07d → 8.4.1-dev.11731604836.1a1f3fcc

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

@@ -59,6 +59,28 @@
  *   }
  * }
  */
+/**
+ * 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 select
@@ -87,7 +109,6 @@
   --padding-bottom: 0px;
   --padding-start: 0px;
   --placeholder-color: currentColor;
-  --placeholder-opacity: var(--ion-placeholder-opacity, 0.6);
   --background: transparent;
   --border-style: solid;
   --highlight-color-focused: var(--ion-color-primary, #0054e9);
@@ -104,10 +125,8 @@
   position: relative;
   width: 100%;
   min-height: 44px;
-  font-family: var(--ion-font-family, inherit);
   white-space: nowrap;
   cursor: pointer;
-  z-index: 2;
 }
 
 /**
@@ -173,13 +192,6 @@ button {
 }
 
 .select-icon {
-  -webkit-margin-start: 4px;
-  margin-inline-start: 4px;
-  -webkit-margin-end: 0;
-  margin-inline-end: 0;
-  margin-top: 0;
-  margin-bottom: 0;
-  position: relative;
   /**
    * Prevent the icon from shrinking when the label and/or
    * selected item text is long enough to fill the rest of
@@ -197,17 +209,6 @@ button {
   color: inherit;
 }
 
-/**
- * The select icon should be centered with
- * the entire container not just the control
- * with floating/stacked labels.
- */
-:host(.select-label-placement-stacked) .select-icon,
-:host(.select-label-placement-floating) .select-icon {
-  position: absolute;
-  height: 100%;
-}
-
 /**
  * This positions the icon at the correct
  * edge of the component with LTR and RTL
@@ -234,13 +235,6 @@ button {
 }
 
 .select-wrapper {
-  -webkit-padding-start: var(--padding-start);
-  padding-inline-start: var(--padding-start);
-  -webkit-padding-end: var(--padding-end);
-  padding-inline-end: var(--padding-end);
-  padding-top: var(--padding-top);
-  padding-bottom: var(--padding-bottom);
-  border-radius: var(--border-radius);
   display: flex;
   position: relative;
   flex-grow: 1;
@@ -398,20 +392,6 @@ button {
   flex-direction: row;
 }
 
-:host(.select-label-placement-start) .label-text-wrapper {
-  /**
-   * The margin between the label and
-   * the select 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;
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
 /**
  * Label is on the right of the select in LTR and
  * on the left in RTL.
@@ -420,34 +400,6 @@ button {
   flex-direction: row-reverse;
 }
 
-/**
- * The margin between the label and
- * the select should be on the start
- * when the label sits at the end.
- */
-:host(.select-label-placement-end) .label-text-wrapper {
-  -webkit-margin-start: 16px;
-  margin-inline-start: 16px;
-  -webkit-margin-end: 0;
-  margin-inline-end: 0;
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-:host(.select-label-placement-fixed) .label-text-wrapper {
-  /**
-   * The margin between the label and
-   * the select 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;
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
 /**
  * Label is on the left of the select in LTR and
  * on the right in RTL. Label also has a fixed width.
@@ -500,29 +452,10 @@ button {
  */
 :host(.select-label-placement-stacked) .native-wrapper,
 :host(.select-label-placement-floating) .native-wrapper {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 1px;
-  margin-bottom: 0;
   flex-grow: 1;
   width: 100%;
 }
 
-/**
- * This makes the label sit over the select
- * when the select is blurred and has no value.
- * The label should not sit over the select if the
- * select has a placeholder.
- * Note: This is different from what ion-input does
- * because the activating the select causes an overlay
- * to appear. This makes it hard to read the placeholder.
- * With ion-input, the input just focuses and the placeholder
- * is still easy to read.
- */
-:host(.select-label-placement-floating) .label-text-wrapper {
-  transform: translateY(100%) scale(1);
-}
-
 /**
  * The placeholder should be hidden when the label
  * is on top of the select. This prevents the label
@@ -550,6 +483,132 @@ button {
   opacity: 1;
 }
 
+::slotted([slot=start]),
+::slotted([slot=end]) {
+  /**
+   * Prevent the slots from shrinking when the label and/or
+   * selected item text is long enough to fill the rest of
+   * the container.
+   */
+  flex-shrink: 0;
+}
+
+::slotted([slot=start]:last-of-type) {
+  margin-inline-start: 0;
+}
+
+::slotted([slot=end]:first-of-type) {
+  margin-inline-end: 0;
+}
+
+:host {
+  --placeholder-opacity: var(--ion-placeholder-opacity, 0.6);
+  font-family: var(--ion-font-family, inherit);
+  z-index: 2;
+}
+
+.select-icon {
+  -webkit-margin-start: 4px;
+  margin-inline-start: 4px;
+  -webkit-margin-end: 0;
+  margin-inline-end: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+  position: relative;
+}
+
+/**
+ * The select icon should be centered with
+ * the entire container not just the control
+ * with floating/stacked labels.
+ */
+:host(.select-label-placement-stacked) .select-icon,
+:host(.select-label-placement-floating) .select-icon {
+  position: absolute;
+  height: 100%;
+}
+
+.select-wrapper {
+  -webkit-padding-start: var(--padding-start);
+  padding-inline-start: var(--padding-start);
+  -webkit-padding-end: var(--padding-end);
+  padding-inline-end: var(--padding-end);
+  padding-top: var(--padding-top);
+  padding-bottom: var(--padding-bottom);
+  border-radius: var(--border-radius);
+}
+
+:host(.select-label-placement-start) .label-text-wrapper {
+  /**
+   * The margin between the label and
+   * the select 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;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+/**
+ * The margin between the label and
+ * the select should be on the start
+ * when the label sits at the end.
+ */
+:host(.select-label-placement-end) .label-text-wrapper {
+  -webkit-margin-start: 16px;
+  margin-inline-start: 16px;
+  -webkit-margin-end: 0;
+  margin-inline-end: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+:host(.select-label-placement-fixed) .label-text-wrapper {
+  /**
+   * The margin between the label and
+   * the select 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;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+/**
+ * Ensures the select does not
+ * overlap the label.
+ * Also ensure that the native wrapper
+ * takes up the remaining available height and width.
+ */
+:host(.select-label-placement-stacked) .native-wrapper,
+:host(.select-label-placement-floating) .native-wrapper {
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 1px;
+  margin-bottom: 0;
+}
+
+/**
+ * This makes the label sit over the select
+ * when the select is blurred and has no value.
+ * The label should not sit over the select if the
+ * select has a placeholder.
+ * Note: This is different from what ion-input does
+ * because the activating the select causes an overlay
+ * to appear. This makes it hard to read the placeholder.
+ * With ion-input, the input just focuses and the placeholder
+ * is still easy to read.
+ */
+:host(.select-label-placement-floating) .label-text-wrapper {
+  transform: translateY(100%) scale(1);
+}
+
 /**
  * This makes the label sit above the input.
  */
@@ -562,24 +621,12 @@ button {
   max-width: calc(100% / 0.75);
 }
 
-::slotted([slot=start]),
-::slotted([slot=end]) {
-  /**
-   * Prevent the slots from shrinking when the label and/or
-   * selected item text is long enough to fill the rest of
-   * the container.
-   */
-  flex-shrink: 0;
-}
-
 ::slotted([slot=start]:last-of-type) {
   margin-inline-end: 16px;
-  margin-inline-start: 0;
 }
 
 ::slotted([slot=end]:first-of-type) {
   margin-inline-start: 16px;
-  margin-inline-end: 0;
 }
 
 /**

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

@@ -681,6 +681,8 @@ export class Select {
         const { disabled, el, isExpanded, expandedIcon, labelPlacement, justify, placeholder, fill, shape, name, value } = this;
         const theme = getIonTheme(this);
         const hasFloatingOrStackedLabel = labelPlacement === 'floating' || labelPlacement === 'stacked';
+        const shouldRenderOuterIcon = theme !== 'ionic' && hasFloatingOrStackedLabel;
+        const shouldRenderInnerIcon = theme === 'ionic' || !hasFloatingOrStackedLabel;
         const justifyEnabled = !hasFloatingOrStackedLabel && justify !== undefined;
         const rtl = isRTL(el) ? 'rtl' : 'ltr';
         const inItem = hostContext('ion-item', this.el);
@@ -706,7 +708,7 @@ export class Select {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots));
-        return (h(Host, { key: '53907da3ad1bd7f5793ff1b3d24cfc88e6f5251c', onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: '8ca52d1d30334519bc4414eee2cbabac7d83171e', onClick: this.onClick, class: createColorClasses(this.color, {
                 [theme]: true,
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', el),
@@ -722,7 +724,17 @@ export class Select {
                 [`select-justify-${justify}`]: justifyEnabled,
                 [`select-shape-${shape}`]: shape !== undefined,
                 [`select-label-placement-${labelPlacement}`]: true,
-            }) }, h("label", { key: '04bc2e3f361e5156a589c160d4c426f7b37d2013', class: "select-wrapper", id: "select-label" }, this.renderLabelContainer(), h("div", { key: 'f2686986bb3eeff51501198de7558307454ebeda', class: "select-wrapper-inner" }, h("slot", { key: '7718621897e898deb25855a0192233a98ce655a8', name: "start" }), h("div", { key: 'a052077e5ff65c2d21fb76e5e06399d70dc5968c', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: '093233ca86b031cfa038186f59a69a9dd9003eca', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: '43e345f1078246d0e97d070d71c098da48355099', class: "select-highlight" }))));
+            }) }, h("label", { key: '7784a3a2f56d32e37b596067f54b9fc693eadfa9', class: "select-wrapper", id: "select-label" }, this.renderLabelContainer(), h("div", { key: 'f165058bd37a6de108a9e7c33e5f31d569bcab7e', class: "select-wrapper-inner" }, 
+        /**
+         * For the ionic theme, we render the outline container here
+         * instead of higher up, so it can be positioned relative to
+         * the native wrapper instead of the <label> element or the
+         * entire component. This allows the label text to be positioned
+         * above the outline, while staying within the bounds of the
+         * <label> element, ensuring that clicking the label text
+         * focuses the select.
+         */
+        theme === 'ionic' && fill === 'outline' && h("div", { key: 'fdfe669caabe3fb4af13c2d4dfb957906b1fdf2d', class: "select-outline" }), h("slot", { key: '81e9e8becae3713b0e09ee03e82b379832fc1aaf', name: "start" }), h("div", { key: 'af7e0a7f1cce2eb8707084aa8479df759fe55101', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: '04c9148aee3a1dc777565af6bc318313903d3528', name: "end" }), shouldRenderInnerIcon && this.renderSelectIcon()), shouldRenderOuterIcon && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: '56f93a524e779a64706da26e2d90629a55abb70b', class: "select-highlight" }))));
     }
     static get is() { return "ion-select"; }
     static get encapsulation() { return "shadow"; }
@@ -730,14 +742,14 @@ export class Select {
         return {
             "ios": ["select.ios.scss"],
             "md": ["select.md.scss"],
-            "ionic": ["select.md.scss"]
+            "ionic": ["select.ionic.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["select.ios.css"],
             "md": ["select.md.css"],
-            "ionic": ["select.md.css"]
+            "ionic": ["select.ionic.css"]
         };
     }
     static get properties() {