@solid-design-system/mcp 7.0.0-next.1 → 7.0.0-next.11

package/CHANGELOG.md

@@ -1,5 +1,48 @@
 # Changelog
 
+## 7.0.0-next.11
+
+## 7.0.0-next.10
+
+## 7.0.0-next.9
+
+## 7.0.0-next.8
+
+### Major Changes
+
+- Consolidated `sd-chip` and `sd-flag`: _[`#3267`](https://github.com/solid-design-system/solid/pull/3267) [`12db708`](https://github.com/solid-design-system/solid/commit/12db708ea227bc2ce2a7835d12190ee1ae40f891) [@auroraVasconcelos](https://github.com/auroraVasconcelos)_
+
+  - Removed the `sd-flag` style.
+  - Added `sd-chip--color-{primary,neutral,white}`, `sd-chip--shade-{subtle,low,medium,high}`, `sd-chip--size-{sm,lg}`, `sd-chip--outline` and `sd-chip--sharp` classes.
+
+## 7.0.0-next.7
+
+## 7.0.0-next.6
+
+## 7.0.0-next.5
+
+## 7.0.0-next.4
+
+## 7.0.0-next.3
+
+## 7.0.0-next.2
+
+## 6.30.0
+
+### Minor Changes
+
+- Add `sd-file-selector` component. _[`#3237`](https://github.com/solid-design-system/solid/pull/3237) [`cdab3e1`](https://github.com/solid-design-system/solid/commit/cdab3e1c704558ad4d437d9d19d5ad8db5062547) [@auroraVasconcelos](https://github.com/auroraVasconcelos)_
+
+## 6.29.1
+
+## 6.29.0
+
+## 6.28.2
+
+### Patch Changes
+
+- 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)_
+
 ## 7.0.0-next.1
 
 ### Patch Changes
@@ -8,6 +51,8 @@
 
 ## 7.0.0-next.0
 
+## 6.28.1
+
 ## 6.28.0
 
 ## 6.27.2

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

@@ -1,8 +1,8 @@
 # Installation
 
-You can load Solid Components via CDN or by installing it locally.
+Solid Components is installed via npm. For environments without a bundler, see [CDN Hosting](?path=/docs/docs-general-cdn-hosting--docs).
 
-<sd-notification type="info" open id="versioning-info">
+<sd-notification variant="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.
@@ -40,98 +40,9 @@ 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
+## 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.
+Install Solid Components from npm:
 
 ```bash
 npm install @solid-design-system/components @solid-design-system/tokens
@@ -166,7 +77,7 @@ 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.
+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.
 
 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.
 
@@ -209,7 +120,7 @@ You can copy and paste the code to import a component from the "Importing" secti
 
 ## 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.
+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.
 
 To use Solid with a bundler, first install Solid along with your bundler of choice.
 
@@ -245,27 +156,8 @@ Once your bundler is configured, you'll be able to import Solid components and u
 
 > 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/ vs dist/
 
-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.
+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.
 
-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>
+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/docs/usage.md

@@ -94,10 +94,10 @@ Custom elements cannot have self-closing tags. Similar to `<script>` and `<texta
 
 ```html
 <!-- Don't do this -->
-<sd-spinner />
+<sd-button />
 
 <!-- Always do this -->
-<sd-spinner></sd-spinner>
+<sd-button></sd-button>
 ```
 
 ### 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
   await Promise.allSettled([
     customElements.whenDefined('sd-button'),
     customElements.whenDefined('sd-icon'),
-    customElements.whenDefined('sd-spinner')
+    customElements.whenDefined('sd-loader')
   ]);
 
-  // Button, icon and spinner are registered now! Add
+  // Button, icon and loader are registered now! Add
   // the `ready` class so the UI fades in.
   document.body.classList.add('ready');
 </script>

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

@@ -41,7 +41,7 @@ Use the components tool by passing the args `component` and `example` for any of
 - part.summary-icon: The container that wraps the expand/collapse icons.
 - part.summary-border: The container that wraps the currently active accordions border.
 - part.content: The container that wraps the accordion content slot.
-- part.content\_\_slot: The accordion content slot.
+- part.content__slot: The accordion content slot.
 
 ## Guidelines
 

package/metadata/packages/components/sd-badge/stories/variant.md

@@ -24,7 +24,7 @@
   return generateTemplate({ args });
   }
   };
-  /\*\*
+  /**
   Use the `variant` attribute to set the badge’s variant:
 - `blue`
 - `green`

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

@@ -15,7 +15,7 @@ Use the components tool by passing the args `component` and `example` for any of
 
 ### Key Properties
 
-- prop.variant: |'neutral-100'|'primary'|'white'|'border-primary'|'border-white'|'primary|80'|'white|80'|'image', default='primary' — The brandshape's theme variant.
+- prop.variant: 'neutral-100'|'primary'|'white'|'border-primary'|'border-white'|'primary|80'|'white|80'|'image', default='primary' — The brandshape's theme variant.
 - prop.shapes: ('top'|'middle'|'bottom')[], default=['top', 'middle', 'bottom'] — Defines which shapes of the brandshape should be displayed.
 - prop.dir: 'ltr'|'rtl'|'auto' — The element's directionality.
 - prop.lang: string — The element's language.

package/metadata/packages/components/sd-brandshape/stories/variant.md

@@ -33,7 +33,6 @@ options: shapes
 },
 decorators: [
 (story: () => typeof html) => html`
-
 <style>
 body:not(:has(.sd-theme-ui-light, .sd-theme-ui-dark)) .slot {
 display: none;

package/metadata/packages/components/sd-breadcrumb-item/info.md

@@ -7,7 +7,7 @@
 ### Key Properties
 
 - prop.href: string, default='' — When not set, the breadcrumb will render as disabled.
-- prop.target: '\_blank'|'\_parent'|'\_self'|'\_top' — Tells the browser where to open the link. Only used when `href` is present.
+- prop.target: '_blank'|'_parent'|'_self'|'_top' — Tells the browser where to open the link. Only used when `href` is present.
 - prop.current: boolean, default=false — When set, the attribute `aria-current="page"` will be applied.
 - prop.dir: 'ltr'|'rtl'|'auto' — The element's directionality.
 - prop.lang: string — The element's language.

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

@@ -33,7 +33,7 @@ Use the components tool by passing the args `component` and `example` for any of
 - prop.value: string, default='' — The value of the button, submitted as a pair with the button's name as part of the form data, but only when this
   button is the submitter. This attribute is ignored when `href` is present.
 - prop.href: string, default='' — When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`.
-- prop.target: '\_blank'|'\_parent'|'\_self'|'\_top' — Tells the browser where to open the link. Only used when `href` is present.
+- prop.target: '_blank'|'_parent'|'_self'|'_top' — Tells the browser where to open the link. Only used when `href` is present.
 - prop.download: string|undefined — Tells the browser to download the linked file as this filename. Only used when `href` is present.
 - prop.form: string — The "form owner" to associate the button with. If omitted, the closest containing form will be used instead. The
   value of this attribute must be an id of a form in the same document or shadow root as the button.
@@ -41,7 +41,7 @@ Use the components tool by passing the args `component` and `example` for any of
 - prop.formEnctype [attr: formenctype]: 'application/x-www-form-urlencoded'|'multipart/form-data'|'text/plain' — Used to override the form owner's `enctype` attribute.
 - prop.formMethod [attr: formmethod]: 'post'|'get' — Used to override the form owner's `method` attribute.
 - prop.formNoValidate [attr: formnovalidate]: boolean — Used to override the form owner's `novalidate` attribute.
-- prop.formTarget [attr: formtarget]: '\_self'|'\_blank'|'\_parent'|'\_top' — Used to override the form owner's `target` attribute.
+- prop.formTarget [attr: formtarget]: '_self'|'_blank'|'_parent'|'_top' — Used to override the form owner's `target` attribute.
 - prop.validity: — Gets the validity state object
 - prop.validationMessage: — Gets the validation message
 - prop.dir: 'ltr'|'rtl'|'auto' — The element's directionality.

package/metadata/packages/components/sd-button/stories/visually-disabled.md

@@ -4,19 +4,19 @@ Use the `visually-disabled` attribute to style the component as if it was disabl
 
 ```html
 <div class="flex gap-12 h-[100px] mt-12">
-  <sd-tooltip content="Visually Disabled" trigger="hover focus" size="sm" placement="top">
+  <sd-tooltip content="Visually disabled" trigger="hover focus" size="sm" placement="top">
     <sd-button variant="primary" visually-disabled>Visually disabled</sd-button>
   </sd-tooltip>
 
-  <sd-tooltip content="Visually Disabled" trigger="hover focus" size="sm" placement="top">
+  <sd-tooltip content="Visually disabled" trigger="hover focus" size="sm" placement="top">
     <sd-button variant="secondary" visually-disabled>Visually disabled</sd-button>
   </sd-tooltip>
 
-  <sd-tooltip content="Visually Disabled" trigger="hover focus" size="sm" placement="top">
+  <sd-tooltip content="Visually disabled" trigger="hover focus" size="sm" placement="top">
     <sd-button variant="tertiary" visually-disabled>Visually disabled</sd-button>
   </sd-tooltip>
 
-  <sd-tooltip content="Visually Disabled" trigger="hover focus" size="sm" placement="top">
+  <sd-tooltip content="Visually disabled" trigger="hover focus" size="sm" placement="top">
     <sd-button variant="cta" visually-disabled>Visually disabled</sd-button>
   </sd-tooltip>
 </div>

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

@@ -27,7 +27,8 @@ Use the components tool by passing the args `component` and `example` for any of
 - prop.fade: boolean, default=false — When set, slides will fade between each other instead of scrolling.
 - prop.slidesPerPage [attr: slides-per-page]: number, default=1 — Specifies how many slides should be shown at a given time.
 - prop.slidesPerMove [attr: slides-per-move]: number, default=1 — Use `slides-per-move` to set how many slides the carousel advances when scrolling. This is useful when specifying a `slides-per-page` greater than one. By setting `slides-per-move` to the same value as `slides-per-page`, the carousel will advance by one page at a time.<br>
-<b>Note:</b><br>
+  <b>Note:</b><br>
+
 <li> The number of slides should be divisible by the number of `slides-per-page` to maintain consistent scroll behavior.</li>
 <li>Variations between `slides-per-move` and `slides-per-page` can lead to unexpected scrolling behavior. Keep your intended UX in mind when adjusting these values.</li>
 - prop.dir: 'ltr'|'rtl'|'auto' — The element's directionality.

package/metadata/packages/components/sd-datepicker/stories/visually-disabled.md

@@ -5,7 +5,7 @@ Use the `visually-disabled` attribute to style the component as if it was disa
 ```html
 <div class="max-w-[370px] h-[500px]">
   <sd-tooltip content="Visually Disabled" trigger="hover focus" size="sm" placement="top">
-    <sd-datepicker label="Label" placeholder="Visually Disabled" visually-disabled></sd-datepicker>
+    <sd-datepicker label="Label" placeholder="Visually disabled" visually-disabled></sd-datepicker>
   </sd-tooltip>
 </div>
 ```

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

@@ -2,13 +2,15 @@ Use the `headline` attribute to set the headline of the dialog. If you need to u
 
 ```html
 <div class="h-[40vh]">
-  <sd-button id="headline-drawer-trigger">Open Dialog</sd-button>
+  <sd-button id="headline-drawer-trigger">Open dialog</sd-button>
   <sd-dialog id="headline-dialog" open headline="Headline">
     <p class="sd-paragraph">
       Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
       dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam.
     </p>
-    <sd-button slot="footer">Button</sd-button>
+    <div slot="footer" class="flex sm:justify-end gap-4">
+      <sd-button>Button</sd-button>
+    </div>
   </sd-dialog>
 </div>
 <script type="module">

package/metadata/packages/components/sd-dialog/stories/no-close-button.md

@@ -3,13 +3,15 @@ Use the `no-close-button` attribute to hide the close button in the dialog.
 
 ```html
 <div class="h-[40vh]">
-  <sd-button id="no-close-drawer-trigger">Open Dialog</sd-button>
+  <sd-button id="no-close-drawer-trigger">Open dialog</sd-button>
   <sd-dialog id="no-close-dialog" headline="Headline" open no-close-button>
     <p class="sd-paragraph">
       Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
       dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam.
     </p>
-    <sd-button class="close-button" slot="footer" variant="primary">Button</sd-button>
+    <div slot="footer" class="flex sm:justify-end gap-4">
+      <sd-button class="close-button" variant="primary">Button</sd-button>
+    </div>
   </sd-dialog>
 </div>
 

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

@@ -1,49 +1,52 @@
 **Known browser issues:**
 
 - When the headline is set by slot instead of attribute, the dialog name is not being announced by VoiceOver in Chrome and Firefox.
-/
-export default {
-title: 'Components/sd-dialog',
-component: 'sd-dialog',
-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>`
-},
-{
-type: 'slot',
-name: 'headline',
-value: `<div slot="headline" class="slot slot--border slot--text h-16">Headline slot</div>`
-},
-{
-type: 'slot',
-name: 'footer',
-value: `<div slot="footer" class="slot slot--border slot--text h-16 w-full">Footer slot</div>`
-}
-]),
-argTypes,
-parameters: {
-...parameters,
-design: {
-type: 'figma',
-url: 'https://www.figma.com/design/YDktJcseQIIQbsuCpoKS4V/Component-Docs?node-id=2216-42723&node-type=section&t=5PpAC3TA3kYF7ufX-0'
-}
-}
-};
-export const Default = {
-render: (args: any) => {
-return html` <div style="height: 40vh;">
-${generateTemplate({
-args
-})}
-</div>`;
+  /
+  export default {
+  title: 'Components/sd-dialog',
+  component: 'sd-dialog',
+  tags: ['!dev', 'autodocs'],
+  args: overrideArgs([
+  {
+  type: 'slot',
+  name: 'default',
+  value: `<div class="slot slot--border slot--text h-16 w-full">Default slot</div>`
+  },
+  {
+  type: 'slot',
+  name: 'headline',
+  value: `<div slot="headline" class="slot slot--border slot--text h-16">Headline slot</div>`
+  },
+  {
+  type: 'slot',
+  name: 'footer',
+  value: `<div slot="footer" class="slot slot--border slot--text h-16 w-full">Footer slot</div>`
+  }
+  ]),
+  argTypes,
+  parameters: {
+  ...parameters,
+  design: {
+  type: 'figma',
+  url: 'https://www.figma.com/design/YDktJcseQIIQbsuCpoKS4V/Component-Docs?node-id=2216-42723&node-type=section&t=5PpAC3TA3kYF7ufX-0'
+  }
+  }
+  };
+  export const Default = {
+  render: (args: any) => {
+  return html`
+  <sd-button id="open-default-dialog">Open Dialog</sd-button>
+  ${generateTemplate({
+  args
+  })}
+
+<script>
+document.querySelector('#open-default-dialog').addEventListener('click', () => {
+document.querySelector('sd-dialog').show();
+});
+</script>
+
+`;
 }
 };
 /**
@@ -51,14 +54,16 @@ Use the `open` attribute to show the dialog.
 
 ```html
 <div class="h-[40vh]">
-  <sd-button id="drawer-trigger">Open Dialog</sd-button>
+  <sd-button id="drawer-trigger">Open dialog</sd-button>
   <sd-dialog id="dialog" open>
     <span slot="headline" class="sd-headline sd-headline--size-3xl">Lorem ipsum</span>
     <p class="sd-paragraph">
       Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
       dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam.
     </p>
-    <sd-button slot="footer">Button</sd-button>
+    <div slot="footer" class="flex sm:justify-end gap-4">
+      <sd-button>Button</sd-button>
+    </div>
   </sd-dialog>
 </div>
 <script type="module">

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-drawer/stories/no-header.md

@@ -1,7 +1,7 @@
 Use the `no-header` attribute to remove the header from the drawer.
 
 ```html
-<sd-button id="noHeaderButton">Open Drawer</sd-button>
+<sd-button id="noHeaderButton">Open drawer</sd-button>
 <div style="width: auto; height: 40vh; position: relative;">
   <sd-drawer open no-header placement="start" id="noHeaderDrawer" label="No header drawer">
     <div class="slot slot--border slot--text h-full">Default slot</div>

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

@@ -1,7 +1,7 @@
 Use the `open` attribute to set the state of the drawer to open.
 
 ```html
-<sd-button id="openButton">Open Drawer</sd-button>
+<sd-button id="openButton">Open drawer</sd-button>
 <div style="width: auto; height: 40vh; position: relative;">
   <sd-drawer open label="example" placement="start" id="openDrawer">
     <sd-button slot="header" variant="tertiary">
@@ -10,8 +10,8 @@ Use the `open` attribute to set the state of the drawer to open.
     </sd-button>
     <div class="slot slot--border slot--text h-full">Default slot</div>
     <div slot="footer" class="flex flex-col w-full gap-4">
-      <sd-button variant="primary">Primary Action</sd-button>
-      <sd-button variant="secondary">Secondary Action</sd-button>
+      <sd-button variant="primary">Primary action</sd-button>
+      <sd-button variant="secondary">Secondary action</sd-button>
     </div>
   </sd-drawer>
 </div>

package/metadata/packages/components/sd-drawer/stories/placement.md

@@ -4,14 +4,14 @@ Use the `placement` attribute to change the position of the drawer:
 - `end`: The drawer will be positioned on the right side of the screen.
 
 ```html
-<sd-button id="placementButton">Open Drawer</sd-button>
+<sd-button id="placementButton">Open drawer</sd-button>
 <div style="width: auto; height: 40vh; position: relative;">
   <sd-drawer open placement="start" id="placementDrawer" label="Placement drawer">
     <sd-input slot="header" type="search" size="lg" placeholder="Start typing" label="Search"></sd-input>
     <div class="slot slot--border slot--text h-full">Default slot</div>
     <div slot="footer" class="flex flex-col w-full gap-4">
-      <sd-button variant="primary">Primary Action</sd-button>
-      <sd-button variant="secondary">Secondary Action</sd-button>
+      <sd-button variant="primary">Primary action</sd-button>
+      <sd-button variant="secondary">Secondary action</sd-button>
     </div>
   </sd-drawer>
 </div>

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

@@ -52,7 +52,7 @@ Use the components tool by passing the args `component` and `example` for any of
 ### CSS Parts
 
 - part.base: The component's base wrapper.
-- part.base\_\_popup: The popup's exported `popup` part. Use this to target the dropdowns' popup container.
+- part.base__popup: The popup's exported `popup` part. Use this to target the dropdowns' popup container.
 - part.trigger: The container that wraps the trigger.
 - part.panel: The panel that gets shown when the dropdown is open.