@redvars/peacock 3.2.9 → 3.3.0

package/dist/src/IndividualComponent.d.ts

@@ -0,0 +1 @@
+export default function IndividualComponent(constructor: Function): void;

package/dist/src/accordion/{accordion-item/accordion-item.d.ts → accordion-item.d.ts}

@@ -1,15 +1,15 @@
 import { LitElement } from 'lit';
 /**
  * @label Accordion Item
- * @tag accordion-item
- * @rawTag accordion
+ * @tag wc-accordion-item
+ * @rawTag accordion-item
  * @summary An accordion item is single item in an accordion list. It contains a header and a content section that can be expanded or collapsed by the user.
  *
  * @example
  * ```html
- * <base-accordion-item>
+ * <wc-accordion-item>
  * Testing
- * </accordion-item>
+ * </wc-accordion-item>
  * ```
  * @tags display
  */

package/dist/src/accordion/{accordion/accordion.d.ts → accordion.d.ts}

@@ -1,18 +1,18 @@
 import { LitElement } from 'lit';
-import { AccordionItem } from '../accordion-item/accordion-item.js';
+import { AccordionItem } from './accordion-item.js';
 /**
  * @label Accordion
- * @tag base-accordion
+ * @tag wc-accordion
  * @rawTag accordion
  * @summary An accordion is a vertically stacked list of headers that reveal or hide associated sections of content.
  *
  * @example
  * ```html
- * <base-accordion>
- *     <accordion-item heading="Accordion">
+ * <wc-accordion>
+ *     <wc-accordion-item heading="Accordion">
  *         Content
- *     </accordion-item>
- * </base-accordion>
+ *     </wc-accordion-item>
+ * </wc-accordion>
  * ```
  * @tags display
  */

package/dist/src/accordion/{accordion-item/index.d.ts → index.d.ts}

@@ -1 +1,2 @@
 export { AccordionItem } from './accordion-item.js';
+export { Accordion } from './accordion.js';

package/dist/src/avatar/avatar.d.ts

@@ -1,7 +1,7 @@
 import { LitElement } from 'lit';
 /**
  * @label Avatar
- * @tag base-avatar
+ * @tag wc-avatar
  * @rawTag avatar
  * @summary The Avatar component is used to represent user, and displays the profile picture, initials or fallback icon.
  *
@@ -13,7 +13,7 @@ import { LitElement } from 'lit';
  *
  * @example
  * ```html
- * <base-avatar name="Shivaji Varma" src="https://peacock.redvars.com/assets/img/avatar.xs.webp" style='--avatar-size: 4rem'></base-avatar>
+ * <wc-avatar name="Shivaji Varma" src="https://peacock.redvars.com/assets/img/avatar.xs.webp" style='--avatar-size: 4rem'></wc-avatar>
  * ```
  *
  * @tags display

package/dist/src/badge/badge.d.ts

@@ -1,7 +1,7 @@
 import { LitElement } from 'lit';
 /**
  * @label Badge
- * @tag base-badge
+ * @tag wc-badge
  * @rawTag badge
  * @summary The badge component is used to display a small amount of information to the user.
  *
@@ -9,7 +9,7 @@ import { LitElement } from 'lit';
  *
  * @example
  * ```html
- * <base-badge value="1"></base-badge>
+ * <wc-badge value="1"></wc-badge>
  * ```
  * @tags display
  */

package/dist/src/breadcrumb/breadcrumb/breadcrumb.d.ts

@@ -1,24 +1,23 @@
 import { LitElement } from 'lit';
 /**
  * @label Breadcrumb
- * @tag base-breadcrumb
+ * @tag wc-breadcrumb
  * @rawTag breadcrumb
- *
  * @summary A breadcrumb is a secondary navigation scheme that reveals the user's location in a website or web application.
  * @overview
  *  - Breadcrumbs provide a trail for users to follow back to the starting or entry point.
  *  - They help users understand their current location within the site hierarchy.
  *  - Follows WCAG 2.1 guidelines for accessible navigation landmarks.
+ * @tags navigation
  *
  * @example
  * ```html
- * <base-breadcrumb label="Breadcrumb">
- *   <breadcrumb-item href="#">Home</breadcrumb-item>
- *   <breadcrumb-item href="#">Category</breadcrumb-item>
- *   <breadcrumb-item active>Current Page</breadcrumb-item>
- * </base-breadcrumb>
+ * <wc-breadcrumb label="Breadcrumb">
+ *   <wc-breadcrumb-item href="#">Home</wc-breadcrumb-item>
+ *   <wc-breadcrumb-item href="#">Category</wc-breadcrumb-item>
+ *   <wc-breadcrumb-item active>Current Page</wc-breadcrumb-item>
+ * </wc-breadcrumb>
  * ```
- * @tags navigation
  */
 export declare class Breadcrumb extends LitElement {
     static styles: import("lit").CSSResultGroup[];

package/dist/src/breadcrumb/breadcrumb-item/breadcrumb-item.d.ts

@@ -1,15 +1,15 @@
 import { LitElement } from 'lit';
 /**
  * @label Breadcrumb Item
- * @tag breadcrumb-item
+ * @tag wc-breadcrumb-item
  * @rawTag breadcrumb-item
  * @summary A breadcrumb item component that represents a single item in a breadcrumb navigation.
+ * @tags navigation
  *
  * @example
  * ```html
- * <breadcrumb-item href="#">Home</breadcrumb-item>
+ * <wc-breadcrumb-item href="#">Home</wc-breadcrumb-item>
  * ```
- * @tags navigation
  */
 export declare class BreadcrumbItem extends LitElement {
     static styles: import("lit").CSSResultGroup[];

package/dist/src/button/button/button.d.ts

@@ -1,7 +1,7 @@
 import { BaseButton } from '../BaseButton.js';
 /**
  * @label Button
- * @tag base-button
+ * @tag wc-button
  * @rawTag button
  *
  * @summary Buttons help people initiate actions, from sending an email, to sharing a document, to liking a post.
@@ -37,7 +37,7 @@ import { BaseButton } from '../BaseButton.js';
  *
  * @example
  * ```html
- * <base-button>Button</base-button>
+ * <wc-button>Button</wc-button>
  * ```
  * @tags display
  */

package/dist/src/button/button-group/button-group.d.ts

@@ -1,17 +1,17 @@
 import { LitElement } from 'lit';
 /**
  * @label Button Group
- * @tag button-group
+ * @tag wc-button-group
  * @rawTag button-group
  *
  * @summary Group a series of buttons together on a single line with the button group, and super-power.
 
  * @example
  * ```html
- * <button-group>
- *  <icon-button name="home"></icon-button>
- *  <icon-button name="alarm"></icon-button>
- * </button-group>
+ * <wc-button-group>
+ *  <wc-icon-button name="home"></wc-icon-button>
+ *  <wc-icon-button name="alarm"></wc-icon-button>
+ * </wc-button-group>
  * ```
  *
  * @tags controls

package/dist/src/button/icon-button/icon-button.d.ts

@@ -2,7 +2,7 @@ import { BaseButton } from '../BaseButton.js';
 import { IconProvider } from '../../icon/icon.js';
 /**
  * @label Icon Button
- * @tag icon-button
+ * @tag wc-icon-button
  * @rawTag icon-button
  *
  * @summary Icon buttons allow users to take actions, and make choices, with a single tap.
@@ -39,7 +39,7 @@ import { IconProvider } from '../../icon/icon.js';
  *
  * @example
  * ```html
- * <icon-button name="home"></icon-button>
+ * <wc-icon-button name="home"></wc-icon-button>
  * ```
  * @tags display
  */

package/dist/src/chart-donut/chart-donut.d.ts

@@ -0,0 +1,53 @@
+import { LitElement, PropertyValues } from 'lit';
+export type ChartDonutColor = {
+    color: string;
+};
+export type ChartDonutItem = {
+    name: string;
+    value: number;
+    label?: string;
+    color?: string;
+};
+/**
+ * @label Chart Donut
+ * @tag wc-chart-donut
+ * @rawTag chart-donut
+ * @summary A donut chart is a circular chart with a blank center. The area in the center can be used to display information.
+ * @tags charts
+ *
+ * @example
+ * ```html
+ * <wc-chart-donut width="400" label="Total"></wc-chart-donut>
+ * <script>
+ *   document.querySelector('wc-chart-donut').data = [
+ *     { name: 'A', value: 30, label: 'Category A' },
+ *     { name: 'B', value: 50, label: 'Category B' },
+ *     { name: 'C', value: 20, label: 'Category C' },
+ *   ];
+ * </script>
+ * ```
+ */
+export declare class ChartDonut extends LitElement {
+    static styles: import("lit").CSSResultGroup[];
+    private svgElement?;
+    /** Width (and height) of the chart in pixels. */
+    width: number;
+    /** Margin around the chart. */
+    margin: number;
+    /** Whether to show labels outside the chart. */
+    showLabels: boolean;
+    /** Chart data array. Each item should have name, value, and optional label and color. */
+    data: ChartDonutItem[];
+    /** Label displayed in the center of the donut. */
+    label?: string;
+    private _initialized;
+    private _debouncedRenderChart;
+    firstUpdated(): void;
+    updated(changedProperties: PropertyValues): void;
+    private _getRadius;
+    private _getTotal;
+    private _getPieData;
+    private _getColorScale;
+    private _renderChart;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/src/chart-donut/index.d.ts

@@ -0,0 +1 @@
+export { ChartDonut } from './chart-donut.js';

package/dist/src/chart-doughnut/chart-doughnut.d.ts

@@ -0,0 +1,53 @@
+import { LitElement, PropertyValues } from 'lit';
+export type ChartDoughnutColor = {
+    color: string;
+};
+export type ChartDoughnutItem = {
+    name: string;
+    value: number;
+    label?: string;
+    color?: string;
+};
+/**
+ * @label Chart Doughnut
+ * @tag wc-chart-doughnut
+ * @rawTag chart-doughnut
+ * @summary A doughnut chart is a circular chart with a blank center. The area in the center can be used to display information.
+ * @tags charts
+ *
+ * @example
+ * ```html
+ * <wc-chart-doughnut width="400" label="Total"></wc-chart-doughnut>
+ * <script>
+ *   document.querySelector('wc-chart-doughnut').data = [
+ *     { name: 'A', value: 30, label: 'Category A' },
+ *     { name: 'B', value: 50, label: 'Category B' },
+ *     { name: 'C', value: 20, label: 'Category C' },
+ *   ];
+ * </script>
+ * ```
+ */
+export declare class ChartDoughnut extends LitElement {
+    static styles: import("lit").CSSResultGroup[];
+    private svgElement?;
+    /** Width (and height) of the chart in pixels. */
+    width: number;
+    /** Margin around the chart. */
+    margin: number;
+    /** Whether to show labels outside the chart. */
+    showLabels: boolean;
+    /** Chart data array. Each item should have name, value, and optional label and color. */
+    data: ChartDoughnutItem[];
+    /** Label displayed in the center of the doughnut. */
+    label?: string;
+    private _initialized;
+    private _debouncedRenderChart;
+    firstUpdated(): void;
+    updated(changedProperties: PropertyValues): void;
+    private _getRadius;
+    private _getTotal;
+    private _getPieData;
+    private _getColorScale;
+    private _renderChart;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/src/chart-doughnut/index.d.ts

@@ -0,0 +1 @@
+export { ChartDoughnut } from './chart-doughnut.js';

package/dist/src/chart-pie/chart-pie.d.ts

@@ -0,0 +1,50 @@
+import { LitElement, PropertyValues } from 'lit';
+export type ChartPieColor = {
+    color: string;
+};
+export type ChartPieItem = {
+    name: string;
+    value: number;
+    label?: string;
+    color?: string;
+};
+/**
+ * @label Chart Pie
+ * @tag wc-chart-pie
+ * @rawTag chart-pie
+ * @summary A pie chart is a circular statistical graphic that visually represents numerical proportions.
+ * @tags charts
+ *
+ * @example
+ * ```html
+ * <wc-chart-pie width="400"></wc-chart-pie>
+ * <script>
+ *   document.querySelector('wc-chart-pie').data = [
+ *     { name: 'A', value: 30, label: 'Category A' },
+ *     { name: 'B', value: 50, label: 'Category B' },
+ *     { name: 'C', value: 20, label: 'Category C' },
+ *   ];
+ * </script>
+ * ```
+ */
+export declare class ChartPie extends LitElement {
+    static styles: import("lit").CSSResultGroup[];
+    private svgElement?;
+    /** Width (and height) of the chart in pixels. */
+    width: number;
+    /** Margin around the chart. */
+    margin: number;
+    /** Whether to show labels outside the chart. */
+    showLabels: boolean;
+    /** Chart data array. Each item should have name, value, and optional label and color. */
+    data: ChartPieItem[];
+    private _initialized;
+    private _debouncedRenderChart;
+    firstUpdated(): void;
+    updated(changedProperties: PropertyValues): void;
+    private _getRadius;
+    private _getPieData;
+    private _getColorScale;
+    private _renderChart;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/src/chart-pie/index.d.ts

@@ -0,0 +1 @@
+export { ChartPie } from './chart-pie.js';

package/dist/src/checkbox/checkbox.d.ts

@@ -1,29 +1,26 @@
 import { LitElement } from 'lit';
 /**
  * @label Checkbox
- * @tag base-checkbox
+ * @tag wc-checkbox
  * @rawTag checkbox
- *
  * @summary Captures boolean input with an optional indeterminate mode.
  * @overview
  * <p>Checkboxes allow users to select one or more items from a set. Checkboxes can turn an option on or off.</p>
  * <p>Material Design 3 checkboxes feature a smooth animation and clear visual states for checked, unchecked, and indeterminate.</p>
- *
  * @cssprop --checkbox-size: Size of the checkbox container.
  * @cssprop --checkbox-selected-color: Color of the checkbox when selected.
  * @cssprop --checkbox-unselected-color: Color of the checkbox border when unselected.
  * @cssprop --checkbox-checkmark-color: Color of the checkmark icon.
  * @cssprop --checkbox-state-layer-size: Size of the state layer for touch target.
- *
  * @fires {CustomEvent} change - Dispatched when the checkbox value changes.
  * @fires {CustomEvent} blur - Dispatched when the checkbox loses focus.
  * @fires {CustomEvent} focus - Dispatched when the checkbox receives focus.
+ * @tags input, form
  *
  * @example
  * ```html
- * <base-checkbox label="Accept terms"></base-checkbox>
+ * <wc-checkbox label="Accept terms"></wc-checkbox>
  * ```
- * @tags input, form
  */
 export declare class Checkbox extends LitElement {
     static styles: import("lit").CSSResultGroup[];

package/dist/src/chip/chip/chip.d.ts

@@ -1,15 +1,15 @@
 import { LitElement } from 'lit';
 /**
  * @label Chip
- * @tag base-chip
+ * @tag wc-chip
  * @rawTag chip
- * @summary
+ * @summary Chip component for displaying compact information with optional actions.
+ * @tags display
  *
  * @example
  * ```html
- * <base-tag>Link</base-tag>
+ * <wc-chip>Chip content</wc-chip>
  * ```
- * @tags display
  */
 export declare class Chip extends LitElement {
     static styles: import("lit").CSSResultGroup[];

package/dist/src/chip/tag/tag.d.ts

@@ -1,15 +1,15 @@
 import { LitElement } from 'lit';
 /**
  * @label Tag
- * @tag base-tag
+ * @tag wc-tag
  * @rawTag tag
  * @summary Tag component for displaying labels or values with optional dismiss functionality.
+ * @tags display
  *
  * @example
  * ```html
- * <base-tag color=red>Tag</base-tag>
+ * <wc-tag color="red">Tag</wc-tag>
  * ```
- * @tags display
  */
 export declare class Tag extends LitElement {
     static styles: import("lit").CSSResultGroup[];

package/dist/src/clock/clock.d.ts

@@ -2,19 +2,18 @@ import { LitElement } from 'lit';
 import { ClockController } from './ClockController.js';
 /**
  * @label Clock
- * @tag base-clock
+ * @tag wc-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.
+ * @tags display
  *
  * @example
  * ```html
- * <base-clock></base-clock>
+ * <wc-clock></wc-clock>
  * ```
- * @tags display
  */
 export declare class Clock extends LitElement {
     static styles: import("lit").CSSResultGroup[];

package/dist/src/code-editor/code-editor.d.ts

@@ -4,20 +4,22 @@ import BaseInput from '../input/BaseInput.js';
  * @tag code-editor
  * @rawTag code-editor
  *
- * @summary Code editor
+ * @summary A Monaco-based code editing component with syntax highlighting and theming.
  * @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.
+ *  - CodeEditor wraps Monaco Editor as a web component.
+ *  - Supports JS/JSON/HTML languages, read-only mode, line numbers, minimap, and dark/light theme.
+ *  - Emits `change` when content is edited and updates value from property changes.
  *
  * @example
  * ```html
- * <code-highlighter language="javascript" style="height: 9rem"><pre><code>
- *   function helloWorld() {
- *     console.log('Hello, world!');
- *   }</code></pre>
- * </code-highlighter>
+ * <code-editor
+ *   language="javascript"
+ *   value="function hello() { console.log('Hello'); }"
+ *   lineNumbers="on"
+ *   minimap="false">
+ * </code-editor>
  * ```
- * @tags display
+ * @tags input, editor
  */
 export default class CodeEditor extends BaseInput {
     static styles: import("lit").CSSResultGroup[];

package/dist/src/container/container.d.ts

@@ -2,22 +2,17 @@ import { LitElement } from 'lit';
 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 declare class Container extends LitElement {
     size: ContainerSize;

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

@@ -1,14 +1,14 @@
 import BaseInput from '../input/BaseInput.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 declare class DatePicker extends BaseInput {

package/dist/src/divider/divider.d.ts

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

package/dist/src/elevation/elevation.d.ts

@@ -1,7 +1,7 @@
 import { LitElement } from 'lit';
 /**
  * @label Elevation
- * @tag base-elevation
+ * @tag wc-elevation
  * @rawTag elevation
  *
  * @summary Adds elevation to an element.
@@ -15,7 +15,7 @@ import { LitElement } from 'lit';
  * @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/dist/src/empty-state/empty-state.d.ts

@@ -1,8 +1,15 @@
 import { LitElement, nothing } from 'lit';
 /**
  * @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 declare class EmptyState extends LitElement {
     static styles: import("lit").CSSResultGroup[];

package/dist/src/field/field.d.ts

@@ -1,4 +1,21 @@
 import { LitElement, nothing } from 'lit';
+/**
+ * @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 declare class Field extends LitElement {
     static styles: import("lit").CSSResultGroup[];
     label: string;

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

@@ -2,7 +2,7 @@ import { LitElement } from 'lit';
 /**
  * @label Focus Ring
  *
- * @tag focus-ring
+ * @tag wc-focus-ring
  * @rawTag focus-ring
  *
  * @summary Adds a focus ring to an element.

package/dist/src/icon/icon.d.ts

@@ -2,7 +2,7 @@ import { LitElement } from 'lit';
 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.
@@ -12,7 +12,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>
  * ```
  *
  */