@redvars/peacock 3.8.2 → 3.8.4

package/dist/divider.js

@@ -7,6 +7,7 @@ import './directive-ZPhl09Yt.js';
 
 var css_248z = i`* {
   box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
 }
 
 .screen-reader-only {

package/dist/divider.js.map

@@ -1 +1 @@
-{"version":3,"file":"divider.js","sources":["../../src/divider/divider.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { observerSlotChangesWithCallback } from '@/__internal/utils/observe-slot-change.js';\n\nimport styles from './divider.scss';\nimport IndividualComponent from '@/IndividualComponent.js';\n\n/**\n * @label Divider\n * @tag wc-divider\n * @rawTag divider\n *\n * @summary The divider component is used to visually separate content.\n * @overview\n *  - Dividers are used to separate content into clear groups, making it easier for users to scan and understand the information presented.\n *  - They can be oriented either vertically or horizontally, depending on the layout requirements.\n *\n * @cssprop --divider-color - Controls the color of the divider.\n * @cssprop --divider-padding - Controls the padding of the divider.\n *\n * @example\n * ```html\n * <wc-divider style=\"width: 12rem;\">or</wc-divider>\n * ```\n * @tags display\n */\n@IndividualComponent\nexport class Divider extends LitElement {\n  static styles = [styles];\n\n  /** When true, renders the divider vertically. Defaults to horizontal. */\n  @property({ type: Boolean, reflect: true }) vertical = false;\n\n  /** True when the default slot contains content, used to show the label variant. */\n  @state()\n  slotHasContent = false;\n\n  firstUpdated() {\n    observerSlotChangesWithCallback(\n      this.renderRoot.querySelector('slot'),\n      hasContent => {\n        this.slotHasContent = hasContent;\n        this.requestUpdate();\n      },\n    );\n  }\n\n  render() {\n    return html`<div\n      class=${classMap({\n        divider: true,\n        vertical: this.vertical,\n        'slot-has-content': this.slotHasContent,\n      })}\n    >\n      <div class=\"line\"></div>\n      <div class=\"slot-container\">\n        <slot></slot>\n      </div>\n      <div class=\"line\"></div>\n    </div>`;\n  }\n}\n"],"names":["LitElement","html","classMap","styles","property","state"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA;;;;;;;;;;;;;;;;;;AAkBG;AAEI,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQA,GAAU,CAAA;AAAhC,IAAA,WAAA,GAAA;;;QAIuC,IAAA,CAAA,QAAQ,GAAG,KAAK;;QAI5D,IAAA,CAAA,cAAc,GAAG,KAAK;IA2BxB;IAzBE,YAAY,GAAA;AACV,QAAA,+BAA+B,CAC7B,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,EACrC,UAAU,IAAG;AACX,YAAA,IAAI,CAAC,cAAc,GAAG,UAAU;YAChC,IAAI,CAAC,aAAa,EAAE;AACtB,QAAA,CAAC,CACF;IACH;IAEA,MAAM,GAAA;AACJ,QAAA,OAAOC,CAAI,CAAA,CAAA;AACD,YAAA,EAAAC,CAAQ,CAAC;AACf,YAAA,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,kBAAkB,EAAE,IAAI,CAAC,cAAc;SACxC,CAAC;;;;;;;WAOG;IACT;;AAjCO,OAAA,CAAA,MAAM,GAAG,CAACC,QAAM,CAAC;AAGoB,UAAA,CAAA;IAA3CC,CAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;AAAmB,CAAA,EAAA,OAAA,CAAA,SAAA,EAAA,UAAA,EAAA,MAAA,CAAA;AAI7D,UAAA,CAAA;AADC,IAAAC,CAAK;AACiB,CAAA,EAAA,OAAA,CAAA,SAAA,EAAA,gBAAA,EAAA,MAAA,CAAA;AARZ,OAAO,GAAA,UAAA,CAAA;IADnB;AACY,CAAA,EAAA,OAAO,CAmCnB;;;;"}
+{"version":3,"file":"divider.js","sources":["../../src/divider/divider.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { observerSlotChangesWithCallback } from '@/__internal/utils/observe-slot-change.js';\n\nimport styles from './divider.scss';\nimport IndividualComponent from '@/IndividualComponent.js';\n\n/**\n * @label Divider\n * @tag wc-divider\n * @rawTag divider\n *\n * @summary The divider component is used to visually separate content.\n * @overview\n *  - Dividers are used to separate content into clear groups, making it easier for users to scan and understand the information presented.\n *  - They can be oriented either vertically or horizontally, depending on the layout requirements.\n *\n * @cssprop --divider-color - Controls the color of the divider.\n * @cssprop --divider-padding - Controls the padding of the divider.\n *\n * @example\n * ```html\n * <wc-divider style=\"width: 12rem;\">or</wc-divider>\n * ```\n * @tags display\n */\n@IndividualComponent\nexport class Divider extends LitElement {\n  static styles = [styles];\n\n  /** When true, renders the divider vertically. Defaults to horizontal. */\n  @property({ type: Boolean, reflect: true }) vertical = false;\n\n  /** True when the default slot contains content, used to show the label variant. */\n  @state()\n  slotHasContent = false;\n\n  firstUpdated() {\n    observerSlotChangesWithCallback(\n      this.renderRoot.querySelector('slot'),\n      hasContent => {\n        this.slotHasContent = hasContent;\n        this.requestUpdate();\n      },\n    );\n  }\n\n  render() {\n    return html`<div\n      class=${classMap({\n        divider: true,\n        vertical: this.vertical,\n        'slot-has-content': this.slotHasContent,\n      })}\n    >\n      <div class=\"line\"></div>\n      <div class=\"slot-container\">\n        <slot></slot>\n      </div>\n      <div class=\"line\"></div>\n    </div>`;\n  }\n}\n"],"names":["LitElement","html","classMap","styles","property","state"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA;;;;;;;;;;;;;;;;;;AAkBG;AAEI,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQA,GAAU,CAAA;AAAhC,IAAA,WAAA,GAAA;;;QAIuC,IAAA,CAAA,QAAQ,GAAG,KAAK;;QAI5D,IAAA,CAAA,cAAc,GAAG,KAAK;IA2BxB;IAzBE,YAAY,GAAA;AACV,QAAA,+BAA+B,CAC7B,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,EACrC,UAAU,IAAG;AACX,YAAA,IAAI,CAAC,cAAc,GAAG,UAAU;YAChC,IAAI,CAAC,aAAa,EAAE;AACtB,QAAA,CAAC,CACF;IACH;IAEA,MAAM,GAAA;AACJ,QAAA,OAAOC,CAAI,CAAA,CAAA;AACD,YAAA,EAAAC,CAAQ,CAAC;AACf,YAAA,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,kBAAkB,EAAE,IAAI,CAAC,cAAc;SACxC,CAAC;;;;;;;WAOG;IACT;;AAjCO,OAAA,CAAA,MAAM,GAAG,CAACC,QAAM,CAAC;AAGoB,UAAA,CAAA;IAA3CC,CAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;AAAmB,CAAA,EAAA,OAAA,CAAA,SAAA,EAAA,UAAA,EAAA,MAAA,CAAA;AAI7D,UAAA,CAAA;AADC,IAAAC,CAAK;AACiB,CAAA,EAAA,OAAA,CAAA,SAAA,EAAA,gBAAA,EAAA,MAAA,CAAA;AARZ,OAAO,GAAA,UAAA,CAAA;IADnB;AACY,CAAA,EAAA,OAAO,CAmCnB;;;;"}

package/dist/dropdown-button.js

@@ -8,6 +8,7 @@ import './directive-ZPhl09Yt.js';
 
 var css_248z = i`* {
   box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
 }
 
 .screen-reader-only {

package/dist/dropdown-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-button.js","sources":["../../src/dropdown-button/dropdown-button.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport IndividualComponent from '@/IndividualComponent.js';\nimport styles from './dropdown-button.scss';\n\n/**\n * @label Dropdown Button\n * @tag wc-dropdown-button\n * @rawTag dropdown-button\n *\n * @summary A button that opens a dropdown menu when clicked.\n * @overview\n * <p>The dropdown button combines a single button with a dropdown menu. Clicking the button toggles a menu of actions or options. It follows M3 Material Design, keeping a compact control while exposing related actions on demand.</p>\n *\n * @cssprop --dropdown-button-container-shape: Defines the border radius of the dropdown button container shape.\n *\n * @fires {CustomEvent} toggle-menu - Dispatched when the dropdown menu is opened or closed.\n *\n * @example\n * ```html\n * <wc-dropdown-button>\n *   Actions\n *   <wc-menu-item slot=\"menu\">Edit</wc-menu-item>\n *   <wc-menu-item slot=\"menu\">Delete</wc-menu-item>\n * </wc-dropdown-button>\n * ```\n * @tags controls\n */\n@IndividualComponent\nexport class DropdownButton extends LitElement {\n  static override styles = [styles];\n\n  /**\n   * Button size.\n   * Possible values are `\"xs\"`, `\"sm\"`, `\"md\"`, `\"lg\"`, `\"xl\"`. Defaults to `\"sm\"`.\n   */\n  @property({ reflect: true }) size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'sm';\n\n  /**\n   * The visual style of the dropdown 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 an elevated button.\n   */\n  @property({ reflect: true }) variant:\n    | 'elevated'\n    | 'filled'\n    | 'tonal'\n    | 'outlined'\n    | 'text' = 'filled';\n\n  /**\n   * Defines the primary color of the dropdown button.\n   */\n  @property({ reflect: true }) color:\n    | 'primary'\n    | 'secondary'\n    | 'tertiary'\n    | 'success'\n    | 'danger'\n    | 'warning'\n    | 'surface'\n    | 'on-surface' = 'primary';\n\n  /**\n   * Whether the dropdown button is disabled.\n   */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /**\n   * Menu placement relative to the button.\n   * Possible values are `\"bottom-start\"`, `\"bottom-end\"`, `\"top-start\"`, `\"top-end\"`. Defaults to `\"bottom-start\"`.\n   */\n  @property({ reflect: true }) placement:\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'top-start'\n    | 'top-end' = 'bottom-start';\n\n  @state() private _menuOpen = false;\n\n  @query('.trigger-button') private readonly _triggerButton!: HTMLElement & {\n    focus: () => void;\n  };\n\n  @query('wc-menu') private readonly _menu!: HTMLElement & {\n    open: boolean;\n    anchorElement: HTMLElement | null;\n    show: () => void;\n    close: () => void;\n    focus: () => void;\n  };\n\n  private _menuId = `dropdown-menu-${Math.random().toString(36).slice(2, 9)}`;\n\n  override focus() {\n    this._triggerButton?.focus();\n  }\n\n  private _onButtonClick(event: MouseEvent) {\n    event.stopPropagation();\n    if (this.disabled) return;\n\n    if (this._menuOpen) {\n      this._menu?.close();\n    } else {\n      this._menu.anchorElement = this;\n      this._menu?.show();\n    }\n  }\n\n  private _onMenuOpened = () => {\n    this._menuOpen = true;\n    this.dispatchEvent(\n      new CustomEvent('toggle-menu', {\n        detail: { open: true },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  };\n\n  private _onMenuClosed = () => {\n    this._menuOpen = false;\n    this.dispatchEvent(\n      new CustomEvent('toggle-menu', {\n        detail: { open: false },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  };\n\n  private _onKeyDown = (event: KeyboardEvent) => {\n    if (this.disabled) return;\n\n    if (event.key === 'ArrowDown' && !this._menuOpen) {\n      event.preventDefault();\n      this._menu.anchorElement = this;\n      this._menu?.show();\n      requestAnimationFrame(() => this._menu?.focus());\n    }\n\n    if (event.key === 'Escape' && this._menuOpen) {\n      this._menu?.close();\n      this._triggerButton?.focus();\n    }\n  };\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('keydown', this._onKeyDown);\n  }\n\n  override disconnectedCallback() {\n    this.removeEventListener('keydown', this._onKeyDown);\n    super.disconnectedCallback();\n  }\n\n  override render() {\n    const buttonClasses = {\n      'trigger-button': true,\n      active: this._menuOpen,\n      disabled: this.disabled,\n    };\n\n    return html`\n      <wc-button\n        class=${classMap(buttonClasses)}\n        size=${this.size}\n        variant=${this.variant}\n        color=${this.color}\n        trailing-icon\n        ?disabled=${this.disabled}\n        .configAria=${{\n          'aria-haspopup': 'menu',\n          'aria-expanded': String(this._menuOpen),\n          'aria-controls': this._menuId,\n        }}\n        @click=${this._onButtonClick}\n      >\n        <slot></slot>\n        <wc-icon\n          slot=\"icon\"\n          name=\"arrow_drop_down\"\n          class=\"dropdown-icon\"\n          aria-hidden=\"true\"\n        ></wc-icon>\n      </wc-button>\n\n      <wc-menu\n        id=${this._menuId}\n        placement=${this.placement}\n        @opened=${this._onMenuOpened}\n        @closed=${this._onMenuClosed}\n      >\n        <slot name=\"menu\"></slot>\n      </wc-menu>\n    `;\n  }\n}\n"],"names":["LitElement","html","classMap","styles","property","state","query"],"mappings":"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"}
+{"version":3,"file":"dropdown-button.js","sources":["../../src/dropdown-button/dropdown-button.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport IndividualComponent from '@/IndividualComponent.js';\nimport styles from './dropdown-button.scss';\n\n/**\n * @label Dropdown Button\n * @tag wc-dropdown-button\n * @rawTag dropdown-button\n *\n * @summary A button that opens a dropdown menu when clicked.\n * @overview\n * <p>The dropdown button combines a single button with a dropdown menu. Clicking the button toggles a menu of actions or options. It follows M3 Material Design, keeping a compact control while exposing related actions on demand.</p>\n *\n * @cssprop --dropdown-button-container-shape: Defines the border radius of the dropdown button container shape.\n *\n * @fires {CustomEvent} toggle-menu - Dispatched when the dropdown menu is opened or closed.\n *\n * @example\n * ```html\n * <wc-dropdown-button>\n *   Actions\n *   <wc-menu-item slot=\"menu\">Edit</wc-menu-item>\n *   <wc-menu-item slot=\"menu\">Delete</wc-menu-item>\n * </wc-dropdown-button>\n * ```\n * @tags controls\n */\n@IndividualComponent\nexport class DropdownButton extends LitElement {\n  static override styles = [styles];\n\n  /**\n   * Button size.\n   * Possible values are `\"xs\"`, `\"sm\"`, `\"md\"`, `\"lg\"`, `\"xl\"`. Defaults to `\"sm\"`.\n   */\n  @property({ reflect: true }) size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'sm';\n\n  /**\n   * The visual style of the dropdown 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 an elevated button.\n   */\n  @property({ reflect: true }) variant:\n    | 'elevated'\n    | 'filled'\n    | 'tonal'\n    | 'outlined'\n    | 'text' = 'filled';\n\n  /**\n   * Defines the primary color of the dropdown button.\n   */\n  @property({ reflect: true }) color:\n    | 'primary'\n    | 'secondary'\n    | 'tertiary'\n    | 'success'\n    | 'danger'\n    | 'warning'\n    | 'surface'\n    | 'on-surface' = 'primary';\n\n  /**\n   * Whether the dropdown button is disabled.\n   */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /**\n   * Menu placement relative to the button.\n   * Possible values are `\"bottom-start\"`, `\"bottom-end\"`, `\"top-start\"`, `\"top-end\"`. Defaults to `\"bottom-start\"`.\n   */\n  @property({ reflect: true }) placement:\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'top-start'\n    | 'top-end' = 'bottom-start';\n\n  @state() private _menuOpen = false;\n\n  @query('.trigger-button') private readonly _triggerButton!: HTMLElement & {\n    focus: () => void;\n  };\n\n  @query('wc-menu') private readonly _menu!: HTMLElement & {\n    open: boolean;\n    anchorElement: HTMLElement | null;\n    show: () => void;\n    close: () => void;\n    focus: () => void;\n  };\n\n  private _menuId = `dropdown-menu-${Math.random().toString(36).slice(2, 9)}`;\n\n  override focus() {\n    this._triggerButton?.focus();\n  }\n\n  private _onButtonClick(event: MouseEvent) {\n    event.stopPropagation();\n    if (this.disabled) return;\n\n    if (this._menuOpen) {\n      this._menu?.close();\n    } else {\n      this._menu.anchorElement = this;\n      this._menu?.show();\n    }\n  }\n\n  private _onMenuOpened = () => {\n    this._menuOpen = true;\n    this.dispatchEvent(\n      new CustomEvent('toggle-menu', {\n        detail: { open: true },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  };\n\n  private _onMenuClosed = () => {\n    this._menuOpen = false;\n    this.dispatchEvent(\n      new CustomEvent('toggle-menu', {\n        detail: { open: false },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  };\n\n  private _onKeyDown = (event: KeyboardEvent) => {\n    if (this.disabled) return;\n\n    if (event.key === 'ArrowDown' && !this._menuOpen) {\n      event.preventDefault();\n      this._menu.anchorElement = this;\n      this._menu?.show();\n      requestAnimationFrame(() => this._menu?.focus());\n    }\n\n    if (event.key === 'Escape' && this._menuOpen) {\n      this._menu?.close();\n      this._triggerButton?.focus();\n    }\n  };\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('keydown', this._onKeyDown);\n  }\n\n  override disconnectedCallback() {\n    this.removeEventListener('keydown', this._onKeyDown);\n    super.disconnectedCallback();\n  }\n\n  override render() {\n    const buttonClasses = {\n      'trigger-button': true,\n      active: this._menuOpen,\n      disabled: this.disabled,\n    };\n\n    return html`\n      <wc-button\n        class=${classMap(buttonClasses)}\n        size=${this.size}\n        variant=${this.variant}\n        color=${this.color}\n        trailing-icon\n        ?disabled=${this.disabled}\n        .configAria=${{\n          'aria-haspopup': 'menu',\n          'aria-expanded': String(this._menuOpen),\n          'aria-controls': this._menuId,\n        }}\n        @click=${this._onButtonClick}\n      >\n        <slot></slot>\n        <wc-icon\n          slot=\"icon\"\n          name=\"arrow_drop_down\"\n          class=\"dropdown-icon\"\n          aria-hidden=\"true\"\n        ></wc-icon>\n      </wc-button>\n\n      <wc-menu\n        id=${this._menuId}\n        placement=${this.placement}\n        @opened=${this._onMenuOpened}\n        @closed=${this._onMenuClosed}\n      >\n        <slot name=\"menu\"></slot>\n      </wc-menu>\n    `;\n  }\n}\n"],"names":["LitElement","html","classMap","styles","property","state","query"],"mappings":"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"}

package/dist/elevation.js

@@ -2,6 +2,7 @@ import { i, _ as __decorate, I as IndividualComponent, a as i$1, b } from './Ind
 
 var css_248z = i`* {
   box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
 }
 
 .screen-reader-only {

package/dist/elevation.js.map

@@ -1 +1 @@
-{"version":3,"file":"elevation.js","sources":["../../src/elevation/elevation.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport styles from './elevation.scss';\nimport IndividualComponent from '@/IndividualComponent.js';\n\n/**\n * @label Elevation\n * @tag wc-elevation\n * @rawTag elevation\n *\n * @summary Adds elevation to an element.\n * @overview\n *  - Elevation adds a shadow effect to an element to give it depth.\n *  - It can be used to create a sense of hierarchy or to draw attention to a particular element.\n *\n * @cssprop --elevation-level - Controls the elevation level of the shadow.\n * @cssprop --elevation-color - Controls the color of the shadow.\n *\n * @example\n * ```html\n *   <div style=\"position: relative; padding: var(--spacing-200);\">\n *     <wc-elevation style='--elevation-level: 2; --elevation-container-shape: var(--shape-corner-extra-small);'></wc-elevation>\n *     Level 2\n *   </div>\n * ```\n * @tags display\n */\n@IndividualComponent\nexport class Elevation extends LitElement {\n  static styles = [styles];\n\n  render() {\n    return html`<span class=\"shadow\"></span>`;\n  }\n}\n"],"names":["LitElement","html","styles"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA;;;;;;;;;;;;;;;;;;;;;AAqBG;AAEI,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQA,GAAU,CAAA;IAGvC,MAAM,GAAA;QACJ,OAAOC,CAAI,CAAA,CAAA,4BAAA,CAA8B;IAC3C;;AAJO,SAAA,CAAA,MAAM,GAAG,CAACC,QAAM,CAAC;AADb,SAAS,GAAA,UAAA,CAAA;IADrB;AACY,CAAA,EAAA,SAAS,CAMrB;;;;"}
+{"version":3,"file":"elevation.js","sources":["../../src/elevation/elevation.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport styles from './elevation.scss';\nimport IndividualComponent from '@/IndividualComponent.js';\n\n/**\n * @label Elevation\n * @tag wc-elevation\n * @rawTag elevation\n *\n * @summary Adds elevation to an element.\n * @overview\n *  - Elevation adds a shadow effect to an element to give it depth.\n *  - It can be used to create a sense of hierarchy or to draw attention to a particular element.\n *\n * @cssprop --elevation-level - Controls the elevation level of the shadow.\n * @cssprop --elevation-color - Controls the color of the shadow.\n *\n * @example\n * ```html\n *   <div style=\"position: relative; padding: var(--spacing-200);\">\n *     <wc-elevation style='--elevation-level: 2; --elevation-container-shape: var(--shape-corner-extra-small);'></wc-elevation>\n *     Level 2\n *   </div>\n * ```\n * @tags display\n */\n@IndividualComponent\nexport class Elevation extends LitElement {\n  static styles = [styles];\n\n  render() {\n    return html`<span class=\"shadow\"></span>`;\n  }\n}\n"],"names":["LitElement","html","styles"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA;;;;;;;;;;;;;;;;;;;;;AAqBG;AAEI,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQA,GAAU,CAAA;IAGvC,MAAM,GAAA;QACJ,OAAOC,CAAI,CAAA,CAAA,4BAAA,CAA8B;IAC3C;;AAJO,SAAA,CAAA,MAAM,GAAG,CAACC,QAAM,CAAC;AADb,SAAS,GAAA,UAAA,CAAA;IADrB;AACY,CAAA,EAAA,SAAS,CAMrB;;;;"}

package/dist/empty-state.js

@@ -6,6 +6,7 @@ import './directive-ZPhl09Yt.js';
 
 var css_248z = i`* {
   box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
 }
 
 .screen-reader-only {

package/dist/empty-state.js.map

@@ -1 +1 @@
-{"version":3,"file":"empty-state.js","sources":["../../src/empty-state/empty-state.ts"],"sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport styles from './empty-state.scss';\nimport IndividualComponent from '@/IndividualComponent.js';\n\n/**\n * @label Empty State\n * @tag wc-empty-state\n * @rawTag empty-state\n * @summary A message that displays when there is no information to display.\n * @tags display\n *\n * @example\n * ```html\n * <wc-empty-state style=\"width:100%\" headline=\"No items found\"></wc-empty-state>\n * ```\n */\n@IndividualComponent\nexport class EmptyState extends LitElement {\n  // Lit handles styles in a static property for better performance\n  static styles = [styles];\n\n  @property({ type: String, reflect: true })\n  illustration: 'no-document' | 'page' | 'search' = 'no-document';\n\n  @property({ type: String, reflect: true })\n  headline = '';\n\n  @property({ type: String, reflect: true })\n  description = '';\n\n  /** True when the component width is below 768px; triggers a stacked layout. */\n  @state()\n  private vertical = false;\n\n  connectedCallback() {\n    // eslint-disable-next-line wc/guard-super-call\n    super.connectedCallback();\n    window.addEventListener('resize', this.handleResize);\n    // Initial check\n    this.handleResize();\n  }\n\n  disconnectedCallback() {\n    window.removeEventListener('resize', this.handleResize);\n    // eslint-disable-next-line wc/guard-super-call\n    super.disconnectedCallback();\n  }\n\n  private handleResize = () => {\n    // Logic equivalent to Stencil's clientWidth check\n    this.vertical = this.offsetWidth < 768;\n  };\n\n  __renderTitle() {\n    if (!this.headline) return nothing;\n    return html`<div class=\"headline\">${this.headline}</div>`;\n  }\n\n  __renderDescription() {\n    if (!this.description) return nothing;\n    return html`<div class=\"description\">${this.description}</div>`;\n  }\n\n  protected render() {\n    const classes = {\n      'empty-state': true,\n      vertical: this.vertical,\n    };\n\n    // Resolving asset paths in Lit typically uses import.meta.url or absolute paths\n    const illustrationPath = new URL(\n      `./assets/images/empty-state/${this.illustration}.svg`,\n      import.meta.url,\n    ).href;\n\n    return html`\n      <div class=\"${classMap(classes)}\">\n        <div class=\"empty-state-container\">\n          <div class=\"illustration\">\n            <wc-icon class=\"illustration-svg\" src=\"${illustrationPath}\"></wc-icon>\n          </div>\n\n          <div class=\"content\">\n            ${this.__renderTitle()} ${this.__renderDescription()}\n            <div class=\"actions\">\n              <slot name=\"actions\"></slot>\n            </div>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","nothing","html","classMap","styles","property","state"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA;;;;;;;;;;;AAWG;AAEI,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQA,GAAU,CAAA;AAAnC,IAAA,WAAA,GAAA;;QAKL,IAAA,CAAA,YAAY,GAAsC,aAAa;QAG/D,IAAA,CAAA,QAAQ,GAAG,EAAE;QAGb,IAAA,CAAA,WAAW,GAAG,EAAE;;QAIR,IAAA,CAAA,QAAQ,GAAG,KAAK;QAgBhB,IAAA,CAAA,YAAY,GAAG,MAAK;;YAE1B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,WAAW,GAAG,GAAG;AACxC,QAAA,CAAC;IAyCH;IA1DE,iBAAiB,GAAA;;QAEf,KAAK,CAAC,iBAAiB,EAAE;QACzB,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC;;QAEpD,IAAI,CAAC,YAAY,EAAE;IACrB;IAEA,oBAAoB,GAAA;QAClB,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC;;QAEvD,KAAK,CAAC,oBAAoB,EAAE;IAC9B;IAOA,aAAa,GAAA;QACX,IAAI,CAAC,IAAI,CAAC,QAAQ;AAAE,YAAA,OAAOC,CAAO;AAClC,QAAA,OAAOC,CAAI,CAAA,CAAA,sBAAA,EAAyB,IAAI,CAAC,QAAQ,QAAQ;IAC3D;IAEA,mBAAmB,GAAA;QACjB,IAAI,CAAC,IAAI,CAAC,WAAW;AAAE,YAAA,OAAOD,CAAO;AACrC,QAAA,OAAOC,CAAI,CAAA,CAAA,yBAAA,EAA4B,IAAI,CAAC,WAAW,QAAQ;IACjE;IAEU,MAAM,GAAA;AACd,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,aAAa,EAAE,IAAI;YACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB;;AAGD,QAAA,MAAM,gBAAgB,GAAG,IAAI,GAAG,CAC9B,CAAA,4BAAA,EAA+B,IAAI,CAAC,YAAY,MAAM,EACtD,MAAM,CAAC,IAAI,CAAC,GAAG,CAChB,CAAC,IAAI;AAEN,QAAA,OAAOA,CAAI,CAAA;oBACKC,CAAQ,CAAC,OAAO,CAAC,CAAA;;;qDAGgB,gBAAgB,CAAA;;;;AAIvD,YAAA,EAAA,IAAI,CAAC,aAAa,EAAE,IAAI,IAAI,CAAC,mBAAmB,EAAE;;;;;;;KAO3D;IACH;;AAzEA;AACO,UAAA,CAAA,MAAM,GAAG,CAACC,QAAM,CAAC;AAGxB,UAAA,CAAA;IADCC,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;AACuB,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,cAAA,EAAA,MAAA,CAAA;AAGhE,UAAA,CAAA;IADCA,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;AAC3B,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,UAAA,EAAA,MAAA,CAAA;AAGd,UAAA,CAAA;IADCA,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;AACxB,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,aAAA,EAAA,MAAA,CAAA;AAIT,UAAA,CAAA;AADP,IAAAC,CAAK;AACmB,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,UAAA,EAAA,MAAA,CAAA;AAfd,UAAU,GAAA,UAAA,CAAA;IADtB;AACY,CAAA,EAAA,UAAU,CA2EtB;;;;"}
+{"version":3,"file":"empty-state.js","sources":["../../src/empty-state/empty-state.ts"],"sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport styles from './empty-state.scss';\nimport IndividualComponent from '@/IndividualComponent.js';\n\n/**\n * @label Empty State\n * @tag wc-empty-state\n * @rawTag empty-state\n * @summary A message that displays when there is no information to display.\n * @tags display\n *\n * @example\n * ```html\n * <wc-empty-state style=\"width:100%\" headline=\"No items found\"></wc-empty-state>\n * ```\n */\n@IndividualComponent\nexport class EmptyState extends LitElement {\n  // Lit handles styles in a static property for better performance\n  static styles = [styles];\n\n  @property({ type: String, reflect: true })\n  illustration: 'no-document' | 'page' | 'search' = 'no-document';\n\n  @property({ type: String, reflect: true })\n  headline = '';\n\n  @property({ type: String, reflect: true })\n  description = '';\n\n  /** True when the component width is below 768px; triggers a stacked layout. */\n  @state()\n  private vertical = false;\n\n  connectedCallback() {\n    // eslint-disable-next-line wc/guard-super-call\n    super.connectedCallback();\n    window.addEventListener('resize', this.handleResize);\n    // Initial check\n    this.handleResize();\n  }\n\n  disconnectedCallback() {\n    window.removeEventListener('resize', this.handleResize);\n    // eslint-disable-next-line wc/guard-super-call\n    super.disconnectedCallback();\n  }\n\n  private handleResize = () => {\n    // Logic equivalent to Stencil's clientWidth check\n    this.vertical = this.offsetWidth < 768;\n  };\n\n  __renderTitle() {\n    if (!this.headline) return nothing;\n    return html`<div class=\"headline\">${this.headline}</div>`;\n  }\n\n  __renderDescription() {\n    if (!this.description) return nothing;\n    return html`<div class=\"description\">${this.description}</div>`;\n  }\n\n  protected render() {\n    const classes = {\n      'empty-state': true,\n      vertical: this.vertical,\n    };\n\n    // Resolving asset paths in Lit typically uses import.meta.url or absolute paths\n    const illustrationPath = new URL(\n      `./assets/images/empty-state/${this.illustration}.svg`,\n      import.meta.url,\n    ).href;\n\n    return html`\n      <div class=\"${classMap(classes)}\">\n        <div class=\"empty-state-container\">\n          <div class=\"illustration\">\n            <wc-icon class=\"illustration-svg\" src=\"${illustrationPath}\"></wc-icon>\n          </div>\n\n          <div class=\"content\">\n            ${this.__renderTitle()} ${this.__renderDescription()}\n            <div class=\"actions\">\n              <slot name=\"actions\"></slot>\n            </div>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","nothing","html","classMap","styles","property","state"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA;;;;;;;;;;;AAWG;AAEI,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQA,GAAU,CAAA;AAAnC,IAAA,WAAA,GAAA;;QAKL,IAAA,CAAA,YAAY,GAAsC,aAAa;QAG/D,IAAA,CAAA,QAAQ,GAAG,EAAE;QAGb,IAAA,CAAA,WAAW,GAAG,EAAE;;QAIR,IAAA,CAAA,QAAQ,GAAG,KAAK;QAgBhB,IAAA,CAAA,YAAY,GAAG,MAAK;;YAE1B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,WAAW,GAAG,GAAG;AACxC,QAAA,CAAC;IAyCH;IA1DE,iBAAiB,GAAA;;QAEf,KAAK,CAAC,iBAAiB,EAAE;QACzB,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC;;QAEpD,IAAI,CAAC,YAAY,EAAE;IACrB;IAEA,oBAAoB,GAAA;QAClB,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC;;QAEvD,KAAK,CAAC,oBAAoB,EAAE;IAC9B;IAOA,aAAa,GAAA;QACX,IAAI,CAAC,IAAI,CAAC,QAAQ;AAAE,YAAA,OAAOC,CAAO;AAClC,QAAA,OAAOC,CAAI,CAAA,CAAA,sBAAA,EAAyB,IAAI,CAAC,QAAQ,QAAQ;IAC3D;IAEA,mBAAmB,GAAA;QACjB,IAAI,CAAC,IAAI,CAAC,WAAW;AAAE,YAAA,OAAOD,CAAO;AACrC,QAAA,OAAOC,CAAI,CAAA,CAAA,yBAAA,EAA4B,IAAI,CAAC,WAAW,QAAQ;IACjE;IAEU,MAAM,GAAA;AACd,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,aAAa,EAAE,IAAI;YACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB;;AAGD,QAAA,MAAM,gBAAgB,GAAG,IAAI,GAAG,CAC9B,CAAA,4BAAA,EAA+B,IAAI,CAAC,YAAY,MAAM,EACtD,MAAM,CAAC,IAAI,CAAC,GAAG,CAChB,CAAC,IAAI;AAEN,QAAA,OAAOA,CAAI,CAAA;oBACKC,CAAQ,CAAC,OAAO,CAAC,CAAA;;;qDAGgB,gBAAgB,CAAA;;;;AAIvD,YAAA,EAAA,IAAI,CAAC,aAAa,EAAE,IAAI,IAAI,CAAC,mBAAmB,EAAE;;;;;;;KAO3D;IACH;;AAzEA;AACO,UAAA,CAAA,MAAM,GAAG,CAACC,QAAM,CAAC;AAGxB,UAAA,CAAA;IADCC,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;AACuB,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,cAAA,EAAA,MAAA,CAAA;AAGhE,UAAA,CAAA;IADCA,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;AAC3B,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,UAAA,EAAA,MAAA,CAAA;AAGd,UAAA,CAAA;IADCA,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;AACxB,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,aAAA,EAAA,MAAA,CAAA;AAIT,UAAA,CAAA;AADP,IAAAC,CAAK;AACmB,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,UAAA,EAAA,MAAA,CAAA;AAfd,UAAU,GAAA,UAAA,CAAA;IADtB;AACY,CAAA,EAAA,UAAU,CA2EtB;;;;"}