@redvars/peacock 3.2.10 → 3.3.0

package/src/code-highlighter/code-highlighter.ts

@@ -12,10 +12,25 @@ import * as prettierPluginEstree from 'prettier/plugins/estree';
 
 import { BundledLanguage, codeToHtml, ShikiTransformer } from 'shiki';
 
-import PeacockComponent from 'src/PeacockComponent.js';
+import IndividualComponent from 'src/IndividualComponent.js';
 import { copyToClipboard } from '../utils/copy-to-clipboard.js';
 import styles from './code-highlighter.scss';
 
+/**
+ * @label Code Highlighter
+ * @tag wc-code-highlighter
+ * @rawTag code-highlighter
+ * @summary A component that provides syntax highlighting for code snippets.
+ * @tags display
+ *
+ * @example
+ * ```html
+ * <wc-code-highlighter language="javascript">
+ *   <pre><code>console.log('Hello');</code></pre>
+ * </wc-code-highlighter>
+ * ```
+ */
+
 const locale = {
   loading: 'Loading code...',
   copyToClipboard: 'Copy to clipboard',
@@ -43,7 +58,7 @@ const locale = {
  * ```
  * @tags display
  */
-@PeacockComponent
+@IndividualComponent
 export class CodeHighlighter extends LitElement {
   static styles = [styles];
 
@@ -173,7 +188,7 @@ export class CodeHighlighter extends LitElement {
         <div class="header">
           <div class="header-title">${this.language}</div>
           <div class="header-actions">
-            <icon-button
+            <wc-icon-button
               color="dark"
               variant="text"
               size="xs"
@@ -182,7 +197,7 @@ export class CodeHighlighter extends LitElement {
               tooltip=${locale.copyToClipboard}
               @click=${this.__handleCopyClick}
             >
-            </icon-button>
+            </wc-icon-button>
           </div>
         </div>
 

package/src/container/container.ts

@@ -7,22 +7,17 @@ type ContainerSize = 'max' | 'xl' | 'lg' | 'md' | 'sm' | 'full';
 
 /**
  * @label Container
- * @tag base-container
+ * @tag wc-container
  * @rawTag container
- * @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.
- *
+ * @summary A responsive container component for layout.
+ * @cssprop --container-max-width - Controls the maximum width of the container.
+ * @cssprop --container-padding - Controls the padding of the container.
+ * @tags layout
  *
  * @example
  * ```html
- * <base-container>Container</base-avatar>
+ * <wc-container size="lg">Content</wc-container>
  * ```
- *
- * @tags display
  */
 export class Container extends LitElement {
   @property({ type: String, reflect: true })

package/src/date-picker/date-picker.ts

@@ -7,14 +7,14 @@ import { spread } from '../spread.js';
 
 /**
  * @label Date Picker
- * @tag date-picker
+ * @tag wc-date-picker
  * @rawTag date-picker
- *
  * @summary The Date Picker component is used to capture date user input.
+ * @tags input
  *
  * @example
  * ```html
- * <date-picker label="Name" required placeholder="Enter your name"></date-picker>
+ * <wc-date-picker label="Date" placeholder="Select a date"></wc-date-picker>
  * ```
  */
 export class DatePicker extends BaseInput {
@@ -122,7 +122,7 @@ export class DatePicker extends BaseInput {
 
   render() {
     return html`
-      <base-field
+      <wc-field
         ?required=${this.required}
         ?disabled=${this.disabled}
         ?readonly=${this.readonly}
@@ -161,7 +161,7 @@ export class DatePicker extends BaseInput {
 
         <slot name="end" slot="field-end"></slot>
 
-        <icon-button
+        <wc-icon-button
           slot="field-end"
           color="secondary"
           variant="text"
@@ -174,8 +174,8 @@ export class DatePicker extends BaseInput {
             });
           }}
         >
-        </icon-button>
-      </base-field>
+        </wc-icon-button>
+      </wc-field>
     `;
   }
 }

package/src/divider/divider.ts

@@ -6,7 +6,7 @@ import { observerSlotChangesWithCallback } from '../utils.js';
 
 /**
  * @label Divider
- * @tag base-divider
+ * @tag wc-divider
  * @rawTag divider
  *
  * @summary The divider component is used to visually separate content.
@@ -19,7 +19,7 @@ import { observerSlotChangesWithCallback } from '../utils.js';
  *
  * @example
  * ```html
- * <base-divider style="width: 12rem;">or</base-divider>
+ * <wc-divider style="width: 12rem;">or</wc-divider>
  * ```
  * @tags display
  */

package/src/elevation/elevation.ts

@@ -3,7 +3,7 @@ import styles from './elevation.scss';
 
 /**
  * @label Elevation
- * @tag base-elevation
+ * @tag wc-elevation
  * @rawTag elevation
  *
  * @summary Adds elevation to an element.
@@ -17,7 +17,7 @@ import styles from './elevation.scss';
  * @example
  * ```html
  *   <div style="position: relative; padding: var(--spacing-200);">
- *     <base-elevation style='--elevation-level: 2; --elevation-container-shape: var(--shape-corner-extra-small);'></base-elevation>
+ *     <wc-elevation style='--elevation-level: 2; --elevation-container-shape: var(--shape-corner-extra-small);'></wc-elevation>
  *     Level 2
  *   </div>
  * ```

package/src/empty-state/empty-state.ts

@@ -5,8 +5,15 @@ import styles from './empty-state.scss';
 
 /**
  * @label Empty State
- * @name empty-state
- * @description A message that displays when there is no information to display.
+ * @tag wc-empty-state
+ * @rawTag empty-state
+ * @summary A message that displays when there is no information to display.
+ * @tags display
+ *
+ * @example
+ * ```html
+ * <wc-empty-state headline="No items found"></wc-empty-state>
+ * ```
  */
 export class EmptyState extends LitElement {
   // Lit handles styles in a static property for better performance
@@ -69,7 +76,7 @@ export class EmptyState extends LitElement {
       <div class="${classMap(classes)}">
         <div class="empty-state-container">
           <div class="illustration">
-            <base-icon src="${illustrationPath}"></base-icon>
+            <wc-icon src="${illustrationPath}"></wc-icon>
           </div>
 
           <div class="content">

package/src/field/field.scss

@@ -225,8 +225,8 @@
   position: absolute;
   top: 0;
   left: 0;
-  --skeleton-shape-start-start: var(--shape-corner-extra-small);
-  --skeleton-shape-start-end: var(--shape-corner-extra-small);
-  --skeleton-shape-end-start: var(--shape-corner-extra-small);
-  --skeleton-shape-end-end: var(--shape-corner-extra-small);
+  --skeleton-container-shape-start-start: var(--_container-shape-start-start);
+  --skeleton-container-shape-start-end: var(--_container-shape-start-end);
+  --skeleton-container-shape-end-start: var(--_container-shape-end-start);
+  --skeleton-container-shape-end-end: var(--_container-shape-end-end);
 }

package/src/field/field.ts

@@ -4,6 +4,23 @@ import { classMap } from 'lit/directives/class-map.js';
 import styles from './field.scss';
 import { observerSlotChangesWithCallback } from '../utils.js';
 
+/**
+ * @label Field
+ * @tag wc-field
+ * @rawTag field
+ *
+ * @summary Wrapper for form fields with label and help text.
+ * @overview
+ * <p>Field provides consistent styling and behavior for form inputs.</p>
+ *
+ * @example
+ * ```html
+ * <wc-field label="Name" required>
+ *   some text
+ * </wc-field>
+ * ```
+ * @tags form
+ */
 export class Field extends LitElement {
   static styles = [styles];
 
@@ -106,7 +123,7 @@ export class Field extends LitElement {
         ${this.label}${this.required
           ? html`<span class="required">*</span>`
           : nothing}
-        <base-skeleton class="skeleton"></base-skeleton>
+        <wc-skeleton class="skeleton"></wc-skeleton>
       </label>
     </div>`;
   }
@@ -132,7 +149,7 @@ export class Field extends LitElement {
         <div class="field-body" @click=${this.__handleClick}>
           <div class="outline"></div>
           <div class="background"></div>
-          <base-skeleton class="skeleton"></base-skeleton>
+          <wc-skeleton class="skeleton"></wc-skeleton>
 
           <div class="field-content">
             <div

package/src/focus-ring/focus-ring.scss

@@ -7,6 +7,7 @@
   border-end-start-radius: var(--focus-ring-container-shape-end-start);
   border-end-end-radius: var(--focus-ring-container-shape-end-end);
   corner-shape: var(--focus-ring-container-shape-variant);
+  --focus-ring-color: var(--color-primary);
 
   inset: calc(-1 * var(--focus-ring-inset, 2px));
 
@@ -19,5 +20,5 @@
 
 :host([visible]) {
   display: flex;
-  outline: 3px solid var(--color-primary);
+  outline: 3px solid var(--focus-ring-color);
 }

package/src/focus-ring/focus-ring.ts

@@ -5,7 +5,7 @@ import styles from './focus-ring.scss';
 /**
  * @label Focus Ring
  *
- * @tag focus-ring
+ * @tag wc-focus-ring
  * @rawTag focus-ring
  *
  * @summary Adds a focus ring to an element.

package/src/icon/icon.ts

@@ -8,7 +8,7 @@ import styles from './icon.scss';
 export type IconProvider = 'material-symbols' | 'material-icons';
 /**
  * @label Icon
- * @tag base-icon
+ * @tag wc-icon
  * @rawTag icon
  * @summary Icons are visual symbols used to represent ideas, objects, or actions.
  * @overview Icons are visual symbols used to represent ideas, objects, or actions. They communicate messages at a glance, afford interactivity, and draw attention to important information.
@@ -18,7 +18,7 @@ export type IconProvider = 'material-symbols' | 'material-icons';
  *
  * @example
  * ```html
- * <base-icon name="home" style="--icon-size: 2rem;"></base-icon>
+ * <wc-icon name="home" style="--icon-size: 2rem;"></wc-icon>
  * ```
  *
  */

package/src/icon/p-icon.ts

@@ -1,5 +1,5 @@
 import { customElement } from 'lit/decorators.js';
 import { Icon } from './icon.js';
 
-@customElement('base-icon')
+@customElement('wc-icon')
 export class PIcon extends Icon {}

package/src/image/image.ts

@@ -7,23 +7,15 @@ import styles from './image.scss';
 
 /**
  * @label Image
- * @tag base-image
+ * @tag wc-image
  * @rawTag image
- *
- * @summary Image
- * @overview
- *  - CodeHighlighter is a component that provides syntax highlighting for code snippets.
- *  - It supports various programming languages and can display line numbers for better readability.
+ * @summary An image component with lazy loading and theme support.
+ * @tags media
  *
  * @example
  * ```html
- * <code-highlighter language="javascript" style="height: 9rem"><pre><code>
- *   function helloWorld() {
- *     console.log('Hello, world!');
- *   }</code></pre>
- * </code-highlighter>
+ * <wc-image src="image.jpg" alt="Description"></wc-image>
  * ```
- * @tags display
  */
 export class Image extends LitElement {
   static styles = [styles];

package/src/index.ts

@@ -8,7 +8,7 @@ export { Button, ButtonGroup, IconButton } from './button/index.js';
 
 export { FocusRing } from './focus-ring/index.js';
 export { Ripple } from './ripple/index.js';
-export { Accordion } from './accordion/accordion/index.js';
+export { Accordion } from './accordion/index.js';
 export { Link } from './link/index.js';
 export { Tag } from './chip/tag/index.js';
 export { Chip } from './chip/chip/index.js';
@@ -32,4 +32,8 @@ export { Breadcrumb, BreadcrumbItem } from './breadcrumb/index.js';
 
 export { CodeHighlighter } from './code-highlighter/index.js';
 export { CodeEditor } from './code-editor/index.js';
-export { Image } from './image/index.js';
+export { Image } from './image/index.js';
+export { Tab, TabGroup, TabPanel, Tabs } from './tabs/index.js';
+export { Slider } from './slider/index.js';
+export { ChartDoughnut } from './chart-doughnut/index.js';
+export { ChartPie } from './chart-pie/index.js';

package/src/input/input.ts

@@ -6,14 +6,14 @@ import styles from './input.scss';
 import { spread } from '../spread.js';
 /**
  * @label Input
- * @tag input-field
+ * @tag wc-input
  * @rawTag input
  *
  * @summary The Input component is used to capture user input.
  *
  * @example
  * ```html
- * <input-field label="Name" required placeholder="Enter your name"></input-field>
+ * <wc-input label="Name" required placeholder="Enter your name"></wc-input>
  * ```
  */
 export class Input extends BaseInput {
@@ -127,7 +127,7 @@ export class Input extends BaseInput {
       this.type === 'password' && this.passwordVisible ? 'text' : this.type;
 
     return html`
-      <base-field
+      <wc-field
         ?required=${this.required}
         ?disabled=${this.disabled}
         ?readonly=${this.readonly}
@@ -172,7 +172,7 @@ export class Input extends BaseInput {
                   ? 'Hide password'
                   : 'Show password'}
               >
-                <icon-button
+                <wc-icon-button
                   class="password-toggle"
                   variant="text"
                   name=${this.passwordVisible ? 'visibility_off' : 'visibility'}
@@ -180,13 +180,13 @@ export class Input extends BaseInput {
                     this.passwordVisible = !this.passwordVisible;
                   }}
                 >
-                </icon-button>
+                </wc-icon-button>
               </pc-tooltip>
             `
           : nothing}
 
         <slot name="end" slot="field-end"></slot>
-      </base-field>
+      </wc-field>
     `;
   }
 }

package/src/link/link.ts

@@ -5,17 +5,16 @@ import styles from './link.scss';
 
 /**
  * @label Link
- * @tag base-link
+ * @tag wc-link
  * @rawTag link
  * @summary The link component is used to navigate to a new page or section within the current page.
- *
- * @cssprop --badge-color - Controls the color of the badge.
+ * @cssprop --link-color - Controls the color of the link.
+ * @tags navigation
  *
  * @example
  * ```html
- * <base-link href="#">Link</base-link>
+ * <wc-link href="#">Link</wc-link>
  * ```
- * @tags display
  */
 export class Link extends LitElement {
   static styles = [styles];

package/src/menu/menu/menu.ts

@@ -1,6 +1,22 @@
 import { LitElement, html, css } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 
+/**
+ * @label Menu
+ * @tag wc-menu
+ * @rawTag menu
+ * @summary A dropdown menu component.
+ * @tags navigation
+ *
+ * @example
+ * ```html
+ * <wc-menu>
+ *   <wc-menu-list>
+ *     <wc-menu-item>Item 1</wc-menu-item>
+ *   </wc-menu-list>
+ * </wc-menu>
+ * ```
+ */
 export class Menu extends LitElement {
   @property({ type: Boolean, reflect: true }) open = false;
 

package/src/menu/menu-item/menu-item-colors.scss

@@ -1,12 +1,12 @@
 @use "../../../scss/mixin";
 
-:host-context(menu-list[variant=standard]) {
+:host-context([variant=standard]) {
   --menu-item-label-color: var(--color-on-surface-variant);
   --menu-item-label-selected-color: var(--color-on-tertiary-container);
   --menu-item-container-selected-color: var(--color-tertiary-container);
 }
 
-:host-context(menu-list[variant=vibrant]) {
+:host-context([variant=vibrant]) {
   --menu-item-label-color: var(--color-on-tertiary-container);
   --menu-item-label-selected-color: var(--color-on-tertiary);
   --menu-item-container-selected-color: var(--color-tertiary);

package/src/menu/menu-item/menu-item.ts

@@ -4,6 +4,18 @@ import { classMap } from 'lit/directives/class-map.js';
 import styles from './menu-item.scss';
 import colorStyles from './menu-item-colors.scss';
 
+/**
+ * @label Menu Item
+ * @tag wc-menu-item
+ * @rawTag menu-item
+ * @summary An item in a menu list.
+ * @tags navigation
+ *
+ * @example
+ * ```html
+ * <wc-menu-item>Menu Item</wc-menu-item>
+ * ```
+ */
 export class MenuItem extends LitElement {
   @property({ type: Boolean, reflect: true }) disabled = false;
 
@@ -91,9 +103,9 @@ export class MenuItem extends LitElement {
 
   renderContent() {
     return html`
-      <focus-ring class="focus-ring" .control=${this}  element="menuItemElement"></focus-ring>
+      <wc-focus-ring class="focus-ring" .control=${this}  element="menuItemElement"></wc-focus-ring>
       <div class="background"></div>
-      <base-ripple class="ripple"></base-ripple>
+      <wc-ripple class="ripple"></wc-ripple>
 
       <div class="menu-item-content">
         <slot name="leading-icon"></slot>

package/src/menu/menu-list/menu-list.ts

@@ -3,6 +3,21 @@ import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import styles from './menu-list.scss';
 
+/**
+ * @label Menu List
+ * @tag wc-menu-list
+ * @rawTag menu-list
+ * @summary A list of menu items.
+ * @tags navigation
+ *
+ * @example
+ * ```html
+ * <wc-menu-list>
+ *   <wc-menu-item>Item 1</wc-menu-item>
+ *   <wc-menu-item>Item 2</wc-menu-item>
+ * </wc-menu-list>
+ * ```
+ */
 export class MenuList extends LitElement {
   static styles = [styles];
 
@@ -23,7 +38,7 @@ export class MenuList extends LitElement {
       })}
     >
       <div class="background"></div>
-      <base-elevation class="elevation"></base-elevation>
+      <wc-elevation class="elevation"></wc-elevation>
 
       <div class="menu-list-content">
         <slot></slot>

package/src/number-counter/demo/index.html

@@ -20,7 +20,7 @@
 
 
 <p class='text-body'>
-  <number-counter value='400'></number-counter>
+  <wc-number-counter value='400'></wc-number-counter>
 </p>
 
 

package/src/number-counter/number-counter.ts

@@ -1,29 +1,31 @@
 import { html, LitElement, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
-import PeacockComponent from 'src/PeacockComponent.js';
+import IndividualComponent from 'src/IndividualComponent.js';
 import styles from './number-counter.scss';
 
 /**
  * @label Number Counter
- * @tag number-counter
+ * @tag wc-number-counter
  * @rawTag number-counter
  * @summary Displays a number with commas for thousands.
  *
  * @example
  * ```html
- * <number-counter value="123456789"></number-counter>
+ * <wc-number-counter id="number-counter" value="123456789"></wc-number-counter>
  * <script>
- *     const $counter = document.querySelector('number-counter');
- *
- *     setInterval(() => {
- *         $counter.value = $counter.value + parseInt(Math.floor(Math.random() * 1000));
- *     }, 1000);
+ *   customElements.whenDefined('wc-number-counter').then(() => {
+      const $counter = document.querySelector('#number-counter');
+
+      setInterval(() => {
+        $counter.value = $counter.value + Math.floor(Math.random() * 1000);
+      }, 1000);
+    });
  * </script>
  * ```
  * @tags display
  */
-@PeacockComponent
+@IndividualComponent
 export class NumberCounter extends LitElement {
   static styles = [styles];
 

package/src/number-field/number-field.ts

@@ -15,7 +15,7 @@ import { spread } from '../spread.js';
  *
  * @example
  * ```html
- * <number-field label="Age" placeholder="Enter your age"></number-field>
+ * <wc-number-field label="Age" placeholder="Enter your age"></wc-number-field>
  * ```
  */
 export class NumberField extends BaseInput {
@@ -150,7 +150,7 @@ export class NumberField extends BaseInput {
     };
 
     return html`
-      <base-field
+      <wc-field
         ?required=${this.required}
         ?disabled=${this.disabled}
         ?readonly=${this.readonly}
@@ -166,13 +166,13 @@ export class NumberField extends BaseInput {
         class=${classMap(classes)}
       >
         ${this.stepper && !this.disabled
-          ? html`<icon-button
+          ? html`<wc-icon-button
               class="stepper"
               name="remove"
               variant="text"
               slot="field-start"
               @click=${this.stepDown}
-            ></icon-button>`
+            ></wc-icon-button>`
           : nothing}
 
         <slot name="start" slot="field-start"></slot>
@@ -201,15 +201,15 @@ export class NumberField extends BaseInput {
         <slot name="end" slot="field-end"></slot>
 
         ${this.stepper && !this.disabled
-          ? html`<icon-button
+          ? html`<wc-icon-button
               class="stepper"
               variant="text"
               name="add"
               slot="field-end"
               @click=${this.stepUp}
-            ></icon-button>`
+            ></wc-icon-button>`
           : nothing}
-      </base-field>
+      </wc-field>
     `;
   }
 }