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

package/metadata/packages/components/sd-file-selector/info.md

@@ -0,0 +1,139 @@
+## Overview
+
+`<sd-file-selector>` — Used to select a file by clicking or dragging a file into a drop-area.
+
+## API
+
+### Examples
+
+Use the components tool by passing the args `component` and `example` for any of these combinations:
+
+- component: sd-file-selector, example: variant
+- component: sd-file-selector, example: sizes
+- component: sd-file-selector, example: label
+- component: sd-file-selector, example: disabled
+- component: sd-file-selector, example: visually-disabled
+- component: sd-file-selector, example: help-text
+- component: sd-file-selector, example: multiple-files
+- component: sd-file-selector, example: hide-value
+- component: sd-file-selector, example: required
+- component: sd-file-selector, example: invalid
+- component: sd-file-selector, example: directory
+
+### Key Properties
+
+- prop.files: — The selected files as a `FileList` object. The `FileList` behaves like an array, so you can get the number of
+  selected files via its `length` property.
+- prop.name: string, default='' — The name of the file selector, submitted as a name/value pair with form data.
+- prop.title: string, default='' — The `title` attribute specifies extra information about an element most often as a default browser tooltip text when the mouse moves over the element.
+- prop.value: — The value of the file selector contains a string that represents the path of the selected file. If multiple
+  files are selected, the value represents the first file in the list. The only valid value when setting a file
+  input is an empty string.
+- prop.defaultValue: string, default='' — The default value of the form control. Primarily used for resetting the form control.
+- prop.size: 'sm'|'md'|'lg', default='lg' — The file selector's size.
+- prop.label: string, default='' — The file selector's label, this field is required to ensure accessibility. It is visually hidden by default, use the `showLabel` property to display it.
+- prop.showLabel [attr: show-label]: boolean, default=false — Visually displays the file selector's label.
+- prop.helpText [attr: help-text]: string, default='' — The file selector's help text. If you need to display HTML, use the `help-text` slot instead.
+- prop.disabled: boolean, default=false — Disables the file selector.
+- prop.visuallyDisabled [attr: visually-disabled]: boolean, default=false — Styles the input as if it was disabled and enables aria-disabled
+- prop.droparea [attr: drop-area]: boolean, default=false — Draw the file selector as a drop area.
+- prop.accept: string, default='' — Comma-separated list of supported file types (e.g. `.jpg,.png,image/*`).
+- prop.styleOnValid [attr: style-on-valid]: boolean, default=false — Shows success styles if the validity of the input is valid.
+- prop.capture: 'user'|'environment' — Specifies which camera to use for capture of image or video data. Works only when not using a droparea.
+- prop.multiple: boolean, default=false — Indicates whether the user can select more than one file. Has no effect if `webkitdirectory` is set.
+- prop.webkitdirectory: boolean, default=false — Indicates that the file selector should let the user select directories instead of files. Non-standard, but
+  supported by all major browsers.
+- prop.form: string, default='' — By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
+  to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
+  the same document or shadow root for this to work.
+- prop.required: boolean, default=false — Makes the input a required field.
+- prop.hideValue [attr: hide-value]: boolean, default=false — Suppresses the value from being displayed in the file selector.
+- prop.validity: — Gets the validity state object.
+- prop.validationMessage: — Gets the validation message.
+- prop.dir: 'ltr'|'rtl'|'auto' — The element's directionality.
+- prop.lang: string — The element's language.
+
+### Events
+
+- event.sd-blur: Emitted when the control loses focus.
+- event.sd-change: Emitted when an alteration to the control's value is committed by the user.
+- event.sd-error: Emitted when multiple files are selected via drag and drop, without the `multiple` property being set.
+- event.sd-focus: Emitted when the control gains focus.
+- event.sd-input: Emitted when the control receives input.
+
+### Slots
+
+- slot.label: The file selector's label. Alternatively, you can use the `label` attribute.
+- slot.help-text: Text that describes how to use the file selector. Alternatively, you can use the `help-text` attribute.
+
+### CSS Parts
+
+- part.form-control: The form control that wraps the label, input, and help text.
+- part.form-control-label: The label's wrapper.
+- part.form-control-input: The input's wrapper.
+- part.form-control-help-text: The help text's wrapper.
+- part.button-wrapper: The wrapper around the button and text value.
+- part.button: The sd-button acting as a file input trigger.
+- part.value: The chosen files or placeholder text for the file input.
+- part.droparea: The element wrapping the drop zone.
+- part.droparea-background: The background of the drop zone.
+- part.droparea-icon: The container that wraps the icon for the drop zone.
+- part.droparea-value: The text for the drop zone.
+- part.invalid-icon-message: The container that wraps the invalid icon and message.
+- part.invalid-icon: The invalid icon.
+- part.invalid-message: The invalid message.
+
+## Guidelines
+
+### Use Cases
+
+- Select files or documents as part of a form submission.
+- Attach supporting files in profile or account settings.
+- Replace or update assets in content management workflows.
+- Handle single or multiple file selections within any form or multi-step forms.
+
+#### Default
+
+Use the `default` variant when the select action is secondary to other form fields, or when space is limited.
+
+- Inline file selector in dense or compact forms.
+- Single-file selection where minimal visual weight is needed.
+- Flows where the selection action sits alongside other inputs.
+
+#### Drop Area
+
+Use the `drop-area` variant when file selector is the primary action on the page or step.
+
+- Dedicated selector steps in multi-step flows.
+- Scenarios where drag-and-drop is a likely or preferred interaction.
+- Select flows that support multiple files at once.
+
+### Rules
+
+<b>Do not mix both variants within the same form or flow.</b>
+
+### Label and Help Text
+
+- Always provide a descriptive label (e.g., "Select file", "Signed contract").
+- Use help text to communicate accepted file types and size limits
+- Do not rely on the drop-area copy alone to convey constraints.
+
+### Error Handling
+
+- Use error-text to surface validation errors: below the component (default variant) or next to each individual file selector when the "show selected files" attribute is active (drop-area variant).
+- Write error text in plain language with a clear solution (e.g., "The file is too large. Maximum allowed size is 5 MB.").
+
+### Per-error-type copy guidance
+
+- Provide distinct error messages for each failure scenario rather than a generic fallback — for example: wrong file type, file too large, empty file, too many files, or selection failure.
+
+### Background
+
+- Use light background options such as white, neutral-100, or primary-100.
+
+### Accessibility
+
+- Use `visually-disabled` to keep disabled elements focusable and tooltip-accessible.
+- Associate error text via `aria-describedby` so they are announced on focus.
+- Use the `visually-disabled` attribute to keep disabled elements focusable, hoverable, and able to show tooltips, as they’re otherwise removed from the tab order and inaccessible to screen readers.
+- A label must always be provided, even when it is visually hidden. The label is used to provide an accessible name for the file selector, ensuring that screen reader users can identify the purpose of the control.

package/metadata/packages/components/sd-file-selector/stories/directory.md

@@ -0,0 +1,6 @@
+Use the `webkitdirectory` attribute to allow directory selection.
+**Note:** As it is a non-standard attribute, browser support may vary. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/file#webkitdirectory) for more information.
+
+```html
+<sd-file-selector label="Select a directory to upload" show-label webkitdirectory></sd-file-selector>
+```

package/metadata/packages/components/sd-file-selector/stories/disabled.md

@@ -0,0 +1,5 @@
+Use the `disabled` attribute to disable the file selector.
+
+```html
+<sd-file-selector label="Select a file to upload" disabled></sd-file-selector>
+```

package/metadata/packages/components/sd-file-selector/stories/help-text.md

@@ -0,0 +1,19 @@
+Use the `help-text` attribute to provide additional context or instructions as:
+
+- file size restrictions
+- file format requirements
+- file selection limit
+  For help-text that contain HTML, use the help-text slot instead.
+
+```html
+<div class="flex flex-col gap-10">
+  <sd-file-selector
+    label="Select a file to upload"
+    help-text="Max file size is 3 MB. Only PDF, JPG and PNG files are supported."
+  >
+  </sd-file-selector>
+  <sd-file-selector label="Select a file to upload">
+    <div slot="help-text" class="text-lg">Max file size is 3 MB. Only PDF, JPG and PNG files are supported.</div>
+  </sd-file-selector>
+</div>
+```

package/metadata/packages/components/sd-file-selector/stories/hide-value.md

@@ -0,0 +1,5 @@
+Use the `hide-value` attribute where you don’t want to show the selected value.
+
+```html
+<sd-file-selector label="Select a file to upload" hide-value></sd-file-selector>
+```

package/metadata/packages/components/sd-file-selector/stories/invalid.md

@@ -0,0 +1,14 @@
+The component gets `invalid` state when the form is not valid.
+
+```html
+<form id="invalid-form">
+  <sd-file-selector id="invalid-file-selector" label="Select a file to upload" show-label> </sd-file-selector>
+</form>
+<script type="module">
+  await Promise.all([customElements.whenDefined('sd-file-selector')]).then(() => {
+    const fileSelector = document.getElementById('invalid-file-selector');
+    fileSelector.setCustomValidity('Please select a file.');
+    fileSelector.reportValidity();
+  });
+</script>
+```

package/metadata/packages/components/sd-file-selector/stories/label.md

@@ -0,0 +1,13 @@
+Use the `label` attribute to add an accessible label to the file selector.
+For labels that contain HTML, use the label slot instead.
+This label is visually hidden by default, to display it, use the `show-label` attribute.
+
+```html
+<div class="flex flex-col gap-10">
+  <sd-file-selector label="Select a file to upload"></sd-file-selector>
+  <sd-file-selector label="Select a file to upload" show-label></sd-file-selector>
+  <sd-file-selector label="Select a file to upload" show-label>
+    <div slot="label" class="text-lg">Label slot</div>
+  </sd-file-selector>
+</div>
+```

package/metadata/packages/components/sd-file-selector/stories/multiple-files.md

@@ -0,0 +1,5 @@
+Use the `multiple` attribute to allow multiple files selection.
+
+```html
+<sd-file-selector label="Select a file to upload" multiple></sd-file-selector>
+```

package/metadata/packages/components/sd-file-selector/stories/required.md

@@ -0,0 +1,6 @@
+Use the `required` attribute to make the file selector a required field. This can be used for form validation purposes.
+**Note:** For accessibility reasons, required fields must always display a visible label and value.
+
+```html
+<sd-file-selector label="Required" show-label required></sd-file-selector>
+```

package/metadata/packages/components/sd-file-selector/stories/sizes.md

@@ -0,0 +1,14 @@
+Use the `size` attribute to change the size:
+
+- `lg` (default)
+- `md`
+- `sm`
+  On drop-area variant “md” and “sm” sizes are not available.
+
+```html
+<div class="flex flex-col gap-10">
+  <sd-file-selector size="lg" label="sd-file-selector large size"></sd-file-selector>
+  <sd-file-selector size="md" label="sd-file-selector medium size"></sd-file-selector>
+  <sd-file-selector size="sm" label="sd-file-selector small size"></sd-file-selector>
+</div>
+```

package/metadata/packages/components/sd-file-selector/stories/variant.md

@@ -0,0 +1,8 @@
+Use the `drop-area` attribute to switch to a drop area appearance.
+
+```html
+<div class="flex flex-col gap-10">
+  <sd-file-selector label="sd-file-selector default variant"></sd-file-selector>
+  <sd-file-selector drop-area label="sd-file-selector drop area variant"></sd-file-selector>
+</div>
+```

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

@@ -0,0 +1,9 @@
+Use the `visually-disabled` attribute to style the component as if it was disabled and enable `aria-disabled` to allow it to be reachable by screen readers. When using this attribute, make sure to provide ways to inform the user why the element is disabled and how to enable it. This can be done by using the `help-text` attribute or wrapping the element in a sd-tooltip. Disabling elements is not recommended for accessibility reasons.
+
+```html
+<div class="w-[250px] pt-12">
+  <sd-tooltip content="Visually disabled" trigger="hover focus" size="sm" placement="top">
+    <sd-file-selector value="Visually disabled" label="Select a file to upload" visually-disabled></sd-file-selector
+  ></sd-tooltip>
+</div>
+```

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

@@ -8,11 +8,13 @@
 
 Use the components tool by passing the args `component` and `example` for any of these combinations:
 
+- component: sd-header, example: shadow
 - component: sd-header, example: fixed
 
 ### Key Properties
 
-- prop.fixed: boolean, default=false — Determines whether the header is fixed or not. If the header is fixed at the top of the page, a shadow is shown underneath.
+- prop.fixed: boolean, default=false — Determines whether the header is fixed or not. If the header is fixed, it stays at the top of the page while scrolling.
+- prop.shadow: boolean, default=false — Determines whether a drop shadow is shown underneath the header.
 - prop.dir: 'ltr'|'rtl'|'auto' — The element's directionality.
 - prop.lang: string — The element's language.
 
@@ -28,8 +30,8 @@ Use the components tool by passing the args `component` and `example` for any of
 
 ### Use Cases
 
-- Display primary navigation links for easy access to different sections of the website.
 - Showcase the company logo prominently to reinforce brand identity.
+- Display primary navigation links for easy access to different sections of the website.
 - Include links for user account access.
 - Provide a prominent search function to help users quickly find content.
 

package/metadata/packages/components/sd-header/stories/shadow.md

@@ -0,0 +1,9 @@
+Use the `shadow` attribute to show a drop shadow.
+
+```html
+<div style="height: 100px;">
+  <sd-header shadow>
+    <div class="slot slot--border slot--text">Default slot</div>
+  </sd-header>
+</div>
+```

package/metadata/packages/components/sd-icon/stories/custom-libraries.md

@@ -16,7 +16,7 @@ Here's an example that registers an icon library located in the `/assets/icons`
 If you use the IIFE bundle, you have to access the `registerIconLibrary()` function from the `SolidComponents` global.
 
 ```html
-<script src="https://solid-design-system.fe.union-investment.de/components/%COMPONENTS-VERSION%/cdn/solid-components.iife.js"></script>
+<script src="https://your-cdn.example.com/components/%COMPONENTS-VERSION%/cdn/solid-components.iife.js"></script>
 <script>
   const { registerIconLibrary } = window['SolidComponents'];
   registerIconLibrary('my-icons', {

package/metadata/packages/components/sd-icon/stories/libraries.md

@@ -19,8 +19,8 @@ Solid ships with three public icon libraries, `default`, `sd-status-assets`, and
     <h3 class="sd-headline sd-headline--size-base mb-4">Status Library</h3>
     <div class="flex gap-6">
       <sd-icon color="primary" library="sd-status-assets" name="status-check"></sd-icon>
-      <sd-icon color="primary" library="sd-status-assets" name="status-exclamation"></sd-icon>
       <sd-icon color="primary" library="sd-status-assets" name="status-close"></sd-icon>
+      <sd-icon color="primary" library="sd-status-assets" name="status-exclamation"></sd-icon>
     </div>
   </div>
 

package/metadata/packages/components/sd-icon/stories/name.md

@@ -17,7 +17,7 @@ Icons can be used to indicate an action or to represent content.
   return generateTemplate({ args });
   }
   };
-  /\*\*
+  /**
   Use the `name` attribute to change the icon. Checkout these lists of Union Investment's icons for available names:
 - [Content Icons](?path=/story/components-sd-icon-default--library-default-content)
 - [System Icons](?path=/story/components-sd-icon-default--library-default-system)

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

@@ -33,10 +33,10 @@ Use the components tool by passing the args `component` and `example` for any of
 
 ### Key Properties
 
-- prop.type: |'date'|'datetime-local'|'email'|'number'|'password'|'search'|'tel'|'text'|'time'|'url', default='text' — The type of input. Works the same as a native `<input>` element, but only a subset of types are supported. Defaults
+- prop.type: 'date'|'datetime-local'|'email'|'number'|'password'|'search'|'tel'|'text'|'time'|'url', default='text' — The type of input. Works the same as a native `<input>` element, but only a subset of types are supported. Defaults
   to `text`.
 - prop.size: 'lg'|'md'|'sm', default='lg' — The input's size.
-- prop.inputmode: |'none'|'text'|'decimal'|'numeric'|'tel'|'search'|'email'|'url' — Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual
+- prop.inputmode: 'none'|'text'|'decimal'|'numeric'|'tel'|'search'|'email'|'url' — Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual
   keyboard on supportive devices.
 - prop.value: string, default='' — The current value of the input, submitted as a name/value pair with form data.
 - prop.defaultValue: string, default='' — The default value of the form control. Primarily used for resetting the form control.
@@ -64,11 +64,12 @@ Use the components tool by passing the args `component` and `example` for any of
 - prop.pattern: string — A regular expression pattern to validate input against.
 - prop.step: number|'any' — Specifies the granularity that the value must adhere to, or the special value `any` which means no stepping is
   implied, allowing any numeric value. Only applies to date and number input types.
-- prop.autocapitalize: |'off'|'none'|'on'|'sentences'|'words'|'characters' — Controls whether and how text input is automatically capitalized as it is entered by the user.
+- prop.autocapitalize: 'off'|'none'|'on'|'sentences'|'words'|'characters' — Controls whether and how text input is automatically capitalized as it is entered by the user.
+- prop.autocorrect: boolean — Indicates whether the browser's autocorrect feature is on or off.
 - prop.autocomplete: string — Specifies what permission the browser has to provide assistance in filling out form field values. Refer to
   [this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values.
 - prop.autofocus: boolean — Indicates that the input should receive focus on page load.
-- prop.enterkeyhint: |'enter'|'done'|'go'|'next'|'previous'|'search'|'send' — Used to customize the label or icon of the Enter key on virtual keyboards.
+- prop.enterkeyhint: 'enter'|'done'|'go'|'next'|'previous'|'search'|'send' — Used to customize the label or icon of the Enter key on virtual keyboards.
 - prop.styleOnValid [attr: style-on-valid]: boolean, default=false — Shows success styles if the validity of the input is valid.
 - prop.spellcheck: boolean, default=true — Enables spell checking on the input.
 - prop.valueAsDate: — Gets or sets the current value as a `Date` object. Returns `null` if the value can't be converted.

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

@@ -23,7 +23,7 @@ Use the components tool by passing the args `component` and `example` for any of
 - prop.inverted: boolean, default=false — Inverts the link.
 - prop.href: string, default='' — When not set, the link will render as disabled.
 - prop.visuallyDisabled [attr: visually-disabled]: boolean, default=false — Styles the link as if it was disabled and enables aria-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.download: string|undefined — Tells the browser to download the linked file as this filename. Only used when `href` is present.
 - prop.dir: 'ltr'|'rtl'|'auto' — The element's directionality.
 - prop.lang: string — The element's language.

package/metadata/packages/components/sd-link/stories/as-link.md

@@ -6,7 +6,7 @@
 <div class="flex gap-12">
   <sd-link href="https://solid-design-system.fe.union-investment.de/docs/?path=/docs/docs-general-introduction--docs"
     >Link</sd-link
-  ><sd-link href="https://union-investment.com" target="_blank">New Window</sd-link
+  ><sd-link href="https://union-investment.com" target="_blank">New window</sd-link
   ><sd-link href="./placeholders/src/images/collaboration.jpg" download>Download</sd-link>
 </div>
 ```

package/metadata/packages/components/sd-link/stories/icon.md

@@ -4,10 +4,10 @@ Use the `icon-left` and `icon-right` slots to add system icons to each side of t
 <div class="flex gap-12">
   <sd-link href="https://solid-design-system.fe.union-investment.de/docs/" standalone>
     <sd-icon name="system/image" slot="icon-left"></sd-icon>
-    Icon Left
+    Icon left
   </sd-link>
   <sd-link href="https://solid-design-system.fe.union-investment.de/docs/" standalone>
-    Icon Right
+    Icon right
     <sd-icon name="system/image" slot="icon-right"></sd-icon>
   </sd-link>
 </div>

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

@@ -4,13 +4,13 @@ Use the `visually-disabled` attribute to style the component as if it was disabl
 
 ```html
 <div class="flex gap-12 h-[100px] pt-12">
-  <sd-tooltip content="Visually Disabled" trigger="hover focus" size="sm">
+  <sd-tooltip content="Visually disabled" trigger="hover focus" size="sm">
     <sd-link
       size="lg"
       href="https://solid-design-system.fe.union-investment.de/docs/"
       visually-disabled
       class="visually-disabled-link"
-      >Visually Disabled</sd-link
+      >Visually disabled</sd-link
     >
   </sd-tooltip>
 </div>

package/metadata/packages/components/sd-map-marker/info.md

@@ -22,7 +22,7 @@ Use the components tool by passing the args `component` and `example` for any of
 - prop.animated: boolean, default=false — The map-marker's is animated when displayed.
 - prop.notInteractive [attr: not-interactive]: boolean, default=false — Determines if the map-marker is interactive.
 - 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.label: string, default='' — Only relevant when map-marker is interactive.
   When set, it will be used to announce the name of the map-marker to screenreaders,
   otherwise, screenreaders will announce the content inside the default slot.

package/metadata/packages/components/sd-menu/stories/grouping.md

@@ -4,7 +4,7 @@ Use dividers to group menu-items in a menu.
 <sd-dropdown distance="4" rounded>
   <sd-button variant="secondary" slot="trigger">
     Menu
-    <sd-icon library="_internal" name="chevron-down" slot="icon-right"></sd-icon>
+    <sd-icon library="_internal" name="chevron-bottom" slot="icon-right"></sd-icon>
   </sd-button>
   <sd-menu>
     <sd-menu-item>Menu item 1</sd-menu-item>

package/metadata/packages/components/sd-menu/stories/icon.md

@@ -44,13 +44,12 @@ return html` <div class="h-[350px]">
 <sd-dropdown distance="4" rounded open>
 <sd-button variant="secondary" slot="trigger">
 Menu
-<sd-icon library="_internal" name="chevron-down" slot="icon-right"></sd-icon>
+<sd-icon library="_internal" name="chevron-bottom" slot="icon-right"></sd-icon>
 </sd-button>
 ${generateTemplate({
 args
 })}
 </sd-dropdown>
-
 </div>`;
 }
 };

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

@@ -27,7 +27,7 @@ Use the components tool by passing the args `component` and `example` for any of
 - prop.vertical: boolean, default=false — The navigation item's orientation. If false, properties below this point are not used.
 - prop.size: 'md'|'lg'|'sm', default='md' — The navigation item's font size.
 - prop.href: string — The navigation item's href target. If provided, the navigation item will use an anchor tag otherwise it will use a button tag. The 'children' slot and accordion behavior will be ignored if an 'href' is provided.
-- prop.target: '\_blank'|'\_parent'|'\_self'|'\_top' — Tells the browser where to open the link. Only used when `href` is defined.
+- prop.target: '_blank'|'_parent'|'_self'|'_top' — Tells the browser where to open the link. Only used when `href` is defined.
 - prop.download: string|undefined — Tells the browser to download the linked file as this filename. Only used when `href` is defined.
 - prop.current: boolean, default=false — Indicates that the navigation item is currently selected. The aria-current attribute is set to "page" on the host if true.
 - prop.disabled: boolean, default=false — Disables the navigation item.
@@ -48,7 +48,7 @@ Use the components tool by passing the args `component` and `example` for any of
 ### Slots
 
 - slot.default: The navigation item's label.
-- slot.description: \*Vertical only: Slot used to provide a description for the navigation item.
+- slot.description: *Vertical only: Slot used to provide a description for the navigation item.
 - slot.children: Slot used to provide nested child navigation elements. If provided, details and summary elements will be used. A chevron will be shown on the right side regardless of the chevron property.
 
 ### CSS Parts

package/metadata/packages/components/sd-navigation-item/stories/accordion.md

@@ -7,9 +7,9 @@ Add `children` slot to the navigation item to create an accordion.
 
 ```html
 <sd-navigation-item vertical>
-  <div>Vertical Navigation with Accordion</div>
-  <sd-navigation-item vertical indented slot="children"> Sub Navigation 1 </sd-navigation-item>
-  <sd-navigation-item vertical indented slot="children"> Sub Navigation 2 </sd-navigation-item>
-  <sd-navigation-item vertical indented slot="children"> Sub Navigation 3 </sd-navigation-item>
+  <div>Vertical navigation with accordion</div>
+  <sd-navigation-item vertical indented slot="children"> Sub navigation 1 </sd-navigation-item>
+  <sd-navigation-item vertical indented slot="children"> Sub navigation 2 </sd-navigation-item>
+  <sd-navigation-item vertical indented slot="children"> Sub navigation 3 </sd-navigation-item>
 </sd-navigation-item>
 ```

package/metadata/packages/components/sd-navigation-item/stories/chevron.md

@@ -6,5 +6,5 @@ Use the `chevron` attribute to add a chevron to the navigation item.
 - `Accordion` variant always show up / down chevron to reflect open state.
 
 ```html
-<sd-navigation-item vertical chevron>Vertical Navigation with Chevron</sd-navigation-item>
+<sd-navigation-item vertical chevron>Vertical navigation with chevron</sd-navigation-item>
 ```

package/metadata/packages/components/sd-navigation-item/stories/current.md

@@ -2,7 +2,7 @@ Use the `current` attribute to change the navigation item to a current state and
 
 ```html
 <div class="flex flex-col gap-6">
-  <sd-navigation-item class="w-[174px]" current>Current Horizontal</sd-navigation-item>
-  <sd-navigation-item vertical current>Current Vertical</sd-navigation-item>
+  <sd-navigation-item class="w-[174px]" current>Current horizontal</sd-navigation-item>
+  <sd-navigation-item vertical current>Current vertical</sd-navigation-item>
 </div>
 ```

package/metadata/packages/components/sd-navigation-item/stories/description.md

@@ -3,7 +3,7 @@ Use the `description` slot to provide a description for the navigation item.
 
 ```html
 <sd-navigation-item vertical>
-  Vertical Navigation with Description
+  Vertical navigation with description
   <p slot="description" class="sd-paragraph">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh justo ullam.
   </p>

package/metadata/packages/components/sd-navigation-item/stories/disabled.md

@@ -1,5 +1,5 @@
 Use the `disabled` attribute to disable the navigation item.
 
 ```html
-<sd-navigation-item disabled>Disabled Navigation</sd-navigation-item>
+<sd-navigation-item disabled>Disabled navigation</sd-navigation-item>
 ```

package/metadata/packages/components/sd-navigation-item/stories/divider.md

@@ -2,5 +2,5 @@ Use the `divider` attribute to add a divider above the navigation item.
 **Hint:** Only works with `vertical` attribute.
 
 ```html
-<sd-navigation-item vertical divider>Vertical Navigation with Divider</sd-navigation-item>
+<sd-navigation-item vertical divider>Vertical navigation with divider</sd-navigation-item>
 ```

package/metadata/packages/components/sd-navigation-item/stories/indented.md

@@ -3,6 +3,6 @@ Use `indented` attribute to add padding to the left side.
 
 ```html
 <div>
-  <sd-navigation-item vertical indented>Indented Navigation</sd-navigation-item>
+  <sd-navigation-item vertical indented>Indented navigation</sd-navigation-item>
 </div>
 ```

package/metadata/packages/components/sd-navigation-item/stories/orientation.md

@@ -1,6 +1,6 @@
 Use the `vertical` attribute to set the axis of the navigation-item.
 
 ```html
-<sd-navigation-item>Horizontal Navigation</sd-navigation-item>
-<sd-navigation-item vertical>Vertical Navigation</sd-navigation-item>
+<sd-navigation-item>Horizontal navigation</sd-navigation-item>
+<sd-navigation-item vertical>Vertical navigation</sd-navigation-item>
 ```

package/metadata/packages/components/sd-navigation-item/stories/relaxed.md

@@ -3,6 +3,6 @@ Use `relaxed` attribute to add padding to both sides.
 
 ```html
 <div class="w-[400px]">
-  <sd-navigation-item vertical relaxed>Relaxed Navigation</sd-navigation-item>
+  <sd-navigation-item vertical relaxed>Relaxed navigation</sd-navigation-item>
 </div>
 ```

package/metadata/packages/components/sd-navigation-item/stories/separated.md

@@ -6,9 +6,9 @@ Use the `separated` attribute, to have more that only one action. It is possible
 
 ```html
 <sd-navigation-item href="https://www.union-investment.de/" target="_blank" vertical separated>
-  <div>Vertical Navigation Separated</div>
-  <sd-navigation-item vertical indented slot="children"> Sub Navigation 1 </sd-navigation-item>
-  <sd-navigation-item vertical indented slot="children"> Sub Navigation 2 </sd-navigation-item>
-  <sd-navigation-item vertical indented slot="children"> Sub Navigation 3 </sd-navigation-item>
+  <div>Vertical navigation separated</div>
+  <sd-navigation-item vertical indented slot="children"> Sub navigation 1 </sd-navigation-item>
+  <sd-navigation-item vertical indented slot="children"> Sub navigation 2 </sd-navigation-item>
+  <sd-navigation-item vertical indented slot="children"> Sub navigation 3 </sd-navigation-item>
 </sd-navigation-item>
 ```

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

@@ -50,8 +50,8 @@ Use the components tool by passing the args `component` and `example` for any of
 - part.icon: The container that wraps the optional icon.
 - part.content: The container that wraps the notifications's main content and the close button.
 - part.message: The container that wraps the notifications's main content.
-- part.duration-indicator\_\_elapsed: The current duration indicator.
-- part.duration-indicator\_\_total: The total duration indicator.
+- part.duration-indicator__elapsed: The current duration indicator.
+- part.duration-indicator__total: The total duration indicator.
 - part.close-button: The close button, an `<sd-icon-button>`.
 
 ## Guidelines

package/metadata/packages/components/sd-notification/stories/duration.md

@@ -5,6 +5,11 @@ Use the `duration` attribute to set the duration (in milliseconds) of the notifi
 <sd-notification id="duration-example" variant="info" open duration="5000">
   Notification will self close after 5 seconds
 </sd-notification>
+<style>
+  sd-notification#duration-example::part(base) {
+    margin-top: 0.5rem;
+  }
+</style>
 <script>
   var notificationDuration = document.querySelector('#duration-example');
   notificationDuration.addEventListener('sd-after-hide', () => {

package/metadata/packages/components/sd-notification/stories/toast-notification.md

@@ -24,6 +24,7 @@ Use the `toastStack` attribute to change the position of the toast notifications
 
 - It requires the use of the `toast` method to work. Click on the `Show code` button to see the JavaScript code responsible for generating the toast notification.
 - Click on one of the buttons below to see the corresponding toast notification.
+
 <h4 class="sd-headline sd-headline--size-lg">Toast placement top right</h4>
 Use the `data-notification-position` attribute with the value `top-right` to align the toast to the top right.