@redvars/peacock 3.4.0 → 3.5.1

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

@@ -0,0 +1,72 @@
+@use '../../scss/mixin';
+
+@include mixin.base-styles;
+
+:host {
+  display: block;
+  height: 100%;
+  width: var(--nav-rail-width, 5rem); /* 80dp */
+  overflow: hidden;
+}
+
+.rail {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  border-radius: inherit;
+  background-color: var(--nav-rail-container-color, var(--color-surface));
+  padding-block: var(--nav-rail-padding-block, 0.75rem); /* 12dp */
+  box-sizing: border-box;
+
+  .header {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    flex-shrink: 0;
+
+    &:empty {
+      display: none;
+    }
+  }
+
+  wc-divider {
+    width: calc(100% - 1rem);
+    margin-block: 0.5rem;
+    flex-shrink: 0;
+  }
+
+  .items {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    gap: 0.75rem; /* 12dp between items */
+    flex: 1;
+
+    ::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

@@ -0,0 +1,149 @@
+import { html, LitElement, PropertyValues } from 'lit';
+import { property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import styles from './navigation-rail.scss';
+import { NavigationRailItem } from './navigation-rail-item.js';
+
+/**
+ * @label Navigation Rail
+ * @tag wc-navigation-rail
+ * @rawTag navigation-rail
+ *
+ * @summary A vertical side navigation for medium-sized screens, following Material Design 3 specs.
+ * @overview
+ * <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>
+ *
+ * @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.
+ * @cssprop --nav-rail-indicator-shape - Shape (border-radius) of the active indicator. Defaults to full (pill).
+ * @cssprop --nav-rail-indicator-width - Width of the active indicator. Defaults to 3.5rem (56dp).
+ * @cssprop --nav-rail-indicator-height - Height of the active indicator. Defaults to 2rem (32dp).
+ * @cssprop --nav-rail-inactive-icon-color - Color of inactive icons. Defaults to on-surface-variant.
+ * @cssprop --nav-rail-active-icon-color - Color of active icons. Defaults to on-secondary-container.
+ * @cssprop --nav-rail-inactive-label-color - Color of inactive labels. Defaults to on-surface-variant.
+ * @cssprop --nav-rail-active-label-color - Color of active labels. Defaults to on-surface.
+ *
+ * @example
+ * ```html
+ * <wc-navigation-rail>
+ *   <wc-navigation-rail-item active>
+ *     <wc-icon slot="icon">home</wc-icon>
+ *     Home
+ *   </wc-navigation-rail-item>
+ *   <wc-navigation-rail-item>
+ *     <wc-icon slot="icon">search</wc-icon>
+ *     Search
+ *   </wc-navigation-rail-item>
+ *   <wc-navigation-rail-item>
+ *     <wc-icon slot="icon">settings</wc-icon>
+ *     Settings
+ *   </wc-navigation-rail-item>
+ * </wc-navigation-rail>
+ * ```
+ * @tags navigation
+ */
+export class NavigationRail extends LitElement {
+  static styles = [styles];
+
+  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.
+   * - `"collapsed"`: hides labels.
+   */
+  @property({ reflect: true }) mode: 'expanded' | 'collapsed' = 'expanded';
+
+  /**
+   * Whether to show a divider between the header and items sections.
+   */
+  @property({ type: Boolean, attribute: 'show-divider' }) showDivider = false;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener('click', this._handleItemClick);
+    this.setAttribute('role', 'navigation');
+    this.setAttribute('aria-label', this.getAttribute('aria-label') ?? 'Main navigation');
+  }
+
+  disconnectedCallback() {
+    this.removeEventListener('click', this._handleItemClick);
+    super.disconnectedCallback();
+  }
+
+  protected override firstUpdated() {
+    this._syncItemMode();
+  }
+
+  protected override updated(changedProperties: PropertyValues<this>) {
+    if (changedProperties.has('mode')) {
+      this._syncItemMode();
+    }
+  }
+
+  private _handleItemClick = (event: Event) => {
+    const target = event.target as HTMLElement;
+    const item = target.closest('wc-navigation-rail-item') as NavigationRailItem | null;
+
+    if (!item || item.disabled) return;
+
+    // Deactivate all items and activate the clicked one
+    for (const railItem of this._getItems()) {
+      railItem.active = railItem === item;
+    }
+
+    this.dispatchEvent(
+      new CustomEvent('nav-change', {
+        detail: {
+          value: item.value,
+          item,
+        },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  };
+
+  private _getItems(): NavigationRailItem[] {
+    return Array.from(
+      this.querySelectorAll('wc-navigation-rail-item'),
+    ) as NavigationRailItem[];
+  }
+
+  private _syncItemMode = () => {
+    const isCollapsed = this.mode === 'collapsed';
+    for (const railItem of this._getItems()) {
+      railItem.collapsed = isCollapsed;
+    }
+  };
+
+  render() {
+    const cssClasses = {
+      rail: true,
+      [`align-${this.alignment}`]: true,
+      [`mode-${this.mode}`]: true,
+    };
+
+    return html`
+      <div class=${classMap(cssClasses)}>
+        <div class="header">
+          <slot name="header"></slot>
+        </div>
+        ${this.showDivider ? html`<wc-divider></wc-divider>` : ''}
+        <nav class="items" role="presentation">
+          <slot @slotchange=${this._syncItemMode}></slot>
+        </nav>
+      </div>
+    `;
+  }
+}

package/src/notification/index.ts

@@ -0,0 +1 @@
+export { Notification } from './notification.js';

package/src/notification/notification.scss

@@ -0,0 +1,201 @@
+@use '../../scss/mixin';
+
+@include mixin.base-styles;
+
+:host {
+  --notification-container-color: var(--color-primary-container);
+  --notification-text-color: var(--color-on-primary-container);
+  --notification-leading-icon-color: var(--color-on-primary-container);
+  --notification-accent-color: var(--color-primary);
+  --notification-border-radius: var(--shape-corner-medium);
+
+  display: block;
+}
+
+:host(:not([inline])) {
+  width: min(100%, 28rem);
+}
+
+.notification {
+  align-items: flex-start;
+  background: var(--notification-container-color);
+  border-inline-start: 4px solid var(--notification-accent-color);
+  border-radius: var(--notification-border-radius);
+  color: var(--notification-text-color);
+  display: grid;
+  gap: var(--spacing-100);
+  grid-template-columns: auto 1fr auto;
+  padding: var(--spacing-150) var(--spacing-100) var(--spacing-150) var(--spacing-150);
+}
+
+.state-icon {
+  align-items: center;
+  color: var(--notification-leading-icon-color);
+  display: inline-flex;
+  justify-content: center;
+  min-height: 2rem;
+
+  --icon-size: 1.25rem;
+  --icon-color: var(--notification-leading-icon-color);
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-100);
+  min-width: 0;
+}
+
+.content-text {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-025);
+  min-width: 0;
+}
+
+.title {
+  @include mixin.get-typography(label-large);
+  color: var(--notification-text-color);
+  overflow-wrap: anywhere;
+}
+
+.subtitle {
+  @include mixin.get-typography(body-medium);
+  color: var(--notification-text-color);
+  opacity: 0.88;
+  overflow-wrap: anywhere;
+}
+
+.title ::slotted(*),
+.subtitle ::slotted(*) {
+  margin: 0;
+}
+
+.actions {
+  display: inline-flex;
+  gap: var(--spacing-100);
+}
+
+.action {
+  --outlined-button-label-text-color: var(--notification-text-color);
+  --outlined-button-outline-color: color-mix(in srgb, var(--notification-text-color) 40%, transparent);
+  --text-button-label-text-color: var(--notification-text-color);
+}
+
+.close-button-container {
+  display: inline-flex;
+}
+
+.close-button {
+  --text-button-label-text-color: var(--notification-text-color);
+}
+
+.notification.inline {
+  align-items: center;
+}
+
+.notification.inline .content {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  gap: var(--spacing-150);
+}
+
+.notification.inline .content-text {
+  display: inline;
+  flex: 1;
+}
+
+.notification.inline .title,
+.notification.inline .subtitle,
+.notification.inline .title ::slotted(*),
+.notification.inline .subtitle ::slotted(*) {
+  display: inline;
+}
+
+.notification:not(.has-subtitle) {
+  align-items: center;
+}
+
+.notification:not(.has-subtitle) .content {
+  gap: 0;
+}
+
+.notification.variant-info {
+  --notification-container-color: var(--color-primary-container);
+  --notification-text-color: var(--color-on-primary-container);
+  --notification-leading-icon-color: var(--color-on-primary-container);
+  --notification-accent-color: var(--color-primary);
+}
+
+.notification.variant-success {
+  --notification-container-color: var(--color-success-container);
+  --notification-text-color: var(--color-on-success-container);
+  --notification-leading-icon-color: var(--color-on-success-container);
+  --notification-accent-color: var(--color-success);
+}
+
+.notification.variant-warning {
+  --notification-container-color: var(--color-warning-container);
+  --notification-text-color: var(--color-on-warning-container);
+  --notification-leading-icon-color: var(--color-on-warning-container);
+  --notification-accent-color: var(--color-warning);
+}
+
+.notification.variant-error {
+  --notification-container-color: var(--color-error-container);
+  --notification-text-color: var(--color-on-error-container);
+  --notification-leading-icon-color: var(--color-on-error-container);
+  --notification-accent-color: var(--color-error);
+}
+
+.notification.high-contrast {
+  --notification-container-color: var(--color-inverse-surface);
+  --notification-text-color: var(--color-inverse-on-surface);
+  --notification-leading-icon-color: var(--color-inverse-on-surface);
+}
+
+.notification.high-contrast.variant-info {
+  --notification-accent-color: var(--color-primary);
+}
+
+.notification.high-contrast.variant-success {
+  --notification-accent-color: var(--color-success);
+}
+
+.notification.high-contrast.variant-warning {
+  --notification-accent-color: var(--color-warning);
+}
+
+.notification.high-contrast.variant-error {
+  --notification-accent-color: var(--color-error);
+}
+
+@media (max-width: 640px) {
+  :host(:not([inline])) {
+    width: 100%;
+  }
+
+  .notification.inline {
+    align-items: flex-start;
+  }
+
+  .notification.inline .content {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: var(--spacing-100);
+  }
+
+  .notification.inline .content-text {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-025);
+  }
+
+  .notification.inline .title,
+  .notification.inline .subtitle,
+  .notification.inline .title ::slotted(*),
+  .notification.inline .subtitle ::slotted(*) {
+    display: initial;
+  }
+}

package/src/notification/notification.ts

@@ -0,0 +1,207 @@
+import { LitElement, html, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+
+import IndividualComponent from '@/IndividualComponent.js';
+import styles from './notification.scss';
+
+type NotificationVariant = 'success' | 'error' | 'info' | 'warning';
+
+const VARIANT_LABELS: Record<NotificationVariant, string> = {
+  success: 'Success',
+  error: 'Error',
+  info: 'Information',
+  warning: 'Warning',
+};
+
+const VARIANT_ICONS: Record<NotificationVariant, string> = {
+  success: 'check_circle',
+  error: 'error',
+  info: 'info',
+  warning: 'warning',
+};
+
+/**
+ * @label Notification
+ * @tag wc-notification
+ * @rawTag notification
+ * @summary Notifications communicate contextual status, errors, warnings, and success messages.
+ *
+ * @cssprop --notification-container-color - Surface color for the notification container.
+ * @cssprop --notification-text-color - Label and supporting text color.
+ * @cssprop --notification-leading-icon-color - Leading state icon color.
+ * @cssprop --notification-accent-color - Start border color for status emphasis.
+ * @cssprop --notification-border-radius - Border radius of the notification container.
+ *
+ * @fires {CustomEvent} notification-dismiss - Fired when the notification is dismissed.
+ * @fires {CustomEvent} notification-action-click - Fired when the action button is clicked.
+ *
+ * @example
+ * ```html
+ * <wc-notification variant="success" action="Undo" dismissible>
+ *   <span slot="title">Record saved</span>
+ * </wc-notification>
+ * ```
+ * @tags display, feedback
+ */
+@IndividualComponent
+export class Notification extends LitElement {
+  static styles = [styles];
+
+  /**
+   * If true, content and actions are laid out in a single row.
+   */
+  @property({ type: Boolean, reflect: true }) inline = false;
+
+  /**
+   * The visual variant of the notification.
+   */
+  @property({ type: String, reflect: true })
+  variant: NotificationVariant = 'info';
+
+  /**
+   * Enables a high contrast appearance.
+   */
+  @property({ type: Boolean, reflect: true, attribute: 'high-contrast' })
+  highContrast = false;
+
+  /**
+   * If true, renders a dismiss icon button.
+   */
+  @property({ type: Boolean, reflect: true }) dismissible = false;
+
+  /**
+   * Action label text. When provided, an action button is shown.
+   */
+  @property({ type: String }) action = '';
+
+  /**
+   * If true, the host controls visibility when dismissed.
+   */
+  @property({ type: Boolean, reflect: true }) managed = false;
+
+  @state() private isHidden = false;
+  
+  @state() private hasSubtitle = false;
+
+  /**
+   * Programmatically reveals the notification.
+   */
+  show() {
+    this.isHidden = false;
+  }
+
+  /**
+   * Programmatically dismisses the notification.
+   */
+  dismiss() {
+    this.hideAndEmitDismiss('programmatic');
+  }
+
+  private get variantIcon() {
+    return VARIANT_ICONS[this.variant];
+  }
+
+  private get variantLabel() {
+    return VARIANT_LABELS[this.variant];
+  }
+
+  private emitActionClick() {
+    this.dispatchEvent(
+      new CustomEvent('notification-action-click', {
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  private hideAndEmitDismiss(reason: 'dismiss' | 'programmatic') {
+    if (!this.managed) {
+      this.isHidden = true;
+    }
+
+    this.dispatchEvent(
+      new CustomEvent('notification-dismiss', {
+        detail: { reason },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  private handleSubtitleSlotChange(event: Event) {
+    const slot = event.target as HTMLSlotElement;
+    this.hasSubtitle = slot
+      .assignedNodes({ flatten: true })
+      .some(node => node.textContent?.trim());
+  }
+
+  render() {
+    if (this.isHidden) {
+      return nothing;
+    }
+
+    return html`
+      <div
+        class=${classMap({
+          notification: true,
+          inline: this.inline,
+          'high-contrast': this.highContrast,
+          'has-subtitle': this.hasSubtitle,
+          [`variant-${this.variant}`]: true,
+        })}
+        role="alert"
+        aria-live="polite"
+        aria-label=${this.variantLabel}
+      >
+        <div class="state-icon" aria-hidden="true">
+          <slot name="icon">
+            <wc-icon name=${this.variantIcon}></wc-icon>
+          </slot>
+        </div>
+
+        <div class="content">
+          <div class="content-text">
+            <div class="title">
+              <slot name="title"></slot>
+              <slot></slot>
+            </div>
+
+            <div class="subtitle">
+              <slot name="subtitle" @slotchange=${this.handleSubtitleSlotChange}></slot>
+            </div>
+          </div>
+
+          ${this.action
+            ? html`<div class="actions">
+                <wc-button
+                  class="action"
+                  size="sm"
+                  variant=${this.inline ? 'text' : 'outlined'}
+                  @click=${this.emitActionClick}
+                >
+                  ${this.action}
+                </wc-button>
+              </div>`
+            : nothing}
+        </div>
+
+        ${this.dismissible
+          ? html`<div class="close-button-container">
+              <wc-icon-button
+                class="close-button"
+                variant="text"
+                size="sm"
+                aria-label="Close notification"
+                @click=${() => {
+                  this.hideAndEmitDismiss('dismiss');
+                }}
+              >
+                <wc-icon name="close"></wc-icon>
+              </wc-icon-button>
+            </div>`
+          : nothing}
+      </div>
+    `;
+  }
+}

package/src/number-counter/number-counter.ts

@@ -1,7 +1,9 @@
 import { html, LitElement, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
-import IndividualComponent from 'src/IndividualComponent.js';
+
+import IndividualComponent from '@/IndividualComponent.js';
+
 import styles from './number-counter.scss';
 
 /**

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

@@ -1,10 +1,12 @@
 import { html, nothing } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { redispatchEvent } from 'src/utils/dispatch-event-utils.js';
+
+import { redispatchEvent } from '@/__utils/dispatch-event-utils.js';
+import { spread } from '@/__directive/spread.js';
+
 import BaseInput from '../input/BaseInput.js';
 import styles from './number-field.scss';
-import { spread } from '../spread.js';
 
 /**
  * @label Number Field
@@ -168,11 +170,12 @@ export class NumberField extends BaseInput {
         ${this.stepper && !this.disabled
           ? html`<wc-icon-button
               class="stepper"
-              name="remove"
               variant="text"
               slot="field-start"
               @click=${this.stepDown}
-            ></wc-icon-button>`
+            >
+              <wc-icon name="remove"></wc-icon>
+            </wc-icon-button>`
           : nothing}
 
         <slot name="start" slot="field-start"></slot>
@@ -204,10 +207,11 @@ export class NumberField extends BaseInput {
           ? html`<wc-icon-button
               class="stepper"
               variant="text"
-              name="add"
               slot="field-end"
               @click=${this.stepUp}
-            ></wc-icon-button>`
+            >
+              <wc-icon name="add"></wc-icon>
+            </wc-icon-button>`
           : nothing}
       </wc-field>
     `;