@redvars/peacock 3.6.1 → 3.6.3

package/src/chip/chip/chip.scss

@@ -3,27 +3,36 @@
 @include mixin.base-styles;
 
 :host {
-  display: inline-block;
+  display: inline-flex;
   --chip-container-color: var(--color-surface);
   --chip-label-text-color: var(--color-on-surface);
-  --chip-outline-color: var(--color-outline);
+  --chip-outline-color: var(--color-outline-variant);
   --chip-container-shape: var(--shape-corner-small);
+
+  --chip-container-padding: 1rem;
+  /* 8dp */
 }
 
-:host-context([data-theme="dark"]) {
-  --chip-hover-color: var(--color-primary-30);
+/*
+  * Reset native button/link styles
+  */
+.button {
+  background: transparent;
+  border: none;
+  appearance: none;
+  margin: 0;
+  padding: 0;
+  outline: none;
+  text-decoration: none;
 }
 
 .chip {
   position: relative;
   display: inline-flex;
-  flex-direction: column;
   align-items: center;
-  justify-content: center;
   height: var(--chip-height, var(--_chip-height, 2rem));
-  padding: 0 var(--_container-padding, 1rem);
   width: 100%;
-  border-radius: var(--chip-container-shape);
+  cursor: pointer;
 
   .tag-content {
     position: relative;
@@ -32,86 +41,151 @@
     text-overflow: ellipsis;
     white-space: nowrap;
     max-width: 100%;
+    height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
-    color: var(--chip-label-text-color);
-    @include mixin.get-typography(label-small);
-    gap: .5rem;
+    padding-inline: var(--chip-container-padding);
+    color: var(--_chip-text-color);
+    opacity: var(--_chip-text-opacity, 1);
+    @include mixin.get-typography(label-large);
+
+    .label-container {
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
 
 
-    .tag-image {
-      width: 1.125rem;
-      height: 1.125rem;
-      border-radius: 100%;
-      background: var(--chip-hover-color);
-    }
+    .close-btn {
+      height: 100%;
+      padding: 0;
+      padding-inline: calc(var(--chip-container-padding) / 2);
+      margin: 0;
+      border: none;
+      background: transparent;
+      line-height: 0;
+      cursor: pointer;
 
-  }
+      .close-btn-icon {
+        --icon-size: 1rem;
+        --icon-color: var(--_chip-text-color);
+      }
+
+      &:hover {
+        background: var(--chip-hover-color);
+      }
+    }
 
-  .close-btn {
-    border-radius: 12px;
-    padding: 0;
-    margin: 0;
-    border: none;
-    background: transparent;
-    line-height: 0;
-    cursor: pointer;
-    --icon-size: 1rem;
-
-    .close-btn-icon {
+    .icon-slot-container {
+      height: 100%;
+      display: flex;
+      align-items: center;
       --icon-size: 1rem;
+      --icon-color: var(--color-primary);
     }
 
-    &:hover {
-      background: var(--chip-hover-color);
+  }
 
-      .close-btn-icon {
-        color: var(--background);
-      }
-    }
+  .focus-ring {
+    z-index: 2;
+    display: block;
+    --focus-ring-container-shape: var(--chip-container-shape);
+  }
+
+  .ripple {
+    display: block;
+    border-radius: var(--chip-container-shape);
+    --ripple-state-opacity: var(--_chip-state-opacity, 0);
+    --ripple-pressed-color: var(--_chip-state-color);
+  }
+
+  &.disabled {
+    cursor: not-allowed;
   }
 
+  &.dismissible .tag-content {
+    padding-inline-end: 0;
+  }
+
+  &.dismissible.actionable .tag-content {
+    padding-inline-end: calc(var(--chip-container-padding) / 2);
+  }
+
+  &.icon-slot-has-content .tag-content, &.selected .tag-content {
+    padding-inline-start: 0;
+  }
+
+  &.icon-slot-has-content .icon-slot-container, &.selected .icon-slot-container {
+    padding-inline: calc(var(--chip-container-padding) / 2);
+  }
+
+
+
   /**
    * Tag background layers
    */
   .background {
     display: block;
     position: absolute;
+    left: 0;
     width: 100%;
     height: 100%;
-    border-radius: inherit;
+    border-radius: var(--chip-container-shape);
+    
 
-    background: var(--chip-container-color);
+    background: var(--_chip-container-color);
     pointer-events: none;
   }
 
   .outline {
+    z-index: 0;
     display: block;
     position: absolute;
+    left: 0;
     width: 100%;
     height: 100%;
-    border-radius: inherit;
+    border-radius: var(--chip-container-shape);
     border: 1px solid var(--chip-outline-color);
   }
 
   .elevation {
     --elevation-level: 0;
     transition-duration: 280ms;
-    border-radius: inherit;
+    --elevation-container-shape: var(--chip-container-shape);
   }
 
+}
 
-  &.dismissible .tag-content {
-    padding-inline-end: .25rem;
+
+/** Color state management */
+.chip {
+  --_chip-container-color: var(--chip-container-color);
+  --_chip-text-color: var(--chip-label-text-color);
+  --_chip-state-color: var(--_chip-text-color);
+
+  &:hover {
+    --_chip-state-opacity: 0.08;
   }
 
+  &.pressed {
+    --_chip-state-opacity: 0.12;
+  }
+  
   &.selected {
-    color: var(--background);
-    background: var(--chip-hover-color);
+    --_chip-container-color: var(--color-secondary-container);
+    --_chip-text-color: var(--color-on-secondary-container);
+  }
 
-    .close-btn-icon {
-      color: var(--background);
+  &.disabled {
+    --_chip-container-color: var(--color-on-surface);
+    --_chip-container-opacity: 0.1;
+    --_chip-text-color: var(--color-on-surface);
+    --_chip-text-opacity: 0.38;
+
+    .ripple {
+      display: none;
     }
   }
-}
+}

package/src/chip/chip/chip.ts

@@ -1,9 +1,13 @@
-import { html, LitElement, nothing } from 'lit';
-import { property } from 'lit/decorators.js';
+import { html, 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 { observerSlotChangesWithCallback } from '@/__utils/observe-slot-change.js';
+import { dispatchActivationClick, isActivationClick } from '@/__utils/dispatch-event-utils.js';
 import styles from './chip.scss';
-import colorStyles from './chip-colors.scss';
 import sizeStyles from './chip-sizes.scss';
+import { spread } from '@/__directive/spread.js';
+import { BaseButton } from '@/button/BaseButton.js';
 
 /**
  * @label Chip
@@ -17,30 +21,41 @@ import sizeStyles from './chip-sizes.scss';
  * <wc-chip>Chip content</wc-chip>
  * ```
  */
-export class Chip extends LitElement {
+export class Chip extends BaseButton {
   // Define styles (Lit handles Scoping via Shadow DOM by default)
   // You would typically import your tag.scss.js here or use the css tag
-  static styles = [styles, colorStyles, sizeStyles];
+  static styles = [styles, sizeStyles];
 
   /** If true, the tag will have a close icon. */
   @property({ type: Boolean }) dismissible = false;
 
-  /** Tag color. */
-  @property({ type: String, reflect: true }) color?:
-    | 'default'
-    | 'blue'
-    | 'green'
-    | 'red'
-    | 'yellow' = 'default';
+  /**
+   * Additional ARIA attributes to pass to the inner button/anchor element.
+   */
+  @property({ reflect: true })
+  configAria?: { [key: string]: any };
 
-  /** Tag value. */
-  @property({ type: String, reflect: true }) value = '';
+  @state() private _hasIconSlotContent = false;
 
-  /** If true, the tag will be selected. */
-  @property({ type: Boolean, reflect: true }) selected = false;
+  @state() private _isPressed = false;
 
-  /** Image source. */
-  @property({ type: String }) imageSrc?: string;
+  override focus() {
+    this.buttonElement?.focus();
+  }
+
+  override blur() {
+    this.buttonElement?.blur();
+  }
+
+  override firstUpdated() {
+    observerSlotChangesWithCallback(
+      this.renderRoot.querySelector('slot[name="icon"]'),
+      hasContent => {
+        this._hasIconSlotContent = hasContent;
+        this.requestUpdate();
+      },
+    );
+  }
 
   private _dismissClickHandler(e: MouseEvent) {
     e.stopPropagation();
@@ -56,8 +71,9 @@ export class Chip extends LitElement {
     );
   }
 
+
   private _renderCloseButton() {
-    if (!this.dismissible) return null;
+    if (!this.dismissible) return nothing;
 
     return html`
       <button
@@ -70,35 +86,78 @@ export class Chip extends LitElement {
     `;
   }
 
-  private _renderImage() {
-    if (this.imageSrc)
-      return html`<img
-        src=${this.imageSrc}
-        class="tag-image"
-        alt="Tag Logo"
-      />`;
-    return nothing;
-  }
+  
 
   render() {
-    const classes = {
+    const cssClasses = {
       chip: true,
+      button: true,
       selected: this.selected,
       dismissible: this.dismissible,
-      [`color-${this.color}`]: true,
+      pressed: this._isPressed,
+      'icon-slot-has-content': this._hasIconSlotContent,
     };
 
+     if (!this.__isLink()) {
+        return html`<button
+            class=${classMap(cssClasses)}
+            id="button"
+            type=${this.htmlType}
+            @click=${this.__dispatchClickWithThrottle}
+            @mousedown=${this.__handlePress}
+            @keydown=${this.__handlePress}
+            @keyup=${this.__handlePress}
+  
+            aria-describedby=${ifDefined(this.softDisabled ? BaseButton.DISABLED_REASON_ID : undefined)}
+            ?aria-disabled=${this.softDisabled}
+  
+            ?disabled=${this.disabled}
+            ${spread(this.configAria)}
+          >
+            ${this.renderChipContent()}
+          </button>`;
+      }
+      return html`<a
+          class=${classMap(cssClasses)}
+          id="button"
+          href=${this.href}
+          target=${this.target}
+          tabindex=${this.disabled ? '-1' : '0'}
+          
+          @click=${this.__dispatchClick}
+          @mousedown=${this.__handlePress}
+          @keydown=${this.__handlePress}
+          @keyup=${this.__handlePress}
+          role="button"
+  
+          aria-describedby=${ifDefined(this.softDisabled ? BaseButton.DISABLED_REASON_ID : undefined)}
+          ?aria-disabled=${this.softDisabled}
+  
+          ${spread(this.configAria)}
+        >
+          ${this.renderChipContent()}
+        </a>`;
+    }
+
+  renderChipContent() {
     return html`
-      <div class="${classMap(classes)}">
-        <wc-elevation class="elevation"></wc-elevation>
-        <div class="background"></div>
-        <div class="outline"></div>
+      <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="tag-content">
 
-        <div class="tag-content">
-          <slot name="icon"></slot>
-          <slot></slot>
-          ${this._renderCloseButton()}
+        <div class="icon-slot-container">
+          ${this.selected
+            ? html`<wc-icon class="selected-icon" name="check"></wc-icon>`
+            : html`<slot name="icon"></slot>`}
         </div>
+        <div class="label-container">
+          <slot></slot>
+        </div> 
+        
+        ${this._renderCloseButton()}
       </div>
     `;
   }

package/src/chip/chip-set/chip-set.scss

@@ -0,0 +1,13 @@
+@use '../../../scss/mixin';
+
+@include mixin.base-styles;
+
+:host {
+  display: block;
+}
+
+slot {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}

package/src/chip/chip-set/chip-set.ts

@@ -0,0 +1,25 @@
+import { html, LitElement } from 'lit';
+import styles from './chip-set.scss';
+
+/**
+ * @label Chip Set
+ * @tag wc-chip-set
+ * @rawTag chip-set
+ * @summary A layout container for wrapping chips.
+ * @tags layout
+ *
+ * @example
+ * ```html
+ * <wc-chip-set>
+ *   <wc-chip>One</wc-chip>
+ *   <wc-chip>Two</wc-chip>
+ * </wc-chip-set>
+ * ```
+ */
+export class ChipSet extends LitElement {
+  static styles = [styles];
+
+  override render() {
+    return html`<slot></slot>`;
+  }
+}

package/src/chip/chip-set/index.ts

@@ -0,0 +1 @@
+export { ChipSet } from './chip-set.js';

package/src/code-highlighter/code-highlighter.ts

@@ -44,6 +44,8 @@ const locale = {
 export class CodeHighlighter extends LitElement {
   static styles = [styles];
 
+  private static readonly COPY_FEEDBACK_DURATION = 3000;
+
   @property({ type: String, reflect: true })
   language: BundledLanguage = 'javascript';
 
@@ -61,13 +63,25 @@ export class CodeHighlighter extends LitElement {
 
   @state() private compiledCode: string | null = null;
 
+  @state() private _copied = false;
+
   private parsedCode: string | null = null;
 
+  private _copyFeedbackTimeout: number | null = null;
+
   async connectedCallback() {
     // eslint-disable-next-line wc/guard-super-call
     super.connectedCallback();
   }
 
+  disconnectedCallback() {
+    if (this._copyFeedbackTimeout !== null) {
+      window.clearTimeout(this._copyFeedbackTimeout);
+      this._copyFeedbackTimeout = null;
+    }
+    super.disconnectedCallback();
+  }
+
   firstUpdated() {
     this.__highlightCode();
   }
@@ -146,19 +160,32 @@ export class CodeHighlighter extends LitElement {
   }
 
   private async __handleCopyClick() {
-    await copyToClipboard(`${this.parsedCode}`);
+    if (this.parsedCode == null) {
+      return;
+    }
+
+    await copyToClipboard(this.parsedCode);
+    this._copied = true;
+
+    if (this._copyFeedbackTimeout !== null) {
+      window.clearTimeout(this._copyFeedbackTimeout);
+    }
+
+    this._copyFeedbackTimeout = window.setTimeout(() => {
+      this._copied = false;
+      this._copyFeedbackTimeout = null;
+    }, CodeHighlighter.COPY_FEEDBACK_DURATION);
   }
 
   render() {
     if (this.compiledCode === null) {
       return html`
         <div class="code-loader">
-          <p-circular-progress indeterminate></p-circular-progress>
+          <wc-circular-progress indeterminate></wc-circular-progress>
           ${locale.loading}
         </div>
       `;
     }
-    // @click=${() => this.inline && this.handleCopyClick()}
 
     return html`
       <div
@@ -171,11 +198,11 @@ export class CodeHighlighter extends LitElement {
           <div class="header-title">${this.language}</div>
           <div class="header-actions">
             <wc-icon-button
-              color="surface"
+              color=${this._copied ? 'success' : 'surface'}
               variant="text"
               size="xs"
-              aria-label=${locale.copyToClipboard}
-              tooltip=${locale.copyToClipboard}
+              aria-label=${this._copied ? locale.copied : locale.copyToClipboard}
+              tooltip=${this._copied ? locale.copied : locale.copyToClipboard}
               @click=${this.__handleCopyClick}
             >
               <wc-icon name="content_copy"></wc-icon>

package/src/empty-state/empty-state.scss

@@ -53,6 +53,7 @@
 
 :host(.content-center) .content {
   align-items: center;
+  text-align: center;
 }
 
 @container emptystate (min-width: 672px) {

package/src/field/field.scss

@@ -95,7 +95,7 @@
       display: flex;
       align-items: center;
       flex: 1;
-      height: var(--field-height, 3.5rem);
+      min-height: var(--field-height, 3.5rem);
       padding-block: var(--field-padding-block);
       z-index: 1;
 

package/src/field/field.ts

@@ -24,6 +24,12 @@ import styles from './field.scss';
  * @tags form
  */
 export class Field extends LitElement {
+
+  static shadowRootOptions: ShadowRootInit = {
+      ...LitElement.shadowRootOptions,
+      delegatesFocus: true,
+    };
+    
   static styles = [styles];
 
   @property({ type: String })

package/src/flow-designer/flow-designer-node.ts

@@ -10,6 +10,7 @@ import type { WorkflowNode } from './types.js';
  *
  * @tag wc-flow-designer-node
  * @rawTag flow-designer-node
+ * @parentRawTag flow-designer
  * @wip true
  */
 @IndividualComponent

package/src/image/image.scss

@@ -30,27 +30,32 @@ img.clickable {
   display: block;
 }
 
-/* Preview overlay — rendered in light DOM via portal, but we keep
-    a host-level overlay as a fallback when shadow DOM is used.       */
-.preview-overlay {
-  display: none;
-  position: fixed;
-  inset: 0;
-  z-index: 9999;
-  background: rgba(0, 0, 0, 0.85);
-  align-items: center;
-  justify-content: center;
+/* Lightbox preview — native <dialog> renders in the top layer,
+   bypassing any stacking context on the host page.                  */
+.preview-dialog {
+  background: transparent;
+  border: none;
   cursor: zoom-out;
+  max-height: 90dvh;
+  max-width: 90dvw;
+  padding: 0;
+
+  &[open] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &::backdrop {
+    background: color-mix(in srgb, var(--color-scrim), transparent 15%);
+  }
 }
 
-.preview-overlay.open {
-  display: flex;
-}
-
-.preview-overlay img {
+.preview-dialog img {
   max-width: 90vw;
   max-height: 90vh;
   object-fit: contain;
-  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
+  box-shadow: 0 8px 40px color-mix(in srgb, var(--color-shadow), transparent 40%);
   border-radius: 4px;
+  cursor: auto;
 }