@redvars/peacock 3.6.3 → 3.8.0

package/src/item/item.ts

@@ -3,12 +3,13 @@ import { property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import styles from './item.scss';
-import BaseButtonMixin from '@/__mixins/BaseButtonMixin.js';
-import BaseHyperlinkMixin from '@/__mixins/BaseHyperlinkMixin.js';
+import NativeButtonMixin from '@/__mixins/NativeButtonMixin.js';
+import NativeHyperlinkMixin from '@/__mixins/NativeHyperlinkMixin.js';
 import {
   dispatchActivationClick,
   isActivationClick,
 } from '@/__utils/dispatch-event-utils.js';
+import { isLink } from '@/__utils/is-link.js';
 
 /**
  * @label Item
@@ -30,7 +31,7 @@ import {
  * ```
  * @tags display
  */
-export class Item extends BaseButtonMixin(BaseHyperlinkMixin(LitElement)) {
+export class Item extends NativeButtonMixin(NativeHyperlinkMixin(LitElement)) {
   static styles = [styles];
 
   static override get observedAttributes() {
@@ -57,7 +58,9 @@ export class Item extends BaseButtonMixin(BaseHyperlinkMixin(LitElement)) {
 
   private __hasNamedSlot(...names: string[]) {
     return names.some(name =>
-      Array.from(this.children).some(child => child.getAttribute('slot') === name),
+      Array.from(this.children).some(
+        child => child.getAttribute('slot') === name,
+      ),
     );
   }
 
@@ -149,7 +152,7 @@ export class Item extends BaseButtonMixin(BaseHyperlinkMixin(LitElement)) {
       return;
     }
 
-    if (event.key === 'Enter' && !this.__isLink()) {
+    if (event.key === 'Enter' && !isLink(this)) {
       event.preventDefault();
       this.itemElement.click();
     }
@@ -189,7 +192,6 @@ export class Item extends BaseButtonMixin(BaseHyperlinkMixin(LitElement)) {
   }
 
   render() {
-    const isLink = this.__isLink();
     const role = this.__getForwardedAttribute('role');
     const tabIndex = this.__capturedTabIndex;
     const ariaHasPopup = this.__getForwardedAttribute('aria-haspopup');
@@ -203,7 +205,24 @@ export class Item extends BaseButtonMixin(BaseHyperlinkMixin(LitElement)) {
       pressed: this.isPressed,
     };
 
-    if (!isLink) {
+    return html`
+      <wc-focus-ring class="focus-ring" for="item"></wc-focus-ring>
+      <div class="background"></div>
+      <wc-ripple class="ripple" for="item"></wc-ripple>
+
+      ${this.renderItemElement(cssClasses, role, tabIndex, ariaHasPopup, ariaControls, ariaExpanded)}
+    `;
+  }
+
+  renderItemElement(
+    cssClasses: any,
+    role: string | undefined,
+    tabIndex: string | undefined,
+    ariaHasPopup: string | undefined,
+    ariaControls: string | undefined,
+    ariaExpanded: string | undefined,
+  ) {
+    if (!isLink(this)) {
       cssClasses['native-button'] = true;
 
       return html`
@@ -226,9 +245,9 @@ export class Item extends BaseButtonMixin(BaseHyperlinkMixin(LitElement)) {
           ${this.renderContent()}
         </button>
       `;
-    } else {
-      cssClasses['native-link'] = true;
-      return html`
+    }
+    cssClasses['native-link'] = true;
+    return html`
       <a
         id="item"
         class=${classMap(cssClasses)}
@@ -250,9 +269,6 @@ export class Item extends BaseButtonMixin(BaseHyperlinkMixin(LitElement)) {
         ${this.renderContent()}
       </a>
     `;
-    }
-
-
   }
 
   renderContent() {
@@ -267,47 +283,53 @@ export class Item extends BaseButtonMixin(BaseHyperlinkMixin(LitElement)) {
     );
 
     return html`
-      <wc-focus-ring class="focus-ring" for="item"></wc-focus-ring>
-      <div class="background"></div>
-      <wc-ripple class="ripple"></wc-ripple>
-
       <div class="item-content">
         ${hasStart
-        ? html`
+          ? html`
               <div class="start">
-                <slot name="start" @slotchange=${this.__handleSlotChange}></slot>
+                <slot
+                  name="start"
+                  @slotchange=${this.__handleSlotChange}
+                ></slot>
               </div>
             `
-        : nothing}
+          : nothing}
         <div class="content">
-    
           ${hasOverline
-        ? html`
+            ? html`
                 <div class="overline">
-                  <slot name="overline" @slotchange=${this.__handleSlotChange}></slot>
+                  <slot
+                    name="overline"
+                    @slotchange=${this.__handleSlotChange}
+                  ></slot>
                 </div>
               `
-        : nothing}
+            : nothing}
           ${hasHeadline || hasDefault
-        ? html`
+            ? html`
                 <div class="headline-row">
                   ${hasHeadline || hasDefault
-            ? html`
+                    ? html`
                         <div class="headline">
                           ${hasHeadline
-                ? html`<slot name="headline" @slotchange=${this.__handleSlotChange}></slot>`
-                : nothing}
+                            ? html`<slot
+                                name="headline"
+                                @slotchange=${this.__handleSlotChange}
+                              ></slot>`
+                            : nothing}
                           ${hasDefault
-                ? html`<slot @slotchange=${this.__handleSlotChange}></slot>`
-                : nothing}
+                            ? html`<slot
+                                @slotchange=${this.__handleSlotChange}
+                              ></slot>`
+                            : nothing}
                         </div>
                       `
-            : nothing}
+                    : nothing}
                 </div>
               `
-        : nothing}
+            : nothing}
           ${hasSupportingText
-        ? html`
+            ? html`
                 <div class="supporting-text">
                   <slot
                     name="supporting-text"
@@ -315,10 +337,10 @@ export class Item extends BaseButtonMixin(BaseHyperlinkMixin(LitElement)) {
                   ></slot>
                 </div>
               `
-        : nothing}
+            : nothing}
         </div>
         ${hasTrailingSupportingText
-        ? html`
+          ? html`
               <div class="trailing-supporting-text">
                 <slot
                   name="trailing-supporting-text"
@@ -326,15 +348,15 @@ export class Item extends BaseButtonMixin(BaseHyperlinkMixin(LitElement)) {
                 ></slot>
               </div>
             `
-        : nothing}
+          : nothing}
         ${hasEnd
-        ? html`
+          ? html`
               <div class="end">
                 <slot name="end" @slotchange=${this.__handleSlotChange}></slot>
               </div>
             `
-        : nothing}
+          : nothing}
       </div>
     `;
   }
-}
+}

package/src/link/link.scss

@@ -3,9 +3,7 @@
 @include mixin.base-styles;
 
 :host {
-  display: inline-block;
-  border-radius: inherit;
-  corner-shape: inherit;
+  display: inline;
   color: var(--color-primary);
 }
 
@@ -25,10 +23,3 @@
   color: inherit;
   text-decoration: none !important;
 }
-
-:host(.with-icon) .link {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5em;
-}
-

package/src/link/link.ts

@@ -1,6 +1,6 @@
 import { html, LitElement } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
-import BaseHyperlinkMixin from '../__mixins/BaseHyperlinkMixin.js';
+import NativeHyperlinkMixin from '@/__mixins/NativeHyperlinkMixin.js';
 import styles from './link.scss';
 
 /**
@@ -16,7 +16,7 @@ import styles from './link.scss';
  * <wc-link href="#">Link</wc-link>
  * ```
  */
-export class Link extends BaseHyperlinkMixin(LitElement) {
+export class Link extends NativeHyperlinkMixin(LitElement) {
   static styles = [styles];
 
   render() {
@@ -25,7 +25,9 @@ export class Link extends BaseHyperlinkMixin(LitElement) {
         link: true,
       })}
       href=${this.href}
+      ?download=${this.download}
       target=${this.target}
+      ?rel=${this.rel}
       ?tabindex=${this.parentElement?.tabIndex}
     >
       <slot></slot>

package/src/list/list-item.ts

@@ -3,8 +3,9 @@ import { property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import styles from './list-item.scss';
-import BaseButtonMixin from '@/__mixins/BaseButtonMixin.js';
-import BaseHyperlinkMixin from '@/__mixins/BaseHyperlinkMixin.js';
+import NativeButtonMixin from '@/__mixins/NativeButtonMixin.js';
+import NativeHyperlinkMixin from '@/__mixins/NativeHyperlinkMixin.js';
+import { isLink } from '@/__utils/is-link.js';
 import {
   dispatchActivationClick,
   isActivationClick,
@@ -14,7 +15,6 @@ import {
  * @label List Item
  * @tag wc-list-item
  * @rawTag list-item
- * @parentRawTag list
  *
  * @summary A Material 3 list item with leading, trailing and content slots.
  *
@@ -28,7 +28,9 @@ import {
  * ```
  * @tags display
  */
-export class ListItem extends BaseButtonMixin(BaseHyperlinkMixin(LitElement)) {
+export class ListItem extends NativeButtonMixin(
+  NativeHyperlinkMixin(LitElement),
+) {
   static styles = [styles];
 
   @property({ type: Boolean, reflect: true }) selected = false;
@@ -82,7 +84,7 @@ export class ListItem extends BaseButtonMixin(BaseHyperlinkMixin(LitElement)) {
       return;
     }
 
-    if (event.key === 'Enter' && !this.__isLink()) {
+    if (event.key === 'Enter' && !isLink(this)) {
       event.preventDefault();
       this.itemElement.click();
     }
@@ -105,8 +107,6 @@ export class ListItem extends BaseButtonMixin(BaseHyperlinkMixin(LitElement)) {
   };
 
   render() {
-    const isLink = this.__isLink();
-
     const cssClasses = {
       'list-item': true,
       'item-element': true,
@@ -115,7 +115,7 @@ export class ListItem extends BaseButtonMixin(BaseHyperlinkMixin(LitElement)) {
       pressed: this.isPressed,
     };
 
-    if (!isLink) {
+    if (!isLink(this)) {
       return html`
         <button
           id="item"

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

@@ -3,15 +3,14 @@ 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 BaseButtonMixin from '@/__mixins/BaseButtonMixin.js';
-import BaseHyperlinkMixin from '@/__mixins/BaseHyperlinkMixin.js';
+import NativeButtonMixin from '@/__mixins/NativeButtonMixin.js';
+import NativeHyperlinkMixin from '@/__mixins/NativeHyperlinkMixin.js';
 import { Item } from '@/item/item.js';
 
 /**
  * @label Menu Item
  * @tag wc-menu-item
  * @rawTag menu-item
- * @parentRawTag menu
  * @summary An item in a menu list.
  * @tags navigation
  *
@@ -20,7 +19,9 @@ import { Item } from '@/item/item.js';
  * <wc-menu-item>Menu Item</wc-menu-item>
  * ```
  */
-export class MenuItem extends BaseButtonMixin(BaseHyperlinkMixin(LitElement)) {
+export class MenuItem extends NativeButtonMixin(
+  NativeHyperlinkMixin(LitElement),
+) {
   @property({ type: String }) value = '';
 
   @property({ type: Boolean, reflect: true }) selected = false;
@@ -80,7 +81,9 @@ export class MenuItem extends BaseButtonMixin(BaseHyperlinkMixin(LitElement)) {
 
   private _hasNamedSlot(...names: string[]) {
     return names.some(name =>
-      Array.from(this.children).some(child => child.getAttribute('slot') === name),
+      Array.from(this.children).some(
+        child => child.getAttribute('slot') === name,
+      ),
     );
   }
 
@@ -115,8 +118,12 @@ export class MenuItem extends BaseButtonMixin(BaseHyperlinkMixin(LitElement)) {
         .rel=${this.rel}
         .download=${this.download}
         aria-haspopup=${this.hasSubmenu ? 'menu' : nothing}
-        aria-controls=${ifDefined(this.hasSubmenu && controls ? controls : undefined)}
-        aria-expanded=${ifDefined(this.hasSubmenu ? String(this.submenuOpen) : undefined)}
+        aria-controls=${ifDefined(
+          this.hasSubmenu && controls ? controls : undefined,
+        )}
+        aria-expanded=${ifDefined(
+          this.hasSubmenu ? String(this.submenuOpen) : undefined,
+        )}
       >
         ${this.renderContent()}
       </wc-item>
@@ -139,7 +146,9 @@ export class MenuItem extends BaseButtonMixin(BaseHyperlinkMixin(LitElement)) {
       ${hasOverline
         ? html`<slot name="overline" slot="overline"></slot>`
         : nothing}
-      ${hasHeadline ? html`<slot name="headline" slot="headline"></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>`

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

@@ -10,7 +10,6 @@ let subMenuIdCounter = 0;
  * @label Sub Menu
  * @tag wc-sub-menu
  * @rawTag sub-menu
- * @parentRawTag menu
  * @summary Connects a menu item to a nested menu.
  */
 export class SubMenu extends LitElement {

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

@@ -99,6 +99,11 @@
       font-weight var(--duration-short4, 200ms) var(--easing-standard, ease);
   }
 
+  /* Hide label when collapsed via class */
+  .label.hidden {
+    display: none;
+  }
+
   /* Active icon slot: hidden by default */
   .active-icon-slot {
     display: none;

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

@@ -1,16 +1,19 @@
 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 styles from './navigation-rail-item.scss';
 
 /**
  * @label Navigation Rail Item
  * @tag wc-navigation-rail-item
  * @rawTag navigation-rail-item
- * @parentRawTag navigation-rail
  *
  * @summary An individual item within a navigation rail.
  * @overview
@@ -77,7 +80,7 @@ export class NavigationRailItem extends LitElement {
     );
 
     observerSlotChangesWithCallback(
-      this.renderRoot.querySelector('slot:not([name])'),
+      this.renderRoot.querySelector('slot.label'),
       hasContent => {
         this._hasLabel = hasContent;
         this.requestUpdate();
@@ -85,7 +88,7 @@ export class NavigationRailItem extends LitElement {
     );
 
     observerSlotChangesWithCallback(
-      this.renderRoot.querySelector('slot[name="active-icon"]'),
+      this.renderRoot.querySelector('slot.active-icon-slot'),
       hasContent => {
         this._hasActiveIcon = hasContent;
         this.requestUpdate();
@@ -128,10 +131,6 @@ export class NavigationRailItem extends LitElement {
     }
   };
 
-  __isLink() {
-    return !!this.href;
-  }
-
   __getDisabledReasonID() {
     return this.disabled && this.disabledReason
       ? `disabled-reason-${this.#id}`
@@ -154,7 +153,7 @@ export class NavigationRailItem extends LitElement {
 
   __renderItemContent() {
     return html`
-      <wc-focus-ring class="focus-ring" for='item'></wc-focus-ring>
+      <wc-focus-ring class="focus-ring" for="item"></wc-focus-ring>
 
       <div class="item-content">
         <div class="indicator">
@@ -164,9 +163,7 @@ export class NavigationRailItem extends LitElement {
             <slot name="icon" class="icon-slot"></slot>
           </div>
         </div>
-        ${this._hasLabel && !this.collapsed
-          ? html`<div class="label"><slot></slot></div>`
-          : html`<slot class="hidden-slot"></slot>`}
+        <div class="label ${this.collapsed ? 'hidden' : ''}"><slot></slot></div>
       </div>
 
       ${this.__renderDisabledReason()}
@@ -174,8 +171,6 @@ export class NavigationRailItem extends LitElement {
   }
 
   render() {
-    const isLink = this.__isLink();
-
     const cssClasses = {
       item: true,
       'item-element': true,
@@ -186,7 +181,7 @@ export class NavigationRailItem extends LitElement {
       'has-active-icon': this._hasActiveIcon,
     };
 
-    if (!isLink) {
+    if (!isLink(this)) {
       return html`<button
         id="item"
         class=${classMap(cssClasses)}

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';

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.
- * @parentRawTag popover
  * @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/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>
  *