@redvars/peacock 3.8.0 → 3.8.2

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

@@ -1,4 +1,4 @@
-@use "../../../scss/mixin";
+@use '../../../scss/mixin';
 
 @include mixin.base-styles;
 
@@ -13,8 +13,10 @@
 
 .menu-item {
   width: 100%;
-  --item-height: 3rem;
-  --item-container-shape-start-start: var(--menu-item-container-shape-start-start);
+  --item-padding-inline: 10px;
+  --item-container-shape-start-start: var(
+    --menu-item-container-shape-start-start
+  );
   --item-container-shape-start-end: var(--menu-item-container-shape-start-end);
   --item-container-shape-end-start: var(--menu-item-container-shape-end-start);
   --item-container-shape-end-end: var(--menu-item-container-shape-end-end);
@@ -32,6 +34,36 @@
   --item-container-selected-color: var(--menu-item-container-selected-color);
   --item-label-text-selected-color: var(--menu-item-label-selected-color);
   --item-icon-size: var(--button-icon-size, var(--_button-icon-size));
+
+  .background {
+    background-color: var(--_container-color);
+    opacity: var(--_container-opacity, 1);
+    border-radius: var(--shape-corner-medium);
+  }
+
+  .focus-ring {
+    --focus-ring-container-shape-start-start: var(--shape-corner-medium);
+    --focus-ring-container-shape-start-end: var(--shape-corner-medium);
+    --focus-ring-container-shape-end-start: var(--shape-corner-medium);
+    --focus-ring-container-shape-end-end: var(--shape-corner-medium);
+    z-index: 2;
+    --focus-ring-inset: 0px;
+  }
+
+  .ripple {
+    --ripple-state-opacity: var(--_container-state-opacity, 0);
+    --ripple-pressed-color: var(--_container-state-color);
+    border-radius: var(--shape-corner-medium);
+  }
+
+  .skeleton {
+    z-index: 2;
+
+    --skeleton-container-shape-start-start: var(--shape-corner-medium);
+    --skeleton-container-shape-start-end: var(--shape-corner-medium);
+    --skeleton-container-shape-end-start: var(--shape-corner-medium);
+    --skeleton-container-shape-end-end: var(--shape-corner-medium);
+  }
 }
 
 :host([selected]) {

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

@@ -3,9 +3,10 @@ import { property, query } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import styles from './menu-item.scss';
 import colorStyles from './menu-item-colors.scss';
-import NativeButtonMixin from '@/__mixins/NativeButtonMixin.js';
-import NativeHyperlinkMixin from '@/__mixins/NativeHyperlinkMixin.js';
+import NativeButtonMixin from '@/__internal/mixins/NativeButtonMixin.js';
+import NativeHyperlinkMixin from '@/__internal/mixins/NativeHyperlinkMixin.js';
 import { Item } from '@/item/item.js';
+import IndividualComponent from '@/IndividualComponent.js';
 
 /**
  * @label Menu Item
@@ -19,30 +20,47 @@ import { Item } from '@/item/item.js';
  * <wc-menu-item>Menu Item</wc-menu-item>
  * ```
  */
+@IndividualComponent
 export class MenuItem extends NativeButtonMixin(
   NativeHyperlinkMixin(LitElement),
 ) {
+  // ── Static ───────────────────────────────────────────────────────────────
+
+  static styles = [styles, colorStyles];
+
+  // ── Properties ───────────────────────────────────────────────────────────
+
+  /** The value associated with this menu item, used to identify it on selection. */
   @property({ type: String }) value = '';
 
+  /** Whether this menu item is currently selected/highlighted. */
   @property({ type: Boolean, reflect: true }) selected = false;
 
+  /** When true, the menu stays open after this item is activated. */
   @property({ type: Boolean, attribute: 'keep-open' }) keepOpen = false;
 
+  /** When true, indicates this item has an associated submenu. */
   @property({ type: Boolean, attribute: 'has-submenu' }) hasSubmenu = false;
 
+  /** Whether the associated submenu is currently open. */
   @property({ type: Boolean, attribute: 'submenu-open' }) submenuOpen = false;
 
+  /** Visual variant of the menu item. */
   @property({ type: String, reflect: true }) variant: 'standard' | 'vibrant' =
     'standard';
 
-  static styles = [styles, colorStyles];
+  // ── Queries ───────────────────────────────────────────────────────────────
 
   @query('wc-item') readonly itemElement!: Item | null;
 
+  // ── Private fields ────────────────────────────────────────────────────────
+
+  /** MutationObserver that triggers re-render when slotted content changes. */
   private readonly _contentObserver = new MutationObserver(() => {
     this.requestUpdate();
   });
 
+  /** Roving tabindex value managed by the parent Menu. */
   private _rovingTabIndex = -1;
 
   connectedCallback() {
@@ -105,7 +123,7 @@ export class MenuItem extends NativeButtonMixin(
 
     return html`
       <wc-item
-        id="item"
+        id="menu-item"
         class="menu-item"
         role="menuitem"
         tabindex=${String(this.tabIndex)}
@@ -125,43 +143,31 @@ export class MenuItem extends NativeButtonMixin(
           this.hasSubmenu ? String(this.submenuOpen) : undefined,
         )}
       >
+        <wc-focus-ring
+          class="focus-ring"
+          for="menu-item"
+          slot="container"
+        ></wc-focus-ring>
+        <div class="background" slot="container"></div>
+        <wc-ripple class="ripple" for="menu-item" slot="container"></wc-ripple>
+
         ${this.renderContent()}
       </wc-item>
     `;
   }
 
   renderContent() {
-    const hasStart = this._hasNamedSlot('start');
-    const hasOverline = this._hasNamedSlot('overline');
-    const hasHeadline = this._hasNamedSlot('headline');
-    const hasDefault = this._hasDefaultSlot();
-    const hasSupportingText = this._hasNamedSlot('supporting-text');
-    const hasTrailingSupportingText = this._hasNamedSlot(
-      'trailing-supporting-text',
-    );
-    const hasEnd = this._hasNamedSlot('end');
-
     return html`
-      ${hasStart ? html`<slot name="start" slot="start"></slot>` : nothing}
-      ${hasOverline
-        ? html`<slot name="overline" slot="overline"></slot>`
-        : nothing}
-      ${hasHeadline
-        ? html`<slot name="headline" slot="headline"></slot>`
-        : nothing}
-      ${hasDefault ? html`<slot></slot>` : nothing}
-      ${hasSupportingText
-        ? html`<slot name="supporting-text" slot="supporting-text"></slot>`
-        : nothing}
-      ${hasTrailingSupportingText
-        ? html`
-            <slot
-              name="trailing-supporting-text"
-              slot="trailing-supporting-text"
-            ></slot>
-          `
-        : nothing}
-      ${hasEnd ? html`<slot name="end" slot="end"></slot>` : nothing}
+      <slot name="start" slot="start"></slot>
+      <slot name="overline" slot="overline"></slot>
+      <slot name="headline" slot="headline"></slot>
+      <slot></slot>
+      <slot name="supporting-text" slot="supporting-text"></slot>
+      <slot
+        name="trailing-supporting-text"
+        slot="trailing-supporting-text"
+      ></slot>
+      <slot name="end" slot="end"></slot>
     `;
   }
 }

package/src/menu/sub-menu/sub-menu.ts

@@ -3,6 +3,7 @@ import { property, queryAssignedElements } from 'lit/decorators.js';
 import styles from './sub-menu.scss';
 import { MenuItem } from '../menu-item/menu-item.js';
 import { Menu } from '../menu/menu.js';
+import IndividualComponent from '@/IndividualComponent.js';
 
 let subMenuIdCounter = 0;
 
@@ -12,6 +13,7 @@ let subMenuIdCounter = 0;
  * @rawTag sub-menu
  * @summary Connects a menu item to a nested menu.
  */
+@IndividualComponent
 export class SubMenu extends LitElement {
   static styles = [styles];
 
@@ -38,6 +40,7 @@ export class SubMenu extends LitElement {
   private _closeTimeout?: number;
 
   private _resolveAnchorElement(item: MenuItem) {
+    //@ts-ignore
     return item.itemElement?.itemElement ?? item.itemElement ?? item;
   }
 

package/src/modal/modal.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 { classMap } from 'lit/directives/class-map.js';
 import IndividualComponent from '../IndividualComponent.js';
@@ -10,7 +10,7 @@ type ModalSize = 'xs' | 'sm' | 'md' | 'lg' | 'fullscreen';
  * @label Modal
  * @tag wc-modal
  * @rawTag modal
- * @summary A Material Design 3 dialog/modal for displaying content in a layer above the page, with optional header, body, and footer slots.
+ * @summary A dialog/modal for displaying content in a layer above the page, with optional header, body, and footer slots.
  *
  * @cssprop --modal-container-color - Background color of the dialog container.
  * @cssprop --modal-scrim-color - Color of the scrim backdrop.

package/src/navigation-rail/navigation-rail-item.ts

@@ -4,11 +4,12 @@ import { classMap } from 'lit/directives/class-map.js';
 import {
   dispatchActivationClick,
   isActivationClick,
-} from '@/__utils/dispatch-event-utils.js';
-import { observerSlotChangesWithCallback } from '@/__utils/observe-slot-change.js';
-import { throttle } from '@/__utils/throttle.js';
-import { isLink } from '@/__utils/is-link.js';
+} from '@/__internal/utils/dispatch-event-utils.js';
+import { observerSlotChangesWithCallback } from '@/__internal/utils/observe-slot-change.js';
+import { throttle } from '@/__internal/utils/throttle.js';
+import { isLink } from '@/__internal/utils/is-link.js';
 import styles from './navigation-rail-item.scss';
+import IndividualComponent from '@/IndividualComponent.js';
 
 /**
  * @label Navigation Rail Item
@@ -28,6 +29,7 @@ import styles from './navigation-rail-item.scss';
  * ```
  * @tags navigation
  */
+@IndividualComponent
 export class NavigationRailItem extends LitElement {
   #id = crypto.randomUUID();
 
@@ -54,17 +56,22 @@ export class NavigationRailItem extends LitElement {
   /** Reason the item is disabled (shown to screen readers). */
   @property({ attribute: 'disabled-reason' }) disabledReason: string = '';
 
-  /** Sets the delay for throttle in milliseconds. Defaults to 200 milliseconds. */
-  @property({ type: Number }) throttleDelay = 200;
-
-  @state() private _isPressed = false;
+  /** Sets the delay for throttle in milliseconds. When null (default), no throttle is applied. */
+  @property({ type: Number }) throttleDelay: number | null = null;
 
+  /** True when the default slot contains label content. */
   @state() private _hasLabel = false;
 
+  /** True when the `active-icon` slot contains content. */
   @state() private _hasActiveIcon = false;
 
   @query('.item-element') readonly itemElement!: HTMLElement | null;
 
+  constructor() {
+    super();
+    this.addEventListener('click', this.__dispatchClickWithThrottle);
+  }
+
   override focus() {
     this.itemElement?.focus();
   }
@@ -74,10 +81,12 @@ export class NavigationRailItem extends LitElement {
   }
 
   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.label'),
@@ -116,21 +125,6 @@ export class NavigationRailItem extends LitElement {
     dispatchActivationClick(this.itemElement);
   };
 
-  __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;
-    }
-  };
-
   __getDisabledReasonID() {
     return this.disabled && this.disabledReason
       ? `disabled-reason-${this.#id}`
@@ -176,7 +170,6 @@ export class NavigationRailItem extends LitElement {
       'item-element': true,
       active: this.active,
       disabled: this.disabled,
-      pressed: this._isPressed,
       'has-label': this._hasLabel,
       'has-active-icon': this._hasActiveIcon,
     };
@@ -189,10 +182,6 @@ export class NavigationRailItem extends LitElement {
         aria-disabled=${`${this.disabled}`}
         aria-current=${this.active ? 'page' : nothing}
         ?aria-describedby=${this.__getDisabledReasonID()}
-        @click=${this.__dispatchClickWithThrottle}
-        @mousedown=${this.__handlePress}
-        @keydown=${this.__handlePress}
-        @keyup=${this.__handlePress}
       >
         ${this.__renderItemContent()}
       </button>`;
@@ -206,10 +195,6 @@ export class NavigationRailItem extends LitElement {
       aria-current=${this.active ? 'page' : nothing}
       aria-disabled=${`${this.disabled}`}
       ?aria-describedby=${this.__getDisabledReasonID()}
-      @click=${this.__dispatchClickWithThrottle}
-      @mousedown=${this.__handlePress}
-      @keydown=${this.__handlePress}
-      @keyup=${this.__handlePress}
     >
       ${this.__renderItemContent()}
     </a>`;

package/src/navigation-rail/navigation-rail.scss

@@ -41,6 +41,7 @@
     width: 100%;
     flex-shrink: 0;
     margin-top: auto;
+    background-color: var(--nav-rail-container-color);
 
     &:empty {
       display: none;

package/src/navigation-rail/navigation-rail.ts

@@ -1,15 +1,16 @@
-import { html, LitElement, PropertyValues } from 'lit';
+import { html, LitElement, PropertyValues } from 'lit';
 import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import styles from './navigation-rail.scss';
 import { NavigationRailItem } from './navigation-rail-item.js';
+import IndividualComponent from '@/IndividualComponent.js';
 
 /**
  * @label Navigation Rail
  * @tag wc-navigation-rail
  * @rawTag navigation-rail
  *
- * @summary A vertical side navigation for medium-sized screens, following Material Design 3 specs.
+ * @summary A vertical side navigation for medium-sized screens,.
  * @overview
  * <p>Navigation rail provides access to primary destinations in an app using icons—with or without labels—on a vertical rail.</p>
  * <p>Use navigation rail on medium-sized screens (tablets) with 3–7 destinations.</p>
@@ -43,6 +44,7 @@ import { NavigationRailItem } from './navigation-rail-item.js';
  * ```
  * @tags navigation
  */
+@IndividualComponent
 export class NavigationRail extends LitElement {
   static styles = [styles];
 

package/src/number-field/number-field.ts

@@ -2,8 +2,8 @@ import { html, nothing } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 
-import { redispatchEvent } from '@/__utils/dispatch-event-utils.js';
-import { spread } from '@/__directive/spread.js';
+import { redispatchEvent } from '@/__internal/utils/dispatch-event-utils.js';
+import { spread } from '@/__internal/directive/spread.js';
 
 import BaseInput from '../input/BaseInput.js';
 import styles from './number-field.scss';

package/src/pagination/pagination.ts

@@ -2,6 +2,7 @@ import { html, LitElement } from 'lit';
 import type { PropertyValues } from 'lit';
 import { property } from 'lit/decorators.js';
 import styles from './pagination.scss';
+import IndividualComponent from '@/IndividualComponent.js';
 
 const DEFAULT_PAGE_SIZES = [10, 25, 50, 100];
 
@@ -21,6 +22,7 @@ const DEFAULT_PAGE_SIZES = [10, 25, 50, 100];
  * ```
  * @tags navigation, data
  */
+@IndividualComponent
 export class Pagination extends LitElement {
   static styles = [styles];
 

package/src/popover/popover.ts

@@ -2,7 +2,7 @@ import { html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 import type { Placement } from '@floating-ui/dom';
 import IndividualComponent from '@/IndividualComponent.js';
-import { FloatingController } from '../__controllers/floating-controller.js';
+import { FloatingController } from '../__internal/controllers/floating-controller.js';
 import styles from './popover.scss';
 import type { PopoverContent } from './popover-content.js';
 
@@ -73,7 +73,7 @@ export class Popover extends LitElement {
     // Resolve the trigger element: first light-DOM child that is NOT wc-popover-content
     this._triggerEl =
       (Array.from(this.children).find(
-        (c) => c.tagName.toLowerCase() !== 'wc-popover-content',
+        c => c.tagName.toLowerCase() !== 'wc-popover-content',
       ) as HTMLElement) ?? null;
 
     if (!this._triggerEl || !this._contentEl) return;
@@ -89,7 +89,7 @@ export class Popover extends LitElement {
       offset: this.offset,
       trigger: triggerMode,
       closeOnClickOutside: true,
-      onOpenChange: (isOpen) => {
+      onOpenChange: isOpen => {
         this.open = isOpen;
         if (this._contentEl) {
           this._contentEl.open = isOpen;

package/src/radio/radio.ts

@@ -1,10 +1,11 @@
-import { html, LitElement } from 'lit';
+import { html, LitElement } 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 './radio.scss';
+import IndividualComponent from '@/IndividualComponent.js';
 
 /**
  * @label Radio
@@ -12,7 +13,7 @@ import styles from './radio.scss';
  * @rawTag radio
  * @summary Allows selection of a single option from a set.
  * @overview
- * <p>Radio buttons follow the Material Design 3 specifications with clear focus, hover, and selected states.</p>
+ * <p>Radio buttons follow the specifications with clear focus, hover, and selected states.</p>
  *
  * @cssprop --radio-size: Size of the outer radio circle.
  * @cssprop --radio-dot-size: Size of the inner dot when selected.
@@ -33,6 +34,7 @@ import styles from './radio.scss';
  */
 type RadioDirection = 1 | -1;
 
+@IndividualComponent
 export class Radio extends LitElement {
   private static readonly DIRECTION_NEXT: RadioDirection = 1;
   private static readonly DIRECTION_PREVIOUS: RadioDirection = -1;
@@ -87,15 +89,19 @@ export class Radio extends LitElement {
   @property({ type: Object })
   configAria: Record<string, string> = {};
 
+  /** True while the radio container has keyboard focus. */
   @state()
   private hasFocus = false;
 
+  /** True while the user is actively pressing the radio (mouse/keyboard). */
   @state()
   private isActive = false;
 
+  /** True when slotted label content or `label` property is present. */
   @state()
   private slotHasContent = false;
 
+  /** True for the one radio in the group that should receive tab focus (roving tabindex). */
   @state()
   private isGroupFocusTarget = false;
 
@@ -105,6 +111,9 @@ export class Radio extends LitElement {
   @query('.input-native')
   private nativeElement?: HTMLInputElement;
 
+  // ── Private fields ────────────────────────────────────────────────────────
+
+  /** Captured `tabindex` attribute value forwarded to the inner container. */
   private tabindex?: number;
 
   connectedCallback() {
@@ -269,8 +278,7 @@ export class Radio extends LitElement {
       return;
     }
 
-    const target =
-      enabledGroup.find(radio => radio.checked) || enabledGroup[0];
+    const target = enabledGroup.find(radio => radio.checked) || enabledGroup[0];
 
     group.forEach(radio => {
       radio.isGroupFocusTarget = radio === target;

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;