@cfpb/cfpb-design-system 5.3.0 → 5.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cfpb/cfpb-design-system",
-  "version": "5.3.0",
+  "version": "5.3.1",
   "description": "CFPB's UI framework",
   "exports": {
     ".": "./src/index.js",

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

@@ -1,4 +1,5 @@
 import { html, LitElement, css, unsafeCSS } from 'lit';
+import { defineComponent } from '../cfpb-utilities/shared-config';
 import { classMap } from 'lit/directives/class-map.js';
 import { ref, createRef } from 'lit/directives/ref.js';
 import styles from './styles.component.scss?inline';
@@ -175,8 +176,6 @@ export class CfpbButton extends LitElement {
 
   static init() {
     CfpbIconText.init();
-
-    window.customElements.get('cfpb-button') ||
-      window.customElements.define('cfpb-button', CfpbButton);
+    defineComponent('cfpb-button', CfpbButton);
   }
 }

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

@@ -1,4 +1,5 @@
 import { LitElement, html, css, unsafeCSS } from 'lit';
+import { defineComponent } from '../cfpb-utilities/shared-config';
 import styles from './styles.component.scss?inline';
 
 // The validation states are error, warning, or success.
@@ -98,7 +99,6 @@ export class CfpbCheckboxIcon extends LitElement {
   }
 
   static init() {
-    window.customElements.get('cfpb-checkbox-icon') ||
-      window.customElements.define('cfpb-checkbox-icon', CfpbCheckboxIcon);
+    defineComponent('cfpb-checkbox-icon', CfpbCheckboxIcon);
   }
 }

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

@@ -1,4 +1,5 @@
 import { LitElement, html, css, unsafeCSS } from 'lit';
+import { defineComponent } from '../cfpb-utilities/shared-config';
 import styles from './styles.component.scss?inline';
 import { CfpbIcon } from '../cfpb-icon';
 import { MaxHeightTransition } from '../../utilities/transition/max-height-transition';
@@ -6,8 +7,9 @@ import { FlyoutMenu } from '../../utilities/behavior/flyout-menu';
 
 /**
  *
- * @element cfpb-button
- * @slot - The main content for the button.
+ * @element cfpb-expandable
+ * @slot header - The header content for the expandable.
+ * @slot content - The content within the expandable.
  */
 export class CfpbExpandable extends LitElement {
   static styles = css`
@@ -120,8 +122,6 @@ export class CfpbExpandable extends LitElement {
 
   static init() {
     CfpbIcon.init();
-
-    window.customElements.get('cfpb-expandable') ||
-      window.customElements.define('cfpb-expandable', CfpbExpandable);
+    defineComponent('cfpb-expandable', CfpbExpandable);
   }
 }

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

@@ -1,4 +1,5 @@
 import { LitElement, html, css, unsafeCSS } from 'lit';
+import { defineComponent } from '../cfpb-utilities/shared-config';
 import { ref, createRef } from 'lit/directives/ref.js';
 import styles from './styles.component.css?inline';
 import { CfpbButton } from '../cfpb-button';
@@ -101,11 +102,7 @@ export class CfpbFileUpload extends LitElement {
   }
 
   static init() {
-    // Initialize internal button.
     CfpbButton.init();
-
-    // Initialize parent file upload.
-    window.customElements.get('cfpb-file-upload') ||
-      window.customElements.define('cfpb-file-upload', CfpbFileUpload);
+    defineComponent('cfpb-file-upload', CfpbFileUpload);
   }
 }

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

@@ -1,4 +1,5 @@
 import { LitElement, css, unsafeCSS } from 'lit';
+import { defineComponent } from '../cfpb-utilities/shared-config';
 import styles from './styles.component.css?inline';
 
 /**
@@ -10,7 +11,6 @@ export class CfpbFlagUsa extends LitElement {
   `;
 
   static init() {
-    globalThis.customElements.get('cfpb-flag-usa') ??
-      globalThis.customElements.define('cfpb-flag-usa', CfpbFlagUsa);
+    defineComponent('cfpb-flag-usa', CfpbFlagUsa);
   }
 }

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

@@ -1,10 +1,11 @@
 import { LitElement, html, css, unsafeCSS } from 'lit';
+import { defineComponent } from '../cfpb-utilities/shared-config';
 import styles from './styles.component.scss?inline';
 import { CfpbIcon } from '../cfpb-icon';
 
 /**
- * @element cfpb-form-search
- * @slot - The label for the form input.
+ * @element cfpb-form-alert
+ * @slot - The text for the form alert.
  */
 export class CfpbFormAlert extends LitElement {
   static styles = css`
@@ -60,8 +61,6 @@ export class CfpbFormAlert extends LitElement {
 
   static init() {
     CfpbIcon.init();
-
-    window.customElements.get('cfpb-form-alert') ||
-      window.customElements.define('cfpb-form-alert', CfpbFormAlert);
+    defineComponent('cfpb-form-alert', CfpbFormAlert);
   }
 }

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

@@ -1,4 +1,5 @@
 import { LitElement, html, css, unsafeCSS } from 'lit';
+import { defineComponent } from '../cfpb-utilities/shared-config';
 import { classMap } from 'lit/directives/class-map.js';
 import { ref, createRef } from 'lit/directives/ref.js';
 import styles from './styles.component.scss?inline';
@@ -169,8 +170,6 @@ export class CfpbFormChoice extends LitElement {
 
   static init() {
     CfpbCheckboxIcon.init();
-
-    window.customElements.get('cfpb-form-choice') ||
-      window.customElements.define('cfpb-form-choice', CfpbFormChoice);
+    defineComponent('cfpb-form-choice', CfpbFormChoice);
   }
 }

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

@@ -1,4 +1,5 @@
 import { LitElement, html, css, unsafeCSS } from 'lit';
+import { defineComponent } from '../cfpb-utilities/shared-config';
 import styles from './styles.component.scss?inline';
 import { ref, createRef } from 'lit/directives/ref.js';
 import { CfpbFormSearchInput } from '../cfpb-form-search-input';
@@ -8,6 +9,7 @@ import { CfpbFormAlert } from '../cfpb-form-alert';
 
 /**
  * @element cfpb-form-search
+ * @slot - Slot for list of autocomplete items.
  */
 export class CfpbFormSearch extends LitElement {
   static styles = css`
@@ -190,8 +192,6 @@ export class CfpbFormSearch extends LitElement {
     CfpbFormSearchInput.init();
     CfpbListbox.init();
     CfpbFormAlert.init();
-
-    window.customElements.get('cfpb-form-search') ||
-      window.customElements.define('cfpb-form-search', CfpbFormSearch);
+    defineComponent('cfpb-form-search', CfpbFormSearch);
   }
 }

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

@@ -1,4 +1,5 @@
 import { LitElement, html, css, unsafeCSS } from 'lit';
+import { defineComponent } from '../cfpb-utilities/shared-config';
 import { ref, createRef } from 'lit/directives/ref.js';
 import styles from './styles.component.scss?inline';
 import { CfpbIcon } from '../cfpb-icon';
@@ -141,11 +142,6 @@ export class CfpbFormSearchInput extends LitElement {
 
   static init() {
     CfpbIcon.init();
-
-    window.customElements.get('cfpb-form-search-input') ||
-      window.customElements.define(
-        'cfpb-form-search-input',
-        CfpbFormSearchInput,
-      );
+    defineComponent('cfpb-form-search-input', CfpbFormSearchInput);
   }
 }

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

@@ -1,6 +1,9 @@
 import { html, LitElement, css, unsafeCSS } from 'lit';
+import {
+  defineComponent,
+  getSharedConfig,
+} from '../cfpb-utilities/shared-config';
 import styles from './styles.component.css?inline';
-import { getSharedConfig } from '../cfpb-utilities/shared-config';
 
 /**
  * @element cfpb-icon
@@ -37,7 +40,6 @@ export class CfpbIcon extends LitElement {
   }
 
   static init() {
-    globalThis.customElements.get('cfpb-icon') ??
-      globalThis.customElements.define('cfpb-icon', CfpbIcon);
+    defineComponent('cfpb-icon', CfpbIcon);
   }
 }

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

@@ -1,4 +1,5 @@
 import { LitElement, html, css, unsafeCSS } from 'lit';
+import { defineComponent } from '../cfpb-utilities/shared-config';
 import styles from './styles.component.scss?inline';
 
 /**
@@ -72,7 +73,6 @@ export class CfpbIconText extends LitElement {
   }
 
   static init() {
-    window.customElements.get('cfpb-icon-text') ||
-      window.customElements.define('cfpb-icon-text', CfpbIconText);
+    defineComponent('cfpb-icon-text', CfpbIconText);
   }
 }

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

@@ -1,4 +1,5 @@
 import { LitElement, html, css, unsafeCSS } from 'lit';
+import { defineComponent } from '../cfpb-utilities/shared-config';
 import styles from './styles.component.scss?inline';
 import { ifDefined } from 'lit/directives/if-defined.js';
 
@@ -53,7 +54,6 @@ export class CfpbLabel extends LitElement {
   }
 
   static init() {
-    window.customElements.get('cfpb-label') ||
-      window.customElements.define('cfpb-label', CfpbLabel);
+    defineComponent('cfpb-label', CfpbLabel);
   }
 }

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

@@ -1,9 +1,14 @@
 import { LitElement, html, css, unsafeCSS } from 'lit';
+import { defineComponent } from '../cfpb-utilities/shared-config';
 import { ref, createRef } from 'lit/directives/ref.js';
 import styles from './styles.component.scss?inline';
 import { CfpbListboxItem } from '../cfpb-listbox-item';
 import { parseChildData } from '../cfpb-utilities/parse-child-data';
 
+/**
+ * @element cfpb-listbox.
+ * @slot - Slot for the list of items in the list box.
+ */
 export class CfpbListbox extends LitElement {
   static styles = css`
     ${unsafeCSS(styles)}
@@ -373,9 +378,6 @@ export class CfpbListbox extends LitElement {
 
   static init() {
     CfpbListboxItem.init();
-
-    if (!window.customElements.get('cfpb-listbox')) {
-      window.customElements.define('cfpb-listbox', CfpbListbox);
-    }
+    defineComponent('cfpb-listbox', CfpbListbox);
   }
 }

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

@@ -1,4 +1,5 @@
 import { LitElement, html, css, unsafeCSS } from 'lit';
+import { defineComponent } from '../cfpb-utilities/shared-config';
 import styles from './styles.component.scss?inline';
 import { ref, createRef } from 'lit/directives/ref.js';
 import { CfpbCheckboxIcon } from '../cfpb-checkbox-icon';
@@ -207,9 +208,6 @@ export class CfpbListboxItem extends LitElement {
 
   static init() {
     CfpbCheckboxIcon.init();
-
-    if (!window.customElements.get('cfpb-listbox-item')) {
-      window.customElements.define('cfpb-listbox-item', CfpbListboxItem);
-    }
+    defineComponent('cfpb-listbox-item', CfpbListboxItem);
   }
 }

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

@@ -1,12 +1,13 @@
 import { LitElement, html, css, unsafeCSS } from 'lit';
+import { defineComponent } from '../cfpb-utilities/shared-config';
 import styles from './styles.component.scss?inline';
 import { CfpbIcon } from '../cfpb-icon';
 import { I18nService, MediaQueryService } from '../cfpb-utilities/';
 
 /**
  *
- * @element cfpb-button
- * @slot - The main content for the button.
+ * @element cfpb-pagination
+ * @slot - Slot for passing in i18n (internationalization) service strings via a <template>.
  */
 export class CfpbPagination extends LitElement {
   #mediaService;
@@ -202,8 +203,6 @@ export class CfpbPagination extends LitElement {
   static init() {
     CfpbIcon.init();
     I18nService.init();
-
-    window.customElements.get('cfpb-pagination') ||
-      window.customElements.define('cfpb-pagination', CfpbPagination);
+    defineComponent('cfpb-pagination', CfpbPagination);
   }
 }

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

@@ -1,6 +1,7 @@
 import { html, LitElement, css, unsafeCSS, nothing } from 'lit';
-import { ref, createRef } from 'lit/directives/ref.js';
+import { defineComponent } from '../cfpb-utilities/shared-config';
 import styles from './styles.component.scss?inline';
+import { ref, createRef } from 'lit/directives/ref.js';
 import { CfpbIcon } from '../cfpb-icon';
 import { CfpbFormSearchInput } from '../cfpb-form-search-input';
 import { SearchService } from '../cfpb-utilities/search-service.js';
@@ -373,8 +374,6 @@ export class CfpbSelect extends LitElement {
     CfpbFormSearchInput.init();
     CfpbListbox.init();
     CfpbTagGroup.init();
-
-    window.customElements.get('cfpb-select') ||
-      window.customElements.define('cfpb-select', CfpbSelect);
+    defineComponent('cfpb-select', CfpbSelect);
   }
 }

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

@@ -1,4 +1,5 @@
 import { LitElement, html, css, unsafeCSS } from 'lit';
+import { defineComponent } from '../cfpb-utilities/shared-config';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import styles from './styles.component.scss?inline';
 import { errorIcon as icon } from '../../components/cfpb-icons/icons-lib';
@@ -64,8 +65,6 @@ export class CfpbTagFilter extends LitElement {
   }
 
   static init() {
-    // Initialize parent file upload.
-    window.customElements.get('cfpb-tag-filter') ||
-      window.customElements.define('cfpb-tag-filter', CfpbTagFilter);
+    defineComponent('cfpb-tag-filter', CfpbTagFilter);
   }
 }

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

@@ -1,4 +1,5 @@
 import { LitElement, html, css, unsafeCSS } from 'lit';
+import { defineComponent } from '../cfpb-utilities/shared-config';
 import styles from './styles.component.scss?inline';
 import { parseChildData } from '../cfpb-utilities/parse-child-data';
 
@@ -364,7 +365,6 @@ export class CfpbTagGroup extends LitElement {
   }
 
   static init() {
-    window.customElements.get('cfpb-tag-group') ||
-      window.customElements.define('cfpb-tag-group', CfpbTagGroup);
+    defineComponent('cfpb-tag-group', CfpbTagGroup);
   }
 }

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

@@ -1,4 +1,5 @@
 import { LitElement, html, css, unsafeCSS } from 'lit';
+import { defineComponent } from '../cfpb-utilities/shared-config';
 import styles from './styles.component.scss?inline';
 
 /**
@@ -67,8 +68,6 @@ export class CfpbTagTopic extends LitElement {
   }
 
   static init() {
-    // Initialize parent file upload.
-    window.customElements.get('cfpb-tag-topic') ||
-      window.customElements.define('cfpb-tag-topic', CfpbTagTopic);
+    defineComponent('cfpb-tag-topic', CfpbTagTopic);
   }
 }

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

@@ -1,9 +1,10 @@
 import { LitElement, html, css, unsafeCSS } from 'lit';
+import { defineComponent } from '../cfpb-utilities/shared-config';
 import { CfpbFlagUsa } from '../cfpb-flag-usa';
 import styles from './styles.component.scss?inline';
 
 /**
- * @element cfpb-icon-text
+ * @element cfpb-tagline
  * @slot - The main content for the tagline.
  */
 export class CfpbTagline extends LitElement {
@@ -46,8 +47,6 @@ export class CfpbTagline extends LitElement {
 
   static init() {
     CfpbFlagUsa.init();
-
-    globalThis.customElements.get('cfpb-tagline') ??
-      globalThis.customElements.define('cfpb-tagline', CfpbTagline);
+    defineComponent('cfpb-tagline', CfpbTagline);
   }
 }

package/src/elements/cfpb-utilities/shared-config.js

@@ -39,3 +39,14 @@ export function setSharedConfig(userConfig) {
 export function getSharedConfig() {
   return config;
 }
+
+/**
+ * Check if a custom element is registered, and if not, define it on the globalThis (window).
+ * @param {string} tag - A custom element's tag as it appears in markup.
+ * @param {HTMLElement} constructor - A custom element constructor.
+ */
+export function defineComponent(tag, constructor) {
+  if (!globalThis.customElements.get(tag)) {
+    globalThis.customElements.define(tag, constructor);
+  }
+}