@smilodon/svelte 1.1.1 → 1.1.2

package/README.md

@@ -22,6 +22,8 @@ The complete guide includes:
 
 ## Features
 
+- New: `optionRenderer` prop (Option B) lets you return an `HTMLElement` for custom DOM-driven option layouts.
+
 - ✨ **Single & Multi-Select** - Choose one or multiple options
 - 🔍 **Searchable** - Filter options with built-in or custom search
 - ♿ **Fully Accessible** - WCAG 2.1 AAA compliant

package/dist/index.cjs

@@ -1,2 +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;
+"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,r){e.insert(n,i,r),t[28](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[28](null)}}}function n(i,n,r){let s,l,{items:a=[]}=n,{groupedItems:o}=n,{value:u}=n,{defaultValue:c}=n,{multiple:d=!1}=n,{searchable:m=!1}=n,{placeholder:p=""}=n,{disabled:v=!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,{optionRenderer:I}=n;const x=t.createEventDispatcher();let E,L=c;function z(e){const t=e,{item:i,index:n}=t.detail;x("select",{item:i,index:n})}function q(e){const t=e,{selectedItems:i,selectedValues:n}=t.detail,l=n;s||r(25,L=d?l:l[0]);const a=d?l:l[0];r(3,u=a),x("change",{value:a,selectedItems:i})}function V(){x("open")}function w(){x("close")}function R(e){x("search",{query:e.detail.query})}function G(e){x("loadMore",{page:e.detail.page})}function M(e){x("create",{value:e.detail.value})}return t.onMount(()=>{if(!E)return;const e=E;if(p&&e.setAttribute("placeholder",p),v&&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),I&&(e.optionRenderer=I),(null==a?void 0:a.length)&&e.setItems(a),(null==o?void 0:o.length)&&e.setGroupedItems(o),void 0!==l){const t=Array.isArray(l)?l:[l];e.setSelectedValues(t)}e.addEventListener("select",z),e.addEventListener("change",q),e.addEventListener("open",V),e.addEventListener("close",w),e.addEventListener("search",R),e.addEventListener("loadMore",G),e.addEventListener("create",M)}),t.onDestroy(()=>{if(!E)return;const e=E;e.removeEventListener("select",z),e.removeEventListener("change",q),e.removeEventListener("open",V),e.removeEventListener("close",w),e.removeEventListener("search",R),e.removeEventListener("loadMore",G),e.removeEventListener("create",M)}),i.$$set=e=>{"items"in e&&r(4,a=e.items),"groupedItems"in e&&r(5,o=e.groupedItems),"value"in e&&r(3,u=e.value),"defaultValue"in e&&r(6,c=e.defaultValue),"multiple"in e&&r(7,d=e.multiple),"searchable"in e&&r(8,m=e.searchable),"placeholder"in e&&r(9,p=e.placeholder),"disabled"in e&&r(10,v=e.disabled),"required"in e&&r(11,b=e.required),"error"in e&&r(12,f=e.error),"infiniteScroll"in e&&r(13,h=e.infiniteScroll),"pageSize"in e&&r(14,g=e.pageSize),"virtualized"in e&&r(15,$=e.virtualized),"maxSelections"in e&&r(16,A=e.maxSelections),"placement"in e&&r(17,y=e.placement),"className"in e&&r(0,S=e.className),"style"in e&&r(1,_=e.style),"optionRenderer"in e&&r(18,I=e.optionRenderer)},i.$$.update=()=>{if(8&i.$$.dirty[0]&&r(26,s=void 0!==u),100663304&i.$$.dirty[0]&&r(27,l=s?u:L),296836&i.$$.dirty[0]&&E&&(p&&E.setAttribute("placeholder",p),v?E.setAttribute("disabled",""):E.removeAttribute("disabled"),m?E.setAttribute("searchable",""):E.removeAttribute("searchable"),d?E.setAttribute("multiple",""):E.removeAttribute("multiple"),$?E.setAttribute("virtualized",""):E.removeAttribute("virtualized"),I&&r(2,E.optionRenderer=I,E)),20&i.$$.dirty[0]&&E&&a&&E.setItems(a),36&i.$$.dirty[0]&&E&&o&&E.setGroupedItems(o),134217732&i.$$.dirty[0]&&E&&void 0!==l){const e=Array.isArray(l)?l:[l];E.setSelectedValues(e)}},[S,_,E,u,a,o,c,d,m,p,v,b,f,h,g,$,A,y,I,function(){null==E||E.open()},function(){null==E||E.close()},function(){null==E||E.focus()},function(e){null==E||E.setItems(e)},function(e){null==E||E.setGroupedItems(e)},function(){null==E||E.setSelectedValues([]),s||r(25,L=d?[]:void 0);const e=d?[]:"";r(3,u=e),x("change",{value:e,selectedItems:[]})},L,s,l,function(t){e.binding_callbacks[t?"unshift":"push"](()=>{E=t,r(2,E),r(9,p),r(10,v),r(8,m),r(7,d),r(15,$),r(18,I)})}]}"undefined"!=typeof window&&(window.__svelte||(window.__svelte={v:new Set})).v.add("4");class r 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,optionRenderer:18,open:19,close:20,focus:21,setItems:22,setGroupedItems:23,clear:24},null,[-1,-1])}get open(){return this.$$.ctx[19]}get close(){return this.$$.ctx[20]}get focus(){return this.$$.ctx[21]}get setItems(){return this.$$.ctx[22]}get setGroupedItems(){return this.$$.ctx[23]}get clear(){return this.$$.ctx[24]}}exports.Select=r;
 //# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -1 +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]}
+{"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  export let optionRenderer: ((item: SelectItem, index: number, helpers: any) => HTMLElement) | undefined = undefined;\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    if (optionRenderer) {\n      (element as any).optionRenderer = optionRenderer;\n    }\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    if (optionRenderer) {\n      (selectRef as any).optionRenderer = optionRenderer;\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","optionRenderer","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

@@ -23,7 +23,7 @@ function create_fragment(ctx) {
     },
     m(target, anchor) {
       insert(target, enhanced_select, anchor);
-      ctx[27](enhanced_select);
+      ctx[28](enhanced_select);
     },
     p(ctx2, dirty) {
       if (dirty[0] & /*className*/
@@ -51,7 +51,7 @@ function create_fragment(ctx) {
       if (detaching) {
         detach(enhanced_select);
       }
-      ctx[27](null);
+      ctx[28](null);
     }
   };
 }
@@ -75,6 +75,7 @@ function instance($$self, $$props, $$invalidate) {
   let { placement = "auto" } = $$props;
   let { className = "" } = $$props;
   let { style = "" } = $$props;
+  let { optionRenderer = void 0 } = $$props;
   const dispatch = createEventDispatcher();
   let selectRef;
   let internalValue = defaultValue;
@@ -88,7 +89,7 @@ function instance($$self, $$props, $$invalidate) {
     const { selectedItems, selectedValues } = customEvent.detail;
     const values = selectedValues;
     if (!isControlled) {
-      $$invalidate(24, internalValue = multiple ? values : values[0]);
+      $$invalidate(25, internalValue = multiple ? values : values[0]);
     }
     const newValue = multiple ? values : values[0];
     $$invalidate(3, value = newValue);
@@ -126,6 +127,9 @@ function instance($$self, $$props, $$invalidate) {
     if (pageSize) element2.setAttribute("page-size", String(pageSize));
     if (maxSelections) element2.setAttribute("max-selections", String(maxSelections));
     if (placement) element2.setAttribute("placement", placement);
+    if (optionRenderer) {
+      element2.optionRenderer = optionRenderer;
+    }
     if (items == null ? void 0 : items.length) {
       element2.setItems(items);
     }
@@ -173,7 +177,7 @@ function instance($$self, $$props, $$invalidate) {
   function clear() {
     selectRef == null ? void 0 : selectRef.setSelectedValues([]);
     if (!isControlled) {
-      $$invalidate(24, internalValue = multiple ? [] : void 0);
+      $$invalidate(25, internalValue = multiple ? [] : void 0);
     }
     const newValue = multiple ? [] : "";
     $$invalidate(3, value = newValue);
@@ -182,7 +186,7 @@ function instance($$self, $$props, $$invalidate) {
   function enhanced_select_binding($$value) {
     binding_callbacks[$$value ? "unshift" : "push"](() => {
       selectRef = $$value;
-      $$invalidate(2, selectRef);
+      $$invalidate(2, selectRef), $$invalidate(9, placeholder), $$invalidate(10, disabled), $$invalidate(8, searchable), $$invalidate(7, multiple), $$invalidate(15, virtualized), $$invalidate(18, optionRenderer);
     });
   }
   $$self.$$set = ($$props2) => {
@@ -203,37 +207,19 @@ function instance($$self, $$props, $$invalidate) {
     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);
+    if ("optionRenderer" in $$props2) $$invalidate(18, optionRenderer = $$props2.optionRenderer);
   };
   $$self.$$.update = () => {
     if ($$self.$$.dirty[0] & /*value*/
     8) {
-      $$invalidate(25, isControlled = value !== void 0);
+      $$invalidate(26, 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);
-      }
+    100663304) {
+      $$invalidate(27, currentValue = isControlled ? value : internalValue);
     }
-    if ($$self.$$.dirty[0] & /*selectRef, placeholder, disabled, searchable, multiple, virtualized*/
-    34692) {
+    if ($$self.$$.dirty[0] & /*selectRef, placeholder, disabled, searchable, multiple, virtualized, optionRenderer*/
+    296836) {
       if (selectRef) {
         if (placeholder) selectRef.setAttribute("placeholder", placeholder);
         if (disabled) {
@@ -256,6 +242,28 @@ function instance($$self, $$props, $$invalidate) {
         } else {
           selectRef.removeAttribute("virtualized");
         }
+        if (optionRenderer) {
+          $$invalidate(2, selectRef.optionRenderer = optionRenderer, selectRef);
+        }
+      }
+    }
+    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*/
+    134217732) {
+      if (selectRef && currentValue !== void 0) {
+        const values = Array.isArray(currentValue) ? currentValue : [currentValue];
+        selectRef.setSelectedValues(values);
       }
     }
   };
@@ -278,6 +286,7 @@ function instance($$self, $$props, $$invalidate) {
     virtualized,
     maxSelections,
     placement,
+    optionRenderer,
     open,
     close,
     focus,
@@ -317,34 +326,35 @@ class Select extends SvelteComponent {
         placement: 17,
         className: 0,
         style: 1,
-        open: 18,
-        close: 19,
-        focus: 20,
-        setItems: 21,
-        setGroupedItems: 22,
-        clear: 23
+        optionRenderer: 18,
+        open: 19,
+        close: 20,
+        focus: 21,
+        setItems: 22,
+        setGroupedItems: 23,
+        clear: 24
       },
       null,
       [-1, -1]
     );
   }
   get open() {
-    return this.$$.ctx[18];
+    return this.$$.ctx[19];
   }
   get close() {
-    return this.$$.ctx[19];
+    return this.$$.ctx[20];
   }
   get focus() {
-    return this.$$.ctx[20];
+    return this.$$.ctx[21];
   }
   get setItems() {
-    return this.$$.ctx[21];
+    return this.$$.ctx[22];
   }
   get setGroupedItems() {
-    return this.$$.ctx[22];
+    return this.$$.ctx[23];
   }
   get clear() {
-    return this.$$.ctx[23];
+    return this.$$.ctx[24];
   }
 }
 export {

package/dist/index.mjs.map

@@ -1 +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]}
+{"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  export let optionRenderer: ((item: SelectItem, index: number, helpers: any) => HTMLElement) | undefined = undefined;\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    if (optionRenderer) {\n      (element as any).optionRenderer = optionRenderer;\n    }\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    if (optionRenderer) {\n      (selectRef as any).optionRenderer = optionRenderer;\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":";;AASO,MAAM,iBAAiB;ACP9B,IAAI,OAAO,WAAW;AAErB,GAAC,OAAO,aAAa,OAAO,WAAW,EAAE,GAAG,oBAAI,IAAG,EAAE,IAAK,EAAE,IAAI,cAAc;;;;;;;;;;QCkQtE,IAAS,CAAA;AAAA,MAAA;;;;;;;;;AAFlB,aAIC,QAAA,iBAAA,MAAA;;;;;;;;;;UAFQA,KAAS,CAAA;AAAA,QAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;AA5NL,MAAA,EAAA,QAAA,CAAA,EAAA,IAAA;QACA,eAAA,OAA0C,IAAA;QAC1C,QAAA,OAA2D,IAAA;QAC3D,eAAA,OAAkE,IAAA;QAClE,WAAoB,MAAA,IAAA;QACpB,aAAsB,MAAA,IAAA;QACtB,cAAsB,GAAA,IAAA;QACtB,WAAoB,MAAA,IAAA;QACpB,WAAoB,MAAA,IAAA;QACpB,QAAiB,MAAA,IAAA;QACjB,iBAA0B,MAAA,IAAA;QAC1B,WAAmB,GAAA,IAAA;QACnB,cAAuB,KAAA,IAAA;QACvB,gBAAA,OAAoC,IAAA;QACpC,YAAuC,OAAA,IAAA;QACvC,YAAoB,GAAA,IAAA;QACpB,QAAgB,GAAA,IAAA;QAChB,iBAAA,OAA+F,IAAA;QAEpG,WAAW,sBAAA;AAUb,MAAA;MACA,gBAAmE;WAO9D,aAAa,GAAA;UACd,cAAc;AACZ,UAAA,EAAA,MAAM,UAAU,YAAY;AACpC,aAAS,YAAY,MAA0B,MAAA,CAAA;AAAA;WAGxC,aAAa,GAAA;UACd,cAAc;AACZ,UAAA,EAAA,eAAe,mBAAmB,YAAY;UAEhD,SAAS;AAGV,QAAA,CAAA,cAAA;uBACH,gBAAgB,WAAW,SAAS,OAAO,CAAC,CAAA;AAAA;UAIxC,WAAW,WAAW,SAAS,OAAO,CAAC;oBAC7C,QAAQ,QAAA;AACR,aAAS,UAAA,EAAY,OAAO,UAAU,cAAA,CAAA;AAAA;AAG/B,WAAA,aAAA;AACP,aAAS,MAAM;AAAA;AAGR,WAAA,cAAA;AACP,aAAS,OAAO;AAAA;WAGT,aAAa,GAAA;UACd,cAAc;AACpB,aAAS,UAAA,EAAY,OAAO,YAAY,OAAO,OAAA;AAAA;WAGxC,eAAe,GAAA;UAChB,cAAc;AACpB,aAAS,YAAA,EAAc,MAAM,YAAY,OAAO,MAAA;AAAA;WAGzC,aAAa,GAAA;UACd,cAAc;AACpB,aAAS,UAAA,EAAY,OAAO,YAAY,OAAO,OAAA;AAAA;AAGjD,UAAA,MAAA;AACO,QAAA,CAAA,UAAA;UAECC,WAAU;QAGZ,YAAa,CAAAA,SAAQ,aAAa,eAAe,WAAW;QAC5D,SAAU,CAAAA,SAAQ,aAAa,YAAY,EAAE;QAC7C,SAAU,CAAAA,SAAQ,aAAa,YAAY,EAAE;QAC7C,MAAO,CAAAA,SAAQ,aAAa,SAAS,EAAE;QACvC,WAAY,CAAAA,SAAQ,aAAa,cAAc,EAAE;QACjD,SAAU,CAAAA,SAAQ,aAAa,YAAY,EAAE;QAC7C,YAAa,CAAAA,SAAQ,aAAa,eAAe,EAAE;QACnD,eAAgB,CAAAA,SAAQ,aAAa,mBAAmB,EAAE;AAC1D,QAAA,SAAU,CAAAA,SAAQ,aAAa,aAAa,OAAO,QAAQ,CAAA;AAC3D,QAAA,cAAe,CAAAA,SAAQ,aAAa,kBAAkB,OAAO,aAAa,CAAA;QAC1E,UAAW,CAAAA,SAAQ,aAAa,aAAa,SAAS;AAEtD,QAAA,gBAAA;AACD,MAAAA,SAAgB,iBAAiB;AAAA;QAIhC,+BAAO,QAAA;AACR,MAAAA,SAAgB,SAAS,KAAK;AAAA;QAE7B,6CAAc,QAAA;AACf,MAAAA,SAAgB,gBAAgB,YAAY;AAAA;QAI3C,iBAAA,QAAiB;YACb,SAAS,MAAM,QAAQ,YAAY,IAAI,gBAAgB,YAAY;AACxE,MAAAA,SAAgB,kBAAkB,MAAM;AAAA;AAI3C,IAAAA,SAAQ,iBAAiB,UAAU,YAA6B;AAChE,IAAAA,SAAQ,iBAAiB,UAAU,YAA6B;AAChE,IAAAA,SAAQ,iBAAiB,QAAQ,UAA2B;AAC5D,IAAAA,SAAQ,iBAAiB,SAAS,WAA4B;AAC9D,IAAAA,SAAQ,iBAAiB,UAAU,YAA6B;AAChE,IAAAA,SAAQ,iBAAiB,YAAY,cAA+B;AACpE,IAAAA,SAAQ,iBAAiB,UAAU,YAA6B;AAAA;AAGlE,YAAA,MAAA;AACO,QAAA,CAAA,UAAA;UAECA,WAAU;AAGhB,IAAAA,SAAQ,oBAAoB,UAAU,YAA6B;AACnE,IAAAA,SAAQ,oBAAoB,UAAU,YAA6B;AACnE,IAAAA,SAAQ,oBAAoB,QAAQ,UAA2B;AAC/D,IAAAA,SAAQ,oBAAoB,SAAS,WAA4B;AACjE,IAAAA,SAAQ,oBAAoB,UAAU,YAA6B;AACnE,IAAAA,SAAQ,oBAAoB,YAAY,cAA+B;AACvE,IAAAA,SAAQ,oBAAoB,UAAU,YAA6B;AAAA;AA8CrD,WAAA,OAAA;AACb,2CAAmB;AAAA;AAGN,WAAA,QAAA;AACb,2CAAmB;AAAA;AAGN,WAAA,QAAA;AACd,2CAAW;AAAA;WAGG,SAAS,UAAA;AACtB,2CAAmB,SAAS;AAAA;WAGf,gBAAgB,QAAA;AAC7B,2CAAmB,gBAAgB;AAAA;AAGtB,WAAA,QAAA;AACb,2CAAmB,kBAAA;AACf,QAAA,CAAA,cAAA;AACH,mBAAA,IAAA,gBAAgB,WAAA,CAAA,IAAA,MAAgB;AAAA;AAE5B,UAAA,WAAW,WAAA,CAAA,IAAgB;oBACjC,QAAQ,QAAA;AACR,aAAS,UAAA,EAAY,OAAO,UAAiB,eAAA,CAAA,GAAA;AAAA;;;AAKpC,kBAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;AA1LpB,mBAAA,IAAG,eAAe,UAAA,MAAU;AAAA;;;AAC5B,mBAAA,IAAG,eAAe,eAAe,QAAQ,aAAA;AAAA;;;AA4HzC,UAAO,WAAA;YACD,YAAa,WAAU,aAAa,eAAe,WAAW;AAC9D,YAAA,UAAA;AACF,oBAAU,aAAa,YAAY,EAAE;AAAA;AAErC,oBAAU,gBAAgB,UAAU;AAAA;AAElC,YAAA,YAAA;AACF,oBAAU,aAAa,cAAc,EAAE;AAAA;AAEvC,oBAAU,gBAAgB,YAAY;AAAA;AAEpC,YAAA,UAAA;AACF,oBAAU,aAAa,YAAY,EAAE;AAAA;AAErC,oBAAU,gBAAgB,UAAU;AAAA;AAElC,YAAA,aAAA;AACF,oBAAU,aAAa,eAAe,EAAE;AAAA;AAExC,oBAAU,gBAAgB,aAAa;AAAA;AAGrC,YAAA,gBAAA;AACD,uBAAA,GAAA,UAAkB,iBAAiB,gBAAA,SAAA;AAAA;;;;;AArCxC,UAAO,aAAa,OAAA;AACjB,kBAAkB,SAAS,KAAK;AAAA;;;;AAGnC,UAAO,aAAa,cAAA;AACjB,kBAAkB,gBAAgB,YAAY;AAAA;;;;AAGjD,UAAO,aAAa,iBAAA,QAAiB;cAC7B,SAAS,MAAM,QAAQ,YAAY,IAAI,gBAAgB,YAAY;AACxE,kBAAkB,kBAAkB,MAAM;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","x_google_ignoreList":[0,1]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smilodon/svelte",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "Production-ready, accessible select component for Svelte - part of the Smilodon UI toolkit",
   "type": "module",
   "svelte": "./dist/index.mjs",