merge release-8.1.1 (#29473)

Issue number: internal

---------

## What is the current behavior?
Several screenshot images were not removed when their e2e test was.

## What is the new behavior?
I ran the following command in `ionic-framework/core` to find all
`*.png` files that did not have a parent `*.e2e.ts` file:

```bash
find ./src/components -iname '*.png' -exec bash -c 'cd "${1%/*}"; 
  shopt -s nullglob; files=(../*.e2e.ts); 
  ((${#files[@]} == 0)) && echo "$1"' _ {} \;
```

I have deleted all of these images.

Co-authored-by: Brandy Carney <brandy@ionic.io>

.github/CODEOWNERS

@@ -12,8 +12,3 @@
 # This should make it easy to add new rules without breaking existing ones.
 
 * @ionic-team/framework
-
-# Utilities
-
-/core/src/utils/gesture/ @liamdebeasi
-/core/src/utils/input-shims/ @liamdebeasi

.github/workflows/actions/test-angular-e2e/action.yml

@@ -29,7 +29,7 @@ runs:
       shell: bash
       working-directory: ./packages/angular/test
     - name: Install Dependencies
-      run: npm install
+      run: npm install --legacy-peer-deps # TODO(FW-6227): Remove legacy-peer-deps flag
       shell: bash
       working-directory: ./packages/angular/test/build/${{ inputs.app }}
     - name: Sync Built Changes

.github/workflows/assign-issues.yml

@@ -13,6 +13,6 @@ jobs:
       - name: 'Auto-assign issue'
         uses: pozil/auto-assign-issue@65947009a243e6b3993edeef4e64df3ca85d760c # v1.14.0
         with:
-          assignees: liamdebeasi, sean-perkins, brandyscarney, thetaPC
+          assignees: brandyscarney, thetaPC
           numOfAssignee: 1
           allowSelfAssign: false

.github/workflows/build.yml

@@ -140,7 +140,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        apps: [ng16, ng17]
+        apps: [ng16, ng17, ng18]
     needs: [build-angular, build-angular-server]
     runs-on: ubuntu-latest
     steps:

.github/workflows/conventional-commit.yml

@@ -0,0 +1,26 @@
+name: PR Conventional Commit Validation
+
+on:
+  pull_request:
+    types: [opened, synchronize, reopened, edited]
+
+jobs:
+  validate-pr-title:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Validate PR title
+        uses:  amannn/action-semantic-pull-request@v5
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          # Configure that a scope must always be provided.
+          requireScope: true
+          # Configure additional validation for the subject based on a regex.
+          # This example ensures the subject doesn't start with an uppercase character.
+          subjectPattern: ^(?![A-Z]).+$
+          # If `subjectPattern` is configured, you can use this property to 
+          # override the default error message that is shown when the pattern 
+          # doesn't match. The variables `subject` and `title` can be used 
+          # within the message.
+          subjectPatternError: |
+            The subject "{subject}" found in the pull request title "{title}" didn't match the configured pattern. Please ensure that the subject doesn't start with an uppercase character.

.github/workflows/stencil-nightly.yml

@@ -150,7 +150,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        apps: [ng16, ng17]
+        apps: [ng16, ng17, ng18]
     needs: [build-angular, build-angular-server]
     runs-on: ubuntu-latest
     steps:

CHANGELOG.md

@@ -3,6 +3,36 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.1.1](https://github.com/ionic-team/ionic-framework/compare/v8.1.0...v8.1.1) (2024-05-08)
+
+
+### Bug Fixes
+
+* **angular:** add formatOptions property to standalone datetime ([#29468](https://github.com/ionic-team/ionic-framework/issues/29468)) ([bb1db52](https://github.com/ionic-team/ionic-framework/commit/bb1db52567e0884a896f9ccd76c27540b52f5e48)), closes [#29464](https://github.com/ionic-team/ionic-framework/issues/29464)
+* **angular:** persist select disabled state in item ([#29448](https://github.com/ionic-team/ionic-framework/issues/29448)) ([dfb72d7](https://github.com/ionic-team/ionic-framework/commit/dfb72d7ea06e28d76069b23eb90c3426181b7c4c)), closes [#29234](https://github.com/ionic-team/ionic-framework/issues/29234)
+* **angular:** set active segment button when dynamically changing items ([#29418](https://github.com/ionic-team/ionic-framework/issues/29418)) ([ee83388](https://github.com/ionic-team/ionic-framework/commit/ee833881da3ecaa0a9153397f0c7e62c1923f19c)), closes [#29414](https://github.com/ionic-team/ionic-framework/issues/29414)
+* **radio:** persist checked state when items are updated in radio-group ([#29457](https://github.com/ionic-team/ionic-framework/issues/29457)) ([7ea14ae](https://github.com/ionic-team/ionic-framework/commit/7ea14ae41eb27f2a58952bd27d91ef4c77bb6a0c)), closes [#29442](https://github.com/ionic-team/ionic-framework/issues/29442)
+
+
+
+
+
+# [8.1.0](https://github.com/ionic-team/ionic-framework/compare/v8.0.2...v8.1.0) (2024-05-01)
+
+
+### Features
+
+* add experimental transition focus manager ([#29400](https://github.com/ionic-team/ionic-framework/issues/29400)) ([5b686ef](https://github.com/ionic-team/ionic-framework/commit/5b686efc1025cd4088c89ef29154311a3d7504ba)), closes [#23650](https://github.com/ionic-team/ionic-framework/issues/23650)
+* **content:** add fixedSlotPlacement prop ([#29233](https://github.com/ionic-team/ionic-framework/issues/29233)) ([90a7e70](https://github.com/ionic-team/ionic-framework/commit/90a7e70a1c827835c18fd5f39d53ab17d286b4a7))
+* **datetime:** pass roles to overlay when dismissing ([#29221](https://github.com/ionic-team/ionic-framework/issues/29221)) ([6945adc](https://github.com/ionic-team/ionic-framework/commit/6945adc3cccabf59a2e640462ab4fd09ade59f6f)), closes [#28298](https://github.com/ionic-team/ionic-framework/issues/28298)
+* **input:** add clearInputIcon property ([#29246](https://github.com/ionic-team/ionic-framework/issues/29246)) ([0f5d1c0](https://github.com/ionic-team/ionic-framework/commit/0f5d1c02d20483d47b6907fec696633cc7634554)), closes [#26974](https://github.com/ionic-team/ionic-framework/issues/26974)
+* **modal, popover:** add ability to temporarily disable focus trapping ([#29379](https://github.com/ionic-team/ionic-framework/issues/29379)) ([7c00351](https://github.com/ionic-team/ionic-framework/commit/7c00351680a955130fa10d25d4439d3cc18db805)), closes [#24646](https://github.com/ionic-team/ionic-framework/issues/24646)
+* **picker:** picker column is easier to select with assistive technology ([#29371](https://github.com/ionic-team/ionic-framework/issues/29371)) ([e38e2e4](https://github.com/ionic-team/ionic-framework/commit/e38e2e4d35076fa42241158568fb0ed50094fcbf)), closes [#25221](https://github.com/ionic-team/ionic-framework/issues/25221)
+
+
+
+
+
 ## [8.0.2](https://github.com/ionic-team/ionic-framework/compare/v8.0.1...v8.0.2) (2024-05-01)
 
 

core/CHANGELOG.md

@@ -3,6 +3,35 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.1.1](https://github.com/ionic-team/ionic-framework/compare/v8.1.0...v8.1.1) (2024-05-08)
+
+
+### Bug Fixes
+
+* **angular:** persist select disabled state in item ([#29448](https://github.com/ionic-team/ionic-framework/issues/29448)) ([dfb72d7](https://github.com/ionic-team/ionic-framework/commit/dfb72d7ea06e28d76069b23eb90c3426181b7c4c)), closes [#29234](https://github.com/ionic-team/ionic-framework/issues/29234)
+* **angular:** set active segment button when dynamically changing items ([#29418](https://github.com/ionic-team/ionic-framework/issues/29418)) ([ee83388](https://github.com/ionic-team/ionic-framework/commit/ee833881da3ecaa0a9153397f0c7e62c1923f19c)), closes [#29414](https://github.com/ionic-team/ionic-framework/issues/29414)
+* **radio:** persist checked state when items are updated in radio-group ([#29457](https://github.com/ionic-team/ionic-framework/issues/29457)) ([7ea14ae](https://github.com/ionic-team/ionic-framework/commit/7ea14ae41eb27f2a58952bd27d91ef4c77bb6a0c)), closes [#29442](https://github.com/ionic-team/ionic-framework/issues/29442)
+
+
+
+
+
+# [8.1.0](https://github.com/ionic-team/ionic-framework/compare/v8.0.2...v8.1.0) (2024-05-01)
+
+
+### Features
+
+* add experimental transition focus manager ([#29400](https://github.com/ionic-team/ionic-framework/issues/29400)) ([5b686ef](https://github.com/ionic-team/ionic-framework/commit/5b686efc1025cd4088c89ef29154311a3d7504ba)), closes [#23650](https://github.com/ionic-team/ionic-framework/issues/23650)
+* **content:** add fixedSlotPlacement prop ([#29233](https://github.com/ionic-team/ionic-framework/issues/29233)) ([90a7e70](https://github.com/ionic-team/ionic-framework/commit/90a7e70a1c827835c18fd5f39d53ab17d286b4a7))
+* **datetime:** pass roles to overlay when dismissing ([#29221](https://github.com/ionic-team/ionic-framework/issues/29221)) ([6945adc](https://github.com/ionic-team/ionic-framework/commit/6945adc3cccabf59a2e640462ab4fd09ade59f6f)), closes [#28298](https://github.com/ionic-team/ionic-framework/issues/28298)
+* **input:** add clearInputIcon property ([#29246](https://github.com/ionic-team/ionic-framework/issues/29246)) ([0f5d1c0](https://github.com/ionic-team/ionic-framework/commit/0f5d1c02d20483d47b6907fec696633cc7634554)), closes [#26974](https://github.com/ionic-team/ionic-framework/issues/26974)
+* **modal, popover:** add ability to temporarily disable focus trapping ([#29379](https://github.com/ionic-team/ionic-framework/issues/29379)) ([7c00351](https://github.com/ionic-team/ionic-framework/commit/7c00351680a955130fa10d25d4439d3cc18db805)), closes [#24646](https://github.com/ionic-team/ionic-framework/issues/24646)
+* **picker:** picker column is easier to select with assistive technology ([#29371](https://github.com/ionic-team/ionic-framework/issues/29371)) ([e38e2e4](https://github.com/ionic-team/ionic-framework/commit/e38e2e4d35076fa42241158568fb0ed50094fcbf)), closes [#25221](https://github.com/ionic-team/ionic-framework/issues/25221)
+
+
+
+
+
 ## [8.0.2](https://github.com/ionic-team/ionic-framework/compare/v8.0.1...v8.0.2) (2024-05-01)
 
 

core/api.txt

@@ -361,6 +361,7 @@ ion-col,css-prop,--ion-grid-columns
 
 ion-content,shadow
 ion-content,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
+ion-content,prop,fixedSlotPlacement,"after" | "before",'after',false,false
 ion-content,prop,forceOverscroll,boolean | undefined,undefined,false,false
 ion-content,prop,fullscreen,boolean,false,false,false
 ion-content,prop,scrollEvents,boolean,false,false,false
@@ -553,6 +554,7 @@ ion-input,prop,autocomplete,"name" | "email" | "tel" | "url" | "on" | "off" | "h
 ion-input,prop,autocorrect,"off" | "on",'off',false,false
 ion-input,prop,autofocus,boolean,false,false,false
 ion-input,prop,clearInput,boolean,false,false,false
+ion-input,prop,clearInputIcon,string | undefined,undefined,false,false
 ion-input,prop,clearOnEdit,boolean | undefined,undefined,false,false
 ion-input,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-input,prop,counter,boolean,false,false,false
@@ -829,6 +831,7 @@ ion-modal,prop,backdropDismiss,boolean,true,false,false
 ion-modal,prop,breakpoints,number[] | undefined,undefined,false,false
 ion-modal,prop,canDismiss,((data?: any, role?: string | undefined) => Promise<boolean>) | boolean,true,false,false
 ion-modal,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
+ion-modal,prop,focusTrap,boolean,true,false,false
 ion-modal,prop,handle,boolean | undefined,undefined,false,false
 ion-modal,prop,handleBehavior,"cycle" | "none" | undefined,'none',false,false
 ion-modal,prop,htmlAttributes,undefined | { [key: string]: any; },undefined,false,false
@@ -977,6 +980,7 @@ ion-popover,prop,componentProps,undefined | { [key: string]: any; },undefined,fa
 ion-popover,prop,dismissOnSelect,boolean,false,false,false
 ion-popover,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-popover,prop,event,any,undefined,false,false
+ion-popover,prop,focusTrap,boolean,true,false,false
 ion-popover,prop,htmlAttributes,undefined | { [key: string]: any; },undefined,false,false
 ion-popover,prop,isOpen,boolean,false,false,false
 ion-popover,prop,keepContentsMounted,boolean,false,false,false

core/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@ionic/core",
-  "version": "8.0.2",
+  "version": "8.1.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/core",
-      "version": "8.0.2",
+      "version": "8.1.1",
       "license": "MIT",
       "dependencies": {
         "@stencil/core": "^4.17.2",

core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "8.0.2",
+  "version": "8.1.1",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",

core/scripts/testing/styles.css

@@ -48,3 +48,23 @@ html.ios.ios {
   --ion-font-family: -apple-system, BlinkMacSystemFont, "iosTestingFont", sans-serif;
   font-family: -apple-system, BlinkMacSystemFont, "iosTestingFont", sans-serif;
 }
+
+ion-content button,
+main button {
+  display: inline-block;
+  width: auto;
+  clear: both;
+  padding: 12px 8px;
+  font-size: 1em;
+  background: #008080;
+  border: 1px solid #005555;
+  color: #fff;
+  border-radius: 4px;
+  margin: 8px 0;
+}
+
+ion-content button.expand,
+main button.expand {
+  display: block;
+  width: 100%;
+}

core/src/components.d.ts

@@ -762,6 +762,10 @@ export namespace Components {
           * 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"?: Color;
+        /**
+          * Controls where the fixed content is placed relative to the main content in the DOM. This can be used to control the order in which fixed elements receive keyboard focus. For example, if a FAB in the fixed slot should receive keyboard focus before the main page content, set this property to `'before'`.
+         */
+        "fixedSlotPlacement": 'after' | 'before';
         /**
           * If `true` and the content does not cause an overflow scroll, the scroll interaction will cause a bounce. If the content exceeds the bounds of ionContent, nothing will change. Note, this does not disable the system bounce on iOS. That is an OS level setting.
          */
@@ -1162,6 +1166,10 @@ export namespace Components {
           * If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input.
          */
         "clearInput": boolean;
+        /**
+          * The icon to use for the clear button. Only applies when `clearInput` is set to `true`.
+         */
+        "clearInputIcon"?: string;
         /**
           * If `true`, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `"password"`, `false` for all other types.
          */
@@ -1715,6 +1723,10 @@ export namespace Components {
           * Animation to use when the modal is presented.
          */
         "enterAnimation"?: AnimationBuilder;
+        /**
+          * If `true`, focus will not be allowed to move outside of this overlay. If `false`, focus will be allowed to move outside of the overlay.  In most scenarios this property should remain set to `true`. Setting this property to `false` can cause severe accessibility issues as users relying on assistive technologies may be able to move focus into a confusing state. We recommend only setting this to `false` when absolutely necessary.  Developers may want to consider disabling focus trapping if this overlay presents a non-Ionic overlay from a 3rd party library. Developers would disable focus trapping on the Ionic overlay when presenting the 3rd party overlay and then re-enable focus trapping when dismissing the 3rd party overlay and moving focus back to the Ionic overlay.
+         */
+        "focusTrap": boolean;
         /**
           * Returns the current breakpoint of a sheet style modal
          */
@@ -2131,6 +2143,10 @@ export namespace Components {
           * The event to pass to the popover animation.
          */
         "event": any;
+        /**
+          * If `true`, focus will not be allowed to move outside of this overlay. If `false`, focus will be allowed to move outside of the overlay.  In most scenarios this property should remain set to `true`. Setting this property to `false` can cause severe accessibility issues as users relying on assistive technologies may be able to move focus into a confusing state. We recommend only setting this to `false` when absolutely necessary.  Developers may want to consider disabling focus trapping if this overlay presents a non-Ionic overlay from a 3rd party library. Developers would disable focus trapping on the Ionic overlay when presenting the 3rd party overlay and then re-enable focus trapping when dismissing the 3rd party overlay and moving focus back to the Ionic overlay.
+         */
+        "focusTrap": boolean;
         "getParentPopover": () => Promise<HTMLIonPopoverElement | null>;
         "hasController": boolean;
         /**
@@ -5478,6 +5494,10 @@ declare namespace LocalJSX {
           * 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"?: Color;
+        /**
+          * Controls where the fixed content is placed relative to the main content in the DOM. This can be used to control the order in which fixed elements receive keyboard focus. For example, if a FAB in the fixed slot should receive keyboard focus before the main page content, set this property to `'before'`.
+         */
+        "fixedSlotPlacement"?: 'after' | 'before';
         /**
           * If `true` and the content does not cause an overflow scroll, the scroll interaction will cause a bounce. If the content exceeds the bounds of ionContent, nothing will change. Note, this does not disable the system bounce on iOS. That is an OS level setting.
          */
@@ -5886,6 +5906,10 @@ declare namespace LocalJSX {
           * If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input.
          */
         "clearInput"?: boolean;
+        /**
+          * The icon to use for the clear button. Only applies when `clearInput` is set to `true`.
+         */
+        "clearInputIcon"?: string;
         /**
           * If `true`, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `"password"`, `false` for all other types.
          */
@@ -6441,6 +6465,10 @@ declare namespace LocalJSX {
           * Animation to use when the modal is presented.
          */
         "enterAnimation"?: AnimationBuilder;
+        /**
+          * If `true`, focus will not be allowed to move outside of this overlay. If `false`, focus will be allowed to move outside of the overlay.  In most scenarios this property should remain set to `true`. Setting this property to `false` can cause severe accessibility issues as users relying on assistive technologies may be able to move focus into a confusing state. We recommend only setting this to `false` when absolutely necessary.  Developers may want to consider disabling focus trapping if this overlay presents a non-Ionic overlay from a 3rd party library. Developers would disable focus trapping on the Ionic overlay when presenting the 3rd party overlay and then re-enable focus trapping when dismissing the 3rd party overlay and moving focus back to the Ionic overlay.
+         */
+        "focusTrap"?: boolean;
         /**
           * The horizontal line that displays at the top of a sheet modal. It is `true` by default when setting the `breakpoints` and `initialBreakpoint` properties.
          */
@@ -6787,6 +6815,10 @@ declare namespace LocalJSX {
           * The event to pass to the popover animation.
          */
         "event"?: any;
+        /**
+          * If `true`, focus will not be allowed to move outside of this overlay. If `false`, focus will be allowed to move outside of the overlay.  In most scenarios this property should remain set to `true`. Setting this property to `false` can cause severe accessibility issues as users relying on assistive technologies may be able to move focus into a confusing state. We recommend only setting this to `false` when absolutely necessary.  Developers may want to consider disabling focus trapping if this overlay presents a non-Ionic overlay from a 3rd party library. Developers would disable focus trapping on the Ionic overlay when presenting the 3rd party overlay and then re-enable focus trapping when dismissing the 3rd party overlay and moving focus back to the Ionic overlay.
+         */
+        "focusTrap"?: boolean;
         "hasController"?: boolean;
         /**
           * Additional attributes to pass to the popover.

core/src/components/action-sheet/test/a11y/index.html

@@ -19,14 +19,14 @@
     <main class="ion-padding">
       <h1>Action Sheet - A11y</h1>
 
-      <ion-button id="bothHeaders" onclick="presentBothHeaders()">Both Headers</ion-button>
-      <ion-button id="subHeaderOnly" onclick="presentSubHeaderOnly()">Subheader Only</ion-button>
-      <ion-button id="noHeaders" onclick="presentNoHeaders()">No Headers</ion-button>
-      <ion-button id="customAria" onclick="presentCustomAria()">Custom Aria</ion-button>
-      <ion-button id="ariaLabelButton" onclick="presentAriaLabelButton()">Aria Label Button</ion-button>
-      <ion-button id="ariaLabelCancelButton" onclick="presentAriaLabelCancelButton()"
-        >Aria Label Cancel Button</ion-button
-      >
+      <button class="expand" id="bothHeaders" onclick="presentBothHeaders()">Both Headers</button>
+      <button class="expand" id="subHeaderOnly" onclick="presentSubHeaderOnly()">Subheader Only</button>
+      <button class="expand" id="noHeaders" onclick="presentNoHeaders()">No Headers</button>
+      <button class="expand" id="customAria" onclick="presentCustomAria()">Custom Aria</button>
+      <button class="expand" id="ariaLabelButton" onclick="presentAriaLabelButton()">Aria Label Button</button>
+      <button class="expand" id="ariaLabelCancelButton" onclick="presentAriaLabelCancelButton()">
+        Aria Label Cancel Button
+      </button>
     </main>
 
     <script>

core/src/components/action-sheet/test/basic/index.html

@@ -27,24 +27,18 @@
       </ion-header>
 
       <ion-content class="ion-padding">
-        <ion-button expand="block" id="basic" onclick="presentBasic()">Basic</ion-button>
-        <ion-button expand="block" id="alertFromActionSheet" onclick="presentAlert()"
-          >Alert from Action Sheet</ion-button
-        >
-        <ion-button expand="block" id="cancelOnly" onclick="presentCancelOnly()">Cancel Only</ion-button>
-        <ion-button expand="block" id="custom" onclick="presentWithCssClass()">Custom CSS Class</ion-button>
-        <ion-button expand="block" id="icons" onclick="presentIcons()">Icons</ion-button>
-        <ion-button expand="block" id="noBackdropDismiss" onclick="presentNoBackdropDismiss()"
-          >No Backdrop Dismiss</ion-button
-        >
-        <ion-button expand="block" id="scrollableOptions" onclick="presentScroll()">Scrollable Options</ion-button>
-        <ion-button expand="block" id="scrollWithoutCancel" onclick="presentScrollNoCancel()"
-          >Scroll Without Cancel</ion-button
-        >
-        <ion-button expand="block" id="customBackdrop" onclick="presentWithCssClass('custom-backdrop')"
-          >Custom Backdrop Opacity</ion-button
-        >
-        <ion-button expand="block" id="buttonData" onclick="presentWithButtonData()">Button data</ion-button>
+        <button class="expand" id="basic" onclick="presentBasic()">Basic</button>
+        <button class="expand" id="alertFromActionSheet" onclick="presentAlert()">Alert from Action Sheet</button>
+        <button class="expand" id="cancelOnly" onclick="presentCancelOnly()">Cancel Only</button>
+        <button class="expand" id="custom" onclick="presentWithCssClass()">Custom CSS Class</button>
+        <button class="expand" id="icons" onclick="presentIcons()">Icons</button>
+        <button class="expand" id="noBackdropDismiss" onclick="presentNoBackdropDismiss()">No Backdrop Dismiss</button>
+        <button class="expand" id="scrollableOptions" onclick="presentScroll()">Scrollable Options</button>
+        <button class="expand" id="scrollWithoutCancel" onclick="presentScrollNoCancel()">Scroll Without Cancel</button>
+        <button class="expand" id="customBackdrop" onclick="presentWithCssClass('custom-backdrop')">
+          Custom Backdrop Opacity
+        </button>
+        <button class="expand" id="buttonData" onclick="presentWithButtonData()">Button data</button>
       </ion-content>
     </ion-app>
 

core/src/components/action-sheet/test/is-open/index.html

@@ -47,11 +47,11 @@
         <div class="grid">
           <div class="grid-item">
             <h2>Default</h2>
-            <ion-button id="default" onclick="openActionSheet()">Open ActionSheet</ion-button>
+            <button id="default" onclick="openActionSheet()">Open ActionSheet</button>
           </div>
           <div class="grid-item">
             <h2>Open, then close after 500ms</h2>
-            <ion-button id="timeout" onclick="openActionSheet(500)">Open ActionSheet</ion-button>
+            <button id="timeout" onclick="openActionSheet(500)">Open ActionSheet</button>
           </div>
         </div>
 

core/src/components/action-sheet/test/standalone/index.html

@@ -18,28 +18,16 @@
     window.actionSheetController = actionSheetController;
   </script>
   <body>
-    <button id="basic" onclick="presentBasic()">Basic</button>
-    <button id="noBackdropDismiss" onclick="presentNoBackdropDismiss()">No Backdrop Dismiss</button>
-    <button id="alertFromActionSheet" onclick="presentAlert()">Alert from Action Sheet</button>
-    <button id="scrollableOptions" onclick="presentScroll()">Scrollable Options</button>
-    <button id="scrollWithoutCancel" onclick="presentScrollNoCancel()">Scroll Without Cancel</button>
-    <button id="cancelOnly" onclick="presentCancelOnly()">Cancel Only</button>
-    <button id="icons" onclick="presentIcons()">Icons</button>
-    <button id="cssClass" onclick="presentWithCssClass()">Custom CSS Class</button>
-
-    <style>
-      body > button {
-        display: block;
-        clear: both;
-        width: 100%;
-        padding: 12px 8px;
-        font-size: 1em;
-        background: #f8f8f8;
-        border: 1px solid #eee;
-        border-radius: 4px;
-        margin-bottom: 8px;
-      }
-    </style>
+    <main>
+      <button class="expand" id="basic" onclick="presentBasic()">Basic</button>
+      <button class="expand" id="noBackdropDismiss" onclick="presentNoBackdropDismiss()">No Backdrop Dismiss</button>
+      <button class="expand" id="alertFromActionSheet" onclick="presentAlert()">Alert from Action Sheet</button>
+      <button class="expand" id="scrollableOptions" onclick="presentScroll()">Scrollable Options</button>
+      <button class="expand" id="scrollWithoutCancel" onclick="presentScrollNoCancel()">Scroll Without Cancel</button>
+      <button class="expand" id="cancelOnly" onclick="presentCancelOnly()">Cancel Only</button>
+      <button class="expand" id="icons" onclick="presentIcons()">Icons</button>
+      <button class="expand" id="cssClass" onclick="presentWithCssClass()">Custom CSS Class</button>
+    </main>
 
     <script>
       window.addEventListener('ionActionSheetDidDismiss', function (e) {

core/src/components/action-sheet/test/translucent/index.html

@@ -12,6 +12,50 @@
     <script src="../../../../../scripts/testing/scripts.js"></script>
     <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+
+    <style>
+      f {
+        display: block;
+        width: 100%;
+        height: 150px;
+      }
+
+      .red {
+        background-color: #ea445a;
+      }
+
+      .green {
+        background-color: #76d672;
+      }
+
+      .blue {
+        background-color: #3478f6;
+      }
+
+      .yellow {
+        background-color: #ffff80;
+      }
+
+      .pink {
+        background-color: #ff6b86;
+      }
+
+      .purple {
+        background-color: #7e34f6;
+      }
+
+      .black {
+        background-color: #000;
+      }
+
+      .fuchsia {
+        background-color: #cc00ff;
+      }
+
+      .orange {
+        background-color: #f69234;
+      }
+    </style>
   </head>
   <script type="module">
     import { actionSheetController } from '../../../../dist/ionic/index.esm.js';
@@ -26,18 +70,12 @@
       </ion-header>
 
       <ion-content class="ion-padding">
-        <ion-button expand="block" id="basic" onclick="presentBasic()">Basic</ion-button>
-        <ion-button expand="block" id="noBackdropDismiss" onclick="presentNoBackdropDismiss()"
-          >No Backdrop Dismiss</ion-button
-        >
-        <ion-button expand="block" id="alertFromActionSheet" onclick="presentAlert()"
-          >Alert from Action Sheet</ion-button
-        >
-        <ion-button expand="block" id="scrollableOptions" onclick="presentScroll()">Scrollable Options</ion-button>
-        <ion-button expand="block" id="scrollWithoutCancel" onclick="presentScrollNoCancel()"
-          >Scroll Without Cancel</ion-button
-        >
-        <ion-button expand="block" id="cancelOnly" onclick="presentCancelOnly()">Cancel Only</ion-button>
+        <button class="expand" id="basic" onclick="presentBasic()">Basic</button>
+        <button class="expand" id="noBackdropDismiss" onclick="presentNoBackdropDismiss()">No Backdrop Dismiss</button>
+        <button class="expand" id="alertFromActionSheet" onclick="presentAlert()">Alert from Action Sheet</button>
+        <button class="expand" id="scrollableOptions" onclick="presentScroll()">Scrollable Options</button>
+        <button class="expand" id="scrollWithoutCancel" onclick="presentScrollNoCancel()">Scroll Without Cancel</button>
+        <button class="expand" id="cancelOnly" onclick="presentCancelOnly()">Cancel Only</button>
 
         <ion-grid>
           <ion-row>
@@ -345,49 +383,5 @@
         });
       }
     </script>
-
-    <style>
-      f {
-        display: block;
-        width: 100%;
-        height: 150px;
-      }
-
-      .red {
-        background-color: #ea445a;
-      }
-
-      .green {
-        background-color: #76d672;
-      }
-
-      .blue {
-        background-color: #3478f6;
-      }
-
-      .yellow {
-        background-color: #ffff80;
-      }
-
-      .pink {
-        background-color: #ff6b86;
-      }
-
-      .purple {
-        background-color: #7e34f6;
-      }
-
-      .black {
-        background-color: #000;
-      }
-
-      .fuchsia {
-        background-color: #cc00ff;
-      }
-
-      .orange {
-        background-color: #f69234;
-      }
-    </style>
   </body>
 </html>

core/src/components/action-sheet/test/trigger/index.html

@@ -47,11 +47,11 @@
         <div class="grid">
           <div class="grid-item">
             <h2>Default</h2>
-            <ion-button id="default">Open ActionSheet</ion-button>
+            <button id="default">Open ActionSheet</button>
           </div>
           <div class="grid-item">
             <h2>Open, then close after 500ms</h2>
-            <ion-button id="timeout">Open ActionSheet</ion-button>
+            <button id="timeout">Open ActionSheet</button>
           </div>
         </div>
 

core/src/components/alert/test/a11y/index.html

@@ -9,19 +9,6 @@
     <script src="../../../../../scripts/testing/scripts.js"></script>
     <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
-    <style>
-      main > button {
-        display: block;
-        clear: both;
-        width: 100%;
-        padding: 12px 8px;
-        font-size: 1em;
-        background: #f8f8f8;
-        border: 1px solid #eee;
-        border-radius: 4px;
-        margin-bottom: 8px;
-      }
-    </style>
   </head>
   <script type="module">
     import { alertController } from '../../../../dist/ionic/index.esm.js';
@@ -32,13 +19,13 @@
     <main class="ion-padding">
       <h1>Alert - A11y</h1>
 
-      <button id="bothHeaders" onclick="presentBothHeaders()">Both Headers</button>
-      <button id="subHeaderOnly" onclick="presentSubHeaderOnly()">Subheader Only</button>
-      <button id="noHeaders" onclick="presentNoHeaders()">No Headers</button>
-      <button id="noMessage" onclick="presentNoMessage()">No Message</button>
-      <button id="customAria" onclick="presentCustomAria()">Custom Aria</button>
-      <button id="ariaLabelButton" onclick="presentAriaLabelButton()">Aria Label Button</button>
-      <button id="checkbox" onclick="presentAlertCheckbox()">Checkbox</button>
+      <button class="expand" id="bothHeaders" onclick="presentBothHeaders()">Both Headers</button>
+      <button class="expand" id="subHeaderOnly" onclick="presentSubHeaderOnly()">Subheader Only</button>
+      <button class="expand" id="noHeaders" onclick="presentNoHeaders()">No Headers</button>
+      <button class="expand" id="noMessage" onclick="presentNoMessage()">No Message</button>
+      <button class="expand" id="customAria" onclick="presentCustomAria()">Custom Aria</button>
+      <button class="expand" id="ariaLabelButton" onclick="presentAriaLabelButton()">Aria Label Button</button>
+      <button class="expand" id="checkbox" onclick="presentAlertCheckbox()">Checkbox</button>
     </main>
 
     <script>