@aurodesignsystem/auro-dialog 3.1.8 → 4.0.0-rc-88.1

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+# [4.0.0-rc-88.1](https://github.com/AlaskaAirlines/auro-dialog/compare/v3.1.8...v4.0.0-rc-88.1) (2025-10-21)
+
+
+* feat!: upgrade package tooling to use auro-cli ([8c9303d](https://github.com/AlaskaAirlines/auro-dialog/commit/8c9303dfd9cd89003fcb8b7db83ed683a067ee6a)), closes [AlaskaAirlines/auro-cli#108](https://github.com/AlaskaAirlines/auro-cli/issues/108) [AlaskaAirlines/auro-cli#109](https://github.com/AlaskaAirlines/auro-cli/issues/109) [AlaskaAirlines/auro-cli#110](https://github.com/AlaskaAirlines/auro-cli/issues/110) [AlaskaAirlines/auro-cli#111](https://github.com/AlaskaAirlines/auro-cli/issues/111)
+
+
+### Features
+
+* add `appearance` deprecated `ondark` [#81](https://github.com/AlaskaAirlines/auro-dialog/issues/81) ([0bbc2b1](https://github.com/AlaskaAirlines/auro-dialog/commit/0bbc2b1057595a08a57b4f91371a53d0800f5a5c))
+* add slot for close button aria label [#86](https://github.com/AlaskaAirlines/auro-dialog/issues/86) ([f46da4e](https://github.com/AlaskaAirlines/auro-dialog/commit/f46da4e278747952aefbd09b908ab9a88e64faed))
+
+
+### BREAKING CHANGES
+
+* Package exports have changed. To access the component class add /class to the end of the import. See "exports" in the package.json for more details.
+
 # Semantic Release Automated Changelog
 
 ## [3.1.8](https://github.com/AlaskaAirlines/auro-dialog/compare/v3.1.7...v3.1.8) (2025-09-29)

package/NOTICE

@@ -0,0 +1,2 @@
+Alaska Airlines Auro Design System
+Copyright 2024 Alaska Airlines, Inc. or its affiliates. All Rights Reserved.

package/README.md

@@ -4,8 +4,8 @@ The README.md file is a compiled document. No edits should be made directly to t
 README.md is created by running `npm run build:docs`.
 
 This file is generated based on a template fetched from
-`https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/README_updated_paths.md`
-and copied to `./componentDocs/README.md` each time the the docs are compiled.
+`https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/README.md`
+and copied to `./componentDocs/README.md` each time the docs are compiled.
 
 The following sections are editable by making changes to the following files:
 
@@ -34,14 +34,14 @@ Auro holds the opinions of the [Nielsen Norman Group](https://www.nngroup.com/ar
 
 ## UI development browser support
 
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/browserSupport.md) -->
+<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/browserSupport.md) -->
 For the most up to date information on [UI development browser support](https://auro.alaskaair.com/support/browsersSupport)
 
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## Install
 
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/componentInstall_esm.md) -->
+<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/componentInstall.md) -->
 [![Build Status](https://img.shields.io/github/actions/workflow/status/AlaskaAirlines/auro-dialog/testPublish.yml?style=for-the-badge)](https://github.com/AlaskaAirlines/auro-dialog/actions/workflows/testPublish.yml)
 [![See it on NPM!](https://img.shields.io/npm/v/@aurodesignsystem/auro-dialog?style=for-the-badge&color=orange)](https://www.npmjs.com/package/@aurodesignsystem/auro-dialog)
 [![License](https://img.shields.io/npm/l/@aurodesignsystem/auro-dialog?color=blue&style=for-the-badge)](https://www.apache.org/licenses/LICENSE-2.0)
@@ -51,24 +51,22 @@ For the most up to date information on [UI development browser support](https://
 $ npm i @aurodesignsystem/auro-dialog
 ```
 
-Installing as a direct, dev or peer dependency is up to the user installing the package. If you are unsure as to what type of dependency you should use, consider reading this [stack overflow](https://stackoverflow.com/questions/18875674/whats-the-difference-between-dependencies-devdependencies-and-peerdependencies) answer.
-
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ### Design Token CSS Custom Property dependency
 
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/designTokens.md) -->
+<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/development/designTokens.md) -->
 The use of any Auro custom element has a dependency on the [Auro Design Tokens](https://auro.alaskaair.com/getting-started/developers/design-tokens).
 
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ### Define dependency in project component
 
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/componentImportDescription.md) -->
+<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/componentImportDescription.md) -->
 Defining the component dependency within each component that is using the `<auro-dialog>` component.
 
 <!-- AURO-GENERATED-CONTENT:END -->
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/componentImport.md) -->
+<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/componentImport.md) -->
 
 ```js
 import "@aurodesignsystem/auro-dialog";
@@ -103,23 +101,13 @@ import "@aurodesignsystem/auro-dialog";
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 
-## Install bundled assets from CDN
-
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/bundleInstallDescription.md) -->
-In cases where the project is not able to process JS assets, there are pre-processed assets available for use. See -- `auro-dialog__bundled.js` for modern browsers. Legacy browsers such as IE11 are no longer supported.
-
-**WARNING!** When installing into your application environment, DO NOT use `@latest` for the requested version. Risks include unknown MAJOR version releases and instant adoption of any new features and possible bugs without developer knowledge. The `@latest` wildcard should NEVER be used for production customer-facing applications. You have been warned.
+## Use CDN
 
-<!-- AURO-GENERATED-CONTENT:END -->
-
-### Bundle example code
+<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/bundleInstallDescription.md) -->
+In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/bundleUseModBrowsers.md) -->
-
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@/dist/auro-classic/CSSCustomProperties.css" />
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@/dist/bundled/essentials.css" />
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-dialog@3.1.8/dist/auro-dialog__bundled.js" type="module"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-dialog@latest/+esm"></script>
 ```
 
 <!-- AURO-GENERATED-CONTENT:END -->
@@ -167,7 +155,7 @@ The `<auro-dialog>` component should be used in situations where users may:
 
 ## Development
 
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/developmentDescription.md) -->
+<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/development/developmentDescription.md) -->
 In order to develop against this project, if you are not part of the core team, you will be required to fork the project prior to submitting a pull request.
 
 Please be sure to review the [contribution guidelines](https://auro.alaskaair.com/contributing) for this project. Please make sure to **pay special attention** to the **conventional commits** section of the document.
@@ -176,42 +164,20 @@ Please be sure to review the [contribution guidelines](https://auro.alaskaair.co
 
 ### Start development environment
 
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/localhost.md) -->
+<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/development/localhost.md) -->
 Once the project has been cloned to your local resource and you have installed all the dependencies you will need to open a shell session to run the **dev server**.
 
 ```shell
 $ npm run dev
 ```
 
-Open [localhost:8000](http://localhost:8000/)
-
-If running separate sessions is preferred, please run the following commands in individual terminal shells.
-
-```shell
-$ npm run build:watch
-
-$ npm run serve
-```
-
-<!-- AURO-GENERATED-CONTENT:END -->
+Open [localhost:8000](http://localhost:8000/)
 
-### API generation
-
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/api.md) -->
-The custom element API file is generated in the build and committed back to the repo with a version change. If the API doc has changed without a version change, author's are to run `npm run build:api` to generate the doc and commit to version control.
-
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ### Testing
 
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/testing.md) -->
-Automated tests are required for every Auro component. See `.\test\auro-dialog.test.js` for the tests for this component. Run `npm test` to run the tests and check code coverage. Tests must pass and meet a certain coverage threshold to commit. See [the testing documentation](https://auro.alaskaair.com/support/tests) for more details.
-
-<!-- AURO-GENERATED-CONTENT:END -->
-
-### Bundled assets
-
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/bundles.md) -->
-Bundled assets are only generated in the remote and not merged back to this repo. To review and/or test a bundled asset locally, run `$ npm run bundler` to generate assets.
+<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/development/testing.md) -->
+Automated tests are required for every Auro component. See `.\test\auro-dialog.test.js` for the tests for this component. Run `npm run test` to run the tests and check code coverage. Tests must pass and meet a certain coverage threshold to commit. See [the testing documentation](https://auro.alaskaair.com/support/tests) for more details.
 
 <!-- AURO-GENERATED-CONTENT:END -->

package/demo/api.html

@@ -0,0 +1,64 @@
+<!--
+  Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+  See LICENSE in the project root for license information.
+
+  HTML in this document is standardized and NOT to be edited.
+  All demo code should be added/edited in ./demo/api.md
+
+  With the exception of adding custom elements if needed for the demo.
+
+  ----------------------- DO NOT EDIT -----------------------------
+
+-->
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Auro Web Component Demo | auro-dialog</title>
+
+    <!-- Prism.js Stylesheet -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
+
+    <!-- Legacy reference is still needed to support auro-dialog's use of legacy token values at this time -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
+
+    <!-- Design Token Alaska Theme -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
+    
+    <!-- Webcore Stylesheet Alaska Theme -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
+    
+    <!-- Demo Specific Styles -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
+</head>
+  <body class="auro-markdown">
+    <main></main>
+
+    <script type="module">
+      import 'https://cdn.jsdelivr.net/npm/marked@latest/marked.min.js';
+      import 'https://cdn.jsdelivr.net/npm/prismjs@latest/prism.js';
+      fetch('./api.md')
+        .then((response) => response.text())
+        .then((text) => {
+          const rawHtml = marked.parse(text);
+          document.querySelector('main').innerHTML = rawHtml;
+          Prism.highlightAll();
+        });
+    </script>
+    <script type="module" data-demo-script="true">
+      import { initExamples } from './api.min.js';
+      initExamples();
+    </script>
+
+    <!-- If additional elements are needed for the demo, add them here. -->
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-menu@latest/dist/auro-menu__bundled.js" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-combobox@latest/dist/auro-combobox__bundled.js" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/dist/auro-hyperlink__bundled.js" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-popover@latest/dist/auro-popover__bundled.js" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/dist/auro-button__bundled.js" type="module"></script>
+  </body>
+</html>

package/demo/api.js

@@ -1,15 +1,16 @@
-import { initBasicExample } from "../apiExamples/basic";
 import { initAccessibilityExample } from "../apiExamples/accessibility";
+import { initBasicExample } from "../apiExamples/basic";
 import { initDecoupledExample } from "../apiExamples/decoupled";
 import { initEditCloseButtonExample } from "../apiExamples/editCloseButton";
 import { initModalExample } from "../apiExamples/modal";
 import { initPopoverAndDropdownExample } from "../apiExamples/popoverAndDropdown";
 import { initSizeOptionsExample } from "../apiExamples/sizeOptions";
-import { AuroDialog } from '../src/auro-dialog.js';
+import { initAriaLabelSlotExample } from "../apiExamples/ariaLabelSlot";
 
-AuroDialog.register();
+import "../src/registered"
 
 export function initExamples(initCount) {
+  // biome-ignore lint/style/noParameterAssign: legacy error handling
   initCount = initCount || 0;
 
   try {
@@ -20,7 +21,8 @@ export function initExamples(initCount) {
     initModalExample();
     initPopoverAndDropdownExample();
     initSizeOptionsExample();
-  } catch (err) {
+    initAriaLabelSlotExample();
+  } catch (_err) {
     if (initCount <= 20) {
       // setTimeout handles issue where content is sometimes loaded after the functions get called
       setTimeout(() => {

package/demo/api.md

@@ -10,17 +10,18 @@ The auro-dialog appears above the page and requires the user's attention.
 | Attribute | Type      | Description                                      |
 |-----------|-----------|--------------------------------------------------|
 | [md](#md)      | `Boolean` | Sets dialog box to medium style. Adding both md and lg will set the dialog to md for desktop and lg for mobile. |
-| [onDark](#onDark)  | `Boolean` | Sets close icon to white for dark backgrounds    |
+| [onDark](#onDark)  | `Boolean` | DEPRECATED - use `close-button-appearance="inverse" instead. |
 | [sm](#sm)      | `Boolean` | Sets dialog box to small style. Adding both sm and lg will set the dialog to sm for desktop and lg for mobile. |
 
 ## Properties
 
-| Property         | Attribute     | Type          | Default | Description                                      |
-|------------------|---------------|---------------|---------|--------------------------------------------------|
-| [modal](#modal)          | `modal`       | `Boolean`     | false   | Modal dialog restricts the user to take an action (no default close actions) |
-| [open](#open)           | `open`        | `Boolean`     |         | Sets state of dialog to open                     |
-| [triggerElement](#triggerElement) |               | `HTMLElement` |         | The element to focus when the dialog is closed. If not set, defaults to the value of document.activeElement when the dialog is opened. |
-| [unformatted](#unformatted)    | `unformatted` | `Boolean`     | false   | Unformatted dialog window, edge-to-edge fill for content |
+| Property                | Attribute                 | Type          | Default     | Description                                      |
+|-------------------------|---------------------------|---------------|-------------|--------------------------------------------------|
+| [closeButtonAppearance](#closeButtonAppearance) | `close-button-appearance` | `string`      | "'default'" | Defines whether the close button should be light colored for use on dark backgrounds. |
+| [modal](#modal)                 | `modal`                   | `Boolean`     | false       | Modal dialog restricts the user to take an action (no default close actions) |
+| [open](#open)                  | `open`                    | `Boolean`     |             | Sets state of dialog to open                     |
+| [triggerElement](#triggerElement)        |                           | `HTMLElement` |             | The element to focus when the dialog is closed. If not set, defaults to the value of document.activeElement when the dialog is opened. |
+| [unformatted](#unformatted)           | `unformatted`             | `Boolean`     | false       | Unformatted dialog window, edge-to-edge fill for content |
 
 ## Events
 
@@ -30,11 +31,12 @@ The auro-dialog appears above the page and requires the user's attention.
 
 ## Slots
 
-| Name      | Description                                |
-|-----------|--------------------------------------------|
-| [content](#content) | Injects content into the body of the modal |
-| [footer](#footer)  | Used for action options, e.g. buttons      |
-| [header](#header)  | Text to display as the header of the modal |
+| Name                     | Description                                      |
+|--------------------------|--------------------------------------------------|
+| `ariaLabel.dialog.close` | Text to describe the "x" icon close button for screen readers. Default: "Close". |
+| [content](#content)                | Injects content into the body of the modal       |
+| [footer](#footer)                 | Used for action options, e.g. buttons            |
+| [header](#header)                 | Text to display as the header of the modal       |
 
 ## CSS Shadow Parts
 
@@ -269,7 +271,7 @@ When using this state, the modal dialog must include a button action to dismiss
     </div>
     <div slot="footer">
       <auro-button id="closeDefaultModal">I understand
-        <auro-icon category="interface" name="chevron-right" emphasis onDark></auro-icon>
+        <auro-icon category="interface" name="chevron-right" emphasis appearance="inverse"></auro-icon>
       </auro-button>
     </div>
   </auro-dialog>
@@ -288,7 +290,7 @@ When using this state, the modal dialog must include a button action to dismiss
     </div>
     <div slot="footer">
       <auro-button id="closeMediumModal">I understand
-        <auro-icon category="interface" name="chevron-right" emphasis onDark></auro-icon>
+        <auro-icon category="interface" name="chevron-right" emphasis appearance="inverse"></auro-icon>
       </auro-button>
     </div>
   </auro-dialog>
@@ -307,7 +309,7 @@ When using this state, the modal dialog must include a button action to dismiss
     </div>
     <div slot="footer">
       <auro-button id="closeSmallModal">I understand
-        <auro-icon category="interface" name="chevron-right" emphasis onDark></auro-icon>
+        <auro-icon category="interface" name="chevron-right" emphasis appearance="inverse"></auro-icon>
       </auro-button>
     </div>
   </auro-dialog>
@@ -339,7 +341,7 @@ When using this state, the modal dialog must include a button action to dismiss
   </div>
   <div slot="footer">
     <auro-button id="closeDefaultModal">I understand
-      <auro-icon category="interface" name="chevron-right" emphasis onDark></auro-icon>
+      <auro-icon category="interface" name="chevron-right" emphasis appearance="inverse"></auro-icon>
     </auro-button>
   </div>
 </auro-dialog>
@@ -358,7 +360,7 @@ When using this state, the modal dialog must include a button action to dismiss
   </div>
   <div slot="footer">
     <auro-button id="closeMediumModal">I understand
-      <auro-icon category="interface" name="chevron-right" emphasis onDark></auro-icon>
+      <auro-icon category="interface" name="chevron-right" emphasis appearance="inverse"></auro-icon>
     </auro-button>
   </div>
 </auro-dialog>
@@ -377,7 +379,7 @@ When using this state, the modal dialog must include a button action to dismiss
   </div>
   <div slot="footer">
     <auro-button id="closeSmallModal">I understand
-      <auro-icon category="interface" name="chevron-right" emphasis onDark></auro-icon>
+      <auro-icon category="interface" name="chevron-right" emphasis appearance="inverse"></auro-icon>
     </auro-button>
   </div>
 </auro-dialog>
@@ -414,7 +416,7 @@ The use of these combinations will set the first value to the dialog for a deskt
     <div slot="footer">
       <auro-button id="closeSmLg">
         I understand
-        <auro-icon category="interface" name="check-lg" emphasis onDark></auro-icon>
+        <auro-icon category="interface" name="check-lg" emphasis appearance="inverse"></auro-icon>
       </auro-button>
     </div>
   </auro-dialog>
@@ -434,7 +436,7 @@ The use of these combinations will set the first value to the dialog for a deskt
     <div slot="footer">
       <auro-button id="closeMdLg">
         I understand
-        <auro-icon category="interface" name="check-lg" emphasis onDark></auro-icon>
+        <auro-icon category="interface" name="check-lg" emphasis appearance="inverse"></auro-icon>
       </auro-button>
     </div>
   </auro-dialog>
@@ -466,7 +468,7 @@ The use of these combinations will set the first value to the dialog for a deskt
   <div slot="footer">
     <auro-button id="closeSmLg">
       I understand
-      <auro-icon category="interface" name="check-lg" emphasis onDark></auro-icon>
+      <auro-icon category="interface" name="check-lg" emphasis appearance="inverse"></auro-icon>
     </auro-button>
   </div>
 </auro-dialog>
@@ -486,7 +488,7 @@ The use of these combinations will set the first value to the dialog for a deskt
   <div slot="footer">
     <auro-button id="closeMdLg">
       I understand
-      <auro-icon category="interface" name="check-lg" emphasis onDark></auro-icon>
+      <auro-icon category="interface" name="check-lg" emphasis appearance="inverse"></auro-icon>
     </auro-button>
   </div>
 </auro-dialog>
@@ -542,7 +544,7 @@ This is a use case where there is a popover and combobox component inside the di
     <div slot="footer">
       <auro-button id="closePopAndDrop">
         I understand
-        <auro-icon category="interface" name="check-lg" emphasis onDark></auro-icon>
+        <auro-icon category="interface" name="check-lg" emphasis appearance="inverse"></auro-icon>
       </auro-button>
     </div>
   </auro-dialog>
@@ -595,7 +597,7 @@ This is a use case where there is a popover and combobox component inside the di
   <div slot="footer">
     <auro-button id="closePopAndDrop">
       I understand
-      <auro-icon category="interface" name="check-lg" emphasis onDark></auro-icon>
+      <auro-icon category="interface" name="check-lg" emphasis appearance="inverse"></auro-icon>
     </auro-button>
   </div>
 </auro-dialog>
@@ -631,7 +633,7 @@ Within the scope of the auro-dialog there is `aria-labelledby="dialog-header"`.
   <div>
     <auro-button id="openAccessibility">Unformatted Medium Dialog</auro-button>
   </div>
-  <auro-dialog id="unformattedMdDialog" unformatted md lg ondark>
+  <auro-dialog id="unformattedMdDialog" unformatted md lg close-button-appearance="inverse">
     <span slot="content">
       <img style="display: block; width: 100%" src="https://blog.alaskaair.com/wp-content/uploads/2020/11/111-psp-blog-img-guide.jpg" alt="alaska airlines pride lights" />
       <div class="unformattedWrapper">
@@ -651,7 +653,7 @@ Within the scope of the auro-dialog there is `aria-labelledby="dialog-header"`.
 <div>
   <auro-button id="openAccessibility">Unformatted Medium Dialog</auro-button>
 </div>
-<auro-dialog id="unformattedMdDialog" unformatted md lg ondark>
+<auro-dialog id="unformattedMdDialog" unformatted md lg close-button-appearance="inverse">
   <span slot="content">
     <img style="display: block; width: 100%" src="https://blog.alaskaair.com/wp-content/uploads/2020/11/111-psp-blog-img-guide.jpg" alt="alaska airlines pride lights" />
     <div class="unformattedWrapper">
@@ -721,6 +723,51 @@ When using the dialog with the `unformatted` attribute, some may want to adjust
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
+### Close button aria-label slot
+
+To customize the aria-label text for the close button, use the `ariaLabel.dialog.close` slot to provide custom text. If no text is provided, the default text `"Close"` will be used.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/ariaLabelSlot.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/ariaLabelSlot.html -->
+  <div>
+    <auro-button id="openAriaLabelSlot">Unformatted Dialog w/ custom close button aria-label</auro-button>
+  </div>
+  <auro-dialog id="ariaLabelMdDialog" unformatted md lg ondark>
+    <span slot="ariaLabel.dialog.close">This will be the new aria label for the close button</span>
+    <span slot="content">
+      <img style="display: block; width: 100%" src="https://blog.alaskaair.com/wp-content/uploads/2020/11/111-psp-blog-img-guide.jpg" alt="alaska airlines pride lights" />
+      <div class="unformattedWrapper">
+        <h1 id="dialog-header" class="heading-lg">This is a header</h1>
+        These are words that are slotted into the scope of the custom element.
+      </div>
+    </span>
+  </auro-dialog>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/ariaLabelSlot.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/ariaLabelSlot.html -->
+
+```html
+<div>
+  <auro-button id="openAriaLabelSlot">Unformatted Dialog w/ custom close button aria-label</auro-button>
+</div>
+<auro-dialog id="ariaLabelMdDialog" unformatted md lg ondark>
+  <span slot="ariaLabel.dialog.close">This will be the new aria label for the close button</span>
+  <span slot="content">
+    <img style="display: block; width: 100%" src="https://blog.alaskaair.com/wp-content/uploads/2020/11/111-psp-blog-img-guide.jpg" alt="alaska airlines pride lights" />
+    <div class="unformattedWrapper">
+      <h1 id="dialog-header" class="heading-lg">This is a header</h1>
+      These are words that are slotted into the scope of the custom element.
+    </div>
+  </span>
+</auro-dialog>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
 ### Theme Support
 
 The component may be restyled using the following code sample and changing the values of the following token(s).