@redvars/peacock 3.6.3 → 3.8.0

package/src/button/icon-button/icon-button.ts

@@ -1,13 +1,24 @@
-import { html } from 'lit';
-import { property } 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 { when } from 'lit/directives/when.js';
+import buttonLayers from '../button/button-layers.scss';
 import styles from '../button/button.scss';
 import colorStyles from '../button/button-colors.scss';
 import sizeStyles from './icon-button-sizes.scss';
 import { spread } from '@/__directive/spread.js';
 import { throttle } from '@/__utils/throttle.js';
-import { BaseButton } from '../BaseButton.js';
+import { isLink } from '@/__utils/is-link.js';
+import { observerSlotChangesWithCallback } from '@/__utils/observe-slot-change.js';
+import {
+  dispatchActivationClick,
+  isActivationClick,
+} from '@/__utils/dispatch-event-utils.js';
+import NativeButtonMixin from '@/__mixins/NativeButtonMixin.js';
+import NativeHyperlinkMixin from '@/__mixins/NativeHyperlinkMixin.js';
+import { GroupButtonInterface } from '@/button/GroupButtonInterface.js';
+import { DISABLED_REASON_ID } from '@/button/ButtonConstants.js';
 
 /**
  * @label Icon Button
@@ -52,8 +63,11 @@ import { BaseButton } from '../BaseButton.js';
  * ```
  * @tags display
  */
-export class IconButton extends BaseButton {
-  static override styles = [styles, colorStyles, sizeStyles];
+export class IconButton
+  extends NativeButtonMixin(NativeHyperlinkMixin(LitElement))
+  implements GroupButtonInterface
+{
+  static override styles = [buttonLayers, styles, colorStyles, sizeStyles];
 
   /**
    * Button size.
@@ -62,39 +76,39 @@ export class IconButton 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.
@@ -102,6 +116,92 @@ export class IconButton extends BaseButton {
   @property({ reflect: true })
   configAria?: { [key: string]: any };
 
+  @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;
+
+  @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 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;
+    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;
+    }
+
+    if (!isActivationClick(event) || !this.buttonElement) {
+      return;
+    }
+
+    if (this.toggle) {
+      this.selected = !this.selected;
+    }
+
+    this.focus();
+    dispatchActivationClick(this.buttonElement);
+  };
+
+  __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();
   }
@@ -109,7 +209,7 @@ export class IconButton extends BaseButton {
   override blur() {
     this.buttonElement?.blur();
   }
-  
+
   override firstUpdated() {
     this.__dispatchClickWithThrottle = throttle(
       this.__dispatchClick,
@@ -135,8 +235,26 @@ export class IconButton extends BaseButton {
   }
 
   override render() {
-    const isLink = this.__isLink();
+    return html`
+      <wc-focus-ring class="focus-ring" for="button"></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="button"></wc-ripple>
+      <wc-skeleton class="skeleton"></wc-skeleton>
+
+      ${this.renderButtonElement()} ${this.__renderTooltip()}
+    `;
+  }
 
+  renderButtonElement() {
     const cssClasses = {
       button: true,
       'button-element': true,
@@ -144,69 +262,56 @@ export class IconButton extends BaseButton {
       [`variant-${this.variant}`]: true,
       [`color-${this.color}`]: true,
       disabled: this.disabled || this.softDisabled,
-      pressed: this.isPressed,
+      pressed: this.pressed,
       skeleton: this.skeleton,
     };
 
-    if (!isLink) {
+    if (!isLink(this)) {
       cssClasses['native-button'] = true;
       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()}`;
-    } else {
-      cssClasses['native-link'] = true;
-      return html`<a
-          class=${classMap(cssClasses)}
-          id="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-describedby=${ifDefined(this.softDisabled ? BaseButton.DISABLED_REASON_ID : undefined)}
-          ?aria-disabled=${this.softDisabled}
-
-          ${spread(this.configAria)}
-        >
-          ${this.renderButtonContent()}
-        </a>
-        ${this.__renderTooltip()}`;
+        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>`;
     }
+    cssClasses['native-link'] = true;
+    return html`<a
+      class=${classMap(cssClasses)}
+      id="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-describedby=${ifDefined(
+        this.softDisabled ? DISABLED_REASON_ID : undefined,
+      )}
+      ?aria-disabled=${this.softDisabled}
+      ${spread(this.configAria)}
+    >
+      ${this.renderButtonContent()}
+    </a>`;
   }
 
   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>
-
-      <div class="button-content">
-        <slot></slot>
-      </div>
-
+      <slot class="icon-slot"></slot>
+      <div class="touch"></div>
       ${this.__renderDisabledReason(this.softDisabled)}
     `;
   }

package/src/button/index.ts

@@ -1,3 +1,3 @@
 export { Button } from './button/button.js';
-export { ButtonGroup } from './button-group/button-group.js';
+export { default as ButtonGroup } from './button-group/button-group.js';
 export { IconButton } from './icon-button/icon-button.js';

package/src/calendar/calendar-column-view.ts

@@ -22,7 +22,6 @@ import styles from './calendar-column-view.scss';
  * @label Calendar Column View
  * @tag wc-calendar-column-view
  * @rawTag calendar-column-view
- * @parentRawTag calendar
  * @summary Internal column view component for the calendar (day/week views).
  */
 @IndividualComponent

package/src/calendar/calendar-month-view.ts

@@ -21,7 +21,6 @@ import styles from './calendar-month-view.scss';
  * @label Calendar Month View
  * @tag wc-calendar-month-view
  * @rawTag calendar-month-view
- * @parentRawTag calendar
  * @summary Internal month view component for the calendar.
  */
 @IndividualComponent

package/src/card/card-content.ts

@@ -5,8 +5,7 @@ import IndividualComponent from '../IndividualComponent.js';
  * @label Card Content
  * @tag wc-card-content
  * @rawTag card-content
- * @parentRawTag 
- * 
+ *
  * @cssprop --card-content-padding - Inner padding for the card container. Defaults to 1rem.
  *
  * ```
@@ -23,4 +22,4 @@ export class CardContent extends LitElement {
    render() {
     return html`<slot></slot>`;
    }
-}
+}

package/src/card/card.scss

@@ -3,6 +3,7 @@
 @include mixin.base-styles;
 
 :host {
+  position: relative;
   display: block;
   --card-gap: 0;
   --card-padding: 0;
@@ -11,6 +12,11 @@
   --card-container-shape-start-end: unset;
   --card-container-shape-end-start: unset;
   --card-container-shape-end-end: unset;
+
+  --_container-shape-start-start: var(--card-container-shape-start-start, var(--card-container-shape));
+  --_container-shape-start-end: var(--card-container-shape-start-end, var(--card-container-shape));
+  --_container-shape-end-start: var(--card-container-shape-end-start, var(--card-container-shape));
+  --_container-shape-end-end: var(--card-container-shape-end-end, var(--card-container-shape));
 }
 
 /*
@@ -27,16 +33,10 @@
 }
 
 .card {
-  position: relative;
   display: flex;
   height: 100%;
   width: 100%;
-
-  --_container-shape-start-start: var(--card-container-shape-start-start, var(--card-container-shape));
-  --_container-shape-start-end: var(--card-container-shape-start-end, var(--card-container-shape));
-  --_container-shape-end-start: var(--card-container-shape-end-start, var(--card-container-shape));
-  --_container-shape-end-end: var(--card-container-shape-end-end, var(--card-container-shape));
-
+  z-index: 0;
 
   .card-content {
     z-index: 0;
@@ -63,83 +63,80 @@
       height: 100%;
     }
   }
+}
 
-  /*
-    Background layers
-   */
-  .focus-ring {
-    z-index: 2;
-    display: none;
-    --focus-ring-container-shape-start-start: var(--_container-shape-start-start);
-    --focus-ring-container-shape-start-end: var(--_container-shape-start-end);
-    --focus-ring-container-shape-end-start: var(--_container-shape-end-start);
-    --focus-ring-container-shape-end-end: var(--_container-shape-end-end);
-    --focus-ring-container-shape-variant: var(--_container-corner-shape-variant);
-  }
-
-  .ripple {
-    display: none;
-    border-start-start-radius: var(--_container-shape-start-start);
-    border-start-end-radius: var(--_container-shape-start-end);
-    border-end-start-radius: var(--_container-shape-end-start);
-    border-end-end-radius: var(--_container-shape-end-end);
-    corner-shape: var(--_container-corner-shape-variant);
-    --ripple-state-opacity: var(--_container-state-opacity, 0);
-    --ripple-pressed-color: var(--_container-state-color);
-  }
-
-  .background {
-    z-index: 0;
-    display: block;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: var(--_container-color);
-    opacity: var(--_container-opacity, 1);
-
-    border-start-start-radius: var(--_container-shape-start-start);
-    border-start-end-radius: var(--_container-shape-start-end);
-    border-end-start-radius: var(--_container-shape-end-start);
-    border-end-end-radius: var(--_container-shape-end-end);
-    corner-shape: var(--_container-corner-shape-variant);
-    pointer-events: none;
-  }
-
-  .elevation {
-    --elevation-level: var(--_container-elevation-level);
-    transition-duration: 280ms;
-    --elevation-container-shape-start-start: var(--_container-shape-start-start);
-    --elevation-container-shape-start-end: var(--_container-shape-start-end);
-    --elevation-container-shape-end-start: var(--_container-shape-end-start);
-    --elevation-container-shape-end-end: var(--_container-shape-end-end);
-    --elevation-container-shape-variant: var(--_container-corner-shape-variant);
-  }
+/*
+  Background layers
+ */
+.focus-ring {
+  z-index: 2;
+  display: none;
+  --focus-ring-container-shape-start-start: var(--_container-shape-start-start);
+  --focus-ring-container-shape-start-end: var(--_container-shape-start-end);
+  --focus-ring-container-shape-end-start: var(--_container-shape-end-start);
+  --focus-ring-container-shape-end-end: var(--_container-shape-end-end);
+  --focus-ring-container-shape-variant: var(--_container-corner-shape-variant);
+}
 
-  .outline {
-    z-index: 0;
-    display: none;
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    pointer-events: none;
-    border: var(--_outline-width) solid var(--_outline-color);
-    opacity: var(--_outline-opacity, 1);
-    border-start-start-radius: var(--_container-shape-start-start);
-    border-start-end-radius: var(--_container-shape-start-end);
-    border-end-start-radius: var(--_container-shape-end-start);
-    border-end-end-radius: var(--_container-shape-end-end);
-    corner-shape: var(--_container-corner-shape-variant);
-  }
+.ripple {
+  display: none;
+  border-start-start-radius: var(--_container-shape-start-start);
+  border-start-end-radius: var(--_container-shape-start-end);
+  border-end-start-radius: var(--_container-shape-end-start);
+  border-end-end-radius: var(--_container-shape-end-end);
+  corner-shape: var(--_container-corner-shape-variant);
+  --ripple-state-opacity: var(--_container-state-opacity, 0);
+  --ripple-pressed-color: var(--_container-state-color);
+}
 
+.background {
+  z-index: 0;
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--_container-color);
+  opacity: var(--_container-opacity, 1);
+
+  border-start-start-radius: var(--_container-shape-start-start);
+  border-start-end-radius: var(--_container-shape-start-end);
+  border-end-start-radius: var(--_container-shape-end-start);
+  border-end-end-radius: var(--_container-shape-end-end);
+  corner-shape: var(--_container-corner-shape-variant);
+  pointer-events: none;
+}
 
+.elevation {
+  --elevation-level: var(--_container-elevation-level);
+  transition-duration: 280ms;
+  --elevation-container-shape-start-start: var(--_container-shape-start-start);
+  --elevation-container-shape-start-end: var(--_container-shape-start-end);
+  --elevation-container-shape-end-start: var(--_container-shape-end-start);
+  --elevation-container-shape-end-end: var(--_container-shape-end-end);
+  --elevation-container-shape-variant: var(--_container-corner-shape-variant);
 }
 
-.card.actionable {
+.outline {
+  z-index: 0;
+  display: none;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  border: var(--_outline-width) solid var(--_outline-color);
+  opacity: var(--_outline-opacity, 1);
+  border-start-start-radius: var(--_container-shape-start-start);
+  border-start-end-radius: var(--_container-shape-start-end);
+  border-end-start-radius: var(--_container-shape-end-start);
+  border-end-end-radius: var(--_container-shape-end-end);
+  corner-shape: var(--_container-corner-shape-variant);
+}
 
+:host([actionable]) {
   .focus-ring,
   .ripple {
     display: block;
@@ -150,24 +147,23 @@
   }
 }
 
-.card.variant-elevated {
+:host([variant='elevated']) {
   --_container-color: var(--elevated-card-container-color);
   --_label-text-color: var(--elevated-card-label-text-color);
   --_container-elevation-level: 1;
-
   --_container-state-color: var(--_label-text-color);
 
-  &:hover:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
+  &:hover:not([disabled]) {
     --_container-elevation-level: 2;
     --_container-state-opacity: 0.08;
   }
 
-  &.pressed:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
+  &:has(.card.pressed):not([disabled]) {
     --_container-elevation-level: 1;
     --_container-state-opacity: 0.12;
   }
 
-  &.disabled {
+  &[disabled] {
     --_container-color: var(--color-on-surface);
     --_container-opacity: 0.1;
     --_label-text-color: var(--color-on-surface);
@@ -179,24 +175,22 @@
   }
 }
 
-
-.card.variant-filled {
+:host([variant='filled']) {
   --_container-color: var(--filled-card-container-color);
   --_label-text-color: var(--filled-card-label-text-color);
   --_container-state-color: var(--_label-text-color);
 
-
-  &:hover:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
+  &:hover:not([disabled]) {
     --_container-elevation-level: 1;
     --_container-state-opacity: 0.08;
   }
 
-  &.pressed:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
+  &:has(.card.pressed):not([disabled]) {
     --_container-elevation-level: 0;
     --_container-state-opacity: 0.1;
   }
 
-  &.disabled {
+  &[disabled] {
     --_container-color: var(--color-on-surface);
     --_container-opacity: 0.1;
     --_label-text-color: var(--color-on-surface);
@@ -208,27 +202,25 @@
   }
 }
 
-
-.card.variant-outlined {
+:host([variant='outlined']) {
   --_outline-width: var(--outlined-card-outline-width, 0.0675rem);
   --_outline-color: var(--outlined-card-outline-color);
   --_label-text-color: var(--outlined-card-label-text-color);
-
   --_container-state-color: var(--_label-text-color);
 
   .outline {
     display: block;
   }
 
-  &:hover:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
+  &:hover:not([disabled]) {
     --_container-state-opacity: 0.08;
   }
 
-  &.pressed:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
+  &:has(.card.pressed):not([disabled]) {
     --_container-state-opacity: 0.12;
   }
 
-  &.disabled {
+  &[disabled] {
     --_outline-color: var(--color-on-surface);
     --_label-text-color: var(--color-on-surface);
     --_label-text-opacity: 0.38;
@@ -238,4 +230,4 @@
       display: none;
     }
   }
-}
+}