ui-ingredients 0.0.36 → 0.0.37

package/dist/checkbox/create-checkbox.svelte.js

@@ -22,6 +22,17 @@ export function createCheckbox(props) {
         dir: locale?.dir,
         getRootNode: environment?.getRootNode,
     }));
-    const api = $derived(reflect(() => checkbox.connect(state, send, normalizeProps)));
+    const api = $derived(reflect(() => {
+        const o = checkbox.connect(state, send, normalizeProps);
+        return {
+            ...o,
+            getHiddenInputProps() {
+                return {
+                    'aria-describedby': field?.['aria-describedby'],
+                    ...o.getHiddenInputProps(),
+                };
+            },
+        };
+    }));
     return api;
 }

package/dist/checkbox/hidden-input.svelte

@@ -5,16 +5,14 @@
 </script>
 
 <script lang="ts">
-  import {getFieldContext} from '../field/context.svelte.js';
   import {mergeProps} from '../merge-props.js';
   import {checkboxContext} from './context.svelte.js';
 
   let {...props}: CheckboxHiddenInputProps = $props();
 
-  let field = getFieldContext();
   let checkbox = checkboxContext.get();
 
   let mergedProps = $derived(mergeProps(props, checkbox.getHiddenInputProps()));
 </script>
 
-<input aria-describedby={field?.['aria-describedby']} {...mergedProps} />
+<input {...mergedProps} />

package/dist/combobox/create-combobox.svelte.js

@@ -31,9 +31,18 @@ export function createCombobox(props) {
         'open.controlled': props.open != null,
         collection,
     }));
-    const api = $derived(reflect(() => ({
-        ...combobox.connect(state, send, normalizeProps),
-        collection,
-    })));
+    const api = $derived(reflect(() => {
+        const o = combobox.connect(state, send, normalizeProps);
+        return {
+            ...o,
+            getInputProps() {
+                return {
+                    'aria-describedby': field?.['aria-describedby'],
+                    ...o.getInputProps(),
+                };
+            },
+            collection,
+        };
+    }));
     return api;
 }

package/dist/combobox/input.svelte

@@ -7,13 +7,11 @@
 </script>
 
 <script lang="ts">
-  import {getFieldContext} from '../field/context.svelte.js';
   import {mergeProps} from '../merge-props.js';
   import {comboboxContext} from './context.svelte.js';
 
   let {asChild, ...props}: ComboboxInputProps = $props();
 
-  let field = getFieldContext();
   let combobox = comboboxContext.get();
 
   let mergedProps = $derived(mergeProps(props, combobox.getInputProps()));
@@ -22,5 +20,5 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <input aria-describedby={field?.['aria-describedby']} {...mergedProps} />
+  <input {...mergedProps} />
 {/if}

package/dist/editable/create-editable.svelte.js

@@ -24,6 +24,17 @@ export function createEditable(props) {
         getRootNode: environment?.getRootNode,
         'edit.controlled': props.edit != null,
     }));
-    const api = $derived(reflect(() => editable.connect(state, send, normalizeProps)));
+    const api = $derived(reflect(() => {
+        const o = editable.connect(state, send, normalizeProps);
+        return {
+            ...o,
+            getInputProps() {
+                return {
+                    'aria-describedby': field?.['aria-describedby'],
+                    ...o.getInputProps(),
+                };
+            },
+        };
+    }));
     return api;
 }

package/dist/editable/input.svelte

@@ -7,13 +7,11 @@
 </script>
 
 <script lang="ts">
-  import {getFieldContext} from '../field/context.svelte.js';
   import {mergeProps} from '../merge-props.js';
   import {editableContext} from './context.svelte.js';
 
   let {asChild, ...props}: EditableInputProps = $props();
 
-  let field = getFieldContext();
   let editable = editableContext.get();
 
   let mergedProps = $derived(mergeProps(props, editable.getInputProps()));
@@ -22,5 +20,5 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <input aria-describedby={field?.['aria-describedby']} {...mergedProps} />
+  <input {...mergedProps} />
 {/if}

package/dist/field/create-field.svelte.js

@@ -76,6 +76,7 @@ export function createField(props) {
             ...parts.errorText.attrs,
             id: ids.errorText,
             hidden: !hasErrorText,
+            'aria-live': 'polite',
             'data-invalid': dataAttr(invalid),
             'data-disabled': dataAttr(disabled),
             'data-required': dataAttr(required),

package/dist/file-upload/create-file-upload.svelte.js

@@ -21,6 +21,17 @@ export function createFileUpload(props) {
         locale: props.locale ?? locale?.locale,
         getRootNode: environment?.getRootNode,
     }));
-    const api = $derived(reflect(() => fileUpload.connect(state, send, normalizeProps)));
+    const api = $derived(reflect(() => {
+        const o = fileUpload.connect(state, send, normalizeProps);
+        return {
+            ...o,
+            getHiddenInputProps() {
+                return {
+                    'aria-describedby': field?.['aria-describedby'],
+                    ...o.getHiddenInputProps(),
+                };
+            },
+        };
+    }));
     return api;
 }

package/dist/file-upload/hidden-input.svelte

@@ -5,13 +5,11 @@
 </script>
 
 <script lang="ts">
-  import {getFieldContext} from '../field/context.svelte.js';
   import {mergeProps} from '../merge-props.js';
   import {fileUploadContext} from './context.svelte.js';
 
   let {...props}: FileUploadHiddenInputProps = $props();
 
-  let field = getFieldContext();
   let fileUpload = fileUploadContext.get();
 
   let mergedProps = $derived(
@@ -19,4 +17,4 @@
   );
 </script>
 
-<input aria-describedby={field?.['aria-describedby']} {...mergedProps} />
+<input {...mergedProps} />

package/dist/number-input/create-number-input.svelte.js

@@ -23,6 +23,17 @@ export function createNumberInput(props) {
         locale: props.locale ?? locale?.locale,
         getRootNode: environment?.getRootNode,
     }));
-    const api = $derived(reflect(() => numberInput.connect(state, send, normalizeProps)));
+    const api = $derived(reflect(() => {
+        const o = numberInput.connect(state, send, normalizeProps);
+        return {
+            ...o,
+            getInputProps() {
+                return {
+                    'aria-describedby': field?.['aria-describedby'],
+                    ...o.getInputProps(),
+                };
+            },
+        };
+    }));
     return api;
 }

package/dist/number-input/input.svelte

@@ -7,13 +7,11 @@
 </script>
 
 <script lang="ts">
-  import {getFieldContext} from '../field/context.svelte.js';
   import {mergeProps} from '../merge-props.js';
   import {numberInputContext} from './context.svelte.js';
 
   let {asChild, ...props}: NumberInputInputProps = $props();
 
-  let field = getFieldContext();
   let numberInput = numberInputContext.get();
 
   let mergedProps = $derived(mergeProps(props, numberInput.getInputProps()));
@@ -22,5 +20,5 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <input aria-describedby={field?.['aria-describedby']} {...mergedProps} />
+  <input {...mergedProps} />
 {/if}

package/dist/pin-input/create-pin-input.svelte.js

@@ -33,6 +33,12 @@ export function createPinInputContext(props) {
                     },
                 };
             },
+            getHiddenInputProps() {
+                return {
+                    'aria-describedby': field?.['aria-describedby'],
+                    ...o.getHiddenInputProps(),
+                };
+            },
         };
     }));
     return api;

package/dist/pin-input/hidden-input.svelte

@@ -5,16 +5,14 @@
 </script>
 
 <script lang="ts">
-  import {getFieldContext} from '../field/context.svelte.js';
   import {mergeProps} from '../merge-props.js';
   import {pinInputContext} from './context.svelte.js';
 
   let {...props}: PinInputHiddenInputProps = $props();
 
-  let field = getFieldContext();
   let pinInput = pinInputContext.get();
 
   let mergedProps = $derived(mergeProps(props, pinInput.getHiddenInputProps()));
 </script>
 
-<input aria-describedby={field?.['aria-describedby']} {...mergedProps} />
+<input {...mergedProps} />

package/dist/rating-group/create-rating-group.svelte.js

@@ -21,6 +21,17 @@ export function createRatingGroup(props) {
         dir: locale?.dir,
         getRootNode: environment?.getRootNode,
     }));
-    const api = $derived(reflect(() => ratingGroup.connect(state, send, normalizeProps)));
+    const api = $derived(reflect(() => {
+        const o = ratingGroup.connect(state, send, normalizeProps);
+        return {
+            ...o,
+            getHiddenInputProps() {
+                return {
+                    'aria-describedby': field?.['aria-describedby'],
+                    ...o.getHiddenInputProps(),
+                };
+            },
+        };
+    }));
     return api;
 }

package/dist/rating-group/hidden-input.svelte

@@ -5,13 +5,11 @@
 </script>
 
 <script lang="ts">
-  import {getFieldContext} from '../field/context.svelte.js';
   import {mergeProps} from '../merge-props.js';
   import {ratingGroupContext} from './context.svelte.js';
 
   let {...props}: RatingGroupHiddenInputProps = $props();
 
-  let field = getFieldContext();
   let radioGroup = ratingGroupContext.get();
 
   let mergedProps = $derived(
@@ -19,4 +17,4 @@
   );
 </script>
 
-<input aria-describedby={field?.['aria-describedby']} {...mergedProps} />
+<input {...mergedProps} />

package/dist/select/create-select.svelte.js

@@ -31,9 +31,18 @@ export function createSelect(props) {
         collection,
         'open.controlled': props.open != null,
     }));
-    const api = $derived(reflect(() => ({
-        ...select.connect(state, send, normalizeProps),
-        collection,
-    })));
+    const api = $derived(reflect(() => {
+        const o = select.connect(state, send, normalizeProps);
+        return {
+            ...o,
+            collection,
+            getHiddenSelectProps() {
+                return {
+                    'aria-describedby': field?.['aria-describedby'],
+                    ...o.getHiddenSelectProps(),
+                };
+            },
+        };
+    }));
     return api;
 }

package/dist/select/hidden-select.svelte

@@ -5,18 +5,16 @@
 </script>
 
 <script lang="ts">
-  import {getFieldContext} from '../field/context.svelte.js';
   import {mergeProps} from '../merge-props.js';
   import {selectContext} from './context.svelte.js';
 
   let {children, ...props}: SelectHiddenSelectProps = $props();
 
-  let field = getFieldContext();
   let select = selectContext.get();
 
   let mergedProps = $derived(mergeProps(props, select.getHiddenSelectProps()));
 </script>
 
-<select aria-describedby={field?.['aria-describedby']} {...mergedProps}>
+<select {...mergedProps}>
   {@render children?.()}
 </select>

package/dist/switch/create-switch.svelte.js

@@ -22,6 +22,17 @@ export function createSwitch(props) {
         dir: locale?.dir,
         getRootNode: environment?.getRootNode,
     }));
-    const api = $derived(reflect(() => switch$.connect(state, send, normalizeProps)));
+    const api = $derived(reflect(() => {
+        const o = switch$.connect(state, send, normalizeProps);
+        return {
+            ...o,
+            getHiddenInputProps() {
+                return {
+                    'aria-describedby': field?.['aria-describedby'],
+                    ...o.getHiddenInputProps(),
+                };
+            },
+        };
+    }));
     return api;
 }

package/dist/switch/hidden-input.svelte

@@ -5,16 +5,14 @@
 </script>
 
 <script lang="ts">
-  import {getFieldContext} from '../field/context.svelte.js';
   import {mergeProps} from '../merge-props.js';
   import {switchContext} from './context.svelte.js';
 
   let {...props}: SwitchHiddenInputProps = $props();
 
-  let field = getFieldContext();
   let switch$ = switchContext.get();
 
   let mergedProps = $derived(mergeProps(props, switch$.getHiddenInputProps()));
 </script>
 
-<input aria-describedby={field?.['aria-describedby']} {...mergedProps} />
+<input {...mergedProps} />

package/dist/tags-input/create-tags-input.svelte.js

@@ -22,6 +22,17 @@ export function createTagsInput(props) {
         dir: locale?.dir,
         getRootNode: environment?.getRootNode,
     }));
-    const api = $derived(reflect(() => tagsInput.connect(state, send, normalizeProps)));
+    const api = $derived(reflect(() => {
+        const o = tagsInput.connect(state, send, normalizeProps);
+        return {
+            ...o,
+            getHiddenInputProps() {
+                return {
+                    'aria-describedby': field?.['aria-describedby'],
+                    ...o.getHiddenInputProps(),
+                };
+            },
+        };
+    }));
     return api;
 }

package/dist/tags-input/hidden-input.svelte

@@ -5,13 +5,11 @@
 </script>
 
 <script lang="ts">
-  import {getFieldContext} from '../field/context.svelte.js';
   import {mergeProps} from '../merge-props.js';
   import {tagsInputContext} from './context.svelte.js';
 
   let {...props}: TagsInputHiddenInputProps = $props();
 
-  let field = getFieldContext();
   let tagsInput = tagsInputContext.get();
 
   let mergedProps = $derived(
@@ -19,4 +17,4 @@
   );
 </script>
 
-<input aria-describedby={field?.['aria-describedby']} {...mergedProps} />
+<input {...mergedProps} />

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ui-ingredients",
   "type": "module",
-  "version": "0.0.36",
+  "version": "0.0.37",
   "packageManager": "pnpm@9.7.0",
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",