@eocrm/design-system 0.0.0-stage → 0.6.17

package/src/components/Pagination/Pagination.tokens.scss

@@ -0,0 +1,54 @@
+// Pagination.tokens.scss — Component-scoped tokens for <Pagination>. Covers
+// the cluster gap, the per-button chrome (bg / border / fg), the per-state
+// (hover / active / disabled / current) overrides, and the per-size height +
+// padding. Current-page button uses --pagination-current-* so an override can
+// retint the "selected" state without touching the accent palette globally.
+:root {
+  // Outer cluster
+  --pagination-gap: var(--space-1);
+
+  // Button base
+  --pagination-button-gap: var(--space-1);
+  --pagination-button-border-color: var(--color-border);
+  --pagination-button-radius: var(--radius-md);
+  --pagination-button-bg: var(--color-bg);
+  --pagination-button-fg: var(--color-fg);
+  --pagination-button-font-weight: var(--font-weight-medium);
+  --pagination-button-bg-hover: var(--color-bg-hover);
+  --pagination-button-bg-active: var(--color-bg-sunken);
+  --pagination-button-fg-disabled: var(--color-fg-disabled);
+
+  // Page button (square)
+  --pagination-page-button-min-width-sm: var(--size-sm);
+  --pagination-page-button-min-width-md: var(--size-md);
+  --pagination-page-button-min-width-lg: var(--size-lg);
+  --pagination-page-button-height-sm: var(--size-sm);
+  --pagination-page-button-height-md: var(--size-md);
+  --pagination-page-button-height-lg: var(--size-lg);
+
+  // Nav button (prev / next)
+  --pagination-nav-button-height-sm: var(--size-sm);
+  --pagination-nav-button-height-md: var(--size-md);
+  --pagination-nav-button-height-lg: var(--size-lg);
+  --pagination-nav-button-padding-x-md: var(--space-2);
+  --pagination-nav-button-padding-x-lg: var(--space-3);
+
+  // Current-page button (selected look, uses accent)
+  --pagination-current-bg: var(--color-accent);
+  --pagination-current-border-color: var(--color-accent);
+  --pagination-current-fg: var(--color-accent-fg);
+
+  // Ellipsis
+  --pagination-ellipsis-min-width-sm: var(--size-sm);
+  --pagination-ellipsis-min-width-md: var(--size-md);
+  --pagination-ellipsis-min-width-lg: var(--size-lg);
+  --pagination-ellipsis-height-sm: var(--size-sm);
+  --pagination-ellipsis-height-md: var(--size-md);
+  --pagination-ellipsis-height-lg: var(--size-lg);
+  --pagination-ellipsis-fg: var(--color-fg-muted);
+
+  // Per-size typography
+  --pagination-font-size-sm: var(--font-size-sm);
+  --pagination-font-size-md: var(--font-size-md);
+  --pagination-font-size-lg: var(--font-size-md);
+}

package/src/components/Pagination/Pagination.tsx

@@ -0,0 +1,165 @@
+import { forwardRef, type HTMLAttributes } from 'react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import clsx from 'clsx';
+import { useTranslation } from '../../i18n/useTranslation';
+import { paginationRange } from './paginationRange';
+import styles from './Pagination.module.scss';
+
+/** Visual size. Tracks the Button / Input scale. */
+export type PaginationSize = 'sm' | 'md' | 'lg';
+
+export interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange'> {
+  /**
+   * Current 1-indexed page. Values outside `[1, pageCount]` clamp at
+   * render time (defensive — same precedent as `clampHeading` in
+   * `<EmptyState>`).
+   */
+  currentPage: number;
+
+  /**
+   * Total number of pages. Values `< 1` clamp to `1`. The component still
+   * renders when `pageCount === 1` (single enabled current-page button +
+   * both prev/next disabled) so consumers don't have to conditionally hide
+   * it. The `disabled` prop still disables all three controls.
+   */
+  pageCount: number;
+
+  /**
+   * Called with the new 1-indexed page when the user clicks prev, next,
+   * or a page number. Not fired when the user clicks the current page.
+   */
+  onPageChange: (page: number) => void;
+
+  /**
+   * How many page-number buttons to show on each side of `currentPage`.
+   * Default `1`. Set to `0` for the tightest possible display (sidebar /
+   * narrow column) or `2` for wider footers. Boundary is fixed at 1 —
+   * first and last pages are always shown.
+   */
+  siblingCount?: number;
+
+  /**
+   * Visual size — `'sm'` (24px), `'md'` (32px, default), `'lg'` (40px).
+   * Tracks the Button / Input scale so Pagination sits cleanly inside
+   * a `<Cluster>` next to those components.
+   */
+  size?: PaginationSize;
+
+  /**
+   * When `true`, all buttons (prev / next / numbers) are disabled. Use
+   * during page transitions (loading, saving) to prevent double-clicks.
+   */
+  disabled?: boolean;
+
+  /**
+   * Accessible name for the `<nav>` wrapper. Defaults to `'Pagination'` when
+   * omitted OR empty — an empty string is not an explicit name, so it takes
+   * the default too. Override when multiple paginations appear on the same page (e.g.,
+   * `'Top pagination'` / `'Bottom pagination'`).
+   */
+  'aria-label'?: string;
+}
+
+function clampPageCount(pageCount: number): number {
+  if (!Number.isFinite(pageCount) || pageCount < 1) return 1;
+  return Math.floor(pageCount);
+}
+
+function clampCurrent(currentPage: number, pageCount: number): number {
+  if (!Number.isFinite(currentPage) || currentPage < 1) return 1;
+  if (currentPage > pageCount) return pageCount;
+  return Math.floor(currentPage);
+}
+
+function clampSiblings(siblingCount: number): number {
+  if (!Number.isFinite(siblingCount) || siblingCount < 0) return 0;
+  return Math.floor(siblingCount);
+}
+
+/**
+ * Controlled numbered pagination with sibling windowing (`◀ Previous 1 2 … 5 6 7 … 99 100 Next ▶`).
+ * @see docs/components/Pagination.md
+ */
+export const Pagination = forwardRef<HTMLElement, PaginationProps>(function Pagination(
+  {
+    currentPage,
+    pageCount,
+    onPageChange,
+    siblingCount = 1,
+    size = 'md',
+    disabled = false,
+    className,
+    'aria-label': ariaLabel,
+    ...props
+  },
+  ref,
+) {
+  const t = useTranslation();
+  const clampedCount = clampPageCount(pageCount);
+  const clampedCurrent = clampCurrent(currentPage, clampedCount);
+  const items = paginationRange(clampedCurrent, clampedCount, clampSiblings(siblingCount));
+
+  // {...props} last so consumer overrides win (Pattern A). className is
+  // destructured above and re-injected into clsx() so consumer-supplied
+  // class names compose, rather than replacing the component's.
+  return (
+    <nav
+      ref={ref}
+      aria-label={ariaLabel || t('pagination.ariaLabel')}
+      className={clsx(styles.pagination, styles[`size-${size}`], className)}
+      {...props}
+    >
+      <button
+        type="button"
+        className={clsx(styles.button, styles.navButton)}
+        onClick={() => onPageChange(clampedCurrent - 1)}
+        disabled={disabled || clampedCurrent === 1}
+        aria-label={t('pagination.previousAriaLabel')}
+      >
+        <ChevronLeft size={16} aria-hidden />
+        <span>{t('pagination.previous')}</span>
+      </button>
+
+      {items.map((item) => {
+        if (item === 'ellipsis-start' || item === 'ellipsis-end') {
+          return (
+            <span key={item} className={styles.ellipsis} aria-hidden>
+              …
+            </span>
+          );
+        }
+        const isCurrent = item === clampedCurrent;
+        return (
+          <button
+            key={item}
+            type="button"
+            className={clsx(styles.button, styles.pageButton, isCurrent && styles.current)}
+            onClick={() => {
+              if (!isCurrent) onPageChange(item);
+            }}
+            disabled={disabled}
+            aria-current={isCurrent ? 'page' : undefined}
+            aria-label={
+              isCurrent
+                ? t('pagination.currentPageAriaLabel', { page: item })
+                : t('pagination.pageAriaLabel', { page: item })
+            }
+          >
+            {item}
+          </button>
+        );
+      })}
+
+      <button
+        type="button"
+        className={clsx(styles.button, styles.navButton)}
+        onClick={() => onPageChange(clampedCurrent + 1)}
+        disabled={disabled || clampedCurrent === clampedCount}
+        aria-label={t('pagination.nextAriaLabel')}
+      >
+        <span>{t('pagination.next')}</span>
+        <ChevronRight size={16} aria-hidden />
+      </button>
+    </nav>
+  );
+});

package/src/components/Pagination/index.ts

@@ -0,0 +1,4 @@
+export { Pagination } from './Pagination';
+export type { PaginationProps, PaginationSize } from './Pagination';
+export { paginationRange } from './paginationRange';
+export type { PaginationItem } from './paginationRange';

package/src/components/Pagination/paginationRange.ts

@@ -0,0 +1,72 @@
+/**
+ * Discrete item in a pagination row — either a page number or one of the
+ * two ellipsis markers. The two ellipsis tokens differ so React can give
+ * each a stable key when both are present.
+ */
+export type PaginationItem = number | 'ellipsis-start' | 'ellipsis-end';
+
+function range(start: number, end: number): number[] {
+  return Array.from({ length: end - start + 1 }, (_, i) => start + i);
+}
+
+/**
+ * Compute the items to render in a numbered pagination row.
+ *
+ * Mirrors MUI's `usePagination` algorithm with `boundaryCount = 1` (the
+ * first and last pages are always shown). Total slot count when an
+ * ellipsis is rendered: `siblingCount * 2 + 5` — 2 boundaries + 1 current
+ * + 2*siblings + 2 ellipses. For `siblingCount = 1`, that's 7 slots; the
+ * row's width stays constant as the user clicks between pages.
+ *
+ * Special rules:
+ * - When `pageCount <= totalSlots`, returns a contiguous `[1, 2, …, pageCount]`
+ *   (no ellipsis needed).
+ * - When the sibling window starts at exactly `boundary + 2`, the would-be
+ *   ellipsis collapses to the single missing number (gap-of-1 rule) —
+ *   showing the number is visually cleaner than showing "…" for one page.
+ *
+ * Assumes valid input: callers must clamp `currentPage` to `[1, pageCount]`
+ * and ensure `pageCount >= 1` before invocation. The component layer
+ * handles clamping; this pure function does not.
+ */
+export function paginationRange(
+  currentPage: number,
+  pageCount: number,
+  siblingCount: number,
+): PaginationItem[] {
+  const boundaryCount = 1;
+  const totalSlots = siblingCount * 2 + boundaryCount * 2 + 3;
+
+  if (pageCount <= totalSlots) {
+    return range(1, pageCount);
+  }
+
+  const startPages = range(1, boundaryCount);
+  const endPages = range(pageCount - boundaryCount + 1, pageCount);
+
+  const siblingsStart = Math.max(
+    Math.min(currentPage - siblingCount, pageCount - boundaryCount - siblingCount * 2 - 1),
+    boundaryCount + 2,
+  );
+
+  const siblingsEnd = Math.min(
+    Math.max(currentPage + siblingCount, boundaryCount + siblingCount * 2 + 2),
+    endPages[0] - 2,
+  );
+
+  return [
+    ...startPages,
+    ...(siblingsStart > boundaryCount + 2
+      ? (['ellipsis-start'] as const)
+      : boundaryCount + 1 < pageCount - boundaryCount
+        ? [boundaryCount + 1]
+        : []),
+    ...range(siblingsStart, siblingsEnd),
+    ...(siblingsEnd < pageCount - boundaryCount - 1
+      ? (['ellipsis-end'] as const)
+      : pageCount - boundaryCount > boundaryCount
+        ? [pageCount - boundaryCount]
+        : []),
+    ...endPages,
+  ];
+}

package/src/components/PasswordInput/PasswordInput.module.scss

@@ -0,0 +1,120 @@
+@use '../../styles/mixins' as *;
+@use './PasswordInput.tokens';
+
+// Mirrors DatePicker / DateRangePicker wrapper shape — same focus-within
+// ring, same flex layout with trailing slot.
+.wrapper {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  gap: var(--password-input-gap);
+  padding: 0 var(--password-input-padding-x);
+  background: var(--password-input-bg);
+  border: var(--border-width) solid var(--password-input-border-color);
+  border-radius: var(--password-input-radius);
+  transition: border-color var(--transition-fast);
+
+  &:focus-within {
+    @include focus-ring(var(--password-input-ring-focus));
+
+    border-color: var(--password-input-border-color-focus);
+  }
+}
+
+.invalid {
+  border-color: var(--password-input-border-color-invalid);
+
+  &:focus-within {
+    @include focus-ring(var(--password-input-ring-invalid));
+
+    border-color: var(--password-input-border-color-invalid);
+  }
+}
+
+.disabled {
+  background: var(--password-input-bg-disabled);
+  color: var(--password-input-fg-disabled);
+  cursor: not-allowed;
+}
+
+// The text input fills available space.
+// Rule 4 note: `flex: 1` is internal layout — the public component IS this
+// .wrapper; the input is its child.
+.input {
+  flex: 1 1 auto;
+  min-width: 0;
+  padding: 0;
+  background: transparent;
+  border: none;
+  outline: none;
+  font-family: inherit;
+  color: var(--password-input-fg);
+
+  &::placeholder {
+    color: var(--password-input-placeholder-fg);
+  }
+
+  // Suppress browser-native reveal toggles (Edge / Chromium) so they
+  // don't stack with ours.
+  &::-ms-reveal,
+  &::-ms-clear {
+    display: none;
+  }
+
+  // Suppress autofill background (Chromium / Safari / password managers
+  // like 1Password / Bitwarden paint the input with a yellow / blue tint).
+  // The inset box-shadow trick paints OVER the autofill bg with our own
+  // --color-bg; the `transition: ... 5000s` delays the autofill color
+  // change to effectively never. -webkit-text-fill-color keeps the typed
+  // value rendered in our --color-fg instead of the autofill default.
+  // Applied to all autofill pseudo-states so hover / focus / active don't
+  // re-tint the field.
+  &:-webkit-autofill,
+  &:-webkit-autofill:hover,
+  &:-webkit-autofill:focus,
+  &:-webkit-autofill:active {
+    box-shadow: 0 0 0 100px var(--password-input-bg-autofill) inset;
+    -webkit-text-fill-color: var(--password-input-fg-autofill);
+    transition: background-color 5000s ease-in-out 0s;
+  }
+}
+
+// Warning slot icons — caps-lock + wrong-layout share styling.
+.warningIcon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--password-input-warning-icon-fg);
+}
+
+// Per-size — input height + font + button slot.
+.size-sm .input {
+  height: var(--password-input-height-sm);
+  font-size: var(--password-input-font-size-sm);
+}
+
+.size-md .input {
+  height: var(--password-input-height-md);
+  font-size: var(--password-input-font-size-md);
+}
+
+.size-lg .input {
+  height: var(--password-input-height-lg);
+  font-size: var(--password-input-font-size-lg);
+}
+
+// Visually-hidden recipe for the live-region spans.
+// stylelint-disable property-disallowed-list -- visually-hidden recipe; not a layout property on the public component box.
+.srOnly {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+// stylelint-enable property-disallowed-list

package/src/components/PasswordInput/PasswordInput.tokens.scss

@@ -0,0 +1,44 @@
+// PasswordInput.tokens.scss — component-scoped tokens for <PasswordInput>. Mirrors the wrapper shape of DatePicker/DateRangePicker; defaults preserve byte-identical visuals.
+:root {
+  // Wrapper
+  --password-input-gap: var(--space-1);
+  --password-input-padding-x: var(--space-2);
+  --password-input-bg: var(--color-bg);
+  --password-input-border-color: var(--color-border-strong);
+  --password-input-radius: var(--radius-md);
+
+  // Focus
+  --password-input-border-color-focus: var(--color-accent);
+  --password-input-ring-focus: var(--ring-accent);
+
+  // Invalid
+  --password-input-border-color-invalid: var(--color-danger);
+  --password-input-ring-invalid: var(--ring-danger);
+
+  // Disabled
+  --password-input-bg-disabled: var(--color-bg-subtle);
+  --password-input-fg-disabled: var(--color-fg-muted);
+
+  // Input text
+  --password-input-fg: var(--color-fg);
+  --password-input-placeholder-fg: var(--color-fg-muted);
+
+  // Autofill suppression — paints over Chromium/Safari/manager autofill tint
+  --password-input-bg-autofill: var(--color-bg);
+  --password-input-fg-autofill: var(--color-fg);
+
+  // Warning slot icons (caps-lock + wrong-layout)
+  // @contrast --color-warning on --color-bg = 2.14:1 light
+  // @contrast --color-warning-strong on --color-bg = 5.95:1 light
+  // warning uses --color-warning-strong; the bare --color-warning measures 2.14:1 here, below
+  // WCAG AA for text and below 1.4.11's 3:1 for a graphical object. See #481.
+  --password-input-warning-icon-fg: var(--color-warning-strong);
+
+  // Per-size — input height + font
+  --password-input-height-sm: var(--size-sm);
+  --password-input-height-md: var(--size-md);
+  --password-input-height-lg: var(--size-lg);
+  --password-input-font-size-sm: var(--font-size-sm);
+  --password-input-font-size-md: var(--font-size-md);
+  --password-input-font-size-lg: var(--font-size-lg);
+}

package/src/components/PasswordInput/PasswordInput.tsx

@@ -0,0 +1,210 @@
+import {
+  forwardRef,
+  useCallback,
+  useState,
+  type InputHTMLAttributes,
+  type KeyboardEvent,
+  type MouseEvent,
+} from 'react';
+import clsx from 'clsx';
+import { ArrowBigUpDash, Eye, EyeOff, Languages } from 'lucide-react';
+import { Button } from '../Button';
+import { Tooltip } from '../Tooltip';
+import { useTranslation } from '../../i18n/useTranslation';
+import styles from './PasswordInput.module.scss';
+
+/** Field height + type scale. Same scale as `<Input>`. */
+export type PasswordInputSize = 'sm' | 'md' | 'lg';
+
+const ICON_SIZE_FOR: Record<PasswordInputSize, number> = {
+  sm: 14,
+  md: 14,
+  lg: 16,
+};
+
+export interface PasswordInputProps extends Omit<
+  InputHTMLAttributes<HTMLInputElement>,
+  'size' | 'type'
+> {
+  /** Field height + type scale. Same scale as `<Input>`. Defaults to `'md'`. */
+  size?: PasswordInputSize;
+  /** Toggles the error visual + sets `aria-invalid="true"`. */
+  invalid?: boolean;
+  /** Controlled revealed state. Pair with `onRevealChange`. */
+  revealed?: boolean;
+  /** Initial revealed state for uncontrolled use. Defaults to `false`. */
+  defaultRevealed?: boolean;
+  /** Called when the user clicks the eye toggle. Receives the next revealed state. */
+  onRevealChange?: (revealed: boolean) => void;
+  /**
+   * Whether to render the eye toggle button. Defaults to `true`. Set
+   * `revealable={false}` for compliance / kiosk screens where revealing
+   * is forbidden — the input then behaves like a plain locked-down
+   * `<input type='password'>`.
+   */
+  revealable?: boolean;
+  /**
+   * Opt-in caps-lock detection. When `true`, on every keypress the
+   * input reads `event.getModifierState('CapsLock')`; when active, a
+   * warning icon + polite `aria-live` announce it. Cleared on blur.
+   *
+   * Defaults to `false`. Opt in on screens where caps-lock matters
+   * (login, password creation, password confirmation).
+   */
+  capsLockWarning?: boolean;
+  /**
+   * Opt-in wrong-keyboard-layout detection. When `true`, detects
+   * keystrokes that produce non-ASCII single characters (e.g., Cyrillic
+   * `ф` from a Russian layout). Shows a warning icon + polite live
+   * region. Cleared on blur.
+   *
+   * Heuristic, not deterministic — any non-ASCII keystroke triggers.
+   * Only enable when the system expects Latin-only password input.
+   * Defaults to `false`.
+   */
+  wrongLayoutWarning?: boolean;
+}
+
+/**
+ * Password text field with a trailing eye toggle and opt-in caps-lock / wrong-keyboard-layout warnings.
+ * @see docs/components/PasswordInput.md
+ */
+export const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(
+  function PasswordInput(
+    {
+      size = 'md',
+      invalid,
+      revealed,
+      defaultRevealed,
+      onRevealChange,
+      revealable = true,
+      capsLockWarning = false,
+      wrongLayoutWarning = false,
+      className,
+      disabled,
+      onKeyDown,
+      onBlur,
+      ...props
+    },
+    ref,
+  ) {
+    const t = useTranslation();
+    const iconSize = ICON_SIZE_FOR[size];
+
+    const isControlled = revealed !== undefined;
+    const [internalRevealed, setInternalRevealed] = useState(defaultRevealed ?? false);
+    const currentRevealed = isControlled ? revealed : internalRevealed;
+
+    const [capsOn, setCapsOn] = useState(false);
+    const [wrongLayout, setWrongLayout] = useState(false);
+
+    const handleToggle = useCallback(
+      (e: MouseEvent<HTMLButtonElement>) => {
+        e.preventDefault(); // avoid focus jump on click
+        const next = !currentRevealed;
+        if (!isControlled) setInternalRevealed(next);
+        onRevealChange?.(next);
+      },
+      [currentRevealed, isControlled, onRevealChange],
+    );
+
+    const handleKeyDown = useCallback(
+      (e: KeyboardEvent<HTMLInputElement>) => {
+        if (capsLockWarning) {
+          setCapsOn(e.getModifierState('CapsLock'));
+        }
+        if (wrongLayoutWarning) {
+          // Heuristic: any single non-ASCII printable character → wrong layout.
+          const isSingleChar = e.key.length === 1;
+          const isAscii = /^[\x20-\x7E]$/.test(e.key);
+          setWrongLayout(isSingleChar && !isAscii);
+        }
+        onKeyDown?.(e);
+      },
+      [capsLockWarning, wrongLayoutWarning, onKeyDown],
+    );
+
+    const handleBlur = useCallback(
+      (e: React.FocusEvent<HTMLInputElement>) => {
+        setCapsOn(false);
+        setWrongLayout(false);
+        onBlur?.(e);
+      },
+      [onBlur],
+    );
+
+    const ToggleIcon = currentRevealed ? EyeOff : Eye;
+
+    return (
+      <div
+        className={clsx(
+          styles.wrapper,
+          styles[`size-${size}`],
+          invalid && styles.invalid,
+          disabled && styles.disabled,
+          className,
+        )}
+      >
+        <input
+          {...props}
+          ref={ref}
+          type={currentRevealed ? 'text' : 'password'}
+          disabled={disabled}
+          aria-invalid={invalid || undefined}
+          onKeyDown={handleKeyDown}
+          onBlur={handleBlur}
+          className={styles.input}
+        />
+
+        {/* Warning icons. While active, each icon is wrapped in a Tooltip
+            that's force-`open` so sighted users see the warning text
+            float above without needing to hover. AT users still get the
+            announcement via the separate aria-live regions below — the
+            icons themselves are aria-hidden, so the tooltip's
+            aria-describedby is intentionally inert for screen readers
+            (no double-announcement). */}
+        {capsLockWarning && capsOn && (
+          <Tooltip content={t('passwordInput.capsLockOn')} open>
+            <span aria-hidden="true" className={styles.warningIcon}>
+              <ArrowBigUpDash size={iconSize} />
+            </span>
+          </Tooltip>
+        )}
+        {wrongLayoutWarning && wrongLayout && (
+          <Tooltip content={t('passwordInput.wrongLayoutOn')} open>
+            <span aria-hidden="true" className={styles.warningIcon}>
+              <Languages size={iconSize} />
+            </span>
+          </Tooltip>
+        )}
+
+        {revealable && (
+          <Button
+            variant="ghost"
+            size="xs"
+            iconOnly
+            aria-pressed={currentRevealed}
+            aria-label={currentRevealed ? t('passwordInput.hide') : t('passwordInput.show')}
+            onClick={handleToggle}
+            disabled={disabled}
+          >
+            <ToggleIcon size={iconSize} aria-hidden="true" />
+          </Button>
+        )}
+
+        {/* Polite live regions for AT. Render unconditionally so the
+            announce fires only when the textContent changes. */}
+        {capsLockWarning && (
+          <span role="status" aria-live="polite" className={styles.srOnly}>
+            {capsOn ? t('passwordInput.capsLockOn') : ''}
+          </span>
+        )}
+        {wrongLayoutWarning && (
+          <span role="status" aria-live="polite" className={styles.srOnly}>
+            {wrongLayout ? t('passwordInput.wrongLayoutOn') : ''}
+          </span>
+        )}
+      </div>
+    );
+  },
+);

package/src/components/PasswordInput/index.ts

@@ -0,0 +1,2 @@
+export { PasswordInput } from './PasswordInput';
+export type { PasswordInputProps, PasswordInputSize } from './PasswordInput';