@redvars/peacock 3.6.2 → 3.7.0

package/src/button/button/button.ts

@@ -1,15 +1,26 @@
-import { html } from 'lit';
-import { property, state } from 'lit/decorators.js';
+import { html, LitElement, nothing } from 'lit';
+import { property } 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 { observerSlotChangesWithCallback } from '@/__utils/observe-slot-change.js';
 import { throttle } from '@/__utils/throttle.js';
 import { spread } from '@/__directive/spread.js';
-import { BaseButton } from '../BaseButton.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 {
+  dispatchActivationClick,
+  isActivationClick,
+} from '@/__utils/dispatch-event-utils.js';
+import { DISABLED_REASON_ID } from '@/button/ButtonConstants.js';
 
 /**
  * @label Button
@@ -54,15 +65,24 @@ import { BaseButton } from '../BaseButton.js';
  * @tags display
  */
 @IndividualComponent
-export class Button extends BaseButton {
-  static override styles = [styles, colorStyles, sizeStyles];
+export class Button
+  extends NativeButtonMixin(NativeHyperlinkMixin(LitElement))
+  implements GroupButtonInterface
+{
+  static override styles = [
+    buttonLayers,
+    styles,
+    onlyButton,
+    sizeStyles,
+    colorStyles,
+  ];
 
   /**
    * Icon alignment.
    * Possible values are `"start"`, `"end"`. Defaults to `"end"`.
    */
-  @property({ attribute: 'icon-align' })
-  iconAlign: 'start' | 'end' = 'end';
+  @property({ type: Boolean, reflect: true, attribute: 'trailing-icon' })
+  trailingIcon = false;
 
   /**
    * Button size.
@@ -71,39 +91,39 @@ export class Button extends BaseButton {
   @property({ reflect: true }) size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'sm';
 
   /**
-     * Type is preset of color and variant. Type will be only applied.
-     *
-     */
-    @property({ type: String }) type?: 'primary' | 'secondary' | 'tertiary';
-  
-    /**
-     * The visual style of the button.
-     *
-     *  Possible variant values:
-     * `"filled"` is a filled button.
-     * `"outlined"` is an outlined button.
-     * `"text"` is a transparent button.
-     * `"tonal"` is a light color button.
-     * `"elevated"` is elevated button
-     */
-    @property() variant:
-      | 'elevated'
-      | 'filled'
-      | 'tonal'
-      | 'outlined'
-      | 'text'
-      | 'neo' = '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';
+   * Type is preset of color and variant. Type will be only applied.
+   *
+   */
+  @property({ type: String }) type?: 'primary' | 'secondary' | 'tertiary';
+
+  /**
+   * The visual style of the button.
+   *
+   *  Possible variant values:
+   * `"filled"` is a filled button.
+   * `"outlined"` is an outlined button.
+   * `"text"` is a transparent button.
+   * `"tonal"` is a light color button.
+   * `"elevated"` is elevated button
+   */
+  @property({ reflect: true }) variant:
+    | 'elevated'
+    | 'filled'
+    | 'tonal'
+    | 'outlined'
+    | 'text'
+    | 'neo' = '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';
 
   /**
    * Additional ARIA attributes to pass to the inner button/anchor element.
@@ -111,15 +131,12 @@ export class Button extends BaseButton {
   @property({ reflect: true })
   configAria?: { [key: string]: any };
 
-  @state()
-  private slotHasContent = false;
-
   override focus() {
-    this.buttonElement?.focus();
+    this.getControl()?.focus();
   }
 
   override blur() {
-    this.buttonElement?.blur();
+    this.getControl()?.blur();
   }
 
   override firstUpdated() {
@@ -127,15 +144,34 @@ export class Button extends BaseButton {
       this.__dispatchClick,
       this.throttleDelay,
     );
-    observerSlotChangesWithCallback(
-      this.renderRoot.querySelector('slot'),
-      hasContent => {
-        this.slotHasContent = hasContent;
-        this.requestUpdate();
-      },
-    );
 
     this.__convertTypeToVariantAndColor();
+    // Initialize slot presence tracking for smooth transitions when label/icon are added/removed
+    const iconSlot = this.renderRoot.querySelector(
+      'slot[name="icon"]',
+    ) as HTMLSlotElement | null;
+    const labelSlot = this.renderRoot.querySelector(
+      'slot.label',
+    ) as HTMLSlotElement | null;
+
+    // Use MutationObserver-based helper so we react to content/character changes
+    if (iconSlot) {
+      this.__iconSlotCleanup = observerSlotChangesWithCallback(
+        iconSlot,
+        has => {
+          this.toggleAttribute('has-icon', has);
+        },
+      );
+    }
+
+    if (labelSlot) {
+      this.__labelSlotCleanup = observerSlotChangesWithCallback(
+        labelSlot,
+        has => {
+          this.toggleAttribute('has-label', has);
+        },
+      );
+    }
   }
 
   __convertTypeToVariantAndColor() {
@@ -155,82 +191,200 @@ export class Button extends BaseButton {
   }
 
   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>
 
-    const cssClasses = {
+      ${this.renderButtonElement()} ${this.__renderTooltip()}
+    `;
+  }
+
+  renderButtonElement() {
+    const isElementLink = isLink(this);
+
+    const cssClasses: any = {
       button: true,
-      'button-element': true,
-      [`size-${this.size}`]: true,
-      [`variant-${this.variant}`]: true,
-      [`color-${this.color}`]: true,
-      disabled: this.disabled || this.softDisabled,
-      pressed: this.isPressed,
-      'has-content': this.slotHasContent,
-      'show-skeleton': this.skeleton,
-      [`icon-align-${this.iconAlign}`]: true,
+      'native-button': !isElementLink,
+      'native-link': isElementLink,
+      'trailing-icon': this.trailingIcon,
     };
 
-    if (!this.__isLink()) {
-      return html`<button
-          class=${classMap(cssClasses)}
-          id="button"
-          type=${this.htmlType}
-          @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.renderButtonContent()}
-        </button>
-        ${this.__renderTooltip()}`;
-    }
-    return html`<a
+    if (isElementLink) {
+      return html`<a
         class=${classMap(cssClasses)}
-        id="button"
+        id="link"
         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-describedby=${ifDefined(this.softDisabled ? BaseButton.DISABLED_REASON_ID : undefined)}
+        aria-describedby=${ifDefined(
+          this.softDisabled ? DISABLED_REASON_ID : undefined,
+        )}
         ?aria-disabled=${this.softDisabled}
-
         ${spread(this.configAria)}
       >
         ${this.renderButtonContent()}
-      </a>
+      </a>`;
+    }
+    return html`<button
+        class=${classMap(cssClasses)}
+        id="button"
+        type=${this.htmlType}
+        @click=${this.__dispatchClickWithThrottle}
+        @mousedown=${this.__handlePress}
+        @keydown=${this.__handlePress}
+        @keyup=${this.__handlePress}
+        aria-describedby=${ifDefined(
+          this.softDisabled ? DISABLED_REASON_ID : undefined,
+        )}
+        ?aria-disabled=${this.softDisabled}
+        ?disabled=${this.disabled}
+        ${spread(this.configAria)}
+      >
+        ${this.renderButtonContent()}
+      </button>
       ${this.__renderTooltip()}`;
   }
 
   renderButtonContent() {
-    return html`
-      <wc-focus-ring class="focus-ring" for='button'></wc-focus-ring>
-      <wc-elevation class="elevation"></wc-elevation>
-      <div class="neo-background"></div>
-      <div class="background"></div>
-      <div class="outline"></div>
-      <wc-ripple class="ripple"></wc-ripple>
-      <wc-skeleton class="skeleton"></wc-skeleton>
+    return html` <slot class="icon-slot" name="icon"></slot>
+      <slot class="label"></slot>
+      <div class="touch"></div>
 
-      <div class="button-content">
-        <div class="slot-container">
-          <slot></slot>
-        </div>
+      ${this.__renderDisabledReason(this.softDisabled)}`;
+  }
 
-        <slot name="icon"></slot>
-      </div>
+  @property({ type: Boolean, reflect: true }) skeleton: boolean = false;
 
-      ${this.__renderDisabledReason(this.softDisabled)}
-    `;
+  @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) {
+    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) {
+      const buttonId = isLink(this) ? 'link' : 'button';
+      return html`<wc-tooltip class="tooltip" for=${buttonId}>${this.tooltip}</wc-tooltip>`;
+    }
+    return nothing;
   }
 }

package/src/button/button/only-button.scss

@@ -0,0 +1,13 @@
+
+/* When both icon and label are present, apply the configured spacing */
+:host([has-icon][has-label]) .button {
+  gap: var(--private-button-icon-label-spacing);
+}
+
+:host(:not([trailing-icon])) .button {
+  flex-direction: row;
+}
+
+:host([trailing-icon]) .button {
+  flex-direction: row-reverse;
+}

package/src/button/button-group/button-group.ts

@@ -5,7 +5,7 @@ import IndividualComponent from '@/IndividualComponent.js';
 import styles from './button-group.scss';
 import { Button } from '../button/button.js';
 import { IconButton } from '../icon-button/icon-button.js';
-import { BaseButton } from '../BaseButton.js';
+import type { GroupButtonInterface } from '@/button/GroupButtonInterface.js';
 
 /**
  * @label Button Group
@@ -25,7 +25,7 @@ import { BaseButton } from '../BaseButton.js';
  * @tags controls
  */
 @IndividualComponent
-export class ButtonGroup extends LitElement {
+class ButtonGroup extends LitElement {
   // Lit prefers CSS-in-JS for better performance and scoping.
   // If you prefer keeping the SCSS file, you'll need a build tool (like Vite or Webpack)
   // that can import .scss files as lit-css.
@@ -57,19 +57,29 @@ export class ButtonGroup extends LitElement {
    * `"vertical"` stacks buttons in a column.
    * Defaults to `"horizontal"`.
    */
-  @property({ reflect: true }) orientation: 'horizontal' | 'vertical' = 'horizontal';
+  @property({ reflect: true }) orientation: 'horizontal' | 'vertical' =
+    'horizontal';
 
   /**
    * Color applied to all buttons in the group.
    * Possible values are `"primary"`, `"success"`, `"danger"`, `"warning"`, `"surface"`, `"on-surface"`.
    */
-  @property({ reflect: true }) color?: 'primary' | 'success' | 'danger' | 'warning' | 'surface' | 'on-surface';
+  @property({ reflect: true }) color?:
+    | 'primary'
+    | 'success'
+    | 'danger'
+    | 'warning'
+    | 'surface'
+    | 'on-surface';
 
   /**
    * Visual style applied to all buttons in the group.
    * Possible values are `"filled"`, `"tonal"`, `"outlined"`.
    */
-  @property({ attribute: 'button-variant', reflect: true }) buttonVariant?: 'filled' | 'tonal' | 'outlined';
+  @property({ attribute: 'button-variant', reflect: true }) buttonVariant?:
+    | 'filled'
+    | 'tonal'
+    | 'outlined';
 
   override updated() {
     this._syncChildren();
@@ -90,18 +100,21 @@ export class ButtonGroup extends LitElement {
       const isOnly = children.length === 1;
 
       if (this.color && 'color' in child) {
-        (child as BaseButton).color = this.color;
+        (child as GroupButtonInterface).color = this.color;
       }
 
       if (this.buttonVariant && 'variant' in child) {
-        (child as BaseButton).variant = this.buttonVariant;
+        (child as GroupButtonInterface).variant = this.buttonVariant;
       }
 
       if (this.variant === 'connected') {
         child.style.setProperty('--button-container-shape-variant', 'round');
 
         if (isOnly) {
-          child.style.setProperty('--button-container-shape', 'var(--shape-corner-full)');
+          child.style.setProperty(
+            '--button-container-shape',
+            'var(--shape-corner-full)',
+          );
           child.style.removeProperty('--button-container-shape-start-start');
           child.style.removeProperty('--button-container-shape-end-start');
           child.style.removeProperty('--button-container-shape-start-end');
@@ -116,10 +129,22 @@ export class ButtonGroup extends LitElement {
             child.style.removeProperty('--button-container-shape-end-end');
           } else {
             // Left button in horizontal group: round left corners, standard right corners
-            child.style.setProperty('--button-container-shape-start-start', 'calc(var(--button-height) / 2)');
-            child.style.setProperty('--button-container-shape-end-start', 'calc(var(--button-height) / 2)');
-            child.style.setProperty('--button-container-shape-start-end', 'var(--shape-corner-medium)');
-            child.style.setProperty('--button-container-shape-end-end', 'var(--shape-corner-medium)');
+            child.style.setProperty(
+              '--button-container-shape-start-start',
+              'calc(var(--button-height) / 2)',
+            );
+            child.style.setProperty(
+              '--button-container-shape-end-start',
+              'calc(var(--button-height) / 2)',
+            );
+            child.style.setProperty(
+              '--button-container-shape-start-end',
+              'var(--shape-corner-medium)',
+            );
+            child.style.setProperty(
+              '--button-container-shape-end-end',
+              'var(--shape-corner-medium)',
+            );
           }
         } else if (isLast) {
           child.style.removeProperty('--button-container-shape');
@@ -131,14 +156,29 @@ export class ButtonGroup extends LitElement {
             child.style.removeProperty('--button-container-shape-end-end');
           } else {
             // Right button in horizontal group: standard left corners, round right corners
-            child.style.setProperty('--button-container-shape-start-start', 'var(--shape-corner-medium)');
-            child.style.setProperty('--button-container-shape-end-start', 'var(--shape-corner-medium)');
-            child.style.setProperty('--button-container-shape-start-end', 'calc(var(--button-height) / 2)');
-            child.style.setProperty('--button-container-shape-end-end', 'calc(var(--button-height) / 2)');
+            child.style.setProperty(
+              '--button-container-shape-start-start',
+              'var(--shape-corner-medium)',
+            );
+            child.style.setProperty(
+              '--button-container-shape-end-start',
+              'var(--shape-corner-medium)',
+            );
+            child.style.setProperty(
+              '--button-container-shape-start-end',
+              'calc(var(--button-height) / 2)',
+            );
+            child.style.setProperty(
+              '--button-container-shape-end-end',
+              'calc(var(--button-height) / 2)',
+            );
           }
         } else {
           // Middle buttons: standard rounded corners on all sides
-          child.style.setProperty('--button-container-shape', 'var(--shape-corner-medium)');
+          child.style.setProperty(
+            '--button-container-shape',
+            'var(--shape-corner-medium)',
+          );
           child.style.removeProperty('--button-container-shape-start-start');
           child.style.removeProperty('--button-container-shape-end-start');
           child.style.removeProperty('--button-container-shape-start-end');
@@ -169,3 +209,5 @@ export class ButtonGroup extends LitElement {
     `;
   }
 }
+
+export default ButtonGroup;

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

@@ -1,57 +1,42 @@
 @use '../../../scss/mixin';
 
+.button .icon-slot {
+  overflow: initial;
+}
+
 .button {
-  --_container-padding: 0.75rem;
   width: var(--button-height);
-  --_container-padding: 0;
+
+  --private-button-container-padding: 0.75rem;
+  --private-button-container-padding: 0;
 }
 
 :host([size='xs']),
 :host([size='extra-small']) {
   --button-height: 2rem;
-}
-
-:host([size='xs']) .button,
-:host([size='extra-small']) .button {
-  --_button-icon-size: 1rem;
+  --private-button-icon-size: 1rem;
 }
 
 
 :host([size='sm']),
 :host([size='small']) {
   --button-height: 2.5rem;
-}
-
-:host([size='sm']) .button,
-:host([size='small']) .button {
-  --_button-icon-size: 1.25rem;
-  --_button-icon-label-spacing: 0.5rem;
+  --private-button-icon-size: 1.25rem;
 }
 
 :host([size='md']),
 :host([size='medium']) {
   --button-height: 3.5rem;
-}
-
-:host([size='md']) .button,
-:host([size='medium']) .button {
-  --_button-icon-size: 1.5rem;
+  --private-button-icon-size: 1.5rem;
 }
 
 :host([size='lg']),
 :host([size='large']) {
   --button-height: 6rem;
-}
-
-:host([size='lg']) .button,
-:host([size='large']) .button {
-  --_button-icon-size: 2rem;
+  --private-button-icon-size: 2rem;
 }
 
 :host([size='xl']) {
   --button-height: 8.5rem;
-}
-
-:host([size='xl']) .button {
-  --_button-icon-size: 2.5rem;
+  --private-button-icon-size: 2.5rem;
 }