@redvars/peacock 3.5.0 → 3.5.1

package/src/fab/fab.ts

@@ -1,5 +1,5 @@
-import { html, LitElement, nothing } from 'lit';
-import { property, query, state } from 'lit/decorators.js';
+import { html, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 
@@ -8,10 +8,10 @@ import { dispatchActivationClick, isActivationClick } from '@/__utils/dispatch-e
 import { throttle } from '@/__utils/throttle.js';
 import { spread } from '@/__directive/spread.js';
 
-import { IconProvider } from '../icon/icon.js';
 import styles from './fab.scss';
 import colorStyles from './fab-colors.scss';
 import sizeStyles from './fab-sizes.scss';
+import { BaseButton } from '@/button/BaseButton.js';
 
 /**
  * @label FAB
@@ -31,32 +31,17 @@ import sizeStyles from './fab-sizes.scss';
  *
  * @example
  * ```html
- * <wc-fab name="add"></wc-fab>
+ * <wc-fab><wc-icon name="add"></wc-icon></wc-fab>
  * ```
  * @tags controls
  */
 @IndividualComponent
-export class Fab extends LitElement {
+export class Fab extends BaseButton {
   static override styles = [styles, colorStyles, sizeStyles];
 
   #id = crypto.randomUUID();
+  
 
-  #tabindex?: number = 0;
-
-  /**
-   * Name of the icon to display inside the FAB.
-   */
-  @property({ type: String, reflect: true }) name?: string;
-
-  /**
-   * Source URL for a custom icon.
-   */
-  @property({ type: String, reflect: true }) src?: string;
-
-  /**
-   * Icon provider. Defaults to `"material-symbols"`.
-   */
-  @property({ type: String }) provider: IconProvider = 'material-symbols';
 
   /**
    * Optional label text for the extended FAB variant.
@@ -93,21 +78,6 @@ export class Fab extends LitElement {
    */
   @property({ type: Boolean, reflect: true }) lowered: boolean = false;
 
-  /**
-   * If `true`, the user cannot interact with the FAB.
-   */
-  @property({ type: Boolean, reflect: true }) disabled: boolean = false;
-
-  /**
-   * 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: string = '_self';
-
   /**
    * Additional ARIA attributes to pass to the inner button/anchor element.
    */
@@ -127,26 +97,12 @@ export class Fab extends LitElement {
   @state()
   isPressed = false;
 
-  @query('.fab') readonly fabElement!: HTMLElement | null;
-
   override focus() {
-    this.fabElement?.focus();
+    this.buttonElement?.focus();
   }
 
   override blur() {
-    this.fabElement?.blur();
-  }
-
-  override connectedCallback() {
-    super.connectedCallback();
-    this.addEventListener('click', this.__dispatchClickWithThrottle);
-    window.addEventListener('mouseup', this.__handlePress);
-  }
-
-  override disconnectedCallback() {
-    window.removeEventListener('mouseup', this.__handlePress);
-    this.removeEventListener('click', this.__dispatchClickWithThrottle);
-    super.disconnectedCallback();
+    this.buttonElement?.blur();
   }
 
   override firstUpdated() {
@@ -156,30 +112,6 @@ export class Fab extends LitElement {
     );
   }
 
-  __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;
-  }
-
-  __dispatchClickWithThrottle: (event: MouseEvent | KeyboardEvent) => void =
-    event => {
-      this.__dispatchClick(event);
-    };
-
   __dispatchClick = (event: MouseEvent | KeyboardEvent) => {
     if (this.disabled && this.href) {
       event.stopImmediatePropagation();
@@ -187,12 +119,12 @@ export class Fab extends LitElement {
       return;
     }
 
-    if (!isActivationClick(event) || !this.fabElement) {
+    if (!isActivationClick(event) || !this.buttonElement) {
       return;
     }
 
     this.focus();
-    dispatchActivationClick(this.fabElement);
+    dispatchActivationClick(this.buttonElement);
   };
 
   __getDisabledReasonID() {
@@ -204,6 +136,7 @@ export class Fab extends LitElement {
     const isExtended = !!this.label;
 
     const cssClasses = {
+      button: true,
       fab: true,
       'fab-element': true,
       [`size-${this.size}`]: true,
@@ -218,15 +151,16 @@ export class Fab extends LitElement {
     if (!isLink) {
       return html`<button
           class=${classMap(cssClasses)}
-          id="fab"
-          tabindex=${this.#tabindex}
+          id="button"
           type="button"
           @click=${this.__dispatchClickWithThrottle}
           @mousedown=${this.__handlePress}
           @keydown=${this.__handlePress}
           @keyup=${this.__handlePress}
-          aria-label=${this.label ?? this.name ?? nothing}
-          aria-disabled=${`${this.disabled}`}
+          
+          aria-describedby=${ifDefined(this.softDisabled ? BaseButton.DISABLED_REASON_ID : undefined)}
+          ?aria-disabled=${this.softDisabled}
+
           ?disabled=${this.disabled}
           ${spread(this.configAria)}
         >
@@ -237,17 +171,19 @@ export class Fab extends LitElement {
 
     return html`<a
         class=${classMap(cssClasses)}
-        id="fab"
-        tabindex=${this.#tabindex}
+        id="button"
+        tabindex=${this.disabled ? '-1' : '0'}
         href=${ifDefined(this.href)}
         target=${this.target}
-        @click=${this.__dispatchClickWithThrottle}
+        @click=${this.__dispatchClick}
         @mousedown=${this.__handlePress}
         @keydown=${this.__handlePress}
         @keyup=${this.__handlePress}
         role="button"
-        aria-label=${this.label ?? this.name ?? nothing}
-        aria-disabled=${`${this.disabled}`}
+
+        aria-describedby=${ifDefined(this.softDisabled ? BaseButton.DISABLED_REASON_ID : undefined)}
+        ?aria-disabled=${this.softDisabled}
+
         ${spread(this.configAria)}
       >
         ${this.__renderFabContent(isExtended)}
@@ -257,29 +193,22 @@ export class Fab extends LitElement {
 
   __renderFabContent(isExtended: boolean) {
     return html`
-      <wc-focus-ring class="focus-ring" .control=${this} .forElement=${this.fabElement}></wc-focus-ring>
+      <wc-focus-ring class="focus-ring" for='button'></wc-focus-ring>
       <wc-elevation class="elevation"></wc-elevation>
       <div class="background"></div>
       <wc-ripple class="ripple"></wc-ripple>
+      <wc-skeleton class="skeleton"></wc-skeleton>
 
       <div class="fab-content">
-        <wc-icon
-          class="fab-icon"
-          name=${ifDefined(this.name)}
-          src=${ifDefined(this.src)}
-          provider=${this.provider}
-        ></wc-icon>
+
+        <slot></slot>
         ${isExtended
           ? html`<span class="fab-label">${this.label}</span>`
           : nothing}
       </div>
+
+      ${this.__renderDisabledReason(this.softDisabled)}
     `;
   }
 
-  __renderTooltip() {
-    if (this.tooltip) {
-      return html`<wc-tooltip for="fab">${this.tooltip}</wc-tooltip>`;
-    }
-    return nothing;
-  }
 }

package/src/focus-ring/focus-ring.ts

@@ -20,34 +20,14 @@ export class FocusRing extends LitElement {
 
   @property({ type: String }) for = '';
 
+  private __boundFocusin = this.__focusin.bind(this);
 
-  render() {
-    return nothing;
-  }
-
-  _control?: HTMLElement;
-
-  _focusTarget?: HTMLElement;
+  private __boundFocusout = this.__focusout.bind(this);
 
-  get control() {
-    return this._control || null;
-  }
-
-  set control(control: HTMLElement | null) {
-    if (control) {
-      this._control = control;
-    } else {
-      this.detach();
-    }
-  }
+  private __boundPointerdown = this.__pointerdown.bind(this);
 
-  set forElement(value: HTMLElement | null) {
-    if (value) {
-      this._focusTarget = value;
-      this.attach();
-    } else {      
-      this.detach();
-    }
+  render() {
+    return nothing;
   }
 
   connectedCallback() {
@@ -60,6 +40,22 @@ export class FocusRing extends LitElement {
     super.disconnectedCallback();
   }
 
+  updated(changed: Map<string, unknown>) {
+    if (changed.has('for')) {
+      const prevId = changed.get('for') as string;
+      if (prevId) {
+        const root = this.parentElement?.getRootNode() as ShadowRoot | Document;
+        const prevEl = root?.getElementById(prevId) ?? document.getElementById(prevId);
+        if (prevEl) {
+          prevEl.removeEventListener('focusin', this.__boundFocusin);
+          prevEl.removeEventListener('focusout', this.__boundFocusout);
+          prevEl.removeEventListener('pointerdown', this.__boundPointerdown);
+        }
+      }
+      this.attach();
+    }
+  }
+
   __focusin() {
     const focusTarget = this.__getFocusTarget();
     this.visible = focusTarget?.matches(':focus-visible') ?? false;
@@ -73,35 +69,46 @@ export class FocusRing extends LitElement {
     this.visible = false;
   }
 
+  /**
+   * Resolves the element that should receive focus-ring event listeners by id.
+   * Prefers lookup from the current control's root node, then falls back to a
+   * document-level lookup.
+   *
+   * @returns The resolved focus target, if one can be found.
+   */
   __getFocusTarget(): HTMLElement | undefined {
-
-    if (this._focusTarget) {
-      return this._focusTarget;
+    if (this.for) {
+      const root = this.parentElement?.getRootNode() as ShadowRoot | Document;
+      if (root) {
+        const focusTarget = root.getElementById(this.for);
+        if (focusTarget) {
+          return focusTarget;
+        }
+      }
+      const focusTarget = document.getElementById(this.for);
+      if (focusTarget) {
+        return focusTarget;
+      }
     }
 
-    const focusTarget = document.getElementById(this.for);
-     if (focusTarget) {
-      return focusTarget
-     }
-     return undefined;
+    return undefined;
   }
 
   attach() {
     const focusTarget = this.__getFocusTarget();
     if (focusTarget) {
-      focusTarget.addEventListener('focusin', this.__focusin.bind(this));
-      focusTarget.addEventListener('focusout', this.__focusout.bind(this));
-      focusTarget.addEventListener('pointerdown', this.__pointerdown.bind(this));
+      focusTarget.addEventListener('focusin', this.__boundFocusin);
+      focusTarget.addEventListener('focusout', this.__boundFocusout);
+      focusTarget.addEventListener('pointerdown', this.__boundPointerdown);
     }
   }
 
   detach() {
     const focusTarget = this.__getFocusTarget();
     if (focusTarget) {
-      focusTarget.removeEventListener('focusin', this.__focusin.bind(this));
-      focusTarget.removeEventListener('focusout', this.__focusout.bind(this));
-      focusTarget.removeEventListener('pointerdown', this.__pointerdown.bind(this));
+      focusTarget.removeEventListener('focusin', this.__boundFocusin);
+      focusTarget.removeEventListener('focusout', this.__boundFocusout);
+      focusTarget.removeEventListener('pointerdown', this.__boundPointerdown);
     }
-    this._control = undefined;
   }
 }

package/src/index.ts

@@ -18,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';
@@ -44,7 +45,7 @@ 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';
@@ -57,4 +58,5 @@ 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

@@ -178,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 { classMap } from 'lit/directives/class-map.js';
-import BaseHyperlink from '../__base_element/BaseHyperlink.js';
+import BaseHyperlinkMixin from '../__mixins/BaseHyperlinkMixin.js';
 import styles from './link.scss';
 
 /**
@@ -16,7 +16,7 @@ import styles from './link.scss';
  * <wc-link href="#">Link</wc-link>
  * ```
  */
-export class Link extends BaseHyperlink(LitElement) {
+export class Link extends BaseHyperlinkMixin(LitElement) {
   static styles = [styles];
 
   render() {

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