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

package/CHANGELOG.md

@@ -1,5 +1,7 @@
 # Changelog
 
+## 7.0.0-next.5
+
 ## 7.0.0-next.4
 
 ## 7.0.0-next.3

package/metadata/packages/components/sd-dialog/stories/open.md

@@ -8,11 +8,6 @@
   tags: ['!dev', 'autodocs'],
   args: overrideArgs([
   {
-  type: 'attribute',
-  name: 'open',
-  value: true
-  },
-  {
   type: 'slot',
   name: 'default',
   value: `<div class="slot slot--border slot--text h-16 w-full">Default slot</div>`
@@ -39,12 +34,19 @@
   };
   export const Default = {
   render: (args: any) => {
-  return html` <div style="height: 40vh;">
+  return html`
+  <sd-button id="open-default-dialog">Open Dialog</sd-button>
   ${generateTemplate({
   args
   })}
 
-</div>`;
+<script>
+document.querySelector('#open-default-dialog').addEventListener('click', () => {
+document.querySelector('sd-dialog').show();
+});
+</script>
+
+`;
 }
 };
 /**

package/metadata/packages/components/sd-drawer/info.md

@@ -19,7 +19,6 @@ Use the components tool by passing the args `component` and `example` for any of
 - prop.label: string, default='' — You should always include a relevant label even when using
   `no-header`, as it is required for proper accessibility.
 - prop.placement: 'end'|'start', default='end' — The direction from which the drawer will open.
-- 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.
 - 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.
 - prop.dir: 'ltr'|'rtl'|'auto' — The element's directionality.
 - 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
 ### CSS Parts
 
 - part.base: The component's base wrapper.
-- part.overlay: The overlay that covers the screen behind the drawer.
 - part.panel: The drawer's panel (where the drawer and its content are rendered).
 - part.header: The drawer's header. This element wraps the title and the close-button.
 - part.title: The drawer's title.
 - part.close-button: The close button, an `<sd-button>`.
 - part.body: The drawer's body.
 - part.footer: The drawer's footer.
+- part.overlay: The overlay that covers the screen behind the drawer.
 
 ## Guidelines
 

package/metadata/packages/components/sd-teaser/stories/breakpoint.md

@@ -6,7 +6,7 @@ Use the `breakpoint` attribute to change the teaser's layout at a specific break
 ```html
 <div class="flex gap-8 flex-col">
   <sd-teaser breakpoint="0">
-    <h3 slot="headline" class="sd-headline sd-headline--size-lg">Horizontal</h3>
+    <h3 slot="headline">Horizontal</h3>
     <img slot="media" src="./placeholders/images/architecture.jpg" alt="" style="width:100%; height: auto;" />
     <p>
       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
   </sd-teaser>
 
   <sd-teaser breakpoint="9999" class="w-[256px]">
-    <h3 slot="headline" class="sd-headline sd-headline--size-lg">Vertical</h3>
+    <h3 slot="headline">Vertical</h3>
     <img slot="media" src="./placeholders/images/architecture.jpg" alt="" style="width:100%; height: auto;" />
     <p>
       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

@@ -4,7 +4,7 @@
 
 ```html
 <sd-teaser>
-  <h3 slot="headline" class="sd-headline sd-headline--size-lg">Lorem ipsum sic semper</h3>
+  <h3 slot="headline">Lorem ipsum sic semper</h3>
   <p>
     Quis ut ex cupidatat proident cillum ullamco ea aute ad laborum aliqua incididunt sint ipsum. Elit enim
     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

@@ -2,7 +2,7 @@ Use the `--distribution-media` and `--distribution-content` CSS properties to ad
 
 ```html
 <sd-teaser style="--distribution-media: 20%; --distribution-content: 80%;">
-  <h3 slot="headline" class="sd-headline sd-headline--size-lg">Lorem ipsum sic semper</h3>
+  <h3 slot="headline">Lorem ipsum sic semper</h3>
   <img slot="media" src="./placeholders/images/architecture.jpg" alt="" style="width:100%; height: auto;" />
   <p>
     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

@@ -2,7 +2,7 @@ Use the `inset` attribute to create a teaser with an inset padding if the contex
 
 ```html
 <sd-teaser inset variant="primary-100">
-  <h3 slot="headline" class="sd-headline sd-headline--size-lg">Teaser with inset Padding</h3>
+  <h3 slot="headline">Teaser with inset Padding</h3>
   <p>
     Quis ut ex cupidatat proident cillum ullamco ea aute ad laborum aliqua incididunt sint ipsum. Elit enim
     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

@@ -3,7 +3,7 @@ Teasers accept a `media` slot to display images or videos.
 
 ```html
 <sd-teaser>
-  <h3 slot="headline" class="sd-headline sd-headline--size-lg">Lorem ipsum sic semper</h3>
+  <h3 slot="headline">Lorem ipsum sic semper</h3>
   <img slot="media" src="./placeholders/images/architecture.jpg" alt="" style="width:100%; height: auto;" />
   <p>
     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

@@ -2,7 +2,7 @@ Use the `meta` slot to add additional content to the teaser.
 
 ```html
 <sd-teaser>
-  <h3 slot="headline" class="sd-headline sd-headline--size-lg">Lorem ipsum sic semper</h3>
+  <h3 slot="headline">Lorem ipsum sic semper</h3>
   <div slot="meta">
     <time class="sd-meta sd-meta--pipe" datetime="2023-01-01">01.01.2023</time>
     <span class="sd-meta">Author name</span>

package/metadata/packages/components/sd-teaser/stories/reverse.md

@@ -3,7 +3,7 @@ Use the `reversed-layout` attribute to invert the horizontal layout.
 
 ```html
 <sd-teaser reversed-layout>
-  <h3 slot="headline" class="sd-headline sd-headline--size-lg">Horizontal</h3>
+  <h3 slot="headline">Horizontal</h3>
   <img slot="media" src="./placeholders/images/architecture.jpg" alt="" class="w-full h-auto" />
   <p>
     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

@@ -9,27 +9,23 @@ Use the `variant` attribute to use the appropriate teaser for your context:
 ```html
 <div class="grid grid-cols-2 gap-12">
   <sd-teaser variant="white" inset>
-    <h3 slot="headline" class="sd-headline sd-headline--size-lg">Teaser with white background</h3>
+    <h3 slot="headline">Teaser with white background</h3>
     <p class="sd-paragraph">Lorem ipsum dolor sit amet, consetetur sadi pscing elitr, sed diam nonumy eirmod tempor.</p>
   </sd-teaser>
   <sd-teaser variant="white border-neutral-400">
-    <h3 slot="headline" class="sd-headline sd-headline--size-lg">
-      Teaser with white background and border neutral-400
-    </h3>
+    <h3 slot="headline">Teaser with white background and border neutral-400</h3>
     <p class="sd-paragraph">Lorem ipsum dolor sit amet, consetetur sadi pscing elitr, sed diam nonumy eirmod tempor.</p>
   </sd-teaser>
   <sd-teaser variant="neutral-100" inset>
-    <h3 slot="headline" class="sd-headline sd-headline--size-lg">Teaser with neutral-100 background</h3>
+    <h3 slot="headline">Teaser with neutral-100 background</h3>
     <p class="sd-paragraph">Lorem ipsum dolor sit amet, consetetur sadi pscing elitr, sed diam nonumy eirmod tempor.</p>
   </sd-teaser>
   <sd-teaser variant="primary-100" inset>
-    <h3 slot="headline" class="sd-headline sd-headline--size-lg">Teaser with primary-100 background</h3>
+    <h3 slot="headline">Teaser with primary-100 background</h3>
     <p class="sd-paragraph">Lorem ipsum dolor sit amet, consetetur sadi pscing elitr, sed diam nonumy eirmod tempor.</p>
   </sd-teaser>
   <sd-teaser variant="primary" inset>
-    <h3 slot="headline" class="sd-headline sd-headline--size-lg sd-headline--inverted">
-      Teaser with primary background
-    </h3>
+    <h3 slot="headline">Teaser with primary background</h3>
     <p class="sd-paragraph sd-paragraph--inverted">
       Lorem ipsum dolor sit amet, consetetur sadi pscing elitr, sed diam nonumy eirmod tempor.
     </p>

package/metadata/packages/templates/teaser.md

@@ -73,7 +73,7 @@ version: 1.0.0
 </style>
 <div class="max-w-[426.67px]">
   <sd-teaser variant="primary-100" inset class="clickable relative m-2 translate-x-0 translate-y-0">
-    <h2 slot="headline" class="sd-headline sd-headline--size-lg">Union Investment's climate strategy</h2>
+    <h2 slot="headline">Union Investment's climate strategy</h2>
     <div slot="media" class="relative">
       <img
         class="aspect-video object-cover"

package/package.json

@@ -20,9 +20,9 @@
     "prettier": "^3.9.5",
     "tsx": "^4.23.1",
     "typescript": "^5.9.3",
-    "@solid-design-system/components": "7.0.0-next.4",
-    "@solid-design-system/styles": "7.0.0-next.4",
-    "@solid-design-system/tokens": "7.0.0-next.4"
+    "@solid-design-system/components": "7.0.0-next.5",
+    "@solid-design-system/styles": "7.0.0-next.5",
+    "@solid-design-system/tokens": "7.0.0-next.5"
   },
   "exports": {
     ".": {
@@ -59,7 +59,7 @@
     "directory": "packages/mcp"
   },
   "type": "module",
-  "version": "7.0.0-next.4",
+  "version": "7.0.0-next.5",
   "scripts": {
     "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",
     "build:components": "cd ../components && pnpm exec node scripts/make-metadata.js --outdir dist",