@redvars/peacock 3.6.1 → 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="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/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/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';

package/src/menu/menu/menu.ts

@@ -276,6 +276,16 @@ export class Menu extends LitElement {
     this._syncRovingTabIndex();
   }
 
+  private _dispatchItemActivate(item: MenuItem) {
+    this.dispatchEvent(
+      new CustomEvent('menu-item-activate', {
+        bubbles: true,
+        composed: true,
+        detail: { item },
+      }),
+    );
+  }
+
   private _onClick = (event: Event) => {
     if (!this.open) {
       return;
@@ -287,6 +297,7 @@ export class Menu extends LitElement {
     }
 
     this._setActiveItem(item);
+    this._dispatchItemActivate(item);
     if (item.keepOpen) {
       return;
     }

package/src/modal/modal.scss

@@ -5,19 +5,19 @@
 :host {
   display: contents;
 
-  --modal-container-color: var(--color-surface-container-high, #ece6f0);
-  --modal-scrim-color: rgba(0, 0, 0, 0.32);
-  --modal-shape: var(--shape-corner-extra-large, 28px);
+  --modal-container-color: var(--color-surface-container-high);
+  --modal-scrim-color: color-mix(in srgb, var(--color-scrim), transparent 32%);
+  --modal-shape: var(--shape-corner-extra-large);
   --modal-min-width: 280px;
   --modal-max-width: 560px;
   --modal-max-height: 90dvh;
-  --modal-transition-duration: var(--duration-medium2, 300ms);
-  --modal-transition-easing: var(--easing-emphasized, cubic-bezier(0.2, 0, 0, 1));
-  --modal-heading-color: var(--color-on-surface, #1c1b1f);
-  --modal-subheading-color: var(--color-on-surface-variant, #49454f);
-  --modal-content-color: var(--color-on-surface-variant, #49454f);
-  --modal-divider-color: var(--color-outline-variant, #cac4d0);
-  --modal-elevation: var(--elevation-level3, 0 4px 8px 3px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.3));
+  --modal-transition-duration: var(--duration-medium2);
+  --modal-transition-easing: var(--easing-emphasized);
+  --modal-heading-color: var(--color-on-surface);
+  --modal-subheading-color: var(--color-on-surface-variant);
+  --modal-content-color: var(--color-on-surface-variant);
+  --modal-divider-color: var(--color-outline-variant);
+  --modal-elevation: var(--elevation-level3);
 }
 
 /* Scrim backdrop */

package/src/modal/modal.ts

@@ -9,7 +9,7 @@ type ModalSize = 'xs' | 'sm' | 'md' | 'lg' | 'fullscreen';
 /**
  * @label Modal
  * @tag wc-modal
- * @rawTag modal-wc
+ * @rawTag modal
  * @summary A Material Design 3 dialog/modal for displaying content in a layer above the page, with optional header, body, and footer slots.
  *
  * @cssprop --modal-container-color - Background color of the dialog container.

package/src/peacock-loader.ts

@@ -37,6 +37,7 @@ import { Accordion } from './accordion/accordion.js';
 import { Link } from './link/link.js';
 import { Tag } from './chip/tag/tag.js';
 import { Chip } from './chip/chip/chip.js';
+import { ChipSet } from './chip/chip-set/chip-set.js';
 import { LinearProgress } from './progress/linear-progress/linear-progress.js';
 import { CircularProgress } from './progress/circular-progress/circular-progress.js';
 
@@ -80,17 +81,6 @@ import { Search } from './search/search.js';
 import { Toolbar } from './toolbar/toolbar.js';
 import { NavigationRail } from './navigation-rail/navigation-rail.js';
 import { NavigationRailItem } from './navigation-rail/navigation-rail-item.js';
-import { Calendar } from './calendar/calendar.js';
-import { CalendarColumnView } from './calendar/calendar-column-view.js';
-import { CalendarMonthView } from './calendar/calendar-month-view.js';
-import { Canvas } from './canvas/canvas.js';
-import { FlowDesigner } from './flow-designer/flow-designer.js';
-import { FlowDesignerNode } from './flow-designer/flow-designer-node.js';
-import { ConditionBuilder } from './condition-builder/condition-builder.js';
-import { CbPredicate } from './condition-builder/cb-predicate.js';
-import { CbCompoundExpression } from './condition-builder/cb-compound-expression.js';
-import { CbExpression } from './condition-builder/cb-expression.js';
-import { CbDivider } from './condition-builder/cb-divider.js';
 
 const distDirectory = `${import.meta.url}/..`;
 await loadCSS(`${distDirectory}/assets/styles.css`);
@@ -190,6 +180,9 @@ const loaderConfig: LoaderConfig = {
     'wc-chip': {
       CustomElementClass: Chip,
     },
+    'wc-chip-set': {
+      CustomElementClass: ChipSet,
+    },
     'wc-card': {
       CustomElementClass: Card,
     },
@@ -256,6 +249,7 @@ const loaderConfig: LoaderConfig = {
     },
     'wc-html-editor': {
       importPath: `${distDirectory}/html-editor.js`,
+      dependencies: ['wc-code-editor'],
     },
     'wc-code-highlighter': {
       importPath: `${distDirectory}/code-highlighter.js`,
@@ -354,22 +348,24 @@ const loaderConfig: LoaderConfig = {
       CustomElementClass: NavigationRailItem,
     },
     'wc-calendar': {
-      CustomElementClass: Calendar,
+      importPath: `${distDirectory}/calendar.js`,
+      dependencies: ['wc-calendar-column-view', 'wc-calendar-month-view'],
     },
     'wc-calendar-column-view': {
-      CustomElementClass: CalendarColumnView,
+      importPath: `${distDirectory}/calendar-column-view.js`,
     },
     'wc-calendar-month-view': {
-      CustomElementClass: CalendarMonthView,
+      importPath: `${distDirectory}/calendar-month-view.js`,
     },
     'wc-canvas': {
-      CustomElementClass: Canvas,
+      importPath: `${distDirectory}/canvas.js`,
     },
     'wc-flow-designer': {
-      CustomElementClass: FlowDesigner,
+      importPath: `${distDirectory}/flow-designer.js`,
+      dependencies: ['wc-flow-designer-node'],
     },
     'wc-flow-designer-node': {
-      CustomElementClass: FlowDesignerNode,
+      importPath: `${distDirectory}/flow-designer-node.js`,
     },
     'wc-chart-doughnut': {
       importPath: `${distDirectory}/chart-doughnut.js`,
@@ -384,19 +380,25 @@ const loaderConfig: LoaderConfig = {
       importPath: `${distDirectory}/chart-stacked-bar.js`,
     },
     'wc-condition-builder': {
-      CustomElementClass: ConditionBuilder,
+      importPath: `${distDirectory}/condition-builder.js`,
+      dependencies: [
+        'wc-cb-predicate',
+        'wc-cb-compound-expression',
+        'wc-cb-expression',
+        'wc-cb-divider',
+      ],
     },
     'wc-cb-predicate': {
-      CustomElementClass: CbPredicate,
+      importPath: `${distDirectory}/cb-predicate.js`,
     },
     'wc-cb-compound-expression': {
-      CustomElementClass: CbCompoundExpression,
+      importPath: `${distDirectory}/cb-compound-expression.js`,
     },
     'wc-cb-expression': {
-      CustomElementClass: CbExpression,
+      importPath: `${distDirectory}/cb-expression.js`,
     },
     'wc-cb-divider': {
-      CustomElementClass: CbDivider,
+      importPath: `${distDirectory}/cb-divider.js`,
     },
   },
 };