@proximus/lavender-icon-common 2.0.0-alpha.22 → 2.0.0-alpha.220

package/dist/Icon.d.ts

@@ -0,0 +1,27 @@
+import { WithExtraAttributes } from '@proximus/lavender-common';
+export declare const styleSheet: CSSStyleSheet;
+export declare class Icon extends WithExtraAttributes {
+    #private;
+    protected static readonly template: HTMLTemplateElement;
+    static get observedAttributes(): string[];
+    constructor(...styleSheets: CSSStyleSheet[]);
+    attributeChangedCallback(attrName: string, oldValue: string, newValue: string): void;
+    connectedCallback(): void;
+    updateAttribute(attrName: string, oldValue: string, newValue: string, attrValues: readonly string[]): void;
+    updateName(oldValue: string, newValue: string): void;
+    get $el(): SVGElement;
+    get name(): string | null;
+    set name(value: string | null);
+    get size(): string | null;
+    set size(value: string | null);
+    get color(): string | null;
+    set color(value: string | null);
+    get arialabel(): string | null;
+    set arialabel(value: string | null);
+    get inverted(): boolean;
+    set inverted(value: boolean);
+    get from(): string | null;
+    set from(value: string | null);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+}

package/dist/IconSet.d.ts

@@ -0,0 +1,6 @@
+export declare class IconSet extends HTMLElement {
+    constructor();
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}

package/dist/attributeValues.d.ts

@@ -0,0 +1,3 @@
+export declare const iconColorValues: readonly ["Brand", "Accent", "Neutral", "Dimmed", "PurposeSuccess", "PurposeWarning", "PurposeError", "PurposeUnlimited", "PurposePromo", "StateHover", "StateActive", "StateDisabled"];
+export declare const iconColorValuesKC: string[];
+export type IconColor = (typeof iconColorValues)[number];

package/dist/custom-elements.json

@@ -0,0 +1,306 @@
+{
+  "schemaVersion": "1.0.0",
+  "readme": "",
+  "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "src/Icon.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "styleSheet",
+          "default": "new CSSStyleSheet()"
+        },
+        {
+          "kind": "class",
+          "description": "",
+          "name": "Icon",
+          "members": [
+            {
+              "kind": "field",
+              "name": "template",
+              "privacy": "protected",
+              "static": true,
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "#src",
+              "privacy": "private",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "#internals",
+              "privacy": "private",
+              "type": {
+                "text": "ElementInternals"
+              },
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "updateAttribute",
+              "parameters": [
+                {
+                  "name": "attrName",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "oldValue",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "newValue",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "attrValues",
+                  "type": {
+                    "text": "readonly string[]"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "updateName",
+              "parameters": [
+                {
+                  "name": "oldValue",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "newValue",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "$el",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "name"
+            },
+            {
+              "kind": "field",
+              "name": "size"
+            },
+            {
+              "kind": "field",
+              "name": "color"
+            },
+            {
+              "kind": "field",
+              "name": "arialabel"
+            },
+            {
+              "kind": "field",
+              "name": "inverted"
+            },
+            {
+              "kind": "field",
+              "name": "from"
+            },
+            {
+              "kind": "field",
+              "name": "disabled"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "name"
+            },
+            {
+              "name": "size"
+            },
+            {
+              "name": "color"
+            },
+            {
+              "name": "aria-label"
+            },
+            {
+              "name": "inverted"
+            },
+            {
+              "name": "from"
+            },
+            {
+              "name": "disabled"
+            }
+          ],
+          "superclass": {
+            "name": "WithExtraAttributes",
+            "package": "@proximus/lavender-common"
+          },
+          "tagName": "px-icon",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "styleSheet",
+          "declaration": {
+            "name": "styleSheet",
+            "module": "src/Icon.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Icon",
+          "declaration": {
+            "name": "Icon",
+            "module": "src/Icon.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "px-icon",
+          "declaration": {
+            "name": "Icon",
+            "module": "src/Icon.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/IconSet.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "IconSet",
+          "attributes": [
+            {
+              "name": "name"
+            },
+            {
+              "name": "src"
+            },
+            {
+              "name": "type"
+            },
+            {
+              "name": "format"
+            }
+          ],
+          "superclass": {
+            "name": "HTMLElement"
+          },
+          "tagName": "px-icon-set",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "IconSet",
+          "declaration": {
+            "name": "IconSet",
+            "module": "src/IconSet.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "px-icon-set",
+          "declaration": {
+            "name": "IconSet",
+            "module": "src/IconSet.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/attributeValues.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "iconColorValues",
+          "type": {
+            "text": "[\n  'Brand',\n  'Accent',\n  'Neutral',\n  'Dimmed',\n  'PurposeSuccess',\n  'PurposeWarning',\n  'PurposeError',\n  'PurposeUnlimited',\n  'PurposePromo',\n  'StateHover',\n  'StateActive',\n  'StateDisabled',\n]"
+          },
+          "default": "[ 'Brand', 'Accent', 'Neutral', 'Dimmed', 'PurposeSuccess', 'PurposeWarning', 'PurposeError', 'PurposeUnlimited', 'PurposePromo', 'StateHover', 'StateActive', 'StateDisabled', ]"
+        },
+        {
+          "kind": "variable",
+          "name": "iconColorValuesKC"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "iconColorValues",
+          "declaration": {
+            "name": "iconColorValues",
+            "module": "src/attributeValues.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "iconColorValuesKC",
+          "declaration": {
+            "name": "iconColorValuesKC",
+            "module": "src/attributeValues.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/icon.css",
+      "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "src/IconSet"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "src/Icon"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "src/attributeValues"
+          }
+        }
+      ]
+    }
+  ]
+}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from './IconSet';
+export * from './Icon';
+export * from './attributeValues';

package/dist/index.es.js

@@ -1,24 +1,23 @@
-var u = (r) => {
-  throw TypeError(r);
-};
-var p = (r, o, e) => o.has(r) || u("Cannot " + e);
-var s = (r, o, e) => (p(r, o, "read from private field"), e ? e.call(r) : o.get(r)), a = (r, o, e) => o.has(r) ? u("Cannot add the same private member more than once") : o instanceof WeakSet ? o.add(r) : o.set(r, e), d = (r, o, e, t) => (p(r, o, "write to private field"), t ? t.call(r, e) : o.set(r, e), e);
-import { WithExtraAttributes as m, iconSizeValuesKC as f, log as b } from "@proximus/lavender-common";
-class g extends HTMLElement {
-  constructor() {
-    super();
-  }
-  static get observedAttributes() {
-    return ["name", "src", "type", "format"];
-  }
-  connectedCallback() {
-    if (document.querySelectorAll(
-      `px-icon-set[name="${this.getAttribute("name")}"]`
-    ).length > 1 && (console.warn(
-      "Only one <px-icon-set> component is allowed, self removing"
-    ), this.remove()), this.getAttribute("type") === "font") {
-      const e = document.createElement("style");
-      e.setAttribute("type", "text/css"), e.setAttribute("data-name", this.getAttribute("name")), e.textContent = `
+import { WithExtraAttributes as e, booleanPropertyToAttributeSetter as t, createTemplate as n, iconSizeValuesKC as r, log as i, propertyToAttributeSetter as a, renderTemplate as o } from "@proximus/lavender-common";
+//#region src/IconSet.ts
+var s = class extends HTMLElement {
+	constructor() {
+		super();
+	}
+	static get observedAttributes() {
+		return [
+			"name",
+			"src",
+			"type",
+			"format"
+		];
+	}
+	connectedCallback() {
+		if (document.querySelectorAll(`px-icon-set[name="${this.getAttribute("name")}"]`).length > 1 && (console.warn("Only one <px-icon-set> component is allowed, self removing"), this.remove()), this.getAttribute("type") === "font") {
+			let e = document.createElement("style");
+			e.setAttribute("type", "text/css");
+			let t = this.getAttribute("name");
+			t && e.setAttribute("data-name", t), e.textContent = `
 @font-face {
   font-family: 'lavender';
   src:
@@ -28,162 +27,130 @@ class g extends HTMLElement {
   font-display: block;
 }
       `, document.head.appendChild(e);
-    }
-  }
-  disconnectedCallback() {
-    const o = document.querySelector(
-      `style[data-name="${this.getAttribute("name")}"]`
-    );
-    o && o.remove();
-  }
-}
-customElements.get("px-icon-set") || customElements.define("px-icon-set", g);
-const x = [
-  "Brand",
-  "Accent",
-  "Neutral",
-  "Dimmed",
-  "PurposeSuccess",
-  "PurposeWarning",
-  "PurposeError",
-  "PurposeUnlimited",
-  "PurposePromo",
-  "StateHover",
-  "StateActive",
-  "StateDisabled"
-], A = ["Inherit", ...x].map(
-  (r) => r.replace(/([A-Z])/g, "-$1").toLowerCase().slice(1)
-), z = ":host{display:inline-flex;flex-direction:column;justify-content:center}svg{font-size:var(--px-size-icon-s);line-height:var(--px-font-line-height-xs);width:1em;height:1em;color:var(--px-color-icon-accent-default)}.inherit{color:inherit}.brand{color:var(--px-color-icon-brand-default)}.accent{color:var(--px-color-icon-accent-default)}.neutral{color:var(--px-color-icon-neutral-default)}.dimmed{color:var(--px-color-icon-dimmed-default)}.purpose-success{color:var(--px-color-icon-purpose-success-default)}.purpose-warning{color:var(--px-color-icon-purpose-warning-default)}.purpose-error{color:var(--px-color-icon-purpose-error-default)}.purpose-unlimited{color:var(--px-color-icon-purpose-unlimited-default)}.purpose-promo{color:var(--px-color-icon-purpose-promo-default)}.state-hover:hover{color:var(--px-color-icon-state-hover-default)}.state-active:active{color:var(--px-color-icon-state-active-default)}.state-disabled{color:var(--px-color-icon-state-disabled-default)}:host([inverted]) svg{color:var(--px-color-icon-accent-inverted)}:host([inverted]) .inherit{color:inherit}:host([inverted]) .brand{color:var(--px-color-icon-brand-inverted)}:host([inverted]) .accent{color:var(--px-color-icon-accent-inverted)}:host([inverted]) .neutral{color:var(--px-color-icon-neutral-inverted)}:host([inverted]) .dimmed{color:var(--px-color-icon-dimmed-inverted)}:host([inverted]) .purpose-success{color:var(--px-color-icon-purpose-success-inverted)}:host([inverted]) .purpose-warning{color:var(--px-color-icon-purpose-warning-inverted)}:host([inverted]) .purpose-error{color:var(--px-color-icon-purpose-error-inverted)}:host([inverted]) .purpose-unlimited{color:var(--px-color-icon-purpose-unlimited-inverted)}:host([inverted]) .purpose-promo{color:var(--px-color-icon-purpose-promo-inverted)}:host([inverted]) .state-hover:hover{color:var(--px-color-icon-state-hover-inverted)}:host([inverted]) .state-active:active{color:var(--px-color-icon-state-active-inverted)}:host([inverted]) .state-disabled{color:var(--px-color-icon-state-disabled-inverted)}.size-xs{font-size:var(--px-size-icon-xs)}.size-s{font-size:var(--px-size-icon-s)}.size-m{font-size:var(--px-size-icon-m)}.size-l{font-size:var(--px-size-icon-l)}.size-xl{font-size:var(--px-size-icon-xl)}", h = new CSSStyleSheet();
-h.replaceSync(z);
-const $ = [
-  "name",
-  "size",
-  "color",
-  "aria-label",
-  "inverted",
-  "from",
-  "disabled"
-];
-var c, n, l;
-class y extends m {
-  constructor(...e) {
-    var t;
-    super(...e, h);
-    a(this, c);
-    a(this, n);
-    a(this, l, () => `<svg aria-hidden="true">
-      <use xlink:href=""></use>
-    </svg>`);
-    this.shadowRoot.innerHTML = s(this, l).call(this), d(this, n, (t = this.attachInternals) == null ? void 0 : t.call(this)), s(this, n) && (s(this, n).role = "img");
-  }
-  static get observedAttributes() {
-    return [...super.observedAttributes, ...$];
-  }
-  attributeChangedCallback(e, t, i) {
-    if (t !== i)
-      switch (e) {
-        case "name":
-          this.updateName(t, i);
-          break;
-        case "size":
-          this.updateAttribute(e, t, i, f);
-          break;
-        case "color":
-          this.updateAttribute(e, t, i, A);
-          break;
-        case "disabled":
-          this.color = "state-disabled";
-          break;
-        case "aria-label":
-          if (!s(this, n))
-            return;
-          i ? (s(this, n).ariaHidden = "false", this.ariaHidden = "false") : (s(this, n).ariaHidden = "true", this.ariaHidden = "true");
-          break;
-      }
-  }
-  connectedCallback() {
-    this.role = "img", this.name && this.$el.firstElementChild.setAttribute(
-      "xlink:href",
-      `#icon-${this.name}`
-    );
-    const e = document.querySelectorAll("px-icon-set");
-    e || console.log("<px-icon-set> component not found");
-    for (const t of e) {
-      if (!t.getAttribute("name") || !t.getAttribute("src")) {
-        console.error("Icon name or src not found");
-        continue;
-      }
-      t.getAttribute("name") === this.from && t.getAttribute("type") !== "font" && (d(this, c, t.getAttribute("src")), this.$el.firstElementChild.setAttribute(
-        "xlink:href",
-        `${s(this, c)}#icon-${this.name}`
-      ));
-    }
-    !this.ariaLabel && s(this, n) && (s(this, n).ariaHidden = "true", this.ariaHidden = "true");
-  }
-  updateAttribute(e, t, i, v) {
-    t !== null && t !== "" && (e === "size" ? this.$el.classList.toggle(`${e}-${t}`) : this.$el.classList.toggle(t)), i !== null && i !== "" && (e === "size" ? this.$el.classList.toggle(`${e}-${i}`) : this.$el.classList.toggle(i)), this.checkName(v, i) || b(
-      `${i} is not an allowed ${e} value for ${this.tagName.toLowerCase()}`
-    );
-  }
-  updateName(e, t) {
-    s(this, c) && this.$el.firstElementChild.setAttribute(
-      "xlink:href",
-      `${s(this, c)}#icon-${t}`
-    );
-  }
-  get $el() {
-    return this.shadowRoot.querySelector("svg");
-  }
-  get name() {
-    return this.getAttribute("name");
-  }
-  set name(e) {
-    this.setAttribute("name", e);
-  }
-  get size() {
-    return this.getAttribute("size");
-  }
-  set size(e) {
-    this.setAttribute("size", e);
-  }
-  get color() {
-    return this.getAttribute("color");
-  }
-  set color(e) {
-    this.setAttribute("color", e);
-  }
-  get arialabel() {
-    return this.getAttribute("aria-label");
-  }
-  set arialabel(e) {
-    this.setAttribute("aria-label", e);
-  }
-  get inverted() {
-    return this.getAttribute("inverted");
-  }
-  set inverted(e) {
-    this.setAttribute("inverted", e);
-  }
-  get from() {
-    return this.getAttribute("from");
-  }
-  set from(e) {
-    this.setAttribute("from", e);
-  }
-  get disabled() {
-    return this.getAttribute("disabled");
-  }
-  set disabled(e) {
-    this.setAttribute("disabled", e);
-  }
-}
-c = new WeakMap(), n = new WeakMap(), l = new WeakMap();
-customElements.get("px-icon") || customElements.define("px-icon", y);
-export {
-  y as Icon,
-  g as IconSet,
-  x as iconColorValues,
-  A as iconColorValuesKC,
-  $ as observedAttributes,
-  h as styleSheet
+		}
+	}
+	disconnectedCallback() {
+		let e = document.querySelector(`style[data-name="${this.getAttribute("name")}"]`);
+		e && e.remove();
+	}
+};
+customElements.get("px-icon-set") || customElements.define("px-icon-set", s);
+//#endregion
+//#region src/attributeValues.ts
+var c = [
+	"Brand",
+	"Accent",
+	"Neutral",
+	"Dimmed",
+	"PurposeSuccess",
+	"PurposeWarning",
+	"PurposeError",
+	"PurposeUnlimited",
+	"PurposePromo",
+	"StateHover",
+	"StateActive",
+	"StateDisabled"
+], l = ["Inherit", ...c].map((e) => e.replace(/([A-Z])/g, "-$1").toLowerCase().slice(1)), u = ":host{flex-direction:column;justify-content:center;display:inline-flex}svg{font-size:var(--px-size-icon-s);width:1em;height:1em;color:var(--px-color-icon-accent-default);line-height:1}.inherit{color:inherit}.brand{color:var(--px-color-icon-brand-default)}.accent{color:var(--px-color-icon-accent-default)}.neutral{color:var(--px-color-icon-neutral-default)}.dimmed{color:var(--px-color-icon-dimmed-default)}.purpose-success{color:var(--px-color-icon-purpose-success-default)}.purpose-warning{color:var(--px-color-icon-purpose-warning-default)}.purpose-error{color:var(--px-color-icon-purpose-error-default)}.purpose-unlimited{color:var(--px-color-icon-purpose-unlimited-default)}.purpose-promo{color:var(--px-color-icon-purpose-promo-default)}.state-hover:hover{color:var(--px-color-icon-state-hover-default)}.state-active:active{color:var(--px-color-icon-state-active-default)}.state-disabled{color:var(--px-color-icon-state-disabled-default)}:host([inverted]) svg{color:var(--px-color-icon-accent-inverted)}:host([inverted]) .inherit{color:inherit}:host([inverted]) .brand{color:var(--px-color-icon-brand-inverted)}:host([inverted]) .accent{color:var(--px-color-icon-accent-inverted)}:host([inverted]) .neutral{color:var(--px-color-icon-neutral-inverted)}:host([inverted]) .dimmed{color:var(--px-color-icon-dimmed-inverted)}:host([inverted]) .purpose-success{color:var(--px-color-icon-purpose-success-inverted)}:host([inverted]) .purpose-warning{color:var(--px-color-icon-purpose-warning-inverted)}:host([inverted]) .purpose-error{color:var(--px-color-icon-purpose-error-inverted)}:host([inverted]) .purpose-unlimited{color:var(--px-color-icon-purpose-unlimited-inverted)}:host([inverted]) .purpose-promo{color:var(--px-color-icon-purpose-promo-inverted)}:host([inverted]) .state-hover:hover{color:var(--px-color-icon-state-hover-inverted)}:host([inverted]) .state-active:active{color:var(--px-color-icon-state-active-inverted)}:host([inverted]) .state-disabled{color:var(--px-color-icon-state-disabled-inverted)}.size-xs{font-size:var(--px-size-icon-xs)}.size-s{font-size:var(--px-size-icon-s)}.size-m{font-size:var(--px-size-icon-m)}.size-l{font-size:var(--px-size-icon-l)}.size-xl{font-size:var(--px-size-icon-xl)}", d = new CSSStyleSheet();
+d.replaceSync(u);
+var f = class s extends e {
+	static {
+		this.template = n("<svg aria-hidden=\"true\"><use></use></svg>");
+	}
+	#e = null;
+	#t;
+	static get observedAttributes() {
+		return [
+			...super.observedAttributes,
+			"name",
+			"size",
+			"color",
+			"aria-label",
+			"inverted",
+			"from",
+			"disabled"
+		];
+	}
+	constructor(...e) {
+		super(...e, d), o(this.shadowRoot, s.template), this.#t = this.attachInternals?.(), this.#t && (this.#t.role = "img");
+	}
+	attributeChangedCallback(e, t, n) {
+		if (t !== n) switch (e) {
+			case "name":
+				this.updateName(t, n);
+				break;
+			case "size":
+				this.updateAttribute(e, t, n, r);
+				break;
+			case "color":
+				this.updateAttribute(e, t, n, l);
+				break;
+			case "disabled":
+				this.color = "state-disabled";
+				break;
+			case "aria-label":
+				if (!this.#t) return;
+				n ? (this.#t.ariaHidden = "false", this.ariaHidden = "false") : (this.#t.ariaHidden = "true", this.ariaHidden = "true");
+		}
+	}
+	connectedCallback() {
+		this.role = "img";
+		let e = document.querySelectorAll("px-icon-set");
+		e || console.log("<px-icon-set> component not found");
+		for (let t of e) !t.getAttribute("name") || !t.getAttribute("src") ? console.error("Icon name or src not found") : t.getAttribute("name") === this.from && t.getAttribute("type") !== "font" && (this.#e = t.getAttribute("src"), this.$el.firstElementChild?.setAttribute("href", `${this.#e}#icon-${this.name}`));
+		!this.ariaLabel && this.#t && (this.#t.ariaHidden = "true", this.ariaHidden = "true"), this.parentElement?.localName === "px-a" && this.slot !== "before" && this.slot !== "after" && (this.color || this.setAttribute("color", "inherit"));
+	}
+	updateAttribute(e, t, n, r) {
+		t !== null && t !== "" && (e === "size" ? this.$el.classList.toggle(`${e}-${t}`) : this.$el.classList.toggle(t)), n !== null && n !== "" && (e === "size" ? this.$el.classList.toggle(`${e}-${n}`) : this.$el.classList.toggle(n)), this.checkName(r, n) || i(`${n} is not an allowed ${e} value for ${this.tagName.toLowerCase()}`);
+	}
+	updateName(e, t) {
+		this.#e && this.$el.firstElementChild?.setAttribute("href", `${this.#e}#icon-${t}`);
+	}
+	get $el() {
+		return this.shadowRoot.querySelector("svg");
+	}
+	get name() {
+		return this.getAttribute("name");
+	}
+	set name(e) {
+		a(this, "name", e);
+	}
+	get size() {
+		return this.getAttribute("size");
+	}
+	set size(e) {
+		a(this, "size", e);
+	}
+	get color() {
+		return this.getAttribute("color");
+	}
+	set color(e) {
+		a(this, "color", e);
+	}
+	get arialabel() {
+		return this.getAttribute("aria-label");
+	}
+	set arialabel(e) {
+		a(this, "aria-label", e);
+	}
+	get inverted() {
+		return this.hasAttribute("inverted");
+	}
+	set inverted(e) {
+		t(this, "inverted", e);
+	}
+	get from() {
+		return this.getAttribute("from");
+	}
+	set from(e) {
+		a(this, "from", e);
+	}
+	get disabled() {
+		return this.hasAttribute("disabled");
+	}
+	set disabled(e) {
+		t(this, "disabled", e);
+	}
 };
+customElements.get("px-icon") || customElements.define("px-icon", f);
+//#endregion
+export { f as Icon, s as IconSet, c as iconColorValues, l as iconColorValuesKC, d as styleSheet };

package/dist/vscode.css-custom-data.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "https://raw.githubusercontent.com/microsoft/vscode-css-languageservice/main/docs/customData.schema.json",
+  "version": 1.1,
+  "properties": [],
+  "pseudoElements": []
+}

package/dist/vscode.html-custom-data.json

@@ -0,0 +1,31 @@
+{
+  "$schema": "https://raw.githubusercontent.com/microsoft/vscode-html-languageservice/main/docs/customData.schema.json",
+  "version": 1.1,
+  "tags": [
+    {
+      "name": "px-icon",
+      "description": "\n---\n",
+      "attributes": [
+        { "name": "name", "values": [] },
+        { "name": "size", "values": [] },
+        { "name": "color", "values": [] },
+        { "name": "aria-label", "values": [] },
+        { "name": "inverted", "values": [] },
+        { "name": "from", "values": [] },
+        { "name": "disabled", "values": [] }
+      ],
+      "references": []
+    },
+    {
+      "name": "px-icon-set",
+      "description": "\n---\n",
+      "attributes": [
+        { "name": "name", "values": [] },
+        { "name": "src", "values": [] },
+        { "name": "type", "values": [] },
+        { "name": "format", "values": [] }
+      ],
+      "references": []
+    }
+  ]
+}

package/dist/web-types.json

@@ -0,0 +1,57 @@
+{
+  "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
+  "name": "@proximus/lavender-icon-common",
+  "version": "2.0.0-alpha.220",
+  "description-markup": "markdown",
+  "contributions": {
+    "html": {
+      "elements": [
+        {
+          "name": "px-icon",
+          "description": "\n\n---\n",
+          "doc-url": "",
+          "attributes": [
+            { "name": "name", "value": { "type": "string" } },
+            { "name": "size", "value": { "type": "string" } },
+            { "name": "color", "value": { "type": "string" } },
+            { "name": "aria-label", "value": { "type": "string" } },
+            { "name": "inverted", "value": { "type": "string" } },
+            { "name": "from", "value": { "type": "string" } },
+            { "name": "disabled", "value": { "type": "string" } }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "$el" },
+              { "name": "name" },
+              { "name": "size" },
+              { "name": "color" },
+              { "name": "arialabel" },
+              { "name": "inverted" },
+              { "name": "from" },
+              { "name": "disabled" }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "px-icon-set",
+          "description": "\n\n---\n",
+          "doc-url": "",
+          "attributes": [
+            { "name": "name", "value": { "type": "string" } },
+            { "name": "src", "value": { "type": "string" } },
+            { "name": "type", "value": { "type": "string" } },
+            { "name": "format", "value": { "type": "string" } }
+          ],
+          "events": [],
+          "js": { "properties": [], "events": [] }
+        }
+      ]
+    },
+    "css": {
+      "properties": [],
+      "pseudo-elements": []
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proximus/lavender-icon-common",
-  "version": "2.0.0-alpha.22",
+  "version": "2.0.0-alpha.220",
   "description": "",
   "main": "dist/index.es.js",
   "types": "dist/index.d.ts",
@@ -10,10 +10,10 @@
   "type": "module",
   "scripts": {
     "clean": "rm -rf dist",
-    "build": "npm run clean && vite build && npm run transform-package-json && npm run wc-manifest",
+    "build": "npm run clean && vite build && tsc && npm run transform-package-json && npm run wc-manifest",
     "test": "vitest run --coverage",
     "transform-package-json": "node ../../../../scripts/tranformPackageJson.js package.json dist/far/away",
-    "wc-manifest": "cem analyze --globs \"src/*\" --config ../custom-elements-manifest.config.js  --outdir dist"
+    "wc-manifest": "cem analyze --globs \"src/*\" --config ../../../custom-elements-manifest.config.js  --outdir dist"
   },
   "publishConfig": {
     "access": "public"