@proximus/lavender-light 1.4.1-beta.2 → 1.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/lavender-light.cjs.js +1 -1
  2. package/dist/lavender-light.es.js +217 -21
  3. package/dist/lavender-light.umd.js +1 -1
  4. package/package.json +1 -1
package/dist/lavender-light.es.js CHANGED
@@ -84,6 +84,7 @@ class WithExtraAttributes extends HTMLElement {
84
84
  ];
85
85
  }
86
86
  attributeChangedCallback(name, oldValue, newValue) {
87
+ var _a;
87
88
  if (WithExtraAttributes.observedAttributes.indexOf(name) === -1) {
88
89
  return;
89
90
  }
@@ -114,7 +115,7 @@ class WithExtraAttributes extends HTMLElement {
114
115
  name,
115
116
  oldValue,
116
117
  newValue,
117
- this.isGrid ? cssGridAlignSelfValues : flexboxAlignSelfValues
118
+ ((_a = this.parentElement) == null ? void 0 : _a.localName) === "px-grid" ? cssGridAlignSelfValues : flexboxAlignSelfValues
118
119
  );
119
120
  break;
120
121
  case "justify-self":
@@ -193,11 +194,19 @@ class WithExtraAttributes extends HTMLElement {
193
194
  var _a;
194
195
  return (_a = this.parentElement) == null ? void 0 : _a.tagName.toLowerCase();
195
196
  }
196
- get isGrid() {
197
- return this.$parentElementName === "px-grid";
198
- }
199
- get isStack() {
200
- return this.$parentElementName === "px-stack";
197
+ get isInsideGridOrStack() {
198
+ let parent = this.parentElement;
199
+ while (parent) {
200
+ if (parent.localName === "px-grid" || parent.localName === "px-stack" && (parent == null ? void 0 : parent.getAttribute("direction")) === "row") {
201
+ return true;
202
+ }
203
+ if (window.getComputedStyle(parent).display === "contents") {
204
+ parent = parent.parentElement;
205
+ continue;
206
+ }
207
+ break;
208
+ }
209
+ return false;
201
210
  }
202
211
  get grow() {
203
212
  return this.getAttribute("grow");
@@ -456,7 +465,6 @@ class PxElement extends WithExtraAttributes {
456
465
  }
457
466
  }
458
467
  connectedCallback() {
459
- var _a;
460
468
  for (const name of getSupportedPropertyNames(this.nativeName)) {
461
469
  if (name === "constructor" || this.accessorExclusions.includes(name)) {
462
470
  continue;
@@ -476,12 +484,9 @@ class PxElement extends WithExtraAttributes {
476
484
  console.warn(`Could not create property ${name} for`, this.$el, e);
477
485
  }
478
486
  }
479
- if (this.isGrid || this.isStack) {
480
- const parentDirection = (_a = this.parentElement) == null ? void 0 : _a.getAttribute("direction");
487
+ if (this.isInsideGridOrStack) {
481
488
  this.$el.style.display = "block";
482
- if (this.isGrid || this.isStack && parentDirection === "row") {
483
- this.$el.style.height = "100%";
484
- }
489
+ this.$el.style.height = "100%";
485
490
  }
486
491
  }
487
492
  get $el() {
@@ -963,7 +968,6 @@ class AttributeBreakpointHandlerDelegate {
963
968
  }
964
969
  const containerStyles = new CSSStyleSheet();
965
970
  containerStyles.replaceSync(containerCss);
966
- const anchorValues = ["anchor-right", "anchor-left", "anchor-full"];
967
971
  const attributeBreakpointCSSSelector$1 = (attributeName, attributeValue, device) => `:host([${attributeName}${device ? `--${device}` : ""}='${attributeValue}']) .container`;
968
972
  const paddingPrefix = "px-padding";
969
973
  const _Container = class _Container extends PxElement {
@@ -1070,12 +1074,19 @@ const _Container = class _Container extends PxElement {
1070
1074
  if (!this.borderColor) {
1071
1075
  this.borderColor = "main";
1072
1076
  }
1073
- const anchorSlot = this.querySelector("[slot]");
1074
- if (anchorSlot) {
1075
- if (anchorValues.includes(anchorSlot.getAttribute("slot"))) {
1076
- this.shadowRoot.querySelector(".container").classList.toggle("anchored");
1077
- }
1077
+ if (this.$slotAnchor) {
1078
+ this.addAnchorClass();
1078
1079
  }
1080
+ this.contentObserver = new MutationObserver(() => {
1081
+ if (this.$slotAnchor) {
1082
+ this.addAnchorClass();
1083
+ }
1084
+ });
1085
+ this.contentObserver.observe(this, {
1086
+ childList: true,
1087
+ subtree: true,
1088
+ characterData: true
1089
+ });
1079
1090
  this._bgObserver = new IntersectionObserver((entries) => {
1080
1091
  entries.forEach((entry) => {
1081
1092
  var _a;
@@ -1091,6 +1102,7 @@ const _Container = class _Container extends PxElement {
1091
1102
  disconnectedCallback() {
1092
1103
  var _a;
1093
1104
  (_a = this._bgObserver) == null ? void 0 : _a.disconnect();
1105
+ this.contentObserver.disconnect();
1094
1106
  }
1095
1107
  attributeChangedCallback(attrName, oldValue, newValue) {
1096
1108
  if (oldValue !== newValue) {
@@ -1303,6 +1315,14 @@ const _Container = class _Container extends PxElement {
1303
1315
  updateAnchorOffsetStyle(oldValue);
1304
1316
  updateAnchorOffsetStyle(newValue);
1305
1317
  }
1318
+ addAnchorClass() {
1319
+ if (!this.$el.classList.contains("anchored")) {
1320
+ this.$el.classList.add("anchored");
1321
+ }
1322
+ }
1323
+ get $slotAnchor() {
1324
+ return this.querySelector('[slot^="anchor"]');
1325
+ }
1306
1326
  get padding() {
1307
1327
  return this.getAttribute("padding");
1308
1328
  }
@@ -2657,6 +2677,7 @@ class Icon extends WithExtraAttributes {
2657
2677
  <use xlink:href="#icon-${this.name}"></use>
2658
2678
  </svg>`);
2659
2679
  this.shadowRoot.innerHTML = __privateGet(this, _template).call(this);
2680
+ this.role = "img";
2660
2681
  __privateSet(this, _internals, (_a = this.attachInternals) == null ? void 0 : _a.call(this));
2661
2682
  if (__privateGet(this, _internals)) {
2662
2683
  __privateGet(this, _internals).role = "img";
@@ -2686,8 +2707,10 @@ class Icon extends WithExtraAttributes {
2686
2707
  }
2687
2708
  if (newValue) {
2688
2709
  __privateGet(this, _internals).ariaHidden = "false";
2710
+ this.ariaHidden = "false";
2689
2711
  } else {
2690
2712
  __privateGet(this, _internals).ariaHidden = "true";
2713
+ this.ariaHidden = "true";
2691
2714
  }
2692
2715
  break;
2693
2716
  }
@@ -2713,6 +2736,7 @@ class Icon extends WithExtraAttributes {
2713
2736
  }
2714
2737
  if (!this.ariaLabel && __privateGet(this, _internals)) {
2715
2738
  __privateGet(this, _internals).ariaHidden = "true";
2739
+ this.ariaHidden = "true";
2716
2740
  }
2717
2741
  }
2718
2742
  updateAttribute(attrName, oldValue, newValue, attrValues) {
@@ -2794,7 +2818,7 @@ _template = new WeakMap();
2794
2818
  if (!customElements.get("px-icon")) {
2795
2819
  customElements.define("px-icon", Icon);
2796
2820
  }
2797
- const headingCss = "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)}}";
2821
+ const headingCss = "h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{margin:0;font-family:var(--px-font-family);color:var(--heading-color-default, var(--px-color-text-brand-default));text-align:var(--heading-text-align--mobile, left);font-size:var(--px-text-size-heading-s-mobile);line-height:var(--px-line-height-ratio-l);font-weight:var(--px-font-weight-title)}::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6){margin-bottom:var(--px-spacing-heading-to-content-mobile)}:host([inverted]) h1,:host([inverted]) .style-title-4xl,:host([inverted]) ::slotted(h1),:host([inverted]) h2,:host([inverted]) .style-title-3xl,:host([inverted]) ::slotted(h2),:host([inverted]) h3,:host([inverted]) .style-title-2xl,:host([inverted]) ::slotted(h3),:host([inverted]) h4,:host([inverted]) .style-title-xl,:host([inverted]) ::slotted(h4),:host([inverted]) h5,:host([inverted]) .style-title-l,:host([inverted]) ::slotted(h5),:host([inverted]) h6,:host([inverted]) .style-title-m,:host([inverted]) ::slotted(h6),:host([inverted]) .style-title-s,:host([inverted]) .style-subtitle{color:var(--heading-color-inverted, var(--px-color-text-brand-inverted))}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-heading-3xl-mobile);line-height:var(--px-line-height-ratio-s);font-weight:var(--px-font-weight-title-large)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-2xl-mobile);line-height:var(--px-line-height-ratio-s);font-weight:var(--px-font-weight-title-large)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-xl-mobile);line-height:var(--px-line-height-ratio-s)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-l-mobile)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-heading-m-mobile)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-heading-base-mobile)}.style-subtitle{font-size:var(--px-text-size-heading-l-mobile);font-weight:var(--px-font-weight-subtitle)}.style-title-s{font-size:var(--px-text-size-heading-s-mobile)}@media only screen and (min-width: 768px){::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6){margin-bottom:var(--px-spacing-heading-to-content-tablet)}h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{text-align:var(--heading-text-align--tablet, left)}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-heading-5xl-desktop)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-4xl-desktop)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-2xl-desktop)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-xl-desktop)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-heading-l-desktop)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-heading-m-desktop)}.style-title-s{font-size:var(--px-text-size-heading-base-desktop)}.style-subtitle{font-size:var(--px-text-size-heading-xl-desktop)}}@media only screen and (min-width: 1025px){::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6){margin-bottom:var(--px-spacing-heading-to-content-laptop)}h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{text-align:var(--heading-text-align--laptop, left)}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-heading-5xl-desktop)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-4xl-desktop)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-2xl-desktop)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-xl-desktop)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-heading-l-desktop)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-heading-m-desktop)}.style-title-s{font-size:var(--px-text-size-heading-base-desktop)}.style-subtitle{font-size:var(--px-text-size-heading-xl-desktop)}}@media screen and (min-width: 1441px){::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6){margin-bottom:var(--px-spacing-heading-to-content-desktop)}h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{text-align:var(--heading-text-align--desktop, left)}}";
2798
2822
  const typographyCss = ".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)}";
2799
2823
  const headingStyles$1 = new CSSStyleSheet();
2800
2824
  headingStyles$1.replaceSync(headingCss);
@@ -3013,7 +3037,7 @@ let H6 = _H6;
3013
3037
  if (!customElements.get("px-h6")) {
3014
3038
  customElements.define("px-h6", H6);
3015
3039
  }
3016
- const paragraphCss = "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}}";
3040
+ const paragraphCss = "p,::slotted(p){font-family:var(--px-font-family);color:var(--px-color-text-neutral-default);font-size:var(--px-text-size-body-m-mobile);font-weight:var(--px-font-weight-body);line-height:var(--px-line-height-ratio-l);margin:0}::slotted(p){margin-bottom:var(--px-spacing-xs-mobile)}.text-align-left{text-align:left}.text-align-center{text-align:center}.text-align-right{text-align:right}:host([inverted]) p,:host([inverted]) ::slotted(p){color:var(--px-color-text-neutral-inverted)}@media only screen and (max-width: 768px){.text-align-left--mobile{text-align:left}.text-align-center--mobile{text-align:center}.text-align-right--mobile{text-align:right}}@media only screen and (min-width: 768px){p,::slotted(p){font-size:var(--px-text-size-body-m-desktop)}::slotted(p){margin-bottom:var(--px-spacing-xs-tablet)}.text-align-left--tablet{text-align:left}.text-align-center--tablet{text-align:center}.text-align-right--tablet{text-align:right}}@media only screen and (min-width: 1025px){p,::slotted(p){font-size:var(--px-text-size-body-m-desktop)}::slotted(p){margin-bottom:var(--px-spacing-xs-laptop)}.text-align-left--laptop{text-align:left}.text-align-center--laptop{text-align:center}.text-align-right--laptop{text-align:right}}@media only screen and (min-width: 90.0625em){::slotted(p){margin-bottom:var(--px-spacing-xs-desktop)}}";
3017
3041
  const paragraphStyles = new CSSStyleSheet();
3018
3042
  const typographyStyles$1 = new CSSStyleSheet();
3019
3043
  const headingStyles = new CSSStyleSheet();
@@ -3636,6 +3660,155 @@ let Button = _Button;
3636
3660
  if (!customElements.get("px-button")) {
3637
3661
  customElements.define("px-button", Button);
3638
3662
  }
3663
+ const buttonIconCss = ".btn-icon{font-size:var(--px-font-size-base);display:inline-flex;width:var(--px-size-l);height:var(--px-size-l);vertical-align:middle;align-items:center;justify-content:center;cursor:pointer;--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition);background:var(--px-color-background-container-primary-default);color:var(--px-color-icon-brand-inverted);border-radius:var(--px-radius-pill);padding:var(--px-padding-xs-mobile);border:var(--px-size-border-m) solid transparent}.btn-icon,.btn-icon *{box-sizing:border-box}.btn-icon ::slotted(px-icon){line-height:0}.btn-icon:hover:not([disabled],[aria-disabled=true],.btn-icon--state-loading){background:var(--px-color-background-state-hover-bordered-default);color:var(--px-color-icon-brand-default);border-color:var(--px-color-border-state-hover-default)}.btn-icon:active:not([disabled],[aria-disabled=true],.btn-icon--state-loading){background:var(--px-color-background-state-active-inverted);color:var(--px-color-icon-state-active-default);border-color:var(--px-color-border-state-active-default)}.btn-icon: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-icon[disabled],.btn-icon[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-icon-state-disabled-default);cursor:default;pointer-events:none}.btn-icon.btn-icon--state-loading{background:var(--px-color-background-state-disabled-default);color:var(--px-color-icon-brand-default);cursor:inherit}.btn-icon--size-small{padding:var(--px-padding-2xs-mobile);width:var(--px-size-m);height:var(--px-size-m)}.btn-icon--variant-secondary{background-color:var(--px-color-background-container-secondary-default);color:var(--px-color-icon-brand-default)}.btn-icon--variant-naked{background-color:transparent;color:var(--px-color-icon-brand-default);width:auto;height:auto}:host([inverted]) .btn-icon{background:var(--px-color-background-container-primary-inverted);color:var(--px-color-icon-brand-default)}:host([inverted]) .btn-icon:hover:not([disabled],[aria-disabled=true],.btn-icon--state-loading){background:var(--px-color-background-state-hover-bordered-inverted);color:var(--px-color-icon-brand-inverted);border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) .btn-icon:active:not([disabled],[aria-disabled=true],.btn-icon--state-loading){background:var(--px-color-background-state-hover-default);color:var(--px-color-icon-state-active-inverted);border-color:var(--px-color-border-state-active-inverted)}:host([inverted]) .btn-icon:focus-visible:not([disabled],[aria-disabled=true]){outline-color:var(--px-color-border-focus-outline-inverted)}:host([inverted]) .btn-icon[disabled],:host([inverted]) .btn-icon[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-icon-state-disabled-inverted)}:host([inverted]) .btn-icon.btn-icon--state-loading{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-icon-brand-inverted);border-color:transparent}:host([inverted]) .btn-icon.btn-icon--variant-naked{background-color:transparent;color:var(--px-color-icon-brand-inverted)}:host([inverted]) .btn-icon--variant-secondary{background-color:var(--px-color-background-container-secondary-inverted);color:var(--px-color-icon-brand-inverted)}@media only screen and (min-width: 768px){.btn-icon{padding:var(--px-padding-xs-desktop)}.btn-icon:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}.btn-icon--size-small{padding:var(--px-padding-2xs-desktop)}}@media only screen and (min-width: 1025px){.btn-icon{padding:var(--px-padding-xs-desktop)}.btn-icon:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}.btn-icon--size-small{padding:var(--px-padding-2xs-desktop)}}";
3664
+ const buttonIconStyles = new CSSStyleSheet();
3665
+ buttonIconStyles.replaceSync(buttonIconCss);
3666
+ const buttonIconSizeValues = ["", "default", "small"];
3667
+ const buttonIconVariantValues = [
3668
+ "",
3669
+ "default",
3670
+ "secondary",
3671
+ "naked"
3672
+ ];
3673
+ const _ButtonIcon = class _ButtonIcon extends PxElement {
3674
+ constructor() {
3675
+ super(buttonIconStyles);
3676
+ this.template = () => `<slot></slot>`;
3677
+ const $root = document.createElement(this.nativeName);
3678
+ $root.classList.add("btn-icon");
3679
+ $root.innerHTML = this.template();
3680
+ this.shadowRoot.appendChild($root);
3681
+ }
3682
+ static get observedAttributes() {
3683
+ return [
3684
+ ...super.observedAttributes,
3685
+ "inverted",
3686
+ "loading",
3687
+ "size",
3688
+ "variant",
3689
+ "aria-expanded"
3690
+ ];
3691
+ }
3692
+ connectedCallback() {
3693
+ super.connectedCallback();
3694
+ const icon = this.querySelector("px-icon");
3695
+ if (icon) {
3696
+ const iconSize = icon.getAttribute("size");
3697
+ const iconColor = icon.getAttribute("color");
3698
+ icon.addEventListener("click", () => {
3699
+ this.$el.focus();
3700
+ });
3701
+ if (!iconSize) {
3702
+ icon.setAttribute("size", "s");
3703
+ }
3704
+ if (this.size === "small") {
3705
+ icon.setAttribute("size", "xs");
3706
+ }
3707
+ if (!iconColor) {
3708
+ icon.setAttribute("color", "inherit");
3709
+ }
3710
+ }
3711
+ transferAccessibilityAttributes(this, this.$el, false);
3712
+ }
3713
+ attributeChangedCallback(attrName, oldValue, newValue) {
3714
+ if (oldValue !== newValue) {
3715
+ switch (attrName) {
3716
+ case "loading":
3717
+ this.updateLoading();
3718
+ break;
3719
+ case "size":
3720
+ this.updateSize(oldValue, newValue);
3721
+ break;
3722
+ case "variant":
3723
+ this.updateVariant(oldValue, newValue);
3724
+ break;
3725
+ case "aria-expanded":
3726
+ if (newValue) {
3727
+ this.$el.setAttribute("aria-expanded", newValue);
3728
+ this.removeAttribute("aria-expanded");
3729
+ }
3730
+ break;
3731
+ default:
3732
+ super.attributeChangedCallback(attrName, oldValue, newValue);
3733
+ break;
3734
+ }
3735
+ }
3736
+ }
3737
+ _toggleClass(oldValue, newValue) {
3738
+ if (oldValue !== null && oldValue !== "" && oldValue !== "default") {
3739
+ this.$el.classList.toggle(oldValue);
3740
+ }
3741
+ if (newValue !== null && newValue !== "" && newValue !== "default") {
3742
+ this.$el.classList.toggle(newValue);
3743
+ }
3744
+ }
3745
+ updateLoading() {
3746
+ this.$el.classList.toggle(`btn-icon--state-loading`);
3747
+ }
3748
+ updateSize(oldValue, newValue) {
3749
+ if (!this.checkName(buttonIconSizeValues, newValue)) {
3750
+ console.error(`${newValue} is not a valid size value`);
3751
+ } else {
3752
+ if (oldValue !== null && oldValue !== "" && oldValue !== "default") {
3753
+ this.$el.classList.toggle(`btn-icon--size-${oldValue}`);
3754
+ }
3755
+ if (newValue !== null && newValue !== "" && newValue !== "default") {
3756
+ this.$el.classList.toggle(`btn-icon--size-${newValue}`);
3757
+ }
3758
+ }
3759
+ }
3760
+ updateVariant(oldValue, newValue) {
3761
+ if (!this.checkName(buttonIconVariantValues, newValue)) {
3762
+ console.error(`${newValue} is not a valid variant value`);
3763
+ } else {
3764
+ if (oldValue !== null && oldValue !== "" && oldValue !== "default") {
3765
+ this.$el.classList.toggle(`btn-icon--variant-${oldValue}`);
3766
+ }
3767
+ if (newValue !== null && newValue !== "" && newValue !== "default") {
3768
+ this.$el.classList.toggle(`btn-icon--variant-${newValue}`);
3769
+ }
3770
+ }
3771
+ }
3772
+ get inverted() {
3773
+ return this.getAttribute("inverted");
3774
+ }
3775
+ set inverted(value) {
3776
+ this.setAttribute("inverted", value);
3777
+ }
3778
+ get loading() {
3779
+ return this.getAttribute("loading");
3780
+ }
3781
+ set loading(value) {
3782
+ this.setAttribute("loading", value);
3783
+ }
3784
+ get size() {
3785
+ return this.getAttribute("size");
3786
+ }
3787
+ set size(value) {
3788
+ this.setAttribute("size", value);
3789
+ }
3790
+ get variant() {
3791
+ return this.getAttribute("variant");
3792
+ }
3793
+ set variant(value) {
3794
+ this.setAttribute("variant", value);
3795
+ }
3796
+ get ariaExpanded() {
3797
+ return this.getAttribute("aria-expanded");
3798
+ }
3799
+ set ariaExpanded(value) {
3800
+ if (value) {
3801
+ this.setAttribute("aria-expanded", value);
3802
+ } else {
3803
+ this.removeAttribute("aria-expanded");
3804
+ }
3805
+ }
3806
+ };
3807
+ _ButtonIcon.nativeName = "button";
3808
+ let ButtonIcon = _ButtonIcon;
3809
+ if (!customElements.get("px-button-icon")) {
3810
+ customElements.define("px-button-icon", ButtonIcon);
3811
+ }
3639
3812
  const styles$6 = ':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)}}';
3640
3813
  const styleSheet$3 = new CSSStyleSheet();
3641
3814
  styleSheet$3.replaceSync(styles$6);
@@ -5040,10 +5213,12 @@ class CellCheckbox extends WithExtraAttributes {
5040
5213
  this.shadowRoot.innerHTML = this.template();
5041
5214
  this.internals = (_a = this.attachInternals) == null ? void 0 : _a.call(this);
5042
5215
  this.tabIndex = 0;
5216
+ this.role = "checkbox";
5043
5217
  if (this.internals) {
5044
5218
  this.internals.role = "checkbox";
5045
5219
  this.internals.ariaChecked = `${this.checked}`;
5046
5220
  }
5221
+ this.ariaChecked = `${this.checked}`;
5047
5222
  }
5048
5223
  connectedCallback() {
5049
5224
  if (this.$slotVisual) {
@@ -5160,6 +5335,7 @@ class CellCheckbox extends WithExtraAttributes {
5160
5335
  if (this.internals) {
5161
5336
  this.internals.ariaDisabled = "true";
5162
5337
  }
5338
+ this.ariaDisabled = "true";
5163
5339
  this.$cell.disabled = true;
5164
5340
  this.$checkbox.setAttribute("disabled", "");
5165
5341
  this.$children.forEach((child) => {
@@ -5172,6 +5348,7 @@ class CellCheckbox extends WithExtraAttributes {
5172
5348
  if (this.internals) {
5173
5349
  this.internals.ariaDisabled = "false";
5174
5350
  }
5351
+ this.ariaDisabled = "false";
5175
5352
  this.$cell.disabled = false;
5176
5353
  this.$checkbox.removeAttribute("disabled");
5177
5354
  this.$children.forEach((child) => {
@@ -5188,6 +5365,7 @@ class CellCheckbox extends WithExtraAttributes {
5188
5365
  if (this.internals) {
5189
5366
  this.internals.ariaChecked = "false";
5190
5367
  }
5368
+ this.ariaChecked = "false";
5191
5369
  this.checked = false;
5192
5370
  if (this.$checkbox) {
5193
5371
  this.$checkbox.removeAttribute("checked");
@@ -5196,6 +5374,7 @@ class CellCheckbox extends WithExtraAttributes {
5196
5374
  if (this.internals) {
5197
5375
  this.internals.ariaChecked = "true";
5198
5376
  }
5377
+ this.ariaChecked = "true";
5199
5378
  this.checked = true;
5200
5379
  if (this.$checkbox) {
5201
5380
  this.$checkbox.setAttribute("checked", "");
@@ -5443,10 +5622,12 @@ class CellSwitch extends WithExtraAttributes {
5443
5622
  this.shadowRoot.innerHTML = this.template();
5444
5623
  this.internals = (_a = this.attachInternals) == null ? void 0 : _a.call(this);
5445
5624
  this.tabIndex = 0;
5625
+ this.role = "checkbox";
5446
5626
  if (this.internals) {
5447
5627
  this.internals.role = "checkbox";
5448
5628
  this.internals.ariaChecked = `${this.checked}`;
5449
5629
  }
5630
+ this.ariaChecked = `${this.checked}`;
5450
5631
  }
5451
5632
  connectedCallback() {
5452
5633
  if (this.$slotVisual) {
@@ -5548,6 +5729,7 @@ class CellSwitch extends WithExtraAttributes {
5548
5729
  if (this.internals) {
5549
5730
  this.internals.ariaDisabled = "true";
5550
5731
  }
5732
+ this.ariaDisabled = "true";
5551
5733
  this.$cell.disabled = true;
5552
5734
  this.$switch.setAttribute("disabled", "");
5553
5735
  this.$children.forEach((child) => {
@@ -5560,6 +5742,7 @@ class CellSwitch extends WithExtraAttributes {
5560
5742
  if (this.internals) {
5561
5743
  this.internals.ariaDisabled = "false";
5562
5744
  }
5745
+ this.ariaDisabled = "false";
5563
5746
  this.$cell.disabled = false;
5564
5747
  this.$switch.removeAttribute("disabled");
5565
5748
  this.$children.forEach((child) => {
@@ -5576,6 +5759,7 @@ class CellSwitch extends WithExtraAttributes {
5576
5759
  if (this.internals) {
5577
5760
  this.internals.ariaChecked = "false";
5578
5761
  }
5762
+ this.ariaChecked = "false";
5579
5763
  this.checked = false;
5580
5764
  if (this.$switch) {
5581
5765
  this.$switch.removeAttribute("checked");
@@ -5584,6 +5768,7 @@ class CellSwitch extends WithExtraAttributes {
5584
5768
  if (this.internals) {
5585
5769
  this.internals.ariaChecked = "true";
5586
5770
  }
5771
+ this.ariaChecked = "true";
5587
5772
  this.checked = true;
5588
5773
  if (this.$switch) {
5589
5774
  this.$switch.setAttribute("checked", "");
@@ -5846,10 +6031,12 @@ class Radio extends RadioBase {
5846
6031
  super();
5847
6032
  this.internals = (_a = this.attachInternals) == null ? void 0 : _a.call(this);
5848
6033
  this.tabIndex = ((_b = this.parentElement) == null ? void 0 : _b.querySelector("px-radio")) === this ? 0 : -1;
6034
+ this.role = "radio";
5849
6035
  if (this.internals) {
5850
6036
  this.internals.role = "radio";
5851
6037
  this.internals.ariaChecked = `${this.checked}`;
5852
6038
  }
6039
+ this.ariaChecked = `${this.checked}`;
5853
6040
  }
5854
6041
  static get observedAttributes() {
5855
6042
  return [...super.observedAttributes, "state", "variant", "inverted"];
@@ -5947,11 +6134,13 @@ class Radio extends RadioBase {
5947
6134
  if (this.internals) {
5948
6135
  this.internals.ariaChecked = "true";
5949
6136
  }
6137
+ this.ariaChecked = "true";
5950
6138
  } else {
5951
6139
  this.tabIndex = -1;
5952
6140
  if (this.internals) {
5953
6141
  this.internals.ariaChecked = "false";
5954
6142
  }
6143
+ this.ariaChecked = "false";
5955
6144
  }
5956
6145
  if (checked) {
5957
6146
  this.dispatchEvent(
@@ -6332,10 +6521,12 @@ class CellRadio extends WithExtraAttributes {
6332
6521
  super(commonStyleSheet);
6333
6522
  this.shadowRoot.innerHTML = this.template();
6334
6523
  this.internals = (_a = this.attachInternals) == null ? void 0 : _a.call(this);
6524
+ this.role = "radio";
6335
6525
  if (this.internals) {
6336
6526
  this.internals.role = "radio";
6337
6527
  this.internals.ariaChecked = `${this.checked}`;
6338
6528
  }
6529
+ this.ariaChecked = `${this.checked}`;
6339
6530
  }
6340
6531
  connectedCallback() {
6341
6532
  var _a;
@@ -6456,6 +6647,7 @@ class CellRadio extends WithExtraAttributes {
6456
6647
  if (this.internals) {
6457
6648
  this.internals.ariaDisabled = "true";
6458
6649
  }
6650
+ this.ariaDisabled = "true";
6459
6651
  this.$cell.disabled = true;
6460
6652
  this.$radio.setAttribute("disabled", "");
6461
6653
  this.$children.forEach((child) => {
@@ -6468,6 +6660,7 @@ class CellRadio extends WithExtraAttributes {
6468
6660
  if (this.internals) {
6469
6661
  this.internals.ariaDisabled = "false";
6470
6662
  }
6663
+ this.ariaDisabled = "false";
6471
6664
  this.$cell.disabled = false;
6472
6665
  this.$radio.removeAttribute("disabled");
6473
6666
  this.$children.forEach((child) => {
@@ -6484,6 +6677,7 @@ class CellRadio extends WithExtraAttributes {
6484
6677
  if (this.internals) {
6485
6678
  this.internals.ariaChecked = "false";
6486
6679
  }
6680
+ this.ariaChecked = "false";
6487
6681
  this.tabIndex = -1;
6488
6682
  this.checked = false;
6489
6683
  if (this.$radio) {
@@ -6493,6 +6687,7 @@ class CellRadio extends WithExtraAttributes {
6493
6687
  if (this.internals) {
6494
6688
  this.internals.ariaChecked = "true";
6495
6689
  }
6690
+ this.ariaChecked = "true";
6496
6691
  this.tabIndex = 0;
6497
6692
  this.checked = true;
6498
6693
  if (this.$radio) {
@@ -6733,6 +6928,7 @@ class HeaderItem extends WithExtraAttributes {
6733
6928
  this.shadowRoot.innerHTML = this.template();
6734
6929
  this.shadowRoot.adoptedStyleSheets = [stylesheet$3];
6735
6930
  this.internals = (_a = this.attachInternals) == null ? void 0 : _a.call(this);
6931
+ this.role = "listitem";
6736
6932
  if (this.internals) {
6737
6933
  this.internals.role = "listitem";
6738
6934
  }
@@ -7364,9 +7560,9 @@ class Header extends WithExtraAttributes {
7364
7560
  });
7365
7561
  this.shadowRoot.innerHTML = this.template;
7366
7562
  this.internals = (_a = this.attachInternals) == null ? void 0 : _a.call(this);
7563
+ this.role = "navigation";
7367
7564
  if (this.internals) {
7368
7565
  this.internals.role = "navigation";
7369
- this.internals.ariaOrientation = "horizontal";
7370
7566
  }
7371
7567
  }
7372
7568
  connectedCallback() {