@swisspost/design-system-components 9.0.0-next.3 → 9.0.0-next.5

package/dist/cjs/{post-popovercontainer-6a25713a.js → post-megadropdown-trigger-da912fed.js}

@@ -1,7 +1,148 @@
 'use strict';
 
 const index = require('./index-e1f32cce.js');
-const _package = require('./package-ef26e62c.js');
+const _package = require('./package-53892d3d.js');
+const index$1 = require('./index-824d2b71.js');
+const checkNonEmpty = require('./check-non-empty-eeaa8f77.js');
+const checkType = require('./check-type-64af82a9.js');
+
+const PostClosebutton = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        return (index.h(index.Host, { key: 'b7e24245bf8319049c57737d754f566abf70b2ff', "data-version": _package.version }, index.h("button", { key: 'ab26b009632b4050d45eafc4dcab0e8ede55f943', class: "btn btn-icon-close" }, index.h("post-icon", { key: 'fa8da29f6f0795c3f0128c008e2fd8caee272fe5', "aria-hidden": "true", name: "2043" }), index.h("span", { key: 'f55941d6449a08911a2432213cf2f4c2b3f961aa', class: "visually-hidden" }, index.h("slot", { key: '172454f7bbb2fa54f245137c49d4bde0527a1308' })))));
+    }
+    get host() { return index.getElement(this); }
+};
+
+const postIconCss = ":host{display:inline-block;width:1em;height:1em;vertical-align:-0.15em}span{display:block;width:100%;height:100%;fill:currentColor;forced-color-adjust:preserve-parent-color;background-color:currentColor;-webkit-mask-position:center center;mask-position:center center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100%;mask-size:100%}:host([flip-h]:not([flip-h=false])){scale:-1 1}:host([flip-v]:not([flip-v=false])){scale:1 -1}:host([flip-h][flip-v]:not([flip-h=false],[flip-v=false])){scale:-1}:host([animation]){transform-origin:center}:host([animation=cylon]){animation:icon-animation-cylon .75s ease-in-out infinite alternate}:host([animation=cylon-vertical]){animation:icon-animation-cylon-vertical .75s ease-in-out infinite alternate}:host([animation=spin]){animation:icon-animation-spin 2s linear infinite normal}:host([animation=spin-reverse]){animation:icon-animation-spin 2s linear infinite reverse}:host([animation=fade]){animation:icon-animation-fade .75s ease-in-out infinite alternate}:host([animation=throb]){animation:icon-animation-throb .75s ease-in-out infinite alternate}@keyframes icon-animation-cylon{from{transform:translateX(-25%)}to{transform:translateX(25%)}}@keyframes icon-animation-cylon-vertical{from{transform:translateY(25%)}to{transform:translateY(-25%)}}@keyframes icon-animation-fade{from{opacity:.1}to{opacity:1}}@keyframes icon-animation-spin{from{transform:rotate(0deg)}to{transform:rotate(359deg)}}@keyframes icon-animation-throb{from{opacity:.5;transform:scale(0.5)}to{opacity:1;transform:scale(1)}}";
+const PostIconStyle0 = postIconCss;
+
+const CDN_URL = 'https://unpkg.com/@swisspost/design-system-icons/public/post-icons';
+const ANIMATION_NAMES = [
+    'cylon',
+    'cylon-vertical',
+    'spin',
+    'spin-reverse',
+    'fade',
+    'throb',
+];
+const ANIMATION_KEYS = [...ANIMATION_NAMES];
+const PostIcon = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.svgStyles = undefined;
+        this.svgOutput = undefined;
+        this.animation = null;
+        this.base = null;
+        this.flipH = false;
+        this.flipV = false;
+        this.name = undefined;
+        this.rotate = null;
+        this.scale = null;
+    }
+    validateAnimation(newValue = this.animation) {
+        if (newValue !== undefined)
+            index$1.checkEmptyOrOneOf(newValue, ANIMATION_KEYS, `The post-icon "animation" prop requires one of the following values: ${ANIMATION_KEYS.join(', ')}.`);
+    }
+    validateBase(newValue = this.base) {
+        index$1.checkEmptyOrType(newValue, 'string', 'The post-icon "base" prop should be a string.');
+    }
+    validateFlipH(newValue = this.flipH) {
+        index$1.checkEmptyOrType(newValue, 'boolean', 'The post-icon "flipH" prop should be a boolean.');
+    }
+    validateFlipV(newValue = this.flipV) {
+        index$1.checkEmptyOrType(newValue, 'boolean', 'The post-icon "flipV" prop should be a boolean.');
+    }
+    validateName(newValue = this.name) {
+        checkNonEmpty.checkNonEmpty(newValue, 'The post-icon "name" prop is required!.');
+        checkType.checkType(newValue, 'string', 'The post-icon "name" prop should be a string.');
+    }
+    validateRotate(newValue = this.rotate) {
+        index$1.checkEmptyOrType(newValue, 'number', 'The post-icon "rotate" prop should be a number.');
+    }
+    validateScale(newValue = this.scale) {
+        index$1.checkEmptyOrType(newValue, 'number', 'The post-icon "scale" prop should be a number.');
+    }
+    componentDidLoad() {
+        this.validateBase();
+        this.validateName();
+        this.validateFlipH();
+        this.validateFlipV();
+        this.validateScale();
+        this.validateRotate();
+        this.validateAnimation();
+    }
+    componentWillRender() {
+        this.setPath();
+    }
+    setPath() {
+        var _a, _b, _c, _d;
+        // Construct icon path from different possible sources
+        const metaBase = (_b = (_a = document.head
+            .querySelector('meta[name="design-system-settings"][data-post-icon-base]')) === null || _a === void 0 ? void 0 : _a.getAttribute('data-post-icon-base')) !== null && _b !== void 0 ? _b : null;
+        const fileBase = `${(_d = (_c = this.base) !== null && _c !== void 0 ? _c : metaBase) !== null && _d !== void 0 ? _d : CDN_URL}/`.replace(/\/\/$/, '/');
+        const fileName = `${this.name}.svg`;
+        const filePath = `${fileBase}${fileName}`;
+        this.path = new URL(filePath, window.location.origin).toString();
+    }
+    render() {
+        // create inline styles for some properties
+        const svgStyles = Object.entries({
+            '-webkit-mask-image': `url('${this.path}')`,
+            'mask-image': `url('${this.path}')`,
+            'transform': (this.scale && !isNaN(Number(this.scale)) ? 'scale(' + this.scale + ')' : '') +
+                (this.rotate && !isNaN(Number(this.rotate)) ? ' rotate(' + this.rotate + 'deg)' : ''),
+        })
+            .filter(([_key, value]) => value !== null)
+            .reduce((styles, [key, value]) => Object.assign(styles, { [key]: value }), {});
+        return (index.h(index.Host, { key: '86c61ac92270e1b46ef63e2bb0ff4683a16ca794', "data-version": _package.version }, index.h("span", { key: 'ad856363b96d303912c9085d9d45cb911cbedfc6', style: svgStyles })));
+    }
+    get host() { return index.getElement(this); }
+    static get watchers() { return {
+        "animation": ["validateAnimation"],
+        "base": ["validateBase"],
+        "flipH": ["validateFlipH"],
+        "flipV": ["validateFlipV"],
+        "name": ["validateName"],
+        "rotate": ["validateRotate"],
+        "scale": ["validateScale"]
+    }; }
+};
+PostIcon.style = PostIconStyle0;
+
+const postLogoCss = ":host,.logo{display:inline-block}:host,:host .logo>svg,.logo,.logo .logo>svg{height:100%}.description{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}";
+const PostLogoStyle0 = postLogoCss;
+
+const PostLogo = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.url = undefined;
+    }
+    validateUrl() {
+        index$1.checkEmptyOrUrl(this.url, 'The "url" property of the post-logo is invalid');
+    }
+    componentDidLoad() {
+        this.validateUrl();
+        this.checkDescription();
+    }
+    checkDescription() {
+        if (!this.host.textContent) {
+            console.warn('Be sure to add descriptive text in the post-logo to ensure good accessibility of the component.');
+        }
+    }
+    render() {
+        const logoLink = this.url && (typeof this.url === 'string' ? this.url : this.url.href);
+        const LogoTag = logoLink ? 'a' : 'span';
+        return (index.h(index.Host, { key: '9f23dca4f568ecbcf3d90387b2a9cb4fa1e85a98', "data-version": _package.version, slot: "post-logo" }, index.h(LogoTag, Object.assign({ key: '1b303363d3a4a829d4ab4b38bc40cbd3107b55e9', class: "logo" }, (logoLink ? { href: logoLink } : {})), index.h("span", { key: 'de29d53c4bb663053092b905d32f6597bd9a00d5', class: "description" }, index.h("slot", { key: 'bdfc96e3d9cb9384a61fa8af91c12a4b119f2f3b', onSlotchange: () => this.checkDescription() })), index.h("svg", { key: 'f2d1e0803c7f2f3a7c425dd5ebd57346c8d967e6', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 72 72", "aria-hidden": "true" }, index.h("g", { key: '554a2d4edb796b01969555eccb3f0f34e74f0121', id: "Logo" }, index.h("rect", { key: '7596d8684037b02d015e48539bddda3f44dfcadf', fill: "#ffcc00", x: "0", y: "0", width: "72", height: "72" }), index.h("polygon", { key: 'f79c5e941f7d87de1484a934565cf363b49914d5', fill: "#ff0000", points: "34,32.3 34,19 19.7,19 19.7,29.1 10,29.1 10,42.9 19.7,42.9 19.7,53 34,53 34,39.7 30.6,39.7 30.6,49.8 23.1,49.8 23.1,39.7 13.4,39.7 13.4,32.3 23.1,32.3 23.1,22.2 30.6,22.2 30.6,32.3" }), index.h("path", { key: '7c5babc1703e4f74c08b78916a86c553f8cc6edf', d: "M53.56234,31.10526c0,2.41272-1.99154,4.29475-4.51723,4.29475H45.2v-8.3h3.84511C51.66802,27.1,53.56234,28.78889,53.56234,31.10526z M50.69666,19H36v34h9.2V42.9h5.49666c6.75131,0,11.9971-5.15137,11.9971-11.8057C62.69376,24.39136,57.35099,19,50.69666,19z" }))))));
+    }
+    get host() { return index.getElement(this); }
+    static get watchers() { return {
+        "url": ["validateUrl"]
+    }; }
+};
+PostLogo.style = PostLogoStyle0;
 
 /**
  * Custom positioning reference element.
@@ -1197,7 +1338,7 @@ function isOverflowElement(element) {
     overflowX,
     overflowY,
     display
-  } = getComputedStyle(element);
+  } = getComputedStyle$1(element);
   return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !['inline', 'contents'].includes(display);
 }
 function isTableElement(element) {
@@ -1214,7 +1355,7 @@ function isTopLayer(element) {
 }
 function isContainingBlock(elementOrCss) {
   const webkit = isWebKit();
-  const css = isElement(elementOrCss) ? getComputedStyle(elementOrCss) : elementOrCss;
+  const css = isElement(elementOrCss) ? getComputedStyle$1(elementOrCss) : elementOrCss;
 
   // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
   return css.transform !== 'none' || css.perspective !== 'none' || (css.containerType ? css.containerType !== 'normal' : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== 'none' : false) || !webkit && (css.filter ? css.filter !== 'none' : false) || ['transform', 'perspective', 'filter'].some(value => (css.willChange || '').includes(value)) || ['paint', 'layout', 'strict', 'content'].some(value => (css.contain || '').includes(value));
@@ -1238,7 +1379,7 @@ function isWebKit() {
 function isLastTraversableNode(node) {
   return ['html', 'body', '#document'].includes(getNodeName(node));
 }
-function getComputedStyle(element) {
+function getComputedStyle$1(element) {
   return getWindow(element).getComputedStyle(element);
 }
 function getNodeScroll(element) {
@@ -1296,7 +1437,7 @@ function getOverflowAncestors(node, list, traverseIframes) {
 }
 
 function getCssDimensions(element) {
-  const css = getComputedStyle(element);
+  const css = getComputedStyle$1(element);
   // In testing environments, the `width` and `height` properties are empty
   // strings for SVG elements, returning NaN. Fallback to `0` in this case.
   let width = parseFloat(css.width) || 0;
@@ -1401,7 +1542,7 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
     while (currentIFrame && offsetParent && offsetWin !== currentWin) {
       const iframeScale = getScale(currentIFrame);
       const iframeRect = currentIFrame.getBoundingClientRect();
-      const css = getComputedStyle(currentIFrame);
+      const css = getComputedStyle$1(currentIFrame);
       const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x;
       const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y;
       x *= iframeScale.x;
@@ -1481,7 +1622,7 @@ function getDocumentRect(element) {
   const height = max(html.scrollHeight, html.clientHeight, body.scrollHeight, body.clientHeight);
   let x = -scroll.scrollLeft + getWindowScrollBarX(element);
   const y = -scroll.scrollTop;
-  if (getComputedStyle(body).direction === 'rtl') {
+  if (getComputedStyle$1(body).direction === 'rtl') {
     x += max(html.clientWidth, body.clientWidth) - width;
   }
   return {
@@ -1557,7 +1698,7 @@ function hasFixedPositionAncestor(element, stopNode) {
   if (parentNode === stopNode || !isElement(parentNode) || isLastTraversableNode(parentNode)) {
     return false;
   }
-  return getComputedStyle(parentNode).position === 'fixed' || hasFixedPositionAncestor(parentNode, stopNode);
+  return getComputedStyle$1(parentNode).position === 'fixed' || hasFixedPositionAncestor(parentNode, stopNode);
 }
 
 // A "clipping ancestor" is an `overflow` element with the characteristic of
@@ -1570,12 +1711,12 @@ function getClippingElementAncestors(element, cache) {
   }
   let result = getOverflowAncestors(element, [], false).filter(el => isElement(el) && getNodeName(el) !== 'body');
   let currentContainingBlockComputedStyle = null;
-  const elementIsFixed = getComputedStyle(element).position === 'fixed';
+  const elementIsFixed = getComputedStyle$1(element).position === 'fixed';
   let currentNode = elementIsFixed ? getParentNode(element) : element;
 
   // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
   while (isElement(currentNode) && !isLastTraversableNode(currentNode)) {
-    const computedStyle = getComputedStyle(currentNode);
+    const computedStyle = getComputedStyle$1(currentNode);
     const currentNodeIsContaining = isContainingBlock(currentNode);
     if (!currentNodeIsContaining && computedStyle.position === 'fixed') {
       currentContainingBlockComputedStyle = null;
@@ -1666,11 +1807,11 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
 }
 
 function isStaticPositioned(element) {
-  return getComputedStyle(element).position === 'static';
+  return getComputedStyle$1(element).position === 'static';
 }
 
 function getTrueOffsetParent(element, polyfill) {
-  if (!isHTMLElement(element) || getComputedStyle(element).position === 'fixed') {
+  if (!isHTMLElement(element) || getComputedStyle$1(element).position === 'fixed') {
     return null;
   }
   if (polyfill) {
@@ -1722,7 +1863,7 @@ const getElementRects = async function (data) {
 };
 
 function isRTL(element) {
-  return getComputedStyle(element).direction === 'rtl';
+  return getComputedStyle$1(element).direction === 'rtl';
 }
 
 const platform = {
@@ -2055,6 +2196,7 @@ const PostPopovercontainer = class {
         index.registerInstance(this, hostRef);
         this.postToggle = index.createEvent(this, "postToggle", 7);
         this.placement = 'top';
+        this.edgeGap = 8;
         this.arrow = false;
     }
     componentDidLoad() {
@@ -2126,11 +2268,12 @@ const PostPopovercontainer = class {
         this.clearAutoUpdate = autoUpdate(this.eventTarget, this.host, this.calculatePosition.bind(this));
     }
     async calculatePosition() {
+        const gap = this.edgeGap;
         const middleware = [
             flip(),
             inline(),
             shift({
-                padding: 8,
+                padding: gap,
                 // Prevents shifting away from the anchor too far, while shifting as far as possible
                 // https://floating-ui.com/docs/shift#limiter
                 limiter: limitShift({
@@ -2140,14 +2283,14 @@ const PostPopovercontainer = class {
             size({
                 apply({ availableWidth, elements }) {
                     Object.assign(elements.floating.style, {
-                        maxWidth: `${availableWidth - 16}px`,
+                        maxWidth: `${availableWidth - gap * 2}px`,
                     });
                 },
             }),
-            offset(this.arrow ? 12 : 8), // 4px outside of element to account for focus outline + ~arrow size
+            offset(this.arrow ? gap + 4 : gap), // 4px outside of element to account for focus outline + ~arrow size
         ];
         if (this.arrow) {
-            middleware.push(arrow({ element: this.arrowRef, padding: 8 }));
+            middleware.push(arrow({ element: this.arrowRef, padding: gap }));
         }
         const { x, y, middlewareData, placement: currentPlacement, } = await computePosition(this.eventTarget, this.host, {
             placement: this.placement || 'top',
@@ -2175,12 +2318,372 @@ const PostPopovercontainer = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'b12ea12dd1224cb0562f65c4e38899886041ce06', "data-version": _package.version }, this.arrow && (index.h("span", { key: '0273018a157873711de698ed2cdcde2c9de68573', class: "arrow", ref: el => {
+        return (index.h(index.Host, { key: '97a63bfbf098bd3463eb75678e54ddcc9e4790b3', "data-version": _package.version }, this.arrow && (index.h("span", { key: 'f6eaa7bd6cd3eb63d15e7d91825365661daae7dd', class: "arrow", ref: el => {
                 this.arrowRef = el;
-            } })), index.h("slot", { key: 'cf6b2a9a8cb9d04d01ab9d5d99afd52740c3520c' })));
+            } })), index.h("slot", { key: '414055000891719b74c2c449fec2c87a60b62047' })));
     }
     get host() { return index.getElement(this); }
 };
 PostPopovercontainer.style = PostPopovercontainerStyle0;
 
+const postListCss = "/*!\n * Copyright 2021 by Swiss Post, Information Technology\n */post-list{display:flex;gap:var(--post-list-title-gap);flex-direction:column;align-items:flex-start}post-list>div[role=list]{flex-direction:column;display:flex;gap:var(--post-list-item-gap)}post-list[horizontal]:not([horizontal=false]){flex-direction:row;align-items:baseline}post-list[horizontal]:not([horizontal=false])>div[role=list]{flex-direction:row;align-items:center}post-list>.list-title.visually-hidden{width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}post-list>.list-title.visually-hidden:not(caption){position:absolute !important}";
+const PostListStyle0 = postListCss;
+
+const PostList = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.titleId = undefined;
+        this.titleHidden = false;
+        this.horizontal = false;
+    }
+    componentWillLoad() {
+        /**
+         * Get the id set on the host element or use a random id by default
+         */
+        this.titleId = `list-${crypto.randomUUID()}`;
+    }
+    componentDidLoad() {
+        this.checkTitle();
+    }
+    checkTitle() {
+        if (!this.titleEl.innerText) {
+            throw new Error('Please provide a title to the list component. Title is mandatory for accessibility purposes.');
+        }
+    }
+    render() {
+        return (index.h(index.Host, { key: '23875f577fa2cbdeac88596616ddd1d5b924f983', "data-version": _package.version }, index.h("div", { key: '3fe8da70bc5c0e7b72c5e8b76a37762deb55fffd', ref: el => (this.titleEl = el), id: this.titleId, class: `list-title${this.titleHidden ? ' visually-hidden' : ''}` }, index.h("slot", { key: '536bec8ddbed178108a921f0b643d6eeb7b58edc' })), index.h("div", { key: 'c6b560206740105afc494050fa4b8608ccf4bd15', role: "list", "aria-labelledby": this.titleId }, index.h("slot", { key: '06272c2a9cc18d2f5440ff1fc0b966929b3ab6a0', name: "post-list-item" }))));
+    }
+    get host() { return index.getElement(this); }
+};
+PostList.style = PostListStyle0;
+
+const postListItemCss = ":host{display:flex}";
+const PostListItemStyle0 = postListItemCss;
+
+const PostListItem = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    connectedCallback() {
+        this.host.setAttribute('slot', 'post-list-item');
+    }
+    render() {
+        return (index.h(index.Host, { key: '8336f46e5c7d9b6b921582498e1d7e62086b3d4b', role: "listitem" }, index.h("slot", { key: '36ca0d6632ca775793f1db91d747894e0037dca2' })));
+    }
+    get host() { return index.getElement(this); }
+};
+PostListItem.style = PostListItemStyle0;
+
+/* eslint-disable no-undefined,no-param-reassign,no-shadow */
+
+/**
+ * Throttle execution of a function. Especially useful for rate limiting
+ * execution of handlers on events like resize and scroll.
+ *
+ * @param {number} delay -                  A zero-or-greater delay in milliseconds. For event callbacks, values around 100 or 250 (or even higher)
+ *                                            are most useful.
+ * @param {Function} callback -               A function to be executed after delay milliseconds. The `this` context and all arguments are passed through,
+ *                                            as-is, to `callback` when the throttled-function is executed.
+ * @param {object} [options] -              An object to configure options.
+ * @param {boolean} [options.noTrailing] -   Optional, defaults to false. If noTrailing is true, callback will only execute every `delay` milliseconds
+ *                                            while the throttled-function is being called. If noTrailing is false or unspecified, callback will be executed
+ *                                            one final time after the last throttled-function call. (After the throttled-function has not been called for
+ *                                            `delay` milliseconds, the internal counter is reset).
+ * @param {boolean} [options.noLeading] -   Optional, defaults to false. If noLeading is false, the first throttled-function call will execute callback
+ *                                            immediately. If noLeading is true, the first the callback execution will be skipped. It should be noted that
+ *                                            callback will never executed if both noLeading = true and noTrailing = true.
+ * @param {boolean} [options.debounceMode] - If `debounceMode` is true (at begin), schedule `clear` to execute after `delay` ms. If `debounceMode` is
+ *                                            false (at end), schedule `callback` to execute after `delay` ms.
+ *
+ * @returns {Function} A new, throttled, function.
+ */
+function throttle (delay, callback, options) {
+  var _ref = options || {},
+    _ref$noTrailing = _ref.noTrailing,
+    noTrailing = _ref$noTrailing === void 0 ? false : _ref$noTrailing,
+    _ref$noLeading = _ref.noLeading,
+    noLeading = _ref$noLeading === void 0 ? false : _ref$noLeading,
+    _ref$debounceMode = _ref.debounceMode,
+    debounceMode = _ref$debounceMode === void 0 ? undefined : _ref$debounceMode;
+  /*
+   * After wrapper has stopped being called, this timeout ensures that
+   * `callback` is executed at the proper times in `throttle` and `end`
+   * debounce modes.
+   */
+  var timeoutID;
+  var cancelled = false;
+
+  // Keep track of the last time `callback` was executed.
+  var lastExec = 0;
+
+  // Function to clear existing timeout
+  function clearExistingTimeout() {
+    if (timeoutID) {
+      clearTimeout(timeoutID);
+    }
+  }
+
+  // Function to cancel next exec
+  function cancel(options) {
+    var _ref2 = options || {},
+      _ref2$upcomingOnly = _ref2.upcomingOnly,
+      upcomingOnly = _ref2$upcomingOnly === void 0 ? false : _ref2$upcomingOnly;
+    clearExistingTimeout();
+    cancelled = !upcomingOnly;
+  }
+
+  /*
+   * The `wrapper` function encapsulates all of the throttling / debouncing
+   * functionality and when executed will limit the rate at which `callback`
+   * is executed.
+   */
+  function wrapper() {
+    for (var _len = arguments.length, arguments_ = new Array(_len), _key = 0; _key < _len; _key++) {
+      arguments_[_key] = arguments[_key];
+    }
+    var self = this;
+    var elapsed = Date.now() - lastExec;
+    if (cancelled) {
+      return;
+    }
+
+    // Execute `callback` and update the `lastExec` timestamp.
+    function exec() {
+      lastExec = Date.now();
+      callback.apply(self, arguments_);
+    }
+
+    /*
+     * If `debounceMode` is true (at begin) this is used to clear the flag
+     * to allow future `callback` executions.
+     */
+    function clear() {
+      timeoutID = undefined;
+    }
+    if (!noLeading && debounceMode && !timeoutID) {
+      /*
+       * Since `wrapper` is being called for the first time and
+       * `debounceMode` is true (at begin), execute `callback`
+       * and noLeading != true.
+       */
+      exec();
+    }
+    clearExistingTimeout();
+    if (debounceMode === undefined && elapsed > delay) {
+      if (noLeading) {
+        /*
+         * In throttle mode with noLeading, if `delay` time has
+         * been exceeded, update `lastExec` and schedule `callback`
+         * to execute after `delay` ms.
+         */
+        lastExec = Date.now();
+        if (!noTrailing) {
+          timeoutID = setTimeout(debounceMode ? clear : exec, delay);
+        }
+      } else {
+        /*
+         * In throttle mode without noLeading, if `delay` time has been exceeded, execute
+         * `callback`.
+         */
+        exec();
+      }
+    } else if (noTrailing !== true) {
+      /*
+       * In trailing throttle mode, since `delay` time has not been
+       * exceeded, schedule `callback` to execute `delay` ms after most
+       * recent execution.
+       *
+       * If `debounceMode` is true (at begin), schedule `clear` to execute
+       * after `delay` ms.
+       *
+       * If `debounceMode` is false (at end), schedule `callback` to
+       * execute after `delay` ms.
+       */
+      timeoutID = setTimeout(debounceMode ? clear : exec, debounceMode === undefined ? delay - elapsed : delay);
+    }
+  }
+  wrapper.cancel = cancel;
+
+  // Return the wrapper function.
+  return wrapper;
+}
+
+const postHeaderCss = "*,::before,::after{box-sizing:border-box}:host{--global-header-height:72px;--main-header-height:56px;--header-height:calc(var(--global-header-height) + var(--main-header-height))}@media screen and (max-width: 1023.99px){:host{--global-header-height:64px}}.d-flex{display:flex}.space-between{justify-content:space-between}.global-header{background-color:#fc0;display:flex;justify-content:space-between;align-items:center;position:sticky;padding-inline-start:4px;padding-inline-end:12px;height:var(--global-header-height)}@media screen and (max-width: 1023.99px){.global-header{top:0}}@media screen and (min-width: 1024px){.global-header{top:calc((var(--global-header-height) - 24px)*-1)}}slot[name=post-logo]{align-self:flex-end}.global-sub{display:flex;align-items:center;gap:2rem;height:var(--global-header-height)}.align-end{align-items:flex-end}.logo{flex:1 0 auto;height:var(--global-header-height);width:var(--global-header-height);min-height:24px;align-self:flex-end}@media screen and (min-width: 1024px){.logo{height:calc(var(--global-header-height) - var(--header-scroll-top))}}::slotted(ul){margin-block:0;list-style:none;display:flex;padding-left:0;gap:1rem}.title-header,.main-navigation{display:flex;align-items:center;padding-inline:12px;background:#fff}.title-header{height:var(--main-header-height);display:flex;align-items:center}@media screen and (max-width: 1023.99px){.title-header{border-bottom:1px solid #000}}:host(:not(:has([slot=title]))) .title-header{display:none}::slotted(h1){margin:0 !important;font-size:28px !important}.main-navigation{position:sticky;top:24px;height:var(--main-header-height)}@media screen and (min-width: 1024px){.main-navigation{border-bottom:1px solid #000}}@media screen and (max-width: 1023.99px){.main-navigation{display:none;position:absolute;top:var(--header-height);bottom:0;width:100%;background-color:#fff;height:auto}.main-navigation.extended{display:block}}@media screen and (min-width: 1024px){.mobile-toggle{display:none}}";
+const PostHeaderStyle0 = postHeaderCss;
+
+const PostHeader = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.scrollParent = null;
+        this.throttledScroll = () => this.handleScrollEvent();
+        this.throttledResize = throttle(50, () => this.handleResize());
+        this.device = null;
+        this.mobileMenuExtended = false;
+    }
+    componentWillRender() {
+        this.scrollParent = this.getScrollParent(this.host);
+        this.scrollParent.addEventListener('scroll', this.throttledScroll, { passive: true });
+        window.addEventListener('resize', this.throttledResize, { passive: true });
+        this.handleResize();
+        this.handleScrollEvent();
+    }
+    handlePostMainNavigationClosed() {
+        this.mobileMenuExtended = false;
+    }
+    handleScrollEvent() {
+        // Credits: "https://github.com/qeremy/so/blob/master/so.dom.js#L426"
+        const st = Math.max(0, this.scrollParent instanceof Document
+            ? this.scrollParent.documentElement.scrollTop
+            : this.scrollParent.scrollTop);
+        this.host.style.setProperty('--header-scroll-top', `${st}px`);
+    }
+    getScrollParent(node) {
+        let currentParent = node.parentElement;
+        while (currentParent) {
+            if (currentParent.nodeName === 'BODY') {
+                return document;
+            }
+            if (this.isScrollable(currentParent)) {
+                return currentParent;
+            }
+            currentParent = currentParent.parentElement;
+        }
+        return document;
+    }
+    isScrollable(node) {
+        if (!(node instanceof HTMLElement || node instanceof SVGElement)) {
+            return false;
+        }
+        const style = getComputedStyle(node);
+        return ['overflow', 'overflow-x', 'overflow-y'].some(propertyName => {
+            const value = style.getPropertyValue(propertyName);
+            return value === 'auto' || value === 'scroll';
+        });
+    }
+    handleResize() {
+        const width = window === null || window === void 0 ? void 0 : window.innerWidth;
+        if (width >= 1024) {
+            this.device = 'desktop';
+            this.mobileMenuExtended = false; // Close any open mobile menu
+        }
+        else if (width >= 600) {
+            this.device = 'tablet';
+        }
+        else {
+            this.device = 'mobile';
+        }
+    }
+    handleMobileMenuToggle() {
+        this.mobileMenuExtended = !this.mobileMenuExtended;
+    }
+    render() {
+        const mainNavClasses = ['main-navigation'];
+        if (this.mobileMenuExtended) {
+            mainNavClasses.push('extended');
+        }
+        return (index.h(index.Host, { key: '5a05f890e66ec97d54fd17ca26436392a4e78e9b', version: _package.version }, index.h("div", { key: '8f9b79cb289d0c613f6d000cf969ce5bf0b3d62a', class: "global-header" }, index.h("div", { key: '0a482fc3153e29917ed2df1fcbf39492a18918ef', class: "global-sub" }, index.h("div", { key: '3d25cc42a1fac21906cb2c487d90de84a9f1d029', class: "logo" }, index.h("slot", { key: '5a14eb7b8f9927083a56e37d53bc4aed3311b6c8', name: "post-logo" })), this.device === 'desktop' && index.h("slot", { key: '21bc41d4a09536a33ee3d7a98424a00d3969718f', name: "audience-navigation" })), index.h("div", { key: '6c8fdc5acc99c165bda366e872ceb32d6918b515', class: "global-sub" }, this.device === 'desktop' && index.h("slot", { key: '88f681de4d63517d73decd436b7084fca410f021', name: "meta-navigation" }), index.h("slot", { key: 'b6e5c1143fb89e2940f464bac95277bc2741a5c8', name: "global-controls" }), this.device === 'desktop' && index.h("slot", { key: '2edb30a148ffaae9f864e9babc03228c63a46314', name: "post-language-switch" }), index.h("div", { key: 'cc0633f19bd9b948fb2456fdc44431984e3a10eb', onClick: () => this.handleMobileMenuToggle(), class: "mobile-toggle" }, index.h("slot", { key: '26fa9aa29cab7e4048c387ee6c49216dc911f209', name: "post-togglebutton" })))), index.h("div", { key: '772afbe63ac2f0ae0527e25c6feac75b02365689', class: "title-header d-flex space-between align-center" }, index.h("slot", { key: '32bf212b1e16df0a2fd7cec6b21a7649458e7660', name: "title" }), index.h("div", { key: '13bf9f2443fa9c48c6f25a0159896995e170b4dc', class: "global-sub" }, index.h("slot", { key: 'a20c9414619c9508600c25ef31d5c14f6178f520', name: "local-controls" }), index.h("slot", { key: 'a87beb7500f4e07396bf4a91ee299a4bebd751bd' }))), index.h("div", { key: '008c9d1a0acf59a9b54facec5e6aec2f483f8ed7', class: mainNavClasses.join(' ') }, (this.device === 'mobile' || this.device === 'tablet') && (index.h("slot", { key: 'e8013ae7c0fe3883a4be405409fd3b35e236cf8c', name: "audience-navigation" })), index.h("slot", { key: '90412d08f0a835714de0a6c635f82aae90abeac2', name: "post-mainnavigation" }), (this.device === 'mobile' || this.device === 'tablet') && (index.h("slot", { key: '31fb4b34ddabda5f87f65a6c841b64f4a9802d50', name: "meta-navigation" })), (this.device === 'mobile' || this.device === 'tablet') && (index.h("slot", { key: 'cfd212a052d0b736d049084f492c614131ae7a32', name: "post-language-switch" })))));
+    }
+    get host() { return index.getElement(this); }
+};
+PostHeader.style = PostHeaderStyle0;
+
+const postMainnavigationCss = "*,::before,::after{box-sizing:border-box}@media screen and (min-width: 1024px){slot[name=back-button],[slot=back-button]{display:none}}@media screen and (min-width: 1024px){h2{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}}post-mainnavigation{height:100%}:host{height:100%;display:block}.main-navigation{margin-block:0;list-style:none;display:flex;padding-left:0;gap:1rem}@media screen and (max-width: 1023.99px){.main-navigation{flex-direction:column}}.main-navigation>post-list{display:flex;align-items:stretch;gap:1rem;height:100%}@media screen and (max-width: 1023.99px){.main-navigation>post-list{flex-direction:column}}.main-navigation a,.main-navigation post-megadropdown-toggle{height:100%;display:flex;align-items:center}";
+const PostMainnavigationStyle0 = postMainnavigationCss;
+
+const PostMainnavigation = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.postToggle = index.createEvent(this, "postToggle", 7);
+    }
+    handleMegadropdownToggled(event) {
+        // Find next element sibling
+        let megalodon;
+        let target = event.target;
+        while (target !== null) {
+            if (target.tagName === 'POST-MEGADROPDOWN') {
+                megalodon = target;
+                break;
+            }
+            target = target.nextElementSibling;
+        }
+        if (megalodon)
+            megalodon.toggle(event.target);
+    }
+    handleBackButtonClick() {
+        this.postToggle.emit();
+    }
+    render() {
+        return (index.h(index.Host, { key: '1c1d1d1c2781f39acc0fd02d3f93f922d801d98f', slot: "post-mainnavigation" }, index.h("div", { key: '1bc1129c65fc03ec72609438bbf28afe5bc5974b', onClick: () => this.handleBackButtonClick(), class: "back-button" }, index.h("slot", { key: '6b1bcc25306f1f959a25b18a6319eb696b0cbc2c', name: "back-button" })), index.h("nav", { key: '0002b55cb82fbf88a69a886c5ec1ba24168c9979', class: "main-navigation" }, index.h("slot", { key: '15e4558c1202f8f83e09dad76441d6bf7e3e16ea' }))));
+    }
+};
+PostMainnavigation.style = PostMainnavigationStyle0;
+
+const postMegadropdownCss = "*,::before,::after{box-sizing:border-box}post-popovercontainer{background-color:#fafafa;width:100%;border-bottom:1px solid #000}@media screen and (max-width: 1023.99px){post-popovercontainer{position:absolute;top:var(--header-height) !important;bottom:0;left:0;width:100%;height:auto}}.megadropdown{display:flex;gap:1rem;padding:1.5rem;border-radius:0 0 3px 3px}@media screen and (max-width: 1023.99px){.megadropdown{flex-direction:column}}.megadropdown post-list{display:flex;flex-direction:column;gap:.5rem}.megadropdown post-list-item{border-bottom:1px solid gray}.megadropdown post-list-item>a{padding-block:.25rem;display:block;text-decoration:none}.back-button{display:none}@media screen and (max-width: 1023.99px){.back-button{display:block}}post-closebutton{margin-left:auto}@media screen and (max-width: 1023.99px){post-closebutton{display:none}}h3{font-size:20px}";
+const PostMegadropdownStyle0 = postMegadropdownCss;
+
+const PostMegadropdown = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /**
+     * Show megadropdown
+     * @param element HTMLElement
+     * @returns boolean
+     */
+    async show(element) {
+        return this.popoverRef.show(element);
+    }
+    /**
+     * Hide megadropdown
+     * @returns boolean
+     */
+    async hide() {
+        return this.popoverRef.hide();
+    }
+    /**
+     * Toggle megadropdown
+     * @param element HTMLElement
+     * @param force boolean
+     * @returns boolean
+     */
+    async toggle(element, force) {
+        return this.popoverRef.toggle(element, force !== null && force !== void 0 ? force : undefined);
+    }
+    handleBackButtonClick() {
+        this.hide();
+    }
+    render() {
+        return (index.h(index.Host, { key: '6b30399852561a911c04a79c7c785bb5cf8e68ff', slot: "post-mainnavigation" }, index.h("post-popovercontainer", { key: 'caa196c59c0177948a73c43033f7399344068d77', placement: "bottom", "edge-gap": "0", ref: el => (this.popoverRef = el) }, index.h("div", { key: '7c88bd1ca7fac00b9ab0cb1d73252c6990484fb2', class: "megadropdown" }, index.h("div", { key: '25073177e9c9a05fca93b3b0abbed18f6b2a075b', onClick: () => this.handleBackButtonClick(), class: "back-button" }, index.h("slot", { key: '06a153e974f60476f2796e03afea3ad86c7560ca', name: "back-button" })), index.h("slot", { key: 'ea95044efbd609894dd96b3aa8662756e14711af' })))));
+    }
+};
+PostMegadropdown.style = PostMegadropdownStyle0;
+
+const postMegadropdownTriggerCss = ":host{display:inline-block}";
+const PostMegadropdownTriggerStyle0 = postMegadropdownTriggerCss;
+
+const PostMegadropdownTrigger = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.postToggle = index.createEvent(this, "postToggle", 7);
+        this.toggled = false;
+    }
+    handleClick() {
+        this.toggled = !this.toggled;
+        this.postToggle.emit();
+    }
+    render() {
+        return (index.h(index.Host, { key: 'af6dbf6cb97c5f98242e2d3fc31f193d00444b26', slot: "post-megadropdown-trigger" }, index.h("button", { key: '8160075f3dcb5afdd88a375698a61edfdbe8b7a1', "aria-expanded": this.toggled, onClick: () => this.handleClick() }, index.h("slot", { key: 'f5be082b15802582540d9a3320d4bf19ca3d98c3' }))));
+    }
+};
+PostMegadropdownTrigger.style = PostMegadropdownTriggerStyle0;
+
+exports.PostClosebutton = PostClosebutton;
+exports.PostHeader = PostHeader;
+exports.PostIcon = PostIcon;
+exports.PostList = PostList;
+exports.PostListItem = PostListItem;
+exports.PostLogo = PostLogo;
+exports.PostMainnavigation = PostMainnavigation;
+exports.PostMegadropdown = PostMegadropdown;
+exports.PostMegadropdownTrigger = PostMegadropdownTrigger;
 exports.PostPopovercontainer = PostPopovercontainer;