@solid-design-system/mcp 0.0.1

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

@@ -0,0 +1,89 @@
+## Overview
+
+`<sd-dialog>` — Used over other content. It requires an interaction from the user before they can return to what is underneath.
+
+## API
+
+### Examples
+
+Use the components tool by passing the args `component` and `example` for any of these combinations:
+
+- component: sd-dialog, example: open
+- component: sd-dialog, example: headline
+- component: sd-dialog, example: no-close-button
+
+### Key Properties
+
+- prop.open: boolean, default=false — Indicates whether or not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can
+  use the `show()` and `hide()` methods and this attribute will reflect the dialog's open state.
+- prop.headline: string, default='' — The dialog's headline as displayed in the header. If you need to display HTML, use the `headline` slot instead.
+- prop.noCloseButton [attr: no-close-button]: boolean, default=false — This will remove the default close button. Please ensure you provide an easy, accessible way for users to dismiss the dialog.
+- prop.dir: 'ltr'|'rtl'|'auto' — The element's directionality.
+- prop.lang: string — The element's language.
+
+### Events
+
+- event.sd-show: Emitted when the dialog opens.
+- event.sd-after-show: Emitted after the dialog opens and all animations are complete.
+- event.sd-hide: Emitted when the dialog closes.
+- event.sd-after-hide: Emitted after the dialog closes and all animations are complete.
+- event.sd-initial-focus: Emitted when the dialog opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.
+- event.sd-request-close: Emitted when the user attempts to close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in destructive behavior such as data loss.
+
+### Slots
+
+- slot.default: The dialog's main content.
+- slot.headline: The dialog's headline. Alternatively, you can use the `headline` attribute.
+- slot.footer: The dialog's footer, usually one or more buttons representing various options.
+- slot.close-button: The dialog's close button. Works best with `<sd-button>` and `<sd-icon>`.
+
+### CSS Parts
+
+- part.base: The component's base wrapper.
+- part.overlay: The overlay that covers the screen behind the dialog.
+- part.panel: The dialog's panel (where the dialog and its content are rendered).
+- part.header: The dialog's header. This element wraps the title and header actions.
+- part.title: The dialog's title.
+- part.close-button: The close button, an `<sd-button>`.
+- part.body: The dialog's body.
+- part.footer: The dialog's footer.
+
+## Guidelines
+
+### Use Cases
+
+- Confirm an action which can have significant consequences and explicit user approval or input is needed (e.g. deleting a file).
+- Present important information that must be seen and acknowledged before proceeding (e.g., session expired and renewed login required).
+- Require users to enter information or select from multiple options before continuing.
+- For non-critical content or information that doesn’t require immediate user input, please use [sd-notification](./?path=/docs/components-sd-notification--docs) to avoid workflow disruption.
+
+### Rules
+
+### Slots
+
+- Use the ”headline” slot to add a headline.
+- Add main content on the ”default” slot. The “default” slot is always scrollable.
+- Use the ”footer” slot to add action elements. The “footer” slot is always fixed.
+
+### Headline and Content
+
+- Use clear and concise headlines that describe the purpose.
+- Avoid displaying content unrelated to the current workflow.
+- Refrain from using dialogs for complex forms or large amounts of information.
+
+### Actions
+
+- Ensure a clear user journey by using a single primary button for the main action and secondary buttons for less important actions.
+- Provide an action to close the interaction if a close button is not present in the top-right corner.
+- Avoid having multiple primary action buttons within the same dialog.
+
+### User Interaction
+
+- Require users to take an action before they can continue interacting with the rest of the interface.
+- Provide multiple ways to close the dialog, such as an “X” button, a cancel button, or clicking outside the dialog.
+- Avoid excessive use of dialogs, as they can be disruptive to the user experience.
+
+### Accessibility
+
+- Always provide a headline for the dialog.
+- Always include a visible and easily accessible close button within the modal.

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

@@ -0,0 +1,22 @@
+Use the `headline` attribute to set the headline of the dialog. If you need to use custom HTML, use the headline slot instead.
+
+```html
+<div class="h-[40vh]">
+  <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>
+  </sd-dialog>
+</div>
+<script type="module">
+  const dialog = document.getElementById('headline-dialog');
+  const trigger = document.getElementById('headline-drawer-trigger');
+
+  trigger.addEventListener('click', () => {
+    dialog.show();
+  });
+</script>
+```

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

@@ -0,0 +1,32 @@
+Use the `no-close-button` attribute to hide the close button in the dialog.
+**Hint:** You should always include an action button that allows users to close the dialog.
+
+```html
+<div class="h-[40vh]">
+  <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>
+  </sd-dialog>
+</div>
+
+<script type="module">
+  const dialog = document.getElementById('no-close-dialog');
+  const button = dialog.querySelector('.close-button');
+  const trigger = document.getElementById('no-close-drawer-trigger');
+
+  button.addEventListener('click', () => {
+    dialog.hide();
+    setTimeout(() => {
+      dialog.show();
+    }, 2000);
+  });
+
+  trigger.addEventListener('click', () => {
+    dialog.show();
+  });
+</script>
+```

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

@@ -0,0 +1,72 @@
+**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>`;
+}
+};
+/**
+Use the `open` attribute to show the dialog.
+
+```html
+<div class="h-[40vh]">
+  <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>
+  </sd-dialog>
+</div>
+<script type="module">
+  const dialog = document.getElementById('dialog');
+  const trigger = document.getElementById('drawer-trigger');
+
+  trigger.addEventListener('click', () => {
+    dialog.show();
+  });
+</script>
+```

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

@@ -0,0 +1,51 @@
+## Overview
+
+`<sd-divider>` — Used to separate content or sections from each other.
+
+## API
+
+### Examples
+
+Use the components tool by passing the args `component` and `example` for any of these combinations:
+
+- component: sd-divider, example: size
+- component: sd-divider, example: orientation
+- component: sd-divider, example: inverted
+
+### Key Properties
+
+- prop.orientation: 'horizontal'|'vertical', default='horizontal' — Determines the orientation of the divider.
+- prop.inverted: boolean, default=false — This inverts the divider.
+- prop.dir: 'ltr'|'rtl'|'auto' — The element's directionality.
+- prop.lang: string — The element's language.
+
+### CSS Parts
+
+- part.base: The component's base wrapper.
+
+## Guidelines
+
+### Use Cases
+
+- Separate distinct item groups to help users clearly see and understand how different pieces of content relate to one another.
+- Provide visual breaks in long pages or forms to improve readability.
+
+### Rules
+
+### Spacing and Consistency
+
+- Maintain consistent spacing around separators to prevent them from appearing cramped or too distant from the content they divide.
+- Ensure consistent use to prevent confusion, especially for users relying on assistive technologies.
+
+### Whitespace vs. Visual Separators
+
+- Leverage whitespace effectively as a natural divider, which can offer a clean, easy to read and organised design without additional visual elements.
+
+### Background
+
+- Use light background options like white, neutral-100 or primary-100.
+
+### Accessibility
+
+- Verify that dividers are visible and distinct in high contrast mode settings, which are often used by users with visual impairments.
+- Use to provide clear separation between sections, helping users understand content flow. Screen readers announce dividers, offering context about transitions between sections.

package/metadata/packages/components/sd-divider/stories/inverted.md

@@ -0,0 +1,7 @@
+Use the `inverted` attribute when displayed on primary background.
+
+```html
+<div class="flex items-center gap-12 bg-primary p-8">
+  <sd-divider orientation="horizontal" style="width: 120px" inverted></sd-divider>
+</div>
+```

package/metadata/packages/components/sd-divider/stories/orientation.md

@@ -0,0 +1,11 @@
+Use the `orientation` attribute to set the axis of a divider:
+
+- `horizontal`(default)
+- `vertical`
+
+```html
+<div class="flex items-center gap-12">
+  <sd-divider orientation="horizontal" style="width: 120px"></sd-divider>
+  <sd-divider orientation="vertical" style="height: 120px"></sd-divider>
+</div>
+```

package/metadata/packages/components/sd-divider/stories/size.md

@@ -0,0 +1,10 @@
+Set the component's size with width (horizontal) or height (vertical) via CSS or inline-styles.
+
+```html
+<div class="flex items-center gap-12">
+  <sd-divider orientation="horizontal" style="width: 50px"></sd-divider>
+  <sd-divider orientation="horizontal" style="width: 120px"></sd-divider>
+  <sd-divider orientation="vertical" style="height: 50px"></sd-divider>
+  <sd-divider orientation="vertical" style="height: 120px"></sd-divider>
+</div>
+```

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

@@ -0,0 +1,89 @@
+## Overview
+
+`<sd-drawer>` — Used as a panel that slides out from the side of the screen which contains a set of information or actions.
+
+## API
+
+### Examples
+
+Use the components tool by passing the args `component` and `example` for any of these combinations:
+
+- component: sd-drawer, example: open
+- component: sd-drawer, example: placement
+- component: sd-drawer, example: no-header
+
+### Key Properties
+
+- prop.open: boolean, default=false — Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can
+  use the `show()` and `hide()` methods and this attribute will reflect the drawer's open state.
+- 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.
+
+### Events
+
+- event.sd-show: Emitted when the drawer opens.
+- event.sd-after-show: Emitted after the drawer opens and all animations are complete.
+- event.sd-hide: Emitted when the drawer closes.
+- event.sd-after-hide: Emitted after the drawer closes and all animations are complete.
+- event.sd-initial-focus: Emitted when the drawer opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.
+- event.sd-request-close: Emitted when the user attempts to close the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in destructive behavior such as data loss.
+
+### Slots
+
+- slot.default: The drawer's main content.
+- slot.header: The drawer's header, usually a title.
+- slot.footer: The drawer's footer, usually one or more buttons representing various options.
+
+### 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.
+
+## Guidelines
+
+### Use Cases
+
+- Display supplementary information or options without navigating away from the main screen.
+- Provide contextual help or guidance related to the current screen.
+- House navigation menus on smaller devices.
+- Present filter options, forms or settings that users can interact with without losing their place.
+
+### Rules
+
+### Slots
+
+- Use the ”header” slot to add navigation and/or action elements if desired.
+- Use the ”default” slot to add main content. The “default” slot is always scrollable. For simplicity, sd-scrollable is integrated into the component as a wrapper for the slot in Figma, but will need to be used in code if desired.
+- Use the ”footer” slot to add action elements if desired. The “footer” slot is always fixed.
+
+### Content
+
+- Ensure the content is supplementary and does not include critical information that users must see immediately such as notifications or alerts; instead, use [sd-notification](./?path=/docs/components-sd-notification--docs) or [sd-dialog](./?path=/docs/components-sd-dialog--docs) for those purposes.
+- Check that the drawer content is fully visible and readable, even at larger font sizes.
+
+### Interaction and Behavior
+
+- Maintain the state of the content when it is reopened.
+- Avoid opening automatically without user interaction.
+- Provide multiple ways to close the interface for easy dismissal, such as a close button or clicking outside of it.
+
+### Layout
+
+- Ensure it does not cover critical content or actions on the main screen.
+- If using a tertiary action in the header, adjust the left padding to 0px for proper alignment.
+
+### Accessibility
+
+- Always provide a label for the drawer so that screenreaders correctly announce the component.
+- Make sure that the close button is always visible to ensure users are able to close the drawer.

package/metadata/packages/components/sd-drawer/stories/no-header.md

@@ -0,0 +1,16 @@
+Use the `no-header` attribute to remove the header from the drawer.
+
+```html
+<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>
+    <div slot="footer" class="slot slot--border slot--text h-full">Footer slot</div>
+  </sd-drawer>
+</div>
+<script>
+  document.querySelector('#noHeaderButton').addEventListener('click', () => {
+    document.querySelector('#noHeaderDrawer').show();
+  });
+</script>
+```

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

@@ -0,0 +1,23 @@
+Use the `open` attribute to set the state of the drawer to open.
+
+```html
+<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">
+      <sd-icon slot="icon-left" name="system/arrow-left"></sd-icon>
+      Back
+    </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>
+    </div>
+  </sd-drawer>
+</div>
+<script>
+  document.querySelector('#openButton').addEventListener('click', () => {
+    document.querySelector('#openDrawer').show();
+  });
+</script>
+```

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

@@ -0,0 +1,23 @@
+Use the `placement` attribute to change the position of the drawer:
+
+- `start`: The drawer will be positioned on the left side of the screen.
+- `end`: The drawer will be positioned on the right side of the screen.
+
+```html
+<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>
+    </div>
+  </sd-drawer>
+</div>
+<script>
+  document.querySelector('#placementButton').addEventListener('click', () => {
+    document.querySelector('#placementDrawer').show();
+  });
+</script>
+```

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

@@ -0,0 +1,86 @@
+## Overview
+
+`<sd-dropdown>` — Used to display a list of actions or options in a panel when activated.
+
+## API
+
+### Examples
+
+Use the components tool by passing the args `component` and `example` for any of these combinations:
+
+- component: sd-dropdown, example: open
+- component: sd-dropdown, example: rounded
+- component: sd-dropdown, example: placement
+- component: sd-dropdown, example: stay-open
+- component: sd-dropdown, example: disabled
+- component: sd-dropdown, example: distance
+- component: sd-dropdown, example: skidding
+- component: sd-dropdown, example: no-auto-size
+- component: sd-dropdown, example: no-flip
+
+### Key Properties
+
+- prop.open: boolean, default=false — Indicates whether or not the dropdown is open. You can toggle this attribute to show and hide the dropdown, or you
+  can use the `show()` and `hide()` methods and this attribute will reflect the dropdown's open state.
+- prop.rounded: boolean, default=false — Indicates whether or not the dropdown should be styled with rounded corners.
+- prop.placement: |'top'|'top-start'|'top-end'|'bottom'|'bottom-start'|'bottom-end'|'right'|'right-start'|'right-end'|'left'|'left-start'|'left-end', default='bottom-start' — The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel
+  inside of the viewport.
+- prop.disabled: boolean, default=false — Disables the dropdown so the panel will not open.
+- prop.stayOpenOnSelect [attr: stay-open-on-select]: boolean, default=false — By default, the dropdown is closed when an item is selected. This attribute will keep it open instead. Useful for
+  dropdowns that allow for multiple interactions.
+- prop.distance: number, default=0 — The distance in pixels from which to offset the panel away from its trigger. This defaults to `0` for `rounded=false` and to a minimum of `1` for `rounded=true`.
+- prop.skidding: number, default=0 — The distance in pixels from which to offset the panel along its trigger.
+- prop.noAutoSize [attr: no-auto-size]: boolean, default=false — Indicates whether or not the dropdown should automatically resize its content's width/height regarding the available space on screen.
+- prop.noFlip [attr: no-flip]: boolean, default=false — When set to true, the placement of the dropdown will not flip to the opposite site to keep it in view.
+- prop.hoist: boolean, default=false — Enable this option to prevent the panel from being clipped when the component is placed inside a container with
+  `overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.
+- prop.dir: 'ltr'|'rtl'|'auto' — The element's directionality.
+- prop.lang: string — The element's language.
+
+### Events
+
+- event.sd-show: Emitted when the dropdown opens.
+- event.sd-after-show: Emitted after the dropdown opens and all animations are complete.
+- event.sd-hide: Emitted when the dropdown closes.
+- event.sd-after-hide: Emitted after the dropdown closes and all animations are complete.
+
+### Slots
+
+- slot.default: The dropdown's main content.
+- slot.trigger: The dropdown's trigger, usually a `<sd-button>` element.
+
+### 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.trigger: The container that wraps the trigger.
+- part.panel: The panel that gets shown when the dropdown is open.
+
+## Guidelines
+
+### Use Cases
+
+- Provide a list of items in a compact space.
+- Display additional options or settings related to a specific item.
+- Enable navigation through different sections or categories.
+
+### Rules
+
+### Behavior
+
+- Avoid hiding sets of less than 4 items in dropdowns.
+- Refrain from nesting dropdowns within each other. If nesting is strictly necessary, limit the menu to two layers to prevent complex operation and cognitive load.
+- Keep the panel near its trigger so users understand its context.
+
+### Triggers
+
+- Maintain consistent styling for dropdown triggers placed at the same level or in the same group; i.e., if a trigger has both text and icon, other triggers on the same level or group should also display text and icon.
+- Avoid truncating trigger labels if possible.
+
+### Panel Items
+
+- Group related panel items to make them easier to find, especially if there are many. Use a group label and [sd-divider](./?path=/docs/components-sd-divider--docs) to separate them visually.
+
+### Accessibility
+
+- Ensure that when the menu is triggered via keyboard, the first item receives focus.

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

@@ -0,0 +1,8 @@
+Use the `disabled` attribute to disable the dropdown.
+
+```html
+<sd-dropdown disabled>
+  <div class="slot slot--border slot--text p-4 w-[300px]">Default slot</div>
+  <sd-button slot="trigger" disabled>Trigger</sd-button>
+</sd-dropdown>
+```

package/metadata/packages/components/sd-dropdown/stories/distance.md

@@ -0,0 +1,8 @@
+Use the `distance` attribute to set the distance between the dropdown panel and the trigger.
+
+```html
+<sd-dropdown open distance="8">
+  <div class="slot slot--border slot--text p-4 w-[300px]">Default slot</div>
+  <sd-button slot="trigger">Trigger</sd-button>
+</sd-dropdown>
+```

package/metadata/packages/components/sd-dropdown/stories/no-auto-size.md

@@ -0,0 +1,10 @@
+Use the `no-auto-size` attribute to prevent the dropdown from automatically adjusting its size.
+
+```html
+<sd-dropdown no-auto-size open>
+  <div class="slot slot--border slot--background flex justify-start" style="height: 110vh; width: 120px;">
+    Scroll down
+  </div>
+  <sd-button slot="trigger">Trigger</sd-button>
+</sd-dropdown>
+```

package/metadata/packages/components/sd-dropdown/stories/no-flip.md

@@ -0,0 +1,8 @@
+Use the `no-flip` attribute to prevent the dropdown from flipping its position when it would be cut off.
+
+```html
+<sd-dropdown no-flip open>
+  <div class="slot slot--border slot--text p-4 w-[300px]">Default slot</div>
+  <sd-button slot="trigger">Trigger</sd-button>
+</sd-dropdown>
+```

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

@@ -0,0 +1,8 @@
+Use the `open` attribute to toggle the visibility of the dropdown.
+
+```html
+<sd-dropdown open>
+  <div class="slot slot--border slot--text p-4 w-[300px]">Default slot</div>
+  <sd-button slot="trigger" variant="secondary">Trigger</sd-button>
+</sd-dropdown>
+```

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

@@ -0,0 +1,20 @@
+Use the `placement` attribute to set the position of the dropdown panel relative to the trigger:
+
+- top: `top`, `top-start` and `top-end`
+- bottom: `bottom`, `bottom-start` and `bottom-end`
+- right: `right`, `right-start` and `right-end`
+- left: `left`, `left-start` and `left-end`
+
+```html
+<div class="grid grid-cols-2 gap-32">
+  <sd-dropdown open placement="bottom-start">
+    <div class="slot slot--border slot--text p-4 w-[300px]">Default slot</div>
+    <sd-button slot="trigger">bottom-start</sd-button>
+  </sd-dropdown>
+
+  <sd-dropdown open placement="bottom-end">
+    <div class="slot slot--border slot--text p-4 w-[300px]">Default slot</div>
+    <sd-button slot="trigger">bottom-end</sd-button>
+  </sd-dropdown>
+</div>
+```

package/metadata/packages/components/sd-dropdown/stories/rounded.md

@@ -0,0 +1,10 @@
+Use the `rounded` attribute to set a border-radius on the dropdown panel and trigger button.
+
+```html
+<sd-dropdown open rounded distance="4">
+  <div class="slot slot--border slot--text p-4 w-[300px]">Default slot</div>
+  <sd-button slot="trigger" variant="secondary">
+    <sd-icon name="system/more-functions" class="h-6 w-6" label="Rounded dropdown"></sd-icon>
+  </sd-button>
+</sd-dropdown>
+```

package/metadata/packages/components/sd-dropdown/stories/skidding.md

@@ -0,0 +1,8 @@
+Use the `skidding` attribute to offset the panel away from its trigger.
+
+```html
+<sd-dropdown open skidding="20" placement="bottom">
+  <div class="slot slot--border slot--text p-4 w-[300px]">Default slot</div>
+  <sd-button slot="trigger">Trigger</sd-button>
+</sd-dropdown>
+```

package/metadata/packages/components/sd-dropdown/stories/stay-open.md

@@ -0,0 +1,12 @@
+Use the `stay-open-on-select` attribute to keep the dropdown open after an item has been selected.
+
+```html
+<sd-dropdown stay-open-on-select>
+  <div class="example">
+    <sd-checkbox>Checkbox 1</sd-checkbox>
+    <sd-checkbox>Checkbox 2</sd-checkbox>
+    <sd-checkbox>Checkbox 3</sd-checkbox>
+  </div>
+  <sd-button slot="trigger">Trigger</sd-button>
+</sd-dropdown>
+```