@solid-design-system/mcp 0.0.1

package/metadata/packages/templates/chip.md

@@ -0,0 +1,35 @@
+---
+name: chip
+title: Chip
+components:
+  - sd-chip
+  - sd-chip--primary-200
+  - sd-chip--primary-300
+  - sd-chip--primary-500
+  - sd-chip--white
+version: 1.0.0
+---
+
+## Template: Background Options
+
+```html
+<div class="grid grid-cols-2 grid-rows-2">
+  <div class="bg-white p-4 border border-neutral-200">
+    <span class="sd-chip sd-chip--primary-200">primary-200</span>
+  </div>
+  <div class="bg-primary-100 p-4">
+    <span class=" sd-chip sd-chip--primary-300">primary-300</span>
+  </div>
+  <div class="bg-primary p-4">
+    <span class="sd-chip sd-chip--primary-500">primary-500</span>
+  </div>
+  <div slot="media" class="relative">
+    <img
+      class="aspect-video object-cover"
+      src="./placeholders/images/coffeeshop.jpg"
+      alt="A group of people sitting in a coffee shop"
+    />
+    <span class="absolute top-3 left-4 sd-chip sd-chip--white">white</span>
+  </div>
+</div>
+```

package/metadata/packages/templates/combobox.md

@@ -0,0 +1,92 @@
+---
+name: combobox
+title: Combobox
+components:
+  - sd-combobox
+  - sd-optgroup
+  - sd-option
+version: 1.0.0
+---
+
+## Template: Simple Suggests
+
+```html
+<div class="h-[260px] w-[400px]">
+  <sd-combobox label="Funds"> ${createFondsOptionsHtml()} </sd-combobox>
+</div>
+```
+
+## Template: Highlight Query
+
+```html
+<div class="h-[260px] w-[400px]">
+  <sd-combobox label="Funds" class="highlight-combobox" value="g"> ${createFondsOptionsHtml()} </sd-combobox>
+</div>
+<script type="module">
+  // the highlight option renderer utility function can be imported via:
+  // import { highlightOptionRenderer } from '@solid-design-system/components';
+
+  // preview-ignore:start
+  const highlightOptionRenderer = ${optionRenderer};
+  // preview-ignore:end
+
+  const comboboxes = document.querySelectorAll('.highlight-combobox');
+  comboboxes.forEach(combobox => {
+    combobox.getOption = highlightOptionRenderer;
+  });
+</script>
+```
+
+## Template: Multiple Highlight Query
+
+```html
+<div class="h-[260px] w-[400px]">
+  <sd-combobox label="Funds" class="multiple-highlight-combobox"> ${createFondsOptionsHtml()} </sd-combobox>
+</div>
+<script type="module">
+  const combobox = document.querySelector('.multiple-highlight-combobox');
+
+  const multipleHighlightRender = (option, query) => {
+    if (!query) {
+      return option;
+    }
+
+    const clonedOption = option.cloneNode(true);
+
+    clonedOption.selected = option.selected;
+
+    const optionLabel = clonedOption.getTextLabel();
+    const queryRegex = new RegExp(query, 'gi');
+
+    const mark = document.createElement('mark');
+
+    const exchangedText = optionLabel.replace(queryRegex, match => {
+      mark.textContent = match;
+      return mark.outerHTML;
+    });
+
+    const indexLabel = clonedOption.innerHTML.indexOf(optionLabel);
+    const previousContent = clonedOption.innerHTML.slice(0, indexLabel);
+    const followingContent = clonedOption.innerHTML.slice(indexLabel + optionLabel.length);
+
+    clonedOption.innerHTML = previousContent.concat(exchangedText, followingContent);
+    return clonedOption;
+  };
+
+  combobox.getOption = multipleHighlightRender;
+</script>
+```
+
+## Template: Grouping Query
+
+```html
+<div class="h-[260px] w-[400px]">
+  <sd-combobox label="Group elements" value="g">
+    <sd-optgroup label="Funds"> ${createFondsOptionsHtml()} </sd-optgroup>
+    <sd-optgroup label="Search Suggestions">
+      <sd-option value="uniabsoluterertrag">UniAbsoluterErtrag</sd-option>
+      <sd-option value="uniasia">UniAsia</sd-option>
+    </sd-optgroup>
+  </sd-combobox>
+</div>
+```

package/metadata/packages/templates/datepicker.md

@@ -0,0 +1,44 @@
+---
+name: datepicker
+title: Datepicker
+components:
+  - sd-datepicker
+version: 1.0.0
+---
+
+## Template: Datepicker with a Selected Date and Unavailable Weekends
+
+```html
+<div class="w-[370px]">
+  <sd-datepicker value="2025.11.21" disabled-weekends alignment="right" label="Appointment"></sd-datepicker>
+</div>
+```
+
+## Template: Datepicker with a Selected Date and Unavailable Dates
+
+```html
+<div class="w-[370px]">
+  <sd-datepicker
+    value="2025.11.21"
+    disabled-dates="2025.11.04,2025.11.12,2025.11.18,2025.11.26"
+    disabled-weekends
+    alignment="right"
+    label="Appointment"
+  ></sd-datepicker>
+</div>
+```
+
+## Template: Datepicker with a Selected Range
+
+```html
+<div class="w-[370px]">
+  <sd-datepicker
+    value="2025.11.21"
+    range
+    rangeStart="2025.11.21"
+    rangeEnd="2025.11.28"
+    alignment="right"
+    label="Time period"
+  ></sd-datepicker>
+</div>
+```

package/metadata/packages/templates/dialog.md

@@ -0,0 +1,270 @@
+---
+name: dialog
+title: Dialog
+components:
+  - sd-button
+  - sd-dialog
+  - sd-headline
+  - sd-headline--size-3xl
+  - sd-headline--size-lg
+  - sd-icon
+  - sd-link
+  - sd-paragraph
+  - sd-request-close
+  - sd-scrollable
+version: 1.0.0
+---
+
+## Template: Dialog with Button Group
+
+```html
+<!-- TODO: remove once this bugfix is addressed: https://github.com/solid-design-system/solid/issues/1325 -->
+<style>
+  @media (min-width: 414px) {
+    sd-dialog::part(footer) {
+      width: 100%;
+      margin: 0;
+    }
+  }
+</style>
+
+<sd-button id="drawer-trigger">Open Dialog</sd-button>
+<sd-dialog id="dialog" open>
+  <span slot="headline" class="sd-headline sd-headline--size-3xl">Cancel your subscription?</span>
+  <p class="sd-paragraph">Your subscription will be canceled immediately. You can resubscribe at any time.</p>
+  <div slot="footer" class="flex flex-col-reverse sm:flex-row justify-end w-full gap-2">
+    <sd-button class="w-full sm:w-auto" variant="secondary" size="lg" type="button"> Maybe later </sd-button>
+    <sd-button class="w-full sm:w-auto" variant="primary" size="lg" type="button"> Cancel </sd-button>
+  </div>
+</sd-dialog>
+<script type="module">
+  const dialog = document.getElementById('dialog');
+  const buttons = dialog.querySelectorAll('sd-button');
+  const trigger = document.getElementById('drawer-trigger');
+
+  trigger.addEventListener('click', () => {
+    dialog.show();
+  });
+
+  buttons.forEach(button => {
+    button.addEventListener('click', () => {
+      dialog.hide();
+    });
+  });
+</script>
+```
+
+## Template: Dialog with scrollable content
+
+```html
+<style>
+  sd-button::part(icon-left) {
+    justify-content: end;
+  }
+</style>
+
+<sd-button id="scrollable-drawer-trigger">Open Dialog</sd-button>
+
+<sd-dialog id="scrollable-dialog" open no-close-button>
+  <span slot="headline" class="sd-headline sd-headline--size-3xl">Terms of use</span>
+  <sd-scrollable orientation="vertical" step="150" shadows>
+    <div class="items-start justify-start h-[300px] lg:h-[454px] space-y-5">
+      <h3 class="sd-headline sd-headline--size-lg">Important notices to our investors</h3>
+      <p class="sd-paragraph">By accepting this document, you accept the following restrictions as binding on you:</p>
+      <p class="sd-paragraph">
+        This investor information is intended exclusively for professional clients who are already invested in the fund.
+        The contents of this document have been compiled by Union Investment Institutional GmbH with reasonable care and
+        to the best of its knowledge. The presentations and explanations are based on our own assessment at the time
+        this document was prepared and on information from our own or publicly available sources that we believe to be
+        reliable. However, Union Investment has not fully verified the information provided by third parties and can
+        therefore accept no liability for its currency, accuracy or completeness. All index and product names of
+        companies other than Union Investment may be the copyrighted and trademarked products and brands of these
+        companies.
+      </p>
+      <p class="sd-paragraph">
+        This document is intended solely for internal use. Therefore, it may not be reproduced, modified, or summarized
+        in whole or in part, redistributed to other persons, or made accessible or published to other persons in any
+        other way. No liability is accepted for disadvantages arising directly or indirectly from the distribution, use,
+        modification, and summary of this document or its contents. This marketing communication does not constitute an
+        investment recommendation and does not replace individual investment advice from a suitable investment advisor,
+        nor the assessment of individual circumstances by a lawyer or tax advisor. Insofar as reference is made to fund
+        units or individual securities, this may constitute an analysis within the meaning of Art. 36 para. 1 Delegated
+        Regulation (EU) 2017/565. If this document is made accessible to an indefinite group of persons, redistributed,
+        published, or modified or summarized contrary to the above provisions, the user of this document may be subject
+        to the provisions of § 85 para. 1 WpHG in conjunction with Art. 3 nos. 34 and 35, Art. 20 Market Abuse
+        Regulation (EU) (investment recommendation and investment strategy recommendation) as well as Art. 36 paras. 1
+        and 2 of the Delegated Regulation (EU) 2017/565 on MiFID II (financial analysis), the requirements for customer
+        information to retail and professional clients (Art. 44 Regulation (EU) 2017/565), and the special provisions
+        issued by the European and national supervisory authorities. Information on the performance of funds and the
+        classification into risk classes/color schemes of funds and other products of Union Investment is based on past
+        performance and/or volatility.
+      </p>
+      <p class="sd-paragraph">
+        No statement is made about future performance. The foreign currency quota takes into account the entire fund
+        assets, including target fund resolution and cash. The key figures average yield, average coupon, average
+        remaining maturity, average duration, and modified duration are calculated including target fund resolution
+        based on the fixed-income assets and taking into account cash and derivatives. In the calculation of the average
+        remaining maturity, floaters are considered with their final maturity. The average rating is a proprietary
+        calculation by Union Investment (Union Comp Rating) based on the fixed-income assets, taking into account cash
+        and excluding derivatives. All allocation views and the fund structure are based on the target fund-resolved
+        economic holdings of the fund. Hedging positions through derivatives are offset.
+      </p>
+      <p class="sd-paragraph">
+        All allocation views are presented excluding cash and foreign and real estate funds. The allocation of the fund
+        structure is based on Union Investment Group’s own asset allocation. The allocations may differ from those in
+        the annual and semi-annual reports. The sector allocation for equities is based on MSCI sectors or for fixed
+        income on Merrill-Lynch sectors of the assets. The distribution yield in % is the “current yield” in the
+        respective fiscal year. The basis for this is the net asset value at the beginning of the respective fiscal
+        year, adjusted for the distribution included in the previous fiscal year.
+      </p>
+      <p class="sd-paragraph">
+        The Sustainable Finance Disclosure Regulation (SFDR) regulates disclosure requirements for financial products.
+        Art. 6 products do not take sustainability into account, Art. 8 promotes ecological and social characteristics.
+        Art. 9 products have sustainable investments as their investment objective.
+      </p>
+      <p class="sd-paragraph">
+        Any front-end load is fully passed on to the fund’s intermediary. If you subscribe directly with Union
+        Investment, this does not apply.
+      </p>
+      <p class="sd-paragraph">
+        Please read the prospectus and the key information document before making a final investment decision. These
+        contain detailed product-specific information, particularly on investment objectives, investment principles,
+        opportunities and risks, as well as explanations of the fund’s risk profile. These documents, as well as the
+        investment conditions and the annual and semi-annual reports, form the sole binding basis for the purchase of
+        the fund. They are available free of charge in German from Union Investment Institutional GmbH, Weißfrauenstraße
+        7, 60311 Frankfurt am Main, Tel. +49 69 2567-7652, Fax +49 69 2567-1010,
+        <sd-link href="http://institutional@union-investment.de">institutional@union-investment.de</sd-link>,
+        <sd-link href="http://www.institutional.union-investment.de">www.institutional.union-investment.de</sd-link>. If
+        the document concerns a sustainable fund, you will find information on the sustainability-relevant aspects of
+        the fund at <sd-link href="https://ui-link.de/fondspreisseite">https://ui-link.de/fondspreisseite</sd-link>.
+      </p>
+      <p class="sd-paragraph">
+        A summary of your investor rights in German and further information on collective redress mechanisms can be
+        found under “Notices and Complaints” at
+        <sd-link href="https://ui-link.de/richtlinien">https://ui-link.de/richtlinien</sd-link>. The respective
+        fund-issuing company may decide at any time to revoke any arrangements it may have made for the distribution of
+        shares of a fund and/or share classes of a fund in a member state other than its home member state, subject to
+        the conditions of Art. 93a of Directive 2009/65/EC and Art. 32a of Directive 2011/61/EU.
+      </p>
+    </div>
+  </sd-scrollable>
+  <div slot="footer" class="flex flex-col-reverse md:flex-row justify-end w-full gap-2">
+    <sd-button class="close-dialog" variant="secondary" size="lg" type="button" aria-label="Close">
+      <sd-icon name="system/log-out" slot="icon-left"></sd-icon>
+      Exit portal
+    </sd-button>
+    <sd-button class="download" variant="secondary" size="lg" type="button">
+      <sd-icon name="system/download" slot="icon-left"></sd-icon>
+      Download PDF
+    </sd-button>
+    <sd-button class="close-dialog" variant="primary" size="lg" type="button"> Accept terms of use </sd-button>
+  </div>
+</sd-dialog>
+
+<script type="module">
+  const dialog = document.getElementById('scrollable-dialog');
+  const buttons = dialog.querySelectorAll('.close-dialog');
+  const download = dialog.querySelector('.download');
+  const trigger = document.getElementById('scrollable-drawer-trigger');
+
+  buttons.forEach(button => {
+    button.addEventListener('click', () => {
+      dialog.hide();
+    });
+  });
+
+  download.addEventListener('click', () => {
+    alert('Download PDF');
+  });
+
+  trigger.addEventListener('click', () => {
+    dialog.show();
+  });
+</script>
+```
+
+## Template: Prevent Closing
+
+```html
+<div style="height: 40vh;">
+  <div class="flex gap-2">
+    <sd-button id="open-dialog">Open Dialog</sd-button>
+    <sd-button id="open-timed-dialog">Open Timed Dialog</sd-button>
+  </div>
+
+  <sd-dialog id="default-dialog">
+    <p class="sd-paragraph">This dialog will not close when you click on the overlay.</p>
+    <span slot="headline" class="sd-headline sd-headline--size-3xl">Dialog</span>
+    <sd-button slot="footer" class="w-full" id="close-button">Close</sd-button>
+  </sd-dialog>
+
+  <script type="module">
+    // Prevent closing the dialog when clicking on the overlay
+    const openDialogButton = document.querySelector('#open-dialog');
+    const defaultDialog = document.querySelector('#default-dialog');
+
+    const closeButton = document.querySelector('#close-button');
+
+    closeButton.addEventListener('click', () => defaultDialog.hide());
+    openDialogButton.addEventListener('click', () => defaultDialog.show());
+
+    defaultDialog.addEventListener('sd-request-close', event => {
+      if (event.detail.source === 'overlay') {
+        event.preventDefault();
+      }
+    });
+  </script>
+
+  <sd-dialog id="timed" headline="Timed Dialog" no-close-button>
+    <div id="countdown">Closable in 5 seconds...</div>
+    <sd-button slot="footer" class="w-full" id="timed-close-button" visually-disabled>
+      Close <span id="close-countdown" class="sr-only">. Closable in 5 seconds...</span>
+    </sd-button>
+  </sd-dialog>
+
+  <script type="module">
+    // Prevent closing the dialog for a certain amount of time
+    const openTimedDialogButton = document.querySelector('#open-timed-dialog');
+    const countdownElement = document.querySelector('#countdown');
+    const closeCountdownElement = document.querySelector('#close-countdown');
+    const timedCloseButton = document.querySelector('#timed-close-button');
+
+    const timedDialog = document.querySelector('#timed');
+    let canCloseTimedDialog = false;
+
+    timedCloseButton.addEventListener('click', () => timedDialog.hide());
+
+    openTimedDialogButton.addEventListener('click', () => {
+      timedCloseButton.visuallyDisabled = true;
+      timedDialog.show();
+      canCloseTimedDialog = false;
+      let counter = 5;
+      countdownElement.textContent = 'Closable in ' + counter + ' seconds...';
+      closeCountdownElement.textContent = '. ' + countdownElement.textContent;
+
+      const interval = setInterval(() => {
+        counter--;
+        /**
+         * NOTE: The closeCountdownElement is not updated every second to avoid
+         * disrupting screen readers when announcing the current text.
+         */
+        countdownElement.textContent = 'Closable in ' + counter + ' seconds...';
+
+        if (counter <= 0) {
+          clearInterval(interval);
+          canCloseTimedDialog = true;
+          timedCloseButton.visuallyDisabled = false;
+          countdownElement.textContent = 'You can now close the dialog.';
+          closeCountdownElement.textContent = '. You can now close the dialog.';
+        }
+      }, 1000);
+    });
+
+    timedDialog.addEventListener('sd-request-close', event => {
+      if (!canCloseTimedDialog) {
+        event.preventDefault();
+      }
+    });
+  </script>
+</div>
+```

package/metadata/packages/templates/drawer.md

@@ -0,0 +1,185 @@
+---
+name: drawer
+title: Drawer
+components:
+  - sd-button
+  - sd-drawer
+  - sd-header
+  - sd-headline
+  - sd-headline--size-lg
+  - sd-hide
+  - sd-icon
+  - sd-navigation-item
+  - sd-show
+version: 1.0.0
+---
+
+## Template: Tablet Navigation
+
+```html
+<style>
+  sd-navigation-item::part(content) {
+    display: flex;
+    align-items: center;
+  }
+  sd-drawer::part(panel) {
+    border-top: 2px solid #e9e9e9;
+    border-right: 2px solid #e9e9e9;
+  }
+  sd-drawer::part(overlay) {
+    background-color: #051530;
+    opacity: 0.9;
+  }
+</style>
+<sd-button id="open-menu-navigation">Open Drawer</sd-button>
+
+<sd-drawer open id="navigation-drawer" placement="end" label="Navigation drawer menu" class="group relative block">
+  <sd-button slot="header" variant="tertiary" class="navigation-nav--close">
+    <sd-icon name="system/arrow-left" label="Close submenu"></sd-icon>
+  </sd-button>
+
+  <div class="flex flex-col h-full -mx-4 overflow-x-hidden">
+    <nav
+      aria-label="Main"
+      class="navigation-nav group relative flex flex-col justify-between flex-1 pt-1 transition-transform duration-medium data-[submenu-open]:-translate-x-full"
+    >
+      <ul>
+        <li>
+          <sd-navigation-item href="javascript:void(0)" vertical current>Home</sd-navigation-item>
+        </li>
+        <li>
+          <sd-navigation-item divider vertical chevron>About Us</sd-navigation-item>
+          <div data-submenu class="absolute top-0 right-0 w-full translate-x-full">
+            <div>
+              <p class="sd-headline sd-headline--size-lg px-4 py-3 !text-primary">About Us</p>
+              <ul>
+                <li>
+                  <sd-navigation-item divider vertical>
+                    <span>Union Investment for privat customers</span>
+                    <span slot="description">Find out more about us and what we stand for</span>
+                    <sd-navigation-item slot="children" vertical indented href="javascript:void(0)">
+                      Investor protection
+                    </sd-navigation-item>
+                    <sd-navigation-item slot="children" vertical indented href="javascript:void(0)">
+                      Distinction
+                    </sd-navigation-item>
+                    <sd-navigation-item slot="children" vertical indented href="javascript:void(0)">
+                      Our Management
+                    </sd-navigation-item>
+                  </sd-navigation-item>
+                  <sd-navigation-item vertical> Sustainability at Union Investment </sd-navigation-item>
+                  <sd-navigation-item vertical> Union Investment Group </sd-navigation-item>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </li>
+        <li>
+          <sd-navigation-item href="javascript:void(0)" divider vertical>Markets</sd-navigation-item>
+        </li>
+        <li>
+          <sd-navigation-item href="javascript:void(0)" divider vertical>Press service</sd-navigation-item>
+        </li>
+        <li>
+          <sd-navigation-item href="javascript:void(0)" divider vertical>Sustainability</sd-navigation-item>
+        </li>
+        <li>
+          <sd-navigation-item href="javascript:void(0)" divider vertical>Career</sd-navigation-item>
+        </li>
+      </ul>
+
+      <div class="py-2 bg-neutral-100">
+        <ul>
+          <li>
+            <sd-navigation-item href="javascript:void(0)" vertical>
+              <sd-icon name="system/user" class="text-xl mr-2"></sd-icon>
+              My depot
+            </sd-navigation-item>
+          </li>
+          <li>
+            <sd-navigation-item href="javascript:void(0)" divider vertical>
+              <sd-icon name="system/lock-locked" class="text-xl mr-2"></sd-icon>
+              My application
+            </sd-navigation-item>
+          </li>
+          <li>
+            <sd-navigation-item href="javascript:void(0)" divider vertical>
+              <sd-icon name="system/website" class="text-xl mr-2"></sd-icon>
+              Our further appearances
+            </sd-navigation-item>
+          </li>
+        </ul>
+      </div>
+    </nav>
+  </div>
+</sd-drawer>
+
+<style>
+  [data-submenu][inert] {
+    display: none;
+  }
+
+  sd-navigation-item:has([slot='children']):has(sd-navigation-item[current])::part(content),
+  sd-navigation-item:has(+ [data-submenu] sd-navigation-item[current])::part(content) {
+    font-weight: bold;
+  }
+
+  sd-navigation-item + div[data-submenu]:not([data-active-submenu]) {
+    pointer-events: none;
+    opacity: 0;
+  }
+
+  sd-navigation-item:has([slot='children'])[open] span:not([slot='description']),
+  sd-navigation-item:has([slot='children'][current]) span:not([slot='description']) {
+    font-weight: bold;
+  }
+</style>
+
+<!-- Mobile drawer logic -->
+<script type="module">
+  const drawer = document.getElementById('navigation-drawer');
+  const drawerTrigger = document.getElementById('open-menu-navigation');
+  const innerTrigger = drawerTrigger.shadowRoot.querySelector('button');
+
+  innerTrigger.setAttribute('aria-controls', 'navigation-drawer');
+  innerTrigger.setAttribute('aria-expanded', 'false');
+  drawerTrigger.addEventListener('click', () => drawer.show());
+  drawer.addEventListener('sd-hide', () => innerTrigger.setAttribute('aria-expanded', 'false'));
+  drawer.addEventListener('sd-show', () => innerTrigger.setAttribute('aria-expanded', 'true'));
+</script>
+
+<!--
+    The navigation-menu script can be found here:
+    https://github.com/solid-design-system/solid/blob/main/packages/docs/.storybook/assets/scripts/navigation-menu.js
+  -->
+<script src="./scripts/navigation-menu.js"></script>
+<script type="module">
+  const getNavigationItemTitle = item =>
+    item.shadowRoot
+      .querySelector('[part="content"]')
+      .assignedNodes({ flatten: true })
+      .reduce((acc, node) => {
+        if (node.nodeType === Node.ELEMENT_NODE) {
+          return acc + node.innerText;
+        } else if (node.nodeType === Node.TEXT_NODE) {
+          return acc + node.textContent;
+        }
+        return acc;
+      }, '');
+
+  document.querySelectorAll('.navigation-nav').forEach(container => {
+    const megamenu = new NavigationMenu(container, NavigationMenuVerticalItem, {
+      backButton: document.getElementById('navigation-drawer').querySelector('.navigation-nav--close')
+    });
+    megamenu.focusController = new VerticalFocusController(megamenu);
+
+    const drawer = container.closest('sd-drawer');
+    if (drawer) {
+      drawer.addEventListener('sd-hide', e => {
+        if (e.target !== drawer) return;
+        megamenu.reset();
+      });
+    }
+  });
+</script>
+```

package/metadata/packages/templates/dropdown.md

@@ -0,0 +1,52 @@
+---
+name: dropdown
+title: Dropdown
+components:
+  - sd-dropdown
+  - sd-headline
+  - sd-headline--size-base
+  - sd-icon
+  - sd-navigation-item
+version: 1.0.0
+---
+
+## Template: Default
+
+```html
+<style>
+  #anchor--templates-dropdown--default .innerZoomElementWrapper {
+    min-height: 500px;
+  }
+</style>
+<div class="min-h-[400px] w-[380px]">
+  <sd-dropdown id="dropdown" open>
+    <sd-navigation-item slot="trigger" vertical>
+      <sd-icon name="system/globe" class="h-6 w-6" label="Select a country"></sd-icon>
+    </sd-navigation-item>
+    <div class="flex flex-col p-2">
+      <h4 class="sd-headline sd-headline--size-base p-4">Please select a country</h4>
+      <sd-navigation-item current vertical href="javascript:void(0)"> Austria </sd-navigation-item>
+      <sd-navigation-item vertical href="javascript:void(0)"> Denmark </sd-navigation-item>
+      <sd-navigation-item vertical href="javascript:void(0)"> Finland </sd-navigation-item>
+      <sd-navigation-item vertical href="javascript:void(0)"> France </sd-navigation-item>
+      <sd-navigation-item vertical href="javascript:void(0)"> Germany </sd-navigation-item>
+    </div>
+  </sd-dropdown>
+</div>
+
+<script type="module">
+  await Promise.all([customElements.whenDefined('sd-navigation-item')]).then(() => {
+    const dropdown = document.getElementById('dropdown');
+    const navigationItems = dropdown.querySelectorAll('sd-navigation-item[href]');
+
+    const handleNavigationItemClick = e => {
+      navigationItems.forEach(item => item.removeAttribute('current'));
+
+      const target = e.target.closest('sd-navigation-item');
+      target.setAttribute('current', '');
+    };
+
+    navigationItems.forEach(item => item.addEventListener('click', handleNavigationItemClick));
+  });
+</script>
+```