@solid-design-system/mcp 0.0.1

package/dist/utilities/styles.js

@@ -0,0 +1,47 @@
+import fs from 'node:fs/promises';
+import { join } from 'node:path';
+import { stylesPath } from './config.js';
+function extractDescription(infoContent) {
+    const match = infoContent.match(/`[^`]+`\s*[\u2014\u2013-]+\s*(.+)/);
+    if (match)
+        return match[1].trim();
+    return '';
+}
+/**
+ * Get a list of all available style utilities in the Solid Design System.
+ * @returns Sorted list of style entries (name + description).
+ */
+export const getAvailableStyles = async () => {
+    try {
+        const entries = await fs.readdir(stylesPath, { withFileTypes: true });
+        const dirs = entries
+            .filter(d => d.isDirectory() && d.name.startsWith('sd-'))
+            .map(d => d.name)
+            .sort();
+        return Promise.all(dirs.map(async (name) => {
+            const infoMd = await fs.readFile(join(stylesPath, name, 'info.md'), 'utf-8').catch(() => '');
+            return { name, description: extractDescription(infoMd) };
+        }));
+    }
+    catch {
+        return [];
+    }
+};
+/**
+ * Get info for a specific style utility.
+ * @param name Style name with or without the "sd-" prefix.
+ */
+export const getStyleInfo = async (name) => {
+    const dirName = name.startsWith('sd-') ? name : `sd-${name}`;
+    const styleDir = join(stylesPath, dirName);
+    const [infoMd, docsMd, classesRaw] = await Promise.all([
+        fs.readFile(join(styleDir, 'info.md'), 'utf-8').catch(() => null),
+        fs.readFile(join(styleDir, 'docs.md'), 'utf-8').catch(() => null),
+        fs.readFile(join(styleDir, 'classes.txt'), 'utf-8').catch(() => null)
+    ]);
+    const extractedClasses = !classesRaw ? [...new Set((infoMd ?? '').match(/\bsd-[a-z0-9-]+\b/g) ?? [])] : [];
+    return {
+        docs: infoMd ?? docsMd,
+        classes: classesRaw?.split('\n').filter(Boolean) ?? extractedClasses
+    };
+};

package/dist/utilities/templates.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Get a list of all available templates in the Solid Design System.
+ * @returns Sorted list of template names (e.g. ["button", "forms"]).
+ */
+export declare const getAvailableTemplates: () => Promise<string[]>;

package/dist/utilities/templates.js

@@ -0,0 +1,18 @@
+import fs from 'node:fs/promises';
+import { templatesPackagePath } from './config.js';
+/**
+ * Get a list of all available templates in the Solid Design System.
+ * @returns Sorted list of template names (e.g. ["button", "forms"]).
+ */
+export const getAvailableTemplates = async () => {
+    try {
+        const entries = await fs.readdir(templatesPackagePath, { withFileTypes: true });
+        return entries
+            .filter(d => d.isDirectory())
+            .map(d => d.name)
+            .sort();
+    }
+    catch {
+        return [];
+    }
+};

package/dist/utilities/tokens.d.ts

@@ -0,0 +1,6 @@
+export declare const getTailwindThemeTokenNames: () => string[];
+export declare const getAvailableTokenThemes: () => string[];
+export declare const getTokensMetaData: (type?: "css" | "javascript") => Promise<({
+    content: string;
+    filename: string;
+} | null)[]>;

package/dist/utilities/tokens.js

@@ -0,0 +1,42 @@
+import { readFileSync } from 'fs';
+import { join } from 'path';
+import { globby } from 'globby';
+import { tokensPath } from './config.js';
+import { getStructuredMetaData } from './metadata.js';
+export const getTailwindThemeTokenNames = () => {
+    const tokensIndexPath = join(tokensPath, 'tokens.json');
+    try {
+        const raw = readFileSync(tokensIndexPath, 'utf-8');
+        const parsed = JSON.parse(raw);
+        return Array.isArray(parsed.tokens) ? parsed.tokens : [];
+    }
+    catch {
+        return [];
+    }
+};
+export const getAvailableTokenThemes = () => {
+    const themesPath = join(tokensPath, 'themes.json');
+    try {
+        const raw = readFileSync(themesPath, 'utf-8');
+        const parsed = JSON.parse(raw);
+        return Array.isArray(parsed.themes) ? parsed.themes : [];
+    }
+    catch {
+        return [];
+    }
+};
+export const getTokensMetaData = async (type = 'css') => {
+    const fileList = [];
+    if (type === 'javascript') {
+        fileList.push('*.js');
+        fileList.push('*.ts');
+    }
+    else if (type === 'css') {
+        fileList.push('*.css');
+    }
+    const finalList = await globby(fileList, {
+        cwd: tokensPath,
+        onlyFiles: true
+    });
+    return getStructuredMetaData(tokensPath, item => finalList.includes(item));
+};

package/dist/utilities/version.d.ts

@@ -0,0 +1,28 @@
+interface MinimalPackageJson {
+    author?: {
+        name?: string;
+        email?: string;
+        url?: string;
+    };
+    repository?: {
+        type: string;
+        url: string;
+    };
+    homepage?: string;
+    description: string;
+    name: string;
+    version: string;
+    license?: string;
+    [key: string]: unknown;
+}
+/**
+ * Gets the current package.json information for the MCP server.
+ * @returns The parsed package.json content
+ */
+export declare const getPackageInfo: () => MinimalPackageJson;
+/**
+ * Gets the current version of the MCP server.
+ * @returns The version string from package.json
+ */
+export declare const getVersion: () => string;
+export {};

package/dist/utilities/version.js

@@ -0,0 +1,21 @@
+import { dirname, join } from 'path';
+import { readFileSync } from 'fs';
+import { fileURLToPath } from 'url';
+/**
+ * Gets the current package.json information for the MCP server.
+ * @returns The parsed package.json content
+ */
+export const getPackageInfo = () => {
+    const filename = fileURLToPath(import.meta.url);
+    const directoryName = dirname(filename);
+    const packageJsonPath = join(directoryName, '..', '..', 'package.json');
+    return JSON.parse(readFileSync(packageJsonPath, 'utf-8'));
+};
+/**
+ * Gets the current version of the MCP server.
+ * @returns The version string from package.json
+ */
+export const getVersion = () => {
+    const packageJson = getPackageInfo();
+    return packageJson.version;
+};

package/metadata/packages/components/docs/customization.md

@@ -0,0 +1,101 @@
+# Customizing
+
+Solid components can be customized at a high level through design tokens. This gives you control over theme colors and general styling. For more advanced customizations, you can make use of component parts and custom properties to target individual components.
+
+## Design Tokens
+
+Solid makes use of several design tokens to provide a consistent appearance across components. You can customize them and use them in your own application with pure CSS — no preprocessor required.
+
+Design tokens offer a high-level way to customize the library with minimal effort. There are no component-specific variables, however, as design tokens are intended to be generic and highly reusable. To customize an individual component, refer to the section entitled [Component Parts](#component-parts).
+
+Design tokens are accessed through CSS custom properties that are defined in your theme. Because design tokens live at the page level, they're prefixed with `--sd-` to avoid collisions with other libraries.
+
+To customize a design token, simply override it in your stylesheet using a `:root` block. Here's an example that changes the primary theme to purple based on existing [color primitives](/tokens/color#primitives).
+
+```css
+:root {
+  /* Changes the primary theme color to purple using primitives */
+  --sd-color-primary-100: var(--sd-color-purple-100);
+  --sd-color-primary-200: var(--sd-color-purple-200);
+  --sd-color-primary-300: var(--sd-color-purple-300);
+  --sd-color-primary-400: var(--sd-color-purple-400);
+  --sd-color-primary-500: var(--sd-color-purple-500);
+  --sd-color-primary-600: var(--sd-color-purple-600);
+  --sd-color-primary-700: var(--sd-color-purple-700);
+  --sd-color-primary-800: var(--sd-color-purple-800);
+  --sd-color-primary-default: var(--sd-color-primary-600);
+}
+```
+
+## Component Parts
+
+Whereas design tokens offer a high-level way to customize the library, component parts offer a low-level way to customize individual components. Again, this is done with pure CSS — no preprocessor required.
+
+Solid components use a [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM) to encapsulate their styles and behaviors. As a result, you can't simply target their internals with the usual CSS selectors. Instead, components expose "parts" that can be targeted with the [CSS part selector](https://developer.mozilla.org/en-US/docs/Web/CSS/::part), or `::part()`.
+
+Here's an example that modifies buttons with the `tomato-button` class.
+
+```html
+<sd-button class="tomato-button"> Tomato Button </sd-button>
+
+<style>
+  .tomato-button::part(base) {
+    background: var(--sd-color-neutral-0);
+    border: solid 1px tomato;
+  }
+
+  .tomato-button::part(base):hover {
+    background: rgba(255, 99, 71, 0.1);
+  }
+
+  .tomato-button::part(base):active {
+    background: rgba(255, 99, 71, 0.2);
+  }
+
+  .tomato-button::part(base):focus-visible {
+    box-shadow: 0 0 0 3px rgba(255, 99, 71, 0.33);
+  }
+
+  .tomato-button::part(label) {
+    color: tomato;
+  }
+</style>
+```
+
+At first glance, this approach might seem a bit verbose or even limiting, but it comes with a few important advantages:
+
+- Customizations can be made to components with explicit selectors, such as `::part(icon)`, rather than implicit selectors, such as `.button > div > span + .icon`, that are much more fragile.
+
+- The internal structure of a component will likely change as it evolves. By exposing component parts through an API, the internals can be reworked without fear of breaking customizations as long as its parts remain intact.
+
+- It encourages us to think more about how components are designed and how customizations should be allowed before users can take advantage of them. Once we opt a part into the component's API, it's guaranteed to be supported and can't be removed until a major version of the library is released.
+
+Most (but not all) components expose parts. You can find them in each component's API documentation under the "CSS Parts" section.
+
+## Custom Properties
+
+For convenience, some components expose CSS custom properties you can override. These are not design tokens, nor do they have the same `--sd-` prefix since they're scoped to a component.
+
+You can set custom properties on a component in your stylesheet.
+
+```css
+sd-skeleton {
+  --border-radius: 6rem;
+}
+```
+
+This will also work if you need to target a subset of components with a specific class.
+
+```css
+sd-skeleton.your-class {
+  --border-radius: 6rem;
+}
+```
+
+Alternatively, you can set them inline directly on the element.
+
+```html
+<sd-skeleton style="--border-radius: 6rem;"></sd-skeleton>
+```
+
+Not all components expose CSS custom properties. For those that do, they can be found in the component's API documentation.

package/metadata/packages/components/docs/form-controls.md

@@ -0,0 +1,28 @@
+# Form Controls
+
+## Custom Validation
+
+- 1.  You can use the `setCustomValidity` method to set a custom validation message. This will override any native validation messages.
+- 2.  Set an empty string to clear the custom validity and make the input valid.
+- 3.  To show the validation message, call the `reportValidity` method. Originally this would show a native validation bubble, but we show the error messages inline.
+
+```html
+<form id="validationForm" class="flex flex-col gap-2">
+  <sd-radio-group id="custom-input">
+    <sd-radio id="radio-1" value="1">1</sd-radio>
+    <sd-radio id="radio-2" value="2">2</sd-radio>
+  </sd-radio-group>
+</form>
+<script type="module">
+
+  const form = document.getElementById('validationForm');
+  const input = document.getElementById('custom-input');
+
+  // Show error message
+  setErrorButton.addEventListener('click', () => {
+    const errorMessage = \`This is a new custom error (\${new Date().toLocaleTimeString()})\`;
+    input.setCustomValidity(errorMessage);
+    input.reportValidity();
+  });
+</script>
+```

package/metadata/packages/components/docs/installation.md

@@ -0,0 +1,271 @@
+# Installation
+
+You can load Solid Components via CDN or by installing it locally.
+
+<sd-notification type="info" open id="versioning-info">
+  The `components`, `styles`, and `tokens` packages now always share the same version. We use fixed versioning to keep
+  them fully in sync, so every release updates all three packages, even if only one of them changed. Make sure to
+  install or update them using the same version number.
+</sd-notification>
+
+## Prerequisites
+
+### Theme
+
+Solid Components come without any theme or font by default. Ensure to follow the installation guidelines from [@solid-design-system/tokens](?path=/docs/packages-tokens-installation--docs) to include a fitting theme in your project.
+
+## Versioned vs. unversioned components
+
+When using web components from Solid Design System in microfrontends, versioned components are always recommended. Including version numbers in component names provides more control over updates and prevents collisions when different versions of the same component are used simultaneously.
+
+<sd-tab-group>
+  {/* prettier-ignore */}
+  <sd-tab slot="nav" panel="unversioned"> Unversioned </sd-tab>
+  {/* prettier-ignore */}
+  <sd-tab slot="nav" panel="versioned"> Versioned </sd-tab>
+  <sd-tab-panel name="unversioned">
+    ```html
+    <sd-button></sd-button>
+    ```
+  </sd-tab-panel>
+  <sd-tab-panel name="versioned">
+    ```html
+    <sd-%DASHED-COMPONENTS-VERSION%-button></sd-%DASHED-COMPONENTS-VERSION%-button>
+    ```
+  </sd-tab-panel>
+</sd-tab-group>
+
+Keep the following in mind for nested components:
+
+- _Slotted components_, which are added by your app or website, are not automatically versioned. You need to version them yourself if necessary.
+- _Nested components_, which are generated by the component itself, are automatically versioned (e.g., `sd-%DASHED-COMPONENTS-VERSION%-button` will generate an `sd-%DASHED-COMPONENTS-VERSION%-spinner` when in the loading state).
+
+## CDN Installation
+
+### Bundle
+
+The bundle registers all Solid Components in a single file. If you're using many Solid Components, this is the most performant way to load and hydrate them. Still, you should ensure that other applications are not loading components with the same tag names via an additional CDN or npm package. This therefore makes most sense in e. g. a CMS context.
+You can use the following script tag to load all components:
+
+<sd-tab-group>
+  {/* prettier-ignore */}
+  <sd-tab slot="nav" panel="unversioned"> Unversioned </sd-tab>
+  {/* prettier-ignore */}
+  <sd-tab slot="nav" panel="versioned"> Versioned </sd-tab>
+  <sd-tab-panel name="unversioned">
+    ```html
+    <link
+      rel="stylesheet"
+      href="https://solid-design-system.fe.union-investment.de/components/%COMPONENTS-VERSION%/cdn/solid-components.css"
+    />
+    <link
+      rel="stylesheet"
+      href="https://solid-design-system.fe.union-investment.de/tokens/%TOKENS-VERSION%/cdn/themes/ui-light/ui-light.css"
+    />
+    <script
+      type="module"
+      src="https://solid-design-system.fe.union-investment.de/components/%COMPONENTS-VERSION%/cdn/solid-components.bundle.js"
+    ></script>
+    ```
+  </sd-tab-panel>
+  <sd-tab-panel name="versioned">
+    ```html
+    <link
+      rel="stylesheet"
+      href="https://solid-design-system.fe.union-investment.de/components/%COMPONENTS-VERSION%/cdn-versioned/solid-components.css"
+    />
+    <link
+      rel="stylesheet"
+      href="https://solid-design-system.fe.union-investment.de/tokens/%TOKENS-VERSION%/cdn/themes/ui-light/ui-light.css"
+    />
+    <script
+      type="module"
+      src="https://solid-design-system.fe.union-investment.de/components/%COMPONENTS-VERSION%/cdn-versioned/solid-components.bundle.js"
+    ></script>
+    ```
+  </sd-tab-panel>
+</sd-tab-group>
+
+### ESM
+
+The CDN loader registers all Solid elements up front. Note that, if you're only using a handful of components, it could be more efficient [cherry pick](#cherry-picking) components if you want to load specific ones up front.
+
+<sd-tab-group>
+  {/* prettier-ignore */}
+  <sd-tab slot="nav" panel="unversioned">Unversioned</sd-tab>
+  {/* prettier-ignore */}
+  <sd-tab slot="nav" panel="versioned">Versioned</sd-tab>
+  <sd-tab-panel name="unversioned">
+    ```html
+    <link
+      rel="stylesheet"
+      href="https://solid-design-system.fe.union-investment.de/components/%COMPONENTS-VERSION%/cdn/solid-components.css"
+    />
+    <link
+      rel="stylesheet"
+      href="https://solid-design-system.fe.union-investment.de/tokens/%TOKENS-VERSION%/cdn/themes/ui-light/ui-light.css"
+    />
+    <script
+      type="module"
+      src="https://solid-design-system.fe.union-investment.de/components/%COMPONENTS-VERSION%/cdn/solid-components.js"
+    ></script>
+    ```
+  </sd-tab-panel>
+  <sd-tab-panel name="versioned">
+    ```html
+    <link
+      rel="stylesheet"
+      href="https://solid-design-system.fe.union-investment.de/components/%COMPONENTS-VERSION%/cdn-versioned/solid-components.css"
+    />
+    <link
+      rel="stylesheet"
+      href="https://solid-design-system.fe.union-investment.de/tokens/%TOKENS-VERSION%/cdn/themes/ui-light/ui-light.css"
+    />
+    <script
+      type="module"
+      src="https://solid-design-system.fe.union-investment.de/components/%COMPONENTS-VERSION%/cdn-versioned/solid-components.js"
+    ></script>
+    ```
+  </sd-tab-panel>
+</sd-tab-group>
+
+## npm installation
+
+If you don't want to use the CDN, you can install Solid Components from npm with the following command.
+
+```bash
+npm install @solid-design-system/components @solid-design-system/tokens
+```
+
+It's up to you to make the source files available to your app. One way to do this is to create a route in your app called `/solid` that serves static files from `node_modules/@solid-design-system/components`.
+
+Once you've done that, add the following tags to your page. Make sure to update `href` and `src` so they point to the route you created.
+
+<sd-tab-group>
+  {/* prettier-ignore */}
+  <sd-tab slot="nav" panel="unversioned">Unversioned</sd-tab>
+  {/* prettier-ignore */}
+  <sd-tab slot="nav" panel="versioned">Versioned</sd-tab>
+  <sd-tab-panel name="unversioned">
+    ```html
+    <link rel="stylesheet" href="/solid/dist/solid-components.css" />
+    <link rel="stylesheet" href="/solid-tokens/dist/themes/ui-light/ui-light.css" />
+    <script type="module" src="/solid/dist/solid-components.js"></script>
+    ```
+  </sd-tab-panel>
+  <sd-tab-panel name="versioned">
+    ```html
+    <link rel="stylesheet" href="/solid/dist-versioned/solid-components.css" />
+    <link rel="stylesheet" href="/solid-tokens/dist/themes/ui-light/ui-light.css" />
+    <script type="module" src="/solid/dist-versioned/solid-components.js"></script>
+    ```
+  </sd-tab-panel>
+</sd-tab-group>
+
+Alternatively, [you can use a bundler](#bundling).
+
+## Cherry Picking
+
+Cherry picking can be done from [the CDN](#cdn-installation) or from [npm](#npm-installation). This approach will load only the components you need up front, while limiting the number of files the browser has to download. The disadvantage is that you need to import each individual component.
+
+Here's an example that loads only the button component. Again, if you're not using a module resolver, you'll need to adjust the path to point to the folder Solid is in.
+
+<sd-tab-group>
+  {/* prettier-ignore */}
+  <sd-tab slot="nav" panel="unversioned">Unversioned</sd-tab>
+  {/* prettier-ignore */}
+  <sd-tab slot="nav" panel="versioned">Versioned</sd-tab>
+  <sd-tab-panel name="unversioned">
+  ```html
+  <link rel="stylesheet" href="/path/to/solid/dist/solid-components.css" />
+  <link rel="stylesheet" href="/path/to/solid-tokens/dist/themes/ui-light/ui-light.css" />
+  <script type="module">
+    import '@solid-design-system/components/dist/components/button/button.js';
+
+    // <sd-button> is ready to use!
+
+  </script>
+  ```
+  </sd-tab-panel>
+  <sd-tab-panel name="versioned">
+  ```html
+    <link rel="stylesheet" href="/path/to/solid/dist-versioned/solid-components.css" />
+    <link rel="stylesheet" href="/path/to/solid-tokens/dist/themes/ui-light/ui-light.css" />
+  <script type="module">
+    import '@solid-design-system/components/dist-versioned/components/button/button.js';
+
+    // <sd-%DASHED-COMPONENTS-VERSION%-button> is ready to use!
+
+  </script>
+  ```
+  </sd-tab-panel>
+</sd-tab-group>
+
+You can copy and paste the code to import a component from the "Importing" section of the component's documentation. Note that some components have dependencies that are automatically imported when you cherry pick. If a component has dependencies, they will be listed in the "Dependencies" section of its docs.
+
+> Never cherry pick components or utilities from `solid-components.js` as this will cause the browser to load the entire library. Instead, cherry pick from specific modules as shown above.
+
+> You will see files named `chunk.[hash].js` in the `chunks` directory. Never import these files directly, as they are generated and change from version to version.
+
+## Bundling
+
+Solid Components are distributed as a collection of standard ES modules that [all modern browsers can understand](https://caniuse.com/es6-module). However, importing a lot of modules can result in a lot of HTTP requests and potentially longer load times. Using a CDN can alleviate this, but some users may wish to further optimize their imports with a bundler.
+
+To use Solid with a bundler, first install Solid along with your bundler of choice.
+
+```bash
+npm install @solid-design-system/components @solid-design-system/tokens
+```
+
+Now it's time to configure your bundler. Configurations vary for each tool, but here are some examples using Shoelace, that help you get started.
+
+- [Example webpack config](https://github.com/shoelace-style/webpack-example/blob/master/webpack.config.js)
+- [Example Rollup config](https://github.com/shoelace-style/rollup-example/blob/master/rollup.config.js)
+
+Once your bundler is configured, you'll be able to import Solid components and utilities.
+
+<sd-tab-group>
+  {/* prettier-ignore */}
+  <sd-tab slot="nav" panel="unversioned">Unversioned</sd-tab>
+  {/* prettier-ignore */}
+  <sd-tab slot="nav" panel="versioned">Versioned</sd-tab>
+  <sd-tab-panel name="unversioned">
+  ```js
+// <sd-button>, <sd-icon> and <sd-input> are ready to use!
+```
+
+  </sd-tab-panel>
+  <sd-tab-panel name="versioned">
+  ```js
+// <sd-button>, <sd-icon> and <sd-input> are ready to use!
+```
+
+  </sd-tab-panel>
+</sd-tab-group>
+
+> Component modules include side effects for registration purposes. Because of this, importing directly from `@solid-design-system/components` may result in a larger bundle size than necessary. For optimal tree shaking, always cherry pick, i.e. import components and utilities from their respective files, as shown above.
+
+## The difference between CDN and npm
+
+CDN links all start with `/cdn/<path>` and npm imports use `/dist/<path>`. The `/cdn` files are bundled separately from the `/dist` files. The `/cdn` files come pre-bundled, which means all dependencies are inlined so you do not need to worry about loading additional libraries. The `/dist` files **DO NOT** come pre-bundled, allowing your bundler of choice to more efficiently deduplicate dependencies, resulting in smaller bundles and optimal code sharing.
+
+TL;DR:
+
+<sd-tab-group>
+  {/* prettier-ignore */}
+  <sd-tab slot="nav" panel="unversioned">Unversioned</sd-tab>
+  {/* prettier-ignore */}
+  <sd-tab slot="nav" panel="versioned">Versioned</sd-tab>
+  <sd-tab-panel name="unversioned">
+
+    - `@solid-design-system/components/cdn` is for CDN users
+    - `@solid-design-system/components/dist` is for npm users
+
+  </sd-tab-panel>
+  <sd-tab-panel name="versioned">
+
+    - `@solid-design-system/components/cdn-versioned` is for CDN users
+    - `@solid-design-system/components/dist-versioned` is for npm users
+
+  </sd-tab-panel>
+</sd-tab-group>