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

package/dist/suite.mjs

@@ -2,7 +2,7 @@ import {
   DropdownItem,
   DropdownMenu,
   Tooltip
-} from "./chunk-G53YLHVE.mjs";
+} from "./chunk-E5ZBQYEX.mjs";
 import {
   SuiteThemeProvider,
   useSuiteTheme
@@ -979,13 +979,17 @@ function AppSwitcher({
   title,
   collapsed = false,
   dropdownMenu: DropdownMenu2,
-  dropdownItem: DropdownItem2
+  dropdownItem: DropdownItem2,
+  triggerId,
+  triggerDataTest
 }) {
   const [open, setOpen] = useState(false);
   return /* @__PURE__ */ jsx6(
     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",
@@ -1007,11 +1011,12 @@ function AppSwitcher({
           ]
         }
       ),
-      children: /* @__PURE__ */ jsxs6("div", { className: "p-1", "data-test": "app-switcher-menu", children: [
+      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: () => {
@@ -1146,7 +1151,10 @@ function SuiteNotificationBell({
   markRead,
   markAllRead,
   dropdownMenu: DropdownMenu2,
-  cacheKey = "suite-notifications-cache"
+  cacheKey = "suite-notifications-cache",
+  dataTest = "suite-notifications",
+  triggerId,
+  triggerDataTest
 }) {
   const router = useRouter();
   const [open, setOpen] = useState2(false);
@@ -1247,11 +1255,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__ */ jsxs7("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__ */ jsxs7("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__ */ jsx7(Bell, { className: "h-5 w-5", strokeWidth: 1.75, "aria-hidden": true }),
         unread > 0 ? /* @__PURE__ */ jsx7("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
       ] }),
@@ -1262,6 +1272,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"
@@ -1272,6 +1284,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: [
@@ -1316,6 +1330,10 @@ function CommandPaletteHost({
   items,
   isAuthenticated = true,
   placeholder = "Type a command or search\u2026",
+  id,
+  dataTest,
+  inputId,
+  inputDataTest,
   commandPalette: CommandPalette
 }) {
   const [open, setOpen] = useState3(false);
@@ -1336,7 +1354,11 @@ function CommandPaletteHost({
       items,
       isOpen: open,
       onClose: () => setOpen(false),
-      placeholder
+      placeholder,
+      id,
+      dataTest,
+      inputId,
+      inputDataTest
     }
   );
 }
@@ -1384,6 +1406,10 @@ function SuiteMobileDrawer({
   durationMs = 200,
   dataTest,
   panelDataTest,
+  backdropId,
+  backdropDataTest,
+  closeButtonId,
+  closeButtonDataTest,
   panelClassName
 }) {
   const [rendered, setRendered] = useState5(open);
@@ -1435,6 +1461,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",
@@ -1475,6 +1503,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,
@@ -1500,6 +1530,7 @@ function SuiteMobileHeader({
   title,
   actions,
   menuLabel = "Open navigation",
+  menuId,
   menuDataTest,
   dataTest,
   className
@@ -1517,6 +1548,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,
@@ -1660,7 +1692,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",
@@ -1684,7 +1716,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
@@ -1704,7 +1736,7 @@ function SuitePageHeader({
             }
           ) : null
         ] }),
-        actions ? /* @__PURE__ */ jsx12("div", { className: "flex shrink-0 items-center gap-2 self-center", children: actions }) : null
+        actions ? /* @__PURE__ */ jsx12("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
       ]
     }
   );
@@ -1845,6 +1877,8 @@ function SuiteUserMenu({
   fallbackInitials,
   showSignOutAction = false,
   dataTest = "suite-user-menu",
+  triggerId,
+  triggerDataTest,
   className
 }) {
   const router = useRouter2();
@@ -1864,6 +1898,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",
@@ -1964,6 +2000,7 @@ function SuiteBottomNav({
               Link,
               {
                 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(
@@ -2869,6 +2906,7 @@ function SuiteSettingsMobileNav({
           "button",
           {
             type: "button",
+            id: item.id,
             "data-test": item.testId,
             onClick: () => onSelect(item.href),
             "aria-current": active ? "page" : void 0,
@@ -2944,19 +2982,21 @@ function SuiteSidebar({
               /* @__PURE__ */ jsxs18("nav", { "aria-label": "Pages", className: "shrink-0 space-y-0.5", children: [
                 /* @__PURE__ */ jsx21("div", { className: cn("mb-3", collapsed && "flex justify-center"), children: renderNode(contextSwitcher, collapsed) }),
                 /* @__PURE__ */ jsx21("div", { className: "space-y-0.5", children: navItems.map((item) => {
+                  var _a;
                   const Icon = item.icon;
                   const active = Boolean(item.active);
                   const link = /* @__PURE__ */ jsxs18(
                     Link2,
                     {
                       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__ */ jsx21(
@@ -3054,7 +3094,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: [