npm - @swisspost/design-system-components - Versions diffs - 10.7.0 → 10.9.0 - Mend

@swisspost/design-system-components 10.7.0 → 10.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (333) hide show

package/dist/cjs/post-tab-item.cjs.entry.js CHANGED Viewed

@@ -1,12 +1,12 @@
 'use strict';
-var index = require('./index-DWIlRT6N.js');
+var index = require('./index-DY4QxKNv.js');
 require('./breakpoints-Kruvy8Dm.js');
 var nanoid = require('./nanoid-CmjyF1Cm.js');
-var _package = require('./package-BtKYhTNj.js');
-var required = require('./required-bXtlqqaA.js');
-var type = require('./type-BqLE7Uui.js');
-require('./create-validator-decorator-D7nAb9KJ.js');
+var _package = require('./package-kgRYEtTJ.js');
+var required = require('./required-Dgzo-rb5.js');
+var type = require('./type-DBRxpBZI.js');
+require('./create-validator-decorator-DVm_SDrR.js');
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -48,7 +48,7 @@ const PostTabItem = class {
         this.isPagesVariant = hasAnchor;
     }
     render() {
-        return (index.h(index.Host, { key: '0c98772d01658e932be9982b6983eb3c1f0c4053', id: this.tabId, role: this.isPagesVariant ? undefined : 'tab', "data-version": _package.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'}${''}`, style: undefined }, index.h("slot", { key: 'fba27566a1226e560161f839df050666763bdce5' })));
+        return (index.h(index.Host, { key: '974d9682ef0448cf3adf9481ba472a5c196349b3', id: this.tabId, role: this.isPagesVariant ? undefined : 'tab', "data-version": _package.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'}${''}`, style: undefined }, index.h("slot", { key: '6a7ed6323892a40ea22e487bc9460af69fda02c6' })));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/post-tab-panel.cjs.entry.js CHANGED Viewed

@@ -1,12 +1,12 @@
 'use strict';
-var index = require('./index-DWIlRT6N.js');
+var index = require('./index-DY4QxKNv.js');
 require('./breakpoints-Kruvy8Dm.js');
 var nanoid = require('./nanoid-CmjyF1Cm.js');
-var _package = require('./package-BtKYhTNj.js');
-var required = require('./required-bXtlqqaA.js');
-var type = require('./type-BqLE7Uui.js');
-require('./create-validator-decorator-D7nAb9KJ.js');
+var _package = require('./package-kgRYEtTJ.js');
+var required = require('./required-Dgzo-rb5.js');
+var type = require('./type-DBRxpBZI.js');
+require('./create-validator-decorator-DVm_SDrR.js');
 const postTabPanelCss = () => `:host{display:none}`;
@@ -29,7 +29,7 @@ const PostTabPanel = class {
         this.panelId = `panel-${this.host.id || nanoid.nanoid(6)}`;
     }
     render() {
-        return (index.h(index.Host, { key: '2b02063bf2e67f4e826155759f28a1ae47b0c8e0', "data-version": _package.version, id: this.panelId, role: "tabpanel", slot: "panels", style: undefined }, index.h("slot", { key: 'b4c39e035d0f49f5654b030f4aada27fbebb122c' })));
+        return (index.h(index.Host, { key: '07d93ddaa69253a956ed50cd9ecd6ed039fbc6e2', "data-version": _package.version, id: this.panelId, role: "tabpanel", slot: "panels", style: undefined }, index.h("slot", { key: 'd6887db4e0e4dc22f8f8fdf098d6068ef4bd1a91' })));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/post-tabs.cjs.entry.js CHANGED Viewed

@@ -1,16 +1,16 @@
 'use strict';
-var index = require('./index-DWIlRT6N.js');
+var index = require('./index-DY4QxKNv.js');
 var fade = require('./fade-CPQhl1fP.js');
 require('./breakpoints-Kruvy8Dm.js');
 var componentOnReady = require('./component-on-ready-CifOTqw1.js');
-var _package = require('./package-BtKYhTNj.js');
-var oneOf = require('./one-of-B8RUgrZk.js');
-var type = require('./type-BqLE7Uui.js');
+var _package = require('./package-kgRYEtTJ.js');
+var oneOf = require('./one-of-qu7_EPxf.js');
+var type = require('./type-DBRxpBZI.js');
 require('./utils-s05L2ulk.js');
-require('./create-validator-decorator-D7nAb9KJ.js');
+require('./create-validator-decorator-DVm_SDrR.js');
-const postTabsCss = () => `: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)}`;
+const postTabsCss = () => `: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)}`;
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -45,6 +45,18 @@ const PostTabs = class {
          * 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)
@@ -128,7 +140,8 @@ const PostTabs = class {
         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) {
@@ -397,11 +410,23 @@ const PostTabs = class {
         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);
@@ -411,10 +436,13 @@ const PostTabs = class {
         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 });
         }
     }
@@ -425,10 +453,10 @@ const PostTabs = class {
     render() {
         const TabsContainer = this.isPagesVariant ? 'nav' : 'div';
         const style = undefined;
-        return (index.h(index.Host, { key: 'fb65fd2589517dd6d86e86435ec6b3a3b64b093d', "data-version": _package.version, style: style }, index.h("div", { key: 'dbcdd791af381ccc23953acb38a8e71527a804ee', class: "tabs-wrapper", part: "post-tabs" }, index.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') }, index.h("post-icon", { key: '9a5402a28656d7a4459b9b848425bd15a45a0fce', name: "chevronleft" })), index.h(TabsContainer, { key: 'e821db02fd66aef6cf7a9fb5d925b0906571f3b6', ref: el => (this.tabsContainer = el), class: "tabs", role: this.isPagesVariant ? undefined : 'tablist', "aria-label": this.isPagesVariant ? this.label : undefined }, index.h("slot", { key: 'e3650e43ac269173cb58f1624f02778bf094573c', onSlotchange: () => {
+        return (index.h(index.Host, { key: '10c247c7c021a4fbbd8f79ce7b82888e0b7c8be2', "data-version": _package.version, style: style }, index.h("div", { key: '5ccae325884c7cff0eec399da23513c0b864dde0', class: "tabs-wrapper", part: "post-tabs" }, index.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') }, index.h("post-icon", { key: '461a92ab071472c995d0adad5c73c75c82d982fe', name: "chevronleft" })), index.h(TabsContainer, { key: 'edecdbfdc681b96539e5a0755330faf1795ecb35', ref: el => (this.tabsContainer = el), class: "tabs", role: this.isPagesVariant ? undefined : 'tablist', "aria-label": this.isPagesVariant ? this.label : undefined }, index.h("slot", { key: '6240234a2168b2e889cab92a7688731ca93a63a6', onSlotchange: () => {
                 this.moveMisplacedTabs();
                 this.enableTabs();
-            } })), index.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') }, index.h("post-icon", { key: '2df749c1a4e506d9940ce61e077d0f0f330b7342', name: "chevronright" }))), !this.isPagesVariant && (index.h("div", { key: '184db29a5826af78d142ed1489be33c45831970b', class: "tab-content", part: "post-tabs-content" }, index.h("slot", { key: '4a984c7de97f2f89e7fd0f829f5bc62e2323f056', name: "panels", onSlotchange: () => this.moveMisplacedPanels() })))));
+            } })), index.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') }, index.h("post-icon", { key: 'd89c831bdd2faf1991793df47e7ca79bf49e5339', name: "chevronright" }))), !this.isPagesVariant && (index.h("div", { key: 'aba319437ba8bfb9e7a144a44efcc32d82ef6b02', class: "tab-content", part: "post-tabs-content" }, index.h("slot", { key: 'e689b5e3a030909c5c77899ac899ded2481f82a6', name: "panels", onSlotchange: () => this.moveMisplacedPanels() })))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/post-tooltip-trigger.cjs.entry.js CHANGED Viewed

@@ -1,11 +1,11 @@
 'use strict';
-var index = require('./index-DWIlRT6N.js');
+var index = require('./index-DY4QxKNv.js');
 require('./breakpoints-Kruvy8Dm.js');
-var _package = require('./package-BtKYhTNj.js');
-var required = require('./required-bXtlqqaA.js');
-var type = require('./type-BqLE7Uui.js');
-require('./create-validator-decorator-D7nAb9KJ.js');
+var _package = require('./package-kgRYEtTJ.js');
+var required = require('./required-Dgzo-rb5.js');
+var type = require('./type-DBRxpBZI.js');
+require('./create-validator-decorator-DVm_SDrR.js');
 const postTooltipTriggerCss = () => `post-tooltip-trigger{vertical-align:top}:host{cursor:pointer}`;
@@ -184,7 +184,7 @@ const PostTooltipTrigger = class {
         this.tooltip?.hide();
     }
     render() {
-        return (index.h(index.Host, { key: '55adc12f457aa8a5dd4357ed27876b0e526f7ae3', "data-version": _package.version }, index.h("slot", { key: '84da1734ae1c1ac9376caa693108e3ed54bf176f', onSlotchange: () => this.handleSlotChange() })));
+        return (index.h(index.Host, { key: '7811d666f249ead72768adaf5bdc92e47b447d8a', "data-version": _package.version }, index.h("slot", { key: '68e56c43ebec2abffbf049647ac08757dadf22f9', onSlotchange: () => this.handleSlotChange() })));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/post-tooltip.cjs.entry.js CHANGED Viewed

@@ -1,13 +1,13 @@
 'use strict';
-var index = require('./index-DWIlRT6N.js');
+var index = require('./index-DY4QxKNv.js');
 var placement = require('./placement-qEFR9hmI.js');
 require('./breakpoints-Kruvy8Dm.js');
-var _package = require('./package-BtKYhTNj.js');
-var oneOf = require('./one-of-B8RUgrZk.js');
-require('./create-validator-decorator-D7nAb9KJ.js');
+var _package = require('./package-kgRYEtTJ.js');
+var oneOf = require('./one-of-qu7_EPxf.js');
+require('./create-validator-decorator-DVm_SDrR.js');
-const postTooltipCss = () => `: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}`;
+const postTooltipCss = () => `: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}`;
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -71,11 +71,13 @@ const PostTooltip = class {
      * @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 (index.h(index.Host, { key: '62d5983e0ef32f851166d0c1d2c457cac0809fdf', "data-version": _package.version }, index.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) }, index.h("slot", { key: 'cdfaf0e916afa55ec3f1a7f64003101985560e27' }))));
+        return (index.h(index.Host, { key: '083507ae592ce9be50f6b4217a8d13785039478d', "data-version": _package.version }, index.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) }, index.h("div", { key: '8e6417485a89f56c18e731351de0e9f5db2cdd9a', class: "tooltip-content" }, index.h("slot", { key: 'e4c9fed0c8a8454c20f504e38557abd8ea253a1b' })))));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/{required-bXtlqqaA.js → required-Dgzo-rb5.js} RENAMED Viewed

@@ -1,6 +1,6 @@
 'use strict';
-var createValidatorDecorator = require('./create-validator-decorator-D7nAb9KJ.js');
+var createValidatorDecorator = require('./create-validator-decorator-DVm_SDrR.js');
 /**
  * Property decorator that validates the property is not empty.

package/dist/cjs/{type-BqLE7Uui.js → type-DBRxpBZI.js} RENAMED Viewed

@@ -1,6 +1,6 @@
 'use strict';
-var createValidatorDecorator = require('./create-validator-decorator-D7nAb9KJ.js');
+var createValidatorDecorator = require('./create-validator-decorator-DVm_SDrR.js');
 /**
  * Property decorator that validates the property value is of the specified type.

package/dist/cjs/{url-CUy3C3sH.js → url-Dl1JABeP.js} RENAMED Viewed

@@ -1,6 +1,6 @@
 'use strict';
-var createValidatorDecorator = require('./create-validator-decorator-D7nAb9KJ.js');
+var createValidatorDecorator = require('./create-validator-decorator-DVm_SDrR.js');
 /**
  * Property decorator that validates the property value is a valid URL.

package/dist/collection/components/post-accordion-item/post-accordion-item.css CHANGED Viewed

	@@ -1 +1 @@
1	- :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}
1	+ :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}

package/dist/collection/components/post-avatar/avatar-utils.js CHANGED Viewed

@@ -6,11 +6,10 @@ export async function getGravatarUrl(email) {
     const hash = await cryptify(email.trim().toLowerCase());
     return `https://www.gravatar.com/avatar/${hash}?s=${GRAVATAR_SIZE}&d=${GRAVATAR_DEFAULT}&r=${GRAVATAR_RATING}`;
 }
-export async function cryptify(key) {
+async function cryptify(key) {
     return await crypto.subtle.digest('SHA-256', new TextEncoder().encode(key)).then(buffer => {
         return Array.from(new Uint8Array(buffer))
             .map(bytes => bytes.toString(16).padStart(2, '0'))
             .join('');
     });
 }
-export const GRAVATAR_BASE_URL = `https://www.gravatar.com/avatar/{email}?s=${GRAVATAR_SIZE}&d=${GRAVATAR_DEFAULT}&r=${GRAVATAR_RATING}`;

package/dist/collection/components/post-avatar/post-avatar.js CHANGED Viewed

@@ -11,26 +11,34 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { Pattern, Required, Type } from "../../utils/index";
 import { version } from "../../../../package";
 import { h, Host } from "@stencil/core";
-import { cryptify, GRAVATAR_BASE_URL } from "./avatar-utils";
+import { getGravatarUrl } from "./avatar-utils";
 const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
 var AvatarType;
 (function (AvatarType) {
     AvatarType["Slotted"] = "slotted";
     AvatarType["Image"] = "image";
     AvatarType["Initials"] = "initials";
-    AvatarType[AvatarType["Null"] = null] = "Null";
 })(AvatarType || (AvatarType = {}));
 /**
  * @slot default - Slot for inserting a custom image as avatar.
  */
 export class PostAvatar {
     constructor() {
-        this.avatarType = null;
+        this.slottedImage = null;
+        this.avatarType = AvatarType.Initials;
         this.imageUrl = '';
         this.imageAlt = '';
-        this.initials = '';
-        // To handle email updates and reset the storage item
-        this.storageKey = '';
+        this.showSlottedImage = () => {
+            if (!this.slottedImage)
+                return;
+            this.slottedImage.style.display = 'block';
+            this.avatarType = AvatarType.Slotted;
+        };
+        this.hideSlottedImage = () => {
+            if (this.slottedImage)
+                this.slottedImage.style.display = 'none';
+            this.avatarType = AvatarType.Initials;
+        };
     }
     updateEmail() {
         this.getAvatarImage();
@@ -40,6 +48,7 @@ export class PostAvatar {
         this.slottedImage = this.host.querySelector('img');
         const imageUrl = this.slottedImage?.getAttribute('src');
         if (!imageUrl) {
+            this.imageUrl = '';
             if (this.email?.match(emailPattern)) {
                 imageLoaded = await this.getImageByProp(this.email, this.fetchImageByEmail.bind(this));
             }
@@ -48,85 +57,97 @@ export class PostAvatar {
             }
         }
         else {
-            const slottedImageLoaded = await this.getImageByProp(imageUrl, this.fetchSlottedImage.bind(this));
-            if (!slottedImageLoaded) {
-                this.slottedImage.style.display = 'none';
-                this.avatarType = AvatarType.Initials;
-            }
-            else {
-                this.slottedImage.style.display = 'block';
-            }
+            this.imageUrl = '';
+            this.updateSlottedImageVisibility();
         }
     }
-    async getImageByProp(prop, fetchImage) {
+    async getImageByProp(prop, loadImage, avatarType = AvatarType.Image) {
         if (!prop)
             return false;
-        let imageResponse;
         try {
-            imageResponse = await fetchImage(prop);
+            const imageUrl = await loadImage(prop);
+            if (avatarType === AvatarType.Image) {
+                this.imageUrl = imageUrl;
+                this.imageAlt = `${[this.firstname, this.lastname].filter(Boolean).join(' ')} avatar`;
+            }
+            this.avatarType = avatarType;
+            return true;
         }
         catch (error) {
             console.info('Loading avatar image failed.', error);
             return false;
         }
-        if (!imageResponse?.ok) {
-            return false;
+    }
+    async fetchImageByEmail(email) {
+        return await this.loadImage(await getGravatarUrl(email));
+    }
+    // The slotted image stays hidden until it has successfully loaded.
+    updateSlottedImageVisibility() {
+        if (this.slottedImage?.complete && this.slottedImage.naturalWidth > 0) {
+            this.showSlottedImage();
         }
         else {
-            this.imageUrl = imageResponse.url;
-            this.imageAlt = `${this.firstname} ${this.lastname} avatar`;
-            this.avatarType = AvatarType.Image;
-            return true;
+            this.hideSlottedImage();
         }
     }
-    async fetchImageByEmail() {
-        const email = await cryptify(this.email);
-        const imageUrl = GRAVATAR_BASE_URL.replace('{email}', email);
-        return await fetch(imageUrl);
-    }
-    async fetchSlottedImage(imageUrl) {
-        return await fetch(imageUrl, { method: 'HEAD' });
-    }
-    slotChanged() {
-        const slot = this.host.shadowRoot.querySelector('slot');
-        const assignedNodes = slot?.assignedNodes({ flatten: true }) || [];
-        assignedNodes.forEach(node => {
-            if (node.nodeType === Node.ELEMENT_NODE) {
-                const el = node;
-                if (el.tagName === 'IMG') {
-                    this.observeImageSrcChanges(el);
-                }
-            }
+    loadImage(imageUrl) {
+        return new Promise((resolve, reject) => {
+            const image = new Image();
+            image.addEventListener('load', () => resolve(imageUrl), { once: true });
+            image.addEventListener('error', () => reject(new Error(`Could not load ${imageUrl}`)), {
+                once: true,
+            });
+            image.src = imageUrl;
         });
+    }
+    slotChanged(event) {
+        const slot = event.target;
+        const image = slot
+            .assignedElements({ flatten: true })
+            .find(element => element instanceof HTMLImageElement);
+        if (image instanceof HTMLImageElement) {
+            this.observeSlottedImage(image);
+            return;
+        }
+        this.disconnectSlottedImage();
+        this.slottedImage = null;
         this.getAvatarImage();
     }
     // Observe the Slotted image src attribute and update the image
-    observeImageSrcChanges(img) {
-        if (this.slottedImageObserver) {
-            this.slottedImageObserver.disconnect();
-        }
-        this.slottedImageObserver = new MutationObserver(mutations => {
-            mutations.forEach(mutation => {
-                if (mutation.type === 'attributes' && mutation.attributeName === 'src') {
-                    this.getAvatarImage();
-                }
-            });
-        });
+    observeSlottedImage(img) {
+        this.disconnectSlottedImage();
+        this.slottedImage = img;
+        img.addEventListener('load', this.showSlottedImage);
+        img.addEventListener('error', this.hideSlottedImage);
+        this.slottedImageObserver = new MutationObserver(() => this.getAvatarImage());
         this.slottedImageObserver.observe(img, { attributes: true, attributeFilter: ['src'] });
+        this.updateSlottedImageVisibility();
     }
-    connectedCallback() {
+    disconnectSlottedImage() {
+        this.slottedImageObserver?.disconnect();
+        if (this.slottedImage) {
+            this.slottedImage.removeEventListener('load', this.showSlottedImage);
+            this.slottedImage.removeEventListener('error', this.hideSlottedImage);
+        }
+    }
+    componentWillLoad() {
         //This provides a fallback by showing the initials while the image is still loading or delayed.
         this.avatarType = AvatarType.Initials;
         this.getAvatarImage();
     }
+    disconnectedCallback() {
+        this.disconnectSlottedImage();
+    }
     render() {
-        const names = [this.firstname, this.lastname].filter(Boolean).map(n => n.trim());
+        const names = [this.firstname, this.lastname]
+            .filter((name) => typeof name === 'string')
+            .map(name => name.trim());
         const initials = names
             .map(n => n.charAt(0))
             .join('')
             .trim();
         const fullname = names.join(' ');
-        return (h(Host, { key: 'ba9c39d64f6a1b77131ba8c603c9be3aad113c53', "data-version": version }, h("span", { key: '27a9ac87e8978fabf1717f3eb978e39d06670507', class: this.avatarType === 'slotted' ? '' : 'd-none' }, h("slot", { key: '3fa13670176f2fc3a79a8b11659962f433c37c2e', onSlotchange: this.slotChanged.bind(this) })), this.avatarType === 'image' && h("img", { key: '232099852c2ad8f2c4660eb1077c6d618092cdca', src: this.imageUrl, alt: this.imageAlt }), this.avatarType === 'initials' && (h("span", { key: 'e6b3bf751a95997a2abef2a16dcd8e2c78d308fa', class: "initials" }, initials, h("span", { key: '8d869a374678094e2ec5abc146b0b981c9079c15' }, this.description ?? fullname)))));
+        return (h(Host, { key: 'ccba82ea3d543a8fad108ea7a8dd30bf6715c132', "data-version": version }, h("span", { key: '5e7b58d3eeb6bdf49c8a81f36b4d7fffa5b925cc' }, h("slot", { key: '7b91589fbccdef4e29e3f5f3f58607887adac559', onSlotchange: event => this.slotChanged(event) })), this.avatarType === AvatarType.Image && h("img", { key: '65e9e2945592323e54e08d8152e7571222ad728d', src: this.imageUrl, alt: this.imageAlt }), this.avatarType === AvatarType.Initials && (h("span", { key: 'd4305127e6c77239ab4bf3226aacc153277732cc', class: "initials" }, initials, h("span", { key: '5e681cb3205708fc42706d20c5d37a097f290898' }, this.description ?? fullname)))));
     }
     static get is() { return "post-avatar"; }
     static get encapsulation() { return "shadow"; }
@@ -222,12 +243,9 @@ export class PostAvatar {
     }
     static get states() {
         return {
-            "slottedImage": {},
             "avatarType": {},
             "imageUrl": {},
-            "imageAlt": {},
-            "initials": {},
-            "storageKey": {}
+            "imageAlt": {}
         };
     }
     static get elementRef() { return "host"; }

package/dist/collection/components/post-back-to-top/post-back-to-top.css CHANGED Viewed

	@@ -1 +1 @@
1	- :host{opacity:0;--post-floating-button-position-top: var(--post-device-position-4);--post-back-to-top-position-top: calc( var(--post-header-height) + var(--post-floating-button-position-top) );--post-back-to-top-elevation: var(--post-device-elevation-300);position:fixed;z-index:1019;inset-block-start:var(--post-back-to-top-position-top);inset-inline-end:var(--post-device-position-1)}:host .back-to-top{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;box-shadow:var(--post-back-to-top-elevation);cursor:pointer;border-radius:var(--post-device-border-radius-round);width:var(--post-device-sizing-interactive-button-height-2);height:var(--post-device-sizing-interactive-button-height-2);border:var(--post-device-border-width-default) solid var(--post-scheme-color-interactive-button-secondary-enabled-stroke);color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);background-color:var(--post-scheme-color-interactive-button-secondary-enabled-bg);display:flex;align-items:center;justify-content:center}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .back-to-top{background-color:ButtonFace !important}:host .back-to-top:hover{background-color:Highlight !important}}:host .back-to-top{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}:host .back-to-top:~~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 .back-to-top:is(:focus-visible,:has(:focus-visible)~~,.pretend-focus)~~{outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){:host .back-to-top: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 .back-to-top:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}:host .back-to-top:hover{border-color:var(--post-scheme-color-interactive-button-secondary-hover-stroke);color:var(--post-scheme-color-interactive-button-secondary-hover-fg);background-color:var(--post-scheme-color-interactive-button-secondary-hover-bg)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .back-to-top:hover{color:HighlightText !important}}:host .back-to-top post-icon{height:var(--post-device-sizing-interactive-button-icon-3);width:var(--post-device-sizing-interactive-button-icon-3)}:host .visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}
1	+ :host{opacity:0;--post-floating-button-position-top: var(--post-device-position-4);--post-back-to-top-position-top: calc( var(--post-header-height) + var(--post-floating-button-position-top) );--post-back-to-top-elevation: var(--post-device-elevation-300);position:fixed;z-index:1019;inset-block-start:var(--post-back-to-top-position-top);inset-inline-end:var(--post-device-position-1)}:host .back-to-top{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;box-shadow:var(--post-back-to-top-elevation);cursor:pointer;border-radius:var(--post-device-border-radius-round);width:var(--post-device-sizing-interactive-button-height-2);height:var(--post-device-sizing-interactive-button-height-2);border:var(--post-device-border-width-default) solid var(--post-scheme-color-interactive-button-secondary-enabled-stroke);color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);background-color:var(--post-scheme-color-interactive-button-secondary-enabled-bg);display:flex;align-items:center;justify-content:center}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .back-to-top{background-color:ButtonFace !important}:host .back-to-top:hover{background-color:Highlight !important}}:host .back-to-top{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}:host .back-to-top: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 .back-to-top:focus-visible{outline-color:Highlight !important}}:host .back-to-top.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 .back-to-top.pretend-focus{outline-color:Highlight !important}}:host .back-to-top: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 .back-to-top:has(:focus-visible){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){:host .back-to-top: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 .back-to-top:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}:host .back-to-top:hover{border-color:var(--post-scheme-color-interactive-button-secondary-hover-stroke);color:var(--post-scheme-color-interactive-button-secondary-hover-fg);background-color:var(--post-scheme-color-interactive-button-secondary-hover-bg)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .back-to-top:hover{color:HighlightText !important}}:host .back-to-top post-icon{height:var(--post-device-sizing-interactive-button-icon-3);width:var(--post-device-sizing-interactive-button-icon-3)}:host .visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}

package/dist/collection/components/post-banner/post-banner.css CHANGED Viewed

@@ -1,4 +1,4 @@
 :host{position:relative;display:grid;grid-template-columns:1fr;grid-auto-rows:auto;grid-auto-flow:row;min-height:calc(var(--post-device-sizing-notification-icon-2) + (2 * var(--post-device-spacing-padding-10)));padding:var(--post-device-spacing-padding-10);padding-inline-start:calc(
     var(--post-device-spacing-padding-10) + var(--post-device-sizing-notification-icon-2) +
       var(--post-device-spacing-gap-inline-6)
-  );color:var(--post-current-fg);border-style:var(--post-core-border-style-solid);border-width:var(--post-device-border-width-default);border-radius:var(--post-device-border-radius-2);box-shadow:var(--post-device-elevation-100);background-color:var(--post-scheme-color-interactive-notification-info-bg);border-color:var(--post-scheme-color-interactive-notification-info-stroke)}:host::before{content:"";display:block;position:absolute;height:var(--post-device-sizing-notification-icon-2);width:var(--post-device-sizing-notification-icon-2);inset-block-start:var(--post-device-spacing-padding-10);inset-inline-start:var(--post-device-spacing-padding-10);background-image:var(--post-signal-icon-info)}:host([type=info]){background-color:var(--post-scheme-color-interactive-notification-info-bg);border-color:var(--post-scheme-color-interactive-notification-info-stroke)}:host([type=info])::before{background-image:var(--post-signal-icon-info)}:host([type=success]){background-color:var(--post-scheme-color-interactive-notification-success-bg);border-color:var(--post-scheme-color-interactive-notification-success-stroke)}:host([type=success])::before{background-image:var(--post-signal-icon-success)}:host([type=warning]){background-color:var(--post-scheme-color-interactive-notification-warning-bg);border-color:var(--post-scheme-color-interactive-notification-warning-stroke)}:host([type=warning])::before{background-image:var(--post-signal-icon-warning)}:host([type=error]){background-color:var(--post-scheme-color-interactive-notification-error-bg);border-color:var(--post-scheme-color-interactive-notification-error-stroke)}:host([type=error])::before{background-image:var(--post-signal-icon-error)}.post-banner-content{display:grid;grid-template-columns:1fr;row-gap:var(--post-device-spacing-gap-block-1);overflow-x:auto}.actions{display:flex;flex-direction:row-reverse;justify-content:flex-start;align-items:center;margin-block-start:var(--post-device-spacing-padding-block-10);gap:var(--post-device-spacing-gap-1)}@media screen and (min-width: 0)and (max-width: 599.98px){.actions{flex-direction:column;align-items:stretch}}::slotted(*){margin-block:0 !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host{border-color:CanvasText}:host::before{color:CanvasText}}
+  );color:var(--post-current-fg);border-style:var(--post-core-border-style-solid);border-width:var(--post-device-border-width-default);border-radius:var(--post-device-border-radius-2);box-shadow:var(--post-device-elevation-100);background-color:var(--post-scheme-color-interactive-notification-info-bg);border-color:var(--post-scheme-color-interactive-notification-info-stroke)}:host::before{content:"";display:block;position:absolute;height:var(--post-device-sizing-notification-icon-2);width:var(--post-device-sizing-notification-icon-2);inset-block-start:var(--post-device-spacing-padding-10);inset-inline-start:var(--post-device-spacing-padding-10);background-image:var(--post-signal-icon-info)}:host([type=info]){background-color:var(--post-scheme-color-interactive-notification-info-bg);border-color:var(--post-scheme-color-interactive-notification-info-stroke)}:host([type=info])::before{background-image:var(--post-signal-icon-info)}:host([type=success]){background-color:var(--post-scheme-color-interactive-notification-success-bg);border-color:var(--post-scheme-color-interactive-notification-success-stroke)}:host([type=success])::before{background-image:var(--post-signal-icon-success)}:host([type=warning]){background-color:var(--post-scheme-color-interactive-notification-warning-bg);border-color:var(--post-scheme-color-interactive-notification-warning-stroke)}:host([type=warning])::before{background-image:var(--post-signal-icon-warning)}:host([type=error]){background-color:var(--post-scheme-color-interactive-notification-error-bg);border-color:var(--post-scheme-color-interactive-notification-error-stroke)}:host([type=error])::before{background-image:var(--post-signal-icon-error)}.post-banner-content{--post-banner-focus-room: calc( var(--post-device-border-width-focus) + var(--post-device-spacing-padding-2) );display:grid;grid-template-columns:1fr;row-gap:var(--post-device-spacing-gap-block-1);overflow-x:auto;padding:var(--post-banner-focus-room);margin:calc(-1*var(--post-banner-focus-room))}.actions{display:flex;flex-direction:row-reverse;justify-content:flex-start;align-items:center;margin-block-start:var(--post-device-spacing-padding-block-10);gap:var(--post-device-spacing-gap-1)}@media screen and (min-width: 0)and (max-width: 599.98px){.actions{flex-direction:column;align-items:stretch}}::slotted(*){margin-block:0 !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host{border-color:CanvasText}:host::before{color:CanvasText}}

package/dist/collection/components/post-breadcrumb-item/post-breadcrumb-item.css CHANGED Viewed

	@@ -1 +1 @@
1	- a{-webkit-text-decoration:var(--post-core-text-decoration-underline);text-decoration:var(--post-core-text-decoration-underline);border-radius:var(--post-device-border-radius-focus);color:var(--post-current-fg)}a:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1)}a{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}a:~~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){a:is(:focus-visible,:has(:focus-visible)~~,.pretend-focus)~~{outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){a: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){a:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){a,a:focus{color:LinkText !important}a:hover{text-decoration-thickness:2px}a:visited{color:VisitedText}a.btn:not(.btn-link){border-color:ButtonBorder !important}a.btn.btn-tertiary.px-0{border:0 !important}a.btn.btn-tertiary.px-0:not(:hover){text-decoration:underline}}:host([variant=menuitem]) :is(a,span),:host([variant=menuitem]) ::slotted(a){white-space:normal;overflow-wrap:anywhere;hyphens:auto;line-break:strict}:host([variant=listitem]){display:flex;align-items:flex-start;padding-block:var(--post-device-spacing-padding-block-6);gap:var(--post-device-spacing-gap-inline-5)}:host([variant=listitem]) :is(button,a){display:inline-flex;position:relative;align-items:center;justify-content:center;max-width:100%;overflow:hidden;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;border-width:var(--post-device-border-width-default);border-style:solid;border-color:rgba(0,0,0,0);border-radius:var(--post-device-border-radius-round);background-color:rgba(0,0,0,0);box-shadow:none;font-family:inherit;font-size:var(--post-device-font-size-6);font-weight:var(--post-device-font-weight-bold);text-decoration:none;white-space:nowrap;cursor:pointer;font:inherit;padding:unset;border:unset;border-radius:var(--post-device-border-radius-focus);color:var(--post-scheme-color-interactive-primary-enabled-fg1);text-decoration:var(--post-core-text-decoration-none)}:host([variant=listitem]) :is(button,a):not(:disabled):hover{text-decoration:none}:host([variant=listitem]) :is(button,a):disabled{border-style:var(--post-core-border-style-dash);cursor:unset}:host([variant=listitem]) :is(button,a){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}:host([variant=listitem]) :is(button,a):~~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([variant=listitem]) :is(button,a):is(:focus-visible,:has(:focus-visible)~~,.pretend-focus)~~{outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){:host([variant=listitem]) :is(button,a):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([variant=listitem]) :is(button,a):is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host([variant=listitem]) :is(button,a){border-width:1px !important;transition:none}:host([variant=listitem]) :is(button,a):is(button){background-color:ButtonFace !important;border-color:ButtonBorder !important}}:host([variant=listitem]) :is(button,a):hover{color:var(--post-scheme-color-interactive-primary-hover-fg1);text-decoration:var(--post-core-text-decoration-underline)}:host([variant=listitem])::before{mask-image:var(--post-icon-chevronright);background-color:currentColor;flex:0 0 auto;content:"";display:block;height:var(--post-device-sizing-interactive-icon-size4);width:var(--post-device-sizing-interactive-icon-size4);margin-block:calc(var(--post-device-spacing-padding-35) - 1*var(--post-device-spacing-padding-block-6));margin-inline:var(--post-core-dimension-4)}:root,:host{--post-icon-chevronright: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxzeW1ib2wgaWQ9ImktY2hldnJvbnJpZ2h0Ij48c3ltYm9sIGlkPSJzMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTUuMzggMTRjLS4xOSAwLS4zOC0uMDctLjUzLS4yMmEuNzU0Ljc1NCAwIDAgMSAwLTEuMDZMOS41NyA4IDQuODUgMy4yOGMtLjI5LS4yOS0uMjktLjc3IDAtMS4wNnMuNzctLjI5IDEuMDYgMEwxMS42OSA4bC01Ljc4IDUuNzhjLS4xNS4xNS0uMzQuMjItLjUzLjIyIi8+PC9zeW1ib2w+PHN5bWJvbCBpZD0iczI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik04LjA3IDIwLjcyYy0uMjIgMC0uNDUtLjA4LS42Mi0uMjZhLjg4Ljg4IDAgMCAxIDAtMS4yNGw3LjI2LTcuMjZMNy40NSA0LjdhLjg4Ljg4IDAgMCAxIDAtMS4yNGMuMzQtLjM0LjktLjM0IDEuMjQgMGw4LjUgOC41LTguNDkgOC40OWMtLjE3LjE3LS40LjI2LS42Mi4yNloiLz48L3N5bWJvbD48c3ltYm9sIGlkPSJzMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZD0iTTEwLjc2IDI3LjVjLS4yNiAwLS41MS0uMS0uNzEtLjI5YS45OTYuOTk2IDAgMCAxIDAtMS40MWw5Ljc5LTkuNzktOS43OS05LjgxYS45OTYuOTk2IDAgMSAxIDEuNDEtMS40MUwyMi42NyAxNiAxMS40NiAyNy4yMWMtLjIuMi0uNDUuMjktLjcxLjI5WiIvPjwvc3ltYm9sPjxzeW1ib2wgaWQ9InM0MCIgdmlld0JveD0iMCAwIDQwIDQwIj48cGF0aCBkPSJNMTMuNSAzNC4yMmExLjEyMyAxLjEyMyAwIDAgMS0uOC0xLjkybDEyLjMzLTEyLjMzTDEyLjcgNy42M2MtLjQ0LS40NC0uNDQtMS4xNSAwLTEuNTlzMS4xNS0uNDQgMS41OSAwbDEzLjkzIDEzLjkzTDE0LjMgMzMuODljLS4yMi4yMi0uNTEuMzMtLjguMzMiLz48L3N5bWJvbD48c3ltYm9sIGlkPSJzNDgiIHZpZXdCb3g9IjAgMCA0OCA0OCI+PHBhdGggZD0iTTE2LjE0IDQxYy0uMzIgMC0uNjQtLjEyLS44OC0uMzdhMS4yNSAxLjI1IDAgMCAxIDAtMS43N2wxNC44Ny0xNC44N0wxNS4yNSA5LjExYy0uNDktLjQ5LS40OS0xLjI4IDAtMS43N3MxLjI4LS40OSAxLjc3IDBsMTYuNjQgMTYuNjQtMTYuNjMgMTYuNjNjLS4yNC4yNC0uNTYuMzctLjg4LjM3WiIvPjwvc3ltYm9sPjxzeW1ib2wgaWQ9InM2NCIgdmlld0JveD0iMCAwIDY0IDY0Ij48cGF0aCBkPSJNMjEuNTEgNTQuNGExLjM3NiAxLjM3NiAwIDAgMS0uOTctMi4zNWwyMC4wMy0yMC4wMy0yMC4wNC0yMC4wM2MtLjU0LS41NC0uNTQtMS40MSAwLTEuOTVzMS40MS0uNTQgMS45NSAwbDIxLjk4IDIxLjk5TDIyLjQ5IDU0Yy0uMjcuMjctLjYyLjQtLjk3LjRaIi8+PC9zeW1ib2w+PHVzZSBzdHlsZT0iZGlzcGxheTogdmFyKC0tczE2LCBub25lKSIgaHJlZj0iI3MxNiIvPjx1c2Ugc3R5bGU9ImRpc3BsYXk6IHZhcigtLXMyNCwgbm9uZSkiIGhyZWY9IiNzMjQiLz48dXNlIHN0eWxlPSJkaXNwbGF5OiB2YXIoLS1zMzIsIG5vbmUpIiBocmVmPSIjczMyIi8+PHVzZSBzdHlsZT0iZGlzcGxheTogdmFyKC0tczQwLCBub25lKSIgaHJlZj0iI3M0MCIvPjx1c2Ugc3R5bGU9ImRpc3BsYXk6IHZhcigtLXM0OCwgbm9uZSkiIGhyZWY9IiNzNDgiLz48dXNlIHN0eWxlPSJkaXNwbGF5OiB2YXIoLS1zNjQsIG5vbmUpIiBocmVmPSIjczY0Ii8+PC9zeW1ib2w+PC9kZWZzPjxzdHlsZT5AbWVkaWEgKG1heC13aWR0aDogMjMuOThweCkge2d7LS1zMTY6YmxvY2s7fX1AbWVkaWEgKG1pbi13aWR0aDogMjRweCkgYW5kIChtYXgtd2lkdGg6IDMxLjk4cHgpIHtney0tczI0OmJsb2NrO319QG1lZGlhIChtaW4td2lkdGg6IDMycHgpIGFuZCAobWF4LXdpZHRoOiAzOS45OHB4KSB7Z3stLXMzMjpibG9jazt9fUBtZWRpYSAobWluLXdpZHRoOiA0MHB4KSBhbmQgKG1heC13aWR0aDogNDcuOThweCkge2d7LS1zNDA6YmxvY2s7fX1AbWVkaWEgKG1pbi13aWR0aDogNDhweCkgYW5kIChtYXgtd2lkdGg6IDYzLjk4cHgpIHtney0tczQ4OmJsb2NrO319QG1lZGlhIChtaW4td2lkdGg6IDY0cHgpIHtney0tczY0OmJsb2NrO319PC9zdHlsZT48Zz48dXNlIGhyZWY9IiNpLWNoZXZyb25yaWdodCIvPjwvZz48L3N2Zz4=")}:host([variant=listitem]):not([standalone]:not([standalone=false])) ::slotted(a){white-space:nowrap}:host([variant=listitem]):host([selected]:not([selected=false])){flex-shrink:0}:host([variant=listitem]):host([selected]:not([selected=false])) :is(a,span){color:var(--post-scheme-color-interactive-primary-selected-fg1);font-weight:var(--post-device-font-weight-bold);text-decoration:var(--post-core-text-decoration-none)}:host([variant=listitem]):host([standalone]:not([standalone=false])){flex-shrink:1}:host([variant=listitem]):host([standalone]:not([standalone=false])) :is(a,span),:host([variant=listitem]):host([standalone]:not([standalone=false])) ::slotted(a){white-space:normal;overflow-wrap:anywhere;hyphens:auto;line-break:strict}
1	+ a{-webkit-text-decoration:var(--post-core-text-decoration-underline);text-decoration:var(--post-core-text-decoration-underline);border-radius:var(--post-device-border-radius-focus);color:var(--post-current-fg)}a:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1)}a{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}a: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){a:focus-visible{outline-color:Highlight !important}}a.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){a.pretend-focus{outline-color:Highlight !important}}a: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){a:has(:focus-visible){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){a: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){a:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){a,a:focus{color:LinkText !important}a:hover{text-decoration-thickness:2px}a:visited{color:VisitedText}a.btn:not(.btn-link){border-color:ButtonBorder !important}a.btn.btn-tertiary.px-0{border:0 !important}a.btn.btn-tertiary.px-0:not(:hover){text-decoration:underline}}:host([variant=menuitem]) :is(a,span),:host([variant=menuitem]) ::slotted(a){white-space:normal;overflow-wrap:anywhere;hyphens:auto;line-break:strict}:host([variant=listitem]){display:flex;align-items:flex-start;padding-block:var(--post-device-spacing-padding-block-6);gap:var(--post-device-spacing-gap-inline-5)}:host([variant=listitem]) :is(button,a){display:inline-flex;position:relative;align-items:center;justify-content:center;max-width:100%;overflow:hidden;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;border-width:var(--post-device-border-width-default);border-style:solid;border-color:rgba(0,0,0,0);border-radius:var(--post-device-border-radius-round);background-color:rgba(0,0,0,0);box-shadow:none;font-family:inherit;font-size:var(--post-device-font-size-6);font-weight:var(--post-device-font-weight-bold);text-decoration:none;white-space:nowrap;cursor:pointer;font:inherit;padding:unset;border:unset;border-radius:var(--post-device-border-radius-focus);color:var(--post-scheme-color-interactive-primary-enabled-fg1);text-decoration:var(--post-core-text-decoration-none)}:host([variant=listitem]) :is(button,a):not(:disabled):hover{text-decoration:none}:host([variant=listitem]) :is(button,a):disabled{border-style:var(--post-core-border-style-dash);cursor:unset}:host([variant=listitem]) :is(button,a){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}:host([variant=listitem]) :is(button,a):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([variant=listitem]) :is(button,a):focus-visible{outline-color:Highlight !important}}:host([variant=listitem]) :is(button,a).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([variant=listitem]) :is(button,a).pretend-focus{outline-color:Highlight !important}}:host([variant=listitem]) :is(button,a):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([variant=listitem]) :is(button,a):has(:focus-visible){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){:host([variant=listitem]) :is(button,a):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([variant=listitem]) :is(button,a):is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host([variant=listitem]) :is(button,a){border-width:1px !important;transition:none}:host([variant=listitem]) :is(button,a):is(button){background-color:ButtonFace !important;border-color:ButtonBorder !important}}:host([variant=listitem]) :is(button,a):hover{color:var(--post-scheme-color-interactive-primary-hover-fg1);text-decoration:var(--post-core-text-decoration-underline)}:host([variant=listitem])::before{mask-image:var(--post-icon-chevronright);background-color:currentColor;flex:0 0 auto;content:"";display:block;height:var(--post-device-sizing-interactive-icon-size4);width:var(--post-device-sizing-interactive-icon-size4);margin-block:calc(var(--post-device-spacing-padding-35) - 1*var(--post-device-spacing-padding-block-6));margin-inline:var(--post-core-dimension-4)}:root,:host{--post-icon-chevronright: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxzeW1ib2wgaWQ9ImktY2hldnJvbnJpZ2h0Ij48c3ltYm9sIGlkPSJzMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTUuMzggMTRjLS4xOSAwLS4zOC0uMDctLjUzLS4yMmEuNzU0Ljc1NCAwIDAgMSAwLTEuMDZMOS41NyA4IDQuODUgMy4yOGMtLjI5LS4yOS0uMjktLjc3IDAtMS4wNnMuNzctLjI5IDEuMDYgMEwxMS42OSA4bC01Ljc4IDUuNzhjLS4xNS4xNS0uMzQuMjItLjUzLjIyIi8+PC9zeW1ib2w+PHN5bWJvbCBpZD0iczI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik04LjA3IDIwLjcyYy0uMjIgMC0uNDUtLjA4LS42Mi0uMjZhLjg4Ljg4IDAgMCAxIDAtMS4yNGw3LjI2LTcuMjZMNy40NSA0LjdhLjg4Ljg4IDAgMCAxIDAtMS4yNGMuMzQtLjM0LjktLjM0IDEuMjQgMGw4LjUgOC41LTguNDkgOC40OWMtLjE3LjE3LS40LjI2LS42Mi4yNloiLz48L3N5bWJvbD48c3ltYm9sIGlkPSJzMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZD0iTTEwLjc2IDI3LjVjLS4yNiAwLS41MS0uMS0uNzEtLjI5YS45OTYuOTk2IDAgMCAxIDAtMS40MWw5Ljc5LTkuNzktOS43OS05LjgxYS45OTYuOTk2IDAgMSAxIDEuNDEtMS40MUwyMi42NyAxNiAxMS40NiAyNy4yMWMtLjIuMi0uNDUuMjktLjcxLjI5WiIvPjwvc3ltYm9sPjxzeW1ib2wgaWQ9InM0MCIgdmlld0JveD0iMCAwIDQwIDQwIj48cGF0aCBkPSJNMTMuNSAzNC4yMmExLjEyMyAxLjEyMyAwIDAgMS0uOC0xLjkybDEyLjMzLTEyLjMzTDEyLjcgNy42M2MtLjQ0LS40NC0uNDQtMS4xNSAwLTEuNTlzMS4xNS0uNDQgMS41OSAwbDEzLjkzIDEzLjkzTDE0LjMgMzMuODljLS4yMi4yMi0uNTEuMzMtLjguMzMiLz48L3N5bWJvbD48c3ltYm9sIGlkPSJzNDgiIHZpZXdCb3g9IjAgMCA0OCA0OCI+PHBhdGggZD0iTTE2LjE0IDQxYy0uMzIgMC0uNjQtLjEyLS44OC0uMzdhMS4yNSAxLjI1IDAgMCAxIDAtMS43N2wxNC44Ny0xNC44N0wxNS4yNSA5LjExYy0uNDktLjQ5LS40OS0xLjI4IDAtMS43N3MxLjI4LS40OSAxLjc3IDBsMTYuNjQgMTYuNjQtMTYuNjMgMTYuNjNjLS4yNC4yNC0uNTYuMzctLjg4LjM3WiIvPjwvc3ltYm9sPjxzeW1ib2wgaWQ9InM2NCIgdmlld0JveD0iMCAwIDY0IDY0Ij48cGF0aCBkPSJNMjEuNTEgNTQuNGExLjM3NiAxLjM3NiAwIDAgMS0uOTctMi4zNWwyMC4wMy0yMC4wMy0yMC4wNC0yMC4wM2MtLjU0LS41NC0uNTQtMS40MSAwLTEuOTVzMS40MS0uNTQgMS45NSAwbDIxLjk4IDIxLjk5TDIyLjQ5IDU0Yy0uMjcuMjctLjYyLjQtLjk3LjRaIi8+PC9zeW1ib2w+PHVzZSBzdHlsZT0iZGlzcGxheTogdmFyKC0tczE2LCBub25lKSIgaHJlZj0iI3MxNiIvPjx1c2Ugc3R5bGU9ImRpc3BsYXk6IHZhcigtLXMyNCwgbm9uZSkiIGhyZWY9IiNzMjQiLz48dXNlIHN0eWxlPSJkaXNwbGF5OiB2YXIoLS1zMzIsIG5vbmUpIiBocmVmPSIjczMyIi8+PHVzZSBzdHlsZT0iZGlzcGxheTogdmFyKC0tczQwLCBub25lKSIgaHJlZj0iI3M0MCIvPjx1c2Ugc3R5bGU9ImRpc3BsYXk6IHZhcigtLXM0OCwgbm9uZSkiIGhyZWY9IiNzNDgiLz48dXNlIHN0eWxlPSJkaXNwbGF5OiB2YXIoLS1zNjQsIG5vbmUpIiBocmVmPSIjczY0Ii8+PC9zeW1ib2w+PC9kZWZzPjxzdHlsZT5AbWVkaWEgKG1heC13aWR0aDogMjMuOThweCkge2d7LS1zMTY6YmxvY2s7fX1AbWVkaWEgKG1pbi13aWR0aDogMjRweCkgYW5kIChtYXgtd2lkdGg6IDMxLjk4cHgpIHtney0tczI0OmJsb2NrO319QG1lZGlhIChtaW4td2lkdGg6IDMycHgpIGFuZCAobWF4LXdpZHRoOiAzOS45OHB4KSB7Z3stLXMzMjpibG9jazt9fUBtZWRpYSAobWluLXdpZHRoOiA0MHB4KSBhbmQgKG1heC13aWR0aDogNDcuOThweCkge2d7LS1zNDA6YmxvY2s7fX1AbWVkaWEgKG1pbi13aWR0aDogNDhweCkgYW5kIChtYXgtd2lkdGg6IDYzLjk4cHgpIHtney0tczQ4OmJsb2NrO319QG1lZGlhIChtaW4td2lkdGg6IDY0cHgpIHtney0tczY0OmJsb2NrO319PC9zdHlsZT48Zz48dXNlIGhyZWY9IiNpLWNoZXZyb25yaWdodCIvPjwvZz48L3N2Zz4=")}:host([variant=listitem]):not([standalone]:not([standalone=false])) ::slotted(a){white-space:nowrap}:host([variant=listitem]):host([selected]:not([selected=false])){flex-shrink:0}:host([variant=listitem]):host([selected]:not([selected=false])) :is(a,span){color:var(--post-scheme-color-interactive-primary-selected-fg1);font-weight:var(--post-device-font-weight-bold);text-decoration:var(--post-core-text-decoration-none)}:host([variant=listitem]):host([standalone]:not([standalone=false])){flex-shrink:1}:host([variant=listitem]):host([standalone]:not([standalone=false])) :is(a,span),:host([variant=listitem]):host([standalone]:not([standalone=false])) ::slotted(a){white-space:normal;overflow-wrap:anywhere;hyphens:auto;line-break:strict}