@redvars/peacock 3.5.0 → 3.6.0

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/notification-manager/index.ts

@@ -0,0 +1 @@
+export { NotificationManager } from './notification-manager.js';

package/src/notification-manager/notification-manager.scss

@@ -0,0 +1,113 @@
+@use '../../scss/mixin';
+
+@include mixin.base-styles;
+
+@keyframes reveal-top {
+  0% {
+    opacity: 0;
+    transform: translateY(-1rem);
+    max-height: 0;
+  }
+
+  100% {
+    max-height: 500px;
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes reveal-bottom {
+  0% {
+    opacity: 0;
+    transform: translateY(1rem);
+    max-height: 0;
+  }
+
+  100% {
+    max-height: 500px;
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+:host {
+  display: block;
+  position: var(--notification-manager-position, absolute);
+  width: 20rem;
+  z-index: var(--z-index-notification-manager, 9000);
+  pointer-events: none;
+}
+
+.notification-manager {
+  pointer-events: none;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-100);
+  margin: var(--spacing-150);
+}
+
+.notification {
+  pointer-events: auto;
+  max-height: 500px;
+  transition: max-height 0.5s ease-out, opacity 0.5s ease-out;
+  overflow: hidden;
+}
+
+.notification.hidden {
+  max-height: 0;
+  opacity: 0;
+}
+
+/* Position variants */
+
+:host([position='bottom-right']) {
+  bottom: 0;
+  right: 0;
+
+  .notification-manager {
+    align-items: flex-end;
+  }
+
+  .notification {
+    animation: reveal-bottom 0.5s ease-in;
+  }
+}
+
+:host([position='bottom-left']) {
+  bottom: 0;
+  left: 0;
+
+  .notification-manager {
+    align-items: flex-start;
+  }
+
+  .notification {
+    animation: reveal-bottom 0.5s ease-in;
+  }
+}
+
+:host([position='top-right']) {
+  top: 0;
+  right: 0;
+
+  .notification-manager {
+    align-items: flex-end;
+  }
+
+  .notification {
+    animation: reveal-top 0.5s ease-in;
+  }
+}
+
+:host([position='top-left']) {
+  top: 0;
+  left: 0;
+
+  .notification-manager {
+    align-items: flex-start;
+  }
+
+  .notification {
+    animation: reveal-top 0.5s ease-in;
+  }
+}