@redvars/peacock 3.6.3 → 3.8.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/flow-designer/flow-designer-node.ts

@@ -10,7 +10,6 @@ import type { WorkflowNode } from './types.js';
  *
  * @tag wc-flow-designer-node
  * @rawTag flow-designer-node
- * @parentRawTag flow-designer
  * @wip true
  */
 @IndividualComponent

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/item/item.scss

@@ -3,9 +3,31 @@
 @include mixin.base-styles;
 
 :host {
+  position: relative;
   display: block;
   padding-inline: var(--spacing-050);
   --item-height: 3.5rem;
+
+  --item-container-color: transparent;
+  --item-label-text-color: var(--color-on-surface);
+  --item-leading-trailing-color: var(--color-on-surface-variant);
+  --item-supporting-text-color: var(--color-on-surface-variant);
+
+  --item-container-selected-color: var(--color-tertiary-container);
+  --item-label-text-selected-color: var(--color-on-tertiary-container);
+
+  --private-item-container-color: var(--item-container-color);
+  --private-item-label-text-color: var(--item-label-text-color);
+  --private-item-leading-trailing-color: var(--item-leading-trailing-color);
+  --private-item-supporting-text-color: var(--item-supporting-text-color);
+
+  --private-item-container-state-color: var(--private-item-label-text-color);
+
+  --private-item-container-shape-start-start: var(--item-container-shape-start-start, var(--shape-corner-extra-small));
+  --private-item-container-shape-start-end: var(--item-container-shape-start-end, var(--shape-corner-extra-small));
+  --private-item-container-shape-end-start: var(--item-container-shape-end-start, var(--shape-corner-extra-small));
+  --private-item-container-shape-end-end: var(--item-container-shape-end-end, var(--shape-corner-extra-small));
+  --private-item-container-shape-variant: var(--item-container-shape-variant, none);
 }
 
 /**
@@ -19,18 +41,12 @@
 }
 
 .item {
-  position: relative;
   min-height: var(--item-height);
   width: 100%;
   background: transparent;
   text-align: initial;
   cursor: pointer;
-
-  --private-item-container-shape-start-start: var(--item-container-shape-start-start, var(--shape-corner-extra-small));
-  --private-item-container-shape-start-end: var(--item-container-shape-start-end, var(--shape-corner-extra-small));
-  --private-item-container-shape-end-start: var(--item-container-shape-end-start, var(--shape-corner-extra-small));
-  --private-item-container-shape-end-end: var(--item-container-shape-end-end, var(--shape-corner-extra-small));
-  --private-item-container-shape-variant: var(--item-container-shape-variant, none);
+  z-index: 0;
 
   font-family: var(--item-label-font-family, var(--typography-body-large-font-family)) !important;
   font-size:  var(--item-label-font-size, var(--typography-body-large-font-size)) !important;
@@ -112,73 +128,68 @@
     white-space: nowrap;
     color: var(--private-item-supporting-text-color);
   }
+}
 
-  .background {
-    position: absolute;
-    inset: 0;
-    background-color: var(--private-item-container-color);
-    opacity: var(--private-item-container-opacity, 1);
-    pointer-events: none;
-
-    @include mixin.apply-container-shape(private-item);
-  }
-
-  .focus-ring {
-    z-index: 2;
-    @include mixin.copy-container-shape(private-item, focus-ring);
-    
-  }
+/*
+  Background layers
+ */
+.background {
+  position: absolute;
+  inset: 0;
+  background-color: var(--private-item-container-color);
+  opacity: var(--private-item-container-opacity, 1);
+  pointer-events: none;
+  border-start-start-radius: var(--private-item-container-shape-start-start, var(--private-item-container-shape));
+  border-start-end-radius: var(--private-item-container-shape-start-end, var(--private-item-container-shape));
+  border-end-start-radius: var(--private-item-container-shape-end-start, var(--private-item-container-shape));
+  border-end-end-radius: var(--private-item-container-shape-end-end, var(--private-item-container-shape));
+  corner-shape: var(--private-item-container-shape-variant);
+}
 
-  .ripple {
-    @include mixin.apply-container-shape(private-item);
-    --ripple-state-opacity: var(--private-item-container-state-opacity, 0);
-    --ripple-pressed-color: var(--private-item-container-state-color);
-  }
+.focus-ring {
+  z-index: 2;
+  --focus-ring-container-shape-start-start: var(--private-item-container-shape-start-start, var(--private-item-container-shape));
+  --focus-ring-container-shape-start-end: var(--private-item-container-shape-start-end, var(--private-item-container-shape));
+  --focus-ring-container-shape-end-start: var(--private-item-container-shape-end-start, var(--private-item-container-shape));
+  --focus-ring-container-shape-end-end: var(--private-item-container-shape-end-end, var(--private-item-container-shape));
+  --focus-ring-container-shape-variant: var(--private-item-container-shape-variant);
 }
 
-.item {
-  --private-item-container-color: var(--item-container-color);
-  --private-item-label-text-color: var(--item-label-text-color);
-  --private-item-leading-trailing-color: var(--item-leading-trailing-color);
-  --private-item-supporting-text-color: var(--item-supporting-text-color);
+.ripple {
+  border-start-start-radius: var(--private-item-container-shape-start-start, var(--private-item-container-shape));
+  border-start-end-radius: var(--private-item-container-shape-start-end, var(--private-item-container-shape));
+  border-end-start-radius: var(--private-item-container-shape-end-start, var(--private-item-container-shape));
+  border-end-end-radius: var(--private-item-container-shape-end-end, var(--private-item-container-shape));
+  corner-shape: var(--private-item-container-shape-variant);
+  --ripple-state-opacity: var(--private-item-container-state-opacity, 0);
+  --ripple-pressed-color: var(--private-item-container-state-color);
+}
 
-  --private-item-container-state-color: var(--private-item-label-text-color);
+/* State management */
+:host:hover:not([disabled], [selected]) {
+  --private-item-container-state-opacity: 0.08;
+}
 
-  &:hover:not(:where(.disabled, .selected)) {
-    --private-item-container-state-opacity: 0.08;
-  }
+:host:has(.item.pressed):not([disabled]) {
+  --private-item-container-state-opacity: 0.12;
+}
 
-  &.pressed:not(:where(.disabled)) {
-    --private-item-container-state-opacity: 0.12;
-  }
+:host([selected]) {
+  --private-item-container-color: var(--item-container-selected-color);
+  --private-item-label-text-color: var(--item-label-text-selected-color);
+  --private-item-leading-trailing-color: var(--item-label-text-selected-color);
+  --private-item-supporting-text-color: var(--item-label-text-selected-color);
+}
 
-  &.selected {
-    --private-item-container-color: var(--item-container-selected-color);
-    --private-item-label-text-color: var(--item-label-text-selected-color);
-    --private-item-leading-trailing-color: var(--item-label-text-selected-color);
-    --private-item-supporting-text-color: var(--item-label-text-selected-color);
-  }
+:host([disabled]) {
+  cursor: not-allowed;
+  --private-item-label-text-color: var(--color-on-surface);
+  --private-item-label-text-opacity: 0.38;
+  --private-item-leading-trailing-color: var(--color-on-surface);
+  --private-item-supporting-text-color: var(--color-on-surface);
+  --private-item-container-opacity: 0.12;
 
-  &.disabled {
-    cursor: not-allowed;
-    --private-item-label-text-color: var(--color-on-surface);
-    --private-item-label-text-opacity: 0.38;
-    --private-item-leading-trailing-color: var(--color-on-surface);
-    --private-item-supporting-text-color: var(--color-on-surface);
-    --private-item-container-opacity: 0.12;
-
-    .ripple {
-      display: none;
-    }
+  .ripple {
+    display: none;
   }
 }
-
-:host {
-  --item-container-color: transparent;
-  --item-label-text-color: var(--color-on-surface);
-  --item-leading-trailing-color: var(--color-on-surface-variant);
-  --item-supporting-text-color: var(--color-on-surface-variant);
-
-  --item-container-selected-color: var(--color-tertiary-container);
-  --item-label-text-selected-color: var(--color-on-tertiary-container);
-}