@payfit/unity-components 2.60.8 → 2.60.10

package/dist/esm/components/avatar/Avatar.d.ts

@@ -163,6 +163,13 @@ declare const avatarRoot: import('tailwind-variants').TVReturnType<{} | {
         primary: string;
     };
 }, undefined, undefined, unknown, unknown, undefined>>>;
+type AvatarAccessibleName = {
+    'aria-label': string;
+    'aria-labelledby'?: string;
+} | {
+    'aria-label'?: string;
+    'aria-labelledby': string;
+};
 export type AvatarProps = PropsWithChildren<{
     /** Additional class names to apply to the avatar */
     className?: string;
@@ -172,17 +179,13 @@ export type AvatarProps = PropsWithChildren<{
     size?: VariantProps<typeof avatarRoot>['size'];
     /** Color variant for icon avatars. One of: teal, plum, purple, orange, neutral, warning, success, info, danger, promo, primary */
     color?: VariantProps<typeof avatarRoot>['color'];
-    /** Accessible label for the avatar */
-    'aria-label': string;
-    /** ID of the element that labels the avatar */
-    'aria-labelledby'?: string;
     /** ID of the element that describes the avatar */
     'aria-describedby'?: string;
     /** Additional details for the avatar */
     'aria-details'?: string;
     /** Indicates if the avatar is hidden from assistive technologies */
     'aria-hidden'?: boolean;
-}>;
+} & AvatarAccessibleName>;
 /**
  * The Avatar component displays visual or text content for representing people or entities.
  * It supports images, initials, placeholders, and icons with customizable colors and sizes.
@@ -215,32 +218,14 @@ export type AvatarProps = PropsWithChildren<{
  * - Use the `square` variant for representing companies or organizations
  * - The `color` prop applies background and text color variants for icon avatars
  * - Always provide an `aria-label` or `aria-labelledby` for accessibility
+ * - Use `aria-description` when a short additional description helps screen reader users
+ * - Use `aria-labelledby` and `aria-describedby` to associate the avatar with visible text that identifies the represented person or entity
+ * - The avatar has `role="img"` by default and should not be used as an interactive element directly; wrap it in a button or Actionable when it triggers an action
  * @see {@link AvatarProps} for all available props
  * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/avatar GitHub}
  * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library?node-id=19-3741 Figma}
  * @see Design docs in {@link https://www.payfit.design/24f360409/p/69c10a-avatar Payfit.design}
  * @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/component-reference-avatar unity-components.payfit.io}
  */
-declare const Avatar: React.ForwardRefExoticComponent<{
-    /** Additional class names to apply to the avatar */
-    className?: string;
-    /** The avatar's variant. One of: circle or square */
-    variant?: VariantProps<typeof avatarRoot>["variant"];
-    /** Size of the avatar. One of: xs, sm, md, lg, xl */
-    size?: VariantProps<typeof avatarRoot>["size"];
-    /** Color variant for icon avatars. One of: teal, plum, purple, orange, neutral, warning, success, info, danger, promo, primary */
-    color?: VariantProps<typeof avatarRoot>["color"];
-    /** Accessible label for the avatar */
-    'aria-label': string;
-    /** ID of the element that labels the avatar */
-    'aria-labelledby'?: string;
-    /** ID of the element that describes the avatar */
-    'aria-describedby'?: string;
-    /** Additional details for the avatar */
-    'aria-details'?: string;
-    /** Indicates if the avatar is hidden from assistive technologies */
-    'aria-hidden'?: boolean;
-} & {
-    children?: React.ReactNode | undefined;
-} & React.RefAttributes<HTMLSpanElement>>;
+declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLSpanElement>>;
 export { Avatar };

package/dist/esm/components/badge/Badge.d.ts

@@ -121,6 +121,10 @@ export type BadgeProps = PropsWithChildren<{
 }>;
 /**
  * The Badge component is a visual label or indicator used to convey status or highlight content.
+ * @remarks
+ * - The badge role is auto-calculated from the `variant`: `warning`, `danger`, and `attention` use `alert`; other variants use `status`.
+ * - Override the role with `role="status"` or `role="alert"` only when the surrounding context needs a different announcement behavior.
+ * - Use `aria-label` when the visible badge text is too short or when no nearby content explains the badge's purpose.
  */
 declare const Badge: import('react').ForwardRefExoticComponent<{
     /**

package/dist/esm/components/carousel/Carousel.d.ts

@@ -55,6 +55,10 @@ export interface CarouselProps {
  * </Carousel>
  * ```
  * ## Accessibility
+ * - The carousel region is labelled by `CarouselHeader` by default, or by `aria-label` when provided
+ * - Tab moves focus into `CarouselContent` on the first visible slide
+ * - Only visible `CarouselSlide`s can receive focus; hidden slides are removed from assistive technologies and keyboard navigation
+ * - Carousel slides use roving tabindex so only the current slide has `tabindex=0`
  * - Arrow keys navigate between individual slides
  * - PageUp/PageDown jump to the first slide of the next/previous page
  * - Home/End keys jump to the first/last slide

package/dist/esm/components/data-table/parts/DataTableBulkActions.d.ts

@@ -53,6 +53,7 @@ export interface DataTableBulkActionsProps<TData> {
  * - Use F6 keyboard shortcut to focus the action bar when it's visible and has actions
  * - The keyboard shortcut provides quick access to bulk actions for users with disabilities
  * - When triggered, focus moves to the first focusable element in the action bar (typically the first action button)
+ * - Once focused, use Tab to move between actions and Escape to return focus to the previously focused element
  * - The shortcut only works when rows are selected and the action bar is visible
  * - The selection count and clear button are rendered automatically via `prefixContent`
  * @see {@link DataTableBulkActionsProps} for all available props

package/dist/esm/components/filter-toolbar/FilterToolbar.d.ts

@@ -95,6 +95,7 @@ export declare const filterToolbar: import('tailwind-variants').TVReturnType<{
  * - Each filter definition must include a unique `id`, `label`, and `renderControl` function to render the filter UI
  * - The `renderLabel` function customizes how selected values appear in the filter button
  * - Newly added filters automatically open their popover to guide users through configuration
+ * - Filters supplied through `initialValue` do not open automatically; their popover opens only after user interaction
  * - All filters can be cleared at once using the "Clear filters" button
  * - The component is uncontrolled by default but notifies parent components of state changes via callbacks
  * @see {@link FilterToolbarProps} for all available props

package/dist/esm/components/icon/Icon.d.ts

@@ -257,6 +257,9 @@ export type IconProps = VariantProps<typeof icon> & Pick<HTMLAttributes<HTMLSpan
 };
 /**
  * The `Icon` component displays an icon from the Unity icon set.
+ * @remarks
+ * - Provide `alt` when the icon has no visible label; it is exposed as the icon's `aria-label`.
+ * - When a visible label exists, use `aria-labelledby` to reference it instead. In that case, `alt` is not exposed as an additional `aria-label`.
  */
 export declare function Icon({ alt, color, size, src, role, display, ...rest }: IconProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/components/link/RawLink.d.ts

@@ -212,6 +212,9 @@ export type RawLinkProps = Omit<AriaLinkProps, 'style' | 'className'> & {
 };
 /**
  * Links allow users to navigate to different pages or sections.
+ * @remarks
+ * - Links support mouse and touch interactions, keyboard navigation, and activation with Enter or Space.
+ * - Use a link when an action navigates or changes the URL. Use a button for actions without a meaningful destination.
  */
 declare const RawLink: import('react').ForwardRefExoticComponent<Omit<AriaLinkProps, "style" | "className"> & {
     /**

package/dist/esm/components/payfit-brand/PayFitBrand.d.ts

@@ -44,5 +44,8 @@ export type PayFitBrandProps = {
 };
 /**
  * The PayFitBrand component represents the PayFit logo with several properties that follow our brand guidelines.
+ * @remarks
+ * - Provide a meaningful `label` and, when useful, a `description` so screen readers can announce the brand in context.
+ * - The brand is not focusable by default, but can be part of a focusable element such as a link, so these accessible texts should always be provided.
  */
 export declare const PayFitBrand: import('react').ForwardRefExoticComponent<PayFitBrandProps & import('react').RefAttributes<SVGSVGElement>>;

package/dist/esm/components/radio-button-group/RadioButtonGroup.d.ts

@@ -7,6 +7,9 @@ export type RadioButtonGroupProps = Omit<RadioGroupProps, 'className' | 'style'>
 /**
  * The `RadioButtonGroup` component enables users to select a single option from a set of mutually exclusive choices.
  * It manages the selection state, keyboard navigation, focus handling, and accessibility features for a group of RadioButton components.
+ * @remarks
+ * - Arrow keys move focus between options and select the focused option.
+ * - Disabled options are skipped automatically during keyboard navigation.
  * @example
  * ```tsx
  * import { RadioButton, RadioButtonGroup } from '@payfit/unity-components'

package/dist/esm/components/skip-links/SkipLinks.d.ts

@@ -44,6 +44,9 @@ export interface SkipLinkProps extends PropsWithChildren<HTMLAttributes<HTMLAnch
  * @remarks
  * - Skip links are visually hidden by default and become visible when focused
  * - Each link should target an element with a valid ID and tabIndex={-1}
+ * - The component exposes navigation and list semantics labelled through `aria-labelledby`
+ * - Links follow the normal tab order and can be activated with Enter or Space
+ * - Place skip links where they should occur in the page tab order and avoid fixed or absolute positioning that could conflict with other skip links
  * - The component follows WCAG 2.1 guidelines for skip navigation
  * @see {@link SkipLinksProps} for all available props
  * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/skip-links GitHub}

package/dist/esm/components/spinner/Spinner.d.ts

@@ -7,6 +7,13 @@ export type SpinnerProps = Pick<HTMLAttributes<HTMLDivElement>, 'aria-hidden' |
     /** Te spinner's color, can be 'primary', 'inverted', or 'inherit', which will make it take the element's `currentColor` */
     color?: 'primary' | 'inverted' | 'inherit';
 };
+/**
+ * The Spinner component indicates that content is loading or an action is being processed.
+ * @remarks
+ * - It uses `role="status"` and an `aria-live="polite"` region by default.
+ * - It is not included in the keyboard tab order.
+ * - Always provide a `label` for assistive technologies, even though it is only visible at the medium size.
+ */
 export declare const Spinner: import('react').ForwardRefExoticComponent<Pick<HTMLAttributes<HTMLDivElement>, "role" | "aria-hidden"> & {
     /** The label text for the spinner */
     label: string;

package/dist/esm/components/timeline/Timeline.d.ts

@@ -34,6 +34,10 @@ export type TimelineProps = {
 };
 /**
  * Timeline component displays chronological events in vertical or horizontal orientation
+ * @remarks
+ * - Provide an `aria-label` that identifies the timeline for screen reader users.
+ * - Use `customProgressLabel` when the overall progress needs additional context.
+ * - Step titles and state descriptions are associated through ARIA attributes, while visual status badges are hidden from assistive technologies to avoid duplicate announcements.
  * @example
  * ```tsx
  * <Timeline orientation="vertical" type="numbered">

package/dist/esm/docs/reference/catalog/catalog.generated.d.ts

@@ -103,7 +103,7 @@ export declare const catalogEntries: ({
     };
     related: never[];
     section: "patterns";
-    tags: ("type:pattern" | "category:navigation")[];
+    tags: ("type:pattern" | "category:content" | "category:navigation" | "behavior:disclosure" | "behavior:editing")[];
     title: string;
     principal?: undefined;
 } | {

package/dist/esm/index.d.ts

@@ -13,6 +13,7 @@ export * from './components/app-top-bar/AppTopBar.js';
 export * from './components/app-menu/AppMenu.js';
 export * from './components/app-menu/parts/AppMenu.context.js';
 export * from './components/app-menu/parts/AppMenuFooter.js';
+export * from './components/app-profile-menu-button/AppProfileMenuButton.js';
 export * from './components/app-menu/parts/AppMenuHeader.js';
 export * from './components/app-menu/parts/AppMenuNavContent.js';
 export * from './components/autocomplete/Autocomplete.js';