@cfpb/cfpb-design-system 5.0.0 → 5.2.0

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

@@ -1,7 +1,7 @@
-import { html, LitElement } from 'lit';
+import { html, LitElement, css, unsafeCSS } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { ref, createRef } from 'lit/directives/ref.js';
-import styles from './cfpb-button.component.scss';
+import styles from './cfpb-button.component.scss?inline';
 import { CfpbIconText } from '../cfpb-icon-text';
 
 // The variants are different color themes of the button.
@@ -16,7 +16,9 @@ const VALID_TYPES = ['button', 'submit', 'reset'];
  * @slot - The main content for the button.
  */
 export class CfpbButton extends LitElement {
-  static styles = styles;
+  static styles = css`
+    ${unsafeCSS(styles)}
+  `;
 
   /**
    * @property {string} type - The button type: button, submit, or reset.

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

@@ -1,6 +1,7 @@
 @use 'sass:math';
 @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-icons/icons-lib' as *;
 
 :host {
   // Theme variables.
@@ -32,7 +33,7 @@
   }
 
   .checked::before {
-    --cfpb-background-icon-svg: 'approved';
+    background-image: $cfpb-background-icon-svg-approved;
     background-size: auto $cf-icon-height;
     background-repeat: no-repeat;
     background-position: center 0;
@@ -47,9 +48,7 @@
   }
 
   .checked.disabled::before {
-    // RGB values are CFPB gray (#5a5d61).
-    // For some reason SVG isn't accepting hex values for the fill.
-    --cfpb-background-icon-svg: 'approved rgb(90,93,97)';
+    background-image: $cfpb-background-icon-svg-approved-gray;
   }
 
   .cfpb-checkbox-icon:not(.disabled, .borderless).focus::before,

package/src/elements/cfpb-checkbox-icon/index.js

@@ -1,5 +1,5 @@
-import { html, LitElement } from 'lit';
-import styles from './cfpb-checkbox-icon.component.scss';
+import { LitElement, html, css, unsafeCSS } from 'lit';
+import styles from './cfpb-checkbox-icon.component.scss?inline';
 
 // The validation states are error, warning, or success.
 const VALID_VALIDATION = ['error', 'warning', 'success'];
@@ -8,7 +8,9 @@ const VALID_VALIDATION = ['error', 'warning', 'success'];
  * @element cfpb-checkbox-icon
  */
 export class CfpbCheckboxIcon extends LitElement {
-  static styles = styles;
+  static styles = css`
+    ${unsafeCSS(styles)}
+  `;
 
   #hover;
   #focus;

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

@@ -138,7 +138,7 @@
     // Padded expandable modifier
     //
 
-    // NOTE: Padded expandle is disabled pending possible deletion.
+    // NOTE: Padded expandable is disabled pending possible deletion.
 
     /*
     &--padded {

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

@@ -1,8 +1,10 @@
-import { html, LitElement } from 'lit';
+import { LitElement, html, css, unsafeCSS } from 'lit';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
-import styles from './cfpb-expandable.component.scss';
-import expandIcon from '../../components/cfpb-icons/icons/plus-round.svg?raw';
-import collapseIcon from '../../components/cfpb-icons/icons/minus-round.svg?raw';
+import styles from './cfpb-expandable.component.scss?inline';
+import {
+  plusRoundIcon as expandIcon,
+  minusRoundIcon as collapseIcon,
+} from '../../components/cfpb-icons/icons-lib.js';
 import { MaxHeightTransition } from '../../utilities/transition/max-height-transition';
 import { FlyoutMenu } from '../../utilities/behavior/flyout-menu';
 
@@ -12,7 +14,9 @@ import { FlyoutMenu } from '../../utilities/behavior/flyout-menu';
  * @slot - The main content for the button.
  */
 export class CfpbExpandable extends LitElement {
-  static styles = styles;
+  static styles = css`
+    ${unsafeCSS(styles)}
+  `;
 
   #flyoutMenu;
   #transition;

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

@@ -1,6 +1,6 @@
-import { html, LitElement } from 'lit';
+import { LitElement, html, css, unsafeCSS } from 'lit';
 import { ref, createRef } from 'lit/directives/ref.js';
-import styles from './cfpb-file-upload.component.scss';
+import styles from './cfpb-file-upload.component.scss?inline';
 import { CfpbButton } from '../cfpb-button';
 
 /**
@@ -9,7 +9,9 @@ import { CfpbButton } from '../cfpb-button';
  * @slot - The main content for the upload button.
  */
 export class CfpbFileUpload extends LitElement {
-  static styles = styles;
+  static styles = css`
+    ${unsafeCSS(styles)}
+  `;
 
   static properties = {
     isDetailHidden: {

package/src/elements/cfpb-flag-usa/index.js

@@ -1,11 +1,13 @@
-import { LitElement } from 'lit';
-import styles from './cfpb-flag-usa.component.scss';
+import { LitElement, css, unsafeCSS } from 'lit';
+import styles from './cfpb-flag-usa.component.scss?inline';
 
 /**
  * @element cfpb-flag-usa
  */
 export class CfpbFlagUsa extends LitElement {
-  static styles = styles;
+  static styles = css`
+    ${unsafeCSS(styles)}
+  `;
 
   static init() {
     globalThis.customElements.get('cfpb-flag-usa') ??

package/src/elements/cfpb-form-alert/index.js

@@ -1,16 +1,20 @@
-import { html, LitElement } from 'lit';
+import { LitElement, html, css, unsafeCSS } from 'lit';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
-import styles from './cfpb-form-alert.component.scss';
-import errorIcon from '../../components/cfpb-icons/icons/error-round.svg?raw';
-import warningIcon from '../../components/cfpb-icons/icons/warning-round.svg?raw';
-import successIcon from '../../components/cfpb-icons/icons/approved-round.svg?raw';
+import styles from './cfpb-form-alert.component.scss?inline';
+import {
+  errorRoundIcon as errorIcon,
+  warningRoundIcon as warningIcon,
+  approvedRoundIcon as successIcon,
+} from '../../components/cfpb-icons/icons-lib.js';
 
 /**
  * @element cfpb-form-search
  * @slot - The label for the form input.
  */
 export class CfpbFormAlert extends LitElement {
-  static styles = styles;
+  static styles = css`
+    ${unsafeCSS(styles)}
+  `;
 
   /**
    * @property {string} validation - Validation style: error, warning, success.

package/src/elements/cfpb-form-choice/index.js

@@ -1,7 +1,7 @@
-import { html, LitElement } from 'lit';
+import { LitElement, html, css, unsafeCSS } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { ref, createRef } from 'lit/directives/ref.js';
-import styles from './cfpb-form-choice.component.scss';
+import styles from './cfpb-form-choice.component.scss?inline';
 import { CfpbCheckboxIcon } from '../cfpb-checkbox-icon';
 
 // The validation states are error, warning, or success.
@@ -15,7 +15,9 @@ const VALID_TYPES = ['checkbox', 'radio'];
  * @slot - The label for the form input.
  */
 export class CfpbFormChoice extends LitElement {
-  static styles = styles;
+  static styles = css`
+    ${unsafeCSS(styles)}
+  `;
 
   #checkboxIcon = createRef();
 

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

@@ -1,5 +1,5 @@
-import { html, LitElement } from 'lit';
-import styles from './cfpb-form-search.component.scss';
+import { LitElement, html, css, unsafeCSS } from 'lit';
+import styles from './cfpb-form-search.component.scss?inline';
 import { ref, createRef } from 'lit/directives/ref.js';
 import { CfpbFormSearchInput } from '../cfpb-form-search-input';
 import { SearchService } from '../cfpb-utilities/search-service.js';
@@ -10,7 +10,9 @@ import { CfpbFormAlert } from '../cfpb-form-alert';
  * @element cfpb-form-search
  */
 export class CfpbFormSearch extends LitElement {
-  static styles = styles;
+  static styles = css`
+    ${unsafeCSS(styles)}
+  `;
 
   static formAssociated = true;
 

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

@@ -1,16 +1,20 @@
-import { html, LitElement } from 'lit';
+import { LitElement, html, css, unsafeCSS } from 'lit';
 import { ref, createRef } from 'lit/directives/ref.js';
-import styles from './cfpb-form-search-input.component.scss';
+import styles from './cfpb-form-search-input.component.scss?inline';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 
-import searchIcon from '../../components/cfpb-icons/icons/search.svg?raw';
-import clearIcon from '../../components/cfpb-icons/icons/error.svg?raw';
+import {
+  searchIcon,
+  errorIcon as clearIcon,
+} from '../../components/cfpb-icons/icons-lib.js';
 
 /**
  * @element cfpb-form-search-input
  */
 export class CfpbFormSearchInput extends LitElement {
-  static styles = styles;
+  static styles = css`
+    ${unsafeCSS(styles)}
+  `;
 
   /**
    * @property {boolean} disabled - Whether the input is disabled or not.

package/src/elements/cfpb-icon-text/index.js

@@ -1,12 +1,14 @@
-import { html, LitElement } from 'lit';
-import styles from './cfpb-icon-text.component.scss';
+import { LitElement, html, css, unsafeCSS } from 'lit';
+import styles from './cfpb-icon-text.component.scss?inline';
 
 /**
  * @element cfpb-icon-text
  * @slot - The main content for the text and icon.
  */
 export class CfpbIconText extends LitElement {
-  static styles = styles;
+  static styles = css`
+    ${unsafeCSS(styles)}
+  `;
 
   /**
    * @property {boolean} disabled - Apply disabled styles or not.

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

@@ -1,5 +1,5 @@
-import { html, LitElement } from 'lit';
-import styles from './cfpb-label.component.scss';
+import { LitElement, html, css, unsafeCSS } from 'lit';
+import styles from './cfpb-label.component.scss?inline';
 import { ifDefined } from 'lit/directives/if-defined.js';
 
 /**
@@ -9,7 +9,9 @@ import { ifDefined } from 'lit/directives/if-defined.js';
  * @slot helper - The content for the label helper text.
  */
 export class CfpbLabel extends LitElement {
-  static styles = styles;
+  static styles = css`
+    ${unsafeCSS(styles)}
+  `;
 
   /**
    * @property {boolean} block - Whether this has block or inline helper text.

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

@@ -1,11 +1,13 @@
-import { LitElement, html } from 'lit';
+import { LitElement, html, css, unsafeCSS } from 'lit';
 import { ref, createRef } from 'lit/directives/ref.js';
-import styles from './cfpb-list.component.scss';
+import styles from './cfpb-list.component.scss?inline';
 import { CfpbListItem } from '../cfpb-list-item';
 import { parseChildData } from '../cfpb-utilities/parse-child-data';
 
 export class CfpbList extends LitElement {
-  static styles = styles;
+  static styles = css`
+    ${unsafeCSS(styles)}
+  `;
 
   #internalSync = false;
   #container = createRef();

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

@@ -1,5 +1,6 @@
 @use 'sass:math';
 @use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/components/cfpb-icons/icons-lib' as *;
 
 :host {
   // Theme variables.
@@ -48,7 +49,7 @@
 
 :host([checked]) {
   .checkbox::before {
-    --cfpb-background-icon-svg: 'approved';
+    background-image: $cfpb-background-icon-svg-approved;
 
     background-size: auto $cf-icon-height;
     background-repeat: no-repeat;

package/src/elements/cfpb-list-item/index.js

@@ -1,5 +1,5 @@
-import { html, LitElement } from 'lit';
-import styles from './cfpb-list-item.component.scss';
+import { LitElement, html, css, unsafeCSS } from 'lit';
+import styles from './cfpb-list-item.component.scss?inline';
 import { ref, createRef } from 'lit/directives/ref.js';
 import { CfpbCheckboxIcon } from '../cfpb-checkbox-icon';
 
@@ -8,7 +8,9 @@ import { CfpbCheckboxIcon } from '../cfpb-checkbox-icon';
  * @slot - The text for the list item.
  */
 export class CfpbListItem extends LitElement {
-  static styles = styles;
+  static styles = css`
+    ${unsafeCSS(styles)}
+  `;
 
   #checkboxIcon = createRef();
   #value;

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

@@ -1,8 +1,7 @@
-import { html, LitElement } from 'lit';
+import { LitElement, html, css, unsafeCSS } from 'lit';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
-import styles from './cfpb-pagination.component.scss';
-import leftIcon from '../../components/cfpb-icons/icons/left.svg?raw';
-import rightIcon from '../../components/cfpb-icons/icons/right.svg?raw';
+import styles from './cfpb-pagination.component.scss?inline';
+import { leftIcon, rightIcon } from '../../components/cfpb-icons/icons-lib.js';
 import { I18nService, MediaQueryService } from '../cfpb-utilities/';
 
 /**
@@ -15,7 +14,9 @@ export class CfpbPagination extends LitElement {
   #isMobile;
   #i18n;
 
-  static styles = styles;
+  static styles = css`
+    ${unsafeCSS(styles)}
+  `;
 
   /**
    * @property {number} currentPage - The currently selected page.

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

@@ -1,9 +1,11 @@
-import { html, LitElement, nothing } from 'lit';
+import { html, LitElement, css, unsafeCSS, nothing } from 'lit';
 import { ref, createRef } from 'lit/directives/ref.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
-import styles from './cfpb-select.component.scss';
-import expandIcon from '../../components/cfpb-icons/icons/down.svg?raw';
-import collapseIcon from '../../components/cfpb-icons/icons/up.svg?raw';
+import styles from './cfpb-select.component.scss?inline';
+import {
+  downIcon as expandIcon,
+  upIcon as collapseIcon,
+} from '../../components/cfpb-icons/icons-lib.js';
 import { CfpbFormSearchInput } from '../cfpb-form-search-input';
 import { SearchService } from '../cfpb-utilities/search-service.js';
 import { MaxHeightTransition } from '../../utilities/transition/max-height-transition';
@@ -20,7 +22,9 @@ import { MultipleSelectEventProxy } from './multiple-select-event-proxy.js';
  * @slot - The main content for the select.
  */
 export class CfpbSelect extends LitElement {
-  static styles = styles;
+  static styles = css`
+    ${unsafeCSS(styles)}
+  `;
 
   #eventProxy;
   #flyoutMenu;

package/src/elements/cfpb-tag-filter/index.js

@@ -1,7 +1,7 @@
-import { html, LitElement } from 'lit';
+import { LitElement, html, css, unsafeCSS } from 'lit';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
-import styles from './cfpb-tag-filter.component.scss';
-import icon from '../../components/cfpb-icons/icons/error.svg?raw';
+import styles from './cfpb-tag-filter.component.scss?inline';
+import { errorIcon as icon } from '../../components/cfpb-icons/icons-lib';
 
 /**
  *
@@ -9,7 +9,9 @@ import icon from '../../components/cfpb-icons/icons/error.svg?raw';
  * @slot - The content for the filter tag.
  */
 export class CfpbTagFilter extends LitElement {
-  static styles = styles;
+  static styles = css`
+    ${unsafeCSS(styles)}
+  `;
 
   /**
    * @property {string} for - Associate the label with an ID elsewhere.

package/src/elements/cfpb-tag-group/index.js

@@ -1,5 +1,5 @@
-import { html, LitElement } from 'lit';
-import styles from './cfpb-tag-group.component.scss';
+import { LitElement, html, css, unsafeCSS } from 'lit';
+import styles from './cfpb-tag-group.component.scss?inline';
 import { parseChildData } from '../cfpb-utilities/parse-child-data';
 
 const SUPPORTED_TAG_LIST = ['CFPB-TAG-FILTER', 'CFPB-TAG-TOPIC'];
@@ -17,7 +17,9 @@ const SUPPORTED_TAG_LIST = ['CFPB-TAG-FILTER', 'CFPB-TAG-TOPIC'];
  * @fires CfpbTagGroup#event:"tag-removed" - A tag was removed to the group.
  */
 export class CfpbTagGroup extends LitElement {
-  static styles = styles;
+  static styles = css`
+    ${unsafeCSS(styles)}
+  `;
 
   /**
    * @property {string} childData - Structure data to create child components.

package/src/elements/cfpb-tag-topic/index.js

@@ -1,5 +1,5 @@
-import { html, LitElement } from 'lit';
-import styles from './cfpb-tag-topic.component.scss';
+import { LitElement, html, css, unsafeCSS } from 'lit';
+import styles from './cfpb-tag-topic.component.scss?inline';
 
 /**
  *
@@ -7,7 +7,9 @@ import styles from './cfpb-tag-topic.component.scss';
  * @slot - The content for the topic tag.
  */
 export class CfpbTagTopic extends LitElement {
-  static styles = styles;
+  static styles = css`
+    ${unsafeCSS(styles)}
+  `;
 
   /**
    * @property {string} href - href attribute, if this is a topic link.

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

@@ -25,6 +25,11 @@
         margin-top: 4px;
       }
     }
+
+    @media print {
+      // Force the background USA flag image in the tagline to be visible when printing.
+      print-color-adjust: exact;
+    }
   }
 
   .u-nowrap {

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

@@ -1,13 +1,15 @@
-import { html, LitElement } from 'lit';
+import { LitElement, html, css, unsafeCSS } from 'lit';
 import { CfpbFlagUsa } from '../cfpb-flag-usa';
-import styles from './cfpb-tagline.component.scss';
+import styles from './cfpb-tagline.component.scss?inline';
 
 /**
  * @element cfpb-icon-text
  * @slot - The main content for the tagline.
  */
 export class CfpbTagline extends LitElement {
-  static styles = styles;
+  static styles = css`
+    ${unsafeCSS(styles)}
+  `;
 
   /**
    * @property {boolean} isLarge - Whether to use the larger tagline appearance.