@redvars/peacock 3.6.1 → 3.6.3

package/src/image/image.ts

@@ -1,5 +1,5 @@
 import { LitElement, html } from 'lit';
-import { property, state } from 'lit/decorators.js';
+import { property, query, state } from 'lit/decorators.js';
 
 import { isDarkMode } from '@/__utils/is-dark-mode.js';
 import { observeThemeChange } from '@/__utils/observe-theme-change.js';
@@ -37,7 +37,7 @@ export class Image extends LitElement {
 
   @state() private _loaded = false;
 
-  @state() private _previewOpen = false;
+  @query('.preview-dialog') private _dialog?: HTMLDialogElement;
 
   private _intersectionObserver: IntersectionObserver | null = null;
 
@@ -90,13 +90,15 @@ export class Image extends LitElement {
 
   private _handleClick() {
     if (this.preview) {
-      this._previewOpen = true;
+      this._dialog?.showModal();
     }
   }
 
-  private _closePreview(e: Event) {
-    e.stopPropagation();
-    this._previewOpen = false;
+  private _handleDialogClick(e: MouseEvent) {
+    // Close when clicking the backdrop (target is the dialog itself, not the image)
+    if (e.target === e.currentTarget) {
+      (e.currentTarget as HTMLDialogElement).close();
+    }
   }
 
   render() {
@@ -112,17 +114,14 @@ export class Image extends LitElement {
           : html`<span class="placeholder" aria-hidden="true"></span>`}
       </div>
 
-      <!-- Lightbox preview overlay (inside shadow root) -->
-      <div
-        class="preview-overlay ${this._previewOpen ? 'open' : ''}"
-        role="dialog"
-        aria-modal="true"
+      <!-- Lightbox preview dialog — uses native top-layer to avoid stacking context issues -->
+      <dialog
+        class="preview-dialog"
         aria-label="Image preview"
-        @click=${this._closePreview}
-        @keydown=${(e: KeyboardEvent) => e.key === 'Escape' && this._closePreview(e)}
+        @click=${this._handleDialogClick}
       >
         <img src=${this._activeSrc} alt=${this.imageTitle} @click=${(e: Event) => e.stopPropagation()} />
-      </div>
+      </dialog>
     `;
   }
 }

package/src/index.ts

@@ -16,6 +16,7 @@ export { Accordion } from './accordion/index.js';
 export { Link } from './link/index.js';
 export { Tag } from './chip/tag/index.js';
 export { Chip } from './chip/chip/index.js';
+export { ChipSet } from './chip/chip-set/index.js';
 export { LinearProgress } from './progress/linear-progress/index.js';
 export { CircularProgress } from './progress/circular-progress/index.js';
 export { Skeleton } from './skeleton/index.js';
@@ -38,6 +39,7 @@ export { Popover, PopoverContent } from './popover/index.js';
 export { Breadcrumb, BreadcrumbItem } from './breadcrumb/index.js';
 export { Menu, MenuItem, SubMenu } from './menu/index.js';
 export { List, ListItem } from './list/index.js';
+export { Item } from './item/index.js';
 
 export { CodeHighlighter } from './code-highlighter/index.js';
 export { CodeEditor } from './code-editor/index.js';

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,184 @@
+@use "../../scss/mixin";
+
+@include mixin.base-styles;
+
+:host {
+  display: block;
+  padding-inline: var(--spacing-050);
+  --item-height: 3.5rem;
+}
+
+/**
+ * Reset native button/link styles
+ */
+.native-button {
+  @include mixin.reset-button-styles;
+}
+.native-link {
+  @include mixin.reset-link-styles;
+}
+
+.item {
+  position: relative;
+  min-height: var(--item-height);
+  width: 100%;
+  background: transparent;
+  text-align: initial;
+  cursor: pointer;
+
+  --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);
+
+  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 {
+    position: absolute;
+    inset: 0;
+    background-color: var(--private-item-container-color);
+    opacity: var(--private-item-container-opacity, 1);
+    pointer-events: none;
+
+    @include mixin.apply-container-shape(private-item);
+  }
+
+  .focus-ring {
+    z-index: 2;
+    @include mixin.copy-container-shape(private-item, focus-ring);
+    
+  }
+
+  .ripple {
+    @include mixin.apply-container-shape(private-item);
+    --ripple-state-opacity: var(--private-item-container-state-opacity, 0);
+    --ripple-pressed-color: var(--private-item-container-state-color);
+  }
+}
+
+.item {
+  --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);
+
+  &:hover:not(:where(.disabled, .selected)) {
+    --private-item-container-state-opacity: 0.08;
+  }
+
+  &.pressed:not(:where(.disabled)) {
+    --private-item-container-state-opacity: 0.12;
+  }
+
+  &.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);
+  }
+
+  &.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;
+    }
+  }
+}
+
+:host {
+  --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);
+}

package/src/item/item.ts

@@ -0,0 +1,340 @@
+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 BaseButtonMixin from '@/__mixins/BaseButtonMixin.js';
+import BaseHyperlinkMixin from '@/__mixins/BaseHyperlinkMixin.js';
+import {
+  dispatchActivationClick,
+  isActivationClick,
+} from '@/__utils/dispatch-event-utils.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 BaseButtonMixin(BaseHyperlinkMixin(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' && !this.__isLink()) {
+      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 isLink = this.__isLink();
+    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,
+    };
+
+    if (!isLink) {
+      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>
+      `;
+    } else {
+      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`
+      <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`
+              <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>
+    `;
+  }
+}