@redvars/peacock 3.6.1 → 3.6.3

package/src/peacock-loader.ts

@@ -30,6 +30,7 @@ import { Radio } from './radio/radio.js';
 import { Menu } from './menu/menu/menu.js';
 import { MenuItem } from './menu/menu-item/menu-item.js';
 import { SubMenu } from './menu/sub-menu/sub-menu.js';
+import { Item } from './item/item.js';
 import { List } from './list/list.js';
 import { ListItem } from './list/list-item.js';
 
@@ -37,6 +38,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 +82,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 +181,9 @@ const loaderConfig: LoaderConfig = {
     'wc-chip': {
       CustomElementClass: Chip,
     },
+    'wc-chip-set': {
+      CustomElementClass: ChipSet,
+    },
     'wc-card': {
       CustomElementClass: Card,
     },
@@ -256,6 +250,7 @@ const loaderConfig: LoaderConfig = {
     },
     'wc-html-editor': {
       importPath: `${distDirectory}/html-editor.js`,
+      dependencies: ['wc-code-editor'],
     },
     'wc-code-highlighter': {
       importPath: `${distDirectory}/code-highlighter.js`,
@@ -296,6 +291,9 @@ const loaderConfig: LoaderConfig = {
     'wc-list-item': {
       CustomElementClass: ListItem,
     },
+    'wc-item': {
+      CustomElementClass: Item,
+    },
     'wc-container': {
       CustomElementClass: Container,
     },
@@ -354,22 +352,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 +384,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`,
     },
   },
 };

package/src/popover/popover-content.ts

@@ -9,7 +9,7 @@ import styles from './popover-content.scss';
  * @tag wc-popover-content
  * @rawTag popover-content
  * @summary Content container for the wc-popover component.
- * @childComponent true
+ * @parentRawTag popover
  * @tags display
  *
  * @cssprop --popover-content-background - Background color of the popover content. Defaults to `var(--color-surface-container)`.

package/src/search/search.ts

@@ -97,16 +97,15 @@ export class Search extends LitElement {
     );
   }
 
-  /** Focuses the internal input element. */
-  override focus() {
+  override async focus() {
+    await Promise.all([
+      customElements.whenDefined('wc-input'),
+      customElements.whenDefined('wc-field'),
+    ]);
+    await this.updateComplete;
     this.inputElement?.focus();
   }
 
-  /** Blurs the internal input element. */
-  override blur() {
-    this.inputElement?.blur();
-  }
-
   private __handleInput(event: InputEvent) {
     const input = event.target as HTMLInputElement;
     this.value = input.value;
@@ -150,13 +149,9 @@ export class Search extends LitElement {
     }
   }
 
-  private __handleFocus() {
-    this.focused = true;
-  }
-
-  private __handleBlur() {
-    this.focused = false;
-  }
+  private __handleFocusChange = (event: FocusEvent) => {
+    this.focused = event.type === 'focus';
+  };
 
   private __clearValue() {
     this.value = '';
@@ -230,8 +225,8 @@ export class Search extends LitElement {
           @input=${this.__handleInput}
           @change=${this.__handleChange}
           @keydown=${this.__handleKeydown}
-          @focus=${this.__handleFocus}
-          @blur=${this.__handleBlur}
+          @focus=${this.__handleFocusChange}
+          @blur=${this.__handleFocusChange}
         />
 
         <div class="trailing-actions">

package/src/select/option.ts

@@ -94,7 +94,7 @@ export class SelectOptionElement extends LitElement {
         ?keep-open=${this.keepOpen}
       >
         ${this.icon
-          ? html`<wc-icon name=${this.icon} slot="leading-icon"></wc-icon>`
+          ? html`<wc-icon name=${this.icon} slot="start"></wc-icon>`
           : nothing}
         <slot>${this.value === '' ? 'None' : ''}</slot>
         ${this.selected && this.keepOpen

package/src/select/select.scss

@@ -98,18 +98,9 @@
 /* Multi-select chips area — single scrollable row, no vertical growth */
 .chips-container {
   display: flex;
-  flex-wrap: nowrap;
-  overflow-x: auto;
-  scrollbar-width: none;
-  gap: var(--spacing-050);
-  padding-block: var(--spacing-050);
   align-items: center;
   flex: 1;
-  min-width: 0;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
+  padding-block: .5rem;
 }
 
 /* Disabled state */

package/src/select/select.ts

@@ -430,6 +430,7 @@ export class Select extends BaseInput {
     // Multi-select: show chips for selected items
     if (this.multiple && this._selectedValues.length > 0) {
       return html`<div class="chips-container">
+      <wc-chip-set>
         ${this._selectedValues.map(
           val => html`
             <wc-chip
@@ -441,6 +442,7 @@ export class Select extends BaseInput {
             >
           `,
         )}
+      </wc-chip-set>
       </div>`;
     }