@dso-toolkit/core 48.0.0 → 49.0.1

package/dist/cjs/dso-accordion-section.cjs.entry.js

@@ -1327,17 +1327,17 @@ const HandleElement = ({ handleUrl, onClick, open }, children) => {
   return (index.h("button", { type: "button", onClick: onClick, "aria-expanded": open ? "true" : "false" }, children));
 };
 
-const Handle = ({ heading }, children) => {
+const Handle = ({ heading, ref }, children) => {
   switch (heading) {
     default:
     case "h2":
-      return index.h("h2", { class: "dso-section-handle" }, children);
+      return (index.h("h2", { ref: ref, class: "dso-section-handle" }, children));
     case "h3":
-      return index.h("h3", { class: "dso-section-handle" }, children);
+      return (index.h("h3", { ref: ref, class: "dso-section-handle" }, children));
     case "h4":
-      return index.h("h4", { class: "dso-section-handle" }, children);
+      return (index.h("h4", { ref: ref, class: "dso-section-handle" }, children));
     case "h5":
-      return index.h("h5", { class: "dso-section-handle" }, children);
+      return (index.h("h5", { ref: ref, class: "dso-section-handle" }, children));
   }
 };
 
@@ -1396,7 +1396,7 @@ const AccordionSection = class {
         index.forceUpdate(this.host);
       });
     }
-    this.startAnimationResizeObserver();
+    this.prepareAnimationResizeObserver();
   }
   componentDidLoad() {
     var _a, _b;
@@ -1409,15 +1409,65 @@ const AccordionSection = class {
     var _a;
     (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
   }
-  /** Toggle this section */
-  async toggleSection() {
+  /** Toggle this section.
+   * @param scrollIntoView boolean - defaults to true
+   */
+  async toggleSection(scrollIntoView = true) {
     var _a;
-    return (_a = this.accordion) === null || _a === void 0 ? void 0 : _a.toggleSection(this.host);
+    await ((_a = this.accordion) === null || _a === void 0 ? void 0 : _a.toggleSection(this.host).then(async () => {
+      if (scrollIntoView) {
+        await this.scrollIntoViewWhenNeeded(true);
+      }
+    }));
+  }
+  /** Scroll this section into view when needed. */
+  async scrollSectionIntoView() {
+    await this.scrollIntoViewWhenNeeded(false);
+  }
+  async scrollIntoViewWhenNeeded(sectionToggled) {
+    var _a, _b, _c;
+    AccordionSection.scrollCandidate = undefined;
+    const bodyClientRect = (_a = this.sectionBody) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+    const headingClientRect = (_b = this.sectionHeading) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
+    if (!bodyClientRect || !headingClientRect || !this.accordionState) {
+      return;
+    }
+    const waitForAnimationBeforeScrolling = (state) => {
+      var _a;
+      const sectionBottomOffsetTop = this.host.offsetTop + headingClientRect.height + (this.open ? (_a = this.bodyHeight) !== null && _a !== void 0 ? _a : 0 : 0);
+      return (sectionToggled && (sectionBottomOffsetTop > document.documentElement.scrollHeight || state.allowMultipleOpen));
+    };
+    if (waitForAnimationBeforeScrolling(this.accordionState)) {
+      AccordionSection.scrollCandidate = this.host;
+      return;
+    }
+    // this y is relative to the top of the viewport.
+    const sectionBottomY = headingClientRect.top + headingClientRect.height + (this.open ? (_c = this.bodyHeight) !== null && _c !== void 0 ? _c : 0 : 0);
+    if (sectionBottomY > window.innerHeight) {
+      const expandedAccordionHeight = sectionBottomY - headingClientRect.top;
+      const shouldScrollToTopOfSection = expandedAccordionHeight > window.innerHeight;
+      window.scrollTo({
+        top: shouldScrollToTopOfSection
+          ? this.host.offsetTop
+          : this.host.offsetTop - (window.innerHeight - expandedAccordionHeight),
+        behavior: "smooth",
+      });
+    }
+    else if (headingClientRect.top < 0) {
+      window.scrollTo({
+        top: this.host.offsetTop,
+        behavior: "smooth",
+      });
+    }
   }
   async toggle(e) {
     var _a;
     e === null || e === void 0 ? void 0 : e.preventDefault();
-    return (_a = this.accordion) === null || _a === void 0 ? void 0 : _a.toggleSection(this.host, e);
+    (_a = this.accordion) === null || _a === void 0 ? void 0 : _a.toggleSection(this.host, e).then(async (isOpen) => {
+      if (isOpen) {
+        await this.scrollIntoViewWhenNeeded(true);
+      }
+    });
   }
   render() {
     var _a;
@@ -1428,12 +1478,14 @@ const AccordionSection = class {
         ["dso-accordion-" + variant]: true,
         "dso-nested-accordion": this.hasNestedSection,
         "dso-accordion-reverse-align": reverseAlign !== null && reverseAlign !== void 0 ? reverseAlign : false,
-      }, hidden: !variant }, index.h(Handle, { heading: this.heading }, index.h(HandleElement, { handleUrl: this.handleUrl, onClick: async (event) => await this.toggle(event), open: this.open }, reverseAlign ? (index.h(index.Fragment, null, hasAddons && (index.h("div", { class: "dso-section-handle-addons" }, index.h(HandleIcon, { icon: this.icon }))), index.h("span", null, this.handleTitle), index.h("dso-icon", { class: "dso-section-handle-chevron", icon: "chevron-down" }))) : (index.h(index.Fragment, null, index.h("dso-icon", { class: "dso-section-handle-chevron", icon: "chevron-right" }), this.state && index.h("span", { class: "sr-only" }, stateMap[this.state]), index.h("span", null, this.handleTitle), hasAddons && (index.h("div", { class: "dso-section-handle-addons" }, this.status && index.h("span", { class: "dso-status" }, this.status), index.h(HandleIcon, { state: this.state, icon: this.icon, attachmentCount: this.attachmentCount }))))))), index.h("div", { class: { "dso-section-body": true, "dso-animate-ready": !!this.animeInstance }, ref: (element) => (this.sectionBody = element), "aria-hidden": this.open ? "false" : "true" }, index.h("div", { class: "dso-section-body-content" }, index.h("slot", null)))));
+      }, hidden: !variant }, index.h(Handle, { heading: this.heading, ref: (element) => (this.sectionHeading = element) }, index.h(HandleElement, { handleUrl: this.handleUrl, onClick: async (event) => await this.toggle(event), open: this.open }, reverseAlign ? (index.h(index.Fragment, null, hasAddons && (index.h("div", { class: "dso-section-handle-addons" }, index.h(HandleIcon, { icon: this.icon }))), index.h("span", null, this.handleTitle), index.h("dso-icon", { class: "dso-section-handle-chevron", icon: "chevron-down" }))) : (index.h(index.Fragment, null, index.h("dso-icon", { class: "dso-section-handle-chevron", icon: "chevron-right" }), this.state && index.h("span", { class: "sr-only" }, stateMap[this.state]), index.h("span", null, this.handleTitle), hasAddons && (index.h("div", { class: "dso-section-handle-addons" }, this.status && index.h("span", { class: "dso-status" }, this.status), index.h(HandleIcon, { state: this.state, icon: this.icon, attachmentCount: this.attachmentCount }))))))), index.h("div", { class: { "dso-section-body": true, "dso-animate-ready": !!this.animeInstance }, ref: (element) => (this.sectionBody = element), "aria-hidden": this.open ? "false" : "true" }, index.h("div", { class: "dso-section-body-content" }, index.h("slot", null)))));
   }
-  startAnimationResizeObserver() {
+  prepareAnimationResizeObserver() {
     this.resizeObserver = new ResizeObserver(index$1.debounce_1(([entry]) => {
-      if (this.bodyHeight !== entry.contentRect.height) {
-        this.bodyHeight = entry.contentRect.height;
+      // entry.contentRect does not include padding, so we use getBoundingClientRect.
+      const height = entry.target.getBoundingClientRect().height;
+      if (this.bodyHeight !== height) {
+        this.bodyHeight = height;
         this.instantiateAnimation();
       }
     }, 150));
@@ -1446,6 +1498,12 @@ const AccordionSection = class {
       duration: 260,
       autoplay: false,
       direction: "normal",
+      changeComplete: async () => {
+        if (AccordionSection.scrollCandidate === this.host) {
+          AccordionSection.scrollCandidate = undefined;
+          await this.scrollSectionIntoView();
+        }
+      },
       begin: () => {
         if (this.sectionBody) {
           if (this.open) {

package/dist/cjs/dso-accordion.cjs.entry.js

@@ -207,6 +207,7 @@ const Accordion = class {
     const { state } = createStore({
       variant: this.variant || "default",
       reverseAlign: this.reverseAlign,
+      allowMultipleOpen: this.allowMultipleOpen,
     });
     this.accordionState = state;
   }
@@ -216,6 +217,9 @@ const Accordion = class {
   updateReverseAlign(reverseAlign) {
     this.accordionState.reverseAlign = reverseAlign;
   }
+  updateAllowMultipleOpen(allowMultipleOpen) {
+    this.accordionState.allowMultipleOpen = allowMultipleOpen;
+  }
   watchAllowMultiple(allowMultipleOpen) {
     if (!allowMultipleOpen) {
       const openSections = Array.from(this.host.querySelectorAll(":scope > dso-accordion-section[open]"));
@@ -227,7 +231,10 @@ const Accordion = class {
   async getState() {
     return this.accordionState;
   }
-  /** Toggle a section. Pass the `<dso-accordion-section>` element or the index of the section. */
+  /** Toggle a section. Pass the `<dso-accordion-section>` element or the index of the section.\
+   * returns `undefined` when no section is toggled.\
+   * returns `true` when the section is opened and `false` when the section is closed.
+   */
   async toggleSection(sectionElement, event) {
     const sections = Array.from(this.host.querySelectorAll(":scope > dso-accordion-section"));
     if (typeof sectionElement === "number") {
@@ -240,16 +247,17 @@ const Accordion = class {
     if (this.allowMultipleOpen) {
       this.controlOpenAttribute(sectionElement, !sectionIsOpen);
       this.emitToggleEvent(sectionElement, sections, event);
-      return;
+      return !sectionIsOpen;
     }
     if (sectionIsOpen) {
       this.controlOpenAttribute(sectionElement, false);
       this.emitToggleEvent(sectionElement, sections, event);
-      return;
+      return false;
     }
     await this.closeOpenSections();
     this.controlOpenAttribute(sectionElement, true);
     this.emitToggleEvent(sectionElement, sections, event);
+    return true;
   }
   /** Closes all sections belonging to this accordion. */
   async closeOpenSections() {
@@ -257,6 +265,18 @@ const Accordion = class {
     const openSections = sections.filter((s) => this.isSectionOpen(s));
     openSections.forEach((section) => this.controlOpenAttribute(section, false));
   }
+  // These checks are needed for a React timing issue.
+  componentWillLoad() {
+    if (this.accordionState.variant !== this.variant) {
+      this.accordionState.variant = this.variant || "default";
+    }
+    if (this.accordionState.reverseAlign !== this.reverseAlign) {
+      this.accordionState.reverseAlign = this.reverseAlign;
+    }
+    if (this.accordionState.allowMultipleOpen !== this.allowMultipleOpen) {
+      this.accordionState.allowMultipleOpen = this.allowMultipleOpen;
+    }
+  }
   render() {
     return (index.h(index.Host, { class: {
         "dso-accordion": true,
@@ -287,7 +307,7 @@ const Accordion = class {
   static get watchers() { return {
     "variant": ["updateVariant"],
     "reverseAlign": ["updateReverseAlign"],
-    "allowMultipleOpen": ["watchAllowMultiple"]
+    "allowMultipleOpen": ["updateAllowMultipleOpen", "watchAllowMultiple"]
   }; }
 };
 Accordion.style = accordionCss;

package/dist/cjs/dso-toolkit.cjs.js

@@ -15,5 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(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-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-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-alert.cjs",[[1,"dso-alert",{"status":[1],"roleAlert":[4,"role-alert"]}]]],["dso-attachments-counter.cjs",[[1,"dso-attachments-counter",{"count":[2]}]]],["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-modal.cjs",[[1,"dso-modal",{"modalTitle":[1,"modal-title"],"role":[1],"showCloseButton":[4,"show-close-button"],"ariaId":[32],"hasFooter":[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":[513]}]]],["dso-card.cjs",[[1,"dso-card",{"isSelectable":[516,"is-selectable"],"hasImage":[516,"has-image"]}]]],["dso-card-container.cjs",[[1,"dso-card-container",{"mode":[513]}]]],["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-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":[513],"block":[4]}]]],["dso-tooltip.cjs",[[1,"dso-tooltip",{"descriptive":[516],"position":[1],"strategy":[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);
+  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-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-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],"scrollSectionIntoView":[64]}]]],["dso-alert.cjs",[[1,"dso-alert",{"status":[1],"roleAlert":[4,"role-alert"]}]]],["dso-attachments-counter.cjs",[[1,"dso-attachments-counter",{"count":[2]}]]],["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-modal.cjs",[[1,"dso-modal",{"modalTitle":[1,"modal-title"],"role":[1],"showCloseButton":[4,"show-close-button"],"ariaId":[32],"hasFooter":[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":[513]}]]],["dso-card.cjs",[[1,"dso-card",{"isSelectable":[516,"is-selectable"],"hasImage":[516,"has-image"]}]]],["dso-card-container.cjs",[[1,"dso-card-container",{"mode":[513]}]]],["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-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":[513],"block":[4]}]]],["dso-tooltip.cjs",[[1,"dso-tooltip",{"descriptive":[516],"position":[1],"strategy":[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/cjs/dso-tooltip.cjs.entry.js

@@ -1839,7 +1839,7 @@ var maxSize = {
 
 const tooltipCss = ":host(.hidden){visibility:hidden}:host-context(dso-toggletip){color:red !important}:host-context(dso-toggletip) *[data-popper-placement=top] .tooltip-arrow{margin-left:3px}:host-context(dso-toggletip) *[data-popper-placement=right] .tooltip-arrow{margin-top:0}:host-context(dso-toggletip) *[data-popper-placement=bottom] .tooltip-arrow{margin-left:3px}:host-context(dso-toggletip) *[data-popper-placement=left]{margin-right:-8px !important}:host-context(dso-toggletip) *[data-popper-placement=left] .tooltip-arrow{margin-top:0}*,*::after,*::before{box-sizing:border-box}.tooltip{font-family:Asap, sans-serif;font-style:normal;font-weight:400;line-height:1.5;line-break:auto;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;word-wrap:normal;white-space:normal;display:block;filter:drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));font-size:14px;opacity:0;position:absolute;transition:opacity 0.15s linear;z-index:410}.tooltip.in{opacity:1}.tooltip .tooltip-inner{background-color:#fff;border-radius:4px;color:#191919;display:inline-block;font-size:1rem;max-width:640px;padding:8px 16px;position:relative}.tooltip .tooltip-inner.dso-small{max-width:320px}.tooltip .tooltip-arrow{border-color:transparent;border-style:solid;height:0;width:0}.tooltip[data-popper-placement=top]{margin-top:-3px;padding:6px 0}.tooltip[data-popper-placement=top] .tooltip-arrow{border-top-color:#fff;border-width:6px 6px 0;bottom:0}.tooltip[data-popper-placement=top] .tooltip-arrow{margin-left:-3px}.tooltip[data-popper-placement=right]{margin-left:3px;padding:0 6px}.tooltip[data-popper-placement=right] .tooltip-arrow{border-right-color:#fff;border-width:6px 6px 6px 0;left:0}.tooltip[data-popper-placement=right] .tooltip-arrow{margin-top:-3px}.tooltip[data-popper-placement=bottom]{margin-top:3px;padding:6px 0}.tooltip[data-popper-placement=bottom] .tooltip-arrow{border-bottom-color:#fff;border-width:0 6px 6px;top:0}.tooltip[data-popper-placement=bottom] .tooltip-arrow{margin-left:-3px}.tooltip[data-popper-placement=left]{margin-left:-3px;padding:0 6px}.tooltip[data-popper-placement=left] .tooltip-arrow{border-left-color:#fff;border-width:6px 0 6px 6px;right:0}.tooltip[data-popper-placement=left] .tooltip-arrow{margin-top:-3px}";
 
-// Keep const in sync with $tooltip-transition-duration in @dso-toolkit/sources/tooltip.scss tooltip_root() mixin
+// Keep const in sync with $tooltip-transition-duration in dso-toolkit/src/components/tooltip/tooltip.scss tooltip_root() mixin
 const transitionDuration = 150;
 function hasOverflow(el) {
   const style = window.getComputedStyle(el);

package/dist/cjs/loader.cjs.js

@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  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-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-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-alert.cjs",[[1,"dso-alert",{"status":[1],"roleAlert":[4,"role-alert"]}]]],["dso-attachments-counter.cjs",[[1,"dso-attachments-counter",{"count":[2]}]]],["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-modal.cjs",[[1,"dso-modal",{"modalTitle":[1,"modal-title"],"role":[1],"showCloseButton":[4,"show-close-button"],"ariaId":[32],"hasFooter":[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":[513]}]]],["dso-card.cjs",[[1,"dso-card",{"isSelectable":[516,"is-selectable"],"hasImage":[516,"has-image"]}]]],["dso-card-container.cjs",[[1,"dso-card-container",{"mode":[513]}]]],["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-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":[513],"block":[4]}]]],["dso-tooltip.cjs",[[1,"dso-tooltip",{"descriptive":[516],"position":[1],"strategy":[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);
+  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-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-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],"scrollSectionIntoView":[64]}]]],["dso-alert.cjs",[[1,"dso-alert",{"status":[1],"roleAlert":[4,"role-alert"]}]]],["dso-attachments-counter.cjs",[[1,"dso-attachments-counter",{"count":[2]}]]],["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-modal.cjs",[[1,"dso-modal",{"modalTitle":[1,"modal-title"],"role":[1],"showCloseButton":[4,"show-close-button"],"ariaId":[32],"hasFooter":[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":[513]}]]],["dso-card.cjs",[[1,"dso-card",{"isSelectable":[516,"is-selectable"],"hasImage":[516,"has-image"]}]]],["dso-card-container.cjs",[[1,"dso-card-container",{"mode":[513]}]]],["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-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":[513],"block":[4]}]]],["dso-tooltip.cjs",[[1,"dso-tooltip",{"descriptive":[516],"position":[1],"strategy":[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/components/accordion/accordion.js

@@ -8,6 +8,7 @@ export class Accordion {
     const { state } = createStore({
       variant: this.variant || "default",
       reverseAlign: this.reverseAlign,
+      allowMultipleOpen: this.allowMultipleOpen,
     });
     this.accordionState = state;
   }
@@ -17,6 +18,9 @@ export class Accordion {
   updateReverseAlign(reverseAlign) {
     this.accordionState.reverseAlign = reverseAlign;
   }
+  updateAllowMultipleOpen(allowMultipleOpen) {
+    this.accordionState.allowMultipleOpen = allowMultipleOpen;
+  }
   watchAllowMultiple(allowMultipleOpen) {
     if (!allowMultipleOpen) {
       const openSections = Array.from(this.host.querySelectorAll(":scope > dso-accordion-section[open]"));
@@ -28,7 +32,10 @@ export class Accordion {
   async getState() {
     return this.accordionState;
   }
-  /** Toggle a section. Pass the `<dso-accordion-section>` element or the index of the section. */
+  /** Toggle a section. Pass the `<dso-accordion-section>` element or the index of the section.\
+   * returns `undefined` when no section is toggled.\
+   * returns `true` when the section is opened and `false` when the section is closed.
+   */
   async toggleSection(sectionElement, event) {
     const sections = Array.from(this.host.querySelectorAll(":scope > dso-accordion-section"));
     if (typeof sectionElement === "number") {
@@ -41,16 +48,17 @@ export class Accordion {
     if (this.allowMultipleOpen) {
       this.controlOpenAttribute(sectionElement, !sectionIsOpen);
       this.emitToggleEvent(sectionElement, sections, event);
-      return;
+      return !sectionIsOpen;
     }
     if (sectionIsOpen) {
       this.controlOpenAttribute(sectionElement, false);
       this.emitToggleEvent(sectionElement, sections, event);
-      return;
+      return false;
     }
     await this.closeOpenSections();
     this.controlOpenAttribute(sectionElement, true);
     this.emitToggleEvent(sectionElement, sections, event);
+    return true;
   }
   /** Closes all sections belonging to this accordion. */
   async closeOpenSections() {
@@ -58,6 +66,18 @@ export class Accordion {
     const openSections = sections.filter((s) => this.isSectionOpen(s));
     openSections.forEach((section) => this.controlOpenAttribute(section, false));
   }
+  // These checks are needed for a React timing issue.
+  componentWillLoad() {
+    if (this.accordionState.variant !== this.variant) {
+      this.accordionState.variant = this.variant || "default";
+    }
+    if (this.accordionState.reverseAlign !== this.reverseAlign) {
+      this.accordionState.reverseAlign = this.reverseAlign;
+    }
+    if (this.accordionState.allowMultipleOpen !== this.allowMultipleOpen) {
+      this.accordionState.allowMultipleOpen = this.allowMultipleOpen;
+    }
+  }
   render() {
     return (h(Host, { class: {
         "dso-accordion": true,
@@ -206,7 +226,7 @@ export class Accordion {
       },
       "toggleSection": {
         "complexType": {
-          "signature": "(sectionElement: HTMLElement | number, event?: MouseEvent) => Promise<void>",
+          "signature": "(sectionElement: HTMLElement | number, event?: MouseEvent) => Promise<undefined | boolean>",
           "parameters": [{
               "tags": [],
               "text": ""
@@ -225,10 +245,10 @@ export class Accordion {
               "location": "global"
             }
           },
-          "return": "Promise<void>"
+          "return": "Promise<boolean | undefined>"
         },
         "docs": {
-          "text": "Toggle a section. Pass the `<dso-accordion-section>` element or the index of the section.",
+          "text": "Toggle a section. Pass the `<dso-accordion-section>` element or the index of the section.\\\r\nreturns `undefined` when no section is toggled.\\\r\nreturns `true` when the section is opened and `false` when the section is closed.",
           "tags": []
         }
       },
@@ -261,6 +281,9 @@ export class Accordion {
       }, {
         "propName": "reverseAlign",
         "methodName": "updateReverseAlign"
+      }, {
+        "propName": "allowMultipleOpen",
+        "methodName": "updateAllowMultipleOpen"
       }, {
         "propName": "allowMultipleOpen",
         "methodName": "watchAllowMultiple"

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

@@ -28,7 +28,7 @@ export class AccordionSection {
         forceUpdate(this.host);
       });
     }
-    this.startAnimationResizeObserver();
+    this.prepareAnimationResizeObserver();
   }
   componentDidLoad() {
     var _a, _b;
@@ -41,15 +41,65 @@ export class AccordionSection {
     var _a;
     (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
   }
-  /** Toggle this section */
-  async toggleSection() {
+  /** Toggle this section.
+   * @param scrollIntoView boolean - defaults to true
+   */
+  async toggleSection(scrollIntoView = true) {
     var _a;
-    return (_a = this.accordion) === null || _a === void 0 ? void 0 : _a.toggleSection(this.host);
+    await ((_a = this.accordion) === null || _a === void 0 ? void 0 : _a.toggleSection(this.host).then(async () => {
+      if (scrollIntoView) {
+        await this.scrollIntoViewWhenNeeded(true);
+      }
+    }));
+  }
+  /** Scroll this section into view when needed. */
+  async scrollSectionIntoView() {
+    await this.scrollIntoViewWhenNeeded(false);
+  }
+  async scrollIntoViewWhenNeeded(sectionToggled) {
+    var _a, _b, _c;
+    AccordionSection.scrollCandidate = undefined;
+    const bodyClientRect = (_a = this.sectionBody) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+    const headingClientRect = (_b = this.sectionHeading) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
+    if (!bodyClientRect || !headingClientRect || !this.accordionState) {
+      return;
+    }
+    const waitForAnimationBeforeScrolling = (state) => {
+      var _a;
+      const sectionBottomOffsetTop = this.host.offsetTop + headingClientRect.height + (this.open ? (_a = this.bodyHeight) !== null && _a !== void 0 ? _a : 0 : 0);
+      return (sectionToggled && (sectionBottomOffsetTop > document.documentElement.scrollHeight || state.allowMultipleOpen));
+    };
+    if (waitForAnimationBeforeScrolling(this.accordionState)) {
+      AccordionSection.scrollCandidate = this.host;
+      return;
+    }
+    // this y is relative to the top of the viewport.
+    const sectionBottomY = headingClientRect.top + headingClientRect.height + (this.open ? (_c = this.bodyHeight) !== null && _c !== void 0 ? _c : 0 : 0);
+    if (sectionBottomY > window.innerHeight) {
+      const expandedAccordionHeight = sectionBottomY - headingClientRect.top;
+      const shouldScrollToTopOfSection = expandedAccordionHeight > window.innerHeight;
+      window.scrollTo({
+        top: shouldScrollToTopOfSection
+          ? this.host.offsetTop
+          : this.host.offsetTop - (window.innerHeight - expandedAccordionHeight),
+        behavior: "smooth",
+      });
+    }
+    else if (headingClientRect.top < 0) {
+      window.scrollTo({
+        top: this.host.offsetTop,
+        behavior: "smooth",
+      });
+    }
   }
   async toggle(e) {
     var _a;
     e === null || e === void 0 ? void 0 : e.preventDefault();
-    return (_a = this.accordion) === null || _a === void 0 ? void 0 : _a.toggleSection(this.host, e);
+    (_a = this.accordion) === null || _a === void 0 ? void 0 : _a.toggleSection(this.host, e).then(async (isOpen) => {
+      if (isOpen) {
+        await this.scrollIntoViewWhenNeeded(true);
+      }
+    });
   }
   render() {
     var _a;
@@ -60,12 +110,14 @@ export class AccordionSection {
         ["dso-accordion-" + variant]: true,
         "dso-nested-accordion": this.hasNestedSection,
         "dso-accordion-reverse-align": reverseAlign !== null && reverseAlign !== void 0 ? reverseAlign : false,
-      }, hidden: !variant }, h(Handle, { heading: this.heading }, h(HandleElement, { handleUrl: this.handleUrl, onClick: async (event) => await this.toggle(event), open: this.open }, reverseAlign ? (h(Fragment, null, hasAddons && (h("div", { class: "dso-section-handle-addons" }, h(HandleIcon, { icon: this.icon }))), h("span", null, this.handleTitle), h("dso-icon", { class: "dso-section-handle-chevron", icon: "chevron-down" }))) : (h(Fragment, null, h("dso-icon", { class: "dso-section-handle-chevron", icon: "chevron-right" }), this.state && h("span", { class: "sr-only" }, stateMap[this.state]), h("span", null, this.handleTitle), hasAddons && (h("div", { class: "dso-section-handle-addons" }, this.status && h("span", { class: "dso-status" }, this.status), h(HandleIcon, { state: this.state, icon: this.icon, attachmentCount: this.attachmentCount }))))))), h("div", { class: { "dso-section-body": true, "dso-animate-ready": !!this.animeInstance }, ref: (element) => (this.sectionBody = element), "aria-hidden": this.open ? "false" : "true" }, h("div", { class: "dso-section-body-content" }, h("slot", null)))));
+      }, hidden: !variant }, h(Handle, { heading: this.heading, ref: (element) => (this.sectionHeading = element) }, h(HandleElement, { handleUrl: this.handleUrl, onClick: async (event) => await this.toggle(event), open: this.open }, reverseAlign ? (h(Fragment, null, hasAddons && (h("div", { class: "dso-section-handle-addons" }, h(HandleIcon, { icon: this.icon }))), h("span", null, this.handleTitle), h("dso-icon", { class: "dso-section-handle-chevron", icon: "chevron-down" }))) : (h(Fragment, null, h("dso-icon", { class: "dso-section-handle-chevron", icon: "chevron-right" }), this.state && h("span", { class: "sr-only" }, stateMap[this.state]), h("span", null, this.handleTitle), hasAddons && (h("div", { class: "dso-section-handle-addons" }, this.status && h("span", { class: "dso-status" }, this.status), h(HandleIcon, { state: this.state, icon: this.icon, attachmentCount: this.attachmentCount }))))))), h("div", { class: { "dso-section-body": true, "dso-animate-ready": !!this.animeInstance }, ref: (element) => (this.sectionBody = element), "aria-hidden": this.open ? "false" : "true" }, h("div", { class: "dso-section-body-content" }, h("slot", null)))));
   }
-  startAnimationResizeObserver() {
+  prepareAnimationResizeObserver() {
     this.resizeObserver = new ResizeObserver(debounce(([entry]) => {
-      if (this.bodyHeight !== entry.contentRect.height) {
-        this.bodyHeight = entry.contentRect.height;
+      // entry.contentRect does not include padding, so we use getBoundingClientRect.
+      const height = entry.target.getBoundingClientRect().height;
+      if (this.bodyHeight !== height) {
+        this.bodyHeight = height;
         this.instantiateAnimation();
       }
     }, 150));
@@ -78,6 +130,12 @@ export class AccordionSection {
       duration: 260,
       autoplay: false,
       direction: "normal",
+      changeComplete: async () => {
+        if (AccordionSection.scrollCandidate === this.host) {
+          AccordionSection.scrollCandidate = undefined;
+          await this.scrollSectionIntoView();
+        }
+      },
       begin: () => {
         if (this.sectionBody) {
           if (this.open) {
@@ -295,6 +353,31 @@ export class AccordionSection {
   static get methods() {
     return {
       "toggleSection": {
+        "complexType": {
+          "signature": "(scrollIntoView?: boolean) => Promise<void>",
+          "parameters": [{
+              "tags": [{
+                  "name": "param",
+                  "text": "scrollIntoView boolean - defaults to true"
+                }],
+              "text": "boolean - defaults to true"
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Toggle this section.",
+          "tags": [{
+              "name": "param",
+              "text": "scrollIntoView boolean - defaults to true"
+            }]
+        }
+      },
+      "scrollSectionIntoView": {
         "complexType": {
           "signature": "() => Promise<void>",
           "parameters": [],
@@ -306,7 +389,7 @@ export class AccordionSection {
           "return": "Promise<void>"
         },
         "docs": {
-          "text": "Toggle this section",
+          "text": "Scroll this section into view when needed.",
           "tags": []
         }
       }

package/dist/collection/components/accordion/components/handles/heading.handle.js

@@ -1,14 +1,14 @@
 import { h } from "@stencil/core";
-export const Handle = ({ heading }, children) => {
+export const Handle = ({ heading, ref }, children) => {
   switch (heading) {
     default:
     case "h2":
-      return h("h2", { class: "dso-section-handle" }, children);
+      return (h("h2", { ref: ref, class: "dso-section-handle" }, children));
     case "h3":
-      return h("h3", { class: "dso-section-handle" }, children);
+      return (h("h3", { ref: ref, class: "dso-section-handle" }, children));
     case "h4":
-      return h("h4", { class: "dso-section-handle" }, children);
+      return (h("h4", { ref: ref, class: "dso-section-handle" }, children));
     case "h5":
-      return h("h5", { class: "dso-section-handle" }, children);
+      return (h("h5", { ref: ref, class: "dso-section-handle" }, children));
   }
 };