@redvars/peacock 3.8.3 → 3.8.4

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":";;;;;;;AAAA,SAAS,2BAA2B,CAAC,IAAY,EAAA;IAC/C,MAAM,cAAc,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC;AACzD,IAAA,cAAc,CAAC,KAAK,GAAG,IAAI;;AAG3B,IAAA,cAAc,CAAC,YAAY,CAAC,UAAU,EAAE,EAAE,CAAC;AAC3C,IAAA,cAAc,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU;AAC1C,IAAA,cAAc,CAAC,KAAK,CAAC,IAAI,GAAG,SAAS;AAErC,IAAA,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,cAAc,CAAC;IACzC,cAAc,CAAC,MAAM,EAAE;AAEvB,IAAA,IAAI;AACF,QAAA,QAAQ,CAAC,WAAW,CAAC,MAAM,CAAC;IAC9B;IAAE,OAAO,GAAG,EAAE;AACZ,QAAA,OAAO,CAAC,KAAK,CAAC,iCAAiC,EAAE,GAAG,CAAC;IACvD;YAAU;AACR,QAAA,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,cAAc,CAAC;IAC3C;AACF;AAEO,eAAe,eAAe,CAAC,IAAY,EAAA;IAChD,IAAI,SAAS,CAAC,SAAS,IAAI,SAAS,CAAC,SAAS,CAAC,SAAS,EAAE;;AAExD,QAAA,IAAI;YACF,MAAM,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC;QAC3C;QAAE,OAAO,GAAG,EAAE;AACZ,YAAA,OAAO,CAAC,KAAK,CAAC,2CAA2C,EAAE,GAAG,CAAC;;YAE/D,2BAA2B,CAAC,IAAI,CAAC;QACnC;IACF;SAAO;;QAEL,2BAA2B,CAAC,IAAI,CAAC;IACnC;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC1BA;AACA;AACA,IAAI,MAAM,GAA2C,IAAI;AACzD,IAAI,OAAO,GAKA,IAAI;AACf,IAAI,SAAS,GAAyD,IAAI;AAC1E,IAAI,YAAY,GACd,IAAI;AACN,IAAI,WAAW,GAA2D,IAAI;AAC9E,IAAI,cAAc,GAChB,IAAI;AACN,IAAI,aAAa,GACf,IAAI;AAEN,MAAM,SAAS,GAAG,OAAO,MAAM,KAAK,OAAO,qBAAO,CAAC,CAAC;AAEpD,MAAM,UAAU,GAAG,OAChB,OAAO,KAAK,OAAO,CAAC,GAAG,CAAC;IACvB,OAAO,2BAA2B,CAAC;IACnC,OAAO,4BAA4B,CAAC;AACrC,CAAA,CAAC,CAAC;AAEL,MAAM,YAAY,GAAG,OAAO,SAAS,KAAK,OAAO,0BAAqB,CAAC,CAAC;AACxE,MAAM,eAAe,GAAG,OACrB,YAAY,KAAK,OAAO,qBAAwB,CAAC,CAAC;AACrD,MAAM,cAAc,GAAG,OAAO,WAAW,KAAK,OAAO,oBAAuB,CAAC,CAAC;AAC9E,MAAM,iBAAiB,GAAG,OACvB,cAAc,KAAK,OAAO,uBAA0B,CAAC,CAAC;AACzD,MAAM,gBAAgB,GAAG,OACtB,aAAa,KAAK,OAAO,sBAAyB,CAAC,CAAC;AAEvD,MAAM,MAAM,GAAG;AACb,IAAA,OAAO,EAAE,iBAAiB;AAC1B,IAAA,eAAe,EAAE,mBAAmB;AACpC,IAAA,MAAM,EAAE,SAET;AAED;;;;;;;;;;;;;;;;AAgBG;AAEI,IAAM,eAAe,GAAA,iBAAA,GAArB,MAAM,eAAgB,SAAQA,GAAU,CAAA;AAAxC,IAAA,WAAA,GAAA;;QAML,IAAA,CAAA,QAAQ,GAAoB,YAAY;QAGxC,IAAA,CAAA,WAAW,GAAY,KAAK;QAG5B,IAAA,CAAA,KAAK,GAAW,EAAE;QAGlB,IAAA,CAAA,MAAM,GAAa,IAAI;QAGvB,IAAA,CAAA,QAAQ,GAAY,KAAK;QAER,IAAA,CAAA,YAAY,GAAkB,IAAI;QAElC,IAAA,CAAA,OAAO,GAAG,KAAK;QAExB,IAAA,CAAA,UAAU,GAAkB,IAAI;QAEhC,IAAA,CAAA,oBAAoB,GAAkB,IAAI;IAiMpD;AA/LE,IAAA,MAAM,iBAAiB,GAAA;;QAErB,KAAK,CAAC,iBAAiB,EAAE;IAC3B;IAEA,oBAAoB,GAAA;AAClB,QAAA,IAAI,IAAI,CAAC,oBAAoB,KAAK,IAAI,EAAE;AACtC,YAAA,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,oBAAoB,CAAC;AAC9C,YAAA,IAAI,CAAC,oBAAoB,GAAG,IAAI;QAClC;QACA,KAAK,CAAC,oBAAoB,EAAE;IAC9B;IAEA,YAAY,GAAA;QACV,IAAI,CAAC,eAAe,EAAE;IACxB;;AAGQ,IAAA,MAAM,CAAC,GAAW,EAAA;AACxB,QAAA,OAAO,GAAG,CAAC,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC;IACxD;AAEQ,IAAA,MAAM,eAAe,GAAA;QAC3B,IAAI,UAAU,GAAG,EAAE;AACnB,QAAA,IAAI,IAAI,CAAC,KAAK,EAAE;AACd,YAAA,UAAU,GAAG,IAAI,CAAC,KAAK;QACzB;aAAO;;YAEL,MAAM,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC;YAC1C,IAAI,OAAO,EAAE;AACX,gBAAA,UAAU,GAAG,OAAO,CAAC,SAAS;YAChC;iBAAO,IAAI,IAAI,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,EAAE;AACrC,gBAAA,UAAU,GAAI,IAAoB,CAAC,SAAS;YAC9C;QACF;AAEA,QAAA,UAAU,GAAG,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC;AAEpC,QAAA,IAAI,IAAI,CAAC,MAAM,KAAK,KAAK,EAAE;;AAEzB,YAAA,QAAQ,IAAI,CAAC,QAAQ;gBACnB,KAAK,YAAY,EAAE;AACjB,oBAAA,MAAM,CAAC,QAAQ,EAAE,WAAW,EAAE,YAAY,CAAC,GAAG,MAAM,OAAO,CAAC,GAAG,CAAC;AAC9D,wBAAA,YAAY,EAAE;AACd,wBAAA,eAAe,EAAE;AACjB,wBAAA,gBAAgB,EAAE;AACnB,qBAAA,CAAC;AACF,oBAAA,UAAU,GAAG,MAAM,QAAQ,CAAC,MAAM,CAAC,UAAU,EAAE;AAC7C,wBAAA,MAAM,EAAE,OAAO;AACf,wBAAA,OAAO,EAAE,CAAC,WAAW,EAAE,YAAY,CAAC;AACpC,wBAAA,eAAe,EAAE,IAAI;AACrB,wBAAA,yBAAyB,EAAE,QAAQ;AACpC,qBAAA,CAAC;oBACF;gBACF;gBACA,KAAK,MAAM,EAAE;oBACX,MAAM,CAAC,QAAQ,EAAE,UAAU,CAAC,GAAG,MAAM,OAAO,CAAC,GAAG,CAAC;AAC/C,wBAAA,YAAY,EAAE;AACd,wBAAA,cAAc,EAAE;AACjB,qBAAA,CAAC;AACF,oBAAA,UAAU,GAAG,MAAM,QAAQ,CAAC,MAAM,CAAC,UAAU,EAAE;AAC7C,wBAAA,MAAM,EAAE,MAAM;wBACd,OAAO,EAAE,CAAC,UAAU,CAAC;AACrB,wBAAA,eAAe,EAAE,IAAI;AACrB,wBAAA,yBAAyB,EAAE,QAAQ;AACpC,qBAAA,CAAC;oBACF;gBACF;gBACA,KAAK,KAAK,EAAE;oBACV,MAAM,CAAC,QAAQ,EAAE,aAAa,CAAC,GAAG,MAAM,OAAO,CAAC,GAAG,CAAC;AAClD,wBAAA,YAAY,EAAE;AACd,wBAAA,iBAAiB,EAAE;AACpB,qBAAA,CAAC;AACF,oBAAA,UAAU,GAAG,MAAM,QAAQ,CAAC,MAAM,CAAC,UAAU,EAAE;AAC7C,wBAAA,MAAM,EAAE,KAAK;wBACb,OAAO,EAAE,CAAC,aAAa,CAAC;AACzB,qBAAA,CAAC;oBACF;gBACF;;QAEJ;AAEA,QAAA,IAAI,CAAC,UAAU,GAAG,UAAU;QAE5B,MAAM,YAAY,GAAuB,EAAE;;;AAI3C,QAAA,IAAI,IAAI,CAAC,WAAW,EAAE;YACpB,YAAY,CAAC,IAAI,CAAC;AAChB,gBAAA,IAAI,EAAE,gBAAgB;AACtB,gBAAA,IAAI,CAAC,IAAI,EAAA;;AAEP,oBAAA,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,MAAM,CAAC;gBACnC,CAAC;AACF,aAAA,CAAC;QACJ;AAEA,QAAA,MAAM,CACJ,EAAE,UAAU,EAAE,EACd,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE,CAAC,EACpD,GAAG,MAAM,OAAO,CAAC,GAAG,CAAC,CAAC,SAAS,EAAE,EAAE,UAAU,EAAE,CAAC,CAAC;AAElD,QAAA,IAAI,CAAC,YAAY,GAAG,MAAM,UAAU,CAAC,UAAU,EAAE;YAC/C,IAAI,EAAE,IAAI,CAAC,QAAQ;AACnB,YAAA,MAAM,EAAE;;AAEN,gBAAA,KAAK,EAAE,WAAW;;AAElB,gBAAA,IAAI,EAAE,UAAU;AACjB,aAAA;YACD,YAAY;AACb,SAAA,CAAC;IACJ;AAEU,IAAA,OAAO,CAAC,OAAkC,EAAA;;;AAGlD,QAAA,IACE,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC;AACpB,YAAA,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC;AACvB,YAAA,OAAO,CAAC,GAAG,CAAC,aAAa,CAAC;AAC1B,YAAA,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,EACrB;YACA,IAAI,CAAC,eAAe,EAAE;QACxB;IACF;AAEQ,IAAA,MAAM,iBAAiB,GAAA;AAC7B,QAAA,IAAI,IAAI,CAAC,UAAU,IAAI,IAAI,EAAE;YAC3B;QACF;AAEA,QAAA,MAAM,eAAe,CAAC,IAAI,CAAC,UAAU,CAAC;AACtC,QAAA,IAAI,CAAC,OAAO,GAAG,IAAI;AAEnB,QAAA,IAAI,IAAI,CAAC,oBAAoB,KAAK,IAAI,EAAE;AACtC,YAAA,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,oBAAoB,CAAC;QAChD;QAEA,IAAI,CAAC,oBAAoB,GAAG,MAAM,CAAC,UAAU,CAAC,MAAK;AACjD,YAAA,IAAI,CAAC,OAAO,GAAG,KAAK;AACpB,YAAA,IAAI,CAAC,oBAAoB,GAAG,IAAI;AAClC,QAAA,CAAC,EAAE,iBAAe,CAAC,sBAAsB,CAAC;IAC5C;IAEA,MAAM,GAAA;AACJ,QAAA,IAAI,IAAI,CAAC,YAAY,KAAK,IAAI,EAAE;AAC9B,YAAA,OAAOC,CAAI,CAAA;;;AAGL,UAAA,EAAA,MAAM,CAAC,OAAO;;OAEnB;QACH;AAEA,QAAA,OAAOA,CAAI,CAAA;;AAEC,cAAA,EAAAC,CAAQ,CAAC;AACf,YAAA,kBAAkB,EAAE,IAAI;YACxB,cAAc,EAAE,IAAI,CAAC,WAAW;SACjC,CAAC;;;;AAIuB,+BAAA,EAAA,IAAI,CAAC,QAAQ,EAAE,WAAW,EAAE,CAAA;;;;sBAIvC,IAAI,CAAC,OAAO,GAAG,SAAS,GAAG,SAAS;;;AAG/B,yBAAA,EAAA,IAAI,CAAC;cACd,MAAM,CAAC;cACP,MAAM,CAAC,eAAe;AAChB,sBAAA,EAAA,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,MAAM,GAAG,MAAM,CAAC,eAAe;AACtD,qBAAA,EAAA,IAAI,CAAC,iBAAiB;;;uBAGtB,IAAI,CAAC,OAAO,GAAG,OAAO,GAAG,cAAc;;;;;;;AAOzB,mCAAA,EAAAC,CAAU,CAAC,IAAI,CAAC,YAAY,IAAI,EAAE,CAAC,CAAA;;;KAGnE;IACH;;AAzNO,eAAA,CAAA,MAAM,GAAG,CAACC,QAAM,CAAC;AAEA,eAAA,CAAA,sBAAsB,GAAG,IAAH;AAG9C,UAAA,CAAA;IADCC,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;AACA,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,UAAA,EAAA,MAAA,CAAA;AAGzC,UAAA,CAAA;AADC,IAAAA,CAAQ,CAAC,EAAE,SAAS,EAAE,cAAc,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;AACxC,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,aAAA,EAAA,MAAA,CAAA;AAG7B,UAAA,CAAA;AADC,IAAAA,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE;AACP,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,OAAA,EAAA,MAAA,CAAA;AAGnB,UAAA,CAAA;IADCA,CAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;AAClB,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,QAAA,EAAA,MAAA,CAAA;AAGxB,UAAA,CAAA;AADC,IAAAA,CAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE;AACD,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,UAAA,EAAA,MAAA,CAAA;AAET,UAAA,CAAA;AAAhB,IAAAC,CAAK;AAA8C,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,cAAA,EAAA,MAAA,CAAA;AAEnC,UAAA,CAAA;AAAhB,IAAAA,CAAK;AAA2B,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,SAAA,EAAA,MAAA,CAAA;AAtBtB,eAAe,GAAA,iBAAA,GAAA,UAAA,CAAA;IAD3B;AACY,CAAA,EAAA,eAAe,CA2N3B;;;;"}
+{"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,22 @@
       "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"
         }
       ],
       "superclass": {
@@ -573,8 +573,8 @@
           "type": {
             "text": "boolean"
           },
-          "default": "false",
-          "description": "Icon alignment.\nPossible values are `\"start\"`, `\"end\"`. Defaults to `\"end\"`.",
+          "default": "true",
+          "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

@@ -2137,8 +2137,8 @@
               "type": {
                 "text": "boolean"
               },
-              "default": "false",
-              "description": "Icon alignment.\nPossible values are `\"start\"`, `\"end\"`. Defaults to `\"end\"`.",
+              "default": "true",
+              "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
             },
@@ -2642,8 +2642,8 @@
               "type": {
                 "text": "boolean"
               },
-              "default": "false",
-              "description": "Icon alignment.\nPossible values are `\"start\"`, `\"end\"`. Defaults to `\"end\"`.",
+              "default": "true",
+              "description": "When `true` (default), the icon is placed after the label (trailing).\nWhen `false`, the icon is placed before the label (leading).",
               "fieldName": "trailingIcon"
             },
             {
@@ -6477,7 +6477,7 @@
           ],
           "events": [
             {
-              "name": "accordion-item:toggle",
+              "name": "accordion-item-toggle",
               "type": {
                 "text": "CustomEvent<{ open: boolean }>"
               },
@@ -6557,24 +6557,24 @@
           "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
             },
             {
@@ -6619,22 +6619,22 @@
           ],
           "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"
             }
           ],
           "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":"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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;;;;"}

package/dist/fab.js

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

package/dist/fab.js.map

@@ -1 +1 @@
-{"version":3,"file":"fab.js","sources":["../../src/button/fab/fab.ts"],"sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport IndividualComponent from '@/IndividualComponent.js';\nimport {\n  dispatchActivationClick,\n  isActivationClick,\n} from '@/__internal/utils/dispatch-event-utils.js';\nimport { isLink } from '@/__internal/utils/is-link.js';\nimport styles from './fab.scss';\nimport colorStyles from './fab-colors.scss';\nimport sizeStyles from './fab-sizes.scss';\nimport { DISABLED_REASON_ID } from '@/button/ButtonConstants.js';\nimport { mixinBaseButton } from '../base-button/base-button.js';\nimport { mixinDelegatesAria } from '@/__internal/aria/delegate.js';\nimport { mixinFormSubmitter } from '@/__internal/mixins/form-submitter.js';\nimport { mixinHyperlink } from '@/__internal/mixins/hyperlink.js';\nimport { mixinElementInternals } from '@/__internal/mixins/element-internals.js';\nimport { mixinFormAssociated } from '@/__internal/mixins/form-associated.js';\nimport { ARIAMixinStrict } from '@/__internal/aria/aria.js';\n\n/**\n * @label FAB\n * @tag wc-fab\n * @rawTag fab\n *\n * @summary The FAB (Floating Action Button) represents the primary action on a screen.\n * @overview\n * <p>A Floating Action Button (FAB) is a circular button that represents the primary action on a screen. It follows the specification and supports four color roles and two variants.</p>\n *\n * @cssprop --fab-container-color: Background color of the FAB container.\n * @cssprop --fab-label-text-color: Text and icon color of the FAB label.\n * @cssprop --fab-container-shape: Corner radius of the FAB. Defaults to var(--shape-corner-large).\n * @cssprop --fab-container-elevation-level: Elevation level of the FAB. Defaults to 3.\n *\n * @fires {MouseEvent} click - Dispatched when the FAB is clicked.\n *\n * @example\n * ```html\n * <wc-fab><wc-icon name=\"add\"></wc-icon></wc-fab>\n * ```\n * @tags controls\n */\n@IndividualComponent\nexport class Fab extends mixinBaseButton(\n  mixinHyperlink(\n    mixinDelegatesAria(\n      mixinFormSubmitter(\n        mixinFormAssociated(mixinElementInternals(LitElement)),\n      ),\n    ),\n  ),\n) {\n  // ── Static ───────────────────────────────────────────────────────────────\n\n  /** @nocollapse */ // eslint-disable-next-line\n  static override shadowRootOptions: ShadowRootInit = {\n    mode: 'open',\n    delegatesFocus: true,\n  };\n\n  static override styles = [styles, colorStyles, sizeStyles];\n\n  /**\n   * Optional label text for the extended FAB variant.\n   * When set, the FAB displays both the icon and a text label.\n   */\n  @property({ type: String }) label?: string;\n\n  /**\n   * The color role of the FAB.\n   * `\"surface\"` uses the surface color role.\n   * `\"primary\"` uses the primary color role.\n   * `\"secondary\"` uses the secondary color role.\n   * `\"tertiary\"` uses the tertiary color role.\n   */\n  @property({ reflect: true }) color:\n    | 'surface'\n    | 'primary'\n    | 'secondary'\n    | 'tertiary' = 'surface';\n\n  /**\n   * The style variant of the FAB.\n   * `\"tonal\"` uses container colors.\n   * `\"filled\"` uses solid role colors.\n   */\n  @property({ reflect: true }) variant: 'tonal' | 'filled' = 'tonal';\n\n  /**\n   * The size of the FAB.\n   * `\"sm\"` renders a small FAB (40×40dp).\n   * `\"md\"` renders a standard FAB (56×56dp). This is the default.\n   * `\"lg\"` renders a large FAB (96×96dp).\n   */\n  @property({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * If `true`, the FAB is in a lowered (resting) state with reduced elevation.\n   */\n  @property({ type: Boolean, reflect: true }) lowered: boolean = false;\n\n  /**\n   * Tooltip text shown on hover.\n   */\n  @property() tooltip?: string;\n\n  @property({ type: Boolean, reflect: true }) skeleton: boolean = false;\n\n  @property({ type: Boolean, reflect: true }) toggle: boolean = false;\n\n  @property({ type: Boolean, reflect: true }) selected: boolean = false;\n\n  @query('.button') readonly buttonElement!: HTMLElement | null;\n\n  constructor() {\n    super();\n    this.addEventListener('click', this.__dispatchClickWithThrottle);\n  }\n\n  __dispatchClick = (event: MouseEvent | KeyboardEvent) => {\n    // If the button is soft-disabled or a disabled link, we need to explicitly\n    // prevent the click from propagating to other event listeners as well as\n    // prevent the default action.\n    if (this.softDisabled || (this.disabled && this.href) || this.skeleton) {\n      event.stopImmediatePropagation();\n      event.preventDefault();\n      return;\n    }\n\n    if (!isActivationClick(event) || !this.buttonElement) {\n      return;\n    }\n\n    this.focus();\n    dispatchActivationClick(this.buttonElement);\n  };\n\n  override focus() {\n    this.buttonElement?.focus();\n  }\n\n  override blur() {\n    this.buttonElement?.blur();\n  }\n\n  renderDisabledReason(softDisabled: boolean) {\n    if (softDisabled)\n      return html`<div\n        id=${DISABLED_REASON_ID}\n        role=\"tooltip\"\n        aria-label=${this.disabledReason}\n        class=\"screen-reader-only\"\n      >\n        ${this.disabledReason}\n      </div>`;\n    return nothing;\n  }\n\n  renderTooltip() {\n    if (this.tooltip) {\n      return html`<wc-tooltip class=\"tooltip\" for=\"button\"\n        >${this.tooltip}</wc-tooltip\n      >`;\n    }\n    return nothing;\n  }\n\n  renderFabElement(isExtended: boolean) {\n    const { ariaLabel, ariaHasPopup, ariaExpanded } = this as ARIAMixinStrict;\n\n    const cssClasses = {\n      button: true,\n      fab: true,\n      'fab-element': true,\n      [`size-${this.size}`]: true,\n      [`color-${this.color}`]: true,\n      [`variant-${this.variant}`]: true,\n      extended: isExtended,\n      lowered: this.lowered,\n      disabled: this.disabled,\n    };\n\n    if (!isLink(this)) {\n      return html`<button\n        class=${classMap(cssClasses)}\n        id=\"button\"\n        type=\"button\"\n        aria-label=\"${ariaLabel || nothing}\"\n        aria-haspopup=\"${ariaHasPopup || nothing}\"\n        aria-expanded=\"${ariaExpanded || nothing}\"\n        aria-describedby=${ifDefined(\n          this.softDisabled ? DISABLED_REASON_ID : undefined,\n        )}\n        ?aria-disabled=${this.softDisabled}\n        ?disabled=${this.disabled}\n      >\n        ${this.renderFabContent(isExtended)}\n      </button>`;\n    }\n\n    return html`<a\n      class=${classMap(cssClasses)}\n      id=\"button\"\n      tabindex=${this.disabled ? '-1' : '0'}\n      href=${ifDefined(this.href)}\n      target=${this.target}\n      role=\"button\"\n      aria-label=\"${ariaLabel || nothing}\"\n      aria-haspopup=\"${ariaHasPopup || nothing}\"\n      aria-expanded=\"${ariaExpanded || nothing}\"\n      aria-describedby=${ifDefined(\n        this.softDisabled ? DISABLED_REASON_ID : undefined,\n      )}\n      ?aria-disabled=${this.softDisabled}\n    >\n      ${this.renderFabContent(isExtended)}\n    </a>`;\n  }\n\n  renderFabContent(isExtended: boolean) {\n    return html`\n      <div class=\"fab-content\">\n        <slot></slot>\n        ${isExtended\n          ? html`<span class=\"fab-label\">${this.label}</span>`\n          : nothing}\n      </div>\n      ${this.renderDisabledReason(this.softDisabled)}\n    `;\n  }\n\n  // ── Render ────────────────────────────────────────────────────────────────\n\n  override render() {\n    const isExtended = !!this.label;\n\n    return html`\n      <wc-focus-ring class=\"focus-ring\" for=\"button\"></wc-focus-ring>\n      <wc-elevation class=\"elevation\"></wc-elevation>\n      <div class=\"background\"></div>\n      <wc-ripple class=\"ripple\" for=\"button\"></wc-ripple>\n      <wc-skeleton class=\"skeleton\"></wc-skeleton>\n\n      ${this.renderFabElement(isExtended)} ${this.renderTooltip()}\n    `;\n  }\n}\n"],"names":["LitElement","html","nothing","classMap","ifDefined","styles","colorStyles","sizeStyles","property","query"],"mappings":"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"}
+{"version":3,"file":"fab.js","sources":["../../src/button/fab/fab.ts"],"sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport IndividualComponent from '@/IndividualComponent.js';\nimport {\n  dispatchActivationClick,\n  isActivationClick,\n} from '@/__internal/utils/dispatch-event-utils.js';\nimport { isLink } from '@/__internal/utils/is-link.js';\nimport styles from './fab.scss';\nimport colorStyles from './fab-colors.scss';\nimport sizeStyles from './fab-sizes.scss';\nimport { DISABLED_REASON_ID } from '@/button/ButtonConstants.js';\nimport { mixinBaseButton } from '../base-button/base-button.js';\nimport { mixinDelegatesAria } from '@/__internal/aria/delegate.js';\nimport { mixinFormSubmitter } from '@/__internal/mixins/form-submitter.js';\nimport { mixinHyperlink } from '@/__internal/mixins/hyperlink.js';\nimport { mixinElementInternals } from '@/__internal/mixins/element-internals.js';\nimport { mixinFormAssociated } from '@/__internal/mixins/form-associated.js';\nimport { ARIAMixinStrict } from '@/__internal/aria/aria.js';\n\n/**\n * @label FAB\n * @tag wc-fab\n * @rawTag fab\n *\n * @summary The FAB (Floating Action Button) represents the primary action on a screen.\n * @overview\n * <p>A Floating Action Button (FAB) is a circular button that represents the primary action on a screen. It follows the specification and supports four color roles and two variants.</p>\n *\n * @cssprop --fab-container-color: Background color of the FAB container.\n * @cssprop --fab-label-text-color: Text and icon color of the FAB label.\n * @cssprop --fab-container-shape: Corner radius of the FAB. Defaults to var(--shape-corner-large).\n * @cssprop --fab-container-elevation-level: Elevation level of the FAB. Defaults to 3.\n *\n * @fires {MouseEvent} click - Dispatched when the FAB is clicked.\n *\n * @example\n * ```html\n * <wc-fab><wc-icon name=\"add\"></wc-icon></wc-fab>\n * ```\n * @tags controls\n */\n@IndividualComponent\nexport class Fab extends mixinBaseButton(\n  mixinHyperlink(\n    mixinDelegatesAria(\n      mixinFormSubmitter(\n        mixinFormAssociated(mixinElementInternals(LitElement)),\n      ),\n    ),\n  ),\n) {\n  // ── Static ───────────────────────────────────────────────────────────────\n\n  /** @nocollapse */ // eslint-disable-next-line\n  static override shadowRootOptions: ShadowRootInit = {\n    mode: 'open',\n    delegatesFocus: true,\n  };\n\n  static override styles = [styles, colorStyles, sizeStyles];\n\n  /**\n   * Optional label text for the extended FAB variant.\n   * When set, the FAB displays both the icon and a text label.\n   */\n  @property({ type: String }) label?: string;\n\n  /**\n   * The color role of the FAB.\n   * `\"surface\"` uses the surface color role.\n   * `\"primary\"` uses the primary color role.\n   * `\"secondary\"` uses the secondary color role.\n   * `\"tertiary\"` uses the tertiary color role.\n   */\n  @property({ reflect: true }) color:\n    | 'surface'\n    | 'primary'\n    | 'secondary'\n    | 'tertiary' = 'surface';\n\n  /**\n   * The style variant of the FAB.\n   * `\"tonal\"` uses container colors.\n   * `\"filled\"` uses solid role colors.\n   */\n  @property({ reflect: true }) variant: 'tonal' | 'filled' = 'tonal';\n\n  /**\n   * The size of the FAB.\n   * `\"sm\"` renders a small FAB (40×40dp).\n   * `\"md\"` renders a standard FAB (56×56dp). This is the default.\n   * `\"lg\"` renders a large FAB (96×96dp).\n   */\n  @property({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * If `true`, the FAB is in a lowered (resting) state with reduced elevation.\n   */\n  @property({ type: Boolean, reflect: true }) lowered: boolean = false;\n\n  /**\n   * Tooltip text shown on hover.\n   */\n  @property() tooltip?: string;\n\n  @property({ type: Boolean, reflect: true }) skeleton: boolean = false;\n\n  @property({ type: Boolean, reflect: true }) toggle: boolean = false;\n\n  @property({ type: Boolean, reflect: true }) selected: boolean = false;\n\n  @query('.button') readonly buttonElement!: HTMLElement | null;\n\n  constructor() {\n    super();\n    this.addEventListener('click', this.__dispatchClickWithThrottle);\n  }\n\n  __dispatchClick = (event: MouseEvent | KeyboardEvent) => {\n    // If the button is soft-disabled or a disabled link, we need to explicitly\n    // prevent the click from propagating to other event listeners as well as\n    // prevent the default action.\n    if (this.softDisabled || (this.disabled && this.href) || this.skeleton) {\n      event.stopImmediatePropagation();\n      event.preventDefault();\n      return;\n    }\n\n    if (!isActivationClick(event) || !this.buttonElement) {\n      return;\n    }\n\n    this.focus();\n    dispatchActivationClick(this.buttonElement);\n  };\n\n  override focus() {\n    this.buttonElement?.focus();\n  }\n\n  override blur() {\n    this.buttonElement?.blur();\n  }\n\n  renderDisabledReason(softDisabled: boolean) {\n    if (softDisabled)\n      return html`<div\n        id=${DISABLED_REASON_ID}\n        role=\"tooltip\"\n        aria-label=${this.disabledReason}\n        class=\"screen-reader-only\"\n      >\n        ${this.disabledReason}\n      </div>`;\n    return nothing;\n  }\n\n  renderTooltip() {\n    if (this.tooltip) {\n      return html`<wc-tooltip class=\"tooltip\" for=\"button\"\n        >${this.tooltip}</wc-tooltip\n      >`;\n    }\n    return nothing;\n  }\n\n  renderFabElement(isExtended: boolean) {\n    const { ariaLabel, ariaHasPopup, ariaExpanded } = this as ARIAMixinStrict;\n\n    const cssClasses = {\n      button: true,\n      fab: true,\n      'fab-element': true,\n      [`size-${this.size}`]: true,\n      [`color-${this.color}`]: true,\n      [`variant-${this.variant}`]: true,\n      extended: isExtended,\n      lowered: this.lowered,\n      disabled: this.disabled,\n    };\n\n    if (!isLink(this)) {\n      return html`<button\n        class=${classMap(cssClasses)}\n        id=\"button\"\n        type=\"button\"\n        aria-label=\"${ariaLabel || nothing}\"\n        aria-haspopup=\"${ariaHasPopup || nothing}\"\n        aria-expanded=\"${ariaExpanded || nothing}\"\n        aria-describedby=${ifDefined(\n          this.softDisabled ? DISABLED_REASON_ID : undefined,\n        )}\n        ?aria-disabled=${this.softDisabled}\n        ?disabled=${this.disabled}\n      >\n        ${this.renderFabContent(isExtended)}\n      </button>`;\n    }\n\n    return html`<a\n      class=${classMap(cssClasses)}\n      id=\"button\"\n      tabindex=${this.disabled ? '-1' : '0'}\n      href=${ifDefined(this.href)}\n      target=${this.target}\n      role=\"button\"\n      aria-label=\"${ariaLabel || nothing}\"\n      aria-haspopup=\"${ariaHasPopup || nothing}\"\n      aria-expanded=\"${ariaExpanded || nothing}\"\n      aria-describedby=${ifDefined(\n        this.softDisabled ? DISABLED_REASON_ID : undefined,\n      )}\n      ?aria-disabled=${this.softDisabled}\n    >\n      ${this.renderFabContent(isExtended)}\n    </a>`;\n  }\n\n  renderFabContent(isExtended: boolean) {\n    return html`\n      <div class=\"fab-content\">\n        <slot></slot>\n        ${isExtended\n          ? html`<span class=\"fab-label\">${this.label}</span>`\n          : nothing}\n      </div>\n      ${this.renderDisabledReason(this.softDisabled)}\n    `;\n  }\n\n  // ── Render ────────────────────────────────────────────────────────────────\n\n  override render() {\n    const isExtended = !!this.label;\n\n    return html`\n      <wc-focus-ring class=\"focus-ring\" for=\"button\"></wc-focus-ring>\n      <wc-elevation class=\"elevation\"></wc-elevation>\n      <div class=\"background\"></div>\n      <wc-ripple class=\"ripple\" for=\"button\"></wc-ripple>\n      <wc-skeleton class=\"skeleton\"></wc-skeleton>\n\n      ${this.renderFabElement(isExtended)} ${this.renderTooltip()}\n    `;\n  }\n}\n"],"names":["LitElement","html","nothing","classMap","ifDefined","styles","colorStyles","sizeStyles","property","query"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"field.js","sources":["../../src/field/field.ts"],"sourcesContent":["import { html, LitElement, nothing } 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 './field.scss';\nimport IndividualComponent from '@/IndividualComponent.js';\n\n/**\n * @label Field\n * @tag wc-field\n * @rawTag field\n *\n * @summary Wrapper for form fields with label and help text.\n * @overview\n * <p>Field provides consistent styling and behavior for form inputs.</p>\n *\n * @example\n * ```html\n * <wc-field label=\"Name\" required>\n *   some text\n * </wc-field>\n * ```\n * @tags form\n */\n@IndividualComponent\nexport class Field extends LitElement {\n  static shadowRootOptions: ShadowRootInit = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  static styles = [styles];\n\n  /** Label text shown above the field input. */\n  @property({ type: String })\n  label: string = '';\n\n  /** Help text (deprecated — prefer `helperText`). */\n  @property({ type: String })\n  help: string = '';\n\n  /** When true, marks the field as required and shows a required indicator. */\n  @property({ type: Boolean })\n  required: boolean = false;\n\n  /** When true, the field and its slotted input are disabled. */\n  @property({ type: Boolean, reflect: true })\n  disabled: boolean = false;\n\n  /** When true, the field and its slotted input are read-only. */\n  @property({ type: Boolean, reflect: true })\n  readonly: boolean = false;\n\n  /** When true, renders the field in a loading skeleton state. */\n  @property({ type: Boolean })\n  skeleton: boolean = false;\n\n  /** Helper/hint text shown in the field footer. */\n  @property({ type: String, attribute: 'helper-text' })\n  helperText: string = '';\n\n  /** When true, the field is in an error state and `errorText` is shown. */\n  @property({ type: Boolean })\n  error: boolean = false;\n\n  /** Error message displayed when `error` is true. */\n  @property({ type: String, attribute: 'error-text' })\n  errorText: string = '';\n\n  /** When true, the field is in a warning state and `warningText` is shown. */\n  @property({ type: Boolean })\n  warning: boolean = false;\n\n  /** Warning message displayed when `warning` is true. */\n  @property({ type: String, attribute: 'warning-text' })\n  warningText: string = '';\n\n  /** Character / word count string displayed at the trailing end of the footer. */\n  @property({ type: String, attribute: 'text-count' })\n  textCount: string = '';\n\n  /** When true, applies focused styling (controlled externally by the slotted input). */\n  @property({ type: Boolean })\n  focused: boolean = false;\n\n  /** When true, applies populated styling (controlled externally by the slotted input). */\n  @property({ type: Boolean })\n  populated: boolean = false;\n\n  /** Visual variant of the field container. */\n  @property({ type: String })\n  variant: 'filled' | 'outlined' | 'default' = 'default';\n\n  /** Reference to the host input element; used to forward click-on-label focus. */\n  @property({ type: Object })\n  host?: HTMLElement;\n\n  /** True when the `field-start` slot contains at least one node. */\n  @state()\n  slotStartHasContent: boolean = false;\n\n  /** True when the `field-end` slot contains at least one node. */\n  @state()\n  slotEndHasContent: boolean = false;\n\n  firstUpdated() {\n    observerSlotChangesWithCallback(\n      this.renderRoot.querySelector('.slot-start-wrapper slot'),\n      hasContent => {\n        this.slotStartHasContent = hasContent;\n        this.requestUpdate();\n      },\n    );\n    observerSlotChangesWithCallback(\n      this.renderRoot.querySelector('.slot-end-wrapper slot'),\n      hasContent => {\n        this.slotEndHasContent = hasContent;\n        this.requestUpdate();\n      },\n    );\n  }\n\n  __handleClick() {\n    // @ts-ignore\n    this.host?.focus?.();\n  }\n\n  __renderInputSlot() {\n    if (this.variant === 'outlined') {\n      if (this.populated || this.focused) return html`<slot></slot>`;\n      return html`\n        <label class=\"outlined-label\">${this.label}</label>\n        <div class=\"outlined-slot-container\">\n          <slot></slot>\n        </div>\n      `;\n    }\n    return html`<slot></slot>`;\n  }\n\n  __renderFieldHeader() {\n    if (!this.label) return nothing;\n    if (this.variant === 'outlined' && !this.populated && !this.focused) {\n      return nothing;\n    }\n    return html`<div class=\"field-header\">\n      <label class=\"label\">\n        ${this.label}${this.required\n          ? html`<span class=\"required\">*</span>`\n          : nothing}\n        <wc-skeleton class=\"skeleton\"></wc-skeleton>\n      </label>\n    </div>`;\n  }\n\n  __renderFieldFooter() {\n    if (\n      !this.textCount &&\n      !this.helperText &&\n      !this.errorText &&\n      !this.warningText\n    )\n      return nothing;\n    return html`<div class=\"field-footer\">\n      ${this.__renderHelperText()} ${this.__renderWordCount()}\n    </div>`;\n  }\n\n  __renderHelperText() {\n    if (this.error) return html`<div class=\"helper\">${this.errorText}</div>`;\n    if (this.warning)\n      return html`<div class=\"helper\">${this.warningText}</div>`;\n    if (this.helperText || this.helperText === '')\n      return html`<div class=\"helper\">${this.helperText}</div>`;\n    return nothing;\n  }\n\n  __renderWordCount() {\n    if (!this.textCount) return nothing;\n    return html`<div class=\"text-count\">${this.textCount}</div>`;\n  }\n\n  render() {\n    const classes = {\n      field: true,\n      required: this.required,\n      disabled: this.disabled,\n      'show-skeleton': this.skeleton,\n      'has-error': this.error,\n      'has-warning': this.warning,\n      focused: this.focused,\n      readonly: this.readonly,\n      [`variant-${this.variant}`]: true,\n      populated: this.populated,\n    };\n\n    return html`\n      <div class=${classMap(classes)}>\n        ${this.__renderFieldHeader()}\n\n        <div class=\"field-body\" @click=${this.__handleClick}>\n          <div class=\"outline\"></div>\n          <div class=\"background\"></div>\n          <wc-skeleton class=\"skeleton\"></wc-skeleton>\n\n          <div class=\"field-content\">\n            <div\n              class=${classMap({\n                'slot-start-wrapper': true,\n                'has-content': this.slotStartHasContent,\n              })}\n            >\n              <slot name=\"field-start\"></slot>\n            </div>\n\n            <div class=\"input-wrapper\">${this.__renderInputSlot()}</div>\n\n            <div\n              class=${classMap({\n                'slot-end-wrapper': true,\n                'has-content': this.slotEndHasContent,\n              })}\n            >\n              <slot name=\"field-end\"></slot>\n            </div>\n          </div>\n        </div>\n\n        ${this.__renderFieldFooter()}\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","html","nothing","classMap","styles","property","state"],"mappings":"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"}
+{"version":3,"file":"field.js","sources":["../../src/field/field.ts"],"sourcesContent":["import { html, LitElement, nothing } 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 './field.scss';\nimport IndividualComponent from '@/IndividualComponent.js';\n\n/**\n * @label Field\n * @tag wc-field\n * @rawTag field\n *\n * @summary Wrapper for form fields with label and help text.\n * @overview\n * <p>Field provides consistent styling and behavior for form inputs.</p>\n *\n * @example\n * ```html\n * <wc-field label=\"Name\" required>\n *   some text\n * </wc-field>\n * ```\n * @tags form\n */\n@IndividualComponent\nexport class Field extends LitElement {\n  static shadowRootOptions: ShadowRootInit = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  static styles = [styles];\n\n  /** Label text shown above the field input. */\n  @property({ type: String })\n  label: string = '';\n\n  /** Help text (deprecated — prefer `helperText`). */\n  @property({ type: String })\n  help: string = '';\n\n  /** When true, marks the field as required and shows a required indicator. */\n  @property({ type: Boolean })\n  required: boolean = false;\n\n  /** When true, the field and its slotted input are disabled. */\n  @property({ type: Boolean, reflect: true })\n  disabled: boolean = false;\n\n  /** When true, the field and its slotted input are read-only. */\n  @property({ type: Boolean, reflect: true })\n  readonly: boolean = false;\n\n  /** When true, renders the field in a loading skeleton state. */\n  @property({ type: Boolean })\n  skeleton: boolean = false;\n\n  /** Helper/hint text shown in the field footer. */\n  @property({ type: String, attribute: 'helper-text' })\n  helperText: string = '';\n\n  /** When true, the field is in an error state and `errorText` is shown. */\n  @property({ type: Boolean })\n  error: boolean = false;\n\n  /** Error message displayed when `error` is true. */\n  @property({ type: String, attribute: 'error-text' })\n  errorText: string = '';\n\n  /** When true, the field is in a warning state and `warningText` is shown. */\n  @property({ type: Boolean })\n  warning: boolean = false;\n\n  /** Warning message displayed when `warning` is true. */\n  @property({ type: String, attribute: 'warning-text' })\n  warningText: string = '';\n\n  /** Character / word count string displayed at the trailing end of the footer. */\n  @property({ type: String, attribute: 'text-count' })\n  textCount: string = '';\n\n  /** When true, applies focused styling (controlled externally by the slotted input). */\n  @property({ type: Boolean })\n  focused: boolean = false;\n\n  /** When true, applies populated styling (controlled externally by the slotted input). */\n  @property({ type: Boolean })\n  populated: boolean = false;\n\n  /** Visual variant of the field container. */\n  @property({ type: String })\n  variant: 'filled' | 'outlined' | 'default' = 'default';\n\n  /** Reference to the host input element; used to forward click-on-label focus. */\n  @property({ type: Object })\n  host?: HTMLElement;\n\n  /** True when the `field-start` slot contains at least one node. */\n  @state()\n  slotStartHasContent: boolean = false;\n\n  /** True when the `field-end` slot contains at least one node. */\n  @state()\n  slotEndHasContent: boolean = false;\n\n  firstUpdated() {\n    observerSlotChangesWithCallback(\n      this.renderRoot.querySelector('.slot-start-wrapper slot'),\n      hasContent => {\n        this.slotStartHasContent = hasContent;\n        this.requestUpdate();\n      },\n    );\n    observerSlotChangesWithCallback(\n      this.renderRoot.querySelector('.slot-end-wrapper slot'),\n      hasContent => {\n        this.slotEndHasContent = hasContent;\n        this.requestUpdate();\n      },\n    );\n  }\n\n  __handleClick() {\n    // @ts-ignore\n    this.host?.focus?.();\n  }\n\n  __renderInputSlot() {\n    if (this.variant === 'outlined') {\n      if (this.populated || this.focused) return html`<slot></slot>`;\n      return html`\n        <label class=\"outlined-label\">${this.label}</label>\n        <div class=\"outlined-slot-container\">\n          <slot></slot>\n        </div>\n      `;\n    }\n    return html`<slot></slot>`;\n  }\n\n  __renderFieldHeader() {\n    if (!this.label) return nothing;\n    if (this.variant === 'outlined' && !this.populated && !this.focused) {\n      return nothing;\n    }\n    return html`<div class=\"field-header\">\n      <label class=\"label\">\n        ${this.label}${this.required\n          ? html`<span class=\"required\">*</span>`\n          : nothing}\n        <wc-skeleton class=\"skeleton\"></wc-skeleton>\n      </label>\n    </div>`;\n  }\n\n  __renderFieldFooter() {\n    if (\n      !this.textCount &&\n      !this.helperText &&\n      !this.errorText &&\n      !this.warningText\n    )\n      return nothing;\n    return html`<div class=\"field-footer\">\n      ${this.__renderHelperText()} ${this.__renderWordCount()}\n    </div>`;\n  }\n\n  __renderHelperText() {\n    if (this.error) return html`<div class=\"helper\">${this.errorText}</div>`;\n    if (this.warning)\n      return html`<div class=\"helper\">${this.warningText}</div>`;\n    if (this.helperText || this.helperText === '')\n      return html`<div class=\"helper\">${this.helperText}</div>`;\n    return nothing;\n  }\n\n  __renderWordCount() {\n    if (!this.textCount) return nothing;\n    return html`<div class=\"text-count\">${this.textCount}</div>`;\n  }\n\n  render() {\n    const classes = {\n      field: true,\n      required: this.required,\n      disabled: this.disabled,\n      'show-skeleton': this.skeleton,\n      'has-error': this.error,\n      'has-warning': this.warning,\n      focused: this.focused,\n      readonly: this.readonly,\n      [`variant-${this.variant}`]: true,\n      populated: this.populated,\n    };\n\n    return html`\n      <div class=${classMap(classes)}>\n        ${this.__renderFieldHeader()}\n\n        <div class=\"field-body\" @click=${this.__handleClick}>\n          <div class=\"outline\"></div>\n          <div class=\"background\"></div>\n          <wc-skeleton class=\"skeleton\"></wc-skeleton>\n\n          <div class=\"field-content\">\n            <div\n              class=${classMap({\n                'slot-start-wrapper': true,\n                'has-content': this.slotStartHasContent,\n              })}\n            >\n              <slot name=\"field-start\"></slot>\n            </div>\n\n            <div class=\"input-wrapper\">${this.__renderInputSlot()}</div>\n\n            <div\n              class=${classMap({\n                'slot-end-wrapper': true,\n                'has-content': this.slotEndHasContent,\n              })}\n            >\n              <slot name=\"field-end\"></slot>\n            </div>\n          </div>\n        </div>\n\n        ${this.__renderFieldFooter()}\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","html","nothing","classMap","styles","property","state"],"mappings":"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"}

package/dist/{flow-designer-node-DsVwQTac.js → flow-designer-node-CGSm6cUH.js}

@@ -3,6 +3,7 @@ import { n } from './property-B49QQ8pS.js';
 
 var css_248z = i`* {
   box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
 }
 
 .screen-reader-only {
@@ -549,4 +550,4 @@ FlowDesignerNode = __decorate([
 ], FlowDesignerNode);
 
 export { FlowDesignerNode as F, css_248z as c };
-//# sourceMappingURL=flow-designer-node-DsVwQTac.js.map
+//# sourceMappingURL=flow-designer-node-CGSm6cUH.js.map