@redvars/peacock 3.4.0 → 3.5.0

package/src/banner/banner.ts

@@ -0,0 +1,107 @@
+import { LitElement, html, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+
+import IndividualComponent from '@/IndividualComponent.js';
+import styles from './banner.scss';
+
+type BannerVariant = 'note' | 'info' | 'success' | 'warning' | 'error';
+
+const VARIANT_LABELS: Record<BannerVariant, string> = {
+  note: 'Note',
+  info: 'Info',
+  success: 'Success',
+  warning: 'Warning',
+  error: 'Error',
+};
+
+const VARIANT_ICONS: Record<BannerVariant, string> = {
+  note: 'star',
+  info: 'info',
+  success: 'check_circle',
+  warning: 'warning',
+  error: 'error',
+};
+
+/**
+ * @label Banner
+ * @tag wc-banner
+ * @rawTag banner
+ * @summary Banners show short, prominent contextual messages with optional icon and description.
+ *
+ * @cssprop --banner-container-color - Background color of the banner container.
+ * @cssprop --banner-label-text-color - Label text color.
+ * @cssprop --banner-description-text-color - Description text color.
+ * @cssprop --banner-icon-color - Icon color.
+ * @cssprop --banner-border-radius - Border radius of the banner surface.
+ *
+ * @example
+ * ```html
+ * <wc-banner variant="note" description="Use semantic roles that preserve a 3:1 contrast ratio."></wc-banner>
+ * ```
+ * @tags display, feedback
+ */
+@IndividualComponent
+export class Banner extends LitElement {
+  static styles = [styles];
+
+  /**
+   * Visual intent of the banner.
+   */
+  @property({ type: String, reflect: true })
+  variant: BannerVariant = 'note';
+
+  /**
+   * Optional explicit label text. Falls back to a variant-based label.
+   */
+  @property({ type: String })
+  label?: string;
+
+  /**
+   * Optional explicit icon name. Falls back to a variant-based icon.
+   */
+  @property({ type: String })
+  icon?: string;
+
+  /**
+   * Optional description text when a default slot is not provided.
+   */
+  @property({ type: String })
+  description = '';
+
+  /**
+   * When true, label and description are rendered on a single line.
+   */
+  @property({ type: Boolean, reflect: true })
+  inline = false;
+
+  private get resolvedLabel() {
+    return this.label || VARIANT_LABELS[this.variant];
+  }
+
+  private get resolvedIcon() {
+    return this.icon || VARIANT_ICONS[this.variant];
+  }
+
+  render() {
+    return html`
+      <div class=${classMap({ 'banner': true, [this.variant]: true })} role="status" aria-live="polite">
+        <div class="banner-icon" aria-hidden="true">
+          <slot name="icon">
+            <wc-icon name=${this.resolvedIcon}></wc-icon>
+          </slot>
+        </div>
+
+        <div class=${classMap({ 'banner-content': true, [this.variant]: true, inline: this.inline })}>
+          <div class="banner-label">
+            <slot name="label">${this.resolvedLabel}:</slot>
+          </div>
+
+          <div class="banner-description">
+            <slot>${this.description || nothing}</slot>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}

package/src/banner/index.ts

@@ -0,0 +1 @@
+export { Banner } from './banner.js';

package/src/button/BaseButton.ts

@@ -1,9 +1,10 @@
 import { html, LitElement, nothing } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
-import { dispatchActivationClick, isActivationClick } from '../utils/dispatch-event-utils.js';
+import { dispatchActivationClick, isActivationClick } from '../__utils/dispatch-event-utils.js';
+import BaseHyperlink from '@/__base_element/BaseHyperlink.js';
 
-export class BaseButton extends LitElement {
-  #id = crypto.randomUUID();
+export class BaseButton extends BaseHyperlink(LitElement) {
+  protected static readonly DISABLED_REASON_ID = 'disabled-reason';
 
   @property({ type: String }) htmlType: 'button' | 'submit' | 'reset' =
     'button';
@@ -40,8 +41,8 @@ export class BaseButton extends LitElement {
     | 'success'
     | 'danger'
     | 'warning'
-    | 'light'
-    | 'dark' = 'primary';
+    | 'surface'
+    | 'on-surface' = 'primary';
 
   /**
    * Button size.
@@ -68,16 +69,6 @@ export class BaseButton extends LitElement {
    */
   @property({ attribute: 'disabled-reason' })
   disabledReason: string = '';
-
-  /**
-   * 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';
   
 
   @property({ reflect: true })
@@ -139,10 +130,6 @@ export class BaseButton extends LitElement {
     }
   };
 
-  __isLink() {
-    return !!this.href;
-  }
-
   __dispatchClickWithThrottle: (event: MouseEvent | KeyboardEvent) => void =
     event => {
       this.__dispatchClick(event);
@@ -175,8 +162,8 @@ export class BaseButton extends LitElement {
       this.color = 'primary';
       this.variant = 'filled';
     } else if (this.type === 'secondary') {
-      this.color = 'dark';
-      this.variant = 'outlined';
+      this.color = 'surface';
+      this.variant = 'filled';
     } else if (this.type === 'tertiary') {
       this.color = 'primary';
       this.variant = 'text';
@@ -186,22 +173,22 @@ export class BaseButton extends LitElement {
     }
   }
 
-  __getDisabledReasonID() {
+  protected get __disabledReasonID(): string | undefined {
     return this.disabled && this.disabledReason
-      ? `disabled-reason-${this.#id}`
-      : nothing;
+      ? BaseButton.DISABLED_REASON_ID
+      : undefined;
   }
 
   __renderDisabledReason() {
-    const disabledReasonID = this.__getDisabledReasonID();
+    const disabledReasonID = this.__disabledReasonID;
     if (disabledReasonID)
       return html`<div
-        id="disabled-reason-${this.#id}"
+        id=${disabledReasonID}
         role="tooltip"
         aria-label=${this.disabledReason}
         class="screen-reader-only"
       >
-        {this.disabledReason}
+        ${this.disabledReason}
       </div>`;
     return nothing;
   }

package/src/button/button/button-colors.scss

@@ -110,15 +110,15 @@
 }
 
 
-:host([color=dark]) {
+:host([color=on-surface]) {
   --filled-button-container-color: var(--color-on-surface);
   --filled-button-label-text-color: var(--color-surface);
 
-  --tonal-button-container-color: var(--color-surface-container);
-  --tonal-button-label-text-color: var(--color-on-surface-container);
+  --tonal-button-container-color: var(--color-on-surface-container);
+  --tonal-button-label-text-color: var(--color-surface-container-high);
 
-  --elevated-button-container-color: var(--color-surface-container-low);
-  --elevated-button-label-text-color: var(--color-on-surface);
+  --elevated-button-container-color: var(--color-on-surface);
+  --elevated-button-label-text-color: var(--color-surface);
 
   --outlined-button-outline-color: var(--color-on-surface);
   --outlined-button-label-text-color: var(--color-on-surface);
@@ -129,20 +129,20 @@
   --neo-button-label-text-color: var(--color-surface);
 }
 
-:host([color=light]) {
-  --filled-button-container-color: var(--color-surface);
+:host([color=surface]) {
+  --filled-button-container-color: var(--color-surface-container-high);
   --filled-button-label-text-color: var(--color-on-surface);
 
-  --tonal-button-container-color: var(--color-on-surface-container);
-  --tonal-button-label-text-color: var(--color-surface-container);
+  --tonal-button-container-color: var(--color-surface-container-high);
+  --tonal-button-label-text-color: var(--color-on-surface-container);
 
-  --elevated-button-container-color: var(--color-surface-container-low);
-  --elevated-button-label-text-color: var(--color-white);
+  --elevated-button-container-color: var(--color-surface);
+  --elevated-button-label-text-color: var(--color-on-surface);
 
-  --outlined-button-outline-color: var(--color-surface);
-  --outlined-button-label-text-color: var(--color-surface);
+  --outlined-button-outline-color: var(--color-on-surface);
+  --outlined-button-label-text-color: var(--color-on-surface);
 
-  --text-button-label-text-color: var(--color-surface);
+  --text-button-label-text-color: var(--color-on-surface);
 
   --neo-button-container-color: var(--color-surface);
   --neo-button-label-text-color: var(--color-on-surface);

package/src/button/button/button.ts

@@ -1,12 +1,13 @@
 import { html } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import IndividualComponent from 'src/IndividualComponent.js';
+import IndividualComponent from '@/IndividualComponent.js';
 import styles from './button.scss';
 import colorStyles from './button-colors.scss';
 import sizeStyles from './button-sizes.scss';
-import { observerSlotChangesWithCallback, throttle } from '../../utils.js';
-import { spread } from '../../spread.js';
+import { observerSlotChangesWithCallback } from '@/__utils/observe-slot-change.js';
+import { throttle } from '@/__utils/throttle.js';
+import { spread } from '@/__directive/spread.js';
 import { BaseButton } from '../BaseButton.js';
 
 /**
@@ -129,7 +130,7 @@ export class Button extends BaseButton {
           @mousedown=${this.__handlePress}
           @keydown=${this.__handlePress}
           @keyup=${this.__handlePress}
-          ?aria-describedby=${this.__getDisabledReasonID()}
+          aria-describedby=${this.__disabledReasonID}
           aria-disabled=${`${this.disabled || this.softDisabled}`}
           ?disabled=${this.disabled}
           ${spread(this.configAria)}
@@ -149,7 +150,7 @@ export class Button extends BaseButton {
         @keydown=${this.__handlePress}
         @keyup=${this.__handlePress}
         role="button"
-        ?aria-describedby=${this.__getDisabledReasonID()}
+        aria-describedby=${this.__disabledReasonID}
         aria-disabled=${`${this.disabled}`}
         ${spread(this.configAria)}
       >

package/src/button/button-group/button-group.ts

@@ -1,7 +1,7 @@
 import { html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import IndividualComponent from 'src/IndividualComponent.js';
+import IndividualComponent from '@/IndividualComponent.js';
 import styles from './button-group.scss';
 import { Button } from '../button/button.js';
 import { IconButton } from '../icon-button/icon-button.js';
@@ -61,9 +61,9 @@ export class ButtonGroup extends LitElement {
 
   /**
    * Color applied to all buttons in the group.
-   * Possible values are `"primary"`, `"success"`, `"danger"`, `"warning"`, `"light"`, `"dark"`.
+   * Possible values are `"primary"`, `"success"`, `"danger"`, `"warning"`, `"surface"`, `"on-surface"`.
    */
-  @property({ reflect: true }) color?: 'primary' | 'success' | 'danger' | 'warning' | 'light' | 'dark';
+  @property({ reflect: true }) color?: 'primary' | 'success' | 'danger' | 'warning' | 'surface' | 'on-surface';
 
   /**
    * Visual style applied to all buttons in the group.

package/src/button/icon-button/icon-button.ts

@@ -4,10 +4,10 @@ import { classMap } from 'lit/directives/class-map.js';
 import styles from '../button/button.scss';
 import colorStyles from '../button/button-colors.scss';
 import sizeStyles from './icon-button-sizes.scss';
-import { spread } from '../../spread.js';
+import { spread } from '@/__directive/spread.js';
+import { throttle } from '@/__utils/throttle.js';
 import { BaseButton } from '../BaseButton.js';
 import { IconProvider } from '../../icon/icon.js';
-import { throttle } from '../../utils.js';
 
 /**
  * @label Icon Button
@@ -55,8 +55,6 @@ import { throttle } from '../../utils.js';
 export class IconButton extends BaseButton {
   static override styles = [styles, colorStyles, sizeStyles];
 
-  #id = crypto.randomUUID();
-
   #tabindex?: number = 0;
 
   @property({ type: String, reflect: true }) name?: string;
@@ -117,10 +115,7 @@ export class IconButton extends BaseButton {
           @mousedown=${this.__handlePress}
           @keydown=${this.__handlePress}
           @keyup=${this.__handlePress}
-          ?aria-describedby=${(this.disabled || this.softDisabled) &&
-          this.disabledReason
-            ? `disabled-reason-${this.#id}`
-            : null}
+          aria-describedby=${this.__disabledReasonID}
           aria-disabled=${`${this.disabled || this.softDisabled}`}
           ?disabled=${this.disabled}
           ${spread(this.configAria)}
@@ -140,9 +135,7 @@ export class IconButton extends BaseButton {
         @keydown=${this.__handlePress}
         @keyup=${this.__handlePress}
         role="button"
-        aria-describedby=${this.disabled && this.disabledReason
-          ? `disabled-reason-${this.#id}`
-          : null}
+        aria-describedby=${this.__disabledReasonID}
         aria-disabled=${`${this.disabled}`}
         ${spread(this.configAria)}
       >

package/src/card/card.ts

@@ -1,9 +1,10 @@
 import { LitElement, html, nothing, PropertyValues } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { dispatchActivationClick, isActivationClick } from '../utils/dispatch-event-utils.js';
-import { observerSlotChangesWithCallback, throttle } from '../utils.js';
-import IndividualComponent from '../IndividualComponent.js';
+import { dispatchActivationClick, isActivationClick } from '../__utils/dispatch-event-utils.js';
+import { observerSlotChangesWithCallback } from '@/__utils/observe-slot-change.js';
+import { throttle } from '@/__utils/throttle.js';
+import IndividualComponent from '@/IndividualComponent.js';
 import styles from './card.scss';
 import colorStyles from './card-colors.scss';
 
@@ -30,20 +31,20 @@ type CardVariant = 'elevated' | 'filled' | 'outlined';
 export class Card extends LitElement {
   static styles = [styles, colorStyles];
 
-   #id = crypto.randomUUID();
-   
+  #id = crypto.randomUUID();
+
   @property({ type: String, reflect: true })
   variant: CardVariant = 'elevated';
 
-  @property({type: Boolean, reflect: true})
+  @property({ type: Boolean, reflect: true })
   disabled: boolean = false;
 
   @property({ type: Boolean, reflect: true })
   actionable: boolean = false;
 
-   /**
-   * If button is disabled, the reason why it is disabled.
-   */
+  /**
+  * If button is disabled, the reason why it is disabled.
+  */
   @property({ attribute: 'disabled-reason' })
   disabledReason: string = '';
 
@@ -144,22 +145,22 @@ export class Card extends LitElement {
     };
 
   __dispatchClick = (event: MouseEvent | KeyboardEvent) => {
-      // If the button is soft-disabled or a disabled link, we need to explicitly
-      // prevent the click from propagating to other event listeners as well as
-      // prevent the default action.
-      if (this.disabled && this.href) {
-        event.stopImmediatePropagation();
-        event.preventDefault();
-        return;
-      }
-  
-      if (!isActivationClick(event) || !this.cardElement) {
-        return;
-      }
-  
-      this.focus();
-      dispatchActivationClick(this.cardElement);
-    };
+    // If the button is soft-disabled or a disabled link, we need to explicitly
+    // prevent the click from propagating to other event listeners as well as
+    // prevent the default action.
+    if (this.disabled && this.href) {
+      event.stopImmediatePropagation();
+      event.preventDefault();
+      return;
+    }
+
+    if (!isActivationClick(event) || !this.cardElement) {
+      return;
+    }
+
+    this.focus();
+    dispatchActivationClick(this.cardElement);
+  };
 
   __isLink() {
     return !!this.href;
@@ -201,7 +202,7 @@ export class Card extends LitElement {
   };
 
 
-    
+
 
   render() {
 
@@ -217,10 +218,19 @@ export class Card extends LitElement {
       'has-content': this.slotHasContent,
     };
 
+    if (!this.actionable && !isLink) {
+      return html`<div
+              class=${classMap(cssClasses)}
+              id="card"
+              >
+              ${this.renderCardContent()}
+            </div>`;
+    }
+
     if (!isLink) {
-          return html`<button
+      return html`<button
               class=${classMap(cssClasses)}
-              id="button"
+              id="card"
               tabindex=${this.#tabindex}
               @click=${this.__dispatchClickWithThrottle}
               @mousedown=${this.__handlePress}
@@ -232,10 +242,10 @@ export class Card extends LitElement {
             >
               ${this.renderCardContent()}
             </button>`;
-        }
-        return html`<a
+    }
+    return html`<a
             class=${classMap(cssClasses)}
-            id="button"
+            id="card"
             tabindex=${this.#tabindex}
             href=${this.href}
             target=${this.target}

package/src/chart-bar/chart-bar.ts

@@ -1,7 +1,7 @@
 import { html, LitElement, PropertyValues } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
-import IndividualComponent from 'src/IndividualComponent.js';
+import IndividualComponent from '@/IndividualComponent.js';
 import * as d3 from 'd3';
 import styles from './chart-bar.scss';
 

package/src/chart-bar/chart-stacked-bar.ts

@@ -1,8 +1,10 @@
 import { html, LitElement, PropertyValues } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
-import IndividualComponent from 'src/IndividualComponent.js';
 import * as d3 from 'd3';
+
+import IndividualComponent from '@/IndividualComponent.js';
+
 import styles from './chart-bar.scss';
 
 export type ChartStackedSegment = {

package/src/chart-doughnut/chart-doughnut.ts

@@ -1,6 +1,6 @@
 import { html, LitElement, PropertyValues } from 'lit';
 import { property, query } from 'lit/decorators.js';
-import IndividualComponent from 'src/IndividualComponent.js';
+import IndividualComponent from '@/IndividualComponent.js';
 import * as d3 from 'd3';
 import styles from './chart-donut.scss';
 

package/src/chart-pie/chart-pie.ts

@@ -1,6 +1,6 @@
 import { html, LitElement, PropertyValues } from 'lit';
 import { property, query } from 'lit/decorators.js';
-import IndividualComponent from 'src/IndividualComponent.js';
+import IndividualComponent from '@/IndividualComponent.js';
 import * as d3 from 'd3';
 import styles from './chart-pie.scss';
 

package/src/checkbox/checkbox.ts

@@ -1,7 +1,7 @@
 import { html, LitElement, svg } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { spread } from '../spread.js';
+import { spread } from '@/__directive/spread.js';
 import styles from './checkbox.scss';
 
 /**

package/src/clock/clock.ts

@@ -1,6 +1,6 @@
 import { html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
-import IndividualComponent from 'src/IndividualComponent.js';
+import IndividualComponent from '@/IndividualComponent.js';
 import { ClockController } from './ClockController.js';
 
 import styles from './clock.scss';

package/src/code-editor/code-editor.ts

@@ -2,13 +2,13 @@ import { html, nothing } from 'lit';
 import { property, state, query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import {init} from 'modern-monaco';
-import IndividualComponent from 'src/IndividualComponent.js';
+import IndividualComponent from '@/IndividualComponent.js';
 import BaseInput from '../input/BaseInput.js';
-import { observeThemeChange } from '../utils/observe-theme-change.js';
-import { redispatchEvent } from '../utils/dispatch-event-utils.js';
+import { observeThemeChange } from '../__utils/observe-theme-change.js';
+import { redispatchEvent } from '../__utils/dispatch-event-utils.js';
 import {
   isDarkMode,
-} from '../utils.js';
+} from '@/__utils/is-dark-mode.js';
 
 import styles from './code-editor.scss';
 

package/src/code-highlighter/code-highlighter.ts

@@ -12,8 +12,8 @@ import * as prettierPluginEstree from 'prettier/plugins/estree';
 
 import { BundledLanguage, codeToHtml, ShikiTransformer } from 'shiki';
 
-import IndividualComponent from 'src/IndividualComponent.js';
-import { copyToClipboard } from '../utils/copy-to-clipboard.js';
+import IndividualComponent from '@/IndividualComponent.js';
+import { copyToClipboard } from '@/__utils/copy-to-clipboard.js';
 import styles from './code-highlighter.scss';
 
 const locale = {

package/src/date-picker/date-picker.ts

@@ -1,9 +1,12 @@
 import { html } 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 '../input/BaseInput.js';
 import styles from './date-picker.scss';
-import { spread } from '../spread.js';
+
 
 /**
  * @label Date Picker

package/src/divider/divider.ts

@@ -1,8 +1,10 @@
 import { html, LitElement } 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 './divider.scss';
-import { observerSlotChangesWithCallback } from '../utils.js';
 
 /**
  * @label Divider

package/src/empty-state/empty-state.scss

@@ -38,8 +38,8 @@
   flex-direction: column;
   justify-content: center;
 
-  .title {
-    @include mixin.get-typography(headline-medium-emphasized);
+  .headline {
+    @include mixin.get-typography(headline-medium);
     margin-bottom: var(--spacing-200);
     color: var(--color-on-surface)
   }
@@ -64,10 +64,6 @@
     .content {
       width: 50%;
     }
-
-    .headline {
-      @include mixin.get-typography(title-medium);
-    }
   }
 }
 
@@ -75,7 +71,7 @@
   .empty-state {
     .empty-state-container {
       flex-direction: column;
-      gap: var(--spacing-200);
+      gap: var(--spacing-150);
 
       .illustration {
         height: auto;
@@ -84,8 +80,10 @@
       }
     }
 
-    .headline {
-      @include mixin.get-typography(title-small);
+    .content {
+      .headline {
+        @include mixin.get-typography(headline-small);
+      }
     }
   }
 }

package/src/empty-state/empty-state.ts

@@ -12,7 +12,7 @@ import styles from './empty-state.scss';
  *
  * @example
  * ```html
- * <wc-empty-state width="80%" headline="No items found"></wc-empty-state>
+ * <wc-empty-state style="width:100%" headline="No items found"></wc-empty-state>
  * ```
  */
 export class EmptyState extends LitElement {