@proximus/lavender-mega-dropdown 1.4.10-alpha.2 → 1.4.10-alpha.20

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 (2) hide show
  1. package/dist/index.es.js +378 -374
  2. package/package.json +1 -1
package/dist/index.es.js CHANGED
@@ -1,16 +1,16 @@
1
- var rt = (s) => {
1
+ var at = (s) => {
2
2
  throw TypeError(s);
3
3
  };
4
- var I = (s, t, e) => t.has(s) || rt("Cannot " + e);
5
- var n = (s, t, e) => (I(s, t, "read from private field"), e ? e.call(s) : t.get(s)), c = (s, t, e) => t.has(s) ? rt("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(s) : t.set(s, e), k = (s, t, e, o) => (I(s, t, "write to private field"), o ? o.call(s, e) : t.set(s, e), e), P = (s, t, e) => (I(s, t, "access private method"), e);
6
- import { PxElement as $, transferAccessibilityAttributes as it, log as d, checkName as w, WrappedInteractiveStateController as at, WithExtraAttributes as st, iconSizeValuesKC as qt, textalignValues as nt, colorValues as Y, headingValues as dt, cssTokenBreakpoints as h, paddingValues as u, gapValues as Dt, boxShadowValues as jt, backgroundSizeValues as Nt, noBorderRadiusValues as _t, borderRadiusValues as Wt, borderSideValues as Ft, borderValues as Gt, gradientValues as Yt, backgroundColorValues as lt, borderColorValues as Xt, fontweightValues as pt, fontsizeValues as bt } from "@proximus/lavender-common";
4
+ var I = (s, t, e) => t.has(s) || at("Cannot " + e);
5
+ var n = (s, t, e) => (I(s, t, "read from private field"), e ? e.call(s) : t.get(s)), c = (s, t, e) => t.has(s) ? at("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(s) : t.set(s, e), k = (s, t, e, r) => (I(s, t, "write to private field"), r ? r.call(s, e) : t.set(s, e), e), j = (s, t, e) => (I(s, t, "access private method"), e);
6
+ import { PxElement as $, transferAccessibilityAttributes as pt, log as d, checkName as w, WrappedInteractiveStateController as bt, WithExtraAttributes as X, iconSizeValuesKC as _t, textalignValues as ct, colorValues as Z, headingValues as ht, cssTokenBreakpoints as h, paddingValues as u, gapValues as Wt, boxShadowValues as Ft, backgroundSizeValues as Gt, noBorderRadiusValues as Yt, borderRadiusValues as Xt, borderSideValues as Zt, borderValues as Kt, gradientValues as st, backgroundColorValues as P, borderColorValues as nt, fontweightValues as gt, fontsizeValues as ut } from "@proximus/lavender-common";
7
7
  import "@proximus/lavender-layout";
8
- const ct = `.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-brand-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,.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);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,.header-minimal-dropdown) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-mobile) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-mobile) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.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,.header-dropdown,.header-minimal-dropdown)[disabled],.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.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,.header-dropdown,.header-minimal-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,.header-minimal-dropdown)[shape=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.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,.header-dropdown,.header-minimal-dropdown)[shape=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.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{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-m);height:var(--px-size-m);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}:is()[slot=after]{padding:0 0 0 var(--px-padding-2xs-mobile)}:is()[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)}.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-m);height:var(--px-size-m);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,.btn.header-minimal-dropdown{display:flex;align-items:center;touch-action:manipulation}.btn.header-dropdown:after,.btn.header-minimal-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='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");background-color:currentColor;color:var(--px-color-icon-brand-default);--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition)}.btn.header-dropdown[aria-expanded=true]:after,.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);border:none;padding:0;border-radius:0;background:none}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)}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,.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,.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,.header-dropdown,.header-minimal-dropdown)[disabled],:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag,.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,.header-dropdown,.header-minimal-dropdown).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)}: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 only screen and (max-width: 47.938em){.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown)[shape--mobile=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.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,.header-dropdown,.header-minimal-dropdown)[shape--mobile=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.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 only screen and (min-width: 48em) and (max-width: 64em){.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown)[shape--tablet=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.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,.header-dropdown,.header-minimal-dropdown)[shape--tablet=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.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 only screen and (min-width: 48em){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{padding:var(--px-padding-2xs-tablet) var(--px-padding-xs-tablet);gap:var(--px-spacing-xs-tablet)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown){padding:var(--px-padding-xs-tablet) var(--px-padding-m-tablet)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-tablet) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.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)}:is()[slot=after]{padding:0 0 0 var(--px-padding-2xs-tablet)}:is()[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{justify-content:flex-start;align-items:center;width:inherit;color:var(--px-color-text-brand-default);font-weight:var(--px-font-weight-title);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,.header-minimal-dropdown)[shape--laptop=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.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,.header-dropdown,.header-minimal-dropdown)[shape--laptop=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.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 only screen and (min-width: 64.0625em){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{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,.header-minimal-dropdown){padding:var(--px-padding-xs-laptop) var(--px-padding-m-laptop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-laptop) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.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)}:is()[slot=after]{padding:0 0 0 var(--px-padding-2xs-laptop)}:is()[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{padding:0}}@media only screen and (min-width: 90.0625em){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{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,.header-minimal-dropdown)[shape--desktop=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.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,.header-dropdown,.header-minimal-dropdown)[shape--desktop=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.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,.header-dropdown,.header-minimal-dropdown){padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-desktop) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.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)}:is()[slot=after]{padding:0 0 0 var(--px-padding-2xs-desktop)}:is()[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)}}`, ht = ':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,a.wrapper{text-decoration:none}a.no-style:hover,a.no-style:focus-visible,a.wrapper:hover,a.wrapper:focus-visible{color:inherit}a.wrapper{display:block;line-height:0}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{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.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)}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.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)}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.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)}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)}}', Zt = ".patch{display:inline-flex;align-items:center;padding:var(--px-padding-3xs-mobile) var(--px-padding-s-mobile);border:var(--px-size-border-m) solid transparent;border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small);font-family:var(--px-font-family);font-weight:var(--px-font-weight-title);font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-line-height-ratio-l);background-color:var(--px-color-background-purpose-promo-default);color:var(--px-color-text-neutral-inverted)}.patch,.patch *{box-sizing:border-box}[shape=bottom-right]{border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small) var(--px-radius-patch-big)}[shape=bottom-left],[shape=default]{border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small)}.info{background-color:var(--px-color-background-purpose-info-default);color:var(--px-color-text-neutral-default)}.black-friday{background-color:var(--px-color-background-surface-dark);color:var(--px-color-text-neutral-inverted)}.eco{background-color:var(--px-color-background-purpose-success-default);color:var(--px-color-text-neutral-inverted)}.greyed{background-color:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}:host([inverted]) .patch{background-color:var(--px-color-background-purpose-promo-inverted);color:var(--px-color-text-neutral-inverted)}:host([inverted]) .info{background-color:var(--px-color-background-purpose-info-inverted);color:var(--px-color-text-neutral-default)}:host([inverted]) .black-friday{background-color:var(--px-color-background-container-light-default);color:var(--px-color-text-neutral-default)}:host([inverted]) .eco{background-color:var(--px-color-background-purpose-success-inverted);color:var(--px-color-text-neutral-default)}:host([inverted]) .greyed{background-color:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}@media only screen and (min-width: 768px){.patch{padding:0 var(--px-padding-s-desktop);font-size:var(--px-text-size-label-m-desktop)}}@media only screen and (min-width: 1025px){.patch{padding:0 var(--px-padding-s-desktop);font-size:var(--px-text-size-label-m-desktop)}}@media only screen and (min-width: 1441px){.patch{padding:0 var(--px-padding-s-desktop);font-size:var(--px-text-size-label-m-desktop)}}", Kt = ":host:has(.tag){display:inline-block}.tag{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-body);gap:var(--px-spacing-xs-mobile);background-color:var(--px-color-background-container-default-default);color:var(--px-color-text-neutral-default);padding:var(--px-padding-2xs-mobile) var(--px-padding-xs-mobile);border:var(--px-size-border-s) solid transparent;border-radius:var(--px-radius-main)}.tag,.tag *{box-sizing:border-box}:host([disabled]) .tag{background-color:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}:host([inverted]) .tag{background-color:var(--px-color-background-container-default-inverted);color:var(--px-color-text-neutral-inverted)}:host([inverted]):host([disabled]) .tag{background-color:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}@media only screen and (min-width: 768px){.tag{font-size:var(--px-text-size-label-m-desktop);gap:var(--px-spacing-xs-desktop);padding:var(--px-padding-2xs-desktop) var(--px-padding-xs-desktop)}}@media only screen and (min-width: 1025px){.tag{font-size:var(--px-text-size-label-m-desktop);gap:var(--px-spacing-xs-desktop);padding:var(--px-padding-2xs-desktop) var(--px-padding-xs-desktop)}}", gt = new CSSStyleSheet(), ut = new CSSStyleSheet(), xt = new CSSStyleSheet(), vt = new CSSStyleSheet();
9
- gt.replaceSync(ct);
10
- ut.replaceSync(ht);
11
- xt.replaceSync(Zt);
12
- vt.replaceSync(Kt);
13
- const Ut = [
8
+ const xt = `.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-brand-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,.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);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,.header-minimal-dropdown) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-mobile) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-mobile) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.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,.header-dropdown,.header-minimal-dropdown)[disabled],.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.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,.header-dropdown,.header-minimal-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,.header-minimal-dropdown)[shape=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.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,.header-dropdown,.header-minimal-dropdown)[shape=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.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{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-m);height:var(--px-size-m);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}:is()[slot=after]{padding:0 0 0 var(--px-padding-2xs-mobile)}:is()[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)}.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-m);height:var(--px-size-m);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,.btn.header-minimal-dropdown{display:flex;align-items:center;touch-action:manipulation}.btn.header-dropdown:after,.btn.header-minimal-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='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");background-color:currentColor;color:var(--px-color-icon-brand-default);--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition)}.btn.header-dropdown[aria-expanded=true]:after,.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);border:none;padding:0;border-radius:0;background:none}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)}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,.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,.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,.header-dropdown,.header-minimal-dropdown)[disabled],:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag,.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,.header-dropdown,.header-minimal-dropdown).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)}: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 (max-width: 47.938rem){.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown)[shape--mobile=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.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,.header-dropdown,.header-minimal-dropdown)[shape--mobile=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.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 (min-width: 48rem) and (max-width: 64rem){.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown)[shape--tablet=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.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,.header-dropdown,.header-minimal-dropdown)[shape--tablet=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.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 (min-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{padding:var(--px-padding-2xs-tablet) var(--px-padding-xs-tablet);gap:var(--px-spacing-xs-tablet)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown){padding:var(--px-padding-xs-tablet) var(--px-padding-m-tablet)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-tablet) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.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)}:is()[slot=after]{padding:0 0 0 var(--px-padding-2xs-tablet)}:is()[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{justify-content:flex-start;align-items:center;width:inherit;color:var(--px-color-text-brand-default);font-weight:var(--px-font-weight-title);border:none;padding:0;border-radius:0;background:none}}@media screen and (min-width: 64.0625rem) and (max-width: 90rem){.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown)[shape--laptop=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.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,.header-dropdown,.header-minimal-dropdown)[shape--laptop=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.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 (min-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{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,.header-minimal-dropdown){padding:var(--px-padding-xs-laptop) var(--px-padding-m-laptop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-laptop) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.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)}:is()[slot=after]{padding:0 0 0 var(--px-padding-2xs-laptop)}:is()[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{padding:0}}@media screen and (min-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{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,.header-minimal-dropdown)[shape--desktop=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.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,.header-dropdown,.header-minimal-dropdown)[shape--desktop=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.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,.header-dropdown,.header-minimal-dropdown){padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-desktop) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.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)}:is()[slot=after]{padding:0 0 0 var(--px-padding-2xs-desktop)}:is()[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)}}`, vt = ':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,a.wrapper{text-decoration:none}a.no-style:hover,a.no-style:focus-visible,a.wrapper:hover,a.wrapper:focus-visible{color:inherit}a.wrapper{display:block;line-height:0}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{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 screen and (min-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)}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 screen and (min-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)}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 screen and (min-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)}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)}}', Ut = ".patch{display:inline-flex;align-items:center;padding:var(--px-padding-3xs-mobile) var(--px-padding-s-mobile);border:var(--px-size-border-m) solid transparent;border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small);font-family:var(--px-font-family);font-weight:var(--px-font-weight-title);font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-line-height-ratio-l);background-color:var(--px-color-background-purpose-promo-default);color:var(--px-color-text-neutral-inverted)}.patch,.patch *{box-sizing:border-box}[shape=bottom-right]{border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small) var(--px-radius-patch-big)}[shape=bottom-left],[shape=default]{border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small)}.info{background-color:var(--px-color-background-purpose-info-default);color:var(--px-color-text-neutral-default)}.black-friday{background-color:var(--px-color-background-surface-dark);color:var(--px-color-text-neutral-inverted)}.eco{background-color:var(--px-color-background-purpose-success-default);color:var(--px-color-text-neutral-inverted)}.greyed{background-color:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}:host([inverted]) .patch{background-color:var(--px-color-background-purpose-promo-inverted);color:var(--px-color-text-neutral-inverted)}:host([inverted]) .info{background-color:var(--px-color-background-purpose-info-inverted);color:var(--px-color-text-neutral-default)}:host([inverted]) .black-friday{background-color:var(--px-color-background-container-light-default);color:var(--px-color-text-neutral-default)}:host([inverted]) .eco{background-color:var(--px-color-background-purpose-success-inverted);color:var(--px-color-text-neutral-default)}:host([inverted]) .greyed{background-color:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}@media screen and (min-width: 48rem){.patch{padding:0 var(--px-padding-s-tablet);font-size:var(--px-text-size-label-m-tablet)}}@media screen and (min-width: 64.0625rem){.patch{padding:0 var(--px-padding-s-laptop);font-size:var(--px-text-size-label-m-laptop)}}@media screen and (min-width: 90.0625rem){.patch{padding:0 var(--px-padding-s-desktop);font-size:var(--px-text-size-label-m-desktop)}}", Jt = ":host:has(.tag){display:inline-block}.tag{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-body);gap:var(--px-spacing-xs-mobile);background-color:var(--px-color-background-container-default-default);color:var(--px-color-text-neutral-default);padding:var(--px-padding-2xs-mobile) var(--px-padding-xs-mobile);border:var(--px-size-border-s) solid transparent;border-radius:var(--px-radius-main)}.tag,.tag *{box-sizing:border-box}:host([disabled]) .tag{background-color:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}:host([inverted]) .tag{background-color:var(--px-color-background-container-default-inverted);color:var(--px-color-text-neutral-inverted)}:host([inverted]):host([disabled]) .tag{background-color:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}@media screen and (min-width: 48rem){.tag{font-size:var(--px-text-size-label-m-tablet);gap:var(--px-spacing-xs-tablet);padding:var(--px-padding-2xs-tablet) var(--px-padding-xs-tablet)}}@media screen and (min-width: 64.0625rem){.tag{font-size:var(--px-text-size-label-m-laptop);gap:var(--px-spacing-xs-laptop);padding:var(--px-padding-2xs-laptop) var(--px-padding-xs-laptop)}}", mt = new CSSStyleSheet(), ft = new CSSStyleSheet(), kt = new CSSStyleSheet(), yt = new CSSStyleSheet();
9
+ mt.replaceSync(xt);
10
+ ft.replaceSync(vt);
11
+ kt.replaceSync(Ut);
12
+ yt.replaceSync(Jt);
13
+ const dt = [
14
14
  "",
15
15
  "default",
16
16
  "secondary",
@@ -23,15 +23,15 @@ const Ut = [
23
23
  "actionable-tag",
24
24
  "header-dropdown",
25
25
  "header-minimal-dropdown"
26
- ], Jt = [
26
+ ], Qt = [
27
27
  "",
28
28
  "default",
29
29
  "bottom-right",
30
30
  "bottom-left",
31
31
  "alternative"
32
- ], Z = class Z extends $ {
32
+ ], U = class U extends $ {
33
33
  constructor() {
34
- super(gt, ut, xt, vt), this.template = () => `<button class="btn">
34
+ super(mt, ft, kt, yt), this.template = () => `<button class="btn">
35
35
  <slot name="before"></slot><slot></slot><slot name="after"></slot>
36
36
  </button>`, this.shadowRoot.innerHTML = this.template();
37
37
  }
@@ -58,62 +58,62 @@ const Ut = [
58
58
  connectedCallback() {
59
59
  const t = this.querySelectorAll("px-icon");
60
60
  t && t.forEach((e) => {
61
- const o = e.getAttribute("size"), r = e.getAttribute("color");
61
+ const r = e.getAttribute("size"), o = e.getAttribute("color");
62
62
  e && (e.addEventListener("click", () => {
63
63
  this.$el.focus();
64
- }), o || e.setAttribute("size", "xs"), r || e.setAttribute("color", "inherit"));
65
- }), it(this, this.$el, !0), this.$el.type === "submit" && this.addEventListener("click", (e) => {
66
- var o;
67
- e.preventDefault(), (o = this.closest("form")) == null || o.submit();
64
+ }), r || e.setAttribute("size", "xs"), o || e.setAttribute("color", "inherit"));
65
+ }), pt(this, this.$el, !0), this.$el.type === "submit" && this.addEventListener("click", (e) => {
66
+ var r;
67
+ e.preventDefault(), (r = this.closest("form")) == null || r.submit();
68
68
  }), this.$el.type === "reset" && this.addEventListener("click", (e) => {
69
- var o;
70
- e.preventDefault(), (o = this.closest("form")) == null || o.reset();
69
+ var r;
70
+ e.preventDefault(), (r = this.closest("form")) == null || r.reset();
71
71
  });
72
72
  }
73
73
  disconnectedCallback() {
74
74
  }
75
- attributeChangedCallback(t, e, o) {
76
- if (e !== o)
75
+ attributeChangedCallback(t, e, r) {
76
+ if (e !== r)
77
77
  switch (t) {
78
78
  case "variant":
79
- this.updateVariant(e, o);
79
+ this.updateVariant(e, r);
80
80
  break;
81
81
  case "state":
82
- this.updateState(e, o);
82
+ this.updateState(e, r);
83
83
  break;
84
84
  case "extended":
85
85
  case "extended--mobile":
86
86
  case "extended--tablet":
87
87
  case "extended--laptop":
88
88
  case "extended--desktop":
89
- this.updateExtended(t, o);
89
+ this.updateExtended(t, r);
90
90
  break;
91
91
  case "loading":
92
92
  this.updateLoading();
93
93
  break;
94
94
  case "disabled":
95
- super.attributeChangedCallback(t, e, o);
95
+ super.attributeChangedCallback(t, e, r);
96
96
  break;
97
97
  case "shape":
98
98
  case "shape--mobile":
99
99
  case "shape--tablet":
100
100
  case "shape--laptop":
101
101
  case "shape--desktop":
102
- this.updateShape(t, o, Jt);
102
+ this.updateShape(t, r, Qt);
103
103
  break;
104
104
  case "aria-expanded":
105
- o && (this.$el.setAttribute("aria-expanded", o), this.removeAttribute("aria-expanded"));
105
+ r && (this.$el.setAttribute("aria-expanded", r), this.removeAttribute("aria-expanded"));
106
106
  break;
107
107
  default:
108
- super.attributeChangedCallback(t, e, o);
108
+ super.attributeChangedCallback(t, e, r);
109
109
  break;
110
110
  }
111
111
  }
112
112
  checkClass(t) {
113
113
  if (t.startsWith("patch-")) {
114
114
  const e = t.split(/-(.*)/s);
115
- for (const o of e)
116
- o != "" && this.$el.classList.toggle(o);
115
+ for (const r of e)
116
+ r != "" && this.$el.classList.toggle(r);
117
117
  } else
118
118
  this.$el.classList.toggle(t);
119
119
  }
@@ -121,14 +121,14 @@ const Ut = [
121
121
  t !== null && t !== "" && t !== "default" && this.checkClass(t), e !== null && e !== "" && e !== "default" && this.checkClass(e);
122
122
  }
123
123
  updateVariant(t, e) {
124
- e === "link" ? this.$el.classList.remove("btn") : this.$el.classList.add("btn"), this._toggleClass(t, e), this.checkName(Ut, e) || d(
125
- `${e} is not a valid "variant" value for ${this.tagName.toLowerCase()}`
124
+ e === "link" ? this.$el.classList.remove("btn") : this.$el.classList.add("btn"), this._toggleClass(t, e), this.checkName(dt, e) || d(
125
+ `"${e}" is not a valid variant value for ${this.tagName.toLowerCase()}. Allowed values are: "${dt.join('", "')}".`
126
126
  );
127
127
  }
128
128
  updateState(t, e) {
129
- const o = ["", "default", "success", "error"];
130
- this._toggleClass(t, e), this.checkName(o, e) || d(
131
- `${e} is not a valid "sate" value for ${this.tagName.toLowerCase()}`
129
+ const r = ["", "default", "success", "error"];
130
+ this._toggleClass(t, e), this.checkName(r, e) || d(
131
+ `"${e}" is not a valid state value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join('", "')}".`
132
132
  );
133
133
  }
134
134
  updateExtended(t, e) {
@@ -138,10 +138,10 @@ const Ut = [
138
138
  const t = this.querySelector("px-spinner");
139
139
  t && (t.getAttribute("size") || t.setAttribute("size", "xs")), this.$el.classList.toggle("loading");
140
140
  }
141
- updateShape(t, e, o) {
142
- if (!w(o, e)) {
141
+ updateShape(t, e, r) {
142
+ if (!w(r, e)) {
143
143
  d(
144
- `${e} is not a valid shape value for ${this.tagName.toLowerCase()}`
144
+ `"${e}" is not a valid shape value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join('", "')}".`
145
145
  );
146
146
  return;
147
147
  }
@@ -238,19 +238,19 @@ const Ut = [
238
238
  t ? this.setAttribute("aria-expanded", t) : this.removeAttribute("aria-expanded");
239
239
  }
240
240
  };
241
- Z.nativeName = "button";
242
- let C = Z;
241
+ U.nativeName = "button";
242
+ let C = U;
243
243
  customElements.get("px-button") || customElements.define("px-button", C);
244
- var x, T, mt;
245
- class Qt extends C {
244
+ var x, T, At;
245
+ class Vt extends C {
246
246
  constructor() {
247
247
  super();
248
248
  c(this, T);
249
249
  c(this, x);
250
- this.$el.classList.remove("btn"), this.$el.classList.add("wrapper"), k(this, x, new at(
250
+ this.$el.classList.remove("btn"), this.$el.classList.add("wrapper"), k(this, x, new bt(
251
251
  this,
252
252
  this.$el,
253
- () => P(this, T, mt).call(this)
253
+ () => j(this, T, At).call(this)
254
254
  ));
255
255
  }
256
256
  connectedCallback() {
@@ -259,26 +259,26 @@ class Qt extends C {
259
259
  disconnectedCallback() {
260
260
  super.disconnectedCallback(), n(this, x).disconnect();
261
261
  }
262
- attributeChangedCallback(e, o, r) {
263
- if (o !== r)
262
+ attributeChangedCallback(e, r, o) {
263
+ if (r !== o)
264
264
  switch (e) {
265
265
  case "loading":
266
- super.attributeChangedCallback(e, o, r), r !== null && n(this, x).clearInteractiveState();
266
+ super.attributeChangedCallback(e, r, o), o !== null && n(this, x).clearInteractiveState();
267
267
  break;
268
268
  case "disabled":
269
- super.attributeChangedCallback(e, o, r), r !== null && n(this, x).clearInteractiveState();
269
+ super.attributeChangedCallback(e, r, o), o !== null && n(this, x).clearInteractiveState();
270
270
  break;
271
271
  default:
272
- super.attributeChangedCallback(e, o, r);
272
+ super.attributeChangedCallback(e, r, o);
273
273
  break;
274
274
  }
275
275
  }
276
276
  }
277
- x = new WeakMap(), T = new WeakSet(), mt = function() {
277
+ x = new WeakMap(), T = new WeakSet(), At = function() {
278
278
  return !this.hasAttribute("disabled") && !this.$el.hasAttribute("disabled") && this.getAttribute("aria-disabled") !== "true" && this.$el.getAttribute("aria-disabled") !== "true" && !this.hasAttribute("loading");
279
279
  };
280
- customElements.get("px-button-wrapper") || customElements.define("px-button-wrapper", Qt);
281
- class Vt extends HTMLElement {
280
+ customElements.get("px-button-wrapper") || customElements.define("px-button-wrapper", Vt);
281
+ class te extends HTMLElement {
282
282
  constructor() {
283
283
  super();
284
284
  }
@@ -311,8 +311,8 @@ class Vt extends HTMLElement {
311
311
  t && t.remove();
312
312
  }
313
313
  }
314
- customElements.get("px-icon-set") || customElements.define("px-icon-set", Vt);
315
- const te = [
314
+ customElements.get("px-icon-set") || customElements.define("px-icon-set", te);
315
+ const ee = [
316
316
  "Brand",
317
317
  "Accent",
318
318
  "Neutral",
@@ -325,21 +325,21 @@ const te = [
325
325
  "StateHover",
326
326
  "StateActive",
327
327
  "StateDisabled"
328
- ], ee = ["Inherit", ...te].map(
328
+ ], re = ["Inherit", ...ee].map(
329
329
  (s) => s.replace(/([A-Z])/g, "-$1").toLowerCase().slice(1)
330
- ), oe = ":host{display:inline-flex;flex-direction:column;justify-content:center}svg{font-size:var(--px-size-icon-s);line-height:var(--px-font-line-height-xs);width:1em;height:1em;color:var(--px-color-icon-accent-default)}.inherit{color:inherit}.brand{color:var(--px-color-icon-brand-default)}.accent{color:var(--px-color-icon-accent-default)}.neutral{color:var(--px-color-icon-neutral-default)}.dimmed{color:var(--px-color-icon-dimmed-default)}.purpose-success{color:var(--px-color-icon-purpose-success-default)}.purpose-warning{color:var(--px-color-icon-purpose-warning-default)}.purpose-error{color:var(--px-color-icon-purpose-error-default)}.purpose-unlimited{color:var(--px-color-icon-purpose-unlimited-default)}.purpose-promo{color:var(--px-color-icon-purpose-promo-default)}.state-hover:hover{color:var(--px-color-icon-state-hover-default)}.state-active:active{color:var(--px-color-icon-state-active-default)}.state-disabled{color:var(--px-color-icon-state-disabled-default)}:host([inverted]) svg{color:var(--px-color-icon-accent-inverted)}:host([inverted]) .inherit{color:inherit}:host([inverted]) .brand{color:var(--px-color-icon-brand-inverted)}:host([inverted]) .accent{color:var(--px-color-icon-accent-inverted)}:host([inverted]) .neutral{color:var(--px-color-icon-neutral-inverted)}:host([inverted]) .dimmed{color:var(--px-color-icon-dimmed-inverted)}:host([inverted]) .purpose-success{color:var(--px-color-icon-purpose-success-inverted)}:host([inverted]) .purpose-warning{color:var(--px-color-icon-purpose-warning-inverted)}:host([inverted]) .purpose-error{color:var(--px-color-icon-purpose-error-inverted)}:host([inverted]) .purpose-unlimited{color:var(--px-color-icon-purpose-unlimited-inverted)}:host([inverted]) .purpose-promo{color:var(--px-color-icon-purpose-promo-inverted)}:host([inverted]) .state-hover:hover{color:var(--px-color-icon-state-hover-inverted)}:host([inverted]) .state-active:active{color:var(--px-color-icon-state-active-inverted)}:host([inverted]) .state-disabled{color:var(--px-color-icon-state-disabled-inverted)}.size-xs{font-size:var(--px-size-icon-xs)}.size-s{font-size:var(--px-size-icon-s)}.size-m{font-size:var(--px-size-icon-m)}.size-l{font-size:var(--px-size-icon-l)}.size-xl{font-size:var(--px-size-icon-xl)}", ft = new CSSStyleSheet();
331
- ft.replaceSync(oe);
330
+ ), oe = ":host{display:inline-flex;flex-direction:column;justify-content:center}svg{font-size:var(--px-size-icon-s);line-height:var(--px-font-line-height-xs);width:1em;height:1em;color:var(--px-color-icon-accent-default)}.inherit{color:inherit}.brand{color:var(--px-color-icon-brand-default)}.accent{color:var(--px-color-icon-accent-default)}.neutral{color:var(--px-color-icon-neutral-default)}.dimmed{color:var(--px-color-icon-dimmed-default)}.purpose-success{color:var(--px-color-icon-purpose-success-default)}.purpose-warning{color:var(--px-color-icon-purpose-warning-default)}.purpose-error{color:var(--px-color-icon-purpose-error-default)}.purpose-unlimited{color:var(--px-color-icon-purpose-unlimited-default)}.purpose-promo{color:var(--px-color-icon-purpose-promo-default)}.state-hover:hover{color:var(--px-color-icon-state-hover-default)}.state-active:active{color:var(--px-color-icon-state-active-default)}.state-disabled{color:var(--px-color-icon-state-disabled-default)}:host([inverted]) svg{color:var(--px-color-icon-accent-inverted)}:host([inverted]) .inherit{color:inherit}:host([inverted]) .brand{color:var(--px-color-icon-brand-inverted)}:host([inverted]) .accent{color:var(--px-color-icon-accent-inverted)}:host([inverted]) .neutral{color:var(--px-color-icon-neutral-inverted)}:host([inverted]) .dimmed{color:var(--px-color-icon-dimmed-inverted)}:host([inverted]) .purpose-success{color:var(--px-color-icon-purpose-success-inverted)}:host([inverted]) .purpose-warning{color:var(--px-color-icon-purpose-warning-inverted)}:host([inverted]) .purpose-error{color:var(--px-color-icon-purpose-error-inverted)}:host([inverted]) .purpose-unlimited{color:var(--px-color-icon-purpose-unlimited-inverted)}:host([inverted]) .purpose-promo{color:var(--px-color-icon-purpose-promo-inverted)}:host([inverted]) .state-hover:hover{color:var(--px-color-icon-state-hover-inverted)}:host([inverted]) .state-active:active{color:var(--px-color-icon-state-active-inverted)}:host([inverted]) .state-disabled{color:var(--px-color-icon-state-disabled-inverted)}.size-xs{font-size:var(--px-size-icon-xs)}.size-s{font-size:var(--px-size-icon-s)}.size-m{font-size:var(--px-size-icon-m)}.size-l{font-size:var(--px-size-icon-l)}.size-xl{font-size:var(--px-size-icon-xl)}", zt = new CSSStyleSheet();
331
+ zt.replaceSync(oe);
332
332
  var m, b, E;
333
- class re extends st {
333
+ class ie extends X {
334
334
  constructor(...e) {
335
- var o;
336
- super(...e, ft);
335
+ var r;
336
+ super(...e, zt);
337
337
  c(this, m);
338
338
  c(this, b);
339
339
  c(this, E, () => `<svg aria-hidden="true">
340
340
  <use></use>
341
341
  </svg>`);
342
- this.shadowRoot.innerHTML = n(this, E).call(this), k(this, b, (o = this.attachInternals) == null ? void 0 : o.call(this)), n(this, b) && (n(this, b).role = "img");
342
+ this.shadowRoot.innerHTML = n(this, E).call(this), k(this, b, (r = this.attachInternals) == null ? void 0 : r.call(this)), n(this, b) && (n(this, b).role = "img");
343
343
  }
344
344
  static get observedAttributes() {
345
345
  return [
@@ -353,17 +353,17 @@ class re extends st {
353
353
  "disabled"
354
354
  ];
355
355
  }
356
- attributeChangedCallback(e, o, r) {
357
- if (o !== r)
356
+ attributeChangedCallback(e, r, o) {
357
+ if (r !== o)
358
358
  switch (e) {
359
359
  case "name":
360
- this.updateName(o, r);
360
+ this.updateName(r, o);
361
361
  break;
362
362
  case "size":
363
- this.updateAttribute(e, o, r, qt);
363
+ this.updateAttribute(e, r, o, _t);
364
364
  break;
365
365
  case "color":
366
- this.updateAttribute(e, o, r, ee);
366
+ this.updateAttribute(e, r, o, re);
367
367
  break;
368
368
  case "disabled":
369
369
  this.color = "state-disabled";
@@ -371,7 +371,7 @@ class re extends st {
371
371
  case "aria-label":
372
372
  if (!n(this, b))
373
373
  return;
374
- r ? (n(this, b).ariaHidden = "false", this.ariaHidden = "false") : (n(this, b).ariaHidden = "true", this.ariaHidden = "true");
374
+ o ? (n(this, b).ariaHidden = "false", this.ariaHidden = "false") : (n(this, b).ariaHidden = "true", this.ariaHidden = "true");
375
375
  break;
376
376
  }
377
377
  }
@@ -379,27 +379,27 @@ class re extends st {
379
379
  this.role = "img";
380
380
  const e = document.querySelectorAll("px-icon-set");
381
381
  e || console.log("<px-icon-set> component not found");
382
- for (const o of e) {
383
- if (!o.getAttribute("name") || !o.getAttribute("src")) {
382
+ for (const r of e) {
383
+ if (!r.getAttribute("name") || !r.getAttribute("src")) {
384
384
  console.error("Icon name or src not found");
385
385
  continue;
386
386
  }
387
- o.getAttribute("name") === this.from && o.getAttribute("type") !== "font" && (k(this, m, o.getAttribute("src")), this.$el.firstElementChild.setAttribute(
387
+ r.getAttribute("name") === this.from && r.getAttribute("type") !== "font" && (k(this, m, r.getAttribute("src")), this.$el.firstElementChild.setAttribute(
388
388
  "href",
389
389
  `${n(this, m)}#icon-${this.name}`
390
390
  ));
391
391
  }
392
392
  !this.ariaLabel && n(this, b) && (n(this, b).ariaHidden = "true", this.ariaHidden = "true");
393
393
  }
394
- updateAttribute(e, o, r, i) {
395
- o !== null && o !== "" && (e === "size" ? this.$el.classList.toggle(`${e}-${o}`) : this.$el.classList.toggle(o)), r !== null && r !== "" && (e === "size" ? this.$el.classList.toggle(`${e}-${r}`) : this.$el.classList.toggle(r)), this.checkName(i, r) || d(
396
- `${r} is not an allowed ${e} value for ${this.tagName.toLowerCase()}`
394
+ updateAttribute(e, r, o, i) {
395
+ r !== null && r !== "" && (e === "size" ? this.$el.classList.toggle(`${e}-${r}`) : this.$el.classList.toggle(r)), o !== null && o !== "" && (e === "size" ? this.$el.classList.toggle(`${e}-${o}`) : this.$el.classList.toggle(o)), this.checkName(i, o) || d(
396
+ `${o} is not an allowed ${e} value for ${this.tagName.toLowerCase()}`
397
397
  );
398
398
  }
399
- updateName(e, o) {
399
+ updateName(e, r) {
400
400
  n(this, m) && this.$el.firstElementChild.setAttribute(
401
401
  "href",
402
- `${n(this, m)}#icon-${o}`
402
+ `${n(this, m)}#icon-${r}`
403
403
  );
404
404
  }
405
405
  get $el() {
@@ -449,17 +449,17 @@ class re extends st {
449
449
  }
450
450
  }
451
451
  m = new WeakMap(), b = new WeakMap(), E = new WeakMap();
452
- customElements.get("px-icon") || customElements.define("px-icon", re);
453
- const kt = "h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{margin:0;font-family:var(--px-font-family);color:var(--heading-color-default, var(--px-color-text-brand-default));text-align:var(--heading-text-align--mobile, left);font-size:var(--px-text-size-heading-s-mobile);line-height:var(--px-line-height-ratio-l);font-weight:var(--px-font-weight-title)}::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6){margin-bottom:var(--px-spacing-heading-to-content-mobile)}:host([inverted]) h1,:host([inverted]) .style-title-4xl,:host([inverted]) ::slotted(h1),:host([inverted]) h2,:host([inverted]) .style-title-3xl,:host([inverted]) ::slotted(h2),:host([inverted]) h3,:host([inverted]) .style-title-2xl,:host([inverted]) ::slotted(h3),:host([inverted]) h4,:host([inverted]) .style-title-xl,:host([inverted]) ::slotted(h4),:host([inverted]) h5,:host([inverted]) .style-title-l,:host([inverted]) ::slotted(h5),:host([inverted]) h6,:host([inverted]) .style-title-m,:host([inverted]) ::slotted(h6),:host([inverted]) .style-title-s,:host([inverted]) .style-subtitle{color:var(--heading-color-inverted, var(--px-color-text-brand-inverted))}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-heading-4xl-mobile);line-height:var(--px-line-height-ratio-s);font-weight:var(--px-font-weight-title-large)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-3xl-mobile);line-height:var(--px-line-height-ratio-s);font-weight:var(--px-font-weight-title-large)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-2xl-mobile);line-height:var(--px-line-height-ratio-s)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-xl-mobile)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-heading-l-mobile)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-heading-m-mobile)}.style-subtitle{font-size:var(--px-text-size-heading-xl-mobile);font-weight:var(--px-font-weight-subtitle)}.style-title-s{font-size:var(--px-text-size-heading-s-mobile)}@media only screen and (min-width: 48em){::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6){margin-bottom:var(--px-spacing-heading-to-content-tablet)}h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{text-align:var(--heading-text-align--tablet, left)}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-heading-4xl-tablet)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-3xl-tablet)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-2xl-tablet)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-xl-tablet)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-heading-l-tablet)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-heading-m-tablet)}.style-title-s{font-size:var(--px-text-size-heading-s-tablet)}.style-subtitle{font-size:var(--px-text-size-heading-xl-tablet)}}@media only screen and (min-width: 64.0625em){::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6){margin-bottom:var(--px-spacing-heading-to-content-laptop)}h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{text-align:var(--heading-text-align--laptop, left)}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-heading-4xl-laptop)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-3xl-laptop)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-2xl-laptop)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-xl-laptop)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-heading-l-laptop)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-heading-m-laptop)}.style-title-s{font-size:var(--px-text-size-heading-s-laptop)}.style-subtitle{font-size:var(--px-text-size-heading-xl-laptop)}}@media only screen and (min-width: 90.0625em){::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6){margin-bottom:var(--px-spacing-heading-to-content-desktop)}h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{text-align:var(--heading-text-align--desktop, left)}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-heading-4xl-desktop)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-3xl-desktop)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-2xl-desktop)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-xl-desktop)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-heading-l-desktop)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-heading-m-desktop)}.style-title-s{font-size:var(--px-text-size-heading-s-desktop)}.style-subtitle{font-size:var(--px-text-size-heading-xl-desktop)}}", X = ".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)}", yt = new CSSStyleSheet();
454
- yt.replaceSync(kt);
455
- const At = new CSSStyleSheet();
456
- At.replaceSync(X);
452
+ customElements.get("px-icon") || customElements.define("px-icon", ie);
453
+ const wt = "h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{margin:0;font-family:var(--px-font-family);color:var(--heading-color-default, var(--px-color-text-brand-default));text-align:var(--heading-text-align--mobile, left);font-size:var(--px-text-size-heading-s-mobile);line-height:var(--px-line-height-ratio-l);font-weight:var(--px-font-weight-title)}::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6){margin-bottom:var(--px-spacing-heading-to-content-mobile)}:host([inverted]) h1,:host([inverted]) .style-title-4xl,:host([inverted]) ::slotted(h1),:host([inverted]) h2,:host([inverted]) .style-title-3xl,:host([inverted]) ::slotted(h2),:host([inverted]) h3,:host([inverted]) .style-title-2xl,:host([inverted]) ::slotted(h3),:host([inverted]) h4,:host([inverted]) .style-title-xl,:host([inverted]) ::slotted(h4),:host([inverted]) h5,:host([inverted]) .style-title-l,:host([inverted]) ::slotted(h5),:host([inverted]) h6,:host([inverted]) .style-title-m,:host([inverted]) ::slotted(h6),:host([inverted]) .style-title-s,:host([inverted]) .style-subtitle{color:var(--heading-color-inverted, var(--px-color-text-brand-inverted))}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-heading-4xl-mobile);line-height:var(--px-line-height-ratio-s);font-weight:var(--px-font-weight-title-large)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-3xl-mobile);line-height:var(--px-line-height-ratio-s);font-weight:var(--px-font-weight-title-large)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-2xl-mobile);line-height:var(--px-line-height-ratio-s)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-xl-mobile)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-heading-l-mobile)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-heading-m-mobile)}.style-subtitle{font-size:var(--px-text-size-heading-xl-mobile);font-weight:var(--px-font-weight-subtitle)}.style-title-s{font-size:var(--px-text-size-heading-s-mobile)}@media screen and (min-width: 48rem){::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6){margin-bottom:var(--px-spacing-heading-to-content-tablet)}h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{text-align:var(--heading-text-align--tablet, left)}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-heading-4xl-tablet)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-3xl-tablet)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-2xl-tablet)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-xl-tablet)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-heading-l-tablet)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-heading-m-tablet)}.style-title-s{font-size:var(--px-text-size-heading-s-tablet)}.style-subtitle{font-size:var(--px-text-size-heading-xl-tablet)}}@media screen and (min-width: 64.0625rem){::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6){margin-bottom:var(--px-spacing-heading-to-content-laptop)}h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{text-align:var(--heading-text-align--laptop, left)}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-heading-4xl-laptop)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-3xl-laptop)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-2xl-laptop)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-xl-laptop)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-heading-l-laptop)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-heading-m-laptop)}.style-title-s{font-size:var(--px-text-size-heading-s-laptop)}.style-subtitle{font-size:var(--px-text-size-heading-xl-laptop)}}@media screen and (min-width: 90.0625rem){::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6){margin-bottom:var(--px-spacing-heading-to-content-desktop)}h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{text-align:var(--heading-text-align--desktop, left)}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-heading-4xl-desktop)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-3xl-desktop)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-2xl-desktop)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-xl-desktop)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-heading-l-desktop)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-heading-m-desktop)}.style-title-s{font-size:var(--px-text-size-heading-s-desktop)}.style-subtitle{font-size:var(--px-text-size-heading-xl-desktop)}}", K = ".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 (min-width: 48rem){.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 screen and (min-width: 64.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)}", $t = new CSSStyleSheet();
454
+ $t.replaceSync(wt);
455
+ const St = new CSSStyleSheet();
456
+ St.replaceSync(K);
457
457
  class A extends $ {
458
458
  template() {
459
459
  return "<slot></slot>";
460
460
  }
461
461
  constructor(t) {
462
- super(yt, At);
462
+ super($t, St);
463
463
  const e = document.createElement(t);
464
464
  e.innerHTML = this.template(), this.shadowRoot.appendChild(e);
465
465
  }
@@ -477,43 +477,43 @@ class A extends $ {
477
477
  "auto-spacing"
478
478
  ];
479
479
  }
480
- attributeChangedCallback(t, e, o) {
481
- if (e !== o)
480
+ attributeChangedCallback(t, e, r) {
481
+ if (e !== r)
482
482
  switch (t) {
483
483
  case "variant":
484
- this.updateAttribute(t, e, o, dt);
484
+ this.updateAttribute(t, e, r, ht);
485
485
  break;
486
486
  case "color":
487
- this.updateColor(e, o, Y);
487
+ this.updateColor(e, r, Z);
488
488
  break;
489
489
  case "text-align":
490
490
  case "text-align--mobile":
491
491
  case "text-align--tablet":
492
492
  case "text-align--laptop":
493
493
  case "text-align--desktop":
494
- this.updateTextAlign(t, e, o, nt);
494
+ this.updateTextAlign(t, e, r, ct);
495
495
  break;
496
496
  default:
497
- super.attributeChangedCallback(t, e, o);
497
+ super.attributeChangedCallback(t, e, r);
498
498
  break;
499
499
  }
500
500
  }
501
501
  toggleClass(t, e) {
502
502
  t !== null && t !== "" && t !== "default" && this.$el.classList.toggle(`style-${t}`), e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`style-${e}`);
503
503
  }
504
- updateAttribute(t, e, o, r) {
505
- this.checkName(r, o) ? this.toggleClass(e, o) : d(
506
- `${o} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
504
+ updateAttribute(t, e, r, o) {
505
+ this.checkName(o, r) ? this.toggleClass(e, r) : d(
506
+ `"${r}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${o.join('", "')}".`
507
507
  );
508
508
  }
509
- updateColor(t, e, o) {
510
- if (!this.checkName(o, e)) {
509
+ updateColor(t, e, r) {
510
+ if (!this.checkName(r, e)) {
511
511
  d(
512
- `${e} is not an allowed color value for ${this.tagName.toLowerCase()}`
512
+ `"${e}" is not a valid color value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join('", "')}".`
513
513
  );
514
514
  return;
515
515
  }
516
- const r = (i) => {
516
+ const o = (i) => {
517
517
  i !== null && i !== "" && i !== "default" && (this.$el.style.setProperty(
518
518
  "--heading-color-default",
519
519
  `var(--px-color-text-${i}-default)`
@@ -522,12 +522,12 @@ class A extends $ {
522
522
  `var(--px-color-text-${i}-inverted)`
523
523
  ));
524
524
  };
525
- r(t), r(e);
525
+ o(t), o(e);
526
526
  }
527
- updateTextAlign(t, e, o, r) {
528
- if (!this.checkName(r, o)) {
527
+ updateTextAlign(t, e, r, o) {
528
+ if (!this.checkName(o, r)) {
529
529
  d(
530
- `${o} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
530
+ `"${r}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${o.join('", "')}".`
531
531
  );
532
532
  return;
533
533
  }
@@ -539,11 +539,11 @@ class A extends $ {
539
539
  };
540
540
  if (t === "text-align")
541
541
  ["mobile", "tablet", "laptop", "desktop"].forEach((a) => {
542
- i(a, e), i(a, o);
542
+ i(a, e), i(a, r);
543
543
  });
544
544
  else {
545
545
  const a = t.split("--")[1];
546
- i(a, e), i(a, o);
546
+ i(a, e), i(a, r);
547
547
  }
548
548
  }
549
549
  get variant() {
@@ -601,62 +601,62 @@ class A extends $ {
601
601
  t ? this.setAttribute("auto-spacing", "") : this.removeAttribute("auto-spacing");
602
602
  }
603
603
  }
604
- const K = class K extends A {
604
+ const J = class J extends A {
605
605
  constructor() {
606
606
  super("h1");
607
607
  }
608
608
  };
609
- K.nativeName = "h1";
610
- let H = K;
609
+ J.nativeName = "h1";
610
+ let H = J;
611
611
  customElements.get("px-h1") || customElements.define("px-h1", H);
612
- const U = class U extends A {
612
+ const Q = class Q extends A {
613
613
  constructor() {
614
614
  super("h2");
615
615
  }
616
616
  };
617
- U.nativeName = "h2";
618
- let O = U;
617
+ Q.nativeName = "h2";
618
+ let O = Q;
619
619
  customElements.get("px-h2") || customElements.define("px-h2", O);
620
- const J = class J extends A {
620
+ const V = class V extends A {
621
621
  constructor() {
622
622
  super("h3");
623
623
  }
624
624
  };
625
- J.nativeName = "h3";
626
- let q = J;
625
+ V.nativeName = "h3";
626
+ let q = V;
627
627
  customElements.get("px-h3") || customElements.define("px-h3", q);
628
- const Q = class Q extends A {
628
+ const tt = class tt extends A {
629
629
  constructor() {
630
630
  super("h4");
631
631
  }
632
632
  };
633
- Q.nativeName = "h4";
634
- let D = Q;
633
+ tt.nativeName = "h4";
634
+ let D = tt;
635
635
  customElements.get("px-h4") || customElements.define("px-h4", D);
636
- const V = class V extends A {
636
+ const et = class et extends A {
637
637
  constructor() {
638
638
  super("h5");
639
639
  }
640
640
  };
641
- V.nativeName = "h5";
642
- let j = V;
643
- customElements.get("px-h5") || customElements.define("px-h5", j);
644
- const tt = class tt extends A {
641
+ et.nativeName = "h5";
642
+ let N = et;
643
+ customElements.get("px-h5") || customElements.define("px-h5", N);
644
+ const rt = class rt extends A {
645
645
  constructor() {
646
646
  super("h6");
647
647
  }
648
648
  };
649
- tt.nativeName = "h6";
650
- let N = tt;
651
- customElements.get("px-h6") || customElements.define("px-h6", N);
652
- const ie = ".separator{--separator-size: var(--px-size-border-m);--separator-direction--mobile-border-width: var(--separator-size) 0 0;--separator-direction--mobile-width: initial;--separator-direction--mobile-height: initial;clear:both;margin:0;border-style:solid;border-color:var( --separator-color-default, var(--px-color-border-main-default) );border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator-direction-horizontal--mobile{border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator-direction-vertical--mobile{width:var(--separator-size);height:100%;border-width:0 var(--separator-size) 0 0}:host([inverted]) .separator{border-color:var( --separator-color-inverted, var(--px-color-border-main-inverted) )}@media only screen and (min-width: 768px){.separator-direction-horizontal--tablet{border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator-direction-vertical--tablet{width:var(--separator-size);height:100%;border-width:0 var(--separator-size) 0 0}}@media only screen and (min-width: 1025px){.separator-direction-horizontal--laptop{border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator-direction-vertical--laptop{width:var(--separator-size);height:100%;border-width:0 var(--separator-size) 0 0}}@media only screen and (min-width: 1441px){.separator-direction-horizontal--desktop{border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator-direction-vertical--desktop{width:var(--separator-size);height:100%;border-width:0 var(--separator-size) 0 0}}", zt = new CSSStyleSheet();
653
- zt.replaceSync(ie);
654
- const ae = [
649
+ rt.nativeName = "h6";
650
+ let _ = rt;
651
+ customElements.get("px-h6") || customElements.define("px-h6", _);
652
+ const ae = ".separator{--separator-size: var(--px-size-border-m);--separator-direction--mobile-border-width: var(--separator-size) 0 0;--separator-direction--mobile-width: initial;--separator-direction--mobile-height: initial;clear:both;margin:0;border-style:solid;border-color:var( --separator-color-default, var(--px-color-border-main-default) );border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator-direction-horizontal--mobile{border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator-direction-vertical--mobile{width:var(--separator-size);height:100%;border-width:0 var(--separator-size) 0 0}:host([inverted]) .separator{border-color:var( --separator-color-inverted, var(--px-color-border-main-inverted) )}@media screen and (min-width: 48rem){.separator-direction-horizontal--tablet{border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator-direction-vertical--tablet{width:var(--separator-size);height:100%;border-width:0 var(--separator-size) 0 0}}@media screen and (min-width: 64.0625rem){.separator-direction-horizontal--laptop{border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator-direction-vertical--laptop{width:var(--separator-size);height:100%;border-width:0 var(--separator-size) 0 0}}@media screen and (min-width: 90.0625rem){.separator-direction-horizontal--desktop{border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator-direction-vertical--desktop{width:var(--separator-size);height:100%;border-width:0 var(--separator-size) 0 0}}", Ct = new CSSStyleSheet();
653
+ Ct.replaceSync(ae);
654
+ const se = [
655
655
  "",
656
656
  "default",
657
657
  "horizontal",
658
658
  "vertical"
659
- ], se = ["", "default", "none", "s", "m", "l"], ne = [
659
+ ], ne = ["", "default", "none", "s", "m", "l"], de = [
660
660
  "",
661
661
  "main",
662
662
  "brand",
@@ -671,7 +671,7 @@ const ae = [
671
671
  ], B = class B extends $ {
672
672
  constructor() {
673
673
  var e;
674
- super(zt);
674
+ super(Ct);
675
675
  const t = document.createElement(B.nativeName);
676
676
  t.classList.add("separator"), this.internals = (e = this.attachInternals) == null ? void 0 : e.call(this), this.shadowRoot.appendChild(t);
677
677
  }
@@ -688,8 +688,8 @@ const ae = [
688
688
  "inverted"
689
689
  ];
690
690
  }
691
- attributeChangedCallback(t, e, o) {
692
- if (e !== o)
691
+ attributeChangedCallback(t, e, r) {
692
+ if (e !== r)
693
693
  switch (t) {
694
694
  case "direction":
695
695
  case "direction--mobile":
@@ -699,33 +699,33 @@ const ae = [
699
699
  this.updateDirection(
700
700
  t,
701
701
  e,
702
- o,
703
- ae
702
+ r,
703
+ se
704
704
  );
705
705
  break;
706
706
  case "size":
707
- this.updateSize(t, e, o, se);
707
+ this.updateSize(t, e, r, ne);
708
708
  break;
709
709
  case "color":
710
- this.updateColor(t, e, o, ne);
710
+ this.updateColor(t, e, r, de);
711
711
  break;
712
712
  default:
713
- super.attributeChangedCallback(t, e, o);
713
+ super.attributeChangedCallback(t, e, r);
714
714
  break;
715
715
  }
716
716
  }
717
- updateSize(t, e, o, r) {
717
+ updateSize(t, e, r, o) {
718
718
  const i = (a) => {
719
719
  a !== null && a !== "" && a !== "default" && this.$el.style.setProperty(
720
720
  "--separator-size",
721
721
  `var(--px-size-border-${a})`
722
722
  );
723
723
  };
724
- this.checkName(r, o) ? (i(e), i(o)) : d(
725
- `${o} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
724
+ this.checkName(o, r) ? (i(e), i(r)) : d(
725
+ `"${r}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${o.join('", "')}".`
726
726
  );
727
727
  }
728
- updateColor(t, e, o, r) {
728
+ updateColor(t, e, r, o) {
729
729
  const i = (a) => {
730
730
  a !== null && a !== "" && a !== "default" && (this.$el.style.setProperty(
731
731
  "--separator-color-default",
@@ -735,23 +735,23 @@ const ae = [
735
735
  `var(--px-color-border-${a}-inverted)`
736
736
  ));
737
737
  };
738
- this.checkName(r, o) ? (i(e), i(o)) : d(
739
- `${o} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
738
+ this.checkName(o, r) ? (i(e), i(r)) : d(
739
+ `"${r}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${o.join('", "')}".`
740
740
  );
741
741
  }
742
- updateDirection(t, e, o, r) {
742
+ updateDirection(t, e, r, o) {
743
743
  const i = (a, l) => {
744
744
  l !== null && l !== "" && l !== "default" && this.$el.classList.add(`separator-direction-${l}--${a}`);
745
745
  };
746
- if (!this.checkName(r, o))
746
+ if (!this.checkName(o, r))
747
747
  d(
748
- `${o} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
748
+ `"${r}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${o.join('", "')}".`
749
749
  );
750
750
  else if (t === "direction")
751
751
  ["mobile", "tablet", "laptop", "desktop"].forEach((a) => {
752
752
  Array.from(this.$el.classList).find(
753
753
  (z) => z.startsWith("separator-direction-") && z.endsWith(`--${a}`)
754
- ) || i(a, o);
754
+ ) || i(a, r);
755
755
  });
756
756
  else {
757
757
  const a = t.split("--")[1], l = Array.from(this.$el.classList).find(
@@ -759,8 +759,8 @@ const ae = [
759
759
  );
760
760
  l ? this.$el.classList.replace(
761
761
  l,
762
- `separator-direction-${o}--${a}`
763
- ) : i(a, o);
762
+ `separator-direction-${r}--${a}`
763
+ ) : i(a, r);
764
764
  }
765
765
  }
766
766
  get direction() {
@@ -813,17 +813,17 @@ const ae = [
813
813
  }
814
814
  };
815
815
  B.nativeName = "hr";
816
- let _ = B;
817
- customElements.get("px-separator") || customElements.define("px-separator", _);
818
- const de = ':host{display:block}:host,:host *{box-sizing:border-box}.content-wrapper{margin-inline:var(--px-padding-s-mobile);max-width:var(--px-content-wrapper-max-width-desktop)}@media only screen and (min-width: 77em){.content-wrapper{margin-inline:auto}}.overlapped{margin-bottom:calc(var(--px-overlapped-mobile) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-mobile)}@media only screen and (min-width: 48em){.overlapped{margin-bottom:calc(var(--px-overlapped-desktop) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-desktop)}}@media only screen and (min-width: 64.0625em){.overlapped{margin-bottom:calc(var(--px-overlapped-desktop) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-desktop)}}', le = ':host{display:block}.container{font-family:var(--px-font-family);background-color:var(--background-color);border-radius:var(--px-radius-main);box-sizing:border-box;height:100%}:host([background-image]) .container{background-image:var(--background-image)}:host([background-gradient]) .container{background-image:var(--background-gradient)}:host([inverted]) .container{background-color:var(--background-color-inverted);color:var(--px-color-text-neutral-inverted)}.border-none{border:none}.border-s{border:var(--px-size-border-s) solid var(--border-color)}.border-m{border:var(--px-size-border-m) solid var(--border-color)}.border-l{border:var(--px-size-border-l) solid var(--border-color)}.border-side-top{border-bottom-style:none;border-right-style:none;border-left-style:none}.border-side-right{border-top-style:none;border-bottom-style:none;border-left-style:none}.border-side-bottom{border-top-style:none;border-right-style:none;border-left-style:none}.border-side-left{border-top-style:none;border-right-style:none;border-bottom-style:none}.border-side-block{border-inline-style:none}.border-side-inline{border-block-style:none}:host([inverted]) .border-s,:host([inverted]) .border-m,:host([inverted]) .border-l{border-color:var(--border-color-inverted)}.border-radius-main{border-radius:var(--px-radius-main)}.border-radius-pill{border-radius:var(--px-radius-pill)}.no-border-radius-top{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all,.border-radius-none{border-radius:var(--px-radius-none)}.bgimg{background-repeat:no-repeat}.background-size-cover{background-size:cover;background-position:center center}.background-size-contain{background-size:contain}.box-shadow-none{box-shadow:none}.box-shadow-s{box-shadow:0 1px 2px #2525251f}.box-shadow-m{box-shadow:0 4px 6px -1px #25252514}.box-shadow-l{box-shadow:0 10px 15px -3px #25252514}.box-shadow-xl{box-shadow:0 20px 25px -5px #25252514}.anchored{position:relative}::slotted([slot="anchor-right"]),::slotted([slot="anchor-left"]),::slotted([slot="anchor-full"]){position:absolute;top:0}::slotted([slot="anchor-right"]),::slotted([slot="anchor-left"]){transform:translateY(-50%);z-index:3}::slotted([slot="anchor-right"]){right:var( --container-anchor-offset--mobile, var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-left"]){left:var( --container-anchor-offset--mobile, var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-full"]){transform:translateY(-100%);right:0;left:0;text-align:center;z-index:2}::slotted(px-vstack:only-of-type),::slotted(px-hstack:only-of-type),::slotted(px-stack:only-of-type),::slotted(px-grid:only-of-type){height:100%}:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--mobile)}.border-s ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-s) * -1);left:calc(var(--px-size-border-s) * -1)}.border-m ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-m) * -1);left:calc(var(--px-size-border-m) * -1)}.border-l ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-l) * -1);left:calc(var(--px-size-border-l) * -1)}:host([subgrid-rows]){display:contents}:host([subgrid-rows]) .container{display:grid;grid-template-rows:subgrid;grid-row:span var(--subgrid-rows)}:host([subgrid-rows]):host([grow]) .container{flex-grow:var(--grow-value)}:host([subgrid-rows]):host([shrink]) .container{flex-shrink:var(--shrink-value)}:host([subgrid-rows]):host([basis]) .container{flex-basis:var(--basis-value)}:host([subgrid-rows]):host([align-self]) .container{align-self:var(--align-self-value)}:host([subgrid-rows]):host([col-span]) .container{grid-column:span var(--col-span-value) / span var(--col-span-value)}:host([subgrid-rows]):host([justify-self]) .container{justify-self:var(--justify-self-value)}:host([subgrid-rows]):host([order]) .container{order:var(--order-value)}:host([subgrid-rows]):host([anchor-spacing]) .container{margin-top:var(--container-anchor-spacing--mobile)}@media only screen and (max-width: 47.938em){.container{background-color:var(--background-color--mobile, var(--background-color))}:host([background-image--mobile]) .container{background-image:var(--background-image--mobile, var(--background-image))}:host([background-gradient--mobile]) .container{background-image:var( --background-gradient--mobile, var(--background-gradient) )}:host([inverted]) .container{background-color:var( --background-color-inverted--mobile, var(--background-color-inverted) )}.border-side-top--mobile{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--mobile{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--mobile{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--mobile{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--mobile{border-inline-style:none;border-block-style:solid}.border-side-inline--mobile{border-block-style:none;border-inline-style:solid}.no-border-radius-top--mobile{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--mobile{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--mobile{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--mobile{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--mobile{border-radius:var(--px-radius-none)}:host([subgrid-rows]):host([grow--mobile]) .container{flex-grow:var(--grow--mobile-value)}:host([subgrid-rows]):host([shrink--mobile]) .container{flex-shrink:var(--shrink--mobile-value)}:host([subgrid-rows]):host([basis--mobile]) .container{flex-basis:var(--basis--mobile-value)}:host([subgrid-rows]):host([align-self--mobile]) .container{align-self:var(--align-self--mobile-value)}:host([subgrid-rows]):host([col-span--mobile]) .container{grid-column:span var(--col-span--mobile-value) / span var(--col-span--mobile-value)}:host([subgrid-rows]):host([justify-self--mobile]) .container{justify-self:var(--justify-self--mobile-value)}:host([subgrid-rows]):host([order--mobile]) .container{order:var(--order--mobile-value)}}@media only screen and (min-width: 48em) and (max-width: 64em){.container{background-color:var(--background-color--tablet, var(--background-color))}:host([background-image--tablet]) .container{background-image:var(--background-image--tablet, var(--background-image))}:host([background-gradient--tablet]) .container{background-image:var( --background-gradient--tablet, var(--background-gradient) )}:host([inverted]) .container{background-color:var( --background-color-inverted--tablet, var(--background-color-inverted) )}.no-border-radius-top--tablet{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--tablet{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--tablet{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--tablet{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--tablet{border-radius:var(--px-radius-none)}.border-side-top--tablet{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--tablet{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--tablet{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--tablet{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--tablet{border-inline-style:none;border-block-style:solid}.border-side-inline--tablet{border-block-style:none;border-inline-style:solid}::slotted([slot="anchor-right"]){right:var( --container-anchor-offset--tablet, var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-left"]){left:var( --container-anchor-offset--tablet, var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) ) )}:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--tablet)}:host([subgrid-rows]):host([col-span--tablet]) .container{grid-column:span var(--col-span--tablet-value) / span var(--col-span--tablet-value)}:host([subgrid-rows]):host([grow--tablet]) .container{flex-grow:var(--grow--tablet-value)}:host([subgrid-rows]):host([shrink--tablet]) .container{flex-shrink:var(--shrink--tablet-value)}:host([subgrid-rows]):host([basis--tablet]) .container{flex-basis:var(--basis--tablet-value)}:host([subgrid-rows]):host([align-self--tablet]) .container{align-self:var(--align-self--tablet-value)}:host([subgrid-rows]):host([justify-self--tablet]) .container{justify-self:var(--justify-self--tablet-value)}:host([subgrid-rows]):host([order--tablet]) .container{order:var(--order--tablet-value)}:host([subgrid-rows]):host([anchor-spacing]) .container{margin-top:var(--container-anchor-spacing--tablet)}}@media only screen and (min-width: 64.0625em) and (max-width: 90em){:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--laptop)}:host([subgrid-rows]):host([col-span--laptop]) .container{grid-column:span var(--col-span--laptop-value) / span var(--col-span--laptop-value)}:host([subgrid-rows]):host([grow--laptop]) .container{flex-grow:var(--grow--laptop-value)}:host([subgrid-rows]):host([shrink--laptop]) .container{flex-shrink:var(--shrink--laptop-value)}:host([subgrid-rows]):host([basis--laptop]) .container{flex-basis:var(--basis--laptop-value)}:host([subgrid-rows]):host([align-self--laptop]) .container{align-self:var(--align-self--laptop-value)}:host([subgrid-rows]):host([justify-self--laptop]) .container{justify-self:var(--justify-self--laptop-value)}:host([subgrid-rows]):host([order--laptop]) .container{order:var(--order--laptop-value)}:host([subgrid-rows]):host([anchor-spacing]) .container{margin-top:var(--container-anchor-spacing--laptop)}}@media only screen and (min-width: 64.0625em){.container{background-color:var(--background-color--laptop, var(--background-color))}:host([background-image--laptop]) .container{background-image:var(--background-image--laptop, var(--background-image))}:host([background-gradient--laptop]) .container{background-image:var( --background-gradient--laptop, var(--background-gradient) )}:host([inverted]) .container{background-color:var( --background-color-inverted--laptop, var(--background-color-inverted) )}.no-border-radius-top--laptop{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--laptop{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--laptop{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--laptop{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--laptop{border-radius:var(--px-radius-none)}::slotted([slot="anchor-right"]){right:var( --container-anchor-offset--laptop, var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-left"]){left:var( --container-anchor-offset--laptop, var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) ) )}:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--laptop)}.border-side-top--laptop{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--laptop{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--laptop{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--laptop{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--laptop{border-inline-style:none;border-block-style:solid}.border-side-inline--laptop{border-block-style:none;border-inline-style:solid}}@media screen and (min-width: 90.0625em){:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--desktop)}:host([subgrid-rows]):host([col-span--desktop]) .container{grid-column:span var(--col-span--desktop-value) / span var(--col-span--desktop-value)}:host([subgrid-rows]):host([grow--desktop]) .container{flex-grow:var(--grow--desktop-value)}:host([subgrid-rows]):host([shrink--desktop]) .container{flex-shrink:var(--shrink--desktop-value)}:host([subgrid-rows]):host([basis--desktop]) .container{flex-basis:var(--basis--desktop-value)}:host([subgrid-rows]):host([align-self--desktop]) .container{align-self:var(--align-self--desktop-value)}:host([subgrid-rows]):host([justify-self--desktop]) .container{justify-self:var(--justify-self--desktop-value)}:host([subgrid-rows]):host([order--desktop]) .container{order:var(--order--desktop-value)}:host([subgrid-rows]):host([anchor-spacing]) .container{margin-top:var(--container-anchor-spacing--desktop)}}', wt = new CSSStyleSheet();
819
- wt.replaceSync(le);
820
- const pe = [
816
+ let W = B;
817
+ customElements.get("px-separator") || customElements.define("px-separator", W);
818
+ const le = ':host{display:block}:host,:host *{box-sizing:border-box}.content-wrapper{margin-inline:var(--px-padding-s-mobile);max-width:var(--px-content-wrapper-max-width-desktop)}@media screen and (min-width: 77rem){.content-wrapper{margin-inline:auto}}.overlapped{margin-bottom:calc(var(--px-overlapped-mobile) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-mobile)}@media screen and (min-width: 48rem){.overlapped{margin-bottom:calc(var(--px-overlapped-tablet) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-tablet)}}@media screen and (min-width: 64.0625rem){.overlapped{margin-bottom:calc(var(--px-overlapped-laptop) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-laptop)}}', pe = ':host{display:block}.container{font-family:var(--px-font-family);background-color:var(--background-color);border-radius:var(--px-radius-main);box-sizing:border-box;height:100%}:host([background-image]) .container{background-image:var(--background-image)}:host([background-gradient]) .container{background-image:var(--background-gradient)}:host([inverted]) .container{background-color:var(--background-color-inverted);color:var(--px-color-text-neutral-inverted)}.border-none{border:none}.border-s{border:var(--px-size-border-s) solid var(--border-color)}.border-m{border:var(--px-size-border-m) solid var(--border-color)}.border-l{border:var(--px-size-border-l) solid var(--border-color)}.border-side-top{border-bottom-style:none;border-right-style:none;border-left-style:none}.border-side-right{border-top-style:none;border-bottom-style:none;border-left-style:none}.border-side-bottom{border-top-style:none;border-right-style:none;border-left-style:none}.border-side-left{border-top-style:none;border-right-style:none;border-bottom-style:none}.border-side-block{border-inline-style:none}.border-side-inline{border-block-style:none}:host([inverted]) .border-s,:host([inverted]) .border-m,:host([inverted]) .border-l{border-color:var(--border-color-inverted)}.border-radius-main{border-radius:var(--px-radius-main)}.border-radius-pill{border-radius:var(--px-radius-pill)}.no-border-radius-top{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all,.border-radius-none{border-radius:var(--px-radius-none)}.bgimg{background-repeat:no-repeat}.background-size-cover{background-size:cover;background-position:center center}.background-size-contain{background-size:contain}.box-shadow-none{box-shadow:none}.box-shadow-s{box-shadow:0 1px 2px #2525251f}.box-shadow-m{box-shadow:0 4px 6px -1px #25252514}.box-shadow-l{box-shadow:0 10px 15px -3px #25252514}.box-shadow-xl{box-shadow:0 20px 25px -5px #25252514}.anchored{position:relative}::slotted([slot="anchor-right"]),::slotted([slot="anchor-left"]),::slotted([slot="anchor-full"]){position:absolute;top:0}::slotted([slot="anchor-right"]),::slotted([slot="anchor-left"]){transform:translateY(-50%);z-index:3}::slotted([slot="anchor-right"]){right:var( --container-anchor-offset--mobile, var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-left"]){left:var( --container-anchor-offset--mobile, var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-full"]){transform:translateY(-100%);right:0;left:0;text-align:center;z-index:2}::slotted(px-vstack:only-of-type),::slotted(px-hstack:only-of-type),::slotted(px-stack:only-of-type),::slotted(px-grid:only-of-type){height:100%}:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--mobile)}.border-s ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-s) * -1);left:calc(var(--px-size-border-s) * -1)}.border-m ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-m) * -1);left:calc(var(--px-size-border-m) * -1)}.border-l ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-l) * -1);left:calc(var(--px-size-border-l) * -1)}:host([subgrid-rows]){display:contents}:host([subgrid-rows]) .container{display:grid;grid-template-rows:subgrid;grid-row:span var(--subgrid-rows)}:host([subgrid-rows]):host([grow]) .container{flex-grow:var(--grow-value)}:host([subgrid-rows]):host([shrink]) .container{flex-shrink:var(--shrink-value)}:host([subgrid-rows]):host([basis]) .container{flex-basis:var(--basis-value)}:host([subgrid-rows]):host([align-self]) .container{align-self:var(--align-self-value)}:host([subgrid-rows]):host([col-span]) .container{grid-column:span var(--col-span-value) / span var(--col-span-value)}:host([subgrid-rows]):host([justify-self]) .container{justify-self:var(--justify-self-value)}:host([subgrid-rows]):host([order]) .container{order:var(--order-value)}:host([subgrid-rows]):host([anchor-spacing]) .container{margin-top:var(--container-anchor-spacing--mobile)}@media screen and (max-width: 47.938rem){.container{background-color:var(--background-color--mobile, var(--background-color))}:host([background-image--mobile]) .container{background-image:var(--background-image--mobile, var(--background-image))}:host([background-gradient--mobile]) .container{background-image:var( --background-gradient--mobile, var(--background-gradient) )}:host([inverted]) .container{background-color:var( --background-color-inverted--mobile, var(--background-color-inverted) )}.border-side-top--mobile{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--mobile{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--mobile{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--mobile{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--mobile{border-inline-style:none;border-block-style:solid}.border-side-inline--mobile{border-block-style:none;border-inline-style:solid}.no-border-radius-top--mobile{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--mobile{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--mobile{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--mobile{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--mobile{border-radius:var(--px-radius-none)}:host([subgrid-rows]):host([grow--mobile]) .container{flex-grow:var(--grow--mobile-value)}:host([subgrid-rows]):host([shrink--mobile]) .container{flex-shrink:var(--shrink--mobile-value)}:host([subgrid-rows]):host([basis--mobile]) .container{flex-basis:var(--basis--mobile-value)}:host([subgrid-rows]):host([align-self--mobile]) .container{align-self:var(--align-self--mobile-value)}:host([subgrid-rows]):host([col-span--mobile]) .container{grid-column:span var(--col-span--mobile-value) / span var(--col-span--mobile-value)}:host([subgrid-rows]):host([justify-self--mobile]) .container{justify-self:var(--justify-self--mobile-value)}:host([subgrid-rows]):host([order--mobile]) .container{order:var(--order--mobile-value)}}@media screen and (min-width: 48rem) and (max-width: 64rem){.container{background-color:var(--background-color--tablet, var(--background-color))}:host([background-image--tablet]) .container{background-image:var(--background-image--tablet, var(--background-image))}:host([background-gradient--tablet]) .container{background-image:var( --background-gradient--tablet, var(--background-gradient) )}:host([inverted]) .container{background-color:var( --background-color-inverted--tablet, var(--background-color-inverted) )}.no-border-radius-top--tablet{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--tablet{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--tablet{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--tablet{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--tablet{border-radius:var(--px-radius-none)}.border-side-top--tablet{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--tablet{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--tablet{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--tablet{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--tablet{border-inline-style:none;border-block-style:solid}.border-side-inline--tablet{border-block-style:none;border-inline-style:solid}::slotted([slot="anchor-right"]){right:var( --container-anchor-offset--tablet, var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-left"]){left:var( --container-anchor-offset--tablet, var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) ) )}:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--tablet)}:host([subgrid-rows]):host([col-span--tablet]) .container{grid-column:span var(--col-span--tablet-value) / span var(--col-span--tablet-value)}:host([subgrid-rows]):host([grow--tablet]) .container{flex-grow:var(--grow--tablet-value)}:host([subgrid-rows]):host([shrink--tablet]) .container{flex-shrink:var(--shrink--tablet-value)}:host([subgrid-rows]):host([basis--tablet]) .container{flex-basis:var(--basis--tablet-value)}:host([subgrid-rows]):host([align-self--tablet]) .container{align-self:var(--align-self--tablet-value)}:host([subgrid-rows]):host([justify-self--tablet]) .container{justify-self:var(--justify-self--tablet-value)}:host([subgrid-rows]):host([order--tablet]) .container{order:var(--order--tablet-value)}:host([subgrid-rows]):host([anchor-spacing]) .container{margin-top:var(--container-anchor-spacing--tablet)}}@media screen and (min-width: 64.0625rem) and (max-width: 90rem){:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--laptop)}:host([subgrid-rows]):host([col-span--laptop]) .container{grid-column:span var(--col-span--laptop-value) / span var(--col-span--laptop-value)}:host([subgrid-rows]):host([grow--laptop]) .container{flex-grow:var(--grow--laptop-value)}:host([subgrid-rows]):host([shrink--laptop]) .container{flex-shrink:var(--shrink--laptop-value)}:host([subgrid-rows]):host([basis--laptop]) .container{flex-basis:var(--basis--laptop-value)}:host([subgrid-rows]):host([align-self--laptop]) .container{align-self:var(--align-self--laptop-value)}:host([subgrid-rows]):host([justify-self--laptop]) .container{justify-self:var(--justify-self--laptop-value)}:host([subgrid-rows]):host([order--laptop]) .container{order:var(--order--laptop-value)}:host([subgrid-rows]):host([anchor-spacing]) .container{margin-top:var(--container-anchor-spacing--laptop)}}@media screen and (min-width: 64.0625rem){.container{background-color:var(--background-color--laptop, var(--background-color))}:host([background-image--laptop]) .container{background-image:var(--background-image--laptop, var(--background-image))}:host([background-gradient--laptop]) .container{background-image:var( --background-gradient--laptop, var(--background-gradient) )}:host([inverted]) .container{background-color:var( --background-color-inverted--laptop, var(--background-color-inverted) )}.no-border-radius-top--laptop{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--laptop{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--laptop{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--laptop{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--laptop{border-radius:var(--px-radius-none)}::slotted([slot="anchor-right"]){right:var( --container-anchor-offset--laptop, var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-left"]){left:var( --container-anchor-offset--laptop, var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) ) )}:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--laptop)}.border-side-top--laptop{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--laptop{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--laptop{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--laptop{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--laptop{border-inline-style:none;border-block-style:solid}.border-side-inline--laptop{border-block-style:none;border-inline-style:solid}}@media screen and (min-width: 90.0625rem){:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--desktop)}:host([subgrid-rows]):host([col-span--desktop]) .container{grid-column:span var(--col-span--desktop-value) / span var(--col-span--desktop-value)}:host([subgrid-rows]):host([grow--desktop]) .container{flex-grow:var(--grow--desktop-value)}:host([subgrid-rows]):host([shrink--desktop]) .container{flex-shrink:var(--shrink--desktop-value)}:host([subgrid-rows]):host([basis--desktop]) .container{flex-basis:var(--basis--desktop-value)}:host([subgrid-rows]):host([align-self--desktop]) .container{align-self:var(--align-self--desktop-value)}:host([subgrid-rows]):host([justify-self--desktop]) .container{justify-self:var(--justify-self--desktop-value)}:host([subgrid-rows]):host([order--desktop]) .container{order:var(--order--desktop-value)}:host([subgrid-rows]):host([anchor-spacing]) .container{margin-top:var(--container-anchor-spacing--desktop)}}', Lt = new CSSStyleSheet();
819
+ Lt.replaceSync(pe);
820
+ const be = [
821
821
  "top-patch",
822
822
  "top-neighbor-patch",
823
823
  "top-ribbon",
824
824
  "top-neighbor-ribbon",
825
825
  "top-patch-and-neighbor-ribbon"
826
- ], be = [
826
+ ], ce = [
827
827
  "1",
828
828
  "2",
829
829
  "3",
@@ -836,7 +836,7 @@ const pe = [
836
836
  "10",
837
837
  "11",
838
838
  "12"
839
- ], g = (s, t, e) => `:host([${s}${e ? `--${e}` : ""}='${t}']) .container`, v = "px-padding", ce = [
839
+ ], g = (s, t, e) => `:host([${s}${e ? `--${e}` : ""}='${t}']) .container`, v = "px-padding", he = [
840
840
  h(
841
841
  "padding",
842
842
  g,
@@ -885,14 +885,14 @@ const pe = [
885
885
  h(
886
886
  "gap",
887
887
  g,
888
- Dt,
888
+ Wt,
889
889
  "px-spacing",
890
890
  void 0,
891
891
  "subgrid-gap"
892
892
  )
893
- ], et = class et extends st {
893
+ ], ot = class ot extends X {
894
894
  constructor() {
895
- super(wt, ...ce), this.template = () => `<div class="container">
895
+ super(Lt, ...he), this.template = () => `<div class="container">
896
896
  <slot></slot>
897
897
  <slot name="anchor-left"></slot>
898
898
  <slot name="anchor-right"></slot>
@@ -943,8 +943,8 @@ const pe = [
943
943
  characterData: !0
944
944
  }), this._bgObserver = new IntersectionObserver((t) => {
945
945
  t.forEach((e) => {
946
- var o;
947
- e.isIntersecting && (this._isInViewport = !0, this._loadBackgroundImages(), (o = this._bgObserver) == null || o.disconnect());
946
+ var r;
947
+ e.isIntersecting && (this._isInViewport = !0, this._loadBackgroundImages(), (r = this._bgObserver) == null || r.disconnect());
948
948
  });
949
949
  }), this._bgObserver.observe(this.$el);
950
950
  }
@@ -952,27 +952,27 @@ const pe = [
952
952
  var t, e;
953
953
  (t = this._bgObserver) == null || t.disconnect(), (e = this.contentObserver) == null || e.disconnect();
954
954
  }
955
- attributeChangedCallback(t, e, o) {
956
- if (e !== o)
955
+ attributeChangedCallback(t, e, r) {
956
+ if (e !== r)
957
957
  switch (t) {
958
958
  case "border":
959
- this.updateAttribute(t, e, o, Gt);
959
+ this.updateAttribute(t, e, r, Kt);
960
960
  break;
961
961
  case "border-color":
962
- this.updateBorderColor(t, o);
962
+ this.updateBorderColor(t, r);
963
963
  break;
964
964
  case "border-side":
965
965
  case "border-side--mobile":
966
966
  case "border-side--tablet":
967
967
  case "border-side--laptop":
968
- this.updateAttribute(t, e, o, Ft);
968
+ this.updateAttribute(t, e, r, Zt);
969
969
  break;
970
970
  case "border-radius":
971
971
  this.updateAttribute(
972
972
  t,
973
973
  e,
974
- o,
975
- Wt
974
+ r,
975
+ Xt
976
976
  );
977
977
  break;
978
978
  case "no-border-radius":
@@ -982,58 +982,58 @@ const pe = [
982
982
  this.updateNoBorderRadius(
983
983
  t,
984
984
  e,
985
- o,
986
- _t
985
+ r,
986
+ Yt
987
987
  );
988
988
  break;
989
989
  case "background-color":
990
990
  case "background-color--mobile":
991
991
  case "background-color--tablet":
992
992
  case "background-color--laptop":
993
- this.updateBackgroundColor(t, o);
993
+ this.updateBackgroundColor(t, r);
994
994
  break;
995
995
  case "background-gradient":
996
996
  case "background-gradient--mobile":
997
997
  case "background-gradient--tablet":
998
998
  case "background-gradient--laptop":
999
- this.updateGradient(t, o);
999
+ this.updateGradient(t, r);
1000
1000
  break;
1001
1001
  case "background-size":
1002
1002
  this.updateAttribute(
1003
1003
  t,
1004
1004
  e,
1005
- o,
1006
- Nt
1005
+ r,
1006
+ Gt
1007
1007
  );
1008
1008
  break;
1009
1009
  case "background-image":
1010
1010
  case "background-image--mobile":
1011
1011
  case "background-image--tablet":
1012
1012
  case "background-image--laptop":
1013
- this._isInViewport && this.updateBackgroundImg(t, o);
1013
+ this._isInViewport && this.updateBackgroundImg(t, r);
1014
1014
  break;
1015
1015
  case "background-position":
1016
- o !== null && o !== "" && (this.$el.style.backgroundPosition = o);
1016
+ r !== null && r !== "" && (this.$el.style.backgroundPosition = r);
1017
1017
  break;
1018
1018
  case "box-shadow":
1019
- this.updateAttribute(t, e, o, jt);
1019
+ this.updateAttribute(t, e, r, Ft);
1020
1020
  break;
1021
1021
  case "anchor-offset":
1022
- this.updateAnchorOffset(e, o, u);
1022
+ this.updateAnchorOffset(e, r, u);
1023
1023
  break;
1024
1024
  case "anchor-spacing":
1025
- this.updateAnchorSpacing(e, o, pe);
1025
+ this.updateAnchorSpacing(e, r, be);
1026
1026
  break;
1027
1027
  case "subgrid-rows":
1028
1028
  this.updateSubgridRows(
1029
1029
  t,
1030
1030
  e,
1031
- o,
1032
- be
1031
+ r,
1032
+ ce
1033
1033
  );
1034
1034
  break;
1035
1035
  default:
1036
- super.attributeChangedCallback(t, e, o);
1036
+ super.attributeChangedCallback(t, e, r);
1037
1037
  break;
1038
1038
  }
1039
1039
  }
@@ -1044,100 +1044,100 @@ const pe = [
1044
1044
  "background-image--tablet",
1045
1045
  "background-image--laptop"
1046
1046
  ].forEach((e) => {
1047
- const o = this.getAttribute(e);
1048
- o && this.updateBackgroundImg(e, o);
1047
+ const r = this.getAttribute(e);
1048
+ r && this.updateBackgroundImg(e, r);
1049
1049
  });
1050
1050
  }
1051
1051
  updateBackgroundImg(t, e) {
1052
1052
  this.$el.style.setProperty(`--${t}`, `url("${e}")`);
1053
1053
  }
1054
1054
  updateGradient(t, e) {
1055
- if (this.checkName(Yt, e)) {
1056
- const o = this.splitAttrNameFromBreakpoint(t);
1057
- t = o.attrName;
1058
- const r = o.breakpoint;
1055
+ if (this.checkName(st, e)) {
1056
+ const r = this.splitAttrNameFromBreakpoint(t);
1057
+ t = r.attrName;
1058
+ const o = r.breakpoint;
1059
1059
  this.$el.style.setProperty(
1060
- `--${t}${r}`,
1060
+ `--${t}${o}`,
1061
1061
  `linear-gradient(var(--px-color-background-gradient-${e}))`
1062
1062
  );
1063
1063
  } else
1064
1064
  d(
1065
- `${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
1065
+ `"${e}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${st.join('", "')}".`
1066
1066
  );
1067
1067
  }
1068
1068
  updateBackgroundColor(t, e) {
1069
- const o = e.startsWith("surface-");
1070
- if (this.checkName(lt, e)) {
1071
- const r = this.splitAttrNameFromBreakpoint(t), i = r.breakpoint;
1069
+ const r = e.startsWith("surface-");
1070
+ if (this.checkName(P, e)) {
1071
+ const o = this.splitAttrNameFromBreakpoint(t), i = o.breakpoint;
1072
1072
  this.$el.style.setProperty(
1073
- `--${r.attrName}${i}`,
1074
- `var(--px-color-background-${e}${o ? "" : "-default"})`
1073
+ `--${o.attrName}${i}`,
1074
+ `var(--px-color-background-${e}${r ? "" : "-default"})`
1075
1075
  ), this.$el.style.setProperty(
1076
- `--${r.attrName}-inverted${i}`,
1077
- `var(--px-color-background-${e}${o ? "" : "-inverted"})`
1076
+ `--${o.attrName}-inverted${i}`,
1077
+ `var(--px-color-background-${e}${r ? "" : "-inverted"})`
1078
1078
  );
1079
1079
  } else
1080
1080
  d(
1081
- `${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
1081
+ `"${e}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${P.join('", "')}".`
1082
1082
  );
1083
1083
  }
1084
1084
  updateBorderColor(t, e) {
1085
- this.checkName(Xt, e) ? (this.$el.style.setProperty(
1085
+ this.checkName(nt, e) ? (this.$el.style.setProperty(
1086
1086
  `--${t}`,
1087
1087
  `var(--px-color-border-${e}-default)`
1088
1088
  ), this.$el.style.setProperty(
1089
1089
  `--${t}-inverted`,
1090
1090
  `var(--px-color-border-${e}-inverted)`
1091
1091
  )) : d(
1092
- `${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
1092
+ `"${e}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${nt.join('", "')}".`
1093
1093
  );
1094
1094
  }
1095
- updateNoBorderRadius(t, e, o, r) {
1096
- if (!this.checkName(r, o))
1095
+ updateNoBorderRadius(t, e, r, o) {
1096
+ if (!this.checkName(o, r))
1097
1097
  d(
1098
- `${o} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
1098
+ `"${r}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${o.join('", "')}".`
1099
1099
  );
1100
1100
  else {
1101
1101
  const i = this.splitAttrNameFromBreakpoint(t), a = i.breakpoint;
1102
1102
  e !== null && e !== "" && this.$el.classList.toggle(
1103
1103
  `${i.attrName}-${e}${a}`
1104
- ), o !== null && o !== "" && this.$el.classList.toggle(
1105
- `${i.attrName}-${o}${a}`
1104
+ ), r !== null && r !== "" && this.$el.classList.toggle(
1105
+ `${i.attrName}-${r}${a}`
1106
1106
  );
1107
1107
  }
1108
1108
  }
1109
- updateAttribute(t, e, o, r) {
1110
- if (!this.checkName(r, o))
1109
+ updateAttribute(t, e, r, o) {
1110
+ if (!this.checkName(o, r))
1111
1111
  d(
1112
- `${o} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
1112
+ `"${r}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${o.join('", "')}".`
1113
1113
  );
1114
1114
  else {
1115
1115
  const i = this.splitAttrNameFromBreakpoint(t), a = i.breakpoint;
1116
1116
  e !== null && e !== "" && this.$el.classList.toggle(
1117
1117
  `${i.attrName}-${e}${a}`
1118
- ), o !== null && o !== "" && this.$el.classList.toggle(
1119
- `${i.attrName}-${o}${a}`
1118
+ ), r !== null && r !== "" && this.$el.classList.toggle(
1119
+ `${i.attrName}-${r}${a}`
1120
1120
  );
1121
1121
  }
1122
1122
  }
1123
1123
  splitAttrNameFromBreakpoint(t) {
1124
1124
  let e = "";
1125
1125
  if (["--mobile", "--tablet", "--laptop"].some(
1126
- (o) => t.includes(o)
1126
+ (r) => t.includes(r)
1127
1127
  )) {
1128
- const o = t.split("--");
1129
- t = o[0], e = `--${o[1]}`;
1128
+ const r = t.split("--");
1129
+ t = r[0], e = `--${r[1]}`;
1130
1130
  }
1131
1131
  return { attrName: t, breakpoint: e };
1132
1132
  }
1133
- updateAnchorOffset(t, e, o) {
1134
- if (!w(o, e)) {
1133
+ updateAnchorOffset(t, e, r) {
1134
+ if (!w(r, e)) {
1135
1135
  d(
1136
- `${e} is not a valid anchor-offset value for ${this.tagName.toLowerCase()}`
1136
+ `"${e}" is not a valid anchor-offset value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join('", "')}".`
1137
1137
  );
1138
1138
  return;
1139
1139
  }
1140
- const r = (i) => {
1140
+ const o = (i) => {
1141
1141
  i !== null && i !== "" && i !== "default" && (this.$el.style.setProperty(
1142
1142
  "--container-anchor-offset--mobile",
1143
1143
  `var(--px-padding-${i}-mobile)`
@@ -1149,19 +1149,19 @@ const pe = [
1149
1149
  `var(--px-padding-${i}-laptop)`
1150
1150
  ));
1151
1151
  };
1152
- r(t), r(e);
1152
+ o(t), o(e);
1153
1153
  }
1154
1154
  addAnchorClass() {
1155
1155
  this.$el.classList.contains("anchored") || this.$el.classList.add("anchored");
1156
1156
  }
1157
- updateAnchorSpacing(t, e, o) {
1158
- if (!w(o, e)) {
1157
+ updateAnchorSpacing(t, e, r) {
1158
+ if (!w(r, e)) {
1159
1159
  d(
1160
- `${e} is not a valid anchor-spacing value for ${this.tagName.toLowerCase()}`
1160
+ `"${e}" is not a valid anchor-spacing value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join('", "')}".`
1161
1161
  );
1162
1162
  return;
1163
1163
  }
1164
- const r = (i) => {
1164
+ const o = (i) => {
1165
1165
  i !== null && i !== "" && i !== "default" && (this.style.setProperty(
1166
1166
  "--container-anchor-spacing--mobile",
1167
1167
  `var(--px-spacing-${i}-mobile)`
@@ -1176,11 +1176,11 @@ const pe = [
1176
1176
  `var(--px-spacing-${i}-desktop)`
1177
1177
  ));
1178
1178
  };
1179
- r(t), r(e);
1179
+ o(t), o(e);
1180
1180
  }
1181
- updateSubgridRows(t, e, o, r) {
1182
- w(r, o) ? this.style.setProperty(`--${t}`, o) : d(
1183
- `${o} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
1181
+ updateSubgridRows(t, e, r, o) {
1182
+ w(o, r) ? this.style.setProperty(`--${t}`, r) : d(
1183
+ `"${r}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${o.join('", "')}".`
1184
1184
  );
1185
1185
  }
1186
1186
  get $el() {
@@ -1563,14 +1563,14 @@ const pe = [
1563
1563
  this.setAttribute("subgrid-gap--laptop", t);
1564
1564
  }
1565
1565
  };
1566
- et.nativeName = "div";
1567
- let W = et;
1568
- customElements.get("px-container") || customElements.define("px-container", W);
1569
- const $t = new CSSStyleSheet();
1570
- $t.replaceSync(de);
1571
- class he extends HTMLElement {
1566
+ ot.nativeName = "div";
1567
+ let F = ot;
1568
+ customElements.get("px-container") || customElements.define("px-container", F);
1569
+ const Tt = new CSSStyleSheet();
1570
+ Tt.replaceSync(le);
1571
+ class ge extends X {
1572
1572
  constructor() {
1573
- super(), this.template = () => `
1573
+ super(Tt), this.template = () => `
1574
1574
  <px-container border-radius="none" padding-inline="none">
1575
1575
  <div class="content-wrapper">
1576
1576
  <px-vstack gap="heading-to-content">
@@ -1584,7 +1584,7 @@ class he extends HTMLElement {
1584
1584
  <div class="content-wrapper">
1585
1585
  <slot name="overlap"></slot>
1586
1586
  </div>
1587
- `, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [$t];
1587
+ `, this.shadowRoot.innerHTML = this.template();
1588
1588
  }
1589
1589
  connectedCallback() {
1590
1590
  var t, e;
@@ -1595,6 +1595,7 @@ class he extends HTMLElement {
1595
1595
  }
1596
1596
  static get observedAttributes() {
1597
1597
  return [
1598
+ ...super.observedAttributes,
1598
1599
  "background-color",
1599
1600
  "background-gradient",
1600
1601
  "background-image",
@@ -1622,83 +1623,86 @@ class he extends HTMLElement {
1622
1623
  "border-side--laptop"
1623
1624
  ];
1624
1625
  }
1625
- attributeChangedCallback(t, e, o) {
1626
- if (e !== o)
1626
+ attributeChangedCallback(t, e, r) {
1627
+ if (e !== r)
1627
1628
  switch (t) {
1628
1629
  case "background-color":
1629
- this.$container.backgroundColor = lt.indexOf(o) > 0 ? o : "none";
1630
+ this.$container.backgroundColor = P.indexOf(r) > 0 ? r : "none";
1630
1631
  break;
1631
1632
  case "background-gradient":
1632
1633
  this.$container.gradient = this.gradient;
1633
1634
  break;
1634
1635
  case "background-image":
1635
- this.$container.backgroundImage = o;
1636
+ this.$container.backgroundImage = r;
1636
1637
  break;
1637
1638
  case "background-image--mobile":
1638
- this.$container.backgroundImageMobile = o;
1639
+ this.$container.backgroundImageMobile = r;
1639
1640
  break;
1640
1641
  case "background-image--tablet":
1641
- this.$container.backgroundImageTablet = o;
1642
+ this.$container.backgroundImageTablet = r;
1642
1643
  break;
1643
1644
  case "background-image--laptop":
1644
- this.$container.backgroundImageLaptop = o;
1645
+ this.$container.backgroundImageLaptop = r;
1645
1646
  break;
1646
1647
  case "background-size":
1647
- this.$container.backgroundSize = o;
1648
+ this.$container.backgroundSize = r;
1648
1649
  break;
1649
1650
  case "background-position":
1650
- this.$container.backgroundPosition = o;
1651
+ this.$container.backgroundPosition = r;
1651
1652
  break;
1652
1653
  case "padding-block":
1653
- this.$container.paddingBlock = o;
1654
+ this.$container.paddingBlock = r;
1654
1655
  break;
1655
1656
  case "padding-top":
1656
- this.$container.paddingTop = o;
1657
+ this.$container.paddingTop = r;
1657
1658
  break;
1658
1659
  case "padding-bottom":
1659
- this.$container.paddingBottom = o;
1660
+ this.$container.paddingBottom = r;
1660
1661
  break;
1661
1662
  case "padding-block--mobile":
1662
- this.$container.paddingBlockMobile = o;
1663
+ this.$container.paddingBlockMobile = r;
1663
1664
  break;
1664
1665
  case "padding-top--mobile":
1665
- this.$container.paddingTopMobile = o;
1666
+ this.$container.paddingTopMobile = r;
1666
1667
  break;
1667
1668
  case "padding-bottom--mobile":
1668
- this.$container.paddingBottomMobile = o;
1669
+ this.$container.paddingBottomMobile = r;
1669
1670
  break;
1670
1671
  case "padding-block--tablet":
1671
- this.$container.paddingBlockTablet = o;
1672
+ this.$container.paddingBlockTablet = r;
1672
1673
  break;
1673
1674
  case "padding-top--tablet":
1674
- this.$container.paddingTopTablet = o;
1675
+ this.$container.paddingTopTablet = r;
1675
1676
  break;
1676
1677
  case "padding-bottom--tablet":
1677
- this.$container.paddingBottomTablet = o;
1678
+ this.$container.paddingBottomTablet = r;
1678
1679
  break;
1679
1680
  case "padding-block--laptop":
1680
- this.$container.paddingBlockLaptop = o;
1681
+ this.$container.paddingBlockLaptop = r;
1681
1682
  break;
1682
1683
  case "padding-top--laptop":
1683
- this.$container.paddingTopLaptop = o;
1684
+ this.$container.paddingTopLaptop = r;
1684
1685
  break;
1685
1686
  case "padding-bottom--laptop":
1686
- this.$container.paddingBottomLaptop = o;
1687
+ this.$container.paddingBottomLaptop = r;
1687
1688
  break;
1688
1689
  case "border":
1689
- this.$container.border = o;
1690
+ this.$container.border = r;
1690
1691
  break;
1691
1692
  case "border-side":
1692
- this.$container.borderSide = o;
1693
+ this.$container.borderSide = r;
1693
1694
  break;
1694
1695
  case "border-side--mobile":
1695
- this.$container.borderSideMobile = o;
1696
+ this.$container.borderSideMobile = r;
1696
1697
  break;
1697
1698
  case "border-side--tablet":
1698
- this.$container.borderSideTablet = o;
1699
+ this.$container.borderSideTablet = r;
1699
1700
  break;
1700
1701
  case "border-side--laptop":
1701
- this.$container.borderSideLaptop = o;
1702
+ this.$container.borderSideLaptop = r;
1703
+ break;
1704
+ default:
1705
+ super.attributeChangedCallback(t, e, r);
1702
1706
  break;
1703
1707
  }
1704
1708
  }
@@ -1715,15 +1719,15 @@ class he extends HTMLElement {
1715
1719
  toggleOverlapSpacing() {
1716
1720
  const t = this.$slotOverlap, e = this.$mainContentWrapper;
1717
1721
  if (!t || !e) return;
1718
- const r = t.assignedNodes({ flatten: !0 }).some(this.isNotEmptyNode);
1719
- e.classList.toggle("overlapped", r);
1722
+ const o = t.assignedNodes({ flatten: !0 }).some(this.isNotEmptyNode);
1723
+ e.classList.toggle("overlapped", o);
1720
1724
  }
1721
1725
  isNotEmptyNode(t) {
1722
1726
  return t.nodeType === Node.ELEMENT_NODE ? !0 : t.nodeType === Node.TEXT_NODE ? (t.textContent ?? "").trim().length > 0 : !1;
1723
1727
  }
1724
1728
  setHeadingSpacing() {
1725
- var o;
1726
- const t = this.$slotHeading, e = (o = this.shadowRoot) == null ? void 0 : o.querySelector("px-vstack");
1729
+ var r;
1730
+ const t = this.$slotHeading, e = (r = this.shadowRoot) == null ? void 0 : r.querySelector("px-vstack");
1727
1731
  t && e && (t.assignedElements().length > 0 ? e.setAttribute("gap", "heading-to-content") : e.setAttribute("gap", "none"));
1728
1732
  }
1729
1733
  get $container() {
@@ -1903,14 +1907,14 @@ class he extends HTMLElement {
1903
1907
  this.setAttribute("border-side--laptop", t);
1904
1908
  }
1905
1909
  }
1906
- customElements.get("px-section") || customElements.define("px-section", he);
1907
- const ge = "p,::slotted(p){font-family:var(--px-font-family);color:var(--px-color-text-neutral-default);font-size:var(--px-text-size-body-m-mobile);font-weight:var(--px-font-weight-body);line-height:var(--px-line-height-ratio-l);margin:0}::slotted(p){margin-bottom:var(--px-spacing-xs-mobile)}.text-align-left{text-align:left}.text-align-center{text-align:center}.text-align-right{text-align:right}:host([inverted]) p,:host([inverted]) ::slotted(p){color:var(--px-color-text-neutral-inverted)}@media only screen and (max-width: 768px){.text-align-left--mobile{text-align:left}.text-align-center--mobile{text-align:center}.text-align-right--mobile{text-align:right}}@media only screen and (min-width: 768px){p,::slotted(p){font-size:var(--px-text-size-body-m-desktop)}::slotted(p){margin-bottom:var(--px-spacing-xs-tablet)}.text-align-left--tablet{text-align:left}.text-align-center--tablet{text-align:center}.text-align-right--tablet{text-align:right}}@media only screen and (min-width: 1025px){p,::slotted(p){font-size:var(--px-text-size-body-m-desktop)}::slotted(p){margin-bottom:var(--px-spacing-xs-laptop)}.text-align-left--laptop{text-align:left}.text-align-center--laptop{text-align:center}.text-align-right--laptop{text-align:right}}@media only screen and (min-width: 90.0625em){::slotted(p){margin-bottom:var(--px-spacing-xs-desktop)}}", St = new CSSStyleSheet(), Ct = new CSSStyleSheet(), Lt = new CSSStyleSheet();
1908
- St.replaceSync(ge);
1909
- Ct.replaceSync(X);
1910
- Lt.replaceSync(kt);
1911
- const ot = class ot extends $ {
1910
+ customElements.get("px-section") || customElements.define("px-section", ge);
1911
+ const ue = "p,::slotted(p){font-family:var(--px-font-family);color:var(--px-color-text-neutral-default);font-size:var(--px-text-size-body-m-mobile);font-weight:var(--px-font-weight-body);line-height:var(--px-line-height-ratio-l);margin:0}::slotted(p){margin-bottom:var(--px-spacing-xs-mobile)}.text-align-left{text-align:left}.text-align-center{text-align:center}.text-align-right{text-align:right}:host([inverted]) p,:host([inverted]) ::slotted(p){color:var(--px-color-text-neutral-inverted)}@media screen and (max-width: 47.938rem){.text-align-left--mobile{text-align:left}.text-align-center--mobile{text-align:center}.text-align-right--mobile{text-align:right}}@media screen and (min-width: 48rem){p,::slotted(p){font-size:var(--px-text-size-body-m-tablet)}::slotted(p){margin-bottom:var(--px-spacing-xs-tablet)}.text-align-left--tablet{text-align:left}.text-align-center--tablet{text-align:center}.text-align-right--tablet{text-align:right}}@media screen and (min-width: 64.0625rem){p,::slotted(p){font-size:var(--px-text-size-body-m-laptop)}::slotted(p){margin-bottom:var(--px-spacing-xs-laptop)}.text-align-left--laptop{text-align:left}.text-align-center--laptop{text-align:center}.text-align-right--laptop{text-align:right}}@media screen and (min-width: 90.0625rem){::slotted(p){margin-bottom:var(--px-spacing-xs-desktop)}}", Et = new CSSStyleSheet(), Bt = new CSSStyleSheet(), Mt = new CSSStyleSheet();
1912
+ Et.replaceSync(ue);
1913
+ Bt.replaceSync(K);
1914
+ Mt.replaceSync(wt);
1915
+ const it = class it extends $ {
1912
1916
  constructor() {
1913
- super(Ct, Lt, St), this.template = "<p><slot></slot></p>", this.shadowRoot.innerHTML = this.template;
1917
+ super(Bt, Mt, Et), this.template = "<p><slot></slot></p>", this.shadowRoot.innerHTML = this.template;
1914
1918
  }
1915
1919
  static get observedAttributes() {
1916
1920
  return [
@@ -1927,64 +1931,64 @@ const ot = class ot extends $ {
1927
1931
  "disabled"
1928
1932
  ];
1929
1933
  }
1930
- attributeChangedCallback(t, e, o) {
1931
- if (e !== o)
1934
+ attributeChangedCallback(t, e, r) {
1935
+ if (e !== r)
1932
1936
  switch (t) {
1933
1937
  case "variant":
1934
- this.updateVariant(t, e, o, dt);
1938
+ this.updateVariant(t, e, r, ht);
1935
1939
  break;
1936
1940
  case "color":
1937
- this.updateTypography(t, e, o, Y);
1941
+ this.updateTypography(t, e, r, Z);
1938
1942
  break;
1939
1943
  case "font-size":
1940
- this.updateTypography(t, e, o, bt);
1944
+ this.updateTypography(t, e, r, ut);
1941
1945
  break;
1942
1946
  case "font-weight":
1943
- this.updateTypography(t, e, o, pt);
1947
+ this.updateTypography(t, e, r, gt);
1944
1948
  break;
1945
1949
  case "text-align":
1946
1950
  case "text-align--mobile":
1947
1951
  case "text-align--tablet":
1948
1952
  case "text-align--laptop":
1949
- this.updateTypography(t, e, o, nt);
1953
+ this.updateTypography(t, e, r, ct);
1950
1954
  break;
1951
1955
  case "disabled":
1952
1956
  this.color = "state-disabled";
1953
1957
  break;
1954
1958
  default:
1955
- super.attributeChangedCallback(t, e, o);
1959
+ super.attributeChangedCallback(t, e, r);
1956
1960
  break;
1957
1961
  }
1958
1962
  }
1959
1963
  toggleClass(t, e) {
1960
1964
  t !== null && t !== "" && t !== "default" && this.$el.classList.toggle(`style-${t}`), e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`style-${e}`);
1961
1965
  }
1962
- updateVariant(t, e, o, r) {
1963
- this.checkName(r, o) ? this.toggleClass(e, o) : d(
1964
- `${o} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
1966
+ updateVariant(t, e, r, o) {
1967
+ this.checkName(o, r) ? this.toggleClass(e, r) : d(
1968
+ `"${r}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${o.join('", "')}".`
1965
1969
  );
1966
1970
  }
1967
- updateTypography(t, e, o, r) {
1968
- if (!this.checkName(r, o))
1971
+ updateTypography(t, e, r, o) {
1972
+ if (!this.checkName(o, r))
1969
1973
  d(
1970
- `${o} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
1974
+ `"${r}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${o.join('", "')}".`
1971
1975
  );
1972
1976
  else {
1973
1977
  const i = this.splitAttrNameFromBreakpoint(t), a = i.breakpoint;
1974
1978
  e !== null && e !== "" && this.$el.classList.toggle(
1975
1979
  `${i.attrName}-${e}${a}`
1976
- ), o !== null && o !== "" && this.$el.classList.toggle(
1977
- `${i.attrName}-${o}${a}`
1980
+ ), r !== null && r !== "" && this.$el.classList.toggle(
1981
+ `${i.attrName}-${r}${a}`
1978
1982
  );
1979
1983
  }
1980
1984
  }
1981
1985
  splitAttrNameFromBreakpoint(t) {
1982
1986
  let e = "";
1983
1987
  if (["--mobile", "--tablet", "--laptop"].some(
1984
- (o) => t.includes(o)
1988
+ (r) => t.includes(r)
1985
1989
  )) {
1986
- const o = t.split("--");
1987
- t = o[0], e = `--${o[1]}`;
1990
+ const r = t.split("--");
1991
+ t = r[0], e = `--${r[1]}`;
1988
1992
  }
1989
1993
  return { attrName: t, breakpoint: e };
1990
1994
  }
@@ -2049,10 +2053,10 @@ const ot = class ot extends $ {
2049
2053
  this.setAttribute("disabled", t);
2050
2054
  }
2051
2055
  };
2052
- ot.nativeName = "p";
2053
- let F = ot;
2054
- customElements.get("px-p") || customElements.define("px-p", F);
2055
- class ue extends HTMLElement {
2056
+ it.nativeName = "p";
2057
+ let G = it;
2058
+ customElements.get("px-p") || customElements.define("px-p", G);
2059
+ class xe extends HTMLElement {
2056
2060
  constructor() {
2057
2061
  super(), this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = `
2058
2062
  <button aria-hidden="true" style="width: 0; height: 0; border: 0; background-color: #00000000;"></button>
@@ -2066,11 +2070,11 @@ class ue extends HTMLElement {
2066
2070
  });
2067
2071
  }
2068
2072
  }
2069
- customElements.get("px-mdd-closer") || customElements.define("px-mdd-closer", ue);
2070
- const xe = ":host{--mdd-dialog-offset-top: 0}dialog{border:none;width:100%;margin-inline:0;margin-top:var(--mdd-dialog-offset-top);max-width:100%;max-height:100%;background-color:var(--px-color-background-surface-default)}@keyframes slide-left-fade-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}dialog::backdrop{background-color:#0000}@media screen and (max-height: 285px){dialog #footer{position:static}dialog::backdrop{background-color:#0006}}@media screen and (max-width: 767px){dialog{height:100dvh;margin:0;padding:0;animation:slide-left-fade-in .3s ease-in-out}px-container{height:100dvh}px-container>px-vstack>px-button-icon{position:initial;display:none;right:0}px-container>px-vstack>px-mdd-closer{display:none}dialog::backdrop{background-color:var(--px-color-background-surface-default)}}px-container{position:relative}px-container>px-vstack>px-button-icon{position:absolute;top:2em;right:1em}#sections-container{overflow:auto}@media only screen and (min-width: 48em){#sections-container{padding-bottom:0}}#mobile-header{display:none}@media screen and (max-width: 767px){#mobile-header{display:block;padding-bottom:2em}}px-p{display:none}@media screen and (max-width: 767px){px-p{display:block;padding-bottom:2em}}#footer{display:none}@media screen and (max-width: 767px){#footer{display:block;position:absolute;bottom:0;left:0;right:0;padding:var(--px-padding-s-mobile);background-color:var(--px-color-background-container-light-default)}}", Tt = new CSSStyleSheet();
2071
- Tt.replaceSync(xe);
2072
- var y, p, G, Et, S, Bt;
2073
- class ve extends HTMLElement {
2073
+ customElements.get("px-mdd-closer") || customElements.define("px-mdd-closer", xe);
2074
+ const ve = ":host{--mdd-dialog-offset-top: 0}dialog{border:none;width:100%;margin-inline:0;margin-top:var(--mdd-dialog-offset-top);max-width:100%;max-height:100%;background-color:var(--px-color-background-surface-default)}@keyframes slide-left-fade-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}dialog::backdrop{background-color:#0000}@media screen and (max-height: 17.813rem){dialog #footer{position:static}dialog::backdrop{background-color:#0006}}@media screen and (max-width: 47.9375rem){dialog{height:100dvh;margin:0;padding:0;animation:slide-left-fade-in .3s ease-in-out}px-container{height:100dvh}px-container>px-vstack>px-button-icon{position:initial;display:none;right:0}px-container>px-vstack>px-mdd-closer{display:none}dialog::backdrop{background-color:var(--px-color-background-surface-default)}}px-container{position:relative}px-container>px-vstack>px-button-icon{position:absolute;top:32px;right:16px}#sections-container{overflow:auto}@media screen and (min-width: 48rem){#sections-container{padding-bottom:0}}#mobile-header{display:none}@media screen and (max-width: 47.9375rem){#mobile-header{display:block;padding-bottom:32px}}px-p{display:none}@media screen and (max-width: 47.9375rem){px-p{display:block;padding-bottom:32px}}#footer{display:none}@media screen and (max-width: 47.9375rem){#footer{display:block;position:absolute;bottom:0;left:0;right:0;padding:var(--px-padding-s-mobile);background-color:var(--px-color-background-container-light-default)}}", Rt = new CSSStyleSheet();
2075
+ Rt.replaceSync(ve);
2076
+ var y, p, Y, It, S, jt;
2077
+ class me extends HTMLElement {
2074
2078
  constructor() {
2075
2079
  var e;
2076
2080
  super();
@@ -2132,21 +2136,21 @@ class ve extends HTMLElement {
2132
2136
  <slot name="mdd-footer"></slot>
2133
2137
  </px-hstack>
2134
2138
  </px-section>
2135
- </dialog>`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template, this.shadowRoot.adoptedStyleSheets = [Tt], this.internals = (e = this.attachInternals) == null ? void 0 : e.call(this), this.role = "menu", this.internals && (this.internals.role = "menu");
2139
+ </dialog>`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template, this.shadowRoot.adoptedStyleSheets = [Rt], this.internals = (e = this.attachInternals) == null ? void 0 : e.call(this), this.internals && (this.internals.role = "menu");
2136
2140
  }
2137
2141
  static get observedAttributes() {
2138
2142
  return ["hidden", "name", "close-button-aria-label", "back-to-menu-label"];
2139
2143
  }
2140
2144
  connectedCallback() {
2141
- var e, o;
2142
- if (this.querySelectorAll("px-mdd-section").length === 0)
2145
+ var e, r;
2146
+ if (this.role = "menu", this.querySelectorAll("px-mdd-section").length === 0)
2143
2147
  throw new Error("HeaderPanel must contain at least one MenuSection");
2144
- this.hidden = !0, this.internals && (this.internals.ariaHidden = "true"), this.ariaHidden = "true", this.setAttribute("slot", "header-panels"), this.shadowRoot.addEventListener("click", (r) => {
2145
- if (r.target.closest("px-button-icon"))
2148
+ this.hidden = !0, this.internals && (this.internals.ariaHidden = "true"), this.ariaHidden = "true", this.setAttribute("slot", "header-panels"), this.shadowRoot.addEventListener("click", (o) => {
2149
+ if (o.target.closest("px-button-icon"))
2146
2150
  this.dispatchEvent(
2147
2151
  new CustomEvent("close-panel", { bubbles: !0, composed: !0 })
2148
2152
  );
2149
- else if (r.target.closest("#back-button")) {
2153
+ else if (o.target.closest("#back-button")) {
2150
2154
  const i = new CustomEvent("back-to-mobile-menu", {
2151
2155
  bubbles: !0,
2152
2156
  composed: !0
@@ -2155,30 +2159,30 @@ class ve extends HTMLElement {
2155
2159
  }
2156
2160
  }), this.$dialog.addEventListener("cancel", () => {
2157
2161
  this.dispatchEvent(new CustomEvent("close-panel", { bubbles: !0 }));
2158
- }), this.$dialog.addEventListener("click", (r) => {
2159
- r.target === this.$dialog && this.dispatchEvent(
2162
+ }), this.$dialog.addEventListener("click", (o) => {
2163
+ o.target === this.$dialog && this.dispatchEvent(
2160
2164
  new CustomEvent("close-panel-from-dialog", {
2161
2165
  bubbles: !0,
2162
2166
  detail: {
2163
- clientX: r.clientX,
2164
- clientY: r.clientY
2167
+ clientX: o.clientX,
2168
+ clientY: o.clientY
2165
2169
  }
2166
2170
  })
2167
2171
  );
2168
- }), this.getAttribute("name") === "__lavender_mobile_menu" && (n(this, p, G).style.visibility = "hidden"), this.getAttribute("name") !== "__lavender_mobile_menu" && (n(this, p, Et).innerText = ((o = (e = this.closest("px-header")) == null ? void 0 : e.querySelector(
2172
+ }), this.getAttribute("name") === "__lavender_mobile_menu" && (n(this, p, Y).style.visibility = "hidden"), this.getAttribute("name") !== "__lavender_mobile_menu" && (n(this, p, It).innerText = ((r = (e = this.closest("px-header")) == null ? void 0 : e.querySelector(
2169
2173
  `px-header-item[for="${this.getAttribute("name")}"]`
2170
- )) == null ? void 0 : o.innerText) ?? ""), this.$slotMddFooter || (n(this, p, S).style.display = "none"), k(this, y, new MutationObserver(() => {
2174
+ )) == null ? void 0 : r.innerText) ?? ""), this.$slotMddFooter || (n(this, p, S).style.display = "none"), k(this, y, new MutationObserver(() => {
2171
2175
  this.$slotMddFooter && (n(this, p, S).style.display = "block");
2172
2176
  })), n(this, y).observe(this, { childList: !0, subtree: !0 });
2173
2177
  }
2174
2178
  disconnectedCallback() {
2175
2179
  n(this, y).disconnect();
2176
2180
  }
2177
- attributeChangedCallback(e, o, r) {
2178
- if (e === "name" && !r)
2181
+ attributeChangedCallback(e, r, o) {
2182
+ if (e === "name" && !o)
2179
2183
  throw new Error("Media Drop Down must have a name attribute");
2180
- if (e === "name" && (this.id = r), e === "hidden" && this.internals) {
2181
- const i = r === "true" || r === "" ? "true" : "false";
2184
+ if (e === "name" && (this.id = o), e === "hidden" && this.internals) {
2185
+ const i = o === "true" || o === "" ? "true" : "false";
2182
2186
  this.internals.ariaHidden = i, this.ariaHidden = i;
2183
2187
  const l = n(this, p, S).offsetHeight / parseFloat(getComputedStyle(document.documentElement).fontSize);
2184
2188
  this.style.setProperty(
@@ -2186,11 +2190,11 @@ class ve extends HTMLElement {
2186
2190
  `${l}em`
2187
2191
  );
2188
2192
  }
2189
- e === "close-button-aria-label" && n(this, p, Bt).forEach((i) => {
2190
- r ? i.setAttribute("aria-label", r || "Close") : i.removeAttribute("aria-label");
2191
- }), e === "back-to-menu-label" && (n(this, p, G).innerHTML = `
2193
+ e === "close-button-aria-label" && n(this, p, jt).forEach((i) => {
2194
+ o ? i.setAttribute("aria-label", o || "Close") : i.removeAttribute("aria-label");
2195
+ }), e === "back-to-menu-label" && (n(this, p, Y).innerHTML = `
2192
2196
  <px-icon name="chevron_left" from="lavender"></px-icon>
2193
- ${r || "Back to menu"}
2197
+ ${o || "Back to menu"}
2194
2198
  `);
2195
2199
  }
2196
2200
  get $dialog() {
@@ -2231,19 +2235,19 @@ class ve extends HTMLElement {
2231
2235
  this.$dialog.style.setProperty("--mdd-dialog-offset-top", e);
2232
2236
  }
2233
2237
  }
2234
- y = new WeakMap(), p = new WeakSet(), G = function() {
2238
+ y = new WeakMap(), p = new WeakSet(), Y = function() {
2235
2239
  return this.shadowRoot.querySelector("#back-button");
2236
- }, Et = function() {
2240
+ }, It = function() {
2237
2241
  return this.shadowRoot.querySelector("px-p");
2238
2242
  }, S = function() {
2239
2243
  return this.shadowRoot.querySelector("#footer");
2240
- }, Bt = function() {
2244
+ }, jt = function() {
2241
2245
  return this.shadowRoot.querySelectorAll("px-button-icon");
2242
2246
  };
2243
- customElements.get("px-mdd") || customElements.define("px-mdd", ve);
2244
- const me = ':host{flex-basis:25%}@media screen and (max-width: 767px){:host{width:100%;flex-basis:100%}#section-wrapper{background-color:#fff;border-radius:.5em;padding-inline:1em}::slotted(px-mdd-section-item){border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default)}::slotted(px-mdd-section-item:last-of-type){border-bottom:none}::slotted([slot="footer"]){background-color:#fff;border-radius:.5em;padding-inline:1em;line-height:4em}:host([title-hidden]){padding-bottom:var(--mdd-section-container-padding-bottom, 0)}}', Mt = new CSSStyleSheet();
2245
- Mt.replaceSync(me);
2246
- class fe extends HTMLElement {
2247
+ customElements.get("px-mdd") || customElements.define("px-mdd", me);
2248
+ const fe = ':host{flex-basis:25%}@media screen and (max-width: 47.9375rem){:host{width:100%;flex-basis:100%}#section-wrapper{background-color:#fff;border-radius:8px;padding-inline:16px}::slotted(px-mdd-section-item){border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default)}::slotted(px-mdd-section-item:last-of-type){border-bottom:none}::slotted([slot="footer"]){background-color:#fff;border-radius:8px;padding-inline:16px;line-height:4rem}:host([title-hidden]){padding-bottom:var(--mdd-section-container-padding-bottom, 0)}}', Pt = new CSSStyleSheet();
2249
+ Pt.replaceSync(fe);
2250
+ class ke extends HTMLElement {
2247
2251
  constructor() {
2248
2252
  super(), this.template = `<px-vstack gap="default">
2249
2253
  <px-p font-size="heading-l" font-weight="title">
@@ -2257,7 +2261,7 @@ class fe extends HTMLElement {
2257
2261
  <px-vstack gap="default" gap--mobile="default">
2258
2262
  <slot name="footer"></slot>
2259
2263
  </px-vstack>
2260
- </px-vstack>`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template, this.shadowRoot.adoptedStyleSheets = [Mt];
2264
+ </px-vstack>`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template, this.shadowRoot.adoptedStyleSheets = [Pt];
2261
2265
  }
2262
2266
  connectedCallback() {
2263
2267
  this.$slotTitle || this.$title.setAttribute("hidden", ""), this.setupForId();
@@ -2265,11 +2269,11 @@ class fe extends HTMLElement {
2265
2269
  static get observedAttributes() {
2266
2270
  return ["title-hidden"];
2267
2271
  }
2268
- attributeChangedCallback(t, e, o) {
2269
- if (e !== o)
2272
+ attributeChangedCallback(t, e, r) {
2273
+ if (e !== r)
2270
2274
  switch (t) {
2271
2275
  case "title-hidden":
2272
- this.$title.style.display = o !== null ? "none" : "block";
2276
+ this.$title.style.display = r !== null ? "none" : "block";
2273
2277
  break;
2274
2278
  }
2275
2279
  }
@@ -2296,12 +2300,12 @@ class fe extends HTMLElement {
2296
2300
  t ? this.setAttribute("hidden-title", "") : this.removeAttribute("hidden-title");
2297
2301
  }
2298
2302
  }
2299
- customElements.get("px-mdd-section") || customElements.define("px-mdd-section", fe);
2300
- const Rt = new CSSStyleSheet(), It = new CSSStyleSheet(), Pt = new CSSStyleSheet();
2301
- Rt.replaceSync(ht);
2302
- It.replaceSync(ct);
2303
- Pt.replaceSync(X);
2304
- const ke = [...bt, "link-m", "link-s"], ye = [
2303
+ customElements.get("px-mdd-section") || customElements.define("px-mdd-section", ke);
2304
+ const Ht = new CSSStyleSheet(), Ot = new CSSStyleSheet(), qt = new CSSStyleSheet();
2305
+ Ht.replaceSync(vt);
2306
+ Ot.replaceSync(xt);
2307
+ qt.replaceSync(K);
2308
+ const ye = [...ut, "link-m", "link-s"], lt = [
2305
2309
  "link",
2306
2310
  "no-style",
2307
2311
  "skip-link",
@@ -2311,7 +2315,7 @@ const ke = [...bt, "link-m", "link-s"], ye = [
2311
2315
  "icon-link"
2312
2316
  ], Ae = ["", "default", "alternative"], M = class M extends $ {
2313
2317
  constructor() {
2314
- super(Rt, It, Pt), this.template = () => '<slot name="before"></slot><slot></slot><slot name="after"></slot>';
2318
+ super(Ht, Ot, qt), this.template = () => '<slot name="before"></slot><slot></slot><slot name="after"></slot>';
2315
2319
  const t = document.createElement(M.nativeName);
2316
2320
  t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
2317
2321
  }
@@ -2338,86 +2342,86 @@ const ke = [...bt, "link-m", "link-s"], ye = [
2338
2342
  ];
2339
2343
  }
2340
2344
  connectedCallback() {
2341
- this.$before && this.$before.localName === "px-icon" && this.configureBeforeAfterIcon(this.$before), this.$after && this.$after.localName === "px-icon" && this.configureBeforeAfterIcon(this.$after), it(this, this.$el, !1);
2345
+ this.$before && this.$before.localName === "px-icon" && this.configureBeforeAfterIcon(this.$before), this.$after && this.$after.localName === "px-icon" && this.configureBeforeAfterIcon(this.$after), pt(this, this.$el, !1);
2342
2346
  }
2343
2347
  disconnectedCallback() {
2344
2348
  }
2345
- attributeChangedCallback(t, e, o) {
2346
- if (e !== o)
2349
+ attributeChangedCallback(t, e, r) {
2350
+ if (e !== r)
2347
2351
  switch (t) {
2348
2352
  case "disabled":
2349
- this.$el.toggleAttribute("aria-disabled"), o !== null && this.$el.setAttribute("aria-disabled", "true");
2353
+ this.$el.toggleAttribute("aria-disabled"), r !== null && this.$el.setAttribute("aria-disabled", "true");
2350
2354
  break;
2351
2355
  case "variant":
2352
- this.updateVariant(e, o);
2356
+ this.updateVariant(e, r);
2353
2357
  break;
2354
2358
  case "shape":
2355
2359
  case "shape--mobile":
2356
2360
  case "shape--tablet":
2357
2361
  case "shape--laptop":
2358
2362
  case "shape--desktop":
2359
- this.updateShape(t, o, Ae);
2363
+ this.updateShape(t, r, Ae);
2360
2364
  break;
2361
2365
  case "extended":
2362
2366
  case "extended--mobile":
2363
2367
  case "extended--tablet":
2364
2368
  case "extended--laptop":
2365
2369
  case "extended--desktop":
2366
- this.updateExtended(t, o);
2370
+ this.updateExtended(t, r);
2367
2371
  break;
2368
2372
  case "font-size":
2369
2373
  this.updateTypography(
2370
2374
  t,
2371
2375
  e,
2372
- o,
2373
- ke
2376
+ r,
2377
+ ye
2374
2378
  );
2375
2379
  break;
2376
2380
  case "color":
2377
- this.updateTypography(t, e, o, Y);
2381
+ this.updateTypography(t, e, r, Z);
2378
2382
  break;
2379
2383
  case "font-weight":
2380
- this.updateTypography(t, e, o, pt);
2384
+ this.updateTypography(t, e, r, gt);
2381
2385
  break;
2382
2386
  case "title":
2383
- o && (this.$el.setAttribute("title", o), this.removeAttribute("title"));
2387
+ r && (this.$el.setAttribute("title", r), this.removeAttribute("title"));
2384
2388
  break;
2385
2389
  default:
2386
- super.attributeChangedCallback(t, e, o);
2390
+ super.attributeChangedCallback(t, e, r);
2387
2391
  break;
2388
2392
  }
2389
2393
  }
2390
2394
  configureBeforeAfterIcon(t) {
2391
- const e = t.getAttribute("size"), o = t.getAttribute("color");
2395
+ const e = t.getAttribute("size"), r = t.getAttribute("color");
2392
2396
  t.addEventListener("click", () => {
2393
2397
  this.$el.focus();
2394
- }), e || t.setAttribute("size", "xs"), o || t.setAttribute("color", "inherit");
2398
+ }), e || t.setAttribute("size", "xs"), r || t.setAttribute("color", "inherit");
2395
2399
  }
2396
2400
  _toggleClassList(t) {
2397
2401
  if (t.startsWith("btn-")) {
2398
2402
  const e = t.split("-");
2399
- for (const o of e)
2400
- this.$el.classList.toggle(o);
2403
+ for (const r of e)
2404
+ this.$el.classList.toggle(r);
2401
2405
  } else
2402
2406
  this.$el.classList.toggle(t);
2403
2407
  }
2404
2408
  updateVariant(t, e) {
2405
- t !== null && t !== "" && t !== "link" && this._toggleClassList(t), e !== null && e !== "" && e !== "link" && this._toggleClassList(e), this.checkName(ye, e) || d(
2406
- `${e} is not an allowed variant value for ${this.tagName.toLowerCase()}`
2409
+ t !== null && t !== "" && t !== "link" && this._toggleClassList(t), e !== null && e !== "" && e !== "link" && this._toggleClassList(e), this.checkName(lt, e) || d(
2410
+ `"${e}" is not a valid variant value for ${this.tagName.toLowerCase()}. Allowed values are: "${lt.join('", "')}".`
2407
2411
  ), e === "icon-link" && this.$iconNotBeforeAfter.setAttribute("color", "inherit");
2408
2412
  }
2409
- updateShape(t, e, o) {
2410
- if (!w(o, e)) {
2413
+ updateShape(t, e, r) {
2414
+ if (!w(r, e)) {
2411
2415
  d(
2412
- `${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
2416
+ `"${e}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join('", "')}".`
2413
2417
  );
2414
2418
  return;
2415
2419
  }
2416
2420
  e !== null && e !== "" && this.$el.setAttribute(t, e);
2417
2421
  }
2418
- updateTypography(t, e, o, r) {
2419
- e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`${t}-${e}`), o !== null && o !== "" && o !== "default" && this.$el.classList.toggle(`${t}-${o}`), this.checkName(r, o) || d(
2420
- `${o} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
2422
+ updateTypography(t, e, r, o) {
2423
+ e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`${t}-${e}`), r !== null && r !== "" && r !== "default" && this.$el.classList.toggle(`${t}-${r}`), this.checkName(o, r) || d(
2424
+ `"${r}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${o.join('", "')}".`
2421
2425
  );
2422
2426
  }
2423
2427
  updateExtended(t, e) {
@@ -2540,16 +2544,16 @@ const ke = [...bt, "link-m", "link-s"], ye = [
2540
2544
  M.nativeName = "a";
2541
2545
  let L = M;
2542
2546
  customElements.get("px-a") || customElements.define("px-a", L);
2543
- var f, R, Ht;
2547
+ var f, R, Dt;
2544
2548
  class ze extends L {
2545
2549
  constructor() {
2546
2550
  super();
2547
2551
  c(this, R);
2548
2552
  c(this, f);
2549
- this.$el.classList.add("wrapper"), k(this, f, new at(
2553
+ this.$el.classList.add("wrapper"), k(this, f, new bt(
2550
2554
  this,
2551
2555
  this.$el,
2552
- () => P(this, R, Ht).call(this)
2556
+ () => j(this, R, Dt).call(this)
2553
2557
  ));
2554
2558
  }
2555
2559
  connectedCallback() {
@@ -2558,24 +2562,24 @@ class ze extends L {
2558
2562
  disconnectedCallback() {
2559
2563
  super.disconnectedCallback(), n(this, f).disconnect();
2560
2564
  }
2561
- attributeChangedCallback(e, o, r) {
2562
- if (o !== r)
2565
+ attributeChangedCallback(e, r, o) {
2566
+ if (r !== o)
2563
2567
  switch (e) {
2564
2568
  case "disabled":
2565
- super.attributeChangedCallback(e, o, r), r !== null && n(this, f).clearInteractiveState();
2569
+ super.attributeChangedCallback(e, r, o), o !== null && n(this, f).clearInteractiveState();
2566
2570
  break;
2567
2571
  default:
2568
- super.attributeChangedCallback(e, o, r);
2572
+ super.attributeChangedCallback(e, r, o);
2569
2573
  break;
2570
2574
  }
2571
2575
  }
2572
2576
  }
2573
- f = new WeakMap(), R = new WeakSet(), Ht = function() {
2577
+ f = new WeakMap(), R = new WeakSet(), Dt = function() {
2574
2578
  return !this.hasAttribute("disabled") && this.$el.getAttribute("aria-disabled") !== "true";
2575
2579
  };
2576
2580
  customElements.get("px-a-wrapper") || customElements.define("px-a-wrapper", ze);
2577
- const we = '.mdd-section-item-action-container{display:inline-flex;align-items:center}a{text-decoration:none;color:inherit;font-size:var(--px-text-size-label-l-mobile)}a ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-mobile)}a:hover{text-decoration:underline;color:var(--px-color-text-state-hover-default)}button{background:none;border:none;padding:0;margin:0;cursor:pointer;font:inherit;color:inherit;width:100%}a,button{display:block}a:focus-visible,button:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}@media only screen and (max-width: 47.9375em){a,button{padding:var(--px-spacing-s-mobile) 0}}@media only screen and (min-width: 48em){a{display:inline-block;font-size:var(--px-text-size-label-l-tablet)}a ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-tablet)}a:focus-visible,button:focus-visible{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}}@media only screen and (min-width: 64.0625em){a{font-size:var(--px-text-size-label-l-laptop)}a ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-laptop)}a:focus-visible,button:focus-visible{outline-offset:var(--px-focus-offset-laptop);outline-width:var(--px-focus-outline-laptop)}}@media only screen and (min-width: 90.0625em){a{font-size:var(--px-text-size-label-l-desktop)}a ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-desktop)}a:focus-visible,button:focus-visible{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}}', Ot = new CSSStyleSheet();
2578
- Ot.replaceSync(we);
2581
+ const we = '.mdd-section-item-action-container{display:inline-flex;align-items:center}a{text-decoration:none;color:inherit;font-size:var(--px-text-size-label-l-mobile)}a ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-mobile)}a:hover{text-decoration:underline;color:var(--px-color-text-state-hover-default)}button{background:none;border:none;padding:0;margin:0;cursor:pointer;font:inherit;color:inherit;width:100%}a,button{display:block}a:focus-visible,button:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}@media screen and (max-width: 47.9375rem){a,button{padding:var(--px-spacing-s-mobile) 0}}@media screen and (min-width: 48rem){a{display:inline-block;font-size:var(--px-text-size-label-l-tablet)}a ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-tablet)}a:focus-visible,button:focus-visible{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}}@media screen and (min-width: 64.0625rem){a{font-size:var(--px-text-size-label-l-laptop)}a ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-laptop)}a:focus-visible,button:focus-visible{outline-offset:var(--px-focus-offset-laptop);outline-width:var(--px-focus-outline-laptop)}}@media screen and (min-width: 90.0625rem){a{font-size:var(--px-text-size-label-l-desktop)}a ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-desktop)}a:focus-visible,button:focus-visible{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}}', Nt = new CSSStyleSheet();
2582
+ Nt.replaceSync(we);
2579
2583
  class $e extends HTMLElement {
2580
2584
  constructor() {
2581
2585
  var t;
@@ -2587,20 +2591,20 @@ class $e extends HTMLElement {
2587
2591
  </span>
2588
2592
  <px-spacer></px-spacer>
2589
2593
  <px-icon name="chevron_right" from="lavender"></px-icon>
2590
- </px-hstack>`, this.attachShadow({ mode: "open" }), this.shadowRoot.adoptedStyleSheets = [Ot], this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this), this.role = "listitem", this.internals && (this.internals.role = "listitem");
2594
+ </px-hstack>`, this.attachShadow({ mode: "open" }), this.shadowRoot.adoptedStyleSheets = [Nt], this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this), this.internals && (this.internals.role = "listitem");
2591
2595
  }
2592
2596
  static get observedAttributes() {
2593
2597
  return ["href", "for"];
2594
2598
  }
2595
2599
  // ... existing code ...
2596
- attributeChangedCallback(t, e, o) {
2597
- this.updateView(t, o);
2600
+ attributeChangedCallback(t, e, r) {
2601
+ this.updateView(t, r);
2598
2602
  }
2599
2603
  updateView(t, e) {
2600
2604
  t === "href" && this.$link ? this.$link.href = e : t === "href" && !this.$link && e ? (this.shadowRoot.innerHTML = `<a href="${e}">${this.template}</a>`, this.shadowRoot.firstElementChild.setAttribute("tabindex", "0"), this.$arrowIcon.style.display = "none") : t === "for" && !this.$button && e && (this.shadowRoot.innerHTML = `<button>${this.template}</button>`, this.shadowRoot.firstElementChild.setAttribute("tabindex", "0"));
2601
2605
  }
2602
2606
  connectedCallback() {
2603
- this.hasAttribute("href") ? (this.updateView("href", this.href), this.$link.href = this.href) : this.hasAttribute("for") && (this.updateView("for", this.getAttribute("for")), this.addEventListener("click", this.handleClick)), this.$after && this.$after.localName === "px-icon" && this.configureAfterIcon(this.$after), this.$link && (this.$arrowIcon.style.display = "none");
2607
+ this.role = "listitem", this.hasAttribute("href") ? (this.updateView("href", this.href), this.$link.href = this.href) : this.hasAttribute("for") && (this.updateView("for", this.getAttribute("for")), this.addEventListener("click", this.handleClick)), this.$after && this.$after.localName === "px-icon" && this.configureAfterIcon(this.$after), this.$link && (this.$arrowIcon.style.display = "none");
2604
2608
  }
2605
2609
  handleClick() {
2606
2610
  const t = new CustomEvent("section-item-click", {
@@ -2638,7 +2642,7 @@ class $e extends HTMLElement {
2638
2642
  }
2639
2643
  customElements.get("px-mdd-section-item") || customElements.define("px-mdd-section-item", $e);
2640
2644
  export {
2641
- fe as MddSection,
2645
+ ke as MddSection,
2642
2646
  $e as MddSectionItem,
2643
- ve as MegaDropDown
2647
+ me as MegaDropDown
2644
2648
  };