@ds-gn/ui 0.9.0 → 0.11.0

package/dist/components/DropdownMenu/src/DropdownMenu.js

@@ -0,0 +1,1550 @@
+var __legacyDecorateClassTS = function(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+    r = Reflect.decorate(decorators, target, key, desc);
+  else
+    for (var i = decorators.length - 1;i >= 0; i--)
+      if (d = decorators[i])
+        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+
+// components/DropdownMenu/src/DropdownMenu.ts
+import { MotionController } from "@ds-gn/motion/lit";
+import { html as html2, nothing } from "lit";
+import { property, query, state } from "lit/decorators.js";
+
+// common/Base/Base.ts
+import { html, LitElement } from "lit";
+
+// common/helpers/define-element.ts
+var defineElement = (tag, ctor) => {
+  if (typeof customElements === "undefined")
+    return;
+  if (!customElements.get(tag))
+    customElements.define(tag, ctor);
+};
+
+// common/Base/Base.css
+import { css } from "lit";
+var styles = css`/* Base reset in @layer base ensures it comes before utilities in Tailwind v4 cascade
+   This prevents the reset from overriding component utility classes */
+@layer base {
+  :host {
+    display: block;
+    box-sizing: border-box;
+    line-height: 1.5;
+    -webkit-text-size-adjust: 100%;
+    tab-size: 4;
+    font-family: var(
+      --default-font-family,
+      var(--font-sans, ui-sans-serif, system-ui, sans-serif)
+    );
+  }
+
+  *,
+  *::before,
+  *::after {
+    box-sizing: inherit;
+    margin: 0;
+    padding: 0;
+    border: 0 solid;
+  }
+
+  :host h1,
+  :host h2,
+  :host h3,
+  :host h4,
+  :host h5,
+  :host h6 {
+    font-size: inherit;
+    font-weight: inherit;
+    margin: 0;
+    padding: 0;
+  }
+}
+`;
+var Base_default = styles;
+
+// common/Base/Base.ts
+class Base extends LitElement {
+  static styles = Base_default;
+  updateTheme(changedProperties, surface) {
+    if (changedProperties.has("surface")) {
+      if (surface) {
+        this.setAttribute("data-theme", surface);
+      } else {
+        this.removeAttribute("data-theme");
+      }
+    }
+  }
+  emit(name, detail, options = {}) {
+    return this.dispatchEvent(new CustomEvent(name, {
+      detail,
+      bubbles: true,
+      composed: true,
+      cancelable: options.cancelable ?? false
+    }));
+  }
+  render() {
+    return html`<slot></slot>`;
+  }
+}
+defineElement("dsgn-base", Base);
+
+// common/controllers/OverlayDismissController.ts
+class OverlayDismissController {
+  constructor(host, options) {
+    this.listening = false;
+    this.wantsOutside = false;
+    this.handleDocumentPointerDown = (event) => {
+      if (!event.composedPath().includes(this.host)) {
+        this.options.onDismiss("outside");
+      }
+    };
+    this.host = host;
+    this.options = options;
+    host.addController(this);
+  }
+  start() {
+    this.wantsOutside = true;
+    this.listen();
+  }
+  stop() {
+    this.wantsOutside = false;
+    this.unlisten();
+  }
+  handleKeydown(event) {
+    if (event.key !== "Escape" || !this.options.isOpen()) {
+      return false;
+    }
+    this.options.onDismiss("escape");
+    this.options.returnFocusTo?.()?.focus();
+    return true;
+  }
+  hostConnected() {
+    if (this.wantsOutside) {
+      this.listen();
+    }
+  }
+  hostDisconnected() {
+    this.unlisten();
+  }
+  listen() {
+    if (this.listening || typeof document === "undefined") {
+      return;
+    }
+    this.listening = true;
+    document.addEventListener("pointerdown", this.handleDocumentPointerDown);
+  }
+  unlisten() {
+    if (!this.listening) {
+      return;
+    }
+    this.listening = false;
+    document.removeEventListener("pointerdown", this.handleDocumentPointerDown);
+  }
+}
+
+// common/helpers/layout-change.ts
+var listenersByTarget = new Map;
+var observer;
+var lastDocumentWidth;
+var handleEntries = (entries) => {
+  const notify = new Set;
+  for (const entry of entries) {
+    if (entry.target !== document.documentElement) {
+      for (const listener of listenersByTarget.get(entry.target) ?? []) {
+        notify.add(listener);
+      }
+      continue;
+    }
+    const { width } = entry.contentRect;
+    if (width === lastDocumentWidth) {
+      continue;
+    }
+    lastDocumentWidth = width;
+    for (const listeners of listenersByTarget.values()) {
+      for (const listener of listeners) {
+        notify.add(listener);
+      }
+    }
+  }
+  for (const listener of notify) {
+    listener();
+  }
+};
+var observeLayoutChanges = (target, listener) => {
+  if (typeof ResizeObserver === "undefined" || typeof document === "undefined") {
+    return () => {};
+  }
+  if (!observer) {
+    lastDocumentWidth = undefined;
+    observer = new ResizeObserver(handleEntries);
+    observer.observe(document.documentElement);
+  }
+  let listeners = listenersByTarget.get(target);
+  if (!listeners) {
+    listeners = new Set;
+    listenersByTarget.set(target, listeners);
+    observer.observe(target);
+  }
+  listeners.add(listener);
+  return () => {
+    const current = listenersByTarget.get(target);
+    if (!current?.delete(listener)) {
+      return;
+    }
+    if (current.size === 0) {
+      listenersByTarget.delete(target);
+      observer?.unobserve(target);
+    }
+    if (listenersByTarget.size === 0) {
+      observer?.disconnect();
+      observer = undefined;
+      lastDocumentWidth = undefined;
+    }
+  };
+};
+
+// common/controllers/OverlayPositionController.ts
+var overlayViewportGutter = 16;
+var computeOverlayAvailableHeight = (viewport, viewportHeight, gutter = overlayViewportGutter) => Math.max(0, viewportHeight - (viewport.top ?? viewport.bottom ?? 0) - gutter);
+var computeViewportPosition = (anchor, { placement, shift }, viewportHeight, offset = 0) => {
+  const below = placement.startsWith("bottom");
+  return {
+    left: anchor.left + shift,
+    top: below ? anchor.bottom + offset : null,
+    bottom: below ? null : viewportHeight - anchor.top + offset,
+    anchorWidth: anchor.width
+  };
+};
+var computeOverlayShift = (anchor, overlayWidth, viewportWidth, gutter = overlayViewportGutter, align = "start") => {
+  const viewportRight = viewportWidth - gutter;
+  const startFits = anchor.left + overlayWidth <= viewportRight;
+  const endAligned = anchor.width - overlayWidth;
+  const endFits = anchor.left + endAligned >= gutter;
+  if (!overlayWidth) {
+    return 0;
+  }
+  if (align === "end") {
+    if (endFits)
+      return endAligned;
+    return startFits ? 0 : viewportRight - overlayWidth - anchor.left;
+  }
+  if (startFits)
+    return 0;
+  return endFits ? endAligned : gutter - anchor.left;
+};
+var computeOverlayPlacement = (anchor, overlayHeight, viewportHeight, {
+  gutter = overlayViewportGutter,
+  offset = 0,
+  align = "start"
+} = {}) => {
+  const below = viewportHeight - gutter - anchor.bottom - offset;
+  const above = anchor.top - gutter - offset;
+  const flips = !!overlayHeight && overlayHeight > below && (overlayHeight <= above || above > below);
+  return `${flips ? "top" : "bottom"}-${align}`;
+};
+var sizeOf = (overlay) => {
+  if (overlay.offsetWidth) {
+    return { width: overlay.offsetWidth, height: overlay.offsetHeight };
+  }
+  const { width, height } = overlay.getBoundingClientRect();
+  return { width, height };
+};
+var measureOverlay = (overlay) => {
+  const open = sizeOf(overlay);
+  if (open.width) {
+    return open;
+  }
+  const inline = overlay.style.cssText;
+  overlay.style.display = "block";
+  overlay.style.visibility = "hidden";
+  const size = sizeOf(overlay);
+  overlay.style.cssText = inline;
+  return size;
+};
+
+class OverlayPositionController {
+  constructor(host, options) {
+    this.wantsUpdates = false;
+    this.update = () => {
+      const anchor = this.options.anchor?.() ?? this.host;
+      const overlay = this.options.overlay();
+      if (!anchor || !overlay) {
+        return;
+      }
+      const anchorRect = anchor.getBoundingClientRect();
+      this.options.beforeMeasure?.(anchorRect);
+      const { width, height } = measureOverlay(overlay);
+      const gutter = this.options.gutter ?? overlayViewportGutter;
+      const offset = this.options.offset ?? 0;
+      const align = this.options.align?.() ?? "start";
+      const shift = computeOverlayShift(anchorRect, width, window.innerWidth, gutter, align);
+      const placement = this.options.flip ? computeOverlayPlacement(anchorRect, height, window.innerHeight, {
+        gutter,
+        offset,
+        align
+      }) : `bottom-${align}`;
+      this._position = {
+        shift,
+        placement,
+        viewport: computeViewportPosition(anchorRect, { placement, shift }, window.innerHeight, offset)
+      };
+      this.options.apply(this._position);
+    };
+    this.scheduleUpdate = () => {
+      if (this.frame !== undefined) {
+        return;
+      }
+      this.frame = requestAnimationFrame(() => {
+        this.frame = undefined;
+        this.update();
+      });
+    };
+    this.host = host;
+    this.options = options;
+    host.addController(this);
+  }
+  get position() {
+    return this._position;
+  }
+  start() {
+    this.wantsUpdates = true;
+    this.subscribe();
+    this.update();
+  }
+  stop() {
+    this.wantsUpdates = false;
+    this.unsubscribeAll();
+    this._position = undefined;
+    this.options.clear?.();
+  }
+  hostConnected() {
+    if (this.wantsUpdates) {
+      this.subscribe();
+    }
+  }
+  hostDisconnected() {
+    this.unsubscribeAll();
+  }
+  subscribe() {
+    if (this.unsubscribe) {
+      return;
+    }
+    const stopLayout = observeLayoutChanges(this.host, this.update);
+    if (!this.options.trackViewport || typeof window === "undefined") {
+      this.unsubscribe = stopLayout;
+      return;
+    }
+    const listenerOptions = { capture: true, passive: true };
+    window.addEventListener("scroll", this.scheduleUpdate, listenerOptions);
+    window.addEventListener("resize", this.scheduleUpdate, listenerOptions);
+    this.unsubscribe = () => {
+      stopLayout();
+      window.removeEventListener("scroll", this.scheduleUpdate, true);
+      window.removeEventListener("resize", this.scheduleUpdate, true);
+    };
+  }
+  unsubscribeAll() {
+    this.unsubscribe?.();
+    this.unsubscribe = undefined;
+    if (this.frame !== undefined) {
+      cancelAnimationFrame(this.frame);
+      this.frame = undefined;
+    }
+  }
+}
+
+// common/helpers/listbox-navigation.ts
+var isPrintableKey = (event) => event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey;
+var typeaheadTimeout = 500;
+
+class TypeaheadBuffer {
+  constructor(timeout = typeaheadTimeout) {
+    this.timeout = timeout;
+    this.buffer = "";
+  }
+  get active() {
+    return this.buffer.length > 0;
+  }
+  search(items, char, from, labelOf, { cycle = true } = {}) {
+    this.buffer += char.toLowerCase();
+    clearTimeout(this.timer);
+    this.timer = setTimeout(() => this.clear(), this.timeout);
+    const repeated = [...this.buffer].every((key) => key === this.buffer[0]);
+    const search = repeated ? this.buffer[0] : this.buffer;
+    const start = cycle && search.length === 1 ? from + 1 : Math.max(from, 0);
+    for (let n = 0;n < items.length; n++) {
+      const i = (start + n) % items.length;
+      const item = items[i];
+      if (!item.disabled && labelOf(item).toLowerCase().startsWith(search)) {
+        return i;
+      }
+    }
+    return -1;
+  }
+  clear() {
+    clearTimeout(this.timer);
+    this.timer = undefined;
+    this.buffer = "";
+  }
+}
+
+// common/controllers/RovingFocusController.ts
+var isSeparator = (item) => item.getAttribute("role") === "separator";
+var textOf = (item) => item.textContent?.trim() ?? "";
+var previousKeys = {
+  vertical: ["ArrowUp"],
+  horizontal: ["ArrowLeft"],
+  both: ["ArrowUp", "ArrowLeft"]
+};
+var nextKeys = {
+  vertical: ["ArrowDown"],
+  horizontal: ["ArrowRight"],
+  both: ["ArrowDown", "ArrowRight"]
+};
+
+class RovingFocusController {
+  constructor(host, options) {
+    this.current = null;
+    this.handleFocusIn = (event) => {
+      const target = event.composedPath()[0];
+      if (target instanceof HTMLElement && this.navigable().includes(target)) {
+        this.setCurrent(target);
+      }
+    };
+    this.host = host;
+    this.options = options;
+    this.typeahead = new TypeaheadBuffer(options.typeaheadTimeout ?? typeaheadTimeout);
+    host.addController(this);
+  }
+  get activeIndex() {
+    return this.current ? this.options.items().indexOf(this.current) : -1;
+  }
+  get activeItem() {
+    return this.current;
+  }
+  get typeaheadActive() {
+    return this.typeahead.active;
+  }
+  focusFirst() {
+    return this.focusAt(this.navigable()[0]);
+  }
+  focusLast() {
+    const navigable = this.navigable();
+    return this.focusAt(navigable[navigable.length - 1]);
+  }
+  focusItem(item) {
+    return this.navigable().includes(item) ? this.focusAt(item) : null;
+  }
+  syncTabStops() {
+    const navigable = this.navigable();
+    const stop = this.current && navigable.includes(this.current) ? this.current : navigable[0] ?? null;
+    for (const item of this.options.items()) {
+      if (navigable.includes(item))
+        item.tabIndex = item === stop ? 0 : -1;
+      else
+        item.removeAttribute("tabindex");
+    }
+  }
+  reset() {
+    this.current = null;
+    this.typeahead.clear();
+  }
+  handleKeydown(event) {
+    const navigable = this.navigable();
+    if (!navigable.length) {
+      return false;
+    }
+    if (this.isTypeaheadKey(event)) {
+      const from = this.current ? navigable.indexOf(this.current) : -1;
+      const labelOf = this.options.labelOf ?? textOf;
+      const match = this.typeahead.search(navigable.map((item) => ({ item, disabled: false })), event.key, from, ({ item }) => labelOf(item));
+      if (match >= 0) {
+        this.focusAt(navigable[match]);
+      }
+      return true;
+    }
+    const target = this.targetFor(event.key, navigable);
+    if (target === undefined) {
+      return false;
+    }
+    if (target) {
+      this.focusAt(target);
+    }
+    return true;
+  }
+  hostConnected() {
+    this.host.addEventListener("focusin", this.handleFocusIn);
+  }
+  hostDisconnected() {
+    this.host.removeEventListener("focusin", this.handleFocusIn);
+    this.typeahead.clear();
+  }
+  navigable() {
+    const isSkipped = this.options.isSkipped ?? isSeparator;
+    return this.options.items().filter((item) => !isSkipped(item));
+  }
+  isTypeaheadKey(event) {
+    return (this.options.typeahead ?? true) && isPrintableKey(event) && (event.key !== " " || this.typeahead.active);
+  }
+  targetFor(key, navigable) {
+    const orientation = this.options.orientation ?? "vertical";
+    if (key === "Home")
+      return navigable[0];
+    if (key === "End")
+      return navigable[navigable.length - 1];
+    if (nextKeys[orientation].includes(key))
+      return this.step(navigable, 1);
+    if (previousKeys[orientation].includes(key)) {
+      return this.step(navigable, -1);
+    }
+    return;
+  }
+  step(navigable, dir) {
+    const from = this.current ? navigable.indexOf(this.current) : -1;
+    const outside = dir === 1 ? -1 : navigable.length;
+    const next = (from < 0 ? outside : from) + dir;
+    if (next >= 0 && next < navigable.length)
+      return navigable[next];
+    if (!(this.options.wrap ?? true))
+      return null;
+    return navigable[(next + navigable.length) % navigable.length];
+  }
+  focusAt(item) {
+    if (!item) {
+      return null;
+    }
+    this.setCurrent(item);
+    item.focus();
+    return item;
+  }
+  setCurrent(item) {
+    const changed = item !== this.current;
+    this.current = item;
+    this.syncTabStops();
+    if (changed) {
+      this.options.onFocusChange?.(item, this.activeIndex);
+    }
+  }
+}
+
+// common/helpers/enum-validator.ts
+var enumValidator = (propName, enumSet, candidateValue) => {
+  if (!enumSet.has(candidateValue)) {
+    throw new Error(`Invalid prop ${propName} of value ${candidateValue}. Expected one of: ${Array.from(enumSet).join(", ")}`);
+  }
+};
+
+// common/helpers/enum-creator.ts
+var enumCreator = (acceptableValues, propName, type, other = {}) => {
+  const acceptableValuesSet = new Set(acceptableValues);
+  return {
+    type,
+    hasChanged(newValue, oldValue) {
+      if (newValue !== oldValue) {
+        enumValidator(propName, acceptableValuesSet, newValue);
+        return true;
+      }
+      return false;
+    },
+    ...other
+  };
+};
+
+// common/props/surface/surface.props.ts
+var surfaceValues = {
+  LIGHT: "light",
+  DARK: "dark"
+};
+var surfaceProps = enumCreator(Object.values(surfaceValues), "surface", String, { reflect: true });
+
+// common/styles/overlay-panel.styles.ts
+var overlayPositionProperties = {
+  shift: "--dsgn-overlay-shift",
+  left: "--dsgn-overlay-left",
+  top: "--dsgn-overlay-top",
+  bottom: "--dsgn-overlay-bottom",
+  width: "--dsgn-overlay-width",
+  maxHeight: "--dsgn-overlay-max-height"
+};
+var overlayPanelOffset = 4;
+var originClasses = {
+  "bottom-start": "origin-top-left",
+  "top-start": "origin-bottom-left",
+  "bottom-end": "origin-top-right",
+  "top-end": "origin-bottom-right"
+};
+var anchoredPlacementClasses = {
+  "bottom-start": "top-[calc(100%+4px)]",
+  "top-start": "bottom-[calc(100%+4px)]",
+  "bottom-end": "top-[calc(100%+4px)]",
+  "top-end": "bottom-[calc(100%+4px)]"
+};
+var anchoredClasses = (placement) => [
+  "absolute",
+  "z-50",
+  "left-[var(--dsgn-overlay-shift,0px)]",
+  anchoredPlacementClasses[placement]
+];
+var topLayerClasses = [
+  "fixed",
+  "inset-auto",
+  "m-0",
+  "left-[var(--dsgn-overlay-left,0px)]",
+  "top-[var(--dsgn-overlay-top,auto)]",
+  "bottom-[var(--dsgn-overlay-bottom,auto)]"
+];
+var surfaceClasses = [
+  "box-border",
+  "flex",
+  "flex-col",
+  "gap-0.5",
+  "p-1",
+  "rounded-lg",
+  "border",
+  "border-popover-border",
+  "bg-popover-bg",
+  "[box-shadow:var(--shadow-popover)]",
+  "outline-none"
+];
+var overlayPanelClasses = ({ visible, open, topLayer }, placement) => [
+  ...topLayer ? topLayerClasses : anchoredClasses(placement),
+  ...surfaceClasses,
+  originClasses[placement],
+  ...open ? [] : ["pointer-events-none"],
+  ...visible ? [] : ["hidden"]
+];
+var overlayItemClasses = ({
+  active,
+  disabled,
+  tone
+}) => {
+  const text = tone?.text ?? "text-input-text";
+  const fill = tone?.activeFill ?? "bg-surface-subtle";
+  return [
+    "flex",
+    "items-center",
+    "shrink-0",
+    "pl-2",
+    "pr-2.5",
+    "rounded-md",
+    "font-sans",
+    "select-none",
+    ...disabled ? ["text-input-text-disabled", "cursor-default"] : [text, "cursor-pointer"],
+    ...active ? [fill] : []
+  ];
+};
+
+// components/DropdownMenu/src/DropdownMenu.ts
+import { Icon } from "../../Icon/src/Icon.js";
+
+// components/DropdownMenu/src/DropdownMenu.css
+import { css as css2 } from "lit";
+var styles2 = css2`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
+@layer properties;
+@layer theme {
+  :root, :host {
+    --font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+    'Noto Color Emoji';
+    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
+    monospace;
+    --spacing: 0.25rem;
+    --text-xs: 0.75rem;
+    --text-xs--line-height: calc(1 / 0.75);
+    --text-sm: 0.875rem;
+    --text-sm--line-height: calc(1.25 / 0.875);
+    --radius-md: 0.375rem;
+    --radius-lg: 0.5rem;
+    --color-error-strong: inherit;
+    --color-input-text: inherit;
+    --color-input-text-disabled: inherit;
+    --color-popover-bg: inherit;
+    --color-popover-border: inherit;
+    --color-surface-subtle: inherit;
+    --color-text-secondary: inherit;
+    --shadow-popover: inherit;
+  }
+}
+@layer utilities {
+  .pointer-events-none {
+    pointer-events: none;
+  }
+  .visible {
+    visibility: visible;
+  }
+  .absolute {
+    position: absolute;
+  }
+  .fixed {
+    position: fixed;
+  }
+  .relative {
+    position: relative;
+  }
+  .static {
+    position: static;
+  }
+  .inset-auto {
+    inset: auto;
+  }
+  .top-\\[calc\\(100\\%\\+4px\\)\\] {
+    top: calc(100% + 4px);
+  }
+  .top-\\[var\\(--dsgn-overlay-top\\,auto\\)\\] {
+    top: var(--dsgn-overlay-top,auto);
+  }
+  .bottom-\\[calc\\(100\\%\\+4px\\)\\] {
+    bottom: calc(100% + 4px);
+  }
+  .bottom-\\[var\\(--dsgn-overlay-bottom\\,auto\\)\\] {
+    bottom: var(--dsgn-overlay-bottom,auto);
+  }
+  .left-\\[var\\(--dsgn-overlay-left\\,0px\\)\\] {
+    left: var(--dsgn-overlay-left,0px);
+  }
+  .left-\\[var\\(--dsgn-overlay-shift\\,0px\\)\\] {
+    left: var(--dsgn-overlay-shift,0px);
+  }
+  .z-50 {
+    z-index: 50;
+  }
+  .m-0 {
+    margin: calc(var(--spacing) * 0);
+  }
+  .m-1 {
+    margin: calc(var(--spacing) * 1);
+  }
+  .ml-auto {
+    margin-left: auto;
+  }
+  .box-border {
+    box-sizing: border-box;
+  }
+  .flex {
+    display: flex;
+  }
+  .hidden {
+    display: none;
+  }
+  .inline-flex {
+    display: inline-flex;
+  }
+  .size-3\\.5 {
+    width: calc(var(--spacing) * 3.5);
+    height: calc(var(--spacing) * 3.5);
+  }
+  .size-4 {
+    width: calc(var(--spacing) * 4);
+    height: calc(var(--spacing) * 4);
+  }
+  .size-\\[18px\\] {
+    width: 18px;
+    height: 18px;
+  }
+  .h-7 {
+    height: calc(var(--spacing) * 7);
+  }
+  .h-9 {
+    height: calc(var(--spacing) * 9);
+  }
+  .h-11 {
+    height: calc(var(--spacing) * 11);
+  }
+  .h-px {
+    height: 1px;
+  }
+  .max-h-\\[min\\(calc\\(100vh-32px\\)\\,var\\(--dsgn-overlay-max-height\\,100vh\\)\\)\\] {
+    max-height: min(calc(100vh - 32px), var(--dsgn-overlay-max-height,100vh));
+  }
+  .w-max {
+    width: max-content;
+  }
+  .max-w-\\[calc\\(100vw-32px\\)\\] {
+    max-width: calc(100vw - 32px);
+  }
+  .min-w-\\[232px\\] {
+    min-width: 232px;
+  }
+  .shrink-0 {
+    flex-shrink: 0;
+  }
+  .grow {
+    flex-grow: 1;
+  }
+  .origin-bottom-left {
+    transform-origin: 0 100%;
+  }
+  .origin-bottom-right {
+    transform-origin: 100% 100%;
+  }
+  .origin-top-left {
+    transform-origin: 0 0;
+  }
+  .origin-top-right {
+    transform-origin: 100% 0;
+  }
+  .transform {
+    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
+  }
+  .cursor-default {
+    cursor: default;
+  }
+  .cursor-pointer {
+    cursor: pointer;
+  }
+  .flex-col {
+    flex-direction: column;
+  }
+  .items-center {
+    align-items: center;
+  }
+  .gap-0\\.5 {
+    gap: calc(var(--spacing) * 0.5);
+  }
+  .gap-2 {
+    gap: calc(var(--spacing) * 2);
+  }
+  .gap-2\\.5 {
+    gap: calc(var(--spacing) * 2.5);
+  }
+  .truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .overflow-y-auto {
+    overflow-y: auto;
+  }
+  .rounded-lg {
+    border-radius: var(--radius-lg);
+  }
+  .rounded-md {
+    border-radius: var(--radius-md);
+  }
+  .border {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+  }
+  .border-popover-border {
+    border-color: var(--color-popover-border);
+  }
+  .bg-error-strong\\/15 {
+    background-color: color-mix(in srgb, inherit 15%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-error-strong) 15%, transparent);
+    }
+  }
+  .bg-popover-bg {
+    background-color: var(--color-popover-bg);
+  }
+  .bg-popover-border {
+    background-color: var(--color-popover-border);
+  }
+  .bg-surface-subtle {
+    background-color: var(--color-surface-subtle);
+  }
+  .fill-none {
+    fill: none;
+  }
+  .stroke-current {
+    stroke: currentcolor;
+  }
+  .stroke-\\[1\\.75\\] {
+    stroke-width: 1.75;
+  }
+  .p-1 {
+    padding: calc(var(--spacing) * 1);
+  }
+  .pr-2\\.5 {
+    padding-right: calc(var(--spacing) * 2.5);
+  }
+  .pl-2 {
+    padding-left: calc(var(--spacing) * 2);
+  }
+  .pl-4 {
+    padding-left: calc(var(--spacing) * 4);
+  }
+  .font-mono {
+    font-family: var(--font-mono);
+  }
+  .font-sans {
+    font-family: var(--font-sans);
+  }
+  .text-sm {
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+  }
+  .text-xs {
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+  }
+  .text-\\[13px\\] {
+    font-size: 13px;
+  }
+  .text-\\[15px\\] {
+    font-size: 15px;
+  }
+  .whitespace-nowrap {
+    white-space: nowrap;
+  }
+  .text-error-strong {
+    color: var(--color-error-strong);
+  }
+  .text-input-text {
+    color: var(--color-input-text);
+  }
+  .text-input-text-disabled {
+    color: var(--color-input-text-disabled);
+  }
+  .text-text-secondary {
+    color: var(--color-text-secondary);
+  }
+  .shadow {
+    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .shadow-popover {
+    --tw-shadow: inherit;
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .\\[box-shadow\\:var\\(--shadow-popover\\)\\] {
+    box-shadow: var(--shadow-popover);
+  }
+  .outline-none {
+    --tw-outline-style: none;
+    outline-style: none;
+  }
+  .select-none {
+    -webkit-user-select: none;
+    user-select: none;
+  }
+}
+@property --dsgn-border-sweep-angle {
+  syntax: '<angle>';
+  inherits: false;
+  initial-value: 0deg;
+}
+@property --tw-rotate-x {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-rotate-y {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-rotate-z {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-skew-x {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-skew-y {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-inset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-ring-inset {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-offset-width {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+@property --tw-ring-offset-color {
+  syntax: "*";
+  inherits: false;
+  initial-value: #fff;
+}
+@property --tw-ring-offset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@layer properties {
+  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+    *, ::before, ::after, ::backdrop {
+      --tw-rotate-x: initial;
+      --tw-rotate-y: initial;
+      --tw-rotate-z: initial;
+      --tw-skew-x: initial;
+      --tw-skew-y: initial;
+      --tw-border-style: solid;
+      --tw-shadow: 0 0 #0000;
+      --tw-shadow-color: initial;
+      --tw-shadow-alpha: 100%;
+      --tw-inset-shadow: 0 0 #0000;
+      --tw-inset-shadow-color: initial;
+      --tw-inset-shadow-alpha: 100%;
+      --tw-ring-color: initial;
+      --tw-ring-shadow: 0 0 #0000;
+      --tw-inset-ring-color: initial;
+      --tw-inset-ring-shadow: 0 0 #0000;
+      --tw-ring-inset: initial;
+      --tw-ring-offset-width: 0px;
+      --tw-ring-offset-color: #fff;
+      --tw-ring-offset-shadow: 0 0 #0000;
+      --dsgn-border-sweep-angle: 0deg;
+    }
+  }
+}
+`;
+var DropdownMenu_default = styles2;
+
+// common/props/size/size.props.ts
+var sizeValues = {
+  SM: "sm",
+  MD: "md",
+  LG: "lg"
+};
+var sizeProps = enumCreator(Object.values(sizeValues), "size", String, {
+  reflect: true
+});
+
+// components/DropdownMenu/src/DropdownMenu.props.ts
+var dropdownMenuItemVariantValues = {
+  DEFAULT: "default",
+  DANGER: "danger"
+};
+var isDropdownMenuSeparator = (entry) => ("separator" in entry) && entry.separator === true;
+var dropdownMenuAlignValues = {
+  START: "start",
+  END: "end"
+};
+var dropdownMenuAlignProps = enumCreator(Object.values(dropdownMenuAlignValues), "align", String, { reflect: true });
+var dropdownMenuSizeValues = sizeValues;
+var dropdownMenuSizeProps = sizeProps;
+
+// ../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
+function r(e) {
+  var t, f, n = "";
+  if (typeof e == "string" || typeof e == "number")
+    n += e;
+  else if (typeof e == "object")
+    if (Array.isArray(e)) {
+      var o = e.length;
+      for (t = 0;t < o; t++)
+        e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+    } else
+      for (f in e)
+        e[f] && (n && (n += " "), n += f);
+  return n;
+}
+function clsx() {
+  for (var e, t, f = 0, n = "", o = arguments.length;f < o; f++)
+    (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+  return n;
+}
+var clsx_default = clsx;
+
+// components/DropdownMenu/src/DropdownMenu.styles.ts
+var anchorClasses = () => clsx_default("relative", "inline-flex");
+var menuClasses = (panel, placement) => clsx_default(overlayPanelClasses(panel, placement), "w-max", "min-w-[232px]", "max-w-[calc(100vw-32px)]", "max-h-[min(calc(100vh-32px),var(--dsgn-overlay-max-height,100vh))]", "overflow-y-auto");
+var itemSizeClasses = {
+  [dropdownMenuSizeValues.SM]: ["h-7", "gap-2", "text-[13px]"],
+  [dropdownMenuSizeValues.MD]: ["h-9", "gap-2.5", "text-sm"],
+  [dropdownMenuSizeValues.LG]: ["h-11", "gap-2.5", "text-[15px]"]
+};
+var dangerTone = {
+  text: "text-error-strong",
+  activeFill: "bg-error-strong/15"
+};
+var itemClasses = (size, {
+  active,
+  disabled,
+  danger
+}) => clsx_default(overlayItemClasses({
+  active,
+  disabled,
+  tone: danger ? dangerTone : undefined
+}), itemSizeClasses[size], "outline-none", "whitespace-nowrap");
+var iconSizeClasses = {
+  [dropdownMenuSizeValues.SM]: "size-3.5",
+  [dropdownMenuSizeValues.MD]: "size-4",
+  [dropdownMenuSizeValues.LG]: "size-[18px]"
+};
+var itemIconClasses = (size, plain) => clsx_default(iconSizeClasses[size], "shrink-0", "fill-none", "stroke-current", "stroke-[1.75]", plain && "text-text-secondary");
+var itemLabelClasses = () => clsx_default("truncate");
+var itemShortcutClasses = (plain) => clsx_default("ml-auto", "pl-4", "shrink-0", "font-mono", "text-xs", plain && "text-text-secondary");
+var separatorClasses = () => clsx_default("shrink-0", "h-px", "m-1", "bg-popover-border");
+
+// components/DropdownMenu/src/DropdownMenu.ts
+var supportsPopover = () => typeof HTMLElement !== "undefined" && ("popover" in HTMLElement.prototype);
+var px = (value) => value === null ? "auto" : `${value}px`;
+var coarsePointerQuery = "(pointer: coarse)";
+var matchCoarsePointer = () => typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia(coarsePointerQuery) : undefined;
+var openMenus = new Set;
+
+class DropdownMenu extends Base {
+  constructor() {
+    super(...arguments);
+    this.surface = surfaceValues.LIGHT;
+    this.size = dropdownMenuSizeValues.MD;
+    this.items = [];
+    this.align = dropdownMenuAlignValues.START;
+    this.open = false;
+    this.label = "";
+    this._visible = false;
+    this._placement = "bottom-start";
+    this._activeIndex = -1;
+    this._coarse = false;
+    this._triggerName = "";
+    this._trigger = null;
+    this._focusOnOpen = "first";
+    this._returnFocus = false;
+    this._motion = new MotionController(this);
+    this._exitRun = 0;
+    this._topLayer = supportsPopover();
+    this._inTopLayer = false;
+    this._menuScrollTop = 0;
+    this._position = new OverlayPositionController(this, {
+      anchor: () => this._trigger,
+      overlay: () => this._menu,
+      flip: true,
+      trackViewport: true,
+      offset: overlayPanelOffset,
+      align: () => this.align,
+      beforeMeasure: () => {
+        this._menuScrollTop = this._menu?.scrollTop ?? 0;
+        this.style.removeProperty(overlayPositionProperties.maxHeight);
+      },
+      apply: ({ shift, placement, viewport }) => {
+        this.style.setProperty(overlayPositionProperties.shift, `${shift}px`);
+        this.style.setProperty(overlayPositionProperties.left, px(viewport.left));
+        this.style.setProperty(overlayPositionProperties.top, px(viewport.top));
+        this.style.setProperty(overlayPositionProperties.bottom, px(viewport.bottom));
+        this.style.setProperty(overlayPositionProperties.maxHeight, `${computeOverlayAvailableHeight(viewport, window.innerHeight)}px`);
+        if (this._menu)
+          this._menu.scrollTop = this._menuScrollTop;
+        this._placement = placement;
+      },
+      clear: () => {
+        for (const name of Object.values(overlayPositionProperties)) {
+          this.style.removeProperty(name);
+        }
+        this._placement = `bottom-${this.align}`;
+      }
+    });
+    this._dismiss = new OverlayDismissController(this, {
+      isOpen: () => this.open,
+      onDismiss: () => this._close(false),
+      returnFocusTo: () => this._trigger
+    });
+    this._roving = new RovingFocusController(this, {
+      items: () => this._itemElements(),
+      labelOf: (item) => this._entryAt(item)?.label ?? "",
+      onFocusChange: (item) => {
+        this._activeIndex = Number(item.dataset.index);
+      }
+    });
+    this._resolveTrigger = () => {
+      const slot = this.renderRoot.querySelector('slot[name="trigger"]');
+      const trigger = slot?.assignedElements({ flatten: true })[0] ?? null;
+      if (trigger === this._trigger)
+        return;
+      this._trigger = trigger;
+      if (this.open)
+        this._triggerName = this._readTriggerName();
+      this._syncTrigger();
+    };
+    this._handleTriggerClick = (event) => {
+      if (!this._fromTrigger(event) || this._triggerUnavailable(event))
+        return;
+      if (this.open)
+        this._close(true);
+      else
+        this.show("first");
+    };
+    this._handleTriggerKeydown = (event) => {
+      if (!this._fromTrigger(event) || this._triggerUnavailable(event))
+        return;
+      const opens = {
+        Enter: "first",
+        " ": "first",
+        ArrowDown: "first",
+        ArrowUp: "last"
+      };
+      const focus = opens[event.key];
+      if (!focus)
+        return;
+      event.preventDefault();
+      this.show(focus);
+    };
+    this._handleTriggerKeyup = (event) => {
+      if (event.key === " " && this._fromTrigger(event))
+        event.preventDefault();
+    };
+    this._handleFocusOut = (event) => {
+      if (!this.open)
+        return;
+      const next = event.relatedTarget;
+      const inside = next === this || this.contains(next) || this.renderRoot.contains(next);
+      if (next && inside)
+        return;
+      this._close(false);
+    };
+    this._handleCoarseChange = () => {
+      this._coarse = !!this._coarseQuery?.matches;
+    };
+  }
+  static styles = [Base.styles, DropdownMenu_default];
+  get _effectiveSize() {
+    return this._coarse ? dropdownMenuSizeValues.LG : this.size;
+  }
+  _itemElements() {
+    return this._menu ? [...this._menu.querySelectorAll("[data-index]")] : [];
+  }
+  _entryAt(element) {
+    const entry = this.items[Number(element.dataset.index)];
+    return entry && !isDropdownMenuSeparator(entry) ? entry : undefined;
+  }
+  show(focus = "first") {
+    this._focusOnOpen = focus;
+    this.open = true;
+  }
+  hide() {
+    this._close(false);
+  }
+  _close(returnFocus) {
+    if (!this.open)
+      return;
+    this._returnFocus = returnFocus;
+    this.open = false;
+  }
+  _activate(element) {
+    const item = this._entryAt(element);
+    if (!item || item.disabled)
+      return;
+    this.emit("dsgn-select", { value: item.value });
+    this._close(true);
+  }
+  _readTriggerName() {
+    return this._trigger?.getAttribute("aria-label") || this._trigger?.textContent?.trim() || "";
+  }
+  _syncTrigger() {
+    const trigger = this._trigger;
+    if (!trigger)
+      return;
+    const expanded = this.open ? "true" : "false";
+    const declared = trigger.constructor.elementProperties;
+    if (declared?.has("ariaExpanded")) {
+      Object.assign(trigger, { ariaHasPopup: "menu", ariaExpanded: expanded });
+    } else {
+      trigger.setAttribute("aria-haspopup", "menu");
+      trigger.setAttribute("aria-expanded", expanded);
+    }
+  }
+  _fromTrigger(event) {
+    return !!this._trigger && event.composedPath().includes(this._trigger);
+  }
+  _triggerUnavailable(event) {
+    if (this._trigger?.loading)
+      return true;
+    const path = event.composedPath();
+    return path.slice(0, path.indexOf(this._trigger) + 1).some((element) => element instanceof HTMLElement && (element.disabled || element.getAttribute("aria-disabled") === "true"));
+  }
+  _handleMenuKeydown(event) {
+    if (this._dismiss.handleKeydown(event)) {
+      event.preventDefault();
+      event.stopPropagation();
+      return;
+    }
+    if (event.key === "Tab") {
+      this._close(false);
+      return;
+    }
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      const item = this._roving.activeItem;
+      if (item)
+        this._activate(item);
+      return;
+    }
+    if (this._roving.handleKeydown(event)) {
+      event.preventDefault();
+    }
+  }
+  _handleItemPointerMove(event) {
+    const item = event.currentTarget;
+    if (this._roving.activeItem !== item)
+      this._roving.focusItem(item);
+  }
+  _handleItemClick(event) {
+    this._activate(event.currentTarget);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this._coarseQuery = matchCoarsePointer();
+    this._coarse = !!this._coarseQuery?.matches;
+    this._coarseQuery?.addEventListener?.("change", this._handleCoarseChange);
+    this.addEventListener("focusout", this._handleFocusOut);
+    this.addEventListener("click", this._handleTriggerClick);
+    this.addEventListener("keydown", this._handleTriggerKeydown);
+    this.addEventListener("keyup", this._handleTriggerKeyup);
+  }
+  disconnectedCallback() {
+    this._coarseQuery?.removeEventListener?.("change", this._handleCoarseChange);
+    this.removeEventListener("focusout", this._handleFocusOut);
+    this.removeEventListener("click", this._handleTriggerClick);
+    this.removeEventListener("keydown", this._handleTriggerKeydown);
+    this.removeEventListener("keyup", this._handleTriggerKeyup);
+    openMenus.delete(this);
+    if (this.open || this._visible) {
+      this._exitRun++;
+      this.open = false;
+      this._inTopLayer = false;
+      this._visible = false;
+      this._activeIndex = -1;
+      this._roving.reset();
+    }
+    super.disconnectedCallback();
+  }
+  firstUpdated() {
+    this._resolveTrigger();
+  }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("open") && this.open) {
+      this._visible = true;
+      this._triggerName = this._readTriggerName();
+    }
+    if (changedProperties.has("align") && !this.open) {
+      this._placement = `bottom-${this.align}`;
+    }
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    this.updateTheme(changedProperties, this.surface);
+    this._roving.syncTabStops();
+    if (changedProperties.has("open")) {
+      this._syncTrigger();
+      if (this.open || changedProperties.get("open") === true) {
+        this._handleOpenChange();
+      }
+    }
+  }
+  _showMenu(menu) {
+    if (!this._topLayer || this._inTopLayer)
+      return;
+    menu.showPopover();
+    this._inTopLayer = true;
+  }
+  _hideMenu(menu) {
+    if (!this._inTopLayer)
+      return;
+    this._inTopLayer = false;
+    menu?.hidePopover();
+  }
+  _handleOpenChange() {
+    const menu = this._menu;
+    if (this.open) {
+      for (const other of openMenus)
+        if (other !== this)
+          other.hide();
+      openMenus.add(this);
+      this._exitRun++;
+      this._dismiss.start();
+      if (menu)
+        this._showMenu(menu);
+      this._position.start();
+      if (this._focusOnOpen === "last")
+        this._roving.focusLast();
+      else
+        this._roving.focusFirst();
+      this._focusOnOpen = "first";
+      if (menu) {
+        this._motion.enter(menu, "scaleIn", { reducedMotion: "jump" });
+      }
+      return;
+    }
+    openMenus.delete(this);
+    this._dismiss.stop();
+    this._activeIndex = -1;
+    this._roving.reset();
+    if (this._returnFocus)
+      this._trigger?.focus();
+    this._returnFocus = false;
+    this._exit(menu);
+  }
+  _exit(menu) {
+    if (!this._visible)
+      return;
+    const run = ++this._exitRun;
+    const hide = () => {
+      if (run !== this._exitRun)
+        return;
+      this._hideMenu(menu);
+      this._visible = false;
+      this._position.stop();
+    };
+    if (menu) {
+      this._motion.exit(menu, "scaleIn", { reducedMotion: "jump" }).then(hide);
+    } else {
+      hide();
+    }
+  }
+  _renderIcon(name, plain) {
+    const icon = name ? Icon.resolve(name) : undefined;
+    if (!icon)
+      return nothing;
+    return html2`<svg
+      part="item-icon"
+      class="${itemIconClasses(this._effectiveSize, plain)}"
+      viewBox="0 0 24 24"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+    >
+      ${icon}
+    </svg>`;
+  }
+  _renderEntry(entry, index) {
+    if (isDropdownMenuSeparator(entry)) {
+      return html2`<div
+        part="separator"
+        role="separator"
+        data-index="${index}"
+        class="${separatorClasses()}"
+      ></div>`;
+    }
+    const disabled = !!entry.disabled;
+    const danger = entry.variant === dropdownMenuItemVariantValues.DANGER;
+    const plain = !disabled && !danger;
+    return html2`<div
+      part="item"
+      role="menuitem"
+      tabindex="-1"
+      data-index="${index}"
+      class="${itemClasses(this._effectiveSize, {
+      active: index === this._activeIndex,
+      disabled,
+      danger
+    })}"
+      aria-disabled="${disabled ? "true" : nothing}"
+      @click=${this._handleItemClick}
+      @pointermove=${this._handleItemPointerMove}
+    >
+      ${this._renderIcon(entry.icon, plain)}
+      <span class="${itemLabelClasses()}">${entry.label}</span>
+      ${entry.shortcut ? html2`<span part="item-shortcut" class="${itemShortcutClasses(plain)}"
+            >${entry.shortcut}</span
+          >` : nothing}
+    </div>`;
+  }
+  render() {
+    return html2`<div class="${anchorClasses()}">
+      <slot name="trigger" @slotchange=${this._resolveTrigger}></slot>
+      <div
+        id="menu"
+        part="menu"
+        role="menu"
+        popover=${this._topLayer ? "manual" : nothing}
+        class="${menuClasses({
+      visible: this._visible,
+      open: this.open,
+      topLayer: this._topLayer
+    }, this._placement)}"
+        aria-label="${this.label || this._triggerName || nothing}"
+        aria-orientation="vertical"
+        @keydown=${this._handleMenuKeydown}
+      >
+        ${this.items.map((entry, index) => this._renderEntry(entry, index))}
+      </div>
+    </div>`;
+  }
+}
+__legacyDecorateClassTS([
+  property({ ...surfaceProps })
+], DropdownMenu.prototype, "surface", undefined);
+__legacyDecorateClassTS([
+  property({ ...dropdownMenuSizeProps })
+], DropdownMenu.prototype, "size", undefined);
+__legacyDecorateClassTS([
+  property({ type: Array })
+], DropdownMenu.prototype, "items", undefined);
+__legacyDecorateClassTS([
+  property({ ...dropdownMenuAlignProps })
+], DropdownMenu.prototype, "align", undefined);
+__legacyDecorateClassTS([
+  property({ type: Boolean, reflect: true })
+], DropdownMenu.prototype, "open", undefined);
+__legacyDecorateClassTS([
+  property({ type: String })
+], DropdownMenu.prototype, "label", undefined);
+__legacyDecorateClassTS([
+  state()
+], DropdownMenu.prototype, "_visible", undefined);
+__legacyDecorateClassTS([
+  state()
+], DropdownMenu.prototype, "_placement", undefined);
+__legacyDecorateClassTS([
+  state()
+], DropdownMenu.prototype, "_activeIndex", undefined);
+__legacyDecorateClassTS([
+  state()
+], DropdownMenu.prototype, "_coarse", undefined);
+__legacyDecorateClassTS([
+  state()
+], DropdownMenu.prototype, "_triggerName", undefined);
+__legacyDecorateClassTS([
+  query("#menu")
+], DropdownMenu.prototype, "_menu", undefined);
+defineElement("dsgn-dropdown-menu", DropdownMenu);
+export {
+  DropdownMenu
+};