@proximus/lavender-header 2.0.0-alpha.19 → 2.0.0-alpha.191

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 (6) hide show
  1. package/dist/Header.d.ts +13 -10
  2. package/dist/HeaderItem.d.ts +7 -6
  3. package/dist/events.d.ts +16 -0
  4. package/dist/index.d.ts +1 -0
  5. package/dist/index.es.js +789 -786
  6. package/package.json +2 -2
package/dist/index.es.js CHANGED
@@ -1,463 +1,502 @@
1
- var Q = (o) => {
2
- throw TypeError(o);
3
- };
4
- var _ = (o, t, e) => t.has(o) || Q("Cannot " + e);
5
- var d = (o, t, e) => (_(o, t, "read from private field"), e ? e.call(o) : t.get(o)), h = (o, t, e) => t.has(o) ? Q("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(o) : t.set(o, e), A = (o, t, e, r) => (_(o, t, "write to private field"), r ? r.call(o, e) : t.set(o, e), e), b = (o, t, e) => (_(o, t, "access private method"), e);
6
1
  import "@proximus/lavender-button-icon";
7
2
  import "@proximus/lavender-cell";
8
- import { WithExtraAttributes as Z, fontsizeValues as kt, PxElement as yt, transferAccessibilityAttributes as zt, fontweightValues as wt, colorValues as $t, log as R, checkName as At } from "@proximus/lavender-common";
3
+ import { PxElement as e, WithExtraAttributes as t, WrappedInteractiveStateController as n, booleanPropertyToAttributeSetter as r, checkName as i, colorValues as a, fontsizeValues as o, fontweightValues as s, log as c, propertyToAttributeSetter as l, transferAccessibilityAttributes as u } from "@proximus/lavender-common";
9
4
  import "@proximus/lavender-layout";
10
5
  import "@proximus/lavender-container";
11
6
  import "@proximus/lavender-button";
12
7
  import "@proximus/lavender-section";
13
- const St = ":host{display:block}:host *{box-sizing:border-box}button,a{display:block;font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-font-line-height-l);color:var(--px-color-text-neutral-default);text-align:center;cursor:pointer;padding:2em 0;height:100%}button:after,a:after{content:attr(data-label);display:block;height:0;width:auto;visibility:hidden;overflow:hidden;-webkit-user-select:none;user-select:none;pointer-events:none;font-weight:var(--px-font-weight-title)}button:focus-visible,a:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}button:hover,a:hover{font-weight:var(--px-font-weight-title);color:var(--px-color-background-container-primary-default);padding-block:calc(2em - 2px)}button{margin:0;border:0;border-bottom:2px solid rgba(0,0,0,0);outline:0;background:inherit}button[aria-expanded=true]{font-weight:var(--px-font-weight-title);color:var(--px-color-background-container-primary-default);border-bottom-color:var(--px-color-background-container-primary-default)}a{text-decoration:none}@media only screen and (min-width: 48em){button,a{font-size:var(--px-text-size-label-m-tablet)}button:focus-visible,a:focus-visible{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}}@media only screen and (min-width: 64.0625em){button,a{font-size:var(--px-text-size-label-m-laptop)}button:focus-visible,a:focus-visible{outline-offset:var(--px-focus-offset-laptop);outline-width:var(--px-focus-outline-laptop)}}@media only screen and (min-width: 90.0625em){button,a{font-size:var(--px-text-size-label-m-desktop)}button:focus-visible,a:focus-visible{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}}", ot = new CSSStyleSheet();
14
- ot.replaceSync(St);
15
- class Ct extends Z {
16
- constructor() {
17
- var t;
18
- super(), this.template = () => `${this.getAttribute("href") ? `<a href="${this.getAttribute("href")}" data-label="${this.textContent}">
8
+ //#region src/header-item.css?inline
9
+ var d = ":host{height:100%;display:block}:host *{box-sizing:border-box}button,a{font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-line-height-ratio-l);color:var(--px-color-text-neutral-default);text-align:center;cursor:pointer;padding:var(--px-padding-m-mobile) 0;flex-direction:column;justify-content:center;height:100%;display:flex}:is(button,a):after{content:attr(data-label);visibility:hidden;-webkit-user-select:none;user-select:none;pointer-events:none;width:auto;height:0;font-weight:var(--px-font-weight-title);display:block;overflow:hidden}:is(button,a):focus-visible{outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}:host([current]) :is(button,a),:is(button,a):hover{font-weight:var(--px-font-weight-title);color:var(--px-color-background-container-primary-default)}button{margin:var(--px-size-border-m) 0 0 0;height:calc(100% - var(--px-size-border-m));border:0;border-bottom:var(--px-size-border-m) solid transparent;background:inherit;outline:0}button[aria-expanded=true]{font-weight:var(--px-font-weight-title);color:var(--px-color-background-container-primary-default);border-bottom-color:var(--px-color-background-container-primary-default)}a{text-decoration:none}@media screen and (width>=48rem){button,a{font-size:var(--px-text-size-label-m-tablet);padding:var(--px-padding-m-tablet) 0}:is(button,a):focus-visible{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}}@media screen and (width>=64.0625rem){button,a{font-size:var(--px-text-size-label-m-laptop);padding:var(--px-padding-m-laptop) 0}:is(button,a):focus-visible{outline-offset:var(--px-focus-offset-laptop);outline-width:var(--px-focus-outline-laptop)}}@media screen and (width>=90.0625rem){button,a{font-size:var(--px-text-size-label-m-desktop);padding:var(--px-padding-m-desktop) 0}:is(button,a):focus-visible{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}}", f = new CSSStyleSheet();
10
+ f.replaceSync(d);
11
+ var p = class extends t {
12
+ constructor() {
13
+ super(), this.template = () => `${this.getAttribute("href") ? `<a href="${this.getAttribute("href")}" data-label="${this.textContent}">
19
14
  <slot></slot>
20
- </a>` : `<button data-label="${this.textContent}"><slot></slot></button>`}`, this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [ot], this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this), this.role = "listitem", this.internals && (this.internals.role = "listitem");
21
- }
22
- static get observedAttributes() {
23
- return ["for", "href"];
24
- }
25
- connectedCallback() {
26
- this.setAttribute("slot", "header-entries"), this.$button && this.setupButtonA11y(), this.contentObserver = new MutationObserver(() => {
27
- this.updateDataLabel();
28
- }), this.contentObserver.observe(this, {
29
- childList: !0,
30
- subtree: !0,
31
- characterData: !0
32
- });
33
- }
34
- disconnectedCallback() {
35
- this.contentObserver.disconnect();
36
- }
37
- attributeChangedCallback(t, e, r) {
38
- super.attributeChangedCallback(t, e, r), t === "href" && this.$a && r ? this.shadowRoot.innerHTML = this.template() : t === "for" && this.$button && r && (this.shadowRoot.innerHTML = this.template(), this.setupButtonA11y());
39
- }
40
- setupButtonA11y() {
41
- this.$button.ariaExpanded = "false", this.$button.setAttribute("aria-controls", this.for || "");
42
- }
43
- updateDataLabel() {
44
- this.$button && this.$button.setAttribute("data-label", this.textContent), this.$a && this.$a.setAttribute("data-label", this.textContent);
45
- }
46
- get for() {
47
- return this.getAttribute("for");
48
- }
49
- set for(t) {
50
- this.setAttribute("for", t);
51
- }
52
- get checked() {
53
- return this.$button.ariaExpanded === "true";
54
- }
55
- set checked(t) {
56
- if (typeof t != "boolean")
57
- throw new Error("checked must be a boolean");
58
- this.$button && (this.$button.ariaExpanded = `${!!t}`, this.$button.setAttribute("aria-controls", this.for));
59
- }
60
- get $button() {
61
- return this.shadowRoot.querySelector("button");
62
- }
63
- get $a() {
64
- return this.shadowRoot.querySelector("a");
65
- }
66
- }
67
- customElements.get("px-header-item") || customElements.define("px-header-item", Ct);
68
- const Et = ':host([variant="icon-link"]){display:inline-flex}a,.link,::slotted(a){display:inline;align-items:center;font-family:var(--px-font-family);font-size:var(--px-text-size-link-m-mobile);line-height:var(--px-line-height-ratio-l);font-weight:var(--px-font-weight-body);color:var(--px-color-text-neutral-default)}a:hover,.link:hover{color:var(--px-color-text-state-hover-default)}a:focus-visible,.link:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}a[aria-disabled=true],.link[aria-disabled=true]{cursor:default;pointer-events:none;color:var(--px-color-text-state-disabled-default)}a ::slotted([slot="after"]),.link ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-mobile)}a ::slotted(span[slot="after"]),a ::slotted(span[slot="before"]),.link ::slotted(span[slot="after"]),.link ::slotted(span[slot="before"]){display:inline-block}::slotted(a:hover){color:var(--px-color-text-state-hover-default)}a.no-style{text-decoration:none}a.no-style:hover,a.no-style:focus-visible{color:inherit}a.skip-link{position:absolute;left:-10000px;top:auto;overflow:hidden;background-color:var(--px-color-background-container-default-default);padding:var(--px-padding-xs-mobile)}a.skip-link:focus-visible{left:auto;z-index:999}:host([target="_blank"]) ::slotted(px-icon){vertical-align:middle}.icon-link{color:var(--px-color-icon-brand-default);line-height:1;display:inline-flex}:host([inverted]) a,:host([inverted]) .link,:host([inverted]) ::slotted(a){color:var(--px-color-text-neutral-inverted)}:host([inverted]) a:hover,:host([inverted]) .link:hover{color:var(--px-color-text-state-hover-inverted)}:host([inverted]) a:focus-visible,:host([inverted]) .link:focus-visible{outline-color:var(--px-color-border-focus-outline-inverted)}:host([inverted]) a[aria-disabled=true],:host([inverted]) .link[aria-disabled=true]{color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) ::slotted(a:hover){color:var(--px-color-text-state-hover-inverted)}:host([inverted]) a.skip-link{background-color:var(--px-color-background-container-default-inverted)}:host([inverted]) .icon-link{color:var(--px-color-icon-brand-inverted)}@media only screen and (min-width: 768px){a,.link,::slotted(a){font-size:var(--px-text-size-link-m-tablet)}a:focus-visible,.link:focus-visible{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}a ::slotted([slot="after"]),.link ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-tablet)}a.skip-link{padding:var(--px-padding-xs-tablet)}}@media only screen and (min-width: 1025px){a,.link,::slotted(a){font-size:var(--px-text-size-link-m-laptop)}a:focus-visible,.link:focus-visible{outline-offset:var(--px-focus-offset-laptop);outline-width:var(--px-focus-outline-laptop)}a ::slotted([slot="after"]),.link ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-laptop)}a.skip-link{padding:var(--px-padding-xs-laptop)}}@media only screen and (min-width: 90.0625em){a,.link,::slotted(a){font-size:var(--px-text-size-link-m-desktop)}a:focus-visible,.link:focus-visible{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}a ::slotted([slot="after"]),.link ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-desktop)}a.skip-link{padding:var(--px-padding-xs-desktop)}}', Lt = `.btn{width:var(--button-extended--mobile, var(--button-extended, auto));display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-line-height-ratio-l);font-weight:var(--px-font-weight-title);text-align:center;gap:var(--px-spacing-2xs-mobile);cursor:pointer;text-decoration:none;--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition);border:var(--px-size-border-m) solid transparent}.btn,.btn *{box-sizing:border-box}.btn ::slotted(px-icon){line-height:0}.btn:hover:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-state-hover-default)}.btn:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}.btn:active:not([disabled],[aria-disabled=true],.loading){transform:scale(.95);border-color:var(--px-color-border-state-active-default);color:var(--px-color-text-state-active-default);background:var(--px-color-background-state-hover-bordered-default)}.btn[disabled],.btn[aria-disabled=true]{cursor:default;pointer-events:none}.btn.loading{cursor:inherit}.btn.loading ::slotted(px-spinner){line-height:0}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-container-primary-default);min-height:var(--px-spacing-l-mobile);padding:var(--px-padding-xs-mobile) var(--px-padding-m-mobile);border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-mobile) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-mobile) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown):hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown)[disabled],.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown)[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown).loading{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-brand-default);border-color:transparent}.btn.secondary{color:var(--px-color-text-brand-default);background:var(--px-color-background-container-secondary-default);min-height:var(--px-spacing-l-mobile);padding:var(--px-padding-xs-mobile) var(--px-padding-m-mobile);border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn.secondary:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default)}.btn.secondary[disabled],.btn.secondary[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}.btn.secondary.loading{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-brand-default);border-color:transparent}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn.tertiary{background:none;color:var(--px-color-text-brand-default);border-radius:var(--px-radius-pill);border:var(--px-size-border-m) solid transparent;padding:var(--px-padding-2xs-mobile) 0;gap:var(--px-spacing-xs-mobile)}.btn.tertiary ::slotted(px-icon){display:flex;align-items:center;justify-content:center;width:var(--px-size-icon-xs);height:var(--px-size-icon-xs);padding:4px;border-radius:var(--px-radius-pill);background:var(--px-color-background-container-secondary-default);transition:var(--btn-transition)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading),.btn.tertiary:active:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-mobile) var(--px-padding-s-mobile)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon),.btn.tertiary:active:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon){background:transparent;margin:0 -8px;width:inherit;height:inherit}.btn.tertiary[disabled],.btn.tertiary[aria-disabled=true]{color:var(--px-color-text-state-disabled-default)}.btn.tertiary[disabled] ::slotted(px-icon),.btn.tertiary[aria-disabled=true] ::slotted(px-icon){background:var(--px-color-background-state-disabled-default)}.btn.tertiary.loading{color:var(--px-color-text-brand-default);border-color:transparent}.btn.tertiary.loading ::slotted(px-spinner){display:flex;align-items:center;justify-content:center;width:var(--px-size-icon-xs);height:var(--px-size-icon-xs);padding:4px;border-radius:var(--px-radius-pill);background:var(--px-color-background-state-disabled-default)}.btn.patch{display:inline-flex}.btn.patch:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default)}.btn.patch[disabled],.btn.patch[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}.btn.actionable-tag{background:var(--px-color-background-container-default-inverted);color:var(--px-color-text-neutral-default);padding:var(--px-padding-2xs-mobile) var(--px-padding-xs-mobile);gap:var(--px-spacing-xs-mobile);border-radius:var(--px-radius-pill);border:var(--px-size-border-m) solid var(--px-color-border-neutral-default)}.btn.actionable-tag:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default)}.btn.actionable-tag:active:not([disabled],[aria-disabled=true],.loading){background:var(--px-color-background-state-active-default);color:var(--px-color-text-state-active-inverted);border-color:var(--px-color-border-none-default)}.btn.actionable-tag[disabled],.btn.actionable-tag[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default);border-color:var(--px-color-border-none-default)}.btn.header-dropdown{display:flex;justify-content:space-between;width:100%;color:var(--px-color-text-neutral-default);font-weight:var(--px-font-weight-body);font-size:var(--px-text-size-label-l-mobile);border:var(--px-size-border-m) solid var(--px-color-border-neutral-default);padding:var(--px-padding-xs-mobile) var(--px-padding-s-mobile);border-radius:var(--px-radius-main);background-color:var(--px-color-background-container-default-default);touch-action:manipulation}.btn.header-dropdown:after{display:inline-block;content:"";width:var(--px-size-icon-xs);height:var(--px-size-icon-xs);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:cover;mask-size:cover;-webkit-mask-position:50% 50%;mask-position:50% 50%;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.4753 7.37808C15.1565 7.06426 14.6396 7.06426 14.3208 7.37808L10.0001 11.6313L5.67934 7.37808C5.36055 7.06426 4.84368 7.06426 4.52488 7.37808C4.20608 7.69189 4.20608 8.20069 4.52488 8.5145L9.42284 13.3359C9.74163 13.6497 10.2585 13.6497 10.5773 13.3359L15.4753 8.5145C15.7941 8.20069 15.7941 7.69189 15.4753 7.37808Z' fill='%235C2D91'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.4753 7.37808C15.1565 7.06426 14.6396 7.06426 14.3208 7.37808L10.0001 11.6313L5.67934 7.37808C5.36055 7.06426 4.84368 7.06426 4.52488 7.37808C4.20608 7.69189 4.20608 8.20069 4.52488 8.5145L9.42284 13.3359C9.74163 13.6497 10.2585 13.6497 10.5773 13.3359L15.4753 8.5145C15.7941 8.20069 15.7941 7.69189 15.4753 7.37808Z' fill='%235C2D91'/%3E%3C/svg%3E");background-color:currentColor;color:var(--px-color-icon-brand-default)}button.link{background:none;border:none;text-decoration:underline;padding:0;cursor:pointer}button.link[disabled],button.link[aria-disabled=true]{cursor:default;pointer-events:none;color:var(--px-color-text-state-disabled-default)}:host([inverted]) .btn:hover:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) .btn:focus-visible:not([disabled],[aria-disabled=true]){outline-color:var(--px-color-border-focus-outline-inverted)}:host([inverted]) .btn:active:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-state-active-inverted);color:var(--px-color-text-state-active-inverted);background:var(--px-color-background-state-hover-bordered-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag){color:var(--px-color-text-brand-default);background:var(--px-color-background-container-primary-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag):hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-state-hover-bordered-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag)[disabled],:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag)[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag).loading{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-brand-inverted);border-color:transparent}:host([inverted]) .btn.secondary{color:var(--px-color-text-brand-inverted);background:var(--px-color-background-container-secondary-inverted)}:host([inverted]) .btn.secondary:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-container-default-inverted)}:host([inverted]) .btn.secondary[disabled],:host([inverted]) .btn.secondary[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .btn.secondary.loading{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-brand-inverted);border-color:transparent}:host([inverted]) .btn.tertiary{color:var(--px-color-text-brand-inverted)}:host([inverted]) .btn.tertiary ::slotted(px-icon){background:var(--px-color-background-container-secondary-inverted)}:host([inverted]) .btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon),:host([inverted]) .btn.tertiary:active:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon){background:transparent}:host([inverted]) .btn.tertiary[disabled],:host([inverted]) .btn.tertiary[aria-disabled=true]{color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .btn.tertiary[disabled] ::slotted(px-icon),:host([inverted]) .btn.tertiary[aria-disabled=true] ::slotted(px-icon){background:var(--px-color-background-state-disabled-inverted)}:host([inverted]) .btn.tertiary.loading{color:var(--px-color-text-brand-inverted)}:host([inverted]) .btn.tertiary.loading ::slotted(px-spinner){background:var(--px-color-background-state-disabled-inverted)}:host([inverted]) .btn.patch:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-state-hover-bordered-inverted)}:host([inverted]) .btn.patch[disabled],:host([inverted]) .btn.patch[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .btn.actionable-tag{background:var(--px-color-background-container-default-default);color:var(--px-color-text-brand-inverted);border-color:var(--px-color-border-neutral-inverted)}:host([inverted]) .btn.actionable-tag:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-state-hover-bordered-inverted);border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) .btn.actionable-tag:active:not([disabled],[aria-disabled=true],.loading){background:var(--px-color-background-state-active-inverted);color:var(--px-color-text-state-active-default);border-color:var(--px-color-border-none-inverted)}:host([inverted]) .btn.actionable-tag[disabled],:host([inverted]) .btn.actionable-tag[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted);border-color:var(--px-color-border-none-default)}:host([inverted]) button.link[disabled],:host([inverted]) button.link[aria-disabled=true]{color:var(--px-color-text-state-disabled-inverted)}@media only screen and (max-width: 47.938em){.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--mobile=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--mobile=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--mobile=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--mobile=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}}@media only screen and (min-width: 48em) and (max-width: 64em){.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--tablet=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--tablet=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--tablet=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--tablet=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}}@media only screen and (min-width: 48em){.btn{width:var(--button-extended--tablet, var(--button-extended, auto));font-size:var(--px-text-size-label-m-desktop);gap:var(--px-spacing-2xs-desktop)}.btn:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}.btn.actionable-tag{padding:var(--px-padding-2xs-desktop) var(--px-padding-xs-desktop);gap:var(--px-spacing-xs-desktop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown){padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-desktop) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-desktop) * -1)}.btn.secondary{padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn.tertiary{padding:var(--px-padding-2xs-desktop) 0;gap:var(--px-spacing-xs-desktop)}.btn.tertiary ::slotted(px-icon){width:var(--px-size-icon-xs);height:var(--px-size-icon-xs)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-desktop) var(--px-padding-s-desktop)}.btn.tertiary.loading ::slotted(px-spinner){width:var(--px-size-icon-xs);height:var(--px-size-icon-xs)}.btn.header-dropdown{justify-content:flex-start;align-items:center;width:inherit;color:var(--px-color-text-brand-default);font-weight:var(--px-font-weight-title);font-size:var(--px-text-size-label-m-tablet);border:none;padding:0;border-radius:0;background:none}}@media only screen and (min-width: 64.0625em) and (max-width: 90em){.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--laptop=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--laptop=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--laptop=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--laptop=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}}@media only screen and (min-width: 64.0625em){.btn{width:var(--button-extended--laptop, var(--button-extended, auto));font-size:var(--px-text-size-label-m-laptop);gap:var(--px-spacing-2xs-laptop)}.btn:focus-visble:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-laptop);outline-width:var(--px-focus-outline-laptop)}.btn.actionable-tag{padding:var(--px-padding-2xs-laptop) var(--px-padding-xs-laptop);gap:var(--px-spacing-xs-laptop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown){padding:var(--px-padding-xs-laptop) var(--px-padding-m-laptop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-laptop) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-laptop) * -1)}.btn.secondary{padding:var(--px-padding-xs-laptop) var(--px-padding-m-laptop)}.btn.tertiary{padding:var(--px-padding-2xs-laptop) 0;gap:var(--px-spacing-xs-laptop)}.btn.tertiary ::slotted(px-icon){width:var(--px-size-icon-xs);height:var(--px-size-icon-xs)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-laptop) var(--px-padding-s-laptop)}.btn.tertiary.loading ::slotted(px-spinner){width:var(--px-size-icon-xs);height:var(--px-size-icon-xs)}.btn.header-dropdown{font-size:var(--px-text-size-label-m-laptop);padding:0}}@media only screen and (min-width: 90.0625em){.btn{width:var(--button-extended--desktop, var(--button-extended, auto));font-size:var(--px-text-size-label-m-desktop);gap:var(--px-spacing-2xs-desktop)}.btn:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}.btn.actionable-tag{padding:var(--px-padding-2xs-desktop) var(--px-padding-xs-desktop);gap:var(--px-spacing-xs-desktop)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--desktop=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--desktop=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--desktop=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--desktop=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown){padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-desktop) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-desktop) * -1)}.btn.secondary{padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn.tertiary{padding:var(--px-padding-2xs-desktop) 0;gap:var(--px-spacing-xs-desktop)}.btn.tertiary ::slotted(px-icon){width:var(--px-size-icon-xs);height:var(--px-size-icon-xs)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-desktop) var(--px-padding-s-desktop)}.btn.tertiary.loading ::slotted(px-spinner){width:var(--px-size-icon-xs);height:var(--px-size-icon-xs)}.btn.header-dropdown{font-size:var(--px-text-size-label-m-desktop);padding:0}}@keyframes anim-spinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}`, Tt = ".color-inherit{color:inherit!important}.color-brand{color:var(--px-color-text-brand-default)!important}.color-neutral{color:var(--px-color-text-neutral-default)!important}.color-dimmed{color:var(--px-color-text-dimmed-default)!important}.color-purpose-success{color:var(--px-color-text-purpose-success-default)!important}.color-purpose-warning{color:var(--px-color-text-purpose-warning-default)!important}.color-purpose-error{color:var(--px-color-text-purpose-error-default)!important}.color-purpose-unlimited{color:var(--px-color-text-purpose-unlimited-default)!important}.color-purpose-promo{color:var(--px-color-text-purpose-promo-default)!important}.color-state-hover{color:var(--px-color-text-state-hover-default)!important}.color-state-active{color:var(--px-color-text-state-active-default)!important}.color-state-disabled{color:var(--px-color-text-state-disabled-default)!important}:host([inverted]) .color-inherit{color:inherit!important}:host([inverted]) .color-brand{color:var(--px-color-text-brand-inverted)!important}:host([inverted]) .color-neutral{color:var(--px-color-text-neutral-inverted)!important}:host([inverted]) .color-dimmed{color:var(--px-color-text-dimmed-inverted)!important}:host([inverted]) .color-purpose-success{color:var(--px-color-text-purpose-success-inverted)!important}:host([inverted]) .color-purpose-warning{color:var(--px-color-text-purpose-warning-inverted)!important}:host([inverted]) .color-purpose-error{color:var(--px-color-text-purpose-error-inverted)!important}:host([inverted]) .color-purpose-unlimited{color:var(--px-color-text-purpose-unlimited-inverted)!important}:host([inverted]) .color-purpose-promo{color:var(--px-color-text-purpose-promo-inverted)!important}:host([inverted]) .color-state-hover{color:var(--px-color-text-state-hover-inverted)!important}:host([inverted]) .color-state-active{color:var(--px-color-text-state-active-inverted)!important}:host([inverted]) .color-state-disabled{color:var(--px-color-text-state-disabled-inverted)!important}.font-size-inherit{font-size:inherit;line-height:inherit}.font-size-body-l{font-size:var(--px-text-size-body-l-mobile)}.font-size-body-m{font-size:var(--px-text-size-body-m-mobile)}.font-size-body-s{font-size:var(--px-text-size-body-s-mobile)}.font-size-body-xs{font-size:var(--px-text-size-body-xs-mobile)}.font-size-heading-5xl{font-size:var(--px-text-size-heading-5xl-mobile)}.font-size-heading-4xl{font-size:var(--px-text-size-heading-4xl-mobile)}.font-size-heading-3xl{font-size:var(--px-text-size-heading-3xl-mobile)}.font-size-heading-2xl{font-size:var(--px-text-size-heading-2xl-mobile)}.font-size-heading-xl{font-size:var(--px-text-size-heading-xl-mobile)}.font-size-heading-l{font-size:var(--px-text-size-heading-l-mobile)}.font-size-heading-m{font-size:var(--px-text-size-heading-m-mobile)}.font-size-heading-s{font-size:var(--px-text-size-heading-s-mobile)}.font-size-heading-3xl,.font-size-heading-4xl,.font-size-heading-5xl{line-height:var(--px-line-height-ratio-s)}.font-size-link-m{font-size:var(--px-text-size-link-m-mobile)}.font-size-link-s{font-size:var(--px-text-size-link-s-mobile)}@media only screen and (min-width: 48em){.font-size-body-l{font-size:var(--px-text-size-body-l-desktop)}.font-size-body-m{font-size:var(--px-text-size-body-m-desktop)}.font-size-body-s{font-size:var(--px-text-size-body-s-desktop)}.font-size-body-xs{font-size:var(--px-text-size-body-xs-desktop)}.font-size-heading-5xl{font-size:var(--px-text-size-heading-5xl-desktop)}.font-size-heading-4xl{font-size:var(--px-text-size-heading-4xl-desktop)}.font-size-heading-3xl{font-size:var(--px-text-size-heading-3xl-desktop)}.font-size-heading-2xl{font-size:var(--px-text-size-heading-2xl-desktop)}.font-size-heading-xl{font-size:var(--px-text-size-heading-xl-desktop)}.font-size-heading-l{font-size:var(--px-text-size-heading-l-desktop)}.font-size-heading-m{font-size:var(--px-text-size-heading-m-desktop)}.font-size-heading-s{font-size:var(--px-text-size-heading-s-desktop)}.font-size-link-m{font-size:var(--px-text-size-link-m-desktop)}.font-size-link-s{font-size:var(--px-text-size-link-s-desktop)}}@media only screen and (min-width: 64.0625em){.font-size-body-l{font-size:var(--px-text-size-body-l-desktop)}.font-size-body-m{font-size:var(--px-text-size-body-m-desktop)}.font-size-body-s{font-size:var(--px-text-size-body-s-desktop)}.font-size-body-xs{font-size:var(--px-text-size-body-xs-desktop)}.font-size-heading-5xl{font-size:var(--px-text-size-heading-5xl-desktop)}.font-size-heading-4xl{font-size:var(--px-text-size-heading-4xl-desktop)}.font-size-heading-3xl{font-size:var(--px-text-size-heading-3xl-desktop)}.font-size-heading-2xl{font-size:var(--px-text-size-heading-2xl-desktop)}.font-size-heading-xl{font-size:var(--px-text-size-heading-xl-desktop)}.font-size-heading-l{font-size:var(--px-text-size-heading-l-desktop)}.font-size-heading-m{font-size:var(--px-text-size-heading-m-desktop)}.font-size-heading-s{font-size:var(--px-text-size-heading-s-desktop)}.font-size-link-m{font-size:var(--px-text-size-link-m-desktop)}.font-size-link-s{font-size:var(--px-text-size-link-s-desktop)}}.font-weight-inherit{font-weight:inherit}.font-weight-body{font-weight:var(--px-font-weight-body)}.font-weight-title{font-weight:var(--px-font-weight-title)}.font-weight-title-large{font-weight:var(--px-font-weight-title-large)}.font-weight-subtitle{font-weight:var(--px-font-weight-subtitle)}", rt = new CSSStyleSheet(), at = new CSSStyleSheet(), it = new CSSStyleSheet();
69
- rt.replaceSync(Et);
70
- at.replaceSync(Lt);
71
- it.replaceSync(Tt);
72
- const Mt = [...kt, "link-m", "link-s"], Rt = [
73
- "link",
74
- "no-style",
75
- "skip-link",
76
- "btn-default",
77
- "btn-secondary",
78
- "btn-tertiary",
79
- "icon-link"
80
- ], Nt = ["", "default", "alternative"], j = class j extends yt {
81
- constructor() {
82
- super(rt, at, it), this.template = () => '<slot name="before"></slot><slot></slot><slot name="after"></slot>';
83
- const t = document.createElement(j.nativeName);
84
- t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
85
- }
86
- static get observedAttributes() {
87
- return [
88
- ...super.observedAttributes,
89
- "disabled",
90
- "variant",
91
- "shape",
92
- "shape--mobile",
93
- "shape--tablet",
94
- "shape--laptop",
95
- "shape--desktop",
96
- "extended",
97
- "extended--mobile",
98
- "extended--tablet",
99
- "extended--laptop",
100
- "extended--desktop",
101
- "inverted",
102
- "font-size",
103
- "color",
104
- "font-weight",
105
- "title"
106
- ];
107
- }
108
- connectedCallback() {
109
- this.$before && this.$before.localName === "px-icon" && this.configureBeforeAfterIcon(this.$before), this.$after && this.$after.localName === "px-icon" && this.configureBeforeAfterIcon(this.$after), zt(this, this.$el, !1);
110
- }
111
- attributeChangedCallback(t, e, r) {
112
- if (e !== r)
113
- switch (t) {
114
- case "disabled":
115
- this.$el.toggleAttribute("aria-disabled"), r !== null && this.$el.setAttribute("aria-disabled", "true");
116
- break;
117
- case "variant":
118
- this.updateVariant(e, r);
119
- break;
120
- case "shape":
121
- case "shape--mobile":
122
- case "shape--tablet":
123
- case "shape--laptop":
124
- case "shape--desktop":
125
- this.updateShape(t, r, Nt);
126
- break;
127
- case "extended":
128
- case "extended--mobile":
129
- case "extended--tablet":
130
- case "extended--laptop":
131
- case "extended--desktop":
132
- this.updateExtended(t, r);
133
- break;
134
- case "font-size":
135
- this.updateTypography(
136
- t,
137
- e,
138
- r,
139
- Mt
140
- );
141
- break;
142
- case "color":
143
- this.updateTypography(t, e, r, $t);
144
- break;
145
- case "font-weight":
146
- this.updateTypography(t, e, r, wt);
147
- break;
148
- case "title":
149
- r && (this.$el.setAttribute("title", r), this.removeAttribute("title"));
150
- break;
151
- default:
152
- super.attributeChangedCallback(t, e, r);
153
- break;
154
- }
155
- }
156
- configureBeforeAfterIcon(t) {
157
- const e = t.getAttribute("size"), r = t.getAttribute("color");
158
- t.addEventListener("click", () => {
159
- this.$el.focus();
160
- }), e || t.setAttribute("size", "xs"), r || t.setAttribute("color", "inherit");
161
- }
162
- _toggleClassList(t) {
163
- if (t.startsWith("btn-")) {
164
- const e = t.split("-");
165
- for (const r of e)
166
- this.$el.classList.toggle(r);
167
- } else
168
- this.$el.classList.toggle(t);
169
- }
170
- updateVariant(t, e) {
171
- t !== null && t !== "" && t !== "link" && this._toggleClassList(t), e !== null && e !== "" && e !== "link" && this._toggleClassList(e), this.checkName(Rt, e) || R(
172
- `${e} is not an allowed variant value for ${this.tagName.toLowerCase()}`
173
- ), e === "icon-link" && this.$iconNotBeforeAfter.setAttribute("color", "inherit");
174
- }
175
- updateShape(t, e, r) {
176
- if (!At(r, e)) {
177
- R(
178
- `${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
179
- );
180
- return;
181
- }
182
- e !== null && e !== "" && this.$el.setAttribute(t, e);
183
- }
184
- updateTypography(t, e, r, n) {
185
- e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`${t}-${e}`), r !== null && r !== "" && r !== "default" && this.$el.classList.toggle(`${t}-${r}`), this.checkName(n, r) || R(
186
- `${r} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
187
- );
188
- }
189
- updateExtended(t, e) {
190
- e === null ? this.$el.style.setProperty(`--button-${t}`, "") : this.$el.style.setProperty(`--button-${t}`, "100%");
191
- }
192
- get $before() {
193
- return this.querySelector('[slot="before"]');
194
- }
195
- get $after() {
196
- return this.querySelector('[slot="after"]');
197
- }
198
- get $iconNotBeforeAfter() {
199
- return this.querySelector(
200
- 'px-icon:not([slot="before"], [slot="after"])'
201
- );
202
- }
203
- get disabled() {
204
- return this.getAttribute("disabled");
205
- }
206
- set disabled(t) {
207
- this.setAttribute("disabled", t);
208
- }
209
- get variant() {
210
- return this.getAttribute("variant");
211
- }
212
- set variant(t) {
213
- this.setAttribute("variant", t);
214
- }
215
- get shape() {
216
- return this.getAttribute("shape");
217
- }
218
- set shape(t) {
219
- this.setAttribute("shape", t);
220
- }
221
- get shapeMobile() {
222
- return this.getAttribute("shape--mobile");
223
- }
224
- set shapeMobile(t) {
225
- this.setAttribute("shape--mobile", t);
226
- }
227
- get shapeTablet() {
228
- return this.getAttribute("shape--tablet");
229
- }
230
- set shapeTablet(t) {
231
- this.setAttribute("shape--tablet", t);
232
- }
233
- get shapeLaptop() {
234
- return this.getAttribute("shape--laptop");
235
- }
236
- set shapeLaptop(t) {
237
- this.setAttribute("shape--laptop", t);
238
- }
239
- get shapeDesktop() {
240
- return this.getAttribute("shape--desktop");
241
- }
242
- set shapeDesktop(t) {
243
- this.setAttribute("shape--desktop", t);
244
- }
245
- get extended() {
246
- return this.getAttribute("extended");
247
- }
248
- set extended(t) {
249
- this.setAttribute("extended", t);
250
- }
251
- get extendedMobile() {
252
- return this.getAttribute("extended--mobile");
253
- }
254
- set extendedMobile(t) {
255
- this.setAttribute("extended--mobile", t);
256
- }
257
- get extendedTablet() {
258
- return this.getAttribute("extended--tablet");
259
- }
260
- set extendedTablet(t) {
261
- this.setAttribute("extended--tablet", t);
262
- }
263
- get extendedLaptop() {
264
- return this.getAttribute("extended--laptop");
265
- }
266
- set extendedLaptop(t) {
267
- this.setAttribute("extended--laptop", t);
268
- }
269
- get extendedDesktop() {
270
- return this.getAttribute("extended--desktop");
271
- }
272
- set extendedDesktop(t) {
273
- this.setAttribute("extended--desktop", t);
274
- }
275
- get inverted() {
276
- return this.getAttribute("inverted");
277
- }
278
- set inverted(t) {
279
- this.setAttribute("inverted", t);
280
- }
281
- get fontsize() {
282
- return this.getAttribute("font-size");
283
- }
284
- set fontsize(t) {
285
- this.setAttribute("font-size", t);
286
- }
287
- get color() {
288
- return this.getAttribute("color");
289
- }
290
- set color(t) {
291
- this.setAttribute("color", t);
292
- }
293
- get fontweight() {
294
- return this.getAttribute("font-weight");
295
- }
296
- set fontweight(t) {
297
- this.setAttribute("font-weight", t);
298
- }
299
- get title() {
300
- return this.getAttribute("title");
301
- }
302
- set title(t) {
303
- t ? this.setAttribute("title", t) : this.removeAttribute("title");
304
- }
15
+ </a>` : `<button data-label="${this.textContent}"><slot></slot></button>`}`, this.#e = () => {
16
+ this.$button && this.$button.setAttribute("data-label", this.textContent), this.$a && this.$a.setAttribute("data-label", this.textContent);
17
+ }, this.#t = new MutationObserver(this.#e), this.shadowRoot.adoptedStyleSheets = [f], this.internals = this.attachInternals?.(), this.internals && (this.internals.role = "listitem");
18
+ }
19
+ static get observedAttributes() {
20
+ return [
21
+ "for",
22
+ "href",
23
+ "current"
24
+ ];
25
+ }
26
+ connectedCallback() {
27
+ this.shadowRoot.innerHTML = this.template(), this.role = "listitem", this.setAttribute("slot", "header-entries"), this.$button && this.setupButtonA11y(), this.#t.observe(this, {
28
+ childList: !0,
29
+ subtree: !0,
30
+ characterData: !0
31
+ });
32
+ }
33
+ disconnectedCallback() {
34
+ this.#t.disconnect();
35
+ }
36
+ attributeChangedCallback(e, t, n) {
37
+ super.attributeChangedCallback(e, t, n), e === "href" && t !== n ? this.shadowRoot.innerHTML = this.template() : e === "for" && t !== n && this.$button && (this.shadowRoot.innerHTML = this.template(), this.setupButtonA11y());
38
+ }
39
+ setupButtonA11y() {
40
+ this.$button && (this.$button.ariaExpanded = "false", this.$button.setAttribute("aria-controls", this.for || ""));
41
+ }
42
+ #e;
43
+ #t;
44
+ get for() {
45
+ return this.getAttribute("for");
46
+ }
47
+ set for(e) {
48
+ l(this, "for", e);
49
+ }
50
+ get checked() {
51
+ return this.$button ? this.$button.ariaExpanded === "true" : !1;
52
+ }
53
+ set checked(e) {
54
+ if (typeof e != "boolean") throw Error("checked must be a boolean");
55
+ this.$button && (this.$button.ariaExpanded = `${!!e}`, this.for && this.$button.setAttribute("aria-controls", this.for));
56
+ }
57
+ get current() {
58
+ return this.hasAttribute("current");
59
+ }
60
+ set current(e) {
61
+ r(this, "current", e);
62
+ }
63
+ get $button() {
64
+ return this.shadowRoot.querySelector("button");
65
+ }
66
+ get $a() {
67
+ return this.shadowRoot.querySelector("a");
68
+ }
305
69
  };
306
- j.nativeName = "a";
307
- let W = j;
308
- customElements.get("px-a") || customElements.define("px-a", W);
309
- class qt extends HTMLElement {
310
- constructor() {
311
- super(), this.template = `<px-a font-weight="title" font-size="body-l" color="brand" variant="no-style">
312
- <slot></slot>
313
- </px-a>`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template;
314
- const t = this.shadowRoot.querySelector("px-a");
315
- t && Array.from(this.attributes).forEach((e) => {
316
- t.setAttribute(e.name, e.value);
317
- });
318
- }
319
- }
320
- customElements.get("px-mdd-a") || customElements.define("px-mdd-a", qt);
321
- const jt = "#navigation-container{border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default)}#dropdown-zone--desktop{display:none}#primary-navigation{display:none;margin:0;padding:0}#panel-container{position:absolute;top:0;left:0;right:0;z-index:999}#backdrop-filter{display:none;position:absolute;z-index:998;left:0;width:100vw;height:100%;background:#0000004d;-webkit-backdrop-filter:saturate(180%) blur(15px);backdrop-filter:saturate(180%) blur(15px)}@media only screen and (min-width: 48em){#dropdown-zone--desktop{display:block;margin-block:var(--px-padding-s-tablet)}#primary-navigation{display:block}#panel-container{top:auto}}@media only screen and (min-width: 64.0625em){#dropdown-zone--desktop{margin-block:var(--px-padding-s-laptop)}}@media only screen and (min-width: 90.0625em){#dropdown-zone--desktop{margin-block:var(--px-padding-s-desktop)}}";
322
- function N(o) {
323
- var t = typeof o;
324
- return o != null && (t == "object" || t == "function");
70
+ customElements.get("px-header-item") || customElements.define("px-header-item", p);
71
+ //#endregion
72
+ //#region ../../components/Link/src/link.css?inline
73
+ var m = ":host([variant=icon-link]){display:inline-flex}a,.link,::slotted(a){font-family:var(--px-font-family);font-size:var(--px-text-size-link-m-mobile);line-height:var(--px-line-height-ratio-l);font-weight:var(--px-font-weight-body);color:var(--px-color-text-neutral-default);align-items:center;display:inline}:is(a,.link,::slotted(a)):hover{color:var(--px-color-text-state-hover-default)}:is(a,.link,::slotted(a)):focus-visible{outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}:is(a,.link,::slotted(a))[aria-disabled=true]{cursor:default;pointer-events:none;color:var(--px-color-text-state-disabled-default)}:is(a,.link,::slotted(a)) ::slotted([slot=after]){margin-left:var(--px-spacing-2xs-mobile)}:is(a,.link,::slotted(a)) ::slotted(span[slot=after]),:is(a,.link,::slotted(a)) ::slotted(span[slot=before]){display:inline-block}::slotted(a:hover){color:var(--px-color-text-state-hover-default)}a.no-style,a.wrapper{text-decoration:none}:is(a.no-style,a.wrapper):hover,:is(a.no-style,a.wrapper):focus-visible{color:inherit}a.wrapper{line-height:0;display:block}a.wrapper:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}a.skip-link{background-color:var(--px-color-background-container-default-default);padding:var(--px-padding-xs-mobile);position:absolute;top:auto;left:-10000px;overflow:hidden}a.skip-link:focus-visible{z-index:999;left:auto}:host([target=_blank]) ::slotted(px-icon){vertical-align:middle}.icon-link{color:var(--px-color-icon-brand-default);line-height:1;display:inline-flex}:host([inverted]) a,:host([inverted]) .link,:host([inverted]) ::slotted(a){color:var(--px-color-text-neutral-inverted)}:is(:host([inverted]) a,:host([inverted]) .link,:host([inverted]) ::slotted(a)):hover{color:var(--px-color-text-state-hover-inverted)}:is(:host([inverted]) a,:host([inverted]) .link,:host([inverted]) ::slotted(a)):focus-visible{outline-color:var(--px-color-border-focus-outline-inverted)}:is(:host([inverted]) a,:host([inverted]) .link,:host([inverted]) ::slotted(a))[aria-disabled=true]{color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) ::slotted(a:hover){color:var(--px-color-text-state-hover-inverted)}:host([inverted]) a.skip-link{background-color:var(--px-color-background-container-default-inverted)}:host([inverted]) .icon-link{color:var(--px-color-icon-brand-inverted)}@media screen and (width>=48rem){a.wrapper:focus-visible{outline-offset:var(--px-focus-offset-tablet);outline:var(--px-focus-outline-tablet) solid var(--px-color-border-focus-outline-default)}a,.link,::slotted(a){font-size:var(--px-text-size-link-m-tablet)}:is(a,.link,::slotted(a)):focus-visible{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}:is(a,.link,::slotted(a)) ::slotted([slot=after]){margin-left:var(--px-spacing-2xs-tablet)}a.skip-link{padding:var(--px-padding-xs-tablet)}}@media screen and (width>=64.0625rem){a.wrapper:focus-visible{outline-offset:var(--px-focus-offset-laptop);outline:var(--px-focus-outline-laptop) solid var(--px-color-border-focus-outline-default)}a,.link,::slotted(a){font-size:var(--px-text-size-link-m-laptop)}:is(a,.link,::slotted(a)):focus-visible{outline-offset:var(--px-focus-offset-laptop);outline-width:var(--px-focus-outline-laptop)}:is(a,.link,::slotted(a)) ::slotted([slot=after]){margin-left:var(--px-spacing-2xs-laptop)}a.skip-link{padding:var(--px-padding-xs-laptop)}}@media screen and (width>=90.0625rem){a.wrapper:focus-visible{outline-offset:var(--px-focus-offset-desktop);outline:var(--px-focus-outline-desktop) solid var(--px-color-border-focus-outline-default)}a,.link,::slotted(a){font-size:var(--px-text-size-link-m-desktop)}:is(a,.link,::slotted(a)):focus-visible{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}:is(a,.link,::slotted(a)) ::slotted([slot=after]){margin-left:var(--px-spacing-2xs-desktop)}a.skip-link{padding:var(--px-padding-xs-desktop)}}", h = ".btn,.btn *{box-sizing:border-box}.btn{width:var(--button-extended--mobile,var(--button-extended,auto));vertical-align:middle;font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-line-height-ratio-l);font-weight:var(--px-font-weight-title);text-align:center;justify-content:center;align-items:center;gap:var(--px-spacing-2xs-mobile);cursor:pointer;--btn-transition:all .2s ease-in-out 0s;transition:var(--btn-transition);border:var(--px-size-border-m) solid transparent;text-decoration:none;display:inline-flex}.btn ::slotted(px-icon){flex-shrink:0;line-height:0}.btn:hover:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-state-hover-default)}.btn:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}.btn:active:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-state-active-default);color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default);transform:scale(.95)}.btn[disabled],.btn[aria-disabled=true]{cursor:default;pointer-events:none}.btn.loading{cursor:inherit}.btn.loading ::slotted(px-spinner){line-height:0}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-container-primary-default);min-height:var(--px-spacing-l-mobile);padding:var(--px-padding-xs-mobile) var(--px-padding-m-mobile)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown) ::slotted([slot=after]){margin-right:calc(var(--px-padding-xs-mobile) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown) ::slotted([slot=before]){margin-left:calc(var(--px-padding-xs-mobile) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown){border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown):hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[disabled],.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown).loading{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-brand-default);border-color:#0000}.btn.secondary{color:var(--px-color-text-brand-default);background:var(--px-color-background-container-secondary-default);min-height:var(--px-spacing-l-mobile);padding:var(--px-padding-xs-mobile) var(--px-padding-m-mobile);border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn.secondary:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default)}.btn.secondary[disabled],.btn.secondary[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}.btn.secondary.loading{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-brand-default);border-color:#0000}.btn:not(.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[shape=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[shape=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[shape=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[shape=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn.tertiary{color:var(--px-color-text-brand-default);border-radius:var(--px-radius-pill);border:var(--px-size-border-m) solid transparent;padding:var(--px-padding-2xs-mobile) 0;gap:var(--px-spacing-xs-mobile);text-align:left;background:0 0}.btn.tertiary ::slotted(px-icon){width:var(--px-size-m);height:var(--px-size-m);border-radius:var(--px-radius-pill);background:var(--px-color-background-container-secondary-default);transition:var(--btn-transition);justify-content:center;align-items:center;display:flex}:is(.btn.tertiary:hover,.btn.tertiary:active):not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-mobile) var(--px-padding-s-mobile)}:is(.btn.tertiary:hover,.btn.tertiary:active):not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon){background:0 0;margin:0 -8px}:is(.btn.tertiary:hover,.btn.tertiary:active):not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon)[slot=after]{padding:0 0 0 var(--px-padding-2xs-mobile)}:is(.btn.tertiary:hover,.btn.tertiary:active):not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon)[slot=before]{padding:0 var(--px-padding-2xs-mobile) 0 0}.btn.tertiary[disabled],.btn.tertiary[aria-disabled=true]{color:var(--px-color-text-state-disabled-default)}:is(.btn.tertiary[disabled],.btn.tertiary[aria-disabled=true]) ::slotted(px-icon){background:var(--px-color-background-state-disabled-default)}.btn.tertiary.loading{color:var(--px-color-text-brand-default);border-color:#0000}.btn.tertiary.loading ::slotted(px-spinner){width:var(--px-size-m);height:var(--px-size-m);border-radius:var(--px-radius-pill);background:var(--px-color-background-state-disabled-default);justify-content:center;align-items:center;display:flex}.btn.patch{display:inline-flex}.btn.patch:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default)}.btn.patch[disabled],.btn.patch[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}.btn.actionable-tag{background:var(--px-color-background-container-primary-default);color:var(--px-color-text-neutral-inverted)}.btn.actionable-tag-secondary{background:var(--px-color-background-container-secondary-default);color:var(--px-color-text-brand-default)}.btn.actionable-tag,.btn.actionable-tag-secondary{padding:var(--px-padding-2xs-mobile) var(--px-padding-xs-mobile);gap:var(--px-spacing-2xs-mobile);border-radius:var(--px-radius-pill);border:solid var(--px-size-border-m) transparent;font-weight:var(--px-font-weight-body)}:host([size=s]) :is(.btn.actionable-tag,.btn.actionable-tag-secondary){padding:var(--px-padding-2xs-mobile) var(--px-padding-xs-mobile);gap:var(--px-spacing-2xs-mobile)}:host([size=m]) :is(.btn.actionable-tag,.btn.actionable-tag-secondary){padding:var(--px-padding-xs-mobile) var(--px-padding-s-mobile);gap:var(--px-spacing-xs-mobile)}:is(.btn.actionable-tag,.btn.actionable-tag-secondary):hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default);border-color:var(--px-color-border-state-hover-default)}:is(.btn.actionable-tag,.btn.actionable-tag-secondary):active:not([disabled],[aria-disabled=true],.loading){background:var(--px-color-background-state-active-default);color:var(--px-color-text-state-active-inverted)}:is(.btn.actionable-tag,.btn.actionable-tag-secondary)[disabled],:is(.btn.actionable-tag,.btn.actionable-tag-secondary)[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}.btn.header-dropdown,.btn.header-minimal-dropdown{touch-action:manipulation;align-items:center;display:flex}:is(.btn.header-dropdown,.btn.header-minimal-dropdown):after{content:\"\";width:var(--px-size-icon-xs);height:var(--px-size-icon-xs);color:var(--px-color-icon-brand-default);--btn-transition:all .2s ease-in-out 0s;transition:var(--btn-transition);background-color:currentColor;display:inline-block;-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.38 5.90237C12.125 5.65131 11.7115 5.65131 11.4564 5.90237L7.99986 9.30494L4.54328 5.90237C4.28824 5.65131 3.87474 5.65131 3.61971 5.90237C3.36467 6.15342 3.36467 6.56045 3.61971 6.8115L7.53808 10.6686C7.79311 10.9197 8.20661 10.9197 8.46164 10.6686L12.38 6.8115C12.635 6.56045 12.635 6.15342 12.38 5.90237Z' fill='%235C2D91'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.38 5.90237C12.125 5.65131 11.7115 5.65131 11.4564 5.90237L7.99986 9.30494L4.54328 5.90237C4.28824 5.65131 3.87474 5.65131 3.61971 5.90237C3.36467 6.15342 3.36467 6.56045 3.61971 6.8115L7.53808 10.6686C7.79311 10.9197 8.20661 10.9197 8.46164 10.6686L12.38 6.8115C12.635 6.56045 12.635 6.15342 12.38 5.90237Z' fill='%235C2D91'/%3E%3C/svg%3E\");-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:cover;mask-size:cover;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}:is(.btn.header-dropdown,.btn.header-minimal-dropdown)[aria-expanded=true]:after{transform:rotate(180deg)}.btn.header-dropdown{justify-content:space-between;gap:var(--px-spacing-s-mobile);width:100%;color:var(--px-color-text-neutral-default);font-weight:var(--px-font-weight-body);font-size:var(--px-text-size-label-l-mobile);border:var(--px-size-border-m) solid var(--px-color-border-neutral-default);padding:var(--px-padding-xs-mobile) var(--px-padding-s-mobile);border-radius:var(--px-radius-main);background-color:var(--px-color-background-container-default-default)}.btn.header-minimal-dropdown{justify-content:flex-start;gap:var(--px-spacing-xs-mobile);color:var(--px-color-text-brand-default);font-weight:var(--px-font-weight-title);font-size:var(--px-text-size-label-m-mobile);background:0 0;border:none;border-radius:0;padding:0}button.link{cursor:pointer;background:0 0;border:none;padding:0;text-decoration:underline}button.link[disabled],button.link[aria-disabled=true]{cursor:default;pointer-events:none;color:var(--px-color-text-state-disabled-default)}button.wrapper{all:unset;cursor:pointer}button.wrapper:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}button.wrapper[disabled],button.wrapper[aria-disabled=true]{cursor:default;pointer-events:none}:host([inverted]) .btn:hover:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) .btn:focus-visible:not([disabled],[aria-disabled=true]){outline-color:var(--px-color-border-focus-outline-inverted)}:host([inverted]) .btn:active:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-state-active-inverted);color:var(--px-color-text-brand-inverted);background:var(--px-color-background-state-hover-bordered-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown){color:var(--px-color-text-brand-default);background:var(--px-color-background-container-primary-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown):hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-state-hover-bordered-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[disabled],:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown).loading{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-brand-inverted);border-color:#0000}:host([inverted]) .btn.secondary{color:var(--px-color-text-brand-inverted);background:var(--px-color-background-container-secondary-inverted)}:host([inverted]) .btn.secondary:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-container-default-inverted)}:host([inverted]) .btn.secondary[disabled],:host([inverted]) .btn.secondary[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .btn.secondary.loading{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-brand-inverted);border-color:#0000}:host([inverted]) .btn.tertiary{color:var(--px-color-text-brand-inverted)}:host([inverted]) .btn.tertiary ::slotted(px-icon){background:var(--px-color-background-container-secondary-inverted)}:is(:host([inverted]) .btn.tertiary:hover,:host([inverted]) .btn.tertiary:active):not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon){background:0 0}:host([inverted]) .btn.tertiary[disabled],:host([inverted]) .btn.tertiary[aria-disabled=true]{color:var(--px-color-text-state-disabled-inverted)}:is(:host([inverted]) .btn.tertiary[disabled],:host([inverted]) .btn.tertiary[aria-disabled=true]) ::slotted(px-icon){background:var(--px-color-background-state-disabled-inverted)}:host([inverted]) .btn.tertiary.loading{color:var(--px-color-text-brand-inverted)}:host([inverted]) .btn.tertiary.loading ::slotted(px-spinner){background:var(--px-color-background-state-disabled-inverted)}:host([inverted]) .btn.patch:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-state-hover-bordered-inverted)}:host([inverted]) .btn.patch[disabled],:host([inverted]) .btn.patch[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .btn.actionable-tag{background:var(--px-color-background-container-primary-inverted);color:var(--px-color-text-brand-default)}:host([inverted]) .btn.actionable-tag-secondary{background:var(--px-color-background-container-secondary-inverted);color:var(--px-color-text-neutral-inverted)}:is(:host([inverted]) .btn.actionable-tag,:host([inverted]) .btn.actionable-tag-secondary):hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-state-hover-bordered-inverted);border-color:var(--px-color-border-state-hover-inverted)}:is(:host([inverted]) .btn.actionable-tag,:host([inverted]) .btn.actionable-tag-secondary):active:not([disabled],[aria-disabled=true],.loading){background:var(--px-color-background-state-active-inverted);color:var(--px-color-text-state-active-default)}:is(:host([inverted]) .btn.actionable-tag,:host([inverted]) .btn.actionable-tag-secondary)[disabled],:is(:host([inverted]) .btn.actionable-tag,:host([inverted]) .btn.actionable-tag-secondary)[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) button.link[disabled],:host([inverted]) button.link[aria-disabled=true]{color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) button.wrapper:focus-visible{outline-color:var(--px-color-border-focus-outline-inverted)}:host([inverted]) .btn.header-minimal-dropdown{color:var(--px-color-text-brand-inverted)}:host([inverted]) .btn.header-minimal-dropdown:after{color:var(--px-color-icon-brand-inverted)}@media screen and (width<=47.938rem){.btn:not(.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[shape--mobile=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[shape--mobile=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[shape--mobile=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[shape--mobile=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}}@media screen and (width>=48rem) and (width<=64rem){.btn:not(.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[shape--tablet=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[shape--tablet=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[shape--tablet=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[shape--tablet=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}}@media screen and (width>=48rem){button.wrapper:focus-visible{outline-offset:var(--px-focus-offset-tablet);outline:var(--px-focus-outline-tablet) solid var(--px-color-border-focus-outline-default)}.btn{width:var(--button-extended--tablet,var(--button-extended,auto));font-size:var(--px-text-size-label-m-tablet);gap:var(--px-spacing-2xs-tablet)}.btn:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}.btn.actionable-tag,.btn.actionable-tag-secondary{padding:var(--px-padding-2xs-tablet) var(--px-padding-xs-tablet);gap:var(--px-spacing-2xs-tablet)}:host([size=s]) :is(.btn.actionable-tag,.btn.actionable-tag-secondary){padding:var(--px-padding-2xs-tablet) var(--px-padding-xs-tablet);gap:var(--px-spacing-2xs-tablet)}:host([size=m]) :is(.btn.actionable-tag,.btn.actionable-tag-secondary){padding:var(--px-padding-xs-tablet) var(--px-padding-s-tablet);gap:var(--px-spacing-xs-tablet)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown){padding:var(--px-padding-xs-tablet) var(--px-padding-m-tablet)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown) ::slotted([slot=after]){margin-right:calc(var(--px-padding-xs-tablet) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown) ::slotted([slot=before]){margin-left:calc(var(--px-padding-xs-tablet) * -1)}.btn.secondary{padding:var(--px-padding-xs-tablet) var(--px-padding-m-tablet)}.btn.tertiary{padding:var(--px-padding-2xs-tablet) 0;gap:var(--px-spacing-xs-tablet)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-tablet) var(--px-padding-s-tablet)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon)[slot=after]{padding:0 0 0 var(--px-padding-2xs-tablet)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon)[slot=before]{padding:0 var(--px-padding-2xs-tablet) 0 0}.btn.header-dropdown,.btn.header-minimal-dropdown{gap:var(--px-spacing-xs-tablet);font-size:var(--px-text-size-label-m-tablet)}.btn.header-dropdown{padding:var(--px-padding-xs-tablet) var(--px-padding-s-tablet)}}@media screen and (width>=64.0625rem) and (width<=90rem){.btn:not(.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[shape--laptop=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[shape--laptop=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[shape--laptop=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[shape--laptop=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}}@media screen and (width>=64.0625rem){button.wrapper:focus-visible{outline-offset:var(--px-focus-offset-laptop);outline:var(--px-focus-outline-laptop) solid var(--px-color-border-focus-outline-default)}.btn{width:var(--button-extended--laptop,var(--button-extended,auto));font-size:var(--px-text-size-label-m-laptop);gap:var(--px-spacing-2xs-laptop)}.btn:focus-visble:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-laptop);outline-width:var(--px-focus-outline-laptop)}.btn.actionable-tag,.btn.actionable-tag-secondary{padding:var(--px-padding-2xs-laptop) var(--px-padding-xs-laptop);gap:var(--px-spacing-2xs-laptop)}:host([size=s]) :is(.btn.actionable-tag,.btn.actionable-tag-secondary){padding:var(--px-padding-2xs-laptop) var(--px-padding-xs-laptop);gap:var(--px-spacing-2xs-laptop)}:host([size=m]) :is(.btn.actionable-tag,.btn.actionable-tag-secondary){padding:var(--px-padding-xs-laptop) var(--px-padding-s-laptop);gap:var(--px-spacing-xs-laptop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown){padding:var(--px-padding-xs-laptop) var(--px-padding-m-laptop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown) ::slotted([slot=after]){margin-right:calc(var(--px-padding-xs-laptop) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown) ::slotted([slot=before]){margin-left:calc(var(--px-padding-xs-laptop) * -1)}.btn.secondary{padding:var(--px-padding-xs-laptop) var(--px-padding-m-laptop)}.btn.tertiary{padding:var(--px-padding-2xs-laptop) 0;gap:var(--px-spacing-xs-laptop)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-laptop) var(--px-padding-s-laptop)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon)[slot=after]{padding:0 0 0 var(--px-padding-2xs-laptop)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon)[slot=before]{padding:0 var(--px-padding-2xs-laptop) 0 0}.btn.header-dropdown,.btn.header-minimal-dropdown{gap:var(--px-spacing-xs-laptop);font-size:var(--px-text-size-label-m-laptop)}.btn.header-dropdown{width:inherit;color:var(--px-color-text-brand-default);font-weight:var(--px-font-weight-title);background:0 0;border:none;border-radius:0;justify-content:flex-start;align-items:center;padding:0}}@media screen and (width>=90.0625rem){button.wrapper:focus-visible{outline-offset:var(--px-focus-offset-desktop);outline:var(--px-focus-outline-desktop) solid var(--px-color-border-focus-outline-default)}.btn{width:var(--button-extended--desktop,var(--button-extended,auto));font-size:var(--px-text-size-label-m-desktop);gap:var(--px-spacing-2xs-desktop)}.btn:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}.btn.actionable-tag,.btn.actionable-tag-secondary{padding:var(--px-padding-2xs-desktop) var(--px-padding-xs-desktop);gap:var(--px-spacing-2xs-desktop)}:host([size=s]) :is(.btn.actionable-tag,.btn.actionable-tag-secondary){padding:var(--px-padding-2xs-desktop) var(--px-padding-xs-desktop);gap:var(--px-spacing-2xs-desktop)}:host([size=m]) :is(.btn.actionable-tag,.btn.actionable-tag-secondary){padding:var(--px-padding-xs-desktop) var(--px-padding-s-desktop);gap:var(--px-spacing-xs-desktop)}.btn:not(.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[shape--desktop=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[shape--desktop=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[shape--desktop=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[shape--desktop=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown){padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown) ::slotted([slot=after]){margin-right:calc(var(--px-padding-xs-desktop) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown) ::slotted([slot=before]){margin-left:calc(var(--px-padding-xs-desktop) * -1)}.btn.secondary{padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn.tertiary{padding:var(--px-padding-2xs-desktop) 0;gap:var(--px-spacing-xs-desktop)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-desktop) var(--px-padding-s-desktop)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon)[slot=after]{padding:0 0 0 var(--px-padding-2xs-desktop)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon)[slot=before]{padding:0 var(--px-padding-2xs-desktop) 0 0}.btn.header-dropdown,.btn.header-minimal-dropdown{gap:var(--px-spacing-xs-desktop);font-size:var(--px-text-size-label-m-desktop)}.btn.header-dropdown{padding:0}}@keyframes anim-spinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}", g = ".color-inherit{color:inherit!important}.color-brand{color:var(--px-color-text-brand-default)!important}.color-neutral{color:var(--px-color-text-neutral-default)!important}.color-dimmed{color:var(--px-color-text-dimmed-default)!important}.color-purpose-success{color:var(--px-color-text-purpose-success-default)!important}.color-purpose-warning{color:var(--px-color-text-purpose-warning-default)!important}.color-purpose-error{color:var(--px-color-text-purpose-error-default)!important}.color-purpose-unlimited{color:var(--px-color-text-purpose-unlimited-default)!important}.color-purpose-promo{color:var(--px-color-text-purpose-promo-default)!important}.color-state-hover{color:var(--px-color-text-state-hover-default)!important}.color-state-active{color:var(--px-color-text-state-active-default)!important}.color-state-disabled{color:var(--px-color-text-state-disabled-default)!important}:host([inverted]) .color-inherit{color:inherit!important}:host([inverted]) .color-brand{color:var(--px-color-text-brand-inverted)!important}:host([inverted]) .color-neutral{color:var(--px-color-text-neutral-inverted)!important}:host([inverted]) .color-dimmed{color:var(--px-color-text-dimmed-inverted)!important}:host([inverted]) .color-purpose-success{color:var(--px-color-text-purpose-success-inverted)!important}:host([inverted]) .color-purpose-warning{color:var(--px-color-text-purpose-warning-inverted)!important}:host([inverted]) .color-purpose-error{color:var(--px-color-text-purpose-error-inverted)!important}:host([inverted]) .color-purpose-unlimited{color:var(--px-color-text-purpose-unlimited-inverted)!important}:host([inverted]) .color-purpose-promo{color:var(--px-color-text-purpose-promo-inverted)!important}:host([inverted]) .color-state-hover{color:var(--px-color-text-state-hover-inverted)!important}:host([inverted]) .color-state-active{color:var(--px-color-text-state-active-inverted)!important}:host([inverted]) .color-state-disabled{color:var(--px-color-text-state-disabled-inverted)!important}.font-size-inherit{font-size:inherit;line-height:inherit}.font-size-body-l{font-size:var(--px-text-size-body-l-mobile)}.font-size-body-m{font-size:var(--px-text-size-body-m-mobile)}.font-size-body-s{font-size:var(--px-text-size-body-s-mobile)}.font-size-body-xs{font-size:var(--px-text-size-body-xs-mobile)}.font-size-heading-5xl{font-size:var(--px-text-size-heading-5xl-mobile)}.font-size-heading-4xl{font-size:var(--px-text-size-heading-4xl-mobile)}.font-size-heading-3xl{font-size:var(--px-text-size-heading-3xl-mobile)}.font-size-heading-2xl{font-size:var(--px-text-size-heading-2xl-mobile)}.font-size-heading-xl{font-size:var(--px-text-size-heading-xl-mobile)}.font-size-heading-l{font-size:var(--px-text-size-heading-l-mobile)}.font-size-heading-m{font-size:var(--px-text-size-heading-m-mobile)}.font-size-heading-s{font-size:var(--px-text-size-heading-s-mobile)}.font-size-heading-3xl,.font-size-heading-4xl,.font-size-heading-5xl{line-height:var(--px-line-height-ratio-s)}.font-size-link-m{font-size:var(--px-text-size-link-m-mobile)}.font-size-link-s{font-size:var(--px-text-size-link-s-mobile)}@media screen and (width>=48rem){.font-size-body-l{font-size:var(--px-text-size-body-l-tablet)}.font-size-body-m{font-size:var(--px-text-size-body-m-tablet)}.font-size-body-s{font-size:var(--px-text-size-body-s-tablet)}.font-size-body-xs{font-size:var(--px-text-size-body-xs-tablet)}.font-size-heading-5xl{font-size:var(--px-text-size-heading-5xl-tablet)}.font-size-heading-4xl{font-size:var(--px-text-size-heading-4xl-tablet)}.font-size-heading-3xl{font-size:var(--px-text-size-heading-3xl-tablet)}.font-size-heading-2xl{font-size:var(--px-text-size-heading-2xl-tablet)}.font-size-heading-xl{font-size:var(--px-text-size-heading-xl-tablet)}.font-size-heading-l{font-size:var(--px-text-size-heading-l-tablet)}.font-size-heading-m{font-size:var(--px-text-size-heading-m-tablet)}.font-size-heading-s{font-size:var(--px-text-size-heading-s-tablet)}.font-size-link-m{font-size:var(--px-text-size-link-m-tablet)}.font-size-link-s{font-size:var(--px-text-size-link-s-tablet)}}@media screen and (width>=64.0625rem){.font-size-body-l{font-size:var(--px-text-size-body-l-laptop)}.font-size-body-m{font-size:var(--px-text-size-body-m-laptop)}.font-size-body-s{font-size:var(--px-text-size-body-s-laptop)}.font-size-body-xs{font-size:var(--px-text-size-body-xs-laptop)}.font-size-heading-5xl{font-size:var(--px-text-size-heading-5xl-laptop)}.font-size-heading-4xl{font-size:var(--px-text-size-heading-4xl-laptop)}.font-size-heading-3xl{font-size:var(--px-text-size-heading-3xl-laptop)}.font-size-heading-2xl{font-size:var(--px-text-size-heading-2xl-laptop)}.font-size-heading-xl{font-size:var(--px-text-size-heading-xl-laptop)}.font-size-heading-l{font-size:var(--px-text-size-heading-l-laptop)}.font-size-heading-m{font-size:var(--px-text-size-heading-m-laptop)}.font-size-heading-s{font-size:var(--px-text-size-heading-s-laptop)}.font-size-link-m{font-size:var(--px-text-size-link-m-laptop)}.font-size-link-s{font-size:var(--px-text-size-link-s-laptop)}}@media screen and (width>=90.0625rem){.font-size-body-l{font-size:var(--px-text-size-body-l-desktop)}.font-size-body-m{font-size:var(--px-text-size-body-m-desktop)}.font-size-body-s{font-size:var(--px-text-size-body-s-desktop)}.font-size-body-xs{font-size:var(--px-text-size-body-xs-desktop)}.font-size-heading-5xl{font-size:var(--px-text-size-heading-5xl-desktop)}.font-size-heading-4xl{font-size:var(--px-text-size-heading-4xl-desktop)}.font-size-heading-3xl{font-size:var(--px-text-size-heading-3xl-desktop)}.font-size-heading-2xl{font-size:var(--px-text-size-heading-2xl-desktop)}.font-size-heading-xl{font-size:var(--px-text-size-heading-xl-desktop)}.font-size-heading-l{font-size:var(--px-text-size-heading-l-desktop)}.font-size-heading-m{font-size:var(--px-text-size-heading-m-desktop)}.font-size-heading-s{font-size:var(--px-text-size-heading-s-desktop)}.font-size-link-m{font-size:var(--px-text-size-link-m-desktop)}.font-size-link-s{font-size:var(--px-text-size-link-s-desktop)}}.font-weight-inherit{font-weight:inherit}.font-weight-body{font-weight:var(--px-font-weight-body)}.font-weight-title{font-weight:var(--px-font-weight-title)}.font-weight-title-large{font-weight:var(--px-font-weight-title-large)}.font-weight-subtitle{font-weight:var(--px-font-weight-subtitle)}", _ = new CSSStyleSheet(), v = new CSSStyleSheet(), y = new CSSStyleSheet();
74
+ _.replaceSync(m), v.replaceSync(h), y.replaceSync(g);
75
+ var b = [
76
+ ...o,
77
+ "link-m",
78
+ "link-s"
79
+ ], x = [
80
+ "link",
81
+ "no-style",
82
+ "skip-link",
83
+ "btn-default",
84
+ "btn-secondary",
85
+ "btn-tertiary",
86
+ "icon-link",
87
+ "wrapper"
88
+ ], ee = [
89
+ "",
90
+ "default",
91
+ "alternative"
92
+ ], S = class t extends e {
93
+ static {
94
+ this.nativeName = "a";
95
+ }
96
+ constructor() {
97
+ super(_, v, y), this.template = () => "<slot name=\"before\"></slot><slot></slot><slot name=\"after\"></slot>";
98
+ let e = document.createElement(t.nativeName);
99
+ e.innerHTML = this.template(), this.shadowRoot.appendChild(e);
100
+ }
101
+ static get observedAttributes() {
102
+ return [
103
+ ...super.observedAttributes,
104
+ "disabled",
105
+ "variant",
106
+ "shape",
107
+ "shape--mobile",
108
+ "shape--tablet",
109
+ "shape--laptop",
110
+ "shape--desktop",
111
+ "extended",
112
+ "extended--mobile",
113
+ "extended--tablet",
114
+ "extended--laptop",
115
+ "extended--desktop",
116
+ "inverted",
117
+ "font-size",
118
+ "color",
119
+ "font-weight",
120
+ "title"
121
+ ];
122
+ }
123
+ connectedCallback() {
124
+ this.$before && this.$before.localName === "px-icon" && this.configureBeforeAfterIcon(this.$before), this.$after && this.$after.localName === "px-icon" && this.configureBeforeAfterIcon(this.$after), u(this, this.$el, !1);
125
+ }
126
+ disconnectedCallback() {}
127
+ attributeChangedCallback(e, t, n) {
128
+ if (t !== n) switch (e) {
129
+ case "disabled":
130
+ this.$el.toggleAttribute("aria-disabled"), n !== null && this.$el.setAttribute("aria-disabled", "true");
131
+ break;
132
+ case "variant":
133
+ this.updateVariant(t, n);
134
+ break;
135
+ case "shape":
136
+ case "shape--mobile":
137
+ case "shape--tablet":
138
+ case "shape--laptop":
139
+ case "shape--desktop":
140
+ this.updateShape(e, n, ee);
141
+ break;
142
+ case "extended":
143
+ case "extended--mobile":
144
+ case "extended--tablet":
145
+ case "extended--laptop":
146
+ case "extended--desktop":
147
+ this.updateExtended(e, n);
148
+ break;
149
+ case "font-size":
150
+ this.updateTypography(e, t, n, b);
151
+ break;
152
+ case "color":
153
+ this.updateTypography(e, t, n, a);
154
+ break;
155
+ case "font-weight":
156
+ this.updateTypography(e, t, n, s);
157
+ break;
158
+ case "title":
159
+ n && (this.$el.setAttribute("title", n), this.removeAttribute("title"));
160
+ break;
161
+ default: super.attributeChangedCallback(e, t, n);
162
+ }
163
+ }
164
+ configureBeforeAfterIcon(e) {
165
+ let t = e.getAttribute("size"), n = e.getAttribute("color");
166
+ e.addEventListener("click", () => {
167
+ this.$el.focus();
168
+ }), t || e.setAttribute("size", "xs"), n || e.setAttribute("color", "inherit");
169
+ }
170
+ _toggleClassList(e) {
171
+ if (e.startsWith("btn-")) {
172
+ let t = e.split("-");
173
+ for (let e of t) this.$el.classList.toggle(e);
174
+ } else this.$el.classList.toggle(e);
175
+ }
176
+ updateVariant(e, t) {
177
+ e !== null && e !== "" && e !== "link" && this._toggleClassList(e), t !== null && t !== "" && t !== "link" && this._toggleClassList(t), this.checkName(x, t) || c(`"${t}" is not a valid variant value for ${this.tagName.toLowerCase()}. Allowed values are: "${x.join("\", \"")}".`);
178
+ }
179
+ updateShape(e, t, n) {
180
+ if (!i(n, t)) {
181
+ c(`"${t}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${n.join("\", \"")}".`);
182
+ return;
183
+ }
184
+ t !== null && t !== "" && this.$el.setAttribute(e, t);
185
+ }
186
+ updateTypography(e, t, n, r) {
187
+ t !== null && t !== "" && t !== "default" && this.$el.classList.toggle(`${e}-${t}`), n !== null && n !== "" && n !== "default" && this.$el.classList.toggle(`${e}-${n}`), this.checkName(r, n) || c(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join("\", \"")}".`);
188
+ }
189
+ updateExtended(e, t) {
190
+ t === null ? this.$el.style.setProperty(`--button-${e}`, "") : this.$el.style.setProperty(`--button-${e}`, "100%");
191
+ }
192
+ get $before() {
193
+ return this.querySelector("[slot=\"before\"]");
194
+ }
195
+ get $after() {
196
+ return this.querySelector("[slot=\"after\"]");
197
+ }
198
+ get $iconNotBeforeAfter() {
199
+ return this.querySelector("px-icon:not([slot=\"before\"], [slot=\"after\"])");
200
+ }
201
+ get disabled() {
202
+ return this.hasAttribute("disabled");
203
+ }
204
+ set disabled(e) {
205
+ this._updateBooleanAttribute("disabled", e);
206
+ }
207
+ get variant() {
208
+ return this.getAttribute("variant");
209
+ }
210
+ set variant(e) {
211
+ this._updateAttribute("variant", e);
212
+ }
213
+ get shape() {
214
+ return this.getAttribute("shape");
215
+ }
216
+ set shape(e) {
217
+ this._updateAttribute("shape", e);
218
+ }
219
+ get shapeMobile() {
220
+ return this.getAttribute("shape--mobile");
221
+ }
222
+ set shapeMobile(e) {
223
+ this._updateAttribute("shape--mobile", e);
224
+ }
225
+ get shapeTablet() {
226
+ return this.getAttribute("shape--tablet");
227
+ }
228
+ set shapeTablet(e) {
229
+ this._updateAttribute("shape--tablet", e);
230
+ }
231
+ get shapeLaptop() {
232
+ return this.getAttribute("shape--laptop");
233
+ }
234
+ set shapeLaptop(e) {
235
+ this._updateAttribute("shape--laptop", e);
236
+ }
237
+ get shapeDesktop() {
238
+ return this.getAttribute("shape--desktop");
239
+ }
240
+ set shapeDesktop(e) {
241
+ this._updateAttribute("shape--desktop", e);
242
+ }
243
+ get extended() {
244
+ return this.hasAttribute("extended");
245
+ }
246
+ set extended(e) {
247
+ this._updateBooleanAttribute("extended", e);
248
+ }
249
+ get extendedMobile() {
250
+ return this.hasAttribute("extended--mobile");
251
+ }
252
+ set extendedMobile(e) {
253
+ this._updateBooleanAttribute("extended--mobile", e);
254
+ }
255
+ get extendedTablet() {
256
+ return this.hasAttribute("extended--tablet");
257
+ }
258
+ set extendedTablet(e) {
259
+ this._updateBooleanAttribute("extended--tablet", e);
260
+ }
261
+ get extendedLaptop() {
262
+ return this.hasAttribute("extended--laptop");
263
+ }
264
+ set extendedLaptop(e) {
265
+ this._updateBooleanAttribute("extended--laptop", e);
266
+ }
267
+ get extendedDesktop() {
268
+ return this.hasAttribute("extended--desktop");
269
+ }
270
+ set extendedDesktop(e) {
271
+ this._updateBooleanAttribute("extended--desktop", e);
272
+ }
273
+ get inverted() {
274
+ return this.hasAttribute("inverted");
275
+ }
276
+ set inverted(e) {
277
+ this._updateBooleanAttribute("inverted", e);
278
+ }
279
+ get fontsize() {
280
+ return this.getAttribute("font-size");
281
+ }
282
+ set fontsize(e) {
283
+ this._updateAttribute("font-size", e);
284
+ }
285
+ get color() {
286
+ return this.getAttribute("color");
287
+ }
288
+ set color(e) {
289
+ this._updateAttribute("color", e);
290
+ }
291
+ get fontweight() {
292
+ return this.getAttribute("font-weight");
293
+ }
294
+ set fontweight(e) {
295
+ this._updateAttribute("font-weight", e);
296
+ }
297
+ get title() {
298
+ return this.getAttribute("title") ?? "";
299
+ }
300
+ set title(e) {
301
+ this._updateAttribute("title", e);
302
+ }
303
+ };
304
+ customElements.get("px-a") || customElements.define("px-a", S);
305
+ //#endregion
306
+ //#region ../../components/Link/src/LinkWrapper.ts
307
+ var C = class extends S {
308
+ #e;
309
+ constructor() {
310
+ super(), this.$el.classList.add("wrapper"), this.#e = new n(this, this.$el, () => this.#t());
311
+ }
312
+ connectedCallback() {
313
+ super.connectedCallback(), this.#e.connect();
314
+ }
315
+ disconnectedCallback() {
316
+ super.disconnectedCallback(), this.#e.disconnect();
317
+ }
318
+ attributeChangedCallback(e, t, n) {
319
+ if (t !== n) switch (e) {
320
+ case "disabled":
321
+ super.attributeChangedCallback(e, t, n), n !== null && this.#e.clearInteractiveState();
322
+ break;
323
+ default: super.attributeChangedCallback(e, t, n);
324
+ }
325
+ }
326
+ #t() {
327
+ return !this.hasAttribute("disabled") && this.$el.getAttribute("aria-disabled") !== "true";
328
+ }
329
+ };
330
+ customElements.get("px-a-wrapper") || customElements.define("px-a-wrapper", C);
331
+ //#endregion
332
+ //#region src/Link.ts
333
+ var te = class extends HTMLElement {
334
+ constructor() {
335
+ super(), this.template = "<px-a font-weight=\"title\" font-size=\"body-m\" color=\"brand\" variant=\"no-style\">\n <slot></slot>\n </px-a>", this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template;
336
+ let e = this.shadowRoot.querySelector("px-a");
337
+ e && Array.from(this.attributes).forEach((t) => {
338
+ e.setAttribute(t.name, t.value);
339
+ });
340
+ }
341
+ };
342
+ customElements.get("px-mdd-a") || customElements.define("px-mdd-a", te);
343
+ //#endregion
344
+ //#region src/header.css?inline
345
+ var ne = "#navigation-container{border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default)}#dropdown-zone--desktop{display:none}#primary-navigation{margin:0;padding:0;display:none}#primary-navigation div,#primary-navigation px-hstack{height:100%}#panel-container{z-index:999;position:absolute;top:0;left:0;right:0}#backdrop-filter{z-index:998;-webkit-backdrop-filter:saturate(180%)blur(15px);backdrop-filter:saturate(180%)blur(15px);background:#0000004d;width:100vw;height:100%;display:none;position:absolute;left:0}::slotted([slot=header-logo]){--px-size-icon-l:1.9rem;--px-size-icon-xl:1.9rem}@media screen and (width>=64.0625rem){#primary-navigation{display:block}#panel-container{top:auto}#dropdown-zone--desktop{justify-content:space-between;align-items:center;display:flex}#dropdown-zone--desktop ::slotted([slot=target-group]),#dropdown-zone--desktop ::slotted([slot=user-language]){margin-bottom:var(--px-spacing-s-laptop)}::slotted([slot=header-actions]){margin-bottom:var(--px-padding-s-laptop)}::slotted([slot=header-logo]){--px-size-icon-l:3.2rem;--px-size-icon-xl:3.2rem;margin-left:-.1rem}}@media screen and (width>=90.0625rem){#dropdown-zone--desktop ::slotted([slot=target-group]),#dropdown-zone--desktop ::slotted([slot=user-language]){margin-bottom:var(--px-spacing-s-desktop)}::slotted([slot=header-actions]){margin-bottom:var(--px-padding-s-desktop)}}";
346
+ //#endregion
347
+ //#region ../../../node_modules/lodash-es/isObject.js
348
+ function w(e) {
349
+ var t = typeof e;
350
+ return e != null && (t == "object" || t == "function");
325
351
  }
326
- var Ot = typeof global == "object" && global && global.Object === Object && global, It = typeof self == "object" && self && self.Object === Object && self, nt = Ot || It || Function("return this")(), F = function() {
327
- return nt.Date.now();
328
- }, Pt = /\s/;
329
- function Bt(o) {
330
- for (var t = o.length; t-- && Pt.test(o.charAt(t)); )
331
- ;
332
- return t;
352
+ //#endregion
353
+ //#region ../../../node_modules/lodash-es/_freeGlobal.js
354
+ var re = typeof global == "object" && global && global.Object === Object && global, T = typeof self == "object" && self && self.Object === Object && self, E = re || T || Function("return this")(), D = function() {
355
+ return E.Date.now();
356
+ }, ie = /\s/;
357
+ function ae(e) {
358
+ for (var t = e.length; t-- && ie.test(e.charAt(t)););
359
+ return t;
333
360
  }
334
- var Ht = /^\s+/;
335
- function _t(o) {
336
- return o && o.slice(0, Bt(o) + 1).replace(Ht, "");
361
+ //#endregion
362
+ //#region ../../../node_modules/lodash-es/_baseTrim.js
363
+ var oe = /^\s+/;
364
+ function se(e) {
365
+ return e && e.slice(0, ae(e) + 1).replace(oe, "");
337
366
  }
338
- var q = nt.Symbol, st = Object.prototype, Ft = st.hasOwnProperty, Wt = st.toString, S = q ? q.toStringTag : void 0;
339
- function Dt(o) {
340
- var t = Ft.call(o, S), e = o[S];
341
- try {
342
- o[S] = void 0;
343
- var r = !0;
344
- } catch {
345
- }
346
- var n = Wt.call(o);
347
- return r && (t ? o[S] = e : delete o[S]), n;
367
+ //#endregion
368
+ //#region ../../../node_modules/lodash-es/_Symbol.js
369
+ var O = E.Symbol, k = Object.prototype, ce = k.hasOwnProperty, le = k.toString, A = O ? O.toStringTag : void 0;
370
+ function j(e) {
371
+ var t = ce.call(e, A), n = e[A];
372
+ try {
373
+ e[A] = void 0;
374
+ var r = !0;
375
+ } catch {}
376
+ var i = le.call(e);
377
+ return r && (t ? e[A] = n : delete e[A]), i;
348
378
  }
349
- var Ut = Object.prototype, Yt = Ut.toString;
350
- function Zt(o) {
351
- return Yt.call(o);
379
+ //#endregion
380
+ //#region ../../../node_modules/lodash-es/_objectToString.js
381
+ var M = Object.prototype.toString;
382
+ function N(e) {
383
+ return M.call(e);
352
384
  }
353
- var Xt = "[object Null]", Jt = "[object Undefined]", G = q ? q.toStringTag : void 0;
354
- function Kt(o) {
355
- return o == null ? o === void 0 ? Jt : Xt : G && G in Object(o) ? Dt(o) : Zt(o);
385
+ //#endregion
386
+ //#region ../../../node_modules/lodash-es/_baseGetTag.js
387
+ var P = "[object Null]", F = "[object Undefined]", I = O ? O.toStringTag : void 0;
388
+ function L(e) {
389
+ return e == null ? e === void 0 ? F : P : I && I in Object(e) ? j(e) : N(e);
356
390
  }
357
- function Qt(o) {
358
- return o != null && typeof o == "object";
391
+ //#endregion
392
+ //#region ../../../node_modules/lodash-es/isObjectLike.js
393
+ function R(e) {
394
+ return typeof e == "object" && !!e;
359
395
  }
360
- var Gt = "[object Symbol]";
361
- function Vt(o) {
362
- return typeof o == "symbol" || Qt(o) && Kt(o) == Gt;
396
+ //#endregion
397
+ //#region ../../../node_modules/lodash-es/isSymbol.js
398
+ var z = "[object Symbol]";
399
+ function B(e) {
400
+ return typeof e == "symbol" || R(e) && L(e) == z;
363
401
  }
364
- var V = NaN, te = /^[-+]0x[0-9a-f]+$/i, ee = /^0b[01]+$/i, oe = /^0o[0-7]+$/i, re = parseInt;
365
- function tt(o) {
366
- if (typeof o == "number")
367
- return o;
368
- if (Vt(o))
369
- return V;
370
- if (N(o)) {
371
- var t = typeof o.valueOf == "function" ? o.valueOf() : o;
372
- o = N(t) ? t + "" : t;
373
- }
374
- if (typeof o != "string")
375
- return o === 0 ? o : +o;
376
- o = _t(o);
377
- var e = ee.test(o);
378
- return e || oe.test(o) ? re(o.slice(2), e ? 2 : 8) : te.test(o) ? V : +o;
402
+ //#endregion
403
+ //#region ../../../node_modules/lodash-es/toNumber.js
404
+ var V = NaN, H = /^[-+]0x[0-9a-f]+$/i, U = /^0b[01]+$/i, W = /^0o[0-7]+$/i, ue = parseInt;
405
+ function G(e) {
406
+ if (typeof e == "number") return e;
407
+ if (B(e)) return V;
408
+ if (w(e)) {
409
+ var t = typeof e.valueOf == "function" ? e.valueOf() : e;
410
+ e = w(t) ? t + "" : t;
411
+ }
412
+ if (typeof e != "string") return e === 0 ? e : +e;
413
+ e = se(e);
414
+ var n = U.test(e);
415
+ return n || W.test(e) ? ue(e.slice(2), n ? 2 : 8) : H.test(e) ? V : +e;
379
416
  }
380
- var ae = "Expected a function", ie = Math.max, ne = Math.min;
381
- function se(o, t, e) {
382
- var r, n, s, i, l, c, g = 0, w = !1, u = !1, P = !0;
383
- if (typeof o != "function")
384
- throw new TypeError(ae);
385
- t = tt(t) || 0, N(e) && (w = !!e.leading, u = "maxWait" in e, s = u ? ie(tt(e.maxWait) || 0, t) : s, P = "trailing" in e ? !!e.trailing : P);
386
- function B(p) {
387
- var x = r, $ = n;
388
- return r = n = void 0, g = p, i = o.apply($, x), i;
389
- }
390
- function gt(p) {
391
- return g = p, l = setTimeout(T, t), w ? B(p) : i;
392
- }
393
- function vt(p) {
394
- var x = p - c, $ = p - g, K = t - x;
395
- return u ? ne(K, s - $) : K;
396
- }
397
- function X(p) {
398
- var x = p - c, $ = p - g;
399
- return c === void 0 || x >= t || x < 0 || u && $ >= s;
400
- }
401
- function T() {
402
- var p = F();
403
- if (X(p))
404
- return J(p);
405
- l = setTimeout(T, vt(p));
406
- }
407
- function J(p) {
408
- return l = void 0, P && r ? B(p) : (r = n = void 0, i);
409
- }
410
- function ft() {
411
- l !== void 0 && clearTimeout(l), g = 0, r = c = n = l = void 0;
412
- }
413
- function mt() {
414
- return l === void 0 ? i : J(F());
415
- }
416
- function H() {
417
- var p = F(), x = X(p);
418
- if (r = arguments, n = this, c = p, x) {
419
- if (l === void 0)
420
- return gt(c);
421
- if (u)
422
- return clearTimeout(l), l = setTimeout(T, t), B(c);
423
- }
424
- return l === void 0 && (l = setTimeout(T, t)), i;
425
- }
426
- return H.cancel = ft, H.flush = mt, H;
417
+ //#endregion
418
+ //#region ../../../node_modules/lodash-es/debounce.js
419
+ var de = "Expected a function", fe = Math.max, pe = Math.min;
420
+ function me(e, t, n) {
421
+ var r, i, a, o, s, c, l = 0, u = !1, d = !1, f = !0;
422
+ if (typeof e != "function") throw TypeError(de);
423
+ t = G(t) || 0, w(n) && (u = !!n.leading, d = "maxWait" in n, a = d ? fe(G(n.maxWait) || 0, t) : a, f = "trailing" in n ? !!n.trailing : f);
424
+ function p(t) {
425
+ var n = r, a = i;
426
+ return r = i = void 0, l = t, o = e.apply(a, n), o;
427
+ }
428
+ function m(e) {
429
+ return l = e, s = setTimeout(_, t), u ? p(e) : o;
430
+ }
431
+ function h(e) {
432
+ var n = e - c, r = e - l, i = t - n;
433
+ return d ? pe(i, a - r) : i;
434
+ }
435
+ function g(e) {
436
+ var n = e - c, r = e - l;
437
+ return c === void 0 || n >= t || n < 0 || d && r >= a;
438
+ }
439
+ function _() {
440
+ var e = D();
441
+ if (g(e)) return v(e);
442
+ s = setTimeout(_, h(e));
443
+ }
444
+ function v(e) {
445
+ return s = void 0, f && r ? p(e) : (r = i = void 0, o);
446
+ }
447
+ function y() {
448
+ s !== void 0 && clearTimeout(s), l = 0, r = c = i = s = void 0;
449
+ }
450
+ function b() {
451
+ return s === void 0 ? o : v(D());
452
+ }
453
+ function x() {
454
+ var e = D(), n = g(e);
455
+ if (r = arguments, i = this, c = e, n) {
456
+ if (s === void 0) return m(c);
457
+ if (d) return clearTimeout(s), s = setTimeout(_, t), p(c);
458
+ }
459
+ return s === void 0 && (s = setTimeout(_, t)), o;
460
+ }
461
+ return x.cancel = y, x.flush = b, x;
427
462
  }
428
- var de = "Expected a function";
429
- function le(o, t, e) {
430
- var r = !0, n = !0;
431
- if (typeof o != "function")
432
- throw new TypeError(de);
433
- return N(e) && (r = "leading" in e ? !!e.leading : r, n = "trailing" in e ? !!e.trailing : n), se(o, t, {
434
- leading: r,
435
- maxWait: t,
436
- trailing: n
437
- });
463
+ //#endregion
464
+ //#region ../../../node_modules/lodash-es/throttle.js
465
+ var he = "Expected a function";
466
+ function ge(e, t, n) {
467
+ var r = !0, i = !0;
468
+ if (typeof e != "function") throw TypeError(he);
469
+ return w(n) && (r = "leading" in n ? !!n.leading : r, i = "trailing" in n ? !!n.trailing : i), me(e, t, {
470
+ leading: r,
471
+ maxWait: t,
472
+ trailing: i
473
+ });
438
474
  }
439
- const dt = new CSSStyleSheet();
440
- dt.replaceSync(jt);
441
- const pe = "Menu";
442
- var L, a, lt, D, U, pt, Y, v, C, E, f;
443
- class ce extends Z {
444
- constructor() {
445
- var e;
446
- super(dt);
447
- h(this, a);
448
- h(this, L);
449
- this.template = `
475
+ //#endregion
476
+ //#region src/Header.ts
477
+ var K = new CSSStyleSheet();
478
+ K.replaceSync(ne);
479
+ var _e = "Menu", q = class extends t {
480
+ constructor() {
481
+ super(K), this.template = `
450
482
  <div>
451
483
  <header>
452
484
  <slot name="skip"></slot>
453
- <px-section id="navigation-container" padding-block--mobile="s" padding-block="none"
454
- background-color="none">
455
- <px-hstack id="dropdown-zone--desktop" align-items="center">
485
+ <px-section
486
+ id="navigation-container"
487
+ padding-bottom="none" padding-bottom--mobile="s" padding-bottom--tablet="s"
488
+ padding-top="s"
489
+ background-color="none"
490
+ >
491
+ <div id="dropdown-zone--desktop">
456
492
  <slot name="target-group"></slot>
457
493
  <px-spacer></px-spacer>
458
494
  <slot name="user-language"></slot>
459
- </px-hstack>
460
- <px-hstack gap="default" wrap="wrap" align-items="center">
495
+ </div>
496
+ <px-hstack gap="default" wrap="wrap" id="navigation-wrapper">
497
+ <px-hstack align-items="center">
498
+ <slot name="header-logo"></slot>
499
+ </px-hstack>
461
500
  <slot name="header-logo"></slot>
462
501
  <nav id="primary-navigation" aria-label="${this.primaryNavigationAriaLabel}">
463
502
  <div role="list">
@@ -467,12 +506,13 @@ class ce extends Z {
467
506
  </div>
468
507
  </nav>
469
508
  <px-spacer></px-spacer>
470
- <px-hstack gap--mobile="none" gap="default">
509
+ <px-hstack align-items="center" gap="xs">
471
510
  <slot name="header-actions"></slot>
472
- <px-button-icon variant="naked" aria-label="${this.burgerMenuAriaLabel ?? "Open menu"}"
473
- aria-expanded="false" aria-controls="__lavender_mobile_menu" hidden--tablet hidden--laptop
474
- hidden--desktop>
475
- <px-icon name="burger_menu" from="lavender"></px-icon>
511
+ <px-button-icon
512
+ id="burger-menu" variant="naked" aria-label="${this.burgerMenuAriaLabel ?? "Open menu"}"
513
+ aria-expanded="false" hidden--laptop hidden--desktop
514
+ >
515
+ <px-icon name="burger_menu" from="lavender" size="m"></px-icon>
476
516
  </px-button-icon>
477
517
  </px-hstack>
478
518
  </px-hstack>
@@ -485,203 +525,177 @@ class ce extends Z {
485
525
  <div id="backdrop-filter"></div>
486
526
  <slot name="main"></slot>
487
527
  </div>
488
- `, A(this, L, () => {
489
- window.innerWidth >= 768 && (b(this, a, pt).call(this), b(this, a, lt).call(this));
490
- }), this.shadowRoot.innerHTML = this.template, this.internals = (e = this.attachInternals) == null ? void 0 : e.call(this), this.role = "navigation", this.internals && (this.internals.role = "navigation");
491
- }
492
- connectedCallback() {
493
- this.addEventListener("click", (e) => {
494
- const r = e.target.closest(
495
- "px-header-item"
496
- );
497
- r && r.for && (e.target.checked === !1 ? (this.$backdropFilter.style.display = "block", d(this, a, C).forEach((n) => {
498
- n.checked = !1;
499
- }), r.checked = !0, b(this, a, D).call(this, e.target.for)) : b(this, a, Y).call(this));
500
- }), this.addEventListener("section-item-click", (e) => {
501
- this.$backdropFilter.style.display = "block", d(this, a, C).forEach((r) => {
502
- r.checked = !1;
503
- }), this.querySelector(
504
- `px-header-item[for="${e.detail.for}"]`
505
- ).checked = !0, b(this, a, D).call(this, e.detail.for);
506
- }), this.addEventListener("back-to-mobile-menu", () => {
507
- this.$backdropFilter.style.display = "block", d(this, a, C).forEach((e) => {
508
- e.checked = !1;
509
- }), b(this, a, U).call(this);
510
- }), this.shadowRoot.addEventListener("click", (e) => {
511
- e.target.closest("px-button-icon") && (this.$burgerMenu.setAttribute("aria-expanded", "true"), b(this, a, U).call(this));
512
- }), this.addEventListener("close-panel", () => {
513
- b(this, a, Y).call(this), this.$burgerMenu.setAttribute("aria-expanded", "false");
514
- }), this.addEventListener(
515
- "close-panel-from-dialog",
516
- (e) => {
517
- this.dispatchEvent(new CustomEvent("close-panel")), e.detail.clientY < d(this, a, E).getBoundingClientRect().bottom && requestAnimationFrame(() => {
518
- var r;
519
- (r = document.elementFromPoint(
520
- e.detail.clientX,
521
- e.detail.clientY
522
- )) == null || r.click();
523
- });
524
- }
525
- ), !this.$targetGroupDropdown && !this.$userLanguageDropdown && (this.$dropDownZoneDesktop.style.display = "none"), this.primaryNavigationAriaLabel || this.setAttribute("primary-navigation-aria-label", pe), window.addEventListener("resize", le(d(this, L), 200));
526
- }
527
- static get observedAttributes() {
528
- return [
529
- "burger-menu-aria-label",
530
- "close-button-aria-label",
531
- "primary-navigation-aria-label",
532
- "back-to-menu-label"
533
- ];
534
- }
535
- attributeChangedCallback(e, r, n) {
536
- if (r !== n)
537
- switch (e) {
538
- case "close-button-aria-label":
539
- d(this, a, f).forEach((s) => {
540
- s.setAttribute("close-button-aria-label", n);
541
- });
542
- break;
543
- case "burger-menu-aria-label":
544
- this.$burgerMenu.setAttribute("aria-label", n);
545
- break;
546
- case "primary-navigation-aria-label":
547
- this.$primaryNavigation.setAttribute("aria-label", n);
548
- break;
549
- case "back-to-menu-label":
550
- d(this, a, f).forEach((s) => {
551
- s.setAttribute("back-to-menu-label", n);
552
- });
553
- break;
554
- }
555
- }
556
- get $backdropFilter() {
557
- return this.shadowRoot.querySelector("#backdrop-filter");
558
- }
559
- get $burgerMenu() {
560
- return this.shadowRoot.querySelector("px-button-icon");
561
- }
562
- get $slotMain() {
563
- return this.querySelector('[slot="main"]');
564
- }
565
- get $targetGroupDropdown() {
566
- return this.querySelector('px-dropdown[slot="target-group"]');
567
- }
568
- get $userLanguageDropdown() {
569
- return this.querySelector('px-dropdown[slot="user-language"]');
570
- }
571
- get $dropDownZoneDesktop() {
572
- return this.shadowRoot.querySelector("#dropdown-zone--desktop");
573
- }
574
- get $primaryNavigation() {
575
- return this.shadowRoot.querySelector("#primary-navigation");
576
- }
577
- get closeButtonAriaLabel() {
578
- return this.getAttribute("close-button-aria-label");
579
- }
580
- set closeButtonAriaLabel(e) {
581
- e ? this.setAttribute("close-button-aria-label", e) : this.removeAttribute("close-button-aria-label");
582
- }
583
- get burgerMenuAriaLabel() {
584
- return this.getAttribute("burger-menu-aria-label");
585
- }
586
- set burgerMenuAriaLabel(e) {
587
- e ? this.setAttribute("burger-menu-aria-label", e) : this.removeAttribute("burger-menu-aria-label");
588
- }
589
- get backToMenuLabel() {
590
- return this.getAttribute("back-to-menu-label");
591
- }
592
- set backToMenuLabel(e) {
593
- e ? this.setAttribute("back-to-menu-label", e) : this.removeAttribute("back-to-menu-label");
594
- }
595
- get primaryNavigationAriaLabel() {
596
- return this.getAttribute("primary-navigation-aria-label");
597
- }
598
- set primaryNavigationAriaLabel(e) {
599
- e ? this.setAttribute("primary-navigation-aria-label", e) : this.removeAttribute("primary-navigation-aria-label");
600
- }
601
- }
602
- L = new WeakMap(), a = new WeakSet(), lt = function() {
603
- const e = this.querySelectorAll("px-mdd"), r = d(this, a, E).getBoundingClientRect().bottom;
604
- e.forEach((n) => {
605
- n.dialogOffsetTop = `${r}px`;
606
- });
607
- }, D = function(e) {
608
- d(this, a, v).$megaDropDown.hidden = !0, d(this, a, f).forEach((r) => {
609
- r.name === e && r.hidden && (r.dialogOffsetTop = `${d(this, a, E).getBoundingClientRect().bottom}px`, r.hidden = !r.hidden, this.querySelector(`px-header-item[for="${e}"]`).checked = !r.hidden, document.body.style.overflow = r.hidden ? "auto" : "hidden"), r.name !== e && !r.hidden && (r.hidden = !0);
610
- });
611
- }, U = function() {
612
- this.$backdropFilter.style.display = "none", d(this, a, f).forEach((e) => {
613
- e.hidden || (e.hidden = !0);
614
- }), d(this, a, v).$megaDropDown.dialogOffsetTop = `${d(this, a, E).getBoundingClientRect().bottom}px`, d(this, a, v).$megaDropDown.hidden = !1, document.body.style.overflow = "hidden";
615
- }, pt = function() {
616
- d(this, a, v) && (d(this, a, v).$megaDropDown.hidden = !0, this.$burgerMenu.setAttribute("aria-expanded", "false"), document.body.style.overflow = "auto", this.$backdropFilter.style.display = "none");
617
- }, Y = function() {
618
- this.$backdropFilter.style.display = "none", d(this, a, v).$megaDropDown.hidden = !0, d(this, a, C).forEach((e) => {
619
- e.checked = !1;
620
- }), d(this, a, f).forEach((e) => {
621
- e.hidden = !0;
622
- }), document.body.style.overflow = "auto";
623
- }, v = function() {
624
- return this.querySelector("px-header-mobile-menu");
625
- }, C = function() {
626
- return this.querySelectorAll("px-header-item");
627
- }, E = function() {
628
- return this.shadowRoot.querySelector("header");
629
- }, f = function() {
630
- return this.querySelectorAll("px-mdd");
528
+ `, this.#e = () => {
529
+ window.innerWidth >= 1024 && (this.#i(), this.#t());
530
+ }, this.shadowRoot.innerHTML = this.template, this.internals = this.attachInternals?.(), this.internals && (this.internals.role = "navigation");
531
+ }
532
+ connectedCallback() {
533
+ this.role = "navigation", this.addEventListener("click", (e) => {
534
+ if (e.target instanceof HTMLElement) {
535
+ let t = e.target.closest("px-header-item");
536
+ t && (!t.checked && t.for ? (this.$backdropFilter.style.display = "block", this.#s.forEach((e) => {
537
+ e.checked = !1;
538
+ }), t.checked = !0, this.#n(t.for)) : this.#a());
539
+ }
540
+ }), this.addEventListener("section-item-click", (e) => {
541
+ this.$backdropFilter.style.display = "block", this.#s.forEach((e) => {
542
+ e.checked = !1;
543
+ }), this.querySelector(`px-header-item[for="${e.detail.for}"]`).checked = !0, this.#n(e.detail.for);
544
+ }), this.addEventListener("back-to-mobile-menu", () => {
545
+ this.$backdropFilter.style.display = "block", this.#s.forEach((e) => {
546
+ e.checked = !1;
547
+ }), this.#r();
548
+ }), this.$burgerMenu.addEventListener("click", () => {
549
+ this.$burgerMenu.setAttribute("aria-expanded", "true"), this.#r();
550
+ }), this.addEventListener("close-panel", () => {
551
+ this.#a(), this.$burgerMenu.setAttribute("aria-expanded", "false");
552
+ }), this.addEventListener("close-panel-from-dialog", (e) => {
553
+ this.dispatchEvent(new CustomEvent("close-panel")), e.detail.clientY < this.#c.getBoundingClientRect().bottom && requestAnimationFrame(() => {
554
+ document.elementFromPoint(e.detail.clientX, e.detail.clientY)?.click();
555
+ });
556
+ }), !this.$targetGroupDropdown && !this.$userLanguageDropdown && (this.$dropDownZoneDesktop.style.display = "none"), this.primaryNavigationAriaLabel || this.setAttribute("primary-navigation-aria-label", _e), window.addEventListener("resize", ge(this.#e, 200));
557
+ }
558
+ static get observedAttributes() {
559
+ return [
560
+ "burger-menu-aria-label",
561
+ "close-button-aria-label",
562
+ "primary-navigation-aria-label",
563
+ "back-to-menu-label"
564
+ ];
565
+ }
566
+ attributeChangedCallback(e, t, n) {
567
+ if (t !== n) switch (e) {
568
+ case "close-button-aria-label":
569
+ this.#l.forEach((e) => {
570
+ e.setAttribute("close-button-aria-label", n);
571
+ });
572
+ break;
573
+ case "burger-menu-aria-label":
574
+ this.$burgerMenu.setAttribute("aria-label", n);
575
+ break;
576
+ case "primary-navigation-aria-label":
577
+ this.$primaryNavigation.setAttribute("aria-label", n);
578
+ break;
579
+ case "back-to-menu-label": this.#l.forEach((e) => {
580
+ e.setAttribute("back-to-menu-label", n);
581
+ });
582
+ }
583
+ }
584
+ #e;
585
+ #t() {
586
+ let e = this.querySelectorAll("px-mdd"), t = this.#c.getBoundingClientRect().bottom;
587
+ e.forEach((e) => {
588
+ e.dialogOffsetTop = `${t}px`;
589
+ });
590
+ }
591
+ #n(e) {
592
+ this.#o && (this.#o.$megaDropDown.hidden = !0), this.#l.forEach((t) => {
593
+ t.name === e && t.hidden && (t.dialogOffsetTop = `${this.#c.getBoundingClientRect().bottom}px`, t.hidden = !t.hidden, this.querySelector(`px-header-item[for="${e}"]`).checked = !t.hidden, document.body.style.overflow = t.hidden ? "auto" : "hidden"), t.name !== e && !t.hidden && (t.hidden = !0);
594
+ });
595
+ }
596
+ #r() {
597
+ this.$backdropFilter.style.display = "none", this.#l.forEach((e) => {
598
+ e.hidden ||= !0;
599
+ }), this.#o && (this.#o.$megaDropDown.dialogOffsetTop = `${this.#c.getBoundingClientRect().bottom}px`, this.#o.$megaDropDown.hidden = !1), document.body.style.overflow = "hidden";
600
+ }
601
+ #i() {
602
+ this.#o && (this.#o.$megaDropDown.hidden = !0, this.$burgerMenu.setAttribute("aria-expanded", "false"), Array.from(this.#l).some((e) => !e.hidden) || (document.body.style.overflow = "auto", this.$backdropFilter.style.display = "none"));
603
+ }
604
+ #a() {
605
+ this.$backdropFilter.style.display = "none", this.#o && (this.#o.$megaDropDown.hidden = !0), this.#s.forEach((e) => {
606
+ e.checked = !1;
607
+ }), this.#l.forEach((e) => {
608
+ e.hidden = !0;
609
+ }), document.body.style.overflow = "auto";
610
+ }
611
+ get #o() {
612
+ return this.querySelector("px-header-mobile-menu");
613
+ }
614
+ get #s() {
615
+ return this.querySelectorAll("px-header-item");
616
+ }
617
+ get #c() {
618
+ return this.shadowRoot.querySelector("header");
619
+ }
620
+ get #l() {
621
+ return this.querySelectorAll("px-mdd");
622
+ }
623
+ get $backdropFilter() {
624
+ return this.shadowRoot.querySelector("#backdrop-filter");
625
+ }
626
+ get $burgerMenu() {
627
+ return this.shadowRoot.querySelector("#burger-menu");
628
+ }
629
+ get $slotMain() {
630
+ return this.querySelector("[slot=\"main\"]");
631
+ }
632
+ get $targetGroupDropdown() {
633
+ return this.querySelector("px-dropdown[slot=\"target-group\"]");
634
+ }
635
+ get $userLanguageDropdown() {
636
+ return this.querySelector("px-dropdown[slot=\"user-language\"]");
637
+ }
638
+ get $dropDownZoneDesktop() {
639
+ return this.shadowRoot.querySelector("#dropdown-zone--desktop");
640
+ }
641
+ get $primaryNavigation() {
642
+ return this.shadowRoot.querySelector("#primary-navigation");
643
+ }
644
+ get closeButtonAriaLabel() {
645
+ return this.getAttribute("close-button-aria-label");
646
+ }
647
+ set closeButtonAriaLabel(e) {
648
+ l(this, "close-button-aria-label", e);
649
+ }
650
+ get burgerMenuAriaLabel() {
651
+ return this.getAttribute("burger-menu-aria-label");
652
+ }
653
+ set burgerMenuAriaLabel(e) {
654
+ l(this, "burger-menu-aria-label", e);
655
+ }
656
+ get backToMenuLabel() {
657
+ return this.getAttribute("back-to-menu-label");
658
+ }
659
+ set backToMenuLabel(e) {
660
+ l(this, "back-to-menu-label", e);
661
+ }
662
+ get primaryNavigationAriaLabel() {
663
+ return this.getAttribute("primary-navigation-aria-label");
664
+ }
665
+ set primaryNavigationAriaLabel(e) {
666
+ l(this, "primary-navigation-aria-label", e);
667
+ }
631
668
  };
632
- customElements.get("px-header") || customElements.define("px-header", ce);
633
- const be = ':host{position:relative}::slotted([slot="popover"]){position:absolute;border-radius:var(--px-radius-main, 8px);background:var(--px-color-background-container-light-default, #fff);box-shadow:0 20px 25px -5px #25252514;margin:0;padding:var(--px-padding-xs-mobile) 0;border:0;right:0;width:auto}:host([grow]) ::slotted([slot="trigger"]):after{right:0;padding-right:var(--px-padding-xs-mobile)}:host([anchoralignment="top-left"]) ::slotted([slot="popover"]){top:auto}:host([anchoralignment="top-right"]) ::slotted([slot="popover"]){top:auto}:host([anchoralignment="bottom-right"]) ::slotted([slot="popover"]){left:auto}@media screen and (max-width: 767px){::slotted([slot="trigger"]){display:block;width:100%}:host([anchoralignment="top-left"]) ::slotted([slot="popover"]){left:var(--px-padding-s-mobile)}:host([anchoralignment="top-right"]) ::slotted([slot="popover"]){left:var(--px-padding-s-mobile)}}@media screen and (min-width: 768px){::slotted([slot="popover"]){padding-block:var(--px-padding-s-desktop);right:auto;width:auto}}', he = [
634
- "top-left",
635
- "top-right",
636
- "bottom-left",
637
- "bottom-right"
669
+ customElements.get("px-header") || customElements.define("px-header", q);
670
+ //#endregion
671
+ //#region ../../components/Dropdown/src/dropdown.css?inline
672
+ var J = ":host{position:relative}::slotted([slot=popover]){border-radius:var(--px-radius-main,8px);background:var(--px-color-background-container-light-default,#fff);padding:var(--px-padding-xs-mobile) 0;width:auto;max-height:var(--px-popover-max-height);border:0;margin:0;position:fixed;right:0;box-shadow:0 20px 25px -5px #25252514}:host([grow]) ::slotted([slot=trigger]):after{padding-right:var(--px-padding-xs-mobile);right:0}:host([anchoralignment=top-left]) ::slotted([slot=popover]){top:auto}:host([anchoralignment=top-right]) ::slotted([slot=popover]){top:auto}:host([anchoralignment=bottom-right]) ::slotted([slot=popover]){left:auto}@media screen and (width<=47.938rem){::slotted([slot=trigger]){width:100%;display:block}:host([anchoralignment=top-left]) ::slotted([slot=popover]){left:var(--px-padding-s-mobile)}:host([anchoralignment=top-right]) ::slotted([slot=popover]){left:var(--px-padding-s-mobile)}}@media screen and (width>=48rem){::slotted([slot=popover]){padding-block:var(--px-padding-s-desktop);width:auto;right:auto}}", ve = [
673
+ "top-left",
674
+ "top-right",
675
+ "bottom-left",
676
+ "bottom-right"
638
677
  ];
639
- function et(o, t, e = "bottom-left", r, n = !1) {
640
- "anchorName" in document.documentElement.style && n === !1 || t.addEventListener("toggle", () => {
641
- var w, u;
642
- if (!o || !t)
643
- return;
644
- const s = o.getBoundingClientRect(), i = ((w = window.visualViewport) == null ? void 0 : w.height) ?? window.innerHeight, l = ((u = window.visualViewport) == null ? void 0 : u.width) ?? window.innerWidth, c = r.getPropertyValue("--px-padding-s-mobile") || "16px", g = parseInt(
645
- (r.getPropertyValue("--px-icon-size-xs-desktop") || "24").replace("px", "")
646
- );
647
- ["top-left", "top-right"].includes(e) ? (t.style.bottom = `calc( ${c} + ${i - s.top - window.scrollY}px)`, t.style.top = "auto", e === "top-left" ? t.style.left = l < 768 ? `${c}px` : `${s.left}px` : t.style.right = l < 768 ? `${c}px` : `${l - s.right}px`) : (t.style.top = `${s.bottom + window.scrollY}px`, e === "bottom-left" ? t.style.left = l < 768 ? `${c}px` : `${s.left}px` : t.style.right = l < 768 ? `${c}px` : `${l - s.right - g}px`);
648
- });
678
+ //#endregion
679
+ //#region ../../components/Dropdown/src/anchorPolyfill.ts
680
+ function Y(e, t, n = "bottom-left", r, i = !1) {
681
+ "anchorName" in document.documentElement.style && i === !1 || t.addEventListener("toggle", () => {
682
+ if (!e || !t) return;
683
+ let i = e.getBoundingClientRect(), a = window.visualViewport?.height ?? window.innerHeight, o = window.visualViewport?.width ?? window.innerWidth, s = r.getPropertyValue("--px-padding-s-mobile") || "16px", c = parseInt((r.getPropertyValue("--px-icon-size-xs-desktop") || "24").replace("px", ""));
684
+ ["top-left", "top-right"].includes(n) ? (t.style.bottom = `calc( ${s} + ${a - i.top - window.scrollY}px)`, t.style.top = "auto", n === "top-left" ? t.style.left = o < 768 ? `${s}px` : `${i.left}px` : t.style.right = o < 768 ? `${s}px` : `${o - i.right}px`) : (t.style.top = `${i.bottom + window.scrollY}px`, n === "bottom-left" ? t.style.left = o < 768 ? `${s}px` : `${i.left}px` : t.style.right = o < 768 ? `${s}px` : `${o - i.right - c}px`);
685
+ });
649
686
  }
650
- const ct = new CSSStyleSheet();
651
- ct.replaceSync(be);
652
- const M = "bottom-left";
653
- var z, bt, m, k, y, ht;
654
- class ue extends Z {
655
- constructor() {
656
- super(ct);
657
- h(this, z);
658
- h(this, m);
659
- h(this, k);
660
- h(this, y);
661
- this.template = () => `
662
- <style>${this.css}</style>
663
- <slot name="trigger"></slot>
664
- <slot name="popover"></slot>`, this.isAboutToClose = !1, A(this, m, () => {
665
- this.isAboutToClose || (this.$popoverElement.togglePopover({ source: this.$trigger }), this.$trigger.ariaExpanded = "true");
666
- }), A(this, k, () => {
667
- this.$popoverElement.matches(":popover-open") && (this.isAboutToClose = !0, this.$trigger.ariaExpanded = "false");
668
- }), A(this, y, () => {
669
- this.$popoverElement.matches(":popover-open") || setTimeout(() => {
670
- this.isAboutToClose = !1;
671
- });
672
- }), this.shadowRoot.innerHTML = this.template();
673
- }
674
- /**
675
- * Instance level styling for the dropdown component.
676
- * This is used to set the anchor name and position of the popover.
677
- * @private
678
- */
679
- get css() {
680
- return `::slotted([slot='trigger']) {
687
+ /* v8 ignore end */
688
+ //#endregion
689
+ //#region ../../components/Dropdown/src/Dropdown.ts
690
+ var X = new CSSStyleSheet();
691
+ X.replaceSync(J);
692
+ var Z = "bottom-left", ye = class extends t {
693
+ get css() {
694
+ return `::slotted([slot='trigger']) {
681
695
  anchor-name: ${this.anchorName};
682
696
  }
683
697
  :host([anchoralignment="bottom-left"]) {
684
- ::slotted([slot="popover"]) {
698
+ ::slotted([popover]) {
685
699
  position-anchor: ${this.anchorName};
686
700
  top: anchor(${this.anchorName} bottom);
687
701
  left: anchor(${this.anchorName} left);
@@ -708,160 +722,149 @@ class ue extends Z {
708
722
  right: anchor(${this.anchorName} right);
709
723
  }
710
724
  }`;
711
- }
712
- static get observedAttributes() {
713
- return [
714
- ...super.observedAttributes,
715
- "id",
716
- "anchoralignment",
717
- "use-polyfill"
718
- ];
719
- }
720
- connectedCallback() {
721
- this.getAttribute("id") || this.setAttribute(
722
- "id",
723
- `px-dropdown-${Math.random().toString(36).substring(2, 15)}`
724
- ), this.getAttribute("anchoralignment") || this.setAttribute("anchoralignment", M), et(
725
- this.$trigger,
726
- this.$popoverElement,
727
- this.anchorAlignment,
728
- getComputedStyle(this),
729
- this.usePolyfill
730
- );
731
- }
732
- attributeChangedCallback(e, r, n) {
733
- if (r !== n)
734
- switch (e) {
735
- case "id":
736
- this.initPopover();
737
- break;
738
- case "use-polyfill":
739
- et(
740
- this.$trigger,
741
- this.$popoverElement,
742
- this.anchorAlignment,
743
- getComputedStyle(this),
744
- this.usePolyfill
745
- );
746
- break;
747
- default:
748
- super.attributeChangedCallback(e, r, n);
749
- break;
750
- }
751
- }
752
- initPopover() {
753
- this.$trigger && (this.$trigger.setAttribute("popovertarget", this.popoverId), this.$trigger.setAttribute("aria-controls", this.popoverId), this.$trigger.setAttribute("aria-expanded", "false"), this.$popoverElement.setAttribute("id", this.popoverId), this.$popoverElement.setAttribute("popover", ""), this.$style.innerHTML = this.css, b(this, z, bt).call(this), b(this, z, ht).call(this));
754
- }
755
- get popoverId() {
756
- return `${this.getAttribute("id")}-popover`;
757
- }
758
- get anchorName() {
759
- return `--${this.getAttribute("id")}-anchor`;
760
- }
761
- get $style() {
762
- return this.shadowRoot.querySelector("style");
763
- }
764
- get $trigger() {
765
- return this.querySelector('[slot="trigger"]');
766
- }
767
- get $popoverElement() {
768
- return this.querySelector('[slot="popover"]');
769
- }
770
- get anchorAlignment() {
771
- return this.getAttribute("anchoralignment") || M;
772
- }
773
- set anchorAlignment(e) {
774
- he.includes(e) ? this.setAttribute("anchoralignment", e) : (R(
775
- `Invalid anchor alignment value: ${e}. Using default ${M}.`
776
- ), this.setAttribute("anchoralignment", M));
777
- }
778
- get usePolyfill() {
779
- return this.hasAttribute("use-polyfill");
780
- }
781
- set usePolyfill(e) {
782
- e ? this.setAttribute("use-polyfill", "") : this.removeAttribute("use-polyfill");
783
- }
784
- }
785
- z = new WeakSet(), bt = function() {
786
- this.isAboutToClose = !1, this.$trigger.removeEventListener("click", d(this, m)), this.$popoverElement.removeEventListener(
787
- "beforetoggle",
788
- d(this, k)
789
- ), this.$popoverElement.removeEventListener("toggle", d(this, y));
790
- }, m = new WeakMap(), k = new WeakMap(), y = new WeakMap(), /**
791
- * Handles the manual display of the popover when the trigger is clicked.
792
- * This is necessary for cases where the trigger is not a button or input element.
793
- * This method adds event listeners to the trigger element to toggle the popover.
794
- * It also manages the state of whether the popover is about to close or not to avoid
795
- * race conditions when the popover is toggled and the trigger click event is fired.
796
- */
797
- ht = function() {
798
- this.$trigger && !["button", "input"].includes(this.$trigger.localName) && (this.$trigger.addEventListener("click", d(this, m)), this.$popoverElement.addEventListener("beforetoggle", d(this, k)), this.$popoverElement.addEventListener("toggle", d(this, y)));
799
- };
800
- customElements.get("px-dropdown") || customElements.define("px-dropdown", ue);
801
- const ut = new CSSStyleSheet();
802
- ut.replaceSync(`
803
- @media screen and (min-width: 48em) {
804
- :host {
805
- display: none;
806
- }
807
- }
808
- `);
809
- var O, I, xt;
810
- class xe extends HTMLElement {
811
- constructor() {
812
- super();
813
- h(this, I);
814
- h(this, O, `<px-mdd
815
- name="__lavender_mobile_menu"
816
- hidden--tablet
817
- hidden--laptop
818
- hidden--desktop
819
- >
820
- <span slot="title"><slot name="title"></slot></span>
821
- <px-mdd-section title-hidden></px-mdd-section>
822
- </px-mdd>`);
823
- this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = d(this, O), this.shadowRoot.adoptedStyleSheets = [ut];
824
- }
825
- connectedCallback() {
826
- this.setAttribute("slot", "header-panels");
827
- const e = this.closest("px-header");
828
- if (!e)
829
- throw new Error(
830
- "<px-header-mobile-menu> must be used within a <px-header>."
831
- );
832
- const r = e.querySelectorAll("px-header-item"), n = e.querySelectorAll("px-action-link"), s = this.shadowRoot.querySelector("px-mdd-section");
833
- s.innerHTML = `
834
- ${[...r].map((i) => {
835
- const l = i.getAttribute("for"), c = i.getAttribute("href");
836
- return l ? `<px-mdd-section-item for="${l}">${i.innerText}</px-mdd-section-item>` : c ? `<px-mdd-section-item href="${c}">${i.innerText}</px-mdd-section-item>` : "";
837
- }).join("")}
838
- ${[...n].filter((i) => !i.hasAttribute("promoted")).map(
839
- (i) => `<px-mdd-a href="${i.getAttribute("href")}" slot="footer">${i.innerText}</px-mdd-a>`
840
- ).join("")}`, b(this, I, xt).call(this).forEach((i) => {
841
- i && this.$megaDropDown.appendChild(i);
842
- });
843
- }
844
- get $megaDropDown() {
845
- return this.shadowRoot.querySelector("px-mdd");
846
- }
847
- }
848
- O = new WeakMap(), I = new WeakSet(), xt = function() {
849
- const e = this.closest("px-header"), r = e.querySelector(
850
- 'px-dropdown[slot="target-group"]'
851
- ), n = e.querySelector(
852
- 'px-dropdown[slot="user-language"]'
853
- ), s = r == null ? void 0 : r.cloneNode(
854
- !0
855
- );
856
- s == null || s.removeAttribute("id"), s == null || s.setAttribute("slot", "mdd-footer"), s == null || s.setAttribute("grow", "3"), s == null || s.setAttribute("anchoralignment", "top-left");
857
- const i = n == null ? void 0 : n.cloneNode(
858
- !0
859
- );
860
- return i == null || i.removeAttribute("id"), i == null || i.setAttribute("slot", "mdd-footer"), i == null || i.setAttribute("grow", "1"), i == null || i.setAttribute("anchoralignment", "top-right"), [s, i];
725
+ }
726
+ static get observedAttributes() {
727
+ return [
728
+ ...super.observedAttributes,
729
+ "id",
730
+ "anchoralignment",
731
+ "use-polyfill",
732
+ "manual-toggle",
733
+ "popover-height"
734
+ ];
735
+ }
736
+ constructor() {
737
+ super(X), this.template = () => `
738
+ <style>${this.css}</style>
739
+ <slot name="trigger"></slot>
740
+ <slot name="popover"></slot>`, this.isAboutToClose = !1, this.triggerPopoverDisplay = () => {
741
+ this.isAboutToClose || (this.$popoverElement.togglePopover({ source: this.$trigger }), this.manualToggle || (this.$trigger.ariaExpanded = "true"));
742
+ }, this.showPopover = () => {
743
+ this.isAboutToClose || this.$popoverElement.showPopover();
744
+ }, this.hidePopover = () => {
745
+ this.$popoverElement.hidePopover();
746
+ }, this.#t = () => {
747
+ this.$popoverElement.matches(":popover-open") && (this.isAboutToClose = !0, this.manualToggle || (this.$trigger.ariaExpanded = "false"));
748
+ }, this.#n = () => {
749
+ this.$popoverElement.matches(":popover-open") || setTimeout(() => {
750
+ this.isAboutToClose = !1;
751
+ });
752
+ }, this.shadowRoot.innerHTML = this.template();
753
+ }
754
+ connectedCallback() {
755
+ this.getAttribute("id") || this.setAttribute("id", `px-dropdown-${Math.random().toString(36).substring(2, 15)}`), this.getAttribute("anchoralignment") || this.setAttribute("anchoralignment", Z), Y(this.$trigger, this.$popoverElement, this.anchorAlignment, getComputedStyle(this), this.usePolyfill);
756
+ }
757
+ #e() {
758
+ this.isAboutToClose = !1, this.manualToggle || this.$trigger.removeEventListener("click", this.triggerPopoverDisplay), this.$popoverElement.removeEventListener("beforetoggle", this.#t), this.$popoverElement.removeEventListener("toggle", this.#n);
759
+ }
760
+ #t;
761
+ #n;
762
+ #r() {
763
+ this.$trigger && !["button", "input"].includes(this.$trigger.localName) && (this.manualToggle || this.$trigger.addEventListener("click", this.triggerPopoverDisplay), this.$popoverElement.addEventListener("beforetoggle", this.#t), this.$popoverElement.addEventListener("toggle", this.#n));
764
+ }
765
+ attributeChangedCallback(e, t, n) {
766
+ if (t !== n) switch (e) {
767
+ case "id":
768
+ this.initPopover();
769
+ break;
770
+ case "use-polyfill":
771
+ Y(this.$trigger, this.$popoverElement, this.anchorAlignment, getComputedStyle(this), this.usePolyfill);
772
+ break;
773
+ case "manual-toggle":
774
+ n != null && this.$trigger?.removeAttribute("aria-expanded");
775
+ break;
776
+ case "popover-height":
777
+ this.updatePopoverHeight(n);
778
+ break;
779
+ default: super.attributeChangedCallback(e, t, n);
780
+ }
781
+ }
782
+ updatePopoverHeight(e) {
783
+ e ? this.$popoverElement.style.setProperty("--px-popover-max-height", e) : this.$popoverElement.style.removeProperty("--px-popover-max-height");
784
+ }
785
+ initPopover() {
786
+ if (this.$trigger) {
787
+ this.$trigger.setAttribute("popovertarget", this.popoverId);
788
+ let e = this.getAttribute("id");
789
+ e && this.$trigger.setAttribute("aria-controls", e), this.hasAttribute("manual-toggle") || this.$trigger.setAttribute("aria-expanded", "false"), this.$popoverElement.setAttribute("id", this.popoverId), this.$popoverElement.setAttribute("popover", ""), this.$style.innerHTML = this.css, this.#e(), this.#r();
790
+ }
791
+ }
792
+ get popoverId() {
793
+ return `${this.getAttribute("id")}-popover`;
794
+ }
795
+ get anchorName() {
796
+ return `--${this.getAttribute("id")}-anchor`;
797
+ }
798
+ get $style() {
799
+ return this.shadowRoot.querySelector("style");
800
+ }
801
+ get $trigger() {
802
+ return this.querySelector("[slot=\"trigger\"]");
803
+ }
804
+ get $popoverElement() {
805
+ return this.querySelector("[slot=\"popover\"]");
806
+ }
807
+ get anchorAlignment() {
808
+ return this.getAttribute("anchoralignment") || Z;
809
+ }
810
+ set anchorAlignment(e) {
811
+ ve.includes(e) ? this.setAttribute("anchoralignment", e) : (c(`Invalid anchor alignment value: ${e}. Using default ${Z}.`), this.setAttribute("anchoralignment", Z));
812
+ }
813
+ get usePolyfill() {
814
+ return this.hasAttribute("use-polyfill");
815
+ }
816
+ set usePolyfill(e) {
817
+ e ? this.setAttribute("use-polyfill", "") : this.removeAttribute("use-polyfill");
818
+ }
819
+ get manualToggle() {
820
+ return this.hasAttribute("manual-toggle");
821
+ }
822
+ set manualToggle(e) {
823
+ e ? this.setAttribute("manual-toggle", "") : this.removeAttribute("manual-toggle");
824
+ }
825
+ get popoverHeight() {
826
+ return this.getAttribute("popover-height");
827
+ }
828
+ set popoverHeight(e) {
829
+ l(this, "popover-height", e);
830
+ }
861
831
  };
862
- customElements.get("px-header-mobile-menu") || customElements.define("px-header-mobile-menu", xe);
863
- export {
864
- ce as Header,
865
- Ct as HeaderItem,
866
- xe as HeaderMobileMenu
832
+ customElements.get("px-dropdown") || customElements.define("px-dropdown", ye);
833
+ //#endregion
834
+ //#region src/MobileMenu.ts
835
+ var Q = new CSSStyleSheet();
836
+ Q.replaceSync("\n @media screen and (min-width: 64.0625rem) {\n :host {\n display: none;\n }\n }\n");
837
+ var $ = class extends HTMLElement {
838
+ #e = "<px-mdd\n name=\"__lavender_mobile_menu\"\n hidden--laptop\n hidden--desktop\n >\n <span slot=\"title\"><slot name=\"title\"></slot></span>\n <px-mdd-section title-hidden></px-mdd-section>\n </px-mdd>";
839
+ constructor() {
840
+ super(), this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.#e, this.shadowRoot.adoptedStyleSheets = [Q];
841
+ }
842
+ connectedCallback() {
843
+ this.setAttribute("slot", "header-panels");
844
+ let e = this.closest("px-header");
845
+ if (!e) throw Error("<px-header-mobile-menu> must be used within a <px-header>.");
846
+ let t = e.querySelectorAll("px-header-item"), n = e.querySelectorAll("px-action-link"), r = this.shadowRoot.querySelector("px-mdd-section");
847
+ r.innerHTML = `
848
+ ${[...t].map((e) => {
849
+ let t = e.getAttribute("for"), n = e.getAttribute("href");
850
+ return t ? `<px-mdd-section-item for="${t}">${e.innerText}</px-mdd-section-item>` : n ? `<px-mdd-section-item href="${n}">${e.innerText}</px-mdd-section-item>` : "";
851
+ }).join("")}
852
+ ${[...n].filter((e) => !e.hasAttribute("promoted")).map((e) => `<px-mdd-a href="${e.getAttribute("href")}" slot="footer">${e.innerText}</px-mdd-a>`).join("")}`, this.#t()?.forEach((e) => {
853
+ e && this.$megaDropDown.appendChild(e);
854
+ });
855
+ }
856
+ #t() {
857
+ let e = this.closest("px-header");
858
+ if (!e) return;
859
+ let t = e.querySelector("px-dropdown[slot=\"target-group\"]"), n = e.querySelector("px-dropdown[slot=\"user-language\"]"), r = t?.cloneNode(!0);
860
+ r?.removeAttribute("id"), r?.setAttribute("slot", "mdd-footer"), r?.setAttribute("grow", "3"), r?.setAttribute("anchoralignment", "top-left");
861
+ let i = n?.cloneNode(!0);
862
+ return i?.removeAttribute("id"), i?.setAttribute("slot", "mdd-footer"), i?.setAttribute("grow", "1"), i?.setAttribute("anchoralignment", "top-right"), [r, i];
863
+ }
864
+ get $megaDropDown() {
865
+ return this.shadowRoot.querySelector("px-mdd");
866
+ }
867
867
  };
868
+ customElements.get("px-header-mobile-menu") || customElements.define("px-header-mobile-menu", $);
869
+ //#endregion
870
+ export { q as Header, p as HeaderItem, $ as HeaderMobileMenu };