@naeil/ui 0.11.0 → 0.13.0

package/dist/source/components/naeil-header-core.d.ts

@@ -1,18 +1,20 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ReactNode } from 'react';
+import { ReactNode, JSX } from 'react';
 import { NavigationProps, NavigationItem, NavigationLinkProps, NavigationLink, NavigationLinkComponent } from './ui/navigation.js';
 import { NaeilHeaderLocale } from './naeil-header-data.js';
 export { NaeilHeaderAccount, NaeilHeaderAccountControl, NaeilHeaderAccountControlProps } from './naeil-header-account-core.js';
 
 interface NaeilHeaderProps extends Omit<NavigationProps, "brand" | "items" | "toolbar" | "mobileToolbar" | "labels"> {
+    service?: undefined;
     locale: NaeilHeaderLocale;
     /** Resolve canonical unlocalized paths. Defaults to the official localized site. */
     resolveHref?: (path: string) => string;
     brandHref?: string;
+    /** @deprecated Owned services must use service; retained for compatibility. */
     brandSlot?: ReactNode;
-    /** Ignored when brandSlot replaces the complete brand content. */
+    /** @deprecated Owned services must use service; retained for compatibility. Ignored with brandSlot. */
     brandSuffix?: string;
-    /** After the brand link, outside it; rendered once at every width. */
+    /** @deprecated Owned services must use service with no indicator; retained for compatibility. */
     statusSlot?: ReactNode;
     /** Product menu data, after catalog/blog and before flat subNav links. */
     appNavigation?: NavigationItem[];
@@ -33,17 +35,32 @@ interface NaeilHeaderProps extends Omit<NavigationProps, "brand" | "items" | "to
     };
     showProjects?: boolean;
     showBlog?: boolean;
+    /** @deprecated Owned services must use service and appNavigation; retained for compatibility. */
     subNav?: Array<{
         label: string;
         href: string;
     }>;
     currentProjectKey?: string;
     currentProjectHref?: string;
-    /** Compatibility escape hatch replacing the default theme/locale/auth toolbar. */
+    /** @deprecated Owned services must use service and authSlot; retained for compatibility. */
     toolbarSlot?: ReactNode;
-    /** Compatibility escape hatch for the legacy native external brand link. */
+    /** @deprecated Owned services must use service and Link; retained for compatibility. */
     brandLinkComponent?: NavigationLinkComponent;
 }
+/** Canonical owned-service identifiers; their spelling is the visible brand suffix. */
+declare const naeilServices: readonly ["abstorm", "home", "estimate", "jev"];
+type NaeilService = typeof naeilServices[number];
+declare const serviceCompatibilityProps: readonly ["brandSuffix", "statusSlot", "brandSlot", "toolbarSlot", "subNav", "brandLinkComponent", "projects", "projectsExternal", "showProjects", "showBlog", "translations", "className", "containerClassName", "style", "brandLinkProps", "mobileFooter", "omitEmptyNavigation"];
+type ServiceCompatibilityProp = typeof serviceCompatibilityProps[number];
+/** Strict owned-service props; the legacy interface remains independently extensible. */
+type NaeilServiceHeaderProps = Omit<NaeilHeaderProps, ServiceCompatibilityProp | "service"> & {
+    service: NaeilService;
+} & {
+    [Prop in ServiceCompatibilityProp]?: never;
+};
+/** Opt into the owned-service contract without changing the legacy composition. */
+declare function NaeilHeader(props: NaeilServiceHeaderProps): JSX.Element;
+declare function NaeilHeader(props: NaeilHeaderProps): JSX.Element;
 /** The actual header theme control; reads only the consumer's theme provider. */
 declare function NaeilHeaderThemeControl({ locale }: {
     locale: NaeilHeaderLocale;
@@ -53,7 +70,5 @@ declare function NaeilHeaderLocaleControl({ locale, onLocaleChange }: {
     locale: NaeilHeaderLocale;
     onLocaleChange: (locale: NaeilHeaderLocale) => void;
 }): react_jsx_runtime.JSX.Element;
-/** One complete, opt-in branded composition shared by naeil.dev and applications. */
-declare function NaeilHeader({ locale, resolveHref, brandHref, brandSlot, brandSuffix, statusSlot, appNavigation, brandLinkProps, brandLinkComponent, onLocaleChange, authSlot, toolbarSlot, projects, projectsExternal, translations, showProjects, showBlog, subNav, currentProjectKey, currentProjectHref, labels, Link, currentHref, onNavigate, className, containerClassName, ...props }: NaeilHeaderProps): react_jsx_runtime.JSX.Element;
 
-export { NaeilHeader, NaeilHeaderLocale, NaeilHeaderLocaleControl, type NaeilHeaderProps, NaeilHeaderThemeControl };
+export { NaeilHeader, NaeilHeaderLocale, NaeilHeaderLocaleControl, type NaeilHeaderProps, NaeilHeaderThemeControl, type NaeilService, type NaeilServiceHeaderProps, naeilServices };

package/dist/source/components/naeil-header-core.js

@@ -44,6 +44,58 @@ import { uiRelease } from "../lib/ui-release.js";
 import { headerLocales, headerProjects } from "./naeil-header-data.js";
 import { useNaeilMessages } from "./naeil-messages-context.js";
 import { NaeilHeaderAccountControl } from "./naeil-header-account-core.js";
+const naeilServices = Object.freeze(["abstorm", "home", "estimate", "jev"]);
+const serviceCompatibilityProps = [
+  "brandSuffix",
+  "statusSlot",
+  "brandSlot",
+  "toolbarSlot",
+  "subNav",
+  "brandLinkComponent",
+  "projects",
+  "projectsExternal",
+  "showProjects",
+  "showBlog",
+  "translations",
+  "className",
+  "containerClassName",
+  "style",
+  "brandLinkProps",
+  "mobileFooter",
+  "omitEmptyNavigation"
+];
+const warnedServiceProps = /* @__PURE__ */ new Set();
+function isDevelopment() {
+  try {
+    return process.env.NODE_ENV === "development";
+  } catch (e) {
+    return false;
+  }
+}
+function warnServiceProp(name, message) {
+  if (!isDevelopment() || warnedServiceProps.has(name)) return;
+  warnedServiceProps.add(name);
+  console.warn(message);
+}
+function isNaeilService(value) {
+  return naeilServices.includes(value);
+}
+function NaeilHeader(input) {
+  if (input.service === void 0) return /* @__PURE__ */ jsx(HeaderComposition, __spreadValues({}, input));
+  if (!isNaeilService(input.service)) {
+    warnServiceProp("service", "NaeilHeader: invalid service; rendering the legacy profile.");
+    const legacy = __spreadProps(__spreadValues({}, input), { service: void 0 });
+    delete legacy.service;
+    return /* @__PURE__ */ jsx(HeaderComposition, __spreadValues({}, legacy));
+  }
+  const props = __spreadValues({}, input);
+  for (const name of Object.keys(props)) {
+    if (!serviceCompatibilityProps.includes(name) && name !== "data-slot" && name !== "data-global-header" && !name.startsWith("data-naeil-")) continue;
+    delete props[name];
+    warnServiceProp(name, `NaeilHeader: service profile ignores ${name}; use the shared service composition.`);
+  }
+  return /* @__PURE__ */ jsx(HeaderComposition, __spreadProps(__spreadValues({}, props), { service: input.service }));
+}
 const subscribe = () => () => {
 };
 function NaeilHeaderThemeControl({ locale }) {
@@ -80,8 +132,9 @@ function NaeilHeaderLocaleControl({ locale, onLocaleChange }) {
   ] });
 }
 const NativeLink = (props) => /* @__PURE__ */ jsx("a", __spreadValues({}, props));
-function NaeilHeader(_a) {
+function HeaderComposition(_a) {
   var _b = _a, {
+    service,
     locale,
     resolveHref = (path) => `https://naeil.dev/${locale}${path === "/" ? "" : path}`,
     brandHref,
@@ -109,6 +162,7 @@ function NaeilHeader(_a) {
     className,
     containerClassName
   } = _b, props = __objRest(_b, [
+    "service",
     "locale",
     "resolveHref",
     "brandHref",
@@ -137,6 +191,11 @@ function NaeilHeader(_a) {
     "containerClassName"
   ]);
   var _b2, _c;
+  if (service) {
+    brandSuffix = service;
+    showProjects = false;
+    showBlog = false;
+  }
   const content = useNaeilMessages(locale).header;
   const projectLinks = !showProjects ? [] : projects != null ? projects : headerProjects.map((project) => {
     var _a3, _b3, _c2;
@@ -155,7 +214,7 @@ function NaeilHeader(_a) {
       badge: project.status === "coming" ? /* @__PURE__ */ jsx(Badge, { variant: "outline", children: (_c2 = translations == null ? void 0 : translations.project("status.coming")) != null ? _c2 : content.projects.status.coming }) : void 0
     };
   });
-  const brandDestination = brandHref != null ? brandHref : resolveHref("/");
+  const brandDestination = brandHref != null ? brandHref : service ? "/" : resolveHref("/");
   const BrandLink = brandLinkComponent != null ? brandLinkComponent : Link;
   const _a2 = brandLinkProps != null ? brandLinkProps : {}, { onClick: onBrandClick } = _a2, brandProps = __objRest(_a2, ["onClick"]);
   const toolbar = /* @__PURE__ */ jsx(
@@ -181,11 +240,11 @@ function NaeilHeader(_a) {
     __spreadProps(__spreadValues({
       href: brandDestination,
       "data-app-brand": true,
-      "aria-label": brandSlot == null ? ".naeil" : void 0
+      "aria-label": service ? `.naeil ${service}` : brandSlot == null ? ".naeil" : void 0
     }, brandProps), {
       onClick: (event) => {
         onBrandClick == null ? void 0 : onBrandClick(event);
-        onNavigate == null ? void 0 : onNavigate(event, { id: "brand", href: brandDestination, label: ".naeil" });
+        onNavigate == null ? void 0 : onNavigate(event, { id: "brand", href: brandDestination, label: service ? `.naeil ${service}` : ".naeil" });
       },
       children: brandSlot != null ? brandSlot : brandSuffix ? /* @__PURE__ */ jsxs(Fragment, { children: [
         logo,
@@ -195,7 +254,7 @@ function NaeilHeader(_a) {
   );
   return /* @__PURE__ */ jsx(
     Navigation,
-    __spreadProps(__spreadValues({}, props), {
+    __spreadProps(__spreadValues(__spreadValues({}, props), service ? { "data-slot": "navigation", omitEmptyNavigation: true } : {}), {
       "data-global-header": true,
       "data-naeil-header": true,
       "data-naeil-chrome": "",
@@ -227,5 +286,6 @@ export {
   NaeilHeader,
   NaeilHeaderAccountControl,
   NaeilHeaderLocaleControl,
-  NaeilHeaderThemeControl
+  NaeilHeaderThemeControl,
+  naeilServices
 };

package/dist/source/components/naeil-header.d.ts

@@ -1,12 +1,14 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { NaeilHeaderProps } from './naeil-header-core.js';
+import { JSX } from 'react';
+import { NaeilServiceHeaderProps, NaeilHeaderProps } from './naeil-header-core.js';
+export { NaeilService, naeilServices } from './naeil-header-core.js';
 import { NaeilHeaderLocale } from './naeil-header-data.js';
 export { NaeilHeaderAccountControl } from './naeil-header-account.js';
 export { NaeilHeaderAccount, NaeilHeaderAccountControlProps } from './naeil-header-account-core.js';
-import 'react';
 import './ui/navigation.js';
 
-declare function NaeilHeader(props: NaeilHeaderProps): react_jsx_runtime.JSX.Element;
+declare function NaeilHeader(props: NaeilServiceHeaderProps): JSX.Element;
+declare function NaeilHeader(props: NaeilHeaderProps): JSX.Element;
 declare function NaeilHeaderThemeControl(props: {
     locale: NaeilHeaderLocale;
 }): react_jsx_runtime.JSX.Element;
@@ -15,4 +17,4 @@ declare function NaeilHeaderLocaleControl(props: {
     onLocaleChange: (locale: NaeilHeaderLocale) => void;
 }): react_jsx_runtime.JSX.Element;
 
-export { NaeilHeader, NaeilHeaderLocale, NaeilHeaderLocaleControl, NaeilHeaderProps, NaeilHeaderThemeControl };
+export { NaeilHeader, NaeilHeaderLocale, NaeilHeaderLocaleControl, NaeilHeaderProps, NaeilHeaderThemeControl, NaeilServiceHeaderProps };

package/dist/source/components/naeil-header.js

@@ -18,9 +18,10 @@ var __spreadValues = (a, b) => {
 import { jsx } from "react/jsx-runtime";
 import { NaeilHeader as Header, NaeilHeaderThemeControl as ThemeControl, NaeilHeaderLocaleControl as LocaleControl } from "./naeil-header-core.js";
 import { NaeilStandaloneMessages } from "./naeil-standalone-messages.js";
+import { naeilServices } from "./naeil-header-core.js";
 import { NaeilHeaderAccountControl } from "./naeil-header-account.js";
 function NaeilHeader(props) {
-  return /* @__PURE__ */ jsx(NaeilStandaloneMessages, { locale: props.locale, children: /* @__PURE__ */ jsx(Header, __spreadValues({}, props)) });
+  return /* @__PURE__ */ jsx(NaeilStandaloneMessages, { locale: props.locale, children: props.service === void 0 ? /* @__PURE__ */ jsx(Header, __spreadValues({}, props)) : /* @__PURE__ */ jsx(Header, __spreadValues({}, props)) });
 }
 function NaeilHeaderThemeControl(props) {
   return /* @__PURE__ */ jsx(NaeilStandaloneMessages, { locale: props.locale, children: /* @__PURE__ */ jsx(ThemeControl, __spreadValues({}, props)) });
@@ -32,5 +33,6 @@ export {
   NaeilHeader,
   NaeilHeaderAccountControl,
   NaeilHeaderLocaleControl,
-  NaeilHeaderThemeControl
+  NaeilHeaderThemeControl,
+  naeilServices
 };

package/dist/source/components/typography.d.ts

@@ -4,7 +4,7 @@ import * as react from 'react';
 type HeadingProps = react.HTMLAttributes<HTMLHeadingElement> & {
     children: react.ReactNode;
 };
-declare const pageTitleClass = "text-foreground text-3xl font-semibold leading-tight";
+declare const pageTitleClass = "text-foreground text-3xl font-semibold";
 declare const sectionTitleClass = "text-foreground text-xl font-semibold";
 declare function PageTitle({ className, children, ...props }: HeadingProps): react_jsx_runtime.JSX.Element;
 declare function SectionTitle({ className, children, ...props }: HeadingProps): react_jsx_runtime.JSX.Element;

package/dist/source/components/typography.js

@@ -31,7 +31,7 @@ var __objRest = (source, exclude) => {
 };
 import { jsx } from "react/jsx-runtime";
 import { cn } from "../lib/utils.js";
-const pageTitleClass = "text-foreground text-3xl font-semibold leading-tight";
+const pageTitleClass = "text-foreground text-3xl font-semibold";
 const sectionTitleClass = "text-foreground text-xl font-semibold";
 function PageTitle(_a) {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);

package/dist/source/components/ui/button.js

@@ -31,16 +31,16 @@ import { cva } from "class-variance-authority";
 import { Slot } from "radix-ui";
 import { cn } from "../../lib/utils.js";
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap ui-control ui-focus rounded-md text-base font-medium transition-colors duration-(--ui-motion-fast) cursor-pointer  disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0  ui-focus aria-invalid:border-error",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap ui-control ui-focus rounded-md text-base font-medium transition-colors duration-(--ui-motion-fast) cursor-pointer  disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0  ui-focus aria-invalid:border-error aria-pressed:inset-ring-2",
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary-hover",
-        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90 ",
-        outline: "border border-border-strong bg-background hover:bg-surface-subtle",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-surface-subtle",
-        link: "text-primary underline-offset-4 hover:underline"
+        default: "bg-primary text-primary-foreground hover:bg-primary-hover aria-pressed:bg-primary-hover aria-pressed:inset-ring-4 aria-pressed:inset-ring-primary-foreground aria-pressed:inset-shadow-[0_0_0_2px_var(--primary-hover)]",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90 aria-pressed:inset-ring-4 aria-pressed:inset-ring-destructive-foreground aria-pressed:inset-shadow-[0_0_0_2px_var(--destructive)]",
+        outline: "border border-border-strong bg-background hover:bg-surface-subtle aria-pressed:bg-surface-selected aria-pressed:text-foreground aria-pressed:inset-ring-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-pressed:bg-surface-selected aria-pressed:text-foreground aria-pressed:inset-ring-foreground",
+        ghost: "hover:bg-surface-subtle aria-pressed:bg-surface-selected aria-pressed:text-foreground aria-pressed:inset-ring-foreground",
+        link: "text-primary underline-offset-4 hover:underline aria-pressed:bg-surface-selected aria-pressed:text-foreground aria-pressed:inset-ring-foreground"
       },
       size: {
         default: "px-4 has-[>svg]:px-3",

package/dist/source/components/ui/card.js

@@ -73,7 +73,7 @@ function CardTitle(_g) {
     "div",
     __spreadValues({
       "data-slot": "card-title",
-      className: cn("leading-none font-semibold", className)
+      className: cn("text-base font-semibold", className)
     }, props)
   );
 }

package/dist/source/components/ui/dialog.d.ts

@@ -7,12 +7,14 @@ declare function DialogTrigger({ ...props }: react.ComponentProps<typeof Dialog$
 declare function DialogPortal({ ...props }: react.ComponentProps<typeof Dialog$1.Portal>): react_jsx_runtime.JSX.Element;
 declare function DialogClose({ ...props }: react.ComponentProps<typeof Dialog$1.Close>): react_jsx_runtime.JSX.Element;
 declare function DialogOverlay({ className, ...props }: react.ComponentProps<typeof Dialog$1.Overlay>): react_jsx_runtime.JSX.Element;
-declare function DialogContent({ className, children, showCloseButton, ...props }: react.ComponentProps<typeof Dialog$1.Content> & {
+declare function DialogContent({ className, children, showCloseButton, closeLabel, ...props }: react.ComponentProps<typeof Dialog$1.Content> & {
     showCloseButton?: boolean;
+    closeLabel?: string;
 }): react_jsx_runtime.JSX.Element;
 declare function DialogHeader({ className, ...props }: react.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
-declare function DialogFooter({ className, showCloseButton, children, ...props }: react.ComponentProps<"div"> & {
+declare function DialogFooter({ className, showCloseButton, closeLabel, children, ...props }: react.ComponentProps<"div"> & {
     showCloseButton?: boolean;
+    closeLabel?: string;
 }): react_jsx_runtime.JSX.Element;
 declare function DialogTitle({ className, ...props }: react.ComponentProps<typeof Dialog$1.Title>): react_jsx_runtime.JSX.Element;
 declare function DialogDescription({ className, ...props }: react.ComponentProps<typeof Dialog$1.Description>): react_jsx_runtime.JSX.Element;

package/dist/source/components/ui/dialog.js

@@ -69,11 +69,13 @@ function DialogContent(_g) {
   var _h = _g, {
     className,
     children,
-    showCloseButton = true
+    showCloseButton = true,
+    closeLabel = "Close"
   } = _h, props = __objRest(_h, [
     "className",
     "children",
-    "showCloseButton"
+    "showCloseButton",
+    "closeLabel"
   ]);
   return /* @__PURE__ */ jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [
     /* @__PURE__ */ jsx(DialogOverlay, {}),
@@ -82,7 +84,7 @@ function DialogContent(_g) {
       __spreadProps(__spreadValues({
         "data-slot": "dialog-content",
         className: cn(
-          "bg-popover ui-popup fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-xl border border-border-strong p-6  sm:max-w-lg",
+          "bg-popover ui-popup fixed top-[50%] left-[50%] z-50 grid w-full max-h-[min(calc(100%-2rem),calc(100dvh-2rem))] overflow-y-auto max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-xl border border-border-strong p-6  sm:max-w-lg",
           className
         )
       }, props), {
@@ -95,7 +97,7 @@ function DialogContent(_g) {
               className: "ui-focus absolute top-2 right-2 flex size-10 items-center justify-center rounded-sm text-muted-foreground hover:text-foreground transition-colors ui-focus disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
               children: [
                 /* @__PURE__ */ jsx(XIcon, {}),
-                /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+                /* @__PURE__ */ jsx("span", { className: "sr-only", children: closeLabel })
               ]
             }
           )
@@ -118,10 +120,12 @@ function DialogFooter(_k) {
   var _l = _k, {
     className,
     showCloseButton = false,
+    closeLabel = "Close",
     children
   } = _l, props = __objRest(_l, [
     "className",
     "showCloseButton",
+    "closeLabel",
     "children"
   ]);
   return /* @__PURE__ */ jsxs(
@@ -135,7 +139,7 @@ function DialogFooter(_k) {
     }, props), {
       children: [
         children,
-        showCloseButton && /* @__PURE__ */ jsx(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "outline", children: "Close" }) })
+        showCloseButton && /* @__PURE__ */ jsx(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "outline", children: closeLabel }) })
       ]
     })
   );
@@ -150,7 +154,7 @@ function DialogTitle(_m) {
     DialogPrimitive.Title,
     __spreadValues({
       "data-slot": "dialog-title",
-      className: cn("text-xl leading-normal font-semibold", className)
+      className: cn("text-xl font-semibold", className)
     }, props)
   );
 }

package/dist/source/components/ui/index.d.ts

@@ -3,6 +3,7 @@ export { Badge, badgeVariants } from './badge.js';
 export { Button, buttonVariants } from './button.js';
 export { Card, CardAction, CardContent, CardDescription, CardElevated, CardFooter, CardHeader, CardTitle } from './card.js';
 export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from './dialog.js';
+export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger } from './sheet.js';
 export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from './dropdown-menu.js';
 export { Input } from './input.js';
 export { Toaster } from './sonner.js';

package/dist/source/components/ui/index.js

@@ -30,6 +30,18 @@ import {
   DialogTitle,
   DialogTrigger
 } from "./dialog.js";
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetOverlay,
+  SheetPortal,
+  SheetTitle,
+  SheetTrigger
+} from "./sheet.js";
 import {
   DropdownMenu,
   DropdownMenuPortal,
@@ -122,6 +134,16 @@ export {
   SelectSeparator,
   SelectTrigger,
   SelectValue,
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetOverlay,
+  SheetPortal,
+  SheetTitle,
+  SheetTrigger,
   SiteFooter,
   Switch,
   Tabs,

package/dist/source/components/ui/navigation.d.ts

@@ -25,6 +25,8 @@ interface NavigationGroup {
 }
 type NavigationItem = NavigationLink | NavigationGroup;
 interface NavigationProps extends Omit<react.ComponentPropsWithoutRef<"header">, "children" | "onSelect"> {
+    /** Omit empty landmarks and dismiss toolbar-only sheets on desktop crossing. */
+    omitEmptyNavigation?: boolean;
     brand: react.ReactNode;
     items: NavigationItem[];
     /** Translated landmark/dialog/close labels are supplied by the application. */
@@ -49,6 +51,6 @@ declare const NavigationSheetAction: react.Context<((action: () => void) => {
     menuClosed: () => void;
     cancel: () => void;
 }) | undefined>;
-declare function Navigation({ brand, items, labels, Link, currentHref, toolbar, mobileToolbar, mobileFooter, mobileOpen: controlledOpen, onMobileOpenChange, containerClassName, onNavigate, className, ...props }: NavigationProps): react_jsx_runtime.JSX.Element;
+declare function Navigation({ brand, items, labels, Link, currentHref, toolbar, mobileToolbar, mobileFooter, omitEmptyNavigation, mobileOpen: controlledOpen, onMobileOpenChange, containerClassName, onNavigate, className, ...props }: NavigationProps): react_jsx_runtime.JSX.Element;
 
 export { Navigation, type NavigationGroup, type NavigationItem, type NavigationLink, type NavigationLinkComponent, type NavigationLinkProps, type NavigationProps, NavigationSheetAction };

package/dist/source/components/ui/navigation.js

@@ -169,6 +169,7 @@ function Navigation(_a) {
     toolbar,
     mobileToolbar,
     mobileFooter,
+    omitEmptyNavigation = false,
     mobileOpen: controlledOpen,
     onMobileOpenChange,
     containerClassName,
@@ -183,6 +184,7 @@ function Navigation(_a) {
     "toolbar",
     "mobileToolbar",
     "mobileFooter",
+    "omitEmptyNavigation",
     "mobileOpen",
     "onMobileOpenChange",
     "containerClassName",
@@ -253,7 +255,8 @@ function Navigation(_a) {
     setOpenGroup(null);
   }, [currentHref, setMobileOpen]);
   React.useEffect(() => {
-    const element = desktop.current;
+    var _a2, _b2;
+    const element = omitEmptyNavigation && !items.length ? (_b2 = (_a2 = desktop.current) == null ? void 0 : _a2.parentElement) == null ? void 0 : _b2.querySelector(".ui-navigation-toolbar") : desktop.current;
     if (!element || typeof ResizeObserver === "undefined") return;
     const observer = new ResizeObserver(() => {
       if (element.getBoundingClientRect().width > 0) setMobileOpen(false);
@@ -261,7 +264,8 @@ function Navigation(_a) {
     });
     observer.observe(element);
     return () => observer.disconnect();
-  }, [setMobileOpen]);
+  }, [setMobileOpen, omitEmptyNavigation, items.length]);
+  const DesktopElement = omitEmptyNavigation && !items.length ? "div" : "nav";
   const active = (item) => {
     var _a2;
     return (_a2 = item.active) != null ? _a2 : !item.external && item.href === currentHref;
@@ -310,10 +314,12 @@ function Navigation(_a) {
       children: /* @__PURE__ */ jsx("div", { className: cn("ui-navigation-frame", containerClassName), children: /* @__PURE__ */ jsxs("div", { className: "ui-navigation-row", children: [
         /* @__PURE__ */ jsx("div", { className: "ui-navigation-brand", children: brand }),
         /* @__PURE__ */ jsx(
-          "nav",
+          DesktopElement,
           {
-            ref: desktop,
-            "aria-label": labels.navigation,
+            ref: (element) => {
+              desktop.current = element;
+            },
+            "aria-label": omitEmptyNavigation && !items.length ? void 0 : labels.navigation,
             className: "ui-navigation-desktop",
             children: items.map(
               (item) => "items" in item ? /* @__PURE__ */ jsx(
@@ -365,7 +371,7 @@ function Navigation(_a) {
                 className: "ui-navigation-sheet ui-popup",
                 "aria-describedby": void 0,
                 onCloseAutoFocus: (event) => {
-                  var _a2, _b2;
+                  var _a2, _b2, _c, _d;
                   if (controlledOpen !== void 0 && (!mounted.current || state.current.open)) {
                     event.preventDefault();
                     return;
@@ -379,7 +385,10 @@ function Navigation(_a) {
                   }
                   if (trigger.current && trigger.current.getBoundingClientRect().width === 0) {
                     event.preventDefault();
-                    (_b2 = (_a2 = desktop.current) == null ? void 0 : _a2.querySelector("button, a")) == null ? void 0 : _b2.focus();
+                    const target = (_a2 = desktop.current) == null ? void 0 : _a2.querySelector("button, a");
+                    const toolbar2 = omitEmptyNavigation && !items.length ? (_c = (_b2 = desktop.current) == null ? void 0 : _b2.parentElement) == null ? void 0 : _c.querySelector(".ui-navigation-toolbar") : void 0;
+                    const toolbarTarget = !target && toolbar2 ? Array.from(toolbar2.querySelectorAll("button, a[href], input, select, textarea, [tabindex]")).find((element) => element.tabIndex >= 0 && !element.matches(":disabled") && element.getBoundingClientRect().width > 0 && element.getBoundingClientRect().height > 0) : void 0;
+                    (_d = target != null ? target : toolbarTarget) == null ? void 0 : _d.focus();
                   }
                 },
                 children: [
@@ -394,7 +403,7 @@ function Navigation(_a) {
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ jsx(
+                  (!omitEmptyNavigation || items.length > 0) && /* @__PURE__ */ jsx(
                     "nav",
                     {
                       "aria-label": labels.navigation,

package/dist/source/components/ui/sheet.d.ts

@@ -0,0 +1,20 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import { Dialog } from 'radix-ui';
+
+declare function Sheet({ ...props }: react.ComponentProps<typeof Dialog.Root>): react_jsx_runtime.JSX.Element;
+declare function SheetTrigger({ ...props }: react.ComponentProps<typeof Dialog.Trigger>): react_jsx_runtime.JSX.Element;
+declare function SheetPortal({ ...props }: react.ComponentProps<typeof Dialog.Portal>): react_jsx_runtime.JSX.Element;
+declare function SheetClose({ ...props }: react.ComponentProps<typeof Dialog.Close>): react_jsx_runtime.JSX.Element;
+declare function SheetOverlay({ className, ...props }: react.ComponentProps<typeof Dialog.Overlay>): react_jsx_runtime.JSX.Element;
+declare function SheetContent({ className, children, side, showCloseButton, closeLabel, ...props }: react.ComponentProps<typeof Dialog.Content> & {
+    side?: "right" | "left" | "top" | "bottom";
+    showCloseButton?: boolean;
+    closeLabel?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function SheetHeader({ className, ...props }: react.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function SheetFooter({ className, ...props }: react.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function SheetTitle({ className, ...props }: react.ComponentProps<typeof Dialog.Title>): react_jsx_runtime.JSX.Element;
+declare function SheetDescription({ className, ...props }: react.ComponentProps<typeof Dialog.Description>): react_jsx_runtime.JSX.Element;
+
+export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger };