@redvars/peacock 3.6.2 → 3.7.0

package/src/card/card.ts

@@ -1,13 +1,17 @@
 import { LitElement, html, nothing } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { dispatchActivationClick, isActivationClick } from '../__utils/dispatch-event-utils.js';
+import {
+  dispatchActivationClick,
+  isActivationClick,
+} from '../__utils/dispatch-event-utils.js';
+import { isLink } from '@/__utils/is-link.js';
 import { observerSlotChangesWithCallback } from '@/__utils/observe-slot-change.js';
 import { throttle } from '@/__utils/throttle.js';
 import IndividualComponent from '@/IndividualComponent.js';
 import styles from './card.scss';
 import colorStyles from './card-colors.scss';
-import BaseHyperlinkMixin from '@/__mixins/BaseHyperlinkMixin.js';
+import NativeHyperlinkMixin from '@/__mixins/NativeHyperlinkMixin.js';
 
 type CardVariant = 'elevated' | 'filled' | 'outlined';
 
@@ -22,14 +26,16 @@ type CardVariant = 'elevated' | 'filled' | 'outlined';
  *
  * @example
  * ```html
- * <wc-card variant="outlined">
- *   <h3>Title</h3>
- *   <p>Supportive text</p>
+ * <wc-card variant="outlined" style="padding-block: 1rem;">
+ *   <wc-card-content>
+ *     <h3 class="text-headline">Title</h3>
+ *     <p class="text-body">Supportive text</p>
+ *   </wc-card-content>
  * </wc-card>
  * ```
  */
 @IndividualComponent
-export class Card extends BaseHyperlinkMixin(LitElement) {
+export class Card extends NativeHyperlinkMixin(LitElement) {
   static styles = [styles, colorStyles];
 
   #id = crypto.randomUUID();
@@ -44,8 +50,8 @@ export class Card extends BaseHyperlinkMixin(LitElement) {
   actionable: boolean = false;
 
   /**
-  * If button is disabled, the reason why it is disabled.
-  */
+   * If button is disabled, the reason why it is disabled.
+   */
   @property({ attribute: 'disabled-reason' })
   disabledReason: string = '';
 
@@ -63,7 +69,6 @@ export class Card extends BaseHyperlinkMixin(LitElement) {
   @state()
   private slotHasContent = false;
 
-
   @query('.card') readonly cardElement!: HTMLElement | null;
 
   #tabindex?: number = 0;
@@ -140,82 +145,79 @@ export class Card extends BaseHyperlinkMixin(LitElement) {
     }
   };
 
-
-
-
   render() {
+    const isLinkElement = isLink(this);
+    const disableSlotTabbing = this.actionable || isLinkElement;
+
+    return html`
+      <wc-focus-ring class="focus-ring" for="card"></wc-focus-ring>
+      <wc-elevation class="elevation"></wc-elevation>
+      <div class="background"></div>
+      <div class="outline"></div>
+      <wc-ripple class="ripple" for="card"></wc-ripple>
 
-    const isLink = this.__isLink();
-    const disableSlotTabbing = this.actionable || isLink;
+      ${this.renderCardElement(isLinkElement, disableSlotTabbing)}
+    `;
+  }
 
+  renderCardElement(isLinkElement: boolean, disableSlotTabbing: boolean) {
     const cssClasses = {
       card: true,
       'card-element': true,
       [`variant-${this.variant}`]: true,
-      actionable: (this.actionable && !this.disabled) || isLink,
+      actionable: (this.actionable && !this.disabled) || isLinkElement,
       disabled: this.disabled,
       pressed: this.isPressed,
       'has-content': this.slotHasContent,
     };
 
-    if (!this.actionable && !isLink) {
-      return html`<div
-              class=${classMap(cssClasses)}
-              id="card"
-              >
-              ${this.renderCardContent(disableSlotTabbing)}
-            </div>`;
+    if (!this.actionable && !isLinkElement) {
+      return html`<div class=${classMap(cssClasses)} id="card">
+        ${this.renderCardContent(disableSlotTabbing)}
+      </div>`;
     }
 
-    if (!isLink) {
+    if (!isLinkElement) {
       return html`<button
-              class=${classMap(cssClasses)}
-              id="card"
-              tabindex=${this.#tabindex}
-              @click=${this.__dispatchClickWithThrottle}
-              @mousedown=${this.__handlePress}
-              @keydown=${this.__handlePress}
-              @keyup=${this.__handlePress}
-              ?aria-describedby=${this.__getDisabledReasonID()}
-              aria-disabled=${`${this.disabled}`}
-              ?disabled=${this.disabled}
-            >
-              ${this.renderCardContent(disableSlotTabbing)}
-            </button>`;
+        class=${classMap(cssClasses)}
+        id="card"
+        tabindex=${this.#tabindex}
+        @click=${this.__dispatchClickWithThrottle}
+        @mousedown=${this.__handlePress}
+        @keydown=${this.__handlePress}
+        @keyup=${this.__handlePress}
+        ?aria-describedby=${this.__getDisabledReasonID()}
+        aria-disabled=${`${this.disabled}`}
+        ?disabled=${this.disabled}
+      >
+        ${this.renderCardContent(disableSlotTabbing)}
+      </button>`;
     }
     return html`<a
-            class=${classMap(cssClasses)}
-            id="card"
-            tabindex=${this.#tabindex}
-            href=${this.href}
-            target=${this.target}
-            @click=${this.__dispatchClickWithThrottle}
-            @mousedown=${this.__handlePress}
-            @keydown=${this.__handlePress}
-            @keyup=${this.__handlePress}
-            role="button"
-            ?aria-describedby=${this.__getDisabledReasonID()}
-            aria-disabled=${`${this.disabled}`}
-          >
-            ${this.renderCardContent(disableSlotTabbing)}
-          </a>`;
+      class=${classMap(cssClasses)}
+      id="card"
+      tabindex=${this.#tabindex}
+      href=${this.href}
+      target=${this.target}
+      @click=${this.__dispatchClickWithThrottle}
+      @mousedown=${this.__handlePress}
+      @keydown=${this.__handlePress}
+      @keyup=${this.__handlePress}
+      role="button"
+      ?aria-describedby=${this.__getDisabledReasonID()}
+      aria-disabled=${`${this.disabled}`}
+    >
+      ${this.renderCardContent(disableSlotTabbing)}
+    </a>`;
   }
 
   renderCardContent(disableSlotTabbing: boolean) {
     return html`
-      <wc-focus-ring class="focus-ring" for='card'></wc-focus-ring>
-      <wc-elevation class="elevation"></wc-elevation>
-      <div class="background"></div>
-      <div class="outline"></div>
-      <wc-ripple class="ripple"></wc-ripple> 
-
       <div class="card-content">
-
         <div class="slot-container" ?inert=${disableSlotTabbing}>
           <slot></slot>
         </div>
-
       </div>
-      `;
+    `;
   }
 }

package/src/chip/chip/chip.scss

@@ -3,7 +3,8 @@
 @include mixin.base-styles;
 
 :host {
-  display: inline-block;
+  position: relative;
+  display: inline-flex;
   --chip-container-color: var(--color-surface);
   --chip-label-text-color: var(--color-on-surface);
   --chip-outline-color: var(--color-outline-variant);
@@ -27,12 +28,12 @@
 }
 
 .chip {
-  position: relative;
   display: inline-flex;
   align-items: center;
   height: var(--chip-height, var(--_chip-height, 2rem));
   width: 100%;
   cursor: pointer;
+  z-index: 0;
 
   .tag-content {
     position: relative;
@@ -57,7 +58,6 @@
       white-space: nowrap;
     }
 
-
     .close-btn {
       height: 100%;
       padding: 0;
@@ -85,20 +85,6 @@
       --icon-size: 1rem;
       --icon-color: var(--color-primary);
     }
-
-  }
-
-  .focus-ring {
-    z-index: 2;
-    display: block;
-    --focus-ring-container-shape: var(--chip-container-shape);
-  }
-
-  .ripple {
-    display: block;
-    border-radius: var(--chip-container-shape);
-    --ripple-state-opacity: var(--_chip-state-opacity, 0);
-    --ripple-pressed-color: var(--_chip-state-color);
   }
 
   &.disabled {
@@ -120,72 +106,81 @@
   &.icon-slot-has-content .icon-slot-container, &.selected .icon-slot-container {
     padding-inline: calc(var(--chip-container-padding) / 2);
   }
+}
 
+/*
+  Background layers
+ */
+.focus-ring {
+  z-index: 2;
+  display: block;
+  --focus-ring-container-shape: var(--chip-container-shape);
+}
 
+.ripple {
+  display: block;
+  border-radius: var(--chip-container-shape);
+  --ripple-state-opacity: var(--_chip-state-opacity, 0);
+  --ripple-pressed-color: var(--_chip-state-color);
+}
 
-  /**
-   * Tag background layers
-   */
-  .background {
-    display: block;
-    position: absolute;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    border-radius: var(--chip-container-shape);
-    
-
-    background: var(--_chip-container-color);
-    pointer-events: none;
-  }
-
-  .outline {
-    z-index: 0;
-    display: block;
-    position: absolute;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    border-radius: var(--chip-container-shape);
-    border: 1px solid var(--chip-outline-color);
-  }
-
-  .elevation {
-    --elevation-level: 0;
-    transition-duration: 280ms;
-    --elevation-container-shape: var(--chip-container-shape);
-  }
+.background {
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: var(--chip-container-shape);
+  background: var(--_chip-container-color);
+  pointer-events: none;
+}
 
+.outline {
+  z-index: 0;
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: var(--chip-container-shape);
+  border: 1px solid var(--chip-outline-color);
 }
 
+.elevation {
+  --elevation-level: 0;
+  transition-duration: 280ms;
+  --elevation-container-shape: var(--chip-container-shape);
+}
 
-/** Color state management */
-.chip {
+/* Color/state management */
+:host {
   --_chip-container-color: var(--chip-container-color);
   --_chip-text-color: var(--chip-label-text-color);
   --_chip-state-color: var(--_chip-text-color);
+}
 
-  &:hover {
-    --_chip-state-opacity: 0.08;
-  }
+:host:hover {
+  --_chip-state-opacity: 0.08;
+}
 
-  &.pressed {
-    --_chip-state-opacity: 0.12;
-  }
-  
-  &.selected {
-    --_chip-container-color: var(--color-secondary-container);
-    --_chip-text-color: var(--color-on-secondary-container);
-  }
+:host([pressed]) {
+  --_chip-state-opacity: 0.12;
+}
 
-  &.disabled {
-    --_chip-container-color: var(--color-on-surface);
-    --_chip-container-opacity: 0.1;
-    --_chip-text-color: var(--color-on-surface);
-    --_chip-text-opacity: 0.38;
+:host([selected]) {
+  --_chip-container-color: var(--color-secondary-container);
+  --_chip-text-color: var(--color-on-secondary-container);
+}
 
-    .ripple {
-      display: none;
-    }
+:host([disabled]) {
+  --_chip-container-color: var(--color-on-surface);
+  --_chip-container-opacity: 0.1;
+  --_chip-text-color: var(--color-on-surface);
+  --_chip-text-opacity: 0.38;
+
+  .ripple {
+    display: none;
   }
-}
+}

package/src/chip/chip/chip.ts

@@ -1,13 +1,19 @@
-import { html, nothing } from 'lit';
+import { html, LitElement, nothing } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { observerSlotChangesWithCallback } from '@/__utils/observe-slot-change.js';
-import { dispatchActivationClick, isActivationClick } from '@/__utils/dispatch-event-utils.js';
+import {
+  dispatchActivationClick,
+  isActivationClick,
+} from '@/__utils/dispatch-event-utils.js';
+import { isLink } from '@/__utils/is-link.js';
 import styles from './chip.scss';
 import sizeStyles from './chip-sizes.scss';
 import { spread } from '@/__directive/spread.js';
-import { BaseButton } from '@/button/BaseButton.js';
+import { DISABLED_REASON_ID } from '@/button/ButtonConstants.js';
+import NativeButtonMixin from '@/__mixins/NativeButtonMixin.js';
+import NativeHyperlinkMixin from '@/__mixins/NativeHyperlinkMixin.js';
 
 /**
  * @label Chip
@@ -21,7 +27,7 @@ import { BaseButton } from '@/button/BaseButton.js';
  * <wc-chip>Chip content</wc-chip>
  * ```
  */
-export class Chip extends BaseButton {
+export class Chip extends NativeButtonMixin(NativeHyperlinkMixin(LitElement)) {
   // Define styles (Lit handles Scoping via Shadow DOM by default)
   // You would typically import your tag.scss.js here or use the css tag
   static styles = [styles, sizeStyles];
@@ -37,7 +43,99 @@ export class Chip extends BaseButton {
 
   @state() private _hasIconSlotContent = false;
 
-  @state() private _isPressed = false;
+  @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;
+    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
+    // 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();
@@ -71,7 +169,6 @@ export class Chip extends BaseButton {
     );
   }
 
-
   private _renderCloseButton() {
     if (!this.dismissible) return nothing;
 
@@ -86,68 +183,71 @@ export class Chip extends BaseButton {
     `;
   }
 
-  
-
   render() {
+    return html`
+      <wc-focus-ring class="focus-ring" for="button"></wc-focus-ring>
+      <wc-elevation class="elevation"></wc-elevation>
+      <div class="background"></div>
+      <div class="outline"></div>
+      <wc-ripple class="ripple" for="button"></wc-ripple>
+
+      ${this.renderChipElement()} ${this.__renderTooltip()}
+    `;
+  }
+
+  renderChipElement() {
     const cssClasses = {
       chip: true,
       button: true,
       selected: this.selected,
       dismissible: this.dismissible,
-      pressed: this._isPressed,
+      pressed: this.pressed,
       'icon-slot-has-content': this._hasIconSlotContent,
     };
 
-     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.renderChipContent()}
-          </button>`;
-      }
-      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.renderChipContent()}
-        </a>`;
+    if (!isLink(this)) {
+      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.renderChipContent()}
+      </button>`;
     }
+    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.renderChipContent()}
+    </a>`;
+  }
 
   renderChipContent() {
     return html`
-      <wc-focus-ring class="focus-ring" for="button"></wc-focus-ring>
-      <wc-elevation class="elevation"></wc-elevation>
-      <div class="background"></div>
-      <div class="outline"></div>
-      <wc-ripple class="ripple"></wc-ripple>
       <div class="tag-content">
-
         <div class="icon-slot-container">
           ${this.selected
             ? html`<wc-icon class="selected-icon" name="check"></wc-icon>`
@@ -155,8 +255,7 @@ export class Chip extends BaseButton {
         </div>
         <div class="label-container">
           <slot></slot>
-        </div> 
-        
+        </div>
         ${this._renderCloseButton()}
       </div>
     `;

package/src/code-highlighter/code-highlighter.scss

@@ -6,7 +6,7 @@
 :host {
   display: block;
   height: 100%;
-  --code-highlighter-background: var(--color-surface-container-high);
+  --code-highlighter-background: var(--color-surface-container);
 }
 
 .code-loader {