@editora/ui-core 0.1.8 → 0.1.10

package/dist/select.cjs.js

@@ -0,0 +1,799 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const P=require("./ElementBase-1b301e7f.js"),x=require("./collection-a2969ad2.js"),$=require("./listbox-ef2f708e.js");require("./collection.cjs.js");const D=`
+  :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 R(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 C=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 I extends P.ElementBase{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!C.has(e)}attributeChangedCallback(e,t,i){if(t!==i){if(e==="name"&&this._attachFormRegistration(),this._triggerEl&&C.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 x.findFirstEnabledIndex(this._options,e=>e.disabled)}_lastEnabledIndex(){return x.findLastEnabledIndex(this._options,e=>e.disabled)}_selectedIndex(){return x.findIndexByValue(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=$.resolveListboxActiveIndex(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=R(this.getAttribute("radius")),m=this.root.querySelector(".label"),v=this.root.querySelector(".label-text"),g=this.root.querySelector(".description"),_=this.root.querySelector(".description-text"),y=this.root.querySelector(".error"),w=this.root.querySelector(".error-text"),A=this.root.querySelector(".meta"),k=this.root.querySelector(".required"),E=!!n||this._hasSlotContent("label"),S=!!o||this._hasSlotContent("description"),z=!!r||this._hasSlotContent("error"),M=this._hasSlotContent("leading"),q=this._hasSlotContent("trailing"),L=!!(this.getAttribute("placeholder")||"").trim()&&this.value==="";v&&(v.textContent=n),_&&(_.textContent=o),w&&(w.textContent=r),m&&(m.hidden=!E),g&&(g.hidden=!S),y&&(y.hidden=!z),A&&(A.hidden=!E&&!S),k&&(k.hidden=!u),i.textContent=this._currentDisplayText(),t.setAttribute("data-open",this._open?"true":"false"),t.setAttribute("data-placeholder-shown",L?"true":"false"),t.setAttribute("data-has-leading",String(M)),t.setAttribute("data-has-trailing",String(q)),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>${D}</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",I);exports.UISelect=I;