@ionic/core 8.8.17 → 8.8.18-dev.11786108988.1fd94742

package/dist/collection/components/picker-column-option/picker-column-option.js

@@ -6,33 +6,36 @@ import { inheritAttributes } from "../../utils/helpers";
 import { createColorClasses } from "../../utils/theme";
 import { getIonMode } from "../../global/ionic-global";
 export class PickerColumnOption {
-    constructor() {
-        /**
-         * We keep track of the parent picker column
-         * so we can update the value of it when
-         * clicking an enable option.
-         */
-        this.pickerColumn = null;
-        /**
-         * The aria-label of the option.
-         *
-         * If the value changes, then it will trigger a
-         * re-render of the picker since it's a @State variable.
-         * Otherwise, the `aria-label` attribute cannot be updated
-         * after the component is loaded.
-         */
-        this.ariaLabel = null;
-        /**
-         * If `true`, the user cannot interact with the picker column option.
-         */
-        this.disabled = false;
-        /**
-         * The color to use from your application's color palette.
-         * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
-         * For more information on colors, see [theming](/docs/theming/basics).
-         */
-        this.color = 'primary';
-    }
+    /**
+     * We keep track of the parent picker column
+     * so we can update the value of it when
+     * clicking an enable option.
+     */
+    pickerColumn = null;
+    el;
+    /**
+     * The aria-label of the option.
+     *
+     * If the value changes, then it will trigger a
+     * re-render of the picker since it's a @State variable.
+     * Otherwise, the `aria-label` attribute cannot be updated
+     * after the component is loaded.
+     */
+    ariaLabel = null;
+    /**
+     * If `true`, the user cannot interact with the picker column option.
+     */
+    disabled = false;
+    /**
+     * The text value of the option.
+     */
+    value;
+    /**
+     * The color to use from your application's color palette.
+     * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
+     * For more information on colors, see [theming](/docs/theming/basics).
+     */
+    color;
     /**
      * The aria-label of the option has changed after the
      * first render and needs to be updated within the component.
@@ -91,10 +94,10 @@ export class PickerColumnOption {
     render() {
         const { color, disabled, ariaLabel } = this;
         const mode = getIonMode(this);
-        return (h(Host, { key: 'c45a1c14a351bf57d7113671164852349be5aa8a', class: createColorClasses(color, {
+        return (h(Host, { key: '98109dc9aeced749a3e879394d9a24de24204433', class: createColorClasses(color, {
                 [mode]: true,
                 ['option-disabled']: disabled,
-            }) }, h("div", { key: '824930b658c6e3fb493ac4c6c2451d38c6bc4829', class: 'picker-column-option-button', role: "button", "aria-label": ariaLabel, onClick: () => this.onClick() }, h("slot", { key: '019df4dcf46e629bdbebcd46ed3ab29669feab27' }))));
+            }) }, h("div", { key: '42cb75738ea6925a7780b3ec9c1ff6823e340a24', class: 'picker-column-option-button', role: "button", "aria-label": ariaLabel, onClick: () => this.onClick() }, h("slot", { key: '1f1b3862cdfb2b432016014e2e56330c0247d0b5' }))));
     }
     static get is() { return "ion-picker-column-option"; }
     static get encapsulation() { return "shadow"; }
@@ -175,8 +178,7 @@ export class PickerColumnOption {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
-                "attribute": "color",
-                "defaultValue": "'primary'"
+                "attribute": "color"
             }
         };
     }

package/dist/collection/components/picker-column-option/picker-column-option.md.css

@@ -93,11 +93,16 @@
  * - datetime sets `part="... active"` on the option. This is the reliable
  *   value-based source of truth and keeps the option colored when the column
  *   lives inside datetime's shadow DOM, where the class can be missed
- *   (WebKit's elementsFromPoint is unreliable in a shadow root). 
+ *   (WebKit's elementsFromPoint is unreliable in a shadow root).
  *   TODO(FW-6594): Determine if this workaround can be removed when iOS 16 is
  *   no longer supported.
  */
 :host(.option-active),
 :host([part~=active]) {
+  color: var(--ion-color-primary, #0054e9);
+}
+
+:host(.ion-color.option-active),
+:host(.ion-color[part~=active]) {
   color: var(--ion-color-base);
 }

package/dist/collection/components/popover/animations/ios.enter.js

@@ -19,7 +19,6 @@ const POPOVER_IOS_MIN_EDGE_MARGIN = 25;
  */
 // TODO(FW-2832): types
 export const iosEnterAnimation = (baseEl, opts) => {
-    var _a;
     const { event: ev, size, trigger, reference, side, align } = opts;
     const doc = baseEl.ownerDocument;
     const isRTL = doc.dir === 'rtl';
@@ -28,7 +27,7 @@ export const iosEnterAnimation = (baseEl, opts) => {
     const root = getElementRoot(baseEl);
     const contentEl = root.querySelector('.popover-content');
     const arrowEl = root.querySelector('.popover-arrow');
-    const referenceSizeEl = trigger || ((_a = ev === null || ev === void 0 ? void 0 : ev.detail) === null || _a === void 0 ? void 0 : _a.ionShadowTarget) || (ev === null || ev === void 0 ? void 0 : ev.target);
+    const referenceSizeEl = trigger || ev?.detail?.ionShadowTarget || ev?.target;
     const { contentWidth, contentHeight } = getPopoverDimensions(size, contentEl, referenceSizeEl);
     const { arrowWidth, arrowHeight } = getArrowDimensions(arrowEl);
     const defaultPosition = {

package/dist/collection/components/popover/animations/md.enter.js

@@ -10,7 +10,6 @@ const POPOVER_MD_BODY_PADDING = 12;
  */
 // TODO(FW-2832): types
 export const mdEnterAnimation = (baseEl, opts) => {
-    var _a;
     const { event: ev, size, trigger, reference, side, align } = opts;
     const doc = baseEl.ownerDocument;
     const isRTL = doc.dir === 'rtl';
@@ -18,7 +17,7 @@ export const mdEnterAnimation = (baseEl, opts) => {
     const bodyHeight = doc.defaultView.innerHeight;
     const root = getElementRoot(baseEl);
     const contentEl = root.querySelector('.popover-content');
-    const referenceSizeEl = trigger || ((_a = ev === null || ev === void 0 ? void 0 : ev.detail) === null || _a === void 0 ? void 0 : _a.ionShadowTarget) || (ev === null || ev === void 0 ? void 0 : ev.target);
+    const referenceSizeEl = trigger || ev?.detail?.ionShadowTarget || ev?.target;
     const { contentWidth, contentHeight } = getPopoverDimensions(size, contentEl, referenceSizeEl);
     const defaultPosition = {
         top: bodyHeight / 2 - contentHeight / 2,

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

@@ -177,6 +177,21 @@
   }
 }
 
+:host(.select-popover-rich-content) {
+  /**
+   * Rich content options (start/end slots, descriptions) need
+   * more horizontal space than the default fixed width provides,
+   * otherwise content gets cut off.
+   *
+   * A viewport-relative value is used instead of `auto` or
+   * `max-content` because the enter animation reads `--width`
+   * via getBoundingClientRect() before the first layout pass
+   * completes. Intrinsic values return 0 at that point and
+   * cause the popover to be positioned off-screen on first open.
+   */
+  --width: clamp(250px, calc(100vw - 40px), 400px);
+}
+
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use