@madgex/design-system 7.0.4 → 8.0.0

package/src/components/accordion/accordion.js

@@ -1,241 +1,74 @@
-const accordionTriggerClass = 'mds-accordion-trigger';
-const accordionTriggerButtonClass = 'mds-accordion-trigger__button';
-const accordionTriggerLabelClass = 'mds-accordion-trigger__label';
-const accordionTriggerExpandedClass = 'mds-accordion-trigger--expanded';
-const accordionContentExpandedClass = 'mds-accordion-content--expanded';
-const accordionLabelInverseData = 'data-labelinverse';
-const accordionNonClosingClass = 'mds-accordion-trigger--non-closing';
-const accordionContentFirstClass = 'mds-accordion-trigger--content-first';
-
-const accordion = {
-  init: () => {
-    const accordionTriggerList = Array.from(document.querySelectorAll(`.${accordionTriggerClass}`));
-    const screenWidth = window.innerWidth;
-
-    accordionTriggerList.forEach((trigger) => {
-      const accordionContent = trigger.nextElementSibling;
-      const isAccordion = accordion.checkBreakpoint(trigger, screenWidth);
-
-      if (isAccordion) {
-        accordion.setAccordion(trigger, accordionContent);
-      } else {
-        trigger.classList.add(accordionTriggerExpandedClass);
-        accordionContent.classList.add(accordionContentExpandedClass);
-      }
-    });
-  },
-
-  checkBreakpoint: (element, screenWidth) => {
-    let breakpoint = 0;
-
-    if (element.dataset.bp) {
-      const breakpointValue = element.dataset.bp.replace(/\D/g, '');
-      const breakpointUnit = element.dataset.bp.replace(/[0-9]/g, '');
-      let fontSize;
-      let conversionValue;
-
-      switch (breakpointUnit) {
-        case 'px':
-          breakpoint = breakpointValue;
-          break;
-
-        case 'em':
-          fontSize = window.getComputedStyle(document.querySelector('body'))['font-size'];
-          conversionValue = breakpointValue * parseFloat(fontSize);
-          breakpoint = conversionValue;
-          break;
-
-        case 'rem':
-          fontSize = window.getComputedStyle(document.querySelector('body'))['font-size'];
-          conversionValue = breakpointValue * parseFloat(fontSize);
-          breakpoint = conversionValue;
-          break;
-
-        default:
-          return true;
-      }
-
-      if (screenWidth > breakpoint) {
-        return false;
-      }
-
-      return true;
-    }
-
-    return true;
-  },
-
-  setAccordion: (accordionTrigger, accordionContent) => {
-    const triggerContainer = accordionTrigger;
-
-    const triggerButton = accordion.createButton(triggerContainer);
-    const triggerButtonLabel = triggerButton.querySelector(`.${accordionTriggerLabelClass}`);
-
-    const labelText = triggerButtonLabel.innerText;
-    const ariaLabel = triggerButton.getAttribute('aria-label');
-    const isNonClosing = accordionTrigger.classList.contains(accordionNonClosingClass);
-
-    // If accordion is non closing content first is redundant
-    const isContentFirst = accordionTrigger.classList.contains(accordionContentFirstClass) && !isNonClosing;
-
-    triggerContainer.classList.remove('mds-display-none');
-    if (accordionContent.nodeName.toLowerCase() !== 'fieldset') {
-      if (ariaLabel) {
-        accordionContent.setAttribute('aria-label', ariaLabel);
-      } else {
-        accordionContent.setAttribute('aria-label', labelText);
-      }
-    }
-
-    triggerContainer.innerHTML = '';
-    triggerContainer.appendChild(triggerButton);
-
-    const accordionProperties = {
-      triggerContainer,
-      accordionContent,
-      isNonClosing,
-      isContentFirst,
-    };
-
-    const toggleEvent = (e) => {
-      e.preventDefault();
-      accordion.toggleExpand(accordionProperties, toggleEvent, e);
-    };
-
-    triggerButton.addEventListener('click', toggleEvent);
-
-    if (triggerContainer.dataset.expanded) {
-      accordion.toggleExpand(accordionProperties, toggleEvent);
-    }
-  },
-
-  createButton: (triggerContainer) => {
-    const accordionTriggerSpan = triggerContainer.querySelector(`.${accordionTriggerClass} > span`);
-    const accordionTriggerButton = document.createElement('button');
-
-    accordionTriggerButton.className = accordionTriggerButtonClass;
-    // can't use multiple arguments in classList.add() due to IE
-    accordionTriggerButton.classList.add('mds-button');
-    accordionTriggerButton.classList.add('mds-button--plain');
-    accordionTriggerButton.classList.add('mds-padding-x-b0');
-    accordionTriggerButton.setAttribute('aria-expanded', false);
-    accordionTriggerButton.setAttribute('type', 'button');
-
-    if (triggerContainer.dataset.arialabel) {
-      accordionTriggerButton.setAttribute('aria-label', triggerContainer.dataset.arialabel);
-    }
-
-    if (accordionTriggerSpan) {
-      accordionTriggerButton.appendChild(accordionTriggerSpan);
-    }
-
-    return accordionTriggerButton;
-  },
-
-  cloneUnderButton: (triggerButton, triggerContainer, accordionContent, toggleEvent) => {
-    const underButton = triggerButton.cloneNode(true);
-    const triggerButtonLabel = underButton.querySelector(`.${accordionTriggerLabelClass}`);
-
-    if (triggerContainer.dataset.arialabeactive) {
-      underButton.setAttribute('aria-label', triggerContainer.dataset.arialabeactive);
-    }
-
-    underButton.setAttribute('aria-expanded', true);
-    underButton.addEventListener('click', toggleEvent);
-    accordion.switchAriaLabel(underButton, triggerContainer);
-    accordion.switchLabel(triggerButtonLabel);
-    accordionContent.after(underButton);
-  },
-
-  switchLabel: (triggerButtonLabel) => {
-    if (triggerButtonLabel.dataset.labelinverse) {
-      const labelToInverse = triggerButtonLabel.textContent;
-
-      // eslint-disable-next-line no-param-reassign
-      triggerButtonLabel.textContent = triggerButtonLabel.dataset.labelinverse;
-      triggerButtonLabel.setAttribute(accordionLabelInverseData, labelToInverse);
-    }
-  },
-
-  switchAriaLabel: (triggerButton, triggerContainer) => {
-    if (triggerContainer.dataset.arialabelactive) {
-      const currentAriaLabel = triggerButton.getAttribute('aria-label');
-
-      if (currentAriaLabel === triggerContainer.dataset.arialabel) {
-        triggerButton.setAttribute('aria-label', triggerContainer.dataset.arialabelactive);
-      } else {
-        triggerButton.setAttribute('aria-label', triggerContainer.dataset.arialabel);
-      }
-    }
-  },
-
-  toggleExpand: ({ triggerContainer, accordionContent, isNonClosing, isContentFirst }, toggleEvent, event) => {
-    let triggerButton;
-
-    if (event) {
-      triggerButton = event.target.closest(`.${accordionTriggerButtonClass}`);
-    } else {
-      triggerButton = triggerContainer.querySelector(`.${accordionTriggerButtonClass}`);
-    }
-
-    const triggerButtonLabel = triggerButton.querySelector(`.${accordionTriggerLabelClass}`);
-
-    // If closed
-    if (triggerButton.getAttribute('aria-expanded') === 'false') {
-      triggerButton.setAttribute('aria-expanded', true);
-      triggerContainer.classList.add(accordionTriggerExpandedClass);
-      accordionContent.classList.add(accordionContentExpandedClass);
-
-      if (isContentFirst) {
-        // triggerButton.focus();
-        accordion.cloneUnderButton(triggerButton, triggerContainer, accordionContent, toggleEvent);
-      }
-
-      if (isNonClosing || isContentFirst) {
-        accordion.hideButton(triggerButton, toggleEvent);
-      } else {
-        accordion.switchLabel(triggerButtonLabel);
-        accordion.switchAriaLabel(triggerButton, triggerContainer);
-      }
-
-      // If open
-    } else if (!isNonClosing) {
-      triggerButton.setAttribute('aria-expanded', false);
-      triggerContainer.classList.remove(accordionTriggerExpandedClass);
-      accordionContent.classList.remove(accordionContentExpandedClass);
-
-      accordion.switchLabel(triggerButtonLabel);
-      accordion.switchAriaLabel(triggerButton, triggerContainer);
-
-      if (isContentFirst) {
-        // Find original button
-        const overButton = accordionContent.previousElementSibling.querySelector(`.${accordionTriggerButtonClass}`);
-
-        // Set up under button with correct properties
-        triggerButton.setAttribute('aria-expanded', false);
-        triggerButton.removeAttribute('aria-disabled');
-        triggerButton.setAttribute('tabIndex', '0');
-
-        // Replace original button
-        overButton.replaceWith(triggerButton);
-        triggerContainer.classList.remove('mds-visually-hidden');
-        triggerButton.focus();
-      }
-    }
-  },
-
-  hideButton: (button, toggleEvent) => {
-    /* Hiding parent element instead of trigger itself
-     * to avoid NVDA issue where it doesn't announce aria-expanded
-     */
-    button.setAttribute('aria-disabled', true);
-    button.parentElement.classList.add('mds-visually-hidden');
-    /* the disabled trigger shouldn't be reachable to keyboard navigaton (as it's hidden from view)
-     * so adding tabindex='-1' to take it off the navigation flow
-     */
-    button.setAttribute('tabIndex', '-1');
-    button.removeEventListener('click', toggleEvent);
-  },
-};
-
-export default accordion;
+/* eslint-disable no-param-reassign */
+const accordionBreakpointClass = 'mds-accordion--breakpoint';
+const accordionLabelClass = 'mds-accordion__label';
+
+const accordion = {
+  init: () => {
+    // Breakpoint accordions
+    const breakpointAccordions = document.querySelectorAll(`.${accordionBreakpointClass}`);
+    const screenWidth = window.innerWidth;
+
+    breakpointAccordions.forEach((accordionElm) => {
+      const isAccordion = accordion.checkBreakpoint(accordionElm, screenWidth);
+
+      if (!isAccordion) {
+        accordionElm.open = true;
+        accordionElm.querySelector('summary').style.display = 'none';
+      }
+    });
+
+    const accordionLabels = document.querySelectorAll(`.${accordionLabelClass}`);
+
+    accordionLabels.forEach((accordionLabel) => {
+      accordionLabel.addEventListener('click', ({ target }) => {
+        const details = target.closest('details');
+        const label = details.querySelector('summary');
+
+        details.open = false;
+        label.focus();
+      });
+    });
+  },
+
+  checkBreakpoint: (element, screenWidth) => {
+    let breakpoint = 0;
+
+    if (element.dataset.bp) {
+      const breakpointValue = element.dataset.bp.replace(/\D/g, '');
+      const breakpointUnit = element.dataset.bp.replace(/[0-9]/g, '');
+      let fontSize;
+      let conversionValue;
+
+      switch (breakpointUnit) {
+        case 'px':
+          breakpoint = breakpointValue;
+          break;
+
+        case 'em':
+          fontSize = window.getComputedStyle(document.querySelector('body'))['font-size'];
+          conversionValue = breakpointValue * parseFloat(fontSize);
+          breakpoint = conversionValue;
+          break;
+
+        case 'rem':
+          fontSize = window.getComputedStyle(document.querySelector('body'))['font-size'];
+          conversionValue = breakpointValue * parseFloat(fontSize);
+          breakpoint = conversionValue;
+          break;
+
+        default:
+          return true;
+      }
+
+      if (screenWidth > breakpoint) {
+        return false;
+      }
+
+      return true;
+    }
+
+    return true;
+  },
+};
+
+export default accordion;

package/src/components/accordion/accordion.njk

@@ -1,23 +1,20 @@
 {% from "./accordion/_macro.njk" import MdsAccordion %}
 
 <h3>{{ name }}</h3>
-{{ MdsAccordion({
-  id: id,
-  triggerLabel: triggerLabel,
-  triggerLabelActive: triggerLabelActive,
-  triggerNoJsHidden: triggerNoJsHidden,
-  triggerHtmlTag: triggerHtmlTag,
-  triggerClasses: triggerClasses,
-  triggerIsNonClosing: triggerIsNonClosing,
-  hideTriggerLabel: hideTriggerLabel,
-  breakpoint: breakpoint,
-  content: content,
-  leftAligned: leftAligned,
-  expandIcon: expandIcon,
-  collapseIcon: collapseIcon,
-  isExpanded: isExpanded,
-  noIcon: noIcon,
-  contentFirst: contentFirst,
-  ariaLabel: ariaLabel,
-  ariaLabelActive: ariaLabelActive
-}) }}
+<p>
+  {% call MdsAccordion({
+    label: label,
+    labelOpen: labelOpen,
+    labelClasses: labelClasses,
+    icon: icon,
+    iconOpen: iconOpen,
+    noIcon: noIcon,
+    startsOpen: startsOpen,
+    nonClosing: nonClosing,
+    breakpoint: breakpoint,
+    leftAligned: leftAligned,
+    contentFirst: contentFirst
+  }) -%}
+    {{ content | safe }}
+  {%- endcall %}
+</p>

package/src/components/accordion/accordion.scss

@@ -1,32 +1,70 @@
-.js .mds-accordion-content {
-  display: none;
-}
-
-.js .mds-accordion-content--expanded {
-  display: block;
-}
-
-.mds-accordion-trigger {
-  & .mds-icon.mds-accordion-trigger__icon {
-    &-expand {
-      display: inline-block;
-    }
-    &-collapse {
-      display: none;
-    }
-  }
-  &--expanded {
-    & .mds-icon.mds-accordion-trigger__icon {
-      &-expand {
-        display: none;
-      }
-      &-collapse {
-        display: inline-block;
-      }
-    }
-  }
-}
-
-html:not(.js) .mds-accordion .mds-accordion-trigger .mds-icon {
-  display: none;
-}
+.mds-accordion > summary {
+  display: flex;
+  text-align: left;
+  list-style: none;
+  cursor: pointer;
+
+  // https://stackoverflow.com/a/66814239
+  &::marker,
+  &::-webkit-details-marker {
+    display: none;
+  }
+
+  > * {
+    display: inline;
+  }
+}
+
+// Open/closed labels and icons
+.mds-accordion {
+  .mds-accordion__icon--open,
+  .mds-accordion__label--open {
+    display: none;
+  }
+
+  &[open] {
+    .mds-accordion__icon,
+    .mds-accordion__label {
+      display: none;
+    }
+    .mds-accordion__icon--open,
+    .mds-accordion__label--open {
+      display: inline;
+    }
+  }
+}
+
+// Non-closing accordion
+.mds-accordion.mds-accordion--non-closing[open] > summary {
+  display: none;
+}
+
+// label below content
+.mds-accordion.mds-accordion--content-first {
+  > .mds-accordion__label {
+    display: none;
+  }
+
+  &[open] {
+    > summary {
+      display: none;
+    }
+
+    .js & > .mds-accordion__label {
+      display: initial;
+    }
+  }
+}
+
+// Icon alignment
+.mds-accordion {
+  .mds-icon {
+    margin: 0 0 0 0.5em;
+    order: 1;
+  }
+
+  &.mds-accordion--left-aligned .mds-icon {
+    margin: 0 0.5em 0 0;
+    order: 0;
+  }
+}

package/src/components/inputs/_form-elements.scss

@@ -142,15 +142,6 @@
   display: flex;
   align-items: center;
   flex-wrap: wrap;
-
-  & .mds-accordion-trigger__button {
-    border: none; // helps with vertical alignment
-    padding: 0; // default padding on button creates too much space with next item (UJD-2017)
-  }
-
-  & .mds-accordion-content {
-    width: 100%;
-  }
 }
 
 .mds-form-check__label {
@@ -228,3 +219,21 @@
 .js .mds-form-element__fallback {
   display: none;
 }
+
+// Filedset Accordion
+.mds-form-check-container--border .mds-form-check .mds-checkbox-accordion__content {
+  width: 100%;
+}
+
+html:not(.js) .mds-checkbox-accordion__button,
+.mds-checkbox-accordion__icon,
+.mds-checkbox-accordion__icon--open,
+.mds-checkbox-accordion__button[aria-expanded='false'] + .mds-checkbox-accordion__content {
+  display: none;
+}
+
+.mds-checkbox-accordion__button[aria-expanded='false'] .mds-checkbox-accordion__icon,
+.mds-checkbox-accordion__button[aria-expanded='true'] .mds-checkbox-accordion__icon--open {
+  display: inline;
+  margin: 0 0 0 0.5em;
+}

package/src/components/inputs/checkbox-list/_template.njk

@@ -1,6 +1,5 @@
 {% from "../label/_macro.njk" import MdsInputLabel %}
 {% from "../_message/_macro.njk" import MdsInputMessages %}
-{% from "../../accordion/_macro.njk" import MdsAccordion %}
 {% from "../../icons/_macro.njk" import MdsIcon %}
 {% from "../_checkbox-elem/_macro.njk" import MdsCheckboxElem %}
 
@@ -64,29 +63,27 @@
           optional: true
         }) }}
         {% if option.options and option.options.length %}
-          {%- set triggerLabel %}{{ checkboxParams.i18n.accordionTrigger | default('Select options under {label}') | replace('{label}', option.labelText) | safe }}{% endset -%}
-          {%- set accordionContent %}
-          <div class="mds-form-check__nested-container">
-            {{ createCheckboxes({
-              options: option.options,
-              selectedOptions: checkboxParams.selectedOptions,
-              name: checkboxParams.name,
-              disabled: checkboxParams.disabled
-            }) }}
-          </div>
-          {% endset -%}
-          {{ MdsAccordion({
-              id: optionId,
-              triggerHtmlTag: 'div',
-              triggerLabel: triggerLabel,
-              triggerNoJsHidden: true,
-              hideTriggerLabel: true,
-              content: accordionContent,
-              expandIcon: 'chevron-right',
-              collapseIcon: 'chevron-down',
-              useFieldset: true,
-              isExpanded: accordionIsExpanded
-            }) }}
+          {%- set hiddenLabel %}{{ checkboxParams.i18n.accordionTrigger | default('Select options under {label}') | replace('{label}', option.labelText) | safe }}{% endset -%}
+          <button
+            class="mds-checkbox-accordion__button mds-button mds-button--plain mds-padding-b0
+            {%- if accordionIsExpanded %} mds-checkbox-accordion__button--open{% endif %}"
+            type="button"
+          >
+            <span class="mds-checkbox-accordion__label mds-visually-hidden">{{ hiddenLabel | safe }}</span>
+            {{- MdsIcon({ iconName: params.icon | default('chevron-right'), classes: "mds-checkbox-accordion__icon" }) -}}
+            {{- MdsIcon({ iconName: params.iconOpen | default('chevron-down'), classes: "mds-checkbox-accordion__icon--open" }) -}}
+          </button>
+          <fieldset class="mds-checkbox-accordion__content">
+            <legend class="mds-visually-hidden">{{ hiddenLabel | safe }}</legend>
+            <div class="mds-form-check__nested-container">
+              {{ createCheckboxes({
+                options: option.options,
+                selectedOptions: checkboxParams.selectedOptions,
+                name: checkboxParams.name,
+                disabled: checkboxParams.disabled
+              }) }}
+            </div>
+          </fieldset>
         {% endif %}
       </div>
     {% endfor %}

package/src/components/inputs/checkbox-list/checkbox-list.js

@@ -0,0 +1,28 @@
+const fieldsetAccordionClass = 'mds-checkbox-accordion__button';
+const fieldsetAccordionExpandedClass = 'mds-checkbox-accordion__button--open';
+
+const checkboxList = {
+  init: () => {
+    const fieldsetAccorions = document.querySelectorAll(`.${fieldsetAccordionClass}`);
+
+    fieldsetAccorions.forEach((label) => {
+      // Set initial expanded state
+      if (label.classList.contains(fieldsetAccordionExpandedClass)) {
+        label.setAttribute('aria-expanded', 'true');
+      } else {
+        label.setAttribute('aria-expanded', 'false');
+      }
+
+      // Toggle expanded
+      label.addEventListener('click', () => {
+        if (label.getAttribute('aria-expanded') === 'true') {
+          label.setAttribute('aria-expanded', 'false');
+        } else {
+          label.setAttribute('aria-expanded', 'true');
+        }
+      });
+    });
+  },
+};
+
+export default checkboxList;

package/src/components/inputs/file-upload/file-upload.js

@@ -16,6 +16,13 @@ const fileUpload = {
         const input = uploader.querySelector('input[type=file]');
         const removeButton = uploader.querySelector(removeButtonClass);
 
+        document.addEventListener('readystatechange', () => {
+          if (input.files && input.files.length) {
+            fileNameContainer.textContent = input.files[0].name;
+            uploader.classList.add(selectedFileClass);
+          }
+        });
+
         input.addEventListener('change', () => {
           if (input.files && input.files.length) {
             fileNameContainer.textContent = input.files[0].name;

package/src/icons/triangle-down.svg

@@ -0,0 +1,3 @@
+<svg width="32px" height="32px" viewBox="0 -3 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M30.904 4.33335C30.6691 3.92641 30.3308 3.58877 29.9234 3.35463C29.516 3.12049 29.0539 2.99816 28.584 3.00002H2.63736C2.17176 3.00514 1.71561 3.13208 1.3143 3.36822C0.912993 3.60436 0.580508 3.94146 0.349927 4.34599C0.119346 4.75051 -0.0012933 5.20837 1.04562e-05 5.67399C0.00131421 6.13962 0.124516 6.59679 0.357359 7.00002L13.3307 28.4267C13.5684 28.8185 13.9031 29.1425 14.3024 29.3674C14.7018 29.5922 15.1524 29.7103 15.6107 29.7103C16.069 29.7103 16.5196 29.5922 16.919 29.3674C17.3183 29.1425 17.653 28.8185 17.8907 28.4267L30.864 7.00002C31.1042 6.59816 31.2343 6.14015 31.2413 5.67205C31.2484 5.20394 31.132 4.74224 30.904 4.33335Z" fill="black"/>
+</svg>

package/src/icons/triangle-right.svg

@@ -0,0 +1,3 @@
+<svg width="32px" height="32px" viewBox="0 -3 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M28.0799 13.72L6.66661 0.746667C6.2624 0.513287 5.80402 0.390086 5.33728 0.389377C4.87054 0.388668 4.41178 0.510475 4.00687 0.742626C3.60196 0.974776 3.26507 1.30914 3.02987 1.71229C2.79468 2.11544 2.66942 2.57327 2.66661 3.04V28.96C2.66238 29.4321 2.7836 29.8969 3.01786 30.3069C3.25212 30.7169 3.59102 31.0573 3.99994 31.2933C4.40784 31.5198 4.86672 31.6387 5.33328 31.6387C5.79984 31.6387 6.25871 31.5198 6.66661 31.2933L27.9999 18.32C28.3918 18.0823 28.7158 17.7476 28.9406 17.3483C29.1655 16.9489 29.2836 16.4983 29.2836 16.04C29.2836 15.5817 29.1655 15.1311 28.9406 14.7317C28.7158 14.3324 28.3918 13.9977 27.9999 13.76L28.0799 13.72Z" fill="black"/>
+</svg>

package/src/icons/triangle-up.svg

@@ -0,0 +1,3 @@
+<svg width="32px" height="32px" viewBox="0 -3 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M31.2533 25.3333L18.28 3.90666C18.0423 3.5148 17.7076 3.19082 17.3082 2.96597C16.9089 2.74112 16.4583 2.623 16 2.623C15.5417 2.623 15.0911 2.74112 14.6917 2.96597C14.2923 3.19082 13.9577 3.5148 13.72 3.90666L0.746641 25.3333C0.513798 25.7366 0.390596 26.1937 0.389293 26.6594C0.387989 27.125 0.508629 27.5828 0.739209 27.9874C0.96979 28.3919 1.30227 28.729 1.70358 28.9651C2.10489 29.2013 2.56104 29.3282 3.02664 29.3333H28.9733C29.4389 29.3282 29.8951 29.2013 30.2964 28.9651C30.6977 28.729 31.0302 28.3919 31.2607 27.9874C31.4913 27.5828 31.612 27.125 31.6107 26.6594C31.6094 26.1937 31.4861 25.7366 31.2533 25.3333Z" fill="black"/>
+</svg>

package/src/js/index.js

@@ -11,6 +11,7 @@ import './webpack-public-path';
 import './common';
 import tabs from '../components/tabs/tabs';
 import accordion from '../components/accordion/accordion';
+import checkboxList from '../components/inputs/checkbox-list/checkbox-list';
 import popovers from '../components/popover/popover';
 import modals from '../components/modal/modal';
 import fileUpload from '../components/inputs/file-upload/file-upload';
@@ -21,6 +22,7 @@ import prose from '../helpers/prose/prose';
 document.addEventListener('DOMContentLoaded', () => {
   tabs.init();
   accordion.init();
+  checkboxList.init();
   modals.init();
   fileUpload.init();
   characterCount.init();

package/src/scss/constants/_sd-tokens.scss

@@ -1,7 +1,7 @@
 
 /**
  * Do not edit directly
- * Generated on Mon, 05 Aug 2024 09:25:47 GMT
+ * Generated on Mon, 02 Sep 2024 09:34:49 GMT
  */
 
 $constant-color-neutral-base: #707070;