@proximus/lavender-mega-dropdown 2.0.0-alpha.8 → 2.0.0-alpha.81

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 +514 -283
  2. package/package.json +2 -2
package/dist/index.es.js CHANGED
@@ -1,16 +1,16 @@
1
- var J = (s) => {
1
+ var rt = (s) => {
2
2
  throw TypeError(s);
3
3
  };
4
- var Q = (s, t, e) => t.has(s) || J("Cannot " + e);
5
- var n = (s, t, e) => (Q(s, t, "read from private field"), e ? e.call(s) : t.get(s)), x = (s, t, e) => t.has(s) ? J("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(s) : t.set(s, e), y = (s, t, e, o) => (Q(s, t, "write to private field"), o ? o.call(s, e) : t.set(s, e), e);
6
- import { PxElement as m, transferAccessibilityAttributes as N, checkName as q, WithExtraAttributes as Lt, iconSizeValuesKC as Tt, textalignValues as V, colorValues as D, headingValues as tt, cssTokenBreakpoints as c, paddingValues as b, boxShadowValues as Et, backgroundSizeValues as Bt, noBorderRadiusValues as Mt, borderRadiusValues as Rt, borderSideValues as It, borderValues as Pt, gradientValues as qt, backgroundColorValues as et, borderColorValues as Dt, fontweightValues as ot, fontsizeValues as rt } from "@proximus/lavender-common";
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 w, transferAccessibilityAttributes as it, log as d, checkName as $, WrappedInteractiveStateController as at, WithExtraAttributes as st, iconSizeValuesKC as Ht, textalignValues as nt, colorValues as Y, headingValues as dt, cssTokenBreakpoints as h, paddingValues as u, gapValues as jt, boxShadowValues as Ot, backgroundSizeValues as _t, noBorderRadiusValues as Wt, borderRadiusValues as Ft, borderSideValues as Gt, borderValues as Nt, gradientValues as Yt, backgroundColorValues as lt, borderColorValues as Zt, fontweightValues as pt, fontsizeValues as bt } from "@proximus/lavender-common";
7
7
  import "@proximus/lavender-layout";
8
- const it = `.btn{width:var(--button-extended--mobile, var(--button-extended, auto));display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-line-height-ratio-l);font-weight:var(--px-font-weight-title);text-align:center;gap:var(--px-spacing-2xs-mobile);cursor:pointer;text-decoration:none;--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition);border:var(--px-size-border-m) solid transparent}.btn,.btn *{box-sizing:border-box}.btn ::slotted(px-icon){line-height:0}.btn:hover:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-state-hover-default)}.btn:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}.btn:active:not([disabled],[aria-disabled=true],.loading){transform:scale(.95);border-color:var(--px-color-border-state-active-default);color:var(--px-color-text-state-active-default);background:var(--px-color-background-state-hover-bordered-default)}.btn[disabled],.btn[aria-disabled=true]{cursor:default;pointer-events:none}.btn.loading{cursor:inherit}.btn.loading ::slotted(px-spinner){line-height:0}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-container-primary-default);min-height:var(--px-spacing-l-mobile);padding:var(--px-padding-xs-mobile) var(--px-padding-m-mobile);border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-mobile) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-mobile) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown):hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown)[disabled],.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown)[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown).loading{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-brand-default);border-color:transparent}.btn.secondary{color:var(--px-color-text-brand-default);background:var(--px-color-background-container-secondary-default);min-height:var(--px-spacing-l-mobile);padding:var(--px-padding-xs-mobile) var(--px-padding-m-mobile);border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn.secondary:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default)}.btn.secondary[disabled],.btn.secondary[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}.btn.secondary.loading{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-brand-default);border-color:transparent}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn.tertiary{background:none;color:var(--px-color-text-brand-default);border-radius:var(--px-radius-pill);border:var(--px-size-border-m) solid transparent;padding:var(--px-padding-2xs-mobile) 0;gap:var(--px-spacing-xs-mobile)}.btn.tertiary ::slotted(px-icon){display:flex;align-items:center;justify-content:center;width:var(--px-size-icon-xs);height:var(--px-size-icon-xs);padding:4px;border-radius:var(--px-radius-pill);background:var(--px-color-background-container-secondary-default);transition:var(--btn-transition)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading),.btn.tertiary:active:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-mobile) var(--px-padding-s-mobile)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon),.btn.tertiary:active:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon){background:transparent;margin:0 -8px;width:inherit;height:inherit}.btn.tertiary[disabled],.btn.tertiary[aria-disabled=true]{color:var(--px-color-text-state-disabled-default)}.btn.tertiary[disabled] ::slotted(px-icon),.btn.tertiary[aria-disabled=true] ::slotted(px-icon){background:var(--px-color-background-state-disabled-default)}.btn.tertiary.loading{color:var(--px-color-text-brand-default);border-color:transparent}.btn.tertiary.loading ::slotted(px-spinner){display:flex;align-items:center;justify-content:center;width:var(--px-size-icon-xs);height:var(--px-size-icon-xs);padding:4px;border-radius:var(--px-radius-pill);background:var(--px-color-background-state-disabled-default)}.btn.patch{display:inline-flex}.btn.patch:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default)}.btn.patch[disabled],.btn.patch[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}.btn.actionable-tag{background:var(--px-color-background-container-default-inverted);color:var(--px-color-text-neutral-default);padding:var(--px-padding-2xs-mobile) var(--px-padding-xs-mobile);gap:var(--px-spacing-xs-mobile);border-radius:var(--px-radius-pill);border:var(--px-size-border-m) solid var(--px-color-border-neutral-default)}.btn.actionable-tag:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default)}.btn.actionable-tag:active:not([disabled],[aria-disabled=true],.loading){background:var(--px-color-background-state-active-default);color:var(--px-color-text-state-active-inverted);border-color:var(--px-color-border-none-default)}.btn.actionable-tag[disabled],.btn.actionable-tag[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default);border-color:var(--px-color-border-none-default)}.btn.header-dropdown{display:flex;justify-content:space-between;width:100%;color:var(--px-color-text-neutral-default);font-weight:var(--px-font-weight-body);font-size:var(--px-text-size-label-l-mobile);border:var(--px-size-border-m) solid var(--px-color-border-neutral-default);padding:var(--px-padding-xs-mobile) var(--px-padding-s-mobile);border-radius:var(--px-radius-main);background-color:var(--px-color-background-container-default-default);touch-action:manipulation}.btn.header-dropdown:after{display:inline-block;content:"";width:var(--px-size-icon-xs);height:var(--px-size-icon-xs);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:cover;mask-size:cover;-webkit-mask-position:50% 50%;mask-position:50% 50%;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.4753 7.37808C15.1565 7.06426 14.6396 7.06426 14.3208 7.37808L10.0001 11.6313L5.67934 7.37808C5.36055 7.06426 4.84368 7.06426 4.52488 7.37808C4.20608 7.69189 4.20608 8.20069 4.52488 8.5145L9.42284 13.3359C9.74163 13.6497 10.2585 13.6497 10.5773 13.3359L15.4753 8.5145C15.7941 8.20069 15.7941 7.69189 15.4753 7.37808Z' fill='%235C2D91'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.4753 7.37808C15.1565 7.06426 14.6396 7.06426 14.3208 7.37808L10.0001 11.6313L5.67934 7.37808C5.36055 7.06426 4.84368 7.06426 4.52488 7.37808C4.20608 7.69189 4.20608 8.20069 4.52488 8.5145L9.42284 13.3359C9.74163 13.6497 10.2585 13.6497 10.5773 13.3359L15.4753 8.5145C15.7941 8.20069 15.7941 7.69189 15.4753 7.37808Z' fill='%235C2D91'/%3E%3C/svg%3E");background-color:currentColor;color:var(--px-color-icon-brand-default)}button.link{background:none;border:none;text-decoration:underline;padding:0;cursor:pointer}button.link[disabled],button.link[aria-disabled=true]{cursor:default;pointer-events:none;color:var(--px-color-text-state-disabled-default)}:host([inverted]) .btn:hover:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) .btn:focus-visible:not([disabled],[aria-disabled=true]){outline-color:var(--px-color-border-focus-outline-inverted)}:host([inverted]) .btn:active:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-state-active-inverted);color:var(--px-color-text-state-active-inverted);background:var(--px-color-background-state-hover-bordered-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag){color:var(--px-color-text-brand-default);background:var(--px-color-background-container-primary-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag):hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-state-hover-bordered-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag)[disabled],:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag)[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag).loading{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-brand-inverted);border-color:transparent}:host([inverted]) .btn.secondary{color:var(--px-color-text-brand-inverted);background:var(--px-color-background-container-secondary-inverted)}:host([inverted]) .btn.secondary:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-container-default-inverted)}:host([inverted]) .btn.secondary[disabled],:host([inverted]) .btn.secondary[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .btn.secondary.loading{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-brand-inverted);border-color:transparent}:host([inverted]) .btn.tertiary{color:var(--px-color-text-brand-inverted)}:host([inverted]) .btn.tertiary ::slotted(px-icon){background:var(--px-color-background-container-secondary-inverted)}:host([inverted]) .btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon),:host([inverted]) .btn.tertiary:active:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon){background:transparent}:host([inverted]) .btn.tertiary[disabled],:host([inverted]) .btn.tertiary[aria-disabled=true]{color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .btn.tertiary[disabled] ::slotted(px-icon),:host([inverted]) .btn.tertiary[aria-disabled=true] ::slotted(px-icon){background:var(--px-color-background-state-disabled-inverted)}:host([inverted]) .btn.tertiary.loading{color:var(--px-color-text-brand-inverted)}:host([inverted]) .btn.tertiary.loading ::slotted(px-spinner){background:var(--px-color-background-state-disabled-inverted)}:host([inverted]) .btn.patch:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-state-hover-bordered-inverted)}:host([inverted]) .btn.patch[disabled],:host([inverted]) .btn.patch[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .btn.actionable-tag{background:var(--px-color-background-container-default-default);color:var(--px-color-text-brand-inverted);border-color:var(--px-color-border-neutral-inverted)}:host([inverted]) .btn.actionable-tag:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-state-hover-bordered-inverted);border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) .btn.actionable-tag:active:not([disabled],[aria-disabled=true],.loading){background:var(--px-color-background-state-active-inverted);color:var(--px-color-text-state-active-default);border-color:var(--px-color-border-none-inverted)}:host([inverted]) .btn.actionable-tag[disabled],:host([inverted]) .btn.actionable-tag[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted);border-color:var(--px-color-border-none-default)}:host([inverted]) button.link[disabled],:host([inverted]) button.link[aria-disabled=true]{color:var(--px-color-text-state-disabled-inverted)}@media only screen and (max-width: 47.938em){.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--mobile=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--mobile=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--mobile=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--mobile=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}}@media only screen and (min-width: 48em) and (max-width: 64em){.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--tablet=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--tablet=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--tablet=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--tablet=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}}@media only screen and (min-width: 48em){.btn{width:var(--button-extended--tablet, var(--button-extended, auto));font-size:var(--px-text-size-label-m-desktop);gap:var(--px-spacing-2xs-desktop)}.btn:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}.btn.actionable-tag{padding:var(--px-padding-2xs-desktop) var(--px-padding-xs-desktop);gap:var(--px-spacing-xs-desktop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown){padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-desktop) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-desktop) * -1)}.btn.secondary{padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn.tertiary{padding:var(--px-padding-2xs-desktop) 0;gap:var(--px-spacing-xs-desktop)}.btn.tertiary ::slotted(px-icon){width:var(--px-size-icon-xs);height:var(--px-size-icon-xs)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-desktop) var(--px-padding-s-desktop)}.btn.tertiary.loading ::slotted(px-spinner){width:var(--px-size-icon-xs);height:var(--px-size-icon-xs)}.btn.header-dropdown{justify-content:flex-start;align-items:center;width:inherit;color:var(--px-color-text-brand-default);font-weight:var(--px-font-weight-title);font-size:var(--px-text-size-label-m-tablet);border:none;padding:0;border-radius:0;background:none}}@media only screen and (min-width: 64.0625em) and (max-width: 90em){.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--laptop=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--laptop=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--laptop=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--laptop=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}}@media only screen and (min-width: 64.0625em){.btn{width:var(--button-extended--laptop, var(--button-extended, auto));font-size:var(--px-text-size-label-m-laptop);gap:var(--px-spacing-2xs-laptop)}.btn:focus-visble:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-laptop);outline-width:var(--px-focus-outline-laptop)}.btn.actionable-tag{padding:var(--px-padding-2xs-laptop) var(--px-padding-xs-laptop);gap:var(--px-spacing-xs-laptop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown){padding:var(--px-padding-xs-laptop) var(--px-padding-m-laptop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-laptop) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-laptop) * -1)}.btn.secondary{padding:var(--px-padding-xs-laptop) var(--px-padding-m-laptop)}.btn.tertiary{padding:var(--px-padding-2xs-laptop) 0;gap:var(--px-spacing-xs-laptop)}.btn.tertiary ::slotted(px-icon){width:var(--px-size-icon-xs);height:var(--px-size-icon-xs)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-laptop) var(--px-padding-s-laptop)}.btn.tertiary.loading ::slotted(px-spinner){width:var(--px-size-icon-xs);height:var(--px-size-icon-xs)}.btn.header-dropdown{font-size:var(--px-text-size-label-m-laptop);padding:0}}@media only screen and (min-width: 90.0625em){.btn{width:var(--button-extended--desktop, var(--button-extended, auto));font-size:var(--px-text-size-label-m-desktop);gap:var(--px-spacing-2xs-desktop)}.btn:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}.btn.actionable-tag{padding:var(--px-padding-2xs-desktop) var(--px-padding-xs-desktop);gap:var(--px-spacing-xs-desktop)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--desktop=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--desktop=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--desktop=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--desktop=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown){padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-desktop) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-desktop) * -1)}.btn.secondary{padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn.tertiary{padding:var(--px-padding-2xs-desktop) 0;gap:var(--px-spacing-xs-desktop)}.btn.tertiary ::slotted(px-icon){width:var(--px-size-icon-xs);height:var(--px-size-icon-xs)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-desktop) var(--px-padding-s-desktop)}.btn.tertiary.loading ::slotted(px-spinner){width:var(--px-size-icon-xs);height:var(--px-size-icon-xs)}.btn.header-dropdown{font-size:var(--px-text-size-label-m-desktop);padding:0}}@keyframes anim-spinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}`, at = ':host([variant="icon-link"]){display:inline-flex}a,.link,::slotted(a){display:inline;align-items:center;font-family:var(--px-font-family);font-size:var(--px-text-size-link-m-mobile);line-height:var(--px-line-height-ratio-l);font-weight:var(--px-font-weight-body);color:var(--px-color-text-neutral-default)}a:hover,.link:hover{color:var(--px-color-text-state-hover-default)}a:focus-visible,.link:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}a[aria-disabled=true],.link[aria-disabled=true]{cursor:default;pointer-events:none;color:var(--px-color-text-state-disabled-default)}a ::slotted([slot="after"]),.link ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-mobile)}a ::slotted(span[slot="after"]),a ::slotted(span[slot="before"]),.link ::slotted(span[slot="after"]),.link ::slotted(span[slot="before"]){display:inline-block}::slotted(a:hover){color:var(--px-color-text-state-hover-default)}a.no-style{text-decoration:none}a.no-style:hover,a.no-style:focus-visible{color:inherit}a.skip-link{position:absolute;left:-10000px;top:auto;overflow:hidden;background-color:var(--px-color-background-container-default-default);padding:var(--px-padding-xs-mobile)}a.skip-link:focus-visible{left:auto;z-index:999}:host([target="_blank"]) ::slotted(px-icon){vertical-align:middle}.icon-link{color:var(--px-color-icon-brand-default);line-height:1;display:inline-flex}:host([inverted]) a,:host([inverted]) .link,:host([inverted]) ::slotted(a){color:var(--px-color-text-neutral-inverted)}:host([inverted]) a:hover,:host([inverted]) .link:hover{color:var(--px-color-text-state-hover-inverted)}:host([inverted]) a:focus-visible,:host([inverted]) .link:focus-visible{outline-color:var(--px-color-border-focus-outline-inverted)}:host([inverted]) a[aria-disabled=true],:host([inverted]) .link[aria-disabled=true]{color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) ::slotted(a:hover){color:var(--px-color-text-state-hover-inverted)}:host([inverted]) a.skip-link{background-color:var(--px-color-background-container-default-inverted)}:host([inverted]) .icon-link{color:var(--px-color-icon-brand-inverted)}@media only screen and (min-width: 768px){a,.link,::slotted(a){font-size:var(--px-text-size-link-m-tablet)}a:focus-visible,.link:focus-visible{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}a ::slotted([slot="after"]),.link ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-tablet)}a.skip-link{padding:var(--px-padding-xs-tablet)}}@media only screen and (min-width: 1025px){a,.link,::slotted(a){font-size:var(--px-text-size-link-m-laptop)}a:focus-visible,.link:focus-visible{outline-offset:var(--px-focus-offset-laptop);outline-width:var(--px-focus-outline-laptop)}a ::slotted([slot="after"]),.link ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-laptop)}a.skip-link{padding:var(--px-padding-xs-laptop)}}@media only screen and (min-width: 90.0625em){a,.link,::slotted(a){font-size:var(--px-text-size-link-m-desktop)}a:focus-visible,.link:focus-visible{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}a ::slotted([slot="after"]),.link ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-desktop)}a.skip-link{padding:var(--px-padding-xs-desktop)}}', Ht = ".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)}}", Ot = ":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)}}", st = new CSSStyleSheet(), nt = new CSSStyleSheet(), dt = new CSSStyleSheet(), lt = new CSSStyleSheet();
9
- st.replaceSync(it);
10
- nt.replaceSync(at);
11
- dt.replaceSync(Ht);
12
- lt.replaceSync(Ot);
13
- const _t = [
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){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-container-primary-default);min-height:var(--px-spacing-l-mobile);padding:var(--px-padding-xs-mobile) var(--px-padding-m-mobile);border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-mobile) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-mobile) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown):hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown)[disabled],.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown)[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown).loading{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-brand-default);border-color:transparent}.btn.secondary{color:var(--px-color-text-brand-default);background:var(--px-color-background-container-secondary-default);min-height:var(--px-spacing-l-mobile);padding:var(--px-padding-xs-mobile) var(--px-padding-m-mobile);border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn.secondary:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default)}.btn.secondary[disabled],.btn.secondary[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}.btn.secondary.loading{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-brand-default);border-color:transparent}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn.tertiary{background:none;color:var(--px-color-text-brand-default);border-radius:var(--px-radius-pill);border:var(--px-size-border-m) solid transparent;padding:var(--px-padding-2xs-mobile) 0;gap:var(--px-spacing-xs-mobile)}.btn.tertiary ::slotted(px-icon){display:flex;align-items:center;justify-content:center;width:var(--px-size-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{display:flex;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);touch-action:manipulation}.btn.header-dropdown:after{display:inline-block;content:"";width:var(--px-size-icon-xs);height:var(--px-size-icon-xs);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:cover;mask-size:cover;-webkit-mask-position:50% 50%;mask-position:50% 50%;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='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{transform:rotate(180deg)}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){color:var(--px-color-text-brand-default);background:var(--px-color-background-container-primary-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag):hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-state-hover-bordered-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag)[disabled],:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag)[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag).loading{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-brand-inverted);border-color:transparent}:host([inverted]) .btn.secondary{color:var(--px-color-text-brand-inverted);background:var(--px-color-background-container-secondary-inverted)}:host([inverted]) .btn.secondary:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-container-default-inverted)}:host([inverted]) .btn.secondary[disabled],:host([inverted]) .btn.secondary[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .btn.secondary.loading{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-brand-inverted);border-color:transparent}:host([inverted]) .btn.tertiary{color:var(--px-color-text-brand-inverted)}:host([inverted]) .btn.tertiary ::slotted(px-icon){background:var(--px-color-background-container-secondary-inverted)}:host([inverted]) .btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon),:host([inverted]) .btn.tertiary:active:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon){background:transparent}:host([inverted]) .btn.tertiary[disabled],:host([inverted]) .btn.tertiary[aria-disabled=true]{color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .btn.tertiary[disabled] ::slotted(px-icon),:host([inverted]) .btn.tertiary[aria-disabled=true] ::slotted(px-icon){background:var(--px-color-background-state-disabled-inverted)}:host([inverted]) .btn.tertiary.loading{color:var(--px-color-text-brand-inverted)}:host([inverted]) .btn.tertiary.loading ::slotted(px-spinner){background:var(--px-color-background-state-disabled-inverted)}:host([inverted]) .btn.patch:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-state-hover-bordered-inverted)}:host([inverted]) .btn.patch[disabled],:host([inverted]) .btn.patch[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .btn.actionable-tag{background:var(--px-color-background-container-default-default);color:var(--px-color-text-brand-inverted);border-color:var(--px-color-border-neutral-inverted)}:host([inverted]) .btn.actionable-tag:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-state-hover-bordered-inverted);border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) .btn.actionable-tag:active:not([disabled],[aria-disabled=true],.loading){background:var(--px-color-background-state-active-inverted);color:var(--px-color-text-state-active-default);border-color:var(--px-color-border-none-inverted)}:host([inverted]) .btn.actionable-tag[disabled],:host([inverted]) .btn.actionable-tag[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted);border-color:var(--px-color-border-none-default)}:host([inverted]) button.link[disabled],:host([inverted]) button.link[aria-disabled=true]{color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) button.wrapper:focus-visible{outline-color:var(--px-color-border-focus-outline-inverted)}@media only screen and (max-width: 47.938em){.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--mobile=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--mobile=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--mobile=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--mobile=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}}@media only screen and (min-width: 48em) and (max-width: 64em){.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--tablet=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--tablet=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--tablet=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--tablet=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}}@media only screen and (min-width: 48em){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){padding:var(--px-padding-xs-tablet) var(--px-padding-m-tablet)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-tablet) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-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{justify-content:flex-start;align-items:center;gap:var(--px-spacing-xs-tablet);width:inherit;color:var(--px-color-text-brand-default);font-weight:var(--px-font-weight-title);font-size:var(--px-text-size-label-m-tablet);border:none;padding:0;border-radius:0;background:none}}@media only screen and (min-width: 64.0625em) and (max-width: 90em){.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--laptop=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--laptop=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--laptop=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--laptop=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}}@media only screen and (min-width: 64.0625em){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){padding:var(--px-padding-xs-laptop) var(--px-padding-m-laptop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-laptop) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-laptop) * -1)}.btn.secondary{padding:var(--px-padding-xs-laptop) var(--px-padding-m-laptop)}.btn.tertiary{padding:var(--px-padding-2xs-laptop) 0;gap:var(--px-spacing-xs-laptop)}.btn.tertiary: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{gap:var(--px-spacing-xs-laptop);font-size:var(--px-text-size-label-m-laptop);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)[shape--desktop=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--desktop=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--desktop=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--desktop=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown){padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-desktop) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-desktop) * -1)}.btn.secondary{padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn.tertiary{padding:var(--px-padding-2xs-desktop) 0;gap:var(--px-spacing-xs-desktop)}.btn.tertiary: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{gap:var(--px-spacing-xs-desktop);font-size:var(--px-text-size-label-m-desktop);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}a.wrapper:hover,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:hover,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:hover,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:hover,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)}}', Kt = ".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)}}", Xt = ":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(Kt);
12
+ vt.replaceSync(Xt);
13
+ const Ut = [
14
14
  "",
15
15
  "default",
16
16
  "secondary",
@@ -22,15 +22,15 @@ const _t = [
22
22
  "patch-eco",
23
23
  "actionable-tag",
24
24
  "header-dropdown"
25
- ], Ft = [
25
+ ], Jt = [
26
26
  "",
27
27
  "default",
28
28
  "bottom-right",
29
29
  "bottom-left",
30
30
  "alternative"
31
- ], O = class O extends m {
31
+ ], K = class K extends w {
32
32
  constructor() {
33
- super(st, nt, dt, lt), this.template = () => `<button class="btn">
33
+ super(gt, ut, xt, vt), this.template = () => `<button class="btn">
34
34
  <slot name="before"></slot><slot></slot><slot name="after"></slot>
35
35
  </button>`, this.shadowRoot.innerHTML = this.template();
36
36
  }
@@ -55,14 +55,13 @@ const _t = [
55
55
  ];
56
56
  }
57
57
  connectedCallback() {
58
- super.connectedCallback();
59
58
  const t = this.querySelectorAll("px-icon");
60
59
  t && t.forEach((e) => {
61
60
  const o = e.getAttribute("size"), r = e.getAttribute("color");
62
61
  e && (e.addEventListener("click", () => {
63
62
  this.$el.focus();
64
63
  }), o || e.setAttribute("size", "xs"), r || e.setAttribute("color", "inherit"));
65
- }), N(this, this.$el), this.$el.type === "submit" && this.addEventListener("click", (e) => {
64
+ }), it(this, this.$el, !0), this.$el.type === "submit" && this.addEventListener("click", (e) => {
66
65
  var o;
67
66
  e.preventDefault(), (o = this.closest("form")) == null || o.submit();
68
67
  }), this.$el.type === "reset" && this.addEventListener("click", (e) => {
@@ -70,6 +69,8 @@ const _t = [
70
69
  e.preventDefault(), (o = this.closest("form")) == null || o.reset();
71
70
  });
72
71
  }
72
+ disconnectedCallback() {
73
+ }
73
74
  attributeChangedCallback(t, e, o) {
74
75
  if (e !== o)
75
76
  switch (t) {
@@ -89,12 +90,15 @@ const _t = [
89
90
  case "loading":
90
91
  this.updateLoading();
91
92
  break;
93
+ case "disabled":
94
+ super.attributeChangedCallback(t, e, o);
95
+ break;
92
96
  case "shape":
93
97
  case "shape--mobile":
94
98
  case "shape--tablet":
95
99
  case "shape--laptop":
96
100
  case "shape--desktop":
97
- this.updateShape(t, o, Ft);
101
+ this.updateShape(t, o, Jt);
98
102
  break;
99
103
  case "aria-expanded":
100
104
  o && (this.$el.setAttribute("aria-expanded", o), this.removeAttribute("aria-expanded"));
@@ -116,13 +120,15 @@ const _t = [
116
120
  t !== null && t !== "" && t !== "default" && this.checkClass(t), e !== null && e !== "" && e !== "default" && this.checkClass(e);
117
121
  }
118
122
  updateVariant(t, e) {
119
- e === "link" ? this.$el.classList.remove("btn") : this.$el.classList.add("btn"), this._toggleClass(t, e), this.checkName(_t, e) || console.error(
120
- `${e} is not a valid "variant" value for ${e}`
123
+ e === "link" ? this.$el.classList.remove("btn") : this.$el.classList.add("btn"), this._toggleClass(t, e), this.checkName(Ut, e) || d(
124
+ `${e} is not a valid "variant" value for ${this.tagName.toLowerCase()}`
121
125
  );
122
126
  }
123
127
  updateState(t, e) {
124
128
  const o = ["", "default", "success", "error"];
125
- this._toggleClass(t, e), this.checkName(o, e) || console.error(`${e} is not a valid "sate" value`);
129
+ this._toggleClass(t, e), this.checkName(o, e) || d(
130
+ `${e} is not a valid "sate" value for ${this.tagName.toLowerCase()}`
131
+ );
126
132
  }
127
133
  updateExtended(t, e) {
128
134
  e === null ? this.$el.style.setProperty(`--button-${t}`, "") : this.$el.style.setProperty(`--button-${t}`, "100%");
@@ -132,8 +138,10 @@ const _t = [
132
138
  t && (t.getAttribute("size") || t.setAttribute("size", "xs")), this.$el.classList.toggle("loading");
133
139
  }
134
140
  updateShape(t, e, o) {
135
- if (!q(o, e)) {
136
- console.error(`${e} is not a valid shape value`);
141
+ if (!$(o, e)) {
142
+ d(
143
+ `${e} is not a valid shape value for ${this.tagName.toLowerCase()}`
144
+ );
137
145
  return;
138
146
  }
139
147
  e !== null && e !== "" && this.$el.setAttribute(t, e);
@@ -229,10 +237,47 @@ const _t = [
229
237
  t ? this.setAttribute("aria-expanded", t) : this.removeAttribute("aria-expanded");
230
238
  }
231
239
  };
232
- O.nativeName = "button";
233
- let $ = O;
234
- customElements.get("px-button") || customElements.define("px-button", $);
235
- class Wt extends HTMLElement {
240
+ K.nativeName = "button";
241
+ let C = K;
242
+ customElements.get("px-button") || customElements.define("px-button", C);
243
+ var x, T, ft;
244
+ class Qt extends C {
245
+ constructor() {
246
+ super();
247
+ c(this, T);
248
+ c(this, x);
249
+ this.$el.classList.remove("btn"), this.$el.classList.add("wrapper"), k(this, x, new at(
250
+ this,
251
+ this.$el,
252
+ () => P(this, T, ft).call(this)
253
+ ));
254
+ }
255
+ connectedCallback() {
256
+ super.connectedCallback(), n(this, x).connect();
257
+ }
258
+ disconnectedCallback() {
259
+ super.disconnectedCallback(), n(this, x).disconnect();
260
+ }
261
+ attributeChangedCallback(e, o, r) {
262
+ if (o !== r)
263
+ switch (e) {
264
+ case "loading":
265
+ super.attributeChangedCallback(e, o, r), r !== null && n(this, x).clearInteractiveState();
266
+ break;
267
+ case "disabled":
268
+ super.attributeChangedCallback(e, o, r), r !== null && n(this, x).clearInteractiveState();
269
+ break;
270
+ default:
271
+ super.attributeChangedCallback(e, o, r);
272
+ break;
273
+ }
274
+ }
275
+ }
276
+ x = new WeakMap(), T = new WeakSet(), ft = function() {
277
+ return !this.hasAttribute("disabled") && !this.$el.hasAttribute("disabled") && this.getAttribute("aria-disabled") !== "true" && this.$el.getAttribute("aria-disabled") !== "true" && !this.hasAttribute("loading");
278
+ };
279
+ customElements.get("px-button-wrapper") || customElements.define("px-button-wrapper", Qt);
280
+ class Vt extends HTMLElement {
236
281
  constructor() {
237
282
  super();
238
283
  }
@@ -265,8 +310,8 @@ class Wt extends HTMLElement {
265
310
  t && t.remove();
266
311
  }
267
312
  }
268
- customElements.get("px-icon-set") || customElements.define("px-icon-set", Wt);
269
- const jt = [
313
+ customElements.get("px-icon-set") || customElements.define("px-icon-set", Vt);
314
+ const te = [
270
315
  "Brand",
271
316
  "Accent",
272
317
  "Neutral",
@@ -279,33 +324,33 @@ const jt = [
279
324
  "StateHover",
280
325
  "StateActive",
281
326
  "StateDisabled"
282
- ], Yt = ["Inherit", ...jt].map(
327
+ ], ee = ["Inherit", ...te].map(
283
328
  (s) => s.replace(/([A-Z])/g, "-$1").toLowerCase().slice(1)
284
- ), Zt = ":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)}", pt = new CSSStyleSheet();
285
- pt.replaceSync(Zt);
286
- const Gt = [
287
- "name",
288
- "size",
289
- "color",
290
- "aria-label",
291
- "inverted",
292
- "from",
293
- "disabled"
294
- ];
295
- var u, p, z;
296
- class Kt extends Lt {
329
+ ), 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)}", mt = new CSSStyleSheet();
330
+ mt.replaceSync(oe);
331
+ var f, b, E;
332
+ class re extends st {
297
333
  constructor(...e) {
298
334
  var o;
299
- super(...e, pt);
300
- x(this, u);
301
- x(this, p);
302
- x(this, z, () => `<svg aria-hidden="true">
303
- <use xlink:href="#icon-${this.name}"></use>
335
+ super(...e, mt);
336
+ c(this, f);
337
+ c(this, b);
338
+ c(this, E, () => `<svg aria-hidden="true">
339
+ <use></use>
304
340
  </svg>`);
305
- this.shadowRoot.innerHTML = n(this, z).call(this), this.role = "img", y(this, p, (o = this.attachInternals) == null ? void 0 : o.call(this)), n(this, p) && (n(this, p).role = "img");
341
+ 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");
306
342
  }
307
343
  static get observedAttributes() {
308
- return [...super.observedAttributes, ...Gt];
344
+ return [
345
+ ...super.observedAttributes,
346
+ "name",
347
+ "size",
348
+ "color",
349
+ "aria-label",
350
+ "inverted",
351
+ "from",
352
+ "disabled"
353
+ ];
309
354
  }
310
355
  attributeChangedCallback(e, o, r) {
311
356
  if (o !== r)
@@ -314,22 +359,23 @@ class Kt extends Lt {
314
359
  this.updateName(o, r);
315
360
  break;
316
361
  case "size":
317
- this.updateAttribute(e, o, r, Tt);
362
+ this.updateAttribute(e, o, r, Ht);
318
363
  break;
319
364
  case "color":
320
- this.updateAttribute(e, o, r, Yt);
365
+ this.updateAttribute(e, o, r, ee);
321
366
  break;
322
367
  case "disabled":
323
368
  this.color = "state-disabled";
324
369
  break;
325
370
  case "aria-label":
326
- if (!n(this, p))
371
+ if (!n(this, b))
327
372
  return;
328
- r ? (n(this, p).ariaHidden = "false", this.ariaHidden = "false") : (n(this, p).ariaHidden = "true", this.ariaHidden = "true");
373
+ r ? (n(this, b).ariaHidden = "false", this.ariaHidden = "false") : (n(this, b).ariaHidden = "true", this.ariaHidden = "true");
329
374
  break;
330
375
  }
331
376
  }
332
377
  connectedCallback() {
378
+ this.role = "img";
333
379
  const e = document.querySelectorAll("px-icon-set");
334
380
  e || console.log("<px-icon-set> component not found");
335
381
  for (const o of e) {
@@ -337,20 +383,22 @@ class Kt extends Lt {
337
383
  console.error("Icon name or src not found");
338
384
  continue;
339
385
  }
340
- o.getAttribute("name") === this.from && o.getAttribute("type") !== "font" && (y(this, u, o.getAttribute("src")), this.$el.firstElementChild.setAttribute(
341
- "xlink:href",
342
- `${n(this, u)}#icon-${this.name}`
386
+ o.getAttribute("name") === this.from && o.getAttribute("type") !== "font" && (k(this, f, o.getAttribute("src")), this.$el.firstElementChild.setAttribute(
387
+ "href",
388
+ `${n(this, f)}#icon-${this.name}`
343
389
  ));
344
390
  }
345
- !this.ariaLabel && n(this, p) && (n(this, p).ariaHidden = "true", this.ariaHidden = "true");
391
+ !this.ariaLabel && n(this, b) && (n(this, b).ariaHidden = "true", this.ariaHidden = "true");
346
392
  }
347
393
  updateAttribute(e, o, r, i) {
348
- 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) || console.error(`${r} is not an allowed ${e} value`);
394
+ 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(
395
+ `${r} is not an allowed ${e} value for ${this.tagName.toLowerCase()}`
396
+ );
349
397
  }
350
398
  updateName(e, o) {
351
- n(this, u) && this.$el.firstElementChild.setAttribute(
352
- "xlink:href",
353
- `${n(this, u)}#icon-${o}`
399
+ n(this, f) && this.$el.firstElementChild.setAttribute(
400
+ "href",
401
+ `${n(this, f)}#icon-${o}`
354
402
  );
355
403
  }
356
404
  get $el() {
@@ -399,18 +447,18 @@ class Kt extends Lt {
399
447
  this.setAttribute("disabled", e);
400
448
  }
401
449
  }
402
- u = new WeakMap(), p = new WeakMap(), z = new WeakMap();
403
- customElements.get("px-icon") || customElements.define("px-icon", Kt);
404
- const bt = "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-3xl-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-2xl-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-xl-mobile);line-height:var(--px-line-height-ratio-s)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-l-mobile)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-heading-m-mobile)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-heading-base-mobile)}.style-subtitle{font-size:var(--px-text-size-heading-l-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: 768px){::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-5xl-desktop)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-4xl-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-base-desktop)}.style-subtitle{font-size:var(--px-text-size-heading-xl-desktop)}}@media only screen and (min-width: 1025px){::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-5xl-desktop)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-4xl-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-base-desktop)}.style-subtitle{font-size:var(--px-text-size-heading-xl-desktop)}}@media screen and (min-width: 1441px){::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)}}", H = ".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)}", ct = new CSSStyleSheet();
405
- ct.replaceSync(bt);
406
- const ht = new CSSStyleSheet();
407
- ht.replaceSync(H);
408
- class f extends m {
450
+ f = new WeakMap(), b = new WeakMap(), E = new WeakMap();
451
+ customElements.get("px-icon") || customElements.define("px-icon", re);
452
+ 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)}}", Z = ".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();
453
+ yt.replaceSync(kt);
454
+ const At = new CSSStyleSheet();
455
+ At.replaceSync(Z);
456
+ class A extends w {
409
457
  template() {
410
458
  return "<slot></slot>";
411
459
  }
412
460
  constructor(t) {
413
- super(ct, ht);
461
+ super(yt, At);
414
462
  const e = document.createElement(t);
415
463
  e.innerHTML = this.template(), this.shadowRoot.appendChild(e);
416
464
  }
@@ -424,24 +472,25 @@ class f extends m {
424
472
  "text-align--tablet",
425
473
  "text-align--laptop",
426
474
  "text-align--desktop",
427
- "inverted"
475
+ "inverted",
476
+ "auto-spacing"
428
477
  ];
429
478
  }
430
479
  attributeChangedCallback(t, e, o) {
431
480
  if (e !== o)
432
481
  switch (t) {
433
482
  case "variant":
434
- this.updateAttribute(t, e, o, tt);
483
+ this.updateAttribute(t, e, o, dt);
435
484
  break;
436
485
  case "color":
437
- this.updateColor(e, o, D);
486
+ this.updateColor(e, o, Y);
438
487
  break;
439
488
  case "text-align":
440
489
  case "text-align--mobile":
441
490
  case "text-align--tablet":
442
491
  case "text-align--laptop":
443
492
  case "text-align--desktop":
444
- this.updateTextAlign(t, e, o, V);
493
+ this.updateTextAlign(t, e, o, nt);
445
494
  break;
446
495
  default:
447
496
  super.attributeChangedCallback(t, e, o);
@@ -452,11 +501,15 @@ class f extends m {
452
501
  t !== null && t !== "" && t !== "default" && this.$el.classList.toggle(`style-${t}`), e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`style-${e}`);
453
502
  }
454
503
  updateAttribute(t, e, o, r) {
455
- this.checkName(r, o) ? this.toggleClass(e, o) : console.error(`${o} is not an allowed "${t}" value`);
504
+ this.checkName(r, o) ? this.toggleClass(e, o) : d(
505
+ `${o} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
506
+ );
456
507
  }
457
508
  updateColor(t, e, o) {
458
509
  if (!this.checkName(o, e)) {
459
- console.error(`${e} is not a valid color value`);
510
+ d(
511
+ `${e} is not an allowed color value for ${this.tagName.toLowerCase()}`
512
+ );
460
513
  return;
461
514
  }
462
515
  const r = (i) => {
@@ -472,13 +525,15 @@ class f extends m {
472
525
  }
473
526
  updateTextAlign(t, e, o, r) {
474
527
  if (!this.checkName(r, o)) {
475
- console.error(`${o} is not a valid value for ${t}`);
528
+ d(
529
+ `${o} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
530
+ );
476
531
  return;
477
532
  }
478
- const i = (a, d) => {
479
- d !== null && d !== "" && d !== "default" && this.$el.style.setProperty(
533
+ const i = (a, l) => {
534
+ l !== null && l !== "" && l !== "default" && this.$el.style.setProperty(
480
535
  `--heading-text-align--${a}`,
481
- d
536
+ l
482
537
  );
483
538
  };
484
539
  if (t === "text-align")
@@ -538,63 +593,69 @@ class f extends m {
538
593
  set inverted(t) {
539
594
  this.setAttribute("inverted", t);
540
595
  }
596
+ get autoSpacing() {
597
+ return this.hasAttribute("auto-spacing");
598
+ }
599
+ set autoSpacing(t) {
600
+ t ? this.setAttribute("auto-spacing", "") : this.removeAttribute("auto-spacing");
601
+ }
541
602
  }
542
- const _ = class _ extends f {
603
+ const X = class X extends A {
543
604
  constructor() {
544
605
  super("h1");
545
606
  }
546
607
  };
547
- _.nativeName = "h1";
548
- let S = _;
549
- customElements.get("px-h1") || customElements.define("px-h1", S);
550
- const F = class F extends f {
608
+ X.nativeName = "h1";
609
+ let q = X;
610
+ customElements.get("px-h1") || customElements.define("px-h1", q);
611
+ const U = class U extends A {
551
612
  constructor() {
552
613
  super("h2");
553
614
  }
554
615
  };
555
- F.nativeName = "h2";
556
- let w = F;
557
- customElements.get("px-h2") || customElements.define("px-h2", w);
558
- const W = class W extends f {
616
+ U.nativeName = "h2";
617
+ let D = U;
618
+ customElements.get("px-h2") || customElements.define("px-h2", D);
619
+ const J = class J extends A {
559
620
  constructor() {
560
621
  super("h3");
561
622
  }
562
623
  };
563
- W.nativeName = "h3";
564
- let C = W;
565
- customElements.get("px-h3") || customElements.define("px-h3", C);
566
- const j = class j extends f {
624
+ J.nativeName = "h3";
625
+ let H = J;
626
+ customElements.get("px-h3") || customElements.define("px-h3", H);
627
+ const Q = class Q extends A {
567
628
  constructor() {
568
629
  super("h4");
569
630
  }
570
631
  };
571
- j.nativeName = "h4";
572
- let L = j;
573
- customElements.get("px-h4") || customElements.define("px-h4", L);
574
- const Y = class Y extends f {
632
+ Q.nativeName = "h4";
633
+ let j = Q;
634
+ customElements.get("px-h4") || customElements.define("px-h4", j);
635
+ const V = class V extends A {
575
636
  constructor() {
576
637
  super("h5");
577
638
  }
578
639
  };
579
- Y.nativeName = "h5";
580
- let T = Y;
581
- customElements.get("px-h5") || customElements.define("px-h5", T);
582
- const Z = class Z extends f {
640
+ V.nativeName = "h5";
641
+ let O = V;
642
+ customElements.get("px-h5") || customElements.define("px-h5", O);
643
+ const tt = class tt extends A {
583
644
  constructor() {
584
645
  super("h6");
585
646
  }
586
647
  };
587
- Z.nativeName = "h6";
588
- let E = Z;
589
- customElements.get("px-h6") || customElements.define("px-h6", E);
590
- const Xt = ".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}}", gt = new CSSStyleSheet();
591
- gt.replaceSync(Xt);
592
- const Ut = [
648
+ tt.nativeName = "h6";
649
+ let _ = tt;
650
+ customElements.get("px-h6") || customElements.define("px-h6", _);
651
+ 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();
652
+ zt.replaceSync(ie);
653
+ const ae = [
593
654
  "",
594
655
  "default",
595
656
  "horizontal",
596
657
  "vertical"
597
- ], Jt = ["", "default", "none", "s", "m", "l"], Qt = [
658
+ ], se = ["", "default", "none", "s", "m", "l"], ne = [
598
659
  "",
599
660
  "main",
600
661
  "brand",
@@ -606,11 +667,11 @@ const Ut = [
606
667
  "purpose-unlimited",
607
668
  "state-hover",
608
669
  "state-active"
609
- ], G = class G extends m {
670
+ ], B = class B extends w {
610
671
  constructor() {
611
672
  var e;
612
- super(gt);
613
- const t = document.createElement(this.nativeName);
673
+ super(zt);
674
+ const t = document.createElement(B.nativeName);
614
675
  t.classList.add("separator"), this.internals = (e = this.attachInternals) == null ? void 0 : e.call(this), this.shadowRoot.appendChild(t);
615
676
  }
616
677
  static get observedAttributes() {
@@ -638,14 +699,14 @@ const Ut = [
638
699
  t,
639
700
  e,
640
701
  o,
641
- Ut
702
+ ae
642
703
  );
643
704
  break;
644
705
  case "size":
645
- this.updateSize(t, e, o, Jt);
706
+ this.updateSize(t, e, o, se);
646
707
  break;
647
708
  case "color":
648
- this.updateColor(t, e, o, Qt);
709
+ this.updateColor(t, e, o, ne);
649
710
  break;
650
711
  default:
651
712
  super.attributeChangedCallback(t, e, o);
@@ -659,7 +720,9 @@ const Ut = [
659
720
  `var(--px-size-border-${a})`
660
721
  );
661
722
  };
662
- this.checkName(r, o) ? (i(e), i(o)) : console.error(`${o} is not a valid value for ${t}`);
723
+ this.checkName(r, o) ? (i(e), i(o)) : d(
724
+ `${o} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
725
+ );
663
726
  }
664
727
  updateColor(t, e, o, r) {
665
728
  const i = (a) => {
@@ -671,26 +734,30 @@ const Ut = [
671
734
  `var(--px-color-border-${a}-inverted)`
672
735
  ));
673
736
  };
674
- this.checkName(r, o) ? (i(e), i(o)) : console.error(`${o} is not a valid value for ${t}`);
737
+ this.checkName(r, o) ? (i(e), i(o)) : d(
738
+ `${o} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
739
+ );
675
740
  }
676
741
  updateDirection(t, e, o, r) {
677
- const i = (a, d) => {
678
- d !== null && d !== "" && d !== "default" && this.$el.classList.add(`separator-direction-${d}--${a}`);
742
+ const i = (a, l) => {
743
+ l !== null && l !== "" && l !== "default" && this.$el.classList.add(`separator-direction-${l}--${a}`);
679
744
  };
680
745
  if (!this.checkName(r, o))
681
- console.error(`${o} is not a valid value for ${t}`);
746
+ d(
747
+ `${o} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
748
+ );
682
749
  else if (t === "direction")
683
750
  ["mobile", "tablet", "laptop", "desktop"].forEach((a) => {
684
751
  Array.from(this.$el.classList).find(
685
- (k) => k.startsWith("separator-direction-") && k.endsWith(`--${a}`)
752
+ (z) => z.startsWith("separator-direction-") && z.endsWith(`--${a}`)
686
753
  ) || i(a, o);
687
754
  });
688
755
  else {
689
- const a = t.split("--")[1], d = Array.from(this.$el.classList).find(
690
- (k) => k.startsWith("separator-direction-") && k.endsWith(`--${a}`)
756
+ const a = t.split("--")[1], l = Array.from(this.$el.classList).find(
757
+ (z) => z.startsWith("separator-direction-") && z.endsWith(`--${a}`)
691
758
  );
692
- d ? this.$el.classList.replace(
693
- d,
759
+ l ? this.$el.classList.replace(
760
+ l,
694
761
  `separator-direction-${o}--${a}`
695
762
  ) : i(a, o);
696
763
  }
@@ -744,66 +811,92 @@ const Ut = [
744
811
  this.setAttribute("inverted", t);
745
812
  }
746
813
  };
747
- G.nativeName = "hr";
748
- let B = G;
749
- customElements.get("px-separator") || customElements.define("px-separator", B);
750
- const Nt = ':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)}}', Vt = ':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%}.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)}@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)}}@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)) ) )}}@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)) ) )}.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}}', ut = new CSSStyleSheet();
751
- ut.replaceSync(Vt);
752
- const h = (s, t, e) => `:host([${s}${e ? `--${e}` : ""}='${t}']) .container`, g = "px-padding", K = class K extends m {
814
+ B.nativeName = "hr";
815
+ let W = B;
816
+ customElements.get("px-separator") || customElements.define("px-separator", W);
817
+ 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)}}', $t = new CSSStyleSheet();
818
+ $t.replaceSync(le);
819
+ const pe = [
820
+ "top-patch",
821
+ "top-neighbor-patch",
822
+ "top-ribbon",
823
+ "top-neighbor-ribbon",
824
+ "top-patch-and-neighbor-ribbon"
825
+ ], be = [
826
+ "1",
827
+ "2",
828
+ "3",
829
+ "4",
830
+ "5",
831
+ "6",
832
+ "7",
833
+ "8",
834
+ "9",
835
+ "10",
836
+ "11",
837
+ "12"
838
+ ], g = (s, t, e) => `:host([${s}${e ? `--${e}` : ""}='${t}']) .container`, v = "px-padding", ce = [
839
+ h(
840
+ "padding",
841
+ g,
842
+ u,
843
+ v,
844
+ "--container-padding"
845
+ ),
846
+ h(
847
+ "padding-inline",
848
+ g,
849
+ u,
850
+ v
851
+ ),
852
+ h(
853
+ "padding-block",
854
+ g,
855
+ u,
856
+ v
857
+ ),
858
+ h(
859
+ "padding-top",
860
+ g,
861
+ u,
862
+ v
863
+ ),
864
+ h(
865
+ "padding-right",
866
+ g,
867
+ u,
868
+ v,
869
+ "--container-padding-right"
870
+ ),
871
+ h(
872
+ "padding-bottom",
873
+ g,
874
+ u,
875
+ v
876
+ ),
877
+ h(
878
+ "padding-left",
879
+ g,
880
+ u,
881
+ v,
882
+ "--container-padding-left"
883
+ ),
884
+ h(
885
+ "gap",
886
+ g,
887
+ jt,
888
+ "px-spacing",
889
+ void 0,
890
+ "subgrid-gap"
891
+ )
892
+ ], et = class et extends st {
753
893
  constructor() {
754
- super(
755
- ut,
756
- c(
757
- "padding",
758
- h,
759
- b,
760
- g,
761
- "--container-padding"
762
- ),
763
- c(
764
- "padding-inline",
765
- h,
766
- b,
767
- g
768
- ),
769
- c(
770
- "padding-block",
771
- h,
772
- b,
773
- g
774
- ),
775
- c(
776
- "padding-top",
777
- h,
778
- b,
779
- g
780
- ),
781
- c(
782
- "padding-right",
783
- h,
784
- b,
785
- g,
786
- "--container-padding-right"
787
- ),
788
- c(
789
- "padding-bottom",
790
- h,
791
- b,
792
- g
793
- ),
794
- c(
795
- "padding-left",
796
- h,
797
- b,
798
- g,
799
- "--container-padding-left"
800
- )
801
- ), this.template = () => `<div class="container">
894
+ super($t, ...ce), this.template = () => `<div class="container">
802
895
  <slot></slot>
803
896
  <slot name="anchor-left"></slot>
804
897
  <slot name="anchor-right"></slot>
805
898
  <slot name="anchor-full"></slot>
806
- </div>`, this._bgObserver = null, this._isInViewport = !1, this.shadowRoot.innerHTML = this.template();
899
+ </div>`, this._bgObserver = null, this._isInViewport = !1, this.contentObserver = null, this.shadowRoot.innerHTML = this.template();
807
900
  }
808
901
  static get observedAttributes() {
809
902
  return [
@@ -835,11 +928,13 @@ const h = (s, t, e) => `:host([${s}${e ? `--${e}` : ""}='${t}']) .container`, g
835
928
  "background-position",
836
929
  "box-shadow",
837
930
  "anchor-offset",
838
- "inverted"
931
+ "anchor-spacing",
932
+ "inverted",
933
+ "subgrid-rows"
839
934
  ];
840
935
  }
841
936
  connectedCallback() {
842
- super.connectedCallback(), this.padding || (this.padding = "m"), this.backgroundColor || (this.backgroundColor = "surface-light"), this.borderColor || (this.borderColor = "main"), this.$slotAnchor && this.addAnchorClass(), this.contentObserver = new MutationObserver(() => {
937
+ this.padding || (this.padding = "m"), this.backgroundColor || (this.backgroundColor = "surface-light"), this.borderColor || (this.borderColor = "main"), this.$slotAnchor && this.addAnchorClass(), this.contentObserver = new MutationObserver(() => {
843
938
  this.$slotAnchor && this.addAnchorClass();
844
939
  }), this.contentObserver.observe(this, {
845
940
  childList: !0,
@@ -853,14 +948,14 @@ const h = (s, t, e) => `:host([${s}${e ? `--${e}` : ""}='${t}']) .container`, g
853
948
  }), this._bgObserver.observe(this.$el);
854
949
  }
855
950
  disconnectedCallback() {
856
- var t;
857
- (t = this._bgObserver) == null || t.disconnect(), this.contentObserver.disconnect();
951
+ var t, e;
952
+ (t = this._bgObserver) == null || t.disconnect(), (e = this.contentObserver) == null || e.disconnect();
858
953
  }
859
954
  attributeChangedCallback(t, e, o) {
860
955
  if (e !== o)
861
956
  switch (t) {
862
957
  case "border":
863
- this.updateAttribute(t, e, o, Pt);
958
+ this.updateAttribute(t, e, o, Nt);
864
959
  break;
865
960
  case "border-color":
866
961
  this.updateBorderColor(t, o);
@@ -869,14 +964,14 @@ const h = (s, t, e) => `:host([${s}${e ? `--${e}` : ""}='${t}']) .container`, g
869
964
  case "border-side--mobile":
870
965
  case "border-side--tablet":
871
966
  case "border-side--laptop":
872
- this.updateAttribute(t, e, o, It);
967
+ this.updateAttribute(t, e, o, Gt);
873
968
  break;
874
969
  case "border-radius":
875
970
  this.updateAttribute(
876
971
  t,
877
972
  e,
878
973
  o,
879
- Rt
974
+ Ft
880
975
  );
881
976
  break;
882
977
  case "no-border-radius":
@@ -887,7 +982,7 @@ const h = (s, t, e) => `:host([${s}${e ? `--${e}` : ""}='${t}']) .container`, g
887
982
  t,
888
983
  e,
889
984
  o,
890
- Mt
985
+ Wt
891
986
  );
892
987
  break;
893
988
  case "background-color":
@@ -907,7 +1002,7 @@ const h = (s, t, e) => `:host([${s}${e ? `--${e}` : ""}='${t}']) .container`, g
907
1002
  t,
908
1003
  e,
909
1004
  o,
910
- Bt
1005
+ _t
911
1006
  );
912
1007
  break;
913
1008
  case "background-image":
@@ -920,10 +1015,21 @@ const h = (s, t, e) => `:host([${s}${e ? `--${e}` : ""}='${t}']) .container`, g
920
1015
  o !== null && o !== "" && (this.$el.style.backgroundPosition = o);
921
1016
  break;
922
1017
  case "box-shadow":
923
- this.updateAttribute(t, e, o, Et);
1018
+ this.updateAttribute(t, e, o, Ot);
924
1019
  break;
925
1020
  case "anchor-offset":
926
- this.updateAnchorOffset(e, o, b);
1021
+ this.updateAnchorOffset(e, o, u);
1022
+ break;
1023
+ case "anchor-spacing":
1024
+ this.updateAnchorSpacing(e, o, pe);
1025
+ break;
1026
+ case "subgrid-rows":
1027
+ this.updateSubgridRows(
1028
+ t,
1029
+ e,
1030
+ o,
1031
+ be
1032
+ );
927
1033
  break;
928
1034
  default:
929
1035
  super.attributeChangedCallback(t, e, o);
@@ -945,7 +1051,7 @@ const h = (s, t, e) => `:host([${s}${e ? `--${e}` : ""}='${t}']) .container`, g
945
1051
  this.$el.style.setProperty(`--${t}`, `url("${e}")`);
946
1052
  }
947
1053
  updateGradient(t, e) {
948
- if (this.checkName(qt, e)) {
1054
+ if (this.checkName(Yt, e)) {
949
1055
  const o = this.splitAttrNameFromBreakpoint(t);
950
1056
  t = o.attrName;
951
1057
  const r = o.breakpoint;
@@ -954,11 +1060,13 @@ const h = (s, t, e) => `:host([${s}${e ? `--${e}` : ""}='${t}']) .container`, g
954
1060
  `linear-gradient(var(--px-color-background-gradient-${e}))`
955
1061
  );
956
1062
  } else
957
- console.error(`${e} is not an allowed background-gradient value`);
1063
+ d(
1064
+ `${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
1065
+ );
958
1066
  }
959
1067
  updateBackgroundColor(t, e) {
960
1068
  const o = e.startsWith("surface-");
961
- if (this.checkName(et, e)) {
1069
+ if (this.checkName(lt, e)) {
962
1070
  const r = this.splitAttrNameFromBreakpoint(t), i = r.breakpoint;
963
1071
  this.$el.style.setProperty(
964
1072
  `--${r.attrName}${i}`,
@@ -968,20 +1076,26 @@ const h = (s, t, e) => `:host([${s}${e ? `--${e}` : ""}='${t}']) .container`, g
968
1076
  `var(--px-color-background-${e}${o ? "" : "-inverted"})`
969
1077
  );
970
1078
  } else
971
- console.error(`${e} is not an allowed ${t} value`);
1079
+ d(
1080
+ `${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
1081
+ );
972
1082
  }
973
1083
  updateBorderColor(t, e) {
974
- this.checkName(Dt, e) ? (this.$el.style.setProperty(
1084
+ this.checkName(Zt, e) ? (this.$el.style.setProperty(
975
1085
  `--${t}`,
976
1086
  `var(--px-color-border-${e}-default)`
977
1087
  ), this.$el.style.setProperty(
978
1088
  `--${t}-inverted`,
979
1089
  `var(--px-color-border-${e}-inverted)`
980
- )) : console.error(`${e} is not an allowed ${t} value`);
1090
+ )) : d(
1091
+ `${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
1092
+ );
981
1093
  }
982
1094
  updateNoBorderRadius(t, e, o, r) {
983
1095
  if (!this.checkName(r, o))
984
- console.error(`${o} is not an allowed ${t} value`);
1096
+ d(
1097
+ `${o} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
1098
+ );
985
1099
  else {
986
1100
  const i = this.splitAttrNameFromBreakpoint(t), a = i.breakpoint;
987
1101
  e !== null && e !== "" && this.$el.classList.toggle(
@@ -993,7 +1107,9 @@ const h = (s, t, e) => `:host([${s}${e ? `--${e}` : ""}='${t}']) .container`, g
993
1107
  }
994
1108
  updateAttribute(t, e, o, r) {
995
1109
  if (!this.checkName(r, o))
996
- console.error(`${o} is not an allowed ${t} value`);
1110
+ d(
1111
+ `${o} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
1112
+ );
997
1113
  else {
998
1114
  const i = this.splitAttrNameFromBreakpoint(t), a = i.breakpoint;
999
1115
  e !== null && e !== "" && this.$el.classList.toggle(
@@ -1014,8 +1130,10 @@ const h = (s, t, e) => `:host([${s}${e ? `--${e}` : ""}='${t}']) .container`, g
1014
1130
  return { attrName: t, breakpoint: e };
1015
1131
  }
1016
1132
  updateAnchorOffset(t, e, o) {
1017
- if (!q(o, e)) {
1018
- console.error(`${e} is not a valid anchor-offset value`);
1133
+ if (!$(o, e)) {
1134
+ d(
1135
+ `${e} is not a valid anchor-offset value for ${this.tagName.toLowerCase()}`
1136
+ );
1019
1137
  return;
1020
1138
  }
1021
1139
  const r = (i) => {
@@ -1035,6 +1153,36 @@ const h = (s, t, e) => `:host([${s}${e ? `--${e}` : ""}='${t}']) .container`, g
1035
1153
  addAnchorClass() {
1036
1154
  this.$el.classList.contains("anchored") || this.$el.classList.add("anchored");
1037
1155
  }
1156
+ updateAnchorSpacing(t, e, o) {
1157
+ if (!$(o, e)) {
1158
+ d(
1159
+ `${e} is not a valid anchor-spacing value for ${this.tagName.toLowerCase()}`
1160
+ );
1161
+ return;
1162
+ }
1163
+ const r = (i) => {
1164
+ i !== null && i !== "" && i !== "default" && (this.style.setProperty(
1165
+ "--container-anchor-spacing--mobile",
1166
+ `var(--px-spacing-${i}-mobile)`
1167
+ ), this.style.setProperty(
1168
+ "--container-anchor-spacing--tablet",
1169
+ `var(--px-spacing-${i}-tablet)`
1170
+ ), this.style.setProperty(
1171
+ "--container-anchor-spacing--laptop",
1172
+ `var(--px-spacing-${i}-laptop)`
1173
+ ));
1174
+ };
1175
+ r(t), r(e);
1176
+ }
1177
+ updateSubgridRows(t, e, o, r) {
1178
+ $(r, o) ? this.style.setProperty(`--${t}`, o) : d(
1179
+ `${o} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
1180
+ );
1181
+ }
1182
+ get $el() {
1183
+ var t;
1184
+ return (t = this == null ? void 0 : this.shadowRoot) == null ? void 0 : t.querySelector(".container");
1185
+ }
1038
1186
  get $slotAnchor() {
1039
1187
  return this.querySelector('[slot^="anchor"]');
1040
1188
  }
@@ -1368,23 +1516,59 @@ const h = (s, t, e) => `:host([${s}${e ? `--${e}` : ""}='${t}']) .container`, g
1368
1516
  set anchorOffset(t) {
1369
1517
  this.setAttribute("anchor-offset", t);
1370
1518
  }
1519
+ get anchorSpacing() {
1520
+ return this.getAttribute("anchor-spacing");
1521
+ }
1522
+ set anchorSpacing(t) {
1523
+ this.setAttribute("anchor-spacing", t);
1524
+ }
1371
1525
  get inverted() {
1372
- return this.getAttribute("inverted");
1526
+ return this.hasAttribute("inverted");
1373
1527
  }
1374
1528
  set inverted(t) {
1375
- this.setAttribute("inverted", t);
1529
+ t ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
1530
+ }
1531
+ get subgridRows() {
1532
+ return this.getAttribute("subgrid-rows");
1533
+ }
1534
+ set subgridRows(t) {
1535
+ this.setAttribute("subgrid-rows", t);
1536
+ }
1537
+ get subgridGap() {
1538
+ return this.getAttribute("subgrid-gap");
1539
+ }
1540
+ set subgridGap(t) {
1541
+ this.setAttribute("subgrid-gap", t);
1542
+ }
1543
+ get subgridGapMobile() {
1544
+ return this.getAttribute("subgrid-gap--mobile");
1545
+ }
1546
+ set subgridGapMobile(t) {
1547
+ this.setAttribute("subgrid-gap--mobile", t);
1548
+ }
1549
+ get subgridGapTablet() {
1550
+ return this.getAttribute("subgrid-gap--tablet");
1551
+ }
1552
+ set subgridGapTablet(t) {
1553
+ this.setAttribute("subgrid-gap--tablet", t);
1554
+ }
1555
+ get subgridGapLaptop() {
1556
+ return this.getAttribute("subgrid-gap--laptop");
1557
+ }
1558
+ set subgridGapLaptop(t) {
1559
+ this.setAttribute("subgrid-gap--laptop", t);
1376
1560
  }
1377
1561
  };
1378
- K.nativeName = "div";
1379
- let M = K;
1380
- customElements.get("px-container") || customElements.define("px-container", M);
1381
- const xt = new CSSStyleSheet();
1382
- xt.replaceSync(Nt);
1383
- class te extends HTMLElement {
1562
+ et.nativeName = "div";
1563
+ let F = et;
1564
+ customElements.get("px-container") || customElements.define("px-container", F);
1565
+ const wt = new CSSStyleSheet();
1566
+ wt.replaceSync(de);
1567
+ class he extends HTMLElement {
1384
1568
  constructor() {
1385
1569
  super(), this.template = () => `
1386
- <px-container border-radius="none" padding-inline="none" background-color="${this.backgroundColor}">
1387
- <div class="content-wrapper ${this.$slotOverlap ? "overlapped" : ""}">
1570
+ <px-container border-radius="none" padding-inline="none">
1571
+ <div class="content-wrapper">
1388
1572
  <px-vstack gap="heading-to-content">
1389
1573
  <slot name="heading"></slot>
1390
1574
  <px-vstack gap="none">
@@ -1396,9 +1580,10 @@ class te extends HTMLElement {
1396
1580
  <div class="content-wrapper">
1397
1581
  <slot name="overlap"></slot>
1398
1582
  </div>
1399
- `, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [xt];
1583
+ `, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [wt];
1400
1584
  }
1401
1585
  connectedCallback() {
1586
+ this.$container.setAttribute("background-color", this.backgroundColor), this.$slotOverlap && this.shadowRoot.firstElementChild.querySelector(".content-wrapper").classList.add("overlapped");
1402
1587
  const t = this.querySelector('[slot="heading"]');
1403
1588
  !this.paddingBlock && !this.paddingTop && !this.paddingBottom && !this.paddingBlockMobile && !this.paddingTopMobile && !this.paddingBottomMobile && !this.paddingBlockTablet && !this.paddingTopTablet && !this.paddingBottomTablet && !this.paddingBlockLaptop && !this.paddingTopLaptop && !this.paddingBottomLaptop && (this.$container.paddingBlock = "none"), t || this.shadowRoot.querySelector("px-vstack").setAttribute("gap", "none");
1404
1589
  }
@@ -1438,7 +1623,7 @@ class te extends HTMLElement {
1438
1623
  if (e !== o)
1439
1624
  switch (t) {
1440
1625
  case "background-color":
1441
- this.$container.backgroundColor = et.indexOf(o) > 0 ? o : "none";
1626
+ this.$container.backgroundColor = lt.indexOf(o) > 0 ? o : "none";
1442
1627
  break;
1443
1628
  case "background-gradient":
1444
1629
  this.$container.gradient = this.gradient;
@@ -1668,14 +1853,14 @@ class te extends HTMLElement {
1668
1853
  this.setAttribute("border-side--laptop", t);
1669
1854
  }
1670
1855
  }
1671
- customElements.get("px-section") || customElements.define("px-section", te);
1672
- const ee = "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)}}", vt = new CSSStyleSheet(), mt = new CSSStyleSheet(), ft = new CSSStyleSheet();
1673
- vt.replaceSync(ee);
1674
- mt.replaceSync(H);
1675
- ft.replaceSync(bt);
1676
- const X = class X extends m {
1856
+ customElements.get("px-section") || customElements.define("px-section", he);
1857
+ 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();
1858
+ St.replaceSync(ge);
1859
+ Ct.replaceSync(Z);
1860
+ Lt.replaceSync(kt);
1861
+ const ot = class ot extends w {
1677
1862
  constructor() {
1678
- super(mt, ft, vt), this.template = () => "<p><slot></slot></p>", this.shadowRoot.innerHTML = this.template();
1863
+ super(Ct, Lt, St), this.template = "<p><slot></slot></p>", this.shadowRoot.innerHTML = this.template;
1679
1864
  }
1680
1865
  static get observedAttributes() {
1681
1866
  return [
@@ -1696,22 +1881,22 @@ const X = class X extends m {
1696
1881
  if (e !== o)
1697
1882
  switch (t) {
1698
1883
  case "variant":
1699
- this.updateVariant(t, e, o, tt);
1884
+ this.updateVariant(t, e, o, dt);
1700
1885
  break;
1701
1886
  case "color":
1702
- this.updateTypography(t, e, o, D);
1887
+ this.updateTypography(t, e, o, Y);
1703
1888
  break;
1704
1889
  case "font-size":
1705
- this.updateTypography(t, e, o, rt);
1890
+ this.updateTypography(t, e, o, bt);
1706
1891
  break;
1707
1892
  case "font-weight":
1708
- this.updateTypography(t, e, o, ot);
1893
+ this.updateTypography(t, e, o, pt);
1709
1894
  break;
1710
1895
  case "text-align":
1711
1896
  case "text-align--mobile":
1712
1897
  case "text-align--tablet":
1713
1898
  case "text-align--laptop":
1714
- this.updateTypography(t, e, o, V);
1899
+ this.updateTypography(t, e, o, nt);
1715
1900
  break;
1716
1901
  case "disabled":
1717
1902
  this.color = "state-disabled";
@@ -1725,11 +1910,15 @@ const X = class X extends m {
1725
1910
  t !== null && t !== "" && t !== "default" && this.$el.classList.toggle(`style-${t}`), e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`style-${e}`);
1726
1911
  }
1727
1912
  updateVariant(t, e, o, r) {
1728
- this.checkName(r, o) ? this.toggleClass(e, o) : console.error(`${o} is not a valid value for ${t}`);
1913
+ this.checkName(r, o) ? this.toggleClass(e, o) : d(
1914
+ `${o} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
1915
+ );
1729
1916
  }
1730
1917
  updateTypography(t, e, o, r) {
1731
1918
  if (!this.checkName(r, o))
1732
- console.error(`${o} is not an allowed ${t} value`);
1919
+ d(
1920
+ `${o} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
1921
+ );
1733
1922
  else {
1734
1923
  const i = this.splitAttrNameFromBreakpoint(t), a = i.breakpoint;
1735
1924
  e !== null && e !== "" && this.$el.classList.toggle(
@@ -1810,10 +1999,10 @@ const X = class X extends m {
1810
1999
  this.setAttribute("disabled", t);
1811
2000
  }
1812
2001
  };
1813
- X.nativeName = "p";
1814
- let R = X;
1815
- customElements.get("px-p") || customElements.define("px-p", R);
1816
- class oe extends HTMLElement {
2002
+ ot.nativeName = "p";
2003
+ let G = ot;
2004
+ customElements.get("px-p") || customElements.define("px-p", G);
2005
+ class ue extends HTMLElement {
1817
2006
  constructor() {
1818
2007
  super(), this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = `
1819
2008
  <button aria-hidden="true" style="width: 0; height: 0; border: 0; background-color: #00000000;"></button>
@@ -1827,16 +2016,16 @@ class oe extends HTMLElement {
1827
2016
  });
1828
2017
  }
1829
2018
  }
1830
- customElements.get("px-mdd-closer") || customElements.define("px-mdd-closer", oe);
1831
- const re = ":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)}}", kt = new CSSStyleSheet();
1832
- kt.replaceSync(re);
1833
- var v, l, I, yt, A, At;
1834
- class ie extends HTMLElement {
2019
+ customElements.get("px-mdd-closer") || customElements.define("px-mdd-closer", ue);
2020
+ 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:32px;right:16px}#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:32px}}px-p{display:none}@media screen and (max-width: 767px){px-p{display:block;padding-bottom:32px}}#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();
2021
+ Tt.replaceSync(xe);
2022
+ var y, p, N, Et, S, Bt;
2023
+ class ve extends HTMLElement {
1835
2024
  constructor() {
1836
2025
  var e;
1837
2026
  super();
1838
- x(this, l);
1839
- x(this, v);
2027
+ c(this, p);
2028
+ c(this, y);
1840
2029
  this.template = `<dialog>
1841
2030
  <px-section>
1842
2031
  <px-container
@@ -1893,7 +2082,7 @@ class ie extends HTMLElement {
1893
2082
  <slot name="mdd-footer"></slot>
1894
2083
  </px-hstack>
1895
2084
  </px-section>
1896
- </dialog>`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template, this.shadowRoot.adoptedStyleSheets = [kt], this.internals = (e = this.attachInternals) == null ? void 0 : e.call(this), this.role = "menu", this.internals && (this.internals.role = "menu");
2085
+ </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");
1897
2086
  }
1898
2087
  static get observedAttributes() {
1899
2088
  return ["hidden", "name", "close-button-aria-label", "back-to-menu-label"];
@@ -1926,14 +2115,14 @@ class ie extends HTMLElement {
1926
2115
  }
1927
2116
  })
1928
2117
  );
1929
- }), this.getAttribute("name") === "__lavender_mobile_menu" && (n(this, l, I).style.visibility = "hidden"), this.getAttribute("name") !== "__lavender_mobile_menu" && (n(this, l, yt).innerText = ((o = (e = this.closest("px-header")) == null ? void 0 : e.querySelector(
2118
+ }), this.getAttribute("name") === "__lavender_mobile_menu" && (n(this, p, N).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(
1930
2119
  `px-header-item[for="${this.getAttribute("name")}"]`
1931
- )) == null ? void 0 : o.innerText) ?? ""), this.$slotMddFooter || (n(this, l, A).style.display = "none"), y(this, v, new MutationObserver(() => {
1932
- this.$slotMddFooter && (n(this, l, A).style.display = "block");
1933
- })), n(this, v).observe(this, { childList: !0, subtree: !0 });
2120
+ )) == null ? void 0 : o.innerText) ?? ""), this.$slotMddFooter || (n(this, p, S).style.display = "none"), k(this, y, new MutationObserver(() => {
2121
+ this.$slotMddFooter && (n(this, p, S).style.display = "block");
2122
+ })), n(this, y).observe(this, { childList: !0, subtree: !0 });
1934
2123
  }
1935
2124
  disconnectedCallback() {
1936
- n(this, v).disconnect();
2125
+ n(this, y).disconnect();
1937
2126
  }
1938
2127
  attributeChangedCallback(e, o, r) {
1939
2128
  if (e === "name" && !r)
@@ -1941,15 +2130,15 @@ class ie extends HTMLElement {
1941
2130
  if (e === "name" && (this.id = r), e === "hidden" && this.internals) {
1942
2131
  const i = r === "true" || r === "" ? "true" : "false";
1943
2132
  this.internals.ariaHidden = i, this.ariaHidden = i;
1944
- const d = n(this, l, A).offsetHeight / parseFloat(getComputedStyle(document.documentElement).fontSize);
2133
+ const l = n(this, p, S).offsetHeight / parseFloat(getComputedStyle(document.documentElement).fontSize);
1945
2134
  this.style.setProperty(
1946
2135
  "--mdd-section-container-padding-bottom",
1947
- `${d}em`
2136
+ `${l}em`
1948
2137
  );
1949
2138
  }
1950
- e === "close-button-aria-label" && n(this, l, At).forEach((i) => {
2139
+ e === "close-button-aria-label" && n(this, p, Bt).forEach((i) => {
1951
2140
  r ? i.setAttribute("aria-label", r || "Close") : i.removeAttribute("aria-label");
1952
- }), e === "back-to-menu-label" && (n(this, l, I).innerHTML = `
2141
+ }), e === "back-to-menu-label" && (n(this, p, N).innerHTML = `
1953
2142
  <px-icon name="chevron_left" from="lavender"></px-icon>
1954
2143
  ${r || "Back to menu"}
1955
2144
  `);
@@ -1992,19 +2181,19 @@ class ie extends HTMLElement {
1992
2181
  this.$dialog.style.setProperty("--mdd-dialog-offset-top", e);
1993
2182
  }
1994
2183
  }
1995
- v = new WeakMap(), l = new WeakSet(), I = function() {
2184
+ y = new WeakMap(), p = new WeakSet(), N = function() {
1996
2185
  return this.shadowRoot.querySelector("#back-button");
1997
- }, yt = function() {
2186
+ }, Et = function() {
1998
2187
  return this.shadowRoot.querySelector("px-p");
1999
- }, A = function() {
2188
+ }, S = function() {
2000
2189
  return this.shadowRoot.querySelector("#footer");
2001
- }, At = function() {
2190
+ }, Bt = function() {
2002
2191
  return this.shadowRoot.querySelectorAll("px-button-icon");
2003
2192
  };
2004
- customElements.get("px-mdd") || customElements.define("px-mdd", ie);
2005
- const ae = ':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)}}', zt = new CSSStyleSheet();
2006
- zt.replaceSync(ae);
2007
- class se extends HTMLElement {
2193
+ customElements.get("px-mdd") || customElements.define("px-mdd", ve);
2194
+ const fe = ':host{flex-basis:25%}@media screen and (max-width: 767px){: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)}}', Mt = new CSSStyleSheet();
2195
+ Mt.replaceSync(fe);
2196
+ class me extends HTMLElement {
2008
2197
  constructor() {
2009
2198
  super(), this.template = `<px-vstack gap="default">
2010
2199
  <px-p font-size="heading-l" font-weight="title">
@@ -2018,7 +2207,7 @@ class se extends HTMLElement {
2018
2207
  <px-vstack gap="default" gap--mobile="default">
2019
2208
  <slot name="footer"></slot>
2020
2209
  </px-vstack>
2021
- </px-vstack>`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template, this.shadowRoot.adoptedStyleSheets = [zt];
2210
+ </px-vstack>`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template, this.shadowRoot.adoptedStyleSheets = [Mt];
2022
2211
  }
2023
2212
  connectedCallback() {
2024
2213
  this.$slotTitle || this.$title.setAttribute("hidden", ""), this.setupForId();
@@ -2057,12 +2246,12 @@ class se extends HTMLElement {
2057
2246
  t ? this.setAttribute("hidden-title", "") : this.removeAttribute("hidden-title");
2058
2247
  }
2059
2248
  }
2060
- customElements.get("px-mdd-section") || customElements.define("px-mdd-section", se);
2061
- const $t = new CSSStyleSheet(), St = new CSSStyleSheet(), wt = new CSSStyleSheet();
2062
- $t.replaceSync(at);
2063
- St.replaceSync(it);
2064
- wt.replaceSync(H);
2065
- const ne = [...rt, "link-m", "link-s"], de = [
2249
+ customElements.get("px-mdd-section") || customElements.define("px-mdd-section", me);
2250
+ const Rt = new CSSStyleSheet(), It = new CSSStyleSheet(), Pt = new CSSStyleSheet();
2251
+ Rt.replaceSync(ht);
2252
+ It.replaceSync(ct);
2253
+ Pt.replaceSync(Z);
2254
+ const ke = [...bt, "link-m", "link-s"], ye = [
2066
2255
  "link",
2067
2256
  "no-style",
2068
2257
  "skip-link",
@@ -2070,10 +2259,10 @@ const ne = [...rt, "link-m", "link-s"], de = [
2070
2259
  "btn-secondary",
2071
2260
  "btn-tertiary",
2072
2261
  "icon-link"
2073
- ], le = ["", "default", "alternative"], U = class U extends m {
2262
+ ], Ae = ["", "default", "alternative"], M = class M extends w {
2074
2263
  constructor() {
2075
- super($t, St, wt), this.template = () => '<slot name="before"></slot><slot></slot><slot name="after"></slot>';
2076
- const t = document.createElement(this.nativeName);
2264
+ super(Rt, It, Pt), this.template = () => '<slot name="before"></slot><slot></slot><slot name="after"></slot>';
2265
+ const t = document.createElement(M.nativeName);
2077
2266
  t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
2078
2267
  }
2079
2268
  static get observedAttributes() {
@@ -2099,7 +2288,9 @@ const ne = [...rt, "link-m", "link-s"], de = [
2099
2288
  ];
2100
2289
  }
2101
2290
  connectedCallback() {
2102
- super.connectedCallback(), this.$before && this.$before.localName === "px-icon" && this.configureBeforeAfterIcon(this.$before), this.$after && this.$after.localName === "px-icon" && this.configureBeforeAfterIcon(this.$after), N(this, this.$el, !1);
2291
+ 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);
2292
+ }
2293
+ disconnectedCallback() {
2103
2294
  }
2104
2295
  attributeChangedCallback(t, e, o) {
2105
2296
  if (e !== o)
@@ -2115,7 +2306,7 @@ const ne = [...rt, "link-m", "link-s"], de = [
2115
2306
  case "shape--tablet":
2116
2307
  case "shape--laptop":
2117
2308
  case "shape--desktop":
2118
- this.updateShape(t, o, le);
2309
+ this.updateShape(t, o, Ae);
2119
2310
  break;
2120
2311
  case "extended":
2121
2312
  case "extended--mobile":
@@ -2129,14 +2320,14 @@ const ne = [...rt, "link-m", "link-s"], de = [
2129
2320
  t,
2130
2321
  e,
2131
2322
  o,
2132
- ne
2323
+ ke
2133
2324
  );
2134
2325
  break;
2135
2326
  case "color":
2136
- this.updateTypography(t, e, o, D);
2327
+ this.updateTypography(t, e, o, Y);
2137
2328
  break;
2138
2329
  case "font-weight":
2139
- this.updateTypography(t, e, o, ot);
2330
+ this.updateTypography(t, e, o, pt);
2140
2331
  break;
2141
2332
  case "title":
2142
2333
  o && (this.$el.setAttribute("title", o), this.removeAttribute("title"));
@@ -2161,17 +2352,23 @@ const ne = [...rt, "link-m", "link-s"], de = [
2161
2352
  this.$el.classList.toggle(t);
2162
2353
  }
2163
2354
  updateVariant(t, e) {
2164
- t !== null && t !== "" && t !== "link" && this._toggleClassList(t), e !== null && e !== "" && e !== "link" && this._toggleClassList(e), this.checkName(de, e) || console.error(`Bad "variant" value for ${e}`), e === "icon-link" && this.$iconNotBeforeAfter.setAttribute("color", "inherit");
2355
+ t !== null && t !== "" && t !== "link" && this._toggleClassList(t), e !== null && e !== "" && e !== "link" && this._toggleClassList(e), this.checkName(ye, e) || d(
2356
+ `${e} is not an allowed variant value for ${this.tagName.toLowerCase()}`
2357
+ ), e === "icon-link" && this.$iconNotBeforeAfter.setAttribute("color", "inherit");
2165
2358
  }
2166
2359
  updateShape(t, e, o) {
2167
- if (!q(o, e)) {
2168
- console.error(`${e} is not a valid shape value`);
2360
+ if (!$(o, e)) {
2361
+ d(
2362
+ `${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
2363
+ );
2169
2364
  return;
2170
2365
  }
2171
2366
  e !== null && e !== "" && this.$el.setAttribute(t, e);
2172
2367
  }
2173
2368
  updateTypography(t, e, o, r) {
2174
- 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) || console.error(`Bad ${t} value: ${o}`);
2369
+ 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(
2370
+ `${o} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
2371
+ );
2175
2372
  }
2176
2373
  updateExtended(t, e) {
2177
2374
  e === null ? this.$el.style.setProperty(`--button-${t}`, "") : this.$el.style.setProperty(`--button-${t}`, "100%");
@@ -2290,12 +2487,46 @@ const ne = [...rt, "link-m", "link-s"], de = [
2290
2487
  t ? this.setAttribute("title", t) : this.removeAttribute("title");
2291
2488
  }
2292
2489
  };
2293
- U.nativeName = "a";
2294
- let P = U;
2295
- customElements.get("px-a") || customElements.define("px-a", P);
2296
- const pe = '.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)}}', Ct = new CSSStyleSheet();
2297
- Ct.replaceSync(pe);
2298
- class be extends HTMLElement {
2490
+ M.nativeName = "a";
2491
+ let L = M;
2492
+ customElements.get("px-a") || customElements.define("px-a", L);
2493
+ var m, R, qt;
2494
+ class ze extends L {
2495
+ constructor() {
2496
+ super();
2497
+ c(this, R);
2498
+ c(this, m);
2499
+ this.$el.classList.add("wrapper"), k(this, m, new at(
2500
+ this,
2501
+ this.$el,
2502
+ () => P(this, R, qt).call(this)
2503
+ ));
2504
+ }
2505
+ connectedCallback() {
2506
+ super.connectedCallback(), n(this, m).connect();
2507
+ }
2508
+ disconnectedCallback() {
2509
+ super.disconnectedCallback(), n(this, m).disconnect();
2510
+ }
2511
+ attributeChangedCallback(e, o, r) {
2512
+ if (o !== r)
2513
+ switch (e) {
2514
+ case "disabled":
2515
+ super.attributeChangedCallback(e, o, r), r !== null && n(this, m).clearInteractiveState();
2516
+ break;
2517
+ default:
2518
+ super.attributeChangedCallback(e, o, r);
2519
+ break;
2520
+ }
2521
+ }
2522
+ }
2523
+ m = new WeakMap(), R = new WeakSet(), qt = function() {
2524
+ return !this.hasAttribute("disabled") && this.$el.getAttribute("aria-disabled") !== "true";
2525
+ };
2526
+ customElements.get("px-a-wrapper") || customElements.define("px-a-wrapper", ze);
2527
+ const $e = '.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)}}', Dt = new CSSStyleSheet();
2528
+ Dt.replaceSync($e);
2529
+ class we extends HTMLElement {
2299
2530
  constructor() {
2300
2531
  var t;
2301
2532
  super(), this.template = `
@@ -2306,7 +2537,7 @@ class be extends HTMLElement {
2306
2537
  </span>
2307
2538
  <px-spacer></px-spacer>
2308
2539
  <px-icon name="chevron_right" from="lavender"></px-icon>
2309
- </px-hstack>`, this.attachShadow({ mode: "open" }), this.shadowRoot.adoptedStyleSheets = [Ct], this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this), this.role = "listitem", this.internals && (this.internals.role = "listitem");
2540
+ </px-hstack>`, this.attachShadow({ mode: "open" }), this.shadowRoot.adoptedStyleSheets = [Dt], this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this), this.role = "listitem", this.internals && (this.internals.role = "listitem");
2310
2541
  }
2311
2542
  static get observedAttributes() {
2312
2543
  return ["href", "for"];
@@ -2355,9 +2586,9 @@ class be extends HTMLElement {
2355
2586
  );
2356
2587
  }
2357
2588
  }
2358
- customElements.get("px-mdd-section-item") || customElements.define("px-mdd-section-item", be);
2589
+ customElements.get("px-mdd-section-item") || customElements.define("px-mdd-section-item", we);
2359
2590
  export {
2360
- se as MddSection,
2361
- be as MddSectionItem,
2362
- ie as MegaDropDown
2591
+ me as MddSection,
2592
+ we as MddSectionItem,
2593
+ ve as MegaDropDown
2363
2594
  };