@ds-gn/ui 0.10.0 → 0.11.0

package/dist/components/Select/src/Select.js

@@ -0,0 +1,1766 @@
+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/Select/src/Select.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/field-control.ts
+var FIELD_CONTROL = Symbol.for("dsgn.field-control");
+var markFieldControl = (ctor) => {
+  Object.defineProperty(ctor, FIELD_CONTROL, { value: true });
+};
+var describedBy = (...ids) => {
+  const value = ids.filter(Boolean).join(" ");
+  return value || undefined;
+};
+
+// common/helpers/listbox-navigation.ts
+var stepEnabled = (items, from, dir) => {
+  for (let i = from + dir;i >= 0 && i < items.length; i += dir) {
+    if (!items[i].disabled)
+      return i;
+  }
+  return from;
+};
+var firstEnabled = (items) => stepEnabled(items, -1, 1);
+var lastEnabled = (items) => {
+  const last = stepEnabled(items, items.length, -1);
+  return last === items.length ? -1 : last;
+};
+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/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/Icon/src/icons/check.ts
+import { svg } from "lit";
+var check = svg`<path d="M20 6 9 17l-5-5" />`;
+// components/Icon/src/icons/chevron-down.ts
+import { svg as svg2 } from "lit";
+var chevronDown = svg2`<path d="m6 9 6 6 6-6" />`;
+// components/Icon/src/icons/circle-alert.ts
+import { svg as svg3 } from "lit";
+var circleAlert = svg3`<circle cx="12" cy="12" r="10" /><line x1="12" x2="12" y1="8" y2="12" /><line x1="12" x2="12.01" y1="16" y2="16" />`;
+// components/Select/src/Select.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);
+    --text-base: 1rem;
+    --text-base--line-height: calc(1.5 / 1);
+    --font-weight-medium: 500;
+    --radius-md: 0.375rem;
+    --radius-lg: 0.5rem;
+    --ease-out: cubic-bezier(0, 0, 0.2, 1);
+    --default-transition-duration: 150ms;
+    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    --ease-emphasized: var(--dsgn-src-ease-emphasized, cubic-bezier(0.16, 1, 0.3, 1));
+    --radius-control: var(--dsgn-src-radius-control, 0.375rem);
+    --radius-input: var(--dsgn-src-radius-input, var(--radius-control));
+    --color-error: inherit;
+    --color-error-strong: inherit;
+    --color-focus: inherit;
+    --color-input-bg: inherit;
+    --color-input-bg-disabled: inherit;
+    --color-input-border: inherit;
+    --color-input-border-disabled: inherit;
+    --color-input-border-hover: inherit;
+    --color-input-error-ring: inherit;
+    --color-input-error-text: inherit;
+    --color-input-focus: inherit;
+    --color-input-focus-ring: inherit;
+    --color-input-placeholder: inherit;
+    --color-input-text: inherit;
+    --color-input-text-disabled: inherit;
+    --color-popover-bg: inherit;
+    --color-popover-border: inherit;
+    --color-surface-subtle: inherit;
+    --color-text-primary: 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);
+  }
+  .ml-auto {
+    margin-left: auto;
+  }
+  .box-border {
+    box-sizing: border-box;
+  }
+  .block {
+    display: block;
+  }
+  .flex {
+    display: flex;
+  }
+  .hidden {
+    display: none;
+  }
+  .table {
+    display: table;
+  }
+  .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-8 {
+    height: calc(var(--spacing) * 8);
+  }
+  .h-9 {
+    height: calc(var(--spacing) * 9);
+  }
+  .h-10 {
+    height: calc(var(--spacing) * 10);
+  }
+  .h-12 {
+    height: calc(var(--spacing) * 12);
+  }
+  .max-h-\\[min\\(20rem\\,var\\(--dsgn-overlay-max-height\\,20rem\\)\\)\\] {
+    max-height: min(20rem, var(--dsgn-overlay-max-height,20rem));
+  }
+  .w-\\[var\\(--dsgn-overlay-width\\,auto\\)\\] {
+    width: var(--dsgn-overlay-width,auto);
+  }
+  .w-fit {
+    width: fit-content;
+  }
+  .w-full {
+    width: 100%;
+  }
+  .min-w-40 {
+    min-width: calc(var(--spacing) * 40);
+  }
+  .shrink-0 {
+    flex-shrink: 0;
+  }
+  .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;
+  }
+  .rotate-180 {
+    rotate: 180deg;
+  }
+  .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-not-allowed {
+    cursor: not-allowed;
+  }
+  .cursor-pointer {
+    cursor: pointer;
+  }
+  .flex-col {
+    flex-direction: column;
+  }
+  .items-center {
+    align-items: center;
+  }
+  .justify-between {
+    justify-content: space-between;
+  }
+  .gap-0\\.5 {
+    gap: calc(var(--spacing) * 0.5);
+  }
+  .gap-1\\.5 {
+    gap: calc(var(--spacing) * 1.5);
+  }
+  .gap-2 {
+    gap: calc(var(--spacing) * 2);
+  }
+  .truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .overflow-y-auto {
+    overflow-y: auto;
+  }
+  .rounded-\\[var\\(--radius-control\\,0\\.375rem\\)\\] {
+    border-radius: var(--radius-control,0.375rem);
+  }
+  .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-error {
+    border-color: var(--color-error);
+  }
+  .border-input-border {
+    border-color: var(--color-input-border);
+  }
+  .border-input-border-disabled {
+    border-color: var(--color-input-border-disabled);
+  }
+  .border-input-focus {
+    border-color: var(--color-input-focus);
+  }
+  .border-popover-border {
+    border-color: var(--color-popover-border);
+  }
+  .bg-input-bg {
+    background-color: var(--color-input-bg);
+  }
+  .bg-input-bg-disabled {
+    background-color: var(--color-input-bg-disabled);
+  }
+  .bg-popover-bg {
+    background-color: var(--color-popover-bg);
+  }
+  .bg-surface-subtle {
+    background-color: var(--color-surface-subtle);
+  }
+  .fill-none {
+    fill: none;
+  }
+  .stroke-current {
+    stroke: currentcolor;
+  }
+  .stroke-2 {
+    stroke-width: 2;
+  }
+  .stroke-\\[1\\.75\\] {
+    stroke-width: 1.75;
+  }
+  .p-1 {
+    padding: calc(var(--spacing) * 1);
+  }
+  .pr-2 {
+    padding-right: calc(var(--spacing) * 2);
+  }
+  .pr-2\\.5 {
+    padding-right: calc(var(--spacing) * 2.5);
+  }
+  .pr-3 {
+    padding-right: calc(var(--spacing) * 3);
+  }
+  .pl-2 {
+    padding-left: calc(var(--spacing) * 2);
+  }
+  .pl-2\\.5 {
+    padding-left: calc(var(--spacing) * 2.5);
+  }
+  .pl-3 {
+    padding-left: calc(var(--spacing) * 3);
+  }
+  .pl-3\\.5 {
+    padding-left: calc(var(--spacing) * 3.5);
+  }
+  .text-left {
+    text-align: left;
+  }
+  .font-mono {
+    font-family: var(--font-mono);
+  }
+  .font-sans {
+    font-family: var(--font-sans);
+  }
+  .text-base {
+    font-size: var(--text-base);
+    line-height: var(--tw-leading, var(--text-base--line-height));
+  }
+  .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-\\[11px\\] {
+    font-size: 11px;
+  }
+  .text-\\[13px\\] {
+    font-size: 13px;
+  }
+  .text-\\[15px\\] {
+    font-size: 15px;
+  }
+  .leading-4 {
+    --tw-leading: calc(var(--spacing) * 4);
+    line-height: calc(var(--spacing) * 4);
+  }
+  .leading-5 {
+    --tw-leading: calc(var(--spacing) * 5);
+    line-height: calc(var(--spacing) * 5);
+  }
+  .leading-\\[18px\\] {
+    --tw-leading: 18px;
+    line-height: 18px;
+  }
+  .leading-\\[22px\\] {
+    --tw-leading: 22px;
+    line-height: 22px;
+  }
+  .font-medium {
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+  }
+  .text-error-strong {
+    color: var(--color-error-strong);
+  }
+  .text-focus {
+    color: var(--color-focus);
+  }
+  .text-input-error-text {
+    color: var(--color-input-error-text);
+  }
+  .text-input-placeholder {
+    color: var(--color-input-placeholder);
+  }
+  .text-input-text {
+    color: var(--color-input-text);
+  }
+  .text-input-text-disabled {
+    color: var(--color-input-text-disabled);
+  }
+  .text-text-primary {
+    color: var(--color-text-primary);
+  }
+  .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-\\[0_0_0_3px_var\\(--color-input-focus-ring\\)\\] {
+    --tw-shadow: 0 0 0 3px var(--tw-shadow-color, var(--color-input-focus-ring));
+    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);
+  }
+  .transition-\\[border-color\\,box-shadow\\] {
+    transition-property: border-color,box-shadow;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .transition-transform {
+    transition-property: transform, translate, scale, rotate;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .duration-150 {
+    --tw-duration: 150ms;
+    transition-duration: 150ms;
+  }
+  .duration-200 {
+    --tw-duration: 200ms;
+    transition-duration: 200ms;
+  }
+  .ease-\\[var\\(--ease-emphasized\\)\\] {
+    --tw-ease: var(--ease-emphasized);
+    transition-timing-function: var(--ease-emphasized);
+  }
+  .ease-out {
+    --tw-ease: var(--ease-out);
+    transition-timing-function: var(--ease-out);
+  }
+  .outline-none {
+    --tw-outline-style: none;
+    outline-style: none;
+  }
+  .select-none {
+    -webkit-user-select: none;
+    user-select: none;
+  }
+  .hover\\:border-input-border-hover {
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--color-input-border-hover);
+      }
+    }
+  }
+  .focus-visible\\:border-input-focus {
+    &:focus-visible {
+      border-color: var(--color-input-focus);
+    }
+  }
+  .focus-visible\\:shadow-\\[0_0_0_3px_var\\(--color-input-error-ring\\)\\] {
+    &:focus-visible {
+      --tw-shadow: 0 0 0 3px var(--tw-shadow-color, var(--color-input-error-ring));
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
+  .focus-visible\\:shadow-\\[0_0_0_3px_var\\(--color-input-focus-ring\\)\\] {
+    &:focus-visible {
+      --tw-shadow: 0 0 0 3px var(--tw-shadow-color, var(--color-input-focus-ring));
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
+  .motion-reduce\\:transition-none {
+    @media (prefers-reduced-motion: reduce) {
+      transition-property: 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-leading {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}
+@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;
+}
+@property --tw-duration {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ease {
+  syntax: "*";
+  inherits: false;
+}
+@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-leading: initial;
+      --tw-font-weight: initial;
+      --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;
+      --tw-duration: initial;
+      --tw-ease: initial;
+      --dsgn-border-sweep-angle: 0deg;
+    }
+  }
+}
+`;
+var Select_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/Select/src/Select.props.ts
+var selectSizeValues = sizeValues;
+var selectSizeProps = 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/Select/src/Select.styles.ts
+var triggerBaseClasses = [
+  "flex",
+  "items-center",
+  "justify-between",
+  "gap-2",
+  "w-full",
+  "box-border",
+  "border",
+  "text-left",
+  "text-input-text",
+  "rounded-[var(--radius-control,0.375rem)]",
+  "font-sans",
+  "outline-none",
+  "cursor-pointer",
+  "transition-[border-color,box-shadow]",
+  "duration-150",
+  "ease-out",
+  "motion-reduce:transition-none"
+];
+var focusRing = [
+  "border-input-focus",
+  "shadow-[0_0_0_3px_var(--color-input-focus-ring)]"
+];
+var triggerStateClasses = {
+  default: [
+    "bg-input-bg",
+    "border-input-border",
+    "hover:border-input-border-hover",
+    "focus-visible:border-input-focus",
+    "focus-visible:shadow-[0_0_0_3px_var(--color-input-focus-ring)]"
+  ],
+  open: ["bg-input-bg", ...focusRing],
+  invalid: [
+    "bg-input-bg",
+    "border-error",
+    "focus-visible:shadow-[0_0_0_3px_var(--color-input-error-ring)]"
+  ],
+  disabled: [
+    "bg-input-bg-disabled",
+    "border-input-border-disabled",
+    "text-input-text-disabled",
+    "cursor-not-allowed"
+  ]
+};
+var triggerSizeClasses = {
+  [selectSizeValues.SM]: ["h-8", "pl-2.5", "pr-2", "text-[13px]"],
+  [selectSizeValues.MD]: ["h-10", "pl-3", "pr-2.5", "text-sm"],
+  [selectSizeValues.LG]: ["h-12", "pl-3.5", "pr-3", "text-base"]
+};
+var triggerClasses = (size, state) => clsx_default(triggerBaseClasses, triggerSizeClasses[size], triggerStateClasses[state]);
+var valueClasses = (isPlaceholder) => clsx_default("truncate", isPlaceholder && "text-input-placeholder");
+var chevronSizeClasses = {
+  [selectSizeValues.SM]: "size-3.5",
+  [selectSizeValues.MD]: "size-4",
+  [selectSizeValues.LG]: "size-[18px]"
+};
+var chevronClasses = (size, open) => clsx_default(chevronSizeClasses[size], "shrink-0", "fill-none", "stroke-current", "stroke-[1.75]", "transition-transform", "duration-200", "ease-[var(--ease-emphasized)]", "motion-reduce:transition-none", open && "rotate-180");
+var anchorClasses = () => clsx_default("relative", "w-full");
+var listboxClasses = (panel, placement) => clsx_default(overlayPanelClasses(panel, placement), panel.topLayer ? "w-[var(--dsgn-overlay-width,auto)]" : "w-full", "min-w-40", "max-h-[min(20rem,var(--dsgn-overlay-max-height,20rem))]", "overflow-y-auto");
+var optionSizeClasses = {
+  [selectSizeValues.SM]: ["h-8", "text-[13px]"],
+  [selectSizeValues.MD]: ["h-9", "text-sm"],
+  [selectSizeValues.LG]: ["h-10", "text-base"]
+};
+var optionClasses = (size, {
+  active,
+  selected,
+  disabled
+}) => clsx_default(overlayItemClasses({ active, disabled }), "gap-2", optionSizeClasses[size], selected && "font-medium");
+var checkClasses = () => clsx_default("size-4", "shrink-0", "fill-none", "stroke-current", "stroke-2", "text-focus");
+var checkSlotClasses = () => clsx_default("size-4", "shrink-0");
+var optionLabelClasses = () => clsx_default("truncate");
+var optionTagClasses = () => clsx_default("ml-auto", "shrink-0", "font-mono", "text-[11px]");
+var wrapperClasses = () => clsx_default("flex", "flex-col", "gap-1.5");
+var labelSizeClasses = {
+  [selectSizeValues.SM]: ["text-[13px]", "leading-[18px]"],
+  [selectSizeValues.MD]: ["text-sm", "leading-5"],
+  [selectSizeValues.LG]: ["text-[15px]", "leading-[22px]"]
+};
+var labelClasses = (size, disabled) => clsx_default("block", "w-fit", "font-sans", "font-medium", labelSizeClasses[size], disabled ? "text-input-text-disabled" : "text-text-primary");
+var requiredClasses = () => clsx_default("text-error-strong");
+var messageSizeClasses = {
+  [selectSizeValues.SM]: ["text-xs", "leading-4"],
+  [selectSizeValues.MD]: ["text-[13px]", "leading-[18px]"],
+  [selectSizeValues.LG]: ["text-sm", "leading-5"]
+};
+var hintClasses = (size) => clsx_default("font-sans", messageSizeClasses[size], "text-text-secondary");
+var errorClasses = (size) => clsx_default("flex", "items-center", "gap-1.5", "font-sans", "text-left", "text-input-error-text", messageSizeClasses[size]);
+var errorIconClasses = () => clsx_default("size-3.5", "shrink-0", "fill-none", "stroke-current", "stroke-[1.75]");
+
+// components/Select/src/Select.ts
+var supportsPopover = () => typeof HTMLElement !== "undefined" && ("popover" in HTMLElement.prototype);
+var px = (value) => value === null ? "auto" : `${value}px`;
+var icon = (classes, path) => html2`<svg
+    class="${classes}"
+    viewBox="0 0 24 24"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+  >
+    ${path}
+  </svg>`;
+var valueMissingMessage = () => {
+  if (typeof document === "undefined")
+    return "";
+  const probe = document.createElement("select");
+  probe.required = true;
+  return probe.validationMessage;
+};
+
+class Select extends Base {
+  static styles = [Base.styles, Select_default];
+  static formAssociated = true;
+  static shadowRootOptions = {
+    ...Base.shadowRootOptions,
+    delegatesFocus: true
+  };
+  #internals;
+  constructor() {
+    super();
+    this.surface = surfaceValues.LIGHT;
+    this.size = selectSizeValues.MD;
+    this.options = [];
+    this.value = "";
+    this.name = "";
+    this.placeholder = "";
+    this.label = "";
+    this.ariaLabel = "";
+    this.hint = "";
+    this.error = "";
+    this.invalid = false;
+    this.disabled = false;
+    this.required = false;
+    this._formDisabled = false;
+    this._open = false;
+    this._visible = false;
+    this._activeIndex = -1;
+    this._placement = "bottom-start";
+    this._defaultValue = "";
+    this._typeahead = new TypeaheadBuffer;
+    this._motion = new MotionController(this);
+    this._exitRun = 0;
+    this._topLayer = supportsPopover();
+    this._inTopLayer = false;
+    this._listboxScrollTop = 0;
+    this._position = new OverlayPositionController(this, {
+      anchor: () => this._trigger,
+      overlay: () => this._listbox,
+      flip: true,
+      trackViewport: true,
+      offset: overlayPanelOffset,
+      beforeMeasure: ({ width }) => {
+        this._listboxScrollTop = this._listbox?.scrollTop ?? 0;
+        this.style.removeProperty(overlayPositionProperties.maxHeight);
+        this.style.setProperty(overlayPositionProperties.width, `${width}px`);
+      },
+      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));
+        const availableHeight = computeOverlayAvailableHeight(viewport, window.innerHeight);
+        this.style.setProperty(overlayPositionProperties.maxHeight, `${availableHeight}px`);
+        if (this._listbox)
+          this._listbox.scrollTop = this._listboxScrollTop;
+        this._placement = placement;
+      },
+      clear: () => {
+        for (const name of Object.values(overlayPositionProperties)) {
+          this.style.removeProperty(name);
+        }
+        this._placement = "bottom-start";
+      }
+    });
+    this._dismiss = new OverlayDismissController(this, {
+      isOpen: () => this._open,
+      onDismiss: () => this._close(),
+      returnFocusTo: () => this._trigger
+    });
+    this.#internals = this.attachInternals();
+  }
+  get _isDisabled() {
+    return this.disabled || this._formDisabled;
+  }
+  get _isInvalid() {
+    return this.invalid || !!this.error;
+  }
+  get _selectedIndex() {
+    return this.options.findIndex((option) => option.value === this.value);
+  }
+  get _state() {
+    if (this._isDisabled)
+      return "disabled";
+    if (this._open)
+      return "open";
+    if (this._isInvalid)
+      return "invalid";
+    return "default";
+  }
+  get _openingIndex() {
+    const selected = this._selectedIndex;
+    return selected >= 0 && !this.options[selected].disabled ? selected : firstEnabled(this.options);
+  }
+  _openAt(index) {
+    if (this._isDisabled || !this.options.length)
+      return;
+    this._activeIndex = index;
+    this._open = true;
+    this._visible = true;
+  }
+  _close() {
+    this._open = false;
+    this._activeIndex = -1;
+    this._typeahead.clear();
+  }
+  _pick(index) {
+    const option = this.options[index];
+    if (!option || option.disabled)
+      return;
+    const changed = option.value !== this.value;
+    this.value = option.value;
+    this.#internals.setFormValue(this.value);
+    this._syncValidity();
+    this._close();
+    if (changed) {
+      this.emit("dsgn-change", { value: this.value, name: this.name });
+    }
+  }
+  _isTypeahead(event) {
+    return isPrintableKey(event) && (event.key !== " " || this._typeahead.active);
+  }
+  _search(char, from, cycle) {
+    return this._typeahead.search(this.options, char, from, (option) => option.label, { cycle });
+  }
+  _handleClosedKey(event) {
+    if (this._isTypeahead(event)) {
+      const match = this._search(event.key, Math.max(this._selectedIndex, 0), false);
+      this._openAt(match >= 0 ? match : this._openingIndex);
+      return true;
+    }
+    switch (event.key) {
+      case "ArrowDown":
+      case "ArrowUp":
+      case "Enter":
+      case " ":
+        this._openAt(this._openingIndex);
+        return true;
+      case "Home":
+        this._openAt(firstEnabled(this.options));
+        return true;
+      case "End":
+        this._openAt(lastEnabled(this.options));
+        return true;
+      default:
+        return false;
+    }
+  }
+  _handleOpenKey(event) {
+    const active = this._activeIndex;
+    if (event.key === "Tab") {
+      if (active >= 0)
+        this._pick(active);
+      else
+        this._close();
+      return false;
+    }
+    if (this._isTypeahead(event)) {
+      const match = this._search(event.key, active, true);
+      if (match >= 0)
+        this._activeIndex = match;
+      return true;
+    }
+    if (event.key === "ArrowUp" && event.altKey) {
+      this._pick(active);
+      return true;
+    }
+    const moves = {
+      ArrowDown: () => stepEnabled(this.options, active, 1),
+      ArrowUp: () => stepEnabled(this.options, active, -1),
+      Home: () => firstEnabled(this.options),
+      End: () => lastEnabled(this.options)
+    };
+    if (event.key in moves) {
+      this._activeIndex = moves[event.key]();
+      return true;
+    }
+    if (event.key === "Enter" || event.key === " ") {
+      this._pick(active);
+      return true;
+    }
+    return false;
+  }
+  _handleKeydown(event) {
+    if (this._isDisabled)
+      return;
+    if (this._dismiss.handleKeydown(event)) {
+      event.preventDefault();
+      event.stopPropagation();
+      return;
+    }
+    const handled = this._open ? this._handleOpenKey(event) : this._handleClosedKey(event);
+    if (handled)
+      event.preventDefault();
+  }
+  _handleKeyup(event) {
+    if (event.key === " ")
+      event.preventDefault();
+  }
+  _handleTriggerClick() {
+    if (this._open)
+      this._close();
+    else
+      this._openAt(this._openingIndex);
+  }
+  _handleOptionClick(index) {
+    this._pick(index);
+    this._trigger?.focus();
+  }
+  _handleOptionEnter(index) {
+    if (!this.options[index]?.disabled)
+      this._activeIndex = index;
+  }
+  _keepFocus(event) {
+    event.preventDefault();
+  }
+  _handleBlur() {
+    if (this._open)
+      this._close();
+  }
+  _syncValidity() {
+    if (this.required && !this.value && !this._isDisabled) {
+      this.#internals.setValidity({ valueMissing: true }, valueMissingMessage() || this.error || " ", this._trigger ?? undefined);
+    } else {
+      this.#internals.setValidity({});
+    }
+  }
+  formResetCallback() {
+    this.value = this._defaultValue;
+    this.#internals.setFormValue(this.value);
+    this._syncValidity();
+    this.error = "";
+    this._close();
+  }
+  formDisabledCallback(disabled) {
+    this._formDisabled = disabled;
+    if (disabled)
+      this._close();
+  }
+  formStateRestoreCallback(restored) {
+    if (typeof restored === "string")
+      this.value = restored;
+  }
+  firstUpdated() {
+    this._defaultValue = this.value;
+  }
+  disconnectedCallback() {
+    if (this._open || this._visible) {
+      this._exitRun++;
+      this._close();
+      this._inTopLayer = false;
+      this._visible = false;
+    }
+    super.disconnectedCallback();
+  }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("options") && this._open) {
+      const active = this.options[this._activeIndex];
+      if (!active || active.disabled)
+        this._activeIndex = this._openingIndex;
+    }
+    if (changedProperties.has("disabled") && this.disabled)
+      this._close();
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    this.updateTheme(changedProperties, this.surface);
+    if (changedProperties.has("value")) {
+      this.#internals.setFormValue(this.value);
+    }
+    if (changedProperties.has("value") || changedProperties.has("required") || changedProperties.has("disabled") || changedProperties.has("_formDisabled")) {
+      this._syncValidity();
+    }
+    if (changedProperties.has("_open")) {
+      this._handleOpenChange();
+    }
+    if (changedProperties.has("_activeIndex") && this._open) {
+      this._scrollActiveIntoView();
+    }
+  }
+  _showListbox(listbox) {
+    if (!this._topLayer || this._inTopLayer)
+      return;
+    listbox.showPopover();
+    this._inTopLayer = true;
+  }
+  _hideListbox(listbox) {
+    if (!this._inTopLayer)
+      return;
+    this._inTopLayer = false;
+    listbox?.hidePopover();
+  }
+  _handleOpenChange() {
+    const listbox = this._listbox;
+    if (this._open) {
+      this._exitRun++;
+      this._dismiss.start();
+      if (listbox)
+        this._showListbox(listbox);
+      this._position.start();
+      if (listbox) {
+        this._motion.enter(listbox, "scaleIn", { reducedMotion: "jump" });
+      }
+      return;
+    }
+    this._dismiss.stop();
+    if (!this._visible)
+      return;
+    const run = ++this._exitRun;
+    const hide = () => {
+      if (run !== this._exitRun)
+        return;
+      this._hideListbox(listbox);
+      this._visible = false;
+      this._position.stop();
+    };
+    if (listbox) {
+      this._motion.exit(listbox, "scaleIn", { reducedMotion: "jump" }).then(hide);
+    } else {
+      hide();
+    }
+  }
+  _scrollActiveIntoView() {
+    const option = this.renderRoot.querySelector(`#option-${this._activeIndex}`);
+    option?.scrollIntoView?.({ block: "nearest" });
+  }
+  _renderLabel() {
+    if (!this.label)
+      return nothing;
+    return html2`<label
+      id="label"
+      part="label"
+      class="${labelClasses(this.size, this._isDisabled)}"
+      for="trigger"
+      >${this.label}${this.required ? html2` <span
+            part="required-indicator"
+            class="${requiredClasses()}"
+            aria-hidden="true"
+            >*</span
+          >` : nothing}</label
+    >`;
+  }
+  _renderHint() {
+    if (!this.hint)
+      return nothing;
+    return html2`<div id="hint" part="hint" class="${hintClasses(this.size)}">
+      ${this.hint}
+    </div>`;
+  }
+  _renderError() {
+    if (!this.error)
+      return nothing;
+    return html2`<div id="error" part="error" class="${errorClasses(this.size)}">
+      ${icon(errorIconClasses(), circleAlert)}
+      <span>${this.error}</span>
+    </div>`;
+  }
+  _renderOption(option, index) {
+    const selected = option.value === this.value;
+    const disabled = !!option.disabled;
+    return html2`<div
+      id="option-${index}"
+      part="option"
+      role="option"
+      class="${optionClasses(this.size, {
+      active: index === this._activeIndex,
+      selected,
+      disabled
+    })}"
+      aria-selected="${selected ? "true" : "false"}"
+      aria-disabled="${disabled ? "true" : nothing}"
+      @click=${() => this._handleOptionClick(index)}
+      @mouseenter=${() => this._handleOptionEnter(index)}
+    >
+      ${selected ? icon(checkClasses(), check) : html2`<span class="${checkSlotClasses()}"></span>`}
+      <span class="${optionLabelClasses()}">${option.label}</span>
+      ${option.tag ? html2`<span class="${optionTagClasses()}">${option.tag}</span>` : nothing}
+    </div>`;
+  }
+  get _labelledBy() {
+    return this.label ? "label" : nothing;
+  }
+  get _fallbackName() {
+    return !this.label && this.ariaLabel || nothing;
+  }
+  _renderTrigger() {
+    const selected = this.options[this._selectedIndex];
+    const activeId = this._open && this._activeIndex >= 0 ? `option-${this._activeIndex}` : nothing;
+    return html2`<button
+      id="trigger"
+      part="trigger"
+      type="button"
+      role="combobox"
+      class="${triggerClasses(this.size, this._state)}"
+      aria-haspopup="listbox"
+      aria-expanded="${this._open ? "true" : "false"}"
+      aria-controls="listbox"
+      aria-activedescendant="${activeId}"
+      aria-labelledby="${this._labelledBy}"
+      aria-label="${this._fallbackName}"
+      aria-required="${this.required ? "true" : nothing}"
+      aria-invalid="${this._isInvalid ? "true" : nothing}"
+      aria-describedby="${describedBy(!!this.error && "error", !!this.hint && "hint") ?? nothing}"
+      ?disabled="${this._isDisabled}"
+      @click=${this._handleTriggerClick}
+      @keydown=${this._handleKeydown}
+      @keyup=${this._handleKeyup}
+      @blur=${this._handleBlur}
+    >
+      <span class="${valueClasses(!selected)}"
+        >${selected ? selected.label : this.placeholder}</span
+      >
+      ${icon(chevronClasses(this.size, this._open), chevronDown)}
+    </button>`;
+  }
+  _renderListbox() {
+    return html2`<div
+      id="listbox"
+      part="listbox"
+      role="listbox"
+      popover=${this._topLayer ? "manual" : nothing}
+      class="${listboxClasses({ visible: this._visible, open: this._open, topLayer: this._topLayer }, this._placement)}"
+      aria-labelledby="${this._labelledBy}"
+      aria-label="${this._fallbackName}"
+      tabindex="-1"
+      @mousedown=${this._keepFocus}
+    >
+      ${this.options.map((option, index) => this._renderOption(option, index))}
+    </div>`;
+  }
+  render() {
+    return html2`
+      <div class="${wrapperClasses()}">
+        ${this._renderLabel()}
+        <div class="${anchorClasses()}">
+          ${this._renderTrigger()} ${this._renderListbox()}
+        </div>
+        ${this._renderHint()} ${this._renderError()}
+      </div>
+    `;
+  }
+}
+__legacyDecorateClassTS([
+  property({ ...surfaceProps })
+], Select.prototype, "surface", undefined);
+__legacyDecorateClassTS([
+  property({ ...selectSizeProps })
+], Select.prototype, "size", undefined);
+__legacyDecorateClassTS([
+  property({ type: Array })
+], Select.prototype, "options", undefined);
+__legacyDecorateClassTS([
+  property({ type: String })
+], Select.prototype, "value", undefined);
+__legacyDecorateClassTS([
+  property({ type: String, reflect: true })
+], Select.prototype, "name", undefined);
+__legacyDecorateClassTS([
+  property({ type: String })
+], Select.prototype, "placeholder", undefined);
+__legacyDecorateClassTS([
+  property({ type: String })
+], Select.prototype, "label", undefined);
+__legacyDecorateClassTS([
+  property({ type: String, attribute: "aria-label" })
+], Select.prototype, "ariaLabel", undefined);
+__legacyDecorateClassTS([
+  property({ type: String })
+], Select.prototype, "hint", undefined);
+__legacyDecorateClassTS([
+  property({ type: String })
+], Select.prototype, "error", undefined);
+__legacyDecorateClassTS([
+  property({ type: Boolean, reflect: true })
+], Select.prototype, "invalid", undefined);
+__legacyDecorateClassTS([
+  property({ type: Boolean, reflect: true })
+], Select.prototype, "disabled", undefined);
+__legacyDecorateClassTS([
+  property({ type: Boolean, reflect: true })
+], Select.prototype, "required", undefined);
+__legacyDecorateClassTS([
+  state()
+], Select.prototype, "_formDisabled", undefined);
+__legacyDecorateClassTS([
+  state()
+], Select.prototype, "_open", undefined);
+__legacyDecorateClassTS([
+  state()
+], Select.prototype, "_visible", undefined);
+__legacyDecorateClassTS([
+  state()
+], Select.prototype, "_activeIndex", undefined);
+__legacyDecorateClassTS([
+  state()
+], Select.prototype, "_placement", undefined);
+__legacyDecorateClassTS([
+  query("#trigger")
+], Select.prototype, "_trigger", undefined);
+__legacyDecorateClassTS([
+  query("#listbox")
+], Select.prototype, "_listbox", undefined);
+markFieldControl(Select);
+defineElement("dsgn-select", Select);
+export {
+  Select
+};