@redvars/peacock 3.4.0 → 3.5.1

package/src/toolbar/toolbar.scss

@@ -0,0 +1,165 @@
+@use '../../scss/mixin';
+
+@include mixin.base-styles;
+
+:host {
+  display: block;
+  --toolbar-container-shape: var(--shape-corner-full);
+  --toolbar-docked-container-shape: var(--shape-corner-extra-large) var(--shape-corner-extra-large) var(--shape-corner-none) var(--shape-corner-none);
+  --toolbar-height: 5rem; /* 80dp - small/default docked */
+  --toolbar-padding-inline: 0.75rem;
+  --toolbar-gap: 0.5rem;
+  --toolbar-shadow: none;
+}
+
+/* ---- Shared toolbar base ---- */
+
+.toolbar {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--toolbar-gap);
+  padding-inline: var(--toolbar-padding-inline);
+  min-height: var(--toolbar-height);
+  width: 100%;
+  box-sizing: border-box;
+  color: var(--_toolbar-title-color);
+  --icon-color: var(--_toolbar-icon-color);
+  box-shadow: var(--toolbar-shadow);
+}
+
+.toolbar-content {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  min-width: 0;
+}
+
+.background {
+  position: absolute;
+  inset: 0;
+  background-color: var(--_toolbar-container-color);
+  pointer-events: none;
+  z-index: 0;
+}
+
+/* ---- Docked variant ---- */
+
+.toolbar.variant-docked {
+  width: 100%;
+  padding-inline: var(--toolbar-padding-inline);
+  padding-block-start: 0.5rem;
+  padding-block-end: calc(0.5rem + env(safe-area-inset-bottom, 0px));
+
+  .background {
+    border-radius: var(--toolbar-docked-container-shape);
+  }
+
+  .toolbar-content {
+    width: 100%;
+    justify-content: space-between;
+    gap: var(--toolbar-gap);
+    overflow-x: auto;
+    overflow-y: hidden;
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  ::slotted(*) {
+    position: relative;
+    z-index: 1;
+    flex-shrink: 0;
+  }
+
+  ::slotted(wc-icon-button) {
+    --button-container-shape: var(--shape-corner-full);
+    --button-container-shape-variant: round;
+  }
+
+  /* Size variants */
+  &.size-small {
+    --toolbar-height: 5rem;
+  }
+
+  &.size-medium {
+    --toolbar-height: 6rem;
+  }
+
+  &.size-large {
+    --toolbar-height: 7rem;
+  }
+
+  &.elevated {
+    --toolbar-shadow: var(--elevation-shadow-level-3, 0 4px 8px rgba(0, 0, 0, 0.15));
+  }
+}
+
+/* ---- Floating variant ---- */
+
+.toolbar.variant-floating {
+  --toolbar-container-shape: var(--shape-corner-full);
+
+  border-radius: var(--toolbar-container-shape);
+  width: auto;
+  display: inline-flex;
+  padding: 0.75rem;
+  gap: 0.5rem;
+
+  .elevation {
+    --elevation-level: 3;
+    --elevation-container-shape: var(--toolbar-container-shape);
+    --elevation-container-shape-variant: round;
+  }
+
+  .background {
+    border-radius: var(--toolbar-container-shape);
+  }
+
+  .toolbar-content {
+    width: auto;
+    gap: 0.5rem;
+  }
+
+  ::slotted(*) {
+    position: relative;
+    z-index: 1;
+  }
+
+  ::slotted(wc-icon-button) {
+    --button-container-shape: var(--shape-corner-full);
+    --button-container-shape-variant: round;
+  }
+
+  &.orientation-horizontal {
+    min-height: auto;
+    padding-block: 0.5rem;
+    padding-inline: 0.75rem;
+
+    .toolbar-content {
+      flex-direction: row;
+      align-items: center;
+    }
+  }
+
+  &.orientation-vertical {
+    min-height: auto;
+    width: auto;
+    padding-block: 0.75rem;
+    padding-inline: 0.5rem;
+
+    .toolbar-content {
+      flex-direction: column;
+      align-items: center;
+    }
+  }
+
+  &.elevated {
+    .elevation {
+      --elevation-level: 4;
+    }
+  }
+}

package/src/toolbar/toolbar.ts

@@ -0,0 +1,137 @@
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import IndividualComponent from '@/IndividualComponent.js';
+import styles from './toolbar.scss';
+import colorStyles from './toolbar-colors.scss';
+
+/**
+ * @label Toolbar
+ * @tag wc-toolbar
+ * @rawTag toolbar
+ *
+ * @summary A Material 3 toolbar / app bar for navigation and actions.
+ * @overview
+ * <p>The toolbar component implements the Material 3 app bar pattern. It supports a
+ * docked (attached) variant for bottom-panel navigation and a floating (detached pill-shaped)
+ * variant. The floating variant supports both horizontal and vertical orientations.</p>
+ *
+ * <p>Render toolbar actions directly as children of the component. The docked variant is
+ * optimized for a horizontal action row, while the floating variant supports both horizontal
+ * and vertical layouts.</p>
+ *
+ * @cssprop --toolbar-container-color - Background color of the toolbar.
+ * @cssprop --toolbar-container-shape - Border radius of the toolbar. Relevant for the floating variant.
+ * @cssprop --toolbar-height - Height of the toolbar (docked horizontal / floating horizontal).
+ * @cssprop --toolbar-padding-inline - Inline padding of the toolbar.
+ * @cssprop --toolbar-gap - Gap between toolbar sections.
+ * @cssprop --toolbar-icon-color - Color of icon slots.
+ * @cssprop --toolbar-title-color - Color of the title (default slot) text.
+ * @cssprop --toolbar-shadow - Box-shadow of the toolbar.
+ *
+ * @example
+ * ```html
+ * <!-- Docked toolbar -->
+ * <wc-toolbar>
+ *   <wc-icon-button variant="text"><wc-icon name="home"></wc-icon></wc-icon-button>
+ *   <wc-icon-button variant="tonal"><wc-icon name="search"></wc-icon></wc-icon-button>
+ *   <wc-icon-button variant="text"><wc-icon name="favorite"></wc-icon></wc-icon-button>
+ *   <wc-icon-button variant="text"><wc-icon name="account_circle"></wc-icon></wc-icon-button>
+ * </wc-toolbar>
+ * ```
+ *
+ * @example
+ * ```html
+ * <!-- Floating horizontal toolbar -->
+ * <wc-toolbar variant="floating" orientation="horizontal">
+ *   <wc-icon-button variant="tonal"><wc-icon name="home"></wc-icon></wc-icon-button>
+ *   <wc-icon-button variant="text"><wc-icon name="search"></wc-icon></wc-icon-button>
+ *   <wc-icon-button variant="text"><wc-icon name="favorite"></wc-icon></wc-icon-button>
+ * </wc-toolbar>
+ * ```
+ *
+ * @example
+ * ```html
+ * <!-- Floating vertical toolbar -->
+ * <wc-toolbar variant="floating" orientation="vertical">
+ *   <wc-icon-button variant="tonal"><wc-icon name="home"></wc-icon></wc-icon-button>
+ *   <wc-icon-button variant="text"><wc-icon name="search"></wc-icon></wc-icon-button>
+ *   <wc-icon-button variant="text"><wc-icon name="favorite"></wc-icon></wc-icon-button>
+ * </wc-toolbar>
+ * ```
+ * @tags display navigation
+ */
+@IndividualComponent
+export class Toolbar extends LitElement {
+  static styles = [styles, colorStyles];
+
+  /**
+   * Visual and layout variant of the toolbar.
+   * - `"docked"`: A full-width bar attached to the edge of the screen (default).
+   * - `"floating"`: A detached pill-shaped toolbar that floats over content.
+   */
+  @property({ type: String, reflect: true })
+  variant: 'docked' | 'floating' = 'docked';
+
+  /**
+   * Orientation of the toolbar content.
+   * - `"horizontal"`: Items are laid out left to right (default).
+   * - `"vertical"`: Items are stacked top to bottom. Primarily useful for the floating variant.
+   */
+  @property({ type: String, reflect: true })
+  orientation: 'horizontal' | 'vertical' = 'horizontal';
+
+  /**
+   * Size of the docked toolbar.
+    * - `"small"`: 80dp height (default).
+    * - `"medium"`: 96dp height.
+    * - `"large"`: 112dp height.
+   */
+  @property({ type: String, reflect: true })
+  size: 'small' | 'medium' | 'large' = 'small';
+
+  /**
+   * Whether the toolbar is visually elevated (adds a shadow).
+   */
+  @property({ type: Boolean, reflect: true })
+  elevated: boolean = false;
+
+  override render() {
+    const cssClasses = {
+      toolbar: true,
+      [`variant-${this.variant}`]: true,
+      [`orientation-${this.orientation}`]: true,
+      [`size-${this.size}`]: true,
+      elevated: this.elevated,
+    };
+
+    if (this.variant === 'floating') {
+      return Toolbar.__renderFloating(cssClasses);
+    }
+
+    return Toolbar.__renderDocked(cssClasses);
+  }
+
+  private static __renderDocked(cssClasses: Record<string, boolean>) {
+    return html`
+      <div class=${classMap(cssClasses)} role="toolbar">
+        <div class="background"></div>
+        <div class="toolbar-content">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+
+  private static __renderFloating(cssClasses: Record<string, boolean>) {
+    return html`
+      <div class=${classMap(cssClasses)} role="toolbar">
+        <wc-elevation class="elevation"></wc-elevation>
+        <div class="background"></div>
+        <div class="toolbar-content">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+}

package/src/tooltip/tooltip.ts

@@ -133,6 +133,30 @@ export class Tooltip extends LitElement {
     this._target = null;
   }
 
+  _focusTarget?: HTMLElement;
+
+  set forElement(value: HTMLElement | null) {
+    if (value) {
+      this._focusTarget = value;
+    } else {      
+      this._focusTarget = undefined;
+    }
+  }
+
+  __getFocusTarget(): HTMLElement | null {
+
+    if (this._focusTarget) {
+      return this._focusTarget;
+    }
+
+    const focusTarget = document.getElementById(this.for);
+     if (focusTarget) {
+      return focusTarget
+     }
+
+     return this.parentElement;
+  }
+
   private attachListeners() {
     this.detachListeners(); // Cleanup old target if it exists
 

package/src/url-field/index.ts

@@ -0,0 +1 @@
+export { UrlField } from './url-field.js';

package/src/url-field/url-field.scss

@@ -0,0 +1,50 @@
+@use '../../scss/mixin';
+
+@include mixin.base-styles;
+
+:host {
+  display: block;
+  width: 100%;
+}
+
+.url-input {
+  flex: 1;
+  width: 100%;
+  border: none;
+  outline: none;
+  margin: 0;
+  padding: 0;
+  background: none;
+  cursor: inherit;
+  font: inherit;
+  color: inherit;
+}
+
+.url-display {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+}
+
+.url-link {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--color-primary);
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.url-placeholder {
+  color: var(--color-on-surface-variant);
+  opacity: 0.6;
+}
+
+.edit-button {
+  --button-container-shape: var(--shape-corner-full);
+}

package/src/url-field/url-field.ts

@@ -0,0 +1,239 @@
+import { html, nothing } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
+
+import { redispatchEvent } from '@/__utils/dispatch-event-utils.js';
+
+import BaseInput from '../input/BaseInput.js';
+import styles from './url-field.scss';
+
+/**
+ * @label URL Field
+ * @tag wc-url-field
+ * @rawTag url-field
+ *
+ * @summary A field for entering and displaying URLs with validation.
+ * @overview
+ * <p>URL Field wraps an input with URL validation, showing a clickable link preview when not in edit mode.</p>
+ *
+ * @example
+ * ```html
+ * <wc-url-field label="Website" value="https://example.com"></wc-url-field>
+ * ```
+ * @tags form
+ */
+export class UrlField extends BaseInput {
+  static styles = [styles];
+
+  @property({ type: String })
+  value: string = '';
+
+  @property({ type: String })
+  name: string = '';
+
+  @property({ type: String })
+  placeholder: string = '';
+
+  @property({ type: String })
+  label: string = '';
+
+  @property({ type: Boolean, reflect: true })
+  editing: boolean = false;
+
+  @property({ type: Number })
+  debounce: number = 300;
+
+  @property({ type: String, reflect: true })
+  size: 'sm' | 'md' | 'lg' = 'md';
+
+  @property({ type: String })
+  variant: 'filled' | 'outlined' | 'default' = 'default';
+
+  @property({ type: String, attribute: 'helper-text' })
+  helperText: string = '';
+
+  @property({ type: Boolean })
+  error: boolean = false;
+
+  @property({ type: String, attribute: 'error-text' })
+  errorText: string = '';
+
+  @property({ type: Boolean })
+  warning: boolean = false;
+
+  @property({ type: String, attribute: 'warning-text' })
+  warningText: string = '';
+
+  @state()
+  private focused: boolean = false;
+
+  @state()
+  private isValid: boolean = true;
+
+  @query('.url-input')
+  private inputElement?: HTMLInputElement;
+
+  private debounceTimer?: ReturnType<typeof setTimeout>;
+
+  override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    if (this.debounceTimer) {
+      clearTimeout(this.debounceTimer);
+    }
+  }
+
+  override focus() {
+    if (!this.editing && !this.disabled && !this.readonly) {
+      this.startEditing();
+      return;
+    }
+    this.inputElement?.focus();
+  }
+
+  override blur() {
+    this.inputElement?.blur();
+  }
+
+  private startEditing() {
+    if (this.disabled || this.readonly) return;
+    this.editing = true;
+    setTimeout(() => this.inputElement?.focus(), 80);
+  }
+
+  private closeEditing() {
+    this.isValid = this.validateUrl(this.value);
+    this.dispatchEvent(
+      new CustomEvent('input-invalid', {
+        detail: !this.isValid,
+        bubbles: true,
+        composed: true,
+      }),
+    );
+
+    if (this.isValid) {
+      this.editing = false;
+    }
+  }
+
+  private validateUrl(url: string): boolean {
+    if (!url) return true;
+
+    try {
+      new URL(url);
+      return true;
+    } catch {
+      return false;
+    }
+  }
+
+  private handleInput(event: InputEvent) {
+    this.value = (event.target as HTMLInputElement).value;
+    this.isValid = true;
+
+    if (this.debounceTimer) {
+      clearTimeout(this.debounceTimer);
+    }
+
+    this.debounceTimer = setTimeout(() => {
+      this.dispatchEvent(
+        new CustomEvent('value-change', {
+          detail: this.value,
+          bubbles: true,
+          composed: true,
+        }),
+      );
+    }, this.debounce);
+  }
+
+  private handleFocusChange() {
+    this.focused = this.inputElement?.matches(':focus') ?? false;
+  }
+
+  private handleBlur() {
+    this.focused = false;
+    this.closeEditing();
+  }
+
+  private handleChange(event: Event) {
+    redispatchEvent(this, event);
+  }
+
+  private renderDisplayValue() {
+    if (!this.value) {
+      return html`<span class="url-placeholder">${this.placeholder}</span>`;
+    }
+
+    return html`
+      <a
+        class="url-link"
+        href=${this.value}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        ${this.value}
+      </a>
+    `;
+  }
+
+  render() {
+    const hasValue = !!this.value;
+    const showInvalidState = this.error || !this.isValid;
+    const resolvedErrorText = !this.isValid
+      ? 'Please enter a valid URL'
+      : this.errorText;
+
+    return html`
+      <wc-field
+        label=${this.label}
+        ?required=${this.required}
+        ?disabled=${this.disabled}
+        ?readonly=${this.readonly}
+        ?skeleton=${this.skeleton}
+        helper-text=${this.helperText}
+        ?error=${showInvalidState}
+        error-text=${resolvedErrorText}
+        ?warning=${this.warning}
+        warning-text=${this.warningText}
+        variant=${this.variant}
+        ?populated=${hasValue || this.editing}
+        ?focused=${this.focused}
+        .host=${this}
+        class="url-field-wrapper"
+      >
+        ${this.editing
+          ? html`
+              <input
+                class="url-input"
+                name=${this.name}
+                type="url"
+                placeholder=${this.placeholder}
+                .value=${this.value}
+                ?readonly=${this.readonly}
+                ?required=${this.required}
+                ?disabled=${this.disabled}
+                @input=${this.handleInput}
+                @change=${this.handleChange}
+                @focus=${this.handleFocusChange}
+                @blur=${this.handleBlur}
+              />
+            `
+          : html`<div class="url-display">${this.renderDisplayValue()}</div>`}
+
+        ${!this.editing && !this.disabled && !this.readonly
+          ? html`
+              <wc-icon-button
+                class="edit-button"
+                slot="field-end"
+                variant="text"
+                @click=${(event: MouseEvent) => {
+                  event.stopPropagation();
+                  this.startEditing();
+                }}
+              >
+                <wc-icon name="edit"></wc-icon>
+              </wc-icon-button>
+            `
+          : nothing}
+      </wc-field>
+    `;
+  }
+}

package/dist/button-COYCtuA8.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"button-COYCtuA8.js","sources":["../../src/spread.ts","../../src/button/BaseButton.ts","../../src/button/button/button.ts"],"sourcesContent":["import {\n  directive,\n  Directive,\n  ElementPart,\n  PartInfo,\n  PartType,\n} from 'lit/directive.js';\n\nclass SpreadDirective extends Directive {\n  constructor(partInfo: PartInfo) {\n    super(partInfo);\n    if (partInfo.type !== PartType.ELEMENT) {\n      throw new Error('spread() can only be used on elements');\n    }\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  render(_props: { [key: string]: any } | undefined) {\n    return '';\n  }\n\n  update(part: ElementPart, [props]: [{ [key: string]: any } | undefined]) {\n    if (!props) return;\n    // eslint-disable-next-line guard-for-in,no-restricted-syntax\n    for (const key in props) {\n      const value = props[key];\n      if (value === undefined || value === null) {\n        part.element.removeAttribute(key);\n      } else {\n        part.element.setAttribute(key, value);\n      }\n    }\n  }\n}\n\nexport const spread = directive(SpreadDirective);\n","import { html, LitElement, nothing } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { dispatchActivationClick, isActivationClick } from '../utils/dispatch-event-utils.js';\n\nexport class BaseButton extends LitElement {\n  #id = crypto.randomUUID();\n\n  @property({ type: String }) htmlType: 'button' | 'submit' | 'reset' =\n    'button';\n\n  /**\n   * Type is preset of color and variant. Type will be only applied.\n   *\n   */\n  @property({ type: String }) type?: 'primary' | 'secondary' | 'tertiary';\n\n  /**\n   * The visual style of the button.\n   *\n   *  Possible variant values:\n   * `\"filled\"` is a filled button.\n   * `\"outlined\"` is an outlined button.\n   * `\"text\"` is a transparent button.\n   * `\"tonal\"` is a light color button.\n   * `\"elevated\"` is elevated button\n   */\n  @property() variant:\n    | 'elevated'\n    | 'filled'\n    | 'tonal'\n    | 'outlined'\n    | 'text'\n    | 'neo' = 'filled';\n\n  /**\n   * Defines the primary color of the button. This can be set to predefined color names to apply specific color themes.\n   */\n  @property({ reflect: true }) color:\n    | 'primary'\n    | 'success'\n    | 'danger'\n    | 'warning'\n    | 'light'\n    | 'dark' = 'primary';\n\n  /**\n   * Button size.\n   * Possible values are `\"sm\"`, `\"md\"`, `\"lg\"`. Defaults to `\"md\"`.\n   */\n  @property({ reflect: true }) size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'sm';\n\n  /**\n   * If true, the user cannot interact with the button. Defaults to `false`.\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled: boolean = false;\n\n  @property({ type: Boolean, reflect: true }) skeleton: boolean = false;\n\n  /**\n   * If true, the user cannot interact with the button and the button is visually styled as disabled. But the button is still focusable. Defaults to `false`.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'soft-disabled' })\n  softDisabled: boolean = false;\n\n  /**\n   * If button is disabled, the reason why it is disabled.\n   */\n  @property({ attribute: 'disabled-reason' })\n  disabledReason: string = '';\n\n  /**\n   * Hyperlink to navigate to on click.\n   */\n  @property({ reflect: true }) href?: string;\n\n  /**\n   * Sets or retrieves the window or frame at which to target content.\n   */\n  @property() target: string = '_self';\n  \n\n  @property({ reflect: true })\n  configAria?: { [key: string]: any };\n\n  \n\n  @property({ type: Boolean, reflect: true }) toggle: boolean = false;\n\n  @property({ type: Boolean, reflect: true }) selected: boolean = false;\n\n  /**\n   * Sets the delay for throttle in milliseconds. Defaults to 200 milliseconds.\n   */\n  @property() throttleDelay = 200;\n\n  @property() tooltip?: string;\n\n  /**\n   * States\n   */\n  @state()\n  isPressed = false;\n\n  @query('.button') readonly buttonElement!: HTMLElement | null;\n\n  override focus() {\n    this.buttonElement?.focus();\n  }\n\n  override blur() {\n    this.buttonElement?.blur();\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('click', this.__dispatchClickWithThrottle);\n    window.addEventListener('mouseup', this.__handlePress);\n  }\n\n  override disconnectedCallback() {\n    window.removeEventListener('mouseup', this.__handlePress);\n    this.removeEventListener('click', this.__dispatchClickWithThrottle);\n    super.disconnectedCallback();\n  }\n\n  __handlePress = (event: KeyboardEvent | MouseEvent) => {\n    if (this.disabled || this.skeleton || this.softDisabled) return;\n    if (\n      event instanceof KeyboardEvent &&\n      event.type === 'keydown' &&\n      (event.key === 'Enter' || event.key === ' ')\n    ) {\n      this.isPressed = true;\n    } else if (event.type === 'mousedown') {\n      this.isPressed = true;\n    } else {\n      this.isPressed = false;\n    }\n  };\n\n  __isLink() {\n    return !!this.href;\n  }\n\n  __dispatchClickWithThrottle: (event: MouseEvent | KeyboardEvent) => void =\n    event => {\n      this.__dispatchClick(event);\n    };\n\n  __dispatchClick = (event: MouseEvent | KeyboardEvent) => {\n    // If the button is soft-disabled or a disabled link, we need to explicitly\n    // prevent the click from propagating to other event listeners as well as\n    // prevent the default action.\n    if (this.softDisabled || (this.disabled && this.href) || this.skeleton) {\n      event.stopImmediatePropagation();\n      event.preventDefault();\n      return;\n    }\n\n    if (!isActivationClick(event) || !this.buttonElement) {\n      return;\n    }\n\n    if (this.toggle) {\n      this.selected = !this.selected;\n    }\n\n    this.focus();\n    dispatchActivationClick(this.buttonElement);\n  };\n\n  __convertTypeToVariantAndColor() {\n    if (this.type === 'primary') {\n      this.color = 'primary';\n      this.variant = 'filled';\n    } else if (this.type === 'secondary') {\n      this.color = 'dark';\n      this.variant = 'outlined';\n    } else if (this.type === 'tertiary') {\n      this.color = 'primary';\n      this.variant = 'text';\n    } else if (this.type === 'danger') {\n      this.color = 'danger';\n      this.variant = 'filled';\n    }\n  }\n\n  __getDisabledReasonID() {\n    return this.disabled && this.disabledReason\n      ? `disabled-reason-${this.#id}`\n      : nothing;\n  }\n\n  __renderDisabledReason() {\n    const disabledReasonID = this.__getDisabledReasonID();\n    if (disabledReasonID)\n      return html`<div\n        id=\"disabled-reason-${this.#id}\"\n        role=\"tooltip\"\n        aria-label=${this.disabledReason}\n        class=\"screen-reader-only\"\n      >\n        {this.disabledReason}\n      </div>`;\n    return nothing;\n  }\n\n  __renderTooltip() {\n    if (this.tooltip) {\n      return html`<wc-tooltip for=\"button\">${this.tooltip}</wc-tooltip>`;\n    }\n    return nothing;\n  }\n}\n","import { html } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport IndividualComponent from 'src/IndividualComponent.js';\nimport styles from './button.scss';\nimport colorStyles from './button-colors.scss';\nimport sizeStyles from './button-sizes.scss';\nimport { observerSlotChangesWithCallback, throttle } from '../../utils.js';\nimport { spread } from '../../spread.js';\nimport { BaseButton } from '../BaseButton.js';\n\n/**\n * @label Button\n * @tag wc-button\n * @rawTag button\n *\n * @summary Buttons help people initiate actions, from sending an email, to sharing a document, to liking a post.\n * @overview\n * <p>Buttons are clickable elements that are used to trigger actions. They communicate calls to action to the user and allow users to interact with pages in a variety of ways. Button labels express what action will occur when the user interacts with it.</p>\n *\n * @cssprop --button-container-shape: Defines the border radius of the button container shape.\n *\n * @cssprop --button-container-shape-start-start: Defines the start position of the button container shape.\n * @cssprop --button-container-shape-start-end: Defines the end position of the button container shape.\n * @cssprop --button-container-shape-end-start: Defines the start position of the button container shape.\n * @cssprop --button-container-shape-end-end: Defines the end position of the button container shape.\n *\n *\n * @cssprop --filled-button-container-color: Color of the filled button container.\n * @cssprop --filled-button-label-text-color: Text color of the filled button label.\n *\n * @cssprop --outlined-button-container-color: Color of the outlined button container.\n * @cssprop --outlined-button-label-text-color: Text color of the outlined button label.\n *\n * @cssprop --text-button-label-text-color: Text color of the text button label.\n *\n * @cssprop --tonal-button-container-color: Color of the tonal button container.\n * @cssprop --tonal-button-label-text-color: Text color of the tonal button label.\n *\n * @cssprop --elevated-button-container-color: Color of the elevated button container.\n * @cssprop --elevated-button-label-text-color: Text color of the elevated button label.\n *\n * @cssprop --neo-button-container-color: Color of the neo button container.\n * @cssprop --neo-button-label-text-color: Text color of the neo button label.\n *\n * @fires {MouseEvent} click - Dispatched when the button is clicked.\n *\n * @example\n * ```html\n * <wc-button>Button</wc-button>\n * ```\n * @tags display\n */\n@IndividualComponent\nexport class Button extends BaseButton {\n  static override styles = [styles, colorStyles, sizeStyles];\n\n  #tabindex?: number = 0;\n\n  /**\n   * Icon alignment.\n   * Possible values are `\"start\"`, `\"end\"`. Defaults to `\"end\"`.\n   */\n  @property({ attribute: 'icon-align' })\n  iconAlign: 'start' | 'end' = 'end';\n\n  @state()\n  private slotHasContent = false;\n\n  override focus() {\n    this.buttonElement?.focus();\n  }\n\n  override blur() {\n    this.buttonElement?.blur();\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('click', this.__dispatchClickWithThrottle);\n    window.addEventListener('mouseup', this.__handlePress);\n  }\n\n  override disconnectedCallback() {\n    window.removeEventListener('mouseup', this.__handlePress);\n    this.removeEventListener('click', this.__dispatchClickWithThrottle);\n    super.disconnectedCallback();\n  }\n\n  override firstUpdated() {\n    this.__dispatchClickWithThrottle = throttle(\n      this.__dispatchClick,\n      this.throttleDelay,\n    );\n    observerSlotChangesWithCallback(\n      this.renderRoot.querySelector('slot'),\n      hasContent => {\n        this.slotHasContent = hasContent;\n        this.requestUpdate();\n      },\n    );\n\n    this.__convertTypeToVariantAndColor();\n  }\n\n  override render() {\n    const isLink = this.__isLink();\n\n    const cssClasses = {\n      button: true,\n      'button-element': true,\n      [`size-${this.size}`]: true,\n      [`variant-${this.variant}`]: true,\n      [`color-${this.color}`]: true,\n      disabled: this.disabled || this.softDisabled,\n      pressed: this.isPressed,\n      'has-content': this.slotHasContent,\n      'show-skeleton': this.skeleton,\n      [`icon-align-${this.iconAlign}`]: true,\n    };\n\n    if (!isLink) {\n      return html`<button\n          class=${classMap(cssClasses)}\n          id=\"button\"\n          tabindex=${this.#tabindex}\n          type=${this.htmlType}\n          @click=${this.__dispatchClickWithThrottle}\n          @mousedown=${this.__handlePress}\n          @keydown=${this.__handlePress}\n          @keyup=${this.__handlePress}\n          ?aria-describedby=${this.__getDisabledReasonID()}\n          aria-disabled=${`${this.disabled || this.softDisabled}`}\n          ?disabled=${this.disabled}\n          ${spread(this.configAria)}\n        >\n          ${this.renderButtonContent()}\n        </button>\n        ${this.__renderTooltip()}`;\n    }\n    return html`<a\n        class=${classMap(cssClasses)}\n        id=\"button\"\n        tabindex=${this.#tabindex}\n        href=${this.href}\n        target=${this.target}\n          @click=${this.__dispatchClickWithThrottle}\n        @mousedown=${this.__handlePress}\n        @keydown=${this.__handlePress}\n        @keyup=${this.__handlePress}\n        role=\"button\"\n        ?aria-describedby=${this.__getDisabledReasonID()}\n        aria-disabled=${`${this.disabled}`}\n        ${spread(this.configAria)}\n      >\n        ${this.renderButtonContent()}\n      </a>\n      ${this.__renderTooltip()}`;\n  }\n\n  renderButtonContent() {\n    return html`\n      <wc-focus-ring class=\"focus-ring\" .control=${this} .forElement=${this.buttonElement}></wc-focus-ring>\n      <wc-elevation class=\"elevation\"></wc-elevation>\n      <div class=\"neo-background\"></div>\n      <div class=\"background\"></div>\n      <div class=\"outline\"></div>\n      <wc-ripple class=\"ripple\"></wc-ripple>\n      <wc-skeleton class=\"skeleton\"></wc-skeleton>\n\n      <div class=\"button-content\">\n        <div class=\"slot-container\">\n          <slot></slot>\n        </div>\n\n        <slot name=\"icon\"></slot>\n      </div>\n\n      ${this.__renderDisabledReason()}\n    `;\n  }\n}\n"],"names":["Directive","PartType","directive","LitElement","nothing","html","property","state","query","classMap","styles","colorStyles","sizeStyles"],"mappings":"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"}