@editora/ui-core 0.1.8 → 0.1.10

package/dist/select.esm.js

@@ -0,0 +1,1266 @@
+import { E as q } from "./ElementBase-909688f3.mjs";
+import { f as L, a as P, b as $ } from "./collection-a1aac0c6.mjs";
+import { r as D } from "./listbox-308789a0.mjs";
+import "./collection.esm.js";
+const R = `
+  :host {
+    --ui-select-width: var(--ui-width, min(340px, 100%));
+    --ui-select-min-height: var(--base-select-height-md, 42px);
+    --ui-select-radius: var(--base-select-radius, var(--ui-radius, 4px));
+    --ui-select-padding-x: var(--base-select-padding-x, 12px);
+
+    --ui-select-bg: var(--base-select-bg, var(--ui-color-surface, #ffffff));
+    --ui-select-border: var(--base-select-border, 1px solid color-mix(in srgb, var(--ui-color-border, #cbd5e1) 74%, transparent));
+    --ui-select-border-color: color-mix(in srgb, var(--ui-select-border) 100%, transparent);
+    --ui-select-text: var(--ui-color-text, #0f172a);
+    --ui-select-muted: var(--ui-color-muted, #64748b);
+    --ui-select-placeholder: color-mix(in srgb, var(--ui-select-text) 44%, transparent);
+    --ui-select-focus: var(--ui-color-focus-ring, #2563eb);
+    --ui-select-accent: var(--ui-color-primary, #2563eb);
+    --ui-select-success: var(--ui-color-success, #16a34a);
+    --ui-select-warning: var(--ui-color-warning, #d97706);
+    --ui-select-error: var(--ui-color-danger, #dc2626);
+
+    --ui-select-shadow: var(--base-select-shadow, none);
+    --ui-select-elevation: var(--ui-select-shadow);
+    --ui-select-menu-bg: var(--base-select-menu-bg, color-mix(in srgb, var(--ui-color-surface, #ffffff) 98%, transparent));
+    --ui-select-menu-color: var(--base-select-menu-color, var(--ui-select-text));
+    --ui-select-menu-border-color: color-mix(in srgb, var(--ui-select-border-color) 82%, transparent);
+    --ui-select-menu-border: 1px solid var(--ui-select-menu-border-color);
+    --ui-select-menu-radius: var(--base-select-menu-radius, var(--ui-select-radius));
+    --ui-select-menu-shadow:
+      0 14px 34px rgba(15, 23, 42, 0.16),
+      0 3px 10px rgba(15, 23, 42, 0.08);
+    --ui-select-menu-padding: 0px;
+    --ui-select-menu-gap: 8px;
+    --ui-select-menu-max-height: min(320px, var(--ui-select-available-height, 320px));
+    --ui-select-menu-item-height: 38px;
+    --ui-select-menu-item-radius: 0px;
+    --ui-select-menu-item-border-color: color-mix(in srgb, var(--ui-select-border-color) 72%, transparent);
+
+    --ui-select-label: var(--base-select-label-color, var(--ui-select-text));
+    --ui-select-description: var(--base-select-description-color, var(--ui-select-muted));
+    --ui-select-indicator-color: color-mix(in srgb, var(--ui-select-text) 58%, transparent);
+    --ui-select-transition: 170ms cubic-bezier(0.22, 0.8, 0.2, 1);
+
+    color-scheme: light dark;
+    display: inline-grid;
+    inline-size: var(--ui-select-width);
+    min-inline-size: min(220px, 100%);
+    position: relative;
+    isolation: isolate;
+    z-index: 0;
+    font-family: "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  }
+
+  :host([open]) {
+    z-index: 40;
+  }
+
+  .root {
+    min-inline-size: 0;
+    display: grid;
+    gap: 8px;
+    color: var(--ui-select-text);
+  }
+
+  .content-slot {
+    display: none;
+  }
+
+  .meta {
+    display: grid;
+    gap: 4px;
+  }
+
+  .label {
+    margin: 0;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    color: var(--ui-select-label);
+    font: 600 13px/1.35 "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    letter-spacing: 0.01em;
+  }
+
+  .required {
+    color: var(--ui-select-error);
+    font-size: 12px;
+    line-height: 1;
+  }
+
+  .description {
+    margin: 0;
+    color: var(--ui-select-description);
+    font-size: 12px;
+    line-height: 1.4;
+  }
+
+  .field-shell {
+    position: relative;
+    min-inline-size: 0;
+  }
+
+  .control {
+    min-inline-size: 0;
+    position: relative;
+    display: block;
+    min-block-size: var(--ui-select-min-height);
+    border: var(--ui-select-border);
+    border-radius: var(--ui-select-radius);
+    background: var(--ui-select-bg);
+    box-shadow: var(--ui-select-elevation);
+    padding: 0;
+    transition:
+      border-color var(--ui-select-transition),
+      box-shadow var(--ui-select-transition),
+      background-color var(--ui-select-transition),
+      transform var(--ui-select-transition),
+      opacity var(--ui-select-transition);
+  }
+
+  .control[data-open="true"],
+  .control:focus-within {
+    border-color: color-mix(in srgb, var(--ui-select-focus) 62%, var(--ui-select-border-color));
+    box-shadow:
+      0 0 0 4px color-mix(in srgb, var(--ui-select-focus) 18%, transparent),
+      var(--ui-select-elevation);
+  }
+
+  .leading,
+  .trailing {
+    min-inline-size: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: color-mix(in srgb, var(--ui-select-text) 64%, transparent);
+    line-height: 1;
+    pointer-events: none;
+  }
+
+  .leading {
+    position: absolute;
+    inset-inline-start: var(--ui-select-padding-x);
+    inset-block-start: 50%;
+    transform: translateY(-50%);
+  }
+
+  .trailing {
+    position: absolute;
+    inset-inline-end: calc(var(--ui-select-padding-x) + 24px);
+    inset-block-start: 50%;
+    transform: translateY(-50%);
+  }
+
+  .leading[hidden],
+  .trailing[hidden],
+  .description[hidden],
+  .label[hidden],
+  .error[hidden],
+  .meta[hidden],
+  .panel[hidden] {
+    display: none;
+  }
+
+  .trigger {
+    inline-size: 100%;
+    min-inline-size: 0;
+    block-size: calc(var(--ui-select-min-height) - 2px);
+    box-sizing: border-box;
+    border: none;
+    outline: none;
+    background: transparent;
+    color: var(--ui-select-text);
+    font: 500 14px/1.35 "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    padding: 8px calc(var(--ui-select-padding-x) + 24px) 8px var(--ui-select-padding-x);
+    margin: 0;
+    cursor: pointer;
+    text-align: left;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+
+  .control[data-has-leading="true"] .trigger {
+    padding-inline-start: calc(var(--ui-select-padding-x) + 24px);
+  }
+
+  .control[data-has-trailing="true"] .trigger {
+    padding-inline-end: calc(var(--ui-select-padding-x) + 48px);
+  }
+
+  .trigger:focus-visible {
+    outline: none;
+  }
+
+  .value {
+    display: block;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+
+  .control[data-placeholder-shown="true"] .value {
+    color: var(--ui-select-placeholder);
+  }
+
+  .indicator,
+  .spinner {
+    inline-size: 18px;
+    block-size: 18px;
+    display: grid;
+    place-items: center;
+    line-height: 1;
+    position: absolute;
+    inset-inline-end: var(--ui-select-padding-x);
+    inset-block-start: 50%;
+    transform: translateY(-50%);
+    pointer-events: none;
+  }
+
+  .indicator {
+    color: var(--ui-select-indicator-color);
+    transform-origin: 50% 48%;
+    transition: transform var(--ui-select-transition), color var(--ui-select-transition), opacity var(--ui-select-transition);
+  }
+
+  .indicator::before {
+    content: "";
+    inline-size: 8px;
+    block-size: 8px;
+    border-right: 1.8px solid currentColor;
+    border-bottom: 1.8px solid currentColor;
+    transform: rotate(45deg) translateY(-1px);
+  }
+
+  .control[data-open="true"] .indicator {
+    color: var(--ui-select-focus);
+    transform: translateY(calc(-50% + 1px)) rotate(180deg);
+  }
+
+  .spinner {
+    border-radius: 999px;
+    border: 2px solid color-mix(in srgb, var(--ui-select-accent) 22%, transparent);
+    border-top-color: var(--ui-select-accent);
+    opacity: 0;
+    inset-block-start: calc(50% - 9px);
+    transform: none;
+    animation: ui-select-spin 760ms linear infinite;
+  }
+
+  .panel {
+    position: absolute;
+    inset-inline: 0;
+    inset-block-start: calc(100% + var(--ui-select-menu-gap));
+    z-index: 24;
+    pointer-events: auto;
+  }
+
+  .panel[data-placement="top"] {
+    inset-block-start: auto;
+    inset-block-end: calc(100% + var(--ui-select-menu-gap));
+  }
+
+  .menu {
+    position: relative;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+    min-inline-size: 100%;
+    max-inline-size: 100%;
+    max-block-size: var(--ui-select-menu-max-height);
+    overflow-y: auto;
+    overflow-x: hidden;
+    border: var(--ui-select-menu-border);
+    border-radius: var(--ui-select-menu-radius);
+    background:
+      linear-gradient(180deg, color-mix(in srgb, var(--ui-select-accent) 3%, transparent) 0%, transparent 100%),
+      var(--ui-select-menu-bg);
+    color: var(--ui-select-menu-color);
+    box-shadow: var(--ui-select-menu-shadow);
+    padding: var(--ui-select-menu-padding);
+    scrollbar-width: thin;
+    scrollbar-color: color-mix(in srgb, var(--ui-select-menu-border-color) 82%, transparent) transparent;
+    scrollbar-gutter: auto;
+    backdrop-filter: saturate(1.04) blur(10px);
+  }
+
+  .menu::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  .menu::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  .menu::-webkit-scrollbar-thumb {
+    background: color-mix(in srgb, var(--ui-select-menu-border-color) 82%, transparent);
+    border-radius: 999px;
+    border: 2px solid transparent;
+    background-clip: padding-box;
+  }
+
+  .menu:hover::-webkit-scrollbar-thumb {
+    background: color-mix(in srgb, var(--ui-select-accent) 28%, var(--ui-select-menu-border-color));
+    background-clip: padding-box;
+  }
+
+  .panel[data-placement="top"] .menu {
+    transform-origin: bottom center;
+    animation: ui-select-menu-enter-top 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
+  }
+
+  .panel[data-placement="bottom"] .menu {
+    transform-origin: top center;
+    animation: ui-select-menu-enter-bottom 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
+  }
+
+  .menu-group {
+    color: color-mix(in srgb, var(--ui-select-muted) 88%, transparent);
+    font: 700 11px/1.3 "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    padding: 9px 10px 5px;
+  }
+
+  .menu-item {
+    inline-size: 100%;
+    min-inline-size: 0;
+    min-block-size: var(--ui-select-menu-item-height);
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+    border: 1px solid transparent;
+    border-radius: var(--ui-select-menu-item-radius);
+    background: transparent;
+    color: inherit;
+    padding: 9px 10px;
+    text-align: left;
+    font: 500 13px/1.35 "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    cursor: pointer;
+    transition:
+      background-color 130ms ease,
+      border-color 130ms ease,
+      color 130ms ease,
+      transform 130ms ease,
+      box-shadow 130ms ease;
+  }
+
+  .menu-item[data-check-placement="start"] {
+    justify-content: flex-start;
+  }
+
+  .menu-item[data-edge-start="true"] {
+    border-start-start-radius: max(0px, calc(var(--ui-select-menu-radius) - 1px));
+    border-start-end-radius: max(0px, calc(var(--ui-select-menu-radius) - 1px));
+  }
+
+  .menu-item[data-edge-end="true"] {
+    border-end-start-radius: max(0px, calc(var(--ui-select-menu-radius) - 1px));
+    border-end-end-radius: max(0px, calc(var(--ui-select-menu-radius) - 1px));
+  }
+
+  :host([option-border]) .menu-item {
+    border-color: var(--ui-select-menu-item-border-color);
+  }
+
+  .menu-item:hover,
+  .menu-item[data-active="true"] {
+    background: color-mix(in srgb, var(--ui-select-accent) 12%, transparent);
+    border-color: color-mix(in srgb, var(--ui-select-accent) 24%, transparent);
+  }
+
+  .menu-item[data-active="true"] {
+    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-select-accent) 12%, transparent);
+  }
+
+  .menu-item:active {
+    transform: translateY(1px);
+    background: color-mix(in srgb, var(--ui-select-accent) 18%, transparent);
+  }
+
+  .menu-item[aria-selected="true"] {
+    background: linear-gradient(180deg, color-mix(in srgb, var(--ui-select-accent) 18%, transparent) 0%, color-mix(in srgb, var(--ui-select-accent) 12%, transparent) 100%);
+    border-color: color-mix(in srgb, var(--ui-select-accent) 30%, transparent);
+    color: color-mix(in srgb, var(--ui-select-menu-color) 92%, var(--ui-select-accent));
+  }
+
+  .menu-item[aria-disabled="true"] {
+    opacity: 0.52;
+    cursor: not-allowed;
+    transform: none;
+  }
+
+  .menu-item-label {
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .menu-item-check {
+    inline-size: 14px;
+    block-size: 14px;
+    display: inline-grid;
+    place-items: center;
+    border-radius: 999px;
+    border: 1px solid color-mix(in srgb, currentColor 24%, transparent);
+    background: transparent;
+    opacity: 0;
+    transition: opacity 130ms ease, background-color 130ms ease, border-color 130ms ease;
+    flex: 0 0 auto;
+  }
+
+  .menu-item-check[hidden] {
+    display: none;
+  }
+
+  .menu-item-check::before {
+    content: "";
+    inline-size: 6px;
+    block-size: 6px;
+    border-radius: 999px;
+    background: currentColor;
+  }
+
+  .menu-item[aria-selected="true"] .menu-item-check {
+    opacity: 1;
+    background: color-mix(in srgb, var(--ui-select-accent) 84%, #ffffff);
+    border-color: color-mix(in srgb, var(--ui-select-accent) 75%, transparent);
+    color: var(--ui-color-primary-foreground, #ffffff);
+  }
+
+  .menu-empty {
+    margin: 0;
+    padding: 10px;
+    color: var(--ui-select-muted);
+    font-size: 12px;
+    line-height: 1.4;
+    text-align: center;
+  }
+
+  .error {
+    margin: 0;
+    color: var(--ui-select-error);
+    font-size: 12px;
+    line-height: 1.35;
+  }
+
+  :host([disabled]) .control,
+  :host([loading]) .control {
+    opacity: 0.62;
+    filter: saturate(0.9);
+    box-shadow: none;
+  }
+
+  :host([disabled]) .trigger,
+  :host([loading]) .trigger {
+    cursor: not-allowed;
+  }
+
+  :host([loading]) .indicator {
+    opacity: 0;
+  }
+
+  :host([loading]) .spinner {
+    opacity: 1;
+  }
+
+  :host([disabled]) .leading,
+  :host([disabled]) .trailing,
+  :host([disabled]) .indicator,
+  :host([loading]) .leading,
+  :host([loading]) .trailing,
+  :host([loading]) .indicator {
+    color: color-mix(in srgb, var(--ui-select-text) 38%, transparent);
+  }
+
+  :host([size="sm"]),
+  :host([size="1"]) {
+    --ui-select-min-height: 34px;
+    --ui-select-padding-x: 10px;
+    --ui-select-menu-gap: 6px;
+    --ui-select-menu-item-height: 34px;
+  }
+
+  :host([size="sm"]) .trigger,
+  :host([size="1"]) .trigger {
+    font-size: 12px;
+  }
+
+  :host([size="sm"]) .menu-item,
+  :host([size="1"]) .menu-item {
+    font-size: 12px;
+    padding: 8px 9px;
+  }
+
+  :host([size="lg"]),
+  :host([size="3"]) {
+    --ui-select-min-height: 46px;
+    --ui-select-padding-x: 13px;
+    --ui-select-menu-gap: 10px;
+    --ui-select-menu-item-height: 42px;
+  }
+
+  :host([size="lg"]) .trigger,
+  :host([size="3"]) .trigger {
+    font-size: 15px;
+  }
+
+  :host([size="lg"]) .menu-item,
+  :host([size="3"]) .menu-item {
+    font-size: 14px;
+    padding: 10px 12px;
+  }
+
+  :host([density="compact"]) .root {
+    gap: 6px;
+  }
+
+  :host([density="comfortable"]) .root {
+    gap: 10px;
+  }
+
+  :host([shape="square"]),
+  :host([radius="none"]) {
+    --ui-select-radius: 4px;
+  }
+
+  :host([shape="rounded"]) {
+    --ui-select-radius: 10px;
+  }
+
+  :host([shape="pill"]),
+  :host([radius="full"]) {
+    --ui-select-radius: 999px;
+  }
+
+  :host([radius="large"]) {
+    --ui-select-radius: 16px;
+  }
+
+  :host([elevation="none"]) {
+    --ui-select-elevation: none;
+  }
+
+  :host([elevation="high"]) {
+    --ui-select-elevation: 0 2px 4px rgba(2, 6, 23, 0.1), 0 16px 34px rgba(2, 6, 23, 0.14);
+  }
+
+  :host([variant="surface"]) {
+    --ui-select-bg: var(--ui-color-surface-alt, #f8fafc);
+    --ui-select-elevation: 0 1px 2px rgba(2, 6, 23, 0.05);
+  }
+
+  :host([variant="soft"]) {
+    --ui-select-bg: color-mix(in srgb, var(--ui-select-accent) 8%, var(--ui-color-surface, #ffffff));
+    --ui-select-border-color: color-mix(in srgb, var(--ui-select-accent) 30%, var(--ui-color-border, #cbd5e1));
+    --ui-select-menu-bg: color-mix(in srgb, var(--ui-select-accent) 5%, var(--ui-color-surface, #ffffff));
+  }
+
+  :host([variant="filled"]) {
+    --ui-select-bg: color-mix(in srgb, var(--ui-select-text) 5%, var(--ui-color-surface, #ffffff));
+    --ui-select-border: 1px solid transparent;
+    --ui-select-elevation: none;
+  }
+
+  :host([variant="outline"]) {
+    --ui-select-bg: transparent;
+    --ui-select-border-color: color-mix(in srgb, var(--ui-select-accent) 42%, var(--ui-color-border, #cbd5e1));
+    --ui-select-elevation: none;
+  }
+
+  :host([variant="line"]) .control {
+    border-top: 0;
+    border-left: 0;
+    border-right: 0;
+    border-radius: 0;
+    background: transparent;
+    box-shadow: none;
+  }
+
+  :host([variant="minimal"]) .control,
+  :host([variant="ghost"]) .control {
+    border-color: transparent;
+    background: transparent;
+    box-shadow: none;
+  }
+
+  :host([variant="solid"]) {
+    --ui-select-bg: var(--ui-select-accent);
+    --ui-select-text: var(--ui-color-primary-foreground, #ffffff);
+    --ui-select-label: var(--ui-color-primary-foreground, #ffffff);
+    --ui-select-description: color-mix(in srgb, var(--ui-color-primary-foreground, #ffffff) 72%, transparent);
+    --ui-select-border-color: color-mix(in srgb, var(--ui-select-accent) 76%, #0f172a 24%);
+    --ui-select-focus: color-mix(in srgb, #ffffff 72%, var(--ui-select-accent));
+    --ui-select-indicator-color: color-mix(in srgb, #ffffff 88%, transparent);
+    --ui-select-menu-bg: color-mix(in srgb, var(--ui-select-accent) 20%, #08111f 80%);
+    --ui-select-menu-color: var(--ui-color-primary-foreground, #ffffff);
+  }
+
+  :host([variant="glass"]) {
+    --ui-select-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 72%, transparent);
+    --ui-select-border-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 50%, transparent);
+    --ui-select-elevation: 0 8px 18px rgba(2, 6, 23, 0.1), 0 26px 52px rgba(2, 6, 23, 0.08);
+    --ui-select-menu-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 80%, transparent);
+  }
+
+  :host([variant="glass"]) .control,
+  :host([variant="glass"]) .menu {
+    -webkit-backdrop-filter: saturate(1.08) blur(10px);
+    backdrop-filter: saturate(1.08) blur(10px);
+  }
+
+  :host([variant="contrast"]) {
+    --ui-select-bg: #0f172a;
+    --ui-select-text: #e2e8f0;
+    --ui-select-label: #e2e8f0;
+    --ui-select-description: #93a4bd;
+    --ui-select-border-color: #334155;
+    --ui-select-focus: #93c5fd;
+    --ui-select-indicator-color: #9fb3cf;
+    --ui-select-elevation: 0 10px 30px rgba(2, 6, 23, 0.35);
+    --ui-select-menu-bg: #0b1324;
+    --ui-select-menu-color: #e2e8f0;
+    --ui-select-menu-border-color: #334155;
+  }
+
+  :host([tone="success"]) {
+    --ui-select-accent: var(--ui-color-success, #16a34a);
+  }
+
+  :host([tone="warning"]) {
+    --ui-select-accent: var(--ui-color-warning, #d97706);
+  }
+
+  :host([tone="danger"]) {
+    --ui-select-accent: var(--ui-color-danger, #dc2626);
+  }
+
+  :host([validation="success"]),
+  :host([data-valid="true"]) {
+    --ui-select-border-color: color-mix(in srgb, var(--ui-select-success) 64%, transparent);
+  }
+
+  :host([validation="warning"]) {
+    --ui-select-border-color: color-mix(in srgb, var(--ui-select-warning) 62%, transparent);
+  }
+
+  :host([validation="error"]),
+  :host([invalid]),
+  :host([data-invalid="true"]) {
+    --ui-select-border-color: color-mix(in srgb, var(--ui-select-error) 68%, transparent);
+    --ui-select-label: var(--ui-select-error);
+  }
+
+  :host([validation="error"]) .control,
+  :host([invalid]) .control,
+  :host([data-invalid="true"]) .control {
+    box-shadow:
+      0 0 0 4px color-mix(in srgb, var(--ui-select-error) 18%, transparent),
+      var(--ui-select-elevation);
+  }
+
+  :host([headless]) .root {
+    display: none;
+  }
+
+  @keyframes ui-select-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes ui-select-menu-enter-bottom {
+    from {
+      opacity: 0;
+      transform: translateY(-4px) scale(0.985);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+  }
+
+  @keyframes ui-select-menu-enter-top {
+    from {
+      opacity: 0;
+      transform: translateY(4px) scale(0.985);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .control,
+    .indicator,
+    .spinner,
+    .trigger,
+    .menu,
+    .menu-item {
+      transition: none !important;
+      animation: none !important;
+    }
+  }
+
+  @media (prefers-contrast: more) {
+    :host {
+      --ui-select-border: 2px solid var(--ui-select-border-color);
+      --ui-select-elevation: none;
+      --ui-select-menu-border: 2px solid var(--ui-select-menu-border-color);
+      --ui-select-menu-shadow: none;
+    }
+
+    .control[data-open="true"],
+    .control:focus-within {
+      box-shadow: none;
+      outline: 2px solid var(--ui-select-focus);
+      outline-offset: 1px;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      --ui-select-bg: Canvas;
+      --ui-select-text: CanvasText;
+      --ui-select-label: CanvasText;
+      --ui-select-description: CanvasText;
+      --ui-select-border-color: CanvasText;
+      --ui-select-focus: Highlight;
+      --ui-select-error: CanvasText;
+      --ui-select-success: CanvasText;
+      --ui-select-elevation: none;
+      --ui-select-indicator-color: CanvasText;
+      --ui-select-menu-bg: Canvas;
+      --ui-select-menu-color: CanvasText;
+      --ui-select-menu-border-color: CanvasText;
+      --ui-select-menu-shadow: none;
+    }
+
+    .indicator::before {
+      border-right-color: CanvasText;
+      border-bottom-color: CanvasText;
+    }
+  }
+`;
+function d(p) {
+  if (p == null)
+    return !1;
+  const e = String(p).toLowerCase();
+  return e !== "false" && e !== "0";
+}
+function f(p) {
+  return String(p).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function F(p) {
+  if (!p)
+    return null;
+  const e = String(p).trim();
+  return e ? e === "none" ? "4px" : e === "full" ? "999px" : e === "large" ? "16px" : /^-?\\d+(\\.\\d+)?$/.test(e) ? `${e}px` : e : null;
+}
+const S = /* @__PURE__ */ new Set([
+  "value",
+  "disabled",
+  "loading",
+  "required",
+  "placeholder",
+  "name",
+  "tabindex",
+  "headless",
+  "size",
+  "variant",
+  "tone",
+  "density",
+  "radius",
+  "shape",
+  "elevation",
+  "option-border",
+  "show-check",
+  "check-placement",
+  "label",
+  "description",
+  "error",
+  "aria-label",
+  "validation",
+  "invalid",
+  "data-invalid",
+  "data-valid",
+  "close-on-scroll"
+]);
+class T extends q {
+  constructor() {
+    super(), this._controlEl = null, this._triggerEl = null, this._valueEl = null, this._panelEl = null, this._menuEl = null, this._observer = null, this._formUnregister = null, this._uid = Math.random().toString(36).slice(2, 8), this._options = [], this._menuItems = [], this._optionsFingerprint = "", this._open = !1, this._activeIndex = -1, this._placement = "bottom", this._onRootClick = this._onRootClick.bind(this), this._onRootKeyDown = this._onRootKeyDown.bind(this), this._onRootPointerDown = this._onRootPointerDown.bind(this), this._onRootPointerMove = this._onRootPointerMove.bind(this), this._onSlotChange = this._onSlotChange.bind(this), this._onDocumentPointerDown = this._onDocumentPointerDown.bind(this), this._onWindowResize = this._onWindowResize.bind(this), this._onWindowScroll = this._onWindowScroll.bind(this);
+  }
+  static get observedAttributes() {
+    return [
+      "value",
+      "disabled",
+      "loading",
+      "required",
+      "placeholder",
+      "name",
+      "tabindex",
+      "headless",
+      "size",
+      "variant",
+      "tone",
+      "density",
+      "radius",
+      "shape",
+      "elevation",
+      "option-border",
+      "show-check",
+      "check-placement",
+      "label",
+      "description",
+      "error",
+      "aria-label",
+      "validation",
+      "invalid",
+      "data-invalid",
+      "data-valid",
+      "close-on-scroll"
+    ];
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.root.addEventListener("click", this._onRootClick), this.root.addEventListener("keydown", this._onRootKeyDown), this.root.addEventListener("pointerdown", this._onRootPointerDown), this.root.addEventListener("pointermove", this._onRootPointerMove, { passive: !0 }), this.root.addEventListener("slotchange", this._onSlotChange), this._observer = new MutationObserver((e) => {
+      if (!e.some((s) => {
+        if (!(s.target instanceof HTMLElement) || s.target === this)
+          return s.type === "childList";
+        const n = s.target.tagName.toLowerCase();
+        return n === "option" || n === "optgroup";
+      }))
+        return;
+      this._syncOptionsData() && this._open && this._renderMenu();
+    }), this._observer.observe(this, {
+      childList: !0,
+      subtree: !0,
+      attributes: !0,
+      attributeFilter: ["value", "selected", "disabled", "label", "slot"]
+    }), this._attachFormRegistration();
+  }
+  disconnectedCallback() {
+    this.root.removeEventListener("click", this._onRootClick), this.root.removeEventListener("keydown", this._onRootKeyDown), this.root.removeEventListener("pointerdown", this._onRootPointerDown), this.root.removeEventListener("pointermove", this._onRootPointerMove), this.root.removeEventListener("slotchange", this._onSlotChange), this._teardownOpenListeners(), this._observer && (this._observer.disconnect(), this._observer = null), this._formUnregister && (this._formUnregister(), this._formUnregister = null), super.disconnectedCallback();
+  }
+  shouldRenderOnAttributeChange(e) {
+    return !S.has(e);
+  }
+  attributeChangedCallback(e, t, i) {
+    if (t !== i) {
+      if (e === "name" && this._attachFormRegistration(), this._triggerEl && S.has(e)) {
+        (e === "value" || e === "placeholder" || e === "required") && (this._syncOptionsData(), this._open && this._renderMenu()), (e === "show-check" || e === "check-placement") && this._open && this._renderMenu(), this._syncControlState(), this.disabled && this._open && this._closeMenu({ restoreFocus: !1 });
+        return;
+      }
+      super.attributeChangedCallback(e, t, i);
+    }
+  }
+  get value() {
+    return this.getAttribute("value") || "";
+  }
+  set value(e) {
+    const t = String(e || "");
+    t !== this.value && this.setAttribute("value", t);
+  }
+  get disabled() {
+    return d(this.getAttribute("disabled")) || d(this.getAttribute("loading"));
+  }
+  set disabled(e) {
+    e ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
+  }
+  get closeOnScroll() {
+    return d(this.getAttribute("close-on-scroll")) || !this.hasAttribute("close-on-scroll");
+  }
+  set closeOnScroll(e) {
+    this.setAttribute("close-on-scroll", e ? "true" : "false");
+  }
+  get showCheck() {
+    return d(this.getAttribute("show-check"));
+  }
+  set showCheck(e) {
+    e ? this.setAttribute("show-check", "true") : this.removeAttribute("show-check");
+  }
+  focus(e) {
+    if (this._triggerEl) {
+      this._triggerEl.focus(e);
+      return;
+    }
+    super.focus(e);
+  }
+  blur() {
+    if (this._triggerEl) {
+      this._triggerEl.blur();
+      return;
+    }
+    super.blur();
+  }
+  _onSlotChange() {
+    this.requestRender();
+  }
+  _onRootPointerDown(e) {
+    const t = e.target;
+    t && t.closest(".menu-item") && e.preventDefault();
+  }
+  _onRootPointerMove(e) {
+    if (!this._open)
+      return;
+    const t = e.target, i = t == null ? void 0 : t.closest(".menu-item[data-index]");
+    if (!i)
+      return;
+    const s = Number(i.dataset.index || "-1"), n = this._options[s];
+    !n || n.disabled || s === this._activeIndex || this._setActiveIndex(s);
+  }
+  _onRootClick(e) {
+    const t = e.target;
+    if (!t)
+      return;
+    if (t.closest(".trigger")) {
+      if (this.disabled)
+        return;
+      this._open ? this._closeMenu({ restoreFocus: !1 }) : this._openMenu();
+      return;
+    }
+    const i = t.closest(".menu-item[data-index]");
+    if (!i)
+      return;
+    const s = Number(i.dataset.index || "-1"), n = this._options[s];
+    !n || n.disabled || (this._applyValueFromUser(n.value), this._closeMenu());
+  }
+  _onRootKeyDown(e) {
+    const t = e.target;
+    if (!(!t || t !== this._triggerEl && !t.closest(".menu")) && !this.disabled)
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault(), this._open ? this._moveActive(1) : this._openMenu();
+          break;
+        case "ArrowUp":
+          e.preventDefault(), this._open ? this._moveActive(-1) : this._openMenu();
+          break;
+        case "Home":
+          if (!this._open)
+            return;
+          e.preventDefault(), this._setActiveIndex(this._firstEnabledIndex());
+          break;
+        case "End":
+          if (!this._open)
+            return;
+          e.preventDefault(), this._setActiveIndex(this._lastEnabledIndex());
+          break;
+        case "Enter":
+        case " ": {
+          if (e.preventDefault(), !this._open) {
+            this._openMenu();
+            return;
+          }
+          this._selectActiveOption();
+          break;
+        }
+        case "Escape":
+          if (!this._open)
+            return;
+          e.preventDefault(), this._closeMenu();
+          break;
+        case "Tab":
+          this._open && this._closeMenu({ restoreFocus: !1 });
+          break;
+      }
+  }
+  _onDocumentPointerDown(e) {
+    if (!this._open)
+      return;
+    const t = typeof e.composedPath == "function" ? e.composedPath() : [];
+    t.includes(this) || t.includes(this.root) || this._closeMenu({ restoreFocus: !1 });
+  }
+  _onWindowResize() {
+    this._open && this._syncPanelPlacement();
+  }
+  _onWindowScroll(e) {
+    if (!this._open)
+      return;
+    const t = typeof e.composedPath == "function" ? e.composedPath() : [];
+    if (!(t.includes(this) || t.includes(this.root))) {
+      if (this.closeOnScroll) {
+        this._closeMenu({ restoreFocus: !1 });
+        return;
+      }
+      this._syncPanelPlacement();
+    }
+  }
+  _attachOpenListeners() {
+    document.addEventListener("pointerdown", this._onDocumentPointerDown, !0), window.addEventListener("resize", this._onWindowResize, { passive: !0 }), window.addEventListener("scroll", this._onWindowScroll, !0);
+  }
+  _teardownOpenListeners() {
+    document.removeEventListener("pointerdown", this._onDocumentPointerDown, !0), window.removeEventListener("resize", this._onWindowResize), window.removeEventListener("scroll", this._onWindowScroll, !0);
+  }
+  _emitValue(e, t) {
+    this.dispatchEvent(
+      new CustomEvent(e, {
+        detail: { value: t },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  _applyValueFromUser(e) {
+    (this.getAttribute("value") || "") !== e && (this.setAttribute("value", e), this._emitValue("input", e), this._emitValue("change", e));
+  }
+  _attachFormRegistration() {
+    var n;
+    this._formUnregister && (this._formUnregister(), this._formUnregister = null);
+    const e = this.getAttribute("name");
+    if (!e)
+      return;
+    const t = this.getRootNode(), i = t instanceof ShadowRoot ? t.host : null, s = ((n = i == null ? void 0 : i.closest) == null ? void 0 : n.call(i, "ui-form")) || this.closest("ui-form");
+    !s || typeof s.registerField != "function" || (this._formUnregister = s.registerField(e, {
+      name: e,
+      getValue: () => this.value,
+      setValue: (o) => {
+        this.value = o;
+      },
+      validate: async () => {
+        if (!(d(this.getAttribute("required")) || this.hasAttribute("required")))
+          return { valid: !0 };
+        const r = this.value.trim().length > 0;
+        return { valid: r, message: r ? void 0 : "This field is required." };
+      },
+      setError: (o) => {
+        o ? (this.setAttribute("validation", "error"), this.setAttribute("error", o)) : (this.getAttribute("validation") === "error" && this.removeAttribute("validation"), this.removeAttribute("error"));
+      }
+    }));
+  }
+  _hasSlotContent(e) {
+    return !!this.querySelector(`[slot="${e}"]`);
+  }
+  _setValueAttr(e) {
+    const t = String(e ?? "");
+    this.getAttribute("value") !== t && this.setAttribute("value", t);
+  }
+  _buildOptionsFromChildren() {
+    const e = [], t = (r, c) => {
+      const a = (r.label || r.textContent || r.value || "").trim(), u = String(r.value ?? "");
+      e.push({
+        value: u,
+        label: a || u,
+        disabled: !!r.disabled,
+        group: c
+      });
+    };
+    Array.from(this.children).filter((r) => r instanceof HTMLElement ? !r.hasAttribute("slot") : !1).forEach((r) => {
+      const c = r.tagName.toLowerCase();
+      if (c === "option") {
+        t(r, "");
+        return;
+      }
+      if (c === "optgroup") {
+        const a = r, u = (a.label || "").trim();
+        Array.from(a.children).forEach((l) => {
+          l instanceof HTMLOptionElement && e.push({
+            value: String(l.value ?? ""),
+            label: (l.label || l.textContent || l.value || "").trim() || String(l.value ?? ""),
+            disabled: !!l.disabled || !!a.disabled,
+            group: u
+          });
+        });
+      }
+    });
+    const s = (this.getAttribute("placeholder") || "").trim(), n = d(this.getAttribute("required")) || this.hasAttribute("required"), o = e.some((r) => r.value === "");
+    return s && !n && !o && e.unshift({ value: "", label: s, disabled: !1, group: "" }), e;
+  }
+  _computeOptionsFingerprint(e) {
+    return e.map((t) => `${t.value}
${t.label}
${t.disabled ? "1" : "0"}
${t.group}`).join("");
+  }
+  _firstEnabledIndex() {
+    return L(this._options, (e) => e.disabled);
+  }
+  _lastEnabledIndex() {
+    return P(this._options, (e) => e.disabled);
+  }
+  _selectedIndex() {
+    return $(this._options, this.value, (e) => e.value);
+  }
+  _checkPlacement() {
+    return this.getAttribute("check-placement") === "start" ? "start" : "end";
+  }
+  _syncOptionsData() {
+    var u;
+    const e = this._buildOptionsFromChildren(), t = this._computeOptionsFingerprint(e), i = t !== this._optionsFingerprint;
+    this._options = e, this._optionsFingerprint = t;
+    const s = this.getAttribute("value") || "", n = this.hasAttribute("value"), o = this._options.some((l) => l.value === s), r = d(this.getAttribute("required")) || this.hasAttribute("required"), c = ((u = this._options.find((l) => !l.disabled)) == null ? void 0 : u.value) || "", a = !r && this._options.some((l) => l.value === "") ? "" : c;
+    return n ? o || this._setValueAttr(a) : this._setValueAttr(a), i;
+  }
+  _currentDisplayText() {
+    const e = this.value, t = (this.getAttribute("placeholder") || "").trim();
+    if (e === "" && t)
+      return t;
+    const i = this._options.find((s) => s.value === e);
+    return (i == null ? void 0 : i.label) || e;
+  }
+  _setActiveIndex(e) {
+    if (!this._menuEl || e === this._activeIndex)
+      return;
+    this._activeIndex = e;
+    const t = e >= 0 && this._menuItems[e] || null;
+    this._menuEl.setActiveItem(t, {
+      focus: !1,
+      owner: this._triggerEl,
+      scroll: !0
+    });
+  }
+  _moveActive(e) {
+    if (!this._menuEl || !this._options.length)
+      return;
+    const t = this._activeIndex >= 0 ? this._menuItems[this._activeIndex] : null, i = this._menuEl.move(e, {
+      current: t,
+      focus: !1,
+      owner: this._triggerEl,
+      scroll: !0
+    });
+    if (!i)
+      return;
+    const s = Number(i.dataset.index || "-1");
+    s >= 0 && (this._activeIndex = s);
+  }
+  _selectActiveOption() {
+    if (this._activeIndex < 0)
+      return;
+    const e = this._options[this._activeIndex];
+    !e || e.disabled || (this._applyValueFromUser(e.value), this._closeMenu());
+  }
+  _renderMenu() {
+    const e = this._menuEl;
+    if (!e)
+      return;
+    if (e.replaceChildren(), this._menuItems = [], !this._options.length) {
+      const n = document.createElement("p");
+      n.className = "menu-empty", n.textContent = "No options available", e.appendChild(n), e.refresh();
+      return;
+    }
+    let t = "__none__";
+    this._options.forEach((n, o) => {
+      if (n.group && n.group !== t) {
+        const h = document.createElement("div");
+        h.className = "menu-group", h.setAttribute("role", "presentation"), h.textContent = n.group, e.appendChild(h), t = n.group;
+      }
+      n.group || (t = "__none__");
+      const r = document.createElement("button");
+      r.type = "button", r.className = "menu-item", r.id = `${this._uid}-opt-${o}`, r.setAttribute("role", "option"), r.setAttribute("data-index", String(o)), r.setAttribute("data-value", n.value), r.setAttribute("aria-selected", n.value === this.value ? "true" : "false"), r.setAttribute("aria-disabled", n.disabled ? "true" : "false"), r.tabIndex = -1, n.disabled && (r.disabled = !0);
+      const c = document.createElement("span");
+      c.className = "menu-item-label", c.textContent = n.label;
+      const a = document.createElement("span");
+      a.className = "menu-item-check", a.setAttribute("aria-hidden", "true");
+      const u = this.showCheck, l = this._checkPlacement();
+      a.hidden = !u, r.setAttribute("data-check-placement", l), u && l === "start" ? r.append(a, c) : r.append(c, a), e.appendChild(r), this._menuItems.push(r);
+    });
+    const i = this._menuItems[0] || null, s = this._menuItems[this._menuItems.length - 1] || null;
+    i && i.setAttribute("data-edge-start", "true"), s && s.setAttribute("data-edge-end", "true"), e.refresh(), this._syncMenuSelectionState(), this._syncPanelPlacement();
+  }
+  _syncMenuSelectionState() {
+    if (!this._menuEl)
+      return;
+    const e = this._selectedIndex();
+    this._menuItems.forEach((i) => {
+      const s = Number(i.dataset.index || "-1");
+      i.setAttribute("aria-selected", s === e ? "true" : "false");
+    }), this._activeIndex = D(this._options, {
+      selectedIndex: e,
+      getDisabled: (i) => i.disabled
+    });
+    const t = this._activeIndex >= 0 && this._menuItems[this._activeIndex] || null;
+    this._menuEl.setActiveItem(t, {
+      focus: !1,
+      owner: this._triggerEl,
+      scroll: !0
+    });
+  }
+  _syncPanelPlacement() {
+    const e = this._panelEl, t = this._controlEl, i = this._menuEl;
+    if (!e || !t || !i || !this._open)
+      return;
+    const s = t.getBoundingClientRect(), n = window.innerHeight || document.documentElement.clientHeight || 0, o = Math.max(0, n - s.bottom - 12), r = Math.max(0, s.top - 12), c = Math.min(Math.max(i.scrollHeight, i.offsetHeight) + 4, 320), a = o < c && r > o;
+    this._placement = a ? "top" : "bottom", e.setAttribute("data-placement", this._placement), e.style.setProperty("--ui-select-available-height", `${Math.floor(a ? r : o)}px`);
+  }
+  _openMenu() {
+    this._open || this.disabled || (this._syncOptionsData(), this._open = !0, this._syncControlState(), this._renderMenu(), this._attachOpenListeners());
+  }
+  _closeMenu(e = {}) {
+    var t, i;
+    if (this._open && (this._open = !1, this._activeIndex = -1, this._teardownOpenListeners(), this._syncControlState(), e.restoreFocus !== !1))
+      try {
+        (t = this._triggerEl) == null || t.focus({ preventScroll: !0 });
+      } catch {
+        (i = this._triggerEl) == null || i.focus();
+      }
+  }
+  _syncControlState() {
+    const e = this._triggerEl, t = this._controlEl, i = this._valueEl, s = this._panelEl;
+    if (!e || !t || !i || !s)
+      return;
+    const n = this.getAttribute("label") || "", o = this.getAttribute("description") || "", r = this.getAttribute("error") || "", c = this.getAttribute("aria-label") || n || "Select", a = d(this.getAttribute("loading")), u = d(this.getAttribute("required")) || this.hasAttribute("required"), l = this.getAttribute("tabindex"), h = this.hasAttribute("validation") && this.getAttribute("validation") === "error" || this.hasAttribute("invalid") || this.getAttribute("data-invalid") === "true", b = F(this.getAttribute("radius")), m = this.root.querySelector(".label"), v = this.root.querySelector(".label-text"), g = this.root.querySelector(".description"), x = this.root.querySelector(".description-text"), _ = this.root.querySelector(".error"), y = this.root.querySelector(".error-text"), w = this.root.querySelector(".meta"), A = this.root.querySelector(".required"), k = !!n || this._hasSlotContent("label"), E = !!o || this._hasSlotContent("description"), C = !!r || this._hasSlotContent("error"), z = this._hasSlotContent("leading"), I = this._hasSlotContent("trailing"), M = !!(this.getAttribute("placeholder") || "").trim() && this.value === "";
+    v && (v.textContent = n), x && (x.textContent = o), y && (y.textContent = r), m && (m.hidden = !k), g && (g.hidden = !E), _ && (_.hidden = !C), w && (w.hidden = !k && !E), A && (A.hidden = !u), i.textContent = this._currentDisplayText(), t.setAttribute("data-open", this._open ? "true" : "false"), t.setAttribute("data-placeholder-shown", M ? "true" : "false"), t.setAttribute("data-has-leading", String(z)), t.setAttribute("data-has-trailing", String(I)), e.disabled = this.disabled, e.setAttribute("aria-label", c), e.setAttribute("aria-expanded", this._open ? "true" : "false"), e.setAttribute("aria-busy", a ? "true" : "false"), e.setAttribute("aria-required", u ? "true" : "false"), h ? e.setAttribute("aria-invalid", "true") : e.removeAttribute("aria-invalid"), l != null && !this.disabled ? e.setAttribute("tabindex", l) : this.disabled ? e.setAttribute("tabindex", "-1") : e.setAttribute("tabindex", "0"), s.hidden = !this._open, s.setAttribute("data-placement", this._placement), this._open ? e.setAttribute("aria-controls", `${this._uid}-listbox`) : e.removeAttribute("aria-controls"), b && !["none", "full", "large"].includes(this.getAttribute("radius") || "") ? this.style.setProperty("--ui-select-radius", b) : this.style.removeProperty("--ui-select-radius"), this.setAttribute("aria-disabled", this.disabled ? "true" : "false"), this.setAttribute("aria-busy", a ? "true" : "false"), this.toggleAttribute("open", this._open), this._open && this._syncPanelPlacement();
+  }
+  render() {
+    const e = this.getAttribute("label") || "", t = this.getAttribute("description") || "", i = this.getAttribute("error") || "", s = d(this.getAttribute("required")) || this.hasAttribute("required"), n = this.getAttribute("aria-label") || e || "Select", o = !!e || this._hasSlotContent("label"), r = !!t || this._hasSlotContent("description"), c = !!i || this._hasSlotContent("error"), a = this._hasSlotContent("leading"), u = this._hasSlotContent("trailing"), l = `${this._uid}-label`, h = `${this._uid}-description`, b = `${this._uid}-error`, m = `${this._uid}-trigger`, v = `${this._uid}-listbox`, g = [r ? h : "", c ? b : ""].filter(Boolean).join(" ");
+    this.setContent(`
+      <style>${R}</style>
+      <slot class="content-slot"></slot>
+      <div class="root" part="root">
+        <div class="meta" part="meta" ${o || r ? "" : "hidden"}>
+          <label class="label" part="label" id="${l}" for="${m}" ${o ? "" : "hidden"}>
+            <slot name="label"><span class="label-text">${f(e)}</span></slot>
+            <span class="required" aria-hidden="true" ${s ? "" : "hidden"}>*</span>
+          </label>
+          <p class="description" part="description" id="${h}" ${r ? "" : "hidden"}>
+            <slot name="description"><span class="description-text">${f(t)}</span></slot>
+          </p>
+        </div>
+        <div class="field-shell" part="field-shell">
+          <div class="control" part="control" data-has-leading="${a}" data-has-trailing="${u}" data-open="false">
+            <span class="leading" part="leading" ${a ? "" : "hidden"}>
+              <slot name="leading"></slot>
+            </span>
+            <button
+              id="${m}"
+              type="button"
+              class="trigger native"
+              part="trigger"
+              role="combobox"
+              aria-haspopup="listbox"
+              aria-expanded="false"
+              aria-label="${f(n)}"
+              ${o ? `aria-labelledby="${l}"` : ""}
+              ${g ? `aria-describedby="${f(g)}"` : ""}
+            >
+              <span class="value" part="value"></span>
+            </button>
+            <span class="trailing" part="trailing" ${u ? "" : "hidden"}>
+              <slot name="trailing"></slot>
+            </span>
+            <span class="indicator" part="indicator" aria-hidden="true"></span>
+            <span class="spinner" part="spinner" aria-hidden="true"></span>
+          </div>
+          <div class="panel" part="panel" hidden data-placement="bottom">
+            <ui-listbox
+              id="${v}"
+              class="menu"
+              role="listbox"
+              item-selector=".menu-item[data-index]"
+              item-role="option"
+              active-attribute="data-active"
+            ></ui-listbox>
+          </div>
+        </div>
+        <p class="error" part="error" id="${b}" ${c ? "" : "hidden"}>
+          <slot name="error"><span class="error-text">${f(i)}</span></slot>
+        </p>
+      </div>
+    `), this._controlEl = this.root.querySelector(".control"), this._triggerEl = this.root.querySelector(".trigger"), this._valueEl = this.root.querySelector(".value"), this._panelEl = this.root.querySelector(".panel"), this._menuEl = this.root.querySelector(".menu"), this._syncOptionsData(), this._renderMenu(), !this._open && this._panelEl && (this._panelEl.hidden = !0), this._syncControlState();
+  }
+}
+typeof customElements < "u" && !customElements.get("ui-select") && customElements.define("ui-select", T);
+export {
+  T as UISelect
+};