bits-ui 1.3.3 → 1.3.4

package/dist/bits/checkbox/checkbox.svelte.d.ts

@@ -84,8 +84,6 @@ declare class CheckboxInputState {
         readonly required: boolean;
         readonly name: string | undefined;
         readonly value: string | undefined;
-        readonly "aria-hidden": "true";
-        readonly style: string;
     };
 }
 export declare function useCheckboxGroup(props: CheckboxGroupStateProps): CheckboxGroupState;

package/dist/bits/checkbox/checkbox.svelte.js

@@ -1,4 +1,4 @@
-import { srOnlyStyles, styleToString, useRefById } from "svelte-toolbelt";
+import { useRefById } from "svelte-toolbelt";
 import { Context, watch } from "runed";
 import { getAriaChecked, getAriaRequired, getDataDisabled } from "../../internal/attrs.js";
 import { kbd } from "../../internal/kbd.js";
@@ -175,8 +175,6 @@ class CheckboxInputState {
         required: this.root.trueRequired,
         name: this.root.trueName,
         value: this.root.opts.value.current,
-        "aria-hidden": "true",
-        style: styleToString(srOnlyStyles),
     }));
 }
 function getCheckboxDataState(checked, indeterminate) {

package/dist/bits/checkbox/components/checkbox-input.svelte

@@ -1,12 +1,10 @@
 <script lang="ts">
 	import { useCheckboxInput } from "../checkbox.svelte.js";
-	import VisuallyHidden from "../../utilities/visually-hidden/visually-hidden.svelte";
+	import HiddenInput from "../../utilities/hidden-input.svelte";
 
 	const inputState = useCheckboxInput();
 </script>
 
 {#if inputState.shouldRender}
-	<VisuallyHidden aria-hidden="true">
-		<input {...inputState.props} type="checkbox" style="display: none !important;" />
-	</VisuallyHidden>
+	<HiddenInput {...inputState.props} />
 {/if}

package/dist/bits/date-field/components/date-field-hidden-input.svelte

@@ -1,14 +1,10 @@
 <script lang="ts">
 	import { useDateFieldHiddenInput } from "../date-field.svelte.js";
-	import VisuallyHidden from "../../utilities/visually-hidden/visually-hidden.svelte";
+	import HiddenInput from "../../utilities/hidden-input.svelte";
 
 	const hiddenInputState = useDateFieldHiddenInput();
 </script>
 
 {#if hiddenInputState.shouldRender}
-	<VisuallyHidden>
-		{#snippet child({ props })}
-			<input {...props} {...hiddenInputState.props} />
-		{/snippet}
-	</VisuallyHidden>
+	<HiddenInput {...hiddenInputState.props} />
 {/if}

package/dist/bits/date-field/date-field.svelte.d.ts

@@ -169,7 +169,6 @@ declare class DateFieldHiddenInputState {
         name: string;
         value: string;
         required: boolean;
-        "aria-hidden": "true" | undefined;
     };
 }
 type DateFieldLabelStateProps = WithRefProps;

package/dist/bits/date-field/date-field.svelte.js

@@ -545,7 +545,6 @@ class DateFieldHiddenInputState {
             name: this.root.name,
             value: this.isoValue,
             required: this.root.required.current,
-            "aria-hidden": getAriaHidden(true),
         };
     });
 }

package/dist/bits/radio-group/components/radio-group-input.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
+	import HiddenInput from "../../utilities/hidden-input.svelte";
 	import { useRadioGroupInput } from "../radio-group.svelte.js";
 
 	const inputState = useRadioGroupInput();
 </script>
 
 {#if inputState.shouldRender}
-	<input {...inputState.props} />
+	<HiddenInput {...inputState.props} />
 {/if}

package/dist/bits/radio-group/radio-group.svelte.d.ts

@@ -68,10 +68,6 @@ declare class RadioGroupInputState {
         readonly value: string;
         readonly required: boolean;
         readonly disabled: boolean;
-        readonly "aria-hidden": "true";
-        readonly hidden: true;
-        readonly style: string;
-        readonly tabIndex: -1;
     };
     constructor(root: RadioGroupRootState);
 }

package/dist/bits/radio-group/radio-group.svelte.js

@@ -1,4 +1,4 @@
-import { srOnlyStyles, styleToString, useRefById } from "svelte-toolbelt";
+import { useRefById } from "svelte-toolbelt";
 import { Context } from "runed";
 import { getAriaChecked, getAriaRequired, getDataDisabled } from "../../internal/attrs.js";
 import { useRovingFocus, } from "../../internal/use-roving-focus.svelte.js";
@@ -46,10 +46,7 @@ class RadioGroupItemState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useRefById({
-            id: this.opts.id,
-            ref: this.opts.ref,
-        });
+        useRefById(opts);
         if (this.opts.value.current === this.root.opts.value.current) {
             this.root.rovingFocusGroup.setCurrentTabStopId(this.opts.id.current);
             this.#tabIndex = 0;
@@ -115,10 +112,6 @@ class RadioGroupInputState {
         value: this.root.opts.value.current,
         required: this.root.opts.required.current,
         disabled: this.root.opts.disabled.current,
-        "aria-hidden": "true",
-        hidden: true,
-        style: styleToString(srOnlyStyles),
-        tabIndex: -1,
     }));
     constructor(root) {
         this.root = root;

package/dist/bits/select/components/select-hidden-input.svelte

@@ -1,21 +1,15 @@
 <script lang="ts">
 	import { box } from "svelte-toolbelt";
 	import { useSelectHiddenInput } from "../select.svelte.js";
-	import VisuallyHidden from "../../utilities/visually-hidden/visually-hidden.svelte";
+	import HiddenInput from "../../utilities/hidden-input.svelte";
 
-	type Props = {
-		value?: string;
-	};
-
-	let { value = $bindable("") }: Props = $props();
+	let { value = $bindable("") }: { value?: string } = $props();
 
 	const hiddenInputState = useSelectHiddenInput({
 		value: box.with(() => value),
 	});
 </script>
 
-<VisuallyHidden>
-	{#if hiddenInputState.shouldRender}
-		<input {...hiddenInputState.props} bind:value />
-	{/if}
-</VisuallyHidden>
+{#if hiddenInputState.shouldRender}
+	<HiddenInput {...hiddenInputState.props} bind:value />
+{/if}

package/dist/bits/select/components/select-hidden-input.svelte.d.ts

@@ -1,6 +1,6 @@
-type Props = {
+type $$ComponentProps = {
     value?: string;
 };
-declare const SelectHiddenInput: import("svelte").Component<Props, {}, "value">;
+declare const SelectHiddenInput: import("svelte").Component<$$ComponentProps, {}, "value">;
 type SelectHiddenInput = ReturnType<typeof SelectHiddenInput>;
 export default SelectHiddenInput;

package/dist/bits/select/select.svelte.d.ts

@@ -276,8 +276,6 @@ declare class SelectHiddenInputState {
         readonly required: true | undefined;
         readonly name: string;
         readonly value: string;
-        readonly style: string;
-        readonly tabindex: -1;
         readonly onfocus: (e: BitsFocusEvent) => void;
     };
 }

package/dist/bits/select/select.svelte.js

@@ -1,5 +1,5 @@
 import { Context, Previous, watch } from "runed";
-import { afterSleep, afterTick, onDestroyEffect, srOnlyStyles, styleToString, useRefById, } from "svelte-toolbelt";
+import { afterSleep, afterTick, onDestroyEffect, useRefById } from "svelte-toolbelt";
 import { on } from "svelte/events";
 import { backward, forward, next, prev } from "../../internal/arrays.js";
 import { getAriaExpanded, getAriaHidden, getDataDisabled, getDataOpenClosed, getDisabled, getRequired, } from "../../internal/attrs.js";
@@ -861,8 +861,6 @@ class SelectHiddenInputState {
         required: getRequired(this.root.opts.required.current),
         name: this.root.opts.name.current,
         value: this.opts.value.current,
-        style: styleToString(srOnlyStyles),
-        tabindex: -1,
         onfocus: this.onfocus,
     }));
 }

package/dist/bits/switch/components/switch-input.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
+	import HiddenInput from "../../utilities/hidden-input.svelte";
 	import { useSwitchInput } from "../switch.svelte.js";
 
 	const inputState = useSwitchInput();
 </script>
 
 {#if inputState.shouldRender}
-	<input {...inputState.props} />
+	<HiddenInput {...inputState.props} />
 {/if}

package/dist/bits/switch/switch.svelte.d.ts

@@ -47,9 +47,6 @@ declare class SwitchInputState {
         readonly checked: boolean;
         readonly disabled: boolean;
         readonly required: boolean;
-        readonly "aria-hidden": "true" | undefined;
-        readonly style: string;
-        readonly tabindex: -1;
     };
 }
 type SwitchThumbStateProps = WithRefProps;

package/dist/bits/switch/switch.svelte.js

@@ -1,6 +1,6 @@
-import { srOnlyStyles, styleToString, useRefById } from "svelte-toolbelt";
+import { useRefById } from "svelte-toolbelt";
 import { Context } from "runed";
-import { getAriaChecked, getAriaHidden, getAriaRequired, getDataChecked, getDataDisabled, getDataRequired, getDisabled, } from "../../internal/attrs.js";
+import { getAriaChecked, getAriaRequired, getDataChecked, getDataDisabled, getDataRequired, getDisabled, } from "../../internal/attrs.js";
 import { kbd } from "../../internal/kbd.js";
 const SWITCH_ROOT_ATTR = "data-switch-root";
 const SWITCH_THUMB_ATTR = "data-switch-thumb";
@@ -60,9 +60,6 @@ class SwitchInputState {
         checked: this.root.opts.checked.current,
         disabled: this.root.opts.disabled.current,
         required: this.root.opts.required.current,
-        "aria-hidden": getAriaHidden(true),
-        style: styleToString(srOnlyStyles),
-        tabindex: -1,
     }));
 }
 class SwitchThumbState {

package/dist/bits/utilities/hidden-input.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { mergeProps, srOnlyStylesString } from "svelte-toolbelt";
+	import type { HTMLInputAttributes } from "svelte/elements";
+
+	let { value = $bindable(), ...restProps }: HTMLInputAttributes = $props();
+
+	const mergedProps = $derived(
+		mergeProps(restProps, {
+			"aria-hidden": "true",
+			tabindex: -1,
+			style: srOnlyStylesString,
+		})
+	);
+</script>
+
+{#if mergedProps.type === "checkbox"}
+	<input {...mergedProps} {value} />
+{:else}
+	<input bind:value {...mergedProps} />
+{/if}

package/dist/bits/utilities/hidden-input.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { HTMLInputAttributes } from "svelte/elements";
+declare const HiddenInput: import("svelte").Component<HTMLInputAttributes, {}, "value">;
+type HiddenInput = ReturnType<typeof HiddenInput>;
+export default HiddenInput;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bits-ui",
-  "version": "1.3.3",
+  "version": "1.3.4",
   "license": "MIT",
   "repository": "github:huntabyte/bits-ui",
   "funding": "https://github.com/sponsors/huntabyte",