@redvars/peacock 3.6.0 → 3.6.2

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="dark"
+              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/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/flow-designer/flow-designer-node.ts

@@ -143,7 +143,7 @@ export class FlowDesignerNode extends LitElement {
 
     return html`
       <div class="node-header">
-        <wc-icon name=${icon} class="node-icon"></wc-icon>
+        <wc-icon provider="carbon" name=${icon} class="node-icon"></wc-icon>
         <span class="node-title">${node.label}</span>
       </div>
     `;

package/src/html-editor/html-editor.scss

@@ -13,10 +13,18 @@
   // Let the field expand to fit content vertically
   --field-height: auto;
   --field-padding-block: 0;
+  --code-editor-height: var(--html-editor-min-height, 8rem);
 
   width: 100%;
 }
 
+.mode-switcher {
+  display: flex;
+  justify-content: flex-end;
+  padding: var(--spacing-075, 0.375rem) var(--spacing-100, 0.5rem)
+    var(--spacing-050, 0.25rem);
+}
+
 // ── Toolbar ─────────────────────────────────────────────────────────────────
 
 .html-editor-toolbar {
@@ -76,6 +84,15 @@
     cursor: not-allowed;
   }
 
+  &.active {
+    background: color-mix(
+      in srgb,
+      var(--color-primary, #6750a4) 16%,
+      transparent
+    );
+    color: var(--color-primary, #6750a4);
+  }
+
   wc-icon {
     pointer-events: none;
   }
@@ -104,13 +121,27 @@
   word-break: break-word;
   overflow-wrap: break-word;
 
+  &.hidden {
+    display: none;
+  }
+
+  .tiptap-root {
+    min-height: calc(var(--html-editor-min-height, 8rem) - 2rem);
+  }
+
+  .ProseMirror {
+    outline: none;
+    min-height: calc(var(--html-editor-min-height, 8rem) - 2rem);
+  }
+
   // Placeholder
-  &.is-empty::before {
+  .ProseMirror p.is-editor-empty:first-child::before {
     content: attr(data-placeholder);
     color: var(--color-on-surface-variant, #49454f);
     opacity: 0.6;
     pointer-events: none;
-    position: absolute;
+    float: left;
+    height: 0;
   }
 
   // Sensible defaults for user-generated rich content
@@ -131,6 +162,12 @@
   }
 }
 
+.html-source {
+  &.hidden {
+    display: none;
+  }
+}
+
 // ── Read-only tag ───────────────────────────────────────────────────────────
 
 .read-only-tag {
@@ -144,3 +181,8 @@
   cursor: not-allowed;
   opacity: 0.6;
 }
+
+:host([disabled]) .html-source,
+:host([readonly]) .html-source {
+  opacity: 0.7;
+}