@redvars/peacock 3.1.1 → 3.1.3

package/dist/utils-DD_cg6Ms.js

@@ -0,0 +1,157 @@
+import { n } from './property-BXcRN0hQ.js';
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */function r(r){return n({...r,state:true,attribute:false})}
+
+async function createCacheFetch(name) {
+    let cache = null;
+    // This map tracks requests currently being processed
+    const inFlightRequests = new Map();
+    try {
+        cache = await window.caches.open(name);
+    }
+    catch (e) {
+        console.warn('window.caches access not allowed');
+    }
+    return async (url) => {
+        // 1. Check if we are already fetching this URL
+        if (inFlightRequests.has(url)) {
+            // Return the existing promise instead of starting a new one
+            return inFlightRequests.get(url);
+        }
+        // 2. Create the main logic as a promise
+        const fetchPromise = (async () => {
+            const request = new Request(url);
+            // Check Cache first
+            if (cache) {
+                const cachedResponse = await cache.match(request);
+                if (cachedResponse) {
+                    return cachedResponse.text();
+                }
+            }
+            // Prepare network request
+            const urlObj = new URL(request.url);
+            const isSameOrigin = urlObj.origin === window.location.origin;
+            const response = await fetch(request.url, {
+                method: 'GET',
+                mode: isSameOrigin ? 'no-cors' : 'cors',
+                credentials: isSameOrigin ? 'same-origin' : 'omit',
+            });
+            // --- Handle 404 ---
+            if (response.status === 404) {
+                console.error(`[Fetch Error] Resource not found (404): ${url}`);
+                return ''; // Return empty string as requested
+            }
+            const result = await response.text();
+            // Update Cache if applicable
+            if (cache && response.status === 200) {
+                // We clone the response logic by creating a new Response with the text body
+                await cache.put(request, new Response(result, {
+                    status: response.status,
+                    statusText: response.statusText,
+                    headers: response.headers,
+                }));
+            }
+            return result;
+        })();
+        // 3. Store the promise in the map
+        inFlightRequests.set(url, fetchPromise);
+        try {
+            // 4. Wait for the result
+            return await fetchPromise;
+        }
+        finally {
+            // 5. Clean up: Remove the promise from the map when done
+            // This ensures subsequent calls (after this one finishes) can start fresh
+            inFlightRequests.delete(url);
+        }
+    };
+}
+// Basic sanitization: remove <script>, <foreignObject>, event handler attributes (on*), and iframes
+function sanitizeSvg(rawSvg) {
+    try {
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(rawSvg, 'image/svg+xml');
+        // remove script tags
+        const scripts = Array.from(doc.querySelectorAll('script'));
+        scripts.forEach(n => n.remove());
+        // remove foreignObject and iframe-like elements
+        const foreigns = Array.from(doc.querySelectorAll('foreignObject, iframe'));
+        foreigns.forEach(n => n.remove());
+        // remove event handler attributes like onload, onclick, etc.
+        const all = Array.from(doc.querySelectorAll('*'));
+        all.forEach(el => {
+            const attrs = Array.from(el.attributes).filter(a => /^on/i.test(a.name));
+            attrs.forEach(a => el.removeAttribute(a.name));
+        });
+        const el = doc.documentElement;
+        if (!el)
+            return '';
+        // serialize back to string
+        const serializer = new XMLSerializer();
+        return serializer.serializeToString(el);
+    }
+    catch (e) {
+        // parsing failed; fall back to empty content to avoid injecting unsafe content
+        return '';
+    }
+}
+function __hasMeaningfulContent(slotElement) {
+    const nodes = slotElement.assignedNodes({ flatten: true });
+    for (const node of nodes) {
+        // If it's an element node, it has content
+        if (node.nodeType === Node.ELEMENT_NODE) {
+            return true;
+        }
+        // If it's a text node and contains non-whitespace characters, it has content
+        if (node.nodeType === Node.TEXT_NODE &&
+            node.textContent.trim().length > 0) {
+            return true;
+        }
+    }
+    // No meaningful content found
+    return false;
+}
+function observerSlotChangesWithCallback(slot, callback) {
+    const observer = new MutationObserver(() => {
+        callback(__hasMeaningfulContent(slot));
+    });
+    // Observe the elements currently assigned to the slot
+    const assignedNodes = slot?.assignedNodes({ flatten: true }) || [];
+    assignedNodes.forEach(node => {
+        observer.observe(node, {
+            attributes: true,
+            childList: true,
+            characterData: true,
+            subtree: true,
+        });
+    });
+    callback(__hasMeaningfulContent(slot));
+}
+function throttle(func, delay, options = { leading: true, trailing: true }) {
+    let timerId;
+    let lastExec = 0;
+    return function (...args) {
+        // @ts-ignore
+        const context = this;
+        const now = Date.now();
+        const shouldCallNow = options.leading && now - lastExec >= delay;
+        if (shouldCallNow) {
+            func.apply(context, args);
+            lastExec = now;
+        }
+        else if (options.trailing && !timerId) {
+            timerId = setTimeout(() => {
+                func.apply(context, args);
+                lastExec = Date.now();
+                timerId = null;
+            }, delay);
+        }
+    };
+}
+
+export { createCacheFetch as c, observerSlotChangesWithCallback as o, r, sanitizeSvg as s, throttle as t };
+//# sourceMappingURL=utils-DD_cg6Ms.js.map

package/dist/utils-DD_cg6Ms.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils-DD_cg6Ms.js","sources":["../node_modules/@lit/reactive-element/decorators/state.js","../../src/utils.ts"],"sourcesContent":["import{property as t}from\"./property.js\";\n/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */function r(r){return t({...r,state:!0,attribute:!1})}export{r as state};\n//# sourceMappingURL=state.js.map\n","export async function createCacheFetch(name: string) {\n  let cache: Cache | null = null;\n  // This map tracks requests currently being processed\n  const inFlightRequests = new Map<string, Promise<string>>();\n\n  try {\n    cache = await window.caches.open(name);\n  } catch (e) {\n    console.warn('window.caches access not allowed');\n  }\n\n  return async (url: string): Promise<string> => {\n    // 1. Check if we are already fetching this URL\n    if (inFlightRequests.has(url)) {\n      // Return the existing promise instead of starting a new one\n      return inFlightRequests.get(url)!;\n    }\n\n    // 2. Create the main logic as a promise\n    const fetchPromise = (async () => {\n      const request = new Request(url);\n\n      // Check Cache first\n      if (cache) {\n        const cachedResponse = await cache.match(request);\n        if (cachedResponse) {\n          return cachedResponse.text();\n        }\n      }\n\n      // Prepare network request\n      const urlObj = new URL(request.url);\n      const isSameOrigin = urlObj.origin === window.location.origin;\n\n      const response = await fetch(request.url, {\n        method: 'GET',\n        mode: isSameOrigin ? 'no-cors' : 'cors',\n        credentials: isSameOrigin ? 'same-origin' : 'omit',\n      });\n\n      // --- Handle 404 ---\n      if (response.status === 404) {\n        console.error(`[Fetch Error] Resource not found (404): ${url}`);\n        return ''; // Return empty string as requested\n      }\n\n      const result = await response.text();\n\n      // Update Cache if applicable\n      if (cache && response.status === 200) {\n        // We clone the response logic by creating a new Response with the text body\n        await cache.put(\n          request,\n          new Response(result, {\n            status: response.status,\n            statusText: response.statusText,\n            headers: response.headers,\n          }),\n        );\n      }\n\n      return result;\n    })();\n\n    // 3. Store the promise in the map\n    inFlightRequests.set(url, fetchPromise);\n\n    try {\n      // 4. Wait for the result\n      return await fetchPromise;\n    } finally {\n      // 5. Clean up: Remove the promise from the map when done\n      // This ensures subsequent calls (after this one finishes) can start fresh\n      inFlightRequests.delete(url);\n    }\n  };\n}\n\n// Basic sanitization: remove <script>, <foreignObject>, event handler attributes (on*), and iframes\nexport function sanitizeSvg(rawSvg: string) {\n  try {\n    const parser = new DOMParser();\n    const doc = parser.parseFromString(rawSvg, 'image/svg+xml');\n\n    // remove script tags\n    const scripts = Array.from(doc.querySelectorAll('script'));\n    scripts.forEach(n => n.remove());\n\n    // remove foreignObject and iframe-like elements\n    const foreigns = Array.from(doc.querySelectorAll('foreignObject, iframe'));\n    foreigns.forEach(n => n.remove());\n\n    // remove event handler attributes like onload, onclick, etc.\n    const all = Array.from(doc.querySelectorAll('*'));\n    all.forEach(el => {\n      const attrs = Array.from(el.attributes).filter(a => /^on/i.test(a.name));\n      attrs.forEach(a => el.removeAttribute(a.name));\n    });\n\n    const el = doc.documentElement;\n    if (!el) return '';\n\n    // serialize back to string\n    const serializer = new XMLSerializer();\n    return serializer.serializeToString(el);\n  } catch (e) {\n    // parsing failed; fall back to empty content to avoid injecting unsafe content\n    return '';\n  }\n}\n\nfunction __hasMeaningfulContent(slotElement: any) {\n  const nodes = slotElement.assignedNodes({ flatten: true });\n\n  for (const node of nodes) {\n    // If it's an element node, it has content\n    if (node.nodeType === Node.ELEMENT_NODE) {\n      return true;\n    }\n    // If it's a text node and contains non-whitespace characters, it has content\n    if (\n      node.nodeType === Node.TEXT_NODE &&\n      node.textContent.trim().length > 0\n    ) {\n      return true;\n    }\n  }\n\n  // No meaningful content found\n  return false;\n}\n\nexport function observerSlotChangesWithCallback(\n  slot: HTMLSlotElement | null,\n  callback: (hasContent: boolean) => void,\n) {\n  const observer = new MutationObserver(() => {\n    callback(__hasMeaningfulContent(slot));\n  });\n\n  // Observe the elements currently assigned to the slot\n  const assignedNodes = slot?.assignedNodes({ flatten: true }) || [];\n  assignedNodes.forEach(node => {\n    observer.observe(node, {\n      attributes: true,\n      childList: true,\n      characterData: true,\n      subtree: true,\n    });\n  });\n\n  callback(__hasMeaningfulContent(slot));\n}\n\nexport function throttle(\n  func: Function,\n  delay: number,\n  options = { leading: true, trailing: true },\n) {\n  let timerId: any;\n  let lastExec = 0;\n\n  return function (...args: any[]) {\n    // @ts-ignore\n    const context = this;\n    const now = Date.now();\n\n    const shouldCallNow = options.leading && now - lastExec >= delay;\n\n    if (shouldCallNow) {\n      func.apply(context, args);\n      lastExec = now;\n    } else if (options.trailing && !timerId) {\n      timerId = setTimeout(() => {\n        func.apply(context, args);\n        lastExec = Date.now();\n        timerId = null;\n      }, delay);\n    }\n  };\n}\n"],"names":["t"],"mappings":"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","x_google_ignoreList":[0]}

package/dist/utils-_5no4mk7.js

@@ -0,0 +1,128 @@
+async function createCacheFetch(name) {
+    let cache = null;
+    // This map tracks requests currently being processed
+    const inFlightRequests = new Map();
+    try {
+        cache = await window.caches.open(name);
+    }
+    catch (e) {
+        console.warn('window.caches access not allowed');
+    }
+    return async (url) => {
+        // 1. Check if we are already fetching this URL
+        if (inFlightRequests.has(url)) {
+            // Return the existing promise instead of starting a new one
+            return inFlightRequests.get(url);
+        }
+        // 2. Create the main logic as a promise
+        const fetchPromise = (async () => {
+            const request = new Request(url);
+            // Check Cache first
+            if (cache) {
+                const cachedResponse = await cache.match(request);
+                if (cachedResponse) {
+                    return await cachedResponse.text();
+                }
+            }
+            // Prepare network request
+            const urlObj = new URL(request.url);
+            const isSameOrigin = urlObj.origin === window.location.origin;
+            const response = await fetch(request.url, {
+                method: 'GET',
+                mode: isSameOrigin ? 'no-cors' : 'cors',
+                credentials: isSameOrigin ? 'same-origin' : 'omit',
+            });
+            // --- Handle 404 ---
+            if (response.status === 404) {
+                console.error(`[Fetch Error] Resource not found (404): ${url}`);
+                return ''; // Return empty string as requested
+            }
+            const result = await response.text();
+            // Update Cache if applicable
+            if (cache && response.status === 200) {
+                // We clone the response logic by creating a new Response with the text body
+                await cache.put(request, new Response(result, {
+                    status: response.status,
+                    statusText: response.statusText,
+                    headers: response.headers,
+                }));
+            }
+            return result;
+        })();
+        // 3. Store the promise in the map
+        inFlightRequests.set(url, fetchPromise);
+        try {
+            // 4. Wait for the result
+            return await fetchPromise;
+        }
+        finally {
+            // 5. Clean up: Remove the promise from the map when done
+            // This ensures subsequent calls (after this one finishes) can start fresh
+            inFlightRequests.delete(url);
+        }
+    };
+}
+// Basic sanitization: remove <script>, <foreignObject>, event handler attributes (on*), and iframes
+function sanitizeSvg(rawSvg) {
+    try {
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(rawSvg, 'image/svg+xml');
+        // remove script tags
+        const scripts = Array.from(doc.querySelectorAll('script'));
+        scripts.forEach(n => n.remove());
+        // remove foreignObject and iframe-like elements
+        const foreigns = Array.from(doc.querySelectorAll('foreignObject, iframe'));
+        foreigns.forEach(n => n.remove());
+        // remove event handler attributes like onload, onclick, etc.
+        const all = Array.from(doc.querySelectorAll('*'));
+        all.forEach(el => {
+            const attrs = Array.from(el.attributes).filter(a => /^on/i.test(a.name));
+            attrs.forEach(a => el.removeAttribute(a.name));
+        });
+        const el = doc.documentElement;
+        if (!el)
+            return '';
+        // serialize back to string
+        const serializer = new XMLSerializer();
+        return serializer.serializeToString(el);
+    }
+    catch (e) {
+        // parsing failed; fall back to empty content to avoid injecting unsafe content
+        return '';
+    }
+}
+function __hasMeaningfulContent(slotElement) {
+    const nodes = slotElement.assignedNodes({ flatten: true });
+    for (const node of nodes) {
+        // If it's an element node, it has content
+        if (node.nodeType === Node.ELEMENT_NODE) {
+            return true;
+        }
+        // If it's a text node and contains non-whitespace characters, it has content
+        if (node.nodeType === Node.TEXT_NODE &&
+            node.textContent.trim().length > 0) {
+            return true;
+        }
+    }
+    // No meaningful content found
+    return false;
+}
+function observerSlotChangesWithCallback(slot, callback) {
+    const observer = new MutationObserver(() => {
+        callback(__hasMeaningfulContent(slot));
+    });
+    // Observe the elements currently assigned to the slot
+    const assignedNodes = slot?.assignedNodes({ flatten: true }) || [];
+    assignedNodes.forEach(node => {
+        observer.observe(node, {
+            attributes: true,
+            childList: true,
+            characterData: true,
+            subtree: true,
+        });
+    });
+    callback(__hasMeaningfulContent(slot));
+}
+
+export { createCacheFetch as c, observerSlotChangesWithCallback as o, sanitizeSvg as s };
+//# sourceMappingURL=utils-_5no4mk7.js.map

package/dist/utils-_5no4mk7.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils-_5no4mk7.js","sources":["../../src/utils.ts"],"sourcesContent":["export async function createCacheFetch(name: string) {\n  let cache: Cache | null = null;\n  // This map tracks requests currently being processed\n  const inFlightRequests = new Map<string, Promise<string>>();\n\n  try {\n    cache = await window.caches.open(name);\n  } catch (e) {\n    console.warn('window.caches access not allowed');\n  }\n\n  return async (url: string): Promise<string> => {\n    // 1. Check if we are already fetching this URL\n    if (inFlightRequests.has(url)) {\n      // Return the existing promise instead of starting a new one\n      return inFlightRequests.get(url)!;\n    }\n\n    // 2. Create the main logic as a promise\n    const fetchPromise = (async () => {\n      const request = new Request(url);\n\n      // Check Cache first\n      if (cache) {\n        const cachedResponse = await cache.match(request);\n        if (cachedResponse) {\n          return await cachedResponse.text();\n        }\n      }\n\n      // Prepare network request\n      const urlObj = new URL(request.url);\n      const isSameOrigin = urlObj.origin === window.location.origin;\n\n      const response = await fetch(request.url, {\n        method: 'GET',\n        mode: isSameOrigin ? 'no-cors' : 'cors',\n        credentials: isSameOrigin ? 'same-origin' : 'omit',\n      });\n\n      // --- Handle 404 ---\n      if (response.status === 404) {\n        console.error(`[Fetch Error] Resource not found (404): ${url}`);\n        return ''; // Return empty string as requested\n      }\n\n      const result = await response.text();\n\n      // Update Cache if applicable\n      if (cache && response.status === 200) {\n        // We clone the response logic by creating a new Response with the text body\n        await cache.put(\n          request,\n          new Response(result, {\n            status: response.status,\n            statusText: response.statusText,\n            headers: response.headers,\n          }),\n        );\n      }\n\n      return result;\n    })();\n\n    // 3. Store the promise in the map\n    inFlightRequests.set(url, fetchPromise);\n\n    try {\n      // 4. Wait for the result\n      return await fetchPromise;\n    } finally {\n      // 5. Clean up: Remove the promise from the map when done\n      // This ensures subsequent calls (after this one finishes) can start fresh\n      inFlightRequests.delete(url);\n    }\n  };\n}\n\n// Basic sanitization: remove <script>, <foreignObject>, event handler attributes (on*), and iframes\nexport function sanitizeSvg(rawSvg: string) {\n  try {\n    const parser = new DOMParser();\n    const doc = parser.parseFromString(rawSvg, 'image/svg+xml');\n\n    // remove script tags\n    const scripts = Array.from(doc.querySelectorAll('script'));\n    scripts.forEach(n => n.remove());\n\n    // remove foreignObject and iframe-like elements\n    const foreigns = Array.from(doc.querySelectorAll('foreignObject, iframe'));\n    foreigns.forEach(n => n.remove());\n\n    // remove event handler attributes like onload, onclick, etc.\n    const all = Array.from(doc.querySelectorAll('*'));\n    all.forEach(el => {\n      const attrs = Array.from(el.attributes).filter(a => /^on/i.test(a.name));\n      attrs.forEach(a => el.removeAttribute(a.name));\n    });\n\n    const el = doc.documentElement;\n    if (!el) return '';\n\n    // serialize back to string\n    const serializer = new XMLSerializer();\n    return serializer.serializeToString(el);\n  } catch (e) {\n    // parsing failed; fall back to empty content to avoid injecting unsafe content\n    return '';\n  }\n}\n\nfunction __hasMeaningfulContent(slotElement: any) {\n  const nodes = slotElement.assignedNodes({ flatten: true });\n\n  for (const node of nodes) {\n    // If it's an element node, it has content\n    if (node.nodeType === Node.ELEMENT_NODE) {\n      return true;\n    }\n    // If it's a text node and contains non-whitespace characters, it has content\n    if (\n      node.nodeType === Node.TEXT_NODE &&\n      node.textContent.trim().length > 0\n    ) {\n      return true;\n    }\n  }\n\n  // No meaningful content found\n  return false;\n}\n\nexport function observerSlotChangesWithCallback(\n  slot: HTMLSlotElement | null,\n  callback: (hasContent: boolean) => void,\n) {\n  const observer = new MutationObserver(() => {\n    callback(__hasMeaningfulContent(slot));\n  });\n\n  // Observe the elements currently assigned to the slot\n  const assignedNodes = slot?.assignedNodes({ flatten: true }) || [];\n  assignedNodes.forEach(node => {\n    observer.observe(node, {\n      attributes: true,\n      childList: true,\n      characterData: true,\n      subtree: true,\n    });\n  });\n\n  callback(__hasMeaningfulContent(slot));\n}\n"],"names":[],"mappings":"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"}

package/dist/utils.d.ts

@@ -0,0 +1,8 @@
+export declare function createCacheFetch(name: string): Promise<(url: string) => Promise<string>>;
+export declare function sanitizeSvg(rawSvg: string): string;
+export declare function observerSlotChangesWithCallback(slot: HTMLSlotElement | null, callback: (hasContent: boolean) => void): void;
+export declare function throttle(func: Function, delay: number, options?: {
+    leading: boolean;
+    trailing: boolean;
+}): (...args: any[]) => void;
+//# sourceMappingURL=utils.d.ts.map

package/dist/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,wBAAsB,gBAAgB,CAAC,IAAI,EAAE,MAAM,iBAW9B,MAAM,KAAG,OAAO,CAAC,MAAM,CAAC,EAiE5C;AAGD,wBAAgB,WAAW,CAAC,MAAM,EAAE,MAAM,UA8BzC;AAuBD,wBAAgB,+BAA+B,CAC7C,IAAI,EAAE,eAAe,GAAG,IAAI,EAC5B,QAAQ,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,QAkBxC;AAED,wBAAgB,QAAQ,CACtB,IAAI,EAAE,QAAQ,EACd,KAAK,EAAE,MAAM,EACb,OAAO;;;CAAoC,IAK1B,GAAG,MAAM,GAAG,EAAE,UAkBhC"}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@redvars/peacock",
   "description": "The foundation for beautiful user interfaces",
   "license": "Apache-2.0",
-  "version": "3.1.1",
+  "version": "3.1.3",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -16,23 +16,24 @@
     "./icon.js": "./dist/src/index.js"
   },
   "scripts": {
-    "analyze": "cem analyze --config \"./custom-elements-manifest.config.mjs\" && node readme-gen.mjs",
-    "start": "npm run copy_design_files && rollup -c && concurrently -k -r \"rollup -c -w\" \"web-dev-server\"",
-    "build": "npm run copy_design_files && rollup -c && npm run analyze -- --exclude dist",
+    "analyze": "cem analyze --config \"./custom-elements-manifest.config.mjs\" && node bin/typedoc-gen.mjs",
+    "start": "rollup -c && concurrently -k -r \"rollup -c -w\" \"web-dev-server\"",
+    "build": "rollup -c && npm run analyze -- --exclude dist",
     "prepublish": "rollup -c  && npm run analyze -- --exclude dist",
     "lint": "eslint --ext .ts,.html . --ignore-path .gitignore && prettier \"**/*.ts\" --check --ignore-path .gitignore",
     "format": "eslint --ext .ts,.html . --fix --ignore-path .gitignore && prettier \"**/*.ts\" --write --ignore-path .gitignore",
     "prepare": "husky",
-    "copy_design_files": "node copyDesignFiles.js",
     "test": "tsc && wtr --coverage",
     "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
   },
   "dependencies": {
-    "lit": "^3.1.4"
+    "@redvars/peacock-design-tokens": "^0.1.0",
+    "lit": "^3.1.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-postcss-lit": "^2.2.0"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.10.3",
-    "@custom-elements-manifest/to-markdown": "^0.1.0",
     "@open-wc/eslint-config": "^12.0.3",
     "@open-wc/testing": "^4.0.0",
     "@rollup/plugin-commonjs": "^29.0.0",
@@ -41,13 +42,13 @@
     "@types/mocha": "^10.0.7",
     "@typescript-eslint/eslint-plugin": "^7.16.0",
     "@typescript-eslint/parser": "^7.16.0",
-    "@wc-toolkit/lazy-loader": "^1.0.1",
+    "@wc-toolkit/jsdoc-tags": "^1.1.0",
     "@web/dev-server": "^0.4.6",
     "@web/test-runner": "^0.18.2",
     "concurrently": "^8.2.2",
-    "custom-element-jet-brains-integration": "^1.7.0",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
+    "glob": "^13.0.0",
     "husky": "^9.0.11",
     "lint-staged": "^15.2.7",
     "prettier": "^3.3.2",
@@ -59,6 +60,7 @@
     "rollup-plugin-summary": "^3.0.1",
     "sass": "^1.97.2",
     "tslib": "^2.6.3",
+    "typedoc": "^0.28.16",
     "typescript": "^5.5.3",
     "unplugin-jsdelivr": "^1.0.0"
   },

package/readme.md

@@ -37,30 +37,18 @@ Visit [https://peacock.redvars.com](https://goatui.com) to view the documentatio
 
 
 ```html
-<!doctype html>
-<html lang='en'>
 <head>
-  <meta charset='utf-8' />
-  <meta name='viewport' content='width=device-width' />
-  <title>Goat UI Component</title>
-
-  <link href="https://cdn.jsdelivr.net/npm/@redvars/components@3.1.0/dist/assets/styles/tokens.css" rel='stylesheet' />
-
-  <script type='module'
-          src='https://cdn.jsdelivr.net/npm/@redvars/components@3.1.0/dist/peacock-loader.js'></script>
-
-  <!-- Default font : Noto Sans and Noto Sans Mono -->
+  
+   <!-- Default font : Noto Sans and Noto Sans Mono -->
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
 
-
+  <script type='module'
+          src='https://cdn.jsdelivr.net/npm/@redvars/peacock@3.1.2/dist/peacock-loader.js'></script>
 </head>
-<body>
-<p-avatar name="Shivaji Varma"></p-icon>
 
-</body>
-</html>
+<p-avatar name="Shivaji Varma"></p-avatar>
 ```
 
 # Components

package/rollup.config.js

@@ -2,42 +2,84 @@ import typescript from '@rollup/plugin-typescript';
 import { nodeResolve } from '@rollup/plugin-node-resolve';
 import css from 'rollup-plugin-import-css';
 import copy from 'rollup-plugin-copy';
+import { readFile } from 'node:fs/promises';
+import { glob } from 'glob';
+import postcssLit from 'rollup-plugin-postcss-lit';
+import postcss from 'rollup-plugin-postcss';
+import commonjs from '@rollup/plugin-commonjs';
 
-export default [
-  {
-    input: ['src/index.ts', 'src/peacock-loader.ts'], // Your main TypeScript entry file
-    output: {
-      dir: 'dist',
-      format: 'esm', // Output as ES Modules (esm), also supports cjs, umd, etc.
-      sourcemap: true,
-    },
-    plugins: [
-      typescript(), // The plugin loads options from tsconfig.json by default
-      css(),
-      nodeResolve(),
-    ],
-  },
-  {
-    input: ['src/icon/icon.ts', 'src/avatar/avatar.ts'], // Your main TypeScript entry file
-    output: {
-      dir: `dist`,
-      format: 'esm', // Output as ES Modules (esm), also supports cjs, umd, etc.
-      sourcemap: true,
-      entryFileNames: 'component/[name].js',
+export default async function () {
+  const files = await findLitComponents();
+  return [
+    {
+      input: ['src/index.ts', 'src/peacock-loader.ts', ...files], // Your main TypeScript entry file
+      output: {
+        dir: 'dist',
+        format: 'esm', // Output as ES Modules (esm), also supports cjs, umd, etc.
+        sourcemap: true,
+      },
+      plugins: [
+        typescript(), // The plugin loads options from tsconfig.json by default
+        nodeResolve(),
+        commonjs(),
+        postcss(),
+        postcssLit({
+          include: 'src/**/*.scss',
+        }),
+
+        copy({
+          targets: [
+            {
+              src: '../readme.md',
+              dest: './',
+            },
+            {
+              src: './node_modules/@redvars/peacock-design-tokens/dist/tokens.css',
+              dest: './dist/assets/styles/',
+            },
+          ],
+        }),
+      ],
     },
-    plugins: [
-      typescript(), // The plugin loads options from tsconfig.json by default
-      css(),
-      nodeResolve(),
-
-      copy({
-        targets: [
-          {
-            src: '../readme.md',
-            dest: './',
-          },
-        ],
-      }),
-    ],
-  },
-];
+  ];
+}
+
+async function findLitComponents(searchDir = 'src') {
+  console.log(`🚀 Scanning for Lit components in "${searchDir}"...\n`);
+  /**
+   * We look for:
+   * 1. Lit imports
+   * 2. Class extensions
+   * 3. Custom element decorators
+   */
+  const LIT_SIGNATURES = [/extends\s+LitElement/];
+
+  try {
+    // glob() returns a Promise that resolves to an array of file paths
+    // We ignore node_modules and typical build folders
+    const files = await glob(`${searchDir}/**/*.{js,ts,mjs}`, {
+      ignore: ['**/node_modules/**', '**/dist/**', '**/build/**'],
+    });
+
+    const results = [];
+
+    for (const file of files) {
+      const content = await readFile(file, 'utf8');
+
+      // Check if any Lit-specific pattern exists in the file
+      const isLit = LIT_SIGNATURES.some(pattern => pattern.test(content));
+
+      if (isLit) {
+        results.push(file);
+        console.log(`✅ Found: ${file}`);
+      }
+    }
+
+    console.log(
+      `\n✨ Search complete. Total Lit components: ${results.length}`,
+    );
+    return results;
+  } catch (error) {
+    console.error('❌ Error during scan:', error);
+  }
+}

package/scss/mixin.scss

@@ -0,0 +1,50 @@
+
+@mixin get-typography($name) {
+  font-family: var(--typography-#{$name}-font-family) !important;
+  font-size:  var(--typography-#{$name}-font-size) !important;
+  font-weight: var(--typography-#{$name}-font-weight) !important;
+  line-height: var(--typography-#{$name}-line-height) !important;
+  letter-spacing: var(--typography-#{$name}-letter-spacing) !important;
+}
+
+@mixin get-typography-not-important($name) {
+  font-family: var(--typography-#{$name}-font-family);
+  font-size:  var(--typography-#{$name}-font-size);
+  font-weight: var(--typography-#{$name}-font-weight);
+  line-height: var(--typography-#{$name}-line-height);
+  letter-spacing: var(--typography-#{$name}-letter-spacing);
+}
+
+@mixin focus-ring($color:var(--color-black)) {
+  outline: 2px solid $color;
+}
+
+@mixin for-phone-only {
+  @media (max-width: 671px) {
+    @content;
+  }
+}
+
+@mixin for-tablet-portrait-up {
+  @media (min-width: 672px) {
+    @content;
+  }
+}
+
+@mixin for-tablet-landscape-up {
+  @media (min-width: 1056px) {
+    @content;
+  }
+}
+
+@mixin for-desktop-up {
+  @media (min-width: 1312px) {
+    @content;
+  }
+}
+
+@mixin for-big-desktop-up {
+  @media (min-width: 1584px) {
+    @content;
+  }
+}