@payfit/unity-components 2.60.8 → 2.60.10

package/dist/esm/components/action-bar/ActionBar.d.ts

@@ -84,6 +84,10 @@ export type { ActionBarActionItem, ActionBarActionItemBase, ActionBarBaseProps,
  * - Actions support `type: 'button'` (default) or `type: 'icon-button'` for icon-only buttons
  * - All action-specific props (onPress, prefixIcon, icon, isDisabled, isLoading) go in the `meta` object
  * - Includes proper ARIA labels and live regions for accessibility
+ * - Uses `role="toolbar"` to expose the toolbar semantics to assistive technologies
+ * - Groups related actions with `role="group"` inside the toolbar
+ * - Provide a concise `aria-label` when the default "Actions toolbar" label is not specific enough
+ * - Supports keyboard navigation between actions with Tab and the left and right arrow keys
  * @see {@link ActionBarProps} for all available props
  * @see {@link ActionBarActionItem} for action item structure
  * @see Source code in [Github](https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/action-bar)

package/dist/esm/components/actionable/Actionable.d.ts

@@ -53,6 +53,10 @@ export interface ActionableProps extends AriaButtonProps {
  * - Supports both static children and render prop pattern for dynamic content
  * - Use data attributes (`data-hovered`, `data-pressed`, `data-focused`, `data-disabled`, `data-focus-visible`) for styling non-button elements
  * - Marked as `uy:group` for styling child elements based on parent state
+ * - Provide an accessible name for every actionable surface
+ * - Use `aria-labelledby` when a visible label already exists, and `aria-describedby` when extra context describes the action
+ * - Use `aria-label`, `aria-description`, or `aria-details` when no visible label or description is available
+ * - Add relationship attributes such as `aria-controls`, `aria-expanded`, or `aria-haspopup` when the actionable surface controls another element
  * @see {@link ActionableProps} for all available props
  * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/actionable GitHub}
  * @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/primitives-actionable--docs unity-components.payfit.io}

package/dist/esm/components/alert/Alert.d.ts

@@ -50,6 +50,11 @@ export type AlertProps = BaseAlertProps & DismissableConfig & VariantConfig;
  *   <AlertTitle>Pro Tip</AlertTitle>
  *   <AlertContent>Use keyboard shortcuts to navigate faster.</AlertContent>
  * </Alert>
+ * @remarks
+ * - Uses `role="status"` with polite announcements for non-critical variants
+ * - Uses `role="alert"` with assertive announcements for the `danger` variant
+ * - Sets `aria-atomic` so assistive technologies announce the alert as a whole
+ * - Follow the WAI-ARIA alert guidance when deciding whether content should interrupt the user
  */
 declare const Alert: import('react').ForwardRefExoticComponent<AlertProps & import('react').RefAttributes<HTMLDivElement>>;
 export { Alert };

package/dist/esm/components/alert/parts/AlertContent.d.ts

@@ -2,14 +2,14 @@ import { TextProps } from '../../text/Text.js';
 type ContentElements = 'div' | 'p' | 'span';
 export type AlertContentProps = Omit<TextProps, 'variant' | 'color' | 'className'> & {
     /**
-     * The underlying HTML element to render the title as.
+     * The underlying HTML element to render the content as.
      * @default 'p'
      */
     asElement?: ContentElements;
 };
 declare const AlertContent: import('react').ForwardRefExoticComponent<Omit<TextProps, "color" | "className" | "variant"> & {
     /**
-     * The underlying HTML element to render the title as.
+     * The underlying HTML element to render the content as.
      * @default 'p'
      */
     asElement?: ContentElements;

package/dist/esm/components/app-menu/parts/AppMenuFooter.d.ts

@@ -1,35 +1,10 @@
-import { ReactElement, ReactNode } from 'react';
-import { AvatarPairProps } from '../../avatar/parts/AvatarPair.js';
-type CommonProps = {
-    avatar?: string;
-    avatarPair?: ReactElement<AvatarPairProps>;
-    title?: string;
-    description?: ReactNode;
-    badgeLabel?: string;
-    /**
-     * Use this to provide a custom context to the screen reader. Press this button to open the profile menu.
-     */
-    menuTriggerDescription?: string;
-    uploadAvatarCallback?: () => void;
-    /**
-     * Use this to provide a custom context to the screen reader. Default is "Press enter to change profile picture"
-     */
-    uploadAvatarDescription?: string;
-    /**
-     * Use this to provide a custom context to the screen reader. Default is Change profile picture
-     */
-    uploadAvatarLabel?: string;
-    /**
-     * This slot is used to render the update notification.
-     */
-    updateNotificationSlot?: ReactNode;
-};
-export type AppMenuFooterProps = CommonProps & {
-    children?: ReactNode;
+import { ReactNode } from 'react';
+import { AppProfileMenuButtonProps } from '../../app-profile-menu-button/AppProfileMenuButton.js';
+export type AppMenuFooterProps = Omit<AppProfileMenuButtonProps, 'variant'> & {
     computeSlot?: ReactNode;
+    /** This slot is used to render the update notification. */
+    updateNotificationSlot?: ReactNode;
+    /** Whether the profile control is available at desktop breakpoints. */
+    isProfileMenuButtonVisibleOnDesktop?: boolean;
 };
-export type AppMenuFooterHeaderProps = CommonProps & {
-    asMenuHeader?: boolean;
-};
-export declare const AppMenuFooter: ({ avatar, avatarPair, badgeLabel, children, computeSlot, description, title, menuTriggerDescription, uploadAvatarCallback, uploadAvatarLabel, uploadAvatarDescription, updateNotificationSlot, }: AppMenuFooterProps) => import("react/jsx-runtime").JSX.Element;
-export {};
+export declare const AppMenuFooter: ({ children, computeSlot, isProfileMenuButtonVisibleOnDesktop, updateNotificationSlot, ...profileMenuButtonProps }: AppMenuFooterProps) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/app-menu/parts/AppMenuFooter.js

@@ -1,190 +1,24 @@
-import { Actionable as e } from "../../actionable/Actionable.js";
-import { Icon as t } from "../../icon/Icon.js";
-import { Menu as n } from "../../menu/Menu.js";
-import { MenuContent as r } from "../../menu/parts/MenuContent.js";
-import { MenuTrigger as i } from "../../menu/parts/MenuTrigger.js";
-import { useAppMenuContext as a } from "./AppMenu.context.js";
-import { Avatar as o } from "../../avatar/Avatar.js";
-import { AvatarFallback as s } from "../../avatar/parts/AvatarFallback.js";
-import { AvatarImage as c } from "../../avatar/parts/AvatarImage.js";
-import { Badge as l } from "../../badge/Badge.js";
-import { MenuHeader as u } from "../../menu/parts/MenuHeader.js";
-import { cloneElement as d, isValidElement as f, useRef as p, useState as m } from "react";
-import { uyMerge as h } from "@payfit/unity-themes";
-import { jsx as g, jsxs as _ } from "react/jsx-runtime";
-import { FormattedMessage as v, useIntl as y } from "react-intl";
+import { isDesktopBreakpoint as e, useBreakpointListener as t } from "../../../hooks/use-breakpoint-listener.js";
+import { useAppMenuContext as n } from "./AppMenu.context.js";
+import { AppProfileMenuButton as r } from "../../app-profile-menu-button/AppProfileMenuButton.js";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region src/components/app-menu/parts/AppMenuFooter.tsx
-var b = (e) => /* @__PURE__ */ _(o, {
-	"aria-label": `${e.title} avatar`,
-	size: "md",
-	variant: "square",
-	"aria-labelledby": "profile-button-label",
-	children: [
-		/* @__PURE__ */ g(c, {
-			src: e.avatar,
-			alt: e.title ?? ""
-		}),
-		/* @__PURE__ */ g(s, {
-			variant: "initials",
-			delayMs: 100,
-			children: e.title
-		}),
-		e.avatarPair && f(e.avatarPair) && d(e.avatarPair, { isHidden: !e.isPairAvatarVisible })
-	]
-}), x = ({ avatar: n, avatarPair: r, title: i, uploadAvatarCallback: a, uploadAvatarLabel: o, uploadAvatarDescription: s }) => {
-	let [c, l] = m(!0), u = y(), d = () => {
-		r && l((e) => !e);
-	}, f = h("uy:group/avatar uy:cursor-pointer uy:relative uy:leading-[0] uy:rounded-75 uy:focus-visible:outline-none uy:focus-visible:ring-2 uy:focus-visible:ring-utility-focus-ring uy:focus-visible:ring-offset-2");
-	return /* @__PURE__ */ _(e, {
-		"aria-describedby": "profile-picture-change-desc",
-		"aria-label": o || u.formatMessage({
-			id: "unity:component:app-menu:footer:profile-button:avatar:change",
-			defaultMessage: "Change profile picture"
-		}),
-		className: f,
-		onHoverStart: d,
-		onHoverEnd: d,
-		onFocus: d,
-		onBlur: d,
-		onPress: () => {
-			a?.();
-		},
-		children: [/* @__PURE__ */ g(b, {
-			avatar: n,
-			avatarPair: r,
-			title: i,
-			isPairAvatarVisible: c
-		}), /* @__PURE__ */ _("div", {
-			className: "uy:flex uy:pointer-events-none uy:opacity-0 uy:group-hover/avatar:opacity-90 uy:group-hover/avatar:pointer-events-auto uy:group-focus-visible/avatar:opacity-90 uy:group-focus-visible/avatar:pointer-events-auto uy:bg-utility-backdrop uy:rounded-75 uy:absolute uy:top-0 uy:left-0 uy:w-full uy:h-full uy:transition-all uy:duration-200 uy:items-center uy:justify-center",
-			children: [/* @__PURE__ */ g(t, {
-				alt: "Camera",
-				color: "content.inverted",
-				size: 24,
-				src: "CameraOutlined"
-			}), /* @__PURE__ */ g("span", {
-				className: "uy:sr-only",
-				id: "profile-picture-change-desc",
-				children: s || /* @__PURE__ */ g(v, {
-					id: "unity:component:app-menu:footer:profile-button:avatar:change-description",
-					defaultMessage: "Press enter to change profile picture"
-				})
-			})]
-		})]
-	});
-}, S = ({ asMenuHeader: e = !1, avatar: n, avatarPair: r, badgeLabel: i, description: a, menuTriggerDescription: o, title: s, uploadAvatarCallback: c, uploadAvatarLabel: u, uploadAvatarDescription: d }) => /* @__PURE__ */ _("div", {
-	className: "uy:min-w-[240px] uy:w-full uy:flex uy:items-center",
-	children: [
-		/* @__PURE__ */ g("div", {
-			className: "uy:mr-150 uy:flex uy:items-center",
-			children: c ? /* @__PURE__ */ g(x, {
-				avatar: n,
-				avatarPair: r,
-				title: s,
-				uploadAvatarLabel: u,
-				uploadAvatarDescription: d,
-				uploadAvatarCallback: c
-			}) : /* @__PURE__ */ g(b, {
-				avatar: n,
-				avatarPair: r,
-				title: s,
-				isPairAvatarVisible: !0
-			})
-		}),
-		/* @__PURE__ */ _("div", {
-			className: "uy:flex uy:flex-col uy:text-left uy:leading-[1.25] uy:min-w-[50%] uy:flex-grow",
-			children: [
-				/* @__PURE__ */ g("span", {
-					id: "profile-button-label",
-					className: "uy:typography-body-strong uy:text-content-neutral uy:text-wrap",
-					"data-dd-privacy": "mask",
-					children: s
-				}),
-				/* @__PURE__ */ g("span", {
-					className: "uy:typography-body-small uy:text-content-neutral-low",
-					"data-dd-privacy": "allow",
-					children: a
-				}),
-				!e && /* @__PURE__ */ g("span", {
-					id: "profile-button-description",
-					className: "uy:sr-only",
-					children: o || /* @__PURE__ */ g(v, {
-						id: "unity:component:app-menu:footer:profile-button:description",
-						defaultMessage: "Press this button to open the profile menu."
-					})
-				})
-			]
-		}),
-		/* @__PURE__ */ g("div", {
-			className: "uy:p-100",
-			children: e ? /* @__PURE__ */ g(l, {
-				className: "uy:capitalize",
-				variant: "neutral",
-				children: i
-			}) : /* @__PURE__ */ g(t, {
-				src: "CaretUpDownOutlined",
-				alt: "open",
-				size: 20,
-				color: "content.neutral.low"
-			})
-		})
-	]
-}), C = ({ avatar: t, avatarPair: o, badgeLabel: s, children: c, computeSlot: l, description: d, title: f, menuTriggerDescription: h, uploadAvatarCallback: v, uploadAvatarLabel: y, uploadAvatarDescription: b, updateNotificationSlot: x }) => {
-	let { isMobileMenuOpen: C } = a(), [w, T] = m(!1), E = p(null);
-	return /* @__PURE__ */ _("aside", {
+var o = ({ children: o, computeSlot: s, isProfileMenuButtonVisibleOnDesktop: c = !0, updateNotificationSlot: l, ...u }) => {
+	let { isMobileMenuOpen: d } = n(), f = t();
+	return /* @__PURE__ */ a("aside", {
 		className: "uy:shrink-0 uy:bg-canvas uy:md:mt-auto uy:md:bg-[transparent] uy:data-[mobile-open=false]:hidden uy:md:data-[mobile-open=false]:block uy:data-[mobile-open=true]:block",
-		"data-mobile-open": C,
+		"data-mobile-open": d,
 		id: "app-menu-profile-button",
 		children: [
+			s,
 			l,
-			x,
-			/* @__PURE__ */ _(n, {
-				isOpen: w,
-				onOpenChange: T,
-				placement: "top left",
-				triggerRef: E,
-				children: [/* @__PURE__ */ g(i, {
-					asChild: !0,
-					children: /* @__PURE__ */ g(e, {
-						ref: E,
-						className: "uy:transition-colors uy:rounded-75 uy:px-150 uy:py-100 uy:w-full uy:theme-legacy:not-aria-disabled:hover:bg-surface-neutral-low-hover uy:theme-rebrand:not-aria-disabled:hover:bg-surface-neutral-lowest-hover uy:theme-legacy:not-aria-disabled:active:bg-surface-neutral-low-active uy:theme-rebrand:not-aria-disabled:active:bg-surface-neutral-lowest-active uy:theme-legacy:not-aria-disabled:data-[pressed=true]:bg-surface-neutral-low-pressed uy:theme-rebrand:not-aria-disabled:data-[pressed=true]:bg-surface-neutral-lowest-pressed uy:not-aria-disabled:focus-visible:outline-none uy:not-aria-disabled:focus-visible:ring-2 uy:not-aria-disabled:focus-visible:ring-utility-focus-ring uy:not-aria-disabled:focus-visible:ring-offset-2",
-						"aria-labelledby": "profile-button-label",
-						"aria-describedby": "profile-button-description",
-						onPress: () => {
-							T(!0);
-						},
-						children: /* @__PURE__ */ g(S, {
-							avatar: t,
-							avatarPair: o,
-							badgeLabel: s,
-							description: d,
-							menuTriggerDescription: h,
-							title: f,
-							uploadAvatarCallback: v,
-							uploadAvatarLabel: y,
-							uploadAvatarDescription: b
-						})
-					})
-				}), /* @__PURE__ */ _(r, {
-					width: 312,
-					children: [/* @__PURE__ */ g(u, {
-						className: "uy:rounded-75",
-						children: /* @__PURE__ */ g(S, {
-							asMenuHeader: !0,
-							avatar: t,
-							avatarPair: o,
-							badgeLabel: s,
-							description: d,
-							menuTriggerDescription: h,
-							title: f,
-							uploadAvatarCallback: v,
-							uploadAvatarLabel: y,
-							uploadAvatarDescription: b
-						})
-					}), c]
-				})]
+			(c || !e(f)) && /* @__PURE__ */ i(r, {
+				...u,
+				variant: "large",
+				children: o
 			})
 		]
 	});
 };
 //#endregion
-export { C as AppMenuFooter };
+export { o as AppMenuFooter };

package/dist/esm/components/app-profile-menu-button/AppProfileMenuButton.d.ts

@@ -0,0 +1,25 @@
+import { ReactElement, ReactNode } from 'react';
+import { MenuTriggerProps } from 'react-aria-components/Menu';
+import { PopoverProps } from 'react-aria-components/Popover';
+import { AvatarPairProps } from '../avatar/parts/AvatarPair.js';
+export type AppProfileMenuButtonProps = {
+    avatar?: string;
+    avatarPair?: ReactElement<AvatarPairProps>;
+    title?: string;
+    description?: ReactNode;
+    badgeLabel?: string;
+    children?: ReactNode;
+    /** Use this to provide custom screen-reader context for the menu trigger. */
+    menuTriggerDescription?: string;
+    uploadAvatarCallback?: () => void;
+    /** Defaults to "Press enter to change profile picture". */
+    uploadAvatarDescription?: string;
+    /** Defaults to "Change profile picture". */
+    uploadAvatarLabel?: string;
+    /** Trigger treatment for application-shell surfaces. */
+    variant?: 'small' | 'large';
+    /** Defaults to square to preserve AppMenuFooter compatibility. */
+    avatarVariant?: 'circle' | 'square';
+    placement?: PopoverProps['placement'];
+} & Pick<MenuTriggerProps, 'defaultOpen' | 'isOpen' | 'onOpenChange'>;
+export declare const AppProfileMenuButton: ({ avatar, avatarPair, avatarVariant, badgeLabel, children, defaultOpen, description, isOpen, menuTriggerDescription, onOpenChange, placement, title, uploadAvatarCallback, uploadAvatarDescription, uploadAvatarLabel, variant, }: AppProfileMenuButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/app-profile-menu-button/AppProfileMenuButton.js

@@ -0,0 +1,70 @@
+import { Actionable as e } from "../actionable/Actionable.js";
+import { Menu as t } from "../menu/Menu.js";
+import { MenuContent as n } from "../menu/parts/MenuContent.js";
+import { MenuTrigger as r } from "../menu/parts/MenuTrigger.js";
+import { MenuHeader as i } from "../menu/parts/MenuHeader.js";
+import { AppProfileMenuHeader as a } from "./parts/AppProfileMenuHeader.js";
+import { useId as o, useRef as s } from "react";
+import { uyTv as c } from "@payfit/unity-themes";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/components/app-profile-menu-button/AppProfileMenuButton.tsx
+var d = c({
+	base: [
+		"uy:transition-colors uy:rounded-75",
+		"uy:theme-legacy:data-[hovered=true]:bg-surface-neutral-low-hover uy:theme-legacy:hover:bg-surface-neutral-low-hover",
+		"uy:theme-rebrand:data-[hovered=true]:bg-surface-neutral-lowest-hover uy:theme-rebrand:hover:bg-surface-neutral-lowest-hover",
+		"uy:theme-legacy:data-[pressed=true]:bg-surface-neutral-low-pressed uy:theme-legacy:active:bg-surface-neutral-low-active",
+		"uy:theme-rebrand:data-[pressed=true]:bg-surface-neutral-lowest-pressed uy:theme-rebrand:active:bg-surface-neutral-lowest-active",
+		"uy:data-[focus-visible=true]:outline-none uy:data-[focus-visible=true]:ring-2 uy:data-[focus-visible=true]:ring-utility-focus-ring uy:data-[focus-visible=true]:ring-offset-2",
+		"uy:focus-visible:outline-none uy:focus-visible:ring-2 uy:focus-visible:ring-utility-focus-ring uy:focus-visible:ring-offset-2"
+	],
+	variants: { variant: {
+		large: "uy:w-full uy:px-150 uy:py-100",
+		small: "uy:pr-0 uy:pl-100 uy:py-25"
+	} }
+}), f = ({ avatar: c, avatarPair: f, avatarVariant: p = "square", badgeLabel: m, children: h, defaultOpen: g, description: _, isOpen: v, menuTriggerDescription: y, onOpenChange: b, placement: x, title: S, uploadAvatarCallback: C, uploadAvatarDescription: w, uploadAvatarLabel: T, variant: E = "large" }) => {
+	let D = s(null), O = o(), k = o(), A = {
+		avatar: c,
+		avatarPair: f,
+		avatarSize: E === "small" ? "md" : "lg",
+		avatarVariant: p,
+		badgeLabel: m,
+		description: _,
+		labelId: O,
+		menuTriggerDescription: y,
+		title: S,
+		triggerDescriptionId: k,
+		triggerVariant: E,
+		uploadAvatarCallback: C,
+		uploadAvatarDescription: w,
+		uploadAvatarLabel: T
+	};
+	return /* @__PURE__ */ u(t, {
+		defaultOpen: g,
+		isOpen: v,
+		onOpenChange: b,
+		placement: x ?? (E === "small" ? "bottom right" : "top left"),
+		triggerRef: D,
+		children: [/* @__PURE__ */ l(r, {
+			asChild: !0,
+			children: /* @__PURE__ */ l(e, {
+				ref: D,
+				"aria-describedby": k,
+				"aria-labelledby": O,
+				className: d({ variant: E }),
+				children: /* @__PURE__ */ l(a, { ...A })
+			})
+		}), /* @__PURE__ */ u(n, {
+			width: 312,
+			children: [/* @__PURE__ */ l(i, {
+				className: "uy:rounded-75",
+				children: /* @__PURE__ */ l(a, {
+					...A,
+					asMenuHeader: !0
+				})
+			}), h]
+		})]
+	});
+};
+//#endregion
+export { f as AppProfileMenuButton };

package/dist/esm/components/app-profile-menu-button/parts/AppProfileAvatar.d.ts

@@ -0,0 +1,18 @@
+import { ReactElement } from 'react';
+import { AvatarPairProps } from '../../avatar/parts/AvatarPair.js';
+export type AppProfileAvatarProps = {
+    avatar?: string;
+    avatarPair?: ReactElement<AvatarPairProps>;
+    avatarSize: 'md' | 'lg';
+    avatarVariant: 'circle' | 'square';
+    isPairAvatarVisible: boolean;
+    labelId: string;
+    title?: string;
+};
+export declare const AppProfileAvatar: ({ avatar, avatarPair, avatarSize, avatarVariant, isPairAvatarVisible, labelId, title, }: AppProfileAvatarProps) => import("react/jsx-runtime").JSX.Element;
+export type InteractiveAppProfileAvatarProps = Omit<AppProfileAvatarProps, 'isPairAvatarVisible'> & {
+    uploadAvatarCallback: () => void;
+    uploadAvatarDescription?: string;
+    uploadAvatarLabel?: string;
+};
+export declare const InteractiveAppProfileAvatar: ({ avatar, avatarPair, avatarSize, avatarVariant, labelId, title, uploadAvatarCallback, uploadAvatarDescription, uploadAvatarLabel, }: InteractiveAppProfileAvatarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/app-profile-menu-button/parts/AppProfileAvatar.js

@@ -0,0 +1,79 @@
+import { Actionable as e } from "../../actionable/Actionable.js";
+import { Icon as t } from "../../icon/Icon.js";
+import { Avatar as n } from "../../avatar/Avatar.js";
+import { AvatarFallback as r } from "../../avatar/parts/AvatarFallback.js";
+import { AvatarImage as i } from "../../avatar/parts/AvatarImage.js";
+import { cloneElement as a, isValidElement as o, useId as s, useState as c } from "react";
+import { uyMerge as l } from "@payfit/unity-themes";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { FormattedMessage as f, useIntl as p } from "react-intl";
+//#region src/components/app-profile-menu-button/parts/AppProfileAvatar.tsx
+var m = ({ avatar: e, avatarPair: t, avatarSize: s, avatarVariant: c, isPairAvatarVisible: l, labelId: f, title: p }) => /* @__PURE__ */ d(n, {
+	"aria-labelledby": f,
+	size: s,
+	variant: c,
+	children: [
+		/* @__PURE__ */ u(i, {
+			src: e,
+			alt: p ?? ""
+		}),
+		/* @__PURE__ */ u(r, {
+			variant: "initials",
+			delayMs: 100,
+			children: p
+		}),
+		t && o(t) && a(t, { isHidden: !l })
+	]
+}), h = ({ avatar: n, avatarPair: r, avatarSize: i, avatarVariant: a, labelId: o, title: h, uploadAvatarCallback: g, uploadAvatarDescription: _, uploadAvatarLabel: v }) => {
+	let [y, b] = c(!1), [x, S] = c(!1), C = s(), w = p(), T = !(y || x);
+	return /* @__PURE__ */ d(e, {
+		"aria-describedby": C,
+		"aria-label": v ?? w.formatMessage({
+			id: "unity:component:app-menu:footer:profile-button:avatar:change",
+			defaultMessage: "Change profile picture"
+		}),
+		className: l("uy:group/avatar uy:cursor-pointer uy:relative uy:leading-[0] uy:rounded-75 uy:focus-visible:outline-none uy:focus-visible:ring-2 uy:focus-visible:ring-utility-focus-ring uy:focus-visible:ring-offset-2"),
+		onBlur: () => {
+			S(!1);
+		},
+		onFocus: () => {
+			S(!0);
+		},
+		onHoverEnd: () => {
+			b(!1);
+		},
+		onHoverStart: () => {
+			b(!0);
+		},
+		onPress: g,
+		children: [/* @__PURE__ */ u(m, {
+			avatar: n,
+			avatarPair: r,
+			avatarSize: i,
+			avatarVariant: a,
+			isPairAvatarVisible: T,
+			labelId: o,
+			title: h
+		}), /* @__PURE__ */ d("div", {
+			className: "uy:flex uy:pointer-events-none uy:opacity-0 uy:group-hover/avatar:opacity-90 uy:group-data-[focus-visible=true]/avatar:opacity-90 uy:group-focus-visible/avatar:opacity-90 uy:bg-utility-backdrop uy:rounded-75 uy:absolute uy:inset-0 uy:transition-all uy:duration-200 uy:items-center uy:justify-center",
+			children: [/* @__PURE__ */ u(t, {
+				alt: w.formatMessage({
+					id: "unity:component:app-menu:footer:profile-button:avatar:camera",
+					defaultMessage: "Camera"
+				}),
+				color: "content.inverted",
+				size: 24,
+				src: "CameraOutlined"
+			}), /* @__PURE__ */ u("span", {
+				className: "uy:sr-only",
+				id: C,
+				children: _ ?? /* @__PURE__ */ u(f, {
+					id: "unity:component:app-menu:footer:profile-button:avatar:change-description",
+					defaultMessage: "Press enter to change profile picture"
+				})
+			})]
+		})]
+	});
+};
+//#endregion
+export { m as AppProfileAvatar, h as InteractiveAppProfileAvatar };

package/dist/esm/components/app-profile-menu-button/parts/AppProfileMenuHeader.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+import { AppProfileAvatarProps } from './AppProfileAvatar.js';
+export type AppProfileMenuHeaderProps = Pick<AppProfileAvatarProps, 'avatar' | 'avatarPair' | 'avatarSize' | 'avatarVariant' | 'labelId' | 'title'> & {
+    asMenuHeader?: boolean;
+    badgeLabel?: string;
+    description?: ReactNode;
+    menuTriggerDescription?: string;
+    triggerDescriptionId: string;
+    triggerVariant: 'small' | 'large';
+    uploadAvatarCallback?: () => void;
+    uploadAvatarDescription?: string;
+    uploadAvatarLabel?: string;
+};
+export declare const AppProfileMenuHeader: ({ asMenuHeader, avatar, avatarPair, avatarSize, avatarVariant, badgeLabel, description, labelId, menuTriggerDescription, title, triggerDescriptionId, triggerVariant, uploadAvatarCallback, uploadAvatarDescription, uploadAvatarLabel, }: AppProfileMenuHeaderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/app-profile-menu-button/parts/AppProfileMenuHeader.js

@@ -0,0 +1,88 @@
+import { Icon as e } from "../../icon/Icon.js";
+import { Text as t } from "../../text/Text.js";
+import { Badge as n } from "../../badge/Badge.js";
+import { AppProfileAvatar as r, InteractiveAppProfileAvatar as i } from "./AppProfileAvatar.js";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { useIntl as s } from "react-intl";
+//#region src/components/app-profile-menu-button/parts/AppProfileMenuHeader.tsx
+var c = ({ asMenuHeader: c = !1, avatar: l, avatarPair: u, avatarSize: d, avatarVariant: f, badgeLabel: p, description: m, labelId: h, menuTriggerDescription: g, title: _, triggerDescriptionId: v, triggerVariant: y, uploadAvatarCallback: b, uploadAvatarDescription: x, uploadAvatarLabel: S }) => {
+	let C = s(), w = g ?? C.formatMessage({
+		id: "unity:component:app-menu:footer:profile-button:description",
+		defaultMessage: "Press this button to open the profile menu."
+	});
+	return /* @__PURE__ */ o("div", {
+		className: "uy:w-full uy:flex uy:items-center",
+		"data-unity-slot": "profile-summary",
+		children: [
+			/* @__PURE__ */ a("div", {
+				className: "uy:mr-150 uy:flex uy:items-center",
+				"data-unity-slot": "avatar",
+				children: b ? /* @__PURE__ */ a(i, {
+					avatar: l,
+					avatarPair: u,
+					avatarSize: d,
+					avatarVariant: f,
+					labelId: h,
+					title: _,
+					uploadAvatarCallback: b,
+					uploadAvatarDescription: x,
+					uploadAvatarLabel: S
+				}) : /* @__PURE__ */ a(r, {
+					avatar: l,
+					avatarPair: u,
+					avatarSize: d,
+					avatarVariant: f,
+					isPairAvatarVisible: !0,
+					labelId: h,
+					title: _
+				})
+			}),
+			/* @__PURE__ */ o("div", {
+				className: "uy:flex uy:flex-col uy:text-left uy:leading-[1.25] uy:min-w-0 uy:flex-grow",
+				"data-unity-slot": "profile-details",
+				children: [
+					/* @__PURE__ */ a(t, {
+						asElement: "span",
+						className: "uy:w-full",
+						color: "content.neutral",
+						"data-dd-privacy": "mask",
+						id: c ? void 0 : h,
+						lineClamp: 1,
+						variant: d === "md" ? "bodySmallStrong" : "bodyStrong",
+						children: _
+					}),
+					/* @__PURE__ */ a(t, {
+						asElement: "span",
+						className: "uy:w-full",
+						color: "content.neutral.low",
+						"data-dd-privacy": "allow",
+						lineClamp: 1,
+						variant: "bodySmall",
+						children: m
+					}),
+					!c && /* @__PURE__ */ a("span", {
+						id: v,
+						className: "uy:sr-only",
+						children: w
+					})
+				]
+			}),
+			/* @__PURE__ */ a("div", {
+				className: "uy:p-100",
+				"data-unity-slot": "disclosure",
+				children: c ? p && /* @__PURE__ */ a(n, {
+					className: "uy:capitalize",
+					variant: "neutral",
+					children: p
+				}) : /* @__PURE__ */ a(e, {
+					src: y === "small" ? "CaretDownOutlined" : "CaretUpDownOutlined",
+					alt: w,
+					size: 20,
+					color: "content.neutral.low"
+				})
+			})
+		]
+	});
+};
+//#endregion
+export { c as AppProfileMenuHeader };