@solid-design-system/mcp 0.0.1

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

@@ -0,0 +1,68 @@
+## Overview
+
+`<sd-menu>` — Used as a list of choices to the user, such as a set of actions or functions.
+
+## API
+
+### Examples
+
+Use the components tool by passing the args `component` and `example` for any of these combinations:
+
+- component: sd-menu, example: icon
+- component: sd-menu, example: checkmark
+- component: sd-menu, example: submenu
+- component: sd-menu, example: grouping
+- component: sd-menu, example: disabled
+
+### Key Properties
+
+- prop.dir: 'ltr'|'rtl'|'auto' — The element's directionality.
+- prop.lang: string — The element's language.
+
+### Events
+
+- event.sd-select: Emitted when a menu item is selected.
+
+### Slots
+
+- slot.default: The menu's content.
+
+## Guidelines
+
+### Use Cases
+
+- Navigate between different sections or pages.
+- Access various functions or features quickly.
+- Switch between user account settings or preferences.
+- Provide shortcuts for frequently used tasks.
+
+### Rules
+
+### Labels and Value Display
+
+- Use clear, descriptive labels to ensure users know what to expect.
+- Use icons alongside text for better visual identification of actions.
+- Avoid overwhelming users with too many menu items. Keep it concise and focused.
+
+### Structure and Organization
+
+- Organize menu items in a logical, hierarchical order to enhance navigation.
+- Prioritize frequently used functions at the top of the menu for quicker access.
+- Don’t use multiple menus with similar content on the same screen. Keep the navigation consistent and clear.
+
+### Behavior
+
+- Ensure the menu is easy to access and appears consistently across the platform.
+- Provide visual feedback (e.g., hover, active state) to indicate interactivity.
+- Ensure the menu is responsive and adapts well to different screen sizes and devices.
+
+### Accessibility
+
+- Keyboard Navigation: Ensure the menu can be opened, navigated, and closed using keyboard shortcuts (e.g., arrow keys to move between items, Enter to select, Esc to close).
+- Screen Reader Compatibility: Use appropriate ARIA roles, such as role="menu" for the menu container, role="menuitem" for each item, and aria-haspopup="true" for any submenu trigger. Provide descriptive, concise labels for each menu item.
+- Focus Management: Ensure that focus is automatically directed to the first menu item when the menu is opened. When the menu is closed, focus should return to the element that triggered the menu (e.g., button or link).
+- Visible Focus Indicators: Ensure all interactive menu items have visible focus states for keyboard and screen reader users. This could be through a color change, outline, or other visual indicators.
+- Limit Nested Menus: Avoid deep nesting of menus. Restrict the depth of nested menus to improve usability for screen readers and keyboard navigation.
+  Avoid Truncated Labels: Ensure that menu item labels are fully visible and not truncated. If the text is too long, consider using ellipses (...) and providing a tooltip or accessible description to display the full label.
+- Accessible Shortcuts: If the menu includes keyboard shortcuts or accelerators, ensure these are clearly communicated in the UI (e.g., with tooltips or labels like “Ctrl + S” for save) and accessible to screen readers.
+- Descriptive State Announcements: For dynamic menu behaviors (e.g., opening/closing or item selection), ensure that screen readers announce changes in state, such as "Menu opened" or "Option selected." Use ARIA live regions or alerts as needed.

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

@@ -0,0 +1,12 @@
+Use the `type` attribute with the value `checkbox` to create a menu item that will toggle on and off when selected.
+**Hint:** use the `checked` attribute to set the initial state.
+
+```html
+<div class="w-[180px]">
+  <sd-menu>
+    <sd-menu-item type="checkbox" checked>Menu item 1</sd-menu-item>
+    <sd-menu-item type="checkbox" checked>Menu item 2</sd-menu-item>
+    <sd-menu-item type="checkbox">Menu item 3</sd-menu-item>
+  </sd-menu>
+</div>
+```

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

@@ -0,0 +1,12 @@
+Use the `disabled` attribute to disable the menu item so it cannot be selected.
+
+```html
+<sd-dropdown distance="4" rounded>
+  <sd-button variant="secondary" slot="trigger">Menu</sd-button>
+  <sd-menu>
+    <sd-menu-item disabled>Disabled menu item 1</sd-menu-item>
+    <sd-menu-item>Menu item 2</sd-menu-item>
+    <sd-menu-item disabled>Disabled menu item 3</sd-menu-item>
+  </sd-menu>
+</sd-dropdown>
+```

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

@@ -0,0 +1,20 @@
+Use dividers to group menu-items in a menu.
+
+```html
+<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-button>
+  <sd-menu>
+    <sd-menu-item>Menu item 1</sd-menu-item>
+    <sd-menu-item>Menu item 2</sd-menu-item>
+    <sd-menu-item>Menu item 3</sd-menu-item>
+    <sd-menu-item>Menu item 4</sd-menu-item>
+    <sd-menu-item>Menu item 5</sd-menu-item>
+    <sd-divider></sd-divider>
+    <sd-menu-item>Menu item 6</sd-menu-item>
+    <sd-menu-item>Menu item 7</sd-menu-item>
+  </sd-menu>
+</sd-dropdown>
+```

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

@@ -0,0 +1,80 @@
+**Note:** When first loading this page, the `focus-visible` styles applied to the `sd-menu-item` component will be visible. This is a browser specific behaviour. After you interact with the page, the correct styles will be displayed. This is only happening when the `sd-menu` is rendered in isolation, if rendered inside a `sd-dropdown` it will not happen.
+/
+export default {
+tags: ['!dev', 'autodocs'],
+title: 'Components/sd-menu',
+component: 'sd-menu',
+args: overrideArgs([
+{
+type: 'slot',
+name: 'default',
+value: `
+<sd-menu-item>Menu item 1</sd-menu-item>
+<sd-menu-item>Menu item 2</sd-menu-item>
+<sd-menu-item>Menu item 3</sd-menu-item>`
+}
+]),
+argTypes,
+parameters: {
+...parameters,
+design: {
+type: 'figma',
+url: 'https://www.figma.com/design/YDktJcseQIIQbsuCpoKS4V/Solid-DS-%E2%80%93-Component-Docs?node-id=15967-5252&t=ZM8naV6M5izZj27w-0'
+}
+},
+decorators: [
+(story: any) =>
+html`<style>
+.innerZoomElementWrapper #story--components-sd-menu--default,
+#anchor--components-sd-menu--default .innerZoomElementWrapper,
+#anchor--components-sd-menu--icon .innerZoomElementWrapper,
+#anchor--components-sd-menu--checkmark .innerZoomElementWrapper,
+#anchor--components-sd-menu--submenu .innerZoomElementWrapper,
+#anchor--components-sd-menu--grouping .innerZoomElementWrapper,
+#anchor--components-sd-menu--disabled .innerZoomElementWrapper {
+min-height: 450px;
+}
+</style>
+${story()}`
+] as unknown
+};
+export const Default = {
+render: (args: any) => {
+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-button>
+${generateTemplate({
+args
+})}
+</sd-dropdown>
+
+</div>`;
+}
+};
+/**
+Use the `icon-indent` slot to add system icons.
+
+```html
+<sd-dropdown distance="4" rounded>
+  <sd-button variant="secondary" slot="trigger">
+    <sd-icon name="system/more-functions" label="Icon only"></sd-icon>
+  </sd-button>
+  <sd-menu>
+    <sd-menu-item>
+      <sd-icon name="system/image" slot="icon-indent"></sd-icon>
+      Menu item 1
+    </sd-menu-item>
+    <sd-menu-item>
+      <sd-icon name="system/image" slot="icon-indent"></sd-icon>
+      Menu item 2
+    </sd-menu-item>
+    <sd-menu-item>
+      <sd-icon name="system/image" slot="icon-indent"></sd-icon>
+      Menu item 3
+    </sd-menu-item>
+  </sd-menu>
+</sd-dropdown>
+```

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

@@ -0,0 +1,18 @@
+To create a submenu, nest an `<sd-menu slot="submenu">` in any menu item.
+
+```html
+<sd-dropdown distance="4" rounded>
+  <sd-navigation-item slot="trigger" vertical>Menu</sd-navigation-item>
+  <sd-menu>
+    <sd-menu-item>Menu item 1</sd-menu-item>
+    <sd-menu-item>Menu item 2</sd-menu-item>
+    <sd-menu-item>
+      Menu item 3
+      <sd-menu slot="submenu">
+        <sd-menu-item value="find">Submenu item 1</sd-menu-item>
+        <sd-menu-item value="find-previous">Submenu item 2</sd-menu-item>
+      </sd-menu>
+    </sd-menu-item>
+  </sd-menu>
+</sd-dropdown>
+```

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

@@ -0,0 +1,36 @@
+## Overview
+
+`<sd-menu-item>` — Used to provide options for the user to pick from a menu.
+
+## API
+
+### Examples
+
+Use the components tool by passing the args `component` and `example` for any of these combinations:
+
+- component: sd-menu-item, example: icon-indent
+- component: sd-menu-item, example: checkmark
+- component: sd-menu-item, example: disabled
+
+### Key Properties
+
+- prop.type: 'normal'|'checkbox', default='normal' — The type of menu item to render. To use `checked`, this value must be set to `checkbox`.
+- prop.checked: boolean, default=false — Draws the item in a checked state.
+- prop.disabled: boolean, default=false — Draws the menu item in a disabled state, preventing selection.
+- prop.value: string, default='' — A unique value to store in the menu item. This can be used as a way to identify menu items when selected.
+- prop.dir: 'ltr'|'rtl'|'auto' — The element's directionality.
+- prop.lang: string — The element's language.
+
+### Slots
+
+- slot.default: The menu item's label.
+- slot.icon-indent: Used to prepend an icon or similar element to the menu item.
+- slot.submenu: Used to denote a nested menu.
+
+### CSS Parts
+
+- part.base: The component's base wrapper.
+- part.checked-icon: The icon shown when the menu item is checked.
+- part.icon-indent: The icon shown when the menu item has an indent.
+- part.label: The menu item's label.
+- part.submenu-icon: The icon shown when the menu item has a submenu.

package/metadata/packages/components/sd-menu-item/stories/checkmark.md

@@ -0,0 +1,5 @@
+Set the `type` attribute to ”checkbox” to create a menu item that will toggle on and off when selected. You can use the `checked` attribute to set the initial state.
+
+```html
+<sd-menu-item type="checkbox" checked> Menu item 1 </sd-menu-item>
+```

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

@@ -0,0 +1,5 @@
+Use the `disabled` attribute to disable the menu item so it cannot be selected.
+
+```html
+<sd-menu-item disabled> Menu item 1 </sd-menu-item>
+```

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

@@ -0,0 +1,8 @@
+Use the `icon-indent` slot to add system icons.
+
+```html
+<sd-menu-item>
+  Menu item 1
+  <sd-icon name="system/image" slot="icon-indent"></sd-icon>
+</sd-menu-item>
+```

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

@@ -0,0 +1,98 @@
+## Overview
+
+`<sd-navigation-item>` — Used to facilitate seamless page transitions and help users orient themselves within the application.
+
+## API
+
+### Examples
+
+Use the components tool by passing the args `component` and `example` for any of these combinations:
+
+- component: sd-navigation-item, example: size
+- component: sd-navigation-item, example: orientation
+- component: sd-navigation-item, example: as-link
+- component: sd-navigation-item, example: current
+- component: sd-navigation-item, example: disabled
+- component: sd-navigation-item, example: stacked
+- component: sd-navigation-item, example: divider
+- component: sd-navigation-item, example: chevron
+- component: sd-navigation-item, example: accordion
+- component: sd-navigation-item, example: separated
+- component: sd-navigation-item, example: description
+- component: sd-navigation-item, example: indented
+- component: sd-navigation-item, example: relaxed
+
+### Key Properties
+
+- 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.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.
+- prop.stacked: boolean, default=false — Stacks the navigation-item in a vertical layout. Only used if `vertical` is false.
+- prop.chevron: boolean, default=false — Appends a chevron to the right side of a navigation item. Only used if `vertical` is true.
+- prop.relaxed: boolean, default=false — Adds additional padding to navigation item's left and right sides. Only used if `vertical` is true.
+- prop.divider: boolean, default=false — Adds additional padding to navigation item's left and right sides. Only used if `vertical` is true.
+- prop.indented: boolean, default=false — Adds additional padding to navigation item's left side. Only used if `vertical` is true.
+- prop.open: boolean, default=false — Reflects HTML details element state and allows control from parent. Only used if `vertical` is true, no `href`is undefined, and `children` is defined.
+- prop.dir: 'ltr'|'rtl'|'auto' — The element's directionality.
+- prop.lang: string — The element's language.
+
+### Events
+
+- event.sd-show: Emitted when the navigation item has has children, no href, and is clicked while HTML details are hidden.
+- event.sd-hide: Emitted when the navigation item has has children, no href, and is clicked while HTML details are shown.
+
+### Slots
+
+- slot.default: The navigation item's label.
+- 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
+
+- part.base: The component's base wrapper including children.
+- part.content-wrapper: The component's content wrapper.
+- part.content: The component's content excluding children.
+- part.chevron: The container that wraps the chevron.
+- part.description: The component's description area below its main content.
+- part.divider: The component's optional top divider.
+
+## Guidelines
+
+### Use Cases
+
+- Populate an [sd-header](./?path=/docs/components-sd-header--docs) navigation bar at the top of a page, helping users easily access different sections.
+- Implement navigation items in a sidebar for a more detailed and hierarchical navigation structure.
+- Add stacked navigation items to a bottom bar used in mobile or web apps.
+
+### Rules
+
+### Labels and Icons
+
+- Use clear, concise labels for navigation items.
+- Don’t use icons alone unless they are universally understood.
+- Use icons and labels together to enhance comprehension.
+
+### Text Styles and Descriptions
+
+- The default style is “book”, but text can be bolded if desired.
+- Bold text for current / parent as well as first level navigation.
+- Override with ”text.black” for non-clickable second level items.
+- Be consistent in the use of descriptions: Include them for all items at the same level and keep them similar in length.
+
+### Spacing
+
+- Use relaxed for extra spacing on vertical desktop viewports.
+- Use indented for nested navigation items in vertical desktop or mobile viewports and in horizontal mobile menus.
+
+### Background Options
+
+- Use with background options of white, neutral-100, and primary-100.
+
+### Accessibility
+
+- Provide a logical tab order that follows the visual sequence of navigation items and their different levels.
+- Use aria-current="page" or aria-current="location" on the active navigation item to communicate the user’s current location.

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

@@ -0,0 +1,15 @@
+Add `children` slot to the navigation item to create an accordion.
+**Hints:**
+
+- Only works with `vertical` attribute.
+- A `chevron` will be added regardless of the `chevron` attribute.
+- The `open` attribute can be used to control the open state of the 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>
+</sd-navigation-item>
+```

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

@@ -0,0 +1,7 @@
+- Use the `href`attribute to change the navigation item to a link. Allows to set the URL to navigate to.
+- Use the `target` attribute to specify where to open the link. Can assume the values `_blank`, `_parent`, `_self`, or `_top`.
+- Use the `download` attribute to tell the browser to download the linked file as this filename.
+
+```html
+<sd-navigation-item href="https://www.union-investment.de/" target="_blank">Link</sd-navigation-item>
+```

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

@@ -0,0 +1,10 @@
+Use the `chevron` attribute to add a chevron to the navigation item.
+**Hints:**
+
+- Only works with `vertical` attribute.
+- `Button` and `Link` variants show right facing chevron dependent on property.
+- `Accordion` variant always show up / down chevron to reflect open state.
+
+```html
+<sd-navigation-item vertical chevron>Vertical Navigation with Chevron</sd-navigation-item>
+```

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

@@ -0,0 +1,8 @@
+Use the `current` attribute to change the navigation item to a current state and make it bold.
+
+```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>
+</div>
+```

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

@@ -0,0 +1,11 @@
+Use the `description` slot to provide a description for the navigation item.
+**Hint:** Only works with `vertical` attribute.
+
+```html
+<sd-navigation-item vertical>
+  Vertical Navigation with Description
+  <p slot="description" class="sd-paragraph">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh justo ullam.
+  </p>
+</sd-navigation-item>
+```

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

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

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

@@ -0,0 +1,6 @@
+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>
+```

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

@@ -0,0 +1,8 @@
+Use `indented` attribute to add padding to the left side.
+**Hint:** Only works with `vertical` attribute.
+
+```html
+<div>
+  <sd-navigation-item vertical indented>Indented Navigation</sd-navigation-item>
+</div>
+```

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

@@ -0,0 +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>
+```

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

@@ -0,0 +1,8 @@
+Use `relaxed` attribute to add padding to both sides.
+**Hint:** Only works with `vertical` attribute.
+
+```html
+<div class="w-[400px]">
+  <sd-navigation-item vertical relaxed>Relaxed Navigation</sd-navigation-item>
+</div>
+```

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

@@ -0,0 +1,14 @@
+Use the `separated` attribute, to have more that only one action. It is possible to use it as a link and an accordion simultaneously.
+**Hints:**
+
+- Only works with a `children slot` and an `href` attribute.
+- `target` and `download` attributes are optional.
+
+```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>
+</sd-navigation-item>
+```

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

@@ -0,0 +1,13 @@
+Use the `size` attribute to change the font size of the navigation item:
+
+- `sm`: Used for 3rd level navigation
+- `base` (default)
+- `lg`: Used for 2nd level navigation
+
+```html
+<div class="flex flex-col gap-6">
+  <sd-navigation-item size="sm">Small</sd-navigation-item>
+  <sd-navigation-item>Default</sd-navigation-item>
+  <sd-navigation-item size="lg">Large</sd-navigation-item>
+</div>
+```

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

@@ -0,0 +1,8 @@
+Use the ”stacked” attribute to create a stacked layout of the navigation item with icon.
+
+```html
+<sd-navigation-item stacked>
+  <sd-icon name="system/image"></sd-icon>
+  <span>Navigation</span>
+</sd-navigation-item>
+```