silver-ui 0.4.0 → 0.6.0

package/dist/chunk-WAWHHXSR.js

@@ -0,0 +1,166 @@
+import { VisuallyHidden } from './chunk-V2V5TTTL.js';
+import { Heading } from './chunk-NXTDP6AX.js';
+import { Icon } from './chunk-IUW777WZ.js';
+import { sva } from './chunk-IAVZKGZS.js';
+import { cx } from './chunk-PPNETWIP.js';
+import { createContext, useId, useMemo, use } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/components/MetadataList/MetadataList.recipe.ts
+var metadataListRecipe = sva({
+  slots: ["root", "title", "dl", "item", "label", "value"],
+  base: {
+    root: {
+      display: "flex",
+      flexDirection: "column"
+    },
+    title: {
+      mb: "3"
+    },
+    dl: {
+      m: 0,
+      p: 0,
+      display: "grid"
+    },
+    label: {
+      color: "fg.muted",
+      fontSize: "md",
+      fontWeight: "bold",
+      display: "flex",
+      alignItems: "center",
+      gap: "2",
+      m: 0,
+      minH: "6"
+    },
+    value: {
+      color: "fg",
+      fontSize: "md",
+      m: 0,
+      minH: "6",
+      overflowWrap: "break-word"
+    }
+  },
+  variants: {
+    // Orientation of each label relative to its value. The parent sets the `dl`
+    // grid layout while each item sets its own wrapper display; both read the
+    // same value via MetadataListContext so the two stay in sync.
+    labelPosition: {
+      start: {
+        dl: {
+          gridTemplateColumns: "auto 1fr",
+          rowGap: "3",
+          columnGap: "4",
+          alignItems: "start"
+        },
+        item: {
+          display: "contents"
+        }
+      },
+      top: {
+        dl: {
+          gridTemplateColumns: "1fr",
+          gap: "3"
+        },
+        item: {
+          display: "flex",
+          flexDirection: "column",
+          gap: "0.5"
+        }
+      }
+    },
+    // Renders only the icon in the label slot (the label text is kept available
+    // to assistive technology via VisuallyHidden in MetadataListItem).
+    isIconOnly: {
+      true: {
+        label: {
+          paddingBlockStart: "2px"
+        }
+      },
+      false: {}
+    }
+  },
+  defaultVariants: {
+    labelPosition: "start",
+    isIconOnly: false
+  }
+});
+var MetadataListContext = createContext(null);
+MetadataListContext.displayName = "MetadataListContext";
+function useMetadataList() {
+  return use(MetadataListContext);
+}
+function MetadataList({
+  children,
+  labelPosition = "start",
+  title,
+  className,
+  "data-testid": dataTestId,
+  style,
+  ref
+}) {
+  const titleId = useId();
+  const contextValue = useMemo(() => ({ labelPosition }), [labelPosition]);
+  const styles = metadataListRecipe({ labelPosition });
+  return /* @__PURE__ */ jsx(MetadataListContext, { value: contextValue, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx(styles.root, className),
+      "data-testid": dataTestId,
+      ref,
+      style,
+      children: [
+        title != null ? /* @__PURE__ */ jsx(Heading, { className: styles.title, id: titleId, level: 5, children: title }) : null,
+        /* @__PURE__ */ jsx(
+          "dl",
+          {
+            "aria-labelledby": title != null ? titleId : void 0,
+            className: styles.dl,
+            children
+          }
+        )
+      ]
+    }
+  ) });
+}
+MetadataList.displayName = "MetadataList";
+function MetadataListItem({
+  children,
+  icon,
+  isIconOnly = false,
+  label,
+  className,
+  "data-testid": dataTestId,
+  style,
+  ref
+}) {
+  const context = useMetadataList();
+  if (context == null && process.env.NODE_ENV !== "production") {
+    throw new Error("MetadataListItem must be rendered inside a MetadataList.");
+  }
+  const styles = metadataListRecipe({
+    labelPosition: context?.labelPosition,
+    isIconOnly
+  });
+  const labelContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+    icon != null ? /* @__PURE__ */ jsx(Icon, { color: "secondary", icon, size: "sm" }) : null,
+    isIconOnly ? /* @__PURE__ */ jsx(VisuallyHidden, { children: label }) : label
+  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx(styles.item, className),
+      "data-testid": dataTestId,
+      ref,
+      style,
+      children: [
+        /* @__PURE__ */ jsx("dt", { className: styles.label, children: labelContent }),
+        /* @__PURE__ */ jsx("dd", { className: styles.value, children })
+      ]
+    }
+  );
+}
+MetadataListItem.displayName = "MetadataListItem";
+
+export { MetadataList, MetadataListItem };
+//# sourceMappingURL=chunk-WAWHHXSR.js.map
+//# sourceMappingURL=chunk-WAWHHXSR.js.map

package/dist/chunk-WAWHHXSR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/MetadataList/MetadataList.recipe.ts","../src/components/MetadataList/MetadataListContext.ts","../src/components/MetadataList/MetadataList.tsx","../src/components/MetadataList/MetadataListItem.tsx"],"names":["jsxs","jsx"],"mappings":"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","file":"chunk-WAWHHXSR.js","sourcesContent":["import {sva, type RecipeVariantProps} from 'styled-system/css';\n\nexport const metadataListRecipe = sva({\n  slots: ['root', 'title', 'dl', 'item', 'label', 'value'],\n  base: {\n    root: {\n      display: 'flex',\n      flexDirection: 'column',\n    },\n    title: {\n      mb: '3',\n    },\n    dl: {\n      m: 0,\n      p: 0,\n      display: 'grid',\n    },\n    label: {\n      color: 'fg.muted',\n      fontSize: 'md',\n      fontWeight: 'bold',\n      display: 'flex',\n      alignItems: 'center',\n      gap: '2',\n      m: 0,\n      minH: '6',\n    },\n    value: {\n      color: 'fg',\n      fontSize: 'md',\n      m: 0,\n      minH: '6',\n      overflowWrap: 'break-word',\n    },\n  },\n  variants: {\n    // Orientation of each label relative to its value. The parent sets the `dl`\n    // grid layout while each item sets its own wrapper display; both read the\n    // same value via MetadataListContext so the two stay in sync.\n    labelPosition: {\n      start: {\n        dl: {\n          gridTemplateColumns: 'auto 1fr',\n          rowGap: '3',\n          columnGap: '4',\n          alignItems: 'start',\n        },\n        item: {\n          display: 'contents',\n        },\n      },\n      top: {\n        dl: {\n          gridTemplateColumns: '1fr',\n          gap: '3',\n        },\n        item: {\n          display: 'flex',\n          flexDirection: 'column',\n          gap: '0.5',\n        },\n      },\n    },\n    // Renders only the icon in the label slot (the label text is kept available\n    // to assistive technology via VisuallyHidden in MetadataListItem).\n    isIconOnly: {\n      true: {\n        label: {\n          paddingBlockStart: '2px',\n        },\n      },\n      false: {},\n    },\n  },\n  defaultVariants: {\n    labelPosition: 'start',\n    isIconOnly: false,\n  },\n});\n\nexport type MetadataListVariants = RecipeVariantProps<\n  typeof metadataListRecipe\n>;\n","import {createContext, use} from 'react';\n\nexport interface MetadataListContextValue {\n  labelPosition: 'start' | 'top';\n}\n\nexport const MetadataListContext =\n  createContext<MetadataListContextValue | null>(null);\n\nMetadataListContext.displayName = 'MetadataListContext';\n\nexport function useMetadataList(): MetadataListContextValue | null {\n  return use(MetadataListContext);\n}\n","import {\n  useId,\n  useMemo,\n  type CSSProperties,\n  type ReactNode,\n  type Ref,\n} from 'react';\nimport {metadataListRecipe} from 'components/MetadataList/MetadataList.recipe';\nimport {MetadataListContext} from 'components/MetadataList/MetadataListContext';\nimport {Heading} from 'components/Text';\nimport {cx} from 'internal/cx';\n\nexport type MetadataListLabelPosition = 'start' | 'top';\n\nexport interface MetadataListProps {\n  /**\n   * Metadata items to render inside the list.\n   */\n  children: ReactNode;\n  /**\n   * Additional CSS class names applied to the root.\n   */\n  className?: string;\n  /**\n   * Test ID applied to the root.\n   */\n  'data-testid'?: string;\n  /**\n   * Position of item labels relative to their values.\n   * @default 'start'\n   */\n  labelPosition?: MetadataListLabelPosition;\n  /**\n   * Ref forwarded to the root element.\n   */\n  ref?: Ref<HTMLDivElement>;\n  /**\n   * Inline styles applied to the root.\n   */\n  style?: CSSProperties;\n  /**\n   * Optional title rendered above the list as a heading.\n   */\n  title?: string;\n}\n\n/**\n * Displays a list of label-value metadata pairs in configurable layouts.\n */\nexport function MetadataList({\n  children,\n  labelPosition = 'start',\n  title,\n  className,\n  'data-testid': dataTestId,\n  style,\n  ref,\n}: MetadataListProps): React.JSX.Element {\n  const titleId = useId();\n  const contextValue = useMemo(() => ({labelPosition}), [labelPosition]);\n  const styles = metadataListRecipe({labelPosition});\n\n  return (\n    <MetadataListContext value={contextValue}>\n      <div\n        className={cx(styles.root, className)}\n        data-testid={dataTestId}\n        ref={ref}\n        style={style}>\n        {title != null ? (\n          <Heading className={styles.title} id={titleId} level={5}>\n            {title}\n          </Heading>\n        ) : null}\n        <dl\n          aria-labelledby={title != null ? titleId : undefined}\n          className={styles.dl}>\n          {children}\n        </dl>\n      </div>\n    </MetadataListContext>\n  );\n}\n\nMetadataList.displayName = 'MetadataList';\n","import type {CSSProperties, ReactNode, Ref} from 'react';\nimport {Icon, type IconComponent} from 'components/Icon';\nimport {metadataListRecipe} from 'components/MetadataList/MetadataList.recipe';\nimport {useMetadataList} from 'components/MetadataList/MetadataListContext';\nimport {VisuallyHidden} from 'internal';\nimport {cx} from 'internal/cx';\n\n/**\n * A single label-value pair rendered inside a MetadataList.\n */\nexport interface MetadataListItemProps {\n  /**\n   * Value content rendered beside or below the label.\n   */\n  children: ReactNode;\n  /**\n   * Additional CSS class names applied to the root element.\n   */\n  className?: string;\n  /**\n   * Test ID applied to the root element.\n   */\n  'data-testid'?: string;\n  /**\n   * Optional icon rendered before the label text.\n   */\n  icon?: IconComponent;\n  /**\n   * Visually hides the label text, rendering only the icon while keeping the\n   * label available to assistive technology. Requires `icon`.\n   */\n  isIconOnly?: boolean;\n  /**\n   * Descriptive label for this metadata entry.\n   */\n  label: string;\n  /**\n   * Ref forwarded to the root element.\n   */\n  ref?: Ref<HTMLDivElement>;\n  /**\n   * Inline styles applied to the root element.\n   */\n  style?: CSSProperties;\n}\n\n/**\n * A single label-value pair rendered inside a MetadataList.\n */\nexport function MetadataListItem({\n  children,\n  icon,\n  isIconOnly = false,\n  label,\n  className,\n  'data-testid': dataTestId,\n  style,\n  ref,\n}: MetadataListItemProps): React.JSX.Element {\n  const context = useMetadataList();\n\n  if (context == null && process.env.NODE_ENV !== 'production') {\n    throw new Error('MetadataListItem must be rendered inside a MetadataList.');\n  }\n\n  const styles = metadataListRecipe({\n    labelPosition: context?.labelPosition,\n    isIconOnly,\n  });\n  const labelContent = (\n    <>\n      {icon != null ? <Icon color=\"secondary\" icon={icon} size=\"sm\" /> : null}\n      {isIconOnly ? <VisuallyHidden>{label}</VisuallyHidden> : label}\n    </>\n  );\n\n  return (\n    <div\n      className={cx(styles.item, className)}\n      data-testid={dataTestId}\n      ref={ref}\n      style={style}>\n      <dt className={styles.label}>{labelContent}</dt>\n      <dd className={styles.value}>{children}</dd>\n    </div>\n  );\n}\n\nMetadataListItem.displayName = 'MetadataListItem';\n"]}

package/dist/{chunk-2RKMG2TC.js → chunk-WEXTGWRE.js}

@@ -1,33 +1,98 @@
-import { useAppShellMobile, MobileNavToggle, MobileNav } from './chunk-SSAYBCAD.js';
-import { Divider } from './chunk-W2Q4PQ6I.js';
-import { Text } from './chunk-QRFDPG34.js';
-import { useLinkComponent } from './chunk-MI5QU37D.js';
+import { useAppShellMobile, MobileNavToggle, MobileNav } from './chunk-RXKDRZF3.js';
+import { Divider } from './chunk-BQWUTDTN.js';
+import { useRel, getAriaLabel } from './chunk-5FQKELP6.js';
+import { VisuallyHidden } from './chunk-V2V5TTTL.js';
+import { Text } from './chunk-NXTDP6AX.js';
+import { useLinkComponent, ActionElement } from './chunk-PG4CZRTU.js';
 import { isReactNode } from './chunk-2PSZAWLC.js';
-import { Icon } from './chunk-7T3SWOY7.js';
+import { Icon } from './chunk-IUW777WZ.js';
+import { sva } from './chunk-IAVZKGZS.js';
 import { cva } from './chunk-FMEIPGUP.js';
-import { css } from './chunk-OD4DHHZH.js';
 import { cx } from './chunk-PPNETWIP.js';
 import { createContext, use } from 'react';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 // src/components/TopNav/TopNav.recipe.ts
-var topNavRecipe = cva({
+var topNavRecipe = sva({
+  slots: [
+    "root",
+    "leftSection",
+    "heading",
+    "startContent",
+    "centerContent",
+    "rightSection",
+    "endContent",
+    "mobileEnd",
+    "drawerItems",
+    "drawerDivider"
+  ],
   base: {
-    alignItems: "center",
-    w: "100%",
-    p: "2"
+    root: {
+      alignItems: "center",
+      w: "100%",
+      p: "2"
+    },
+    leftSection: {
+      display: "flex",
+      alignItems: "center",
+      gap: "4",
+      flex: "1 1 0%",
+      minW: 0
+    },
+    heading: {
+      display: "flex",
+      alignItems: "center",
+      flexShrink: 0
+    },
+    startContent: {
+      display: "flex",
+      alignItems: "center",
+      gap: "1"
+    },
+    centerContent: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: "1"
+    },
+    rightSection: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "flex-end",
+      gap: "1"
+    },
+    endContent: {
+      display: "flex",
+      alignItems: "center",
+      gap: "1",
+      flexShrink: 0,
+      ms: "auto"
+    },
+    mobileEnd: {
+      display: "flex",
+      alignItems: "center",
+      gap: "1",
+      ms: "auto"
+    },
+    drawerItems: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "0.5"
+    },
+    drawerDivider: {
+      my: "2"
+    }
   },
   variants: {
     layout: {
       flex: {
-        display: "flex"
+        root: { display: "flex" }
       },
       grid: {
-        display: "grid",
-        gridTemplateColumns: "1fr auto 1fr"
+        root: { display: "grid", gridTemplateColumns: "1fr auto 1fr" }
       },
       mobile: {
-        display: "flex"
+        root: { display: "flex" }
       }
     }
   },
@@ -39,66 +104,12 @@ var TopNavRenderContext = createContext("default");
 TopNavRenderContext.displayName = "TopNavRenderContext";
 var TopNavMobileContentContext = createContext(null);
 TopNavMobileContentContext.displayName = "TopNavMobileContentContext";
-var TopNavSlotContext = createContext("start");
-TopNavSlotContext.displayName = "TopNavSlotContext";
 function useTopNavRenderMode() {
   return use(TopNavRenderContext);
 }
 function useTopNavMobileContent() {
   return use(TopNavMobileContentContext);
 }
-var styles = {
-  leftSection: css({
-    display: "flex",
-    alignItems: "center",
-    gap: "4",
-    flex: "1 1 0%",
-    minW: 0
-  }),
-  heading: css({
-    display: "flex",
-    alignItems: "center",
-    flexShrink: 0
-  }),
-  startContent: css({
-    display: "flex",
-    alignItems: "center",
-    gap: "1"
-  }),
-  centerContent: css({
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    gap: "1"
-  }),
-  rightSection: css({
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "flex-end",
-    gap: "1"
-  }),
-  endContent: css({
-    display: "flex",
-    alignItems: "center",
-    gap: "1",
-    flexShrink: 0,
-    ms: "auto"
-  }),
-  mobileEnd: css({
-    display: "flex",
-    alignItems: "center",
-    gap: "1",
-    ms: "auto"
-  }),
-  drawerItems: css({
-    display: "flex",
-    flexDirection: "column",
-    gap: "0.5"
-  }),
-  drawerDivider: css({
-    my: "2"
-  })
-};
 function TopNav({
   centerContent,
   children,
@@ -115,21 +126,29 @@ function TopNav({
   const mobileContent = useTopNavMobileContent();
   const { hasAutoToggle } = useAppShellMobile();
   const resolvedStartContent = startContent ?? children;
+  if (process.env.NODE_ENV !== "production") {
+    if (isReactNode(startContent) && isReactNode(children)) {
+      console.warn(
+        "TopNav: both `startContent` and `children` were provided. `startContent` takes precedence and `children` is ignored. Provide only one."
+      );
+    }
+  }
   const hasCenterContent = isReactNode(centerContent);
   const hasCollapsibleContent = isReactNode(resolvedStartContent) || isReactNode(centerContent);
   const hasMobileDrawerContent = hasCollapsibleContent || isReactNode(mobileContent);
   if (renderMode === "mobile-bar") {
+    const classes2 = topNavRecipe({ layout: "mobile" });
     return /* @__PURE__ */ jsxs(
       "nav",
       {
         "aria-label": label,
-        className: cx(topNavRecipe({ layout: "mobile" }), className),
+        className: cx(classes2.root, className),
         "data-testid": dataTestId,
         ref,
         style,
         children: [
-          isReactNode(heading) ? /* @__PURE__ */ jsx("div", { className: styles.heading, children: heading }) : null,
-          /* @__PURE__ */ jsxs("div", { className: styles.mobileEnd, children: [
+          isReactNode(heading) ? /* @__PURE__ */ jsx("div", { className: classes2.heading, children: heading }) : null,
+          /* @__PURE__ */ jsxs("div", { className: classes2.mobileEnd, children: [
             endContent,
             hasMobileDrawerContent && hasAutoToggle ? /* @__PURE__ */ jsx(MobileNavToggle, {}) : null
           ] })
@@ -141,63 +160,67 @@ function TopNav({
     if (!hasCollapsibleContent && !isReactNode(mobileContent)) {
       return null;
     }
+    const classes2 = topNavRecipe();
     return /* @__PURE__ */ jsxs(MobileNav, { header: heading, children: [
-      hasCollapsibleContent ? /* @__PURE__ */ jsx(TopNavSlotContext, { value: "start", children: /* @__PURE__ */ jsxs("div", { className: styles.drawerItems, children: [
+      hasCollapsibleContent ? /* @__PURE__ */ jsxs("div", { className: classes2.drawerItems, children: [
         resolvedStartContent,
         centerContent
-      ] }) }) : null,
-      hasCollapsibleContent && isReactNode(mobileContent) ? /* @__PURE__ */ jsx("div", { className: styles.drawerDivider, children: /* @__PURE__ */ jsx(Divider, {}) }) : null,
+      ] }) : null,
+      hasCollapsibleContent && isReactNode(mobileContent) ? /* @__PURE__ */ jsx("div", { className: classes2.drawerDivider, children: /* @__PURE__ */ jsx(Divider, {}) }) : null,
       mobileContent
     ] });
   }
+  const classes = topNavRecipe({ layout: hasCenterContent ? "grid" : "flex" });
   return /* @__PURE__ */ jsxs(
     "nav",
     {
       "aria-label": label,
-      className: cx(
-        topNavRecipe({ layout: hasCenterContent ? "grid" : "flex" }),
-        className
-      ),
+      className: cx(classes.root, className),
       "data-testid": dataTestId,
       ref,
       style,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: styles.leftSection, children: [
-          isReactNode(heading) ? /* @__PURE__ */ jsx("div", { className: styles.heading, children: heading }) : null,
-          isReactNode(resolvedStartContent) ? /* @__PURE__ */ jsx(TopNavSlotContext, { value: "start", children: /* @__PURE__ */ jsx("div", { className: styles.startContent, children: resolvedStartContent }) }) : null
+        /* @__PURE__ */ jsxs("div", { className: classes.leftSection, children: [
+          isReactNode(heading) ? /* @__PURE__ */ jsx("div", { className: classes.heading, children: heading }) : null,
+          isReactNode(resolvedStartContent) ? /* @__PURE__ */ jsx("div", { className: classes.startContent, children: resolvedStartContent }) : null
         ] }),
-        hasCenterContent ? /* @__PURE__ */ jsx(TopNavSlotContext, { value: "center", children: /* @__PURE__ */ jsx("div", { className: styles.centerContent, children: centerContent }) }) : null,
-        hasCenterContent ? /* @__PURE__ */ jsx("div", { className: styles.rightSection, children: /* @__PURE__ */ jsx(TopNavSlotContext, { value: "end", children: endContent }) }) : isReactNode(endContent) ? /* @__PURE__ */ jsx("div", { className: styles.endContent, children: /* @__PURE__ */ jsx(TopNavSlotContext, { value: "end", children: endContent }) }) : null
+        hasCenterContent ? /* @__PURE__ */ jsx("div", { className: classes.centerContent, children: centerContent }) : null,
+        hasCenterContent ? /* @__PURE__ */ jsx("div", { className: classes.rightSection, children: endContent }) : isReactNode(endContent) ? /* @__PURE__ */ jsx("div", { className: classes.endContent, children: endContent }) : null
       ]
     }
   );
 }
 TopNav.displayName = "TopNav";
-var styles2 = {
-  root: css({
-    display: "flex",
-    alignItems: "center",
-    gap: "2",
-    minH: "8",
-    px: "2",
-    color: "fg",
-    textDecoration: "none"
-  }),
-  logo: css({
-    flexShrink: 0,
-    display: "inline-flex",
-    alignItems: "center"
-  }),
-  text: css({
-    display: "flex",
-    flexDirection: "column",
-    minW: 0
-  }),
-  endContent: css({
-    ms: "auto",
-    flexShrink: 0
-  })
-};
+
+// src/components/TopNav/TopNavHeading.recipe.ts
+var topNavHeadingRecipe = sva({
+  slots: ["root", "logo", "text", "endContent"],
+  base: {
+    root: {
+      display: "flex",
+      alignItems: "center",
+      gap: "2",
+      minH: "8",
+      px: "2",
+      color: "fg",
+      textDecoration: "none"
+    },
+    logo: {
+      flexShrink: 0,
+      display: "inline-flex",
+      alignItems: "center"
+    },
+    text: {
+      display: "flex",
+      flexDirection: "column",
+      minW: 0
+    },
+    endContent: {
+      ms: "auto",
+      flexShrink: 0
+    }
+  }
+});
 function TopNavHeading({
   "aria-label": ariaLabel,
   as,
@@ -216,24 +239,25 @@ function TopNavHeading({
   const LinkComponent = useLinkComponent(as);
   const resolvedHref = headingHref ?? href;
   const Element = resolvedHref != null ? LinkComponent : "div";
+  const classes = topNavHeadingRecipe();
   return /* @__PURE__ */ jsxs(
     Element,
     {
       "aria-label": ariaLabel,
-      className: cx(styles2.root, className),
+      className: cx(classes.root, className),
       "data-testid": dataTestId,
       href: resolvedHref,
       ref,
       style,
       to: Element === "a" ? void 0 : resolvedHref,
       children: [
-        isReactNode(logo) ? /* @__PURE__ */ jsx("span", { className: styles2.logo, children: logo }) : null,
-        /* @__PURE__ */ jsxs("span", { className: styles2.text, children: [
+        isReactNode(logo) ? /* @__PURE__ */ jsx("span", { className: classes.logo, children: logo }) : null,
+        /* @__PURE__ */ jsxs("span", { className: classes.text, children: [
           superheading != null ? /* @__PURE__ */ jsx(Text, { color: "secondary", type: "supporting", children: superheading }) : null,
           heading != null ? /* @__PURE__ */ jsx(Text, { type: "large", weight: "semibold", children: heading }) : null,
           subheading != null ? /* @__PURE__ */ jsx(Text, { color: "secondary", type: "supporting", children: subheading }) : null
         ] }),
-        isReactNode(headerEndContent) ? /* @__PURE__ */ jsx("span", { className: styles2.endContent, children: headerEndContent }) : null
+        isReactNode(headerEndContent) ? /* @__PURE__ */ jsx("span", { className: classes.endContent, children: headerEndContent }) : null
       ]
     }
   );
@@ -320,48 +344,60 @@ function TopNavItem({
   style,
   target
 }) {
-  const LinkComponent = useLinkComponent(as);
   const renderMode = useTopNavRenderMode();
   const { closeMobileNav } = useAppShellMobile();
   const isDrawer = renderMode === "drawer";
+  const opensInNewTab = target === "_blank";
+  const linkRel = useRel({ target, rel });
   const labelContent = children ?? /* @__PURE__ */ jsx(Text, { color: "inherit", size: "md", type: "body", weight: "inherit", children: label });
+  const handleClick = (event) => {
+    if (isDisabled) {
+      event.preventDefault();
+      return;
+    }
+    onClick?.(event);
+    if (isDrawer) {
+      closeMobileNav();
+    }
+  };
+  const className_ = cx(
+    topNavItemRecipe({ isSelected, isDisabled, isIconOnly, isDrawer }),
+    className
+  );
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    icon != null ? /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true", color: "inherit", icon, size: "md" }) : null,
+    !isIconOnly ? labelContent : null
+  ] });
   return /* @__PURE__ */ jsxs(
-    LinkComponent,
+    ActionElement,
     {
       "aria-current": isSelected ? "page" : void 0,
-      "aria-disabled": isDisabled || void 0,
-      "aria-label": isIconOnly ? label : void 0,
-      className: cx(
-        topNavItemRecipe({ isSelected, isDisabled, isIconOnly, isDrawer }),
-        className
-      ),
+      "aria-disabled": href != null && isDisabled ? true : void 0,
+      "aria-label": isIconOnly ? getAriaLabel(label, opensInNewTab) : void 0,
+      as,
+      className: className_,
       "data-testid": dataTestId,
       href,
-      onClick: (event) => {
-        if (isDisabled) {
-          event.preventDefault();
-          return;
-        }
-        onClick?.(event);
-        if (isDrawer) {
-          closeMobileNav();
-        }
-      },
+      isDisabled: href == null ? isDisabled : void 0,
+      isLink: href != null,
+      onClick: handleClick,
       ref,
-      rel,
+      rel: href != null ? linkRel : void 0,
       style,
-      tabIndex: isDisabled ? -1 : void 0,
-      target,
-      to: LinkComponent === "a" ? void 0 : href,
+      tabIndex: href != null && isDisabled ? -1 : void 0,
+      target: href != null ? target : void 0,
       children: [
-        icon != null ? /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true", color: "inherit", icon, size: "md" }) : null,
-        !isIconOnly ? labelContent : null
+        content,
+        opensInNewTab && !isIconOnly ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          " ",
+          /* @__PURE__ */ jsx(VisuallyHidden, { children: "(opens in new tab)" })
+        ] }) : null
       ]
     }
   );
 }
 TopNavItem.displayName = "TopNavItem";
 
-export { TopNav, TopNavHeading, TopNavItem, TopNavMobileContentContext, TopNavRenderContext, TopNavSlotContext };
-//# sourceMappingURL=chunk-2RKMG2TC.js.map
-//# sourceMappingURL=chunk-2RKMG2TC.js.map
+export { TopNav, TopNavHeading, TopNavItem, TopNavMobileContentContext, TopNavRenderContext };
+//# sourceMappingURL=chunk-WEXTGWRE.js.map
+//# sourceMappingURL=chunk-WEXTGWRE.js.map