npm - @data-slot/select - Versions diffs - 0.2.14 - Mend

@data-slot/select 0.2.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/README.md ADDED Viewed

@@ -0,0 +1,198 @@
+# @data-slot/select
+A headless, accessible select component for choosing a single value from a dropdown list.
+## Installation
+```bash
+npm install @data-slot/select
+```
+## Usage
+### HTML Structure
+```html
+<div data-slot="select" data-placeholder="Choose a fruit...">
+  <button data-slot="select-trigger">
+    <span data-slot="select-value"></span>
+    <!-- Add your own chevron icon -->
+  </button>
+  <div data-slot="select-content" hidden>
+    <div data-slot="select-group">
+      <div data-slot="select-label">Fruits</div>
+      <div data-slot="select-item" data-value="apple">Apple</div>
+      <div data-slot="select-item" data-value="banana">Banana</div>
+      <div data-slot="select-item" data-value="orange">Orange</div>
+    </div>
+    <div data-slot="select-separator"></div>
+    <div data-slot="select-item" data-value="other">Other</div>
+  </div>
+</div>
+```
+### JavaScript
+```javascript
+import { create, createSelect } from '@data-slot/select';
+// Auto-discover and bind all selects
+const controllers = create();
+// Or bind a specific element
+const root = document.querySelector('[data-slot="select"]');
+const controller = createSelect(root, {
+  defaultValue: 'apple',
+  onValueChange: (value) => console.log('Selected:', value),
+});
+// Programmatic control
+controller.open();
+controller.close();
+controller.select('banana');
+console.log(controller.value); // 'banana'
+// Cleanup
+controller.destroy();
+```
+## Slots
+| Slot | Description |
+|------|-------------|
+| `select` | Root container |
+| `select-trigger` | Button that opens the popup |
+| `select-value` | Displays selected value (inside trigger) |
+| `select-content` | Popup container for options |
+| `select-item` | Individual selectable option |
+| `select-group` | Groups related items |
+| `select-label` | Label for a group |
+| `select-separator` | Visual divider between items/groups |
+## Options
+Options can be passed via JavaScript or data attributes (JS takes precedence).
+| Option | Data Attribute | Type | Default | Description |
+|--------|---------------|------|---------|-------------|
+| `defaultValue` | `data-default-value` | `string` | `null` | Initial selected value |
+| `placeholder` | `data-placeholder` | `string` | `""` | Text when no value selected |
+| `disabled` | `data-disabled` | `boolean` | `false` | Disable interaction |
+| `required` | `data-required` | `boolean` | `false` | Form validation required |
+| `name` | `data-name` | `string` | - | Form field name (creates hidden input) |
+| `position` | `data-position` | `"item-aligned" \| "popper"` | `"item-aligned"` | Positioning mode (see below) |
+| `avoidCollisions` | `data-avoid-collisions` | `boolean` | `true` | Adjust to stay in viewport |
+| `collisionPadding` | `data-collision-padding` | `number` | `8` | Viewport edge padding (px) |
+### Positioning Modes
+**`item-aligned` (default)**: The popup positions itself so the selected item aligns with the trigger, similar to native `<select>` elements. The popup width matches the trigger width.
+**`popper`**: The popup appears below or above the trigger like a dropdown menu. Additional options apply:
+| Option | Data Attribute | Type | Default | Description |
+|--------|---------------|------|---------|-------------|
+| `side` | `data-side` | `"top" \| "bottom"` | `"bottom"` | Popup placement |
+| `align` | `data-align` | `"start" \| "center" \| "end"` | `"start"` | Popup alignment |
+| `sideOffset` | `data-side-offset` | `number` | `4` | Distance from trigger (px) |
+| `alignOffset` | `data-align-offset` | `number` | `0` | Offset from alignment edge (px) |
+### Callbacks
+| Callback | Type | Description |
+|----------|------|-------------|
+| `onValueChange` | `(value: string \| null) => void` | Called when selection changes |
+| `onOpenChange` | `(open: boolean) => void` | Called when popup opens/closes |
+## Controller API
+```typescript
+interface SelectController {
+  readonly value: string | null;   // Current selected value
+  readonly isOpen: boolean;        // Current open state
+  select(value: string): void;     // Select a value
+  open(): void;                    // Open the popup
+  close(): void;                   // Close the popup
+  destroy(): void;                 // Cleanup
+}
+```
+## Events
+### Outbound Events (component emits)
+```javascript
+root.addEventListener('select:change', (e) => {
+  console.log('Value changed:', e.detail.value);
+});
+root.addEventListener('select:open-change', (e) => {
+  console.log('Open state:', e.detail.open);
+});
+```
+### Inbound Events (component listens)
+```javascript
+// Set value
+root.dispatchEvent(new CustomEvent('select:set', {
+  detail: { value: 'apple' }
+}));
+// Set open state
+root.dispatchEvent(new CustomEvent('select:set', {
+  detail: { open: true }
+}));
+```
+## Data Attributes (State)
+The component sets these attributes to reflect state:
+| Attribute | Element | Values | Description |
+|-----------|---------|--------|-------------|
+| `data-state` | root, trigger, content | `"open" \| "closed"` | Open state |
+| `data-value` | root | `string` | Current selected value |
+| `data-selected` | item | (presence) | Selected item |
+| `data-highlighted` | item | (presence) | Keyboard-focused item |
+| `data-placeholder` | trigger | (presence) | When showing placeholder |
+| `data-label` | item | `string` | Display text for trigger (optional, falls back to textContent) |
+## Keyboard Navigation
+| Key | Action |
+|-----|--------|
+| `Enter`, `Space`, `ArrowDown`, `ArrowUp` | Open popup (when trigger focused) |
+| `ArrowDown` | Move to next item |
+| `ArrowUp` | Move to previous item |
+| `Home` | Move to first item |
+| `End` | Move to last item |
+| `Enter`, `Space` | Select highlighted item |
+| `Escape` | Close popup |
+| `Tab` | Close popup and move focus |
+| Type characters | Jump to matching item |
+## Accessibility
+- Trigger: `role="combobox"`, `aria-haspopup="listbox"`, `aria-expanded`, `aria-controls`
+- Content: `role="listbox"`, `aria-labelledby`
+- Item: `role="option"`, `aria-selected`, `aria-disabled`
+- Group: `role="group"`, `aria-labelledby`
+- Disabled items are skipped during keyboard navigation
+## Form Integration
+When `name` is provided, a hidden input is automatically created for form submission:
+```html
+<form>
+  <div data-slot="select" data-name="fruit">
+    <!-- ... -->
+  </div>
+  <button type="submit">Submit</button>
+</form>
+```
+## License
+MIT

package/dist/index.cjs ADDED Viewed

@@ -0,0 +1 @@

+ const e=(e,t)=>e.querySelector(`[data-slot="${t}"]`),t=(e,t)=>[...e.querySelectorAll(`[data-slot="${t}"]`)],n=(e,t)=>[...e.querySelectorAll(`[data-slot="${t}"]`)],r=new WeakMap;function i(e,t,n){if(typeof process<`u`&&process.env?.NODE_ENV===`production`)return;let i=r.get(e);i||(i=new Set,r.set(e,i)),!i.has(t)&&(i.add(t),console.warn(`[@data-slot] ${n}`))}function a(e){let t=`data-${e.replace(/([A-Z])/g,`-$1`).toLowerCase()}`,n=`data-${e}`;return t===n?[t]:[t,n]}function o(e,t){for(let n of a(t))if(e.hasAttribute(n))return e.getAttribute(n);return null}function s(e,t){return a(t).some(t=>e.hasAttribute(t))}const c=new Set([``,`true`,`1`,`yes`]),l=new Set([`false`,`0`,`no`]);function u(e,t){if(!s(e,t))return;let n=o(e,t);if(n===null)return;let r=n.toLowerCase();if(c.has(r))return!0;if(l.has(r))return!1;i(e,t,`Invalid boolean value "${n}" for data-${t}. Expected: true/false/1/0/yes/no or empty.`)}function d(e,t){let n=o(e,t);if(n===null||n===``)return;let r=Number(n);if(Number.isNaN(r)||!Number.isFinite(r)){i(e,t,`Invalid number value "${n}" for data-${t}.`);return}return r}function f(e,t){if(s(e,t))return o(e,t)??void 0}function p(e,t,n){let r=o(e,t);if(r!==null){if(n.includes(r))return r;i(e,t,`Invalid value "${r}" for data-${t}. Expected one of: ${n.join(`, `)}.`)}}let m=0;const h=(e,t)=>e.id||=`${t}-${++m}`,g=(e,t,n)=>{n===null?e.removeAttribute(`aria-${t}`):e.setAttribute(`aria-${t}`,String(n))};function _(e,t,n,r){return e.addEventListener(t,n,r),()=>e.removeEventListener(t,n,r)}const v=(e,t,n)=>e.dispatchEvent(new CustomEvent(t,{bubbles:!0,detail:n})),y=[`top`,`bottom`],b=[`start`,`center`,`end`],ee=[`item-aligned`,`popper`],te={top:`bottom`,bottom:`top`};function x(n,r={}){let i=e(n,`select-trigger`),a=e(n,`select-content`),o=e(n,`select-value`);if(!i||!a)throw Error(`Select requires trigger and content slots`);let s=r.defaultValue??f(n,`defaultValue`)??null,c=r.defaultOpen??u(n,`defaultOpen`)??!1,l=r.placeholder??f(n,`placeholder`)??``,m=r.disabled??u(n,`disabled`)??!1,x=r.required??u(n,`required`)??!1,C=r.name??f(n,`name`)??null,ne=r.onValueChange,re=r.onOpenChange,w=r.position??p(n,`position`,ee)??`item-aligned`,ie=r.side??p(a,`side`,y)??p(n,`side`,y)??`bottom`,T=r.align??p(a,`align`,b)??p(n,`align`,b)??`start`,E=r.sideOffset??d(a,`sideOffset`)??d(n,`sideOffset`)??4,D=r.alignOffset??d(a,`alignOffset`)??d(n,`alignOffset`)??0,O=r.avoidCollisions??u(a,`avoidCollisions`)??u(n,`avoidCollisions`)??!0,k=r.collisionPadding??d(a,`collisionPadding`)??d(n,`collisionPadding`)??8,A=!1,j=s,M=null,N=-1,P=``,F=null,I=!1,L=[],R=[],z=[],B=new Map,V=null,H=[],U=null,W=e=>e.hasAttribute(`disabled`)||e.hasAttribute(`data-disabled`)||e.getAttribute(`aria-disabled`)===`true`,ae=h(i,`select-trigger`),oe=h(a,`select-content`);i.setAttribute(`role`,`combobox`),i.setAttribute(`aria-haspopup`,`listbox`),i.setAttribute(`aria-controls`,oe),i.hasAttribute(`type`)||i.setAttribute(`type`,`button`),a.setAttribute(`role`,`listbox`),a.setAttribute(`aria-labelledby`,ae),a.tabIndex=-1,m&&(i.setAttribute(`aria-disabled`,`true`),i.setAttribute(`data-disabled`,``)),x&&i.setAttribute(`aria-required`,`true`),C&&(U=document.createElement(`input`),U.type=`hidden`,U.name=C,U.value=j??``,n.appendChild(U));let G=()=>{R=t(a,`select-item`);for(let e of R){e.setAttribute(`role`,`option`),e.hasAttribute(`data-disabled`)||e.hasAttribute(`disabled`)?e.setAttribute(`aria-disabled`,`true`):e.removeAttribute(`aria-disabled`),e.tabIndex=-1;let t=e.dataset.value;t===j?(g(e,`selected`,!0),e.setAttribute(`data-selected`,``)):(g(e,`selected`,!1),e.removeAttribute(`data-selected`))}z=R.filter(e=>!W(e)),B=new Map(z.map((e,t)=>[e,t]));let n=t(a,`select-group`);for(let t of n){t.setAttribute(`role`,`group`);let n=e(t,`select-label`);if(n){let e=h(n,`select-label`);t.setAttribute(`aria-labelledby`,e)}}},K=(e,t,n,r)=>{let i=0,a=0;return a=e===`top`?n.top-r.height-E:n.bottom+E,i=t===`start`?n.left+D:t===`center`?n.left+n.width/2-r.width/2+D:n.right-r.width-D,{x:i,y:a}},se=(e,t)=>{let n=R.find(e=>e.dataset.value===j),r=e.left,i,a=0;if(n){let r=n.getBoundingClientRect();a=r.top-t.top,i=e.top+e.height/2-r.height/2-a}else i=e.top;return{x:r,y:i,itemOffsetTop:a}},q=()=>{let e=i.getBoundingClientRect(),t=window.innerWidth,n=window.innerHeight;a.style.minWidth=`${e.width}px`;let r=a.getBoundingClientRect(),o,s=`bottom`;if(w===`item-aligned`){let i=se(e,r);o={x:i.x,y:i.y},O&&(o.y<k?o.y=k:o.y+r.height>n-k&&(o.y=n-r.height-k),o.x<k?o.x=k:o.x+r.width>t-k&&(o.x=t-r.width-k)),s=o.y<e.top?`top`:`bottom`}else if(s=ie,o=K(s,T,e,r),O){let i=(e,t)=>e===`top`?t.y<k:t.y+r.height>n-k;if(i(s,o)){let t=te[s],n=K(t,T,e,r);i(t,n)||(s=t,o=n)}o.x<k?o.x=k:o.x+r.width>t-k&&(o.x=t-r.width-k),o.y<k?o.y=k:o.y+r.height>n-k&&(o.y=n-r.height-k)}a.style.position=`fixed`,a.style.top=`${o.y}px`,a.style.left=`${o.x}px`,a.style.margin=`0`,a.setAttribute(`data-side`,s),a.setAttribute(`data-align`,w===`item-aligned`?`center`:T)},ce=()=>{V===null&&(V=requestAnimationFrame(()=>{V=null,A&&q()}))},J=()=>{V!==null&&(cancelAnimationFrame(V),V=null),H.forEach(e=>e()),H.length=0},le=()=>{if(H.length>0)return;let e=()=>ce();window.addEventListener(`resize`,e),window.addEventListener(`scroll`,e,!0),H.push(()=>window.removeEventListener(`resize`,e),()=>window.removeEventListener(`scroll`,e,!0));let t=new ResizeObserver(e);t.observe(i),t.observe(a),H.push(()=>t.disconnect())},Y=(e,t=!0)=>{for(let n=0;n<z.length;n++){let r=z[n];n===e?(r.setAttribute(`data-highlighted`,``),t&&r.focus()):r.removeAttribute(`data-highlighted`)}N=e},X=()=>{for(let e of R)e.removeAttribute(`data-highlighted`);N=-1},Z=e=>{n.setAttribute(`data-state`,e),i.setAttribute(`data-state`,e),a.setAttribute(`data-state`,e)},ue=()=>{if(o)if(j===null)o.textContent=l,i.setAttribute(`data-placeholder`,``);else{let e=R.find(e=>e.dataset.value===j),t=e?.dataset.label??e?.textContent?.trim()??j;o.textContent=t,i.removeAttribute(`data-placeholder`)}},Q=(e,t=!1)=>{if(A!==e&&!(m&&e)){if(e){M=document.activeElement,A=!0,g(i,`expanded`,!0),a.hidden=!1,Z(`open`),G(),I=!1;let e=z.findIndex(e=>e.dataset.value===j);e>=0?Y(e,!1):X(),le(),q(),a.focus()}else A=!1,g(i,`expanded`,!1),a.hidden=!0,Z(`closed`),X(),P=``,I=!1,J(),t?M=null:requestAnimationFrame(()=>{M&&document.contains(M)?M.focus():i&&document.contains(i)&&i.focus(),M=null});v(n,`select:open-change`,{open:A}),re?.(A)}},$=(e,t=!1)=>{if(j===e&&!t)return;let r=j;j=e,U&&(U.value=e??``),e===null?n.removeAttribute(`data-value`):n.setAttribute(`data-value`,e);for(let t of R){let n=t.dataset.value;n===e?(g(t,`selected`,!0),t.setAttribute(`data-selected`,``)):(g(t,`selected`,!1),t.removeAttribute(`data-selected`))}ue(),!t&&r!==e&&(v(n,`select:change`,{value:e}),ne?.(e))},de=e=>{if(W(e))return;let t=e.dataset.value;t!==void 0&&($(t),Q(!1))},fe=e=>{let t=z.length;if(t!==0)switch(e.key){case`ArrowDown`:e.preventDefault(),I=!0,Y(N===-1?0:(N+1)%t);break;case`ArrowUp`:e.preventDefault(),I=!0,Y(N===-1?t-1:(N-1+t)%t);break;case`Home`:e.preventDefault(),I=!0,Y(0);break;case`End`:e.preventDefault(),I=!0,Y(t-1);break;case`Enter`:case` `:e.preventDefault(),N>=0&&de(z[N]);break;case`Tab`:Q(!1,!0);break;case`Escape`:e.preventDefault(),Q(!1);break;default:e.key.length===1&&!e.ctrlKey&&!e.metaKey&&!e.altKey&&(e.preventDefault(),pe(e.key.toLowerCase()))}},pe=e=>{F&&clearTimeout(F),F=setTimeout(()=>{P=``},500),P+=e;let t=z.findIndex(e=>(e.textContent?.trim().toLowerCase()||``).startsWith(P));if(t===-1&&P.length===1){let n=N+1;for(let r=0;r<z.length;r++){let i=(n+r)%z.length;if((z[i].textContent?.trim().toLowerCase()||``).startsWith(e)){t=i;break}}}t!==-1&&(I=!0,Y(t))},me=e=>{if(!m)switch(e.key){case`Enter`:case` `:case`ArrowDown`:case`ArrowUp`:e.preventDefault(),Q(!0);break}};g(i,`expanded`,!1),a.hidden=!0,Z(`closed`),G(),$(j,!0),L.push(_(i,`click`,()=>{m||Q(!A)}),_(i,`keydown`,me)),L.push(_(a,`keydown`,fe),_(a,`click`,e=>{let t=e.target.closest?.(`[data-slot="select-item"]`);t&&de(t)}),_(a,`pointermove`,e=>{let t=e.target.closest?.(`[data-slot="select-item"]`);if(!(I&&(I=!1,t&&B.get(t)===N))&&t&&!W(t)){let e=B.get(t);e!==void 0&&e!==N&&Y(e,!1)}}),_(a,`pointerleave`,()=>{I||X()})),L.push(_(document,`pointerdown`,e=>{let t=e.target;A&&!n.contains(t)&&!a.contains(t)&&Q(!1)})),L.push(_(n,`select:set`,e=>{let t=e.detail;t?.value!==void 0&&$(t.value),t?.open!==void 0&&Q(t.open)}));let he={get value(){return j},get isOpen(){return A},select:e=>$(e),open:()=>Q(!0),close:()=>Q(!1),destroy:()=>{F&&clearTimeout(F),J(),L.forEach(e=>e()),L.length=0,U&&U.parentNode&&U.parentNode.removeChild(U),S.delete(n)}};return c&&Q(!0),he}const S=new WeakSet;function C(e=document){let t=[];for(let r of n(e,`select`)){if(S.has(r))continue;S.add(r),t.push(x(r))}return t}exports.create=C,exports.createSelect=x;

package/dist/index.d.cts ADDED Viewed

@@ -0,0 +1,105 @@
+//#region src/index.d.ts
+/** Side of the trigger to place the content */
+type Side = "top" | "bottom";
+/** Alignment of the content relative to the trigger */
+type Align = "start" | "center" | "end";
+/** Positioning mode for the content */
+type Position = "item-aligned" | "popper";
+interface SelectOptions {
+  /** Initial selected value */
+  defaultValue?: string;
+  /** Callback when value changes */
+  onValueChange?: (value: string | null) => void;
+  /** Initial open state */
+  defaultOpen?: boolean;
+  /** Callback when open state changes */
+  onOpenChange?: (open: boolean) => void;
+  /** Placeholder text when no value selected */
+  placeholder?: string;
+  /** Disable interaction */
+  disabled?: boolean;
+  /** Form validation required */
+  required?: boolean;
+  /** Form field name (auto-creates hidden input) */
+  name?: string;
+  /**
+   * Positioning mode for the content.
+   * - "item-aligned": Positions content so selected item aligns with trigger (like native select)
+   * - "popper": Positions content below/above trigger like a dropdown
+   * @default "item-aligned"
+   */
+  position?: Position;
+  /**
+   * The preferred side of the trigger to render against.
+   * Will be reversed when collisions occur and `avoidCollisions` is enabled.
+   * @default "bottom"
+   */
+  side?: Side;
+  /**
+   * The preferred alignment against the trigger.
+   * May change when collisions occur.
+   * @default "start"
+   */
+  align?: Align;
+  /**
+   * The distance in pixels from the trigger.
+   * @default 4
+   */
+  sideOffset?: number;
+  /**
+   * An offset in pixels from the "start" or "end" alignment options.
+   * @default 0
+   */
+  alignOffset?: number;
+  /**
+   * When true, overrides side/align preferences to prevent collisions with viewport edges.
+   * @default true
+   */
+  avoidCollisions?: boolean;
+  /**
+   * The padding between the content and the viewport edges when avoiding collisions.
+   * @default 8
+   */
+  collisionPadding?: number;
+}
+interface SelectController {
+  /** Current selected value */
+  readonly value: string | null;
+  /** Current open state */
+  readonly isOpen: boolean;
+  /** Select a value programmatically */
+  select(value: string): void;
+  /** Open the popup */
+  open(): void;
+  /** Close the popup */
+  close(): void;
+  /** Cleanup all event listeners */
+  destroy(): void;
+}
+/**
+ * Create a select controller for a root element.
+ *
+ * Supports Radix-compatible positioning props for precise placement:
+ * - `side`: "top" | "bottom" (default: "bottom")
+ * - `align`: "start" | "center" | "end" (default: "start")
+ * - `sideOffset`: distance from trigger in px (default: 4)
+ * - `alignOffset`: offset from alignment edge in px (default: 0)
+ * - `avoidCollisions`: flip/shift to stay in viewport (default: true)
+ * - `collisionPadding`: viewport edge padding in px (default: 8)
+ *
+ * ## Events
+ * - **Outbound** `select:change` (on root): Fires when value changes.
+ *   `event.detail: { value: string | null }`
+ * - **Outbound** `select:open-change` (on root): Fires when popup opens/closes.
+ *   `event.detail: { open: boolean }`
+ * - **Inbound** `select:set` (on root): Set value or open state.
+ *   `event.detail: { value: string } | { open: boolean }`
+ */
+declare function createSelect(root: Element, options?: SelectOptions): SelectController;
+/**
+ * Find and bind all select components in a scope
+ * Returns array of controllers for programmatic access
+ */
+declare function create(scope?: ParentNode): SelectController[];
+//#endregion
+export { Align, Position, SelectController, SelectOptions, Side, create, createSelect };

package/dist/index.d.ts ADDED Viewed

@@ -0,0 +1,105 @@
+//#region src/index.d.ts
+/** Side of the trigger to place the content */
+type Side = "top" | "bottom";
+/** Alignment of the content relative to the trigger */
+type Align = "start" | "center" | "end";
+/** Positioning mode for the content */
+type Position = "item-aligned" | "popper";
+interface SelectOptions {
+  /** Initial selected value */
+  defaultValue?: string;
+  /** Callback when value changes */
+  onValueChange?: (value: string | null) => void;
+  /** Initial open state */
+  defaultOpen?: boolean;
+  /** Callback when open state changes */
+  onOpenChange?: (open: boolean) => void;
+  /** Placeholder text when no value selected */
+  placeholder?: string;
+  /** Disable interaction */
+  disabled?: boolean;
+  /** Form validation required */
+  required?: boolean;
+  /** Form field name (auto-creates hidden input) */
+  name?: string;
+  /**
+   * Positioning mode for the content.
+   * - "item-aligned": Positions content so selected item aligns with trigger (like native select)
+   * - "popper": Positions content below/above trigger like a dropdown
+   * @default "item-aligned"
+   */
+  position?: Position;
+  /**
+   * The preferred side of the trigger to render against.
+   * Will be reversed when collisions occur and `avoidCollisions` is enabled.
+   * @default "bottom"
+   */
+  side?: Side;
+  /**
+   * The preferred alignment against the trigger.
+   * May change when collisions occur.
+   * @default "start"
+   */
+  align?: Align;
+  /**
+   * The distance in pixels from the trigger.
+   * @default 4
+   */
+  sideOffset?: number;
+  /**
+   * An offset in pixels from the "start" or "end" alignment options.
+   * @default 0
+   */
+  alignOffset?: number;
+  /**
+   * When true, overrides side/align preferences to prevent collisions with viewport edges.
+   * @default true
+   */
+  avoidCollisions?: boolean;
+  /**
+   * The padding between the content and the viewport edges when avoiding collisions.
+   * @default 8
+   */
+  collisionPadding?: number;
+}
+interface SelectController {
+  /** Current selected value */
+  readonly value: string | null;
+  /** Current open state */
+  readonly isOpen: boolean;
+  /** Select a value programmatically */
+  select(value: string): void;
+  /** Open the popup */
+  open(): void;
+  /** Close the popup */
+  close(): void;
+  /** Cleanup all event listeners */
+  destroy(): void;
+}
+/**
+ * Create a select controller for a root element.
+ *
+ * Supports Radix-compatible positioning props for precise placement:
+ * - `side`: "top" | "bottom" (default: "bottom")
+ * - `align`: "start" | "center" | "end" (default: "start")
+ * - `sideOffset`: distance from trigger in px (default: 4)
+ * - `alignOffset`: offset from alignment edge in px (default: 0)
+ * - `avoidCollisions`: flip/shift to stay in viewport (default: true)
+ * - `collisionPadding`: viewport edge padding in px (default: 8)
+ *
+ * ## Events
+ * - **Outbound** `select:change` (on root): Fires when value changes.
+ *   `event.detail: { value: string | null }`
+ * - **Outbound** `select:open-change` (on root): Fires when popup opens/closes.
+ *   `event.detail: { open: boolean }`
+ * - **Inbound** `select:set` (on root): Set value or open state.
+ *   `event.detail: { value: string } | { open: boolean }`
+ */
+declare function createSelect(root: Element, options?: SelectOptions): SelectController;
+/**
+ * Find and bind all select components in a scope
+ * Returns array of controllers for programmatic access
+ */
+declare function create(scope?: ParentNode): SelectController[];
+//#endregion
+export { Align, Position, SelectController, SelectOptions, Side, create, createSelect };

package/dist/index.js ADDED Viewed

@@ -0,0 +1 @@

package/package.json ADDED Viewed

@@ -0,0 +1,45 @@
+{
+  "name": "@data-slot/select",
+  "version": "0.2.14",
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsdown"
+  },
+  "devDependencies": {
+    "@data-slot/core": "workspace:*"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/bejamas/data-slot",
+    "directory": "packages/select"
+  },
+  "keywords": [
+    "headless",
+    "ui",
+    "select",
+    "dropdown",
+    "combobox",
+    "vanilla",
+    "data-slot"
+  ],
+  "license": "MIT"
+}