@itcenteratunihelsinki/huds-lib 0.8.72 → 0.8.74

package/components/accordion-container.js

@@ -1,50 +1,49 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { p as proxyCustomElement, H, h, c as Host } from './index3.js';
 import { d as defineCustomElement$1 } from './hy-box2.js';
 
 const accordionContainerCss = ":root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow-light:#f9a21a;--additional-yellow:#c47f1b;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}:host{display:block}.hy-accordion-container{width:100%}";
+const HyAccordionContainerStyle0 = accordionContainerCss;
 
-const AccordionContainer = /*@__PURE__*/ proxyCustomElement(class AccordionContainer extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.accordionid = undefined;
-  }
-  /*
-  * data-allow-toggle
-    Allow for each toggle to both open and close individually
-
-  data-allow-multiple
-    Allow for multiple accordion sections to be expanded at the same time.
-    Assumes data-allow-toggle otherwise you would not be able to close any of the accordions
-  */
-  render() {
-    const classAttributes = ["hy-accordion-container", "js-hy-accordion"];
-    const id = this.accordionid.toLowerCase().replace(/\W/g, "-");
-    return (h(Host, null, h("div", { id: id, class: classAttributes.join(" "), "data-allow-multiple": "true", "data-allow-toggle": "true" }, h("slot", null)), h("hy-box", { mb: "1.75, 1.75, 2, 2.5" })));
-  }
-  static get style() { return accordionContainerCss; }
+const AccordionContainer = /*@__PURE__*/ proxyCustomElement(class AccordionContainer extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.accordionid = undefined;
+    }
+    /*
+    * data-allow-toggle
+      Allow for each toggle to both open and close individually
+  
+    data-allow-multiple
+      Allow for multiple accordion sections to be expanded at the same time.
+      Assumes data-allow-toggle otherwise you would not be able to close any of the accordions
+    */
+    render() {
+        const classAttributes = ["hy-accordion-container", "js-hy-accordion"];
+        const id = this.accordionid.toLowerCase().replace(/\W/g, "-");
+        return (h(Host, { key: 'cf18d25850bff7a73c954b5dd2468cade6a65e04' }, h("div", { key: '9936b10c4097a482ccd29966fd0a3c1d89a44bfd', id: id, class: classAttributes.join(" "), "data-allow-multiple": "true", "data-allow-toggle": "true" }, h("slot", { key: '3ac4cd288bcb33f976336a295cae8e3a0616531c' })), h("hy-box", { key: '68cddc4af8be48fc63b39d55edd9eb4a1072aed5', mb: "1.75, 1.75, 2, 2.5" })));
+    }
+    static get style() { return HyAccordionContainerStyle0; }
 }, [4, "hy-accordion-container", {
-    "accordionid": [1]
-  }]);
+        "accordionid": [1]
+    }]);
 function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["hy-accordion-container", "hy-box"];
-  components.forEach(tagName => { switch (tagName) {
-    case "hy-accordion-container":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, AccordionContainer);
-      }
-      break;
-    case "hy-box":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$1();
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["hy-accordion-container", "hy-box"];
+    components.forEach(tagName => { switch (tagName) {
+        case "hy-accordion-container":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, AccordionContainer);
+            }
+            break;
+        case "hy-box":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
 }
 
 export { AccordionContainer as A, defineCustomElement as d };
-
-//# sourceMappingURL=accordion-container.js.map

package/components/accordion-item.js

@@ -1,241 +1,240 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { p as proxyCustomElement, H, h } from './index3.js';
 import { A as AccordionVariants } from './utils.js';
 import { d as defineCustomElement$1 } from './icon.js';
 
 const accordionItemCss = ":root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow-light:#f9a21a;--additional-yellow:#c47f1b;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}:host{display:block}.hy-accordion__item{margin-bottom:12px}.hy-accordion__item__is-open{border:1px solid var(--grayscale-dark)}.hy-accordion__item__is-open .hy-accordion--heading{margin:0 auto}.hy-accordion__item__is-open .hy-accordion--heading .hy-accordion--heading__icon{-webkit-transform:rotateX(180deg);transform:rotateX(180deg)}.hy-accordion__item.mini{margin-bottom:1rem;margin-top:1rem}.hy-accordion__item__is-open.mini{margin-bottom:0;margin-top:0}.hy-accordion__item__is-open.mini .hy-accordion__item--container{border-bottom:1px solid var(--grayscale-medium-dark);border-top:1px solid var(--grayscale-medium-dark);padding-top:16px;padding-bottom:32px;margin-top:-1px;-webkit-transition:padding 0.5s ease-in-out;transition:padding 0.5s ease-in-out}@media (min-width: 30rem){.hy-accordion__item__is-open.mini .hy-accordion__item--container{padding-top:28px;padding-bottom:30px}}@media (min-width: 60rem){.hy-accordion__item__is-open.mini .hy-accordion__item--container{padding-top:32px;padding-bottom:40px}}.hy-accordion__item.hy-accordion__item__is-open.mini{background-color:var(--grayscale-white);border:none;-webkit-box-shadow:0 -10px 10px -10px rgba(0, 49, 70, 0.05);box-shadow:0 -10px 10px -10px rgba(0, 49, 70, 0.05)}.hy-accordion--heading{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;letter-spacing:-0.69px;line-height:28px;margin:0 auto;-webkit-transition:all 0.25s ease-in-out;transition:all 0.25s ease-in-out;width:100%}.hy-accordion--heading .hy-accordion__link{text-decoration:none}.hy-accordion--heading .hy-accordion__link:hover{text-decoration:none}.hy-accordion--heading .hy-accordion__button{font-size:1.125rem;line-height:22px;font-weight:700;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;background-color:var(--grayscale-background-box);border:none;color:var(--brand-main-nearly-black);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;font-family:var(--main-font-family);height:100%;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;letter-spacing:-0.45px;padding:13px 20px 13px 16px;-webkit-transition:all 0.35s ease-in;transition:all 0.35s ease-in;width:100%}.hy-accordion--heading .hy-accordion__button:hover{cursor:pointer}@media (min-width: 30rem){.hy-accordion--heading .hy-accordion__button{padding:1rem 2rem 1rem 1.25rem}}@media (min-width: 1601px){.hy-accordion--heading .hy-accordion__button{font-size:1.25rem;line-height:24px;letter-spacing:-0.5px}}@media (min-width: 75.0625rem){.hy-accordion--heading .hy-accordion__button--large{font-size:1.25rem;line-height:24px;letter-spacing:-0.5px}}@media (min-width: 75.0625rem){.hy-accordion--heading .hy-accordion__button--large .hy-accordion--heading__icon svg{height:20px;width:20px}}.hy-accordion--heading .hy-accordion__button span{text-align:left}.hy-accordion--heading .hy-accordion__button[aria-expanded=true]{background:none;position:relative}.hy-accordion--heading .hy-accordion__button[aria-expanded=true]:after{background-color:var(--grayscale-medium-dark);bottom:0;content:\"\";height:1px;left:16px;position:absolute;right:20px}.hy-accordion--heading .hy-accordion__button *{pointer-events:none}.hy-accordion--heading .hy-accordion--heading__icon{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;height:22px;margin-right:8px;z-index:0}.hy-accordion--heading .hy-accordion--heading__icon svg{fill:var(--brand-main)}@media (min-width: 30rem){.hy-accordion--heading .hy-accordion--heading__icon svg{height:18px;width:18px}}@media (min-width: 1601px){.hy-accordion--heading .hy-accordion--heading__icon svg{height:20px;width:20px}}.hy-accordion--heading.mini .hy-accordion__button{font-size:1.125rem;line-height:22px;background-color:var(--grayscale-white);color:var(--link-blue);letter-spacing:-0.56px;padding:0}@media (min-width: 30rem){.hy-accordion--heading.mini .hy-accordion__button{font-size:1.375rem;line-height:28px;letter-spacing:-0.69px;padding:0}}.hy-accordion--heading.mini .hy-accordion__button[aria-expanded=true]{color:var(--grayscale-black);margin-bottom:20px}@media (min-width: 30rem){.hy-accordion--heading.mini .hy-accordion__button[aria-expanded=true]{margin-bottom:28px}}@media (min-width: 60rem){.hy-accordion--heading.mini .hy-accordion__button[aria-expanded=true]{margin-bottom:32px}}.hy-accordion--heading.mini .hy-accordion--heading__icon{margin-right:0.5rem;z-index:0}@media (min-width: 30rem){.hy-accordion--heading.mini .hy-accordion--heading__icon{margin-right:10px}}.hy-accordion--heading.mini .hy-accordion--heading__icon svg{fill:var(--brand-main-light);height:14px;width:14px}@media (min-width: 30rem){.hy-accordion--heading.mini .hy-accordion--heading__icon svg{height:16px;width:16px}}.hy-accordion__content{display:block;height:0;padding:0;overflow:hidden;-webkit-transition:all 0.25s ease-in-out;transition:all 0.25s ease-in-out}.hy-accordion__content--inner-wrapper{display:block;padding:16px 12px}@media (min-width: 30rem){.hy-accordion__content--inner-wrapper{padding:15px 16px}}@media (min-width: 60rem){.hy-accordion__content--inner-wrapper{padding:16px}}@media (min-width: 75.0625rem){.hy-accordion__content--inner-wrapper--large{padding:24px 20px}}@media (min-width: 1601px){.hy-accordion__content--inner-wrapper{padding:24px 20px}}.hy-accordion__content--inner-wrapper--mini{padding:0}.hy-accordion__content--inner-wrapper--mini .course-heading h4{padding-top:0 !important}";
+const HyAccordionItemStyle0 = accordionItemCss;
 
 let keys = {
-  enter: "Enter",
-  tab: "Tab",
-  pageUp: "PageUp",
-  pageDown: "PageDown",
-  arrowUp: "ArrowUp",
-  arrowDown: "ArrowDown",
-  home: "Home",
-  end: "End", //35
+    enter: "Enter", //13
+    tab: "Tab", //9
+    pageUp: "PageUp", //33
+    pageDown: "PageDown", //34
+    arrowUp: "ArrowUp", // 38
+    arrowDown: "ArrowDown", //40
+    home: "Home", //36
+    end: "End", //35
 };
-const AccordionItem = /*@__PURE__*/ proxyCustomElement(class AccordionItem extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.accordiontitle = undefined;
-    this.variant = AccordionVariants.default;
-    this.headerstyle = "common";
-    this.showOpen = false;
-    this.ready = false;
-  }
-  componentDidLoad() {
-    this.ready = true;
-    let hyMainDiv = this.el.closest(".hy-main");
-    if (hyMainDiv) {
-      if (!hyMainDiv.classList.contains("with-sidebar")) {
-        this.headerstyle = "large";
-      }
+const AccordionItem = /*@__PURE__*/ proxyCustomElement(class AccordionItem extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.accordiontitle = undefined;
+        this.variant = AccordionVariants.default;
+        this.headerstyle = "common";
+        this.showOpen = false;
+        this.ready = false;
     }
-  }
-  componentDidRender() {
-    if (window.location.hash) {
-      this.expandPanelByAnchor(window.location.hash);
-    }
-    document.querySelectorAll(".hy-accordion__content").forEach(function (accordion) {
-      let showOpen = accordion.classList.contains("open");
-      let element = accordion;
-      if (showOpen) {
-        element.style.display = "block";
-        element.style.height = element.scrollHeight + "px";
-      }
-      else {
-        element.style.height = 0 + "px";
-        element.style.display = "none";
-      }
-    });
-  }
-  onHashChange() {
-    if (window.location.hash) {
-      this.expandPanelByAnchor(window.location.hash);
-    }
-  }
-  handleKeyDown(event) {
-    const containerId = this.el.parentElement.id;
-    let accordion = document.querySelectorAll(`#${containerId}`)[0];
-    const triggers = Array.prototype.slice.call(accordion.querySelectorAll(".hy-accordion__button"));
-    let target = event.target;
-    const key = event.code;
-    const ctrlModifier = event.ctrlKey && [keys.pageDown, keys.pageUp].includes(key); //key.match(/33|34/);
-    if (target.classList.contains("hy-accordion__button")) {
-      // Up/ Down arrow and Control + Page Up/ Page Down keyboard operations
-      if ([keys.arrowDown, keys.arrowUp].includes(key) || ctrlModifier) {
-        const index = triggers.indexOf(target);
-        const direction = [keys.arrowDown, keys.pageDown].includes(key) ? 1 : -1;
-        const length = triggers.length;
-        const newIndex = (index + length + direction) % length;
-        triggers[newIndex].focus();
-        event.preventDefault();
-      }
-      else if ([keys.home, keys.end].includes(key)) {
-        switch (key) {
-          // Go to first accordion
-          case keys.home:
-            triggers[0].focus();
-            break;
-          // Go to last accordion
-          case keys.end:
-            triggers[triggers.length - 1].focus();
-            break;
+    componentDidLoad() {
+        this.ready = true;
+        let hyMainDiv = this.el.closest(".hy-main");
+        if (hyMainDiv) {
+            if (!hyMainDiv.classList.contains("with-sidebar")) {
+                this.headerstyle = "large";
+            }
         }
-        event.preventDefault();
-      }
     }
-  }
-  handleClick(event) {
-    const target = event.target;
-    const accordionContainer = this.el.parentElement;
-    const allowMultiple = accordionContainer.hasAttribute("data-allow-multiple");
-    const allowToggle = allowMultiple ? allowMultiple : accordionContainer.hasAttribute("data-allow-toggle");
-    if (target && target.tagName.toLowerCase() === "button") {
-      let targetParent = target.closest(".hy-accordion__item");
-      let targetContent = targetParent.getElementsByClassName("hy-accordion__content")[0];
-      const isExpanded = target.getAttribute("aria-expanded") === "true";
-      const activeButtonElement = accordionContainer.querySelector('[aria-expanded="true"]');
-      if (!allowMultiple && activeButtonElement && activeButtonElement !== target) {
-        activeButtonElement.setAttribute("aria-expanded", "false");
-        this.collapseSection(targetContent);
-        if (targetParent.classList.contains("hy-accordion__item__is-open")) {
-          targetParent.classList.remove("hy-accordion__item__is-open");
-        }
-        accordionContainer
-          .querySelector(`#${activeButtonElement.getAttribute("aria-controls")}`)
-          .setAttribute("aria-hidden", "true");
-        if (!allowToggle) {
-          activeButtonElement.removeAttribute("aria-disabled");
+    componentDidRender() {
+        if (window.location.hash) {
+            this.expandPanelByAnchor(window.location.hash);
         }
-      }
-      if (!isExpanded) {
-        this.expandSection(targetContent);
-        target.setAttribute("aria-expanded", "true");
-        targetParent.classList.add("hy-accordion__item__is-open");
-        accordionContainer
-          .querySelector(`#${target.getAttribute("aria-controls")}`)
-          .setAttribute("aria-hidden", "false");
-        if (!allowToggle) {
-          target.setAttribute("aria-disabled", "true");
+        document.querySelectorAll(".hy-accordion__content").forEach(function (accordion) {
+            let showOpen = accordion.classList.contains("open");
+            let element = accordion;
+            if (showOpen) {
+                element.style.display = "block";
+                element.style.height = element.scrollHeight + "px";
+            }
+            else {
+                element.style.height = 0 + "px";
+                element.style.display = "none";
+            }
+        });
+    }
+    onHashChange() {
+        if (window.location.hash) {
+            this.expandPanelByAnchor(window.location.hash);
         }
-      }
-      else if (allowToggle && isExpanded) {
-        target.setAttribute("aria-expanded", "false");
-        this.collapseSection(targetContent);
-        if (targetParent.classList.contains("hy-accordion__item__is-open")) {
-          targetParent.classList.remove("hy-accordion__item__is-open");
+    }
+    handleKeyDown(event) {
+        const containerId = this.el.parentElement.id;
+        let accordion = document.querySelectorAll(`#${containerId}`)[0];
+        const triggers = Array.prototype.slice.call(accordion.querySelectorAll(".hy-accordion__button"));
+        let target = event.target;
+        const key = event.code;
+        const ctrlModifier = event.ctrlKey && [keys.pageDown, keys.pageUp].includes(key); //key.match(/33|34/);
+        if (target.classList.contains("hy-accordion__button")) {
+            // Up/ Down arrow and Control + Page Up/ Page Down keyboard operations
+            if ([keys.arrowDown, keys.arrowUp].includes(key) || ctrlModifier) {
+                const index = triggers.indexOf(target);
+                const direction = [keys.arrowDown, keys.pageDown].includes(key) ? 1 : -1;
+                const length = triggers.length;
+                const newIndex = (index + length + direction) % length;
+                triggers[newIndex].focus();
+                event.preventDefault();
+            }
+            else if ([keys.home, keys.end].includes(key)) {
+                switch (key) {
+                    // Go to first accordion
+                    case keys.home:
+                        triggers[0].focus();
+                        break;
+                    // Go to last accordion
+                    case keys.end:
+                        triggers[triggers.length - 1].focus();
+                        break;
+                }
+                event.preventDefault();
+            }
         }
-        accordionContainer
-          .querySelector(`#${target.getAttribute("aria-controls")}`)
-          .setAttribute("aria-hidden", "true");
-      }
-      event.preventDefault();
-      event.stopImmediatePropagation();
     }
-  }
-  expandPanelByAnchor(anchor) {
-    setTimeout(() => {
-      if (anchor.length > 0) {
-        anchor = anchor.substr(1);
-        let target = document.querySelectorAll(`[id=${anchor}]`)[0];
-        if (target && target.classList.contains("hy-accordion__button")) {
-          let targetParent = target.closest(".hy-accordion__item");
-          let targetContent = targetParent.querySelectorAll(".hy-accordion__content")[0];
-          this.expandSection(targetContent);
-          target.setAttribute("aria-expanded", "true");
-          targetParent.classList.add("hy-accordion__item__is-open");
-          const targetElementRect = target.getBoundingClientRect();
-          window.scrollTo({ top: window.scrollY + targetElementRect.top - 200, behavior: "smooth" });
-          const containerId = targetParent.parentElement.parentElement.id;
-          if (containerId.length > 0) {
-            let accordion = document.querySelectorAll(`#${containerId}`)[0];
-            accordion.querySelector(`#${target.getAttribute("aria-controls")}`).setAttribute("aria-hidden", "false");
-          }
+    handleClick(event) {
+        const target = event.target;
+        const accordionContainer = this.el.parentElement;
+        const allowMultiple = accordionContainer.hasAttribute("data-allow-multiple");
+        const allowToggle = allowMultiple ? allowMultiple : accordionContainer.hasAttribute("data-allow-toggle");
+        if (target && target.tagName.toLowerCase() === "button") {
+            let targetParent = target.closest(".hy-accordion__item");
+            let targetContent = targetParent.getElementsByClassName("hy-accordion__content")[0];
+            const isExpanded = target.getAttribute("aria-expanded") === "true";
+            const activeButtonElement = accordionContainer.querySelector('[aria-expanded="true"]');
+            if (!allowMultiple && activeButtonElement && activeButtonElement !== target) {
+                activeButtonElement.setAttribute("aria-expanded", "false");
+                this.collapseSection(targetContent);
+                if (targetParent.classList.contains("hy-accordion__item__is-open")) {
+                    targetParent.classList.remove("hy-accordion__item__is-open");
+                }
+                accordionContainer
+                    .querySelector(`#${activeButtonElement.getAttribute("aria-controls")}`)
+                    .setAttribute("aria-hidden", "true");
+                if (!allowToggle) {
+                    activeButtonElement.removeAttribute("aria-disabled");
+                }
+            }
+            if (!isExpanded) {
+                this.expandSection(targetContent);
+                target.setAttribute("aria-expanded", "true");
+                targetParent.classList.add("hy-accordion__item__is-open");
+                accordionContainer
+                    .querySelector(`#${target.getAttribute("aria-controls")}`)
+                    .setAttribute("aria-hidden", "false");
+                if (!allowToggle) {
+                    target.setAttribute("aria-disabled", "true");
+                }
+            }
+            else if (allowToggle && isExpanded) {
+                target.setAttribute("aria-expanded", "false");
+                this.collapseSection(targetContent);
+                if (targetParent.classList.contains("hy-accordion__item__is-open")) {
+                    targetParent.classList.remove("hy-accordion__item__is-open");
+                }
+                accordionContainer
+                    .querySelector(`#${target.getAttribute("aria-controls")}`)
+                    .setAttribute("aria-hidden", "true");
+            }
+            event.preventDefault();
+            event.stopImmediatePropagation();
         }
-      }
-    }, 200);
-  }
-  collapseSection(element) {
-    element.style.height = 0 + "px";
-    element.setAttribute("data-collapsed", "true");
-    setTimeout(() => {
-      element.style.display = "none";
-    }, 250);
-  }
-  expandSection(element) {
-    element.style.display = "block";
-    element.style.height = element.scrollHeight + "px";
-    element.setAttribute("data-collapsed", "false");
-  }
-  render() {
-    const containerId = this.el.parentElement.id;
-    if (this.ready && containerId.length > 0) {
-      document.querySelectorAll(`#${containerId}`).forEach(function (accordion) {
-        if (accordion) {
-          accordion.querySelectorAll(".hy-accordion__button").forEach(function (trigger) {
-            trigger.addEventListener("focus", function () {
-              trigger.classList.add("focus");
-            });
-            trigger.addEventListener("blur", function () {
-              trigger.classList.remove("focus");
+    }
+    expandPanelByAnchor(anchor) {
+        setTimeout(() => {
+            if (anchor.length > 0) {
+                anchor = anchor.substr(1);
+                let target = document.querySelectorAll(`[id=${anchor}]`)[0];
+                if (target && target.classList.contains("hy-accordion__button")) {
+                    let targetParent = target.closest(".hy-accordion__item");
+                    let targetContent = targetParent.querySelectorAll(".hy-accordion__content")[0];
+                    this.expandSection(targetContent);
+                    target.setAttribute("aria-expanded", "true");
+                    targetParent.classList.add("hy-accordion__item__is-open");
+                    const targetElementRect = target.getBoundingClientRect();
+                    window.scrollTo({ top: window.scrollY + targetElementRect.top - 200, behavior: "smooth" });
+                    const containerId = targetParent.parentElement.parentElement.id;
+                    if (containerId.length > 0) {
+                        let accordion = document.querySelectorAll(`#${containerId}`)[0];
+                        accordion.querySelector(`#${target.getAttribute("aria-controls")}`).setAttribute("aria-hidden", "false");
+                    }
+                }
+            }
+        }, 200);
+    }
+    collapseSection(element) {
+        element.style.height = 0 + "px";
+        element.setAttribute("data-collapsed", "true");
+        setTimeout(() => {
+            element.style.display = "none";
+        }, 250);
+    }
+    expandSection(element) {
+        element.style.display = "block";
+        element.style.height = element.scrollHeight + "px";
+        element.setAttribute("data-collapsed", "false");
+    }
+    render() {
+        const containerId = this.el.parentElement.id;
+        if (this.ready && containerId.length > 0) {
+            document.querySelectorAll(`#${containerId}`).forEach(function (accordion) {
+                if (accordion) {
+                    accordion.querySelectorAll(".hy-accordion__button").forEach(function (trigger) {
+                        trigger.addEventListener("focus", function () {
+                            trigger.classList.add("focus");
+                        });
+                        trigger.addEventListener("blur", function () {
+                            trigger.classList.remove("focus");
+                        });
+                    });
+                }
             });
-          });
         }
-      });
+        const classIsOpen = this.showOpen ? "hy-accordion__item__is-open" : "";
+        const classContentIsOpen = this.showOpen ? "open" : "";
+        const classAttributes = ["hy-accordion__item", this.variant, classIsOpen].join(" ");
+        const classInnerWrapper = ["hy-accordion__item--container", this.variant].join(" ");
+        const classHeadingAttributes = ["hy-accordion--heading", this.variant].join(" ");
+        const classContentAttributes = [
+            "hy-accordion__content",
+            `hy-accordion__content--${this.variant}`,
+            this.variant,
+            classContentIsOpen,
+        ].join(" ");
+        const classContentInnerWrapper = [
+            "hy-accordion__content--inner-wrapper",
+            `hy-accordion__content--inner-wrapper--${this.headerstyle}`,
+            `hy-accordion__content--inner-wrapper--${this.variant}`,
+        ].join(" ");
+        const titleAsId = this.accordiontitle.toLowerCase().replace(/\W/g, "-");
+        const accordionItemHref = "#" + titleAsId + "--title";
+        const ariaExpanded = this.showOpen ? "true" : "false";
+        const ariaHidden = this.showOpen ? "false" : "true";
+        const dataCollapsed = this.showOpen ? "false" : "true";
+        return (h("div", { key: '507abb2a7d6aa29f2980524e94f2f18e6b6e08ec', class: classAttributes }, h("div", { key: '87336553ef852fd594050d4de3298f904e71d5c1', class: classInnerWrapper }, h("h3", { key: '84da70a9e2902851046c6079fb0ebbd11d856bfc', class: classHeadingAttributes }, h("a", { key: '3a9530633be1c6d127bd9c15d081d19e8f26fb6a', href: accordionItemHref, class: "hy-accordion__link", tabindex: "-1" }, h("button", { key: '378c62e3b67330c507f4bc6a2a9e1728fedcea33', "aria-expanded": ariaExpanded, "aria-controls": `${titleAsId}--content`, class: `hy-accordion__button hy-accordion__button--${this.headerstyle}`, id: `${titleAsId}--title` }, h("span", { key: 'e37e74995e1afe6b45faf0bcae6f8e765f6c60fd', class: "hy-accordion--heading__icon" }, h("hy-icon", { key: '620d28c44285cd806b64cabbba8245d7ec24e7af', icon: "hy-icon-caret-down", size: 16 })), h("span", { key: '6f8dd1038151384d7e0077ac174aff1eb509a530' }, this.accordiontitle)))), h("div", { key: '1c36473eae3a8e99c89a474039c786d3169cbc41', "aria-labelledBy": `${titleAsId}--title`, class: classContentAttributes, id: `${titleAsId}--content`, role: "region", "aria-hidden": ariaHidden, "data-collapsed": dataCollapsed, style: { display: "none" } }, h("div", { key: '2371237420458cc3b34dca567fd2e42610318fe1', class: classContentInnerWrapper }, h("slot", { key: '28847ba8e2964c20384e741bbe21272ee0645d01' }))))));
     }
-    const classIsOpen = this.showOpen ? "hy-accordion__item__is-open" : "";
-    const classContentIsOpen = this.showOpen ? "open" : "";
-    const classAttributes = ["hy-accordion__item", this.variant, classIsOpen].join(" ");
-    const classInnerWrapper = ["hy-accordion__item--container", this.variant].join(" ");
-    const classHeadingAttributes = ["hy-accordion--heading", this.variant].join(" ");
-    const classContentAttributes = [
-      "hy-accordion__content",
-      `hy-accordion__content--${this.variant}`,
-      this.variant,
-      classContentIsOpen,
-    ].join(" ");
-    const classContentInnerWrapper = [
-      "hy-accordion__content--inner-wrapper",
-      `hy-accordion__content--inner-wrapper--${this.headerstyle}`,
-      `hy-accordion__content--inner-wrapper--${this.variant}`,
-    ].join(" ");
-    const titleAsId = this.accordiontitle.toLowerCase().replace(/\W/g, "-");
-    const accordionItemHref = "#" + titleAsId + "--title";
-    const ariaExpanded = this.showOpen ? "true" : "false";
-    const ariaHidden = this.showOpen ? "false" : "true";
-    const dataCollapsed = this.showOpen ? "false" : "true";
-    return (h("div", { class: classAttributes }, h("div", { class: classInnerWrapper }, h("h3", { class: classHeadingAttributes }, h("a", { href: accordionItemHref, class: "hy-accordion__link", tabindex: "-1" }, h("button", { "aria-expanded": ariaExpanded, "aria-controls": `${titleAsId}--content`, class: `hy-accordion__button hy-accordion__button--${this.headerstyle}`, id: `${titleAsId}--title` }, h("span", { class: "hy-accordion--heading__icon" }, h("hy-icon", { icon: "hy-icon-caret-down", size: 16 })), h("span", null, this.accordiontitle)))), h("div", { "aria-labelledBy": `${titleAsId}--title`, class: classContentAttributes, id: `${titleAsId}--content`, role: "region", "aria-hidden": ariaHidden, "data-collapsed": dataCollapsed, style: { display: "none" } }, h("div", { class: classContentInnerWrapper }, h("slot", null))))));
-  }
-  get el() { return this; }
-  static get style() { return accordionItemCss; }
+    get el() { return this; }
+    static get style() { return HyAccordionItemStyle0; }
 }, [4, "hy-accordion-item", {
-    "accordiontitle": [1],
-    "variant": [1],
-    "headerstyle": [1],
-    "showOpen": [4, "show-open"],
-    "ready": [32]
-  }, [[8, "hashchange", "onHashChange"], [0, "keydown", "handleKeyDown"], [0, "click", "handleClick"]]]);
+        "accordiontitle": [1],
+        "variant": [1],
+        "headerstyle": [1],
+        "showOpen": [4, "show-open"],
+        "ready": [32]
+    }, [[8, "hashchange", "onHashChange"], [0, "keydown", "handleKeyDown"], [0, "click", "handleClick"]]]);
 function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["hy-accordion-item", "hy-icon"];
-  components.forEach(tagName => { switch (tagName) {
-    case "hy-accordion-item":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, AccordionItem);
-      }
-      break;
-    case "hy-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$1();
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["hy-accordion-item", "hy-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "hy-accordion-item":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, AccordionItem);
+            }
+            break;
+        case "hy-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
 }
 
 export { AccordionItem as A, defineCustomElement as d };
-
-//# sourceMappingURL=accordion-item.js.map