component Dropdown {
  outputs {
    toggle(payload: { open: boolean; sourceEvent: Event; reason?: object })
    open(payload: { sourceEvent: Event })
    close(payload: { reason: string; sourceEvent: Event })
    select(payload: { item: string | number | boolean | null | object; itemIndex: number; value: string | number | boolean; sourceEvent: Event })
    action(payload: { item: string | number | boolean | null | object; itemIndex: number; value: string | number | boolean; sourceEvent: Event })
  }

  props {
items: unknown[] = []
    open: boolean = false
    defaultOpen: boolean = false
    label: string = "Open menu"
    icon: string = ""
    showChevron: boolean = true
    menuLabel: string = "Dropdown menu"
    placement: string = "bottom-start"
    width: string = "md"
    size: string = "default"
    color: string = "primary"
    variant: string = "raised"
    closeOnSelect: boolean = true
    closeOnOutside: boolean = true
    disabled: boolean = false
    emptyLabel: string = "No menu items"
    class: string = ""
  }

  state visible = defaultOpen

  functions {
    shared function isOpen() {
      return open || visible
    }

    client function showMenu(sourceEvent) {
      if (disabled) {
        return
      }
      visible = true
      output.open({ sourceEvent: sourceEvent })
      output.toggle({ open: true, sourceEvent: sourceEvent })
    }

    client function hideMenu(reason, sourceEvent) {
      visible = false
      output.close({ reason: reason, sourceEvent: sourceEvent })
      output.toggle({ open: false, reason: reason, sourceEvent: sourceEvent })
    }

    client function toggleMenu(sourceEvent) {
      if (isOpen()) {
        hideMenu("toggle", sourceEvent)
      } else {
        showMenu(sourceEvent)
      }
    }

    client function chooseItem(item, itemIndex, sourceEvent) {
      if (disabled || item.disabled || item.type === "divider" || item.type === "header") {
        sourceEvent.preventDefault()
        return
      }
      output.select({
        item: item,
        itemIndex: itemIndex,
        value: item.value || "",
        sourceEvent: sourceEvent
      })
      if (item.action) {
        output.action({
          item: item,
          itemIndex: itemIndex,
          value: item.value || "",
          sourceEvent: sourceEvent
        })
      }
      if (closeOnSelect) {
        hideMenu("select", sourceEvent)
      }
    }

    client function moveFocus(sourceEvent, direction) {
      const root = sourceEvent.currentTarget.closest(".wrn-dropdown") || sourceEvent.currentTarget
      const options = [...root.querySelectorAll("[data-dropdown-item]:not([disabled])")]
      if (!options.length) {
        return
      }
      const activeIndex = options.indexOf(document.activeElement)
      const nextIndex = (activeIndex + direction + options.length) % options.length
      options[nextIndex].focus()
    }

    client function handleKeydown(sourceEvent) {
      if (sourceEvent.key === "Escape") {
        sourceEvent.preventDefault()
        hideMenu("escape", sourceEvent)
      } else if (sourceEvent.key === "ArrowDown") {
        sourceEvent.preventDefault()
        if (!isOpen()) {
          showMenu(sourceEvent)
        }
        moveFocus(sourceEvent, 1)
      } else if (sourceEvent.key === "ArrowUp") {
        sourceEvent.preventDefault()
        if (!isOpen()) {
          showMenu(sourceEvent)
        }
        moveFocus(sourceEvent, -1)
      } else if (sourceEvent.key === "Home" && isOpen()) {
        sourceEvent.preventDefault()
        const root = sourceEvent.currentTarget.closest(".wrn-dropdown") || sourceEvent.currentTarget
        const first = root.querySelector("[data-dropdown-item]:not([disabled])")
        if (first) {
          first.focus()
        }
      } else if (sourceEvent.key === "End" && isOpen()) {
        sourceEvent.preventDefault()
        const root = sourceEvent.currentTarget.closest(".wrn-dropdown") || sourceEvent.currentTarget
        const options = [...root.querySelectorAll("[data-dropdown-item]:not([disabled])")]
        if (options.length) {
          options[options.length - 1].focus()
        }
      }
    }
  }

  view {
    <div
      {...attrs}
      data-ui-component="Dropdown"
      data-open='{open || visible ? "true" : "false"}'
      data-placement='{placement}'
      data-width='{width}'
      data-size='{size}'
      data-color='{color}'
      data-variant='{variant}'
      class='wrn-dropdown {class}'
      @keydown='handleKeydown(event)'
    >
      <button
        type="button"
        class="wrn-dropdown__trigger"
        disabled='{disabled}'
        aria-haspopup="menu"
        aria-expanded='{open || visible ? "true" : "false"}'
        @click='toggleMenu(event)'
      >
        <slot name="trigger"></slot>
        {#if icon}
          <span class='wrn-dropdown__trigger-icon {icon}' aria-hidden="true"></span>
        {/if}
        {#if label}
          <span class="wrn-dropdown__trigger-label">{label}</span>
        {/if}
        {#if showChevron}
          <span class="icon-[lucide--chevron-down] wrn-dropdown__chevron" aria-hidden="true"></span>
        {/if}
      </button>

      {#if closeOnOutside}
        <button
          type="button"
          class="wrn-dropdown__dismiss-layer"
          data-show='{open || visible}'
          aria-label="Close menu"
          @click='hideMenu("outside", event)'
        ></button>
      {/if}

      <div
        class="wrn-dropdown__panel"
        data-wrn-anchored="true"
        data-show='{open || visible}'
        role="menu"
        aria-label='{menuLabel}'
      >
        <slot name="header"></slot>

        <div class="wrn-dropdown__items">
          {#each items as item, itemIndex}
            {#if item.type === "divider"}
              <div class="wrn-dropdown__divider" role="separator"></div>
            {:else if item.type === "header"}
              <div class="wrn-dropdown__section-label">{item.label || item.title}</div>
            {:else if item.href}
              <a
                href='{item.href}'
                target='{item.target || ""}'
                rel='{item.external || item.target === "_blank" ? "noopener noreferrer" : (item.rel || "")}'
                role="menuitem"
                data-dropdown-item
                data-danger='{item.danger ? "true" : "false"}'
                data-selected='{item.selected || item.checked ? "true" : "false"}'
                aria-disabled='{item.disabled ? "true" : "false"}'
                class="wrn-dropdown__item"
                @click='chooseItem(item, itemIndex, event)'
              >
                {#if item.icon}
                  <span class='wrn-dropdown__item-icon {item.icon}' aria-hidden="true"></span>
                {/if}
                <span class="wrn-dropdown__copy">
                  <strong>{item.label || item.title}</strong>
                  {#if item.description}
                    <small>{item.description}</small>
                  {/if}
                </span>
                {#if item.badge}
                  <span class="wrn-dropdown__badge">{item.badge}</span>
                {:else if item.shortcut}
                  <kbd>{item.shortcut}</kbd>
                {:else if item.checked || item.selected}
                  <span class="icon-[lucide--check] wrn-dropdown__status" aria-hidden="true"></span>
                {:else if item.external}
                  <span class="icon-[lucide--arrow-up-right] wrn-dropdown__status" aria-hidden="true"></span>
                {/if}
              </a>
            {:else}
              <button
                type="button"
                role="menuitem"
                data-dropdown-item
                data-danger='{item.danger ? "true" : "false"}'
                data-selected='{item.selected || item.checked ? "true" : "false"}'
                disabled='{item.disabled}'
                class="wrn-dropdown__item"
                @click='chooseItem(item, itemIndex, event)'
              >
                {#if item.icon}
                  <span class='wrn-dropdown__item-icon {item.icon}' aria-hidden="true"></span>
                {/if}
                <span class="wrn-dropdown__copy">
                  <strong>{item.label || item.title}</strong>
                  {#if item.description}
                    <small>{item.description}</small>
                  {/if}
                </span>
                {#if item.badge}
                  <span class="wrn-dropdown__badge">{item.badge}</span>
                {:else if item.shortcut}
                  <kbd>{item.shortcut}</kbd>
                {:else if item.checked || item.selected}
                  <span class="icon-[lucide--check] wrn-dropdown__status" aria-hidden="true"></span>
                {/if}
              </button>
            {/if}
          {:empty}
            <div class="wrn-dropdown__empty">{emptyLabel}</div>
          {/each}
        </div>

        <slot></slot>
        <slot name="footer"></slot>
      </div>
    </div>
  }

  style {
    .wrn-dropdown {
      --dropdown-accent: var(--wrn-color-primary);
      --dropdown-soft: var(--wrn-color-primary-soft);
      position: relative;
      display: inline-flex;
      min-width: 0;
    }

    .wrn-dropdown[data-color="secondary"] {
      --dropdown-accent: var(--wrn-color-secondary);
      --dropdown-soft: var(--wrn-color-secondary-soft);
    }

    .wrn-dropdown[data-color="info"] {
      --dropdown-accent: var(--wrn-color-info);
      --dropdown-soft: var(--wrn-color-info-soft);
    }

    .wrn-dropdown[data-color="success"] {
      --dropdown-accent: var(--wrn-color-success);
      --dropdown-soft: var(--wrn-color-success-soft);
    }

    .wrn-dropdown[data-color="warning"] {
      --dropdown-accent: var(--wrn-color-warning);
      --dropdown-soft: var(--wrn-color-warning-soft);
    }

    .wrn-dropdown[data-color="danger"] {
      --dropdown-accent: var(--wrn-color-danger);
      --dropdown-soft: var(--wrn-color-danger-soft);
    }

    .wrn-dropdown__trigger {
      appearance: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.55rem;
      min-height: 2.55rem;
      padding: 0.65rem 0.9rem;
      color: var(--wrn-color-text);
      background: var(--wrn-color-surface-raised);
      border: 1px solid var(--wrn-color-border);
      border-radius: 0.78rem;
      font: inherit;
      font-size: 0.84rem;
      font-weight: 600;
      cursor: pointer;
      transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
    }

    .wrn-dropdown__trigger:hover,
    .wrn-dropdown__trigger:focus-visible,
    .wrn-dropdown[data-open="true"] .wrn-dropdown__trigger {
      color: var(--dropdown-accent);
      background: var(--dropdown-soft);
      border-color: color-mix(in srgb, var(--dropdown-accent) 38%, var(--wrn-color-border));
      outline: none;
    }

    .wrn-dropdown__trigger:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .wrn-dropdown__trigger-icon,
    .wrn-dropdown__chevron {
      width: 1rem;
      height: 1rem;
    }

    .wrn-dropdown__chevron {
      transition: transform 160ms ease;
    }

    .wrn-dropdown[data-open="true"] .wrn-dropdown__chevron {
      transform: rotate(180deg);
    }

    .wrn-dropdown[data-size="sm"] .wrn-dropdown__trigger {
      min-height: 2.2rem;
      padding: 0.5rem 0.72rem;
      font-size: 0.78rem;
    }

    .wrn-dropdown[data-size="lg"] .wrn-dropdown__trigger {
      min-height: 2.9rem;
      padding: 0.78rem 1.05rem;
      font-size: 0.9rem;
    }

    .wrn-dropdown__dismiss-layer {
      position: fixed;
      inset: 0;
      z-index: 1100;
      appearance: none;
      padding: 0;
      background: transparent;
      border: 0;
    }

    .wrn-dropdown__panel {
      position: absolute;
      z-index: 1101;
      top: calc(100% + 0.55rem);
      left: 0;
      width: max-content;
      min-width: 12rem;
      max-width: min(22rem, calc(100vw - 1.5rem));
      padding: 0.45rem;
      color: var(--wrn-color-text);
      background:
        linear-gradient(145deg, color-mix(in srgb, var(--dropdown-accent) 5%, transparent), transparent 60%),
        color-mix(in srgb, var(--wrn-color-surface-raised) 97%, transparent);
      border: 1px solid color-mix(in srgb, var(--dropdown-accent) 18%, var(--wrn-color-border));
      border-radius: 1rem;
      box-shadow:
        0 1px 0 color-mix(in srgb, white 5%, transparent) inset,
        0 24px 64px color-mix(in srgb, black 22%, transparent);
      backdrop-filter: blur(18px);
    }

    .wrn-dropdown[data-width="trigger"] .wrn-dropdown__panel {
      width: 100%;
      min-width: 100%;
    }

    .wrn-dropdown[data-width="sm"] .wrn-dropdown__panel {
      width: 12rem;
    }

    .wrn-dropdown[data-width="md"] .wrn-dropdown__panel {
      width: 17rem;
    }

    .wrn-dropdown[data-width="lg"] .wrn-dropdown__panel {
      width: 22rem;
    }

    .wrn-dropdown[data-placement="bottom-end"] .wrn-dropdown__panel {
      right: 0;
      left: auto;
    }

    .wrn-dropdown[data-placement="top-start"] .wrn-dropdown__panel {
      top: auto;
      bottom: calc(100% + 0.55rem);
    }

    .wrn-dropdown[data-placement="top-end"] .wrn-dropdown__panel {
      top: auto;
      right: 0;
      bottom: calc(100% + 0.55rem);
      left: auto;
    }

    .wrn-dropdown[data-variant="soft"] .wrn-dropdown__panel {
      background:
        linear-gradient(145deg, var(--dropdown-soft), transparent 70%),
        var(--wrn-color-surface-raised);
      box-shadow: 0 18px 48px color-mix(in srgb, black 16%, transparent);
    }

    .wrn-dropdown[data-variant="outline"] .wrn-dropdown__panel {
      background: var(--wrn-color-surface-raised);
      box-shadow: none;
    }

    .wrn-dropdown__items {
      display: grid;
      gap: 0.15rem;
    }

    .wrn-dropdown__section-label {
      padding: 0.55rem 0.72rem 0.3rem;
      color: var(--wrn-color-text-muted);
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .wrn-dropdown__divider {
      height: 1px;
      margin: 0.3rem 0.4rem;
      background: var(--wrn-color-border);
    }

    .wrn-dropdown__item {
      appearance: none;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      gap: 0.7rem;
      width: 100%;
      min-width: 0;
      padding: 0.68rem 0.72rem;
      color: var(--wrn-color-text);
      background: transparent;
      border: 0;
      border-radius: 0.72rem;
      font: inherit;
      text-align: left;
      text-decoration: none;
      cursor: pointer;
      transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
    }

    .wrn-dropdown__item:hover,
    .wrn-dropdown__item:focus-visible,
    .wrn-dropdown__item[data-selected="true"] {
      color: var(--dropdown-accent);
      background: var(--dropdown-soft);
      outline: none;
    }

    .wrn-dropdown__item:active {
      transform: scale(0.985);
    }

    .wrn-dropdown__item[data-danger="true"] {
      color: var(--wrn-color-danger);
    }

    .wrn-dropdown__item[data-danger="true"]:hover,
    .wrn-dropdown__item[data-danger="true"]:focus-visible {
      background: var(--wrn-color-danger-soft);
    }

    .wrn-dropdown__item[disabled],
    .wrn-dropdown__item[aria-disabled="true"] {
      opacity: 0.48;
      pointer-events: none;
    }

    .wrn-dropdown__item-icon,
    .wrn-dropdown__status {
      width: 1rem;
      height: 1rem;
    }

    .wrn-dropdown__copy {
      display: grid;
      gap: 0.12rem;
      min-width: 0;
    }

    .wrn-dropdown__copy strong {
      overflow: hidden;
      font-size: 0.82rem;
      font-weight: 600;
      line-height: 1.3;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .wrn-dropdown__copy small {
      overflow: hidden;
      color: var(--wrn-color-text-muted);
      font-size: 0.7rem;
      line-height: 1.35;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .wrn-dropdown__badge {
      padding: 0.18rem 0.45rem;
      color: var(--dropdown-accent);
      background: var(--dropdown-soft);
      border-radius: 999px;
      font-size: 0.64rem;
      font-weight: 700;
    }

    .wrn-dropdown kbd {
      padding: 0.16rem 0.38rem;
      color: var(--wrn-color-text-muted);
      background: var(--wrn-color-surface-soft);
      border: 1px solid var(--wrn-color-border);
      border-radius: 0.36rem;
      font-size: 0.64rem;
      font-family: inherit;
    }

    .wrn-dropdown__empty {
      padding: 1rem;
      color: var(--wrn-color-text-muted);
      font-size: 0.8rem;
      text-align: center;
    }

    @media (max-width: 639px) {
      .wrn-dropdown__panel {
        position: fixed;
        right: 0.75rem;
        bottom: 0.75rem;
        left: 0.75rem;
        top: auto;
        width: auto;
        min-width: 0;
        max-width: none;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .wrn-dropdown__trigger,
      .wrn-dropdown__chevron,
      .wrn-dropdown__item {
        transition: none;
      }
    }
  }
}