@redvars/peacock 3.8.1 → 3.8.2

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

@@ -3,22 +3,28 @@ 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 { isLink } from '@/__utils/is-link.js';
-import { observerSlotChangesWithCallback } from '@/__utils/observe-slot-change.js';
+import styles from './icon-button.scss';
+import { isLink } from '@/__internal/utils/is-link.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';
+} from '@/__internal/utils/dispatch-event-utils.js';
 import { DISABLED_REASON_ID } from '@/button/ButtonConstants.js';
+import IndividualComponent from '@/IndividualComponent.js';
+import { mixinBaseButton } from '../base-button/base-button.js';
+import { mixinHyperlink } from '@/__internal/mixins/hyperlink.js';
+import { mixinDelegatesAria } from '@/__internal/aria/delegate.js';
+import { mixinFormSubmitter } from '@/__internal/mixins/form-submitter.js';
+import { mixinFormAssociated } from '@/__internal/mixins/form-associated.js';
+import { mixinElementInternals } from '@/__internal/mixins/element-internals.js';
+import { ARIAMixinStrict } from '@/__internal/aria/aria.js';
+import type {
+  ButtonColor,
+  ButtonLevel,
+  ButtonShape,
+  ButtonSize,
+  ButtonVariant,
+} from '@/button/ButtonTypes.js';
 
 /**
  * @label Icon Button
@@ -63,23 +69,40 @@ import { DISABLED_REASON_ID } from '@/button/ButtonConstants.js';
  * ```
  * @tags display
  */
-export class IconButton
-  extends NativeButtonMixin(NativeHyperlinkMixin(LitElement))
-  implements GroupButtonInterface
-{
-  static override styles = [buttonLayers, styles, colorStyles, sizeStyles];
+@IndividualComponent
+export class IconButton 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];
 
   /**
    * 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.
    *
    */
-  @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.
@@ -91,75 +114,32 @@ export class IconButton
    * `"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';
-
-  /**
-   * Additional ARIA attributes to pass to the inner button/anchor element.
-   */
-  @property({ reflect: true })
-  configAria?: { [key: string]: any };
+  @property({ reflect: true }) color: ButtonColor = 'primary';
 
+  /** When true, renders the button in a loading skeleton state. */
   @property({ type: Boolean, reflect: true }) skeleton: boolean = false;
 
+  /** When true, the button acts as a toggle. Use with `selected`. */
   @property({ type: Boolean, reflect: true }) toggle: boolean = false;
 
+  /** When true (and `toggle` is set), the button is in the selected/pressed state. */
   @property({ type: Boolean, reflect: true }) selected: boolean = false;
 
-  /**
-   * Sets the delay for throttle in milliseconds. Defaults to 200 milliseconds.
-   */
-  @property() throttleDelay = 200;
-
+  /** Optional tooltip text displayed on hover. */
   @property() tooltip?: string;
 
-  @property({ type: Boolean, reflect: true })
-  pressed = false;
-
   @query('.button') readonly buttonElement!: HTMLElement | null;
 
-  override connectedCallback() {
-    super.connectedCallback();
+  constructor() {
+    super();
     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
@@ -174,34 +154,10 @@ export class IconButton
       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();
   }
@@ -210,11 +166,8 @@ export class IconButton
     this.buttonElement?.blur();
   }
 
-  override firstUpdated() {
-    this.__dispatchClickWithThrottle = throttle(
-      this.__dispatchClick,
-      this.throttleDelay,
-    );
+  override firstUpdated(changedProperties: Map<PropertyKey, unknown>) {
+    super.firstUpdated(changedProperties);
     this.__convertTypeToVariantAndColor();
   }
 
@@ -234,85 +187,102 @@ export class IconButton
     }
   }
 
-  override render() {
-    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>
+  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;
+  }
 
-      ${this.renderButtonElement()} ${this.__renderTooltip()}
+  renderTooltip() {
+    if (this.tooltip) {
+      const buttonId = isLink(this) ? 'link' : 'button';
+      return html`<wc-tooltip class="tooltip" for=${buttonId}
+        >${this.tooltip}</wc-tooltip
+      >`;
+    }
+    return nothing;
+  }
+
+  renderButtonContent() {
+    return html`
+      <slot class="icon-slot"></slot>
+      <div class="touch"></div>
+      ${this.renderDisabledReason(this.softDisabled)}
     `;
   }
 
   renderButtonElement() {
+    const isElementLink = isLink(this);
+    const { ariaLabel, ariaHasPopup, ariaExpanded } = this as ARIAMixinStrict;
+
     const cssClasses = {
       button: true,
-      'button-element': true,
-      [`size-${this.size}`]: true,
-      [`variant-${this.variant}`]: true,
-      [`color-${this.color}`]: true,
-      disabled: this.disabled || this.softDisabled,
-      pressed: this.pressed,
-      skeleton: this.skeleton,
+      'native-button': !isElementLink,
+      'native-link': isElementLink,
     };
 
     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-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>`;
     }
-    cssClasses['native-link'] = true;
     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-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>`;
   }
 
-  renderButtonContent() {
+  // ── Render ────────────────────────────────────────────────────────────────
+
+  override render() {
+    const buttonId = isLink(this) ? 'link' : 'button';
+
     return html`
-      <slot class="icon-slot"></slot>
-      <div class="touch"></div>
-      ${this.__renderDisabledReason(this.softDisabled)}
+      <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="button"></wc-ripple>
+      <wc-skeleton class="skeleton"></wc-skeleton>
+
+      ${this.renderButtonElement()} ${this.renderTooltip()}
     `;
   }
 }

package/src/button/index.ts

@@ -1,3 +1,10 @@
 export { Button } from './button/button.js';
 export { default as ButtonGroup } from './button-group/button-group.js';
 export { IconButton } from './icon-button/icon-button.js';
+export type {
+  ButtonSize,
+  ButtonLevel,
+  ButtonShape,
+  ButtonVariant,
+  ButtonColor,
+} from './ButtonTypes.js';

package/src/calendar/calendar.ts

@@ -1,4 +1,4 @@
-import { LitElement, html, nothing } from 'lit';
+import { LitElement, html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { addDays, addMonths, formatDate } from './utils.js';
 import { CalendarEvent } from './calendar-event.js';
@@ -10,7 +10,7 @@ import styles from './calendar.scss';
  * @label Calendar
  * @tag wc-calendar
  * @rawTag calendar
- * @summary A Material 3 inspired full calendar component for displaying events in day, week, or month views.
+ * @summary A full calendar component for displaying events in day, week, or month views.
  *
  * @cssprop --calendar-border-color - Border color used throughout the calendar grid.
  * @cssprop --calendar-event-bg-color - Background color for calendar events.

package/src/canvas/canvas.ts

@@ -1,4 +1,4 @@
-import { html, LitElement, svg, nothing } from 'lit';
+import { html, LitElement, svg, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import IndividualComponent from '@/IndividualComponent.js';
@@ -89,7 +89,7 @@ interface CanvasViewBox {
  * @label Canvas
  * @tag wc-canvas
  * @rawTag canvas
- * @summary A Material 3 inspired SVG canvas for drawing shapes, lines, and connectors on a dotted grid.
+ * @summary A SVG canvas for drawing shapes, lines, and connectors on a dotted grid.
  *
  * @cssprop --canvas-background - Background color for the canvas wrapper. Defaults to surface-container-low.
  * @cssprop --canvas-dot-color - Color of the background grid dots. Defaults to outline-variant.

package/src/card/card.scss

@@ -158,7 +158,7 @@
     --_container-state-opacity: 0.08;
   }
 
-  &:has(.card.pressed):not([disabled]) {
+  &:active:not([disabled]) {
     --_container-elevation-level: 1;
     --_container-state-opacity: 0.12;
   }
@@ -185,7 +185,7 @@
     --_container-state-opacity: 0.08;
   }
 
-  &:has(.card.pressed):not([disabled]) {
+  &:active:not([disabled]) {
     --_container-elevation-level: 0;
     --_container-state-opacity: 0.1;
   }
@@ -216,7 +216,7 @@
     --_container-state-opacity: 0.08;
   }
 
-  &:has(.card.pressed):not([disabled]) {
+  &:active:not([disabled]) {
     --_container-state-opacity: 0.12;
   }
 

package/src/card/card.ts

@@ -1,17 +1,17 @@
-import { LitElement, html, nothing } from 'lit';
+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 { isLink } from '@/__utils/is-link.js';
-import { observerSlotChangesWithCallback } from '@/__utils/observe-slot-change.js';
-import { throttle } from '@/__utils/throttle.js';
+} from '../__internal/utils/dispatch-event-utils.js';
+import { isLink } from '@/__internal/utils/is-link.js';
+import { observerSlotChangesWithCallback } from '@/__internal/utils/observe-slot-change.js';
+import { throttle } from '@/__internal/utils/throttle.js';
 import IndividualComponent from '@/IndividualComponent.js';
 import styles from './card.scss';
 import colorStyles from './card-colors.scss';
-import NativeHyperlinkMixin from '@/__mixins/NativeHyperlinkMixin.js';
+import NativeHyperlinkMixin from '@/__internal/mixins/NativeHyperlinkMixin.js';
 
 type CardVariant = 'elevated' | 'filled' | 'outlined';
 
@@ -19,7 +19,7 @@ type CardVariant = 'elevated' | 'filled' | 'outlined';
  * @label Card
  * @tag wc-card
  * @rawTag card
- * @summary A Material 3 inspired card surface for grouping related content.
+ * @summary A card surface for grouping related content.
  * @cssprop --card-padding - Inner padding for the card container. Defaults to 1rem.
  * @cssprop --card-shape - Corner radius for the card container. Defaults to a large radius.
  * @cssprop --card-gap - Gap between slotted children.
@@ -56,16 +56,13 @@ export class Card extends NativeHyperlinkMixin(LitElement) {
   disabledReason: string = '';
 
   /**
-   * Sets the delay for throttle in milliseconds. Defaults to 200 milliseconds.
+   * Sets the delay for throttle in milliseconds. When null (default), no throttle is applied.
    */
-  @property() throttleDelay = 200;
+  @property() throttleDelay?: number;
 
   /**
    * States
    */
-  @state()
-  isPressed = false;
-
   @state()
   private slotHasContent = false;
 
@@ -73,11 +70,18 @@ export class Card extends NativeHyperlinkMixin(LitElement) {
 
   #tabindex?: number = 0;
 
+  constructor() {
+    super();
+    this.addEventListener('click', this.__dispatchClickWithThrottle);
+  }
+
   override firstUpdated() {
-    this.__dispatchClickWithThrottle = throttle(
-      this.__dispatchClick,
-      this.throttleDelay,
-    );
+    if (typeof this.throttleDelay === 'number') {
+      this.__dispatchClickWithThrottle = throttle(
+        this.__dispatchClick,
+        this.throttleDelay,
+      );
+    }
     observerSlotChangesWithCallback(
       this.renderRoot.querySelector('slot'),
       hasContent => {
@@ -130,21 +134,6 @@ export class Card extends NativeHyperlinkMixin(LitElement) {
     return nothing;
   }
 
-  __handlePress = (event: KeyboardEvent | MouseEvent) => {
-    if (this.disabled) return;
-    if (
-      event instanceof KeyboardEvent &&
-      event.type === 'keydown' &&
-      (event.key === 'Enter' || event.key === ' ')
-    ) {
-      this.isPressed = true;
-    } else if (event.type === 'mousedown') {
-      this.isPressed = true;
-    } else {
-      this.isPressed = false;
-    }
-  };
-
   render() {
     const isLinkElement = isLink(this);
     const disableSlotTabbing = this.actionable || isLinkElement;
@@ -167,7 +156,6 @@ export class Card extends NativeHyperlinkMixin(LitElement) {
       [`variant-${this.variant}`]: true,
       actionable: (this.actionable && !this.disabled) || isLinkElement,
       disabled: this.disabled,
-      pressed: this.isPressed,
       'has-content': this.slotHasContent,
     };
 
@@ -182,10 +170,6 @@ export class Card extends NativeHyperlinkMixin(LitElement) {
         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}
@@ -199,10 +183,6 @@ export class Card extends NativeHyperlinkMixin(LitElement) {
       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}`}

package/src/chart-bar/chart-bar.ts

@@ -1,4 +1,4 @@
-import { html, LitElement, PropertyValues } from 'lit';
+import { html, LitElement, PropertyValues } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { select, max, scaleBand, scaleLinear, scaleOrdinal, axisLeft, axisBottom, ScaleOrdinal } from 'd3';
@@ -34,7 +34,7 @@ function debounce<T extends (...args: any[]) => void>(fn: T, wait: number): T {
  * @label Chart Bar
  * @tag wc-chart-bar
  * @rawTag chart-bar
- * @summary A vertical bar chart that follows Material Design 3 color and spacing tokens.
+ * @summary A vertical bar chart that follows color and spacing tokens.
  * @tags charts
  *
  * @example

package/src/chart-bar/chart-stacked-bar.ts

@@ -1,4 +1,4 @@
-import { html, LitElement, PropertyValues } from 'lit';
+import { html, LitElement, PropertyValues } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { select, max, scaleBand, scaleLinear, scaleOrdinal, axisLeft, axisBottom, stack, Series, SeriesPoint, ScaleOrdinal } from 'd3';
@@ -42,7 +42,7 @@ function debounce<T extends (...args: any[]) => void>(fn: T, wait: number): T {
  * @label Chart Stacked Bar
  * @tag wc-chart-stacked-bar
  * @rawTag chart-stacked-bar
- * @summary A stacked bar chart that groups series by category using Material Design 3 tokens.
+ * @summary A stacked bar chart that groups series by category using tokens.
  * @tags charts
  *
  * @example

package/src/checkbox/checkbox.ts

@@ -1,8 +1,9 @@
-import { html, LitElement, svg } from 'lit';
+import { html, LitElement, svg } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { spread } from '@/__directive/spread.js';
+import { spread } from '@/__internal/directive/spread.js';
 import styles from './checkbox.scss';
+import IndividualComponent from '@/IndividualComponent.js';
 
 /**
  * @label Checkbox
@@ -11,7 +12,7 @@ import styles from './checkbox.scss';
  * @summary Captures boolean input with an optional indeterminate mode.
  * @overview
  * <p>Checkboxes allow users to select one or more items from a set. Checkboxes can turn an option on or off.</p>
- * <p>Material Design 3 checkboxes feature a smooth animation and clear visual states for checked, unchecked, and indeterminate.</p>
+ * <p>checkboxes feature a smooth animation and clear visual states for checked, unchecked, and indeterminate.</p>
  * @cssprop --checkbox-size: Size of the checkbox container.
  * @cssprop --checkbox-selected-color: Color of the checkbox when selected.
  * @cssprop --checkbox-unselected-color: Color of the checkbox border when unselected.
@@ -27,6 +28,7 @@ import styles from './checkbox.scss';
  * <wc-checkbox label="Accept terms"></wc-checkbox>
  * ```
  */
+@IndividualComponent
 export class Checkbox extends LitElement {
   static styles = [styles];
 
@@ -91,12 +93,15 @@ export class Checkbox extends LitElement {
   @property({ type: Object })
   configAria: Record<string, string> = {};
 
+  /** True while the checkbox container has keyboard focus. */
   @state()
   private hasFocus = false;
 
+  /** True while the user is actively pressing the checkbox (mouse/keyboard). */
   @state()
   private isActive = false;
 
+  /** True when slotted label content is present. */
   @state()
   private slotHasContent = false;
 
@@ -106,6 +111,9 @@ export class Checkbox extends LitElement {
   @query('.input-native')
   private nativeElement?: HTMLInputElement;
 
+  // ── Private fields ────────────────────────────────────────────────────────
+
+  /** Captured `tabindex` attribute value forwarded to the inner container. */
   private tabindex?: string;
 
   connectedCallback() {
@@ -257,7 +265,7 @@ export class Checkbox extends LitElement {
           ${spread(this.configAria)}
         >
           <wc-ripple class="ripple"></wc-ripple>
-          <wc-focus-ring class="focus-ring" for='container'></wc-focus-ring>
+          <wc-focus-ring class="focus-ring" for="container"></wc-focus-ring>
           <div class="outline"></div>
           <div class="background"></div>
           <svg class="icon" viewBox="0 0 12 12">

package/src/chip/chip/chip.scss

@@ -165,7 +165,7 @@
   --_chip-state-opacity: 0.08;
 }
 
-:host([pressed]) {
+:host(:active) {
   --_chip-state-opacity: 0.12;
 }