voyager-ionic-core 7.6.1 → 7.6.5

package/dist/collection/components/radio/test/legacy/a11y/radio.e2e.js

@@ -8,9 +8,22 @@ import { configs, test } from "../../../../../utils/test/playwright/index";
  */
 configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
     test.describe(title('radio: a11y'), () => {
-        test.beforeEach(async ({ page, skip }) => {
-            skip.browser('webkit', 'Tabbing is flaky in Safari');
+        test.beforeEach(async ({ page, browserName }) => {
             await page.goto(`/src/components/radio/test/legacy/a11y`, config);
+            if (browserName === 'webkit') {
+                const radio = page.locator('#first-group ion-radio').first();
+                /**
+                 * Sometimes Safari does not focus the first radio.
+                 * This is a workaround to ensure the first radio is focused.
+                 *
+                 * Wait for the first radio to be rendered before tabbing.
+                 * This is necessary because the first radio may not be rendered
+                 * when the page first loads.
+                 *
+                 * This would cause the first radio to be skipped when tabbing.
+                 */
+                await radio.waitFor();
+            }
         });
         test('tabbing should switch between radio groups', async ({ page, pageUtils }) => {
             const firstGroupRadios = page.locator('#first-group ion-radio');

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

@@ -33,7 +33,15 @@ export class RadioGroup {
              * using the `name` attribute.
              */
             const selectedRadio = ev.target && ev.target.closest('ion-radio');
-            if (selectedRadio && selectedRadio.disabled === false) {
+            /**
+             * Our current disabled prop definition causes Stencil to mark it
+             * as optional. While this is not desired, fixing this behavior
+             * in Stencil is a significant breaking change, so this effort is
+             * being de-risked in STENCIL-917. Until then, we compromise
+             * here by checking for falsy `disabled` values instead of strictly
+             * checking `disabled === false`.
+             */
+            if (selectedRadio && !selectedRadio.disabled) {
                 const currentValue = this.value;
                 const newValue = selectedRadio.value;
                 if (newValue !== currentValue) {

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

@@ -718,7 +718,7 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "A callback used to format the pin text.\nBy default the pin text is set to `Math.round(value)`."
+                    "text": "A callback used to format the pin text.\nBy default the pin text is set to `Math.round(value)`.\n\nSee https://ionicframework.com/docs/troubleshooting/runtime#accessing-this\nif you need to access `this` from within the callback."
                 },
                 "defaultValue": "(value: number): number => Math.round(value)"
             },

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

@@ -8,6 +8,9 @@ import { clamp, componentOnReady, getElementRoot, raf, transitionEndAsync } from
 import { ImpactStyle, hapticImpact } from "../../utils/native/haptic";
 import { getIonMode } from "../../global/ionic-global";
 import { createPullingAnimation, createSnapBackAnimation, getRefresherAnimationType, handleScrollWhilePulling, handleScrollWhileRefreshing, setSpinnerOpacity, shouldUseNativeRefresher, translateElement, } from "./refresher.utils";
+/**
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ */
 export class Refresher {
     constructor() {
         this.appliedStyles = false;

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

@@ -4,7 +4,6 @@
 import { writeTask } from "@stencil/core";
 import { createAnimation } from "../../utils/animation/animation";
 import { clamp, componentOnReady, transitionEndAsync } from "../../utils/helpers";
-import { isPlatform } from "../../utils/platform";
 export const getRefresherAnimationType = (contentEl) => {
     const previousSibling = contentEl.previousElementSibling;
     const hasHeader = previousSibling !== null && previousSibling.tagName === 'ION-HEADER';
@@ -162,6 +161,24 @@ export const translateElement = (el, value, duration = 200) => {
 };
 // Utils
 // -----------------------------
+/**
+ * In order to use the native iOS refresher the device must support rubber band scrolling.
+ * As part of this, we need to exclude Desktop Safari because it has a slightly different rubber band effect that is not compatible with the native refresher in Ionic.
+ *
+ * We also need to be careful not to include devices that spoof their user agent.
+ * For example, when using iOS emulation in Chrome the user agent will be spoofed such that
+ * navigator.maxTouchPointer > 0. To work around this,
+ * we check to see if the apple-pay-logo is supported as a named image which is only
+ * true on Apple devices.
+ *
+ * We previously checked referencEl.style.webkitOverflowScrolling to explicitly check
+ * for rubber band support. However, this property was removed on iPadOS and it's possible
+ * that this will be removed on iOS in the future too.
+ *
+ */
+export const supportsRubberBandScrolling = () => {
+    return navigator.maxTouchPoints > 0 && CSS.supports('background: -webkit-named-image(apple-pay-logo-black)');
+};
 export const shouldUseNativeRefresher = async (referenceEl, mode) => {
     const refresherContent = referenceEl.querySelector('ion-refresher-content');
     if (!refresherContent) {
@@ -172,14 +189,5 @@ export const shouldUseNativeRefresher = async (referenceEl, mode) => {
     const refreshingSpinner = referenceEl.querySelector('ion-refresher-content .refresher-refreshing ion-spinner');
     return (pullingSpinner !== null &&
         refreshingSpinner !== null &&
-        /**
-         * We use webkitOverflowScrolling for feature detection with rubber band scrolling
-         * on iOS. When doing referenceEl.style, webkitOverflowScrolling is undefined on non-iOS platforms.
-         * However, it will be the empty string on iOS.
-         * Note that we do not use getPropertyValue (and thus need to cast as any) because calling
-         * getPropertyValue('-webkit-overflow-scrolling') will return the empty string if it is not
-         * set on the element, even if the platform does not support that.
-         */
-        ((mode === 'ios' && isPlatform('mobile') && referenceEl.style.webkitOverflowScrolling !== undefined) ||
-            mode === 'md'));
+        ((mode === 'ios' && supportsRubberBandScrolling()) || mode === 'md'));
 };

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

@@ -3,11 +3,11 @@
  */
 import { Host, h } from "@stencil/core";
 import { ENABLE_HTML_CONTENT_DEFAULT } from "../../utils/config";
-import { isPlatform } from "../../utils/platform";
 import { sanitizeDOMString } from "../../utils/sanitization/index";
 import { arrowDown, caretBackSharp } from "ionicons/icons";
 import { config } from "../../global/config";
 import { getIonMode } from "../../global/ionic-global";
+import { supportsRubberBandScrolling } from "../refresher/refresher.utils";
 import { SPINNERS } from "../spinner/spinner-configs";
 export class RefresherContent {
     constructor() {
@@ -19,9 +19,15 @@ export class RefresherContent {
     }
     componentWillLoad() {
         if (this.pullingIcon === undefined) {
+            /**
+             * The native iOS refresher uses a spinner instead of
+             * an icon, so we need to see if this device supports
+             * the native iOS refresher.
+             */
+            const hasRubberBandScrolling = supportsRubberBandScrolling();
             const mode = getIonMode(this);
-            const overflowRefresher = this.el.style.webkitOverflowScrolling !== undefined ? 'lines' : arrowDown;
-            this.pullingIcon = config.get('refreshingIcon', mode === 'ios' && isPlatform('mobile') ? config.get('spinner', overflowRefresher) : 'circular');
+            const overflowRefresher = hasRubberBandScrolling ? 'lines' : arrowDown;
+            this.pullingIcon = config.get('refreshingIcon', mode === 'ios' && hasRubberBandScrolling ? config.get('spinner', overflowRefresher) : 'circular');
         }
         if (this.refreshingSpinner === undefined) {
             const mode = getIonMode(this);

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

@@ -312,11 +312,9 @@ export class ReorderGroup {
                 "complexType": {
                     "signature": "(listOrReorder?: boolean | any[]) => Promise<any>",
                     "parameters": [{
-                            "tags": [{
-                                    "name": "param",
-                                    "text": "listOrReorder A list of items to be sorted and returned in the new order or a\nboolean of whether or not the reorder should reposition the item."
-                                }],
-                            "text": "A list of items to be sorted and returned in the new order or a\nboolean of whether or not the reorder should reposition the item."
+                            "name": "listOrReorder",
+                            "type": "boolean | any[] | undefined",
+                            "docs": "A list of items to be sorted and returned in the new order or a\nboolean of whether or not the reorder should reposition the item."
                         }],
                     "references": {
                         "Promise": {

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

@@ -104,17 +104,13 @@ export class RippleEffect {
                 "complexType": {
                     "signature": "(x: number, y: number) => Promise<() => void>",
                     "parameters": [{
-                            "tags": [{
-                                    "name": "param",
-                                    "text": "x The horizontal coordinate of where the ripple should start."
-                                }],
-                            "text": "The horizontal coordinate of where the ripple should start."
+                            "name": "x",
+                            "type": "number",
+                            "docs": "The horizontal coordinate of where the ripple should start."
                         }, {
-                            "tags": [{
-                                    "name": "param",
-                                    "text": "y The vertical coordinate of where the ripple should start."
-                                }],
-                            "text": "The vertical coordinate of where the ripple should start."
+                            "name": "y",
+                            "type": "number",
+                            "docs": "The vertical coordinate of where the ripple should start."
                         }],
                     "references": {
                         "Promise": {

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

@@ -378,20 +378,17 @@ export class Router {
                 "complexType": {
                     "signature": "(path: string, direction?: RouterDirection, animation?: AnimationBuilder) => Promise<boolean>",
                     "parameters": [{
-                            "tags": [{
-                                    "name": "param",
-                                    "text": "path The path to navigate to."
-                                }],
-                            "text": "The path to navigate to."
+                            "name": "path",
+                            "type": "string",
+                            "docs": "The path to navigate to."
                         }, {
-                            "tags": [{
-                                    "name": "param",
-                                    "text": "direction The direction of the animation. Defaults to `\"forward\"`."
-                                }],
-                            "text": "The direction of the animation. Defaults to `\"forward\"`."
+                            "name": "direction",
+                            "type": "\"root\" | \"back\" | \"forward\"",
+                            "docs": "The direction of the animation. Defaults to `\"forward\"`."
                         }, {
-                            "tags": [],
-                            "text": ""
+                            "name": "animation",
+                            "type": "AnimationBuilder | undefined",
+                            "docs": ""
                         }],
                     "references": {
                         "Promise": {
@@ -463,8 +460,9 @@ export class Router {
                 "complexType": {
                     "signature": "(direction: RouterDirection) => Promise<boolean>",
                     "parameters": [{
-                            "tags": [],
-                            "text": ""
+                            "name": "direction",
+                            "type": "\"root\" | \"back\" | \"forward\"",
+                            "docs": ""
                         }],
                     "references": {
                         "Promise": {

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

@@ -369,14 +369,17 @@ export class RouterOutlet {
                 "complexType": {
                     "signature": "(enteringEl: HTMLElement, leavingEl: HTMLElement | undefined, opts?: RouterOutletOptions) => Promise<boolean>",
                     "parameters": [{
-                            "tags": [],
-                            "text": ""
+                            "name": "enteringEl",
+                            "type": "HTMLElement",
+                            "docs": ""
                         }, {
-                            "tags": [],
-                            "text": ""
+                            "name": "leavingEl",
+                            "type": "HTMLElement | undefined",
+                            "docs": ""
                         }, {
-                            "tags": [],
-                            "text": ""
+                            "name": "opts",
+                            "type": "RouterOutletOptions | undefined",
+                            "docs": ""
                         }],
                     "references": {
                         "Promise": {
@@ -407,17 +410,21 @@ export class RouterOutlet {
                 "complexType": {
                     "signature": "(id: string, params: ComponentProps | undefined, direction: RouterDirection, animation?: AnimationBuilder) => Promise<RouteWrite>",
                     "parameters": [{
-                            "tags": [],
-                            "text": ""
+                            "name": "id",
+                            "type": "string",
+                            "docs": ""
                         }, {
-                            "tags": [],
-                            "text": ""
+                            "name": "params",
+                            "type": "ComponentProps | undefined",
+                            "docs": ""
                         }, {
-                            "tags": [],
-                            "text": ""
+                            "name": "direction",
+                            "type": "\"root\" | \"back\" | \"forward\"",
+                            "docs": ""
                         }, {
-                            "tags": [],
-                            "text": ""
+                            "name": "animation",
+                            "type": "AnimationBuilder | undefined",
+                            "docs": ""
                         }],
                     "references": {
                         "Promise": {

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

@@ -628,10 +628,12 @@ button {
 
 ::slotted([slot=start]) {
   margin-inline-end: 16px;
+  margin-inline-start: 0;
 }
 
 ::slotted([slot=end]) {
   margin-inline-start: 16px;
+  margin-inline-end: 0;
 }
 
 /**
@@ -764,4 +766,22 @@ button {
 
 :host(.select-disabled) {
   opacity: 0.3;
+}
+
+/**
+ * Slotted buttons have a lot of default padding that can
+ * cause them to look misaligned from other pieces such
+ * as the control's label, especially when using a clear
+ * fill. We also make them circular to ensure that non-
+ * clear buttons and the focus/hover state on clear ones
+ * don't look too crowded.
+ */
+::slotted(ion-button[slot=start].button-has-icon-only),
+::slotted(ion-button[slot=end].button-has-icon-only) {
+  --border-radius: 50%;
+  --padding-start: 0;
+  --padding-end: 0;
+  --padding-top: 0;
+  --padding-bottom: 0;
+  aspect-ratio: 1;
 }

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

@@ -1205,11 +1205,9 @@ Developers can use the "legacy" property to continue using the legacy form marku
                 "complexType": {
                     "signature": "(event?: UIEvent) => Promise<any>",
                     "parameters": [{
-                            "tags": [{
-                                    "name": "param",
-                                    "text": "event The user interface event that called the open."
-                                }],
-                            "text": "The user interface event that called the open."
+                            "name": "event",
+                            "type": "UIEvent | undefined",
+                            "docs": "The user interface event that called the open."
                         }],
                     "references": {
                         "Promise": {

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

@@ -628,10 +628,12 @@ button {
 
 ::slotted([slot=start]) {
   margin-inline-end: 16px;
+  margin-inline-start: 0;
 }
 
 ::slotted([slot=end]) {
   margin-inline-start: 16px;
+  margin-inline-end: 0;
 }
 
 /**
@@ -1350,4 +1352,23 @@ button {
 
 :host(.select-disabled) {
   opacity: 0.38;
+}
+
+/**
+ * Slotted buttons have a lot of default padding that can
+ * cause them to look misaligned from other pieces such
+ * as the control's label, especially when using a clear
+ * fill. We also make them circular to ensure that non-
+ * clear buttons and the focus/hover state on clear ones
+ * don't look too crowded.
+ */
+::slotted(ion-button[slot=start].button-has-icon-only),
+::slotted(ion-button[slot=end].button-has-icon-only) {
+  --border-radius: 50%;
+  --padding-start: 8px;
+  --padding-end: 8px;
+  --padding-top: 8px;
+  --padding-bottom: 8px;
+  aspect-ratio: 1;
+  min-height: 40px;
 }

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

@@ -9,7 +9,9 @@ configs().forEach(({ title, screenshot, config }) => {
             await page.setContent(`
           <ion-select label-placement="start" fill="solid" placeholder="Select weight" label="Weight">
             <ion-icon slot="start" name="barbell" aria-hidden="true"></ion-icon>
-            <ion-label slot="end">lbs</ion-label>
+            <ion-button slot="end" aria-label="Show/hide password">
+              <ion-icon slot="icon-only" name="lock-closed" aria-hidden="true"></ion-icon>
+            </ion-button>
           </ion-select>
         `, config);
             const select = page.locator('ion-select');
@@ -19,7 +21,9 @@ configs().forEach(({ title, screenshot, config }) => {
             await page.setContent(`
           <ion-select label-placement="floating" fill="solid" placeholder="Select weight" label="Weight">
             <ion-icon slot="start" name="barbell" aria-hidden="true"></ion-icon>
-            <ion-label slot="end">lbs</ion-label>
+            <ion-button slot="end" aria-label="Show/hide password">
+              <ion-icon slot="icon-only" name="lock-closed" aria-hidden="true"></ion-icon>
+            </ion-button>
           </ion-select>
         `, config);
             const select = page.locator('ion-select');

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

@@ -28,7 +28,7 @@ export class Spinner {
         const spinnerName = self.getName();
         const spinner = (_a = SPINNERS[spinnerName]) !== null && _a !== void 0 ? _a : SPINNERS['lines'];
         const duration = typeof self.duration === 'number' && self.duration > 10 ? self.duration : spinner.dur;
-        const svgs = []; // TODO(FW-2832): type
+        const svgs = [];
         if (spinner.circles !== undefined) {
             for (let i = 0; i < spinner.circles; i++) {
                 svgs.push(buildCircle(spinner, duration, i, spinner.circles));

package/dist/collection/components/split-pane/split-pane.ios.css

@@ -152,6 +152,15 @@
 
 :host(.split-pane-visible) ::slotted(.split-pane-main) {
   flex: 1;
+  /**
+   * Content can overflow outside of a router outlet
+   * or a nav container to allow for the translucent
+   * tab bar effect to work. However, this can cause
+   * iOS page transitions to flow outside of the container
+   * and overlap the menu on larger viewports. As a result,
+   * we disable the overflow when that is the case.
+   */
+  overflow: hidden;
 }
 
 :host(.split-pane-visible) ::slotted(.split-pane-side:not(ion-menu)),

package/dist/collection/components/split-pane/split-pane.md.css

@@ -152,6 +152,15 @@
 
 :host(.split-pane-visible) ::slotted(.split-pane-main) {
   flex: 1;
+  /**
+   * Content can overflow outside of a router outlet
+   * or a nav container to allow for the translucent
+   * tab bar effect to work. However, this can cause
+   * iOS page transitions to flow outside of the container
+   * and overlap the menu on larger viewports. As a result,
+   * we disable the overflow when that is the case.
+   */
+  overflow: hidden;
 }
 
 :host(.split-pane-visible) ::slotted(.split-pane-side:not(ion-menu)),

package/dist/collection/components/tabs/tabs.js

@@ -236,11 +236,9 @@ export class Tabs {
                 "complexType": {
                     "signature": "(tab: string | HTMLIonTabElement) => Promise<boolean>",
                     "parameters": [{
-                            "tags": [{
-                                    "name": "param",
-                                    "text": "tab The tab instance to select. If passed a string, it should be the value of the tab's `tab` property."
-                                }],
-                            "text": "The tab instance to select. If passed a string, it should be the value of the tab's `tab` property."
+                            "name": "tab",
+                            "type": "string | HTMLIonTabElement",
+                            "docs": "The tab instance to select. If passed a string, it should be the value of the tab's `tab` property."
                         }],
                     "references": {
                         "Promise": {
@@ -266,11 +264,9 @@ export class Tabs {
                 "complexType": {
                     "signature": "(tab: string | HTMLIonTabElement) => Promise<HTMLIonTabElement | undefined>",
                     "parameters": [{
-                            "tags": [{
-                                    "name": "param",
-                                    "text": "tab The tab instance to select. If passed a string, it should be the value of the tab's `tab` property."
-                                }],
-                            "text": "The tab instance to select. If passed a string, it should be the value of the tab's `tab` property."
+                            "name": "tab",
+                            "type": "string | HTMLIonTabElement",
+                            "docs": "The tab instance to select. If passed a string, it should be the value of the tab's `tab` property."
                         }],
                     "references": {
                         "Promise": {
@@ -313,8 +309,9 @@ export class Tabs {
                 "complexType": {
                     "signature": "(id: string) => Promise<RouteWrite>",
                     "parameters": [{
-                            "tags": [],
-                            "text": ""
+                            "name": "id",
+                            "type": "string",
+                            "docs": ""
                         }],
                     "references": {
                         "Promise": {

package/dist/collection/components/textarea/test/slot/textarea.e2e.js

@@ -9,7 +9,9 @@ configs().forEach(({ title, screenshot, config }) => {
             await page.setContent(`
           <ion-textarea label-placement="start" fill="solid" value="100" label="Weight">
             <ion-icon slot="start" name="barbell" aria-hidden="true"></ion-icon>
-            <ion-label slot="end">lbs</ion-label>
+            <ion-button slot="end" aria-label="Show/hide password">
+              <ion-icon slot="icon-only" name="lock-closed" aria-hidden="true"></ion-icon>
+            </ion-button>
           </ion-textarea>
         `, config);
             const textarea = page.locator('ion-textarea');
@@ -19,7 +21,9 @@ configs().forEach(({ title, screenshot, config }) => {
             await page.setContent(`
           <ion-textarea label-placement="floating" fill="solid" value="100" label="Weight">
             <ion-icon slot="start" name="barbell" aria-hidden="true"></ion-icon>
-            <ion-label slot="end">lbs</ion-label>
+            <ion-button slot="end" aria-label="Show/hide password">
+              <ion-icon slot="icon-only" name="lock-closed" aria-hidden="true"></ion-icon>
+            </ion-button>
           </ion-textarea>
         `, config);
             const textarea = page.locator('ion-textarea');

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

@@ -766,10 +766,12 @@
 
 ::slotted([slot=start]) {
   margin-inline-end: 16px;
+  margin-inline-start: 0;
 }
 
 ::slotted([slot=end]) {
   margin-inline-start: 16px;
+  margin-inline-end: 0;
 }
 
 /**
@@ -964,4 +966,22 @@
 :host(.legacy-textarea) .native-textarea[disabled],
 :host(.textarea-disabled) {
   opacity: 0.3;
+}
+
+/**
+ * Slotted buttons have a lot of default padding that can
+ * cause them to look misaligned from other pieces such
+ * as the control's label, especially when using a clear
+ * fill. We also make them circular to ensure that non-
+ * clear buttons and the focus/hover state on clear ones
+ * don't look too crowded.
+ */
+::slotted(ion-button[slot=start].button-has-icon-only),
+::slotted(ion-button[slot=end].button-has-icon-only) {
+  --border-radius: 50%;
+  --padding-start: 0;
+  --padding-end: 0;
+  --padding-top: 0;
+  --padding-bottom: 0;
+  aspect-ratio: 1;
 }

package/dist/collection/components/textarea/textarea.js

@@ -848,7 +848,7 @@ Developers can use the "legacy" property to continue using the legacy form marku
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "A callback used to format the counter text.\nBy default the counter text is set to \"itemLength / maxLength\"."
+                    "text": "A callback used to format the counter text.\nBy default the counter text is set to \"itemLength / maxLength\".\n\nSee https://ionicframework.com/docs/troubleshooting/runtime#accessing-this\nif you need to access `this` from within the callback."
                 }
             },
             "errorText": {

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

@@ -766,10 +766,12 @@
 
 ::slotted([slot=start]) {
   margin-inline-end: 16px;
+  margin-inline-start: 0;
 }
 
 ::slotted([slot=end]) {
   margin-inline-start: 16px;
+  margin-inline-end: 0;
 }
 
 /**
@@ -1529,4 +1531,23 @@
 
 :host(.textarea-shape-round) {
   --border-radius: 16px;
+}
+
+/**
+ * Slotted buttons have a lot of default padding that can
+ * cause them to look misaligned from other pieces such
+ * as the control's label, especially when using a clear
+ * fill. We also make them circular to ensure that non-
+ * clear buttons and the focus/hover state on clear ones
+ * don't look too crowded.
+ */
+::slotted(ion-button[slot=start].button-has-icon-only),
+::slotted(ion-button[slot=end].button-has-icon-only) {
+  --border-radius: 50%;
+  --padding-start: 8px;
+  --padding-end: 8px;
+  --padding-top: 8px;
+  --padding-bottom: 8px;
+  aspect-ratio: 1;
+  min-height: 40px;
 }

package/dist/collection/components/toast/toast.js

@@ -1026,17 +1026,13 @@ export class Toast {
                 "complexType": {
                     "signature": "(data?: any, role?: string) => Promise<boolean>",
                     "parameters": [{
-                            "tags": [{
-                                    "name": "param",
-                                    "text": "data Any data to emit in the dismiss events."
-                                }],
-                            "text": "Any data to emit in the dismiss events."
+                            "name": "data",
+                            "type": "any",
+                            "docs": "Any data to emit in the dismiss events."
                         }, {
-                            "tags": [{
-                                    "name": "param",
-                                    "text": "role The role of the element that is dismissing the toast.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the toast.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
-                                }],
-                            "text": "The role of the element that is dismissing the toast.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the toast.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
+                            "name": "role",
+                            "type": "string | undefined",
+                            "docs": "The role of the element that is dismissing the toast.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the toast.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
                         }],
                     "references": {
                         "Promise": {