@redvars/peacock 3.8.0 → 3.8.2

package/src/item/item.ts

@@ -1,60 +1,50 @@
-import { html, LitElement, nothing } from 'lit';
-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 { html, LitElement } from 'lit';
+import { property, queryAll } from 'lit/decorators.js';
 import styles from './item.scss';
-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';
+import IndividualComponent from '@/IndividualComponent.js';
+import { mixinDelegatesAria } from '@/__internal/aria/delegate.js';
+import { mixinElementInternals } from '@/__internal/mixins/element-internals.js';
+
+import { hasMeaningfulContent } from '@/__internal/utils/observe-slot-change.js';
 
 /**
  * @label Item
  * @tag wc-item
  * @rawTag item
  *
- * @summary A Material 3 item with start, text and end slots.
+ * @summary A primitive element used to build higher-level item components such as menu-item, navigation-item, and list-item. Provides start, text, and end slots for flexible content composition.
  *
  * @example
  * ```html
- * <wc-item selected>
- *   <wc-icon slot="start" name="home"></wc-icon>
- *   <div slot="overline">Overline</div>
- *   <div slot="headline">Headline</div>
- *   <div slot="supporting-text">Supporting text</div>
- *   <div slot="trailing-supporting-text">Trailing</div>
+ * <wc-item>
+ *   <wc-icon slot="start" name="notifications"></wc-icon>
+ *
+ *   <span slot="overline">Settings</span>
+ *   <span slot="headline">Notifications</span>
+ *   <span slot="supporting-text">Manage alerts and reminders</span>
+ *
+ *   <span slot="trailing-supporting-text">3</span>
  *   <wc-icon slot="end" name="chevron_right"></wc-icon>
  * </wc-item>
  * ```
  * @tags display
  */
-export class Item extends NativeButtonMixin(NativeHyperlinkMixin(LitElement)) {
+@IndividualComponent
+export class Item extends mixinDelegatesAria(
+  mixinElementInternals(LitElement),
+) {
   static styles = [styles];
 
-  static override get observedAttributes() {
-    return [...super.observedAttributes, 'tabindex'];
-  }
-
-  private readonly __contentObserver = new MutationObserver(() => {
-    this.requestUpdate();
-  });
-
-  private __capturedTabIndex?: string;
-
-  private __isCapturingTabIndex = false;
-
-  @property({ type: Boolean, reflect: true }) selected = false;
-
-  @query('#item') readonly itemElement!: HTMLElement | null;
+  /**
+   * Only needed for SSR.
+   *
+   * Add this attribute when an item has two lines to avoid a Flash Of Unstyled
+   * Content. This attribute is not needed for single line items or items with
+   * three or more lines.
+   */
+  @property({ type: Boolean, reflect: true }) multiline = false;
 
-  @state() isPressed = false;
-
-  private __handleSlotChange = () => {
-    this.requestUpdate();
-  };
+  @queryAll('.text slot') private readonly textSlots!: HTMLSlotElement[];
 
   private __hasNamedSlot(...names: string[]) {
     return names.some(name =>
@@ -64,299 +54,56 @@ export class Item extends NativeButtonMixin(NativeHyperlinkMixin(LitElement)) {
     );
   }
 
-  private __hasDefaultSlot() {
-    return Array.from(this.childNodes).some(node => {
-      if (node.nodeType === Node.TEXT_NODE) {
-        return Boolean(node.textContent?.trim());
-      }
-
-      return (
-        node.nodeType === Node.ELEMENT_NODE &&
-        !(node as Element).hasAttribute('slot')
-      );
-    });
-  }
-
-  connectedCallback() {
-    // eslint-disable-next-line wc/guard-super-call
-    super.connectedCallback();
-    this.__captureHostTabIndex();
-
-    this.__contentObserver.observe(this, {
-      subtree: true,
-      childList: true,
-      characterData: true,
-      attributes: true,
-      attributeFilter: ['slot'],
-    });
-  }
-
-  disconnectedCallback() {
-    this.__contentObserver.disconnect();
-    super.disconnectedCallback();
-  }
-
-  override attributeChangedCallback(
-    name: string,
-    oldValue: string | null,
-    newValue: string | null,
-  ) {
-    if (name === 'tabindex') {
-      if (!this.__isCapturingTabIndex && newValue != null) {
-        this.__capturedTabIndex = newValue;
-        this.__isCapturingTabIndex = true;
-        this.removeAttribute('tabindex');
-        this.__isCapturingTabIndex = false;
-        this.requestUpdate();
-      }
-
-      return;
-    }
-
-    super.attributeChangedCallback(name, oldValue, newValue);
-  }
-
-  override focus() {
-    this.itemElement?.focus();
-  }
-
-  override blur() {
-    this.itemElement?.blur();
-  }
-
-  __dispatchClick = (event: MouseEvent | KeyboardEvent) => {
-    if (this.softDisabled || (this.disabled && this.href)) {
-      event.stopImmediatePropagation();
-      event.preventDefault();
-      return;
-    }
-
-    if (!isActivationClick(event) || !this.itemElement) {
-      return;
-    }
-
-    this.focus();
-    dispatchActivationClick(this.itemElement);
-  };
-
-  __handleKeyDown = (event: KeyboardEvent) => {
-    this.__handlePress(event);
-
-    if (this.disabled || this.softDisabled || !this.itemElement) {
-      return;
-    }
-
-    if (event.key === ' ') {
-      event.preventDefault();
-      this.itemElement.click();
-      return;
-    }
-
-    if (event.key === 'Enter' && !isLink(this)) {
-      event.preventDefault();
-      this.itemElement.click();
-    }
-  };
-
-  __handlePress = (event: KeyboardEvent | MouseEvent) => {
-    if (this.disabled || this.softDisabled) 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;
-    }
-  };
-
-  private __getForwardedAttribute(name: string) {
-    return this.getAttribute(name) ?? undefined;
-  }
-
-  private __captureHostTabIndex() {
-    const tabIndex = this.getAttribute('tabindex');
-
-    if (tabIndex == null) {
-      return;
-    }
-
-    this.__capturedTabIndex = tabIndex;
-    this.__isCapturingTabIndex = true;
-    this.removeAttribute('tabindex');
-    this.__isCapturingTabIndex = false;
-  }
-
-  render() {
-    const role = this.__getForwardedAttribute('role');
-    const tabIndex = this.__capturedTabIndex;
-    const ariaHasPopup = this.__getForwardedAttribute('aria-haspopup');
-    const ariaControls = this.__getForwardedAttribute('aria-controls');
-    const ariaExpanded = this.__getForwardedAttribute('aria-expanded');
-
-    const cssClasses: any = {
-      item: true,
-      selected: this.selected,
-      disabled: this.disabled || this.softDisabled,
-      pressed: this.isPressed,
-    };
-
-    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`
-        <button
-          id="item"
-          class=${classMap(cssClasses)}
-          type=${this.htmlType}
-          role=${ifDefined(role)}
-          tabindex=${ifDefined(tabIndex)}
-          ?disabled=${this.disabled}
-          ?aria-disabled=${this.softDisabled}
-          aria-haspopup=${ifDefined(ariaHasPopup)}
-          aria-controls=${ifDefined(ariaControls)}
-          aria-expanded=${ifDefined(ariaExpanded)}
-          @click=${this.__dispatchClick}
-          @mousedown=${this.__handlePress}
-          @keydown=${this.__handleKeyDown}
-          @keyup=${this.__handlePress}
-        >
-          ${this.renderContent()}
-        </button>
-      `;
-    }
-    cssClasses['native-link'] = true;
-    return html`
-      <a
-        id="item"
-        class=${classMap(cssClasses)}
-        href=${this.href}
-        target=${this.target}
-        rel=${ifDefined(this.rel)}
-        download=${ifDefined(this.download)}
-        role=${ifDefined(role)}
-        tabindex=${ifDefined(tabIndex ?? (this.disabled ? '-1' : '0'))}
-        aria-disabled=${String(this.disabled || this.softDisabled)}
-        aria-haspopup=${ifDefined(ariaHasPopup)}
-        aria-controls=${ifDefined(ariaControls)}
-        aria-expanded=${ifDefined(ariaExpanded)}
-        @click=${this.__dispatchClick}
-        @mousedown=${this.__handlePress}
-        @keydown=${this.__handleKeyDown}
-        @keyup=${this.__handlePress}
-      >
-        ${this.renderContent()}
-      </a>
-    `;
-  }
-
-  renderContent() {
+  override render() {
     const hasStart = this.__hasNamedSlot('start');
     const hasEnd = this.__hasNamedSlot('end');
-    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',
     );
 
     return html`
-      <div class="item-content">
-        ${hasStart
-          ? html`
-              <div class="start">
-                <slot
-                  name="start"
-                  @slotchange=${this.__handleSlotChange}
-                ></slot>
-              </div>
-            `
-          : nothing}
-        <div class="content">
-          ${hasOverline
-            ? html`
-                <div class="overline">
-                  <slot
-                    name="overline"
-                    @slotchange=${this.__handleSlotChange}
-                  ></slot>
-                </div>
-              `
-            : nothing}
-          ${hasHeadline || hasDefault
-            ? html`
-                <div class="headline-row">
-                  ${hasHeadline || hasDefault
-                    ? html`
-                        <div class="headline">
-                          ${hasHeadline
-                            ? html`<slot
-                                name="headline"
-                                @slotchange=${this.__handleSlotChange}
-                              ></slot>`
-                            : nothing}
-                          ${hasDefault
-                            ? html`<slot
-                                @slotchange=${this.__handleSlotChange}
-                              ></slot>`
-                            : nothing}
-                        </div>
-                      `
-                    : nothing}
-                </div>
-              `
-            : nothing}
-          ${hasSupportingText
-            ? html`
-                <div class="supporting-text">
-                  <slot
-                    name="supporting-text"
-                    @slotchange=${this.__handleSlotChange}
-                  ></slot>
-                </div>
-              `
-            : nothing}
+      <slot name="container"></slot>
+
+      <div class="item">
+        <slot class="non-text" name="start" ?hidden=${!hasStart}></slot>
+        <div class="text">
+          <slot name="overline" @slotchange=${this.handleTextSlotChange}></slot>
+          <slot
+            class="default-slot"
+            @slotchange=${this.handleTextSlotChange}
+          ></slot>
+          <slot name="headline" @slotchange=${this.handleTextSlotChange}></slot>
+          <slot
+            name="supporting-text"
+            @slotchange=${this.handleTextSlotChange}
+          ></slot>
         </div>
-        ${hasTrailingSupportingText
-          ? html`
-              <div class="trailing-supporting-text">
-                <slot
-                  name="trailing-supporting-text"
-                  @slotchange=${this.__handleSlotChange}
-                ></slot>
-              </div>
-            `
-          : nothing}
-        ${hasEnd
-          ? html`
-              <div class="end">
-                <slot name="end" @slotchange=${this.__handleSlotChange}></slot>
-              </div>
-            `
-          : nothing}
+        <slot
+          class="non-text"
+          name="trailing-supporting-text"
+          ?hidden=${!hasTrailingSupportingText}
+        ></slot>
+        <slot class="non-text" name="end" ?hidden=${!hasEnd}></slot>
       </div>
     `;
   }
+
+  private handleTextSlotChange() {
+    // Check if there's more than one text slot with content. If so, the item is
+    // multiline, which has a different min-height than single line items.
+    let isMultiline = false;
+    let slotsWithContent = 0;
+    for (const slot of this.textSlots) {
+      if (hasMeaningfulContent(slot)) {
+        slotsWithContent += 1;
+      }
+
+      if (slotsWithContent > 1) {
+        isMultiline = true;
+        break;
+      }
+    }
+
+    this.multiline = isMultiline;
+  }
 }

package/src/link/link.ts

@@ -1,7 +1,8 @@
 import { html, LitElement } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
-import NativeHyperlinkMixin from '@/__mixins/NativeHyperlinkMixin.js';
+import NativeHyperlinkMixin from '@/__internal/mixins/NativeHyperlinkMixin.js';
 import styles from './link.scss';
+import IndividualComponent from '@/IndividualComponent.js';
 
 /**
  * @label Link
@@ -16,6 +17,7 @@ import styles from './link.scss';
  * <wc-link href="#">Link</wc-link>
  * ```
  */
+@IndividualComponent
 export class Link extends NativeHyperlinkMixin(LitElement) {
   static styles = [styles];
 

package/src/list/list-item.scss

@@ -1,37 +1,34 @@
-@use "../../scss/mixin";
+@use '../../scss/mixin';
 
 @include mixin.base-styles;
 
 :host {
-  display: block;
-  padding-inline: var(--spacing-050);
+  display: flex;
 }
 
-.item-element {
+/*
+  * Reset native button/link styles
+  */
+.native-button {
+  @include mixin.reset-button-styles;
+}
+.native-link {
+  @include mixin.reset-link-styles;
+}
+
+.list-item {
   position: relative;
-  min-height: 3.5rem;
   width: 100%;
-  border: 0;
-  margin: 0;
-  padding: 0;
-  outline: 0;
-  background: transparent;
-  text-align: initial;
-  text-decoration: none;
   cursor: pointer;
-
-  @include mixin.get-typography(body-large);
+  text-align: start;
 
   .list-item-content {
-    position: relative;
-    z-index: 1;
-    display: flex;
-    align-items: center;
-    gap: var(--spacing-200);
-    min-height: 3.5rem;
-    padding-inline: var(--spacing-200);
-    color: var(--_label-text-color);
-    opacity: var(--_label-text-opacity, 1);
+    --item-padding-inline: 1rem;
+
+    --item-height: 1.5rem;
+    --item-multiline-height: 3rem;
+    --item-label-text-color: var(--_label-text-color);
+    --item-label-text-opacity: var(--_label-text-opacity, 1);
   }
 
   .leading,
@@ -54,12 +51,9 @@
   }
 
   .background {
-    position: absolute;
-    inset: 0;
     background-color: var(--_container-color);
     opacity: var(--_container-opacity, 1);
     border-radius: var(--shape-corner-medium);
-    pointer-events: none;
   }
 
   .focus-ring {
@@ -68,6 +62,7 @@
     --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 {
@@ -75,29 +70,46 @@
     --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);
+  }
 }
-.item-element {
+
+:host(:not([skeleton])) {
+  .skeleton {
+    display: none;
+  }
+}
+
+:host-context([variant='standard']) {
   --_container-color: transparent;
   --_label-text-color: var(--color-on-surface);
   --_leading-trailing-color: var(--color-on-surface-variant);
   --_container-state-color: var(--color-on-surface);
 
-  &:hover:not(:where(.disabled, .selected)) {
+  &:host(:hover:not([disabled], [soft-disabled], [skeleton])) {
     --_container-state-opacity: 0.08;
   }
 
-  &.pressed:not(:where(.disabled)) {
+  &:host(:active:not([disabled], [soft-disabled], [skeleton])) {
     --_container-state-opacity: 0.12;
   }
 
-  &.selected {
+  &:host([selected]) {
     --_container-color: var(--color-secondary-container);
     --_label-text-color: var(--color-on-secondary-container);
     --_leading-trailing-color: var(--color-on-secondary-container);
     --_container-state-color: var(--color-on-secondary-container);
   }
 
-  &.disabled {
+  &:host([disabled]),
+  &:host([soft-disabled]) {
     cursor: not-allowed;
     --_label-text-color: var(--color-on-surface);
     --_label-text-opacity: 0.38;