@proximus/lavender-heading 1.2.0-alpha.44 → 1.2.0-alpha.47

package/dist/index.es.js

@@ -0,0 +1,201 @@
+import { PxElement as k, textalignValues as A, colorValues as w, headingValues as $ } from "@proximus/lavender-common";
+const C = "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-font-line-height-m);font-weight:700}: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-5xl-mobile);line-height:var(--px-font-line-height-s);font-weight:900}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-4xl-mobile);line-height:var(--px-font-line-height-s);font-weight:900}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-3xl-mobile);line-height:var(--px-font-line-height-s)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-2xl-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:300}.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-3xl-desktop)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-2xl-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)}}@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-3xl-desktop)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-2xl-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)}}@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)}}", S = ":host>*:first-child{--font-weight-light: 300;--font-weight-regular: 400;--font-weight-bold: 700;--font-weight-extrabold: 900}.color-inherit{color:inherit}.color-brand{color:var(--px-color-text-brand-default)}.color-action-neutral{color:var(--px-color-text-neutral-default)}.color-action-hover{color:var(--px-color-text-state-hover-default)}.color-action-active{color:var(--px-color-text-state-active-default)}.color-action-disabled{color:var(--px-color-text-state-disabled-default)}.color-body-neutral-strong{color:var(--px-color-text-neutral-default)}.color-body-neutral-weak{color:var(--px-color-text-dimmed-default)}.color-heading-brand{color:var(--px-color-text-brand-default)}.color-heading-neutral{color:var(--px-color-text-neutral-default)}.color-purpose-success{color:var(--px-color-text-purpose-success-default)}.color-purpose-warning{color:var(--px-color-text-purpose-warning-default)}.color-purpose-error{color:var(--px-color-text-purpose-error-default)}.color-purpose-unlimited{color:var(--px-color-text-purpose-unlimited-default)}.color-purpose-promo{color:var(--px-color-text-purpose-promo-default)}:host([inverted]) .color-inherit{color:inherit}:host([inverted]) .color-brand{color:var(--px-color-text-brand-inverted)}:host([inverted]) .color-action-neutral{color:var(--px-color-text-neutral-inverted)}:host([inverted]) .color-action-hover{color:var(--px-color-text-state-hover-inverted)}:host([inverted]) .color-action-active{color:var(--px-color-text-state-active-inverted)}:host([inverted]) .color-action-disabled{color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .color-body-neutral-strong{color:var(--px-color-text-neutral-inverted)}:host([inverted]) .color-body-neutral-weak{color:var(--px-color-text-dimmed-inverted)}:host([inverted]) .color-heading-brand{color:var(--px-color-text-brand-inverted)}:host([inverted]) .color-heading-neutral{color:var(--px-color-text-neutral-inverted)}:host([inverted]) .color-purpose-success{color:var(--px-color-text-purpose-success-inverted)}:host([inverted]) .color-purpose-warning{color:var(--px-color-text-purpose-warning-inverted)}:host([inverted]) .color-purpose-error{color:var(--px-color-text-purpose-error-inverted)}:host([inverted]) .color-purpose-unlimited{color:var(--px-color-text-purpose-unlimited-inverted)}:host([inverted]) .color-purpose-promo{color:var(--px-color-text-purpose-promo-inverted)}.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)}@media only screen and (min-width: 768px){.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)}}@media only screen and (min-width: 1025px){.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-weight-inherit{font-weight:inherit}.font-weight-normal{font-weight:var(--font-weight-regular)}.font-weight-bold{font-weight:var(--font-weight-bold)}.font-weight-extrabold{font-weight:var(--font-weight-extrabold)}.font-weight-light{font-weight:var(--font-weight-light)}", y = new CSSStyleSheet();
+y.replaceSync(C);
+const m = new CSSStyleSheet();
+m.replaceSync(S);
+class r extends k {
+  template() {
+    return "<slot></slot>";
+  }
+  constructor(t) {
+    super(y, m);
+    const e = document.createElement(t);
+    e.innerHTML = this.template(), this.shadowRoot.appendChild(e);
+  }
+  static get observedAttributes() {
+    return [
+      ...super.observedAttributes,
+      "variant",
+      "color",
+      "text-align",
+      "text-align--mobile",
+      "text-align--tablet",
+      "text-align--laptop",
+      "text-align--desktop",
+      "inverted"
+    ];
+  }
+  attributeChangedCallback(t, e, i) {
+    if (e !== i)
+      switch (t) {
+        case "variant":
+          this.updateAttribute(t, e, i, $);
+          break;
+        case "color":
+          this.updateColor(e, i, w);
+          break;
+        case "text-align":
+        case "text-align--mobile":
+        case "text-align--tablet":
+        case "text-align--laptop":
+        case "text-align--desktop":
+          this.updateTextAlign(t, e, i, A);
+          break;
+        default:
+          super.attributeChangedCallback(t, e, i);
+          break;
+      }
+  }
+  toggleClass(t, e) {
+    t !== null && t !== "" && t !== "default" && this.$el.classList.toggle(`style-${t}`), e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`style-${e}`);
+  }
+  checkName(t, e) {
+    return t.includes(e);
+  }
+  updateAttribute(t, e, i, l) {
+    this.checkName(l, i) ? this.toggleClass(e, i) : console.error(
+      `${i} is not an allowed "${t}" value for`,
+      this.$el
+    );
+  }
+  updateColor(t, e, i) {
+    if (!this.checkName(i, e)) {
+      console.error("Bad color value for", this.$el);
+      return;
+    }
+    const l = (o) => {
+      o !== null && o !== "" && o !== "default" && (this.$el.style.setProperty(
+        "--heading-color-default",
+        `var(--px-text-color-${o}-default)`
+      ), this.$el.style.setProperty(
+        "--heading-color-inverted",
+        `var(--px-text-color-${o}-inverted)`
+      ));
+    };
+    l(t), l(e);
+  }
+  updateTextAlign(t, e, i, l) {
+    if (!this.checkName(l, i)) {
+      console.error(`Bad ${t} value for`, this.$el);
+      return;
+    }
+    const o = (s, n) => {
+      n !== null && n !== "" && n !== "default" && this.$el.style.setProperty(
+        `--heading-text-align--${s}`,
+        n
+      );
+    };
+    if (t === "text-align")
+      ["mobile", "tablet", "laptop", "desktop"].forEach((s) => {
+        o(s, e), o(s, i);
+      });
+    else {
+      const s = t.split("--")[1];
+      o(s, e), o(s, i);
+    }
+  }
+  get variant() {
+    return this.getAttribute("variant");
+  }
+  set variant(t) {
+    this.setAttribute("variant", t);
+  }
+  get color() {
+    return this.getAttribute("color");
+  }
+  set color(t) {
+    this.setAttribute("color", t);
+  }
+  get textAlign() {
+    return this.getAttribute("text-align");
+  }
+  set textAlign(t) {
+    this.setAttribute("text-align", t);
+  }
+  get textAlignMobile() {
+    return this.getAttribute("text-align--mobile");
+  }
+  set textAlignMobile(t) {
+    this.setAttribute("text-align--mobile", t);
+  }
+  get textAlignTablet() {
+    return this.getAttribute("text-align--tablet");
+  }
+  set textAlignTablet(t) {
+    this.setAttribute("text-align--tablet", t);
+  }
+  get textAlignLaptop() {
+    return this.getAttribute("text-align--laptop");
+  }
+  set textAlignLaptop(t) {
+    this.setAttribute("text-align--laptop", t);
+  }
+  get textAlignDesktop() {
+    return this.getAttribute("text-align--desktop");
+  }
+  set textAlignDesktop(t) {
+    this.setAttribute("text-align--desktop", t);
+  }
+  get inverted() {
+    return this.getAttribute("inverted");
+  }
+  set inverted(t) {
+    this.setAttribute("inverted", t);
+  }
+}
+const g = class g extends r {
+  constructor() {
+    super("h1");
+  }
+};
+g.nativeName = "h1";
+let a = g;
+customElements.define("px-h1", a);
+const v = class v extends r {
+  constructor() {
+    super("h2");
+  }
+};
+v.nativeName = "h2";
+let d = v;
+customElements.define("px-h2", d);
+const f = class f extends r {
+  constructor() {
+    super("h3");
+  }
+};
+f.nativeName = "h3";
+let h = f;
+customElements.define("px-h3", h);
+const z = class z extends r {
+  constructor() {
+    super("h4");
+  }
+};
+z.nativeName = "h4";
+let x = z;
+customElements.define("px-h4", x);
+const u = class u extends r {
+  constructor() {
+    super("h5");
+  }
+};
+u.nativeName = "h5";
+let p = u;
+customElements.define("px-h5", p);
+const b = class b extends r {
+  constructor() {
+    super("h6");
+  }
+};
+b.nativeName = "h6";
+let c = b;
+customElements.define("px-h6", c);
+export {
+  a as H1,
+  d as H2,
+  h as H3,
+  x as H4,
+  p as H5,
+  c as H6
+};

package/package.json

@@ -1,46 +1,20 @@
 {
   "name": "@proximus/lavender-heading",
-  "version": "1.2.0-alpha.44",
+  "version": "1.2.0-alpha.47",
   "description": "",
-  "main": "dist/index.js",
-  "exports": {
-    ".": {
-      "types": "./src/index.ts",
-      "development": "./src/index.ts",
-      "default": "./dist/index.js"
-    },
-    "./src/*.css": {
-      "development": "src/*.css"
-    }
-  },
+  "main": "dist/index.es.js",
   "files": [
     "dist"
   ],
   "type": "module",
   "scripts": {
-    "build": "rm -rf dist;tsc; vite build",
+    "transform-package-json": "node ../../../scripts/tranformPackageJson.js package.json dist/far/away",
+    "clean": "rm -rf dist",
+    "build": "npm run clean && tsc && NODE_ENV=development vite build && npm run transform-package-json",
     "test": "vitest run --coverage"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "7683b6952d1da07fe58b0f4ddef292e3954ab85d",
-  "lerna": {
-    "command": {
-      "publish": {
-        "assets": [
-          "CHANGELOG.md",
-          "package.json",
-          "dist/*.js",
-          "dist/*.cjs",
-          "dist/css/**/*.css",
-          "dist/js/**/*.js",
-          "dist/*.svg",
-          "dist/*.ttf",
-          "dist/glyphmap.json",
-          "dist/*.d.ts"
-        ]
-      }
-    }
-  }
+  "gitHead": "460ebd4c7e0171baabc0871a7058f475b5c9adbb"
 }

package/dist/index.js

@@ -1,201 +0,0 @@
-import { PxElement as k, textalignValues as A, colorValues as w, headingValues as $ } from "@proximus/lavender-common";
-const C = "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-font-line-height-m);font-weight:700}: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-5xl-mobile);line-height:var(--px-font-line-height-s);font-weight:900}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-4xl-mobile);line-height:var(--px-font-line-height-s);font-weight:900}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-3xl-mobile);line-height:var(--px-font-line-height-s)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-2xl-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:300}.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-3xl-desktop)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-2xl-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)}}@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-3xl-desktop)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-2xl-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)}}@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)}}", S = ":host>*:first-child{--font-weight-light: 300;--font-weight-regular: 400;--font-weight-bold: 700;--font-weight-extrabold: 900}.color-inherit{color:inherit}.color-brand{color:var(--px-color-text-brand-default)}.color-action-neutral{color:var(--px-color-text-neutral-default)}.color-action-hover{color:var(--px-color-text-state-hover-default)}.color-action-active{color:var(--px-color-text-state-active-default)}.color-action-disabled{color:var(--px-color-text-state-disabled-default)}.color-body-neutral-strong{color:var(--px-color-text-neutral-default)}.color-body-neutral-weak{color:var(--px-color-text-dimmed-default)}.color-heading-brand{color:var(--px-color-text-brand-default)}.color-heading-neutral{color:var(--px-color-text-neutral-default)}.color-purpose-success{color:var(--px-color-text-purpose-success-default)}.color-purpose-warning{color:var(--px-color-text-purpose-warning-default)}.color-purpose-error{color:var(--px-color-text-purpose-error-default)}.color-purpose-unlimited{color:var(--px-color-text-purpose-unlimited-default)}.color-purpose-promo{color:var(--px-color-text-purpose-promo-default)}:host([inverted]) .color-inherit{color:inherit}:host([inverted]) .color-brand{color:var(--px-color-text-brand-inverted)}:host([inverted]) .color-action-neutral{color:var(--px-color-text-neutral-inverted)}:host([inverted]) .color-action-hover{color:var(--px-color-text-state-hover-inverted)}:host([inverted]) .color-action-active{color:var(--px-color-text-state-active-inverted)}:host([inverted]) .color-action-disabled{color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .color-body-neutral-strong{color:var(--px-color-text-neutral-inverted)}:host([inverted]) .color-body-neutral-weak{color:var(--px-color-text-dimmed-inverted)}:host([inverted]) .color-heading-brand{color:var(--px-color-text-brand-inverted)}:host([inverted]) .color-heading-neutral{color:var(--px-color-text-neutral-inverted)}:host([inverted]) .color-purpose-success{color:var(--px-color-text-purpose-success-inverted)}:host([inverted]) .color-purpose-warning{color:var(--px-color-text-purpose-warning-inverted)}:host([inverted]) .color-purpose-error{color:var(--px-color-text-purpose-error-inverted)}:host([inverted]) .color-purpose-unlimited{color:var(--px-color-text-purpose-unlimited-inverted)}:host([inverted]) .color-purpose-promo{color:var(--px-color-text-purpose-promo-inverted)}.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)}@media only screen and (min-width: 768px){.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)}}@media only screen and (min-width: 1025px){.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-weight-inherit{font-weight:inherit}.font-weight-normal{font-weight:var(--font-weight-regular)}.font-weight-bold{font-weight:var(--font-weight-bold)}.font-weight-extrabold{font-weight:var(--font-weight-extrabold)}.font-weight-light{font-weight:var(--font-weight-light)}", y = new CSSStyleSheet();
-y.replaceSync(C);
-const m = new CSSStyleSheet();
-m.replaceSync(S);
-class r extends k {
-  template() {
-    return "<slot></slot>";
-  }
-  constructor(t) {
-    super(y, m);
-    const e = document.createElement(t);
-    e.innerHTML = this.template(), this.shadowRoot.appendChild(e);
-  }
-  static get observedAttributes() {
-    return [
-      ...super.observedAttributes,
-      "variant",
-      "color",
-      "text-align",
-      "text-align--mobile",
-      "text-align--tablet",
-      "text-align--laptop",
-      "text-align--desktop",
-      "inverted"
-    ];
-  }
-  attributeChangedCallback(t, e, i) {
-    if (e !== i)
-      switch (t) {
-        case "variant":
-          this.updateAttribute(t, e, i, $);
-          break;
-        case "color":
-          this.updateColor(e, i, w);
-          break;
-        case "text-align":
-        case "text-align--mobile":
-        case "text-align--tablet":
-        case "text-align--laptop":
-        case "text-align--desktop":
-          this.updateTextAlign(t, e, i, A);
-          break;
-        default:
-          super.attributeChangedCallback(t, e, i);
-          break;
-      }
-  }
-  toggleClass(t, e) {
-    t !== null && t !== "" && t !== "default" && this.$el.classList.toggle(`style-${t}`), e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`style-${e}`);
-  }
-  checkName(t, e) {
-    return t.includes(e);
-  }
-  updateAttribute(t, e, i, l) {
-    this.checkName(l, i) ? this.toggleClass(e, i) : console.error(
-      `${i} is not an allowed "${t}" value for`,
-      this.$el
-    );
-  }
-  updateColor(t, e, i) {
-    if (!this.checkName(i, e)) {
-      console.error("Bad color value for", this.$el);
-      return;
-    }
-    const l = (o) => {
-      o !== null && o !== "" && o !== "default" && (this.$el.style.setProperty(
-        "--heading-color-default",
-        `var(--px-text-color-${o}-default)`
-      ), this.$el.style.setProperty(
-        "--heading-color-inverted",
-        `var(--px-text-color-${o}-inverted)`
-      ));
-    };
-    l(t), l(e);
-  }
-  updateTextAlign(t, e, i, l) {
-    if (!this.checkName(l, i)) {
-      console.error(`Bad ${t} value for`, this.$el);
-      return;
-    }
-    const o = (s, n) => {
-      n !== null && n !== "" && n !== "default" && this.$el.style.setProperty(
-        `--heading-text-align--${s}`,
-        n
-      );
-    };
-    if (t === "text-align")
-      ["mobile", "tablet", "laptop", "desktop"].forEach((s) => {
-        o(s, e), o(s, i);
-      });
-    else {
-      const s = t.split("--")[1];
-      o(s, e), o(s, i);
-    }
-  }
-  get variant() {
-    return this.getAttribute("variant");
-  }
-  set variant(t) {
-    this.setAttribute("variant", t);
-  }
-  get color() {
-    return this.getAttribute("color");
-  }
-  set color(t) {
-    this.setAttribute("color", t);
-  }
-  get textAlign() {
-    return this.getAttribute("text-align");
-  }
-  set textAlign(t) {
-    this.setAttribute("text-align", t);
-  }
-  get textAlignMobile() {
-    return this.getAttribute("text-align--mobile");
-  }
-  set textAlignMobile(t) {
-    this.setAttribute("text-align--mobile", t);
-  }
-  get textAlignTablet() {
-    return this.getAttribute("text-align--tablet");
-  }
-  set textAlignTablet(t) {
-    this.setAttribute("text-align--tablet", t);
-  }
-  get textAlignLaptop() {
-    return this.getAttribute("text-align--laptop");
-  }
-  set textAlignLaptop(t) {
-    this.setAttribute("text-align--laptop", t);
-  }
-  get textAlignDesktop() {
-    return this.getAttribute("text-align--desktop");
-  }
-  set textAlignDesktop(t) {
-    this.setAttribute("text-align--desktop", t);
-  }
-  get inverted() {
-    return this.getAttribute("inverted");
-  }
-  set inverted(t) {
-    this.setAttribute("inverted", t);
-  }
-}
-const g = class g extends r {
-  constructor() {
-    super("h1");
-  }
-};
-g.nativeName = "h1";
-let a = g;
-customElements.define("px-h1", a);
-const v = class v extends r {
-  constructor() {
-    super("h2");
-  }
-};
-v.nativeName = "h2";
-let d = v;
-customElements.define("px-h2", d);
-const f = class f extends r {
-  constructor() {
-    super("h3");
-  }
-};
-f.nativeName = "h3";
-let h = f;
-customElements.define("px-h3", h);
-const z = class z extends r {
-  constructor() {
-    super("h4");
-  }
-};
-z.nativeName = "h4";
-let x = z;
-customElements.define("px-h4", x);
-const u = class u extends r {
-  constructor() {
-    super("h5");
-  }
-};
-u.nativeName = "h5";
-let p = u;
-customElements.define("px-h5", p);
-const b = class b extends r {
-  constructor() {
-    super("h6");
-  }
-};
-b.nativeName = "h6";
-let c = b;
-customElements.define("px-h6", c);
-export {
-  a as H1,
-  d as H2,
-  h as H3,
-  x as H4,
-  p as H5,
-  c as H6
-};