@redvars/peacock 3.8.1 → 3.8.2

package/src/icon/icon.ts

@@ -2,10 +2,11 @@ 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 { sanitizeSvg } from '@/__internal/utils/sanitize-svg.js';
 
 import { fetchIcon, fetchSVG } from './datasource.js';
 import styles from './icon.scss';
+import IndividualComponent from '@/IndividualComponent.js';
 
 export type IconProvider = 'material-symbols' | 'material-icons';
 /**
@@ -24,6 +25,7 @@ export type IconProvider = 'material-symbols' | 'material-icons';
  * ```
  *
  */
+@IndividualComponent
 export class Icon extends LitElement {
   static styles = [styles];
 
@@ -33,26 +35,34 @@ export class Icon extends LitElement {
    */
   @property({ type: String, reflect: true }) name?: string;
 
+  /** URL of an external SVG file to fetch and render inline. */
   @property({ type: String, reflect: true }) src?: string;
 
+  /** Icon library provider. Defaults to `"material-symbols"`. */
   @property({ type: String }) provider: IconProvider = 'material-symbols';
 
+  /** Rendered SVG markup, updated after each successful fetch. */
   @state()
   private svgContent: string = '';
 
-  // loading + error states for consumers/tests
+  /** True while an SVG fetch is in-flight. */
   @state() // @ts-ignore
   private loading: boolean = false;
 
+  /** Holds the last fetch error, if any. */
   @state()
   private error: Error | null = null;
 
-  // token to avoid race conditions when multiple fetches overlap
+  // ── Private fields ────────────────────────────────────────────────────────
+
+  /** Monotonically incrementing token used to discard stale fetch results. */
   private _fetchId = 0;
 
-  // optional debounce for rapid property changes
+  /** Timer handle for debouncing rapid property changes. */
   private _debounceTimer: number | undefined;
 
+  // ── Lifecycle ─────────────────────────────────────────────────────────────
+
   firstUpdated() {
     // perform initial fetch once component is connected and rendered
     this.__scheduleUpdate();
@@ -65,14 +75,7 @@ export class Icon extends LitElement {
     }
   }
 
-  render() {
-    // accessible wrapper; consumers can provide a fallback via <slot name="fallback">.
-    return html` <div class="icon">
-      ${this.svgContent
-        ? unsafeSVG(this.svgContent)
-        : html`<slot name="fallback"></slot>`}
-    </div>`;
-  }
+  // ── Private methods ───────────────────────────────────────────────────────
 
   // small debounce to coalesce rapid changes (50ms)
   private __scheduleUpdate() {
@@ -83,9 +86,7 @@ export class Icon extends LitElement {
     this._debounceTimer = window.setTimeout(() => this.__updateSvg(), 50);
   }
 
-  /**
-   * @internal
-   */
+  /** @internal */
   private async __updateSvg() {
     this._fetchId += 1;
     const currentId = this._fetchId;
@@ -130,4 +131,15 @@ export class Icon extends LitElement {
       }
     }
   }
+
+  // ── Render ────────────────────────────────────────────────────────────────
+
+  render() {
+    // accessible wrapper; consumers can provide a fallback via <slot name="fallback">.
+    return html` <div class="icon">
+      ${this.svgContent
+        ? unsafeSVG(this.svgContent)
+        : html`<slot name="fallback"></slot>`}
+    </div>`;
+  }
 }

package/src/image/image.ts

@@ -1,10 +1,11 @@
 import { LitElement, html } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 
-import { isDarkMode } from '@/__utils/is-dark-mode.js';
-import { observeThemeChange } from '@/__utils/observe-theme-change.js';
+import { isDarkMode } from '@/__internal/utils/is-dark-mode.js';
+import { observeThemeChange } from '@/__internal/utils/observe-theme-change.js';
 
 import styles from './image.scss';
+import IndividualComponent from '@/IndividualComponent.js';
 
 /**
  * @label Image
@@ -18,6 +19,7 @@ import styles from './image.scss';
  * <wc-image src="image.jpg" alt="Description"></wc-image>
  * ```
  */
+@IndividualComponent
 export class Image extends LitElement {
   static styles = [styles];
 
@@ -33,14 +35,20 @@ export class Image extends LitElement {
   /** Enable click-to-preview lightbox */
   @property({ type: Boolean, reflect: true }) preview = false;
 
+  /** True when the OS/app theme is dark, used to select `darkSrc`. */
   @state() private _isDarkMode: boolean = isDarkMode();
 
+  /** True once the image has entered the viewport and the `<img>` element has been rendered. */
   @state() private _loaded = false;
 
   @query('.preview-dialog') private _dialog?: HTMLDialogElement;
 
+  // ── Private fields ────────────────────────────────────────────────────────
+
+  /** IntersectionObserver for lazy-loading the image when it enters the viewport. */
   private _intersectionObserver: IntersectionObserver | null = null;
 
+  /** Cleanup function returned by `observeThemeChange`. */
   private _themeCleanup: (() => void) | null = null;
 
   connectedCallback() {
@@ -72,13 +80,13 @@ export class Image extends LitElement {
     if (!wrapper) return;
 
     this._intersectionObserver = new IntersectionObserver(
-      (entries) => {
+      entries => {
         if (entries[0].isIntersecting) {
           this._loaded = true;
           this._intersectionObserver?.disconnect();
         }
       },
-      { rootMargin: '200px' } // start loading slightly before entering viewport
+      { rootMargin: '200px' }, // start loading slightly before entering viewport
     );
 
     this._intersectionObserver.observe(wrapper);
@@ -120,8 +128,12 @@ export class Image extends LitElement {
         aria-label="Image preview"
         @click=${this._handleDialogClick}
       >
-        <img src=${this._activeSrc} alt=${this.imageTitle} @click=${(e: Event) => e.stopPropagation()} />
+        <img
+          src=${this._activeSrc}
+          alt=${this.imageTitle}
+          @click=${(e: Event) => e.stopPropagation()}
+        />
       </dialog>
     `;
   }
-}
+}

package/src/index.ts

@@ -5,8 +5,11 @@ 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 { Fab } from './button/fab/index.js';
+export {
+  SegmentedButton,
+  SegmentedButtonGroup,
+} from './segmented-button/index.js';
 export { SplitButton } from './split-button/index.js';
 export { DropdownButton } from './dropdown-button/index.js';
 
@@ -53,9 +56,13 @@ export { ChartPie } from './chart-pie/index.js';
 export { ChartBar, ChartStackedBar } from './chart-bar/index.js';
 export { Table } from './table/index.js';
 export { Pagination } from './pagination/index.js';
-export { SidebarMenu, SidebarMenuItem, SidebarSubMenu } from './sidebar-menu/index.js';
+export {
+  SidebarMenu,
+  SidebarMenuItem,
+  SidebarSubMenu,
+} from './sidebar-menu/index.js';
 export { Card } from './card/index.js';
-export { Banner } from './banner/index.js';
+export { Alert } from './alert/index.js';
 export { Notification } from './notification/index.js';
 export { NotificationManager } from './notification-manager/index.js';
 export { Snackbar } from './snackbar/index.js';
@@ -68,8 +75,13 @@ 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';
+export { AppBar } from './app-bar/index.js';
 export { NavigationRail, NavigationRailItem } from './navigation-rail/index.js';
-export { Calendar, CalendarColumnView, CalendarMonthView } from './calendar/index.js';
+export {
+  Calendar,
+  CalendarColumnView,
+  CalendarMonthView,
+} from './calendar/index.js';
 export type { CalendarViewType, EventType } from './calendar/index.js';
 export { Canvas } from './canvas/index.js';
 export type { CanvasShape } from './canvas/index.js';
@@ -87,4 +99,10 @@ export type {
   SwimlaneConfig,
   NodeTemplate,
 } from './flow-designer/index.js';
-export { ConditionBuilder, CbPredicate, CbCompoundExpression, CbExpression, CbDivider } from './condition-builder/index.js';
+export {
+  ConditionBuilder,
+  CbPredicate,
+  CbCompoundExpression,
+  CbExpression,
+  CbDivider,
+} from './condition-builder/index.js';

package/src/input/input.ts

@@ -1,8 +1,8 @@
 import { html, nothing } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 
-import { redispatchEvent } from '@/__utils/dispatch-event-utils.js';
-import { spread } from '@/__directive/spread.js';
+import { redispatchEvent } from '@/__internal/utils/dispatch-event-utils.js';
+import { spread } from '@/__internal/directive/spread.js';
 
 import BaseInput from './BaseInput.js';
 import styles from './input.scss';

package/src/item/item.scss

@@ -1,195 +1,159 @@
-@use "../../scss/mixin";
+@use '../../scss/mixin';
 
 @include mixin.base-styles;
 
 :host {
-  position: relative;
-  display: block;
-  padding-inline: var(--spacing-050);
-  --item-height: 3.5rem;
-
   --item-container-color: transparent;
-  --item-label-text-color: var(--color-on-surface);
-  --item-leading-trailing-color: var(--color-on-surface-variant);
-  --item-supporting-text-color: var(--color-on-surface-variant);
-
-  --item-container-selected-color: var(--color-tertiary-container);
-  --item-label-text-selected-color: var(--color-on-tertiary-container);
-
-  --private-item-container-color: var(--item-container-color);
-  --private-item-label-text-color: var(--item-label-text-color);
-  --private-item-leading-trailing-color: var(--item-leading-trailing-color);
-  --private-item-supporting-text-color: var(--item-supporting-text-color);
-
-  --private-item-container-state-color: var(--private-item-label-text-color);
-
-  --private-item-container-shape-start-start: var(--item-container-shape-start-start, var(--shape-corner-extra-small));
-  --private-item-container-shape-start-end: var(--item-container-shape-start-end, var(--shape-corner-extra-small));
-  --private-item-container-shape-end-start: var(--item-container-shape-end-start, var(--shape-corner-extra-small));
-  --private-item-container-shape-end-end: var(--item-container-shape-end-end, var(--shape-corner-extra-small));
-  --private-item-container-shape-variant: var(--item-container-shape-variant, none);
+  --item-height: 3rem;
+  --item-multiline-height: 4rem;
 }
 
-/**
- * Reset native button/link styles
- */
-.native-button {
-  @include mixin.reset-button-styles;
-}
-.native-link {
-  @include mixin.reset-link-styles;
+:host {
+  position: relative;
+  display: flex;
+  min-width: 0;
+  max-width: 100%;
 }
 
 .item {
-  min-height: var(--item-height);
-  width: 100%;
-  background: transparent;
-  text-align: initial;
-  cursor: pointer;
-  z-index: 0;
-
-  font-family: var(--item-label-font-family, var(--typography-body-large-font-family)) !important;
-  font-size:  var(--item-label-font-size, var(--typography-body-large-font-size)) !important;
-  font-weight: var(--item-label-font-weight, var(--typography-body-large-font-weight)) !important;
-  line-height: var(--item-label-line-height, var(--typography-body-large-line-height)) !important;
-  letter-spacing: var(--item-label-letter-spacing, var(--typography-body-large-letter-spacing)) !important;
-
-  .item-content {
-    position: relative;
-    z-index: 1;
-    display: flex;
-    align-items: center;
-    gap: var(--spacing-200);
-    min-height: var(--item-height);
+  position: relative;
+  display: flex;
+  flex: 1;
+  gap: var(--item-spacing, 1rem);
+  padding-block: 0.625rem;
+  padding-inline: var(--item-padding-inline, 1rem);
+
+  overflow: hidden;
+
+  color: var(--item-label-text-color, var(--color-on-surface));
+  opacity: var(--item-label-text-opacity, 1);
+
+  font-family: var(
+    --item-label-font-family,
+    var(--typography-body-large-font-family)
+  ) !important;
+  font-size: var(
+    --item-label-font-size,
+    var(--typography-body-large-font-size)
+  ) !important;
+  font-weight: var(
+    --item-label-font-weight,
+    var(--typography-body-large-font-weight)
+  ) !important;
+  line-height: var(
+    --item-label-line-height,
+    var(--typography-body-large-line-height)
+  ) !important;
+  letter-spacing: var(
+    --item-label-letter-spacing,
+    var(--typography-body-large-letter-spacing)
+  ) !important;
+
+  [name='overline'] {
+    color: var(--item-outline-text-color);
+    font-family: var(
+      --item-outline-label-font-family,
+      var(--typography-body-medium-font-family)
+    ) !important;
+    font-size: var(
+      --item-outline-label-font-size,
+      var(--typography-body-medium-font-size)
+    ) !important;
+    font-weight: var(
+      --item-outline-label-font-weight,
+      var(--typography-body-medium-font-weight)
+    ) !important;
+    line-height: var(
+      --item-outline-label-line-height,
+      var(--typography-body-medium-line-height)
+    ) !important;
+    letter-spacing: var(
+      --item-outline-label-letter-spacing,
+      var(--typography-body-medium-letter-spacing)
+    ) !important;
+  }
 
-    padding-inline: var(--spacing-200);
-    color: var(--private-item-label-text-color);
-    opacity: var(--private-item-label-text-opacity, 1);
-    --icon-size: var(--item-icon-size, 1.5rem);
-    --icon-color: var(--private-item-leading-trailing-color);
+  [name='supporting-text'] {
+    color: var(--item-supporting-text-color, var(--color-on-surface-variant));
+    font-family: var(
+      --item-supporting-text-font-family,
+      var(--typography-body-medium-font-family)
+    ) !important;
+    font-size: var(
+      --item-supporting-text-font-size,
+      var(--typography-body-medium-font-size)
+    ) !important;
+    font-weight: var(
+      --item-supporting-text-font-weight,
+      var(--typography-body-medium-font-weight)
+    ) !important;
+    line-height: var(
+      --item-supporting-text-line-height,
+      var(--typography-body-medium-line-height)
+    ) !important;
+    letter-spacing: var(
+      --item-supporting-text-letter-spacing,
+      var(--typography-body-medium-letter-spacing)
+    ) !important;
   }
 
-  .start,
-  .end {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--private-item-leading-trailing-color);
+  [name='trailing-supporting-text'] {
+    color: var(
+      --item-trailing-supporting-text-color,
+      var(--color-on-surface-variant)
+    );
+    font-family: var(--item-trailing-supporting-text-font-family) !important;
+    font-size: var(--item-trailing-supporting-text-font-size) !important;
+    font-weight: var(--item-trailing-supporting-text-font-weight) !important;
+    line-height: var(--item-trailing-supporting-text-line-height) !important;
+    letter-spacing: var(
+      --item-trailing-supporting-text-letter-spacing
+    ) !important;
+  }
+
+  .default-slot {
+    // Needed since the default slot can have just text content, and ellipsis
+    // need an inline display.
+    display: inline;
   }
 
-  .end {
-    margin-inline-start: auto;
+  .default-slot,
+  .text ::slotted(*) {
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
-  .content {
+  .text {
     display: flex;
     flex: 1;
     flex-direction: column;
+    overflow: hidden;
     justify-content: center;
-    gap: 0.125rem;
-    min-inline-size: 0;
   }
 
-  .headline-row {
+  .non-text {
+    align-items: center;
     display: flex;
-    min-inline-size: 0;
-  }
-
-  .headline,
-  .overline,
-  .supporting-text,
-  .trailing-supporting-text {
-    min-inline-size: 0;
-  }
-
-  .headline {
-    flex: 1;
-    color: var(--private-item-label-text-color);
+    height: fit-content;
+    --icon-size: 1.5rem;
   }
 
-  .overline,
-  .supporting-text,
-  .trailing-supporting-text {
-    color: var(--private-item-supporting-text-color);
-  }
-
-  .overline {
-    @include mixin.get-typography(label-small);
-  }
-
-  .supporting-text,
-  .trailing-supporting-text {
-    @include mixin.get-typography(body-medium);
+  .non-text,
+  .text {
+    z-index: 0;
+    min-height: var(--item-height);
   }
+}
 
-  .trailing-supporting-text {
-    display: inline-flex;
-    align-items: center;
-    white-space: nowrap;
-    color: var(--private-item-supporting-text-color);
+:host([multiline]) {
+  .non-text,
+  .text {
+    min-height: var(--item-multiline-height);
   }
 }
 
-/*
-  Background layers
- */
-.background {
-  position: absolute;
+// A slot for background container elements, such as ripples and focus rings.
+[name='container']::slotted(*) {
   inset: 0;
-  background-color: var(--private-item-container-color);
-  opacity: var(--private-item-container-opacity, 1);
-  pointer-events: none;
-  border-start-start-radius: var(--private-item-container-shape-start-start, var(--private-item-container-shape));
-  border-start-end-radius: var(--private-item-container-shape-start-end, var(--private-item-container-shape));
-  border-end-start-radius: var(--private-item-container-shape-end-start, var(--private-item-container-shape));
-  border-end-end-radius: var(--private-item-container-shape-end-end, var(--private-item-container-shape));
-  corner-shape: var(--private-item-container-shape-variant);
-}
-
-.focus-ring {
-  z-index: 2;
-  --focus-ring-container-shape-start-start: var(--private-item-container-shape-start-start, var(--private-item-container-shape));
-  --focus-ring-container-shape-start-end: var(--private-item-container-shape-start-end, var(--private-item-container-shape));
-  --focus-ring-container-shape-end-start: var(--private-item-container-shape-end-start, var(--private-item-container-shape));
-  --focus-ring-container-shape-end-end: var(--private-item-container-shape-end-end, var(--private-item-container-shape));
-  --focus-ring-container-shape-variant: var(--private-item-container-shape-variant);
-}
-
-.ripple {
-  border-start-start-radius: var(--private-item-container-shape-start-start, var(--private-item-container-shape));
-  border-start-end-radius: var(--private-item-container-shape-start-end, var(--private-item-container-shape));
-  border-end-start-radius: var(--private-item-container-shape-end-start, var(--private-item-container-shape));
-  border-end-end-radius: var(--private-item-container-shape-end-end, var(--private-item-container-shape));
-  corner-shape: var(--private-item-container-shape-variant);
-  --ripple-state-opacity: var(--private-item-container-state-opacity, 0);
-  --ripple-pressed-color: var(--private-item-container-state-color);
-}
-
-/* State management */
-:host:hover:not([disabled], [selected]) {
-  --private-item-container-state-opacity: 0.08;
-}
-
-:host:has(.item.pressed):not([disabled]) {
-  --private-item-container-state-opacity: 0.12;
-}
-
-:host([selected]) {
-  --private-item-container-color: var(--item-container-selected-color);
-  --private-item-label-text-color: var(--item-label-text-selected-color);
-  --private-item-leading-trailing-color: var(--item-label-text-selected-color);
-  --private-item-supporting-text-color: var(--item-label-text-selected-color);
-}
-
-:host([disabled]) {
-  cursor: not-allowed;
-  --private-item-label-text-color: var(--color-on-surface);
-  --private-item-label-text-opacity: 0.38;
-  --private-item-leading-trailing-color: var(--color-on-surface);
-  --private-item-supporting-text-color: var(--color-on-surface);
-  --private-item-container-opacity: 0.12;
-
-  .ripple {
-    display: none;
-  }
+  position: absolute;
 }