voyager-ionic-core 8.0.1 → 8.2.0

package/dist/collection/components/popover/test/basic/popover.spec.js

@@ -4,6 +4,7 @@
 import { h } from "@stencil/core";
 import { newSpecPage } from "@stencil/core/testing";
 import { Popover } from "../../popover";
+import { FOCUS_TRAP_DISABLE_CLASS } from "../../../../utils/overlays";
 describe('popover: htmlAttributes inheritance', () => {
     it('should correctly inherit attributes on host', async () => {
         const page = await newSpecPage({
@@ -14,3 +15,21 @@ describe('popover: htmlAttributes inheritance', () => {
         await expect(popover.getAttribute('data-testid')).toBe('basic-popover');
     });
 });
+describe('popover: focus trap', () => {
+    it('should set the focus trap class when disabled', async () => {
+        const page = await newSpecPage({
+            components: [Popover],
+            template: () => h("ion-popover", { focusTrap: false, overlayIndex: 1 }),
+        });
+        const popover = page.body.querySelector('ion-popover');
+        expect(popover.classList.contains(FOCUS_TRAP_DISABLE_CLASS)).toBe(true);
+    });
+    it('should not set the focus trap class by default', async () => {
+        const page = await newSpecPage({
+            components: [Popover],
+            template: () => h("ion-popover", { overlayIndex: 1 }),
+        });
+        const popover = page.body.querySelector('ion-popover');
+        expect(popover.classList.contains(FOCUS_TRAP_DISABLE_CLASS)).toBe(false);
+    });
+});

package/dist/collection/components/popover/test/trigger/popover.e2e.js

@@ -32,7 +32,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             await popover.evaluate((popover) => {
                 var _a;
                 popover.remove();
-                (_a = document.querySelector('ion-button')) === null || _a === void 0 ? void 0 : _a.insertAdjacentElement('afterend', popover);
+                (_a = document.querySelector('button')) === null || _a === void 0 ? void 0 : _a.insertAdjacentElement('afterend', popover);
             });
             await page.waitForChanges();
             await button.click();

package/dist/collection/components/progress-bar/progress-bar.js

@@ -28,7 +28,7 @@ export class ProgressBar {
         const mode = getIonMode(this);
         // If the progress is displayed as a solid bar.
         const progressSolid = buffer === 1;
-        return (h(Host, { key: '8d8ddf0b26fe33803d3a6168cbedd523d1a888e7', role: "progressbar", "aria-valuenow": type === 'determinate' ? value : null, "aria-valuemin": "0", "aria-valuemax": "1", class: createColorClasses(color, {
+        return (h(Host, { key: 'b293f4475bcdaa7851b41ebfda659037f0365120', role: "progressbar", "aria-valuenow": type === 'determinate' ? value : null, "aria-valuemin": "0", "aria-valuemax": "1", class: createColorClasses(color, {
                 [mode]: true,
                 [`progress-bar-${type}`]: true,
                 'progress-paused': paused,

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

@@ -126,6 +126,7 @@ input {
  */
 :host([slot=start]),
 :host([slot=end]) {
+  flex: initial;
   width: auto;
 }
 

package/dist/collection/components/radio/radio.js

@@ -70,6 +70,17 @@ export class Radio {
          */
         this.updateState();
     }
+    componentDidLoad() {
+        /**
+         * The value may be `undefined` if it
+         * gets set before the radio is
+         * rendered. This ensures that the radio
+         * is checked if the value matches. This
+         * happens most often when Angular is
+         * rendering the radio.
+         */
+        this.updateState();
+    }
     /** @internal */
     async setFocus(ev) {
         ev.stopPropagation();
@@ -107,7 +118,7 @@ export class Radio {
         const { checked, disabled, color, el, justify, labelPlacement, hasLabel, buttonTabindex, alignment } = this;
         const mode = getIonMode(this);
         const inItem = hostContext('ion-item', el);
-        return (h(Host, { key: 'cb00934d052260e97462e97a1669045cbb0b963a', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses(color, {
+        return (h(Host, { key: '43c95effb6acb119733270e8a5e02fe18b47ee4b', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses(color, {
                 [mode]: true,
                 'in-item': inItem,
                 'radio-checked': checked,
@@ -118,10 +129,10 @@ export class Radio {
                 // Focus and active styling should not apply when the radio is in an item
                 'ion-activatable': !inItem,
                 'ion-focusable': !inItem,
-            }), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, h("label", { key: '05613f89400469692442bf3c02c27f9299c5d6ef', class: "radio-wrapper" }, h("div", { key: '89b5d7668c3856f417c318629086cf46a072efbe', class: {
+            }), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, h("label", { key: '168ea77c08fde9832077d617662b93dc9986b544', class: "radio-wrapper" }, h("div", { key: 'ce1e6eee63fbab1e5a66b18f767f4eecc2a227f1', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label" }, h("slot", { key: 'd5e43a8d0fe5a7fc323887d310fd64d6f87deef7' })), h("div", { key: '7fd221189adcfccca1ed18dcd0a60cde6261120b', class: "native-wrapper" }, this.renderRadioControl()))));
+            }, part: "label" }, h("slot", { key: '7d849e43d4356b5c3978c2bba9a6fba5d21ca69d' })), h("div", { key: 'e741f7822364958b050a232bdfccdc413095c244', class: "native-wrapper" }, this.renderRadioControl()))));
     }
     static get is() { return "ion-radio"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/radio/radio.md.css

@@ -126,6 +126,7 @@ input {
  */
 :host([slot=start]),
 :host([slot=end]) {
+  flex: initial;
   width: auto;
 }
 

package/dist/collection/components/radio-group/radio-group.js

@@ -153,7 +153,7 @@ export class RadioGroup {
         const { label, labelId, el, name, value } = this;
         const mode = getIonMode(this);
         renderHiddenInput(true, el, name, value, false);
-        return h(Host, { key: 'b6b439d6d53d17a5a4d9853a7cf6065b28213338', role: "radiogroup", "aria-labelledby": label ? labelId : null, onClick: this.onClick, class: mode });
+        return h(Host, { key: '7a8ad7eb6a05c6f96a348dcf30fd0c610a95688c', role: "radiogroup", "aria-labelledby": label ? labelId : null, onClick: this.onClick, class: mode });
     }
     static get is() { return "ion-radio-group"; }
     static get properties() {
@@ -245,7 +245,7 @@ export class RadioGroup {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when the value has changed."
+                    "text": "Emitted when the value has changed.\n\nThis event will not emit when programmatically setting the `value` property."
                 },
                 "complexType": {
                     "original": "RadioGroupChangeEventDetail",

package/dist/collection/components/range/range.js

@@ -561,7 +561,7 @@ export class Range {
         const needsEndAdjustment = inItem && !hasEndContent;
         const mode = getIonMode(this);
         renderHiddenInput(true, el, this.name, JSON.stringify(this.getValue()), disabled);
-        return (h(Host, { key: 'cd70b5db9eae808a644643d7095a1b5264cbc5fe', onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses(this.color, {
+        return (h(Host, { key: '7ad5ca892fd46c64ce5583e91e6812410a869921', onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses(this.color, {
                 [mode]: true,
                 'in-item': inItem,
                 'range-disabled': disabled,
@@ -570,10 +570,10 @@ export class Range {
                 [`range-label-placement-${labelPlacement}`]: true,
                 'range-item-start-adjustment': needsStartAdjustment,
                 'range-item-end-adjustment': needsEndAdjustment,
-            }) }, h("label", { key: '78ef0523f0064d6b268ae17ef72f90094511d897', class: "range-wrapper", id: "range-label" }, h("div", { key: '6e4b2051e770dabe80dcb9f412e9aae1859e9f33', class: {
+            }) }, h("label", { key: 'eb8d46a9572341b4cc3c91d8a5de0667bd166ca4', class: "range-wrapper", id: "range-label" }, h("div", { key: '21acd6ff6eba17bf6923bf723fea055b95fd29ca', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label" }, label !== undefined ? h("div", { class: "label-text" }, label) : h("slot", { name: "label" })), h("div", { key: '72cdb8f6657a3b84f759743cedd600020c954c6a', class: "native-wrapper" }, h("slot", { key: 'f7a38d6bd63df5dc8b4470f1f4acaaf3e5c80514', name: "start" }), this.renderRangeSlider(), h("slot", { key: 'ae74ac8c1da691e3be1b2f00dfd3c8419b9566ec', name: "end" })))));
+            }, part: "label" }, label !== undefined ? h("div", { class: "label-text" }, label) : h("slot", { name: "label" })), h("div", { key: '7644c86a6ad3edf2c27f02dd2a14795b3720ea0d', class: "native-wrapper" }, h("slot", { key: '1bbeccee57addc126b36de395e28ba655248695b', name: "start" }), this.renderRangeSlider(), h("slot", { key: '2963dd84e4116fc3956c304eb53deefd0d1291df', name: "end" })))));
     }
     static get is() { return "ion-range"; }
     static get encapsulation() { return "shadow"; }
@@ -909,7 +909,7 @@ export class Range {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "The `ionChange` event is fired for `<ion-range>` elements when the user\nmodifies the element's value:\n- When the user releases the knob after dragging;\n- When the user moves the knob with keyboard arrows\n\n`ionChange` is not fired when the value is changed programmatically."
+                    "text": "The `ionChange` event is fired for `<ion-range>` elements when the user\nmodifies the element's value:\n- When the user releases the knob after dragging;\n- When the user moves the knob with keyboard arrows\n\nThis event will not emit when programmatically setting the `value` property."
                 },
                 "complexType": {
                     "original": "RangeChangeEventDetail",

package/dist/collection/components/refresher/refresher.js

@@ -594,7 +594,7 @@ export class Refresher {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: 'e7f4f2f96de7e80430bf54967ebc12e7216b2ca9', slot: "fixed", class: {
+        return (h(Host, { key: '1696f66f62d18c9075294f17cb24263325fcf35d', slot: "fixed", class: {
                 [mode]: true,
                 // Used internally for styling
                 [`refresher-${mode}`]: true,

package/dist/collection/components/refresher-content/refresher-content.js

@@ -52,7 +52,7 @@ export class RefresherContent {
         const pullingIcon = this.pullingIcon;
         const hasSpinner = pullingIcon != null && SPINNERS[pullingIcon] !== undefined;
         const mode = getIonMode(this);
-        return (h(Host, { key: '19633bbcf02e3dba885d6bdcdaf2269bf4c8e2f5', class: mode }, h("div", { key: '28922e434a55a6cac0476fe2bee56941ce0d1c02', class: "refresher-pulling" }, this.pullingIcon && hasSpinner && (h("div", { key: 'fe575bf996021884677e9b23a3215d63caf894f5', class: "refresher-pulling-icon" }, h("div", { key: '59fe12297fd95bc33b8df8cd35316e2a1c084d91', class: "spinner-arrow-container" }, h("ion-spinner", { key: 'af9cc013ae04945c140b2865610ca73edb52ab48', name: this.pullingIcon, paused: true }), mode === 'md' && this.pullingIcon === 'circular' && (h("div", { key: '34df66ad1b0f706a0532957251aa2c20bf4587d8', class: "arrow-container" }, h("ion-icon", { key: 'ffdb5c123e606b823491c6c51cc2b497f62581bb', icon: caretBackSharp, "aria-hidden": "true" })))))), this.pullingIcon && !hasSpinner && (h("div", { key: 'ac3a2032bb969264d20fa057e9123441005d7a9d', class: "refresher-pulling-icon" }, h("ion-icon", { key: 'd969d10915548e72aae289b52154366f3dd39b31', icon: this.pullingIcon, lazy: false, "aria-hidden": "true" }))), this.pullingText !== undefined && this.renderPullingText()), h("div", { key: 'a8f854f81a94812d7bef8ce088331d94f49ff53d', class: "refresher-refreshing" }, this.refreshingSpinner && (h("div", { key: 'a1f646945370e40c844d62bc0c647443ae9dfbe7', class: "refresher-refreshing-icon" }, h("ion-spinner", { key: 'ab3ff4047769b6436e222b46d193c1e8b23e2fce', name: this.refreshingSpinner }))), this.refreshingText !== undefined && this.renderRefreshingText())));
+        return (h(Host, { key: '1bec5b4da221c69d856f3f5ddf40f2e03ebf2a4c', class: mode }, h("div", { key: '4fcc526c4f1881e9368d9cd16bd7030919bd3841', class: "refresher-pulling" }, this.pullingIcon && hasSpinner && (h("div", { key: 'a4e9e2e12c2d7faefc8303ec8c021f999ddf308e', class: "refresher-pulling-icon" }, h("div", { key: '5a2d215feb7fb4b64d540d3a65c0f24b415a2433', class: "spinner-arrow-container" }, h("ion-spinner", { key: 'abef2621d671ac6ff0abac43a702cbd825b7f127', name: this.pullingIcon, paused: true }), mode === 'md' && this.pullingIcon === 'circular' && (h("div", { key: '30087d672c3780672a05874cd93cd099b2855462', class: "arrow-container" }, h("ion-icon", { key: '5e30333dee469aec0d8efc8c4e6dabb619c6f363', icon: caretBackSharp, "aria-hidden": "true" })))))), this.pullingIcon && !hasSpinner && (h("div", { key: '48fe72b5ce8ded633c6ee799cebb520b9c8be528', class: "refresher-pulling-icon" }, h("ion-icon", { key: 'd8dfd5d42056b1c0a436c5006affb255407816c0', icon: this.pullingIcon, lazy: false, "aria-hidden": "true" }))), this.pullingText !== undefined && this.renderPullingText()), h("div", { key: 'c2cbfb94f157c82601ffe7bb815ff82ebc7c0a49', class: "refresher-refreshing" }, this.refreshingSpinner && (h("div", { key: '17f3ebe6a31768d5e389f45a2c12f68600185db9', class: "refresher-refreshing-icon" }, h("ion-spinner", { key: 'e8e61f8d7189c9939bba184201c9509d1d5b0fad', name: this.refreshingSpinner }))), this.refreshingText !== undefined && this.renderRefreshingText())));
     }
     static get is() { return "ion-refresher-content"; }
     static get properties() {

package/dist/collection/components/reorder/reorder.js

@@ -20,7 +20,7 @@ export class Reorder {
     render() {
         const mode = getIonMode(this);
         const reorderIcon = mode === 'ios' ? reorderThreeOutline : reorderTwoSharp;
-        return (h(Host, { key: '27266e30bcb7e10c57fb6d546399cfb1f1c93b23', class: mode }, h("slot", { key: '8745cb9a31458e884c27eed1fb90d104fe9a79eb' }, h("ion-icon", { key: '6c4b9631a2f5610f1e21b2db025b6702d0d593bf', icon: reorderIcon, lazy: false, class: "reorder-icon", part: "icon", "aria-hidden": "true" }))));
+        return (h(Host, { key: '663d74e231e3af56b6298ee2539fdac9c8465839', class: mode }, h("slot", { key: 'c7c384ab8c9ca8abdc89cd984a39dfde70e342ca' }, h("ion-icon", { key: 'c8b6052db03d4b9e33a90e600c20861c73ee73ce', icon: reorderIcon, lazy: false, class: "reorder-icon", part: "icon", "aria-hidden": "true" }))));
     }
     static get is() { return "ion-reorder"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/reorder-group/reorder-group.js

@@ -238,7 +238,7 @@ export class ReorderGroup {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: 'a38c7fbceb677201330a602273d5b55abb32da19', class: {
+        return (h(Host, { key: '491f3e5843cf728ff4589e58bd86b8ce6709b293', class: {
                 [mode]: true,
                 'reorder-enabled': !this.disabled,
                 'reorder-list-active': this.state !== 0 /* ReorderGroupState.Idle */,

package/dist/collection/components/ripple-effect/ripple-effect.js

@@ -59,7 +59,7 @@ export class RippleEffect {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '7ae559bda5d2c1856a45bfa150c2cb4f83373f8e', role: "presentation", class: {
+        return (h(Host, { key: '2302f087ab1c6755355736e4ca77309c5fdcf185', role: "presentation", class: {
                 [mode]: true,
                 unbounded: this.unbounded,
             } }));

package/dist/collection/components/router-link/router-link.js

@@ -23,10 +23,10 @@ export class RouterLink {
             rel: this.rel,
             target: this.target,
         };
-        return (h(Host, { key: '529ceed5beaf92d7b4cc315c82f449eac18310e8', onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: 'f876442cab5b14b7e83c6d6ad2c2d878a9c57439', onClick: this.onClick, class: createColorClasses(this.color, {
                 [mode]: true,
                 'ion-activatable': true,
-            }) }, h("a", Object.assign({ key: 'd5f1f8b256695d70bdafd20ff3d1b625963fa2da' }, attrs), h("slot", { key: '613fcdb36a71e076f989551ea21f1d5c118b1cd2' }))));
+            }) }, h("a", Object.assign({ key: 'c44b78ec1fd10a40c23bfe548860ac2b346646a8' }, attrs), h("slot", { key: 'd32180a567613f79f89885135bd0d776ffc1eb8e' }))));
     }
     static get is() { return "ion-router-link"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/router-outlet/router-outlet.js

@@ -178,7 +178,7 @@ export class RouterOutlet {
         return true;
     }
     render() {
-        return h("slot", { key: '44a7798b8574966f7fd699564b6006411a98a805' });
+        return h("slot", { key: 'dac9120f5ffa628b16c04e5fdd44ea8e560c97e6' });
     }
     static get is() { return "ion-router-outlet"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/row/row.js

@@ -5,7 +5,7 @@ import { Host, h } from "@stencil/core";
 import { getIonMode } from "../../global/ionic-global";
 export class Row {
     render() {
-        return (h(Host, { key: 'aea072a5005e3f1f309f0d1ae5be5ee19869b035', class: getIonMode(this) }, h("slot", { key: '2a481c2126ac6ca65f0a1bbd07c2d3365409cb78' })));
+        return (h(Host, { key: '813c9a7f6782d2cf8eb27f30d3ab28e6f3122868', class: getIonMode(this) }, h("slot", { key: '356bec4d4d408ea63d6b431b06465d5b7bcbff71' })));
     }
     static get is() { return "ion-row"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/searchbar/searchbar.js

@@ -23,7 +23,7 @@ export class Searchbar {
         this.onClearInput = async (shouldFocus) => {
             this.ionClear.emit();
             return new Promise((resolve) => {
-                // setTimeout() fixes https://github.com/ionic-team/ionic/issues/7527
+                // setTimeout() fixes https://github.com/ionic-team/ionic-framework/issues/7527
                 // wait for 4 frames
                 setTimeout(() => {
                     const value = this.getValue();
@@ -378,8 +378,8 @@ export class Searchbar {
         const clearIcon = this.clearIcon || (mode === 'ios' ? closeCircle : closeSharp);
         const searchIcon = this.searchIcon || (mode === 'ios' ? searchOutline : searchSharp);
         const shouldShowCancelButton = this.shouldShowCancelButton();
-        const cancelButton = this.showCancelButton !== 'never' && (h("button", { key: '753b11f41484edcb2714aa81be8bc7bc0370cb2e', "aria-label": cancelButtonText, "aria-hidden": shouldShowCancelButton ? undefined : 'true', type: "button", tabIndex: mode === 'ios' && !shouldShowCancelButton ? -1 : undefined, onMouseDown: this.onCancelSearchbar, onTouchStart: this.onCancelSearchbar, class: "searchbar-cancel-button" }, h("div", { key: 'e42fe29767fb06a5e4f9060c3f8a47b040528e4f', "aria-hidden": "true" }, mode === 'md' ? (h("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
-        return (h(Host, { key: 'da667148dc3300f4a8473315d04e6560194f51dc', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
+        const cancelButton = this.showCancelButton !== 'never' && (h("button", { key: '20b2d0f2e3425eede725dbe3323c7c29cdb66f4e', "aria-label": cancelButtonText, "aria-hidden": shouldShowCancelButton ? undefined : 'true', type: "button", tabIndex: mode === 'ios' && !shouldShowCancelButton ? -1 : undefined, onMouseDown: this.onCancelSearchbar, onTouchStart: this.onCancelSearchbar, class: "searchbar-cancel-button" }, h("div", { key: '3a516c3fdd35256eb79639fd340afcdd92cfd7aa', "aria-hidden": "true" }, mode === 'md' ? (h("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
+        return (h(Host, { key: '34878db21f63a9bdffca0446d8ad5619ff04cac3', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
                 [mode]: true,
                 'searchbar-animated': animated,
                 'searchbar-disabled': this.disabled,
@@ -389,14 +389,14 @@ export class Searchbar {
                 'searchbar-has-focus': this.focused,
                 'searchbar-should-show-clear': this.shouldShowClearButton(),
                 'searchbar-should-show-cancel': this.shouldShowCancelButton(),
-            }) }, h("div", { key: 'b1a28467d41dd989e6aee10c7c9fb70a7c1534f1', class: "searchbar-input-container" }, h("input", Object.assign({ key: '4983f67966f79b2846c1369c7feaa0c568bc3025', "aria-label": "search text", disabled: this.disabled, ref: (el) => (this.nativeInput = el), class: "searchbar-input", inputMode: this.inputmode, enterKeyHint: this.enterkeyhint, name: this.name, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, minLength: this.minlength, maxLength: this.maxlength, placeholder: this.placeholder, type: this.type, value: this.getValue(), autoCapitalize: autocapitalize === 'default' ? undefined : autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, spellcheck: this.spellcheck }, this.inheritedAttributes)), mode === 'md' && cancelButton, h("ion-icon", { key: 'b6576522762a83a7d9977f312dce433c2aaa2490', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), h("button", { key: 'c460a3be7ffed2ddf4b08f64ea4ec6843586a726', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
+            }) }, h("div", { key: 'faa7b011206a8359b1963368c65988e506b260cb', class: "searchbar-input-container" }, h("input", Object.assign({ key: '732d3e5a2b258da6f136a14472ac872816a9853b', "aria-label": "search text", disabled: this.disabled, ref: (el) => (this.nativeInput = el), class: "searchbar-input", inputMode: this.inputmode, enterKeyHint: this.enterkeyhint, name: this.name, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, minLength: this.minlength, maxLength: this.maxlength, placeholder: this.placeholder, type: this.type, value: this.getValue(), autoCapitalize: autocapitalize === 'default' ? undefined : autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, spellcheck: this.spellcheck }, this.inheritedAttributes)), mode === 'md' && cancelButton, h("ion-icon", { key: '767dca971849f221dde220deae728b41bf764b98', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), h("button", { key: '9941b5de1ed9ebcf3e81de8e0731c09dea5a89d9', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
                 /**
                  * This prevents mobile browsers from
                  * blurring the input when the clear
                  * button is activated.
                  */
                 ev.preventDefault();
-            }, onClick: () => this.onClearInput(true) }, h("ion-icon", { key: 'e2e5dcdeca46d2588642e7b9f05d396f6e0332a9', "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
+            }, onClick: () => this.onClearInput(true) }, h("ion-icon", { key: 'cb2b543d286373a84e2c6c2a959f92b045bbd7dd', "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
     }
     static get is() { return "ion-searchbar"; }
     static get encapsulation() { return "scoped"; }
@@ -852,7 +852,7 @@ export class Searchbar {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "The `ionChange` event is fired for `<ion-searchbar>` elements when the user\nmodifies the element's value. Unlike the `ionInput` event, the `ionChange`\nevent is not necessarily fired for each alteration to an element's value.\n\nThe `ionChange` event is fired when the value has been committed\nby the user. This can happen when the element loses focus or\nwhen the \"Enter\" key is pressed. `ionChange` can also fire\nwhen clicking the clear or cancel buttons."
+                    "text": "The `ionChange` event is fired for `<ion-searchbar>` elements when the user\nmodifies the element's value. Unlike the `ionInput` event, the `ionChange`\nevent is not necessarily fired for each alteration to an element's value.\n\nThe `ionChange` event is fired when the value has been committed\nby the user. This can happen when the element loses focus or\nwhen the \"Enter\" key is pressed. `ionChange` can also fire\nwhen clicking the clear or cancel buttons.\n\nThis event will not emit when programmatically setting the `value` property."
                 },
                 "complexType": {
                     "original": "SearchbarChangeEventDetail",

package/dist/collection/components/segment/segment.js

@@ -34,6 +34,14 @@ export class Segment {
                 }
             }
         };
+        this.onSlottedItemsChange = () => {
+            /**
+             * When the slotted segment buttons change we need to
+             * ensure that the new segment buttons are checked if
+             * the value matches the segment button value.
+             */
+            this.valueChanged(this.value);
+        };
         this.getSegmentButton = (selector) => {
             var _a, _b;
             const buttons = this.getButtons().filter((button) => !button.disabled);
@@ -101,13 +109,6 @@ export class Segment {
     }
     async componentDidLoad() {
         this.setCheckedClasses();
-        /**
-         * If the value changes before watchers
-         * are setup, then the ionSelect watch callback
-         * will not fire. As a result, we manually
-         * fire this event when Select is loaded.
-         */
-        this.ionSelect.emit({ value: this.value });
         /**
          * We need to wait for the buttons to all be rendered
          * before we can scroll.
@@ -420,14 +421,14 @@ export class Segment {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '22bd7bbecaa9f0c95971565e06ef3fa4ad44a946', role: "tablist", onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: 'ad0946134c8d465b760ad792655f1cb9922db520', role: "tablist", onClick: this.onClick, class: createColorClasses(this.color, {
                 [mode]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
                 'segment-activated': this.activated,
                 'segment-disabled': this.disabled,
                 'segment-scrollable': this.scrollable,
-            }) }, h("slot", { key: '6d6fe81026928662137b872206de55117fda30a2' })));
+            }) }, h("slot", { key: 'dcdb425bcda0d60acb7c317e5e671ed462715b4a', onSlotchange: this.onSlottedItemsChange })));
     }
     static get is() { return "ion-segment"; }
     static get encapsulation() { return "shadow"; }
@@ -579,7 +580,7 @@ export class Segment {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when the value property has changed and any\ndragging pointer has been released from `ion-segment`."
+                    "text": "Emitted when the value property has changed and any dragging pointer has been released from `ion-segment`.\n\nThis event will not emit when programmatically setting the `value` property."
                 },
                 "complexType": {
                     "original": "SegmentChangeEventDetail",

package/dist/collection/components/segment-button/segment-button.js

@@ -78,7 +78,7 @@ export class SegmentButton {
         const { checked, type, disabled, hasIcon, hasLabel, layout, segmentEl } = this;
         const mode = getIonMode(this);
         const hasSegmentColor = () => (segmentEl === null || segmentEl === void 0 ? void 0 : segmentEl.color) !== undefined;
-        return (h(Host, { key: '9b54e4841be5d0f4f2ee230a649bfbe01066c7c7', class: {
+        return (h(Host, { key: '70cf5c7a3ae2620222c5250c644faf3cfc3b3e4e', class: {
                 [mode]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
@@ -94,10 +94,10 @@ export class SegmentButton {
                 'ion-activatable': true,
                 'ion-activatable-instant': true,
                 'ion-focusable': true,
-            } }, h("button", Object.assign({ key: 'b97b964b5f3f1bf53e41ad2a1ad4853d5f956fe5', "aria-selected": checked ? 'true' : 'false', role: "tab", ref: (el) => (this.nativeEl = el), type: type, class: "button-native", part: "native", disabled: disabled }, this.inheritedAttributes), h("span", { key: '0eeb2616f7c5a7a7fc1e2e3bd34ab461de6179f4', class: "button-inner" }, h("slot", { key: '5ac8fafa2f23e30f8df63bfe236a9604cfb388ae' })), mode === 'md' && h("ion-ripple-effect", { key: '86032e9726e2b6437ffc34f59fcbe564616cc9ca' })), h("div", { key: '536b1da58dd2521be290707d6b1726831340cf9f', part: "indicator", class: {
+            } }, h("button", Object.assign({ key: 'a53c9f1e360934e8d2e90476642ba4507fc38ebd', "aria-selected": checked ? 'true' : 'false', role: "tab", ref: (el) => (this.nativeEl = el), type: type, class: "button-native", part: "native", disabled: disabled }, this.inheritedAttributes), h("span", { key: '7d8feda840d389941cc693f500b5eba0b39b41da', class: "button-inner" }, h("slot", { key: 'd9ae1eec45db253cbf573d29cd545658dd595d87' })), mode === 'md' && h("ion-ripple-effect", { key: '49e6a16968709dc9b3fc77bc9fb99acb42fda88c' })), h("div", { key: '4e3ea0989ed5205dbb03586e4facb439b05a92de', part: "indicator", class: {
                 'segment-button-indicator': true,
                 'segment-button-indicator-animated': true,
-            } }, h("div", { key: 'b43124415ebd77c87285791522c5afc26a137f96', part: "indicator-background", class: "segment-button-indicator-background" }))));
+            } }, h("div", { key: '65c72a151080998c1e548c87d4d4ebd5c7dda72f', part: "indicator-background", class: "segment-button-indicator-background" }))));
     }
     static get is() { return "ion-segment-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -138,6 +138,7 @@
  */
 :host([slot=start]),
 :host([slot=end]) {
+  flex: initial;
   width: auto;
 }
 

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

@@ -99,9 +99,6 @@ export class Select {
         this.value = value;
         this.ionChange.emit({ value });
     }
-    componentWillLoad() {
-        this.inheritedAttributes = inheritAttributes(this.el, ['aria-label']);
-    }
     async connectedCallback() {
         const { el } = this;
         this.notchController = createNotchController(el, () => this.notchSpacerEl, () => this.labelSlot);
@@ -118,6 +115,22 @@ export class Select {
             forceUpdate(this);
         });
     }
+    componentWillLoad() {
+        this.inheritedAttributes = inheritAttributes(this.el, ['aria-label']);
+    }
+    componentDidLoad() {
+        /**
+         * If any of the conditions that trigger the styleChanged callback
+         * are met on component load, it is possible the event emitted
+         * prior to a parent web component registering an event listener.
+         *
+         * To ensure the parent web component receives the event, we
+         * emit the style event again after the component has loaded.
+         *
+         * This is often seen in Angular with the `dist` output target.
+         */
+        this.emitStyle();
+    }
     disconnectedCallback() {
         if (this.mutationO) {
             this.mutationO.disconnect();
@@ -610,7 +623,7 @@ export class Select {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots));
-        return (h(Host, { key: '5a1b82be3f737a2ce5b87c5cd716f898a902ab10', onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: 'e14586e887c0b73457b9f1e8f0585dfc7d590051', onClick: this.onClick, class: createColorClasses(this.color, {
                 [mode]: true,
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', el),
@@ -626,7 +639,7 @@ export class Select {
                 [`select-justify-${justify}`]: justifyEnabled,
                 [`select-shape-${shape}`]: shape !== undefined,
                 [`select-label-placement-${labelPlacement}`]: true,
-            }) }, h("label", { key: '79a6e99e38fa3f72d876f4b8ac0077a9fbf4bd2d', class: "select-wrapper", id: "select-label" }, this.renderLabelContainer(), h("div", { key: 'e18ac0b4a35e2cdde858347a9b116218533cd532', class: "select-wrapper-inner" }, h("slot", { key: 'cc194f718ef9363d3496531f0d9259e33b66f4d8', name: "start" }), h("div", { key: '833c5544e453c0ac543f5d4898d0f492caac405a', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: 'adaa4064c9ad01ef7a452308680eb09dc3ad60ff', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: 'd47a6ef0a6192c5f098973aa517aad2aa9ae8dfc', class: "select-highlight" }))));
+            }) }, h("label", { key: 'b44929542c809f2dca25afc588701762a083edd1', class: "select-wrapper", id: "select-label" }, this.renderLabelContainer(), h("div", { key: '195e3fad9cea0363ff00bf257ec2975fe5aa6887', class: "select-wrapper-inner" }, h("slot", { key: '9da7161a69b92d6fd124a478348d3fa420092f26', name: "start" }), h("div", { key: '49c589c164d167de0ba5741a0c80fba58ea0bec6', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: 'de1536d910fceb8e2dbdda13abcf88ee969888b8', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: 'e821b7b32cd1996eaa6d471df9b531ad0d491098', class: "select-highlight" }))));
     }
     static get is() { return "ion-select"; }
     static get encapsulation() { return "shadow"; }
@@ -1010,7 +1023,7 @@ export class Select {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when the value has changed."
+                    "text": "Emitted when the value has changed.\n\nThis event will not emit when programmatically setting the `value` property."
                 },
                 "complexType": {
                     "original": "SelectChangeEventDetail",

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

@@ -138,6 +138,7 @@
  */
 :host([slot=start]),
 :host([slot=end]) {
+  flex: initial;
   width: auto;
 }
 

package/dist/collection/components/select/test/basic/select.e2e.js

@@ -32,7 +32,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, config }) => {
         });
         test.describe('select: popover', () => {
             test('it should open a popover select', async ({ page, skip }) => {
-                // TODO (FW-2979)
+                // TODO (ROU-5437)
                 skip.browser('webkit', 'Safari 16 only allows text fields and pop-up menus to be focused.');
                 const ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
                 await page.click('#customPopoverSelect');

package/dist/collection/components/select/test/disabled/select.e2e.js

@@ -6,7 +6,7 @@ import { configs, test } from "../../../../utils/test/playwright/index";
 configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
     test.describe(title('select: disabled options'), () => {
         test('should not focus a disabled option when no value is set', async ({ page, skip }) => {
-            // TODO (FW-2979)
+            // TODO (ROU-5437)
             skip.browser('webkit', 'Safari 16 only allows text fields and pop-up menus to be focused.');
             test.info().annotations.push({
                 type: 'issue',

package/dist/collection/components/select/test/fill/select.e2e.js

@@ -189,4 +189,29 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
             await expect(notchCutout).toBeHidden();
         });
     });
+    test(title('select: fill outline: fit-content should display select options'), async ({ page }, testInfo) => {
+        testInfo.annotations.push({
+            type: 'issue',
+            description: 'https://github.com/ionic-team/ionic-framework/issues/29321',
+        });
+        await page.setContent(`
+        <ion-select
+          fill="outline"
+          aria-label="Fruit"
+          value="apple"
+          interface="popover"
+          style="width: fit-content"
+        >
+          <ion-select-option value="5">5</ion-select-option>
+          <ion-select-option value="10">10</ion-select-option>
+          <ion-select-option value="15">15</ion-select-option>
+        </ion-select>
+      `, config);
+        const select = page.locator('ion-select');
+        const ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
+        await select.click();
+        await ionPopoverDidPresent.next();
+        const selectPopover = page.locator('ion-select-popover');
+        await expect(selectPopover).toHaveScreenshot(screenshot(`select-fill-outline-fit-content`));
+    });
 });

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

@@ -10,7 +10,7 @@ export class SelectOption {
         this.value = undefined;
     }
     render() {
-        return h(Host, { key: '6fa504ac5597098086050c0f517a03be8b8032c9', role: "option", id: this.inputId, class: getIonMode(this) });
+        return h(Host, { key: 'ba5a9c695c53fe0802af11a49f4305a9b8f71773', role: "option", id: this.inputId, class: getIonMode(this) });
     }
     static get is() { return "ion-select-option"; }
     static get encapsulation() { return "shadow"; }

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

@@ -102,7 +102,7 @@ export class SelectPopover {
     render() {
         const { header, message, options, subHeader } = this;
         const hasSubHeaderOrMessage = subHeader !== undefined || message !== undefined;
-        return (h(Host, { key: '2ed838c17d47198c697164a0a750aafb6ca61a95', class: getIonMode(this) }, h("ion-list", { key: '24fe7a6e9e45458c201b178ca236645d0f49ea8a' }, header !== undefined && h("ion-list-header", { key: 'ebe64853dcd59c14a8f4dc9c2dc9e66d1e9767f6' }, header), hasSubHeaderOrMessage && (h("ion-item", { key: 'ed7c6f2d7e1282b3048df0af8f1e3fd3b08297c6' }, h("ion-label", { key: 'a81f6c4011a0dce47b80c98a45d80b1368d84a1e', class: "ion-text-wrap" }, subHeader !== undefined && h("h3", { key: '4fd72c62da896092d535580917bb8a5ad6609c05' }, subHeader), message !== undefined && h("p", { key: '88aead29b35d69743abe4015f96a6fa9f199a0ff' }, message)))), this.renderOptions(options))));
+        return (h(Host, { key: '302553a2eec4d1442751b8af28b7c9bd3487fd5d', class: getIonMode(this) }, h("ion-list", { key: '39ae8579e6fe3bae2c7504147268ad5c82fd27e6' }, header !== undefined && h("ion-list-header", { key: 'e0e6686380d188f46c593e1bb25287dcf08c75c2' }, header), hasSubHeaderOrMessage && (h("ion-item", { key: '8a2d8652db269593c0ba7d767277e12c2b06144d' }, h("ion-label", { key: 'a30cc0ecf95d5bdd6421ee1683922c1b853e98ea', class: "ion-text-wrap" }, subHeader !== undefined && h("h3", { key: 'c298459ca450123808a08d65660825b2c26d00e5' }, subHeader), message !== undefined && h("p", { key: 'ed895fbaec020e809021138401341b6fd7675035' }, message)))), this.renderOptions(options))));
     }
     static get is() { return "ion-select-popover"; }
     static get encapsulation() { return "scoped"; }

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

@@ -189,7 +189,14 @@ ion-label {
  * }
  */
 ion-list ion-radio::part(container) {
-  opacity: 0;
+  display: none;
+}
+
+ion-list ion-radio::part(label) {
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
 ion-item {

package/dist/collection/components/select-popover/test/basic/select-popover.e2e.js

@@ -18,7 +18,7 @@ const checkedOptions = [
 configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
     test.describe(title('select-popover: basic'), () => {
         test.beforeEach(({ browserName }) => {
-            test.skip(browserName === 'webkit', 'https://ionic-cloud.atlassian.net/browse/FW-2979');
+            test.skip(browserName === 'webkit', 'ROU-5437');
         });
         test.describe('single selection', () => {
             let selectPopoverPage;
@@ -44,7 +44,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
                 await expect(selectPopoverPage.popover).not.toBeVisible();
             });
             test('pressing Space on a selected option should dismiss the popover', async ({ browserName }) => {
-                test.skip(browserName === 'firefox', 'Same behavior as https://ionic-cloud.atlassian.net/browse/FW-2979');
+                test.skip(browserName === 'firefox', 'Same behavior as ROU-5437');
                 await selectPopoverPage.setup(config, checkedOptions, false);
                 await selectPopoverPage.pressSpaceOnOption('apple');
                 await selectPopoverPage.ionPopoverDidDismiss.next();

package/dist/collection/components/skeleton-text/skeleton-text.js

@@ -25,11 +25,11 @@ export class SkeletonText {
         const animated = this.animated && config.getBoolean('animated', true);
         const inMedia = hostContext('ion-avatar', this.el) || hostContext('ion-thumbnail', this.el);
         const mode = getIonMode(this);
-        return (h(Host, { key: '8a1b489e35564056b3babce548982e58fec74119', class: {
+        return (h(Host, { key: '1a3e78e9a6f740d609d1f0b7a16cb6eff4a2d617', class: {
                 [mode]: true,
                 'skeleton-text-animated': animated,
                 'in-media': inMedia,
-            } }, h("span", { key: '71df251a41967dc4dab241f6fa906fa4d568dd9e' }, "\u00A0")));
+            } }, h("span", { key: 'be3eabe196ec6e8ec19857375ba30f4c8aa58e7f' }, "\u00A0")));
     }
     static get is() { return "ion-skeleton-text"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spinner/spinner.js

@@ -39,7 +39,7 @@ export class Spinner {
                 svgs.push(buildLine(spinner, duration, i, spinner.lines));
             }
         }
-        return (h(Host, { key: '9422c25aadfdf08861e26bb1aa336c94391d10a3', class: createColorClasses(self.color, {
+        return (h(Host, { key: '50cbaed55eeab15292447d106a80b93db4cb40de', class: createColorClasses(self.color, {
                 [mode]: true,
                 [`spinner-${spinnerName}`]: true,
                 'spinner-paused': self.paused || config.getBoolean('_testing'),