@redvars/peacock 3.1.1 → 3.1.2

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/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.2",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -16,23 +16,22 @@
     "./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": {
+    "@redvars/peacock-design-tokens": "^0.1.0",
     "lit": "^3.1.4"
   },
   "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 +40,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 +58,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.1/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,76 @@ 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';
 
-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,
+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
+        css(),
+        nodeResolve(),
+        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(),
-    ],
-  },
-  {
-    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',
-    },
-    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/src/avatar/avatar.css.ts

@@ -1,4 +1,4 @@
-import { css, unsafeCSS } from 'lit';
+import { css } from 'lit';
 import { getTypography } from '../styleMixins.css.js';
 
 export const styles = css`

package/src/avatar/avatar.ts

@@ -3,6 +3,25 @@ import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { styles } from './avatar.css.js';
 
+/**
+ * @label Avatar
+ * @tag p-avatar
+ * @rawTag avatar
+ * @summary The Avatar component is used to represent user, and displays the profile picture, initials or fallback icon.
+ *
+ * @cssprop --avatar-border-radius - Controls the border radius of the avatar.
+ * @cssprop --avatar-background-color - Controls the color of the avatar.
+ * @cssprop --avatar-size - Controls the size of the avatar.
+ * @cssprop --avatar-text-color - Controls the color of the text inside the avatar.
+ *
+ *
+ * @example
+ * ```html
+ * <p-avatar name="Shivaji Varma" src="https://peacock.redvars.com/assets/img/avatar.webp"></p-avatar>
+ * ```
+ *
+ * @tags display
+ */
 export class Avatar extends LitElement {
   static styles = [styles];
 

package/src/avatar/p-avatar.ts

@@ -1,12 +1,5 @@
 import { customElement } from 'lit/decorators.js';
 import { Avatar } from './avatar.js';
 
-/**
- * @summary The Avatar component is used to represent user, and displays the profile picture, initials or fallback icon.
- *
- * @cssprop --avatar-background-color - Controls the color of the avatar.
- * @cssprop --avatar-size - Controls the size of the avatar.
- * @cssprop --avatar-text-color - Controls the color of the text inside the avatar.
- */
 @customElement('p-avatar')
 export class PAvatar extends Avatar {}

package/src/badge/badge.css.ts

@@ -16,8 +16,9 @@ export const styles = css`
     align-items: center;
     background-color: var(--badge-color);
     border-radius: var(--shape-corner-full);
+    box-sizing: border-box;
 
-    &.has-content {
+    &.slot-has-content {
       height: 1rem;
       min-width: 1rem;
       padding-inline: var(--spacing-050);
@@ -25,9 +26,9 @@ export const styles = css`
       color: var(--color-on-error);
     }
 
-    &:not(.has-content) {
-      height: 6px;
-      width: 6px;
+    &:not(.slot-has-content) {
+      height: 0.375rem;
+      width: 0.375rem;
     }
   }
 `;

package/src/badge/badge.ts

@@ -2,7 +2,22 @@ import { html, LitElement } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { styles } from './badge.css.js';
+import { observerSlotChangesWithCallback } from '../utils.js';
 
+/**
+ * @label Badge
+ * @tag p-badge
+ * @rawTag badge
+ * @summary The badge component is used to display a small amount of information to the user.
+ *
+ * @cssprop --badge-color - Controls the color of the badge.
+ *
+ * @example
+ * ```html
+ * <p-badge>1</p-badge>
+ * ```
+ * @tags display
+ */
 export class Badge extends LitElement {
   static styles = [styles];
 
@@ -13,17 +28,24 @@ export class Badge extends LitElement {
   @state()
   slotHasContent = false;
 
+  firstUpdated() {
+    observerSlotChangesWithCallback(
+      this.renderRoot.querySelector('slot'),
+      hasContent => {
+        this.slotHasContent = hasContent;
+        this.requestUpdate();
+      },
+    );
+  }
+
   render() {
     return html`<div
-      class=${classMap({ badge: true, 'has-content': this.slotHasContent })}
+      class=${classMap({
+        badge: true,
+        'slot-has-content': this.slotHasContent,
+      })}
     >
-      <slot @slotchange=${this.#handleSlotChange}></slot>
+      <slot></slot>
     </div>`;
   }
-
-  #handleSlotChange(event: { target: any }) {
-    const slot = event.target;
-    // Check assignedElements length
-    this.slotHasContent = slot.assignedElements().length > 0;
-  }
 }

package/src/badge/demo/index.html

@@ -43,7 +43,15 @@
 </div>
 
 
-<p-avatar name='Shivaji Varma'></p-avatar>
+<div class="badge-wrapper">
+  <p-icon name="notifications"></p-icon>
+  <p-badge class="badge-anchor">1</p-badge>
+</div>
+
+<div class="badge-wrapper">
+  <p-icon name="notifications"></p-icon>
+  <p-badge class="badge-anchor">999+</p-badge>
+</div>
 
 <script type='module'>
   import { Icon, Badge } from '/dist/index.js';

package/src/badge/p-badge.ts

@@ -1,10 +1,5 @@
 import { customElement } from 'lit/decorators.js';
 import { Badge } from './badge.js';
 
-/**
- * @summary The badge component is used to display a small amount of information to the user.
- *
- * @cssprop --badge-color - Controls the color of the badge.
- */
 @customElement('p-badge')
 export class PBadge extends Badge {}

package/src/clock/clock.css.ts

@@ -0,0 +1,12 @@
+import { css } from 'lit';
+import { getTypography } from '../styleMixins.css.js';
+
+export const styles = css`
+  :host {
+    display: inline-block;
+  }
+
+  .current-time {
+    ${getTypography('body-medium')}
+  }
+`;

package/src/clock/clock.ts

@@ -0,0 +1,57 @@
+import { html, LitElement } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { styles } from './clock.css.js';
+
+/**
+ * @label Clock
+ * @tag p-clock
+ * @rawTag clock
+ *
+ * @summary Displays the current time in a given timezone.
+ * @overview
+ *  - Clocks are used to display the current time in a specified timezone.
+ *  - They can be displayed in various formats, including 12-hour and 24-hour time.
+ *
+ * @example
+ * ```html
+ * <p-clock></p-clock>
+ * ```
+ * @tags display
+ */
+export class Clock extends LitElement {
+  static styles = [styles];
+
+  @property() timezone?: string;
+
+  // `currentTime` is decorated with `@State()`,
+  // as we need to trigger a rerender when its
+  // value changes to show the latest time
+  @state() currentTime: string = '';
+
+  private _timerId: any;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.__updateCurrentTime();
+    this._timerId = setInterval(() => {
+      this.__updateCurrentTime();
+    }, 1000);
+  }
+
+  disconnectedCallback() {
+    if (this._timerId) {
+      clearInterval(this._timerId);
+    }
+    super.disconnectedCallback();
+  }
+
+  __updateCurrentTime() {
+    this.currentTime = new Date().toLocaleTimeString('en-US', {
+      timeZone: this.timezone,
+    });
+  }
+
+  render() {
+    return html`<div class="current-time">${this.currentTime}</div>`;
+  }
+}

package/src/clock/demo/index.html

@@ -0,0 +1,26 @@
+<!doctype html>
+<html lang='en-GB'>
+<head>
+  <meta charset='utf-8'>
+  <meta name='viewport' content='width=device-width, initial-scale=1.0, viewport-fit=cover' />
+  <link rel='stylesheet' href='/dist/assets/styles/tokens.css' />
+  <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">
+
+  <style>
+    body {
+      background: #fafafa;
+    }
+  </style>
+</head>
+<body>
+
+
+<p-clock></p-clock>
+
+<script type='module'>
+  import { Clock } from '/dist/index.js';
+
+  window.customElements.define('p-clock', Clock);
+</script>
+</body>
+</html>

package/src/clock/index.ts

@@ -0,0 +1 @@
+export { Clock } from './clock.js';