@redvars/peacock 3.8.6 → 3.9.1

package/dist/code-highlighter.js

@@ -84,7 +84,7 @@ var css_248z = i`* {
   align-items: center;
   justify-content: space-between;
   background-color: var(--code-highlighter-background);
-  margin-bottom: var(--spacing-050);
+  border-bottom: 1px solid var(--color-outline-variant);
   font-family: var(--typography-body-medium-font-family) !important;
   font-size: var(--typography-body-medium-font-size) !important;
   font-weight: var(--typography-body-medium-font-weight) !important;
@@ -118,9 +118,6 @@ var css_248z = i`* {
   line-height: var(--typography-code-medium-line-height) !important;
   letter-spacing: var(--typography-code-medium-letter-spacing) !important;
 }
-.code-highlighter.line-numbers {
-  margin-left: 3.75rem;
-}
 .code-highlighter.line-numbers .highlighter .shiki {
   /* Reset counter for line numbers */
   counter-reset: line-counter;

package/dist/code-highlighter.js.map

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

package/dist/custom-elements-jsdocs.json

@@ -1151,87 +1151,6 @@
       }
     }
   },
-  {
-    "label": "Canvas",
-    "tag": "wc-canvas",
-    "rawTag": "canvas",
-    "summary": "A SVG canvas for drawing shapes, lines, and connectors on a dotted grid.",
-    "cssprop": "--canvas-arrow-color - Stroke color for arrow markers. Defaults to on-surface.",
-    "example": "```html\n<wc-canvas id=\"my-canvas\"></wc-canvas>\n<script>\n  document.querySelector('#my-canvas').shapes = [\n    { type: 'circle', x: 0, y: 0, radius: 0.25, color: 'red' },\n  ];\n</script>\n```",
-    "customElement": {
-      "kind": "class",
-      "description": "",
-      "cssProperties": [
-        {
-          "description": "Background color for the canvas wrapper. Defaults to surface-container-low.",
-          "name": "--canvas-background"
-        },
-        {
-          "description": "Color of the background grid dots. Defaults to outline-variant.",
-          "name": "--canvas-dot-color"
-        },
-        {
-          "description": "Default stroke color for lines and connectors. Defaults to on-surface.",
-          "name": "--canvas-line-color"
-        },
-        {
-          "description": "Stroke color on hover for clickable shapes. Defaults to primary.",
-          "name": "--canvas-hover-color"
-        },
-        {
-          "description": "Stroke color for arrow markers. Defaults to on-surface.",
-          "name": "--canvas-arrow-color"
-        }
-      ],
-      "attributes": [
-        {
-          "name": "shapes",
-          "type": {
-            "text": "CanvasShape[]"
-          },
-          "default": "[]",
-          "description": "Array of shape objects to render on the canvas.",
-          "fieldName": "shapes"
-        },
-        {
-          "name": "padding",
-          "type": {
-            "text": "number"
-          },
-          "default": "1",
-          "description": "Padding around the computed viewbox (in grid units).",
-          "fieldName": "padding"
-        },
-        {
-          "name": "zoom",
-          "type": {
-            "text": "number"
-          },
-          "default": "1",
-          "description": "Zoom multiplier for the canvas dimensions.",
-          "fieldName": "zoom"
-        },
-        {
-          "name": "viewbox",
-          "type": {
-            "text": "string | undefined"
-          },
-          "description": "Optional viewbox override string (e.g. \"0 0 100 100\").",
-          "fieldName": "viewbox"
-        }
-      ],
-      "superclass": {
-        "name": "LitElement",
-        "package": "lit"
-      },
-      "tagName": "wc-canvas",
-      "customElement": true,
-      "rawTag": {
-        "name": "canvas",
-        "description": ""
-      }
-    }
-  },
   {
     "label": "Card",
     "tag": "wc-card",
@@ -3554,163 +3473,79 @@
     }
   },
   {
-    "label": "Flow Designer",
-    "tag": "wc-flow-designer",
-    "rawTag": "flow-designer",
-    "summary": "Low-code business process flow designer with swimlane layout, undo/redo, and interactive editing.",
-    "cssprop": "--flow-designer-action-bar-bg - Background color of the action bar. Defaults to surface-container.",
-    "example": "```html\n<wc-flow-designer id=\"editor\"></wc-flow-designer>\n<script>\n  const workflow = {\n    workflow_id: \"demo\",\n    nodes: {\n      id: \"node_1\",\n      type: \"trigger\",\n      label: \"Start\"\n    }\n  };\n  document.querySelector('#editor').workflow = workflow;\n</script>\n```",
+    "label": "Flow",
+    "tag": "wc-flow",
+    "rawTag": "flow",
+    "summary": "An interactive node editor canvas with draggable nodes, custom HTML element rendering, and mouse-based edge connection creation on a dotted grid.",
+    "example": "```html\n<wc-flow id=\"my-flow\"></wc-flow>\n<script>\n  const flow = document.getElementById('my-flow');\n  flow.nodes = [\n    { id: '1', position: { x: 50, y: 50 }, data: { label: 'Node 1' } },\n    { id: '2', position: { x: 250, y: 50 }, data: { label: 'Node 2' } }\n  ];\n  flow.edges = [\n    { id: 'e1-2', source: '1', target: '2' }\n  ];\n</script>\n```",
+    "cssprop": "--flow-arrow-color - Stroke color for arrow markers. Defaults to on-surface.",
     "customElement": {
       "kind": "class",
       "description": "",
       "cssProperties": [
         {
-          "description": "Height of the flow designer container. Defaults to 400px.",
-          "name": "--flow-designer-height"
-        },
-        {
-          "description": "Border color of the flow designer. Defaults to outline-variant.",
-          "name": "--flow-designer-border-color"
-        },
-        {
-          "description": "Background color of the designer. Defaults to surface.",
-          "name": "--flow-designer-background"
-        },
-        {
-          "description": "Corner radius. Defaults to medium shape.",
-          "name": "--flow-designer-border-radius"
-        },
-        {
-          "description": "Background color of the action bar. Defaults to surface-container.",
-          "name": "--flow-designer-action-bar-bg"
-        }
-      ],
-      "events": [
-        {
-          "name": "validation-result",
-          "type": {
-            "text": "CustomEvent"
-          }
+          "description": "Background color for the canvas wrapper. Defaults to surface-container-low.",
+          "name": "--flow-background"
         },
         {
-          "name": "workflow-changed",
-          "type": {
-            "text": "CustomEvent"
-          }
-        }
-      ],
-      "attributes": [
-        {
-          "name": "workflow",
-          "type": {
-            "text": "Workflow"
-          },
-          "default": "{ workflow_id: '', nodes: { id: 'root', type: 'trigger', label: 'Start' } }",
-          "description": "The workflow definition to display and edit",
-          "fieldName": "workflow"
+          "description": "Color of the background grid dots. Defaults to outline-variant.",
+          "name": "--flow-dot-color"
         },
         {
-          "name": "readonly",
-          "type": {
-            "text": "boolean"
-          },
-          "default": "false",
-          "description": "Whether the flow designer is in read-only mode",
-          "fieldName": "readonly"
+          "description": "Default stroke color for lines and connectors. Defaults to on-surface.",
+          "name": "--flow-line-color"
         },
         {
-          "name": "disabled",
-          "type": {
-            "text": "boolean"
-          },
-          "default": "false",
-          "description": "Whether the flow designer is disabled",
-          "fieldName": "disabled"
+          "description": "Stroke color on hover for clickable shapes. Defaults to primary.",
+          "name": "--flow-hover-color"
         },
         {
-          "name": "show-validation",
-          "type": {
-            "text": "boolean"
-          },
-          "default": "false",
-          "description": "Show validation errors/warnings",
-          "fieldName": "showValidation"
+          "description": "Stroke color for arrow markers. Defaults to on-surface.",
+          "name": "--flow-arrow-color"
         }
       ],
-      "superclass": {
-        "name": "LitElement",
-        "package": "lit"
-      },
-      "tagName": "wc-flow-designer",
-      "customElement": true,
-      "rawTag": {
-        "name": "flow-designer",
-        "description": ""
-      }
-    }
-  },
-  {
-    "tag": "wc-flow-designer-node",
-    "rawTag": "flow-designer-node",
-    "wip": "true",
-    "customElement": {
-      "kind": "class",
-      "description": "Individual node component for flow designer\nRenders a single workflow node with customizable slot templates",
       "attributes": [
         {
-          "name": "node",
+          "name": "nodes",
           "type": {
-            "text": "WorkflowNode"
+            "text": "FlowNode[]"
           },
-          "default": "{ id: '', type: 'action', label: '' }",
-          "description": "The workflow node to render",
-          "fieldName": "node"
-        },
-        {
-          "name": "selected",
-          "type": {
-            "text": "boolean"
-          },
-          "default": "false",
-          "description": "Whether this node is currently selected",
-          "fieldName": "isSelected"
+          "default": "[]",
+          "fieldName": "nodes"
         },
         {
-          "name": "editing",
+          "name": "edges",
           "type": {
-            "text": "boolean"
+            "text": "FlowEdge[]"
           },
-          "default": "false",
-          "description": "Whether this node is in edit mode",
-          "fieldName": "isEditing"
+          "default": "[]",
+          "fieldName": "edges"
         },
         {
-          "name": "disabled",
+          "name": "zoom",
           "type": {
-            "text": "boolean"
+            "text": "number"
           },
-          "default": "false",
-          "description": "Whether this node is disabled",
-          "fieldName": "disabled"
+          "default": "1",
+          "fieldName": "zoom"
         },
         {
-          "name": "show-delete",
+          "name": "padding",
           "type": {
-            "text": "boolean"
+            "text": "number"
           },
-          "default": "true",
-          "description": "Whether to show the delete button",
-          "fieldName": "showDelete"
+          "default": "50",
+          "fieldName": "padding"
         }
       ],
       "superclass": {
         "name": "LitElement",
         "package": "lit"
       },
-      "tagName": "wc-flow-designer-node",
+      "tagName": "wc-flow",
       "customElement": true,
       "rawTag": {
-        "name": "flow-designer-node",
+        "name": "flow",
         "description": ""
       }
     }
@@ -5324,9 +5159,9 @@
         {
           "name": "variant",
           "type": {
-            "text": "'standard' | 'vibrant'"
+            "text": "\"standard\" | \"vibrant\""
           },
-          "default": "'standard'",
+          "default": "\"standard\"",
           "description": "Visual variant of the menu. `\"vibrant\"` applies stronger color emphasis.",
           "fieldName": "variant"
         },
@@ -5335,7 +5170,7 @@
           "type": {
             "text": "string"
           },
-          "default": "''",
+          "default": "\"\"",
           "description": "ID of the anchor element the menu is positioned relative to.",
           "fieldName": "anchor"
         },
@@ -5380,7 +5215,7 @@
           "type": {
             "text": "Placement"
           },
-          "default": "'bottom-start'",
+          "default": "\"bottom-start\"",
           "description": "Floating UI placement of the menu relative to its anchor.",
           "fieldName": "placement"
         },
@@ -5422,7 +5257,7 @@
           "type": {
             "text": "string"
           },
-          "default": "''",
+          "default": "\"\"",
           "description": "The value associated with this menu item, used to identify it on selection.",
           "fieldName": "value",
           "inheritedFrom": {
@@ -5466,15 +5301,6 @@
           "description": "Whether the associated submenu is currently open.",
           "fieldName": "submenuOpen"
         },
-        {
-          "name": "variant",
-          "type": {
-            "text": "'standard' | 'vibrant'"
-          },
-          "default": "'standard'",
-          "description": "Visual variant of the menu item.",
-          "fieldName": "variant"
-        },
         {
           "name": "htmlType",
           "type": {
@@ -8815,6 +8641,60 @@
       }
     }
   },
+  {
+    "label": "Timeline",
+    "tag": "wc-timeline",
+    "rawTag": "timeline",
+    "summary": "A vertical timeline layout for a series of timeline items.",
+    "example": "```html\n<wc-timeline>\n  <wc-timeline-item description=\"Task completed\">\n    <span>Task title</span>\n    <wc-icon slot=\"dot\" name=\"check\"></wc-icon>\n  </wc-timeline-item>\n</wc-timeline>\n```",
+    "tags": "display",
+    "customElement": {
+      "kind": "class",
+      "description": "",
+      "superclass": {
+        "name": "LitElement",
+        "package": "lit"
+      },
+      "tagName": "wc-timeline",
+      "customElement": true,
+      "rawTag": {
+        "name": "timeline",
+        "description": ""
+      }
+    }
+  },
+  {
+    "label": "Timeline Item",
+    "tag": "wc-timeline-item",
+    "rawTag": "timeline-item",
+    "summary": "An item for use inside a timeline, with a dot/marker and description.",
+    "example": "```html\n<wc-timeline-item description=\"Step completed\">\n  <span>Step title</span>\n  <wc-icon slot=\"dot\" name=\"check\"></wc-icon>\n</wc-timeline-item>\n```",
+    "tags": "display",
+    "customElement": {
+      "kind": "class",
+      "description": "",
+      "attributes": [
+        {
+          "name": "loading",
+          "type": {
+            "text": "boolean"
+          },
+          "default": "false",
+          "fieldName": "loading"
+        }
+      ],
+      "superclass": {
+        "name": "LitElement",
+        "package": "lit"
+      },
+      "tagName": "wc-timeline-item",
+      "customElement": true,
+      "rawTag": {
+        "name": "timeline-item",
+        "description": ""
+      }
+    }
+  },
   {
     "label": "Time Picker",
     "tag": "wc-time-picker",