@redvars/peacock 3.2.10 → 3.3.1

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

@@ -12,7 +12,7 @@ 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';
 
@@ -25,25 +25,22 @@ const locale = {
 
 /**
  * @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
  */
-@PeacockComponent
+@IndividualComponent
 export class CodeHighlighter extends LitElement {
   static styles = [styles];
 
@@ -173,7 +170,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 +179,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.scss

@@ -7,7 +7,7 @@
 
   --divider-color: var(--color-outline-variant);
   --divider-spacing: var(--spacing-200);
-  --divider-line-thinkness: 2px;
+  --divider-line-thickness: 1px;
 }
 
 .divider {
@@ -16,7 +16,7 @@
   @include mixin.get-typography(body-medium);
   color: var(--divider-color);
 
-  --_line-border: var(--divider-line-thinkness) solid var(--divider-color);
+  --_line-border: var(--divider-line-thickness) solid var(--divider-color);
 
   &:not(.vertical) {
     width: 100%;

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.scss

@@ -27,7 +27,7 @@
   height: 100%;
   display: flex;
 
-  base-icon {
+  .illustration-svg {
     --icon-size: 100%;
   }
 }

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 class="illustration-svg" 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';
@@ -23,13 +23,21 @@ export { TimePicker } from './time-picker/index.js';
 export { Textarea } from './textarea/index.js';
 export { Switch } from './switch/index.js';
 export { Spinner } from './spinner/index.js';
-export { Container } from './container/index.js'
+export { Container } from './container/index.js';
 
 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 { 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/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/index.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/src/menu/menu/MenuSurfaceController.ts

@@ -0,0 +1,61 @@
+import { ReactiveController, ReactiveControllerHost } from 'lit';
+import {
+  autoUpdate,
+  computePosition,
+  flip,
+  offset,
+  shift,
+  type Placement,
+  type Strategy,
+} from '@floating-ui/dom';
+
+type PositionOptions = {
+  reference: HTMLElement;
+  floating: HTMLElement;
+  placement: Placement;
+  offset: number;
+  strategy?: Strategy;
+};
+
+async function updateSurfacePosition(options: PositionOptions & { strategy: Strategy }) {
+  const { x, y } = await computePosition(options.reference, options.floating, {
+    strategy: options.strategy,
+    placement: options.placement,
+    middleware: [offset(options.offset), flip(), shift({ padding: 8 })],
+  });
+
+  Object.assign(options.floating.style, {
+    position: options.strategy,
+    left: `${x}px`,
+    top: `${y}px`,
+  });
+}
+
+export class MenuSurfaceController implements ReactiveController {
+  private cleanup?: () => void;
+
+  constructor(private host: ReactiveControllerHost) {
+    this.host.addController(this);
+  }
+
+  start(options: PositionOptions) {
+    this.stop();
+
+    const strategy = options.strategy ?? 'fixed';
+
+    this.cleanup = autoUpdate(options.reference, options.floating, () => {
+      updateSurfacePosition({ ...options, strategy });
+    });
+
+    updateSurfacePosition({ ...options, strategy });
+  }
+
+  stop() {
+    this.cleanup?.();
+    this.cleanup = undefined;
+  }
+
+  hostDisconnected() {
+    this.stop();
+  }
+}

package/src/menu/{menu-list/menu-list.scss → menu/menu.scss}

@@ -2,13 +2,28 @@
 
 @include mixin.base-styles;
 
-.menu-list {
+.menu {
   display: flex;
   position: relative;
+  z-index: var(--menu-z-index, 1000);
   min-width: 112px;
   padding-block: var(--spacing-050);
 
-  .menu-list-content {
+  &.closed {
+    display: none;
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+  }
+
+  &.open {
+    display: flex;
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto;
+  }
+
+  .menu-content {
     display: flex;
     flex-direction: column;
     gap: var(--spacing-050);
@@ -24,7 +39,7 @@
       --menu-item-container-shape-end-end: var(--shape-corner-medium);
     }
 
-    ::slotted(base-divider) {
+    ::slotted(wc-divider) {
       --divider-spacing: var(--spacing-100);
       padding-inline: var(--spacing-050);
     }
@@ -58,7 +73,7 @@
   }
 }
 
-.menu-list {
+.menu { 
   --_container-shape-start-start: var(--shape-corner-large);
   --_container-shape-start-end: var(--shape-corner-large);
   --_container-shape-end-start: var(--shape-corner-large);