@uh-design-system/component-library 0.2.4 → 0.3.1

package/dist/collection/components/01-base-components/ds-accordion/ds-accordion.css

@@ -1,130 +1,141 @@
+:root {
+  --ds-breakpoint-xSmall: 20rem;
+  --ds-breakpoint-small: 30rem;
+  --ds-breakpoint-medium: 60rem;
+  --ds-breakpoint-large: 75rem;
+  --ds-breakpoint-xLarge: 90rem;
+}
+
 .ds-accordion__open-button {
-  color: var(--ds-textColor-default, #1A1A1A);
+  color: var(--ds-textColor-default);
+  outline: var(--ds-borderWidth-thick) solid transparent;
+  fill: var(--ds-textColor-default);
+  position: relative;
   all: unset;
+  align-items: flex-start;
   box-sizing: border-box;
   display: flex;
   flex-direction: row;
-  gap: 8px;
+  gap: var(--ds-spacing-2xSmall);
+  position: relative;
   width: 100%;
 }
-.ds-accordion__open-button:hover {
-  cursor: pointer;
-  background: var(--ds-bgColor-transparent-onLight-hover, rgba(0, 0, 0, 0.1019607843));
+.ds-accordion__open-button:hover:not(:focus-visible).ds-accordion--border-aligned::before, .ds-accordion__open-button:hover:not(:focus-visible).ds-accordion--border-aligned::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  width: var(--ds-spacing-small);
+  height: 100%;
 }
-.ds-accordion__open-button:hover.ds-accordion--border-aligned {
-  padding-inline: 16px;
-  margin-inline: 0;
+.ds-accordion__open-button:hover:not(:focus-visible).ds-accordion--border-aligned::before {
+  left: calc(var(--ds-spacing-small) * -1);
 }
-.ds-accordion__open-button:active {
-  background: var(--ds-bgColor-transparent-onLight-active, rgba(0, 0, 0, 0.1490196078));
+.ds-accordion__open-button:hover:not(:focus-visible).ds-accordion--border-aligned::after {
+  right: calc(var(--ds-spacing-small) * -1);
 }
-.ds-accordion__open-button:active.ds-accordion--border-aligned {
-  padding-inline: 16px;
-  margin-inline: 0;
+.ds-accordion__open-button:hover {
+  cursor: pointer;
 }
-.ds-accordion__open-button:focus {
+.ds-accordion__open-button:hover, .ds-accordion__open-button:hover::before, .ds-accordion__open-button:hover::after {
   background: var(--ds-bgColor-transparent-onLight-hover, rgba(0, 0, 0, 0.1019607843));
-  box-shadow: 0px 0px 0px 1px var(--ds-palette-black);
 }
-.ds-accordion__open-button:focus.ds-accordion--border-aligned {
-  padding-inline: 16px;
-  margin-inline: 0;
+.ds-accordion__open-button:active, .ds-accordion__open-button:active::before, .ds-accordion__open-button:active::after {
+  background: var(--ds-bgColor-transparent-onLight-active, rgba(0, 0, 0, 0.1490196078));
+}
+.ds-accordion__open-button:focus-visible {
+  box-shadow: 0 0 0 2px var(--ds-borderColor-black);
+  outline-color: var(--ds-borderColor-white);
+  z-index: 1;
 }
 .ds-accordion__open-button.ds-accordion--default {
-  padding: 16px;
+  padding: var(--ds-spacing-small) var(--ds-spacing-small) var(--ds-spacing-xSmall) var(--ds-spacing-small);
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-18);
-  font-weight: 600;
-  line-height: 27px;
+  font-weight: var(--ds-fontWeight-semibold);
+  line-height: var(--ds-lineHeight-large);
   letter-spacing: var(--letterSpacing-wide);
 }
 .ds-accordion__open-button.ds-accordion--compact {
   font-size: var(--ds-fontSize-16);
-  padding: 12px 16px 12px 16px;
-  line-height: 24px;
-  font-weight: 600;
+  padding: var(--ds-spacing-xSmall) var(--ds-spacing-small) var(--ds-spacing-xSmall) var(--ds-spacing-small);
+  line-height: var(--ds-lineHeight-large);
+  font-weight: var(--ds-fontWeight-semibold);
 }
-.ds-accordion__open-button.ds-accordion--border-aligned {
-  padding-inline: 0;
+.ds-accordion__open-button.ds-accordion--border-aligned:not(:focus-visible) {
   padding-inline: 0;
-  margin-inline: 16px;
+  margin-inline: var(--ds-spacing-small);
+  position: relative;
+  width: calc(100% - var(--ds-spacing-large));
+}
+:host(:first-child) .ds-accordion__open-button:not(.ds-accordion--hide-top-border) {
+  border-top: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light, #CCCCCC);
 }
 .ds-accordion__open-button[aria-expanded=false] {
-  border-bottom: 1px solid var(--ds-borderColor-light, #CCCCCC);
+  border-bottom: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light, #CCCCCC);
 }
 
+.ds-accordion__panel--border-aligned {
+  position: relative;
+  width: calc(100% - 32px);
+}
+.ds-accordion__panel--border-aligned::before {
+  display: inline-block;
+  content: " ";
+  position: absolute;
+  bottom: -1px;
+  height: 1px;
+  left: 0px;
+  background: var(--ds-palette-white);
+  width: var(--ds-spacing-small);
+}
+.ds-accordion__panel--border-aligned::after {
+  display: inline-block;
+  content: " ";
+  position: absolute;
+  bottom: -1px;
+  height: 1px;
+  right: 0px;
+  background: var(--ds-palette-white);
+  width: var(--ds-spacing-small);
+}
 .ds-accordion__panel--expanded {
-  border-bottom: 1px solid var(--ds-borderColor-light, #CCCCCC);
+  display: block;
+  border-bottom: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light, #CCCCCC);
+  padding-inline: var(--ds-spacing-small);
+}
+
+::slotted([slot=header]) {
+  color: var(--ds-textColor-default);
 }
 
 .ds-accordion__content {
   color: var(--ds-textColor-default, #1A1A1A);
   font-family: var(--ds-fontFamily-body);
-  padding: 16px;
+  padding-block: var(--ds-spacing-small);
 }
 .ds-accordion__content .ds-accordion--default {
-  font-size: var(--ds-fontSize-18);
-  font-weight: 400;
-  line-height: 27px;
+  font-size: var(--ds-fontSize-16);
+  font-weight: var(--ds-fontWeight-regular);
+  line-height: var(--ds-lineHeight-xLarge);
   letter-spacing: var(--ds-letterSpacing-wide);
 }
+@media (min-width: 30rem) {
+  .ds-accordion__content .ds-accordion--default {
+    font-size: var(--ds-fontSize-18);
+  }
+}
 .ds-accordion__content .ds-accordion--compact {
   font-size: var(--fontSize-16);
-  font-weight: 400;
-  line-height: 24px;
+  font-weight: var(--ds-fontWeight-regular);
+  line-height: var(--ds-lineHeight-large);
   letter-spacing: var(--letterSpacing-wide);
 }
 
 .ds-accordion__close-button {
-  color: var(--ds-textColor-default, #1A1A1A);
-  all: unset;
-  border-bottom: 1px solid var(--ds-borderColor-light, #CCCCCC);
   display: flex;
   flex-direction: row;
-  gap: 8px;
+  gap: var(--ds-spacing-2xSmall);
   font-family: var(--ds-fontFamily-body);
   letter-spacing: var(--ds-letterSpacing-wide);
   width: 100%;
-}
-.ds-accordion__close-button:hover {
-  cursor: pointer;
-  background: var(--ds-bgColor-transparent-onLight-hover, rgba(0, 0, 0, 0.1019607843));
-}
-.ds-accordion__close-button:hover.ds-accordion--border-aligned {
-  padding-inline: 16px;
-  margin-inline: 0;
-}
-.ds-accordion__close-button:active {
-  background: var(--ds-bgColor-transparent-onLight-active, rgba(0, 0, 0, 0.1490196078));
-}
-.ds-accordion__close-button:active.ds-accordion--border-aligned {
-  padding-inline: 16px;
-  margin-inline: 0;
-}
-.ds-accordion__close-button:focus {
-  background: var(--ds-bgColor-transparent-onLight-hover, rgba(0, 0, 0, 0.1019607843));
-  box-shadow: 0px 0px 0px 1px var(--ds-palette-black);
-}
-.ds-accordion__close-button:focus.ds-accordion--border-aligned {
-  padding-inline: 16px;
-  margin-inline: 0;
-}
-.ds-accordion__close-button.ds-accordion--default {
-  padding: 16px;
-  font-family: var(--ds-fontFamily-body);
-  font-size: var(--ds-fontSize-18);
-  font-weight: 600;
-  line-height: 27px;
-  letter-spacing: var(--letterSpacing-wide);
-}
-.ds-accordion__close-button.ds-accordion--compact {
-  font-size: var(--ds-fontSize-16);
-  padding: 12px 16px 12px 16px;
-  line-height: 24px;
-  font-weight: 600;
-}
-.ds-accordion__close-button.ds-accordion--border-aligned {
-  padding-inline: 0;
-  padding-inline: 0;
-  margin-inline: 16px;
 }

package/dist/collection/components/01-base-components/ds-accordion/ds-accordion.js

@@ -8,10 +8,16 @@ export class DsAccordion {
     headingLevel = 2;
     useCloseButton = false;
     closeButtonLabel = 'Close';
-    isExpanded = this.openByDefault;
+    hideTopBorder = false;
+    isExpanded = false;
     host;
     headerButtonRef;
     shouldMoveFocus = false;
+    componentWillLoad() {
+        if (this.openByDefault) {
+            this.isExpanded = true;
+        }
+    }
     watchHandler(isExpanded) {
         if (!isExpanded && this.shouldMoveFocus && this.headerButtonRef) {
             this.headerButtonRef.focus();
@@ -35,16 +41,22 @@ export class DsAccordion {
         }
     };
     render() {
-        return (h("div", { key: '2cc1b7c39897a2437b1c1b2a2dda3c73366f2406', class: classNames('ds-accordion', `ds-accordion--${this.variant}`, {
-                'ds-accordion--border-aligned': this.borderAligned
-            }), role: "presentation" }, h("div", { key: 'a984d038525f683d8deb8cdf508f559ba0636b16', class: "ds-accordion__item" }, h("div", { key: '18e56c772766cacc2acf741777d0dd8c9dcaf4ca', role: "heading", "aria-level": this.headingLevel, class: "ds-accordion__title" }, h("button", { key: 'e89c25a2b74086bae943f6febe79783fc63bc7d6', class: classNames('ds-accordion__open-button', `ds-accordion--${this.variant}`, {
+        const iconSize = this.variant === 'compact' ? '1.5rem' : '2rem';
+        const buttonSize = this.variant === 'compact' ? 'small' : 'medium';
+        return (h("div", { key: '564a6e1e2e7fb75bdc76a187f2855b396765b3c2', class: classNames('ds-accordion', `ds-accordion--${this.variant}`, {
                 'ds-accordion--border-aligned': this.borderAligned
-            }), onClick: this.handleClick, onKeyDown: this.handleKeyDown, "aria-expanded": this.isExpanded ? 'true' : 'false', "aria-controls": `${this.accordionId}-panel`, id: this.accordionId, ref: (el) => this.headerButtonRef = el }, h("span", { key: '9c17fd4f9908e1cfc273929998ffb113ff750e35', class: "ds-accordion__icon", "aria-hidden": "true" }, this.isExpanded ?
-            h("ds-icon", { hidden: true, name: "keyboard_arrow_up" })
-            : h("ds-icon", { hidden: true, name: "keyboard_arrow_down" })), h("slot", { key: '2b426517dc51e1038524ac2954e1a48e1fc67774', name: "header" }))), h("div", { key: '8b3aeb23427ded6b5b6d98c09a2f111398ebd206', id: `${this.accordionId}-panel`, role: "region", "aria-labelledby": this.accordionId, class: `ds-accordion__panel ${this.isExpanded ? 'ds-accordion__panel--expanded' : ''}`, hidden: !this.isExpanded }, h("div", { key: 'c812dc0940c003329887a91a028fea11e8975fda', class: "ds-accordion__content" }, h("slot", { key: '6ce68b03d1f1e9673fa677581f4193d94d0fe97a', name: "content" })), this.useCloseButton &&
-            h("button", { key: '822aa59768cec2c2acf617bf70168a0c7f882bd7', class: classNames('ds-accordion__close-button', `ds-accordion--${this.variant}`, {
+            }), role: "presentation" }, h("div", { key: '4c265a4f8646ea3647420ed1ceb8e038f835b1df', class: "ds-accordion__item" }, h("div", { key: 'e0296ad3be3521668b5a7c0549986318a8803405', role: "heading", "aria-level": this.headingLevel, class: "ds-accordion__title" }, h("button", { key: '6388fe84f7803e13762720de373f67cc10c71b23', class: classNames('ds-accordion__open-button', `ds-accordion--${this.variant}`, {
+                'ds-accordion--border-aligned': this.borderAligned,
+                'ds-accordion--hide-top-border': this.hideTopBorder
+            }), onClick: this.handleClick, onKeyDown: this.handleKeyDown, "aria-expanded": this.isExpanded ? 'true' : 'false', "aria-controls": `${this.accordionId}-panel`, id: this.accordionId, ref: (el) => this.headerButtonRef = el }, h("span", { key: '57aef0a27eaa0f5c26b0c3bc313308ae2cca1359', class: "ds-accordion__icon", "aria-hidden": "true" }, this.isExpanded ?
+            h("ds-icon", { size: iconSize, hidden: true, name: "keyboard_arrow_up" })
+            : h("ds-icon", { size: iconSize, hidden: true, name: "keyboard_arrow_down" })), h("slot", { key: 'dc24d59ca565b40c9338aaf30d41652b5f405ef7', name: "header" }))), h("div", { key: '39305337ccc0e6ff0a6659ca5f945d945e65605f', id: `${this.accordionId}-panel`, role: "region", "aria-labelledby": this.accordionId, class: classNames('ds-accordion__panel', `ds-accordion__panel--${this.variant}`, {
+                'ds-accordion__panel--border-aligned': this.borderAligned,
+                'ds-accordion__panel--expanded': this.isExpanded
+            }), hidden: !this.isExpanded }, h("div", { key: 'b03d48f9d0c380e4ffa38527d27a1a6d8eb97261', class: "ds-accordion__content" }, h("slot", { key: 'aeb4c794ff45117dee3f28b04549e02998e824ab', name: "content" })), this.useCloseButton &&
+            h("ds-button", { key: '7ecd99ad96b61825f9d40484f7abf4892f8edbd9', "aria-labelledby": `${this.accordionId}-close-button ${this.accordionId}`, id: `${this.accordionId}-close-button`, class: classNames('ds-accordion__close-button', `ds-accordion--${this.variant}`, {
                     'ds-accordion--border-aligned': this.borderAligned
-                }), "aria-labelledby": `${this.accordionId}-close-button ${this.accordionId}`, id: `${this.accordionId}-close-button`, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("ds-icon", { key: '295bb76f0130566900081b90e5d80033bbe9758f', hidden: true, name: "keyboard_arrow_up" }), h("span", { key: '90dcf29559c485707ea8517e0056249027b1e45b' }, this.closeButtonLabel))))));
+                }), fontWeight: 'semiBold', variant: 'supplementary', colour: 'black', icon: 'keyboard_arrow_up', iconPosition: 'start', onClick: this.handleClick, onKeyDown: this.handleKeyDown, value: this.closeButtonLabel, size: buttonSize, type: 'button' })))));
     }
     static get is() { return "ds-accordion"; }
     static get encapsulation() { return "shadow"; }
@@ -199,6 +211,26 @@ export class DsAccordion {
                 "attribute": "close-button-label",
                 "reflect": false,
                 "defaultValue": "'Close'"
+            },
+            "hideTopBorder": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "hide-top-border",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }

package/dist/collection/components/01-base-components/ds-accordion/stories/ds-accordion.examples.stories.js

@@ -41,3 +41,18 @@ export const MultipleAccordions = {
     </ds-accordion>
     `,
 };
+export const LongTitles = {
+    render: () => html `
+    <ds-accordion accordion-id="ac-1">
+      <div slot="header">${generateLoremIpsum({ paragraphs: 2, wordsPerParagraph: 20, consistent: true })}</div>
+      <div slot="content">${exampleContent}</div>
+    </ds-accordion>
+    <ds-accordion accordion-id="ac-2">
+      <div slot="header">${generateLoremIpsum({ paragraphs: 3, wordsPerParagraph: 30, consistent: true })}</div>
+      <div slot="content">
+        <p>${generateLoremIpsum({ paragraphs: 5, wordsPerParagraph: 20 })}</p>
+        <p>${generateLoremIpsum({ paragraphs: 8, wordsPerParagraph: 30 })}</p>
+      </div>
+    </ds-accordion>
+    `,
+};

package/dist/collection/components/01-base-components/ds-accordion/stories/ds-accordion.features.stories.js

@@ -42,7 +42,7 @@ WithCloseButton.args = {
     useCloseButton: true,
 };
 WithCloseButton.render = (args) => html `
-  <ds-accordion use-close-button="${args.useCloseButton}">
+  <ds-accordion use-close-button="${args.useCloseButton}" open-by-default="true">
     <div slot="header">${exampleHeader}</div>
     <div slot="content">${exampleContent}</div>
   </ds-accordion>

package/dist/collection/components/01-base-components/ds-accordion/stories/ds-accordion.stories.js

@@ -41,6 +41,12 @@ const meta = {
             },
             name: 'Custom id for accordion element'
         },
+        hideTopBorder: {
+            control: {
+                type: 'boolean'
+            },
+            name: 'Hide top border'
+        },
     },
 };
 const exampleHeader = generateLoremIpsum();
@@ -53,7 +59,8 @@ Default.args = {
     borderAligned: false,
     openByDefault: false,
     headingLevel: 2,
-    accordionId: 'dsaccordion'
+    accordionId: 'dsaccordion',
+    hideTopBorder: false,
 };
 Default.render = (args) => html `
   <ds-accordion
@@ -63,6 +70,7 @@ Default.render = (args) => html `
     open-by-default="${args.openByDefault}"
     heading-level="${args.headingLevel}"
     accordion-id="${args.accordionId}"
+    hide-top-border="${args.hideTopBorder}"
   >
     <div slot="header">${exampleHeader}</div>
     <div slot="content">${exampleContent}</div>
@@ -92,6 +100,7 @@ Playground.render = (args) => {
       open-by-default="${args.openByDefault}"
       heading-level="${args.headingLevel}"
       accordion-id="${args.accordionId}-${index + 1}"
+      hide-top-border="${args.hideTopBorder}"
     >
       <div slot="header">${args.Header}</div>
       <div slot="content">${args.Content}</div>

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

@@ -2,7 +2,7 @@
   display: inline-block;
 }
 
-button {
+.ds-button {
   align-items: center;
   border-radius: 0;
   border-style: solid;
@@ -15,224 +15,224 @@ button {
   min-height: 44px;
   padding: var(--ds-spacing-3xSmall) var(--ds-spacing-xSmall);
 }
-button:focus {
+.ds-button:focus {
   outline-offset: 2px;
   outline-width: 2px;
 }
-button.icon-only {
+.ds-button.icon-only {
   padding-left: 0;
   padding-right: 0;
   aspect-ratio: 1;
   justify-content: center;
 }
-button .button-value {
+.ds-button .button-value {
   padding-right: var(--ds-spacing-3xSmall);
   padding-left: var(--ds-spacing-3xSmall);
 }
-button ds-icon {
+.ds-button ds-icon {
   height: 1.5rem;
 }
-button.icon-start:not(.small) ds-icon {
+.ds-button.icon-start:not(.small) ds-icon {
   margin-right: var(--ds-spacing-3xSmall);
 }
-button.icon-end:not(.small) ds-icon {
+.ds-button.icon-end:not(.small) ds-icon {
   margin-left: var(--ds-spacing-3xSmall);
 }
-button.primary.blue {
+.ds-button.primary.blue {
   background-color: var(--ds-bgColor-primary);
   border-color: transparent;
   color: var(--ds-textColor-white);
 }
-button.primary.blue:hover {
+.ds-button.primary.blue:hover {
   background-color: var(--ds-bgColor-primary-hover);
 }
-button.primary.blue:active, button.primary.blue--active {
+.ds-button.primary.blue:active, .ds-button.primary.blue--active {
   background-color: var(--ds-bgColor-primary-active);
 }
-button.primary.blue:focus-visible {
+.ds-button.primary.blue:focus-visible {
   box-shadow: 0 0 0 2px var(--ds-borderColor-white);
   outline-color: var(--ds-borderColor-black);
 }
-button.primary.blue[aria-disabled=true], button.primary.blue.disabled, button.primary.blue:disabled {
+.ds-button.primary.blue[aria-disabled=true], .ds-button.primary.blue.disabled, .ds-button.primary.blue:disabled {
   background-color: var(--ds-bgColor-disabled-onLight);
   border-color: transparent;
   color: var(--ds-textColor-disabled-onLight);
 }
-button.primary.black {
+.ds-button.primary.black {
   background-color: var(--ds-bgColor-black);
   border-color: transparent;
   color: var(--ds-textColor-white);
 }
-button.primary.black:hover {
+.ds-button.primary.black:hover {
   background-color: var(--ds-bgColor-black-hover);
 }
-button.primary.black:active, button.primary.black--active {
+.ds-button.primary.black:active, .ds-button.primary.black--active {
   background-color: var(--ds-bgColor-black-active);
 }
-button.primary.black:focus-visible {
+.ds-button.primary.black:focus-visible {
   box-shadow: 0 0 0 2px var(--ds-borderColor-white);
   outline-color: var(--ds-borderColor-black);
 }
-button.primary.black[aria-disabled=true], button.primary.black.disabled, button.primary.black:disabled {
+.ds-button.primary.black[aria-disabled=true], .ds-button.primary.black.disabled, .ds-button.primary.black:disabled {
   background-color: var(--ds-bgColor-disabled-onLight);
   border-color: transparent;
   color: var(--ds-textColor-disabled-onLight);
 }
-button.primary.white {
+.ds-button.primary.white {
   background-color: var(--ds-bgColor-white);
   border-color: transparent;
   color: var(--ds-textColor-default);
 }
-button.primary.white:hover {
+.ds-button.primary.white:hover {
   background-color: var(--ds-bgColor-white-hover);
 }
-button.primary.white:active, button.primary.white--active {
+.ds-button.primary.white:active, .ds-button.primary.white--active {
   background-color: var(--ds-bgColor-white-active);
 }
-button.primary.white:focus-visible {
+.ds-button.primary.white:focus-visible {
   box-shadow: 0 0 0 2px var(--ds-borderColor-black);
   outline-color: var(--ds-borderColor-white);
 }
-button.primary.white[aria-disabled=true], button.primary.white.disabled, button.primary.white:disabled {
+.ds-button.primary.white[aria-disabled=true], .ds-button.primary.white.disabled, .ds-button.primary.white:disabled {
   background-color: var(--ds-bgColor-disabled-onDark);
   border-color: transparent;
   color: var(--ds-textColor-disabled-onDark);
 }
-button.secondary.blue {
+.ds-button.secondary.blue {
   background-color: var(--ds-bgColor-secondary);
   border-color: var(--ds-borderColor-primary);
   color: var(--ds-textColor-primary);
 }
-button.secondary.blue:hover {
+.ds-button.secondary.blue:hover {
   background-color: var(--ds-bgColor-secondary-hover);
 }
-button.secondary.blue:active, button.secondary.blue--active {
+.ds-button.secondary.blue:active, .ds-button.secondary.blue--active {
   background-color: var(--ds-bgColor-secondary-active);
 }
-button.secondary.blue:focus-visible {
+.ds-button.secondary.blue:focus-visible {
   box-shadow: 0 0 0 2px var(--ds-borderColor-white);
   outline-color: var(--ds-borderColor-black);
 }
-button.secondary.blue[aria-disabled=true], button.secondary.blue.disabled, button.secondary.blue:disabled {
+.ds-button.secondary.blue[aria-disabled=true], .ds-button.secondary.blue.disabled, .ds-button.secondary.blue:disabled {
   background-color: var(--ds-bgColor-secondary);
   border-color: var(--ds-borderColor-disabled-onLight);
   color: var(--ds-textColor-disabled-onLight);
 }
-button.secondary.black {
+.ds-button.secondary.black {
   background-color: transparent;
   border-color: var(--ds-borderColor-black);
   color: var(--ds-textColor-default);
 }
-button.secondary.black:hover {
+.ds-button.secondary.black:hover {
   background-color: var(--ds-bgColor-transparent-onLight-hover);
 }
-button.secondary.black:active, button.secondary.black--active {
+.ds-button.secondary.black:active, .ds-button.secondary.black--active {
   background-color: var(--ds-bgColor-transparent-onLight-active);
 }
-button.secondary.black:focus-visible {
+.ds-button.secondary.black:focus-visible {
   box-shadow: 0 0 0 2px var(--ds-borderColor-white);
   outline-color: var(--ds-borderColor-black);
 }
-button.secondary.black[aria-disabled=true], button.secondary.black.disabled, button.secondary.black:disabled {
+.ds-button.secondary.black[aria-disabled=true], .ds-button.secondary.black.disabled, .ds-button.secondary.black:disabled {
   background-color: transparent;
   border-color: var(--ds-borderColor-disabled-onLight);
   color: var(--ds-textColor-disabled-onLight);
 }
-button.secondary.white {
+.ds-button.secondary.white {
   background-color: transparent;
   border-color: var(--ds-borderColor-white);
   color: var(--ds-textColor-white);
 }
-button.secondary.white:hover {
+.ds-button.secondary.white:hover {
   background-color: var(--ds-bgColor-transparent-onDark-hover);
 }
-button.secondary.white:active, button.secondary.white--active {
+.ds-button.secondary.white:active, .ds-button.secondary.white--active {
   background-color: var(--ds-bgColor-transparent-onDark-active);
 }
-button.secondary.white:focus-visible {
+.ds-button.secondary.white:focus-visible {
   box-shadow: 0 0 0 2px var(--ds-borderColor-black);
   outline-color: var(--ds-borderColor-white);
 }
-button.secondary.white[aria-disabled=true], button.secondary.white.disabled, button.secondary.white:disabled {
+.ds-button.secondary.white[aria-disabled=true], .ds-button.secondary.white.disabled, .ds-button.secondary.white:disabled {
   background-color: transparent;
   border-color: var(--ds-borderColor-disabled-onDark);
   color: var(--ds-textColor-disabled-onDark);
 }
-button.supplementary.blue {
+.ds-button.supplementary.blue {
   background-color: transparent;
   border-color: transparent;
   color: var(--ds-textColor-primary);
   padding-right: 0;
   padding-left: 0;
 }
-button.supplementary.blue:hover {
+.ds-button.supplementary.blue:hover {
   background-color: var(--ds-bgColor-secondary-hover);
 }
-button.supplementary.blue:active, button.supplementary.blue--active {
+.ds-button.supplementary.blue:active, .ds-button.supplementary.blue--active {
   background-color: var(--ds-bgColor-secondary-active);
 }
-button.supplementary.blue:focus-visible {
+.ds-button.supplementary.blue:focus-visible {
   box-shadow: 0 0 0 2px var(--ds-borderColor-white);
   outline-color: var(--ds-borderColor-black);
 }
-button.supplementary.blue[aria-disabled=true], button.supplementary.blue.disabled, button.supplementary.blue:disabled {
+.ds-button.supplementary.blue[aria-disabled=true], .ds-button.supplementary.blue.disabled, .ds-button.supplementary.blue:disabled {
   background-color: transparent;
   border-color: transparent;
   color: var(--ds-textColor-disabled-onLight);
 }
-button.supplementary.black {
+.ds-button.supplementary.black {
   background-color: transparent;
   border-color: transparent;
   color: var(--ds-textColor-default);
   padding-right: 0;
   padding-left: 0;
 }
-button.supplementary.black:hover {
+.ds-button.supplementary.black:hover {
   background-color: var(--ds-bgColor-transparent-onLight-hover);
 }
-button.supplementary.black:active, button.supplementary.black--active {
+.ds-button.supplementary.black:active, .ds-button.supplementary.black--active {
   background-color: var(--ds-bgColor-transparent-onLight-active);
 }
-button.supplementary.black:focus-visible {
+.ds-button.supplementary.black:focus-visible {
   box-shadow: 0 0 0 2px var(--ds-borderColor-white);
   outline-color: var(--ds-borderColor-black);
 }
-button.supplementary.black[aria-disabled=true], button.supplementary.black.disabled, button.supplementary.black:disabled {
+.ds-button.supplementary.black[aria-disabled=true], .ds-button.supplementary.black.disabled, .ds-button.supplementary.black:disabled {
   background-color: transparent;
   border-color: transparent;
   color: var(--ds-textColor-disabled-onLight);
 }
-button.supplementary.white {
+.ds-button.supplementary.white {
   background-color: transparent;
   border-color: transparent;
   color: var(--ds-textColor-white);
   padding-right: 0;
   padding-left: 0;
 }
-button.supplementary.white:hover {
+.ds-button.supplementary.white:hover {
   background-color: var(--ds-bgColor-transparent-onDark-hover);
 }
-button.supplementary.white:active, button.supplementary.white--active {
+.ds-button.supplementary.white:active, .ds-button.supplementary.white--active {
   background-color: var(--ds-bgColor-transparent-onDark-active);
 }
-button.supplementary.white:focus-visible {
+.ds-button.supplementary.white:focus-visible {
   box-shadow: 0 0 0 2px var(--ds-borderColor-black);
   outline-color: var(--ds-borderColor-white);
 }
-button.supplementary.white[aria-disabled=true], button.supplementary.white.disabled, button.supplementary.white:disabled {
+.ds-button.supplementary.white[aria-disabled=true], .ds-button.supplementary.white.disabled, .ds-button.supplementary.white:disabled {
   background-color: transparent;
   border-color: transparent;
   color: var(--ds-textColor-disabled-onDark);
 }
-button.small {
+.ds-button.small {
   border-width: var(--ds-borderWidth-thin);
   font-size: var(--ds-fontSize-14);
   min-height: 32px;
   padding: var(--ds-spacing-4xSmall) var(--ds-spacing-2xSmall);
 }
-button.small.icon-only {
+.ds-button.small.icon-only {
   width: 32px;
 }
-button.small ds-icon {
+.ds-button.small ds-icon {
   height: 1rem;
 }