@solid-design-system/mcp 7.0.0-next.3 → 7.0.0-next.4

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 (6) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/metadata/packages/components/docs/usage.md +4 -4
  3. package/package.json +4 -4
  4. package/metadata/packages/components/sd-spinner/info.md +0 -53
  5. package/metadata/packages/components/sd-spinner/stories/size.md +0 -15
  6. package/metadata/packages/components/sd-spinner/stories/variants.md +0 -43
package/CHANGELOG.md CHANGED
@@ -1,9 +1,15 @@
1
1
  # Changelog
2
2
 
3
+ ## 7.0.0-next.4
4
+
3
5
  ## 7.0.0-next.3
4
6
 
5
7
  ## 7.0.0-next.2
6
8
 
9
+ ## 6.29.0
10
+
11
+ ## 6.28.2
12
+
7
13
  ### Patch Changes
8
14
 
9
15
  - Updated dependencies. See details in the Pull Request _[`#3163`](https://github.com/solid-design-system/solid/pull/3163) [`91ff1c8`](https://github.com/solid-design-system/solid/commit/91ff1c81831fb3522c534306a61b8a5be3562f64) [@rahulsuvarna18](https://github.com/rahulsuvarna18)_
package/metadata/packages/components/docs/usage.md CHANGED
@@ -94,10 +94,10 @@ Custom elements cannot have self-closing tags. Similar to `<script>` and `<texta
94
94
 
95
95
  ```html
96
96
  <!-- Don't do this -->
97
- <sd-spinner />
97
+ <sd-button />
98
98
 
99
99
  <!-- Always do this -->
100
- <sd-spinner></sd-spinner>
100
+ <sd-button></sd-button>
101
101
  ```
102
102
 
103
103
  ### Differences from Native Elements
@@ -142,10 +142,10 @@ A way to use this method is to hide the `<body>` with `opacity: 0` and add a cla
142
142
  await Promise.allSettled([
143
143
  customElements.whenDefined('sd-button'),
144
144
  customElements.whenDefined('sd-icon'),
145
- customElements.whenDefined('sd-spinner')
145
+ customElements.whenDefined('sd-loader')
146
146
  ]);
147
147
 
148
- // Button, icon and spinner are registered now! Add
148
+ // Button, icon and loader are registered now! Add
149
149
  // the `ready` class so the UI fades in.
150
150
  document.body.classList.add('ready');
151
151
  </script>
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.3",
24
- "@solid-design-system/styles": "7.0.0-next.3",
25
- "@solid-design-system/tokens": "7.0.0-next.3"
23
+ "@solid-design-system/components": "7.0.0-next.4",
24
+ "@solid-design-system/styles": "7.0.0-next.4",
25
+ "@solid-design-system/tokens": "7.0.0-next.4"
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.3",
62
+ "version": "7.0.0-next.4",
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",
package/metadata/packages/components/sd-spinner/info.md DELETED
@@ -1,53 +0,0 @@
1
- ## Overview
2
-
3
- `<sd-spinner>` — Used as a visual indicator with a looping animation that shows loading is in process.
4
-
5
- ## API
6
-
7
- ### Examples
8
-
9
- Use the components tool by passing the args `component` and `example` for any of these combinations:
10
-
11
- - component: sd-spinner, example: variants
12
- - component: sd-spinner, example: size
13
-
14
- ### Key Properties
15
-
16
- - prop.color: 'primary'|'white'|'currentColor', default='currentColor' — The color color of the spinner.
17
- - prop.dir: 'ltr'|'rtl'|'auto' — The element's directionality.
18
- - prop.lang: string — The element's language.
19
-
20
- ## Guidelines
21
-
22
- ### Use Cases
23
-
24
- - Indicate that content is being loaded, such as when fetching data from a server or loading a new page.
25
- - Show ongoing background processes, like file uploads or data processing tasks.
26
- - Used within buttons or interactive elements to indicate that an action is being processed.
27
- - Apply to sections of a page that are loading independently, such as widgets or panels.
28
- - Display when a form is being submitted to show that the submission is in progress.
29
-
30
- ### Rules
31
-
32
- ### Content
33
-
34
- - Include a label or message to provide context about what is being loaded, especially if the loading time is long.
35
-
36
- ### Behavior and Placement
37
-
38
- - Use for processes that take a short amount of time (typically under 4 seconds).
39
- - Apply within specific sections rather than blocking the entire page, unless absolutely necessary.
40
- - Place in a consistent location relative to the content it is loading.
41
-
42
- ### Styling
43
-
44
- - Maintain consistency in size and style; avoid using spinners of varying sizes on the same page.
45
-
46
- ### Background
47
-
48
- - Use light background options like white, neutral-100, primary-100, or use a primary background when inverted.
49
-
50
- ### Accessibility
51
-
52
- - Assign role="status" or use a live region (e.g., aria-live="polite") to inform screen reader users of ongoing loading.
53
- - A spinner shouldn’t itself be focusable or interactive, nor prevent from navigating to other parts of the page while loading continues.
package/metadata/packages/components/sd-spinner/stories/size.md DELETED
@@ -1,15 +0,0 @@
1
- Use the CSS property `font-size` to scale the spinner proportionally.
2
-
3
- ```html
4
- <div class="flex flex-row gap-12">
5
- <div style="font-size: inherit">
6
- <sd-spinner color="primary"></sd-spinner>
7
- </div>
8
- <div style="font-size: 2rem">
9
- <sd-spinner color="primary"></sd-spinner>
10
- </div>
11
- <div style="font-size: 4rem">
12
- <sd-spinner color="primary"></sd-spinner>
13
- </div>
14
- </div>
15
- ```
package/metadata/packages/components/sd-spinner/stories/variants.md DELETED
@@ -1,43 +0,0 @@
1
- <sd-notification variant="warning" open class="mb-4">**Warning:** The `sd-spinner` will be deprecated in the future. Please use the `sd-loader` component instead.</sd-notification>
2
- **Known browser issues:**
3
-
4
- - The 'sd-spinner' component may experience spinner animation issues in Safari, causing them to appear wobbly.
5
- /
6
- export default {
7
- title: 'Components/sd-spinner',
8
- component: 'sd-spinner',
9
- tags: ['!dev', 'autodocs'],
10
- args: overrideArgs({ type: 'attribute', name: 'color', value: 'primary' }),
11
- argTypes,
12
- parameters: {
13
- ...parameters,
14
- design: {
15
- type: 'figma',
16
- url: 'https://www.figma.com/design/YDktJcseQIIQbsuCpoKS4V/Component-Docs?node-id=2115-17681&node-type=section&t=5PpAC3TA3kYF7ufX-0'
17
- }
18
- }
19
- };
20
- export const Default = {
21
- render: (args: any) => {
22
- return generateTemplate({ args });
23
- }
24
- };
25
- /**
26
- Use the `color` attribute to set the spinner's color:
27
- - `currentColor` (default): used to inherit the `text-color` from the parent element
28
- - `primary`: used on light backgrounds
29
- - `white`: used on primary backgrounds
30
-
31
- ```html
32
- <div class="flex flex-row items-center gap-12">
33
- <div class="p-4">
34
- <sd-spinner color="currentColor"></sd-spinner>
35
- </div>
36
- <div class="p-4">
37
- <sd-spinner color="primary"></sd-spinner>
38
- </div>
39
- <div class="bg-primary p-4">
40
- <sd-spinner color="white"></sd-spinner>
41
- </div>
42
- </div>
43
- ```