@redvars/peacock 3.8.3 → 3.8.5

package/dist/code-highlighter.js

@@ -44,6 +44,7 @@ async function copyToClipboard(text) {
 
 var css_248z = i`* {
   box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
 }
 
 .screen-reader-only {

package/dist/code-highlighter.js.map

@@ -1 +1 @@
-{"version":3,"file":"code-highlighter.js","sources":["../../src/__internal/utils/copy-to-clipboard.ts","../../src/code-highlighter/code-highlighter.ts"],"sourcesContent":["function fallbackCopyTextToClipboard(text: string) {\n  const temporaryInput = document.createElement('textarea');\n  temporaryInput.value = text;\n\n  // Make the element non-visible but still in the DOM so it can be selected\n  temporaryInput.setAttribute('readonly', '');\n  temporaryInput.style.position = 'absolute';\n  temporaryInput.style.left = '-9999px';\n\n  document.body.appendChild(temporaryInput);\n  temporaryInput.select();\n\n  try {\n    document.execCommand('copy');\n  } catch (err) {\n    console.error('Fallback: Failed to copy text: ', err);\n  } finally {\n    document.body.removeChild(temporaryInput);\n  }\n}\n\nexport async function copyToClipboard(text: string) {\n  if (navigator.clipboard && navigator.clipboard.writeText) {\n    // Use the modern Clipboard API\n    try {\n      await navigator.clipboard.writeText(text);\n    } catch (err) {\n      console.error('Failed to copy text using Clipboard API: ', err);\n      // Fallback if API fails for some reason\n      fallbackCopyTextToClipboard(text);\n    }\n  } else {\n    // Use the fallback method for older browsers\n    fallbackCopyTextToClipboard(text);\n  }\n}\n","import { html, LitElement } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport type { BundledLanguage, ShikiTransformer } from 'shiki';\nimport IndividualComponent from '@/IndividualComponent.js';\nimport { copyToClipboard } from '@/__internal/utils/copy-to-clipboard.js';\nimport styles from './code-highlighter.scss';\n\n// Module-level promises – Rollup splits each import() specifier into a separate chunk.\n// Caching here prevents parallel loads when multiple instances initialise at the same time.\nlet _shiki: Promise<typeof import('shiki')> | null = null;\nlet _themes: Promise<\n  [\n    typeof import('@pierre/theme/pierre-dark'),\n    typeof import('@pierre/theme/pierre-light'),\n  ]\n> | null = null;\nlet _prettier: Promise<typeof import('prettier/standalone')> | null = null;\nlet _pluginBabel: Promise<typeof import('prettier/plugins/babel')> | null =\n  null;\nlet _pluginHtml: Promise<typeof import('prettier/plugins/html')> | null = null;\nlet _pluginPostcss: Promise<typeof import('prettier/plugins/postcss')> | null =\n  null;\nlet _pluginEstree: Promise<typeof import('prettier/plugins/estree')> | null =\n  null;\n\nconst loadShiki = () => (_shiki ??= import('shiki'));\n\nconst loadThemes = () =>\n  (_themes ??= Promise.all([\n    import('@pierre/theme/pierre-dark'),\n    import('@pierre/theme/pierre-light'),\n  ]));\n\nconst loadPrettier = () => (_prettier ??= import('prettier/standalone'));\nconst loadPluginBabel = () =>\n  (_pluginBabel ??= import('prettier/plugins/babel'));\nconst loadPluginHtml = () => (_pluginHtml ??= import('prettier/plugins/html'));\nconst loadPluginPostcss = () =>\n  (_pluginPostcss ??= import('prettier/plugins/postcss'));\nconst loadPluginEstree = () =>\n  (_pluginEstree ??= import('prettier/plugins/estree'));\n\nconst locale = {\n  loading: 'Loading code...',\n  copyToClipboard: 'Copy to clipboard',\n  copied: 'Copied',\n  copiedCode: 'Copied code',\n};\n\n/**\n * @label Code Highlighter\n * @tag wc-code-highlighter\n * @rawTag code-highlighter\n *\n * @summary A component that provides syntax highlighting for code snippets.\n *\n * @example\n * ```html\n * <wc-code-highlighter language=\"javascript\" style=\"height: 9rem\"><pre><code>\n *   function helloWorld() {\n *     console.log('Hello, world!');\n *   }</code></pre>\n * </wc-code-highlighter>\n * ```\n * @tags display\n */\n@IndividualComponent\nexport class CodeHighlighter extends LitElement {\n  static styles = [styles];\n\n  private static readonly COPY_FEEDBACK_DURATION = 3000;\n\n  @property({ type: String, reflect: true })\n  language: BundledLanguage = 'javascript';\n\n  @property({ attribute: 'line-numbers', type: Boolean, reflect: true })\n  lineNumbers: boolean = false;\n\n  @property({ type: String })\n  value: string = '';\n\n  @property({ type: Boolean, reflect: true })\n  format?: boolean = true;\n\n  @property({ type: Boolean })\n  hideCopy: boolean = false;\n\n  @state() private compiledCode: string | null = null;\n\n  @state() private _copied = false;\n\n  private parsedCode: string | null = null;\n\n  private _copyFeedbackTimeout: number | null = null;\n\n  async connectedCallback() {\n    // eslint-disable-next-line wc/guard-super-call\n    super.connectedCallback();\n  }\n\n  disconnectedCallback() {\n    if (this._copyFeedbackTimeout !== null) {\n      window.clearTimeout(this._copyFeedbackTimeout);\n      this._copyFeedbackTimeout = null;\n    }\n    super.disconnectedCallback();\n  }\n\n  firstUpdated() {\n    this.__highlightCode();\n  }\n\n  // eslint-disable-next-line class-methods-use-this\n  private decode(str: string) {\n    return str.replace(/&lt;/g, '<').replace(/&gt;/g, '>');\n  }\n\n  private async __highlightCode() {\n    let codeString = '';\n    if (this.value) {\n      codeString = this.value;\n    } else {\n      // Accessing light DOM children\n      const codeTag = this.querySelector('code');\n      if (codeTag) {\n        codeString = codeTag.innerHTML;\n      } else if (this.childNodes.length > 0) {\n        codeString = (this as HTMLElement).innerText;\n      }\n    }\n\n    codeString = this.decode(codeString);\n\n    if (this.format !== false) {\n      // eslint-disable-next-line default-case\n      switch (this.language) {\n        case 'javascript': {\n          const [prettier, pluginBabel, pluginEstree] = await Promise.all([\n            loadPrettier(),\n            loadPluginBabel(),\n            loadPluginEstree(),\n          ]);\n          codeString = await prettier.format(codeString, {\n            parser: 'babel',\n            plugins: [pluginBabel, pluginEstree],\n            bracketSameLine: true,\n            htmlWhitespaceSensitivity: 'ignore',\n          });\n          break;\n        }\n        case 'html': {\n          const [prettier, pluginHtml] = await Promise.all([\n            loadPrettier(),\n            loadPluginHtml(),\n          ]);\n          codeString = await prettier.format(codeString, {\n            parser: 'html',\n            plugins: [pluginHtml],\n            bracketSameLine: true,\n            htmlWhitespaceSensitivity: 'ignore',\n          });\n          break;\n        }\n        case 'css': {\n          const [prettier, pluginPostcss] = await Promise.all([\n            loadPrettier(),\n            loadPluginPostcss(),\n          ]);\n          codeString = await prettier.format(codeString, {\n            parser: 'css',\n            plugins: [pluginPostcss],\n          });\n          break;\n        }\n      }\n    }\n\n    this.parsedCode = codeString;\n\n    const transformers: ShikiTransformer[] = [];\n\n    // If line numbers are enabled, we inject a transformer\n    // that adds the 'line' class to every line node.\n    if (this.lineNumbers) {\n      transformers.push({\n        name: 'add-line-class',\n        line(node) {\n          // Shiki v1 helper to add classes to the AST\n          this.addClassToHast(node, 'line');\n        },\n      });\n    }\n\n    const [\n      { codeToHtml },\n      [{ default: pierreDark }, { default: pierreLight }],\n    ] = await Promise.all([loadShiki(), loadThemes()]);\n\n    this.compiledCode = await codeToHtml(codeString, {\n      lang: this.language,\n      themes: {\n        // @ts-ignore\n        light: pierreLight,\n        // @ts-ignore\n        dark: pierreDark,\n      },\n      transformers,\n    });\n  }\n\n  protected updated(changed: Map<PropertyKey, unknown>) {\n    // Only re-highlight when the source content or rendering options change,\n    // not on unrelated state updates like the copy-button feedback toggle.\n    if (\n      changed.has('value') ||\n      changed.has('language') ||\n      changed.has('lineNumbers') ||\n      changed.has('format')\n    ) {\n      this.__highlightCode();\n    }\n  }\n\n  private async __handleCopyClick() {\n    if (this.parsedCode == null) {\n      return;\n    }\n\n    await copyToClipboard(this.parsedCode);\n    this._copied = true;\n\n    if (this._copyFeedbackTimeout !== null) {\n      window.clearTimeout(this._copyFeedbackTimeout);\n    }\n\n    this._copyFeedbackTimeout = window.setTimeout(() => {\n      this._copied = false;\n      this._copyFeedbackTimeout = null;\n    }, CodeHighlighter.COPY_FEEDBACK_DURATION);\n  }\n\n  render() {\n    if (this.compiledCode === null) {\n      return html`\n        <div class=\"code-loader\">\n          <wc-circular-progress indeterminate></wc-circular-progress>\n          ${locale.loading}\n        </div>\n      `;\n    }\n\n    return html`\n      <div\n        class=${classMap({\n          'code-highlighter': true,\n          'line-numbers': this.lineNumbers,\n        })}\n      >\n        <div class=\"header\">\n          <div class=\"header-title\">\n            <slot name=\"title\">${this.language?.toUpperCase()}</slot>\n          </div>\n          <div class=\"header-actions\">\n            <wc-icon-button\n              color=${this._copied ? 'success' : 'surface'}\n              variant=\"text\"\n              size=\"xs\"\n              aria-label=${this._copied\n                ? locale.copied\n                : locale.copyToClipboard}\n              tooltip=${this._copied ? locale.copied : locale.copyToClipboard}\n              @click=${this.__handleCopyClick}\n            >\n              <wc-icon\n                name=${this._copied ? 'check' : 'content_copy'}\n              ></wc-icon>\n            </wc-icon-button>\n          </div>\n        </div>\n\n        <div class=\"scroll-wrapper\">\n          <div class=\"highlighter\">${unsafeHTML(this.compiledCode || '')}</div>\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","html","classMap","unsafeHTML","styles","property","state"],"mappings":"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"}
+{"version":3,"file":"code-highlighter.js","sources":["../../src/__internal/utils/copy-to-clipboard.ts","../../src/code-highlighter/code-highlighter.ts"],"sourcesContent":["function fallbackCopyTextToClipboard(text: string) {\n  const temporaryInput = document.createElement('textarea');\n  temporaryInput.value = text;\n\n  // Make the element non-visible but still in the DOM so it can be selected\n  temporaryInput.setAttribute('readonly', '');\n  temporaryInput.style.position = 'absolute';\n  temporaryInput.style.left = '-9999px';\n\n  document.body.appendChild(temporaryInput);\n  temporaryInput.select();\n\n  try {\n    document.execCommand('copy');\n  } catch (err) {\n    console.error('Fallback: Failed to copy text: ', err);\n  } finally {\n    document.body.removeChild(temporaryInput);\n  }\n}\n\nexport async function copyToClipboard(text: string) {\n  if (navigator.clipboard && navigator.clipboard.writeText) {\n    // Use the modern Clipboard API\n    try {\n      await navigator.clipboard.writeText(text);\n    } catch (err) {\n      console.error('Failed to copy text using Clipboard API: ', err);\n      // Fallback if API fails for some reason\n      fallbackCopyTextToClipboard(text);\n    }\n  } else {\n    // Use the fallback method for older browsers\n    fallbackCopyTextToClipboard(text);\n  }\n}\n","import { html, LitElement } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport type { BundledLanguage, ShikiTransformer } from 'shiki';\nimport IndividualComponent from '@/IndividualComponent.js';\nimport { copyToClipboard } from '@/__internal/utils/copy-to-clipboard.js';\nimport styles from './code-highlighter.scss';\n\n// Module-level promises – Rollup splits each import() specifier into a separate chunk.\n// Caching here prevents parallel loads when multiple instances initialise at the same time.\nlet _shiki: Promise<typeof import('shiki')> | null = null;\nlet _themes: Promise<\n  [\n    typeof import('@pierre/theme/pierre-dark'),\n    typeof import('@pierre/theme/pierre-light'),\n  ]\n> | null = null;\nlet _prettier: Promise<typeof import('prettier/standalone')> | null = null;\nlet _pluginBabel: Promise<typeof import('prettier/plugins/babel')> | null =\n  null;\nlet _pluginHtml: Promise<typeof import('prettier/plugins/html')> | null = null;\nlet _pluginPostcss: Promise<typeof import('prettier/plugins/postcss')> | null =\n  null;\nlet _pluginEstree: Promise<typeof import('prettier/plugins/estree')> | null =\n  null;\n\nconst loadShiki = () => (_shiki ??= import('shiki'));\n\nconst loadThemes = () =>\n  (_themes ??= Promise.all([\n    import('@pierre/theme/pierre-dark'),\n    import('@pierre/theme/pierre-light'),\n  ]));\n\nconst loadPrettier = () => (_prettier ??= import('prettier/standalone'));\nconst loadPluginBabel = () =>\n  (_pluginBabel ??= import('prettier/plugins/babel'));\nconst loadPluginHtml = () => (_pluginHtml ??= import('prettier/plugins/html'));\nconst loadPluginPostcss = () =>\n  (_pluginPostcss ??= import('prettier/plugins/postcss'));\nconst loadPluginEstree = () =>\n  (_pluginEstree ??= import('prettier/plugins/estree'));\n\nconst locale = {\n  loading: 'Loading code...',\n  copyToClipboard: 'Copy to clipboard',\n  copied: 'Copied',\n  copiedCode: 'Copied code',\n};\n\n/**\n * @label Code Highlighter\n * @tag wc-code-highlighter\n * @rawTag code-highlighter\n *\n * @summary A component that provides syntax highlighting for code snippets.\n *\n * @example\n * ```html\n * <wc-code-highlighter language=\"javascript\" style=\"height: 9rem\"><pre><code>\n *   function helloWorld() {\n *     console.log('Hello, world!');\n *   }</code></pre>\n * </wc-code-highlighter>\n * ```\n * @tags display\n */\n@IndividualComponent\nexport class CodeHighlighter extends LitElement {\n  static styles = [styles];\n\n  private static readonly COPY_FEEDBACK_DURATION = 3000;\n\n  @property({ type: String, reflect: true })\n  language: BundledLanguage = 'javascript';\n\n  @property({ attribute: 'line-numbers', type: Boolean, reflect: true })\n  lineNumbers: boolean = false;\n\n  @property({ type: String })\n  value: string = '';\n\n  @property({ type: Boolean, reflect: true })\n  format?: boolean = true;\n\n  @property({ type: Boolean })\n  hideCopy: boolean = false;\n\n  @state() private compiledCode: string | null = null;\n\n  @state() private _copied = false;\n\n  private parsedCode: string | null = null;\n\n  private _copyFeedbackTimeout: number | null = null;\n\n  async connectedCallback() {\n    // eslint-disable-next-line wc/guard-super-call\n    super.connectedCallback();\n  }\n\n  disconnectedCallback() {\n    if (this._copyFeedbackTimeout !== null) {\n      window.clearTimeout(this._copyFeedbackTimeout);\n      this._copyFeedbackTimeout = null;\n    }\n    super.disconnectedCallback();\n  }\n\n  firstUpdated() {\n    this.__highlightCode();\n  }\n\n  // eslint-disable-next-line class-methods-use-this\n  private decode(str: string) {\n    return str.replace(/&lt;/g, '<').replace(/&gt;/g, '>');\n  }\n\n  private async __highlightCode() {\n    let codeString = '';\n    if (this.value) {\n      codeString = this.value;\n    } else {\n      // Accessing light DOM children\n      const codeTag = this.querySelector('code');\n      if (codeTag) {\n        codeString = codeTag.innerHTML;\n      } else if (this.childNodes.length > 0) {\n        codeString = (this as HTMLElement).innerText;\n      }\n    }\n\n    codeString = this.decode(codeString);\n\n    if (this.format !== false) {\n      // eslint-disable-next-line default-case\n      switch (this.language) {\n        case 'javascript': {\n          const [prettier, pluginBabel, pluginEstree] = await Promise.all([\n            loadPrettier(),\n            loadPluginBabel(),\n            loadPluginEstree(),\n          ]);\n          codeString = await prettier.format(codeString, {\n            parser: 'babel',\n            plugins: [pluginBabel, pluginEstree],\n            bracketSameLine: true,\n            htmlWhitespaceSensitivity: 'ignore',\n          });\n          break;\n        }\n        case 'html': {\n          const [prettier, pluginHtml] = await Promise.all([\n            loadPrettier(),\n            loadPluginHtml(),\n          ]);\n          codeString = await prettier.format(codeString, {\n            parser: 'html',\n            plugins: [pluginHtml],\n            bracketSameLine: true,\n            htmlWhitespaceSensitivity: 'ignore',\n          });\n          break;\n        }\n        case 'css': {\n          const [prettier, pluginPostcss] = await Promise.all([\n            loadPrettier(),\n            loadPluginPostcss(),\n          ]);\n          codeString = await prettier.format(codeString, {\n            parser: 'css',\n            plugins: [pluginPostcss],\n          });\n          break;\n        }\n      }\n    }\n\n    this.parsedCode = codeString;\n\n    const transformers: ShikiTransformer[] = [];\n\n    // If line numbers are enabled, we inject a transformer\n    // that adds the 'line' class to every line node.\n    if (this.lineNumbers) {\n      transformers.push({\n        name: 'add-line-class',\n        line(node) {\n          // Shiki v1 helper to add classes to the AST\n          this.addClassToHast(node, 'line');\n        },\n      });\n    }\n\n    const [\n      { codeToHtml },\n      [{ default: pierreDark }, { default: pierreLight }],\n    ] = await Promise.all([loadShiki(), loadThemes()]);\n\n    this.compiledCode = await codeToHtml(codeString, {\n      lang: this.language,\n      themes: {\n        // @ts-ignore\n        light: pierreLight,\n        // @ts-ignore\n        dark: pierreDark,\n      },\n      transformers,\n    });\n  }\n\n  protected updated(changed: Map<PropertyKey, unknown>) {\n    // Only re-highlight when the source content or rendering options change,\n    // not on unrelated state updates like the copy-button feedback toggle.\n    if (\n      changed.has('value') ||\n      changed.has('language') ||\n      changed.has('lineNumbers') ||\n      changed.has('format')\n    ) {\n      this.__highlightCode();\n    }\n  }\n\n  private async __handleCopyClick() {\n    if (this.parsedCode == null) {\n      return;\n    }\n\n    await copyToClipboard(this.parsedCode);\n    this._copied = true;\n\n    if (this._copyFeedbackTimeout !== null) {\n      window.clearTimeout(this._copyFeedbackTimeout);\n    }\n\n    this._copyFeedbackTimeout = window.setTimeout(() => {\n      this._copied = false;\n      this._copyFeedbackTimeout = null;\n    }, CodeHighlighter.COPY_FEEDBACK_DURATION);\n  }\n\n  render() {\n    if (this.compiledCode === null) {\n      return html`\n        <div class=\"code-loader\">\n          <wc-circular-progress indeterminate></wc-circular-progress>\n          ${locale.loading}\n        </div>\n      `;\n    }\n\n    return html`\n      <div\n        class=${classMap({\n          'code-highlighter': true,\n          'line-numbers': this.lineNumbers,\n        })}\n      >\n        <div class=\"header\">\n          <div class=\"header-title\">\n            <slot name=\"title\">${this.language?.toUpperCase()}</slot>\n          </div>\n          <div class=\"header-actions\">\n            <wc-icon-button\n              color=${this._copied ? 'success' : 'surface'}\n              variant=\"text\"\n              size=\"xs\"\n              aria-label=${this._copied\n                ? locale.copied\n                : locale.copyToClipboard}\n              tooltip=${this._copied ? locale.copied : locale.copyToClipboard}\n              @click=${this.__handleCopyClick}\n            >\n              <wc-icon\n                name=${this._copied ? 'check' : 'content_copy'}\n              ></wc-icon>\n            </wc-icon-button>\n          </div>\n        </div>\n\n        <div class=\"scroll-wrapper\">\n          <div class=\"highlighter\">${unsafeHTML(this.compiledCode || '')}</div>\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","html","classMap","unsafeHTML","styles","property","state"],"mappings":"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"}

package/dist/condition-builder.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/condition-builder.js.map

@@ -1 +1 @@
-{"version":3,"file":"condition-builder.js","sources":["../../src/condition-builder/condition-builder.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport IndividualComponent from '@/IndividualComponent.js';\nimport styles from './condition-builder.scss';\n\n/**\n * @label Condition Builder\n * @tag wc-condition-builder\n * @rawTag condition-builder\n * @summary A condition builder component that allows users to construct complex filter conditions using a visual rule-based interface with predicates, compound expressions, and logical operators.\n * @tags condition-builder\n *\n * @example\n * ```html\n * <wc-condition-builder>\n *   <wc-cb-predicate condition-operator=\"or\">\n *     <wc-cb-predicate vertical condition-operator=\"and\">\n *       <wc-cb-compound-expression field-label=\"Age\" condition-operator=\"or\">\n *         <wc-cb-expression>\n *           <wc-input inline placeholder=\"Enter value\"></wc-input>\n *         </wc-cb-expression>\n *       </wc-cb-compound-expression>\n *     </wc-cb-predicate>\n *   </wc-cb-predicate>\n * </wc-condition-builder>\n * ```\n */\n@IndividualComponent\nexport class ConditionBuilder extends LitElement {\n  static styles = [styles];\n\n  render() {\n    return html`\n      <div class=\"condition-builder\">\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","html","styles"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAIA;;;;;;;;;;;;;;;;;;;;;AAqBG;AAEI,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQA,GAAU,CAAA;IAG9C,MAAM,GAAA;AACJ,QAAA,OAAOC,CAAI,CAAA;;;;KAIV;IACH;;AARO,gBAAA,CAAA,MAAM,GAAG,CAACC,QAAM,CAAC;AADb,gBAAgB,GAAA,UAAA,CAAA;IAD5B;AACY,CAAA,EAAA,gBAAgB,CAU5B;;;;"}
+{"version":3,"file":"condition-builder.js","sources":["../../src/condition-builder/condition-builder.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport IndividualComponent from '@/IndividualComponent.js';\nimport styles from './condition-builder.scss';\n\n/**\n * @label Condition Builder\n * @tag wc-condition-builder\n * @rawTag condition-builder\n * @summary A condition builder component that allows users to construct complex filter conditions using a visual rule-based interface with predicates, compound expressions, and logical operators.\n * @tags condition-builder\n *\n * @example\n * ```html\n * <wc-condition-builder>\n *   <wc-cb-predicate condition-operator=\"or\">\n *     <wc-cb-predicate vertical condition-operator=\"and\">\n *       <wc-cb-compound-expression field-label=\"Age\" condition-operator=\"or\">\n *         <wc-cb-expression>\n *           <wc-input inline placeholder=\"Enter value\"></wc-input>\n *         </wc-cb-expression>\n *       </wc-cb-compound-expression>\n *     </wc-cb-predicate>\n *   </wc-cb-predicate>\n * </wc-condition-builder>\n * ```\n */\n@IndividualComponent\nexport class ConditionBuilder extends LitElement {\n  static styles = [styles];\n\n  render() {\n    return html`\n      <div class=\"condition-builder\">\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","html","styles"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAIA;;;;;;;;;;;;;;;;;;;;;AAqBG;AAEI,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQA,GAAU,CAAA;IAG9C,MAAM,GAAA;AACJ,QAAA,OAAOC,CAAI,CAAA;;;;KAIV;IACH;;AARO,gBAAA,CAAA,MAAM,GAAG,CAACC,QAAM,CAAC;AADb,gBAAgB,GAAA,UAAA,CAAA;IAD5B;AACY,CAAA,EAAA,gBAAgB,CAU5B;;;;"}

package/dist/container.js

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

package/dist/container.js.map

@@ -1 +1 @@
-{"version":3,"file":"container.js","sources":["../../src/container/container.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport styles from './container.scss';\nimport IndividualComponent from '@/IndividualComponent.js';\n\ntype ContainerSize = 'max' | 'xl' | 'lg' | 'md' | 'sm' | 'full';\n\n/**\n * @label Container\n * @tag wc-container\n * @rawTag container\n * @summary A responsive container component for layout.\n * @cssprop --container-max-width - Controls the maximum width of the container.\n * @cssprop --container-padding - Controls the padding of the container.\n * @tags layout\n *\n * @example\n * ```html\n * <wc-container style=\"width: 80%; border: 1px dotted black;\" size=\"md\">Content</wc-container>\n * ```\n */\n@IndividualComponent\nexport class Container extends LitElement {\n  static styles = [styles];\n\n  /**\n   * Max-width breakpoint of the container.\n   * Possible values are `\"max\"`, `\"xl\"`, `\"lg\"`, `\"md\"`, `\"sm\"`, `\"full\"`. Defaults to `\"full\"`.\n   */\n  @property({ type: String, reflect: true })\n  size: ContainerSize = 'full';\n\n  render() {\n    const wrapperClasses = {\n      'container-wrapper': true,\n      [`size-${this.size}`]: true,\n    };\n\n    return html`\n      <div class=${classMap(wrapperClasses)}>\n        <div class=\"container\">\n          <div class=\"content\">\n            <slot></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}"],"names":["LitElement","html","classMap","styles","property"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA;;;;;;;;;;;;;AAaG;AAEI,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQA,GAAU,CAAA;AAAlC,IAAA,WAAA,GAAA;;AAGL;;;AAGG;QAEH,IAAA,CAAA,IAAI,GAAkB,MAAM;IAkB9B;IAhBE,MAAM,GAAA;AACJ,QAAA,MAAM,cAAc,GAAG;AACrB,YAAA,mBAAmB,EAAE,IAAI;AACzB,YAAA,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAA,CAAE,GAAG,IAAI;SAC5B;AAED,QAAA,OAAOC,CAAI,CAAA;mBACIC,CAAQ,CAAC,cAAc,CAAC,CAAA;;;;;;;KAOtC;IACH;;AAxBO,SAAA,CAAA,MAAM,GAAG,CAACC,QAAM,CAAC;AAOxB,UAAA,CAAA;IADCC,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;AACZ,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,MAAA,EAAA,MAAA,CAAA;AARlB,SAAS,GAAA,UAAA,CAAA;IADrB;AACY,CAAA,EAAA,SAAS,CA0BrB;;;;"}
+{"version":3,"file":"container.js","sources":["../../src/container/container.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport styles from './container.scss';\nimport IndividualComponent from '@/IndividualComponent.js';\n\ntype ContainerSize = 'max' | 'xl' | 'lg' | 'md' | 'sm' | 'full';\n\n/**\n * @label Container\n * @tag wc-container\n * @rawTag container\n * @summary A responsive container component for layout.\n * @cssprop --container-max-width - Controls the maximum width of the container.\n * @cssprop --container-padding - Controls the padding of the container.\n * @tags layout\n *\n * @example\n * ```html\n * <wc-container style=\"width: 80%; border: 1px dotted black;\" size=\"md\">Content</wc-container>\n * ```\n */\n@IndividualComponent\nexport class Container extends LitElement {\n  static styles = [styles];\n\n  /**\n   * Max-width breakpoint of the container.\n   * Possible values are `\"max\"`, `\"xl\"`, `\"lg\"`, `\"md\"`, `\"sm\"`, `\"full\"`. Defaults to `\"full\"`.\n   */\n  @property({ type: String, reflect: true })\n  size: ContainerSize = 'full';\n\n  render() {\n    const wrapperClasses = {\n      'container-wrapper': true,\n      [`size-${this.size}`]: true,\n    };\n\n    return html`\n      <div class=${classMap(wrapperClasses)}>\n        <div class=\"container\">\n          <div class=\"content\">\n            <slot></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}"],"names":["LitElement","html","classMap","styles","property"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA;;;;;;;;;;;;;AAaG;AAEI,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQA,GAAU,CAAA;AAAlC,IAAA,WAAA,GAAA;;AAGL;;;AAGG;QAEH,IAAA,CAAA,IAAI,GAAkB,MAAM;IAkB9B;IAhBE,MAAM,GAAA;AACJ,QAAA,MAAM,cAAc,GAAG;AACrB,YAAA,mBAAmB,EAAE,IAAI;AACzB,YAAA,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAA,CAAE,GAAG,IAAI;SAC5B;AAED,QAAA,OAAOC,CAAI,CAAA;mBACIC,CAAQ,CAAC,cAAc,CAAC,CAAA;;;;;;;KAOtC;IACH;;AAxBO,SAAA,CAAA,MAAM,GAAG,CAACC,QAAM,CAAC;AAOxB,UAAA,CAAA;IADCC,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;AACZ,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,MAAA,EAAA,MAAA,CAAA;AARlB,SAAS,GAAA,UAAA,CAAA;IADrB;AACY,CAAA,EAAA,SAAS,CA0BrB;;;;"}

package/dist/custom-elements-jsdocs.json

@@ -11,22 +11,31 @@
       "description": "",
       "attributes": [
         {
-          "name": "multi",
+          "name": "multiple",
           "type": {
             "text": "boolean"
           },
           "default": "false",
           "description": "Whether multiple panels can be expanded simultaneously.\nWhen `false` (default), expanding one panel collapses all others.",
-          "fieldName": "multi"
+          "fieldName": "multiple"
         },
         {
-          "name": "display-mode",
+          "name": "variant",
           "type": {
             "text": "'default' | 'flat'"
           },
           "default": "'default'",
-          "description": "Display mode for the accordion.\n`'default'` renders panels with a subtle background on expand and dividers between items.\n`'flat'` renders panels without borders or background changes — suitable for use inside cards.",
-          "fieldName": "displayMode"
+          "description": "Variant for the accordion.\n`'default'` renders panels with a subtle background on expand and dividers between items.\n`'flat'` renders panels without borders or background changes — suitable for use inside cards.",
+          "fieldName": "variant"
+        },
+        {
+          "name": "leading-toggle",
+          "type": {
+            "text": "boolean"
+          },
+          "default": "false",
+          "description": "When `true`, the toggle icon is placed at the leading start of the header.\nWhen `false` (default), the icon is placed at the trailing end.",
+          "fieldName": "leadingToggle"
         }
       ],
       "superclass": {
@@ -485,7 +494,7 @@
     "rawTag": "button",
     "summary": "Buttons help people initiate actions, from sending an email, to sharing a document, to liking a post.",
     "overview": "<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>",
-    "cssprop": "--neo-button-label-text-color: Text color of the neo button label.",
+    "cssprop": "--neo-button-label-text-color - Text color of the neo button label.",
     "fires": "click - Dispatched when the button is clicked.",
     "example": "```html\n<wc-button>Button</wc-button>\n```",
     "tags": "display",
@@ -495,67 +504,67 @@
       "cssProperties": [
         {
           "description": "Defines the border radius of the button container shape.",
-          "name": "--button-container-shape:"
+          "name": "--button-container-shape"
         },
         {
           "description": "Defines the start position of the button container shape.",
-          "name": "--button-container-shape-start-start:"
+          "name": "--button-container-shape-start-start"
         },
         {
           "description": "Defines the end position of the button container shape.",
-          "name": "--button-container-shape-start-end:"
+          "name": "--button-container-shape-start-end"
         },
         {
           "description": "Defines the start position of the button container shape.",
-          "name": "--button-container-shape-end-start:"
+          "name": "--button-container-shape-end-start"
         },
         {
           "description": "Defines the end position of the button container shape.",
-          "name": "--button-container-shape-end-end:"
+          "name": "--button-container-shape-end-end"
         },
         {
           "description": "Color of the filled button container.",
-          "name": "--filled-button-container-color:"
+          "name": "--filled-button-container-color"
         },
         {
           "description": "Text color of the filled button label.",
-          "name": "--filled-button-label-text-color:"
+          "name": "--filled-button-label-text-color"
         },
         {
           "description": "Color of the outlined button container.",
-          "name": "--outlined-button-container-color:"
+          "name": "--outlined-button-container-color"
         },
         {
           "description": "Text color of the outlined button label.",
-          "name": "--outlined-button-label-text-color:"
+          "name": "--outlined-button-label-text-color"
         },
         {
           "description": "Text color of the text button label.",
-          "name": "--text-button-label-text-color:"
+          "name": "--text-button-label-text-color"
         },
         {
           "description": "Color of the tonal button container.",
-          "name": "--tonal-button-container-color:"
+          "name": "--tonal-button-container-color"
         },
         {
           "description": "Text color of the tonal button label.",
-          "name": "--tonal-button-label-text-color:"
+          "name": "--tonal-button-label-text-color"
         },
         {
           "description": "Color of the elevated button container.",
-          "name": "--elevated-button-container-color:"
+          "name": "--elevated-button-container-color"
         },
         {
           "description": "Text color of the elevated button label.",
-          "name": "--elevated-button-label-text-color:"
+          "name": "--elevated-button-label-text-color"
         },
         {
           "description": "Color of the neo button container.",
-          "name": "--neo-button-container-color:"
+          "name": "--neo-button-container-color"
         },
         {
           "description": "Text color of the neo button label.",
-          "name": "--neo-button-label-text-color:"
+          "name": "--neo-button-label-text-color"
         }
       ],
       "events": [
@@ -574,7 +583,7 @@
             "text": "boolean"
           },
           "default": "false",
-          "description": "Icon alignment.\nPossible values are `\"start\"`, `\"end\"`. Defaults to `\"end\"`.",
+          "description": "When `true` (default), the icon is placed after the label (trailing).\nWhen `false`, the icon is placed before the label (leading).",
           "fieldName": "trailingIcon"
         },
         {

package/dist/custom-elements.json

@@ -2058,67 +2058,67 @@
           "cssProperties": [
             {
               "description": "Defines the border radius of the button container shape.",
-              "name": "--button-container-shape:"
+              "name": "--button-container-shape"
             },
             {
               "description": "Defines the start position of the button container shape.",
-              "name": "--button-container-shape-start-start:"
+              "name": "--button-container-shape-start-start"
             },
             {
               "description": "Defines the end position of the button container shape.",
-              "name": "--button-container-shape-start-end:"
+              "name": "--button-container-shape-start-end"
             },
             {
               "description": "Defines the start position of the button container shape.",
-              "name": "--button-container-shape-end-start:"
+              "name": "--button-container-shape-end-start"
             },
             {
               "description": "Defines the end position of the button container shape.",
-              "name": "--button-container-shape-end-end:"
+              "name": "--button-container-shape-end-end"
             },
             {
               "description": "Color of the filled button container.",
-              "name": "--filled-button-container-color:"
+              "name": "--filled-button-container-color"
             },
             {
               "description": "Text color of the filled button label.",
-              "name": "--filled-button-label-text-color:"
+              "name": "--filled-button-label-text-color"
             },
             {
               "description": "Color of the outlined button container.",
-              "name": "--outlined-button-container-color:"
+              "name": "--outlined-button-container-color"
             },
             {
               "description": "Text color of the outlined button label.",
-              "name": "--outlined-button-label-text-color:"
+              "name": "--outlined-button-label-text-color"
             },
             {
               "description": "Text color of the text button label.",
-              "name": "--text-button-label-text-color:"
+              "name": "--text-button-label-text-color"
             },
             {
               "description": "Color of the tonal button container.",
-              "name": "--tonal-button-container-color:"
+              "name": "--tonal-button-container-color"
             },
             {
               "description": "Text color of the tonal button label.",
-              "name": "--tonal-button-label-text-color:"
+              "name": "--tonal-button-label-text-color"
             },
             {
               "description": "Color of the elevated button container.",
-              "name": "--elevated-button-container-color:"
+              "name": "--elevated-button-container-color"
             },
             {
               "description": "Text color of the elevated button label.",
-              "name": "--elevated-button-label-text-color:"
+              "name": "--elevated-button-label-text-color"
             },
             {
               "description": "Color of the neo button container.",
-              "name": "--neo-button-container-color:"
+              "name": "--neo-button-container-color"
             },
             {
               "description": "Text color of the neo button label.",
-              "name": "--neo-button-label-text-color:"
+              "name": "--neo-button-label-text-color"
             }
           ],
           "members": [
@@ -2138,7 +2138,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Icon alignment.\nPossible values are `\"start\"`, `\"end\"`. Defaults to `\"end\"`.",
+              "description": "When `true` (default), the icon is placed after the label (trailing).\nWhen `false`, the icon is placed before the label (leading).",
               "attribute": "trailing-icon",
               "reflects": true
             },
@@ -2643,7 +2643,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Icon alignment.\nPossible values are `\"start\"`, `\"end\"`. Defaults to `\"end\"`.",
+              "description": "When `true` (default), the icon is placed after the label (trailing).\nWhen `false`, the icon is placed before the label (leading).",
               "fieldName": "trailingIcon"
             },
             {
@@ -6396,17 +6396,6 @@
               "attribute": "hide-toggle",
               "reflects": true
             },
-            {
-              "kind": "field",
-              "name": "togglePosition",
-              "type": {
-                "text": "'before' | 'after'"
-              },
-              "default": "'after'",
-              "description": "Position of the toggle icon relative to the panel title.\n`'after'` places it at the trailing end (default, matches M3).\n`'before'` places it at the leading start.",
-              "attribute": "toggle-position",
-              "reflects": true
-            },
             {
               "kind": "field",
               "name": "_hasDescriptionSlot",
@@ -6477,7 +6466,7 @@
           ],
           "events": [
             {
-              "name": "accordion-item:toggle",
+              "name": "accordion-item-toggle",
               "type": {
                 "text": "CustomEvent<{ open: boolean }>"
               },
@@ -6511,15 +6500,6 @@
               "default": "false",
               "description": "Whether to hide the expand/collapse toggle indicator icon.",
               "fieldName": "hideToggle"
-            },
-            {
-              "name": "toggle-position",
-              "type": {
-                "text": "'before' | 'after'"
-              },
-              "default": "'after'",
-              "description": "Position of the toggle icon relative to the panel title.\n`'after'` places it at the trailing end (default, matches M3).\n`'before'` places it at the leading start.",
-              "fieldName": "togglePosition"
             }
           ],
           "superclass": {
@@ -6557,24 +6537,35 @@
           "members": [
             {
               "kind": "field",
-              "name": "multi",
+              "name": "multiple",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Whether multiple panels can be expanded simultaneously.\nWhen `false` (default), expanding one panel collapses all others.",
-              "attribute": "multi",
+              "attribute": "multiple",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "displayMode",
+              "name": "variant",
               "type": {
                 "text": "'default' | 'flat'"
               },
               "default": "'default'",
-              "description": "Display mode for the accordion.\n`'default'` renders panels with a subtle background on expand and dividers between items.\n`'flat'` renders panels without borders or background changes — suitable for use inside cards.",
-              "attribute": "display-mode",
+              "description": "Variant for the accordion.\n`'default'` renders panels with a subtle background on expand and dividers between items.\n`'flat'` renders panels without borders or background changes — suitable for use inside cards.",
+              "attribute": "variant",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "leadingToggle",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "When `true`, the toggle icon is placed at the leading start of the header.\nWhen `false` (default), the icon is placed at the trailing end.",
+              "attribute": "leading-toggle",
               "reflects": true
             },
             {
@@ -6619,22 +6610,31 @@
           ],
           "attributes": [
             {
-              "name": "multi",
+              "name": "multiple",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Whether multiple panels can be expanded simultaneously.\nWhen `false` (default), expanding one panel collapses all others.",
-              "fieldName": "multi"
+              "fieldName": "multiple"
             },
             {
-              "name": "display-mode",
+              "name": "variant",
               "type": {
                 "text": "'default' | 'flat'"
               },
               "default": "'default'",
-              "description": "Display mode for the accordion.\n`'default'` renders panels with a subtle background on expand and dividers between items.\n`'flat'` renders panels without borders or background changes — suitable for use inside cards.",
-              "fieldName": "displayMode"
+              "description": "Variant for the accordion.\n`'default'` renders panels with a subtle background on expand and dividers between items.\n`'flat'` renders panels without borders or background changes — suitable for use inside cards.",
+              "fieldName": "variant"
+            },
+            {
+              "name": "leading-toggle",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "When `true`, the toggle icon is placed at the leading start of the header.\nWhen `false` (default), the icon is placed at the trailing end.",
+              "fieldName": "leadingToggle"
             }
           ],
           "superclass": {

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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA;;;;;;;;;;;;;;;;;;;;;;AAsBG;AAEI,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQA,GAAU,CAAA;AAAvC,IAAA,WAAA,GAAA;;AAGL;;;AAGG;QAC0B,IAAA,CAAA,IAAI,GAAqC,IAAI;AAE1E;;;;;;;;;AASG;QAC0B,IAAA,CAAA,OAAO,GAKvB,QAAQ;AAErB;;AAEG;QAC0B,IAAA,CAAA,KAAK,GAQf,SAAS;AAE5B;;AAEG;QACyC,IAAA,CAAA,QAAQ,GAAG,KAAK;AAE5D;;;AAGG;QAC0B,IAAA,CAAA,SAAS,GAItB,cAAc;QAEb,IAAA,CAAA,SAAS,GAAG,KAAK;AAc1B,QAAA,IAAA,CAAA,OAAO,GAAG,CAAA,cAAA,EAAiB,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE;QAkBnE,IAAA,CAAA,aAAa,GAAG,MAAK;AAC3B,YAAA,IAAI,CAAC,SAAS,GAAG,IAAI;AACrB,YAAA,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,aAAa,EAAE;AAC7B,gBAAA,MAAM,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE;AACtB,gBAAA,OAAO,EAAE,IAAI;AACb,gBAAA,QAAQ,EAAE,IAAI;AACf,aAAA,CAAC,CACH;AACH,QAAA,CAAC;QAEO,IAAA,CAAA,aAAa,GAAG,MAAK;AAC3B,YAAA,IAAI,CAAC,SAAS,GAAG,KAAK;AACtB,YAAA,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,aAAa,EAAE;AAC7B,gBAAA,MAAM,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE;AACvB,gBAAA,OAAO,EAAE,IAAI;AACb,gBAAA,QAAQ,EAAE,IAAI;AACf,aAAA,CAAC,CACH;AACH,QAAA,CAAC;AAEO,QAAA,IAAA,CAAA,UAAU,GAAG,CAAC,KAAoB,KAAI;YAC5C,IAAI,IAAI,CAAC,QAAQ;gBAAE;YAEnB,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;gBAChD,KAAK,CAAC,cAAc,EAAE;AACtB,gBAAA,IAAI,CAAC,KAAK,CAAC,aAAa,GAAG,IAAI;AAC/B,gBAAA,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE;gBAClB,qBAAqB,CAAC,MAAM,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,CAAC;YAClD;YAEA,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,IAAI,IAAI,CAAC,SAAS,EAAE;AAC5C,gBAAA,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE;AACnB,gBAAA,IAAI,CAAC,cAAc,EAAE,KAAK,EAAE;YAC9B;AACF,QAAA,CAAC;IAqDH;IAzGW,KAAK,GAAA;AACZ,QAAA,IAAI,CAAC,cAAc,EAAE,KAAK,EAAE;IAC9B;AAEQ,IAAA,cAAc,CAAC,KAAiB,EAAA;QACtC,KAAK,CAAC,eAAe,EAAE;QACvB,IAAI,IAAI,CAAC,QAAQ;YAAE;AAEnB,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE;AAClB,YAAA,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE;QACrB;aAAO;AACL,YAAA,IAAI,CAAC,KAAK,CAAC,aAAa,GAAG,IAAI;AAC/B,YAAA,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE;QACpB;IACF;IAwCS,iBAAiB,GAAA;QACxB,KAAK,CAAC,iBAAiB,EAAE;QACzB,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,UAAU,CAAC;IACnD;IAES,oBAAoB,GAAA;QAC3B,IAAI,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,UAAU,CAAC;QACpD,KAAK,CAAC,oBAAoB,EAAE;IAC9B;IAES,MAAM,GAAA;AACb,QAAA,MAAM,aAAa,GAAG;AACpB,YAAA,gBAAgB,EAAE,IAAI;YACtB,MAAM,EAAE,IAAI,CAAC,SAAS;YACtB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB;AAED,QAAA,OAAOC,CAAI,CAAA;;gBAECC,GAAQ,CAAC,aAAa,CAAC;AACxB,aAAA,EAAA,IAAI,CAAC,IAAI;AACN,gBAAA,EAAA,IAAI,CAAC,OAAO;AACd,cAAA,EAAA,IAAI,CAAC,KAAK;;AAEN,kBAAA,EAAA,IAAI,CAAC,QAAQ;AACX,oBAAA,EAAA;AACZ,YAAA,eAAe,EAAE,MAAM;AACvB,YAAA,eAAe,EAAE,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC;YACvC,eAAe,EAAE,IAAI,CAAC,OAAO;AAC9B,SAAA;AACQ,eAAA,EAAA,IAAI,CAAC,cAAc;;;;;;;;;;;;AAYvB,WAAA,EAAA,IAAI,CAAC,OAAO;AACL,kBAAA,EAAA,IAAI,CAAC,SAAS;AAChB,gBAAA,EAAA,IAAI,CAAC,aAAa;AAClB,gBAAA,EAAA,IAAI,CAAC,aAAa;;;;KAI/B;IACH;;AA7KgB,cAAA,CAAA,MAAM,GAAG,CAACC,QAAM,CAAC;AAMJ,UAAA,CAAA;AAA5B,IAAAC,CAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE;AAAgD,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,MAAA,EAAA,MAAA,CAAA;AAY9C,UAAA,CAAA;AAA5B,IAAAA,CAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE;AAKL,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,SAAA,EAAA,MAAA,CAAA;AAKO,UAAA,CAAA;AAA5B,IAAAA,CAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE;AAQE,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,OAAA,EAAA,MAAA,CAAA;AAKe,UAAA,CAAA;IAA3CA,CAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;AAAmB,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,UAAA,EAAA,MAAA,CAAA;AAMhC,UAAA,CAAA;AAA5B,IAAAA,CAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE;AAII,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,WAAA,EAAA,MAAA,CAAA;AAEd,UAAA,CAAA;AAAhB,IAAAC,CAAK;AAA6B,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,WAAA,EAAA,MAAA,CAAA;AAEQ,UAAA,CAAA;IAA1CC,CAAK,CAAC,iBAAiB;AAEtB,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,gBAAA,EAAA,MAAA,CAAA;AAEiC,UAAA,CAAA;IAAlCA,CAAK,CAAC,SAAS;AAMd,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,OAAA,EAAA,MAAA,CAAA;AAlES,cAAc,GAAA,UAAA,CAAA;IAD1B;AACY,CAAA,EAAA,cAAc,CA+K1B;;;;"}
+{"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 {