@aurodesignsystem/auro-dialog 1.0.8 → 1.1.0-beta.1

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Semantic Release Automated Changelog
 
+# [1.1.0-beta.1](https://github.com/AlaskaAirlines/auro-dialog/compare/v1.0.9...v1.1.0-beta.1) (2024-07-04)
+
+
+### Features
+
+* refactor color token structure with tier 3 tokens [#13](https://github.com/AlaskaAirlines/auro-dialog/issues/13) ([179e468](https://github.com/AlaskaAirlines/auro-dialog/commit/179e4684d5611f788c18537eeefe837915011b87))
+* **version:** use custom versioned auro components ([8de7e7c](https://github.com/AlaskaAirlines/auro-dialog/commit/8de7e7c4bfdb8576be99a767121cf3cc68a0f12f))
+
+## [1.0.9](https://github.com/AlaskaAirlines/auro-dialog/compare/v1.0.8...v1.0.9) (2024-04-05)
+
+
+### Bug Fixes
+
+* **scroll:** make dialog content scroll [#15](https://github.com/AlaskaAirlines/auro-dialog/issues/15) ([4f69654](https://github.com/AlaskaAirlines/auro-dialog/commit/4f696542e23d345fe5f1f26215b18e519609e6b8))
+
 ## [1.0.8](https://github.com/AlaskaAirlines/auro-dialog/compare/v1.0.7...v1.0.8) (2024-02-23)
 
 

package/README.md

@@ -128,7 +128,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@4.3.0/dist/tokens/CSSCustomProperties.css" />
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@5.0.8/dist/bundled/essentials.css" />
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-dialog@1.0.8/dist/auro-dialog__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-dialog@1.1.0-beta.1/dist/auro-dialog__bundled.js" type="module"></script>
 ```
 
 <!-- AURO-GENERATED-CONTENT:END -->

package/demo/api.md

@@ -8,7 +8,6 @@
 | 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    |
 | [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
@@ -16,6 +15,7 @@
 | Property         | Attribute     | Type          | Default | Description                                      |
 |------------------|---------------|---------------|---------|--------------------------------------------------|
 | [modal](#modal)          | `modal`       | `Boolean`     | false   | Modal dialog restricts the user to take an action (no default close actions) |
+| [onDark](#onDark)         | `onDark`      | `Boolean`     |         | Sets close icon to white for dark backgrounds    |
 | [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 |
@@ -717,4 +717,25 @@ When using the dialog with the `unformatted` attribute, some may want to adjust
 </auro-dialog>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
+</auro-accordion>
+
+### Theme Support
+
+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 -->
+
+```scss
+@import "./../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables";
+
+:host {
+  --ds-auro-dialog-background-color: var(--ds-color-background-primary-100-default, #{$ds-color-background-primary-100-default});
+  --ds-auro-dialog-boxshadow-color-one: rgb(0 0 0 / 0.12);
+  --ds-auro-dialog-boxshadow-color-two: rgb(0 0 0 / 0.1);
+  --ds-auro-dialog-overlay-modal-background-color: rgb(0 0 0 / 0.5);
+  --ds-auro-dialog-overlay-open-background-color: rgb(0 0 0 / 0.2);
+  --ds-auro-dialog-text-color: var(--ds-color-text-primary-default, #{$ds-color-text-primary-default});
+}
+```
+<!-- AURO-GENERATED-CONTENT:END -->

package/dist/auro-dialog.d.ts

@@ -12,6 +12,10 @@ export class AuroDialog extends ComponentBase {
             type: BooleanConstructor;
             reflect: boolean;
         };
+        onDark: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
         triggerElement: {
             attribute: boolean;
         };

package/dist/auro-dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"auro-dialog.d.ts","sourceRoot":"","sources":["../src/auro-dialog.js"],"names":[],"mappings":"AAQA;IAME;;;;;;;;;;;;;;;;MASC;IAED,iDAEC;CACF;0BAvByB,oBAAoB"}
+{"version":3,"file":"auro-dialog.d.ts","sourceRoot":"","sources":["../src/auro-dialog.js"],"names":[],"mappings":"AAQA;IAME;;;;;;;;;;;;;;;;;;;;MASC;IAED,iDAEC;CACF;0BAvByB,oBAAoB"}