@vielzeug/refine 1.3.1 → 1.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (134) hide show
  1. package/dist/checkbox-group.cjs +7 -7
  2. package/dist/checkbox-group.cjs.map +1 -1
  3. package/dist/checkbox-group.js +35 -26
  4. package/dist/checkbox-group.js.map +1 -1
  5. package/dist/checkbox.cjs +3 -3
  6. package/dist/checkbox.cjs.map +1 -1
  7. package/dist/checkbox.js +24 -19
  8. package/dist/checkbox.js.map +1 -1
  9. package/dist/combobox.cjs +24 -24
  10. package/dist/combobox.cjs.map +1 -1
  11. package/dist/combobox.js +133 -129
  12. package/dist/combobox.js.map +1 -1
  13. package/dist/custom-elements.json +4227 -3725
  14. package/dist/headless/auto-resize.cjs +2 -0
  15. package/dist/headless/auto-resize.cjs.map +1 -0
  16. package/dist/headless/auto-resize.d.ts +29 -0
  17. package/dist/headless/auto-resize.d.ts.map +1 -0
  18. package/dist/headless/auto-resize.js +16 -0
  19. package/dist/headless/auto-resize.js.map +1 -0
  20. package/dist/headless/checkable.cjs +1 -1
  21. package/dist/headless/checkable.cjs.map +1 -1
  22. package/dist/headless/checkable.d.ts +25 -7
  23. package/dist/headless/checkable.d.ts.map +1 -1
  24. package/dist/headless/checkable.js +19 -14
  25. package/dist/headless/checkable.js.map +1 -1
  26. package/dist/headless/choice-field.cjs +1 -1
  27. package/dist/headless/choice-field.cjs.map +1 -1
  28. package/dist/headless/choice-field.d.ts +21 -0
  29. package/dist/headless/choice-field.d.ts.map +1 -1
  30. package/dist/headless/choice-field.js +27 -19
  31. package/dist/headless/choice-field.js.map +1 -1
  32. package/dist/headless/composer.cjs +2 -0
  33. package/dist/headless/composer.cjs.map +1 -0
  34. package/dist/headless/composer.d.ts +44 -0
  35. package/dist/headless/composer.d.ts.map +1 -0
  36. package/dist/headless/composer.js +21 -0
  37. package/dist/headless/composer.js.map +1 -0
  38. package/dist/headless/field-base.cjs +1 -1
  39. package/dist/headless/field-base.cjs.map +1 -1
  40. package/dist/headless/field-base.d.ts +97 -84
  41. package/dist/headless/field-base.d.ts.map +1 -1
  42. package/dist/headless/field-base.js +43 -32
  43. package/dist/headless/field-base.js.map +1 -1
  44. package/dist/headless/index.d.ts +3 -1
  45. package/dist/headless/index.d.ts.map +1 -1
  46. package/dist/headless/text-field.cjs +1 -1
  47. package/dist/headless/text-field.cjs.map +1 -1
  48. package/dist/headless/text-field.d.ts +40 -0
  49. package/dist/headless/text-field.d.ts.map +1 -1
  50. package/dist/headless/text-field.js +30 -25
  51. package/dist/headless/text-field.js.map +1 -1
  52. package/dist/headless.cjs +1 -1
  53. package/dist/headless.js +27 -25
  54. package/dist/index.cjs +1 -1
  55. package/dist/index.js +61 -60
  56. package/dist/input.cjs +9 -9
  57. package/dist/input.cjs.map +1 -1
  58. package/dist/input.js +49 -44
  59. package/dist/input.js.map +1 -1
  60. package/dist/inputs/checkbox/checkbox.d.ts +3 -0
  61. package/dist/inputs/checkbox/checkbox.d.ts.map +1 -1
  62. package/dist/inputs/combobox/combobox.d.ts +1 -0
  63. package/dist/inputs/combobox/combobox.d.ts.map +1 -1
  64. package/dist/inputs/combobox/combobox.types.d.ts +2 -0
  65. package/dist/inputs/combobox/combobox.types.d.ts.map +1 -1
  66. package/dist/inputs/index.d.ts +2 -0
  67. package/dist/inputs/index.d.ts.map +1 -1
  68. package/dist/inputs/input/input.d.ts.map +1 -1
  69. package/dist/inputs/message-composer/message-composer.css.cjs +2 -0
  70. package/dist/inputs/message-composer/message-composer.css.cjs.map +1 -0
  71. package/dist/inputs/message-composer/message-composer.css.js +6 -0
  72. package/dist/inputs/message-composer/message-composer.css.js.map +1 -0
  73. package/dist/inputs/message-composer/message-composer.d.ts +139 -0
  74. package/dist/inputs/message-composer/message-composer.d.ts.map +1 -0
  75. package/dist/inputs/shared/field-binding.cjs +1 -1
  76. package/dist/inputs/shared/field-binding.cjs.map +1 -1
  77. package/dist/inputs/shared/field-binding.d.ts +15 -0
  78. package/dist/inputs/shared/field-binding.d.ts.map +1 -1
  79. package/dist/inputs/shared/field-binding.js +4 -3
  80. package/dist/inputs/shared/field-binding.js.map +1 -1
  81. package/dist/inputs/shared/form-context.cjs.map +1 -1
  82. package/dist/inputs/shared/form-context.d.ts +6 -0
  83. package/dist/inputs/shared/form-context.d.ts.map +1 -1
  84. package/dist/inputs/shared/form-context.js.map +1 -1
  85. package/dist/inputs/textarea/textarea.d.ts.map +1 -1
  86. package/dist/message-composer.cjs +52 -0
  87. package/dist/message-composer.cjs.map +1 -0
  88. package/dist/message-composer.js +168 -0
  89. package/dist/message-composer.js.map +1 -0
  90. package/dist/ore/dist/base-element.cjs +1 -1
  91. package/dist/ore/dist/base-element.cjs.map +1 -1
  92. package/dist/ore/dist/base-element.js +13 -3
  93. package/dist/ore/dist/base-element.js.map +1 -1
  94. package/dist/ore/dist/forms/field.cjs +1 -1
  95. package/dist/ore/dist/forms/field.cjs.map +1 -1
  96. package/dist/ore/dist/forms/field.js +29 -22
  97. package/dist/ore/dist/forms/field.js.map +1 -1
  98. package/dist/ore/dist/runtime.cjs +1 -1
  99. package/dist/ore/dist/runtime.cjs.map +1 -1
  100. package/dist/ore/dist/runtime.js +3 -1
  101. package/dist/ore/dist/runtime.js.map +1 -1
  102. package/dist/radio-group.cjs +9 -9
  103. package/dist/radio-group.cjs.map +1 -1
  104. package/dist/radio-group.js +44 -38
  105. package/dist/radio-group.js.map +1 -1
  106. package/dist/radio.cjs +3 -3
  107. package/dist/radio.cjs.map +1 -1
  108. package/dist/radio.js +23 -24
  109. package/dist/radio.js.map +1 -1
  110. package/dist/refine.cjs +228 -178
  111. package/dist/refine.cjs.map +1 -1
  112. package/dist/refine.iife.js +228 -178
  113. package/dist/refine.iife.js.map +1 -1
  114. package/dist/refine.js +251 -201
  115. package/dist/refine.js.map +1 -1
  116. package/dist/select.cjs +31 -31
  117. package/dist/select.cjs.map +1 -1
  118. package/dist/select.js +125 -122
  119. package/dist/select.js.map +1 -1
  120. package/dist/shared/size-presets.cjs +1 -1
  121. package/dist/shared/size-presets.cjs.map +1 -1
  122. package/dist/shared/size-presets.d.ts +23 -0
  123. package/dist/shared/size-presets.d.ts.map +1 -1
  124. package/dist/shared/size-presets.js +17 -1
  125. package/dist/shared/size-presets.js.map +1 -1
  126. package/dist/switch.cjs +3 -3
  127. package/dist/switch.cjs.map +1 -1
  128. package/dist/switch.js +17 -18
  129. package/dist/switch.js.map +1 -1
  130. package/dist/textarea.cjs +15 -15
  131. package/dist/textarea.cjs.map +1 -1
  132. package/dist/textarea.js +64 -60
  133. package/dist/textarea.js.map +1 -1
  134. package/package.json +11 -3
@@ -1 +1 @@
1
- {"version":3,"file":"base-element.js","names":["s","u","c","o","d","i","a","t","e","r","l"],"sources":["../../../../ore/dist/base-element.js"],"sourcesContent":["import{warn as e}from\"./_dev.js\";import{OreLifecycleError as t,reportRuntimeError as n}from\"./errors.js\";import\"./types/bindings.js\";import{onCleanup as r,runWithContext as i}from\"./runtime.js\";import{createProps as a,getPropMeta as o}from\"./props.js\";import{ComponentPhase as s,LIFECYCLE_EVENTS as c}from\"./types.js\";import{loadStylesheet as l}from\"./utils/css.js\";import{scope as u,untrack as d}from\"@vielzeug/ripple\";var f=()=>({generation:0,mountCallbacks:[],phase:s.UNINITIALIZED,scope:u(),templateResult:null}),p=class extends HTMLElement{static _definition;static _normalizedPropDefs;static formAssociated=!1;static observedAttributes=[];_component;constructor(){super();let e=this.constructor._definition;e?.shadow!==!1&&this.attachShadow({mode:`open`,...e?.shadow}),this._component=f()}connectedCallback(){d(()=>{this._component.phase===s.UNINITIALIZED&&this._runSetup(),this._init()}),this.dispatchEvent(new CustomEvent(c.CONNECT,{bubbles:!1,composed:!1}))}attributeChangedCallback(e,t,n){if(t===n)return;let r=o(this,e);if(!r)return;let i=r.parse(n);Object.is(d(()=>r.signal.value),i)||(r.signal.value=i)}disconnectedCallback(){this._component.generation++,this._component.phase=s.UNMOUNTED,this.dispatchEvent(new CustomEvent(c.DISCONNECT,{bubbles:!1,composed:!1})),this._component.scope.dispose(),this._component.mountCallbacks=[],this._component.phase=s.UNINITIALIZED,this._component.scope=u(),this._component.templateResult=null}_handleSetupError(e,r=`setup`){let i=e instanceof Error?e:Error(String(e)),a=new t(`<${this.localName}> failed during ${this._component.phase} (${r})`,{cause:i,component:this.localName,phase:r}),o=this.constructor._definition;if(o?.onError)try{return o.onError(a,this)}catch{}n(a,this)}_runSetup(){this._component.phase=s.SETUP_RUNNING;let e=this.constructor._definition,t=this.constructor._normalizedPropDefs,n={element:this,mountCallbacks:[]};try{let r;if(this._component.scope.run(()=>{r=i(n,()=>{let n=t?a(this,t):{};return e.setup(n)})}),this._component.mountCallbacks.push(...n.mountCallbacks),r!=null&&typeof r.then==`function`){let t=this._component.mountCallbacks.splice(0);this._component.phase=s.LOADING,e.loading&&(this._component.templateResult=e.loading()),this._runSetupAsync(r,t,this._component.generation)}else this._component.templateResult=r??null,this._component.phase=s.SETUP_DONE}catch(e){let t=this._handleSetupError(e);if(t)this._component.templateResult=t,this._component.phase=s.SETUP_DONE;else throw this._component.phase=s.UNINITIALIZED,e}}_isStale(e){return this._component.generation!==e||!this.isConnected}async _runSetupAsync(t,n,r){try{let i=await t;if(this._isStale(r)){e(`<${this.localName}> async setup result discarded — element disconnected before setup resolved.`);return}this._component.templateResult=i??null,this._component.phase=s.SETUP_DONE,this._component.mountCallbacks.push(...n),i&&this._applyResult(i),this._scheduleMountCallbacks()}catch(t){if(this._isStale(r)){e(`<${this.localName}> async setup error discarded — element disconnected before setup resolved.`);return}let n=this._handleSetupError(t,`async-setup`);n?(this._component.templateResult=n,this._component.phase=s.SETUP_DONE,this._applyResult(n)):this._component.phase=s.UNINITIALIZED}}_applyResult(e){e&&((this.shadowRoot??this).replaceChildren(e.fragment),this._component.scope.run(()=>{e.apply(r)}))}_init(){this._applyStyles(),this._mountTemplate(),this._component.phase===s.SETUP_DONE&&this._scheduleMountCallbacks()}_applyStyles(){let e=this.constructor._definition;this.shadowRoot&&e?.styles?.length&&(this.shadowRoot.adoptedStyleSheets=e.styles.map(l))}_mountTemplate(){let e=this._component.templateResult;e&&this._applyResult(e)}_scheduleMountCallbacks(){if(this._component.mountCallbacks.length===0)return;let e=this._component.generation;queueMicrotask(()=>{if(this._isStale(e))return;let t=this._component.mountCallbacks.splice(0);for(let e of t)try{let t={element:this,mountCallbacks:[]};this._component.scope.run(()=>{i(t,()=>{let t=e();typeof t==`function`&&r(t)})}),t.mountCallbacks.length>0&&this._component.mountCallbacks.push(...t.mountCallbacks)}catch(e){this._handleSetupError(e,`mounted`)}this._component.mountCallbacks.length>0&&this._scheduleMountCallbacks()})}};export{p as BaseElement};\n//# sourceMappingURL=base-element.js.map"],"mappings":"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"}
1
+ {"version":3,"file":"base-element.js","names":["s","u","c","o","d","i","a","t","e","r","l"],"sources":["../../../../ore/dist/base-element.js"],"sourcesContent":["import{warn as e}from\"./_dev.js\";import{OreLifecycleError as t,reportRuntimeError as n}from\"./errors.js\";import\"./types/bindings.js\";import{onCleanup as r,runWithContext as i}from\"./runtime.js\";import{createProps as a,getPropMeta as o}from\"./props.js\";import{ComponentPhase as s,LIFECYCLE_EVENTS as c}from\"./types.js\";import{loadStylesheet as l}from\"./utils/css.js\";import{scope as u,untrack as d}from\"@vielzeug/ripple\";var f=()=>({formResetCallbacks:[],generation:0,mountCallbacks:[],phase:s.UNINITIALIZED,scope:u(),templateResult:null}),p=class extends HTMLElement{static _definition;static _normalizedPropDefs;static formAssociated=!1;static observedAttributes=[];_component;constructor(){super();let e=this.constructor._definition;e?.shadow!==!1&&this.attachShadow({mode:`open`,...e?.shadow}),this._component=f()}connectedCallback(){d(()=>{this._component.phase===s.UNINITIALIZED&&this._runSetup(),this._init()}),this.dispatchEvent(new CustomEvent(c.CONNECT,{bubbles:!1,composed:!1}))}attributeChangedCallback(e,t,n){if(t===n)return;let r=o(this,e);if(!r)return;let i=r.parse(n);Object.is(d(()=>r.signal.value),i)||(r.signal.value=i)}disconnectedCallback(){this._component.generation++,this._component.phase=s.UNMOUNTED,this.dispatchEvent(new CustomEvent(c.DISCONNECT,{bubbles:!1,composed:!1})),this._component.scope.dispose(),this._component.formResetCallbacks=[],this._component.mountCallbacks=[],this._component.phase=s.UNINITIALIZED,this._component.scope=u(),this._component.templateResult=null}formResetCallback(){for(let e of this._component.formResetCallbacks)try{e()}catch(e){this._handleSetupError(e,`form-reset`)}}_handleSetupError(e,r=`setup`){let i=e instanceof Error?e:Error(String(e)),a=new t(`<${this.localName}> failed during ${this._component.phase} (${r})`,{cause:i,component:this.localName,phase:r}),o=this.constructor._definition;if(o?.onError)try{return o.onError(a,this)}catch{}n(a,this)}_runSetup(){this._component.phase=s.SETUP_RUNNING;let e=this.constructor._definition,t=this.constructor._normalizedPropDefs,n={element:this,formResetCallbacks:[],mountCallbacks:[]};try{let r;if(this._component.scope.run(()=>{r=i(n,()=>{let n=t?a(this,t):{};return e.setup(n)})}),this._component.mountCallbacks.push(...n.mountCallbacks),this._component.formResetCallbacks.push(...n.formResetCallbacks),r!=null&&typeof r.then==`function`){let t=this._component.mountCallbacks.splice(0);this._component.phase=s.LOADING,e.loading&&(this._component.templateResult=e.loading()),this._runSetupAsync(r,t,this._component.generation)}else this._component.templateResult=r??null,this._component.phase=s.SETUP_DONE}catch(e){let t=this._handleSetupError(e);if(t)this._component.templateResult=t,this._component.phase=s.SETUP_DONE;else throw this._component.phase=s.UNINITIALIZED,e}}_isStale(e){return this._component.generation!==e||!this.isConnected}async _runSetupAsync(t,n,r){try{let i=await t;if(this._isStale(r)){e(`<${this.localName}> async setup result discarded — element disconnected before setup resolved.`);return}this._component.templateResult=i??null,this._component.phase=s.SETUP_DONE,this._component.mountCallbacks.push(...n),i&&this._applyResult(i),this._scheduleMountCallbacks()}catch(t){if(this._isStale(r)){e(`<${this.localName}> async setup error discarded — element disconnected before setup resolved.`);return}let n=this._handleSetupError(t,`async-setup`);n?(this._component.templateResult=n,this._component.phase=s.SETUP_DONE,this._applyResult(n)):this._component.phase=s.UNINITIALIZED}}_applyResult(e){e&&((this.shadowRoot??this).replaceChildren(e.fragment),this._component.scope.run(()=>{e.apply(r)}))}_init(){this._applyStyles(),this._mountTemplate(),this._component.phase===s.SETUP_DONE&&this._scheduleMountCallbacks()}_applyStyles(){let e=this.constructor._definition;this.shadowRoot&&e?.styles?.length&&(this.shadowRoot.adoptedStyleSheets=e.styles.map(l))}_mountTemplate(){let e=this._component.templateResult;e&&this._applyResult(e)}_scheduleMountCallbacks(){if(this._component.mountCallbacks.length===0)return;let e=this._component.generation;queueMicrotask(()=>{if(this._isStale(e))return;let t=this._component.mountCallbacks.splice(0);for(let e of t)try{let t={element:this,formResetCallbacks:[],mountCallbacks:[]};this._component.scope.run(()=>{i(t,()=>{let t=e();typeof t==`function`&&r(t)})}),t.mountCallbacks.length>0&&this._component.mountCallbacks.push(...t.mountCallbacks),t.formResetCallbacks.length>0&&this._component.formResetCallbacks.push(...t.formResetCallbacks)}catch(e){this._handleSetupError(e,`mounted`)}this._component.mountCallbacks.length>0&&this._scheduleMountCallbacks()})}};export{p as BaseElement};\n//# sourceMappingURL=base-element.js.map"],"mappings":"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"}
@@ -1,2 +1,2 @@
1
- const e=require("../_dev.cjs"),t=require("../errors.cjs"),n=require("../runtime.cjs");require("@vielzeug/ripple");var r=new WeakMap,i=i=>{let a=i.el??n.getHost();if(!a.constructor.formAssociated)throw new t.OreApiError(t.ORE_ERRORS.defineFieldRequiresFormAssociated(a.localName));if(r.has(a))throw new t.OreApiError(`useField() was already called on <${a.localName}>. Call it only once per component.`);let o=a.attachInternals();r.set(a,o),n.onCleanup(()=>r.delete(a));let s=i.toFormValue??(e=>e==null?i.emptyStringForNull?``:null:e instanceof File||e instanceof FormData?e:String(e));n.watchEffect(()=>{o.setFormValue(s(i.value.value))});let c=i.disabled;if(c)if(!(`states`in o))e.warn(`useField(): ElementInternals.states (CustomStateSet) is not available in this environment — disabled state tracking skipped.`);else{let e=o.states;n.watchEffect(()=>{c.value?e.add(`disabled`):e.delete(`disabled`)})}return{checkValidity:()=>o.checkValidity(),internals:o,reportValidity:()=>o.reportValidity(),setCustomValidity:e=>e?o.setValidity({customError:!0},e):o.setValidity({}),setValidity:o.setValidity.bind(o)}};exports.useField=i;
1
+ const e=require("../_dev.cjs"),t=require("../errors.cjs"),n=require("../runtime.cjs");require("@vielzeug/ripple");var r=new WeakMap,i=i=>{let a=i.el??n.getHost();if(!a.constructor.formAssociated)throw new t.OreApiError(t.ORE_ERRORS.defineFieldRequiresFormAssociated(a.localName));if(r.has(a))throw new t.OreApiError(`useField() was already called on <${a.localName}>. Call it only once per component.`);let o=a.attachInternals();r.set(a,o),n.onCleanup(()=>r.delete(a));let s=i.toFormValue??(e=>e==null?i.emptyStringForNull?``:null:e instanceof File||e instanceof FormData?e:String(e));n.watchEffect(()=>{o.setFormValue(s(i.value.value))});let c=i.disabled;if(c)if(!(`states`in o))e.warn(`useField(): ElementInternals.states (CustomStateSet) is not available in this environment — disabled state tracking skipped.`);else{let e=o.states;n.watchEffect(()=>{c.value?e.add(`disabled`):e.delete(`disabled`)})}return i.validity&&n.watchEffect(()=>{let t=i.validity?.value??{},n=Object.values(t).some(Boolean),r=i.validationMessage?.value??``;if(n&&!r){e.warn("useField(): `validity` has a truthy flag but `validationMessage` is empty — internals.setValidity() requires a non-empty message whenever any flag is true. Falling back to a generic message; pass `validationMessage` to customize it."),o.setValidity(t,`Invalid value.`);return}o.setValidity(t,r)}),i.onReset&&n.onFormReset(i.onReset),{checkValidity:()=>o.checkValidity(),internals:o,reportValidity:()=>o.reportValidity(),setCustomValidity:e=>e?o.setValidity({customError:!0},e):o.setValidity({}),setValidity:o.setValidity.bind(o)}};exports.useField=i;
2
2
  //# sourceMappingURL=field.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"field.cjs","names":["c","r","n","t","i","u"],"sources":["../../../../../ore/dist/forms/field.js"],"sourcesContent":["import{warn as e}from\"../_dev.js\";import{ORE_ERRORS as t,OreApiError as n}from\"../errors.js\";import{getHost as r,onCleanup as i,watchEffect as a}from\"../runtime.js\";import\"@vielzeug/ripple\";var o=new WeakMap,s=s=>{let c=s.el??r();if(!c.constructor.formAssociated)throw new n(t.defineFieldRequiresFormAssociated(c.localName));if(o.has(c))throw new n(`useField() was already called on <${c.localName}>. Call it only once per component.`);let l=c.attachInternals();o.set(c,l),i(()=>o.delete(c));let u=s.toFormValue??(e=>e==null?s.emptyStringForNull?``:null:e instanceof File||e instanceof FormData?e:String(e));a(()=>{l.setFormValue(u(s.value.value))});let d=s.disabled;if(d)if(!(`states`in l))e(`useField(): ElementInternals.states (CustomStateSet) is not available in this environment — disabled state tracking skipped.`);else{let e=l.states;a(()=>{d.value?e.add(`disabled`):e.delete(`disabled`)})}return{checkValidity:()=>l.checkValidity(),internals:l,reportValidity:()=>l.reportValidity(),setCustomValidity:e=>e?l.setValidity({customError:!0},e):l.setValidity({}),setValidity:l.setValidity.bind(l)}};export{s as useField};\n//# sourceMappingURL=field.js.map"],"mappings":"kHAA8L,IAAI,EAAE,IAAI,QAAQ,EAAE,GAAG,CAAC,IAAIA,EAAE,EAAE,IAAIC,EAAAA,QAAE,EAAE,GAAG,CAACD,EAAE,YAAY,eAAe,MAAM,IAAIE,EAAAA,YAAEC,EAAAA,WAAE,kCAAkCH,EAAE,SAAS,CAAC,EAAE,GAAG,EAAE,IAAIA,CAAC,EAAE,MAAM,IAAIE,EAAAA,YAAE,qCAAqCF,EAAE,UAAU,oCAAoC,EAAE,IAAI,EAAEA,EAAE,gBAAgB,EAAE,EAAE,IAAIA,EAAE,CAAC,EAAEI,EAAAA,cAAM,EAAE,OAAOJ,CAAC,CAAC,EAAE,IAAIK,EAAE,EAAE,cAAc,GAAG,GAAG,KAAK,EAAE,mBAAmB,GAAG,KAAK,aAAa,MAAM,aAAa,SAAS,EAAE,OAAO,CAAC,GAAG,EAAA,gBAAM,CAAC,EAAE,aAAaA,EAAE,EAAE,MAAM,KAAK,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,SAAS,GAAG,EAAE,GAAG,EAAE,WAAW,GAAG,EAAA,KAAE,8HAA8H,MAAM,CAAC,IAAI,EAAE,EAAE,OAAO,EAAA,gBAAM,CAAC,EAAE,MAAM,EAAE,IAAI,UAAU,EAAE,EAAE,OAAO,UAAU,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,kBAAkB,EAAE,cAAc,EAAE,UAAU,EAAE,mBAAmB,EAAE,eAAe,EAAE,kBAAkB,GAAG,EAAE,EAAE,YAAY,CAAC,YAAY,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,YAAY,CAAC,CAAC,EAAE,YAAY,EAAE,YAAY,KAAK,CAAC,CAAC,CAAC"}
1
+ {"version":3,"file":"field.cjs","names":["r","n","t","u","i","f","o","a"],"sources":["../../../../../ore/dist/forms/field.js"],"sourcesContent":["import{warn as e}from\"../_dev.js\";import{ORE_ERRORS as t,OreApiError as n}from\"../errors.js\";import{getHost as r,onCleanup as i,onFormReset as a,watchEffect as o}from\"../runtime.js\";import\"@vielzeug/ripple\";var s=new WeakMap,c=c=>{let l=c.el??r();if(!l.constructor.formAssociated)throw new n(t.defineFieldRequiresFormAssociated(l.localName));if(s.has(l))throw new n(`useField() was already called on <${l.localName}>. Call it only once per component.`);let u=l.attachInternals();s.set(l,u),i(()=>s.delete(l));let d=c.toFormValue??(e=>e==null?c.emptyStringForNull?``:null:e instanceof File||e instanceof FormData?e:String(e));o(()=>{u.setFormValue(d(c.value.value))});let f=c.disabled;if(f)if(!(`states`in u))e(`useField(): ElementInternals.states (CustomStateSet) is not available in this environment — disabled state tracking skipped.`);else{let e=u.states;o(()=>{f.value?e.add(`disabled`):e.delete(`disabled`)})}return c.validity&&o(()=>{let t=c.validity?.value??{},n=Object.values(t).some(Boolean),r=c.validationMessage?.value??``;if(n&&!r){e(\"useField(): `validity` has a truthy flag but `validationMessage` is empty — internals.setValidity() requires a non-empty message whenever any flag is true. Falling back to a generic message; pass `validationMessage` to customize it.\"),u.setValidity(t,`Invalid value.`);return}u.setValidity(t,r)}),c.onReset&&a(c.onReset),{checkValidity:()=>u.checkValidity(),internals:u,reportValidity:()=>u.reportValidity(),setCustomValidity:e=>e?u.setValidity({customError:!0},e):u.setValidity({}),setValidity:u.setValidity.bind(u)}};export{c as useField};\n//# sourceMappingURL=field.js.map"],"mappings":"kHAA+M,IAAI,EAAE,IAAI,QAAQ,EAAE,GAAG,CAAC,IAAI,EAAE,EAAE,IAAIA,EAAAA,QAAE,EAAE,GAAG,CAAC,EAAE,YAAY,eAAe,MAAM,IAAIC,EAAAA,YAAEC,EAAAA,WAAE,kCAAkC,EAAE,SAAS,CAAC,EAAE,GAAG,EAAE,IAAI,CAAC,EAAE,MAAM,IAAID,EAAAA,YAAE,qCAAqC,EAAE,UAAU,oCAAoC,EAAE,IAAIE,EAAE,EAAE,gBAAgB,EAAE,EAAE,IAAI,EAAEA,CAAC,EAAEC,EAAAA,cAAM,EAAE,OAAO,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,cAAc,GAAG,GAAG,KAAK,EAAE,mBAAmB,GAAG,KAAK,aAAa,MAAM,aAAa,SAAS,EAAE,OAAO,CAAC,GAAG,EAAA,gBAAM,CAAC,EAAE,aAAa,EAAE,EAAE,MAAM,KAAK,CAAC,CAAC,CAAC,EAAE,IAAIC,EAAE,EAAE,SAAS,GAAGA,EAAE,GAAG,EAAE,WAAWF,GAAG,EAAA,KAAE,8HAA8H,MAAM,CAAC,IAAI,EAAEA,EAAE,OAAO,EAAA,gBAAM,CAAC,EAAE,MAAM,EAAE,IAAI,UAAU,EAAE,EAAE,OAAO,UAAU,CAAC,CAAC,CAAC,CAAC,OAAO,EAAE,UAAUG,EAAAA,gBAAM,CAAC,IAAIJ,EAAE,EAAE,UAAU,OAAO,CAAC,EAAE,EAAE,OAAO,OAAOA,CAAC,CAAC,CAAC,KAAK,OAAO,EAAE,EAAE,EAAE,mBAAmB,OAAO,GAAG,GAAG,GAAG,CAAC,EAAE,CAAC,EAAA,KAAE,0OAA0O,EAAEC,EAAE,YAAYD,EAAE,gBAAgB,EAAE,MAAM,CAAC,EAAE,YAAYA,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,SAASK,EAAAA,YAAE,EAAE,OAAO,EAAE,CAAC,kBAAkBJ,EAAE,cAAc,EAAE,UAAUA,EAAE,mBAAmBA,EAAE,eAAe,EAAE,kBAAkB,GAAG,EAAEA,EAAE,YAAY,CAAC,YAAY,CAAC,CAAC,EAAE,CAAC,EAAEA,EAAE,YAAY,CAAC,CAAC,EAAE,YAAYA,EAAE,YAAY,KAAKA,CAAC,CAAC,CAAC"}
@@ -1,35 +1,42 @@
1
1
  import { warn as e } from "../_dev.js";
2
2
  import { ORE_ERRORS as t, OreApiError as n } from "../errors.js";
3
- import { getHost as r, onCleanup as i, watchEffect as a } from "../runtime.js";
3
+ import { getHost as r, onCleanup as i, onFormReset as a, watchEffect as o } from "../runtime.js";
4
4
  import "@vielzeug/ripple";
5
5
  //#region ../ore/dist/forms/field.js
6
- var o = /* @__PURE__ */ new WeakMap(), s = (s) => {
7
- let c = s.el ?? r();
8
- if (!c.constructor.formAssociated) throw new n(t.defineFieldRequiresFormAssociated(c.localName));
9
- if (o.has(c)) throw new n(`useField() was already called on <${c.localName}>. Call it only once per component.`);
10
- let l = c.attachInternals();
11
- o.set(c, l), i(() => o.delete(c));
12
- let u = s.toFormValue ?? ((e) => e == null ? s.emptyStringForNull ? "" : null : e instanceof File || e instanceof FormData ? e : String(e));
13
- a(() => {
14
- l.setFormValue(u(s.value.value));
6
+ var s = /* @__PURE__ */ new WeakMap(), c = (c) => {
7
+ let l = c.el ?? r();
8
+ if (!l.constructor.formAssociated) throw new n(t.defineFieldRequiresFormAssociated(l.localName));
9
+ if (s.has(l)) throw new n(`useField() was already called on <${l.localName}>. Call it only once per component.`);
10
+ let u = l.attachInternals();
11
+ s.set(l, u), i(() => s.delete(l));
12
+ let d = c.toFormValue ?? ((e) => e == null ? c.emptyStringForNull ? "" : null : e instanceof File || e instanceof FormData ? e : String(e));
13
+ o(() => {
14
+ u.setFormValue(d(c.value.value));
15
15
  });
16
- let d = s.disabled;
17
- if (d) if (!("states" in l)) e("useField(): ElementInternals.states (CustomStateSet) is not available in this environment — disabled state tracking skipped.");
16
+ let f = c.disabled;
17
+ if (f) if (!("states" in u)) e("useField(): ElementInternals.states (CustomStateSet) is not available in this environment — disabled state tracking skipped.");
18
18
  else {
19
- let e = l.states;
20
- a(() => {
21
- d.value ? e.add("disabled") : e.delete("disabled");
19
+ let e = u.states;
20
+ o(() => {
21
+ f.value ? e.add("disabled") : e.delete("disabled");
22
22
  });
23
23
  }
24
- return {
25
- checkValidity: () => l.checkValidity(),
26
- internals: l,
27
- reportValidity: () => l.reportValidity(),
28
- setCustomValidity: (e) => e ? l.setValidity({ customError: !0 }, e) : l.setValidity({}),
29
- setValidity: l.setValidity.bind(l)
24
+ return c.validity && o(() => {
25
+ let t = c.validity?.value ?? {}, n = Object.values(t).some(Boolean), r = c.validationMessage?.value ?? "";
26
+ if (n && !r) {
27
+ e("useField(): `validity` has a truthy flag but `validationMessage` is empty — internals.setValidity() requires a non-empty message whenever any flag is true. Falling back to a generic message; pass `validationMessage` to customize it."), u.setValidity(t, "Invalid value.");
28
+ return;
29
+ }
30
+ u.setValidity(t, r);
31
+ }), c.onReset && a(c.onReset), {
32
+ checkValidity: () => u.checkValidity(),
33
+ internals: u,
34
+ reportValidity: () => u.reportValidity(),
35
+ setCustomValidity: (e) => e ? u.setValidity({ customError: !0 }, e) : u.setValidity({}),
36
+ setValidity: u.setValidity.bind(u)
30
37
  };
31
38
  };
32
39
  //#endregion
33
- export { s as useField };
40
+ export { c as useField };
34
41
 
35
42
  //# sourceMappingURL=field.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"field.js","names":["c","r","t","i","u"],"sources":["../../../../../ore/dist/forms/field.js"],"sourcesContent":["import{warn as e}from\"../_dev.js\";import{ORE_ERRORS as t,OreApiError as n}from\"../errors.js\";import{getHost as r,onCleanup as i,watchEffect as a}from\"../runtime.js\";import\"@vielzeug/ripple\";var o=new WeakMap,s=s=>{let c=s.el??r();if(!c.constructor.formAssociated)throw new n(t.defineFieldRequiresFormAssociated(c.localName));if(o.has(c))throw new n(`useField() was already called on <${c.localName}>. Call it only once per component.`);let l=c.attachInternals();o.set(c,l),i(()=>o.delete(c));let u=s.toFormValue??(e=>e==null?s.emptyStringForNull?``:null:e instanceof File||e instanceof FormData?e:String(e));a(()=>{l.setFormValue(u(s.value.value))});let d=s.disabled;if(d)if(!(`states`in l))e(`useField(): ElementInternals.states (CustomStateSet) is not available in this environment — disabled state tracking skipped.`);else{let e=l.states;a(()=>{d.value?e.add(`disabled`):e.delete(`disabled`)})}return{checkValidity:()=>l.checkValidity(),internals:l,reportValidity:()=>l.reportValidity(),setCustomValidity:e=>e?l.setValidity({customError:!0},e):l.setValidity({}),setValidity:l.setValidity.bind(l)}};export{s as useField};\n//# sourceMappingURL=field.js.map"],"mappings":";;;;;AAA8L,IAAI,oBAAE,IAAI,QAAM,GAAE,KAAE,MAAG;CAAC,IAAIA,IAAE,EAAE,MAAIC,EAAE;CAAE,IAAG,CAACD,EAAE,YAAY,gBAAe,MAAM,IAAI,EAAEE,EAAE,kCAAkCF,EAAE,SAAS,CAAC;CAAE,IAAG,EAAE,IAAIA,CAAC,GAAE,MAAM,IAAI,EAAE,qCAAqCA,EAAE,UAAU,oCAAoC;CAAE,IAAI,IAAEA,EAAE,gBAAgB;CAAE,EAAE,IAAIA,GAAE,CAAC,GAAEG,QAAM,EAAE,OAAOH,CAAC,CAAC;CAAE,IAAII,IAAE,EAAE,iBAAc,MAAG,KAAG,OAAK,EAAE,qBAAmB,KAAG,OAAK,aAAa,QAAM,aAAa,WAAS,IAAE,OAAO,CAAC;CAAG,QAAM;EAAC,EAAE,aAAaA,EAAE,EAAE,MAAM,KAAK,CAAC;CAAC,CAAC;CAAE,IAAI,IAAE,EAAE;CAAS,IAAG,GAAE,IAAG,EAAE,YAAW,IAAG,EAAE,8HAA8H;MAAM;EAAC,IAAI,IAAE,EAAE;EAAO,QAAM;GAAC,EAAE,QAAM,EAAE,IAAI,UAAU,IAAE,EAAE,OAAO,UAAU;EAAC,CAAC;CAAC;CAAC,OAAM;EAAC,qBAAkB,EAAE,cAAc;EAAE,WAAU;EAAE,sBAAmB,EAAE,eAAe;EAAE,oBAAkB,MAAG,IAAE,EAAE,YAAY,EAAC,aAAY,CAAC,EAAC,GAAE,CAAC,IAAE,EAAE,YAAY,CAAC,CAAC;EAAE,aAAY,EAAE,YAAY,KAAK,CAAC;CAAC;AAAC"}
1
+ {"version":3,"file":"field.js","names":["r","t","u","i","f","o","a"],"sources":["../../../../../ore/dist/forms/field.js"],"sourcesContent":["import{warn as e}from\"../_dev.js\";import{ORE_ERRORS as t,OreApiError as n}from\"../errors.js\";import{getHost as r,onCleanup as i,onFormReset as a,watchEffect as o}from\"../runtime.js\";import\"@vielzeug/ripple\";var s=new WeakMap,c=c=>{let l=c.el??r();if(!l.constructor.formAssociated)throw new n(t.defineFieldRequiresFormAssociated(l.localName));if(s.has(l))throw new n(`useField() was already called on <${l.localName}>. Call it only once per component.`);let u=l.attachInternals();s.set(l,u),i(()=>s.delete(l));let d=c.toFormValue??(e=>e==null?c.emptyStringForNull?``:null:e instanceof File||e instanceof FormData?e:String(e));o(()=>{u.setFormValue(d(c.value.value))});let f=c.disabled;if(f)if(!(`states`in u))e(`useField(): ElementInternals.states (CustomStateSet) is not available in this environment — disabled state tracking skipped.`);else{let e=u.states;o(()=>{f.value?e.add(`disabled`):e.delete(`disabled`)})}return c.validity&&o(()=>{let t=c.validity?.value??{},n=Object.values(t).some(Boolean),r=c.validationMessage?.value??``;if(n&&!r){e(\"useField(): `validity` has a truthy flag but `validationMessage` is empty — internals.setValidity() requires a non-empty message whenever any flag is true. Falling back to a generic message; pass `validationMessage` to customize it.\"),u.setValidity(t,`Invalid value.`);return}u.setValidity(t,r)}),c.onReset&&a(c.onReset),{checkValidity:()=>u.checkValidity(),internals:u,reportValidity:()=>u.reportValidity(),setCustomValidity:e=>e?u.setValidity({customError:!0},e):u.setValidity({}),setValidity:u.setValidity.bind(u)}};export{c as useField};\n//# sourceMappingURL=field.js.map"],"mappings":";;;;;AAA+M,IAAI,oBAAE,IAAI,QAAM,GAAE,KAAE,MAAG;CAAC,IAAI,IAAE,EAAE,MAAIA,EAAE;CAAE,IAAG,CAAC,EAAE,YAAY,gBAAe,MAAM,IAAI,EAAEC,EAAE,kCAAkC,EAAE,SAAS,CAAC;CAAE,IAAG,EAAE,IAAI,CAAC,GAAE,MAAM,IAAI,EAAE,qCAAqC,EAAE,UAAU,oCAAoC;CAAE,IAAIC,IAAE,EAAE,gBAAgB;CAAE,EAAE,IAAI,GAAEA,CAAC,GAAEC,QAAM,EAAE,OAAO,CAAC,CAAC;CAAE,IAAI,IAAE,EAAE,iBAAc,MAAG,KAAG,OAAK,EAAE,qBAAmB,KAAG,OAAK,aAAa,QAAM,aAAa,WAAS,IAAE,OAAO,CAAC;CAAG,QAAM;EAAC,EAAE,aAAa,EAAE,EAAE,MAAM,KAAK,CAAC;CAAC,CAAC;CAAE,IAAIC,IAAE,EAAE;CAAS,IAAGA,GAAE,IAAG,EAAE,YAAWF,IAAG,EAAE,8HAA8H;MAAM;EAAC,IAAI,IAAEA,EAAE;EAAO,QAAM;GAAC,EAAE,QAAM,EAAE,IAAI,UAAU,IAAE,EAAE,OAAO,UAAU;EAAC,CAAC;CAAC;CAAC,OAAO,EAAE,YAAUG,QAAM;EAAC,IAAIJ,IAAE,EAAE,UAAU,SAAO,CAAC,GAAE,IAAE,OAAO,OAAOA,CAAC,CAAC,CAAC,KAAK,OAAO,GAAE,IAAE,EAAE,mBAAmB,SAAO;EAAG,IAAG,KAAG,CAAC,GAAE;GAAC,EAAE,0OAA0O,GAAEC,EAAE,YAAYD,GAAE,gBAAgB;GAAE;EAAM;EAAC,EAAE,YAAYA,GAAE,CAAC;CAAC,CAAC,GAAE,EAAE,WAASK,EAAE,EAAE,OAAO,GAAE;EAAC,qBAAkBJ,EAAE,cAAc;EAAE,WAAUA;EAAE,sBAAmBA,EAAE,eAAe;EAAE,oBAAkB,MAAG,IAAEA,EAAE,YAAY,EAAC,aAAY,CAAC,EAAC,GAAE,CAAC,IAAEA,EAAE,YAAY,CAAC,CAAC;EAAE,aAAYA,EAAE,YAAY,KAAKA,CAAC;CAAC;AAAC"}
@@ -1,2 +1,2 @@
1
- const e=require("./errors.cjs");require("./utils/dom.cjs");let t=require("@vielzeug/ripple");var n=null,r=(e,t)=>{let r=n;n=e;try{return t()}finally{n=r}},i=t=>{if(n)return n;throw new e.OreApiError(`${t}: ${e.ORE_ERRORS.lifecycleOutsideSetup}`)},a=()=>i(`getHost`).element,o=e=>n?((0,t.onCleanup)(e),!0):!1,s=t.onCleanup,c=e=>{let n=(0,t.effect)(e),r=()=>n.dispose();return o(r),r};exports.getHost=a,exports.onCleanup=s,exports.requireSetupContext=i,exports.runWithContext=r,exports.tryRegisterCleanup=o,exports.watchEffect=c;
1
+ const e=require("./errors.cjs");require("./utils/dom.cjs");let t=require("@vielzeug/ripple");var n=null,r=(e,t)=>{let r=n;n=e;try{return t()}finally{n=r}},i=t=>{if(n)return n;throw new e.OreApiError(`${t}: ${e.ORE_ERRORS.lifecycleOutsideSetup}`)},a=()=>i(`getHost`).element,o=e=>n?((0,t.onCleanup)(e),!0):!1,s=t.onCleanup,c=e=>{i(`onFormReset`).formResetCallbacks.push(e)},l=e=>{let n=(0,t.effect)(e),r=()=>n.dispose();return o(r),r};exports.getHost=a,exports.onCleanup=s,exports.onFormReset=c,exports.requireSetupContext=i,exports.runWithContext=r,exports.tryRegisterCleanup=o,exports.watchEffect=l;
2
2
  //# sourceMappingURL=runtime.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"runtime.cjs","names":["t","n","e","i"],"sources":["../../../../ore/dist/runtime.js"],"sourcesContent":["import{ORE_ERRORS as e,OreApiError as t}from\"./errors.js\";import{listen as n}from\"./utils/dom.js\";import{effect as r,onCleanup as i}from\"@vielzeug/ripple\";var a=null,o=(e,t)=>{let n=a;a=e;try{return t()}finally{a=n}},s=n=>{if(a)return a;throw new t(`${n}: ${e.lifecycleOutsideSetup}`)},c=()=>s(`getHost`).element,l=e=>a?(i(e),!0):!1,u=i,d=e=>{s(`onMounted`).mountCallbacks.push(e)},f=e=>{let t=r(e),n=()=>t.dispose();return l(n),n};function p(e,t,r,i){if(s(`onEvent`),!e)return;let a=n(e,t,r,i);l(a)||a()}var m=(e,t)=>f(()=>{let n=e.value;if(n)return t(n)});export{c as getHost,u as onCleanup,m as onElement,p as onEvent,d as onMounted,s as requireSetupContext,o as runWithContext,l as tryRegisterCleanup,f as watchEffect};\n//# sourceMappingURL=runtime.js.map"],"mappings":"6FAA2J,IAAI,EAAE,KAAK,GAAG,EAAE,IAAI,CAAC,IAAI,EAAE,EAAE,EAAE,EAAE,GAAG,CAAC,OAAO,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,GAAG,CAAC,GAAG,EAAE,OAAO,EAAE,MAAM,IAAIA,EAAAA,YAAE,GAAGC,EAAE,IAAIC,EAAAA,WAAE,uBAAuB,CAAC,EAAE,MAAM,EAAE,SAAS,CAAC,CAAC,QAAQ,EAAE,GAAG,IAAA,EAAA,EAAA,UAAA,CAAK,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,EAAEC,EAAAA,UAA+C,EAAE,GAAG,CAAC,IAAI,GAAA,EAAA,EAAA,OAAA,CAAI,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC"}
1
+ {"version":3,"file":"runtime.cjs","names":["t","n","e","i"],"sources":["../../../../ore/dist/runtime.js"],"sourcesContent":["import{ORE_ERRORS as e,OreApiError as t}from\"./errors.js\";import{listen as n}from\"./utils/dom.js\";import{effect as r,onCleanup as i}from\"@vielzeug/ripple\";var a=null,o=(e,t)=>{let n=a;a=e;try{return t()}finally{a=n}},s=n=>{if(a)return a;throw new t(`${n}: ${e.lifecycleOutsideSetup}`)},c=()=>s(`getHost`).element,l=e=>a?(i(e),!0):!1,u=i,d=e=>{s(`onMounted`).mountCallbacks.push(e)},f=e=>{s(`onFormReset`).formResetCallbacks.push(e)},p=e=>{let t=r(e),n=()=>t.dispose();return l(n),n};function m(e,t,r,i){if(s(`onEvent`),!e)return;let a=n(e,t,r,i);l(a)||a()}var h=(e,t)=>p(()=>{let n=e.value;if(n)return t(n)});export{c as getHost,u as onCleanup,h as onElement,m as onEvent,f as onFormReset,d as onMounted,s as requireSetupContext,o as runWithContext,l as tryRegisterCleanup,p as watchEffect};\n//# sourceMappingURL=runtime.js.map"],"mappings":"6FAA2J,IAAI,EAAE,KAAK,GAAG,EAAE,IAAI,CAAC,IAAI,EAAE,EAAE,EAAE,EAAE,GAAG,CAAC,OAAO,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,GAAG,CAAC,GAAG,EAAE,OAAO,EAAE,MAAM,IAAIA,EAAAA,YAAE,GAAGC,EAAE,IAAIC,EAAAA,WAAE,uBAAuB,CAAC,EAAE,MAAM,EAAE,SAAS,CAAC,CAAC,QAAQ,EAAE,GAAG,IAAA,EAAA,EAAA,UAAA,CAAK,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,EAAEC,EAAAA,UAA+C,EAAE,GAAG,CAAC,EAAE,aAAa,CAAC,CAAC,mBAAmB,KAAK,CAAC,CAAC,EAAE,EAAE,GAAG,CAAC,IAAI,GAAA,EAAA,EAAA,OAAA,CAAI,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC"}
@@ -14,10 +14,12 @@ var i = null, a = (e, t) => {
14
14
  if (i) return i;
15
15
  throw new t(`${n}: ${e.lifecycleOutsideSetup}`);
16
16
  }, s = () => o("getHost").element, c = (e) => i ? (r(e), !0) : !1, l = r, u = (e) => {
17
+ o("onFormReset").formResetCallbacks.push(e);
18
+ }, d = (e) => {
17
19
  let t = n(e), r = () => t.dispose();
18
20
  return c(r), r;
19
21
  };
20
22
  //#endregion
21
- export { s as getHost, l as onCleanup, o as requireSetupContext, a as runWithContext, c as tryRegisterCleanup, u as watchEffect };
23
+ export { s as getHost, l as onCleanup, u as onFormReset, o as requireSetupContext, a as runWithContext, c as tryRegisterCleanup, d as watchEffect };
22
24
 
23
25
  //# sourceMappingURL=runtime.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"runtime.js","names":["t","n","e","i","r"],"sources":["../../../../ore/dist/runtime.js"],"sourcesContent":["import{ORE_ERRORS as e,OreApiError as t}from\"./errors.js\";import{listen as n}from\"./utils/dom.js\";import{effect as r,onCleanup as i}from\"@vielzeug/ripple\";var a=null,o=(e,t)=>{let n=a;a=e;try{return t()}finally{a=n}},s=n=>{if(a)return a;throw new t(`${n}: ${e.lifecycleOutsideSetup}`)},c=()=>s(`getHost`).element,l=e=>a?(i(e),!0):!1,u=i,d=e=>{s(`onMounted`).mountCallbacks.push(e)},f=e=>{let t=r(e),n=()=>t.dispose();return l(n),n};function p(e,t,r,i){if(s(`onEvent`),!e)return;let a=n(e,t,r,i);l(a)||a()}var m=(e,t)=>f(()=>{let n=e.value;if(n)return t(n)});export{c as getHost,u as onCleanup,m as onElement,p as onEvent,d as onMounted,s as requireSetupContext,o as runWithContext,l as tryRegisterCleanup,f as watchEffect};\n//# sourceMappingURL=runtime.js.map"],"mappings":";;;;AAA2J,IAAI,IAAE,MAAK,KAAG,GAAE,MAAI;CAAC,IAAI,IAAE;CAAE,IAAE;CAAE,IAAG;EAAC,OAAO,EAAE;CAAC,UAAQ;EAAC,IAAE;CAAC;AAAC,GAAE,KAAE,MAAG;CAAC,IAAG,GAAE,OAAO;CAAE,MAAM,IAAIA,EAAE,GAAGC,EAAE,IAAIC,EAAE,uBAAuB;AAAC,GAAE,UAAM,EAAE,SAAS,CAAC,CAAC,SAAQ,KAAE,MAAG,KAAGC,EAAE,CAAC,GAAE,CAAC,KAAG,CAAC,GAAE,IAAEA,GAA+C,KAAE,MAAG;CAAC,IAAI,IAAEC,EAAE,CAAC,GAAE,UAAM,EAAE,QAAQ;CAAE,OAAO,EAAE,CAAC,GAAE;AAAC"}
1
+ {"version":3,"file":"runtime.js","names":["t","n","e","i","r"],"sources":["../../../../ore/dist/runtime.js"],"sourcesContent":["import{ORE_ERRORS as e,OreApiError as t}from\"./errors.js\";import{listen as n}from\"./utils/dom.js\";import{effect as r,onCleanup as i}from\"@vielzeug/ripple\";var a=null,o=(e,t)=>{let n=a;a=e;try{return t()}finally{a=n}},s=n=>{if(a)return a;throw new t(`${n}: ${e.lifecycleOutsideSetup}`)},c=()=>s(`getHost`).element,l=e=>a?(i(e),!0):!1,u=i,d=e=>{s(`onMounted`).mountCallbacks.push(e)},f=e=>{s(`onFormReset`).formResetCallbacks.push(e)},p=e=>{let t=r(e),n=()=>t.dispose();return l(n),n};function m(e,t,r,i){if(s(`onEvent`),!e)return;let a=n(e,t,r,i);l(a)||a()}var h=(e,t)=>p(()=>{let n=e.value;if(n)return t(n)});export{c as getHost,u as onCleanup,h as onElement,m as onEvent,f as onFormReset,d as onMounted,s as requireSetupContext,o as runWithContext,l as tryRegisterCleanup,p as watchEffect};\n//# sourceMappingURL=runtime.js.map"],"mappings":";;;;AAA2J,IAAI,IAAE,MAAK,KAAG,GAAE,MAAI;CAAC,IAAI,IAAE;CAAE,IAAE;CAAE,IAAG;EAAC,OAAO,EAAE;CAAC,UAAQ;EAAC,IAAE;CAAC;AAAC,GAAE,KAAE,MAAG;CAAC,IAAG,GAAE,OAAO;CAAE,MAAM,IAAIA,EAAE,GAAGC,EAAE,IAAIC,EAAE,uBAAuB;AAAC,GAAE,UAAM,EAAE,SAAS,CAAC,CAAC,SAAQ,KAAE,MAAG,KAAGC,EAAE,CAAC,GAAE,CAAC,KAAG,CAAC,GAAE,IAAEA,GAA+C,KAAE,MAAG;CAAC,EAAE,aAAa,CAAC,CAAC,mBAAmB,KAAK,CAAC;AAAC,GAAE,KAAE,MAAG;CAAC,IAAI,IAAEC,EAAE,CAAC,GAAE,UAAM,EAAE,QAAQ;CAAE,OAAO,EAAE,CAAC,GAAE;AAAC"}
@@ -1,11 +1,11 @@
1
- Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./ore/dist/directives/when.cjs");require("./ore/dist/directives.cjs");const t=require("./styles/mixins/shape.css.cjs"),n=require("./styles/mixins/states.css.cjs"),r=require("./styles/mixins/theme.css.cjs"),i=require("./shared/prop-bundles.cjs"),a=require("./headless/ore.cjs"),o=require("./headless/choice-field.cjs"),s=require("./headless/nav.cjs"),c=require("./headless/light-dom.cjs"),l=require("./ore/dist/forms/field.cjs");require("./ore/dist/forms.cjs");const u=require("./inputs/shared/form-context.cjs"),d=require("./inputs/radio-group/radio-group.css.cjs");let f=require("@vielzeug/ore");require("@vielzeug/ripple");var p=(0,f.createContext)(`OreRadioGroup`),m=`ore-radio-group`;(0,f.define)(m,{formAssociated:!0,props:{...i.themableBundle,...i.sizableBundle,...i.disablableBundle,error:f.prop.string(),helper:f.prop.string(),label:f.prop.string(),name:f.prop.string(),orientation:f.prop.oneOf([`horizontal`,`vertical`],`vertical`),required:f.prop.bool(!1),value:f.prop.string()},setup(t){let n=(0,f.getHost)(),r=(0,f.useEmit)(),i=(0,f.useSlots)(),d=f.watchEffect,m=(0,f.inject)(u.FORM_CTX),h=u.useFormContext(t,m),g=null,_=o.createChoiceField({disabled:h.disabled,error:t.error,getFormField:()=>g,helper:t.helper,label:t.label,prefix:`radio-group`,signal:a.lifecycleSignal(f.onCleanup),validateOn:m?.validateOn,value:t.value});g=l.useField({disabled:_.disabled,toFormValue:e=>e,value:_.formValue});let v=_.selectedValue,y=h.disabled;(0,f.bind)({attr:{size:h.size,value:()=>v.value||null}});let b=()=>c.getLightChildrenByTag(n,`ore-radio`),x=()=>y.value?[]:b().filter(e=>!e.hasAttribute(`disabled`)),S=e=>c.getChoiceLabel(b(),e),C=(e,t)=>{_.setValues(e?[e]:[]);let n=e?[S(e)]:[];r(`change`,{labels:n,originalEvent:t,values:e?[e]:[]}),_.triggerValidation(`blur`)};(0,f.provide)(p,{color:t.color,disabled:y,name:t.name,select:C,size:t.size,value:v}),d(()=>{i.elements().value,v.value;let e=b();for(let n of e){let e=n.getAttribute(`value`)??``;n.toggleAttribute(`checked`,e===v.value),t.name.value?n.setAttribute(`name`,t.name.value):n.removeAttribute(`name`),t.color.value?n.setAttribute(`color`,t.color.value):n.removeAttribute(`color`),t.size.value?n.setAttribute(`size`,t.size.value):n.removeAttribute(`size`),n.toggleAttribute(`disabled`,y.value)}}),d(()=>{i.elements().value;let e=b(),t=!1;for(let n of e){let e=n.getAttribute(`value`)===v.value;n.setAttribute(`tabindex`,e&&!y.value?`0`:`-1`),e&&!y.value&&(t=!0)}if(!t&&e.length>0){let t=e.find(e=>!e.hasAttribute(`disabled`));t&&t.setAttribute(`tabindex`,`0`)}});let w=s.createListControl({getItems:x,keys:{next:[`ArrowDown`,`ArrowRight`],prev:[`ArrowUp`,`ArrowLeft`]},loop:!0,onNavigate:(e,t,n)=>{let r=x()[t];r&&(r.focus(),r.tagName===`ORE-RADIO`&&C(r.getAttribute(`value`)??``,n))}});(0,f.bind)({on:{change:e=>{e.target!==n&&(e.stopPropagation(),C(e.target.getAttribute(`value`)??``,e))},keydown:e=>{let t=x();if(!t.length)return;let n=t.indexOf(document.activeElement);n!==-1&&(w.set(n),w.handleKeydown(e))}}});let T=(0,f.createStableId)(`radio-group-legend`);return f.html`
1
+ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./ore/dist/directives/when.cjs");require("./ore/dist/directives.cjs");const t=require("./styles/mixins/shape.css.cjs"),n=require("./styles/mixins/states.css.cjs"),r=require("./styles/mixins/theme.css.cjs"),i=require("./shared/prop-bundles.cjs"),a=require("./headless/ore.cjs"),o=require("./headless/choice-field.cjs"),s=require("./headless/nav.cjs"),c=require("./headless/light-dom.cjs"),l=require("./ore/dist/forms/field.cjs");require("./ore/dist/forms.cjs");const u=require("./inputs/shared/form-context.cjs"),d=require("./inputs/radio-group/radio-group.css.cjs");let f=require("@vielzeug/ore");require("@vielzeug/ripple");var p=(0,f.createContext)(`OreRadioGroup`),m=`ore-radio-group`;(0,f.define)(m,{formAssociated:!0,props:{...i.themableBundle,...i.sizableBundle,...i.disablableBundle,error:f.prop.string(),helper:f.prop.string(),label:f.prop.string(),name:f.prop.string(),orientation:f.prop.oneOf([`horizontal`,`vertical`],`vertical`),required:f.prop.bool(!1),value:{...f.prop.string(),reflect:!1}},setup(t){let n=(0,f.getHost)(),r=(0,f.useEmit)(),i=(0,f.useSlots)(),d=f.watchEffect,m=(0,f.inject)(u.FORM_CTX),h=u.useFormContext(t,m),g=o.createChoiceField({disabled:h.disabled,error:t.error,helper:t.helper,label:t.label,prefix:`radio-group`,required:t.required,signal:a.lifecycleSignal(f.onCleanup),validateOn:m?.validateOn,value:t.value});g.attachFormField(l.useField({disabled:g.disabled,onReset:g.reset,toFormValue:e=>e,validationMessage:g.validationMessage,validity:g.validity,value:g.formValue}));let _=g.selectedValue,v=h.disabled;(0,f.bind)({attr:{size:h.size,value:()=>_.value||null}});let y=()=>c.getLightChildrenByTag(n,`ore-radio`),b=()=>v.value?[]:y().filter(e=>!e.hasAttribute(`disabled`)),x=e=>c.getChoiceLabel(y(),e),S=(e,t)=>{g.setValues(e?[e]:[]);let n=e?[x(e)]:[];r(`change`,{labels:n,originalEvent:t,values:e?[e]:[]}),g.triggerValidation(`blur`)};(0,f.provide)(p,{color:t.color,disabled:v,name:t.name,select:S,size:t.size,value:_}),d(()=>{i.elements().value,_.value;let e=y();for(let n of e){let e=n.getAttribute(`value`)??``;n.toggleAttribute(`checked`,e===_.value),t.name.value?n.setAttribute(`name`,t.name.value):n.removeAttribute(`name`),t.color.value?n.setAttribute(`color`,t.color.value):n.removeAttribute(`color`),t.size.value?n.setAttribute(`size`,t.size.value):n.removeAttribute(`size`),n.toggleAttribute(`disabled`,v.value)}}),d(()=>{i.elements().value;let e=y(),t=!1;for(let n of e){let e=n.getAttribute(`value`)===_.value;n.setAttribute(`tabindex`,e&&!v.value?`0`:`-1`),e&&!v.value&&(t=!0)}if(!t&&e.length>0){let t=e.find(e=>!e.hasAttribute(`disabled`));t&&t.setAttribute(`tabindex`,`0`)}});let C=s.createListControl({getItems:b,keys:{next:[`ArrowDown`,`ArrowRight`],prev:[`ArrowUp`,`ArrowLeft`]},loop:!0,onNavigate:(e,t,n)=>{let r=b()[t];r&&(r.focus(),r.tagName===`ORE-RADIO`&&S(r.getAttribute(`value`)??``,n))}});(0,f.bind)({on:{change:e=>{e.target!==n&&(e.stopPropagation(),S(e.target.getAttribute(`value`)??``,e))},keydown:e=>{let t=b();if(!t.length)return;let n=t.indexOf(document.activeElement);n!==-1&&(C.set(n),C.handleKeydown(e))}}});let w=(0,f.createStableId)(`radio-group-legend`);return f.html`
2
2
  <fieldset
3
3
  role="radiogroup"
4
4
  aria-required="${()=>String(!!t.required.value)}"
5
- :aria-invalid="${_.ariaInvalid}"
6
- :aria-errormessage="${_.ariaErrorMessage}"
7
- :aria-describedby="${_.ariaDescribedBy}">
8
- <legend id="${T}" ?hidden=${()=>!t.label.value}>
5
+ :aria-invalid="${g.ariaInvalid}"
6
+ :aria-errormessage="${g.ariaErrorMessage}"
7
+ :aria-describedby="${g.ariaDescribedBy}">
8
+ <legend id="${w}" ?hidden=${()=>!t.label.value}>
9
9
  ${t.label}${e.when(()=>!!t.required.value,()=>f.html`<span aria-hidden="true"> *</span>`)}
10
10
  </legend>
11
11
  <div class="radio-group-items" part="items">
@@ -14,11 +14,11 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
14
14
  <div
15
15
  class="helper-text"
16
16
  part="helper"
17
- id="${_.assistiveId}"
18
- :role="${()=>_.errorText.value?`alert`:null}"
17
+ id="${g.assistiveId}"
18
+ :role="${()=>g.errorText.value?`alert`:null}"
19
19
  aria-live="polite"
20
- ?hidden="${()=>!_.errorText.value&&!_.helperText.value}">
21
- ${()=>_.errorText.value||_.helperText.value}
20
+ ?hidden="${()=>!g.errorText.value&&!g.helperText.value}">
21
+ ${()=>g.errorText.value||g.helperText.value}
22
22
  </div>
23
23
  </fieldset>
24
24
  `},styles:[r.colorThemeMixin,t.sizeVariantMixin(),n.disabledStateMixin,d.default]}),exports.RADIO_GROUP_CTX=p,exports.RADIO_GROUP_TAG=m;
@@ -1 +1 @@
1
- {"version":3,"file":"radio-group.cjs","names":[],"sources":["../src/inputs/radio-group/radio-group.ts"],"sourcesContent":["import {\n createContext,\n createStableId,\n define,\n html,\n inject,\n prop,\n bind,\n getHost,\n onCleanup,\n provide,\n useEmit,\n useSlots,\n watchEffect,\n} from '@vielzeug/ore';\nimport { when } from '@vielzeug/ore/directives';\nimport { useField } from '@vielzeug/ore/forms';\nimport { type Readable } from '@vielzeug/ripple';\n\nimport type { ComponentSize, ThemeColor } from '../../types';\n\nimport {\n type ChoiceChangeDetail,\n lifecycleSignal,\n createChoiceField,\n createListControl,\n getChoiceLabel,\n getLightChildrenByTag,\n} from '../../headless';\nimport { disablableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { colorThemeMixin, disabledStateMixin, sizeVariantMixin } from '../../styles';\nimport { FORM_CTX, useFormContext } from '../shared/form-context';\nimport componentStyles from './radio-group.css?inline';\n\n/** Radio group component properties */\nexport type OreRadioGroupProps = {\n /** Theme color tint */\n color?: ThemeColor;\n /** Disabled state */\n disabled?: boolean;\n /** Error message text */\n error?: string;\n /** Helper text displayed below the items */\n helper?: string;\n /** Group label text */\n label?: string;\n /** Form field name */\n name?: string;\n /** Layout orientation */\n orientation?: 'horizontal' | 'vertical';\n /** Required field */\n required?: boolean;\n /** Items size preset */\n size?: ComponentSize;\n /** Initial selected value */\n value?: string;\n};\n\nexport type RadioGroupContext = {\n color: Readable<ThemeColor | undefined>;\n disabled: Readable<boolean>;\n name: Readable<string | undefined>;\n select: (value: string, originalEvent?: Event) => void;\n size: Readable<ComponentSize | undefined>;\n value: Readable<string | undefined>;\n};\n\nexport const RADIO_GROUP_CTX = createContext<RadioGroupContext | undefined>('OreRadioGroup');\n\n/** Events emitted by the radio-group component */\nexport type OreRadioGroupEvents = {\n /** Emitted when the selection changes */\n change: ChoiceChangeDetail;\n};\n\n/**\n * A group of radio buttons that allows users to select a single option from a set.\n * Supports keyboard navigation (arrows) and automatic value management.\n *\n * @element ore-radio-group\n *\n * @attr {string} value - Selected value\n * @attr {string} name - Form field name\n * @attr {string} label - Group label\n * @attr {string} orientation - Layout: 'vertical' | 'horizontal'\n * @attr {boolean} required - Required field\n *\n * @fires change - Emitted when a radio is selected. detail: { values: string[], labels: string[], originalEvent?: Event }\n *\n * @slot - Place `ore-radio` elements here\n *\n * @cssprop --radio-group-direction - Flex direction of the items list ('row' | 'column')\n * @cssprop --radio-group-gap - Gap between radio items\n * @part items - Items container.\n * @example\n * ```html\n * <ore-radio-group name=\"plan\" label=\"Choose a plan\" value=\"free\" required>\n * <ore-radio value=\"free\">Free</ore-radio>\n * <ore-radio value=\"pro\">Pro</ore-radio>\n * <ore-radio value=\"enterprise\">Enterprise</ore-radio>\n * </ore-radio-group>\n * <ore-radio-group name=\"direction\" orientation=\"horizontal\" color=\"primary\">\n * <ore-radio value=\"left\">Left</ore-radio>\n * <ore-radio value=\"right\">Right</ore-radio>\n * </ore-radio-group>\n * ```\n */\nexport const RADIO_GROUP_TAG = 'ore-radio-group' as const;\ndefine<OreRadioGroupProps>(RADIO_GROUP_TAG, {\n formAssociated: true,\n props: {\n ...themableBundle,\n ...sizableBundle,\n ...disablableBundle,\n error: prop.string(),\n helper: prop.string(),\n label: prop.string(),\n name: prop.string(),\n orientation: prop.oneOf(['horizontal', 'vertical'] as const, 'vertical'),\n required: prop.bool(false),\n value: prop.string(),\n },\n setup(props) {\n const el = getHost();\n const emit = useEmit<OreRadioGroupEvents>();\n const slots = useSlots();\n const watch = watchEffect;\n\n const formCtx = inject(FORM_CTX);\n const fCtxProps = useFormContext(props, formCtx);\n\n let _formField: { reportValidity(): void } | null = null;\n const choice = createChoiceField({\n disabled: fCtxProps.disabled,\n error: props.error,\n getFormField: () => _formField,\n helper: props.helper,\n label: props.label,\n prefix: 'radio-group',\n signal: lifecycleSignal(onCleanup),\n validateOn: formCtx?.validateOn,\n value: props.value,\n });\n\n _formField = useField<string>({ disabled: choice.disabled, toFormValue: (v) => v, value: choice.formValue });\n\n const selectedValue = choice.selectedValue;\n const isDisabled = fCtxProps.disabled;\n\n bind({\n attr: {\n size: fCtxProps.size,\n value: () => selectedValue.value || null,\n },\n });\n\n const getSlottedRadios = (): HTMLElement[] => getLightChildrenByTag(el, 'ore-radio');\n\n const getEnabledRadios = (): HTMLElement[] =>\n isDisabled.value ? [] : getSlottedRadios().filter((radio) => !radio.hasAttribute('disabled'));\n\n const getLabelForValue = (value: string): string => getChoiceLabel(getSlottedRadios(), value);\n\n const selectRadio = (val: string, originalEvent?: Event): void => {\n choice.setValues(val ? [val] : []);\n\n const labels = val ? [getLabelForValue(val)] : [];\n const values = val ? [val] : [];\n\n emit('change', { labels, originalEvent, values });\n choice.triggerValidation('blur');\n };\n\n provide(RADIO_GROUP_CTX, {\n color: props.color as Readable<ThemeColor | undefined>,\n disabled: isDisabled,\n name: props.name,\n select: selectRadio,\n size: props.size as Readable<ComponentSize | undefined>,\n value: selectedValue,\n });\n\n // Sync name/color/size/disabled/checked onto slotted ore-radio children.\n watch(() => {\n void slots.elements().value;\n void selectedValue.value;\n\n const radios = getSlottedRadios();\n\n for (const radio of radios) {\n const val = radio.getAttribute('value') ?? '';\n\n radio.toggleAttribute('checked', val === selectedValue.value);\n\n if (props.name.value) radio.setAttribute('name', props.name.value);\n else radio.removeAttribute('name');\n\n if (props.color.value) radio.setAttribute('color', props.color.value);\n else radio.removeAttribute('color');\n\n if (props.size.value) radio.setAttribute('size', props.size.value);\n else radio.removeAttribute('size');\n\n radio.toggleAttribute('disabled', isDisabled.value);\n }\n });\n\n // Roving tabindex: only the selected (or first) radio is tabbable.\n watch(() => {\n void slots.elements().value;\n\n const radios = getSlottedRadios();\n let hasFocusable = false;\n\n for (const radio of radios) {\n const isSelected = radio.getAttribute('value') === selectedValue.value;\n\n radio.setAttribute('tabindex', isSelected && !isDisabled.value ? '0' : '-1');\n\n if (isSelected && !isDisabled.value) hasFocusable = true;\n }\n\n if (!hasFocusable && radios.length > 0) {\n const first = radios.find((r) => !r.hasAttribute('disabled'));\n\n if (first) first.setAttribute('tabindex', '0');\n }\n });\n\n const listControl = createListControl<HTMLElement>({\n getItems: getEnabledRadios,\n keys: { next: ['ArrowDown', 'ArrowRight'], prev: ['ArrowUp', 'ArrowLeft'] },\n loop: true,\n onNavigate: (_action, index, event) => {\n const radio = getEnabledRadios()[index];\n\n if (!radio) return;\n\n radio.focus();\n\n if (radio.tagName === 'ORE-RADIO') {\n selectRadio(radio.getAttribute('value') ?? '', event);\n }\n },\n });\n\n bind({\n on: {\n change: (e: Event) => {\n if (e.target === el) return;\n\n e.stopPropagation();\n selectRadio((e.target as HTMLElement).getAttribute('value') ?? '', e);\n },\n keydown: (e: KeyboardEvent) => {\n const radios = getEnabledRadios();\n\n if (!radios.length) return;\n\n const focused = radios.indexOf(document.activeElement as HTMLElement);\n\n if (focused === -1) return;\n\n listControl.set(focused);\n listControl.handleKeydown(e);\n },\n },\n });\n\n const legendId = createStableId('radio-group-legend');\n\n return html`\n <fieldset\n role=\"radiogroup\"\n aria-required=\"${() => String(Boolean(props.required.value))}\"\n :aria-invalid=\"${choice.ariaInvalid}\"\n :aria-errormessage=\"${choice.ariaErrorMessage}\"\n :aria-describedby=\"${choice.ariaDescribedBy}\">\n <legend id=\"${legendId}\" ?hidden=${() => !props.label.value}>\n ${props.label}${when(\n () => Boolean(props.required.value),\n () => html`<span aria-hidden=\"true\"> *</span>`,\n )}\n </legend>\n <div class=\"radio-group-items\" part=\"items\">\n <slot></slot>\n </div>\n <div\n class=\"helper-text\"\n part=\"helper\"\n id=\"${choice.assistiveId}\"\n :role=\"${() => (choice.errorText.value ? 'alert' : null)}\"\n aria-live=\"polite\"\n ?hidden=\"${() => !choice.errorText.value && !choice.helperText.value}\">\n ${() => choice.errorText.value || choice.helperText.value}\n </div>\n </fieldset>\n `;\n },\n styles: [colorThemeMixin, sizeVariantMixin(), disabledStateMixin, componentStyles],\n});\n"],"mappings":"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"}
1
+ {"version":3,"file":"radio-group.cjs","names":[],"sources":["../src/inputs/radio-group/radio-group.ts"],"sourcesContent":["import {\n createContext,\n createStableId,\n define,\n html,\n inject,\n prop,\n bind,\n getHost,\n onCleanup,\n provide,\n useEmit,\n useSlots,\n watchEffect,\n} from '@vielzeug/ore';\nimport { when } from '@vielzeug/ore/directives';\nimport { useField } from '@vielzeug/ore/forms';\nimport { type Readable } from '@vielzeug/ripple';\n\nimport type { ComponentSize, ThemeColor } from '../../types';\n\nimport {\n type ChoiceChangeDetail,\n lifecycleSignal,\n createChoiceField,\n createListControl,\n getChoiceLabel,\n getLightChildrenByTag,\n} from '../../headless';\nimport { disablableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { colorThemeMixin, disabledStateMixin, sizeVariantMixin } from '../../styles';\nimport { FORM_CTX, useFormContext } from '../shared/form-context';\nimport componentStyles from './radio-group.css?inline';\n\n/** Radio group component properties */\nexport type OreRadioGroupProps = {\n /** Theme color tint */\n color?: ThemeColor;\n /** Disabled state */\n disabled?: boolean;\n /** Error message text */\n error?: string;\n /** Helper text displayed below the items */\n helper?: string;\n /** Group label text */\n label?: string;\n /** Form field name */\n name?: string;\n /** Layout orientation */\n orientation?: 'horizontal' | 'vertical';\n /** Required field */\n required?: boolean;\n /** Items size preset */\n size?: ComponentSize;\n /** Initial selected value */\n value?: string;\n};\n\nexport type RadioGroupContext = {\n color: Readable<ThemeColor | undefined>;\n disabled: Readable<boolean>;\n name: Readable<string | undefined>;\n select: (value: string, originalEvent?: Event) => void;\n size: Readable<ComponentSize | undefined>;\n value: Readable<string | undefined>;\n};\n\nexport const RADIO_GROUP_CTX = createContext<RadioGroupContext | undefined>('OreRadioGroup');\n\n/** Events emitted by the radio-group component */\nexport type OreRadioGroupEvents = {\n /** Emitted when the selection changes */\n change: ChoiceChangeDetail;\n};\n\n/**\n * A group of radio buttons that allows users to select a single option from a set.\n * Supports keyboard navigation (arrows) and automatic value management.\n *\n * @element ore-radio-group\n *\n * @attr {string} value - Selected value\n * @attr {string} name - Form field name\n * @attr {string} label - Group label\n * @attr {string} orientation - Layout: 'vertical' | 'horizontal'\n * @attr {boolean} required - Required field\n *\n * @fires change - Emitted when a radio is selected. detail: { values: string[], labels: string[], originalEvent?: Event }\n *\n * @slot - Place `ore-radio` elements here\n *\n * @cssprop --radio-group-direction - Flex direction of the items list ('row' | 'column')\n * @cssprop --radio-group-gap - Gap between radio items\n * @part items - Items container.\n * @example\n * ```html\n * <ore-radio-group name=\"plan\" label=\"Choose a plan\" value=\"free\" required>\n * <ore-radio value=\"free\">Free</ore-radio>\n * <ore-radio value=\"pro\">Pro</ore-radio>\n * <ore-radio value=\"enterprise\">Enterprise</ore-radio>\n * </ore-radio-group>\n * <ore-radio-group name=\"direction\" orientation=\"horizontal\" color=\"primary\">\n * <ore-radio value=\"left\">Left</ore-radio>\n * <ore-radio value=\"right\">Right</ore-radio>\n * </ore-radio-group>\n * ```\n */\nexport const RADIO_GROUP_TAG = 'ore-radio-group' as const;\ndefine<OreRadioGroupProps>(RADIO_GROUP_TAG, {\n formAssociated: true,\n props: {\n ...themableBundle,\n ...sizableBundle,\n ...disablableBundle,\n error: prop.string(),\n helper: prop.string(),\n label: prop.string(),\n name: prop.string(),\n orientation: prop.oneOf(['horizontal', 'vertical'] as const, 'vertical'),\n required: prop.bool(false),\n // Not auto-reflected (`reflect: false`) — the derived, interaction-updated selection\n // (`selectedValue`) is the single writer for this attribute, via `bind()` below; letting\n // `prop.string()`'s own default reflection also write the raw incoming value would leave\n // two effects racing to set the same attribute from different sources.\n value: { ...prop.string(), reflect: false },\n },\n setup(props) {\n const el = getHost();\n const emit = useEmit<OreRadioGroupEvents>();\n const slots = useSlots();\n const watch = watchEffect;\n\n const formCtx = inject(FORM_CTX);\n const fCtxProps = useFormContext(props, formCtx);\n\n const choice = createChoiceField({\n disabled: fCtxProps.disabled,\n error: props.error,\n helper: props.helper,\n label: props.label,\n prefix: 'radio-group',\n required: props.required,\n signal: lifecycleSignal(onCleanup),\n validateOn: formCtx?.validateOn,\n value: props.value,\n });\n\n choice.attachFormField(\n useField<string>({\n disabled: choice.disabled,\n onReset: choice.reset,\n toFormValue: (v) => v,\n validationMessage: choice.validationMessage,\n validity: choice.validity,\n value: choice.formValue,\n }),\n );\n\n const selectedValue = choice.selectedValue;\n const isDisabled = fCtxProps.disabled;\n\n bind({\n attr: {\n size: fCtxProps.size,\n value: () => selectedValue.value || null,\n },\n });\n\n const getSlottedRadios = (): HTMLElement[] => getLightChildrenByTag(el, 'ore-radio');\n\n const getEnabledRadios = (): HTMLElement[] =>\n isDisabled.value ? [] : getSlottedRadios().filter((radio) => !radio.hasAttribute('disabled'));\n\n const getLabelForValue = (value: string): string => getChoiceLabel(getSlottedRadios(), value);\n\n const selectRadio = (val: string, originalEvent?: Event): void => {\n choice.setValues(val ? [val] : []);\n\n const labels = val ? [getLabelForValue(val)] : [];\n const values = val ? [val] : [];\n\n emit('change', { labels, originalEvent, values });\n choice.triggerValidation('blur');\n };\n\n provide(RADIO_GROUP_CTX, {\n color: props.color as Readable<ThemeColor | undefined>,\n disabled: isDisabled,\n name: props.name,\n select: selectRadio,\n size: props.size as Readable<ComponentSize | undefined>,\n value: selectedValue,\n });\n\n // Sync name/color/size/disabled/checked onto slotted ore-radio children.\n watch(() => {\n void slots.elements().value;\n void selectedValue.value;\n\n const radios = getSlottedRadios();\n\n for (const radio of radios) {\n const val = radio.getAttribute('value') ?? '';\n\n radio.toggleAttribute('checked', val === selectedValue.value);\n\n if (props.name.value) radio.setAttribute('name', props.name.value);\n else radio.removeAttribute('name');\n\n if (props.color.value) radio.setAttribute('color', props.color.value);\n else radio.removeAttribute('color');\n\n if (props.size.value) radio.setAttribute('size', props.size.value);\n else radio.removeAttribute('size');\n\n radio.toggleAttribute('disabled', isDisabled.value);\n }\n });\n\n // Roving tabindex: only the selected (or first) radio is tabbable.\n watch(() => {\n void slots.elements().value;\n\n const radios = getSlottedRadios();\n let hasFocusable = false;\n\n for (const radio of radios) {\n const isSelected = radio.getAttribute('value') === selectedValue.value;\n\n radio.setAttribute('tabindex', isSelected && !isDisabled.value ? '0' : '-1');\n\n if (isSelected && !isDisabled.value) hasFocusable = true;\n }\n\n if (!hasFocusable && radios.length > 0) {\n const first = radios.find((r) => !r.hasAttribute('disabled'));\n\n if (first) first.setAttribute('tabindex', '0');\n }\n });\n\n const listControl = createListControl<HTMLElement>({\n getItems: getEnabledRadios,\n keys: { next: ['ArrowDown', 'ArrowRight'], prev: ['ArrowUp', 'ArrowLeft'] },\n loop: true,\n onNavigate: (_action, index, event) => {\n const radio = getEnabledRadios()[index];\n\n if (!radio) return;\n\n radio.focus();\n\n if (radio.tagName === 'ORE-RADIO') {\n selectRadio(radio.getAttribute('value') ?? '', event);\n }\n },\n });\n\n bind({\n on: {\n change: (e: Event) => {\n if (e.target === el) return;\n\n e.stopPropagation();\n selectRadio((e.target as HTMLElement).getAttribute('value') ?? '', e);\n },\n keydown: (e: KeyboardEvent) => {\n const radios = getEnabledRadios();\n\n if (!radios.length) return;\n\n const focused = radios.indexOf(document.activeElement as HTMLElement);\n\n if (focused === -1) return;\n\n listControl.set(focused);\n listControl.handleKeydown(e);\n },\n },\n });\n\n const legendId = createStableId('radio-group-legend');\n\n return html`\n <fieldset\n role=\"radiogroup\"\n aria-required=\"${() => String(Boolean(props.required.value))}\"\n :aria-invalid=\"${choice.ariaInvalid}\"\n :aria-errormessage=\"${choice.ariaErrorMessage}\"\n :aria-describedby=\"${choice.ariaDescribedBy}\">\n <legend id=\"${legendId}\" ?hidden=${() => !props.label.value}>\n ${props.label}${when(\n () => Boolean(props.required.value),\n () => html`<span aria-hidden=\"true\"> *</span>`,\n )}\n </legend>\n <div class=\"radio-group-items\" part=\"items\">\n <slot></slot>\n </div>\n <div\n class=\"helper-text\"\n part=\"helper\"\n id=\"${choice.assistiveId}\"\n :role=\"${() => (choice.errorText.value ? 'alert' : null)}\"\n aria-live=\"polite\"\n ?hidden=\"${() => !choice.errorText.value && !choice.helperText.value}\">\n ${() => choice.errorText.value || choice.helperText.value}\n </div>\n </fieldset>\n `;\n },\n styles: [colorThemeMixin, sizeVariantMixin(), disabledStateMixin, componentStyles],\n});\n"],"mappings":"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"}
@@ -28,97 +28,103 @@ y(A, {
28
28
  name: w.string(),
29
29
  orientation: w.oneOf(["horizontal", "vertical"], "vertical"),
30
30
  required: w.bool(!1),
31
- value: w.string()
31
+ value: {
32
+ ...w.string(),
33
+ reflect: !1
34
+ }
32
35
  },
33
36
  setup(t) {
34
- let n = b(), r = E(), i = D(), a = O, o = S(p), h = m(t, o), _ = null, y = c({
37
+ let n = b(), r = E(), i = D(), a = O, o = S(p), h = m(t, o), _ = c({
35
38
  disabled: h.disabled,
36
39
  error: t.error,
37
- getFormField: () => _,
38
40
  helper: t.helper,
39
41
  label: t.label,
40
42
  prefix: "radio-group",
43
+ required: t.required,
41
44
  signal: s(C),
42
45
  validateOn: o?.validateOn,
43
46
  value: t.value
44
47
  });
45
- _ = f({
46
- disabled: y.disabled,
48
+ _.attachFormField(f({
49
+ disabled: _.disabled,
50
+ onReset: _.reset,
47
51
  toFormValue: (e) => e,
48
- value: y.formValue
49
- });
50
- let w = y.selectedValue, A = h.disabled;
52
+ validationMessage: _.validationMessage,
53
+ validity: _.validity,
54
+ value: _.formValue
55
+ }));
56
+ let y = _.selectedValue, w = h.disabled;
51
57
  g({ attr: {
52
58
  size: h.size,
53
- value: () => w.value || null
59
+ value: () => y.value || null
54
60
  } });
55
- let j = () => d(n, "ore-radio"), M = () => A.value ? [] : j().filter((e) => !e.hasAttribute("disabled")), N = (e) => u(j(), e), P = (e, t) => {
56
- y.setValues(e ? [e] : []);
57
- let n = e ? [N(e)] : [];
61
+ let A = () => d(n, "ore-radio"), j = () => w.value ? [] : A().filter((e) => !e.hasAttribute("disabled")), M = (e) => u(A(), e), N = (e, t) => {
62
+ _.setValues(e ? [e] : []);
63
+ let n = e ? [M(e)] : [];
58
64
  r("change", {
59
65
  labels: n,
60
66
  originalEvent: t,
61
67
  values: e ? [e] : []
62
- }), y.triggerValidation("blur");
68
+ }), _.triggerValidation("blur");
63
69
  };
64
70
  T(k, {
65
71
  color: t.color,
66
- disabled: A,
72
+ disabled: w,
67
73
  name: t.name,
68
- select: P,
74
+ select: N,
69
75
  size: t.size,
70
- value: w
76
+ value: y
71
77
  }), a(() => {
72
- i.elements().value, w.value;
73
- let e = j();
78
+ i.elements().value, y.value;
79
+ let e = A();
74
80
  for (let n of e) {
75
81
  let e = n.getAttribute("value") ?? "";
76
- n.toggleAttribute("checked", e === w.value), t.name.value ? n.setAttribute("name", t.name.value) : n.removeAttribute("name"), t.color.value ? n.setAttribute("color", t.color.value) : n.removeAttribute("color"), t.size.value ? n.setAttribute("size", t.size.value) : n.removeAttribute("size"), n.toggleAttribute("disabled", A.value);
82
+ n.toggleAttribute("checked", e === y.value), t.name.value ? n.setAttribute("name", t.name.value) : n.removeAttribute("name"), t.color.value ? n.setAttribute("color", t.color.value) : n.removeAttribute("color"), t.size.value ? n.setAttribute("size", t.size.value) : n.removeAttribute("size"), n.toggleAttribute("disabled", w.value);
77
83
  }
78
84
  }), a(() => {
79
85
  i.elements().value;
80
- let e = j(), t = !1;
86
+ let e = A(), t = !1;
81
87
  for (let n of e) {
82
- let e = n.getAttribute("value") === w.value;
83
- n.setAttribute("tabindex", e && !A.value ? "0" : "-1"), e && !A.value && (t = !0);
88
+ let e = n.getAttribute("value") === y.value;
89
+ n.setAttribute("tabindex", e && !w.value ? "0" : "-1"), e && !w.value && (t = !0);
84
90
  }
85
91
  if (!t && e.length > 0) {
86
92
  let t = e.find((e) => !e.hasAttribute("disabled"));
87
93
  t && t.setAttribute("tabindex", "0");
88
94
  }
89
95
  });
90
- let F = l({
91
- getItems: M,
96
+ let P = l({
97
+ getItems: j,
92
98
  keys: {
93
99
  next: ["ArrowDown", "ArrowRight"],
94
100
  prev: ["ArrowUp", "ArrowLeft"]
95
101
  },
96
102
  loop: !0,
97
103
  onNavigate: (e, t, n) => {
98
- let r = M()[t];
99
- r && (r.focus(), r.tagName === "ORE-RADIO" && P(r.getAttribute("value") ?? "", n));
104
+ let r = j()[t];
105
+ r && (r.focus(), r.tagName === "ORE-RADIO" && N(r.getAttribute("value") ?? "", n));
100
106
  }
101
107
  });
102
108
  g({ on: {
103
109
  change: (e) => {
104
- e.target !== n && (e.stopPropagation(), P(e.target.getAttribute("value") ?? "", e));
110
+ e.target !== n && (e.stopPropagation(), N(e.target.getAttribute("value") ?? "", e));
105
111
  },
106
112
  keydown: (e) => {
107
- let t = M();
113
+ let t = j();
108
114
  if (!t.length) return;
109
115
  let n = t.indexOf(document.activeElement);
110
- n !== -1 && (F.set(n), F.handleKeydown(e));
116
+ n !== -1 && (P.set(n), P.handleKeydown(e));
111
117
  }
112
118
  } });
113
- let I = v("radio-group-legend");
119
+ let F = v("radio-group-legend");
114
120
  return x`
115
121
  <fieldset
116
122
  role="radiogroup"
117
123
  aria-required="${() => String(!!t.required.value)}"
118
- :aria-invalid="${y.ariaInvalid}"
119
- :aria-errormessage="${y.ariaErrorMessage}"
120
- :aria-describedby="${y.ariaDescribedBy}">
121
- <legend id="${I}" ?hidden=${() => !t.label.value}>
124
+ :aria-invalid="${_.ariaInvalid}"
125
+ :aria-errormessage="${_.ariaErrorMessage}"
126
+ :aria-describedby="${_.ariaDescribedBy}">
127
+ <legend id="${F}" ?hidden=${() => !t.label.value}>
122
128
  ${t.label}${e(() => !!t.required.value, () => x`<span aria-hidden="true"> *</span>`)}
123
129
  </legend>
124
130
  <div class="radio-group-items" part="items">
@@ -127,11 +133,11 @@ y(A, {
127
133
  <div
128
134
  class="helper-text"
129
135
  part="helper"
130
- id="${y.assistiveId}"
131
- :role="${() => y.errorText.value ? "alert" : null}"
136
+ id="${_.assistiveId}"
137
+ :role="${() => _.errorText.value ? "alert" : null}"
132
138
  aria-live="polite"
133
- ?hidden="${() => !y.errorText.value && !y.helperText.value}">
134
- ${() => y.errorText.value || y.helperText.value}
139
+ ?hidden="${() => !_.errorText.value && !_.helperText.value}">
140
+ ${() => _.errorText.value || _.helperText.value}
135
141
  </div>
136
142
  </fieldset>
137
143
  `;
@@ -1 +1 @@
1
- {"version":3,"file":"radio-group.js","names":[],"sources":["../src/inputs/radio-group/radio-group.ts"],"sourcesContent":["import {\n createContext,\n createStableId,\n define,\n html,\n inject,\n prop,\n bind,\n getHost,\n onCleanup,\n provide,\n useEmit,\n useSlots,\n watchEffect,\n} from '@vielzeug/ore';\nimport { when } from '@vielzeug/ore/directives';\nimport { useField } from '@vielzeug/ore/forms';\nimport { type Readable } from '@vielzeug/ripple';\n\nimport type { ComponentSize, ThemeColor } from '../../types';\n\nimport {\n type ChoiceChangeDetail,\n lifecycleSignal,\n createChoiceField,\n createListControl,\n getChoiceLabel,\n getLightChildrenByTag,\n} from '../../headless';\nimport { disablableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { colorThemeMixin, disabledStateMixin, sizeVariantMixin } from '../../styles';\nimport { FORM_CTX, useFormContext } from '../shared/form-context';\nimport componentStyles from './radio-group.css?inline';\n\n/** Radio group component properties */\nexport type OreRadioGroupProps = {\n /** Theme color tint */\n color?: ThemeColor;\n /** Disabled state */\n disabled?: boolean;\n /** Error message text */\n error?: string;\n /** Helper text displayed below the items */\n helper?: string;\n /** Group label text */\n label?: string;\n /** Form field name */\n name?: string;\n /** Layout orientation */\n orientation?: 'horizontal' | 'vertical';\n /** Required field */\n required?: boolean;\n /** Items size preset */\n size?: ComponentSize;\n /** Initial selected value */\n value?: string;\n};\n\nexport type RadioGroupContext = {\n color: Readable<ThemeColor | undefined>;\n disabled: Readable<boolean>;\n name: Readable<string | undefined>;\n select: (value: string, originalEvent?: Event) => void;\n size: Readable<ComponentSize | undefined>;\n value: Readable<string | undefined>;\n};\n\nexport const RADIO_GROUP_CTX = createContext<RadioGroupContext | undefined>('OreRadioGroup');\n\n/** Events emitted by the radio-group component */\nexport type OreRadioGroupEvents = {\n /** Emitted when the selection changes */\n change: ChoiceChangeDetail;\n};\n\n/**\n * A group of radio buttons that allows users to select a single option from a set.\n * Supports keyboard navigation (arrows) and automatic value management.\n *\n * @element ore-radio-group\n *\n * @attr {string} value - Selected value\n * @attr {string} name - Form field name\n * @attr {string} label - Group label\n * @attr {string} orientation - Layout: 'vertical' | 'horizontal'\n * @attr {boolean} required - Required field\n *\n * @fires change - Emitted when a radio is selected. detail: { values: string[], labels: string[], originalEvent?: Event }\n *\n * @slot - Place `ore-radio` elements here\n *\n * @cssprop --radio-group-direction - Flex direction of the items list ('row' | 'column')\n * @cssprop --radio-group-gap - Gap between radio items\n * @part items - Items container.\n * @example\n * ```html\n * <ore-radio-group name=\"plan\" label=\"Choose a plan\" value=\"free\" required>\n * <ore-radio value=\"free\">Free</ore-radio>\n * <ore-radio value=\"pro\">Pro</ore-radio>\n * <ore-radio value=\"enterprise\">Enterprise</ore-radio>\n * </ore-radio-group>\n * <ore-radio-group name=\"direction\" orientation=\"horizontal\" color=\"primary\">\n * <ore-radio value=\"left\">Left</ore-radio>\n * <ore-radio value=\"right\">Right</ore-radio>\n * </ore-radio-group>\n * ```\n */\nexport const RADIO_GROUP_TAG = 'ore-radio-group' as const;\ndefine<OreRadioGroupProps>(RADIO_GROUP_TAG, {\n formAssociated: true,\n props: {\n ...themableBundle,\n ...sizableBundle,\n ...disablableBundle,\n error: prop.string(),\n helper: prop.string(),\n label: prop.string(),\n name: prop.string(),\n orientation: prop.oneOf(['horizontal', 'vertical'] as const, 'vertical'),\n required: prop.bool(false),\n value: prop.string(),\n },\n setup(props) {\n const el = getHost();\n const emit = useEmit<OreRadioGroupEvents>();\n const slots = useSlots();\n const watch = watchEffect;\n\n const formCtx = inject(FORM_CTX);\n const fCtxProps = useFormContext(props, formCtx);\n\n let _formField: { reportValidity(): void } | null = null;\n const choice = createChoiceField({\n disabled: fCtxProps.disabled,\n error: props.error,\n getFormField: () => _formField,\n helper: props.helper,\n label: props.label,\n prefix: 'radio-group',\n signal: lifecycleSignal(onCleanup),\n validateOn: formCtx?.validateOn,\n value: props.value,\n });\n\n _formField = useField<string>({ disabled: choice.disabled, toFormValue: (v) => v, value: choice.formValue });\n\n const selectedValue = choice.selectedValue;\n const isDisabled = fCtxProps.disabled;\n\n bind({\n attr: {\n size: fCtxProps.size,\n value: () => selectedValue.value || null,\n },\n });\n\n const getSlottedRadios = (): HTMLElement[] => getLightChildrenByTag(el, 'ore-radio');\n\n const getEnabledRadios = (): HTMLElement[] =>\n isDisabled.value ? [] : getSlottedRadios().filter((radio) => !radio.hasAttribute('disabled'));\n\n const getLabelForValue = (value: string): string => getChoiceLabel(getSlottedRadios(), value);\n\n const selectRadio = (val: string, originalEvent?: Event): void => {\n choice.setValues(val ? [val] : []);\n\n const labels = val ? [getLabelForValue(val)] : [];\n const values = val ? [val] : [];\n\n emit('change', { labels, originalEvent, values });\n choice.triggerValidation('blur');\n };\n\n provide(RADIO_GROUP_CTX, {\n color: props.color as Readable<ThemeColor | undefined>,\n disabled: isDisabled,\n name: props.name,\n select: selectRadio,\n size: props.size as Readable<ComponentSize | undefined>,\n value: selectedValue,\n });\n\n // Sync name/color/size/disabled/checked onto slotted ore-radio children.\n watch(() => {\n void slots.elements().value;\n void selectedValue.value;\n\n const radios = getSlottedRadios();\n\n for (const radio of radios) {\n const val = radio.getAttribute('value') ?? '';\n\n radio.toggleAttribute('checked', val === selectedValue.value);\n\n if (props.name.value) radio.setAttribute('name', props.name.value);\n else radio.removeAttribute('name');\n\n if (props.color.value) radio.setAttribute('color', props.color.value);\n else radio.removeAttribute('color');\n\n if (props.size.value) radio.setAttribute('size', props.size.value);\n else radio.removeAttribute('size');\n\n radio.toggleAttribute('disabled', isDisabled.value);\n }\n });\n\n // Roving tabindex: only the selected (or first) radio is tabbable.\n watch(() => {\n void slots.elements().value;\n\n const radios = getSlottedRadios();\n let hasFocusable = false;\n\n for (const radio of radios) {\n const isSelected = radio.getAttribute('value') === selectedValue.value;\n\n radio.setAttribute('tabindex', isSelected && !isDisabled.value ? '0' : '-1');\n\n if (isSelected && !isDisabled.value) hasFocusable = true;\n }\n\n if (!hasFocusable && radios.length > 0) {\n const first = radios.find((r) => !r.hasAttribute('disabled'));\n\n if (first) first.setAttribute('tabindex', '0');\n }\n });\n\n const listControl = createListControl<HTMLElement>({\n getItems: getEnabledRadios,\n keys: { next: ['ArrowDown', 'ArrowRight'], prev: ['ArrowUp', 'ArrowLeft'] },\n loop: true,\n onNavigate: (_action, index, event) => {\n const radio = getEnabledRadios()[index];\n\n if (!radio) return;\n\n radio.focus();\n\n if (radio.tagName === 'ORE-RADIO') {\n selectRadio(radio.getAttribute('value') ?? '', event);\n }\n },\n });\n\n bind({\n on: {\n change: (e: Event) => {\n if (e.target === el) return;\n\n e.stopPropagation();\n selectRadio((e.target as HTMLElement).getAttribute('value') ?? '', e);\n },\n keydown: (e: KeyboardEvent) => {\n const radios = getEnabledRadios();\n\n if (!radios.length) return;\n\n const focused = radios.indexOf(document.activeElement as HTMLElement);\n\n if (focused === -1) return;\n\n listControl.set(focused);\n listControl.handleKeydown(e);\n },\n },\n });\n\n const legendId = createStableId('radio-group-legend');\n\n return html`\n <fieldset\n role=\"radiogroup\"\n aria-required=\"${() => String(Boolean(props.required.value))}\"\n :aria-invalid=\"${choice.ariaInvalid}\"\n :aria-errormessage=\"${choice.ariaErrorMessage}\"\n :aria-describedby=\"${choice.ariaDescribedBy}\">\n <legend id=\"${legendId}\" ?hidden=${() => !props.label.value}>\n ${props.label}${when(\n () => Boolean(props.required.value),\n () => html`<span aria-hidden=\"true\"> *</span>`,\n )}\n </legend>\n <div class=\"radio-group-items\" part=\"items\">\n <slot></slot>\n </div>\n <div\n class=\"helper-text\"\n part=\"helper\"\n id=\"${choice.assistiveId}\"\n :role=\"${() => (choice.errorText.value ? 'alert' : null)}\"\n aria-live=\"polite\"\n ?hidden=\"${() => !choice.errorText.value && !choice.helperText.value}\">\n ${() => choice.errorText.value || choice.helperText.value}\n </div>\n </fieldset>\n `;\n },\n styles: [colorThemeMixin, sizeVariantMixin(), disabledStateMixin, componentStyles],\n});\n"],"mappings":"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"}
1
+ {"version":3,"file":"radio-group.js","names":[],"sources":["../src/inputs/radio-group/radio-group.ts"],"sourcesContent":["import {\n createContext,\n createStableId,\n define,\n html,\n inject,\n prop,\n bind,\n getHost,\n onCleanup,\n provide,\n useEmit,\n useSlots,\n watchEffect,\n} from '@vielzeug/ore';\nimport { when } from '@vielzeug/ore/directives';\nimport { useField } from '@vielzeug/ore/forms';\nimport { type Readable } from '@vielzeug/ripple';\n\nimport type { ComponentSize, ThemeColor } from '../../types';\n\nimport {\n type ChoiceChangeDetail,\n lifecycleSignal,\n createChoiceField,\n createListControl,\n getChoiceLabel,\n getLightChildrenByTag,\n} from '../../headless';\nimport { disablableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { colorThemeMixin, disabledStateMixin, sizeVariantMixin } from '../../styles';\nimport { FORM_CTX, useFormContext } from '../shared/form-context';\nimport componentStyles from './radio-group.css?inline';\n\n/** Radio group component properties */\nexport type OreRadioGroupProps = {\n /** Theme color tint */\n color?: ThemeColor;\n /** Disabled state */\n disabled?: boolean;\n /** Error message text */\n error?: string;\n /** Helper text displayed below the items */\n helper?: string;\n /** Group label text */\n label?: string;\n /** Form field name */\n name?: string;\n /** Layout orientation */\n orientation?: 'horizontal' | 'vertical';\n /** Required field */\n required?: boolean;\n /** Items size preset */\n size?: ComponentSize;\n /** Initial selected value */\n value?: string;\n};\n\nexport type RadioGroupContext = {\n color: Readable<ThemeColor | undefined>;\n disabled: Readable<boolean>;\n name: Readable<string | undefined>;\n select: (value: string, originalEvent?: Event) => void;\n size: Readable<ComponentSize | undefined>;\n value: Readable<string | undefined>;\n};\n\nexport const RADIO_GROUP_CTX = createContext<RadioGroupContext | undefined>('OreRadioGroup');\n\n/** Events emitted by the radio-group component */\nexport type OreRadioGroupEvents = {\n /** Emitted when the selection changes */\n change: ChoiceChangeDetail;\n};\n\n/**\n * A group of radio buttons that allows users to select a single option from a set.\n * Supports keyboard navigation (arrows) and automatic value management.\n *\n * @element ore-radio-group\n *\n * @attr {string} value - Selected value\n * @attr {string} name - Form field name\n * @attr {string} label - Group label\n * @attr {string} orientation - Layout: 'vertical' | 'horizontal'\n * @attr {boolean} required - Required field\n *\n * @fires change - Emitted when a radio is selected. detail: { values: string[], labels: string[], originalEvent?: Event }\n *\n * @slot - Place `ore-radio` elements here\n *\n * @cssprop --radio-group-direction - Flex direction of the items list ('row' | 'column')\n * @cssprop --radio-group-gap - Gap between radio items\n * @part items - Items container.\n * @example\n * ```html\n * <ore-radio-group name=\"plan\" label=\"Choose a plan\" value=\"free\" required>\n * <ore-radio value=\"free\">Free</ore-radio>\n * <ore-radio value=\"pro\">Pro</ore-radio>\n * <ore-radio value=\"enterprise\">Enterprise</ore-radio>\n * </ore-radio-group>\n * <ore-radio-group name=\"direction\" orientation=\"horizontal\" color=\"primary\">\n * <ore-radio value=\"left\">Left</ore-radio>\n * <ore-radio value=\"right\">Right</ore-radio>\n * </ore-radio-group>\n * ```\n */\nexport const RADIO_GROUP_TAG = 'ore-radio-group' as const;\ndefine<OreRadioGroupProps>(RADIO_GROUP_TAG, {\n formAssociated: true,\n props: {\n ...themableBundle,\n ...sizableBundle,\n ...disablableBundle,\n error: prop.string(),\n helper: prop.string(),\n label: prop.string(),\n name: prop.string(),\n orientation: prop.oneOf(['horizontal', 'vertical'] as const, 'vertical'),\n required: prop.bool(false),\n // Not auto-reflected (`reflect: false`) — the derived, interaction-updated selection\n // (`selectedValue`) is the single writer for this attribute, via `bind()` below; letting\n // `prop.string()`'s own default reflection also write the raw incoming value would leave\n // two effects racing to set the same attribute from different sources.\n value: { ...prop.string(), reflect: false },\n },\n setup(props) {\n const el = getHost();\n const emit = useEmit<OreRadioGroupEvents>();\n const slots = useSlots();\n const watch = watchEffect;\n\n const formCtx = inject(FORM_CTX);\n const fCtxProps = useFormContext(props, formCtx);\n\n const choice = createChoiceField({\n disabled: fCtxProps.disabled,\n error: props.error,\n helper: props.helper,\n label: props.label,\n prefix: 'radio-group',\n required: props.required,\n signal: lifecycleSignal(onCleanup),\n validateOn: formCtx?.validateOn,\n value: props.value,\n });\n\n choice.attachFormField(\n useField<string>({\n disabled: choice.disabled,\n onReset: choice.reset,\n toFormValue: (v) => v,\n validationMessage: choice.validationMessage,\n validity: choice.validity,\n value: choice.formValue,\n }),\n );\n\n const selectedValue = choice.selectedValue;\n const isDisabled = fCtxProps.disabled;\n\n bind({\n attr: {\n size: fCtxProps.size,\n value: () => selectedValue.value || null,\n },\n });\n\n const getSlottedRadios = (): HTMLElement[] => getLightChildrenByTag(el, 'ore-radio');\n\n const getEnabledRadios = (): HTMLElement[] =>\n isDisabled.value ? [] : getSlottedRadios().filter((radio) => !radio.hasAttribute('disabled'));\n\n const getLabelForValue = (value: string): string => getChoiceLabel(getSlottedRadios(), value);\n\n const selectRadio = (val: string, originalEvent?: Event): void => {\n choice.setValues(val ? [val] : []);\n\n const labels = val ? [getLabelForValue(val)] : [];\n const values = val ? [val] : [];\n\n emit('change', { labels, originalEvent, values });\n choice.triggerValidation('blur');\n };\n\n provide(RADIO_GROUP_CTX, {\n color: props.color as Readable<ThemeColor | undefined>,\n disabled: isDisabled,\n name: props.name,\n select: selectRadio,\n size: props.size as Readable<ComponentSize | undefined>,\n value: selectedValue,\n });\n\n // Sync name/color/size/disabled/checked onto slotted ore-radio children.\n watch(() => {\n void slots.elements().value;\n void selectedValue.value;\n\n const radios = getSlottedRadios();\n\n for (const radio of radios) {\n const val = radio.getAttribute('value') ?? '';\n\n radio.toggleAttribute('checked', val === selectedValue.value);\n\n if (props.name.value) radio.setAttribute('name', props.name.value);\n else radio.removeAttribute('name');\n\n if (props.color.value) radio.setAttribute('color', props.color.value);\n else radio.removeAttribute('color');\n\n if (props.size.value) radio.setAttribute('size', props.size.value);\n else radio.removeAttribute('size');\n\n radio.toggleAttribute('disabled', isDisabled.value);\n }\n });\n\n // Roving tabindex: only the selected (or first) radio is tabbable.\n watch(() => {\n void slots.elements().value;\n\n const radios = getSlottedRadios();\n let hasFocusable = false;\n\n for (const radio of radios) {\n const isSelected = radio.getAttribute('value') === selectedValue.value;\n\n radio.setAttribute('tabindex', isSelected && !isDisabled.value ? '0' : '-1');\n\n if (isSelected && !isDisabled.value) hasFocusable = true;\n }\n\n if (!hasFocusable && radios.length > 0) {\n const first = radios.find((r) => !r.hasAttribute('disabled'));\n\n if (first) first.setAttribute('tabindex', '0');\n }\n });\n\n const listControl = createListControl<HTMLElement>({\n getItems: getEnabledRadios,\n keys: { next: ['ArrowDown', 'ArrowRight'], prev: ['ArrowUp', 'ArrowLeft'] },\n loop: true,\n onNavigate: (_action, index, event) => {\n const radio = getEnabledRadios()[index];\n\n if (!radio) return;\n\n radio.focus();\n\n if (radio.tagName === 'ORE-RADIO') {\n selectRadio(radio.getAttribute('value') ?? '', event);\n }\n },\n });\n\n bind({\n on: {\n change: (e: Event) => {\n if (e.target === el) return;\n\n e.stopPropagation();\n selectRadio((e.target as HTMLElement).getAttribute('value') ?? '', e);\n },\n keydown: (e: KeyboardEvent) => {\n const radios = getEnabledRadios();\n\n if (!radios.length) return;\n\n const focused = radios.indexOf(document.activeElement as HTMLElement);\n\n if (focused === -1) return;\n\n listControl.set(focused);\n listControl.handleKeydown(e);\n },\n },\n });\n\n const legendId = createStableId('radio-group-legend');\n\n return html`\n <fieldset\n role=\"radiogroup\"\n aria-required=\"${() => String(Boolean(props.required.value))}\"\n :aria-invalid=\"${choice.ariaInvalid}\"\n :aria-errormessage=\"${choice.ariaErrorMessage}\"\n :aria-describedby=\"${choice.ariaDescribedBy}\">\n <legend id=\"${legendId}\" ?hidden=${() => !props.label.value}>\n ${props.label}${when(\n () => Boolean(props.required.value),\n () => html`<span aria-hidden=\"true\"> *</span>`,\n )}\n </legend>\n <div class=\"radio-group-items\" part=\"items\">\n <slot></slot>\n </div>\n <div\n class=\"helper-text\"\n part=\"helper\"\n id=\"${choice.assistiveId}\"\n :role=\"${() => (choice.errorText.value ? 'alert' : null)}\"\n aria-live=\"polite\"\n ?hidden=\"${() => !choice.errorText.value && !choice.helperText.value}\">\n ${() => choice.errorText.value || choice.helperText.value}\n </div>\n </fieldset>\n `;\n },\n styles: [colorThemeMixin, sizeVariantMixin(), disabledStateMixin, componentStyles],\n});\n"],"mappings":"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"}
package/dist/radio.cjs CHANGED
@@ -1,10 +1,10 @@
1
- Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./styles/mixins/shape.css.cjs"),n=require("./styles/mixins/states.css.cjs"),r=require("./styles/mixins/theme.css.cjs"),i=require("./shared/prop-bundles.cjs"),a=require("./shared/size-presets.cjs"),o=require("./headless/ore.cjs"),s=require("./headless/checkable.cjs"),c=require("./headless/nav.cjs"),l=require("./ore/dist/forms/field.cjs");require("./ore/dist/forms.cjs");const u=require("./inputs/shared/form-context.cjs"),d=require("./inputs/shared/templates.cjs"),f=require("./radio-group.cjs"),p=require("./inputs/radio/radio.css.cjs");let m=require("@vielzeug/ore"),h=require("@vielzeug/ripple");var g=`ore-radio`;(0,m.define)(g,{formAssociated:!0,props:{...i.themableBundle,...i.sizableBundle,...i.disablableBundle,checked:m.prop.bool(!1),error:m.prop.string(),helper:m.prop.string(),name:m.prop.string(),value:m.prop.string()},setup(e){let t=(0,m.getHost)(),n=(0,m.useEmit)(),r=(0,m.inject)(f.RADIO_GROUP_CTX),i=(0,m.inject)(u.FORM_CTX),a=u.useFormContext(e,i),p=(0,h.computed)(()=>r?.name.value||e.name.value||``),g=(0,h.computed)(()=>r?.size.value??a.size.value),_=(0,h.computed)(()=>r?.color.value??e.color.value),v=(0,h.computed)(()=>r?r.value.value===e.value.value:!!e.checked.value),y=()=>{let e=p.value;return e?Array.from(document.querySelectorAll(`ore-radio[name="${e}"]`)).filter(e=>!e.hasAttribute(`disabled`)):[]},b=(e,t)=>{if(r){r.select(e.getAttribute(`value`)??``,t);return}e.click()},x=c.createListControl({getItems:()=>y(),keys:{next:[`ArrowDown`,`ArrowRight`],prev:[`ArrowUp`,`ArrowLeft`]},loop:!0,onNavigate:(e,t,n)=>{let r=y()[t];r&&(r.focus(),b(r,n))}}),S=t=>{if(!w.checked.value){if(r){r.select(e.value.value??``,t);return}w.toggle(t??new Event(`change`))}},C=null,w=s.createCheckable({checked:v,disabled:(0,h.computed)(()=>a.disabled.value||!!r?.disabled.value),error:e.error,getFormField:()=>C,helper:e.helper,onToggle:e=>{n(`change`,e)},prefix:`radio`,signal:o.lifecycleSignal(m.onCleanup),validateOn:i?.validateOn,value:e.value});C=l.useField({disabled:w.disabled,toFormValue:e=>e,value:w.checkableFormValue});let{assistiveId:T,checked:E,disabled:D,errorText:O,helperText:k,labelId:A,toggle:j}=w;return(0,m.bind)({attr:{ariaChecked:()=>E.value?`true`:`false`,ariaDescribedby:()=>O.value||k.value?T:null,ariaDisabled:()=>D.value?`true`:null,ariaInvalid:()=>O.value?`true`:null,ariaLabelledby:A,checked:E,color:_,disabled:()=>D.value?!0:void 0,name:()=>p.value||void 0,role:`radio`,size:g,tabindex:()=>{if(!D.value)return E.value?0:-1}},class:()=>({"is-checked":E.value,"is-disabled":D.value}),on:{click:n=>{if(!D.value)if(r)r.select(e.value.value??``,n);else{if(!p.value)return;if(!E.value){let r=e.name.value;document.querySelectorAll(`ore-radio[name="${r}"]`).forEach(e=>{e!==t&&e.removeAttribute(`checked`)}),j(n)}}},keydown:e=>{if(e.key===` `||e.key===`Enter`){e.preventDefault(),S(e);return}let n=y();if(n.length===0)return;let r=n.indexOf(t);r!==-1&&(x.set(r),x.handleKeydown(e))}}}),m.html`
1
+ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./styles/mixins/shape.css.cjs"),n=require("./styles/mixins/states.css.cjs"),r=require("./styles/mixins/theme.css.cjs"),i=require("./shared/prop-bundles.cjs"),a=require("./shared/size-presets.cjs"),o=require("./headless/ore.cjs"),s=require("./headless/checkable.cjs"),c=require("./headless/nav.cjs"),l=require("./ore/dist/forms/field.cjs");require("./ore/dist/forms.cjs");const u=require("./inputs/shared/form-context.cjs"),d=require("./inputs/shared/templates.cjs"),f=require("./radio-group.cjs"),p=require("./inputs/radio/radio.css.cjs");let m=require("@vielzeug/ore"),h=require("@vielzeug/ripple");var g=`ore-radio`;(0,m.define)(g,{formAssociated:!0,props:{...i.themableBundle,...i.sizableBundle,...i.disablableBundle,checked:m.prop.bool(!1),error:m.prop.string(),helper:m.prop.string(),name:m.prop.string(),value:m.prop.string()},setup(e){let t=(0,m.getHost)(),n=(0,m.useEmit)(),r=(0,m.inject)(f.RADIO_GROUP_CTX),i=(0,m.inject)(u.FORM_CTX),a=u.useFormContext(e,i),p=(0,h.computed)(()=>r?.name.value||e.name.value||``),g=(0,h.computed)(()=>r?.size.value??a.size.value),_=(0,h.computed)(()=>r?.color.value??e.color.value),v=(0,h.computed)(()=>r?r.value.value===e.value.value:!!e.checked.value),y=()=>{let e=p.value;return e?Array.from(document.querySelectorAll(`ore-radio[name="${e}"]`)).filter(e=>!e.hasAttribute(`disabled`)):[]},b=(e,t)=>{if(r){r.select(e.getAttribute(`value`)??``,t);return}e.click()},x=c.createListControl({getItems:()=>y(),keys:{next:[`ArrowDown`,`ArrowRight`],prev:[`ArrowUp`,`ArrowLeft`]},loop:!0,onNavigate:(e,t,n)=>{let r=y()[t];r&&(r.focus(),b(r,n))}}),S=t=>{if(!C.checked.value){if(r){r.select(e.value.value??``,t);return}C.toggle(t??new Event(`change`))}},C=s.createCheckable({checked:v,disabled:(0,h.computed)(()=>a.disabled.value||!!r?.disabled.value),error:e.error,helper:e.helper,onToggle:e=>{n(`change`,e)},prefix:`radio`,signal:o.lifecycleSignal(m.onCleanup),validateOn:i?.validateOn,value:e.value});C.attachFormField(l.useField({disabled:C.disabled,toFormValue:e=>e,value:C.checkableFormValue}));let{assistiveId:w,checked:T,disabled:E,errorText:D,helperText:O,labelId:k,toggle:A}=C;return(0,m.bind)({attr:{ariaChecked:()=>T.value?`true`:`false`,ariaDescribedby:()=>D.value||O.value?w:null,ariaDisabled:()=>E.value?`true`:null,ariaInvalid:()=>D.value?`true`:null,ariaLabelledby:k,checked:T,color:_,disabled:()=>E.value?!0:void 0,name:()=>p.value||void 0,role:`radio`,size:g,tabindex:()=>{if(!E.value)return T.value?0:-1}},class:()=>({"is-checked":T.value,"is-disabled":E.value}),on:{click:n=>{if(!E.value)if(r)r.select(e.value.value??``,n);else{if(!p.value)return;if(!T.value){let r=e.name.value;document.querySelectorAll(`ore-radio[name="${r}"]`).forEach(e=>{e!==t&&e.removeAttribute(`checked`)}),A(n)}}},keydown:e=>{if(e.key===` `||e.key===`Enter`){e.preventDefault(),S(e);return}let n=y();if(n.length===0)return;let r=n.indexOf(t);r!==-1&&(x.set(r),x.handleKeydown(e))}}}),m.html`
2
2
  <div class="radio-wrapper" part="radio">
3
3
  <div class="circle" part="circle">
4
4
  <div class="dot" part="dot"></div>
5
5
  </div>
6
6
  </div>
7
- <span class="label" part="label" id="${A}"><slot></slot></span>
8
- ${d.renderHelperRegion(T,O,k)}
7
+ <span class="label" part="label" id="${k}"><slot></slot></span>
8
+ ${d.renderHelperRegion(w,D,O)}
9
9
  `},styles:[r.colorThemeMixin,r.forcedColorsFormControlMixin,n.disabledStateMixin,e.coarsePointerMixin,t.sizeVariantMixin(a.CONTROL_SIZE_PRESET),p.default]}),exports.RADIO_TAG=g;
10
10
  //# sourceMappingURL=radio.cjs.map