@aurodesignsystem/auro-dialog 3.1.3 → 3.1.4

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Semantic Release Automated Changelog
 
+## [3.1.4](https://github.com/AlaskaAirlines/auro-dialog/compare/v3.1.3...v3.1.4) (2025-07-16)
+
+
+### Bug Fixes
+
+* add themeable type classes ([c1e5ed4](https://github.com/AlaskaAirlines/auro-dialog/commit/c1e5ed483f595510689048cc5a336a720a5ef56b))
+* update docs head content ([64183fc](https://github.com/AlaskaAirlines/auro-dialog/commit/64183fc5500253053d8d2082aac73422a093b116))
+
 ## [3.1.3](https://github.com/AlaskaAirlines/auro-dialog/compare/v3.1.2...v3.1.3) (2025-07-16)
 
 

package/README.md

@@ -119,7 +119,7 @@ In cases where the project is not able to process JS assets, there are pre-proce
 ```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.3/dist/auro-dialog__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-dialog@3.1.4/dist/auro-dialog__bundled.js" type="module"></script>
 ```
 
 <!-- AURO-GENERATED-CONTENT:END -->

package/demo/api.md

@@ -635,7 +635,7 @@ Within the scope of the auro-dialog there is `aria-labelledby="dialog-header"`.
     <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">This is a header</h1>
+        <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>
@@ -655,7 +655,7 @@ Within the scope of the auro-dialog there is `aria-labelledby="dialog-header"`.
   <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">This is a header</h1>
+      <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>
@@ -685,7 +685,7 @@ When using the dialog with the `unformatted` attribute, some may want to adjust
     <span slot="content">
       <img style="display: block; width: 100%" src="https://worldairlinenews.files.wordpress.com/2022/05/alaska-737-800-sswl-n538as-22-star-warstko-sfo-mdblr-5.4.22.jpg" alt="alaska airlines pride lights" />
       <div class="unformattedWrapper">
-        <h1 id="dialog-header">Unformatted w/custom close button</h1>
+        <h1 id="dialog-header" class="heading-lg">Unformatted w/custom close button</h1>
         Notice the custom location of the close button as well as the custom color.
       </div>
     </span>
@@ -712,7 +712,7 @@ When using the dialog with the `unformatted` attribute, some may want to adjust
   <span slot="content">
     <img style="display: block; width: 100%" src="https://worldairlinenews.files.wordpress.com/2022/05/alaska-737-800-sswl-n538as-22-star-warstko-sfo-mdblr-5.4.22.jpg" alt="alaska airlines pride lights" />
     <div class="unformattedWrapper">
-      <h1 id="dialog-header">Unformatted w/custom close button</h1>
+      <h1 id="dialog-header" class="heading-lg">Unformatted w/custom close button</h1>
       Notice the custom location of the close button as well as the custom color.
     </div>
   </span>
@@ -725,19 +725,19 @@ When using the dialog with the `unformatted` attribute, some may want to adjust
 
 The component may be restyled using the following code sample and changing the values of the following token(s).
 
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../src/tokens.scss) -->
-<!-- The below code snippet is automatically added from ./../src/tokens.scss -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../src/styles/tokens.scss) -->
+<!-- The below code snippet is automatically added from ./../src/styles/tokens.scss -->
 
 ```scss
-@import "./../node_modules/@aurodesignsystem/design-tokens/dist/auro-classic/SCSSVariables";
-@import "./../node_modules/@aurodesignsystem/design-tokens/dist/alaska/SCSSVariables--alaska";
+@use "@aurodesignsystem/design-tokens/dist/legacy/auro-classic/SCSSVariables" as vac;
+@use "@aurodesignsystem/design-tokens/dist/themes/alaska/SCSSVariables--alaska" as v;
 
 :host {
-  --ds-auro-dialog-container-color: var(--ds-basic-color-surface-default, #{$ds-basic-color-surface-default});
-  --ds-auro-dialog-boxshadow-color: var(--ds-elevation-300, #{$ds-elevation-300});
-  --ds-auro-dialog-overlay-modal-background-color: var(--ds-advanced-color-shared-scrim, #{$ds-advanced-color-shared-scrim});
-  --ds-auro-dialog-overlay-open-background-color: var(--ds-advanced-color-shared-scrim, #{$ds-advanced-color-shared-scrim});
-  --ds-auro-dialog-text-color: var(--ds-basic-color-texticon-default, #{$ds-basic-color-texticon-default});
+  --ds-auro-dialog-container-color: var(--ds-basic-color-surface-default, #{v.$ds-basic-color-surface-default});
+  --ds-auro-dialog-boxshadow-color: var(--ds-elevation-300, #{vac.$ds-elevation-300});
+  --ds-auro-dialog-overlay-modal-background-color: var(--ds-advanced-color-shared-scrim, #{v.$ds-advanced-color-shared-scrim});
+  --ds-auro-dialog-overlay-open-background-color: var(--ds-advanced-color-shared-scrim, #{v.$ds-advanced-color-shared-scrim});
+  --ds-auro-dialog-text-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
 }
 ```
 <!-- AURO-GENERATED-CONTENT:END -->