@redvars/peacock 3.6.0 → 3.6.2

package/src/list/list-item.ts

@@ -0,0 +1,175 @@
+import { html, LitElement } 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 './list-item.scss';
+import BaseButtonMixin from '@/__mixins/BaseButtonMixin.js';
+import BaseHyperlinkMixin from '@/__mixins/BaseHyperlinkMixin.js';
+import {
+  dispatchActivationClick,
+  isActivationClick,
+} from '@/__utils/dispatch-event-utils.js';
+
+/**
+ * @label List Item
+ * @tag wc-list-item
+ * @rawTag list-item
+ * @parentRawTag list
+ *
+ * @summary A Material 3 list item with leading, trailing and content slots.
+ *
+ * @example
+ * ```html
+ * <wc-list-item selected>
+ *   <wc-icon slot="leading" name="person"></wc-icon>
+ *   Profile
+ *   <wc-icon slot="trailing" name="chevron_right"></wc-icon>
+ * </wc-list-item>
+ * ```
+ * @tags display
+ */
+export class ListItem extends BaseButtonMixin(BaseHyperlinkMixin(LitElement)) {
+  static styles = [styles];
+
+  @property({ type: Boolean, reflect: true }) selected = false;
+
+  @query('#item') readonly itemElement!: HTMLElement | null;
+
+  @state() isPressed = false;
+
+  connectedCallback() {
+    // eslint-disable-next-line wc/guard-super-call
+    super.connectedCallback();
+
+    if (!this.hasAttribute('role')) {
+      this.setAttribute('role', 'listitem');
+    }
+  }
+
+  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;
+    }
+  };
+
+  render() {
+    const isLink = this.__isLink();
+
+    const cssClasses = {
+      'list-item': true,
+      'item-element': true,
+      selected: this.selected,
+      disabled: this.disabled || this.softDisabled,
+      pressed: this.isPressed,
+    };
+
+    if (!isLink) {
+      return html`
+        <button
+          id="item"
+          class=${classMap(cssClasses)}
+          type=${this.htmlType}
+          ?disabled=${this.disabled}
+          ?aria-disabled=${this.softDisabled}
+          @click=${this.__dispatchClick}
+          @mousedown=${this.__handlePress}
+          @keydown=${this.__handleKeyDown}
+          @keyup=${this.__handlePress}
+        >
+          ${this.renderContent()}
+        </button>
+      `;
+    }
+
+    return html`
+      <a
+        id="item"
+        class=${classMap(cssClasses)}
+        href=${this.href}
+        target=${this.target}
+        rel=${ifDefined(this.rel)}
+        download=${ifDefined(this.download)}
+        tabindex=${this.disabled ? '-1' : '0'}
+        aria-disabled=${String(this.disabled || this.softDisabled)}
+        @click=${this.__dispatchClick}
+        @mousedown=${this.__handlePress}
+        @keydown=${this.__handleKeyDown}
+        @keyup=${this.__handlePress}
+      >
+        ${this.renderContent()}
+      </a>
+    `;
+  }
+
+  renderContent() {
+    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="list-item-content">
+        <div class="leading">
+          <slot name="leading"></slot>
+        </div>
+        <div class="content">
+          <slot></slot>
+        </div>
+        <div class="trailing">
+          <slot name="trailing"></slot>
+        </div>
+      </div>
+    `;
+  }
+}

package/src/list/list.scss

@@ -0,0 +1,24 @@
+@use "../../scss/mixin";
+
+@include mixin.base-styles;
+
+:host {
+  display: block;
+}
+
+.list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-050);
+  padding-block: var(--spacing-050);
+  border-radius: var(--shape-corner-large);
+  background-color: var(--_container-color);
+}
+
+.list.variant-standard {
+  --_container-color: var(--color-surface-container);
+}
+
+.list.variant-vibrant {
+  --_container-color: var(--color-tertiary-container);
+}

package/src/list/list.ts

@@ -0,0 +1,51 @@
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import styles from './list.scss';
+import { ListItem } from './list-item.js';
+
+/**
+ * @label List
+ * @tag wc-list
+ * @rawTag list
+ *
+ * @summary A Material 3 list container for one or more list items.
+ *
+ * @example
+ * ```html
+ * <wc-list>
+ *   <wc-list-item>
+ *     <wc-icon slot="leading" name="inbox"></wc-icon>
+ *     Inbox
+ *     <span slot="trailing">24</span>
+ *   </wc-list-item>
+ * </wc-list>
+ * ```
+ * @tags display
+ */
+export class List extends LitElement {
+  static styles = [styles];
+
+  static Item = ListItem;
+
+  @property({ type: String, reflect: true }) variant: 'standard' | 'vibrant' =
+    'standard';
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute('role', 'list');
+  }
+
+  render() {
+    const cssClasses = {
+      list: true,
+      [`variant-${this.variant}`]: true,
+    };
+
+    return html`
+      <div class=${classMap(cssClasses)}>
+        <slot></slot>
+      </div>
+    `;
+  }
+}

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.
@@ -21,13 +21,7 @@ type ModalSize = 'xs' | 'sm' | 'md' | 'lg' | 'fullscreen';
  *
  * @example
  * ```html
- * <wc-modal open heading="Confirm Action">
- *   <p>Are you sure you want to continue?</p>
- *   <div slot="footer">
- *     <wc-button variant="text">Cancel</wc-button>
- *     <wc-button>Confirm</wc-button>
- *   </div>
- * </wc-modal>
+ * MODAL
  * ```
  * @tags overlay, dialog, feedback
  */

package/src/navigation-rail/navigation-rail-item.scss

@@ -64,6 +64,13 @@
     flex-shrink: 0;
     transition: background-color var(--duration-short4, 200ms) var(--easing-standard, ease);
 
+    .ripple {
+      inset: 0;
+      z-index: 0;
+      --ripple-pressed-color: var(--_state-color);
+      border-radius: inherit;
+    }
+
     .icon-container {
       display: flex;
       align-items: center;
@@ -81,29 +88,6 @@
     }
   }
 
-  /* State layer for hover/press */
-  .state-layer {
-    position: absolute;
-    top: 0.25rem;
-    left: 50%;
-    transform: translateX(-50%);
-    width: var(--_indicator-width);
-    height: var(--_indicator-height);
-    pointer-events: none;
-    background-color: var(--_state-color);
-    opacity: 0;
-    z-index: 0;
-    border-radius: var(--_indicator-shape);
-    transition: opacity var(--duration-short4, 200ms) var(--easing-standard, ease);
-  }
-
-  .ripple {
-    z-index: 1;
-    --ripple-pressed-color: var(--_state-color);
-    --ripple-state-opacity: 0;
-    border-radius: var(--shape-corner-small, 4px);
-  }
-
   /* Label */
   .label {
     @include mixin.get-typography('label-medium');
@@ -166,20 +150,6 @@
     }
   }
 
-  /* Hover state */
-  &:hover:not(.disabled) {
-    .state-layer {
-      opacity: 0.08;
-    }
-  }
-
-  /* Pressed state */
-  &.pressed:not(.disabled) {
-    .state-layer {
-      opacity: 0.12;
-    }
-  }
-
   /* Disabled state */
   &.disabled {
     cursor: not-allowed;
@@ -208,7 +178,6 @@
 @media (prefers-reduced-motion: reduce) {
   .item {
     .indicator,
-    .state-layer,
     .label {
       transition: none;
     }

package/src/navigation-rail/navigation-rail-item.ts

@@ -155,11 +155,10 @@ export class NavigationRailItem extends LitElement {
   __renderItemContent() {
     return html`
       <wc-focus-ring class="focus-ring" for='item'></wc-focus-ring>
-      <div class="state-layer"></div>
-      <wc-ripple class="ripple"></wc-ripple>
 
       <div class="item-content">
         <div class="indicator">
+          <wc-ripple class="ripple"></wc-ripple>
           <div class="icon-container">
             <slot name="active-icon" class="active-icon-slot"></slot>
             <slot name="icon" class="icon-slot"></slot>

package/src/navigation-rail/navigation-rail.scss

@@ -26,6 +26,21 @@
     align-items: center;
     width: 100%;
     flex-shrink: 0;
+    padding-block-end: 2.5rem;
+
+    &:empty {
+      display: none;
+    }
+  }
+
+  .footer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-end;
+    width: 100%;
+    flex-shrink: 0;
+    margin-top: auto;
 
     &:empty {
       display: none;
@@ -34,7 +49,6 @@
 
   wc-divider {
     width: calc(100% - 1rem);
-    margin-block: 0.5rem;
     flex-shrink: 0;
   }
 
@@ -44,29 +58,11 @@
     align-items: center;
     width: 100%;
     gap: 0.75rem; /* 12dp between items */
-    flex: 1;
+    flex: 1 1 auto;
+    min-height: 0;
 
     ::slotted(wc-navigation-rail-item) {
       width: 100%;
     }
   }
-
-  /* Alignment variants */
-  &.align-top {
-    .items {
-      justify-content: flex-start;
-    }
-  }
-
-  &.align-center {
-    .items {
-      justify-content: center;
-    }
-  }
-
-  &.align-bottom {
-    .items {
-      justify-content: flex-end;
-    }
-  }
 }

package/src/navigation-rail/navigation-rail.ts

@@ -14,6 +14,9 @@ import { NavigationRailItem } from './navigation-rail-item.js';
  * <p>Navigation rail provides access to primary destinations in an app using icons—with or without labels—on a vertical rail.</p>
  * <p>Use navigation rail on medium-sized screens (tablets) with 3–7 destinations.</p>
  *
+ * @slot header - Content displayed above the rail items.
+ * @slot footer - Content pinned to the bottom of the rail.
+ *
  * @cssprop --nav-rail-width - Width of the rail container. Defaults to 5rem (80dp).
  * @cssprop --nav-rail-container-color - Background color of the rail. Defaults to surface color.
  * @cssprop --nav-rail-indicator-color - Color of the active indicator. Defaults to secondary-container.
@@ -49,14 +52,6 @@ export class NavigationRail extends LitElement {
 
   static Item = NavigationRailItem;
 
-  /**
-   * Vertical alignment of items within the rail.
-   * - `"top"`: Items align to the top.
-   * - `"center"`: Items are centered (default).
-   * - `"bottom"`: Items align to the bottom.
-   */
-  @property({ reflect: true }) alignment: 'top' | 'center' | 'bottom' = 'center';
-
   /**
    * Display mode of the navigation rail.
    * - `"expanded"`: shows labels.
@@ -130,7 +125,6 @@ export class NavigationRail extends LitElement {
   render() {
     const cssClasses = {
       rail: true,
-      [`align-${this.alignment}`]: true,
       [`mode-${this.mode}`]: true,
     };
 
@@ -143,6 +137,9 @@ export class NavigationRail extends LitElement {
         <nav class="items" role="presentation">
           <slot @slotchange=${this._syncItemMode}></slot>
         </nav>
+        <div class="footer">
+          <slot name="footer"></slot>
+        </div>
       </div>
     `;
   }

package/src/number-field/number-field.ts

@@ -10,8 +10,8 @@ import styles from './number-field.scss';
 
 /**
  * @label Number Field
- * @tag number-field
- * @rawTag number
+ * @tag wc-number-field
+ * @rawTag number-field
  *
  * @summary The Number Field component is used to capture numeric user input.
  *

package/src/peacock-loader.ts

@@ -30,11 +30,14 @@ 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 { List } from './list/list.js';
+import { ListItem } from './list/list-item.js';
 
 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';
 
@@ -49,6 +52,7 @@ import { Spinner } from './spinner/spinner.js';
 import { EmptyState } from './empty-state/empty-state.js';
 import { Container } from './container/container.js';
 import { Image } from './image/image.js';
+import { Svg } from './svg/svg.js';
 
 import { LoaderConfig, LoaderUtils } from './LoaderUtils.js';
 import { loadCSS } from './CssLoader.js';
@@ -77,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`);
@@ -187,6 +180,9 @@ const loaderConfig: LoaderConfig = {
     'wc-chip': {
       CustomElementClass: Chip,
     },
+    'wc-chip-set': {
+      CustomElementClass: ChipSet,
+    },
     'wc-card': {
       CustomElementClass: Card,
     },
@@ -253,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`,
@@ -287,12 +284,21 @@ const loaderConfig: LoaderConfig = {
     'wc-sub-menu': {
       CustomElementClass: SubMenu,
     },
+    'wc-list': {
+      CustomElementClass: List,
+    },
+    'wc-list-item': {
+      CustomElementClass: ListItem,
+    },
     'wc-container': {
       CustomElementClass: Container,
     },
     'wc-image': {
       CustomElementClass: Image,
     },
+    'wc-svg': {
+      CustomElementClass: Svg,
+    },
     'wc-slider': {
       CustomElementClass: Slider,
     },
@@ -342,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`,
@@ -372,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`,
     },
   },
 };

package/src/svg/index.ts

@@ -0,0 +1 @@
+export { Svg } from './svg.js';