rift-ds 1.11.0 → 1.13.0

package/README.md

@@ -62,7 +62,13 @@ Swap the scripted transport for `createFetchTransport('/api/chat')` and the pane
 
 ## Set up your agent
 
-One command teaches a coding agent the system: it installs the generated agent skills into your project and prints the MCP connect line. The skills cover the library's rules, moving existing screens onto the tokens and components, and auditing styles against them.
+The quickest start is one file: save [AGENTS.md](https://rift-ds.com/AGENTS.md) at your project root, or paste it into your agent. It holds the install, the setup, the rules, and where to look things up.
+
+```bash
+curl -o AGENTS.md https://rift-ds.com/AGENTS.md
+```
+
+For the full setup, one command teaches a coding agent the system: it installs the generated agent skills into your project and prints the MCP connect line. The skills cover the library's rules, moving existing screens onto the tokens and components, and auditing styles against them.
 
 ```bash
 npx rift-ds init
@@ -74,7 +80,7 @@ The MCP endpoint serves the component catalogue, per-component prop APIs, the to
 claude mcp add --transport http rift-ds https://rift-ds.com/api/mcp
 ```
 
-Every component's prop contract is also plain markdown (append `.md` to its docs URL), and [llms.txt](https://rift-ds.com/llms.txt) indexes every machine surface. A theme made in the [playground](https://rift-ds.com/playground) exports as CSS, a THEME.md and a setup prompt, so the agent can read the look as well as the code. Then just ask: "Build a settings page with Rift components."
+Every component's prop contract is also plain markdown (append `.md` to its docs URL), and [llms.txt](https://rift-ds.com/llms.txt) indexes every machine surface. A theme made in the [playground](https://rift-ds.com/playground) exports as one AGENTS.md that carries the setup, your theme in words and its CSS, so the agent can read the look as well as the code. Then just ask: "Build a settings page with Rift components."
 
 ## Theming
 

package/behaviors/LinkProvider.d.ts

@@ -0,0 +1,36 @@
+import { default as React } from 'react';
+/**
+ * The props a link component receives: every anchor attribute, the ref, and
+ * an `href` that is always a string. Next.js's `Link` takes these as they
+ * are; a router whose link takes `to` instead needs a one-line adapter:
+ * `({ href, ...props }) => <RouterLink to={href} {...props} />`.
+ */
+export type LinkComponentProps = React.ComponentPropsWithRef<'a'> & {
+    href: string;
+};
+/** A component that renders a link in place of a plain `<a>`, such as a router's. */
+export type LinkComponent = React.ElementType<LinkComponentProps>;
+export interface LinkProviderProps {
+    /**
+     * The link component every rift-ds link under this provider renders, such
+     * as Next.js's `Link`. Named like the instance prop it stands in for.
+     */
+    linkComponent: LinkComponent;
+    /** The part of the app whose links it applies to, usually the whole app. */
+    children?: React.ReactNode;
+}
+/**
+ * Sets the link component for every client-rendered rift-ds component below
+ * it that takes an `href`, so their links navigate through the app's router
+ * instead of reloading the page. A component's own `linkComponent` prop
+ * wins over it. The link components that can render on the server cannot
+ * read a provider and take the prop alone (design.md's Components intro
+ * names them, and scripts/validate-component-contract.mjs keeps them off
+ * the provider).
+ */
+export declare function LinkProvider({ linkComponent, children }: LinkProviderProps): React.JSX.Element;
+/**
+ * The link component to render: the component's own `linkComponent` prop,
+ * else the nearest LinkProvider's, else a plain `<a>`.
+ */
+export declare function useLinkComponent(override?: LinkComponent): LinkComponent;

package/behaviors/LinkProvider.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+const LinkContext = createContext(null);
+function LinkProvider({ linkComponent, children }) {
+  return /* @__PURE__ */ jsx(LinkContext.Provider, { value: linkComponent, children });
+}
+function useLinkComponent(override) {
+  const provided = useContext(LinkContext);
+  return override ?? provided ?? "a";
+}
+export {
+  LinkProvider,
+  useLinkComponent
+};

package/behaviors/visually-hidden.css

@@ -0,0 +1,24 @@
+/* ============================================
+   VISUALLY HIDDEN
+   The one recipe for text that is read but not
+   seen: a status for a live region, a control's
+   spoken name, a marker beside a visual state.
+   Every component imports this sheet and uses
+   ds-visually-hidden rather than writing the
+   recipe again (scripts/validate-shared-primitives.mjs
+   fails a second copy). A hidden native input
+   that must stay focusable is not this: it
+   keeps its own rule, with the reason beside it.
+   ============================================ */
+
+.ds-visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}

package/bin/rift-ds.mjs

@@ -28,7 +28,8 @@
  * Zero dependencies by design: global fetch plus node:fs, so npx never
  * installs anything beyond the package itself. SITE_ORIGIN, SKILL_NAME,
  * MCP_SERVER_NAME and PACKAGE_NAME are stamped by build-package.mjs from
- * scripts/brand.mjs (the one home for brand facts); running this file
+ * scripts/brand.mjs (the one home for brand facts), and CHAT_SLUG from
+ * the chat registry, the widget page's slug; running this file
  * straight from source fails fast rather than guessing a domain.
  * SKILL_NAME is the library skill, kept only for --out without --skill,
  * which has always meant that one.
@@ -41,6 +42,7 @@ const SITE_ORIGIN = 'https://rift-ds.com';
 const SKILL_NAME = 'rift-design-system';
 const MCP_SERVER_NAME = 'rift-ds';
 const PACKAGE_NAME = 'rift-ds';
+const CHAT_SLUG = 'ai-chat';
 const MANIFEST_URL = `${SITE_ORIGIN}/skill/manifest.json`;
 const DEFAULT_DIR = join('.claude', 'skills');
 const TEMPLATES_DIR = join(dirname(fileURLToPath(import.meta.url)), 'templates', 'chat');
@@ -229,7 +231,8 @@ function initChat({ app, dryRun }) {
   console.log(
     `  4. Your layout's viewport should set interactiveWidget: "resizes-content", so the phone takeover ends above the keyboard.`
   );
-  console.log(`\nThe widget's props, protocol and server options: ${SITE_ORIGIN}/chat`);
+  console.log(`\nHow to add it, the protocol and the server options: ${SITE_ORIGIN}/docs/chat`);
+  console.log(`Every prop: ${SITE_ORIGIN}/components/${CHAT_SLUG}`);
 }
 
 const args = process.argv.slice(2);

package/chat/ChatAgentPane.css

@@ -31,12 +31,16 @@
   margin: 0;
 }
 
+/* The chat's card surface: container fill behind a hairline, like every
+   card in the conversation. The radius stays a step under the rail's
+   --radius-600, concentric with the shell it nests in. */
 .ds-chat-agent-pane__card {
   display: flex;
   flex-direction: column;
   gap: var(--gap-200);
   padding: var(--padding-300);
-  background-color: var(--color-bg-container-secondary);
+  background-color: var(--color-bg-container-primary);
+  border: var(--border-025) solid var(--color-bg-container-border);
   border-radius: var(--radius-400);
 }
 

package/chat/ChatProvider.d.ts

@@ -36,7 +36,11 @@ export interface ChatProviderProps {
     renderers?: ChatCardRenderers;
     /** Draws an artifact's preview by kind, for artifacts that are live React content rather than a document or a URL. */
     artifactRenderers?: ChatArtifactRenderers;
-    /** Renders a same-site link in an answer. The default is a plain anchor; a Next.js host passes its Link. */
+    /**
+     * Renders a same-site link in an answer. The default renders through the
+     * nearest LinkProvider's link component, else a plain anchor; passing
+     * this wins over both.
+     */
     renderLink?: ChatLinkRenderer;
     /** Which hrefs in an answer become links. Everything else renders as text. */
     isInternalHref?: (href: string) => boolean;

package/chat/ChatProvider.js

@@ -7,7 +7,17 @@ import { createFollowupsFetcher, followupTarget, DEFAULT_FALLBACK_FOLLOWUPS, pic
 import { useThreads } from "./threads.js";
 import { createFetchTransport } from "./transport.js";
 import { DEFAULT_PLACEHOLDER_COPY, useChat } from "./useChat.js";
-const defaultRenderLink = ({ href, children, onNavigate }) => /* @__PURE__ */ jsx("a", { href, onClick: onNavigate, children });
+import { useLinkComponent } from "../behaviors/LinkProvider.js";
+function DefaultChatLink({ href, children, onNavigate }) {
+  const Link = useLinkComponent();
+  return (
+    // The hook returns a stable reference from context (or 'a'), never a
+    // component created here, which is what the rule guards against.
+    // eslint-disable-next-line react-hooks/static-components
+    /* @__PURE__ */ jsx(Link, { href, onClick: onNavigate, children })
+  );
+}
+const defaultRenderLink = (props) => /* @__PURE__ */ jsx(DefaultChatLink, { ...props });
 function ChatProvider({
   transport,
   endpoint = "/api/chat",

package/chat/ChatWidget.css

@@ -61,29 +61,6 @@
   min-height: calc(40px + var(--padding-150) * 2);
 }
 
-/* The close button hugs the panel's clipped right edge, so its centred
-   bottom tooltip would lose its right cap to overflow: hidden. End-align
-   the last header tooltip to the button and walk the arrow back to the
-   button's centre (20px in, minus half the 8px arrow). */
-.ds-chat-widget .ds-chat-header__actions .ds-tooltip:last-child .ds-tooltip__panel--bottom,
-.ds-chat-widget__rail-actions .ds-tooltip:last-child .ds-tooltip__panel--bottom {
-  left: auto;
-  right: 0;
-  transform: translateY(-4px);
-}
-
-.ds-chat-widget .ds-chat-header__actions .ds-tooltip:last-child .ds-tooltip__panel--bottom.ds-tooltip__panel--visible,
-.ds-chat-widget__rail-actions .ds-tooltip:last-child .ds-tooltip__panel--bottom.ds-tooltip__panel--visible {
-  transform: translateY(0);
-}
-
-.ds-chat-widget .ds-chat-header__actions .ds-tooltip:last-child .ds-tooltip__panel--bottom .ds-tooltip__arrow,
-.ds-chat-widget__rail-actions .ds-tooltip:last-child .ds-tooltip__panel--bottom .ds-tooltip__arrow {
-  left: auto;
-  right: 16px;
-  margin-left: 0;
-}
-
 /* The placement menu's wrapper is only there to catch Escape; it must not
    become a box of its own in the header's action row. */
 .ds-chat-widget__placement-menu {
@@ -560,19 +537,6 @@
   }
 }
 
-/* Visually hidden, still announced. */
-.ds-chat-widget__sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  padding: 0;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  white-space: nowrap;
-  border: 0;
-}
-
 /* ============================================
    THE RAILS — the optional session-history rail (leading) and agent pane
    (trailing). Wide widgets seat them inline; narrow ones summon the history

package/chat/ResponseActions.js

@@ -3,6 +3,7 @@ import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { createContext, useContext, useState, useRef, useEffect } from "react";
 import { MOTION_FEEDBACK_RESET_MS } from "../tokens/motion.js";
 import { useChatWidget } from "./context.js";
+import "../behaviors/visually-hidden.css";
 const ResponseActionsLabelsContext = createContext({
   copy: "Copy response",
   copied: "Copied",
@@ -79,7 +80,7 @@ function ResponseActions({ turn }) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx("span", { className: "ds-chat-widget__sr-only", "aria-live": "polite", children: copied ? labels.copiedAnnouncement : "" })
+    /* @__PURE__ */ jsx("span", { className: "ds-visually-hidden", "aria-live": "polite", children: copied ? labels.copiedAnnouncement : "" })
   ] });
 }
 export {

package/components/Accordion/Accordion.css

@@ -3,12 +3,17 @@
    Collapsible content sections
    ============================================ */
 
+/* The standard card surface (container fill, hairline border,
+   --radius-300), the one SelectionCard's and QuestionCard's option rows
+   share, so a collapsible section reads as a card on the page rather than
+   a hairline floating over it. */
 .ds-accordion {
   display: flex;
   flex-direction: column;
   width: 100%;
   border: var(--border-025) solid var(--color-bg-container-border);
-  border-radius: var(--radius-200);
+  border-radius: var(--radius-300);
+  background-color: var(--color-bg-container-primary);
   overflow: hidden;
 }
 
@@ -42,14 +47,16 @@
   transition: background-color var(--motion-duration-fast) var(--motion-ease-standard);
 }
 
+/* Hover steps the header to the secondary fill, the collapsible-section
+   convention the agent cards (AgentPlan, SourceTrail, ToolCall) set. */
 .ds-accordion__trigger:hover {
-  background-color: var(--color-action-passive-bg-hover);
+  background-color: var(--color-bg-container-secondary);
 }
 
 .ds-accordion__trigger:focus-visible {
   outline: 2px solid var(--color-action-primary-bg);
   outline-offset: -2px;
-  border-radius: var(--radius-200);
+  border-radius: var(--radius-300);
 }
 
 /* ============================================

package/components/AgentPlan/AgentPlan.css

@@ -229,18 +229,6 @@
    this span announces it.
    ============================================ */
 
-.ds-agent-plan__sr {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
-
 /* Icons take the colour of the text around them. Explicit, not just
    inherited by default: a consumer stylesheet that sets a colour on
    .material-symbols-rounded itself (a common global default) would

package/components/AgentPlan/AgentPlan.js

@@ -3,6 +3,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import React, { useId, useState, useCallback } from "react";
 import { Spinner } from "../Spinner/Spinner.js";
 import "./AgentPlan.css";
+import "../../behaviors/visually-hidden.css";
 import "../../fonts/material-symbols.css";
 const STEP_ICONS = {
   pending: "circle",
@@ -88,7 +89,7 @@ const AgentPlan = React.forwardRef(
                     /* @__PURE__ */ jsx("span", { className: `${baseClass}__label`, children: step.label }),
                     step.detail && /* @__PURE__ */ jsx("span", { className: `${baseClass}__detail`, children: step.detail })
                   ] }),
-                  /* @__PURE__ */ jsx("span", { className: `${baseClass}__sr`, children: statusText[status] })
+                  /* @__PURE__ */ jsx("span", { className: "ds-visually-hidden", children: statusText[status] })
                 ]
               },
               index

package/components/AgentStatus/AgentStatus.css

@@ -219,7 +219,7 @@
   display: flex;
   width: 100%;
   padding: var(--padding-150) var(--padding-300);
-  background-color: var(--color-bg-container-secondary);
+  background-color: var(--color-bg-container-primary);
   border: var(--border-025) solid var(--color-bg-container-border);
   border-radius: var(--radius-300);
 }

package/components/AiButton/AiButton.d.ts

@@ -1,4 +1,5 @@
 import { default as React } from 'react';
+import { LinkComponent } from '../../behaviors/LinkProvider';
 import { PromptSuggestion } from '../PromptSuggestions/PromptSuggestions';
 /** The content of AiButton's summary panel. */
 export interface AiButtonSummary {
@@ -59,6 +60,12 @@ type AiButtonOwnProps = {
     suggestionsLabel?: string;
     /** Additional CSS classes */
     className?: string;
+    /**
+     * The component the link renders with, such as Next.js's `Link`, so it
+     * navigates through the app's router. Wins over a LinkProvider's; a plain
+     * `<a>` when neither is set.
+     */
+    linkComponent?: LinkComponent;
 };
 export interface AiButtonProps extends AiButtonOwnProps, Omit<React.ComponentPropsWithoutRef<'button'>, keyof AiButtonOwnProps | 'type'> {
 }

package/components/AiButton/AiButton.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import React, { useState, useRef, useEffect } from "react";
+import { useLinkComponent } from "../../behaviors/LinkProvider.js";
 import { PromptSuggestions } from "../PromptSuggestions/PromptSuggestions.js";
 import { Skeleton } from "../Skeleton/Skeleton.js";
 import { StreamingText } from "../StreamingText/StreamingText.js";
@@ -25,9 +26,11 @@ const AiButton = React.forwardRef(
     dismissLabel = "Dismiss summary",
     suggestionsLabel = "Suggested prompts",
     className = "",
+    linkComponent,
     ...rest
   }, ref) => {
     const baseClass = "ds-ai-button";
+    const Link = useLinkComponent(linkComponent);
     const [hoverOpen, setHoverOpen] = useState(false);
     const [dismissed, setDismissed] = useState(false);
     const [phase, setPhase] = useState("skeleton");
@@ -91,7 +94,7 @@ const AiButton = React.forwardRef(
       /* @__PURE__ */ jsx("span", { className: `${baseClass}__text`, children: label })
     ] });
     const control = href && !disabled ? /* @__PURE__ */ jsx(
-      "a",
+      Link,
       {
         ...rest,
         ref,

package/components/AnimatedNumber/AnimatedNumber.css

@@ -17,15 +17,3 @@
   font-variant-numeric: tabular-nums;
 }
 
-/* Visually hidden settled value — what a screen reader gets instead of the
-   rolling digits. */
-.ds-animated-number__sr {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  padding: 0;
-  overflow: hidden;
-  clip-path: inset(50%);
-  white-space: nowrap;
-}

package/components/AnimatedNumber/AnimatedNumber.js

@@ -2,6 +2,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import React, { useState, useRef, useEffect } from "react";
 import "./AnimatedNumber.css";
+import "../../behaviors/visually-hidden.css";
 import { MOTION_COUNT_UP_MS } from "../../tokens/motion.js";
 const REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
 const prefersReducedMotion = () => typeof window !== "undefined" && window.matchMedia(REDUCED_MOTION_QUERY).matches;
@@ -45,7 +46,7 @@ const AnimatedNumber = React.forwardRef(
     const classes = [baseClass, className].filter(Boolean).join(" ");
     return /* @__PURE__ */ jsxs("span", { ...rest, ref, className: classes, children: [
       /* @__PURE__ */ jsx("span", { className: `${baseClass}__value`, "aria-hidden": "true", children: fmt(display) }),
-      /* @__PURE__ */ jsx("span", { className: `${baseClass}__sr`, children: fmt(value) })
+      /* @__PURE__ */ jsx("span", { className: "ds-visually-hidden", children: fmt(value) })
     ] });
   }
 );

package/components/AppLayout/AppLayout.d.ts

@@ -1,5 +1,6 @@
 import { default as React } from 'react';
 import { AppSidebarSection, AppSidebarProfile } from '../AppSidebar/AppSidebar';
+import { LinkComponent } from '../../behaviors/LinkProvider';
 /** Props owned by AppLayout itself — everything else falls through to the outer wrapper `<div>`. */
 type AppLayoutOwnProps = {
     /** Sidebar navigation sections */
@@ -28,6 +29,12 @@ type AppLayoutOwnProps = {
      * follows the surrounding data-theme like any other component.
      */
     theme?: 'dark' | 'inherit';
+    /**
+     * The component its links render with, such as Next.js's `Link`, so they
+     * navigate through the app's router; passed on to the AppSidebar rail. Wins over a
+     * LinkProvider's; a plain `<a>` when neither is set.
+     */
+    linkComponent?: LinkComponent;
     /** Additional CSS classes on outer wrapper */
     className?: string;
 };

package/components/AppLayout/AppLayout.js

@@ -16,6 +16,7 @@ const AppLayout = React.forwardRef(
     logo,
     children,
     theme = "dark",
+    linkComponent,
     className = "",
     ...rest
   }, ref) => {
@@ -49,7 +50,8 @@ const AppLayout = React.forwardRef(
               expanded,
               onExpandedChange: handleExpandedChange,
               logoText,
-              logo
+              logo,
+              linkComponent
             }
           ),
           /* @__PURE__ */ jsx("main", { className: `${baseClass}__main`, children: /* @__PURE__ */ jsx("div", { className: `${baseClass}__content`, children }) })

package/components/AppSidebar/AppSidebar.css

@@ -211,7 +211,7 @@
 }
 
 .ds-app-sidebar__btn--active {
-  background-color: var(--color-action-passive-bg-hover);
+  background-color: var(--color-action-passive-bg-active);
 }
 
 .ds-app-sidebar__btn-left {
@@ -357,7 +357,7 @@
 }
 
 .ds-app-sidebar__sub-btn--active {
-  background-color: var(--color-action-passive-bg-hover);
+  background-color: var(--color-action-passive-bg-active);
 }
 
 .ds-app-sidebar__sub-label {

package/components/AppSidebar/AppSidebar.d.ts

@@ -1,4 +1,5 @@
 import { default as React } from 'react';
+import { LinkComponent } from '../../behaviors/LinkProvider';
 export interface AppSidebarSubItem {
     /** Unique key for this sub-item */
     key: string;
@@ -108,6 +109,12 @@ type AppSidebarOwnProps = {
     footerSlot?: React.ReactNode;
     /** Additional CSS classes */
     className?: string;
+    /**
+     * The component its links render with, such as Next.js's `Link`, so they
+     * navigate through the app's router. Wins over a LinkProvider's; a plain
+     * `<a>` when neither is set.
+     */
+    linkComponent?: LinkComponent;
     /** Logo element — defaults to the built-in brand mark */
     logo?: React.ReactNode;
     /** Text shown next to logo when expanded */

package/components/AppSidebar/AppSidebar.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import React, { useState, useRef, useEffect, useCallback, useId } from "react";
+import { useLinkComponent } from "../../behaviors/LinkProvider.js";
 import { useLayer } from "../../behaviors/useLayer.js";
 import { useFocusScope } from "../../behaviors/useFocusScope.js";
 import { useScrollLock } from "../../behaviors/useScrollLock.js";
@@ -56,9 +57,11 @@ const AppSidebar = React.forwardRef(function AppSidebar2({
   collapseLabel = "Collapse sidebar",
   profileMoreLabel = "Profile options",
   menuLabel = "Menu",
+  linkComponent,
   ...rest
 }, ref) {
   const baseClass = "ds-app-sidebar";
+  const Link = useLinkComponent(linkComponent);
   const avatarSeed = (item) => typeof item.pixelAvatar === "string" ? item.pixelAvatar : item.label;
   const avatarItems = sections.flatMap(
     (section) => section.items.filter((item) => item.pixelAvatar)
@@ -279,6 +282,7 @@ const AppSidebar = React.forwardRef(function AppSidebar2({
         mobileOpen && drilled && panelSource ? /* @__PURE__ */ jsx(
           SidebarPanel,
           {
+            linkComponent: Link,
             className: `${baseClass}__drill`,
             items: panelSource.items,
             title: panelSource.label,
@@ -327,8 +331,8 @@ const AppSidebar = React.forwardRef(function AppSidebar2({
               )
             ] });
             return /* @__PURE__ */ jsxs(React.Fragment, { children: [
-              isLink ? /* @__PURE__ */ jsx(
-                "a",
+              isLink && item.href ? /* @__PURE__ */ jsx(
+                Link,
                 {
                   className: itemClasses,
                   href: item.href,
@@ -408,7 +412,7 @@ const AppSidebar = React.forwardRef(function AppSidebar2({
                           children: subLabel
                         }
                       ) : sub.href ? /* @__PURE__ */ jsx(
-                        "a",
+                        Link,
                         {
                           className: subClasses,
                           href: sub.href,
@@ -467,6 +471,7 @@ const AppSidebar = React.forwardRef(function AppSidebar2({
     panelSource && !mobileOpen && /* @__PURE__ */ jsx(
       SidebarPanel,
       {
+        linkComponent: Link,
         id: panelId,
         className: [
           `${baseClass}__panel`,

package/components/Attachment/Attachment.css

@@ -481,23 +481,6 @@ button.ds-attachment-tile__body:focus-visible,
   outline-offset: 2px;
 }
 
-/* ============================================
-   VISUALLY HIDDEN
-   ============================================ */
-
-.ds-attachment-tile__sr-only,
-.ds-attachment-group__sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
-
 /* ============================================
    REDUCED MOTION
    The global guard collapses the spin to a still arc, which still reads as

package/components/Attachment/AttachmentTile.js

@@ -5,6 +5,7 @@ import { formatBytes, getFileExtension, getFileKind, getFileTypeLabel, matchesAc
 import { renderTypeMark } from "./typeMark.js";
 import "../../fonts/material-symbols.css";
 import "./Attachment.css";
+import "../../behaviors/visually-hidden.css";
 const AttachmentTile = React.forwardRef(
   ({
     name,
@@ -97,7 +98,7 @@ const AttachmentTile = React.forwardRef(
     const stack = /* @__PURE__ */ jsxs("span", { className: `${baseClass}__stack`, children: [
       /* @__PURE__ */ jsx("span", { className: `${baseClass}__mark`, children: mark }),
       /* @__PURE__ */ jsxs("span", { className: `${baseClass}__name`, title: name, children: [
-        /* @__PURE__ */ jsx("span", { className: `${baseClass}__sr-only`, children: name }),
+        /* @__PURE__ */ jsx("span", { className: "ds-visually-hidden", children: name }),
         head !== "" && /* @__PURE__ */ jsx("span", { className: `${baseClass}__name-head`, "aria-hidden": "true", children: head }),
         /* @__PURE__ */ jsx("span", { className: `${baseClass}__name-tail`, "aria-hidden": "true", children: tail })
       ] }),
@@ -111,7 +112,7 @@ const AttachmentTile = React.forwardRef(
       ] });
     } else if (showExcerpt) {
       content = /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("span", { className: `${baseClass}__sr-only`, children: name }),
+        /* @__PURE__ */ jsx("span", { className: "ds-visually-hidden", children: name }),
         /* @__PURE__ */ jsx("span", { className: `${baseClass}__excerpt`, children: excerpt }),
         /* @__PURE__ */ jsx("span", { className: `${baseClass}__corner`, children: cornerMark })
       ] });

package/components/BottomNav/BottomNav.css

@@ -141,15 +141,6 @@
   padding: 0;
 }
 
-.ds-bottom-nav__sr {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
-  clip-path: inset(50%);
-  white-space: nowrap;
-}
-
 .ds-bottom-nav__search {
   display: none;
 }

package/components/BottomNav/BottomNav.d.ts

@@ -1,4 +1,5 @@
 import { default as React } from 'react';
+import { LinkComponent } from '../../behaviors/LinkProvider';
 export interface BottomNavItem {
     /** Unique key for this destination */
     key: string;
@@ -67,6 +68,12 @@ type BottomNavOwnProps = {
     badgeLabel?: (badge: number | string | true) => string;
     /** Additional CSS classes */
     className?: string;
+    /**
+     * The component its links render with, such as Next.js's `Link`, so they
+     * navigate through the app's router. Wins over a LinkProvider's; a plain
+     * `<a>` when neither is set.
+     */
+    linkComponent?: LinkComponent;
 };
 export interface BottomNavProps extends BottomNavOwnProps, Omit<React.ComponentPropsWithoutRef<'nav'>, keyof BottomNavOwnProps> {
 }