@redvars/peacock 3.4.0 → 3.5.1

package/src/image/image.ts

@@ -1,7 +1,8 @@
 import { LitElement, html } from 'lit';
 import { property, state } from 'lit/decorators.js';
-import { isDarkMode } from '../utils.js';
-import { observeThemeChange } from '../utils/observe-theme-change.js';
+
+import { isDarkMode } from '@/__utils/is-dark-mode.js';
+import { observeThemeChange } from '@/__utils/observe-theme-change.js';
 
 import styles from './image.scss';
 

package/src/index.ts

@@ -5,6 +5,7 @@ export { Divider } from './divider/index.js';
 export { Clock } from './clock/index.js';
 export { Elevation } from './elevation/index.js';
 export { Button, ButtonGroup, IconButton } from './button/index.js';
+export { Fab } from './fab/index.js';
 export { SegmentedButton, SegmentedButtonGroup } from './segmented-button/index.js';
 
 export { FocusRing } from './focus-ring/index.js';
@@ -17,6 +18,7 @@ export { LinearProgress } from './progress/linear-progress/index.js';
 export { CircularProgress } from './progress/circular-progress/index.js';
 export { Skeleton } from './skeleton/index.js';
 export { Input } from './input/index.js';
+export { UrlField } from './url-field/index.js';
 export { Field } from './field/index.js';
 export { NumberField } from './number-field/index.js';
 export { DatePicker } from './date-picker/index.js';
@@ -43,8 +45,10 @@ 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 { SidebarMenu, SidebarMenuItem, SidebarSubMenu } from './sidebar-menu/index.js';
 export { Card } from './card/index.js';
+export { Banner } from './banner/index.js';
+export { Notification } from './notification/index.js';
 export { Snackbar } from './snackbar/index.js';
 export { Radio } from './radio/index.js';
 export { BottomSheet } from './bottom-sheet/index.js';
@@ -52,4 +56,7 @@ export { SideSheet } from './side-sheet/index.js';
 export { Select } from './select/index.js';
 export type { SelectOption } from './select/index.js';
 export { SelectOptionElement } from './select/index.js';
+export { Search } from './search/index.js';
+export { Toolbar } from './toolbar/index.js';
+export { NavigationRail, NavigationRailItem } from './navigation-rail/index.js';
 

package/src/input/input.ts

@@ -1,9 +1,12 @@
 import { html, nothing } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
-import { redispatchEvent } from 'src/utils/dispatch-event-utils.js';
+
+import { redispatchEvent } from '@/__utils/dispatch-event-utils.js';
+import { spread } from '@/__directive/spread.js';
+
 import BaseInput from './BaseInput.js';
 import styles from './input.scss';
-import { spread } from '../spread.js';
+
 /**
  * @label Input
  * @tag wc-input
@@ -175,11 +178,13 @@ export class Input extends BaseInput {
                 <wc-icon-button
                   class="password-toggle"
                   variant="text"
-                  name=${this.passwordVisible ? 'visibility_off' : 'visibility'}
                   @click=${() => {
                     this.passwordVisible = !this.passwordVisible;
                   }}
                 >
+                  <wc-icon
+                    name=${this.passwordVisible ? 'visibility_off' : 'visibility'}
+                  ></wc-icon>
                 </wc-icon-button>
               </pc-tooltip>
             `

package/src/link/link.ts

@@ -1,6 +1,6 @@
 import { html, LitElement } from 'lit';
-import { property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
+import BaseHyperlinkMixin from '../__mixins/BaseHyperlinkMixin.js';
 import styles from './link.scss';
 
 /**
@@ -16,22 +16,9 @@ import styles from './link.scss';
  * <wc-link href="#">Link</wc-link>
  * ```
  */
-export class Link extends LitElement {
+export class Link extends BaseHyperlinkMixin(LitElement) {
   static styles = [styles];
 
-  /**
-   * Hyperlink to navigate to on click.
-   */
-  @property({ reflect: true }) href?: string;
-
-  /**
-   * Sets or retrieves the window or frame at which to target content.
-   */
-  @property() target: '_self' | '_parent' | '_blank' | '_top' | string =
-    '_self';
-
-  @state() tabIndexValue?: number;
-
   render() {
     return html`<a
       class=${classMap({

package/src/menu/menu/menu.scss

@@ -6,6 +6,8 @@
   display: flex;
   position: fixed;
   z-index: var(--menu-z-index, 1000);
+  width: var(--menu-width, max-content);
+  max-width: 100vw;
   min-width: 112px;
   padding-block: var(--spacing-050);
   transform-origin: top center;
@@ -37,6 +39,11 @@
     transition-timing-function: var(--_menu-enter-easing), var(--_menu-enter-easing), linear;
   }
 
+  &.preview {
+    position: relative;
+    pointer-events: auto;
+  }
+
   .menu-content {
     display: flex;
     flex-direction: column;

package/src/menu/menu/menu.ts

@@ -22,9 +22,9 @@ type CloseReason =
  *
  * @example
  * ```html
- * <wc-menu>
+ * <wc-menu preview>
  *   <wc-menu-item>Item 1</wc-menu-item>
- *   <wc-menu-item>Item 2</wc-menu-item>
+ *   <wc-menu-item selected>Item 2</wc-menu-item>
  * </wc-menu>
  * ```
  */
@@ -40,6 +40,8 @@ export class Menu extends LitElement {
 
   @property({ type: String }) anchor = '';
 
+  @property({ type: Boolean, reflect: true }) preview = false;
+
   @property({ type: Boolean, attribute: 'stay-open-on-outside-click' })
   stayOpenOnOutsideClick = false;
 
@@ -448,8 +450,9 @@ export class Menu extends LitElement {
     return html`<div
       class=${classMap({
         'menu': true,
-        open: this.open,
-        closed: !this.open,
+        open: !this.preview && this.open,
+        closed: !this.preview && !this.open,
+        preview: this.preview,
         [`variant-${this.variant}`]: true,
       })}
       aria-hidden=${String(!this.open)}

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

@@ -151,6 +151,7 @@ export class MenuItem extends LitElement {
 
     if (isLink) {
       return html`<a
+        id="item"
         class=${classMap(cssClasses)}
         href=${this.href}
         target=${this.target}
@@ -164,6 +165,7 @@ export class MenuItem extends LitElement {
     }
 
     return html`<div
+      id="item"
       class=${classMap(cssClasses)}
       aria-disabled=${String(this.disabled)}
       aria-haspopup=${this.hasSubmenu ? 'menu' : nothing}
@@ -176,7 +178,7 @@ export class MenuItem extends LitElement {
 
   renderContent() {
     return html`
-      <wc-focus-ring class="focus-ring" .control=${this} .forElement=${this}></wc-focus-ring>
+      <wc-focus-ring class="focus-ring" for='item'></wc-focus-ring>
       <div class="background"></div>
       <wc-ripple class="ripple"></wc-ripple>
 

package/src/menu/sub-menu/sub-menu.ts

@@ -10,6 +10,7 @@ let subMenuIdCounter = 0;
  * @label Sub Menu
  * @tag wc-sub-menu
  * @rawTag sub-menu
+ * @parentRawTag menu
  * @summary Connects a menu item to a nested menu.
  */
 export class SubMenu extends LitElement {

package/src/navigation-rail/index.ts

@@ -0,0 +1,2 @@
+export { NavigationRail } from './navigation-rail.js';
+export { NavigationRailItem } from './navigation-rail-item.js';

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

@@ -0,0 +1,216 @@
+@use '../../scss/mixin';
+
+@include mixin.base-styles;
+
+:host {
+  display: block;
+}
+
+/* Reset native button/link styles */
+.item-element {
+  background: transparent;
+  border: none;
+  appearance: none;
+  margin: 0;
+  outline: none;
+  text-decoration: none;
+  text-align: unset;
+  color: inherit;
+}
+
+.item {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-height: 3.5rem; /* 56dp */
+  padding-block: 0.25rem; /* 4dp vertical padding */
+  cursor: pointer;
+  gap: 0.25rem; /* 4dp gap between indicator and label */
+  box-sizing: border-box;
+
+  /* Color tokens */
+  --_inactive-icon-color: var(--nav-rail-inactive-icon-color, var(--color-on-surface-variant));
+  --_active-icon-color: var(--nav-rail-active-icon-color, var(--color-on-secondary-container));
+  --_inactive-label-color: var(--nav-rail-inactive-label-color, var(--color-on-surface-variant));
+  --_active-label-color: var(--nav-rail-active-label-color, var(--color-on-surface));
+  --_indicator-color: var(--nav-rail-indicator-color, var(--color-secondary-container));
+  --_indicator-shape: var(--nav-rail-indicator-shape, var(--shape-corner-full));
+  --_indicator-width: var(--nav-rail-indicator-width, 3.5rem); /* 56dp */
+  --_indicator-height: var(--nav-rail-indicator-height, 2rem); /* 32dp */
+  --_state-color: var(--_inactive-icon-color);
+
+  /* Focus ring */
+  .focus-ring {
+    z-index: 3;
+    --focus-ring-container-shape-start-start: var(--shape-corner-small);
+    --focus-ring-container-shape-start-end: var(--shape-corner-small);
+    --focus-ring-container-shape-end-start: var(--shape-corner-small);
+    --focus-ring-container-shape-end-end: var(--shape-corner-small);
+  }
+
+  /* Active indicator (pill behind icon) */
+  .indicator {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--_indicator-width);
+    height: var(--_indicator-height);
+    border-radius: var(--_indicator-shape);
+    overflow: hidden;
+    flex-shrink: 0;
+    transition: background-color var(--duration-short4, 200ms) var(--easing-standard, ease);
+
+    .icon-container {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 1;
+      position: relative;
+      pointer-events: none;
+
+      ::slotted(*) {
+        --icon-size: 1.5rem; /* 24dp */
+        --icon-color: var(--_inactive-icon-color);
+        color: var(--_inactive-icon-color);
+        display: flex;
+      }
+    }
+  }
+
+  /* State layer for hover/press */
+  .state-layer {
+    position: absolute;
+    top: 0.25rem;
+    left: 50%;
+    transform: translateX(-50%);
+    width: var(--_indicator-width);
+    height: var(--_indicator-height);
+    pointer-events: none;
+    background-color: var(--_state-color);
+    opacity: 0;
+    z-index: 0;
+    border-radius: var(--_indicator-shape);
+    transition: opacity var(--duration-short4, 200ms) var(--easing-standard, ease);
+  }
+
+  .ripple {
+    z-index: 1;
+    --ripple-pressed-color: var(--_state-color);
+    --ripple-state-opacity: 0;
+    border-radius: var(--shape-corner-small, 4px);
+  }
+
+  /* Label */
+  .label {
+    @include mixin.get-typography('label-medium');
+    color: var(--_inactive-label-color);
+    text-align: center;
+    pointer-events: none;
+    z-index: 1;
+    transition: color var(--duration-short4, 200ms) var(--easing-standard, ease),
+      font-weight var(--duration-short4, 200ms) var(--easing-standard, ease);
+  }
+
+  /* Active icon slot: hidden by default */
+  .active-icon-slot {
+    display: none;
+  }
+
+  .hidden-slot {
+    display: none;
+  }
+
+  /* Item content layout */
+  .item-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.25rem;
+    width: 100%;
+    z-index: 1;
+  }
+
+  /* Active state */
+  &.active {
+    --_state-color: var(--_active-icon-color);
+
+    .indicator {
+      background-color: var(--_indicator-color);
+
+      .icon-container {
+        ::slotted(*) {
+          --icon-color: var(--_active-icon-color);
+          color: var(--_active-icon-color);
+        }
+      }
+    }
+
+    .label {
+      color: var(--_active-label-color);
+      font-weight: var(--typography-label-medium-font-weight-bold, 700);
+    }
+  }
+
+  /* Active icon slot: show when active and slot has content */
+  &.active.has-active-icon {
+    .active-icon-slot {
+      display: flex;
+    }
+
+    .icon-slot {
+      display: none;
+    }
+  }
+
+  /* Hover state */
+  &:hover:not(.disabled) {
+    .state-layer {
+      opacity: 0.08;
+    }
+  }
+
+  /* Pressed state */
+  &.pressed:not(.disabled) {
+    .state-layer {
+      opacity: 0.12;
+    }
+  }
+
+  /* Disabled state */
+  &.disabled {
+    cursor: not-allowed;
+
+    .indicator {
+      .icon-container {
+        ::slotted(*) {
+          --icon-color: var(--color-on-surface);
+          color: var(--color-on-surface);
+          opacity: 0.38;
+        }
+      }
+    }
+
+    .label {
+      color: var(--color-on-surface);
+      opacity: 0.38;
+    }
+
+    .ripple {
+      display: none;
+    }
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .item {
+    .indicator,
+    .state-layer,
+    .label {
+      transition: none;
+    }
+  }
+}

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>`;
+  }
+}