@solid-design-system/mcp 7.0.0-next.8 → 7.0.0-next.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/CHANGELOG.md +2 -0
  2. package/metadata/packages/components/docs/installation.md +9 -117
  3. package/metadata/packages/components/sd-icon/stories/custom-libraries.md +1 -1
  4. package/metadata/packages/quickstart/docs/quickstart.md +9 -27
  5. package/metadata/packages/styles/docs/installation.md +8 -56
  6. package/metadata/packages/tokens/docs/installation.md +2 -19
  7. package/metadata/packages/tokens/docs/usage.md +3 -11
  8. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,7 @@
1
1
  # Changelog
2
2
 
3
+ ## 7.0.0-next.9
4
+
3
5
  ## 7.0.0-next.8
4
6
 
5
7
  ### Major Changes
package/metadata/packages/components/docs/installation.md CHANGED
@@ -1,8 +1,8 @@
1
1
  # Installation
2
2
 
3
- You can load Solid Components via CDN or by installing it locally.
3
+ Solid Components is installed via npm. For environments without a bundler, see [CDN Hosting](?path=/docs/docs-general-cdn-hosting--docs).
4
4
 
5
- <sd-notification type="info" open id="versioning-info">
5
+ <sd-notification variant="info" open id="versioning-info">
6
6
  The `components`, `styles`, and `tokens` packages now always share the same version. We use fixed versioning to keep
7
7
  them fully in sync, so every release updates all three packages, even if only one of them changed. Make sure to
8
8
  install or update them using the same version number.
@@ -40,98 +40,9 @@ Keep the following in mind for nested components:
40
40
  - _Slotted components_, which are added by your app or website, are not automatically versioned. You need to version them yourself if necessary.
41
41
  - _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).
42
42
 
43
- ## CDN Installation
43
+ ## Installation
44
44
 
45
- ### Bundle
46
-
47
- 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.
48
- You can use the following script tag to load all components:
49
-
50
- <sd-tab-group>
51
- {/* prettier-ignore */}
52
- <sd-tab slot="nav" panel="unversioned"> Unversioned </sd-tab>
53
- {/* prettier-ignore */}
54
- <sd-tab slot="nav" panel="versioned"> Versioned </sd-tab>
55
- <sd-tab-panel name="unversioned">
56
- ```html
57
- <link
58
- rel="stylesheet"
59
- href="https://solid-design-system.fe.union-investment.de/components/%COMPONENTS-VERSION%/cdn/solid-components.css"
60
- />
61
- <link
62
- rel="stylesheet"
63
- href="https://solid-design-system.fe.union-investment.de/tokens/%TOKENS-VERSION%/cdn/themes/ui-light/ui-light.css"
64
- />
65
- <script
66
- type="module"
67
- src="https://solid-design-system.fe.union-investment.de/components/%COMPONENTS-VERSION%/cdn/solid-components.bundle.js"
68
- ></script>
69
- ```
70
- </sd-tab-panel>
71
- <sd-tab-panel name="versioned">
72
- ```html
73
- <link
74
- rel="stylesheet"
75
- href="https://solid-design-system.fe.union-investment.de/components/%COMPONENTS-VERSION%/cdn-versioned/solid-components.css"
76
- />
77
- <link
78
- rel="stylesheet"
79
- href="https://solid-design-system.fe.union-investment.de/tokens/%TOKENS-VERSION%/cdn/themes/ui-light/ui-light.css"
80
- />
81
- <script
82
- type="module"
83
- src="https://solid-design-system.fe.union-investment.de/components/%COMPONENTS-VERSION%/cdn-versioned/solid-components.bundle.js"
84
- ></script>
85
- ```
86
- </sd-tab-panel>
87
- </sd-tab-group>
88
-
89
- ### ESM
90
-
91
- 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.
92
-
93
- <sd-tab-group>
94
- {/* prettier-ignore */}
95
- <sd-tab slot="nav" panel="unversioned">Unversioned</sd-tab>
96
- {/* prettier-ignore */}
97
- <sd-tab slot="nav" panel="versioned">Versioned</sd-tab>
98
- <sd-tab-panel name="unversioned">
99
- ```html
100
- <link
101
- rel="stylesheet"
102
- href="https://solid-design-system.fe.union-investment.de/components/%COMPONENTS-VERSION%/cdn/solid-components.css"
103
- />
104
- <link
105
- rel="stylesheet"
106
- href="https://solid-design-system.fe.union-investment.de/tokens/%TOKENS-VERSION%/cdn/themes/ui-light/ui-light.css"
107
- />
108
- <script
109
- type="module"
110
- src="https://solid-design-system.fe.union-investment.de/components/%COMPONENTS-VERSION%/cdn/solid-components.js"
111
- ></script>
112
- ```
113
- </sd-tab-panel>
114
- <sd-tab-panel name="versioned">
115
- ```html
116
- <link
117
- rel="stylesheet"
118
- href="https://solid-design-system.fe.union-investment.de/components/%COMPONENTS-VERSION%/cdn-versioned/solid-components.css"
119
- />
120
- <link
121
- rel="stylesheet"
122
- href="https://solid-design-system.fe.union-investment.de/tokens/%TOKENS-VERSION%/cdn/themes/ui-light/ui-light.css"
123
- />
124
- <script
125
- type="module"
126
- src="https://solid-design-system.fe.union-investment.de/components/%COMPONENTS-VERSION%/cdn-versioned/solid-components.js"
127
- ></script>
128
- ```
129
- </sd-tab-panel>
130
- </sd-tab-group>
131
-
132
- ## npm installation
133
-
134
- If you don't want to use the CDN, you can install Solid Components from npm with the following command.
45
+ Install Solid Components from npm:
135
46
 
136
47
  ```bash
137
48
  npm install @solid-design-system/components @solid-design-system/tokens
@@ -166,7 +77,7 @@ Alternatively, [you can use a bundler](#bundling).
166
77
 
167
78
  ## Cherry Picking
168
79
 
169
- 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.
80
+ Cherry picking loads only the components you need up front, limiting the number of files the browser has to download. The disadvantage is that you need to import each individual component.
170
81
 
171
82
  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.
172
83
 
@@ -209,7 +120,7 @@ You can copy and paste the code to import a component from the "Importing" secti
209
120
 
210
121
  ## Bundling
211
122
 
212
- 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.
123
+ 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. You can optimize your imports with a bundler.
213
124
 
214
125
  To use Solid with a bundler, first install Solid along with your bundler of choice.
215
126
 
@@ -245,27 +156,8 @@ Once your bundler is configured, you'll be able to import Solid components and u
245
156
 
246
157
  > 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.
247
158
 
248
- ## The difference between CDN and npm
159
+ ## cdn/ vs dist/
249
160
 
250
- 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.
161
+ The package ships both `cdn/` and `dist/` artifacts. The `/cdn` files are pre-bundled with all dependencies inlined. The `/dist` files are not pre-bundled, allowing your bundler to deduplicate shared dependencies for a smaller total bundle.
251
162
 
252
- TL;DR:
253
-
254
- <sd-tab-group>
255
- {/* prettier-ignore */}
256
- <sd-tab slot="nav" panel="unversioned">Unversioned</sd-tab>
257
- {/* prettier-ignore */}
258
- <sd-tab slot="nav" panel="versioned">Versioned</sd-tab>
259
- <sd-tab-panel name="unversioned">
260
-
261
- - `@solid-design-system/components/cdn` is for CDN users
262
- - `@solid-design-system/components/dist` is for npm users
263
-
264
- </sd-tab-panel>
265
- <sd-tab-panel name="versioned">
266
-
267
- - `@solid-design-system/components/cdn-versioned` is for CDN users
268
- - `@solid-design-system/components/dist-versioned` is for npm users
269
-
270
- </sd-tab-panel>
271
- </sd-tab-group>
163
+ Use `/dist` with a bundler (recommended). Use `/cdn` only when hosting on your own CDN without build tooling — see [CDN Hosting](?path=/docs/general-cdn-hosting--docs).
package/metadata/packages/components/sd-icon/stories/custom-libraries.md CHANGED
@@ -16,7 +16,7 @@ Here's an example that registers an icon library located in the `/assets/icons`
16
16
  If you use the IIFE bundle, you have to access the `registerIconLibrary()` function from the `SolidComponents` global.
17
17
 
18
18
  ```html
19
- <script src="https://solid-design-system.fe.union-investment.de/components/%COMPONENTS-VERSION%/cdn/solid-components.iife.js"></script>
19
+ <script src="https://your-cdn.example.com/components/%COMPONENTS-VERSION%/cdn/solid-components.iife.js"></script>
20
20
  <script>
21
21
  const { registerIconLibrary } = window['SolidComponents'];
22
22
  registerIconLibrary('my-icons', {
package/metadata/packages/quickstart/docs/quickstart.md CHANGED
@@ -6,33 +6,15 @@ To develop with Solid Design System, you need the following three packages:
6
6
  - `@solid-design-system/styles`: Smaller components built with CSS.
7
7
  - `@solid-design-system/tokens`: Tokens and themes for consistent design.
8
8
 
9
- <sd-tab-group>
10
- {/* prettier-ignore */}
11
- <sd-tab slot="nav" panel="npm" variant="container"> NPM </sd-tab>
12
- {/* prettier-ignore */}
13
- <sd-tab slot="nav" panel="cdn" variant="container"> CDN </sd-tab>
14
- <sd-tab-panel name="npm">
15
- ```bash
16
- pnpm i @solid-design-system/components @solid-design-system/styles @solid-design-system/tokens
17
- ```
18
-
19
- ```js
20
- import '@solid-design-system/tokens/dist/themes/ui-light/ui-light.css';
21
- import '@solid-design-system/styles/dist/solid-styles.css';
22
- import '@solid-design-system/components/dist/solid-components.css';
23
- import '@solid-design-system/components/dist/solid-components.js';
24
- ```
25
-
26
- </sd-tab-panel>
27
- <sd-tab-panel name="cdn">
28
- ```html
29
- <link rel="stylesheet" href="https://solid-design-system.fe.union-investment.de/tokens/%TOKENS-VERSION%/cdn/themes/ui-light/ui-light.css" />
30
- <link rel="stylesheet" href="https://solid-design-system.fe.union-investment.de/styles/%STYLES-VERSION%/cdn/solid-styles.css" />
31
- <link rel="stylesheet" href="https://solid-design-system.fe.union-investment.de/components/%COMPONENTS-VERSION%/cdn/solid-components.css" />
32
- <script type="module" src="https://solid-design-system.fe.union-investment.de/components/%COMPONENTS-VERSION%/cdn/solid-components.js"></script>
33
- ```
34
- </sd-tab-panel>
35
- </sd-tab-group>
9
+ ```bash
10
+ pnpm i @solid-design-system/components @solid-design-system/styles @solid-design-system/tokens
11
+ ```
12
+
13
+ ```js
14
+
15
+ ```
16
+
17
+ For environments without a bundler (e.g. a CMS), see [CDN Hosting](?path=/docs/docs-general-cdn-hosting--docs).
36
18
 
37
19
  Now you are ready to use Solid Design System in your project!
38
20
 
package/metadata/packages/styles/docs/installation.md CHANGED
@@ -1,8 +1,8 @@
1
1
  # Installation
2
2
 
3
- You can load Solid via CDN or by installing it locally.
3
+ Solid Styles is installed via npm. For environments without a bundler, see [CDN Hosting](?path=/docs/docs-general-cdn-hosting--docs).
4
4
 
5
- <sd-notification type="info" open id="versioning-info">
5
+ <sd-notification variant="info" open id="versioning-info">
6
6
  The `components`, `styles`, and `tokens` packages now always share the same version. We use fixed versioning to keep
7
7
  them fully in sync, so every release updates all three packages, even if only one of them changed. Make sure to
8
8
  install or update them using the same version number.
@@ -37,38 +37,9 @@ Including version numbers in component names provides more control over updates
37
37
  </sd-tab-panel>
38
38
  </sd-tab-group>
39
39
 
40
- ## CDN Installation
40
+ ## Installation
41
41
 
42
- ### Bundle
43
-
44
- The CDN Bundle 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.
45
-
46
- <sd-tab-group>
47
- {/* prettier-ignore */}
48
- <sd-tab slot="nav" panel="unversioned">Unversioned</sd-tab>
49
- {/* prettier-ignore */}
50
- <sd-tab slot="nav" panel="versioned">Versioned</sd-tab>
51
- <sd-tab-panel name="unversioned">
52
- ```html
53
- <link
54
- rel="stylesheet"
55
- href="https://solid-design-system.fe.union-investment.de/styles/%STYLES-VERSION%/cdn/solid-styles.css"
56
- />
57
- ```
58
- </sd-tab-panel>
59
- <sd-tab-panel name="versioned">
60
- ```html
61
- <link
62
- rel="stylesheet"
63
- href="https://solid-design-system.fe.union-investment.de/styles/%STYLES-VERSION%/cdn-versioned/solid-styles.css"
64
- />
65
- ```
66
- </sd-tab-panel>
67
- </sd-tab-group>
68
-
69
- ## npm installation
70
-
71
- If you don't want to use the CDN, you can install Solid Styles from npm with the following command.
42
+ Install Solid Styles from npm:
72
43
 
73
44
  ```bash
74
45
  npm install @solid-design-system/styles
@@ -99,7 +70,7 @@ Alternatively, you can use a bundler.
99
70
 
100
71
  ## Cherry Picking
101
72
 
102
- Cherry picking can be done from [the CDN](#cdn-installation) or from [npm](#npm-installation). This approach will load only the styles 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 style.
73
+ Cherry picking loads only the styles you need up front, limiting the number of files the browser has to download. The disadvantage is that you need to import each individual style.
103
74
 
104
75
  Here's an example that loads only the mark style that would work in Vite.
105
76
 
@@ -135,27 +106,8 @@ Here's an example that loads only the mark style that would work in Vite.
135
106
 
136
107
  tbd.
137
108
 
138
- ## The difference between CDN and npm
139
-
140
- CDN links all start with `/cdn/<path>` and npm imports use `/dist/<path>`. The `/cdn` files are already minified, while `npm` can be easily patched.
141
-
142
- TL;DR:
143
-
144
- <sd-tab-group>
145
- {/* prettier-ignore */}
146
- <sd-tab slot="nav" panel="unversioned">Unversioned</sd-tab>
147
- {/* prettier-ignore */}
148
- <sd-tab slot="nav" panel="versioned">Versioned</sd-tab>
149
- <sd-tab-panel name="unversioned">
150
-
151
- - `@solid-design-system/styles/cdn` is for CDN users
152
- - `@solid-design-system/styles/dist` is for npm users
153
-
154
- </sd-tab-panel>
155
- <sd-tab-panel name="versioned">
109
+ ## cdn/ vs dist/
156
110
 
157
- - `@solid-design-system/styles/cdn-versioned` is for CDN users
158
- - `@solid-design-system/styles/dist-versioned` is for npm users
111
+ The package ships both `cdn/` and `dist/` artifacts. The `/cdn` files are already minified. The `/dist` files can be more easily patched and are better suited for bundlers.
159
112
 
160
- </sd-tab-panel>
161
- </sd-tab-group>
113
+ Use `/dist` with a bundler (recommended). Use `/cdn` only when hosting on your own CDN without build tooling — see [CDN Hosting](?path=/docs/general-cdn-hosting--docs).
package/metadata/packages/tokens/docs/installation.md CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  This page guides you through installing and setting up the `@solid-design-system/tokens` package to use themes and/or design tokens in your project.
4
4
 
5
- <sd-notification type="info" open>
5
+ <sd-notification variant="info" open>
6
6
  The `components`, `styles`, and `tokens` packages always share the same version. We use fixed versioning to keep them
7
7
  fully in sync, so every release updates all three packages, even if only one of them changed. Make sure to install or
8
8
  update them using the same version number.
@@ -23,29 +23,12 @@ npm install @solid-design-system/tokens
23
23
 
24
24
  ## Import a theme
25
25
 
26
- Load at least one theme — either via NPM import or a CDN `<link>` tag. This only needs to be done **once per document**. Every component and embedded consumer on the page will automatically inherit the theme.
26
+ Load at least one theme via NPM import. This only needs to be done **once per document**. Every component and embedded consumer on the page will automatically inherit the theme.
27
27
 
28
- <sd-tab-group>
29
- {/* prettier-ignore */}
30
- <sd-tab slot="nav" panel="npm" variant="container">NPM</sd-tab>
31
- {/* prettier-ignore */}
32
- <sd-tab slot="nav" panel="cdn" variant="container">CDN</sd-tab>
33
- <sd-tab-panel name="npm">
34
28
  ```js
35
- ```
36
29
 
37
- </sd-tab-panel>
38
- <sd-tab-panel name="cdn">
39
- ```html
40
- <link
41
- rel="stylesheet"
42
- href="https://solid-design-system.fe.union-investment.de/tokens/%TOKENS-VERSION%/cdn/themes/ui-light/ui-light.css"
43
- />
44
30
  ```
45
31
 
46
- </sd-tab-panel>
47
- </sd-tab-group>
48
-
49
32
  ## Next steps
50
33
 
51
34
  Depending on the theme, make sure the following page-level concerns are covered.
package/metadata/packages/tokens/docs/usage.md CHANGED
@@ -16,17 +16,9 @@ This page covers advanced usage patterns for `@solid-design-system/tokens`. Make
16
16
 
17
17
  To automatically respect the user's OS-level preference, use the `prefers-color-scheme` media query on your `<link>` tags:
18
18
 
19
- ```html
20
- <link
21
- rel="stylesheet"
22
- href="https://solid-design-system.fe.union-investment.de/tokens/%TOKENS-VERSION%/cdn/themes/ui-light/ui-light.css"
23
- media="(prefers-color-scheme: light)"
24
- />
25
- <link
26
- rel="stylesheet"
27
- href="https://solid-design-system.fe.union-investment.de/tokens/%TOKENS-VERSION%/cdn/themes/ui-dark/ui-dark.css"
28
- media="(prefers-color-scheme: dark)"
29
- />
19
+ ```css
20
+ @import '@solid-design-system/tokens/dist/themes/ui-light/ui-light.css' (prefers-color-scheme: light);
21
+ @import '@solid-design-system/tokens/dist/themes/ui-dark/ui-dark.css' (prefers-color-scheme: dark);
30
22
  ```
31
23
 
32
24
  For further information on how to make this more dynamic, check out [this article](https://pepelsbey.dev/articles/native-light-dark/).
package/package.json CHANGED
@@ -20,9 +20,9 @@
20
20
  "prettier": "^3.9.5",
21
21
  "tsx": "^4.23.1",
22
22
  "typescript": "^5.9.3",
23
- "@solid-design-system/components": "7.0.0-next.8",
24
- "@solid-design-system/styles": "7.0.0-next.8",
25
- "@solid-design-system/tokens": "7.0.0-next.8"
23
+ "@solid-design-system/components": "7.0.0-next.9",
24
+ "@solid-design-system/styles": "7.0.0-next.9",
25
+ "@solid-design-system/tokens": "7.0.0-next.9"
26
26
  },
27
27
  "exports": {
28
28
  ".": {
@@ -59,7 +59,7 @@
59
59
  "directory": "packages/mcp"
60
60
  },
61
61
  "type": "module",
62
- "version": "7.0.0-next.8",
62
+ "version": "7.0.0-next.9",
63
63
  "scripts": {
64
64
  "build": "pnpm run build:components && pnpm run build:tokens && pnpm run build:ts && pnpm run build:metadata && cd ../.. && pnpm exec prettier --write --log-level warn packages/mcp/metadata",
65
65
  "build:components": "cd ../components && pnpm exec node scripts/make-metadata.js --outdir dist",