@redvars/peacock 3.8.1 → 3.8.2

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.

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>

package/src/tabs/demo/index.html

@@ -1,90 +1,90 @@
 <!doctype html>
-<html lang='en-GB'>
-<head>
-  <meta charset='utf-8'>
-  <meta name='viewport' content='width=device-width, initial-scale=1.0, viewport-fit=cover' />
-  <link rel='stylesheet' href='/dist/assets/styles.css' />
-  <style>
-    body {
-      background: #fafafa;
-      padding: 2rem;
-      display: grid;
-      gap: 1rem;
-    }
-  </style>
-</head>
-<body>
+<html lang="en-GB">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, viewport-fit=cover"
+    />
+    <link rel="stylesheet" href="/dist/assets/styles.css" />
+    <style>
+      body {
+        background: #fafafa;
+        padding: 2rem;
+        display: grid;
+        gap: 1rem;
+      }
+    </style>
+  </head>
+  <body>
+    <wc-tabs variant="primary">
+      <wc-tab icon="home">Home</wc-tab>
+      <wc-tab active="true" badge="3">Updates</wc-tab>
+      <wc-tab>
+        Inbox
+        <wc-icon slot="icon" name="mail"></wc-icon>
+        <wc-badge slot="badge" value="99+"></wc-badge>
+      </wc-tab>
+      <wc-tab disabled="true" icon="block" badge="!">Disabled</wc-tab>
+    </wc-tabs>
 
-  <wc-tabs variant="primary">
-    <wc-tab icon="home">Home</wc-tab>
-    <wc-tab active="true" badge="3">Updates</wc-tab>
-    <wc-tab>
-      Inbox
-      <wc-icon slot="icon" name="mail"></wc-icon>
-      <wc-badge slot="badge" value="99+"></wc-badge>
-    </wc-tab>
-    <wc-tab disabled="true" icon="block" badge="!">Disabled</wc-tab>
-  </wc-tabs>
+    <wc-tabs variant="secondary">
+      <wc-tab active="true">Overview</wc-tab>
+      <wc-tab>
+        Activity
+        <wc-icon slot="icon" name="timeline"></wc-icon>
+      </wc-tab>
+      <wc-tab>Settings</wc-tab>
+    </wc-tabs>
 
-  <wc-tabs variant="secondary">
-    <wc-tab active="true">Overview</wc-tab>
-    <wc-tab>
-      Activity
-      <wc-icon slot="icon" name="timeline"></wc-icon>
-    </wc-tab>
-    <wc-tab>Settings</wc-tab>
-  </wc-tabs>
+    <wc-tabs variant="filled">
+      <wc-tab active="true">Daily</wc-tab>
+      <wc-tab>Weekly</wc-tab>
+      <wc-tab>
+        Monthly
+        <wc-badge slot="badge" value="3"></wc-badge>
+      </wc-tab>
+      <wc-tab disabled="true">Archived</wc-tab>
+    </wc-tabs>
 
-  <wc-tabs variant="filled">
-    <wc-tab active="true">Daily</wc-tab>
-    <wc-tab>Weekly</wc-tab>
-    <wc-tab>
-      Monthly
-      <wc-badge slot="badge" value="3"></wc-badge>
-    </wc-tab>
-    <wc-tab disabled="true">Archived</wc-tab>
-  </wc-tabs>
+    <wc-tabs variant="contained">
+      <wc-tab active="true">Summary</wc-tab>
+      <wc-tab>
+        Reports
+        <wc-icon slot="icon" name="bar_chart"></wc-icon>
+      </wc-tab>
+      <wc-tab>Exports</wc-tab>
+    </wc-tabs>
 
-  <wc-tabs variant="contained">
-    <wc-tab active="true">Summary</wc-tab>
-    <wc-tab>
-      Reports
-      <wc-icon slot="icon" name="bar_chart"></wc-icon>
-    </wc-tab>
-    <wc-tab>Exports</wc-tab>
-  </wc-tabs>
+    <wc-tab-group>
+      <wc-tabs>
+        <wc-tab icon="home">Home</wc-tab>
+        <wc-tab active="true" badge="3">Updates</wc-tab>
+        <wc-tab>
+          Inbox
+          <wc-icon slot="icon" name="mail"></wc-icon>
+          <wc-badge slot="badge" value="99+"></wc-badge>
+        </wc-tab>
+        <wc-tab disabled="true" icon="block" badge="!">Disabled</wc-tab>
+      </wc-tabs>
 
+      <wc-tab-panel>
+        <pc-text type="heading"> Home content </pc-text>
+      </wc-tab-panel>
 
-  <wc-tab-group>
-  <wc-tabs>
-    <wc-tab icon="home">Home</wc-tab>
-    <wc-tab active="true" badge="3">Updates</wc-tab>
-    <wc-tab>
-      Inbox
-      <wc-icon slot="icon" name="mail"></wc-icon>
-      <wc-badge slot="badge" value="99+"></wc-badge>
-    </wc-tab>
-    <wc-tab disabled="true" icon="block" badge="!">Disabled</wc-tab>
-  </wc-tabs>
+      <wc-tab-panel>
+        <pc-text type="heading"> Updates content </pc-text>
+      </wc-tab-panel>
 
-  <wc-tab-panel>
-    <pc-text type="heading"> Home content </pc-text>
-  </wc-tab-panel>
+      <wc-tab-panel>
+        <pc-text type="heading"> Inbox content </pc-text>
+      </wc-tab-panel>
 
-  <wc-tab-panel>
-    <pc-text type="heading"> Updates content </pc-text>
-  </wc-tab-panel>
+      <wc-tab-panel>
+        <pc-text type="heading"> Disabled content </pc-text>
+      </wc-tab-panel>
+    </wc-tab-group>
 
-  <wc-tab-panel>
-    <pc-text type="heading"> Inbox content </pc-text>
-  </wc-tab-panel>
-
-  <wc-tab-panel>
-    <pc-text type="heading"> Disabled content </pc-text>
-  </wc-tab-panel>
-</wc-tab-group>
-
-
-  <script type='module' src='/dist/peacock-loader.js'></script>
-</body>
+    <script type="module" src="/dist/loader.js"></script>
+  </body>
 </html>

package/src/tabs/tab-group.ts

@@ -3,6 +3,7 @@ import { property } from 'lit/decorators.js';
 import styles from './tab-group.scss';
 import { Tabs } from './tabs.js';
 import { TabPanel } from './tab-panel.js';
+import IndividualComponent from '@/IndividualComponent.js';
 
 /**
  * @label Tab Group
@@ -28,6 +29,7 @@ import { TabPanel } from './tab-panel.js';
  * ```
  * @tags navigation
  */
+@IndividualComponent
 export class TabGroup extends LitElement {
   static styles = [styles];
 

package/src/tabs/tab-panel.ts

@@ -1,6 +1,7 @@
 import { html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 import styles from './tab-panel.scss';
+import IndividualComponent from '@/IndividualComponent.js';
 
 /**
  * @label Tab Panel
@@ -17,6 +18,7 @@ import styles from './tab-panel.scss';
  * ```
  * @tags navigation
  */
+@IndividualComponent
 export class TabPanel extends LitElement {
   static styles = [styles];
 

package/src/tabs/tab.scss

@@ -198,7 +198,7 @@
     --_container-state-opacity: 0.08;
   }
 
-  &.pressed:not(:where(.disabled)) {
+  &:active:not(:where(.disabled)) {
     --_container-state-opacity: 0.12;
   }
 
@@ -260,7 +260,7 @@
     --_container-state-opacity: 0.08;
   }
 
-  &.pressed:not(:where(.disabled)) {
+  &:active:not(:where(.disabled)) {
     --_container-state-opacity: 0.12;
   }
 
@@ -341,7 +341,7 @@
     --_container-state-opacity: 0.08;
   }
 
-  &.pressed:not(:where(.disabled)) {
+  &:active:not(:where(.disabled)) {
     --_container-state-opacity: 0.12;
   }
 
@@ -418,7 +418,7 @@
     --_container-state-opacity: 0.08;
   }
 
-  &.pressed:not(:where(.disabled)) {
+  &:active:not(:where(.disabled)) {
     --_container-state-opacity: 0.12;
   }