@redvars/peacock 3.5.0 → 3.5.1

package/src/navigation-rail/navigation-rail-item.ts

@@ -0,0 +1,223 @@
+import { html, LitElement, nothing } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { dispatchActivationClick, isActivationClick } from '@/__utils/dispatch-event-utils.js';
+import { observerSlotChangesWithCallback } from '@/__utils/observe-slot-change.js';
+import { throttle } from '@/__utils/throttle.js';
+import styles from './navigation-rail-item.scss';
+
+/**
+ * @label Navigation Rail Item
+ * @tag wc-navigation-rail-item
+ * @rawTag navigation-rail-item
+ * @parentRawTag navigation-rail
+ *
+ * @summary An individual item within a navigation rail.
+ * @overview
+ * <p>Navigation rail items display a destination with an icon and optional label.</p>
+ *
+ * @example
+ * ```html
+ * <wc-navigation-rail-item>
+ *   <wc-icon slot="icon">home</wc-icon>
+ *   Home
+ * </wc-navigation-rail-item>
+ * ```
+ * @tags navigation
+ */
+export class NavigationRailItem extends LitElement {
+  #id = crypto.randomUUID();
+
+  static styles = [styles];
+
+  /** Whether this item is currently active/selected. */
+  @property({ type: Boolean, reflect: true }) active = false;
+
+  /** Whether this item is disabled. */
+  @property({ type: Boolean, reflect: true }) disabled = false;
+
+  /** Whether the parent rail is in collapsed mode (labels hidden). */
+  @property({ type: Boolean, reflect: true }) collapsed = false;
+
+  /** If provided, the item renders as a link. */
+  @property({ reflect: true }) href?: string;
+
+  /** Link target. */
+  @property() target: string = '_self';
+
+  /** Value used for identification when managing active state externally. */
+  @property({ reflect: true }) value?: string;
+
+  /** Reason the item is disabled (shown to screen readers). */
+  @property({ attribute: 'disabled-reason' }) disabledReason: string = '';
+
+  /** Sets the delay for throttle in milliseconds. Defaults to 200 milliseconds. */
+  @property({ type: Number }) throttleDelay = 200;
+
+  @state() private _isPressed = false;
+
+  @state() private _hasLabel = false;
+
+  @state() private _hasActiveIcon = false;
+
+  @query('.item-element') readonly itemElement!: HTMLElement | null;
+
+  override focus() {
+    this.itemElement?.focus();
+  }
+
+  override blur() {
+    this.itemElement?.blur();
+  }
+
+  override firstUpdated() {
+    this.__dispatchClickWithThrottle = throttle(
+      this.__dispatchClick,
+      this.throttleDelay,
+    );
+
+    observerSlotChangesWithCallback(
+      this.renderRoot.querySelector('slot:not([name])'),
+      hasContent => {
+        this._hasLabel = hasContent;
+        this.requestUpdate();
+      },
+    );
+
+    observerSlotChangesWithCallback(
+      this.renderRoot.querySelector('slot[name="active-icon"]'),
+      hasContent => {
+        this._hasActiveIcon = hasContent;
+        this.requestUpdate();
+      },
+    );
+  }
+
+  __dispatchClickWithThrottle: (event: MouseEvent | KeyboardEvent) => void =
+    event => {
+      this.__dispatchClick(event);
+    };
+
+  __dispatchClick = (event: MouseEvent | KeyboardEvent) => {
+    if (this.disabled && this.href) {
+      event.stopImmediatePropagation();
+      event.preventDefault();
+      return;
+    }
+
+    if (!isActivationClick(event) || !this.itemElement) {
+      return;
+    }
+
+    this.focus();
+    dispatchActivationClick(this.itemElement);
+  };
+
+  __handlePress = (event: KeyboardEvent | MouseEvent) => {
+    if (this.disabled) return;
+    if (
+      event instanceof KeyboardEvent &&
+      event.type === 'keydown' &&
+      (event.key === 'Enter' || event.key === ' ')
+    ) {
+      this._isPressed = true;
+    } else if (event.type === 'mousedown') {
+      this._isPressed = true;
+    } else {
+      this._isPressed = false;
+    }
+  };
+
+  __isLink() {
+    return !!this.href;
+  }
+
+  __getDisabledReasonID() {
+    return this.disabled && this.disabledReason
+      ? `disabled-reason-${this.#id}`
+      : nothing;
+  }
+
+  __renderDisabledReason() {
+    const disabledReasonID = this.__getDisabledReasonID();
+    if (disabledReasonID)
+      return html`<div
+        id="disabled-reason-${this.#id}"
+        role="tooltip"
+        aria-label=${this.disabledReason}
+        class="screen-reader-only"
+      >
+        ${this.disabledReason}
+      </div>`;
+    return nothing;
+  }
+
+  __renderItemContent() {
+    return html`
+      <wc-focus-ring class="focus-ring" for='item'></wc-focus-ring>
+      <div class="state-layer"></div>
+      <wc-ripple class="ripple"></wc-ripple>
+
+      <div class="item-content">
+        <div class="indicator">
+          <div class="icon-container">
+            <slot name="active-icon" class="active-icon-slot"></slot>
+            <slot name="icon" class="icon-slot"></slot>
+          </div>
+        </div>
+        ${this._hasLabel && !this.collapsed
+          ? html`<div class="label"><slot></slot></div>`
+          : html`<slot class="hidden-slot"></slot>`}
+      </div>
+
+      ${this.__renderDisabledReason()}
+    `;
+  }
+
+  render() {
+    const isLink = this.__isLink();
+
+    const cssClasses = {
+      item: true,
+      'item-element': true,
+      active: this.active,
+      disabled: this.disabled,
+      pressed: this._isPressed,
+      'has-label': this._hasLabel,
+      'has-active-icon': this._hasActiveIcon,
+    };
+
+    if (!isLink) {
+      return html`<button
+        id="item"
+        class=${classMap(cssClasses)}
+        ?disabled=${this.disabled}
+        aria-disabled=${`${this.disabled}`}
+        aria-current=${this.active ? 'page' : nothing}
+        ?aria-describedby=${this.__getDisabledReasonID()}
+        @click=${this.__dispatchClickWithThrottle}
+        @mousedown=${this.__handlePress}
+        @keydown=${this.__handlePress}
+        @keyup=${this.__handlePress}
+      >
+        ${this.__renderItemContent()}
+      </button>`;
+    }
+
+    return html`<a
+      id="item"
+      class=${classMap(cssClasses)}
+      href=${this.href}
+      target=${this.target}
+      aria-current=${this.active ? 'page' : nothing}
+      aria-disabled=${`${this.disabled}`}
+      ?aria-describedby=${this.__getDisabledReasonID()}
+      @click=${this.__dispatchClickWithThrottle}
+      @mousedown=${this.__handlePress}
+      @keydown=${this.__handlePress}
+      @keyup=${this.__handlePress}
+    >
+      ${this.__renderItemContent()}
+    </a>`;
+  }
+}

package/src/navigation-rail/navigation-rail.scss

@@ -0,0 +1,72 @@
+@use '../../scss/mixin';
+
+@include mixin.base-styles;
+
+:host {
+  display: block;
+  height: 100%;
+  width: var(--nav-rail-width, 5rem); /* 80dp */
+  overflow: hidden;
+}
+
+.rail {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  border-radius: inherit;
+  background-color: var(--nav-rail-container-color, var(--color-surface));
+  padding-block: var(--nav-rail-padding-block, 0.75rem); /* 12dp */
+  box-sizing: border-box;
+
+  .header {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    flex-shrink: 0;
+
+    &:empty {
+      display: none;
+    }
+  }
+
+  wc-divider {
+    width: calc(100% - 1rem);
+    margin-block: 0.5rem;
+    flex-shrink: 0;
+  }
+
+  .items {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    gap: 0.75rem; /* 12dp between items */
+    flex: 1;
+
+    ::slotted(wc-navigation-rail-item) {
+      width: 100%;
+    }
+  }
+
+  /* Alignment variants */
+  &.align-top {
+    .items {
+      justify-content: flex-start;
+    }
+  }
+
+  &.align-center {
+    .items {
+      justify-content: center;
+    }
+  }
+
+  &.align-bottom {
+    .items {
+      justify-content: flex-end;
+    }
+  }
+}

package/src/navigation-rail/navigation-rail.ts

@@ -0,0 +1,149 @@
+import { html, LitElement, PropertyValues } from 'lit';
+import { property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import styles from './navigation-rail.scss';
+import { NavigationRailItem } from './navigation-rail-item.js';
+
+/**
+ * @label Navigation Rail
+ * @tag wc-navigation-rail
+ * @rawTag navigation-rail
+ *
+ * @summary A vertical side navigation for medium-sized screens, following Material Design 3 specs.
+ * @overview
+ * <p>Navigation rail provides access to primary destinations in an app using icons—with or without labels—on a vertical rail.</p>
+ * <p>Use navigation rail on medium-sized screens (tablets) with 3–7 destinations.</p>
+ *
+ * @cssprop --nav-rail-width - Width of the rail container. Defaults to 5rem (80dp).
+ * @cssprop --nav-rail-container-color - Background color of the rail. Defaults to surface color.
+ * @cssprop --nav-rail-indicator-color - Color of the active indicator. Defaults to secondary-container.
+ * @cssprop --nav-rail-indicator-shape - Shape (border-radius) of the active indicator. Defaults to full (pill).
+ * @cssprop --nav-rail-indicator-width - Width of the active indicator. Defaults to 3.5rem (56dp).
+ * @cssprop --nav-rail-indicator-height - Height of the active indicator. Defaults to 2rem (32dp).
+ * @cssprop --nav-rail-inactive-icon-color - Color of inactive icons. Defaults to on-surface-variant.
+ * @cssprop --nav-rail-active-icon-color - Color of active icons. Defaults to on-secondary-container.
+ * @cssprop --nav-rail-inactive-label-color - Color of inactive labels. Defaults to on-surface-variant.
+ * @cssprop --nav-rail-active-label-color - Color of active labels. Defaults to on-surface.
+ *
+ * @example
+ * ```html
+ * <wc-navigation-rail>
+ *   <wc-navigation-rail-item active>
+ *     <wc-icon slot="icon">home</wc-icon>
+ *     Home
+ *   </wc-navigation-rail-item>
+ *   <wc-navigation-rail-item>
+ *     <wc-icon slot="icon">search</wc-icon>
+ *     Search
+ *   </wc-navigation-rail-item>
+ *   <wc-navigation-rail-item>
+ *     <wc-icon slot="icon">settings</wc-icon>
+ *     Settings
+ *   </wc-navigation-rail-item>
+ * </wc-navigation-rail>
+ * ```
+ * @tags navigation
+ */
+export class NavigationRail extends LitElement {
+  static styles = [styles];
+
+  static Item = NavigationRailItem;
+
+  /**
+   * Vertical alignment of items within the rail.
+   * - `"top"`: Items align to the top.
+   * - `"center"`: Items are centered (default).
+   * - `"bottom"`: Items align to the bottom.
+   */
+  @property({ reflect: true }) alignment: 'top' | 'center' | 'bottom' = 'center';
+
+  /**
+   * Display mode of the navigation rail.
+   * - `"expanded"`: shows labels.
+   * - `"collapsed"`: hides labels.
+   */
+  @property({ reflect: true }) mode: 'expanded' | 'collapsed' = 'expanded';
+
+  /**
+   * Whether to show a divider between the header and items sections.
+   */
+  @property({ type: Boolean, attribute: 'show-divider' }) showDivider = false;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener('click', this._handleItemClick);
+    this.setAttribute('role', 'navigation');
+    this.setAttribute('aria-label', this.getAttribute('aria-label') ?? 'Main navigation');
+  }
+
+  disconnectedCallback() {
+    this.removeEventListener('click', this._handleItemClick);
+    super.disconnectedCallback();
+  }
+
+  protected override firstUpdated() {
+    this._syncItemMode();
+  }
+
+  protected override updated(changedProperties: PropertyValues<this>) {
+    if (changedProperties.has('mode')) {
+      this._syncItemMode();
+    }
+  }
+
+  private _handleItemClick = (event: Event) => {
+    const target = event.target as HTMLElement;
+    const item = target.closest('wc-navigation-rail-item') as NavigationRailItem | null;
+
+    if (!item || item.disabled) return;
+
+    // Deactivate all items and activate the clicked one
+    for (const railItem of this._getItems()) {
+      railItem.active = railItem === item;
+    }
+
+    this.dispatchEvent(
+      new CustomEvent('nav-change', {
+        detail: {
+          value: item.value,
+          item,
+        },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  };
+
+  private _getItems(): NavigationRailItem[] {
+    return Array.from(
+      this.querySelectorAll('wc-navigation-rail-item'),
+    ) as NavigationRailItem[];
+  }
+
+  private _syncItemMode = () => {
+    const isCollapsed = this.mode === 'collapsed';
+    for (const railItem of this._getItems()) {
+      railItem.collapsed = isCollapsed;
+    }
+  };
+
+  render() {
+    const cssClasses = {
+      rail: true,
+      [`align-${this.alignment}`]: true,
+      [`mode-${this.mode}`]: true,
+    };
+
+    return html`
+      <div class=${classMap(cssClasses)}>
+        <div class="header">
+          <slot name="header"></slot>
+        </div>
+        ${this.showDivider ? html`<wc-divider></wc-divider>` : ''}
+        <nav class="items" role="presentation">
+          <slot @slotchange=${this._syncItemMode}></slot>
+        </nav>
+      </div>
+    `;
+  }
+}

package/src/notification/notification.ts

@@ -193,11 +193,12 @@ export class Notification extends LitElement {
                 variant="text"
                 size="sm"
                 aria-label="Close notification"
-                name="close"
                 @click=${() => {
                   this.hideAndEmitDismiss('dismiss');
                 }}
-              ></wc-icon-button>
+              >
+                <wc-icon name="close"></wc-icon>
+              </wc-icon-button>
             </div>`
           : nothing}
       </div>

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

@@ -170,11 +170,12 @@ export class NumberField extends BaseInput {
         ${this.stepper && !this.disabled
           ? html`<wc-icon-button
               class="stepper"
-              name="remove"
               variant="text"
               slot="field-start"
               @click=${this.stepDown}
-            ></wc-icon-button>`
+            >
+              <wc-icon name="remove"></wc-icon>
+            </wc-icon-button>`
           : nothing}
 
         <slot name="start" slot="field-start"></slot>
@@ -206,10 +207,11 @@ export class NumberField extends BaseInput {
           ? html`<wc-icon-button
               class="stepper"
               variant="text"
-              name="add"
               slot="field-end"
               @click=${this.stepUp}
-            ></wc-icon-button>`
+            >
+              <wc-icon name="add"></wc-icon>
+            </wc-icon-button>`
           : nothing}
       </wc-field>
     `;

package/src/pagination/pagination.ts

@@ -166,21 +166,23 @@ export class Pagination extends LitElement {
             color="secondary"
             variant="text"
             size="sm"
-            name="keyboard_arrow_left"
             title="Previous page"
             ?disabled=${isFirstPage}
             @click=${this.handlePreviousPage}
-          ></wc-icon-button>
+          >
+            <wc-icon name="keyboard_arrow_left"></wc-icon>
+          </wc-icon-button>
           <wc-icon-button
             class="nav-button"
             color="secondary"
             variant="text"
             size="sm"
-            name="keyboard_arrow_right"
             title="Next page"
             ?disabled=${isLastPage}
             @click=${this.handleNextPage}
-          ></wc-icon-button>
+          >
+            <wc-icon name="keyboard_arrow_right"></wc-icon>
+          </wc-icon-button>
         </div>
       </div>
     `;

package/src/peacock-loader.ts

@@ -15,6 +15,7 @@ import { Fab } from './fab/fab.js';
 import { SegmentedButton } from './segmented-button/segmented-button.js';
 import { SegmentedButtonGroup } from './segmented-button/segmented-button-group.js';
 import { Input } from './input/input.js';
+import { UrlField } from './url-field/url-field.js';
 import { Field } from './field/field.js';
 import { NumberField } from './number-field/number-field.js';
 import { DatePicker } from './date-picker/date-picker.js';
@@ -54,7 +55,9 @@ import { TabPanel } from './tabs/tab-panel.js';
 import { Slider } from './slider/slider.js';
 import { Table } from './table/table.js';
 import { Pagination } from './pagination/pagination.js';
-import { TreeView } from './tree-view/tree-view.js';
+import { SidebarMenu } from './sidebar-menu/sidebar-menu.js';
+import { SidebarMenuItem } from './sidebar-menu/sidebar-menu-item.js';
+import { SidebarSubMenu } from './sidebar-menu/sidebar-sub-menu.js';
 import { Card } from './card/card.js';
 import { CardContent } from './card/card-content.js';
 import { Banner } from './banner/banner.js';
@@ -66,6 +69,8 @@ import { Select } from './select/select.js';
 import { SelectOptionElement } from './select/option.js';
 import { Search } from './search/search.js';
 import { Toolbar } from './toolbar/toolbar.js';
+import { NavigationRail } from './navigation-rail/navigation-rail.js';
+import { NavigationRailItem } from './navigation-rail/navigation-rail-item.js';
 
 const distDirectory = `${import.meta.url}/..`;
 await loadCSS(`${distDirectory}/assets/styles.css`);
@@ -190,6 +195,9 @@ const loaderConfig: LoaderConfig = {
     'wc-input': {
       CustomElementClass: Input,
     },
+    'wc-url-field': {
+      CustomElementClass: UrlField,
+    },
     'wc-number-field': {
       CustomElementClass: NumberField,
     },
@@ -259,11 +267,14 @@ const loaderConfig: LoaderConfig = {
     'wc-pagination': {
       CustomElementClass: Pagination,
     },
-    'wc-tree-view': {
-      CustomElementClass: TreeView,
+    'wc-sidebar-menu': {
+      CustomElementClass: SidebarMenu,
+    },
+    'wc-sidebar-menu-item': {
+      CustomElementClass: SidebarMenuItem,
     },
-    'wc-tree-node': {
-      CustomElementClass: TreeView.Node,
+    'wc-sidebar-sub-menu': {
+      CustomElementClass: SidebarSubMenu,
     },
     'wc-snackbar': {
       CustomElementClass: Snackbar,
@@ -286,6 +297,12 @@ const loaderConfig: LoaderConfig = {
     'wc-toolbar': {
       CustomElementClass: Toolbar,
     },
+    'wc-navigation-rail': {
+      CustomElementClass: NavigationRail,
+    },
+    'wc-navigation-rail-item': {
+      CustomElementClass: NavigationRailItem,
+    },
     'wc-chart-doughnut': {
       importPath: `${distDirectory}/chart-doughnut.js`,
     },

package/src/search/search.ts

@@ -110,6 +110,8 @@ export class Search extends LitElement {
   private __handleInput(event: InputEvent) {
     const input = event.target as HTMLInputElement;
     this.value = input.value;
+    // Prevent the native input event from escaping in addition to our API event.
+    event.stopPropagation();
     this.dispatchEvent(
       new CustomEvent('input', {
         detail: { value: this.value },
@@ -122,6 +124,8 @@ export class Search extends LitElement {
   private __handleChange(event: Event) {
     const input = event.target as HTMLInputElement;
     this.value = input.value;
+    // Prevent the native change event from escaping in addition to our API event.
+    event.stopPropagation();
     this.dispatchEvent(
       new CustomEvent('change', {
         detail: { value: this.value },

package/src/sidebar-menu/demo/index.html

@@ -0,0 +1,68 @@
+<!doctype html>
+<html lang='en-GB'>
+<head>
+  <meta charset='utf-8'>
+  <meta name='viewport' content='width=device-width, initial-scale=1.0, viewport-fit=cover' />
+  <link rel='stylesheet' href='/dist/assets/styles/tokens.css' />
+  <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">
+
+  <style>
+    body {
+      background: #fafafa;
+      padding: 2rem;
+      font-family: 'Noto Sans', sans-serif;
+    }
+    h2 {
+      margin-top: 2rem;
+      margin-bottom: 0.5rem;
+    }
+  </style>
+</head>
+<body>
+
+<h2>Basic Sidebar Menu</h2>
+<wc-sidebar-menu>
+  <wc-sidebar-sub-menu label="Documents" icon="folder" expanded>
+    <wc-sidebar-sub-menu label="Work" icon="folder" expanded>
+      <wc-sidebar-menu-item label="Project A" icon="description"></wc-sidebar-menu-item>
+      <wc-sidebar-menu-item label="Project B" icon="description"></wc-sidebar-menu-item>
+    </wc-sidebar-sub-menu>
+    <wc-sidebar-menu-item label="Personal" icon="folder"></wc-sidebar-menu-item>
+  </wc-sidebar-sub-menu>
+  <wc-sidebar-sub-menu label="Pictures" icon="image" expanded>
+    <wc-sidebar-menu-item label="Vacation 2024" icon="image"></wc-sidebar-menu-item>
+    <wc-sidebar-menu-item label="Family" icon="image"></wc-sidebar-menu-item>
+  </wc-sidebar-sub-menu>
+</wc-sidebar-menu>
+
+<h2>Sidebar Menu without icons</h2>
+<wc-sidebar-menu>
+  <wc-sidebar-sub-menu label="Category 1" expanded>
+    <wc-sidebar-menu-item label="Subcategory 1.1"></wc-sidebar-menu-item>
+    <wc-sidebar-menu-item label="Subcategory 1.2"></wc-sidebar-menu-item>
+  </wc-sidebar-sub-menu>
+  <wc-sidebar-menu-item label="Category 2"></wc-sidebar-menu-item>
+</wc-sidebar-menu>
+
+<h2>Disabled items</h2>
+<wc-sidebar-menu>
+  <wc-sidebar-sub-menu label="Enabled" expanded>
+    <wc-sidebar-menu-item label="Child 1"></wc-sidebar-menu-item>
+    <wc-sidebar-menu-item label="Child 2" disabled></wc-sidebar-menu-item>
+  </wc-sidebar-sub-menu>
+  <wc-sidebar-menu-item label="Disabled" disabled></wc-sidebar-menu-item>
+</wc-sidebar-menu>
+
+<script type='module'>
+  import '/dist/index.es2017.js';
+
+  const menu = document.querySelector('wc-sidebar-menu');
+  if (menu) {
+    menu.addEventListener('sidebar-menu:change', (e) => {
+      console.log('Selected item:', e.detail);
+    });
+  }
+</script>
+
+</body>
+</html>

package/src/sidebar-menu/index.ts

@@ -0,0 +1,3 @@
+export { SidebarMenuItem } from './sidebar-menu-item.js';
+export { SidebarSubMenu } from './sidebar-sub-menu.js';
+export { SidebarMenu } from './sidebar-menu.js';