@redvars/peacock 3.6.2 → 3.7.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,66 +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()}`;
-    }
-    return html`<a
         class=${classMap(cssClasses)}
         id="button"
-        href=${this.href}
-        target=${this.target}
-        tabindex=${this.disabled ? '-1' : '0'}
-        @click=${this.__dispatchClick}
+        type=${this.htmlType}
+        @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.renderButtonContent()}
-      </a>
-      ${this.__renderTooltip()}`;
+      </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/canvas/canvas.scss

@@ -12,8 +12,22 @@
 }
 
 .canvas-wrapper {
+  position: relative;
   background: var(--canvas-background);
-  border-radius: var(--shape-corner-medium);
+}
+
+.canvas {
+  display: block;
+}
+
+.canvas-background,
+.canvas-shapes {
+  position: absolute;
+  inset: 0;
+}
+
+.canvas-background {
+  pointer-events: none;
 }
 
 #canvas-background circle {
@@ -22,16 +36,14 @@
 
 #endarrow polyline {
   fill: none;
-  stroke: var(--canvas-arrow-color);
+  stroke: context-stroke;
   vector-effect: non-scaling-stroke;
   stroke-width: 2;
+  stroke-linejoin: round;
+  stroke-linecap: round;
 }
 
 .line {
-  &.no-color {
-    stroke: var(--canvas-line-color);
-  }
-
   &.variant-dashed {
     stroke-dasharray: 6 6;
   }