diff --git a/design-system/apps/design-lab/src/pages/ComponentDetailPage.tsx b/design-system/apps/design-lab/src/pages/ComponentDetailPage.tsx
index c344f5a7a6..523edf05b5 100644
--- a/design-system/apps/design-lab/src/pages/ComponentDetailPage.tsx
+++ b/design-system/apps/design-lab/src/pages/ComponentDetailPage.tsx
@@ -1850,6 +1850,9 @@ export function ComponentDetailPage({
                 <NavigationPanelItem reserveLeadingSpace>
                   {t("components.preview.navigationPanelMoreItem")}
                 </NavigationPanelItem>
+                <NavigationPanelItem labelBehavior="static" style={{ maxInlineSize: 180, whiteSpace: "normal" }}>
+                  {t("components.preview.cardDescription")}
+                </NavigationPanelItem>
               </NavigationPanelSection>
             </NavigationPanelContent>
           </NavigationPanelBody>
diff --git a/design-system/packages/ui/README.md b/design-system/packages/ui/README.md
index d269968099..9771701307 100644
--- a/design-system/packages/ui/README.md
+++ b/design-system/packages/ui/README.md
@@ -159,6 +159,15 @@ its virtual active state through this contract. Selected
 tabs do not animate automatically. Motion respects `prefers-reduced-motion`;
 reduced-motion users keep the static fade. Text and movement follow RTL direction.
 
+Use `overflowStyle="ellipsis"` when a single-line slot requires a visible ellipsis
+instead of a resting fade. It works with static `behavior="fade"` labels and with
+`behavior="marquee"`, which reveals the full text on interaction and returns to
+the ellipsis afterward. Reduced motion keeps the ellipsis. Multiline clamps retain
+their existing behavior. Set `marqueeTrigger="interaction"` to ignore virtual
+active state on both the label and its owner; the default
+`"interaction-or-active"` preserves existing listbox behavior. This also prevents
+virtual activation from opening the label's tooltip; actual hover/focus still works.
+
 Rich children default to fade to preserve the label's existing inline composition.
 Composite containers keep their icons/actions fixed and give each text slot its
 own `OverflowText`. Marquee measures and
@@ -228,6 +237,19 @@ Hosts without Web Animations render the current text immediately.
 The **RollingText** Design Lab entry includes manual standalone and TabGroup
 examples for repeated replacement and long labels.
 
+`ActionItem` and its `NavigationPanelItem` composition also accept
+`labelBehavior="static"` to preserve wrapping labels without an implicit overflow
+tooltip or marquee. Their default remains `"overflow"`. The public `label` part
+retains its typography, and the static label inherits whitespace from its owner.
+`NavigationPanelItem.className` styles the outer row; native button attributes and
+the ref reach its `trigger` part. Keep row layout separate from trigger styling.
+
+`TabGroupItem.tabProps` applies `className`, `style`, `title`, `aria-label`,
+`aria-describedby`, and `data-*` attributes directly to the native tab button.
+Use product-namespaced data attributes for product appearance identity. The
+component retains its own part marker, IDs, panel association, disabled state,
+selection, focus, and event handling. Keep IDs and panel IDs in the item fields.
+
 `TabGroup.renderItem(item, node, index)` can wrap the supplied standard item in
 a tooltip, context-menu owner, or drag target. Keep `node` intact so TabGroup
 continues to own selection, keyboard navigation, label overflow, and end-action
diff --git a/design-system/packages/ui/src/components/ActionItem/ActionItem.meta.ts b/design-system/packages/ui/src/components/ActionItem/ActionItem.meta.ts
index 538038af0a..2a11e65046 100644
--- a/design-system/packages/ui/src/components/ActionItem/ActionItem.meta.ts
+++ b/design-system/packages/ui/src/components/ActionItem/ActionItem.meta.ts
@@ -6,6 +6,7 @@ export const actionItemMeta = {
   maturity: "stable",
   name: "ActionItem",
   props: [
+    { defaultValue: "overflow", name: "labelBehavior", type: "overflow | static" },
     { name: "children", type: "ReactNode" },
     { name: "leading", type: "ReactNode" },
     { defaultValue: "false", name: "reserveLeadingSpace", type: "boolean" },
diff --git a/design-system/packages/ui/src/components/ActionItem/ActionItem.module.css b/design-system/packages/ui/src/components/ActionItem/ActionItem.module.css
index 4377888c89..c8a0ae4aeb 100644
--- a/design-system/packages/ui/src/components/ActionItem/ActionItem.module.css
+++ b/design-system/packages/ui/src/components/ActionItem/ActionItem.module.css
@@ -103,6 +103,11 @@
     white-space: nowrap;
   }
 
+  .staticLabel {
+    overflow: visible;
+    white-space: inherit;
+  }
+
   .metadata,
   .shortcut,
   .actions {
diff --git a/design-system/packages/ui/src/components/ActionItem/ActionItem.tsx b/design-system/packages/ui/src/components/ActionItem/ActionItem.tsx
index c7593438b2..15d1b4ae75 100644
--- a/design-system/packages/ui/src/components/ActionItem/ActionItem.tsx
+++ b/design-system/packages/ui/src/components/ActionItem/ActionItem.tsx
@@ -30,6 +30,8 @@ export interface ActionItemProps
   children: ReactNode;
   className?: string;
   leading?: ReactNode;
+  /** Static labels preserve wrapping without implicit overflow motion or tooltips. */
+  labelBehavior?: "overflow" | "static";
   metadata?: ReactNode;
   reserveLeadingSpace?: boolean;
   shortcut?: ReactNode;
@@ -42,6 +44,7 @@ export const ActionItem = forwardRef<HTMLButtonElement, ActionItemProps>(functio
   className,
   disabled,
   leading,
+  labelBehavior = "overflow",
   metadata,
   reserveLeadingSpace = false,
   shortcut,
@@ -71,7 +74,11 @@ export const ActionItem = forwardRef<HTMLButtonElement, ActionItemProps>(functio
             {leading}
           </span>
         )}
-        <OverflowText className={styles.label} data-openbitfun-part="label">{children}</OverflowText>
+        {labelBehavior === "static" ? (
+          <span className={classNames(styles.label, styles.staticLabel)} data-openbitfun-part="label">{children}</span>
+        ) : (
+          <OverflowText className={styles.label} data-openbitfun-part="label">{children}</OverflowText>
+        )}
         {metadata !== undefined && metadata !== null && (
           <span className={styles.metadata} data-openbitfun-part="metadata">
             {metadata}
diff --git a/design-system/packages/ui/src/components/TabGroup/TabGroup.meta.ts b/design-system/packages/ui/src/components/TabGroup/TabGroup.meta.ts
index 1448d8d41e..f55e8e50e4 100644
--- a/design-system/packages/ui/src/components/TabGroup/TabGroup.meta.ts
+++ b/design-system/packages/ui/src/components/TabGroup/TabGroup.meta.ts
@@ -9,6 +9,7 @@ export const tabGroupMeta = {
     { name: "items", type: "readonly TabGroupItem[]" },
     { name: "items[].labelTransitionKey", type: "string | number" },
     { name: "items[].labelSuffix", type: "ReactNode" },
+    { name: "items[].tabProps", type: "TabGroupItem['tabProps']" },
     { name: "value", type: "string" },
     { name: "defaultValue", type: "string" },
     { name: "onValueChange", type: "(value: string) => void" },
diff --git a/design-system/packages/ui/src/components/TabGroup/TabGroup.tsx b/design-system/packages/ui/src/components/TabGroup/TabGroup.tsx
index 67b18ae710..840eaebb90 100644
--- a/design-system/packages/ui/src/components/TabGroup/TabGroup.tsx
+++ b/design-system/packages/ui/src/components/TabGroup/TabGroup.tsx
@@ -24,6 +24,9 @@ export interface TabGroupItem {
   /** Opt plain text into vertical replacement without remounting the tab. */
   labelTransitionKey?: string | number;
   panelId?: string;
+  /** Presentation and product data attributes on the native tab; selection stays owned by TabGroup. */
+  tabProps?: Pick<HTMLAttributes<HTMLButtonElement>, "className" | "style" | "title" | "aria-label" | "aria-describedby">
+    & Record<`data-${string}`, string | number | boolean | undefined>;
   value: string;
 }
 
@@ -144,10 +147,11 @@ export const TabGroup = forwardRef<HTMLDivElement, TabGroupProps>(function TabGr
             key={item.value}
           >
             <button
+              {...item.tabProps}
               aria-controls={item.panelId}
               aria-disabled={item.disabled || undefined}
               aria-selected={selected}
-              className={styles.tab}
+              className={classNames(styles.tab, item.tabProps?.className)}
               data-openbitfun-part="tab"
               data-openbitfun-value={item.value}
               disabled={item.disabled}
diff --git a/design-system/packages/ui/src/primitives/OverflowText/OverflowText.module.css b/design-system/packages/ui/src/primitives/OverflowText/OverflowText.module.css
index 8f5e2ff4dd..487302767f 100644
--- a/design-system/packages/ui/src/primitives/OverflowText/OverflowText.module.css
+++ b/design-system/packages/ui/src/primitives/OverflowText/OverflowText.module.css
@@ -33,6 +33,12 @@
     padding-block: calc(var(--openbitfun-space-1) / 2);
   }
 
+  .root[data-overflow-style="ellipsis"] > .content {
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
   .root[data-overflow-lines] {
     display: -webkit-box;
     -webkit-box-orient: vertical;
@@ -51,8 +57,8 @@
   }
 
   /* Keep resting specificity low so the owning control can reveal the full end. */
-  .root[data-overflow-behavior="fade"][data-overflow="true"]:not([data-overflow-lines]),
-  .root[data-overflow-behavior="marquee"][data-overflow="true"]:where(:not(:hover):not(:focus-visible):not([data-marquee-active="true"])) {
+  .root:not([data-overflow-style="ellipsis"])[data-overflow-behavior="fade"][data-overflow="true"]:not([data-overflow-lines]),
+  .root:not([data-overflow-style="ellipsis"])[data-overflow-behavior="marquee"][data-overflow="true"]:where(:not(:hover):not(:focus-visible):not([data-marquee-active="true"])) {
     -webkit-mask-image: linear-gradient(
       to right,
       currentColor 0,
@@ -69,8 +75,8 @@
     mask-repeat: no-repeat;
   }
 
-  .root:where(:dir(rtl))[data-overflow-behavior="fade"][data-overflow="true"]:not([data-overflow-lines]),
-  .root:where(:dir(rtl))[data-overflow-behavior="marquee"][data-overflow="true"]:where(:not(:hover):not(:focus-visible):not([data-marquee-active="true"])) {
+  .root:not([data-overflow-style="ellipsis"]):where(:dir(rtl))[data-overflow-behavior="fade"][data-overflow="true"]:not([data-overflow-lines]),
+  .root:not([data-overflow-style="ellipsis"]):where(:dir(rtl))[data-overflow-behavior="marquee"][data-overflow="true"]:where(:not(:hover):not(:focus-visible):not([data-marquee-active="true"])) {
     -webkit-mask-image: linear-gradient(
       to left,
       currentColor 0,
@@ -85,15 +91,20 @@
     );
   }
 
-  :where([data-overflow-trigger]:is(:hover, :focus-within, [data-overflow-active="true"])) .root[data-overflow-behavior="marquee"][data-overflow="true"] {
+  :where([data-overflow-trigger][data-overflow-active="true"]) .root:where(:not([data-marquee-trigger="interaction"])):not([data-overflow-style="ellipsis"])[data-overflow-behavior="marquee"][data-overflow="true"],
+  :where([data-overflow-trigger]:is(:hover, :focus-within)) .root:not([data-overflow-style="ellipsis"])[data-overflow-behavior="marquee"][data-overflow="true"] {
     -webkit-mask-image: none;
     mask-image: none;
   }
 
-  :where([data-overflow-trigger]:is(:hover, :focus-within, [data-overflow-active="true"])) .root[data-overflow-behavior="marquee"][data-overflow="true"] .content,
+  :where([data-overflow-trigger][data-overflow-active="true"]) .root:where(:not([data-marquee-trigger="interaction"]))[data-overflow-behavior="marquee"][data-overflow="true"] .content,
+  :where([data-overflow-trigger]:is(:hover, :focus-within)) .root[data-overflow-behavior="marquee"][data-overflow="true"] .content,
   .root[data-overflow-behavior="marquee"][data-overflow="true"]:hover .content,
   .root[data-overflow-behavior="marquee"][data-overflow="true"]:focus-visible .content,
   .root[data-overflow-behavior="marquee"][data-overflow="true"][data-marquee-active="true"] .content {
+    min-inline-size: max-content;
+    overflow: visible;
+    text-overflow: clip;
     animation: openbitfun-overflow-text-marquee var(--_overflow-text-marquee-duration) linear infinite alternate;
     will-change: transform;
   }
@@ -110,7 +121,7 @@
   }
 
   @media (prefers-reduced-motion: reduce) {
-    .root[data-overflow-behavior="marquee"][data-overflow="true"] {
+    .root:not([data-overflow-style="ellipsis"])[data-overflow-behavior="marquee"][data-overflow="true"] {
       -webkit-mask-image: linear-gradient(
         to right,
         currentColor 0,
@@ -127,7 +138,7 @@
       mask-repeat: no-repeat;
     }
 
-    .root:dir(rtl)[data-overflow-behavior="marquee"][data-overflow="true"] {
+    .root:not([data-overflow-style="ellipsis"]):dir(rtl)[data-overflow-behavior="marquee"][data-overflow="true"] {
       -webkit-mask-image: linear-gradient(
         to left,
         currentColor 0,
@@ -142,7 +153,8 @@
       );
     }
 
-    :where([data-overflow-trigger]:is(:hover, :focus-within, [data-overflow-active="true"])) .root[data-overflow-behavior="marquee"][data-overflow="true"] .content,
+    :where([data-overflow-trigger][data-overflow-active="true"]) .root:where(:not([data-marquee-trigger="interaction"]))[data-overflow-behavior="marquee"][data-overflow="true"] .content,
+    :where([data-overflow-trigger]:is(:hover, :focus-within)) .root[data-overflow-behavior="marquee"][data-overflow="true"] .content,
     .root[data-overflow-behavior="marquee"][data-overflow="true"]:hover .content,
     .root[data-overflow-behavior="marquee"][data-overflow="true"]:focus-visible .content,
     .root[data-overflow-behavior="marquee"][data-overflow="true"][data-marquee-active="true"] .content {
@@ -150,12 +162,18 @@
       transform: none;
       will-change: auto;
     }
+
+    .root[data-overflow-style="ellipsis"][data-overflow-behavior="marquee"][data-overflow="true"] > .content {
+      min-inline-size: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
   }
 
   @media (forced-colors: active) {
-    .root:dir(rtl)[data-overflow-behavior][data-overflow="true"],
-    .root[data-overflow-behavior][data-overflow="true"],
-    .root[data-overflow-behavior][data-overflow="true"]:not(:hover):not(:focus-visible):not([data-marquee-active="true"]) {
+    .root:not([data-overflow-style="ellipsis"]):dir(rtl)[data-overflow-behavior][data-overflow="true"],
+    .root:not([data-overflow-style="ellipsis"])[data-overflow-behavior][data-overflow="true"],
+    .root:not([data-overflow-style="ellipsis"])[data-overflow-behavior][data-overflow="true"]:not(:hover):not(:focus-visible):not([data-marquee-active="true"]) {
       -webkit-mask-image: none;
       mask-image: none;
     }
diff --git a/design-system/packages/ui/src/primitives/OverflowText/OverflowText.tsx b/design-system/packages/ui/src/primitives/OverflowText/OverflowText.tsx
index 5500021608..090940a449 100644
--- a/design-system/packages/ui/src/primitives/OverflowText/OverflowText.tsx
+++ b/design-system/packages/ui/src/primitives/OverflowText/OverflowText.tsx
@@ -37,6 +37,10 @@ export interface OverflowTextProps extends HTMLAttributes<HTMLElement> {
   lines?: number;
   /** Plain text defaults to marquee; rich composition defaults to a static fade. */
   behavior?: OverflowTextBehavior;
+  /** Single-line resting treatment; multiline clamps keep their existing layout. */
+  overflowStyle?: "fade" | "ellipsis";
+  /** Interaction-only text ignores virtual active state on itself and its owner. */
+  marqueeTrigger?: "interaction-or-active" | "interaction";
   /** Runs an overflowing marquee while its owning control is virtually active. */
   marqueeActive?: boolean;
 }
@@ -54,6 +58,8 @@ export const OverflowText = forwardRef<HTMLElement, OverflowTextProps>(
     className,
     lines,
     marqueeActive = false,
+    marqueeTrigger = "interaction-or-active",
+    overflowStyle = "fade",
     style,
     title,
     ...props
@@ -124,7 +130,7 @@ export const OverflowText = forwardRef<HTMLElement, OverflowTextProps>(
 
     useIsomorphicLayoutEffect(() => {
       updateOverflow();
-    }, [behavior, children, lines, updateOverflow]);
+    }, [behavior, children, lines, overflowStyle, updateOverflow]);
 
     useEffect(() => {
       if (measurementRef.current.isOverflowing) prepareTooltip();
@@ -160,7 +166,7 @@ export const OverflowText = forwardRef<HTMLElement, OverflowTextProps>(
           element.ownerDocument.defaultView?.removeEventListener("resize", updateOverflow);
         }
       };
-    }, [behavior, prepareTooltip, textOnly, updateOverflow]);
+    }, [behavior, overflowStyle, prepareTooltip, textOnly, updateOverflow]);
 
     const marqueeDuration = Math.max(
       MARQUEE_MIN_DURATION_MS,
@@ -182,17 +188,19 @@ export const OverflowText = forwardRef<HTMLElement, OverflowTextProps>(
       <Tag
         {...props}
         className={classNames(styles.root, className)}
-        data-marquee-active={marqueeActive ? "true" : undefined}
+        data-marquee-active={marqueeActive && marqueeTrigger !== "interaction" ? "true" : undefined}
+        data-marquee-trigger={marqueeTrigger}
         data-overflow={measurement.isOverflowing ? "true" : "false"}
         data-overflow-behavior={behavior}
         data-overflow-lines={lines}
+        data-overflow-style={lines ? undefined : overflowStyle}
         data-overflow-tooltip={hasOverflowTooltip ? "true" : undefined}
         data-overflow-text={title}
         ref={setElementRef}
         style={resolvedStyle}
         title={hasOverflowTooltip ? undefined : title}
       >
-        {behavior === "marquee" || (textOnly && lines === undefined) ? (
+        {behavior === "marquee" || ((textOnly || overflowStyle === "ellipsis") && lines === undefined) ? (
           <span className={styles.content} data-openbitfun-part="content" data-overflow-content="" ref={contentRef}>
             {children}
           </span>
@@ -200,7 +208,7 @@ export const OverflowText = forwardRef<HTMLElement, OverflowTextProps>(
       </Tag>
       {hasOverflowTooltip && (
         <Tooltip
-          active={marqueeActive}
+          active={marqueeActive && marqueeTrigger !== "interaction"}
           content={tooltipText}
           interactive
           onBeforeShow={prepareTooltip}
diff --git a/design-system/packages/ui/tests/navigation-panel.test.mjs b/design-system/packages/ui/tests/navigation-panel.test.mjs
index 104250c2f3..0345185d7b 100644
--- a/design-system/packages/ui/tests/navigation-panel.test.mjs
+++ b/design-system/packages/ui/tests/navigation-panel.test.mjs
@@ -14,6 +14,21 @@ import {
   NavigationPanelSeparator,
 } from "../dist/index.js";
 
+test("NavigationPanelItem forwards static labels and keeps native navigation semantics", () => {
+  const markup = renderToStaticMarkup(createElement(NavigationPanelItem, {
+    selected: true, labelBehavior: "static", className: "horizontal-navigation",
+    title: "My submissions", "data-active": true,
+  }, "My submitted appearance packages"));
+  assert.match(markup, /<span[^>]+class="[^"]+ horizontal-navigation"/);
+  assert.match(markup, /<button[^>]+aria-current="page"/);
+  assert.match(markup, /data-active="true"/);
+  assert.match(markup, /type="button"/);
+  assert.match(markup, /data-openbitfun-part="label">My submitted appearance packages<\/span>/);
+  assert.doesNotMatch(markup, /data-overflow-behavior|data-overflow-content|labelBehavior/);
+  const defaultMarkup = renderToStaticMarkup(createElement(NavigationPanelItem, null, "Navigation"));
+  assert.match(defaultMarkup, /data-overflow-behavior="marquee"/);
+});
+
 test("NavigationPanel composes independent header, grouped body, and footer regions", () => {
   const markup = renderToStaticMarkup(
     createElement(
diff --git a/design-system/packages/ui/tests/overflow-text.test.mjs b/design-system/packages/ui/tests/overflow-text.test.mjs
index 66e15acbe7..4a57456491 100644
--- a/design-system/packages/ui/tests/overflow-text.test.mjs
+++ b/design-system/packages/ui/tests/overflow-text.test.mjs
@@ -64,7 +64,7 @@ test("OverflowText measures real clipping for fade and marquee treatments", asyn
   assert.match(source, /measurementRef\.current/);
   assert.match(
     source,
-    /useIsomorphicLayoutEffect\(\(\) => \{\s*updateOverflow\(\);\s*\}, \[behavior, children, lines, updateOverflow\]\);/s,
+    /useIsomorphicLayoutEffect\(\(\) => \{\s*updateOverflow\(\);\s*\}, \[behavior, children, lines, overflowStyle, updateOverflow\]\);/s,
   );
   assert.match(source, /new ResizeObserver\(updateOverflow\)/);
   assert.match(source, /resizeObserver\?\.observe\(contentRef\.current\)/);
@@ -77,5 +77,21 @@ test("OverflowText measures real clipping for fade and marquee treatments", asyn
   assert.match(styles, /openbitfun-overflow-text-marquee/);
   assert.match(styles, /prefers-reduced-motion:\s*reduce/);
   assert.match(styles, /\.root:dir\(rtl\)/);
-  assert.doesNotMatch(styles, /text-overflow:\s*ellipsis/);
+  assert.match(styles, /\.root\[data-overflow-style="ellipsis"\] > \.content\s*\{[^}]*text-overflow:\s*ellipsis/s);
+  assert.match(styles, /data-overflow-active="true"[^\n]+:not\(\[data-marquee-trigger="interaction"\]\)/);
+});
+
+test("OverflowText makes resting ellipsis and interaction-only activation explicit", () => {
+  const markup = renderToStaticMarkup(createElement(OverflowText, {
+    overflowStyle: "ellipsis", marqueeTrigger: "interaction", marqueeActive: true,
+  }, "The complete description"));
+  assert.match(markup, /data-overflow-style="ellipsis"/);
+  assert.match(markup, /data-marquee-trigger="interaction"/);
+  assert.doesNotMatch(markup, /data-marquee-active/);
+  assert.match(markup, /The complete description/);
+  const multiline = renderToStaticMarkup(createElement(OverflowText, {
+    overflowStyle: "ellipsis", lines: 2,
+  }, "The complete description"));
+  assert.match(multiline, /data-overflow-lines="2"/);
+  assert.doesNotMatch(multiline, /data-overflow-style/);
 });
diff --git a/design-system/packages/ui/tests/tab-group.test.mjs b/design-system/packages/ui/tests/tab-group.test.mjs
index b6da178c02..acaeb2ef83 100644
--- a/design-system/packages/ui/tests/tab-group.test.mjs
+++ b/design-system/packages/ui/tests/tab-group.test.mjs
@@ -42,6 +42,33 @@ test("TabGroup exposes a single selected tab with native button behavior", () =>
   assert.equal((markup.match(/data-overflow-trigger="true"/g) ?? []).length, 2);
 });
 
+test("tab presentation props reach the button without replacing its owned semantics", () => {
+  const markup = renderToStaticMarkup(createElement(TabGroup, {
+    items: [{ ...items[0], id: "product-tab", tabProps: {
+      className: "product-tab", "data-openbitfun-product-component": "product",
+      "data-openbitfun-product-part": "tab", title: "Full title",
+      "aria-describedby": "help", style: { opacity: 0.8 },
+      // Untyped callers must not override component-owned interaction/identity.
+      role: "button", type: "submit", tabIndex: 8, id: "wrong-id",
+      "aria-selected": false, "aria-controls": "wrong-panel", "data-openbitfun-part": "wrong-part",
+    } }],
+  }));
+  const button = markup.match(/<button\b[^>]*>/)?.[0] ?? "";
+  assert.match(button, /class="[^" ]+ product-tab"/);
+  assert.match(button, /data-openbitfun-product-component="product"/);
+  assert.match(button, /data-openbitfun-product-part="tab"/);
+  assert.match(button, /aria-describedby="help"/);
+  assert.match(button, /style="opacity:0.8"/);
+  assert.match(button, /title="Full title"/);
+  assert.match(button, /id="product-tab"/);
+  assert.match(button, /role="tab"/);
+  assert.match(button, /type="button"/);
+  assert.match(button, /tabindex="0"/);
+  assert.match(button, /aria-selected="true"/);
+  assert.match(button, /aria-controls="welcome-panel"/);
+  assert.match(button, /data-openbitfun-part="tab"/);
+});
+
 test("controlled value and disabled items preserve selection and focus contracts", () => {
   const markup = renderToStaticMarkup(
     createElement(TabGroup, {
diff --git a/package.json b/package.json
index 6e37e58504..5279e540db 100644
--- a/package.json
+++ b/package.json
@@ -60,7 +60,7 @@
     "theme:color-audit:test": "node --test scripts/audit-theme-colors.test.mjs scripts/audit-cli-theme-colors.test.mjs scripts/audit-frontend-colors.test.mjs",
     "motion:audit": "node scripts/audit-web-motion.mjs",
     "theme:visual-contract": "node scripts/validate-theme-visual-contract.mjs",
-    "appearance:contract-audit": "node scripts/audit-appearance-contracts.mjs",
+    "appearance:contract-audit": "node --test scripts/appearance-dom-contracts.test.mjs && node scripts/audit-appearance-contracts.mjs",
     "flowchat:log:analyze": "node scripts/diagnostics/analyze-flowchat-log.mjs",
     "flowchat:log:analyze:test": "node --test scripts/diagnostics/analyze-flowchat-log.test.mjs",
     "product:identity:audit": "node scripts/product-identity-audit.mjs",
diff --git a/scripts/appearance-dom-contracts.mjs b/scripts/appearance-dom-contracts.mjs
new file mode 100644
index 0000000000..9d1b4bd5de
--- /dev/null
+++ b/scripts/appearance-dom-contracts.mjs
@@ -0,0 +1,61 @@
+import ts from 'typescript';
+
+function unwrap(node) {
+  while (node && (ts.isParenthesizedExpression(node) || ts.isAsExpression(node)
+    || ts.isSatisfiesExpression(node))) node = node.expression;
+  return node;
+}
+
+function property(object, name) {
+  return object.properties.find(candidate => ts.isPropertyAssignment(candidate)
+    && (ts.isIdentifier(candidate.name) || ts.isStringLiteral(candidate.name))
+    && candidate.name.text === name);
+}
+
+/** Only literal item props on the published TabGroup forwarding path count as DOM evidence. */
+export function collectForwardedTabProps(ast) {
+  const tabGroupNames = new Set();
+  for (const statement of ast.statements) {
+    if (!ts.isImportDeclaration(statement) || statement.moduleSpecifier.text !== '@openbitfun/ui') continue;
+    const bindings = statement.importClause?.namedBindings;
+    if (!bindings || !ts.isNamedImports(bindings)) continue;
+    for (const binding of bindings.elements) {
+      if ((binding.propertyName ?? binding.name).text === 'TabGroup') tabGroupNames.add(binding.name.text);
+    }
+  }
+  const forwarded = new Set();
+  function addItem(expression) {
+    const item = unwrap(expression);
+    if (!item || !ts.isObjectLiteralExpression(item)
+      || item.properties.some(ts.isSpreadAssignment)) return;
+    const props = unwrap(property(item, 'tabProps')?.initializer);
+    if (props && ts.isObjectLiteralExpression(props)
+      && !props.properties.some(ts.isSpreadAssignment)) forwarded.add(props);
+  }
+  function visit(node) {
+    if ((ts.isJsxOpeningElement(node) || ts.isJsxSelfClosingElement(node))
+      && ts.isIdentifier(node.tagName) && tabGroupNames.has(node.tagName.text)) {
+      const attribute = findDomAttribute(node, 'items');
+      const expression = unwrap(attribute?.initializer && ts.isJsxExpression(attribute.initializer)
+        ? attribute.initializer.expression : undefined);
+      if (expression && ts.isArrayLiteralExpression(expression)) expression.elements.forEach(addItem);
+      if (expression && ts.isCallExpression(expression)
+        && ts.isPropertyAccessExpression(expression.expression) && expression.expression.name.text === 'map') {
+        const callback = expression.arguments[0];
+        if (callback && ts.isArrowFunction(callback) && !ts.isBlock(callback.body)) addItem(callback.body);
+      }
+    }
+    ts.forEachChild(node, visit);
+  }
+  visit(ast);
+  return forwarded;
+}
+
+export function findDomAttribute(node, name) {
+  // TabGroup writes these after the spread, so caller values are not DOM evidence.
+  if (ts.isObjectLiteralExpression(node)
+    && (name === 'data-openbitfun-part' || name === 'data-openbitfun-value')) return undefined;
+  return ts.isObjectLiteralExpression(node)
+    ? property(node, name)
+    : node.attributes.properties.find(candidate => ts.isJsxAttribute(candidate) && candidate.name.text === name);
+}
diff --git a/scripts/appearance-dom-contracts.test.mjs b/scripts/appearance-dom-contracts.test.mjs
new file mode 100644
index 0000000000..c4c028522f
--- /dev/null
+++ b/scripts/appearance-dom-contracts.test.mjs
@@ -0,0 +1,43 @@
+import assert from 'node:assert/strict';
+import test from 'node:test';
+import ts from 'typescript';
+import { collectForwardedTabProps, findDomAttribute } from './appearance-dom-contracts.mjs';
+
+function collect(source) {
+  return [...collectForwardedTabProps(ts.createSourceFile('fixture.tsx', source, ts.ScriptTarget.Latest, true, ts.ScriptKind.TSX))];
+}
+
+test('TabGroup literal and mapped items expose the real native tab attributes', () => {
+  for (const items of [
+    `[{value: 'models', tabProps: {'data-openbitfun-product-part': 'tab'}}]`,
+    `tabs.map(tab => ({value: tab, tabProps: {'data-openbitfun-product-part': 'tab'}}))`,
+  ]) {
+    const nodes = collect(`import { TabGroup as Tabs } from '@openbitfun/ui'; <Tabs items={${items}} />;`);
+    assert.equal(nodes.length, 1);
+    assert.equal(findDomAttribute(nodes[0], 'data-openbitfun-product-part').initializer.text, 'tab');
+    assert.equal(findDomAttribute(nodes[0], 'missing'), undefined);
+  }
+});
+
+test('unrelated objects, non-forwarding props and unknown spreads cannot establish DOM contracts', () => {
+  for (const source of [
+    `const unused = {tabProps: {'data-openbitfun-product-part': 'tab'}};`,
+    `import { TabGroup } from './fake'; <TabGroup items={[{tabProps: {part: 'tab'}}]} />;`,
+    `import { Button } from '@openbitfun/ui'; <Button items={[{tabProps: {part: 'tab'}}]} />;`,
+    `import { TabGroup } from '@openbitfun/ui'; <TabGroup other={[{tabProps: {part: 'tab'}}]} />;`,
+    `import { TabGroup } from '@openbitfun/ui'; <TabGroup items={[{tabProps: {part: 'tab'}, ...unknown}]} />;`,
+    `import { TabGroup } from '@openbitfun/ui'; <TabGroup items={[{tabProps: {part: 'tab', ...unknown}}]} />;`,
+    `import { TabGroup } from '@openbitfun/ui'; <TabGroup items={[{label: {tabProps: {part: 'tab'}}}]} />;`,
+  ]) assert.equal(collect(source).length, 0, source);
+});
+
+test('component-owned part and value markers cannot be supplied as forwarding evidence', () => {
+  const [node] = collect(`import { TabGroup } from '@openbitfun/ui';
+    <TabGroup items={[{value: 'models', tabProps: {
+      'data-openbitfun-part': 'invented', 'data-openbitfun-value': 'invented',
+      'data-openbitfun-product-part': 'tab'
+    }}]} />;`);
+  assert.equal(findDomAttribute(node, 'data-openbitfun-part'), undefined);
+  assert.equal(findDomAttribute(node, 'data-openbitfun-value'), undefined);
+  assert.equal(findDomAttribute(node, 'data-openbitfun-product-part').initializer.text, 'tab');
+});
diff --git a/scripts/audit-appearance-contracts.mjs b/scripts/audit-appearance-contracts.mjs
index 4728780830..e4e574f4cd 100644
--- a/scripts/audit-appearance-contracts.mjs
+++ b/scripts/audit-appearance-contracts.mjs
@@ -1,6 +1,7 @@
 import fs from 'node:fs';
 import path from 'node:path';
 import ts from 'typescript';
+import { collectForwardedTabProps, findDomAttribute } from './appearance-dom-contracts.mjs';
 
 const repoRoot = path.resolve(import.meta.dirname, '..');
 const sourceRoot = path.join(repoRoot, 'src', 'web-ui', 'src');
@@ -218,10 +219,8 @@ function jsxTagName(node) {
 }
 
 function jsxAttribute(node, name) {
-  const attribute = node.attributes.properties.find(property => (
-    ts.isJsxAttribute(property) && property.name.text === name
-  ));
-  if (!attribute || !ts.isJsxAttribute(attribute)) return { present: false, value: null };
+  const attribute = findDomAttribute(node, name);
+  if (!attribute) return { present: false, value: null };
   if (!attribute.initializer) return { present: true, value: null };
   if (ts.isStringLiteral(attribute.initializer)) {
     return { present: true, value: attribute.initializer.text };
@@ -239,14 +238,14 @@ function jsxLiteralAttribute(node, name) {
 }
 
 function jsxAttributeStringLiterals(node, name) {
-  const attribute = node.attributes.properties.find(property => (
-    ts.isJsxAttribute(property) && property.name.text === name
-  ));
-  if (!attribute || !ts.isJsxAttribute(attribute) || !attribute.initializer) return { present: false, dynamic: false, values: [] };
+  const attribute = findDomAttribute(node, name);
+  if (!attribute?.initializer) return { present: false, dynamic: false, values: [] };
   if (ts.isStringLiteral(attribute.initializer)) {
     return { present: true, dynamic: false, values: [attribute.initializer.text] };
   }
-  if (!ts.isJsxExpression(attribute.initializer) || !attribute.initializer.expression) {
+  const expression = ts.isPropertyAssignment(attribute) ? attribute.initializer
+    : ts.isJsxExpression(attribute.initializer) ? attribute.initializer.expression : undefined;
+  if (!expression) {
     return { present: true, dynamic: true, values: [] };
   }
   const values = new Set();
@@ -294,7 +293,7 @@ function jsxAttributeStringLiterals(node, name) {
       }
     }
   };
-  collectReturnedValues(attribute.initializer.expression);
+  collectReturnedValues(expression);
   return { present: true, dynamic: true, values: [...values] };
 }
 
@@ -488,8 +487,9 @@ const domContractSources = [
 
 for (const [file, source, strictContractOwnership] of domContractSources) {
   const ast = ts.createSourceFile(file, source, ts.ScriptTarget.Latest, true, ts.ScriptKind.TSX);
+  const forwardedTabProps = collectForwardedTabProps(ast);
   const visit = node => {
-    if (ts.isJsxOpeningElement(node) || ts.isJsxSelfClosingElement(node)) {
+    if (ts.isJsxOpeningElement(node) || ts.isJsxSelfClosingElement(node) || forwardedTabProps.has(node)) {
       const component = jsxAttribute(node, 'data-openbitfun-component');
       const productComponent = jsxAttribute(node, 'data-openbitfun-product-component');
       const scene = jsxAttribute(node, 'data-openbitfun-scene');
diff --git a/src/web-ui/src/flow_chat/components/ChatContextPicker.scss b/src/web-ui/src/flow_chat/components/ChatContextPicker.scss
index 9b8c0a99d6..82a266ef7e 100644
--- a/src/web-ui/src/flow_chat/components/ChatContextPicker.scss
+++ b/src/web-ui/src/flow_chat/components/ChatContextPicker.scss
@@ -130,13 +130,6 @@
     max-inline-size: 60%;
   }
 
-  &__skill-name {
-    display: block;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
   &__skill-option > [data-openbitfun-part='metadata'] {
     flex: 1 1 auto;
     inline-size: 8rem;
@@ -146,30 +139,8 @@
 
   &__skill-description {
     inline-size: 100%;
-    // This picker uses a visible ellipsis instead of the shared resting fade.
-    -webkit-mask-image: none;
-    mask-image: none;
-  }
-
-  &__skill-option:not(:hover):not(:focus-visible) &__skill-description > [data-overflow-content] {
-    display: block;
-    min-inline-size: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    // Virtual selection alone must not start the marquee on initial opening.
-    animation: none;
-    transform: none;
   }
 
-  @media (prefers-reduced-motion: reduce) {
-    &__skill-description > [data-overflow-content] {
-      display: block;
-      min-inline-size: 0;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-  }
-  
   &__footer {
     display: flex;
     align-items: center;
diff --git a/src/web-ui/src/flow_chat/components/ChatContextPicker.tsx b/src/web-ui/src/flow_chat/components/ChatContextPicker.tsx
index a44b4879da..015d7d8ee8 100644
--- a/src/web-ui/src/flow_chat/components/ChatContextPicker.tsx
+++ b/src/web-ui/src/flow_chat/components/ChatContextPicker.tsx
@@ -928,6 +928,8 @@ export const ChatContextPicker: React.FC<ChatContextPickerProps> = ({
                         <OverflowText
                           aria-label={skillDescription}
                           behavior="marquee"
+                          overflowStyle="ellipsis"
+                          marqueeTrigger="interaction"
                           className="chat-context-picker__skill-description"
                           data-openbitfun-component="chat-context-picker"
                           data-openbitfun-part="skillDescription"
@@ -949,7 +951,7 @@ export const ChatContextPicker: React.FC<ChatContextPickerProps> = ({
                   onMouseEnter={() => setSelectedIndex(index)}
                   value={key}
                 >
-                  {skill ? <span className="chat-context-picker__skill-name">{label}</span> : label}
+                  {skill ? <OverflowText behavior="fade" overflowStyle="ellipsis" title="">{label}</OverflowText> : label}
                 </ListboxOption>
               );
             })}
diff --git a/src/web-ui/src/flow_chat/components/ChatContextPickerOverlay.test.tsx b/src/web-ui/src/flow_chat/components/ChatContextPickerOverlay.test.tsx
index 6c71cb6b51..c2c4cd90b6 100644
--- a/src/web-ui/src/flow_chat/components/ChatContextPickerOverlay.test.tsx
+++ b/src/web-ui/src/flow_chat/components/ChatContextPickerOverlay.test.tsx
@@ -374,12 +374,14 @@ describe('ChatContextPicker overlay', () => {
       .toBe(skill.name);
     expect(skillOptions[0]?.querySelector('[data-openbitfun-part="label"]')
       ?.getAttribute('data-overflow-behavior')).toBe('fade');
-    expect(skillOptions[0]?.querySelector('[data-openbitfun-part="label"] [data-overflow-content]'))
-      .toBeNull();
+    expect(skillOptions[0]?.querySelector('[data-openbitfun-part="label"] [data-overflow-style="ellipsis"]')
+      ?.getAttribute('data-overflow-behavior')).toBe('fade');
     expect(skillOptions[0]?.querySelector('[data-openbitfun-part="metadata"]')?.textContent)
       .toBe('Work with PDFs');
     const description = skillOptions[0]?.querySelector('[data-openbitfun-part="skillDescription"]');
     expect(description?.getAttribute('data-marquee-active')).toBeNull();
+    expect(description?.getAttribute('data-marquee-trigger')).toBe('interaction');
+    expect(description?.getAttribute('data-overflow-style')).toBe('ellipsis');
     expect(description?.getAttribute('title')).toBe('');
     expect(skillOptions[0]?.getAttribute('title')).toBe('');
     expect(skillOptions[0]?.querySelector('[data-openbitfun-part="label"]')?.getAttribute('title')).toBe('');
diff --git a/src/web-ui/src/flow_chat/components/usage/SessionUsageComponents.test.tsx b/src/web-ui/src/flow_chat/components/usage/SessionUsageComponents.test.tsx
index cc3275c984..121b0ea5c8 100644
--- a/src/web-ui/src/flow_chat/components/usage/SessionUsageComponents.test.tsx
+++ b/src/web-ui/src/flow_chat/components/usage/SessionUsageComponents.test.tsx
@@ -6,6 +6,9 @@ import fs from 'node:fs';
 import path from 'node:path';
 
 import type { SessionUsageReport } from '@/infrastructure/api/service-api/SessionAPI';
+import { AppearanceCompiler } from '@/infrastructure/appearance/compiler/AppearanceCompiler';
+import { AppearanceRegistry } from '@/infrastructure/appearance/registry/AppearanceRegistry';
+import { APPEARANCE_SCHEMA_VERSION, type AppearancePackage } from '@/infrastructure/appearance/types';
 import { globalEventBus } from '@/infrastructure/event-bus';
 import enFlowChat from '@/locales/en-US/flow-chat.json';
 import zhCnFlowChat from '@/locales/zh-CN/flow-chat.json';
@@ -16,6 +19,7 @@ import {
 } from '../../events/flowchatNavigation';
 import { SessionRuntimeStatusEntry } from './SessionRuntimeStatusEntry';
 import { SessionUsagePanel } from './SessionUsagePanel';
+import { sessionUsagePanelAppearanceDescriptor } from './appearance';
 import { SessionUsageReportCard } from './SessionUsageReportCard';
 import { USAGE_EXPORT_REDACT_PATHS_STORAGE_KEY } from './usageReportUtils';
 
@@ -1098,6 +1102,67 @@ describe('Session usage report UI components', () => {
     const errorsTab = container.querySelector<HTMLButtonElement>('#session-usage-tab-errors');
     expect(errorsTab?.getAttribute('aria-selected')).toBe('true');
     expect(dom.window.document.activeElement).toBe(errorsTab);
+
+    for (const [key, expected] of [
+      ['Home', 'overview'], ['ArrowLeft', 'slowest'], ['ArrowRight', 'overview'], ['End', 'slowest'],
+    ]) {
+      const event = new dom.window.KeyboardEvent('keydown', { key, bubbles: true, cancelable: true });
+      act(() => dom.window.document.activeElement?.dispatchEvent(event));
+      expect(event.defaultPrevented).toBe(true);
+      expect(dom.window.document.activeElement?.id).toBe(`session-usage-tab-${expected}`);
+      expect(container.querySelectorAll('[role="tab"][tabindex="0"]')).toHaveLength(1);
+      expect(container.querySelector('[role="tabpanel"]')?.getAttribute('aria-labelledby'))
+        .toBe(`session-usage-tab-${expected}`);
+    }
+  });
+
+  it('preserves initial-tab updates and saved appearance selectors on the native tabs', () => {
+    const legacyPackage: AppearancePackage = {
+      schema: 'openbitfun.appearance', schemaVersion: APPEARANCE_SCHEMA_VERSION,
+      id: 'test.usage-tabs', name: 'Usage tabs', version: '1.0.0', mode: 'dark',
+      components: { 'session-usage-panel': { parts: { tab: { contexts: [{
+        when: { facets: { tab: 'models' }, states: ['active'] },
+        style: { opacity: { kind: 'number', value: 0.6 } },
+      }] } } } },
+    };
+    const serialized = JSON.stringify(legacyPackage);
+    const restored = JSON.parse(serialized) as AppearancePackage;
+    const registry = new AppearanceRegistry().registerComponent(sessionUsagePanelAppearanceDescriptor);
+    const snapshot = new AppearanceCompiler(registry).compile(restored, 1);
+    expect(JSON.stringify(restored)).toBe(serialized);
+    document.documentElement.setAttribute('data-openbitfun-appearance', snapshot.id);
+    document.documentElement.setAttribute('data-openbitfun-appearance-revision', String(snapshot.revision));
+    const style = document.createElement('style');
+    style.textContent = snapshot.cssText;
+    document.head.appendChild(style);
+    const rule = Array.from(style.sheet!.cssRules).find(candidate =>
+      candidate instanceof dom.window.CSSStyleRule && candidate.style.opacity === '0.6',
+    ) as CSSStyleRule | undefined;
+    expect(rule).toBeDefined();
+
+    const report = usageReport();
+    render(<SessionUsagePanel report={report} initialTab="models" />);
+    const modelsTab = container.querySelector('#session-usage-tab-models');
+    expect(container.querySelector('[role="tablist"]')?.getAttribute('data-openbitfun-component')).toBe('tab-group');
+    expect(modelsTab?.getAttribute('data-openbitfun-part')).toBe('tab');
+    expect(document.querySelector(rule!.selectorText)).toBe(modelsTab);
+    render(<SessionUsagePanel report={report} initialTab="files" />);
+    expect(document.querySelector(rule!.selectorText)).toBeNull();
+    expect(container.querySelector('[role="tabpanel"]')?.id).toBe('session-usage-panel-files');
+    act(() => modelsTab?.dispatchEvent(new dom.window.MouseEvent('click', { bubbles: true })));
+    expect(document.querySelector(rule!.selectorText)).toBe(modelsTab);
+  });
+
+  it('follows the shared tab direction in RTL layouts', () => {
+    render(<SessionUsagePanel report={usageReport()} />);
+    container.querySelectorAll<HTMLElement>('[role="tab"]').forEach(tab => { tab.style.direction = 'rtl'; });
+    const overviewTab = container.querySelector<HTMLButtonElement>('#session-usage-tab-overview')!;
+    act(() => {
+      overviewTab.focus();
+      overviewTab.dispatchEvent(new dom.window.KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }));
+    });
+    expect(dom.window.document.activeElement?.id).toBe('session-usage-tab-slowest');
+    expect(container.querySelector('#session-usage-tab-slowest')?.getAttribute('aria-selected')).toBe('true');
   });
 
   it('caps long usage tables and allows explicit expansion', () => {
@@ -1133,6 +1198,8 @@ describe('Session usage report UI components', () => {
 
     expect(container.querySelectorAll('tbody tr')).toHaveLength(55);
     expect(container.textContent).toContain('Tool 55');
+    act(() => toolsTab?.dispatchEvent(new dom.window.MouseEvent('click', { bubbles: true })));
+    expect(container.querySelectorAll('tbody tr')).toHaveLength(55);
   });
 
   it('links model tool and error aggregate rows to representative transcript anchors', () => {
diff --git a/src/web-ui/src/flow_chat/components/usage/SessionUsagePanel.scss b/src/web-ui/src/flow_chat/components/usage/SessionUsagePanel.scss
index 2a1cad1307..dd5a13c901 100644
--- a/src/web-ui/src/flow_chat/components/usage/SessionUsagePanel.scss
+++ b/src/web-ui/src/flow_chat/components/usage/SessionUsagePanel.scss
@@ -182,6 +182,12 @@
 
   &__tab {
     height: 28px;
+    border-radius: 0;
+    font-family: inherit;
+    font-weight: inherit;
+    line-height: inherit;
+    letter-spacing: inherit;
+    transition: none;
     padding: 0 10px;
     border: 0;
     border-bottom: 2px solid transparent;
@@ -191,6 +197,17 @@
     white-space: nowrap;
     cursor: pointer;
 
+    > [data-openbitfun-part='label'] {
+      line-height: inherit;
+    }
+
+    @layer openbitfun.components {
+      &[role='tab']:focus-visible {
+        outline: revert-layer;
+        outline-offset: revert-layer;
+      }
+    }
+
     &:hover {
       color: var(--openbitfun-color-content-primary);
       background: color-mix(in srgb, var(--openbitfun-color-action-quiet-hover) 72%, transparent);
diff --git a/src/web-ui/src/flow_chat/components/usage/SessionUsagePanel.tsx b/src/web-ui/src/flow_chat/components/usage/SessionUsagePanel.tsx
index 2732805186..39a3b19f9f 100644
--- a/src/web-ui/src/flow_chat/components/usage/SessionUsagePanel.tsx
+++ b/src/web-ui/src/flow_chat/components/usage/SessionUsagePanel.tsx
@@ -1,8 +1,8 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Activity, AlertTriangle, Database, FileText, GitCompare, ShieldCheck, Wrench, type LucideProps } from 'lucide-react';
 import { MarkdownRenderer } from '@/infrastructure/markdown';
-import { Button, OverflowText, Tooltip } from '@openbitfun/ui';
+import { Button, OverflowText, TabGroup, Tooltip } from '@openbitfun/ui';
 import { snapshotAPI } from '@/infrastructure/api';
 import type { SessionUsageReport } from '@/infrastructure/api/service-api/SessionAPI';
 import { globalEventBus } from '@/infrastructure/event-bus';
@@ -85,7 +85,6 @@ export const SessionUsagePanel: React.FC<SessionUsagePanelProps> = ({
   const [copied, setCopied] = useState(false);
   const [copiedMeta, setCopiedMeta] = useState<'session' | 'workspace' | null>(null);
   const [redactExportPaths, setRedactExportPaths] = useState(getUsageExportRedactPathsPreference);
-  const tabRefs = useRef<Partial<Record<SessionUsagePanelTab, HTMLButtonElement | null>>>({});
 
   useEffect(() => {
     if (initialTab) {
@@ -127,37 +126,10 @@ export const SessionUsagePanel: React.FC<SessionUsagePanelProps> = ({
     }
   }, []);
 
-  const handleTabKeyDown = useCallback((
-    event: React.KeyboardEvent<HTMLButtonElement>,
-    currentTab: SessionUsagePanelTab
-  ) => {
-    const currentIndex = TABS.indexOf(currentTab);
-    let nextIndex: number | null = null;
-
-    if (event.key === 'ArrowRight') {
-      nextIndex = (currentIndex + 1) % TABS.length;
-    } else if (event.key === 'ArrowLeft') {
-      nextIndex = (currentIndex - 1 + TABS.length) % TABS.length;
-    } else if (event.key === 'Home') {
-      nextIndex = 0;
-    } else if (event.key === 'End') {
-      nextIndex = TABS.length - 1;
-    }
-
-    if (nextIndex === null) {
-      return;
-    }
-
-    event.preventDefault();
-    const nextTab = TABS[nextIndex];
-    setActiveTab(nextTab);
-    tabRefs.current[nextTab]?.focus();
-  }, []);
-
   if (!report) {
     return (
-      <div data-openbitfun-component="session-usage-panel" data-openbitfun-part="root" data-openbitfun-state="fallback" className="session-usage-panel session-usage-panel--fallback">
-        <div className="session-usage-panel__fallback-toolbar" data-openbitfun-component="session-usage-panel" data-openbitfun-part="header">
+      <div data-openbitfun-product-component="session-usage-panel" data-openbitfun-product-part="root" data-openbitfun-state="fallback" className="session-usage-panel session-usage-panel--fallback">
+        <div className="session-usage-panel__fallback-toolbar" data-openbitfun-product-component="session-usage-panel" data-openbitfun-product-part="header">
           <Tooltip content={copied ? t('usage.actions.copied') : t('usage.actions.copyMarkdown')}>
             <IconButton
               size="sm"
@@ -188,8 +160,8 @@ export const SessionUsagePanel: React.FC<SessionUsagePanelProps> = ({
   );
 
   return (
-    <div data-openbitfun-component="session-usage-panel" data-openbitfun-part="root" data-openbitfun-tab={activeTab} className="session-usage-panel">
-      <header className="session-usage-panel__header" data-openbitfun-component="session-usage-panel" data-openbitfun-part="header">
+    <div data-openbitfun-product-component="session-usage-panel" data-openbitfun-product-part="root" data-openbitfun-tab={activeTab} className="session-usage-panel">
+      <header className="session-usage-panel__header" data-openbitfun-product-component="session-usage-panel" data-openbitfun-product-part="header">
         <div className="session-usage-panel__title-wrap">
           <div className="session-usage-panel__title-main">
             <h2>{t('usage.title')}</h2>
@@ -238,43 +210,32 @@ export const SessionUsagePanel: React.FC<SessionUsagePanelProps> = ({
         </div>
       </header>
 
-      <nav
+      <TabGroup
         className="session-usage-panel__tabs"
-        data-openbitfun-component="session-usage-panel"
-        data-openbitfun-part="tabs"
-        role="tablist"
-        aria-orientation="horizontal"
+        data-openbitfun-product-component="session-usage-panel"
+        data-openbitfun-product-part="tabs"
         aria-label={t('usage.panel.tabsLabel')}
-      >
-        {TABS.map(tab => (
-          <button
-            key={tab}
-            ref={node => {
-              tabRefs.current[tab] = node;
-            }}
-            id={tabId(tab)}
-            type="button"
-            role="tab"
-            aria-selected={activeTab === tab}
-            aria-controls={tabPanelId(tab)}
-            tabIndex={activeTab === tab ? 0 : -1}
-            className={`session-usage-panel__tab${activeTab === tab ? ' session-usage-panel__tab--active' : ''}`}
-            data-openbitfun-component="session-usage-panel"
-            data-openbitfun-part="tab"
-            data-openbitfun-tab={tab}
-            data-openbitfun-state={activeTab === tab ? 'active' : undefined}
-            onClick={() => setActiveTab(tab)}
-            onKeyDown={event => handleTabKeyDown(event, tab)}
-          >
-            {t(`usage.tabs.${tab}`)}
-          </button>
-        ))}
-      </nav>
+        value={activeTab}
+        onValueChange={value => setActiveTab(value as SessionUsagePanelTab)}
+        items={TABS.map(tab => ({
+          value: tab,
+          id: tabId(tab),
+          panelId: tabPanelId(tab),
+          label: t(`usage.tabs.${tab}`),
+          tabProps: {
+            className: `session-usage-panel__tab${activeTab === tab ? ' session-usage-panel__tab--active' : ''}`,
+            'data-openbitfun-product-component': 'session-usage-panel',
+            'data-openbitfun-product-part': 'tab',
+            'data-openbitfun-tab': tab,
+            'data-openbitfun-state': activeTab === tab ? 'active' : undefined,
+          },
+        }))}
+      />
 
       <main
         className="session-usage-panel__body"
-        data-openbitfun-component="session-usage-panel"
-        data-openbitfun-part="body"
+        data-openbitfun-product-component="session-usage-panel"
+        data-openbitfun-product-part="body"
         data-openbitfun-tab={activeTab}
         role="tabpanel"
         id={tabPanelId(activeTab)}
@@ -337,7 +298,7 @@ function UsageMetaRow({
   onCopy?: () => void;
 }) {
   return (
-    <div data-openbitfun-component="session-usage-panel" data-openbitfun-part="metaRow" className="session-usage-panel__meta-row">
+    <div data-openbitfun-product-component="session-usage-panel" data-openbitfun-product-part="metaRow" className="session-usage-panel__meta-row">
       <span className="session-usage-panel__meta-label">{label}</span>
       <OverflowText className="session-usage-panel__meta-value" title={value}>{value}</OverflowText>
       {onCopy && copyLabel && (
@@ -621,7 +582,7 @@ function UsageOverview({ report }: { report: SessionUsageReport }) {
   ];
 
   return (
-    <section data-openbitfun-component="session-usage-panel" data-openbitfun-part="section" className="session-usage-panel__section">
+    <section data-openbitfun-product-component="session-usage-panel" data-openbitfun-product-part="section" className="session-usage-panel__section">
       {report.coverage.level !== 'complete' && (
         <div className="session-usage-panel__notice">
           <AlertTriangle size={14} aria-hidden />
@@ -633,7 +594,7 @@ function UsageOverview({ report }: { report: SessionUsageReport }) {
         {metrics.map(metric => {
           const Icon = metric.icon;
           return (
-            <div data-openbitfun-component="session-usage-panel" data-openbitfun-part="metric" className="session-usage-panel__overview-metric" key={metric.key}>
+            <div data-openbitfun-product-component="session-usage-panel" data-openbitfun-product-part="metric" className="session-usage-panel__overview-metric" key={metric.key}>
               <Icon size={16} aria-hidden />
               <div>
                 <span>{metric.label}</span>
@@ -952,7 +913,7 @@ function UsageFiles({
   }), [handleJumpToFileTurn, handleOpenFileDiff, openingDiffKey, redactPaths, report.files.files, report.files.scope, sessionId, t, workspacePath]);
 
   return (
-    <section data-openbitfun-component="session-usage-panel" data-openbitfun-part="section" className="session-usage-panel__section">
+    <section data-openbitfun-product-component="session-usage-panel" data-openbitfun-product-part="section" className="session-usage-panel__section">
       <div className="session-usage-panel__scope-line">
         <span>{t('usage.panel.fileScope')}</span>
         <UsageValue
@@ -983,7 +944,7 @@ function UsageFiles({
 function UsageErrors({ report, sessionId }: { report: SessionUsageReport; sessionId?: string }) {
   const { t } = useTranslation('flow-chat');
   return (
-    <section data-openbitfun-component="session-usage-panel" data-openbitfun-part="section" className="session-usage-panel__section">
+    <section data-openbitfun-product-component="session-usage-panel" data-openbitfun-product-part="section" className="session-usage-panel__section">
       <div className="session-usage-panel__scope-line">
         <span>{t('usage.panel.errorScope')}</span>
         <UsageValue
@@ -1106,7 +1067,7 @@ function UsageSlowest({ report, sessionId }: { report: SessionUsageReport; sessi
   }, [sessionId]);
 
   return (
-    <section data-openbitfun-component="session-usage-panel" data-openbitfun-part="section" className="session-usage-panel__section">
+    <section data-openbitfun-product-component="session-usage-panel" data-openbitfun-product-part="section" className="session-usage-panel__section">
       <div className="session-usage-panel__scope-line">
         <span>{t('usage.sections.slowest')}</span>
         <UsageValue
@@ -1259,7 +1220,7 @@ function UsageTable({ empty, emptyLabel, emptyDescription, emptyHelp, headers, r
 
   if (empty) {
     return (
-      <div data-openbitfun-component="session-usage-panel" data-openbitfun-part="empty" className="session-usage-panel__empty">
+      <div data-openbitfun-product-component="session-usage-panel" data-openbitfun-product-part="empty" className="session-usage-panel__empty">
         <UsageValue value={emptyLabel} help={emptyHelp} strong />
         {emptyDescription && <span>{emptyDescription}</span>}
       </div>
@@ -1273,7 +1234,7 @@ function UsageTable({ empty, emptyLabel, emptyDescription, emptyHelp, headers, r
 
   return (
     <>
-      <div data-openbitfun-component="session-usage-panel" data-openbitfun-part="table" className="session-usage-panel__table-wrap">
+      <div data-openbitfun-product-component="session-usage-panel" data-openbitfun-product-part="table" className="session-usage-panel__table-wrap">
         <table className={['session-usage-panel__table', tableClassName].filter(Boolean).join(' ')}>
           <thead>
             <tr>
diff --git a/src/web-ui/src/flow_chat/components/usage/appearance.ts b/src/web-ui/src/flow_chat/components/usage/appearance.ts
index afb177faa0..e6af481546 100644
--- a/src/web-ui/src/flow_chat/components/usage/appearance.ts
+++ b/src/web-ui/src/flow_chat/components/usage/appearance.ts
@@ -2,6 +2,7 @@ import type { AppearanceSurfaceDescriptor } from '@/infrastructure/appearance';
 
 export const sessionUsagePanelAppearanceDescriptor: AppearanceSurfaceDescriptor = {
   id: 'session-usage-panel',
+  componentAttribute: 'data-openbitfun-product-component',
   parts: [
     { id: 'root' },
     { id: 'header' },
diff --git a/src/web-ui/src/infrastructure/appearance/compiler/AppearanceCompiler.test.ts b/src/web-ui/src/infrastructure/appearance/compiler/AppearanceCompiler.test.ts
index 398a14fa13..c5a2685ddd 100644
--- a/src/web-ui/src/infrastructure/appearance/compiler/AppearanceCompiler.test.ts
+++ b/src/web-ui/src/infrastructure/appearance/compiler/AppearanceCompiler.test.ts
@@ -1011,7 +1011,7 @@ describe('AppearanceCompiler', () => {
     expect(snapshot.cssText).toContain('[data-openbitfun-component="remote-connect-dialog"][data-openbitfun-part="sidebar"]');
     expect(snapshot.cssText).toContain('[data-openbitfun-component="remote-connect-dialog"][data-openbitfun-part="overviewAction"][data-openbitfun-group="account"][data-openbitfun-state~="authenticated"]');
     expect(snapshot.cssText).toContain('[data-openbitfun-scene="agents"][data-openbitfun-part="catalogGrid"]');
-    expect(snapshot.cssText).toContain('[data-openbitfun-component="session-usage-panel"][data-openbitfun-part="tab"][data-openbitfun-tab="models"][data-openbitfun-state~="active"]');
+    expect(snapshot.cssText).toContain('[data-openbitfun-product-component="session-usage-panel"][data-openbitfun-product-part="tab"][data-openbitfun-tab="models"][data-openbitfun-state~="active"]');
     expect(snapshot.cssText).toContain('[data-openbitfun-component="acp-agents-config"][data-openbitfun-part="root"][data-openbitfun-view="json"]');
     expect(snapshot.cssText).toContain('[data-openbitfun-component="acp-agents-config"][data-openbitfun-part="remoteServer"]');
     expect(snapshot.cssText).toContain('[data-openbitfun-component="tiptap-editor"][data-openbitfun-part="inlineAiPanel"]');
diff --git a/src/web-ui/src/infrastructure/config/components/AppearanceMarketDialog.test.tsx b/src/web-ui/src/infrastructure/config/components/AppearanceMarketDialog.test.tsx
index 716cb0e8c0..023b8d4d1f 100644
--- a/src/web-ui/src/infrastructure/config/components/AppearanceMarketDialog.test.tsx
+++ b/src/web-ui/src/infrastructure/config/components/AppearanceMarketDialog.test.tsx
@@ -31,7 +31,7 @@ const mocks = vi.hoisted(() => ({
     me: {
       user: { githubId: 1, login: 'reviewer', avatarUrl: '' },
       isAdmin: true,
-    },
+    } as { user: { githubId: number; login: string; avatarUrl: string }; isAdmin: boolean } | null,
   },
 }));
 
@@ -39,7 +39,9 @@ vi.mock('react-i18next', () => ({
   useTranslation: () => ({ t: (key: string) => key }),
 }));
 
-vi.mock('@openbitfun/ui', () => ({
+vi.mock('@openbitfun/ui', async (importOriginal) => ({
+  NavigationPanelItem: (await importOriginal<typeof import('@openbitfun/ui')>()).NavigationPanelItem,
+  DialogHeaderActions: (await importOriginal<typeof import('@openbitfun/ui')>()).DialogHeaderActions,
   ScrollArea: ({ children, ...props }: React.HTMLAttributes<HTMLDivElement>) => <div {...props}>{children}</div>,
   Icon: ({ name, ...props }: { name: string } & React.HTMLAttributes<HTMLSpanElement>) => <span data-icon={name} {...props} />,
   OverflowText: ({ children, behavior: _behavior, marqueeActive: _marqueeActive, ...props }: any) => <span {...props}>{children}</span>,
@@ -102,7 +104,7 @@ vi.mock('@/infrastructure/confirm-dialog', () => ({
 }));
 
 vi.mock('@/features/market-account', () => ({
-  AccountIdentityControls: () => <div data-testid="shared-market-account-controls" />,
+  AccountIdentityControls: () => <button type="button" data-testid="shared-market-account-controls">@reviewer</button>,
 }));
 
 vi.mock('@/infrastructure/account-identity', () => ({
@@ -189,6 +191,10 @@ describe('AppearanceMarketDialog', () => {
   let root: ReturnType<typeof createRoot>;
 
   beforeEach(() => {
+    mocks.accountState.me = {
+      user: { githubId: 1, login: 'reviewer', avatarUrl: '' }, isAdmin: true,
+    };
+    mocks.accountState.status = 'signed-in';
     mocks.getCachedPage.mockReset();
     mocks.browse.mockReset().mockResolvedValue({ items: [summary] });
     mocks.getListing.mockReset().mockResolvedValue({
@@ -255,6 +261,11 @@ describe('AppearanceMarketDialog', () => {
     });
     await vi.waitFor(() => expect(container.textContent).toContain('Tokyo Night'));
     expect(container.querySelector('[data-testid="shared-market-account-controls"]')).not.toBeNull();
+    expect(container.querySelector('h2')?.textContent).toBe('package.market.title');
+    const accountControls = container.querySelector('[data-testid="shared-market-account-controls"]')!;
+    const headerActions = accountControls.closest('[data-openbitfun-part="header-actions"]');
+    expect(headerActions).not.toBeNull();
+    expect(headerActions?.querySelector('button[aria-label="Close"]')).not.toBeNull();
     expect(container.textContent).toContain('package.market.updateAvailable');
 
     const listingButton = [...container.querySelectorAll('button')]
@@ -288,6 +299,11 @@ describe('AppearanceMarketDialog', () => {
     });
     expect(mocks.activate).not.toHaveBeenCalled();
     expect(container.textContent).toContain('package.market.noAutoApply');
+    const browse = container.querySelector<HTMLButtonElement>('.appearance-market__nav [aria-current="page"]')!;
+    expect(browse.textContent).toBe('package.market.views.browse');
+    await act(async () => browse.querySelector<HTMLElement>('[data-openbitfun-part="label"]')!.click());
+    expect(container.querySelector('.appearance-market__detail')).toBeNull();
+    expect(container.querySelector('.appearance-market__browse')).not.toBeNull();
   });
 
   it('holds the grid with placeholder cards while the first page loads', async () => {
@@ -400,19 +416,62 @@ describe('AppearanceMarketDialog', () => {
 
     const submissionsTab = [...container.querySelectorAll('button')]
       .find(button => button.textContent === 'package.market.views.submissions');
-    await act(async () => submissionsTab?.click());
+    await act(async () => submissionsTab?.querySelector<HTMLElement>('[data-openbitfun-part="label"]')?.click());
     await vi.waitFor(() => expect(container.textContent).toContain('Tokyo Night candidate'));
     expect(mocks.listSubmissions).toHaveBeenCalledOnce();
+    expect(submissionsTab?.getAttribute('aria-current')).toBe('page');
+    await act(async () => submissionsTab?.click());
+    expect(mocks.listSubmissions).toHaveBeenCalledOnce();
 
     const reviewTab = [...container.querySelectorAll('button')]
       .find(button => button.textContent === 'package.market.views.review');
     await act(async () => reviewTab?.click());
     await vi.waitFor(() => expect(mocks.getReviewSubmission).toHaveBeenCalledWith('submission-1'));
     expect(mocks.listReviewSubmissions).toHaveBeenCalledOnce();
+    expect(reviewTab?.getAttribute('aria-current')).toBe('page');
     expect(container.textContent).toContain('package.market.review.approve');
     expect(container.textContent).toContain('package.market.review.reject');
   });
 
+  it.each([
+    { signedIn: false, admin: false, count: 1 },
+    { signedIn: true, admin: false, count: 2 },
+    { signedIn: true, admin: true, count: 3 },
+  ])('keeps navigation visibility for account state $signedIn / admin $admin', async ({ signedIn, admin, count }) => {
+    mocks.accountState.me = signedIn ? {
+      user: { githubId: 1, login: 'member', avatarUrl: '' }, isAdmin: admin,
+    } : null;
+    mocks.accountState.status = signedIn ? 'signed-in' : 'signed-out';
+    const onClose = vi.fn();
+    await act(async () => root.render(<AppearanceMarketDialog isOpen onClose={onClose} />));
+    const nav = container.querySelector('nav')!;
+    const buttons = nav.querySelectorAll('button');
+    expect(buttons).toHaveLength(count);
+    expect(nav.querySelectorAll('[data-openbitfun-component="action-item"]')).toHaveLength(count);
+    expect(nav.querySelectorAll('[aria-current="page"]')).toHaveLength(1);
+    expect(nav.querySelector('[role="tab"]')).toBeNull();
+    expect(nav.querySelector('[data-overflow-behavior]')).toBeNull();
+    await act(async () => buttons[0].click());
+    expect(onClose).not.toHaveBeenCalled();
+  });
+
+  it('returns to browse when account permissions remove the active navigation entry', async () => {
+    const onClose = vi.fn();
+    await act(async () => root.render(<AppearanceMarketDialog isOpen onClose={onClose} />));
+    const review = [...container.querySelectorAll<HTMLButtonElement>('nav button')]
+      .find(button => button.textContent === 'package.market.views.review')!;
+    await act(async () => review.click());
+    expect(review.getAttribute('aria-current')).toBe('page');
+    mocks.accountState.me = { ...mocks.accountState.me!, isAdmin: false };
+    await act(async () => root.render(<AppearanceMarketDialog isOpen onClose={onClose} />));
+    expect(container.querySelectorAll('nav button')).toHaveLength(2);
+    expect(container.querySelector('nav [aria-current="page"]')?.textContent).toBe('package.market.views.browse');
+    mocks.accountState.me = null;
+    await act(async () => root.render(<AppearanceMarketDialog isOpen onClose={onClose} />));
+    expect(container.querySelectorAll('nav button')).toHaveLength(1);
+    expect(onClose).not.toHaveBeenCalled();
+  });
+
   it('shows a moderated Skin as unpublished instead of approved', async () => {
     mocks.listSubmissions.mockResolvedValue([{
       submissionId: 'submission-unpublished',
diff --git a/src/web-ui/src/infrastructure/config/components/AppearanceMarketDialog.tsx b/src/web-ui/src/infrastructure/config/components/AppearanceMarketDialog.tsx
index 3f03fbcb64..204f078789 100644
--- a/src/web-ui/src/infrastructure/config/components/AppearanceMarketDialog.tsx
+++ b/src/web-ui/src/infrastructure/config/components/AppearanceMarketDialog.tsx
@@ -1,5 +1,6 @@
 import { OverflowText,
   Button,
+  NavigationPanelItem,
   Icon,
   ScrollArea,
   SearchField,
@@ -8,6 +9,7 @@ import { OverflowText,
   DialogBody,
   DialogClose,
   DialogHeader,
+  DialogHeaderActions,
   DialogHeading,
   DialogTitle,
 } from '@openbitfun/ui';
@@ -456,11 +458,14 @@ export function AppearanceMarketDialog({ isOpen, onClose }: AppearanceMarketDial
       size="xl"
       data-testid="appearance-market-dialog"
     >
-      <DialogHeader>
+      <DialogHeader className="appearance-market__dialog-header">
         <DialogHeading>
-          <DialogTitle>{t('package.market.title')}{<AccountIdentityControls />}</DialogTitle>
+          <DialogTitle>{t('package.market.title')}</DialogTitle>
         </DialogHeading>
-        <DialogClose />
+        <DialogHeaderActions>
+          <AccountIdentityControls />
+          <DialogClose />
+        </DialogHeaderActions>
       </DialogHeader>
       <DialogBody>
         <div className="appearance-market__modal">
@@ -475,33 +480,42 @@ export function AppearanceMarketDialog({ isOpen, onClose }: AppearanceMarketDial
           data-openbitfun-part="marketNav"
           aria-label={t('package.market.views.label')}
         >
-          <button
+          <NavigationPanelItem
             type="button"
+            labelBehavior="static"
+            className="appearance-market__nav-item"
+            selected={view === 'browse'}
             data-active={view === 'browse' || undefined}
             aria-current={view === 'browse' ? 'page' : undefined}
             onClick={() => selectView('browse')}
           >
             {t('package.market.views.browse')}
-          </button>
+          </NavigationPanelItem>
           {account.me && (
-            <button
+            <NavigationPanelItem
               type="button"
+              labelBehavior="static"
+              className="appearance-market__nav-item"
+              selected={view === 'submissions'}
               data-active={view === 'submissions' || undefined}
               aria-current={view === 'submissions' ? 'page' : undefined}
               onClick={() => selectView('submissions')}
             >
               {t('package.market.views.submissions')}
-            </button>
+            </NavigationPanelItem>
           )}
           {account.me?.isAdmin && (
-            <button
+            <NavigationPanelItem
               type="button"
+              labelBehavior="static"
+              className="appearance-market__nav-item"
+              selected={view === 'review'}
               data-active={view === 'review' || undefined}
               aria-current={view === 'review' ? 'page' : undefined}
               onClick={() => selectView('review')}
             >
               {t('package.market.views.review')}
-            </button>
+            </NavigationPanelItem>
           )}
         </nav>
         {view !== 'browse' ? <AppearanceMarketWorkflows workflow={view} /> : detail ? renderDetail() : (
diff --git a/src/web-ui/src/infrastructure/config/components/AppearanceSettingsPage.scss b/src/web-ui/src/infrastructure/config/components/AppearanceSettingsPage.scss
index 9ba5fcf1b1..c35d4b4593 100644
--- a/src/web-ui/src/infrastructure/config/components/AppearanceSettingsPage.scss
+++ b/src/web-ui/src/infrastructure/config/components/AppearanceSettingsPage.scss
@@ -338,6 +338,10 @@
 
 }
 
+.appearance-market__dialog-header {
+  align-items: center;
+}
+
 /* Fixed height: every view scrolls internally so the dialog never resizes while loading. */
 .appearance-market__modal {
   min-height: min(720px, 78vh);
@@ -359,7 +363,20 @@
     padding-bottom: var(--openbitfun-space-2);
     border-bottom: 1px solid var(--openbitfun-color-border-default);
 
-    button {
+    .appearance-market__nav-item {
+      inline-size: auto;
+      min-inline-size: min-content;
+      min-block-size: 0;
+      align-items: stretch;
+      padding: 0;
+      gap: 0;
+      border-radius: var(--openbitfun-radius-sm);
+      background: transparent;
+      box-shadow: none;
+      transition: none;
+    }
+
+    .appearance-market__nav-item > [data-openbitfun-part='trigger'] {
       padding: var(--openbitfun-space-2) var(--openbitfun-space-3);
       border: 0;
       border-radius: var(--openbitfun-radius-sm);
@@ -367,8 +384,19 @@
       color: var(--openbitfun-color-content-secondary);
       font: inherit;
       font-size: var(--openbitfun-type-label-md-font-size);
+      text-align: center;
+      white-space: normal;
       cursor: pointer;
 
+      @layer openbitfun.components {
+        outline: revert-layer;
+      }
+
+      > [data-openbitfun-part='label'] {
+        font: inherit;
+        letter-spacing: inherit;
+      }
+
       &:hover {
         background: var(--openbitfun-color-surface-subtle);
         color: var(--openbitfun-color-content-primary);
diff --git a/src/web-ui/src/shared/ui/OverflowText.test.tsx b/src/web-ui/src/shared/ui/OverflowText.test.tsx
index 6388037812..1e6d634492 100644
--- a/src/web-ui/src/shared/ui/OverflowText.test.tsx
+++ b/src/web-ui/src/shared/ui/OverflowText.test.tsx
@@ -75,6 +75,28 @@ describe('overflow text full-content access', () => {
     expect(button.getAttribute('aria-describedby')).toBe('help');
   });
 
+  it('keeps interaction-only ellipsis idle on virtual selection and reveals full text on focus', () => {
+    render(<button data-overflow-trigger data-overflow-active="true">
+      <OverflowText overflowStyle="ellipsis" marqueeTrigger="interaction" marqueeActive>
+        {longLabel}
+      </OverflowText>
+    </button>);
+    const label = host.querySelector<HTMLElement>('[data-overflow]')!;
+    expect(label.getAttribute('data-overflow')).toBe('true');
+    expect(label.getAttribute('data-marquee-active')).toBeNull();
+    reveal();
+    expect(tooltip()).toBeNull();
+    act(() => host.querySelector('button')!.focus());
+    reveal();
+    expect(tooltip()?.textContent).toBe(longLabel);
+    act(() => {
+      availableWidth = 1000;
+      resizeCallbacks.forEach(callback => callback());
+    });
+    expect(label.getAttribute('data-overflow')).toBe('false');
+    expect(tooltip()).toBeNull();
+  });
+
   it('keeps the command tooltip open when portal enter precedes native trigger leave', () => {
     render(<CommandToolCard action="Run" command={longLabel} emptyCommand="Empty" isExpanded={false} status="completed" />);
     expect(host.querySelector('[title]')).toBeNull();