@proximus/lavender-mega-dropdown 2.0.0-alpha.21 → 2.0.0-alpha.210

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