@xenide-io/the-old-ui-theme 0.6.13 → 0.7.0

package/dist/{chunk-E5ZBQYEX.mjs → chunk-KDR6HI6F.mjs}

@@ -170,7 +170,9 @@ var IconPlayCircle = createIconBase({
   )
 });
 var IconGridView = createIconBase({
-  paths: fill("M3 3v8h8V3H3zm6 6H5V5h4v4zm-6 4v8h8v-8H3zm6 6H5v-4h4v4zm4-16v8h8V3h-8zm6 6h-4V5h4v4zm-6 4v8h8v-8h-8zm6 6h-4v-4h4v4z")
+  paths: fill(
+    "M3,3v8h8V3H3z M9,9H5V5h4V9z M3,13v8h8v-8H3z M9,19H5v-4h4V19z M13,3v8h8V3H13z M19,9h-4V5h4V9z M13,13v8h8v-8H13z M19,19h-4v-4h4V19z"
+  )
 });
 var IconListView = createIconBase({
   paths: fill(

package/dist/{chunk-VOCHIR3W.mjs → chunk-VXISSXTB.mjs}

@@ -17,7 +17,7 @@ import {
   IconSearch,
   IconTuning,
   cn
-} from "./chunk-E5ZBQYEX.mjs";
+} from "./chunk-KDR6HI6F.mjs";
 import {
   __objRest,
   __spreadProps,

package/dist/index.js

@@ -480,7 +480,9 @@ var IconPlayCircle = createIconBase({
   )
 });
 var IconGridView = createIconBase({
-  paths: fill("M3 3v8h8V3H3zm6 6H5V5h4v4zm-6 4v8h8v-8H3zm6 6H5v-4h4v4zm4-16v8h8V3h-8zm6 6h-4V5h4v4zm-6 4v8h8v-8h-8zm6 6h-4v-4h4v4z")
+  paths: fill(
+    "M3,3v8h8V3H3z M9,9H5V5h4V9z M3,13v8h8v-8H3z M9,19H5v-4h4V19z M13,3v8h8V3H13z M19,9h-4V5h4V9z M13,13v8h8v-8H13z M19,19h-4v-4h4V19z"
+  )
 });
 var IconListView = createIconBase({
   paths: fill(

package/dist/index.mjs

@@ -63,7 +63,7 @@ import {
   isThemeId,
   persistTheme,
   readStoredTheme
-} from "./chunk-VOCHIR3W.mjs";
+} from "./chunk-VXISSXTB.mjs";
 import {
   ButtonChrome,
   CANONICAL_ICONS,
@@ -157,7 +157,7 @@ import {
   TooltipProvider,
   createIconBase,
   createIconBasePath
-} from "./chunk-E5ZBQYEX.mjs";
+} from "./chunk-KDR6HI6F.mjs";
 import "./chunk-FWCSY2DS.mjs";
 export {
   Accordion,

package/dist/suite.d.mts

@@ -170,7 +170,6 @@ type SuiteSpinnerComponent = ComponentType<{
 
 declare function appSwitcherTriggerClass(open: boolean, collapsed?: boolean): string;
 declare function appSwitcherMarkClass(): string;
-/** No sticky Radix highlight while waiting for cross-app redirect. */
 declare function appSwitcherMenuItemClass(): string;
 declare function AppSwitcherMark({ children, collapsed, }: {
     children: ReactNode;
@@ -186,6 +185,10 @@ interface SuiteAppEntry {
     description: string;
     icon: string;
 }
+interface SuiteAppSelectOptions {
+    /** Open the handoff in a separate browser tab when requested by a caller. */
+    newTab?: boolean;
+}
 /**
  * Suite app switcher dropdown. Apps inject their brand mark/title, the
  * visible app list, the cross-app navigation handler, and the theme
@@ -194,7 +197,7 @@ interface SuiteAppEntry {
 declare function AppSwitcher({ apps, currentApp, onSelect, mark, title, collapsed, dropdownMenu: DropdownMenu, dropdownItem: DropdownItem, triggerId, triggerDataTest, }: {
     apps: SuiteAppEntry[];
     currentApp: string;
-    onSelect: (app: SuiteAppEntry) => void;
+    onSelect: (app: SuiteAppEntry, options?: SuiteAppSelectOptions) => void;
     mark: ReactNode;
     title: ReactNode;
     collapsed?: boolean;
@@ -984,4 +987,4 @@ interface SuiteAppLayoutProps {
  */
 declare function SuiteAppLayout({ sidebar, children, mobileHeader, bottomNav, sidebarWidth, collapsed, lockMainScroll, onStartResize, onResizeBy, onResetWidth, className, }: SuiteAppLayoutProps): react.JSX.Element;
 
-export { APP_ACCENTS, APP_GLYPHS, AnimatedMoon, AnimatedSun, AppSwitcher, AppSwitcherChevron, AppSwitcherMark, CommandPaletteHost, DeferredChrome, SIDEBAR_COLLAPSE_THRESHOLD, SIDEBAR_DEFAULT_WIDTH, SIDEBAR_MAX_WIDTH, SIDEBAR_MIN_EXPANDED_WIDTH, SIDEBAR_RAIL_WIDTH, SUITE_APPS, SUITE_APP_MAP, SUITE_ASK_AI_OPEN_KEY, SUITE_ASK_AI_OPEN_QUERY, SUITE_GLYPHS, SUITE_ICON_NAMES, SUITE_MUTATED_EVENT, SUITE_OPEN_ASK_AI_EVENT, SUITE_SIDEBAR_WIDTH_COOKIE, SUITE_SIDEBAR_WIDTH_KEY, SUITE_SPRINGS, SourceAppGlyph, type SuiteAccentSlug, type SuiteAiAction, type SuiteAiActionStatus, type SuiteAiChatMessage, SuiteAiPanel, type SuiteAiPreset, type SuiteAppAccent, type SuiteAppDefinition, type SuiteAppEntry, SuiteAppIcon, type SuiteAppIconProps, SuiteAppLayout, type SuiteAppLayoutProps, type SuiteAppSlug, SuiteAppStrip, type SuiteAskAiOpenDetail, SuiteBottomNav, type SuiteBottomNavItem, SuiteBreadcrumbs, type SuiteBreadcrumbsProps, type SuiteCommandItem, type SuiteCommandPaletteComponent, type SuiteDropdownItemComponent, type SuiteDropdownMenuComponent, type SuiteDropdownMenuProps, SuiteEmptyState, type SuiteGlyph, type SuiteGlyphElement, type SuiteHrefTarget, SuiteIcon, type SuiteIconName, type SuiteIconProps, SuiteMobileDrawer, SuiteMobileHeader, SuiteMotionProvider, type SuiteNotification, SuiteNotificationBell, type SuiteNotificationsResponse, SuitePage, SuitePageHeader, type SuitePageWidth, type SuiteResolvedTheme, SuiteSectionHeader, SuiteSettingsLayout, type SuiteSettingsLayoutProps, SuiteSettingsMobileNav, type SuiteSettingsNavItem, SuiteSidebar, type SuiteSidebarNavItem, SuiteSkeleton, SuiteSkeletonCard, SuiteSkeletonList, type SuiteSpinnerComponent, type SuiteSpringName, SuiteTabList, type SuiteTheme, type SuiteThemeConfig, type SuiteThemeContextValue, SuiteThemeProvider, SuiteToolbar, SuiteUserMenu, type SuiteUserMenuProps, type SuiteWorkspaceEntry, type SuiteWorkspaceGroup, SuiteWorkspaceSwitcher, TURTLETIME_TIMER_MUTATED_EVENT, TodayAskAiCard, TodayCalibrating, TodayEmptyAction, TodayEmptyState, TodayHero, TodayLayout, TodayPageFrame, TodayPanel, type TodayPrimaryAccent, TodayPrimaryAction, TodaySection, TodayTimeIcon, TodayTopBar, appSwitcherMarkClass, appSwitcherMenuItemClass, appSwitcherTriggerClass, classifySuiteHref, cn, consumePendingAskAiPrompt, consumeSuiteAskAiOpenFromLocation, getTodayGreeting, openSuiteAskAi, pathWithSuiteAskAiOpen, persistSidebarWidth, persistSuiteAskAiOpen, readSidebarWidth, readSuiteAskAiOpen, resetSuiteSidebarWidth, resolveSuiteNotificationHref, sidebarColumnWidth, sourceToSuiteApp, suiteAppBaseUrl, suiteAppLabel, useIdleMount, useSidebarWidth, useSuiteTheme };
+export { APP_ACCENTS, APP_GLYPHS, AnimatedMoon, AnimatedSun, AppSwitcher, AppSwitcherChevron, AppSwitcherMark, CommandPaletteHost, DeferredChrome, SIDEBAR_COLLAPSE_THRESHOLD, SIDEBAR_DEFAULT_WIDTH, SIDEBAR_MAX_WIDTH, SIDEBAR_MIN_EXPANDED_WIDTH, SIDEBAR_RAIL_WIDTH, SUITE_APPS, SUITE_APP_MAP, SUITE_ASK_AI_OPEN_KEY, SUITE_ASK_AI_OPEN_QUERY, SUITE_GLYPHS, SUITE_ICON_NAMES, SUITE_MUTATED_EVENT, SUITE_OPEN_ASK_AI_EVENT, SUITE_SIDEBAR_WIDTH_COOKIE, SUITE_SIDEBAR_WIDTH_KEY, SUITE_SPRINGS, SourceAppGlyph, type SuiteAccentSlug, type SuiteAiAction, type SuiteAiActionStatus, type SuiteAiChatMessage, SuiteAiPanel, type SuiteAiPreset, type SuiteAppAccent, type SuiteAppDefinition, type SuiteAppEntry, SuiteAppIcon, type SuiteAppIconProps, SuiteAppLayout, type SuiteAppLayoutProps, type SuiteAppSelectOptions, type SuiteAppSlug, SuiteAppStrip, type SuiteAskAiOpenDetail, SuiteBottomNav, type SuiteBottomNavItem, SuiteBreadcrumbs, type SuiteBreadcrumbsProps, type SuiteCommandItem, type SuiteCommandPaletteComponent, type SuiteDropdownItemComponent, type SuiteDropdownMenuComponent, type SuiteDropdownMenuProps, SuiteEmptyState, type SuiteGlyph, type SuiteGlyphElement, type SuiteHrefTarget, SuiteIcon, type SuiteIconName, type SuiteIconProps, SuiteMobileDrawer, SuiteMobileHeader, SuiteMotionProvider, type SuiteNotification, SuiteNotificationBell, type SuiteNotificationsResponse, SuitePage, SuitePageHeader, type SuitePageWidth, type SuiteResolvedTheme, SuiteSectionHeader, SuiteSettingsLayout, type SuiteSettingsLayoutProps, SuiteSettingsMobileNav, type SuiteSettingsNavItem, SuiteSidebar, type SuiteSidebarNavItem, SuiteSkeleton, SuiteSkeletonCard, SuiteSkeletonList, type SuiteSpinnerComponent, type SuiteSpringName, SuiteTabList, type SuiteTheme, type SuiteThemeConfig, type SuiteThemeContextValue, SuiteThemeProvider, SuiteToolbar, SuiteUserMenu, type SuiteUserMenuProps, type SuiteWorkspaceEntry, type SuiteWorkspaceGroup, SuiteWorkspaceSwitcher, TURTLETIME_TIMER_MUTATED_EVENT, TodayAskAiCard, TodayCalibrating, TodayEmptyAction, TodayEmptyState, TodayHero, TodayLayout, TodayPageFrame, TodayPanel, type TodayPrimaryAccent, TodayPrimaryAction, TodaySection, TodayTimeIcon, TodayTopBar, appSwitcherMarkClass, appSwitcherMenuItemClass, appSwitcherTriggerClass, classifySuiteHref, cn, consumePendingAskAiPrompt, consumeSuiteAskAiOpenFromLocation, getTodayGreeting, openSuiteAskAi, pathWithSuiteAskAiOpen, persistSidebarWidth, persistSuiteAskAiOpen, readSidebarWidth, readSuiteAskAiOpen, resetSuiteSidebarWidth, resolveSuiteNotificationHref, sidebarColumnWidth, sourceToSuiteApp, suiteAppBaseUrl, suiteAppLabel, useIdleMount, useSidebarWidth, useSuiteTheme };

package/dist/suite.d.ts

@@ -170,7 +170,6 @@ type SuiteSpinnerComponent = ComponentType<{
 
 declare function appSwitcherTriggerClass(open: boolean, collapsed?: boolean): string;
 declare function appSwitcherMarkClass(): string;
-/** No sticky Radix highlight while waiting for cross-app redirect. */
 declare function appSwitcherMenuItemClass(): string;
 declare function AppSwitcherMark({ children, collapsed, }: {
     children: ReactNode;
@@ -186,6 +185,10 @@ interface SuiteAppEntry {
     description: string;
     icon: string;
 }
+interface SuiteAppSelectOptions {
+    /** Open the handoff in a separate browser tab when requested by a caller. */
+    newTab?: boolean;
+}
 /**
  * Suite app switcher dropdown. Apps inject their brand mark/title, the
  * visible app list, the cross-app navigation handler, and the theme
@@ -194,7 +197,7 @@ interface SuiteAppEntry {
 declare function AppSwitcher({ apps, currentApp, onSelect, mark, title, collapsed, dropdownMenu: DropdownMenu, dropdownItem: DropdownItem, triggerId, triggerDataTest, }: {
     apps: SuiteAppEntry[];
     currentApp: string;
-    onSelect: (app: SuiteAppEntry) => void;
+    onSelect: (app: SuiteAppEntry, options?: SuiteAppSelectOptions) => void;
     mark: ReactNode;
     title: ReactNode;
     collapsed?: boolean;
@@ -984,4 +987,4 @@ interface SuiteAppLayoutProps {
  */
 declare function SuiteAppLayout({ sidebar, children, mobileHeader, bottomNav, sidebarWidth, collapsed, lockMainScroll, onStartResize, onResizeBy, onResetWidth, className, }: SuiteAppLayoutProps): react.JSX.Element;
 
-export { APP_ACCENTS, APP_GLYPHS, AnimatedMoon, AnimatedSun, AppSwitcher, AppSwitcherChevron, AppSwitcherMark, CommandPaletteHost, DeferredChrome, SIDEBAR_COLLAPSE_THRESHOLD, SIDEBAR_DEFAULT_WIDTH, SIDEBAR_MAX_WIDTH, SIDEBAR_MIN_EXPANDED_WIDTH, SIDEBAR_RAIL_WIDTH, SUITE_APPS, SUITE_APP_MAP, SUITE_ASK_AI_OPEN_KEY, SUITE_ASK_AI_OPEN_QUERY, SUITE_GLYPHS, SUITE_ICON_NAMES, SUITE_MUTATED_EVENT, SUITE_OPEN_ASK_AI_EVENT, SUITE_SIDEBAR_WIDTH_COOKIE, SUITE_SIDEBAR_WIDTH_KEY, SUITE_SPRINGS, SourceAppGlyph, type SuiteAccentSlug, type SuiteAiAction, type SuiteAiActionStatus, type SuiteAiChatMessage, SuiteAiPanel, type SuiteAiPreset, type SuiteAppAccent, type SuiteAppDefinition, type SuiteAppEntry, SuiteAppIcon, type SuiteAppIconProps, SuiteAppLayout, type SuiteAppLayoutProps, type SuiteAppSlug, SuiteAppStrip, type SuiteAskAiOpenDetail, SuiteBottomNav, type SuiteBottomNavItem, SuiteBreadcrumbs, type SuiteBreadcrumbsProps, type SuiteCommandItem, type SuiteCommandPaletteComponent, type SuiteDropdownItemComponent, type SuiteDropdownMenuComponent, type SuiteDropdownMenuProps, SuiteEmptyState, type SuiteGlyph, type SuiteGlyphElement, type SuiteHrefTarget, SuiteIcon, type SuiteIconName, type SuiteIconProps, SuiteMobileDrawer, SuiteMobileHeader, SuiteMotionProvider, type SuiteNotification, SuiteNotificationBell, type SuiteNotificationsResponse, SuitePage, SuitePageHeader, type SuitePageWidth, type SuiteResolvedTheme, SuiteSectionHeader, SuiteSettingsLayout, type SuiteSettingsLayoutProps, SuiteSettingsMobileNav, type SuiteSettingsNavItem, SuiteSidebar, type SuiteSidebarNavItem, SuiteSkeleton, SuiteSkeletonCard, SuiteSkeletonList, type SuiteSpinnerComponent, type SuiteSpringName, SuiteTabList, type SuiteTheme, type SuiteThemeConfig, type SuiteThemeContextValue, SuiteThemeProvider, SuiteToolbar, SuiteUserMenu, type SuiteUserMenuProps, type SuiteWorkspaceEntry, type SuiteWorkspaceGroup, SuiteWorkspaceSwitcher, TURTLETIME_TIMER_MUTATED_EVENT, TodayAskAiCard, TodayCalibrating, TodayEmptyAction, TodayEmptyState, TodayHero, TodayLayout, TodayPageFrame, TodayPanel, type TodayPrimaryAccent, TodayPrimaryAction, TodaySection, TodayTimeIcon, TodayTopBar, appSwitcherMarkClass, appSwitcherMenuItemClass, appSwitcherTriggerClass, classifySuiteHref, cn, consumePendingAskAiPrompt, consumeSuiteAskAiOpenFromLocation, getTodayGreeting, openSuiteAskAi, pathWithSuiteAskAiOpen, persistSidebarWidth, persistSuiteAskAiOpen, readSidebarWidth, readSuiteAskAiOpen, resetSuiteSidebarWidth, resolveSuiteNotificationHref, sidebarColumnWidth, sourceToSuiteApp, suiteAppBaseUrl, suiteAppLabel, useIdleMount, useSidebarWidth, useSuiteTheme };
+export { APP_ACCENTS, APP_GLYPHS, AnimatedMoon, AnimatedSun, AppSwitcher, AppSwitcherChevron, AppSwitcherMark, CommandPaletteHost, DeferredChrome, SIDEBAR_COLLAPSE_THRESHOLD, SIDEBAR_DEFAULT_WIDTH, SIDEBAR_MAX_WIDTH, SIDEBAR_MIN_EXPANDED_WIDTH, SIDEBAR_RAIL_WIDTH, SUITE_APPS, SUITE_APP_MAP, SUITE_ASK_AI_OPEN_KEY, SUITE_ASK_AI_OPEN_QUERY, SUITE_GLYPHS, SUITE_ICON_NAMES, SUITE_MUTATED_EVENT, SUITE_OPEN_ASK_AI_EVENT, SUITE_SIDEBAR_WIDTH_COOKIE, SUITE_SIDEBAR_WIDTH_KEY, SUITE_SPRINGS, SourceAppGlyph, type SuiteAccentSlug, type SuiteAiAction, type SuiteAiActionStatus, type SuiteAiChatMessage, SuiteAiPanel, type SuiteAiPreset, type SuiteAppAccent, type SuiteAppDefinition, type SuiteAppEntry, SuiteAppIcon, type SuiteAppIconProps, SuiteAppLayout, type SuiteAppLayoutProps, type SuiteAppSelectOptions, type SuiteAppSlug, SuiteAppStrip, type SuiteAskAiOpenDetail, SuiteBottomNav, type SuiteBottomNavItem, SuiteBreadcrumbs, type SuiteBreadcrumbsProps, type SuiteCommandItem, type SuiteCommandPaletteComponent, type SuiteDropdownItemComponent, type SuiteDropdownMenuComponent, type SuiteDropdownMenuProps, SuiteEmptyState, type SuiteGlyph, type SuiteGlyphElement, type SuiteHrefTarget, SuiteIcon, type SuiteIconName, type SuiteIconProps, SuiteMobileDrawer, SuiteMobileHeader, SuiteMotionProvider, type SuiteNotification, SuiteNotificationBell, type SuiteNotificationsResponse, SuitePage, SuitePageHeader, type SuitePageWidth, type SuiteResolvedTheme, SuiteSectionHeader, SuiteSettingsLayout, type SuiteSettingsLayoutProps, SuiteSettingsMobileNav, type SuiteSettingsNavItem, SuiteSidebar, type SuiteSidebarNavItem, SuiteSkeleton, SuiteSkeletonCard, SuiteSkeletonList, type SuiteSpinnerComponent, type SuiteSpringName, SuiteTabList, type SuiteTheme, type SuiteThemeConfig, type SuiteThemeContextValue, SuiteThemeProvider, SuiteToolbar, SuiteUserMenu, type SuiteUserMenuProps, type SuiteWorkspaceEntry, type SuiteWorkspaceGroup, SuiteWorkspaceSwitcher, TURTLETIME_TIMER_MUTATED_EVENT, TodayAskAiCard, TodayCalibrating, TodayEmptyAction, TodayEmptyState, TodayHero, TodayLayout, TodayPageFrame, TodayPanel, type TodayPrimaryAccent, TodayPrimaryAction, TodaySection, TodayTimeIcon, TodayTopBar, appSwitcherMarkClass, appSwitcherMenuItemClass, appSwitcherTriggerClass, classifySuiteHref, cn, consumePendingAskAiPrompt, consumeSuiteAskAiOpenFromLocation, getTodayGreeting, openSuiteAskAi, pathWithSuiteAskAiOpen, persistSidebarWidth, persistSuiteAskAiOpen, readSidebarWidth, readSuiteAskAiOpen, resetSuiteSidebarWidth, resolveSuiteNotificationHref, sidebarColumnWidth, sourceToSuiteApp, suiteAppBaseUrl, suiteAppLabel, useIdleMount, useSidebarWidth, useSuiteTheme };

package/dist/suite.js

@@ -1370,43 +1370,53 @@ function AppSwitcher({
       ),
       children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { id: "app-switcher-menu", className: "p-1", "data-test": "app-switcher-menu", children: [
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "px-3 py-2 text-[10px] font-semibold uppercase tracking-[0.14em] text-ph-mutedtext", children: "Switch application" }),
-        apps.map((app) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-          DropdownItem2,
-          {
-            id: `switch-app-${app.slug}`,
-            "data-test": `switch-app-${app.slug}`,
-            onMouseDown: (e) => e.preventDefault(),
-            onClick: () => {
-              setOpen(false);
-              onSelect(app);
-            },
-            className: appSwitcherMenuItemClass(),
-            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "flex min-w-0 items-center gap-3", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-                import_image.default,
-                {
-                  src: app.icon,
-                  alt: "",
-                  width: 28,
-                  height: 28,
-                  className: "h-7 w-7 shrink-0 rounded-md object-contain"
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "min-w-0 flex-1", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "block truncate text-sm font-medium text-ph-ink", children: app.name }),
-                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "block truncate text-xs text-ph-mutedtext", children: app.description })
-              ] }),
-              app.slug === currentApp ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-                import_iconoir_react2.Check,
-                {
-                  className: "h-4 w-4 shrink-0 text-ph-brand",
-                  "aria-hidden": "true"
-                }
-              ) : null
-            ] })
-          },
-          app.slug
-        ))
+        apps.filter((app) => app.slug !== currentApp).map((app) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "relative", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            DropdownItem2,
+            {
+              id: `switch-app-${app.slug}`,
+              "data-test": `switch-app-${app.slug}`,
+              onMouseDown: (e) => e.preventDefault(),
+              onClick: () => {
+                setOpen(false);
+                onSelect(app);
+              },
+              className: cn(appSwitcherMenuItemClass(), "pr-11"),
+              children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "flex min-w-0 items-center gap-3", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                  import_image.default,
+                  {
+                    src: app.icon,
+                    alt: "",
+                    width: 28,
+                    height: 28,
+                    className: "h-7 w-7 shrink-0 rounded-md object-contain"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "min-w-0 flex-1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "block truncate text-sm font-medium text-ph-ink", children: app.name }),
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "block truncate text-xs text-ph-mutedtext", children: app.description })
+                ] })
+              ] })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            "button",
+            {
+              type: "button",
+              id: `switch-app-${app.slug}-new-tab`,
+              "data-test": `switch-app-${app.slug}-new-tab`,
+              "aria-label": `Open ${app.name} in a new tab`,
+              onMouseDown: (e) => e.preventDefault(),
+              onClick: () => {
+                setOpen(false);
+                onSelect(app, { newTab: true });
+              },
+              className: "absolute right-1.5 top-1/2 z-[1] flex h-8 w-8 -translate-y-1/2 items-center justify-center rounded-md text-ph-mutedtext transition-colors hover:bg-ph-muted hover:text-ph-ink focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ph-brand/35",
+              children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_iconoir_react2.OpenNewWindow, { className: "h-4 w-4", "aria-hidden": "true" })
+            }
+          )
+        ] }, app.slug))
       ] })
     }
   );
@@ -1636,16 +1646,16 @@ function SuiteNotificationBell({
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     DropdownMenu2,
     {
-      "aria-label": "Notifications",
+      "aria-label": unread > 0 ? `Notifications, ${unread} unread` : "Notifications",
       triggerId: triggerId != null ? triggerId : `${dataTest}-trigger`,
       triggerDataTest: triggerDataTest != null ? triggerDataTest : `${dataTest}-trigger`,
       align: "end",
       panelClassName: "w-80 overflow-hidden p-0",
       open,
       onOpenChange,
-      trigger: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "inline-flex h-11 w-11 items-center justify-center rounded-full text-ph-mutedtext transition hover:bg-ph-muted hover:text-ph-ink", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "relative inline-flex", children: [
+      trigger: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "relative inline-flex h-11 w-11 items-center justify-center overflow-visible rounded-full text-ph-mutedtext transition hover:bg-ph-muted hover:text-ph-ink", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "relative inline-flex h-5 w-5", children: [
         /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_iconoir_react3.Bell, { className: "h-5 w-5", strokeWidth: 1.75, "aria-hidden": true }),
-        unread > 0 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "absolute right-0 top-0 flex h-3.5 min-w-3.5 translate-x-0.5 -translate-y-0.5 items-center justify-center rounded-full bg-ph-brand px-1 text-[9px] font-semibold leading-none text-white ring-1 ring-ph-surface", children: unread > 9 ? "9+" : unread }) : null
+        unread > 0 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "pointer-events-none absolute -right-2 -top-2 z-[1] flex h-4 min-w-4 items-center justify-center rounded-full bg-ph-brand px-1 text-[9px] font-semibold leading-none text-white ring-2 ring-ph-surface", children: unread > 9 ? "9+" : unread }) : null
       ] }) }),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center justify-between border-b border-ph-border px-3 py-2", children: [

package/dist/suite.mjs

@@ -2,7 +2,7 @@ import {
   DropdownItem,
   DropdownMenu,
   Tooltip
-} from "./chunk-E5ZBQYEX.mjs";
+} from "./chunk-KDR6HI6F.mjs";
 import {
   SuiteThemeProvider,
   useSuiteTheme
@@ -896,7 +896,10 @@ function TodayEmptyState({
 // src/suite/components/app-switcher.tsx
 import Image from "next/image";
 import { useState } from "react";
-import { Check, NavArrowDown as ChevronDown } from "iconoir-react";
+import {
+  NavArrowDown as ChevronDown,
+  OpenNewWindow
+} from "iconoir-react";
 import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 function appSwitcherTriggerClass(open, collapsed = false) {
   return cn(
@@ -1013,43 +1016,53 @@ function AppSwitcher({
       ),
       children: /* @__PURE__ */ jsxs6("div", { id: "app-switcher-menu", className: "p-1", "data-test": "app-switcher-menu", children: [
         /* @__PURE__ */ jsx6("p", { className: "px-3 py-2 text-[10px] font-semibold uppercase tracking-[0.14em] text-ph-mutedtext", children: "Switch application" }),
-        apps.map((app) => /* @__PURE__ */ jsx6(
-          DropdownItem2,
-          {
-            id: `switch-app-${app.slug}`,
-            "data-test": `switch-app-${app.slug}`,
-            onMouseDown: (e) => e.preventDefault(),
-            onClick: () => {
-              setOpen(false);
-              onSelect(app);
-            },
-            className: appSwitcherMenuItemClass(),
-            children: /* @__PURE__ */ jsxs6("span", { className: "flex min-w-0 items-center gap-3", children: [
-              /* @__PURE__ */ jsx6(
-                Image,
-                {
-                  src: app.icon,
-                  alt: "",
-                  width: 28,
-                  height: 28,
-                  className: "h-7 w-7 shrink-0 rounded-md object-contain"
-                }
-              ),
-              /* @__PURE__ */ jsxs6("span", { className: "min-w-0 flex-1", children: [
-                /* @__PURE__ */ jsx6("span", { className: "block truncate text-sm font-medium text-ph-ink", children: app.name }),
-                /* @__PURE__ */ jsx6("span", { className: "block truncate text-xs text-ph-mutedtext", children: app.description })
-              ] }),
-              app.slug === currentApp ? /* @__PURE__ */ jsx6(
-                Check,
-                {
-                  className: "h-4 w-4 shrink-0 text-ph-brand",
-                  "aria-hidden": "true"
-                }
-              ) : null
-            ] })
-          },
-          app.slug
-        ))
+        apps.filter((app) => app.slug !== currentApp).map((app) => /* @__PURE__ */ jsxs6("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx6(
+            DropdownItem2,
+            {
+              id: `switch-app-${app.slug}`,
+              "data-test": `switch-app-${app.slug}`,
+              onMouseDown: (e) => e.preventDefault(),
+              onClick: () => {
+                setOpen(false);
+                onSelect(app);
+              },
+              className: cn(appSwitcherMenuItemClass(), "pr-11"),
+              children: /* @__PURE__ */ jsxs6("span", { className: "flex min-w-0 items-center gap-3", children: [
+                /* @__PURE__ */ jsx6(
+                  Image,
+                  {
+                    src: app.icon,
+                    alt: "",
+                    width: 28,
+                    height: 28,
+                    className: "h-7 w-7 shrink-0 rounded-md object-contain"
+                  }
+                ),
+                /* @__PURE__ */ jsxs6("span", { className: "min-w-0 flex-1", children: [
+                  /* @__PURE__ */ jsx6("span", { className: "block truncate text-sm font-medium text-ph-ink", children: app.name }),
+                  /* @__PURE__ */ jsx6("span", { className: "block truncate text-xs text-ph-mutedtext", children: app.description })
+                ] })
+              ] })
+            }
+          ),
+          /* @__PURE__ */ jsx6(
+            "button",
+            {
+              type: "button",
+              id: `switch-app-${app.slug}-new-tab`,
+              "data-test": `switch-app-${app.slug}-new-tab`,
+              "aria-label": `Open ${app.name} in a new tab`,
+              onMouseDown: (e) => e.preventDefault(),
+              onClick: () => {
+                setOpen(false);
+                onSelect(app, { newTab: true });
+              },
+              className: "absolute right-1.5 top-1/2 z-[1] flex h-8 w-8 -translate-y-1/2 items-center justify-center rounded-md text-ph-mutedtext transition-colors hover:bg-ph-muted hover:text-ph-ink focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ph-brand/35",
+              children: /* @__PURE__ */ jsx6(OpenNewWindow, { className: "h-4 w-4", "aria-hidden": "true" })
+            }
+          )
+        ] }, app.slug))
       ] })
     }
   );
@@ -1279,16 +1292,16 @@ function SuiteNotificationBell({
   return /* @__PURE__ */ jsxs7(
     DropdownMenu2,
     {
-      "aria-label": "Notifications",
+      "aria-label": unread > 0 ? `Notifications, ${unread} unread` : "Notifications",
       triggerId: triggerId != null ? triggerId : `${dataTest}-trigger`,
       triggerDataTest: triggerDataTest != null ? triggerDataTest : `${dataTest}-trigger`,
       align: "end",
       panelClassName: "w-80 overflow-hidden p-0",
       open,
       onOpenChange,
-      trigger: /* @__PURE__ */ jsx7("span", { className: "inline-flex h-11 w-11 items-center justify-center rounded-full text-ph-mutedtext transition hover:bg-ph-muted hover:text-ph-ink", children: /* @__PURE__ */ jsxs7("span", { className: "relative inline-flex", children: [
+      trigger: /* @__PURE__ */ jsx7("span", { className: "relative inline-flex h-11 w-11 items-center justify-center overflow-visible rounded-full text-ph-mutedtext transition hover:bg-ph-muted hover:text-ph-ink", children: /* @__PURE__ */ jsxs7("span", { className: "relative inline-flex h-5 w-5", children: [
         /* @__PURE__ */ jsx7(Bell, { className: "h-5 w-5", strokeWidth: 1.75, "aria-hidden": true }),
-        unread > 0 ? /* @__PURE__ */ jsx7("span", { className: "absolute right-0 top-0 flex h-3.5 min-w-3.5 translate-x-0.5 -translate-y-0.5 items-center justify-center rounded-full bg-ph-brand px-1 text-[9px] font-semibold leading-none text-white ring-1 ring-ph-surface", children: unread > 9 ? "9+" : unread }) : null
+        unread > 0 ? /* @__PURE__ */ jsx7("span", { className: "pointer-events-none absolute -right-2 -top-2 z-[1] flex h-4 min-w-4 items-center justify-center rounded-full bg-ph-brand px-1 text-[9px] font-semibold leading-none text-white ring-2 ring-ph-surface", children: unread > 9 ? "9+" : unread }) : null
       ] }) }),
       children: [
         /* @__PURE__ */ jsxs7("div", { className: "flex items-center justify-between border-b border-ph-border px-3 py-2", children: [
@@ -2727,7 +2740,7 @@ function SuiteAiPanel({
 
 // src/suite/components/workspace-switcher.tsx
 import { useState as useState8 } from "react";
-import { Building, Check as Check2, NavArrowDown } from "iconoir-react";
+import { Building, Check, NavArrowDown } from "iconoir-react";
 import { Fragment as Fragment6, jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
 function SuiteWorkspaceSwitcher({
   workspaces = [],
@@ -2814,7 +2827,7 @@ function SuiteWorkspaceSwitcher({
                       workspace.description ? /* @__PURE__ */ jsx18("span", { className: "block truncate text-xs text-ph-mutedtext", children: workspace.description }) : null
                     ] }),
                     workspace.id === currentId ? /* @__PURE__ */ jsx18(
-                      Check2,
+                      Check,
                       {
                         className: "h-4 w-4 shrink-0 text-ph-brand",
                         "aria-hidden": "true"

package/dist/ui.js

@@ -399,7 +399,9 @@ var IconPlayCircle = createIconBase({
   )
 });
 var IconGridView = createIconBase({
-  paths: fill("M3 3v8h8V3H3zm6 6H5V5h4v4zm-6 4v8h8v-8H3zm6 6H5v-4h4v4zm4-16v8h8V3h-8zm6 6h-4V5h4v4zm-6 4v8h8v-8h-8zm6 6h-4v-4h4v4z")
+  paths: fill(
+    "M3,3v8h8V3H3z M9,9H5V5h4V9z M3,13v8h8v-8H3z M9,19H5v-4h4V19z M13,3v8h8V3H13z M19,9h-4V5h4V9z M13,13v8h8v-8H13z M19,19h-4v-4h4V19z"
+  )
 });
 var IconListView = createIconBase({
   paths: fill(

package/dist/ui.mjs

@@ -65,7 +65,7 @@ import {
   ThemeDomSync,
   ThemeSwitcher,
   Toggle
-} from "./chunk-VOCHIR3W.mjs";
+} from "./chunk-VXISSXTB.mjs";
 import {
   ButtonChrome,
   DropdownButton,
@@ -77,7 +77,7 @@ import {
   IconByName,
   Tooltip,
   TooltipProvider
-} from "./chunk-E5ZBQYEX.mjs";
+} from "./chunk-KDR6HI6F.mjs";
 import "./chunk-FWCSY2DS.mjs";
 export {
   Accordion,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xenide-io/the-old-ui-theme",
-  "version": "0.6.13",
+  "version": "0.7.0",
   "description": "Props-driven React components and theme tokens inspired by classic interface design \u2014 optimized for Next.js apps and internal tools.",
   "author": "Xenide",
   "license": "MIT",

package/scripts/sync-posthog-icons.mjs

@@ -18,7 +18,7 @@ const CACHE = resolve("scripts/.posthog-icons.tsx");
 function extractPhBlock(source, name) {
   const start = source.indexOf(`export function ${name}(`);
   if (start < 0) return null;
-  const next = source.indexOf("\nexport function Icon", start + 10);
+  const next = source.indexOf("\nexport function ", start + 10);
   return source.slice(start, next > 0 ? next : start + 4000);
 }
 
@@ -34,9 +34,8 @@ function extractOurBlock(source, name) {
 function normPaths(block) {
   if (!block) return "";
   const fills = [...block.matchAll(/fill\(\s*\n?\s*"([^"]+)"/g)].map((m) => m[1]);
-  const ds = [...block.matchAll(/<path d="([^"]+)"/g)].map((m) => m[1]);
-  const attrs = [...block.matchAll(/\sd="([^"]+)"/g)].map((m) => m[1]);
-  return [...fills, ...ds, ...attrs].join("|").replace(/\s/g, "");
+  const paths = [...block.matchAll(/\sd="([^"]+)"/g)].map((m) => m[1]);
+  return [...fills, ...paths].join("|").replace(/\s/g, "");
 }
 
 async function main() {

package/src/components/icons/icons.tsx

@@ -98,7 +98,9 @@ export const IconPlayCircle = createIconBase({
 });
 
 export const IconGridView = createIconBase({
-  paths: fill("M3 3v8h8V3H3zm6 6H5V5h4v4zm-6 4v8h8v-8H3zm6 6H5v-4h4v4zm4-16v8h8V3h-8zm6 6h-4V5h4v4zm-6 4v8h8v-8h-8zm6 6h-4v-4h4v4z"),
+  paths: fill(
+    "M3,3v8h8V3H3z M9,9H5V5h4V9z M3,13v8h8v-8H3z M9,19H5v-4h4V19z M13,3v8h8V3H13z M19,9h-4V5h4V9z M13,13v8h8v-8H13z M19,19h-4v-4h4V19z",
+  ),
 });
 
 export const IconListView = createIconBase({

package/src/suite/components/app-switcher.test.tsx

@@ -0,0 +1,96 @@
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import { cleanup, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+vi.mock("next/image", () => ({
+  default: (props: ComponentPropsWithoutRef<"img">) => <img {...props} />,
+}));
+
+import { AppSwitcher, type SuiteAppEntry } from "./app-switcher";
+
+afterEach(() => {
+  cleanup();
+});
+
+const APPS: SuiteAppEntry[] = [
+  { slug: "tides", name: "Tides", description: "Projects", icon: "/tides.svg" },
+  {
+    slug: "turtletime",
+    name: "TurtleTime",
+    description: "Time",
+    icon: "/time.svg",
+  },
+  {
+    slug: "kraken",
+    name: "Kraken",
+    description: "Documents",
+    icon: "/kraken.svg",
+  },
+  {
+    slug: "nakama",
+    name: "Nakama",
+    description: "AI teammates",
+    icon: "/nakama.svg",
+  },
+];
+
+function TestDropdownMenu({
+  trigger,
+  children,
+  "aria-label": ariaLabel,
+}: {
+  trigger: ReactNode;
+  children: ReactNode;
+  "aria-label": string;
+}) {
+  return (
+    <div aria-label={ariaLabel}>
+      {trigger}
+      {children}
+    </div>
+  );
+}
+
+function TestDropdownItem({
+  children,
+  ...props
+}: ComponentPropsWithoutRef<"button">) {
+  return <button {...props}>{children}</button>;
+}
+
+describe("AppSwitcher", () => {
+  it("keeps the current app out of the simple application list", async () => {
+    const user = userEvent.setup();
+    const onSelect = vi.fn();
+
+    render(
+      <AppSwitcher
+        apps={APPS}
+        currentApp="tides"
+        onSelect={onSelect}
+        mark={<span />}
+        title={<span>Tides</span>}
+        dropdownMenu={TestDropdownMenu}
+        dropdownItem={TestDropdownItem}
+      />,
+    );
+
+    const menu = document.querySelector("[data-test='app-switcher-menu']");
+    expect(menu).not.toHaveClass("grid-cols-2");
+    expect(menu).toHaveTextContent("Switch application");
+    expect(
+      document.querySelector("[data-test='switch-app-tides']"),
+    ).not.toBeInTheDocument();
+    const newTabButton = screen.getByRole("button", {
+      name: "Open Kraken in a new tab",
+    });
+    expect(newTabButton).toHaveClass("absolute", "h-8", "w-8");
+    expect(
+      screen.queryByRole("button", { name: "Open Tides in a new tab" }),
+    ).not.toBeInTheDocument();
+
+    await user.click(newTabButton);
+    expect(onSelect).toHaveBeenCalledWith(APPS[2], { newTab: true });
+  });
+});

package/src/suite/components/app-switcher.tsx

@@ -2,7 +2,10 @@
 
 import Image from "next/image";
 import { useState, type ReactNode } from "react";
-import { Check, NavArrowDown as ChevronDown } from "iconoir-react";
+import {
+  NavArrowDown as ChevronDown,
+  OpenNewWindow,
+} from "iconoir-react";
 
 import { cn } from "../lib/cn";
 import type {
@@ -24,7 +27,6 @@ export function appSwitcherMarkClass() {
   return "h-8 w-8 shrink-0 rounded-lg shadow-[0_1px_2px_rgba(0,0,0,0.1),0_4px_12px_rgba(0,0,0,0.08)] ring-1 ring-black/[0.06]";
 }
 
-/** No sticky Radix highlight while waiting for cross-app redirect. */
 export function appSwitcherMenuItemClass() {
   return "rounded-lg px-2 py-2 data-[highlighted]:bg-transparent hover:bg-ph-muted/80";
 }
@@ -101,6 +103,11 @@ export interface SuiteAppEntry {
   icon: string;
 }
 
+export interface SuiteAppSelectOptions {
+  /** Open the handoff in a separate browser tab when requested by a caller. */
+  newTab?: boolean;
+}
+
 /**
  * Suite app switcher dropdown. Apps inject their brand mark/title, the
  * visible app list, the cross-app navigation handler, and the theme
@@ -120,7 +127,7 @@ export function AppSwitcher({
 }: {
   apps: SuiteAppEntry[];
   currentApp: string;
-  onSelect: (app: SuiteAppEntry) => void;
+  onSelect: (app: SuiteAppEntry, options?: SuiteAppSelectOptions) => void;
   mark: ReactNode;
   title: ReactNode;
   collapsed?: boolean;
@@ -160,43 +167,54 @@ export function AppSwitcher({
         <p className="px-3 py-2 text-[10px] font-semibold uppercase tracking-[0.14em] text-ph-mutedtext">
           Switch application
         </p>
-        {apps.map((app) => (
-          <DropdownItem
-            key={app.slug}
-            id={`switch-app-${app.slug}`}
-            data-test={`switch-app-${app.slug}`}
-            onMouseDown={(e) => e.preventDefault()}
-            onClick={() => {
-              setOpen(false);
-              onSelect(app);
-            }}
-            className={appSwitcherMenuItemClass()}
-          >
-            <span className="flex min-w-0 items-center gap-3">
-              <Image
-                src={app.icon}
-                alt=""
-                width={28}
-                height={28}
-                className="h-7 w-7 shrink-0 rounded-md object-contain"
-              />
-              <span className="min-w-0 flex-1">
-                <span className="block truncate text-sm font-medium text-ph-ink">
-                  {app.name}
-                </span>
-                <span className="block truncate text-xs text-ph-mutedtext">
-                  {app.description}
+        {apps
+          .filter((app) => app.slug !== currentApp)
+          .map((app) => (
+            <div key={app.slug} className="relative">
+              <DropdownItem
+                id={`switch-app-${app.slug}`}
+                data-test={`switch-app-${app.slug}`}
+                onMouseDown={(e) => e.preventDefault()}
+                onClick={() => {
+                  setOpen(false);
+                  onSelect(app);
+                }}
+                className={cn(appSwitcherMenuItemClass(), "pr-11")}
+              >
+                <span className="flex min-w-0 items-center gap-3">
+                  <Image
+                    src={app.icon}
+                    alt=""
+                    width={28}
+                    height={28}
+                    className="h-7 w-7 shrink-0 rounded-md object-contain"
+                  />
+                  <span className="min-w-0 flex-1">
+                    <span className="block truncate text-sm font-medium text-ph-ink">
+                      {app.name}
+                    </span>
+                    <span className="block truncate text-xs text-ph-mutedtext">
+                      {app.description}
+                    </span>
+                  </span>
                 </span>
-              </span>
-              {app.slug === currentApp ? (
-                <Check
-                  className="h-4 w-4 shrink-0 text-ph-brand"
-                  aria-hidden="true"
-                />
-              ) : null}
-            </span>
-          </DropdownItem>
-        ))}
+              </DropdownItem>
+              <button
+                type="button"
+                id={`switch-app-${app.slug}-new-tab`}
+                data-test={`switch-app-${app.slug}-new-tab`}
+                aria-label={`Open ${app.name} in a new tab`}
+                onMouseDown={(e) => e.preventDefault()}
+                onClick={() => {
+                  setOpen(false);
+                  onSelect(app, { newTab: true });
+                }}
+                className="absolute right-1.5 top-1/2 z-[1] flex h-8 w-8 -translate-y-1/2 items-center justify-center rounded-md text-ph-mutedtext transition-colors hover:bg-ph-muted hover:text-ph-ink focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ph-brand/35"
+              >
+                <OpenNewWindow className="h-4 w-4" aria-hidden="true" />
+              </button>
+            </div>
+          ))}
       </div>
     </DropdownMenu>
   );

package/src/suite/components/suite-notification-bell.test.tsx

@@ -0,0 +1,47 @@
+import { cleanup, render, waitFor } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+vi.mock("next/navigation", () => ({
+  useRouter: () => ({ push: vi.fn() }),
+}));
+
+import { SuiteNotificationBell } from "./suite-notification-bell";
+
+afterEach(() => {
+  cleanup();
+});
+
+describe("SuiteNotificationBell", () => {
+  it("anchors the unread badge close to the bell glyph", async () => {
+    render(
+      <SuiteNotificationBell
+        fetchNotifications={async () => ({
+          notifications: [],
+          unread_count: 12,
+        })}
+        markRead={async () => undefined}
+        markAllRead={async () => undefined}
+        dropdownMenu={({ trigger, "aria-label": label, children }) => (
+          <div aria-label={label}>
+            {trigger}
+            {children}
+          </div>
+        )}
+        cacheKey={null}
+      />,
+    );
+
+    const badge = await waitFor(() => {
+      const el = document.querySelector("span.bg-ph-brand");
+      if (!el) throw new Error("missing badge");
+      return el;
+    });
+
+    expect(badge.textContent).toBe("9+");
+    expect(badge.className).toContain("-right-2");
+    expect(badge.className).toContain("-top-2");
+    expect(badge.parentElement?.className).toContain("relative");
+    expect(badge.parentElement?.className).toContain("h-5");
+    expect(badge.parentElement?.className).toContain("w-5");
+  });
+});

package/src/suite/components/suite-notification-bell.tsx

@@ -170,7 +170,9 @@ export function SuiteNotificationBell({
 
   return (
     <DropdownMenu
-      aria-label="Notifications"
+      aria-label={
+        unread > 0 ? `Notifications, ${unread} unread` : "Notifications"
+      }
       triggerId={triggerId ?? `${dataTest}-trigger`}
       triggerDataTest={triggerDataTest ?? `${dataTest}-trigger`}
       align="end"
@@ -178,11 +180,11 @@ export function SuiteNotificationBell({
       open={open}
       onOpenChange={onOpenChange}
       trigger={
-        <span className="inline-flex h-11 w-11 items-center justify-center rounded-full text-ph-mutedtext transition hover:bg-ph-muted hover:text-ph-ink">
-          <span className="relative inline-flex">
+        <span className="relative inline-flex h-11 w-11 items-center justify-center overflow-visible rounded-full text-ph-mutedtext transition hover:bg-ph-muted hover:text-ph-ink">
+          <span className="relative inline-flex h-5 w-5">
             <Bell className="h-5 w-5" strokeWidth={1.75} aria-hidden />
             {unread > 0 ? (
-              <span className="absolute right-0 top-0 flex h-3.5 min-w-3.5 translate-x-0.5 -translate-y-0.5 items-center justify-center rounded-full bg-ph-brand px-1 text-[9px] font-semibold leading-none text-white ring-1 ring-ph-surface">
+              <span className="pointer-events-none absolute -right-2 -top-2 z-[1] flex h-4 min-w-4 items-center justify-center rounded-full bg-ph-brand px-1 text-[9px] font-semibold leading-none text-white ring-2 ring-ph-surface">
                 {unread > 9 ? "9+" : unread}
               </span>
             ) : null}

package/src/suite/index.ts

@@ -8,6 +8,7 @@ export {
   appSwitcherMenuItemClass,
   appSwitcherTriggerClass,
   type SuiteAppEntry,
+  type SuiteAppSelectOptions,
 } from "./components/app-switcher";
 export {
   SuiteNotificationBell,