@proximus/lavender-mega-dropdown 2.0.0-alpha.2 → 2.0.0-alpha.200

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