docs: dont navigate when searching (#1861)

huntabyte · web-flow · commit d3c3bde8b220 · 2025-10-23T20:45:27.000-04:00
diff --git a/docs/content/components/accordion.md b/docs/content/components/accordion.md
@@ -1,6 +1,6 @@
 ---
 title: Accordion
-description: Organizes content into collapsible sections, allowing users to focus on one or more sections at a time.
+description: Organizes content into collapsible sections.
 ---
 
 <script>
diff --git a/docs/content/components/alert-dialog.md b/docs/content/components/alert-dialog.md
@@ -1,6 +1,6 @@
 ---
 title: Alert Dialog
-description: A modal window that alerts users with important information and awaits their acknowledgment or action.
+description: A modal window presenting content or seeking user input without navigating away from the current context.
 ---
 
 <script>
diff --git a/docs/content/components/aspect-ratio.md b/docs/content/components/aspect-ratio.md
@@ -1,6 +1,6 @@
 ---
 title: Aspect Ratio
-description: Displays content while maintaining a specified aspect ratio, ensuring consistent visual proportions.
+description: Displays content while maintaining a specified aspect ratio.
 ---
 
 <script>
diff --git a/docs/content/components/avatar.md b/docs/content/components/avatar.md
@@ -1,6 +1,6 @@
 ---
 title: Avatar
-description: Represents a user or entity with a recognizable image or placeholder in UI elements.
+description: Represents an entity with an image and fallback placeholder.
 ---
 
 <script>
diff --git a/docs/content/components/button.md b/docs/content/components/button.md
@@ -1,6 +1,6 @@
 ---
 title: Button
-description: A component that if passed a `href` prop will render an anchor element instead of a button element.
+description: A component that can switch between a button and an anchor tag based on the `href` prop.
 ---
 
 <script>
diff --git a/docs/content/components/calendar.md b/docs/content/components/calendar.md
@@ -81,7 +81,7 @@ This section covers how to manage the `placeholder` state of the Calendar.
 
 Use `bind:placeholder` for simple, automatic state synchronization:
 
-```svelte {3,6,8}
+```svelte
 <script lang="ts">
   import { Calendar } from "bits-ui";
   import { CalendarDateTime } from "@internationalized/date";
@@ -132,7 +132,7 @@ This section covers how to manage the `value` state of the Calendar.
 
 Use `bind:value` for simple, automatic state synchronization:
 
-```svelte {3,6,8}
+```svelte
 <script lang="ts">
   import { Calendar } from "bits-ui";
   import { CalendarDateTime } from "@internationalized/date";
diff --git a/docs/content/components/checkbox.md b/docs/content/components/checkbox.md
@@ -1,6 +1,6 @@
 ---
 title: Checkbox
-description: Allow users to switch between checked, unchecked, and indeterminate states.
+description: Enables users to select or deselect options with support for indeterminate states.
 ---
 
 <script>
diff --git a/docs/content/components/collapsible.md b/docs/content/components/collapsible.md
@@ -1,6 +1,6 @@
 ---
 title: Collapsible
-description: Conceals or reveals content sections, enhancing space utilization and organization.
+description: Conceals or reveals content sections.
 ---
 
 <script>
diff --git a/docs/content/components/command.md b/docs/content/components/command.md
@@ -1,6 +1,6 @@
 ---
 title: Command
-description: A command menu component that can be used to search, filter, and select items.
+description: A command menu component that enables users to search, filter, and select items.
 ---
 
 <script>
diff --git a/docs/content/components/context-menu.md b/docs/content/components/context-menu.md
@@ -1,6 +1,6 @@
 ---
 title: Context Menu
-description: Displays options or actions relevant to a specific context or selected item, triggered by a right-click.
+description: Displays contextual options and actions triggered by right-click.
 ---
 
 <script>
diff --git a/docs/content/components/date-field.md b/docs/content/components/date-field.md
@@ -1,6 +1,6 @@
 ---
 title: Date Field
-description: Enables users to input a date within a designated field.
+description: An alternative to the native `<input type="date">` element.
 ---
 
 <script>
diff --git a/docs/content/components/date-picker.md b/docs/content/components/date-picker.md
@@ -1,6 +1,6 @@
 ---
 title: Date Picker
-description: Facilitates the selection of dates through an input and calendar-based interface.
+description: Enables users to select dates using an input field and calendar interface.
 ---
 
 <script>
diff --git a/docs/content/components/date-range-field.md b/docs/content/components/date-range-field.md
@@ -1,6 +1,6 @@
 ---
 title: Date Range Field
-description: Allows users to input a range of dates within a designated field.
+description: Enables users to input a range of dates within a designated field.
 ---
 
 <script>
diff --git a/docs/content/components/date-range-picker.md b/docs/content/components/date-range-picker.md
@@ -1,6 +1,6 @@
 ---
 title: Date Range Picker
-description: Facilitates the selection of date ranges through an input and calendar-based interface.
+description: Enables users to select a range of dates using an input field and calendar interface.
 ---
 
 <script>
diff --git a/docs/content/components/dialog.md b/docs/content/components/dialog.md
@@ -1,6 +1,6 @@
 ---
 title: Dialog
-description: A modal window presenting content or seeking user input without navigating away from the current context.
+description: A modal window for displaying content or requesting user input.
 ---
 
 <script>
diff --git a/docs/content/components/menubar.md b/docs/content/components/menubar.md
@@ -1,6 +1,6 @@
 ---
 title: Menubar
-description: Organizes and presents a collection of menu options or actions within a horizontal bar.
+description: A horizontal bar containing a collection of menus.
 ---
 
 <script>
diff --git a/docs/content/components/meter.md b/docs/content/components/meter.md
@@ -1,6 +1,6 @@
 ---
 title: Meter
-description: Display real-time measurements within a defined range.
+description: Displays a static measurement within a known range.
 ---
 
 <script>
@@ -90,14 +90,14 @@ You can then use the `MyMeter` component in your application like so:
   const max = 4000;
 </script>
 
-<MyMeter label="Tokens remaining" valueLabel="{value} / {max}" {value} {max} />
+<MyMeter label="Tokens used" valueLabel="{value} / {max}" {value} {max} />
 ```
 
 Of course, you'd want to apply your own styles and other customizations to the `MyMeter` component to fit your application's design.
 
 <br>
 
-<MeterDemoCustom value={3000} label="Tokens remaining" valueLabel="3000 / 4000" max={4000} />
+<MeterDemoCustom value={3000} label="Tokens used" valueLabel="3000 / 4000" max={4000} />
 
 ## Accessibility
 
diff --git a/docs/content/components/navigation-menu.md b/docs/content/components/navigation-menu.md
@@ -1,6 +1,6 @@
 ---
 title: Navigation Menu
-description: A list of links that allow users to navigate between pages of a website.
+description: A menu that allows users to navigate between pages of a website.
 ---
 
 <script>
diff --git a/docs/content/components/pagination.md b/docs/content/components/pagination.md
@@ -1,6 +1,6 @@
 ---
 title: Pagination
-description: Facilitates navigation between pages.
+description: Enables users to navigate through a series of pages.
 ---
 
 <script>
diff --git a/docs/content/components/pin-input.md b/docs/content/components/pin-input.md
@@ -1,6 +1,6 @@
 ---
 title: PIN Input
-description: Allows users to input a sequence of one-character alphanumeric inputs.
+description: Enables users to input a sequence of one-character inputs.
 ---
 
 <script>
diff --git a/docs/content/components/popover.md b/docs/content/components/popover.md
@@ -1,6 +1,6 @@
 ---
 title: Popover
-description: Display supplementary content or information when users interact with specific elements.
+description: Displays rich content in a floating panel anchored to a trigger element.
 ---
 
 <script>
diff --git a/docs/content/components/progress.md b/docs/content/components/progress.md
@@ -1,6 +1,6 @@
 ---
 title: Progress
-description: Visualizes the progress or completion status of a task or process.
+description: Shows the completion status of a task.
 ---
 
 <script>
diff --git a/docs/content/components/radio-group.md b/docs/content/components/radio-group.md
@@ -1,6 +1,6 @@
 ---
 title: Radio Group
-description: Allows users to select a single option from a list of mutually exclusive choices.
+description: Groups multiple radio items under a common name for form submission.
 ---
 
 <script>
diff --git a/docs/content/components/range-calendar.md b/docs/content/components/range-calendar.md
@@ -1,6 +1,6 @@
 ---
 title: Range Calendar
-description: Presents a calendar view tailored for selecting date ranges.
+description: Enables users to select a range of dates using a calendar interface.
 ---
 
 <script>
diff --git a/docs/content/components/rating-group.md b/docs/content/components/rating-group.md
@@ -1,6 +1,6 @@
 ---
 title: Rating Group
-description: Allows users to provide ratings using customizable items (like stars).
+description: Enables users to provide ratings using customizable items (like stars).
 ---
 
 <script>
diff --git a/docs/content/components/select.md b/docs/content/components/select.md
@@ -1,6 +1,6 @@
 ---
 title: Select
-description: Enables users to choose from a list of options presented in a dropdown.
+description: Enables users to pick from a list of options displayed in a dropdown.
 ---
 
 <script>
diff --git a/docs/content/components/separator.md b/docs/content/components/separator.md
@@ -1,6 +1,6 @@
 ---
 title: Separator
-description: Visually separates content or UI elements for clarity and organization.
+description: Visually separates content or UI elements.
 ---
 
 <script>
diff --git a/docs/content/components/slider.md b/docs/content/components/slider.md
@@ -1,6 +1,6 @@
 ---
 title: Slider
-description: Allows users to select a value from a continuous range by sliding a handle.
+description: Enables users to select a value from a continuous range.
 ---
 
 <script>
diff --git a/docs/content/components/switch.md b/docs/content/components/switch.md
@@ -1,6 +1,6 @@
 ---
 title: Switch
-description: A toggle control enabling users to switch between "on" and "off" states.
+description: A toggle control that allows users to switch between "on" and "off" states.
 ---
 
 <script>
diff --git a/docs/content/components/tabs.md b/docs/content/components/tabs.md
@@ -1,6 +1,6 @@
 ---
 title: Tabs
-description: Organizes content into distinct sections, allowing users to switch between them.
+description: Organizes content into tabbed sections.
 ---
 
 <script>
diff --git a/docs/content/components/time-field.md b/docs/content/components/time-field.md
@@ -1,6 +1,6 @@
 ---
 title: Time Field
-description: Enables users to input a time within a designated field.
+description: An alternative to the native `<input type="time">` element.
 ---
 
 <script>
diff --git a/docs/content/components/time-range-field.md b/docs/content/components/time-range-field.md
@@ -1,6 +1,6 @@
 ---
 title: Time Range Field
-description: Allows users to input a range of times within a designated field.
+description: Enables users to input a range of times within a designated field.
 ---
 
 <script>
diff --git a/docs/content/components/toggle.md b/docs/content/components/toggle.md
@@ -1,6 +1,6 @@
 ---
 title: Toggle
-description: A control element that switches between two states, providing a binary choice.
+description: A toggle control that allows users to switch between two states.
 ---
 
 <script>
diff --git a/docs/content/components/toolbar.md b/docs/content/components/toolbar.md
@@ -1,6 +1,6 @@
 ---
 title: Toolbar
-description: Displays frequently used actions or tools in a compact, easily accessible bar.
+description: Displays frequently used actions or tools in a compact and easily accessible bar.
 ---
 
 <script>
diff --git a/docs/content/components/tooltip.md b/docs/content/components/tooltip.md
@@ -1,6 +1,6 @@
 ---
 title: Tooltip
-description: Provides additional information or context when users hover over or interact with an element.
+description: Displays supplementary information when users hover over or interact with an element.
 ---
 
 <script>
diff --git a/docs/src/lib/components/callout.svelte b/docs/src/lib/components/callout.svelte
@@ -25,9 +25,7 @@
 		</Alert.Title>
 	{/if}
 
-	<Alert.Description
-		class="[&_code]:!bg-dark-10 [&_code]:!text-foreground leading-relaxed [&>p]:text-[15px] [&>p]:leading-7"
-	>
+	<Alert.Description class="leading-relaxed [&>p]:text-[15px] [&>p]:leading-7">
 		{@render children?.()}
 	</Alert.Description>
 </Alert.Root>
diff --git a/docs/src/lib/components/demos/progress-demo.svelte b/docs/src/lib/components/demos/progress-demo.svelte
@@ -1,30 +1,34 @@
 <script lang="ts">
-	import { Progress, useId } from "bits-ui";
+	import { Progress } from "bits-ui";
 	import { onMount } from "svelte";
+	import { cubicInOut } from "svelte/easing";
+	import { Tween } from "svelte/motion";
 
-	let value = $state(13);
-	const labelId = useId();
+	const tween = new Tween(13, { duration: 1000, easing: cubicInOut });
+	const labelId = $props.id();
 
 	onMount(() => {
-		const timer = setTimeout(() => (value = 66), 500);
-		return () => clearTimeout(timer);
+		const timer = setTimeout(() => tween.set(66), 500);
+		return () => {
+			clearTimeout(timer);
+		};
 	});
 </script>
 
 <div class="flex w-[60%] flex-col gap-2">
 	<div class="flex items-center justify-between text-sm font-medium">
 		<span id={labelId}> Uploading file... </span>
-		<span>{value}%</span>
+		<span>{Math.round(tween.current)}%</span>
 	</div>
 	<Progress.Root
 		aria-labelledby={labelId}
-		{value}
+		value={Math.round(tween.current)}
 		max={100}
 		class="bg-dark-10 shadow-mini-inset relative h-[15px] w-full overflow-hidden rounded-full"
 	>
 		<div
-			class="bg-foreground shadow-mini-inset h-full w-full flex-1 rounded-full transition-all duration-1000 ease-in-out"
-			style={`transform: translateX(-${100 - (100 * (value ?? 0)) / 100}%)`}
+			class="bg-foreground shadow-mini-inset h-full w-full flex-1 rounded-full"
+			style={`transform: translateX(-${100 - (100 * (tween.current ?? 0)) / 100}%)`}
 		></div>
 	</Progress.Root>
 </div>
diff --git a/docs/src/lib/components/search.svelte b/docs/src/lib/components/search.svelte
diff --git a/docs/src/lib/styles/app.css b/docs/src/lib/styles/app.css
diff --git a/docs/src/lib/styles/markdown.css b/docs/src/lib/styles/markdown.css
diff --git a/docs/src/routes/+page.svelte b/docs/src/routes/+page.svelte
