@redvars/peacock 3.3.0 → 3.3.2

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

@@ -22,18 +22,27 @@ export { DatePicker } from './date-picker/index.js';
 export { TimePicker } from './time-picker/index.js';
 export { Textarea } from './textarea/index.js';
 export { Switch } from './switch/index.js';
+export { Checkbox } from './checkbox/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 { Tab, TabGroup, TabPanel, Tabs } from './tabs/index.js';
 export { Slider } from './slider/index.js';
+export { ChartDonut } from './chart-donut/index.js';
 export { ChartDoughnut } from './chart-doughnut/index.js';
-export { ChartPie } from './chart-pie/index.js';
+export { ChartPie } from './chart-pie/index.js';
+export { ChartBar, ChartStackedBar } from './chart-bar/index.js';
+export { Table } from './table/index.js';
+export { Pagination } from './pagination/index.js';
+export { TreeView, TreeNode } from './tree-view/index.js';
+export { Card } from './card/index.js';
+export { Snackbar } from './snackbar/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);