Merge branch 'main' into redesign-docs-v2

CHANGELOG.md

@@ -1,5 +1,11 @@
 # @huntabyte/primitives
 
+## 0.9.8
+
+### Patch Changes
+
+- Update melt ([#186](https://github.com/huntabyte/bits-ui/pull/186))
+
 ## 0.9.7
 
 ### Patch Changes

content/delegation.md

@@ -55,15 +55,15 @@ Let's create a custom `<Button />` component that could be used with this patter
 
 ```svelte
 <script lang="ts">
-	import { builderActions, builderAttrs, type Builder } from "bits-ui";
+	import { builderActions, getAttrs, type Builder } from "bits-ui";
 	export let builders: Builder[] = [];
 </script>
 
-<button use:builderActions={{ builders }} {...builderAttrs(builders)}>
+<button use:builderActions={{ builders }} {...getAttrs(builders)}>
 	<slot />
 </button>
 ```
 
-We're using the `builderActions` and `builderAttrs` helpers to apply the actions and attributes to the button. We're also using the `Builder` type to type the `builders` prop we'd receive from whatever component we're using this with. We use an array here to cover the case where we may want to apply multiple builders to the button. The helper functions handle applying all the actions and attributes to the button for us.
+We're using the `builderActions` and `getAttrs` helpers to apply the actions and attributes to the button. We're also using the `Builder` type to type the `builders` prop we'd receive from whatever component we're using this with. We use an array here to cover the case where we may want to apply multiple builders to the button. The helper functions handle applying all the actions and attributes to the button for us.
 
 If you do plan to pass multiple builders, the order in which you pass them matters. Certain actions/attributes may override others, so be sure to test your implementation to ensure it's working as expected.

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "bits-ui",
-	"version": "0.9.7",
+	"version": "0.9.8",
 	"license": "MIT",
 	"repository": "github:huntabyte/bits-ui",
 	"scripts": {

src/components/index.ts

@@ -13,3 +13,4 @@ export { default as Code } from "./markdown/code.svelte";
 export { default as APISection } from "./api-section.svelte";
 export { default as ComponentPreview } from "./component-preview.svelte";
 export { default as LightSwitch } from "./light-switch.svelte";
+export { default as Metadata } from "./metadata.svelte";

src/components/metadata.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { page } from "$app/stores";
+	import { siteConfig } from "@/config";
+
+	export let title: string = siteConfig.name;
+
+	$: title = $page.data?.title ? `${$page.data.title} - ${siteConfig.name}` : siteConfig.name;
+</script>
+
+<svelte:head>
+	<title>{title}</title>
+	<meta name="description" content={siteConfig.description} />
+	<meta name="keywords" content={siteConfig.keywords} />
+	<meta name="author" content="huntabyte" />
+</svelte:head>

src/config/site.ts

@@ -1,6 +1,6 @@
 export const siteConfig = {
-	name: "Bit UI",
-	url: "https://bit-ui.com",
+	name: "Bits UI",
+	url: "https://bits-ui.com",
 	description: "Headless components for Svelte built on top of Melt UI.",
 	links: {
 		melt: "https://melt-ui.com",

src/routes/+layout.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { dev } from "$app/environment";
 	import {
+		Metadata,
 		SidebarNav,
 		SiteHeader,
 		TableOfContents,
@@ -12,6 +13,7 @@
 </script>
 
 <ModeWatcher />
+<Metadata />
 
 <SiteHeader />
 <div class="min-h-[calc(100vh-64px)]">

src/tests/select/Select.spec.ts

@@ -88,6 +88,14 @@ describe("Select", () => {
 		expect(input).not.toBeVisible();
 	});
 
+	it.each([kbd.SPACE, kbd.ENTER])("selects item with the %s key", async (key) => {
+		const { user, queryByTestId, getByTestId } = await open();
+		await user.keyboard(kbd.ARROW_DOWN);
+		await user.keyboard(key);
+		await waitFor(() => expect(queryByTestId("content")).toBeNull());
+		expect(getByTestId("value")).toHaveTextContent("A");
+	});
+
 	it("syncs the name prop to the hidden input", async () => {
 		const { input } = setup({ name: "test" });
 		expect(input).toHaveAttribute("name", "test");