@cfpb/cfpb-design-system 4.2.4 → 4.3.1

package/src/components/cfpb-buttons/button-group.scss

@@ -1,5 +1,5 @@
 @use 'sass:math';
-@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
 
 .m-btn-group {
   display: flex;

package/src/components/cfpb-buttons/button-link.scss

@@ -1,52 +1,8 @@
 @use 'sass:math';
 @use './vars.scss' as *;
-@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/elements/cfpb-button/cfpb-button-link' 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.
-*/
-@mixin u-btn-link-states($selector, $v, $h, $f, $a) {
-  #{$selector} {
-    &,
-    &:link,
-    &:visited {
-      text-decoration-color: $v;
-      background-color: transparent;
-      color: $v;
-    }
-
-    &:hover,
-    &.hover {
-      text-decoration-color: $h;
-      text-decoration-style: solid;
-      background-color: transparent;
-      color: $h;
-    }
-
-    &:focus,
-    &.focus {
-      background-color: transparent;
-      outline: 1px dotted $f;
-      color: $f;
-    }
-
-    &:active,
-    &.active {
-      text-decoration-color: $a;
-      text-decoration-style: solid;
-      background-color: transparent;
-      color: $a;
-    }
-  }
-}
 
 .a-btn--link {
   // Padding added so the focus rectangle falls below the underline.
@@ -70,10 +26,10 @@ $a: Link active color.
 
 @include u-btn-link-states(
   '.a-btn--link',
-  $link-text,
-  $link-text-hover,
-  $link-text,
-  $link-text-active
+  var(--link-text),
+  var(--link-text-hover),
+  var(--link-text),
+  var(--link-text-active)
 );
 
 //
@@ -89,8 +45,8 @@ $a: Link active color.
 
 @include u-btn-link-states(
   '.a-btn--link.a-btn--warning',
-  $btn-warning-bg,
-  $btn-warning-bg-hover,
-  $btn-warning-bg,
-  $btn-warning-bg-active
+  var(--btn-warning-bg),
+  var(--btn-warning-bg-hover),
+  var(--btn-warning-bg),
+  var(--btn-warning-bg-active)
 );

package/src/components/cfpb-buttons/button.scss

@@ -1,6 +1,6 @@
 @use 'sass:math';
 @use './vars.scss' as *;
-@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
 
 //
 // Default button
@@ -13,7 +13,7 @@ input.a-btn::-moz-focus-inner {
   border: 0;
 }
 
-@mixin u-btn-divider() {
+@mixin legacy-u-btn-divider() {
   content: '';
   border-left: 1px solid $btn-divider;
   order: 2;
@@ -193,7 +193,7 @@ input.a-btn::-moz-focus-inner {
   // 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;
+    @include legacy-u-btn-divider;
   }
 
   // Handle different coloring in divider.

package/src/components/cfpb-buttons/vars.scss

@@ -1,4 +1,4 @@
-@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
 
 /* ==========================================================================
    Design System

package/src/components/cfpb-expandables/expandable-group.scss

@@ -1,6 +1,6 @@
 @use 'sass:math';
 @use './vars' as *;
-@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
 
 /* ==========================================================================
    Design System

package/src/components/cfpb-expandables/expandable.js

@@ -62,6 +62,9 @@ function Expandable(element) {
       : MaxHeightTransition.CLASSES.MH_ZERO;
     _transition = new MaxHeightTransition(_contentDom).init(initialClass);
 
+    // Initially hide content if expandable isn't expanded.
+    if (!isExpanded) _contentDom.classList.add('u-hidden');
+
     // Create root menu.
     _flyout = new FlyoutMenu(_dom);
 

package/src/components/cfpb-expandables/expandable.scss

@@ -1,6 +1,6 @@
 @use 'sass:math';
 @use './vars' as *;
-@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
 
 /* ==========================================================================
    Design System

package/src/components/cfpb-expandables/summary.scss

@@ -1,5 +1,5 @@
 @use 'sass:math';
-@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
 
 .o-summary {
   &__content {

package/src/components/cfpb-forms/form-alert.scss

@@ -1,5 +1,5 @@
 @use 'sass:math';
-@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
 
 .a-form-alert {
   --form-alert-icon-color: var(--form-alert-icon-color-default);

package/src/components/cfpb-forms/form-field.scss

@@ -1,5 +1,5 @@
 @use 'sass:math';
-@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
 @use '@cfpb/cfpb-design-system/src/utilities' as *;
 
 .m-form-field {
@@ -216,21 +216,21 @@
       box-sizing: border-box;
       width: 100%;
       padding: 15px;
-      background-color: $form-field-input-lg-target-bg;
+      background-color: var(--form-field-input-lg-target-bg);
     }
 
     .a-checkbox,
     .a-radio {
       &:checked + .a-label {
-        background-color: $form-field-input-lg-target-bg-selected;
-        box-shadow: inset 0 0 0 1px $form-field-input-lg-target-border;
+        background-color: var(--form-field-input-lg-target-bg-selected);
+        box-shadow: inset 0 0 0 1px var(--form-field-input-lg-target-border);
       }
 
       &:hover + .a-label,
       &.hover + .a-label,
       &:focus + .a-label,
       &.focus + .a-label {
-        box-shadow: inset 0 0 0 2px $form-field-input-lg-target-border;
+        box-shadow: inset 0 0 0 2px var(--form-field-input-lg-target-border);
       }
 
       &:focus + .a-label,
@@ -244,7 +244,7 @@
       &:hover:disabled + .a-label {
         color: var(--choice-label-disabled);
         box-shadow: none;
-        background-color: $form-field-input-lg-target-bg-disabled;
+        background-color: var(--form-field-input-lg-target-bg-disabled);
       }
 
       &:checked:disabled + .a-label {

package/src/components/cfpb-forms/form.scss

@@ -1,5 +1,5 @@
 @use 'sass:math';
-@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
 
 .o-form {
   &__group {

package/src/components/cfpb-forms/label.scss

@@ -1,11 +1,11 @@
 @use 'sass:math';
-@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
 
 .a-label {
   display: inline-block;
 
   &__helper {
-    color: $label-helper;
+    color: var(--label-helper);
     font-size: math.div(16px, $base-font-size-px) + rem;
     font-weight: normal;
 

package/src/components/cfpb-forms/multiselect.js

@@ -556,7 +556,7 @@ function Multiselect(element) {
 
     _instance = this;
     _name = _dom.name || _dom.id;
-    _placeholder = _dom.getAttribute('placeholder');
+    _placeholder = _dom.getAttribute('data-placeholder');
     _options = _dom.options || [];
 
     // Allow devs to pass the config settings they want and not worry about the rest

package/src/components/cfpb-forms/multiselect.scss

@@ -1,5 +1,5 @@
 @use 'sass:math';
-@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
 
 // Initial and no-js state.
 select.o-multiselect {

package/src/components/cfpb-forms/range.scss

@@ -1,11 +1,11 @@
 @use 'sass:math';
-@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
 
 @mixin u-range-track-styles() {
   height: math.div(11px, $base-font-size-px) + rem;
   width: 100%;
-  background-color: $range-bg-track;
-  border: 1px solid $range-border;
+  background-color: var(--range-bg-track);
+  border: 1px solid var(--range-border);
   border-radius: 8px;
   cursor: pointer;
 }
@@ -15,15 +15,15 @@
   width: math.div(45px, $base-font-size-px) + rem;
   margin-top: math.div(-18px, $base-font-size-px) + rem;
   appearance: none;
-  border: 1px solid $range-border;
+  border: 1px solid var(--range-border);
   border-radius: 50%;
-  background-color: $range-bg;
+  background-color: var(--range-bg);
   cursor: pointer;
 }
 
 @mixin u-range-thumb-focus-styles() {
-  background-color: $range-bg-focused;
-  border: 2px solid $range-border-focused;
+  background-color: var(--range-bg-focused);
+  border: 2px solid var(--range-border-focused);
 }
 
 .a-range {

package/src/components/cfpb-forms/search-input.scss

@@ -1,5 +1,5 @@
 @use 'sass:math';
-@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
 
 .o-search-input {
   display: flex;

package/src/components/cfpb-forms/select.scss

@@ -1,5 +1,5 @@
 @use 'sass:math';
-@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
 
 .a-select {
   --select-border: var(--select-border-default);

package/src/components/cfpb-forms/tag.scss

@@ -1,5 +1,5 @@
 @use 'sass:math';
-@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
 @use '@cfpb/cfpb-design-system/src/utilities' as *;
 @use '@cfpb/cfpb-design-system/src/components/cfpb-typography/mixins' as *;
 

package/src/components/cfpb-forms/text-input.scss

@@ -1,5 +1,5 @@
 @use 'sass:math';
-@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
 
 .a-text-input {
   // Theme variables.

package/src/components/cfpb-icons/icon.scss

@@ -1,4 +1,4 @@
-@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
 
 /* ==========================================================================
    Design System

package/src/components/cfpb-layout/card-group.scss

@@ -1,5 +1,5 @@
 @use 'sass:math';
-@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
 
 // Grid-based "column" card group layouts.
 .o-card-group {

package/src/components/cfpb-layout/card.scss

@@ -1,5 +1,5 @@
 @use 'sass:math';
-@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
 
 // $c = default state.
 // $v = `:visited` state.

package/src/components/cfpb-layout/email-signup.scss

@@ -1,5 +1,5 @@
 @use 'sass:math';
-@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
 
 .o-email-signup {
   .m-notification {

package/src/components/cfpb-layout/featured-content-module.scss

@@ -1,5 +1,5 @@
 @use 'sass:math';
-@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
 
 .o-featured-content-module {
   min-height: $fcm-min-height;

package/src/components/cfpb-layout/hero.scss

@@ -1,5 +1,5 @@
 @use 'sass:math';
-@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
 
 // Hero variables
 $hero-desktop-height: 285px;

package/src/components/cfpb-layout/layout.scss

@@ -1,5 +1,5 @@
 @use 'sass:math';
-@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
 
 /* ==========================================================================
    Design System
@@ -63,7 +63,7 @@
 
 .content__line {
   height: 1px;
-  background: $block-border;
+  background: var(--block-border);
 }
 
 //
@@ -125,7 +125,7 @@
         position: relative;
         &::after {
           content: '';
-          border-left: 1px solid $content-main-border;
+          border-left: 1px solid var(--content-main-border);
           position: absolute;
           top: math.div(($grid-gutter-width * 1.5), $base-font-size-px) + em;
           bottom: 0;
@@ -176,23 +176,23 @@
   margin-bottom: math.div($grid-gutter-width * 2, $base-font-size-px) + em;
 
   &--border-top {
-    border-top: 1px solid $block-border-top;
+    border-top: 1px solid var(--block-border-top);
   }
 
   &--border-right {
-    border-right: 1px solid $block-border-right;
+    border-right: 1px solid var(--block-border-right);
   }
 
   &--border-bottom {
-    border-bottom: 1px solid $block-border-bottom;
+    border-bottom: 1px solid var(--block-border-bottom);
   }
 
   &--border-left {
-    border-left: 1px solid $block-border-left;
+    border-left: 1px solid var(--block-border-left);
   }
 
   &--border {
-    border: 1px solid $block-border;
+    border: 1px solid var(--block-border);
   }
 
   &--flush-top {
@@ -268,7 +268,7 @@
     padding: math.div($grid-gutter-width, $base-font-size-px) + em
       math.div(math.div($grid-gutter-width, 2), $base-font-size-px) + em;
     padding-bottom: math.div($grid-gutter-width * 2, $base-font-size-px) + em;
-    background: $block-bg;
+    background: var(--block-bg);
 
     // Tablet and above.
     @include respond-to-min($bp-sm-min) {

package/src/components/cfpb-layout/well.scss

@@ -1,5 +1,5 @@
 @use 'sass:math';
-@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
 
 .o-well {
   box-sizing: border-box;

package/src/components/cfpb-notifications/banner.scss

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

package/src/components/cfpb-notifications/notification.scss

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

package/src/components/cfpb-pagination/pagination.scss

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

package/src/components/cfpb-tables/table.scss

@@ -1,6 +1,6 @@
 @use 'sass:math';
 @use './vars' as *;
-@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
 
 /* ==========================================================================
    Design System

package/src/components/cfpb-tooltips/tooltip.scss

@@ -1,5 +1,5 @@
 @use 'sass:math';
-@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
 @use 'tippy.js/dist/tippy.css';
 @use 'tippy.js/dist/border.css';
 

package/src/components/cfpb-typography/date.scss

@@ -1,5 +1,5 @@
 @use './vars.scss' as *;
-@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
 
 .a-date {
   color: $date;

package/src/components/cfpb-typography/list.scss

@@ -1,5 +1,5 @@
 @use 'sass:math';
-@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
 
 //
 // Unstyled list modifier

package/src/components/cfpb-typography/meta-header.scss

@@ -1,5 +1,5 @@
 @use 'sass:math';
-@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
 
 $meta-header-item-gap: 21px;
 

package/src/components/cfpb-typography/mixins.scss

@@ -1,5 +1,5 @@
 @use 'sass:math';
-@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
 @use '@cfpb/cfpb-design-system/src/utilities' as *;
 
 //

package/src/components/cfpb-typography/pull-quote.scss

@@ -1,5 +1,5 @@
 @use './vars' as *;
-@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
 
 .m-pull-quote {
   &__body {

package/src/components/cfpb-typography/slug-header.scss

@@ -1,6 +1,6 @@
 @use 'sass:math';
 @use './vars.scss' as *;
-@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
 
 .m-slug-header {
   border-top: 1px solid $slug-header-border-thin;

package/src/components/cfpb-typography/tagline.scss

@@ -1,5 +1,5 @@
 @use 'sass:math';
-@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
 
 .a-tagline {
   font-size: math.div(12px, $base-font-size-px) + rem;