Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@aurodesignsystem/auro-button

Package Overview
Dependencies
Maintainers
0
Versions
29
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@aurodesignsystem/auro-button - npm Package Compare versions

Comparing version 7.2.9 to 7.2.10

7

CHANGELOG.md
# Semantic Release Automated Changelog
## [7.2.10](https://github.com/AlaskaAirlines/auro-button/compare/v7.2.9...v7.2.10) (2024-07-08)
### Bug Fixes
* **hover:** remove disabled hover UI [#256](https://github.com/AlaskaAirlines/auro-button/issues/256) ([13fd26b](https://github.com/AlaskaAirlines/auro-button/commit/13fd26bdc068d6ee8bc35dba993bb8e400148d37))
## [7.2.9](https://github.com/AlaskaAirlines/auro-button/compare/v7.2.8...v7.2.9) (2024-02-23)

@@ -4,0 +11,0 @@

2

dist/auro-button__bundled.js

@@ -49,3 +49,3 @@ /**

var styleCss$1 = i$3`*,*: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:calc(var(--ds-size-500, 2.5rem) - var(--ds-size-50, 0.25rem));max-height:calc(var(--ds-size-500, 2.5rem) - var(--ds-size-50, 0.25rem))}.auro-button--iconOnly{padding:0 var(--ds-size-100, 0.5rem);border-radius:100px;min-width:unset;height:var(--ds-size-600, 3rem);width:var(--ds-size-500, 2.5rem)}.auro-button--iconOnly ::slotted(auro-icon){width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem)}.auro-button--iconOnlySlim{padding:0 var(--ds-size-50, 0.25rem);height:calc(var(--ds-size-400, 2rem) + var(--ds-size-50, 0.25rem));width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-50, 0.25rem))}.auro-button--iconOnlySlim ::slotted(auro-icon){width:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem));height:calc(var(--ds-size-200, 1rem) + 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}`;
var styleCss$1 = i$3`*,*: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:not(:disabled){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)}.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:not(:disabled),.auro-button--secondary:active,.auro-button--secondary:hover:not(:disabled){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)}.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:not(:disabled),.auro-button--tertiary:active,.auro-button--tertiary:hover:not(:disabled){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}.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:not(:disabled){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(42, 42, 42, 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:not(:disabled),.auro-buttonOndark--secondary:active,.auro-buttonOndark--secondary:hover:not(:disabled){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)}.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:calc(var(--ds-size-500, 2.5rem) - var(--ds-size-50, 0.25rem));max-height:calc(var(--ds-size-500, 2.5rem) - var(--ds-size-50, 0.25rem))}.auro-button--iconOnly{padding:0 var(--ds-size-100, 0.5rem);border-radius:100px;min-width:unset;height:var(--ds-size-600, 3rem);width:var(--ds-size-500, 2.5rem)}.auro-button--iconOnly ::slotted(auro-icon){width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem)}.auro-button--iconOnlySlim{padding:0 var(--ds-size-50, 0.25rem);height:calc(var(--ds-size-400, 2rem) + var(--ds-size-50, 0.25rem));width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-50, 0.25rem))}.auro-button--iconOnlySlim ::slotted(auro-icon){width:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem));height:calc(var(--ds-size-200, 1rem) + 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}`;

@@ -52,0 +52,0 @@ var styleCss = i$3`*,*: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}:host,:host>span{position:relative}:host{width:2rem;height:2rem;display:inline-block;font-size:0;color:currentcolor}:host>span{position:absolute;display:inline-block;float:none;top:0;left:0;width:2rem;height:2rem;border-radius:100%;background-color:currentcolor;border:0 solid currentcolor}:host([xs]),:host([xs])>span{width:1.2rem;height:1.2rem}:host([sm]),:host([sm])>span{width:3rem;height:3rem}:host([md]),:host([md])>span{width:5rem;height:5rem}:host([lg]),:host([lg])>span{width:8rem;height:8rem}:host([onlight]){color:var(--ds-color-ui-default-default, #0074c8)}:host([ondark]){color:var(--ds-color-brand-breeze-300, ds-color-brand-breeze-300)}:host([white]){color:var(--ds-color-base-white, #ffffff)}:host{--margin:0.375rem;--margin-xs:0.2rem;--margin-sm:0.5rem;--margin-md:0.75rem;--margin-lg:1rem}:host([pulse]),:host([pulse])>span{position:relative}:host([pulse]){width:calc(3rem + var(--margin)*6);height:1.5rem}:host([pulse])>span{width:1rem;height:1rem;margin:var(--margin);animation:pulse 1.5s ease infinite}:host([pulse][xs]){width:calc(2.55rem + var(--margin-xs)*6);height:1.55rem}:host([pulse][xs])>span{margin:var(--margin-xs);width:.65rem;height:.65rem}:host([pulse][sm]){width:calc(6rem + var(--margin-sm)*6);height:2.5rem}:host([pulse][sm])>span{margin:var(--margin-sm);width:2rem;height:2rem}:host([pulse][md]){width:calc(9rem + var(--margin-md)*6);height:3.5rem}:host([pulse][md])>span{margin:var(--margin-md);width:3rem;height:3rem}:host([pulse][lg]){width:calc(15rem + var(--margin-lg)*6);height:5.5rem}:host([pulse][lg])>span{margin:var(--margin-lg);width:5rem;height:5rem}:host([pulse])>span:nth-child(1){animation-delay:-400ms}:host([pulse])>span:nth-child(2){animation-delay:-200ms}:host([pulse])>span:nth-child(3){animation-delay:0ms}@keyframes pulse{0%,100%{opacity:.1;transform:scale(0.9)}50%{opacity:1;transform:scale(1.1)}}:host([orbit]),:host([orbit])>span{opacity:1}:host([orbit])>span{background:transparent;border-width:5px}:host([orbit])>span:nth-child(1){border-color:currentcolor;opacity:.25}:host([orbit])>span:nth-child(2){border-color:currentcolor;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;animation:orbit 2s linear infinite}:host([orbit][sm])>span{border-width:8px}:host([orbit][md])>span{border-width:13px}:host([orbit][lg])>span{border-width:21px}@keyframes orbit{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}:host([ringworm])>svg{animation:rotate 2s linear infinite;height:100%;width:100%;stroke:currentcolor;stroke-width:8}:host([ringworm]) .path{stroke-dashoffset:0;animation:ringworm 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes ringworm{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}100%{stroke-dasharray:89,200;stroke-dashoffset:-124px}}:host([laser]){position:static;width:100%;display:block;height:0;overflow:hidden;font-size:unset}:host([laser])>span{position:fixed;width:100%;height:.25rem;border-radius:0;z-index:100}:host([laser])>span:nth-child(1){border-color:currentcolor;opacity:.25}:host([laser])>span:nth-child(2){border-color:currentcolor;animation:laser 2s linear infinite;opacity:1;width:50%}:host([laser][sm])>span:nth-child(2){width:20%}:host([laser][md])>span:nth-child(2){width:30%}:host([laser][lg])>span:nth-child(2){width:50%;animation-duration:1.5s}:host([laser][xl])>span:nth-child(2){width:80%;animation-duration:1.5s}@keyframes laser{0%{left:-100%}100%{left:110%}}:host>.no-animation{display:none}@media(prefers-reduced-motion: reduce){:host{display:flex;align-items:center;justify-content:center;font-size:1rem}:host>span{opacity:1}:host>.loader{display:none}:host>.no-animation{display:block}}`;

@@ -10,3 +10,3 @@ {

"name": "@aurodesignsystem/auro-button",
"version": "7.2.9",
"version": "7.2.10",
"description": "Auro custom auro-button element",

@@ -27,3 +27,3 @@ "author": "Product design and research",

"chalk": "^5.3.0",
"lit": "^3.1.2"
"lit": "^3.1.4"
},

@@ -35,15 +35,15 @@ "peerDependencies": {

"devDependencies": {
"@aurodesignsystem/auro-library": "^2.5.1",
"@aurodesignsystem/design-tokens": "^4.3.1",
"@aurodesignsystem/auro-library": "^2.6.0",
"@aurodesignsystem/design-tokens": "^4.7.0",
"@aurodesignsystem/eslint-config": "^1.3.1",
"@aurodesignsystem/webcorestylesheets": "^5.0.8",
"@commitlint/cli": "^18.6.1",
"@commitlint/config-conventional": "^18.6.2",
"@aurodesignsystem/webcorestylesheets": "^5.1.1",
"@commitlint/cli": "^19.3.0",
"@commitlint/config-conventional": "^19.2.2",
"@open-wc/testing": "^4.0.0",
"@semantic-release/changelog": "^6.0.3",
"@semantic-release/git": "^10.0.1",
"@semantic-release/npm": "^11.0.2",
"@web/dev-server": "^0.4.3",
"@web/test-runner": "^0.18.0",
"autoprefixer": "^10.4.17",
"@semantic-release/npm": "^12.0.1",
"@web/dev-server": "^0.4.5",
"@web/test-runner": "^0.18.2",
"autoprefixer": "^10.4.19",
"compression": "^1.7.4",

@@ -53,24 +53,24 @@ "concat": "^1.0.3",

"copyfiles": "^2.4.1",
"core-js": "^3.36.0",
"core-js": "^3.37.1",
"eslint": "^8.57.0",
"eslint-plugin-jsdoc": "^48.2.0",
"eslint-plugin-lit": "^1.11.0",
"eslint-plugin-jsdoc": "^48.2.12",
"eslint-plugin-lit": "^1.14.0",
"husky": "^9.0.11",
"lodash": "^4.17.21",
"markdown-magic": "^2.6.1",
"nodemon": "^3.1.0",
"nodemon": "^3.1.4",
"npm-run-all": "^4.1.5",
"postcss": "^8.4.35",
"postcss-discard-comments": "^6.0.1",
"postcss": "^8.4.38",
"postcss-discard-comments": "^7.0.1",
"postcss-selector-replace": "^1.0.2",
"rollup": "^4.12.0",
"rollup": "^4.18.0",
"rollup-plugin-serve": "^2.0.2",
"semantic-release": "^23.0.2",
"sinon": "^17.0.1",
"stylelint": "^16.2.1",
"stylelint-config-standard": "^36.0.0",
"stylelint-config-standard-scss": "^13.0.0",
"semantic-release": "^24.0.0",
"sinon": "^18.0.0",
"stylelint": "^16.6.1",
"stylelint-config-standard": "^36.0.1",
"stylelint-config-standard-scss": "^13.1.0",
"stylelint-order": "^6.0.4",
"stylelint-scss": "^6.1.0",
"typescript": "^5.3.3",
"stylelint-scss": "^6.3.2",
"typescript": "^5.5.2",
"wc-sass-render": "^1.4.0",

@@ -95,4 +95,6 @@ "web-component-analyzer": "^2.0.0",

"scripts": {
"build": "npm-run-all build:sass sass:render scssLint dist:js build:docs bundler postinstall build:api types",
"build:ci": "npm-run-all sweep build",
"build": "npm-run-all build:sass sass:render types",
"build:test": "npm-run-all test linters",
"build:release": "npm-run-all build build:test build:api build:docs bundler postinstall",
"build:ci": "npm-run-all sweep build:release",
"build:dev:assets": "npm-run-all build:sass:component postCss:component sass:render",

@@ -124,3 +126,11 @@ "build:api": "wca analyze 'src/auro-button.js' --outFiles docs/api.md",

"release": {
"branch": "master",
"branches": [
{
"name": "master"
},
{
"name": "beta",
"prerelease": true
}
],
"plugins": [

@@ -127,0 +137,0 @@ "@semantic-release/commit-analyzer",

@@ -122,3 +122,3 @@ <!--

<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-button@7.2.9/dist/auro-button__bundled.js" type="module"></script>
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@7.2.10/dist/auro-button__bundled.js" type="module"></script>
```

@@ -125,0 +125,0 @@

@@ -7,2 +7,2 @@ // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license

import {css} from 'lit';
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:calc(var(--ds-size-500, 2.5rem) - var(--ds-size-50, 0.25rem));max-height:calc(var(--ds-size-500, 2.5rem) - var(--ds-size-50, 0.25rem))}.auro-button--iconOnly{padding:0 var(--ds-size-100, 0.5rem);border-radius:100px;min-width:unset;height:var(--ds-size-600, 3rem);width:var(--ds-size-500, 2.5rem)}.auro-button--iconOnly ::slotted(auro-icon){width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem)}.auro-button--iconOnlySlim{padding:0 var(--ds-size-50, 0.25rem);height:calc(var(--ds-size-400, 2rem) + var(--ds-size-50, 0.25rem));width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-50, 0.25rem))}.auro-button--iconOnlySlim ::slotted(auro-icon){width:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem));height:calc(var(--ds-size-200, 1rem) + 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}`;
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:not(:disabled){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)}.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:not(:disabled),.auro-button--secondary:active,.auro-button--secondary:hover:not(:disabled){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)}.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:not(:disabled),.auro-button--tertiary:active,.auro-button--tertiary:hover:not(:disabled){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}.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:not(:disabled){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(42, 42, 42, 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:not(:disabled),.auro-buttonOndark--secondary:active,.auro-buttonOndark--secondary:hover:not(:disabled){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)}.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:calc(var(--ds-size-500, 2.5rem) - var(--ds-size-50, 0.25rem));max-height:calc(var(--ds-size-500, 2.5rem) - var(--ds-size-50, 0.25rem))}.auro-button--iconOnly{padding:0 var(--ds-size-100, 0.5rem);border-radius:100px;min-width:unset;height:var(--ds-size-600, 3rem);width:var(--ds-size-500, 2.5rem)}.auro-button--iconOnly ::slotted(auro-icon){width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem)}.auro-button--iconOnlySlim{padding:0 var(--ds-size-50, 0.25rem);height:calc(var(--ds-size-400, 2rem) + var(--ds-size-50, 0.25rem));width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-50, 0.25rem))}.auro-button--iconOnlySlim ::slotted(auro-icon){width:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem));height:calc(var(--ds-size-200, 1rem) + 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}`;
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc