@redvars/peacock 3.8.1 → 3.8.3

package/src/ripple/ripple.ts

@@ -1,10 +1,11 @@
 import { LitElement, html, css, PropertyValues, isServer } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
+import IndividualComponent from '@/IndividualComponent.js';
 import {
   Attachable,
   AttachableController,
-} from '@/__controllers/attachable-controller.js';
+} from '@/__internal/controllers/attachable-controller.js';
 
 const PRESS_GROW_MS = 450;
 const MINIMUM_PRESS_MS = 225;
@@ -118,6 +119,7 @@ const FORCED_COLORS = window.matchMedia('(forced-colors: active)');
  * ```
  * @tags display
  */
+@IndividualComponent
 export class Ripple extends LitElement implements Attachable {
   static styles = css`
     :host {
@@ -190,24 +192,35 @@ export class Ripple extends LitElement implements Attachable {
    */
   @property({ type: Boolean, reflect: true }) disabled = false;
 
+  /** True while the pointer is hovering over the host element. */
   @state() private hovered = false;
 
+  /** True while a press animation is playing. */
   @state() private pressed = false;
 
   @query('.surface') private readonly mdRoot!: HTMLElement | null;
 
+  // ── Private fields ────────────────────────────────────────────────────────
+
+  /** CSS size string (e.g. `"48px"`) for the growing ripple circle. */
   private rippleSize = '';
 
+  /** CSS scale factor applied to the ripple at the end of its animation. */
   private rippleScale = '';
 
+  /** Pixel size of the ripple at its initial (pre-grow) state. */
   private initialSize = 0;
 
+  /** Reference to the currently running grow animation, if any. */
   private growAnimation?: Animation;
 
+  /** Current interaction state of the ripple state machine. */
   private state = State.INACTIVE;
 
+  /** Pointer event that initiated the current press, used to calculate start coordinates. */
   private rippleStartEvent?: PointerEvent;
 
+  /** Bound reference to `handleEvent` passed to `addEventListener` / `removeEventListener`. */
   private readonly _boundHandleEvent = this.handleEvent.bind(this);
 
   get htmlFor() {

package/src/search/search.ts

@@ -1,18 +1,18 @@
-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 { live } from 'lit/directives/live.js';
 import IndividualComponent from '@/IndividualComponent.js';
 import styles from './search.scss';
 import colorStyles from './search-colors.scss';
-import { observerSlotChangesWithCallback } from '@/__utils/observe-slot-change.js';
+import { observerSlotChangesWithCallback } from '@/__internal/utils/observe-slot-change.js';
 
 /**
  * @label Search
  * @tag wc-search
  * @rawTag search
  *
- * @summary A Material 3 search bar for filtering and finding content.
+ * @summary A search bar for filtering and finding content.
  * @overview
  * <p>The search component provides a text input designed for search interactions.
  * It supports outlined and filled variants, an optional clear button, and leading/trailing icon slots.</p>

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

@@ -1,15 +1,16 @@
-import { html, LitElement } from 'lit';
+import { html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 import styles from './segmented-button-group.scss';
 import { SegmentedButton } from './segmented-button.js';
+import IndividualComponent from '@/IndividualComponent.js';
 
 /**
  * @label Segmented Button Group
  * @tag wc-segmented-button-group
  * @rawTag segmented-button-group
- * @summary A container for segmented buttons following Material Design 3.
+ * @summary A container for segmented buttons.
  * @overview
- * <p>Segmented buttons help people select options, switch views, or sort elements. They follow the Material Design 3 specification.</p>
+ * <p>Segmented buttons help people select options, switch views, or sort elements. They follow the specification.</p>
  * <p>Use <code>multi-select</code> to allow more than one segment to be selected at a time. By default only one segment can be active (single-select).</p>
  *
  * @cssprop --segmented-button-group-shape: Border-radius of the group container.
@@ -27,6 +28,7 @@ import { SegmentedButton } from './segmented-button.js';
  *
  * @tags controls
  */
+@IndividualComponent
 export class SegmentedButtonGroup extends LitElement {
   static styles = [styles];
 
@@ -64,7 +66,9 @@ export class SegmentedButtonGroup extends LitElement {
   }
 
   private _getSegments(): SegmentedButton[] {
-    return Array.from(this.querySelectorAll<SegmentedButton>('wc-segmented-button'));
+    return Array.from(
+      this.querySelectorAll<SegmentedButton>('wc-segmented-button'),
+    );
   }
 
   private _onSegmentChange = (ev: CustomEvent) => {

package/src/segmented-button/segmented-button.ts

@@ -2,6 +2,7 @@ import { html, LitElement, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import styles from './segmented-button.scss';
+import IndividualComponent from '@/IndividualComponent.js';
 
 /**
  * @label Segmented Button
@@ -31,6 +32,7 @@ import styles from './segmented-button.scss';
  *
  * @tags controls
  */
+@IndividualComponent
 export class SegmentedButton extends LitElement {
   static styles = [styles];
 
@@ -58,9 +60,11 @@ export class SegmentedButton extends LitElement {
   @property({ type: String })
   icon?: string;
 
+  /** True while the segment has keyboard focus. */
   @state()
   private hasFocus = false;
 
+  /** True while the user is actively pressing the segment. */
   @state()
   private isActive = false;
 

package/src/select/option.ts

@@ -1,6 +1,7 @@
 import { css, html, LitElement, nothing } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import type { MenuItem } from '../menu/menu-item/menu-item.js';
+import IndividualComponent from '@/IndividualComponent.js';
 
 /**
  * @label Select Option
@@ -17,6 +18,7 @@ import type { MenuItem } from '../menu/menu-item/menu-item.js';
  * </wc-select>
  * ```
  */
+@IndividualComponent
 export class SelectOptionElement extends LitElement {
   static override styles = [
     css`

package/src/side-sheet/side-sheet.ts

@@ -1,4 +1,4 @@
-import { LitElement, html, nothing } from 'lit';
+import { LitElement, html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import IndividualComponent from '../IndividualComponent.js';
@@ -8,7 +8,7 @@ import styles from './side-sheet.scss';
  * @label Side Sheet
  * @tag wc-side-sheet
  * @rawTag side-sheet
- * @summary Side sheets slide in from the edge of the screen to reveal supplemental content. Supports standard and modal variants per Material Design 3.
+ * @summary Side sheets slide in from the edge of the screen to reveal supplemental content. Supports standard and modal variants.
  *
  * @cssprop --side-sheet-container-color - Background color of the sheet container.
  * @cssprop --side-sheet-scrim-color - Color of the modal scrim overlay.
@@ -91,7 +91,7 @@ export class SideSheet extends LitElement {
         aria-modal=${this.variant === 'modal' ? 'true' : 'false'}
         aria-hidden=${!this.open ? 'true' : 'false'}
       >
-        <div class="content">
+        <div class="content" ?inert=${!this.open}>
           <slot></slot>
         </div>
       </div>

package/src/sidebar-menu/sidebar-menu-item.scss

@@ -14,7 +14,7 @@
   --sidebar-menu-item-label-color: var(--color-on-surface);
   --sidebar-menu-item-icon-color: var(--color-on-surface-variant);
   --sidebar-menu-item-selected-background: var(--color-secondary-container);
-  --sidebar-menu-item-selected-color: var(--color-on-secondary-container);
+  --sidebar-menu-item-selected-label-color: var(--color-on-secondary-container);
   --sidebar-menu-item-focus-ring-color: var(--color-primary);
 
   // M3 animation timing
@@ -42,7 +42,8 @@
 
   &.selected {
     --_container-color: var(--sidebar-menu-item-selected-background);
-    --_label-color: var(--sidebar-menu-item-selected-color);
+    --_label-color: var(--sidebar-menu-item-selected-label-color);
+    font-weight: var(--font-weight-bold) !important;
   }
 
   &.disabled {
@@ -78,9 +79,15 @@
 .focus-ring {
   z-index: 2;
   --focus-ring-color: var(--sidebar-menu-item-focus-ring-color);
-  --focus-ring-container-shape-start-start: var(--sidebar-menu-item-border-radius);
-  --focus-ring-container-shape-start-end: var(--sidebar-menu-item-border-radius);
-  --focus-ring-container-shape-end-start: var(--sidebar-menu-item-border-radius);
+  --focus-ring-container-shape-start-start: var(
+    --sidebar-menu-item-border-radius
+  );
+  --focus-ring-container-shape-start-end: var(
+    --sidebar-menu-item-border-radius
+  );
+  --focus-ring-container-shape-end-start: var(
+    --sidebar-menu-item-border-radius
+  );
   --focus-ring-container-shape-end-end: var(--sidebar-menu-item-border-radius);
 }
 
@@ -99,4 +106,3 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-

package/src/sidebar-menu/sidebar-menu-item.ts

@@ -117,7 +117,7 @@ export class SidebarMenuItem extends LitElement {
           href="${this.href}"
           target="${this.target}"
           class="${classes}"
-          aria-disabled="${this.disabled}"
+          ?aria-disabled=${this.disabled}
           tabindex="${this.disabled ? -1 : 0}"
           @click="${this._onClick}"
         >
@@ -133,7 +133,8 @@ export class SidebarMenuItem extends LitElement {
         role="treeitem"
         aria-label="${this.label}"
         aria-selected="${String(this.selected)}"
-        aria-disabled="${this.disabled}"
+        ?aria-disabled=${this.disabled}
+        ?disabled=${this.disabled}
         tabindex="${this.disabled ? -1 : 0}"
         @click="${this._onClick}"
         @keydown="${(e: KeyboardEvent) => {

package/src/skeleton/skeleton.ts

@@ -1,6 +1,7 @@
 import { html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 import styles from './skeleton.scss';
+import IndividualComponent from '@/IndividualComponent.js';
 
 /**
  * @label Skeleton
@@ -14,9 +15,11 @@ import styles from './skeleton.scss';
  * <wc-skeleton visible></wc-skeleton>
  * ```
  */
+@IndividualComponent
 export class Skeleton extends LitElement {
   static styles = [styles];
 
+  /** When true, the skeleton animation is shown. */
   @property({ type: Boolean, reflect: true }) visible: boolean = false;
 
   render() {

package/src/slider/slider.ts

@@ -2,6 +2,7 @@ import { LitElement, html } from 'lit';
 import { property, state, query } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import sliderStyles from './slider.scss';
+import IndividualComponent from '@/IndividualComponent.js';
 
 /**
  * @label Slider
@@ -18,6 +19,7 @@ import sliderStyles from './slider.scss';
  * <wc-slider min="0" max="100" value="50"></wc-slider>
  * ```
  */
+@IndividualComponent
 export class Slider extends LitElement {
   static styles = [sliderStyles];
 
@@ -56,10 +58,11 @@ export class Slider extends LitElement {
    */
   @property({ type: Boolean, attribute: 'show-value' }) showValue = false;
 
+  /** True while the user is actively dragging the thumb. */
   @state() private isDragging = false;
 
   @query('.slider-container') private container!: HTMLElement;
-  
+
   @query('.thumb') private thumbElement!: HTMLElement;
 
   private handleInput(event: MouseEvent | TouchEvent) {

package/src/snackbar/snackbar.ts

@@ -2,6 +2,7 @@ import { LitElement, html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import styles from './snackbar.scss';
+import IndividualComponent from '@/IndividualComponent.js';
 
 type SnackbarCloseReason = 'timeout' | 'dismiss' | 'action' | 'programmatic';
 
@@ -26,6 +27,7 @@ type SnackbarCloseReason = 'timeout' | 'dismiss' | 'action' | 'programmatic';
  * ```
  * @tags display, feedback
  */
+@IndividualComponent
 export class Snackbar extends LitElement {
   static styles = [styles];
 
@@ -33,26 +35,37 @@ export class Snackbar extends LitElement {
 
   private static readonly EXIT_ANIMATION_MS = 180;
 
+  /** Whether the snackbar is currently visible. */
   @property({ type: Boolean, reflect: true }) open = false;
 
+  /** The message text to display. Can also be provided via the default slot. */
   @property({ type: String }) message = '';
 
+  /** Label for the optional action button. When empty, no action button is rendered. */
   @property({ type: String, attribute: 'action-label' }) actionLabel = '';
 
+  /** When true, a dismiss icon button is shown on the trailing end. */
   @property({ type: Boolean, attribute: 'show-close-icon' })
   showCloseIcon = false;
 
+  /** Auto-hide duration in milliseconds. Set to `0` to disable auto-hide. */
   @property({ type: Number }) duration = 4000;
 
+  /** When true, the snackbar content is allowed to wrap to multiple lines. */
   @property({ type: Boolean, reflect: true }) multiline = false;
 
+  /** When true, renders the snackbar in a static preview state (always visible, no animation). */
   @property({ type: Boolean, reflect: true }) preview = false;
 
+  /** True while the exit animation is running before the snackbar fully closes. */
   @state() private dismissing = false;
-  
 
+  // ── Private fields ────────────────────────────────────────────────────────
+
+  /** Timer handle for the auto-hide timeout. */
   private hideTimer: ReturnType<typeof setTimeout> | null = null;
 
+  /** Timer handle for the exit animation duration timeout. */
   private exitTimer: ReturnType<typeof setTimeout> | null = null;
 
   private readonly handleGlobalSnackbarOpen = (
@@ -72,6 +85,32 @@ export class Snackbar extends LitElement {
     );
   }
 
+  disconnectedCallback() {
+    document.removeEventListener(
+      Snackbar.GLOBAL_OPEN_EVENT,
+      this.handleGlobalSnackbarOpen,
+    );
+    this.clearExitTimer();
+    this.clearTimer();
+    super.disconnectedCallback();
+  }
+
+  protected updated(changedProperties: Map<string, unknown>) {
+    if (changedProperties.has('open')) {
+      if (this.open) {
+        document.dispatchEvent(
+          new CustomEvent(Snackbar.GLOBAL_OPEN_EVENT, {
+            detail: { source: this },
+          }),
+        );
+      }
+
+      this.scheduleAutoHide();
+    }
+  }
+
+  // ── Public methods ────────────────────────────────────────────────────────
+
   show() {
     this.dismissing = false;
     this.clearExitTimer();
@@ -163,30 +202,6 @@ export class Snackbar extends LitElement {
     }, this.duration);
   }
 
-  protected updated(changedProperties: Map<string, unknown>) {
-    if (changedProperties.has('open')) {
-      if (this.open) {
-        document.dispatchEvent(
-          new CustomEvent(Snackbar.GLOBAL_OPEN_EVENT, {
-            detail: { source: this },
-          }),
-        );
-      }
-
-      this.scheduleAutoHide();
-    }
-  }
-
-  disconnectedCallback() {
-    document.removeEventListener(
-      Snackbar.GLOBAL_OPEN_EVENT,
-      this.handleGlobalSnackbarOpen,
-    );
-    this.clearExitTimer();
-    this.clearTimer();
-    super.disconnectedCallback();
-  }
-
   render() {
     const liveRole =
       this.actionLabel || this.showCloseIcon ? 'alert' : 'status';

package/src/spinner/spinner.ts

@@ -1,6 +1,7 @@
 import { LitElement, html, css } from 'lit';
 
 import styles from './spinner.scss';
+import IndividualComponent from '@/IndividualComponent.js';
 
 /**
  * @label Spinner
@@ -16,6 +17,7 @@ import styles from './spinner.scss';
  * <wc-spinner></wc-spinner>
  * ```
  */
+@IndividualComponent
 export class Spinner extends LitElement {
   static styles = [styles];
 

package/src/svg/svg.ts

@@ -2,10 +2,11 @@ import { html, LitElement } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 
-import { sanitizeSvg } from '@/__utils/sanitize-svg.js';
+import { sanitizeSvg } from '@/__internal/utils/sanitize-svg.js';
 import { fetchSVG } from '../icon/datasource.js';
 
 import styles from './svg.scss';
+import IndividualComponent from '@/IndividualComponent.js';
 
 /**
  * @label SVG
@@ -22,6 +23,7 @@ import styles from './svg.scss';
  * <wc-svg src="/icons/my-icon.svg" image-title="My icon"></wc-svg>
  * ```
  */
+@IndividualComponent
 export class Svg extends LitElement {
   static styles = [styles];
 
@@ -34,15 +36,21 @@ export class Svg extends LitElement {
   /** Enable click-to-preview lightbox. */
   @property({ type: Boolean, reflect: true }) preview = false;
 
+  /** True once the element has entered the viewport and the SVG fetch has been initiated. */
   @state() private _loaded = false;
 
+  /** True when the lightbox preview overlay is visible. */
   @state() private _previewOpen = false;
 
+  /** Sanitized inline SVG markup ready for rendering. */
   @state() private _svgContent: string = '';
 
-  // token to avoid stale fetch results
+  // ── Private fields ────────────────────────────────────────────────────────
+
+  /** Monotonically incrementing token used to discard stale fetch results. */
   private _fetchId = 0;
 
+  /** IntersectionObserver that triggers the SVG fetch when the element enters the viewport. */
   private _intersectionObserver: IntersectionObserver | null = null;
 
   disconnectedCallback() {
@@ -70,7 +78,7 @@ export class Svg extends LitElement {
     if (!wrapper) return;
 
     this._intersectionObserver = new IntersectionObserver(
-      (entries) => {
+      entries => {
         if (entries[0].isIntersecting) {
           this._loaded = true;
           this._intersectionObserver?.disconnect();
@@ -106,7 +114,8 @@ export class Svg extends LitElement {
       this._previewOpen = true;
       // Move focus into the dialog after render
       this.updateComplete.then(() => {
-        const closeBtn = this.shadowRoot?.querySelector<HTMLElement>('.preview-close');
+        const closeBtn =
+          this.shadowRoot?.querySelector<HTMLElement>('.preview-close');
         closeBtn?.focus();
       });
     }
@@ -118,7 +127,8 @@ export class Svg extends LitElement {
     this._previewOpen = false;
     if (wasOpen) {
       // Return focus to the trigger
-      const trigger = this.shadowRoot?.querySelector<HTMLElement>('.svg-content');
+      const trigger =
+        this.shadowRoot?.querySelector<HTMLElement>('.svg-content');
       trigger?.focus();
     }
   }
@@ -142,16 +152,24 @@ export class Svg extends LitElement {
         class="preview-overlay ${this._previewOpen ? 'open' : ''}"
         role="dialog"
         aria-modal="true"
-        aria-label=${this.imageTitle ? `Preview: ${this.imageTitle}` : 'SVG preview'}
+        aria-label=${this.imageTitle
+          ? `Preview: ${this.imageTitle}`
+          : 'SVG preview'}
         @click=${this._closePreview}
-        @keydown=${(e: KeyboardEvent) => e.key === 'Escape' && this._closePreview(e)}
+        @keydown=${(e: KeyboardEvent) =>
+          e.key === 'Escape' && this._closePreview(e)}
       >
         <button
           class="preview-close"
           aria-label="Close preview"
           @click=${this._closePreview}
-        >&#x2715;</button>
-        <div class="preview-content" @click=${(e: Event) => e.stopPropagation()}>
+        >
+          &#x2715;
+        </button>
+        <div
+          class="preview-content"
+          @click=${(e: Event) => e.stopPropagation()}
+        >
           ${unsafeSVG(this._svgContent)}
         </div>
       </div>

package/src/switch/switch.ts

@@ -2,7 +2,7 @@ import { html, nothing } 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 './switch.scss';
 import BaseInput from '../input/BaseInput.js';

package/src/table/table.ts

@@ -3,9 +3,10 @@ import { property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 
-import { throttle } from '@/__utils/throttle.js';
+import { throttle } from '@/__internal/utils/throttle.js';
 
 import styles from './table.scss';
+import IndividualComponent from '@/IndividualComponent.js';
 
 const DEFAULT_CELL_WIDTH = 16; // in rem
 
@@ -36,6 +37,7 @@ export interface TableColumn {
  * ```
  * @tags display, data
  */
+@IndividualComponent
 export class Table extends LitElement {
   static styles = [styles];
 
@@ -130,18 +132,25 @@ export class Table extends LitElement {
   @property({ type: String, attribute: 'empty-state-description' })
   emptyStateDescription: string = 'There are no items to display';
 
+  /** Tracks the currently hovered row and column for hover-highlight CSS. */
   @state()
   private hoveredCell: { row?: any; column?: any } = {};
 
+  /** True when all rows on the current page are selected. */
   @state()
   private isSelectAll: boolean = false;
 
+  /** True when some (but not all) rows on the current page are selected. */
   @state()
   private isSelectAllIntermediate: boolean = false;
 
+  /** True when the scroll container has been scrolled horizontally. */
   @state()
   private isHorizontallyScrolled: boolean = false;
 
+  // ── Private fields ────────────────────────────────────────────────────────
+
+  /** Throttled version of the cell-mouseover handler to avoid excessive state updates. */
   private onCellMouseOverThrottled = throttle((row: any, column: any) => {
     this.hoveredCell = { row, column };
   }, 30);
@@ -224,7 +233,9 @@ export class Table extends LitElement {
 
   private getSortIcon(col: TableColumn): string {
     if (this.sortBy === col.name) {
-      return this.sortOrder === 'asc' ? 'keyboard_arrow_up' : 'keyboard_arrow_down';
+      return this.sortOrder === 'asc'
+        ? 'keyboard_arrow_up'
+        : 'keyboard_arrow_down';
     }
     return '';
   }
@@ -468,7 +479,9 @@ export class Table extends LitElement {
       <div class=${classMap(tableClasses)}>
         <div class="table-scroll-container" @scroll=${this.onScrollContainer}>
           ${this.renderHeader()}
-          ${this.data && this.data.length ? this.renderBody() : this.renderEmptyState()}
+          ${this.data && this.data.length
+            ? this.renderBody()
+            : this.renderEmptyState()}
         </div>
         <div class="table-footer">${this.renderPagination()}</div>
       </div>