@redvars/peacock 3.6.2 → 3.7.0

package/src/peacock-loader.ts

@@ -9,7 +9,7 @@ import { Avatar } from './avatar/avatar.js';
 import { Badge } from './badge/badge.js';
 import { Divider } from './divider/divider.js';
 import { Button } from './button/button/button.js';
-import { ButtonGroup } from './button/button-group/button-group.js';
+import ButtonGroup from './button/button-group/button-group.js';
 import { IconButton } from './button/icon-button/icon-button.js';
 import { Fab } from './fab/fab.js';
 import { SegmentedButton } from './segmented-button/segmented-button.js';
@@ -30,6 +30,7 @@ import { Radio } from './radio/radio.js';
 import { Menu } from './menu/menu/menu.js';
 import { MenuItem } from './menu/menu-item/menu-item.js';
 import { SubMenu } from './menu/sub-menu/sub-menu.js';
+import { Item } from './item/item.js';
 import { List } from './list/list.js';
 import { ListItem } from './list/list-item.js';
 
@@ -290,6 +291,9 @@ const loaderConfig: LoaderConfig = {
     'wc-list-item': {
       CustomElementClass: ListItem,
     },
+    'wc-item': {
+      CustomElementClass: Item,
+    },
     'wc-container': {
       CustomElementClass: Container,
     },

package/src/popover/popover-content.ts

@@ -9,7 +9,6 @@ import styles from './popover-content.scss';
  * @tag wc-popover-content
  * @rawTag popover-content
  * @summary Content container for the wc-popover component.
- * @childComponent true
  * @tags display
  *
  * @cssprop --popover-content-background - Background color of the popover content. Defaults to `var(--color-surface-container)`.

package/src/ripple/ripple.ts

@@ -1,6 +1,10 @@
-import { LitElement, html, css, PropertyValues } from 'lit';
+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 {
+  Attachable,
+  AttachableController,
+} from '@/__controllers/attachable-controller.js';
 
 const PRESS_GROW_MS = 450;
 const MINIMUM_PRESS_MS = 225;
@@ -114,7 +118,7 @@ const FORCED_COLORS = window.matchMedia('(forced-colors: active)');
  * ```
  * @tags display
  */
-export class Ripple extends LitElement {
+export class Ripple extends LitElement implements Attachable {
   static styles = css`
     :host {
       display: flex;
@@ -154,13 +158,16 @@ export class Ripple extends LitElement {
       &::before {
         background-color: var(--ripple-pressed-color, var(--color-on-surface));
         inset: 0;
-        transition: opacity 15ms linear, background-color 15ms linear;
+        transition:
+          opacity 15ms linear,
+          background-color 15ms linear;
       }
 
       &::after {
         background: radial-gradient(
           closest-side,
-          var(--ripple-pressed-color, var(--color-on-surface)) max(calc(100% - 70px), 65%),
+          var(--ripple-pressed-color, var(--color-on-surface))
+            max(calc(100% - 70px), 65%),
           transparent 100%
         );
         transform-origin: center center;
@@ -184,7 +191,7 @@ export class Ripple extends LitElement {
   @property({ type: Boolean, reflect: true }) disabled = false;
 
   @state() private hovered = false;
-  
+
   @state() private pressed = false;
 
   @query('.surface') private readonly mdRoot!: HTMLElement | null;
@@ -201,13 +208,36 @@ export class Ripple extends LitElement {
 
   private rippleStartEvent?: PointerEvent;
 
+  private readonly _boundHandleEvent = this.handleEvent.bind(this);
+
+  get htmlFor() {
+    return this.attachableController.htmlFor;
+  }
+
+  set htmlFor(htmlFor: string | null) {
+    this.attachableController.htmlFor = htmlFor;
+  }
+
+  get control() {
+    return this.attachableController.control;
+  }
+
+  set control(control: HTMLElement | null) {
+    this.attachableController.control = control;
+  }
+
+  private readonly attachableController = new AttachableController(
+    // `LitElement` satisfies the ReactiveControllerHost & HTMLElement shape
+    // required by the controller.
+    this,
+    this.onControlChange.bind(this),
+  );
+
   override connectedCallback() {
     super.connectedCallback();
     // Needed for VoiceOver, which will create a "group" if the element is a
     // sibling to other content.
     this.setAttribute('aria-hidden', 'true');
-    // Attach to parent
-    this.attach(this.parentElement!);
   }
 
   override disconnectedCallback() {
@@ -216,24 +246,26 @@ export class Ripple extends LitElement {
   }
 
   attach(control: HTMLElement) {
-    if (!control) return;
-    EVENTS.forEach(event => {
-      control.addEventListener(event, this.handleEvent.bind(this));
-    });
+    this.attachableController.attach(control);
   }
 
   detach() {
-    const control = this.parentElement;
-    if (!control) return;
-    EVENTS.forEach(event => {
-      control.removeEventListener(event, this.handleEvent.bind(this));
-    });
+    this.attachableController.detach();
+  }
+
+  private onControlChange(prev: HTMLElement | null, next: HTMLElement | null) {
+    if (isServer) return;
+
+    for (const event of EVENTS) {
+      prev?.removeEventListener(event, this._boundHandleEvent);
+      next?.addEventListener(event, this._boundHandleEvent);
+    }
   }
 
   protected override render() {
     const classes = {
-      'hovered': this.hovered,
-      'pressed': this.pressed,
+      hovered: this.hovered,
+      pressed: this.pressed,
     };
 
     return html`<div class="surface ${classMap(classes)}"></div>`;
@@ -299,7 +331,7 @@ export class Ripple extends LitElement {
 
     // Wait for a hold after touch delay
     this.state = State.TOUCH_DELAY;
-    await new Promise((resolve) => {
+    await new Promise(resolve => {
       setTimeout(resolve, TOUCH_DELAY_MS);
     });
 
@@ -438,7 +470,7 @@ export class Ripple extends LitElement {
       return;
     }
 
-    await new Promise((resolve) => {
+    await new Promise(resolve => {
       setTimeout(resolve, MINIMUM_PRESS_MS - pressAnimationPlayState);
     });
 

package/src/search/search.scss

@@ -32,15 +32,18 @@
 
   /* size-md default */
   --_height: 3.5rem;
+  --icon-size: 1.25rem;
 
   &.size-sm {
     --_height: 2.5rem;
     padding-inline: 0.75rem;
+    --icon-size: 1rem;
   }
 
   &.size-lg {
     --_height: 4rem;
     padding-inline: 1.25rem;
+    --icon-size: 1.5rem;
   }
 
   min-height: var(--_height);

package/src/search/search.ts

@@ -97,16 +97,15 @@ export class Search extends LitElement {
     );
   }
 
-  /** Focuses the internal input element. */
-  override focus() {
+  override async focus() {
+    await Promise.all([
+      customElements.whenDefined('wc-input'),
+      customElements.whenDefined('wc-field'),
+    ]);
+    await this.updateComplete;
     this.inputElement?.focus();
   }
 
-  /** Blurs the internal input element. */
-  override blur() {
-    this.inputElement?.blur();
-  }
-
   private __handleInput(event: InputEvent) {
     const input = event.target as HTMLInputElement;
     this.value = input.value;
@@ -150,13 +149,9 @@ export class Search extends LitElement {
     }
   }
 
-  private __handleFocus() {
-    this.focused = true;
-  }
-
-  private __handleBlur() {
-    this.focused = false;
-  }
+  private __handleFocusChange = (event: FocusEvent) => {
+    this.focused = event.type === 'focus';
+  };
 
   private __clearValue() {
     this.value = '';
@@ -230,8 +225,8 @@ export class Search extends LitElement {
           @input=${this.__handleInput}
           @change=${this.__handleChange}
           @keydown=${this.__handleKeydown}
-          @focus=${this.__handleFocus}
-          @blur=${this.__handleBlur}
+          @focus=${this.__handleFocusChange}
+          @blur=${this.__handleFocusChange}
         />
 
         <div class="trailing-actions">

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

@@ -8,7 +8,6 @@ import styles from './segmented-button.scss';
  * @tag wc-segmented-button
  * @rawTag segmented-button
  * @summary An individual segment within a segmented button group.
- * @parentRawTag segmented-button-group
  * @overview
  * <p>Segmented buttons help people select options, switch views, or sort elements. They are used within a <code>wc-segmented-button-group</code>.</p>
  *

package/src/select/option.ts

@@ -6,7 +6,6 @@ import type { MenuItem } from '../menu/menu-item/menu-item.js';
  * @label Select Option
  * @tag wc-option
  * @rawTag option
- * @parentRawTag select
  *
  * @summary A declarative option element for use inside wc-select.
  *
@@ -94,7 +93,7 @@ export class SelectOptionElement extends LitElement {
         ?keep-open=${this.keepOpen}
       >
         ${this.icon
-          ? html`<wc-icon name=${this.icon} slot="leading-icon"></wc-icon>`
+          ? html`<wc-icon name=${this.icon} slot="start"></wc-icon>`
           : nothing}
         <slot>${this.value === '' ? 'None' : ''}</slot>
         ${this.selected && this.keepOpen

package/src/select/select.scss

@@ -98,18 +98,9 @@
 /* Multi-select chips area — single scrollable row, no vertical growth */
 .chips-container {
   display: flex;
-  flex-wrap: nowrap;
-  overflow-x: auto;
-  scrollbar-width: none;
-  gap: var(--spacing-050);
-  padding-block: var(--spacing-050);
   align-items: center;
   flex: 1;
-  min-width: 0;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
+  padding-block: .5rem;
 }
 
 /* Disabled state */

package/src/select/select.ts

@@ -430,6 +430,7 @@ export class Select extends BaseInput {
     // Multi-select: show chips for selected items
     if (this.multiple && this._selectedValues.length > 0) {
       return html`<div class="chips-container">
+      <wc-chip-set>
         ${this._selectedValues.map(
           val => html`
             <wc-chip
@@ -441,6 +442,7 @@ export class Select extends BaseInput {
             >
           `,
         )}
+      </wc-chip-set>
       </div>`;
     }
 

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

@@ -7,7 +7,6 @@ import styles from './sidebar-menu-item.scss';
  * @label Sidebar Menu Item
  * @tag wc-sidebar-menu-item
  * @rawTag sidebar-menu-item
- * @parentRawTag sidebar-menu
  * @summary A sidebar menu item represents a selectable leaf item in the sidebar navigation tree.
  *
  * @example

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

@@ -8,7 +8,6 @@ import styles from './sidebar-sub-menu.scss';
  * @label Sidebar Sub Menu
  * @tag wc-sidebar-sub-menu
  * @rawTag sidebar-sub-menu
- * @parentRawTag sidebar-menu
  * @summary A sidebar sub menu groups sidebar menu items and handles expand/collapse behavior.
  *
  * @example

package/src/skeleton/skeleton.scss

@@ -18,7 +18,11 @@
 .skeleton::before {
   inset: 0;
   position: absolute;
-  @include mixin.apply-container-shape(skeleton);
+  border-start-start-radius: var(--skeleton-container-shape-start-start, var(--skeleton-container-shape));
+  border-start-end-radius: var(--skeleton-container-shape-start-end, var(--skeleton-container-shape));
+  border-end-start-radius: var(--skeleton-container-shape-end-start, var(--skeleton-container-shape));
+  border-end-end-radius: var(--skeleton-container-shape-end-end, var(--skeleton-container-shape));
+  corner-shape: var(--skeleton-container-shape-variant);
 }
 
 .skeleton {

package/src/tabs/tab-panel.ts

@@ -6,7 +6,6 @@ import styles from './tab-panel.scss';
  * @label Tab Panel
  * @tag wc-tab-panel
  * @rawTag tab-panel
- * @parentRawTag tab-group
  *
  * @summary Content panel for tabs.
  * @overview

package/src/tabs/tab.ts

@@ -2,9 +2,13 @@ import { html, LitElement, nothing } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 
-import { dispatchActivationClick, isActivationClick } from '@/__utils/dispatch-event-utils.js';
+import {
+  dispatchActivationClick,
+  isActivationClick,
+} from '@/__utils/dispatch-event-utils.js';
 import { observerSlotChangesWithCallback } from '@/__utils/observe-slot-change.js';
 import { throttle } from '@/__utils/throttle.js';
+import { isLink } from '@/__utils/is-link.js';
 import { spread } from '@/__directive/spread.js';
 
 import styles from './tab.scss';
@@ -14,7 +18,6 @@ import type { Tabs } from './tabs.js';
  * @label Tab
  * @tag wc-tab
  * @rawTag tab
- * @parentRawTag tabs
  *
  * @summary A tab component for use within tabs.
  * @overview
@@ -27,13 +30,12 @@ import type { Tabs } from './tabs.js';
  * @tags navigation
  */
 export class Tab extends LitElement {
-
   #id = crypto.randomUUID();
 
   static styles = [styles];
 
   @property({ type: Boolean, reflect: true }) active = false;
-  
+
   @property({ type: Boolean, reflect: true }) disabled = false;
 
   @property({ type: String }) disabledReason = '';
@@ -43,7 +45,7 @@ export class Tab extends LitElement {
   @property({ reflect: true })
   configAria?: { [key: string]: any };
 
-   /**
+  /**
    * Sets or retrieves the window or frame at which to target content.
    */
   @property() target: string = '_self';
@@ -63,11 +65,11 @@ export class Tab extends LitElement {
 
   @state() slotHasBadge = false;
 
-   /**
-     * States
-     */
-    @state()
-    isPressed = false;
+  /**
+   * States
+   */
+  @state()
+  isPressed = false;
 
   private _tabindex = 0;
 
@@ -81,7 +83,6 @@ export class Tab extends LitElement {
     this.tabElement?.blur();
   }
 
-
   constructor() {
     super();
     this._tabindex = 0;
@@ -118,28 +119,28 @@ export class Tab extends LitElement {
   }
 
   __dispatchClickWithThrottle: (event: MouseEvent | KeyboardEvent) => void =
-      event => {
-        this.__dispatchClick(event);
-      };
-  
-    __dispatchClick = (event: MouseEvent | KeyboardEvent) => {
-      // If the button is soft-disabled or a disabled link, we need to explicitly
-      // prevent the click from propagating to other event listeners as well as
-      // prevent the default action.
-      if (this.disabled && this.href) {
-        event.stopImmediatePropagation();
-        event.preventDefault();
-        return;
-      }
-  
-      if (!isActivationClick(event) || !this.tabElement) {
-        return;
-      }
-  
-      this.focus();
-      dispatchActivationClick(this.tabElement);
+    event => {
+      this.__dispatchClick(event);
     };
 
+  __dispatchClick = (event: MouseEvent | KeyboardEvent) => {
+    // If the button is soft-disabled or a disabled link, we need to explicitly
+    // prevent the click from propagating to other event listeners as well as
+    // prevent the default action.
+    if (this.disabled && this.href) {
+      event.stopImmediatePropagation();
+      event.preventDefault();
+      return;
+    }
+
+    if (!isActivationClick(event) || !this.tabElement) {
+      return;
+    }
+
+    this.focus();
+    dispatchActivationClick(this.tabElement);
+  };
+
   __handlePress = (event: KeyboardEvent | MouseEvent) => {
     if (this.disabled) return;
     if (
@@ -155,10 +156,6 @@ export class Tab extends LitElement {
     }
   };
 
-  __isLink() {
-    return !!this.href;
-  }
-
   __getParentTabsVariant(): Tabs['variant'] {
     return (this.closest('wc-tabs') as Tabs | null)?.variant ?? 'primary';
   }
@@ -172,10 +169,7 @@ export class Tab extends LitElement {
   //   }
   // }
 
-
   render() {
-
-    const isLink = this.__isLink();
     const variant = this.__getParentTabsVariant();
 
     const cssClasses = {
@@ -190,40 +184,39 @@ export class Tab extends LitElement {
       'has-badge': this.slotHasBadge,
     };
 
-
-    if (!isLink) {
-          return html`<button
-          id="button"
-              class=${classMap(cssClasses)}
-              tabindex="0"
-              @mousedown=${this.__handlePress}
-              @keydown=${this.__handlePress}
-              @keyup=${this.__handlePress}
-              ?aria-describedby=${this.__getDisabledReasonID()}
-              aria-disabled=${`${this.disabled}`}
-              ?disabled=${this.disabled}
-              ${spread(this.configAria)}
-            >
-              ${this.renderTabContent(variant)}
-            </button>`;
-        }
-
-    return html`<a
-        class=${classMap(cssClasses)}
+    if (!isLink(this)) {
+      return html`<button
         id="button"
+        class=${classMap(cssClasses)}
         tabindex="0"
-        href=${this.href}
-        target=${this.target}
         @mousedown=${this.__handlePress}
         @keydown=${this.__handlePress}
         @keyup=${this.__handlePress}
-        role="button"
         ?aria-describedby=${this.__getDisabledReasonID()}
         aria-disabled=${`${this.disabled}`}
+        ?disabled=${this.disabled}
         ${spread(this.configAria)}
       >
         ${this.renderTabContent(variant)}
-      </a>`;
+      </button>`;
+    }
+
+    return html`<a
+      class=${classMap(cssClasses)}
+      id="button"
+      tabindex="0"
+      href=${this.href}
+      target=${this.target}
+      @mousedown=${this.__handlePress}
+      @keydown=${this.__handlePress}
+      @keyup=${this.__handlePress}
+      role="button"
+      ?aria-describedby=${this.__getDisabledReasonID()}
+      aria-disabled=${`${this.disabled}`}
+      ${spread(this.configAria)}
+    >
+      ${this.renderTabContent(variant)}
+    </a>`;
   }
 
   renderTabContent(variant: Tabs['variant']) {
@@ -242,14 +235,13 @@ export class Tab extends LitElement {
 
   renderPrimaryTabContent() {
     return html`
-      <wc-focus-ring class="focus-ring" for='button'></wc-focus-ring>
+      <wc-focus-ring class="focus-ring" for="button"></wc-focus-ring>
       <wc-elevation class="elevation"></wc-elevation>
       <div class="background"></div>
       <div class="outline"></div>
       <wc-ripple class="ripple"></wc-ripple>
-      
-      <div class="tab-content">
 
+      <div class="tab-content">
         <div class="icon-section">
           <slot name="badge"></slot>
           <slot name="icon"></slot>
@@ -259,7 +251,6 @@ export class Tab extends LitElement {
         </div>
 
         <div class="indicator"></div>
-        
       </div>
 
       ${this.__renderDisabledReason()}
@@ -268,14 +259,13 @@ export class Tab extends LitElement {
 
   renderSecondaryTabContent() {
     return html`
-      <wc-focus-ring class="focus-ring" for='button'></wc-focus-ring>
+      <wc-focus-ring class="focus-ring" for="button"></wc-focus-ring>
       <wc-elevation class="elevation"></wc-elevation>
       <div class="background"></div>
       <div class="outline"></div>
       <wc-ripple class="ripple"></wc-ripple>
-      
-      <div class="tab-content">
 
+      <div class="tab-content">
         <slot name="icon"></slot>
 
         <div class="slot-container">
@@ -301,7 +291,7 @@ export class Tab extends LitElement {
 
   renderSegmentedTabContent() {
     return html`
-      <wc-focus-ring class="focus-ring" for='button'></wc-focus-ring>
+      <wc-focus-ring class="focus-ring" for="button"></wc-focus-ring>
       <wc-elevation class="elevation"></wc-elevation>
       <div class="background"></div>
       <div class="outline"></div>

package/src/text/text.css-component.scss

@@ -1,35 +1,17 @@
 @use "../../scss/mixin";
-@use "sass:string";
 
 @include mixin.base-styles;
 
-@mixin _apply-typography($value-type) {
-  @include mixin.get-typography(#{$value-type});
-  @if string.index($value-type, "body") {
-    margin-block-end: var(--spacing-200);
-  }
-  @if string.index($value-type, "headline") {
-    margin-block-end: var(--spacing-200);
-  }
-  @if string.index($value-type, "display") {
-    margin-block-end: var(--spacing-400);
-  }
-  @if string.index($value-type, "title") {
-    margin-block-end: var(--spacing-400);
-  }
-}
-
 /// Mixin to define text classes for a specific type and value-type
 /// @param {String} $type - The type name to be used in the class name (e.g., .text-#{$type})
-/// @param {String} $value-type - The value-type name to be passed to get-typography and get-margin-end
-/// @param {Boolean} $important [true] - Whether to use !important in typography properties
+/// @param {String} $value-type - The value-type name to be passed to get-typography
 @mixin define-text-classes($type, $value-type) {
   .text-#{$type} {
-    @include _apply-typography($value-type);
+    @include mixin.get-typography(#{$value-type});
   }
 
   .text-#{$type}-emphasized {
-    @include _apply-typography(#{$value-type}-emphasized);
+    @include mixin.get-typography(#{$value-type}-emphasized);
   }
 }
 

package/src/tooltip/tooltip.scss

@@ -8,15 +8,12 @@
   position: absolute;
   top: 0;
   left: 0;
+  pointer-events: none;
+  transition: transform var(--duration-short2) ease-in-out, opacity var(--duration-short2) ease-in-out;
+  transform: scale(0);
+  opacity: 0;
 
-  .tooltip {
-    pointer-events: none;
-    transition: transform var(--duration-short2) ease-in-out, opacity var(--duration-short2) ease-in-out;
-    transform: scale(0);
-    opacity: 0;
-  }
-
-  .tooltip.open {
+  &:host([open]) {
     pointer-events: auto;
     transform: scale(1);
     opacity: 1;

package/src/tooltip/tooltip.ts

@@ -71,7 +71,7 @@ export class Tooltip extends LitElement {
   set forElement(value: HTMLElement | null) {
     if (value) {
       this._focusTarget = value;
-    } else {      
+    } else {
       this._focusTarget = undefined;
     }
   }
@@ -153,7 +153,6 @@ export class Tooltip extends LitElement {
     return html` <div
       class=${classMap({
         tooltip: true,
-        open: this.open,
         [`variant-${this.variant}`]: true,
       })}
       id="tooltip"