@redvars/peacock 3.6.2 → 3.7.0

package/src/fab/fab.ts

@@ -1,17 +1,23 @@
-import { html, nothing } from 'lit';
-import { property, state } from 'lit/decorators.js';
+import { html, LitElement, nothing } from 'lit';
+import { property, query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 
 import IndividualComponent from '@/IndividualComponent.js';
-import { dispatchActivationClick, isActivationClick } from '@/__utils/dispatch-event-utils.js';
+import {
+  dispatchActivationClick,
+  isActivationClick,
+} from '@/__utils/dispatch-event-utils.js';
+import { isLink } from '@/__utils/is-link.js';
 import { throttle } from '@/__utils/throttle.js';
 import { spread } from '@/__directive/spread.js';
 
 import styles from './fab.scss';
 import colorStyles from './fab-colors.scss';
 import sizeStyles from './fab-sizes.scss';
-import { BaseButton } from '@/button/BaseButton.js';
+import NativeButtonMixin from '@/__mixins/NativeButtonMixin.js';
+import NativeHyperlinkMixin from '@/__mixins/NativeHyperlinkMixin.js';
+import { DISABLED_REASON_ID } from '@/button/ButtonConstants.js';
 
 /**
  * @label FAB
@@ -36,12 +42,10 @@ import { BaseButton } from '@/button/BaseButton.js';
  * @tags controls
  */
 @IndividualComponent
-export class Fab extends BaseButton {
+export class Fab extends NativeButtonMixin(NativeHyperlinkMixin(LitElement)) {
   static override styles = [styles, colorStyles, sizeStyles];
 
   #id = crypto.randomUUID();
-  
-
 
   /**
    * Optional label text for the extended FAB variant.
@@ -56,7 +60,11 @@ export class Fab extends BaseButton {
    * `"secondary"` uses the secondary color role.
    * `"tertiary"` uses the tertiary color role.
    */
-  @property({ reflect: true }) color: 'surface' | 'primary' | 'secondary' | 'tertiary' = 'surface';
+  @property({ reflect: true }) color:
+    | 'surface'
+    | 'primary'
+    | 'secondary'
+    | 'tertiary' = 'surface';
 
   /**
    * The style variant of the FAB.
@@ -94,26 +102,57 @@ export class Fab extends BaseButton {
    */
   @property() tooltip?: string;
 
-  @state()
-  isPressed = false;
+  @property({ type: Boolean, reflect: true }) skeleton: boolean = false;
 
-  override focus() {
-    this.buttonElement?.focus();
-  }
+  @property({ type: Boolean, reflect: true }) toggle: boolean = false;
 
-  override blur() {
-    this.buttonElement?.blur();
+  @property({ type: Boolean, reflect: true }) selected: boolean = false;
+
+  /**
+   * States
+   */
+  @property({ type: Boolean, reflect: true })
+  pressed = false;
+
+  @query('.button') readonly buttonElement!: HTMLElement | null;
+
+  override connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener('click', this.__dispatchClickWithThrottle);
+    window.addEventListener('mouseup', this.__handlePress);
   }
 
-  override firstUpdated() {
-    this.__dispatchClickWithThrottle = throttle(
-      this.__dispatchClick,
-      this.throttleDelay,
-    );
+  override disconnectedCallback() {
+    window.removeEventListener('mouseup', this.__handlePress);
+    this.removeEventListener('click', this.__dispatchClickWithThrottle);
+    super.disconnectedCallback();
   }
 
+  __handlePress = (event: KeyboardEvent | MouseEvent) => {
+    if (this.disabled || this.skeleton || this.softDisabled) return;
+    if (
+      event instanceof KeyboardEvent &&
+      event.type === 'keydown' &&
+      (event.key === 'Enter' || event.key === ' ')
+    ) {
+      this.pressed = true;
+    } else if (event.type === 'mousedown') {
+      this.pressed = true;
+    } else {
+      this.pressed = false;
+    }
+  };
+
+  __dispatchClickWithThrottle: (event: MouseEvent | KeyboardEvent) => void =
+    event => {
+      this.__dispatchClick(event);
+    };
+
   __dispatchClick = (event: MouseEvent | KeyboardEvent) => {
-    if (this.disabled && this.href) {
+    // If the button is soft-disabled or a disabled link, we need to explicitly
+    // prevent the click from propagating to other event listeners as well as
+    // prevent the default action.
+    if (this.softDisabled || (this.disabled && this.href) || this.skeleton) {
       event.stopImmediatePropagation();
       event.preventDefault();
       return;
@@ -123,18 +162,66 @@ export class Fab extends BaseButton {
       return;
     }
 
+    if (this.toggle) {
+      this.selected = !this.selected;
+    }
+
     this.focus();
     dispatchActivationClick(this.buttonElement);
   };
 
-  __getDisabledReasonID() {
-    return this.disabled ? `disabled-reason-${this.#id}` : nothing;
+  __renderDisabledReason(softDisabled: boolean) {
+    if (softDisabled)
+      return html`<div
+        id=${DISABLED_REASON_ID}
+        role="tooltip"
+        aria-label=${this.disabledReason}
+        class="screen-reader-only"
+      >
+        ${this.disabledReason}
+      </div>`;
+    return nothing;
+  }
+
+  __renderTooltip() {
+    if (this.tooltip) {
+      return html`<wc-tooltip class="tooltip"  for="button"
+        >${this.tooltip}</wc-tooltip
+      >`;
+    }
+    return nothing;
+  }
+
+  override focus() {
+    this.buttonElement?.focus();
+  }
+
+  override blur() {
+    this.buttonElement?.blur();
+  }
+
+  override firstUpdated() {
+    this.__dispatchClickWithThrottle = throttle(
+      this.__dispatchClick,
+      this.throttleDelay,
+    );
   }
 
   override render() {
-    const isLink = this.__isLink();
     const isExtended = !!this.label;
 
+    return html`
+      <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" for="button"></wc-ripple>
+      <wc-skeleton class="skeleton"></wc-skeleton>
+
+      ${this.__renderFabElement(isExtended)} ${this.__renderTooltip()}
+    `;
+  }
+
+  __renderFabElement(isExtended: boolean) {
     const cssClasses = {
       button: true,
       fab: true,
@@ -145,70 +232,59 @@ export class Fab extends BaseButton {
       extended: isExtended,
       lowered: this.lowered,
       disabled: this.disabled,
-      pressed: this.isPressed,
+      pressed: this.pressed,
     };
 
-    if (!isLink) {
+    if (!isLink(this)) {
       return html`<button
-          class=${classMap(cssClasses)}
-          id="button"
-          type="button"
-          @click=${this.__dispatchClickWithThrottle}
-          @mousedown=${this.__handlePress}
-          @keydown=${this.__handlePress}
-          @keyup=${this.__handlePress}
-          
-          aria-describedby=${ifDefined(this.softDisabled ? BaseButton.DISABLED_REASON_ID : undefined)}
-          ?aria-disabled=${this.softDisabled}
-
-          ?disabled=${this.disabled}
-          ${spread(this.configAria)}
-        >
-          ${this.__renderFabContent(isExtended)}
-        </button>
-        ${this.__renderTooltip()}`;
-    }
-
-    return html`<a
         class=${classMap(cssClasses)}
         id="button"
-        tabindex=${this.disabled ? '-1' : '0'}
-        href=${ifDefined(this.href)}
-        target=${this.target}
-        @click=${this.__dispatchClick}
+        type="button"
+        @click=${this.__dispatchClickWithThrottle}
         @mousedown=${this.__handlePress}
         @keydown=${this.__handlePress}
         @keyup=${this.__handlePress}
-        role="button"
-
-        aria-describedby=${ifDefined(this.softDisabled ? BaseButton.DISABLED_REASON_ID : undefined)}
+        aria-describedby=${ifDefined(
+          this.softDisabled ? DISABLED_REASON_ID : undefined,
+        )}
         ?aria-disabled=${this.softDisabled}
-
+        ?disabled=${this.disabled}
         ${spread(this.configAria)}
       >
         ${this.__renderFabContent(isExtended)}
-      </a>
-      ${this.__renderTooltip()}`;
+      </button>`;
+    }
+
+    return html`<a
+      class=${classMap(cssClasses)}
+      id="button"
+      tabindex=${this.disabled ? '-1' : '0'}
+      href=${ifDefined(this.href)}
+      target=${this.target}
+      @click=${this.__dispatchClick}
+      @mousedown=${this.__handlePress}
+      @keydown=${this.__handlePress}
+      @keyup=${this.__handlePress}
+      role="button"
+      aria-describedby=${ifDefined(
+        this.softDisabled ? DISABLED_REASON_ID : undefined,
+      )}
+      ?aria-disabled=${this.softDisabled}
+      ${spread(this.configAria)}
+    >
+      ${this.__renderFabContent(isExtended)}
+    </a>`;
   }
 
   __renderFabContent(isExtended: boolean) {
     return html`
-      <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">
-
         <slot></slot>
         ${isExtended
           ? html`<span class="fab-label">${this.label}</span>`
           : nothing}
       </div>
-
       ${this.__renderDisabledReason(this.softDisabled)}
     `;
   }
-
 }

package/src/field/field.ts

@@ -24,6 +24,12 @@ import styles from './field.scss';
  * @tags form
  */
 export class Field extends LitElement {
+
+  static shadowRootOptions: ShadowRootInit = {
+      ...LitElement.shadowRootOptions,
+      delegatesFocus: true,
+    };
+    
   static styles = [styles];
 
   @property({ type: String })

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

@@ -1,6 +1,20 @@
-import { LitElement, nothing } from 'lit';
+import { isServer, LitElement, PropertyValues } from 'lit';
 import { property } from 'lit/decorators.js';
 import styles from './focus-ring.scss';
+import {
+  Attachable,
+  AttachableController,
+} from '@/__controllers/attachable-controller.js';
+
+/**
+ * Events that the focus ring listens to.
+ */
+const EVENTS = ['focusin', 'focusout', 'pointerdown'];
+const HANDLED_BY_FOCUS_RING = Symbol('handledByFocusRing');
+
+interface FocusRingEvent extends Event {
+  [HANDLED_BY_FOCUS_RING]: true;
+}
 
 /**
  * @label Focus Ring
@@ -12,103 +26,98 @@ import styles from './focus-ring.scss';
  *
  *
  * @tags display
+ *
+ * @fires visibility-changed {Event} Fired whenever `visible` changes.
  */
-export class FocusRing extends LitElement {
+export class FocusRing extends LitElement implements Attachable {
   static styles = [styles];
 
-  @property({ type: Boolean, reflect: true }) visible: boolean = false;
-
-  @property({ type: String }) for = '';
-
-  private __boundFocusin = this.__focusin.bind(this);
-
-  private __boundFocusout = this.__focusout.bind(this);
+  /**
+   * Makes the focus ring visible.
+   */
+  @property({ type: Boolean, reflect: true })
+  visible = false;
 
-  private __boundPointerdown = this.__pointerdown.bind(this);
+  /**
+   * Makes the focus ring animate inwards instead of outwards.
+   */
+  @property({ type: Boolean, reflect: true }) inward = false;
 
-  render() {
-    return nothing;
+  get htmlFor() {
+    return this.attachableController.htmlFor;
   }
 
-  connectedCallback() {
-    super.connectedCallback();
-    this.attach();
+  set htmlFor(htmlFor: string | null) {
+    this.attachableController.htmlFor = htmlFor;
   }
 
-  disconnectedCallback() {
-    this.detach();
-    super.disconnectedCallback();
+  get control() {
+    return this.attachableController.control;
   }
 
-  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();
-    }
+  set control(control: HTMLElement | null) {
+    this.attachableController.control = control;
   }
 
-  __focusin() {
-    const focusTarget = this.__getFocusTarget();
-    this.visible = focusTarget?.matches(':focus-visible') ?? false;
+  private readonly attachableController = new AttachableController(
+    this,
+    this.onControlChange.bind(this),
+  );
+
+  attach(control: HTMLElement) {
+    this.attachableController.attach(control);
   }
 
-  __focusout() {
-    this.visible = false;
+  detach() {
+    this.attachableController.detach();
   }
 
-  __pointerdown() {
-    this.visible = false;
+  override connectedCallback() {
+    super.connectedCallback();
+    // Needed for VoiceOver, which will create a "group" if the element is a
+    // sibling to other content.
+    this.setAttribute('aria-hidden', 'true');
   }
 
-  /**
-   * 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.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;
-      }
+  /** @private */
+  handleEvent(event: FocusRingEvent) {
+    if (event[HANDLED_BY_FOCUS_RING]) {
+      // This ensures the focus ring does not activate when multiple focus rings
+      // are used within a single component.
+      return;
+    }
+
+    switch (event.type) {
+      case 'focusin':
+        this.visible = this.control?.matches(':focus-visible') ?? false;
+        break;
+      case 'focusout':
+      case 'pointerdown':
+        this.visible = false;
+        break;
+      default:
+        return;
     }
 
-    return undefined;
+    // eslint-disable-next-line no-param-reassign
+    event[HANDLED_BY_FOCUS_RING] = true;
   }
 
-  attach() {
-    const focusTarget = this.__getFocusTarget();
-    if (focusTarget) {
-      focusTarget.addEventListener('focusin', this.__boundFocusin);
-      focusTarget.addEventListener('focusout', this.__boundFocusout);
-      focusTarget.addEventListener('pointerdown', this.__boundPointerdown);
+  private onControlChange(prev: HTMLElement | null, next: HTMLElement | null) {
+    if (isServer) return;
+
+    for (const event of EVENTS) {
+      prev?.removeEventListener(event, this);
+      next?.addEventListener(event, this);
     }
   }
 
-  detach() {
-    const focusTarget = this.__getFocusTarget();
-    if (focusTarget) {
-      focusTarget.removeEventListener('focusin', this.__boundFocusin);
-      focusTarget.removeEventListener('focusout', this.__boundFocusout);
-      focusTarget.removeEventListener('pointerdown', this.__boundPointerdown);
+  override update(changed: PropertyValues<FocusRing>) {
+    if (changed.has('visible')) {
+      // This logic can be removed once the `:has` selector has been introduced
+      // to Firefox. This is necessary to allow correct submenu styles.
+      this.dispatchEvent(new Event('visibility-changed'));
     }
+    super.update(changed);
   }
 }

package/src/image/image.scss

@@ -30,27 +30,32 @@ img.clickable {
   display: block;
 }
 
-/* Preview overlay — rendered in light DOM via portal, but we keep
-    a host-level overlay as a fallback when shadow DOM is used.       */
-.preview-overlay {
-  display: none;
-  position: fixed;
-  inset: 0;
-  z-index: 9999;
-  background: rgba(0, 0, 0, 0.85);
-  align-items: center;
-  justify-content: center;
+/* Lightbox preview — native <dialog> renders in the top layer,
+   bypassing any stacking context on the host page.                  */
+.preview-dialog {
+  background: transparent;
+  border: none;
   cursor: zoom-out;
+  max-height: 90dvh;
+  max-width: 90dvw;
+  padding: 0;
+
+  &[open] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &::backdrop {
+    background: color-mix(in srgb, var(--color-scrim), transparent 15%);
+  }
 }
 
-.preview-overlay.open {
-  display: flex;
-}
-
-.preview-overlay img {
+.preview-dialog img {
   max-width: 90vw;
   max-height: 90vh;
   object-fit: contain;
-  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
+  box-shadow: 0 8px 40px color-mix(in srgb, var(--color-shadow), transparent 40%);
   border-radius: 4px;
+  cursor: auto;
 }

package/src/image/image.ts

@@ -1,5 +1,5 @@
 import { LitElement, html } from 'lit';
-import { property, state } from 'lit/decorators.js';
+import { property, query, state } from 'lit/decorators.js';
 
 import { isDarkMode } from '@/__utils/is-dark-mode.js';
 import { observeThemeChange } from '@/__utils/observe-theme-change.js';
@@ -37,7 +37,7 @@ export class Image extends LitElement {
 
   @state() private _loaded = false;
 
-  @state() private _previewOpen = false;
+  @query('.preview-dialog') private _dialog?: HTMLDialogElement;
 
   private _intersectionObserver: IntersectionObserver | null = null;
 
@@ -90,13 +90,15 @@ export class Image extends LitElement {
 
   private _handleClick() {
     if (this.preview) {
-      this._previewOpen = true;
+      this._dialog?.showModal();
     }
   }
 
-  private _closePreview(e: Event) {
-    e.stopPropagation();
-    this._previewOpen = false;
+  private _handleDialogClick(e: MouseEvent) {
+    // Close when clicking the backdrop (target is the dialog itself, not the image)
+    if (e.target === e.currentTarget) {
+      (e.currentTarget as HTMLDialogElement).close();
+    }
   }
 
   render() {
@@ -112,17 +114,14 @@ export class Image extends LitElement {
           : html`<span class="placeholder" aria-hidden="true"></span>`}
       </div>
 
-      <!-- Lightbox preview overlay (inside shadow root) -->
-      <div
-        class="preview-overlay ${this._previewOpen ? 'open' : ''}"
-        role="dialog"
-        aria-modal="true"
+      <!-- Lightbox preview dialog — uses native top-layer to avoid stacking context issues -->
+      <dialog
+        class="preview-dialog"
         aria-label="Image preview"
-        @click=${this._closePreview}
-        @keydown=${(e: KeyboardEvent) => e.key === 'Escape' && this._closePreview(e)}
+        @click=${this._handleDialogClick}
       >
         <img src=${this._activeSrc} alt=${this.imageTitle} @click=${(e: Event) => e.stopPropagation()} />
-      </div>
+      </dialog>
     `;
   }
 }

package/src/index.ts

@@ -39,6 +39,7 @@ export { Popover, PopoverContent } from './popover/index.js';
 export { Breadcrumb, BreadcrumbItem } from './breadcrumb/index.js';
 export { Menu, MenuItem, SubMenu } from './menu/index.js';
 export { List, ListItem } from './list/index.js';
+export { Item } from './item/index.js';
 
 export { CodeHighlighter } from './code-highlighter/index.js';
 export { CodeEditor } from './code-editor/index.js';