@redvars/peacock 3.3.0 → 3.3.1

package/readme.md

@@ -44,12 +44,12 @@ Visit [https://peacock.redvars.com](https://peacock.redvars.com) to view the doc
   <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">
 
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@redvars/peacock@3.3.0/dist/assets/styles.css"></link>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@redvars/peacock@3.3.1/dist/assets/styles.css"></link>
   <script type='module'
-          src='https://cdn.jsdelivr.net/npm/@redvars/peacock@3.3.0/dist/peacock-loader.js'></script>
+          src='https://cdn.jsdelivr.net/npm/@redvars/peacock@3.3.1/dist/peacock-loader.js'></script>
 </head>
 
-<base-button>Button</base-button>
+<wc-button>Button</wc-button>
 ```
 
 # Components
@@ -67,22 +67,22 @@ menus, checkboxes, and radio buttons.
 
 | Name                                                                | Component         | State |
 |---------------------------------------------------------------------|-------------------|-------|
-| [Code editor](https://peacock.redvars.com/components/code-editor)   | card-editor     | 🟢    |
+| [Code editor](https://peacock.redvars.com/components/code-editor)   | wc-code-editor  | 🟢    |
 | Color picker                                                        | color-picker    | 🔴    |
-| [Checkbox](https://peacock.redvars.com/components/checkbox)         | base-checkbox     | 🟢    |
-| [Date picker](https://peacock.redvars.com/components/date-picker)   | date-picker       | 🟡    |
+| [Checkbox](https://peacock.redvars.com/components/checkbox)         | wc-checkbox     | 🟢    |
+| [Date picker](https://peacock.redvars.com/components/date-picker)   | wc-date-picker  | 🟡    |
 | Date Time picker                                                    | datetime-picker | 🔴    |
-| [Form control](https://peacock.redvars.com/components/form-control) | base-field        | 🟡    |
+| [Form control](https://peacock.redvars.com/components/form-control) | wc-field        | 🟡    |
 | File picker                                                         | file-picker     | 🔴    |
 | [HTML editor](https://peacock.redvars.com/components/html-editor)   | html-editor     | 🟢    |
-| [Input](https://peacock.redvars.com/components/input)               | input-field       | 🟢    |
+| [Input](https://peacock.redvars.com/components/input)               | wc-input        | 🟢    |
 | [Input URL](https://peacock.redvars.com/components/input-url)       | input-url       | 🟢    |
 | Month picker                                                        | month-picker    | 🔴    |
-| [Number](https://peacock.redvars.com/components/number)             | number-field      | 🟢    |
-| [Select](https://peacock.redvars.com/components/select)             | base-select          | 🟢    |
-| [Textarea](https://peacock.redvars.com/components/textarea)         | textarea-field    | 🟢    |
-| [Time picker](https://peacock.redvars.com/components/time-picker)   | time-picker       | 🟡    |
-| [URL input](https://peacock.redvars.com/components/url-input)       | url-input.      | 🔴    |
+| [Number](https://peacock.redvars.com/components/number)             | wc-number-field | 🟢    |
+| [Select](https://peacock.redvars.com/components/select)             | base-select     | 🟢    |
+| [Textarea](https://peacock.redvars.com/components/textarea)         | wc-textarea     | 🟢    |
+| [Time picker](https://peacock.redvars.com/components/time-picker)   | wc-time-picker  | 🟡    |
+| [URL input](https://peacock.redvars.com/components/url-input)       | url-input       | 🔴    |
 | Week picker                                                         | week-picker     | 🔴    |
 
 ## Navigation
@@ -93,10 +93,10 @@ include menus, tabs, and breadcrumbs.
 
 | Name                                                   | Component       | State |
 |--------------------------------------------------------|-----------------|-------|
-| [Breadcrumb](https://peacock.redvars.com/components/breadcrumb) | base-breadcrumb | 🟢    |
+| [Breadcrumb](https://peacock.redvars.com/components/breadcrumb) | wc-breadcrumb   | 🟢    |
 | [Dropdown](https://peacock.redvars.com/components/dropdown)     | base-dropdown   | 🟡    |
-| [Menu](https://peacock.redvars.com/components/menu)             | base-menu       | 🟡    |
-| [Tabs](https://peacock.redvars.com/components/tabs)             | base-tabs       | 🟢    |
+| [Menu](https://peacock.redvars.com/components/menu)             | wc-base-menu    | 🟡    |
+| [Tabs](https://peacock.redvars.com/components/tabs)             | wc-tabs         | 🟢    |
 
 ## Informational
 
@@ -106,11 +106,11 @@ include notifications, tooltips, and progress bars.
 
 | Name                                                                                | Component              | State |
 |-------------------------------------------------------------------------------------|------------------------|-------|
-| [Badge](https://peacock.redvars.com/components/badge)                               | base-badge             | 🟢    |
-| [Linear Progress](https://peacock.redvars.com/components/linear-progress)           | linear-progress        | 🟢    |
-| [Circular Progress](https://peacock.redvars.com/components/circular-progress)       | circular-progress      | 🟢    |
-| [Spinner](https://peacock.redvars.com/components/spinner)                           | base-spinner              | 🟢    |
-| [Tooltip](https://peacock.redvars.com/components/tooltip)                           | base-tooltip           | 🟢    |
+| [Badge](https://peacock.redvars.com/components/badge)                               | wc-badge                  | 🟢    |
+| [Linear Progress](https://peacock.redvars.com/components/linear-progress)           | wc-linear-progress        | 🟢    |
+| [Circular Progress](https://peacock.redvars.com/components/circular-progress)       | wc-circular-progress      | 🟢    |
+| [Spinner](https://peacock.redvars.com/components/spinner)                           | wc-spinner                | 🟢    |
+| [Tooltip](https://peacock.redvars.com/components/tooltip)                           | wc-tooltip                | 🟢    |
 | [Notification](https://peacock.redvars.com/components/notification)                 | base-notification         | 🟢    |
 | [Notification Manager](https://peacock.redvars.com/components/notification-manager) | base-notification-manager | 🟢    |
 
@@ -123,8 +123,8 @@ organization to the content.
 
 | Name                                                          | Component      | State |
 |---------------------------------------------------------------|----------------|-------|
-| [Accordion](https://peacock.redvars.com/components/accordion) | base-accordion | 🟢    |
-| Card                                                          | base-card         | 🟡    |
+| [Accordion](https://peacock.redvars.com/components/accordion) | wc-accordion   | 🟢    |
+| Card                                                          | base-card      | 🟡    |
 
 ## General
 
@@ -132,34 +132,34 @@ These components are used for general purpose. They include
 
 | Name                                                                                | Component                 | State |
 |-------------------------------------------------------------------------------------|---------------------------|-------|
-| [Avatar](https://peacock.redvars.com/components/avatar)                             | base-avatar               | 🟢    |
-| [Button](https://peacock.redvars.com/components/button)                             | base-button               | 🟢    |
-| [Button Group](https://peacock.redvars.com/components/button-group)                 | button-group         | 🟢    |
+| [Avatar](https://peacock.redvars.com/components/avatar)                             | wc-avatar                 | 🟢    |
+| [Button](https://peacock.redvars.com/components/button)                             | wc-button                 | 🟢    |
+| [Button Group](https://peacock.redvars.com/components/button-group)                 | wc-button-group           | 🟢    |
 | [Calendar](https://peacock.redvars.com/components/calendar)                         | base-calendar             | 🟢    |
 | Card Select                                                                         | base-cardselect           | 🔴    |
-| [Code Highlighter](https://peacock.redvars.com/components/code-highlighter)         | code-highlighter     | 🟢    |
+| [Code Highlighter](https://peacock.redvars.com/components/code-highlighter)         | wc-code-highlighter       | 🟢    |
 | Column                                                                              | base-col                  | 🔴    |
-| [Empty State](https://peacock.redvars.com/components/empty-state)                   | empty-state          | 🟡    |
-| [Flow Designer ](https://peacock.redvars.com/components/flow-designer)              | flow-designer        | 🔵    |
+| [Empty State](https://peacock.redvars.com/components/empty-state)                   | wc-empty-state            | 🟡    |
+| [Flow Designer ](https://peacock.redvars.com/components/flow-designer)              | flow-designer             | 🔵    |
 | Grid                                                                                | base-grid                 | 🔴    |
 | Group                                                                               | base-group                | 🔴    |
 | [Header](https://peacock.redvars.com/components/header)                             | base-header               | 🟢    |
-| [Icon](https://peacock.redvars.com/components/icon)                                 | base-icon                 | 🟢    |
-| [Link](https://peacock.redvars.com/components/link)                                 | base-link                 | 🟢    |
+| [Icon](https://peacock.redvars.com/components/icon)                                 | wc-icon                   | 🟢    |
+| [Link](https://peacock.redvars.com/components/link)                                 | wc-link                   | 🟢    |
 | [Modal](https://peacock.redvars.com/components/modal)                               | base-modal                | 🟢    |
-| [Notification Manager](https://peacock.redvars.com/components/notification-manager) | notification-manager | 🟡    |
+| [Notification Manager](https://peacock.redvars.com/components/notification-manager) | notification-manager      | 🟡    |
 | Observer                                                                            | base-observer             | 🔴    |
-| Pagination                                                                          | base-pagination           | 🔴    |
+| Pagination                                                                          | wc-pagination             | 🔴    |
 | Radio Group                                                                         | base-radiogroup           | 🔴    |
 | Row                                                                                 | base-row                  | 🔴    |
-| [Slider](https://peacock.redvars.com/components/slider)                             | base-slider               | 🟡    |
+| [Slider](https://peacock.redvars.com/components/slider)                             | wc-slider                 | 🟡    |
 | Spoiler                                                                             | base-spoiler              | 🔴    |
 | Stepper                                                                             | base-stepper              | 🔴    |
-| [Table](https://peacock.redvars.com/components/table)                               | base-table                | 🟡    |
-| [Tag](https://peacock.redvars.com/components/tag) / Chip                            | base-tag                  | 🟢    |
+| [Table](https://peacock.redvars.com/components/table)                               | wc-table                  | 🟡    |
+| [Tag](https://peacock.redvars.com/components/tag) / Chip                            | wc-tag                    | 🟢    |
 | [Text](https://peacock.redvars.com/components/text)                                 | base-text                 | 🟢    |
-| [Tree View](https://peacock.redvars.com/components/tree-view)                       | tree-view            | 🟡    |
-| [Switch](https://peacock.redvars.com/components/switch)                             | base-switch               | 🟢    |
+| [Tree View](https://peacock.redvars.com/components/tree-view)                       | wc-tree-view              | 🟡    |
+| [Switch](https://peacock.redvars.com/components/switch)                             | wc-switch                 | 🟢    |
 
 ## Charts
 
@@ -167,8 +167,8 @@ 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) | chart-doughnut | 🟢    |
-| [Pie Chart ](https://peacock.redvars.com/components/chart-pie)          | chart-pie      | 🟢    |
+| [Doughnut Chart](https://peacock.redvars.com/components/chart-doughnut) | wc-chart-doughnut | 🟢    |
+| [Pie Chart ](https://peacock.redvars.com/components/chart-pie)          | wc-chart-pie      | 🟢    |
 
 
 ## 📄 License

package/src/accordion/accordion-item.ts

@@ -8,7 +8,8 @@ import styles from './accordion-item.scss';
  * @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.
- *
+ * @parentRawTag accordion
+ * 
  * @example
  * ```html
  * <wc-accordion-item>

package/src/breadcrumb/breadcrumb/breadcrumb.ts

@@ -1,6 +1,7 @@
 import { html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 import styles from './breadcrumb.scss';
+import { BreadcrumbItem } from '../breadcrumb-item/breadcrumb-item.js';
 
 /**
  * @label Breadcrumb
@@ -25,6 +26,8 @@ import styles from './breadcrumb.scss';
 export class Breadcrumb extends LitElement {
   static styles = [styles];
 
+  static Item = BreadcrumbItem;
+
   /**
    * Accessible label for the breadcrumb navigation landmark.
    * @default "Breadcrumb"

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

@@ -8,6 +8,7 @@ import styles from './breadcrumb-item.scss';
  * @label Breadcrumb Item
  * @tag wc-breadcrumb-item
  * @rawTag breadcrumb-item
+ * @parentRawTag breadcrumb
  * @summary A breadcrumb item component that represents a single item in a breadcrumb navigation.
  * @tags navigation
  *

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

@@ -3,6 +3,8 @@ import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import IndividualComponent from 'src/IndividualComponent.js';
 import styles from './button-group.scss';
+import { Button } from '../button/button.js';
+import { IconButton } from '../icon-button/icon-button.js';
 
 /**
  * @label Button Group
@@ -28,6 +30,10 @@ export class ButtonGroup extends LitElement {
   // that can import .scss files as lit-css.
   static styles = [styles];
 
+  static Button = Button;
+
+  static IconButton = IconButton;
+
   /**
    * Button size.
    * Possible values are `"sm"`, `"md"`, `"lg"`. Defaults to `"md"`.

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

@@ -44,7 +44,7 @@ import styles from './code-editor.scss';
 
 /**
  * @label Code Editor
- * @tag code-editor
+ * @tag wc-code-editor
  * @rawTag code-editor
  *
  * @summary A Monaco-based code editing component with syntax highlighting and theming.
@@ -55,12 +55,13 @@ import styles from './code-editor.scss';
  *
  * @example
  * ```html
- * <code-editor
+ * <wc-code-editor
  *   language="javascript"
+ *   style="width: 100%; --code-editor-height: 10rem;"
  *   value="function hello() { console.log('Hello'); }"
  *   lineNumbers="on"
  *   minimap="false">
- * </code-editor>
+ * </wc-code-editor>
  * ```
  * @tags input, editor
  */

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

@@ -16,21 +16,6 @@ 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',
@@ -40,21 +25,18 @@ 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
  */

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

@@ -76,7 +76,7 @@ export class EmptyState extends LitElement {
       <div class="${classMap(classes)}">
         <div class="empty-state-container">
           <div class="illustration">
-            <wc-icon src="${illustrationPath}"></wc-icon>
+            <wc-icon class="illustration-svg" src="${illustrationPath}"></wc-icon>
           </div>
 
           <div class="content">

package/src/index.ts

@@ -23,12 +23,13 @@ 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';
@@ -36,4 +37,7 @@ 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 { 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/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);