@juspay/svelte-ui-components 4.26.0 → 4.27.1

package/dist/Select/Select.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { onMount, tick } from 'svelte';
-  import type { SelectItem, SelectProperties } from './properties';
+  import type { SelectItem, SelectPlacement, SelectProperties } from './properties';
   import Pill from '../Pill/Pill.svelte';
   import Img from '../Img/Img.svelte';
   import { computeSelectDropdownPosition } from './dropdownPosition';
@@ -33,6 +33,7 @@
     classes,
     open = $bindable(false),
     dropdownAlign = 'left',
+    placement,
     hierarchy = 'default',
     leftIcon,
     leftIconTestId,
@@ -62,6 +63,67 @@
   // default. The in-flow panel still honours the CSS var via its margin-top.
   const PORTAL_DROPDOWN_GAP = 4;
 
+  /** Viewport padding the `'auto'` placement keeps between the panel and the edges. */
+  const AUTO_PLACEMENT_VIEWPORT_MARGIN = 8;
+
+  /* An unset `placement` is the pre-5.0 contract, kept exactly: the in-flow panel
+     always opens downward and only the portaled one flips on fit. Setting it opts
+     both paths into one resolved corner, which is the whole point of the prop. */
+  let placementRequest: SelectPlacement = $derived(
+    placement ?? (dropdownAlign === 'right' ? 'bottom-right' : 'bottom-left')
+  );
+  let placementPinned: boolean = $derived(placement != null);
+
+  /** Corner an `'auto'` measuring pass settled on; null until it has run. */
+  let autoResolved: Exclude<SelectPlacement, 'auto'> | null = $state(null);
+
+  /* Derived rather than assigned when the dropdown opens: `open` is bindable and
+     documented as something a parent can drive, so the panel can be rendered
+     without `openDropdown` ever running. Assigning on the click path left an
+     explicitly placed Select rendering at the default corner whenever its parent
+     opened it. */
+  let resolvedPlacement: Exclude<SelectPlacement, 'auto'> = $derived(
+    placementRequest === 'auto' ? (autoResolved ?? 'bottom-left') : placementRequest
+  );
+  /** True while an `'auto'` open measures the hidden panel -- suppresses paint. */
+  let measuringPlacement: boolean = $derived(placementRequest === 'auto' && autoResolved === null);
+
+  /* `$derived.by` rather than `$derived`: a bare expression here is evaluated in
+     the declaration's control flow, where TypeScript has `resolvedPlacement`
+     still narrowed to its initialiser literal and calls the comparison
+     unreachable. The closure resets that narrowing. */
+  let placementAlign: 'left' | 'right' = $derived.by(() =>
+    resolvedPlacement === 'bottom-right' || resolvedPlacement === 'top-right' ? 'right' : 'left'
+  );
+
+  /**
+   * Resolves `'auto'` against live geometry, mirroring Menu's pass: the panel is
+   * rendered hidden at the default corner first so it has real dimensions, then
+   * flips right/up only where the default overflows and the opposite side fits.
+   */
+  function resolveAutoPlacement(panel: HTMLElement): Exclude<SelectPlacement, 'auto'> {
+    if (containerEl === null || typeof window === 'undefined') {
+      return 'bottom-left';
+    }
+    const containerRect = containerEl.getBoundingClientRect();
+    const panelRect = panel.getBoundingClientRect();
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+
+    const overflowsRight =
+      containerRect.left + panelRect.width > viewportWidth - AUTO_PLACEMENT_VIEWPORT_MARGIN;
+    const fitsRightAnchored =
+      containerRect.right - panelRect.width >= AUTO_PLACEMENT_VIEWPORT_MARGIN;
+    const horizontal = overflowsRight && fitsRightAnchored ? 'right' : 'left';
+
+    const overflowsBottom =
+      containerRect.bottom + panelRect.height > viewportHeight - AUTO_PLACEMENT_VIEWPORT_MARGIN;
+    const fitsAbove = containerRect.top - panelRect.height >= AUTO_PLACEMENT_VIEWPORT_MARGIN;
+    const vertical = overflowsBottom && fitsAbove ? 'top' : 'bottom';
+
+    return `${vertical}-${horizontal}`;
+  }
+
   const instanceId = $props.id();
   const listboxId = `select-listbox-${instanceId}`;
   const errorMessageId = `${listboxId}-error`;
@@ -195,9 +257,9 @@
     return { destroy: () => node.remove() };
   };
 
-  let portalStyle = $derived.by(() => {
+  let portalPlacement = $derived.by(() => {
     if (!usePortal || !open || triggerEl === null) {
-      return '';
+      return null;
     }
     void portalTick;
     const rect = triggerEl.getBoundingClientRect();
@@ -215,13 +277,62 @@
       },
       dropdown: { width: dropdownWidth, height: dropdownHeight },
       viewport,
-      align: dropdownAlign,
+      align: placementAlign,
+      /* Unset `placement` keeps the fit-based flip this path always had; a pinned
+         corner is honoured on both axes instead. */
+      vertical: placementPinned
+        ? resolvedPlacement === 'top-left' || resolvedPlacement === 'top-right'
+          ? 'top'
+          : 'bottom'
+        : 'auto',
       gap: PORTAL_DROPDOWN_GAP
     });
+    return placement;
+  });
+
+  let portalStyle: string = $derived.by(() => {
+    const placement = portalPlacement;
+    if (placement === null) {
+      return '';
+    }
     const widthRule = placement.width === null ? '' : `width:${placement.width}px;`;
     return `top:${placement.top}px;left:${placement.left}px;min-width:${placement.minWidth}px;${widthRule}`;
   });
 
+  /* A portaled panel's side comes from the geometry, which still flips on fit
+     when `placement` is unset. Reporting the requested corner there would make
+     `data-placement` disagree with where the panel actually is -- the exact
+     thing the attribute exists to tell a consumer. */
+  let effectivePlacement: Exclude<SelectPlacement, 'auto'> = $derived.by(() => {
+    const placement = portalPlacement;
+    if (placement === null) {
+      return resolvedPlacement;
+    }
+    if (placement.flippedUp) {
+      return placementAlign === 'right' ? 'top-right' : 'top-left';
+    }
+    return placementAlign === 'right' ? 'bottom-right' : 'bottom-left';
+  });
+
+  /**
+   * Svelte action on the panel itself: `openDropdown` is not the only way the
+   * panel appears, so the `'auto'` measuring pass is driven by the panel's own
+   * lifecycle rather than by the open handler. Resetting on destroy is what
+   * makes a reopen re-measure against the trigger's current position.
+   */
+  const resolveAutoPlacementOnMount = (node: HTMLElement) => {
+    if (placementRequest === 'auto') {
+      void tick().then(() => {
+        autoResolved = resolveAutoPlacement(node);
+      });
+    }
+    return {
+      destroy: () => {
+        autoResolved = null;
+      }
+    };
+  };
+
   async function openDropdown(): Promise<void> {
     if (disabled || open) {
       return;
@@ -792,8 +903,13 @@
            the inner element that actually holds the options. -->
       <div
         class="select-dropdown"
-        class:select-dropdown-right={dropdownAlign === 'right'}
+        class:select-dropdown-right={placementAlign === 'right'}
+        class:select-dropdown-up={!usePortal &&
+          (effectivePlacement === 'top-left' || effectivePlacement === 'top-right')}
+        class:select-dropdown-measuring={measuringPlacement}
         class:select-dropdown-portal={usePortal}
+        data-placement={effectivePlacement}
+        use:resolveAutoPlacementOnMount
         bind:this={dropdownEl}
         bind:clientWidth={dropdownWidth}
         bind:clientHeight={dropdownHeight}
@@ -841,8 +957,13 @@
     {:else}
       <div
         class="select-dropdown"
-        class:select-dropdown-right={dropdownAlign === 'right'}
+        class:select-dropdown-right={placementAlign === 'right'}
+        class:select-dropdown-up={!usePortal &&
+          (effectivePlacement === 'top-left' || effectivePlacement === 'top-right')}
+        class:select-dropdown-measuring={measuringPlacement}
         class:select-dropdown-portal={usePortal}
+        data-placement={effectivePlacement}
+        use:resolveAutoPlacementOnMount
         bind:this={dropdownEl}
         bind:clientWidth={dropdownWidth}
         bind:clientHeight={dropdownHeight}
@@ -1045,6 +1166,23 @@
     height: 100%;
   }
 
+  /* Anchors the in-flow panel above the trigger. `margin-top` is what the
+     downward panel uses for the gap, so it has to be unset here or the panel
+     sits a gap's width too high. */
+  .select-dropdown.select-dropdown-up {
+    top: auto;
+    bottom: 100%;
+    margin-top: 0;
+    margin-bottom: var(--select-dropdown-gap, 4px);
+  }
+
+  /* One-tick measuring pass for placement="auto": the panel needs rendered
+     dimensions before the corner is chosen, without a visible flash at the
+     wrong corner. */
+  .select-dropdown.select-dropdown-measuring {
+    visibility: hidden;
+  }
+
   .select-dropdown {
     position: absolute;
     top: 100%;

package/dist/Select/dropdownPosition.d.ts

@@ -9,6 +9,12 @@ type Size = {
     width: number;
     height: number;
 };
+/**
+ * Which side of the trigger the panel opens on. `'auto'` picks the side that
+ * fits, which is what a portaled Select did before `placement` existed and so
+ * stays the default when the option is omitted.
+ */
+export type SelectVerticalPlacement = 'bottom' | 'top' | 'auto';
 export type SelectDropdownPlacement = {
     left: number;
     top: number;
@@ -28,14 +34,16 @@ export type SelectDropdownPlacement = {
  * coordinates for a `position: fixed` panel anchored to `trigger`. Left-aligned
  * panels match the trigger width; right-aligned panels hang leftward from the
  * trigger's right edge using their measured content width. The panel flips above
- * the trigger only when it cannot fit below and there is more room above, and is
- * clamped horizontally to a viewport margin.
+ * the trigger only when it cannot fit below and there is more room above — or
+ * unconditionally when `vertical` pins a side — and is clamped horizontally to a
+ * viewport margin.
  */
 export declare function computeSelectDropdownPosition(opts: {
     trigger: TriggerRect;
     dropdown: Size;
     viewport: Size;
     align: 'left' | 'right';
+    vertical?: SelectVerticalPlacement;
     gap: number;
     margin?: number;
 }): SelectDropdownPlacement;

package/dist/Select/dropdownPosition.js

@@ -3,11 +3,13 @@
  * coordinates for a `position: fixed` panel anchored to `trigger`. Left-aligned
  * panels match the trigger width; right-aligned panels hang leftward from the
  * trigger's right edge using their measured content width. The panel flips above
- * the trigger only when it cannot fit below and there is more room above, and is
- * clamped horizontally to a viewport margin.
+ * the trigger only when it cannot fit below and there is more room above — or
+ * unconditionally when `vertical` pins a side — and is clamped horizontally to a
+ * viewport margin.
  */
 export function computeSelectDropdownPosition(opts) {
     const margin = opts.margin ?? 8;
+    const vertical = opts.vertical ?? 'auto';
     const { trigger, dropdown, viewport, align, gap } = opts;
     const minWidth = trigger.width;
     const width = align === 'left' ? trigger.width : null;
@@ -19,7 +21,30 @@ export function computeSelectDropdownPosition(opts) {
     }
     const spaceBelow = viewport.height - trigger.bottom;
     const spaceAbove = trigger.top;
-    const flippedUp = dropdown.height > 0 && spaceBelow < dropdown.height + gap && spaceAbove > spaceBelow;
-    const top = flippedUp ? trigger.top - gap - dropdown.height : trigger.bottom + gap;
+    /* A pinned side is honoured even where the panel will not fit: the caller
+       asked for that side, and silently overriding it is the behaviour
+       `placement` exists to escape. Only `'auto'` consults the geometry. */
+    const fitsBelow = !(dropdown.height > 0 && spaceBelow < dropdown.height + gap);
+    const flippedUp = vertical === 'auto' ? !fitsBelow && spaceAbove > spaceBelow : vertical === 'top';
+    const unclamped = flippedUp ? trigger.top - gap - dropdown.height : trigger.bottom + gap;
+    /* The panel is `position: fixed` when portaled, so whatever a viewport edge
+       cuts off cannot be scrolled back into view -- hence clamping at all. The two
+       edges are not symmetric, though:
+  
+       The top edge is always held. A negative top is unreachable however the side
+       was chosen.
+  
+       The bottom edge is held only for an auto-resolved side. `'auto'` picks the
+       side with more room and can still overflow in a short viewport, where
+       pulling the panel up is right. A *pinned* side is the caller overriding the
+       fit, and dragging it back would park the panel over the very trigger it was
+       pinned below -- the silent override `placement` exists to escape. */
+    const bottomLimit = viewport.height - dropdown.height - margin;
+    const withinViewport = vertical === 'auto' && Number.isFinite(viewport.height)
+        ? Math.min(unclamped, bottomLimit)
+        : unclamped;
+    const top = Number.isFinite(viewport.height) && dropdown.height > 0
+        ? Math.max(margin, withinViewport)
+        : unclamped;
     return { left, top, minWidth, width, flippedUp };
 }

package/dist/Select/properties.d.ts

@@ -1,4 +1,9 @@
 import type { Snippet } from 'svelte';
+/**
+ * Corner the dropdown anchors to. Mirrors `MenuPlacement` so the two components
+ * that open a panel from a trigger describe placement the same way.
+ */
+export type SelectPlacement = 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right' | 'auto';
 export type SelectProperties = MandatorySelectProperties & OptionalSelectProperties & SelectEventProperties;
 export type SelectItem = {
     id: string;
@@ -103,8 +108,23 @@ export type OptionalSelectProperties = {
     classes?: string;
     /** Bindable. Controls whether the dropdown is open; the component writes back on open/close so parents can `bind:open` to observe or drive it. Unbound, the component manages its own state. */
     open?: boolean;
-    /** Horizontal anchor of the dropdown panel. `'left'` (default) anchors to the trigger's left edge; `'right'` anchors to the right edge so a content-wider panel hangs leftward instead of overflowing. */
+    /**
+     * @deprecated Use `placement`, which controls both axes. `dropdownAlign: 'left'`
+     * is `placement: 'bottom-left'` and `'right'` is `'bottom-right'`. Still honoured
+     * when `placement` is not set; scheduled for removal in 5.0.0.
+     */
     dropdownAlign?: 'left' | 'right';
+    /**
+     * Corner the dropdown panel anchors to, matching `Menu`'s prop of the same name.
+     * `'auto'` resolves the best-fitting corner against the viewport on open, so a
+     * Select sitting just above a sticky footer opens upward instead of into it.
+     *
+     * Unset is the pre-5.0 contract and is what `dropdownAlign` still drives: the
+     * in-flow panel always opens downward, and a portaled one flips up only when it
+     * cannot fit below. Setting `placement` opts both paths into the same resolved
+     * corner, so an in-flow Select can finally open upward.
+     */
+    placement?: SelectPlacement;
     /** Snippet for rendering a compact trigger summary in multiple mode instead of one Pill per selected value. Receives `{ value, items }` so the consumer can compute e.g. "All" / "3 selected". When not provided the default Pill-per-value behaviour is used. */
     triggerSummary?: import('svelte').Snippet<[{
         value: string[];

package/dist-wc/index.js

@@ -17396,59 +17396,65 @@ customElements.define("sui-scroller", create_custom_element(Scroller_wc, {
 //#endregion
 //#region src/lib/Select/dropdownPosition.ts
 function computeSelectDropdownPosition(e) {
-	let t = e.margin ?? 8, { trigger: n, dropdown: i, viewport: a, align: o, gap: s } = e, c = n.width, l = o === "left" ? n.width : null, u = Math.max(o === "right" ? i.width : n.width, n.width), f = o === "right" ? n.right - u : n.left;
-	if (Number.isFinite(a.width)) {
-		let e = a.width - u - t;
-		f = Math.max(t, Math.min(f, e));
+	let t = e.margin ?? 8, n = e.vertical ?? "auto", { trigger: i, dropdown: a, viewport: o, align: s, gap: c } = e, l = i.width, u = s === "left" ? i.width : null, f = Math.max(s === "right" ? a.width : i.width, i.width), p = s === "right" ? i.right - f : i.left;
+	if (Number.isFinite(o.width)) {
+		let e = o.width - f - t;
+		p = Math.max(t, Math.min(p, e));
 	}
-	let p = a.height - n.bottom, h = n.top, S = i.height > 0 && p < i.height + s && h > p, C = S ? n.top - s - i.height : n.bottom + s;
+	let h = o.height - i.bottom, S = i.top, C = !(a.height > 0 && h < a.height + c), k = n === "auto" ? !C && S > h : n === "top", R = k ? i.top - c - a.height : i.bottom + c, te = o.height - a.height - t, ne = n === "auto" && Number.isFinite(o.height) ? Math.min(R, te) : R, re = Number.isFinite(o.height) && a.height > 0 ? Math.max(t, ne) : R;
 	return {
-		left: f,
-		top: C,
-		minWidth: c,
-		width: l,
-		flippedUp: S
+		left: p,
+		top: re,
+		minWidth: l,
+		width: u,
+		flippedUp: k
 	};
 }
 //#endregion
 //#region src/lib/Select/Select.svelte
 var root$36 = /* @__PURE__ */ from_html("<div class=\"select-empty svelte-52lifo\">No results</div>"), root_1$33 = /* @__PURE__ */ from_html("<span class=\"select-option-check svelte-52lifo\"></span>"), root_2$26 = /* @__PURE__ */ from_html("<span class=\"select-option-dash svelte-52lifo\"></span>"), root_3$24 = /* @__PURE__ */ from_html("<span aria-hidden=\"true\"><!></span>"), root_4$19 = /* @__PURE__ */ from_html("<div><!> </div>"), root_5$17 = /* @__PURE__ */ from_html("<span class=\"select-option-tick svelte-52lifo\" aria-hidden=\"true\"></span>"), root_6$16 = /* @__PURE__ */ from_html("<div><!> <!> <span class=\"select-option-label svelte-52lifo\"> </span> <!></div>"), root_7$15 = /* @__PURE__ */ from_html("<div class=\"select-bottom-content svelte-52lifo\"><!></div>"), root_8$14 = /* @__PURE__ */ from_html("<!> <!>", 1), root_9$11 = /* @__PURE__ */ from_html("<input type=\"hidden\"/>"), root_10$10 = /* @__PURE__ */ from_html("<input class=\"select-search svelte-52lifo\" type=\"text\" autocomplete=\"off\"/>"), root_11$9 = /* @__PURE__ */ from_html("<span class=\"select-placeholder svelte-52lifo\"> </span>"), root_12$8 = /* @__PURE__ */ from_html("<span> </span>"), root_13$7 = /* @__PURE__ */ from_html("<button type=\"button\" class=\"select-clear svelte-52lifo\" aria-label=\"Clear selection\"><span aria-hidden=\"true\">×</span></button>"), root_14$7 = /* @__PURE__ */ from_html("<div role=\"alert\" class=\"select-error-message svelte-52lifo\"> </div>"), root_15$7 = /* @__PURE__ */ from_html("<div><input class=\"select-menu-search svelte-52lifo\" type=\"search\" aria-label=\"Search options\" autocomplete=\"off\"/> <div class=\"select-menu-list svelte-52lifo\" role=\"listbox\" tabindex=\"-1\"><!></div> <!></div>"), root_16$6 = /* @__PURE__ */ from_html("<div role=\"listbox\"><!></div>"), root_17$5 = /* @__PURE__ */ from_html("<div><!> <div><div><!> <!> <span class=\"select-arrow svelte-52lifo\"></span></div> <!></div> <!> <!></div>"), $$css$38 = {
 	hash: "svelte-52lifo",
-	code: ".select.svelte-52lifo {position:relative;width:var(--select-width, 100%);font-family:var(--select-font-family, inherit);font-size:var(--select-font-size, 14px);color:var(--select-color, #333333);}.select.disabled.svelte-52lifo {opacity:var(--select-disabled-opacity, 0.5);cursor:var(--select-disabled-cursor, not-allowed);pointer-events:none;}.select-trigger.svelte-52lifo {display:flex;flex-wrap:wrap;align-items:center;gap:var(--select-trigger-gap, 4px);min-height:var(--select-trigger-min-height, 40px);padding:var(--select-trigger-padding, 8px 12px);background:var(--select-trigger-background, #ffffff);border:var(--select-trigger-border, 1px solid #cccccc);border-radius:var(--select-trigger-border-radius, var(--radius, 4px));cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent;transition:var(--select-trigger-transition, border-color 0.15s, box-shadow 0.15s);}.select-trigger.svelte-52lifo .select-left-icon {--image-width: var(--select-left-icon-size, 16px);--image-height: var(--select-left-icon-size, 16px);--image-object-fit: contain;\n\n    /* The icon inlines, so a currentColor asset resolves against this. Defaults to\n       `inherit` — the trigger's text colour, which is what it already did — so this is\n       a hook, not a change. Without it a consumer cannot tint the icon independently\n       of the label, and an icon migrated to currentColor is forced to match its label\n       exactly, flattening any deliberate muted-icon/strong-label hierarchy. */color:var(--select-left-icon-color, inherit);flex:none;}.select-trigger.svelte-52lifo:hover:not(.disabled:where(.svelte-52lifo) .select-trigger:where(.svelte-52lifo)) {border-color:var(--select-trigger-hover-border-color, #999999);}.select-trigger.svelte-52lifo:focus-within,\n  .select.open.svelte-52lifo .select-trigger:where(.svelte-52lifo) {border-color:var(--select-trigger-focus-border-color, #2563eb);box-shadow:var(--select-trigger-focus-shadow, 0 0 0 2px rgba(37, 99, 235, 0.2));}\n\n  /* Pressed feedback on the trigger. `:active` only, so it lasts exactly as\n     long as the pointer is down and never lingers as a stuck state the way a\n     class-driven one can. */.select.svelte-52lifo:not(.disabled) .select-trigger:where(.svelte-52lifo):active {background:var(--select-trigger-pressed-background, #ededed);}\n\n  /* The error border has to outrank BOTH hover and focus/open, or the field\n     stops reading as invalid the moment the user enters it -- which is the one\n     moment they most need to see it. Listed after them, at equal or higher\n     specificity, rather than reached for with !important. */.select.error.svelte-52lifo .select-trigger:where(.svelte-52lifo),\n  .select.error.svelte-52lifo .select-trigger:where(.svelte-52lifo):hover,\n  .select.error.svelte-52lifo .select-trigger:where(.svelte-52lifo):focus-within,\n  .select.error.open.svelte-52lifo .select-trigger:where(.svelte-52lifo) {border-color:var(--select-trigger-error-border-color, #dc2626);}.select.error.svelte-52lifo .select-trigger:where(.svelte-52lifo):focus-within,\n  .select.error.open.svelte-52lifo .select-trigger:where(.svelte-52lifo) {box-shadow:var(--select-trigger-error-shadow, 0 0 0 2px rgba(220, 38, 38, 0.2));}.select-error-message.svelte-52lifo {margin-top:var(--select-error-message-margin-top, 4px);font-size:var(--select-error-message-font-size, 12px);color:var(--select-error-message-color, #dc2626);}.select-control.svelte-52lifo {position:relative;}.select-control.has-clear.svelte-52lifo .select-trigger:where(.svelte-52lifo) {padding-inline-end:calc(var(--select-clear-size, 18px) + 36px);}.select-control.has-clear.svelte-52lifo .select-arrow:where(.svelte-52lifo) {position:absolute;right:12px;}.select-clear.svelte-52lifo {position:absolute;right:32px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;flex:none;width:var(--select-clear-size, 18px);height:var(--select-clear-size, 18px);margin:0;padding:0;border:none;border-radius:var(--select-clear-border-radius, var(--radius, 4px));background:var(--select-clear-background, transparent);color:var(--select-clear-color, #666666);font-size:var(--select-clear-font-size, 16px);line-height:1;cursor:pointer;}.select-clear.svelte-52lifo:focus-visible {outline:var(--select-clear-focus-outline, 2px solid currentColor);outline-offset:2px;}.select-clear.svelte-52lifo:hover {background:var(--select-clear-hover-background, #ededed);color:var(--select-clear-hover-color, #111111);}.select-clear.svelte-52lifo:active {background:var(--select-clear-pressed-background, #e0e0e0);}.select-value.svelte-52lifo {flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:var(--select-value-align, left);}.select-placeholder.svelte-52lifo {flex:1;color:var(--select-placeholder-color, #999999);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:var(--select-value-align, left);}.select-search.svelte-52lifo {flex:1;min-width:60px;border:none;outline:none;background:transparent;font-family:inherit;font-size:inherit;color:inherit;padding:0;cursor:text;}.select-search.svelte-52lifo::placeholder {color:var(--select-placeholder-color, #999999);}.select-arrow.svelte-52lifo {display:inline-flex;align-items:center;justify-content:center;width:var(--select-arrow-size, 16px);height:var(--select-arrow-size, 16px);color:var(--select-arrow-color, #666666);flex-shrink:0;transition:transform 0.15s;}.select.open.svelte-52lifo .select-arrow:where(.svelte-52lifo) {transform:rotate(180deg);}.select-arrow.svelte-52lifo svg {width:100%;height:100%;}.select-dropdown.svelte-52lifo {position:absolute;top:100%;left:var(--select-dropdown-left, 0);right:var(--select-dropdown-right, 0);min-width:var(--select-dropdown-min-width, auto);max-width:var(--select-dropdown-max-width, none);width:var(--select-dropdown-width, auto);margin-top:var(--select-dropdown-gap, 4px);background:var(--select-dropdown-background, #ffffff);border:var(--select-dropdown-border, 1px solid #cccccc);border-radius:var(--select-dropdown-border-radius, var(--radius, 4px));box-shadow:var(--select-dropdown-shadow, 0 4px 12px rgba(0, 0, 0, 0.1));max-height:var(--select-dropdown-max-height, 200px);overflow-y:auto;z-index:var(--select-dropdown-z-index, 10);}\n\n  /* With the search box inside the panel, the PANEL must stop scrolling and\n     the list scroll instead -- otherwise the search box scrolls away as soon\n     as the user moves down the results, which is the one control they still\n     need. The max-height moves down with the scrolling, so the panel keeps\n     growing to fit the search box plus a list of the same height as before. */.select-dropdown.svelte-52lifo:has(> .select-menu-list:where(.svelte-52lifo)) {max-height:none;overflow-y:visible;display:flex;flex-direction:column;}.select-menu-list.svelte-52lifo {max-height:var(--select-dropdown-max-height, 200px);overflow-y:auto;}.select-menu-search.svelte-52lifo {flex:none;margin:var(--select-menu-search-margin, 6px);padding:var(--select-menu-search-padding, 6px 8px);border:var(--select-menu-search-border, 1px solid #cccccc);border-radius:var(--select-menu-search-border-radius, var(--radius, 4px));background:var(--select-menu-search-background, #ffffff);color:var(--select-menu-search-color, inherit);font-family:inherit;font-size:var(--select-menu-search-font-size, inherit);outline:none;}.select-menu-search.svelte-52lifo:focus-visible {border-color:var(--select-menu-search-focus-border-color, #2563eb);box-shadow:var(--select-menu-search-focus-shadow, 0 0 0 2px rgba(37, 99, 235, 0.2));}.select-dropdown-right.svelte-52lifo {left:auto;right:var(--select-dropdown-right, 0);min-width:var(--select-dropdown-min-width, 100%);max-width:var(--select-dropdown-max-width, none);width:var(--select-dropdown-width, max-content);}.select-dropdown.select-dropdown-portal.svelte-52lifo {\n    /* Portaled to <body>: fixed positioning escapes overflow/scroll ancestors\n       (e.g. a table cell). Placement (top/left/width/min-width) is set inline\n       from the trigger rect, so neutralise the in-flow anchoring here. */position:fixed;right:auto;margin-top:0;\n    /* In the root stacking context the panel competes with modals/sheets rather\n       than painting above same-container siblings, so default it into the\n       top-layer band (consumers still override via --select-dropdown-z-index). */z-index:var(--select-dropdown-z-index, 1000);}.select-option.svelte-52lifo {padding:var(--select-option-padding, 8px 12px);color:var(--select-option-color, #333333);font-size:var(--select-option-font-size, inherit);cursor:pointer;transition:background 0.1s;}\n\n  /* Per-option leading icon (SelectItem.icon). Kept inline + vertically centred so\n     it needs no change to the option's display and can't regress icon-less lists. */.select-option.svelte-52lifo .select-option-icon {--image-width: var(--select-option-icon-size, 16px);--image-height: var(--select-option-icon-size, 16px);--image-object-fit: contain;color:var(--select-option-icon-color, inherit);vertical-align:middle;margin-right:var(--select-option-icon-gap, 8px);}.select-option.multi.svelte-52lifo {display:flex;align-items:center;gap:var(--select-option-gap, 0);}.select-option.svelte-52lifo:hover,\n  .select-option.highlighted.svelte-52lifo {background:var(--select-option-hover-background, #f0f0f0);color:var(--select-option-hover-color, var(--select-option-color, #333333));}.select-option.selected.svelte-52lifo {background:var(--select-option-selected-background, #e8f0fe);color:var(--select-option-selected-color, var(--select-option-color, #333333));}.select-option.selected.highlighted.svelte-52lifo {background:var(\n      --select-option-selected-hover-background,\n      var(--select-option-selected-background, #e8f0fe)\n    );}\n\n  /* Pressed feedback comes last, and each selector carries enough specificity\n     to outrank its non-active counterpart above. An option is always hovered\n     when pressed and is often selected too, so a single low-specificity rule\n     earlier in the sheet would be correct in isolation and invisible in\n     practice -- which is how a pressed state ends up shipping as dead CSS.\n     A press on an already-selected row still has to confirm the tap landed. */.select-option.svelte-52lifo:active,\n  .select-option.selected.svelte-52lifo:active,\n  .select-option.selected.highlighted.svelte-52lifo:active {background:var(--select-option-pressed-background, #ededed);}.select-option-indicator.svelte-52lifo {display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;box-sizing:border-box;width:var(--select-option-indicator-size, 18px);height:var(--select-option-indicator-size, 18px);border:var(--select-option-indicator-border, 2px solid #757575);border-radius:var(--select-option-indicator-border-radius, var(--radius, 4px));background-color:var(--select-option-indicator-background, transparent);color:var(--select-option-indicator-color, currentColor);transition:background-color 0.15s,\n      border-color 0.15s;}.select-option-indicator.checked.svelte-52lifo {background-color:var(--select-option-indicator-checked-background, #2196f3);border-color:var(--select-option-indicator-checked-border-color, #2196f3);}.select-option-check.svelte-52lifo {display:inline-flex;align-items:center;justify-content:center;width:var(--select-option-indicator-check-size, 12px);height:var(--select-option-indicator-check-size, 12px);color:var(--select-option-indicator-check-color, #ffffff);}.select-option-check.svelte-52lifo svg {width:100%;height:100%;}.select-option-indicator.indeterminate.svelte-52lifo {background-color:var(--select-option-indicator-checked-background, #2196f3);border-color:var(--select-option-indicator-checked-border-color, #2196f3);}.select-option-dash.svelte-52lifo {width:var(--select-option-indicator-dash-size, 10px);height:var(--select-option-indicator-dash-thickness, 2px);border-radius:1px;background-color:var(--select-option-indicator-dash-color, #ffffff);}.select-option.select-all.svelte-52lifo {border-bottom:var(--select-all-border, none);font-weight:var(--select-all-font-weight, inherit);}.select-empty.svelte-52lifo {padding:var(--select-empty-padding, 8px 12px);color:var(--select-empty-color, #999999);font-style:var(--select-empty-font-style, italic);font-size:var(--select-empty-font-size, inherit);}.select-bottom-content.svelte-52lifo {border-top:var(--select-bottom-content-border, none);padding:var(--select-bottom-content-padding, 8px 12px);}.select-trigger.svelte-52lifo .pill {--pill-background: var(--select-pill-background, #e0e0e0);--pill-color: var(--select-pill-color, #333333);--pill-border-radius: var(--select-pill-border-radius, 999px);--pill-padding: var(--select-pill-padding, 2px 8px);--pill-font-size: var(--select-pill-font-size, 13px);}\n\n  /* Ghost hierarchy: transparent, borderless trigger */.select.ghost.svelte-52lifo .select-trigger:where(.svelte-52lifo) {background:var(--select-ghost-trigger-background, transparent);border-color:var(--select-ghost-trigger-border-color, transparent);box-shadow:none;}.select.ghost.svelte-52lifo .select-trigger:where(.svelte-52lifo):hover:not(.disabled:where(.svelte-52lifo) .select-trigger:where(.svelte-52lifo)) {border-color:var(--select-ghost-trigger-hover-border-color, transparent);background:var(--select-ghost-trigger-hover-background, rgba(0, 0, 0, 0.04));}.select.ghost.open.svelte-52lifo .select-trigger:where(.svelte-52lifo) {border-color:var(--select-ghost-trigger-open-border-color, transparent);background:var(--select-ghost-trigger-open-background, rgba(0, 0, 0, 0.06));box-shadow:none;}\n\n  /* Single-select right-edge tick (showSelectedTick) */.select-option.tickable.svelte-52lifo {display:flex;align-items:center;gap:8px;}.select-option.tickable.svelte-52lifo .select-option-label:where(.svelte-52lifo) {flex:1 1 auto;min-width:0;}.select-option-tick.svelte-52lifo {display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--select-option-tick-size, 16px);height:var(--select-option-tick-size, 16px);color:var(--select-option-tick-color, #2563eb);}.select-option-tick.svelte-52lifo svg {width:100%;height:100%;}"
+	code: ".select.svelte-52lifo {position:relative;width:var(--select-width, 100%);font-family:var(--select-font-family, inherit);font-size:var(--select-font-size, 14px);color:var(--select-color, #333333);}.select.disabled.svelte-52lifo {opacity:var(--select-disabled-opacity, 0.5);cursor:var(--select-disabled-cursor, not-allowed);pointer-events:none;}.select-trigger.svelte-52lifo {display:flex;flex-wrap:wrap;align-items:center;gap:var(--select-trigger-gap, 4px);min-height:var(--select-trigger-min-height, 40px);padding:var(--select-trigger-padding, 8px 12px);background:var(--select-trigger-background, #ffffff);border:var(--select-trigger-border, 1px solid #cccccc);border-radius:var(--select-trigger-border-radius, var(--radius, 4px));cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent;transition:var(--select-trigger-transition, border-color 0.15s, box-shadow 0.15s);}.select-trigger.svelte-52lifo .select-left-icon {--image-width: var(--select-left-icon-size, 16px);--image-height: var(--select-left-icon-size, 16px);--image-object-fit: contain;\n\n    /* The icon inlines, so a currentColor asset resolves against this. Defaults to\n       `inherit` — the trigger's text colour, which is what it already did — so this is\n       a hook, not a change. Without it a consumer cannot tint the icon independently\n       of the label, and an icon migrated to currentColor is forced to match its label\n       exactly, flattening any deliberate muted-icon/strong-label hierarchy. */color:var(--select-left-icon-color, inherit);flex:none;}.select-trigger.svelte-52lifo:hover:not(.disabled:where(.svelte-52lifo) .select-trigger:where(.svelte-52lifo)) {border-color:var(--select-trigger-hover-border-color, #999999);}.select-trigger.svelte-52lifo:focus-within,\n  .select.open.svelte-52lifo .select-trigger:where(.svelte-52lifo) {border-color:var(--select-trigger-focus-border-color, #2563eb);box-shadow:var(--select-trigger-focus-shadow, 0 0 0 2px rgba(37, 99, 235, 0.2));}\n\n  /* Pressed feedback on the trigger. `:active` only, so it lasts exactly as\n     long as the pointer is down and never lingers as a stuck state the way a\n     class-driven one can. */.select.svelte-52lifo:not(.disabled) .select-trigger:where(.svelte-52lifo):active {background:var(--select-trigger-pressed-background, #ededed);}\n\n  /* The error border has to outrank BOTH hover and focus/open, or the field\n     stops reading as invalid the moment the user enters it -- which is the one\n     moment they most need to see it. Listed after them, at equal or higher\n     specificity, rather than reached for with !important. */.select.error.svelte-52lifo .select-trigger:where(.svelte-52lifo),\n  .select.error.svelte-52lifo .select-trigger:where(.svelte-52lifo):hover,\n  .select.error.svelte-52lifo .select-trigger:where(.svelte-52lifo):focus-within,\n  .select.error.open.svelte-52lifo .select-trigger:where(.svelte-52lifo) {border-color:var(--select-trigger-error-border-color, #dc2626);}.select.error.svelte-52lifo .select-trigger:where(.svelte-52lifo):focus-within,\n  .select.error.open.svelte-52lifo .select-trigger:where(.svelte-52lifo) {box-shadow:var(--select-trigger-error-shadow, 0 0 0 2px rgba(220, 38, 38, 0.2));}.select-error-message.svelte-52lifo {margin-top:var(--select-error-message-margin-top, 4px);font-size:var(--select-error-message-font-size, 12px);color:var(--select-error-message-color, #dc2626);}.select-control.svelte-52lifo {position:relative;}.select-control.has-clear.svelte-52lifo .select-trigger:where(.svelte-52lifo) {padding-inline-end:calc(var(--select-clear-size, 18px) + 36px);}.select-control.has-clear.svelte-52lifo .select-arrow:where(.svelte-52lifo) {position:absolute;right:12px;}.select-clear.svelte-52lifo {position:absolute;right:32px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;flex:none;width:var(--select-clear-size, 18px);height:var(--select-clear-size, 18px);margin:0;padding:0;border:none;border-radius:var(--select-clear-border-radius, var(--radius, 4px));background:var(--select-clear-background, transparent);color:var(--select-clear-color, #666666);font-size:var(--select-clear-font-size, 16px);line-height:1;cursor:pointer;}.select-clear.svelte-52lifo:focus-visible {outline:var(--select-clear-focus-outline, 2px solid currentColor);outline-offset:2px;}.select-clear.svelte-52lifo:hover {background:var(--select-clear-hover-background, #ededed);color:var(--select-clear-hover-color, #111111);}.select-clear.svelte-52lifo:active {background:var(--select-clear-pressed-background, #e0e0e0);}.select-value.svelte-52lifo {flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:var(--select-value-align, left);}.select-placeholder.svelte-52lifo {flex:1;color:var(--select-placeholder-color, #999999);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:var(--select-value-align, left);}.select-search.svelte-52lifo {flex:1;min-width:60px;border:none;outline:none;background:transparent;font-family:inherit;font-size:inherit;color:inherit;padding:0;cursor:text;}.select-search.svelte-52lifo::placeholder {color:var(--select-placeholder-color, #999999);}.select-arrow.svelte-52lifo {display:inline-flex;align-items:center;justify-content:center;width:var(--select-arrow-size, 16px);height:var(--select-arrow-size, 16px);color:var(--select-arrow-color, #666666);flex-shrink:0;transition:transform 0.15s;}.select.open.svelte-52lifo .select-arrow:where(.svelte-52lifo) {transform:rotate(180deg);}.select-arrow.svelte-52lifo svg {width:100%;height:100%;}\n\n  /* Anchors the in-flow panel above the trigger. `margin-top` is what the\n     downward panel uses for the gap, so it has to be unset here or the panel\n     sits a gap's width too high. */.select-dropdown.select-dropdown-up.svelte-52lifo {top:auto;bottom:100%;margin-top:0;margin-bottom:var(--select-dropdown-gap, 4px);}\n\n  /* One-tick measuring pass for placement=\"auto\": the panel needs rendered\n     dimensions before the corner is chosen, without a visible flash at the\n     wrong corner. */.select-dropdown.select-dropdown-measuring.svelte-52lifo {visibility:hidden;}.select-dropdown.svelte-52lifo {position:absolute;top:100%;left:var(--select-dropdown-left, 0);right:var(--select-dropdown-right, 0);min-width:var(--select-dropdown-min-width, auto);max-width:var(--select-dropdown-max-width, none);width:var(--select-dropdown-width, auto);margin-top:var(--select-dropdown-gap, 4px);background:var(--select-dropdown-background, #ffffff);border:var(--select-dropdown-border, 1px solid #cccccc);border-radius:var(--select-dropdown-border-radius, var(--radius, 4px));box-shadow:var(--select-dropdown-shadow, 0 4px 12px rgba(0, 0, 0, 0.1));max-height:var(--select-dropdown-max-height, 200px);overflow-y:auto;z-index:var(--select-dropdown-z-index, 10);}\n\n  /* With the search box inside the panel, the PANEL must stop scrolling and\n     the list scroll instead -- otherwise the search box scrolls away as soon\n     as the user moves down the results, which is the one control they still\n     need. The max-height moves down with the scrolling, so the panel keeps\n     growing to fit the search box plus a list of the same height as before. */.select-dropdown.svelte-52lifo:has(> .select-menu-list:where(.svelte-52lifo)) {max-height:none;overflow-y:visible;display:flex;flex-direction:column;}.select-menu-list.svelte-52lifo {max-height:var(--select-dropdown-max-height, 200px);overflow-y:auto;}.select-menu-search.svelte-52lifo {flex:none;margin:var(--select-menu-search-margin, 6px);padding:var(--select-menu-search-padding, 6px 8px);border:var(--select-menu-search-border, 1px solid #cccccc);border-radius:var(--select-menu-search-border-radius, var(--radius, 4px));background:var(--select-menu-search-background, #ffffff);color:var(--select-menu-search-color, inherit);font-family:inherit;font-size:var(--select-menu-search-font-size, inherit);outline:none;}.select-menu-search.svelte-52lifo:focus-visible {border-color:var(--select-menu-search-focus-border-color, #2563eb);box-shadow:var(--select-menu-search-focus-shadow, 0 0 0 2px rgba(37, 99, 235, 0.2));}.select-dropdown-right.svelte-52lifo {left:auto;right:var(--select-dropdown-right, 0);min-width:var(--select-dropdown-min-width, 100%);max-width:var(--select-dropdown-max-width, none);width:var(--select-dropdown-width, max-content);}.select-dropdown.select-dropdown-portal.svelte-52lifo {\n    /* Portaled to <body>: fixed positioning escapes overflow/scroll ancestors\n       (e.g. a table cell). Placement (top/left/width/min-width) is set inline\n       from the trigger rect, so neutralise the in-flow anchoring here. */position:fixed;right:auto;margin-top:0;\n    /* In the root stacking context the panel competes with modals/sheets rather\n       than painting above same-container siblings, so default it into the\n       top-layer band (consumers still override via --select-dropdown-z-index). */z-index:var(--select-dropdown-z-index, 1000);}.select-option.svelte-52lifo {padding:var(--select-option-padding, 8px 12px);color:var(--select-option-color, #333333);font-size:var(--select-option-font-size, inherit);cursor:pointer;transition:background 0.1s;}\n\n  /* Per-option leading icon (SelectItem.icon). Kept inline + vertically centred so\n     it needs no change to the option's display and can't regress icon-less lists. */.select-option.svelte-52lifo .select-option-icon {--image-width: var(--select-option-icon-size, 16px);--image-height: var(--select-option-icon-size, 16px);--image-object-fit: contain;color:var(--select-option-icon-color, inherit);vertical-align:middle;margin-right:var(--select-option-icon-gap, 8px);}.select-option.multi.svelte-52lifo {display:flex;align-items:center;gap:var(--select-option-gap, 0);}.select-option.svelte-52lifo:hover,\n  .select-option.highlighted.svelte-52lifo {background:var(--select-option-hover-background, #f0f0f0);color:var(--select-option-hover-color, var(--select-option-color, #333333));}.select-option.selected.svelte-52lifo {background:var(--select-option-selected-background, #e8f0fe);color:var(--select-option-selected-color, var(--select-option-color, #333333));}.select-option.selected.highlighted.svelte-52lifo {background:var(\n      --select-option-selected-hover-background,\n      var(--select-option-selected-background, #e8f0fe)\n    );}\n\n  /* Pressed feedback comes last, and each selector carries enough specificity\n     to outrank its non-active counterpart above. An option is always hovered\n     when pressed and is often selected too, so a single low-specificity rule\n     earlier in the sheet would be correct in isolation and invisible in\n     practice -- which is how a pressed state ends up shipping as dead CSS.\n     A press on an already-selected row still has to confirm the tap landed. */.select-option.svelte-52lifo:active,\n  .select-option.selected.svelte-52lifo:active,\n  .select-option.selected.highlighted.svelte-52lifo:active {background:var(--select-option-pressed-background, #ededed);}.select-option-indicator.svelte-52lifo {display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;box-sizing:border-box;width:var(--select-option-indicator-size, 18px);height:var(--select-option-indicator-size, 18px);border:var(--select-option-indicator-border, 2px solid #757575);border-radius:var(--select-option-indicator-border-radius, var(--radius, 4px));background-color:var(--select-option-indicator-background, transparent);color:var(--select-option-indicator-color, currentColor);transition:background-color 0.15s,\n      border-color 0.15s;}.select-option-indicator.checked.svelte-52lifo {background-color:var(--select-option-indicator-checked-background, #2196f3);border-color:var(--select-option-indicator-checked-border-color, #2196f3);}.select-option-check.svelte-52lifo {display:inline-flex;align-items:center;justify-content:center;width:var(--select-option-indicator-check-size, 12px);height:var(--select-option-indicator-check-size, 12px);color:var(--select-option-indicator-check-color, #ffffff);}.select-option-check.svelte-52lifo svg {width:100%;height:100%;}.select-option-indicator.indeterminate.svelte-52lifo {background-color:var(--select-option-indicator-checked-background, #2196f3);border-color:var(--select-option-indicator-checked-border-color, #2196f3);}.select-option-dash.svelte-52lifo {width:var(--select-option-indicator-dash-size, 10px);height:var(--select-option-indicator-dash-thickness, 2px);border-radius:1px;background-color:var(--select-option-indicator-dash-color, #ffffff);}.select-option.select-all.svelte-52lifo {border-bottom:var(--select-all-border, none);font-weight:var(--select-all-font-weight, inherit);}.select-empty.svelte-52lifo {padding:var(--select-empty-padding, 8px 12px);color:var(--select-empty-color, #999999);font-style:var(--select-empty-font-style, italic);font-size:var(--select-empty-font-size, inherit);}.select-bottom-content.svelte-52lifo {border-top:var(--select-bottom-content-border, none);padding:var(--select-bottom-content-padding, 8px 12px);}.select-trigger.svelte-52lifo .pill {--pill-background: var(--select-pill-background, #e0e0e0);--pill-color: var(--select-pill-color, #333333);--pill-border-radius: var(--select-pill-border-radius, 999px);--pill-padding: var(--select-pill-padding, 2px 8px);--pill-font-size: var(--select-pill-font-size, 13px);}\n\n  /* Ghost hierarchy: transparent, borderless trigger */.select.ghost.svelte-52lifo .select-trigger:where(.svelte-52lifo) {background:var(--select-ghost-trigger-background, transparent);border-color:var(--select-ghost-trigger-border-color, transparent);box-shadow:none;}.select.ghost.svelte-52lifo .select-trigger:where(.svelte-52lifo):hover:not(.disabled:where(.svelte-52lifo) .select-trigger:where(.svelte-52lifo)) {border-color:var(--select-ghost-trigger-hover-border-color, transparent);background:var(--select-ghost-trigger-hover-background, rgba(0, 0, 0, 0.04));}.select.ghost.open.svelte-52lifo .select-trigger:where(.svelte-52lifo) {border-color:var(--select-ghost-trigger-open-border-color, transparent);background:var(--select-ghost-trigger-open-background, rgba(0, 0, 0, 0.06));box-shadow:none;}\n\n  /* Single-select right-edge tick (showSelectedTick) */.select-option.tickable.svelte-52lifo {display:flex;align-items:center;gap:8px;}.select-option.tickable.svelte-52lifo .select-option-label:where(.svelte-52lifo) {flex:1 1 auto;min-width:0;}.select-option-tick.svelte-52lifo {display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--select-option-tick-size, 16px);height:var(--select-option-tick-size, 16px);color:var(--select-option-tick-color, #2563eb);}.select-option-tick.svelte-52lifo svg {width:100%;height:100%;}"
 };
 function Select(e, t) {
 	let n = props_id();
 	push(t, !0), append_styles$1(e, $$css$38);
-	let i = prop(t, "items", 7), a = prop(t, "value", 31, () => proxy([])), o = prop(t, "multiple", 7, !1), s = prop(t, "searchable", 7, !1), c = prop(t, "searchPosition", 7, "trigger"), l = prop(t, "placeholder", 7, ""), u = prop(t, "disabled", 7, !1), f = prop(t, "error", 7, !1), p = prop(t, "errorMessage", 7), h = prop(t, "clearable", 7, !1), S = prop(t, "onclear", 7), C = prop(t, "bottomContent", 7), k = prop(t, "optionIndicator", 7), R = prop(t, "showSelectAll", 7, !1), te = prop(t, "selectAllLabel", 7, "Select all"), ne = prop(t, "showSelectedTick", 7, !1), re = prop(t, "triggerSummary", 7), G = prop(t, "testId", 7), be = prop(t, "itemTestId", 7), Me = prop(t, "onchange", 7), Re = prop(t, "onopen", 7), Ue = prop(t, "onclose", 7), it = prop(t, "classes", 7), at = prop(t, "open", 15, !1), ot = prop(t, "dropdownAlign", 7, "left"), ct = prop(t, "hierarchy", 7, "default"), lt = prop(t, "leftIcon", 7), ut = prop(t, "leftIconTestId", 7), dt = prop(t, "usePortal", 7, !1), ft = prop(t, "name", 7);
-	function pt(e) {
+	let i = prop(t, "items", 7), a = prop(t, "value", 31, () => proxy([])), o = prop(t, "multiple", 7, !1), s = prop(t, "searchable", 7, !1), c = prop(t, "searchPosition", 7, "trigger"), l = prop(t, "placeholder", 7, ""), u = prop(t, "disabled", 7, !1), f = prop(t, "error", 7, !1), p = prop(t, "errorMessage", 7), h = prop(t, "clearable", 7, !1), S = prop(t, "onclear", 7), C = prop(t, "bottomContent", 7), k = prop(t, "optionIndicator", 7), R = prop(t, "showSelectAll", 7, !1), te = prop(t, "selectAllLabel", 7, "Select all"), ne = prop(t, "showSelectedTick", 7, !1), re = prop(t, "triggerSummary", 7), G = prop(t, "testId", 7), be = prop(t, "itemTestId", 7), Me = prop(t, "onchange", 7), Re = prop(t, "onopen", 7), Ue = prop(t, "onclose", 7), it = prop(t, "classes", 7), at = prop(t, "open", 15, !1), ot = prop(t, "dropdownAlign", 7, "left"), ct = prop(t, "placement", 7), lt = prop(t, "hierarchy", 7, "default"), ut = prop(t, "leftIcon", 7), dt = prop(t, "leftIconTestId", 7), ft = prop(t, "usePortal", 7, !1), pt = prop(t, "name", 7);
+	function mt(e) {
 		return e.map((e) => typeof e == "string" ? {
 			id: e,
 			label: e
 		} : e);
 	}
-	let mt = /* @__PURE__ */ user_derived(() => pt(i())), ht = /* @__PURE__ */ state(""), gt = !1, _t = /* @__PURE__ */ state(-1), vt = /* @__PURE__ */ state(null), yt = /* @__PURE__ */ state(null), bt = /* @__PURE__ */ state(null), xt = /* @__PURE__ */ state(null), St = /* @__PURE__ */ state(0), Ct = /* @__PURE__ */ state(0), wt = /* @__PURE__ */ state(0), Tt = 4, Et = `select-listbox-${n}`, Dt = `${Et}-error`, Ot = /* @__PURE__ */ user_derived(() => s() && c() !== "menu"), kt = /* @__PURE__ */ user_derived(() => s() && c() === "menu"), At = /* @__PURE__ */ user_derived(() => f() && typeof p() == "string" && p().trim().length > 0), jt = /* @__PURE__ */ user_derived(() => h() && !u() && a().length > 0);
-	function Mt(e) {
-		e.stopPropagation(), a().length !== 0 && (a([]), Me()?.(a()), S()?.(), s() && get(yt) !== null ? (gt = !0, get(yt).focus(), gt = !1) : get(bt)?.focus());
+	let ht = /* @__PURE__ */ user_derived(() => mt(i())), gt = /* @__PURE__ */ state(""), _t = !1, vt = /* @__PURE__ */ state(-1), yt = /* @__PURE__ */ state(null), bt = /* @__PURE__ */ state(null), xt = /* @__PURE__ */ state(null), St = /* @__PURE__ */ state(null), Ct = /* @__PURE__ */ state(0), wt = /* @__PURE__ */ state(0), Tt = /* @__PURE__ */ state(0), Et = 4, Dt = 8, Ot = /* @__PURE__ */ user_derived(() => ct() ?? (ot() === "right" ? "bottom-right" : "bottom-left")), kt = /* @__PURE__ */ user_derived(() => ct() != null), At = /* @__PURE__ */ state(null), jt = /* @__PURE__ */ user_derived(() => get(Ot) === "auto" ? get(At) ?? "bottom-left" : get(Ot)), Mt = /* @__PURE__ */ user_derived(() => get(Ot) === "auto" && get(At) === null), Nt = /* @__PURE__ */ user_derived(() => get(jt) === "bottom-right" || get(jt) === "top-right" ? "right" : "left");
+	function Pt(e) {
+		if (get(yt) === null || typeof window > "u") return "bottom-left";
+		let t = get(yt).getBoundingClientRect(), n = e.getBoundingClientRect(), i = window.innerWidth, a = window.innerHeight, o = t.left + n.width > i - 8, s = t.right - n.width >= 8, c = o && s ? "right" : "left", l = t.bottom + n.height > a - 8, u = t.top - n.height >= 8;
+		return `${l && u ? "top" : "bottom"}-${c}`;
 	}
-	function Nt(e) {
-		let t = get(mt).find((t) => t.id === e);
+	let It = `select-listbox-${n}`, Lt = `${It}-error`, Rt = /* @__PURE__ */ user_derived(() => s() && c() !== "menu"), zt = /* @__PURE__ */ user_derived(() => s() && c() === "menu"), Bt = /* @__PURE__ */ user_derived(() => f() && typeof p() == "string" && p().trim().length > 0), Ht = /* @__PURE__ */ user_derived(() => h() && !u() && a().length > 0);
+	function Gt(e) {
+		e.stopPropagation(), a().length !== 0 && (a([]), Me()?.(a()), S()?.(), s() && get(bt) !== null ? (_t = !0, get(bt).focus(), _t = !1) : get(xt)?.focus());
+	}
+	function qt(e) {
+		let t = get(ht).find((t) => t.id === e);
 		return typeof t == "object" ? t.label : e;
 	}
-	let Pt = /* @__PURE__ */ user_derived(() => s() && get(ht).length > 0 ? get(mt).filter((e) => e.label.toLowerCase().includes(get(ht).toLowerCase())) : get(mt)), It = /* @__PURE__ */ user_derived(() => o() && R() && get(Pt).length > 0), Lt = /* @__PURE__ */ user_derived(() => get(Pt).filter((e) => a().includes(e.id)).length), Rt = /* @__PURE__ */ user_derived(() => get(Pt).length > 0 && get(Lt) === get(Pt).length), zt = /* @__PURE__ */ user_derived(() => get(Lt) > 0 && get(Lt) < get(Pt).length), Bt = /* @__PURE__ */ user_derived(() => get(It) ? [{ kind: "select-all" }, ...get(Pt).map((e) => ({
+	let Zt = /* @__PURE__ */ user_derived(() => s() && get(gt).length > 0 ? get(ht).filter((e) => e.label.toLowerCase().includes(get(gt).toLowerCase())) : get(ht)), Qt = /* @__PURE__ */ user_derived(() => o() && R() && get(Zt).length > 0), $t = /* @__PURE__ */ user_derived(() => get(Zt).filter((e) => a().includes(e.id)).length), en = /* @__PURE__ */ user_derived(() => get(Zt).length > 0 && get($t) === get(Zt).length), tn = /* @__PURE__ */ user_derived(() => get($t) > 0 && get($t) < get(Zt).length), nn = /* @__PURE__ */ user_derived(() => get(Qt) ? [{ kind: "select-all" }, ...get(Zt).map((e) => ({
 		kind: "item",
 		item: e
-	}))] : get(Pt).map((e) => ({
+	}))] : get(Zt).map((e) => ({
 		kind: "item",
 		item: e
-	}))), Ht = /* @__PURE__ */ user_derived(() => {
+	}))), rn = /* @__PURE__ */ user_derived(() => {
 		let e = a().at(0);
-		return typeof e == "string" ? Nt(e) : "";
-	}), Gt = /* @__PURE__ */ user_derived(() => get(_t) >= 0 ? `${Et}-option-${get(_t)}` : null), qt = /* @__PURE__ */ user_derived(() => at() && get(Ht).length > 0 ? get(Ht) : l());
+		return typeof e == "string" ? qt(e) : "";
+	}), an = /* @__PURE__ */ user_derived(() => get(vt) >= 0 ? `${It}-option-${get(vt)}` : null), on = /* @__PURE__ */ user_derived(() => at() && get(rn).length > 0 ? get(rn) : l());
 	user_effect(() => {
-		if (!dt() || !at() || typeof window > "u") return;
+		if (!ft() || !at() || typeof window > "u") return;
 		let e = null, t = () => {
 			e === null && (e = requestAnimationFrame(() => {
-				e = null, set(wt, get(wt) + 1);
+				e = null, set(Tt, get(Tt) + 1);
 			}));
 		};
 		return window.addEventListener("scroll", t, {
@@ -17458,18 +17464,19 @@ function Select(e, t) {
 			window.removeEventListener("scroll", t, { capture: !0 }), window.removeEventListener("resize", t), e !== null && cancelAnimationFrame(e);
 		};
 	});
-	let Zt = (e) => {
-		if (dt()) return document.body.appendChild(e), { destroy: () => e.remove() };
-	}, Qt = /* @__PURE__ */ user_derived(() => {
-		if (!dt() || !at() || get(bt) === null) return "";
-		get(wt);
-		let e = get(bt).getBoundingClientRect(), t = typeof window > "u" ? {
+	let sn = (e) => {
+		if (ft()) return document.body.appendChild(e), { destroy: () => e.remove() };
+	}, cn = /* @__PURE__ */ user_derived(() => {
+		if (!ft() || !at() || get(xt) === null) return null;
+		get(Tt);
+		let e = get(xt).getBoundingClientRect(), t = typeof window > "u" ? {
 			width: Infinity,
 			height: Infinity
 		} : {
 			width: window.innerWidth,
 			height: window.innerHeight
-		}, n = computeSelectDropdownPosition({
+		};
+		return computeSelectDropdownPosition({
 			trigger: {
 				left: e.left,
 				right: e.right,
@@ -17478,118 +17485,130 @@ function Select(e, t) {
 				width: e.width
 			},
 			dropdown: {
-				width: get(St),
-				height: get(Ct)
+				width: get(Ct),
+				height: get(wt)
 			},
 			viewport: t,
-			align: ot(),
+			align: get(Nt),
+			vertical: get(kt) ? get(jt) === "top-left" || get(jt) === "top-right" ? "top" : "bottom" : "auto",
 			gap: 4
-		}), i = n.width === null ? "" : `width:${n.width}px;`;
-		return `top:${n.top}px;left:${n.left}px;min-width:${n.minWidth}px;${i}`;
-	});
-	async function $t() {
-		u() || at() || (at(!0), Re()?.(), set(_t, -1), set(ht, ""), get(Ot) && (await tick(), get(yt) !== null && get(yt).focus()));
+		});
+	}), ln = /* @__PURE__ */ user_derived(() => {
+		let e = get(cn);
+		if (e === null) return "";
+		let t = e.width === null ? "" : `width:${e.width}px;`;
+		return `top:${e.top}px;left:${e.left}px;min-width:${e.minWidth}px;${t}`;
+	}), un = /* @__PURE__ */ user_derived(() => {
+		let e = get(cn);
+		return e === null ? get(jt) : e.flippedUp ? get(Nt) === "right" ? "top-right" : "top-left" : get(Nt) === "right" ? "bottom-right" : "bottom-left";
+	}), dn = (e) => (get(Ot) === "auto" && tick().then(() => {
+		set(At, Pt(e), !0);
+	}), { destroy: () => {
+		set(At, null);
+	} });
+	async function fn() {
+		u() || at() || (at(!0), Re()?.(), set(vt, -1), set(gt, ""), get(Rt) && (await tick(), get(bt) !== null && get(bt).focus()));
 	}
-	function en() {
-		at(!1), Ue()?.(), set(ht, ""), set(_t, -1);
+	function pn() {
+		at(!1), Ue()?.(), set(gt, ""), set(vt, -1);
 	}
-	function tn(e) {
-		u() || (o() ? a(a().includes(e) ? a().filter((t) => t !== e) : [...a(), e]) : (a([e]), en(), get(kt) && get(bt)?.focus()), Me()?.(a()));
+	function mn(e) {
+		u() || (o() ? a(a().includes(e) ? a().filter((t) => t !== e) : [...a(), e]) : (a([e]), pn(), get(zt) && get(xt)?.focus()), Me()?.(a()));
 	}
-	function nn(e) {
+	function hn(e) {
 		u() || (a(a().filter((t) => t !== e)), Me()?.(a()));
 	}
-	function rn() {
-		u() || (get(Rt) ? a(a().filter((e) => !get(Pt).some((t) => t.id === e))) : a([...new Set([...a(), ...get(Pt).map((e) => e.id)])]), Me()?.(a()));
-	}
-	function an() {
-		if (get(_t) < 0 || get(_t) >= get(Bt).length) return;
-		let e = get(Bt).at(get(_t));
-		typeof e != "object" || !e || (e.kind === "select-all" ? rn() : tn(e.item.id));
+	function gn() {
+		u() || (get(en) ? a(a().filter((e) => !get(Zt).some((t) => t.id === e))) : a([...new Set([...a(), ...get(Zt).map((e) => e.id)])]), Me()?.(a()));
 	}
-	async function on(e) {
-		let t = get(_t) + e;
-		if (!(t < 0 || t >= get(Bt).length) && (set(_t, t), await tick(), get(xt) !== null)) {
-			let e = get(xt).querySelector(".select-option.highlighted");
+	function _n() {
+		if (get(vt) < 0 || get(vt) >= get(nn).length) return;
+		let e = get(nn).at(get(vt));
+		typeof e != "object" || !e || (e.kind === "select-all" ? gn() : mn(e.item.id));
+	}
+	async function vn(e) {
+		let t = get(vt) + e;
+		if (!(t < 0 || t >= get(nn).length) && (set(vt, t), await tick(), get(St) !== null)) {
+			let e = get(St).querySelector(".select-option.highlighted");
 			e instanceof HTMLElement && e.scrollIntoView({ block: "nearest" });
 		}
 	}
-	function sn(e) {
+	function yn(e) {
 		if (e.target instanceof HTMLInputElement) {
-			at() || $t();
+			at() || fn();
 			return;
 		}
-		at() ? en() : $t();
+		at() ? pn() : fn();
 	}
-	let cn = "a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])";
-	function ln() {
-		return get(xt) === null ? [] : [...get(xt).querySelectorAll(cn)];
+	let bn = "a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])";
+	function xn() {
+		return get(St) === null ? [] : [...get(St).querySelectorAll(bn)];
 	}
-	function un() {
-		if (get(bt) === null || typeof document > "u") return;
-		let e = [...document.querySelectorAll(cn)].filter((e) => e.closest(".select-dropdown") === null);
-		e.at(e.indexOf(get(bt)) + 1)?.focus();
+	function Sn() {
+		if (get(xt) === null || typeof document > "u") return;
+		let e = [...document.querySelectorAll(bn)].filter((e) => e.closest(".select-dropdown") === null);
+		e.at(e.indexOf(get(xt)) + 1)?.focus();
 	}
-	function dn(e) {
+	function Cn(e) {
 		if (!u()) switch (e.key) {
 			case "Enter":
-				e.preventDefault(), at() ? an() : $t();
+				e.preventDefault(), at() ? _n() : fn();
 				break;
 			case " ":
-				e.target instanceof HTMLInputElement || (e.preventDefault(), at() ? an() : $t());
+				e.target instanceof HTMLInputElement || (e.preventDefault(), at() ? _n() : fn());
 				break;
 			case "ArrowDown":
-				e.preventDefault(), at() ? on(1) : $t();
+				e.preventDefault(), at() ? vn(1) : fn();
 				break;
 			case "ArrowUp":
-				e.preventDefault(), on(-1);
+				e.preventDefault(), vn(-1);
 				break;
 			case "Escape":
-				at() && (en(), !get(Ot) && get(bt) !== null && get(bt).focus());
+				at() && (pn(), !get(Rt) && get(xt) !== null && get(xt).focus());
 				break;
 			case "Backspace":
-				if (o() && get(ht) === "" && a().length > 0) {
+				if (o() && get(gt) === "" && a().length > 0) {
 					let e = a().at(-1);
-					typeof e == "string" && nn(e);
+					typeof e == "string" && hn(e);
 				}
 				break;
 			case "Tab": {
 				if (!at()) break;
-				if (!get(kt)) {
-					en();
+				if (!get(zt)) {
+					pn();
 					break;
 				}
 				let t = document.activeElement;
 				if (e.shiftKey) {
-					t === get(bt) ? en() : t === get(yt) && (e.preventDefault(), get(bt)?.focus());
+					t === get(xt) ? pn() : t === get(bt) && (e.preventDefault(), get(xt)?.focus());
 					break;
 				}
-				if (t === get(bt)) {
-					e.preventDefault(), get(yt)?.focus();
+				if (t === get(xt)) {
+					e.preventDefault(), get(bt)?.focus();
 					break;
 				}
-				t === ln().at(-1) && (e.preventDefault(), en(), un());
+				t === xn().at(-1) && (e.preventDefault(), pn(), Sn());
 				break;
 			}
 		}
 	}
-	function fn(e) {
-		e.target !== get(yt) && dn(e);
+	function wn(e) {
+		e.target !== get(bt) && Cn(e);
 	}
-	let pn = (e) => (e.addEventListener("keydown", fn), { destroy: () => e.removeEventListener("keydown", fn) });
-	function mn(e) {
-		e.target instanceof HTMLInputElement && (set(ht, e.target.value, !0), at() || $t(), set(_t, -1));
+	let Tn = (e) => (e.addEventListener("keydown", wn), { destroy: () => e.removeEventListener("keydown", wn) });
+	function En(e) {
+		e.target instanceof HTMLInputElement && (set(gt, e.target.value, !0), at() || fn(), set(vt, -1));
 	}
-	function hn() {
-		!at() && !gt && $t();
+	function Dn() {
+		!at() && !_t && fn();
 	}
-	function gn(e) {
-		e.target instanceof Node && get(vt) !== null && !get(vt).contains(e.target) && !(get(xt) !== null && get(xt).contains(e.target)) && en();
+	function On(e) {
+		e.target instanceof Node && get(yt) !== null && !get(yt).contains(e.target) && !(get(St) !== null && get(St).contains(e.target)) && pn();
 	}
-	onMount(() => (document.addEventListener("click", gn), () => {
-		document.removeEventListener("click", gn), at() && Ue()?.();
+	onMount(() => (document.addEventListener("click", On), () => {
+		document.removeEventListener("click", On), at() && Ue()?.();
 	}));
-	var _n = {
+	var kn = {
 		get items() {
 			return i();
 		},
@@ -17740,38 +17759,44 @@ function Select(e, t) {
 		set dropdownAlign(e = "left") {
 			ot(e), flushSync();
 		},
-		get hierarchy() {
+		get placement() {
 			return ct();
 		},
-		set hierarchy(e = "default") {
+		set placement(e) {
 			ct(e), flushSync();
 		},
-		get leftIcon() {
+		get hierarchy() {
 			return lt();
 		},
-		set leftIcon(e) {
+		set hierarchy(e = "default") {
 			lt(e), flushSync();
 		},
-		get leftIconTestId() {
+		get leftIcon() {
 			return ut();
 		},
-		set leftIconTestId(e) {
+		set leftIcon(e) {
 			ut(e), flushSync();
 		},
-		get usePortal() {
+		get leftIconTestId() {
 			return dt();
 		},
-		set usePortal(e = !1) {
+		set leftIconTestId(e) {
 			dt(e), flushSync();
 		},
-		get name() {
+		get usePortal() {
 			return ft();
 		},
-		set name(e) {
+		set usePortal(e = !1) {
 			ft(e), flushSync();
+		},
+		get name() {
+			return pt();
+		},
+		set name(e) {
+			pt(e), flushSync();
 		}
-	}, vn = root_17$5();
-	attribute_effect(vn, () => ({
+	}, An = root_17$5();
+	attribute_effect(An, () => ({
 		class: `select ${it() ?? "" ?? ""}`,
 		...typeof G() == "string" ? {
 			"data-pw": G(),
@@ -17781,7 +17806,7 @@ function Select(e, t) {
 			open: at(),
 			disabled: u(),
 			error: f(),
-			ghost: ct() === "ghost"
+			ghost: lt() === "ghost"
 		}
 	}), void 0, void 0, void 0, "svelte-52lifo");
 	{
@@ -17790,33 +17815,33 @@ function Select(e, t) {
 				append(e, root$36());
 			}, s = (e) => {
 				var t = comment();
-				each(first_child(t), 19, () => get(Bt), (e) => e.kind === "select-all" ? "select-all" : e.item.id, (e, t, n) => {
+				each(first_child(t), 19, () => get(nn), (e) => e.kind === "select-all" ? "select-all" : e.item.id, (e, t, n) => {
 					var i = comment(), s = first_child(i), c = (e) => {
-						var t = root_4$19(), i = () => set(_t, get(n), !0);
+						var t = root_4$19(), i = () => set(vt, get(n), !0);
 						attribute_effect(t, () => ({
 							class: "select-option select-all",
 							role: "option",
-							id: `${Et}-option-${get(n)}`,
-							"aria-selected": get(Rt),
-							"aria-label": get(zt) ? `${te()}, ${get(Lt)} of ${get(Pt).length} selected` : te(),
+							id: `${It}-option-${get(n)}`,
+							"aria-selected": get(en),
+							"aria-label": get(tn) ? `${te()}, ${get($t)} of ${get(Zt).length} selected` : te(),
 							tabindex: "-1",
 							...typeof G() == "string" ? {
 								"data-pw": `${G()}-select-all`,
 								testID: `${G()}-select-all`
 							} : {},
-							onclick: rn,
+							onclick: gn,
 							onmouseenter: i,
 							[CLASS]: {
 								multi: o(),
-								selected: get(Rt),
-								highlighted: get(n) === get(_t)
+								selected: get(en),
+								highlighted: get(n) === get(vt)
 							}
 						}), void 0, void 0, void 0, "svelte-52lifo");
 						var a = child(t), s = (e) => {
 							var t = comment();
 							snippet(first_child(t), k, () => ({
-								checked: get(Rt),
-								indeterminate: get(zt)
+								checked: get(en),
+								indeterminate: get(tn)
 							})), append(e, t);
 						}, c = (e) => {
 							var t = root_3$24();
@@ -17831,12 +17856,12 @@ function Select(e, t) {
 								}), append(e, t);
 							};
 							if_block(i, (e) => {
-								get(Rt) ? e(a) : get(zt) && e(o, 1);
+								get(en) ? e(a) : get(tn) && e(o, 1);
 							}), reset(t), template_effect(() => {
 								n = set_class(t, 1, "select-option-indicator svelte-52lifo", null, n, {
-									checked: get(Rt),
-									indeterminate: get(zt)
-								}), set_attribute(t, "data-checked", get(Rt) ? "true" : "false"), set_attribute(t, "data-pw", typeof G() == "string" ? `${G()}-select-all-indicator` : null), set_attribute(t, "testid", typeof G() == "string" ? `${G()}-select-all-indicator` : null);
+									checked: get(en),
+									indeterminate: get(tn)
+								}), set_attribute(t, "data-checked", get(en) ? "true" : "false"), set_attribute(t, "data-pw", typeof G() == "string" ? `${G()}-select-all-indicator` : null), set_attribute(t, "testid", typeof G() == "string" ? `${G()}-select-all-indicator` : null);
 							}), append(e, t);
 						};
 						if_block(a, (e) => {
@@ -17845,11 +17870,11 @@ function Select(e, t) {
 						var l = sibling(a);
 						reset(t), template_effect(() => set_text(l, ` ${te() ?? ""}`)), append(e, t);
 					}, l = (e) => {
-						var i = root_6$16(), s = () => tn(get(t).item.id), c = () => set(_t, get(n), !0);
+						var i = root_6$16(), s = () => mn(get(t).item.id), c = () => set(vt, get(n), !0);
 						attribute_effect(i, (e, i) => ({
 							class: "select-option",
 							role: "option",
-							id: `${Et}-option-${get(n)}`,
+							id: `${It}-option-${get(n)}`,
 							"aria-selected": e,
 							tabindex: "-1",
 							...typeof get(t).item.testId == "string" ? {
@@ -17869,7 +17894,7 @@ function Select(e, t) {
 							multi: o(),
 							tickable: ne() && !o(),
 							selected: a().includes(get(t).item.id),
-							highlighted: get(n) === get(_t)
+							highlighted: get(n) === get(vt)
 						})], void 0, void 0, "svelte-52lifo");
 						var l = child(i), u = (e) => {
 							var n = comment(), i = first_child(n), o = (e) => {
@@ -17932,79 +17957,79 @@ function Select(e, t) {
 				}), append(e, t);
 			};
 			if_block(n, (e) => {
-				get(Pt).length === 0 ? e(i) : e(s, -1);
+				get(Zt).length === 0 ? e(i) : e(s, -1);
 			});
 			var c = sibling(n, 2), l = (e) => {
 				var t = root_7$15();
 				snippet(child(t), C), reset(t), append(e, t);
 			};
 			if_block(c, (e) => {
-				typeof C() == "function" && !get(kt) && e(l);
+				typeof C() == "function" && !get(zt) && e(l);
 			}), append(e, t);
 		};
-		var yn = child(vn), bn = (e) => {
+		var jn = child(An), Mn = (e) => {
 			var t = comment();
 			each(first_child(t), 16, a, (e) => e, (e, t) => {
 				var n = root_9$11();
 				remove_input_defaults(n), template_effect(() => {
-					set_attribute(n, "name", ft()), set_value(n, t), n.disabled = u();
+					set_attribute(n, "name", pt()), set_value(n, t), n.disabled = u();
 				}), append(e, n);
 			}), append(e, t);
 		};
-		if_block(yn, (e) => {
-			typeof ft() == "string" && ft().length > 0 && e(bn);
+		if_block(jn, (e) => {
+			typeof pt() == "string" && pt().length > 0 && e(Mn);
 		});
-		var xn = sibling(yn, 2);
+		var Nn = sibling(jn, 2);
 		let t;
-		var Sn = child(xn);
-		attribute_effect(Sn, () => ({
+		var Pn = child(Nn);
+		attribute_effect(Pn, () => ({
 			class: "select-trigger",
-			onclick: sn,
-			onkeydown: dn,
+			onclick: yn,
+			onkeydown: Cn,
 			role: "combobox",
 			"aria-expanded": at(),
 			"aria-haspopup": "listbox",
-			"aria-controls": Et,
+			"aria-controls": It,
 			"aria-invalid": f() ? "true" : null,
-			"aria-describedby": get(At) ? Dt : null,
-			...get(Gt) === null ? {} : { "aria-activedescendant": get(Gt) },
-			tabindex: u() || get(Ot) ? -1 : 0
+			"aria-describedby": get(Bt) ? Lt : null,
+			...get(an) === null ? {} : { "aria-activedescendant": get(an) },
+			tabindex: u() || get(Rt) ? -1 : 0
 		}), void 0, void 0, void 0, "svelte-52lifo");
-		var Cn = child(Sn), wn = (e) => {
+		var Fn = child(Pn), In = (e) => {
 			Img(e, spread_props({
 				inlineSvg: !0,
 				get src() {
-					return lt();
+					return ut();
 				},
 				alt: "",
 				fallback: "",
 				classes: "select-left-icon"
-			}, () => typeof ut() == "string" ? { testId: ut() } : {}));
+			}, () => typeof dt() == "string" ? { testId: dt() } : {}));
 		};
-		if_block(Cn, (e) => {
-			typeof lt() == "string" && lt().length > 0 && e(wn);
+		if_block(Fn, (e) => {
+			typeof ut() == "string" && ut().length > 0 && e(In);
 		});
-		var Tn = sibling(Cn, 2), En = (e) => {
+		var Ln = sibling(Fn, 2), Rn = (e) => {
 			var t = comment(), n = first_child(t), i = (e) => {
 				var t = root_8$14(), n = first_child(t);
 				snippet(n, re, () => ({
 					value: a(),
-					items: get(mt)
+					items: get(ht)
 				}));
 				var i = sibling(n, 2), o = (e) => {
 					var t = root_10$10();
-					remove_input_defaults(t), bind_this(t, (e) => set(yt, e), () => get(yt)), template_effect(() => {
-						set_value(t, get(ht)), set_attribute(t, "placeholder", a().length === 0 ? l() : ""), t.disabled = u(), set_attribute(t, "aria-invalid", f() ? "true" : null), set_attribute(t, "aria-describedby", get(At) ? Dt : null), set_attribute(t, "tabindex", u() ? -1 : 0), set_attribute(t, "data-pw", typeof G() == "string" ? `${G()}-search` : null), set_attribute(t, "testid", typeof G() == "string" ? `${G()}-search` : null);
-					}), delegated("input", t, mn), event("focus", t, hn), append(e, t);
+					remove_input_defaults(t), bind_this(t, (e) => set(bt, e), () => get(bt)), template_effect(() => {
+						set_value(t, get(gt)), set_attribute(t, "placeholder", a().length === 0 ? l() : ""), t.disabled = u(), set_attribute(t, "aria-invalid", f() ? "true" : null), set_attribute(t, "aria-describedby", get(Bt) ? Lt : null), set_attribute(t, "tabindex", u() ? -1 : 0), set_attribute(t, "data-pw", typeof G() == "string" ? `${G()}-search` : null), set_attribute(t, "testid", typeof G() == "string" ? `${G()}-search` : null);
+					}), delegated("input", t, En), event("focus", t, Dn), append(e, t);
 				};
 				if_block(i, (e) => {
-					get(Ot) && e(o);
+					get(Rt) && e(o);
 				}), append(e, t);
 			}, o = (e) => {
 				var t = root_8$14(), n = first_child(t);
 				each(n, 16, a, (e) => e, (e, t) => {
 					{
-						let n = /* @__PURE__ */ user_derived(() => Nt(t));
+						let n = /* @__PURE__ */ user_derived(() => qt(t));
 						Pill(e, spread_props({
 							get text() {
 								return get(n);
@@ -18013,68 +18038,68 @@ function Select(e, t) {
 							get disabled() {
 								return u();
 							},
-							ondismiss: () => nn(t)
+							ondismiss: () => hn(t)
 						}, () => typeof G() == "string" ? { testId: `${G()}-pill-${t}` } : {}));
 					}
 				});
 				var i = sibling(n, 2), o = (e) => {
 					var t = root_10$10();
-					remove_input_defaults(t), bind_this(t, (e) => set(yt, e), () => get(yt)), template_effect(() => {
-						set_value(t, get(ht)), set_attribute(t, "placeholder", a().length === 0 ? l() : ""), t.disabled = u(), set_attribute(t, "aria-invalid", f() ? "true" : null), set_attribute(t, "aria-describedby", get(At) ? Dt : null), set_attribute(t, "tabindex", u() ? -1 : 0), set_attribute(t, "data-pw", typeof G() == "string" ? `${G()}-search` : null), set_attribute(t, "testid", typeof G() == "string" ? `${G()}-search` : null);
-					}), delegated("input", t, mn), event("focus", t, hn), append(e, t);
+					remove_input_defaults(t), bind_this(t, (e) => set(bt, e), () => get(bt)), template_effect(() => {
+						set_value(t, get(gt)), set_attribute(t, "placeholder", a().length === 0 ? l() : ""), t.disabled = u(), set_attribute(t, "aria-invalid", f() ? "true" : null), set_attribute(t, "aria-describedby", get(Bt) ? Lt : null), set_attribute(t, "tabindex", u() ? -1 : 0), set_attribute(t, "data-pw", typeof G() == "string" ? `${G()}-search` : null), set_attribute(t, "testid", typeof G() == "string" ? `${G()}-search` : null);
+					}), delegated("input", t, En), event("focus", t, Dn), append(e, t);
 				}, s = (e) => {
 					var t = root_11$9(), n = child(t, !0);
 					reset(t), template_effect(() => set_text(n, l())), append(e, t);
 				};
 				if_block(i, (e) => {
-					get(Ot) ? e(o) : a().length === 0 && e(s, 1);
+					get(Rt) ? e(o) : a().length === 0 && e(s, 1);
 				}), append(e, t);
 			};
 			if_block(n, (e) => {
 				typeof re() == "function" ? e(i) : e(o, -1);
 			}), append(e, t);
-		}, Dn = (e) => {
+		}, zn = (e) => {
 			var t = root_10$10();
-			remove_input_defaults(t), bind_this(t, (e) => set(yt, e), () => get(yt)), template_effect(() => {
-				set_value(t, at() ? get(ht) : get(Ht)), set_attribute(t, "placeholder", get(qt)), t.disabled = u(), set_attribute(t, "aria-invalid", f() ? "true" : null), set_attribute(t, "aria-describedby", get(At) ? Dt : null), set_attribute(t, "tabindex", u() ? -1 : 0), set_attribute(t, "data-pw", typeof G() == "string" ? `${G()}-search` : null), set_attribute(t, "testid", typeof G() == "string" ? `${G()}-search` : null);
-			}), delegated("input", t, mn), event("focus", t, hn), append(e, t);
-		}, On = (e) => {
+			remove_input_defaults(t), bind_this(t, (e) => set(bt, e), () => get(bt)), template_effect(() => {
+				set_value(t, at() ? get(gt) : get(rn)), set_attribute(t, "placeholder", get(on)), t.disabled = u(), set_attribute(t, "aria-invalid", f() ? "true" : null), set_attribute(t, "aria-describedby", get(Bt) ? Lt : null), set_attribute(t, "tabindex", u() ? -1 : 0), set_attribute(t, "data-pw", typeof G() == "string" ? `${G()}-search` : null), set_attribute(t, "testid", typeof G() == "string" ? `${G()}-search` : null);
+			}), delegated("input", t, En), event("focus", t, Dn), append(e, t);
+		}, Bn = (e) => {
 			var t = root_12$8(), n = child(t, !0);
 			reset(t), template_effect(() => {
-				set_class(t, 1, clsx(get(Ht).length > 0 ? "select-value" : "select-placeholder"), "svelte-52lifo"), set_text(n, get(Ht).length > 0 ? get(Ht) : l());
+				set_class(t, 1, clsx(get(rn).length > 0 ? "select-value" : "select-placeholder"), "svelte-52lifo"), set_text(n, get(rn).length > 0 ? get(rn) : l());
 			}), append(e, t);
 		};
-		if_block(Tn, (e) => {
-			o() ? e(En) : get(Ot) ? e(Dn, 1) : e(On, -1);
+		if_block(Ln, (e) => {
+			o() ? e(Rn) : get(Rt) ? e(zn, 1) : e(Bn, -1);
 		});
-		var kn = sibling(Tn, 2);
-		html(kn, () => chevron_down_default, !0), reset(kn), reset(Sn), bind_this(Sn, (e) => set(bt, e), () => get(bt));
-		var An = sibling(Sn, 2), jn = (e) => {
+		var Vn = sibling(Ln, 2);
+		html(Vn, () => chevron_down_default, !0), reset(Vn), reset(Pn), bind_this(Pn, (e) => set(xt, e), () => get(xt));
+		var Hn = sibling(Pn, 2), Un = (e) => {
 			var t = root_13$7();
 			template_effect(() => {
 				set_attribute(t, "data-pw", typeof G() == "string" ? `${G()}-clear` : null), set_attribute(t, "testid", typeof G() == "string" ? `${G()}-clear` : null);
 			}), delegated("keydown", t, (e) => {
 				(e.key === "Enter" || e.key === " ") && e.stopPropagation();
-			}), delegated("click", t, Mt), append(e, t);
+			}), delegated("click", t, Gt), append(e, t);
 		};
-		if_block(An, (e) => {
-			get(jt) && e(jn);
-		}), reset(xn);
-		var Mn = sibling(xn, 2), Nn = (e) => {
+		if_block(Hn, (e) => {
+			get(Ht) && e(Un);
+		}), reset(Nn);
+		var Wn = sibling(Nn, 2), Gn = (e) => {
 			var t = root_14$7(), n = child(t, !0);
 			reset(t), template_effect(() => {
-				set_attribute(t, "id", Dt), set_attribute(t, "data-pw", typeof G() == "string" ? `${G()}-error-message` : null), set_attribute(t, "testid", typeof G() == "string" ? `${G()}-error-message` : null), set_text(n, p());
+				set_attribute(t, "id", Lt), set_attribute(t, "data-pw", typeof G() == "string" ? `${G()}-error-message` : null), set_attribute(t, "testid", typeof G() == "string" ? `${G()}-error-message` : null), set_text(n, p());
 			}), append(e, t);
 		};
-		if_block(Mn, (e) => {
-			get(At) && e(Nn);
+		if_block(Wn, (e) => {
+			get(Bt) && e(Gn);
 		});
-		var Pn = sibling(Mn, 2), Fn = (t) => {
+		var Kn = sibling(Wn, 2), qn = (t) => {
 			var n = comment(), i = first_child(n), a = (t) => {
 				var n = root_15$7();
 				let i;
 				var a = child(n);
-				remove_input_defaults(a), bind_this(a, (e) => set(yt, e), () => get(yt));
+				remove_input_defaults(a), bind_this(a, (e) => set(bt, e), () => get(bt));
 				var s = sibling(a, 2);
 				e(child(s)), reset(s);
 				var c = sibling(s, 2), u = (e) => {
@@ -18083,31 +18108,35 @@ function Select(e, t) {
 				};
 				if_block(c, (e) => {
 					typeof C() == "function" && e(u);
-				}), reset(n), bind_this(n, (e) => set(xt, e), () => get(xt)), effect(() => bind_element_size(n, "clientWidth", (e) => set(St, e))), effect(() => bind_element_size(n, "clientHeight", (e) => set(Ct, e))), action(n, (e) => pn?.(e)), action(n, (e) => Zt?.(e)), template_effect(() => {
+				}), reset(n), action(n, (e) => dn?.(e)), bind_this(n, (e) => set(St, e), () => get(St)), effect(() => bind_element_size(n, "clientWidth", (e) => set(Ct, e))), effect(() => bind_element_size(n, "clientHeight", (e) => set(wt, e))), action(n, (e) => Tn?.(e)), action(n, (e) => sn?.(e)), template_effect(() => {
 					i = set_class(n, 1, "select-dropdown svelte-52lifo", null, i, {
-						"select-dropdown-right": ot() === "right",
-						"select-dropdown-portal": dt()
-					}), set_style(n, get(Qt)), set_value(a, get(ht)), set_attribute(a, "placeholder", l().length > 0 ? l() : "Search"), set_attribute(a, "aria-controls", Et), set_attribute(a, "data-pw", typeof G() == "string" ? `${G()}-menu-search` : null), set_attribute(a, "testid", typeof G() == "string" ? `${G()}-menu-search` : null), set_attribute(s, "id", Et), set_attribute(s, "aria-multiselectable", o());
-				}), delegated("input", a, mn), delegated("keydown", a, dn), append(t, n);
+						"select-dropdown-right": get(Nt) === "right",
+						"select-dropdown-up": !ft() && (get(un) === "top-left" || get(un) === "top-right"),
+						"select-dropdown-measuring": get(Mt),
+						"select-dropdown-portal": ft()
+					}), set_attribute(n, "data-placement", get(un)), set_style(n, get(ln)), set_value(a, get(gt)), set_attribute(a, "placeholder", l().length > 0 ? l() : "Search"), set_attribute(a, "aria-controls", It), set_attribute(a, "data-pw", typeof G() == "string" ? `${G()}-menu-search` : null), set_attribute(a, "testid", typeof G() == "string" ? `${G()}-menu-search` : null), set_attribute(s, "id", It), set_attribute(s, "aria-multiselectable", o());
+				}), delegated("input", a, En), delegated("keydown", a, Cn), append(t, n);
 			}, s = (t) => {
 				var n = root_16$6();
 				let i;
-				e(child(n)), reset(n), bind_this(n, (e) => set(xt, e), () => get(xt)), effect(() => bind_element_size(n, "clientWidth", (e) => set(St, e))), effect(() => bind_element_size(n, "clientHeight", (e) => set(Ct, e))), action(n, (e) => Zt?.(e)), template_effect(() => {
+				e(child(n)), reset(n), action(n, (e) => dn?.(e)), bind_this(n, (e) => set(St, e), () => get(St)), effect(() => bind_element_size(n, "clientWidth", (e) => set(Ct, e))), effect(() => bind_element_size(n, "clientHeight", (e) => set(wt, e))), action(n, (e) => sn?.(e)), template_effect(() => {
 					i = set_class(n, 1, "select-dropdown svelte-52lifo", null, i, {
-						"select-dropdown-right": ot() === "right",
-						"select-dropdown-portal": dt()
-					}), set_attribute(n, "id", Et), set_attribute(n, "aria-multiselectable", o()), set_style(n, get(Qt));
+						"select-dropdown-right": get(Nt) === "right",
+						"select-dropdown-up": !ft() && (get(un) === "top-left" || get(un) === "top-right"),
+						"select-dropdown-measuring": get(Mt),
+						"select-dropdown-portal": ft()
+					}), set_attribute(n, "data-placement", get(un)), set_attribute(n, "id", It), set_attribute(n, "aria-multiselectable", o()), set_style(n, get(ln));
 				}), append(t, n);
 			};
 			if_block(i, (e) => {
-				get(kt) ? e(a) : e(s, -1);
+				get(zt) ? e(a) : e(s, -1);
 			}), append(t, n);
 		};
-		if_block(Pn, (e) => {
-			at() && !u() && e(Fn);
-		}), reset(vn), bind_this(vn, (e) => set(vt, e), () => get(vt)), template_effect(() => t = set_class(xn, 1, "select-control svelte-52lifo", null, t, { "has-clear": get(jt) }));
+		if_block(Kn, (e) => {
+			at() && !u() && e(qn);
+		}), reset(An), bind_this(An, (e) => set(yt, e), () => get(yt)), template_effect(() => t = set_class(Nn, 1, "select-control svelte-52lifo", null, t, { "has-clear": get(Ht) }));
 	}
-	return append(e, vn), pop(_n);
+	return append(e, An), pop(kn);
 }
 delegate([
 	"input",
@@ -18139,6 +18168,7 @@ delegate([
 	classes: {},
 	open: {},
 	dropdownAlign: {},
+	placement: {},
 	hierarchy: {},
 	leftIcon: {},
 	leftIconTestId: {},
@@ -18216,6 +18246,10 @@ customElements.define("sui-select", create_custom_element(Select_wc, {
 		attribute: "dropdown-align",
 		type: "String"
 	},
+	placement: {
+		attribute: "placement",
+		type: "String"
+	},
 	showSelectAll: {
 		attribute: "show-select-all",
 		reflect: !0,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@juspay/svelte-ui-components",
-  "version": "4.26.0",
+  "version": "4.27.1",
   "description": "A themeable Svelte 5 UI component library with CSS custom property driven styling",
   "keywords": [
     "svelte",