Dropdowns

Class

Dropdown Base

Select option

Label

• Option 1
• Option 2
• Option 3

States

Filled / EnabledOutlined / EnabledFilled / HoveredOutlined / HoveredFilled / FocusedOutlined / FocusedFilled / ErrorOutlined / Error

Select option

Label

• Option 1
• Option 2
• Option 3

Code

HTMLCSSJS

<div class="dropdown-wrapper input-wrapper input-filled trailing-icon">
    <div class="input-field dropdown-field trailing-icon">
        <span class="dropdown-value">Select option</span>
        <span class="input-icon trailing" aria-hidden="true">
            <svg viewBox="0 0 24 24" fill="none">
                <circle cx="12" cy="12" r="10"
                        stroke="currentColor"
                        stroke-width="2"/>
                <path d="M9 9L15 15M15 9L9 15"
                      stroke="currentColor"
                      stroke-width="2"
                      stroke-linecap="round"/>
            </svg>
        </span>
    </div>
    <label class="input-label">Label</label>
    <ul class="dropdown-menu">
        <li class="dropdown-option">Option 1</li>
        <li class="dropdown-option">Option 2</li>
        <li class="dropdown-option">Option 3</li>
    </ul>
</div>

[data-theme] {

  /* ================= WRAPPER ================= */

  .dropdown-wrapper {
    position: relative;
    width: var(--token-input-width);
    font-family: var(--text-font-stack);
  }

  /* if dropdown also carries input-wrapper styles, remove inherited side padding */
  .dropdown-wrapper.input-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* ================= FIELD ================= */

  .dropdown-field {
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
  }

  .dropdown-value {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  /* ================= MENU ================= */

  .dropdown-wrapper .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: auto;

    margin: 0;
    padding: 0;

    background: var(--token-menu-container-color);
    border: 1px solid var(--token-outline);
    border-radius: var(--token-input-radius);
    box-shadow: var(--token-menu-container-shadow);

    list-style: none;
    display: none;
    z-index: 20;
    overflow: hidden;
  }

  /* ================= OPEN STATE ================= */

  .dropdown-wrapper.is-open .dropdown-menu {
    display: block;
  }

  /* ================= OPTIONS ================= */

  .dropdown-option {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 48px;

    margin: 0;
    padding: 0 16px; // horizontal only; keeps list continuous

    box-sizing: border-box;
    border-radius: 0;
    background: transparent;
    color: var(--token-menu-item-label-text);
    font-size: 0.9rem;
    cursor: pointer;
  }

  .dropdown-option:hover {
    background: rgba(36, 121, 132, 0.05);
  }

  .dropdown-option.is-selected {
    background: rgba(36, 121, 132, 0.10);
  }

  /* ================= MKDOCS HARD RESET ================= */

  .md-typeset .dropdown-wrapper ul.dropdown-menu,
  .md-typeset .dropdown-wrapper ul.dropdown-menu li {
    list-style: none !important;

    margin: 0 !important;
    margin-left: 0 !important;   // 🔥 THIS fixes your issue
    padding: 0 !important;

    padding-left: 0 !important;
  }

  .md-typeset .dropdown-wrapper ul.dropdown-menu li {
    display: block !important;
  }

  .md-typeset .dropdown-wrapper .dropdown-menu li.dropdown-option {
    text-indent: 0 !important;
  }

  .dropdown-option {
    justify-content: flex-start;
  }

  .dropdown-option::marker {
    content: none;
  }
}

function initializeDropdowns() {
  const wrappers = document.querySelectorAll('.dropdown-wrapper');

  wrappers.forEach((wrapper) => {
    // ✅ prevent duplicate binding
    if (wrapper.dataset.dropdownInitialized === 'true') return;
    wrapper.dataset.dropdownInitialized = 'true';

    const field = wrapper.querySelector('.dropdown-field');
    const valueEl = wrapper.querySelector('.dropdown-value');
    const options = wrapper.querySelectorAll('.dropdown-option');

    if (!field) return;

    // ✅ CLICK → toggle menu
    field.addEventListener('click', (event) => {
      event.stopPropagation();

      // close others
      document.querySelectorAll('.dropdown-wrapper.is-open').forEach((el) => {
        if (el !== wrapper) el.classList.remove('is-open');
      });

      wrapper.classList.toggle('is-open');
    });

    // ✅ OPTION SELECT
    options.forEach((option) => {
      option.addEventListener('click', (event) => {
        event.stopPropagation();

        const text = option.textContent.trim();

        if (valueEl) valueEl.textContent = text;

        wrapper.classList.remove('is-open');

        options.forEach((opt) => opt.classList.remove('is-selected'));
        option.classList.add('is-selected');
      });
    });
  });

  // ✅ CLICK OUTSIDE → close all
  document.addEventListener('click', (event) => {
    document.querySelectorAll('.dropdown-wrapper.is-open').forEach((wrapper) => {
      if (!wrapper.contains(event.target)) {
        wrapper.classList.remove('is-open');
      }
    });
  });
}

/* ✅ Works for BOTH MkDocs + normal load */
document.addEventListener('DOMContentLoaded', initializeDropdowns);

if (typeof document$ !== 'undefined' && document$.subscribe) {
  document$.subscribe(initializeDropdowns);
}

Select option

Label

• Option 1
• Option 2
• Option 3

Code

HTMLCSSJS

<div class="dropdown-wrapper input-wrapper input-outlined trailing-icon">
    <div class="input-field dropdown-field trailing-icon">
        <span class="dropdown-value">Select option</span>
        <span class="input-icon trailing" aria-hidden="true">
            <svg viewBox="0 0 24 24" fill="none">
                <circle cx="12" cy="12" r="10"
                        stroke="currentColor"
                        stroke-width="2"/>
                <path d="M9 9L15 15M15 9L9 15"
                      stroke="currentColor"
                      stroke-width="2"
                      stroke-linecap="round"/>
            </svg>
        </span>
    </div>
    <label class="input-label">Label</label>
    <ul class="dropdown-menu">
        <li class="dropdown-option">Option 1</li>
        <li class="dropdown-option">Option 2</li>
        <li class="dropdown-option">Option 3</li>
    </ul>
</div>

[data-theme] {

  /* ================= WRAPPER ================= */

  .dropdown-wrapper {
    position: relative;
    width: var(--token-input-width);
    font-family: var(--text-font-stack);
  }

  /* if dropdown also carries input-wrapper styles, remove inherited side padding */
  .dropdown-wrapper.input-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* ================= FIELD ================= */

  .dropdown-field {
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
  }

  .dropdown-value {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  /* ================= MENU ================= */

  .dropdown-wrapper .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: auto;

    margin: 0;
    padding: 0;

    background: var(--token-menu-container-color);
    border: 1px solid var(--token-outline);
    border-radius: var(--token-input-radius);
    box-shadow: var(--token-menu-container-shadow);

    list-style: none;
    display: none;
    z-index: 20;
    overflow: hidden;
  }

  /* ================= OPEN STATE ================= */

  .dropdown-wrapper.is-open .dropdown-menu {
    display: block;
  }

  /* ================= OPTIONS ================= */

  .dropdown-option {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 48px;

    margin: 0;
    padding: 0 16px; // horizontal only; keeps list continuous

    box-sizing: border-box;
    border-radius: 0;
    background: transparent;
    color: var(--token-menu-item-label-text);
    font-size: 0.9rem;
    cursor: pointer;
  }

  .dropdown-option:hover {
    background: rgba(36, 121, 132, 0.05);
  }

  .dropdown-option.is-selected {
    background: rgba(36, 121, 132, 0.10);
  }

  /* ================= MKDOCS HARD RESET ================= */

  .md-typeset .dropdown-wrapper ul.dropdown-menu,
  .md-typeset .dropdown-wrapper ul.dropdown-menu li {
    list-style: none !important;

    margin: 0 !important;
    margin-left: 0 !important;   // 🔥 THIS fixes your issue
    padding: 0 !important;

    padding-left: 0 !important;
  }

  .md-typeset .dropdown-wrapper ul.dropdown-menu li {
    display: block !important;
  }

  .md-typeset .dropdown-wrapper .dropdown-menu li.dropdown-option {
    text-indent: 0 !important;
  }

  .dropdown-option {
    justify-content: flex-start;
  }

  .dropdown-option::marker {
    content: none;
  }
}

function initializeDropdowns() {
  const wrappers = document.querySelectorAll('.dropdown-wrapper');

  wrappers.forEach((wrapper) => {
    // ✅ prevent duplicate binding
    if (wrapper.dataset.dropdownInitialized === 'true') return;
    wrapper.dataset.dropdownInitialized = 'true';

    const field = wrapper.querySelector('.dropdown-field');
    const valueEl = wrapper.querySelector('.dropdown-value');
    const options = wrapper.querySelectorAll('.dropdown-option');

    if (!field) return;

    // ✅ CLICK → toggle menu
    field.addEventListener('click', (event) => {
      event.stopPropagation();

      // close others
      document.querySelectorAll('.dropdown-wrapper.is-open').forEach((el) => {
        if (el !== wrapper) el.classList.remove('is-open');
      });

      wrapper.classList.toggle('is-open');
    });

    // ✅ OPTION SELECT
    options.forEach((option) => {
      option.addEventListener('click', (event) => {
        event.stopPropagation();

        const text = option.textContent.trim();

        if (valueEl) valueEl.textContent = text;

        wrapper.classList.remove('is-open');

        options.forEach((opt) => opt.classList.remove('is-selected'));
        option.classList.add('is-selected');
      });
    });
  });

  // ✅ CLICK OUTSIDE → close all
  document.addEventListener('click', (event) => {
    document.querySelectorAll('.dropdown-wrapper.is-open').forEach((wrapper) => {
      if (!wrapper.contains(event.target)) {
        wrapper.classList.remove('is-open');
      }
    });
  });
}

/* ✅ Works for BOTH MkDocs + normal load */
document.addEventListener('DOMContentLoaded', initializeDropdowns);

if (typeof document$ !== 'undefined' && document$.subscribe) {
  document$.subscribe(initializeDropdowns);
}

Select option

Label

• Option 1
• Option 2
• Option 3

Code

HTMLCSSJS

<div data-theme>
    <div class="state-box">
        <div class="dropdown-wrapper input-wrapper input-filled trailing-icon">
            <div class="input-field dropdown-field trailing-icon is-hover">
                <span class="dropdown-value">Select option</span>
                <span class="input-icon trailing" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none">
                    <circle cx="12" cy="12" r="10"
                            stroke="currentColor"
                            stroke-width="2"/>
                    <path d="M9 9L15 15M15 9L9 15"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"/>
                </svg>
            </span>
            </div>
            <label class="input-label">Label</label>
            <ul class="dropdown-menu">
                <li class="dropdown-option">Option 1</li>
                <li class="dropdown-option">Option 2</li>
                <li class="dropdown-option">Option 3</li>
            </ul>
        </div>
    </div>
</div>

[data-theme] {

  /* ================= WRAPPER ================= */

  .dropdown-wrapper {
    position: relative;
    width: var(--token-input-width);
    font-family: var(--text-font-stack);
  }

  /* if dropdown also carries input-wrapper styles, remove inherited side padding */
  .dropdown-wrapper.input-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* ================= FIELD ================= */

  .dropdown-field {
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
  }

  .dropdown-value {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  /* ================= MENU ================= */

  .dropdown-wrapper .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: auto;

    margin: 0;
    padding: 0;

    background: var(--token-menu-container-color);
    border: 1px solid var(--token-outline);
    border-radius: var(--token-input-radius);
    box-shadow: var(--token-menu-container-shadow);

    list-style: none;
    display: none;
    z-index: 20;
    overflow: hidden;
  }

  /* ================= OPEN STATE ================= */

  .dropdown-wrapper.is-open .dropdown-menu {
    display: block;
  }

  /* ================= OPTIONS ================= */

  .dropdown-option {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 48px;

    margin: 0;
    padding: 0 16px; // horizontal only; keeps list continuous

    box-sizing: border-box;
    border-radius: 0;
    background: transparent;
    color: var(--token-menu-item-label-text);
    font-size: 0.9rem;
    cursor: pointer;
  }

  .dropdown-option:hover {
    background: rgba(36, 121, 132, 0.05);
  }

  .dropdown-option.is-selected {
    background: rgba(36, 121, 132, 0.10);
  }

  /* ================= MKDOCS HARD RESET ================= */

  .md-typeset .dropdown-wrapper ul.dropdown-menu,
  .md-typeset .dropdown-wrapper ul.dropdown-menu li {
    list-style: none !important;

    margin: 0 !important;
    margin-left: 0 !important;   // 🔥 THIS fixes your issue
    padding: 0 !important;

    padding-left: 0 !important;
  }

  .md-typeset .dropdown-wrapper ul.dropdown-menu li {
    display: block !important;
  }

  .md-typeset .dropdown-wrapper .dropdown-menu li.dropdown-option {
    text-indent: 0 !important;
  }

  .dropdown-option {
    justify-content: flex-start;
  }

  .dropdown-option::marker {
    content: none;
  }
}

function initializeDropdowns() {
  const wrappers = document.querySelectorAll('.dropdown-wrapper');

  wrappers.forEach((wrapper) => {
    // ✅ prevent duplicate binding
    if (wrapper.dataset.dropdownInitialized === 'true') return;
    wrapper.dataset.dropdownInitialized = 'true';

    const field = wrapper.querySelector('.dropdown-field');
    const valueEl = wrapper.querySelector('.dropdown-value');
    const options = wrapper.querySelectorAll('.dropdown-option');

    if (!field) return;

    // ✅ CLICK → toggle menu
    field.addEventListener('click', (event) => {
      event.stopPropagation();

      // close others
      document.querySelectorAll('.dropdown-wrapper.is-open').forEach((el) => {
        if (el !== wrapper) el.classList.remove('is-open');
      });

      wrapper.classList.toggle('is-open');
    });

    // ✅ OPTION SELECT
    options.forEach((option) => {
      option.addEventListener('click', (event) => {
        event.stopPropagation();

        const text = option.textContent.trim();

        if (valueEl) valueEl.textContent = text;

        wrapper.classList.remove('is-open');

        options.forEach((opt) => opt.classList.remove('is-selected'));
        option.classList.add('is-selected');
      });
    });
  });

  // ✅ CLICK OUTSIDE → close all
  document.addEventListener('click', (event) => {
    document.querySelectorAll('.dropdown-wrapper.is-open').forEach((wrapper) => {
      if (!wrapper.contains(event.target)) {
        wrapper.classList.remove('is-open');
      }
    });
  });
}

/* ✅ Works for BOTH MkDocs + normal load */
document.addEventListener('DOMContentLoaded', initializeDropdowns);

if (typeof document$ !== 'undefined' && document$.subscribe) {
  document$.subscribe(initializeDropdowns);
}

Select option

Label

• Option 1
• Option 2
• Option 3

Code

HTMLCSSJS

<div data-theme>
    <div class="state-box">
        <div class="dropdown-wrapper input-wrapper input-outlined trailing-icon">
            <div class="input-field dropdown-field trailing-icon is-hover">
                <span class="dropdown-value">Select option</span>
                <span class="input-icon trailing" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none">
                    <circle cx="12" cy="12" r="10"
                            stroke="currentColor"
                            stroke-width="2"/>
                    <path d="M9 9L15 15M15 9L9 15"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"/>
                </svg>
            </span>
            </div>
            <label class="input-label">Label</label>
            <ul class="dropdown-menu">
                <li class="dropdown-option">Option 1</li>
                <li class="dropdown-option">Option 2</li>
                <li class="dropdown-option">Option 3</li>
            </ul>
        </div>
    </div>
</div>

[data-theme] {

  /* ================= WRAPPER ================= */

  .dropdown-wrapper {
    position: relative;
    width: var(--token-input-width);
    font-family: var(--text-font-stack);
  }

  /* if dropdown also carries input-wrapper styles, remove inherited side padding */
  .dropdown-wrapper.input-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* ================= FIELD ================= */

  .dropdown-field {
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
  }

  .dropdown-value {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  /* ================= MENU ================= */

  .dropdown-wrapper .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: auto;

    margin: 0;
    padding: 0;

    background: var(--token-menu-container-color);
    border: 1px solid var(--token-outline);
    border-radius: var(--token-input-radius);
    box-shadow: var(--token-menu-container-shadow);

    list-style: none;
    display: none;
    z-index: 20;
    overflow: hidden;
  }

  /* ================= OPEN STATE ================= */

  .dropdown-wrapper.is-open .dropdown-menu {
    display: block;
  }

  /* ================= OPTIONS ================= */

  .dropdown-option {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 48px;

    margin: 0;
    padding: 0 16px; // horizontal only; keeps list continuous

    box-sizing: border-box;
    border-radius: 0;
    background: transparent;
    color: var(--token-menu-item-label-text);
    font-size: 0.9rem;
    cursor: pointer;
  }

  .dropdown-option:hover {
    background: rgba(36, 121, 132, 0.05);
  }

  .dropdown-option.is-selected {
    background: rgba(36, 121, 132, 0.10);
  }

  /* ================= MKDOCS HARD RESET ================= */

  .md-typeset .dropdown-wrapper ul.dropdown-menu,
  .md-typeset .dropdown-wrapper ul.dropdown-menu li {
    list-style: none !important;

    margin: 0 !important;
    margin-left: 0 !important;   // 🔥 THIS fixes your issue
    padding: 0 !important;

    padding-left: 0 !important;
  }

  .md-typeset .dropdown-wrapper ul.dropdown-menu li {
    display: block !important;
  }

  .md-typeset .dropdown-wrapper .dropdown-menu li.dropdown-option {
    text-indent: 0 !important;
  }

  .dropdown-option {
    justify-content: flex-start;
  }

  .dropdown-option::marker {
    content: none;
  }
}

function initializeDropdowns() {
  const wrappers = document.querySelectorAll('.dropdown-wrapper');

  wrappers.forEach((wrapper) => {
    // ✅ prevent duplicate binding
    if (wrapper.dataset.dropdownInitialized === 'true') return;
    wrapper.dataset.dropdownInitialized = 'true';

    const field = wrapper.querySelector('.dropdown-field');
    const valueEl = wrapper.querySelector('.dropdown-value');
    const options = wrapper.querySelectorAll('.dropdown-option');

    if (!field) return;

    // ✅ CLICK → toggle menu
    field.addEventListener('click', (event) => {
      event.stopPropagation();

      // close others
      document.querySelectorAll('.dropdown-wrapper.is-open').forEach((el) => {
        if (el !== wrapper) el.classList.remove('is-open');
      });

      wrapper.classList.toggle('is-open');
    });

    // ✅ OPTION SELECT
    options.forEach((option) => {
      option.addEventListener('click', (event) => {
        event.stopPropagation();

        const text = option.textContent.trim();

        if (valueEl) valueEl.textContent = text;

        wrapper.classList.remove('is-open');

        options.forEach((opt) => opt.classList.remove('is-selected'));
        option.classList.add('is-selected');
      });
    });
  });

  // ✅ CLICK OUTSIDE → close all
  document.addEventListener('click', (event) => {
    document.querySelectorAll('.dropdown-wrapper.is-open').forEach((wrapper) => {
      if (!wrapper.contains(event.target)) {
        wrapper.classList.remove('is-open');
      }
    });
  });
}

/* ✅ Works for BOTH MkDocs + normal load */
document.addEventListener('DOMContentLoaded', initializeDropdowns);

if (typeof document$ !== 'undefined' && document$.subscribe) {
  document$.subscribe(initializeDropdowns);
}

Select option

Label

• Option 1
• Option 2
• Option 3

Code

HTMLCSSJS

<div data-theme>
    <div class="state-box">
        <div class="dropdown-wrapper input-wrapper input-filled trailing-icon open">
            <div class="input-field dropdown-field trailing-icon is-focus">
                <span class="dropdown-value">Select option</span>
                <span class="input-icon trailing" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none">
                    <circle cx="12" cy="12" r="10"
                            stroke="currentColor"
                            stroke-width="2"/>
                    <path d="M9 9L15 15M15 9L9 15"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"/>
                </svg>
            </span>
            </div>
            <label class="input-label">Label</label>
            <ul class="dropdown-menu">
                <li class="dropdown-option">Option 1</li>
                <li class="dropdown-option">Option 2</li>
                <li class="dropdown-option">Option 3</li>
            </ul>
        </div>
    </div>
</div>

[data-theme] {

  /* ================= WRAPPER ================= */

  .dropdown-wrapper {
    position: relative;
    width: var(--token-input-width);
    font-family: var(--text-font-stack);
  }

  /* if dropdown also carries input-wrapper styles, remove inherited side padding */
  .dropdown-wrapper.input-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* ================= FIELD ================= */

  .dropdown-field {
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
  }

  .dropdown-value {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  /* ================= MENU ================= */

  .dropdown-wrapper .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: auto;

    margin: 0;
    padding: 0;

    background: var(--token-menu-container-color);
    border: 1px solid var(--token-outline);
    border-radius: var(--token-input-radius);
    box-shadow: var(--token-menu-container-shadow);

    list-style: none;
    display: none;
    z-index: 20;
    overflow: hidden;
  }

  /* ================= OPEN STATE ================= */

  .dropdown-wrapper.is-open .dropdown-menu {
    display: block;
  }

  /* ================= OPTIONS ================= */

  .dropdown-option {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 48px;

    margin: 0;
    padding: 0 16px; // horizontal only; keeps list continuous

    box-sizing: border-box;
    border-radius: 0;
    background: transparent;
    color: var(--token-menu-item-label-text);
    font-size: 0.9rem;
    cursor: pointer;
  }

  .dropdown-option:hover {
    background: rgba(36, 121, 132, 0.05);
  }

  .dropdown-option.is-selected {
    background: rgba(36, 121, 132, 0.10);
  }

  /* ================= MKDOCS HARD RESET ================= */

  .md-typeset .dropdown-wrapper ul.dropdown-menu,
  .md-typeset .dropdown-wrapper ul.dropdown-menu li {
    list-style: none !important;

    margin: 0 !important;
    margin-left: 0 !important;   // 🔥 THIS fixes your issue
    padding: 0 !important;

    padding-left: 0 !important;
  }

  .md-typeset .dropdown-wrapper ul.dropdown-menu li {
    display: block !important;
  }

  .md-typeset .dropdown-wrapper .dropdown-menu li.dropdown-option {
    text-indent: 0 !important;
  }

  .dropdown-option {
    justify-content: flex-start;
  }

  .dropdown-option::marker {
    content: none;
  }
}

function initializeDropdowns() {
  const wrappers = document.querySelectorAll('.dropdown-wrapper');

  wrappers.forEach((wrapper) => {
    // ✅ prevent duplicate binding
    if (wrapper.dataset.dropdownInitialized === 'true') return;
    wrapper.dataset.dropdownInitialized = 'true';

    const field = wrapper.querySelector('.dropdown-field');
    const valueEl = wrapper.querySelector('.dropdown-value');
    const options = wrapper.querySelectorAll('.dropdown-option');

    if (!field) return;

    // ✅ CLICK → toggle menu
    field.addEventListener('click', (event) => {
      event.stopPropagation();

      // close others
      document.querySelectorAll('.dropdown-wrapper.is-open').forEach((el) => {
        if (el !== wrapper) el.classList.remove('is-open');
      });

      wrapper.classList.toggle('is-open');
    });

    // ✅ OPTION SELECT
    options.forEach((option) => {
      option.addEventListener('click', (event) => {
        event.stopPropagation();

        const text = option.textContent.trim();

        if (valueEl) valueEl.textContent = text;

        wrapper.classList.remove('is-open');

        options.forEach((opt) => opt.classList.remove('is-selected'));
        option.classList.add('is-selected');
      });
    });
  });

  // ✅ CLICK OUTSIDE → close all
  document.addEventListener('click', (event) => {
    document.querySelectorAll('.dropdown-wrapper.is-open').forEach((wrapper) => {
      if (!wrapper.contains(event.target)) {
        wrapper.classList.remove('is-open');
      }
    });
  });
}

/* ✅ Works for BOTH MkDocs + normal load */
document.addEventListener('DOMContentLoaded', initializeDropdowns);

if (typeof document$ !== 'undefined' && document$.subscribe) {
  document$.subscribe(initializeDropdowns);
}

Selected Item

Label

• Option 1
• Option 2
• Option 3

Code

HTMLCSSJS

<div data-theme>
    <div class="state-box">
        <div class="dropdown-wrapper input-wrapper input-outlined trailing-icon open">
            <div class="input-field dropdown-field trailing-icon is-focus">
                <span class="dropdown-value">Selected Item</span>
                <span class="input-icon trailing" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none">
                    <circle cx="12" cy="12" r="10"
                            stroke="currentColor"
                            stroke-width="2"/>
                    <path d="M9 9L15 15M15 9L9 15"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"/>
                </svg>
            </span>
            </div>
            <label class="input-label">Label</label>
            <ul class="dropdown-menu">
                <li class="dropdown-option is-selected">Option 1</li>
                <li class="dropdown-option">Option 2</li>
                <li class="dropdown-option">Option 3</li>
            </ul>
        </div>
    </div>
</div>

[data-theme] {

  /* ================= WRAPPER ================= */

  .dropdown-wrapper {
    position: relative;
    width: var(--token-input-width);
    font-family: var(--text-font-stack);
  }

  /* if dropdown also carries input-wrapper styles, remove inherited side padding */
  .dropdown-wrapper.input-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* ================= FIELD ================= */

  .dropdown-field {
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
  }

  .dropdown-value {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  /* ================= MENU ================= */

  .dropdown-wrapper .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: auto;

    margin: 0;
    padding: 0;

    background: var(--token-menu-container-color);
    border: 1px solid var(--token-outline);
    border-radius: var(--token-input-radius);
    box-shadow: var(--token-menu-container-shadow);

    list-style: none;
    display: none;
    z-index: 20;
    overflow: hidden;
  }

  /* ================= OPEN STATE ================= */

  .dropdown-wrapper.is-open .dropdown-menu {
    display: block;
  }

  /* ================= OPTIONS ================= */

  .dropdown-option {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 48px;

    margin: 0;
    padding: 0 16px; // horizontal only; keeps list continuous

    box-sizing: border-box;
    border-radius: 0;
    background: transparent;
    color: var(--token-menu-item-label-text);
    font-size: 0.9rem;
    cursor: pointer;
  }

  .dropdown-option:hover {
    background: rgba(36, 121, 132, 0.05);
  }

  .dropdown-option.is-selected {
    background: rgba(36, 121, 132, 0.10);
  }

  /* ================= MKDOCS HARD RESET ================= */

  .md-typeset .dropdown-wrapper ul.dropdown-menu,
  .md-typeset .dropdown-wrapper ul.dropdown-menu li {
    list-style: none !important;

    margin: 0 !important;
    margin-left: 0 !important;   // 🔥 THIS fixes your issue
    padding: 0 !important;

    padding-left: 0 !important;
  }

  .md-typeset .dropdown-wrapper ul.dropdown-menu li {
    display: block !important;
  }

  .md-typeset .dropdown-wrapper .dropdown-menu li.dropdown-option {
    text-indent: 0 !important;
  }

  .dropdown-option {
    justify-content: flex-start;
  }

  .dropdown-option::marker {
    content: none;
  }
}

function initializeDropdowns() {
  const wrappers = document.querySelectorAll('.dropdown-wrapper');

  wrappers.forEach((wrapper) => {
    // ✅ prevent duplicate binding
    if (wrapper.dataset.dropdownInitialized === 'true') return;
    wrapper.dataset.dropdownInitialized = 'true';

    const field = wrapper.querySelector('.dropdown-field');
    const valueEl = wrapper.querySelector('.dropdown-value');
    const options = wrapper.querySelectorAll('.dropdown-option');

    if (!field) return;

    // ✅ CLICK → toggle menu
    field.addEventListener('click', (event) => {
      event.stopPropagation();

      // close others
      document.querySelectorAll('.dropdown-wrapper.is-open').forEach((el) => {
        if (el !== wrapper) el.classList.remove('is-open');
      });

      wrapper.classList.toggle('is-open');
    });

    // ✅ OPTION SELECT
    options.forEach((option) => {
      option.addEventListener('click', (event) => {
        event.stopPropagation();

        const text = option.textContent.trim();

        if (valueEl) valueEl.textContent = text;

        wrapper.classList.remove('is-open');

        options.forEach((opt) => opt.classList.remove('is-selected'));
        option.classList.add('is-selected');
      });
    });
  });

  // ✅ CLICK OUTSIDE → close all
  document.addEventListener('click', (event) => {
    document.querySelectorAll('.dropdown-wrapper.is-open').forEach((wrapper) => {
      if (!wrapper.contains(event.target)) {
        wrapper.classList.remove('is-open');
      }
    });
  });
}

/* ✅ Works for BOTH MkDocs + normal load */
document.addEventListener('DOMContentLoaded', initializeDropdowns);

if (typeof document$ !== 'undefined' && document$.subscribe) {
  document$.subscribe(initializeDropdowns);
}

Select option

Label

• Option 1
• Option 2
• Option 3

Code

HTMLCSSJS

<div data-theme>
    <div class="state-box">
        <div class="dropdown-wrapper input-wrapper input-filled trailing-icon">
            <div class="input-field dropdown-field trailing-icon error">
                <span class="dropdown-value">Select option</span>
                <span class="input-icon trailing" aria-hidden="true">
                    <svg viewBox="0 0 24 24">
                        <circle cx="12" cy="12" r="10" fill="currentColor"/>
                        <rect x="11" y="6" width="2" height="8" fill="#fff" rx="1"/>
                        <circle cx="12" cy="17" r="1.2" fill="#fff"/>
                    </svg>
                </span>
            </div>
            <label class="input-label">Label</label>
            <ul class="dropdown-menu">
                <li class="dropdown-option">Option 1</li>
                <li class="dropdown-option">Option 2</li>
                <li class="dropdown-option">Option 3</li>
            </ul>
        </div>
    </div>
</div>

[data-theme] {

  /* ================= WRAPPER ================= */

  .dropdown-wrapper {
    position: relative;
    width: var(--token-input-width);
    font-family: var(--text-font-stack);
  }

  /* if dropdown also carries input-wrapper styles, remove inherited side padding */
  .dropdown-wrapper.input-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* ================= FIELD ================= */

  .dropdown-field {
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
  }

  .dropdown-value {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  /* ================= MENU ================= */

  .dropdown-wrapper .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: auto;

    margin: 0;
    padding: 0;

    background: var(--token-menu-container-color);
    border: 1px solid var(--token-outline);
    border-radius: var(--token-input-radius);
    box-shadow: var(--token-menu-container-shadow);

    list-style: none;
    display: none;
    z-index: 20;
    overflow: hidden;
  }

  /* ================= OPEN STATE ================= */

  .dropdown-wrapper.is-open .dropdown-menu {
    display: block;
  }

  /* ================= OPTIONS ================= */

  .dropdown-option {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 48px;

    margin: 0;
    padding: 0 16px; // horizontal only; keeps list continuous

    box-sizing: border-box;
    border-radius: 0;
    background: transparent;
    color: var(--token-menu-item-label-text);
    font-size: 0.9rem;
    cursor: pointer;
  }

  .dropdown-option:hover {
    background: rgba(36, 121, 132, 0.05);
  }

  .dropdown-option.is-selected {
    background: rgba(36, 121, 132, 0.10);
  }

  /* ================= MKDOCS HARD RESET ================= */

  .md-typeset .dropdown-wrapper ul.dropdown-menu,
  .md-typeset .dropdown-wrapper ul.dropdown-menu li {
    list-style: none !important;

    margin: 0 !important;
    margin-left: 0 !important;   // 🔥 THIS fixes your issue
    padding: 0 !important;

    padding-left: 0 !important;
  }

  .md-typeset .dropdown-wrapper ul.dropdown-menu li {
    display: block !important;
  }

  .md-typeset .dropdown-wrapper .dropdown-menu li.dropdown-option {
    text-indent: 0 !important;
  }

  .dropdown-option {
    justify-content: flex-start;
  }

  .dropdown-option::marker {
    content: none;
  }
}

function initializeDropdowns() {
  const wrappers = document.querySelectorAll('.dropdown-wrapper');

  wrappers.forEach((wrapper) => {
    // ✅ prevent duplicate binding
    if (wrapper.dataset.dropdownInitialized === 'true') return;
    wrapper.dataset.dropdownInitialized = 'true';

    const field = wrapper.querySelector('.dropdown-field');
    const valueEl = wrapper.querySelector('.dropdown-value');
    const options = wrapper.querySelectorAll('.dropdown-option');

    if (!field) return;

    // ✅ CLICK → toggle menu
    field.addEventListener('click', (event) => {
      event.stopPropagation();

      // close others
      document.querySelectorAll('.dropdown-wrapper.is-open').forEach((el) => {
        if (el !== wrapper) el.classList.remove('is-open');
      });

      wrapper.classList.toggle('is-open');
    });

    // ✅ OPTION SELECT
    options.forEach((option) => {
      option.addEventListener('click', (event) => {
        event.stopPropagation();

        const text = option.textContent.trim();

        if (valueEl) valueEl.textContent = text;

        wrapper.classList.remove('is-open');

        options.forEach((opt) => opt.classList.remove('is-selected'));
        option.classList.add('is-selected');
      });
    });
  });

  // ✅ CLICK OUTSIDE → close all
  document.addEventListener('click', (event) => {
    document.querySelectorAll('.dropdown-wrapper.is-open').forEach((wrapper) => {
      if (!wrapper.contains(event.target)) {
        wrapper.classList.remove('is-open');
      }
    });
  });
}

/* ✅ Works for BOTH MkDocs + normal load */
document.addEventListener('DOMContentLoaded', initializeDropdowns);

if (typeof document$ !== 'undefined' && document$.subscribe) {
  document$.subscribe(initializeDropdowns);
}

Select option

Label

• Option 1
• Option 2
• Option 3

Code

HTMLCSSJS

<div data-theme>
    <div class="state-box">
        <div class="dropdown-wrapper input-wrapper input-outlined trailing-icon">
            <div class="input-field dropdown-field trailing-icon error">
                <span class="dropdown-value">Select option</span>
                <span class="input-icon trailing" aria-hidden="true">
                    <svg viewBox="0 0 24 24">
                        <circle cx="12" cy="12" r="10" fill="currentColor"/>
                        <rect x="11" y="6" width="2" height="8" fill="#fff" rx="1"/>
                        <circle cx="12" cy="17" r="1.2" fill="#fff"/>
                    </svg>
                </span>
            </div>
            <label class="input-label">Label</label>
            <ul class="dropdown-menu">
                <li class="dropdown-option">Option 1</li>
                <li class="dropdown-option">Option 2</li>
                <li class="dropdown-option">Option 3</li>
            </ul>
        </div>
    </div>
</div>

[data-theme] {

  /* ================= WRAPPER ================= */

  .dropdown-wrapper {
    position: relative;
    width: var(--token-input-width);
    font-family: var(--text-font-stack);
  }

  /* if dropdown also carries input-wrapper styles, remove inherited side padding */
  .dropdown-wrapper.input-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* ================= FIELD ================= */

  .dropdown-field {
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
  }

  .dropdown-value {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  /* ================= MENU ================= */

  .dropdown-wrapper .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: auto;

    margin: 0;
    padding: 0;

    background: var(--token-menu-container-color);
    border: 1px solid var(--token-outline);
    border-radius: var(--token-input-radius);
    box-shadow: var(--token-menu-container-shadow);

    list-style: none;
    display: none;
    z-index: 20;
    overflow: hidden;
  }

  /* ================= OPEN STATE ================= */

  .dropdown-wrapper.is-open .dropdown-menu {
    display: block;
  }

  /* ================= OPTIONS ================= */

  .dropdown-option {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 48px;

    margin: 0;
    padding: 0 16px; // horizontal only; keeps list continuous

    box-sizing: border-box;
    border-radius: 0;
    background: transparent;
    color: var(--token-menu-item-label-text);
    font-size: 0.9rem;
    cursor: pointer;
  }

  .dropdown-option:hover {
    background: rgba(36, 121, 132, 0.05);
  }

  .dropdown-option.is-selected {
    background: rgba(36, 121, 132, 0.10);
  }

  /* ================= MKDOCS HARD RESET ================= */

  .md-typeset .dropdown-wrapper ul.dropdown-menu,
  .md-typeset .dropdown-wrapper ul.dropdown-menu li {
    list-style: none !important;

    margin: 0 !important;
    margin-left: 0 !important;   // 🔥 THIS fixes your issue
    padding: 0 !important;

    padding-left: 0 !important;
  }

  .md-typeset .dropdown-wrapper ul.dropdown-menu li {
    display: block !important;
  }

  .md-typeset .dropdown-wrapper .dropdown-menu li.dropdown-option {
    text-indent: 0 !important;
  }

  .dropdown-option {
    justify-content: flex-start;
  }

  .dropdown-option::marker {
    content: none;
  }
}

function initializeDropdowns() {
  const wrappers = document.querySelectorAll('.dropdown-wrapper');

  wrappers.forEach((wrapper) => {
    // ✅ prevent duplicate binding
    if (wrapper.dataset.dropdownInitialized === 'true') return;
    wrapper.dataset.dropdownInitialized = 'true';

    const field = wrapper.querySelector('.dropdown-field');
    const valueEl = wrapper.querySelector('.dropdown-value');
    const options = wrapper.querySelectorAll('.dropdown-option');

    if (!field) return;

    // ✅ CLICK → toggle menu
    field.addEventListener('click', (event) => {
      event.stopPropagation();

      // close others
      document.querySelectorAll('.dropdown-wrapper.is-open').forEach((el) => {
        if (el !== wrapper) el.classList.remove('is-open');
      });

      wrapper.classList.toggle('is-open');
    });

    // ✅ OPTION SELECT
    options.forEach((option) => {
      option.addEventListener('click', (event) => {
        event.stopPropagation();

        const text = option.textContent.trim();

        if (valueEl) valueEl.textContent = text;

        wrapper.classList.remove('is-open');

        options.forEach((opt) => opt.classList.remove('is-selected'));
        option.classList.add('is-selected');
      });
    });
  });

  // ✅ CLICK OUTSIDE → close all
  document.addEventListener('click', (event) => {
    document.querySelectorAll('.dropdown-wrapper.is-open').forEach((wrapper) => {
      if (!wrapper.contains(event.target)) {
        wrapper.classList.remove('is-open');
      }
    });
  });
}

/* ✅ Works for BOTH MkDocs + normal load */
document.addEventListener('DOMContentLoaded', initializeDropdowns);

if (typeof document$ !== 'undefined' && document$.subscribe) {
  document$.subscribe(initializeDropdowns);
}