@smilodon/svelte 1.0.0

package/README.md

@@ -0,0 +1,364 @@
+# @smilodon/svelte
+
+Production-ready, accessible select component for Svelte applications. Part of the [Smilodon](https://github.com/navidrezadoost/smilodon) UI toolkit.
+
+## Features
+
+- ✨ **Single & Multi-Select** - Choose one or multiple options
+- 🔍 **Searchable** - Filter options with built-in or custom search
+- ♿ **Fully Accessible** - WCAG 2.1 AAA compliant
+- ⚡ **Virtual Scrolling** - Handle 100k+ options smoothly
+- 📜 **Infinite Scroll** - Load data progressively
+- 👥 **Grouped Options** - Organize options into categories
+- 🎨 **Customizable** - Style with CSS variables or custom themes
+- 📦 **Tiny Bundle** - ~2KB gzipped
+- 🔧 **TypeScript** - Full type safety included
+
+## Installation
+
+```bash
+npm install @smilodon/svelte @smilodon/core
+```
+
+## Quick Start
+
+```svelte
+<script lang="ts">
+  import { Select } from '@smilodon/svelte';
+
+  const items = [
+    { value: '1', label: 'Apple' },
+    { value: '2', label: 'Banana' },
+    { value: '3', label: 'Cherry' },
+  ];
+
+  let selectedValue;
+</script>
+
+<Select {items} bind:value={selectedValue} placeholder="Select a fruit..." />
+```
+
+## Examples
+
+### Searchable Select
+
+```svelte
+<script lang="ts">
+  import { Select } from '@smilodon/svelte';
+
+  const items = [
+    { value: 'us', label: 'United States' },
+    { value: 'ca', label: 'Canada' },
+    { value: 'mx', label: 'Mexico' },
+  ];
+
+  let country;
+</script>
+
+<Select
+  {items}
+  bind:value={country}
+  searchable
+  placeholder="Search countries..."
+/>
+```
+
+### Multi-Select
+
+```svelte
+<script lang="ts">
+  import { Select } from '@smilodon/svelte';
+
+  const items = [
+    { value: 'js', label: 'JavaScript' },
+    { value: 'ts', label: 'TypeScript' },
+    { value: 'py', label: 'Python' },
+  ];
+
+  let languages = [];
+</script>
+
+<Select
+  {items}
+  bind:value={languages}
+  multiple
+  placeholder="Select languages..."
+/>
+```
+
+### Grouped Options
+
+```svelte
+<script lang="ts">
+  import { Select } from '@smilodon/svelte';
+
+  const groupedItems = [
+    {
+      group: 'Fruits',
+      items: [
+        { value: 'apple', label: 'Apple' },
+        { value: 'banana', label: 'Banana' },
+      ],
+    },
+    {
+      group: 'Vegetables',
+      items: [
+        { value: 'carrot', label: 'Carrot' },
+        { value: 'potato', label: 'Potato' },
+      ],
+    },
+  ];
+
+  let food;
+</script>
+
+<Select {groupedItems} bind:value={food} />
+```
+
+### Infinite Scroll
+
+```svelte
+<script lang="ts">
+  import { Select } from '@smilodon/svelte';
+
+  let items = generateItems(1, 50);
+  let page = 1;
+
+  function handleLoadMore() {
+    page++;
+    const newItems = generateItems(page * 50 + 1, (page + 1) * 50);
+    items = [...items, ...newItems];
+  }
+
+  function generateItems(start, end) {
+    return Array.from({ length: end - start + 1 }, (_, i) => ({
+      value: start + i,
+      label: `Item ${start + i}`,
+    }));
+  }
+</script>
+
+<Select
+  {items}
+  infiniteScroll
+  pageSize={50}
+  on:loadMore={handleLoadMore}
+  placeholder="Scroll to load more..."
+/>
+```
+
+### Virtual Scrolling (Large Datasets)
+
+```svelte
+<script lang="ts">
+  import { Select } from '@smilodon/svelte';
+
+  // Generate 100,000 items
+  const items = Array.from({ length: 100000 }, (_, i) => ({
+    value: i + 1,
+    label: `Item ${i + 1}`,
+  }));
+</script>
+
+<Select
+  {items}
+  virtualized
+  searchable
+  placeholder="100k items with virtual scrolling..."
+/>
+```
+
+### Server-Side Search
+
+```svelte
+<script lang="ts">
+  import { Select } from '@smilodon/svelte';
+
+  let items = [];
+  let isLoading = false;
+
+  async function handleSearch(event) {
+    const query = event.detail.query;
+    
+    if (!query) {
+      items = [];
+      return;
+    }
+
+    isLoading = true;
+    const response = await fetch(`/api/search?q=${query}`);
+    const data = await response.json();
+    items = data.results;
+    isLoading = false;
+  }
+</script>
+
+<Select
+  {items}
+  searchable
+  on:search={handleSearch}
+  placeholder="Type to search..."
+/>
+```
+
+### Controlled Component
+
+```svelte
+<script lang="ts">
+  import { Select } from '@smilodon/svelte';
+
+  const items = [
+    { value: 'draft', label: 'Draft' },
+    { value: 'published', label: 'Published' },
+    { value: 'archived', label: 'Archived' },
+  ];
+
+  let status = 'draft';
+
+  function handleChange(event) {
+    console.log('Status changed:', event.detail.value);
+    status = event.detail.value;
+  }
+</script>
+
+<Select
+  {items}
+  value={status}
+  on:change={handleChange}
+/>
+
+<button on:click={() => status = 'published'}>
+  Publish
+</button>
+```
+
+### Imperative API
+
+```svelte
+<script lang="ts">
+  import { Select } from '@smilodon/svelte';
+
+  let selectRef;
+  const items = [...];
+
+  function programmaticOpen() {
+    selectRef.open();
+  }
+
+  function programmaticClear() {
+    selectRef.clear();
+  }
+</script>
+
+<Select bind:this={selectRef} {items} />
+
+<button on:click={programmaticOpen}>Open Select</button>
+<button on:click={programmaticClear}>Clear Selection</button>
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `items` | `SelectItem[]` | `[]` | Array of selectable items |
+| `groupedItems` | `GroupedItem[]` | `undefined` | Grouped items array |
+| `value` | `string \| number \| Array` | `undefined` | Controlled value |
+| `defaultValue` | `string \| number \| Array` | `undefined` | Initial value (uncontrolled) |
+| `multiple` | `boolean` | `false` | Enable multi-select |
+| `searchable` | `boolean` | `false` | Enable search/filter |
+| `placeholder` | `string` | `''` | Placeholder text |
+| `disabled` | `boolean` | `false` | Disable the select |
+| `required` | `boolean` | `false` | Mark as required |
+| `error` | `boolean` | `false` | Show error state |
+| `infiniteScroll` | `boolean` | `false` | Enable infinite scroll |
+| `pageSize` | `number` | `50` | Items per page (infinite scroll) |
+| `virtualized` | `boolean` | `true` | Enable virtual scrolling |
+| `maxSelections` | `number` | `undefined` | Max selections (multi-select) |
+| `placement` | `'bottom' \| 'top' \| 'auto'` | `'auto'` | Dropdown placement |
+| `className` | `string` | `''` | Custom CSS class |
+| `style` | `string` | `''` | Custom inline styles |
+
+## Events
+
+| Event | Detail | Description |
+|-------|--------|-------------|
+| `change` | `{ value, selectedItems }` | Value changed |
+| `select` | `{ item, index }` | Item selected |
+| `open` | `void` | Dropdown opened |
+| `close` | `void` | Dropdown closed |
+| `search` | `{ query }` | Search query changed |
+| `loadMore` | `{ page }` | Load more requested |
+| `create` | `{ value }` | New item creation |
+
+## Methods
+
+Access these methods using `bind:this`:
+
+| Method | Signature | Description |
+|--------|-----------|-------------|
+| `open()` | `() => void` | Open the dropdown |
+| `close()` | `() => void` | Close the dropdown |
+| `focus()` | `() => void` | Focus the select |
+| `clear()` | `() => void` | Clear selection |
+| `setItems()` | `(items: SelectItem[]) => void` | Update items |
+| `setGroupedItems()` | `(groups: GroupedItem[]) => void` | Update grouped items |
+
+## Types
+
+```typescript
+interface SelectItem {
+  value: string | number;
+  label: string;
+  disabled?: boolean;
+  group?: string;
+  [key: string]: any;
+}
+
+interface GroupedItem {
+  group: string;
+  items: SelectItem[];
+}
+```
+
+## Styling
+
+The component uses CSS variables for easy customization:
+
+```css
+enhanced-select {
+  --select-border-color: #d1d5db;
+  --select-focus-border-color: #3b82f6;
+  --select-background: white;
+  --select-text-color: #1f2937;
+  --select-placeholder-color: #9ca3af;
+  --select-option-hover-background: #f3f4f6;
+  --select-option-selected-background: #eff6ff;
+  --select-border-radius: 0.375rem;
+  --select-padding: 0.5rem 0.75rem;
+}
+```
+
+## Accessibility
+
+This component is fully accessible and compliant with WCAG 2.1 AAA standards:
+
+- ✅ Keyboard navigation (Arrow keys, Enter, Escape, Tab)
+- ✅ Screen reader support (ARIA labels and live regions)
+- ✅ Focus management
+- ✅ High contrast mode support
+- ✅ Reduced motion support
+
+## Browser Support
+
+- Chrome/Edge 90+
+- Firefox 88+
+- Safari 14+
+- Opera 76+
+
+## License
+
+MIT © [Navid Rezadoost](https://github.com/navidrezadoost)
+
+## Contributing
+
+Contributions are welcome! Please see the [main repository](https://github.com/navidrezadoost/smilodon) for guidelines.

package/dist/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("svelte/internal"),t=require("svelte");function i(t){let i;return{c(){i=e.element("enhanced-select"),e.set_custom_element_data(i,"class",t[0]),e.set_custom_element_data(i,"style",t[1])},m(n,s){e.insert(n,i,s),t[27](i)},p(t,n){1&n[0]&&e.set_custom_element_data(i,"class",t[0]),2&n[0]&&e.set_custom_element_data(i,"style",t[1])},i:e.noop,o:e.noop,d(n){n&&e.detach(i),t[27](null)}}}function n(i,n,s){let r,l,{items:a=[]}=n,{groupedItems:u}=n,{value:o}=n,{defaultValue:c}=n,{multiple:d=!1}=n,{searchable:m=!1}=n,{placeholder:v=""}=n,{disabled:p=!1}=n,{required:b=!1}=n,{error:f=!1}=n,{infiniteScroll:h=!1}=n,{pageSize:g=50}=n,{virtualized:$=!0}=n,{maxSelections:A}=n,{placement:y="auto"}=n,{className:S=""}=n,{style:_=""}=n;const I=t.createEventDispatcher();let x,E=c;function L(e){const t=e,{item:i,index:n}=t.detail;I("select",{item:i,index:n})}function z(e){const t=e,{selectedItems:i,selectedValues:n}=t.detail,l=n;r||s(24,E=d?l:l[0]);const a=d?l:l[0];s(3,o=a),I("change",{value:a,selectedItems:i})}function q(){I("open")}function V(){I("close")}function w(e){I("search",{query:e.detail.query})}function G(e){I("loadMore",{page:e.detail.page})}function M(e){I("create",{value:e.detail.value})}return t.onMount(()=>{if(!x)return;const e=x;if(v&&e.setAttribute("placeholder",v),p&&e.setAttribute("disabled",""),b&&e.setAttribute("required",""),f&&e.setAttribute("error",""),m&&e.setAttribute("searchable",""),d&&e.setAttribute("multiple",""),$&&e.setAttribute("virtualized",""),h&&e.setAttribute("infinite-scroll",""),g&&e.setAttribute("page-size",String(g)),A&&e.setAttribute("max-selections",String(A)),y&&e.setAttribute("placement",y),(null==a?void 0:a.length)&&e.setItems(a),(null==u?void 0:u.length)&&e.setGroupedItems(u),void 0!==l){const t=Array.isArray(l)?l:[l];e.setSelectedValues(t)}e.addEventListener("select",L),e.addEventListener("change",z),e.addEventListener("open",q),e.addEventListener("close",V),e.addEventListener("search",w),e.addEventListener("loadMore",G),e.addEventListener("create",M)}),t.onDestroy(()=>{if(!x)return;const e=x;e.removeEventListener("select",L),e.removeEventListener("change",z),e.removeEventListener("open",q),e.removeEventListener("close",V),e.removeEventListener("search",w),e.removeEventListener("loadMore",G),e.removeEventListener("create",M)}),i.$$set=e=>{"items"in e&&s(4,a=e.items),"groupedItems"in e&&s(5,u=e.groupedItems),"value"in e&&s(3,o=e.value),"defaultValue"in e&&s(6,c=e.defaultValue),"multiple"in e&&s(7,d=e.multiple),"searchable"in e&&s(8,m=e.searchable),"placeholder"in e&&s(9,v=e.placeholder),"disabled"in e&&s(10,p=e.disabled),"required"in e&&s(11,b=e.required),"error"in e&&s(12,f=e.error),"infiniteScroll"in e&&s(13,h=e.infiniteScroll),"pageSize"in e&&s(14,g=e.pageSize),"virtualized"in e&&s(15,$=e.virtualized),"maxSelections"in e&&s(16,A=e.maxSelections),"placement"in e&&s(17,y=e.placement),"className"in e&&s(0,S=e.className),"style"in e&&s(1,_=e.style)},i.$$.update=()=>{if(8&i.$$.dirty[0]&&s(25,r=void 0!==o),50331656&i.$$.dirty[0]&&s(26,l=r?o:E),20&i.$$.dirty[0]&&x&&a&&x.setItems(a),36&i.$$.dirty[0]&&x&&u&&x.setGroupedItems(u),67108868&i.$$.dirty[0]&&x&&void 0!==l){const e=Array.isArray(l)?l:[l];x.setSelectedValues(e)}34692&i.$$.dirty[0]&&x&&(v&&x.setAttribute("placeholder",v),p?x.setAttribute("disabled",""):x.removeAttribute("disabled"),m?x.setAttribute("searchable",""):x.removeAttribute("searchable"),d?x.setAttribute("multiple",""):x.removeAttribute("multiple"),$?x.setAttribute("virtualized",""):x.removeAttribute("virtualized"))},[S,_,x,o,a,u,c,d,m,v,p,b,f,h,g,$,A,y,function(){null==x||x.open()},function(){null==x||x.close()},function(){null==x||x.focus()},function(e){null==x||x.setItems(e)},function(e){null==x||x.setGroupedItems(e)},function(){null==x||x.setSelectedValues([]),r||s(24,E=d?[]:void 0);const e=d?[]:"";s(3,o=e),I("change",{value:e,selectedItems:[]})},E,r,l,function(t){e.binding_callbacks[t?"unshift":"push"](()=>{x=t,s(2,x)})}]}"undefined"!=typeof window&&(window.__svelte||(window.__svelte={v:new Set})).v.add("4");class s extends e.SvelteComponent{constructor(t){super(),e.init(this,t,n,i,e.safe_not_equal,{items:4,groupedItems:5,value:3,defaultValue:6,multiple:7,searchable:8,placeholder:9,disabled:10,required:11,error:12,infiniteScroll:13,pageSize:14,virtualized:15,maxSelections:16,placement:17,className:0,style:1,open:18,close:19,focus:20,setItems:21,setGroupedItems:22,clear:23},null,[-1,-1])}get open(){return this.$$.ctx[18]}get close(){return this.$$.ctx[19]}get focus(){return this.$$.ctx[20]}get setItems(){return this.$$.ctx[21]}get setGroupedItems(){return this.$$.ctx[22]}get clear(){return this.$$.ctx[23]}}exports.Select=s;
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../src/Select.svelte","../../../node_modules/svelte/src/runtime/internal/disclose-version/index.js","../../../node_modules/svelte/src/shared/version.js"],"sourcesContent":["<!--\n  Smilodon Select Component for Svelte\n  \n  A production-ready, accessible select component with advanced features:\n  - Single and multi-select modes\n  - Searchable with client or server-side filtering\n  - Infinite scroll and virtual scrolling for large datasets\n  - Grouped options\n  - Custom rendering\n  - Full keyboard navigation\n  - WCAG 2.1 AAA compliant\n  \n  @example\n  <Select\n    {items}\n    bind:value={selectedValue}\n    searchable\n    placeholder=\"Select an option...\"\n  />\n-->\n\n<script lang=\"ts\">\n  import { onMount, onDestroy, createEventDispatcher } from 'svelte';\n  import type {\n    SelectEventDetail,\n    OpenEventDetail,\n    CloseEventDetail,\n    SearchEventDetail,\n    ChangeEventDetail,\n    LoadMoreEventDetail,\n    GroupedItem,\n  } from '@smilodon/core';\n\n  export interface SelectItem {\n    value: string | number;\n    label: string;\n    disabled?: boolean;\n    group?: string;\n    [key: string]: any;\n  }\n\n  // Props\n  export let items: SelectItem[] = [];\n  export let groupedItems: GroupedItem[] | undefined = undefined;\n  export let value: string | number | (string | number)[] | undefined = undefined;\n  export let defaultValue: string | number | (string | number)[] | undefined = undefined;\n  export let multiple: boolean = false;\n  export let searchable: boolean = false;\n  export let placeholder: string = '';\n  export let disabled: boolean = false;\n  export let required: boolean = false;\n  export let error: boolean = false;\n  export let infiniteScroll: boolean = false;\n  export let pageSize: number = 50;\n  export let virtualized: boolean = true;\n  export let maxSelections: number | undefined = undefined;\n  export let placement: 'bottom' | 'top' | 'auto' = 'auto';\n  export let className: string = '';\n  export let style: string = '';\n\n  const dispatch = createEventDispatcher<{\n    change: { value: string | number | (string | number)[]; selectedItems: SelectItem[] };\n    select: { item: SelectItem; index: number };\n    open: void;\n    close: void;\n    search: { query: string };\n    loadMore: { page: number };\n    create: { value: string };\n  }>();\n\n  let selectRef: HTMLElement;\n  let internalValue: string | number | (string | number)[] | undefined = defaultValue;\n\n  // Check if component is controlled\n  $: isControlled = value !== undefined;\n  $: currentValue = isControlled ? value : internalValue;\n\n  // Event handlers\n  function handleSelect(e: Event) {\n    const customEvent = e as CustomEvent<SelectEventDetail>;\n    const { item, index } = customEvent.detail;\n    dispatch('select', { item: item as SelectItem, index });\n  }\n\n  function handleChange(e: Event) {\n    const customEvent = e as CustomEvent<ChangeEventDetail>;\n    const { selectedItems, selectedValues } = customEvent.detail;\n\n    const values = selectedValues as (string | number)[];\n\n    // Update internal value in uncontrolled mode\n    if (!isControlled) {\n      internalValue = multiple ? values : values[0];\n    }\n\n    // Emit change event\n    const newValue = multiple ? values : values[0];\n    value = newValue; // Update binding\n    dispatch('change', { value: newValue, selectedItems: selectedItems as SelectItem[] });\n  }\n\n  function handleOpen() {\n    dispatch('open');\n  }\n\n  function handleClose() {\n    dispatch('close');\n  }\n\n  function handleSearch(e: Event) {\n    const customEvent = e as CustomEvent<SearchEventDetail>;\n    dispatch('search', { query: customEvent.detail.query });\n  }\n\n  function handleLoadMore(e: Event) {\n    const customEvent = e as CustomEvent<LoadMoreEventDetail>;\n    dispatch('loadMore', { page: customEvent.detail.page });\n  }\n\n  function handleCreate(e: Event) {\n    const customEvent = e as CustomEvent<{ value: string }>;\n    dispatch('create', { value: customEvent.detail.value });\n  }\n\n  onMount(() => {\n    if (!selectRef) return;\n\n    const element = selectRef;\n\n    // Set initial attributes\n    if (placeholder) element.setAttribute('placeholder', placeholder);\n    if (disabled) element.setAttribute('disabled', '');\n    if (required) element.setAttribute('required', '');\n    if (error) element.setAttribute('error', '');\n    if (searchable) element.setAttribute('searchable', '');\n    if (multiple) element.setAttribute('multiple', '');\n    if (virtualized) element.setAttribute('virtualized', '');\n    if (infiniteScroll) element.setAttribute('infinite-scroll', '');\n    if (pageSize) element.setAttribute('page-size', String(pageSize));\n    if (maxSelections) element.setAttribute('max-selections', String(maxSelections));\n    if (placement) element.setAttribute('placement', placement);\n\n    // Set initial items\n    if (items?.length) {\n      (element as any).setItems(items);\n    }\n    if (groupedItems?.length) {\n      (element as any).setGroupedItems(groupedItems);\n    }\n\n    // Set initial value\n    if (currentValue !== undefined) {\n      const values = Array.isArray(currentValue) ? currentValue : [currentValue];\n      (element as any).setSelectedValues(values);\n    }\n\n    // Add event listeners\n    element.addEventListener('select', handleSelect as EventListener);\n    element.addEventListener('change', handleChange as EventListener);\n    element.addEventListener('open', handleOpen as EventListener);\n    element.addEventListener('close', handleClose as EventListener);\n    element.addEventListener('search', handleSearch as EventListener);\n    element.addEventListener('loadMore', handleLoadMore as EventListener);\n    element.addEventListener('create', handleCreate as EventListener);\n  });\n\n  onDestroy(() => {\n    if (!selectRef) return;\n\n    const element = selectRef;\n\n    // Remove event listeners\n    element.removeEventListener('select', handleSelect as EventListener);\n    element.removeEventListener('change', handleChange as EventListener);\n    element.removeEventListener('open', handleOpen as EventListener);\n    element.removeEventListener('close', handleClose as EventListener);\n    element.removeEventListener('search', handleSearch as EventListener);\n    element.removeEventListener('loadMore', handleLoadMore as EventListener);\n    element.removeEventListener('create', handleCreate as EventListener);\n  });\n\n  // Reactive updates\n  $: if (selectRef && items) {\n    (selectRef as any).setItems(items);\n  }\n\n  $: if (selectRef && groupedItems) {\n    (selectRef as any).setGroupedItems(groupedItems);\n  }\n\n  $: if (selectRef && currentValue !== undefined) {\n    const values = Array.isArray(currentValue) ? currentValue : [currentValue];\n    (selectRef as any).setSelectedValues(values);\n  }\n\n  $: if (selectRef) {\n    if (placeholder) selectRef.setAttribute('placeholder', placeholder);\n    if (disabled) {\n      selectRef.setAttribute('disabled', '');\n    } else {\n      selectRef.removeAttribute('disabled');\n    }\n    if (searchable) {\n      selectRef.setAttribute('searchable', '');\n    } else {\n      selectRef.removeAttribute('searchable');\n    }\n    if (multiple) {\n      selectRef.setAttribute('multiple', '');\n    } else {\n      selectRef.removeAttribute('multiple');\n    }\n    if (virtualized) {\n      selectRef.setAttribute('virtualized', '');\n    } else {\n      selectRef.removeAttribute('virtualized');\n    }\n  }\n\n  // Public methods\n  export function open() {\n    (selectRef as any)?.open();\n  }\n\n  export function close() {\n    (selectRef as any)?.close();\n  }\n\n  export function focus() {\n    selectRef?.focus();\n  }\n\n  export function setItems(newItems: SelectItem[]) {\n    (selectRef as any)?.setItems(newItems);\n  }\n\n  export function setGroupedItems(groups: GroupedItem[]) {\n    (selectRef as any)?.setGroupedItems(groups);\n  }\n\n  export function clear() {\n    (selectRef as any)?.setSelectedValues([]);\n    if (!isControlled) {\n      internalValue = multiple ? [] : undefined;\n    }\n    const newValue = multiple ? [] : '';\n    value = newValue as any;\n    dispatch('change', { value: newValue as any, selectedItems: [] });\n  }\n</script>\n\n<enhanced-select\n  bind:this={selectRef}\n  class={className}\n  {style}\n/>\n\n<style>\n  /* Component uses web component styling from @smilodon/core */\n</style>\n","import { PUBLIC_VERSION } from '../../../shared/version.js';\n\nif (typeof window !== 'undefined')\n\t// @ts-ignore\n\t(window.__svelte || (window.__svelte = { v: new Set() })).v.add(PUBLIC_VERSION);\n","// generated during release, do not modify\n\n/**\n * The current version, as set in package.json.\n *\n * https://svelte.dev/docs/svelte-compiler#svelte-version\n * @type {string}\n */\nexport const VERSION = '4.2.20';\nexport const PUBLIC_VERSION = '4';\n"],"names":["ctx","insert","target","enhanced_select","anchor","items","$$props","groupedItems","value","defaultValue","multiple","searchable","placeholder","disabled","required","error","infiniteScroll","pageSize","virtualized","maxSelections","placement","className","style","dispatch","createEventDispatcher","selectRef","internalValue","handleSelect","e","customEvent","item","index","detail","handleChange","selectedItems","selectedValues","values","isControlled","newValue","handleOpen","handleClose","handleSearch","query","handleLoadMore","page","handleCreate","onMount","element","setAttribute","String","length","setItems","setGroupedItems","currentValue","Array","isArray","setSelectedValues","addEventListener","onDestroy","removeEventListener","$$invalidate","removeAttribute","open","close","focus","newItems","groups","$$value","window","__svelte","v","Set","add"],"mappings":"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","x_google_ignoreList":[1,2]}

package/dist/index.mjs

@@ -0,0 +1,353 @@
+import { SvelteComponent, init, safe_not_equal, noop, detach, set_custom_element_data, insert, element, binding_callbacks } from "svelte/internal";
+import { createEventDispatcher, onMount, onDestroy } from "svelte";
+const PUBLIC_VERSION = "4";
+if (typeof window !== "undefined")
+  (window.__svelte || (window.__svelte = { v: /* @__PURE__ */ new Set() })).v.add(PUBLIC_VERSION);
+function create_fragment(ctx) {
+  let enhanced_select;
+  return {
+    c() {
+      enhanced_select = element("enhanced-select");
+      set_custom_element_data(
+        enhanced_select,
+        "class",
+        /*className*/
+        ctx[0]
+      );
+      set_custom_element_data(
+        enhanced_select,
+        "style",
+        /*style*/
+        ctx[1]
+      );
+    },
+    m(target, anchor) {
+      insert(target, enhanced_select, anchor);
+      ctx[27](enhanced_select);
+    },
+    p(ctx2, dirty) {
+      if (dirty[0] & /*className*/
+      1) {
+        set_custom_element_data(
+          enhanced_select,
+          "class",
+          /*className*/
+          ctx2[0]
+        );
+      }
+      if (dirty[0] & /*style*/
+      2) {
+        set_custom_element_data(
+          enhanced_select,
+          "style",
+          /*style*/
+          ctx2[1]
+        );
+      }
+    },
+    i: noop,
+    o: noop,
+    d(detaching) {
+      if (detaching) {
+        detach(enhanced_select);
+      }
+      ctx[27](null);
+    }
+  };
+}
+function instance($$self, $$props, $$invalidate) {
+  let isControlled;
+  let currentValue;
+  let { items = [] } = $$props;
+  let { groupedItems = void 0 } = $$props;
+  let { value = void 0 } = $$props;
+  let { defaultValue = void 0 } = $$props;
+  let { multiple = false } = $$props;
+  let { searchable = false } = $$props;
+  let { placeholder = "" } = $$props;
+  let { disabled = false } = $$props;
+  let { required = false } = $$props;
+  let { error = false } = $$props;
+  let { infiniteScroll = false } = $$props;
+  let { pageSize = 50 } = $$props;
+  let { virtualized = true } = $$props;
+  let { maxSelections = void 0 } = $$props;
+  let { placement = "auto" } = $$props;
+  let { className = "" } = $$props;
+  let { style = "" } = $$props;
+  const dispatch = createEventDispatcher();
+  let selectRef;
+  let internalValue = defaultValue;
+  function handleSelect(e) {
+    const customEvent = e;
+    const { item, index } = customEvent.detail;
+    dispatch("select", { item, index });
+  }
+  function handleChange(e) {
+    const customEvent = e;
+    const { selectedItems, selectedValues } = customEvent.detail;
+    const values = selectedValues;
+    if (!isControlled) {
+      $$invalidate(24, internalValue = multiple ? values : values[0]);
+    }
+    const newValue = multiple ? values : values[0];
+    $$invalidate(3, value = newValue);
+    dispatch("change", { value: newValue, selectedItems });
+  }
+  function handleOpen() {
+    dispatch("open");
+  }
+  function handleClose() {
+    dispatch("close");
+  }
+  function handleSearch(e) {
+    const customEvent = e;
+    dispatch("search", { query: customEvent.detail.query });
+  }
+  function handleLoadMore(e) {
+    const customEvent = e;
+    dispatch("loadMore", { page: customEvent.detail.page });
+  }
+  function handleCreate(e) {
+    const customEvent = e;
+    dispatch("create", { value: customEvent.detail.value });
+  }
+  onMount(() => {
+    if (!selectRef) return;
+    const element2 = selectRef;
+    if (placeholder) element2.setAttribute("placeholder", placeholder);
+    if (disabled) element2.setAttribute("disabled", "");
+    if (required) element2.setAttribute("required", "");
+    if (error) element2.setAttribute("error", "");
+    if (searchable) element2.setAttribute("searchable", "");
+    if (multiple) element2.setAttribute("multiple", "");
+    if (virtualized) element2.setAttribute("virtualized", "");
+    if (infiniteScroll) element2.setAttribute("infinite-scroll", "");
+    if (pageSize) element2.setAttribute("page-size", String(pageSize));
+    if (maxSelections) element2.setAttribute("max-selections", String(maxSelections));
+    if (placement) element2.setAttribute("placement", placement);
+    if (items == null ? void 0 : items.length) {
+      element2.setItems(items);
+    }
+    if (groupedItems == null ? void 0 : groupedItems.length) {
+      element2.setGroupedItems(groupedItems);
+    }
+    if (currentValue !== void 0) {
+      const values = Array.isArray(currentValue) ? currentValue : [currentValue];
+      element2.setSelectedValues(values);
+    }
+    element2.addEventListener("select", handleSelect);
+    element2.addEventListener("change", handleChange);
+    element2.addEventListener("open", handleOpen);
+    element2.addEventListener("close", handleClose);
+    element2.addEventListener("search", handleSearch);
+    element2.addEventListener("loadMore", handleLoadMore);
+    element2.addEventListener("create", handleCreate);
+  });
+  onDestroy(() => {
+    if (!selectRef) return;
+    const element2 = selectRef;
+    element2.removeEventListener("select", handleSelect);
+    element2.removeEventListener("change", handleChange);
+    element2.removeEventListener("open", handleOpen);
+    element2.removeEventListener("close", handleClose);
+    element2.removeEventListener("search", handleSearch);
+    element2.removeEventListener("loadMore", handleLoadMore);
+    element2.removeEventListener("create", handleCreate);
+  });
+  function open() {
+    selectRef == null ? void 0 : selectRef.open();
+  }
+  function close() {
+    selectRef == null ? void 0 : selectRef.close();
+  }
+  function focus() {
+    selectRef == null ? void 0 : selectRef.focus();
+  }
+  function setItems(newItems) {
+    selectRef == null ? void 0 : selectRef.setItems(newItems);
+  }
+  function setGroupedItems(groups) {
+    selectRef == null ? void 0 : selectRef.setGroupedItems(groups);
+  }
+  function clear() {
+    selectRef == null ? void 0 : selectRef.setSelectedValues([]);
+    if (!isControlled) {
+      $$invalidate(24, internalValue = multiple ? [] : void 0);
+    }
+    const newValue = multiple ? [] : "";
+    $$invalidate(3, value = newValue);
+    dispatch("change", { value: newValue, selectedItems: [] });
+  }
+  function enhanced_select_binding($$value) {
+    binding_callbacks[$$value ? "unshift" : "push"](() => {
+      selectRef = $$value;
+      $$invalidate(2, selectRef);
+    });
+  }
+  $$self.$$set = ($$props2) => {
+    if ("items" in $$props2) $$invalidate(4, items = $$props2.items);
+    if ("groupedItems" in $$props2) $$invalidate(5, groupedItems = $$props2.groupedItems);
+    if ("value" in $$props2) $$invalidate(3, value = $$props2.value);
+    if ("defaultValue" in $$props2) $$invalidate(6, defaultValue = $$props2.defaultValue);
+    if ("multiple" in $$props2) $$invalidate(7, multiple = $$props2.multiple);
+    if ("searchable" in $$props2) $$invalidate(8, searchable = $$props2.searchable);
+    if ("placeholder" in $$props2) $$invalidate(9, placeholder = $$props2.placeholder);
+    if ("disabled" in $$props2) $$invalidate(10, disabled = $$props2.disabled);
+    if ("required" in $$props2) $$invalidate(11, required = $$props2.required);
+    if ("error" in $$props2) $$invalidate(12, error = $$props2.error);
+    if ("infiniteScroll" in $$props2) $$invalidate(13, infiniteScroll = $$props2.infiniteScroll);
+    if ("pageSize" in $$props2) $$invalidate(14, pageSize = $$props2.pageSize);
+    if ("virtualized" in $$props2) $$invalidate(15, virtualized = $$props2.virtualized);
+    if ("maxSelections" in $$props2) $$invalidate(16, maxSelections = $$props2.maxSelections);
+    if ("placement" in $$props2) $$invalidate(17, placement = $$props2.placement);
+    if ("className" in $$props2) $$invalidate(0, className = $$props2.className);
+    if ("style" in $$props2) $$invalidate(1, style = $$props2.style);
+  };
+  $$self.$$.update = () => {
+    if ($$self.$$.dirty[0] & /*value*/
+    8) {
+      $$invalidate(25, isControlled = value !== void 0);
+    }
+    if ($$self.$$.dirty[0] & /*isControlled, value, internalValue*/
+    50331656) {
+      $$invalidate(26, currentValue = isControlled ? value : internalValue);
+    }
+    if ($$self.$$.dirty[0] & /*selectRef, items*/
+    20) {
+      if (selectRef && items) {
+        selectRef.setItems(items);
+      }
+    }
+    if ($$self.$$.dirty[0] & /*selectRef, groupedItems*/
+    36) {
+      if (selectRef && groupedItems) {
+        selectRef.setGroupedItems(groupedItems);
+      }
+    }
+    if ($$self.$$.dirty[0] & /*selectRef, currentValue*/
+    67108868) {
+      if (selectRef && currentValue !== void 0) {
+        const values = Array.isArray(currentValue) ? currentValue : [currentValue];
+        selectRef.setSelectedValues(values);
+      }
+    }
+    if ($$self.$$.dirty[0] & /*selectRef, placeholder, disabled, searchable, multiple, virtualized*/
+    34692) {
+      if (selectRef) {
+        if (placeholder) selectRef.setAttribute("placeholder", placeholder);
+        if (disabled) {
+          selectRef.setAttribute("disabled", "");
+        } else {
+          selectRef.removeAttribute("disabled");
+        }
+        if (searchable) {
+          selectRef.setAttribute("searchable", "");
+        } else {
+          selectRef.removeAttribute("searchable");
+        }
+        if (multiple) {
+          selectRef.setAttribute("multiple", "");
+        } else {
+          selectRef.removeAttribute("multiple");
+        }
+        if (virtualized) {
+          selectRef.setAttribute("virtualized", "");
+        } else {
+          selectRef.removeAttribute("virtualized");
+        }
+      }
+    }
+  };
+  return [
+    className,
+    style,
+    selectRef,
+    value,
+    items,
+    groupedItems,
+    defaultValue,
+    multiple,
+    searchable,
+    placeholder,
+    disabled,
+    required,
+    error,
+    infiniteScroll,
+    pageSize,
+    virtualized,
+    maxSelections,
+    placement,
+    open,
+    close,
+    focus,
+    setItems,
+    setGroupedItems,
+    clear,
+    internalValue,
+    isControlled,
+    currentValue,
+    enhanced_select_binding
+  ];
+}
+class Select extends SvelteComponent {
+  constructor(options) {
+    super();
+    init(
+      this,
+      options,
+      instance,
+      create_fragment,
+      safe_not_equal,
+      {
+        items: 4,
+        groupedItems: 5,
+        value: 3,
+        defaultValue: 6,
+        multiple: 7,
+        searchable: 8,
+        placeholder: 9,
+        disabled: 10,
+        required: 11,
+        error: 12,
+        infiniteScroll: 13,
+        pageSize: 14,
+        virtualized: 15,
+        maxSelections: 16,
+        placement: 17,
+        className: 0,
+        style: 1,
+        open: 18,
+        close: 19,
+        focus: 20,
+        setItems: 21,
+        setGroupedItems: 22,
+        clear: 23
+      },
+      null,
+      [-1, -1]
+    );
+  }
+  get open() {
+    return this.$$.ctx[18];
+  }
+  get close() {
+    return this.$$.ctx[19];
+  }
+  get focus() {
+    return this.$$.ctx[20];
+  }
+  get setItems() {
+    return this.$$.ctx[21];
+  }
+  get setGroupedItems() {
+    return this.$$.ctx[22];
+  }
+  get clear() {
+    return this.$$.ctx[23];
+  }
+}
+export {
+  Select
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../../node_modules/svelte/src/shared/version.js","../../../node_modules/svelte/src/runtime/internal/disclose-version/index.js","../src/Select.svelte"],"sourcesContent":["// generated during release, do not modify\n\n/**\n * The current version, as set in package.json.\n *\n * https://svelte.dev/docs/svelte-compiler#svelte-version\n * @type {string}\n */\nexport const VERSION = '4.2.20';\nexport const PUBLIC_VERSION = '4';\n","import { PUBLIC_VERSION } from '../../../shared/version.js';\n\nif (typeof window !== 'undefined')\n\t// @ts-ignore\n\t(window.__svelte || (window.__svelte = { v: new Set() })).v.add(PUBLIC_VERSION);\n","<!--\n  Smilodon Select Component for Svelte\n  \n  A production-ready, accessible select component with advanced features:\n  - Single and multi-select modes\n  - Searchable with client or server-side filtering\n  - Infinite scroll and virtual scrolling for large datasets\n  - Grouped options\n  - Custom rendering\n  - Full keyboard navigation\n  - WCAG 2.1 AAA compliant\n  \n  @example\n  <Select\n    {items}\n    bind:value={selectedValue}\n    searchable\n    placeholder=\"Select an option...\"\n  />\n-->\n\n<script lang=\"ts\">\n  import { onMount, onDestroy, createEventDispatcher } from 'svelte';\n  import type {\n    SelectEventDetail,\n    OpenEventDetail,\n    CloseEventDetail,\n    SearchEventDetail,\n    ChangeEventDetail,\n    LoadMoreEventDetail,\n    GroupedItem,\n  } from '@smilodon/core';\n\n  export interface SelectItem {\n    value: string | number;\n    label: string;\n    disabled?: boolean;\n    group?: string;\n    [key: string]: any;\n  }\n\n  // Props\n  export let items: SelectItem[] = [];\n  export let groupedItems: GroupedItem[] | undefined = undefined;\n  export let value: string | number | (string | number)[] | undefined = undefined;\n  export let defaultValue: string | number | (string | number)[] | undefined = undefined;\n  export let multiple: boolean = false;\n  export let searchable: boolean = false;\n  export let placeholder: string = '';\n  export let disabled: boolean = false;\n  export let required: boolean = false;\n  export let error: boolean = false;\n  export let infiniteScroll: boolean = false;\n  export let pageSize: number = 50;\n  export let virtualized: boolean = true;\n  export let maxSelections: number | undefined = undefined;\n  export let placement: 'bottom' | 'top' | 'auto' = 'auto';\n  export let className: string = '';\n  export let style: string = '';\n\n  const dispatch = createEventDispatcher<{\n    change: { value: string | number | (string | number)[]; selectedItems: SelectItem[] };\n    select: { item: SelectItem; index: number };\n    open: void;\n    close: void;\n    search: { query: string };\n    loadMore: { page: number };\n    create: { value: string };\n  }>();\n\n  let selectRef: HTMLElement;\n  let internalValue: string | number | (string | number)[] | undefined = defaultValue;\n\n  // Check if component is controlled\n  $: isControlled = value !== undefined;\n  $: currentValue = isControlled ? value : internalValue;\n\n  // Event handlers\n  function handleSelect(e: Event) {\n    const customEvent = e as CustomEvent<SelectEventDetail>;\n    const { item, index } = customEvent.detail;\n    dispatch('select', { item: item as SelectItem, index });\n  }\n\n  function handleChange(e: Event) {\n    const customEvent = e as CustomEvent<ChangeEventDetail>;\n    const { selectedItems, selectedValues } = customEvent.detail;\n\n    const values = selectedValues as (string | number)[];\n\n    // Update internal value in uncontrolled mode\n    if (!isControlled) {\n      internalValue = multiple ? values : values[0];\n    }\n\n    // Emit change event\n    const newValue = multiple ? values : values[0];\n    value = newValue; // Update binding\n    dispatch('change', { value: newValue, selectedItems: selectedItems as SelectItem[] });\n  }\n\n  function handleOpen() {\n    dispatch('open');\n  }\n\n  function handleClose() {\n    dispatch('close');\n  }\n\n  function handleSearch(e: Event) {\n    const customEvent = e as CustomEvent<SearchEventDetail>;\n    dispatch('search', { query: customEvent.detail.query });\n  }\n\n  function handleLoadMore(e: Event) {\n    const customEvent = e as CustomEvent<LoadMoreEventDetail>;\n    dispatch('loadMore', { page: customEvent.detail.page });\n  }\n\n  function handleCreate(e: Event) {\n    const customEvent = e as CustomEvent<{ value: string }>;\n    dispatch('create', { value: customEvent.detail.value });\n  }\n\n  onMount(() => {\n    if (!selectRef) return;\n\n    const element = selectRef;\n\n    // Set initial attributes\n    if (placeholder) element.setAttribute('placeholder', placeholder);\n    if (disabled) element.setAttribute('disabled', '');\n    if (required) element.setAttribute('required', '');\n    if (error) element.setAttribute('error', '');\n    if (searchable) element.setAttribute('searchable', '');\n    if (multiple) element.setAttribute('multiple', '');\n    if (virtualized) element.setAttribute('virtualized', '');\n    if (infiniteScroll) element.setAttribute('infinite-scroll', '');\n    if (pageSize) element.setAttribute('page-size', String(pageSize));\n    if (maxSelections) element.setAttribute('max-selections', String(maxSelections));\n    if (placement) element.setAttribute('placement', placement);\n\n    // Set initial items\n    if (items?.length) {\n      (element as any).setItems(items);\n    }\n    if (groupedItems?.length) {\n      (element as any).setGroupedItems(groupedItems);\n    }\n\n    // Set initial value\n    if (currentValue !== undefined) {\n      const values = Array.isArray(currentValue) ? currentValue : [currentValue];\n      (element as any).setSelectedValues(values);\n    }\n\n    // Add event listeners\n    element.addEventListener('select', handleSelect as EventListener);\n    element.addEventListener('change', handleChange as EventListener);\n    element.addEventListener('open', handleOpen as EventListener);\n    element.addEventListener('close', handleClose as EventListener);\n    element.addEventListener('search', handleSearch as EventListener);\n    element.addEventListener('loadMore', handleLoadMore as EventListener);\n    element.addEventListener('create', handleCreate as EventListener);\n  });\n\n  onDestroy(() => {\n    if (!selectRef) return;\n\n    const element = selectRef;\n\n    // Remove event listeners\n    element.removeEventListener('select', handleSelect as EventListener);\n    element.removeEventListener('change', handleChange as EventListener);\n    element.removeEventListener('open', handleOpen as EventListener);\n    element.removeEventListener('close', handleClose as EventListener);\n    element.removeEventListener('search', handleSearch as EventListener);\n    element.removeEventListener('loadMore', handleLoadMore as EventListener);\n    element.removeEventListener('create', handleCreate as EventListener);\n  });\n\n  // Reactive updates\n  $: if (selectRef && items) {\n    (selectRef as any).setItems(items);\n  }\n\n  $: if (selectRef && groupedItems) {\n    (selectRef as any).setGroupedItems(groupedItems);\n  }\n\n  $: if (selectRef && currentValue !== undefined) {\n    const values = Array.isArray(currentValue) ? currentValue : [currentValue];\n    (selectRef as any).setSelectedValues(values);\n  }\n\n  $: if (selectRef) {\n    if (placeholder) selectRef.setAttribute('placeholder', placeholder);\n    if (disabled) {\n      selectRef.setAttribute('disabled', '');\n    } else {\n      selectRef.removeAttribute('disabled');\n    }\n    if (searchable) {\n      selectRef.setAttribute('searchable', '');\n    } else {\n      selectRef.removeAttribute('searchable');\n    }\n    if (multiple) {\n      selectRef.setAttribute('multiple', '');\n    } else {\n      selectRef.removeAttribute('multiple');\n    }\n    if (virtualized) {\n      selectRef.setAttribute('virtualized', '');\n    } else {\n      selectRef.removeAttribute('virtualized');\n    }\n  }\n\n  // Public methods\n  export function open() {\n    (selectRef as any)?.open();\n  }\n\n  export function close() {\n    (selectRef as any)?.close();\n  }\n\n  export function focus() {\n    selectRef?.focus();\n  }\n\n  export function setItems(newItems: SelectItem[]) {\n    (selectRef as any)?.setItems(newItems);\n  }\n\n  export function setGroupedItems(groups: GroupedItem[]) {\n    (selectRef as any)?.setGroupedItems(groups);\n  }\n\n  export function clear() {\n    (selectRef as any)?.setSelectedValues([]);\n    if (!isControlled) {\n      internalValue = multiple ? [] : undefined;\n    }\n    const newValue = multiple ? [] : '';\n    value = newValue as any;\n    dispatch('change', { value: newValue as any, selectedItems: [] });\n  }\n</script>\n\n<enhanced-select\n  bind:this={selectRef}\n  class={className}\n  {style}\n/>\n\n<style>\n  /* Component uses web component styling from @smilodon/core */\n</style>\n"],"names":["ctx","element"],"mappings":"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","x_google_ignoreList":[0,1]}

package/dist/types/Select.svelte.d.ts

@@ -0,0 +1,59 @@
+import { SvelteComponentTyped } from 'svelte';
+import type {
+  SelectEventDetail,
+  OpenEventDetail,
+  CloseEventDetail,
+  SearchEventDetail,
+  ChangeEventDetail,
+  LoadMoreEventDetail,
+  GroupedItem,
+} from '@smilodon/core';
+
+export interface SelectItem {
+  value: string | number;
+  label: string;
+  disabled?: boolean;
+  group?: string;
+  [key: string]: any;
+}
+
+export interface SelectProps {
+  items?: SelectItem[];
+  groupedItems?: GroupedItem[];
+  value?: string | number | (string | number)[];
+  defaultValue?: string | number | (string | number)[];
+  multiple?: boolean;
+  searchable?: boolean;
+  placeholder?: string;
+  disabled?: boolean;
+  required?: boolean;
+  error?: boolean;
+  infiniteScroll?: boolean;
+  pageSize?: number;
+  virtualized?: boolean;
+  maxSelections?: number;
+  placement?: 'bottom' | 'top' | 'auto';
+  className?: string;
+  style?: string;
+}
+
+export interface SelectEvents {
+  change: CustomEvent<{ value: string | number | (string | number)[]; selectedItems: SelectItem[] }>;
+  select: CustomEvent<{ item: SelectItem; index: number }>;
+  open: CustomEvent<void>;
+  close: CustomEvent<void>;
+  search: CustomEvent<{ query: string }>;
+  loadMore: CustomEvent<{ page: number }>;
+  create: CustomEvent<{ value: string }>;
+}
+
+export interface SelectSlots {}
+
+export default class Select extends SvelteComponentTyped<SelectProps, SelectEvents, SelectSlots> {
+  open(): void;
+  close(): void;
+  focus(): void;
+  setItems(items: SelectItem[]): void;
+  setGroupedItems(groups: GroupedItem[]): void;
+  clear(): void;
+}

package/dist/types/index.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @smilodon/svelte - Svelte wrapper for Smilodon Select
+ * 
+ * A production-ready, accessible select component for Svelte applications.
+ * 
+ * @packageDocumentation
+ */
+
+export { default as Select } from './Select.svelte';
+
+// Re-export types from core
+export type {
+  SelectEventDetail,
+  OpenEventDetail,
+  CloseEventDetail,
+  SearchEventDetail,
+  ChangeEventDetail,
+  LoadMoreEventDetail,
+  GroupedItem,
+} from '@smilodon/core';
+
+// Export component-specific types
+export type { SelectItem, SelectProps, SelectEvents } from './Select.svelte.d.ts';

package/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "@smilodon/svelte",
+  "version": "1.0.0",
+  "description": "Production-ready, accessible select component for Svelte - part of the Smilodon UI toolkit",
+  "type": "module",
+  "svelte": "./dist/index.mjs",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "svelte": "./dist/index.mjs",
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "vite build && npm run build:types",
+    "build:types": "mkdir -p dist/types && cp src/index.d.ts dist/types/ && cp src/Select.svelte.d.ts dist/types/",
+    "size": "gzip -c dist/index.mjs | wc -c",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "@smilodon/core": "^1.0.0",
+    "svelte": ">=3.0.0 || >=4.0.0 || >=5.0.0"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^3.0.0",
+    "svelte": "^4.2.19",
+    "typescript": "^5.6.2",
+    "vite": "^5.4.11"
+  },
+  "keywords": [
+    "svelte",
+    "select",
+    "dropdown",
+    "combobox",
+    "autocomplete",
+    "virtualization",
+    "infinite-scroll",
+    "accessibility",
+    "wcag",
+    "a11y",
+    "smilodon"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/navidrezadoost/smilodon.git",
+    "directory": "packages/svelte"
+  },
+  "bugs": {
+    "url": "https://github.com/navidrezadoost/smilodon/issues"
+  },
+  "homepage": "https://github.com/navidrezadoost/smilodon#readme",
+  "author": "Navid Rezadoost <navidrezadoost07@gmail.com>",
+  "license": "MIT",
+  "sideEffects": false,
+  "engines": {
+    "node": ">=18",
+    "npm": ">=9"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  }
+}