@nuvia-ui/components 4.0.1

package/src/ds-dropdown/ds-dropdown.js

@@ -0,0 +1,891 @@
+import { LitElement, html, css, nothing } from 'lit';
+import { FieldMessageMixin, fieldMessageStyles } from '../mixins/field-message.mixin.js';
+import { FieldLabelMixin, fieldLabelStyles } from '../mixins/field-label.mixin.js';
+import { PositionerController } from '../ds-tooltip/positioner.js';
+import '../ds-icon-button/ds-icon-button.js';
+import '../ds-icon/ds-icon.js';
+import '../ds-tooltip/ds-tooltip.js';
+import '../ds-dropdown-panel/ds-dropdown-panel.js';
+import '../ds-list-item/ds-list-item.js';
+
+/**
+ * Dropdown component using ds-menu and floating-ui for robust selection.
+ *
+ * @element ds-dropdown
+ *
+ * @slot - Default slot for ds-list-item elements
+ *
+ * @prop {string} label - Label text
+ * @prop {string} info - Info tooltip text
+ * @prop {string} labelPosition - Label position: 'top' | 'inline-start' (default: 'top')
+ * @prop {string} labelWidth - Fixed label width for inline layout (e.g., '100px')
+ * @prop {string} placeholder - Placeholder text
+ * @prop {string} value - Selected value(s). Comma separated string for simplicity in basic usage, or can be bound as array in complex apps.
+ * @prop {string} helper - Help text
+ * @prop {string} validationStatus - 'error' | 'success'
+ * @prop {string} validationMessage - Error message
+ * @prop {boolean} disabled - Disabled state
+ * @prop {boolean} required - Required field
+ * @prop {boolean} clearable - Show clear button
+ * @prop {boolean} multiple - Enable multiple selection
+ * @prop {boolean} selectAll - Enable "Select All" option (only for multiple)
+ *
+ * @fires change - Fired when selection changes
+ * @fires info-click - Fired when info button is clicked
+ */
+export class DsDropdown extends FieldLabelMixin(FieldMessageMixin(LitElement)) {
+  static properties = {
+    label: { type: String },
+    info: { type: String },
+    labelPosition: { type: String, attribute: 'label-position' },
+    labelWidth: { type: String, attribute: 'label-width' },
+    placeholder: { type: String },
+    value: { type: String }, // Storing transparently. For multi, likely a joined string or managed externally.
+    helper: { type: String },
+    validationStatus: { type: String, reflect: true, attribute: 'validation-status' },
+    validationMessage: { type: String, attribute: 'validation-message' },
+    disabled: { type: Boolean, reflect: true },
+    required: { type: Boolean, reflect: true },
+    clearable: { type: Boolean },
+    multiple: { type: Boolean, reflect: true },
+    selectAll: { type: Boolean, attribute: 'select-all' },
+    open: { type: Boolean, reflect: true },
+    _displayValue: { type: String, state: true },
+
+    _isAllSelected: { type: Boolean, state: true },
+    _isIndeterminate: { type: Boolean, state: true },
+    _highlightedIndex: { type: Number, state: true },
+    _focusZone: { type: String, state: true }
+  };
+
+  static styles = css`
+    :host {
+      display: block;
+      box-sizing: border-box;
+      position: relative; /* For the controller anchor reference */
+    }
+
+    .field-wrapper {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+
+    /* Label styles */
+    ${fieldLabelStyles}
+
+    /* Trigger Button - Mimics Input */
+    .trigger {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: 32px;
+      padding: 5px 8px; /* 32px height total */
+      border: 1px solid var(--ds-color-border-strong);
+      border-radius: var(--ds-radius-input);
+      background: var(--ds-color-bg-default);
+      box-sizing: border-box;
+      cursor: pointer;
+      user-select: none;
+      transition: background-color 0.2s, border-color 0.2s;
+      font: var(--ds-typo-content-body-regular);
+      color: var(--ds-color-text-default);
+      width: 100%;
+      outline: none;
+    }
+
+    /* Trigger States */
+    :host([disabled]) .trigger {
+      background: var(--ds-color-bg-disabled);
+      color: var(--ds-color-text-disabled);
+      cursor: not-allowed;
+      border-color: transparent;
+    }
+    
+    :host(:not([disabled])) .trigger:hover {
+        background: var(--ds-color-bg-hover);
+    }
+
+    /* Header Zone */
+    .header-zone {
+      border-bottom: 1px solid var(--ds-color-border-default);
+      padding: 16px; /* Direct padding */
+      flex-shrink: 0;
+    }
+
+    /* Header ds-list-item needs less padding since zone has it */
+    .header-zone ds-list-item {
+      padding: 0 !important;
+    }
+
+    /* List Zone - Scrollable container */
+    .list-zone {
+      flex: 1;
+      overflow-y: auto;
+      scroll-behavior: smooth;
+      padding: 16px; /* Vertical padding for spacing */
+      scrollbar-width: thin;
+      scrollbar-color: var(--ds-color-border-strong) transparent;
+    }
+
+    /* Items inside list-zone */
+    .list-zone ::slotted(ds-list-item) {
+      margin: 0 -16px; /* Counteract zone padding for full-width items */
+      padding-left: 16px;
+      padding-right: 16px;
+    }
+
+    /* Footer Zone */
+    .footer-zone {
+      border-top: 1px solid var(--ds-color-border-default);
+      padding: 16px; /* Direct padding */
+      flex-shrink: 0;
+    }
+
+    /* Disabled Label and Message */
+    :host([disabled]) .label-row label {
+        color: var(--ds-color-text-disabled);
+        cursor: not-allowed;
+    }
+
+    /* Select All Header */
+    .select-all-header {
+      border-bottom: 1px solid var(--ds-color-border-default);
+      padding: 8px 16px; /* Restored header padding to match content */
+      margin: 0;
+      flex-shrink: 0;
+    }
+    /* Disabled Label and Message */
+    :host([disabled]) .label-row label {
+        color: var(--ds-color-text-disabled);
+        cursor: not-allowed;
+    }
+
+    :host([disabled]) .field-message {
+        color: var(--ds-color-text-disabled);
+    }
+    
+    :host([open]) .trigger {
+        border-color: var(--ds-color-border-focus);
+        outline: 2px solid var(--ds-color-border-focus);
+        outline-offset: -1px;
+    }
+
+    .trigger:focus-visible {
+        border-color: var(--ds-color-border-focus);
+        outline: 2px solid var(--ds-color-border-focus);
+        outline-offset: -1px;
+    }
+
+
+    /* Validation Status on Trigger */
+    :host([validation-status="error"]) .trigger {
+        border-color: var(--ds-color-border-error);
+    }
+    :host([validation-status="success"]) .trigger {
+        border-color: var(--ds-color-border-success);
+    }
+
+    .value-text {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        flex: 1;
+        margin-right: 8px;
+    }
+    
+    .placeholder {
+        color: var(--ds-color-text-secondary);
+    }
+
+    .actions {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        flex-shrink: 0;
+    }
+
+    .chevron {
+        transition: transform 0.2s;
+        color: var(--ds-color-icon-default);
+    }
+
+    :host([disabled]) .chevron {
+        color: var(--ds-color-text-disabled);
+    }
+
+    :host([open]) .chevron {
+        transform: rotate(180deg);
+    }
+
+    /* Popup */
+    .popup {
+        display: none;
+        position: fixed; /* Fixed strategy for floating-ui usually */
+        z-index: 1000;
+        width: max-content;
+        /* Width is managed by JS to match trigger or content */
+        box-sizing: border-box; 
+    }
+
+    :host([open]) .popup {
+        display: block;
+    }
+
+    /* Message styles */
+    ${fieldMessageStyles}
+  `;
+
+  constructor() {
+    super();
+    this.label = '';
+    this.info = '';
+    this.labelPosition = 'top';
+    this.labelWidth = '';
+    this.placeholder = 'Select...';
+    this.value = '';
+    this.helper = '';
+    this.validationStatus = '';
+    this.validationMessage = '';
+    this.disabled = false;
+    this.required = false;
+    this.clearable = false;
+    this.multiple = false;
+    this.selectAll = false;
+    this.open = false;
+    this._displayValue = '';
+    this._highlightedIndex = -1;
+    this._itemIds = new Map(); // Store generated IDs for items
+
+    // Setup positioner
+    this.positioner = new PositionerController(this);
+
+    // Generate unique ID for accessibility
+    this._labelId = `dropdown-label-${Math.random().toString(36).substr(2, 9)}`;
+    this._focusZone = 'list'; // 'list' | 'header'
+    this._keyboardNavActive = false;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    // Initialize positioner
+    this.positioner.strategy = 'fixed';
+    this.positioner.placement = 'bottom-start';
+    // We defer target/floating assignment to first render/updated
+    document.addEventListener('click', this._handleOutsideClick.bind(this));
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener('click', this._handleOutsideClick.bind(this));
+  }
+
+  updated(changedProperties) {
+    if (changedProperties.has('open')) {
+      if (this.open) {
+        this._highlightedIndex = -1; // Reset highlight on open
+        this._focusZone = 'list'; // Default to list or header? Usually list first. User says "tab only works between select all and options". It implies start at list? or start at nothing? Let's start at list (autoHighlight handles it).
+
+        // Ensure positioner is active
+        const trigger = this.shadowRoot.querySelector('.trigger');
+        const popup = this.shadowRoot.querySelector('.popup');
+        if (trigger && popup) {
+          this.positioner.target = trigger;
+          this.positioner.floating = popup;
+          popup.style.width = `${trigger.offsetWidth}px`;
+        }
+
+        // Wait for components to possibly upgrade/render
+        this.updateComplete.then(() => {
+          this._autoHighlight();
+        });
+      } else {
+        this._clearHighlight();
+      }
+    }
+
+    if (changedProperties.has('value')) {
+      const oldValue = changedProperties.get('value');
+      const isInitialRun = oldValue === undefined;
+
+      // If initial run and value is empty, do NOT sync items.
+      // Allow _syncValueFromItems to infer value from selected items instead.
+      if (isInitialRun && !this.value) {
+        // Skip
+      } else {
+        // When value prop changes from outside, we need to sync items
+        this._syncItemsFromValue();
+      }
+    }
+
+    if (changedProperties.has('multiple')) {
+      this._updateChildrenVariants();
+    }
+  }
+
+  _updateChildrenVariants() {
+    const listZone = this.shadowRoot?.querySelector('.list-zone');
+    const slot = listZone?.querySelector('slot:not([name])');
+    if (!slot) return;
+
+    const items = slot.assignedElements({ flatten: true }).filter(el => el.localName === 'ds-list-item');
+
+    items.forEach(item => {
+      if (item.getAttribute('variant') === 'section') return;
+
+      const targetVariant = this.multiple ? 'select-checkbox' : 'select-simple';
+      if (item.getAttribute('variant') !== targetVariant) {
+        item.setAttribute('variant', targetVariant);
+      }
+    });
+  }
+
+  _handleOutsideClick(e) {
+    if (!this.open) return;
+
+    // If click is inside simple-dropdown, ignore
+    if (this.contains(e.target)) return;
+    // If click is inside the popup in shadowroot (unlikely to propagate up as outside click, but just in case)
+
+    this.open = false;
+  }
+
+  _toggleOpen() {
+    if (this.disabled) return;
+    this.open = !this.open;
+  }
+
+  _handleTriggerKeydown(e) {
+    if (this.disabled) return;
+
+    // Zonal Navigation Logic for Select All
+    const hasSelectAll = this.multiple && this.selectAll;
+
+    if (e.key === 'Tab' && this.open && hasSelectAll) {
+      e.preventDefault();
+      // Tab resets keyboard mode if needed? Actually focus style is enough.
+      // Toggle Zone
+      if (this._focusZone === 'list') {
+        this._focusZone = 'header';
+        this._highlightedIndex = -1; // Clear list highlight
+        this._updateItemHighlights();
+        this.requestUpdate();
+      } else {
+        this._focusZone = 'list';
+        this._highlightedIndex = 0; // Restore list highlight (start at top)
+        this._updateItemHighlights();
+      }
+      return;
+    }
+
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      this._keyboardNavActive = true;
+      if (!this.open) {
+        this.open = true;
+      } else {
+        if (this._focusZone === 'list') {
+          this._moveHighlight(1);
+        }
+        // If sticky in header, do nothing (or move to list?) User implies sticky options only.
+      }
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      this._keyboardNavActive = true;
+      if (!this.open) {
+        this.open = true;
+      } else {
+        if (this._focusZone === 'list') {
+          this._moveHighlight(-1);
+        }
+      }
+    } else if (e.key === 'Enter' || (e.key === ' ' && !this.open)) {
+      e.preventDefault();
+      if (!this.open) {
+        this.open = true;
+      } else {
+        if (this._focusZone === 'header') {
+          this._handleSelectAll();
+        } else if (this._highlightedIndex >= 0) {
+          this._selectHighlighted();
+        }
+      }
+    } else if (e.key === 'Escape') {
+      if (this.open) {
+        e.preventDefault();
+        this.open = false;
+      }
+    } else if (e.key === 'Tab') {
+      // Normal Tab behavior (close and move on) ONLY if not trapping in SelectAll
+      // If SelectAll is NOT present, we close and let event bubble default
+      this.open = false;
+    }
+  }
+
+  _autoHighlight() {
+    const items = this._getEnabledItems();
+    if (items.length === 0) return;
+
+    const selectedIndex = items.findIndex(el => el.selected || el.hasAttribute('selected'));
+    this._highlightedIndex = selectedIndex >= 0 ? selectedIndex : 0;
+    this._updateItemHighlights();
+  }
+
+  _moveHighlight(delta) {
+    const items = this._getEnabledItems();
+    if (items.length === 0) return;
+
+    let nextIndex = this._highlightedIndex + delta;
+    if (nextIndex < 0) nextIndex = items.length - 1;
+    if (nextIndex >= items.length) nextIndex = 0;
+
+    this._highlightedIndex = nextIndex;
+    this._updateItemHighlights();
+    this._scrollHighlightedIntoView();
+  }
+
+  _clearHighlight() {
+    this._highlightedIndex = -1;
+    this._updateItemHighlights();
+  }
+
+  _updateItemHighlights() {
+    const items = this._getEnabledItems();
+    items.forEach((item, index) => {
+      const isHighlighted = (index === this._highlightedIndex);
+      item.highlighted = isHighlighted;
+
+      // Ensure ID for accessibility
+      if (!item.id) {
+        item.id = `ds-item-${Math.random().toString(36).substr(2, 9)}`;
+      }
+    });
+
+    // Force trigger update to reflect new aria-activedescendant
+    this.requestUpdate();
+  }
+
+  _scrollHighlightedIntoView() {
+    const items = this._getEnabledItems();
+    const highlighted = items[this._highlightedIndex];
+    if (highlighted) {
+      highlighted.scrollIntoView({
+        block: 'nearest',
+        behavior: 'smooth' // Smooth scrolling!
+      });
+    }
+  }
+
+  _selectHighlighted() {
+    const items = this._getEnabledItems();
+    const item = items[this._highlightedIndex];
+    if (item && item.getAttribute('variant') !== 'section') {
+      item.click(); // Trigger the item select logic
+    }
+  }
+
+  _getEnabledItems() {
+    // Items are now inside .list-zone, get them from the default slot
+    const listZone = this.shadowRoot.querySelector('.list-zone');
+    const slot = listZone?.querySelector('slot:not([name])');
+    if (!slot) return [];
+
+    // Slotted items (in the default slot, which is inside list-zone)
+    const lightItems = slot.assignedElements({ flatten: true }).filter(el => el.localName === 'ds-list-item' && !el.hasAttribute('disabled'));
+
+    // Filter out decorative items (sections/dividers)
+    return lightItems.filter(item => {
+      const variant = item.getAttribute('variant');
+      return variant !== 'section' && !item.hasAttribute('hide-label');
+    });
+  }
+
+  _handleItemSelect(e) {
+    // With flat architecture, we need to ensure we caught a list item click.
+    const path = e.composedPath();
+    const item = path.find(el => el.localName === 'ds-list-item');
+
+    if (!item || item.hasAttribute('disabled') || item.getAttribute('variant') === 'section') return;
+
+    // Toggle logic
+    if (this.multiple) {
+      item.selected = !item.selected;
+    } else {
+      // Single select: Select this, deselect others
+      item.selected = true;
+      const allItems = this._getEnabledItems();
+      allItems.forEach(el => {
+        if (el !== item) el.selected = false;
+      });
+    }
+
+    // Process change
+    setTimeout(() => {
+      this._syncValueFromItems();
+
+      if (!this.multiple) {
+        this.open = false;
+        this.shadowRoot.querySelector('.trigger')?.focus();
+      }
+    }, 0);
+  }
+
+  _handleMouseMove(e) {
+    // Standard detection: Only disable keyboard mode if mouse actually moved.
+    // movementX/Y is supported in modern browsers.
+    if (e.movementX !== 0 || e.movementY !== 0) {
+      this._keyboardNavActive = false;
+    }
+  }
+
+  _handleMouseOver(e) {
+    // If keyboard mode is active, completely ignore hover events 
+    // (which might be synthetic due to scroll)
+    if (this._keyboardNavActive) return;
+
+    const path = e.composedPath();
+    const item = path.find(el => el.localName === 'ds-list-item');
+    if (!item) return;
+
+    const items = this._getEnabledItems();
+    const index = items.indexOf(item);
+
+    if (index >= 0 && index !== this._highlightedIndex) {
+      this._highlightedIndex = index;
+      this._focusZone = 'list'; // Ensure keyboard knows we are in list
+      this._updateItemHighlights();
+    }
+  }
+
+  _handleSlotChange(e) {
+    this._updateChildrenVariants();
+    if (this.value) {
+      this._syncItemsFromValue();
+    } else {
+      this._syncValueFromItems();
+    }
+  }
+
+  _syncItemsFromValue() {
+    const listZone = this.shadowRoot.querySelector('.list-zone');
+    const slot = listZone?.querySelector('slot:not([name])');
+    if (!slot) return;
+
+    const items = slot.assignedElements({ flatten: true }).filter(el => el.localName === 'ds-list-item');
+    if (!items.length) return;
+
+    const currentValues = this.value ? this.value.split(',').map(v => v.trim()) : [];
+
+    items.forEach(item => {
+      const itemValue = item.getAttribute('value') || item.getAttribute('label');
+      if (currentValues.includes(itemValue)) {
+        item.selected = true;
+        item.setAttribute('selected', '');
+      } else {
+        item.selected = false;
+        item.removeAttribute('selected');
+      }
+    });
+
+    // Update display value after items are compliant
+    this._updateDisplayValueFromItems(items);
+  }
+
+  _syncValueFromItems(slotArg) {
+    const listZone = this.shadowRoot.querySelector('.list-zone');
+    const slot = slotArg || listZone?.querySelector('slot:not([name])');
+    if (!slot) return;
+
+    const items = slot.assignedElements({ flatten: true }).filter(el => el.localName === 'ds-list-item');
+
+
+    // console.log('DEBUG: _syncValueFromItems', { itemsCount: items.length, items });
+
+    if (this.multiple) {
+      const selectedItems = items.filter(el => {
+        // console.log('DEBUG: Item check:', el, el.hasAttribute('selected'), el.selected);
+        return el.hasAttribute('selected') || el.selected;
+      });
+      const values = selectedItems.map(el => el.getAttribute('value') || el.getAttribute('label') || el.innerText);
+      const newValue = values.join(',');
+
+      if (this.value !== newValue) {
+        this.value = newValue;
+        this._notifyChange();
+      }
+
+    } else {
+      const selectedItem = items.find(el => {
+        // console.log('DEBUG: Single Item check:', el, el.getAttribute('label'), el.hasAttribute('selected'), el.selected);
+        return el.hasAttribute('selected') || el.selected;
+      });
+      let newValue = '';
+      if (selectedItem) {
+        newValue = selectedItem.getAttribute('value') || selectedItem.getAttribute('label');
+      }
+
+      // console.log('DEBUG: New Value:', newValue);
+
+      if (this.value !== newValue) {
+        this.value = newValue;
+        this._notifyChange();
+      }
+    }
+
+    this._updateDisplayValueFromItems(items);
+  }
+
+  _updateDisplayValueFromItems(items) {
+    if (!items || !items.length) {
+      this._displayValue = '';
+      this._isAllSelected = false;
+      this._isIndeterminate = false;
+      return;
+    }
+
+    // CRITICAL: Filter out sections BEFORE counting
+    const selectableItems = Array.from(items).filter(item =>
+      item.getAttribute('variant') !== 'section'
+    );
+    const selectedItems = selectableItems.filter(el =>
+      el.hasAttribute('selected') || el.selected
+    );
+
+    const selectedCount = selectedItems.length;
+    const totalCount = selectableItems.length;
+
+
+
+    if (this.multiple) {
+      if (selectedCount === 0) {
+        this._displayValue = '';
+        this._isAllSelected = false;
+        this._isIndeterminate = false;
+      } else if (selectedCount === totalCount && totalCount > 0) {
+        // ALL selectable items are selected
+        this._displayValue = 'All selected';
+        this._isAllSelected = true;
+        this._isIndeterminate = false;
+      } else {
+        // SOME items selected (indeterminate)
+        const labels = selectedItems.map(el => el.getAttribute('label') || el.innerText.trim());
+        this._displayValue = labels.join(', ');
+        this._isAllSelected = false;
+        this._isIndeterminate = true;
+      }
+    } else {
+      // Single select mode
+      if (selectedItems.length > 0) {
+        this._displayValue = selectedItems[0].getAttribute('label') || selectedItems[0].innerText.trim();
+      } else {
+        this._displayValue = '';
+      }
+      this._isAllSelected = false;
+      this._isIndeterminate = false;
+    }
+  }
+
+
+
+  _handleSelectAll() {
+    // Get items from list-zone
+    const listZone = this.shadowRoot.querySelector('.list-zone');
+    const slot = listZone?.querySelector('slot:not([name])');
+    if (!slot) return;
+
+    const items = slot.assignedElements({ flatten: true }).filter(el => {
+      return el.localName === 'ds-list-item' && el.getAttribute('variant') !== 'section';
+    });
+
+    if (items.length === 0) return;
+
+    // Check current state: are ALL items selected?
+    const allSelected = items.every(el => el.selected === true || el.hasAttribute('selected'));
+
+    // Toggle: if ALL are selected, deselect all. Otherwise, select all.
+    const newState = !allSelected;
+
+
+
+    items.forEach(el => {
+      el.selected = newState;
+      if (newState) {
+        el.setAttribute('selected', '');
+      } else {
+        el.removeAttribute('selected');
+      }
+    });
+
+    // Update states IMMEDIATELY (not waiting for _syncValueFromItems)
+    this._isAllSelected = newState;
+    this._isIndeterminate = false;
+
+    // Then sync the value properly
+    this._syncValueFromItems();
+
+    // Force re-render
+    this.requestUpdate();
+  }
+
+  _handleClear(e) {
+    e.stopPropagation();
+    const listZone = this.shadowRoot.querySelector('.list-zone');
+    const slot = listZone?.querySelector('slot:not([name])');
+    if (!slot) return;
+
+    const items = slot.assignedElements({ flatten: true }).filter(el => el.localName === 'ds-list-item');
+
+    items.forEach(el => {
+      el.selected = false;
+      el.removeAttribute('selected');
+    });
+
+    this._syncValueFromItems();
+  }
+
+  _notifyChange() {
+    this.dispatchEvent(new CustomEvent('change', {
+      detail: { value: this.value },
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  _hasHeaderContent() {
+    // Has content if: selectAll is enabled OR slot="header" has children
+    if (this.multiple && this.selectAll) return true;
+
+    const headerSlot = this.renderRoot?.querySelector('slot[name="header"]');
+    return headerSlot?.assignedElements().length > 0;
+  }
+
+  _hasFooterContent() {
+    const footerSlot = this.renderRoot?.querySelector('slot[name="footer"]');
+    return footerSlot?.assignedElements().length > 0;
+  }
+
+  render() {
+    const hasValue = !!this._displayValue;
+    const showClear = this.clearable && hasValue && !this.disabled;
+    const activeDescendant = this._highlightedIndex >= 0 ? this._getEnabledItems()[this._highlightedIndex]?.id : undefined;
+    const isInline = this.labelPosition === 'inline-start';
+    const wrapperClass = isInline ? 'field-wrapper inline-label' : 'field-wrapper';
+    const labelStyle = isInline && this.labelWidth ? `width: ${this.labelWidth}` : '';
+
+    const dropdownContent = html`
+      <!-- Trigger -->
+      <div class="trigger" 
+           id="${this._triggerId}"
+           @click=${this._toggleOpen} 
+           @keydown=${this._handleTriggerKeydown}
+           tabindex="${this.disabled ? -1 : 0}"
+           role="combobox"
+           aria-labelledby="${this._labelId}"
+           aria-expanded="${this.open}"
+           aria-haspopup="listbox"
+           aria-controls="dropdown-menu"
+           aria-activedescendant="${activeDescendant || ''}"
+      >
+          <span class="value-text ${hasValue ? '' : 'placeholder'}">
+              ${hasValue ? this._displayValue : this.placeholder}
+          </span>
+          
+          <div class="actions">
+              ${showClear ? html`
+                  <ds-icon-button icon="close" variant="action" size="s" aria-label="Clear selection" @click=${this._handleClear}></ds-icon-button>
+              ` : nothing}
+              <ds-icon name="expand-more" size="sm" class="chevron"></ds-icon>
+          </div>
+      </div>
+
+      <!-- Popup Menu -->
+      <div class="popup" @mousedown=${(e) => e.preventDefault()}>
+          <ds-dropdown-panel 
+              id="dropdown-list"
+              role="listbox"
+              @click=${this._handleItemSelect}
+              @mouseover=${this._handleMouseOver}
+              @mousemove=${this._handleMouseMove}
+          >
+              <!-- Header Zone (only if has content) -->
+              ${this._hasHeaderContent() ? html`
+                  <div class="header-zone">
+                      <slot name="header">
+                          ${this.multiple && this.selectAll ? html`
+                              <ds-list-item 
+                                  variant="select-checkbox" 
+                                  label="Select All"
+                                  ?selected=${this._isAllSelected}
+                                  ?indeterminate=${this._isIndeterminate}
+                                  ?highlighted=${this._focusZone === 'header'}
+                                  @click=${(e) => { e.stopPropagation(); e.preventDefault(); this._handleSelectAll(); }}
+                              ></ds-list-item>
+                          ` : nothing}
+                      </slot>
+                  </div>
+              ` : nothing}
+
+              <!-- List Zone (Scrollable items) -->
+              <div class="list-zone" role="listbox">
+                  <slot @slotchange=${this._handleSlotChange}></slot>
+              </div>
+
+              <!-- Footer Zone (only if has content) -->
+              ${this._hasFooterContent() ? html`
+                  <div class="footer-zone">
+                      <slot name="footer"></slot>
+                  </div>
+              ` : nothing}
+          </ds-dropdown-panel>
+      </div>
+      
+      <!-- Helper/Error Mixin -->
+      ${this.renderFieldMessage(this.helper, this.validationMessage)}
+    `;
+
+    if (isInline) {
+      return html`
+        <div class="${wrapperClass}">
+          <div class="label-row" part="label-row" style="${labelStyle}">
+            ${this.label ? html`<label id="${this._labelId}">${this.label}</label>` : ''}
+            ${this.info ? html`
+              <ds-tooltip content="${this.info}" placement="top">
+                <ds-icon-button 
+                  icon="info" 
+                  variant="action"
+                  size="s"
+                  aria-label="${this.info}"
+                  @click=${this._handleInfoClick}
+                ></ds-icon-button>
+              </ds-tooltip>
+            ` : ''}
+          </div>
+          <div class="field-content">
+            ${dropdownContent}
+          </div>
+        </div>
+      `;
+    }
+
+    return html`
+      <div class="field-wrapper">
+        <!-- Label Mixin -->
+        ${this.renderFieldLabel(this.label, this.info, this._triggerId, this._labelId)}
+        ${dropdownContent}
+      </div>
+    `;
+  }
+
+  _handleInfoClick(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    this.dispatchEvent(new CustomEvent('info-click', {
+      bubbles: true,
+      composed: true,
+      detail: { info: this.info }
+    }));
+  }
+}
+
+customElements.define('ds-dropdown', DsDropdown);
+