@redvars/peacock 3.8.1 → 3.8.2

package/src/button/button/button.ts

@@ -1,26 +1,39 @@
 import { html, LitElement, nothing } from 'lit';
-import { property } from 'lit/decorators.js';
+import { property, query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { when } from 'lit/directives/when.js';
 import IndividualComponent from '@/IndividualComponent.js';
 import styles from './button.scss';
-import onlyButton from './only-button.scss';
-import buttonLayers from './button-layers.scss';
-import colorStyles from './button-colors.scss';
-import sizeStyles from './button-sizes.scss';
-import { throttle } from '@/__utils/throttle.js';
-import { spread } from '@/__directive/spread.js';
-import { isLink } from '@/__utils/is-link.js';
-import { observerSlotChangesWithCallback } from '@/__utils/observe-slot-change.js';
-import NativeButtonMixin from '@/__mixins/NativeButtonMixin.js';
-import NativeHyperlinkMixin from '@/__mixins/NativeHyperlinkMixin.js';
-import { GroupButtonInterface } from '@/button/GroupButtonInterface.js';
+
+import type {
+  ButtonSize,
+  ButtonLevel,
+  ButtonShape,
+  ButtonVariant,
+  ButtonColor,
+} from '@/button/ButtonTypes.js';
+import { isLink } from '@/__internal/utils/is-link.js';
+import { observerSlotChangesWithCallback } from '@/__internal/utils/observe-slot-change.js';
 import {
   dispatchActivationClick,
   isActivationClick,
-} from '@/__utils/dispatch-event-utils.js';
+} from '@/__internal/utils/dispatch-event-utils.js';
 import { DISABLED_REASON_ID } from '@/button/ButtonConstants.js';
+import { mixinDelegatesAria } from '@/__internal/aria/delegate.js';
+import { ARIAMixinStrict } from '@/__internal/aria/aria.js';
+import { mixinFormSubmitter } from '@/__internal/mixins/form-submitter.js';
+import { mixinElementInternals } from '@/__internal/mixins/element-internals.js';
+import { mixinBaseButton } from '../base-button/base-button.js';
+import { mixinFormAssociated } from '@/__internal/mixins/form-associated.js';
+import { mixinHyperlink } from '@/__internal/mixins/hyperlink.js';
+export type {
+  ButtonSize,
+  ButtonLevel,
+  ButtonShape,
+  ButtonVariant,
+  ButtonColor,
+} from '@/button/ButtonTypes.js';
 
 /**
  * @label Button
@@ -65,17 +78,26 @@ import { DISABLED_REASON_ID } from '@/button/ButtonConstants.js';
  * @tags display
  */
 @IndividualComponent
-export class Button
-  extends NativeButtonMixin(NativeHyperlinkMixin(LitElement))
-  implements GroupButtonInterface
-{
-  static override styles = [
-    buttonLayers,
-    styles,
-    onlyButton,
-    sizeStyles,
-    colorStyles,
-  ];
+export class Button extends mixinBaseButton(
+  mixinHyperlink(
+    mixinDelegatesAria(
+      mixinFormSubmitter(
+        mixinFormAssociated(mixinElementInternals(LitElement)),
+      ),
+    ),
+  ),
+) {
+  // ── Static ───────────────────────────────────────────────────────────────
+
+  /** @nocollapse */ // eslint-disable-next-line
+  static override shadowRootOptions: ShadowRootInit = {
+    mode: 'open',
+    delegatesFocus: true,
+  };
+
+  static override styles = [styles];
+
+  // ── Properties ───────────────────────────────────────────────────────────
 
   /**
    * Icon alignment.
@@ -88,13 +110,15 @@ export class Button
    * Button size.
    * Possible values are `"xs"`, `"sm"`, `"md"`, `"lg"`, `"xl"`. Defaults to `"sm"`.
    */
-  @property({ reflect: true }) size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'sm';
+  @property({ reflect: true }) size: ButtonSize = 'sm';
 
   /**
-   * Type is preset of color and variant. Type will be only applied.
-   *
+   * Level is preset of color and variant. If Level provided it overrides the default color and variant.
    */
-  @property({ type: String }) type?: 'primary' | 'secondary' | 'tertiary';
+  @property({ type: String }) level?: ButtonLevel;
+
+  /** Shape of the button container. */
+  @property({ type: String, reflect: true }) shape: ButtonShape = 'square';
 
   /**
    * The visual style of the button.
@@ -106,45 +130,64 @@ export class Button
    * `"tonal"` is a light color button.
    * `"elevated"` is elevated button
    */
-  @property({ reflect: true }) variant:
-    | 'elevated'
-    | 'filled'
-    | 'tonal'
-    | 'outlined'
-    | 'text'
-    | 'neo' = 'filled';
+  @property({ reflect: true }) variant: ButtonVariant = 'filled';
 
   /**
    * Defines the primary color of the button. This can be set to predefined color names to apply specific color themes.
    */
-  @property({ reflect: true }) color:
-    | 'primary'
-    | 'success'
-    | 'danger'
-    | 'warning'
-    | 'surface'
-    | 'on-surface' = 'primary';
+  @property({ reflect: true }) color: ButtonColor = 'primary';
 
-  /**
-   * Additional ARIA attributes to pass to the inner button/anchor element.
-   */
-  @property({ reflect: true })
-  configAria?: { [key: string]: any };
+  /** When true, renders the button in a loading skeleton state. */
+  @property({ type: Boolean, reflect: true }) skeleton: boolean = false;
 
-  override focus() {
-    this.getControl()?.focus();
-  }
+  /** When true, the button acts as a toggle. Use with `selected`. */
+  @property({ type: Boolean, reflect: true }) toggle: boolean = false;
 
-  override blur() {
-    this.getControl()?.blur();
+  /** When true (and `toggle` is set), the button is in the selected/pressed state. */
+  @property({ type: Boolean, reflect: true }) selected: boolean = false;
+
+  /** Optional tooltip text displayed on hover. */
+  @property() tooltip?: string;
+
+  // ── Queries ───────────────────────────────────────────────────────────────
+
+  @query('.button') private readonly buttonElement!: HTMLElement | null;
+
+  // ── Private fields ────────────────────────────────────────────────────────
+
+  /** Cleanup returned by observerSlotChangesWithCallback for the icon slot. */
+  private __iconSlotCleanup: (() => void) | null = null;
+
+  /** Cleanup returned by observerSlotChangesWithCallback for the label slot. */
+  private __labelSlotCleanup: (() => void) | null = null;
+
+  // ── Constructor ───────────────────────────────────────────────────────────
+
+  constructor() {
+    super();
+    this.addEventListener('click', this.__dispatchClickWithThrottle);
   }
 
-  override firstUpdated() {
-    this.__dispatchClickWithThrottle = throttle(
-      this.__dispatchClick,
-      this.throttleDelay,
-    );
+  // ── Lifecycle ─────────────────────────────────────────────────────────────
 
+  override disconnectedCallback() {
+    // disconnect slot observers first to avoid callbacks during teardown
+    try {
+      this.__iconSlotCleanup?.();
+    } catch (e) {
+      /* ignore */
+    }
+    try {
+      this.__labelSlotCleanup?.();
+    } catch (e) {
+      /* ignore */
+    }
+
+    super.disconnectedCallback();
+  }
+
+  override firstUpdated(changedProperties: Map<PropertyKey, unknown>) {
+    super.firstUpdated(changedProperties);
     this.__convertTypeToVariantAndColor();
     // Initialize slot presence tracking for smooth transitions when label/icon are added/removed
     const iconSlot = this.renderRoot.querySelector(
@@ -174,43 +217,53 @@ export class Button
     }
   }
 
+  // ── Public methods ────────────────────────────────────────────────────────
+
+  override focus() {
+    this.buttonElement?.focus();
+  }
+
+  override blur() {
+    this.buttonElement?.blur();
+  }
+
+  // ── Private methods ───────────────────────────────────────────────────────
+
   __convertTypeToVariantAndColor() {
-    if (this.type === 'primary') {
+    if (this.level === 'primary') {
       this.color = 'primary';
       this.variant = 'filled';
-    } else if (this.type === 'secondary') {
+    } else if (this.level === 'secondary') {
       this.color = 'surface';
-      this.variant = 'filled';
-    } else if (this.type === 'tertiary') {
+      this.variant = 'tonal';
+    } else if (this.level === 'tertiary') {
       this.color = 'primary';
       this.variant = 'text';
-    } else if (this.type === 'danger') {
+    } else if (this.level === 'danger') {
       this.color = 'danger';
       this.variant = 'filled';
     }
   }
 
-  override render() {
-    const buttonId = isLink(this) ? 'link' : 'button';
+  __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
+    // prevent the default action.
+    if (this.softDisabled || (this.disabled && this.href) || this.skeleton) {
+      event.stopImmediatePropagation();
+      event.preventDefault();
+      return;
+    }
 
-    return html`
-      <wc-focus-ring class="focus-ring" for=${buttonId}></wc-focus-ring>
-      <wc-elevation class="elevation"></wc-elevation>
-      ${when(
-        this.variant === 'neo',
-        () => html`<div class="neo-background"></div>`,
-      )}
-      <div class="background"></div>
-      ${when(
-        this.variant === 'outlined' || this.variant === 'neo',
-        () => html`<div class="outline"></div>`,
-      )}
-      <wc-ripple class="ripple" for=${buttonId}></wc-ripple>
-      <wc-skeleton class="skeleton"></wc-skeleton>
+    if (!isActivationClick(event) || !this.buttonElement) {
+      return;
+    }
 
-      ${this.renderButtonElement()} ${this.__renderTooltip()}
-    `;
-  }
+    this.focus();
+    dispatchActivationClick(this.buttonElement);
+  };
+
+  // ── Render helpers ────────────────────────────────────────────────────────
 
   renderButtonElement() {
     const isElementLink = isLink(this);
@@ -222,6 +275,9 @@ export class Button
       'trailing-icon': this.trailingIcon,
     };
 
+    // Needed for closure conformance
+    const { ariaLabel, ariaHasPopup, ariaExpanded } = this as ARIAMixinStrict;
+
     if (isElementLink) {
       return html`<a
         class=${classMap(cssClasses)}
@@ -229,16 +285,13 @@ export class Button
         href=${this.href}
         target=${this.target}
         tabindex=${this.disabled ? '-1' : '0'}
-        @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.renderButtonContent()}
       </a>`;
@@ -246,21 +299,18 @@ export class Button
     return html`<button
         class=${classMap(cssClasses)}
         id="button"
-        type=${this.htmlType}
-        @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.renderButtonContent()}
       </button>
-      ${this.__renderTooltip()}`;
+      ${this.renderTooltip()}`;
   }
 
   renderButtonContent() {
@@ -268,106 +318,10 @@ export class Button
       <slot class="label"></slot>
       <div class="touch"></div>
 
-      ${this.__renderDisabledReason(this.softDisabled)}`;
+      ${this.renderDisabledReason(this.softDisabled)}`;
   }
 
-  @property({ type: Boolean, reflect: true }) skeleton: boolean = false;
-
-  @property({ type: Boolean, reflect: true }) toggle: boolean = false;
-
-  @property({ type: Boolean, reflect: true }) selected: boolean = false;
-
-  /**
-   * Sets the delay for throttle in milliseconds. Defaults to 200 milliseconds.
-   */
-  @property() throttleDelay = 200;
-
-  @property() tooltip?: string;
-
-  /**
-   * States
-   */
-  @property({ type: Boolean, reflect: true })
-  pressed = false;
-
-  // Query the internal control (button or link) on demand instead of
-  // keeping a persistent query reference.
-
-  // cleanup functions returned by observerSlotChangesWithCallback
-  private __iconSlotCleanup: (() => void) | null = null;
-
-  private __labelSlotCleanup: (() => void) | null = null;
-
-  override connectedCallback() {
-    super.connectedCallback();
-    this.addEventListener('click', this.__dispatchClickWithThrottle);
-    window.addEventListener('mouseup', this.__handlePress);
-  }
-
-  override disconnectedCallback() {
-    // disconnect slot observers first to avoid callbacks during teardown
-    try {
-      this.__iconSlotCleanup?.();
-    } catch (e) {
-      /* ignore */
-    }
-    try {
-      this.__labelSlotCleanup?.();
-    } catch (e) {
-      /* ignore */
-    }
-
-    window.removeEventListener('mouseup', this.__handlePress);
-    this.removeEventListener('click', this.__dispatchClickWithThrottle);
-    super.disconnectedCallback();
-  }
-
-  __handlePress = (event: KeyboardEvent | MouseEvent) => {
-    if (this.disabled || this.skeleton || this.softDisabled) return;
-    this.pressed =
-      (event instanceof KeyboardEvent &&
-        event.type === 'keydown' &&
-        (event.key === 'Enter' || event.key === ' ')) ||
-      event.type === 'mousedown';
-  };
-
-  __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
-    // prevent the default action.
-    if (this.softDisabled || (this.disabled && this.href) || this.skeleton) {
-      event.stopImmediatePropagation();
-      event.preventDefault();
-      return;
-    }
-
-    const control = this.getControl();
-
-    if (!isActivationClick(event) || !control) {
-      return;
-    }
-
-    if (this.toggle) {
-      this.selected = !this.selected;
-    }
-
-    this.focus();
-    dispatchActivationClick(control);
-  };
-
-  private getControl(): HTMLElement | null {
-    return (
-      (this.renderRoot?.querySelector('#button') as HTMLElement | null) ??
-      (this.renderRoot?.querySelector('#link') as HTMLElement | null)
-    );
-  }
-
-  __renderDisabledReason(softDisabled: boolean) {
+  renderDisabledReason(softDisabled: boolean) {
     if (softDisabled)
       return html`<div
         id=${DISABLED_REASON_ID}
@@ -380,11 +334,37 @@ export class Button
     return nothing;
   }
 
-  __renderTooltip() {
+  renderTooltip() {
     if (this.tooltip) {
       const buttonId = isLink(this) ? 'link' : 'button';
-      return html`<wc-tooltip class="tooltip" for=${buttonId}>${this.tooltip}</wc-tooltip>`;
+      return html`<wc-tooltip class="tooltip" for=${buttonId}
+        >${this.tooltip}</wc-tooltip
+      >`;
     }
     return nothing;
   }
+
+  // ── Render ────────────────────────────────────────────────────────────────
+
+  override render() {
+    const buttonId = isLink(this) ? 'link' : 'button';
+
+    return html`
+      <wc-focus-ring class="focus-ring" for=${buttonId}></wc-focus-ring>
+      <wc-elevation class="elevation"></wc-elevation>
+      ${when(
+        this.variant === 'neo',
+        () => html`<div class="neo-background"></div>`,
+      )}
+      <div class="background"></div>
+      ${when(
+        this.variant === 'outlined' || this.variant === 'neo',
+        () => html`<div class="outline"></div>`,
+      )}
+      <wc-ripple class="ripple" for=${buttonId}></wc-ripple>
+      <wc-skeleton class="skeleton"></wc-skeleton>
+
+      ${this.renderButtonElement()} ${this.renderTooltip()}
+    `;
+  }
 }

package/src/button/button-group/button-group.scss

@@ -4,61 +4,68 @@
 
 $border-width: 0.0625rem;
 
-.button-group {
+:host {
+  --button-group-spacing: unset;
   display: flex;
-  gap: var(--_button-group-gap);
+  gap: var(--button-group-spacing, var(--private-button-group-spacing));
 }
 
-
 // Size-specific rules (can be overridden by variant rules below)
-.button-group.size-xs,
-.button-group.size-extra-small {
-  --_button-group-gap: 0.125rem;
-}
-
-
-.button-group.size-sm,
-.button-group.size-small {
-  --_button-group-gap: 0.125rem;
-  --button-container-padding: 1.5rem;
-}
-
-.button-group.size-md,
-.button-group.size-medium {
-  --_button-group-gap: 0.125rem;
+:host([size='xs']),
+:host([size='extra-small']) {
+  --private-button-group-spacing: var(--spacing-200);
 }
 
-.button-group.size-lg,
-.button-group.size-large {
-  --_button-group-gap: 0.125rem;
+:host([size='sm']),
+:host([size='small']) {
+  --private-button-group-spacing: var(--spacing-150);
 }
 
-.button-group.size-xl {
-  --_button-group-gap: 0.125rem;
+:host([size='md']),
+:host([size='medium']),
+:host([size='lg']),
+:host([size='large']),
+:host([size='xl']),
+:host([size='extra-large']) {
+  --private-button-group-spacing: var(--spacing-100);
 }
 
-
 // Standard variant: buttons with a visible gap, each keeping their own shape
-.button-group.variant-standard {
-  --_button-group-gap: 0.5rem;
+:host([connected]) {
+  --private-button-group-spacing: var(--spacing-025);
 }
 
-
 // Connected variant: buttons with a 2px gap; outer buttons have fully rounded outer
 // corners while middle buttons keep standard rounded corners (handled via JS for
 // per-position corner overrides, including vertical orientation).
-.button-group.variant-connected {
-  --_button-group-gap: 0.125rem;
+:host([connected]) slot::slotted(*) {
+  --button-container-shape-start-start: var(--shape-corner-medium);
+  --button-container-shape-end-start: var(--shape-corner-medium);
+  --button-container-shape-start-end: var(--shape-corner-medium);
+  --button-container-shape-end-end: var(--shape-corner-medium);
+  --button-container-shape-variant: round;
 }
 
-
-// Orientation
-.button-group.orientation-horizontal {
-  flex-direction: row;
+:host([connected]) slot::slotted(:first-child:not([selected])) {
+  --button-container-shape-start-start: calc(var(--button-height) / 2);
+  --button-container-shape-end-start: calc(var(--button-height) / 2);
+  --button-container-shape-start-end: var(--shape-corner-medium);
+  --button-container-shape-end-end: var(--shape-corner-medium);
+  --button-container-shape-variant: round;
 }
 
-.button-group.orientation-vertical {
-  flex-direction: column;
+:host([connected]) slot::slotted(:last-child:not([selected])) {
+  --button-container-shape-start-start: var(--shape-corner-medium);
+  --button-container-shape-end-start: var(--shape-corner-medium);
+  --button-container-shape-start-end: calc(var(--button-height) / 2);
+  --button-container-shape-end-end: calc(var(--button-height) / 2);
+  --button-container-shape-variant: round;
 }
 
-
+:host([connected]) slot::slotted(:only-child:not([selected])) {
+  --button-container-shape-start-start: var(--shape-corner-medium);
+  --button-container-shape-end-start: var(--shape-corner-medium);
+  --button-container-shape-start-end: var(--shape-corner-medium);
+  --button-container-shape-end-end: var(--shape-corner-medium);
+  --button-container-shape-variant: round;
+}