npm - @uh-design-system/component-library - Versions diffs - 1.2.0 → 1.3.0-rc.0 - Mend

@uh-design-system/component-library 1.2.0 → 1.3.0-rc.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1701) hide show

package/dist/collection/components/01-base-components/ds-button/ds-button.css CHANGED Viewed

@@ -7,11 +7,11 @@
 :host {
   display: inline-block;
 }
-:host:has(.ds-button__DFAX9n--full-width) {
+:host:has(.ds-button__HTSRrd--full-width) {
   width: 100%;
 }
-.ds-button__DFAX9n {
+.ds-button__HTSRrd {
   width: 100%;
   align-items: center;
   border-radius: 0;
@@ -22,47 +22,47 @@
   outline: 4px solid transparent;
   justify-content: center;
 }
-.ds-button__DFAX9n:not(.ds-button__DFAX9n--supplementary) .ds-button__DFAX9n__value {
+.ds-button__HTSRrd:not(.ds-button__HTSRrd--supplementary) .ds-button__HTSRrd__value {
   padding-right: var(--ds-spacing-3xSmall);
   padding-left: var(--ds-spacing-3xSmall);
 }
-.ds-button__DFAX9n--supplementary:has(.ds-button__DFAX9n__spinner) .ds-button__DFAX9n__value {
+.ds-button__HTSRrd--supplementary:has(.ds-button__HTSRrd__spinner) .ds-button__HTSRrd__value {
   padding-right: 0;
   padding-left: var(--ds-spacing-3xSmall);
 }
-.ds-button__DFAX9n__icon {
+.ds-button__HTSRrd__icon {
   height: 1.5rem;
 }
-.ds-button__DFAX9n:has(.ds-button__DFAX9n__spinner):not(.ds-button__DFAX9n--small) .ds-button__DFAX9n__value {
+.ds-button__HTSRrd:has(.ds-button__HTSRrd__spinner):not(.ds-button__HTSRrd--small) .ds-button__HTSRrd__value {
   margin-left: var(--ds-spacing-3xSmall);
 }
-.ds-button__DFAX9n__spinner {
+.ds-button__HTSRrd__spinner {
   display: flex;
 }
-.ds-button__DFAX9n--icon-only {
+.ds-button__HTSRrd--icon-only {
   aspect-ratio: 1;
   justify-content: center;
 }
-.ds-button__DFAX9n:not(.ds-button__DFAX9n--small):not(.ds-button__DFAX9n--secondary) {
+.ds-button__HTSRrd:not(.ds-button__HTSRrd--small):not(.ds-button__HTSRrd--secondary) {
   border-width: 0px;
   font-size: var(--ds-fontSize-18);
   min-height: 44px;
   padding: var(--ds-spacing-3xSmall) var(--ds-spacing-xSmall);
 }
-.ds-button__DFAX9n:not(.ds-button__DFAX9n--small).ds-button__DFAX9n--secondary {
+.ds-button__HTSRrd:not(.ds-button__HTSRrd--small).ds-button__HTSRrd--secondary {
   border-width: var(--ds-borderWidth-thin);
   font-size: var(--ds-fontSize-18);
   min-height: 44px;
   padding: var(--ds-spacing-3xSmall) var(--ds-spacing-xSmall);
 }
-.ds-button__DFAX9n:not(.ds-button__DFAX9n--small).ds-button__DFAX9n--icon-only {
+.ds-button__HTSRrd:not(.ds-button__HTSRrd--small).ds-button__HTSRrd--icon-only {
   padding-left: 0;
   padding-right: 0;
 }
-.ds-button__DFAX9n--small.ds-button__DFAX9n--icon-start, .ds-button__DFAX9n--small.ds-button__DFAX9n--icon-end {
+.ds-button__HTSRrd--small.ds-button__HTSRrd--icon-start, .ds-button__HTSRrd--small.ds-button__HTSRrd--icon-end {
   gap: var(--ds-spacing-3xSmall);
 }
-.ds-button__DFAX9n--small:not(.ds-button__DFAX9n--secondary) {
+.ds-button__HTSRrd--small:not(.ds-button__HTSRrd--secondary) {
   border-width: 0px;
   font-size: var(--ds-fontSize-16);
   font-weight: var(--ds-fontWeight-semibold);
@@ -71,7 +71,7 @@
   min-height: 32px;
   padding: var(--ds-spacing-4xSmall) var(--ds-spacing-2xSmall);
 }
-.ds-button__DFAX9n--small.ds-button__DFAX9n--secondary {
+.ds-button__HTSRrd--small.ds-button__HTSRrd--secondary {
   border-width: var(--ds-borderWidth-thin);
   font-size: var(--ds-fontSize-16);
   font-weight: var(--ds-fontWeight-semibold);
@@ -80,212 +80,277 @@
   min-height: 32px;
   padding: var(--ds-spacing-4xSmall) var(--ds-spacing-2xSmall);
 }
-.ds-button__DFAX9n--small.ds-button__DFAX9n--icon-only {
+.ds-button__HTSRrd--small.ds-button__HTSRrd--icon-only {
   padding-left: 0;
   padding-right: 0;
   width: 32px;
 }
-.ds-button__DFAX9n--small .ds-button__DFAX9n__icon {
+.ds-button__HTSRrd--small .ds-button__HTSRrd__icon {
   height: auto;
 }
-.ds-button__DFAX9n--icon-start:not(.ds-button__DFAX9n--small) .ds-button__DFAX9n__icon {
+.ds-button__HTSRrd--icon-start:not(.ds-button__HTSRrd--small) .ds-button__HTSRrd__icon {
   margin-right: var(--ds-spacing-3xSmall);
 }
-.ds-button__DFAX9n--icon-end:not(.ds-button__DFAX9n--small) .ds-button__DFAX9n__icon {
+.ds-button__HTSRrd--icon-end:not(.ds-button__HTSRrd--small) .ds-button__HTSRrd__icon {
   margin-left: var(--ds-spacing-3xSmall);
 }
-.ds-button__DFAX9n.ds-button__DFAX9n--primary.ds-button__DFAX9n--blue:focus-visible {
+.ds-button__HTSRrd.ds-button__HTSRrd--primary.ds-button__HTSRrd--blue:focus-visible {
   box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
   outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
   outline-offset: calc(var(--ds-borderWidth-thin) * 1);
 }
-.ds-button__DFAX9n.ds-button__DFAX9n--primary.ds-button__DFAX9n--blue {
+.ds-button__HTSRrd.ds-button__HTSRrd--primary.ds-button__HTSRrd--blue {
   background-color: var(--ds-bgColor-primary);
   border-color: transparent;
   color: var(--ds-textColor-white);
 }
-.ds-button__DFAX9n.ds-button__DFAX9n--primary.ds-button__DFAX9n--blue:hover {
+.ds-button__HTSRrd.ds-button__HTSRrd--primary.ds-button__HTSRrd--blue:hover {
   background-color: var(--ds-bgColor-primary-hover);
 }
-.ds-button__DFAX9n.ds-button__DFAX9n--primary.ds-button__DFAX9n--blue:active, .ds-button__DFAX9n.ds-button__DFAX9n--primary.ds-button__DFAX9n--blue--active {
+.ds-button__HTSRrd.ds-button__HTSRrd--primary.ds-button__HTSRrd--blue:active, .ds-button__HTSRrd.ds-button__HTSRrd--primary.ds-button__HTSRrd--blue--active {
   background-color: var(--ds-bgColor-primary-active);
 }
-.ds-button__DFAX9n.ds-button__DFAX9n--primary.ds-button__DFAX9n--blue.ds-button__DFAX9n--disabled, .ds-button__DFAX9n.ds-button__DFAX9n--primary.ds-button__DFAX9n--blue:disabled {
+.ds-button__HTSRrd.ds-button__HTSRrd--primary.ds-button__HTSRrd--blue.ds-button__HTSRrd--disabled, .ds-button__HTSRrd.ds-button__HTSRrd--primary.ds-button__HTSRrd--blue:disabled {
   background-color: var(--ds-bgColor-disabled-onLight);
   border-color: transparent;
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-button__DFAX9n.ds-button__DFAX9n--primary.ds-button__DFAX9n--black:focus-visible {
+.ds-button__HTSRrd.ds-button__HTSRrd--primary.ds-button__HTSRrd--black:focus-visible {
   box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
   outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
   outline-offset: calc(var(--ds-borderWidth-thin) * 1);
 }
-.ds-button__DFAX9n.ds-button__DFAX9n--primary.ds-button__DFAX9n--black {
+.ds-button__HTSRrd.ds-button__HTSRrd--primary.ds-button__HTSRrd--black {
   background-color: var(--ds-bgColor-black);
   border-color: transparent;
   color: var(--ds-textColor-white);
 }
-.ds-button__DFAX9n.ds-button__DFAX9n--primary.ds-button__DFAX9n--black:hover {
+.ds-button__HTSRrd.ds-button__HTSRrd--primary.ds-button__HTSRrd--black:hover {
   background-color: var(--ds-bgColor-black-hover);
 }
-.ds-button__DFAX9n.ds-button__DFAX9n--primary.ds-button__DFAX9n--black:active, .ds-button__DFAX9n.ds-button__DFAX9n--primary.ds-button__DFAX9n--black--active {
+.ds-button__HTSRrd.ds-button__HTSRrd--primary.ds-button__HTSRrd--black:active, .ds-button__HTSRrd.ds-button__HTSRrd--primary.ds-button__HTSRrd--black--active {
   background-color: var(--ds-bgColor-black-active);
 }
-.ds-button__DFAX9n.ds-button__DFAX9n--primary.ds-button__DFAX9n--black.ds-button__DFAX9n--disabled, .ds-button__DFAX9n.ds-button__DFAX9n--primary.ds-button__DFAX9n--black:disabled {
+.ds-button__HTSRrd.ds-button__HTSRrd--primary.ds-button__HTSRrd--black.ds-button__HTSRrd--disabled, .ds-button__HTSRrd.ds-button__HTSRrd--primary.ds-button__HTSRrd--black:disabled {
   background-color: var(--ds-bgColor-disabled-onLight);
   border-color: transparent;
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-button__DFAX9n.ds-button__DFAX9n--primary.ds-button__DFAX9n--white:focus-visible {
+.ds-button__HTSRrd.ds-button__HTSRrd--primary.ds-button__HTSRrd--white:focus-visible {
   box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-black);
   outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-white);
   outline-offset: calc(var(--ds-borderWidth-thin) * 1);
 }
-.ds-button__DFAX9n.ds-button__DFAX9n--primary.ds-button__DFAX9n--white {
+.ds-button__HTSRrd.ds-button__HTSRrd--primary.ds-button__HTSRrd--white {
   background-color: var(--ds-bgColor-white);
   border-color: transparent;
   color: var(--ds-textColor-default);
 }
-.ds-button__DFAX9n.ds-button__DFAX9n--primary.ds-button__DFAX9n--white:hover {
+.ds-button__HTSRrd.ds-button__HTSRrd--primary.ds-button__HTSRrd--white:hover {
   background-color: var(--ds-bgColor-white-hover);
 }
-.ds-button__DFAX9n.ds-button__DFAX9n--primary.ds-button__DFAX9n--white:active, .ds-button__DFAX9n.ds-button__DFAX9n--primary.ds-button__DFAX9n--white--active {
+.ds-button__HTSRrd.ds-button__HTSRrd--primary.ds-button__HTSRrd--white:active, .ds-button__HTSRrd.ds-button__HTSRrd--primary.ds-button__HTSRrd--white--active {
   background-color: var(--ds-bgColor-white-active);
 }
-.ds-button__DFAX9n.ds-button__DFAX9n--primary.ds-button__DFAX9n--white.ds-button__DFAX9n--disabled, .ds-button__DFAX9n.ds-button__DFAX9n--primary.ds-button__DFAX9n--white:disabled {
+.ds-button__HTSRrd.ds-button__HTSRrd--primary.ds-button__HTSRrd--white.ds-button__HTSRrd--disabled, .ds-button__HTSRrd.ds-button__HTSRrd--primary.ds-button__HTSRrd--white:disabled {
   background-color: var(--ds-bgColor-disabled-onDark);
   border-color: transparent;
   color: var(--ds-textColor-disabled-onDark);
 }
-.ds-button__DFAX9n.ds-button__DFAX9n--secondary.ds-button__DFAX9n--blue:focus-visible {
+.ds-button__HTSRrd.ds-button__HTSRrd--primary.ds-button__HTSRrd--danger:focus-visible {
   box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
   outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
   outline-offset: calc(var(--ds-borderWidth-thin) * 1);
 }
-.ds-button__DFAX9n.ds-button__DFAX9n--secondary.ds-button__DFAX9n--blue {
+.ds-button__HTSRrd.ds-button__HTSRrd--primary.ds-button__HTSRrd--danger {
+  background-color: var(--ds-bgColor-danger-bold);
+  border-color: transparent;
+  color: var(--ds-textColor-white);
+}
+.ds-button__HTSRrd.ds-button__HTSRrd--primary.ds-button__HTSRrd--danger:hover {
+  background-color: var(--ds-bgColor-danger-bold-hover);
+}
+.ds-button__HTSRrd.ds-button__HTSRrd--primary.ds-button__HTSRrd--danger:active, .ds-button__HTSRrd.ds-button__HTSRrd--primary.ds-button__HTSRrd--danger--active {
+  background-color: var(--ds-bgColor-danger-bold-active);
+}
+.ds-button__HTSRrd.ds-button__HTSRrd--primary.ds-button__HTSRrd--danger.ds-button__HTSRrd--disabled, .ds-button__HTSRrd.ds-button__HTSRrd--primary.ds-button__HTSRrd--danger:disabled {
+  background-color: var(--ds-bgColor-disabled-onLight);
+  border-color: transparent;
+  color: var(--ds-textColor-disabled-onLight);
+}
+.ds-button__HTSRrd.ds-button__HTSRrd--secondary.ds-button__HTSRrd--blue:focus-visible {
+  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
+  outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
+  outline-offset: calc(var(--ds-borderWidth-thin) * 1);
+}
+.ds-button__HTSRrd.ds-button__HTSRrd--secondary.ds-button__HTSRrd--blue {
   background-color: var(--ds-bgColor-secondary);
   border-color: var(--ds-borderColor-primary);
   color: var(--ds-textColor-primary);
 }
-.ds-button__DFAX9n.ds-button__DFAX9n--secondary.ds-button__DFAX9n--blue:hover {
+.ds-button__HTSRrd.ds-button__HTSRrd--secondary.ds-button__HTSRrd--blue:hover {
   background-color: var(--ds-bgColor-secondary-hover);
 }
-.ds-button__DFAX9n.ds-button__DFAX9n--secondary.ds-button__DFAX9n--blue:active, .ds-button__DFAX9n.ds-button__DFAX9n--secondary.ds-button__DFAX9n--blue--active {
+.ds-button__HTSRrd.ds-button__HTSRrd--secondary.ds-button__HTSRrd--blue:active, .ds-button__HTSRrd.ds-button__HTSRrd--secondary.ds-button__HTSRrd--blue--active {
   background-color: var(--ds-bgColor-secondary-active);
 }
-.ds-button__DFAX9n.ds-button__DFAX9n--secondary.ds-button__DFAX9n--blue.ds-button__DFAX9n--disabled, .ds-button__DFAX9n.ds-button__DFAX9n--secondary.ds-button__DFAX9n--blue:disabled {
+.ds-button__HTSRrd.ds-button__HTSRrd--secondary.ds-button__HTSRrd--blue.ds-button__HTSRrd--disabled, .ds-button__HTSRrd.ds-button__HTSRrd--secondary.ds-button__HTSRrd--blue:disabled {
   background-color: var(--ds-bgColor-secondary);
   border-color: var(--ds-borderColor-disabled-onLight);
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-button__DFAX9n.ds-button__DFAX9n--secondary.ds-button__DFAX9n--black:focus-visible {
+.ds-button__HTSRrd.ds-button__HTSRrd--secondary.ds-button__HTSRrd--black:focus-visible {
   box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
   outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
   outline-offset: calc(var(--ds-borderWidth-thin) * 1);
 }
-.ds-button__DFAX9n.ds-button__DFAX9n--secondary.ds-button__DFAX9n--black {
+.ds-button__HTSRrd.ds-button__HTSRrd--secondary.ds-button__HTSRrd--black {
   background-color: var(--ds-bgColor-secondary);
   border-color: var(--ds-borderColor-black);
   color: var(--ds-textColor-default);
 }
-.ds-button__DFAX9n.ds-button__DFAX9n--secondary.ds-button__DFAX9n--black:hover {
+.ds-button__HTSRrd.ds-button__HTSRrd--secondary.ds-button__HTSRrd--black:hover {
   background-color: var(--ds-bgColor-transparent-onLight-hover);
 }
-.ds-button__DFAX9n.ds-button__DFAX9n--secondary.ds-button__DFAX9n--black:active, .ds-button__DFAX9n.ds-button__DFAX9n--secondary.ds-button__DFAX9n--black--active {
+.ds-button__HTSRrd.ds-button__HTSRrd--secondary.ds-button__HTSRrd--black:active, .ds-button__HTSRrd.ds-button__HTSRrd--secondary.ds-button__HTSRrd--black--active {
   background-color: var(--ds-bgColor-transparent-onLight-active);
 }
-.ds-button__DFAX9n.ds-button__DFAX9n--secondary.ds-button__DFAX9n--black.ds-button__DFAX9n--disabled, .ds-button__DFAX9n.ds-button__DFAX9n--secondary.ds-button__DFAX9n--black:disabled {
+.ds-button__HTSRrd.ds-button__HTSRrd--secondary.ds-button__HTSRrd--black.ds-button__HTSRrd--disabled, .ds-button__HTSRrd.ds-button__HTSRrd--secondary.ds-button__HTSRrd--black:disabled {
   background-color: transparent;
   border-color: var(--ds-borderColor-disabled-onLight);
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-button__DFAX9n.ds-button__DFAX9n--secondary.ds-button__DFAX9n--white:focus-visible {
+.ds-button__HTSRrd.ds-button__HTSRrd--secondary.ds-button__HTSRrd--white:focus-visible {
   box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-black);
   outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-white);
   outline-offset: calc(var(--ds-borderWidth-thin) * 1);
 }
-.ds-button__DFAX9n.ds-button__DFAX9n--secondary.ds-button__DFAX9n--white {
+.ds-button__HTSRrd.ds-button__HTSRrd--secondary.ds-button__HTSRrd--white {
   background-color: var(--ds-bgColor-secondary);
   border-color: var(--ds-borderColor-white);
   color: var(--ds-textColor-white);
 }
-.ds-button__DFAX9n.ds-button__DFAX9n--secondary.ds-button__DFAX9n--white:hover {
+.ds-button__HTSRrd.ds-button__HTSRrd--secondary.ds-button__HTSRrd--white:hover {
   background-color: var(--ds-bgColor-transparent-onDark-hover);
 }
-.ds-button__DFAX9n.ds-button__DFAX9n--secondary.ds-button__DFAX9n--white:active, .ds-button__DFAX9n.ds-button__DFAX9n--secondary.ds-button__DFAX9n--white--active {
+.ds-button__HTSRrd.ds-button__HTSRrd--secondary.ds-button__HTSRrd--white:active, .ds-button__HTSRrd.ds-button__HTSRrd--secondary.ds-button__HTSRrd--white--active {
   background-color: var(--ds-bgColor-transparent-onDark-active);
 }
-.ds-button__DFAX9n.ds-button__DFAX9n--secondary.ds-button__DFAX9n--white.ds-button__DFAX9n--disabled, .ds-button__DFAX9n.ds-button__DFAX9n--secondary.ds-button__DFAX9n--white:disabled {
+.ds-button__HTSRrd.ds-button__HTSRrd--secondary.ds-button__HTSRrd--white.ds-button__HTSRrd--disabled, .ds-button__HTSRrd.ds-button__HTSRrd--secondary.ds-button__HTSRrd--white:disabled {
   background-color: transparent;
   border-color: var(--ds-borderColor-disabled-onDark);
   color: var(--ds-textColor-disabled-onDark);
 }
-.ds-button__DFAX9n.ds-button__DFAX9n--supplementary.ds-button__DFAX9n--blue:focus-visible {
+.ds-button__HTSRrd.ds-button__HTSRrd--secondary.ds-button__HTSRrd--danger:focus-visible {
+  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
+  outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
+  outline-offset: calc(var(--ds-borderWidth-thin) * 1);
+}
+.ds-button__HTSRrd.ds-button__HTSRrd--secondary.ds-button__HTSRrd--danger {
+  background-color: var(--ds-bgColor-secondary);
+  border-color: var(--ds-borderColor-danger);
+  color: var(--ds-textColor-danger);
+}
+.ds-button__HTSRrd.ds-button__HTSRrd--secondary.ds-button__HTSRrd--danger:hover {
+  background-color: var(--ds-bgColor-danger);
+}
+.ds-button__HTSRrd.ds-button__HTSRrd--secondary.ds-button__HTSRrd--danger:active, .ds-button__HTSRrd.ds-button__HTSRrd--secondary.ds-button__HTSRrd--danger--active {
+  background-color: var(--ds-bgColor-danger-hover);
+}
+.ds-button__HTSRrd.ds-button__HTSRrd--secondary.ds-button__HTSRrd--danger.ds-button__HTSRrd--disabled, .ds-button__HTSRrd.ds-button__HTSRrd--secondary.ds-button__HTSRrd--danger:disabled {
+  background-color: transparent;
+  border-color: var(--ds-borderColor-disabled-onLight);
+  color: var(--ds-textColor-disabled-onLight);
+}
+.ds-button__HTSRrd.ds-button__HTSRrd--supplementary.ds-button__HTSRrd--blue:focus-visible {
   box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
   outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
   outline-offset: calc(var(--ds-borderWidth-thin) * 1);
 }
-.ds-button__DFAX9n.ds-button__DFAX9n--supplementary.ds-button__DFAX9n--blue {
+.ds-button__HTSRrd.ds-button__HTSRrd--supplementary.ds-button__HTSRrd--blue {
   background-color: transparent;
   border-color: transparent;
   color: var(--ds-textColor-primary);
   padding-right: var(--ds-spacing-4xSmall);
   padding-left: var(--ds-spacing-4xSmall);
 }
-.ds-button__DFAX9n.ds-button__DFAX9n--supplementary.ds-button__DFAX9n--blue:hover {
+.ds-button__HTSRrd.ds-button__HTSRrd--supplementary.ds-button__HTSRrd--blue:hover {
   background-color: var(--ds-bgColor-secondary-hover);
 }
-.ds-button__DFAX9n.ds-button__DFAX9n--supplementary.ds-button__DFAX9n--blue:active, .ds-button__DFAX9n.ds-button__DFAX9n--supplementary.ds-button__DFAX9n--blue--active {
+.ds-button__HTSRrd.ds-button__HTSRrd--supplementary.ds-button__HTSRrd--blue:active, .ds-button__HTSRrd.ds-button__HTSRrd--supplementary.ds-button__HTSRrd--blue--active {
   background-color: var(--ds-bgColor-secondary-active);
 }
-.ds-button__DFAX9n.ds-button__DFAX9n--supplementary.ds-button__DFAX9n--blue.ds-button__DFAX9n--disabled, .ds-button__DFAX9n.ds-button__DFAX9n--supplementary.ds-button__DFAX9n--blue:disabled {
+.ds-button__HTSRrd.ds-button__HTSRrd--supplementary.ds-button__HTSRrd--blue.ds-button__HTSRrd--disabled, .ds-button__HTSRrd.ds-button__HTSRrd--supplementary.ds-button__HTSRrd--blue:disabled {
   background-color: transparent;
   border-color: transparent;
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-button__DFAX9n.ds-button__DFAX9n--supplementary.ds-button__DFAX9n--black:focus-visible {
+.ds-button__HTSRrd.ds-button__HTSRrd--supplementary.ds-button__HTSRrd--black:focus-visible {
   box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
   outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
   outline-offset: calc(var(--ds-borderWidth-thin) * 1);
 }
-.ds-button__DFAX9n.ds-button__DFAX9n--supplementary.ds-button__DFAX9n--black {
+.ds-button__HTSRrd.ds-button__HTSRrd--supplementary.ds-button__HTSRrd--black {
   background-color: transparent;
   border-color: transparent;
   color: var(--ds-textColor-default);
   padding-right: var(--ds-spacing-4xSmall);
   padding-left: var(--ds-spacing-4xSmall);
 }
-.ds-button__DFAX9n.ds-button__DFAX9n--supplementary.ds-button__DFAX9n--black:hover {
+.ds-button__HTSRrd.ds-button__HTSRrd--supplementary.ds-button__HTSRrd--black:hover {
   background-color: var(--ds-bgColor-transparent-onLight-hover);
 }
-.ds-button__DFAX9n.ds-button__DFAX9n--supplementary.ds-button__DFAX9n--black:active, .ds-button__DFAX9n.ds-button__DFAX9n--supplementary.ds-button__DFAX9n--black--active {
+.ds-button__HTSRrd.ds-button__HTSRrd--supplementary.ds-button__HTSRrd--black:active, .ds-button__HTSRrd.ds-button__HTSRrd--supplementary.ds-button__HTSRrd--black--active {
   background-color: var(--ds-bgColor-transparent-onLight-active);
 }
-.ds-button__DFAX9n.ds-button__DFAX9n--supplementary.ds-button__DFAX9n--black.ds-button__DFAX9n--disabled, .ds-button__DFAX9n.ds-button__DFAX9n--supplementary.ds-button__DFAX9n--black:disabled {
+.ds-button__HTSRrd.ds-button__HTSRrd--supplementary.ds-button__HTSRrd--black.ds-button__HTSRrd--disabled, .ds-button__HTSRrd.ds-button__HTSRrd--supplementary.ds-button__HTSRrd--black:disabled {
   background-color: transparent;
   border-color: transparent;
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-button__DFAX9n.ds-button__DFAX9n--supplementary.ds-button__DFAX9n--white:focus-visible {
+.ds-button__HTSRrd.ds-button__HTSRrd--supplementary.ds-button__HTSRrd--white:focus-visible {
   box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-black);
   outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-white);
   outline-offset: calc(var(--ds-borderWidth-thin) * 1);
 }
-.ds-button__DFAX9n.ds-button__DFAX9n--supplementary.ds-button__DFAX9n--white {
+.ds-button__HTSRrd.ds-button__HTSRrd--supplementary.ds-button__HTSRrd--white {
   background-color: transparent;
   border-color: transparent;
   color: var(--ds-textColor-white);
   padding-right: var(--ds-spacing-4xSmall);
   padding-left: var(--ds-spacing-4xSmall);
 }
-.ds-button__DFAX9n.ds-button__DFAX9n--supplementary.ds-button__DFAX9n--white:hover {
+.ds-button__HTSRrd.ds-button__HTSRrd--supplementary.ds-button__HTSRrd--white:hover {
   background-color: var(--ds-bgColor-transparent-onDark-hover);
 }
-.ds-button__DFAX9n.ds-button__DFAX9n--supplementary.ds-button__DFAX9n--white:active, .ds-button__DFAX9n.ds-button__DFAX9n--supplementary.ds-button__DFAX9n--white--active {
+.ds-button__HTSRrd.ds-button__HTSRrd--supplementary.ds-button__HTSRrd--white:active, .ds-button__HTSRrd.ds-button__HTSRrd--supplementary.ds-button__HTSRrd--white--active {
   background-color: var(--ds-bgColor-transparent-onDark-active);
 }
-.ds-button__DFAX9n.ds-button__DFAX9n--supplementary.ds-button__DFAX9n--white.ds-button__DFAX9n--disabled, .ds-button__DFAX9n.ds-button__DFAX9n--supplementary.ds-button__DFAX9n--white:disabled {
+.ds-button__HTSRrd.ds-button__HTSRrd--supplementary.ds-button__HTSRrd--white.ds-button__HTSRrd--disabled, .ds-button__HTSRrd.ds-button__HTSRrd--supplementary.ds-button__HTSRrd--white:disabled {
   background-color: transparent;
   border-color: transparent;
   color: var(--ds-textColor-disabled-onDark);
+}
+.ds-button__HTSRrd.ds-button__HTSRrd--supplementary.ds-button__HTSRrd--danger:focus-visible {
+  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
+  outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
+  outline-offset: calc(var(--ds-borderWidth-thin) * 1);
+}
+.ds-button__HTSRrd.ds-button__HTSRrd--supplementary.ds-button__HTSRrd--danger {
+  background-color: transparent;
+  border-color: transparent;
+  color: var(--ds-textColor-danger);
+  padding-right: var(--ds-spacing-4xSmall);
+  padding-left: var(--ds-spacing-4xSmall);
+}
+.ds-button__HTSRrd.ds-button__HTSRrd--supplementary.ds-button__HTSRrd--danger:hover {
+  background-color: var(--ds-bgColor-danger);
+}
+.ds-button__HTSRrd.ds-button__HTSRrd--supplementary.ds-button__HTSRrd--danger:active, .ds-button__HTSRrd.ds-button__HTSRrd--supplementary.ds-button__HTSRrd--danger--active {
+  background-color: var(--ds-bgColor-danger-hover);
+}
+.ds-button__HTSRrd.ds-button__HTSRrd--supplementary.ds-button__HTSRrd--danger.ds-button__HTSRrd--disabled, .ds-button__HTSRrd.ds-button__HTSRrd--supplementary.ds-button__HTSRrd--danger:disabled {
+  background-color: transparent;
+  border-color: transparent;
+  color: var(--ds-textColor-disabled-onLight);
 }

package/dist/collection/components/01-base-components/ds-button/ds-button.js CHANGED Viewed

@@ -31,6 +31,7 @@ export class DsButton extends Mixin(ariaDeprecationFactory) {
     dsUseSpinner = false;
     dsSpinnerHiddenText;
     dsFullWidth = false;
+    dsRole;
     dsAriaDisabled;
     dsAriaLabel;
     dsAriaLabelledby;
@@ -120,6 +121,8 @@ export class DsButton extends Mixin(ariaDeprecationFactory) {
                 return 'black';
             if (this.dsColour === 'black')
                 return 'white';
+            if (this.dsColour === 'danger')
+                return 'white';
         }
         return this.dsColour;
     };
@@ -141,7 +144,8 @@ export class DsButton extends Mixin(ariaDeprecationFactory) {
         });
         const DsSpinner = transformTagName('ds-spinner', 'ds-button', this.el);
         const DsVisuallyHidden = transformTagName('ds-visually-hidden', 'ds-button', this.el);
-        const { ['aria-label']: inheritedAriaLabel, ['aria-labelledby']: inheritedAriaLabelledby, ['aria-describedby']: inheritedAriaDescribedby, ['aria-disabled']: inheritedAriaDisabled, ['aria-expanded']: inheritedAriaExpanded, ['aria-pressed']: inheritedAriaPressed, ...restAttributes } = this.inheritedAttributes;
+        const { role: inheritedRole, ['aria-label']: inheritedAriaLabel, ['aria-labelledby']: inheritedAriaLabelledby, ['aria-describedby']: inheritedAriaDescribedby, ['aria-disabled']: inheritedAriaDisabled, ['aria-expanded']: inheritedAriaExpanded, ['aria-pressed']: inheritedAriaPressed, ...restAttributes } = this.inheritedAttributes;
+        const role = this.dsRole ?? inheritedRole;
         const ariaLabel = this.dsAriaLabel || inheritedAriaLabel;
         const ariaLabelledby = this.dsAriaLabelledby || inheritedAriaLabelledby;
         const ariaDescribedby = this.dsAriaDescribedby || inheritedAriaDescribedby;
@@ -160,7 +164,7 @@ export class DsButton extends Mixin(ariaDeprecationFactory) {
         }
         const ariaExpanded = this.dsAriaExpanded !== undefined ? (this.dsAriaExpanded ? 'true' : 'false') : inheritedAriaExpanded;
         const ariaPressed = this.dsAriaPressed !== undefined ? (this.dsAriaPressed ? 'true' : 'false') : inheritedAriaPressed;
-        return (h("button", { ref: el => (this.buttonEl = el), class: classes, id: this.dsId, value: this.dsValue, name: this.dsName, form: this.dsForm, type: this.dsType, disabled: this.dsDisabled, onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, ...ifDefined('aria-disabled', ariaDisabled), ...ifDefined('aria-label', ariaLabel), ...ifDefined('aria-labelledby', ariaLabelledby), ...ifDefined('aria-describedby', ariaDescribedby), ...ifDefined('aria-expanded', ariaExpanded), ...ifDefined('aria-pressed', ariaPressed), ...restAttributes }, h("slot", { name: "prefix" }, !this.dsLoading && this.dsIcon && this.dsIconPosition === 'start' && this.renderIcon(baseClass), this.dsLoading && (h(DsSpinner, { class: `${baseClass}__spinner`, dsHiddenAssistiveText: this.dsSpinnerHiddenText, dsColour: this.getSpinnerColour(), dsSize: this.dsSize === 'medium' ? 'medium' : null, dsCustomSize: this.dsSize === 'small' ? '1.25rem' : null }))), this.hasContent && (h("span", { class: `${baseClass}__value` }, h("slot", null, this.text, this.dsHiddenAssistiveText && h(DsVisuallyHidden, { dsTag: "span" }, this.dsHiddenAssistiveText)))), h("slot", { name: "suffix" }, this.dsIcon && this.dsIconPosition === 'end' && this.renderIcon(baseClass))));
+        return (h("button", { ref: el => (this.buttonEl = el), class: classes, id: this.dsId, value: this.dsValue, name: this.dsName, form: this.dsForm, type: this.dsType, disabled: this.dsDisabled, onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, ...ifDefined('role', role), ...ifDefined('aria-disabled', ariaDisabled), ...ifDefined('aria-label', ariaLabel), ...ifDefined('aria-labelledby', ariaLabelledby), ...ifDefined('aria-describedby', ariaDescribedby), ...ifDefined('aria-expanded', ariaExpanded), ...ifDefined('aria-pressed', ariaPressed), ...restAttributes }, h("slot", { name: "prefix" }, !this.dsLoading && this.dsIcon && this.dsIconPosition === 'start' && this.renderIcon(baseClass), this.dsLoading && (h(DsSpinner, { class: `${baseClass}__spinner`, dsHiddenAssistiveText: this.dsSpinnerHiddenText, dsColour: this.getSpinnerColour(), dsSize: this.dsSize === 'medium' ? 'medium' : null, dsCustomSize: this.dsSize === 'small' ? '1.25rem' : null }))), this.hasContent && (h("span", { class: `${baseClass}__value` }, h("slot", null, this.text, this.dsHiddenAssistiveText && h(DsVisuallyHidden, { dsTag: "span" }, this.dsHiddenAssistiveText)))), h("slot", { name: "suffix" }, this.dsIcon && this.dsIconPosition === 'end' && this.renderIcon(baseClass))));
     };
     render() {
         const buttonElement = this.renderButton();
@@ -303,8 +307,8 @@ export class DsButton extends Mixin(ariaDeprecationFactory) {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'blue' | 'black' | 'white'",
-                    "resolved": "\"black\" | \"blue\" | \"white\"",
+                    "original": "'blue' | 'black' | 'white' | 'danger'",
+                    "resolved": "\"black\" | \"blue\" | \"danger\" | \"white\"",
                     "references": {}
                 },
                 "required": false,
@@ -536,6 +540,25 @@ export class DsButton extends Mixin(ariaDeprecationFactory) {
                 "attribute": "ds-full-width",
                 "defaultValue": "false"
             },
+            "dsRole": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Passed to the `role` attribute of the `button` element."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ds-role"
+            },
             "dsAriaDisabled": {
                 "type": "boolean",
                 "mutable": false,

package/dist/collection/components/01-base-components/ds-button/stories/ds-button.features.stories.js CHANGED Viewed

@@ -31,23 +31,33 @@ export const Blue = {
     args: {
         dsText: 'Blue',
         dsColour: 'blue',
+        dsVariant: 'primary',
     },
 };
 export const Black = {
     args: {
         dsText: 'Black',
         dsColour: 'black',
+        dsVariant: 'primary',
     },
 };
 export const White = {
     args: {
         dsText: 'White',
         dsColour: 'white',
+        dsVariant: 'primary',
     },
     parameters: {
         backgrounds: { default: 'Black 90%' },
     },
 };
+export const Danger = {
+    args: {
+        dsText: 'Danger',
+        dsColour: 'danger',
+        dsVariant: 'primary',
+    },
+};
 export const Medium = {
     args: {
         dsText: 'Medium',