@astryxdesign/core 0.4.0 → 0.4.1-canary.f4868b2

package/src/SideNav/SideNavItem.tsx

@@ -4,12 +4,17 @@
 
 /**
  * @file SideNavItem.tsx
- * @input Uses React, ReactNode, StyleX, Icon, IconType
+ * @input Uses React, ReactNode, StyleX, Icon, IconType, useMenuHover
  * @output Exports SideNavItem component and SideNavItemProps
  * @position Core implementation; used inside SideNav children
  *
  * Navigation item with icon, selected state, and nesting.
  *
+ * Collapsed items with children open their submenu flyout through
+ * `useMenuHover`, the shared hover-intent hook (same one `SideNavHeading` and
+ * `TopNavMenu` use). Hover is a progressive enhancement over the popover's
+ * click behavior and is inert on coarse pointers.
+ *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/SideNav/SideNav.doc.mjs
  * - /packages/core/src/SideNav/SideNav.test.tsx
@@ -35,17 +40,18 @@ import {
   typeScaleVars,
   durationVars,
   easeVars,
-  borderVars,
   radiusVars,
 } from '../theme/tokens.stylex';
 import {Icon, renderIconSlot, type IconType} from '../Icon';
 import {useLinkComponent} from '../Link/useLinkComponent';
 import type {LinkComponentType} from '../Link/types';
 import {usePopover} from '../Popover/usePopover';
+import {useMenuHover} from '../hooks/useMenuHover';
 import {mergeProps, mergeRefs} from '../utils';
 import type {BaseProps} from '../BaseProps';
 import {Tooltip} from '../Tooltip';
 import {navItemStyles, type NavItemSize} from '../NavItem/navItemStyles.stylex';
+import {focusOutlineProps} from '../utils/focusOutline.stylex';
 import {
   useSideNavCollapse,
   SideNavCollapseContext,
@@ -91,7 +97,10 @@ const styles = stylex.create({
     display: 'grid',
     gridTemplateRows: '1fr',
     transitionProperty: 'grid-template-rows',
-    transitionDuration: durationVars['--duration-medium'],
+    transitionDuration: {
+      default: durationVars['--duration-medium'],
+      '@media (prefers-reduced-motion: reduce)': '0s',
+    },
     transitionTimingFunction: easeVars['--ease-standard'],
   },
   childrenCollapsed: {
@@ -114,7 +123,10 @@ const styles = stylex.create({
     // target, not the glyph size, so keep the glyph on the inherited size.
     fontSize: 'inherit',
     transitionProperty: 'transform',
-    transitionDuration: durationVars['--duration-fast'],
+    transitionDuration: {
+      default: durationVars['--duration-fast'],
+      '@media (prefers-reduced-motion: reduce)': '0s',
+    },
     transitionTimingFunction: easeVars['--ease-standard'],
     flexShrink: 0,
   },
@@ -146,10 +158,14 @@ const styles = stylex.create({
   },
   // Primary action element inside the split-action row (link or button).
   // Flex:1 so it fills remaining space, giving a wide click target.
+  // `alignSelf: stretch` makes it fill the row's height too — without it the
+  // element collapses to its line box (20px), under the 24px WCAG 2.5.8
+  // target-size floor even though the row it sits in is 32px tall.
   // Resets both link and button appearance so it blends into the row.
   splitAction: {
     display: 'flex',
     alignItems: 'center',
+    alignSelf: 'stretch',
     gap: spacingVars['--spacing-2'],
     flex: 1,
     minWidth: 0,
@@ -167,16 +183,23 @@ const styles = stylex.create({
     textAlign: 'start',
     cursor: 'pointer',
   },
-  // Popover surface for collapsed items with children
+  // No border and no background: `usePopover` paints the panel this renders
+  // into. Drawing a second surface here put square corners inside its rounded
+  // ones. The radius matches so a theme retargeting `--radius-container`
+  // keeps the two in step.
   popoverSurface: {
-    borderWidth: borderVars['--border-width'],
-    borderStyle: 'solid',
-    borderColor: colorVars['--color-border'],
+    borderRadius: radiusVars['--radius-container'],
     paddingBlock: spacingVars['--spacing-1'],
     paddingInline: spacingVars['--spacing-1'],
-    marginInlineStart: spacingVars['--spacing-1'],
     minWidth: 180,
   },
+  // The gap from the rail belongs on the positioned layer, where
+  // `DropdownMenu` keeps it. On the content div it insets the content instead,
+  // leaving the panel flush against the rail.
+  popoverGap: {
+    marginInlineStart: spacingVars['--spacing-1'],
+    marginInlineEnd: spacingVars['--spacing-1'],
+  },
   popoverHeader: {
     paddingInline: spacingVars['--spacing-2'],
     paddingBlock: spacingVars['--spacing-1'],
@@ -361,6 +384,7 @@ export function SideNavItem({
   'data-testid': testId,
   ref,
   xstyle,
+  ...rest
 }: SideNavItemProps) {
   const t = useTranslator();
   const {isCollapsed} = useSideNavCollapse();
@@ -376,7 +400,7 @@ export function SideNavItem({
     hasLightDismiss: true,
     hasAutoFocus: true,
     hasCloseButton: false,
-    dialogLabel: `${label} submenu`,
+    dialogLabel: t('@astryx.sideNavItem.submenuLabel', {label}),
   });
 
   // Collapse state for items with children
@@ -434,42 +458,17 @@ export function SideNavItem({
     toggleItemCollapse();
   };
 
-  // Hover handlers for collapsed popover (mirrors TopNavMenu pattern)
-  const showTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const hideTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  const clearPopoverTimeouts = useCallback(() => {
-    if (showTimeoutRef.current) {
-      clearTimeout(showTimeoutRef.current);
-      showTimeoutRef.current = null;
-    }
-    if (hideTimeoutRef.current) {
-      clearTimeout(hideTimeoutRef.current);
-      hideTimeoutRef.current = null;
-    }
-  }, []);
-
-  const schedulePopoverShow = useCallback(() => {
-    clearPopoverTimeouts();
-    showTimeoutRef.current = setTimeout(() => {
-      popover.show({skipAutoFocus: true});
-    }, 150);
-  }, [clearPopoverTimeouts, popover]);
-
-  const schedulePopoverHide = useCallback(() => {
-    clearPopoverTimeouts();
-    hideTimeoutRef.current = setTimeout(() => {
-      popover.hide();
-    }, 200);
-  }, [clearPopoverTimeouts, popover]);
-
-  const handlePopoverMouseEnter = useCallback(() => {
-    schedulePopoverShow();
-  }, [schedulePopoverShow]);
-
-  const handlePopoverMouseLeave = useCallback(() => {
-    schedulePopoverHide();
-  }, [schedulePopoverHide]);
+  // Pointer half only. The hook's `onKeyDown`/`menuRef` drive a `useListFocus`
+  // over `[role="menuitem"]`, and this flyout is a focus-trapped dialog of
+  // links — wiring them would swallow arrow keys rather than navigate with
+  // them. Keyboard stays with `usePopover`'s trap, as in DropdownMenuSubMenu.
+  const {triggerProps: hoverTriggerProps, contentProps: hoverContentProps} =
+    useMenuHover({
+      show: popover.show,
+      hide: popover.hide,
+      isOpen: popover.isOpen,
+      isEnabled: isCollapsed && hasChildren,
+    });
 
   // In collapsed mode: hide items without icons
   if (isCollapsed && !icon) {
@@ -484,16 +483,21 @@ export function SideNavItem({
       displayIcon &&
       renderIconSlot(displayIcon, {
         size: 'sm',
-        color: isSelected ? 'primary' : isDisabled ? 'disabled' : 'secondary',
+        // `inherit` so a selected row's icon follows the row to HighlightText
+        // under forced colors. Identical to `primary` otherwise: both token
+        // families are emitted from one expression.
+        color: isSelected ? 'inherit' : isDisabled ? 'disabled' : 'secondary',
       });
 
-    // Shared collapsed item styles — used by trigger, link, and button
+    // Shared collapsed item styles — used by trigger, link, and button.
+    // All three render a focusable element, so each draws the shared ring.
     const collapsedItemStyles = mergeProps(
       themeProps('side-nav-item', {
         size,
         selected: isSelected ? 'selected' : null,
+        disabled: isDisabled ? 'disabled' : null,
       }),
-      stylex.props(
+      focusOutlineProps.focusVisible(
         navItemStyles.item,
         navItemStyles[size],
         styles.itemCollapsed,
@@ -511,9 +515,8 @@ export function SideNavItem({
           <button
             ref={mergeRefs(ref, popover.triggerRef)}
             type="button"
-            onClick={popover.toggle}
-            onMouseEnter={handlePopoverMouseEnter}
-            onMouseLeave={handlePopoverMouseLeave}
+            {...rest}
+            {...hoverTriggerProps}
             aria-label={label}
             data-testid={testId}
             {...popover.triggerProps}
@@ -523,15 +526,15 @@ export function SideNavItem({
           {popover.render(
             <div
               {...stylex.props(styles.popoverSurface)}
-              onMouseEnter={handlePopoverMouseEnter}
-              onMouseLeave={handlePopoverMouseLeave}
+              onMouseEnter={hoverContentProps.onMouseEnter}
+              onMouseLeave={hoverContentProps.onMouseLeave}
               onClick={() => popover.hide()}>
               <div {...stylex.props(styles.popoverHeader)}>{label}</div>
               <SideNavCollapseContext value={EXPANDED_COLLAPSE_STATE}>
                 {children}
               </SideNavCollapseContext>
             </div>,
-            {placement: 'end', alignment: 'start'},
+            {placement: 'end', alignment: 'start', xstyle: styles.popoverGap},
           )}
         </div>
       );
@@ -552,6 +555,7 @@ export function SideNavItem({
         as={as}
         isDisabled={isDisabled}
         onClick={handleClick}
+        {...rest}
         {...collapsedAriaProps}
         {...collapsedItemStyles}>
         {collapsedIcon}
@@ -571,7 +575,8 @@ export function SideNavItem({
       {displayIcon &&
         renderIconSlot(displayIcon, {
           size: 'sm',
-          color: isSelected ? 'primary' : isDisabled ? 'disabled' : 'secondary',
+          // `inherit` — see the collapsed path above.
+          color: isSelected ? 'inherit' : isDisabled ? 'disabled' : 'secondary',
         })}
       {!isCollapsed && <span {...stylex.props(styles.label)}>{label}</span>}
       {!isCollapsed && endContent && (
@@ -591,45 +596,47 @@ export function SideNavItem({
     </>
   );
 
-  const navItemStyleProps = mergeProps(
-    themeProps('side-nav-item', {
-      size,
-      selected: isSelected ? 'selected' : null,
-    }),
-    stylex.props(
-      navItemStyles.item,
-      navItemStyles[size],
-      isSelected && navItemStyles.selected,
-      isDisabled && navItemStyles.disabled,
-    ),
-  );
-
-  // ── Split-action path: <div> row with <a> + <button> as siblings ──
-  //
-  // When both collapsible and href are set, we can't nest a <button>
-  // inside an <a>. Instead we use a <div> as the flex row container,
-  // an <a display:contents> for the link (with ::before covering the row),
-  // and a <button> sibling lifted above the overlay via z-index.
+  const itemThemeProps = themeProps('side-nav-item', {
+    size,
+    selected: isSelected ? 'selected' : null,
+    disabled: isDisabled ? 'disabled' : null,
+  });
 
-  // ── Split-action path: primary element + toggle button as siblings ──
-  //
-  // When collapsible and a primary action (href or onClick) are both set,
-  // we render a <div> row with the primary element and chevron toggle as
-  // siblings. This avoids nesting interactive elements (<button> inside <a>).
+  const itemStyleArgs = [
+    navItemStyles.item,
+    navItemStyles[size],
+    isSelected && navItemStyles.selected,
+    isDisabled && navItemStyles.disabled,
+  ] as const;
+
+  // Two shapes of the same row appearance:
+  // - `rowProps` for the split-action path, where the row is a plain <div>
+  //   container and its children take focus (so the ring belongs on them);
+  // - `focusableRowProps` for every other path, where the row element is
+  //   itself the focusable control.
+  const rowProps = mergeProps(itemThemeProps, stylex.props(...itemStyleArgs));
+  const focusableRowProps = mergeProps(
+    itemThemeProps,
+    focusOutlineProps.focusVisible(...itemStyleArgs),
+  );
 
+  // Split-action path: collapsible plus a primary action renders the primary
+  // element and the chevron toggle as siblings in a <div> row, since a
+  // <button> cannot nest inside an <a>.
   let itemElement;
 
   if (hasIndependentToggle) {
     itemElement = (
-      <div data-testid={testId} {...navItemStyleProps}>
+      <div data-testid={testId} {...rowProps}>
         <NavItemElement
           ref={ref}
           href={href}
           as={as}
           isDisabled={isDisabled}
           onClick={handleClick}
+          {...rest}
           aria-current={isSelected ? ('page' as const) : undefined}
-          {...stylex.props(styles.splitAction)}>
+          {...focusOutlineProps.focusVisible(styles.splitAction)}>
           {itemContent}
         </NavItemElement>
         <button
@@ -642,7 +649,7 @@ export function SideNavItem({
           }
           aria-expanded={!isItemCollapsed}
           aria-controls={`${id}-children`}
-          {...stylex.props(styles.expandToggle)}>
+          {...focusOutlineProps.focusVisible(styles.expandToggle)}>
           <Icon
             icon="chevronDown"
             size="lg"
@@ -671,8 +678,9 @@ export function SideNavItem({
         as={as}
         isDisabled={isDisabled}
         onClick={handleClick}
+        {...rest}
         {...ariaProps}
-        {...navItemStyleProps}>
+        {...focusableRowProps}>
         {itemContent}
       </NavItemElement>
     );

package/src/SideNav/SideNavSection.tsx

@@ -29,6 +29,7 @@ import {
 import {mergeProps} from '../utils';
 import type {BaseProps} from '../BaseProps';
 import {useSideNavCollapse} from './SideNavCollapseContext';
+import {VisuallyHidden} from '../VisuallyHidden';
 import {themeProps} from '../utils/themeProps';
 // =============================================================================
 // Styles
@@ -167,20 +168,6 @@ export function SideNavSection({
 
   const shouldHideHeader = isHeaderHidden || isCollapsed;
 
-  const visuallyHiddenStyle: React.CSSProperties = shouldHideHeader
-    ? {
-        position: 'absolute',
-        width: 1,
-        height: 1,
-        padding: 0,
-        margin: -1,
-        overflow: 'hidden',
-        clip: 'rect(0, 0, 0, 0)',
-        whiteSpace: 'nowrap',
-        borderWidth: 0,
-      }
-    : {};
-
   return (
     <div
       ref={ref}
@@ -194,12 +181,11 @@ export function SideNavSection({
       role="group"
       aria-labelledby={titleId}
       data-testid={testId}>
-      <div
-        {...mergeProps(stylex.props(styles.header), {
-          style: shouldHideHeader ? visuallyHiddenStyle : undefined,
-        })}>
-        {headerContent}
-      </div>
+      {shouldHideHeader ? (
+        <VisuallyHidden as="div">{headerContent}</VisuallyHidden>
+      ) : (
+        <div {...stylex.props(styles.header)}>{headerContent}</div>
+      )}
       <div {...stylex.props(styles.items)}>{children}</div>
     </div>
   );

package/src/SideNav/index.ts

@@ -29,6 +29,8 @@ export type {SideNavCollapseButtonProps} from './SideNavCollapseButton';
 export {useSideNavCollapse} from './SideNavCollapseContext';
 export type {
   SideNavCollapseState,
+  SideNavCollapsibleConfig,
+  SideNavControlledCollapsible,
   SideNavImperativeCollapseHandle,
 } from './SideNavCollapseContext';
 

package/src/Skeleton/Skeleton.tsx

@@ -1,7 +1,5 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-'use client';
-
 /**
  * @file Skeleton.tsx
  * @input Uses React, StyleX keyframes and tokens

package/src/Skeleton/index.ts

@@ -1,7 +1,5 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-'use client';
-
 /**
  * @file index.ts
  * @input Imports from Skeleton component files

package/src/Slider/Slider.tsx

@@ -41,6 +41,7 @@ import {useTooltip} from '../Tooltip';
 import {VisuallyHidden} from '../VisuallyHidden';
 import type {InputStatus} from '../Field/types';
 import {mergeProps, mergeRefs, rtlStyles} from '../utils';
+import {focusOutlineStyles} from '../utils/focusOutline.stylex';
 import {isRtlElement} from '../hooks/isRtlElement';
 import type {BaseProps} from '../BaseProps';
 import type {SizeValue} from '../utils/types';
@@ -253,16 +254,6 @@ const styles = stylex.create({
       },
     },
   },
-  thumbFocusVisible: {
-    outline: {
-      default: 'none',
-      ':focus-visible': `2px solid ${colorVars['--color-accent']}`,
-    },
-    outlineOffset: {
-      default: '0',
-      ':focus-visible': '2px',
-    },
-  },
   thumbDisabled: {
     backgroundColor: colorVars['--color-background-muted'],
     cursor: 'not-allowed',
@@ -792,7 +783,7 @@ export function Slider({ref, ...props}: SliderProps) {
               ? styles.thumbHorizontal
               : rtlStyles.centerInline('50%'),
             !isDisabled && styles.thumbHover,
-            !isDisabled && styles.thumbFocusVisible,
+            !isDisabled && focusOutlineStyles.focusVisible,
             isDisabled && styles.thumbDisabled,
           ),
           undefined,

package/src/Switch/Switch.tsx

@@ -33,6 +33,7 @@ import {
   easeVars,
   typographyVars,
   typeScaleVars,
+  focusVars,
 } from '../theme/tokens.stylex';
 import {FieldLabel} from '../Field/FieldLabel';
 import {FieldStatus} from '../FieldStatus/FieldStatus';
@@ -189,15 +190,22 @@ const styles = stylex.create({
       '@media (forced-colors: active)': 'CanvasText',
     },
   },
+  // The one ring in the system not drawn by focusOutlineStyles. The focusable
+  // input is a sibling of the track, so the condition has to reach the shared
+  // scope marker — and a marker cannot be shared across components without
+  // leaking focus state from an outer one, so it cannot live in the utility.
+  // StyleX also cannot inline a constant imported from another module, so the
+  // values are read from the tokens the utility reads.
   trackFocus: {
     outline: {
       default: 'none',
       [stylex.when.ancestor(':has(:focus-visible)', switchScope)]:
-        `2px solid ${colorVars['--color-accent']}`,
+        `${focusVars['--focus-outline-width']} ${focusVars['--focus-outline-style']} ${focusVars['--focus-outline-color']}`,
     },
     outlineOffset: {
       default: null,
-      [stylex.when.ancestor(':has(:focus-visible)', switchScope)]: '2px',
+      [stylex.when.ancestor(':has(:focus-visible)', switchScope)]:
+        focusVars['--focus-outline-offset'],
     },
   },
   // State-dependent colors with ancestor hover behavior

package/src/Table/Table.test.tsx

@@ -496,6 +496,37 @@ describe('BaseTable', () => {
     });
   });
 
+  describe('TableRow styling props', () => {
+    it('applies className and style to the row inside a Table', () => {
+      render(
+        <Table>
+          <tbody>
+            <TableRow className="custom-row" style={{opacity: 0.9}}>
+              <TableCell>Cell</TableCell>
+            </TableRow>
+          </tbody>
+        </Table>,
+      );
+      const row = screen.getByRole('row');
+      expect(row.className).toContain('custom-row');
+      expect(row.className).toContain('astryx-table-row');
+      expect(row.style.opacity).toBe('0.9');
+    });
+
+    it('applies className to a standalone row (no table context)', () => {
+      render(
+        <table>
+          <tbody>
+            <TableRow className="custom-row">
+              <td>Cell</td>
+            </TableRow>
+          </tbody>
+        </table>,
+      );
+      expect(screen.getByRole('row').className).toContain('custom-row');
+    });
+  });
+
   describe('plugin pipeline', () => {
     it('applies transformTable plugin', () => {
       const plugin: TablePlugin<User> = {

package/src/Table/TableRow.tsx

@@ -120,6 +120,8 @@ export function TableRow({
   xstyle,
   ref,
   isHeaderRow = false,
+  className: incomingClassName,
+  style: incomingStyle,
   ...props
 }: TableRowProps) {
   const ctx = use(TableContext);
@@ -132,6 +134,8 @@ export function TableRow({
         {...mergeProps(
           themeProps('table-row'),
           stylex.props(tableRowMarker, xstyle),
+          incomingClassName,
+          incomingStyle,
         )}>
         {children}
       </tr>
@@ -169,6 +173,8 @@ export function TableRow({
       {...mergeProps(
         themeProps('table-row'),
         stylex.props(tableRowMarker, ...rowStyles),
+        incomingClassName,
+        incomingStyle,
       )}>
       {children}
     </tr>

package/src/TimeInput/TimeInput.test.tsx

@@ -14,6 +14,7 @@ import {render, screen, fireEvent, waitFor} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import {TimeInput} from './TimeInput';
 import {InputGroup, InputGroupText} from '../InputGroup';
+import {InternationalizationProvider} from '../i18n';
 import type {ISOTimeString} from '../utils';
 import {__resetLiveRegionsForTest} from '../hooks/useAnnounce';
 
@@ -209,6 +210,59 @@ describe('TimeInput', () => {
     expect(screen.queryByText('Invalid time')).not.toBeInTheDocument();
   });
 
+  it('resolves the invalid-time announcement from the i18n catalog', () => {
+    render(
+      <InternationalizationProvider
+        locale="en"
+        overrides={{en: {'@astryx.timeInput.invalidTime': 'Ungültige Zeit'}}}>
+        <TimeInput label="Time" onChange={() => {}} />
+      </InternationalizationProvider>,
+    );
+
+    fireEvent.change(screen.getByRole('textbox'), {target: {value: '25:99'}});
+
+    expect(screen.getByRole('alert')).toHaveTextContent('Ungültige Zeit');
+  });
+
+  // Arrow-key stepping mutates a plain textbox programmatically, and screen
+  // readers do not announce programmatic textbox changes — the new value must
+  // be announced through the polite live region (WCAG 4.1.2).
+  it('politely announces the new time after ArrowUp stepping', async () => {
+    const onChange = vi.fn();
+    render(
+      <TimeInput
+        label="Time"
+        value={'14:30' as ISOTimeString}
+        onChange={onChange}
+      />,
+    );
+
+    fireEvent.keyDown(screen.getByRole('textbox'), {key: 'ArrowUp'});
+
+    expect(onChange).toHaveBeenCalledWith('14:31');
+    await waitFor(() => {
+      expect(politeRegion()).toHaveTextContent('2:31 PM');
+    });
+  });
+
+  it('politely announces the new time after ArrowDown stepping', async () => {
+    const onChange = vi.fn();
+    render(
+      <TimeInput
+        label="Time"
+        value={'14:30' as ISOTimeString}
+        onChange={onChange}
+      />,
+    );
+
+    fireEvent.keyDown(screen.getByRole('textbox'), {key: 'ArrowDown'});
+
+    expect(onChange).toHaveBeenCalledWith('14:29');
+    await waitFor(() => {
+      expect(politeRegion()).toHaveTextContent('2:29 PM');
+    });
+  });
+
   it('calls onChange on blur when input is valid', async () => {
     const user = userEvent.setup();
     const onChange = vi.fn();

package/src/TimeInput/TimeInput.tsx

@@ -558,10 +558,25 @@ export function TimeInput({
         // Check if within range
         if (isTimeInRange(newTime, min, max)) {
           fireChange(newTime);
+          // Stepping programmatically rewrites a plain textbox's value, and
+          // screen readers do not announce programmatic textbox changes — the
+          // new value must be spoken explicitly or stepping is silent
+          // (WCAG 4.1.2).
+          announce(formatDisplayTime(newTime, hasSeconds));
         }
       }
     },
-    [value, hasSeconds, increment, min, max, fireChange, isDisabled],
+    [
+      value,
+      hasSeconds,
+      increment,
+      min,
+      max,
+      fireChange,
+      isDisabled,
+      announce,
+      formatDisplayTime,
+    ],
   );
 
   // Handle clear button click
@@ -659,7 +674,7 @@ export function TimeInput({
           user would get no feedback that their entry was rejected (WCAG 3.3.1).
         */}
       <VisuallyHidden as="div" role="alert" aria-live="assertive">
-        {!isInputValid ? 'Invalid time' : ''}
+        {!isInputValid ? t('@astryx.timeInput.invalidTime') : ''}
       </VisuallyHidden>
       {isBusy && <Spinner size="sm" />}
       {hasClear && value && !isDisabled && (