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

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 (15) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/metadata/packages/components/sd-dialog/stories/open.md +9 -7
  3. package/metadata/packages/components/sd-drawer/info.md +1 -2
  4. package/metadata/packages/components/sd-notification/stories/duration.md +5 -0
  5. package/metadata/packages/components/sd-teaser/stories/breakpoint.md +2 -2
  6. package/metadata/packages/components/sd-teaser/stories/default-and-headline-slot.md +1 -1
  7. package/metadata/packages/components/sd-teaser/stories/distribution.md +1 -1
  8. package/metadata/packages/components/sd-teaser/stories/inset.md +1 -1
  9. package/metadata/packages/components/sd-teaser/stories/media-slot.md +1 -1
  10. package/metadata/packages/components/sd-teaser/stories/meta-slot.md +1 -1
  11. package/metadata/packages/components/sd-teaser/stories/reverse.md +1 -1
  12. package/metadata/packages/components/sd-teaser/stories/variant.md +5 -9
  13. package/metadata/packages/icons/default/system.json +20 -20
  14. package/metadata/packages/templates/teaser.md +1 -1
  15. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,9 @@
1
1
  # Changelog
2
2
 
3
+ ## 7.0.0-next.6
4
+
5
+ ## 7.0.0-next.5
6
+
3
7
  ## 7.0.0-next.4
4
8
 
5
9
  ## 7.0.0-next.3
package/metadata/packages/components/sd-dialog/stories/open.md CHANGED
@@ -8,11 +8,6 @@
8
8
  tags: ['!dev', 'autodocs'],
9
9
  args: overrideArgs([
10
10
  {
11
- type: 'attribute',
12
- name: 'open',
13
- value: true
14
- },
15
- {
16
11
  type: 'slot',
17
12
  name: 'default',
18
13
  value: `<div class="slot slot--border slot--text h-16 w-full">Default slot</div>`
@@ -39,12 +34,19 @@
39
34
  };
40
35
  export const Default = {
41
36
  render: (args: any) => {
42
- return html` <div style="height: 40vh;">
37
+ return html`
38
+ <sd-button id="open-default-dialog">Open Dialog</sd-button>
43
39
  ${generateTemplate({
44
40
  args
45
41
  })}
46
42
 
47
- </div>`;
43
+ <script>
44
+ document.querySelector('#open-default-dialog').addEventListener('click', () => {
45
+ document.querySelector('sd-dialog').show();
46
+ });
47
+ </script>
48
+
49
+ `;
48
50
  }
49
51
  };
50
52
  /**
package/metadata/packages/components/sd-drawer/info.md CHANGED
@@ -19,7 +19,6 @@ Use the components tool by passing the args `component` and `example` for any of
19
19
  - prop.label: string, default='' — You should always include a relevant label even when using
20
20
  `no-header`, as it is required for proper accessibility.
21
21
  - prop.placement: 'end'|'start', default='end' — The direction from which the drawer will open.
22
- - prop.contained: boolean, default=false — By default, the drawer slides out of its containing block (the viewport). Contained is a hidden feature used only for testing purposes. Please do not use it in production as it will likely change.
23
22
  - prop.noHeader [attr: no-header]: boolean, default=false — Removes the header. This will also remove the default close button, so please ensure you provide an easy, accessible way for users to dismiss the drawer.
24
23
  - prop.dir: 'ltr'|'rtl'|'auto' — The element's directionality.
25
24
  - prop.lang: string — The element's language.
@@ -42,13 +41,13 @@ Use the components tool by passing the args `component` and `example` for any of
42
41
  ### CSS Parts
43
42
 
44
43
  - part.base: The component's base wrapper.
45
- - part.overlay: The overlay that covers the screen behind the drawer.
46
44
  - part.panel: The drawer's panel (where the drawer and its content are rendered).
47
45
  - part.header: The drawer's header. This element wraps the title and the close-button.
48
46
  - part.title: The drawer's title.
49
47
  - part.close-button: The close button, an `<sd-button>`.
50
48
  - part.body: The drawer's body.
51
49
  - part.footer: The drawer's footer.
50
+ - part.overlay: The overlay that covers the screen behind the drawer.
52
51
 
53
52
  ## Guidelines
54
53
 
package/metadata/packages/components/sd-notification/stories/duration.md CHANGED
@@ -5,6 +5,11 @@ Use the `duration` attribute to set the duration (in milliseconds) of the notifi
5
5
  <sd-notification id="duration-example" variant="info" open duration="5000">
6
6
  Notification will self close after 5 seconds
7
7
  </sd-notification>
8
+ <style>
9
+ sd-notification#duration-example::part(base) {
10
+ margin-top: 0.5rem;
11
+ }
12
+ </style>
8
13
  <script>
9
14
  var notificationDuration = document.querySelector('#duration-example');
10
15
  notificationDuration.addEventListener('sd-after-hide', () => {
package/metadata/packages/components/sd-teaser/stories/breakpoint.md CHANGED
@@ -6,7 +6,7 @@ Use the `breakpoint` attribute to change the teaser's layout at a specific break
6
6
  ```html
7
7
  <div class="flex gap-8 flex-col">
8
8
  <sd-teaser breakpoint="0">
9
- <h3 slot="headline" class="sd-headline sd-headline--size-lg">Horizontal</h3>
9
+ <h3 slot="headline">Horizontal</h3>
10
10
  <img slot="media" src="./placeholders/images/architecture.jpg" alt="" style="width:100%; height: auto;" />
11
11
  <p>
12
12
  Quis ut ex cupidatat proident cillum ullamco ea aute ad laborum aliqua incididunt sint ipsum. Elit enim
@@ -16,7 +16,7 @@ Use the `breakpoint` attribute to change the teaser's layout at a specific break
16
16
  </sd-teaser>
17
17
 
18
18
  <sd-teaser breakpoint="9999" class="w-[256px]">
19
- <h3 slot="headline" class="sd-headline sd-headline--size-lg">Vertical</h3>
19
+ <h3 slot="headline">Vertical</h3>
20
20
  <img slot="media" src="./placeholders/images/architecture.jpg" alt="" style="width:100%; height: auto;" />
21
21
  <p>
22
22
  Quis ut ex cupidatat proident cillum ullamco ea aute ad laborum aliqua incididunt sint ipsum. Elit enim
package/metadata/packages/components/sd-teaser/stories/default-and-headline-slot.md CHANGED
@@ -4,7 +4,7 @@
4
4
 
5
5
  ```html
6
6
  <sd-teaser>
7
- <h3 slot="headline" class="sd-headline sd-headline--size-lg">Lorem ipsum sic semper</h3>
7
+ <h3 slot="headline">Lorem ipsum sic semper</h3>
8
8
  <p>
9
9
  Quis ut ex cupidatat proident cillum ullamco ea aute ad laborum aliqua incididunt sint ipsum. Elit enim
10
10
  reprehenderit aliquip officia in minim. Eu ipsum pariatur dolor. Do ex in cupidatat anim aliqua sint voluptate sunt
package/metadata/packages/components/sd-teaser/stories/distribution.md CHANGED
@@ -2,7 +2,7 @@ Use the `--distribution-media` and `--distribution-content` CSS properties to ad
2
2
 
3
3
  ```html
4
4
  <sd-teaser style="--distribution-media: 20%; --distribution-content: 80%;">
5
- <h3 slot="headline" class="sd-headline sd-headline--size-lg">Lorem ipsum sic semper</h3>
5
+ <h3 slot="headline">Lorem ipsum sic semper</h3>
6
6
  <img slot="media" src="./placeholders/images/architecture.jpg" alt="" style="width:100%; height: auto;" />
7
7
  <p>
8
8
  Quis ut ex cupidatat proident cillum ullamco ea aute ad laborum aliqua incididunt sint ipsum. Elit enim
package/metadata/packages/components/sd-teaser/stories/inset.md CHANGED
@@ -2,7 +2,7 @@ Use the `inset` attribute to create a teaser with an inset padding if the contex
2
2
 
3
3
  ```html
4
4
  <sd-teaser inset variant="primary-100">
5
- <h3 slot="headline" class="sd-headline sd-headline--size-lg">Teaser with inset Padding</h3>
5
+ <h3 slot="headline">Teaser with inset Padding</h3>
6
6
  <p>
7
7
  Quis ut ex cupidatat proident cillum ullamco ea aute ad laborum aliqua incididunt sint ipsum. Elit enim
8
8
  reprehenderit aliquip officia in minim. Eu ipsum pariatur dolor. Do ex in cupidatat anim aliqua sint voluptate sunt
package/metadata/packages/components/sd-teaser/stories/media-slot.md CHANGED
@@ -3,7 +3,7 @@ Teasers accept a `media` slot to display images or videos.
3
3
 
4
4
  ```html
5
5
  <sd-teaser>
6
- <h3 slot="headline" class="sd-headline sd-headline--size-lg">Lorem ipsum sic semper</h3>
6
+ <h3 slot="headline">Lorem ipsum sic semper</h3>
7
7
  <img slot="media" src="./placeholders/images/architecture.jpg" alt="" style="width:100%; height: auto;" />
8
8
  <p>
9
9
  Quis ut ex cupidatat proident cillum ullamco ea aute ad laborum aliqua incididunt sint ipsum. Elit enim
package/metadata/packages/components/sd-teaser/stories/meta-slot.md CHANGED
@@ -2,7 +2,7 @@ Use the `meta` slot to add additional content to the teaser.
2
2
 
3
3
  ```html
4
4
  <sd-teaser>
5
- <h3 slot="headline" class="sd-headline sd-headline--size-lg">Lorem ipsum sic semper</h3>
5
+ <h3 slot="headline">Lorem ipsum sic semper</h3>
6
6
  <div slot="meta">
7
7
  <time class="sd-meta sd-meta--pipe" datetime="2023-01-01">01.01.2023</time>
8
8
  <span class="sd-meta">Author name</span>
package/metadata/packages/components/sd-teaser/stories/reverse.md CHANGED
@@ -3,7 +3,7 @@ Use the `reversed-layout` attribute to invert the horizontal layout.
3
3
 
4
4
  ```html
5
5
  <sd-teaser reversed-layout>
6
- <h3 slot="headline" class="sd-headline sd-headline--size-lg">Horizontal</h3>
6
+ <h3 slot="headline">Horizontal</h3>
7
7
  <img slot="media" src="./placeholders/images/architecture.jpg" alt="" class="w-full h-auto" />
8
8
  <p>
9
9
  Quis ut ex cupidatat proident cillum ullamco ea aute ad laborum aliqua incididunt sint ipsum. Elit enim
package/metadata/packages/components/sd-teaser/stories/variant.md CHANGED
@@ -9,27 +9,23 @@ Use the `variant` attribute to use the appropriate teaser for your context:
9
9
  ```html
10
10
  <div class="grid grid-cols-2 gap-12">
11
11
  <sd-teaser variant="white" inset>
12
- <h3 slot="headline" class="sd-headline sd-headline--size-lg">Teaser with white background</h3>
12
+ <h3 slot="headline">Teaser with white background</h3>
13
13
  <p class="sd-paragraph">Lorem ipsum dolor sit amet, consetetur sadi pscing elitr, sed diam nonumy eirmod tempor.</p>
14
14
  </sd-teaser>
15
15
  <sd-teaser variant="white border-neutral-400">
16
- <h3 slot="headline" class="sd-headline sd-headline--size-lg">
17
- Teaser with white background and border neutral-400
18
- </h3>
16
+ <h3 slot="headline">Teaser with white background and border neutral-400</h3>
19
17
  <p class="sd-paragraph">Lorem ipsum dolor sit amet, consetetur sadi pscing elitr, sed diam nonumy eirmod tempor.</p>
20
18
  </sd-teaser>
21
19
  <sd-teaser variant="neutral-100" inset>
22
- <h3 slot="headline" class="sd-headline sd-headline--size-lg">Teaser with neutral-100 background</h3>
20
+ <h3 slot="headline">Teaser with neutral-100 background</h3>
23
21
  <p class="sd-paragraph">Lorem ipsum dolor sit amet, consetetur sadi pscing elitr, sed diam nonumy eirmod tempor.</p>
24
22
  </sd-teaser>
25
23
  <sd-teaser variant="primary-100" inset>
26
- <h3 slot="headline" class="sd-headline sd-headline--size-lg">Teaser with primary-100 background</h3>
24
+ <h3 slot="headline">Teaser with primary-100 background</h3>
27
25
  <p class="sd-paragraph">Lorem ipsum dolor sit amet, consetetur sadi pscing elitr, sed diam nonumy eirmod tempor.</p>
28
26
  </sd-teaser>
29
27
  <sd-teaser variant="primary" inset>
30
- <h3 slot="headline" class="sd-headline sd-headline--size-lg sd-headline--inverted">
31
- Teaser with primary background
32
- </h3>
28
+ <h3 slot="headline">Teaser with primary background</h3>
33
29
  <p class="sd-paragraph sd-paragraph--inverted">
34
30
  Lorem ipsum dolor sit amet, consetetur sadi pscing elitr, sed diam nonumy eirmod tempor.
35
31
  </p>
package/metadata/packages/icons/default/system.json CHANGED
@@ -29,16 +29,16 @@
29
29
  "displayNameDe": "Sonne",
30
30
  "tags": ["sonnig", "hell", "schönes Wetter"]
31
31
  },
32
- {
33
- "technicalId": "volume",
34
- "displayNameDe": "Lautstärke",
35
- "tags": ["Ton", "Pegel", "Geräuschpegel"]
36
- },
37
32
  {
38
33
  "technicalId": "settings",
39
34
  "displayNameDe": "Einstellungen",
40
35
  "tags": ["anpassen", "Bearbeitung", "Zahnrad"]
41
36
  },
37
+ {
38
+ "technicalId": "volume",
39
+ "displayNameDe": "Lautstärke",
40
+ "tags": ["Ton", "Pegel", "Geräuschpegel"]
41
+ },
42
42
  {
43
43
  "technicalId": "hand",
44
44
  "displayNameDe": "Hand",
@@ -79,16 +79,16 @@
79
79
  "displayNameDe": "Herz voll",
80
80
  "tags": ["Favoriten", "gespeichert", "gemerkt"]
81
81
  },
82
- {
83
- "technicalId": "battery-full",
84
- "displayNameDe": "Batterie voll\n",
85
- "tags": ["voll", "Akku", "Ladestatus"]
86
- },
87
82
  {
88
83
  "technicalId": "flash-on",
89
84
  "displayNameDe": "Blitz an",
90
85
  "tags": ["Taschenlampe an", "Foto"]
91
86
  },
87
+ {
88
+ "technicalId": "battery-full",
89
+ "displayNameDe": "Batterie voll\n",
90
+ "tags": ["voll", "Akku", "Ladestatus"]
91
+ },
92
92
  {
93
93
  "technicalId": "sort-down",
94
94
  "displayNameDe": "sortieren absteigend",
@@ -614,16 +614,16 @@
614
614
  "displayNameDe": "Bildschirm Cursor",
615
615
  "tags": ["klicken", "auswählen"]
616
616
  },
617
- {
618
- "technicalId": "layers",
619
- "displayNameDe": "Ebenen",
620
- "tags": ["gruppieren", "Stapel", "mehrere Folien erzeugen"]
621
- },
622
617
  {
623
618
  "technicalId": "file-read-out",
624
619
  "displayNameDe": "Dokument vorlesen",
625
620
  "tags": ["vorlesen", "Audio", "Lautstärke"]
626
621
  },
622
+ {
623
+ "technicalId": "layers",
624
+ "displayNameDe": "Ebenen",
625
+ "tags": ["gruppieren", "Stapel", "mehrere Folien erzeugen"]
626
+ },
627
627
  {
628
628
  "technicalId": "collapse-left",
629
629
  "displayNameDe": "einklappen links",
@@ -844,16 +844,16 @@
844
844
  "displayNameDe": "Lesezeichen",
845
845
  "tags": ["merken", "Markierung", "markiert", "Favoriten"]
846
846
  },
847
- {
848
- "technicalId": "arrow-right",
849
- "displayNameDe": "Pfeil rechts",
850
- "tags": ["Pfeil", "vorwärts", "weiter"]
851
- },
852
847
  {
853
848
  "technicalId": "flash",
854
849
  "displayNameDe": "Blitz",
855
850
  "tags": ["Pfeil", "Fehler", "falsch"]
856
851
  },
852
+ {
853
+ "technicalId": "arrow-right",
854
+ "displayNameDe": "Pfeil rechts",
855
+ "tags": ["Pfeil", "vorwärts", "weiter"]
856
+ },
857
857
  {
858
858
  "technicalId": "arrow-top",
859
859
  "displayNameDe": "Pfeil oben",
package/metadata/packages/templates/teaser.md CHANGED
@@ -73,7 +73,7 @@ version: 1.0.0
73
73
  </style>
74
74
  <div class="max-w-[426.67px]">
75
75
  <sd-teaser variant="primary-100" inset class="clickable relative m-2 translate-x-0 translate-y-0">
76
- <h2 slot="headline" class="sd-headline sd-headline--size-lg">Union Investment's climate strategy</h2>
76
+ <h2 slot="headline">Union Investment's climate strategy</h2>
77
77
  <div slot="media" class="relative">
78
78
  <img
79
79
  class="aspect-video object-cover"
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.4",
24
- "@solid-design-system/styles": "7.0.0-next.4",
25
- "@solid-design-system/tokens": "7.0.0-next.4"
23
+ "@solid-design-system/components": "7.0.0-next.6",
24
+ "@solid-design-system/styles": "7.0.0-next.6",
25
+ "@solid-design-system/tokens": "7.0.0-next.6"
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.4",
62
+ "version": "7.0.0-next.6",
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",