@swisspost/design-system-components 10.0.0-next.54 → 10.0.0-next.56

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

@@ -1,15 +1,14 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { v as version } from './package.js';
 import { H as HEADING_LEVELS } from './heading-levels.js';
-import { d as checkEmptyOrOneOf } from './index2.js';
-import './breakpoints.js';
+import { d as checkEmptyOrOneOf } from './breakpoints.js';
 import { E as EventFrom } from './event-from.js';
 import { n as nanoid } from './index.browser.js';
 import { d as defineCustomElement$3 } from './post-collapsible2.js';
 import { d as defineCustomElement$2 } from './post-collapsible-trigger2.js';
 import { d as defineCustomElement$1 } from './post-icon2.js';
 
-const postAccordionItemCss = ".accordion-item::after{display:block;content:\"\";margin-block-start:calc(var(--post-device-border-width-default)*-1);border-block-end:var(--post-device-border-width-default) var(--post-core-border-style-solid) var(--post-scheme-color-interactive-primary-enabled-stroke)}.accordion-item:has(.accordion-button:hover)::after{border-color:var(--post-scheme-color-interactive-primary-hover-stroke)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.accordion-item:has(.accordion-button:hover)::after{border-color:Highlight}}.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:calc(var(--post-device-spacing-padding-19) + var(--post-device-border-width-default)) calc(var(--post-device-spacing-padding-5) + var(--post-device-border-width-default));cursor:pointer}@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{display:block;position:absolute;content:\"\";inset:0;inset-block-end:auto;border-block-start-width:var(--post-device-border-width-default);border-block-start-style:var(--post-core-border-style-solid);border-block-start-color:var(--post-scheme-color-interactive-primary-enabled-stroke)}.accordion-button{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){outline-style:var(--post-core-border-style-solid) !important;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){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.accordion-button:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important;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){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)}.accordion-button.collapsed{padding-block-start:calc(var(--post-device-spacing-padding-19) + var(--post-device-border-width-default));padding-block-end:calc(var(--post-device-spacing-padding-19) + var(--post-device-border-width-default))}.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}}.accordion-body{padding-block-start:var(--post-device-spacing-padding-15);padding-block-end:calc(var(--post-device-spacing-padding-block-25) + var(--post-device-border-width-default));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}";
+const postAccordionItemCss = ":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}}.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)}.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}";
 
 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;
@@ -59,10 +58,10 @@ const PostAccordionItem = /*@__PURE__*/ proxyCustomElement(class PostAccordionIt
     render() {
         const headingLevel = this.host.closest('post-accordion')?.getAttribute('heading-level');
         const HeadingTag = `h${headingLevel ?? this.headingLevel ?? 2}`;
-        return (h(Host, { key: 'b98847d19894430b6f65130aebf8673a45afd1e6', id: this.id, "data-version": version }, h("div", { key: 'f26f9d3a4a1f59db23b4698b321e28e112c3eed0', part: "accordion-item", class: "accordion-item" }, h("post-collapsible-trigger", { key: '14bdacce04d67a03655f600feeaeec065e0fc198', for: `${this.id}--collapse` }, h(HeadingTag, { key: '7a07a70d172306ce37f8bd0143b21ed7ec0cab8a', class: "accordion-header", id: `${this.id}--header` }, h("button", { key: '5ad0698a62df5c4b2c0a77ff622090b20f348e9c', type: "button", class: `accordion-button${this.collapsed ? ' collapsed' : ''}`, part: "button" }, h("span", { key: '6e5fcb0c9efa8a57e05fd162c72b9c170a8210c6', class: {
+        return (h(Host, { key: '03e6974f6d2f02e0d9240c84516f6538a2a96c9a', id: this.id, "data-version": version }, h("post-collapsible-trigger", { key: 'de3fe01f5fdc4394d6ba0163313850a60b0134ec', for: `${this.id}--collapse` }, h(HeadingTag, { key: 'abc8ccd196030b90f800ffca0075f0a99a70229d', class: "accordion-header", id: `${this.id}--header` }, h("button", { key: '422fb7f22228706ca0d07f07241ec72fab6387b7', type: "button", class: `accordion-button${this.collapsed ? ' collapsed' : ''}`, part: "post-accordion-button" }, h("span", { key: '1b2bec5bf36707656ac92f65f99d2e1c5f1d44c3', class: {
                 'logo-container': true,
                 'has-image': !!this.slottedLogo,
-            } }, h("slot", { key: '41a1409f723bf52de893324ce45d4e7f31eb8908', name: "logo", onSlotchange: this.onSlotLogoChange.bind(this) })), h("slot", { key: '7186adfe4a4fe67f4dbaeb7569820d0d06c18428', name: "header" }), h("post-icon", { key: 'add240b0275b083c537efb28c4a2825ac22e1b47', name: "chevrondown" })))), h("post-collapsible", { key: '4231577c41c7633327c147d2b9adcd847ffc7261', id: `${this.id}--collapse`, collapsed: this.collapsed, ref: el => (this.collapsible = el) }, h("div", { key: '3f3cea3f5468e35f658f7d143db32391fa5fe2f1', class: "accordion-body", part: "body" }, h("slot", { key: '013f6cc755a04b880d91513059e36bcc2be5f412' }))))));
+            } }, h("slot", { key: '717d1393ab1277a0f141c7a978585d288ab9359b', name: "logo", onSlotchange: this.onSlotLogoChange.bind(this) })), h("slot", { key: '6c7f506f051b96f07991cd4c56c884527e736eb5', name: "header" }), h("post-icon", { key: 'e77b71473bcf619b1083dfea8b87d219489f774e', name: "chevronup" })))), h("post-collapsible", { key: '020481b62323ea8719cd8289c6b402611a83944b', id: `${this.id}--collapse`, collapsed: this.collapsed, ref: el => (this.collapsible = el) }, h("div", { key: '99bdc90c6a557958d1ecb73860b9f6c904165496', class: "accordion-body", part: "post-accordion-body" }, h("slot", { key: '0a10be7f2b7fb61614fec92a5306372ada0dcf62' })))));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/post-accordion2.js

@@ -1,11 +1,10 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { v as version } from './package.js';
 import { H as HEADING_LEVELS } from './heading-levels.js';
-import { b as checkRequiredAndOneOf } from './index2.js';
-import './breakpoints.js';
+import { b as checkRequiredAndOneOf } from './breakpoints.js';
 import { E as EventFrom } from './event-from.js';
 
-const postAccordionCss = ":host{display:block}::slotted(post-accordion-item){display:block}::slotted(post-accordion-item:not(:only-of-type:first-of-type)){margin-block-start:calc(var(--post-device-border-width-default)*-1)}";
+const postAccordionCss = ":host{display:block;border-block-start:var(--post-device-border-width-default) var(--post-core-border-style-solid) var(--post-scheme-color-interactive-primary-enabled-stroke)}";
 
 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;
@@ -102,7 +101,7 @@ const PostAccordion = /*@__PURE__*/ proxyCustomElement(class PostAccordion exten
         });
     }
     render() {
-        return (h(Host, { key: 'ab800b580f0dd591a9413305afa282ff7e697759', "data-version": version }, h("div", { key: '258ba1dc99811545c0dd9796ef521a05a0c87dda', class: "accordion" }, h("slot", { key: '2ad7482962316723f5c8ff334bad7cc33b6fa953', onSlotchange: () => this.registerAccordionItems() }))));
+        return (h(Host, { key: '470d8a7646796044df8f9cf1ebfc113e5c8db960', "data-version": version }, h("div", { key: '360ad1fe885dbb3c61a5c026ea253e7fba81ef9e', class: "accordion" }, h("slot", { key: '9e14d7906cba560a848986787159f56c961c78db', onSlotchange: () => this.registerAccordionItems() }))));
     }
     get host() { return this; }
     static get watchers() { return {
@@ -110,7 +109,7 @@ const PostAccordion = /*@__PURE__*/ proxyCustomElement(class PostAccordion exten
     }; }
     static get style() { return postAccordionCss; }
 }, [1, "post-accordion", {
-        "headingLevel": [2, "heading-level"],
+        "headingLevel": [514, "heading-level"],
         "multiple": [4],
         "toggle": [64],
         "expandAll": [64],

package/dist/components/post-avatar.js

@@ -1,7 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { v as version } from './package.js';
-import { c as checkRequiredAndType, e as checkEmptyOrType, f as checkEmptyOrPattern } from './index2.js';
-import './breakpoints.js';
+import { c as checkRequiredAndType, e as checkEmptyOrType, i as checkEmptyOrPattern } from './breakpoints.js';
 
 // https://docs.gravatar.com/api/avatars/images/
 const GRAVATAR_DEFAULT = '404';
@@ -16,7 +15,7 @@ async function cryptify(key) {
 }
 const GRAVATAR_BASE_URL = `https://www.gravatar.com/avatar/{email}?s=${GRAVATAR_SIZE}&d=${GRAVATAR_DEFAULT}&r=${GRAVATAR_RATING}`;
 
-const postAvatarCss = ":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;z-index:2;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}.initials span{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}";
+const postAvatarCss = ":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}.initials span{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}";
 
 const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
 var AvatarType;
@@ -166,7 +165,7 @@ const PostAvatar$1 = /*@__PURE__*/ proxyCustomElement(class PostAvatar extends H
             .join('')
             .trim();
         const fullname = names.join(' ');
-        return (h(Host, { key: '9e596623d1949c62b1f110e311b839d244b249ef', "data-version": version }, h("span", { key: '6722e4096cb0d2f8b5d171f0d84fef98f74e1cd7', class: this.avatarType === 'slotted' ? '' : 'd-none' }, h("slot", { key: '95e8809133eb0de4382e9dc521eda877a6be5a8b', onSlotchange: this.slotChanged.bind(this) })), this.avatarType === 'image' && h("img", { key: 'cb2ed3eab02f28369911997a94617efaeaa5c00a', src: this.imageUrl, alt: this.imageAlt }), this.avatarType === 'initials' && (h("span", { key: '5565b06795c4651537b20e9abd33492d7cb8a9d1', class: "initials" }, initials, h("span", { key: '58ac3ee3a664a13ff82fc201e04e1896e409fbf1' }, this.description ?? fullname)))));
+        return (h(Host, { key: '620b361e23a70143903abd7bf10bcd804f959042', "data-version": version }, h("span", { key: 'cc3752d89187f0c08dedf2952676de1aaaa59a8a', class: this.avatarType === 'slotted' ? '' : 'd-none' }, h("slot", { key: 'dbba7fc0522b177f6ad467f0e22dad9065582ce7', onSlotchange: this.slotChanged.bind(this) })), this.avatarType === 'image' && h("img", { key: '375eeeab749e09bc21d215aa80cf45309a15620e', src: this.imageUrl, alt: this.imageAlt }), this.avatarType === 'initials' && (h("span", { key: '620d25537ef0f606933e9c7deb915a87fbc4b95c', class: "initials" }, initials, h("span", { key: '03dc6aacddc2af35c114fc6815550e0ec461937d' }, this.description ?? fullname)))));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/post-back-to-top.js

@@ -1,35 +1,9 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { f as fadeSlide } from './fade-slide.js';
 import { v as version } from './package.js';
-import { c as checkRequiredAndType } from './index2.js';
-import './breakpoints.js';
+import { c as checkRequiredAndType } from './breakpoints.js';
 import { d as defineCustomElement$2 } from './post-icon2.js';
 
-// Define common animation options
-const easing = 'ease';
-const defaultDuration = 500;
-const fill = 'forwards';
-function createSlideFadeAnimation(el, keyframes, duration = defaultDuration) {
-    return el.animate(keyframes, {
-        duration: duration,
-        easing,
-        fill,
-    });
-}
-function slideUpAndFadeOut(el, translateY = '-100%', duration = defaultDuration) {
-    const keyframes = [
-        { transform: 'translateY(0)', opacity: '1' },
-        { transform: `translateY(${translateY})`, opacity: '0' },
-    ];
-    return createSlideFadeAnimation(el, keyframes, duration);
-}
-function slideDownAndFadeIn(el, translateY = '-100%', duration = defaultDuration) {
-    const keyframes = [
-        { transform: `translateY(${translateY})`, opacity: '0' },
-        { transform: 'translateY(0)', opacity: '1' },
-    ];
-    return createSlideFadeAnimation(el, keyframes, duration);
-}
-
 const postBackToTopCss = ":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;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}";
 
 const PostBackToTop$1 = /*@__PURE__*/ proxyCustomElement(class PostBackToTop extends HTMLElement {
@@ -45,16 +19,16 @@ const PostBackToTop$1 = /*@__PURE__*/ proxyCustomElement(class PostBackToTop ext
     isBelowFold() {
         return window.scrollY > window.innerHeight;
     }
-    validateLabel() {
-        checkRequiredAndType(this, 'label', 'string');
+    validateTextBackToTop() {
+        checkRequiredAndType(this, 'textBackToTop', 'string');
     }
     /*Watch for changes in belowFold to show/hide the back to top button*/
     watchBelowFold(newValue) {
         if (newValue) {
-            slideDownAndFadeIn(this.host, this.translateY);
+            fadeSlide(this.host, 'in', { translate: this.translateY, fill: 'forwards' });
         }
         else {
-            slideUpAndFadeOut(this.host, this.translateY);
+            fadeSlide(this.host, 'out', { translate: this.translateY, fill: 'forwards' });
         }
     }
     scrollToTop() {
@@ -81,11 +55,11 @@ const PostBackToTop$1 = /*@__PURE__*/ proxyCustomElement(class PostBackToTop ext
         const elevationHeight = this.getSecondPixelValue(elevationParts);
         // The translateY is calculated as => -100% (btt button height) - topPosition - elevationHeight
         this.translateY =
-            String((-1 * 100) / 100 -
+            (-1 * 100) / 100 -
                 parseFloat(positionTop.replace('px', '')) -
-                parseFloat(elevationHeight.replace('px', ''))) + 'px';
+                parseFloat(elevationHeight.replace('px', ''));
         if (this.belowFold) {
-            slideDownAndFadeIn(this.host, this.translateY);
+            fadeSlide(this.host, 'in', { translate: this.translateY, fill: 'forwards' });
         }
         if (!this.belowFold) {
             this.host.style.transform = `translateY(${this.translateY})`;
@@ -98,25 +72,25 @@ const PostBackToTop$1 = /*@__PURE__*/ proxyCustomElement(class PostBackToTop ext
     componentDidLoad() {
         window.addEventListener('scroll', this.handleScroll, false);
         this.animateButton();
-        this.validateLabel();
+        this.validateTextBackToTop();
     }
     disconnectedCallback() {
         window.removeEventListener('scroll', this.handleScroll);
     }
     render() {
-        return (h(Host, { key: '51abef7d1f650da1476689c46d853f49669da856', "data-version": version }, h("button", { key: '9de175f7962448fa3d658e4a24b01a857925a5b7', class: "back-to-top", "aria-hidden": this.belowFold ? 'false' : 'true', tabindex: this.belowFold ? '0' : '-1', onClick: this.scrollToTop }, h("post-icon", { key: '2913ad9930bccf5f1e72ea611ed3c57a0e4e1ca8', "aria-hidden": "true", name: "arrowup" }), h("span", { key: '44b3f9bf5a16c883282a73bf5cfae77619079c0d', class: "visually-hidden" }, this.label))));
+        return (h(Host, { key: 'a6a5afe41d76c9b2b703f4a78e63849a1437680f', "data-version": version }, h("button", { key: 'ad10b46cf4d07d1efffae6feef7431ba8a11c59e', class: "back-to-top", "aria-hidden": this.belowFold ? 'false' : 'true', tabindex: this.belowFold ? '0' : '-1', onClick: this.scrollToTop }, h("post-icon", { key: 'e95c5710939aa968df42f3acec2d56b2eaaa238e', "aria-hidden": "true", name: "arrowup" }), h("span", { key: 'f854524e0b76f71ef1edfed5a13d57985ac98ea5', class: "visually-hidden" }, this.textBackToTop))));
     }
     get host() { return this; }
     static get watchers() { return {
-        "label": ["validateLabel"],
+        "textBackToTop": ["validateTextBackToTop"],
         "belowFold": ["watchBelowFold"]
     }; }
     static get style() { return postBackToTopCss; }
 }, [1, "post-back-to-top", {
-        "label": [513],
+        "textBackToTop": [513, "text-back-to-top"],
         "belowFold": [32]
     }, undefined, {
-        "label": ["validateLabel"],
+        "textBackToTop": ["validateTextBackToTop"],
         "belowFold": ["watchBelowFold"]
     }]);
 function defineCustomElement$1() {