@swisspost/design-system-components 10.7.0 → 10.9.0

package/dist/collection/components/post-progressbar/post-progressbar.js

@@ -43,7 +43,7 @@ export class PostProgressbar {
         const max = this.getEffectiveMax();
         const value = this.getEffectiveValue(min, max);
         const percentage = ((value - min) / (max - min)) * 100;
-        return (h(Host, { key: 'c29b1fa3dca89d999c2a55bd58c9c7450ed767c6', role: "progressbar", "aria-valuenow": value, "aria-valuemin": min, "aria-valuemax": max }, h("div", { key: 'aaff038be7bdaf99de1e94c7479c2b57947195ac', class: "progress-value", style: { '--post-progressbar-value': `${percentage}%` } })));
+        return (h(Host, { key: '26bdbb5219393e8b44e2fe5395d8a4cd8aa7e18a', role: "progressbar", "aria-valuenow": value, "aria-valuemin": min, "aria-valuemax": max }, h("div", { key: '65b81479fac7aa6024556ef6589064f997f4394e', class: "progress-value", style: { '--post-progressbar-value': `${percentage}%` } })));
     }
     static get is() { return "post-progressbar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/post-rating/post-rating.js

@@ -83,7 +83,7 @@ export class PostRating {
         }
     }
     render() {
-        return (h(Host, { key: '727813875ba5d754ec17f4a2b151c0c6cd4ab5ca', "data-version": version }, h("div", { key: '1ac7e5db0098568c16551a4850442e4c8f0e686b', 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} / ${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: 'c793abbf5e0d01bb19dc4464ebd75249959a1717', "data-version": version }, h("div", { key: '357946df40a3d3a85ece2d0ac6ecc761951d9471', 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} / ${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/collection/components/post-side-navigation/post-side-navigation.css

@@ -1 +1 @@
-:host{display:flex}:host,:host dialog{background-color:var(--post-scheme-color-palette-bg-2);border-inline-end:var(--post-device-border-width-alternative1) solid var(--post-scheme-color-interactive-primary-enabled-stroke4)}:host dialog{overflow:visible;width:var(--post-core-dimension-296);bottom:auto;right:auto;border:none;padding:0;max-height:100dvh;transform:translateX(-100%);transition-property:transform,overlay,display;transition-behavior:allow-discrete;transition-duration:350ms;box-shadow:var(--post-device-elevation-300)}:host dialog[open]{transform:translateX(0)}@starting-style{:host dialog[open]{transform:translateX(-100%)}}@media(prefers-reduced-motion: reduce){:host dialog{transition:none}}:host post-closebutton{transform:translate(50%, 0)}
+:host{display:flex}:host,:host dialog{background-color:var(--post-scheme-color-palette-bg-2);border-inline-end:var(--post-device-border-width-alternative1) solid var(--post-scheme-color-interactive-primary-enabled-stroke4)}:host dialog{overflow:visible;width:var(--post-core-dimension-296);bottom:auto;right:auto;border:none;padding:0;max-height:100dvh;transform:translateX(-100%);transition-property:transform,overlay,display;transition-behavior:allow-discrete;transition-duration:350ms;box-shadow:var(--post-device-elevation-300)}:host dialog:focus,:host dialog:focus-visible{outline:none}:host dialog[open]{transform:translateX(0)}@starting-style{:host dialog[open]{transform:translateX(-100%)}}@media(prefers-reduced-motion: reduce){:host dialog{transition:none}}:host post-closebutton{transform:translate(50%, 0)}

package/dist/collection/components/post-side-navigation/post-side-navigation.js

@@ -11,7 +11,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { h, Host, } from "@stencil/core";
 import { version } from "../../../../package";
 import { breakpoint } from "../../utils/breakpoints";
-import { getFocusableChildren, OneOf, Required, Type } from "../../utils/index";
+import { getFocusableChildren, isFocusVisible, OneOf, Required, Type } from "../../utils/index";
 import { SIDE_NAVIGATION_SIZES } from "./side-navigation-styles";
 /**
  * @slot default - Slot for the navigation content (must be a `<nav>` landmark with proper heading)
@@ -90,9 +90,13 @@ export class PostSideNavigation {
     async show() {
         if (this.device === 'desktop')
             return;
+        // Only move focus into the nav if the trigger was keyboard-focus-visible;
+        // that's the browser's own signal for a keyboard-driven interaction.
+        const wasTriggerFocusVisible = isFocusVisible(document.activeElement);
         this.dialog.showModal();
         this.postToggle.emit(true);
-        this.focusNav();
+        if (wasTriggerFocusVisible)
+            this.focusNav();
     }
     /**
      * Closes the navigation programmatically.
@@ -129,7 +133,7 @@ export class PostSideNavigation {
             } }, h("slot", null), h("post-closebutton", { onClick: () => this.hide() }, this.textClose)));
     }
     render() {
-        return (h(Host, { key: 'f7d9b4e515e5085d78e452298bdfbfb2325e7422', "data-version": version }, this.device === 'desktop' ? this.renderNav() : this.renderDialog()));
+        return (h(Host, { key: 'd323d8990ed9abfb5ca6c15daa70d49dabd496f9', "data-version": version }, this.device === 'desktop' ? this.renderNav() : this.renderDialog()));
     }
     static get is() { return "post-side-navigation"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/post-side-navigation-trigger/post-side-navigation-trigger.js

@@ -85,7 +85,7 @@ export class PostSideNavigationTrigger {
         await this.sideNavigation?.toggle();
     }
     render() {
-        return (h(Host, { key: '1c908083562ec5ca01cd9410c72ac78ae11ce72f', "data-version": version }, h("slot", { key: '38f63424e8c66b4bf926418b57555dc676d24d45' })));
+        return (h(Host, { key: '2822a6c7246da96de537eff3e3fbf5a2db400547', "data-version": version }, h("slot", { key: '0bb02d90c7916a4dbfe6dd7fc0f4325509939a80' })));
     }
     static get is() { return "post-side-navigation-trigger"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/post-stepper/post-stepper.js

@@ -104,7 +104,7 @@ export class PostStepper {
         }
     }
     render() {
-        return (h(Host, { key: 'e6d1f0498cb3de68badef6428cfe8fdff73b879b', "data-version": version }, h("ol", { key: '4c10c32d36eaeeb19712f7d99dcba7d5337d89a1' }, h("slot", { key: 'ced502f01025f44c09747299cf60c82ebcd905da', onSlotchange: () => this.updateSteps() })), h("div", { key: '93cfc9fbd328d4a384c56ccf1f884053643f88e6', class: "active-step", "aria-hidden": "true" }, h("span", { key: '076fad4efc393852d024157011a0e86d90ecfe99', class: "active-step-label" }, this.mobileActiveStepLabel), h("span", { key: '814817862389cd55859aec49205fae255cbbf1d7', innerHTML: this.mobileActiveStepName }))));
+        return (h(Host, { key: '52c9943bca4c1d7b1d964d812ce21d8b0eb2d236', "data-version": version }, h("ol", { key: 'ea1f27a214d9cdf14b5f2d07f14a8d54836a32b3' }, h("slot", { key: '6f07fe49d55152123dc39645ef17bf5557753005', onSlotchange: () => this.updateSteps() })), h("div", { key: 'ad3af45bc5d1493f9f1084cc28c77c39d27cbd35', class: "active-step", "aria-hidden": "true" }, h("span", { key: '6e3f5decadc8bcc67812dd67f6efe0afa0613b46', class: "active-step-label" }, this.mobileActiveStepLabel), h("span", { key: '4aeb9376181d78007a929c5e8e4ba11c181039bb', innerHTML: this.mobileActiveStepName }))));
     }
     static get is() { return "post-stepper"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/post-stepper-item/post-stepper-item.js

@@ -2,7 +2,7 @@ import { version } from "../../../../package";
 import { h, Host } from "@stencil/core";
 export class PostStepperItem {
     render() {
-        return (h(Host, { key: 'f41ae27d8de89912b3aa34d9c89f5ec69f3df301', "data-version": version, role: "listitem" }, h("span", { key: '00a0dd2eb3fb020e49c5782245e1f3e72c77e780', class: "stepper-item-content" }, h("span", { key: 'bc9932083d295b92db24ddd22cb18a755db5ad11', class: "step-hidden-label visually-hidden" }), h("span", { key: 'efe2d809c82c1d7de9e0cdf4e52b924943afa0bf', class: "label" }, h("slot", { key: '47aceca3fc331ef91da60674dbc2af5ea7e76ec8' })))));
+        return (h(Host, { key: '53b052a2b68a93df9fda7f80f23d602d8a8efc56', "data-version": version, role: "listitem" }, h("span", { key: 'e06841841e7fad42ff9de3e39dadf5fab96b9952', class: "stepper-item-content" }, h("span", { key: 'f934ef19fbdd65111b7cf561dcc9297122d62595', class: "step-hidden-label visually-hidden" }), h("span", { key: '213db918f5ab854225974678c50176bb565ac2b1', class: "label" }, h("slot", { key: 'd8e067ea304700e37edb996a4c715d41e209b8d8' })))));
     }
     static get is() { return "post-stepper-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/post-tab-item/post-tab-item.js

@@ -44,9 +44,9 @@ export class PostTabItem {
     }
     render() {
         const isSSR = Build.isServer;
-        return (h(Host, { key: '0c98772d01658e932be9982b6983eb3c1f0c4053', id: this.tabId, role: this.isPagesVariant ? undefined : 'tab', "data-version": version, "data-pages-variant": this.isPagesVariant.toString(), "aria-selected": this.isPagesVariant ? undefined : 'false', "aria-disabled": this.disabled ? 'true' : undefined, tabindex: this.isPagesVariant ? undefined : '-1', class: `${this.isPagesVariant ? 'nav-item' : 'tab-title'}${isSSR && !this.isPagesVariant ? ' ssr' : ''}`, style: isSSR && !this.isPagesVariant
+        return (h(Host, { key: '974d9682ef0448cf3adf9481ba472a5c196349b3', id: this.tabId, role: this.isPagesVariant ? undefined : 'tab', "data-version": version, "data-pages-variant": this.isPagesVariant.toString(), "aria-selected": this.isPagesVariant ? undefined : 'false', "aria-disabled": this.disabled ? 'true' : undefined, tabindex: this.isPagesVariant ? undefined : '-1', class: `${this.isPagesVariant ? 'nav-item' : 'tab-title'}${isSSR && !this.isPagesVariant ? ' ssr' : ''}`, style: isSSR && !this.isPagesVariant
                 ? { '--active': `var(--post-tab-item-${this.name}, 0)` }
-                : undefined }, h("slot", { key: 'fba27566a1226e560161f839df050666763bdce5' })));
+                : undefined }, h("slot", { key: '6a7ed6323892a40ea22e487bc9460af69fda02c6' })));
     }
     static get is() { return "post-tab-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/post-tab-panel/post-tab-panel.js

@@ -21,7 +21,7 @@ export class PostTabPanel {
     }
     render() {
         const isSSR = Build.isServer;
-        return (h(Host, { key: '2b02063bf2e67f4e826155759f28a1ae47b0c8e0', "data-version": version, id: this.panelId, role: "tabpanel", slot: "panels", style: isSSR ? { display: `var(--post-tab-panel-${this.for}, none)` } : undefined }, h("slot", { key: 'b4c39e035d0f49f5654b030f4aada27fbebb122c' })));
+        return (h(Host, { key: '07d93ddaa69253a956ed50cd9ecd6ed039fbc6e2', "data-version": version, id: this.panelId, role: "tabpanel", slot: "panels", style: isSSR ? { display: `var(--post-tab-panel-${this.for}, none)` } : undefined }, h("slot", { key: 'd6887db4e0e4dc22f8f8fdf098d6068ef4bd1a91' })));
     }
     static get is() { return "post-tab-panel"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/post-tabs/post-tabs.css

@@ -1 +1 @@
-:host{display:block}:host .tabs-wrapper{position:relative;display:flex;align-items:center}:host .tabs-wrapper button.scroll-btn{padding:0;overflow:visible;border:0;background:none;color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);font:inherit;-webkit-user-select:none;user-select:none;appearance:button;display:flex;align-items:center;justify-content:center;transition:background-color 100ms,border-color 100ms,color 100ms;cursor:pointer}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .tabs-wrapper button.scroll-btn{background-color:ButtonFace !important}:host .tabs-wrapper button.scroll-btn:hover{background-color:Highlight !important}}:host .tabs-wrapper button.scroll-btn post-icon{color:currentColor}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .tabs-wrapper button.scroll-btn post-icon{color:Highlight}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .tabs-wrapper button.scroll-btn:hover post-icon{color:canvas}}:host .tabs-wrapper button.scroll-btn[hidden]{display:none}:host .tabs-wrapper button.scroll-btn{outline-offset:var(--post-device-spacing-padding-44) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}:host .tabs-wrapper button.scroll-btn:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .tabs-wrapper button.scroll-btn:is(:focus-visible,:has(:focus-visible),.pretend-focus){transition:none}:host .tabs-wrapper button.scroll-btn:is(:focus-visible,:has(:focus-visible),.pretend-focus):hover{color:HighlightText;border-color:HighlightText}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .tabs-wrapper button.scroll-btn:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){:host .tabs-wrapper button.scroll-btn:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .tabs-wrapper button.scroll-btn:is(:focus-visible,:focus-within,.pretend-focus){transition:none}:host .tabs-wrapper button.scroll-btn:is(:focus-visible,:focus-within,.pretend-focus):hover{color:HighlightText;border-color:HighlightText}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .tabs-wrapper button.scroll-btn:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}:host .tabs-wrapper .tabs{overflow-x:hidden;background-color:rgba(0,0,0,0) !important;display:flex;flex-wrap:nowrap;align-items:end;overscroll-behavior-x:contain;white-space:nowrap;margin-block:0;padding-inline-start:0;list-style:none}:host(.page-tabs){overflow:visible !important}:host(.page-tabs) .tabs-wrapper{margin-inline:calc(-1*(var(--post-container-offset)))}@media screen and (min-width: 1024px){:host(.page-tabs) .tabs-wrapper{margin-inline:calc(-1 * (var(--post-container-offset)) + 20px)}:host(.page-tabs) .tabs-wrapper::after{box-shadow:20px 0 0 var(--post-palette-color-nested-tabs-page-stroke),-20px 0 0 var(--post-palette-color-nested-tabs-page-stroke)}}@media screen and (min-width: 1024px)and (forced-colors: active),screen and (min-width: 1024px)and (-ms-high-contrast: active),screen and (min-width: 1024px)and (-ms-high-contrast: white-on-black){:host(.page-tabs) .tabs-wrapper::after{box-shadow:20px 0 0 LinkText,-20px 0 0 LinkText}}:host(.page-tabs) .tabs-wrapper button.scroll-btn{color:var(--post-scheme-color-interactive-primary-enabled-fg5);background-color:var(--post-scheme-color-interactive-primary-enabled-bg5);border:var(--post-device-border-width-default) solid var(--post-scheme-color-interactive-primary-enabled-stroke);position:absolute;z-index:2;box-shadow:var(--post-device-elevation-200);border-radius:var(--post-device-border-radius-2)}:host(.page-tabs) .tabs-wrapper button.scroll-btn:hover{border-color:var(--post-scheme-color-interactive-primary-hover-stroke) !important;color:var(--post-scheme-color-interactive-primary-hover-fg4);background-color:var(--post-scheme-color-interactive-primary-hover-bg8)}:host(.page-tabs) .tabs-wrapper button.scroll-btn.scroll-btn-left{inset-inline-start:0;border-inline-start:none;border-radius:0 var(--post-device-border-radius-2) var(--post-device-border-radius-2) 0}:host(.page-tabs) .tabs-wrapper button.scroll-btn.scroll-btn-right{inset-inline-end:0;border-inline-end:none;border-radius:var(--post-device-border-radius-2) 0 0 var(--post-device-border-radius-2)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host(.page-tabs) .tabs-wrapper button.scroll-btn.scroll-btn{background-color:Highlight;color:HighlightText}}:host(.page-tabs) .tabs-wrapper::after{content:"";position:absolute;inset-block-end:0;inset-inline-start:0;width:100%;height:var(--post-device-border-width-default);background-color:var(--post-palette-color-nested-tabs-page-stroke)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host(.page-tabs) .tabs-wrapper::after{background-color:LinkText}}:host(.page-tabs) .tabs-wrapper .tabs{padding-inline:calc(var(--post-container-offset));gap:var(--post-device-spacing-gap-inline-5);scrollbar-width:none}:host(.page-tabs) .tabs-wrapper .tabs::-webkit-scrollbar{display:none}:host(.page-tabs:not([size=small])) button.scroll-btn{top:var(--post-device-spacing-padding-36)}:host(.page-tabs[size=small]) button.scroll-btn{top:var(--post-device-spacing-padding-36)}:host(.content-tabs) .tabs-wrapper button.scroll-btn{flex-shrink:0;color:var(--post-scheme-color-interactive-button-tertiary-enabled-fg)}:host(.content-tabs) .tabs-wrapper button.scroll-btn:hover{border-color:var(--post-scheme-color-interactive-primary-hover-stroke) !important;color:var(--post-scheme-color-interactive-button-tertiary-hover-fg)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host(.content-tabs) .tabs-wrapper button.scroll-btn:hover{color:HighlightText}}:host(post-tabs:not([size=small])) button.scroll-btn{height:var(--post-device-sizing-interactive-button-height-10);width:var(--post-device-sizing-interactive-button-width-1);border-radius:var(--post-device-border-radius-2)}:host(post-tabs:not([size=small])) button.scroll-btn post-icon{height:var(--post-device-sizing-interactive-icon-size5);width:var(--post-device-sizing-interactive-icon-size5)}:host(.page-tabs:not([size=small])) button.scroll-btn-left{padding-inline:var(--post-device-spacing-padding-39) var(--post-device-spacing-padding-40)}:host(.page-tabs:not([size=small])) button.scroll-btn-right{padding-inline:var(--post-device-spacing-padding-40) var(--post-device-spacing-padding-39)}:host([size=small]) button.scroll-btn{height:var(--post-device-sizing-interactive-button-size-1);width:var(--post-device-sizing-interactive-button-size-1);border-radius:var(--post-device-border-radius-2)}:host([size=small]) button.scroll-btn post-icon{height:var(--post-device-sizing-interactive-icon-size4);width:var(--post-device-sizing-interactive-icon-size4)}:host(.page-tabs[size=small]) button.scroll-btn-left{padding-inline:var(--post-device-spacing-padding-42) var(--post-device-spacing-padding-43)}:host(.page-tabs[size=small]) button.scroll-btn-right{padding-inline:var(--post-device-spacing-padding-43) var(--post-device-spacing-padding-42)}
+:host{display:block}:host .tabs-wrapper{position:relative;display:flex;align-items:center}:host .tabs-wrapper button.scroll-btn{padding:0;overflow:visible;border:0;background:none;color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);font:inherit;-webkit-user-select:none;user-select:none;appearance:button;display:flex;align-items:center;justify-content:center;transition:background-color 100ms,border-color 100ms,color 100ms;cursor:pointer}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .tabs-wrapper button.scroll-btn{background-color:ButtonFace !important}:host .tabs-wrapper button.scroll-btn:hover{background-color:Highlight !important}}:host .tabs-wrapper button.scroll-btn post-icon{color:currentColor}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .tabs-wrapper button.scroll-btn post-icon{color:Highlight}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .tabs-wrapper button.scroll-btn:hover post-icon{color:canvas}}:host .tabs-wrapper button.scroll-btn[hidden]{display:none}:host .tabs-wrapper button.scroll-btn{outline-offset:var(--post-device-spacing-padding-44) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}:host .tabs-wrapper button.scroll-btn:focus-visible{outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .tabs-wrapper button.scroll-btn:focus-visible{transition:none}:host .tabs-wrapper button.scroll-btn:focus-visible:hover{color:HighlightText;border-color:HighlightText}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .tabs-wrapper button.scroll-btn:focus-visible{outline-color:Highlight !important}}:host .tabs-wrapper button.scroll-btn.pretend-focus{outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .tabs-wrapper button.scroll-btn.pretend-focus{transition:none}:host .tabs-wrapper button.scroll-btn.pretend-focus:hover{color:HighlightText;border-color:HighlightText}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .tabs-wrapper button.scroll-btn.pretend-focus{outline-color:Highlight !important}}:host .tabs-wrapper button.scroll-btn:has(:focus-visible){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .tabs-wrapper button.scroll-btn:has(:focus-visible){transition:none}:host .tabs-wrapper button.scroll-btn:has(:focus-visible):hover{color:HighlightText;border-color:HighlightText}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .tabs-wrapper button.scroll-btn:has(:focus-visible){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){:host .tabs-wrapper button.scroll-btn:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .tabs-wrapper button.scroll-btn:is(:focus-visible,:focus-within,.pretend-focus){transition:none}:host .tabs-wrapper button.scroll-btn:is(:focus-visible,:focus-within,.pretend-focus):hover{color:HighlightText;border-color:HighlightText}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .tabs-wrapper button.scroll-btn:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}:host .tabs-wrapper .tabs{overflow-x:hidden;background-color:rgba(0,0,0,0) !important;display:flex;flex-wrap:nowrap;align-items:end;overscroll-behavior-x:contain;white-space:nowrap;margin-block:0;padding-inline-start:0;list-style:none}:host(.page-tabs){overflow:visible !important}:host(.page-tabs) .tabs-wrapper{margin-inline:calc(-1*(var(--post-container-offset)))}@media screen and (min-width: 1024px){:host(.page-tabs) .tabs-wrapper{margin-inline:calc(-1 * (var(--post-container-offset)) + 20px)}:host(.page-tabs) .tabs-wrapper::after{box-shadow:20px 0 0 var(--post-palette-color-nested-tabs-page-stroke),-20px 0 0 var(--post-palette-color-nested-tabs-page-stroke)}}@media screen and (min-width: 1024px)and (forced-colors: active),screen and (min-width: 1024px)and (-ms-high-contrast: active),screen and (min-width: 1024px)and (-ms-high-contrast: white-on-black){:host(.page-tabs) .tabs-wrapper::after{box-shadow:20px 0 0 LinkText,-20px 0 0 LinkText}}:host(.page-tabs) .tabs-wrapper button.scroll-btn{color:var(--post-scheme-color-interactive-primary-enabled-fg5);background-color:var(--post-scheme-color-interactive-primary-enabled-bg5);border:var(--post-device-border-width-default) solid var(--post-scheme-color-interactive-primary-enabled-stroke);position:absolute;z-index:2;box-shadow:var(--post-device-elevation-200);border-radius:var(--post-device-border-radius-2)}:host(.page-tabs) .tabs-wrapper button.scroll-btn:hover{border-color:var(--post-scheme-color-interactive-primary-hover-stroke) !important;color:var(--post-scheme-color-interactive-primary-hover-fg4);background-color:var(--post-scheme-color-interactive-primary-hover-bg8)}:host(.page-tabs) .tabs-wrapper button.scroll-btn.scroll-btn-left{inset-inline-start:0;border-inline-start:none;border-radius:0 var(--post-device-border-radius-2) var(--post-device-border-radius-2) 0}:host(.page-tabs) .tabs-wrapper button.scroll-btn.scroll-btn-right{inset-inline-end:0;border-inline-end:none;border-radius:var(--post-device-border-radius-2) 0 0 var(--post-device-border-radius-2)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host(.page-tabs) .tabs-wrapper button.scroll-btn.scroll-btn{background-color:Highlight;color:HighlightText}}:host(.page-tabs) .tabs-wrapper::after{content:"";position:absolute;inset-block-end:0;inset-inline-start:0;width:100%;height:var(--post-device-border-width-default);background-color:var(--post-palette-color-nested-tabs-page-stroke)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host(.page-tabs) .tabs-wrapper::after{background-color:LinkText}}:host(.page-tabs) .tabs-wrapper .tabs{padding-inline:calc(var(--post-container-offset));gap:var(--post-device-spacing-gap-inline-5);scrollbar-width:none}:host(.page-tabs) .tabs-wrapper .tabs::-webkit-scrollbar{display:none}:host(.page-tabs:not([size=small])) button.scroll-btn{top:var(--post-device-spacing-padding-36)}:host(.page-tabs[size=small]) button.scroll-btn{top:var(--post-device-spacing-padding-36)}:host(.content-tabs) .tabs-wrapper button.scroll-btn{flex-shrink:0;color:var(--post-scheme-color-interactive-button-tertiary-enabled-fg)}:host(.content-tabs) .tabs-wrapper button.scroll-btn:hover{border-color:var(--post-scheme-color-interactive-primary-hover-stroke) !important;color:var(--post-scheme-color-interactive-button-tertiary-hover-fg)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host(.content-tabs) .tabs-wrapper button.scroll-btn:hover{color:HighlightText}}:host(post-tabs:not([size=small])) button.scroll-btn{height:var(--post-device-sizing-interactive-button-height-10);width:var(--post-device-sizing-interactive-button-width-1);border-radius:var(--post-device-border-radius-2)}:host(post-tabs:not([size=small])) button.scroll-btn post-icon{height:var(--post-device-sizing-interactive-icon-size5);width:var(--post-device-sizing-interactive-icon-size5)}:host(.page-tabs:not([size=small])) button.scroll-btn-left{padding-inline:var(--post-device-spacing-padding-39) var(--post-device-spacing-padding-40)}:host(.page-tabs:not([size=small])) button.scroll-btn-right{padding-inline:var(--post-device-spacing-padding-40) var(--post-device-spacing-padding-39)}:host([size=small]) button.scroll-btn{height:var(--post-device-sizing-interactive-button-size-1);width:var(--post-device-sizing-interactive-button-size-1);border-radius:var(--post-device-border-radius-2)}:host([size=small]) button.scroll-btn post-icon{height:var(--post-device-sizing-interactive-icon-size4);width:var(--post-device-sizing-interactive-icon-size4)}:host(.page-tabs[size=small]) button.scroll-btn-left{padding-inline:var(--post-device-spacing-padding-42) var(--post-device-spacing-padding-43)}:host(.page-tabs[size=small]) button.scroll-btn-right{padding-inline:var(--post-device-spacing-padding-43) var(--post-device-spacing-padding-42)}

package/dist/collection/components/post-tabs/post-tabs.js

@@ -39,6 +39,18 @@ export class PostTabs {
          * Default is 'large'.
          */
         this.size = 'large';
+        // Showing or hiding a scroll button changes the container width, which can happen in the middle of a scroll:
+        // the scroll target has to be recomputed, otherwise the scroll stops short of the end
+        this.handleContainerResize = () => {
+            this.updateScrollButtons();
+            // When the whole component resizes instead (e.g. the window gets narrower), the tabs keep their position
+            const hostWidth = this.host.clientWidth;
+            if (hostWidth !== this.hostWidth) {
+                this.hostWidth = hostWidth;
+                this.pendingScroll = undefined;
+            }
+            this.pendingScroll?.();
+        };
         // Handles the visibility of scroll buttons based on the scroll position of the tabs container
         this.updateScrollButtons = () => {
             if (!this.tabsContainer)
@@ -122,7 +134,8 @@ export class PostTabs {
         this.contentObserver?.observe(this.host, config);
     }
     setupResizeObserver() {
-        this.resizeObserver = new ResizeObserver(this.updateScrollButtons);
+        this.hostWidth = this.host.clientWidth;
+        this.resizeObserver = new ResizeObserver(this.handleContainerResize);
         this.resizeObserver.observe(this.tabsContainer);
     }
     handleContentChange(mutations) {
@@ -391,11 +404,23 @@ export class PostTabs {
         const paddingStart = Number.parseFloat(style.paddingInlineStart) || 0;
         const paddingEnd = Number.parseFloat(style.paddingInlineEnd) || 0;
         const contentWidth = this.tabsContainer.clientWidth - paddingStart - paddingEnd;
+        const maxScrollLeft = this.tabsContainer.scrollWidth - this.tabsContainer.clientWidth;
+        const reachesEnd = sign > 0 && this.tabsContainer.scrollLeft + contentWidth >= maxScrollLeft;
+        this.pendingScroll = reachesEnd ? () => this.scrollToEnd() : undefined;
         this.tabsContainer.scrollBy({
             left: sign * contentWidth,
             behavior: 'smooth',
         });
     }
+    scrollToEnd() {
+        const container = this.tabsContainer;
+        const maxScrollLeft = container.scrollWidth - container.clientWidth;
+        if (container.scrollLeft >= maxScrollLeft) {
+            this.pendingScroll = undefined;
+            return;
+        }
+        container.scrollTo({ left: maxScrollLeft, behavior: 'smooth' });
+    }
     scrollTabIntoView(tab, behavior = 'instant') {
         const container = this.tabsContainer;
         const style = getComputedStyle(container);
@@ -405,10 +430,13 @@ export class PostTabs {
         const tabRight = tabLeft + tab.offsetWidth;
         const containerLeft = container.scrollLeft + paddingStart;
         const containerRight = containerLeft + container.clientWidth - paddingStart - paddingEnd;
+        // Only aligning the tab to the right edge depends on the container width
+        this.pendingScroll = undefined;
         if (tabLeft < containerLeft) {
             container.scrollTo({ left: tabLeft - paddingStart, behavior });
         }
         else if (tabRight > containerRight) {
+            this.pendingScroll = () => this.scrollTabIntoView(tab, behavior);
             container.scrollTo({ left: tabRight - container.clientWidth + paddingEnd, behavior });
         }
     }
@@ -427,10 +455,10 @@ export class PostTabs {
             }
             : undefined;
         const style = isSSR && !this.isPagesVariant ? tabStyle : undefined;
-        return (h(Host, { key: 'fb65fd2589517dd6d86e86435ec6b3a3b64b093d', "data-version": version, style: style }, h("div", { key: 'dbcdd791af381ccc23953acb38a8e71527a804ee', class: "tabs-wrapper", part: "post-tabs" }, h("button", { key: '20ce30515d80b282aa93f20a1f3281a1ef0f6359', ref: el => (this.leftScrollButton = el), class: "scroll-btn scroll-btn-left", type: "button", "aria-label": this.textPrevTabItems, tabindex: this.showLeftScrollButton ? 0 : -1, hidden: !this.showLeftScrollButton, onClick: () => this.scrollTabs('prev') }, h("post-icon", { key: '9a5402a28656d7a4459b9b848425bd15a45a0fce', name: "chevronleft" })), h(TabsContainer, { key: 'e821db02fd66aef6cf7a9fb5d925b0906571f3b6', ref: el => (this.tabsContainer = el), class: "tabs", role: this.isPagesVariant ? undefined : 'tablist', "aria-label": this.isPagesVariant ? this.label : undefined }, h("slot", { key: 'e3650e43ac269173cb58f1624f02778bf094573c', onSlotchange: () => {
+        return (h(Host, { key: '10c247c7c021a4fbbd8f79ce7b82888e0b7c8be2', "data-version": version, style: style }, h("div", { key: '5ccae325884c7cff0eec399da23513c0b864dde0', class: "tabs-wrapper", part: "post-tabs" }, h("button", { key: 'dd38a22327801b790f849449055b765d2c1bc3b6', ref: el => (this.leftScrollButton = el), class: "scroll-btn scroll-btn-left", type: "button", "aria-label": this.textPrevTabItems, tabindex: -1, hidden: !this.showLeftScrollButton, onClick: () => this.scrollTabs('prev') }, h("post-icon", { key: '461a92ab071472c995d0adad5c73c75c82d982fe', name: "chevronleft" })), h(TabsContainer, { key: 'edecdbfdc681b96539e5a0755330faf1795ecb35', ref: el => (this.tabsContainer = el), class: "tabs", role: this.isPagesVariant ? undefined : 'tablist', "aria-label": this.isPagesVariant ? this.label : undefined }, h("slot", { key: '6240234a2168b2e889cab92a7688731ca93a63a6', onSlotchange: () => {
                 this.moveMisplacedTabs();
                 this.enableTabs();
-            } })), h("button", { key: '4345a9bc121ce187022cddf019d5c86d875a70e9', ref: el => (this.rightScrollButton = el), class: "scroll-btn scroll-btn-right", type: "button", "aria-label": this.textNextTabItems, tabindex: this.showRightScrollButton ? 0 : -1, hidden: !this.showRightScrollButton, onClick: () => this.scrollTabs('next') }, h("post-icon", { key: '2df749c1a4e506d9940ce61e077d0f0f330b7342', name: "chevronright" }))), !this.isPagesVariant && (h("div", { key: '184db29a5826af78d142ed1489be33c45831970b', class: "tab-content", part: "post-tabs-content" }, h("slot", { key: '4a984c7de97f2f89e7fd0f829f5bc62e2323f056', name: "panels", onSlotchange: () => this.moveMisplacedPanels() })))));
+            } })), h("button", { key: 'a4030c48cbbefb578b03ee9dad35724a1fdd5547', ref: el => (this.rightScrollButton = el), class: "scroll-btn scroll-btn-right", type: "button", "aria-label": this.textNextTabItems, tabindex: -1, hidden: !this.showRightScrollButton, onClick: () => this.scrollTabs('next') }, h("post-icon", { key: 'd89c831bdd2faf1991793df47e7ca79bf49e5339', name: "chevronright" }))), !this.isPagesVariant && (h("div", { key: 'aba319437ba8bfb9e7a144a44efcc32d82ef6b02', class: "tab-content", part: "post-tabs-content" }, h("slot", { key: 'e689b5e3a030909c5c77899ac899ded2481f82a6', name: "panels", onSlotchange: () => this.moveMisplacedPanels() })))));
     }
     static get is() { return "post-tabs"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/post-togglebutton/post-togglebutton.js

@@ -29,7 +29,7 @@ export class PostTogglebutton {
         });
     }
     render() {
-        return (h(Host, { key: '81fa9d922480059096e4146c10cf2ef72357b482', "data-version": version, role: "button", tabindex: "0", "aria-pressed": this.toggled.toString() }, h("slot", { key: '4e8d793e3867ba4c9c8e17d509652309a79f032a' })));
+        return (h(Host, { key: '6f61a07946f3e67bace0a883b73c424893c4043d', "data-version": version, role: "button", tabindex: "0", "aria-pressed": this.toggled.toString() }, h("slot", { key: 'fd9b93e45da499dbb790ad675f3db36e248c1960' })));
     }
     static get is() { return "post-togglebutton"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/post-tooltip/post-tooltip.css

@@ -1 +1 @@
-:host{display:none}:host([open]){display:contents}post-popovercontainer[arrow]::after{position:absolute;content:"";inset:-13px;z-index:-1}post-popovercontainer{--post-current-bg: var(--post-scheme-color-surface-accent-bg);--post-current-fg: var(--post-scheme-color-surface-accent-fg);--post-popovercontainer-arrow-border-width: var(--post-device-border-width-alternative1);--post-popovercontainer-arrow-border-color: var(--post-scheme-color-surface-accent-fg)}post-popovercontainer::part(post-popovercontainer-border-mask){display:block;box-shadow:inset 0 0 0 var(--post-device-spacing-padding-14) var(--post-scheme-color-surface-accent-bg)}post-popovercontainer::part(post-popovercontainer-content){border:var(--post-device-border-width-alternative1) solid var(--post-scheme-color-surface-accent-fg);border-radius:var(--post-device-border-radius-1);padding:var(--post-device-spacing-padding-14) var(--post-device-spacing-padding-15);font-size:var(--post-device-font-size-9);max-width:var(--post-tooltip-max-width, 280px);word-wrap:break-word;white-space:normal}
+:host{display:none}:host([open]){display:contents}post-popovercontainer{--post-current-bg: var(--post-scheme-color-surface-accent-bg);--post-current-fg: var(--post-scheme-color-surface-accent-fg);--post-popovercontainer-arrow-border-width: var(--post-device-border-width-alternative1);--post-popovercontainer-arrow-border-color: var(--post-scheme-color-surface-accent-fg)}post-popovercontainer::part(post-popovercontainer-border-mask){display:block;box-shadow:inset 0 0 0 var(--post-device-spacing-padding-14) var(--post-scheme-color-surface-accent-bg)}post-popovercontainer::part(post-popovercontainer-content){border:var(--post-device-border-width-alternative1) solid var(--post-scheme-color-surface-accent-fg);border-radius:var(--post-device-border-radius-1)}.tooltip-content{box-sizing:border-box;padding:var(--post-device-spacing-padding-14) var(--post-device-spacing-padding-15);font-size:var(--post-device-font-size-9);max-width:var(--post-tooltip-max-width, 280px);word-wrap:break-word;white-space:normal;overflow:hidden}

package/dist/collection/components/post-tooltip/post-tooltip.js

@@ -63,11 +63,13 @@ export class PostTooltip {
      * @param e Popovercontainer toggle event
      */
     handleBeforeToggle(e) {
+        // The 'open' attribute needs to be set synchronously for the popover to be measured correctly.
+        this.host.toggleAttribute('open', e.detail.willOpen);
         this.open = e.detail.willOpen;
     }
     render() {
         const popoverClass = `${this.arrow ? 'has-arrow' : ''}`;
-        return (h(Host, { key: '62d5983e0ef32f851166d0c1d2c457cac0809fdf', "data-version": version }, h("post-popovercontainer", { key: '10150540956510724ab4832ecceb421a7013d983', safeSpace: "trapezoid", class: popoverClass, role: "tooltip", arrow: this.arrow, placement: this.placement, autoHide: true, onPostBeforeToggle: e => this.handleBeforeToggle(e), ref: (el) => (this.popoverRef = el) }, h("slot", { key: 'cdfaf0e916afa55ec3f1a7f64003101985560e27' }))));
+        return (h(Host, { key: '083507ae592ce9be50f6b4217a8d13785039478d', "data-version": version }, h("post-popovercontainer", { key: 'e0436489bd955cee95b287f35759c364b019be94', safeSpace: true, class: popoverClass, role: "tooltip", arrow: this.arrow, placement: this.placement, autoHide: true, onPostBeforeToggle: e => this.handleBeforeToggle(e), ref: (el) => (this.popoverRef = el) }, h("div", { key: '8e6417485a89f56c18e731351de0e9f5db2cdd9a', class: "tooltip-content" }, h("slot", { key: 'e4c9fed0c8a8454c20f504e38557abd8ea253a1b' })))));
     }
     static get is() { return "post-tooltip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/post-tooltip-trigger/post-tooltip-trigger.js

@@ -180,7 +180,7 @@ export class PostTooltipTrigger {
         this.tooltip?.hide();
     }
     render() {
-        return (h(Host, { key: '55adc12f457aa8a5dd4357ed27876b0e526f7ae3', "data-version": version }, h("slot", { key: '84da1734ae1c1ac9376caa693108e3ed54bf176f', onSlotchange: () => this.handleSlotChange() })));
+        return (h(Host, { key: '7811d666f249ead72768adaf5bdc92e47b447d8a', "data-version": version }, h("slot", { key: '68e56c43ebec2abffbf049647ac08757dadf22f9', onSlotchange: () => this.handleSlotChange() })));
     }
     static get is() { return "post-tooltip-trigger"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/test-setup.js

@@ -5,3 +5,31 @@ jest.mock('@stencil/core', () => {
         getElement: (ref) => ref.host ?? document.createElement('post-test'),
     };
 });
+// `newSpecPage` builds fresh component metadata for every page, but Stencil proxies a component
+// class only once (`isProxied`). From the second page on, prop accessors that decorators such as
+// `@Required()` put on the prototype are no longer wired to Stencil's prop storage, so the props
+// read back as `undefined`. Restoring the prototype before every page mimics a fresh module load.
+jest.mock('@stencil/core/testing', () => {
+    const actual = jest.requireActual('@stencil/core/testing');
+    const pristinePrototypes = new WeakMap();
+    return {
+        ...actual,
+        newSpecPage: (options) => {
+            for (const component of options.components ?? []) {
+                const prototype = component.prototype;
+                const pristine = pristinePrototypes.get(prototype);
+                if (!pristine) {
+                    pristinePrototypes.set(prototype, Object.getOwnPropertyDescriptors(prototype));
+                    continue;
+                }
+                for (const key of Reflect.ownKeys(prototype)) {
+                    if (!(key in pristine))
+                        delete prototype[key];
+                }
+                Object.defineProperties(prototype, pristine);
+                delete component.isProxied;
+            }
+            return actual.newSpecPage(options);
+        },
+    };
+});

package/dist/collection/utils/floating-ui/middleware/flip.js

@@ -0,0 +1,77 @@
+import { detectOverflow, } from "@floating-ui/dom";
+import { evaluate, getAxisLength, getOppositeAxisPlacements, getOppositePlacement, getSide, getSideAxis, } from "@floating-ui/utils";
+import { getOppositeSide } from "../util";
+export const FLIP_MIDDLEWARE = 'post-flip';
+/**
+ * Changes the placement of the floating element to keep it in view.
+ *
+ * Unlike the Floating UI `flip` middleware, placements are measured against `minSize` rather than
+ * against the current size of the floating element, and the placement with the smallest deficit is
+ * used when none of them fits.
+ */
+export function flip(options = {}) {
+    return {
+        name: FLIP_MIDDLEWARE,
+        options,
+        async fn(state) {
+            const { middlewareData, placement } = state;
+            // see https://github.com/floating-ui/floating-ui/issues/2549#issuecomment-1719601643
+            if (middlewareData.arrow?.alignmentOffset)
+                return {};
+            const { minSize = {}, ...detectOverflowOptions } = evaluate(options, state);
+            const gap = Math.abs(middlewareData.offset?.[getSideAxis(placement)] ?? 0);
+            const side = getSide(placement);
+            const referenceOverflow = await detectOverflow(state, {
+                ...detectOverflowOptions,
+                elementContext: 'reference',
+            });
+            const floatingOverflow = await detectOverflow(state, {
+                ...detectOverflowOptions,
+                elementContext: 'floating',
+            });
+            // The floating element fits at its current placement, there is nothing left to do.
+            if (Math.max(referenceOverflow[side], floatingOverflow[side]) <= 0)
+                return {};
+            const previous = middlewareData[FLIP_MIDDLEWARE];
+            const measurement = { overflow: referenceOverflow, minSize, gap };
+            let deficits = previous?.deficits ?? [];
+            const placements = previous?.placements ?? (await getPlacements(state, measurement));
+            if (deficits.length < placements.length) {
+                deficits = [...deficits, getDeficit(side, measurement)];
+            }
+            const data = { placements, deficits };
+            // If there are still placements to try, move on to the next one.
+            if (deficits.length < placements.length) {
+                return { data, reset: { placement: placements[deficits.length] } };
+            }
+            // If none of the placements fit, fall back to the one that loses the least space.
+            const fallback = data.placements[data.deficits.indexOf(Math.min(...data.deficits))];
+            return fallback === placement ? { data } : { data, reset: { placement: fallback } };
+        },
+    };
+}
+/**
+ * Returns the placements to try, ordered from most to least promising.
+ */
+async function getPlacements(state, measurement) {
+    const { placement, platform, elements } = state;
+    const { overflow } = measurement;
+    const side = getSide(placement);
+    const placements = [placement, getOppositePlacement(placement)];
+    const mainAxisDeficit = Math.min(getDeficit(side, measurement), getDeficit(getOppositeSide(side), measurement));
+    if (mainAxisDeficit <= 0)
+        return placements;
+    const rtl = (await platform.isRTL?.(elements.floating)) ?? false;
+    const crossAxisPlacements = getOppositeAxisPlacements(placement, true, 'start', rtl);
+    // Try the side with the most available space first.
+    crossAxisPlacements.sort((a, b) => overflow[getSide(a)] - overflow[getSide(b)]);
+    return [...placements, ...crossAxisPlacements];
+}
+/**
+ * Returns the amount of space required to display the floating element at its minimum size on the
+ * given side of the reference element.
+ */
+function getDeficit(side, { minSize, overflow, gap }) {
+    const minLength = minSize[getAxisLength(getSideAxis(side))] ?? 0;
+    return gap + minLength + overflow[side];
+}

package/dist/collection/utils/floating-ui/middleware/safe-space.js

@@ -0,0 +1,52 @@
+import { getNextSide, getOppositeSide, getPreviousSide } from "../util";
+import { getSide, getSideAxis, rectToClientRect, } from "@floating-ui/utils";
+export const SAFE_SPACE_MIDDLEWARE = 'post-safe-space';
+/**
+ * Computes the safe space, the area the pointer can travel through to get from the reference to
+ * the floating element.
+ */
+export function safeSpace() {
+    return {
+        name: SAFE_SPACE_MIDDLEWARE,
+        async fn(state) {
+            const { placement, rects, x, y } = state;
+            const side = getSide(placement);
+            const reference = await getViewportRect(state, rects.reference);
+            const floating = await getViewportRect(state, { ...rects.floating, x, y });
+            const path = [
+                ...getPathAlongSide(floating, getOppositeSide(side)),
+                ...getPathAlongSide(reference, side),
+            ];
+            const points = [];
+            for (let i = 0; i < path.length; i += 2) {
+                points.push(`${path[i]}px ${path[i + 1]}px`);
+            }
+            const data = { polygon: `polygon(${points.join(', ')})` };
+            return { data };
+        },
+    };
+}
+/**
+ * Converts a rectangle from the floating element's offset parent's coordinate system to viewport
+ * coordinates.
+ */
+async function getViewportRect({ elements, platform, strategy }, rect) {
+    const viewportRect = await platform.convertOffsetParentRelativeRectToViewportRelativeRect?.({
+        offsetParent: await platform.getOffsetParent?.(elements.floating),
+        rect,
+        elements,
+        strategy,
+    });
+    return rectToClientRect(viewportRect ?? rect);
+}
+/**
+ * Returns the path along the specified side of the given rectangle.
+ *
+ * The path is a list of coordinates in the form of [x₁, y₁, x₂, y₂] and is given in clockwise order.
+ */
+function getPathAlongSide(rect, side) {
+    const self = rect[side];
+    const prev = rect[getPreviousSide(side)];
+    const next = rect[getNextSide(side)];
+    return getSideAxis(side) === 'x' ? [self, prev, self, next] : [prev, self, next, self];
+}

package/dist/collection/utils/floating-ui/util.js

@@ -0,0 +1,10 @@
+import { sides } from "@floating-ui/utils";
+/**
+ * Returns the nth side in clockwise direction relative to the given side.
+ */
+function getRelativeSide(side, n) {
+    return sides[(sides.indexOf(side) + n) % 4];
+}
+export const getNextSide = (side) => getRelativeSide(side, 1);
+export const getOppositeSide = (side) => getRelativeSide(side, 2);
+export const getPreviousSide = (side) => getRelativeSide(side, 3);

package/dist/collection/utils/index.js

@@ -8,6 +8,7 @@ export * from './event-from';
 export * from './get-focusable-children';
 export * from './get-root';
 export * from './get-slotted-element';
+export * from './is-focus-visible';
 export * from './is-iso-date';
 export * from './is-motion-reduced';
 export * from './is-value-empty';

package/dist/collection/utils/is-focus-visible.js

@@ -0,0 +1,15 @@
+/**
+ * Checks whether an element currently matches `:focus-visible`, i.e. whether
+ * it was focused via keyboard rather than mouse/touch interaction.
+ */
+export function isFocusVisible(element) {
+    if (!element)
+        return false;
+    try {
+        return element.matches(':focus-visible');
+    }
+    catch {
+        // Not supported, fall back to always treating focus as visible
+        return true;
+    }
+}

package/dist/components/is-focus-visible.js

@@ -0,0 +1 @@
+function r(r){if(!r)return!1;try{return r.matches(":focus-visible")}catch{return!0}}export{r as i}

package/dist/components/package.js

@@ -1 +1 @@
-const o="10.7.0";export{o as v}
+const o="10.9.0";export{o as v}

package/dist/components/post-accordion-item2.js

@@ -1 +1 @@
-import{proxyCustomElement as o,HTMLElement as e,h as t,Host as i,transformTag as c}from"@stencil/core/internal/client";import"./breakpoints.js";import{E as a}from"./event-from.js";import{n as s}from"./nanoid.js";import{v as r}from"./package.js";import{d as n}from"./post-collapsible2.js";import{d}from"./post-collapsible-trigger2.js";import{d as l}from"./post-icon2.js";const p=o(class extends e{constructor(o){super(),!1!==o&&this.__registerHost(),this.__attachShadow(),this.collapsed=!1}onCollapseToggle(o){this.collapsed=!o.detail}async toggle(o){return this.collapsible.toggle(o)}onSlotLogoChange(){this.slottedLogo=this.host.querySelector('img[slot="logo"]')}componentWillRender(){this.slottedLogo=this.host.querySelector('img[slot="logo"]')}render(){const o=`c${s(6)}`,e=this.host.closest("post-accordion")?.getAttribute("heading-level");return t(i,{key:"b9699596d57887d99214c6f163355535c68eae1a","data-version":r},t("post-collapsible-trigger",{key:"ebd7c9d6bf2bc35d548867edc8766e31125d8509",for:o},t(`h${e??2}`,{key:"93806261d7dba93569b09d37dff0c01b4f29268b",class:"accordion-header"},t("button",{key:"785a4bcff2c6705aade9b045e1176d43a2ef202b",type:"button",class:"accordion-button"+(this.collapsed?" collapsed":""),part:"post-accordion-button"},t("span",{key:"87f8ba7f7ebe2ba851b6dc134656296820c467d0",class:{"logo-container":!0,"has-image":!!this.slottedLogo}},t("slot",{key:"146256cb174f5895b25fd8f44464ca32fba6b6ee",name:"logo",onSlotchange:this.onSlotLogoChange.bind(this)})),t("slot",{key:"d742ef89a88280f85c7da697536d4ad2ff825f0b",name:"header"}),t("post-icon",{key:"f83e438c9d504ebaa0066df81b6f74ec14dcb08a",name:"chevronup"})))),t("post-collapsible",{key:"179f36eab7ebdb9faa909a70eb43e1d78503e6e1",id:o,collapsed:this.collapsed,ref:o=>this.collapsible=o},t("div",{key:"e93c3570cf76c971b49bf28d3d5540ac289b2469",class:"accordion-body",part:"post-accordion-body"},t("slot",{key:"db26c35edb371cb855141b6f7552d96ea10e06a4"}))))}get host(){return this}static get style(){return':host{display:block;border-block-end:var(--post-device-border-width-default) var(--post-core-border-style-solid) var(--post-scheme-color-interactive-primary-enabled-stroke)}:host:has(.accordion-button:hover){border-block-end-color:var(--post-scheme-color-interactive-primary-hover-stroke)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host:has(.accordion-button:hover){border-block-end-color:Highlight}}:host([collapsed]) .accordion-button post-icon{transform:rotate(-180deg)}.accordion-header{color:var(--post-scheme-color-interactive-primary-enabled-fg1);font-size:var(--post-device-font-size-5);margin:0;line-height:var(--post-device-line-height-heading);font-weight:var(--post-device-font-weight-extra-black)}.accordion-button{padding:0;overflow:visible;border:0;background:none;color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);font:inherit;-webkit-user-select:none;user-select:none;appearance:button;display:flex;position:relative;width:100%;align-items:center;text-align:start;gap:var(--post-device-spacing-gap-7);padding-block:var(--post-device-spacing-padding-19);padding-inline:var(--post-device-spacing-padding-5);border-block-end:var(--post-device-border-width-default) var(--post-core-border-style-solid) rgba(0,0,0,0);cursor:pointer;outline:none !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.accordion-button{background-color:ButtonFace !important}.accordion-button:hover{background-color:Highlight !important}}.accordion-button::before{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}.accordion-button:is(:focus-visible,:has(:focus-visible),.pretend-focus)::before{outline-style:var(--post-core-border-style-solid) !important;display:block;content:"";position:absolute;inset:calc(var(--post-device-border-width-default)*-1) 0 calc(var(--post-device-border-width-default)*-1);border-radius:var(--post-device-border-radius-focus)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.accordion-button:is(:focus-visible,:has(:focus-visible),.pretend-focus)::before{outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.accordion-button:is(:focus-visible,:focus-within,.pretend-focus)::before{outline-style:var(--post-core-border-style-solid) !important;display:block;content:"";position:absolute;inset:calc(var(--post-device-border-width-default)*-1) 0 calc(var(--post-device-border-width-default)*-1);border-radius:var(--post-device-border-radius-focus)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.accordion-button:is(:focus-visible,:focus-within,.pretend-focus)::before{outline-color:Highlight !important}}}.accordion-button slot::slotted(span[slot=header]){flex-grow:1}.accordion-button post-icon{flex:none;width:var(--post-core-dimension-24);aspect-ratio:1;transition:transform 250ms cubic-bezier(0.4, 0, 0.2, 1);transform:var(--post-accordion-icon-initial-transform, none)}.accordion-button.collapsed{padding-block-start:var(--post-device-spacing-padding-19);padding-block-end:var(--post-device-spacing-padding-19)}.accordion-button.collapsed post-icon{transform:rotate(-180deg)}.accordion-button:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1)}.accordion-button>::slotted(.text-truncate){display:block}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.accordion-button:hover,.accordion-button:focus-visible{color:Highlight}}post-collapsible{margin-block-end:calc(var(--post-device-border-width-default)*-1)}.accordion-body{padding-block-start:var(--post-device-spacing-padding-15);padding-block-end:var(--post-device-spacing-padding-block-25);padding-inline:var(--post-device-spacing-padding-5)}.logo-container{display:none;width:var(--post-device-sizing-logo-1);aspect-ratio:1}.logo-container.has-image{display:block}.logo-container slot::slotted(img){display:block;width:100%;height:100%;object-fit:cover}.accordion-button>::slotted(:first-child),.accordion-body>::slotted(:first-child){margin-block-start:0 !important}.accordion-button>::slotted(:last-child),.accordion-body>::slotted(:last-child){margin-block-end:0 !important}'}},[257,"post-accordion-item",{collapsed:[1540],slottedLogo:[32],toggle:[64]},[[2,"postToggle","onCollapseToggle"]]]);function b(){"undefined"!=typeof customElements&&["post-accordion-item","post-collapsible","post-collapsible-trigger","post-icon"].forEach((o=>{switch(o){case"post-accordion-item":customElements.get(c(o))||customElements.define(c(o),p);break;case"post-collapsible":customElements.get(c(o))||n();break;case"post-collapsible-trigger":customElements.get(c(o))||d();break;case"post-icon":customElements.get(c(o))||l()}}))}!function(o,e,t,i){var c,a=arguments.length,s=a<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,t):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(o,e,t,i);else for(var r=o.length-1;r>=0;r--)(c=o[r])&&(s=(a<3?c(s):a>3?c(e,t,s):c(e,t))||s);a>3&&s&&Object.defineProperty(e,t,s)}([a("post-accordion-item")],p.prototype,"onCollapseToggle",null);export{p as P,b as d}
+import{proxyCustomElement as o,HTMLElement as t,h as e,Host as i,transformTag as c}from"@stencil/core/internal/client";import"./breakpoints.js";import{E as r}from"./event-from.js";import{n as a}from"./nanoid.js";import{v as s}from"./package.js";import{d as n}from"./post-collapsible2.js";import{d}from"./post-collapsible-trigger2.js";import{d as l}from"./post-icon2.js";const b=o(class extends t{constructor(o){super(),!1!==o&&this.__registerHost(),this.__attachShadow(),this.collapsed=!1}onCollapseToggle(o){this.collapsed=!o.detail}async toggle(o){return this.collapsible.toggle(o)}onSlotLogoChange(){this.slottedLogo=this.host.querySelector('img[slot="logo"]')}componentWillRender(){this.slottedLogo=this.host.querySelector('img[slot="logo"]')}render(){const o=`c${a(6)}`,t=this.host.closest("post-accordion")?.getAttribute("heading-level");return e(i,{key:"b9699596d57887d99214c6f163355535c68eae1a","data-version":s},e("post-collapsible-trigger",{key:"ebd7c9d6bf2bc35d548867edc8766e31125d8509",for:o},e(`h${t??2}`,{key:"93806261d7dba93569b09d37dff0c01b4f29268b",class:"accordion-header"},e("button",{key:"785a4bcff2c6705aade9b045e1176d43a2ef202b",type:"button",class:"accordion-button"+(this.collapsed?" collapsed":""),part:"post-accordion-button"},e("span",{key:"87f8ba7f7ebe2ba851b6dc134656296820c467d0",class:{"logo-container":!0,"has-image":!!this.slottedLogo}},e("slot",{key:"146256cb174f5895b25fd8f44464ca32fba6b6ee",name:"logo",onSlotchange:this.onSlotLogoChange.bind(this)})),e("slot",{key:"d742ef89a88280f85c7da697536d4ad2ff825f0b",name:"header"}),e("post-icon",{key:"f83e438c9d504ebaa0066df81b6f74ec14dcb08a",name:"chevronup"})))),e("post-collapsible",{key:"179f36eab7ebdb9faa909a70eb43e1d78503e6e1",id:o,collapsed:this.collapsed,ref:o=>this.collapsible=o},e("div",{key:"e93c3570cf76c971b49bf28d3d5540ac289b2469",class:"accordion-body",part:"post-accordion-body"},e("slot",{key:"db26c35edb371cb855141b6f7552d96ea10e06a4"}))))}get host(){return this}static get style(){return':host{display:block;border-block-end:var(--post-device-border-width-default) var(--post-core-border-style-solid) var(--post-scheme-color-interactive-primary-enabled-stroke)}:host:has(.accordion-button:hover){border-block-end-color:var(--post-scheme-color-interactive-primary-hover-stroke)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host:has(.accordion-button:hover){border-block-end-color:Highlight}}:host([collapsed]) .accordion-button post-icon{transform:rotate(-180deg)}.accordion-header{color:var(--post-scheme-color-interactive-primary-enabled-fg1);font-size:var(--post-device-font-size-5);margin:0;line-height:var(--post-device-line-height-heading);font-weight:var(--post-device-font-weight-extra-black)}.accordion-button{padding:0;overflow:visible;border:0;background:none;color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);font:inherit;-webkit-user-select:none;user-select:none;appearance:button;display:flex;position:relative;width:100%;align-items:center;text-align:start;gap:var(--post-device-spacing-gap-7);padding-block:var(--post-device-spacing-padding-19);padding-inline:var(--post-device-spacing-padding-5);border-block-end:var(--post-device-border-width-default) var(--post-core-border-style-solid) rgba(0,0,0,0);cursor:pointer;outline:none !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.accordion-button{background-color:ButtonFace !important}.accordion-button:hover{background-color:Highlight !important}}.accordion-button::before{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}.accordion-button:focus-visible::before{outline-style:var(--post-core-border-style-solid) !important;display:block;content:"";position:absolute;inset:calc(var(--post-device-border-width-default)*-1) 0 calc(var(--post-device-border-width-default)*-1);border-radius:var(--post-device-border-radius-focus)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.accordion-button:focus-visible::before{outline-color:Highlight !important}}.accordion-button.pretend-focus::before{outline-style:var(--post-core-border-style-solid) !important;display:block;content:"";position:absolute;inset:calc(var(--post-device-border-width-default)*-1) 0 calc(var(--post-device-border-width-default)*-1);border-radius:var(--post-device-border-radius-focus)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.accordion-button.pretend-focus::before{outline-color:Highlight !important}}.accordion-button:has(:focus-visible)::before{outline-style:var(--post-core-border-style-solid) !important;display:block;content:"";position:absolute;inset:calc(var(--post-device-border-width-default)*-1) 0 calc(var(--post-device-border-width-default)*-1);border-radius:var(--post-device-border-radius-focus)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.accordion-button:has(:focus-visible)::before{outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.accordion-button:is(:focus-visible,:focus-within,.pretend-focus)::before{outline-style:var(--post-core-border-style-solid) !important;display:block;content:"";position:absolute;inset:calc(var(--post-device-border-width-default)*-1) 0 calc(var(--post-device-border-width-default)*-1);border-radius:var(--post-device-border-radius-focus)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.accordion-button:is(:focus-visible,:focus-within,.pretend-focus)::before{outline-color:Highlight !important}}}.accordion-button slot::slotted(span[slot=header]){flex-grow:1}.accordion-button post-icon{flex:none;width:var(--post-core-dimension-24);aspect-ratio:1;transition:transform 250ms cubic-bezier(0.4, 0, 0.2, 1);transform:var(--post-accordion-icon-initial-transform, none)}.accordion-button.collapsed{padding-block-start:var(--post-device-spacing-padding-19);padding-block-end:var(--post-device-spacing-padding-19)}.accordion-button.collapsed post-icon{transform:rotate(-180deg)}.accordion-button:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1)}.accordion-button>::slotted(.text-truncate){display:block}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.accordion-button:hover,.accordion-button:focus-visible{color:Highlight}}post-collapsible{margin-block-end:calc(var(--post-device-border-width-default)*-1)}.accordion-body{padding-block-start:var(--post-device-spacing-padding-15);padding-block-end:var(--post-device-spacing-padding-block-25);padding-inline:var(--post-device-spacing-padding-5)}.logo-container{display:none;width:var(--post-device-sizing-logo-1);aspect-ratio:1}.logo-container.has-image{display:block}.logo-container slot::slotted(img){display:block;width:100%;height:100%;object-fit:cover}.accordion-button>::slotted(:first-child),.accordion-body>::slotted(:first-child){margin-block-start:0 !important}.accordion-button>::slotted(:last-child),.accordion-body>::slotted(:last-child){margin-block-end:0 !important}'}},[257,"post-accordion-item",{collapsed:[1540],slottedLogo:[32],toggle:[64]},[[2,"postToggle","onCollapseToggle"]]]);function p(){"undefined"!=typeof customElements&&["post-accordion-item","post-collapsible","post-collapsible-trigger","post-icon"].forEach((o=>{switch(o){case"post-accordion-item":customElements.get(c(o))||customElements.define(c(o),b);break;case"post-collapsible":customElements.get(c(o))||n();break;case"post-collapsible-trigger":customElements.get(c(o))||d();break;case"post-icon":customElements.get(c(o))||l()}}))}!function(o,t,e,i){var c,r=arguments.length,a=r<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,e):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(o,t,e,i);else for(var s=o.length-1;s>=0;s--)(c=o[s])&&(a=(r<3?c(a):r>3?c(t,e,a):c(t,e))||a);r>3&&a&&Object.defineProperty(t,e,a)}([r("post-accordion-item")],b.prototype,"onCollapseToggle",null);export{b as P,p as d}

package/dist/components/post-avatar.js

@@ -1 +1 @@
-import{proxyCustomElement as t,HTMLElement as e,h as i,Host as a,transformTag as s}from"@stencil/core/internal/client";import"./breakpoints.js";import{v as r}from"./package.js";import{P as o}from"./pattern.js";import{R as n}from"./required.js";import{T as c}from"./type.js";var l=function(t,e,i,a){var s,r=arguments.length,o=r<3?e:null===a?a=Object.getOwnPropertyDescriptor(e,i):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(t,e,i,a);else for(var n=t.length-1;n>=0;n--)(s=t[n])&&(o=(r<3?s(o):r>3?s(e,i,o):s(e,i))||o);return r>3&&o&&Object.defineProperty(e,i,o),o};const d=/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;var h;!function(t){t.Slotted="slotted",t.Image="image",t.Initials="initials",t[t.Null=null]="Null"}(h||(h={}));const p=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.avatarType=null,this.imageUrl="",this.imageAlt="",this.initials="",this.storageKey=""}updateEmail(){this.getAvatarImage()}async getAvatarImage(){let t=!1;this.slottedImage=this.host.querySelector("img");const e=this.slottedImage?.getAttribute("src");e?await this.getImageByProp(e,this.fetchSlottedImage.bind(this))?this.slottedImage.style.display="block":(this.slottedImage.style.display="none",this.avatarType=h.Initials):(this.email?.match(d)&&(t=await this.getImageByProp(this.email,this.fetchImageByEmail.bind(this))),t||(this.avatarType=h.Initials))}async getImageByProp(t,e){if(!t)return!1;let i;try{i=await e(t)}catch(t){return console.info("Loading avatar image failed.",t),!1}return!!i?.ok&&(this.imageUrl=i.url,this.imageAlt=`${this.firstname} ${this.lastname} avatar`,this.avatarType=h.Image,!0)}async fetchImageByEmail(){const t=await async function(t){return await crypto.subtle.digest("SHA-256",(new TextEncoder).encode(t)).then((t=>Array.from(new Uint8Array(t)).map((t=>t.toString(16).padStart(2,"0"))).join("")))}(this.email),e="https://www.gravatar.com/avatar/{email}?s=80&d=404&r=g".replace("{email}",t);return await fetch(e)}async fetchSlottedImage(t){return await fetch(t,{method:"HEAD"})}slotChanged(){const t=this.host.shadowRoot.querySelector("slot");(t?.assignedNodes({flatten:!0})||[]).forEach((t=>{t.nodeType===Node.ELEMENT_NODE&&"IMG"===t.tagName&&this.observeImageSrcChanges(t)})),this.getAvatarImage()}observeImageSrcChanges(t){this.slottedImageObserver&&this.slottedImageObserver.disconnect(),this.slottedImageObserver=new MutationObserver((t=>{t.forEach((t=>{"attributes"===t.type&&"src"===t.attributeName&&this.getAvatarImage()}))})),this.slottedImageObserver.observe(t,{attributes:!0,attributeFilter:["src"]})}connectedCallback(){this.avatarType=h.Initials,this.getAvatarImage()}render(){const t=[this.firstname,this.lastname].filter(Boolean).map((t=>t.trim())),e=t.map((t=>t.charAt(0))).join("").trim(),s=t.join(" ");return i(a,{key:"ba9c39d64f6a1b77131ba8c603c9be3aad113c53","data-version":r},i("span",{key:"27a9ac87e8978fabf1717f3eb978e39d06670507",class:"slotted"===this.avatarType?"":"d-none"},i("slot",{key:"3fa13670176f2fc3a79a8b11659962f433c37c2e",onSlotchange:this.slotChanged.bind(this)})),"image"===this.avatarType&&i("img",{key:"232099852c2ad8f2c4660eb1077c6d618092cdca",src:this.imageUrl,alt:this.imageAlt}),"initials"===this.avatarType&&i("span",{key:"e6b3bf751a95997a2abef2a16dcd8e2c78d308fa",class:"initials"},e,i("span",{key:"8d869a374678094e2ec5abc146b0b981c9079c15"},this.description??s)))}get host(){return this}static get watchers(){return{email:[{updateEmail:0}]}}static get style(){return':host{--post-avatar-bg:var(--post-scheme-color-interactive-primary-enabled-bg2);--post-avatar-fg:var(--post-scheme-color-interactive-primary-enabled-fg3);display:inline-flex;position:relative;width:var(--post-device-sizing-interactive-icon-size3);height:var(--post-device-sizing-interactive-icon-size3);background-color:var(--post-scheme-color-interactive-primary-enabled-stroke3);border:var(--post-device-border-width-default) solid var(--post-scheme-color-interactive-primary-enabled-stroke3);border-radius:var(--post-device-border-radius-round);font-size:var(--post-device-font-size-8);vertical-align:top;line-height:1}:host::after{display:block;content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}*,*::before,*::after{box-sizing:border-box}slot,img,::slotted(img){display:block;width:100%;height:100%}img,::slotted(img){border-radius:var(--post-device-border-radius-round)}::slotted(:not(img)){display:none !important}.initials{display:flex;justify-content:center;align-items:center;position:relative;width:100%;height:100%;background-color:var(--post-avatar-bg);border-radius:var(--post-device-border-radius-round);color:var(--post-avatar-fg);text-transform:uppercase;font-weight:400;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms}.initials span{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}'}},[257,"post-avatar",{firstname:[513],lastname:[1],email:[1],description:[1],slottedImage:[32],avatarType:[32],imageUrl:[32],imageAlt:[32],initials:[32],storageKey:[32]},void 0,{email:[{updateEmail:0}]}]);l([n(),c("string")],p.prototype,"firstname",void 0),l([c("string")],p.prototype,"lastname",void 0),l([o(d)],p.prototype,"email",void 0),l([c("string")],p.prototype,"description",void 0);const m=p,g=function(){"undefined"!=typeof customElements&&["post-avatar"].forEach((t=>{"post-avatar"===t&&(customElements.get(s(t))||customElements.define(s(t),p))}))};export{m as PostAvatar,g as defineCustomElement}
+import{proxyCustomElement as t,HTMLElement as e,h as i,Host as a,transformTag as s}from"@stencil/core/internal/client";import"./breakpoints.js";import{v as r}from"./package.js";import{P as o}from"./pattern.js";import{R as n}from"./required.js";import{T as c}from"./type.js";var d=function(t,e,i,a){var s,r=arguments.length,o=r<3?e:null===a?a=Object.getOwnPropertyDescriptor(e,i):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(t,e,i,a);else for(var n=t.length-1;n>=0;n--)(s=t[n])&&(o=(r<3?s(o):r>3?s(e,i,o):s(e,i))||o);return r>3&&o&&Object.defineProperty(e,i,o),o};const l=/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;var h;!function(t){t.Slotted="slotted",t.Image="image",t.Initials="initials"}(h||(h={}));const p=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.slottedImage=null,this.avatarType=h.Initials,this.imageUrl="",this.imageAlt="",this.showSlottedImage=()=>{this.slottedImage&&(this.slottedImage.style.display="block",this.avatarType=h.Slotted)},this.hideSlottedImage=()=>{this.slottedImage&&(this.slottedImage.style.display="none"),this.avatarType=h.Initials}}updateEmail(){this.getAvatarImage()}async getAvatarImage(){let t=!1;this.slottedImage=this.host.querySelector("img");const e=this.slottedImage?.getAttribute("src");e?(this.imageUrl="",this.updateSlottedImageVisibility()):(this.imageUrl="",this.email?.match(l)&&(t=await this.getImageByProp(this.email,this.fetchImageByEmail.bind(this))),t||(this.avatarType=h.Initials))}async getImageByProp(t,e,i=h.Image){if(!t)return!1;try{const a=await e(t);return i===h.Image&&(this.imageUrl=a,this.imageAlt=[this.firstname,this.lastname].filter(Boolean).join(" ")+" avatar"),this.avatarType=i,!0}catch(t){return console.info("Loading avatar image failed.",t),!1}}async fetchImageByEmail(t){return await this.loadImage(await async function(t){return`https://www.gravatar.com/avatar/${await async function(t){return await crypto.subtle.digest("SHA-256",(new TextEncoder).encode(t)).then((t=>Array.from(new Uint8Array(t)).map((t=>t.toString(16).padStart(2,"0"))).join("")))}(t.trim().toLowerCase())}?s=80&d=404&r=g`}(t))}updateSlottedImageVisibility(){this.slottedImage?.complete&&this.slottedImage.naturalWidth>0?this.showSlottedImage():this.hideSlottedImage()}loadImage(t){return new Promise(((e,i)=>{const a=new Image;a.addEventListener("load",(()=>e(t)),{once:!0}),a.addEventListener("error",(()=>i(Error("Could not load "+t))),{once:!0}),a.src=t}))}slotChanged(t){const e=t.target.assignedElements({flatten:!0}).find((t=>t instanceof HTMLImageElement));e instanceof HTMLImageElement?this.observeSlottedImage(e):(this.disconnectSlottedImage(),this.slottedImage=null,this.getAvatarImage())}observeSlottedImage(t){this.disconnectSlottedImage(),this.slottedImage=t,t.addEventListener("load",this.showSlottedImage),t.addEventListener("error",this.hideSlottedImage),this.slottedImageObserver=new MutationObserver((()=>this.getAvatarImage())),this.slottedImageObserver.observe(t,{attributes:!0,attributeFilter:["src"]}),this.updateSlottedImageVisibility()}disconnectSlottedImage(){this.slottedImageObserver?.disconnect(),this.slottedImage&&(this.slottedImage.removeEventListener("load",this.showSlottedImage),this.slottedImage.removeEventListener("error",this.hideSlottedImage))}componentWillLoad(){this.avatarType=h.Initials,this.getAvatarImage()}disconnectedCallback(){this.disconnectSlottedImage()}render(){const t=[this.firstname,this.lastname].filter((t=>"string"==typeof t)).map((t=>t.trim())),e=t.map((t=>t.charAt(0))).join("").trim(),s=t.join(" ");return i(a,{key:"ccba82ea3d543a8fad108ea7a8dd30bf6715c132","data-version":r},i("span",{key:"5e7b58d3eeb6bdf49c8a81f36b4d7fffa5b925cc"},i("slot",{key:"7b91589fbccdef4e29e3f5f3f58607887adac559",onSlotchange:t=>this.slotChanged(t)})),this.avatarType===h.Image&&i("img",{key:"65e9e2945592323e54e08d8152e7571222ad728d",src:this.imageUrl,alt:this.imageAlt}),this.avatarType===h.Initials&&i("span",{key:"d4305127e6c77239ab4bf3226aacc153277732cc",class:"initials"},e,i("span",{key:"5e681cb3205708fc42706d20c5d37a097f290898"},this.description??s)))}get host(){return this}static get watchers(){return{email:[{updateEmail:0}]}}static get style(){return':host{--post-avatar-bg:var(--post-scheme-color-interactive-primary-enabled-bg2);--post-avatar-fg:var(--post-scheme-color-interactive-primary-enabled-fg3);display:inline-flex;position:relative;width:var(--post-device-sizing-interactive-icon-size3);height:var(--post-device-sizing-interactive-icon-size3);background-color:var(--post-scheme-color-interactive-primary-enabled-stroke3);border:var(--post-device-border-width-default) solid var(--post-scheme-color-interactive-primary-enabled-stroke3);border-radius:var(--post-device-border-radius-round);font-size:var(--post-device-font-size-8);vertical-align:top;line-height:1}:host::after{display:block;content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}*,*::before,*::after{box-sizing:border-box}slot,img,::slotted(img){display:block;width:100%;height:100%}img,::slotted(img){border-radius:var(--post-device-border-radius-round)}::slotted(:not(img)){display:none !important}.initials{display:flex;justify-content:center;align-items:center;position:relative;width:100%;height:100%;background-color:var(--post-avatar-bg);border-radius:var(--post-device-border-radius-round);color:var(--post-avatar-fg);text-transform:uppercase;font-weight:400;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms}.initials span{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}'}},[257,"post-avatar",{firstname:[513],lastname:[1],email:[1],description:[1],avatarType:[32],imageUrl:[32],imageAlt:[32]},void 0,{email:[{updateEmail:0}]}]);d([n(),c("string")],p.prototype,"firstname",void 0),d([c("string")],p.prototype,"lastname",void 0),d([o(l)],p.prototype,"email",void 0),d([c("string")],p.prototype,"description",void 0);const m=p,f=function(){"undefined"!=typeof customElements&&["post-avatar"].forEach((t=>{"post-avatar"===t&&(customElements.get(s(t))||customElements.define(s(t),p))}))};export{m as PostAvatar,f as defineCustomElement}