@mgdis/stencil-helpers 1.1.9 → 2.1.0

package/README.md

@@ -5,7 +5,7 @@ This package centralizes helper functions for your [Stencil](https://stenciljs.c
 - **Components**: Centralizes all component utilities.
 - **Locale**: Centralizes all necessary locale utilities for managing content translation.
 - **Storybook**: Centralizes all Storybook helpers useful for building your own Storybook.
-- **Test**: Centralizes all test utilities to simplify testing your components.
+- **Tests**: Centralizes all test utilities to simplify testing your components.
 
 ## Installation
 
@@ -15,4 +15,4 @@ pnpm i @mgdis/stencil-helpers
 
 ## Documentation
 
-Read the full [documentation](./doc/README.md)
+Read the full [documentation](./docs/README.md)

package/dist/components/index.d.ts

@@ -5,6 +5,12 @@
  * @returns ID
  */
 export declare const createID: (prefix?: string, length?: number) => string;
+/**
+ * Validate html `id` format
+ * @param newValue - id value to validate
+ * @returns true if `id` is valid
+ */
+export declare const isValideID: (newValue: unknown) => boolean;
 /**
  * Class to manage component classlist
  */
@@ -75,7 +81,13 @@ export declare const getParentWindows: (localWindow: Window, windows?: Window[])
  * @param value - value to check
  * @returns `true` if string is valid
  */
-export declare const isValidString: (value: unknown) => boolean;
+export declare const isValidString: (value: unknown) => value is string;
+/**
+ * Value to stringify
+ * @param value
+ * @returns stringified value
+ */
+export declare const toString: (value: unknown) => string;
 /**
  * Cleans string characters by removing special characters and converting to lowercase.
  * @param text - text to clean

package/dist/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,eAAO,MAAM,QAAQ,wCAA+B,MAWnD,CAAC;AAEF;;GAEG;AACH,qBAAa,SAAS;IACpB;;OAEG;IACH,OAAO,EAAE,MAAM,EAAE,CAAC;gBAEN,SAAS,GAAE,MAAM,EAAO;IAIpC;;;OAGG;IACH,GAAG,cAAe,MAAM,KAAG,IAAI,CAI7B;IAEF;;;OAGG;IACH,MAAM,cAAe,MAAM,KAAG,IAAI,CAKhC;IAEF;;;;OAIG;IACH,GAAG,cAAe,MAAM,KAAG,OAAO,CAEhC;IAEF;;;OAGG;IACH,IAAI,QAAO,MAAM,CAEf;CACH;AAED;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,UAAW,OAAO,KAAG,KAAK,IAAI,MAAM,EAA2E,CAAC;AAE9I;;;;;GAKG;AACH,eAAO,MAAM,SAAS,YAAa,OAAO,YAAY,MAAM,EAAE,KAAG,OAEhE,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,iBAAiB,kHAAgH,CAAC;AAE/I;;;;GAIG;AACH,eAAO,MAAM,UAAU,gBAAiB,MAAM,KAAG,MAAM,EAItD,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,gBAAiB,MAAM,YAAW,MAAM,EAAE,KAAQ,MAAM,EAgBpF,CAAC;AAkBF;;;;GAIG;AACH,eAAO,MAAM,aAAa,UAAW,OAAO,KAAG,OAA2D,CAAC;AAE3G;;;;;;;;;GASG;AACH,eAAO,MAAM,WAAW,SAAU,MAAM,KAAG,MAMjC,CAAC;AAEX;;;;GAIG;AACH,eAAO,MAAM,QAAQ,aAAoB,MAAM,IAAI,KAAG,OAAO,CAAC,IAAI,CAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,eAAO,MAAM,QAAQ,wCAA+B,MAWnD,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,UAAU,aAAc,OAAO,KAAG,OAA+F,CAAC;AAE/I;;GAEG;AACH,qBAAa,SAAS;IACpB;;OAEG;IACH,OAAO,EAAE,MAAM,EAAE,CAAC;gBAEN,SAAS,GAAE,MAAM,EAAO;IAIpC;;;OAGG;IACH,GAAG,cAAe,MAAM,KAAG,IAAI,CAI7B;IAEF;;;OAGG;IACH,MAAM,cAAe,MAAM,KAAG,IAAI,CAKhC;IAEF;;;;OAIG;IACH,GAAG,cAAe,MAAM,KAAG,OAAO,CAEhC;IAEF;;;OAGG;IACH,IAAI,QAAO,MAAM,CAEf;CACH;AAED;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,UAAW,OAAO,KAAG,KAAK,IAAI,MAAM,EAA2E,CAAC;AAE9I;;;;;GAKG;AACH,eAAO,MAAM,SAAS,YAAa,OAAO,YAAY,MAAM,EAAE,KAAG,OAEhE,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,iBAAiB,kHAAgH,CAAC;AAE/I;;;;GAIG;AACH,eAAO,MAAM,UAAU,gBAAiB,MAAM,KAAG,MAAM,EAItD,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,gBAAiB,MAAM,YAAW,MAAM,EAAE,KAAQ,MAAM,EAgBpF,CAAC;AAkBF;;;;GAIG;AACH,eAAO,MAAM,aAAa,UAAW,OAAO,KAAG,KAAK,IAAI,MAA0D,CAAC;AAEnH;;;;GAIG;AACH,eAAO,MAAM,QAAQ,UAAW,OAAO,KAAG,MAGzC,CAAC;AAEF;;;;;;;;;GASG;AACH,eAAO,MAAM,WAAW,SAAU,MAAM,KAAG,MAMjC,CAAC;AAEX;;;;GAIG;AACH,eAAO,MAAM,QAAQ,aAAoB,MAAM,IAAI,KAAG,OAAO,CAAC,IAAI,CAAe,CAAC"}

package/dist/ide/index.d.ts

@@ -49,23 +49,28 @@ export declare const webTypesGenerator: (name: string, version: string, jsonDocs
                         description: string;
                     }[];
                 };
+                css: {
+                    properties: {
+                        name: string;
+                        description: string;
+                    }[];
+                };
             }[];
         };
     };
 };
 /**
  * Generate custom HTML datasets for VS Code
- * @param version - Library version
  * @param jsonDocs - Stencil JSON doc
  * @param storybookBaseUrl - Storybook Base Url
  * @returns custom HTML datasets
  * @example
  * ```ts
- * const customDataJson = vsCodeGenerator('1.0.0', jsonDocs, 'https://storybook.example.com', 'https://sources.example.com');
+ * const customDataJson = vsCodeGenerator(jsonDocs, 'https://storybook.example.com', 'https://sources.example.com');
  * ```
  */
-export declare const vsCodeGenerator: (version: string, jsonDocs: JsonDocs, storybookBaseUrl: string, sourceBaseUrl: string) => {
-    version: string;
+export declare const vsCodeGenerator: (jsonDocs: JsonDocs, storybookBaseUrl: string, sourceBaseUrl: string) => {
+    version: number;
     tags: {
         name: string;
         description: string;
@@ -86,4 +91,20 @@ export declare const vsCodeGenerator: (version: string, jsonDocs: JsonDocs, stor
     globalAttributes: never[];
     valueSets: never[];
 };
+/**
+ * Generate custom CSS datasets for VS Code
+ * @param jsonDocs - Stencil JSON doc
+ * @returns custom CSS datasets
+ * @example
+ * ```ts
+ * const customDataJson = vsCodeCssGenerator(jsonDocs);
+ * ```
+ */
+export declare const vsCodeCssGenerator: (jsonDocs: JsonDocs) => {
+    version: number;
+    properties: {
+        name: string;
+        description: string;
+    }[];
+};
 //# sourceMappingURL=index.d.ts.map

package/dist/ide/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ide/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAmC,MAAM,wBAAwB,CAAC;AA2EnF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,iBAAiB,SAAU,MAAM,WAAW,MAAM,YAAY,QAAQ,oBAAoB,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6C3G,CAAC;AA4BH;;;;;;;;;;GAUG;AACH,eAAO,MAAM,eAAe,YAAa,MAAM,YAAY,QAAQ,oBAAoB,MAAM,iBAAiB,MAAM;;;;;;;;;;;;;;;;;;;;;CAkBlH,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ide/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAmC,MAAM,wBAAwB,CAAC;AA2EnF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,iBAAiB,SAAU,MAAM,WAAW,MAAM,YAAY,QAAQ,oBAAoB,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmD3G,CAAC;AA4BH;;;;;;;;;GASG;AACH,eAAO,MAAM,eAAe,aAAc,QAAQ,oBAAoB,MAAM,iBAAiB,MAAM;;;;;;;;;;;;;;;;;;;;;CAkBjG,CAAC;AAEH;;;;;;;;GAQG;AACH,eAAO,MAAM,kBAAkB,aAAc,QAAQ;;;;;;CAQnD,CAAC"}

package/dist/index.d.ts

@@ -2,5 +2,6 @@ export * from './components';
 export * from './ide';
 export * from './locale';
 export * from './storybook';
-export * from './test';
+export * from './tests';
+export * from './types';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}

package/dist/index.es.js

@@ -4,14 +4,14 @@ var X = (e) => {
 };
 var he = (e, t, s) => t in e ? ve(e, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : e[t] = s;
 var g = (e, t, s) => he(e, typeof t != "symbol" ? t + "" : t, s), ye = (e, t, s) => t.has(e) || X("Cannot " + s);
-var k = (e, t, s) => (ye(e, t, "read from private field"), s ? s.call(e) : t.get(e)), P = (e, t, s) => t.has(e) ? X("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, s);
-const ze = (e = "", t = 10) => {
+var k = (e, t, s) => (ye(e, t, "read from private field"), s ? s.call(e) : t.get(e)), w = (e, t, s) => t.has(e) ? X("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, s);
+const Ie = (e = "", t = 10) => {
   const s = new Uint8Array(t);
   crypto.getRandomValues(s);
   const r = Array.from(s).map((o) => o.toString(16).padStart(2, "0")).join("").slice(0, t);
   return e !== "" ? `${e}-${r}` : r;
-};
-class Ie {
+}, Ge = (e) => me(e) && /^([a-z][a-z0-9]*)(-[a-z0-9]+)*$/.exec(e) !== null;
+class Xe {
   constructor(t = []) {
     /**
      * Available classes
@@ -46,7 +46,7 @@ class Ie {
     this.classes = t;
   }
 }
-const Ge = (e) => Array.isArray(e) && e.every((t) => typeof t == "string"), Xe = (e, t) => t.includes(e == null ? void 0 : e.tagName.toLowerCase()), Ke = 'a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"]), [identifier], mg-button', Qe = (e) => {
+const Je = (e) => Array.isArray(e) && e.every((t) => typeof t == "string"), Ke = (e, t) => t.includes(e == null ? void 0 : e.tagName.toLowerCase()), Qe = 'a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"]), [identifier], mg-button', Ze = (e) => {
   const t = te(e), s = se(e);
   return [e, ...t, ...s];
 }, te = (e, t = []) => {
@@ -63,7 +63,7 @@ const Ge = (e) => Array.isArray(e) && e.every((t) => typeof t == "string"), Xe =
     for (const s of Array.from(e.frames))
       t.push(s), se(s, t);
   return t;
-}, Ze = (e) => typeof e == "string" && e.trim() !== "", Je = (e) => typeof e == "string" ? e.toLocaleLowerCase().normalize("NFD").replaceAll(/[\u0300-\u036f]/g, "") : e, Ye = async (e) => e();
+}, me = (e) => typeof e == "string" && e.trim() !== "", Ye = (e) => typeof e == "object" ? JSON.stringify(e) : `${e}`, Ve = (e) => typeof e == "string" ? e.toLocaleLowerCase().normalize("NFD").replaceAll(/[\u0300-\u036f]/g, "") : e, et = async (e) => e();
 var E = {
   allRenderFn: !1,
   cmpDidLoad: !0,
@@ -153,11 +153,11 @@ var E = {
   attachStyles: !0,
   // TODO(STENCIL-914): remove this option when `experimentalSlotFixes` is the default behavior
   experimentalSlotFixes: !1
-}, me = Object.defineProperty, be = (e, t) => {
+}, be = Object.defineProperty, Se = (e, t) => {
   for (var s in t)
-    me(e, s, { get: t[s], enumerable: !0 });
-}, K = (e, t) => t in e, Q = "http://www.w3.org/1999/xlink", q = typeof window < "u" ? window : {}, _ = q.document || { head: {} };
-q.HTMLElement;
+    be(e, s, { get: t[s], enumerable: !0 });
+}, J = (e, t) => t in e, K = "http://www.w3.org/1999/xlink", B = typeof window < "u" ? window : {}, _ = B.document || { head: {} };
+B.HTMLElement;
 var L = {
   $flags$: 0,
   $resourcesUrl$: "",
@@ -166,13 +166,13 @@ var L = {
   ael: (e, t, s, r) => e.addEventListener(t, s, r),
   rel: (e, t, s, r) => e.removeEventListener(t, s, r),
   ce: (e, t) => new CustomEvent(e, t)
-}, Z = {}, Se = "http://www.w3.org/2000/svg", Te = "http://www.w3.org/1999/xhtml", ke = (e) => e != null, re = (e) => (e = typeof e, e === "object" || e === "function"), xe = {};
-be(xe, {
+}, Q = {}, Te = "http://www.w3.org/2000/svg", ke = "http://www.w3.org/1999/xhtml", xe = (e) => e != null, re = (e) => (e = typeof e, e === "object" || e === "function"), Ae = {};
+Se(Ae, {
   err: () => oe,
-  map: () => Ae,
+  map: () => Ee,
   ok: () => U,
-  unwrap: () => Ee,
-  unwrapErr: () => Le
+  unwrap: () => Le,
+  unwrapErr: () => je
 });
 var U = (e) => ({
   isOk: !0,
@@ -183,7 +183,7 @@ var U = (e) => ({
   isErr: !0,
   value: e
 });
-function Ae(e, t) {
+function Ee(e, t) {
   if (e.isOk) {
     const s = t(e.value);
     return s instanceof Promise ? s.then((r) => U(r)) : U(s);
@@ -194,15 +194,15 @@ function Ae(e, t) {
   }
   throw "should never get here";
 }
-var Ee = (e) => {
+var Le = (e) => {
   if (e.isOk)
     return e.value;
   throw e.value;
-}, Le = (e) => {
+}, je = (e) => {
   if (e.isErr)
     return e.value;
   throw e.value;
-}, je = (e, t, ...s) => {
+}, Re = (e, t, ...s) => {
   let r = null, o = null, n = null, l = !1, a = !1;
   const c = [], d = (i) => {
     for (let $ = 0; $ < i.length; $++)
@@ -220,9 +220,9 @@ var Ee = (e) => {
     $children$: null
   };
   return s.$attrs$ = null, s.$key$ = null, s.$name$ = null, s;
-}, Re = {}, Oe = (e) => e && e.$tag$ === Re, J = (e, t, s, r, o, n) => {
+}, Oe = {}, Me = (e) => e && e.$tag$ === Oe, Z = (e, t, s, r, o, n) => {
   if (s !== r) {
-    let l = K(e, t), a = t.toLowerCase();
+    let l = J(e, t), a = t.toLowerCase();
     if (t === "class") {
       const c = e.classList, d = Y(s), f = Y(r);
       c.remove(...d.filter((i) => i && !f.includes(i))), c.add(...f.filter((i) => i && !d.includes(i)));
@@ -234,9 +234,9 @@ var Ee = (e) => {
     } else if (t !== "key") if (t === "ref")
       r && r(e);
     else if (!e.__lookupSetter__(t) && t[0] === "o" && t[1] === "n") {
-      if (t[2] === "-" ? t = t.slice(3) : K(q, a) ? t = a.slice(2) : t = a[2] + t.slice(3), s || r) {
+      if (t[2] === "-" ? t = t.slice(3) : J(B, a) ? t = a.slice(2) : t = a[2] + t.slice(3), s || r) {
         const c = t.endsWith(ne);
-        t = t.replace(_e, ""), s && L.rel(e, t, s, c), r && L.ael(e, t, r, c);
+        t = t.replace(Ne, ""), s && L.rel(e, t, s, c), r && L.ael(e, t, r, c);
       }
     } else {
       const c = re(r);
@@ -251,15 +251,15 @@ var Ee = (e) => {
         } catch {
         }
       let d = !1;
-      a !== (a = a.replace(/^xlink\:?/, "")) && (t = a, d = !0), r == null || r === !1 ? (r !== !1 || e.getAttribute(t) === "") && (d ? e.removeAttributeNS(Q, t) : e.removeAttribute(t)) : (!l || n & 4 || o) && !c && (r = r === !0 ? "" : r, d ? e.setAttributeNS(Q, t, r) : e.setAttribute(t, r));
+      a !== (a = a.replace(/^xlink\:?/, "")) && (t = a, d = !0), r == null || r === !1 ? (r !== !1 || e.getAttribute(t) === "") && (d ? e.removeAttributeNS(K, t) : e.removeAttribute(t)) : (!l || n & 4 || o) && !c && (r = r === !0 ? "" : r, d ? e.setAttributeNS(K, t, r) : e.setAttribute(t, r));
     }
   }
-}, Me = /\s/, Y = (e) => e ? e.split(Me) : [], ne = "Capture", _e = new RegExp(ne + "$"), le = (e, t, s) => {
-  const r = t.$elm$.nodeType === 11 && t.$elm$.host ? t.$elm$.host : t.$elm$, o = e && e.$attrs$ || Z, n = t.$attrs$ || Z;
+}, _e = /\s/, Y = (e) => e ? e.split(_e) : [], ne = "Capture", Ne = new RegExp(ne + "$"), le = (e, t, s) => {
+  const r = t.$elm$.nodeType === 11 && t.$elm$.host ? t.$elm$.host : t.$elm$, o = e && e.$attrs$ || Q, n = t.$attrs$ || Q;
   for (const l of V(Object.keys(o)))
-    l in n || J(r, l, o[l], void 0, s, t.$flags$);
+    l in n || Z(r, l, o[l], void 0, s, t.$flags$);
   for (const l of V(Object.keys(n)))
-    J(r, l, o[l], n[l], s, t.$flags$);
+    Z(r, l, o[l], n[l], s, t.$flags$);
 };
 function V(e) {
   return e.includes("ref") ? (
@@ -270,11 +270,11 @@ function V(e) {
     e
   );
 }
-var x, H, j, N = !1, F = !1, z = !1, h = !1, C = (e, t, s, r) => {
+var x, H, j, N = !1, F = !1, q = !1, h = !1, C = (e, t, s, r) => {
   var o;
   const n = t.$children$[s];
   let l = 0, a, c, d;
-  if (N || (z = !0, n.$tag$ === "slot" && (x && r.classList.add(x + "-s"), n.$flags$ |= n.$children$ ? (
+  if (N || (q = !0, n.$tag$ === "slot" && (x && r.classList.add(x + "-s"), n.$flags$ |= n.$children$ ? (
     // slot element has fallback content
     // still create an element that "mocks" the slot element
     2
@@ -289,9 +289,9 @@ var x, H, j, N = !1, F = !1, z = !1, h = !1, C = (e, t, s, r) => {
     a = n.$elm$ = _.createTextNode("");
   else {
     if (h || (h = n.$tag$ === "svg"), a = n.$elm$ = _.createElementNS(
-      h ? Se : Te,
+      h ? Te : ke,
       !N && E.slotRelocation && n.$flags$ & 2 ? "slot-fb" : n.$tag$
-    ), h && n.$tag$ === "foreignObject" && (h = !1), le(null, n, h), !!a.getRootNode().querySelector("body") && E.scoped && ke(x) && a["s-si"] !== x && a.classList.add(a["s-si"] = x), G(a, r), n.$children$)
+    ), h && n.$tag$ === "foreignObject" && (h = !1), le(null, n, h), !!a.getRootNode().querySelector("body") && E.scoped && xe(x) && a["s-si"] !== x && a.classList.add(a["s-si"] = x), G(a, r), n.$children$)
       for (l = 0; l < n.$children$.length; ++l)
         c = C(e, n, l, a), c && a.appendChild(c);
     n.$tag$ === "svg" ? h = !1 : a.tagName === "foreignObject" && (h = !0);
@@ -307,7 +307,7 @@ var x, H, j, N = !1, F = !1, z = !1, h = !1, C = (e, t, s, r) => {
   }
   for (let r = s.length - 1; r >= 0; r--) {
     const o = s[r];
-    o["s-hn"] !== j && o["s-ol"] && (T(ce(o), o, I(o)), o["s-ol"].remove(), o["s-ol"] = void 0, o["s-sh"] = void 0, z = !0), t && R(o, t);
+    o["s-hn"] !== j && o["s-ol"] && (T(ce(o), o, I(o)), o["s-ol"].remove(), o["s-ol"] = void 0, o["s-sh"] = void 0, q = !0), t && R(o, t);
   }
   L.$flags$ &= -2;
 }, ie = (e, t, s, r, o, n) => {
@@ -322,7 +322,7 @@ var x, H, j, N = !1, F = !1, z = !1, h = !1, C = (e, t, s, r) => {
       $e(o), n && (F = !0, n["s-ol"] ? n["s-ol"].remove() : R(n, !0), n.remove());
     }
   }
-}, Ne = (e, t, s, r, o = !1) => {
+}, Fe = (e, t, s, r, o = !1) => {
   let n = 0, l = 0, a = 0, c = 0, d = t.length - 1, f = t[0], i = t[d], $ = r.length - 1, u = r[0], p = r[$], m, y;
   for (; n <= d && l <= $; )
     if (f == null)
@@ -366,7 +366,7 @@ var x, H, j, N = !1, F = !1, z = !1, h = !1, C = (e, t, s, r) => {
 ) : s ? !0 : e.$key$ === t.$key$ : !1, I = (e) => e && e["s-ol"] || e, ce = (e) => (e["s-ol"] ? e["s-ol"] : e).parentNode, A = (e, t, s = !1) => {
   const r = t.$elm$ = e.$elm$, o = e.$children$, n = t.$children$, l = t.$tag$, a = t.$text$;
   let c;
-  a === null ? (h = l === "svg" ? !0 : l === "foreignObject" ? !1 : h, l === "slot" && !N || le(e, t, h), o !== null && n !== null ? Ne(r, o, t, n, s) : n !== null ? (e.$text$ !== null && (r.textContent = ""), ie(r, null, t, n, 0, n.length - 1)) : (
+  a === null ? (h = l === "svg" ? !0 : l === "foreignObject" ? !1 : h, l === "slot" && !N || le(e, t, h), o !== null && n !== null ? Fe(r, o, t, n, s) : n !== null ? (e.$text$ !== null && (r.textContent = ""), ie(r, null, t, n, 0, n.length - 1)) : (
     // don't do this on initial render as it can cause non-hydrated content to be removed
     !s && E.updatable && o !== null && ae(o, 0, o.length - 1)
   ), h && l === "svg" && (h = !1)) : (c = r["s-cr"]) ? c.parentNode.textContent = a : e.$text$ !== a && (r.data = a);
@@ -435,9 +435,9 @@ var x, H, j, N = !1, F = !1, z = !1, h = !1, C = (e, t, s, r) => {
       for (const n of Array.from(e.childNodes))
         G(n, e, !0);
   }
-}, Fe = (e, t, s = !1) => {
+}, Ce = (e, t, s = !1) => {
   var r, o, n, l, a;
-  const c = e.$hostElement$, d = e.$cmpMeta$, f = e.$vnode$ || W(null, null), i = Oe(t) ? t : je(null, null, t);
+  const c = e.$hostElement$, d = e.$cmpMeta$, f = e.$vnode$ || W(null, null), i = Me(t) ? t : Re(null, null, t);
   if (j = c.tagName, d.$attrsToReflect$ && (i.$attrs$ = i.$attrs$ || {}, d.$attrsToReflect$.map(
     ([$, u]) => i.$attrs$[u] = c[$]
   )), s && i.$attrs$)
@@ -445,7 +445,7 @@ var x, H, j, N = !1, F = !1, z = !1, h = !1, C = (e, t, s, r) => {
       c.hasAttribute($) && !["key", "ref", "style", "class"].includes($) && (i.$attrs$[$] = c[$]);
   i.$tag$ = null, i.$flags$ |= 4, e.$vnode$ = i, i.$elm$ = f.$elm$ = c.shadowRoot || c, x = c["s-sc"], N = (d.$flags$ & 1) !== 0, H = c["s-cr"], F = !1, A(f, i, s);
   {
-    if (L.$flags$ |= 1, z) {
+    if (L.$flags$ |= 1, q) {
       ue(i.$elm$);
       for (const $ of b) {
         const u = $.$nodeToRelocate$;
@@ -486,19 +486,19 @@ var x, H, j, N = !1, F = !1, z = !1, h = !1, C = (e, t, s, r) => {
       $["s-hn"] !== j && !$["s-sh"] && (s && $["s-ih"] == null && ($["s-ih"] = (a = $.hidden) != null ? a : !1), $.hidden = !0);
   H = void 0;
 };
-const Ce = (e, t, s) => {
+const De = (e, t, s) => {
   [null, void 0, "", !1].includes(s) || ["innerHTML", "style"].includes(t) || e.setAttribute(t, ["object", "function"].includes(typeof s) ? "/!\\ Object props are not rendered in the code example" : s);
 }, pe = (e, t, s, r, o) => {
   if (t && typeof t == "string") {
     const n = document.createElement(t);
     Object.keys(s || {}).forEach((l) => {
-      Ce(n, l, s[l]);
+      De(n, l, s[l]);
     }), r == null || r.forEach((l) => {
       pe(n, l.$tag$, l.$attrs$, l.$children$, l.$text$);
     }), s != null && s.innerHTML && (n.innerHTML = s.innerHTML), e.appendChild(n);
   }
   o && (e.innerHTML = o);
-}, Ve = (e, t) => {
+}, tt = (e, t) => {
   const s = {};
   if (typeof e != "object")
     throw new Error("filterArgs - args isn't an object.");
@@ -508,11 +508,11 @@ const Ce = (e, t, s) => {
       (!t || !Object.keys(t).includes(r) || t[r] !== o) && (s[n] = o);
     }
   return s;
-}, et = (e, t) => {
+}, st = (e, t) => {
   var r, o;
   const s = document.getElementById("storybook-root");
   if (s !== null)
-    return (o = document.querySelector("[lang]")) == null || o.setAttribute("lang", ((r = t.globals) == null ? void 0 : r.locale) || "en"), Fe(
+    return (o = document.querySelector("[lang]")) == null || o.setAttribute("lang", ((r = t.globals) == null ? void 0 : r.locale) || "en"), Ce(
       {
         $ancestorComponent$: void 0,
         $flags$: 0,
@@ -525,7 +525,7 @@ const Ce = (e, t, s) => {
       },
       e(t)
     ), s.children[s.children.length - 1];
-}, tt = ({ $tag$: e, $attrs$: t, $children$: s, $text$: r }) => {
+}, rt = ({ $tag$: e, $attrs$: t, $children$: s, $text$: r }) => {
   const o = document.createElement("div");
   return pe(o, e, t, s, r), o.innerHTML;
 }, D = (e, t) => {
@@ -534,8 +534,8 @@ const Ce = (e, t, s) => {
   const s = t.split("/");
   return `${e}${s.slice(2, s.length - 1).join("-")}--docs`;
 };
-var S, w;
-class st {
+var S, P;
+class ot {
   constructor(t) {
     /**
      * JsonDocs
@@ -546,14 +546,14 @@ class st {
      * @param tagName - tag name we want to get the data from
      * @returns component data
      */
-    P(this, S, (t) => this.jsonDoc.components.find((s) => s.tag === t));
+    w(this, S, (t) => this.jsonDoc.components.find((s) => s.tag === t));
     /**
      * Get the control for the given prop
      * Based on https://storybook.js.org/docs/api/arg-types#controltype
      * @param prop - prop to get control for
      * @returns control type and options if applicable
      */
-    P(this, w, (t) => {
+    w(this, P, (t) => {
       const s = t.type.replace(/"([^"]+)"/g, "$1").replace(/\s/g, "").replace(/\(.*?\)/g, (r) => r.replace(/\|/g, " OR ")).split("|").map((r) => r.trim().replace(/ OR /g, "|"));
       return t.type === "string" ? { control: { type: "text" } } : t.type === "number" ? { control: { type: "number" } } : t.type === "boolean" ? { control: { type: "boolean" } } : t.type.startsWith("{") && t.type.endsWith("}") ? { control: { type: "object" } } : s.length > 1 ? s.includes("string") ? { control: { type: "text" } } : s.every((r) => r == null ? void 0 : r.includes("[]")) ? { control: { type: "object" } } : (s.unshift(void 0), { control: { type: "select" }, options: s }) : { control: { type: "object" } };
     });
@@ -564,7 +564,7 @@ class st {
      */
     g(this, "extractArgTypes", (t) => {
       const s = k(this, S).call(this, t), r = s == null ? void 0 : s.props.reduce((f, i) => {
-        const { control: $, options: u } = k(this, w).call(this, i);
+        const { control: $, options: u } = k(this, P).call(this, i);
         return {
           ...f,
           [i.name]: {
@@ -682,8 +682,8 @@ class st {
     this.jsonDoc = t;
   }
 }
-S = new WeakMap(), w = new WeakMap();
-const De = (e, t) => {
+S = new WeakMap(), P = new WeakMap();
+const Pe = (e, t) => {
   if (t)
     return `${e}${t}`;
 }, ge = (e) => {
@@ -712,9 +712,9 @@ const De = (e, t) => {
 `, t += e.slots.map(({ name: o, docs: n }) => `- \`${o}\`: ${n}
 `).join(""), t += `
 `), t;
-}, B = (e) => `${e.docs}
+}, z = (e) => `${e.docs}
 
-Type: \`${e.type}\``, rt = (e, t, s, r) => ({
+Type: \`${e.type}\``, nt = (e, t, s, r) => ({
   $schema: "https://json.schemastore.org/web-types",
   name: e,
   version: t,
@@ -729,7 +729,7 @@ Type: \`${e.type}\``, rt = (e, t, s, r) => ({
           "doc-url": n,
           attributes: o.props.filter((l) => l.attr).map((l) => ({
             name: l.attr,
-            description: B(l),
+            description: z(l),
             "doc-url": n,
             value: {
               type: l.type,
@@ -740,7 +740,7 @@ Type: \`${e.type}\``, rt = (e, t, s, r) => ({
           js: {
             properties: o.props.map((l) => ({
               name: l.name,
-              description: B(l),
+              description: z(l),
               "doc-url": n,
               value: {
                 type: l.type,
@@ -752,6 +752,12 @@ Type: \`${e.type}\``, rt = (e, t, s, r) => ({
               name: l.event,
               description: l.docs
             }))
+          },
+          css: {
+            properties: o.styles.map((l) => ({
+              name: l.name,
+              description: l.docs
+            }))
           }
         };
       })
@@ -759,38 +765,46 @@ Type: \`${e.type}\``, rt = (e, t, s, r) => ({
   }
 }), we = (e, t, s) => [
   { name: "Storybook", url: D(e, s) },
-  { name: "Sources", url: De(t, s) }
-], Pe = (e) => {
+  { name: "Sources", url: Pe(t, s) }
+], Ue = (e) => {
   if (!e.values.some(({ value: t }) => t === void 0))
     return e.values.map(({ value: t }) => ({ name: t }));
-}, ot = (e, t, s, r) => ({
-  version: e,
-  tags: t.components.map((o) => {
-    const n = we(s, r, o.filePath);
+}, lt = (e, t, s) => ({
+  version: 1.1,
+  tags: e.components.map((r) => {
+    const o = we(t, s, r.filePath);
     return {
-      name: o.tag,
-      description: ge(o),
-      attributes: o.props.map((l) => ({
-        name: l.attr || l.name,
-        description: B(l),
-        values: Pe(l),
-        references: n
+      name: r.tag,
+      description: ge(r),
+      attributes: r.props.map((n) => ({
+        name: n.attr || n.name,
+        description: z(n),
+        values: Ue(n),
+        references: o
       })),
-      references: n
+      references: o
     };
   }),
   globalAttributes: [],
   valueSets: []
-}), nt = (e) => {
+}), it = (e) => ({
+  version: 1.1,
+  properties: e.components.flatMap(
+    (t) => t.styles.map((s) => ({
+      name: s.name,
+      description: s.docs
+    }))
+  )
+}), at = (e) => {
   const t = { value: "2023", pattern: "yyyy" }, s = { value: "12", pattern: "mm" }, r = { value: "24", pattern: "dd" };
-  return He([t.value, s.value, r.value].join("-"), e, { timeZone: "UTC" }).replace(t.value, t.pattern).replace(s.value, s.pattern).replace(r.value, r.pattern);
-}, lt = (e) => e.toISOString().split("T")[0], Ue = (e, t, s) => {
+  return ze([t.value, s.value, r.value].join("-"), e, { timeZone: "UTC" }).replace(t.value, t.pattern).replace(s.value, s.pattern).replace(r.value, r.pattern);
+}, ct = (e) => e.toISOString().split("T")[0], We = (e, t, s) => {
   const r = e.closest("[lang]"), o = Intl.NumberFormat.supportedLocalesOf(r == null ? void 0 : r.lang), n = o.length > 0 && typeof o[0] == "string" ? o[0] : navigator.language || s, l = n.split("-").shift();
   return {
     locale: n,
     messages: t[l] || t[s]
   };
-}, it = (e, t, s) => new Intl.NumberFormat(t, { style: "currency", currency: s }).format(e), at = (e, t, s = 0) => new Intl.NumberFormat(t, { minimumFractionDigits: s }).format(s > 0 ? Number(e == null ? void 0 : e.toFixed(s)) : e), We = /^\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])$/, He = (e, t, s) => typeof e != "string" || e === "" || !We.test(e) ? "" : new Intl.DateTimeFormat(t, s).format(new Date(e)), ct = (e, t) => (s) => Ue(s, e, t), ft = ({ disconnect: e, observe: t, takeRecords: s }) => {
+}, ft = (e, t, s) => new Intl.NumberFormat(t, { style: "currency", currency: s }).format(e), ut = (e, t, s = 0) => new Intl.NumberFormat(t, { minimumFractionDigits: s }).format(s > 0 ? Number(e == null ? void 0 : e.toFixed(s)) : e), He = /^\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])$/, ze = (e, t, s) => typeof e != "string" || e === "" || !He.test(e) ? "" : new Intl.DateTimeFormat(t, s).format(new Date(e)), $t = (e, t) => (s) => We(s, e, t), dt = ({ disconnect: e, observe: t, takeRecords: s }) => {
   class r {
     constructor(n) {
       /**
@@ -819,7 +833,7 @@ Type: \`${e.type}\``, rt = (e, t, s, r) => ({
       value: r
     });
   }), r;
-}, ut = ({ disconnect: e, observe: t }) => {
+}, pt = ({ disconnect: e, observe: t }) => {
   class s {
     constructor(o) {
       /**
@@ -859,7 +873,7 @@ class Be extends Event {
     g(this, "detail");
   }
 }
-const $t = () => {
+const gt = () => {
   class e extends Be {
   }
   return [window, global].forEach((t) => {
@@ -871,32 +885,35 @@ const $t = () => {
   }), e;
 };
 export {
-  Ie as ClassList,
-  st as StorybookPreview,
-  Ge as allItemsAreString,
-  Je as cleanString,
-  ze as createID,
-  We as dateRegExp,
-  lt as dateToString,
-  ct as defineLocales,
-  Ve as filterArgs,
-  Ke as focusableElements,
-  nt as getLocaleDatePattern,
+  Xe as ClassList,
+  ot as StorybookPreview,
+  Je as allItemsAreString,
+  Ve as cleanString,
+  Ie as createID,
+  He as dateRegExp,
+  ct as dateToString,
+  $t as defineLocales,
+  tt as filterArgs,
+  Qe as focusableElements,
+  at as getLocaleDatePattern,
   te as getParentWindows,
-  tt as getStoryHTML,
+  rt as getStoryHTML,
   D as getStorybookUrl,
-  Qe as getWindows,
-  Xe as isTagName,
-  Ze as isValidString,
-  it as localeCurrency,
-  He as localeDate,
-  at as localeNumber,
-  Ye as nextTick,
-  ft as setupMutationObserverMock,
-  ut as setupResizeObserverMock,
-  $t as setupSubmitEventMock,
-  et as stencilWrapper,
-  ot as vsCodeGenerator,
-  rt as webTypesGenerator
+  Ze as getWindows,
+  Ke as isTagName,
+  me as isValidString,
+  Ge as isValideID,
+  ft as localeCurrency,
+  ze as localeDate,
+  ut as localeNumber,
+  et as nextTick,
+  dt as setupMutationObserverMock,
+  pt as setupResizeObserverMock,
+  gt as setupSubmitEventMock,
+  st as stencilWrapper,
+  Ye as toString,
+  it as vsCodeCssGenerator,
+  lt as vsCodeGenerator,
+  nt as webTypesGenerator
 };
 //# sourceMappingURL=index.es.js.map