@cascivo/react 0.6.3 → 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
 
@@ -353,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}}

package/dist/search/search.module.js

@@ -2,11 +2,11 @@
 
 import './search.css';
 var e = {
-	root: "_root_22xq7_2",
-	label: "_label_22xq7_28",
-	icon: "_icon_22xq7_41",
-	input: "_input_22xq7_50",
-	clear: "_clear_22xq7_96"
+	root: "_root_1m8s8_2",
+	label: "_label_1m8s8_31",
+	icon: "_icon_1m8s8_44",
+	input: "_input_1m8s8_53",
+	clear: "_clear_1m8s8_99"
 };
 //#endregion
 export { e as default };