@proximus/lavender-heading 2.0.0-alpha.21 → 2.0.0-alpha.210

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/dist/AbstractHeading.d.ts +21 -18
  2. package/dist/H1.d.ts +1 -1
  3. package/dist/H2.d.ts +1 -1
  4. package/dist/H3.d.ts +1 -1
  5. package/dist/H4.d.ts +1 -1
  6. package/dist/H5.d.ts +1 -1
  7. package/dist/H6.d.ts +1 -1
  8. package/dist/custom-elements.json +2168 -0
  9. package/dist/index.es.js +192 -194
  10. package/dist/vscode.css-custom-data.json +6 -0
  11. package/dist/vscode.html-custom-data.json +102 -0
  12. package/dist/web-types.json +202 -0
  13. package/package.json +2 -2
package/dist/index.es.js CHANGED
@@ -1,201 +1,199 @@
1
- import { PxElement as A, textalignValues as w, colorValues as $, headingValues as C, log as a } from "@proximus/lavender-common";
2
- const E = "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)}}", S = ".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)}", u = new CSSStyleSheet();
3
- u.replaceSync(E);
4
- const k = new CSSStyleSheet();
5
- k.replaceSync(S);
6
- class n extends A {
7
- template() {
8
- return "<slot></slot>";
9
- }
10
- constructor(t) {
11
- super(u, k);
12
- const e = document.createElement(t);
13
- e.innerHTML = this.template(), this.shadowRoot.appendChild(e);
14
- }
15
- static get observedAttributes() {
16
- return [
17
- ...super.observedAttributes,
18
- "variant",
19
- "color",
20
- "text-align",
21
- "text-align--mobile",
22
- "text-align--tablet",
23
- "text-align--laptop",
24
- "text-align--desktop",
25
- "inverted"
26
- ];
27
- }
28
- attributeChangedCallback(t, e, i) {
29
- if (e !== i)
30
- switch (t) {
31
- case "variant":
32
- this.updateAttribute(t, e, i, C);
33
- break;
34
- case "color":
35
- this.updateColor(e, i, $);
36
- break;
37
- case "text-align":
38
- case "text-align--mobile":
39
- case "text-align--tablet":
40
- case "text-align--laptop":
41
- case "text-align--desktop":
42
- this.updateTextAlign(t, e, i, w);
43
- break;
44
- default:
45
- super.attributeChangedCallback(t, e, i);
46
- break;
47
- }
48
- }
49
- toggleClass(t, e) {
50
- t !== null && t !== "" && t !== "default" && this.$el.classList.toggle(`style-${t}`), e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`style-${e}`);
51
- }
52
- updateAttribute(t, e, i, l) {
53
- this.checkName(l, i) ? this.toggleClass(e, i) : a(
54
- `${i} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
55
- );
56
- }
57
- updateColor(t, e, i) {
58
- if (!this.checkName(i, e)) {
59
- a(
60
- `${e} is not an allowed color value for ${this.tagName.toLowerCase()}`
61
- );
62
- return;
63
- }
64
- const l = (o) => {
65
- o !== null && o !== "" && o !== "default" && (this.$el.style.setProperty(
66
- "--heading-color-default",
67
- `var(--px-color-text-${o}-default)`
68
- ), this.$el.style.setProperty(
69
- "--heading-color-inverted",
70
- `var(--px-color-text-${o}-inverted)`
71
- ));
72
- };
73
- l(t), l(e);
74
- }
75
- updateTextAlign(t, e, i, l) {
76
- if (!this.checkName(l, i)) {
77
- a(
78
- `${i} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
79
- );
80
- return;
81
- }
82
- const o = (s, r) => {
83
- r !== null && r !== "" && r !== "default" && this.$el.style.setProperty(
84
- `--heading-text-align--${s}`,
85
- r
86
- );
87
- };
88
- if (t === "text-align")
89
- ["mobile", "tablet", "laptop", "desktop"].forEach((s) => {
90
- o(s, e), o(s, i);
91
- });
92
- else {
93
- const s = t.split("--")[1];
94
- o(s, e), o(s, i);
95
- }
96
- }
97
- get variant() {
98
- return this.getAttribute("variant");
99
- }
100
- set variant(t) {
101
- this.setAttribute("variant", t);
102
- }
103
- get color() {
104
- return this.getAttribute("color");
105
- }
106
- set color(t) {
107
- this.setAttribute("color", t);
108
- }
109
- get textAlign() {
110
- return this.getAttribute("text-align");
111
- }
112
- set textAlign(t) {
113
- this.setAttribute("text-align", t);
114
- }
115
- get textAlignMobile() {
116
- return this.getAttribute("text-align--mobile");
117
- }
118
- set textAlignMobile(t) {
119
- this.setAttribute("text-align--mobile", t);
120
- }
121
- get textAlignTablet() {
122
- return this.getAttribute("text-align--tablet");
123
- }
124
- set textAlignTablet(t) {
125
- this.setAttribute("text-align--tablet", t);
126
- }
127
- get textAlignLaptop() {
128
- return this.getAttribute("text-align--laptop");
129
- }
130
- set textAlignLaptop(t) {
131
- this.setAttribute("text-align--laptop", t);
132
- }
133
- get textAlignDesktop() {
134
- return this.getAttribute("text-align--desktop");
135
- }
136
- set textAlignDesktop(t) {
137
- this.setAttribute("text-align--desktop", t);
138
- }
139
- get inverted() {
140
- return this.getAttribute("inverted");
141
- }
142
- set inverted(t) {
143
- this.setAttribute("inverted", t);
144
- }
145
- }
146
- const c = class c extends n {
147
- constructor() {
148
- super("h1");
149
- }
1
+ import { PxElement as e, colorValues as t, createTemplate as n, headingValues as r, log as i, renderTemplate as a, textalignValues as o } from "@proximus/lavender-common";
2
+ //#region src/heading.css?inline
3
+ var s = "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)}}", c = ".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)}", l = new CSSStyleSheet();
4
+ l.replaceSync(s);
5
+ var u = new CSSStyleSheet();
6
+ u.replaceSync(c);
7
+ var d = class extends e {
8
+ constructor() {
9
+ super(l, u), a(this.shadowRoot, this.constructor.template);
10
+ }
11
+ static get observedAttributes() {
12
+ return [
13
+ ...super.observedAttributes,
14
+ "variant",
15
+ "color",
16
+ "text-align",
17
+ "text-align--mobile",
18
+ "text-align--tablet",
19
+ "text-align--laptop",
20
+ "text-align--desktop",
21
+ "inverted",
22
+ "auto-spacing"
23
+ ];
24
+ }
25
+ attributeChangedCallback(e, n, i) {
26
+ if (n !== i) switch (e) {
27
+ case "variant":
28
+ this.updateAttribute(e, n, i, r);
29
+ break;
30
+ case "color":
31
+ this.updateColor(n, i, t);
32
+ break;
33
+ case "text-align":
34
+ case "text-align--mobile":
35
+ case "text-align--tablet":
36
+ case "text-align--laptop":
37
+ case "text-align--desktop":
38
+ this.updateTextAlign(e, n, i, o);
39
+ break;
40
+ default: super.attributeChangedCallback(e, n, i);
41
+ }
42
+ }
43
+ toggleClass(e, t) {
44
+ e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`style-${e}`), t !== null && t !== "" && t !== "default" && this.$el.classList.toggle(`style-${t}`);
45
+ }
46
+ updateAttribute(e, t, n, r) {
47
+ this.checkName(r, n) ? this.toggleClass(t, n) : i(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join("\", \"")}".`);
48
+ }
49
+ updateColor(e, t, n) {
50
+ if (!this.checkName(n, t)) {
51
+ i(`"${t}" is not a valid color value for ${this.tagName.toLowerCase()}. Allowed values are: "${n.join("\", \"")}".`);
52
+ return;
53
+ }
54
+ let r = (e) => {
55
+ 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)`));
56
+ };
57
+ r(e), r(t);
58
+ }
59
+ updateTextAlign(e, t, n, r) {
60
+ if (!this.checkName(r, n)) {
61
+ i(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join("\", \"")}".`);
62
+ return;
63
+ }
64
+ let a = (e, t) => {
65
+ t !== null && t !== "" && t !== "default" && this.$el.style.setProperty(`--heading-text-align--${e}`, t);
66
+ };
67
+ if (e === "text-align") [
68
+ "mobile",
69
+ "tablet",
70
+ "laptop",
71
+ "desktop"
72
+ ].forEach((e) => {
73
+ a(e, t), a(e, n);
74
+ });
75
+ else {
76
+ let r = e.split("--")[1];
77
+ a(r, t), a(r, n);
78
+ }
79
+ }
80
+ get variant() {
81
+ return this.getAttribute("variant");
82
+ }
83
+ set variant(e) {
84
+ this._updateAttribute("variant", e);
85
+ }
86
+ get color() {
87
+ return this.getAttribute("color");
88
+ }
89
+ set color(e) {
90
+ this._updateAttribute("color", e);
91
+ }
92
+ get textAlign() {
93
+ return this.getAttribute("text-align");
94
+ }
95
+ set textAlign(e) {
96
+ this._updateAttribute("text-align", e);
97
+ }
98
+ get textAlignMobile() {
99
+ return this.getAttribute("text-align--mobile");
100
+ }
101
+ set textAlignMobile(e) {
102
+ this._updateAttribute("text-align--mobile", e);
103
+ }
104
+ get textAlignTablet() {
105
+ return this.getAttribute("text-align--tablet");
106
+ }
107
+ set textAlignTablet(e) {
108
+ this._updateAttribute("text-align--tablet", e);
109
+ }
110
+ get textAlignLaptop() {
111
+ return this.getAttribute("text-align--laptop");
112
+ }
113
+ set textAlignLaptop(e) {
114
+ this._updateAttribute("text-align--laptop", e);
115
+ }
116
+ get textAlignDesktop() {
117
+ return this.getAttribute("text-align--desktop");
118
+ }
119
+ set textAlignDesktop(e) {
120
+ this._updateAttribute("text-align--desktop", e);
121
+ }
122
+ get inverted() {
123
+ return this.hasAttribute("inverted");
124
+ }
125
+ set inverted(e) {
126
+ this._updateBooleanAttribute("inverted", e);
127
+ }
128
+ get autoSpacing() {
129
+ return this.hasAttribute("auto-spacing");
130
+ }
131
+ set autoSpacing(e) {
132
+ this._updateBooleanAttribute("auto-spacing", e);
133
+ }
134
+ }, f = class extends d {
135
+ static {
136
+ this.template = n("<h1><slot></slot></h1>");
137
+ }
138
+ static {
139
+ this.nativeName = "h1";
140
+ }
150
141
  };
151
- c.nativeName = "h1";
152
- let h = c;
153
- customElements.get("px-h1") || customElements.define("px-h1", h);
154
- const v = class v extends n {
155
- constructor() {
156
- super("h2");
157
- }
142
+ customElements.get("px-h1") || customElements.define("px-h1", f);
143
+ //#endregion
144
+ //#region src/H2.ts
145
+ var p = class extends d {
146
+ static {
147
+ this.template = n("<h2><slot></slot></h2>");
148
+ }
149
+ static {
150
+ this.nativeName = "h2";
151
+ }
158
152
  };
159
- v.nativeName = "h2";
160
- let d = v;
161
- customElements.get("px-h2") || customElements.define("px-h2", d);
162
- const z = class z extends n {
163
- constructor() {
164
- super("h3");
165
- }
153
+ customElements.get("px-h2") || customElements.define("px-h2", p);
154
+ //#endregion
155
+ //#region src/H3.ts
156
+ var m = class extends d {
157
+ static {
158
+ this.template = n("<h3><slot></slot></h3>");
159
+ }
160
+ static {
161
+ this.nativeName = "h3";
162
+ }
166
163
  };
167
- z.nativeName = "h3";
168
- let x = z;
169
- customElements.get("px-h3") || customElements.define("px-h3", x);
170
- const m = class m extends n {
171
- constructor() {
172
- super("h4");
173
- }
164
+ customElements.get("px-h3") || customElements.define("px-h3", m);
165
+ //#endregion
166
+ //#region src/H4.ts
167
+ var h = class extends d {
168
+ static {
169
+ this.template = n("<h4><slot></slot></h4>");
170
+ }
171
+ static {
172
+ this.nativeName = "h4";
173
+ }
174
174
  };
175
- m.nativeName = "h4";
176
- let p = m;
177
- customElements.get("px-h4") || customElements.define("px-h4", p);
178
- const b = class b extends n {
179
- constructor() {
180
- super("h5");
181
- }
175
+ customElements.get("px-h4") || customElements.define("px-h4", h);
176
+ //#endregion
177
+ //#region src/H5.ts
178
+ var g = class extends d {
179
+ static {
180
+ this.template = n("<h5><slot></slot></h5>");
181
+ }
182
+ static {
183
+ this.nativeName = "h5";
184
+ }
182
185
  };
183
- b.nativeName = "h5";
184
- let g = b;
185
186
  customElements.get("px-h5") || customElements.define("px-h5", g);
186
- const y = class y extends n {
187
- constructor() {
188
- super("h6");
189
- }
190
- };
191
- y.nativeName = "h6";
192
- let f = y;
193
- customElements.get("px-h6") || customElements.define("px-h6", f);
194
- export {
195
- h as H1,
196
- d as H2,
197
- x as H3,
198
- p as H4,
199
- g as H5,
200
- f as H6
187
+ //#endregion
188
+ //#region src/H6.ts
189
+ var _ = class extends d {
190
+ static {
191
+ this.template = n("<h6><slot></slot></h6>");
192
+ }
193
+ static {
194
+ this.nativeName = "h6";
195
+ }
201
196
  };
197
+ customElements.get("px-h6") || customElements.define("px-h6", _);
198
+ //#endregion
199
+ export { f as H1, p as H2, m as H3, h as H4, g as H5, _ as H6 };
package/dist/vscode.css-custom-data.json ADDED
@@ -0,0 +1,6 @@
1
+ {
2
+ "$schema": "https://raw.githubusercontent.com/microsoft/vscode-css-languageservice/main/docs/customData.schema.json",
3
+ "version": 1.1,
4
+ "properties": [],
5
+ "pseudoElements": []
6
+ }
package/dist/vscode.html-custom-data.json ADDED
@@ -0,0 +1,102 @@
1
+ {
2
+ "$schema": "https://raw.githubusercontent.com/microsoft/vscode-html-languageservice/main/docs/customData.schema.json",
3
+ "version": 1.1,
4
+ "tags": [
5
+ {
6
+ "name": "px-h1",
7
+ "description": "\n---\n",
8
+ "attributes": [
9
+ { "name": "variant", "values": [] },
10
+ { "name": "color", "values": [] },
11
+ { "name": "text-align", "values": [] },
12
+ { "name": "text-align--mobile", "values": [] },
13
+ { "name": "text-align--tablet", "values": [] },
14
+ { "name": "text-align--laptop", "values": [] },
15
+ { "name": "text-align--desktop", "values": [] },
16
+ { "name": "inverted", "values": [] },
17
+ { "name": "auto-spacing", "values": [] }
18
+ ],
19
+ "references": []
20
+ },
21
+ {
22
+ "name": "px-h2",
23
+ "description": "\n---\n",
24
+ "attributes": [
25
+ { "name": "variant", "values": [] },
26
+ { "name": "color", "values": [] },
27
+ { "name": "text-align", "values": [] },
28
+ { "name": "text-align--mobile", "values": [] },
29
+ { "name": "text-align--tablet", "values": [] },
30
+ { "name": "text-align--laptop", "values": [] },
31
+ { "name": "text-align--desktop", "values": [] },
32
+ { "name": "inverted", "values": [] },
33
+ { "name": "auto-spacing", "values": [] }
34
+ ],
35
+ "references": []
36
+ },
37
+ {
38
+ "name": "px-h3",
39
+ "description": "\n---\n",
40
+ "attributes": [
41
+ { "name": "variant", "values": [] },
42
+ { "name": "color", "values": [] },
43
+ { "name": "text-align", "values": [] },
44
+ { "name": "text-align--mobile", "values": [] },
45
+ { "name": "text-align--tablet", "values": [] },
46
+ { "name": "text-align--laptop", "values": [] },
47
+ { "name": "text-align--desktop", "values": [] },
48
+ { "name": "inverted", "values": [] },
49
+ { "name": "auto-spacing", "values": [] }
50
+ ],
51
+ "references": []
52
+ },
53
+ {
54
+ "name": "px-h4",
55
+ "description": "\n---\n",
56
+ "attributes": [
57
+ { "name": "variant", "values": [] },
58
+ { "name": "color", "values": [] },
59
+ { "name": "text-align", "values": [] },
60
+ { "name": "text-align--mobile", "values": [] },
61
+ { "name": "text-align--tablet", "values": [] },
62
+ { "name": "text-align--laptop", "values": [] },
63
+ { "name": "text-align--desktop", "values": [] },
64
+ { "name": "inverted", "values": [] },
65
+ { "name": "auto-spacing", "values": [] }
66
+ ],
67
+ "references": []
68
+ },
69
+ {
70
+ "name": "px-h5",
71
+ "description": "\n---\n",
72
+ "attributes": [
73
+ { "name": "variant", "values": [] },
74
+ { "name": "color", "values": [] },
75
+ { "name": "text-align", "values": [] },
76
+ { "name": "text-align--mobile", "values": [] },
77
+ { "name": "text-align--tablet", "values": [] },
78
+ { "name": "text-align--laptop", "values": [] },
79
+ { "name": "text-align--desktop", "values": [] },
80
+ { "name": "inverted", "values": [] },
81
+ { "name": "auto-spacing", "values": [] }
82
+ ],
83
+ "references": []
84
+ },
85
+ {
86
+ "name": "px-h6",
87
+ "description": "\n---\n",
88
+ "attributes": [
89
+ { "name": "variant", "values": [] },
90
+ { "name": "color", "values": [] },
91
+ { "name": "text-align", "values": [] },
92
+ { "name": "text-align--mobile", "values": [] },
93
+ { "name": "text-align--tablet", "values": [] },
94
+ { "name": "text-align--laptop", "values": [] },
95
+ { "name": "text-align--desktop", "values": [] },
96
+ { "name": "inverted", "values": [] },
97
+ { "name": "auto-spacing", "values": [] }
98
+ ],
99
+ "references": []
100
+ }
101
+ ]
102
+ }