@cfpb/cfpb-design-system 4.3.0 → 4.3.1

package/src/elements/cfpb-button/cfpb-button-link.scss

@@ -2,17 +2,13 @@
 @use './vars' as *;
 @use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
 
-//
-// Button link
-//
-
 /*
-Link text and underline.
-$v: Link link and visited color.
-$h: Link hover color.
-$f: Link focus color.
-$a: Link active color.
-*/
+  Link text and underline.
+  $v: Link link and visited color.
+  $h: Link hover color.
+  $f: Link focus color.
+  $a: Link active color.
+  */
 @mixin u-btn-link-states($selector, $v, $h, $f, $a) {
   #{$selector} {
     &,
@@ -29,6 +25,7 @@ $a: Link active color.
       text-decoration-style: solid;
       background-color: transparent;
       color: $h;
+      box-shadow: none; // Added by secondary variant.
     }
 
     &:focus,
@@ -48,49 +45,59 @@ $a: Link active color.
   }
 }
 
-.a-btn--link {
-  // Padding added so the focus rectangle falls below the underline.
-  padding: 1.5px 0;
-  border-radius: 0;
-  text-decoration-line: underline;
-  text-decoration-thickness: 1px;
-  text-decoration-style: dotted;
-  text-underline-offset: 4.5px;
+:host {
+  //
+  // Button link
+  //
+
+  .a-btn--link {
+    // Remove any border and background add by primary and secondary button.
+    box-shadow: none;
+    background-color: transparent;
+
+    // Padding added so the focus rectangle falls below the underline.
+    padding: 1.5px 0;
+    border-radius: 0;
+    text-decoration-line: underline;
+    text-decoration-thickness: 1px;
+    text-decoration-style: dotted;
+    text-underline-offset: 4.5px;
 
-  &:has(svg) {
-    // Button links should be closer to their icon.
-    gap: math.div(5px, $base-font-size-px) + rem;
+    &:has(svg) {
+      // Button links should be closer to their icon.
+      gap: math.div(5px, $base-font-size-px) + rem;
 
-    // Button links shouldn't have a divider.
-    &::before {
-      display: none;
+      // Button links shouldn't have a divider.
+      &::before {
+        display: none;
+      }
     }
   }
-}
 
-@include u-btn-link-states(
-  '.a-btn--link',
-  var(--link-text),
-  var(--link-text-hover),
-  var(--link-text),
-  var(--link-text-active)
-);
+  @include u-btn-link-states(
+    '.a-btn--link',
+    var(--link-text),
+    var(--link-text-hover),
+    var(--link-text),
+    var(--link-text-active)
+  );
 
-//
-// Secondary button link
-//
+  //
+  // Secondary button link
+  //
 
-// The .a-btn--link.a-btn--secondary combo shouldn't be used,
-// so we provide no styles.
+  // The .a-btn--link.a-btn--secondary combo shouldn't be used,
+  // so we provide no styles.
 
-//
-// Destructive action button link
-//
+  //
+  // Destructive action button link
+  //
 
-@include u-btn-link-states(
-  '.a-btn--link.a-btn--warning',
-  var(--btn-warning-bg),
-  var(--btn-warning-bg-hover),
-  var(--btn-warning-bg),
-  var(--btn-warning-bg-active)
-);
+  @include u-btn-link-states(
+    '.a-btn--link.a-btn--warning',
+    var(--btn-warning-bg),
+    var(--btn-warning-bg-hover),
+    var(--btn-warning-bg),
+    var(--btn-warning-bg-active)
+  );
+}

package/src/elements/cfpb-button/cfpb-button.scss

@@ -1,222 +1,218 @@
 @use 'sass:math';
 @use './vars' as *;
 @use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/elements/cfpb-icon-text/cfpb-icon-text.component' as *;
 
-//
-// Default button
-//
-
-button.a-btn::-moz-focus-inner,
-input.a-btn::-moz-focus-inner {
-  // Fixes inconsistent button.btn height in Firefox.
-  // Helps with inconsistent input.btn height in Firefox but not completely.
-  border: 0;
-}
-
-@mixin u-btn-divider() {
-  content: '';
-  border-left: 1px solid var(--btn-divider);
-  order: 2;
-  place-self: normal;
-}
-
-.a-btn {
-  line-height: math.div(19px, $base-font-size-px);
-  appearance: none;
-  display: flex;
-  gap: math.div(10px, $base-font-size-px) + rem;
-
-  box-sizing: border-box;
-  padding: math.div($btn-v-padding, $btn-font-size) + em
-    math.div($btn-h-padding, $btn-font-size) + em;
-  border: 0;
-  margin: 0;
-  border-radius: math.div($btn-border-radius-size, $btn-font-size) + em;
-  cursor: pointer;
-  font-size: math.div($btn-font-size, $base-font-size-px) + em;
-  font-weight: 500;
-  text-align: center;
-  text-decoration: none;
-  transition: background-color 0.1s;
-  width: fit-content;
-  height: fit-content;
-  justify-content: center;
-  align-items: center;
-
-  &,
-  &:link,
-  &:visited {
-    background-color: var(--btn-bg);
-    color: var(--btn-text);
-  }
-
-  &:hover,
-  &.hover,
-  &:focus,
-  &.focus {
-    background-color: var(--btn-bg-hover);
-    color: var(--btn-text);
-  }
-
-  &:focus,
-  &.focus {
-    outline: 1px dotted var(--btn-bg);
-
-    // The outline-offset property is not supported everywhere (e.g. IE)
-    // but it adds a nice touch in browsers where it is.
-    outline-offset: 1px;
-  }
+:host {
+  //
+  // Default button
+  //
 
-  &:active,
-  &.active {
-    background-color: var(--btn-bg-active);
+  button.a-btn::-moz-focus-inner,
+  input.a-btn::-moz-focus-inner {
+    // Fixes inconsistent button.btn height in Firefox.
+    // Helps with inconsistent input.btn height in Firefox but not completely.
+    border: 0;
   }
 
-  //
-  // Secondary button
-  //
+  .a-btn {
+    line-height: math.div(19px, $base-font-size-px);
+    appearance: none;
+    display: flex;
+    gap: math.div(10px, $base-font-size-px) + rem;
+
+    box-sizing: border-box;
+    padding: math.div($btn-v-padding, $btn-font-size) + em
+      math.div($btn-h-padding, $btn-font-size) + em;
+    border: 0;
+    margin: 0;
+    border-radius: math.div($btn-border-radius-size, $btn-font-size) + em;
+    cursor: pointer;
+    font-size: math.div($btn-font-size, $base-font-size-px) + em;
+    font-weight: 500;
+    text-align: center;
+    text-decoration: none;
+    transition: background-color 0.1s;
+    width: fit-content;
+    height: fit-content;
+    justify-content: center;
+    align-items: center;
 
-  &--secondary {
     &,
     &:link,
     &:visited {
-      background-color: var(--btn-secondary-bg);
-      color: var(--btn-secondary-text);
-      box-shadow: 0 0 0 1px var(--btn-secondary-border) inset;
+      background-color: var(--btn-bg);
+      color: var(--btn-text);
     }
 
     &:hover,
     &.hover,
     &:focus,
     &.focus {
-      background-color: var(--btn-secondary-bg-hover);
-      color: var(--btn-secondary-text-hover);
-      box-shadow: 0 0 0 1px var(--btn-secondary-border-hover) inset;
+      background-color: var(--btn-bg-hover);
+      color: var(--btn-text);
     }
 
     &:focus,
     &.focus {
-      outline-color: var(--btn-secondary-border);
+      outline: 1px dotted var(--btn-bg);
+
+      // The outline-offset property is not supported everywhere (e.g. IE)
+      // but it adds a nice touch in browsers where it is.
+      outline-offset: 1px;
     }
 
     &:active,
     &.active {
-      background-color: var(--btn-secondary-bg-active);
-      color: var(--btn-secondary-text-active);
-      box-shadow: 0 0 0 1px var(--btn-secondary-border-active) inset;
+      background-color: var(--btn-bg-active);
     }
-  }
 
-  //
-  // Destructive action button
-  //
+    //
+    // Secondary button
+    //
+
+    &--secondary {
+      &,
+      &:link,
+      &:visited {
+        background-color: var(--btn-secondary-bg);
+        color: var(--btn-secondary-text);
+        box-shadow: 0 0 0 1px var(--btn-secondary-border) inset;
+      }
+
+      &:hover,
+      &.hover,
+      &:focus,
+      &.focus {
+        background-color: var(--btn-secondary-bg-hover);
+        color: var(--btn-secondary-text-hover);
+        box-shadow: 0 0 0 1px var(--btn-secondary-border-hover) inset;
+      }
+
+      &:focus,
+      &.focus {
+        outline-color: var(--btn-secondary-border);
+      }
+
+      &:active,
+      &.active {
+        background-color: var(--btn-secondary-bg-active);
+        color: var(--btn-secondary-text-active);
+        box-shadow: 0 0 0 1px var(--btn-secondary-border-active) inset;
+      }
+    }
 
-  &--warning {
-    &,
-    &:link,
-    &:visited {
-      background-color: var(--btn-warning-bg);
-      color: var(--btn-warning-text);
+    //
+    // Destructive action button
+    //
+
+    &--warning {
+      &,
+      &:link,
+      &:visited {
+        background-color: var(--btn-warning-bg);
+        color: var(--btn-warning-text);
+      }
+
+      &:hover,
+      &.hover,
+      &:focus,
+      &.focus {
+        background-color: var(--btn-warning-bg-hover);
+      }
+
+      &:focus,
+      &.focus {
+        outline-color: var(--btn-warning-bg);
+      }
+
+      &:active,
+      &.active {
+        background-color: var(--btn-warning-bg-active);
+      }
     }
 
-    &:hover,
-    &.hover,
-    &:focus,
-    &.focus {
-      background-color: var(--btn-warning-bg-hover);
+    //
+    // Disabled button
+    //
+
+    &--disabled,
+    &[disabled],
+    &[aria-disabled='true'] {
+      &,
+      &:link,
+      &:visited,
+      &:hover,
+      &.hover,
+      &:focus,
+      &.focus,
+      &:active,
+      &.active {
+        background-color: var(--btn-disabled-bg);
+        color: var(--btn-disabled-text);
+        box-shadow: none; // Added by secondary variant.
+        cursor: not-allowed;
+      }
+
+      &:focus,
+      &.focus {
+        outline-color: var(--btn-disabled-outline);
+      }
     }
 
-    &:focus,
-    &.focus {
-      outline-color: var(--btn-warning-bg);
+    //
+    // Full width button on x-small screens
+    //
+    &--full-on-xs {
+      // Mobile only.
+      @include respond-to-max($bp-xs-max) {
+        width: 100%;
+      }
     }
 
-    &:active,
-    &.active {
-      background-color: var(--btn-warning-bg-active);
+    // Set either the text or icon as the last item in the button.
+    &:has(svg + span) {
+      span {
+        order: 3;
+      }
     }
-  }
 
-  //
-  // Disabled button
-  //
+    &:has(span + svg) {
+      svg {
+        order: 3;
 
-  &--disabled,
-  &[disabled],
-  &[aria-disabled='true'] {
-    &,
-    &:link,
-    &:visited,
-    &:hover,
-    &.hover,
-    &:focus,
-    &.focus,
-    &:active,
-    &.active {
-      background-color: var(--btn-disabled-bg);
-      color: var(--btn-disabled-text);
-      cursor: default; // Fallback for IE/Opera
-      cursor: not-allowed;
+        // Prevent icon from shrinking when button wraps.
+        flex: none;
+      }
     }
 
-    &:focus,
-    &.focus {
-      outline-color: var(--btn-disabled-outline);
+    // Handle button with icon divider logic.
+    &:not(.a-btn--hide-icon):has(svg + span)::before,
+    &:not(.a-btn--hide-icon):has(span + svg)::before {
+      @include u-btn-divider;
     }
-  }
 
-  //
-  // Full width button on x-small screens
-  //
-  &--full-on-xs {
-    // Mobile only.
-    @include respond-to-max($bp-xs-max) {
-      width: 100%;
+    // Handle different coloring in divider.
+    &--secondary:has(svg)::before {
+      border-color: var(--btn-secondary-divider) !important;
     }
-  }
 
-  // Set either the text or icon as the last item in the button.
-  &:has(svg + span) {
-    span {
-      order: 3;
+    &--warning:has(svg)::before {
+      border-color: var(--btn-warning-divider) !important;
     }
-  }
 
-  &:has(span + svg) {
-    svg {
-      order: 3;
-
-      // Prevent icon from shrinking when button wraps.
-      flex: none;
+    &--disabled:has(svg)::before,
+    &[disabled]:has(svg)::before,
+    &[aria-disabled='true']:has(svg)::before {
+      border-color: var(--btn-disabled-divider) !important;
     }
-  }
-
-  // Handle button with icon divider logic.
-  &:not(.a-btn--hide-icon):has(svg + span)::before,
-  &:not(.a-btn--hide-icon):has(span + svg)::before {
-    @include u-btn-divider;
-  }
-
-  // Handle different coloring in divider.
-  &--secondary:has(svg)::before {
-    border-color: var(--btn-secondary-divider) !important;
-  }
-
-  &--warning:has(svg)::before {
-    border-color: var(--btn-warning-divider) !important;
-  }
-
-  &--disabled:has(svg)::before,
-  &[disabled]:has(svg)::before,
-  &[aria-disabled='true']:has(svg)::before {
-    border-color: var(--btn-disabled-divider) !important;
-  }
 
-  // Hide the icon if the a-btn--hide-icon modifier is set.
-  // Useful for showing and hiding a loading icon, for example.
-  &--hide-icon {
-    svg {
-      display: none;
+    // Hide the icon if the a-btn--hide-icon modifier is set.
+    // Useful for showing and hiding a loading icon, for example.
+    &--hide-icon {
+      svg {
+        display: none;
+      }
     }
   }
 }

package/src/elements/cfpb-button/index.js

@@ -92,6 +92,17 @@ export class CfpbButton extends LitElement {
     this.#iconTextDom.value?.showIcon();
   }
 
+  get dividerColorVar() {
+    switch (this.variant) {
+      case 'warning':
+        return '--btn-warning-divider';
+      case 'secondary':
+        return '--btn-secondary-divider';
+      default:
+        return '--btn-divider';
+    }
+  }
+
   /**
    * Ensure the variant value is valid, and fall back to a default if not.
    * @returns {string} A valid variant value string.
@@ -122,7 +133,11 @@ export class CfpbButton extends LitElement {
 
   #renderTextAndIcon() {
     return html`
-      <cfpb-icon-text ${ref(this.#iconTextDom)} ?disabled=${this.disabled}>
+      <cfpb-icon-text
+        ${ref(this.#iconTextDom)}
+        ?disabled=${this.disabled}
+        style="--icon-text-divider: var(${this.dividerColorVar})"
+      >
         <slot></slot>
       </cfpb-icon-text>
     `;

package/src/elements/cfpb-button/vars.css

@@ -2,7 +2,7 @@
  * Do not edit directly, this file was auto-generated.
  */
 
-:host {
+:root {
   --btn-bg: var(--pacific);
   --btn-bg-active: var(--navy);
   --btn-bg-hover: var(--pacific-dark);

package/src/elements/cfpb-expandable/cfpb-expandable.component.scss

@@ -1,6 +1,6 @@
 @use 'sass:math';
-@use '@cfpb/cfpb-design-system/src/abstracts' as *;
-@use '@cfpb/cfpb-design-system/src/base' as *;
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/elements/base' as *;
 @use '@cfpb/cfpb-design-system/src/utilities' as *;
 @use '../cfpb-utilities/transition/transition.scss' as *;
 

package/src/elements/cfpb-file-upload/index.js

@@ -30,8 +30,8 @@ export class CfpbFileUpload extends LitElement {
     this.#hideDetails();
   }
 
-  fileInput = createRef();
-  fileDetails = createRef();
+  #fileInput = createRef();
+  #fileDetails = createRef();
 
   #getUploadName(fileName) {
     let uploadName = fileName;
@@ -44,9 +44,9 @@ export class CfpbFileUpload extends LitElement {
   }
 
   #showDetails() {
-    this.fileName = this.#getUploadName(this.fileInput.value.value);
-    this.value = this.fileInput.value.value;
-    this.files = this.fileInput.value.files;
+    this.fileName = this.#getUploadName(this.#fileInput.value.value);
+    this.value = this.#fileInput.value.value;
+    this.files = this.#fileInput.value.files;
     this.isDetailHidden = false;
   }
 
@@ -58,7 +58,7 @@ export class CfpbFileUpload extends LitElement {
   }
 
   #checkStatus() {
-    if (this.fileInput.value.value == '') {
+    if (this.#fileInput.value.value == '') {
       this.#hideDetails();
     } else {
       this.#showDetails();
@@ -70,7 +70,7 @@ export class CfpbFileUpload extends LitElement {
       <cfpb-button
         variant="secondary"
         @click=${() => {
-          this.fileInput.value.click();
+          this.#fileInput.value.click();
         }}
       >
         <slot></slot>
@@ -82,12 +82,12 @@ export class CfpbFileUpload extends LitElement {
         accept=${this.accept}
         @input=${() => this.#checkStatus()}
         @cancel=${() => this.#checkStatus()}
-        ${ref(this.fileInput)}
+        ${ref(this.#fileInput)}
       />
       <div
         part="upload-details"
         ?hidden=${this.isDetailHidden}
-        ${ref(this.fileDetails)}
+        ${ref(this.#fileDetails)}
       >
         <h4>File added</h4>
         <ul>

package/src/elements/cfpb-form-search-input/index.js

@@ -84,6 +84,10 @@ export class CfpbFormSearchInput extends LitElement {
     );
   }
 
+  focus() {
+    this.#searchInput.value.focus();
+  }
+
   render() {
     return html`
       <div

package/src/elements/cfpb-icon-text/cfpb-icon-text.component.scss

@@ -44,7 +44,8 @@
 }
 
 :host([disabled]) {
-  --icon-text-divider: var(--icon-text-divider-disabled);
+  // !important is set so that disabled divider color overrides all other color.
+  --icon-text-divider: var(--icon-text-divider-disabled) !important;
 }
 
 // Hide SVG if user calls hideIcon()

package/src/elements/cfpb-list/cfpb-list.component.scss

@@ -4,20 +4,31 @@
 
 :host {
   ::slotted(cfpb-list-item) {
-    border-bottom: 1px solid var(--gray-20);
+    position: relative;
+    margin-top: 1px;
 
-    // Overlap with the border of prior item.
-    margin-top: -1px;
-  }
+    &::before,
+    &::after {
+      position: absolute;
+      content: '';
+      display: block;
+      width: 100%;
+      height: 1px;
+    }
 
-  ::slotted(cfpb-list-item:first-of-type) {
-    border-top: 1px solid var(--gray-20);
+    &::before {
+      top: -1px;
+      border-top: 1px solid var(--gray-20);
+    }
 
-    // Don't shift the first item.
-    margin-top: 0;
+    &::after {
+      bottom: -1px;
+      border-bottom: 1px solid var(--gray-20);
+    }
   }
 
   :focus {
     outline: 1px dotted var(--pacific);
+    outline-offset: 2px;
   }
 }