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

package/.husky/commit-msg

@@ -1,4 +1 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
 npx --no-install commitlint --edit "$1"

package/.husky/pre-commit

@@ -1,4 +1 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
 ./node_modules/.bin/npm-run-all preCommit test linters postinstall

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # Semantic Release Automated Changelog
 
+# [2.0.0-beta.1](https://github.com/AlaskaAirlines/auro-dialog/compare/v1.1.0-beta.2...v2.0.0-beta.1) (2024-10-03)
+
+
+### Bug Fixes
+
+* resolve minor color theming issues ([04aed67](https://github.com/AlaskaAirlines/auro-dialog/commit/04aed672c13d2ec1e3be8f80025e7ffc8f18e6d1))
+
+
+### Features
+
+* add tag name as attribute when custom registered ([e749245](https://github.com/AlaskaAirlines/auro-dialog/commit/e749245d29676388bf40c32b263f32a5f1fc5a68))
+
+
+### Performance Improvements
+
+* refactor custom component registration config ([5c1afc8](https://github.com/AlaskaAirlines/auro-dialog/commit/5c1afc8f4e8bd38114a03f0b95a0f5f81b25e763))
+* update dependencies ([eea1e4f](https://github.com/AlaskaAirlines/auro-dialog/commit/eea1e4f3f84f172558fc6fba6784dbbbf81f2ef1))
+
+
+### BREAKING CHANGES
+
+* trigger major release for color theme support #13
+
+# [1.1.0-beta.2](https://github.com/AlaskaAirlines/auro-dialog/compare/v1.1.0-beta.1...v1.1.0-beta.2) (2024-07-08)
+
+
+### Performance Improvements
+
+* **button:** use new version of flat variant button ([17ce223](https://github.com/AlaskaAirlines/auro-dialog/commit/17ce223fa6a5a91dbda69b316b76220397eea7a7))
+
 # [1.1.0-beta.1](https://github.com/AlaskaAirlines/auro-dialog/compare/v1.0.9...v1.1.0-beta.1) (2024-07-04)
 
 

package/README.md

@@ -62,15 +62,6 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 
 <!-- AURO-GENERATED-CONTENT:END -->
 
-### CSS Custom Property fallbacks
-
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/cssFallbacks.md) -->
-[CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) are [not supported](https://auro.alaskaair.com/support/custom-properties) in older browsers. For this, fallback properties are pre-generated and included with the npm.
-
-Any update to the Auro Design Tokens will be immediately reflected with browsers that support CSS custom properties, legacy browsers will require updated components with pre-generated fallback properties.
-
-<!-- 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) -->
@@ -126,9 +117,9 @@ In cases where the project is not able to process JS assets, there are pre-proce
 <!-- 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@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.1.0-beta.1/dist/auro-dialog__bundled.js" type="module"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@4.10.0/dist/tokens/CSSCustomProperties.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@5.1.1/dist/bundled/essentials.css" />
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-dialog@2.0.0-beta.1/dist/auro-dialog__bundled.js" type="module"></script>
 ```
 
 <!-- AURO-GENERATED-CONTENT:END -->

package/demo/api.md

@@ -8,6 +8,7 @@
 | 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
@@ -15,7 +16,6 @@
 | 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 |
@@ -730,11 +730,10 @@ The component may be restyled using the following code sample and changing the v
 @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-container-color: var(--ds-color-container-primary-default, #{$ds-color-container-primary-default});
+  --ds-auro-dialog-boxshadow-color: var(--ds-elevation-300, #{$ds-elevation-300});
+  --ds-auro-dialog-overlay-modal-background-color: var(--ds-color-background-scrimmed-default, #{$ds-color-background-scrimmed-default});
+  --ds-auro-dialog-overlay-open-background-color: var(--ds-color-background-scrimmed-default, #{$ds-color-background-scrimmed-default});
   --ds-auro-dialog-text-color: var(--ds-color-text-primary-default, #{$ds-color-text-primary-default});
 }
 ```

package/demo/index.md

@@ -137,8 +137,10 @@ There are two important parts of every Auro component. The <a href="https://deve
 To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our `registerComponent(name)` method and pass in a unique name.
 
 ```js
-import './node_modules/@aurodesignsystem/auro-dialog';
-registerComponent('custom-dialog');
+import { AuroDialog } from './src/auro-dialog.js';
+import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
+
+RuntimeUtils.default.prototype.registerComponent('custom-dialog', AuroDialog);
 ```
 
 This will create a new custom element that you can use in your HTML that will function identically to the `auro-dialog` element.

package/dist/auro-dialog.d.ts

@@ -12,10 +12,6 @@ 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"}