@swisspost/design-system-components 7.2.0 → 7.3.0

package/dist/components/post-collapsible2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { v as version } from './package.js';
-import { d as checkEmptyOrType } from './index2.js';
+import { b as checkEmptyOrType } from './index2.js';
 
 function isMotionReduced() {
     return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
@@ -24,7 +24,7 @@ const expand = (el) => {
     return el.animate([collapsedKeyframe, expandedKeyframe, finalKeyframe], animationOptions);
 };
 
-const postCollapsibleCss = ":host{display:block}.collapse{overflow:hidden}";
+const postCollapsibleCss = ":host{display:block;overflow:hidden}";
 const PostCollapsibleStyle0 = postCollapsibleCss;
 
 const PostCollapsible = /*@__PURE__*/ proxyCustomElement(class PostCollapsible extends HTMLElement {
@@ -35,7 +35,6 @@ const PostCollapsible = /*@__PURE__*/ proxyCustomElement(class PostCollapsible e
         this.postToggle = createEvent(this, "postToggle", 7);
         this.isLoaded = false;
         this.isOpen = true;
-        this.id = undefined;
         this.collapsed = false;
     }
     validateCollapsed(newValue = this.collapsed) {
@@ -44,13 +43,11 @@ const PostCollapsible = /*@__PURE__*/ proxyCustomElement(class PostCollapsible e
     connectedCallback() {
         this.validateCollapsed();
     }
-    componentWillRender() {
-        this.id = this.host.id || `c${crypto.randomUUID()}`;
-    }
     componentDidLoad() {
         if (this.collapsed)
             void this.toggle(false);
         this.isLoaded = true;
+        this.updateTriggers();
     }
     /**
      * Triggers the collapse programmatically.
@@ -63,15 +60,22 @@ const PostCollapsible = /*@__PURE__*/ proxyCustomElement(class PostCollapsible e
         this.isOpen = !this.isOpen;
         if (this.isLoaded)
             this.postToggle.emit(this.isOpen);
-        const animation = open ? expand(this.collapsible) : collapse(this.collapsible);
+        const animation = open ? expand(this.host) : collapse(this.host);
         if (!this.isLoaded || isMotionReduced())
             animation.finish();
         await animation.finished;
         animation.commitStyles();
         return this.isOpen;
     }
+    /**
+     * Update all post-collapsible-trigger elements referring to the collapsible
+     */
+    updateTriggers() {
+        const triggers = document.querySelectorAll(`post-collapsible-trigger[for=${this.host.id}]`);
+        triggers.forEach(trigger => trigger.update());
+    }
     render() {
-        return (h(Host, { key: 'a4c0bed771143ee6aa8683c75296ef1ecdc462dd', id: this.id, "data-version": version }, h("div", { key: 'f2e76d252d572b7054d99ff605ce6d9f3b86a395', class: "collapse", id: `${this.id}--collapse`, ref: el => (this.collapsible = el) }, h("slot", { key: '94c957e18aaa8a990d5edda77e63226fefe76cd9' }))));
+        return (h(Host, { key: 'c24a0524427d6ec5a3a57e12300a5af4cc047a71', "data-version": version }, h("slot", { key: '4d41b67a18ca43acfa0e9ef208c07fa7882baba2' })));
     }
     get host() { return this; }
     static get watchers() { return {
@@ -80,7 +84,6 @@ const PostCollapsible = /*@__PURE__*/ proxyCustomElement(class PostCollapsible e
     static get style() { return PostCollapsibleStyle0; }
 }, [1, "post-collapsible", {
         "collapsed": [4],
-        "id": [32],
         "toggle": [64]
     }, undefined, {
         "collapsed": ["validateCollapsed"]

package/dist/components/post-icon2.js

@@ -1,7 +1,8 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { c as checkEmptyOrOneOf, d as checkEmptyOrType, a as checkType } from './index2.js';
+import { c as checkEmptyOrOneOf, b as checkEmptyOrType } from './index2.js';
 import { v as version } from './package.js';
 import { c as checkNonEmpty } from './check-non-empty.js';
+import { c as checkType } from './check-type.js';
 
 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;
@@ -86,7 +87,7 @@ const PostIcon = /*@__PURE__*/ proxyCustomElement(class PostIcon extends HTMLEle
         })
             .filter(([_key, value]) => value !== null)
             .reduce((styles, [key, value]) => Object.assign(styles, { [key]: value }), {});
-        return (h(Host, { key: '95fa0f7a09d3430bb5d621e01b57188742920eb4', "data-version": version }, h("span", { key: 'c824e3705dc83665bb6f7649381654e6d1e07dfb', style: svgStyles })));
+        return (h(Host, { key: 'c046b74af0d3cc42dcddfbd4aa029ca07be26bf8', "data-version": version }, h("span", { key: 'c49c4d2de0222c665acf1db46f8a13db26f6a26e', style: svgStyles })));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/post-popover2.js

@@ -3,7 +3,7 @@ import { v as version } from './package.js';
 import { g as getAttributeObserver } from './attribute-observer.js';
 import { d as defineCustomElement$1 } from './post-popovercontainer2.js';
 
-const postPopoverCss = "/*!\n * Bootstrap Utilities v5.1.3 (https://getbootstrap.com/)\n * Copyright 2011-2021 The Bootstrap Authors\n * Copyright 2011-2021 Twitter, Inc.\n * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)\n\n * The MIT License (MIT)\n\n * Copyright (c) 2011-2020 Twitter, Inc.\n * Copyright (c) 2011-2020 The Bootstrap Authors\n\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n *//*!\n * Copyright 2021 by Swiss Post, Information Technology\n */.btn-close{padding:0;overflow:visible;border:0;background:none;color:inherit;font:inherit;-webkit-user-select:none;user-select:none;appearance:button;border-radius:4px;color:var(--post-gray-80);transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;cursor:pointer}.btn-close{outline-style:none !important;outline-offset:2px !important;outline-width:2px !important;outline-color:var(--post-focus-color) !important}.btn-close:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:solid !important;border-radius:4px}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-close:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.btn-close:is(:focus-visible,:focus-within,.pretend-focus){outline-style:solid !important;border-radius:4px}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-close:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.btn-close::before{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m16.267 16.667 6.667-6.533-.933-1.067-6.667 6.667-6.667-6.667-.933 1.067 6.667 6.533-6.667 6.667 1.067.933 6.533-6.667 6.667 6.667.933-1.067z'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m16.267 16.667 6.667-6.533-.933-1.067-6.667 6.667-6.667-6.667-.933 1.067 6.667 6.533-6.667 6.667 1.067.933 6.533-6.667 6.667 6.667.933-1.067z'/%3E%3C/svg%3E\");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;content:\"\";display:block;height:1.5rem;width:1.5rem}:is(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error,.bg-nightblue,.bg-nightblue-bright,.bg-petrol,.bg-coral,.bg-olive,.bg-purple,.bg-purple-bright,.bg-aubergine,.bg-aubergine-bright,.alert-primary,post-alert[type=primary],.alert-success,post-alert[type=success],.alert-danger,post-alert[type=danger],.alert-notification,post-alert[type=notification],.alert-error,post-alert[type=error]) .btn-close{color:var(--post-contrast-color)}.btn-close:focus,.btn-close:not(:disabled):hover,.pretend-hover.btn-close{color:var(--post-contrast-color)}.btn-close:disabled{color:var(--post-gray-40)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-close{color:CanvasText;forced-color-adjust:none}.btn-close:focus,.btn-close:not(:disabled):hover,.pretend-hover.btn-close{color:Highlight}}.btn-close-white{color:#e6e6e6}.btn-close-white:focus,.btn-close-white:not(:disabled):hover,.btn-close-white.pretend-hover{color:#fff}.btn-close-white:disabled{color:#999}*{box-sizing:border-box}:host{--post-contrast-color:#fff;--post-bg-rgb:51, 51, 51;display:block}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}.popover-container{display:flex;align-items:self-start;padding:.5em;min-width:160px;max-width:280px}@media (max-width: 599.98px){.popover-container{max-width:100%}}.popover-content{padding:.5em;flex-grow:1}";
+const postPopoverCss = "/*!\n * Bootstrap Utilities v5.1.3 (https://getbootstrap.com/)\n * Copyright 2011-2021 The Bootstrap Authors\n * Copyright 2011-2021 Twitter, Inc.\n * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)\n\n * The MIT License (MIT)\n\n * Copyright (c) 2011-2020 Twitter, Inc.\n * Copyright (c) 2011-2020 The Bootstrap Authors\n\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n *//*!\n * Copyright 2021 by Swiss Post, Information Technology\n */.btn-close{padding:0;overflow:visible;border:0;background:none;color:inherit;font:inherit;-webkit-user-select:none;user-select:none;appearance:button;border-radius:4px;color:var(--post-gray-80);transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;cursor:pointer}.btn-close{outline-style:none !important;outline-offset:2px !important;outline-width:2px !important;outline-color:var(--post-focus-color) !important}.btn-close:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:solid !important;border-radius:4px}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-close:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.btn-close:is(:focus-visible,:focus-within,.pretend-focus){outline-style:solid !important;border-radius:4px}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-close:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.btn-close::before{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m16.267 16.667 6.667-6.533-.933-1.067-6.667 6.667-6.667-6.667-.933 1.067 6.667 6.533-6.667 6.667 1.067.933 6.533-6.667 6.667 6.667.933-1.067z'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m16.267 16.667 6.667-6.533-.933-1.067-6.667 6.667-6.667-6.667-.933 1.067 6.667 6.533-6.667 6.667 1.067.933 6.533-6.667 6.667 6.667.933-1.067z'/%3E%3C/svg%3E\");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;content:\"\";display:block;height:1.5rem;width:1.5rem}:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error,.bg-nightblue,.bg-nightblue-bright,.bg-petrol,.bg-coral,.bg-olive,.bg-purple,.bg-purple-bright,.bg-aubergine,.bg-aubergine-bright,.alert-primary,post-alert[type=primary],.alert-success,post-alert[type=success],.alert-danger,post-alert[type=danger],.alert-notification,post-alert[type=notification],.alert-error,post-alert[type=error]) .btn-close{color:var(--post-contrast-color)}.btn-close:focus,.btn-close:not(:disabled):hover,.pretend-hover.btn-close{color:var(--post-contrast-color)}.btn-close:disabled{color:var(--post-gray-40)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-close{color:CanvasText;forced-color-adjust:none}.btn-close:focus,.btn-close:not(:disabled):hover,.pretend-hover.btn-close{color:Highlight}}.btn-close-white{color:#e6e6e6}.btn-close-white:focus,.btn-close-white:not(:disabled):hover,.btn-close-white.pretend-hover{color:#fff}.btn-close-white:disabled{color:#999}*{box-sizing:border-box}:host{--post-contrast-color:#fff;--post-bg-rgb:51, 51, 51;display:block}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}.popover-container{display:flex;align-items:self-start;padding:.5em;min-width:160px;max-width:280px}@media (max-width: 599.98px){.popover-container{max-width:100%}}.popover-content{padding:.5em;flex-grow:1}.btn-close{color:inherit}";
 const PostPopoverStyle0 = postPopoverCss;
 
 /**
@@ -96,7 +96,7 @@ const PostPopover = /*@__PURE__*/ proxyCustomElement(class PostPopover extends H
         this.triggers.forEach(trigger => trigger.setAttribute('aria-expanded', 'false'));
     }
     render() {
-        return (h(Host, { key: '97db4a92db81f3a84ca272af8f79981cf181024d', "data-version": version }, h("post-popovercontainer", { key: '291247845dc11572a5722aa949c1dfa74e521edd', arrow: this.arrow, placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: '92137bf8c92633c8578c89c7b0c8252b0b59e2fa', class: "popover-container" }, h("div", { key: '06f79f59e90ca439b552380af0e151084adadf03', class: "popover-content" }, h("slot", { key: 'c37c742ac7cf24f9440ac3b862761fcd937f7658' })), h("button", { key: '0e6f316574720e0f901af56e0dbb99f86e36c5b4', class: "btn-close", onClick: () => this.hide() }, h("span", { key: '77c41e8e8df74649ce9ca21740c77e78336905e6', class: "visually-hidden" }, this.closeButtonCaption))))));
+        return (h(Host, { key: '943dbb1a0a290d281ebe0f346ccd531f8acbbb5e', "data-version": version }, h("post-popovercontainer", { key: 'aa6bf3a2cc395ce612342b78bee23bcd1b68db5e', arrow: this.arrow, placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: '3ba6f039088615157ba47ebc448770fd9128efa0', class: "popover-container" }, h("div", { key: '0472f76d0cf51269029534c29f155e0f71d649fb', class: "popover-content" }, h("slot", { key: '1d722457c871c0aac9297b0517fe077c32e73794' })), h("button", { key: '430fa605ce81aad6b8709c22a31da62cdf6022e5', class: "btn-close", onClick: () => this.hide() }, h("span", { key: '37169089662c8ef1edd8de6389c55f9eee4e1a9e', class: "visually-hidden" }, this.closeButtonCaption))))));
     }
     get host() { return this; }
     static get style() { return PostPopoverStyle0; }

package/dist/components/post-popovercontainer2.js

@@ -120,12 +120,21 @@ function getPaddingObject(padding) {
   };
 }
 function rectToClientRect(rect) {
+  const {
+    x,
+    y,
+    width,
+    height
+  } = rect;
   return {
-    ...rect,
-    top: rect.y,
-    left: rect.x,
-    right: rect.x + rect.width,
-    bottom: rect.y + rect.height
+    width,
+    height,
+    top: y,
+    left: x,
+    right: x + width,
+    bottom: y + height,
+    x,
+    y
   };
 }
 
@@ -1192,6 +1201,15 @@ function isOverflowElement(element) {
 function isTableElement(element) {
   return ['table', 'td', 'th'].includes(getNodeName(element));
 }
+function isTopLayer(element) {
+  return [':popover-open', ':modal'].some(selector => {
+    try {
+      return element.matches(selector);
+    } catch (e) {
+      return false;
+    }
+  });
+}
 function isContainingBlock(element) {
   const webkit = isWebKit();
   const css = getComputedStyle(element);
@@ -1202,11 +1220,13 @@ function isContainingBlock(element) {
 function getContainingBlock(element) {
   let currentNode = getParentNode(element);
   while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) {
+    if (isTopLayer(currentNode)) {
+      return null;
+    }
     if (isContainingBlock(currentNode)) {
       return currentNode;
-    } else {
-      currentNode = getParentNode(currentNode);
     }
+    currentNode = getParentNode(currentNode);
   }
   return null;
 }
@@ -1228,8 +1248,8 @@ function getNodeScroll(element) {
     };
   }
   return {
-    scrollLeft: element.pageXOffset,
-    scrollTop: element.pageYOffset
+    scrollLeft: element.scrollX,
+    scrollTop: element.scrollY
   };
 }
 function getParentNode(node) {
@@ -1401,17 +1421,6 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
   });
 }
 
-const topLayerSelectors = [':popover-open', ':modal'];
-function isTopLayer(element) {
-  return topLayerSelectors.some(selector => {
-    try {
-      return element.matches(selector);
-    } catch (e) {
-      return false;
-    }
-  });
-}
-
 function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
   let {
     elements,
@@ -2031,7 +2040,7 @@ const computePosition = (reference, floating, options) => {
   }
 `,E=null;function I(e){if(E===null)try{E=new CSSStyleSheet,E.replaceSync(C);}catch{E=!1;}if(E===!1){let t=document.createElement("style");t.textContent=C,e instanceof Document?e.head.prepend(t):e.prepend(t);}else e.adoptedStyleSheets=[E,...e.adoptedStyleSheets];}function K(){window.ToggleEvent=window.ToggleEvent||c;function e(n){return n?.includes(":popover-open")&&(n=n.replace(J,"$1.\\:popover-open")),n}f(Document.prototype,"querySelector",e),f(Document.prototype,"querySelectorAll",e),f(Element.prototype,"querySelector",e),f(Element.prototype,"querySelectorAll",e),f(Element.prototype,"matches",e),f(Element.prototype,"closest",e),f(DocumentFragment.prototype,"querySelectorAll",e),f(DocumentFragment.prototype,"querySelectorAll",e),Object.defineProperties(HTMLElement.prototype,{popover:{enumerable:!0,configurable:!0,get(){if(!this.hasAttribute("popover"))return null;let n=(this.getAttribute("popover")||"").toLowerCase();return n===""||n=="auto"?"auto":"manual"},set(n){this.setAttribute("popover",n);}},showPopover:{enumerable:!0,configurable:!0,value(){S(this);}},hidePopover:{enumerable:!0,configurable:!0,value(){m(this,!0,!0);}},togglePopover:{enumerable:!0,configurable:!0,value(n){h.get(this)==="showing"&&n===void 0||n===!1?m(this,!0,!0):(n===void 0||n===!0)&&S(this);}}});let t=Element.prototype.attachShadow;t&&Object.defineProperties(Element.prototype,{attachShadow:{enumerable:!0,configurable:!0,writable:!0,value(n){let s=t.call(this,n);return I(s),s}}});let o=HTMLElement.prototype.attachInternals;o&&Object.defineProperties(HTMLElement.prototype,{attachInternals:{enumerable:!0,configurable:!0,writable:!0,value(){let n=o.call(this);return n.shadowRoot&&I(n.shadowRoot),n}}});let r=new WeakMap;function i(n){Object.defineProperties(n.prototype,{popoverTargetElement:{enumerable:!0,configurable:!0,set(s){if(s===null)this.removeAttribute("popovertarget"),r.delete(this);else if(s instanceof Element)this.setAttribute("popovertarget",""),r.set(this,s);else throw new TypeError("popoverTargetElement must be an element or null")},get(){if(this.localName!=="button"&&this.localName!=="input"||this.localName==="input"&&this.type!=="reset"&&this.type!=="image"&&this.type!=="button"||this.disabled||this.form&&this.type==="submit")return null;let s=r.get(this);if(s&&s.isConnected)return s;if(s&&!s.isConnected)return r.delete(this),null;let u=v(this),w=this.getAttribute("popovertarget");return (u instanceof Document||u instanceof B)&&w&&u.getElementById(w)||null}},popoverTargetAction:{enumerable:!0,configurable:!0,get(){let s=(this.getAttribute("popovertargetaction")||"").toLowerCase();return s==="show"||s==="hide"?s:"toggle"},set(s){this.setAttribute("popovertargetaction",s);}}});}i(HTMLButtonElement),i(HTMLInputElement);let l=n=>{if(!n.isTrusted)return;let s=n.composedPath()[0];if(!(s instanceof Element)||s?.shadowRoot)return;let u=v(s);if(!(u instanceof B||u instanceof Document))return;let w=s.closest("[popovertargetaction],[popovertarget]");if(w){O(w),n.preventDefault();return}},a=n=>{let s=n.key,u=n.target;!n.defaultPrevented&&u&&(s==="Escape"||s==="Esc")&&T(u.ownerDocument,!0,!0);};(n=>{n.addEventListener("click",l),n.addEventListener("keydown",a),n.addEventListener("pointerdown",x),n.addEventListener("pointerup",x);})(document),I(document);}j()||K();})();
 
-const postPopovercontainerCss = "@layer polyfill{@supports not selector(:popover-open){[popover]:not(.\\:popover-open){display:none}}}.popover{box-shadow:.5px 3px 4px rgba(0,0,0,.1),2px 4px 10px 4px rgba(0,0,0,.12);position:fixed;z-index:1060;width:max-content;margin:0;padding:0;box-sizing:border-box;color:var(--post-contrast-color);background-color:rgb(var(--post-bg-rgb));border:2px solid rgba(0,0,0,0);border-radius:4px;overflow:visible}.arrow{position:absolute;width:.5825rem;height:.5825rem;background-color:inherit;rotate:45deg;pointer-events:none;z-index:-1}.arrow.top{border-left:2px solid rgba(0,0,0,0);border-top:2px solid rgba(0,0,0,0)}.arrow.right{border-right:2px solid rgba(0,0,0,0);border-top:2px solid rgba(0,0,0,0)}.arrow.left{border-left:2px solid rgba(0,0,0,0);border-bottom:2px solid rgba(0,0,0,0)}.arrow.bottom{border-right:2px solid rgba(0,0,0,0);border-bottom:2px solid rgba(0,0,0,0)}";
+const postPopovercontainerCss = "@layer polyfill{@supports not selector(:popover-open){[popover]:not(.\\:popover-open){display:none}}}:where(post-popovercontainer){box-shadow:.5px 3px 4px rgba(0,0,0,.1),2px 4px 10px 4px rgba(0,0,0,.12);position:fixed;z-index:1060;width:max-content;margin:0;padding:0;box-sizing:border-box;color:var(--post-contrast-color);background-color:rgb(var(--post-bg-rgb));border:2px solid rgba(0,0,0,0);border-radius:4px;overflow:visible}:where(post-popovercontainer) .arrow{position:absolute;width:.5825rem;height:.5825rem;background-color:inherit;rotate:45deg;pointer-events:none;z-index:-1}:where(post-popovercontainer) .arrow.top{border-left:2px solid rgba(0,0,0,0);border-top:2px solid rgba(0,0,0,0)}:where(post-popovercontainer) .arrow.right{border-right:2px solid rgba(0,0,0,0);border-top:2px solid rgba(0,0,0,0)}:where(post-popovercontainer) .arrow.left{border-left:2px solid rgba(0,0,0,0);border-bottom:2px solid rgba(0,0,0,0)}:where(post-popovercontainer) .arrow.bottom{border-right:2px solid rgba(0,0,0,0);border-bottom:2px solid rgba(0,0,0,0)}";
 const PostPopovercontainerStyle0 = postPopovercontainerCss;
 
 const SIDE_MAP = {
@@ -2044,18 +2053,15 @@ const PostPopovercontainer = /*@__PURE__*/ proxyCustomElement(class PostPopoverc
     constructor() {
         super();
         this.__registerHost();
-        this.__attachShadow();
         this.postToggle = createEvent(this, "postToggle", 7);
         this.placement = 'top';
         this.arrow = false;
     }
     componentDidLoad() {
-        this.popoverRef.setAttribute('popover', '');
-        this.popoverRef.addEventListener('beforetoggle', this.handleToggle.bind(this));
+        this.host.setAttribute('popover', '');
+        this.host.addEventListener('beforetoggle', this.handleToggle.bind(this));
     }
     disconnectedCallback() {
-        if (this.popoverRef)
-            this.popoverRef.removeEventListener('beforetoggle', e => this.toggle(e.target));
         if (typeof this.clearAutoUpdate === 'function')
             this.clearAutoUpdate();
     }
@@ -2067,7 +2073,7 @@ const PostPopovercontainer = /*@__PURE__*/ proxyCustomElement(class PostPopoverc
         if (!this.toggleTimeoutId) {
             this.eventTarget = target;
             this.calculatePosition();
-            this.popoverRef.showPopover();
+            this.host.showPopover();
         }
     }
     /**
@@ -2076,7 +2082,7 @@ const PostPopovercontainer = /*@__PURE__*/ proxyCustomElement(class PostPopoverc
     async hide() {
         if (!this.toggleTimeoutId) {
             this.eventTarget = null;
-            this.popoverRef.hidePopover();
+            this.host.hidePopover();
         }
     }
     /**
@@ -2089,10 +2095,10 @@ const PostPopovercontainer = /*@__PURE__*/ proxyCustomElement(class PostPopoverc
         if (!this.toggleTimeoutId) {
             this.eventTarget = target;
             this.calculatePosition();
-            this.popoverRef.togglePopover(force);
+            this.host.togglePopover(force);
             this.toggleTimeoutId = null;
         }
-        return this.popoverRef.matches(':popover-open');
+        return this.host.matches(':where(:popover-open, .popover-open');
     }
     /**
      * Start or stop auto updates based on tooltip events.
@@ -2117,7 +2123,7 @@ const PostPopovercontainer = /*@__PURE__*/ proxyCustomElement(class PostPopoverc
      * an influence on tooltip positioning
      */
     startAutoupdates() {
-        this.clearAutoUpdate = autoUpdate(this.eventTarget, this.popoverRef, this.calculatePosition.bind(this));
+        this.clearAutoUpdate = autoUpdate(this.eventTarget, this.host, this.calculatePosition.bind(this));
     }
     async calculatePosition() {
         const middleware = [
@@ -2143,14 +2149,14 @@ const PostPopovercontainer = /*@__PURE__*/ proxyCustomElement(class PostPopoverc
         if (this.arrow) {
             middleware.push(arrow({ element: this.arrowRef, padding: 8 }));
         }
-        const { x, y, middlewareData, placement: currentPlacement, } = await computePosition(this.eventTarget, this.popoverRef, {
+        const { x, y, middlewareData, placement: currentPlacement, } = await computePosition(this.eventTarget, this.host, {
             placement: this.placement || 'top',
             strategy: 'fixed',
             middleware,
         });
         // Tooltip
-        this.popoverRef.style.left = `${x}px`;
-        this.popoverRef.style.top = `${y}px`;
+        this.host.style.left = `${x}px`;
+        this.host.style.top = `${y}px`;
         // Arrow
         if (this.arrow) {
             // Tutorial: https://codesandbox.io/s/mystifying-kare-ee3hmh?file=/src/index.js
@@ -2169,13 +2175,13 @@ const PostPopovercontainer = /*@__PURE__*/ proxyCustomElement(class PostPopoverc
         }
     }
     render() {
-        return (h(Host, { key: '1707db71258eef7c95c13d738561d9d55df540fc', "data-version": version }, h("div", { key: 'd1d89bfc31529c803b04f2395509fe96b38d7d7a', class: "popover", part: "popover", ref: (el) => (this.popoverRef = el) }, this.arrow && (h("span", { key: 'd85fc5f68be0ff8060b3be823e22744873395775', class: "arrow", ref: el => {
+        return (h(Host, { key: '944364458c19e3a11171571402f183449dafff24', "data-version": version }, this.arrow && (h("span", { key: 'f77a61b4b6f4f4ceb861ef8eb7d16f71f45642ec', class: "arrow", ref: el => {
                 this.arrowRef = el;
-            } })), h("slot", { key: '7bd455d61d270b9d6cdc132ffb7a00f0259164e7' }))));
+            } })), h("slot", { key: 'feeedfe09388dca41ee1048c8702c68bd0a91d33' })));
     }
     get host() { return this; }
     static get style() { return PostPopovercontainerStyle0; }
-}, [1, "post-popovercontainer", {
+}, [4, "post-popovercontainer", {
         "placement": [1],
         "arrow": [4],
         "show": [64],

package/dist/components/post-rating2.js

@@ -74,7 +74,7 @@ const PostRating = /*@__PURE__*/ proxyCustomElement(class PostRating extends HTM
         }
     }
     render() {
-        return (h(Host, { key: '64081561d0b0819ed5fbe31c0bc7974b996ec582', "data-version": version }, h("div", { key: 'eaed95cef70f1dfa815a77e3d630ac933d2c1eff', role: "slider", class: "rating", tabindex: "0", "aria-label": this.label, "aria-valuemin": "0", "aria-valuemax": this.stars, "aria-valuenow": this.currentRating, "aria-valuetext": `${this.currentRating} out of ${this.stars}`, "aria-readonly": this.readonly ? 'true' : 'false', onKeyDown: this.keydownHandler, onBlur: this.blurHandler }, Array.from({ length: this.stars }).map((v, i) => (h("div", { key: `star-${v}`, "aria-hidden": "true", class: {
+        return (h(Host, { key: 'b175b250377f4bf9be92ad05fb14f7e4a8f7c12f', "data-version": version }, h("div", { key: 'b12eb5ff191d5a4ac5270845f120360f61e0fce0', role: "slider", class: "rating", tabindex: "0", "aria-label": this.label, "aria-valuemin": "0", "aria-valuemax": this.stars, "aria-valuenow": this.currentRating, "aria-valuetext": `${this.currentRating} out of ${this.stars}`, "aria-readonly": this.readonly ? 'true' : 'false', onKeyDown: this.keydownHandler, onBlur: this.blurHandler }, Array.from({ length: this.stars }).map((v, i) => (h("div", { key: `star-${v}`, "aria-hidden": "true", class: {
                 'star': true,
                 'before-hover': i < this.hoveredIndex,
                 'active': i < Math.round(this.currentRating),

package/dist/components/post-tab-header2.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { v as version } from './package.js';
 import { c as checkNonEmpty } from './check-non-empty.js';
 
-const postTabHeaderCss = ".tab-title[role=tab]{display:inline-block;cursor:pointer;position:relative;box-sizing:border-box;padding:1rem;transition:background-color 100ms;border-right:1px solid rgba(0,0,0,0);border-left:1px solid rgba(0,0,0,0);outline-color:currentColor;opacity:.7;color:var(--post-contrast-color);text-decoration:none;background-color:rgba(0,0,0,0)}.tab-title[role=tab]:focus{background-color:unset;color:var(--post-contrast-color)}.tab-title[role=tab]:hover{opacity:1;background-color:rgba(var(--post-contrast-color-rgb), 0.6);color:var(--post-contrast-color-inverted)}.tab-title[role=tab]:focus-visible{outline:rgba(0,0,0,0);opacity:1;background-color:rgba(var(--post-contrast-color-rgb), 0.6);color:var(--post-contrast-color-inverted);box-shadow:none}.tab-title[role=tab]:focus-visible::after{content:\"\";display:block;position:absolute;top:2px;right:1px;bottom:0;left:1px;box-shadow:0 0 0 1px #fff,0 0 0 2px #333}.tab-title[role=tab].active{z-index:1;border-right-color:#ccc;border-left-color:#ccc;opacity:1;background-color:var(--post-contrast-color-inverted);color:var(--post-contrast-color);font-weight:700}.tab-title[role=tab].active::before{content:\"\";display:block;position:absolute;top:0;right:-1px;left:-1px;height:.25rem;background-color:#fc0}:is(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error,.bg-nightblue,.bg-nightblue-bright,.bg-petrol,.bg-coral,.bg-olive,.bg-purple,.bg-purple-bright,.bg-aubergine,.bg-aubergine-bright,.alert-primary,post-alert[type=primary],.alert-success,post-alert[type=success],.alert-danger,post-alert[type=danger],.alert-notification,post-alert[type=notification],.alert-error,post-alert[type=error]) .tab-title[role=tab]:hover{background-color:rgba(255,255,255,.2)}:is(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error,.bg-nightblue,.bg-nightblue-bright,.bg-petrol,.bg-coral,.bg-olive,.bg-purple,.bg-purple-bright,.bg-aubergine,.bg-aubergine-bright,.alert-primary,post-alert[type=primary],.alert-success,post-alert[type=success],.alert-danger,post-alert[type=danger],.alert-notification,post-alert[type=notification],.alert-error,post-alert[type=error]) .tab-title[role=tab]:focus-visible{background-color:rgba(255,255,255,.2)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.tab-title[role=tab]{opacity:1;border-left-color:Canvas;border-right-color:Canvas;color:LinkText}.tab-title[role=tab]:hover,.tab-title[role=tab]:focus,.tab-title[role=tab]:focus-within,.tab-title[role=tab]:focus-visible{outline:2px solid Highlight;outline-offset:-0.25rem}.tab-title[role=tab].active{border-left-color:ButtonText;border-right-color:ButtonText;color:Highlight}.tab-title[role=tab].active::before{background-color:Highlight}}.bg-yellow .tab-title{background-color:#fc0}.bg-yellow .tab-title.active{background-color:#fc0}.bg-yellow .nav-item{background-color:#fc0}.bg-white .tab-title{background-color:#fff}.bg-white .tab-title.active{background-color:#fff}.bg-white .nav-item{background-color:#fff}.bg-light .tab-title{background-color:#faf9f8}.bg-light .tab-title.active{background-color:#faf9f8}.bg-light .nav-item{background-color:#faf9f8}.bg-gray .tab-title{background-color:#f4f3f1}.bg-gray .tab-title.active{background-color:#f4f3f1}.bg-gray .nav-item{background-color:#f4f3f1}.bg-dark .tab-title{background-color:#333}.bg-dark .tab-title.active{background-color:#333}.bg-dark .nav-item{background-color:#333}.bg-black .tab-title{background-color:#000}.bg-black .tab-title.active{background-color:#000}.bg-black .nav-item{background-color:#000}.bg-primary .tab-title{background-color:#333}.bg-primary .tab-title.active{background-color:#333}.bg-primary .nav-item{background-color:#333}.bg-secondary .tab-title{background-color:#666}.bg-secondary .tab-title.active{background-color:#666}.bg-secondary .nav-item{background-color:#666}.bg-success .tab-title{background-color:#2c871d}.bg-success .tab-title.active{background-color:#2c871d}.bg-success .nav-item{background-color:#2c871d}.bg-warning .tab-title{background-color:#f49e00}.bg-warning .tab-title.active{background-color:#f49e00}.bg-warning .nav-item{background-color:#f49e00}.bg-error .tab-title{background-color:#a51728}.bg-error .tab-title.active{background-color:#a51728}.bg-error .nav-item{background-color:#a51728}.bg-info .tab-title{background-color:#cce4ee}.bg-info .tab-title.active{background-color:#cce4ee}.bg-info .nav-item{background-color:#cce4ee}.bg-success-background .tab-title{background-color:#c0debb}.bg-success-background .tab-title.active{background-color:#c0debb}.bg-success-background .nav-item{background-color:#c0debb}.bg-warning-background .tab-title{background-color:#fce2b2}.bg-warning-background .tab-title.active{background-color:#fce2b2}.bg-warning-background .nav-item{background-color:#fce2b2}.bg-error-background .tab-title{background-color:#ffdade}.bg-error-background .tab-title.active{background-color:#ffdade}.bg-error-background .nav-item{background-color:#ffdade}.bg-nightblue .tab-title{background-color:#004976}.bg-nightblue .tab-title.active{background-color:#004976}.bg-nightblue .nav-item{background-color:#004976}.bg-nightblue-bright .tab-title{background-color:#0076a8}.bg-nightblue-bright .tab-title.active{background-color:#0076a8}.bg-nightblue-bright .nav-item{background-color:#0076a8}.bg-petrol .tab-title{background-color:#006d68}.bg-petrol .tab-title.active{background-color:#006d68}.bg-petrol .nav-item{background-color:#006d68}.bg-petrol-bright .tab-title{background-color:#00968f}.bg-petrol-bright .tab-title.active{background-color:#00968f}.bg-petrol-bright .nav-item{background-color:#00968f}.bg-coral .tab-title{background-color:#9e2a2f}.bg-coral .tab-title.active{background-color:#9e2a2f}.bg-coral .nav-item{background-color:#9e2a2f}.bg-coral-bright .tab-title{background-color:#e03c31}.bg-coral-bright .tab-title.active{background-color:#e03c31}.bg-coral-bright .nav-item{background-color:#e03c31}.bg-olive .tab-title{background-color:#716135}.bg-olive .tab-title.active{background-color:#716135}.bg-olive .nav-item{background-color:#716135}.bg-olive-bright .tab-title{background-color:#aa9d2e}.bg-olive-bright .tab-title.active{background-color:#aa9d2e}.bg-olive-bright .nav-item{background-color:#aa9d2e}.bg-purple .tab-title{background-color:#80276c}.bg-purple .tab-title.active{background-color:#80276c}.bg-purple .nav-item{background-color:#80276c}.bg-purple-bright .tab-title{background-color:#c5299b}.bg-purple-bright .tab-title.active{background-color:#c5299b}.bg-purple-bright .nav-item{background-color:#c5299b}.bg-aubergine .tab-title{background-color:#523178}.bg-aubergine .tab-title.active{background-color:#523178}.bg-aubergine .nav-item{background-color:#523178}.bg-aubergine-bright .tab-title{background-color:#7566a0}.bg-aubergine-bright .tab-title.active{background-color:#7566a0}.bg-aubergine-bright .nav-item{background-color:#7566a0}[class*=bg-] .tab-title.active:focus::after{background-color:rgba(255,255,255,.2)}@supports selector(*:focus-visible){[class*=bg-] .tab-title.active:focus::after{background-color:unset}[class*=bg-] .tab-title.active:focus-visible::after{background-color:rgba(255,255,255,.2)}}/*!\n * Bootstrap Utilities v5.1.3 (https://getbootstrap.com/)\n * Copyright 2011-2021 The Bootstrap Authors\n * Copyright 2011-2021 Twitter, Inc.\n * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)\n\n * The MIT License (MIT)\n\n * Copyright (c) 2011-2020 Twitter, Inc.\n * Copyright (c) 2011-2020 The Bootstrap Authors\n\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n *//*!\n * Copyright 2021 by Swiss Post, Information Technology\n */:host{display:block}.tab-title{padding:0;overflow:visible;border:0;background:none;color:inherit;font:inherit;-webkit-user-select:none;user-select:none;appearance:button}";
+const postTabHeaderCss = ".tab-title[role=tab]{display:inline-block;cursor:pointer;position:relative;box-sizing:border-box;padding:1rem;transition:background-color 100ms;border-right:1px solid rgba(0,0,0,0);border-left:1px solid rgba(0,0,0,0);outline-color:currentColor;opacity:.7;color:var(--post-contrast-color);text-decoration:none;background-color:rgba(0,0,0,0)}.tab-title[role=tab]:focus{background-color:unset;color:var(--post-contrast-color)}.tab-title[role=tab]:hover{opacity:1;background-color:rgba(var(--post-contrast-color-rgb), 0.6);color:var(--post-contrast-color-inverted)}.tab-title[role=tab]:focus-visible{outline:rgba(0,0,0,0);opacity:1;background-color:rgba(var(--post-contrast-color-rgb), 0.6);color:var(--post-contrast-color-inverted);box-shadow:none}.tab-title[role=tab]:focus-visible::after{content:\"\";display:block;position:absolute;top:2px;right:1px;bottom:0;left:1px;box-shadow:0 0 0 1px #fff,0 0 0 2px #333}.tab-title[role=tab].active{z-index:1;border-right-color:#ccc;border-left-color:#ccc;opacity:1;background-color:var(--post-contrast-color-inverted);color:var(--post-contrast-color);font-weight:700}.tab-title[role=tab].active::before{content:\"\";display:block;position:absolute;top:0;right:-1px;left:-1px;height:.25rem;background-color:#fc0}:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error,.bg-nightblue,.bg-nightblue-bright,.bg-petrol,.bg-coral,.bg-olive,.bg-purple,.bg-purple-bright,.bg-aubergine,.bg-aubergine-bright,.alert-primary,post-alert[type=primary],.alert-success,post-alert[type=success],.alert-danger,post-alert[type=danger],.alert-notification,post-alert[type=notification],.alert-error,post-alert[type=error]) .tab-title[role=tab]:hover{background-color:rgba(255,255,255,.2)}:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error,.bg-nightblue,.bg-nightblue-bright,.bg-petrol,.bg-coral,.bg-olive,.bg-purple,.bg-purple-bright,.bg-aubergine,.bg-aubergine-bright,.alert-primary,post-alert[type=primary],.alert-success,post-alert[type=success],.alert-danger,post-alert[type=danger],.alert-notification,post-alert[type=notification],.alert-error,post-alert[type=error]) .tab-title[role=tab]:focus-visible{background-color:rgba(255,255,255,.2)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.tab-title[role=tab]{opacity:1;border-left-color:Canvas;border-right-color:Canvas;color:LinkText}.tab-title[role=tab]:hover,.tab-title[role=tab]:focus,.tab-title[role=tab]:focus-within,.tab-title[role=tab]:focus-visible{outline:2px solid Highlight;outline-offset:-0.25rem}.tab-title[role=tab].active{border-left-color:ButtonText;border-right-color:ButtonText;color:Highlight}.tab-title[role=tab].active::before{background-color:Highlight}}.bg-yellow .tab-title{background-color:#fc0}.bg-yellow .tab-title.active{background-color:#fc0}.bg-yellow .nav-item{background-color:#fc0}.bg-white .tab-title{background-color:#fff}.bg-white .tab-title.active{background-color:#fff}.bg-white .nav-item{background-color:#fff}.bg-light .tab-title{background-color:#faf9f8}.bg-light .tab-title.active{background-color:#faf9f8}.bg-light .nav-item{background-color:#faf9f8}.bg-gray .tab-title{background-color:#f4f3f1}.bg-gray .tab-title.active{background-color:#f4f3f1}.bg-gray .nav-item{background-color:#f4f3f1}.bg-dark .tab-title{background-color:#333}.bg-dark .tab-title.active{background-color:#333}.bg-dark .nav-item{background-color:#333}.bg-black .tab-title{background-color:#000}.bg-black .tab-title.active{background-color:#000}.bg-black .nav-item{background-color:#000}.bg-primary .tab-title{background-color:#333}.bg-primary .tab-title.active{background-color:#333}.bg-primary .nav-item{background-color:#333}.bg-secondary .tab-title{background-color:#666}.bg-secondary .tab-title.active{background-color:#666}.bg-secondary .nav-item{background-color:#666}.bg-success .tab-title{background-color:#2c871d}.bg-success .tab-title.active{background-color:#2c871d}.bg-success .nav-item{background-color:#2c871d}.bg-warning .tab-title{background-color:#f49e00}.bg-warning .tab-title.active{background-color:#f49e00}.bg-warning .nav-item{background-color:#f49e00}.bg-error .tab-title{background-color:#a51728}.bg-error .tab-title.active{background-color:#a51728}.bg-error .nav-item{background-color:#a51728}.bg-info .tab-title{background-color:#cce4ee}.bg-info .tab-title.active{background-color:#cce4ee}.bg-info .nav-item{background-color:#cce4ee}.bg-success-background .tab-title{background-color:#c0debb}.bg-success-background .tab-title.active{background-color:#c0debb}.bg-success-background .nav-item{background-color:#c0debb}.bg-warning-background .tab-title{background-color:#fce2b2}.bg-warning-background .tab-title.active{background-color:#fce2b2}.bg-warning-background .nav-item{background-color:#fce2b2}.bg-error-background .tab-title{background-color:#ffdade}.bg-error-background .tab-title.active{background-color:#ffdade}.bg-error-background .nav-item{background-color:#ffdade}.bg-nightblue .tab-title{background-color:#004976}.bg-nightblue .tab-title.active{background-color:#004976}.bg-nightblue .nav-item{background-color:#004976}.bg-nightblue-bright .tab-title{background-color:#0076a8}.bg-nightblue-bright .tab-title.active{background-color:#0076a8}.bg-nightblue-bright .nav-item{background-color:#0076a8}.bg-petrol .tab-title{background-color:#006d68}.bg-petrol .tab-title.active{background-color:#006d68}.bg-petrol .nav-item{background-color:#006d68}.bg-petrol-bright .tab-title{background-color:#00968f}.bg-petrol-bright .tab-title.active{background-color:#00968f}.bg-petrol-bright .nav-item{background-color:#00968f}.bg-coral .tab-title{background-color:#9e2a2f}.bg-coral .tab-title.active{background-color:#9e2a2f}.bg-coral .nav-item{background-color:#9e2a2f}.bg-coral-bright .tab-title{background-color:#e03c31}.bg-coral-bright .tab-title.active{background-color:#e03c31}.bg-coral-bright .nav-item{background-color:#e03c31}.bg-olive .tab-title{background-color:#716135}.bg-olive .tab-title.active{background-color:#716135}.bg-olive .nav-item{background-color:#716135}.bg-olive-bright .tab-title{background-color:#aa9d2e}.bg-olive-bright .tab-title.active{background-color:#aa9d2e}.bg-olive-bright .nav-item{background-color:#aa9d2e}.bg-purple .tab-title{background-color:#80276c}.bg-purple .tab-title.active{background-color:#80276c}.bg-purple .nav-item{background-color:#80276c}.bg-purple-bright .tab-title{background-color:#c5299b}.bg-purple-bright .tab-title.active{background-color:#c5299b}.bg-purple-bright .nav-item{background-color:#c5299b}.bg-aubergine .tab-title{background-color:#523178}.bg-aubergine .tab-title.active{background-color:#523178}.bg-aubergine .nav-item{background-color:#523178}.bg-aubergine-bright .tab-title{background-color:#7566a0}.bg-aubergine-bright .tab-title.active{background-color:#7566a0}.bg-aubergine-bright .nav-item{background-color:#7566a0}[class*=bg-] .tab-title.active:focus::after{background-color:rgba(255,255,255,.2)}@supports selector(*:focus-visible){[class*=bg-] .tab-title.active:focus::after{background-color:unset}[class*=bg-] .tab-title.active:focus-visible::after{background-color:rgba(255,255,255,.2)}}/*!\n * Bootstrap Utilities v5.1.3 (https://getbootstrap.com/)\n * Copyright 2011-2021 The Bootstrap Authors\n * Copyright 2011-2021 Twitter, Inc.\n * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)\n\n * The MIT License (MIT)\n\n * Copyright (c) 2011-2020 Twitter, Inc.\n * Copyright (c) 2011-2020 The Bootstrap Authors\n\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n *//*!\n * Copyright 2021 by Swiss Post, Information Technology\n */:host{display:block}.tab-title{padding:0;overflow:visible;border:0;background:none;color:inherit;font:inherit;-webkit-user-select:none;user-select:none;appearance:button}";
 const PostTabHeaderStyle0 = postTabHeaderCss;
 
 const PostTabHeader = /*@__PURE__*/ proxyCustomElement(class PostTabHeader extends HTMLElement {
@@ -20,7 +20,7 @@ const PostTabHeader = /*@__PURE__*/ proxyCustomElement(class PostTabHeader exten
         this.tabId = `tab-${this.host.id || crypto.randomUUID()}`;
     }
     render() {
-        return (h(Host, { key: 'eb6ac6a67f4cbf571d38f1de1c8d428a9dea5a53', id: this.tabId, role: "tab", "data-version": version, "aria-selected": "false", tabindex: "-1", class: "tab-title" }, h("slot", { key: 'd6559dbcc76ecc8d253fcd4a115b4bc4f78fd496' })));
+        return (h(Host, { key: '543284f0251b7edff35b0fc4f260c7ba1447d57a', id: this.tabId, role: "tab", "data-version": version, "aria-selected": "false", tabindex: "-1", class: "tab-title" }, h("slot", { key: 'c8ed807ea7fbd6fd5ab0e06724fd49852c5e15bf' })));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/post-tab-panel2.js

@@ -17,7 +17,7 @@ const PostTabPanel = /*@__PURE__*/ proxyCustomElement(class PostTabPanel extends
         this.panelId = `panel-${this.host.id || crypto.randomUUID()}`;
     }
     render() {
-        return (h(Host, { key: 'cd74acf8889af916b9b32b57b483bbd74d5a6e20', "data-version": version, id: this.panelId, role: "tabpanel" }, h("slot", { key: '9d2c3f42b1dd9214aeeee35efc1179372851af13' })));
+        return (h(Host, { key: '2b7e8f1853df072796345126b60ed2b6315362a2', "data-version": version, id: this.panelId, role: "tabpanel" }, h("slot", { key: '77c2b1c1f7d141fd3f9b71c504cdd9a5ce61260b' })));
     }
     get host() { return this; }
     static get style() { return PostTabPanelStyle0; }

package/dist/components/post-tabs2.js

@@ -43,19 +43,17 @@ const PostTabs = /*@__PURE__*/ proxyCustomElement(class PostTabs extends HTMLEle
             this.showing.finish();
         }
         // hide the currently visible panel only if no other animation is running
-        if (previousTab && !this.showing && !this.hiding) {
+        if (previousTab && !this.showing && !this.hiding)
             this.hidePanel(previousTab.panel);
-        }
         // wait for any hiding animation to complete before showing the selected tab
-        if (this.hiding) {
+        if (this.hiding)
             await this.hiding.finished;
-        }
         this.showSelectedPanel();
         // wait for any display animation to complete for the returned promise to fully resolve
-        if (this.showing) {
+        if (this.showing)
             await this.showing.finished;
-        }
-        this.postChange.emit(this.activeTab.panel);
+        if (this.isLoaded)
+            this.postChange.emit(this.activeTab.panel);
     }
     moveMisplacedTabs() {
         if (!this.tabs)
@@ -145,7 +143,7 @@ const PostTabs = /*@__PURE__*/ proxyCustomElement(class PostTabs extends HTMLEle
         nextTab.focus();
     }
     render() {
-        return (h(Host, { key: '38a0e3f686dab8cc1ea9dc23cc6e275fe0e6b45d', "data-version": version }, h("div", { key: 'c67273069e5d3ba858bd6c5da8684bbd2f8c398b', class: "tabs-wrapper" }, h("div", { key: 'fc3e725607107f3b5d3c969e4107c229ca8f8c66', class: "tabs", role: "tablist" }, h("slot", { key: 'caf8d1a6901327d0b8faebb36ce239d7368e2a22', name: "tabs", onSlotchange: () => this.enableTabs() }))), h("div", { key: 'f8cf7c8c8cbb3fd308cebc34513b16926f8e5c81', class: "tab-content" }, h("slot", { key: '7f7ff954545f85e6caab71d7265017607e25262b', onSlotchange: () => this.moveMisplacedTabs() }))));
+        return (h(Host, { key: '365b2794cfb46631277341ea23afb2070c9d3ad1', "data-version": version }, h("div", { key: '70df13385ecc9c067527b80e2dd7b3a9b245e745', class: "tabs-wrapper", part: "tabs" }, h("div", { key: 'cae4d18aff0c890e0e8d76c1b8e321322abbeccd', class: "tabs", role: "tablist" }, h("slot", { key: '2b6ca3e01e45e541950ddc2c1cdc680b28ea96b9', name: "tabs", onSlotchange: () => this.enableTabs() }))), h("div", { key: '7352582d9c738af9b8bf3b71e0a153132fd23dcd', class: "tab-content", part: "content" }, h("slot", { key: '4845c39bf9b9cbc42aa8689c7ae99cc2e75d7907', onSlotchange: () => this.moveMisplacedTabs() }))));
     }
     get host() { return this; }
     static get style() { return PostTabsStyle0; }

package/dist/components/post-tag2.js

@@ -35,7 +35,7 @@ const PostTag = /*@__PURE__*/ proxyCustomElement(class PostTag extends HTMLEleme
         this.setClasses();
     }
     render() {
-        return (h(Host, { key: '932992b2aa41e1082bf1617c7f6c74419febb143', "data-version": version }, h("div", { key: '3d5b82975cf95f1439299326347886a8b74e2d3d', class: this.classes }, this.icon ? h("post-icon", { name: this.icon }) : null, h("div", { key: '96dac1715f1ddfe799cb2cb443f57d2a4082d90e', class: "tag-text" }, h("slot", { key: 'bb886b44ae76b71096c9938dacd708d80b602790' })))));
+        return (h(Host, { key: '0292c0d7a103bd987511cb67d66bc3de60800bf1', "data-version": version }, h("div", { key: 'b3b1934c9c3ec3490b1dad8829b15f63490677ba', class: this.classes }, this.icon ? h("post-icon", { name: this.icon }) : null, h("div", { key: '0cb543c65dfe1d61756aecf67de9b2cdae3f78e5', class: "tag-text" }, h("slot", { key: '020b0b7191f0b6051c958253ef6cb52bc660d5e2' })))));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/post-tooltip2.js

@@ -1,12 +1,12 @@
 import { proxyCustomElement, HTMLElement as HTMLElement$1, h, Host } from '@stencil/core/internal/client';
 import { v as version$1 } from './package.js';
+import { a as commonjsGlobal, b as getDefaultExportFromCjs } from './_commonjsHelpers.js';
 import { g as getAttributeObserver } from './attribute-observer.js';
+import { b as checkEmptyOrType } from './index2.js';
 import { d as defineCustomElement$1 } from './post-popovercontainer2.js';
 
-var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
-
-function getDefaultExportFromCjs (x) {
-	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+function timeout(delay) {
+    return new Promise(resolve => setTimeout(resolve, delay));
 }
 
 var focusable = {exports: {}};
@@ -4772,9 +4772,10 @@ const isFocusable = /*@__PURE__*/getDefaultExportFromCjs(focusable.exports);
 
 }(window, document));
 
-const postTooltipCss = ":host{--post-contrast-color:#fff;--post-bg-rgb:51, 51, 51}post-popovercontainer::part(popover){padding:.25rem .5rem;max-width:13.5rem;min-height:1rem}post-popovercontainer.has-arrow::part(popover)::after{position:absolute;content:\"\";inset:-13px;z-index:-1}";
+const postTooltipCss = ":host{--post-contrast-color:#fff;--post-bg-rgb:51, 51, 51}post-popovercontainer{padding:.25rem .5rem;max-width:13.5rem;min-height:1rem}post-popovercontainer[arrow]::after{position:absolute;content:\"\";inset:-13px;z-index:-1}";
 const PostTooltipStyle0 = postTooltipCss;
 
+const OPEN_DELAY = 650; // matches HTML title delay
 /**
  * @slot default - Slot for the content of the tooltip.
  */
@@ -4858,6 +4859,13 @@ const PostTooltip = /*@__PURE__*/ proxyCustomElement(class PostTooltip extends H
         this.__attachShadow();
         this.placement = 'top';
         this.arrow = true;
+        this.delayed = false;
+    }
+    validateDelayed() {
+        checkEmptyOrType(this.delayed, 'boolean', 'The post-tooltip "delayed" property should be a boolean.');
+    }
+    connectedCallback() {
+        this.validateDelayed();
     }
     componentDidLoad() {
         if (!this.host.id) {
@@ -4910,6 +4918,8 @@ const PostTooltip = /*@__PURE__*/ proxyCustomElement(class PostTooltip extends H
      * @param target An element with [data-tooltip-target="id"] where the tooltip should be shown
      */
     async show(target) {
+        if (this.delayed)
+            await timeout(OPEN_DELAY);
         this.popoverRef.show(target);
     }
     /**
@@ -4943,16 +4953,22 @@ const PostTooltip = /*@__PURE__*/ proxyCustomElement(class PostTooltip extends H
     }
     render() {
         const popoverClass = `${this.arrow ? ' has-arrow' : ''}`;
-        return (h(Host, { key: 'b0d7189566ac508ebd711e563a045d1797b06afb', "data-version": version$1, role: "tooltip", onPointerOver: this.handleInterest, onPointerOut: this.handleInterestLost, onFocusIn: this.handleInterest, onFocusOut: this.handleInterestLost }, h("post-popovercontainer", { key: 'e8e4eba9431feb03fd2209884f129d6fe46516a8', class: popoverClass, arrow: this.arrow, placement: this.placement, ref: (el) => (this.popoverRef = el) }, h("slot", { key: '8ab50141cce24665aa10b9b31db5b14342de2040' }))));
+        return (h(Host, { key: 'de8f7f40645168240a3bcb70fd014ea2cfefbeb6', "data-version": version$1, role: "tooltip", onPointerOver: this.handleInterest, onPointerOut: this.handleInterestLost, onFocusIn: this.handleInterest, onFocusOut: this.handleInterestLost }, h("post-popovercontainer", { key: '4cecbb91117c4dd46c7aea6f084a84de995c25b7', class: popoverClass, arrow: this.arrow, placement: this.placement, ref: (el) => (this.popoverRef = el) }, h("slot", { key: 'c023b8f26189ed2c0dc4573914e92ce65f50ac18' }))));
     }
     get host() { return this; }
+    static get watchers() { return {
+        "delayed": ["validateDelayed"]
+    }; }
     static get style() { return PostTooltipStyle0; }
 }, [1, "post-tooltip", {
         "placement": [1],
         "arrow": [4],
+        "delayed": [4],
         "show": [64],
         "hide": [64],
         "toggle": [64]
+    }, undefined, {
+        "delayed": ["validateDelayed"]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {