@redvars/peacock 3.6.0 → 3.6.1

package/src/index.ts

@@ -37,11 +37,13 @@ export { Tooltip } from './popover/index.js';
 export { Popover, PopoverContent } from './popover/index.js';
 export { Breadcrumb, BreadcrumbItem } from './breadcrumb/index.js';
 export { Menu, MenuItem, SubMenu } from './menu/index.js';
+export { List, ListItem } from './list/index.js';
 
 export { CodeHighlighter } from './code-highlighter/index.js';
 export { CodeEditor } from './code-editor/index.js';
 export { HtmlEditor } from './html-editor/index.js';
 export { Image } from './image/index.js';
+export { Svg } from './svg/index.js';
 export { Tab, TabGroup, TabPanel, Tabs } from './tabs/index.js';
 export { Slider } from './slider/index.js';
 export { ChartDoughnut } from './chart-doughnut/index.js';
@@ -84,4 +86,3 @@ export type {
   NodeTemplate,
 } from './flow-designer/index.js';
 export { ConditionBuilder, CbPredicate, CbCompoundExpression, CbExpression, CbDivider } from './condition-builder/index.js';
-

package/src/list/index.ts

@@ -0,0 +1,2 @@
+export { List } from './list.js';
+export { ListItem } from './list-item.js';

package/src/list/list-item.scss

@@ -0,0 +1,111 @@
+@use "../../scss/mixin";
+
+@include mixin.base-styles;
+
+:host {
+  display: block;
+  padding-inline: var(--spacing-050);
+}
+
+.item-element {
+  position: relative;
+  min-height: 3.5rem;
+  width: 100%;
+  border: 0;
+  margin: 0;
+  padding: 0;
+  outline: 0;
+  background: transparent;
+  text-align: initial;
+  text-decoration: none;
+  cursor: pointer;
+
+  @include mixin.get-typography(body-large);
+
+  .list-item-content {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-200);
+    min-height: 3.5rem;
+    padding-inline: var(--spacing-200);
+    color: var(--_label-text-color);
+    opacity: var(--_label-text-opacity, 1);
+  }
+
+  .leading,
+  .trailing {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 1.5rem;
+    color: var(--_leading-trailing-color);
+  }
+
+  .trailing {
+    margin-inline-start: auto;
+  }
+
+  .content {
+    display: block;
+    flex: 1;
+    min-inline-size: 0;
+  }
+
+  .background {
+    position: absolute;
+    inset: 0;
+    background-color: var(--_container-color);
+    opacity: var(--_container-opacity, 1);
+    border-radius: var(--shape-corner-medium);
+    pointer-events: none;
+  }
+
+  .focus-ring {
+    --focus-ring-container-shape-start-start: var(--shape-corner-medium);
+    --focus-ring-container-shape-start-end: var(--shape-corner-medium);
+    --focus-ring-container-shape-end-start: var(--shape-corner-medium);
+    --focus-ring-container-shape-end-end: var(--shape-corner-medium);
+    z-index: 2;
+  }
+
+  .ripple {
+    --ripple-state-opacity: var(--_container-state-opacity, 0);
+    --ripple-pressed-color: var(--_container-state-color);
+    border-radius: var(--shape-corner-medium);
+  }
+}
+.item-element {
+  --_container-color: transparent;
+  --_label-text-color: var(--color-on-surface);
+  --_leading-trailing-color: var(--color-on-surface-variant);
+  --_container-state-color: var(--color-on-surface);
+
+  &:hover:not(:where(.disabled, .selected)) {
+    --_container-state-opacity: 0.08;
+  }
+
+  &.pressed:not(:where(.disabled)) {
+    --_container-state-opacity: 0.12;
+  }
+
+  &.selected {
+    --_container-color: var(--color-secondary-container);
+    --_label-text-color: var(--color-on-secondary-container);
+    --_leading-trailing-color: var(--color-on-secondary-container);
+    --_container-state-color: var(--color-on-secondary-container);
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+    --_label-text-color: var(--color-on-surface);
+    --_label-text-opacity: 0.38;
+    --_leading-trailing-color: var(--color-on-surface);
+    --_container-opacity: 0.12;
+
+    .ripple {
+      display: none;
+    }
+  }
+}

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/modal/modal.ts

@@ -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,6 +30,8 @@ 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';
@@ -49,6 +51,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';
@@ -287,12 +290,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,
     },

package/src/svg/index.ts

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