@redvars/peacock 3.4.0 → 3.5.0

package/src/fab/fab-colors.scss

@@ -0,0 +1,49 @@
+:host {
+  --tonal-fab-container-color: var(--color-surface-container-high);
+  --tonal-fab-label-text-color: var(--color-on-surface);
+
+  --filled-fab-container-color: var(--color-surface);
+  --filled-fab-label-text-color: var(--color-on-surface);
+}
+
+:host([color='surface']) {
+  --tonal-fab-container-color: var(--color-surface-container-high);
+  --tonal-fab-label-text-color: var(--color-on-surface);
+
+  --filled-fab-container-color: var(--color-surface);
+  --filled-fab-label-text-color: var(--color-on-surface);
+}
+
+:host([color='primary']) {
+  --tonal-fab-container-color: var(--color-primary-container);
+  --tonal-fab-label-text-color: var(--color-on-primary-container);
+
+  --filled-fab-container-color: var(--color-primary);
+  --filled-fab-label-text-color: var(--color-on-primary);
+}
+
+:host([color='secondary']) {
+  --tonal-fab-container-color: var(--color-secondary-container);
+  --tonal-fab-label-text-color: var(--color-on-secondary-container);
+
+  --filled-fab-container-color: var(--color-secondary);
+  --filled-fab-label-text-color: var(--color-on-secondary);
+}
+
+:host([color='tertiary']) {
+  --tonal-fab-container-color: var(--color-tertiary-container);
+  --tonal-fab-label-text-color: var(--color-on-tertiary-container);
+
+  --filled-fab-container-color: var(--color-tertiary);
+  --filled-fab-label-text-color: var(--color-on-tertiary);
+}
+
+.fab.variant-tonal {
+  --_fab-container-color: var(--tonal-fab-container-color);
+  --_fab-label-text-color: var(--tonal-fab-label-text-color);
+}
+
+.fab.variant-filled {
+  --_fab-container-color: var(--filled-fab-container-color);
+  --_fab-label-text-color: var(--filled-fab-label-text-color);
+}

package/src/fab/fab-sizes.scss

@@ -0,0 +1,47 @@
+/* Small FAB: 40x40dp, shape-corner-medium */
+:host([size='sm']) {
+  --fab-container-shape: var(--shape-corner-medium);
+}
+
+:host([size='sm']) .fab {
+  width: 2.5rem;
+  height: 2.5rem;
+  --_fab-icon-size: 1.5rem;
+}
+
+/* Standard/Medium FAB: 56x56dp, shape-corner-large (default) */
+:host([size='md']) .fab {
+  width: 3.5rem;
+  height: 3.5rem;
+  --_fab-icon-size: 1.5rem;
+}
+
+/* Large FAB: 96x96dp, shape-corner-extra-large */
+:host([size='lg']) {
+  --fab-container-shape: var(--shape-corner-extra-large);
+}
+
+:host([size='lg']) .fab {
+  width: 6rem;
+  height: 6rem;
+  --_fab-icon-size: 2.25rem;
+}
+
+/* Extended FAB overrides (height fixed, width auto) */
+:host([size='sm']) .fab.extended {
+  width: auto;
+  min-width: 4rem;
+  height: 2.5rem;
+}
+
+:host([size='md']) .fab.extended {
+  width: auto;
+  min-width: 5rem;
+  height: 3.5rem;
+}
+
+:host([size='lg']) .fab.extended {
+  width: auto;
+  min-width: 6rem;
+  height: 6rem;
+}

package/src/fab/fab.scss

@@ -0,0 +1,137 @@
+@use '../../scss/mixin';
+
+@include mixin.base-styles;
+
+:host {
+  display: inline-flex;
+
+  --fab-container-shape: var(--shape-corner-large);
+  --fab-container-elevation-level: 3;
+}
+
+/*
+  * Reset native button/link styles
+  */
+.fab-element {
+  background: transparent;
+  border: none;
+  appearance: none;
+  margin: 0;
+  outline: none;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.fab {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--fab-container-shape);
+  font-family: var(--font-family-sans) !important;
+
+  .fab-content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+    z-index: 0;
+    gap: 0.75rem;
+
+    color: var(--_fab-label-text-color);
+    --icon-size: var(--_fab-icon-size);
+    --icon-color: var(--_fab-label-text-color);
+  }
+
+  .fab-label {
+    font-size: 0.875rem;
+    font-weight: var(--font-weight-medium);
+    line-height: 1.25rem;
+    letter-spacing: 0.00625em;
+    white-space: nowrap;
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+  }
+
+  /*
+    Background layers
+   */
+  .focus-ring {
+    z-index: 2;
+    --focus-ring-container-shape-start-start: var(--fab-container-shape);
+    --focus-ring-container-shape-start-end: var(--fab-container-shape);
+    --focus-ring-container-shape-end-start: var(--fab-container-shape);
+    --focus-ring-container-shape-end-end: var(--fab-container-shape);
+  }
+
+  .ripple {
+    border-radius: var(--fab-container-shape);
+    --ripple-state-opacity: var(--_fab-container-state-opacity, 0);
+    --ripple-pressed-color: var(--_fab-label-text-color);
+  }
+
+  .background {
+    display: block;
+    position: absolute;
+    inset: 0;
+    background-color: var(--_fab-container-color);
+    opacity: var(--_fab-container-opacity, 1);
+    border-radius: var(--fab-container-shape);
+    pointer-events: none;
+  }
+
+  .elevation {
+    --elevation-level: var(--_fab-container-elevation-level, var(--fab-container-elevation-level));
+    transition-duration: 280ms;
+    --elevation-container-shape-start-start: var(--fab-container-shape);
+    --elevation-container-shape-start-end: var(--fab-container-shape);
+    --elevation-container-shape-end-start: var(--fab-container-shape);
+    --elevation-container-shape-end-end: var(--fab-container-shape);
+  }
+
+  &:hover:not(.disabled) {
+    --_fab-container-elevation-level: 4;
+    --_fab-container-state-opacity: 0.08;
+  }
+
+  &.pressed:not(.disabled) {
+    --_fab-container-elevation-level: 3;
+    --_fab-container-state-opacity: 0.12;
+  }
+
+  &.lowered {
+    --fab-container-elevation-level: 1;
+
+    &:hover:not(.disabled) {
+      --_fab-container-elevation-level: 2;
+    }
+
+    &.pressed:not(.disabled) {
+      --_fab-container-elevation-level: 1;
+    }
+  }
+
+  &.disabled {
+    --_fab-container-color: var(--color-on-surface);
+    --_fab-container-opacity: 0.12;
+    --_fab-label-text-color: var(--color-on-surface);
+    --_fab-label-text-opacity: 0.38;
+    --_fab-container-elevation-level: 0;
+
+    .ripple {
+      display: none;
+    }
+
+    .fab-content {
+      opacity: 0.38;
+    }
+  }
+}
+
+/* Extended FAB */
+.fab.extended {
+  padding: 0 1rem;
+  border-radius: var(--fab-container-shape);
+}

package/src/fab/fab.ts

@@ -0,0 +1,285 @@
+import { html, LitElement, 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 IndividualComponent from '@/IndividualComponent.js';
+import { dispatchActivationClick, isActivationClick } from '@/__utils/dispatch-event-utils.js';
+import { throttle } from '@/__utils/throttle.js';
+import { spread } from '@/__directive/spread.js';
+
+import { IconProvider } from '../icon/icon.js';
+import styles from './fab.scss';
+import colorStyles from './fab-colors.scss';
+import sizeStyles from './fab-sizes.scss';
+
+/**
+ * @label FAB
+ * @tag wc-fab
+ * @rawTag fab
+ *
+ * @summary The FAB (Floating Action Button) represents the primary action on a screen.
+ * @overview
+ * <p>A Floating Action Button (FAB) is a circular button that represents the primary action on a screen. It follows the Material Design 3 specification and supports four color roles and two variants.</p>
+ *
+ * @cssprop --fab-container-color: Background color of the FAB container.
+ * @cssprop --fab-label-text-color: Text and icon color of the FAB label.
+ * @cssprop --fab-container-shape: Corner radius of the FAB. Defaults to var(--shape-corner-large).
+ * @cssprop --fab-container-elevation-level: Elevation level of the FAB. Defaults to 3.
+ *
+ * @fires {MouseEvent} click - Dispatched when the FAB is clicked.
+ *
+ * @example
+ * ```html
+ * <wc-fab name="add"></wc-fab>
+ * ```
+ * @tags controls
+ */
+@IndividualComponent
+export class Fab extends LitElement {
+  static override styles = [styles, colorStyles, sizeStyles];
+
+  #id = crypto.randomUUID();
+
+  #tabindex?: number = 0;
+
+  /**
+   * Name of the icon to display inside the FAB.
+   */
+  @property({ type: String, reflect: true }) name?: string;
+
+  /**
+   * Source URL for a custom icon.
+   */
+  @property({ type: String, reflect: true }) src?: string;
+
+  /**
+   * Icon provider. Defaults to `"material-symbols"`.
+   */
+  @property({ type: String }) provider: IconProvider = 'material-symbols';
+
+  /**
+   * Optional label text for the extended FAB variant.
+   * When set, the FAB displays both the icon and a text label.
+   */
+  @property({ type: String }) label?: string;
+
+  /**
+   * The color role of the FAB.
+   * `"surface"` uses the surface color role.
+   * `"primary"` uses the primary color role.
+   * `"secondary"` uses the secondary color role.
+   * `"tertiary"` uses the tertiary color role.
+   */
+  @property({ reflect: true }) color: 'surface' | 'primary' | 'secondary' | 'tertiary' = 'surface';
+
+  /**
+   * The style variant of the FAB.
+   * `"tonal"` uses container colors.
+   * `"filled"` uses solid role colors.
+   */
+  @property({ reflect: true }) variant: 'tonal' | 'filled' = 'tonal';
+
+  /**
+   * The size of the FAB.
+   * `"sm"` renders a small FAB (40×40dp).
+   * `"md"` renders a standard FAB (56×56dp). This is the default.
+   * `"lg"` renders a large FAB (96×96dp).
+   */
+  @property({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';
+
+  /**
+   * If `true`, the FAB is in a lowered (resting) state with reduced elevation.
+   */
+  @property({ type: Boolean, reflect: true }) lowered: boolean = false;
+
+  /**
+   * If `true`, the user cannot interact with the FAB.
+   */
+  @property({ type: Boolean, reflect: true }) disabled: boolean = false;
+
+  /**
+   * Hyperlink to navigate to on click.
+   */
+  @property({ reflect: true }) href?: string;
+
+  /**
+   * Sets or retrieves the window or frame at which to target content.
+   */
+  @property() target: string = '_self';
+
+  /**
+   * Additional ARIA attributes to pass to the inner button/anchor element.
+   */
+  @property({ reflect: true })
+  configAria?: { [key: string]: any };
+
+  /**
+   * Sets the delay for throttle in milliseconds. Defaults to 200 milliseconds.
+   */
+  @property() throttleDelay = 200;
+
+  /**
+   * Tooltip text shown on hover.
+   */
+  @property() tooltip?: string;
+
+  @state()
+  isPressed = false;
+
+  @query('.fab') readonly fabElement!: HTMLElement | null;
+
+  override focus() {
+    this.fabElement?.focus();
+  }
+
+  override blur() {
+    this.fabElement?.blur();
+  }
+
+  override connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener('click', this.__dispatchClickWithThrottle);
+    window.addEventListener('mouseup', this.__handlePress);
+  }
+
+  override disconnectedCallback() {
+    window.removeEventListener('mouseup', this.__handlePress);
+    this.removeEventListener('click', this.__dispatchClickWithThrottle);
+    super.disconnectedCallback();
+  }
+
+  override firstUpdated() {
+    this.__dispatchClickWithThrottle = throttle(
+      this.__dispatchClick,
+      this.throttleDelay,
+    );
+  }
+
+  __handlePress = (event: KeyboardEvent | MouseEvent) => {
+    if (this.disabled) 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;
+    }
+  };
+
+  __isLink() {
+    return !!this.href;
+  }
+
+  __dispatchClickWithThrottle: (event: MouseEvent | KeyboardEvent) => void =
+    event => {
+      this.__dispatchClick(event);
+    };
+
+  __dispatchClick = (event: MouseEvent | KeyboardEvent) => {
+    if (this.disabled && this.href) {
+      event.stopImmediatePropagation();
+      event.preventDefault();
+      return;
+    }
+
+    if (!isActivationClick(event) || !this.fabElement) {
+      return;
+    }
+
+    this.focus();
+    dispatchActivationClick(this.fabElement);
+  };
+
+  __getDisabledReasonID() {
+    return this.disabled ? `disabled-reason-${this.#id}` : nothing;
+  }
+
+  override render() {
+    const isLink = this.__isLink();
+    const isExtended = !!this.label;
+
+    const cssClasses = {
+      fab: true,
+      'fab-element': true,
+      [`size-${this.size}`]: true,
+      [`color-${this.color}`]: true,
+      [`variant-${this.variant}`]: true,
+      extended: isExtended,
+      lowered: this.lowered,
+      disabled: this.disabled,
+      pressed: this.isPressed,
+    };
+
+    if (!isLink) {
+      return html`<button
+          class=${classMap(cssClasses)}
+          id="fab"
+          tabindex=${this.#tabindex}
+          type="button"
+          @click=${this.__dispatchClickWithThrottle}
+          @mousedown=${this.__handlePress}
+          @keydown=${this.__handlePress}
+          @keyup=${this.__handlePress}
+          aria-label=${this.label ?? this.name ?? nothing}
+          aria-disabled=${`${this.disabled}`}
+          ?disabled=${this.disabled}
+          ${spread(this.configAria)}
+        >
+          ${this.__renderFabContent(isExtended)}
+        </button>
+        ${this.__renderTooltip()}`;
+    }
+
+    return html`<a
+        class=${classMap(cssClasses)}
+        id="fab"
+        tabindex=${this.#tabindex}
+        href=${ifDefined(this.href)}
+        target=${this.target}
+        @click=${this.__dispatchClickWithThrottle}
+        @mousedown=${this.__handlePress}
+        @keydown=${this.__handlePress}
+        @keyup=${this.__handlePress}
+        role="button"
+        aria-label=${this.label ?? this.name ?? nothing}
+        aria-disabled=${`${this.disabled}`}
+        ${spread(this.configAria)}
+      >
+        ${this.__renderFabContent(isExtended)}
+      </a>
+      ${this.__renderTooltip()}`;
+  }
+
+  __renderFabContent(isExtended: boolean) {
+    return html`
+      <wc-focus-ring class="focus-ring" .control=${this} .forElement=${this.fabElement}></wc-focus-ring>
+      <wc-elevation class="elevation"></wc-elevation>
+      <div class="background"></div>
+      <wc-ripple class="ripple"></wc-ripple>
+
+      <div class="fab-content">
+        <wc-icon
+          class="fab-icon"
+          name=${ifDefined(this.name)}
+          src=${ifDefined(this.src)}
+          provider=${this.provider}
+        ></wc-icon>
+        ${isExtended
+          ? html`<span class="fab-label">${this.label}</span>`
+          : nothing}
+      </div>
+    `;
+  }
+
+  __renderTooltip() {
+    if (this.tooltip) {
+      return html`<wc-tooltip for="fab">${this.tooltip}</wc-tooltip>`;
+    }
+    return nothing;
+  }
+}

package/src/fab/index.ts

@@ -0,0 +1 @@
+export { Fab } from './fab.js';

package/src/field/field.ts

@@ -1,8 +1,10 @@
 import { html, LitElement, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
+
+import { observerSlotChangesWithCallback } from '@/__utils/observe-slot-change.js';
+
 import styles from './field.scss';
-import { observerSlotChangesWithCallback } from '../utils.js';
 
 /**
  * @label Field

package/src/icon/datasource.ts

@@ -1,4 +1,4 @@
-import { createCacheFetch } from '../utils.js';
+import { createCacheFetch } from '@/__utils/cache-fetch.js';
 
 const PROVIDERS: Record<string, (name: string) => string> = {
   'material-symbols': (name: string) =>

package/src/icon/icon.ts

@@ -1,8 +1,10 @@
 import { html, LitElement } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
+
+import { sanitizeSvg } from '@/__utils/sanitize-svg.js';
+
 import { fetchIcon, fetchSVG } from './datasource.js';
-import { sanitizeSvg } from '../utils.js';
 import styles from './icon.scss';
 
 export type IconProvider = 'material-symbols' | 'material-icons';

package/src/image/image.ts

@@ -1,7 +1,8 @@
 import { LitElement, html } from 'lit';
 import { property, state } from 'lit/decorators.js';
-import { isDarkMode } from '../utils.js';
-import { observeThemeChange } from '../utils/observe-theme-change.js';
+
+import { isDarkMode } from '@/__utils/is-dark-mode.js';
+import { observeThemeChange } from '@/__utils/observe-theme-change.js';
 
 import styles from './image.scss';
 

package/src/index.ts

@@ -5,6 +5,7 @@ export { Divider } from './divider/index.js';
 export { Clock } from './clock/index.js';
 export { Elevation } from './elevation/index.js';
 export { Button, ButtonGroup, IconButton } from './button/index.js';
+export { Fab } from './fab/index.js';
 export { SegmentedButton, SegmentedButtonGroup } from './segmented-button/index.js';
 
 export { FocusRing } from './focus-ring/index.js';
@@ -45,6 +46,8 @@ export { Table } from './table/index.js';
 export { Pagination } from './pagination/index.js';
 export { TreeView, TreeNode } from './tree-view/index.js';
 export { Card } from './card/index.js';
+export { Banner } from './banner/index.js';
+export { Notification } from './notification/index.js';
 export { Snackbar } from './snackbar/index.js';
 export { Radio } from './radio/index.js';
 export { BottomSheet } from './bottom-sheet/index.js';
@@ -52,4 +55,6 @@ export { SideSheet } from './side-sheet/index.js';
 export { Select } from './select/index.js';
 export type { SelectOption } from './select/index.js';
 export { SelectOptionElement } from './select/index.js';
+export { Search } from './search/index.js';
+export { Toolbar } from './toolbar/index.js';
 

package/src/input/input.ts

@@ -1,9 +1,12 @@
 import { html, nothing } from 'lit';
 import { property, query, state } from 'lit/decorators.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 './BaseInput.js';
 import styles from './input.scss';
-import { spread } from '../spread.js';
+
 /**
  * @label Input
  * @tag wc-input

package/src/link/link.ts

@@ -1,6 +1,6 @@
 import { html, LitElement } from 'lit';
-import { property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
+import BaseHyperlink from '../__base_element/BaseHyperlink.js';
 import styles from './link.scss';
 
 /**
@@ -16,22 +16,9 @@ import styles from './link.scss';
  * <wc-link href="#">Link</wc-link>
  * ```
  */
-export class Link extends LitElement {
+export class Link extends BaseHyperlink(LitElement) {
   static styles = [styles];
 
-  /**
-   * Hyperlink to navigate to on click.
-   */
-  @property({ reflect: true }) href?: string;
-
-  /**
-   * Sets or retrieves the window or frame at which to target content.
-   */
-  @property() target: '_self' | '_parent' | '_blank' | '_top' | string =
-    '_self';
-
-  @state() tabIndexValue?: number;
-
   render() {
     return html`<a
       class=${classMap({

package/src/menu/menu/menu.scss

@@ -6,6 +6,8 @@
   display: flex;
   position: fixed;
   z-index: var(--menu-z-index, 1000);
+  width: var(--menu-width, max-content);
+  max-width: 100vw;
   min-width: 112px;
   padding-block: var(--spacing-050);
   transform-origin: top center;
@@ -37,6 +39,11 @@
     transition-timing-function: var(--_menu-enter-easing), var(--_menu-enter-easing), linear;
   }
 
+  &.preview {
+    position: relative;
+    pointer-events: auto;
+  }
+
   .menu-content {
     display: flex;
     flex-direction: column;

package/src/menu/menu/menu.ts

@@ -22,9 +22,9 @@ type CloseReason =
  *
  * @example
  * ```html
- * <wc-menu>
+ * <wc-menu preview>
  *   <wc-menu-item>Item 1</wc-menu-item>
- *   <wc-menu-item>Item 2</wc-menu-item>
+ *   <wc-menu-item selected>Item 2</wc-menu-item>
  * </wc-menu>
  * ```
  */
@@ -40,6 +40,8 @@ export class Menu extends LitElement {
 
   @property({ type: String }) anchor = '';
 
+  @property({ type: Boolean, reflect: true }) preview = false;
+
   @property({ type: Boolean, attribute: 'stay-open-on-outside-click' })
   stayOpenOnOutsideClick = false;
 
@@ -448,8 +450,9 @@ export class Menu extends LitElement {
     return html`<div
       class=${classMap({
         'menu': true,
-        open: this.open,
-        closed: !this.open,
+        open: !this.preview && this.open,
+        closed: !this.preview && !this.open,
+        preview: this.preview,
         [`variant-${this.variant}`]: true,
       })}
       aria-hidden=${String(!this.open)}