@dso-toolkit/core 45.0.1 → 45.2.0

package/dist/cjs/{index.esm-3520a2a6.js → index.esm-50325ea2.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 /*!
-* tabbable 5.3.1
+* tabbable 6.0.0
 * @license MIT, https://github.com/focus-trap/tabbable/blob/master/LICENSE
 */
 var candidateSelectors = ['input', 'select', 'textarea', 'a[href]', 'button', '[tabindex]:not(slot)', 'audio[controls]', 'video[controls]', '[contenteditable]:not([contenteditable="false"])', 'details>summary:first-of-type', 'details'];
@@ -36,6 +36,12 @@ var getCandidates = function getCandidates(el, includeContainer, filter) {
  * @returns {ShadowRoot|boolean} ShadowRoot if available or boolean indicating if a shadowRoot is attached but not available.
  */
 
+/**
+ * @callback ShadowRootFilter
+ * @param {Element} shadowHostNode the element which contains shadow content
+ * @returns {boolean} true if a shadow root could potentially contain valid candidates.
+ */
+
 /**
  * @typedef {Object} CandidatesScope
  * @property {Element} scope contains inner candidates
@@ -49,6 +55,7 @@ var getCandidates = function getCandidates(el, includeContainer, filter) {
  *  or a boolean stating if it has an undisclosed shadow root
  * @property {(node: Element) => boolean} filter filter candidates
  * @property {boolean} flatten if true then result will flatten any CandidatesScope into the returned list
+ * @property {ShadowRootFilter} shadowRootFilter filter shadow roots;
  */
 
 /**
@@ -91,8 +98,9 @@ var getCandidatesIteratively = function getCandidatesIteratively(elements, inclu
 
       var shadowRoot = element.shadowRoot || // check for an undisclosed shadow
       typeof options.getShadowRoot === 'function' && options.getShadowRoot(element);
+      var validShadowRoot = !options.shadowRootFilter || options.shadowRootFilter(element);
 
-      if (shadowRoot) {
+      if (shadowRoot && validShadowRoot) {
         // add shadow dom scope IIF a shadow root node was given; otherwise, an undisclosed
         //  shadow exists, so look at light dom children as fallback BUT create a scope for any
         //  child candidates found because they're likely slotted elements (elements that are
@@ -203,6 +211,45 @@ var isRadio = function isRadio(node) {
 
 var isNonTabbableRadio = function isNonTabbableRadio(node) {
   return isRadio(node) && !isTabbableRadio(node);
+}; // determines if a node is ultimately attached to the window's document
+
+
+var isNodeAttached = function isNodeAttached(node) {
+  var _nodeRootHost;
+
+  // The root node is the shadow root if the node is in a shadow DOM; some document otherwise
+  //  (but NOT _the_ document; see second 'If' comment below for more).
+  // If rootNode is shadow root, it'll have a host, which is the element to which the shadow
+  //  is attached, and the one we need to check if it's in the document or not (because the
+  //  shadow, and all nodes it contains, is never considered in the document since shadows
+  //  behave like self-contained DOMs; but if the shadow's HOST, which is part of the document,
+  //  is hidden, or is not in the document itself but is detached, it will affect the shadow's
+  //  visibility, including all the nodes it contains). The host could be any normal node,
+  //  or a custom element (i.e. web component). Either way, that's the one that is considered
+  //  part of the document, not the shadow root, nor any of its children (i.e. the node being
+  //  tested).
+  // To further complicate things, we have to look all the way up until we find a shadow HOST
+  //  that is attached (or find none) because the node might be in nested shadows...
+  // If rootNode is not a shadow root, it won't have a host, and so rootNode should be the
+  //  document (per the docs) and while it's a Document-type object, that document does not
+  //  appear to be the same as the node's `ownerDocument` for some reason, so it's safer
+  //  to ignore the rootNode at this point, and use `node.ownerDocument`. Otherwise,
+  //  using `rootNode.contains(node)` will _always_ be true we'll get false-positives when
+  //  node is actually detached.
+  var nodeRootHost = getRootNode(node).host;
+  var attached = !!((_nodeRootHost = nodeRootHost) !== null && _nodeRootHost !== void 0 && _nodeRootHost.ownerDocument.contains(nodeRootHost) || node.ownerDocument.contains(node));
+
+  while (!attached && nodeRootHost) {
+    var _nodeRootHost2;
+
+    // since it's not attached and we have a root host, the node MUST be in a nested shadow DOM,
+    //  which means we need to get the host's host and check if that parent host is contained
+    //  in (i.e. attached to) the document
+    nodeRootHost = getRootNode(nodeRootHost).host;
+    attached = !!((_nodeRootHost2 = nodeRootHost) !== null && _nodeRootHost2 !== void 0 && _nodeRootHost2.ownerDocument.contains(nodeRootHost));
+  }
+
+  return attached;
 };
 
 var isZeroArea = function isZeroArea(node) {
@@ -217,6 +264,11 @@ var isHidden = function isHidden(node, _ref) {
   var displayCheck = _ref.displayCheck,
       getShadowRoot = _ref.getShadowRoot;
 
+  // NOTE: visibility will be `undefined` if node is detached from the document
+  //  (see notes about this further down), which means we will consider it visible
+  //  (this is legacy behavior from a very long way back)
+  // NOTE: we check this regardless of `displayCheck="none"` because this is a
+  //  _visibility_ check, not a _display_ check
   if (getComputedStyle(node).visibility === 'hidden') {
     return true;
   }
@@ -228,7 +280,7 @@ var isHidden = function isHidden(node, _ref) {
     return true;
   }
 
-  if (!displayCheck || displayCheck === 'full') {
+  if (!displayCheck || displayCheck === 'full' || displayCheck === 'legacy-full') {
     if (typeof getShadowRoot === 'function') {
       // figure out if we should consider the node to be in an undisclosed shadow and use the
       //  'non-zero-area' fallback
@@ -259,18 +311,51 @@ var isHidden = function isHidden(node, _ref) {
     } // else, `getShadowRoot` might be true, but all that does is enable shadow DOM support
     //  (i.e. it does not also presume that all nodes might have undisclosed shadows); or
     //  it might be a falsy value, which means shadow DOM support is disabled
-    // didn't find it sitting in an undisclosed shadow (or shadows are disabled) so now we
-    //  can just test to see if it would normally be visible or not
-    // this works wherever the node is: if there's at least one client rect, it's
-    //  somehow displayed; it also covers the CSS 'display: contents' case where the
-    //  node itself is hidden in place of its contents; and there's no need to search
-    //  up the hierarchy either
+    // Since we didn't find it sitting in an undisclosed shadow (or shadows are disabled)
+    //  now we can just test to see if it would normally be visible or not, provided it's
+    //  attached to the main document.
+    // NOTE: We must consider case where node is inside a shadow DOM and given directly to
+    //  `isTabbable()` or `isFocusable()` -- regardless of `getShadowRoot` option setting.
+
+
+    if (isNodeAttached(node)) {
+      // this works wherever the node is: if there's at least one client rect, it's
+      //  somehow displayed; it also covers the CSS 'display: contents' case where the
+      //  node itself is hidden in place of its contents; and there's no need to search
+      //  up the hierarchy either
+      return !node.getClientRects().length;
+    } // Else, the node isn't attached to the document, which means the `getClientRects()`
+    //  API will __always__ return zero rects (this can happen, for example, if React
+    //  is used to render nodes onto a detached tree, as confirmed in this thread:
+    //  https://github.com/facebook/react/issues/9117#issuecomment-284228870)
+    //
+    // It also means that even window.getComputedStyle(node).display will return `undefined`
+    //  because styles are only computed for nodes that are in the document.
+    //
+    // NOTE: THIS HAS BEEN THE CASE FOR YEARS. It is not new, nor is it caused by tabbable
+    //  somehow. Though it was never stated officially, anyone who has ever used tabbable
+    //  APIs on nodes in detached containers has actually implicitly used tabbable in what
+    //  was later (as of v5.2.0 on Apr 9, 2021) called `displayCheck="none"` mode -- essentially
+    //  considering __everything__ to be visible because of the innability to determine styles.
+    //
+    // v6.0.0: As of this major release, the default 'full' option __no longer treats detached
+    //  nodes as visible with the 'none' fallback.__
 
 
-    return !node.getClientRects().length;
+    if (displayCheck !== 'legacy-full') {
+      return true; // hidden
+    } // else, fallback to 'none' mode and consider the node visible
+
   } else if (displayCheck === 'non-zero-area') {
+    // NOTE: Even though this tests that the node's client rect is non-zero to determine
+    //  whether it's displayed, and that a detached node will __always__ have a zero-area
+    //  client rect, we don't special-case for whether the node is attached or not. In
+    //  this mode, we do want to consider nodes that have a zero area to be hidden at all
+    //  times, and that includes attached or not.
     return isZeroArea(node);
-  }
+  } // visible, as far as we can tell, or per current `displayCheck=none` mode, we assume
+  //  it's visible
+
 
   return false;
 }; // form fields (nested) inside a disabled fieldset are not focusable/tabbable
@@ -324,6 +409,18 @@ var isNodeMatchingSelectorTabbable = function isNodeMatchingSelectorTabbable(opt
 
   return true;
 };
+
+var isValidShadowRootTabbable = function isValidShadowRootTabbable(shadowHostNode) {
+  var tabIndex = parseInt(shadowHostNode.getAttribute('tabindex'), 10);
+
+  if (isNaN(tabIndex) || tabIndex >= 0) {
+    return true;
+  } // If a custom element has an explicit negative tabindex,
+  // browsers will not allow tab targeting said element's children.
+
+
+  return false;
+};
 /**
  * @param {Array.<Element|CandidatesScope>} candidates
  * @returns Element[]
@@ -365,7 +462,8 @@ var tabbable = function tabbable(el, options) {
     candidates = getCandidatesIteratively([el], options.includeContainer, {
       filter: isNodeMatchingSelectorTabbable.bind(null, options),
       flatten: false,
-      getShadowRoot: options.getShadowRoot
+      getShadowRoot: options.getShadowRoot,
+      shadowRootFilter: isValidShadowRootTabbable
     });
   } else {
     candidates = getCandidates(el, options.includeContainer, isNodeMatchingSelectorTabbable.bind(null, options));

package/dist/cjs/loader.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0a7c679a.js');
+const index = require('./index-4066351a.js');
 
 /*
  Stencil Client Patch Esm v2.10.0 | MIT Licensed | https://stenciljs.com
@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["dso-map-base-layers.cjs",[[1,"dso-map-base-layers",{"group":[1],"baseLayers":[16]}]]],["dso-map-overlays.cjs",[[1,"dso-map-overlays",{"group":[1],"overlays":[16]}]]],["dso-header.cjs",[[1,"dso-header",{"mainMenu":[16],"useDropDownMenu":[1,"use-drop-down-menu"],"authStatus":[1,"auth-status"],"loginUrl":[1,"login-url"],"logoutUrl":[1,"logout-url"],"userProfileName":[1,"user-profile-name"],"userProfileUrl":[1,"user-profile-url"],"userHomeUrl":[1,"user-home-url"],"showDropDown":[32],"hasSubLogo":[32],"overflowMenuItems":[32]}]]],["dso-label.cjs",[[1,"dso-label",{"compact":[4],"removable":[4],"status":[1],"truncate":[4],"removeHover":[32],"removeFocus":[32],"textHover":[32],"textFocus":[32],"truncatedContent":[32],"labelText":[32]}]]],["dso-toggletip.cjs",[[1,"dso-toggletip",{"label":[1],"position":[1],"small":[4],"secondary":[4],"active":[32]}]]],["dso-tree-view.cjs",[[1,"dso-tree-view",{"collection":[16],"focusItem":[64]}]]],["dso-autosuggest.cjs",[[6,"dso-autosuggest",{"suggestions":[16],"loading":[4],"loadingLabel":[1,"loading-label"],"loadingDelayed":[2,"loading-delayed"],"notFoundLabel":[1,"not-found-label"],"suggestOnFocus":[4,"suggest-on-focus"],"showSuggestions":[32],"selectedSuggestion":[32],"notFound":[32],"showLoading":[32]},[[4,"click","onDocumentClick"]]]]],["dso-date-picker.cjs",[[2,"dso-date-picker",{"name":[1],"identifier":[1],"disabled":[516],"role":[1],"direction":[1],"required":[4],"dsoAutofocus":[4,"dso-autofocus"],"value":[1537],"min":[1],"max":[1],"activeFocus":[32],"focusedDay":[32],"open":[32],"visible":[32],"setFocus":[64],"show":[64],"hide":[64]},[[6,"click","handleDocumentClick"]]]]],["dso-helpcenter-panel.cjs",[[1,"dso-helpcenter-panel",{"label":[1],"url":[1],"visibility":[32],"isOpen":[32],"slideState":[32],"loadIframe":[32]}]]],["dso-image-overlay.cjs",[[1,"dso-image-overlay",{"active":[32],"focused":[32],"zoomable":[32]},[[2,"load","loadListener"]]]]],["dso-map-controls.cjs",[[1,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32]}]]],["dso-pagination.cjs",[[1,"dso-pagination",{"totalPages":[2,"total-pages"],"currentPage":[2,"current-page"],"formatHref":[16]}]]],["dso-viewer-grid.cjs",[[1,"dso-viewer-grid",{"filterpanelOpen":[516,"filterpanel-open"],"overlayOpen":[516,"overlay-open"],"initialMainSize":[1,"initial-main-size"],"mainSize":[32]}]]],["dso-alert.cjs",[[1,"dso-alert",{"status":[1],"roleAlert":[4,"role-alert"]}]]],["dso-attachments-counter.cjs",[[1,"dso-attachments-counter",{"count":[2]}]]],["dso-badge.cjs",[[1,"dso-badge",{"status":[1]}]]],["dso-banner.cjs",[[1,"dso-banner",{"status":[1]}]]],["dso-highlight-box.cjs",[[1,"dso-highlight-box",{"yellow":[4],"border":[4],"white":[4],"dropShadow":[4,"drop-shadow"],"step":[2]}]]],["dso-ozon-content.cjs",[[6,"dso-ozon-content",{"content":[1],"inline":[516],"deleted":[516],"interactive":[520],"state":[32]}]]],["dso-progress-bar.cjs",[[1,"dso-progress-bar",{"progress":[2],"min":[2],"max":[2]}]]],["dso-responsive-element.cjs",[[1,"dso-responsive-element",{"sizeAlias":[32],"sizeWidth":[32]}]]],["dso-dropdown-menu.cjs",[[1,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"checkable":[4]}]]],["dso-progress-indicator.cjs",[[1,"dso-progress-indicator",{"label":[1],"size":[1],"block":[4]}]]],["dso-tooltip.cjs",[[1,"dso-tooltip",{"descriptive":[516],"position":[1],"strategy":[1],"for":[1],"noArrow":[4,"no-arrow"],"stateless":[4],"small":[4],"active":[1540],"hidden":[32],"activate":[64],"deactivate":[64]},[[0,"click","listenClick"]]]]],["dso-info-button.cjs",[[1,"dso-info-button",{"active":[1540],"secondary":[4],"label":[1],"setFocus":[64]}]]],["dso-info_2.cjs",[[6,"dso-selectable",{"type":[1],"identifier":[1],"name":[1],"value":[1],"invalid":[4],"describedById":[1,"described-by-id"],"disabled":[4],"required":[4],"checked":[4],"indeterminate":[4],"infoFixed":[4,"info-fixed"],"infoActive":[32],"toggleInfo":[64]}],[1,"dso-info",{"fixed":[516],"active":[516]}]]],["dso-icon.cjs",[[1,"dso-icon",{"icon":[1]}]]]], options);
+  return index.bootstrapLazy([["dso-icon.cjs",[[1,"dso-icon",{"icon":[1]}]]],["dso-map-base-layers.cjs",[[1,"dso-map-base-layers",{"group":[1],"baseLayers":[16]}]]],["dso-map-overlays.cjs",[[1,"dso-map-overlays",{"group":[1],"overlays":[16]}]]],["dso-toggletip.cjs",[[1,"dso-toggletip",{"label":[1],"position":[1],"small":[4],"secondary":[4],"active":[32]}]]],["dso-accordion-section.cjs",[[1,"dso-accordion-section",{"handleTitle":[1,"handle-title"],"heading":[1],"handleUrl":[1,"handle-url"],"state":[1],"attachmentCount":[2,"attachment-count"],"icon":[1],"status":[1],"open":[1540],"hasNestedSection":[32],"toggleSection":[64]}]]],["dso-header.cjs",[[6,"dso-header",{"mainMenu":[16],"useDropDownMenu":[1,"use-drop-down-menu"],"authStatus":[1,"auth-status"],"loginUrl":[1,"login-url"],"logoutUrl":[1,"logout-url"],"userProfileName":[1,"user-profile-name"],"userProfileUrl":[1,"user-profile-url"],"userHomeUrl":[1,"user-home-url"],"showDropDown":[32],"hasSubLogo":[32],"overflowMenuItems":[32]}]]],["dso-label.cjs",[[1,"dso-label",{"compact":[4],"removable":[4],"status":[1],"truncate":[4],"removeHover":[32],"removeFocus":[32],"textHover":[32],"textFocus":[32],"truncatedContent":[32],"labelText":[32]}]]],["dso-pagination.cjs",[[1,"dso-pagination",{"totalPages":[2,"total-pages"],"currentPage":[2,"current-page"],"formatHref":[16],"availablePositions":[32]},[[0,"dsoSizeChange","sizeChangeHandler"]]]]],["dso-tree-view.cjs",[[1,"dso-tree-view",{"collection":[16],"focusItem":[64]}]]],["dso-alert.cjs",[[1,"dso-alert",{"status":[1],"roleAlert":[4,"role-alert"]}]]],["dso-autosuggest.cjs",[[6,"dso-autosuggest",{"suggestions":[16],"loading":[4],"loadingLabel":[1,"loading-label"],"loadingDelayed":[2,"loading-delayed"],"notFoundLabel":[1,"not-found-label"],"suggestOnFocus":[4,"suggest-on-focus"],"showSuggestions":[32],"selectedSuggestion":[32],"notFound":[32],"showLoading":[32]},[[4,"click","onDocumentClick"]]]]],["dso-date-picker.cjs",[[2,"dso-date-picker",{"name":[1],"identifier":[1],"disabled":[516],"role":[1],"direction":[1],"required":[4],"dsoAutofocus":[4,"dso-autofocus"],"value":[1537],"min":[1],"max":[1],"activeFocus":[32],"focusedDay":[32],"open":[32],"visible":[32],"setFocus":[64],"show":[64],"hide":[64]},[[6,"click","handleDocumentClick"]]]]],["dso-helpcenter-panel.cjs",[[1,"dso-helpcenter-panel",{"label":[1],"url":[1],"visibility":[32],"isOpen":[32],"slideState":[32],"loadIframe":[32]},[[8,"keydown","keyDownListener"]]]]],["dso-image-overlay.cjs",[[1,"dso-image-overlay",{"active":[32],"focused":[32],"zoomable":[32]},[[2,"load","loadListener"]]]]],["dso-map-controls.cjs",[[1,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32]}]]],["dso-table.cjs",[[1,"dso-table",{"noModal":[516,"no-modal"],"isResponsive":[516,"is-responsive"],"modalActive":[32],"placeholderHeight":[32]}]]],["dso-viewer-grid.cjs",[[1,"dso-viewer-grid",{"filterpanelOpen":[516,"filterpanel-open"],"overlayOpen":[516,"overlay-open"],"initialMainSize":[1,"initial-main-size"],"mainSize":[32]}]]],["dso-accordion.cjs",[[1,"dso-accordion",{"variant":[513],"reverseAlign":[516,"reverse-align"],"allowMultipleOpen":[516,"allow-multiple-open"],"getState":[64],"toggleSection":[64],"closeOpenSections":[64]}]]],["dso-badge.cjs",[[1,"dso-badge",{"status":[1]}]]],["dso-banner.cjs",[[1,"dso-banner",{"status":[1]}]]],["dso-highlight-box.cjs",[[1,"dso-highlight-box",{"yellow":[4],"border":[4],"white":[4],"dropShadow":[4,"drop-shadow"],"step":[2]}]]],["dso-ozon-content.cjs",[[6,"dso-ozon-content",{"content":[1],"inline":[516],"deleted":[516],"interactive":[520],"state":[32]}]]],["dso-progress-bar.cjs",[[1,"dso-progress-bar",{"progress":[2],"min":[2],"max":[2]}]]],["dso-attachments-counter.cjs",[[1,"dso-attachments-counter",{"count":[2]}]]],["dso-dropdown-menu.cjs",[[1,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"checkable":[4]}]]],["dso-responsive-element.cjs",[[1,"dso-responsive-element",{"sizeAlias":[32],"sizeWidth":[32],"getSize":[64]}]]],["dso-progress-indicator.cjs",[[1,"dso-progress-indicator",{"label":[1],"size":[1],"block":[4]}]]],["dso-tooltip.cjs",[[1,"dso-tooltip",{"descriptive":[516],"position":[1],"strategy":[1],"for":[1],"noArrow":[4,"no-arrow"],"stateless":[4],"small":[4],"active":[1540],"hidden":[32],"activate":[64],"deactivate":[64]},[[0,"click","listenClick"]]]]],["dso-info-button.cjs",[[1,"dso-info-button",{"active":[1540],"secondary":[4],"label":[1],"hover":[32],"setFocus":[64]}]]],["dso-info_2.cjs",[[6,"dso-selectable",{"type":[1],"identifier":[1],"name":[1],"value":[1],"invalid":[4],"describedById":[1,"described-by-id"],"disabled":[4],"required":[4],"checked":[4],"indeterminate":[4],"infoFixed":[4,"info-fixed"],"infoActive":[32],"toggleInfo":[64]}],[1,"dso-info",{"fixed":[516],"active":[516]}]]]], options);
   });
 };
 

package/dist/collection/collection-manifest.json

@@ -5,6 +5,8 @@
     "./components/info-button/info-button.js",
     "./components/selectable/selectable.js",
     "./components/viewer-grid/viewer-grid.js",
+    "./components/accordion/accordion.js",
+    "./components/accordion/components/accordion-section.js",
     "./components/alert/alert.js",
     "./components/attachments-counter/attachments-counter.js",
     "./components/badge/badge.js",
@@ -25,6 +27,7 @@
     "./components/progress-bar/progress-bar.js",
     "./components/progress-indicator/progress-indicator.js",
     "./components/responsive-element/responsive-element.js",
+    "./components/table/table.js",
     "./components/toggletip/toggletip.js",
     "./components/tooltip/tooltip.js",
     "./components/tree-view/tree-view.js"

package/dist/collection/components/accordion/accordion.css

@@ -0,0 +1,9 @@
+:host {
+  display: block;
+}
+
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+}

package/dist/collection/components/accordion/accordion.interfaces.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/accordion/accordion.js

@@ -0,0 +1,260 @@
+import { h, Component, Prop, Host, Method, Watch, Element, Event } from '@stencil/core';
+import { createStore } from '@stencil/store';
+export class Accordion {
+  constructor() {
+    this.variant = 'default';
+    /** Places the chevron at the opposite side. Note: this mode does not display `state`, `attachmentCount` or `status` props on child `<dso-accordion-section>` elements */
+    this.reverseAlign = false;
+    /** Allows multiple sections to be open at the same time. */
+    this.allowMultipleOpen = false;
+    const { state } = createStore({
+      variant: this.variant || 'default',
+      reverseAlign: this.reverseAlign,
+    });
+    this.accordionState = state;
+  }
+  updateVariant(variant = 'default') {
+    this.accordionState.variant = variant || 'default';
+  }
+  updateReverseAlign(reverseAlign) {
+    this.accordionState.reverseAlign = reverseAlign;
+  }
+  watchAllowMultiple(allowMultipleOpen) {
+    if (!allowMultipleOpen) {
+      const openSections = Array.from(this.host.querySelectorAll(':scope > dso-accordion-section[open]'));
+      // By removing the first section, it is kept open;
+      openSections.shift();
+      openSections.forEach(section => this.controlOpenAttribute(section, false));
+    }
+  }
+  async getState() {
+    return this.accordionState;
+  }
+  /** Toggle a section. Pass the `<dso-accordion-section>` element or the index of the section. */
+  async toggleSection(sectionElement, event) {
+    const sections = Array.from(this.host.querySelectorAll(':scope > dso-accordion-section'));
+    if (typeof sectionElement === 'number') {
+      sectionElement = sections[sectionElement];
+    }
+    if (!(sectionElement instanceof HTMLElement) || !sections.includes(sectionElement)) {
+      return;
+    }
+    const sectionIsOpen = this.isSectionOpen(sectionElement);
+    if (this.allowMultipleOpen) {
+      this.controlOpenAttribute(sectionElement, !sectionIsOpen);
+      this.emitToggleEvent(sectionElement, sections, event);
+      return;
+    }
+    if (sectionIsOpen) {
+      this.controlOpenAttribute(sectionElement, false);
+      this.emitToggleEvent(sectionElement, sections, event);
+      return;
+    }
+    await this.closeOpenSections();
+    this.controlOpenAttribute(sectionElement, true);
+    this.emitToggleEvent(sectionElement, sections, event);
+  }
+  /** Closes all sections belonging to this accordion. */
+  async closeOpenSections() {
+    const sections = Array.from(this.host.querySelectorAll(':scope > dso-accordion-section'));
+    const openSections = sections.filter(s => this.isSectionOpen(s));
+    openSections.forEach(section => this.controlOpenAttribute(section, false));
+  }
+  render() {
+    return (h(Host, { class: {
+        'dso-accordion': true
+      } },
+      h("slot", null)));
+  }
+  emitToggleEvent(sectionElement, sections, e) {
+    this.dsoToggleSection.emit({
+      originalEvent: e,
+      section: {
+        element: sectionElement,
+        open: this.isSectionOpen(sectionElement),
+      },
+      sections,
+    });
+  }
+  isSectionOpen(sectionElement) {
+    return typeof sectionElement.getAttribute('open') === 'string';
+  }
+  controlOpenAttribute(sectionElement, setAttribute) {
+    if (setAttribute) {
+      sectionElement.setAttribute('open', '');
+    }
+    else {
+      sectionElement.removeAttribute('open');
+    }
+  }
+  static get is() { return "dso-accordion"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["accordion.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["accordion.css"]
+  }; }
+  static get properties() { return {
+    "variant": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "AccordionVariant",
+        "resolved": "\"compact\" | \"conclusion\" | \"default\" | undefined",
+        "references": {
+          "AccordionVariant": {
+            "location": "import",
+            "path": "./accordion.interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "variant",
+      "reflect": true,
+      "defaultValue": "'default'"
+    },
+    "reverseAlign": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Places the chevron at the opposite side. Note: this mode does not display `state`, `attachmentCount` or `status` props on child `<dso-accordion-section>` elements"
+      },
+      "attribute": "reverse-align",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "allowMultipleOpen": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Allows multiple sections to be open at the same time."
+      },
+      "attribute": "allow-multiple-open",
+      "reflect": true,
+      "defaultValue": "false"
+    }
+  }; }
+  static get events() { return [{
+      "method": "dsoToggleSection",
+      "name": "dsoToggleSection",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when a section is toggled.\n\n`event.detail.originalEvent` contains the original `MouseEvent` when the section is toggled by clicking on the header\n`event.detail.section` contains the toggled section and its new opened value.\\\n`event.detail.sections` contains all `<dso-accordion-section>` elements belonging to this accordion."
+      },
+      "complexType": {
+        "original": "AccordionSectionToggleEvent",
+        "resolved": "AccordionSectionToggleEvent",
+        "references": {
+          "AccordionSectionToggleEvent": {
+            "location": "import",
+            "path": "./accordion.interfaces"
+          }
+        }
+      }
+    }]; }
+  static get methods() { return {
+    "getState": {
+      "complexType": {
+        "signature": "() => Promise<AccordionInternalState>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "AccordionInternalState": {
+            "location": "import",
+            "path": "./accordion.interfaces"
+          }
+        },
+        "return": "Promise<AccordionInternalState>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
+    "toggleSection": {
+      "complexType": {
+        "signature": "(sectionElement: HTMLElement | number, event?: MouseEvent | undefined) => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }, {
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "HTMLElement": {
+            "location": "global"
+          },
+          "MouseEvent": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Toggle a section. Pass the `<dso-accordion-section>` element or the index of the section.",
+        "tags": []
+      }
+    },
+    "closeOpenSections": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "HTMLElement": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Closes all sections belonging to this accordion.",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "host"; }
+  static get watchers() { return [{
+      "propName": "variant",
+      "methodName": "updateVariant"
+    }, {
+      "propName": "reverseAlign",
+      "methodName": "updateReverseAlign"
+    }, {
+      "propName": "allowMultipleOpen",
+      "methodName": "watchAllowMultiple"
+    }]; }
+}

package/dist/collection/components/accordion/accordion.template.js

@@ -0,0 +1,26 @@
+import { html } from 'lit-html';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
+export function accordionTemplate({ variant, reverseAlign, allowMultipleOpen, dsoToggleSection, sections }) {
+  return html `
+    <dso-accordion
+      variant=${ifDefined(variant)}
+      ?reverse-align=${reverseAlign}
+      ?allow-multiple-open=${allowMultipleOpen}
+      @dsoToggleSection=${dsoToggleSection}
+    >
+      ${sections.map(section => html `
+        <dso-accordion-section
+          ?open=${ifDefined(section.open)}
+          handle-title=${section.handleTitle}
+          handle-url=${ifDefined(section.handleUrl)}
+          state=${ifDefined(section.state)}
+          status=${ifDefined(section.status)}
+          icon=${ifDefined(section.icon)}
+          attachment-count=${ifDefined(section.attachmentCount)}
+        >
+          ${unsafeHTML(section.content)}
+        </dso-accordion-section>`)}
+    </dso-accordion>
+  `;
+}