@redvars/peacock 3.1.0 → 3.1.1

package/dist/web-types.json

@@ -0,0 +1,78 @@
+{
+  "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
+  "name": "@redvars/peacock",
+  "version": "3.1.0",
+  "description-markup": "markdown",
+  "contributions": {
+    "html": {
+      "elements": [
+        {
+          "name": "p-avatar",
+          "description": "The Avatar component is used to represent user, and displays the profile picture, initials or fallback icon.\n---\n\n\n### **CSS Properties:**\n - **--avatar-background-color** - Controls the color of the avatar. _(default: undefined)_\n- **--avatar-size** - Controls the size of the avatar. _(default: undefined)_",
+          "doc-url": "",
+          "attributes": [
+            { "name": "name", "value": { "type": "string", "default": "''" } },
+            { "name": "src", "value": { "type": "string | undefined" } }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "name", "type": "string" },
+              { "name": "src", "type": "string | undefined" }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "p-icon",
+          "description": "Icons are visual symbols used to represent ideas, objects, or actions.\n---\n\n\n### **Events:**\n - **icon-error**\n\n### **CSS Properties:**\n - **--icon-color** - Controls the color of the icon. _(default: undefined)_\n- **--icon-size** - Controls the size of the icon. Defaults to \"1rem\" _(default: 1rem)_",
+          "doc-url": "",
+          "attributes": [
+            { "name": "name", "value": { "type": "string | undefined" } },
+            { "name": "src", "value": { "type": "string | undefined" } },
+            {
+              "name": "provider",
+              "value": {
+                "type": "'material-symbols' | 'carbon' | undefined",
+                "default": "'material-symbols'"
+              }
+            }
+          ],
+          "events": [{ "name": "icon-error", "type": "CustomEvent" }],
+          "js": {
+            "properties": [
+              { "name": "name", "type": "string | undefined" },
+              { "name": "src", "type": "string | undefined" },
+              {
+                "name": "provider",
+                "type": "'material-symbols' | 'carbon' | undefined"
+              }
+            ],
+            "events": [{ "name": "icon-error", "type": "CustomEvent" }]
+          }
+        }
+      ]
+    },
+    "css": {
+      "properties": [
+        {
+          "name": "--avatar-background-color",
+          "description": "Controls the color of the avatar."
+        },
+        {
+          "name": "--avatar-size",
+          "description": "Controls the size of the avatar."
+        },
+        {
+          "name": "--icon-color",
+          "description": "Controls the color of the icon."
+        },
+        {
+          "name": "--icon-size",
+          "description": "Controls the size of the icon. Defaults to \"1rem\""
+        }
+      ],
+      "pseudo-elements": []
+    }
+  }
+}

package/package.json

@@ -2,10 +2,10 @@
   "name": "@redvars/peacock",
   "description": "The foundation for beautiful user interfaces",
   "license": "Apache-2.0",
-  "version": "3.1.0",
+  "version": "3.1.1",
   "type": "module",
-  "main": "dist/src/index.js",
-  "module": "dist/src/index.js",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
   "keywords": [
     "peacock",
     "lit",
@@ -13,16 +13,17 @@
   ],
   "exports": {
     ".": "./dist/src/index.js",
-    "./p-icon.js": "./dist/src/p-icon.js"
+    "./icon.js": "./dist/src/index.js"
   },
   "scripts": {
     "analyze": "cem analyze --config \"./custom-elements-manifest.config.mjs\" && node readme-gen.mjs",
-    "start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"web-dev-server\"",
-    "build": "rollup -c && npm run analyze -- --exclude dist",
+    "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",
     "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\""
   },
@@ -44,13 +45,19 @@
     "@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",
     "husky": "^9.0.11",
     "lint-staged": "^15.2.7",
     "prettier": "^3.3.2",
     "rollup-plugin-copy": "^3.5.0",
+    "rollup-plugin-import-css": "^4.1.2",
+    "rollup-plugin-sass": "^1.15.3",
+    "rollup-plugin-scss": "^4.0.1",
+    "rollup-plugin-scss-lit": "^2.1.0",
     "rollup-plugin-summary": "^3.0.1",
+    "sass": "^1.97.2",
     "tslib": "^2.6.3",
     "typescript": "^5.5.3",
     "unplugin-jsdelivr": "^1.0.0"
@@ -92,5 +99,6 @@
       "prettier --write"
     ]
   },
-  "customElements": "dist/custom-elements.json"
+  "customElements": "dist/custom-elements.json",
+  "web-types": "dist/web-types.json"
 }

package/readme-gen.mjs

@@ -1,11 +1,24 @@
 import fs from 'fs';
 import { customElementsManifestToMarkdown } from '@custom-elements-manifest/to-markdown';
 
-const manifest = JSON.parse(
+const customElements = JSON.parse(
   fs.readFileSync('./dist/custom-elements.json', 'utf-8'),
 );
-const markdown = customElementsManifestToMarkdown(manifest, {
+
+customElements.modules = customElements.modules.filter(module =>
+  module.declarations.find(d => d.customElement),
+);
+
+const markdown = customElementsManifestToMarkdown(customElements, {
   private: 'hidden',
+  omitSections: [
+    'mixins',
+    'variables',
+    'functions',
+    'exports',
+    'staticFields',
+    'staticMethods',
+  ],
 });
 
 fs.writeFileSync('./custom-elements.md', markdown);

package/readme.md

@@ -0,0 +1,190 @@
+# Peacock
+**The foundation for beautiful user interfaces.**
+
+[![Build](https://github.com/redvars/peacock/workflows/Build/badge.svg)](https://github.com/goatui/components/actions?workflow=Build)
+[![GitHub license](https://img.shields.io/github/license/redvars/peacock.svg)](/LICENSE)
+![Version](https://img.shields.io/npm/v/%40redvars%2Fpeacock)
+
+
+<div align="center">
+<img alt="Peacock LOGO" src="./logo.png" width="210">
+</div>
+
+Peacock gives you the tools and foundation to build beautiful, usable product interfaces. It’s the system you use to craft your own component library.
+
+## What is Peacock?
+Peacock is more than just a collection of components; it is an aesthetic philosophy. Like its avian namesake, it provides the core elements (the primitives) that allow the full, vibrant display (the design) to be unveiled.
+
+**Opinionated Beauty:** We deliver pre-styled, beautiful components that follow modern design trends, significantly reducing the boilerplate needed to achieve a professional look.
+
+**Foundation First:** Similar to projects like `shadcn/ui`, Peacock focuses on providing the foundational primitives, ensuring maximum flexibility for customization without sacrificing initial polish.
+
+**Seamless Integration:** Designed with modern web frameworks in mind (e.g., React, Vue), integrating Peacock into your existing project structure is fast, efficient, and empowering.
+
+## Key Features
+Vibrant & Consistent Design System: Every component—from buttons and cards to complex data tables—shares a cohesive, high-quality visual language.
+
+**Highly Extensible:** The component structure is designed for easy overwriting and theme customization, allowing you to quickly adapt the style to your specific brand identity.
+
+**Built for Accessibility:** Focus on semantic HTML and proper ARIA attributes to ensure that your beautiful interfaces are accessible to all users.
+
+**Responsive by Default:** Components are built with responsiveness baked in, guaranteeing a graceful display across all screen sizes and devices.
+
+## Documentation
+Visit [https://peacock.redvars.com](https://goatui.com) to view the documentation.
+
+## Getting Started
+
+
+```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 -->
+  <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">
+
+
+</head>
+<body>
+<p-avatar name="Shivaji Varma"></p-icon>
+
+</body>
+</html>
+```
+
+# Components
+
+- 🟢 ready (feature complete for now)
+- 🟡 beta (changes possible, not feature complete)
+- 🔴 not ready (unstyled / no functions)
+- 🔵 planned (created, but empty files)
+
+## Input Controls
+
+Input controls are UI design elements that allow users to input information into the system. They are essential for
+collecting data and enabling user interactions. Some common examples of input controls include text fields, dropdown
+menus, checkboxes, and radio buttons.
+
+| Name                                                       | Component            | State |
+|------------------------------------------------------------|----------------------|-------|
+| [Code editor](https://peacock.redvars.com/components/code-editor)   | p-card-editor     | 🟢    |
+| Color picker                                               | p-color-picker    | 🔴    |
+| [Checkbox](https://peacock.redvars.com/components/checkbox)         | p-checkbox        | 🟢    |
+| [Date picker](https://peacock.redvars.com/components/date-picker)   | p-date-picker     | 🟡    |
+| Date Time picker                                           | p-datetime-picker | 🔴    |
+| [Form control](https://peacock.redvars.com/components/form-control) | p-form-control    | 🟡    |
+| File picker                                                | p-file-picker     | 🔴    |
+| [HTML editor](https://peacock.redvars.com/components/html-editor)   | p-html-editor     | 🟢    |
+| [Input](https://peacock.redvars.com/components/input)               | p-input           | 🟢    |
+| [Input URL](https://peacock.redvars.com/components/input-url)       | p-input-url       | 🟢    |
+| Month picker                                               | p-month-picker    | 🔴    |
+| [Number](https://peacock.redvars.com/components/number)             | p-number          | 🟢    |
+| [Select](https://peacock.redvars.com/components/select)             | p-select          | 🟢    |
+| [Textarea](https://peacock.redvars.com/components/textarea)         | p-textarea        | 🟢    |
+| [Time picker](https://peacock.redvars.com/components/time-picker)   | p-time-picker     | 🟡    |
+| [URL input](https://peacock.redvars.com/components/url-input)       | p-url-input.      | 🔴    |
+| Week picker                                                | p-week-picker     | 🔴    |
+
+## Navigation
+
+Navigational components are UI elements that help users move around the app or website. They provide users with a clear
+and intuitive way to navigate through different sections and pages. Some common examples of navigational components
+include menus, tabs, and breadcrumbs.
+
+| Name                                                   | Component       | State |
+|--------------------------------------------------------|-----------------|-------|
+| [Breadcrumb](https://peacock.redvars.com/components/breadcrumb) | p-breadcrumb | 🟢    |
+| [Dropdown](https://peacock.redvars.com/components/dropdown)     | p-dropdown   | 🟡    |
+| [Menu](https://peacock.redvars.com/components/menu)             | p-menu       | 🟡    |
+| [Tabs](https://peacock.redvars.com/components/tabs)             | p-tabs       | 🟢    |
+
+## Informational
+
+Informational components are UI elements that provide information to users. They communicate important messages,
+updates, or instructions within the app or website. Some common examples of informational components include
+notifications, tooltips, and progress bars.
+
+| Name                                                                             | Component                 | State |
+|----------------------------------------------------------------------------------|---------------------------|-------|
+| [Badge](https://peacock.redvars.com/components/badge)                                     | p-badge                | 🟢    |
+| [Progress](https://peacock.redvars.com/components/progress)                               | p-progress             | 🟢    |
+| [Spinner](https://peacock.redvars.com/components/spinner)                                 | p-spinner              | 🟢    |
+| [Tooltip](https://peacock.redvars.com/components/tooltip)                                 | p-tooltip              | 🟢    |
+| [Notification](https://peacock.redvars.com/components/notification)                       | p-notification         | 🟢    |
+| [Notification Manager](https://peacock.redvars.com/components/notification-manager)       | p-notification-manager | 🟢    |
+
+
+## Containers
+
+Containers are UI elements that group similar content together, making it easier for users to navigate and scan through
+the interface. Examples of common containers include cards, carousels, and accordions, which provide structure and
+organization to the content.
+
+| Name                                                 | Component      | State |
+|------------------------------------------------------|----------------|-------|
+| [Accordion](https://peacock.redvars.com/components/accordion) | p-accordion | 🟢    |
+| Card                                                 | p-card      | 🟡    |
+
+## General
+
+These components are used for general purpose. They include
+
+| Name                                                                       | Component                 | State |
+|----------------------------------------------------------------------------|---------------------------|-------|
+| [Avatar](https://peacock.redvars.com/components/avatar)                             | p-avatar               | 🟢    |
+| [Button](https://peacock.redvars.com/components/button)                             | p-button               | 🟢    |
+| [Button Group](https://peacock.redvars.com/components/button-group)                 | p-button-group         | 🟢    |
+| [Calendar](https://peacock.redvars.com/components/calendar)                         | p-calendar             | 🟢    |
+| Card Select                                                                | p-cardselect           | 🔴    |
+| [Code Highlighter](https://peacock.redvars.com/components/code-highlighter)         | p-card-highlighter     | 🟢    |
+| Column                                                                     | p-col                  | 🔴    |
+| [Empty State](https://peacock.redvars.com/components/empty-state)                   | p-empty-state          | 🟡    |
+| [Flow Designer ](https://peacock.redvars.com/components/flow-designer)              | p-flow-designer        | 🔵    |
+| Grid                                                                       | p-grid                 | 🔴    |
+| Group                                                                      | p-group                | 🔴    |
+| [Header](https://peacock.redvars.com/components/header)                             | p-header               | 🟢    |
+| [Icon](https://peacock.redvars.com/components/icon)                                 | p-icon                 | 🟢    |
+| [Link](https://peacock.redvars.com/components/link)                                 | p-link                 | 🟢    |
+| [Modal](https://peacock.redvars.com/components/modal)                               | p-modal                | 🟢    |
+| [Notification Manager](https://peacock.redvars.com/components/notification-manager) | p-notification-manager | 🟡    |
+| Observer                                                                   | p-observer             | 🔴    |
+| Pagination                                                                 | p-pagination           | 🔴    |
+| Radio Group                                                                | p-radiogroup           | 🔴    |
+| Row                                                                        | p-row                  | 🔴    |
+| [Slider](https://peacock.redvars.com/components/slider)                             | p-slider               | 🟡    |
+| Spoiler                                                                    | p-spoiler              | 🔴    |
+| Stepper                                                                    | p-stepper              | 🔴    |
+| [Table](https://peacock.redvars.com/components/table)                               | p-table                | 🟡    |
+| [Tag](https://peacock.redvars.com/components/tag) / Chip                            | p-tag                  | 🟢    |
+| [Text](https://peacock.redvars.com/components/text)                                 | p-text                 | 🟢    |
+| [Tree View](https://peacock.redvars.com/components/tree-view)                       | p-tree-view            | 🟡    |
+| [Toggle](https://peacock.redvars.com/components/toggle)                             | p-toggle               | 🟢    |
+
+## Charts
+
+These components are used to display data in a graphical format. They include
+
+| Name                                                           | Component           | State |
+|----------------------------------------------------------------|---------------------|-------|
+| [Doughnut Chart](https://peacock.redvars.com/components/chart-doughnut) | p-chart-doughnut | 🟢    |
+| [Pie Chart ](https://peacock.redvars.com/components/chart-pie)          | p-chart-pie      | 🟢    |
+
+
+## 📄 License
+
+Peacock is open-source software licensed under the [Apache-2.0 License](LICENSE).
+
+---
+
+Made with 💖 by [shivajivarma](https://shivajivarma.com).

package/rollup.config.js

@@ -1,5 +1,6 @@
 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';
 
 export default [
@@ -12,15 +13,8 @@ export default [
     },
     plugins: [
       typescript(), // The plugin loads options from tsconfig.json by default
+      css(),
       nodeResolve(),
-      copy({
-        targets: [
-          {
-            src: '../design-tokens/dist/**',
-            dest: 'dist/assets/styles/',
-          },
-        ],
-      }),
     ],
   },
   {
@@ -33,7 +27,17 @@ export default [
     },
     plugins: [
       typescript(), // The plugin loads options from tsconfig.json by default
+      css(),
       nodeResolve(),
+
+      copy({
+        targets: [
+          {
+            src: '../readme.md',
+            dest: './',
+          },
+        ],
+      }),
     ],
   },
 ];

package/src/avatar/avatar.css.ts

@@ -1,5 +1,5 @@
 import { css, unsafeCSS } from 'lit';
-import { getTypography } from '../utils.js';
+import { getTypography } from '../styleMixins.css.js';
 
 export const styles = css`
   :host {
@@ -26,7 +26,7 @@ export const styles = css`
     color: var(--avatar-text-color);
     width: var(--avatar-size);
     height: var(--avatar-size);
-    ${unsafeCSS(getTypography('body-large-emphasized'))}
+    ${getTypography('body-large-emphasized')}
     background-color: var(--avatar-background-color);
 
     font-size: calc(var(--avatar-size) * 0.4);

package/src/avatar/avatar.ts

@@ -3,12 +3,6 @@ import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { styles } from './avatar.css.js';
 
-/**
- * @summary Icons are visual symbols used to represent ideas, objects, or actions.
- *
- * @cssprop --icon-color - Controls the color of the icon.
- * @cssprop --icon-size - Controls the size of the icon.
- */
 export class Avatar extends LitElement {
   static styles = [styles];
 

package/src/avatar/demo/index.html

@@ -3,7 +3,7 @@
 <head>
   <meta charset='utf-8'>
   <meta name='viewport' content='width=device-width, initial-scale=1.0, viewport-fit=cover' />
-  <link rel='stylesheet' href='/demo/tokens.css' />
+  <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>
@@ -18,7 +18,7 @@
 <p-avatar name='Shivaji Varma'></p-avatar>
 
 <script type='module'>
-  import { Avatar } from '/dist/src/index.js';
+  import { Avatar } from '/dist/index.js';
 
   window.customElements.define('p-avatar', Avatar);
 </script>

package/src/avatar/p-avatar.ts

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,33 @@
+import { css } from 'lit';
+import { getTypography } from '../styleMixins.css.js';
+
+export const styles = css`
+  :host {
+    display: inline-block;
+    --badge-color: var(--global-badge-color);
+  }
+
+  .badge {
+    pointer-events: none;
+    z-index: var(--z-index-badge);
+    color: var(--color-white);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: var(--badge-color);
+    border-radius: var(--shape-corner-full);
+
+    &.has-content {
+      height: 1rem;
+      min-width: 1rem;
+      padding-inline: var(--spacing-050);
+      ${getTypography('label-small')};
+      color: var(--color-on-error);
+    }
+
+    &:not(.has-content) {
+      height: 6px;
+      width: 6px;
+    }
+  }
+`;

package/src/badge/badge.ts

@@ -0,0 +1,29 @@
+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';
+
+export class Badge extends LitElement {
+  static styles = [styles];
+
+  @property({ type: String, reflect: true }) name: string = '';
+
+  @property({ type: String, reflect: true }) src?: string;
+
+  @state()
+  slotHasContent = false;
+
+  render() {
+    return html`<div
+      class=${classMap({ badge: true, 'has-content': this.slotHasContent })}
+    >
+      <slot @slotchange=${this.#handleSlotChange}></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

@@ -0,0 +1,54 @@
+<!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>
+
+<style>
+  .badge-wrapper {
+    position: relative;
+    display: inline-flex;
+    width: 1.5rem;
+    height: 1.5rem;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .badge-anchor-simple {
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
+
+  .badge-anchor {
+    position: absolute;
+    top: -2px;
+    left: calc(100% - 12px);
+  }
+</style>
+
+<div class="badge-wrapper">
+  <p-icon name="notifications"></p-icon>
+  <p-badge class="badge-anchor-simple"></p-badge>
+</div>
+
+
+<p-avatar name='Shivaji Varma'></p-avatar>
+
+<script type='module'>
+  import { Icon, Badge } from '/dist/index.js';
+  window.customElements.define('p-icon', Icon);
+  window.customElements.define('p-badge', Badge);
+</script>
+</body>
+</html>

package/src/badge/index.ts

@@ -0,0 +1 @@
+export { Badge } from './badge.js';

package/src/badge/p-badge.ts

@@ -0,0 +1,10 @@
+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/icon/demo/index.html

@@ -13,13 +13,13 @@
 <body>
 
 
-<pc-icon></pc-icon>
-<pc-icon provider='carbon' name='logo--github'></pc-icon>
+<p-icon></p-icon>
+<p-icon provider='carbon' name='logo--github'></p-icon>
 
 <script type='module'>
-  import { Icon } from '/dist/src/index.js';
+  import { Icon } from '/dist/index.js';
 
-  window.customElements.define('pc-icon', Icon);
+  window.customElements.define('p-icon', Icon);
 </script>
 </body>
 </html>

package/src/icon/icon.ts

@@ -5,16 +5,10 @@ import { fetchIcon, fetchSVG } from './datasource.js';
 import { sanitizeSvg } from '../utils.js';
 import { styles } from './icon.css.js';
 
-/**
- * @summary Icons are visual symbols used to represent ideas, objects, or actions.
- *
- * @cssprop --icon-color - Controls the color of the icon.
- * @cssprop [--icon-size=1rem] - Controls the size of the icon. Defaults to "1rem"
- */
 export class Icon extends LitElement {
   static styles = [styles];
 
-  @property({ type: String, reflect: true }) name?: string = 'home';
+  @property({ type: String, reflect: true }) name?: string;
 
   @property({ type: String, reflect: true }) src?: string;
 

package/src/icon/p-icon.ts

@@ -1,5 +1,12 @@
 import { customElement } from 'lit/decorators.js';
 import { Icon } from './icon.js';
 
+/**
+ * @name Icon
+ * @summary Icons are visual symbols used to represent ideas, objects, or actions.
+ *
+ * @cssprop --icon-color - Controls the color of the icon.
+ * @cssprop [--icon-size=1rem] - Controls the size of the icon. Defaults to "1rem"
+ */
 @customElement('p-icon')
-export class IconComponent extends Icon {}
+export class PIcon extends Icon {}

package/src/index.ts

@@ -1,2 +1,3 @@
-export { Icon } from './icon/icon.js';
-export { Avatar } from './avatar/avatar.js';
+export { Icon } from './icon/index.js';
+export { Avatar } from './avatar/index.js';
+export { Badge } from './badge/index.js';