@redvars/peacock 3.5.0 → 3.5.1

package/src/sidebar-menu/sidebar-menu-item.scss

@@ -0,0 +1,102 @@
+@use '../../scss/mixin';
+
+@include mixin.base-styles;
+
+:host {
+  display: block;
+
+  // M3 sidebar menu item sizing
+  --sidebar-menu-item-height: 3rem;
+  --sidebar-menu-item-icon-size: 1.25rem;
+  --sidebar-menu-item-border-radius: var(--global-shape-corner-full, 9999px);
+
+  // M3 color tokens
+  --sidebar-menu-item-label-color: var(--color-on-surface);
+  --sidebar-menu-item-icon-color: var(--color-on-surface-variant);
+  --sidebar-menu-item-selected-background: var(--color-secondary-container);
+  --sidebar-menu-item-selected-color: var(--color-on-secondary-container);
+  --sidebar-menu-item-focus-ring-color: var(--color-primary);
+
+  // M3 animation timing
+  --sidebar-menu-item-transition-duration: 200ms;
+  --sidebar-menu-item-transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.sidebar-menu-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  min-height: var(--sidebar-menu-item-height);
+  border-radius: var(--sidebar-menu-item-border-radius);
+  color: var(--_label-color);
+  cursor: pointer;
+  user-select: none;
+  text-decoration: none;
+  outline: none;
+
+  --_container-color: transparent;
+  --_container-opacity: 1;
+  --_label-color: var(--sidebar-menu-item-label-color);
+
+  @include mixin.get-typography(label-large);
+
+  &.selected {
+    --_container-color: var(--sidebar-menu-item-selected-background);
+    --_label-color: var(--sidebar-menu-item-selected-color);
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+
+    .ripple {
+      display: none;
+    }
+  }
+}
+
+.sidebar-menu-item-content {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  flex: 1;
+  min-height: var(--sidebar-menu-item-height);
+  padding-inline: 0.75rem;
+  color: inherit;
+  z-index: 1;
+}
+
+.background {
+  position: absolute;
+  inset: 0;
+  background-color: var(--_container-color);
+  opacity: var(--_container-opacity);
+  border-radius: inherit;
+  pointer-events: none;
+}
+
+.focus-ring {
+  z-index: 2;
+  --focus-ring-color: var(--sidebar-menu-item-focus-ring-color);
+  --focus-ring-container-shape-start-start: var(--sidebar-menu-item-border-radius);
+  --focus-ring-container-shape-start-end: var(--sidebar-menu-item-border-radius);
+  --focus-ring-container-shape-end-start: var(--sidebar-menu-item-border-radius);
+  --focus-ring-container-shape-end-end: var(--sidebar-menu-item-border-radius);
+}
+
+.ripple {
+  --ripple-pressed-color: var(--color-on-surface);
+  border-radius: inherit;
+}
+
+.sidebar-menu-item.selected .ripple {
+  --ripple-pressed-color: var(--sidebar-menu-item-selected-color);
+}
+
+.sidebar-menu-item-label {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+

package/src/sidebar-menu/sidebar-menu-item.ts

@@ -0,0 +1,151 @@
+import { html, LitElement } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import styles from './sidebar-menu-item.scss';
+
+/**
+ * @label Sidebar Menu Item
+ * @tag wc-sidebar-menu-item
+ * @rawTag sidebar-menu-item
+ * @parentRawTag sidebar-menu
+ * @summary A sidebar menu item represents a selectable leaf item in the sidebar navigation tree.
+ *
+ * @example
+ * ```html
+ * <wc-sidebar-menu>
+ *   <wc-sidebar-sub-menu label="Parent" expanded>
+ *     <wc-sidebar-menu-item label="Child"></wc-sidebar-menu-item>
+ *   </wc-sidebar-sub-menu>
+ * </wc-sidebar-menu>
+ * ```
+ * @tags navigation
+ */
+export class SidebarMenuItem extends LitElement {
+  static styles = [styles];
+
+  /**
+   * The value used to identify this item when selected.
+   */
+  @property({ type: String, reflect: true })
+  value: string = '';
+
+  /**
+   * The display label for this item.
+   */
+  @property({ type: String, reflect: true })
+  label: string = '';
+
+  /**
+   * Optional icon name to display before the label.
+   */
+  @property({ type: String, reflect: true })
+  icon: string = '';
+
+  /**
+   * Optional hyperlink to navigate to on click.
+   */
+  @property({ type: String, reflect: true })
+  href: string = '';
+
+  /**
+   * Sets or retrieves the window or frame at which to target content.
+   */
+  @property({ type: String, reflect: true })
+  target: string = '_self';
+
+  /**
+   * If true, the user cannot interact with the item.
+   */
+  @property({ type: Boolean, reflect: true })
+  disabled: boolean = false;
+
+  /**
+   * Whether the item is currently selected.
+   */
+  @property({ type: Boolean, reflect: true })
+  selected: boolean = false;
+
+  /**
+   * The nesting depth level (set automatically by the parent sidebar-menu).
+   */
+  @property({ type: Number, reflect: true })
+  level: number = 0;
+
+  @query('.sidebar-menu-item-content')
+  private readonly _nativeElement!: HTMLElement | null;
+
+  override focus() {
+    this._nativeElement?.focus();
+  }
+
+  override blur() {
+    this._nativeElement?.blur();
+  }
+
+  private _onClick = () => {
+    if (this.disabled) return;
+
+    this.dispatchEvent(
+      new CustomEvent('sidebar-menu-item:click', {
+        bubbles: true,
+        composed: true,
+        detail: { value: this.value, label: this.label },
+      }),
+    );
+  };
+
+  override render() {
+    const classes = classMap({
+      'sidebar-menu-item': true,
+      disabled: this.disabled,
+      selected: this.selected,
+    });
+
+    const content = html`
+      <wc-focus-ring class="focus-ring" for="item"></wc-focus-ring>
+      <div class="background"></div>
+      <wc-ripple class="ripple"></wc-ripple>
+      <div class="sidebar-menu-item-content">
+        ${this.icon ? html`<wc-icon name="${this.icon}"></wc-icon>` : ''}
+        <span class="sidebar-menu-item-label">${this.label}</span>
+      </div>
+    `;
+
+    if (this.href) {
+      return html`
+        <a
+          id="item"
+          href="${this.href}"
+          target="${this.target}"
+          class="${classes}"
+          aria-disabled="${this.disabled}"
+          tabindex="${this.disabled ? -1 : 0}"
+          @click="${this._onClick}"
+        >
+          ${content}
+        </a>
+      `;
+    }
+
+    return html`
+      <div
+        id="item"
+        class="${classes}"
+        role="treeitem"
+        aria-label="${this.label}"
+        aria-selected="${String(this.selected)}"
+        aria-disabled="${this.disabled}"
+        tabindex="${this.disabled ? -1 : 0}"
+        @click="${this._onClick}"
+        @keydown="${(e: KeyboardEvent) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            this._onClick();
+          }
+        }}"
+      >
+        ${content}
+      </div>
+    `;
+  }
+}

package/src/{tree-view/tree-view.scss → sidebar-menu/sidebar-menu.scss}

@@ -6,7 +6,7 @@
   display: block;
 }
 
-.tree-view {
+.sidebar-menu {
   display: block;
   padding: var(--spacing-100, 0.5rem) 0;
 }

package/src/sidebar-menu/sidebar-menu.ts

@@ -0,0 +1,182 @@
+import { html, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import styles from './sidebar-menu.scss';
+import { SidebarMenuItem } from './sidebar-menu-item.js';
+import { SidebarSubMenu } from './sidebar-sub-menu.js';
+
+type SidebarNode = SidebarMenuItem | SidebarSubMenu;
+
+/**
+ * @label Sidebar Menu
+ * @tag wc-sidebar-menu
+ * @rawTag sidebar-menu
+ * @summary A sidebar menu is a hierarchical structure that provides nested levels of navigation. It supports keyboard navigation, single/multi select, and expandable items.
+ *
+ * @example
+ * ```html
+ * <wc-sidebar-menu>
+ *   <wc-sidebar-sub-menu label="Parent" expanded>
+ *     <wc-sidebar-menu-item label="Child 1"></wc-sidebar-menu-item>
+ *     <wc-sidebar-menu-item label="Child 2"></wc-sidebar-menu-item>
+ *   </wc-sidebar-sub-menu>
+ * </wc-sidebar-menu>
+ * ```
+ * @tags navigation
+ */
+export class SidebarMenu extends LitElement {
+  static styles = [styles];
+
+  /**
+   * The value of the currently selected item.
+   */
+  @property({ type: String, attribute: 'selected-item', reflect: true })
+  selectedItem: string = '';
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener('sidebar-menu-item:click', this._onItemClick as EventListener);
+    this.addEventListener('keydown', this._onKeyDown);
+    this.setAttribute('role', 'tree');
+  }
+
+  updated(changedProps: Map<string, unknown>) {
+    super.updated(changedProps);
+
+    if (changedProps.has('selectedItem')) {
+      this._syncSelectedStateFromProperty();
+    }
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener('sidebar-menu-item:click', this._onItemClick as EventListener);
+    this.removeEventListener('keydown', this._onKeyDown);
+  }
+
+  private _isSidebarNode(element: Element): element is SidebarNode {
+    const tag = element.tagName.toLowerCase();
+    return tag === 'wc-sidebar-menu-item' || tag === 'wc-sidebar-sub-menu';
+  }
+
+  private _getTopLevelItems(): SidebarNode[] {
+    return Array.from(this.children).filter(
+      el => this._isSidebarNode(el),
+    ) as SidebarNode[];
+  }
+
+  private _getChildNodes(item: SidebarSubMenu): SidebarNode[] {
+    return Array.from(item.children).filter(
+      child => this._isSidebarNode(child),
+    ) as SidebarNode[];
+  }
+
+  private _getAllVisibleItems(): SidebarNode[] {
+    const result: SidebarNode[] = [];
+    const collect = (items: SidebarNode[]) => {
+      items.forEach(item => {
+        result.push(item);
+        if (item instanceof SidebarSubMenu && item.expanded) {
+          collect(this._getChildNodes(item));
+        }
+      });
+    };
+    collect(this._getTopLevelItems());
+    return result;
+  }
+
+  private _onItemClick = (event: CustomEvent) => {
+    const item = event.target as SidebarNode;
+    if (item.disabled) return;
+
+    const value = event.detail?.value ?? item.value ?? item.label;
+    this.selectedItem = value;
+
+    // Update selected state on all items
+    this._updateSelectedState(value);
+
+    this.dispatchEvent(
+      new CustomEvent('sidebar-menu:change', {
+        bubbles: true,
+        composed: true,
+        detail: { value, item },
+      }),
+    );
+  };
+
+  private _updateSelectedState(selectedValue: string) {
+    const allItems = this._collectAllItems(this._getTopLevelItems());
+    allItems.forEach(item => {
+      const itemValue = item.value || item.label;
+      // eslint-disable-next-line no-param-reassign
+      item.selected = itemValue === selectedValue;
+    });
+  }
+
+  private _collectAllItems(items: SidebarNode[]): SidebarNode[] {
+    const result: SidebarNode[] = [];
+    items.forEach(item => {
+      result.push(item);
+      if (item instanceof SidebarSubMenu) {
+        result.push(...this._collectAllItems(this._getChildNodes(item)));
+      }
+    });
+    return result;
+  }
+
+  private _syncSelectedStateFromProperty() {
+    const allItems = this._collectAllItems(this._getTopLevelItems());
+    allItems.forEach(item => {
+      const itemValue = item.value || item.label;
+      item.selected = itemValue === this.selectedItem;
+    });
+  }
+
+  private _onKeyDown = (event: KeyboardEvent) => {
+    const allVisible = this._getAllVisibleItems();
+    const currentElement = event.composedPath().find(
+      target => target instanceof SidebarMenuItem || target instanceof SidebarSubMenu,
+    ) as SidebarNode | undefined;
+
+    if (!currentElement) {
+      return;
+    }
+
+    if (!allVisible.includes(currentElement)) {
+      return;
+    }
+
+    const currentIndex = allVisible.indexOf(currentElement);
+
+    if (event.key === 'ArrowDown') {
+      event.preventDefault();
+      const nextIndex = (currentIndex + 1) % allVisible.length;
+      allVisible[nextIndex].focus();
+    } else if (event.key === 'ArrowUp') {
+      event.preventDefault();
+      const prevIndex = currentIndex === 0 ? allVisible.length - 1 : currentIndex - 1;
+      allVisible[prevIndex].focus();
+    } else if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      currentElement.click();
+    } else if (event.key === 'ArrowRight') {
+      event.preventDefault();
+      if (currentElement instanceof SidebarSubMenu && !currentElement.expanded) {
+        currentElement.expanded = true;
+      } else if (currentElement instanceof SidebarSubMenu) {
+        const children = this._getChildNodes(currentElement);
+        if (children.length > 0) {
+          children[0].focus();
+        }
+      }
+    } else if (event.key === 'ArrowLeft') {
+      event.preventDefault();
+      if (currentElement instanceof SidebarSubMenu && currentElement.expanded) {
+        currentElement.expanded = false;
+      }
+    }
+  };
+
+  override render() {
+    return html` <div class="sidebar-menu"><slot></slot></div> `;
+  }
+}

package/src/sidebar-menu/sidebar-sub-menu.scss

@@ -0,0 +1,130 @@
+@use '../../scss/mixin';
+
+@include mixin.base-styles;
+
+:host {
+  display: block;
+
+  --sidebar-menu-item-height: 3rem;
+  --sidebar-menu-item-border-radius: var(--global-shape-corner-full, 9999px);
+  --sidebar-menu-item-label-color: var(--color-on-surface);
+  --sidebar-menu-item-icon-color: var(--color-on-surface-variant);
+  --sidebar-menu-item-selected-background: var(--color-secondary-container);
+  --sidebar-menu-item-selected-color: var(--color-on-secondary-container);
+  --sidebar-menu-item-focus-ring-color: var(--color-primary);
+}
+
+.sidebar-sub-menu {
+  display: block;
+}
+
+.sidebar-sub-menu-inner {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-height: var(--sidebar-menu-item-height);
+  cursor: pointer;
+  border-radius: var(--sidebar-menu-item-border-radius);
+  outline: none;
+  padding-inline-end: 0.75rem;
+  color: var(--_label-color);
+
+  --_container-color: transparent;
+  --_container-opacity: 1;
+  --_label-color: var(--sidebar-menu-item-label-color);
+
+  @include mixin.get-typography(label-large);
+
+  &.selected {
+    --_container-color: var(--sidebar-menu-item-selected-background);
+    --_label-color: var(--sidebar-menu-item-selected-color);
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+
+    .ripple {
+      display: none;
+    }
+  }
+}
+
+.sidebar-sub-menu-content {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  flex: 1;
+  min-height: var(--sidebar-menu-item-height);
+  color: inherit;
+  user-select: none;
+  text-decoration: none;
+  outline: none;
+  padding-inline: 0.75rem;
+  z-index: 1;
+}
+
+.background {
+  position: absolute;
+  inset: 0;
+  background-color: var(--_container-color);
+  opacity: var(--_container-opacity);
+  border-radius: inherit;
+  pointer-events: none;
+}
+
+.focus-ring {
+  z-index: 2;
+  --focus-ring-color: var(--sidebar-menu-item-focus-ring-color);
+  --focus-ring-container-shape-start-start: var(--sidebar-menu-item-border-radius);
+  --focus-ring-container-shape-start-end: var(--sidebar-menu-item-border-radius);
+  --focus-ring-container-shape-end-start: var(--sidebar-menu-item-border-radius);
+  --focus-ring-container-shape-end-end: var(--sidebar-menu-item-border-radius);
+}
+
+.ripple {
+  --ripple-pressed-color: var(--color-on-surface);
+  border-radius: inherit;
+}
+
+.sidebar-sub-menu-inner.selected .ripple {
+  --ripple-pressed-color: var(--sidebar-menu-item-selected-color);
+}
+
+.sidebar-sub-menu-label {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.expand-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--sidebar-menu-item-icon-color);
+  flex-shrink: 0;
+  width: var(--sidebar-menu-item-height);
+  height: var(--sidebar-menu-item-height);
+  transition: transform var(--duration-medium1) var(--easing-standard);
+}
+
+:host([expanded]) .expand-icon {
+  transform: rotate(180deg);
+}
+
+.sidebar-sub-menu-children {
+  display: block;
+  overflow: hidden;
+  margin-left: var(--spacing-200);
+  max-height: 9999px;
+  opacity: 1;
+  transition: max-height var(--duration-medium1) var(--easing-standard),
+              opacity var(--duration-medium1) var(--easing-standard);
+}
+
+.sidebar-sub-menu-children.hidden {
+  max-height: 0;
+  opacity: 0;
+}