npm - @uh-design-system/component-library - Versions diffs - 1.1.0-rc.5 → 1.1.0-rc.7 - Mend

@uh-design-system/component-library 1.1.0-rc.5 → 1.1.0-rc.7

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 (1610) 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__BahgnS--full-width) {
+:host:has(.ds-button__kfFKF0--full-width) {
   width: 100%;
 }
-.ds-button__BahgnS {
+.ds-button__kfFKF0 {
   width: 100%;
   align-items: center;
   border-radius: 0;
@@ -22,257 +22,257 @@
   outline: 4px solid transparent;
   justify-content: center;
 }
-.ds-button__BahgnS:not(.ds-button__BahgnS--supplementary) .ds-button__BahgnS__value {
+.ds-button__kfFKF0:not(.ds-button__kfFKF0--supplementary) .ds-button__kfFKF0__value {
   padding-right: var(--ds-spacing-3xSmall);
   padding-left: var(--ds-spacing-3xSmall);
 }
-.ds-button__BahgnS--supplementary:has(.ds-button__BahgnS__spinner) .ds-button__BahgnS__value {
+.ds-button__kfFKF0--supplementary:has(.ds-button__kfFKF0__spinner) .ds-button__kfFKF0__value {
   padding-right: 0;
   padding-left: var(--ds-spacing-3xSmall);
 }
-.ds-button__BahgnS__icon {
+.ds-button__kfFKF0__icon {
   height: 1.5rem;
 }
-.ds-button__BahgnS:has(.ds-button__BahgnS__spinner):not(.ds-button__BahgnS--small) .ds-button__BahgnS__value {
+.ds-button__kfFKF0:has(.ds-button__kfFKF0__spinner):not(.ds-button__kfFKF0--small) .ds-button__kfFKF0__value {
   margin-left: var(--ds-spacing-3xSmall);
 }
-.ds-button__BahgnS--icon-only {
+.ds-button__kfFKF0--icon-only {
   aspect-ratio: 1;
   justify-content: center;
 }
-.ds-button__BahgnS:not(.ds-button__BahgnS--small):not(.ds-button__BahgnS--secondary) {
+.ds-button__kfFKF0:not(.ds-button__kfFKF0--small):not(.ds-button__kfFKF0--secondary) {
   border-width: 0px;
   font-size: var(--ds-fontSize-18);
   min-height: 44px;
   padding: var(--ds-spacing-3xSmall) var(--ds-spacing-xSmall);
 }
-.ds-button__BahgnS:not(.ds-button__BahgnS--small).ds-button__BahgnS--secondary {
+.ds-button__kfFKF0:not(.ds-button__kfFKF0--small).ds-button__kfFKF0--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__BahgnS:not(.ds-button__BahgnS--small).ds-button__BahgnS--icon-only {
+.ds-button__kfFKF0:not(.ds-button__kfFKF0--small).ds-button__kfFKF0--icon-only {
   padding-left: 0;
   padding-right: 0;
 }
-.ds-button__BahgnS--small:not(.ds-button__BahgnS--secondary) {
+.ds-button__kfFKF0--small:not(.ds-button__kfFKF0--secondary) {
   border-width: 0px;
   font-size: var(--ds-fontSize-14);
   min-height: 32px;
   padding: var(--ds-spacing-4xSmall) var(--ds-spacing-2xSmall);
 }
-.ds-button__BahgnS--small.ds-button__BahgnS--secondary {
+.ds-button__kfFKF0--small.ds-button__kfFKF0--secondary {
   border-width: var(--ds-borderWidth-thin);
   font-size: var(--ds-fontSize-14);
   min-height: 32px;
   padding: var(--ds-spacing-4xSmall) var(--ds-spacing-2xSmall);
 }
-.ds-button__BahgnS--small.ds-button__BahgnS--icon-only {
+.ds-button__kfFKF0--small.ds-button__kfFKF0--icon-only {
   padding-left: 0;
   padding-right: 0;
   width: 32px;
 }
-.ds-button__BahgnS--small .ds-button__BahgnS__icon {
+.ds-button__kfFKF0--small .ds-button__kfFKF0__icon {
   height: 1rem;
 }
-.ds-button__BahgnS--icon-start:not(.ds-button__BahgnS--small) .ds-button__BahgnS__icon {
+.ds-button__kfFKF0--icon-start:not(.ds-button__kfFKF0--small) .ds-button__kfFKF0__icon {
   margin-right: var(--ds-spacing-3xSmall);
 }
-.ds-button__BahgnS--icon-end:not(.ds-button__BahgnS--small) .ds-button__BahgnS__icon {
+.ds-button__kfFKF0--icon-end:not(.ds-button__kfFKF0--small) .ds-button__kfFKF0__icon {
   margin-left: var(--ds-spacing-3xSmall);
 }
-.ds-button__BahgnS.ds-button__BahgnS--primary.ds-button__BahgnS--blue:focus-visible {
+.ds-button__kfFKF0.ds-button__kfFKF0--primary.ds-button__kfFKF0--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__BahgnS.ds-button__BahgnS--primary.ds-button__BahgnS--blue {
+.ds-button__kfFKF0.ds-button__kfFKF0--primary.ds-button__kfFKF0--blue {
   background-color: var(--ds-bgColor-primary);
   border-color: transparent;
   color: var(--ds-textColor-white);
 }
-.ds-button__BahgnS.ds-button__BahgnS--primary.ds-button__BahgnS--blue:hover {
+.ds-button__kfFKF0.ds-button__kfFKF0--primary.ds-button__kfFKF0--blue:hover {
   background-color: var(--ds-bgColor-primary-hover);
 }
-.ds-button__BahgnS.ds-button__BahgnS--primary.ds-button__BahgnS--blue:active, .ds-button__BahgnS.ds-button__BahgnS--primary.ds-button__BahgnS--blue--active {
+.ds-button__kfFKF0.ds-button__kfFKF0--primary.ds-button__kfFKF0--blue:active, .ds-button__kfFKF0.ds-button__kfFKF0--primary.ds-button__kfFKF0--blue--active {
   background-color: var(--ds-bgColor-primary-active);
 }
-.ds-button__BahgnS.ds-button__BahgnS--primary.ds-button__BahgnS--blue.ds-button__BahgnS--disabled, .ds-button__BahgnS.ds-button__BahgnS--primary.ds-button__BahgnS--blue:disabled {
+.ds-button__kfFKF0.ds-button__kfFKF0--primary.ds-button__kfFKF0--blue.ds-button__kfFKF0--disabled, .ds-button__kfFKF0.ds-button__kfFKF0--primary.ds-button__kfFKF0--blue:disabled {
   background-color: var(--ds-bgColor-disabled-onLight);
   border-color: transparent;
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-button__BahgnS.ds-button__BahgnS--primary.ds-button__BahgnS--black:focus-visible {
+.ds-button__kfFKF0.ds-button__kfFKF0--primary.ds-button__kfFKF0--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__BahgnS.ds-button__BahgnS--primary.ds-button__BahgnS--black {
+.ds-button__kfFKF0.ds-button__kfFKF0--primary.ds-button__kfFKF0--black {
   background-color: var(--ds-bgColor-black);
   border-color: transparent;
   color: var(--ds-textColor-white);
 }
-.ds-button__BahgnS.ds-button__BahgnS--primary.ds-button__BahgnS--black:hover {
+.ds-button__kfFKF0.ds-button__kfFKF0--primary.ds-button__kfFKF0--black:hover {
   background-color: var(--ds-bgColor-black-hover);
 }
-.ds-button__BahgnS.ds-button__BahgnS--primary.ds-button__BahgnS--black:active, .ds-button__BahgnS.ds-button__BahgnS--primary.ds-button__BahgnS--black--active {
+.ds-button__kfFKF0.ds-button__kfFKF0--primary.ds-button__kfFKF0--black:active, .ds-button__kfFKF0.ds-button__kfFKF0--primary.ds-button__kfFKF0--black--active {
   background-color: var(--ds-bgColor-black-active);
 }
-.ds-button__BahgnS.ds-button__BahgnS--primary.ds-button__BahgnS--black.ds-button__BahgnS--disabled, .ds-button__BahgnS.ds-button__BahgnS--primary.ds-button__BahgnS--black:disabled {
+.ds-button__kfFKF0.ds-button__kfFKF0--primary.ds-button__kfFKF0--black.ds-button__kfFKF0--disabled, .ds-button__kfFKF0.ds-button__kfFKF0--primary.ds-button__kfFKF0--black:disabled {
   background-color: var(--ds-bgColor-disabled-onLight);
   border-color: transparent;
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-button__BahgnS.ds-button__BahgnS--primary.ds-button__BahgnS--white:focus-visible {
+.ds-button__kfFKF0.ds-button__kfFKF0--primary.ds-button__kfFKF0--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__BahgnS.ds-button__BahgnS--primary.ds-button__BahgnS--white {
+.ds-button__kfFKF0.ds-button__kfFKF0--primary.ds-button__kfFKF0--white {
   background-color: var(--ds-bgColor-white);
   border-color: transparent;
   color: var(--ds-textColor-default);
 }
-.ds-button__BahgnS.ds-button__BahgnS--primary.ds-button__BahgnS--white:hover {
+.ds-button__kfFKF0.ds-button__kfFKF0--primary.ds-button__kfFKF0--white:hover {
   background-color: var(--ds-bgColor-white-hover);
 }
-.ds-button__BahgnS.ds-button__BahgnS--primary.ds-button__BahgnS--white:active, .ds-button__BahgnS.ds-button__BahgnS--primary.ds-button__BahgnS--white--active {
+.ds-button__kfFKF0.ds-button__kfFKF0--primary.ds-button__kfFKF0--white:active, .ds-button__kfFKF0.ds-button__kfFKF0--primary.ds-button__kfFKF0--white--active {
   background-color: var(--ds-bgColor-white-active);
 }
-.ds-button__BahgnS.ds-button__BahgnS--primary.ds-button__BahgnS--white.ds-button__BahgnS--disabled, .ds-button__BahgnS.ds-button__BahgnS--primary.ds-button__BahgnS--white:disabled {
+.ds-button__kfFKF0.ds-button__kfFKF0--primary.ds-button__kfFKF0--white.ds-button__kfFKF0--disabled, .ds-button__kfFKF0.ds-button__kfFKF0--primary.ds-button__kfFKF0--white:disabled {
   background-color: var(--ds-bgColor-disabled-onDark);
   border-color: transparent;
   color: var(--ds-textColor-disabled-onDark);
 }
-.ds-button__BahgnS.ds-button__BahgnS--secondary.ds-button__BahgnS--blue:focus-visible {
+.ds-button__kfFKF0.ds-button__kfFKF0--secondary.ds-button__kfFKF0--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__BahgnS.ds-button__BahgnS--secondary.ds-button__BahgnS--blue {
+.ds-button__kfFKF0.ds-button__kfFKF0--secondary.ds-button__kfFKF0--blue {
   background-color: var(--ds-bgColor-secondary);
   border-color: var(--ds-borderColor-primary);
   color: var(--ds-textColor-primary);
 }
-.ds-button__BahgnS.ds-button__BahgnS--secondary.ds-button__BahgnS--blue:hover {
+.ds-button__kfFKF0.ds-button__kfFKF0--secondary.ds-button__kfFKF0--blue:hover {
   background-color: var(--ds-bgColor-secondary-hover);
 }
-.ds-button__BahgnS.ds-button__BahgnS--secondary.ds-button__BahgnS--blue:active, .ds-button__BahgnS.ds-button__BahgnS--secondary.ds-button__BahgnS--blue--active {
+.ds-button__kfFKF0.ds-button__kfFKF0--secondary.ds-button__kfFKF0--blue:active, .ds-button__kfFKF0.ds-button__kfFKF0--secondary.ds-button__kfFKF0--blue--active {
   background-color: var(--ds-bgColor-secondary-active);
 }
-.ds-button__BahgnS.ds-button__BahgnS--secondary.ds-button__BahgnS--blue.ds-button__BahgnS--disabled, .ds-button__BahgnS.ds-button__BahgnS--secondary.ds-button__BahgnS--blue:disabled {
+.ds-button__kfFKF0.ds-button__kfFKF0--secondary.ds-button__kfFKF0--blue.ds-button__kfFKF0--disabled, .ds-button__kfFKF0.ds-button__kfFKF0--secondary.ds-button__kfFKF0--blue:disabled {
   background-color: var(--ds-bgColor-secondary);
   border-color: var(--ds-borderColor-disabled-onLight);
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-button__BahgnS.ds-button__BahgnS--secondary.ds-button__BahgnS--black:focus-visible {
+.ds-button__kfFKF0.ds-button__kfFKF0--secondary.ds-button__kfFKF0--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__BahgnS.ds-button__BahgnS--secondary.ds-button__BahgnS--black {
+.ds-button__kfFKF0.ds-button__kfFKF0--secondary.ds-button__kfFKF0--black {
   background-color: transparent;
   border-color: var(--ds-borderColor-black);
   color: var(--ds-textColor-default);
 }
-.ds-button__BahgnS.ds-button__BahgnS--secondary.ds-button__BahgnS--black:hover {
+.ds-button__kfFKF0.ds-button__kfFKF0--secondary.ds-button__kfFKF0--black:hover {
   background-color: var(--ds-bgColor-transparent-onLight-hover);
 }
-.ds-button__BahgnS.ds-button__BahgnS--secondary.ds-button__BahgnS--black:active, .ds-button__BahgnS.ds-button__BahgnS--secondary.ds-button__BahgnS--black--active {
+.ds-button__kfFKF0.ds-button__kfFKF0--secondary.ds-button__kfFKF0--black:active, .ds-button__kfFKF0.ds-button__kfFKF0--secondary.ds-button__kfFKF0--black--active {
   background-color: var(--ds-bgColor-transparent-onLight-active);
 }
-.ds-button__BahgnS.ds-button__BahgnS--secondary.ds-button__BahgnS--black.ds-button__BahgnS--disabled, .ds-button__BahgnS.ds-button__BahgnS--secondary.ds-button__BahgnS--black:disabled {
+.ds-button__kfFKF0.ds-button__kfFKF0--secondary.ds-button__kfFKF0--black.ds-button__kfFKF0--disabled, .ds-button__kfFKF0.ds-button__kfFKF0--secondary.ds-button__kfFKF0--black:disabled {
   background-color: transparent;
   border-color: var(--ds-borderColor-disabled-onLight);
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-button__BahgnS.ds-button__BahgnS--secondary.ds-button__BahgnS--white:focus-visible {
+.ds-button__kfFKF0.ds-button__kfFKF0--secondary.ds-button__kfFKF0--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__BahgnS.ds-button__BahgnS--secondary.ds-button__BahgnS--white {
+.ds-button__kfFKF0.ds-button__kfFKF0--secondary.ds-button__kfFKF0--white {
   background-color: transparent;
   border-color: var(--ds-borderColor-white);
   color: var(--ds-textColor-white);
 }
-.ds-button__BahgnS.ds-button__BahgnS--secondary.ds-button__BahgnS--white:hover {
+.ds-button__kfFKF0.ds-button__kfFKF0--secondary.ds-button__kfFKF0--white:hover {
   background-color: var(--ds-bgColor-transparent-onDark-hover);
 }
-.ds-button__BahgnS.ds-button__BahgnS--secondary.ds-button__BahgnS--white:active, .ds-button__BahgnS.ds-button__BahgnS--secondary.ds-button__BahgnS--white--active {
+.ds-button__kfFKF0.ds-button__kfFKF0--secondary.ds-button__kfFKF0--white:active, .ds-button__kfFKF0.ds-button__kfFKF0--secondary.ds-button__kfFKF0--white--active {
   background-color: var(--ds-bgColor-transparent-onDark-active);
 }
-.ds-button__BahgnS.ds-button__BahgnS--secondary.ds-button__BahgnS--white.ds-button__BahgnS--disabled, .ds-button__BahgnS.ds-button__BahgnS--secondary.ds-button__BahgnS--white:disabled {
+.ds-button__kfFKF0.ds-button__kfFKF0--secondary.ds-button__kfFKF0--white.ds-button__kfFKF0--disabled, .ds-button__kfFKF0.ds-button__kfFKF0--secondary.ds-button__kfFKF0--white:disabled {
   background-color: transparent;
   border-color: var(--ds-borderColor-disabled-onDark);
   color: var(--ds-textColor-disabled-onDark);
 }
-.ds-button__BahgnS.ds-button__BahgnS--supplementary.ds-button__BahgnS--blue:focus-visible {
+.ds-button__kfFKF0.ds-button__kfFKF0--supplementary.ds-button__kfFKF0--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__BahgnS.ds-button__BahgnS--supplementary.ds-button__BahgnS--blue {
+.ds-button__kfFKF0.ds-button__kfFKF0--supplementary.ds-button__kfFKF0--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__BahgnS.ds-button__BahgnS--supplementary.ds-button__BahgnS--blue:hover {
+.ds-button__kfFKF0.ds-button__kfFKF0--supplementary.ds-button__kfFKF0--blue:hover {
   background-color: var(--ds-bgColor-secondary-hover);
 }
-.ds-button__BahgnS.ds-button__BahgnS--supplementary.ds-button__BahgnS--blue:active, .ds-button__BahgnS.ds-button__BahgnS--supplementary.ds-button__BahgnS--blue--active {
+.ds-button__kfFKF0.ds-button__kfFKF0--supplementary.ds-button__kfFKF0--blue:active, .ds-button__kfFKF0.ds-button__kfFKF0--supplementary.ds-button__kfFKF0--blue--active {
   background-color: var(--ds-bgColor-secondary-active);
 }
-.ds-button__BahgnS.ds-button__BahgnS--supplementary.ds-button__BahgnS--blue.ds-button__BahgnS--disabled, .ds-button__BahgnS.ds-button__BahgnS--supplementary.ds-button__BahgnS--blue:disabled {
+.ds-button__kfFKF0.ds-button__kfFKF0--supplementary.ds-button__kfFKF0--blue.ds-button__kfFKF0--disabled, .ds-button__kfFKF0.ds-button__kfFKF0--supplementary.ds-button__kfFKF0--blue:disabled {
   background-color: transparent;
   border-color: transparent;
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-button__BahgnS.ds-button__BahgnS--supplementary.ds-button__BahgnS--black:focus-visible {
+.ds-button__kfFKF0.ds-button__kfFKF0--supplementary.ds-button__kfFKF0--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__BahgnS.ds-button__BahgnS--supplementary.ds-button__BahgnS--black {
+.ds-button__kfFKF0.ds-button__kfFKF0--supplementary.ds-button__kfFKF0--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__BahgnS.ds-button__BahgnS--supplementary.ds-button__BahgnS--black:hover {
+.ds-button__kfFKF0.ds-button__kfFKF0--supplementary.ds-button__kfFKF0--black:hover {
   background-color: var(--ds-bgColor-transparent-onLight-hover);
 }
-.ds-button__BahgnS.ds-button__BahgnS--supplementary.ds-button__BahgnS--black:active, .ds-button__BahgnS.ds-button__BahgnS--supplementary.ds-button__BahgnS--black--active {
+.ds-button__kfFKF0.ds-button__kfFKF0--supplementary.ds-button__kfFKF0--black:active, .ds-button__kfFKF0.ds-button__kfFKF0--supplementary.ds-button__kfFKF0--black--active {
   background-color: var(--ds-bgColor-transparent-onLight-active);
 }
-.ds-button__BahgnS.ds-button__BahgnS--supplementary.ds-button__BahgnS--black.ds-button__BahgnS--disabled, .ds-button__BahgnS.ds-button__BahgnS--supplementary.ds-button__BahgnS--black:disabled {
+.ds-button__kfFKF0.ds-button__kfFKF0--supplementary.ds-button__kfFKF0--black.ds-button__kfFKF0--disabled, .ds-button__kfFKF0.ds-button__kfFKF0--supplementary.ds-button__kfFKF0--black:disabled {
   background-color: transparent;
   border-color: transparent;
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-button__BahgnS.ds-button__BahgnS--supplementary.ds-button__BahgnS--white:focus-visible {
+.ds-button__kfFKF0.ds-button__kfFKF0--supplementary.ds-button__kfFKF0--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__BahgnS.ds-button__BahgnS--supplementary.ds-button__BahgnS--white {
+.ds-button__kfFKF0.ds-button__kfFKF0--supplementary.ds-button__kfFKF0--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__BahgnS.ds-button__BahgnS--supplementary.ds-button__BahgnS--white:hover {
+.ds-button__kfFKF0.ds-button__kfFKF0--supplementary.ds-button__kfFKF0--white:hover {
   background-color: var(--ds-bgColor-transparent-onDark-hover);
 }
-.ds-button__BahgnS.ds-button__BahgnS--supplementary.ds-button__BahgnS--white:active, .ds-button__BahgnS.ds-button__BahgnS--supplementary.ds-button__BahgnS--white--active {
+.ds-button__kfFKF0.ds-button__kfFKF0--supplementary.ds-button__kfFKF0--white:active, .ds-button__kfFKF0.ds-button__kfFKF0--supplementary.ds-button__kfFKF0--white--active {
   background-color: var(--ds-bgColor-transparent-onDark-active);
 }
-.ds-button__BahgnS.ds-button__BahgnS--supplementary.ds-button__BahgnS--white.ds-button__BahgnS--disabled, .ds-button__BahgnS.ds-button__BahgnS--supplementary.ds-button__BahgnS--white:disabled {
+.ds-button__kfFKF0.ds-button__kfFKF0--supplementary.ds-button__kfFKF0--white.ds-button__kfFKF0--disabled, .ds-button__kfFKF0.ds-button__kfFKF0--supplementary.ds-button__kfFKF0--white:disabled {
   background-color: transparent;
   border-color: transparent;
   color: var(--ds-textColor-disabled-onDark);

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

@@ -12,6 +12,7 @@ export class DsButton {
     dsForm;
     dsId = buttonIdGenerator.next().value;
     dsName = this.dsId;
+    dsText = '';
     dsValue = '';
     dsVariant = 'primary';
     dsColour = 'blue';
@@ -33,6 +34,7 @@ export class DsButton {
     dsActive = false;
     hasContent = false;
     isActive = this.dsActive;
+    text = '';
     async setFocus() {
         this.buttonEl.focus();
     }
@@ -45,10 +47,11 @@ export class DsButton {
             ...inheritAttributes(this, this.el),
             ...inheritAriaAttributes(this.el),
         };
+        this.text = this.dsText || this.dsValue;
     }
     componentDidLoad() {
         this.hasContent =
-            !!this.dsValue ||
+            !!this.text ||
                 Array.from(this.el.childNodes).some(node => {
                     if (node.nodeType === Node.ELEMENT_NODE) {
                         const elem = node;
@@ -60,6 +63,14 @@ export class DsButton {
                     return false;
                 });
     }
+    dsTextObserver(newValue) {
+        this.text = newValue || this.dsValue;
+    }
+    dsValueObserver(newValue) {
+        if (!this.dsText) {
+            this.text = newValue;
+        }
+    }
     dsActiveObserver(newValue) {
         this.isActive = newValue;
     }
@@ -126,7 +137,7 @@ export class DsButton {
         const ariaLabel = attrAriaLabel || this.dsAriaLabel;
         const ariaLabelledby = attrAriaLabelledby || this.dsAriaLabelledby;
         const ariaDisabled = (attrAriaDisabled || this.dsAriaDisabled) !== 'false' ? 'true' : 'false';
-        return (h("button", { ref: el => (this.buttonEl = el), class: classes, id: this.dsId, 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), ...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 == 'small' ? 'small' : 'medium' }))), this.hasContent && (h("span", { class: `${baseClass}__value` }, h("slot", null, this.dsValue, 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('aria-disabled', ariaDisabled), ...ifDefined('aria-label', ariaLabel), ...ifDefined('aria-labelledby', ariaLabelledby), ...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 == 'small' ? 'small' : 'medium' }))), 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();
@@ -205,7 +216,7 @@ export class DsButton {
                 "attribute": "ds-name",
                 "defaultValue": "this.dsId"
             },
-            "dsValue": {
+            "dsText": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -222,6 +233,26 @@ export class DsButton {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "ds-text",
+                "defaultValue": "''"
+            },
+            "dsValue": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Passed to the `value` attribute of the `button` element."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
                 "attribute": "ds-value",
                 "defaultValue": "''"
             },
@@ -584,7 +615,8 @@ export class DsButton {
     static get states() {
         return {
             "hasContent": {},
-            "isActive": {}
+            "isActive": {},
+            "text": {}
         };
     }
     static get methods() {
@@ -611,6 +643,12 @@ export class DsButton {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
+                "propName": "dsText",
+                "methodName": "dsTextObserver"
+            }, {
+                "propName": "dsValue",
+                "methodName": "dsValueObserver"
+            }, {
                 "propName": "dsActive",
                 "methodName": "dsActiveObserver"
             }, {

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

@@ -10,12 +10,12 @@ function handleButtonLoading(buttonElement, originalValue, loadValue, loadingDur
         return;
     const originalIsLoading = buttonElement.getAttribute('ds-loading') || 'false';
     const originalAriaDisabled = buttonElement.getAttribute('ds-aria-disabled') || 'false';
-    buttonElement.setAttribute('ds-value', loadValue);
+    buttonElement.setAttribute('ds-text', loadValue);
     buttonElement.setAttribute('ds-loading', 'true');
     buttonElement.setAttribute('aria-disabled', 'true');
     buttonElement.setAttribute('aria-label', 'Sending');
     setTimeout(() => {
-        buttonElement.setAttribute('ds-value', originalValue);
+        buttonElement.setAttribute('ds-text', originalValue);
         buttonElement.setAttribute('ds-loading', originalIsLoading);
         buttonElement.setAttribute('aria-disabled', originalAriaDisabled);
         buttonElement.setAttribute('aria-label', 'Sent');
@@ -31,9 +31,9 @@ const dsSbButtonGroupStyle = html `
 `;
 const buttonGroupDOM = html `
   <div class="ds-sb-button-group">
-    <ds-button ds-variant="primary" ds-value="Primary"></ds-button>
-    <ds-button ds-variant="secondary" ds-value="Secondary"></ds-button>
-    <ds-button ds-variant="supplementary" ds-value="Supplementary"></ds-button>
+    <ds-button ds-variant="primary" ds-text="Primary"></ds-button>
+    <ds-button ds-variant="secondary" ds-text="Secondary"></ds-button>
+    <ds-button ds-variant="supplementary" ds-text="Supplementary"></ds-button>
   </div>
 `;
 export const ButtonGroup = {
@@ -41,9 +41,9 @@ export const ButtonGroup = {
 };
 const buttonGroupSmallDOM = html `
   <div class="ds-sb-button-group">
-    <ds-button ds-variant="primary" ds-value="Primary" ds-size="small"></ds-button>
-    <ds-button ds-variant="secondary" ds-value="Secondary" ds-size="small"></ds-button>
-    <ds-button ds-variant="supplementary" ds-value="Supplementary" ds-size="small"></ds-button>
+    <ds-button ds-variant="primary" ds-text="Primary" ds-size="small"></ds-button>
+    <ds-button ds-variant="secondary" ds-text="Secondary" ds-size="small"></ds-button>
+    <ds-button ds-variant="supplementary" ds-text="Supplementary" ds-size="small"></ds-button>
   </div>
 `;
 export const ButtonGroupSmall = {
@@ -51,8 +51,8 @@ export const ButtonGroupSmall = {
 };
 const buttonGroupIconDOM = html `
   <div class="ds-sb-button-group">
-    <ds-button ds-value="Button with text and icon" ds-icon="ds_flame"></ds-button>
-    <ds-button ds-value="Button with text and icon" ds-icon="ds_flame" ds-icon-position="end"></ds-button>
+    <ds-button ds-text="Button with text and icon" ds-icon="ds_flame"></ds-button>
+    <ds-button ds-text="Button with text and icon" ds-icon="ds_flame" ds-icon-position="end"></ds-button>
     <ds-button ds-icon="ds_flame" aria-label="Button with icon"></ds-button>
   </div>
 `;
@@ -64,8 +64,8 @@ const resetAndSubmitButtonDOM = html `
     <ds-text-input ds-name="firstname" ds-label="firstname"></ds-text-input>
     <ds-text-input ds-name="lastname" ds-label="lastname"></ds-text-input>
     <div class="ds-sb-button-group ds-sb-reset-and-submit-button__buttons">
-      <ds-button ds-value="reset" ds-type="reset" ds-variant="secondary"></ds-button>
-      <ds-button ds-value="submit" ds-type="submit"></ds-button>
+      <ds-button ds-text="reset" ds-type="reset" ds-variant="secondary"></ds-button>
+      <ds-button ds-text="submit" ds-type="submit"></ds-button>
     </div>
   </form>
 `;
@@ -116,7 +116,7 @@ export const ButtonWithLoadingAnimation = {
       <ds-button
         ds-id="loading-button"
         ds-variant="primary"
-        ds-value="Send"
+        ds-text="Send"
         ds-loading="false"
         ds-use-spinner="true"
         ds-spinner-hidden-text="Sending..."
@@ -130,7 +130,7 @@ export const ButtonWithLoadingAnimation = {
       <ds-button
         ds-id="loading-button"
         ds-variant="secondary"
-        ds-value="Download"
+        ds-text="Download"
         ds-icon="download"
         ds-loading="false"
         ds-use-spinner="true"
@@ -143,7 +143,7 @@ export const ButtonWithLoadingAnimation = {
       <ds-button
         ds-id="loading-button"
         ds-variant="supplementary"
-        ds-value="Download"
+        ds-text="Download"
         ds-loading="false"
         ds-use-spinner="true"
         ds-spinner-hidden-text="Downloading..."
@@ -155,7 +155,7 @@ export const ButtonWithLoadingAnimation = {
       <ds-button
         ds-id="loading-button"
         ds-variant="supplementary"
-        ds-value="Download"
+        ds-text="Download"
         ds-loading="false"
         ds-use-spinner="true"
         ds-spinner-hidden-text="Downloading..."
@@ -169,7 +169,7 @@ export const ButtonWithLoadingAnimation = {
     <ds-button
       ds-id="loading-button"
       ds-variant="primary"
-      ds-value="Send"
+      ds-text="Send"
       ds-loading="false"
       ds-use-spinner="true"
       ds-spinner-hidden-text="Sending..."
@@ -194,7 +194,7 @@ export const AriaExpanded = {
             render(html `
           <ds-button
             ds-id="toggle-link-list-button"
-            ds-value=${isExpanded ? 'Hide list' : 'Show list'}
+            ds-text=${isExpanded ? 'Hide list' : 'Show list'}
             ds-icon="more_vert"
             ds-variant="secondary"
             aria-expanded="${isExpanded}"
@@ -238,7 +238,7 @@ export const AriaPressed = {
             render(html `
           <ds-button
             ds-id="mute-button"
-            ds-value=${isPressed ? 'Unfavorite' : 'Favorite'}
+            ds-text=${isPressed ? 'Unfavorite' : 'Favorite'}
             ds-icon=${isPressed ? 'favorite_fill' : 'favorite'}
             ds-variant="secondary"
             aria-pressed="${isPressed}"