@xenide-io/the-old-ui-theme 0.5.3 → 0.5.4

package/dist/suite.d.mts

@@ -130,10 +130,12 @@ declare function TodayEmptyState({ title, description, }: {
  */
 interface SuiteDropdownMenuProps {
     trigger: ReactNode;
+    triggerId?: string;
+    triggerDataTest?: string;
     children: ReactNode;
-    'aria-label': string;
-    align?: 'start' | 'center' | 'end';
-    side?: 'top' | 'right' | 'bottom' | 'left';
+    "aria-label": string;
+    align?: "start" | "center" | "end";
+    side?: "top" | "right" | "bottom" | "left";
     sideOffset?: number;
     className?: string;
     panelClassName?: string;
@@ -155,10 +157,14 @@ type SuiteCommandPaletteComponent = ComponentType<{
     onClose: () => void;
     placeholder?: string;
     className?: string;
+    id?: string;
+    dataTest?: string;
+    inputId?: string;
+    inputDataTest?: string;
 }>;
 /** App-branded spinner (each app has its own AppSpinner design). */
 type SuiteSpinnerComponent = ComponentType<{
-    size?: 'sm' | 'md' | 'lg';
+    size?: "sm" | "md" | "lg";
     className?: string;
     label?: string;
 }>;
@@ -186,7 +192,7 @@ interface SuiteAppEntry {
  * visible app list, the cross-app navigation handler, and the theme
  * dropdown primitives.
  */
-declare function AppSwitcher({ apps, currentApp, onSelect, mark, title, collapsed, dropdownMenu: DropdownMenu, dropdownItem: DropdownItem, }: {
+declare function AppSwitcher({ apps, currentApp, onSelect, mark, title, collapsed, dropdownMenu: DropdownMenu, dropdownItem: DropdownItem, triggerId, triggerDataTest, }: {
     apps: SuiteAppEntry[];
     currentApp: string;
     onSelect: (app: SuiteAppEntry) => void;
@@ -195,6 +201,8 @@ declare function AppSwitcher({ apps, currentApp, onSelect, mark, title, collapse
     collapsed?: boolean;
     dropdownMenu: SuiteDropdownMenuComponent;
     dropdownItem: SuiteDropdownItemComponent;
+    triggerId?: string;
+    triggerDataTest?: string;
 }): react.JSX.Element;
 
 /** Cross-app (suite) notification from `/api/notifications/` — shared across ShellStack apps. */
@@ -214,23 +222,30 @@ interface SuiteNotificationsResponse {
     notifications: SuiteNotification[];
     unread_count: number;
 }
-declare function SuiteNotificationBell({ fetchNotifications, markRead, markAllRead, dropdownMenu: DropdownMenu, cacheKey, }: {
+declare function SuiteNotificationBell({ fetchNotifications, markRead, markAllRead, dropdownMenu: DropdownMenu, cacheKey, dataTest, triggerId, triggerDataTest, }: {
     fetchNotifications: () => Promise<SuiteNotificationsResponse>;
     markRead: (id: string) => Promise<unknown>;
     markAllRead: () => Promise<unknown>;
     dropdownMenu: SuiteDropdownMenuComponent;
     /** sessionStorage key for stale-while-revalidate; `null` disables caching. */
     cacheKey?: string | null;
+    dataTest?: string;
+    triggerId?: string;
+    triggerDataTest?: string;
 }): react.JSX.Element;
 
 /**
  * Cmd/Ctrl+K command palette host. Apps build the item list and inject the
  * theme CommandPalette primitive.
  */
-declare function CommandPaletteHost({ items, isAuthenticated, placeholder, commandPalette: CommandPalette, }: {
+declare function CommandPaletteHost({ items, isAuthenticated, placeholder, id, dataTest, inputId, inputDataTest, commandPalette: CommandPalette, }: {
     items: SuiteCommandItem[];
     isAuthenticated?: boolean;
     placeholder?: string;
+    id?: string;
+    dataTest?: string;
+    inputId?: string;
+    inputDataTest?: string;
     commandPalette: SuiteCommandPaletteComponent;
 }): react.JSX.Element | null;
 
@@ -244,7 +259,7 @@ declare function DeferredChrome({ children }: {
  * close, body scroll-lock and focus hand-off while open. Nav content stays
  * app-side via `children`.
  */
-declare function SuiteMobileDrawer({ open, onClose, children, side, showCloseButton, title, closeLabel, backdropLabel, dialogLabel, durationMs, dataTest, panelDataTest, panelClassName, }: {
+declare function SuiteMobileDrawer({ open, onClose, children, side, showCloseButton, title, closeLabel, backdropLabel, dialogLabel, durationMs, dataTest, panelDataTest, backdropId, backdropDataTest, closeButtonId, closeButtonDataTest, panelClassName, }: {
     open: boolean;
     onClose: () => void;
     children: ReactNode;
@@ -262,13 +277,17 @@ declare function SuiteMobileDrawer({ open, onClose, children, side, showCloseBut
     durationMs?: number;
     dataTest?: string;
     panelDataTest?: string;
+    backdropId?: string;
+    backdropDataTest?: string;
+    closeButtonId?: string;
+    closeButtonDataTest?: string;
     /** Panel surface overrides (e.g. `bg-ph-canvas`). */
     panelClassName?: string;
 }): react.JSX.Element | null;
 
 type SuiteMenuIcon = ComponentType<{
     className?: string;
-    'aria-hidden'?: boolean | 'true' | 'false';
+    "aria-hidden"?: boolean | "true" | "false";
 }>;
 /**
  * Suite mobile app bar — the standardized top of every app on phone/tablet.
@@ -276,7 +295,7 @@ type SuiteMenuIcon = ComponentType<{
  * Translucent + blurred (suite-skin.css `.suite-app-bar`), safe-area aware,
  * 44px minimum touch targets. Desktop chrome (rail/top bar) stays app-side.
  */
-declare function SuiteMobileHeader({ onMenuClick, menuIcon: MenuIcon, title, actions, menuLabel, menuDataTest, dataTest, className, }: {
+declare function SuiteMobileHeader({ onMenuClick, menuIcon: MenuIcon, title, actions, menuLabel, menuId, menuDataTest, dataTest, className, }: {
     /** Optional — omit to drop the hamburger (bottom-nav apps don't need one). */
     onMenuClick?: () => void;
     /** Leading button glyph — defaults to Menu; browse-style drawers can swap it. */
@@ -286,6 +305,7 @@ declare function SuiteMobileHeader({ onMenuClick, menuIcon: MenuIcon, title, act
     /** Right-hand slot — search, bell, avatar (keep this order). */
     actions?: ReactNode;
     menuLabel?: string;
+    menuId?: string;
     menuDataTest?: string;
     dataTest?: string;
     className?: string;
@@ -322,6 +342,8 @@ interface SuiteUserMenuProps {
     /** Show the old desktop sidebar sign-out action beside the avatar. */
     showSignOutAction?: boolean;
     dataTest?: string;
+    triggerId?: string;
+    triggerDataTest?: string;
     className?: string;
 }
 /**
@@ -329,13 +351,13 @@ interface SuiteUserMenuProps {
  * profile settings and sign out. Desktop sidebars can also expose the legacy
  * adjacent sign-out action without adding it to mobile chrome.
  */
-declare function SuiteUserMenu({ name, email, image, settingsHref, onSignOut, fallbackInitials, showSignOutAction, dataTest, className, }: SuiteUserMenuProps): react.JSX.Element;
+declare function SuiteUserMenu({ name, email, image, settingsHref, onSignOut, fallbackInitials, showSignOutAction, dataTest, triggerId, triggerDataTest, className, }: SuiteUserMenuProps): react.JSX.Element;
 
 /** Any icon component that accepts sizing/stroke props (Lucide, theme icons). */
 type SuiteNavIcon = ComponentType<{
     className?: string;
     strokeWidth?: number | string;
-    'aria-hidden'?: boolean | 'true' | 'false';
+    "aria-hidden"?: boolean | "true" | "false";
 }>;
 /**
  * Suite bottom navigation — the mobile/tablet primary nav, identical in
@@ -348,6 +370,7 @@ interface SuiteBottomNavItem {
     href: string;
     label: string;
     icon: SuiteNavIcon;
+    id?: string;
     active?: boolean;
     dataTest?: string;
 }
@@ -788,6 +811,7 @@ interface SuiteSettingsNavItem {
     label: string;
     href: string;
     icon: ElementType | ReactNode;
+    id?: string;
     testId?: string;
 }
 interface SuiteSettingsMobileNavProps {
@@ -811,6 +835,8 @@ interface SuiteSidebarNavItem {
     href: string;
     label: string;
     icon: SuiteNavIcon;
+    id?: string;
+    dataTest?: string;
     active?: boolean;
     onClick?: () => void;
     badge?: ReactNode;

package/dist/suite.d.ts

@@ -130,10 +130,12 @@ declare function TodayEmptyState({ title, description, }: {
  */
 interface SuiteDropdownMenuProps {
     trigger: ReactNode;
+    triggerId?: string;
+    triggerDataTest?: string;
     children: ReactNode;
-    'aria-label': string;
-    align?: 'start' | 'center' | 'end';
-    side?: 'top' | 'right' | 'bottom' | 'left';
+    "aria-label": string;
+    align?: "start" | "center" | "end";
+    side?: "top" | "right" | "bottom" | "left";
     sideOffset?: number;
     className?: string;
     panelClassName?: string;
@@ -155,10 +157,14 @@ type SuiteCommandPaletteComponent = ComponentType<{
     onClose: () => void;
     placeholder?: string;
     className?: string;
+    id?: string;
+    dataTest?: string;
+    inputId?: string;
+    inputDataTest?: string;
 }>;
 /** App-branded spinner (each app has its own AppSpinner design). */
 type SuiteSpinnerComponent = ComponentType<{
-    size?: 'sm' | 'md' | 'lg';
+    size?: "sm" | "md" | "lg";
     className?: string;
     label?: string;
 }>;
@@ -186,7 +192,7 @@ interface SuiteAppEntry {
  * visible app list, the cross-app navigation handler, and the theme
  * dropdown primitives.
  */
-declare function AppSwitcher({ apps, currentApp, onSelect, mark, title, collapsed, dropdownMenu: DropdownMenu, dropdownItem: DropdownItem, }: {
+declare function AppSwitcher({ apps, currentApp, onSelect, mark, title, collapsed, dropdownMenu: DropdownMenu, dropdownItem: DropdownItem, triggerId, triggerDataTest, }: {
     apps: SuiteAppEntry[];
     currentApp: string;
     onSelect: (app: SuiteAppEntry) => void;
@@ -195,6 +201,8 @@ declare function AppSwitcher({ apps, currentApp, onSelect, mark, title, collapse
     collapsed?: boolean;
     dropdownMenu: SuiteDropdownMenuComponent;
     dropdownItem: SuiteDropdownItemComponent;
+    triggerId?: string;
+    triggerDataTest?: string;
 }): react.JSX.Element;
 
 /** Cross-app (suite) notification from `/api/notifications/` — shared across ShellStack apps. */
@@ -214,23 +222,30 @@ interface SuiteNotificationsResponse {
     notifications: SuiteNotification[];
     unread_count: number;
 }
-declare function SuiteNotificationBell({ fetchNotifications, markRead, markAllRead, dropdownMenu: DropdownMenu, cacheKey, }: {
+declare function SuiteNotificationBell({ fetchNotifications, markRead, markAllRead, dropdownMenu: DropdownMenu, cacheKey, dataTest, triggerId, triggerDataTest, }: {
     fetchNotifications: () => Promise<SuiteNotificationsResponse>;
     markRead: (id: string) => Promise<unknown>;
     markAllRead: () => Promise<unknown>;
     dropdownMenu: SuiteDropdownMenuComponent;
     /** sessionStorage key for stale-while-revalidate; `null` disables caching. */
     cacheKey?: string | null;
+    dataTest?: string;
+    triggerId?: string;
+    triggerDataTest?: string;
 }): react.JSX.Element;
 
 /**
  * Cmd/Ctrl+K command palette host. Apps build the item list and inject the
  * theme CommandPalette primitive.
  */
-declare function CommandPaletteHost({ items, isAuthenticated, placeholder, commandPalette: CommandPalette, }: {
+declare function CommandPaletteHost({ items, isAuthenticated, placeholder, id, dataTest, inputId, inputDataTest, commandPalette: CommandPalette, }: {
     items: SuiteCommandItem[];
     isAuthenticated?: boolean;
     placeholder?: string;
+    id?: string;
+    dataTest?: string;
+    inputId?: string;
+    inputDataTest?: string;
     commandPalette: SuiteCommandPaletteComponent;
 }): react.JSX.Element | null;
 
@@ -244,7 +259,7 @@ declare function DeferredChrome({ children }: {
  * close, body scroll-lock and focus hand-off while open. Nav content stays
  * app-side via `children`.
  */
-declare function SuiteMobileDrawer({ open, onClose, children, side, showCloseButton, title, closeLabel, backdropLabel, dialogLabel, durationMs, dataTest, panelDataTest, panelClassName, }: {
+declare function SuiteMobileDrawer({ open, onClose, children, side, showCloseButton, title, closeLabel, backdropLabel, dialogLabel, durationMs, dataTest, panelDataTest, backdropId, backdropDataTest, closeButtonId, closeButtonDataTest, panelClassName, }: {
     open: boolean;
     onClose: () => void;
     children: ReactNode;
@@ -262,13 +277,17 @@ declare function SuiteMobileDrawer({ open, onClose, children, side, showCloseBut
     durationMs?: number;
     dataTest?: string;
     panelDataTest?: string;
+    backdropId?: string;
+    backdropDataTest?: string;
+    closeButtonId?: string;
+    closeButtonDataTest?: string;
     /** Panel surface overrides (e.g. `bg-ph-canvas`). */
     panelClassName?: string;
 }): react.JSX.Element | null;
 
 type SuiteMenuIcon = ComponentType<{
     className?: string;
-    'aria-hidden'?: boolean | 'true' | 'false';
+    "aria-hidden"?: boolean | "true" | "false";
 }>;
 /**
  * Suite mobile app bar — the standardized top of every app on phone/tablet.
@@ -276,7 +295,7 @@ type SuiteMenuIcon = ComponentType<{
  * Translucent + blurred (suite-skin.css `.suite-app-bar`), safe-area aware,
  * 44px minimum touch targets. Desktop chrome (rail/top bar) stays app-side.
  */
-declare function SuiteMobileHeader({ onMenuClick, menuIcon: MenuIcon, title, actions, menuLabel, menuDataTest, dataTest, className, }: {
+declare function SuiteMobileHeader({ onMenuClick, menuIcon: MenuIcon, title, actions, menuLabel, menuId, menuDataTest, dataTest, className, }: {
     /** Optional — omit to drop the hamburger (bottom-nav apps don't need one). */
     onMenuClick?: () => void;
     /** Leading button glyph — defaults to Menu; browse-style drawers can swap it. */
@@ -286,6 +305,7 @@ declare function SuiteMobileHeader({ onMenuClick, menuIcon: MenuIcon, title, act
     /** Right-hand slot — search, bell, avatar (keep this order). */
     actions?: ReactNode;
     menuLabel?: string;
+    menuId?: string;
     menuDataTest?: string;
     dataTest?: string;
     className?: string;
@@ -322,6 +342,8 @@ interface SuiteUserMenuProps {
     /** Show the old desktop sidebar sign-out action beside the avatar. */
     showSignOutAction?: boolean;
     dataTest?: string;
+    triggerId?: string;
+    triggerDataTest?: string;
     className?: string;
 }
 /**
@@ -329,13 +351,13 @@ interface SuiteUserMenuProps {
  * profile settings and sign out. Desktop sidebars can also expose the legacy
  * adjacent sign-out action without adding it to mobile chrome.
  */
-declare function SuiteUserMenu({ name, email, image, settingsHref, onSignOut, fallbackInitials, showSignOutAction, dataTest, className, }: SuiteUserMenuProps): react.JSX.Element;
+declare function SuiteUserMenu({ name, email, image, settingsHref, onSignOut, fallbackInitials, showSignOutAction, dataTest, triggerId, triggerDataTest, className, }: SuiteUserMenuProps): react.JSX.Element;
 
 /** Any icon component that accepts sizing/stroke props (Lucide, theme icons). */
 type SuiteNavIcon = ComponentType<{
     className?: string;
     strokeWidth?: number | string;
-    'aria-hidden'?: boolean | 'true' | 'false';
+    "aria-hidden"?: boolean | "true" | "false";
 }>;
 /**
  * Suite bottom navigation — the mobile/tablet primary nav, identical in
@@ -348,6 +370,7 @@ interface SuiteBottomNavItem {
     href: string;
     label: string;
     icon: SuiteNavIcon;
+    id?: string;
     active?: boolean;
     dataTest?: string;
 }
@@ -788,6 +811,7 @@ interface SuiteSettingsNavItem {
     label: string;
     href: string;
     icon: ElementType | ReactNode;
+    id?: string;
     testId?: string;
 }
 interface SuiteSettingsMobileNavProps {
@@ -811,6 +835,8 @@ interface SuiteSidebarNavItem {
     href: string;
     label: string;
     icon: SuiteNavIcon;
+    id?: string;
+    dataTest?: string;
     active?: boolean;
     onClick?: () => void;
     badge?: ReactNode;

package/dist/suite.js

@@ -1266,13 +1266,17 @@ function AppSwitcher({
   title,
   collapsed = false,
   dropdownMenu: DropdownMenu2,
-  dropdownItem: DropdownItem2
+  dropdownItem: DropdownItem2,
+  triggerId,
+  triggerDataTest
 }) {
   const [open, setOpen] = (0, import_react.useState)(false);
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     DropdownMenu2,
     {
       "aria-label": "Switch application",
+      triggerId: triggerId != null ? triggerId : "app-switcher-trigger",
+      triggerDataTest: triggerDataTest != null ? triggerDataTest : "app-switcher-trigger",
       className: collapsed ? "w-11 shrink-0" : "min-w-0 flex-1",
       panelClassName: "w-64",
       align: "start",
@@ -1294,11 +1298,12 @@ function AppSwitcher({
           ]
         }
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "p-1", "data-test": "app-switcher-menu", children: [
+      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: () => {
@@ -1433,7 +1438,10 @@ function SuiteNotificationBell({
   markRead,
   markAllRead,
   dropdownMenu: DropdownMenu2,
-  cacheKey = "suite-notifications-cache"
+  cacheKey = "suite-notifications-cache",
+  dataTest = "suite-notifications",
+  triggerId,
+  triggerDataTest
 }) {
   const router = (0, import_navigation.useRouter)();
   const [open, setOpen] = (0, import_react2.useState)(false);
@@ -1534,11 +1542,13 @@ function SuiteNotificationBell({
     DropdownMenu2,
     {
       "aria-label": "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.jsxs)("span", { className: "relative inline-flex h-9 w-9 items-center justify-center rounded-full text-ph-mutedtext transition hover:bg-ph-muted hover:text-ph-ink", children: [
+      trigger: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "relative 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.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.5 -top-0.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-ph-brand px-1 text-[10px] font-semibold leading-none text-white ring-2 ring-ph-surface", children: unread > 9 ? "9+" : unread }) : null
       ] }),
@@ -1549,6 +1559,8 @@ function SuiteNotificationBell({
             "button",
             {
               type: "button",
+              id: `${dataTest}-mark-all`,
+              "data-test": `${dataTest}-mark-all`,
               onClick: markAll,
               className: "text-xs font-medium text-ph-brand hover:underline",
               children: "Mark all read"
@@ -1559,6 +1571,8 @@ function SuiteNotificationBell({
           "button",
           {
             type: "button",
+            id: `${dataTest}-item-${n.id}`,
+            "data-test": `${dataTest}-item-${n.id}`,
             onClick: () => void openItem(n),
             className: "flex w-full flex-col gap-0.5 px-3 py-2 text-left transition hover:bg-ph-muted",
             children: [
@@ -1603,6 +1617,10 @@ function CommandPaletteHost({
   items,
   isAuthenticated = true,
   placeholder = "Type a command or search\u2026",
+  id,
+  dataTest,
+  inputId,
+  inputDataTest,
   commandPalette: CommandPalette
 }) {
   const [open, setOpen] = (0, import_react3.useState)(false);
@@ -1623,7 +1641,11 @@ function CommandPaletteHost({
       items,
       isOpen: open,
       onClose: () => setOpen(false),
-      placeholder
+      placeholder,
+      id,
+      dataTest,
+      inputId,
+      inputDataTest
     }
   );
 }
@@ -1671,6 +1693,10 @@ function SuiteMobileDrawer({
   durationMs = 200,
   dataTest,
   panelDataTest,
+  backdropId,
+  backdropDataTest,
+  closeButtonId,
+  closeButtonDataTest,
   panelClassName
 }) {
   const [rendered, setRendered] = (0, import_react5.useState)(open);
@@ -1722,6 +1748,8 @@ function SuiteMobileDrawer({
       "button",
       {
         type: "button",
+        id: backdropId,
+        "data-test": backdropDataTest,
         tabIndex: -1,
         className: cn(
           "absolute inset-0 bg-black/25 backdrop-blur-sm motion-safe:transition-opacity motion-safe:ease-spring-subtle",
@@ -1762,6 +1790,8 @@ function SuiteMobileDrawer({
                   "button",
                   {
                     type: "button",
+                    id: closeButtonId,
+                    "data-test": closeButtonDataTest,
                     onClick: onClose,
                     className: "-mr-1.5 inline-flex h-11 w-11 items-center justify-center rounded-lg text-ph-mutedtext transition-colors hover:bg-ph-muted hover:text-ph-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-brand",
                     "aria-label": closeLabel,
@@ -1787,6 +1817,7 @@ function SuiteMobileHeader({
   title,
   actions,
   menuLabel = "Open navigation",
+  menuId,
   menuDataTest,
   dataTest,
   className
@@ -1804,6 +1835,7 @@ function SuiteMobileHeader({
           "button",
           {
             type: "button",
+            id: menuId,
             "data-test": menuDataTest,
             className: "suite-press inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-xl text-ph-ink transition-colors hover:bg-ph-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-brand",
             onClick: onMenuClick,
@@ -1943,7 +1975,7 @@ function SuitePageHeader({
       "data-test": dataTest,
       "data-stuck": sticky ? stuck ? "true" : "false" : void 0,
       className: cn(
-        "flex items-start justify-between gap-4 pb-2 sm:pb-3",
+        "flex min-w-0 flex-col items-start gap-3 pb-2 sm:flex-row sm:justify-between sm:gap-4 sm:pb-3",
         // No extra pt here — page inset sets the shared title baseline.
         // Stuck state adds pad via .suite-page-header-sticky[data-stuck].
         sticky && "suite-page-header-sticky",
@@ -1967,7 +1999,7 @@ function SuitePageHeader({
                 "h1",
                 {
                   className: cn(
-                    "font-display text-[1.625rem] font-bold leading-none tracking-tight text-ph-ink sm:text-[2.25rem]",
+                    "min-w-0 break-words font-display text-[1.625rem] font-bold leading-none tracking-tight text-ph-ink text-balance sm:text-[2.25rem]",
                     titleClassName
                   ),
                   children: title
@@ -1987,7 +2019,7 @@ function SuitePageHeader({
             }
           ) : null
         ] }),
-        actions ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex shrink-0 items-center gap-2 self-center", children: actions }) : null
+        actions ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex max-w-full items-center gap-2 self-stretch overflow-x-auto pb-1 sm:shrink-0 sm:self-center sm:overflow-visible sm:pb-0", children: actions }) : null
       ]
     }
   );
@@ -2148,7 +2180,14 @@ function DropdownContent({
       sticky: "partial",
       children: [
         children,
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DropdownPrimitive.Arrow, { className: "ph-dropdown-arrow", width: 12, height: 6 })
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          DropdownPrimitive.Arrow,
+          {
+            className: "ph-dropdown-arrow",
+            width: 12,
+            height: 6
+          }
+        )
       ]
     }
   ) });
@@ -2156,6 +2195,8 @@ function DropdownContent({
 function DropdownMenu(_a) {
   var _b = _a, {
     trigger,
+    triggerId,
+    triggerDataTest,
     children,
     align,
     side,
@@ -2173,6 +2214,8 @@ function DropdownMenu(_a) {
     disabled
   } = _b, props = __objRest(_b, [
     "trigger",
+    "triggerId",
+    "triggerDataTest",
     "children",
     "align",
     "side",
@@ -2197,7 +2240,17 @@ function DropdownMenu(_a) {
       onOpenChange,
       modal,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DropdownPrimitive.Trigger, { asChild: true, disabled, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("button", { type: "button", className: "ph-dropdown-trigger", "aria-label": ariaLabel, children: trigger }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DropdownPrimitive.Trigger, { asChild: true, disabled, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          "button",
+          {
+            type: "button",
+            id: triggerId,
+            "data-test": triggerDataTest,
+            className: "ph-dropdown-trigger",
+            "aria-label": ariaLabel,
+            children: trigger
+          }
+        ) }),
         /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           DropdownContent,
           {
@@ -2216,7 +2269,15 @@ function DropdownMenu(_a) {
   ) }));
 }
 function DropdownItem(_a) {
-  var _b = _a, { className, children, disabled } = _b, props = __objRest(_b, ["className", "children", "disabled"]);
+  var _b = _a, {
+    className,
+    children,
+    disabled
+  } = _b, props = __objRest(_b, [
+    "className",
+    "children",
+    "disabled"
+  ]);
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DropdownPrimitive.Item, { asChild: true, disabled, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     "button",
     __spreadProps(__spreadValues({
@@ -2244,6 +2305,8 @@ function SuiteUserMenu({
   fallbackInitials,
   showSignOutAction = false,
   dataTest = "suite-user-menu",
+  triggerId,
+  triggerDataTest,
   className
 }) {
   const router = (0, import_navigation2.useRouter)();
@@ -2263,6 +2326,8 @@ function SuiteUserMenu({
     DropdownMenu,
     {
       trigger: avatar,
+      triggerId: triggerId != null ? triggerId : `${dataTest}-trigger`,
+      triggerDataTest: triggerDataTest != null ? triggerDataTest : `${dataTest}-trigger`,
       "aria-label": "Account menu",
       align: "end",
       side: "bottom",
@@ -2363,6 +2428,7 @@ function SuiteBottomNav({
               import_link.default,
               {
                 href: item.href,
+                id: item.id,
                 "data-test": (_a = item.dataTest) != null ? _a : `suite-nav-${item.label.toLowerCase().replace(/\s+/g, "-")}`,
                 "aria-current": active ? "page" : void 0,
                 className: cn(
@@ -3260,6 +3326,7 @@ function SuiteSettingsMobileNav({
           "button",
           {
             type: "button",
+            id: item.id,
             "data-test": item.testId,
             onClick: () => onSelect(item.href),
             "aria-current": active ? "page" : void 0,
@@ -3472,19 +3539,21 @@ function SuiteSidebar({
               /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("nav", { "aria-label": "Pages", className: "shrink-0 space-y-0.5", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: cn("mb-3", collapsed && "flex justify-center"), children: renderNode(contextSwitcher, collapsed) }),
                 /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "space-y-0.5", children: navItems.map((item) => {
+                  var _a;
                   const Icon = item.icon;
                   const active = Boolean(item.active);
                   const link = /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
                     import_link2.default,
                     {
                       href: item.href,
-                      "data-test": "nav-link",
+                      id: item.id,
+                      "data-test": (_a = item.dataTest) != null ? _a : "nav-link",
                       "aria-current": active ? "page" : void 0,
                       onClick: item.onClick,
                       className: cn(
-                        "group relative flex items-center gap-2.5 rounded-[var(--ph-radius-app)] text-sm font-medium transition-colors",
+                        "group relative flex min-h-11 touch-manipulation items-center gap-2.5 rounded-[var(--ph-radius-app)] text-sm font-medium transition-colors",
                         active ? "bg-ph-muted" : "text-ph-subtle hover:bg-ph-muted hover:text-ph-ink",
-                        collapsed ? "mx-auto size-10 shrink-0 justify-center gap-0 px-0 py-0" : "w-full px-2.5 py-2"
+                        collapsed ? "mx-auto size-11 shrink-0 justify-center gap-0 px-0 py-0" : "w-full px-2.5 py-2"
                       ),
                       children: [
                         /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
@@ -3582,7 +3651,7 @@ function SuiteAppLayout({
     {
       "data-test": "app-shell",
       className: cn(
-        "suite-app-layout flex min-h-dvh lg:h-screen lg:overflow-hidden",
+        "suite-app-layout flex h-dvh overflow-hidden",
         className
       ),
       children: [