@triptease/design-system-mcp 1.0.5 → 1.0.6

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @triptease/design-system-mcp
 
+## 1.0.6
+
+### Patch Changes
+
+- fe201c2: Include tt-milestone in tt-line-chart manifest entry
+- Add statistic to component manifest
+
 ## 1.0.5
 
 ### Patch Changes

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@triptease/design-system-mcp",
-    "version": "1.0.5",
+    "version": "1.0.6",
     "description": "MCP server for Triptease design system documentation",
     "type": "module",
     "main": "dist/src/index.js",
@@ -29,6 +29,7 @@
         "@triptease/tt-dialog": "5.1.1",
         "@triptease/tt-highlight": "1.0.2",
         "@triptease/tt-line-chart": "1.0.10",
+        "@triptease/tt-milestone": "1.0.0",
         "zod": "^4.3.6"
     },
     "devDependencies": {

package/dist/src/manifests/components/entries/lineChart.js

@@ -4,6 +4,7 @@ const latestLineChartVersion = packageJson.dependencies['@triptease/tt-line-char
 const latestDatasetVersion = packageJson.dependencies['@triptease/tt-dataset'];
 const latestDataPointVersion = packageJson.dependencies['@triptease/tt-data-point'];
 const latestHighlightVersion = packageJson.dependencies['@triptease/tt-highlight'];
+const latestMilestoneVersion = packageJson.dependencies['@triptease/tt-milestone'];
 export default {
     'line-chart': {
         name: 'Line Chart - Web Component',
@@ -27,6 +28,7 @@ export default {
                 { name: '@triptease/tt-dataset', includesTypes: true, optional: false },
                 { name: '@triptease/tt-data-point', includesTypes: true, optional: false },
                 { name: '@triptease/tt-highlight', includesTypes: true, optional: true },
+                { name: '@triptease/tt-milestone', includesTypes: true, optional: true },
             ],
             cdn: [
                 {
@@ -66,6 +68,15 @@ export default {
                     latestVersionUrl: buildCDNUrl('tt-highlight', 'latest'),
                     guidance: 'Prefer pinned major version URL to avoid unexpected breaking changes. Do not use latest version URL in production code.',
                 },
+                {
+                    name: 'tt-milestone',
+                    includesTypes: false,
+                    optional: true,
+                    pinnedVersionUrl: buildCDNUrl('tt-milestone', latestMilestoneVersion),
+                    pinnedMajorVersionUrl: buildCDNUrl('tt-milestone', buildMajorVersion(latestMilestoneVersion)),
+                    latestVersionUrl: buildCDNUrl('tt-milestone', 'latest'),
+                    guidance: 'Prefer pinned major version URL to avoid unexpected breaking changes. Do not use latest version URL in production code.',
+                },
             ],
         },
         attributes: {
@@ -134,6 +145,19 @@ import '@triptease/tt-data-point';
     <tt-data-point label="Jan 2" value={48}></tt-data-point>
   </tt-dataset>
   <tt-highlight label="Easter Boost" from="15 Mar" to="5 Apr"></tt-highlight>
+</tt-line-chart>;`,
+            },
+            {
+                title: 'With milestones',
+                description: 'Use milestones to draw attention to and label significant points in time on a chart. Only use when something significant occurred that may have affected the data, or to mark an important point in time (e.g. today, start, finish). Use sparingly and highlight only the most important events to avoid clutter. Avoid positioning milestones too close together as labels may overlap and become difficult to read. Do not use when displaying multiple datasets if the milestone applies to only one dataset, as users may assume it applies to all.',
+                code: `import '@triptease/tt-milestone';
+
+<tt-line-chart id="highlighted-chart" height="20rem">
+  <tt-dataset label="2025">
+    <tt-data-point label="Jan 1" value={45}></tt-data-point>
+    <tt-data-point label="Jan 2" value={48}></tt-data-point>
+  </tt-dataset>
+  <tt-milestone label="Todayt" value="Jan 2"></tt-milestone>
 </tt-line-chart>;`,
             },
         ],

package/dist/src/manifests/components/entries/lineChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"lineChart.js","sourceRoot":"","sources":["../../../../../src/manifests/components/entries/lineChart.ts"],"names":[],"mappings":"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","sourcesContent":["import { ComponentManifest } from '@/manifests/components/types.js';\nimport { buildCDNUrl, buildMajorVersion } from '@/utils/buildCDNUrls.js';\nimport packageJson from '@/../package.json' with { type: 'json' };\n\nconst latestLineChartVersion = packageJson.dependencies['@triptease/tt-line-chart'];\nconst latestDatasetVersion = packageJson.dependencies['@triptease/tt-dataset'];\nconst latestDataPointVersion = packageJson.dependencies['@triptease/tt-data-point'];\nconst latestHighlightVersion = packageJson.dependencies['@triptease/tt-highlight'];\n\nexport default {\n  'line-chart': {\n    name: 'Line Chart - Web Component',\n    description: 'Line chart for visualizing trends over continuous data',\n    ssrSafe: true,\n    element: 'tt-line-chart',\n    usageGuidance: {\n      whenToUse: [\n        'To visualize trends along a continuous x-axis',\n        'To compare how multiple datasets for the same measure change relative to each other',\n      ],\n      avoid: [\n        'When the x-axis does not represent a continuous range (use a bar chart instead)',\n        'When there are too few data points to form a meaningful trend (use a bar chart instead)',\n        'When comparing datasets that do not have a meaningful or explainable relationship',\n      ],\n    },\n    installationOptions: {\n      npm: [\n        { name: '@triptease/tt-line-chart', includesTypes: true, optional: false },\n        { name: '@triptease/tt-dataset', includesTypes: true, optional: false },\n        { name: '@triptease/tt-data-point', includesTypes: true, optional: false },\n        { name: '@triptease/tt-highlight', includesTypes: true, optional: true },\n      ],\n      cdn: [\n        {\n          name: 'tt-line-chart',\n          includesTypes: false,\n          optional: false,\n          pinnedVersionUrl: buildCDNUrl('tt-line-chart', latestLineChartVersion),\n          pinnedMajorVersionUrl: buildCDNUrl('tt-line-chart', buildMajorVersion(latestLineChartVersion)),\n          latestVersionUrl: buildCDNUrl('tt-line-chart', 'latest'),\n          guidance:\n            'Prefer pinned major version URL to avoid unexpected breaking changes. Do not use latest version URL in production code.',\n        },\n        {\n          name: 'tt-dataset',\n          includesTypes: false,\n          optional: false,\n          moduleFormat: 'esm',\n          pinnedVersionUrl: buildCDNUrl('tt-dataset', latestDatasetVersion),\n          pinnedMajorVersionUrl: buildCDNUrl('tt-dataset', buildMajorVersion(latestDatasetVersion)),\n          latestVersionUrl: buildCDNUrl('tt-dataset', 'latest'),\n          guidance:\n            'Prefer pinned major version URL to avoid unexpected breaking changes. Do not use latest version URL in production code.',\n        },\n        {\n          name: 'tt-data-point',\n          includesTypes: false,\n          optional: false,\n          pinnedVersionUrl: buildCDNUrl('tt-data-point', latestDataPointVersion),\n          pinnedMajorVersionUrl: buildCDNUrl('tt-data-point', buildMajorVersion(latestDataPointVersion)),\n          latestVersionUrl: buildCDNUrl('tt-data-point', 'latest'),\n          guidance:\n            'Prefer pinned major version URL to avoid unexpected breaking changes. Do not use latest version URL in production code.',\n        },\n        {\n          name: 'tt-highlight',\n          includesTypes: false,\n          optional: true,\n          pinnedVersionUrl: buildCDNUrl('tt-highlight', latestHighlightVersion),\n          pinnedMajorVersionUrl: buildCDNUrl('tt-highlight', buildMajorVersion(latestHighlightVersion)),\n          latestVersionUrl: buildCDNUrl('tt-highlight', 'latest'),\n          guidance:\n            'Prefer pinned major version URL to avoid unexpected breaking changes. Do not use latest version URL in production code.',\n        },\n      ],\n    },\n    attributes: {\n      width: {\n        type: 'string',\n        description: 'Width of chart (any CSS value). Defaults to 100% to fill container.',\n      },\n      height: {\n        type: 'string',\n        description: 'Height of chart (any CSS value). Defaults to 100% to fill container.',\n      },\n      'x-axis-title': {\n        type: 'string',\n        description: 'Title for x-axis. Use to clarify units of measurement. Keep concise.',\n      },\n      'y-axis-title': {\n        type: 'string',\n        description: 'Title for y-axis. Use to clarify units of measurement. Keep concise.',\n      },\n      loading: {\n        type: 'boolean',\n        description: 'Show loading state while data fetches. Component handles aria-busy automatically.',\n      },\n      'hide-numbers': {\n        type: 'boolean',\n        description:\n          'Hide y-axis numbers and tooltips. Use when numbers could mislead. Removes ARIA labels, so provide trend description.',\n      },\n    },\n    examples: [\n      {\n        title: 'Basic line chart',\n        code: `import '@triptease/tt-line-chart';\nimport '@triptease/tt-dataset';\nimport '@triptease/tt-data-point';\n\n<tt-line-chart id=\"basic-chart\">\n  <tt-dataset label=\"2024\">\n    <tt-data-point label=\"Jan 1\" value={45}></tt-data-point>\n    <tt-data-point label=\"Jan 2\" value={48}></tt-data-point>\n    <tt-data-point label=\"Jan 3\" value={52}></tt-data-point>\n  </tt-dataset>\n</tt-line-chart>`,\n      },\n      {\n        title: 'Multiple datasets',\n        description:\n          'Use multiple datasets to compare trends of the same measure for different groups. Limit datasets to a maximum of 4, as more datasets make the chart difficult to read and compare. The component automatically uses symbols to help identify each dataset without relying on color.',\n        code: `<tt-line-chart id=\"multiple-datasets\" height=\"20rem\">\n  <tt-dataset label=\"2025\">\n    <tt-data-point label=\"Jan 1\" value={45}></tt-data-point>\n    <tt-data-point label=\"Jan 2\" value={48}></tt-data-point>\n  </tt-dataset>\n  <tt-dataset label=\"2024\">\n    <tt-data-point label=\"Jan 1\" value={42}></tt-data-point>\n    <tt-data-point label=\"Jan 2\" value={44}></tt-data-point>\n  </tt-dataset>\n</tt-line-chart>`,\n      },\n      {\n        title: 'With highlighted regions',\n        description:\n          'Use highlighted regions to draw attention to and label significant intervals. Only use when something significant occurs that may have affected the data. Use sparingly and highlight only the most important intervals to avoid clutter. Avoid overlapping regions as this can make it difficult to see where each interval starts and ends. Do not use when displaying multiple datasets if the highlight applies to only one dataset, as users may assume it applies to all.',\n        code: `import '@triptease/tt-highlight';\n\n<tt-line-chart id=\"highlighted-chart\" height=\"20rem\">\n  <tt-dataset label=\"2025\">\n    <tt-data-point label=\"Jan 1\" value={45}></tt-data-point>\n    <tt-data-point label=\"Jan 2\" value={48}></tt-data-point>\n  </tt-dataset>\n  <tt-highlight label=\"Easter Boost\" from=\"15 Mar\" to=\"5 Apr\"></tt-highlight>\n</tt-line-chart>;`,\n      },\n    ],\n  },\n} satisfies ComponentManifest;\n"]}
+{"version":3,"file":"lineChart.js","sourceRoot":"","sources":["../../../../../src/manifests/components/entries/lineChart.ts"],"names":[],"mappings":"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","sourcesContent":["import { ComponentManifest } from '@/manifests/components/types.js';\nimport { buildCDNUrl, buildMajorVersion } from '@/utils/buildCDNUrls.js';\nimport packageJson from '@/../package.json' with { type: 'json' };\n\nconst latestLineChartVersion = packageJson.dependencies['@triptease/tt-line-chart'];\nconst latestDatasetVersion = packageJson.dependencies['@triptease/tt-dataset'];\nconst latestDataPointVersion = packageJson.dependencies['@triptease/tt-data-point'];\nconst latestHighlightVersion = packageJson.dependencies['@triptease/tt-highlight'];\nconst latestMilestoneVersion = packageJson.dependencies['@triptease/tt-milestone'];\n\nexport default {\n  'line-chart': {\n    name: 'Line Chart - Web Component',\n    description: 'Line chart for visualizing trends over continuous data',\n    ssrSafe: true,\n    element: 'tt-line-chart',\n    usageGuidance: {\n      whenToUse: [\n        'To visualize trends along a continuous x-axis',\n        'To compare how multiple datasets for the same measure change relative to each other',\n      ],\n      avoid: [\n        'When the x-axis does not represent a continuous range (use a bar chart instead)',\n        'When there are too few data points to form a meaningful trend (use a bar chart instead)',\n        'When comparing datasets that do not have a meaningful or explainable relationship',\n      ],\n    },\n    installationOptions: {\n      npm: [\n        { name: '@triptease/tt-line-chart', includesTypes: true, optional: false },\n        { name: '@triptease/tt-dataset', includesTypes: true, optional: false },\n        { name: '@triptease/tt-data-point', includesTypes: true, optional: false },\n        { name: '@triptease/tt-highlight', includesTypes: true, optional: true },\n        { name: '@triptease/tt-milestone', includesTypes: true, optional: true },\n      ],\n      cdn: [\n        {\n          name: 'tt-line-chart',\n          includesTypes: false,\n          optional: false,\n          pinnedVersionUrl: buildCDNUrl('tt-line-chart', latestLineChartVersion),\n          pinnedMajorVersionUrl: buildCDNUrl('tt-line-chart', buildMajorVersion(latestLineChartVersion)),\n          latestVersionUrl: buildCDNUrl('tt-line-chart', 'latest'),\n          guidance:\n            'Prefer pinned major version URL to avoid unexpected breaking changes. Do not use latest version URL in production code.',\n        },\n        {\n          name: 'tt-dataset',\n          includesTypes: false,\n          optional: false,\n          moduleFormat: 'esm',\n          pinnedVersionUrl: buildCDNUrl('tt-dataset', latestDatasetVersion),\n          pinnedMajorVersionUrl: buildCDNUrl('tt-dataset', buildMajorVersion(latestDatasetVersion)),\n          latestVersionUrl: buildCDNUrl('tt-dataset', 'latest'),\n          guidance:\n            'Prefer pinned major version URL to avoid unexpected breaking changes. Do not use latest version URL in production code.',\n        },\n        {\n          name: 'tt-data-point',\n          includesTypes: false,\n          optional: false,\n          pinnedVersionUrl: buildCDNUrl('tt-data-point', latestDataPointVersion),\n          pinnedMajorVersionUrl: buildCDNUrl('tt-data-point', buildMajorVersion(latestDataPointVersion)),\n          latestVersionUrl: buildCDNUrl('tt-data-point', 'latest'),\n          guidance:\n            'Prefer pinned major version URL to avoid unexpected breaking changes. Do not use latest version URL in production code.',\n        },\n        {\n          name: 'tt-highlight',\n          includesTypes: false,\n          optional: true,\n          pinnedVersionUrl: buildCDNUrl('tt-highlight', latestHighlightVersion),\n          pinnedMajorVersionUrl: buildCDNUrl('tt-highlight', buildMajorVersion(latestHighlightVersion)),\n          latestVersionUrl: buildCDNUrl('tt-highlight', 'latest'),\n          guidance:\n            'Prefer pinned major version URL to avoid unexpected breaking changes. Do not use latest version URL in production code.',\n        },\n        {\n          name: 'tt-milestone',\n          includesTypes: false,\n          optional: true,\n          pinnedVersionUrl: buildCDNUrl('tt-milestone', latestMilestoneVersion),\n          pinnedMajorVersionUrl: buildCDNUrl('tt-milestone', buildMajorVersion(latestMilestoneVersion)),\n          latestVersionUrl: buildCDNUrl('tt-milestone', 'latest'),\n          guidance:\n            'Prefer pinned major version URL to avoid unexpected breaking changes. Do not use latest version URL in production code.',\n        },\n      ],\n    },\n    attributes: {\n      width: {\n        type: 'string',\n        description: 'Width of chart (any CSS value). Defaults to 100% to fill container.',\n      },\n      height: {\n        type: 'string',\n        description: 'Height of chart (any CSS value). Defaults to 100% to fill container.',\n      },\n      'x-axis-title': {\n        type: 'string',\n        description: 'Title for x-axis. Use to clarify units of measurement. Keep concise.',\n      },\n      'y-axis-title': {\n        type: 'string',\n        description: 'Title for y-axis. Use to clarify units of measurement. Keep concise.',\n      },\n      loading: {\n        type: 'boolean',\n        description: 'Show loading state while data fetches. Component handles aria-busy automatically.',\n      },\n      'hide-numbers': {\n        type: 'boolean',\n        description:\n          'Hide y-axis numbers and tooltips. Use when numbers could mislead. Removes ARIA labels, so provide trend description.',\n      },\n    },\n    examples: [\n      {\n        title: 'Basic line chart',\n        code: `import '@triptease/tt-line-chart';\nimport '@triptease/tt-dataset';\nimport '@triptease/tt-data-point';\n\n<tt-line-chart id=\"basic-chart\">\n  <tt-dataset label=\"2024\">\n    <tt-data-point label=\"Jan 1\" value={45}></tt-data-point>\n    <tt-data-point label=\"Jan 2\" value={48}></tt-data-point>\n    <tt-data-point label=\"Jan 3\" value={52}></tt-data-point>\n  </tt-dataset>\n</tt-line-chart>`,\n      },\n      {\n        title: 'Multiple datasets',\n        description:\n          'Use multiple datasets to compare trends of the same measure for different groups. Limit datasets to a maximum of 4, as more datasets make the chart difficult to read and compare. The component automatically uses symbols to help identify each dataset without relying on color.',\n        code: `<tt-line-chart id=\"multiple-datasets\" height=\"20rem\">\n  <tt-dataset label=\"2025\">\n    <tt-data-point label=\"Jan 1\" value={45}></tt-data-point>\n    <tt-data-point label=\"Jan 2\" value={48}></tt-data-point>\n  </tt-dataset>\n  <tt-dataset label=\"2024\">\n    <tt-data-point label=\"Jan 1\" value={42}></tt-data-point>\n    <tt-data-point label=\"Jan 2\" value={44}></tt-data-point>\n  </tt-dataset>\n</tt-line-chart>`,\n      },\n      {\n        title: 'With highlighted regions',\n        description:\n          'Use highlighted regions to draw attention to and label significant intervals. Only use when something significant occurs that may have affected the data. Use sparingly and highlight only the most important intervals to avoid clutter. Avoid overlapping regions as this can make it difficult to see where each interval starts and ends. Do not use when displaying multiple datasets if the highlight applies to only one dataset, as users may assume it applies to all.',\n        code: `import '@triptease/tt-highlight';\n\n<tt-line-chart id=\"highlighted-chart\" height=\"20rem\">\n  <tt-dataset label=\"2025\">\n    <tt-data-point label=\"Jan 1\" value={45}></tt-data-point>\n    <tt-data-point label=\"Jan 2\" value={48}></tt-data-point>\n  </tt-dataset>\n  <tt-highlight label=\"Easter Boost\" from=\"15 Mar\" to=\"5 Apr\"></tt-highlight>\n</tt-line-chart>;`,\n      },\n      {\n        title: 'With milestones',\n        description:\n          'Use milestones to draw attention to and label significant points in time on a chart. Only use when something significant occurred that may have affected the data, or to mark an important point in time (e.g. today, start, finish). Use sparingly and highlight only the most important events to avoid clutter. Avoid positioning milestones too close together as labels may overlap and become difficult to read. Do not use when displaying multiple datasets if the milestone applies to only one dataset, as users may assume it applies to all.',\n        code: `import '@triptease/tt-milestone';\n\n<tt-line-chart id=\"highlighted-chart\" height=\"20rem\">\n  <tt-dataset label=\"2025\">\n    <tt-data-point label=\"Jan 1\" value={45}></tt-data-point>\n    <tt-data-point label=\"Jan 2\" value={48}></tt-data-point>\n  </tt-dataset>\n  <tt-milestone label=\"Todayt\" value=\"Jan 2\"></tt-milestone>\n</tt-line-chart>;`,\n      },\n    ],\n  },\n} satisfies ComponentManifest;\n"]}

package/dist/src/manifests/components/entries/statistic.d.ts

@@ -0,0 +1,21 @@
+declare const _default: {
+    statistic: {
+        name: string;
+        description: string;
+        element: string;
+        usageGuidance: {
+            whenToUse: string[];
+            avoid: string[];
+        };
+        examples: ({
+            title: string;
+            code: string;
+            description?: undefined;
+        } | {
+            title: string;
+            description: string;
+            code: string;
+        })[];
+    };
+};
+export default _default;

package/dist/src/manifests/components/entries/statistic.js

@@ -0,0 +1,69 @@
+export default {
+    statistic: {
+        name: 'Statistic',
+        description: 'A consistent, structured layout for displaying a statistic or a few statistics.',
+        element: 'div',
+        usageGuidance: {
+            whenToUse: [
+                'Highlight a single key metric with a label (e.g. "All Sessions: 3,000").',
+                'Surface at-a-glance KPIs on dashboards or summary cards.',
+                'Show a value alongside a status indicator (e.g. "Good", "+3 vs last month").',
+                'Provide brief contextual notes about how a value was calculated.',
+            ],
+            avoid: [
+                'When comparing multiple attributes across items, so use a Table instead.',
+                'When showing trends over time, use a chart or graph.',
+                'When the value requires significant explanation, use a more detailed content component.',
+            ],
+        },
+        examples: [
+            {
+                title: 'Basic statistic',
+                code: `
+        <div class="card">
+          <div class="statistic">
+            <p class="statistic--label">Booked Room Nights</p>
+            <p class="statistic--value">30</p>
+          </div>
+        </div>`,
+            },
+            {
+                title: 'With Indicator',
+                description: 'Use to highlight the status of a statistic or a change in its value. Use a badge to communicate overall status, such as “Good”, “Warning”, or “OK”. Use text to indicate change compared to a previous period, such as “+3 vs last month”. When showing change, apply the appropriate CSS color tokens to signal whether the value is positive or negative. Keep the indicator concise and directly related to the primary statistic.',
+                code: `
+         <div>
+           <div class="card">
+            <div class="statistic">
+              <p class="statistic--label">Booked Room Nights</p>
+              <p class="statistic--value">30</p>
+              <p class="badge statistic--indicator" data-theme="success">
+                Good
+              </p>
+            </div>
+            <div class="statistic">
+              <p class="statistic--label">Sessions with Search</p>
+              <p class="statistic--value">5,937</p>
+              <p class="statistic--indicator" style="color: var(--color-success-500)">
+                +30 vs last month
+              </p>
+            </div>
+          </div>   
+        </div>
+        `,
+            },
+            {
+                title: 'With Context',
+                description: 'Use to provide brief explanatory information about the statistic. Example scenarios: To clarify what the statistic represents, how it was calculated or how it relates to other information on the page. Keep context concise and supplementary; it should clarify the value, not compete with it. Do not recolor the value as this can draw undue attention.',
+                code: `
+        <div class="card">
+          <div class="statistic">
+            <p class="statistic--label">Booked Room Nights</p>
+            <p class="statistic--value">30</p>
+            <p class="statistic--context">Includes canceled stays</p>
+          </div>
+        </div>`,
+            },
+        ],
+    },
+};
+//# sourceMappingURL=statistic.js.map

package/dist/src/manifests/components/entries/statistic.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"statistic.js","sourceRoot":"","sources":["../../../../../src/manifests/components/entries/statistic.ts"],"names":[],"mappings":"AAEA,eAAe;IACb,SAAS,EAAE;QACT,IAAI,EAAE,WAAW;QACjB,WAAW,EAAE,iFAAiF;QAC9F,OAAO,EAAE,KAAK;QACd,aAAa,EAAE;YACb,SAAS,EAAE;gBACT,0EAA0E;gBAC1E,0DAA0D;gBAC1D,8EAA8E;gBAC9E,kEAAkE;aACnE;YACD,KAAK,EAAE;gBACL,0EAA0E;gBAC1E,sDAAsD;gBACtD,yFAAyF;aAC1F;SACF;QACD,QAAQ,EAAE;YACR;gBACE,KAAK,EAAE,iBAAiB;gBACxB,IAAI,EAAE;;;;;;eAMC;aACR;YACD;gBACE,KAAK,EAAE,gBAAgB;gBACvB,WAAW,EACT,uaAAua;gBACza,IAAI,EAAE;;;;;;;;;;;;;;;;;;;SAmBL;aACF;YACD;gBACE,KAAK,EAAE,cAAc;gBACrB,WAAW,EACT,+VAA+V;gBACjW,IAAI,EAAE;;;;;;;eAOC;aACR;SACF;KACF;CAC0B,CAAC","sourcesContent":["import { ComponentManifest } from '@/manifests/components/types.js';\n\nexport default {\n  statistic: {\n    name: 'Statistic',\n    description: 'A consistent, structured layout for displaying a statistic or a few statistics.',\n    element: 'div',\n    usageGuidance: {\n      whenToUse: [\n        'Highlight a single key metric with a label (e.g. \"All Sessions: 3,000\").',\n        'Surface at-a-glance KPIs on dashboards or summary cards.',\n        'Show a value alongside a status indicator (e.g. \"Good\", \"+3 vs last month\").',\n        'Provide brief contextual notes about how a value was calculated.',\n      ],\n      avoid: [\n        'When comparing multiple attributes across items, so use a Table instead.',\n        'When showing trends over time, use a chart or graph.',\n        'When the value requires significant explanation, use a more detailed content component.',\n      ],\n    },\n    examples: [\n      {\n        title: 'Basic statistic',\n        code: `\n        <div class=\"card\">\n          <div class=\"statistic\">\n            <p class=\"statistic--label\">Booked Room Nights</p>\n            <p class=\"statistic--value\">30</p>\n          </div>\n        </div>`,\n      },\n      {\n        title: 'With Indicator',\n        description:\n          'Use to highlight the status of a statistic or a change in its value. Use a badge to communicate overall status, such as “Good”, “Warning”, or “OK”. Use text to indicate change compared to a previous period, such as “+3 vs last month”. When showing change, apply the appropriate CSS color tokens to signal whether the value is positive or negative. Keep the indicator concise and directly related to the primary statistic.',\n        code: `\n         <div>\n           <div class=\"card\">\n            <div class=\"statistic\">\n              <p class=\"statistic--label\">Booked Room Nights</p>\n              <p class=\"statistic--value\">30</p>\n              <p class=\"badge statistic--indicator\" data-theme=\"success\">\n                Good\n              </p>\n            </div>\n            <div class=\"statistic\">\n              <p class=\"statistic--label\">Sessions with Search</p>\n              <p class=\"statistic--value\">5,937</p>\n              <p class=\"statistic--indicator\" style=\"color: var(--color-success-500)\">\n                +30 vs last month\n              </p>\n            </div>\n          </div>   \n        </div>\n        `,\n      },\n      {\n        title: 'With Context',\n        description:\n          'Use to provide brief explanatory information about the statistic. Example scenarios: To clarify what the statistic represents, how it was calculated or how it relates to other information on the page. Keep context concise and supplementary; it should clarify the value, not compete with it. Do not recolor the value as this can draw undue attention.',\n        code: `\n        <div class=\"card\">\n          <div class=\"statistic\">\n            <p class=\"statistic--label\">Booked Room Nights</p>\n            <p class=\"statistic--value\">30</p>\n            <p class=\"statistic--context\">Includes canceled stays</p>\n          </div>\n        </div>`,\n      },\n    ],\n  },\n} satisfies ComponentManifest;\n"]}

package/dist/src/manifests/components/index.js

@@ -16,6 +16,7 @@ import datePicker from '../../manifests/components/entries/datePicker.js';
 import dateRangePicker from '../../manifests/components/entries/dateRangePicker.js';
 import barChart from '../../manifests/components/entries/barChart.js';
 import lineChart from '../../manifests/components/entries/lineChart.js';
+import statistic from '../../manifests/components/entries/statistic.js';
 export const componentManifest = {
     ...button,
     ...textinput,
@@ -35,5 +36,6 @@ export const componentManifest = {
     ...dateRangePicker,
     ...barChart,
     ...lineChart,
+    ...statistic,
 };
 //# sourceMappingURL=index.js.map

package/dist/src/manifests/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/manifests/components/index.ts"],"names":[],"mappings":"AAEA,OAAO,MAAM,MAAM,0CAA0C,CAAC;AAC9D,OAAO,SAAS,MAAM,6CAA6C,CAAC;AACpE,OAAO,WAAW,MAAM,+CAA+C,CAAC;AACxE,OAAO,QAAQ,MAAM,4CAA4C,CAAC;AAClE,OAAO,MAAM,MAAM,0CAA0C,CAAC;AAC9D,OAAO,QAAQ,MAAM,4CAA4C,CAAC;AAClE,OAAO,KAAK,MAAM,yCAAyC,CAAC;AAC5D,OAAO,MAAM,MAAM,0CAA0C,CAAC;AAC9D,OAAO,KAAK,MAAM,yCAAyC,CAAC;AAC5D,OAAO,IAAI,MAAM,wCAAwC,CAAC;AAC1D,OAAO,KAAK,MAAM,yCAAyC,CAAC;AAC5D,OAAO,UAAU,MAAM,8CAA8C,CAAC;AACtE,OAAO,MAAM,MAAM,0CAA0C,CAAC;AAC9D,OAAO,QAAQ,MAAM,4CAA4C,CAAC;AAClE,OAAO,UAAU,MAAM,8CAA8C,CAAC;AACtE,OAAO,eAAe,MAAM,mDAAmD,CAAC;AAChF,OAAO,QAAQ,MAAM,4CAA4C,CAAC;AAClE,OAAO,SAAS,MAAM,6CAA6C,CAAC;AAEpE,MAAM,CAAC,MAAM,iBAAiB,GAAsB;IAClD,GAAG,MAAM;IACT,GAAG,SAAS;IACZ,GAAG,WAAW;IACd,GAAG,QAAQ;IACX,GAAG,MAAM;IACT,GAAG,QAAQ;IACX,GAAG,KAAK;IACR,GAAG,MAAM;IACT,GAAG,KAAK;IACR,GAAG,IAAI;IACP,GAAG,KAAK;IACR,GAAG,UAAU;IACb,GAAG,MAAM;IACT,GAAG,QAAQ;IACX,GAAG,UAAU;IACb,GAAG,eAAe;IAClB,GAAG,QAAQ;IACX,GAAG,SAAS;CACb,CAAC","sourcesContent":["import type { ComponentManifest } from './types.js';\n\nimport button from '@/manifests/components/entries/button.js';\nimport textinput from '@/manifests/components/entries/textinput.js';\nimport numberinput from '@/manifests/components/entries/numberinput.js';\nimport textarea from '@/manifests/components/entries/textarea.js';\nimport select from '@/manifests/components/entries/select.js';\nimport checkbox from '@/manifests/components/entries/checkbox.js';\nimport radio from '@/manifests/components/entries/radio.js';\nimport toggle from '@/manifests/components/entries/toggle.js';\nimport badge from '@/manifests/components/entries/badge.js';\nimport card from '@/manifests/components/entries/card.js';\nimport table from '@/manifests/components/entries/table.js';\nimport typography from '@/manifests/components/entries/typography.js';\nimport dialog from '@/manifests/components/entries/dialog.js';\nimport combobox from '@/manifests/components/entries/combobox.js';\nimport datePicker from '@/manifests/components/entries/datePicker.js';\nimport dateRangePicker from '@/manifests/components/entries/dateRangePicker.js';\nimport barChart from '@/manifests/components/entries/barChart.js';\nimport lineChart from '@/manifests/components/entries/lineChart.js';\n\nexport const componentManifest: ComponentManifest = {\n  ...button,\n  ...textinput,\n  ...numberinput,\n  ...textarea,\n  ...select,\n  ...checkbox,\n  ...radio,\n  ...toggle,\n  ...badge,\n  ...card,\n  ...table,\n  ...typography,\n  ...dialog,\n  ...combobox,\n  ...datePicker,\n  ...dateRangePicker,\n  ...barChart,\n  ...lineChart,\n};\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/manifests/components/index.ts"],"names":[],"mappings":"AAEA,OAAO,MAAM,MAAM,0CAA0C,CAAC;AAC9D,OAAO,SAAS,MAAM,6CAA6C,CAAC;AACpE,OAAO,WAAW,MAAM,+CAA+C,CAAC;AACxE,OAAO,QAAQ,MAAM,4CAA4C,CAAC;AAClE,OAAO,MAAM,MAAM,0CAA0C,CAAC;AAC9D,OAAO,QAAQ,MAAM,4CAA4C,CAAC;AAClE,OAAO,KAAK,MAAM,yCAAyC,CAAC;AAC5D,OAAO,MAAM,MAAM,0CAA0C,CAAC;AAC9D,OAAO,KAAK,MAAM,yCAAyC,CAAC;AAC5D,OAAO,IAAI,MAAM,wCAAwC,CAAC;AAC1D,OAAO,KAAK,MAAM,yCAAyC,CAAC;AAC5D,OAAO,UAAU,MAAM,8CAA8C,CAAC;AACtE,OAAO,MAAM,MAAM,0CAA0C,CAAC;AAC9D,OAAO,QAAQ,MAAM,4CAA4C,CAAC;AAClE,OAAO,UAAU,MAAM,8CAA8C,CAAC;AACtE,OAAO,eAAe,MAAM,mDAAmD,CAAC;AAChF,OAAO,QAAQ,MAAM,4CAA4C,CAAC;AAClE,OAAO,SAAS,MAAM,6CAA6C,CAAC;AACpE,OAAO,SAAS,MAAM,6CAA6C,CAAC;AAEpE,MAAM,CAAC,MAAM,iBAAiB,GAAsB;IAClD,GAAG,MAAM;IACT,GAAG,SAAS;IACZ,GAAG,WAAW;IACd,GAAG,QAAQ;IACX,GAAG,MAAM;IACT,GAAG,QAAQ;IACX,GAAG,KAAK;IACR,GAAG,MAAM;IACT,GAAG,KAAK;IACR,GAAG,IAAI;IACP,GAAG,KAAK;IACR,GAAG,UAAU;IACb,GAAG,MAAM;IACT,GAAG,QAAQ;IACX,GAAG,UAAU;IACb,GAAG,eAAe;IAClB,GAAG,QAAQ;IACX,GAAG,SAAS;IACZ,GAAG,SAAS;CACb,CAAC","sourcesContent":["import type { ComponentManifest } from './types.js';\n\nimport button from '@/manifests/components/entries/button.js';\nimport textinput from '@/manifests/components/entries/textinput.js';\nimport numberinput from '@/manifests/components/entries/numberinput.js';\nimport textarea from '@/manifests/components/entries/textarea.js';\nimport select from '@/manifests/components/entries/select.js';\nimport checkbox from '@/manifests/components/entries/checkbox.js';\nimport radio from '@/manifests/components/entries/radio.js';\nimport toggle from '@/manifests/components/entries/toggle.js';\nimport badge from '@/manifests/components/entries/badge.js';\nimport card from '@/manifests/components/entries/card.js';\nimport table from '@/manifests/components/entries/table.js';\nimport typography from '@/manifests/components/entries/typography.js';\nimport dialog from '@/manifests/components/entries/dialog.js';\nimport combobox from '@/manifests/components/entries/combobox.js';\nimport datePicker from '@/manifests/components/entries/datePicker.js';\nimport dateRangePicker from '@/manifests/components/entries/dateRangePicker.js';\nimport barChart from '@/manifests/components/entries/barChart.js';\nimport lineChart from '@/manifests/components/entries/lineChart.js';\nimport statistic from '@/manifests/components/entries/statistic.js';\n\nexport const componentManifest: ComponentManifest = {\n  ...button,\n  ...textinput,\n  ...numberinput,\n  ...textarea,\n  ...select,\n  ...checkbox,\n  ...radio,\n  ...toggle,\n  ...badge,\n  ...card,\n  ...table,\n  ...typography,\n  ...dialog,\n  ...combobox,\n  ...datePicker,\n  ...dateRangePicker,\n  ...barChart,\n  ...lineChart,\n  ...statistic,\n};\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@triptease/design-system-mcp",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "MCP server for Triptease design system documentation",
   "type": "module",
   "main": "dist/src/index.js",
@@ -29,6 +29,7 @@
     "@triptease/tt-dialog": "5.1.1",
     "@triptease/tt-highlight": "1.0.2",
     "@triptease/tt-line-chart": "1.0.10",
+    "@triptease/tt-milestone": "1.0.0",
     "zod": "^4.3.6"
   },
   "devDependencies": {

package/src/manifests/components/entries/lineChart.ts

@@ -6,6 +6,7 @@ const latestLineChartVersion = packageJson.dependencies['@triptease/tt-line-char
 const latestDatasetVersion = packageJson.dependencies['@triptease/tt-dataset'];
 const latestDataPointVersion = packageJson.dependencies['@triptease/tt-data-point'];
 const latestHighlightVersion = packageJson.dependencies['@triptease/tt-highlight'];
+const latestMilestoneVersion = packageJson.dependencies['@triptease/tt-milestone'];
 
 export default {
   'line-chart': {
@@ -30,6 +31,7 @@ export default {
         { name: '@triptease/tt-dataset', includesTypes: true, optional: false },
         { name: '@triptease/tt-data-point', includesTypes: true, optional: false },
         { name: '@triptease/tt-highlight', includesTypes: true, optional: true },
+        { name: '@triptease/tt-milestone', includesTypes: true, optional: true },
       ],
       cdn: [
         {
@@ -73,6 +75,16 @@ export default {
           guidance:
             'Prefer pinned major version URL to avoid unexpected breaking changes. Do not use latest version URL in production code.',
         },
+        {
+          name: 'tt-milestone',
+          includesTypes: false,
+          optional: true,
+          pinnedVersionUrl: buildCDNUrl('tt-milestone', latestMilestoneVersion),
+          pinnedMajorVersionUrl: buildCDNUrl('tt-milestone', buildMajorVersion(latestMilestoneVersion)),
+          latestVersionUrl: buildCDNUrl('tt-milestone', 'latest'),
+          guidance:
+            'Prefer pinned major version URL to avoid unexpected breaking changes. Do not use latest version URL in production code.',
+        },
       ],
     },
     attributes: {
@@ -144,6 +156,20 @@ import '@triptease/tt-data-point';
     <tt-data-point label="Jan 2" value={48}></tt-data-point>
   </tt-dataset>
   <tt-highlight label="Easter Boost" from="15 Mar" to="5 Apr"></tt-highlight>
+</tt-line-chart>;`,
+      },
+      {
+        title: 'With milestones',
+        description:
+          'Use milestones to draw attention to and label significant points in time on a chart. Only use when something significant occurred that may have affected the data, or to mark an important point in time (e.g. today, start, finish). Use sparingly and highlight only the most important events to avoid clutter. Avoid positioning milestones too close together as labels may overlap and become difficult to read. Do not use when displaying multiple datasets if the milestone applies to only one dataset, as users may assume it applies to all.',
+        code: `import '@triptease/tt-milestone';
+
+<tt-line-chart id="highlighted-chart" height="20rem">
+  <tt-dataset label="2025">
+    <tt-data-point label="Jan 1" value={45}></tt-data-point>
+    <tt-data-point label="Jan 2" value={48}></tt-data-point>
+  </tt-dataset>
+  <tt-milestone label="Todayt" value="Jan 2"></tt-milestone>
 </tt-line-chart>;`,
       },
     ],

package/src/manifests/components/entries/statistic.ts

@@ -0,0 +1,72 @@
+import { ComponentManifest } from '@/manifests/components/types.js';
+
+export default {
+  statistic: {
+    name: 'Statistic',
+    description: 'A consistent, structured layout for displaying a statistic or a few statistics.',
+    element: 'div',
+    usageGuidance: {
+      whenToUse: [
+        'Highlight a single key metric with a label (e.g. "All Sessions: 3,000").',
+        'Surface at-a-glance KPIs on dashboards or summary cards.',
+        'Show a value alongside a status indicator (e.g. "Good", "+3 vs last month").',
+        'Provide brief contextual notes about how a value was calculated.',
+      ],
+      avoid: [
+        'When comparing multiple attributes across items, so use a Table instead.',
+        'When showing trends over time, use a chart or graph.',
+        'When the value requires significant explanation, use a more detailed content component.',
+      ],
+    },
+    examples: [
+      {
+        title: 'Basic statistic',
+        code: `
+        <div class="card">
+          <div class="statistic">
+            <p class="statistic--label">Booked Room Nights</p>
+            <p class="statistic--value">30</p>
+          </div>
+        </div>`,
+      },
+      {
+        title: 'With Indicator',
+        description:
+          'Use to highlight the status of a statistic or a change in its value. Use a badge to communicate overall status, such as “Good”, “Warning”, or “OK”. Use text to indicate change compared to a previous period, such as “+3 vs last month”. When showing change, apply the appropriate CSS color tokens to signal whether the value is positive or negative. Keep the indicator concise and directly related to the primary statistic.',
+        code: `
+         <div>
+           <div class="card">
+            <div class="statistic">
+              <p class="statistic--label">Booked Room Nights</p>
+              <p class="statistic--value">30</p>
+              <p class="badge statistic--indicator" data-theme="success">
+                Good
+              </p>
+            </div>
+            <div class="statistic">
+              <p class="statistic--label">Sessions with Search</p>
+              <p class="statistic--value">5,937</p>
+              <p class="statistic--indicator" style="color: var(--color-success-500)">
+                +30 vs last month
+              </p>
+            </div>
+          </div>   
+        </div>
+        `,
+      },
+      {
+        title: 'With Context',
+        description:
+          'Use to provide brief explanatory information about the statistic. Example scenarios: To clarify what the statistic represents, how it was calculated or how it relates to other information on the page. Keep context concise and supplementary; it should clarify the value, not compete with it. Do not recolor the value as this can draw undue attention.',
+        code: `
+        <div class="card">
+          <div class="statistic">
+            <p class="statistic--label">Booked Room Nights</p>
+            <p class="statistic--value">30</p>
+            <p class="statistic--context">Includes canceled stays</p>
+          </div>
+        </div>`,
+      },
+    ],
+  },
+} satisfies ComponentManifest;

package/src/manifests/components/index.ts

@@ -18,6 +18,7 @@ import datePicker from '@/manifests/components/entries/datePicker.js';
 import dateRangePicker from '@/manifests/components/entries/dateRangePicker.js';
 import barChart from '@/manifests/components/entries/barChart.js';
 import lineChart from '@/manifests/components/entries/lineChart.js';
+import statistic from '@/manifests/components/entries/statistic.js';
 
 export const componentManifest: ComponentManifest = {
   ...button,
@@ -38,4 +39,5 @@ export const componentManifest: ComponentManifest = {
   ...dateRangePicker,
   ...barChart,
   ...lineChart,
+  ...statistic,
 };

package/src/resources/components/list.test.ts

@@ -15,7 +15,7 @@ describe('listComponents resource', () => {
     const result = await listComponents();
     const data = JSON.parse(result.contents[0].text);
 
-    expect(data.components).toHaveLength(18);
+    expect(data.components).toHaveLength(19);
   });
 
   it('should include component key, name, description, and element', async () => {

package/src/tools/getComponentDocs/__snapshots__/handler.test.ts.snap

@@ -4,7 +4,7 @@ exports[`getComponentDocs handler > should return not found if the provided comp
 {
   "content": [
     {
-      "text": "{"error":"Component 'foo' not found","available":["button","textinput","numberinput","textarea","select","checkbox","radio","toggle","badge","card","table","typography","dialog","combobox","date-picker","date-range-picker","bar-chart","line-chart"]}",
+      "text": "{"error":"Component 'foo' not found","available":["button","textinput","numberinput","textarea","select","checkbox","radio","toggle","badge","card","table","typography","dialog","combobox","date-picker","date-range-picker","bar-chart","line-chart","statistic"]}",
       "type": "text",
     },
   ],

package/src/tools/listComponents/__snapshots__/handler.test.ts.snap

@@ -4,7 +4,7 @@ exports[`listComponents tool > should list all components within the manifest 1`
 {
   "content": [
     {
-      "text": "{"components":[{"key":"button","name":"Button","description":"Interactive button component with multiple themes and states","element":"button"},{"key":"textinput","name":"Text Input","description":"Text input field for single-line text entry with automatic validation styling","element":"input"},{"key":"numberinput","name":"Number Input","description":"Number input field with browser-provided increment/decrement controls","element":"input[type='number']"},{"key":"textarea","name":"Textarea","description":"Multi-line text input field","element":"textarea"},{"key":"select","name":"Select Input","description":"Dropdown list for selecting a single option","element":"select"},{"key":"checkbox","name":"Checkbox","description":"Checkbox input for multiple selections","element":"input[type='checkbox']"},{"key":"radio","name":"Radio","description":"Radio button for selecting exactly one option from mutually exclusive choices","element":"input[type='radio']"},{"key":"toggle","name":"Toggle","description":"Toggle switch for binary on/off states with immediate effect","element":"input[type='checkbox'][data-theme='toggle']"},{"key":"badge","name":"Badge","description":"Status indicator or label badge for highlighting small pieces of information","element":"span"},{"key":"card","name":"Card","description":"Container component that groups related content and actions in a visually distinct area","element":"div"},{"key":"table","name":"Table","description":"Organize and display data in rows and columns","element":"table"},{"key":"typography","name":"Typography","description":"Text styling using semantic HTML elements and utility classes","element":"h1-h4, p, strong, a"},{"key":"dialog","name":"Dialog - Web Component","description":"Dialog component that displays content in a layer above the page","element":"tt-dialog"},{"key":"combobox","name":"Combobox","description":"Searchable dropdown that combines a text input with a list, available as both React component and Web Component","element":"Combobox (React) / tt-combobox (Web Component)"},{"key":"date-picker","name":"Date Picker","description":"Date picker for selecting a single date, available as both React component and Web Component","element":"DatePicker (React) / tt-date-picker (Web Component)"},{"key":"date-range-picker","name":"Date Range Picker","description":"Date range picker for selecting start and end dates, available as both React component and Web Component","element":"DateRangePicker (React) / tt-date-range-picker (Web Component)"},{"key":"bar-chart","name":"Bar Chart - Web Component","description":"Bar chart for comparing values across categories","element":"tt-bar-chart"},{"key":"line-chart","name":"Line Chart - Web Component","description":"Line chart for visualizing trends over continuous data","element":"tt-line-chart"}]}",
+      "text": "{"components":[{"key":"button","name":"Button","description":"Interactive button component with multiple themes and states","element":"button"},{"key":"textinput","name":"Text Input","description":"Text input field for single-line text entry with automatic validation styling","element":"input"},{"key":"numberinput","name":"Number Input","description":"Number input field with browser-provided increment/decrement controls","element":"input[type='number']"},{"key":"textarea","name":"Textarea","description":"Multi-line text input field","element":"textarea"},{"key":"select","name":"Select Input","description":"Dropdown list for selecting a single option","element":"select"},{"key":"checkbox","name":"Checkbox","description":"Checkbox input for multiple selections","element":"input[type='checkbox']"},{"key":"radio","name":"Radio","description":"Radio button for selecting exactly one option from mutually exclusive choices","element":"input[type='radio']"},{"key":"toggle","name":"Toggle","description":"Toggle switch for binary on/off states with immediate effect","element":"input[type='checkbox'][data-theme='toggle']"},{"key":"badge","name":"Badge","description":"Status indicator or label badge for highlighting small pieces of information","element":"span"},{"key":"card","name":"Card","description":"Container component that groups related content and actions in a visually distinct area","element":"div"},{"key":"table","name":"Table","description":"Organize and display data in rows and columns","element":"table"},{"key":"typography","name":"Typography","description":"Text styling using semantic HTML elements and utility classes","element":"h1-h4, p, strong, a"},{"key":"dialog","name":"Dialog - Web Component","description":"Dialog component that displays content in a layer above the page","element":"tt-dialog"},{"key":"combobox","name":"Combobox","description":"Searchable dropdown that combines a text input with a list, available as both React component and Web Component","element":"Combobox (React) / tt-combobox (Web Component)"},{"key":"date-picker","name":"Date Picker","description":"Date picker for selecting a single date, available as both React component and Web Component","element":"DatePicker (React) / tt-date-picker (Web Component)"},{"key":"date-range-picker","name":"Date Range Picker","description":"Date range picker for selecting start and end dates, available as both React component and Web Component","element":"DateRangePicker (React) / tt-date-range-picker (Web Component)"},{"key":"bar-chart","name":"Bar Chart - Web Component","description":"Bar chart for comparing values across categories","element":"tt-bar-chart"},{"key":"line-chart","name":"Line Chart - Web Component","description":"Line chart for visualizing trends over continuous data","element":"tt-line-chart"},{"key":"statistic","name":"Statistic","description":"A consistent, structured layout for displaying a statistic or a few statistics.","element":"div"}]}",
       "type": "text",
     },
   ],