@cascivo/react 0.6.2 → 0.7.0

package/README.md

@@ -53,9 +53,18 @@ Components ship with `'use client'` preserved in the bundle, so they work inside
 RSC without any extra wrapper.
 
 > **No bundler? (CDN, import maps, plain `<link>`)** Import the aggregate sheet
-> `@cascivo/react/styles.css` — it contains every component's CSS in one file.
-> With a bundler you don't need it; import it only if you prefer one explicit
-> stylesheet over per-component tree-shaking.
+> `@cascivo/react/styles.css` — every component's CSS in one file (~273 KB /
+> ~37 KB gzip, not tree-shaken). With a bundler (CSR) you don't need it; import it
+> only if you prefer one explicit stylesheet over per-component tree-shaking, or
+> for Vite SSR (below), where it is required.
+
+> **Vite SSR / TanStack Start / Remix / workerd?** Those per-component `.css`
+> imports need a bundler to resolve them; a bare server-side ESM loader throws
+> `Unknown file extension ".css"`. Add `ssr: { noExternal: [/^@cascivo\//] }` (or
+> the `cascivoSsr()` plugin from `@cascivo/vite-plugin`) and import
+> `@cascivo/react/styles.css` once in your root entry. Full recipe:
+> [USING-WITH-VITE-SSR.md](https://github.com/cascivo/cascivo/blob/main/docs/USING-WITH-VITE-SSR.md).
+> Next.js App Router needs none of this.
 
 ## Use
 
@@ -116,6 +125,48 @@ aliases are documented in
 All components are client components (`'use client'` is preserved in the
 bundle), so the package works in Next.js App Router projects out of the box.
 
+## Using with AI tools (v0, Cursor, Claude Code, Gemini)
+
+cascivo is AI-first, but a model can only build with it if the knowledge reaches
+the tool. cascivo has no training-data footprint yet, so **don't rely on a tool
+fetching cascivo.com** — that channel is the least reliable one. Use the channels
+that travel with the package instead:
+
+- **One file, one fetch — paste or link this into any chat/agent:**
+  [`https://cascivo.com/llms-full.txt`](https://cascivo.com/llms-full.txt). It is
+  the entire library — setup, the signals/CSS-layer rules, and every component's
+  props/examples/a11y — inlined, so a single successful fetch is enough. The
+  shorter index is [`llms.txt`](https://cascivo.com/llms.txt).
+- **v0 / shadcn CLI** — components install straight from the
+  [shadcn-compatible registry](https://cascivo.com/r/shadcn/registry.json):
+
+  ```sh
+  npx shadcn@latest add https://cascivo.com/r/shadcn/button.json
+  ```
+
+  Each item inlines its own source and points its dependencies at absolute
+  `https://cascivo.com/r/shadcn/<name>.json` URLs, so the CLI resolves them
+  transitively. Register the whole namespace in `components.json` to use short
+  names (`npx shadcn add @cascivo/button`):
+
+  ```json
+  { "registries": { "@cascivo": "https://cascivo.com/r/shadcn/{name}.json" } }
+  ```
+
+- **MCP-capable agents** (Claude Code, Cursor, Gemini CLI, Windsurf) — point the
+  client at the [`@cascivo/mcp`](https://www.npmjs.com/package/@cascivo/mcp)
+  server so it can query components with no web fetch at all:
+
+  ```json
+  { "mcpServers": { "cascivo": { "command": "npx", "args": ["-y", "@cascivo/mcp"] } } }
+  ```
+
+**One rule to give the model:** cascivo is signal-driven — use `useSignal` /
+`useComputed` / `useSignalEffect` from `@cascivo/core`, never `useState` /
+`useEffect`, and in any app without the Babel signals transform a component that
+reads `signal.value` in render must call `useSignals()` first or it won't
+re-render. `llms-full.txt` carries the full contract.
+
 ## Guides
 
 - [Theming & branding](https://github.com/cascivo/cascivo/blob/main/docs/THEMING.md) — match a brand by overriding tokens (layer cascade, the `data-theme` specificity footgun, per-role radius/control-height tokens, a starter theme).
@@ -311,7 +362,7 @@ routing break after adding one of these, check that the import resolves to
 - **DashboardLayout** — Dashboard page layout with stats strip, main content area, and optional aside.
 - **FeatureGrid** — Feature section — AutoGrid of items with optional title, description, and icon slots. Icons are optional; the grid works text-only. Replace demo content before shipping.
 - **Flex** — Flex layout primitive for vertical or horizontal stacking with gap control.
-- **Grid** — CSS grid layout primitive with responsive column collapsing.
+- **Grid** — CSS grid layout primitive with responsive column collapsing. Establishes its own containment, so responsive `cols` adapt to the grid’s own slot width with no wrapper or container ancestor required.
 - **Hero** — Page hero section — centered or split layout with eyebrow, title, description, actions and media slots. Replace demo content before shipping.
 - **Indicator** — Positions an overlay element (badge, dot, count) at a corner of its child
 - **Join** — Groups adjacent children into a seamless joined element by removing interior borders and radii

package/dist/breadcrumb/breadcrumb.js

@@ -1,28 +1,28 @@
 "use client";
 
 import e from "./breadcrumb.module.js";
-import { cn as t, useSignals as n } from "@cascivo/core";
-import { builtin as r, t as i } from "@cascivo/i18n";
-import { jsx as a } from "react/jsx-runtime";
+import { cn as t, getLinkComponent as n, useSignals as r } from "@cascivo/core";
+import { builtin as i, t as a } from "@cascivo/i18n";
+import { jsx as o } from "react/jsx-runtime";
 //#region ../components/src/breadcrumb/breadcrumb.tsx
-function o({ items: o, maxVisible: s, className: c, ariaLabel: l }) {
-	n();
-	let u = l ?? i(r.breadcrumb.nav), d = o, f = o[0];
-	return f !== void 0 && s !== void 0 && o.length > s && (d = [
-		f,
+function s({ items: s, maxVisible: c, className: l, ariaLabel: u }) {
+	r();
+	let d = n(), f = u ?? a(i.breadcrumb.nav), p = s, m = s[0];
+	return m !== void 0 && c !== void 0 && s.length > c && (p = [
+		m,
 		{ label: "…" },
-		...o.slice(o.length - (s - 2))
-	]), /* @__PURE__ */ a("nav", {
-		"aria-label": u,
-		className: t(e.breadcrumb, c),
-		children: /* @__PURE__ */ a("ol", { children: d.map((e, t) => /* @__PURE__ */ a("li", { children: t === d.length - 1 ? /* @__PURE__ */ a("span", {
+		...s.slice(s.length - (c - 2))
+	]), /* @__PURE__ */ o("nav", {
+		"aria-label": f,
+		className: t(e.breadcrumb, l),
+		children: /* @__PURE__ */ o("ol", { children: p.map((e, t) => /* @__PURE__ */ o("li", { children: t === p.length - 1 ? /* @__PURE__ */ o("span", {
 			"aria-current": "page",
 			children: e.label
-		}) : e.href === void 0 ? /* @__PURE__ */ a("span", { children: e.label }) : /* @__PURE__ */ a("a", {
+		}) : e.href === void 0 ? /* @__PURE__ */ o("span", { children: e.label }) : /* @__PURE__ */ o(d, {
 			href: e.href,
 			children: e.label
 		}) }, `${t}-${e.label}`)) })
 	});
 }
 //#endregion
-export { o as Breadcrumb };
+export { s as Breadcrumb };

package/dist/card/card.css

@@ -1 +1 @@
-@layer cascivo.component{._card_hb4jd_2{background-color:var(--cascivo-color-surface);border-radius:var(--cascivo-radius-surface);padding:var(--_card-p,0);overflow:hidden}._card_hb4jd_2[data-padding=none]{--_card-p:0}._card_hb4jd_2[data-padding=sm]{--_card-p:var(--cascivo-space-4)}._card_hb4jd_2[data-padding=md]{--_card-p:var(--cascivo-space-6)}._card_hb4jd_2[data-padding=lg]{--_card-p:var(--cascivo-space-8)}._card_hb4jd_2[data-variant=default]{border:1px solid var(--cascivo-color-border)}._card_hb4jd_2[data-variant=outlined]{border:1.5px solid var(--cascivo-color-border-strong)}._card_hb4jd_2[data-variant=elevated]{box-shadow:var(--cascivo-shadow-md);border:none}._header_hb4jd_35{padding:var(--_card-p,var(--cascivo-space-6));gap:var(--cascivo-space-1);flex-direction:column;padding-block-end:0;display:flex}._title_hb4jd_43{font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-lg);font-weight:var(--cascivo-font-semibold);color:var(--cascivo-color-text);line-height:var(--cascivo-leading-tight);margin:0}._content_hb4jd_52{padding:var(--_card-p,var(--cascivo-space-6));color:var(--cascivo-color-text-subtle);font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-sm);line-height:var(--cascivo-leading-relaxed)}._footer_hb4jd_60{padding:var(--_card-p,var(--cascivo-space-6));align-items:center;gap:var(--cascivo-space-2);padding-block-start:0;display:flex}}
+@layer cascivo.component{._card_16415_2{background-color:var(--cascivo-color-surface);border-radius:var(--cascivo-radius-surface);padding:var(--_card-p,0);overflow:hidden}._card_16415_2[data-padding=none]{--_card-p:0}._card_16415_2[data-padding=sm]{--_card-p:var(--cascivo-space-4)}._card_16415_2[data-padding=md]{--_card-p:var(--cascivo-space-6)}._card_16415_2[data-padding=lg]{--_card-p:var(--cascivo-space-8)}._card_16415_2[data-variant=default]{border:1px solid var(--cascivo-color-border)}._card_16415_2[data-variant=outlined]{border:1.5px solid var(--cascivo-color-border-strong)}._card_16415_2[data-variant=elevated]{box-shadow:var(--cascivo-shadow-md);border:none}._header_16415_35{padding:var(--_card-p,var(--cascivo-space-6));gap:var(--cascivo-space-1);flex-direction:column;min-inline-size:0;padding-block-end:0;display:flex}._title_16415_46{font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-lg);font-weight:var(--cascivo-font-semibold);color:var(--cascivo-color-text);line-height:var(--cascivo-leading-tight);margin:0}._content_16415_55{padding:var(--_card-p,var(--cascivo-space-6));color:var(--cascivo-color-text-subtle);font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-sm);line-height:var(--cascivo-leading-relaxed)}._footer_16415_63{padding:var(--_card-p,var(--cascivo-space-6));align-items:center;gap:var(--cascivo-space-2);min-inline-size:0;padding-block-start:0;display:flex}._footer_16415_63>*{min-inline-size:0}}

package/dist/card/card.module.js

@@ -2,11 +2,11 @@
 
 import './card.css';
 var e = {
-	card: "_card_hb4jd_2",
-	header: "_header_hb4jd_35",
-	title: "_title_hb4jd_43",
-	content: "_content_hb4jd_52",
-	footer: "_footer_hb4jd_60"
+	card: "_card_16415_2",
+	header: "_header_16415_35",
+	title: "_title_16415_46",
+	content: "_content_16415_55",
+	footer: "_footer_16415_63"
 };
 //#endregion
 export { e as default };

package/dist/dock/dock.js

@@ -1,34 +1,34 @@
 "use client";
 
 import e from "./dock.module.js";
-import { useSignals as t } from "@cascivo/core";
-import { builtin as n, t as r } from "@cascivo/i18n";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { getLinkComponent as t, useSignals as n } from "@cascivo/core";
+import { builtin as r, t as i } from "@cascivo/i18n";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region ../components/src/dock/dock.tsx
-function o({ items: o, activeIndex: s, className: c, ariaLabel: l }) {
-	return t(), /* @__PURE__ */ i("nav", {
-		"aria-label": l ?? r(n.dock.nav),
-		className: [e.dock, c].filter(Boolean).join(" "),
-		children: o.map((t, n) => {
-			let r = n === s;
-			return /* @__PURE__ */ a(t.href ? "a" : "button", {
+function s({ items: s, activeIndex: c, className: l, ariaLabel: u }) {
+	return n(), /* @__PURE__ */ a("nav", {
+		"aria-label": u ?? i(r.dock.nav),
+		className: [e.dock, l].filter(Boolean).join(" "),
+		children: s.map((n, r) => {
+			let i = r === c;
+			return /* @__PURE__ */ o(n.href ? t() : "button", {
 				className: e.item,
-				"data-active": r || void 0,
-				"aria-current": r ? "page" : void 0,
-				...t.href ? { href: t.href } : {},
-				type: t.href ? void 0 : "button",
-				onClick: t.onClick,
-				children: [/* @__PURE__ */ i("span", {
+				"data-active": i || void 0,
+				"aria-current": i ? "page" : void 0,
+				...n.href ? { href: n.href } : {},
+				type: n.href ? void 0 : "button",
+				onClick: n.onClick,
+				children: [/* @__PURE__ */ a("span", {
 					className: e.icon,
 					"aria-hidden": "true",
-					children: t.icon
-				}), /* @__PURE__ */ i("span", {
+					children: n.icon
+				}), /* @__PURE__ */ a("span", {
 					className: e.label,
-					children: t.label
+					children: n.label
 				})]
-			}, n);
+			}, r);
 		})
 	});
 }
 //#endregion
-export { o as Dock };
+export { s as Dock };

package/dist/header/header.js

@@ -1,29 +1,29 @@
 "use client";
 
 import e from "./header.module.js";
-import { cn as t, useSignals as n } from "@cascivo/core";
-import { builtin as r, t as i } from "@cascivo/i18n";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { cn as t, getLinkComponent as n, useSignals as r } from "@cascivo/core";
+import { builtin as i, t as a } from "@cascivo/i18n";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region ../components/src/header/header.tsx
-function s({ brand: s, links: c, actions: l, sticky: u = !1, labels: d, className: f, ...p }) {
-	n();
-	let m = d?.nav ?? i(r.header.nav);
-	return /* @__PURE__ */ o("header", {
+function c({ brand: c, links: l, actions: u, sticky: d = !1, labels: f, className: p, ...m }) {
+	r();
+	let h = n(), g = f?.nav ?? a(i.header.nav);
+	return /* @__PURE__ */ s("header", {
 		role: "banner",
-		"data-sticky": u || void 0,
-		className: t(e.header, f),
-		...p,
+		"data-sticky": d || void 0,
+		className: t(e.header, p),
+		...m,
 		children: [
-			s && /* @__PURE__ */ a("div", {
+			c && /* @__PURE__ */ o("div", {
 				className: e.brand,
-				children: s
+				children: c
 			}),
-			c && c.length > 0 && /* @__PURE__ */ a("nav", {
-				"aria-label": m,
+			l && l.length > 0 && /* @__PURE__ */ o("nav", {
+				"aria-label": g,
 				className: e.nav,
-				children: /* @__PURE__ */ a("ul", {
+				children: /* @__PURE__ */ o("ul", {
 					className: e.list,
-					children: c.map((t, n) => /* @__PURE__ */ a("li", { children: /* @__PURE__ */ a("a", {
+					children: l.map((t, n) => /* @__PURE__ */ o("li", { children: /* @__PURE__ */ o(h, {
 						href: t.href,
 						"aria-current": t.active ? "page" : void 0,
 						"data-state": t.active ? "active" : void 0,
@@ -32,13 +32,13 @@ function s({ brand: s, links: c, actions: l, sticky: u = !1, labels: d, classNam
 					}) }, t.id ?? `${n}-${t.href}`))
 				})
 			}),
-			/* @__PURE__ */ a("div", { className: e.spacer }),
-			l && /* @__PURE__ */ a("div", {
+			/* @__PURE__ */ o("div", { className: e.spacer }),
+			u && /* @__PURE__ */ o("div", {
 				className: e.actions,
-				children: l
+				children: u
 			})
 		]
 	});
 }
 //#endregion
-export { s as Header };
+export { c as Header };

package/dist/index.d.ts

@@ -634,6 +634,22 @@ declare function Header({
   ...props
 }: HeaderProps): import("react").JSX.Element;
 type SideNavTone = 'default' | 'danger' | 'warning' | 'success';
+/**
+ * The anchor props cascivo computes for a nav item — the exact bag it spreads onto
+ * the link element. Passed to a `render` hatch so a custom link (e.g. a router
+ * `<Link>`) can carry the same active-state and accessibility attributes.
+ */
+interface SideNavLinkProps {
+  href?: string | undefined;
+  className?: string | undefined;
+  'aria-current'?: 'page' | undefined;
+  'aria-label'?: string | undefined;
+  'aria-disabled'?: boolean | undefined;
+  'data-state'?: 'active' | undefined;
+  'data-tone'?: Exclude<SideNavTone, 'default'> | undefined;
+  tabIndex?: number | undefined;
+  onClick: (e: MouseEvent<HTMLAnchorElement>) => void;
+}
 /** A selectable/navigable sub-item (link when `href` is set, action when `onSelect` is set). */
 interface SideNavLinkSubItem {
   /** Stable React key. Provide when `label`/`href` may repeat (e.g. placeholder `#` links). */
@@ -672,9 +688,17 @@ interface SideNavItem {
   /**
    * Escape hatch: render arbitrary content inside the item's shell so it inherits
    * alignment and the collapse context. When set, the item's own fields are ignored.
+   *
+   * `children` is the computed icon + label + trailing node (so a custom link keeps
+   * the default layout), and `linkProps` is the anchor prop bag cascivo would spread
+   * onto the `<a>` (including active-state and a11y attributes) — spread it onto your
+   * router `<Link>` to preserve them. For a global router integration prefer
+   * `setLinkComponent` from `@cascivo/core` over a per-item hatch.
    */
   render?: (ctx: {
     collapsed: boolean;
+    children: ReactNode;
+    linkProps: SideNavLinkProps;
   }) => ReactNode;
 }
 interface SideNavGroup {
@@ -3280,6 +3304,7 @@ declare function Columns({
   gap,
   className,
   style,
+  children,
   ...props
 }: ColumnsProps): import("react").JSX.Element;
 interface CenterProps extends HTMLAttributes<HTMLDivElement> {
@@ -3395,4 +3420,4 @@ declare function themePreloadScript(options?: {
   attribute?: string;
   defaultTheme?: string;
 }): string;
-export { Accordion, AccordionContent, AccordionItem, AccordionItemProps, AccordionProps, AccordionTrigger, ActionSheet, ActionSheetAction, ActionSheetProps, Alert, AlertDialog, AlertDialogLabels, AlertDialogProps, AlertProps, AppShell, AppShellProps, AspectRatio, AspectRatioProps, AutoGrid, AutoGridProps, Avatar, AvatarGroup, AvatarGroupLabels, AvatarGroupProps, AvatarProps, Badge, BadgeProps, Blockquote, BlockquoteProps, BottomSheet, BottomSheetProps, Breadcrumb, BreadcrumbItem, BreadcrumbProps, Button, ButtonGroup, ButtonGroupProps, ButtonProps, Calendar, CalendarLabels, CalendarProps, Card, CardContent, CardContentProps, CardFooter, CardFooterProps, CardHeader, CardHeaderProps, CardProps, CardTitle, CardTitleProps, Carousel, CarouselLabels, CarouselProps, Center, CenterProps, ChatBubble, ChatBubbleProps, ChatBubbleSide, Checkbox, CheckboxCard, CheckboxCardProps, CheckboxProps, Code, type CodeLang, CodeProps, CodeSnippet, CodeSnippetProps, Collapsible, CollapsibleProps, ColorPicker, ColorPickerLabels, ColorPickerProps, Column, Columns, ColumnsProps, Combobox, ComboboxLabels, ComboboxOption, ComboboxProps, CommandAction, CommandGroup, CommandItem, CommandMenu, CommandMenuProps, CommandPage, CommandScope, CommandStatus, Comparison, ComparisonProps, ContainedList, ContainedListItem, ContainedListItemProps, ContainedListProps, ContextMenu, ContextMenuItem, ContextMenuItemProps, ContextMenuProps, CopyButton, CopyButtonProps, DataList, DataListItem, DataListProps, DataTable, DataTableLabels, DataTableProps, DatePicker, DatePickerLabels, DatePickerProps, DateRange, DateRangePicker, DateRangePickerLabels, DateRangePickerProps, DateRangePreset, Dock, DockItem, DockProps, Drawer, DrawerProps, Dropdown, DropdownItem, DropdownProps, Editable, EditableProps, EmptyState, EmptyStateProps, ErrorBoundary, Fab, FabAction, FabProps, Field, FieldProps, FileUploader, FileUploaderLabels, FileUploaderProps, Filter, FilterOption, FilterProps, FilterVariant, Flex, FlexProps, FocusScope, Form, FormConfig, FormProps, FormStore, FuzzyMatch, Grid, GridAlign, GridItem, GridItemProps, GridProps, Header, HeaderLabels, HeaderLink, HeaderPanel, HeaderPanelLabels, HeaderPanelProps, HeaderProps, Heading, HeadingLevel, HeadingProps, HeadingSize, HoverCard, HoverCardContent, HoverCardContentProps, HoverCardProps, HoverCardTrigger, HoverCardTriggerProps, IconButton, IconButtonProps, Image, ImageProps, Indicator, IndicatorPlacement, IndicatorProps, InlineLoading, InlineLoadingProps, InlineLoadingStatus, Input, InputGroup, InputGroupAddon, type InputGroupAddonProps, type InputGroupProps, InputProps, Item, ItemActions, ItemActionsProps, ItemContent, ItemContentProps, ItemDescription, ItemDescriptionProps, ItemMedia, ItemMediaProps, ItemProps, ItemTitle, ItemTitleProps, Join, JoinOrientation, JoinProps, Kbd, KbdProps, Label, LabelProps, Link, LinkProps, List, ListItem, ListItemProps, ListProps, LogLevel, LogLine, LogViewer, LogViewerLabels, LogViewerProps, Menu, MenuButton, MenuButtonItem, MenuButtonProps, MenuItem, MenuItemProps, MenuProps, MenuSeparator, MenuTrigger, MenuTriggerProps, Menubar, MenubarItem, MenubarMenu, MenubarProps, Modal, ModalProps, MultiSelect, MultiSelectLabels, MultiSelectOption, MultiSelectProps, NativeSelect, NativeSelectOption, NativeSelectProps, NavigationMenu, NavigationMenuItem, NavigationMenuProps, Notification, NotificationProps, NotificationVariant, NumberInput, NumberInputProps, OtpInput, OtpInputProps, OverflowMenu, OverflowMenuItem, OverflowMenuProps, Pagination, PaginationLabels, PaginationProps, PasswordInput, PasswordInputLabels, PasswordInputProps, Popover, PopoverContent, PopoverContentProps, PopoverProps, PopoverTrigger, PopoverTriggerProps, Portal, Progress, ProgressBar, ProgressBarProps, ProgressCircle, ProgressCircleProps, ProgressIndicator, ProgressIndicatorProps, ProgressProps, ProgressSize, ProgressStep, ProgressVariant, Prose, ProseProps, PullToRefresh, PullToRefreshProps, QrCode, QrCodeProps, RadialProgress, RadialProgressProps, RadialProgressSize, RadialProgressVariant, Radio, RadioCard, RadioCardGroup, RadioCardGroupProps, RadioCardProps, RadioGroup, RadioGroupProps, RadioProps, RatingGroup, RatingGroupLabels, RatingGroupProps, RelativeTime, RelativeTimeProps, Resizable, ResizableProps, Responsive, ScrollArea, ScrollAreaProps, Search, SearchProps, SegmentedControl, SegmentedControlOption, SegmentedControlProps, Select, SelectOption, SelectProps, Separator, SeparatorProps, Sheet, SheetProps, ShellHeader, ShellHeaderAction, ShellHeaderBrand, ShellHeaderLabels, ShellHeaderNavItem, ShellHeaderNavLink, ShellHeaderNavMenu, ShellHeaderNavMenuItem, ShellHeaderProps, SideNav, SideNavGroup, SideNavItem, SideNavLinkSubItem, SideNavProps, SideNavSubItem, SideNavTone, Skeleton, SkeletonProps, SkipNavLink, SkipNavLinkProps, SkipNavTarget, SkipNavTargetProps, Slider, SliderProps, SortDirection, SortState, Spacer, SpacerProps, Spinner, SpinnerProps, Stack, StackProps, type StandardSchemaV1, Stat, StatProps, Status, StatusProps, Step, StepState, Steps, StepsProps, StructuredList, StructuredListItem, StructuredListProps, SuspenseBoundary, Swap, SwapMode, SwapProps, SwipeAction, SwipeItem, SwipeItemProps, Switcher, SwitcherEntry, SwitcherLink, SwitcherProps, Tabs, TabsContent, TabsContentProps, TabsList, TabsProps, TabsTrigger, TabsTriggerProps, Tag$1 as Tag, TagProps, TagsInput, TagsInputProps, Text, TextProps, Textarea, TextareaProps, ThemeProvider, type ThemeProviderProps, Tile, TileProps, TimePicker, TimePickerProps, Timeline, TimelineItem, TimelineProps, ToastOptions, ToastProvider, ToastVariant, Toc, TocItem, TocProps, Toggle, ToggleGroup, ToggleGroupItem, ToggleGroupProps, ToggleProps, Toggletip, ToggletipPlacement, ToggletipProps, Tooltip, TooltipProps, TreeNode, TreeView, TreeViewProps, UploaderFile, type UsePopoverOptions, type UsePopoverReturn, type UseTocFromRegionOptions, User, UserProps, VisuallyHidden, VisuallyHiddenProps, createForm, dismissAllToasts, fuzzyMatch, fuzzyScore, setTheme, themePreloadScript, treeViewMessages, useForm, usePopover, useTheme, useToast, useTocFromRegion };
+export { Accordion, AccordionContent, AccordionItem, AccordionItemProps, AccordionProps, AccordionTrigger, ActionSheet, ActionSheetAction, ActionSheetProps, Alert, AlertDialog, AlertDialogLabels, AlertDialogProps, AlertProps, AppShell, AppShellProps, AspectRatio, AspectRatioProps, AutoGrid, AutoGridProps, Avatar, AvatarGroup, AvatarGroupLabels, AvatarGroupProps, AvatarProps, Badge, BadgeProps, Blockquote, BlockquoteProps, BottomSheet, BottomSheetProps, Breadcrumb, BreadcrumbItem, BreadcrumbProps, Button, ButtonGroup, ButtonGroupProps, ButtonProps, Calendar, CalendarLabels, CalendarProps, Card, CardContent, CardContentProps, CardFooter, CardFooterProps, CardHeader, CardHeaderProps, CardProps, CardTitle, CardTitleProps, Carousel, CarouselLabels, CarouselProps, Center, CenterProps, ChatBubble, ChatBubbleProps, ChatBubbleSide, Checkbox, CheckboxCard, CheckboxCardProps, CheckboxProps, Code, type CodeLang, CodeProps, CodeSnippet, CodeSnippetProps, Collapsible, CollapsibleProps, ColorPicker, ColorPickerLabels, ColorPickerProps, Column, Columns, ColumnsProps, Combobox, ComboboxLabels, ComboboxOption, ComboboxProps, CommandAction, CommandGroup, CommandItem, CommandMenu, CommandMenuProps, CommandPage, CommandScope, CommandStatus, Comparison, ComparisonProps, ContainedList, ContainedListItem, ContainedListItemProps, ContainedListProps, ContextMenu, ContextMenuItem, ContextMenuItemProps, ContextMenuProps, CopyButton, CopyButtonProps, DataList, DataListItem, DataListProps, DataTable, DataTableLabels, DataTableProps, DatePicker, DatePickerLabels, DatePickerProps, DateRange, DateRangePicker, DateRangePickerLabels, DateRangePickerProps, DateRangePreset, Dock, DockItem, DockProps, Drawer, DrawerProps, Dropdown, DropdownItem, DropdownProps, Editable, EditableProps, EmptyState, EmptyStateProps, ErrorBoundary, Fab, FabAction, FabProps, Field, FieldProps, FileUploader, FileUploaderLabels, FileUploaderProps, Filter, FilterOption, FilterProps, FilterVariant, Flex, FlexProps, FocusScope, Form, FormConfig, FormProps, FormStore, FuzzyMatch, Grid, GridAlign, GridItem, GridItemProps, GridProps, Header, HeaderLabels, HeaderLink, HeaderPanel, HeaderPanelLabels, HeaderPanelProps, HeaderProps, Heading, HeadingLevel, HeadingProps, HeadingSize, HoverCard, HoverCardContent, HoverCardContentProps, HoverCardProps, HoverCardTrigger, HoverCardTriggerProps, IconButton, IconButtonProps, Image, ImageProps, Indicator, IndicatorPlacement, IndicatorProps, InlineLoading, InlineLoadingProps, InlineLoadingStatus, Input, InputGroup, InputGroupAddon, type InputGroupAddonProps, type InputGroupProps, InputProps, Item, ItemActions, ItemActionsProps, ItemContent, ItemContentProps, ItemDescription, ItemDescriptionProps, ItemMedia, ItemMediaProps, ItemProps, ItemTitle, ItemTitleProps, Join, JoinOrientation, JoinProps, Kbd, KbdProps, Label, LabelProps, Link, LinkProps, List, ListItem, ListItemProps, ListProps, LogLevel, LogLine, LogViewer, LogViewerLabels, LogViewerProps, Menu, MenuButton, MenuButtonItem, MenuButtonProps, MenuItem, MenuItemProps, MenuProps, MenuSeparator, MenuTrigger, MenuTriggerProps, Menubar, MenubarItem, MenubarMenu, MenubarProps, Modal, ModalProps, MultiSelect, MultiSelectLabels, MultiSelectOption, MultiSelectProps, NativeSelect, NativeSelectOption, NativeSelectProps, NavigationMenu, NavigationMenuItem, NavigationMenuProps, Notification, NotificationProps, NotificationVariant, NumberInput, NumberInputProps, OtpInput, OtpInputProps, OverflowMenu, OverflowMenuItem, OverflowMenuProps, Pagination, PaginationLabels, PaginationProps, PasswordInput, PasswordInputLabels, PasswordInputProps, Popover, PopoverContent, PopoverContentProps, PopoverProps, PopoverTrigger, PopoverTriggerProps, Portal, Progress, ProgressBar, ProgressBarProps, ProgressCircle, ProgressCircleProps, ProgressIndicator, ProgressIndicatorProps, ProgressProps, ProgressSize, ProgressStep, ProgressVariant, Prose, ProseProps, PullToRefresh, PullToRefreshProps, QrCode, QrCodeProps, RadialProgress, RadialProgressProps, RadialProgressSize, RadialProgressVariant, Radio, RadioCard, RadioCardGroup, RadioCardGroupProps, RadioCardProps, RadioGroup, RadioGroupProps, RadioProps, RatingGroup, RatingGroupLabels, RatingGroupProps, RelativeTime, RelativeTimeProps, Resizable, ResizableProps, Responsive, ScrollArea, ScrollAreaProps, Search, SearchProps, SegmentedControl, SegmentedControlOption, SegmentedControlProps, Select, SelectOption, SelectProps, Separator, SeparatorProps, Sheet, SheetProps, ShellHeader, ShellHeaderAction, ShellHeaderBrand, ShellHeaderLabels, ShellHeaderNavItem, ShellHeaderNavLink, ShellHeaderNavMenu, ShellHeaderNavMenuItem, ShellHeaderProps, SideNav, SideNavGroup, SideNavItem, SideNavLinkProps, SideNavLinkSubItem, SideNavProps, SideNavSubItem, SideNavTone, Skeleton, SkeletonProps, SkipNavLink, SkipNavLinkProps, SkipNavTarget, SkipNavTargetProps, Slider, SliderProps, SortDirection, SortState, Spacer, SpacerProps, Spinner, SpinnerProps, Stack, StackProps, type StandardSchemaV1, Stat, StatProps, Status, StatusProps, Step, StepState, Steps, StepsProps, StructuredList, StructuredListItem, StructuredListProps, SuspenseBoundary, Swap, SwapMode, SwapProps, SwipeAction, SwipeItem, SwipeItemProps, Switcher, SwitcherEntry, SwitcherLink, SwitcherProps, Tabs, TabsContent, TabsContentProps, TabsList, TabsProps, TabsTrigger, TabsTriggerProps, Tag$1 as Tag, TagProps, TagsInput, TagsInputProps, Text, TextProps, Textarea, TextareaProps, ThemeProvider, type ThemeProviderProps, Tile, TileProps, TimePicker, TimePickerProps, Timeline, TimelineItem, TimelineProps, ToastOptions, ToastProvider, ToastVariant, Toc, TocItem, TocProps, Toggle, ToggleGroup, ToggleGroupItem, ToggleGroupProps, ToggleProps, Toggletip, ToggletipPlacement, ToggletipProps, Tooltip, TooltipProps, TreeNode, TreeView, TreeViewProps, UploaderFile, type UsePopoverOptions, type UsePopoverReturn, type UseTocFromRegionOptions, User, UserProps, VisuallyHidden, VisuallyHiddenProps, createForm, dismissAllToasts, fuzzyMatch, fuzzyScore, setTheme, themePreloadScript, treeViewMessages, useForm, usePopover, useTheme, useToast, useTocFromRegion };

package/dist/layouts/src/columns/columns.css

@@ -1 +1 @@
-@layer cascivo.component{._columns_yqrkk_2{grid-template-columns:repeat(var(--_cols,2), minmax(0, 1fr));gap:var(--_gap,var(--cascivo-space-4));display:grid;container-type:inline-size}@container (width<=40rem){._columns_yqrkk_2{grid-template-columns:1fr}}}
+@layer cascivo.component{._columns-container_1efih_2{display:grid;container-type:inline-size}._columns_1efih_2{grid-template-columns:repeat(var(--_cols,2), minmax(0, 1fr));gap:var(--_gap,var(--cascivo-space-4));min-inline-size:0;display:grid}@container (width<=40rem){._columns_1efih_2{grid-template-columns:1fr}}}

package/dist/layouts/src/columns/columns.js

@@ -4,15 +4,19 @@ import e from "./columns.module.js";
 import { cn as t } from "@cascivo/core";
 import { jsx as n } from "react/jsx-runtime";
 //#region ../layouts/src/columns/columns.tsx
-function r({ count: r = 2, gap: i = 4, className: a, style: o, ...s }) {
+function r({ count: r = 2, gap: i = 4, className: a, style: o, children: s, ...c }) {
 	return /* @__PURE__ */ n("div", {
-		className: t(e.columns, a),
+		className: t(e["columns-container"], a),
 		style: {
 			"--_cols": String(r),
 			"--_gap": `var(--cascivo-space-${i})`,
 			...o
 		},
-		...s
+		...c,
+		children: /* @__PURE__ */ n("div", {
+			className: e.columns,
+			children: s
+		})
 	});
 }
 //#endregion

package/dist/layouts/src/columns/columns.module.js

@@ -1,6 +1,9 @@
 "use client";
 
 import './columns.css';
-var e = { columns: "_columns_yqrkk_2" };
+var e = {
+	"columns-container": "_columns-container_1efih_2",
+	columns: "_columns_1efih_2"
+};
 //#endregion
 export { e as default };

package/dist/layouts/src/grid/grid.css

@@ -1 +1 @@
-@layer cascivo.component{._grid_1awa2_2{grid-template-columns:repeat(var(--_grid-cols,12), minmax(0, 1fr));gap:var(--_grid-gap,var(--cascivo-space-4));align-items:var(--_grid-align,stretch);justify-items:var(--_grid-justify,stretch);display:grid;container-type:inline-size}@container (width<=40rem){._grid_1awa2_2:not([data-responsive]){grid-template-columns:1fr}}@container (width>=30rem){._grid_1awa2_2[data-responsive]{grid-template-columns:repeat(var(--_grid-cols-sm,var(--_grid-cols,12)), minmax(0, 1fr))}}@container (width>=40rem){._grid_1awa2_2[data-responsive]{grid-template-columns:repeat(var(--_grid-cols-md,var(--_grid-cols-sm,var(--_grid-cols,12))), minmax(0, 1fr))}}@container (width>=64rem){._grid_1awa2_2[data-responsive]{grid-template-columns:repeat(var(--_grid-cols-lg,var(--_grid-cols-md,var(--_grid-cols-sm,var(--_grid-cols,12)))), minmax(0, 1fr))}}@container (width>=80rem){._grid_1awa2_2[data-responsive]{grid-template-columns:repeat(var(--_grid-cols-xl,var(--_grid-cols-lg,var(--_grid-cols-md,var(--_grid-cols-sm,var(--_grid-cols,12))))), minmax(0, 1fr))}}._grid-item_1awa2_46{grid-column:span var(--_span,1)}@container (width>=30rem){._grid-item_1awa2_46[data-responsive]{grid-column:span var(--_span-sm,var(--_span,1))}}@container (width>=40rem){._grid-item_1awa2_46[data-responsive]{grid-column:span var(--_span-md,var(--_span-sm,var(--_span,1)))}}@container (width>=64rem){._grid-item_1awa2_46[data-responsive]{grid-column:span var(--_span-lg,var(--_span-md,var(--_span-sm,var(--_span,1))))}}@container (width>=80rem){._grid-item_1awa2_46[data-responsive]{grid-column:span var(--_span-xl,var(--_span-lg,var(--_span-md,var(--_span-sm,var(--_span,1)))))}}}
+@layer cascivo.component{._grid-container_qly9o_5{display:grid;container-type:inline-size}._grid_qly9o_2{grid-template-columns:repeat(var(--_grid-cols,12), minmax(0, 1fr));gap:var(--_grid-gap,var(--cascivo-space-4));align-items:var(--_grid-align,stretch);justify-items:var(--_grid-justify,stretch);min-inline-size:0;display:grid;container-type:inline-size}@container (width<=40rem){._grid_qly9o_2:not([data-responsive]){grid-template-columns:1fr}}@container (width>=30rem){._grid_qly9o_2[data-responsive]{grid-template-columns:repeat(var(--_grid-cols-sm,var(--_grid-cols,12)), minmax(0, 1fr))}}@container (width>=40rem){._grid_qly9o_2[data-responsive]{grid-template-columns:repeat(var(--_grid-cols-md,var(--_grid-cols-sm,var(--_grid-cols,12))), minmax(0, 1fr))}}@container (width>=64rem){._grid_qly9o_2[data-responsive]{grid-template-columns:repeat(var(--_grid-cols-lg,var(--_grid-cols-md,var(--_grid-cols-sm,var(--_grid-cols,12)))), minmax(0, 1fr))}}@container (width>=80rem){._grid_qly9o_2[data-responsive]{grid-template-columns:repeat(var(--_grid-cols-xl,var(--_grid-cols-lg,var(--_grid-cols-md,var(--_grid-cols-sm,var(--_grid-cols,12))))), minmax(0, 1fr))}}._grid-item_qly9o_55{grid-column:span var(--_span,1)}@container (width>=30rem){._grid-item_qly9o_55[data-responsive]{grid-column:span var(--_span-sm,var(--_span,1))}}@container (width>=40rem){._grid-item_qly9o_55[data-responsive]{grid-column:span var(--_span-md,var(--_span-sm,var(--_span,1)))}}@container (width>=64rem){._grid-item_qly9o_55[data-responsive]{grid-column:span var(--_span-lg,var(--_span-md,var(--_span-sm,var(--_span,1))))}}@container (width>=80rem){._grid-item_qly9o_55[data-responsive]{grid-column:span var(--_span-xl,var(--_span-lg,var(--_span-md,var(--_span-sm,var(--_span,1)))))}}}

package/dist/layouts/src/grid/grid.js

@@ -25,8 +25,7 @@ function i(e, t) {
 }
 function a({ cols: a = 12, gap: o = 4, align: s, justify: c, className: l, style: u, children: d, ...f }) {
 	return /* @__PURE__ */ n("div", {
-		className: t(e.grid, l),
-		"data-responsive": r(a) ? "" : void 0,
+		className: t(e["grid-container"], l),
 		style: {
 			...i("--_grid-cols", a),
 			"--_grid-gap": `var(--cascivo-space-${o})`,
@@ -35,7 +34,11 @@ function a({ cols: a = 12, gap: o = 4, align: s, justify: c, className: l, style
 			...u
 		},
 		...f,
-		children: d
+		children: /* @__PURE__ */ n("div", {
+			className: e.grid,
+			"data-responsive": r(a) ? "" : void 0,
+			children: d
+		})
 	});
 }
 function o({ span: a, className: o, style: s, ...c }) {

package/dist/layouts/src/grid/grid.module.js

@@ -2,8 +2,9 @@
 
 import './grid.css';
 var e = {
-	grid: "_grid_1awa2_2",
-	"grid-item": "_grid-item_1awa2_46"
+	"grid-container": "_grid-container_qly9o_5",
+	grid: "_grid_qly9o_2",
+	"grid-item": "_grid-item_qly9o_55"
 };
 //#endregion
 export { e as default };

package/dist/navigation-menu/navigation-menu.js

@@ -1,88 +1,92 @@
 "use client";
 
 import e from "./navigation-menu.module.js";
-import { DismissableLayer as t, Presence as n, cn as r, useAnchorPosition as i, useRovingFocus as a, useSignal as o, useSignals as s } from "@cascivo/core";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
-import { useId as u, useRef as d } from "react";
+import { DismissableLayer as t, Presence as n, cn as r, getLinkComponent as i, useAnchorPosition as a, useRovingFocus as o, useSignal as s, useSignals as c } from "@cascivo/core";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { useId as d, useRef as f } from "react";
 //#region ../components/src/navigation-menu/navigation-menu.tsx
-function f({ items: t, "aria-label": n, orientation: i = "horizontal", className: l }) {
-	s();
-	let d = u(), f = o(null), m = a({
+function p({ items: t, "aria-label": n, orientation: i = "horizontal", className: a }) {
+	c();
+	let u = d(), f = s(null), p = o({
 		orientation: i,
 		loop: !0
 	});
-	return /* @__PURE__ */ c("nav", {
+	return /* @__PURE__ */ l("nav", {
 		"aria-label": n,
-		className: r(e.nav, l),
+		className: r(e.nav, a),
 		"data-orientation": i,
-		children: /* @__PURE__ */ c("ul", {
+		children: /* @__PURE__ */ l("ul", {
 			role: "list",
 			className: e.list,
-			children: t.map((e, t) => /* @__PURE__ */ c(p, {
+			children: t.map((e, t) => /* @__PURE__ */ l(m, {
 				item: e,
-				baseId: d,
+				baseId: u,
 				openId: f,
-				itemProps: m.getItemProps(t)
+				itemProps: p.getItemProps(t)
 			}, e.id))
 		})
 	});
 }
-function p({ item: t, baseId: r, openId: a, itemProps: o }) {
-	s();
-	let u = d(null), f = d(null), p = t.content != null, h = a.value === t.id, g = `${r}-panel-${t.id}`, { anchorStyle: _, floatingStyle: v } = i({
-		anchorRef: u,
-		floatingRef: f,
+function m({ item: t, baseId: r, openId: o, itemProps: s }) {
+	c();
+	let d = f(null), p = f(null), m = t.content != null, g = o.value === t.id, _ = `${r}-panel-${t.id}`, { anchorStyle: v, floatingStyle: y } = a({
+		anchorRef: d,
+		floatingRef: p,
 		placement: "bottom-start",
-		enabled: h
-	}), { ref: y, onKeyDown: b, ...x } = o;
-	return p ? /* @__PURE__ */ l("li", {
+		enabled: g
+	}), { ref: b, onKeyDown: x, ...S } = s;
+	if (!m) {
+		let n = i();
+		return /* @__PURE__ */ l("li", {
+			className: e.item,
+			children: /* @__PURE__ */ l(n, {
+				ref: (e) => b(e),
+				href: t.href,
+				className: e.link,
+				onKeyDown: x,
+				...S,
+				children: t.label
+			})
+		});
+	}
+	return /* @__PURE__ */ u("li", {
 		className: e.item,
-		children: [/* @__PURE__ */ c("button", {
+		children: [/* @__PURE__ */ l("button", {
 			ref: (e) => {
-				u.current = e, y(e);
+				d.current = e, b(e);
 			},
 			type: "button",
-			"aria-expanded": h,
-			"aria-controls": g,
-			"data-state": h ? "open" : "closed",
+			"aria-expanded": g,
+			"aria-controls": _,
+			"data-state": g ? "open" : "closed",
 			className: e.trigger,
-			style: _,
+			style: v,
 			onClick: () => {
-				a.value = h ? null : t.id;
+				o.value = g ? null : t.id;
 			},
 			onKeyDown: (e) => {
-				b(e), !e.defaultPrevented && e.key === "Escape" && (a.value = null);
+				x(e), !e.defaultPrevented && e.key === "Escape" && (o.value = null);
 			},
-			...x,
+			...S,
 			children: t.label
-		}), /* @__PURE__ */ c(n, {
-			present: h,
-			children: /* @__PURE__ */ c(m, {
-				panelId: g,
-				floatingRef: f,
-				floatingStyle: v,
+		}), /* @__PURE__ */ l(n, {
+			present: g,
+			children: /* @__PURE__ */ l(h, {
+				panelId: _,
+				floatingRef: p,
+				floatingStyle: y,
 				onClose: () => {
-					a.value = null, u.current?.focus();
+					o.value = null, d.current?.focus();
 				},
 				children: t.content
 			})
 		})]
-	}) : /* @__PURE__ */ c("li", {
-		className: e.item,
-		children: /* @__PURE__ */ c("a", {
-			ref: (e) => y(e),
-			href: t.href,
-			className: e.link,
-			onKeyDown: b,
-			...x,
-			children: t.label
-		})
 	});
 }
-function m({ panelId: n, floatingRef: r, floatingStyle: i, onClose: a, children: o }) {
-	return /* @__PURE__ */ c(t, {
+function h({ panelId: n, floatingRef: r, floatingStyle: i, onClose: a, children: o }) {
+	return /* @__PURE__ */ l(t, {
 		onDismiss: a,
-		children: /* @__PURE__ */ c("div", {
+		children: /* @__PURE__ */ l("div", {
 			ref: r,
 			id: n,
 			className: e.panel,
@@ -92,4 +96,4 @@ function m({ panelId: n, floatingRef: r, floatingStyle: i, onClose: a, children:
 	});
 }
 //#endregion
-export { f as NavigationMenu };
+export { p as NavigationMenu };

package/dist/relative-time/relative-time.js

@@ -43,7 +43,7 @@ function _({ date: c, sync: l = !0, now: u, format: d, className: f, ...p }) {
 	i();
 	let m = g(c), _ = u !== void 0, v = n(u ?? Date.now());
 	_ && (v.value = u), r(() => {
-		if (!l || _ || typeof window > "u") return;
+		if (_ || typeof window > "u" || (v.value = Date.now(), !l)) return;
 		let { nextUpdateMs: e } = h(m - v.value), t = window.setInterval(() => {
 			v.value = Date.now();
 		}, e);
@@ -57,6 +57,7 @@ function _({ date: c, sync: l = !0, now: u, format: d, className: f, ...p }) {
 			timeStyle: "short"
 		}),
 		className: t(e.relativeTime, f),
+		suppressHydrationWarning: !0,
 		...p,
 		children: x
 	});

package/dist/search/search.css

@@ -1 +1 @@
-@layer cascivo.component{._root_22xq7_2{align-items:center;inline-size:100%;display:inline-flex;position:relative}._root_22xq7_2[data-size=sm]{--_search-height:2rem;--_search-font:var(--cascivo-text-sm);--_search-px:var(--cascivo-space-3)}._root_22xq7_2[data-size=md]{--_search-height:2.5rem;--_search-font:var(--cascivo-text-sm);--_search-px:var(--cascivo-space-4)}._root_22xq7_2[data-size=lg]{--_search-height:3rem;--_search-font:var(--cascivo-text-base);--_search-px:var(--cascivo-space-4)}._label_22xq7_28{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;block-size:1px;inline-size:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}._icon_22xq7_41{color:var(--cascivo-color-text-muted);pointer-events:none;align-items:center;display:inline-flex;position:absolute;inset-inline-start:var(--_search-px,var(--cascivo-space-4))}._input_22xq7_50{inline-size:100%;block-size:var(--_search-height,2.5rem);font-family:var(--cascivo-font-sans);font-size:var(--_search-font,var(--cascivo-text-sm));color:var(--cascivo-color-text);background-color:var(--cascivo-color-surface);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-field);transition:border-color var(--cascivo-duration-150) var(--cascivo-ease-out), box-shadow var(--cascivo-duration-150) var(--cascivo-ease-out);outline:none;padding-inline-start:calc(var(--_search-px,var(--cascivo-space-4)) + 1rem + var(--cascivo-space-2));padding-inline-end:calc(var(--_search-px,var(--cascivo-space-4)) + 1.5rem)}._input_22xq7_50::-webkit-search-cancel-button{appearance:none;display:none}._input_22xq7_50::-webkit-search-decoration{appearance:none;display:none}._input_22xq7_50::placeholder{color:var(--cascivo-color-text-muted)}._input_22xq7_50:hover:not(:disabled):not(:focus){border-color:var(--cascivo-color-border-strong)}._input_22xq7_50:focus{border-color:var(--cascivo-color-accent);box-shadow:var(--cascivo-focus-ring)}._input_22xq7_50:disabled{opacity:.5;cursor:not-allowed;background-color:var(--cascivo-color-bg-subtle)}._clear_22xq7_96{block-size:1.5rem;inline-size:1.5rem;font-size:var(--cascivo-text-sm);line-height:var(--cascivo-leading-none);color:var(--cascivo-color-text-muted);border-radius:var(--cascivo-radius-control);cursor:pointer;transition:background-color var(--cascivo-duration-150) var(--cascivo-ease-out), color var(--cascivo-duration-150) var(--cascivo-ease-out);background-color:#0000;border:none;justify-content:center;align-items:center;padding:0;display:inline-flex;position:absolute;inset-inline-end:var(--cascivo-space-2)}._clear_22xq7_96:hover:not(:disabled){color:var(--cascivo-color-text);background-color:var(--cascivo-color-bg-subtle)}._clear_22xq7_96:focus-visible{box-shadow:var(--cascivo-focus-ring);outline:none}._clear_22xq7_96:disabled{cursor:not-allowed}}
+@layer cascivo.component{._root_1m8s8_2{inline-size:var(--cascivo-search-width,100%);align-items:center;display:inline-flex;position:relative}._root_1m8s8_2[data-size=sm]{--_search-height:2rem;--_search-font:var(--cascivo-text-sm);--_search-px:var(--cascivo-space-3)}._root_1m8s8_2[data-size=md]{--_search-height:2.5rem;--_search-font:var(--cascivo-text-sm);--_search-px:var(--cascivo-space-4)}._root_1m8s8_2[data-size=lg]{--_search-height:3rem;--_search-font:var(--cascivo-text-base);--_search-px:var(--cascivo-space-4)}._label_1m8s8_31{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;block-size:1px;inline-size:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}._icon_1m8s8_44{color:var(--cascivo-color-text-muted);pointer-events:none;align-items:center;display:inline-flex;position:absolute;inset-inline-start:var(--_search-px,var(--cascivo-space-4))}._input_1m8s8_53{inline-size:100%;block-size:var(--_search-height,2.5rem);font-family:var(--cascivo-font-sans);font-size:var(--_search-font,var(--cascivo-text-sm));color:var(--cascivo-color-text);background-color:var(--cascivo-color-surface);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-field);transition:border-color var(--cascivo-duration-150) var(--cascivo-ease-out), box-shadow var(--cascivo-duration-150) var(--cascivo-ease-out);outline:none;padding-inline-start:calc(var(--_search-px,var(--cascivo-space-4)) + 1rem + var(--cascivo-space-2));padding-inline-end:calc(var(--_search-px,var(--cascivo-space-4)) + 1.5rem)}._input_1m8s8_53::-webkit-search-cancel-button{appearance:none;display:none}._input_1m8s8_53::-webkit-search-decoration{appearance:none;display:none}._input_1m8s8_53::placeholder{color:var(--cascivo-color-text-muted)}._input_1m8s8_53:hover:not(:disabled):not(:focus){border-color:var(--cascivo-color-border-strong)}._input_1m8s8_53:focus{border-color:var(--cascivo-color-accent);box-shadow:var(--cascivo-focus-ring)}._input_1m8s8_53:disabled{opacity:.5;cursor:not-allowed;background-color:var(--cascivo-color-bg-subtle)}._clear_1m8s8_99{block-size:1.5rem;inline-size:1.5rem;font-size:var(--cascivo-text-sm);line-height:var(--cascivo-leading-none);color:var(--cascivo-color-text-muted);border-radius:var(--cascivo-radius-control);cursor:pointer;transition:background-color var(--cascivo-duration-150) var(--cascivo-ease-out), color var(--cascivo-duration-150) var(--cascivo-ease-out);background-color:#0000;border:none;justify-content:center;align-items:center;padding:0;display:inline-flex;position:absolute;inset-inline-end:var(--cascivo-space-2)}._clear_1m8s8_99:hover:not(:disabled){color:var(--cascivo-color-text);background-color:var(--cascivo-color-bg-subtle)}._clear_1m8s8_99:focus-visible{box-shadow:var(--cascivo-focus-ring);outline:none}._clear_1m8s8_99:disabled{cursor:not-allowed}}