@triptease/design-system-mcp 0.0.7 → 1.0.1

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @triptease/design-system-mcp
 
+## 1.0.1
+
+### Patch Changes
+
+- Updated dependencies
+- Updated dependencies
+  - @triptease/tt-highlight@1.0.2
+  - @triptease/tt-line-chart@1.0.8
+
+## 1.0.0
+
+### Major Changes
+
+- Promote to v1
+
 ## 0.0.7
 
 ### Patch Changes

package/README.md

@@ -157,65 +157,49 @@ Create or edit `.mcp.json` in your project root:
 
 Replace `<path-to-component-library>` with the relative or absolute path to the component-library repository.
 
-## Available Tools
+## Available Resources
 
-The MCP server provides 4 tools:
+The MCP server provides access to design system documentation through resources:
 
-### 1. `get_component_docs`
+### 1. Components
 
-Get detailed documentation for a specific component.
+**List all components:** `designsystem://components`
 
-**Parameters:**
+Returns a list of all available design system components with name, description, and element type.
 
-- `component` (string, required): Component name (e.g., 'button', 'input', 'badge', 'checkbox', 'card')
+**Get component details:** `designsystem://components/{name}`
 
-**Returns:** JSON with complete component documentation including usage guidance, attributes, states, examples, and design tokens.
+Returns complete documentation for a specific component including usage guidance, attributes (with variant selection guidance!), states, examples, and design tokens.
 
 **Example usage with Claude:**
 
+> "Show me all available components"
 > "Get me the documentation for the button component"
 
-### 2. `list_components`
+### 2. Design Tokens
 
-List all available design system componentManifest.
+**List token categories:** `designsystem://tokens`
 
-**Parameters:** None
+Returns available token categories with counts.
 
-**Returns:** JSON array of componentManifest with name, description, and element type.
+**Get tokens by category:** `designsystem://tokens/{category}`
 
-**Example usage with Claude:**
-
-> "What componentManifest are available in the design system?"
-
-### 3. `get_design_tokens`
-
-Get design tokens by category.
-
-**Parameters:**
-
-- `category` (string, required): One of 'colors', 'spacing', 'typography', 'shadows', 'all'
-
-**Returns:** JSON object with design tokens organized by category.
+Returns design tokens for a specific category (colors, spacing, typography, shadows, etc.).
 
 **Example usage with Claude:**
 
 > "Show me all the color tokens in the design system"
 > "What spacing tokens are available?"
 
-### 4. `search_components`
-
-Search for componentManifest by keyword.
+### 3. Setup Guides
 
-**Parameters:**
+**All guides:** `designsystem://guides/setup`
 
-- `query` (string, required): Search term to find in component names and descriptions
+**NPM installation:** `designsystem://guides/setup/npm`
 
-**Returns:** JSON with search results including matched componentManifest.
+**CDN installation:** `designsystem://guides/setup/cdn`
 
-**Example usage with Claude:**
-
-> "Search for form-related componentManifest"
-> "Find componentManifest for status indicators"
+Returns installation instructions with current recommended versions.
 
 ## Usage Examples
 
@@ -225,27 +209,37 @@ Once configured, you can interact with the MCP server naturally through Claude C
 
 ```text
 You: "How do I create a destructive button?"
-Claude: [Uses get_component_docs to fetch button documentation]
+Claude: [Reads designsystem://components/button]
        "Here's how to create a destructive button:
-       <button data-theme="destructive-primary">Delete</button>"
+       <button data-theme="destructive-primary">Delete</button>
+
+       Use destructive-primary for irreversible actions like deletions."
 ```
 
 **Exploring design tokens:**
 
 ```text
 You: "What color should I use for error states?"
-Claude: [Uses get_design_tokens with category="colors"]
+Claude: [Reads designsystem://tokens/colors]
        "For error states, use the alert color tokens:
        - --color-alert-400 for primary error color
        - --color-alert-100 for error backgrounds"
 ```
 
-**Finding componentManifest:**
+**Finding components:**
 
 ```text
-You: "What can I use to show validation errors?"
-Claude: [Uses search_components with query="validation"]
-       "The Input component supports validation styling via aria-invalid..."
+You: "What components are available for forms?"
+Claude: [Reads designsystem://components, filters results]
+       "Here are the form-related components:
+       - Text Input (input)
+       - Number Input (input[type='number'])
+       - Textarea (textarea)
+       - Select (select)
+       - Checkbox (input[type='checkbox'])
+       - Radio (input[type='radio'])
+
+       Would you like details on any of these?"
 ```
 
 ## Architecture

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@triptease/design-system-mcp",
-    "version": "0.0.7",
+    "version": "1.0.1",
     "description": "MCP server for Triptease design system documentation",
     "type": "module",
     "main": "dist/src/index.js",
@@ -27,8 +27,8 @@
         "@triptease/tt-date-picker": "6.1.2",
         "@triptease/tt-date-range-picker": "6.2.3",
         "@triptease/tt-dialog": "5.1.1",
-        "@triptease/tt-highlight": "1.0.1",
-        "@triptease/tt-line-chart": "1.0.7",
+        "@triptease/tt-highlight": "1.0.2",
+        "@triptease/tt-line-chart": "1.0.8",
         "zod": "^4.3.6"
     },
     "devDependencies": {

package/dist/src/index.js

@@ -1,13 +1,8 @@
 #!/usr/bin/env node
-import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
+import { McpServer, ResourceTemplate } from '@modelcontextprotocol/sdk/server/mcp.js';
 import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';
 import packageJson from './../package.json' with { type: 'json' };
-import getComponentDocsTool from './tools/getComponentDocs/index.js';
-import listComponentsTool from './tools/listComponents/index.js';
-import getDesignTokensTool from './tools/getCSSTokens/index.js';
-import searchComponentsTool from './tools/searchComponents/index.js';
-import getSetupGuideTool from './tools/getSetupGuide/index.js';
-import listCSSTokens from './tools/listCSSTokens/index.js';
+import { listComponents, getComponentDocs, listCSSTokens, getCSSTokens, getSetupGuide, getPrinciplesGuide } from './resources/index.js';
 // Initialize MCP server
 const server = new McpServer({
     name: 'Triptease Design System MCP Server',
@@ -15,16 +10,47 @@ const server = new McpServer({
     description: packageJson.description,
 }, {
     capabilities: {
+        resources: {},
         tools: {},
     },
 });
-// Register getComponentDocsTool definitions
-server.registerTool(getComponentDocsTool.name, getComponentDocsTool.config, getComponentDocsTool.handler);
-server.registerTool(listComponentsTool.name, listComponentsTool.config, listComponentsTool.handler);
-server.registerTool(getDesignTokensTool.name, getDesignTokensTool.config, getDesignTokensTool.handler);
-server.registerTool(searchComponentsTool.name, searchComponentsTool.config, searchComponentsTool.handler);
-server.registerTool(getSetupGuideTool.name, getSetupGuideTool.config, getSetupGuideTool.handler);
-server.registerTool(listCSSTokens.name, listCSSTokens.config, listCSSTokens.handler);
+// Register resources
+server.registerResource('list_components', 'designsystem://components', {
+    description: 'List all available design system components',
+    mimeType: 'application/json',
+}, listComponents);
+server.registerResource('get_component_docs', new ResourceTemplate('designsystem://components/{name}', { list: undefined }), {
+    description: 'Get documentation for a specific component',
+    mimeType: 'application/json',
+}, async (_uri, { name }) => {
+    return getComponentDocs(name);
+});
+server.registerResource('list_css_tokens', 'designsystem://tokens', {
+    description: 'List all CSS token categories with counts',
+    mimeType: 'application/json',
+}, listCSSTokens);
+server.registerResource('get_css_tokens', new ResourceTemplate('designsystem://tokens/{category}', { list: undefined }), {
+    description: 'Get CSS tokens for a specific category',
+    mimeType: 'application/json',
+}, async (_uri, { category }) => {
+    return getCSSTokens(category);
+});
+server.registerResource('setup_guide_all', 'designsystem://guides/setup', {
+    description: 'Get all setup and installation instructions',
+    mimeType: 'application/json',
+}, async () => getSetupGuide());
+server.registerResource('setup_guide_npm', 'designsystem://guides/setup/npm', {
+    description: 'Get NPM setup and installation instructions',
+    mimeType: 'application/json',
+}, async () => getSetupGuide('npm'));
+server.registerResource('setup_guide_cdn', 'designsystem://guides/setup/cdn', {
+    description: 'Get CDN setup and installation instructions',
+    mimeType: 'application/json',
+}, async () => getSetupGuide('cdn'));
+server.registerResource('principles_guide', 'designsystem://guides/principles', {
+    description: 'Get design system usage principles and best practices',
+    mimeType: 'application/json',
+}, getPrinciplesGuide);
 // Start the server
 async function main() {
     const transport = new StdioServerTransport();

package/dist/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AACpE,OAAO,EAAE,oBAAoB,EAAE,MAAM,2CAA2C,CAAC;AACjF,OAAO,WAAW,MAAM,mBAAmB,CAAC,OAAO,IAAI,EAAE,MAAM,EAAE,CAAC;AAElE,OAAO,oBAAoB,MAAM,mCAAmC,CAAC;AACrE,OAAO,kBAAkB,MAAM,iCAAiC,CAAC;AACjE,OAAO,mBAAmB,MAAM,+BAA+B,CAAC;AAChE,OAAO,oBAAoB,MAAM,mCAAmC,CAAC;AACrE,OAAO,iBAAiB,MAAM,gCAAgC,CAAC;AAC/D,OAAO,aAAa,MAAM,gCAAgC,CAAC;AAE3D,wBAAwB;AACxB,MAAM,MAAM,GAAG,IAAI,SAAS,CAC1B;IACE,IAAI,EAAE,oCAAoC;IAC1C,OAAO,EAAE,WAAW,CAAC,OAAO;IAC5B,WAAW,EAAE,WAAW,CAAC,WAAW;CACrC,EACD;IACE,YAAY,EAAE;QACZ,KAAK,EAAE,EAAE;KACV;CACF,CACF,CAAC;AAEF,4CAA4C;AAC5C,MAAM,CAAC,YAAY,CAAC,oBAAoB,CAAC,IAAI,EAAE,oBAAoB,CAAC,MAAM,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAC1G,MAAM,CAAC,YAAY,CAAC,kBAAkB,CAAC,IAAI,EAAE,kBAAkB,CAAC,MAAM,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAC;AACpG,MAAM,CAAC,YAAY,CAAC,mBAAmB,CAAC,IAAI,EAAE,mBAAmB,CAAC,MAAM,EAAE,mBAAmB,CAAC,OAAO,CAAC,CAAC;AACvG,MAAM,CAAC,YAAY,CAAC,oBAAoB,CAAC,IAAI,EAAE,oBAAoB,CAAC,MAAM,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAC1G,MAAM,CAAC,YAAY,CAAC,iBAAiB,CAAC,IAAI,EAAE,iBAAiB,CAAC,MAAM,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;AACjG,MAAM,CAAC,YAAY,CAAC,aAAa,CAAC,IAAI,EAAE,aAAa,CAAC,MAAM,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;AAErF,mBAAmB;AACnB,KAAK,UAAU,IAAI;IACjB,MAAM,SAAS,GAAG,IAAI,oBAAoB,EAAE,CAAC;IAC7C,MAAM,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;IAChC,OAAO,CAAC,IAAI,CAAC,IAAI,WAAW,CAAC,IAAI,mBAAmB,CAAC,CAAC;IACtD,OAAO,CAAC,IAAI,CAAC,IAAI,WAAW,CAAC,IAAI,uBAAuB,WAAW,CAAC,OAAO,EAAE,CAAC,CAAC;AACjF,CAAC;AAED,IAAI,EAAE,CAAC,KAAK,CAAC,CAAC,KAAK,EAAE,EAAE;IACrB,MAAM,YAAY,GAAG,KAAK,YAAY,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAC5E,OAAO,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;IAC5B,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;AAClB,CAAC,CAAC,CAAC","sourcesContent":["#!/usr/bin/env node\nimport { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';\nimport { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';\nimport packageJson from '@/../package.json' with { type: 'json' };\n\nimport getComponentDocsTool from '@/tools/getComponentDocs/index.js';\nimport listComponentsTool from '@/tools/listComponents/index.js';\nimport getDesignTokensTool from '@/tools/getCSSTokens/index.js';\nimport searchComponentsTool from '@/tools/searchComponents/index.js';\nimport getSetupGuideTool from '@/tools/getSetupGuide/index.js';\nimport listCSSTokens from '@/tools/listCSSTokens/index.js';\n\n// Initialize MCP server\nconst server = new McpServer(\n  {\n    name: 'Triptease Design System MCP Server',\n    version: packageJson.version,\n    description: packageJson.description,\n  },\n  {\n    capabilities: {\n      tools: {},\n    },\n  }\n);\n\n// Register getComponentDocsTool definitions\nserver.registerTool(getComponentDocsTool.name, getComponentDocsTool.config, getComponentDocsTool.handler);\nserver.registerTool(listComponentsTool.name, listComponentsTool.config, listComponentsTool.handler);\nserver.registerTool(getDesignTokensTool.name, getDesignTokensTool.config, getDesignTokensTool.handler);\nserver.registerTool(searchComponentsTool.name, searchComponentsTool.config, searchComponentsTool.handler);\nserver.registerTool(getSetupGuideTool.name, getSetupGuideTool.config, getSetupGuideTool.handler);\nserver.registerTool(listCSSTokens.name, listCSSTokens.config, listCSSTokens.handler);\n\n// Start the server\nasync function main() {\n  const transport = new StdioServerTransport();\n  await server.connect(transport);\n  console.info(`[${packageJson.name}]: Server started`);\n  console.info(`[${packageJson.name}]: Current version: ${packageJson.version}`);\n}\n\nmain().catch((error) => {\n  const errorMessage = error instanceof Error ? error.message : String(error);\n  console.error(errorMessage);\n  process.exit(1);\n});\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"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","sourcesContent":["#!/usr/bin/env node\nimport { McpServer, ResourceTemplate } from '@modelcontextprotocol/sdk/server/mcp.js';\nimport { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';\nimport packageJson from '@/../package.json' with { type: 'json' };\n\nimport { listComponents, getComponentDocs, listCSSTokens, getCSSTokens, getSetupGuide, getPrinciplesGuide } from '@/resources/index.js';\n\n// Initialize MCP server\nconst server = new McpServer(\n  {\n    name: 'Triptease Design System MCP Server',\n    version: packageJson.version,\n    description: packageJson.description,\n  },\n  {\n    capabilities: {\n      resources: {},\n      tools: {},\n    },\n  }\n);\n\n// Register resources\nserver.registerResource(\n  'list_components',\n  'designsystem://components',\n  {\n    description: 'List all available design system components',\n    mimeType: 'application/json',\n  },\n  listComponents\n);\n\nserver.registerResource(\n  'get_component_docs',\n  new ResourceTemplate('designsystem://components/{name}', { list: undefined }),\n  {\n    description: 'Get documentation for a specific component',\n    mimeType: 'application/json',\n  },\n  async (_uri, { name }) => {\n    return getComponentDocs(name as string);\n  }\n);\n\nserver.registerResource(\n  'list_css_tokens',\n  'designsystem://tokens',\n  {\n    description: 'List all CSS token categories with counts',\n    mimeType: 'application/json',\n  },\n  listCSSTokens\n);\n\nserver.registerResource(\n  'get_css_tokens',\n  new ResourceTemplate('designsystem://tokens/{category}', { list: undefined }),\n  {\n    description: 'Get CSS tokens for a specific category',\n    mimeType: 'application/json',\n  },\n  async (_uri, { category }) => {\n    return getCSSTokens(category as string);\n  }\n);\n\nserver.registerResource(\n  'setup_guide_all',\n  'designsystem://guides/setup',\n  {\n    description: 'Get all setup and installation instructions',\n    mimeType: 'application/json',\n  },\n  async () => getSetupGuide()\n);\n\nserver.registerResource(\n  'setup_guide_npm',\n  'designsystem://guides/setup/npm',\n  {\n    description: 'Get NPM setup and installation instructions',\n    mimeType: 'application/json',\n  },\n  async () => getSetupGuide('npm')\n);\n\nserver.registerResource(\n  'setup_guide_cdn',\n  'designsystem://guides/setup/cdn',\n  {\n    description: 'Get CDN setup and installation instructions',\n    mimeType: 'application/json',\n  },\n  async () => getSetupGuide('cdn')\n);\n\nserver.registerResource(\n  'principles_guide',\n  'designsystem://guides/principles',\n  {\n    description: 'Get design system usage principles and best practices',\n    mimeType: 'application/json',\n  },\n  getPrinciplesGuide\n);\n\n// Start the server\nasync function main() {\n  const transport = new StdioServerTransport();\n  await server.connect(transport);\n  console.info(`[${packageJson.name}]: Server started`);\n  console.info(`[${packageJson.name}]: Current version: ${packageJson.version}`);\n}\n\nmain().catch((error) => {\n  const errorMessage = error instanceof Error ? error.message : String(error);\n  console.error(errorMessage);\n  process.exit(1);\n});\n"]}

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

@@ -34,7 +34,7 @@ export default {
                     name: 'tt-bar-chart',
                     includesTypes: false,
                     optional: false,
-                    moduleFormat: "esm",
+                    moduleFormat: 'esm',
                     pinnedVersionUrl: buildCDNUrl('tt-bar-chart', latestBarChartVersion),
                     pinnedMajorVersionUrl: buildCDNUrl('tt-bar-chart', buildMajorVersion(latestBarChartVersion)),
                     latestVersionUrl: buildCDNUrl('tt-bar-chart', 'latest'),
@@ -44,7 +44,7 @@ export default {
                     name: 'tt-dataset',
                     includesTypes: false,
                     optional: false,
-                    moduleFormat: "esm",
+                    moduleFormat: 'esm',
                     pinnedVersionUrl: buildCDNUrl('tt-dataset', latestDatasetVersion),
                     pinnedMajorVersionUrl: buildCDNUrl('tt-dataset', buildMajorVersion(latestDatasetVersion)),
                     latestVersionUrl: buildCDNUrl('tt-dataset', 'latest'),
@@ -54,7 +54,7 @@ export default {
                     name: 'tt-data-point',
                     includesTypes: false,
                     optional: false,
-                    moduleFormat: "esm",
+                    moduleFormat: 'esm',
                     pinnedVersionUrl: buildCDNUrl('tt-data-point', latestDataPointVersion),
                     pinnedMajorVersionUrl: buildCDNUrl('tt-data-point', buildMajorVersion(latestDataPointVersion)),
                     latestVersionUrl: buildCDNUrl('tt-data-point', 'latest'),

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

@@ -1 +1 @@
-{"version":3,"file":"barChart.js","sourceRoot":"","sources":["../../../../../src/manifests/components/entries/barChart.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 latestBarChartVersion = packageJson.dependencies['@triptease/tt-bar-chart'];\nconst latestDatasetVersion = packageJson.dependencies['@triptease/tt-dataset'];\nconst latestDataPointVersion = packageJson.dependencies['@triptease/tt-data-point'];\n\nexport default {\n  'bar-chart': {\n    name: 'Bar Chart - Web Component',\n    description: 'Bar chart for comparing values across categories',\n    ssrSafe: true,\n    element: 'tt-bar-chart',\n    usageGuidance: {\n      whenToUse: [\n        'To compare size between two or more categories',\n        'To show values that can be ranked in ascending or descending order',\n        'To show short, discrete periods of time, when comparing individual periods matters more than showing a long-term trend',\n        'To compare multiple datasets (series) across the same categories',\n      ],\n      avoid: [\n        'When the number of datapoints makes the chart hard to read',\n        'When showing long, continuous trends over time (use a line or area chart instead)',\n        'When the user can expand the date range to very large periods, making bars inappropriate',\n      ],\n    },\n    installationOptions: {\n      npm: [\n        { name: '@triptease/tt-bar-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-bar-chart',\n          includesTypes: false,\n          optional: false,\n          moduleFormat: \"esm\",\n          pinnedVersionUrl: buildCDNUrl('tt-bar-chart', latestBarChartVersion),\n          pinnedMajorVersionUrl: buildCDNUrl('tt-bar-chart', buildMajorVersion(latestBarChartVersion)),\n          latestVersionUrl: buildCDNUrl('tt-bar-chart', 'latest'),\n          guidance:\n            'Prefer pinned major version URL to avoid 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          moduleFormat: \"esm\",\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    },\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      direction: {\n        type: 'enum',\n        values: ['horizontal', 'vertical'],\n        description: 'Bar orientation. Use vertical for time series data.',\n      },\n      stacked: {\n        type: 'boolean',\n        description:\n          'Stack datasets vertically. Use when datasets contribute to meaningful total. Limit to 6 datasets max.',\n      },\n      loading: {\n        type: 'boolean',\n        description: 'Show loading state while data fetches. Component handles aria-busy automatically.',\n      },\n    },\n    examples: [\n      {\n        title: 'Basic bar chart',\n        code: `import '@triptease/tt-bar-chart';\nimport '@triptease/tt-dataset';\nimport '@triptease/tt-data-point';\n\n<tt-bar-chart id=\"basic-chart\">\n  <tt-dataset label=\"2024\">\n    <tt-data-point label=\"Total Opens\" value={2600}></tt-data-point>\n    <tt-data-point label=\"Total Clicks\" value={355}></tt-data-point>\n    <tt-data-point label=\"Bookings\" value={76}></tt-data-point>\n  </tt-dataset>\n</tt-bar-chart>`,\n      },\n      {\n        title: 'Multiple datasets',\n        description:\n          'Use multiple datasets to compare the same categories across different groups or time periods. Limit datasets to a maximum of 6, as more datasets make the chart difficult to read and compare.',\n        code: `<tt-bar-chart id=\"multiple-datasets-chart\" height=\"30rem\">\n  <tt-dataset label=\"2024\">\n    <tt-data-point label=\"Total Bookings\" value={7}></tt-data-point>\n    <tt-data-point label=\"Total Clicks\" value={4}></tt-data-point>\n  </tt-dataset>\n  <tt-dataset label=\"2025\">\n    <tt-data-point label=\"Total Bookings\" value={2}></tt-data-point>\n    <tt-data-point label=\"Total Clicks\" value={3}></tt-data-point>\n  </tt-dataset>\n</tt-bar-chart>`,\n      },\n    ],\n  },\n} satisfies ComponentManifest;\n"]}
+{"version":3,"file":"barChart.js","sourceRoot":"","sources":["../../../../../src/manifests/components/entries/barChart.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 latestBarChartVersion = packageJson.dependencies['@triptease/tt-bar-chart'];\nconst latestDatasetVersion = packageJson.dependencies['@triptease/tt-dataset'];\nconst latestDataPointVersion = packageJson.dependencies['@triptease/tt-data-point'];\n\nexport default {\n  'bar-chart': {\n    name: 'Bar Chart - Web Component',\n    description: 'Bar chart for comparing values across categories',\n    ssrSafe: true,\n    element: 'tt-bar-chart',\n    usageGuidance: {\n      whenToUse: [\n        'To compare size between two or more categories',\n        'To show values that can be ranked in ascending or descending order',\n        'To show short, discrete periods of time, when comparing individual periods matters more than showing a long-term trend',\n        'To compare multiple datasets (series) across the same categories',\n      ],\n      avoid: [\n        'When the number of datapoints makes the chart hard to read',\n        'When showing long, continuous trends over time (use a line or area chart instead)',\n        'When the user can expand the date range to very large periods, making bars inappropriate',\n      ],\n    },\n    installationOptions: {\n      npm: [\n        { name: '@triptease/tt-bar-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-bar-chart',\n          includesTypes: false,\n          optional: false,\n          moduleFormat: 'esm',\n          pinnedVersionUrl: buildCDNUrl('tt-bar-chart', latestBarChartVersion),\n          pinnedMajorVersionUrl: buildCDNUrl('tt-bar-chart', buildMajorVersion(latestBarChartVersion)),\n          latestVersionUrl: buildCDNUrl('tt-bar-chart', 'latest'),\n          guidance:\n            'Prefer pinned major version URL to avoid 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          moduleFormat: 'esm',\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    },\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      direction: {\n        type: 'enum',\n        values: ['horizontal', 'vertical'],\n        description: 'Bar orientation. Use vertical for time series data.',\n      },\n      stacked: {\n        type: 'boolean',\n        description:\n          'Stack datasets vertically. Use when datasets contribute to meaningful total. Limit to 6 datasets max.',\n      },\n      loading: {\n        type: 'boolean',\n        description: 'Show loading state while data fetches. Component handles aria-busy automatically.',\n      },\n    },\n    examples: [\n      {\n        title: 'Basic bar chart',\n        code: `import '@triptease/tt-bar-chart';\nimport '@triptease/tt-dataset';\nimport '@triptease/tt-data-point';\n\n<tt-bar-chart id=\"basic-chart\">\n  <tt-dataset label=\"2024\">\n    <tt-data-point label=\"Total Opens\" value={2600}></tt-data-point>\n    <tt-data-point label=\"Total Clicks\" value={355}></tt-data-point>\n    <tt-data-point label=\"Bookings\" value={76}></tt-data-point>\n  </tt-dataset>\n</tt-bar-chart>`,\n      },\n      {\n        title: 'Multiple datasets',\n        description:\n          'Use multiple datasets to compare the same categories across different groups or time periods. Limit datasets to a maximum of 6, as more datasets make the chart difficult to read and compare.',\n        code: `<tt-bar-chart id=\"multiple-datasets-chart\" height=\"30rem\">\n  <tt-dataset label=\"2024\">\n    <tt-data-point label=\"Total Bookings\" value={7}></tt-data-point>\n    <tt-data-point label=\"Total Clicks\" value={4}></tt-data-point>\n  </tt-dataset>\n  <tt-dataset label=\"2025\">\n    <tt-data-point label=\"Total Bookings\" value={2}></tt-data-point>\n    <tt-data-point label=\"Total Clicks\" value={3}></tt-data-point>\n  </tt-dataset>\n</tt-bar-chart>`,\n      },\n    ],\n  },\n} satisfies ComponentManifest;\n"]}

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

@@ -11,10 +11,15 @@ declare const _default: {
             card: string;
             'card-dataview': string;
         };
-        examples: {
+        examples: ({
             title: string;
             code: string;
-        }[];
+            description?: undefined;
+        } | {
+            title: string;
+            description: string;
+            code: string;
+        })[];
     };
 };
 export default _default;

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

@@ -17,8 +17,8 @@ export default {
             ],
         },
         classes: {
-            card: 'Standard card with padding',
-            'card-dataview': 'Card optimized for displaying metrics/data',
+            card: 'Pre-styled container with flex layout, spacing, borders, and elevation',
+            'card-dataview': 'Card variant with grid layout optimized for displaying metrics/data',
         },
         examples: [
             {
@@ -26,6 +26,14 @@ export default {
                 code: `<div class="card">
   <h3>Card Title</h3>
   <p>Card content goes here...</p>
+</div>`,
+            },
+            {
+                title: 'Card with custom padding',
+                description: 'Customize using --card-padding or --card-vertical-spacing CSS variables',
+                code: `<div class="card" style="--card-padding: var(--space-scale-4)">
+  <h3>Card with more padding</h3>
+  <p>Customized via CSS variable instead of writing custom CSS</p>
 </div>`,
             },
         ],

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

@@ -1 +1 @@
-{"version":3,"file":"card.js","sourceRoot":"","sources":["../../../../../src/manifests/components/entries/card.ts"],"names":[],"mappings":"AAEA,eAAe;IACb,IAAI,EAAE;QACJ,IAAI,EAAE,MAAM;QACZ,WAAW,EAAE,yFAAyF;QACtG,OAAO,EAAE,KAAK;QACd,aAAa,EAAE;YACb,SAAS,EAAE;gBACT,8CAA8C;gBAC9C,sDAAsD;gBACtD,uCAAuC;gBACvC,gDAAgD;aACjD;YACD,KAAK,EAAE;gBACL,yDAAyD;gBACzD,qCAAqC;gBACrC,+BAA+B;aAChC;SACF;QACD,OAAO,EAAE;YACP,IAAI,EAAE,4BAA4B;YAClC,eAAe,EAAE,4CAA4C;SAC9D;QACD,QAAQ,EAAE;YACR;gBACE,KAAK,EAAE,YAAY;gBACnB,IAAI,EAAE;;;OAGP;aACA;SACF;KACF;CAC0B,CAAC","sourcesContent":["import { ComponentManifest } from '@/manifests/components/types.js';\n\nexport default {\n  card: {\n    name: 'Card',\n    description: 'Container component that groups related content and actions in a visually distinct area',\n    element: 'div',\n    usageGuidance: {\n      whenToUse: [\n        'Display related information as a single unit',\n        'Create scannable layouts with multiple content items',\n        'Group content with associated actions',\n        'Highlight content that users can interact with',\n      ],\n      avoid: [\n        'For single pieces of text (use standard layout instead)',\n        \"When visual separation isn't needed\",\n        'In dense data tables or lists',\n      ],\n    },\n    classes: {\n      card: 'Standard card with padding',\n      'card-dataview': 'Card optimized for displaying metrics/data',\n    },\n    examples: [\n      {\n        title: 'Basic card',\n        code: `<div class=\"card\">\n  <h3>Card Title</h3>\n  <p>Card content goes here...</p>\n</div>`,\n      },\n    ],\n  },\n} satisfies ComponentManifest;\n"]}
+{"version":3,"file":"card.js","sourceRoot":"","sources":["../../../../../src/manifests/components/entries/card.ts"],"names":[],"mappings":"AAEA,eAAe;IACb,IAAI,EAAE;QACJ,IAAI,EAAE,MAAM;QACZ,WAAW,EACT,yFAAyF;QAC3F,OAAO,EAAE,KAAK;QACd,aAAa,EAAE;YACb,SAAS,EAAE;gBACT,8CAA8C;gBAC9C,sDAAsD;gBACtD,uCAAuC;gBACvC,gDAAgD;aACjD;YACD,KAAK,EAAE;gBACL,yDAAyD;gBACzD,qCAAqC;gBACrC,+BAA+B;aAChC;SACF;QACD,OAAO,EAAE;YACP,IAAI,EAAE,wEAAwE;YAC9E,eAAe,EAAE,qEAAqE;SACvF;QACD,QAAQ,EAAE;YACR;gBACE,KAAK,EAAE,YAAY;gBACnB,IAAI,EAAE;;;OAGP;aACA;YACD;gBACE,KAAK,EAAE,0BAA0B;gBACjC,WAAW,EACT,yEAAyE;gBAC3E,IAAI,EAAE;;;OAGP;aACA;SACF;KACF;CAC0B,CAAC","sourcesContent":["import { ComponentManifest } from '@/manifests/components/types.js';\n\nexport default {\n  card: {\n    name: 'Card',\n    description:\n      'Container component that groups related content and actions in a visually distinct area',\n    element: 'div',\n    usageGuidance: {\n      whenToUse: [\n        'Display related information as a single unit',\n        'Create scannable layouts with multiple content items',\n        'Group content with associated actions',\n        'Highlight content that users can interact with',\n      ],\n      avoid: [\n        'For single pieces of text (use standard layout instead)',\n        \"When visual separation isn't needed\",\n        'In dense data tables or lists',\n      ],\n    },\n    classes: {\n      card: 'Pre-styled container with flex layout, spacing, borders, and elevation',\n      'card-dataview': 'Card variant with grid layout optimized for displaying metrics/data',\n    },\n    examples: [\n      {\n        title: 'Basic card',\n        code: `<div class=\"card\">\n  <h3>Card Title</h3>\n  <p>Card content goes here...</p>\n</div>`,\n      },\n      {\n        title: 'Card with custom padding',\n        description:\n          'Customize using --card-padding or --card-vertical-spacing CSS variables',\n        code: `<div class=\"card\" style=\"--card-padding: var(--space-scale-4)\">\n  <h3>Card with more padding</h3>\n  <p>Customized via CSS variable instead of writing custom CSS</p>\n</div>`,\n      },\n    ],\n  },\n} satisfies ComponentManifest;\n"]}

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

@@ -26,7 +26,7 @@ export default {
                     name: '@triptease/tt-combobox',
                     includesTypes: false,
                     optional: false,
-                    moduleFormat: "esm",
+                    moduleFormat: 'esm',
                     latestVersionUrl: buildCDNUrl('tt-combobox', 'latest'),
                     pinnedMajorVersionUrl: buildCDNUrl('tt-combobox', buildMajorVersion(version)),
                     pinnedVersionUrl: buildCDNUrl('tt-combobox', version),

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

@@ -1 +1 @@
-{"version":3,"file":"combobox.js","sourceRoot":"","sources":["../../../../../src/manifests/components/entries/combobox.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AACzE,OAAO,WAAW,MAAM,mBAAmB,CAAC,OAAO,IAAI,EAAE,MAAM,EAAE,CAAC;AAElE,MAAM,OAAO,GAAG,WAAW,CAAC,YAAY,CAAC,wBAAwB,CAAC,CAAC;AAEnE,eAAe;IACb,QAAQ,EAAE;QACR,IAAI,EAAE,UAAU;QAChB,WAAW,EACT,iHAAiH;QACnH,OAAO,EAAE,IAAI;QACb,OAAO,EAAE,gDAAgD;QACzD,aAAa,EAAE;YACb,SAAS,EAAE;gBACT,2DAA2D;gBAC3D,qDAAqD;gBACrD,qDAAqD;gBACrD,qCAAqC;aACtC;YACD,KAAK,EAAE;gBACL,0EAA0E;gBAC1E,2EAA2E;aAC5E;SACF;QACD,mBAAmB,EAAE;YACnB,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,wBAAwB,EAAE,aAAa,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC;YAC/E,GAAG,EAAE;gBACH;oBACE,IAAI,EAAE,wBAAwB;oBAC9B,aAAa,EAAE,KAAK;oBACpB,QAAQ,EAAE,KAAK;oBACf,YAAY,EAAE,KAAK;oBACnB,gBAAgB,EAAE,WAAW,CAAC,aAAa,EAAE,QAAQ,CAAC;oBACtD,qBAAqB,EAAE,WAAW,CAAC,aAAa,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;oBAC7E,gBAAgB,EAAE,WAAW,CAAC,aAAa,EAAE,OAAO,CAAC;oBACrD,QAAQ,EACN,yHAAyH;iBAC5H;aACF;SACF;QACD,UAAU,EAAE;YACV,WAAW,EAAE;gBACX,IAAI,EAAE,SAAS;gBACf,WAAW,EACT,0HAA0H;aAC7H;YACD,oBAAoB,EAAE;gBACpB,IAAI,EAAE,SAAS;gBACf,WAAW,EAAE,uFAAuF;aACrG;YACD,WAAW,EAAE;gBACX,IAAI,EAAE,QAAQ;gBACd,WAAW,EAAE,oDAAoD;aAClE;YACD,QAAQ,EAAE;gBACR,IAAI,EAAE,SAAS;gBACf,WAAW,EAAE,8FAA8F;aAC5G;YACD,OAAO,EAAE;gBACP,IAAI,EAAE,SAAS;gBACf,WAAW,EAAE,4FAA4F;aAC1G;YACD,aAAa,EAAE;gBACb,IAAI,EAAE,SAAS;gBACf,WAAW,EAAE,kGAAkG;aAChH;SACF;QACD,QAAQ,EAAE;YACR;gBACE,KAAK,EAAE,uBAAuB;gBAC9B,IAAI,EAAE;;;;;;;YAOF;aACL;YACD;gBACE,KAAK,EAAE,sBAAsB;gBAC7B,WAAW,EACT,yIAAyI;gBAC3I,IAAI,EAAE;;;;;;;YAOF;aACL;YACD;gBACE,KAAK,EAAE,+BAA+B;gBACtC,WAAW,EACT,sNAAsN;gBACxN,IAAI,EAAE;;;;;;;eAOC;aACR;YACD;gBACE,KAAK,EAAE,gCAAgC;gBACvC,WAAW,EAAE,uDAAuD;gBACpE,IAAI,EAAE;;;;;;;;eAQC;aACR;YACD;gBACE,KAAK,EAAE,iCAAiC;gBACxC,WAAW,EAAE,qEAAqE;gBAClF,IAAI,EAAE;;;;;;;;eAQC;aACR;YACD;gBACE,KAAK,EAAE,yBAAyB;gBAChC,WAAW,EAAE,yKAAyK;gBACtL,IAAI,EAAE;;;;;;;;;;QAUN;aACD;YACD;gBACE,KAAK,EAAE,8CAA8C;gBACrD,WAAW,EACT,8IAA8I;gBAChJ,IAAI,EAAE;;;;;;;;eAQC;aACR;YACD;gBACE,KAAK,EAAE,mCAAmC;gBAC1C,WAAW,EAAE,sVAAsV;gBACnW,IAAI,EAAE;;;;;;;;;;;;;;;;eAgBC;aACR;SACF;KACF;CAC0B,CAAC","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 version = packageJson.dependencies['@triptease/tt-combobox'];\n\nexport default {\n  combobox: {\n    name: 'Combobox',\n    description:\n      'Searchable dropdown that combines a text input with a list, available as both React component and Web Component',\n    ssrSafe: true,\n    element: 'Combobox (React) / tt-combobox (Web Component)',\n    usageGuidance: {\n      whenToUse: [\n        'Lists with many options where typing to filter is helpful',\n        'Users need to search/filter through options quickly',\n        'Space is limited for displaying all options at once',\n        'Single or multiple selection needed',\n      ],\n      avoid: [\n        'Small lists where all options should be visible (consider radio buttons)',\n        'Users would benefit from seeing all options simultaneously for comparison',\n      ],\n    },\n    installationOptions: {\n      npm: [{ name: '@triptease/tt-combobox', includesTypes: true, optional: false }],\n      cdn: [\n        {\n          name: '@triptease/tt-combobox',\n          includesTypes: false,\n          optional: false,\n          moduleFormat: \"esm\",\n          latestVersionUrl: buildCDNUrl('tt-combobox', 'latest'),\n          pinnedMajorVersionUrl: buildCDNUrl('tt-combobox', buildMajorVersion(version)),\n          pinnedVersionUrl: buildCDNUrl('tt-combobox', version),\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      multiselect: {\n        type: 'boolean',\n        description:\n          'Enable multi-select mode where multiple options can be selected. Value is array of strings, serialized as JSON in forms.',\n      },\n      'display-select-all': {\n        type: 'boolean',\n        description: 'Show a \"Select All\" option in multi-select mode. Only valid when multiselect is true.',\n      },\n      placeholder: {\n        type: 'string',\n        description: 'Placeholder text shown when no option is selected.',\n      },\n      disabled: {\n        type: 'boolean',\n        description: 'Disable the combobox. Use disabled attribute on option elements to disable specific options.',\n      },\n      invalid: {\n        type: 'boolean',\n        description: 'Mark the combobox as invalid for validation. Use with error slot to display error message.',\n      },\n      'open-upward': {\n        type: 'boolean',\n        description: 'Make the dropdown open upward instead of downward. Use when combobox is near bottom of viewport.',\n      },\n    },\n    examples: [\n      {\n        title: 'React - Single select',\n        code: `import { Combobox } from '@triptease/react/combobox';\n\n<label htmlFor=\"country\">Country</label>\n<Combobox id=\"country\">\n  <option value=\"us\" slot=\"option\">United States</option>\n  <option value=\"uk\" slot=\"option\">United Kingdom</option>\n  <option value=\"ca\" slot=\"option\">Canada</option>\n</Combobox>`,\n      },\n      {\n        title: 'React - Multi select',\n        description:\n          'Use multiselect and displaySelectAll props for multi-select with \"Select All\" option. Set value prop with array for default selections.',\n        code: `import { Combobox } from '@triptease/react/combobox';\n\n<label htmlFor=\"frameworks\">Frameworks</label>\n<Combobox id=\"frameworks\" multiselect displaySelectAll>\n  <option value=\"react\" slot=\"option\">React</option>\n  <option value=\"vue\" slot=\"option\">Vue.js</option>\n  <option value=\"angular\" slot=\"option\">Angular</option>\n</Combobox>`,\n      },\n      {\n        title: 'Web Component - Single select',\n        description:\n          'Basic single-select allows typing to filter options. Set value with .value property. Use disabled attribute on options to prevent selection while keeping them visible. Use placeholder attribute for guidance text.',\n        code: `import '@triptease/tt-combobox';\n\n<label for=\"country\">Country</label>\n<tt-combobox id=\"country\">\n  <option value=\"us\" slot=\"option\">United States</option>\n  <option value=\"uk\" slot=\"option\">United Kingdom</option>\n  <option value=\"ca\" slot=\"option\">Canada</option>\n</tt-combobox>`,\n      },\n      {\n        title: 'Web Component - With icon slot',\n        description: 'Use icon slot to add leading icon for visual context.',\n        code: `import '@triptease/tt-combobox';\n\n<label for=\"search-country\">Search country</label>\n<tt-combobox id=\"search-country\" placeholder=\"Type to search\">\n  <span slot=\"icon\">🔍</span>\n  <option value=\"us\" slot=\"option\">United States</option>\n  <option value=\"uk\" slot=\"option\">United Kingdom</option>\n  <option value=\"ca\" slot=\"option\">Canada</option>\n</tt-combobox>`,\n      },\n      {\n        title: 'Web Component - With error slot',\n        description: 'Use invalid attribute with error slot to display validation errors.',\n        code: `import '@triptease/tt-combobox';\n\n<label for=\"country\">Country</label>\n<tt-combobox id=\"country\" invalid>\n  <option value=\"us\" slot=\"option\">United States</option>\n  <option value=\"uk\" slot=\"option\">United Kingdom</option>\n  <option value=\"ca\" slot=\"option\">Canada</option>\n  <span slot=\"error\">Please select a valid country</span>\n</tt-combobox>`,\n      },\n      {\n        title: 'Web Component - In form',\n        description: `Use with HTML forms via name attribute. Form value is JSON string (e.g., [\"united-states\"]). Add required for validation. Listen to change event for real-time updates.`,\n        code: `import '@triptease/tt-combobox';\n\n<form onsubmit=\"handleSubmit(event)\">\n  <label for=\"country\">Country</label>\n  <tt-combobox id=\"country\" name=\"country\" required>\n    <option value=\"us\" slot=\"option\">United States</option>\n    <option value=\"uk\" slot=\"option\">United Kingdom</option>\n    <option value=\"ca\" slot=\"option\">Canada</option>\n  </tt-combobox>\n  <button type=\"submit\">Submit</button>\n</form>`,\n      },\n      {\n        title: 'Web Component - Multi select with select all',\n        description:\n          'Use multiselect and display-select-all attributes for multi-select. Set value with array. Use hidden attribute on options to hide from list.',\n        code: `import '@triptease/tt-combobox';\n\n<label for=\"frameworks\">Frameworks</label>\n<tt-combobox id=\"frameworks\" multiselect display-select-all>\n  <option value=\"react\" slot=\"option\">React</option>\n  <option value=\"vue\" slot=\"option\">Vue.js</option>\n  <option value=\"angular\" slot=\"option\">Angular</option>\n  <option value=\"svelte\" slot=\"option\">Svelte</option>\n</tt-combobox>`,\n      },\n      {\n        title: 'Web Component - CSS customization',\n        description: `Use CSS custom properties to customize appearance: --tt-combobox-min-width / --tt-combobox-max-width, --tt-combobox-background-color, --tt-combobox-border-color / --tt-combobox-border-width, --tt-combobox-placeholder-color, --tt-combobox-hover-background-color, --tt-combobox-option-background-color-hover, --tt-combobox-option-color-hover.`,\n        code: `import '@triptease/tt-combobox';\n\n<label for=\"country\">Country</label>\n<tt-combobox\n  id=\"country\"\n  placeholder=\"Select...\"\n  style=\"\n    --tt-combobox-min-width: 150px;\n    --tt-combobox-max-width: 150px;\n    --tt-combobox-background-color: var(--color-surface-600);\n    --tt-combobox-border-color: var(--color-primary-500);\n    --tt-combobox-border-width: 2px;\n  \">\n  <option value=\"us\" slot=\"option\">United States</option>\n  <option value=\"uk\" slot=\"option\">United Kingdom</option>\n  <option value=\"ca\" slot=\"option\">Canada</option>\n</tt-combobox>`,\n      },\n    ],\n  },\n} satisfies ComponentManifest;\n"]}
+{"version":3,"file":"combobox.js","sourceRoot":"","sources":["../../../../../src/manifests/components/entries/combobox.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AACzE,OAAO,WAAW,MAAM,mBAAmB,CAAC,OAAO,IAAI,EAAE,MAAM,EAAE,CAAC;AAElE,MAAM,OAAO,GAAG,WAAW,CAAC,YAAY,CAAC,wBAAwB,CAAC,CAAC;AAEnE,eAAe;IACb,QAAQ,EAAE;QACR,IAAI,EAAE,UAAU;QAChB,WAAW,EACT,iHAAiH;QACnH,OAAO,EAAE,IAAI;QACb,OAAO,EAAE,gDAAgD;QACzD,aAAa,EAAE;YACb,SAAS,EAAE;gBACT,2DAA2D;gBAC3D,qDAAqD;gBACrD,qDAAqD;gBACrD,qCAAqC;aACtC;YACD,KAAK,EAAE;gBACL,0EAA0E;gBAC1E,2EAA2E;aAC5E;SACF;QACD,mBAAmB,EAAE;YACnB,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,wBAAwB,EAAE,aAAa,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC;YAC/E,GAAG,EAAE;gBACH;oBACE,IAAI,EAAE,wBAAwB;oBAC9B,aAAa,EAAE,KAAK;oBACpB,QAAQ,EAAE,KAAK;oBACf,YAAY,EAAE,KAAK;oBACnB,gBAAgB,EAAE,WAAW,CAAC,aAAa,EAAE,QAAQ,CAAC;oBACtD,qBAAqB,EAAE,WAAW,CAAC,aAAa,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;oBAC7E,gBAAgB,EAAE,WAAW,CAAC,aAAa,EAAE,OAAO,CAAC;oBACrD,QAAQ,EACN,yHAAyH;iBAC5H;aACF;SACF;QACD,UAAU,EAAE;YACV,WAAW,EAAE;gBACX,IAAI,EAAE,SAAS;gBACf,WAAW,EACT,0HAA0H;aAC7H;YACD,oBAAoB,EAAE;gBACpB,IAAI,EAAE,SAAS;gBACf,WAAW,EAAE,uFAAuF;aACrG;YACD,WAAW,EAAE;gBACX,IAAI,EAAE,QAAQ;gBACd,WAAW,EAAE,oDAAoD;aAClE;YACD,QAAQ,EAAE;gBACR,IAAI,EAAE,SAAS;gBACf,WAAW,EAAE,8FAA8F;aAC5G;YACD,OAAO,EAAE;gBACP,IAAI,EAAE,SAAS;gBACf,WAAW,EAAE,4FAA4F;aAC1G;YACD,aAAa,EAAE;gBACb,IAAI,EAAE,SAAS;gBACf,WAAW,EAAE,kGAAkG;aAChH;SACF;QACD,QAAQ,EAAE;YACR;gBACE,KAAK,EAAE,uBAAuB;gBAC9B,IAAI,EAAE;;;;;;;YAOF;aACL;YACD;gBACE,KAAK,EAAE,sBAAsB;gBAC7B,WAAW,EACT,yIAAyI;gBAC3I,IAAI,EAAE;;;;;;;YAOF;aACL;YACD;gBACE,KAAK,EAAE,+BAA+B;gBACtC,WAAW,EACT,sNAAsN;gBACxN,IAAI,EAAE;;;;;;;eAOC;aACR;YACD;gBACE,KAAK,EAAE,gCAAgC;gBACvC,WAAW,EAAE,uDAAuD;gBACpE,IAAI,EAAE;;;;;;;;eAQC;aACR;YACD;gBACE,KAAK,EAAE,iCAAiC;gBACxC,WAAW,EAAE,qEAAqE;gBAClF,IAAI,EAAE;;;;;;;;eAQC;aACR;YACD;gBACE,KAAK,EAAE,yBAAyB;gBAChC,WAAW,EAAE,yKAAyK;gBACtL,IAAI,EAAE;;;;;;;;;;QAUN;aACD;YACD;gBACE,KAAK,EAAE,8CAA8C;gBACrD,WAAW,EACT,8IAA8I;gBAChJ,IAAI,EAAE;;;;;;;;eAQC;aACR;YACD;gBACE,KAAK,EAAE,mCAAmC;gBAC1C,WAAW,EAAE,sVAAsV;gBACnW,IAAI,EAAE;;;;;;;;;;;;;;;;eAgBC;aACR;SACF;KACF;CAC0B,CAAC","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 version = packageJson.dependencies['@triptease/tt-combobox'];\n\nexport default {\n  combobox: {\n    name: 'Combobox',\n    description:\n      'Searchable dropdown that combines a text input with a list, available as both React component and Web Component',\n    ssrSafe: true,\n    element: 'Combobox (React) / tt-combobox (Web Component)',\n    usageGuidance: {\n      whenToUse: [\n        'Lists with many options where typing to filter is helpful',\n        'Users need to search/filter through options quickly',\n        'Space is limited for displaying all options at once',\n        'Single or multiple selection needed',\n      ],\n      avoid: [\n        'Small lists where all options should be visible (consider radio buttons)',\n        'Users would benefit from seeing all options simultaneously for comparison',\n      ],\n    },\n    installationOptions: {\n      npm: [{ name: '@triptease/tt-combobox', includesTypes: true, optional: false }],\n      cdn: [\n        {\n          name: '@triptease/tt-combobox',\n          includesTypes: false,\n          optional: false,\n          moduleFormat: 'esm',\n          latestVersionUrl: buildCDNUrl('tt-combobox', 'latest'),\n          pinnedMajorVersionUrl: buildCDNUrl('tt-combobox', buildMajorVersion(version)),\n          pinnedVersionUrl: buildCDNUrl('tt-combobox', version),\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      multiselect: {\n        type: 'boolean',\n        description:\n          'Enable multi-select mode where multiple options can be selected. Value is array of strings, serialized as JSON in forms.',\n      },\n      'display-select-all': {\n        type: 'boolean',\n        description: 'Show a \"Select All\" option in multi-select mode. Only valid when multiselect is true.',\n      },\n      placeholder: {\n        type: 'string',\n        description: 'Placeholder text shown when no option is selected.',\n      },\n      disabled: {\n        type: 'boolean',\n        description: 'Disable the combobox. Use disabled attribute on option elements to disable specific options.',\n      },\n      invalid: {\n        type: 'boolean',\n        description: 'Mark the combobox as invalid for validation. Use with error slot to display error message.',\n      },\n      'open-upward': {\n        type: 'boolean',\n        description: 'Make the dropdown open upward instead of downward. Use when combobox is near bottom of viewport.',\n      },\n    },\n    examples: [\n      {\n        title: 'React - Single select',\n        code: `import { Combobox } from '@triptease/react/combobox';\n\n<label htmlFor=\"country\">Country</label>\n<Combobox id=\"country\">\n  <option value=\"us\" slot=\"option\">United States</option>\n  <option value=\"uk\" slot=\"option\">United Kingdom</option>\n  <option value=\"ca\" slot=\"option\">Canada</option>\n</Combobox>`,\n      },\n      {\n        title: 'React - Multi select',\n        description:\n          'Use multiselect and displaySelectAll props for multi-select with \"Select All\" option. Set value prop with array for default selections.',\n        code: `import { Combobox } from '@triptease/react/combobox';\n\n<label htmlFor=\"frameworks\">Frameworks</label>\n<Combobox id=\"frameworks\" multiselect displaySelectAll>\n  <option value=\"react\" slot=\"option\">React</option>\n  <option value=\"vue\" slot=\"option\">Vue.js</option>\n  <option value=\"angular\" slot=\"option\">Angular</option>\n</Combobox>`,\n      },\n      {\n        title: 'Web Component - Single select',\n        description:\n          'Basic single-select allows typing to filter options. Set value with .value property. Use disabled attribute on options to prevent selection while keeping them visible. Use placeholder attribute for guidance text.',\n        code: `import '@triptease/tt-combobox';\n\n<label for=\"country\">Country</label>\n<tt-combobox id=\"country\">\n  <option value=\"us\" slot=\"option\">United States</option>\n  <option value=\"uk\" slot=\"option\">United Kingdom</option>\n  <option value=\"ca\" slot=\"option\">Canada</option>\n</tt-combobox>`,\n      },\n      {\n        title: 'Web Component - With icon slot',\n        description: 'Use icon slot to add leading icon for visual context.',\n        code: `import '@triptease/tt-combobox';\n\n<label for=\"search-country\">Search country</label>\n<tt-combobox id=\"search-country\" placeholder=\"Type to search\">\n  <span slot=\"icon\">🔍</span>\n  <option value=\"us\" slot=\"option\">United States</option>\n  <option value=\"uk\" slot=\"option\">United Kingdom</option>\n  <option value=\"ca\" slot=\"option\">Canada</option>\n</tt-combobox>`,\n      },\n      {\n        title: 'Web Component - With error slot',\n        description: 'Use invalid attribute with error slot to display validation errors.',\n        code: `import '@triptease/tt-combobox';\n\n<label for=\"country\">Country</label>\n<tt-combobox id=\"country\" invalid>\n  <option value=\"us\" slot=\"option\">United States</option>\n  <option value=\"uk\" slot=\"option\">United Kingdom</option>\n  <option value=\"ca\" slot=\"option\">Canada</option>\n  <span slot=\"error\">Please select a valid country</span>\n</tt-combobox>`,\n      },\n      {\n        title: 'Web Component - In form',\n        description: `Use with HTML forms via name attribute. Form value is JSON string (e.g., [\"united-states\"]). Add required for validation. Listen to change event for real-time updates.`,\n        code: `import '@triptease/tt-combobox';\n\n<form onsubmit=\"handleSubmit(event)\">\n  <label for=\"country\">Country</label>\n  <tt-combobox id=\"country\" name=\"country\" required>\n    <option value=\"us\" slot=\"option\">United States</option>\n    <option value=\"uk\" slot=\"option\">United Kingdom</option>\n    <option value=\"ca\" slot=\"option\">Canada</option>\n  </tt-combobox>\n  <button type=\"submit\">Submit</button>\n</form>`,\n      },\n      {\n        title: 'Web Component - Multi select with select all',\n        description:\n          'Use multiselect and display-select-all attributes for multi-select. Set value with array. Use hidden attribute on options to hide from list.',\n        code: `import '@triptease/tt-combobox';\n\n<label for=\"frameworks\">Frameworks</label>\n<tt-combobox id=\"frameworks\" multiselect display-select-all>\n  <option value=\"react\" slot=\"option\">React</option>\n  <option value=\"vue\" slot=\"option\">Vue.js</option>\n  <option value=\"angular\" slot=\"option\">Angular</option>\n  <option value=\"svelte\" slot=\"option\">Svelte</option>\n</tt-combobox>`,\n      },\n      {\n        title: 'Web Component - CSS customization',\n        description: `Use CSS custom properties to customize appearance: --tt-combobox-min-width / --tt-combobox-max-width, --tt-combobox-background-color, --tt-combobox-border-color / --tt-combobox-border-width, --tt-combobox-placeholder-color, --tt-combobox-hover-background-color, --tt-combobox-option-background-color-hover, --tt-combobox-option-color-hover.`,\n        code: `import '@triptease/tt-combobox';\n\n<label for=\"country\">Country</label>\n<tt-combobox\n  id=\"country\"\n  placeholder=\"Select...\"\n  style=\"\n    --tt-combobox-min-width: 150px;\n    --tt-combobox-max-width: 150px;\n    --tt-combobox-background-color: var(--color-surface-600);\n    --tt-combobox-border-color: var(--color-primary-500);\n    --tt-combobox-border-width: 2px;\n  \">\n  <option value=\"us\" slot=\"option\">United States</option>\n  <option value=\"uk\" slot=\"option\">United Kingdom</option>\n  <option value=\"ca\" slot=\"option\">Canada</option>\n</tt-combobox>`,\n      },\n    ],\n  },\n} satisfies ComponentManifest;\n"]}

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

@@ -23,7 +23,7 @@ export default {
                     name: '@triptease/tt-date-picker',
                     includesTypes: false,
                     optional: false,
-                    moduleFormat: "esm",
+                    moduleFormat: 'esm',
                     latestVersionUrl: buildCDNUrl('tt-date-picker', 'latest'),
                     pinnedMajorVersionUrl: buildCDNUrl('tt-date-picker', buildMajorVersion(version)),
                     pinnedVersionUrl: buildCDNUrl('tt-date-picker', version),

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

@@ -1 +1 @@
-{"version":3,"file":"datePicker.js","sourceRoot":"","sources":["../../../../../src/manifests/components/entries/datePicker.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AACzE,OAAO,WAAW,MAAM,mBAAmB,CAAC,OAAO,IAAI,EAAE,MAAM,EAAE,CAAC;AAElE,MAAM,OAAO,GAAG,WAAW,CAAC,YAAY,CAAC,2BAA2B,CAAC,CAAC;AAEtE,eAAe;IACb,aAAa,EAAE;QACb,IAAI,EAAE,aAAa;QACnB,WAAW,EAAE,8FAA8F;QAC3G,OAAO,EAAE,IAAI;QACb,OAAO,EAAE,qDAAqD;QAC9D,aAAa,EAAE;YACb,SAAS,EAAE;gBACT,6CAA6C;gBAC7C,oCAAoC;gBACpC,+CAA+C;gBAC/C,6CAA6C;aAC9C;YACD,KAAK,EAAE,CAAC,gDAAgD,CAAC;SAC1D;QACD,mBAAmB,EAAE;YACnB,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,2BAA2B,EAAE,aAAa,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC;YAClF,GAAG,EAAE;gBACH;oBACE,IAAI,EAAE,2BAA2B;oBACjC,aAAa,EAAE,KAAK;oBACpB,QAAQ,EAAE,KAAK;oBACf,YAAY,EAAE,KAAK;oBACnB,gBAAgB,EAAE,WAAW,CAAC,gBAAgB,EAAE,QAAQ,CAAC;oBACzD,qBAAqB,EAAE,WAAW,CAAC,gBAAgB,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;oBAChF,gBAAgB,EAAE,WAAW,CAAC,gBAAgB,EAAE,OAAO,CAAC;oBACxD,QAAQ,EACN,yHAAyH;iBAC5H;aACF;SACF;QACD,QAAQ,EAAE;YACR;gBACE,KAAK,EAAE,eAAe;gBACtB,WAAW,EACT,yMAAyM;gBAC3M,IAAI,EAAE;;;yBAGW;aAClB;YACD;gBACE,KAAK,EAAE,oBAAoB;gBAC3B,WAAW,EACT,uHAAuH;gBACzH,IAAI,EAAE;;;;;;;;;GASX;aACI;YACD;gBACE,KAAK,EAAE,uBAAuB;gBAC9B,WAAW,EACT,+MAA+M;gBACjN,IAAI,EAAE;;;4CAG8B;aACrC;SACF;KACF;CAC0B,CAAC","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 version = packageJson.dependencies['@triptease/tt-date-picker'];\n\nexport default {\n  'date-picker': {\n    name: 'Date Picker',\n    description: 'Date picker for selecting a single date, available as both React component and Web Component',\n    ssrSafe: true,\n    element: 'DatePicker (React) / tt-date-picker (Web Component)',\n    usageGuidance: {\n      whenToUse: [\n        'Users need to select a specific single date',\n        'Date format needs to be consistent',\n        'Calendar visualization helps users pick dates',\n        'Date constraints are needed (min/max dates)',\n      ],\n      avoid: ['Date ranges are needed (use date range picker)'],\n    },\n    installationOptions: {\n      npm: [{ name: '@triptease/tt-date-picker', includesTypes: true, optional: false }],\n      cdn: [\n        {\n          name: '@triptease/tt-date-picker',\n          includesTypes: false,\n          optional: false,\n          moduleFormat: \"esm\",\n          latestVersionUrl: buildCDNUrl('tt-date-picker', 'latest'),\n          pinnedMajorVersionUrl: buildCDNUrl('tt-date-picker', buildMajorVersion(version)),\n          pinnedVersionUrl: buildCDNUrl('tt-date-picker', version),\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    examples: [\n      {\n        title: 'React - Basic',\n        description:\n          'Uncontrolled date picker. Value is in ISO format (YYYY-MM-DD). Use minDate and maxDate props to restrict selectable dates. Use disabled prop to disable. Use openLeft prop for pickers near right edge.',\n        code: `import { DatePicker } from '@triptease/react/date-picker';\n\n<label htmlFor=\"date\">Select a date</label>\n<DatePicker id=\"date\" />`,\n      },\n      {\n        title: 'React - Controlled',\n        description:\n          'Use controlled component with React state for dynamic behavior. Value prop and onChange handler manage the selection.',\n        code: `import { DatePicker } from '@triptease/react/date-picker';\n\nconst [selectedDate, setSelectedDate] = useState('');\n\n<label htmlFor=\"date\">Event date</label>\n<DatePicker\n  id=\"date\"\n  value={selectedDate}\n  onChange={(e) => setSelectedDate(e.target.value)}\n/>`,\n      },\n      {\n        title: 'Web Component - Basic',\n        description:\n          'Web component date picker. Value is in ISO format (YYYY-MM-DD). Use mindate and maxdate attributes to restrict dates. Use disabled attribute to disable. Use open-left attribute for pickers near right edge.',\n        code: `import '@triptease/tt-date-picker';\n\n<label for=\"date\">Select a date</label>\n<tt-date-picker id=\"date\"></tt-date-picker>`,\n      },\n    ],\n  },\n} satisfies ComponentManifest;\n"]}
+{"version":3,"file":"datePicker.js","sourceRoot":"","sources":["../../../../../src/manifests/components/entries/datePicker.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AACzE,OAAO,WAAW,MAAM,mBAAmB,CAAC,OAAO,IAAI,EAAE,MAAM,EAAE,CAAC;AAElE,MAAM,OAAO,GAAG,WAAW,CAAC,YAAY,CAAC,2BAA2B,CAAC,CAAC;AAEtE,eAAe;IACb,aAAa,EAAE;QACb,IAAI,EAAE,aAAa;QACnB,WAAW,EAAE,8FAA8F;QAC3G,OAAO,EAAE,IAAI;QACb,OAAO,EAAE,qDAAqD;QAC9D,aAAa,EAAE;YACb,SAAS,EAAE;gBACT,6CAA6C;gBAC7C,oCAAoC;gBACpC,+CAA+C;gBAC/C,6CAA6C;aAC9C;YACD,KAAK,EAAE,CAAC,gDAAgD,CAAC;SAC1D;QACD,mBAAmB,EAAE;YACnB,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,2BAA2B,EAAE,aAAa,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC;YAClF,GAAG,EAAE;gBACH;oBACE,IAAI,EAAE,2BAA2B;oBACjC,aAAa,EAAE,KAAK;oBACpB,QAAQ,EAAE,KAAK;oBACf,YAAY,EAAE,KAAK;oBACnB,gBAAgB,EAAE,WAAW,CAAC,gBAAgB,EAAE,QAAQ,CAAC;oBACzD,qBAAqB,EAAE,WAAW,CAAC,gBAAgB,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;oBAChF,gBAAgB,EAAE,WAAW,CAAC,gBAAgB,EAAE,OAAO,CAAC;oBACxD,QAAQ,EACN,yHAAyH;iBAC5H;aACF;SACF;QACD,QAAQ,EAAE;YACR;gBACE,KAAK,EAAE,eAAe;gBACtB,WAAW,EACT,yMAAyM;gBAC3M,IAAI,EAAE;;;yBAGW;aAClB;YACD;gBACE,KAAK,EAAE,oBAAoB;gBAC3B,WAAW,EACT,uHAAuH;gBACzH,IAAI,EAAE;;;;;;;;;GASX;aACI;YACD;gBACE,KAAK,EAAE,uBAAuB;gBAC9B,WAAW,EACT,+MAA+M;gBACjN,IAAI,EAAE;;;4CAG8B;aACrC;SACF;KACF;CAC0B,CAAC","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 version = packageJson.dependencies['@triptease/tt-date-picker'];\n\nexport default {\n  'date-picker': {\n    name: 'Date Picker',\n    description: 'Date picker for selecting a single date, available as both React component and Web Component',\n    ssrSafe: true,\n    element: 'DatePicker (React) / tt-date-picker (Web Component)',\n    usageGuidance: {\n      whenToUse: [\n        'Users need to select a specific single date',\n        'Date format needs to be consistent',\n        'Calendar visualization helps users pick dates',\n        'Date constraints are needed (min/max dates)',\n      ],\n      avoid: ['Date ranges are needed (use date range picker)'],\n    },\n    installationOptions: {\n      npm: [{ name: '@triptease/tt-date-picker', includesTypes: true, optional: false }],\n      cdn: [\n        {\n          name: '@triptease/tt-date-picker',\n          includesTypes: false,\n          optional: false,\n          moduleFormat: 'esm',\n          latestVersionUrl: buildCDNUrl('tt-date-picker', 'latest'),\n          pinnedMajorVersionUrl: buildCDNUrl('tt-date-picker', buildMajorVersion(version)),\n          pinnedVersionUrl: buildCDNUrl('tt-date-picker', version),\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    examples: [\n      {\n        title: 'React - Basic',\n        description:\n          'Uncontrolled date picker. Value is in ISO format (YYYY-MM-DD). Use minDate and maxDate props to restrict selectable dates. Use disabled prop to disable. Use openLeft prop for pickers near right edge.',\n        code: `import { DatePicker } from '@triptease/react/date-picker';\n\n<label htmlFor=\"date\">Select a date</label>\n<DatePicker id=\"date\" />`,\n      },\n      {\n        title: 'React - Controlled',\n        description:\n          'Use controlled component with React state for dynamic behavior. Value prop and onChange handler manage the selection.',\n        code: `import { DatePicker } from '@triptease/react/date-picker';\n\nconst [selectedDate, setSelectedDate] = useState('');\n\n<label htmlFor=\"date\">Event date</label>\n<DatePicker\n  id=\"date\"\n  value={selectedDate}\n  onChange={(e) => setSelectedDate(e.target.value)}\n/>`,\n      },\n      {\n        title: 'Web Component - Basic',\n        description:\n          'Web component date picker. Value is in ISO format (YYYY-MM-DD). Use mindate and maxdate attributes to restrict dates. Use disabled attribute to disable. Use open-left attribute for pickers near right edge.',\n        code: `import '@triptease/tt-date-picker';\n\n<label for=\"date\">Select a date</label>\n<tt-date-picker id=\"date\"></tt-date-picker>`,\n      },\n    ],\n  },\n} satisfies ComponentManifest;\n"]}

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

@@ -26,7 +26,7 @@ export default {
                     name: '@triptease/tt-date-range-picker',
                     includesTypes: false,
                     optional: false,
-                    moduleFormat: "esm",
+                    moduleFormat: 'esm',
                     latestVersionUrl: buildCDNUrl('tt-date-range-picker', 'latest'),
                     pinnedMajorVersionUrl: buildCDNUrl('tt-date-range-picker', buildMajorVersion(version)),
                     pinnedVersionUrl: buildCDNUrl('tt-date-range-picker', version),

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

@@ -1 +1 @@
-{"version":3,"file":"dateRangePicker.js","sourceRoot":"","sources":["../../../../../src/manifests/components/entries/dateRangePicker.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AACzE,OAAO,WAAW,MAAM,mBAAmB,CAAC,OAAO,IAAI,EAAE,MAAM,EAAE,CAAC;AAElE,MAAM,OAAO,GAAG,WAAW,CAAC,YAAY,CAAC,iCAAiC,CAAC,CAAC;AAE5E,eAAe;IACb,mBAAmB,EAAE;QACnB,IAAI,EAAE,mBAAmB;QACzB,WAAW,EACT,0GAA0G;QAC5G,OAAO,EAAE,IAAI;QACb,OAAO,EAAE,gEAAgE;QACzE,aAAa,EAAE;YACb,SAAS,EAAE;gBACT,gEAAgE;gBAChE,mDAAmD;gBACnD,yDAAyD;gBACzD,mDAAmD;aACpD;YACD,KAAK,EAAE;gBACL,gDAAgD;gBAChD,qEAAqE;aACtE;SACF;QACD,mBAAmB,EAAE;YACnB,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,oCAAoC,EAAE,aAAa,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC;YAC3F,GAAG,EAAE;gBACH;oBACE,IAAI,EAAE,iCAAiC;oBACvC,aAAa,EAAE,KAAK;oBACpB,QAAQ,EAAE,KAAK;oBACf,YAAY,EAAE,KAAK;oBACnB,gBAAgB,EAAE,WAAW,CAAC,sBAAsB,EAAE,QAAQ,CAAC;oBAC/D,qBAAqB,EAAE,WAAW,CAAC,sBAAsB,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;oBACtF,gBAAgB,EAAE,WAAW,CAAC,sBAAsB,EAAE,OAAO,CAAC;oBAC9D,QAAQ,EACN,yHAAyH;iBAC5H;aACF;SACF;QACD,QAAQ,EAAE;YACR;gBACE,KAAK,EAAE,eAAe;gBACtB,WAAW,EACT,iPAAiP;gBACnP,IAAI,EAAE;;;mCAGqB;aAC5B;YACD;gBACE,KAAK,EAAE,oBAAoB;gBAC3B,WAAW,EACT,yHAAyH;gBAC3H,IAAI,EAAE;;;;;;;;;;;;2FAY6E;aACpF;YACD;gBACE,KAAK,EAAE,sBAAsB;gBAC7B,WAAW,EACT,yKAAyK;gBAC3K,IAAI,EAAE;;;;;;;mBAOK;aACZ;YACD;gBACE,KAAK,EAAE,uBAAuB;gBAC9B,WAAW,EACT,uQAAuQ;gBACzQ,IAAI,EAAE;;;6DAG+C;aACtD;YACD;gBACE,KAAK,EAAE,yBAAyB;gBAChC,WAAW,EAAE,sJAAsJ;gBACnK,IAAI,EAAE;;;;;;QAMN;aACD;YACD;gBACE,KAAK,EAAE,8BAA8B;gBACrC,WAAW,EAAE,2MAA2M;gBACxN,IAAI,EAAE;;;;;;;;;wBASU;aACjB;SACF;KACF;CAC0B,CAAC","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 version = packageJson.dependencies['@triptease/tt-date-range-picker'];\n\nexport default {\n  'date-range-picker': {\n    name: 'Date Range Picker',\n    description:\n      'Date range picker for selecting start and end dates, available as both React component and Web Component',\n    ssrSafe: true,\n    element: 'DateRangePicker (React) / tt-date-range-picker (Web Component)',\n    usageGuidance: {\n      whenToUse: [\n        'Users need to select a date range (bookings, reports, filters)',\n        'Start and end dates need to be validated together',\n        'Range constraints are important (min/max days in range)',\n        'Visual calendar helps users understand date spans',\n      ],\n      avoid: [\n        'Only a single date is needed (use date picker)',\n        'Dates are independent of each other (use two separate date pickers)',\n      ],\n    },\n    installationOptions: {\n      npm: [{ name: '@triptease/react/date-range-picker', includesTypes: true, optional: false }],\n      cdn: [\n        {\n          name: '@triptease/tt-date-range-picker',\n          includesTypes: false,\n          optional: false,\n          moduleFormat: \"esm\",\n          latestVersionUrl: buildCDNUrl('tt-date-range-picker', 'latest'),\n          pinnedMajorVersionUrl: buildCDNUrl('tt-date-range-picker', buildMajorVersion(version)),\n          pinnedVersionUrl: buildCDNUrl('tt-date-range-picker', version),\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    examples: [\n      {\n        title: 'React - Basic',\n        description:\n          'Uncontrolled date range picker. Dates are in ISO format (YYYY-MM-DD). Use start and end props for default values. Use minDate and maxDate props to restrict dates. Use disabled prop to disable. Use openLeft prop for pickers near right edge.',\n        code: `import { DateRangePicker } from '@triptease/react/date-range-picker';\n\n<label htmlFor=\"daterange\">Select date range</label>\n<DateRangePicker id=\"daterange\" />`,\n      },\n      {\n        title: 'React - Controlled',\n        description:\n          'Use controlled component with React state for dynamic behavior. Access picker.start and picker.end from onChange event.',\n        code: `import { DateRangePicker } from '@triptease/react/date-range-picker';\n\nconst [startDate, setStartDate] = useState('');\nconst [endDate, setEndDate] = useState('');\n\nconst handleChange = (e) => {\n  const picker = e.target;\n  setStartDate(picker.start || '');\n  setEndDate(picker.end || '');\n};\n\n<label htmlFor=\"daterange\">Booking dates</label>\n<DateRangePicker id=\"daterange\" start={startDate} end={endDate} onChange={handleChange} />`,\n      },\n      {\n        title: 'React - With presets',\n        description:\n          'Use PresetButton component for quick date range selection. Pass Preset enum values for common ranges. PresetButton must be child of DateRangePicker with slot=\"preset\".',\n        code: `import { DateRangePicker, PresetButton, Preset } from '@triptease/react/date-range-picker';\n\n<label htmlFor=\"daterange\">Travel dates</label>\n<DateRangePicker id=\"daterange\">\n  <PresetButton slot=\"preset\" preset={Preset.ThisWeek}>This Week</PresetButton>\n  <PresetButton slot=\"preset\" preset={Preset.ThisMonth}>This Month</PresetButton>\n  <PresetButton slot=\"preset\" preset={Preset.Next1Month}>Next Month</PresetButton>\n</DateRangePicker>`,\n      },\n      {\n        title: 'Web Component - Basic',\n        description:\n          'Web component date range picker. Dates are in ISO format (YYYY-MM-DD). Use start and end attributes for default values. Use mindate and maxdate attributes to restrict dates. Use disabled attribute to disable. Use open-left attribute for pickers near right edge.',\n        code: `import '@triptease/tt-date-range-picker';\n\n<label for=\"daterange\">Select date range</label>\n<tt-date-range-picker id=\"daterange\"></tt-date-range-picker>`,\n      },\n      {\n        title: 'Web Component - In form',\n        description: `Use with HTML forms via name attribute. Form value is JSON string: {\"startDate\": \"2025-01-01\", \"endDate\": \"2025-01-10\"}. Parse JSON to access dates.`,\n        code: `import '@triptease/tt-date-range-picker';\n\n<form onsubmit=\"handleSubmit(event)\">\n  <label for=\"booking-dates\">Booking dates</label>\n  <tt-date-range-picker id=\"booking-dates\" name=\"booking-dates\"></tt-date-range-picker>\n  <button type=\"submit\">Submit</button>\n</form>`,\n      },\n      {\n        title: 'Web Component - With presets',\n        description: `Use tt-preset-button for quick date range selection. Place inside tt-date-range-picker with slot=\"preset\". Set preset attribute to range type: \"this-week\", \"next-week\", \"this-month\", \"next-month\", etc.`,\n        code: `import '@triptease/tt-date-range-picker';\nimport '@triptease/tt-preset-button';\n\n<label for=\"daterange\">Travel dates</label>\n<tt-date-range-picker id=\"daterange\">\n  <tt-preset-button slot=\"preset\" preset=\"this-week\">This Week</tt-preset-button>\n  <tt-preset-button slot=\"preset\" preset=\"next-week\">Next Week</tt-preset-button>\n  <tt-preset-button slot=\"preset\" preset=\"this-month\">This Month</tt-preset-button>\n  <tt-preset-button slot=\"preset\" preset=\"next-month\">Next Month</tt-preset-button>\n</tt-date-range-picker>`,\n      },\n    ],\n  },\n} satisfies ComponentManifest;\n"]}
+{"version":3,"file":"dateRangePicker.js","sourceRoot":"","sources":["../../../../../src/manifests/components/entries/dateRangePicker.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AACzE,OAAO,WAAW,MAAM,mBAAmB,CAAC,OAAO,IAAI,EAAE,MAAM,EAAE,CAAC;AAElE,MAAM,OAAO,GAAG,WAAW,CAAC,YAAY,CAAC,iCAAiC,CAAC,CAAC;AAE5E,eAAe;IACb,mBAAmB,EAAE;QACnB,IAAI,EAAE,mBAAmB;QACzB,WAAW,EACT,0GAA0G;QAC5G,OAAO,EAAE,IAAI;QACb,OAAO,EAAE,gEAAgE;QACzE,aAAa,EAAE;YACb,SAAS,EAAE;gBACT,gEAAgE;gBAChE,mDAAmD;gBACnD,yDAAyD;gBACzD,mDAAmD;aACpD;YACD,KAAK,EAAE;gBACL,gDAAgD;gBAChD,qEAAqE;aACtE;SACF;QACD,mBAAmB,EAAE;YACnB,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,oCAAoC,EAAE,aAAa,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC;YAC3F,GAAG,EAAE;gBACH;oBACE,IAAI,EAAE,iCAAiC;oBACvC,aAAa,EAAE,KAAK;oBACpB,QAAQ,EAAE,KAAK;oBACf,YAAY,EAAE,KAAK;oBACnB,gBAAgB,EAAE,WAAW,CAAC,sBAAsB,EAAE,QAAQ,CAAC;oBAC/D,qBAAqB,EAAE,WAAW,CAAC,sBAAsB,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;oBACtF,gBAAgB,EAAE,WAAW,CAAC,sBAAsB,EAAE,OAAO,CAAC;oBAC9D,QAAQ,EACN,yHAAyH;iBAC5H;aACF;SACF;QACD,QAAQ,EAAE;YACR;gBACE,KAAK,EAAE,eAAe;gBACtB,WAAW,EACT,iPAAiP;gBACnP,IAAI,EAAE;;;mCAGqB;aAC5B;YACD;gBACE,KAAK,EAAE,oBAAoB;gBAC3B,WAAW,EACT,yHAAyH;gBAC3H,IAAI,EAAE;;;;;;;;;;;;2FAY6E;aACpF;YACD;gBACE,KAAK,EAAE,sBAAsB;gBAC7B,WAAW,EACT,yKAAyK;gBAC3K,IAAI,EAAE;;;;;;;mBAOK;aACZ;YACD;gBACE,KAAK,EAAE,uBAAuB;gBAC9B,WAAW,EACT,uQAAuQ;gBACzQ,IAAI,EAAE;;;6DAG+C;aACtD;YACD;gBACE,KAAK,EAAE,yBAAyB;gBAChC,WAAW,EAAE,sJAAsJ;gBACnK,IAAI,EAAE;;;;;;QAMN;aACD;YACD;gBACE,KAAK,EAAE,8BAA8B;gBACrC,WAAW,EAAE,2MAA2M;gBACxN,IAAI,EAAE;;;;;;;;;wBASU;aACjB;SACF;KACF;CAC0B,CAAC","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 version = packageJson.dependencies['@triptease/tt-date-range-picker'];\n\nexport default {\n  'date-range-picker': {\n    name: 'Date Range Picker',\n    description:\n      'Date range picker for selecting start and end dates, available as both React component and Web Component',\n    ssrSafe: true,\n    element: 'DateRangePicker (React) / tt-date-range-picker (Web Component)',\n    usageGuidance: {\n      whenToUse: [\n        'Users need to select a date range (bookings, reports, filters)',\n        'Start and end dates need to be validated together',\n        'Range constraints are important (min/max days in range)',\n        'Visual calendar helps users understand date spans',\n      ],\n      avoid: [\n        'Only a single date is needed (use date picker)',\n        'Dates are independent of each other (use two separate date pickers)',\n      ],\n    },\n    installationOptions: {\n      npm: [{ name: '@triptease/react/date-range-picker', includesTypes: true, optional: false }],\n      cdn: [\n        {\n          name: '@triptease/tt-date-range-picker',\n          includesTypes: false,\n          optional: false,\n          moduleFormat: 'esm',\n          latestVersionUrl: buildCDNUrl('tt-date-range-picker', 'latest'),\n          pinnedMajorVersionUrl: buildCDNUrl('tt-date-range-picker', buildMajorVersion(version)),\n          pinnedVersionUrl: buildCDNUrl('tt-date-range-picker', version),\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    examples: [\n      {\n        title: 'React - Basic',\n        description:\n          'Uncontrolled date range picker. Dates are in ISO format (YYYY-MM-DD). Use start and end props for default values. Use minDate and maxDate props to restrict dates. Use disabled prop to disable. Use openLeft prop for pickers near right edge.',\n        code: `import { DateRangePicker } from '@triptease/react/date-range-picker';\n\n<label htmlFor=\"daterange\">Select date range</label>\n<DateRangePicker id=\"daterange\" />`,\n      },\n      {\n        title: 'React - Controlled',\n        description:\n          'Use controlled component with React state for dynamic behavior. Access picker.start and picker.end from onChange event.',\n        code: `import { DateRangePicker } from '@triptease/react/date-range-picker';\n\nconst [startDate, setStartDate] = useState('');\nconst [endDate, setEndDate] = useState('');\n\nconst handleChange = (e) => {\n  const picker = e.target;\n  setStartDate(picker.start || '');\n  setEndDate(picker.end || '');\n};\n\n<label htmlFor=\"daterange\">Booking dates</label>\n<DateRangePicker id=\"daterange\" start={startDate} end={endDate} onChange={handleChange} />`,\n      },\n      {\n        title: 'React - With presets',\n        description:\n          'Use PresetButton component for quick date range selection. Pass Preset enum values for common ranges. PresetButton must be child of DateRangePicker with slot=\"preset\".',\n        code: `import { DateRangePicker, PresetButton, Preset } from '@triptease/react/date-range-picker';\n\n<label htmlFor=\"daterange\">Travel dates</label>\n<DateRangePicker id=\"daterange\">\n  <PresetButton slot=\"preset\" preset={Preset.ThisWeek}>This Week</PresetButton>\n  <PresetButton slot=\"preset\" preset={Preset.ThisMonth}>This Month</PresetButton>\n  <PresetButton slot=\"preset\" preset={Preset.Next1Month}>Next Month</PresetButton>\n</DateRangePicker>`,\n      },\n      {\n        title: 'Web Component - Basic',\n        description:\n          'Web component date range picker. Dates are in ISO format (YYYY-MM-DD). Use start and end attributes for default values. Use mindate and maxdate attributes to restrict dates. Use disabled attribute to disable. Use open-left attribute for pickers near right edge.',\n        code: `import '@triptease/tt-date-range-picker';\n\n<label for=\"daterange\">Select date range</label>\n<tt-date-range-picker id=\"daterange\"></tt-date-range-picker>`,\n      },\n      {\n        title: 'Web Component - In form',\n        description: `Use with HTML forms via name attribute. Form value is JSON string: {\"startDate\": \"2025-01-01\", \"endDate\": \"2025-01-10\"}. Parse JSON to access dates.`,\n        code: `import '@triptease/tt-date-range-picker';\n\n<form onsubmit=\"handleSubmit(event)\">\n  <label for=\"booking-dates\">Booking dates</label>\n  <tt-date-range-picker id=\"booking-dates\" name=\"booking-dates\"></tt-date-range-picker>\n  <button type=\"submit\">Submit</button>\n</form>`,\n      },\n      {\n        title: 'Web Component - With presets',\n        description: `Use tt-preset-button for quick date range selection. Place inside tt-date-range-picker with slot=\"preset\". Set preset attribute to range type: \"this-week\", \"next-week\", \"this-month\", \"next-month\", etc.`,\n        code: `import '@triptease/tt-date-range-picker';\nimport '@triptease/tt-preset-button';\n\n<label for=\"daterange\">Travel dates</label>\n<tt-date-range-picker id=\"daterange\">\n  <tt-preset-button slot=\"preset\" preset=\"this-week\">This Week</tt-preset-button>\n  <tt-preset-button slot=\"preset\" preset=\"next-week\">Next Week</tt-preset-button>\n  <tt-preset-button slot=\"preset\" preset=\"this-month\">This Month</tt-preset-button>\n  <tt-preset-button slot=\"preset\" preset=\"next-month\">Next Month</tt-preset-button>\n</tt-date-range-picker>`,\n      },\n    ],\n  },\n} satisfies ComponentManifest;\n"]}

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

@@ -28,7 +28,7 @@ export default {
                     name: 'tt-dialog',
                     includesTypes: false,
                     optional: false,
-                    moduleFormat: "esm",
+                    moduleFormat: 'esm',
                     pinnedVersionUrl: buildCDNUrl('tt-dialog', version),
                     pinnedMajorVersionUrl: buildCDNUrl('tt-dialog', buildMajorVersion(version)),
                     latestVersionUrl: buildCDNUrl('tt-dialog', 'latest'),

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

@@ -1 +1 @@
-{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../../../../src/manifests/components/entries/dialog.ts"],"names":[],"mappings":"AACA,OAAO,WAAW,MAAM,mBAAmB,CAAC,OAAO,IAAI,EAAE,MAAM,EAAE,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAEzE,MAAM,OAAO,GAAG,WAAW,CAAC,YAAY,CAAC,sBAAsB,CAAC,CAAC;AAEjE,eAAe;IACb,MAAM,EAAE;QACN,IAAI,EAAE,wBAAwB;QAC9B,WAAW,EAAE,kEAAkE;QAC/E,OAAO,EAAE,IAAI;QACb,OAAO,EAAE,WAAW;QACpB,aAAa,EAAE;YACb,SAAS,EAAE;gBACT,yCAAyC;gBACzC,wEAAwE;gBACxE,mDAAmD;gBACnD,qGAAqG;aACtG;YACD,KAAK,EAAE;gBACL,4FAA4F;gBAC5F,uEAAuE;gBACvE,yFAAyF;gBACzF,oFAAoF;aACrF;SACF;QACD,mBAAmB,EAAE;YACnB,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,sBAAsB,EAAE,aAAa,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC;YAC7E,GAAG,EAAE;gBACH;oBACE,IAAI,EAAE,WAAW;oBACjB,aAAa,EAAE,KAAK;oBACpB,QAAQ,EAAE,KAAK;oBACf,YAAY,EAAE,KAAK;oBACnB,gBAAgB,EAAE,WAAW,CAAC,WAAW,EAAE,OAAO,CAAC;oBACnD,qBAAqB,EAAE,WAAW,CAAC,WAAW,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;oBAC3E,gBAAgB,EAAE,WAAW,CAAC,WAAW,EAAE,QAAQ,CAAC;oBACpD,QAAQ,EACN,yHAAyH;iBAC5H;aACF;SACF;QACD,QAAQ,EAAE;YACR;gBACE,KAAK,EAAE,aAAa;gBACpB,IAAI,EAAE;;;;;;;;;;;aAWD;aACN;YACD;gBACE,KAAK,EAAE,4BAA4B;gBACnC,WAAW,EACT,0IAA0I;gBAC5I,IAAI,EAAE;;;;;;;;;;;aAWD;aACN;SACF;KACF;CAC0B,CAAC","sourcesContent":["import { ComponentManifest } from '@/manifests/components/types.js';\nimport packageJson from '@/../package.json' with { type: 'json' };\nimport { buildCDNUrl, buildMajorVersion } from '@/utils/buildCDNUrls.js';\n\nconst version = packageJson.dependencies['@triptease/tt-dialog'];\n\nexport default {\n  dialog: {\n    name: 'Dialog - Web Component',\n    description: 'Dialog component that displays content in a layer above the page',\n    ssrSafe: true,\n    element: 'tt-dialog',\n    usageGuidance: {\n      whenToUse: [\n        'User interaction is required to proceed',\n        \"The task is short, self-contained or doesn't fit naturally into a page\",\n        'The underlying page content should remain visible',\n        \"Intentionally disrupting the user's flow is beneficial (e.g. confirmations, critical notifications)\",\n      ],\n      avoid: [\n        'The content is long, complex, or scrollable (e.g. multi-step forms, detailed instructions)',\n        'The content should be shareable or linkable (prefer a dedicated page)',\n        'The information is not time-sensitive or critical (prefer toasts or inline disclosures)',\n        'The user did not initiate the interaction (unsolicited pop-ups can be frustrating)',\n      ],\n    },\n    installationOptions: {\n      npm: [{ name: '@triptease/tt-dialog', includesTypes: true, optional: false }],\n      cdn: [\n        {\n          name: 'tt-dialog',\n          includesTypes: false,\n          optional: false,\n          moduleFormat: \"esm\",\n          pinnedVersionUrl: buildCDNUrl('tt-dialog', version),\n          pinnedMajorVersionUrl: buildCDNUrl('tt-dialog', buildMajorVersion(version)),\n          latestVersionUrl: buildCDNUrl('tt-dialog', '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    examples: [\n      {\n        title: 'Basic usage',\n        code: `<button data-theme=\"primary\" onclick=\"document.querySelector('#my-dialog').show()\">\n  Open Dialog\n</button>\n<tt-dialog id=\"my-dialog\" aria-label=\"Example dialog\">\n  <div class=\"container\">\n    <h2>Dialog Title</h2>\n    <p>This is a basic dialog with some content.</p>\n    <button data-theme=\"primary\" onclick=\"document.querySelector('#my-dialog').hide()\">\n      Close\n    </button>\n  </div>\n</tt-dialog>`,\n      },\n      {\n        title: 'With CSS custom properties',\n        description:\n          'Use CSS custom properties to customize dialog positioning:\\n\\n- `--dialog-left-distance`: Control the horizontal position of the dialog.',\n        code: `<button data-theme=\"primary\" onclick=\"document.querySelector('#positioned-dialog').show()\">\n  Open Dialog\n</button>\n<tt-dialog id=\"positioned-dialog\" aria-label=\"Positioned dialog\" style=\"--dialog-left-distance: 100px;\">\n  <div class=\"container\">\n    <h2>Custom Positioned Dialog</h2>\n    <p>This dialog has custom positioning using CSS custom properties.</p>\n    <button data-theme=\"primary\" onclick=\"document.querySelector('#positioned-dialog').hide()\">\n      Close\n    </button>\n  </div>\n</tt-dialog>`,\n      },\n    ],\n  },\n} satisfies ComponentManifest;\n"]}
+{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../../../../src/manifests/components/entries/dialog.ts"],"names":[],"mappings":"AACA,OAAO,WAAW,MAAM,mBAAmB,CAAC,OAAO,IAAI,EAAE,MAAM,EAAE,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAEzE,MAAM,OAAO,GAAG,WAAW,CAAC,YAAY,CAAC,sBAAsB,CAAC,CAAC;AAEjE,eAAe;IACb,MAAM,EAAE;QACN,IAAI,EAAE,wBAAwB;QAC9B,WAAW,EAAE,kEAAkE;QAC/E,OAAO,EAAE,IAAI;QACb,OAAO,EAAE,WAAW;QACpB,aAAa,EAAE;YACb,SAAS,EAAE;gBACT,yCAAyC;gBACzC,wEAAwE;gBACxE,mDAAmD;gBACnD,qGAAqG;aACtG;YACD,KAAK,EAAE;gBACL,4FAA4F;gBAC5F,uEAAuE;gBACvE,yFAAyF;gBACzF,oFAAoF;aACrF;SACF;QACD,mBAAmB,EAAE;YACnB,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,sBAAsB,EAAE,aAAa,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC;YAC7E,GAAG,EAAE;gBACH;oBACE,IAAI,EAAE,WAAW;oBACjB,aAAa,EAAE,KAAK;oBACpB,QAAQ,EAAE,KAAK;oBACf,YAAY,EAAE,KAAK;oBACnB,gBAAgB,EAAE,WAAW,CAAC,WAAW,EAAE,OAAO,CAAC;oBACnD,qBAAqB,EAAE,WAAW,CAAC,WAAW,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;oBAC3E,gBAAgB,EAAE,WAAW,CAAC,WAAW,EAAE,QAAQ,CAAC;oBACpD,QAAQ,EACN,yHAAyH;iBAC5H;aACF;SACF;QACD,QAAQ,EAAE;YACR;gBACE,KAAK,EAAE,aAAa;gBACpB,IAAI,EAAE;;;;;;;;;;;aAWD;aACN;YACD;gBACE,KAAK,EAAE,4BAA4B;gBACnC,WAAW,EACT,0IAA0I;gBAC5I,IAAI,EAAE;;;;;;;;;;;aAWD;aACN;SACF;KACF;CAC0B,CAAC","sourcesContent":["import { ComponentManifest } from '@/manifests/components/types.js';\nimport packageJson from '@/../package.json' with { type: 'json' };\nimport { buildCDNUrl, buildMajorVersion } from '@/utils/buildCDNUrls.js';\n\nconst version = packageJson.dependencies['@triptease/tt-dialog'];\n\nexport default {\n  dialog: {\n    name: 'Dialog - Web Component',\n    description: 'Dialog component that displays content in a layer above the page',\n    ssrSafe: true,\n    element: 'tt-dialog',\n    usageGuidance: {\n      whenToUse: [\n        'User interaction is required to proceed',\n        \"The task is short, self-contained or doesn't fit naturally into a page\",\n        'The underlying page content should remain visible',\n        \"Intentionally disrupting the user's flow is beneficial (e.g. confirmations, critical notifications)\",\n      ],\n      avoid: [\n        'The content is long, complex, or scrollable (e.g. multi-step forms, detailed instructions)',\n        'The content should be shareable or linkable (prefer a dedicated page)',\n        'The information is not time-sensitive or critical (prefer toasts or inline disclosures)',\n        'The user did not initiate the interaction (unsolicited pop-ups can be frustrating)',\n      ],\n    },\n    installationOptions: {\n      npm: [{ name: '@triptease/tt-dialog', includesTypes: true, optional: false }],\n      cdn: [\n        {\n          name: 'tt-dialog',\n          includesTypes: false,\n          optional: false,\n          moduleFormat: 'esm',\n          pinnedVersionUrl: buildCDNUrl('tt-dialog', version),\n          pinnedMajorVersionUrl: buildCDNUrl('tt-dialog', buildMajorVersion(version)),\n          latestVersionUrl: buildCDNUrl('tt-dialog', '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    examples: [\n      {\n        title: 'Basic usage',\n        code: `<button data-theme=\"primary\" onclick=\"document.querySelector('#my-dialog').show()\">\n  Open Dialog\n</button>\n<tt-dialog id=\"my-dialog\" aria-label=\"Example dialog\">\n  <div class=\"container\">\n    <h2>Dialog Title</h2>\n    <p>This is a basic dialog with some content.</p>\n    <button data-theme=\"primary\" onclick=\"document.querySelector('#my-dialog').hide()\">\n      Close\n    </button>\n  </div>\n</tt-dialog>`,\n      },\n      {\n        title: 'With CSS custom properties',\n        description:\n          'Use CSS custom properties to customize dialog positioning:\\n\\n- `--dialog-left-distance`: Control the horizontal position of the dialog.',\n        code: `<button data-theme=\"primary\" onclick=\"document.querySelector('#positioned-dialog').show()\">\n  Open Dialog\n</button>\n<tt-dialog id=\"positioned-dialog\" aria-label=\"Positioned dialog\" style=\"--dialog-left-distance: 100px;\">\n  <div class=\"container\">\n    <h2>Custom Positioned Dialog</h2>\n    <p>This dialog has custom positioning using CSS custom properties.</p>\n    <button data-theme=\"primary\" onclick=\"document.querySelector('#positioned-dialog').hide()\">\n      Close\n    </button>\n  </div>\n</tt-dialog>`,\n      },\n    ],\n  },\n} satisfies ComponentManifest;\n"]}