@proximus/lavender-mega-dropdown 2.0.0-alpha.17 → 2.0.0-alpha.170

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 (4) hide show
  1. package/dist/MddSectionItem.d.ts +5 -5
  2. package/dist/MegaDropDown.d.ts +6 -6
  3. package/dist/index.es.js +2316 -2325
  4. package/package.json +2 -2
package/dist/index.es.js CHANGED
@@ -1,255 +1,286 @@
1
- var J = (s) => {
2
- throw TypeError(s);
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)), v = (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), A = (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 y, transferAccessibilityAttributes as V, log as d, checkName as O, WithExtraAttributes as Tt, iconSizeValuesKC as Et, textalignValues as tt, colorValues as _, headingValues as et, cssTokenBreakpoints as h, paddingValues as c, VerticallyExtendedElement as Bt, boxShadowValues as Mt, backgroundSizeValues as Rt, noBorderRadiusValues as It, borderRadiusValues as Pt, borderSideValues as qt, borderValues as Dt, gradientValues as Ht, backgroundColorValues as ot, borderColorValues as Ot, fontweightValues as rt, fontsizeValues as it } from "@proximus/lavender-common";
1
+ import { PxElement as e, WithExtraAttributes as t, WrappedInteractiveStateController as n, backgroundColorValues as r, backgroundSizeValues as i, booleanPropertyToAttributeSetter as a, borderColorValues as o, borderRadiusValues as ee, borderSideValues as te, borderValues as ne, boxShadowValues as re, checkName as s, colorValues as c, cssTokenBreakpoints as l, fontsizeValues as u, fontweightValues as d, gapValues as ie, gradientValues as f, headingValues as p, iconSizeValuesKC as ae, log as m, noBorderRadiusValues as oe, paddingValues as h, propertyToAttributeSetter as g, textalignValues as _, transferAccessibilityAttributes as v } from "@proximus/lavender-common";
7
2
  import "@proximus/lavender-layout";
8
- const at = `.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)}}`, st = ':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)}}', _t = ".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)}}", Ft = ":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)}}", nt = new CSSStyleSheet(), dt = new CSSStyleSheet(), lt = new CSSStyleSheet(), pt = new CSSStyleSheet();
9
- nt.replaceSync(at);
10
- dt.replaceSync(st);
11
- lt.replaceSync(_t);
12
- pt.replaceSync(Ft);
13
- const Nt = [
14
- "",
15
- "default",
16
- "secondary",
17
- "tertiary",
18
- "link",
19
- "patch",
20
- "patch-info",
21
- "patch-black-friday",
22
- "patch-eco",
23
- "actionable-tag",
24
- "header-dropdown"
25
- ], Wt = [
26
- "",
27
- "default",
28
- "bottom-right",
29
- "bottom-left",
30
- "alternative"
31
- ], N = class N extends y {
32
- constructor() {
33
- super(nt, dt, lt, pt), this.template = () => `<button class="btn">
34
- <slot name="before"></slot><slot></slot><slot name="after"></slot>
35
- </button>`, this.shadowRoot.innerHTML = this.template();
36
- }
37
- static get observedAttributes() {
38
- return [
39
- ...super.observedAttributes,
40
- "variant",
41
- "state",
42
- "loading",
43
- "shape",
44
- "shape--mobile",
45
- "shape--tablet",
46
- "shape--laptop",
47
- "shape--desktop",
48
- "inverted",
49
- "aria-expanded",
50
- "extended",
51
- "extended--mobile",
52
- "extended--tablet",
53
- "extended--laptop",
54
- "extended--desktop"
55
- ];
56
- }
57
- connectedCallback() {
58
- const t = this.querySelectorAll("px-icon");
59
- t && t.forEach((e) => {
60
- const o = e.getAttribute("size"), r = e.getAttribute("color");
61
- e && (e.addEventListener("click", () => {
62
- this.$el.focus();
63
- }), o || e.setAttribute("size", "xs"), r || e.setAttribute("color", "inherit"));
64
- }), V(this, this.$el), this.$el.type === "submit" && this.addEventListener("click", (e) => {
65
- var o;
66
- e.preventDefault(), (o = this.closest("form")) == null || o.submit();
67
- }), this.$el.type === "reset" && this.addEventListener("click", (e) => {
68
- var o;
69
- e.preventDefault(), (o = this.closest("form")) == null || o.reset();
70
- });
71
- }
72
- attributeChangedCallback(t, e, o) {
73
- if (e !== o)
74
- switch (t) {
75
- case "variant":
76
- this.updateVariant(e, o);
77
- break;
78
- case "state":
79
- this.updateState(e, o);
80
- break;
81
- case "extended":
82
- case "extended--mobile":
83
- case "extended--tablet":
84
- case "extended--laptop":
85
- case "extended--desktop":
86
- this.updateExtended(t, o);
87
- break;
88
- case "loading":
89
- this.updateLoading();
90
- break;
91
- case "shape":
92
- case "shape--mobile":
93
- case "shape--tablet":
94
- case "shape--laptop":
95
- case "shape--desktop":
96
- this.updateShape(t, o, Wt);
97
- break;
98
- case "aria-expanded":
99
- o && (this.$el.setAttribute("aria-expanded", o), this.removeAttribute("aria-expanded"));
100
- break;
101
- default:
102
- super.attributeChangedCallback(t, e, o);
103
- break;
104
- }
105
- }
106
- checkClass(t) {
107
- if (t.startsWith("patch-")) {
108
- const e = t.split(/-(.*)/s);
109
- for (const o of e)
110
- o != "" && this.$el.classList.toggle(o);
111
- } else
112
- this.$el.classList.toggle(t);
113
- }
114
- _toggleClass(t, e) {
115
- t !== null && t !== "" && t !== "default" && this.checkClass(t), e !== null && e !== "" && e !== "default" && this.checkClass(e);
116
- }
117
- updateVariant(t, e) {
118
- e === "link" ? this.$el.classList.remove("btn") : this.$el.classList.add("btn"), this._toggleClass(t, e), this.checkName(Nt, e) || d(
119
- `${e} is not a valid "variant" value for ${this.tagName.toLowerCase()}`
120
- );
121
- }
122
- updateState(t, e) {
123
- const o = ["", "default", "success", "error"];
124
- this._toggleClass(t, e), this.checkName(o, e) || d(
125
- `${e} is not a valid "sate" value for ${this.tagName.toLowerCase()}`
126
- );
127
- }
128
- updateExtended(t, e) {
129
- e === null ? this.$el.style.setProperty(`--button-${t}`, "") : this.$el.style.setProperty(`--button-${t}`, "100%");
130
- }
131
- updateLoading() {
132
- const t = this.querySelector("px-spinner");
133
- t && (t.getAttribute("size") || t.setAttribute("size", "xs")), this.$el.classList.toggle("loading");
134
- }
135
- updateShape(t, e, o) {
136
- if (!O(o, e)) {
137
- d(
138
- `${e} is not a valid shape value for ${this.tagName.toLowerCase()}`
139
- );
140
- return;
141
- }
142
- e !== null && e !== "" && this.$el.setAttribute(t, e);
143
- }
144
- get variant() {
145
- return this.getAttribute("variant");
146
- }
147
- set variant(t) {
148
- this.setAttribute("variant", t);
149
- }
150
- get state() {
151
- return this.getAttribute("state");
152
- }
153
- set state(t) {
154
- this.setAttribute("state", t);
155
- }
156
- get extended() {
157
- return this.getAttribute("extended");
158
- }
159
- set extended(t) {
160
- this.setAttribute("extended", t);
161
- }
162
- get extendedMobile() {
163
- return this.getAttribute("extended--mobile");
164
- }
165
- set extendedMobile(t) {
166
- this.setAttribute("extended--mobile", t);
167
- }
168
- get extendedTablet() {
169
- return this.getAttribute("extended--tablet");
170
- }
171
- set extendedTablet(t) {
172
- this.setAttribute("extended--tablet", t);
173
- }
174
- get extendedLaptop() {
175
- return this.getAttribute("extended--laptop");
176
- }
177
- set extendedLaptop(t) {
178
- this.setAttribute("extended--laptop", t);
179
- }
180
- get extendedDesktop() {
181
- return this.getAttribute("extended--desktop");
182
- }
183
- set extendedDesktop(t) {
184
- this.setAttribute("extended--desktop", t);
185
- }
186
- get loading() {
187
- return this.getAttribute("loading");
188
- }
189
- set loading(t) {
190
- this.setAttribute("loading", t);
191
- }
192
- get shape() {
193
- return this.getAttribute("shape");
194
- }
195
- set shape(t) {
196
- this.setAttribute("shape", t);
197
- }
198
- get shapeMobile() {
199
- return this.getAttribute("shape--mobile");
200
- }
201
- set shapeMobile(t) {
202
- this.setAttribute("shape--mobile", t);
203
- }
204
- get shapeTablet() {
205
- return this.getAttribute("shape--tablet");
206
- }
207
- set shapeTablet(t) {
208
- this.setAttribute("shape--tablet", t);
209
- }
210
- get shapeLaptop() {
211
- return this.getAttribute("shape--laptop");
212
- }
213
- set shapeLaptop(t) {
214
- this.setAttribute("shape--laptop", t);
215
- }
216
- get shapeDesktop() {
217
- return this.getAttribute("shape--desktop");
218
- }
219
- set shapeDesktop(t) {
220
- this.setAttribute("shape--desktop", t);
221
- }
222
- get inverted() {
223
- return this.getAttribute("inverted");
224
- }
225
- set inverted(t) {
226
- this.setAttribute("inverted", t);
227
- }
228
- get ariaExpanded() {
229
- return this.getAttribute("aria-expanded");
230
- }
231
- set ariaExpanded(t) {
232
- t ? this.setAttribute("aria-expanded", t) : this.removeAttribute("aria-expanded");
233
- }
3
+ //#region ../../components/Button/src/button.css?inline
4
+ var y = ".btn,.btn *{box-sizing:border-box}.btn{width:var(--button-extended--mobile,var(--button-extended,auto));vertical-align:middle;font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-line-height-ratio-l);font-weight:var(--px-font-weight-title);text-align:center;justify-content:center;align-items:center;gap:var(--px-spacing-2xs-mobile);cursor:pointer;--btn-transition:all .2s ease-in-out 0s;transition:var(--btn-transition);border:var(--px-size-border-m) solid transparent;text-decoration:none;display:inline-flex}.btn ::slotted(px-icon){flex-shrink:0;line-height:0}.btn:hover:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-state-hover-default)}.btn:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}.btn:active:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-state-active-default);color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default);transform:scale(.95)}.btn[disabled],.btn[aria-disabled=true]{cursor:default;pointer-events:none}.btn.loading{cursor:inherit}.btn.loading ::slotted(px-spinner){line-height:0}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-container-primary-default);min-height:var(--px-spacing-l-mobile);padding:var(--px-padding-xs-mobile) var(--px-padding-m-mobile)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown) ::slotted([slot=after]){margin-right:calc(var(--px-padding-xs-mobile) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown) ::slotted([slot=before]){margin-left:calc(var(--px-padding-xs-mobile) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown){border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown):hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[disabled],.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown).loading{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-brand-default);border-color:#0000}.btn.secondary{color:var(--px-color-text-brand-default);background:var(--px-color-background-container-secondary-default);min-height:var(--px-spacing-l-mobile);padding:var(--px-padding-xs-mobile) var(--px-padding-m-mobile);border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn.secondary:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default)}.btn.secondary[disabled],.btn.secondary[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}.btn.secondary.loading{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-brand-default);border-color:#0000}.btn:not(.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[shape=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[shape=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[shape=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[shape=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn.tertiary{color:var(--px-color-text-brand-default);border-radius:var(--px-radius-pill);border:var(--px-size-border-m) solid transparent;padding:var(--px-padding-2xs-mobile) 0;gap:var(--px-spacing-xs-mobile);text-align:left;background:0 0}.btn.tertiary ::slotted(px-icon){width:var(--px-size-m);height:var(--px-size-m);border-radius:var(--px-radius-pill);background:var(--px-color-background-container-secondary-default);transition:var(--btn-transition);justify-content:center;align-items:center;display:flex}:is(.btn.tertiary:hover,.btn.tertiary:active):not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-mobile) var(--px-padding-s-mobile)}:is(.btn.tertiary:hover,.btn.tertiary:active):not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon){background:0 0;margin:0 -8px}:is(.btn.tertiary:hover,.btn.tertiary:active):not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon)[slot=after]{padding:0 0 0 var(--px-padding-2xs-mobile)}:is(.btn.tertiary:hover,.btn.tertiary:active):not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon)[slot=before]{padding:0 var(--px-padding-2xs-mobile) 0 0}.btn.tertiary[disabled],.btn.tertiary[aria-disabled=true]{color:var(--px-color-text-state-disabled-default)}:is(.btn.tertiary[disabled],.btn.tertiary[aria-disabled=true]) ::slotted(px-icon){background:var(--px-color-background-state-disabled-default)}.btn.tertiary.loading{color:var(--px-color-text-brand-default);border-color:#0000}.btn.tertiary.loading ::slotted(px-spinner){width:var(--px-size-m);height:var(--px-size-m);border-radius:var(--px-radius-pill);background:var(--px-color-background-state-disabled-default);justify-content:center;align-items:center;display:flex}.btn.patch{display:inline-flex}.btn.patch:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default)}.btn.patch[disabled],.btn.patch[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}.btn.actionable-tag{background:var(--px-color-background-container-primary-default);color:var(--px-color-text-neutral-inverted)}.btn.actionable-tag-secondary{background:var(--px-color-background-container-secondary-default);color:var(--px-color-text-brand-default)}.btn.actionable-tag,.btn.actionable-tag-secondary{padding:var(--px-padding-2xs-mobile) var(--px-padding-xs-mobile);gap:var(--px-spacing-2xs-mobile);border-radius:var(--px-radius-pill);border:solid var(--px-size-border-m) transparent;font-weight:var(--px-font-weight-body)}:host([size=s]) :is(.btn.actionable-tag,.btn.actionable-tag-secondary){padding:var(--px-padding-2xs-mobile) var(--px-padding-xs-mobile);gap:var(--px-spacing-2xs-mobile)}:host([size=m]) :is(.btn.actionable-tag,.btn.actionable-tag-secondary){padding:var(--px-padding-xs-mobile) var(--px-padding-s-mobile);gap:var(--px-spacing-xs-mobile)}:is(.btn.actionable-tag,.btn.actionable-tag-secondary):hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default);border-color:var(--px-color-border-state-hover-default)}:is(.btn.actionable-tag,.btn.actionable-tag-secondary):active:not([disabled],[aria-disabled=true],.loading){background:var(--px-color-background-state-active-default);color:var(--px-color-text-state-active-inverted)}:is(.btn.actionable-tag,.btn.actionable-tag-secondary)[disabled],:is(.btn.actionable-tag,.btn.actionable-tag-secondary)[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}.btn.header-dropdown,.btn.header-minimal-dropdown{touch-action:manipulation;align-items:center;display:flex}:is(.btn.header-dropdown,.btn.header-minimal-dropdown):after{content:\"\";width:var(--px-size-icon-xs);height:var(--px-size-icon-xs);color:var(--px-color-icon-brand-default);--btn-transition:all .2s ease-in-out 0s;transition:var(--btn-transition);background-color:currentColor;display:inline-block;-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.38 5.90237C12.125 5.65131 11.7115 5.65131 11.4564 5.90237L7.99986 9.30494L4.54328 5.90237C4.28824 5.65131 3.87474 5.65131 3.61971 5.90237C3.36467 6.15342 3.36467 6.56045 3.61971 6.8115L7.53808 10.6686C7.79311 10.9197 8.20661 10.9197 8.46164 10.6686L12.38 6.8115C12.635 6.56045 12.635 6.15342 12.38 5.90237Z' fill='%235C2D91'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.38 5.90237C12.125 5.65131 11.7115 5.65131 11.4564 5.90237L7.99986 9.30494L4.54328 5.90237C4.28824 5.65131 3.87474 5.65131 3.61971 5.90237C3.36467 6.15342 3.36467 6.56045 3.61971 6.8115L7.53808 10.6686C7.79311 10.9197 8.20661 10.9197 8.46164 10.6686L12.38 6.8115C12.635 6.56045 12.635 6.15342 12.38 5.90237Z' fill='%235C2D91'/%3E%3C/svg%3E\");-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:cover;mask-size:cover;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}:is(.btn.header-dropdown,.btn.header-minimal-dropdown)[aria-expanded=true]:after{transform:rotate(180deg)}.btn.header-dropdown{justify-content:space-between;gap:var(--px-spacing-s-mobile);width:100%;color:var(--px-color-text-neutral-default);font-weight:var(--px-font-weight-body);font-size:var(--px-text-size-label-l-mobile);border:var(--px-size-border-m) solid var(--px-color-border-neutral-default);padding:var(--px-padding-xs-mobile) var(--px-padding-s-mobile);border-radius:var(--px-radius-main);background-color:var(--px-color-background-container-default-default)}.btn.header-minimal-dropdown{justify-content:flex-start;gap:var(--px-spacing-xs-mobile);color:var(--px-color-text-brand-default);font-weight:var(--px-font-weight-title);font-size:var(--px-text-size-label-m-mobile);background:0 0;border:none;border-radius:0;padding:0}button.link{cursor:pointer;background:0 0;border:none;padding:0;text-decoration:underline}button.link[disabled],button.link[aria-disabled=true]{cursor:default;pointer-events:none;color:var(--px-color-text-state-disabled-default)}button.wrapper{all:unset;cursor:pointer}button.wrapper:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}button.wrapper[disabled],button.wrapper[aria-disabled=true]{cursor:default;pointer-events:none}:host([inverted]) .btn:hover:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) .btn:focus-visible:not([disabled],[aria-disabled=true]){outline-color:var(--px-color-border-focus-outline-inverted)}:host([inverted]) .btn:active:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-state-active-inverted);color:var(--px-color-text-brand-inverted);background:var(--px-color-background-state-hover-bordered-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown){color:var(--px-color-text-brand-default);background:var(--px-color-background-container-primary-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown):hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-state-hover-bordered-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[disabled],:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown).loading{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-brand-inverted);border-color:#0000}:host([inverted]) .btn.secondary{color:var(--px-color-text-brand-inverted);background:var(--px-color-background-container-secondary-inverted)}:host([inverted]) .btn.secondary:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-container-default-inverted)}:host([inverted]) .btn.secondary[disabled],:host([inverted]) .btn.secondary[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .btn.secondary.loading{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-brand-inverted);border-color:#0000}:host([inverted]) .btn.tertiary{color:var(--px-color-text-brand-inverted)}:host([inverted]) .btn.tertiary ::slotted(px-icon){background:var(--px-color-background-container-secondary-inverted)}:is(:host([inverted]) .btn.tertiary:hover,:host([inverted]) .btn.tertiary:active):not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon){background:0 0}:host([inverted]) .btn.tertiary[disabled],:host([inverted]) .btn.tertiary[aria-disabled=true]{color:var(--px-color-text-state-disabled-inverted)}:is(:host([inverted]) .btn.tertiary[disabled],:host([inverted]) .btn.tertiary[aria-disabled=true]) ::slotted(px-icon){background:var(--px-color-background-state-disabled-inverted)}:host([inverted]) .btn.tertiary.loading{color:var(--px-color-text-brand-inverted)}:host([inverted]) .btn.tertiary.loading ::slotted(px-spinner){background:var(--px-color-background-state-disabled-inverted)}:host([inverted]) .btn.patch:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-state-hover-bordered-inverted)}:host([inverted]) .btn.patch[disabled],:host([inverted]) .btn.patch[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .btn.actionable-tag{background:var(--px-color-background-container-primary-inverted);color:var(--px-color-text-brand-default)}:host([inverted]) .btn.actionable-tag-secondary{background:var(--px-color-background-container-secondary-inverted);color:var(--px-color-text-neutral-inverted)}:is(:host([inverted]) .btn.actionable-tag,:host([inverted]) .btn.actionable-tag-secondary):hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-state-hover-bordered-inverted);border-color:var(--px-color-border-state-hover-inverted)}:is(:host([inverted]) .btn.actionable-tag,:host([inverted]) .btn.actionable-tag-secondary):active:not([disabled],[aria-disabled=true],.loading){background:var(--px-color-background-state-active-inverted);color:var(--px-color-text-state-active-default)}:is(:host([inverted]) .btn.actionable-tag,:host([inverted]) .btn.actionable-tag-secondary)[disabled],:is(:host([inverted]) .btn.actionable-tag,:host([inverted]) .btn.actionable-tag-secondary)[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) button.link[disabled],:host([inverted]) button.link[aria-disabled=true]{color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) button.wrapper:focus-visible{outline-color:var(--px-color-border-focus-outline-inverted)}:host([inverted]) .btn.header-minimal-dropdown{color:var(--px-color-text-brand-inverted)}:host([inverted]) .btn.header-minimal-dropdown:after{color:var(--px-color-icon-brand-inverted)}@media screen and (width<=47.938rem){.btn:not(.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[shape--mobile=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[shape--mobile=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[shape--mobile=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[shape--mobile=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}}@media screen and (width>=48rem) and (width<=64rem){.btn:not(.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[shape--tablet=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[shape--tablet=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[shape--tablet=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[shape--tablet=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}}@media screen and (width>=48rem){button.wrapper:focus-visible{outline-offset:var(--px-focus-offset-tablet);outline:var(--px-focus-outline-tablet) solid var(--px-color-border-focus-outline-default)}.btn{width:var(--button-extended--tablet,var(--button-extended,auto));font-size:var(--px-text-size-label-m-tablet);gap:var(--px-spacing-2xs-tablet)}.btn:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}.btn.actionable-tag,.btn.actionable-tag-secondary{padding:var(--px-padding-2xs-tablet) var(--px-padding-xs-tablet);gap:var(--px-spacing-2xs-tablet)}:host([size=s]) :is(.btn.actionable-tag,.btn.actionable-tag-secondary){padding:var(--px-padding-2xs-tablet) var(--px-padding-xs-tablet);gap:var(--px-spacing-2xs-tablet)}:host([size=m]) :is(.btn.actionable-tag,.btn.actionable-tag-secondary){padding:var(--px-padding-xs-tablet) var(--px-padding-s-tablet);gap:var(--px-spacing-xs-tablet)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown){padding:var(--px-padding-xs-tablet) var(--px-padding-m-tablet)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown) ::slotted([slot=after]){margin-right:calc(var(--px-padding-xs-tablet) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown) ::slotted([slot=before]){margin-left:calc(var(--px-padding-xs-tablet) * -1)}.btn.secondary{padding:var(--px-padding-xs-tablet) var(--px-padding-m-tablet)}.btn.tertiary{padding:var(--px-padding-2xs-tablet) 0;gap:var(--px-spacing-xs-tablet)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-tablet) var(--px-padding-s-tablet)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon)[slot=after]{padding:0 0 0 var(--px-padding-2xs-tablet)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon)[slot=before]{padding:0 var(--px-padding-2xs-tablet) 0 0}.btn.header-dropdown,.btn.header-minimal-dropdown{gap:var(--px-spacing-xs-tablet);font-size:var(--px-text-size-label-m-tablet)}.btn.header-dropdown{padding:var(--px-padding-xs-tablet) var(--px-padding-s-tablet)}}@media screen and (width>=64.0625rem) and (width<=90rem){.btn:not(.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[shape--laptop=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[shape--laptop=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[shape--laptop=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[shape--laptop=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}}@media screen and (width>=64.0625rem){button.wrapper:focus-visible{outline-offset:var(--px-focus-offset-laptop);outline:var(--px-focus-outline-laptop) solid var(--px-color-border-focus-outline-default)}.btn{width:var(--button-extended--laptop,var(--button-extended,auto));font-size:var(--px-text-size-label-m-laptop);gap:var(--px-spacing-2xs-laptop)}.btn:focus-visble:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-laptop);outline-width:var(--px-focus-outline-laptop)}.btn.actionable-tag,.btn.actionable-tag-secondary{padding:var(--px-padding-2xs-laptop) var(--px-padding-xs-laptop);gap:var(--px-spacing-2xs-laptop)}:host([size=s]) :is(.btn.actionable-tag,.btn.actionable-tag-secondary){padding:var(--px-padding-2xs-laptop) var(--px-padding-xs-laptop);gap:var(--px-spacing-2xs-laptop)}:host([size=m]) :is(.btn.actionable-tag,.btn.actionable-tag-secondary){padding:var(--px-padding-xs-laptop) var(--px-padding-s-laptop);gap:var(--px-spacing-xs-laptop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown){padding:var(--px-padding-xs-laptop) var(--px-padding-m-laptop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown) ::slotted([slot=after]){margin-right:calc(var(--px-padding-xs-laptop) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown) ::slotted([slot=before]){margin-left:calc(var(--px-padding-xs-laptop) * -1)}.btn.secondary{padding:var(--px-padding-xs-laptop) var(--px-padding-m-laptop)}.btn.tertiary{padding:var(--px-padding-2xs-laptop) 0;gap:var(--px-spacing-xs-laptop)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-laptop) var(--px-padding-s-laptop)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon)[slot=after]{padding:0 0 0 var(--px-padding-2xs-laptop)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon)[slot=before]{padding:0 var(--px-padding-2xs-laptop) 0 0}.btn.header-dropdown,.btn.header-minimal-dropdown{gap:var(--px-spacing-xs-laptop);font-size:var(--px-text-size-label-m-laptop)}.btn.header-dropdown{width:inherit;color:var(--px-color-text-brand-default);font-weight:var(--px-font-weight-title);background:0 0;border:none;border-radius:0;justify-content:flex-start;align-items:center;padding:0}}@media screen and (width>=90.0625rem){button.wrapper:focus-visible{outline-offset:var(--px-focus-offset-desktop);outline:var(--px-focus-outline-desktop) solid var(--px-color-border-focus-outline-default)}.btn{width:var(--button-extended--desktop,var(--button-extended,auto));font-size:var(--px-text-size-label-m-desktop);gap:var(--px-spacing-2xs-desktop)}.btn:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}.btn.actionable-tag,.btn.actionable-tag-secondary{padding:var(--px-padding-2xs-desktop) var(--px-padding-xs-desktop);gap:var(--px-spacing-2xs-desktop)}:host([size=s]) :is(.btn.actionable-tag,.btn.actionable-tag-secondary){padding:var(--px-padding-2xs-desktop) var(--px-padding-xs-desktop);gap:var(--px-spacing-2xs-desktop)}:host([size=m]) :is(.btn.actionable-tag,.btn.actionable-tag-secondary){padding:var(--px-padding-xs-desktop) var(--px-padding-s-desktop);gap:var(--px-spacing-xs-desktop)}.btn:not(.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[shape--desktop=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[shape--desktop=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[shape--desktop=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[shape--desktop=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown){padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown) ::slotted([slot=after]){margin-right:calc(var(--px-padding-xs-desktop) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown) ::slotted([slot=before]){margin-left:calc(var(--px-padding-xs-desktop) * -1)}.btn.secondary{padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn.tertiary{padding:var(--px-padding-2xs-desktop) 0;gap:var(--px-spacing-xs-desktop)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-desktop) var(--px-padding-s-desktop)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon)[slot=after]{padding:0 0 0 var(--px-padding-2xs-desktop)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon)[slot=before]{padding:0 var(--px-padding-2xs-desktop) 0 0}.btn.header-dropdown,.btn.header-minimal-dropdown{gap:var(--px-spacing-xs-desktop);font-size:var(--px-text-size-label-m-desktop)}.btn.header-dropdown{padding:0}}@keyframes anim-spinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}", b = ":host([variant=icon-link]){display:inline-flex}a,.link,::slotted(a){font-family:var(--px-font-family);font-size:var(--px-text-size-link-m-mobile);line-height:var(--px-line-height-ratio-l);font-weight:var(--px-font-weight-body);color:var(--px-color-text-neutral-default);align-items:center;display:inline}:is(a,.link,::slotted(a)):hover{color:var(--px-color-text-state-hover-default)}:is(a,.link,::slotted(a)):focus-visible{outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}:is(a,.link,::slotted(a))[aria-disabled=true]{cursor:default;pointer-events:none;color:var(--px-color-text-state-disabled-default)}:is(a,.link,::slotted(a)) ::slotted([slot=after]){margin-left:var(--px-spacing-2xs-mobile)}:is(a,.link,::slotted(a)) ::slotted(span[slot=after]),:is(a,.link,::slotted(a)) ::slotted(span[slot=before]){display:inline-block}::slotted(a:hover){color:var(--px-color-text-state-hover-default)}a.no-style,a.wrapper{text-decoration:none}:is(a.no-style,a.wrapper):hover,:is(a.no-style,a.wrapper):focus-visible{color:inherit}a.wrapper{line-height:0;display:block}a.wrapper:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}a.skip-link{background-color:var(--px-color-background-container-default-default);padding:var(--px-padding-xs-mobile);position:absolute;top:auto;left:-10000px;overflow:hidden}a.skip-link:focus-visible{z-index:999;left:auto}:host([target=_blank]) ::slotted(px-icon){vertical-align:middle}.icon-link{color:var(--px-color-icon-brand-default);line-height:1;display:inline-flex}:host([inverted]) a,:host([inverted]) .link,:host([inverted]) ::slotted(a){color:var(--px-color-text-neutral-inverted)}:is(:host([inverted]) a,:host([inverted]) .link,:host([inverted]) ::slotted(a)):hover{color:var(--px-color-text-state-hover-inverted)}:is(:host([inverted]) a,:host([inverted]) .link,:host([inverted]) ::slotted(a)):focus-visible{outline-color:var(--px-color-border-focus-outline-inverted)}:is(:host([inverted]) a,:host([inverted]) .link,:host([inverted]) ::slotted(a))[aria-disabled=true]{color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) ::slotted(a:hover){color:var(--px-color-text-state-hover-inverted)}:host([inverted]) a.skip-link{background-color:var(--px-color-background-container-default-inverted)}:host([inverted]) .icon-link{color:var(--px-color-icon-brand-inverted)}@media screen and (width>=48rem){a.wrapper:focus-visible{outline-offset:var(--px-focus-offset-tablet);outline:var(--px-focus-outline-tablet) solid var(--px-color-border-focus-outline-default)}a,.link,::slotted(a){font-size:var(--px-text-size-link-m-tablet)}:is(a,.link,::slotted(a)):focus-visible{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}:is(a,.link,::slotted(a)) ::slotted([slot=after]){margin-left:var(--px-spacing-2xs-tablet)}a.skip-link{padding:var(--px-padding-xs-tablet)}}@media screen and (width>=64.0625rem){a.wrapper:focus-visible{outline-offset:var(--px-focus-offset-laptop);outline:var(--px-focus-outline-laptop) solid var(--px-color-border-focus-outline-default)}a,.link,::slotted(a){font-size:var(--px-text-size-link-m-laptop)}:is(a,.link,::slotted(a)):focus-visible{outline-offset:var(--px-focus-offset-laptop);outline-width:var(--px-focus-outline-laptop)}:is(a,.link,::slotted(a)) ::slotted([slot=after]){margin-left:var(--px-spacing-2xs-laptop)}a.skip-link{padding:var(--px-padding-xs-laptop)}}@media screen and (width>=90.0625rem){a.wrapper:focus-visible{outline-offset:var(--px-focus-offset-desktop);outline:var(--px-focus-outline-desktop) solid var(--px-color-border-focus-outline-default)}a,.link,::slotted(a){font-size:var(--px-text-size-link-m-desktop)}:is(a,.link,::slotted(a)):focus-visible{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}:is(a,.link,::slotted(a)) ::slotted([slot=after]){margin-left:var(--px-spacing-2xs-desktop)}a.skip-link{padding:var(--px-padding-xs-desktop)}}", se = ".patch,.patch *{box-sizing:border-box}.patch{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);align-items:center;display:inline-flex}[shape=bottom-right]{border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small) var(--px-radius-patch-big)}[shape=bottom-left],[shape=default]{border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small)}.info{background-color:var(--px-color-background-purpose-info-default);color:var(--px-color-text-neutral-default)}.black-friday{background-color:var(--px-color-background-surface-dark);color:var(--px-color-text-neutral-inverted)}.eco{background-color:var(--px-color-background-purpose-success-default);color:var(--px-color-text-neutral-inverted)}.greyed{background-color:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}:host([inverted]) .patch{background-color:var(--px-color-background-purpose-promo-inverted);color:var(--px-color-text-neutral-inverted)}:host([inverted]) .info{background-color:var(--px-color-background-purpose-info-inverted);color:var(--px-color-text-neutral-default)}:host([inverted]) .black-friday{background-color:var(--px-color-background-container-light-default);color:var(--px-color-text-neutral-default)}:host([inverted]) .eco{background-color:var(--px-color-background-purpose-success-inverted);color:var(--px-color-text-neutral-default)}:host([inverted]) .greyed{background-color:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}@media screen and (width>=48rem){.patch{padding:0 var(--px-padding-s-desktop);font-size:var(--px-text-size-label-m-desktop)}}@media screen and (width>=64.0625rem){.patch{padding:0 var(--px-padding-s-desktop);font-size:var(--px-text-size-label-m-desktop)}}@media screen and (width>=90.0625rem){.patch{padding:0 var(--px-padding-s-desktop);font-size:var(--px-text-size-label-m-desktop)}}", ce = ":host:has(.tag){display:inline-block}.tag,.tag *{box-sizing:border-box}.tag{vertical-align:middle;font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-line-height-ratio-l);font-weight:var(--px-font-weight-body);justify-content:center;align-items:center;gap:var(--px-spacing-2xs-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);display:inline-flex}:host([disabled]:not([dismissible])) .tag{background-color:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}:host([size=s]) .tag{padding:var(--px-padding-2xs-mobile) var(--px-padding-xs-mobile);gap:var(--px-spacing-2xs-mobile)}:host([size=m]) .tag{padding:var(--px-padding-xs-mobile) var(--px-padding-s-mobile);gap:var(--px-spacing-xs-mobile)}:host([state=success]) .tag{background-color:var(--px-color-background-purpose-success-default);color:var(--px-color-text-neutral-inverted)}:host([state=warning]) .tag{background-color:var(--px-color-background-purpose-warning-default);color:var(--px-color-text-neutral-inverted)}:host([state=error]) .tag{background-color:var(--px-color-background-purpose-error-default);color:var(--px-color-text-neutral-inverted)}:host([inverted]) .tag{background-color:var(--px-color-background-container-default-inverted);color:var(--px-color-text-neutral-inverted)}:host([inverted]):host([disabled]:not([dismissible])) .tag{background-color:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}:host([inverted]):host([state=success]) .tag{background-color:var(--px-color-background-purpose-success-inverted);color:var(--px-color-text-neutral-default)}:host([inverted]):host([state=warning]) .tag{background-color:var(--px-color-background-purpose-warning-inverted);color:var(--px-color-text-neutral-default)}:host([inverted]):host([state=error]) .tag{background-color:var(--px-color-background-purpose-error-inverted);color:var(--px-color-text-neutral-default)}@media screen and (width>=48rem){.tag{font-size:var(--px-text-size-label-m-tablet);gap:var(--px-spacing-2xs-tablet);padding:var(--px-padding-2xs-tablet) var(--px-padding-xs-tablet)}:host([size=s]) .tag{padding:var(--px-padding-2xs-tablet) var(--px-padding-xs-tablet);gap:var(--px-spacing-2xs-tablet)}:host([size=m]) .tag{padding:var(--px-padding-xs-tablet) var(--px-padding-s-tablet);gap:var(--px-spacing-xs-tablet)}}@media screen and (width>=64.0625rem){.tag{font-size:var(--px-text-size-label-m-laptop);gap:var(--px-spacing-2xs-laptop);padding:var(--px-padding-2xs-laptop) var(--px-padding-xs-laptop)}:host([size=s]) .tag{padding:var(--px-padding-2xs-laptop) var(--px-padding-xs-laptop);gap:var(--px-spacing-2xs-laptop)}:host([size=m]) .tag{padding:var(--px-padding-xs-laptop) var(--px-padding-s-laptop);gap:var(--px-spacing-xs-laptop)}}@media screen and (width>=90.0625rem){.tag{font-size:var(--px-text-size-label-m-desktop);gap:var(--px-spacing-2xs-desktop);padding:var(--px-padding-2xs-desktop) var(--px-padding-xs-desktop)}:host([size=s]) .tag{padding:var(--px-padding-2xs-desktop) var(--px-padding-xs-desktop);gap:var(--px-spacing-2xs-desktop)}:host([size=m]) .tag{padding:var(--px-padding-xs-desktop) var(--px-padding-s-desktop);gap:var(--px-spacing-xs-desktop)}}", x = new CSSStyleSheet(), S = new CSSStyleSheet(), C = new CSSStyleSheet(), w = new CSSStyleSheet();
5
+ x.replaceSync(y), S.replaceSync(b), C.replaceSync(se), w.replaceSync(ce);
6
+ var T = [
7
+ "",
8
+ "default",
9
+ "secondary",
10
+ "tertiary",
11
+ "link",
12
+ "patch",
13
+ "patch-info",
14
+ "patch-black-friday",
15
+ "patch-eco",
16
+ "actionable-tag",
17
+ "actionable-tag-secondary",
18
+ "header-dropdown",
19
+ "header-minimal-dropdown"
20
+ ], le = [
21
+ "",
22
+ "default",
23
+ "bottom-right",
24
+ "bottom-left",
25
+ "alternative"
26
+ ], E = class extends e {
27
+ static {
28
+ this.nativeName = "button";
29
+ }
30
+ constructor() {
31
+ super(x, S, C, w), this.template = () => "<button class=\"btn\">\n <slot name=\"before\"></slot><slot></slot><slot name=\"after\"></slot>\n </button>", this.shadowRoot.innerHTML = this.template();
32
+ }
33
+ static get observedAttributes() {
34
+ return [
35
+ ...super.observedAttributes,
36
+ "variant",
37
+ "state",
38
+ "loading",
39
+ "shape",
40
+ "shape--mobile",
41
+ "shape--tablet",
42
+ "shape--laptop",
43
+ "shape--desktop",
44
+ "inverted",
45
+ "aria-expanded",
46
+ "extended",
47
+ "extended--mobile",
48
+ "extended--tablet",
49
+ "extended--laptop",
50
+ "extended--desktop",
51
+ "size"
52
+ ];
53
+ }
54
+ connectedCallback() {
55
+ let e = this.querySelectorAll("px-icon");
56
+ e && e.forEach((e) => {
57
+ let t = e.getAttribute("size"), n = e.getAttribute("color");
58
+ e && (e.addEventListener("click", () => {
59
+ this.$el.focus();
60
+ }), t || e.setAttribute("size", "xs"), n || e.setAttribute("color", "inherit"));
61
+ }), v(this, this.$el, !0), this.$el.type === "submit" && this.addEventListener("click", (e) => {
62
+ e.preventDefault(), this.closest("form")?.submit();
63
+ }), this.$el.type === "reset" && this.addEventListener("click", (e) => {
64
+ e.preventDefault(), this.closest("form")?.reset();
65
+ });
66
+ }
67
+ disconnectedCallback() {}
68
+ attributeChangedCallback(e, t, n) {
69
+ if (t !== n) switch (e) {
70
+ case "variant":
71
+ this.updateVariant(t, n);
72
+ break;
73
+ case "state":
74
+ this.updateState(t, n);
75
+ break;
76
+ case "extended":
77
+ case "extended--mobile":
78
+ case "extended--tablet":
79
+ case "extended--laptop":
80
+ case "extended--desktop":
81
+ this.updateExtended(e, n);
82
+ break;
83
+ case "loading":
84
+ this.updateLoading();
85
+ break;
86
+ case "disabled":
87
+ super.attributeChangedCallback(e, t, n);
88
+ break;
89
+ case "shape":
90
+ case "shape--mobile":
91
+ case "shape--tablet":
92
+ case "shape--laptop":
93
+ case "shape--desktop":
94
+ this.updateShape(e, n, le);
95
+ break;
96
+ case "aria-expanded":
97
+ n && (this.$el.setAttribute("aria-expanded", n), this.removeAttribute("aria-expanded"));
98
+ break;
99
+ default: super.attributeChangedCallback(e, t, n);
100
+ }
101
+ }
102
+ checkClass(e) {
103
+ if (e.startsWith("patch-")) {
104
+ let t = e.split(/-(.*)/s);
105
+ for (let e of t) e != "" && this.$el.classList.toggle(e);
106
+ } else this.$el.classList.toggle(e);
107
+ }
108
+ _toggleClass(e, t) {
109
+ e !== null && e !== "" && e !== "default" && this.checkClass(e), t !== null && t !== "" && t !== "default" && this.checkClass(t);
110
+ }
111
+ updateVariant(e, t) {
112
+ t === "link" ? this.$el.classList.remove("btn") : this.$el.classList.add("btn"), this._toggleClass(e, t), this.checkName(T, t) || m(`"${t}" is not a valid variant value for ${this.tagName.toLowerCase()}. Allowed values are: "${T.join("\", \"")}".`);
113
+ }
114
+ updateState(e, t) {
115
+ let n = [
116
+ "",
117
+ "default",
118
+ "success",
119
+ "error"
120
+ ];
121
+ this._toggleClass(e, t), this.checkName(n, t) || m(`"${t}" is not a valid state value for ${this.tagName.toLowerCase()}. Allowed values are: "${n.join("\", \"")}".`);
122
+ }
123
+ updateExtended(e, t) {
124
+ t === null ? this.$el.style.setProperty(`--button-${e}`, "") : this.$el.style.setProperty(`--button-${e}`, "100%");
125
+ }
126
+ updateLoading() {
127
+ let e = this.querySelector("px-spinner");
128
+ e && (e.getAttribute("size") || e.setAttribute("size", "xs")), this.$el.classList.toggle("loading");
129
+ }
130
+ updateShape(e, t, n) {
131
+ if (!s(n, t)) {
132
+ m(`"${t}" is not a valid shape value for ${this.tagName.toLowerCase()}. Allowed values are: "${n.join("\", \"")}".`);
133
+ return;
134
+ }
135
+ t !== null && t !== "" && this.$el.setAttribute(e, t);
136
+ }
137
+ get variant() {
138
+ return this.getAttribute("variant");
139
+ }
140
+ set variant(e) {
141
+ this._updateAttribute("variant", e);
142
+ }
143
+ get state() {
144
+ return this.getAttribute("state");
145
+ }
146
+ set state(e) {
147
+ this._updateAttribute("state", e);
148
+ }
149
+ get extended() {
150
+ return this.hasAttribute("extended");
151
+ }
152
+ set extended(e) {
153
+ this._updateBooleanAttribute("extended", e);
154
+ }
155
+ get extendedMobile() {
156
+ return this.hasAttribute("extended--mobile");
157
+ }
158
+ set extendedMobile(e) {
159
+ this._updateBooleanAttribute("extended--mobile", e);
160
+ }
161
+ get extendedTablet() {
162
+ return this.hasAttribute("extended--tablet");
163
+ }
164
+ set extendedTablet(e) {
165
+ this._updateBooleanAttribute("extended--tablet", e);
166
+ }
167
+ get extendedLaptop() {
168
+ return this.hasAttribute("extended--laptop");
169
+ }
170
+ set extendedLaptop(e) {
171
+ this._updateBooleanAttribute("extended--laptop", e);
172
+ }
173
+ get extendedDesktop() {
174
+ return this.hasAttribute("extended--desktop");
175
+ }
176
+ set extendedDesktop(e) {
177
+ this._updateBooleanAttribute("extended--desktop", e);
178
+ }
179
+ get loading() {
180
+ return this.hasAttribute("loading");
181
+ }
182
+ set loading(e) {
183
+ this._updateBooleanAttribute("loading", e);
184
+ }
185
+ get shape() {
186
+ return this.getAttribute("shape");
187
+ }
188
+ set shape(e) {
189
+ this._updateAttribute("shape", e);
190
+ }
191
+ get shapeMobile() {
192
+ return this.getAttribute("shape--mobile");
193
+ }
194
+ set shapeMobile(e) {
195
+ this._updateAttribute("shape--mobile", e);
196
+ }
197
+ get shapeTablet() {
198
+ return this.getAttribute("shape--tablet");
199
+ }
200
+ set shapeTablet(e) {
201
+ this._updateAttribute("shape--tablet", e);
202
+ }
203
+ get shapeLaptop() {
204
+ return this.getAttribute("shape--laptop");
205
+ }
206
+ set shapeLaptop(e) {
207
+ this._updateAttribute("shape--laptop", e);
208
+ }
209
+ get shapeDesktop() {
210
+ return this.getAttribute("shape--desktop");
211
+ }
212
+ set shapeDesktop(e) {
213
+ this._updateAttribute("shape--desktop", e);
214
+ }
215
+ get inverted() {
216
+ return this.hasAttribute("inverted");
217
+ }
218
+ set inverted(e) {
219
+ this._updateBooleanAttribute("inverted", e);
220
+ }
221
+ get ariaExpanded() {
222
+ return this.getAttribute("aria-expanded");
223
+ }
224
+ set ariaExpanded(e) {
225
+ this._updateAttribute("aria-expanded", e);
226
+ }
227
+ get size() {
228
+ return this.getAttribute("size") || "";
229
+ }
230
+ set size(e) {
231
+ this._updateAttribute("size", e);
232
+ }
233
+ };
234
+ customElements.get("px-button") || customElements.define("px-button", E);
235
+ //#endregion
236
+ //#region ../../components/Button/src/ButtonWrapper.ts
237
+ var ue = class extends E {
238
+ #e;
239
+ constructor() {
240
+ super(), this.$el.classList.remove("btn"), this.$el.classList.add("wrapper"), this.#e = new n(this, this.$el, () => this.#t());
241
+ }
242
+ connectedCallback() {
243
+ super.connectedCallback(), this.#e.connect();
244
+ }
245
+ disconnectedCallback() {
246
+ super.disconnectedCallback(), this.#e.disconnect();
247
+ }
248
+ attributeChangedCallback(e, t, n) {
249
+ if (t !== n) switch (e) {
250
+ case "loading":
251
+ super.attributeChangedCallback(e, t, n), n !== null && this.#e.clearInteractiveState();
252
+ break;
253
+ case "disabled":
254
+ super.attributeChangedCallback(e, t, n), n !== null && this.#e.clearInteractiveState();
255
+ break;
256
+ default: super.attributeChangedCallback(e, t, n);
257
+ }
258
+ }
259
+ #t() {
260
+ return !this.hasAttribute("disabled") && !this.$el.hasAttribute("disabled") && this.getAttribute("aria-disabled") !== "true" && this.$el.getAttribute("aria-disabled") !== "true" && !this.hasAttribute("loading");
261
+ }
234
262
  };
235
- N.nativeName = "button";
236
- let C = N;
237
- customElements.get("px-button") || customElements.define("px-button", C);
238
- class jt extends HTMLElement {
239
- constructor() {
240
- super();
241
- }
242
- static get observedAttributes() {
243
- return ["name", "src", "type", "format"];
244
- }
245
- connectedCallback() {
246
- if (document.querySelectorAll(
247
- `px-icon-set[name="${this.getAttribute("name")}"]`
248
- ).length > 1 && (console.warn(
249
- "Only one <px-icon-set> component is allowed, self removing"
250
- ), this.remove()), this.getAttribute("type") === "font") {
251
- const e = document.createElement("style");
252
- e.setAttribute("type", "text/css"), e.setAttribute("data-name", this.getAttribute("name")), e.textContent = `
263
+ customElements.get("px-button-wrapper") || customElements.define("px-button-wrapper", ue);
264
+ //#endregion
265
+ //#region ../../components/Icon/common/src/IconSet.ts
266
+ var de = class extends HTMLElement {
267
+ constructor() {
268
+ super();
269
+ }
270
+ static get observedAttributes() {
271
+ return [
272
+ "name",
273
+ "src",
274
+ "type",
275
+ "format"
276
+ ];
277
+ }
278
+ connectedCallback() {
279
+ if (document.querySelectorAll(`px-icon-set[name="${this.getAttribute("name")}"]`).length > 1 && (console.warn("Only one <px-icon-set> component is allowed, self removing"), this.remove()), this.getAttribute("type") === "font") {
280
+ let e = document.createElement("style");
281
+ e.setAttribute("type", "text/css");
282
+ let t = this.getAttribute("name");
283
+ t && e.setAttribute("data-name", t), e.textContent = `
253
284
  @font-face {
254
285
  font-family: 'lavender';
255
286
  src:
@@ -259,1626 +290,1586 @@ class jt extends HTMLElement {
259
290
  font-display: block;
260
291
  }
261
292
  `, document.head.appendChild(e);
262
- }
263
- }
264
- disconnectedCallback() {
265
- const t = document.querySelector(
266
- `style[data-name="${this.getAttribute("name")}"]`
267
- );
268
- t && t.remove();
269
- }
270
- }
271
- customElements.get("px-icon-set") || customElements.define("px-icon-set", jt);
272
- const Yt = [
273
- "Brand",
274
- "Accent",
275
- "Neutral",
276
- "Dimmed",
277
- "PurposeSuccess",
278
- "PurposeWarning",
279
- "PurposeError",
280
- "PurposeUnlimited",
281
- "PurposePromo",
282
- "StateHover",
283
- "StateActive",
284
- "StateDisabled"
285
- ], Zt = ["Inherit", ...Yt].map(
286
- (s) => s.replace(/([A-Z])/g, "-$1").toLowerCase().slice(1)
287
- ), Gt = ":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)}", bt = new CSSStyleSheet();
288
- bt.replaceSync(Gt);
289
- const Kt = [
290
- "name",
291
- "size",
292
- "color",
293
- "aria-label",
294
- "inverted",
295
- "from",
296
- "disabled"
297
- ];
298
- var x, b, $;
299
- class Xt extends Tt {
300
- constructor(...e) {
301
- var o;
302
- super(...e, bt);
303
- v(this, x);
304
- v(this, b);
305
- v(this, $, () => `<svg aria-hidden="true">
306
- <use xlink:href="#icon-${this.name}"></use>
307
- </svg>`);
308
- this.shadowRoot.innerHTML = n(this, $).call(this), this.role = "img", A(this, b, (o = this.attachInternals) == null ? void 0 : o.call(this)), n(this, b) && (n(this, b).role = "img");
309
- }
310
- static get observedAttributes() {
311
- return [...super.observedAttributes, ...Kt];
312
- }
313
- attributeChangedCallback(e, o, r) {
314
- if (o !== r)
315
- switch (e) {
316
- case "name":
317
- this.updateName(o, r);
318
- break;
319
- case "size":
320
- this.updateAttribute(e, o, r, Et);
321
- break;
322
- case "color":
323
- this.updateAttribute(e, o, r, Zt);
324
- break;
325
- case "disabled":
326
- this.color = "state-disabled";
327
- break;
328
- case "aria-label":
329
- if (!n(this, b))
330
- return;
331
- r ? (n(this, b).ariaHidden = "false", this.ariaHidden = "false") : (n(this, b).ariaHidden = "true", this.ariaHidden = "true");
332
- break;
333
- }
334
- }
335
- connectedCallback() {
336
- const e = document.querySelectorAll("px-icon-set");
337
- e || console.log("<px-icon-set> component not found");
338
- for (const o of e) {
339
- if (!o.getAttribute("name") || !o.getAttribute("src")) {
340
- console.error("Icon name or src not found");
341
- continue;
342
- }
343
- o.getAttribute("name") === this.from && o.getAttribute("type") !== "font" && (A(this, x, o.getAttribute("src")), this.$el.firstElementChild.setAttribute(
344
- "xlink:href",
345
- `${n(this, x)}#icon-${this.name}`
346
- ));
347
- }
348
- !this.ariaLabel && n(this, b) && (n(this, b).ariaHidden = "true", this.ariaHidden = "true");
349
- }
350
- updateAttribute(e, o, r, i) {
351
- 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(
352
- `${r} is not an allowed ${e} value for ${this.tagName.toLowerCase()}`
353
- );
354
- }
355
- updateName(e, o) {
356
- n(this, x) && this.$el.firstElementChild.setAttribute(
357
- "xlink:href",
358
- `${n(this, x)}#icon-${o}`
359
- );
360
- }
361
- get $el() {
362
- return this.shadowRoot.querySelector("svg");
363
- }
364
- get name() {
365
- return this.getAttribute("name");
366
- }
367
- set name(e) {
368
- this.setAttribute("name", e);
369
- }
370
- get size() {
371
- return this.getAttribute("size");
372
- }
373
- set size(e) {
374
- this.setAttribute("size", e);
375
- }
376
- get color() {
377
- return this.getAttribute("color");
378
- }
379
- set color(e) {
380
- this.setAttribute("color", e);
381
- }
382
- get arialabel() {
383
- return this.getAttribute("aria-label");
384
- }
385
- set arialabel(e) {
386
- this.setAttribute("aria-label", e);
387
- }
388
- get inverted() {
389
- return this.getAttribute("inverted");
390
- }
391
- set inverted(e) {
392
- this.setAttribute("inverted", e);
393
- }
394
- get from() {
395
- return this.getAttribute("from");
396
- }
397
- set from(e) {
398
- this.setAttribute("from", e);
399
- }
400
- get disabled() {
401
- return this.getAttribute("disabled");
402
- }
403
- set disabled(e) {
404
- this.setAttribute("disabled", e);
405
- }
406
- }
407
- x = new WeakMap(), b = new WeakMap(), $ = new WeakMap();
408
- customElements.get("px-icon") || customElements.define("px-icon", Xt);
409
- const ct = "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)}}", F = ".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)}", ht = new CSSStyleSheet();
410
- ht.replaceSync(ct);
411
- const gt = new CSSStyleSheet();
412
- gt.replaceSync(F);
413
- class f extends y {
414
- template() {
415
- return "<slot></slot>";
416
- }
417
- constructor(t) {
418
- super(ht, gt);
419
- const e = document.createElement(t);
420
- e.innerHTML = this.template(), this.shadowRoot.appendChild(e);
421
- }
422
- static get observedAttributes() {
423
- return [
424
- ...super.observedAttributes,
425
- "variant",
426
- "color",
427
- "text-align",
428
- "text-align--mobile",
429
- "text-align--tablet",
430
- "text-align--laptop",
431
- "text-align--desktop",
432
- "inverted"
433
- ];
434
- }
435
- attributeChangedCallback(t, e, o) {
436
- if (e !== o)
437
- switch (t) {
438
- case "variant":
439
- this.updateAttribute(t, e, o, et);
440
- break;
441
- case "color":
442
- this.updateColor(e, o, _);
443
- break;
444
- case "text-align":
445
- case "text-align--mobile":
446
- case "text-align--tablet":
447
- case "text-align--laptop":
448
- case "text-align--desktop":
449
- this.updateTextAlign(t, e, o, tt);
450
- break;
451
- default:
452
- super.attributeChangedCallback(t, e, o);
453
- break;
454
- }
455
- }
456
- toggleClass(t, e) {
457
- t !== null && t !== "" && t !== "default" && this.$el.classList.toggle(`style-${t}`), e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`style-${e}`);
458
- }
459
- updateAttribute(t, e, o, r) {
460
- this.checkName(r, o) ? this.toggleClass(e, o) : d(
461
- `${o} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
462
- );
463
- }
464
- updateColor(t, e, o) {
465
- if (!this.checkName(o, e)) {
466
- d(
467
- `${e} is not an allowed color value for ${this.tagName.toLowerCase()}`
468
- );
469
- return;
470
- }
471
- const r = (i) => {
472
- i !== null && i !== "" && i !== "default" && (this.$el.style.setProperty(
473
- "--heading-color-default",
474
- `var(--px-color-text-${i}-default)`
475
- ), this.$el.style.setProperty(
476
- "--heading-color-inverted",
477
- `var(--px-color-text-${i}-inverted)`
478
- ));
479
- };
480
- r(t), r(e);
481
- }
482
- updateTextAlign(t, e, o, r) {
483
- if (!this.checkName(r, o)) {
484
- d(
485
- `${o} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
486
- );
487
- return;
488
- }
489
- const i = (a, l) => {
490
- l !== null && l !== "" && l !== "default" && this.$el.style.setProperty(
491
- `--heading-text-align--${a}`,
492
- l
493
- );
494
- };
495
- if (t === "text-align")
496
- ["mobile", "tablet", "laptop", "desktop"].forEach((a) => {
497
- i(a, e), i(a, o);
498
- });
499
- else {
500
- const a = t.split("--")[1];
501
- i(a, e), i(a, o);
502
- }
503
- }
504
- get variant() {
505
- return this.getAttribute("variant");
506
- }
507
- set variant(t) {
508
- this.setAttribute("variant", t);
509
- }
510
- get color() {
511
- return this.getAttribute("color");
512
- }
513
- set color(t) {
514
- this.setAttribute("color", t);
515
- }
516
- get textAlign() {
517
- return this.getAttribute("text-align");
518
- }
519
- set textAlign(t) {
520
- this.setAttribute("text-align", t);
521
- }
522
- get textAlignMobile() {
523
- return this.getAttribute("text-align--mobile");
524
- }
525
- set textAlignMobile(t) {
526
- this.setAttribute("text-align--mobile", t);
527
- }
528
- get textAlignTablet() {
529
- return this.getAttribute("text-align--tablet");
530
- }
531
- set textAlignTablet(t) {
532
- this.setAttribute("text-align--tablet", t);
533
- }
534
- get textAlignLaptop() {
535
- return this.getAttribute("text-align--laptop");
536
- }
537
- set textAlignLaptop(t) {
538
- this.setAttribute("text-align--laptop", t);
539
- }
540
- get textAlignDesktop() {
541
- return this.getAttribute("text-align--desktop");
542
- }
543
- set textAlignDesktop(t) {
544
- this.setAttribute("text-align--desktop", t);
545
- }
546
- get inverted() {
547
- return this.getAttribute("inverted");
548
- }
549
- set inverted(t) {
550
- this.setAttribute("inverted", t);
551
- }
552
- }
553
- const W = class W extends f {
554
- constructor() {
555
- super("h1");
556
- }
293
+ }
294
+ }
295
+ disconnectedCallback() {
296
+ let e = document.querySelector(`style[data-name="${this.getAttribute("name")}"]`);
297
+ e && e.remove();
298
+ }
557
299
  };
558
- W.nativeName = "h1";
559
- let L = W;
560
- customElements.get("px-h1") || customElements.define("px-h1", L);
561
- const j = class j extends f {
562
- constructor() {
563
- super("h2");
564
- }
300
+ customElements.get("px-icon-set") || customElements.define("px-icon-set", de);
301
+ var D = [
302
+ "Inherit",
303
+ "Brand",
304
+ "Accent",
305
+ "Neutral",
306
+ "Dimmed",
307
+ "PurposeSuccess",
308
+ "PurposeWarning",
309
+ "PurposeError",
310
+ "PurposeUnlimited",
311
+ "PurposePromo",
312
+ "StateHover",
313
+ "StateActive",
314
+ "StateDisabled"
315
+ ].map((e) => e.replace(/([A-Z])/g, "-$1").toLowerCase().slice(1)), fe = ":host{flex-direction:column;justify-content:center;display:inline-flex}svg{font-size:var(--px-size-icon-s);width:1em;height:1em;color:var(--px-color-icon-accent-default);line-height:1}.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)}", O = new CSSStyleSheet();
316
+ O.replaceSync(fe);
317
+ var pe = class extends t {
318
+ #e = null;
319
+ #t;
320
+ #n = () => "<svg aria-hidden=\"true\">\n <use></use>\n </svg>";
321
+ static get observedAttributes() {
322
+ return [
323
+ ...super.observedAttributes,
324
+ "name",
325
+ "size",
326
+ "color",
327
+ "aria-label",
328
+ "inverted",
329
+ "from",
330
+ "disabled"
331
+ ];
332
+ }
333
+ constructor(...e) {
334
+ super(...e, O), this.shadowRoot.innerHTML = this.#n(), this.#t = this.attachInternals?.(), this.#t && (this.#t.role = "img");
335
+ }
336
+ attributeChangedCallback(e, t, n) {
337
+ if (t !== n) switch (e) {
338
+ case "name":
339
+ this.updateName(t, n);
340
+ break;
341
+ case "size":
342
+ this.updateAttribute(e, t, n, ae);
343
+ break;
344
+ case "color":
345
+ this.updateAttribute(e, t, n, D);
346
+ break;
347
+ case "disabled":
348
+ this.color = "state-disabled";
349
+ break;
350
+ case "aria-label":
351
+ if (!this.#t) return;
352
+ n ? (this.#t.ariaHidden = "false", this.ariaHidden = "false") : (this.#t.ariaHidden = "true", this.ariaHidden = "true");
353
+ }
354
+ }
355
+ connectedCallback() {
356
+ this.role = "img";
357
+ let e = document.querySelectorAll("px-icon-set");
358
+ e || console.log("<px-icon-set> component not found");
359
+ for (let t of e) {
360
+ if (!t.getAttribute("name") || !t.getAttribute("src")) {
361
+ console.error("Icon name or src not found");
362
+ continue;
363
+ }
364
+ t.getAttribute("name") === this.from && t.getAttribute("type") !== "font" && (this.#e = t.getAttribute("src"), this.$el.firstElementChild?.setAttribute("href", `${this.#e}#icon-${this.name}`));
365
+ }
366
+ !this.ariaLabel && this.#t && (this.#t.ariaHidden = "true", this.ariaHidden = "true"), this.parentElement?.localName === "px-a" && this.slot !== "before" && this.slot !== "after" && (this.color || this.setAttribute("color", "inherit"));
367
+ }
368
+ updateAttribute(e, t, n, r) {
369
+ t !== null && t !== "" && (e === "size" ? this.$el.classList.toggle(`${e}-${t}`) : this.$el.classList.toggle(t)), n !== null && n !== "" && (e === "size" ? this.$el.classList.toggle(`${e}-${n}`) : this.$el.classList.toggle(n)), this.checkName(r, n) || m(`${n} is not an allowed ${e} value for ${this.tagName.toLowerCase()}`);
370
+ }
371
+ updateName(e, t) {
372
+ this.#e && this.$el.firstElementChild?.setAttribute("href", `${this.#e}#icon-${t}`);
373
+ }
374
+ get $el() {
375
+ return this.shadowRoot.querySelector("svg");
376
+ }
377
+ get name() {
378
+ return this.getAttribute("name");
379
+ }
380
+ set name(e) {
381
+ g(this, "name", e);
382
+ }
383
+ get size() {
384
+ return this.getAttribute("size");
385
+ }
386
+ set size(e) {
387
+ g(this, "size", e);
388
+ }
389
+ get color() {
390
+ return this.getAttribute("color");
391
+ }
392
+ set color(e) {
393
+ g(this, "color", e);
394
+ }
395
+ get arialabel() {
396
+ return this.getAttribute("aria-label");
397
+ }
398
+ set arialabel(e) {
399
+ g(this, "aria-label", e);
400
+ }
401
+ get inverted() {
402
+ return this.hasAttribute("inverted");
403
+ }
404
+ set inverted(e) {
405
+ a(this, "inverted", e);
406
+ }
407
+ get from() {
408
+ return this.getAttribute("from");
409
+ }
410
+ set from(e) {
411
+ g(this, "from", e);
412
+ }
413
+ get disabled() {
414
+ return this.hasAttribute("disabled");
415
+ }
416
+ set disabled(e) {
417
+ a(this, "disabled", e);
418
+ }
565
419
  };
566
- j.nativeName = "h2";
567
- let T = j;
568
- customElements.get("px-h2") || customElements.define("px-h2", T);
569
- const Y = class Y extends f {
570
- constructor() {
571
- super("h3");
572
- }
420
+ customElements.get("px-icon") || customElements.define("px-icon", pe);
421
+ //#endregion
422
+ //#region ../../components/Heading/src/heading.css?inline
423
+ var k = "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{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);margin:0}::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6){margin-bottom:var(--px-spacing-heading-to-content-mobile)}:host([inverted]) h1,:host([inverted]) .style-title-4xl,:host([inverted]) ::slotted(h1),:host([inverted]) h2,:host([inverted]) .style-title-3xl,:host([inverted]) ::slotted(h2),:host([inverted]) h3,:host([inverted]) .style-title-2xl,:host([inverted]) ::slotted(h3),:host([inverted]) h4,:host([inverted]) .style-title-xl,:host([inverted]) ::slotted(h4),:host([inverted]) h5,:host([inverted]) .style-title-l,:host([inverted]) ::slotted(h5),:host([inverted]) h6,:host([inverted]) .style-title-m,:host([inverted]) ::slotted(h6),:host([inverted]) .style-title-s,:host([inverted]) .style-subtitle{color:var(--heading-color-inverted,var(--px-color-text-brand-inverted))}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-heading-4xl-mobile);line-height:var(--px-line-height-ratio-s);font-weight:var(--px-font-weight-title-large)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-3xl-mobile);line-height:var(--px-line-height-ratio-s);font-weight:var(--px-font-weight-title-large)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-2xl-mobile);line-height:var(--px-line-height-ratio-s)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-xl-mobile)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-heading-l-mobile)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-heading-m-mobile)}.style-subtitle{font-size:var(--px-text-size-heading-xl-mobile);font-weight:var(--px-font-weight-subtitle)}.style-title-s{font-size:var(--px-text-size-heading-s-mobile)}@media screen and (width>=48rem){::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6){margin-bottom:var(--px-spacing-heading-to-content-tablet)}h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{text-align:var(--heading-text-align--tablet,left)}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-heading-4xl-tablet)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-3xl-tablet)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-2xl-tablet)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-xl-tablet)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-heading-l-tablet)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-heading-m-tablet)}.style-title-s{font-size:var(--px-text-size-heading-s-tablet)}.style-subtitle{font-size:var(--px-text-size-heading-xl-tablet)}}@media screen and (width>=64.0625rem){::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6){margin-bottom:var(--px-spacing-heading-to-content-laptop)}h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{text-align:var(--heading-text-align--laptop,left)}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-heading-4xl-laptop)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-3xl-laptop)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-2xl-laptop)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-xl-laptop)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-heading-l-laptop)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-heading-m-laptop)}.style-title-s{font-size:var(--px-text-size-heading-s-laptop)}.style-subtitle{font-size:var(--px-text-size-heading-xl-laptop)}}@media screen and (width>=90.0625rem){::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6){margin-bottom:var(--px-spacing-heading-to-content-desktop)}h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{text-align:var(--heading-text-align--desktop,left)}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-heading-4xl-desktop)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-3xl-desktop)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-2xl-desktop)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-xl-desktop)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-heading-l-desktop)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-heading-m-desktop)}.style-title-s{font-size:var(--px-text-size-heading-s-desktop)}.style-subtitle{font-size:var(--px-text-size-heading-xl-desktop)}}", A = ".color-inherit{color:inherit!important}.color-brand{color:var(--px-color-text-brand-default)!important}.color-neutral{color:var(--px-color-text-neutral-default)!important}.color-dimmed{color:var(--px-color-text-dimmed-default)!important}.color-purpose-success{color:var(--px-color-text-purpose-success-default)!important}.color-purpose-warning{color:var(--px-color-text-purpose-warning-default)!important}.color-purpose-error{color:var(--px-color-text-purpose-error-default)!important}.color-purpose-unlimited{color:var(--px-color-text-purpose-unlimited-default)!important}.color-purpose-promo{color:var(--px-color-text-purpose-promo-default)!important}.color-state-hover{color:var(--px-color-text-state-hover-default)!important}.color-state-active{color:var(--px-color-text-state-active-default)!important}.color-state-disabled{color:var(--px-color-text-state-disabled-default)!important}:host([inverted]) .color-inherit{color:inherit!important}:host([inverted]) .color-brand{color:var(--px-color-text-brand-inverted)!important}:host([inverted]) .color-neutral{color:var(--px-color-text-neutral-inverted)!important}:host([inverted]) .color-dimmed{color:var(--px-color-text-dimmed-inverted)!important}:host([inverted]) .color-purpose-success{color:var(--px-color-text-purpose-success-inverted)!important}:host([inverted]) .color-purpose-warning{color:var(--px-color-text-purpose-warning-inverted)!important}:host([inverted]) .color-purpose-error{color:var(--px-color-text-purpose-error-inverted)!important}:host([inverted]) .color-purpose-unlimited{color:var(--px-color-text-purpose-unlimited-inverted)!important}:host([inverted]) .color-purpose-promo{color:var(--px-color-text-purpose-promo-inverted)!important}:host([inverted]) .color-state-hover{color:var(--px-color-text-state-hover-inverted)!important}:host([inverted]) .color-state-active{color:var(--px-color-text-state-active-inverted)!important}:host([inverted]) .color-state-disabled{color:var(--px-color-text-state-disabled-inverted)!important}.font-size-inherit{font-size:inherit;line-height:inherit}.font-size-body-l{font-size:var(--px-text-size-body-l-mobile)}.font-size-body-m{font-size:var(--px-text-size-body-m-mobile)}.font-size-body-s{font-size:var(--px-text-size-body-s-mobile)}.font-size-body-xs{font-size:var(--px-text-size-body-xs-mobile)}.font-size-heading-5xl{font-size:var(--px-text-size-heading-5xl-mobile)}.font-size-heading-4xl{font-size:var(--px-text-size-heading-4xl-mobile)}.font-size-heading-3xl{font-size:var(--px-text-size-heading-3xl-mobile)}.font-size-heading-2xl{font-size:var(--px-text-size-heading-2xl-mobile)}.font-size-heading-xl{font-size:var(--px-text-size-heading-xl-mobile)}.font-size-heading-l{font-size:var(--px-text-size-heading-l-mobile)}.font-size-heading-m{font-size:var(--px-text-size-heading-m-mobile)}.font-size-heading-s{font-size:var(--px-text-size-heading-s-mobile)}.font-size-heading-3xl,.font-size-heading-4xl,.font-size-heading-5xl{line-height:var(--px-line-height-ratio-s)}.font-size-link-m{font-size:var(--px-text-size-link-m-mobile)}.font-size-link-s{font-size:var(--px-text-size-link-s-mobile)}@media screen and (width>=48rem){.font-size-body-l{font-size:var(--px-text-size-body-l-tablet)}.font-size-body-m{font-size:var(--px-text-size-body-m-tablet)}.font-size-body-s{font-size:var(--px-text-size-body-s-tablet)}.font-size-body-xs{font-size:var(--px-text-size-body-xs-tablet)}.font-size-heading-5xl{font-size:var(--px-text-size-heading-5xl-tablet)}.font-size-heading-4xl{font-size:var(--px-text-size-heading-4xl-tablet)}.font-size-heading-3xl{font-size:var(--px-text-size-heading-3xl-tablet)}.font-size-heading-2xl{font-size:var(--px-text-size-heading-2xl-tablet)}.font-size-heading-xl{font-size:var(--px-text-size-heading-xl-tablet)}.font-size-heading-l{font-size:var(--px-text-size-heading-l-tablet)}.font-size-heading-m{font-size:var(--px-text-size-heading-m-tablet)}.font-size-heading-s{font-size:var(--px-text-size-heading-s-tablet)}.font-size-link-m{font-size:var(--px-text-size-link-m-tablet)}.font-size-link-s{font-size:var(--px-text-size-link-s-tablet)}}@media screen and (width>=64.0625rem){.font-size-body-l{font-size:var(--px-text-size-body-l-laptop)}.font-size-body-m{font-size:var(--px-text-size-body-m-laptop)}.font-size-body-s{font-size:var(--px-text-size-body-s-laptop)}.font-size-body-xs{font-size:var(--px-text-size-body-xs-laptop)}.font-size-heading-5xl{font-size:var(--px-text-size-heading-5xl-laptop)}.font-size-heading-4xl{font-size:var(--px-text-size-heading-4xl-laptop)}.font-size-heading-3xl{font-size:var(--px-text-size-heading-3xl-laptop)}.font-size-heading-2xl{font-size:var(--px-text-size-heading-2xl-laptop)}.font-size-heading-xl{font-size:var(--px-text-size-heading-xl-laptop)}.font-size-heading-l{font-size:var(--px-text-size-heading-l-laptop)}.font-size-heading-m{font-size:var(--px-text-size-heading-m-laptop)}.font-size-heading-s{font-size:var(--px-text-size-heading-s-laptop)}.font-size-link-m{font-size:var(--px-text-size-link-m-laptop)}.font-size-link-s{font-size:var(--px-text-size-link-s-laptop)}}@media screen and (width>=90.0625rem){.font-size-body-l{font-size:var(--px-text-size-body-l-desktop)}.font-size-body-m{font-size:var(--px-text-size-body-m-desktop)}.font-size-body-s{font-size:var(--px-text-size-body-s-desktop)}.font-size-body-xs{font-size:var(--px-text-size-body-xs-desktop)}.font-size-heading-5xl{font-size:var(--px-text-size-heading-5xl-desktop)}.font-size-heading-4xl{font-size:var(--px-text-size-heading-4xl-desktop)}.font-size-heading-3xl{font-size:var(--px-text-size-heading-3xl-desktop)}.font-size-heading-2xl{font-size:var(--px-text-size-heading-2xl-desktop)}.font-size-heading-xl{font-size:var(--px-text-size-heading-xl-desktop)}.font-size-heading-l{font-size:var(--px-text-size-heading-l-desktop)}.font-size-heading-m{font-size:var(--px-text-size-heading-m-desktop)}.font-size-heading-s{font-size:var(--px-text-size-heading-s-desktop)}.font-size-link-m{font-size:var(--px-text-size-link-m-desktop)}.font-size-link-s{font-size:var(--px-text-size-link-s-desktop)}}.font-weight-inherit{font-weight:inherit}.font-weight-body{font-weight:var(--px-font-weight-body)}.font-weight-title{font-weight:var(--px-font-weight-title)}.font-weight-title-large{font-weight:var(--px-font-weight-title-large)}.font-weight-subtitle{font-weight:var(--px-font-weight-subtitle)}", j = new CSSStyleSheet();
424
+ j.replaceSync(k);
425
+ var M = new CSSStyleSheet();
426
+ M.replaceSync(A);
427
+ var N = class extends e {
428
+ template() {
429
+ return "<slot></slot>";
430
+ }
431
+ constructor(e) {
432
+ super(j, M);
433
+ let t = document.createElement(e);
434
+ t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
435
+ }
436
+ static get observedAttributes() {
437
+ return [
438
+ ...super.observedAttributes,
439
+ "variant",
440
+ "color",
441
+ "text-align",
442
+ "text-align--mobile",
443
+ "text-align--tablet",
444
+ "text-align--laptop",
445
+ "text-align--desktop",
446
+ "inverted",
447
+ "auto-spacing"
448
+ ];
449
+ }
450
+ attributeChangedCallback(e, t, n) {
451
+ if (t !== n) switch (e) {
452
+ case "variant":
453
+ this.updateAttribute(e, t, n, p);
454
+ break;
455
+ case "color":
456
+ this.updateColor(t, n, c);
457
+ break;
458
+ case "text-align":
459
+ case "text-align--mobile":
460
+ case "text-align--tablet":
461
+ case "text-align--laptop":
462
+ case "text-align--desktop":
463
+ this.updateTextAlign(e, t, n, _);
464
+ break;
465
+ default: super.attributeChangedCallback(e, t, n);
466
+ }
467
+ }
468
+ toggleClass(e, t) {
469
+ e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`style-${e}`), t !== null && t !== "" && t !== "default" && this.$el.classList.toggle(`style-${t}`);
470
+ }
471
+ updateAttribute(e, t, n, r) {
472
+ this.checkName(r, n) ? this.toggleClass(t, n) : m(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join("\", \"")}".`);
473
+ }
474
+ updateColor(e, t, n) {
475
+ if (!this.checkName(n, t)) {
476
+ m(`"${t}" is not a valid color value for ${this.tagName.toLowerCase()}. Allowed values are: "${n.join("\", \"")}".`);
477
+ return;
478
+ }
479
+ let r = (e) => {
480
+ e !== null && e !== "" && e !== "default" && (this.$el.style.setProperty("--heading-color-default", `var(--px-color-text-${e}-default)`), this.$el.style.setProperty("--heading-color-inverted", `var(--px-color-text-${e}-inverted)`));
481
+ };
482
+ r(e), r(t);
483
+ }
484
+ updateTextAlign(e, t, n, r) {
485
+ if (!this.checkName(r, n)) {
486
+ m(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join("\", \"")}".`);
487
+ return;
488
+ }
489
+ let i = (e, t) => {
490
+ t !== null && t !== "" && t !== "default" && this.$el.style.setProperty(`--heading-text-align--${e}`, t);
491
+ };
492
+ if (e === "text-align") [
493
+ "mobile",
494
+ "tablet",
495
+ "laptop",
496
+ "desktop"
497
+ ].forEach((e) => {
498
+ i(e, t), i(e, n);
499
+ });
500
+ else {
501
+ let r = e.split("--")[1];
502
+ i(r, t), i(r, n);
503
+ }
504
+ }
505
+ get variant() {
506
+ return this.getAttribute("variant");
507
+ }
508
+ set variant(e) {
509
+ this._updateAttribute("variant", e);
510
+ }
511
+ get color() {
512
+ return this.getAttribute("color");
513
+ }
514
+ set color(e) {
515
+ this._updateAttribute("color", e);
516
+ }
517
+ get textAlign() {
518
+ return this.getAttribute("text-align");
519
+ }
520
+ set textAlign(e) {
521
+ this._updateAttribute("text-align", e);
522
+ }
523
+ get textAlignMobile() {
524
+ return this.getAttribute("text-align--mobile");
525
+ }
526
+ set textAlignMobile(e) {
527
+ this._updateAttribute("text-align--mobile", e);
528
+ }
529
+ get textAlignTablet() {
530
+ return this.getAttribute("text-align--tablet");
531
+ }
532
+ set textAlignTablet(e) {
533
+ this._updateAttribute("text-align--tablet", e);
534
+ }
535
+ get textAlignLaptop() {
536
+ return this.getAttribute("text-align--laptop");
537
+ }
538
+ set textAlignLaptop(e) {
539
+ this._updateAttribute("text-align--laptop", e);
540
+ }
541
+ get textAlignDesktop() {
542
+ return this.getAttribute("text-align--desktop");
543
+ }
544
+ set textAlignDesktop(e) {
545
+ this._updateAttribute("text-align--desktop", e);
546
+ }
547
+ get inverted() {
548
+ return this.hasAttribute("inverted");
549
+ }
550
+ set inverted(e) {
551
+ this._updateBooleanAttribute("inverted", e);
552
+ }
553
+ get autoSpacing() {
554
+ return this.hasAttribute("auto-spacing");
555
+ }
556
+ set autoSpacing(e) {
557
+ this._updateBooleanAttribute("auto-spacing", e);
558
+ }
559
+ }, me = class extends N {
560
+ static {
561
+ this.nativeName = "h1";
562
+ }
563
+ constructor() {
564
+ super("h1");
565
+ }
573
566
  };
574
- Y.nativeName = "h3";
575
- let E = Y;
576
- customElements.get("px-h3") || customElements.define("px-h3", E);
577
- const Z = class Z extends f {
578
- constructor() {
579
- super("h4");
580
- }
567
+ customElements.get("px-h1") || customElements.define("px-h1", me);
568
+ //#endregion
569
+ //#region ../../components/Heading/src/H2.ts
570
+ var he = class extends N {
571
+ static {
572
+ this.nativeName = "h2";
573
+ }
574
+ constructor() {
575
+ super("h2");
576
+ }
581
577
  };
582
- Z.nativeName = "h4";
583
- let B = Z;
584
- customElements.get("px-h4") || customElements.define("px-h4", B);
585
- const G = class G extends f {
586
- constructor() {
587
- super("h5");
588
- }
578
+ customElements.get("px-h2") || customElements.define("px-h2", he);
579
+ //#endregion
580
+ //#region ../../components/Heading/src/H3.ts
581
+ var ge = class extends N {
582
+ static {
583
+ this.nativeName = "h3";
584
+ }
585
+ constructor() {
586
+ super("h3");
587
+ }
589
588
  };
590
- G.nativeName = "h5";
591
- let M = G;
592
- customElements.get("px-h5") || customElements.define("px-h5", M);
593
- const K = class K extends f {
594
- constructor() {
595
- super("h6");
596
- }
589
+ customElements.get("px-h3") || customElements.define("px-h3", ge);
590
+ //#endregion
591
+ //#region ../../components/Heading/src/H4.ts
592
+ var _e = class extends N {
593
+ static {
594
+ this.nativeName = "h4";
595
+ }
596
+ constructor() {
597
+ super("h4");
598
+ }
597
599
  };
598
- K.nativeName = "h6";
599
- let R = K;
600
- customElements.get("px-h6") || customElements.define("px-h6", R);
601
- const Ut = ".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}}", ut = new CSSStyleSheet();
602
- ut.replaceSync(Ut);
603
- const Jt = [
604
- "",
605
- "default",
606
- "horizontal",
607
- "vertical"
608
- ], Qt = ["", "default", "none", "s", "m", "l"], Vt = [
609
- "",
610
- "main",
611
- "brand",
612
- "none",
613
- "neutral",
614
- "purpose-success",
615
- "purpose-warning",
616
- "purpose-error",
617
- "purpose-unlimited",
618
- "state-hover",
619
- "state-active"
620
- ], S = class S extends y {
621
- constructor() {
622
- var e;
623
- super(ut);
624
- const t = document.createElement(S.nativeName);
625
- t.classList.add("separator"), this.internals = (e = this.attachInternals) == null ? void 0 : e.call(this), this.shadowRoot.appendChild(t);
626
- }
627
- static get observedAttributes() {
628
- return [
629
- ...super.observedAttributes,
630
- "direction",
631
- "direction--mobile",
632
- "direction--tablet",
633
- "direction--laptop",
634
- "direction--desktop",
635
- "size",
636
- "color",
637
- "inverted"
638
- ];
639
- }
640
- attributeChangedCallback(t, e, o) {
641
- if (e !== o)
642
- switch (t) {
643
- case "direction":
644
- case "direction--mobile":
645
- case "direction--tablet":
646
- case "direction--laptop":
647
- case "direction--desktop":
648
- this.updateDirection(
649
- t,
650
- e,
651
- o,
652
- Jt
653
- );
654
- break;
655
- case "size":
656
- this.updateSize(t, e, o, Qt);
657
- break;
658
- case "color":
659
- this.updateColor(t, e, o, Vt);
660
- break;
661
- default:
662
- super.attributeChangedCallback(t, e, o);
663
- break;
664
- }
665
- }
666
- updateSize(t, e, o, r) {
667
- const i = (a) => {
668
- a !== null && a !== "" && a !== "default" && this.$el.style.setProperty(
669
- "--separator-size",
670
- `var(--px-size-border-${a})`
671
- );
672
- };
673
- this.checkName(r, o) ? (i(e), i(o)) : d(
674
- `${o} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
675
- );
676
- }
677
- updateColor(t, e, o, r) {
678
- const i = (a) => {
679
- a !== null && a !== "" && a !== "default" && (this.$el.style.setProperty(
680
- "--separator-color-default",
681
- `var(--px-color-border-${a}-default)`
682
- ), this.$el.style.setProperty(
683
- "--separator-color-inverted",
684
- `var(--px-color-border-${a}-inverted)`
685
- ));
686
- };
687
- this.checkName(r, o) ? (i(e), i(o)) : d(
688
- `${o} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
689
- );
690
- }
691
- updateDirection(t, e, o, r) {
692
- const i = (a, l) => {
693
- l !== null && l !== "" && l !== "default" && this.$el.classList.add(`separator-direction-${l}--${a}`);
694
- };
695
- if (!this.checkName(r, o))
696
- d(
697
- `${o} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
698
- );
699
- else if (t === "direction")
700
- ["mobile", "tablet", "laptop", "desktop"].forEach((a) => {
701
- Array.from(this.$el.classList).find(
702
- (k) => k.startsWith("separator-direction-") && k.endsWith(`--${a}`)
703
- ) || i(a, o);
704
- });
705
- else {
706
- const a = t.split("--")[1], l = Array.from(this.$el.classList).find(
707
- (k) => k.startsWith("separator-direction-") && k.endsWith(`--${a}`)
708
- );
709
- l ? this.$el.classList.replace(
710
- l,
711
- `separator-direction-${o}--${a}`
712
- ) : i(a, o);
713
- }
714
- }
715
- get direction() {
716
- return this.getAttribute("direction");
717
- }
718
- set direction(t) {
719
- this.setAttribute("direction", t);
720
- }
721
- get directionMobile() {
722
- return this.getAttribute("direction--mobile");
723
- }
724
- set directionMobile(t) {
725
- this.setAttribute("direction--mobile", t);
726
- }
727
- get directionTablet() {
728
- return this.getAttribute("direction--tablet");
729
- }
730
- set directionTablet(t) {
731
- this.setAttribute("direction--tablet", t);
732
- }
733
- get directionLaptop() {
734
- return this.getAttribute("direction--laptop");
735
- }
736
- set directionLaptop(t) {
737
- this.setAttribute("direction--laptop", t);
738
- }
739
- get directionDesktop() {
740
- return this.getAttribute("direction--desktop");
741
- }
742
- set directionDesktop(t) {
743
- this.setAttribute("direction--desktop", t);
744
- }
745
- get size() {
746
- return this.getAttribute("size");
747
- }
748
- set size(t) {
749
- this.setAttribute("size", t);
750
- }
751
- get color() {
752
- return this.getAttribute("color");
753
- }
754
- set color(t) {
755
- this.setAttribute("color", t);
756
- }
757
- get inverted() {
758
- return this.getAttribute("inverted");
759
- }
760
- set inverted(t) {
761
- this.setAttribute("inverted", t);
762
- }
600
+ customElements.get("px-h4") || customElements.define("px-h4", _e);
601
+ //#endregion
602
+ //#region ../../components/Heading/src/H5.ts
603
+ var ve = class extends N {
604
+ static {
605
+ this.nativeName = "h5";
606
+ }
607
+ constructor() {
608
+ super("h5");
609
+ }
763
610
  };
764
- S.nativeName = "hr";
765
- let I = S;
766
- customElements.get("px-separator") || customElements.define("px-separator", I);
767
- const te = ':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)}}', ee = ':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}}', xt = new CSSStyleSheet();
768
- xt.replaceSync(ee);
769
- const g = (s, t, e) => `:host([${s}${e ? `--${e}` : ""}='${t}']) .container`, u = "px-padding", oe = [
770
- h(
771
- "padding",
772
- g,
773
- c,
774
- u,
775
- "--container-padding"
776
- ),
777
- h(
778
- "padding-inline",
779
- g,
780
- c,
781
- u
782
- ),
783
- h(
784
- "padding-block",
785
- g,
786
- c,
787
- u
788
- ),
789
- h(
790
- "padding-top",
791
- g,
792
- c,
793
- u
794
- ),
795
- h(
796
- "padding-right",
797
- g,
798
- c,
799
- u,
800
- "--container-padding-right"
801
- ),
802
- h(
803
- "padding-bottom",
804
- g,
805
- c,
806
- u
807
- ),
808
- h(
809
- "padding-left",
810
- g,
811
- c,
812
- u,
813
- "--container-padding-left"
814
- )
815
- ], X = class X extends Bt {
816
- constructor() {
817
- super(xt, ...oe), this.template = () => `<div class="container">
818
- <slot></slot>
819
- <slot name="anchor-left"></slot>
820
- <slot name="anchor-right"></slot>
821
- <slot name="anchor-full"></slot>
822
- </div>`, this._bgObserver = null, this._isInViewport = !1, this.shadowRoot.innerHTML = this.template();
823
- }
824
- static get observedAttributes() {
825
- return [
826
- ...super.observedAttributes,
827
- "border",
828
- "border-color",
829
- "border-side",
830
- "border-side--mobile",
831
- "border-side--tablet",
832
- "border-side--laptop",
833
- "border-radius",
834
- "no-border-radius",
835
- "no-border-radius--mobile",
836
- "no-border-radius--tablet",
837
- "no-border-radius--laptop",
838
- "background-color",
839
- "background-color--mobile",
840
- "background-color--tablet",
841
- "background-color--laptop",
842
- "background-gradient",
843
- "background-gradient--mobile",
844
- "background-gradient--tablet",
845
- "background-gradient--laptop",
846
- "background-image",
847
- "background-image--mobile",
848
- "background-image--tablet",
849
- "background-image--laptop",
850
- "background-size",
851
- "background-position",
852
- "box-shadow",
853
- "anchor-offset",
854
- "inverted"
855
- ];
856
- }
857
- connectedCallback() {
858
- 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(() => {
859
- this.$slotAnchor && this.addAnchorClass();
860
- }), this.contentObserver.observe(this, {
861
- childList: !0,
862
- subtree: !0,
863
- characterData: !0
864
- }), this._bgObserver = new IntersectionObserver((t) => {
865
- t.forEach((e) => {
866
- var o;
867
- e.isIntersecting && (this._isInViewport = !0, this._loadBackgroundImages(), (o = this._bgObserver) == null || o.disconnect());
868
- });
869
- }), this._bgObserver.observe(this.$el);
870
- }
871
- disconnectedCallback() {
872
- var t;
873
- (t = this._bgObserver) == null || t.disconnect(), this.contentObserver.disconnect();
874
- }
875
- attributeChangedCallback(t, e, o) {
876
- if (e !== o)
877
- switch (t) {
878
- case "border":
879
- this.updateAttribute(t, e, o, Dt);
880
- break;
881
- case "border-color":
882
- this.updateBorderColor(t, o);
883
- break;
884
- case "border-side":
885
- case "border-side--mobile":
886
- case "border-side--tablet":
887
- case "border-side--laptop":
888
- this.updateAttribute(t, e, o, qt);
889
- break;
890
- case "border-radius":
891
- this.updateAttribute(
892
- t,
893
- e,
894
- o,
895
- Pt
896
- );
897
- break;
898
- case "no-border-radius":
899
- case "no-border-radius--mobile":
900
- case "no-border-radius--tablet":
901
- case "no-border-radius--laptop":
902
- this.updateNoBorderRadius(
903
- t,
904
- e,
905
- o,
906
- It
907
- );
908
- break;
909
- case "background-color":
910
- case "background-color--mobile":
911
- case "background-color--tablet":
912
- case "background-color--laptop":
913
- this.updateBackgroundColor(t, o);
914
- break;
915
- case "background-gradient":
916
- case "background-gradient--mobile":
917
- case "background-gradient--tablet":
918
- case "background-gradient--laptop":
919
- this.updateGradient(t, o);
920
- break;
921
- case "background-size":
922
- this.updateAttribute(
923
- t,
924
- e,
925
- o,
926
- Rt
927
- );
928
- break;
929
- case "background-image":
930
- case "background-image--mobile":
931
- case "background-image--tablet":
932
- case "background-image--laptop":
933
- this._isInViewport && this.updateBackgroundImg(t, o);
934
- break;
935
- case "background-position":
936
- o !== null && o !== "" && (this.$el.style.backgroundPosition = o);
937
- break;
938
- case "box-shadow":
939
- this.updateAttribute(t, e, o, Mt);
940
- break;
941
- case "anchor-offset":
942
- this.updateAnchorOffset(e, o, c);
943
- break;
944
- default:
945
- super.attributeChangedCallback(t, e, o);
946
- break;
947
- }
948
- }
949
- _loadBackgroundImages() {
950
- [
951
- "background-image",
952
- "background-image--mobile",
953
- "background-image--tablet",
954
- "background-image--laptop"
955
- ].forEach((e) => {
956
- const o = this.getAttribute(e);
957
- o && this.updateBackgroundImg(e, o);
958
- });
959
- }
960
- updateBackgroundImg(t, e) {
961
- this.$el.style.setProperty(`--${t}`, `url("${e}")`);
962
- }
963
- updateGradient(t, e) {
964
- if (this.checkName(Ht, e)) {
965
- const o = this.splitAttrNameFromBreakpoint(t);
966
- t = o.attrName;
967
- const r = o.breakpoint;
968
- this.$el.style.setProperty(
969
- `--${t}${r}`,
970
- `linear-gradient(var(--px-color-background-gradient-${e}))`
971
- );
972
- } else
973
- d(
974
- `${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
975
- );
976
- }
977
- updateBackgroundColor(t, e) {
978
- const o = e.startsWith("surface-");
979
- if (this.checkName(ot, e)) {
980
- const r = this.splitAttrNameFromBreakpoint(t), i = r.breakpoint;
981
- this.$el.style.setProperty(
982
- `--${r.attrName}${i}`,
983
- `var(--px-color-background-${e}${o ? "" : "-default"})`
984
- ), this.$el.style.setProperty(
985
- `--${r.attrName}-inverted${i}`,
986
- `var(--px-color-background-${e}${o ? "" : "-inverted"})`
987
- );
988
- } else
989
- d(
990
- `${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
991
- );
992
- }
993
- updateBorderColor(t, e) {
994
- this.checkName(Ot, e) ? (this.$el.style.setProperty(
995
- `--${t}`,
996
- `var(--px-color-border-${e}-default)`
997
- ), this.$el.style.setProperty(
998
- `--${t}-inverted`,
999
- `var(--px-color-border-${e}-inverted)`
1000
- )) : d(
1001
- `${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
1002
- );
1003
- }
1004
- updateNoBorderRadius(t, e, o, r) {
1005
- if (!this.checkName(r, o))
1006
- d(
1007
- `${o} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
1008
- );
1009
- else {
1010
- const i = this.splitAttrNameFromBreakpoint(t), a = i.breakpoint;
1011
- e !== null && e !== "" && this.$el.classList.toggle(
1012
- `${i.attrName}-${e}${a}`
1013
- ), o !== null && o !== "" && this.$el.classList.toggle(
1014
- `${i.attrName}-${o}${a}`
1015
- );
1016
- }
1017
- }
1018
- updateAttribute(t, e, o, r) {
1019
- if (!this.checkName(r, o))
1020
- d(
1021
- `${o} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
1022
- );
1023
- else {
1024
- const i = this.splitAttrNameFromBreakpoint(t), a = i.breakpoint;
1025
- e !== null && e !== "" && this.$el.classList.toggle(
1026
- `${i.attrName}-${e}${a}`
1027
- ), o !== null && o !== "" && this.$el.classList.toggle(
1028
- `${i.attrName}-${o}${a}`
1029
- );
1030
- }
1031
- }
1032
- splitAttrNameFromBreakpoint(t) {
1033
- let e = "";
1034
- if (["--mobile", "--tablet", "--laptop"].some(
1035
- (o) => t.includes(o)
1036
- )) {
1037
- const o = t.split("--");
1038
- t = o[0], e = `--${o[1]}`;
1039
- }
1040
- return { attrName: t, breakpoint: e };
1041
- }
1042
- updateAnchorOffset(t, e, o) {
1043
- if (!O(o, e)) {
1044
- d(
1045
- `${e} is not a valid anchor-offset value for ${this.tagName.toLowerCase()}`
1046
- );
1047
- return;
1048
- }
1049
- const r = (i) => {
1050
- i !== null && i !== "" && i !== "default" && (this.$el.style.setProperty(
1051
- "--container-anchor-offset--mobile",
1052
- `var(--px-padding-${i}-mobile)`
1053
- ), this.$el.style.setProperty(
1054
- "--container-anchor-offset--tablet",
1055
- `var(--px-padding-${i}-tablet)`
1056
- ), this.$el.style.setProperty(
1057
- "--container-anchor-offset--laptop",
1058
- `var(--px-padding-${i}-laptop)`
1059
- ));
1060
- };
1061
- r(t), r(e);
1062
- }
1063
- addAnchorClass() {
1064
- this.$el.classList.contains("anchored") || this.$el.classList.add("anchored");
1065
- }
1066
- get $slotAnchor() {
1067
- return this.querySelector('[slot^="anchor"]');
1068
- }
1069
- get padding() {
1070
- return this.getAttribute("padding");
1071
- }
1072
- set padding(t) {
1073
- this.setAttribute("padding", t);
1074
- }
1075
- get paddingBlock() {
1076
- return this.getAttribute("padding-block");
1077
- }
1078
- set paddingBlock(t) {
1079
- this.setAttribute("padding-block", t);
1080
- }
1081
- get paddingInline() {
1082
- return this.getAttribute("padding-inline");
1083
- }
1084
- set paddingInline(t) {
1085
- this.setAttribute("padding-inline", t);
1086
- }
1087
- get paddingTop() {
1088
- return this.getAttribute("padding-top");
1089
- }
1090
- set paddingTop(t) {
1091
- this.setAttribute("padding-top", t);
1092
- }
1093
- get paddingRight() {
1094
- return this.getAttribute("padding-right");
1095
- }
1096
- set paddingRight(t) {
1097
- this.setAttribute("padding-right", t);
1098
- }
1099
- get paddingBottom() {
1100
- return this.getAttribute("padding-bottom");
1101
- }
1102
- set paddingBottom(t) {
1103
- this.setAttribute("padding-bottom", t);
1104
- }
1105
- get paddingLeft() {
1106
- return this.getAttribute("padding-left");
1107
- }
1108
- set paddingLeft(t) {
1109
- this.setAttribute("padding-left", t);
1110
- }
1111
- get paddingMobile() {
1112
- return this.getAttribute("padding--mobile");
1113
- }
1114
- set paddingMobile(t) {
1115
- this.setAttribute("padding--mobile", t);
1116
- }
1117
- get paddingBlockMobile() {
1118
- return this.getAttribute("padding-block--mobile");
1119
- }
1120
- set paddingBlockMobile(t) {
1121
- this.setAttribute("padding-block--mobile", t);
1122
- }
1123
- get paddingInlineMobile() {
1124
- return this.getAttribute("padding-inline--mobile");
1125
- }
1126
- set paddingInlineMobile(t) {
1127
- this.setAttribute("padding-inline--mobile", t);
1128
- }
1129
- get paddingTopMobile() {
1130
- return this.getAttribute("padding-top--mobile");
1131
- }
1132
- set paddingTopMobile(t) {
1133
- this.setAttribute("padding-top--mobile", t);
1134
- }
1135
- get paddingRightMobile() {
1136
- return this.getAttribute("padding-right--mobile");
1137
- }
1138
- set paddingRightMobile(t) {
1139
- this.setAttribute("padding-right--mobile", t);
1140
- }
1141
- get paddingBottomMobile() {
1142
- return this.getAttribute("padding-bottom--mobile");
1143
- }
1144
- set paddingBottomMobile(t) {
1145
- this.setAttribute("padding-bottom--mobile", t);
1146
- }
1147
- get paddingLeftMobile() {
1148
- return this.getAttribute("padding-left--mobile");
1149
- }
1150
- set paddingLeftMobile(t) {
1151
- this.setAttribute("padding-left--mobile", t);
1152
- }
1153
- get paddingTablet() {
1154
- return this.getAttribute("padding--tablet");
1155
- }
1156
- set paddingTablet(t) {
1157
- this.setAttribute("padding--tablet", t);
1158
- }
1159
- get paddingBlockTablet() {
1160
- return this.getAttribute("padding-block--tablet");
1161
- }
1162
- set paddingBlockTablet(t) {
1163
- this.setAttribute("padding-block--tablet", t);
1164
- }
1165
- get paddingInlineTablet() {
1166
- return this.getAttribute("padding-inline--tablet");
1167
- }
1168
- set paddingInlineTablet(t) {
1169
- this.setAttribute("padding-inline--tablet", t);
1170
- }
1171
- get paddingTopTablet() {
1172
- return this.getAttribute("padding-top--tablet");
1173
- }
1174
- set paddingTopTablet(t) {
1175
- this.setAttribute("padding-top--tablet", t);
1176
- }
1177
- get paddingRightTablet() {
1178
- return this.getAttribute("padding-right--tablet");
1179
- }
1180
- set paddingRightTablet(t) {
1181
- this.setAttribute("padding-right--tablet", t);
1182
- }
1183
- get paddingBottomTablet() {
1184
- return this.getAttribute("padding-bottom--tablet");
1185
- }
1186
- set paddingBottomTablet(t) {
1187
- this.setAttribute("padding-bottom--tablet", t);
1188
- }
1189
- get paddingLeftTablet() {
1190
- return this.getAttribute("padding-left--tablet");
1191
- }
1192
- set paddingLeftTablet(t) {
1193
- this.setAttribute("padding-left--tablet", t);
1194
- }
1195
- get paddingLaptop() {
1196
- return this.getAttribute("padding--laptop");
1197
- }
1198
- set paddingLaptop(t) {
1199
- this.setAttribute("padding--laptop", t);
1200
- }
1201
- get paddingBlockLaptop() {
1202
- return this.getAttribute("padding-block--laptop");
1203
- }
1204
- set paddingBlockLaptop(t) {
1205
- this.setAttribute("padding-block--laptop", t);
1206
- }
1207
- get paddingInlineLaptop() {
1208
- return this.getAttribute("padding-inline--laptop");
1209
- }
1210
- set paddingInlineLaptop(t) {
1211
- this.setAttribute("padding-inline--laptop", t);
1212
- }
1213
- get paddingTopLaptop() {
1214
- return this.getAttribute("padding-top--laptop");
1215
- }
1216
- set paddingTopLaptop(t) {
1217
- this.setAttribute("padding-top--laptop", t);
1218
- }
1219
- get paddingRightLaptop() {
1220
- return this.getAttribute("padding-right--laptop");
1221
- }
1222
- set paddingRightLaptop(t) {
1223
- this.setAttribute("padding-right--laptop", t);
1224
- }
1225
- get paddingBottomLaptop() {
1226
- return this.getAttribute("padding-bottom--laptop");
1227
- }
1228
- set paddingBottomLaptop(t) {
1229
- this.setAttribute("padding-bottom--laptop", t);
1230
- }
1231
- get paddingLeftLaptop() {
1232
- return this.getAttribute("padding-left--laptop");
1233
- }
1234
- set paddingLeftLaptop(t) {
1235
- this.setAttribute("padding-left--laptop", t);
1236
- }
1237
- get border() {
1238
- return this.getAttribute("border");
1239
- }
1240
- set border(t) {
1241
- this.setAttribute("border", t);
1242
- }
1243
- get borderColor() {
1244
- return this.getAttribute("border-color");
1245
- }
1246
- set borderColor(t) {
1247
- this.setAttribute("border-color", t);
1248
- }
1249
- get borderSide() {
1250
- return this.getAttribute("border-side");
1251
- }
1252
- set borderSide(t) {
1253
- this.setAttribute("border-side", t);
1254
- }
1255
- get borderSideMobile() {
1256
- return this.getAttribute("border-side--mobile");
1257
- }
1258
- set borderSideMobile(t) {
1259
- this.setAttribute("border-side--mobile", t);
1260
- }
1261
- get borderSideTablet() {
1262
- return this.getAttribute("border-side--tablet");
1263
- }
1264
- set borderSideTablet(t) {
1265
- this.setAttribute("border-side--tablet", t);
1266
- }
1267
- get borderSideLaptop() {
1268
- return this.getAttribute("border-side--laptop");
1269
- }
1270
- set borderSideLaptop(t) {
1271
- this.setAttribute("border-side--laptop", t);
1272
- }
1273
- get borderRadius() {
1274
- return this.getAttribute("border-radius");
1275
- }
1276
- set borderRadius(t) {
1277
- this.setAttribute("border-radius", t);
1278
- }
1279
- get noBorderRadius() {
1280
- return this.getAttribute("no-border-radius");
1281
- }
1282
- set noBorderRadius(t) {
1283
- this.setAttribute("no-border-radius", t);
1284
- }
1285
- get noBorderRadiusMobile() {
1286
- return this.getAttribute("no-border-radius--mobile");
1287
- }
1288
- set noBorderRadiusMobile(t) {
1289
- this.setAttribute("no-border-radius--mobile", t);
1290
- }
1291
- get noBorderRadiusTablet() {
1292
- return this.getAttribute("no-border-radius--tablet");
1293
- }
1294
- set noBorderRadiusTablet(t) {
1295
- this.setAttribute("no-border-radius--tablet", t);
1296
- }
1297
- get noBorderRadiusLaptop() {
1298
- return this.getAttribute("no-border-radius--laptop");
1299
- }
1300
- set noBorderRadiusLaptop(t) {
1301
- this.setAttribute("no-border-radius--laptop", t);
1302
- }
1303
- get backgroundColor() {
1304
- return this.getAttribute("background-color");
1305
- }
1306
- set backgroundColor(t) {
1307
- this.setAttribute("background-color", t);
1308
- }
1309
- get backgroundColorMobile() {
1310
- return this.getAttribute("background-color--mobile");
1311
- }
1312
- set backgroundColorMobile(t) {
1313
- this.setAttribute("background-color--mobile", t);
1314
- }
1315
- get backgroundColorTablet() {
1316
- return this.getAttribute("background-color--tablet");
1317
- }
1318
- set backgroundColorTablet(t) {
1319
- this.setAttribute("background-color--tablet", t);
1320
- }
1321
- get backgroundColorLaptop() {
1322
- return this.getAttribute("background-color--laptop");
1323
- }
1324
- set backgroundColorLaptop(t) {
1325
- this.setAttribute("background-color--laptop", t);
1326
- }
1327
- get gradient() {
1328
- return this.getAttribute("background-gradient");
1329
- }
1330
- set gradient(t) {
1331
- this.setAttribute("background-gradient", t);
1332
- }
1333
- get gradientMobile() {
1334
- return this.getAttribute("background-gradient--mobile");
1335
- }
1336
- set gradientMobile(t) {
1337
- this.setAttribute("background-gradient--mobile", t);
1338
- }
1339
- get gradientTablet() {
1340
- return this.getAttribute("background-gradient--tablet");
1341
- }
1342
- set gradientTablet(t) {
1343
- this.setAttribute("background-gradient--tablet", t);
1344
- }
1345
- get gradientLaptop() {
1346
- return this.getAttribute("background-gradient--laptop");
1347
- }
1348
- set gradientLaptop(t) {
1349
- this.setAttribute("background-gradient--laptop", t);
1350
- }
1351
- get backgroundImage() {
1352
- return this.getAttribute("background-image");
1353
- }
1354
- set backgroundImage(t) {
1355
- this.setAttribute("background-image", t);
1356
- }
1357
- get backgroundImageMobile() {
1358
- return this.getAttribute("background-image--mobile");
1359
- }
1360
- set backgroundImageMobile(t) {
1361
- this.setAttribute("background-image--mobile", t);
1362
- }
1363
- get backgroundImageTablet() {
1364
- return this.getAttribute("background-image--tablet");
1365
- }
1366
- set backgroundImageTablet(t) {
1367
- this.setAttribute("background-image--tablet", t);
1368
- }
1369
- get backgroundImageLaptop() {
1370
- return this.getAttribute("background-image--laptop");
1371
- }
1372
- set backgroundImageLaptop(t) {
1373
- this.setAttribute("background-image--laptop", t);
1374
- }
1375
- get backgroundSize() {
1376
- return this.getAttribute("background-size");
1377
- }
1378
- set backgroundSize(t) {
1379
- this.setAttribute("background-size", t);
1380
- }
1381
- get backgroundPosition() {
1382
- return this.getAttribute("background-position");
1383
- }
1384
- set backgroundPosition(t) {
1385
- this.setAttribute("background-position", t);
1386
- }
1387
- get boxShadow() {
1388
- return this.getAttribute("box-shadow");
1389
- }
1390
- set boxShadow(t) {
1391
- this.setAttribute("box-shadow", t);
1392
- }
1393
- get anchorOffset() {
1394
- return this.getAttribute("anchor-offset");
1395
- }
1396
- set anchorOffset(t) {
1397
- this.setAttribute("anchor-offset", t);
1398
- }
1399
- get inverted() {
1400
- return this.getAttribute("inverted");
1401
- }
1402
- set inverted(t) {
1403
- this.setAttribute("inverted", t);
1404
- }
611
+ customElements.get("px-h5") || customElements.define("px-h5", ve);
612
+ //#endregion
613
+ //#region ../../components/Heading/src/H6.ts
614
+ var ye = class extends N {
615
+ static {
616
+ this.nativeName = "h6";
617
+ }
618
+ constructor() {
619
+ super("h6");
620
+ }
1405
621
  };
1406
- X.nativeName = "div";
1407
- let P = X;
1408
- customElements.get("px-container") || customElements.define("px-container", P);
1409
- const vt = new CSSStyleSheet();
1410
- vt.replaceSync(te);
1411
- class re extends HTMLElement {
1412
- constructor() {
1413
- super(), this.template = () => `
1414
- <px-container border-radius="none" padding-inline="none" background-color="${this.backgroundColor}">
1415
- <div class="content-wrapper ${this.$slotOverlap ? "overlapped" : ""}">
1416
- <px-vstack gap="heading-to-content">
1417
- <slot name="heading"></slot>
1418
- <px-vstack gap="none">
1419
- <slot></slot>
1420
- </px-vstack>
1421
- </px-vstack>
1422
- </div>
1423
- </px-container>
1424
- <div class="content-wrapper">
1425
- <slot name="overlap"></slot>
1426
- </div>
1427
- `, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [vt];
1428
- }
1429
- connectedCallback() {
1430
- const t = this.querySelector('[slot="heading"]');
1431
- !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");
1432
- }
1433
- static get observedAttributes() {
1434
- return [
1435
- "background-color",
1436
- "background-gradient",
1437
- "background-image",
1438
- "background-image--mobile",
1439
- "background-image--tablet",
1440
- "background-image--laptop",
1441
- "background-size",
1442
- "background-position",
1443
- "padding-block",
1444
- "padding-top",
1445
- "padding-bottom",
1446
- "padding-block--mobile",
1447
- "padding-top--mobile",
1448
- "padding-bottom--mobile",
1449
- "padding-block--tablet",
1450
- "padding-top--tablet",
1451
- "padding-bottom--tablet",
1452
- "padding-block--laptop",
1453
- "padding-top--laptop",
1454
- "padding-bottom--laptop",
1455
- "border",
1456
- "border-side",
1457
- "border-side--mobile",
1458
- "border-side--tablet",
1459
- "border-side--laptop"
1460
- ];
1461
- }
1462
- get $container() {
1463
- return this.shadowRoot.querySelector("px-container");
1464
- }
1465
- attributeChangedCallback(t, e, o) {
1466
- if (e !== o)
1467
- switch (t) {
1468
- case "background-color":
1469
- this.$container.backgroundColor = ot.indexOf(o) > 0 ? o : "none";
1470
- break;
1471
- case "background-gradient":
1472
- this.$container.gradient = this.gradient;
1473
- break;
1474
- case "background-image":
1475
- this.$container.backgroundImage = o;
1476
- break;
1477
- case "background-image--mobile":
1478
- this.$container.backgroundImageMobile = o;
1479
- break;
1480
- case "background-image--tablet":
1481
- this.$container.backgroundImageTablet = o;
1482
- break;
1483
- case "background-image--laptop":
1484
- this.$container.backgroundImageLaptop = o;
1485
- break;
1486
- case "background-size":
1487
- this.$container.backgroundSize = o;
1488
- break;
1489
- case "background-position":
1490
- this.$container.backgroundPosition = o;
1491
- break;
1492
- case "padding-block":
1493
- this.$container.paddingBlock = o;
1494
- break;
1495
- case "padding-top":
1496
- this.$container.paddingTop = o;
1497
- break;
1498
- case "padding-bottom":
1499
- this.$container.paddingBottom = o;
1500
- break;
1501
- case "padding-block--mobile":
1502
- this.$container.paddingBlockMobile = o;
1503
- break;
1504
- case "padding-top--mobile":
1505
- this.$container.paddingTopMobile = o;
1506
- break;
1507
- case "padding-bottom--mobile":
1508
- this.$container.paddingBottomMobile = o;
1509
- break;
1510
- case "padding-block--tablet":
1511
- this.$container.paddingBlockTablet = o;
1512
- break;
1513
- case "padding-top--tablet":
1514
- this.$container.paddingTopTablet = o;
1515
- break;
1516
- case "padding-bottom--tablet":
1517
- this.$container.paddingBottomTablet = o;
1518
- break;
1519
- case "padding-block--laptop":
1520
- this.$container.paddingBlockLaptop = o;
1521
- break;
1522
- case "padding-top--laptop":
1523
- this.$container.paddingTopLaptop = o;
1524
- break;
1525
- case "padding-bottom--laptop":
1526
- this.$container.paddingBottomLaptop = o;
1527
- break;
1528
- case "border":
1529
- this.$container.border = o;
1530
- break;
1531
- case "border-side":
1532
- this.$container.borderSide = o;
1533
- break;
1534
- case "border-side--mobile":
1535
- this.$container.borderSideMobile = o;
1536
- break;
1537
- case "border-side--tablet":
1538
- this.$container.borderSideTablet = o;
1539
- break;
1540
- case "border-side--laptop":
1541
- this.$container.borderSideLaptop = o;
1542
- break;
1543
- }
1544
- }
1545
- get $slotOverlap() {
1546
- return this.querySelector('[slot="overlap"]');
1547
- }
1548
- get backgroundColor() {
1549
- return this.getAttribute("background-color") || "none";
1550
- }
1551
- set backgroundColor(t) {
1552
- this.setAttribute("background-color", t);
1553
- }
1554
- get gradient() {
1555
- return this.getAttribute("background-gradient");
1556
- }
1557
- set gradient(t) {
1558
- this.setAttribute("background-gradient", t);
1559
- }
1560
- get backgroundImage() {
1561
- return this.getAttribute("background-image");
1562
- }
1563
- set backgroundImage(t) {
1564
- this.setAttribute("background-image", t);
1565
- }
1566
- get backgroundImageMobile() {
1567
- return this.getAttribute("background-image--mobile");
1568
- }
1569
- set backgroundImageMobile(t) {
1570
- this.setAttribute("background-image--mobile", t);
1571
- }
1572
- get backgroundImageTablet() {
1573
- return this.getAttribute("background-image--tablet");
1574
- }
1575
- set backgroundImageTablet(t) {
1576
- this.setAttribute("background-image--tablet", t);
1577
- }
1578
- get backgroundImageLaptop() {
1579
- return this.getAttribute("background-image--laptop");
1580
- }
1581
- set backgroundImageLaptop(t) {
1582
- this.setAttribute("background-image--laptop", t);
1583
- }
1584
- get backgroundSize() {
1585
- return this.getAttribute("background-size");
1586
- }
1587
- set backgroundSize(t) {
1588
- this.setAttribute("background-size", t);
1589
- }
1590
- get backgroundPosition() {
1591
- return this.getAttribute("background-position");
1592
- }
1593
- set backgroundPosition(t) {
1594
- this.setAttribute("background-position", t);
1595
- }
1596
- get paddingBlock() {
1597
- return this.getAttribute("padding-block");
1598
- }
1599
- set paddingBlock(t) {
1600
- this.setAttribute("padding-block", t);
1601
- }
1602
- get paddingTop() {
1603
- return this.getAttribute("padding-top");
1604
- }
1605
- set paddingTop(t) {
1606
- this.setAttribute("padding-top", t);
1607
- }
1608
- get paddingBottom() {
1609
- return this.getAttribute("padding-bottom");
1610
- }
1611
- set paddingBottom(t) {
1612
- this.setAttribute("padding-bottom", t);
1613
- }
1614
- get paddingBlockMobile() {
1615
- return this.getAttribute("padding-block--mobile");
1616
- }
1617
- set paddingBlockMobile(t) {
1618
- this.setAttribute("padding-block--mobile", t);
1619
- }
1620
- get paddingTopMobile() {
1621
- return this.getAttribute("padding-top--mobile");
1622
- }
1623
- set paddingTopMobile(t) {
1624
- this.setAttribute("padding-top--mobile", t);
1625
- }
1626
- get paddingBottomMobile() {
1627
- return this.getAttribute("padding-bottom--mobile");
1628
- }
1629
- set paddingBottomMobile(t) {
1630
- this.setAttribute("padding-bottom--mobile", t);
1631
- }
1632
- get paddingBlockTablet() {
1633
- return this.getAttribute("padding-block--tablet");
1634
- }
1635
- set paddingBlockTablet(t) {
1636
- this.setAttribute("padding-block--tablet", t);
1637
- }
1638
- get paddingTopTablet() {
1639
- return this.getAttribute("padding-top--tablet");
1640
- }
1641
- set paddingTopTablet(t) {
1642
- this.setAttribute("padding-top--tablet", t);
1643
- }
1644
- get paddingBottomTablet() {
1645
- return this.getAttribute("padding-bottom--tablet");
1646
- }
1647
- set paddingBottomTablet(t) {
1648
- this.setAttribute("padding-bottom--tablet", t);
1649
- }
1650
- get paddingBlockLaptop() {
1651
- return this.getAttribute("padding-block--laptop");
1652
- }
1653
- set paddingBlockLaptop(t) {
1654
- this.setAttribute("padding-block--laptop", t);
1655
- }
1656
- get paddingTopLaptop() {
1657
- return this.getAttribute("padding-top--laptop");
1658
- }
1659
- set paddingTopLaptop(t) {
1660
- this.setAttribute("padding-top--laptop", t);
1661
- }
1662
- get paddingBottomLaptop() {
1663
- return this.getAttribute("padding-bottom--laptop");
1664
- }
1665
- set paddingBottomLaptop(t) {
1666
- this.setAttribute("padding-bottom--laptop", t);
1667
- }
1668
- get border() {
1669
- return this.getAttribute("border");
1670
- }
1671
- set border(t) {
1672
- this.setAttribute("border", t);
1673
- }
1674
- get borderSide() {
1675
- return this.getAttribute("border-side");
1676
- }
1677
- set borderSide(t) {
1678
- this.setAttribute("border-side", t);
1679
- }
1680
- get borderSideMobile() {
1681
- return this.getAttribute("border-side--mobile");
1682
- }
1683
- set borderSideMobile(t) {
1684
- this.setAttribute("border-side--mobile", t);
1685
- }
1686
- get borderSideTablet() {
1687
- return this.getAttribute("border-side--tablet");
1688
- }
1689
- set borderSideTablet(t) {
1690
- this.setAttribute("border-side--tablet", t);
1691
- }
1692
- get borderSideLaptop() {
1693
- return this.getAttribute("border-side--laptop");
1694
- }
1695
- set borderSideLaptop(t) {
1696
- this.setAttribute("border-side--laptop", t);
1697
- }
1698
- }
1699
- customElements.get("px-section") || customElements.define("px-section", re);
1700
- const ie = "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)}}", mt = new CSSStyleSheet(), ft = new CSSStyleSheet(), kt = new CSSStyleSheet();
1701
- mt.replaceSync(ie);
1702
- ft.replaceSync(F);
1703
- kt.replaceSync(ct);
1704
- const U = class U extends y {
1705
- constructor() {
1706
- super(ft, kt, mt), this.template = "<p><slot></slot></p>", this.shadowRoot.innerHTML = this.template;
1707
- }
1708
- static get observedAttributes() {
1709
- return [
1710
- ...super.observedAttributes,
1711
- "variant",
1712
- "color",
1713
- "font-size",
1714
- "font-weight",
1715
- "text-align",
1716
- "text-align--mobile",
1717
- "text-align--tablet",
1718
- "text-align--laptop",
1719
- "inverted",
1720
- "disabled"
1721
- ];
1722
- }
1723
- attributeChangedCallback(t, e, o) {
1724
- if (e !== o)
1725
- switch (t) {
1726
- case "variant":
1727
- this.updateVariant(t, e, o, et);
1728
- break;
1729
- case "color":
1730
- this.updateTypography(t, e, o, _);
1731
- break;
1732
- case "font-size":
1733
- this.updateTypography(t, e, o, it);
1734
- break;
1735
- case "font-weight":
1736
- this.updateTypography(t, e, o, rt);
1737
- break;
1738
- case "text-align":
1739
- case "text-align--mobile":
1740
- case "text-align--tablet":
1741
- case "text-align--laptop":
1742
- this.updateTypography(t, e, o, tt);
1743
- break;
1744
- case "disabled":
1745
- this.color = "state-disabled";
1746
- break;
1747
- default:
1748
- super.attributeChangedCallback(t, e, o);
1749
- break;
1750
- }
1751
- }
1752
- toggleClass(t, e) {
1753
- t !== null && t !== "" && t !== "default" && this.$el.classList.toggle(`style-${t}`), e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`style-${e}`);
1754
- }
1755
- updateVariant(t, e, o, r) {
1756
- this.checkName(r, o) ? this.toggleClass(e, o) : d(
1757
- `${o} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
1758
- );
1759
- }
1760
- updateTypography(t, e, o, r) {
1761
- if (!this.checkName(r, o))
1762
- d(
1763
- `${o} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
1764
- );
1765
- else {
1766
- const i = this.splitAttrNameFromBreakpoint(t), a = i.breakpoint;
1767
- e !== null && e !== "" && this.$el.classList.toggle(
1768
- `${i.attrName}-${e}${a}`
1769
- ), o !== null && o !== "" && this.$el.classList.toggle(
1770
- `${i.attrName}-${o}${a}`
1771
- );
1772
- }
1773
- }
1774
- splitAttrNameFromBreakpoint(t) {
1775
- let e = "";
1776
- if (["--mobile", "--tablet", "--laptop"].some(
1777
- (o) => t.includes(o)
1778
- )) {
1779
- const o = t.split("--");
1780
- t = o[0], e = `--${o[1]}`;
1781
- }
1782
- return { attrName: t, breakpoint: e };
1783
- }
1784
- get variant() {
1785
- return this.getAttribute("variant");
1786
- }
1787
- set variant(t) {
1788
- this.setAttribute("variant", t);
1789
- }
1790
- get color() {
1791
- return this.getAttribute("color");
1792
- }
1793
- set color(t) {
1794
- this.setAttribute("color", t);
1795
- }
1796
- get fontSize() {
1797
- return this.getAttribute("font-size");
1798
- }
1799
- set fontSize(t) {
1800
- this.setAttribute("font-size", t);
1801
- }
1802
- get fontWeight() {
1803
- return this.getAttribute("font-weight");
1804
- }
1805
- set fontWeight(t) {
1806
- this.setAttribute("font-weight", t);
1807
- }
1808
- get textAlign() {
1809
- return this.getAttribute("text-align");
1810
- }
1811
- set textAlign(t) {
1812
- this.setAttribute("text-align", t);
1813
- }
1814
- get textAlignMobile() {
1815
- return this.getAttribute("text-align--mobile");
1816
- }
1817
- set textAlignMobile(t) {
1818
- this.setAttribute("text-align--mobile", t);
1819
- }
1820
- get textAlignTablet() {
1821
- return this.getAttribute("text-align--tablet");
1822
- }
1823
- set textAlignTablet(t) {
1824
- this.setAttribute("text-align--tablet", t);
1825
- }
1826
- get textAlignLaptop() {
1827
- return this.getAttribute("text-align--laptop");
1828
- }
1829
- set textAlignLaptop(t) {
1830
- this.setAttribute("text-align--laptop", t);
1831
- }
1832
- get inverted() {
1833
- return this.getAttribute("inverted");
1834
- }
1835
- set inverted(t) {
1836
- this.setAttribute("inverted", t);
1837
- }
1838
- get disabled() {
1839
- return this.getAttribute("disabled");
1840
- }
1841
- set disabled(t) {
1842
- this.setAttribute("disabled", t);
1843
- }
622
+ customElements.get("px-h6") || customElements.define("px-h6", ye);
623
+ //#endregion
624
+ //#region ../../components/Separator/src/separator.css?inline
625
+ var P = ".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;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;margin:0}.separator-direction-horizontal--mobile{border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator-direction-vertical--mobile{width:var(--separator-size);border-width:0 var(--separator-size) 0 0;height:100%}:host([inverted]) .separator{border-color:var(--separator-color-inverted,var(--px-color-border-main-inverted))}@media screen and (width>=48rem){.separator-direction-horizontal--tablet{border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator-direction-vertical--tablet{width:var(--separator-size);border-width:0 var(--separator-size) 0 0;height:100%}}@media screen and (width>=64.0625rem){.separator-direction-horizontal--laptop{border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator-direction-vertical--laptop{width:var(--separator-size);border-width:0 var(--separator-size) 0 0;height:100%}}@media screen and (width>=90.0625rem){.separator-direction-horizontal--desktop{border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator-direction-vertical--desktop{width:var(--separator-size);border-width:0 var(--separator-size) 0 0;height:100%}}", F = new CSSStyleSheet();
626
+ F.replaceSync(P);
627
+ var be = [
628
+ "",
629
+ "default",
630
+ "horizontal",
631
+ "vertical"
632
+ ], xe = [
633
+ "",
634
+ "default",
635
+ "none",
636
+ "s",
637
+ "m",
638
+ "l"
639
+ ], Se = [
640
+ "",
641
+ "main",
642
+ "brand",
643
+ "none",
644
+ "neutral",
645
+ "purpose-success",
646
+ "purpose-warning",
647
+ "purpose-error",
648
+ "purpose-unlimited",
649
+ "state-hover",
650
+ "state-active"
651
+ ], Ce = class t extends e {
652
+ static {
653
+ this.nativeName = "hr";
654
+ }
655
+ constructor() {
656
+ super(F);
657
+ let e = document.createElement(t.nativeName);
658
+ e.classList.add("separator"), this.internals = this.attachInternals?.(), this.shadowRoot.appendChild(e);
659
+ }
660
+ static get observedAttributes() {
661
+ return [
662
+ ...super.observedAttributes,
663
+ "direction",
664
+ "direction--mobile",
665
+ "direction--tablet",
666
+ "direction--laptop",
667
+ "direction--desktop",
668
+ "size",
669
+ "color",
670
+ "inverted"
671
+ ];
672
+ }
673
+ attributeChangedCallback(e, t, n) {
674
+ if (t !== n) switch (e) {
675
+ case "direction":
676
+ case "direction--mobile":
677
+ case "direction--tablet":
678
+ case "direction--laptop":
679
+ case "direction--desktop":
680
+ this.updateDirection(e, t, n, be);
681
+ break;
682
+ case "size":
683
+ this.updateSize(e, t, n, xe);
684
+ break;
685
+ case "color":
686
+ this.updateColor(e, t, n, Se);
687
+ break;
688
+ default: super.attributeChangedCallback(e, t, n);
689
+ }
690
+ }
691
+ updateSize(e, t, n, r) {
692
+ let i = (e) => {
693
+ e !== null && e !== "" && e !== "default" && this.$el.style.setProperty("--separator-size", `var(--px-size-border-${e})`);
694
+ };
695
+ this.checkName(r, n) ? (i(t), i(n)) : m(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join("\", \"")}".`);
696
+ }
697
+ updateColor(e, t, n, r) {
698
+ let i = (e) => {
699
+ e !== null && e !== "" && e !== "default" && (this.$el.style.setProperty("--separator-color-default", `var(--px-color-border-${e}-default)`), this.$el.style.setProperty("--separator-color-inverted", `var(--px-color-border-${e}-inverted)`));
700
+ };
701
+ this.checkName(r, n) ? (i(t), i(n)) : m(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join("\", \"")}".`);
702
+ }
703
+ updateDirection(e, t, n, r) {
704
+ let i = (e, t) => {
705
+ t !== null && t !== "" && t !== "default" && this.$el.classList.add(`separator-direction-${t}--${e}`);
706
+ };
707
+ if (!this.checkName(r, n)) m(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join("\", \"")}".`);
708
+ else if (e === "direction") [
709
+ "mobile",
710
+ "tablet",
711
+ "laptop",
712
+ "desktop"
713
+ ].forEach((e) => {
714
+ Array.from(this.$el.classList).find((t) => t.startsWith("separator-direction-") && t.endsWith(`--${e}`)) || i(e, n);
715
+ });
716
+ else {
717
+ let t = e.split("--")[1], r = Array.from(this.$el.classList).find((e) => e.startsWith("separator-direction-") && e.endsWith(`--${t}`));
718
+ r ? this.$el.classList.replace(r, `separator-direction-${n}--${t}`) : i(t, n);
719
+ }
720
+ }
721
+ get direction() {
722
+ return this.getAttribute("direction");
723
+ }
724
+ set direction(e) {
725
+ this._updateAttribute("direction", e);
726
+ }
727
+ get directionMobile() {
728
+ return this.getAttribute("direction--mobile");
729
+ }
730
+ set directionMobile(e) {
731
+ this._updateAttribute("direction--mobile", e);
732
+ }
733
+ get directionTablet() {
734
+ return this.getAttribute("direction--tablet");
735
+ }
736
+ set directionTablet(e) {
737
+ this._updateAttribute("direction--tablet", e);
738
+ }
739
+ get directionLaptop() {
740
+ return this.getAttribute("direction--laptop");
741
+ }
742
+ set directionLaptop(e) {
743
+ this._updateAttribute("direction--laptop", e);
744
+ }
745
+ get directionDesktop() {
746
+ return this.getAttribute("direction--desktop");
747
+ }
748
+ set directionDesktop(e) {
749
+ this._updateAttribute("direction--desktop", e);
750
+ }
751
+ get size() {
752
+ return this.getAttribute("size");
753
+ }
754
+ set size(e) {
755
+ this._updateAttribute("size", e);
756
+ }
757
+ get color() {
758
+ return this.getAttribute("color");
759
+ }
760
+ set color(e) {
761
+ this._updateAttribute("color", e);
762
+ }
763
+ get inverted() {
764
+ return this.hasAttribute("inverted");
765
+ }
766
+ set inverted(e) {
767
+ this._updateBooleanAttribute("inverted", e);
768
+ }
1844
769
  };
1845
- U.nativeName = "p";
1846
- let q = U;
1847
- customElements.get("px-p") || customElements.define("px-p", q);
1848
- class ae extends HTMLElement {
1849
- constructor() {
1850
- super(), this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = `
1851
- <button aria-hidden="true" style="width: 0; height: 0; border: 0; background-color: #00000000;"></button>
1852
- `;
1853
- }
1854
- connectedCallback() {
1855
- this.shadowRoot.firstElementChild.addEventListener("focus", () => {
1856
- this.dispatchEvent(
1857
- new CustomEvent("close-panel", { bubbles: !0, composed: !0 })
1858
- );
1859
- });
1860
- }
1861
- }
1862
- customElements.get("px-mdd-closer") || customElements.define("px-mdd-closer", ae);
1863
- const se = ":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)}}", yt = new CSSStyleSheet();
1864
- yt.replaceSync(se);
1865
- var m, p, D, At, z, zt;
1866
- class ne extends HTMLElement {
1867
- constructor() {
1868
- var e;
1869
- super();
1870
- v(this, p);
1871
- v(this, m);
1872
- this.template = `<dialog>
770
+ customElements.get("px-separator") || customElements.define("px-separator", Ce);
771
+ //#endregion
772
+ //#region ../../components/Section/src/section.css?inline
773
+ var we = ":host{display:block}:host,:host *{box-sizing:border-box}.content-wrapper{margin-inline:var(--px-padding-s-mobile);max-width:var(--px-content-wrapper-max-width-desktop)}@media screen and (width>=77rem){.content-wrapper{margin-inline:auto}}.overlapped{margin-bottom:calc(var(--px-overlapped-mobile) * -1)}::slotted([slot=overlap]){margin-top:var(--px-overlapped-mobile)}@media screen and (width>=48rem){.overlapped{margin-bottom:calc(var(--px-overlapped-desktop) * -1)}::slotted([slot=overlap]){margin-top:var(--px-overlapped-desktop)}}@media screen and (width>=64.0625rem){.overlapped{margin-bottom:calc(var(--px-overlapped-desktop) * -1)}::slotted([slot=overlap]){margin-top:var(--px-overlapped-desktop)}}", Te = ":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-left-style:none;border-right-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-left-style:none;border-right-style:none}.border-side-left{border-top-style:none;border-bottom-style:none;border-right-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-position:50%;background-size:cover}.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]){z-index:3;transform:translateY(-50%)}::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]){text-align:center;z-index:2;left:0;right:0;transform:translateY(-100%)}::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{grid-template-rows:subgrid;grid-row:span var(--subgrid-rows);display:grid}:host([subgrid-rows]):host([grow]) .container{flex-grow:var(--grow-value)}:host([subgrid-rows]):host([shrink]) .container{flex-shrink:var(--shrink-value)}:host([subgrid-rows]):host([basis]) .container{flex-basis:var(--basis-value)}:host([subgrid-rows]):host([align-self]) .container{align-self:var(--align-self-value)}:host([subgrid-rows]):host([col-span]) .container{grid-column:span var(--col-span-value) / span var(--col-span-value)}:host([subgrid-rows]):host([justify-self]) .container{justify-self:var(--justify-self-value)}:host([subgrid-rows]):host([order]) .container{order:var(--order-value)}:host([subgrid-rows]):host([anchor-spacing]) .container{margin-top:var(--container-anchor-spacing--mobile)}@media screen and (width<=47.938rem){.container{background-color:var(--background-color--mobile,var(--background-color))}:host([background-image--mobile]) .container{background-image:var(--background-image--mobile,var(--background-image))}:host([background-gradient--mobile]) .container{background-image:var(--background-gradient--mobile,var(--background-gradient))}:host([inverted]) .container{background-color:var(--background-color-inverted--mobile,var(--background-color-inverted))}.border-side-top--mobile{border-style:solid none none}.border-side-right--mobile{border-style:none solid none none}.border-side-bottom--mobile{border-style:none none solid}.border-side-left--mobile{border-style:none none none solid}.border-side-block--mobile{border-block-style:solid;border-inline-style:none}.border-side-inline--mobile{border-block-style:none;border-inline-style:solid}.no-border-radius-top--mobile{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--mobile{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--mobile{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--mobile{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--mobile{border-radius:var(--px-radius-none)}:host([subgrid-rows]):host([grow--mobile]) .container{flex-grow:var(--grow--mobile-value)}:host([subgrid-rows]):host([shrink--mobile]) .container{flex-shrink:var(--shrink--mobile-value)}:host([subgrid-rows]):host([basis--mobile]) .container{flex-basis:var(--basis--mobile-value)}:host([subgrid-rows]):host([align-self--mobile]) .container{align-self:var(--align-self--mobile-value)}:host([subgrid-rows]):host([col-span--mobile]) .container{grid-column:span var(--col-span--mobile-value) / span var(--col-span--mobile-value)}:host([subgrid-rows]):host([justify-self--mobile]) .container{justify-self:var(--justify-self--mobile-value)}:host([subgrid-rows]):host([order--mobile]) .container{order:var(--order--mobile-value)}}@media screen and (width>=48rem) and (width<=64rem){.container{background-color:var(--background-color--tablet,var(--background-color))}:host([background-image--tablet]) .container{background-image:var(--background-image--tablet,var(--background-image))}:host([background-gradient--tablet]) .container{background-image:var(--background-gradient--tablet,var(--background-gradient))}:host([inverted]) .container{background-color:var(--background-color-inverted--tablet,var(--background-color-inverted))}.no-border-radius-top--tablet{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--tablet{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--tablet{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--tablet{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--tablet{border-radius:var(--px-radius-none)}.border-side-top--tablet{border-style:solid none none}.border-side-right--tablet{border-style:none solid none none}.border-side-bottom--tablet{border-style:none none solid}.border-side-left--tablet{border-style:none none none solid}.border-side-block--tablet{border-block-style:solid;border-inline-style:none}.border-side-inline--tablet{border-block-style:none;border-inline-style:solid}::slotted([slot=anchor-right]){right:var(--container-anchor-offset--tablet,var(--container-padding-right,var(--container-padding-inline,var(--container-padding))))}::slotted([slot=anchor-left]){left:var(--container-anchor-offset--tablet,var(--container-padding-left,var(--container-padding-inline,var(--container-padding))))}:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--tablet)}:host([subgrid-rows]):host([col-span--tablet]) .container{grid-column:span var(--col-span--tablet-value) / span var(--col-span--tablet-value)}:host([subgrid-rows]):host([grow--tablet]) .container{flex-grow:var(--grow--tablet-value)}:host([subgrid-rows]):host([shrink--tablet]) .container{flex-shrink:var(--shrink--tablet-value)}:host([subgrid-rows]):host([basis--tablet]) .container{flex-basis:var(--basis--tablet-value)}:host([subgrid-rows]):host([align-self--tablet]) .container{align-self:var(--align-self--tablet-value)}:host([subgrid-rows]):host([justify-self--tablet]) .container{justify-self:var(--justify-self--tablet-value)}:host([subgrid-rows]):host([order--tablet]) .container{order:var(--order--tablet-value)}:host([subgrid-rows]):host([anchor-spacing]) .container{margin-top:var(--container-anchor-spacing--tablet)}}@media screen and (width>=64.0625rem) and (width<=90rem){:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--laptop)}:host([subgrid-rows]):host([col-span--laptop]) .container{grid-column:span var(--col-span--laptop-value) / span var(--col-span--laptop-value)}:host([subgrid-rows]):host([grow--laptop]) .container{flex-grow:var(--grow--laptop-value)}:host([subgrid-rows]):host([shrink--laptop]) .container{flex-shrink:var(--shrink--laptop-value)}:host([subgrid-rows]):host([basis--laptop]) .container{flex-basis:var(--basis--laptop-value)}:host([subgrid-rows]):host([align-self--laptop]) .container{align-self:var(--align-self--laptop-value)}:host([subgrid-rows]):host([justify-self--laptop]) .container{justify-self:var(--justify-self--laptop-value)}:host([subgrid-rows]):host([order--laptop]) .container{order:var(--order--laptop-value)}:host([subgrid-rows]):host([anchor-spacing]) .container{margin-top:var(--container-anchor-spacing--laptop)}}@media screen and (width>=64.0625rem){.container{background-color:var(--background-color--laptop,var(--background-color))}:host([background-image--laptop]) .container{background-image:var(--background-image--laptop,var(--background-image))}:host([background-gradient--laptop]) .container{background-image:var(--background-gradient--laptop,var(--background-gradient))}:host([inverted]) .container{background-color:var(--background-color-inverted--laptop,var(--background-color-inverted))}.no-border-radius-top--laptop{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--laptop{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--laptop{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--laptop{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--laptop{border-radius:var(--px-radius-none)}::slotted([slot=anchor-right]){right:var(--container-anchor-offset--laptop,var(--container-padding-right,var(--container-padding-inline,var(--container-padding))))}::slotted([slot=anchor-left]){left:var(--container-anchor-offset--laptop,var(--container-padding-left,var(--container-padding-inline,var(--container-padding))))}:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--laptop)}.border-side-top--laptop{border-style:solid none none}.border-side-right--laptop{border-style:none solid none none}.border-side-bottom--laptop{border-style:none none solid}.border-side-left--laptop{border-style:none none none solid}.border-side-block--laptop{border-block-style:solid;border-inline-style:none}.border-side-inline--laptop{border-block-style:none;border-inline-style:solid}}@media screen and (width>=90.0625rem){:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--desktop)}:host([subgrid-rows]):host([col-span--desktop]) .container{grid-column:span var(--col-span--desktop-value) / span var(--col-span--desktop-value)}:host([subgrid-rows]):host([grow--desktop]) .container{flex-grow:var(--grow--desktop-value)}:host([subgrid-rows]):host([shrink--desktop]) .container{flex-shrink:var(--shrink--desktop-value)}:host([subgrid-rows]):host([basis--desktop]) .container{flex-basis:var(--basis--desktop-value)}:host([subgrid-rows]):host([align-self--desktop]) .container{align-self:var(--align-self--desktop-value)}:host([subgrid-rows]):host([justify-self--desktop]) .container{justify-self:var(--justify-self--desktop-value)}:host([subgrid-rows]):host([order--desktop]) .container{order:var(--order--desktop-value)}:host([subgrid-rows]):host([anchor-spacing]) .container{margin-top:var(--container-anchor-spacing--desktop)}}", I = new CSSStyleSheet();
774
+ I.replaceSync(Te);
775
+ var Ee = [
776
+ "top-patch",
777
+ "top-neighbor-patch",
778
+ "top-ribbon",
779
+ "top-neighbor-ribbon",
780
+ "top-patch-and-neighbor-ribbon"
781
+ ], De = [
782
+ "1",
783
+ "2",
784
+ "3",
785
+ "4",
786
+ "5",
787
+ "6",
788
+ "7",
789
+ "8",
790
+ "9",
791
+ "10",
792
+ "11",
793
+ "12"
794
+ ], L = (e, t, n) => `:host([${e}${n ? `--${n}` : ""}='${t}']) .container`, R = "px-padding", Oe = [
795
+ l("padding", L, h, R, "--container-padding"),
796
+ l("padding-inline", L, h, R),
797
+ l("padding-block", L, h, R),
798
+ l("padding-top", L, h, R),
799
+ l("padding-right", L, h, R, "--container-padding-right"),
800
+ l("padding-bottom", L, h, R),
801
+ l("padding-left", L, h, R, "--container-padding-left"),
802
+ l("gap", L, ie, "px-spacing", void 0, "subgrid-gap")
803
+ ], ke = class extends t {
804
+ static {
805
+ this.nativeName = "div";
806
+ }
807
+ constructor() {
808
+ super(I, ...Oe), this.template = () => "<div class=\"container\">\n <slot></slot>\n <slot name=\"anchor-left\"></slot>\n <slot name=\"anchor-right\"></slot>\n <slot name=\"anchor-full\"></slot>\n </div>", this._bgObserver = null, this._isInViewport = !1, this.contentObserver = null, this.shadowRoot.innerHTML = this.template();
809
+ }
810
+ static get observedAttributes() {
811
+ return [
812
+ ...super.observedAttributes,
813
+ "border",
814
+ "border-color",
815
+ "border-side",
816
+ "border-side--mobile",
817
+ "border-side--tablet",
818
+ "border-side--laptop",
819
+ "border-radius",
820
+ "no-border-radius",
821
+ "no-border-radius--mobile",
822
+ "no-border-radius--tablet",
823
+ "no-border-radius--laptop",
824
+ "background-color",
825
+ "background-color--mobile",
826
+ "background-color--tablet",
827
+ "background-color--laptop",
828
+ "background-gradient",
829
+ "background-gradient--mobile",
830
+ "background-gradient--tablet",
831
+ "background-gradient--laptop",
832
+ "background-image",
833
+ "background-image--mobile",
834
+ "background-image--tablet",
835
+ "background-image--laptop",
836
+ "background-size",
837
+ "background-position",
838
+ "box-shadow",
839
+ "anchor-offset",
840
+ "anchor-spacing",
841
+ "inverted",
842
+ "subgrid-rows"
843
+ ];
844
+ }
845
+ connectedCallback() {
846
+ this.padding ||= "m", this.backgroundColor ||= "surface-light", this.borderColor ||= "main", this.$slotAnchor && this.addAnchorClass(), this.contentObserver = new MutationObserver(() => {
847
+ this.$slotAnchor && this.addAnchorClass();
848
+ }), this.contentObserver.observe(this, {
849
+ childList: !0,
850
+ subtree: !0,
851
+ characterData: !0
852
+ }), this._bgObserver = new IntersectionObserver((e) => {
853
+ e.forEach((e) => {
854
+ e.isIntersecting && (this._isInViewport = !0, this._loadBackgroundImages(), this._bgObserver?.disconnect());
855
+ });
856
+ }), this._bgObserver.observe(this.$el);
857
+ }
858
+ disconnectedCallback() {
859
+ this._bgObserver?.disconnect(), this.contentObserver?.disconnect();
860
+ }
861
+ attributeChangedCallback(e, t, n) {
862
+ if (t !== n) switch (e) {
863
+ case "border":
864
+ this.updateAttribute(e, t, n, ne);
865
+ break;
866
+ case "border-color":
867
+ this.updateBorderColor(e, n);
868
+ break;
869
+ case "border-side":
870
+ case "border-side--mobile":
871
+ case "border-side--tablet":
872
+ case "border-side--laptop":
873
+ this.updateAttribute(e, t, n, te);
874
+ break;
875
+ case "border-radius":
876
+ this.updateAttribute(e, t, n, ee);
877
+ break;
878
+ case "no-border-radius":
879
+ case "no-border-radius--mobile":
880
+ case "no-border-radius--tablet":
881
+ case "no-border-radius--laptop":
882
+ this.updateNoBorderRadius(e, t, n, oe);
883
+ break;
884
+ case "background-color":
885
+ case "background-color--mobile":
886
+ case "background-color--tablet":
887
+ case "background-color--laptop":
888
+ this.updateBackgroundColor(e, n);
889
+ break;
890
+ case "background-gradient":
891
+ case "background-gradient--mobile":
892
+ case "background-gradient--tablet":
893
+ case "background-gradient--laptop":
894
+ this.updateGradient(e, n);
895
+ break;
896
+ case "background-size":
897
+ this.updateAttribute(e, t, n, i);
898
+ break;
899
+ case "background-image":
900
+ case "background-image--mobile":
901
+ case "background-image--tablet":
902
+ case "background-image--laptop":
903
+ this._isInViewport && this.updateBackgroundImg(e, n);
904
+ break;
905
+ case "background-position":
906
+ n !== null && n !== "" && (this.$el.style.backgroundPosition = n);
907
+ break;
908
+ case "box-shadow":
909
+ this.updateAttribute(e, t, n, re);
910
+ break;
911
+ case "anchor-offset":
912
+ this.updateAnchorOffset(t, n, h);
913
+ break;
914
+ case "anchor-spacing":
915
+ this.updateAnchorSpacing(t, n, Ee);
916
+ break;
917
+ case "subgrid-rows":
918
+ this.updateSubgridRows(e, t, n, De);
919
+ break;
920
+ default: super.attributeChangedCallback(e, t, n);
921
+ }
922
+ }
923
+ _loadBackgroundImages() {
924
+ [
925
+ "background-image",
926
+ "background-image--mobile",
927
+ "background-image--tablet",
928
+ "background-image--laptop"
929
+ ].forEach((e) => {
930
+ let t = this.getAttribute(e);
931
+ t && this.updateBackgroundImg(e, t);
932
+ });
933
+ }
934
+ updateBackgroundImg(e, t) {
935
+ this.$el.style.setProperty(`--${e}`, `url("${t}")`);
936
+ }
937
+ updateGradient(e, t) {
938
+ if (this.checkName(f, t)) {
939
+ let n = this.splitAttrNameFromBreakpoint(e);
940
+ e = n.attrName;
941
+ let r = n.breakpoint;
942
+ this.$el.style.setProperty(`--${e}${r}`, `linear-gradient(var(--px-color-background-gradient-${t}))`);
943
+ } else m(`"${t}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${f.join("\", \"")}".`);
944
+ }
945
+ updateBackgroundColor(e, t) {
946
+ let n = t.startsWith("surface-");
947
+ if (this.checkName(r, t)) {
948
+ let r = this.splitAttrNameFromBreakpoint(e), i = r.breakpoint;
949
+ this.$el.style.setProperty(`--${r.attrName}${i}`, `var(--px-color-background-${t}${n ? "" : "-default"})`), this.$el.style.setProperty(`--${r.attrName}-inverted${i}`, `var(--px-color-background-${t}${n ? "" : "-inverted"})`);
950
+ } else m(`"${t}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join("\", \"")}".`);
951
+ }
952
+ updateBorderColor(e, t) {
953
+ this.checkName(o, t) ? (this.$el.style.setProperty(`--${e}`, `var(--px-color-border-${t}-default)`), this.$el.style.setProperty(`--${e}-inverted`, `var(--px-color-border-${t}-inverted)`)) : m(`"${t}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${o.join("\", \"")}".`);
954
+ }
955
+ updateNoBorderRadius(e, t, n, r) {
956
+ if (!this.checkName(r, n)) m(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join("\", \"")}".`);
957
+ else {
958
+ let r = this.splitAttrNameFromBreakpoint(e), i = r.breakpoint;
959
+ t !== null && t !== "" && this.$el.classList.toggle(`${r.attrName}-${t}${i}`), n !== null && n !== "" && this.$el.classList.toggle(`${r.attrName}-${n}${i}`);
960
+ }
961
+ }
962
+ updateAttribute(e, t, n, r) {
963
+ if (!this.checkName(r, n)) m(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join("\", \"")}".`);
964
+ else {
965
+ let r = this.splitAttrNameFromBreakpoint(e), i = r.breakpoint;
966
+ t !== null && t !== "" && this.$el.classList.toggle(`${r.attrName}-${t}${i}`), n !== null && n !== "" && this.$el.classList.toggle(`${r.attrName}-${n}${i}`);
967
+ }
968
+ }
969
+ splitAttrNameFromBreakpoint(e) {
970
+ let t = "";
971
+ if ([
972
+ "--mobile",
973
+ "--tablet",
974
+ "--laptop"
975
+ ].some((t) => e.includes(t))) {
976
+ let n = e.split("--");
977
+ e = n[0], t = `--${n[1]}`;
978
+ }
979
+ return {
980
+ attrName: e,
981
+ breakpoint: t
982
+ };
983
+ }
984
+ updateAnchorOffset(e, t, n) {
985
+ if (!s(n, t)) {
986
+ m(`"${t}" is not a valid anchor-offset value for ${this.tagName.toLowerCase()}. Allowed values are: "${n.join("\", \"")}".`);
987
+ return;
988
+ }
989
+ let r = (e) => {
990
+ e !== null && e !== "" && e !== "default" && (this.$el.style.setProperty("--container-anchor-offset--mobile", `var(--px-padding-${e}-mobile)`), this.$el.style.setProperty("--container-anchor-offset--tablet", `var(--px-padding-${e}-tablet)`), this.$el.style.setProperty("--container-anchor-offset--laptop", `var(--px-padding-${e}-laptop)`));
991
+ };
992
+ r(e), r(t);
993
+ }
994
+ addAnchorClass() {
995
+ this.$el.classList.contains("anchored") || this.$el.classList.add("anchored");
996
+ }
997
+ updateAnchorSpacing(e, t, n) {
998
+ if (!s(n, t)) {
999
+ m(`"${t}" is not a valid anchor-spacing value for ${this.tagName.toLowerCase()}. Allowed values are: "${n.join("\", \"")}".`);
1000
+ return;
1001
+ }
1002
+ let r = (e) => {
1003
+ e !== null && e !== "" && e !== "default" && (this.style.setProperty("--container-anchor-spacing--mobile", `var(--px-spacing-${e}-mobile)`), this.style.setProperty("--container-anchor-spacing--tablet", `var(--px-spacing-${e}-tablet)`), this.style.setProperty("--container-anchor-spacing--laptop", `var(--px-spacing-${e}-laptop)`), this.style.setProperty("--container-anchor-spacing--desktop", `var(--px-spacing-${e}-desktop)`));
1004
+ };
1005
+ r(e), r(t);
1006
+ }
1007
+ updateSubgridRows(e, t, n, r) {
1008
+ s(r, n) ? this.style.setProperty(`--${e}`, n) : m(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join("\", \"")}".`);
1009
+ }
1010
+ get $el() {
1011
+ return this?.shadowRoot?.querySelector(".container");
1012
+ }
1013
+ get $slotAnchor() {
1014
+ return this.querySelector("[slot^=\"anchor\"]");
1015
+ }
1016
+ get padding() {
1017
+ return this.getAttribute("padding");
1018
+ }
1019
+ set padding(e) {
1020
+ g(this, "padding", e);
1021
+ }
1022
+ get paddingBlock() {
1023
+ return this.getAttribute("padding-block");
1024
+ }
1025
+ set paddingBlock(e) {
1026
+ g(this, "padding-block", e);
1027
+ }
1028
+ get paddingInline() {
1029
+ return this.getAttribute("padding-inline");
1030
+ }
1031
+ set paddingInline(e) {
1032
+ g(this, "padding-inline", e);
1033
+ }
1034
+ get paddingTop() {
1035
+ return this.getAttribute("padding-top");
1036
+ }
1037
+ set paddingTop(e) {
1038
+ g(this, "padding-top", e);
1039
+ }
1040
+ get paddingRight() {
1041
+ return this.getAttribute("padding-right");
1042
+ }
1043
+ set paddingRight(e) {
1044
+ g(this, "padding-right", e);
1045
+ }
1046
+ get paddingBottom() {
1047
+ return this.getAttribute("padding-bottom");
1048
+ }
1049
+ set paddingBottom(e) {
1050
+ g(this, "padding-bottom", e);
1051
+ }
1052
+ get paddingLeft() {
1053
+ return this.getAttribute("padding-left");
1054
+ }
1055
+ set paddingLeft(e) {
1056
+ g(this, "padding-left", e);
1057
+ }
1058
+ get paddingMobile() {
1059
+ return this.getAttribute("padding--mobile");
1060
+ }
1061
+ set paddingMobile(e) {
1062
+ g(this, "padding--mobile", e);
1063
+ }
1064
+ get paddingBlockMobile() {
1065
+ return this.getAttribute("padding-block--mobile");
1066
+ }
1067
+ set paddingBlockMobile(e) {
1068
+ g(this, "padding-block--mobile", e);
1069
+ }
1070
+ get paddingInlineMobile() {
1071
+ return this.getAttribute("padding-inline--mobile");
1072
+ }
1073
+ set paddingInlineMobile(e) {
1074
+ g(this, "padding-inline--mobile", e);
1075
+ }
1076
+ get paddingTopMobile() {
1077
+ return this.getAttribute("padding-top--mobile");
1078
+ }
1079
+ set paddingTopMobile(e) {
1080
+ g(this, "padding-top--mobile", e);
1081
+ }
1082
+ get paddingRightMobile() {
1083
+ return this.getAttribute("padding-right--mobile");
1084
+ }
1085
+ set paddingRightMobile(e) {
1086
+ g(this, "padding-right--mobile", e);
1087
+ }
1088
+ get paddingBottomMobile() {
1089
+ return this.getAttribute("padding-bottom--mobile");
1090
+ }
1091
+ set paddingBottomMobile(e) {
1092
+ g(this, "padding-bottom--mobile", e);
1093
+ }
1094
+ get paddingLeftMobile() {
1095
+ return this.getAttribute("padding-left--mobile");
1096
+ }
1097
+ set paddingLeftMobile(e) {
1098
+ g(this, "padding-left--mobile", e);
1099
+ }
1100
+ get paddingTablet() {
1101
+ return this.getAttribute("padding--tablet");
1102
+ }
1103
+ set paddingTablet(e) {
1104
+ g(this, "padding--tablet", e);
1105
+ }
1106
+ get paddingBlockTablet() {
1107
+ return this.getAttribute("padding-block--tablet");
1108
+ }
1109
+ set paddingBlockTablet(e) {
1110
+ g(this, "padding-block--tablet", e);
1111
+ }
1112
+ get paddingInlineTablet() {
1113
+ return this.getAttribute("padding-inline--tablet");
1114
+ }
1115
+ set paddingInlineTablet(e) {
1116
+ g(this, "padding-inline--tablet", e);
1117
+ }
1118
+ get paddingTopTablet() {
1119
+ return this.getAttribute("padding-top--tablet");
1120
+ }
1121
+ set paddingTopTablet(e) {
1122
+ g(this, "padding-top--tablet", e);
1123
+ }
1124
+ get paddingRightTablet() {
1125
+ return this.getAttribute("padding-right--tablet");
1126
+ }
1127
+ set paddingRightTablet(e) {
1128
+ g(this, "padding-right--tablet", e);
1129
+ }
1130
+ get paddingBottomTablet() {
1131
+ return this.getAttribute("padding-bottom--tablet");
1132
+ }
1133
+ set paddingBottomTablet(e) {
1134
+ g(this, "padding-bottom--tablet", e);
1135
+ }
1136
+ get paddingLeftTablet() {
1137
+ return this.getAttribute("padding-left--tablet");
1138
+ }
1139
+ set paddingLeftTablet(e) {
1140
+ g(this, "padding-left--tablet", e);
1141
+ }
1142
+ get paddingLaptop() {
1143
+ return this.getAttribute("padding--laptop");
1144
+ }
1145
+ set paddingLaptop(e) {
1146
+ g(this, "padding--laptop", e);
1147
+ }
1148
+ get paddingBlockLaptop() {
1149
+ return this.getAttribute("padding-block--laptop");
1150
+ }
1151
+ set paddingBlockLaptop(e) {
1152
+ g(this, "padding-block--laptop", e);
1153
+ }
1154
+ get paddingInlineLaptop() {
1155
+ return this.getAttribute("padding-inline--laptop");
1156
+ }
1157
+ set paddingInlineLaptop(e) {
1158
+ g(this, "padding-inline--laptop", e);
1159
+ }
1160
+ get paddingTopLaptop() {
1161
+ return this.getAttribute("padding-top--laptop");
1162
+ }
1163
+ set paddingTopLaptop(e) {
1164
+ g(this, "padding-top--laptop", e);
1165
+ }
1166
+ get paddingRightLaptop() {
1167
+ return this.getAttribute("padding-right--laptop");
1168
+ }
1169
+ set paddingRightLaptop(e) {
1170
+ g(this, "padding-right--laptop", e);
1171
+ }
1172
+ get paddingBottomLaptop() {
1173
+ return this.getAttribute("padding-bottom--laptop");
1174
+ }
1175
+ set paddingBottomLaptop(e) {
1176
+ g(this, "padding-bottom--laptop", e);
1177
+ }
1178
+ get paddingLeftLaptop() {
1179
+ return this.getAttribute("padding-left--laptop");
1180
+ }
1181
+ set paddingLeftLaptop(e) {
1182
+ g(this, "padding-left--laptop", e);
1183
+ }
1184
+ get border() {
1185
+ return this.getAttribute("border");
1186
+ }
1187
+ set border(e) {
1188
+ g(this, "border", e);
1189
+ }
1190
+ get borderColor() {
1191
+ return this.getAttribute("border-color");
1192
+ }
1193
+ set borderColor(e) {
1194
+ g(this, "border-color", e);
1195
+ }
1196
+ get borderSide() {
1197
+ return this.getAttribute("border-side");
1198
+ }
1199
+ set borderSide(e) {
1200
+ g(this, "border-side", e);
1201
+ }
1202
+ get borderSideMobile() {
1203
+ return this.getAttribute("border-side--mobile");
1204
+ }
1205
+ set borderSideMobile(e) {
1206
+ g(this, "border-side--mobile", e);
1207
+ }
1208
+ get borderSideTablet() {
1209
+ return this.getAttribute("border-side--tablet");
1210
+ }
1211
+ set borderSideTablet(e) {
1212
+ g(this, "border-side--tablet", e);
1213
+ }
1214
+ get borderSideLaptop() {
1215
+ return this.getAttribute("border-side--laptop");
1216
+ }
1217
+ set borderSideLaptop(e) {
1218
+ g(this, "border-side--laptop", e);
1219
+ }
1220
+ get borderRadius() {
1221
+ return this.getAttribute("border-radius");
1222
+ }
1223
+ set borderRadius(e) {
1224
+ g(this, "border-radius", e);
1225
+ }
1226
+ get noBorderRadius() {
1227
+ return this.getAttribute("no-border-radius");
1228
+ }
1229
+ set noBorderRadius(e) {
1230
+ g(this, "no-border-radius", e);
1231
+ }
1232
+ get noBorderRadiusMobile() {
1233
+ return this.getAttribute("no-border-radius--mobile");
1234
+ }
1235
+ set noBorderRadiusMobile(e) {
1236
+ g(this, "no-border-radius--mobile", e);
1237
+ }
1238
+ get noBorderRadiusTablet() {
1239
+ return this.getAttribute("no-border-radius--tablet");
1240
+ }
1241
+ set noBorderRadiusTablet(e) {
1242
+ g(this, "no-border-radius--tablet", e);
1243
+ }
1244
+ get noBorderRadiusLaptop() {
1245
+ return this.getAttribute("no-border-radius--laptop");
1246
+ }
1247
+ set noBorderRadiusLaptop(e) {
1248
+ g(this, "no-border-radius--laptop", e);
1249
+ }
1250
+ get backgroundColor() {
1251
+ return this.getAttribute("background-color");
1252
+ }
1253
+ set backgroundColor(e) {
1254
+ g(this, "background-color", e);
1255
+ }
1256
+ get backgroundColorMobile() {
1257
+ return this.getAttribute("background-color--mobile");
1258
+ }
1259
+ set backgroundColorMobile(e) {
1260
+ g(this, "background-color--mobile", e);
1261
+ }
1262
+ get backgroundColorTablet() {
1263
+ return this.getAttribute("background-color--tablet");
1264
+ }
1265
+ set backgroundColorTablet(e) {
1266
+ g(this, "background-color--tablet", e);
1267
+ }
1268
+ get backgroundColorLaptop() {
1269
+ return this.getAttribute("background-color--laptop");
1270
+ }
1271
+ set backgroundColorLaptop(e) {
1272
+ g(this, "background-color--laptop", e);
1273
+ }
1274
+ get gradient() {
1275
+ return this.getAttribute("background-gradient");
1276
+ }
1277
+ set gradient(e) {
1278
+ g(this, "background-gradient", e);
1279
+ }
1280
+ get gradientMobile() {
1281
+ return this.getAttribute("background-gradient--mobile");
1282
+ }
1283
+ set gradientMobile(e) {
1284
+ g(this, "background-gradient--mobile", e);
1285
+ }
1286
+ get gradientTablet() {
1287
+ return this.getAttribute("background-gradient--tablet");
1288
+ }
1289
+ set gradientTablet(e) {
1290
+ g(this, "background-gradient--tablet", e);
1291
+ }
1292
+ get gradientLaptop() {
1293
+ return this.getAttribute("background-gradient--laptop");
1294
+ }
1295
+ set gradientLaptop(e) {
1296
+ g(this, "background-gradient--laptop", e);
1297
+ }
1298
+ get backgroundImage() {
1299
+ return this.getAttribute("background-image");
1300
+ }
1301
+ set backgroundImage(e) {
1302
+ g(this, "background-image", e);
1303
+ }
1304
+ get backgroundImageMobile() {
1305
+ return this.getAttribute("background-image--mobile");
1306
+ }
1307
+ set backgroundImageMobile(e) {
1308
+ g(this, "background-image--mobile", e);
1309
+ }
1310
+ get backgroundImageTablet() {
1311
+ return this.getAttribute("background-image--tablet");
1312
+ }
1313
+ set backgroundImageTablet(e) {
1314
+ g(this, "background-image--tablet", e);
1315
+ }
1316
+ get backgroundImageLaptop() {
1317
+ return this.getAttribute("background-image--laptop");
1318
+ }
1319
+ set backgroundImageLaptop(e) {
1320
+ g(this, "background-image--laptop", e);
1321
+ }
1322
+ get backgroundSize() {
1323
+ return this.getAttribute("background-size");
1324
+ }
1325
+ set backgroundSize(e) {
1326
+ g(this, "background-size", e);
1327
+ }
1328
+ get backgroundPosition() {
1329
+ return this.getAttribute("background-position");
1330
+ }
1331
+ set backgroundPosition(e) {
1332
+ g(this, "background-position", e);
1333
+ }
1334
+ get boxShadow() {
1335
+ return this.getAttribute("box-shadow");
1336
+ }
1337
+ set boxShadow(e) {
1338
+ g(this, "box-shadow", e);
1339
+ }
1340
+ get anchorOffset() {
1341
+ return this.getAttribute("anchor-offset");
1342
+ }
1343
+ set anchorOffset(e) {
1344
+ g(this, "anchor-offset", e);
1345
+ }
1346
+ get anchorSpacing() {
1347
+ return this.getAttribute("anchor-spacing");
1348
+ }
1349
+ set anchorSpacing(e) {
1350
+ g(this, "anchor-spacing", e);
1351
+ }
1352
+ get inverted() {
1353
+ return this.hasAttribute("inverted");
1354
+ }
1355
+ set inverted(e) {
1356
+ a(this, "inverted", e);
1357
+ }
1358
+ get subgridRows() {
1359
+ return this.getAttribute("subgrid-rows");
1360
+ }
1361
+ set subgridRows(e) {
1362
+ g(this, "subgrid-rows", e);
1363
+ }
1364
+ get subgridGap() {
1365
+ return this.getAttribute("subgrid-gap");
1366
+ }
1367
+ set subgridGap(e) {
1368
+ g(this, "subgrid-gap", e);
1369
+ }
1370
+ get subgridGapMobile() {
1371
+ return this.getAttribute("subgrid-gap--mobile");
1372
+ }
1373
+ set subgridGapMobile(e) {
1374
+ g(this, "subgrid-gap--mobile", e);
1375
+ }
1376
+ get subgridGapTablet() {
1377
+ return this.getAttribute("subgrid-gap--tablet");
1378
+ }
1379
+ set subgridGapTablet(e) {
1380
+ g(this, "subgrid-gap--tablet", e);
1381
+ }
1382
+ get subgridGapLaptop() {
1383
+ return this.getAttribute("subgrid-gap--laptop");
1384
+ }
1385
+ set subgridGapLaptop(e) {
1386
+ g(this, "subgrid-gap--laptop", e);
1387
+ }
1388
+ };
1389
+ customElements.get("px-container") || customElements.define("px-container", ke);
1390
+ //#endregion
1391
+ //#region ../../components/Section/src/Section.ts
1392
+ var z = new CSSStyleSheet();
1393
+ z.replaceSync(we);
1394
+ var Ae = class extends t {
1395
+ constructor() {
1396
+ super(z), this.template = () => "\n <px-container border-radius=\"none\" padding-inline=\"none\">\n <div class=\"content-wrapper\">\n <px-vstack gap=\"heading-to-content\">\n <slot name=\"heading\"></slot>\n <px-vstack gap=\"none\">\n <slot></slot>\n </px-vstack>\n </px-vstack>\n </div>\n </px-container>\n <div class=\"content-wrapper\">\n <slot name=\"overlap\"></slot>\n </div>\n ", this.shadowRoot.innerHTML = this.template();
1397
+ }
1398
+ connectedCallback() {
1399
+ g(this.$container, "background-color", this.backgroundColor), !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"), this.setHeadingSpacing = this.setHeadingSpacing.bind(this), this.setHeadingSpacing(), this.$slotHeading?.addEventListener("slotchange", this.setHeadingSpacing), this.toggleOverlapSpacing = this.toggleOverlapSpacing.bind(this), this.toggleOverlapSpacing(), this.$slotOverlap?.addEventListener("slotchange", this.toggleOverlapSpacing);
1400
+ }
1401
+ static get observedAttributes() {
1402
+ return [
1403
+ ...super.observedAttributes,
1404
+ "background-color",
1405
+ "background-gradient",
1406
+ "background-image",
1407
+ "background-image--mobile",
1408
+ "background-image--tablet",
1409
+ "background-image--laptop",
1410
+ "background-size",
1411
+ "background-position",
1412
+ "padding-block",
1413
+ "padding-top",
1414
+ "padding-bottom",
1415
+ "padding-block--mobile",
1416
+ "padding-top--mobile",
1417
+ "padding-bottom--mobile",
1418
+ "padding-block--tablet",
1419
+ "padding-top--tablet",
1420
+ "padding-bottom--tablet",
1421
+ "padding-block--laptop",
1422
+ "padding-top--laptop",
1423
+ "padding-bottom--laptop",
1424
+ "border",
1425
+ "border-side",
1426
+ "border-side--mobile",
1427
+ "border-side--tablet",
1428
+ "border-side--laptop"
1429
+ ];
1430
+ }
1431
+ attributeChangedCallback(e, t, n) {
1432
+ if (t !== n) switch (e) {
1433
+ case "background-color":
1434
+ this.$container.backgroundColor = r.indexOf(n) > 0 ? n : "none";
1435
+ break;
1436
+ case "background-gradient":
1437
+ this.$container.gradient = this.gradient;
1438
+ break;
1439
+ case "background-image":
1440
+ this.$container.backgroundImage = n;
1441
+ break;
1442
+ case "background-image--mobile":
1443
+ this.$container.backgroundImageMobile = n;
1444
+ break;
1445
+ case "background-image--tablet":
1446
+ this.$container.backgroundImageTablet = n;
1447
+ break;
1448
+ case "background-image--laptop":
1449
+ this.$container.backgroundImageLaptop = n;
1450
+ break;
1451
+ case "background-size":
1452
+ this.$container.backgroundSize = n;
1453
+ break;
1454
+ case "background-position":
1455
+ this.$container.backgroundPosition = n;
1456
+ break;
1457
+ case "padding-block":
1458
+ this.$container.paddingBlock = n;
1459
+ break;
1460
+ case "padding-top":
1461
+ this.$container.paddingTop = n;
1462
+ break;
1463
+ case "padding-bottom":
1464
+ this.$container.paddingBottom = n;
1465
+ break;
1466
+ case "padding-block--mobile":
1467
+ this.$container.paddingBlockMobile = n;
1468
+ break;
1469
+ case "padding-top--mobile":
1470
+ this.$container.paddingTopMobile = n;
1471
+ break;
1472
+ case "padding-bottom--mobile":
1473
+ this.$container.paddingBottomMobile = n;
1474
+ break;
1475
+ case "padding-block--tablet":
1476
+ this.$container.paddingBlockTablet = n;
1477
+ break;
1478
+ case "padding-top--tablet":
1479
+ this.$container.paddingTopTablet = n;
1480
+ break;
1481
+ case "padding-bottom--tablet":
1482
+ this.$container.paddingBottomTablet = n;
1483
+ break;
1484
+ case "padding-block--laptop":
1485
+ this.$container.paddingBlockLaptop = n;
1486
+ break;
1487
+ case "padding-top--laptop":
1488
+ this.$container.paddingTopLaptop = n;
1489
+ break;
1490
+ case "padding-bottom--laptop":
1491
+ this.$container.paddingBottomLaptop = n;
1492
+ break;
1493
+ case "border":
1494
+ this.$container.border = n;
1495
+ break;
1496
+ case "border-side":
1497
+ this.$container.borderSide = n;
1498
+ break;
1499
+ case "border-side--mobile":
1500
+ this.$container.borderSideMobile = n;
1501
+ break;
1502
+ case "border-side--tablet":
1503
+ this.$container.borderSideTablet = n;
1504
+ break;
1505
+ case "border-side--laptop":
1506
+ this.$container.borderSideLaptop = n;
1507
+ break;
1508
+ default: super.attributeChangedCallback(e, t, n);
1509
+ }
1510
+ }
1511
+ disconnectedCallback() {
1512
+ this.$slotHeading?.removeEventListener("slotchange", this.setHeadingSpacing), this.$slotOverlap?.removeEventListener("slotchange", this.toggleOverlapSpacing);
1513
+ }
1514
+ toggleOverlapSpacing() {
1515
+ let e = this.$slotOverlap, t = this.$mainContentWrapper;
1516
+ if (!e || !t) return;
1517
+ let n = e.assignedNodes({ flatten: !0 }).some(this.isNotEmptyNode);
1518
+ t.classList.toggle("overlapped", n);
1519
+ }
1520
+ isNotEmptyNode(e) {
1521
+ return e.nodeType === Node.ELEMENT_NODE || e.nodeType === Node.TEXT_NODE && (e.textContent ?? "").trim().length > 0;
1522
+ }
1523
+ setHeadingSpacing() {
1524
+ let e = this.$slotHeading, t = this.shadowRoot?.querySelector("px-vstack");
1525
+ e && t && (e.assignedElements().length > 0 ? t.setAttribute("gap", "heading-to-content") : t.setAttribute("gap", "none"));
1526
+ }
1527
+ get $container() {
1528
+ return this.shadowRoot?.querySelector("px-container");
1529
+ }
1530
+ get $mainContentWrapper() {
1531
+ return this.$container?.querySelector(".content-wrapper");
1532
+ }
1533
+ get $slotOverlap() {
1534
+ return this.shadowRoot?.querySelector("slot[name=\"overlap\"]");
1535
+ }
1536
+ get $slottedOverlap() {
1537
+ return this.querySelector("[slot=\"overlap\"]");
1538
+ }
1539
+ get $slotHeading() {
1540
+ return this.shadowRoot?.querySelector("slot[name=\"heading\"]");
1541
+ }
1542
+ get $slottedHeading() {
1543
+ return this.querySelector("[slot=\"heading\"]");
1544
+ }
1545
+ get backgroundColor() {
1546
+ return this.getAttribute("background-color") || "none";
1547
+ }
1548
+ set backgroundColor(e) {
1549
+ g(this, "background-color", e);
1550
+ }
1551
+ get gradient() {
1552
+ return this.getAttribute("background-gradient");
1553
+ }
1554
+ set gradient(e) {
1555
+ g(this, "background-gradient", e);
1556
+ }
1557
+ get backgroundImage() {
1558
+ return this.getAttribute("background-image");
1559
+ }
1560
+ set backgroundImage(e) {
1561
+ g(this, "background-image", e);
1562
+ }
1563
+ get backgroundImageMobile() {
1564
+ return this.getAttribute("background-image--mobile");
1565
+ }
1566
+ set backgroundImageMobile(e) {
1567
+ g(this, "background-image--mobile", e);
1568
+ }
1569
+ get backgroundImageTablet() {
1570
+ return this.getAttribute("background-image--tablet");
1571
+ }
1572
+ set backgroundImageTablet(e) {
1573
+ g(this, "background-image--tablet", e);
1574
+ }
1575
+ get backgroundImageLaptop() {
1576
+ return this.getAttribute("background-image--laptop");
1577
+ }
1578
+ set backgroundImageLaptop(e) {
1579
+ g(this, "background-image--laptop", e);
1580
+ }
1581
+ get backgroundSize() {
1582
+ return this.getAttribute("background-size");
1583
+ }
1584
+ set backgroundSize(e) {
1585
+ g(this, "background-size", e);
1586
+ }
1587
+ get backgroundPosition() {
1588
+ return this.getAttribute("background-position");
1589
+ }
1590
+ set backgroundPosition(e) {
1591
+ g(this, "background-position", e);
1592
+ }
1593
+ get paddingBlock() {
1594
+ return this.getAttribute("padding-block");
1595
+ }
1596
+ set paddingBlock(e) {
1597
+ g(this, "padding-block", e);
1598
+ }
1599
+ get paddingTop() {
1600
+ return this.getAttribute("padding-top");
1601
+ }
1602
+ set paddingTop(e) {
1603
+ g(this, "padding-top", e);
1604
+ }
1605
+ get paddingBottom() {
1606
+ return this.getAttribute("padding-bottom");
1607
+ }
1608
+ set paddingBottom(e) {
1609
+ g(this, "padding-bottom", e);
1610
+ }
1611
+ get paddingBlockMobile() {
1612
+ return this.getAttribute("padding-block--mobile");
1613
+ }
1614
+ set paddingBlockMobile(e) {
1615
+ g(this, "padding-block--mobile", e);
1616
+ }
1617
+ get paddingTopMobile() {
1618
+ return this.getAttribute("padding-top--mobile");
1619
+ }
1620
+ set paddingTopMobile(e) {
1621
+ g(this, "padding-top--mobile", e);
1622
+ }
1623
+ get paddingBottomMobile() {
1624
+ return this.getAttribute("padding-bottom--mobile");
1625
+ }
1626
+ set paddingBottomMobile(e) {
1627
+ g(this, "padding-bottom--mobile", e);
1628
+ }
1629
+ get paddingBlockTablet() {
1630
+ return this.getAttribute("padding-block--tablet");
1631
+ }
1632
+ set paddingBlockTablet(e) {
1633
+ g(this, "padding-block--tablet", e);
1634
+ }
1635
+ get paddingTopTablet() {
1636
+ return this.getAttribute("padding-top--tablet");
1637
+ }
1638
+ set paddingTopTablet(e) {
1639
+ g(this, "padding-top--tablet", e);
1640
+ }
1641
+ get paddingBottomTablet() {
1642
+ return this.getAttribute("padding-bottom--tablet");
1643
+ }
1644
+ set paddingBottomTablet(e) {
1645
+ g(this, "padding-bottom--tablet", e);
1646
+ }
1647
+ get paddingBlockLaptop() {
1648
+ return this.getAttribute("padding-block--laptop");
1649
+ }
1650
+ set paddingBlockLaptop(e) {
1651
+ g(this, "padding-block--laptop", e);
1652
+ }
1653
+ get paddingTopLaptop() {
1654
+ return this.getAttribute("padding-top--laptop");
1655
+ }
1656
+ set paddingTopLaptop(e) {
1657
+ g(this, "padding-top--laptop", e);
1658
+ }
1659
+ get paddingBottomLaptop() {
1660
+ return this.getAttribute("padding-bottom--laptop");
1661
+ }
1662
+ set paddingBottomLaptop(e) {
1663
+ g(this, "padding-bottom--laptop", e);
1664
+ }
1665
+ get border() {
1666
+ return this.getAttribute("border");
1667
+ }
1668
+ set border(e) {
1669
+ g(this, "border", e);
1670
+ }
1671
+ get borderSide() {
1672
+ return this.getAttribute("border-side");
1673
+ }
1674
+ set borderSide(e) {
1675
+ g(this, "border-side", e);
1676
+ }
1677
+ get borderSideMobile() {
1678
+ return this.getAttribute("border-side--mobile");
1679
+ }
1680
+ set borderSideMobile(e) {
1681
+ g(this, "border-side--mobile", e);
1682
+ }
1683
+ get borderSideTablet() {
1684
+ return this.getAttribute("border-side--tablet");
1685
+ }
1686
+ set borderSideTablet(e) {
1687
+ g(this, "border-side--tablet", e);
1688
+ }
1689
+ get borderSideLaptop() {
1690
+ return this.getAttribute("border-side--laptop");
1691
+ }
1692
+ set borderSideLaptop(e) {
1693
+ g(this, "border-side--laptop", e);
1694
+ }
1695
+ };
1696
+ customElements.get("px-section") || customElements.define("px-section", Ae);
1697
+ //#endregion
1698
+ //#region ../../components/Paragraph/src/paragraph.css?inline
1699
+ var je = "p,::slotted(p){font-family:var(--px-font-family);color:var(--px-color-text-neutral-default);font-size:var(--px-text-size-body-m-mobile);font-weight:var(--px-font-weight-body);line-height:var(--px-line-height-ratio-l);margin:0}::slotted(p){margin-bottom:var(--px-spacing-xs-mobile)}.text-align-left{text-align:left}.text-align-center{text-align:center}.text-align-right{text-align:right}:host([inverted]) p,:host([inverted]) ::slotted(p){color:var(--px-color-text-neutral-inverted)}@media screen and (width<=48rem){.text-align-left--mobile{text-align:left}.text-align-center--mobile{text-align:center}.text-align-right--mobile{text-align:right}}@media screen and (width>=48rem){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 screen and (width>=64.0625rem){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 screen and (width>=90.0625rem){::slotted(p){margin-bottom:var(--px-spacing-xs-desktop)}}", B = new CSSStyleSheet(), V = new CSSStyleSheet(), H = new CSSStyleSheet();
1700
+ B.replaceSync(je), V.replaceSync(A), H.replaceSync(k);
1701
+ var Me = class extends e {
1702
+ static {
1703
+ this.nativeName = "p";
1704
+ }
1705
+ constructor() {
1706
+ super(V, H, B), this.template = "<p><slot></slot></p>", this.shadowRoot.innerHTML = this.template;
1707
+ }
1708
+ static get observedAttributes() {
1709
+ return [
1710
+ ...super.observedAttributes,
1711
+ "variant",
1712
+ "color",
1713
+ "font-size",
1714
+ "font-weight",
1715
+ "text-align",
1716
+ "text-align--mobile",
1717
+ "text-align--tablet",
1718
+ "text-align--laptop",
1719
+ "inverted",
1720
+ "disabled"
1721
+ ];
1722
+ }
1723
+ attributeChangedCallback(e, t, n) {
1724
+ if (t !== n) switch (e) {
1725
+ case "variant":
1726
+ this.updateVariant(e, t, n, p);
1727
+ break;
1728
+ case "color":
1729
+ this.updateTypography(e, t, n, c);
1730
+ break;
1731
+ case "font-size":
1732
+ this.updateTypography(e, t, n, u);
1733
+ break;
1734
+ case "font-weight":
1735
+ this.updateTypography(e, t, n, d);
1736
+ break;
1737
+ case "text-align":
1738
+ case "text-align--mobile":
1739
+ case "text-align--tablet":
1740
+ case "text-align--laptop":
1741
+ this.updateTypography(e, t, n, _);
1742
+ break;
1743
+ case "disabled":
1744
+ this.color = "state-disabled";
1745
+ break;
1746
+ default: super.attributeChangedCallback(e, t, n);
1747
+ }
1748
+ }
1749
+ toggleClass(e, t) {
1750
+ e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`style-${e}`), t !== null && t !== "" && t !== "default" && this.$el.classList.toggle(`style-${t}`);
1751
+ }
1752
+ updateVariant(e, t, n, r) {
1753
+ this.checkName(r, n) ? this.toggleClass(t, n) : m(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join("\", \"")}".`);
1754
+ }
1755
+ updateTypography(e, t, n, r) {
1756
+ if (!this.checkName(r, n)) m(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join("\", \"")}".`);
1757
+ else {
1758
+ let r = this.splitAttrNameFromBreakpoint(e), i = r.breakpoint;
1759
+ t !== null && t !== "" && this.$el.classList.toggle(`${r.attrName}-${t}${i}`), n !== null && n !== "" && this.$el.classList.toggle(`${r.attrName}-${n}${i}`);
1760
+ }
1761
+ }
1762
+ splitAttrNameFromBreakpoint(e) {
1763
+ let t = "";
1764
+ if ([
1765
+ "--mobile",
1766
+ "--tablet",
1767
+ "--laptop"
1768
+ ].some((t) => e.includes(t))) {
1769
+ let n = e.split("--");
1770
+ e = n[0], t = `--${n[1]}`;
1771
+ }
1772
+ return {
1773
+ attrName: e,
1774
+ breakpoint: t
1775
+ };
1776
+ }
1777
+ get variant() {
1778
+ return this.getAttribute("variant");
1779
+ }
1780
+ set variant(e) {
1781
+ this._updateAttribute("variant", e);
1782
+ }
1783
+ get color() {
1784
+ return this.getAttribute("color");
1785
+ }
1786
+ set color(e) {
1787
+ this._updateAttribute("color", e);
1788
+ }
1789
+ get fontSize() {
1790
+ return this.getAttribute("font-size");
1791
+ }
1792
+ set fontSize(e) {
1793
+ this._updateAttribute("font-size", e);
1794
+ }
1795
+ get fontWeight() {
1796
+ return this.getAttribute("font-weight");
1797
+ }
1798
+ set fontWeight(e) {
1799
+ this._updateAttribute("font-weight", e);
1800
+ }
1801
+ get textAlign() {
1802
+ return this.getAttribute("text-align");
1803
+ }
1804
+ set textAlign(e) {
1805
+ this._updateAttribute("text-align", e);
1806
+ }
1807
+ get textAlignMobile() {
1808
+ return this.getAttribute("text-align--mobile");
1809
+ }
1810
+ set textAlignMobile(e) {
1811
+ this._updateAttribute("text-align--mobile", e);
1812
+ }
1813
+ get textAlignTablet() {
1814
+ return this.getAttribute("text-align--tablet");
1815
+ }
1816
+ set textAlignTablet(e) {
1817
+ this._updateAttribute("text-align--tablet", e);
1818
+ }
1819
+ get textAlignLaptop() {
1820
+ return this.getAttribute("text-align--laptop");
1821
+ }
1822
+ set textAlignLaptop(e) {
1823
+ this._updateAttribute("text-align--laptop", e);
1824
+ }
1825
+ get inverted() {
1826
+ return this.hasAttribute("inverted");
1827
+ }
1828
+ set inverted(e) {
1829
+ this._updateBooleanAttribute("inverted", e);
1830
+ }
1831
+ get disabled() {
1832
+ return this.hasAttribute("disabled");
1833
+ }
1834
+ set disabled(e) {
1835
+ this._updateBooleanAttribute("disabled", e);
1836
+ }
1837
+ };
1838
+ customElements.get("px-p") || customElements.define("px-p", Me);
1839
+ //#endregion
1840
+ //#region src/MDDCloser.ts
1841
+ var Ne = class extends HTMLElement {
1842
+ constructor() {
1843
+ super(), this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = "\n <button aria-hidden=\"true\" style=\"width: 0; height: 0; padding: 0; border: 0; background-color: #00000000;\"></button>\n ";
1844
+ }
1845
+ connectedCallback() {
1846
+ this.shadowRoot.firstElementChild?.addEventListener("focus", () => {
1847
+ this.dispatchEvent(new CustomEvent("close-panel", {
1848
+ bubbles: !0,
1849
+ composed: !0
1850
+ }));
1851
+ });
1852
+ }
1853
+ };
1854
+ customElements.get("px-mdd-closer") || customElements.define("px-mdd-closer", Ne);
1855
+ //#endregion
1856
+ //#region src/mega-drop-down.css?inline
1857
+ var Pe = ":host{--mdd-dialog-offset-top:0}dialog{width:100%;margin-inline:0;margin-top:var(--mdd-dialog-offset-top);max-width:100%;max-height:calc(100% - var(--mdd-dialog-offset-top));background-color:var(--px-color-background-surface-default);border:none;padding:0}px-mdd-closer{display:contents}@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 (height<=17.8125rem){dialog #footer{position:static}dialog::backdrop{background-color:#0006}}@media screen and (width<=64rem){dialog{height:100dvh;max-height:100%;margin:0;padding:0;animation:.3s ease-in-out slide-left-fade-in}px-container{height:100dvh}px-container>px-vstack px-button-icon:not(#mobile-close-button){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{top:var(--px-padding-l-laptop);position:absolute;right:0}@media screen and (width>=90.0625rem){px-container>px-vstack>px-button-icon{top:var(--px-padding-l-desktop)}}#sections-container{overflow:auto}@media only screen and (width>=64.0625rem){#sections-container{max-width:calc(100% - var(--px-spacing-default-laptop) - var(--px-size-icon-xs) - var(--px-padding-2xs-laptop) - var(--px-padding-2xs-laptop));padding-bottom:0}}@media screen and (width>=90.0625rem){#sections-container{max-width:calc(100% - var(--px-spacing-default-desktop) - var(--px-size-icon-xs) - var(--px-padding-2xs-desktop) - var(--px-padding-2xs-desktop))}}#mobile-header{display:none}@media screen and (width<=64rem){#mobile-header{display:block}}@media screen and (width<=47.938rem){#mobile-header{padding-bottom:var(--px-spacing-page-layout-between-sections-mobile)}}@media screen and (width>=48rem) and (width<=64rem){#mobile-header{padding-bottom:var(--px-spacing-page-layout-between-sections-tablet)}}px-p{display:none}@media screen and (width<=64rem){px-p{display:block}}@media screen and (width<=47.938rem){px-p{padding-bottom:var(--px-spacing-page-layout-between-sections-mobile)}}@media screen and (width>=48rem) and (width<=64rem){px-p{padding-bottom:var(--px-spacing-page-layout-between-sections-tablet)}}#footer{display:none}@media screen and (width<=64rem){#footer{background-color:var(--px-color-background-container-light-default);border-top:var(--px-size-border-m) solid var(--px-color-border-main-default);display:block;position:absolute;bottom:0;left:0;right:0}}@media screen and (width<=47.938rem){#footer{padding:var(--px-padding-m-mobile) var(--px-padding-s-mobile)}}@media screen and (width>=48rem) and (width<=64rem){#footer{padding:var(--px-padding-m-tablet) var(--px-padding-s-tablet)}}", U = new CSSStyleSheet();
1858
+ U.replaceSync(Pe);
1859
+ var W = class extends HTMLElement {
1860
+ #e;
1861
+ constructor() {
1862
+ super(), this.template = `<dialog>
1873
1863
  <px-section>
1874
1864
  <px-container
1875
1865
  padding-inline="none"
1876
1866
  padding-block="l"
1877
1867
  padding-block--mobile="m"
1868
+ padding-block--tablet="m"
1878
1869
  background-color="none"
1879
1870
  >
1880
1871
  <px-vstack>
1881
- <px-hstack id="mobile-header" gap="s" align-items="center">
1872
+ <px-hstack id="mobile-header" gap="default" align-items="center">
1882
1873
  <!-- Back button is only visible if the name is __lavender_mobile_menu -->
1883
1874
  <px-button id="back-button" variant="tertiary">
1884
1875
  <px-icon name="chevron_left" from="lavender"></px-icon>
@@ -1888,14 +1879,14 @@ class ne extends HTMLElement {
1888
1879
  <px-button-icon
1889
1880
  size="small"
1890
1881
  variant="secondary"
1882
+ id="mobile-close-button"
1891
1883
  >
1892
1884
  <px-icon name="cross" from="lavender" aria-label="${this.closeButtonAriaLabel || "Close"}" title="${this.closeButtonAriaLabel || "Close"}"></px-icon>
1893
1885
  </px-button-icon>
1894
1886
  </px-hstack>
1895
1887
  <px-p
1896
- font-size="heading-3xl"
1888
+ variant="title-2xl"
1897
1889
  color="neutral"
1898
- font-weight="title"
1899
1890
  >
1900
1891
  <slot name="title"></slot>
1901
1892
  </px-p>
@@ -1907,8 +1898,15 @@ class ne extends HTMLElement {
1907
1898
  </px-button-icon>
1908
1899
  <px-stack
1909
1900
  direction--mobile="column"
1901
+ direction--tablet="column"
1910
1902
  direction="row"
1911
- gap="l"
1903
+ gap="default"
1904
+ gap--mobile="page-layout-between-sections"
1905
+ gap--tablet="page-layout-between-sections"
1906
+ wrap="wrap"
1907
+ wrap--mobile="nowrap"
1908
+ wrap--tablet="nowrap"
1909
+ grow="1"
1912
1910
  id="sections-container"
1913
1911
  >
1914
1912
  <slot></slot>
@@ -1925,477 +1923,470 @@ class ne extends HTMLElement {
1925
1923
  <slot name="mdd-footer"></slot>
1926
1924
  </px-hstack>
1927
1925
  </px-section>
1928
- </dialog>`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template, this.shadowRoot.adoptedStyleSheets = [yt], this.internals = (e = this.attachInternals) == null ? void 0 : e.call(this), this.role = "menu", this.internals && (this.internals.role = "menu");
1929
- }
1930
- static get observedAttributes() {
1931
- return ["hidden", "name", "close-button-aria-label", "back-to-menu-label"];
1932
- }
1933
- connectedCallback() {
1934
- var e, o;
1935
- if (this.querySelectorAll("px-mdd-section").length === 0)
1936
- throw new Error("HeaderPanel must contain at least one MenuSection");
1937
- this.hidden = !0, this.internals && (this.internals.ariaHidden = "true"), this.ariaHidden = "true", this.setAttribute("slot", "header-panels"), this.shadowRoot.addEventListener("click", (r) => {
1938
- if (r.target.closest("px-button-icon"))
1939
- this.dispatchEvent(
1940
- new CustomEvent("close-panel", { bubbles: !0, composed: !0 })
1941
- );
1942
- else if (r.target.closest("#back-button")) {
1943
- const i = new CustomEvent("back-to-mobile-menu", {
1944
- bubbles: !0,
1945
- composed: !0
1946
- });
1947
- this.dispatchEvent(i);
1948
- }
1949
- }), this.$dialog.addEventListener("cancel", () => {
1950
- this.dispatchEvent(new CustomEvent("close-panel", { bubbles: !0 }));
1951
- }), this.$dialog.addEventListener("click", (r) => {
1952
- r.target === this.$dialog && this.dispatchEvent(
1953
- new CustomEvent("close-panel-from-dialog", {
1954
- bubbles: !0,
1955
- detail: {
1956
- clientX: r.clientX,
1957
- clientY: r.clientY
1958
- }
1959
- })
1960
- );
1961
- }), this.getAttribute("name") === "__lavender_mobile_menu" && (n(this, p, D).style.visibility = "hidden"), this.getAttribute("name") !== "__lavender_mobile_menu" && (n(this, p, At).innerText = ((o = (e = this.closest("px-header")) == null ? void 0 : e.querySelector(
1962
- `px-header-item[for="${this.getAttribute("name")}"]`
1963
- )) == null ? void 0 : o.innerText) ?? ""), this.$slotMddFooter || (n(this, p, z).style.display = "none"), A(this, m, new MutationObserver(() => {
1964
- this.$slotMddFooter && (n(this, p, z).style.display = "block");
1965
- })), n(this, m).observe(this, { childList: !0, subtree: !0 });
1966
- }
1967
- disconnectedCallback() {
1968
- n(this, m).disconnect();
1969
- }
1970
- attributeChangedCallback(e, o, r) {
1971
- if (e === "name" && !r)
1972
- throw new Error("Media Drop Down must have a name attribute");
1973
- if (e === "name" && (this.id = r), e === "hidden" && this.internals) {
1974
- const i = r === "true" || r === "" ? "true" : "false";
1975
- this.internals.ariaHidden = i, this.ariaHidden = i;
1976
- const l = n(this, p, z).offsetHeight / parseFloat(getComputedStyle(document.documentElement).fontSize);
1977
- this.style.setProperty(
1978
- "--mdd-section-container-padding-bottom",
1979
- `${l}em`
1980
- );
1981
- }
1982
- e === "close-button-aria-label" && n(this, p, zt).forEach((i) => {
1983
- r ? i.setAttribute("aria-label", r || "Close") : i.removeAttribute("aria-label");
1984
- }), e === "back-to-menu-label" && (n(this, p, D).innerHTML = `
1926
+ </dialog>`, this.#e = new MutationObserver(() => {
1927
+ this.$slotMddFooter && (this.#r.style.display = "block");
1928
+ }), this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template, this.shadowRoot.adoptedStyleSheets = [U], this.internals = this.attachInternals?.(), this.internals && (this.internals.role = "menu");
1929
+ }
1930
+ static get observedAttributes() {
1931
+ return [
1932
+ "hidden",
1933
+ "name",
1934
+ "close-button-aria-label",
1935
+ "back-to-menu-label"
1936
+ ];
1937
+ }
1938
+ connectedCallback() {
1939
+ if (this.role = "menu", this.querySelectorAll("px-mdd-section").length === 0) throw Error("HeaderPanel must contain at least one MenuSection");
1940
+ this.hidden = !0, this.internals && (this.internals.ariaHidden = "true"), this.ariaHidden = "true", this.setAttribute("slot", "header-panels"), this.shadowRoot.addEventListener("click", (e) => {
1941
+ if (e.target.closest("px-button-icon")) this.dispatchEvent(new CustomEvent("close-panel", {
1942
+ bubbles: !0,
1943
+ composed: !0
1944
+ }));
1945
+ else if (e.target.closest("#back-button")) {
1946
+ let e = new CustomEvent("back-to-mobile-menu", {
1947
+ bubbles: !0,
1948
+ composed: !0
1949
+ });
1950
+ this.dispatchEvent(e);
1951
+ }
1952
+ }), this.$dialog.addEventListener("cancel", () => {
1953
+ this.dispatchEvent(new CustomEvent("close-panel", { bubbles: !0 }));
1954
+ }), this.$dialog.addEventListener("click", (e) => {
1955
+ e.target === this.$dialog && this.dispatchEvent(new CustomEvent("close-panel-from-dialog", {
1956
+ bubbles: !0,
1957
+ detail: {
1958
+ clientX: e.clientX,
1959
+ clientY: e.clientY
1960
+ }
1961
+ }));
1962
+ }), this.getAttribute("name") === "__lavender_mobile_menu" && (this.#t.style.display = "none"), this.getAttribute("name") !== "__lavender_mobile_menu" && (this.#n.innerText = this.closest("px-header")?.querySelector(`px-header-item[for="${this.getAttribute("name")}"]`)?.innerText ?? ""), this.$slotMddFooter || (this.#r.style.display = "none"), this.#e.observe(this, {
1963
+ childList: !0,
1964
+ subtree: !0
1965
+ });
1966
+ }
1967
+ disconnectedCallback() {
1968
+ this.#e.disconnect();
1969
+ }
1970
+ attributeChangedCallback(e, t, n) {
1971
+ if (e === "name" && !n) throw Error("Media Drop Down must have a name attribute");
1972
+ if (e === "name" && (this.id = n), e === "hidden" && this.internals) {
1973
+ let e = n === "true" || n === "" ? "true" : "false";
1974
+ this.internals.ariaHidden = e, this.ariaHidden = e;
1975
+ let t = this.#r.offsetHeight / parseFloat(getComputedStyle(document.documentElement).fontSize);
1976
+ this.style.setProperty("--mdd-section-container-padding-bottom", `${t}em`);
1977
+ }
1978
+ e === "close-button-aria-label" && this.#i.forEach((e) => {
1979
+ n ? e.setAttribute("aria-label", n || "Close") : e.removeAttribute("aria-label");
1980
+ }), e === "back-to-menu-label" && (this.#t.innerHTML = `
1985
1981
  <px-icon name="chevron_left" from="lavender"></px-icon>
1986
- ${r || "Back to menu"}
1982
+ ${n || "Back to menu"}
1987
1983
  `);
1988
- }
1989
- get $dialog() {
1990
- return this.shadowRoot.querySelector("dialog");
1991
- }
1992
- get hidden() {
1993
- return !this.$dialog.open;
1994
- }
1995
- set hidden(e) {
1996
- if (typeof e != "boolean")
1997
- throw new Error("hidden must be a boolean");
1998
- e ? (this.internals && (this.internals.ariaHidden = "true"), this.ariaHidden = "true", this.setAttribute("hidden", ""), this.$dialog.open && this.$dialog.close()) : (this.internals && (this.internals.ariaHidden = "false"), this.ariaHidden = "false", this.$dialog.open || (this.$dialog.showModal(), setTimeout(() => {
1999
- window.navigator.userAgent.match(/iPhone|iPad|iPod/i) && this.$dialog.focus();
2000
- }, 0)), this.removeAttribute("hidden"));
2001
- }
2002
- get name() {
2003
- return this.getAttribute("name");
2004
- }
2005
- set name(e) {
2006
- this.setAttribute("name", e);
2007
- }
2008
- get closeButtonAriaLabel() {
2009
- return this.getAttribute("close-button-aria-label");
2010
- }
2011
- set closeButtonAriaLabel(e) {
2012
- e ? this.setAttribute("close-button-aria-label", e) : this.removeAttribute("close-button-aria-label");
2013
- }
2014
- get backToMenuLabel() {
2015
- return this.getAttribute("back-to-menu-label");
2016
- }
2017
- set backToMenuLabel(e) {
2018
- e ? this.setAttribute("back-to-menu-label", e) : this.removeAttribute("back-to-menu-label");
2019
- }
2020
- get $slotMddFooter() {
2021
- return this.querySelector('[slot="mdd-footer"]');
2022
- }
2023
- set dialogOffsetTop(e) {
2024
- this.$dialog.style.setProperty("--mdd-dialog-offset-top", e);
2025
- }
2026
- }
2027
- m = new WeakMap(), p = new WeakSet(), D = function() {
2028
- return this.shadowRoot.querySelector("#back-button");
2029
- }, At = function() {
2030
- return this.shadowRoot.querySelector("px-p");
2031
- }, z = function() {
2032
- return this.shadowRoot.querySelector("#footer");
2033
- }, zt = function() {
2034
- return this.shadowRoot.querySelectorAll("px-button-icon");
1984
+ }
1985
+ get $dialog() {
1986
+ return this.shadowRoot.querySelector("dialog");
1987
+ }
1988
+ get hidden() {
1989
+ return !this.$dialog.open;
1990
+ }
1991
+ set hidden(e) {
1992
+ if (typeof e != "boolean") throw Error("hidden must be a boolean");
1993
+ e ? (this.internals && (this.internals.ariaHidden = "true"), this.ariaHidden = "true", this.setAttribute("hidden", ""), this.$dialog.open && this.$dialog.close()) : (this.internals && (this.internals.ariaHidden = "false"), this.ariaHidden = "false", this.$dialog.open || (this.$dialog.showModal(), setTimeout(() => {
1994
+ window.navigator.userAgent.match(/iPhone|iPad|iPod/i) && this.$dialog.focus();
1995
+ }, 0)), this.removeAttribute("hidden"));
1996
+ }
1997
+ get name() {
1998
+ return this.getAttribute("name");
1999
+ }
2000
+ set name(e) {
2001
+ g(this, "name", e);
2002
+ }
2003
+ get closeButtonAriaLabel() {
2004
+ return this.getAttribute("close-button-aria-label");
2005
+ }
2006
+ set closeButtonAriaLabel(e) {
2007
+ g(this, "close-button-aria-label", e);
2008
+ }
2009
+ get backToMenuLabel() {
2010
+ return this.getAttribute("back-to-menu-label");
2011
+ }
2012
+ set backToMenuLabel(e) {
2013
+ g(this, "back-to-menu-label", e);
2014
+ }
2015
+ get $slotMddFooter() {
2016
+ return this.querySelector("[slot=\"mdd-footer\"]");
2017
+ }
2018
+ get #t() {
2019
+ return this.shadowRoot.querySelector("#back-button");
2020
+ }
2021
+ get #n() {
2022
+ return this.shadowRoot.querySelector("px-p");
2023
+ }
2024
+ get #r() {
2025
+ return this.shadowRoot.querySelector("#footer");
2026
+ }
2027
+ get #i() {
2028
+ return this.shadowRoot.querySelectorAll("px-button-icon");
2029
+ }
2030
+ set dialogOffsetTop(e) {
2031
+ this.$dialog.style.setProperty("--mdd-dialog-offset-top", e);
2032
+ }
2035
2033
  };
2036
- customElements.get("px-mdd") || customElements.define("px-mdd", ne);
2037
- const de = ':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)}}', $t = new CSSStyleSheet();
2038
- $t.replaceSync(de);
2039
- class le extends HTMLElement {
2040
- constructor() {
2041
- super(), this.template = `<px-vstack gap="default">
2042
- <px-p font-size="heading-l" font-weight="title">
2043
- <slot name="title"></slot>
2044
- </px-p>
2045
- <nav id="section-wrapper">
2046
- <px-vstack role="list" gap="xs" gap--mobile="none">
2047
- <slot></slot>
2048
- </px-vstack>
2049
- </nav>
2050
- <px-vstack gap="default" gap--mobile="default">
2051
- <slot name="footer"></slot>
2052
- </px-vstack>
2053
- </px-vstack>`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template, this.shadowRoot.adoptedStyleSheets = [$t];
2054
- }
2055
- connectedCallback() {
2056
- this.$slotTitle || this.$title.setAttribute("hidden", ""), this.setupForId();
2057
- }
2058
- static get observedAttributes() {
2059
- return ["title-hidden"];
2060
- }
2061
- attributeChangedCallback(t, e, o) {
2062
- if (e !== o)
2063
- switch (t) {
2064
- case "title-hidden":
2065
- this.$title.style.display = o !== null ? "none" : "block";
2066
- break;
2067
- }
2068
- }
2069
- setupForId() {
2070
- const t = Math.random().toString(36).substr(2, 9);
2071
- this.$title.setAttribute("id", t), this.$sectionWrapper.setAttribute("aria-labelledby", t);
2072
- }
2073
- get $slotTitle() {
2074
- return this.querySelector('[slot="title"]');
2075
- }
2076
- get $title() {
2077
- return this.shadowRoot.querySelector("px-p");
2078
- }
2079
- get $sectionWrapper() {
2080
- return this.shadowRoot.querySelector("#section-wrapper");
2081
- }
2082
- get $sectionItems() {
2083
- return this.querySelectorAll("px-mdd-section-item");
2084
- }
2085
- get hiddenTitle() {
2086
- return this.hasAttribute("hidden-title");
2087
- }
2088
- set hiddenTitle(t) {
2089
- t ? this.setAttribute("hidden-title", "") : this.removeAttribute("hidden-title");
2090
- }
2091
- }
2092
- customElements.get("px-mdd-section") || customElements.define("px-mdd-section", le);
2093
- const St = new CSSStyleSheet(), wt = new CSSStyleSheet(), Ct = new CSSStyleSheet();
2094
- St.replaceSync(st);
2095
- wt.replaceSync(at);
2096
- Ct.replaceSync(F);
2097
- const pe = [...it, "link-m", "link-s"], be = [
2098
- "link",
2099
- "no-style",
2100
- "skip-link",
2101
- "btn-default",
2102
- "btn-secondary",
2103
- "btn-tertiary",
2104
- "icon-link"
2105
- ], ce = ["", "default", "alternative"], w = class w extends y {
2106
- constructor() {
2107
- super(St, wt, Ct), this.template = () => '<slot name="before"></slot><slot></slot><slot name="after"></slot>';
2108
- const t = document.createElement(w.nativeName);
2109
- t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
2110
- }
2111
- static get observedAttributes() {
2112
- return [
2113
- ...super.observedAttributes,
2114
- "disabled",
2115
- "variant",
2116
- "shape",
2117
- "shape--mobile",
2118
- "shape--tablet",
2119
- "shape--laptop",
2120
- "shape--desktop",
2121
- "extended",
2122
- "extended--mobile",
2123
- "extended--tablet",
2124
- "extended--laptop",
2125
- "extended--desktop",
2126
- "inverted",
2127
- "font-size",
2128
- "color",
2129
- "font-weight",
2130
- "title"
2131
- ];
2132
- }
2133
- connectedCallback() {
2134
- this.$before && this.$before.localName === "px-icon" && this.configureBeforeAfterIcon(this.$before), this.$after && this.$after.localName === "px-icon" && this.configureBeforeAfterIcon(this.$after), V(this, this.$el, !1);
2135
- }
2136
- attributeChangedCallback(t, e, o) {
2137
- if (e !== o)
2138
- switch (t) {
2139
- case "disabled":
2140
- this.$el.toggleAttribute("aria-disabled"), o !== null && this.$el.setAttribute("aria-disabled", "true");
2141
- break;
2142
- case "variant":
2143
- this.updateVariant(e, o);
2144
- break;
2145
- case "shape":
2146
- case "shape--mobile":
2147
- case "shape--tablet":
2148
- case "shape--laptop":
2149
- case "shape--desktop":
2150
- this.updateShape(t, o, ce);
2151
- break;
2152
- case "extended":
2153
- case "extended--mobile":
2154
- case "extended--tablet":
2155
- case "extended--laptop":
2156
- case "extended--desktop":
2157
- this.updateExtended(t, o);
2158
- break;
2159
- case "font-size":
2160
- this.updateTypography(
2161
- t,
2162
- e,
2163
- o,
2164
- pe
2165
- );
2166
- break;
2167
- case "color":
2168
- this.updateTypography(t, e, o, _);
2169
- break;
2170
- case "font-weight":
2171
- this.updateTypography(t, e, o, rt);
2172
- break;
2173
- case "title":
2174
- o && (this.$el.setAttribute("title", o), this.removeAttribute("title"));
2175
- break;
2176
- default:
2177
- super.attributeChangedCallback(t, e, o);
2178
- break;
2179
- }
2180
- }
2181
- configureBeforeAfterIcon(t) {
2182
- const e = t.getAttribute("size"), o = t.getAttribute("color");
2183
- t.addEventListener("click", () => {
2184
- this.$el.focus();
2185
- }), e || t.setAttribute("size", "xs"), o || t.setAttribute("color", "inherit");
2186
- }
2187
- _toggleClassList(t) {
2188
- if (t.startsWith("btn-")) {
2189
- const e = t.split("-");
2190
- for (const o of e)
2191
- this.$el.classList.toggle(o);
2192
- } else
2193
- this.$el.classList.toggle(t);
2194
- }
2195
- updateVariant(t, e) {
2196
- t !== null && t !== "" && t !== "link" && this._toggleClassList(t), e !== null && e !== "" && e !== "link" && this._toggleClassList(e), this.checkName(be, e) || d(
2197
- `${e} is not an allowed variant value for ${this.tagName.toLowerCase()}`
2198
- ), e === "icon-link" && this.$iconNotBeforeAfter.setAttribute("color", "inherit");
2199
- }
2200
- updateShape(t, e, o) {
2201
- if (!O(o, e)) {
2202
- d(
2203
- `${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
2204
- );
2205
- return;
2206
- }
2207
- e !== null && e !== "" && this.$el.setAttribute(t, e);
2208
- }
2209
- updateTypography(t, e, o, r) {
2210
- 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(
2211
- `${o} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
2212
- );
2213
- }
2214
- updateExtended(t, e) {
2215
- e === null ? this.$el.style.setProperty(`--button-${t}`, "") : this.$el.style.setProperty(`--button-${t}`, "100%");
2216
- }
2217
- get $before() {
2218
- return this.querySelector('[slot="before"]');
2219
- }
2220
- get $after() {
2221
- return this.querySelector('[slot="after"]');
2222
- }
2223
- get $iconNotBeforeAfter() {
2224
- return this.querySelector(
2225
- 'px-icon:not([slot="before"], [slot="after"])'
2226
- );
2227
- }
2228
- get disabled() {
2229
- return this.getAttribute("disabled");
2230
- }
2231
- set disabled(t) {
2232
- this.setAttribute("disabled", t);
2233
- }
2234
- get variant() {
2235
- return this.getAttribute("variant");
2236
- }
2237
- set variant(t) {
2238
- this.setAttribute("variant", t);
2239
- }
2240
- get shape() {
2241
- return this.getAttribute("shape");
2242
- }
2243
- set shape(t) {
2244
- this.setAttribute("shape", t);
2245
- }
2246
- get shapeMobile() {
2247
- return this.getAttribute("shape--mobile");
2248
- }
2249
- set shapeMobile(t) {
2250
- this.setAttribute("shape--mobile", t);
2251
- }
2252
- get shapeTablet() {
2253
- return this.getAttribute("shape--tablet");
2254
- }
2255
- set shapeTablet(t) {
2256
- this.setAttribute("shape--tablet", t);
2257
- }
2258
- get shapeLaptop() {
2259
- return this.getAttribute("shape--laptop");
2260
- }
2261
- set shapeLaptop(t) {
2262
- this.setAttribute("shape--laptop", t);
2263
- }
2264
- get shapeDesktop() {
2265
- return this.getAttribute("shape--desktop");
2266
- }
2267
- set shapeDesktop(t) {
2268
- this.setAttribute("shape--desktop", t);
2269
- }
2270
- get extended() {
2271
- return this.getAttribute("extended");
2272
- }
2273
- set extended(t) {
2274
- this.setAttribute("extended", t);
2275
- }
2276
- get extendedMobile() {
2277
- return this.getAttribute("extended--mobile");
2278
- }
2279
- set extendedMobile(t) {
2280
- this.setAttribute("extended--mobile", t);
2281
- }
2282
- get extendedTablet() {
2283
- return this.getAttribute("extended--tablet");
2284
- }
2285
- set extendedTablet(t) {
2286
- this.setAttribute("extended--tablet", t);
2287
- }
2288
- get extendedLaptop() {
2289
- return this.getAttribute("extended--laptop");
2290
- }
2291
- set extendedLaptop(t) {
2292
- this.setAttribute("extended--laptop", t);
2293
- }
2294
- get extendedDesktop() {
2295
- return this.getAttribute("extended--desktop");
2296
- }
2297
- set extendedDesktop(t) {
2298
- this.setAttribute("extended--desktop", t);
2299
- }
2300
- get inverted() {
2301
- return this.getAttribute("inverted");
2302
- }
2303
- set inverted(t) {
2304
- this.setAttribute("inverted", t);
2305
- }
2306
- get fontsize() {
2307
- return this.getAttribute("font-size");
2308
- }
2309
- set fontsize(t) {
2310
- this.setAttribute("font-size", t);
2311
- }
2312
- get color() {
2313
- return this.getAttribute("color");
2314
- }
2315
- set color(t) {
2316
- this.setAttribute("color", t);
2317
- }
2318
- get fontweight() {
2319
- return this.getAttribute("font-weight");
2320
- }
2321
- set fontweight(t) {
2322
- this.setAttribute("font-weight", t);
2323
- }
2324
- get title() {
2325
- return this.getAttribute("title");
2326
- }
2327
- set title(t) {
2328
- t ? this.setAttribute("title", t) : this.removeAttribute("title");
2329
- }
2034
+ customElements.get("px-mdd") || customElements.define("px-mdd", W);
2035
+ //#endregion
2036
+ //#region src/mdd-section.css?inline
2037
+ var Fe = ":host{flex-basis:30%}@media screen and (width<=64rem){:host{flex-basis:100%;width:100%}#section-wrapper{background-color:var(--px-color-background-surface-light);border-radius:var(--px-radius-main);padding:var(--px-padding-xs-mobile) var(--px-padding-m-mobile)}::slotted(px-mdd-section-item){border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default)}::slotted(px-mdd-section-item:first-of-type){padding-top:0}::slotted(px-mdd-section-item:last-of-type){border-bottom:none;padding-bottom:0}::slotted([slot=footer]){background-color:var(--px-color-background-surface-light);border-radius:var(--px-radius-main)}:host([title-hidden]){padding-bottom:var(--mdd-section-container-padding-bottom,0)}}@media screen and (width<=47.938rem){#section-wrapper{padding:var(--px-padding-xs-mobile) var(--px-padding-m-mobile)}::slotted(px-mdd-section-item){padding-block:var(--px-spacing-xs-mobile)}::slotted([slot=footer]){padding:var(--px-padding-s-mobile) var(--px-padding-m-mobile)}}@media screen and (width>=48rem) and (width<=64rem){#section-wrapper{padding:var(--px-padding-xs-tablet) var(--px-padding-m-tablet)}::slotted(px-mdd-section-item){padding-block:var(--px-spacing-xs-tablet)}::slotted([slot=footer]){padding:var(--px-padding-s-tablet) var(--px-padding-m-tablet)}}", G = new CSSStyleSheet();
2038
+ G.replaceSync(Fe);
2039
+ var K = class extends HTMLElement {
2040
+ constructor() {
2041
+ super(), this.template = "<px-vstack gap=\"default\">\n <px-p font-size=\"heading-l\" font-weight=\"title\">\n <slot name=\"title\"></slot>\n </px-p>\n <nav id=\"section-wrapper\">\n <px-vstack role=\"list\" gap=\"xs\" gap--mobile=\"none\">\n <slot></slot>\n </px-vstack>\n </nav>\n <px-vstack gap=\"default\" gap--mobile=\"s\">\n <slot name=\"footer\"></slot>\n </px-vstack>\n </px-vstack>", this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template, this.shadowRoot.adoptedStyleSheets = [G];
2042
+ }
2043
+ connectedCallback() {
2044
+ this.$slotTitle || this.$title.setAttribute("hidden", ""), this.setupForId();
2045
+ }
2046
+ static get observedAttributes() {
2047
+ return ["title-hidden"];
2048
+ }
2049
+ attributeChangedCallback(e, t, n) {
2050
+ if (t !== n) switch (e) {
2051
+ case "title-hidden": this.$title.style.display = n === null ? "block" : "none";
2052
+ }
2053
+ }
2054
+ setupForId() {
2055
+ let e = Math.random().toString(36).substr(2, 9);
2056
+ this.$title.setAttribute("id", e), this.$sectionWrapper.setAttribute("aria-labelledby", e);
2057
+ }
2058
+ get $slotTitle() {
2059
+ return this.querySelector("[slot=\"title\"]");
2060
+ }
2061
+ get $title() {
2062
+ return this.shadowRoot.querySelector("px-p");
2063
+ }
2064
+ get $sectionWrapper() {
2065
+ return this.shadowRoot.querySelector("#section-wrapper");
2066
+ }
2067
+ get $sectionItems() {
2068
+ return this.querySelectorAll("px-mdd-section-item");
2069
+ }
2070
+ get hiddenTitle() {
2071
+ return this.hasAttribute("hidden-title");
2072
+ }
2073
+ set hiddenTitle(e) {
2074
+ e ? this.setAttribute("hidden-title", "") : this.removeAttribute("hidden-title");
2075
+ }
2330
2076
  };
2331
- w.nativeName = "a";
2332
- let H = w;
2333
- customElements.get("px-a") || customElements.define("px-a", H);
2334
- const he = '.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)}}', Lt = new CSSStyleSheet();
2335
- Lt.replaceSync(he);
2336
- class ge extends HTMLElement {
2337
- constructor() {
2338
- var t;
2339
- super(), this.template = `
2340
- <px-hstack align-items="center">
2341
- <span class="mdd-section-item-action-container">
2342
- <slot></slot>
2343
- <slot name="after"></slot>
2344
- </span>
2345
- <px-spacer></px-spacer>
2346
- <px-icon name="chevron_right" from="lavender"></px-icon>
2347
- </px-hstack>`, this.attachShadow({ mode: "open" }), this.shadowRoot.adoptedStyleSheets = [Lt], this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this), this.role = "listitem", this.internals && (this.internals.role = "listitem");
2348
- }
2349
- static get observedAttributes() {
2350
- return ["href", "for"];
2351
- }
2352
- // ... existing code ...
2353
- attributeChangedCallback(t, e, o) {
2354
- this.updateView(t, o);
2355
- }
2356
- updateView(t, e) {
2357
- t === "href" && this.$link ? this.$link.href = e : t === "href" && !this.$link && e ? (this.shadowRoot.innerHTML = `<a href="${e}">${this.template}</a>`, this.shadowRoot.firstElementChild.setAttribute("tabindex", "0"), this.$arrowIcon.style.display = "none") : t === "for" && !this.$button && e && (this.shadowRoot.innerHTML = `<button>${this.template}</button>`, this.shadowRoot.firstElementChild.setAttribute("tabindex", "0"));
2358
- }
2359
- connectedCallback() {
2360
- this.hasAttribute("href") ? (this.updateView("href", this.href), this.$link.href = this.href) : this.hasAttribute("for") && (this.updateView("for", this.getAttribute("for")), this.addEventListener("click", this.handleClick)), this.$after && this.$after.localName === "px-icon" && this.configureAfterIcon(this.$after), this.$link && (this.$arrowIcon.style.display = "none");
2361
- }
2362
- handleClick() {
2363
- const t = new CustomEvent("section-item-click", {
2364
- bubbles: !0,
2365
- composed: !0,
2366
- detail: { for: this.getAttribute("for") }
2367
- });
2368
- this.dispatchEvent(t);
2369
- }
2370
- configureAfterIcon(t) {
2371
- t.addEventListener("click", () => {
2372
- this.$link.focus();
2373
- }), t.setAttribute("size", "xs"), t.setAttribute("color", "inherit");
2374
- }
2375
- get href() {
2376
- return this.getAttribute("href");
2377
- }
2378
- set href(t) {
2379
- this.setAttribute("href", t);
2380
- }
2381
- get $link() {
2382
- return this.shadowRoot.querySelector("a");
2383
- }
2384
- get $button() {
2385
- return this.shadowRoot.querySelector("button");
2386
- }
2387
- get $after() {
2388
- return this.querySelector('[slot="after"]');
2389
- }
2390
- get $arrowIcon() {
2391
- return this.shadowRoot.querySelector(
2392
- 'px-icon[name="chevron_right"]'
2393
- );
2394
- }
2395
- }
2396
- customElements.get("px-mdd-section-item") || customElements.define("px-mdd-section-item", ge);
2397
- export {
2398
- le as MddSection,
2399
- ge as MddSectionItem,
2400
- ne as MegaDropDown
2077
+ customElements.get("px-mdd-section") || customElements.define("px-mdd-section", K);
2078
+ //#endregion
2079
+ //#region ../../components/Link/src/Link.ts
2080
+ var q = new CSSStyleSheet(), J = new CSSStyleSheet(), Y = new CSSStyleSheet();
2081
+ q.replaceSync(b), J.replaceSync(y), Y.replaceSync(A);
2082
+ var Ie = [
2083
+ ...u,
2084
+ "link-m",
2085
+ "link-s"
2086
+ ], X = [
2087
+ "link",
2088
+ "no-style",
2089
+ "skip-link",
2090
+ "btn-default",
2091
+ "btn-secondary",
2092
+ "btn-tertiary",
2093
+ "icon-link",
2094
+ "wrapper"
2095
+ ], Le = [
2096
+ "",
2097
+ "default",
2098
+ "alternative"
2099
+ ], Z = class t extends e {
2100
+ static {
2101
+ this.nativeName = "a";
2102
+ }
2103
+ constructor() {
2104
+ super(q, J, Y), this.template = () => "<slot name=\"before\"></slot><slot></slot><slot name=\"after\"></slot>";
2105
+ let e = document.createElement(t.nativeName);
2106
+ e.innerHTML = this.template(), this.shadowRoot.appendChild(e);
2107
+ }
2108
+ static get observedAttributes() {
2109
+ return [
2110
+ ...super.observedAttributes,
2111
+ "disabled",
2112
+ "variant",
2113
+ "shape",
2114
+ "shape--mobile",
2115
+ "shape--tablet",
2116
+ "shape--laptop",
2117
+ "shape--desktop",
2118
+ "extended",
2119
+ "extended--mobile",
2120
+ "extended--tablet",
2121
+ "extended--laptop",
2122
+ "extended--desktop",
2123
+ "inverted",
2124
+ "font-size",
2125
+ "color",
2126
+ "font-weight",
2127
+ "title"
2128
+ ];
2129
+ }
2130
+ connectedCallback() {
2131
+ this.$before && this.$before.localName === "px-icon" && this.configureBeforeAfterIcon(this.$before), this.$after && this.$after.localName === "px-icon" && this.configureBeforeAfterIcon(this.$after), v(this, this.$el, !1);
2132
+ }
2133
+ disconnectedCallback() {}
2134
+ attributeChangedCallback(e, t, n) {
2135
+ if (t !== n) switch (e) {
2136
+ case "disabled":
2137
+ this.$el.toggleAttribute("aria-disabled"), n !== null && this.$el.setAttribute("aria-disabled", "true");
2138
+ break;
2139
+ case "variant":
2140
+ this.updateVariant(t, n);
2141
+ break;
2142
+ case "shape":
2143
+ case "shape--mobile":
2144
+ case "shape--tablet":
2145
+ case "shape--laptop":
2146
+ case "shape--desktop":
2147
+ this.updateShape(e, n, Le);
2148
+ break;
2149
+ case "extended":
2150
+ case "extended--mobile":
2151
+ case "extended--tablet":
2152
+ case "extended--laptop":
2153
+ case "extended--desktop":
2154
+ this.updateExtended(e, n);
2155
+ break;
2156
+ case "font-size":
2157
+ this.updateTypography(e, t, n, Ie);
2158
+ break;
2159
+ case "color":
2160
+ this.updateTypography(e, t, n, c);
2161
+ break;
2162
+ case "font-weight":
2163
+ this.updateTypography(e, t, n, d);
2164
+ break;
2165
+ case "title":
2166
+ n && (this.$el.setAttribute("title", n), this.removeAttribute("title"));
2167
+ break;
2168
+ default: super.attributeChangedCallback(e, t, n);
2169
+ }
2170
+ }
2171
+ configureBeforeAfterIcon(e) {
2172
+ let t = e.getAttribute("size"), n = e.getAttribute("color");
2173
+ e.addEventListener("click", () => {
2174
+ this.$el.focus();
2175
+ }), t || e.setAttribute("size", "xs"), n || e.setAttribute("color", "inherit");
2176
+ }
2177
+ _toggleClassList(e) {
2178
+ if (e.startsWith("btn-")) {
2179
+ let t = e.split("-");
2180
+ for (let e of t) this.$el.classList.toggle(e);
2181
+ } else this.$el.classList.toggle(e);
2182
+ }
2183
+ updateVariant(e, t) {
2184
+ e !== null && e !== "" && e !== "link" && this._toggleClassList(e), t !== null && t !== "" && t !== "link" && this._toggleClassList(t), this.checkName(X, t) || m(`"${t}" is not a valid variant value for ${this.tagName.toLowerCase()}. Allowed values are: "${X.join("\", \"")}".`);
2185
+ }
2186
+ updateShape(e, t, n) {
2187
+ if (!s(n, t)) {
2188
+ m(`"${t}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${n.join("\", \"")}".`);
2189
+ return;
2190
+ }
2191
+ t !== null && t !== "" && this.$el.setAttribute(e, t);
2192
+ }
2193
+ updateTypography(e, t, n, r) {
2194
+ t !== null && t !== "" && t !== "default" && this.$el.classList.toggle(`${e}-${t}`), n !== null && n !== "" && n !== "default" && this.$el.classList.toggle(`${e}-${n}`), this.checkName(r, n) || m(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join("\", \"")}".`);
2195
+ }
2196
+ updateExtended(e, t) {
2197
+ t === null ? this.$el.style.setProperty(`--button-${e}`, "") : this.$el.style.setProperty(`--button-${e}`, "100%");
2198
+ }
2199
+ get $before() {
2200
+ return this.querySelector("[slot=\"before\"]");
2201
+ }
2202
+ get $after() {
2203
+ return this.querySelector("[slot=\"after\"]");
2204
+ }
2205
+ get $iconNotBeforeAfter() {
2206
+ return this.querySelector("px-icon:not([slot=\"before\"], [slot=\"after\"])");
2207
+ }
2208
+ get disabled() {
2209
+ return this.hasAttribute("disabled");
2210
+ }
2211
+ set disabled(e) {
2212
+ this._updateBooleanAttribute("disabled", e);
2213
+ }
2214
+ get variant() {
2215
+ return this.getAttribute("variant");
2216
+ }
2217
+ set variant(e) {
2218
+ this._updateAttribute("variant", e);
2219
+ }
2220
+ get shape() {
2221
+ return this.getAttribute("shape");
2222
+ }
2223
+ set shape(e) {
2224
+ this._updateAttribute("shape", e);
2225
+ }
2226
+ get shapeMobile() {
2227
+ return this.getAttribute("shape--mobile");
2228
+ }
2229
+ set shapeMobile(e) {
2230
+ this._updateAttribute("shape--mobile", e);
2231
+ }
2232
+ get shapeTablet() {
2233
+ return this.getAttribute("shape--tablet");
2234
+ }
2235
+ set shapeTablet(e) {
2236
+ this._updateAttribute("shape--tablet", e);
2237
+ }
2238
+ get shapeLaptop() {
2239
+ return this.getAttribute("shape--laptop");
2240
+ }
2241
+ set shapeLaptop(e) {
2242
+ this._updateAttribute("shape--laptop", e);
2243
+ }
2244
+ get shapeDesktop() {
2245
+ return this.getAttribute("shape--desktop");
2246
+ }
2247
+ set shapeDesktop(e) {
2248
+ this._updateAttribute("shape--desktop", e);
2249
+ }
2250
+ get extended() {
2251
+ return this.hasAttribute("extended");
2252
+ }
2253
+ set extended(e) {
2254
+ this._updateBooleanAttribute("extended", e);
2255
+ }
2256
+ get extendedMobile() {
2257
+ return this.hasAttribute("extended--mobile");
2258
+ }
2259
+ set extendedMobile(e) {
2260
+ this._updateBooleanAttribute("extended--mobile", e);
2261
+ }
2262
+ get extendedTablet() {
2263
+ return this.hasAttribute("extended--tablet");
2264
+ }
2265
+ set extendedTablet(e) {
2266
+ this._updateBooleanAttribute("extended--tablet", e);
2267
+ }
2268
+ get extendedLaptop() {
2269
+ return this.hasAttribute("extended--laptop");
2270
+ }
2271
+ set extendedLaptop(e) {
2272
+ this._updateBooleanAttribute("extended--laptop", e);
2273
+ }
2274
+ get extendedDesktop() {
2275
+ return this.hasAttribute("extended--desktop");
2276
+ }
2277
+ set extendedDesktop(e) {
2278
+ this._updateBooleanAttribute("extended--desktop", e);
2279
+ }
2280
+ get inverted() {
2281
+ return this.hasAttribute("inverted");
2282
+ }
2283
+ set inverted(e) {
2284
+ this._updateBooleanAttribute("inverted", e);
2285
+ }
2286
+ get fontsize() {
2287
+ return this.getAttribute("font-size");
2288
+ }
2289
+ set fontsize(e) {
2290
+ this._updateAttribute("font-size", e);
2291
+ }
2292
+ get color() {
2293
+ return this.getAttribute("color");
2294
+ }
2295
+ set color(e) {
2296
+ this._updateAttribute("color", e);
2297
+ }
2298
+ get fontweight() {
2299
+ return this.getAttribute("font-weight");
2300
+ }
2301
+ set fontweight(e) {
2302
+ this._updateAttribute("font-weight", e);
2303
+ }
2304
+ get title() {
2305
+ return this.getAttribute("title") ?? "";
2306
+ }
2307
+ set title(e) {
2308
+ this._updateAttribute("title", e);
2309
+ }
2310
+ };
2311
+ customElements.get("px-a") || customElements.define("px-a", Z);
2312
+ //#endregion
2313
+ //#region ../../components/Link/src/LinkWrapper.ts
2314
+ var Re = class extends Z {
2315
+ #e;
2316
+ constructor() {
2317
+ super(), this.$el.classList.add("wrapper"), this.#e = new n(this, this.$el, () => this.#t());
2318
+ }
2319
+ connectedCallback() {
2320
+ super.connectedCallback(), this.#e.connect();
2321
+ }
2322
+ disconnectedCallback() {
2323
+ super.disconnectedCallback(), this.#e.disconnect();
2324
+ }
2325
+ attributeChangedCallback(e, t, n) {
2326
+ if (t !== n) switch (e) {
2327
+ case "disabled":
2328
+ super.attributeChangedCallback(e, t, n), n !== null && this.#e.clearInteractiveState();
2329
+ break;
2330
+ default: super.attributeChangedCallback(e, t, n);
2331
+ }
2332
+ }
2333
+ #t() {
2334
+ return !this.hasAttribute("disabled") && this.$el.getAttribute("aria-disabled") !== "true";
2335
+ }
2336
+ };
2337
+ customElements.get("px-a-wrapper") || customElements.define("px-a-wrapper", Re);
2338
+ //#endregion
2339
+ //#region src/mdd-section-item.css?inline
2340
+ var ze = ".mdd-section-item-action-container{align-items:center;display:inline-flex}a{color:inherit;text-decoration:none}a ::slotted([slot=after]){margin-left:var(--px-spacing-2xs-mobile)}a:hover{color:var(--px-color-text-state-hover-default);text-decoration:underline}button{cursor:pointer;font:inherit;color:inherit;text-align:left;width:100%;font-weight:var(--px-font-weight-title);background:0 0;border:none;margin:0;padding:0}a,button{font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-line-height-ratio-l);color:var(--px-color-text-neutral-default);display:block}:is(a,button):focus-visible{outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}@media screen and (width<=47.938rem){a,button{padding:var(--px-spacing-xs-mobile) 0}}@media screen and (width>=48rem) and (width<=64rem){a,button{padding:var(--px-spacing-xs-tablet) 0}}@media screen and (width>=48rem){a,button{font-size:var(--px-text-size-label-m-tablet)}:is(a,button):focus-visible{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}}@media screen and (width>=64.0625rem){a{display:inline-block}a ::slotted([slot=after]){margin-left:var(--px-spacing-2xs-laptop)}a,button{font-size:var(--px-text-size-label-m-laptop)}:is(a,button):focus-visible{outline-offset:var(--px-focus-offset-laptop);outline-width:var(--px-focus-outline-laptop)}}@media screen and (width>=90.0625rem){a ::slotted([slot=after]){margin-left:var(--px-spacing-2xs-desktop)}a,button{font-size:var(--px-text-size-label-m-desktop)}:is(a,button):focus-visible{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}}", Q = new CSSStyleSheet();
2341
+ Q.replaceSync(ze);
2342
+ var $ = class extends HTMLElement {
2343
+ constructor() {
2344
+ super(), this.template = "\n <px-hstack align-items=\"center\" gap=\"default\">\n <span class=\"mdd-section-item-action-container\">\n <slot></slot>\n <slot name=\"after\"></slot>\n </span>\n <px-spacer></px-spacer>\n <px-icon name=\"chevron_right\" from=\"lavender\" size=\"m\"></px-icon>\n </px-hstack>", this.attachShadow({ mode: "open" }), this.shadowRoot.adoptedStyleSheets = [Q], this.internals = this.attachInternals?.(), this.internals && (this.internals.role = "listitem");
2345
+ }
2346
+ static get observedAttributes() {
2347
+ return ["href", "for"];
2348
+ }
2349
+ attributeChangedCallback(e, t, n) {
2350
+ this.updateView(e, n);
2351
+ }
2352
+ updateView(e, t) {
2353
+ e === "href" && this.$link ? this.$link.href = t : e === "href" && !this.$link && t ? (this.shadowRoot.innerHTML = `<a href="${t}">${this.template}</a>`, this.shadowRoot.firstElementChild?.setAttribute("tabindex", "0"), this.$arrowIcon.style.display = "none") : e === "for" && !this.$button && t && (this.shadowRoot.innerHTML = `<button>${this.template}</button>`, this.shadowRoot.firstElementChild?.setAttribute("tabindex", "0"));
2354
+ }
2355
+ connectedCallback() {
2356
+ this.role = "listitem", this.href ? (this.updateView("href", this.href), this.$link && (this.$link.href = this.href)) : this.hasAttribute("for") && (this.updateView("for", this.getAttribute("for")), this.addEventListener("click", this.handleClick)), this.$after && this.$after.localName === "px-icon" && this.configureAfterIcon(this.$after), this.$link && (this.$arrowIcon.style.display = "none");
2357
+ }
2358
+ handleClick() {
2359
+ let e = new CustomEvent("section-item-click", {
2360
+ bubbles: !0,
2361
+ composed: !0,
2362
+ detail: { for: this.getAttribute("for") }
2363
+ });
2364
+ this.dispatchEvent(e);
2365
+ }
2366
+ configureAfterIcon(e) {
2367
+ e.addEventListener("click", () => {
2368
+ this.$link?.focus();
2369
+ }), e.setAttribute("size", "xs"), e.setAttribute("color", "inherit");
2370
+ }
2371
+ get href() {
2372
+ return this.getAttribute("href");
2373
+ }
2374
+ set href(e) {
2375
+ g(this, "href", e);
2376
+ }
2377
+ get $link() {
2378
+ return this.shadowRoot.querySelector("a");
2379
+ }
2380
+ get $button() {
2381
+ return this.shadowRoot.querySelector("button");
2382
+ }
2383
+ get $after() {
2384
+ return this.querySelector("[slot=\"after\"]");
2385
+ }
2386
+ get $arrowIcon() {
2387
+ return this.shadowRoot.querySelector("px-icon[name=\"chevron_right\"]");
2388
+ }
2401
2389
  };
2390
+ customElements.get("px-mdd-section-item") || customElements.define("px-mdd-section-item", $);
2391
+ //#endregion
2392
+ export { K as MddSection, $ as MddSectionItem, W as MegaDropDown };