@record-evolution/widget-markdown 1.0.6 → 1.0.8

package/package.json

@@ -3,7 +3,7 @@
     "description": "Webcomponent widget-markdown following open-wc recommendations",
     "license": "MIT",
     "author": "widget-markdown",
-    "version": "1.0.6",
+    "version": "1.0.8",
     "engines": {
         "node": ">=24.9.0",
         "npm": ">=10.0.2"
@@ -30,7 +30,7 @@
     "dependencies": {
         "github-markdown-css": "^5.8.1",
         "highlight.js": "^11.11.1",
-        "lit": "^3.3.2",
+        "lit": "^3.3.3",
         "marked": "^16.3.0",
         "marked-highlight": "^2.2.3",
         "tslib": "^2.8.1"

package/src/definition-schema.d.ts

@@ -25,7 +25,7 @@ export type Variables = {
 /**
  * A markdown rendering widget for displaying formatted text with dynamic variable substitution. Use this widget for documentation, instructions, dynamic reports, or any rich text content on dashboards. Supports full Markdown syntax including headers, lists, tables, links, and code blocks. Variables can be embedded using {{variableName}} notation and bound to data sources for real-time updates. Ideal for creating contextual help, status summaries, or narrative text that incorporates live data values.
  */
-export interface InputData {
+export interface MarkdownConfiguration {
   markdown?: Markdown;
   data?: Variables;
   [k: string]: unknown;

package/src/definition-schema.json

@@ -1,6 +1,20 @@
 {
-    "title": "InputData",
+    "title": "Markdown Configuration",
     "description": "A markdown rendering widget for displaying formatted text with dynamic variable substitution. Use this widget for documentation, instructions, dynamic reports, or any rich text content on dashboards. Supports full Markdown syntax including headers, lists, tables, links, and code blocks. Variables can be embedded using {{variableName}} notation and bound to data sources for real-time updates. Ideal for creating contextual help, status summaries, or narrative text that incorporates live data values.",
+    "aiSelection": {
+        "dataShape": "A Markdown document, with {{variableName}} placeholders substituted from data[] entries that each bind a label to a live value.",
+        "useWhen": [
+            "Prose, documentation, instructions or a written summary belongs on the dashboard.",
+            "The text needs structure or markup — headings, lists, links, tables, code blocks.",
+            "A narrative should incorporate live numbers, e.g. 'Line 3 produced {{units}} units today'."
+        ],
+        "notFor": [
+            "A single styled string with no markup — use widget-label; a Markdown renderer is overkill.",
+            "Fixed title / subtitle / body sections with per-section typography — use widget-textbox.",
+            "Tabular data coming from a query rather than written by hand — use widget-table.",
+            "Numbers that should be read as figures rather than embedded in a sentence — use widget-value."
+        ]
+    },
     "type": "object",
     "properties": {
         "markdown": {

package/src/widget-markdown.ts

@@ -16,7 +16,7 @@ import cssLang from 'highlight.js/lib/languages/css'
 import highlightCSS from 'highlight.js/styles/github.css?inline'
 import githubCss from 'github-markdown-css/github-markdown.css?inline'
 import { customElement, property, state } from 'lit/decorators.js'
-import { InputData } from './definition-schema'
+import { MarkdownConfiguration } from './definition-schema'
 
 hljs.registerLanguage('shell', shell)
 hljs.registerLanguage('bash', shell)
@@ -37,7 +37,7 @@ type Theme = {
 @customElement('widget-markdown-versionplaceholder')
 export class WidgetMarkdown extends LitElement {
     @property({ type: Object })
-    inputData?: InputData
+    inputData?: MarkdownConfiguration
 
     @property({ type: Object })
     theme?: Theme
@@ -159,6 +159,29 @@ export class WidgetMarkdown extends LitElement {
                 overflow: auto;
                 padding: 1cqh 1cqw;
                 box-sizing: border-box;
+                /* Derive scrollbar colors from the (inherited) text color so they
+                   follow custom styles and themes — e.g. light thumb on dark bg. */
+                scrollbar-width: thin;
+                scrollbar-color: color-mix(in srgb, currentColor 35%, transparent) transparent;
+            }
+
+            /* WebKit/Blink fallback for browsers without scrollbar-color support. */
+            .wrapper::-webkit-scrollbar {
+                width: 8px;
+                height: 8px;
+            }
+
+            .wrapper::-webkit-scrollbar-track {
+                background: transparent;
+            }
+
+            .wrapper::-webkit-scrollbar-thumb {
+                background-color: color-mix(in srgb, currentColor 35%, transparent);
+                border-radius: 4px;
+            }
+
+            .wrapper::-webkit-scrollbar-thumb:hover {
+                background-color: color-mix(in srgb, currentColor 55%, transparent);
             }
 
             h2 {