@triptease/design-system-mcp 1.0.19 → 1.0.21

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

@@ -1,87 +0,0 @@
-declare const _default: {
-    'line-chart': {
-        name: string;
-        description: string;
-        ssrSafe: true;
-        element: string;
-        usageGuidance: {
-            whenToUse: string[];
-            avoid: string[];
-        };
-        installationOptions: {
-            npm: ({
-                name: string;
-                includesTypes: true;
-                optional: false;
-            } | {
-                name: string;
-                includesTypes: true;
-                optional: true;
-            })[];
-            cdn: ({
-                name: string;
-                includesTypes: false;
-                optional: false;
-                pinnedVersionUrl: string;
-                pinnedMajorVersionUrl: string;
-                latestVersionUrl: string;
-                guidance: string;
-                moduleFormat?: undefined;
-            } | {
-                name: string;
-                includesTypes: false;
-                optional: false;
-                moduleFormat: string;
-                pinnedVersionUrl: string;
-                pinnedMajorVersionUrl: string;
-                latestVersionUrl: string;
-                guidance: string;
-            } | {
-                name: string;
-                includesTypes: false;
-                optional: true;
-                pinnedVersionUrl: string;
-                pinnedMajorVersionUrl: string;
-                latestVersionUrl: string;
-                guidance: string;
-                moduleFormat?: undefined;
-            })[];
-        };
-        attributes: {
-            width: {
-                type: string;
-                description: string;
-            };
-            height: {
-                type: string;
-                description: string;
-            };
-            'x-axis-title': {
-                type: string;
-                description: string;
-            };
-            'y-axis-title': {
-                type: string;
-                description: string;
-            };
-            loading: {
-                type: string;
-                description: string;
-            };
-            'hide-numbers': {
-                type: string;
-                description: string;
-            };
-        };
-        examples: ({
-            title: string;
-            code: string;
-            description?: undefined;
-        } | {
-            title: string;
-            description: string;
-            code: string;
-        })[];
-    };
-};
-export default _default;

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

@@ -1,166 +0,0 @@
-import { buildCDNUrl, buildMajorVersion } from '../../../utils/buildCDNUrls.js';
-import packageJson from '../../../../package.json' with { type: 'json' };
-const latestLineChartVersion = packageJson.dependencies['@triptease/tt-line-chart'];
-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',
-        description: 'Line chart for visualizing trends over continuous data',
-        ssrSafe: true,
-        element: 'tt-line-chart',
-        usageGuidance: {
-            whenToUse: [
-                'To visualize trends along a continuous x-axis',
-                'To compare how multiple datasets for the same measure change relative to each other',
-            ],
-            avoid: [
-                'When the x-axis does not represent a continuous range (use a bar chart instead)',
-                'When there are too few data points to form a meaningful trend (use a bar chart instead)',
-                'When comparing datasets that do not have a meaningful or explainable relationship',
-            ],
-        },
-        installationOptions: {
-            npm: [
-                { name: '@triptease/tt-line-chart', includesTypes: true, optional: false },
-                { 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: [
-                {
-                    name: 'tt-line-chart',
-                    includesTypes: false,
-                    optional: false,
-                    pinnedVersionUrl: buildCDNUrl('tt-line-chart', latestLineChartVersion),
-                    pinnedMajorVersionUrl: buildCDNUrl('tt-line-chart', buildMajorVersion(latestLineChartVersion)),
-                    latestVersionUrl: buildCDNUrl('tt-line-chart', 'latest'),
-                    guidance: 'Prefer pinned major version URL to avoid unexpected breaking changes. Do not use latest version URL in production code.',
-                },
-                {
-                    name: 'tt-dataset',
-                    includesTypes: false,
-                    optional: false,
-                    moduleFormat: 'esm',
-                    pinnedVersionUrl: buildCDNUrl('tt-dataset', latestDatasetVersion),
-                    pinnedMajorVersionUrl: buildCDNUrl('tt-dataset', buildMajorVersion(latestDatasetVersion)),
-                    latestVersionUrl: buildCDNUrl('tt-dataset', 'latest'),
-                    guidance: 'Prefer pinned major version URL to avoid unexpected breaking changes. Do not use latest version URL in production code.',
-                },
-                {
-                    name: 'tt-data-point',
-                    includesTypes: false,
-                    optional: false,
-                    pinnedVersionUrl: buildCDNUrl('tt-data-point', latestDataPointVersion),
-                    pinnedMajorVersionUrl: buildCDNUrl('tt-data-point', buildMajorVersion(latestDataPointVersion)),
-                    latestVersionUrl: buildCDNUrl('tt-data-point', 'latest'),
-                    guidance: 'Prefer pinned major version URL to avoid unexpected breaking changes. Do not use latest version URL in production code.',
-                },
-                {
-                    name: 'tt-highlight',
-                    includesTypes: false,
-                    optional: true,
-                    pinnedVersionUrl: buildCDNUrl('tt-highlight', latestHighlightVersion),
-                    pinnedMajorVersionUrl: buildCDNUrl('tt-highlight', buildMajorVersion(latestHighlightVersion)),
-                    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: {
-            width: {
-                type: 'string',
-                description: 'Width of chart (any CSS value). Defaults to 100% to fill container.',
-            },
-            height: {
-                type: 'string',
-                description: 'Height of chart (any CSS value). Defaults to 100% to fill container.',
-            },
-            'x-axis-title': {
-                type: 'string',
-                description: 'Title for x-axis. Use to clarify units of measurement. Keep concise.',
-            },
-            'y-axis-title': {
-                type: 'string',
-                description: 'Title for y-axis. Use to clarify units of measurement. Keep concise.',
-            },
-            loading: {
-                type: 'boolean',
-                description: 'Show loading state while data fetches. Component handles aria-busy automatically.',
-            },
-            'hide-numbers': {
-                type: 'boolean',
-                description: 'Hide y-axis numbers and tooltips. Use when numbers could mislead. Removes ARIA labels, so provide trend description.',
-            },
-        },
-        examples: [
-            {
-                title: 'Basic line chart',
-                code: `import '@triptease/tt-line-chart';
-import '@triptease/tt-dataset';
-import '@triptease/tt-data-point';
-
-<tt-line-chart id="basic-chart">
-  <tt-dataset label="2024">
-    <tt-data-point label="Jan 1" value={45}></tt-data-point>
-    <tt-data-point label="Jan 2" value={48}></tt-data-point>
-    <tt-data-point label="Jan 3" value={52}></tt-data-point>
-  </tt-dataset>
-</tt-line-chart>`,
-            },
-            {
-                title: 'Multiple datasets',
-                description: '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.',
-                code: `<tt-line-chart id="multiple-datasets" 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-dataset label="2024">
-    <tt-data-point label="Jan 1" value={42}></tt-data-point>
-    <tt-data-point label="Jan 2" value={44}></tt-data-point>
-  </tt-dataset>
-</tt-line-chart>`,
-            },
-            {
-                title: 'With highlighted regions',
-                description: '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.',
-                code: `import '@triptease/tt-highlight';
-
-<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-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>;`,
-            },
-        ],
-    },
-};
-//# sourceMappingURL=lineChart.js.map

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

@@ -1 +0,0 @@
-{"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/numberinput.d.ts

@@ -1,52 +0,0 @@
-declare const _default: {
-    numberinput: {
-        name: string;
-        description: string;
-        element: string;
-        usageGuidance: {
-            whenToUse: string[];
-            avoid: string[];
-        };
-        attributes: {
-            type: {
-                values: string[];
-                default: string;
-            };
-            'aria-invalid': {
-                type: string;
-                description: string;
-            };
-            disabled: {
-                type: string;
-                description: string;
-            };
-            placeholder: {
-                type: string;
-                description: string;
-            };
-            min: {
-                type: string;
-                description: string;
-            };
-            max: {
-                type: string;
-                description: string;
-            };
-            step: {
-                type: string;
-                description: string;
-            };
-        };
-        states: string[];
-        examples: ({
-            title: string;
-            code: string;
-            description?: undefined;
-        } | {
-            title: string;
-            description: string;
-            code: string;
-        })[];
-    };
-};
-export default _default;

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

@@ -1,64 +0,0 @@
-export default {
-    numberinput: {
-        name: 'Number Input',
-        description: 'Number input field with browser-provided increment/decrement controls',
-        element: "input[type='number']",
-        usageGuidance: {
-            whenToUse: [
-                'Collecting numeric data (age, quantity, price)',
-                'Values have clear min/max bounds',
-                'Users benefit from increment/decrement buttons',
-            ],
-            avoid: [
-                'Numbers containing formatting (phone numbers, credit cards - use text input)',
-                'Complex number validation needed',
-            ],
-        },
-        attributes: {
-            type: {
-                values: ['number'],
-                default: 'number',
-            },
-            'aria-invalid': {
-                type: 'boolean',
-                description: 'Marks input as invalid for error styling. Pair with aria-describedby to associate error messages.',
-            },
-            disabled: {
-                type: 'boolean',
-                description: 'Disables the input',
-            },
-            placeholder: {
-                type: 'string',
-                description: 'Placeholder text. Should not replace label - always provide visible label element.',
-            },
-            min: {
-                type: 'number',
-                description: 'Minimum allowed value',
-            },
-            max: {
-                type: 'number',
-                description: 'Maximum allowed value',
-            },
-            step: {
-                type: 'number',
-                description: 'Increment/decrement step size',
-            },
-        },
-        states: ['default', 'hover', 'focus', 'disabled', 'invalid'],
-        examples: [
-            {
-                title: 'Basic usage',
-                code: `<label for="hotel-count">Number of Hotels</label>
-<input id="hotel-count" type="number" />`,
-            },
-            {
-                title: 'Error state',
-                description: 'Use aria-invalid with aria-describedby to associate error messages for screen readers',
-                code: `<label for="quantity">Quantity</label>
-<input id="quantity" type="number" min="1" max="10" aria-invalid aria-describedby="quantity-error" />
-<span id="quantity-error" class="text-error">Please enter a number between 1 and 10</span>`,
-            },
-        ],
-    },
-};
-//# sourceMappingURL=numberinput.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"numberinput.js","sourceRoot":"","sources":["../../../../../src/manifests/components/entries/numberinput.ts"],"names":[],"mappings":"AAEA,eAAe;IACb,WAAW,EAAE;QACX,IAAI,EAAE,cAAc;QACpB,WAAW,EAAE,uEAAuE;QACpF,OAAO,EAAE,sBAAsB;QAC/B,aAAa,EAAE;YACb,SAAS,EAAE;gBACT,gDAAgD;gBAChD,kCAAkC;gBAClC,gDAAgD;aACjD;YACD,KAAK,EAAE;gBACL,8EAA8E;gBAC9E,kCAAkC;aACnC;SACF;QACD,UAAU,EAAE;YACV,IAAI,EAAE;gBACJ,MAAM,EAAE,CAAC,QAAQ,CAAC;gBAClB,OAAO,EAAE,QAAQ;aAClB;YACD,cAAc,EAAE;gBACd,IAAI,EAAE,SAAS;gBACf,WAAW,EACT,mGAAmG;aACtG;YACD,QAAQ,EAAE;gBACR,IAAI,EAAE,SAAS;gBACf,WAAW,EAAE,oBAAoB;aAClC;YACD,WAAW,EAAE;gBACX,IAAI,EAAE,QAAQ;gBACd,WAAW,EAAE,oFAAoF;aAClG;YACD,GAAG,EAAE;gBACH,IAAI,EAAE,QAAQ;gBACd,WAAW,EAAE,uBAAuB;aACrC;YACD,GAAG,EAAE;gBACH,IAAI,EAAE,QAAQ;gBACd,WAAW,EAAE,uBAAuB;aACrC;YACD,IAAI,EAAE;gBACJ,IAAI,EAAE,QAAQ;gBACd,WAAW,EAAE,+BAA+B;aAC7C;SACF;QACD,MAAM,EAAE,CAAC,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,SAAS,CAAC;QAC5D,QAAQ,EAAE;YACR;gBACE,KAAK,EAAE,aAAa;gBACpB,IAAI,EAAE;yCAC2B;aAClC;YACD;gBACE,KAAK,EAAE,aAAa;gBACpB,WAAW,EAAE,uFAAuF;gBACpG,IAAI,EAAE;;2FAE6E;aACpF;SACF;KACF;CAC0B,CAAC","sourcesContent":["import { ComponentManifest } from '@/manifests/components/types.js';\n\nexport default {\n  numberinput: {\n    name: 'Number Input',\n    description: 'Number input field with browser-provided increment/decrement controls',\n    element: \"input[type='number']\",\n    usageGuidance: {\n      whenToUse: [\n        'Collecting numeric data (age, quantity, price)',\n        'Values have clear min/max bounds',\n        'Users benefit from increment/decrement buttons',\n      ],\n      avoid: [\n        'Numbers containing formatting (phone numbers, credit cards - use text input)',\n        'Complex number validation needed',\n      ],\n    },\n    attributes: {\n      type: {\n        values: ['number'],\n        default: 'number',\n      },\n      'aria-invalid': {\n        type: 'boolean',\n        description:\n          'Marks input as invalid for error styling. Pair with aria-describedby to associate error messages.',\n      },\n      disabled: {\n        type: 'boolean',\n        description: 'Disables the input',\n      },\n      placeholder: {\n        type: 'string',\n        description: 'Placeholder text. Should not replace label - always provide visible label element.',\n      },\n      min: {\n        type: 'number',\n        description: 'Minimum allowed value',\n      },\n      max: {\n        type: 'number',\n        description: 'Maximum allowed value',\n      },\n      step: {\n        type: 'number',\n        description: 'Increment/decrement step size',\n      },\n    },\n    states: ['default', 'hover', 'focus', 'disabled', 'invalid'],\n    examples: [\n      {\n        title: 'Basic usage',\n        code: `<label for=\"hotel-count\">Number of Hotels</label>\n<input id=\"hotel-count\" type=\"number\" />`,\n      },\n      {\n        title: 'Error state',\n        description: 'Use aria-invalid with aria-describedby to associate error messages for screen readers',\n        code: `<label for=\"quantity\">Quantity</label>\n<input id=\"quantity\" type=\"number\" min=\"1\" max=\"10\" aria-invalid aria-describedby=\"quantity-error\" />\n<span id=\"quantity-error\" class=\"text-error\">Please enter a number between 1 and 10</span>`,\n      },\n    ],\n  },\n} satisfies ComponentManifest;\n"]}

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

@@ -1,31 +0,0 @@
-declare const _default: {
-    radio: {
-        name: string;
-        description: string;
-        element: string;
-        usageGuidance: {
-            whenToUse: string[];
-            avoid: string[];
-        };
-        attributes: {
-            name: {
-                type: string;
-                description: string;
-            };
-            checked: {
-                type: string;
-                description: string;
-            };
-            disabled: {
-                type: string;
-                description: string;
-            };
-        };
-        examples: {
-            title: string;
-            description: string;
-            code: string;
-        }[];
-    };
-};
-export default _default;

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

@@ -1,50 +0,0 @@
-export default {
-    radio: {
-        name: 'Radio',
-        description: 'Radio button for selecting exactly one option from mutually exclusive choices',
-        element: "input[type='radio']",
-        usageGuidance: {
-            whenToUse: [
-                'Only one option can be selected from a small set',
-                'All options need to be visible at once',
-                'Comparing options side-by-side is important',
-                'Default selection is recommended',
-            ],
-            avoid: [
-                'Multiple selections allowed (use checkboxes)',
-                'Long lists of options (consider select dropdown or combobox)',
-                'Immediate action expected (use toggle or button)',
-            ],
-        },
-        attributes: {
-            name: {
-                type: 'string',
-                description: 'Groups radio buttons together. All radio buttons in a group must have the same name.',
-            },
-            checked: {
-                type: 'boolean',
-                description: 'Marks radio button as selected by default. Only one radio in a group should be checked.',
-            },
-            disabled: {
-                type: 'boolean',
-                description: 'Disables the radio button. Can be applied to individual inputs or to parent fieldset to disable all radios.',
-            },
-        },
-        examples: [
-            {
-                title: 'Radio group',
-                description: 'Use fieldset and legend for grouped radio buttons. All radios must share the same name attribute.',
-                code: `<fieldset>
-  <legend>Choose a color:</legend>
-  <input type="radio" id="radio-red" name="color" value="red" />
-  <label for="radio-red">Red</label>
-  <input type="radio" id="radio-green" name="color" value="green" />
-  <label for="radio-green">Green</label>
-  <input type="radio" id="radio-blue" name="color" value="blue" />
-  <label for="radio-blue">Blue</label>
-</fieldset>`,
-            },
-        ],
-    },
-};
-//# sourceMappingURL=radio.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"radio.js","sourceRoot":"","sources":["../../../../../src/manifests/components/entries/radio.ts"],"names":[],"mappings":"AAEA,eAAe;IACb,KAAK,EAAE;QACL,IAAI,EAAE,OAAO;QACb,WAAW,EAAE,+EAA+E;QAC5F,OAAO,EAAE,qBAAqB;QAC9B,aAAa,EAAE;YACb,SAAS,EAAE;gBACT,kDAAkD;gBAClD,wCAAwC;gBACxC,6CAA6C;gBAC7C,kCAAkC;aACnC;YACD,KAAK,EAAE;gBACL,8CAA8C;gBAC9C,8DAA8D;gBAC9D,kDAAkD;aACnD;SACF;QACD,UAAU,EAAE;YACV,IAAI,EAAE;gBACJ,IAAI,EAAE,QAAQ;gBACd,WAAW,EAAE,sFAAsF;aACpG;YACD,OAAO,EAAE;gBACP,IAAI,EAAE,SAAS;gBACf,WAAW,EAAE,yFAAyF;aACvG;YACD,QAAQ,EAAE;gBACR,IAAI,EAAE,SAAS;gBACf,WAAW,EACT,6GAA6G;aAChH;SACF;QACD,QAAQ,EAAE;YACR;gBACE,KAAK,EAAE,aAAa;gBACpB,WAAW,EACT,mGAAmG;gBACrG,IAAI,EAAE;;;;;;;;YAQF;aACL;SACF;KACF;CAC0B,CAAC","sourcesContent":["import { ComponentManifest } from '@/manifests/components/types.js';\n\nexport default {\n  radio: {\n    name: 'Radio',\n    description: 'Radio button for selecting exactly one option from mutually exclusive choices',\n    element: \"input[type='radio']\",\n    usageGuidance: {\n      whenToUse: [\n        'Only one option can be selected from a small set',\n        'All options need to be visible at once',\n        'Comparing options side-by-side is important',\n        'Default selection is recommended',\n      ],\n      avoid: [\n        'Multiple selections allowed (use checkboxes)',\n        'Long lists of options (consider select dropdown or combobox)',\n        'Immediate action expected (use toggle or button)',\n      ],\n    },\n    attributes: {\n      name: {\n        type: 'string',\n        description: 'Groups radio buttons together. All radio buttons in a group must have the same name.',\n      },\n      checked: {\n        type: 'boolean',\n        description: 'Marks radio button as selected by default. Only one radio in a group should be checked.',\n      },\n      disabled: {\n        type: 'boolean',\n        description:\n          'Disables the radio button. Can be applied to individual inputs or to parent fieldset to disable all radios.',\n      },\n    },\n    examples: [\n      {\n        title: 'Radio group',\n        description:\n          'Use fieldset and legend for grouped radio buttons. All radios must share the same name attribute.',\n        code: `<fieldset>\n  <legend>Choose a color:</legend>\n  <input type=\"radio\" id=\"radio-red\" name=\"color\" value=\"red\" />\n  <label for=\"radio-red\">Red</label>\n  <input type=\"radio\" id=\"radio-green\" name=\"color\" value=\"green\" />\n  <label for=\"radio-green\">Green</label>\n  <input type=\"radio\" id=\"radio-blue\" name=\"color\" value=\"blue\" />\n  <label for=\"radio-blue\">Blue</label>\n</fieldset>`,\n      },\n    ],\n  },\n} satisfies ComponentManifest;\n"]}

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

@@ -1,16 +0,0 @@
-declare const _default: {
-    select: {
-        name: string;
-        description: string;
-        element: string;
-        usageGuidance: {
-            whenToUse: string[];
-            avoid: string[];
-        };
-        examples: {
-            title: string;
-            code: string;
-        }[];
-    };
-};
-export default _default;

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

@@ -1,23 +0,0 @@
-export default {
-    select: {
-        name: 'Select Input',
-        description: 'Dropdown list for selecting a single option',
-        element: 'select',
-        usageGuidance: {
-            whenToUse: ['Selecting from a list of predefined options', 'Limited screen space'],
-            avoid: ['Multiple selections (use the Combobox webcomponent)'],
-        },
-        examples: [
-            {
-                title: 'Basic select',
-                code: `<label for="reports">Select report frequency</label>
-<select name="reports">
-  <option value="daily">Daily Report</option>
-  <option value="weekly">Weekly Report</option>
-  <option value="monthly">Monthly Report</option>
-</select>`,
-            },
-        ],
-    },
-};
-//# sourceMappingURL=select.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"select.js","sourceRoot":"","sources":["../../../../../src/manifests/components/entries/select.ts"],"names":[],"mappings":"AAEA,eAAe;IACb,MAAM,EAAE;QACN,IAAI,EAAE,cAAc;QACpB,WAAW,EAAE,6CAA6C;QAC1D,OAAO,EAAE,QAAQ;QACjB,aAAa,EAAE;YACb,SAAS,EAAE,CAAC,6CAA6C,EAAE,sBAAsB,CAAC;YAClF,KAAK,EAAE,CAAC,qDAAqD,CAAC;SAC/D;QACD,QAAQ,EAAE;YACR;gBACE,KAAK,EAAE,cAAc;gBACrB,IAAI,EAAE;;;;;UAKJ;aACH;SACF;KACF;CAC0B,CAAC","sourcesContent":["import { ComponentManifest } from '@/manifests/components/types.js';\n\nexport default {\n  select: {\n    name: 'Select Input',\n    description: 'Dropdown list for selecting a single option',\n    element: 'select',\n    usageGuidance: {\n      whenToUse: ['Selecting from a list of predefined options', 'Limited screen space'],\n      avoid: ['Multiple selections (use the Combobox webcomponent)'],\n    },\n    examples: [\n      {\n        title: 'Basic select',\n        code: `<label for=\"reports\">Select report frequency</label>\n<select name=\"reports\">\n  <option value=\"daily\">Daily Report</option>\n  <option value=\"weekly\">Weekly Report</option>\n  <option value=\"monthly\">Monthly Report</option>\n</select>`,\n      },\n    ],\n  },\n} satisfies ComponentManifest;\n"]}

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

@@ -1,21 +0,0 @@
-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

@@ -1,69 +0,0 @@
-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