@redvars/peacock 3.2.10 → 3.3.1

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

@@ -1,23 +1,26 @@
 import BaseInput from '../input/BaseInput.js';
 /**
  * @label Code Editor
- * @tag code-editor
+ * @tag wc-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>
+ * <wc-code-editor
+ *   language="javascript"
+ *   style="width: 100%; --code-editor-height: 10rem;"
+ *   value="function hello() { console.log('Hello'); }"
+ *   lineNumbers="on"
+ *   minimap="false">
+ * </wc-code-editor>
  * ```
- * @tags display
+ * @tags input, editor
  */
 export default class CodeEditor extends BaseInput {
     static styles: import("lit").CSSResultGroup[];

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

@@ -2,21 +2,18 @@ import { LitElement } from 'lit';
 import { BundledLanguage } from 'shiki';
 /**
  * @label Code Highlighter
- * @tag code-highlighter
+ * @tag wc-code-highlighter
  * @rawTag code-highlighter
  *
- * @summary Highlights code snippets with syntax highlighting and line numbers.
- * @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 A component that provides syntax highlighting for code snippets.
  *
  * @example
  * ```html
- * <code-highlighter language="javascript" style="height: 9rem"><pre><code>
+ * <wc-code-highlighter language="javascript" style="height: 9rem"><pre><code>
  *   function helloWorld() {
  *     console.log('Hello, world!');
  *   }</code></pre>
- * </code-highlighter>
+ * </wc-code-highlighter>
  * ```
  * @tags display
  */

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>
  * ```
  *
  */

package/dist/src/image/image.d.ts

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

package/dist/src/index.d.ts

@@ -7,7 +7,7 @@ export { Elevation } from './elevation/index.js';
 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';
@@ -27,6 +27,14 @@ export { NumberCounter } from './number-counter/index.js';
 export { EmptyState } from './empty-state/index.js';
 export { Tooltip } from './popover/index.js';
 export { Breadcrumb, BreadcrumbItem } from './breadcrumb/index.js';
+export { Menu, MenuItem, SubMenu } from './menu/index.js';
 export { CodeHighlighter } from './code-highlighter/index.js';
 export { CodeEditor } from './code-editor/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';
+export { Table } from './table/index.js';
+export { Pagination } from './pagination/index.js';
+export { TreeView, TreeNode } from './tree-view/index.js';

package/dist/src/input/input.d.ts

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

package/dist/src/link/link.d.ts

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

package/dist/src/menu/index.d.ts

@@ -0,0 +1,3 @@
+export { Menu } from './menu/menu.js';
+export { MenuItem } from './menu-item/menu-item.js';
+export { SubMenu } from './sub-menu/sub-menu.js';

package/dist/src/menu/menu/MenuSurfaceController.d.ts

@@ -0,0 +1,18 @@
+import { ReactiveController, ReactiveControllerHost } from 'lit';
+import { type Placement, type Strategy } from '@floating-ui/dom';
+type PositionOptions = {
+    reference: HTMLElement;
+    floating: HTMLElement;
+    placement: Placement;
+    offset: number;
+    strategy?: Strategy;
+};
+export declare class MenuSurfaceController implements ReactiveController {
+    private host;
+    private cleanup?;
+    constructor(host: ReactiveControllerHost);
+    start(options: PositionOptions): void;
+    stop(): void;
+    hostDisconnected(): void;
+}
+export {};

package/dist/src/menu/menu/menu.d.ts

@@ -1,15 +1,73 @@
 import { LitElement } from 'lit';
+import type { Placement } from '@floating-ui/dom';
+import { MenuItem } from '../menu-item/menu-item.js';
+type CloseReason = {
+    kind: 'click-selection';
+} | {
+    kind: 'keydown';
+    key: string;
+} | {
+    kind: 'outside-click';
+} | {
+    kind: 'focusout';
+} | {
+    kind: 'programmatic';
+};
+/**
+ * @label Menu
+ * @tag wc-menu
+ * @rawTag menu
+ * @summary A list of menu items.
+ * @tags navigation
+ *
+ * @example
+ * ```html
+ * <wc-menu>
+ *   <wc-menu-item>Item 1</wc-menu-item>
+ *   <wc-menu-item>Item 2</wc-menu-item>
+ * </wc-menu>
+ * ```
+ */
 export declare class Menu extends LitElement {
+    static styles: import("lit").CSSResultGroup[];
+    static Item: typeof MenuItem;
     open: boolean;
-    align: string;
-    menuWrapper: HTMLElement;
-    private _boundClickOutside;
-    constructor();
+    variant: 'standard' | 'vibrant';
+    anchor: string;
+    stayOpenOnOutsideClick: boolean;
+    stayOpenOnFocusout: boolean;
+    isSubmenu: boolean;
+    placement: Placement;
+    offset: number;
+    private activeIndex;
+    private readonly menuListElement;
+    anchorElement: HTMLElement | null;
+    private readonly _surfaceController;
+    private _lastFocusedElement;
+    private _closeReason;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    private _handleClickOutside;
-    private _handleItemClick;
-    private _toggleMenu;
-    static styles: import("lit").CSSResult;
+    get items(): MenuItem[];
+    show(): void;
+    close(reason?: CloseReason): void;
+    focus(): void;
+    private _resolveAnchorElement;
+    private _syncAnchorAria;
+    private _enabledItems;
+    private _syncRovingTabIndex;
+    private _setActiveByOffset;
+    private _setBoundaryActive;
+    private _getActiveItem;
+    private _getFirstEnabledItem;
+    private _onItemActivate;
+    private _onItemRequestClose;
+    private _onKeyDown;
+    private _onWindowClick;
+    private _isWithinMenuTree;
+    private _onFocusOut;
+    private _onSlotChange;
+    private _applyPositioning;
+    protected updated(changedProperties: Map<string, unknown>): void;
     render(): import("lit-html").TemplateResult<1>;
 }
+export {};

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

@@ -1,21 +1,40 @@
 import { LitElement } from 'lit';
+/**
+ * @label Menu Item
+ * @tag wc-menu-item
+ * @rawTag menu-item
+ * @parentRawTag menu-list
+ * @summary An item in a menu list.
+ * @tags navigation
+ *
+ * @example
+ * ```html
+ * <wc-menu-item>Menu Item</wc-menu-item>
+ * ```
+ */
 export declare class MenuItem extends LitElement {
     disabled: boolean;
     value: string;
     selected: boolean;
+    keepOpen: boolean;
+    hasSubmenu: boolean;
+    submenuOpen: boolean;
     href?: string;
     /**
-    * Sets or retrieves the window or frame at which to target content.
-    */
+     * Sets or retrieves the window or frame at which to target content.
+     */
     target: string;
     variant: 'standard' | 'vibrant';
     static styles: import("lit").CSSResultGroup[];
     connectedCallback(): void;
+    disconnectedCallback(): void;
+    private emitActivate;
+    private requestClose;
+    private requestSubmenuKey;
     private _handleKeyDown;
+    private _handleClick;
     __isLink(): boolean;
-    private readonly menuItemElement;
-    focus(): void;
-    blur(): void;
+    get focusTarget(): this;
     render(): import("lit-html").TemplateResult<1>;
     renderContent(): import("lit-html").TemplateResult<1>;
 }

package/dist/src/menu/sub-menu/sub-menu.d.ts

@@ -0,0 +1,36 @@
+import { LitElement } from 'lit';
+import { MenuItem } from '../menu-item/menu-item.js';
+import { Menu } from '../menu/menu.js';
+/**
+ * @label Sub Menu
+ * @tag wc-sub-menu
+ * @rawTag sub-menu
+ * @summary Connects a menu item to a nested menu.
+ */
+export declare class SubMenu extends LitElement {
+    static styles: import("lit").CSSResultGroup[];
+    hoverOpenDelay: number;
+    hoverCloseDelay: number;
+    anchorCorner: string;
+    menuCorner: string;
+    private readonly _items;
+    private readonly _menus;
+    private _openTimeout?;
+    private _closeTimeout?;
+    private readonly _onChildMenuOpened;
+    private readonly _onChildMenuClosed;
+    get item(): MenuItem | null;
+    get menu(): Menu | null;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    show(): Promise<void>;
+    close(): Promise<void>;
+    render(): import("lit-html").TemplateResult<1>;
+    private _onSlotChange;
+    private _onItemClick;
+    private _onItemKeyDown;
+    private _onMenuKeyDown;
+    private _onCloseMenu;
+    private _onMouseEnter;
+    private _onMouseLeave;
+}

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

@@ -1,19 +1,21 @@
 import { LitElement, nothing } from 'lit';
 /**
  * @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

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

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

package/dist/src/pagination/index.d.ts

@@ -0,0 +1 @@
+export { Pagination } from './pagination.js';