@aurodesignsystem/auro-button - npm Package Compare versions

Comparing version 7.2.1 to 7.2.2

CHANGELOG.md

 # Semantic Release Automated Changelog
 
+## [7.2.2](https://github.com/AlaskaAirlines/auro-button/compare/v7.2.1...v7.2.2) (2024-01-02)
+
+
+### Bug Fixes
+
+* **demo:** update surge demo branch ([5393ed9](https://github.com/AlaskaAirlines/auro-button/commit/5393ed910993367821755f86992b5b8934e1f6bf))
+* **marked:** update marked package to script ([9ad605c](https://github.com/AlaskaAirlines/auro-button/commit/9ad605cb9692c62ea3e8316582767171a539afd2))
+* **tokens:** replace invalid tokens [#229](https://github.com/AlaskaAirlines/auro-button/issues/229) ([7652913](https://github.com/AlaskaAirlines/auro-button/commit/76529134ead49c665518f4466d67c7c1eafa7c45))
+
+
+### Performance Improvements
+
+* **accordion:** use new version of accordion ([eba6c1e](https://github.com/AlaskaAirlines/auro-button/commit/eba6c1ea0a465f3bf3dddce759a57e5c426d27c2))
+* **alert:** update to use auro-alert ([e18015c](https://github.com/AlaskaAirlines/auro-button/commit/e18015c6bab2257735779bd83147d6899bb8eaa8))
+* **deps:** update dependencies ([7daaf28](https://github.com/AlaskaAirlines/auro-button/commit/7daaf28390f087294df95dcb35f945d5228901ff))
+* **eslint:** install auro eslint rules ([d9fd3ed](https://github.com/AlaskaAirlines/auro-button/commit/d9fd3ed7f433934d3dab5f854c11d34c31c0acf7))
+* **focus:** remove focus-visible support ([c0511e5](https://github.com/AlaskaAirlines/auro-button/commit/c0511e5ed3f43b847f761a088918f07f14f89057))
+* **hover:** update hover css rules ([f64446d](https://github.com/AlaskaAirlines/auro-button/commit/f64446d555f138eb795b6641433fc5891812ba1f))
+* **hover:** update secondary hover color [#227](https://github.com/AlaskaAirlines/auro-button/issues/227) ([1eff68d](https://github.com/AlaskaAirlines/auro-button/commit/1eff68d28089c0f83d6d25a732fc5e8d9f8692b2))
+* **hover:** update tertiary hover color [#236](https://github.com/AlaskaAirlines/auro-button/issues/236) ([2d346fa](https://github.com/AlaskaAirlines/auro-button/commit/2d346fa931391c8acdfcaa54c91549982351dd2d))
+* **jsdocs:** update jsdocs ([ebec779](https://github.com/AlaskaAirlines/auro-button/commit/ebec779f8069e521690bdaca623003a81d085e00))
+* **node:** update to support node 20 ([816d29e](https://github.com/AlaskaAirlines/auro-button/commit/816d29e6f46d6718f5ff61588edd6baed3da5561))
+* **tokens:** add css fallbacks for tokens [#229](https://github.com/AlaskaAirlines/auro-button/issues/229) ([423502b](https://github.com/AlaskaAirlines/auro-button/commit/423502be316e9b595790c006eae2c2fbb9acc291))
+* **token:** update design token names [#229](https://github.com/AlaskaAirlines/auro-button/issues/229) ([f94ab5d](https://github.com/AlaskaAirlines/auro-button/commit/f94ab5dfd58c789efd3b4818b36af47cfa918fcc))
+
 ## [7.2.1](https://github.com/AlaskaAirlines/auro-button/compare/v7.2.0...v7.2.1) (2023-10-02)
@@ -4,0 +29,0 @@

demo/api.md

@@ -69,3 +69,3 @@ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../api.md) -->
 </div>
-<auro-accordion lowProfile justifyRight>
+<auro-accordion alightRight>
   <span slot="trigger">See code</span>
@@ -95,3 +95,3 @@ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/basic.html) -->
 </div>
-<auro-accordion lowProfile justifyRight>
+<auro-accordion alightRight>
   <span slot="trigger">See code</span>
@@ -116,3 +116,3 @@ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/disabled.html) -->
 </div>
-<auro-accordion lowProfile justifyRight>
+<auro-accordion alightRight>
   <span slot="trigger">See code</span>
@@ -142,3 +142,3 @@ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/disabledOnDark.html) -->
 </div>
-<auro-accordion lowProfile justifyRight>
+<auro-accordion alightRight>
   <span slot="trigger">See code</span>
@@ -181,3 +181,3 @@ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/slim.html) -->
 </div>
-<auro-accordion lowProfile justifyRight>
+<auro-accordion alightRight>
   <span slot="trigger">See code</span>
@@ -226,3 +226,3 @@ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/icon.html) -->
 </div>
-<auro-accordion lowProfile justifyRight>
+<auro-accordion alightRight>
   <span slot="trigger">See code</span>
@@ -264,3 +264,3 @@ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/iconOnly.html) -->
 </div>
-<auro-accordion lowProfile justifyRight>
+<auro-accordion alightRight>
   <span slot="trigger">See code</span>
@@ -300,3 +300,3 @@ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/iconOnlySlim.html) -->
 </div>
-<auro-accordion lowProfile justifyRight>
+<auro-accordion alightRight>
   <span slot="trigger">See code</span>
@@ -327,3 +327,3 @@ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/rounded.html) -->
 </div>
-<auro-accordion lowProfile justifyRight>
+<auro-accordion alightRight>
   <span slot="trigger">See code</span>
@@ -354,3 +354,3 @@ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/roundedTextWithIcon.html) -->
 </div>
-<auro-accordion lowProfile justifyRight>
+<auro-accordion alightRight>
   <span slot="trigger">See code</span>
@@ -381,3 +381,3 @@ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/roundedTextOnly.html) -->
 </div>
-<auro-accordion lowProfile justifyRight>
+<auro-accordion alightRight>
   <span slot="trigger">See code</span>
@@ -436,3 +436,3 @@ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/toggledText.html) -->
 </div>
-<auro-accordion lowProfile justifyRight>
+<auro-accordion alightRight>
   <span slot="trigger">See code</span>
@@ -490,3 +490,3 @@ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/roundedRightAlign.html) -->
 </div>
-<auro-accordion lowProfile justifyRight>
+<auro-accordion alightRight>
   <span slot="trigger">See code</span>
@@ -516,3 +516,3 @@ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/fluid.html) -->
 </div>
-<auro-accordion lowProfile justifyRight>
+<auro-accordion alightRight>
   <span slot="trigger">See code</span>
@@ -537,3 +537,3 @@ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/loading.html) -->
 </div>
-<auro-accordion lowProfile justifyRight>
+<auro-accordion alightRight>
   <span slot="trigger">See code</span>
@@ -540,0 +540,0 @@ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/loadingOnDark.html) -->

demo/demo.md

@@ -40,3 +40,3 @@ <!--
 </div>
-<auro-accordion lowProfile justifyRight>
+<auro-accordion alignRight>
   <span slot="trigger">See code</span>
@@ -66,3 +66,3 @@ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/basic.html) -->
 </div>
-<auro-accordion lowProfile justifyRight>
+<auro-accordion alignRight>
   <span slot="trigger">See code</span>
@@ -92,3 +92,3 @@ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/onDark.html) -->
 </div>
-<auro-accordion lowProfile justifyRight>
+<auro-accordion alignRight>
   <span slot="trigger">See code</span>
@@ -113,3 +113,3 @@ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/disabled.html) -->
 </div>
-<auro-accordion lowProfile justifyRight>
+<auro-accordion alignRight>
   <span slot="trigger">See code</span>
@@ -150,3 +150,3 @@ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/disabledOnDark.html) -->
 </div>
-<auro-accordion lowProfile justifyRight>
+<auro-accordion alignRight>
   <span slot="trigger">See code</span>
@@ -185,3 +185,3 @@ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/icon.html) -->
 </div>
-<auro-accordion lowProfile justifyRight>
+<auro-accordion alignRight>
   <span slot="trigger">See code</span>
@@ -206,11 +206,11 @@ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/passFunction.html) -->
   <!-- The below content is automatically added from ./../../apiExamples/doAndDont.html -->
-  <auro-alerts error noIcon>
+  <auro-alert type="error" noIcon>
     <auro-button loading disabled>Primary</auro-button>
-  </auro-alerts>
-  <auro-alerts success noIcon style="padding-top: 5px;">
+  </auro-alert>
+  <auro-alert type="success" noIcon style="padding-top: 5px;">
     <auro-button loading>Primary</auro-button>
-  </auro-alerts>
+  </auro-alert>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
-<auro-accordion lowProfile justifyRight>
+<auro-accordion alignRight>
   <span slot="trigger">See code</span>
@@ -221,10 +221,10 @@ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/doAndDont.html) -->
 ```html
-<auro-alerts error noIcon>
+<auro-alert type="error" noIcon>
   <auro-button loading disabled>Primary</auro-button>
-</auro-alerts>
-<auro-alerts success noIcon style="padding-top: 5px;">
+</auro-alert>
+<auro-alert type="success" noIcon style="padding-top: 5px;">
   <auro-button loading>Primary</auro-button>
-</auro-alerts>
+</auro-alert>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>

dist/auro-button.d.ts

@@ -110,15 +110,17 @@ /**
     /**
-     * @private Internal method to apply focus
-     * @returns {Array} - The DOM node for the button element
+     * Internal method to apply focus to the HTML5 button.
+     * @private
+     * @returns {void}
      */
     private focus;
     /**
+     *  Marks the component as ready and sends event.
      * @private
-     * @returns {void} Marks the component as ready and sends event.
+     * @returns {void}
      */
     private notifyReady;
     firstUpdated(): void;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
 }
 import { LitElement } from "lit";
 //# sourceMappingURL=auro-button.d.ts.map

package.json

@@ -10,3 +10,3 @@ {
   "name": "@aurodesignsystem/auro-button",
-  "version": "7.2.1",
+  "version": "7.2.2",
   "description": "Auro custom auro-button element",
@@ -21,3 +21,3 @@ "author": "Product design and research",
   "engines": {
-    "node": ">=18"
+    "node": "^18 || ^20"
   },
@@ -27,48 +27,51 @@ "dependencies": {
     "chalk": "^5.3.0",
-    "lit": "^2.7.6"
+    "lit": "^3.0.2"
   },
   "peerDependencies": {
-    "@alaskaairux/design-tokens": "^3.9.1"
+    "@aurodesignsystem/design-tokens": "^4.1.1",
+    "@aurodesignsystem/webcorestylesheets": "^5.0.0"
   },
   "devDependencies": {
-    "@alaskaairux/design-tokens": "^3.14.0",
-    "@aurodesignsystem/webcorestylesheets": "^4.6.0",
-    "@commitlint/cli": "^17.6.6",
-    "@commitlint/config-conventional": "^17.6.6",
-    "@open-wc/testing": "^3.2.0",
+    "@aurodesignsystem/design-tokens": "^4.3.0",
+    "@aurodesignsystem/eslint-config": "^1.3.0",
+    "@aurodesignsystem/webcorestylesheets": "^5.0.0",
+    "@commitlint/cli": "^18.4.3",
+    "@commitlint/config-conventional": "^18.4.3",
+    "@open-wc/testing": "^4.0.0",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@semantic-release/npm": "^10.0.4",
-    "@web/dev-server": "^0.2.5",
-    "@web/test-runner": "^0.16.1",
-    "autoprefixer": "^10.3.1",
+    "@semantic-release/npm": "^11.0.2",
+    "@web/dev-server": "^0.4.0",
+    "@web/test-runner": "^0.18.0",
+    "autoprefixer": "^10.4.16",
     "compression": "^1.7.4",
     "concat": "^1.0.3",
-    "concurrently": "^8.2.0",
+    "concurrently": "^8.2.2",
     "copyfiles": "^2.4.1",
-    "core-js": "^3.31.1",
-    "eslint": "^8.44.0",
-    "eslint-plugin-lit": "^1.5.1",
+    "core-js": "^3.35.0",
+    "eslint": "^8.56.0",
+    "eslint-plugin-jsdoc": "^46.9.1",
+    "eslint-plugin-lit": "^1.11.0",
     "husky": "^8.0.0",
     "lodash": "^4.17.21",
     "markdown-magic": "^2.6.1",
-    "nodemon": "^3.0.1",
+    "nodemon": "^3.0.2",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.25",
-    "postcss-discard-comments": "^6.0.0",
+    "postcss": "^8.4.32",
+    "postcss-discard-comments": "^6.0.1",
     "postcss-selector-replace": "^1.0.2",
-    "rollup": "^3.26.2",
+    "rollup": "^4.9.1",
     "rollup-plugin-serve": "^2.0.2",
-    "semantic-release": "^21.0.7",
-    "sinon": "^15.2.0",
-    "stylelint": "^15.10.1",
-    "stylelint-config-standard": "^34.0.0",
-    "stylelint-config-standard-scss": "^10.0.0",
-    "stylelint-order": "^6.0.3",
-    "stylelint-scss": "^5.0.1",
-    "typescript": "^5.1.6",
+    "semantic-release": "^22.0.12",
+    "sinon": "^17.0.1",
+    "stylelint": "^16.1.0",
+    "stylelint-config-standard": "^36.0.0",
+    "stylelint-config-standard-scss": "^12.0.0",
+    "stylelint-order": "^6.0.4",
+    "stylelint-scss": "^6.0.0",
+    "typescript": "^5.3.3",
     "wc-sass-render": "^1.4.0",
-    "web-component-analyzer": "^1.1.6",
-    "webpack-merge": "^5.9.0",
-    "whatwg-fetch": "^3.6.2"
+    "web-component-analyzer": "^2.0.0",
+    "webpack-merge": "^5.10.0",
+    "whatwg-fetch": "^3.6.20"
   },
@@ -75,0 +78,0 @@ "browserslist": [

src/auro-button.js

@@ -133,4 +133,5 @@ // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
   /**
-   * @private Internal method to apply focus
-   * @returns {Array} - The DOM node for the button element
+   * Internal method to apply focus to the HTML5 button.
+   * @private
+   * @returns {void}
    */
@@ -142,4 +143,5 @@ focus() {
   /**
+   *  Marks the component as ready and sends event.
    * @private
-   * @returns {void} Marks the component as ready and sends event.
+   * @returns {void}
    */
@@ -146,0 +148,0 @@ notifyReady() {

src/style-css.js

@@ -7,2 +7,2 @@ // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
 import {css} from 'lit-element';
-export default css`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_insetLg--squish{padding:.75rem 1.5rem}:focus-visible.auro-button{outline:3px solid transparent;box-shadow:inset 0 0 0 1px var(--auro-color-border-focus-on-dark),inset 0 0 0 3px var(--auro-color-background-lightest)}:focus-visible.auro-button[variant=secondary],:focus-visible.auro-button--secondary{background-color:var(--auro-color-background-lighter);box-shadow:inset 0 0 0 3px var(--auro-color-ui-default-on-light)}:focus-visible.auro-button[variant=tertiary],:focus-visible.auro-button--tertiary{background-color:var(--auro-color-background-lighter);border-color:var(--auro-color-ui-default-on-light);box-shadow:inset 0 0 0 3px var(--auro-color-ui-default-on-light)}:focus-visible.auro-buttonOndark{background-color:var(--auro-color-ui-default-on-dark);box-shadow:inset 0 0 0 3px var(--auro-color-border-focus-on-dark)}:focus-visible.auro-buttonOndark[variant=secondary],:focus-visible.auro-buttonOndark--secondary{background-color:var(--auro-color-base-black-opacity-15);box-shadow:inset 0 0 0 3px var(--auro-color-ui-active-on-dark);border:1px solid var(--auro-color-ui-active-on-dark)}:focus-visible.auro-buttonOndark[variant=tertiary],:focus-visible.auro-buttonOndark--tertiary{background-color:var(--auro-color-base-black-opacity-15);border-color:var(--auro-color-ui-active-on-dark);box-shadow:inset 0 0 0 3px var(--auro-color-ui-active-on-dark)}:host([fluid]) .auro-button,:host([fluid=true]) .auro-button{min-width:auto;width:100%}::slotted(svg){vertical-align:middle}slot{pointer-events:none}.auro-button{transition:all .15s ease;position:relative;padding:0 var(--auro-size-lg);color:var(--auro-color-text-primary-on-dark);cursor:pointer;background-color:var(--auro-color-ui-default-on-light);border:1px solid var(--auro-color-ui-default-on-light);border-radius:var(--auro-border-radius);font-family:var(--auro-font-family-default);font-size:var(--auro-text-body-size-default);font-weight:var(--auro-text-body-default-weight);overflow:hidden;text-overflow:ellipsis;user-select:none;white-space:nowrap;min-height:var(--auro-size-xxl);max-height:var(--auro-size-xxl);display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--auro-size-xxs);margin:0;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none}@media(hover: hover){.auro-button:active,.auro-button:hover{background-color:var(--auro-color-ui-hover-on-light);border:1px solid var(--auro-color-ui-hover-on-light)}}.auro-button:active{background-color:var(--auro-color-ui-active-on-light);border:1px solid var(--auro-color-ui-active-on-light);transform:scale(0.95)}.auro-button.loading{cursor:not-allowed}.auro-button.loading *:not(auro-loader){visibility:hidden}.auro-button.loading auro-loader{color:var(--auro-color-background-darkest)}.auro-button.loading.auro-buttonOndark auro-loader{color:var(--auro-color-text-primary-on-dark)}@media screen and (min-width: 660px){.auro-button{min-width:8.75rem;width:auto}}.auro-button:disabled{cursor:not-allowed;transform:unset;background-color:rgba(0, 116, 200, 0.4);border:1px solid rgba(0, 116, 200, 0)}@media(hover: hover){.auro-button:disabled:hover{background-color:rgba(0, 116, 200, 0.4);border:1px solid rgba(0, 116, 200, 0)}}.auro-button[variant=secondary],.auro-button--secondary{background-color:var(--auro-color-background-lightest);border:1px solid var(--auro-color-ui-default-on-light);color:var(--auro-color-text-link-on-light)}@media(hover: hover){.auro-button[variant=secondary]:active,.auro-button[variant=secondary]:hover,.auro-button--secondary:active,.auro-button--secondary:hover{background-color:var(--auro-color-ui-bkg-hover-on-light);border:1px solid var(--auro-color-ui-default-on-light)}}.auro-button[variant=secondary]:active,.auro-button--secondary:active{background-color:var(--auro-color-ui-bkg-hover-on-light);border:1px solid var(--auro-color-ui-default-on-light)}.auro-button[variant=secondary]:disabled,.auro-button--secondary:disabled{cursor:not-allowed;transform:unset;color:rgba(0, 116, 200, 0.4);background-color:rgba(255, 255, 255, 0.4);border:1px solid rgba(0, 116, 200, 0.4)}@media(hover: hover){.auro-button[variant=secondary]:disabled:hover,.auro-button--secondary:disabled:hover{color:rgba(0, 116, 200, 0.4);background-color:rgba(255, 255, 255, 0.4);border:1px solid rgba(0, 116, 200, 0.4)}}.auro-button[variant=tertiary],.auro-button--tertiary{background-color:rgba(0, 0, 0, 0.03);border-color:transparent;color:var(--auro-color-text-link-on-light)}@media(hover: hover){.auro-button[variant=tertiary]:active,.auro-button[variant=tertiary]:hover,.auro-button--tertiary:active,.auro-button--tertiary:hover{background-color:var(--auro-color-ui-bkg-hover-on-light);border-color:transparent}}.auro-button[variant=tertiary]:active,.auro-button--tertiary:active{background-color:var(--auro-color-ui-bkg-hover-on-light);border-color:transparent}.auro-button[variant=tertiary]:disabled,.auro-button--tertiary:disabled{cursor:not-allowed;transform:unset;color:rgba(0, 116, 200, 0.4);background-color:rgba(0, 0, 0, 0.03);border:1px solid transparent}@media(hover: hover){.auro-button[variant=tertiary]:disabled:hover,.auro-button--tertiary:disabled:hover{background-color:rgba(0, 0, 0, 0.03);border:1px solid transparent}}.auro-buttonOndark{background-color:var(--auro-color-ui-default-on-dark);border:1px solid var(--auro-color-ui-default-on-dark);color:var(--auro-color-text-primary-on-light)}@media(hover: hover){.auro-buttonOndark:active,.auro-buttonOndark:hover{background-color:var(--auro-color-ui-hover-on-dark);border:1px solid var(--auro-color-ui-hover-on-dark)}}.auro-buttonOndark:active{background-color:var(--auro-color-ui-active-on-dark);border:1px solid var(--auro-color-ui-active-on-dark)}.auro-buttonOndark:disabled{cursor:not-allowed;transform:unset;color:rgba(34, 34, 34, 0.4);background-color:rgba(0, 207, 240, 0.4);border:1px solid rgba(0, 207, 240, 0.4)}@media(hover: hover){.auro-buttonOndark:disabled:hover{color:rgba(34, 34, 34, 0.4);background-color:rgba(0, 207, 240, 0.4);border:1px solid rgba(0, 207, 240, 0.4)}}.auro-buttonOndark[variant=secondary],.auro-buttonOndark--secondary{background-color:var(--auro-color-background-darker);border:1px solid var(--auro-color-ui-default-on-dark);color:var(--auro-color-ui-default-on-dark)}@media(hover: hover){.auro-buttonOndark[variant=secondary]:active,.auro-buttonOndark[variant=secondary]:hover,.auro-buttonOndark--secondary:active,.auro-buttonOndark--secondary:hover{background-color:var(--auro-color-background-darkest)}}.auro-buttonOndark[variant=secondary]:active,.auro-buttonOndark--secondary:active{background-color:var(--auro-color-base-black-opacity-15);border:1px solid var(--auro-color-ui-hover-on-dark)}@media(hover: hover){.auro-buttonOndark[variant=secondary]:disabled:hover,.auro-buttonOndark--secondary:disabled:hover{background-color:var(--auro-color-background-darker);border:1px solid var(--auro-color-ui-default-on-dark)}}.auro-buttonOndark[variant=secondary]:disabled,.auro-buttonOndark--secondary:disabled{cursor:not-allowed;transform:unset;color:rgba(0, 207, 240, 0.4);background-color:var(--auro-color-background-darker);border:1px solid rgba(0, 207, 240, 0.4)}@media(hover: hover){.auro-buttonOndark[variant=secondary]:disabled:hover,.auro-buttonOndark--secondary:disabled:hover{color:rgba(0, 207, 240, 0.4);background-color:var(--auro-color-background-darker);border:1px solid rgba(0, 207, 240, 0.4)}}.auro-buttonOndark[variant=tertiary],.auro-buttonOndark--tertiary{background-color:rgba(255, 255, 255, 0.03);border:1px solid transparent;color:var(--auro-color-ui-default-on-dark)}@media(hover: hover){.auro-buttonOndark[variant=tertiary]:active,.auro-buttonOndark[variant=tertiary]:hover,.auro-buttonOndark--tertiary:active,.auro-buttonOndark--tertiary:hover{background-color:var(--auro-color-base-black-opacity-15);border:1px solid transparent;box-shadow:none}}.auro-buttonOndark[variant=tertiary]:active,.auro-buttonOndark--tertiary:active{background-color:var(--auro-color-base-black-opacity-15);border:1px solid transparent;box-shadow:none}.auro-buttonOndark[variant=tertiary]:disabled,.auro-buttonOndark--tertiary:disabled{cursor:not-allowed;transform:unset;background-color:rgba(255, 255, 255, 0.03);border:transparent;color:rgba(0, 207, 240, 0.4)}@media(hover: hover){.auro-buttonOndark[variant=tertiary]:disabled:hover,.auro-buttonOndark--tertiary:disabled:hover{background-color:rgba(255, 255, 255, 0.03);color:rgba(0, 207, 240, 0.4);border:transparent}}.auro-button--slim{padding:var(--auro-size-xs) var(--auro-size-md);font-size:var(--auro-text-body-size-sm);min-width:unset;min-height:2.25rem;max-height:2.25rem}.auro-button--iconOnly{padding-left:calc(var(--auro-size-100) - var(--auro-size-25));padding-right:calc(var(--auro-size-100) - var(--auro-size-25));border-radius:100px;min-width:unset}.auro-button--iconOnly ::slotted(auro-icon){width:var(--auro-size-300);height:var(--auro-size-300)}.auro-button--iconOnlySlim{padding-left:var(--auro-size-50);padding-right:var(--auro-size-50)}.auro-button--iconOnlySlim ::slotted(auro-icon){width:calc(var(--auro-size-300) - var(--auro-size-50));height:calc(var(--auro-size-300) - var(--auro-size-50))}.auro-button--rounded{border-radius:100px;box-shadow:var(--auro-elevation-300);height:var(--auro-size-500);min-width:unset;transition:all 300ms ease-out}.auro-button--rounded ::slotted(auro-icon){width:var(--auro-size-300);height:var(--auro-size-300)}:host([rounded]) .textSlot{transition:opacity 300ms ease-in;opacity:1}:host([rounded][iconOnly]) .textSlot{opacity:0}:host([rounded][iconOnly]) .textWrapper{display:none}:host([rounded][iconOnly]) .auro-button{min-width:unset;padding:unset;width:var(--auro-size-600)}auro-loader{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);pointer-events:none}`;
+export default css`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_insetNone{padding:0}.util_insetXxxs{padding:.125rem}.util_insetXxxs--stretch{padding:.25rem .125rem}.util_insetXxxs--squish{padding:0 .125rem}.util_insetXxs{padding:.25rem}.util_insetXxs--stretch{padding:.375rem .25rem}.util_insetXxs--squish{padding:.125rem .25rem}.util_insetXs{padding:.5rem}.util_insetXs--stretch{padding:.75rem .5rem}.util_insetXs--squish{padding:.25rem .5rem}.util_insetSm{padding:.75rem}.util_insetSm--stretch{padding:1.125rem .75rem}.util_insetSm--squish{padding:.375rem .75rem}.util_insetMd{padding:1rem}.util_insetMd--stretch{padding:1.5rem 1rem}.util_insetMd--squish{padding:.5rem 1rem}.util_insetLg{padding:1.5rem}.util_insetLg--stretch{padding:2.25rem 1.5rem}.util_insetLg--squish{padding:.75rem 1.5rem}.util_insetXl{padding:2rem}.util_insetXl--stretch{padding:3rem 2rem}.util_insetXl--squish{padding:1rem 2rem}.util_insetXxl{padding:3rem}.util_insetXxl--stretch{padding:4.5rem 3rem}.util_insetXxl--squish{padding:1.5rem 3rem}.util_insetXxxl{padding:4rem}.util_insetXxxl--stretch{padding:6rem 4rem}.util_insetXxxl--squish{padding:2rem 4rem}:host([fluid]) .auro-button,:host([fluid=true]) .auro-button{min-width:auto;width:100%}::slotted(svg){vertical-align:middle}slot{pointer-events:none}.auro-button{transition:all .15s ease;position:relative;padding:0 var(--ds-size-300, 1.5rem);color:var(--ds-color-text-primary-inverse, #ffffff);cursor:pointer;background-color:var(--ds-color-ui-default-default, #0074c8);border:1px solid var(--ds-color-ui-default-default, #0074c8);border-radius:var(--ds-border-radius, 0.375rem);font-family:var(--ds-font-family-default, "AS Circular", Helvetica Neue, Arial, sans-serif);font-size:var(--ds-text-body-size-default, 1rem);font-weight:var(--ds-text-body-default-weight, 500);overflow:hidden;text-overflow:ellipsis;user-select:none;white-space:nowrap;min-height:var(--ds-size-600, 3rem);max-height:var(--ds-size-600, 3rem);display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--ds-size-100, 0.5rem);margin:0;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none}@media(hover: hover){.auro-button:active,.auro-button:hover{background-image:linear-gradient(var(--ds-color-ui-hover-default, #054687), var(--ds-color-ui-hover-default, #054687));border:1px solid var(--ds-color-ui-hover-default, #054687)}}.auro-button:active{background-color:var(--ds-color-ui-active-default, #054687);border:1px solid var(--ds-color-ui-active-default, #054687);transform:scale(0.95)}.auro-button.loading{cursor:not-allowed}.auro-button.loading *:not(auro-loader){visibility:hidden}.auro-button.loading auro-loader{color:var(--ds-color-background-darkest, #00274a, #00274a)}.auro-button.loading.auro-buttonOndark auro-loader{color:var(--ds-color-text-primary-inverse, #ffffff)}@media screen and (min-width: 576px){.auro-button{min-width:8.75rem;width:auto}}.auro-button:disabled{cursor:not-allowed;transform:unset;background-color:rgba(0, 116, 200, 0.4);border:1px solid rgba(0, 116, 200, 0)}@media(hover: hover){.auro-button:disabled:hover{background-color:rgba(0, 116, 200, 0.4);border:1px solid rgba(0, 116, 200, 0)}}.auro-button[variant=secondary],.auro-button--secondary{background-color:var(--ds-color-background-lightest, #ffffff);border:1px solid var(--ds-color-ui-default-default, #0074c8);color:var(--ds-color-text-link-default, #0074c8)}@media(hover: hover){.auro-button[variant=secondary]:active,.auro-button[variant=secondary]:hover,.auro-button--secondary:active,.auro-button--secondary:hover{background-image:linear-gradient(var(--ds-color-ui-bkg-hover-default, rgba(0, 0, 0, 0.06)), var(--ds-color-ui-bkg-hover-default, rgba(0, 0, 0, 0.06)));border:1px solid var(--ds-color-ui-default-default, #0074c8)}}.auro-button[variant=secondary]:active,.auro-button--secondary:active{background-color:var(--ds-color-ui-bkg-hover-default, rgba(0, 0, 0, 0.06));border:1px solid var(--ds-color-ui-default-default, #0074c8)}.auro-button[variant=secondary]:disabled,.auro-button--secondary:disabled{cursor:not-allowed;transform:unset;color:rgba(0, 116, 200, 0.4);background-color:rgba(255, 255, 255, 0.4);border:1px solid rgba(0, 116, 200, 0.4)}@media(hover: hover){.auro-button[variant=secondary]:disabled:hover,.auro-button--secondary:disabled:hover{color:rgba(0, 116, 200, 0.4);background-color:rgba(255, 255, 255, 0.4);border:1px solid rgba(0, 116, 200, 0.4)}}.auro-button[variant=tertiary],.auro-button--tertiary{background-color:rgba(0, 0, 0, 0.03);border-color:transparent;color:var(--ds-color-text-link-default, #0074c8)}@media(hover: hover){.auro-button[variant=tertiary]:active,.auro-button[variant=tertiary]:hover,.auro-button--tertiary:active,.auro-button--tertiary:hover{background-image:linear-gradient(var(--ds-color-ui-bkg-hover-default), var(--ds-color-ui-bkg-hover-default));border-color:transparent}}.auro-button[variant=tertiary]:active,.auro-button--tertiary:active{background-color:var(--ds-color-ui-bkg-hover-default, rgba(0, 0, 0, 0.06));border-color:transparent}.auro-button[variant=tertiary]:disabled,.auro-button--tertiary:disabled{cursor:not-allowed;transform:unset;color:rgba(0, 116, 200, 0.4);background-color:rgba(0, 0, 0, 0.03);border:1px solid transparent}@media(hover: hover){.auro-button[variant=tertiary]:disabled:hover,.auro-button--tertiary:disabled:hover{background-color:rgba(0, 0, 0, 0.03);border:1px solid transparent}}.auro-buttonOndark{background-color:var(--ds-color-ui-default-inverse, #00cff0);border:1px solid var(--ds-color-ui-default-inverse, #00cff0);color:var(--ds-color-text-primary-default)}@media(hover: hover){.auro-buttonOndark:active,.auro-buttonOndark:hover{background-image:linear-gradient(var(--ds-color-ui-hover-inverse, #5de3f7), var(--ds-color-ui-hover-inverse, #5de3f7));border:1px solid var(--ds-color-ui-hover-inverse, #5de3f7)}}.auro-buttonOndark:active{background-color:var(--ds-color-ui-active-inverse, #5de3f7);border:1px solid var(--ds-color-ui-active-inverse, #5de3f7)}.auro-buttonOndark:disabled{cursor:not-allowed;transform:unset;color:rgba(34, 34, 34, 0.4);background-color:rgba(0, 207, 240, 0.4);border:1px solid rgba(0, 207, 240, 0.4)}@media(hover: hover){.auro-buttonOndark:disabled:hover{color:rgba(34, 34, 34, 0.4);background-color:rgba(0, 207, 240, 0.4);border:1px solid rgba(0, 207, 240, 0.4)}}.auro-buttonOndark[variant=secondary],.auro-buttonOndark--secondary{background-color:var(--ds-color-background-darker, #01426a);border:1px solid var(--ds-color-ui-default-inverse, #00cff0);color:var(--ds-color-ui-default-inverse, #00cff0)}@media(hover: hover){.auro-buttonOndark[variant=secondary]:active,.auro-buttonOndark[variant=secondary]:hover,.auro-buttonOndark--secondary:active,.auro-buttonOndark--secondary:hover{background-image:linear-gradient(var(--ds-color-background-darkest, #00274a), var(--ds-color-background-darkest, #00274a))}}.auro-buttonOndark[variant=secondary]:active,.auro-buttonOndark--secondary:active{background-color:var(--ds-color-base-black-opacity-15, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15));border:1px solid var(--ds-color-ui-hover-inverse, #5de3f7)}@media(hover: hover){.auro-buttonOndark[variant=secondary]:disabled:hover,.auro-buttonOndark--secondary:disabled:hover{background-color:var(--ds-color-background-darker, #01426a);border:1px solid var(--ds-color-ui-default-inverse, #00cff0)}}.auro-buttonOndark[variant=secondary]:disabled,.auro-buttonOndark--secondary:disabled{cursor:not-allowed;transform:unset;color:rgba(0, 207, 240, 0.4);background-color:var(--ds-color-background-darker, #01426a);border:1px solid rgba(0, 207, 240, 0.4)}@media(hover: hover){.auro-buttonOndark[variant=secondary]:disabled:hover,.auro-buttonOndark--secondary:disabled:hover{color:rgba(0, 207, 240, 0.4);background-color:var(--ds-color-background-darker, #01426a);border:1px solid rgba(0, 207, 240, 0.4)}}.auro-buttonOndark[variant=tertiary],.auro-buttonOndark--tertiary{background-color:rgba(255, 255, 255, 0.03);border:1px solid transparent;color:var(--ds-color-ui-default-inverse, #00cff0)}@media(hover: hover){.auro-buttonOndark[variant=tertiary]:active,.auro-buttonOndark[variant=tertiary]:hover,.auro-buttonOndark--tertiary:active,.auro-buttonOndark--tertiary:hover{background-image:linear-gradient(var(--ds-color-ui-bkg-hover-inverse, rgba(255, 255, 255, 0.06)), var(--ds-color-ui-bkg-hover-inverse, rgba(255, 255, 255, 0.06)));border:1px solid transparent;box-shadow:none}}.auro-buttonOndark[variant=tertiary]:active,.auro-buttonOndark--tertiary:active{background-color:var(--ds-color-base-black-opacity-15, rgba(0, 0, 0, 0.15));border:1px solid transparent;box-shadow:none}.auro-buttonOndark[variant=tertiary]:disabled,.auro-buttonOndark--tertiary:disabled{cursor:not-allowed;transform:unset;background-color:rgba(255, 255, 255, 0.03);border:transparent;color:rgba(0, 207, 240, 0.4)}@media(hover: hover){.auro-buttonOndark[variant=tertiary]:disabled:hover,.auro-buttonOndark--tertiary:disabled:hover{background-color:rgba(255, 255, 255, 0.03);color:rgba(0, 207, 240, 0.4);border:transparent}}.auro-button--slim{padding:var(--ds-size-100, 0.5rem) var(--ds-size-200, 1rem);font-size:var(--ds-text-body-size-sm, 0.875rem);min-width:unset;min-height:2.25rem;max-height:2.25rem}.auro-button--iconOnly{padding-left:calc(var(--ds-size-100, 0.5rem) - var(--ds-size-25, 0.125rem));padding-right:calc(var(--ds-size-100, 0.5rem) - var(--ds-size-25, 0.125rem));border-radius:100px;min-width:unset}.auro-button--iconOnly ::slotted(auro-icon){width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem)}.auro-button--iconOnlySlim{padding-left:var(--ds-size-50, 0.25rem);padding-right:var(--ds-size-50, 0.25rem)}.auro-button--iconOnlySlim ::slotted(auro-icon){width:calc(var(--ds-size-300, 1.5rem) - var(--ds-size-50, 0.25rem));height:calc(var(--ds-size-300, 1.5rem) - var(--ds-size-50, 0.25rem))}.auro-button--rounded{border-radius:100px;box-shadow:var(--ds-elevation-300, 0px 0px 15px rgba(0, 0, 0, 0.2));height:var(--ds-size-500, 2.5rem);min-width:unset;transition:all 300ms ease-out}.auro-button--rounded ::slotted(auro-icon){width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem)}:host([rounded]) .textSlot{transition:opacity 300ms ease-in;opacity:1}:host([rounded][iconOnly]) .textSlot{opacity:0}:host([rounded][iconOnly]) .textWrapper{display:none}:host([rounded][iconOnly]) .auro-button{min-width:unset;padding:unset;width:var(--ds-size-600, 3rem)}auro-loader{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);pointer-events:none}`;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

261385

decreased by-2.04%

Dependency count

5

increased by25%

Dev dependency count

42

increased by5%

Number of package files

18

decreased by-5.26%

Lines of code

3559

decreased by-6.27%

Dependency changes

• + Added@aurodesignsystem/design-tokens@4.11.0(transitive)

• + Added@aurodesignsystem/webcorestylesheets@5.1.2(transitive)

• + Added@lit/reactive-element@2.0.4(transitive)

• + Addedlit@3.2.1(transitive)

• + Addedlit-element@4.1.1(transitive)

• + Addedlit-html@3.2.1(transitive)

• - Removed@lit/reactive-element@1.6.3(transitive)

• - Removedlit@2.8.0(transitive)

• - Removedlit-element@3.3.3(transitive)

• - Removedlit-html@2.8.0(transitive)

• Updatedlit@^3.0.2