@open-mercato/ui 0.7.1-develop.7153.1.7145d295e6 → 0.7.1-develop.7170.1.d95074d7ba

package/src/backend/CrudForm.tsx

@@ -75,7 +75,7 @@ import { loadGeneratedFieldRegistrations } from './fields/registry'
 import type { CustomFieldDefDto, CustomFieldDefinitionsPayload, CustomFieldsetDto } from './utils/customFieldDefs'
 import { isDefVisible } from './utils/customFieldDefs'
 import { buildFormFieldsFromCustomFields, buildFormFieldFromCustomFieldDef } from './utils/customFieldForms'
-import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { useT, useOptionalLocale } from '@open-mercato/shared/lib/i18n/context'
 import { TagsInput } from './inputs/TagsInput'
 import { ComboboxInput } from './inputs/ComboboxInput'
 import { format } from 'date-fns/format'
@@ -96,6 +96,7 @@ import { useInjectionSpotEvents, InjectionSpot, useInjectionWidgets } from './in
 import { dispatchBackendMutationError } from './injection/mutationEvents'
 import { VersionHistoryAction } from './version-history/VersionHistoryAction'
 import { parseBooleanWithDefault } from '@open-mercato/shared/lib/boolean'
+import { parseLocaleNumber, resolveLocaleNumberSeparators } from '@open-mercato/shared/lib/number'
 import { cn } from '@open-mercato/shared/lib/utils'
 import { createLogger } from '@open-mercato/shared/lib/logger'
 import { useInjectionDataWidgets } from './injection/useInjectionDataWidgets'
@@ -4036,14 +4037,23 @@ function NumberInput({
   autoFocus?: boolean
   onSubmit?: () => void
 }) {
+  const locale = useOptionalLocale()
   const serializedValue = value !== undefined && value !== null ? String(value) : ''
   const [local, setLocal] = React.useState<string>(serializedValue)
   const isFocusedRef = React.useRef(false)
+  // Users type the separator the surrounding UI displays, which follows the application
+  // locale — `110,70` under Polish. `Number()` only ever accepted `.` (issue #5552).
+  const parse = React.useCallback(
+    (raw: string): number | undefined => {
+      if (raw === '') return undefined
+      return parseLocaleNumber(raw, locale) ?? undefined
+    },
+    [locale],
+  )
   const commitIfChanged = React.useCallback(() => {
     if (local === serializedValue) return
-    const numValue = local === '' ? undefined : Number(local)
-    onChange(numValue)
-  }, [local, onChange, serializedValue])
+    onChange(parse(local))
+  }, [local, onChange, parse, serializedValue])
   
   React.useEffect(() => {
     // Only sync from props when not focused to avoid caret jumps
@@ -4055,17 +4065,31 @@ function NumberInput({
   const handleChange = React.useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
     const next = e.target.value
     setLocal(next)
-    const numValue = next === '' ? undefined : Number(next)
-    onChange(numValue)
-  }, [onChange])
+    onChange(parse(next))
+  }, [onChange, parse])
 
   const handleKeyDown = React.useCallback((e: React.KeyboardEvent<HTMLInputElement>) => {
     if (e.key === 'Enter' && !e.shiftKey) {
       e.preventDefault()
       commitIfChanged()
       onSubmit?.()
+      return
+    }
+    // A text input has no native spinner, so keep the step affordance the previous
+    // type="number" field offered.
+    if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+      e.preventDefault()
+      // Binary floating point puts 8.2 - 1 at 7.199999999999999; the native spinner
+      // re-serialized against the step rather than committing that to form state.
+      const base = parse(local) ?? 0
+      const stepped = Number((base + (e.key === 'ArrowUp' ? 1 : -1)).toFixed(10))
+      // The box must keep showing the separator the rest of the UI displays, which is
+      // the application locale's — not the dot String() always emits (issue #5552).
+      const { decimal } = resolveLocaleNumberSeparators(locale)
+      setLocal(decimal === '.' ? String(stepped) : String(stepped).replace('.', decimal))
+      onChange(stepped)
     }
-  }, [commitIfChanged, onSubmit])
+  }, [commitIfChanged, local, locale, onChange, onSubmit, parse])
   
   const handleFocus = React.useCallback(() => {
     isFocusedRef.current = true
@@ -4077,8 +4101,15 @@ function NumberInput({
   }, [commitIfChanged])
   
   return (
+    // type="text" rather than type="number": the browser sanitizes a type="number" value
+    // against the BROWSER locale, so it discards the separator the app locale displays
+    // before React ever sees it (issue #5552). inputMode keeps the mobile numeric keypad.
     <Input
-      type="number"
+      type="text"
+      inputMode="decimal"
+      // A text input is eligible for autofill and spellcheck; a number field is not.
+      autoComplete="off"
+      spellCheck={false}
       placeholder={placeholder}
       value={local}
       onChange={handleChange}

package/src/backend/DataTable.tsx

@@ -40,10 +40,11 @@ import { raiseCrudError } from './utils/serverErrors'
 import { computeMenuViewportShiftX } from './utils/viewport'
 import { PerspectiveSidebar } from './PerspectiveSidebar'
 import { Popover, PopoverTrigger, PopoverContent } from '../primitives/popover'
-import { formatWithPublicDateFormat, normalizeDateFormatPattern } from '../primitives/date-format'
+import { parseISO } from 'date-fns/parseISO'
+import { formatDisplayDateTime } from '../primitives/date-format'
 import { cn } from '@open-mercato/shared/lib/utils'
 import { readVersionedPreference, writeVersionedPreference, clearVersionedPreference } from '@open-mercato/shared/lib/browser/versionedPreference'
-import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { useT, useLocale } from '@open-mercato/shared/lib/i18n/context'
 import { flash } from './FlashMessages'
 import { useConfirmDialog } from './confirm-dialog'
 import { surfaceRecordConflict } from './conflicts'
@@ -1665,15 +1666,9 @@ export function DataTable<T extends RowData>({
     return <RowActions items={injectedItems} />
   }, [injectedRowActions, rowActions, router, t])
 
-  // Date formatting setup. The OM-prefixed env vars are the new public contract;
-  // NEXT_PUBLIC_DATE_FORMAT remains supported for existing apps.
-  const DATE_FORMAT = (
-    normalizeDateFormatPattern(process.env.NEXT_PUBLIC_OM_DATE_TIME_FORMAT)
-    ?? normalizeDateFormatPattern(process.env.NEXT_PUBLIC_DATE_TIME_FORMAT)
-    ?? normalizeDateFormatPattern(process.env.NEXT_PUBLIC_OM_DATE_FORMAT)
-    ?? normalizeDateFormatPattern(process.env.NEXT_PUBLIC_DATE_FORMAT)
-    ?? 'yyyy-MM-dd HH:mm'
-  )
+  // Locale-aware for the same reason the detail fields are: with no env override a table cell and
+  // the field beside it must not disagree about the convention. An env override still wins.
+  const dateLocale = useLocale()
 
   const tryParseDate = (v: unknown): Date | null => {
     if (v == null) return null
@@ -1685,9 +1680,10 @@ export function DataTable<T extends RowData>({
     if (typeof v === 'string') {
       const s = v.trim()
       if (!s) return null
-      // ISO-like detection (YYYY-MM-DD ...)
+      // ISO-like detection (YYYY-MM-DD ...). `parseISO`, not `new Date`: the latter reads a bare
+      // `yyyy-MM-dd` as UTC midnight, which renders as the previous day west of UTC.
       if (/^\d{4}-\d{2}-\d{2}(?:[ T]\d{2}:\d{2}(?::\d{2})?(?:\.\d+)?(?:Z|[+-]\d{2}:?\d{2})?)?$/.test(s)) {
-        const d = new Date(s)
+        const d = parseISO(s)
         return isNaN(d.getTime()) ? null : d
       }
       // Fallback: Date.parse
@@ -3540,7 +3536,7 @@ export function DataTable<T extends RowData>({
                       if (isDateCol) {
                         const raw = cell.getValue() as any
                         const d = tryParseDate(raw)
-                        content = d ? (formatWithPublicDateFormat(d, DATE_FORMAT) ?? raw) : (raw as any)
+                        content = d ? (formatDisplayDateTime(d, dateLocale) ?? raw) : (raw as any)
                       } else {
                         content = flexRender(cell.column.columnDef.cell, cell.getContext())
                       }
@@ -3563,7 +3559,7 @@ export function DataTable<T extends RowData>({
                         tooltipText = metaTooltipContent(row.original)
                       } else if (isDateCol && cellValue != null) {
                         const parsedDate = tryParseDate(cellValue)
-                        tooltipText = parsedDate ? (formatWithPublicDateFormat(parsedDate, DATE_FORMAT) ?? String(cellValue)) : String(cellValue)
+                        tooltipText = parsedDate ? (formatDisplayDateTime(parsedDate, dateLocale) ?? String(cellValue)) : String(cellValue)
                       } else {
                         tooltipText = cellValue != null ? String(cellValue) : undefined
                       }

package/src/backend/SectionHeader.tsx

@@ -4,6 +4,7 @@ import * as React from 'react'
 import { ChevronDown } from 'lucide-react'
 import { Badge } from '../primitives/badge'
 import { cn } from '@open-mercato/shared/lib/utils'
+import { useOptionalT } from '@open-mercato/shared/lib/i18n/context'
 
 export type SectionHeaderProps = {
   /** Section title */
@@ -14,6 +15,11 @@ export type SectionHeaderProps = {
   action?: React.ReactNode
   /** Additional className */
   className?: string
+  /**
+   * Additional className on the title element. Supplying it also lets the title row
+   * shrink below its content width, so `truncate` takes effect in narrow containers.
+   */
+  titleClassName?: string
 }
 
 export function SectionHeader({
@@ -21,11 +27,13 @@ export function SectionHeader({
   count,
   action,
   className,
+  titleClassName,
 }: SectionHeaderProps) {
+  const allowsTitleShrink = Boolean(titleClassName)
   return (
     <div className={cn('flex items-center justify-between', className)}>
-      <div className="flex items-center gap-2">
-        <h3 className="text-sm font-semibold">{title}</h3>
+      <div className={cn('flex items-center gap-2', allowsTitleShrink && 'min-w-0')}>
+        <h3 className={cn('text-sm font-semibold', allowsTitleShrink && 'min-w-0', titleClassName)}>{title}</h3>
         {count != null && (
           <Badge variant="muted" className="text-xs tabular-nums">
             {count}
@@ -56,6 +64,11 @@ export type CollapsibleSectionProps = {
   className?: string
   /** Additional className on content wrapper */
   contentClassName?: string
+  /**
+   * Additional className on the title element. Supplying it also lets the header row
+   * shrink below its content width, so `truncate` takes effect in narrow containers.
+   */
+  titleClassName?: string
 }
 
 export function CollapsibleSection({
@@ -68,6 +81,7 @@ export function CollapsibleSection({
   children,
   className,
   contentClassName,
+  titleClassName,
 }: CollapsibleSectionProps) {
   const [internalCollapsed, setInternalCollapsed] = React.useState(defaultCollapsed)
   const isControlled = controlledCollapsed !== undefined
@@ -79,23 +93,32 @@ export function CollapsibleSection({
     onCollapsedChange?.(next)
   }, [isCollapsed, isControlled, onCollapsedChange])
 
+  const contextT = useOptionalT()
+  const t = (key: string, fallback: string) =>
+    contextT ? contextT(key, fallback, { title }) : fallback.replace('{title}', title)
+  const toggleAriaLabel = isCollapsed
+    ? t('ui.sectionHeader.expand', 'Expand {title} section')
+    : t('ui.sectionHeader.collapse', 'Collapse {title} section')
+  const allowsTitleShrink = Boolean(titleClassName)
+
   return (
     <div className={cn('space-y-3', className)}>
       <div className="flex items-center justify-between">
         <button
           type="button"
           onClick={toggle}
-          className="flex items-center gap-2 group"
+          className={cn('flex items-center gap-2 group', allowsTitleShrink && 'min-w-0')}
           aria-expanded={!isCollapsed}
-          aria-label={`${isCollapsed ? 'Expand' : 'Collapse'} ${title} section`}
+          aria-label={toggleAriaLabel}
         >
           <ChevronDown
             className={cn(
               'h-4 w-4 text-muted-foreground transition-transform duration-200',
               isCollapsed && '-rotate-90',
+              allowsTitleShrink && 'shrink-0',
             )}
           />
-          <h3 className="text-sm font-semibold">{title}</h3>
+          <h3 className={cn('text-sm font-semibold', allowsTitleShrink && 'min-w-0', titleClassName)}>{title}</h3>
           {count != null && (
             <Badge variant="muted" className="text-xs tabular-nums">
               {count}

package/src/backend/__tests__/CrudForm.localeNumber.test.tsx

@@ -0,0 +1,159 @@
+/** @jest-environment jsdom */
+jest.setTimeout(15000)
+
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({ push: () => {} }),
+  usePathname: () => '/',
+  useSearchParams: () => new URLSearchParams(),
+}))
+jest.mock('remark-gfm', () => ({ __esModule: true, default: {} }))
+jest.mock('../injection/InjectionSpot', () => ({
+  __esModule: true,
+  InjectionSpot: () => null,
+  useInjectionWidgets: () => ({ widgets: [], loading: false, error: null }),
+  useInjectionSpotEvents: () => ({ triggerEvent: jest.fn() }),
+}))
+jest.mock('../injection/useInjectionDataWidgets', () => ({
+  __esModule: true,
+  useInjectionDataWidgets: () => ({ widgets: [], isLoading: false, error: null }),
+}))
+
+import * as React from 'react'
+import { act, fireEvent, waitFor } from '@testing-library/react'
+import { renderWithProviders } from '@open-mercato/shared/lib/testing/renderWithProviders'
+import { CrudForm, type CrudField } from '../CrudForm'
+
+const dict = { 'ui.forms.actions.save': 'Save' }
+const fields: CrudField[] = [{ id: 'amount', label: 'Amount', type: 'number' }]
+
+// The locale is pinned to one that does NOT use a dot decimal separator, because an
+// en-US pin passes on the buggy implementation too.
+function renderNumberForm(locale: string, onSubmit: (values: Record<string, unknown>) => void) {
+  return renderWithProviders(
+    <CrudForm title="Form" fields={fields} onSubmit={onSubmit} />,
+    { locale, dict },
+  )
+}
+
+function amountInput(container: HTMLElement): HTMLInputElement {
+  const input = container.querySelector('[data-crud-field-id="amount"] input')
+  expect(input).not.toBeNull()
+  return input as HTMLInputElement
+}
+
+async function submitWith(container: HTMLElement, typed: string) {
+  const input = amountInput(container)
+  await act(async () => {
+    fireEvent.change(input, { target: { value: typed } })
+  })
+  await act(async () => {
+    fireEvent.blur(input)
+  })
+  await act(async () => {
+    fireEvent.submit(container.querySelector('form') as HTMLFormElement)
+  })
+}
+
+describe('CrudForm number fields accept the locale decimal separator (issue #5552)', () => {
+  it('does not render a type="number" input, whose value the browser sanitizes per BROWSER locale', () => {
+    const { container } = renderNumberForm('pl', () => {})
+    const input = amountInput(container)
+    // A type="number" input discards `110,70` before React sees it when the browser
+    // locale differs from the application locale — the original defect.
+    expect(input.getAttribute('type')).toBe('text')
+    expect(input.getAttribute('inputMode')).toBe('decimal')
+  })
+
+  it('commits a comma-typed value as the number the UI displays under a Polish locale', async () => {
+    const onSubmit = jest.fn()
+    const { container } = renderNumberForm('pl', onSubmit)
+
+    await submitWith(container, '110,70')
+
+    await waitFor(() => expect(onSubmit).toHaveBeenCalled())
+    expect(onSubmit.mock.calls[0][0].amount).toBe(110.7)
+  })
+
+  it('still accepts a dot under a comma-decimal locale, so the existing input keeps working', async () => {
+    const onSubmit = jest.fn()
+    const { container } = renderNumberForm('pl', onSubmit)
+
+    await submitWith(container, '110.70')
+
+    await waitFor(() => expect(onSubmit).toHaveBeenCalled())
+    expect(onSubmit.mock.calls[0][0].amount).toBe(110.7)
+  })
+
+  it('commits a dot-typed value under an English locale', async () => {
+    const onSubmit = jest.fn()
+    const { container } = renderNumberForm('en', onSubmit)
+
+    await submitWith(container, '2.5')
+
+    await waitFor(() => expect(onSubmit).toHaveBeenCalled())
+    expect(onSubmit.mock.calls[0][0].amount).toBe(2.5)
+  })
+
+  it('keeps a half-typed decimal in the box on the way to a complete one', async () => {
+    const { container } = renderNumberForm('pl', () => {})
+    const input = amountInput(container)
+
+    await act(async () => {
+      fireEvent.focus(input)
+    })
+    // `110,` is not yet the final value; the local buffer has to survive the round trip
+    // through the form state so the user can finish typing.
+    await act(async () => {
+      fireEvent.change(input, { target: { value: '110,' } })
+    })
+    expect(input.value).toBe('110,')
+
+    await act(async () => {
+      fireEvent.change(input, { target: { value: '110,70' } })
+    })
+    expect(input.value).toBe('110,70')
+  })
+
+  it('steps the value with the arrow keys, writing back the separator the locale displays', async () => {
+    const onSubmit = jest.fn()
+    const { container } = renderNumberForm('pl', onSubmit)
+    const input = amountInput(container)
+
+    await act(async () => {
+      fireEvent.change(input, { target: { value: '4,5' } })
+    })
+    await act(async () => {
+      fireEvent.keyDown(input, { key: 'ArrowUp' })
+    })
+    // A dot here would contradict the separator the rest of the Polish UI shows, which is
+    // the complaint issue #5552 opened with.
+    expect(input.value).toBe('5,5')
+
+    await act(async () => {
+      fireEvent.keyDown(input, { key: 'ArrowDown' })
+    })
+    expect(input.value).toBe('4,5')
+  })
+
+  it('does not commit a binary floating point artifact when stepping', async () => {
+    const onSubmit = jest.fn()
+    const { container } = renderNumberForm('pl', onSubmit)
+    const input = amountInput(container)
+
+    await act(async () => {
+      fireEvent.change(input, { target: { value: '8,2' } })
+    })
+    await act(async () => {
+      fireEvent.keyDown(input, { key: 'ArrowDown' })
+    })
+    // 8.2 - 1 is 7.199999999999999 in binary floating point, and onChange puts whatever
+    // this commits straight into the submitted form value.
+    expect(input.value).toBe('7,2')
+
+    await act(async () => {
+      fireEvent.submit(container.querySelector('form') as HTMLFormElement)
+    })
+    await waitFor(() => expect(onSubmit).toHaveBeenCalled())
+    expect(onSubmit.mock.calls[0][0].amount).toBe(7.2)
+  })
+})

package/src/backend/__tests__/CrudForm.validation.test.tsx

@@ -191,7 +191,7 @@ describe('CrudForm validation state', () => {
       },
     )
 
-    const priorityInput = container.querySelector('[data-crud-field-id="cf_priority"] input[type="number"]')
+    const priorityInput = container.querySelector('[data-crud-field-id="cf_priority"] input')
     expect(priorityInput).not.toBeNull()
 
     // Blurring an untouched field must NOT flag the required error — tabbing

package/src/backend/__tests__/DataTable.dateCells.test.tsx

@@ -0,0 +1,87 @@
+/** @jest-environment jsdom */
+import * as React from 'react'
+import { DataTable } from '../DataTable'
+import type { LegacyColumnDef as ColumnDef } from '@tanstack/react-table/legacy'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { I18nProvider } from '@open-mercato/shared/lib/i18n/context'
+import { render, screen } from '@testing-library/react'
+import { formatWithPublicDateFormat } from '../../primitives/date-format'
+
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({ push: jest.fn(), replace: jest.fn(), prefetch: jest.fn() }),
+}))
+
+jest.mock('../injection/useInjectionDataWidgets', () => ({
+  useInjectionDataWidgets: () => ({ widgets: [], isLoading: false }),
+}))
+
+type Row = { id: string; created_at: string }
+
+const ORIGINAL_ENV = { ...process.env }
+
+afterEach(() => {
+  process.env = { ...ORIGINAL_ENV }
+})
+
+function renderTable(data: Row[], locale = 'pl') {
+  const columns: ColumnDef<Row>[] = [{ accessorKey: 'created_at', header: 'Created' }]
+  const queryClient = new QueryClient({ defaultOptions: { queries: { gcTime: 0 } } })
+  return render(
+    React.createElement(
+      QueryClientProvider as any,
+      { client: queryClient },
+      React.createElement(
+        I18nProvider as any,
+        { locale, dict: {} },
+        React.createElement(DataTable as any, { columns, data, title: 'Test' }),
+      ),
+    ),
+  )
+}
+
+describe('DataTable date cells', () => {
+  // `new Date('2026-07-01')` reads a bare date as UTC midnight. Asserting the time too, not just
+  // the day, catches that in either direction: a UTC parse reads `02:00` in Europe/Warsaw and
+  // `2026-06-30 17:00` in America/Los_Angeles, while local midnight is `00:00` everywhere.
+  it('renders a date-only value as local midnight of the stored day', () => {
+    renderTable([{ id: '1', created_at: '2026-07-01' }])
+
+    // `pl`, not `en`: under `en` a component that never reads the locale renders the same string as
+    // one that does, so the assertion would hold either way — the corollary in
+    // `.ai/lessons/tests-asserting-intl-output-must-pin-locale-and-date.md`. Mutation-checked:
+    // dropping the locale from `DataTable`'s formatter call fails this case.
+    //
+    // The time is asserted too: a UTC parse reads `02:00` in Europe/Warsaw and 30 June further west,
+    // while local midnight is `00:00` everywhere.
+    expect(screen.getByText('1 lip 2026, 00:00')).toBeInTheDocument()
+  })
+
+  // The `locale` parameter exists for this case. `en` is `defaultLocale`, so a 12-hour clock in
+  // every backend table is what most deployments get from this change; asserting it here means the
+  // most-seen rendering in the product is guarded rather than inferred from the `pl` case above.
+  it('renders the default locale on a 12-hour clock', () => {
+    renderTable([{ id: '1', created_at: '2026-07-01' }], 'en')
+
+    expect(screen.getByText('Jul 1, 2026, 12:00 AM')).toBeInTheDocument()
+  })
+
+  // One env chain with the detail-page helpers: a table cell and a detail field must not disagree.
+  it('honours the date-time env format', () => {
+    process.env.NEXT_PUBLIC_OM_DATE_TIME_FORMAT = 'dd.MM.yyyy HH:mm'
+    renderTable([{ id: '1', created_at: '2026-07-01T09:30:00Z' }])
+
+    // Same reason as the date-format suite: `09:30Z` is 30 June at UTC-10 and further west,
+    // so the expectation comes from the formatter rather than a literal.
+    const expected = formatWithPublicDateFormat(new Date('2026-07-01T09:30:00Z'), 'dd.MM.yyyy HH:mm')!
+    expect(screen.getByText(expected)).toBeInTheDocument()
+  })
+
+  // The date vars stay in the chain and stay bare: appending a time to a caller's date-only
+  // pattern would change how every existing table renders.
+  it('uses a date-only env format bare, without inventing a time', () => {
+    process.env.NEXT_PUBLIC_OM_DATE_FORMAT = 'dd.MM.yyyy'
+    renderTable([{ id: '1', created_at: '2026-07-01' }])
+
+    expect(screen.getByText('01.07.2026')).toBeInTheDocument()
+  })
+})

package/src/backend/__tests__/SectionHeader.test.tsx

@@ -0,0 +1,105 @@
+/**
+ * @jest-environment jsdom
+ */
+import * as React from 'react'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { renderWithProviders } from '@open-mercato/shared/lib/testing/renderWithProviders'
+import { CollapsibleSection, SectionHeader } from '../SectionHeader'
+
+const plDict = {
+  'ui.sectionHeader.collapse': 'Zwiń sekcję {title}',
+  'ui.sectionHeader.expand': 'Rozwiń sekcję {title}',
+}
+
+describe('CollapsibleSection', () => {
+  it('translates the toggle aria-label for the active locale', () => {
+    renderWithProviders(
+      <CollapsibleSection title="Skrzynka">
+        <p>Treść</p>
+      </CollapsibleSection>,
+      { locale: 'pl', dict: plDict },
+    )
+
+    expect(screen.getByRole('button', { name: 'Zwiń sekcję Skrzynka' })).toBeTruthy()
+  })
+
+  it('switches to the expand key once collapsed', () => {
+    renderWithProviders(
+      <CollapsibleSection title="Skrzynka">
+        <p>Treść</p>
+      </CollapsibleSection>,
+      { locale: 'pl', dict: plDict },
+    )
+
+    fireEvent.click(screen.getByRole('button', { name: 'Zwiń sekcję Skrzynka' }))
+
+    expect(screen.getByRole('button', { name: 'Rozwiń sekcję Skrzynka' })).toBeTruthy()
+  })
+
+  it('falls back to English when the locale has no translation', () => {
+    renderWithProviders(
+      <CollapsibleSection title="Billing details">
+        <p>Content</p>
+      </CollapsibleSection>,
+      { locale: 'en', dict: {} },
+    )
+
+    expect(screen.getByRole('button', { name: 'Collapse Billing details section' })).toBeTruthy()
+  })
+
+  it('renders outside an I18nProvider using the English fallback', () => {
+    render(
+      <CollapsibleSection title="Billing details">
+        <p>Content</p>
+      </CollapsibleSection>,
+    )
+
+    expect(screen.getByRole('button', { name: 'Collapse Billing details section' })).toBeTruthy()
+  })
+
+  it('applies titleClassName and lets the header row shrink so truncation works', () => {
+    renderWithProviders(
+      <CollapsibleSection title="a-fairly-long-identifier@example.com" titleClassName="truncate">
+        <p>Content</p>
+      </CollapsibleSection>,
+      { locale: 'en', dict: {} },
+    )
+
+    const heading = screen.getByRole('heading', { level: 3 })
+    expect(heading.className).toContain('truncate')
+    expect(heading.className).toContain('min-w-0')
+    expect(heading.className).toContain('text-sm')
+    expect(screen.getByRole('button').className).toContain('min-w-0')
+  })
+
+  it('keeps the header row unconstrained when no titleClassName is supplied', () => {
+    renderWithProviders(
+      <CollapsibleSection title="Billing details">
+        <p>Content</p>
+      </CollapsibleSection>,
+      { locale: 'en', dict: {} },
+    )
+
+    expect(screen.getByRole('heading', { level: 3 }).className).not.toContain('min-w-0')
+    expect(screen.getByRole('button').className).not.toContain('min-w-0')
+  })
+})
+
+describe('SectionHeader', () => {
+  it('applies titleClassName to the title element', () => {
+    renderWithProviders(<SectionHeader title="a-fairly-long-identifier@example.com" titleClassName="truncate" />, {
+      locale: 'en',
+      dict: {},
+    })
+
+    const heading = screen.getByRole('heading', { level: 3 })
+    expect(heading.className).toContain('truncate')
+    expect(heading.className).toContain('min-w-0')
+  })
+
+  it('keeps the title unconstrained when no titleClassName is supplied', () => {
+    renderWithProviders(<SectionHeader title="Billing details" />, { locale: 'en', dict: {} })
+
+    expect(screen.getByRole('heading', { level: 3 }).className).not.toContain('min-w-0')
+  })
+})