@redvars/peacock 3.8.0 → 3.8.2

package/src/{fab → button/fab}/fab.ts

@@ -1,4 +1,4 @@
-import { html, LitElement, nothing } from 'lit';
+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';
@@ -7,17 +7,19 @@ import IndividualComponent from '@/IndividualComponent.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';
-
+} from '@/__internal/utils/dispatch-event-utils.js';
+import { isLink } from '@/__internal/utils/is-link.js';
 import styles from './fab.scss';
 import colorStyles from './fab-colors.scss';
 import sizeStyles from './fab-sizes.scss';
-import NativeButtonMixin from '@/__mixins/NativeButtonMixin.js';
-import NativeHyperlinkMixin from '@/__mixins/NativeHyperlinkMixin.js';
 import { DISABLED_REASON_ID } from '@/button/ButtonConstants.js';
+import { mixinBaseButton } from '../base-button/base-button.js';
+import { mixinDelegatesAria } from '@/__internal/aria/delegate.js';
+import { mixinFormSubmitter } from '@/__internal/mixins/form-submitter.js';
+import { mixinHyperlink } from '@/__internal/mixins/hyperlink.js';
+import { mixinElementInternals } from '@/__internal/mixins/element-internals.js';
+import { mixinFormAssociated } from '@/__internal/mixins/form-associated.js';
+import { ARIAMixinStrict } from '@/__internal/aria/aria.js';
 
 /**
  * @label FAB
@@ -26,7 +28,7 @@ import { DISABLED_REASON_ID } from '@/button/ButtonConstants.js';
  *
  * @summary The FAB (Floating Action Button) represents the primary action on a screen.
  * @overview
- * <p>A Floating Action Button (FAB) is a circular button that represents the primary action on a screen. It follows the Material Design 3 specification and supports four color roles and two variants.</p>
+ * <p>A Floating Action Button (FAB) is a circular button that represents the primary action on a screen. It follows the specification and supports four color roles and two variants.</p>
  *
  * @cssprop --fab-container-color: Background color of the FAB container.
  * @cssprop --fab-label-text-color: Text and icon color of the FAB label.
@@ -42,10 +44,24 @@ import { DISABLED_REASON_ID } from '@/button/ButtonConstants.js';
  * @tags controls
  */
 @IndividualComponent
-export class Fab extends NativeButtonMixin(NativeHyperlinkMixin(LitElement)) {
-  static override styles = [styles, colorStyles, sizeStyles];
+export class Fab extends mixinBaseButton(
+  mixinHyperlink(
+    mixinDelegatesAria(
+      mixinFormSubmitter(
+        mixinFormAssociated(mixinElementInternals(LitElement)),
+      ),
+    ),
+  ),
+) {
+  // ── Static ───────────────────────────────────────────────────────────────
+
+  /** @nocollapse */ // eslint-disable-next-line
+  static override shadowRootOptions: ShadowRootInit = {
+    mode: 'open',
+    delegatesFocus: true,
+  };
 
-  #id = crypto.randomUUID();
+  static override styles = [styles, colorStyles, sizeStyles];
 
   /**
    * Optional label text for the extended FAB variant.
@@ -86,17 +102,6 @@ export class Fab extends NativeButtonMixin(NativeHyperlinkMixin(LitElement)) {
    */
   @property({ type: Boolean, reflect: true }) lowered: boolean = false;
 
-  /**
-   * Additional ARIA attributes to pass to the inner button/anchor element.
-   */
-  @property({ reflect: true })
-  configAria?: { [key: string]: any };
-
-  /**
-   * Sets the delay for throttle in milliseconds. Defaults to 200 milliseconds.
-   */
-  @property() throttleDelay = 200;
-
   /**
    * Tooltip text shown on hover.
    */
@@ -108,46 +113,13 @@ export class Fab extends NativeButtonMixin(NativeHyperlinkMixin(LitElement)) {
 
   @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();
+  constructor() {
+    super();
     this.addEventListener('click', this.__dispatchClickWithThrottle);
-    window.addEventListener('mouseup', this.__handlePress);
-  }
-
-  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 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
@@ -170,7 +142,15 @@ export class Fab extends NativeButtonMixin(NativeHyperlinkMixin(LitElement)) {
     dispatchActivationClick(this.buttonElement);
   };
 
-  __renderDisabledReason(softDisabled: boolean) {
+  override focus() {
+    this.buttonElement?.focus();
+  }
+
+  override blur() {
+    this.buttonElement?.blur();
+  }
+
+  renderDisabledReason(softDisabled: boolean) {
     if (softDisabled)
       return html`<div
         id=${DISABLED_REASON_ID}
@@ -183,45 +163,18 @@ export class Fab extends NativeButtonMixin(NativeHyperlinkMixin(LitElement)) {
     return nothing;
   }
 
-  __renderTooltip() {
+  renderTooltip() {
     if (this.tooltip) {
-      return html`<wc-tooltip class="tooltip"  for="button"
+      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 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 { ariaLabel, ariaHasPopup, ariaExpanded } = this as ARIAMixinStrict;
 
-  __renderFabElement(isExtended: boolean) {
     const cssClasses = {
       button: true,
       fab: true,
@@ -232,7 +185,6 @@ export class Fab extends NativeButtonMixin(NativeHyperlinkMixin(LitElement)) {
       extended: isExtended,
       lowered: this.lowered,
       disabled: this.disabled,
-      pressed: this.pressed,
     };
 
     if (!isLink(this)) {
@@ -240,18 +192,16 @@ export class Fab extends NativeButtonMixin(NativeHyperlinkMixin(LitElement)) {
         class=${classMap(cssClasses)}
         id="button"
         type="button"
-        @click=${this.__dispatchClickWithThrottle}
-        @mousedown=${this.__handlePress}
-        @keydown=${this.__handlePress}
-        @keyup=${this.__handlePress}
+        aria-label="${ariaLabel || nothing}"
+        aria-haspopup="${ariaHasPopup || nothing}"
+        aria-expanded="${ariaExpanded || nothing}"
         aria-describedby=${ifDefined(
           this.softDisabled ? DISABLED_REASON_ID : undefined,
         )}
         ?aria-disabled=${this.softDisabled}
         ?disabled=${this.disabled}
-        ${spread(this.configAria)}
       >
-        ${this.__renderFabContent(isExtended)}
+        ${this.renderFabContent(isExtended)}
       </button>`;
     }
 
@@ -261,22 +211,20 @@ export class Fab extends NativeButtonMixin(NativeHyperlinkMixin(LitElement)) {
       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-label="${ariaLabel || nothing}"
+      aria-haspopup="${ariaHasPopup || nothing}"
+      aria-expanded="${ariaExpanded || nothing}"
       aria-describedby=${ifDefined(
         this.softDisabled ? DISABLED_REASON_ID : undefined,
       )}
       ?aria-disabled=${this.softDisabled}
-      ${spread(this.configAria)}
     >
-      ${this.__renderFabContent(isExtended)}
+      ${this.renderFabContent(isExtended)}
     </a>`;
   }
 
-  __renderFabContent(isExtended: boolean) {
+  renderFabContent(isExtended: boolean) {
     return html`
       <div class="fab-content">
         <slot></slot>
@@ -284,7 +232,23 @@ export class Fab extends NativeButtonMixin(NativeHyperlinkMixin(LitElement)) {
           ? html`<span class="fab-label">${this.label}</span>`
           : nothing}
       </div>
-      ${this.__renderDisabledReason(this.softDisabled)}
+      ${this.renderDisabledReason(this.softDisabled)}
+    `;
+  }
+
+  // ── Render ────────────────────────────────────────────────────────────────
+
+  override render() {
+    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()}
     `;
   }
 }

package/src/button/icon-button/icon-button-sizes.scss

@@ -5,7 +5,7 @@
 }
 
 .button {
-  width: var(--button-height);
+  width: var(--button-width, var(--button-height));
 
   --private-button-container-padding: 0.75rem;
   --private-button-container-padding: 0;
@@ -14,14 +14,29 @@
 :host([size='xs']),
 :host([size='extra-small']) {
   --button-height: 2rem;
-  --private-button-icon-size: 1rem;
-}
+  --private-button-icon-size: 1.25rem;
+
+  &:host([shape='narrow']) {
+    --button-width: 1.75rem;
+  }
 
+  &:host([shape='wide']) {
+    --button-width: 2rem;
+  }
+}
 
 :host([size='sm']),
 :host([size='small']) {
   --button-height: 2.5rem;
   --private-button-icon-size: 1.25rem;
+
+  &:host([shape='narrow']) {
+    --button-width: 2rem;
+  }
+
+  &:host([shape='wide']) {
+    --button-width: 3.25rem;
+  }
 }
 
 :host([size='md']),

package/src/button/icon-button/icon-button.scss

@@ -0,0 +1,5 @@
+@use '../button/button-layers.scss';
+@use '../button/button-base.scss';
+@use '../button/button-shapes.scss';
+@use '../button/button-colors.scss';
+@use './icon-button-sizes.scss';