@redvars/peacock 3.6.2 → 3.7.0

package/src/input/input.ts

@@ -79,7 +79,14 @@ export class Input extends BaseInput {
   @query('.input-element')
   private inputElement?: HTMLInputElement;
 
-  private tabindex?: string;
+  override async focus() {
+    await Promise.all([
+      customElements.whenDefined('wc-input'),
+      customElements.whenDefined('wc-field'),
+    ]);
+    await this.updateComplete;
+    this.inputElement?.focus();
+  }
 
   connectedCallback() {
     super.connectedCallback();
@@ -87,11 +94,6 @@ export class Input extends BaseInput {
   }
 
   private handleInitialAttributes() {
-    if (this.hasAttribute('tabindex')) {
-      this.tabindex = this.getAttribute('tabindex') || undefined;
-      this.removeAttribute('tabindex');
-    }
-
     Array.from(this.attributes).forEach(attr => {
       if (attr.name.startsWith('aria-')) {
         this.configAria[attr.name] = attr.value;
@@ -105,21 +107,9 @@ export class Input extends BaseInput {
     this.value = (event.target as HTMLInputElement).value;
   }
 
-  override focus() {
-    this.inputElement?.focus();
-  }
-
-  override blur() {
-    this.inputElement?.blur();
-  }
-
-  private __handleFocusChange() {
-    // When calling focus() or reportValidity() during change, it's possible
-    // for blur to be called after the new focus event. Rather than set
-    // `this.focused` to true/false on focus/blur, we always set it to whether
-    // or not the input itself is focused.
-    this.focused = this.inputElement?.matches(':focus') ?? false;
-  }
+  private __handleFocusChange = (event: FocusEvent) => {
+    this.focused = event.type === 'focus';
+  };
 
   private __redispatchEvent(event: Event) {
     redispatchEvent(this, event);
@@ -156,7 +146,6 @@ export class Input extends BaseInput {
           placeholder=${this.placeholder}
           autocomplete=${this.autocomplete}
           .value=${this.value}
-          ?tabindex=${this.tabindex}
           ?readonly=${this.readonly}
           ?required=${this.required}
           ?disabled=${this.disabled}
@@ -169,7 +158,7 @@ export class Input extends BaseInput {
 
         ${this.type === 'password'
           ? html`
-              <pc-tooltip
+              <wc-tooltip
                 slot="field-end"
                 content=${this.passwordVisible
                   ? 'Hide password'
@@ -183,10 +172,12 @@ export class Input extends BaseInput {
                   }}
                 >
                   <wc-icon
-                    name=${this.passwordVisible ? 'visibility_off' : 'visibility'}
+                    name=${this.passwordVisible
+                      ? 'visibility_off'
+                      : 'visibility'}
                   ></wc-icon>
                 </wc-icon-button>
-              </pc-tooltip>
+              </wc-tooltip>
             `
           : nothing}
 

package/src/item/index.ts

@@ -0,0 +1 @@
+export { Item } from './item.js';

package/src/item/item.scss

@@ -0,0 +1,195 @@
+@use "../../scss/mixin";
+
+@include mixin.base-styles;
+
+:host {
+  position: relative;
+  display: block;
+  padding-inline: var(--spacing-050);
+  --item-height: 3.5rem;
+
+  --item-container-color: transparent;
+  --item-label-text-color: var(--color-on-surface);
+  --item-leading-trailing-color: var(--color-on-surface-variant);
+  --item-supporting-text-color: var(--color-on-surface-variant);
+
+  --item-container-selected-color: var(--color-tertiary-container);
+  --item-label-text-selected-color: var(--color-on-tertiary-container);
+
+  --private-item-container-color: var(--item-container-color);
+  --private-item-label-text-color: var(--item-label-text-color);
+  --private-item-leading-trailing-color: var(--item-leading-trailing-color);
+  --private-item-supporting-text-color: var(--item-supporting-text-color);
+
+  --private-item-container-state-color: var(--private-item-label-text-color);
+
+  --private-item-container-shape-start-start: var(--item-container-shape-start-start, var(--shape-corner-extra-small));
+  --private-item-container-shape-start-end: var(--item-container-shape-start-end, var(--shape-corner-extra-small));
+  --private-item-container-shape-end-start: var(--item-container-shape-end-start, var(--shape-corner-extra-small));
+  --private-item-container-shape-end-end: var(--item-container-shape-end-end, var(--shape-corner-extra-small));
+  --private-item-container-shape-variant: var(--item-container-shape-variant, none);
+}
+
+/**
+ * Reset native button/link styles
+ */
+.native-button {
+  @include mixin.reset-button-styles;
+}
+.native-link {
+  @include mixin.reset-link-styles;
+}
+
+.item {
+  min-height: var(--item-height);
+  width: 100%;
+  background: transparent;
+  text-align: initial;
+  cursor: pointer;
+  z-index: 0;
+
+  font-family: var(--item-label-font-family, var(--typography-body-large-font-family)) !important;
+  font-size:  var(--item-label-font-size, var(--typography-body-large-font-size)) !important;
+  font-weight: var(--item-label-font-weight, var(--typography-body-large-font-weight)) !important;
+  line-height: var(--item-label-line-height, var(--typography-body-large-line-height)) !important;
+  letter-spacing: var(--item-label-letter-spacing, var(--typography-body-large-letter-spacing)) !important;
+
+  .item-content {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-200);
+    min-height: var(--item-height);
+
+    padding-inline: var(--spacing-200);
+    color: var(--private-item-label-text-color);
+    opacity: var(--private-item-label-text-opacity, 1);
+    --icon-size: var(--item-icon-size, 1.5rem);
+    --icon-color: var(--private-item-leading-trailing-color);
+  }
+
+  .start,
+  .end {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--private-item-leading-trailing-color);
+  }
+
+  .end {
+    margin-inline-start: auto;
+  }
+
+  .content {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    justify-content: center;
+    gap: 0.125rem;
+    min-inline-size: 0;
+  }
+
+  .headline-row {
+    display: flex;
+    min-inline-size: 0;
+  }
+
+  .headline,
+  .overline,
+  .supporting-text,
+  .trailing-supporting-text {
+    min-inline-size: 0;
+  }
+
+  .headline {
+    flex: 1;
+    color: var(--private-item-label-text-color);
+  }
+
+  .overline,
+  .supporting-text,
+  .trailing-supporting-text {
+    color: var(--private-item-supporting-text-color);
+  }
+
+  .overline {
+    @include mixin.get-typography(label-small);
+  }
+
+  .supporting-text,
+  .trailing-supporting-text {
+    @include mixin.get-typography(body-medium);
+  }
+
+  .trailing-supporting-text {
+    display: inline-flex;
+    align-items: center;
+    white-space: nowrap;
+    color: var(--private-item-supporting-text-color);
+  }
+}
+
+/*
+  Background layers
+ */
+.background {
+  position: absolute;
+  inset: 0;
+  background-color: var(--private-item-container-color);
+  opacity: var(--private-item-container-opacity, 1);
+  pointer-events: none;
+  border-start-start-radius: var(--private-item-container-shape-start-start, var(--private-item-container-shape));
+  border-start-end-radius: var(--private-item-container-shape-start-end, var(--private-item-container-shape));
+  border-end-start-radius: var(--private-item-container-shape-end-start, var(--private-item-container-shape));
+  border-end-end-radius: var(--private-item-container-shape-end-end, var(--private-item-container-shape));
+  corner-shape: var(--private-item-container-shape-variant);
+}
+
+.focus-ring {
+  z-index: 2;
+  --focus-ring-container-shape-start-start: var(--private-item-container-shape-start-start, var(--private-item-container-shape));
+  --focus-ring-container-shape-start-end: var(--private-item-container-shape-start-end, var(--private-item-container-shape));
+  --focus-ring-container-shape-end-start: var(--private-item-container-shape-end-start, var(--private-item-container-shape));
+  --focus-ring-container-shape-end-end: var(--private-item-container-shape-end-end, var(--private-item-container-shape));
+  --focus-ring-container-shape-variant: var(--private-item-container-shape-variant);
+}
+
+.ripple {
+  border-start-start-radius: var(--private-item-container-shape-start-start, var(--private-item-container-shape));
+  border-start-end-radius: var(--private-item-container-shape-start-end, var(--private-item-container-shape));
+  border-end-start-radius: var(--private-item-container-shape-end-start, var(--private-item-container-shape));
+  border-end-end-radius: var(--private-item-container-shape-end-end, var(--private-item-container-shape));
+  corner-shape: var(--private-item-container-shape-variant);
+  --ripple-state-opacity: var(--private-item-container-state-opacity, 0);
+  --ripple-pressed-color: var(--private-item-container-state-color);
+}
+
+/* State management */
+:host:hover:not([disabled], [selected]) {
+  --private-item-container-state-opacity: 0.08;
+}
+
+:host:has(.item.pressed):not([disabled]) {
+  --private-item-container-state-opacity: 0.12;
+}
+
+:host([selected]) {
+  --private-item-container-color: var(--item-container-selected-color);
+  --private-item-label-text-color: var(--item-label-text-selected-color);
+  --private-item-leading-trailing-color: var(--item-label-text-selected-color);
+  --private-item-supporting-text-color: var(--item-label-text-selected-color);
+}
+
+:host([disabled]) {
+  cursor: not-allowed;
+  --private-item-label-text-color: var(--color-on-surface);
+  --private-item-label-text-opacity: 0.38;
+  --private-item-leading-trailing-color: var(--color-on-surface);
+  --private-item-supporting-text-color: var(--color-on-surface);
+  --private-item-container-opacity: 0.12;
+
+  .ripple {
+    display: none;
+  }
+}

package/src/item/item.ts

@@ -0,0 +1,362 @@
+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 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';
+
+/**
+ * @label Item
+ * @tag wc-item
+ * @rawTag item
+ *
+ * @summary A Material 3 item with start, text and end slots.
+ *
+ * @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-icon slot="end" name="chevron_right"></wc-icon>
+ * </wc-item>
+ * ```
+ * @tags display
+ */
+export class Item extends NativeButtonMixin(NativeHyperlinkMixin(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;
+
+  @state() isPressed = false;
+
+  private __handleSlotChange = () => {
+    this.requestUpdate();
+  };
+
+  private __hasNamedSlot(...names: string[]) {
+    return names.some(name =>
+      Array.from(this.children).some(
+        child => child.getAttribute('slot') === name,
+      ),
+    );
+  }
+
+  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() {
+    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}
+        </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}
+      </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>