@eifi1/ui-kit 0.32.1 → 0.32.2

package/dist/account/delete-account-setting.d.ts

@@ -1,5 +1,5 @@
 import 'react';
-export { cz as DEFAULT_DELETE_ACCOUNT_LABELS, c$ as DeleteAccountConsequence, d0 as DeleteAccountLabels, d1 as DeleteAccountSetting, d2 as DeleteAccountSettingProps, d3 as DeleteAccountValues, d4 as DeletionMode } from '../delete-account-setting-FLyJf-kZ.js';
+export { cz as DEFAULT_DELETE_ACCOUNT_LABELS, c$ as DeleteAccountConsequence, d0 as DeleteAccountLabels, d1 as DeleteAccountSetting, d2 as DeleteAccountSettingProps, d3 as DeleteAccountValues, d4 as DeletionMode } from '../delete-account-setting-Dy4kJgUm.js';
 import '../components/tooltip.js';
 import '../hooks/use-anchored-rect.js';
 import '../lib/clipping.js';

package/dist/admin/admin-action-confirm.d.ts

@@ -1,5 +1,5 @@
 import 'react';
-export { bt as AdminActionConfirm, bu as AdminActionConfirmProps, bv as AdminActionConfirmValues, bw as AdminActionLabels, bx as AdminActionTarget, by as AdminConfirmLevel, cm as DEFAULT_ADMIN_ACTION_LABELS } from '../delete-account-setting-FLyJf-kZ.js';
+export { bt as AdminActionConfirm, bu as AdminActionConfirmProps, bv as AdminActionConfirmValues, bw as AdminActionLabels, bx as AdminActionTarget, by as AdminConfirmLevel, cm as DEFAULT_ADMIN_ACTION_LABELS } from '../delete-account-setting-Dy4kJgUm.js';
 import './admin-parts.js';
 import '../components/tooltip.js';
 import '../hooks/use-anchored-rect.js';

package/dist/admin/invitations-panel.d.ts

@@ -1,6 +1,6 @@
 import 'react';
 import '../lib/format.js';
-export { cE as DEFAULT_INVITATIONS_LABELS, dP as InvitationDraft, dQ as InvitationRow, dR as InvitationScope, dS as InvitationSentAnswer, dT as InvitationStatus, dU as InvitationsLabels, dV as InvitationsPanel, dW as InvitationsPanelProps } from '../delete-account-setting-FLyJf-kZ.js';
+export { cE as DEFAULT_INVITATIONS_LABELS, dP as InvitationDraft, dQ as InvitationRow, dR as InvitationScope, dS as InvitationSentAnswer, dT as InvitationStatus, dU as InvitationsLabels, dV as InvitationsPanel, dW as InvitationsPanelProps } from '../delete-account-setting-Dy4kJgUm.js';
 import '../components/account-chips.js';
 import './admin-parts.js';
 import '../components/tooltip.js';

package/dist/admin/reviewer-scope-editor.d.ts

@@ -1,5 +1,5 @@
 import 'react';
-export { cM as DEFAULT_REVIEWER_SCOPE_LABELS, ez as ReviewerScope, eA as ReviewerScopeArea, eB as ReviewerScopeEditor, eC as ReviewerScopeEditorProps, eD as ReviewerScopeLabels, eE as ReviewerScopeLanguage } from '../delete-account-setting-FLyJf-kZ.js';
+export { cM as DEFAULT_REVIEWER_SCOPE_LABELS, ez as ReviewerScope, eA as ReviewerScopeArea, eB as ReviewerScopeEditor, eC as ReviewerScopeEditorProps, eD as ReviewerScopeLabels, eE as ReviewerScopeLanguage } from '../delete-account-setting-Dy4kJgUm.js';
 import './admin-parts.js';
 import '../components/tooltip.js';
 import '../hooks/use-anchored-rect.js';

package/dist/admin/role-select.d.ts

@@ -1,6 +1,6 @@
 import 'react';
 import '../components/account-chips.js';
-export { cN as DEFAULT_ROLE_SELECT_LABELS, eG as RoleLock, eH as RoleLockCode, eI as RoleSelect, eJ as RoleSelectLabels, eK as RoleSelectProps, eL as RolesEditor, eM as RolesEditorProps } from '../delete-account-setting-FLyJf-kZ.js';
+export { cN as DEFAULT_ROLE_SELECT_LABELS, eG as RoleLock, eH as RoleLockCode, eI as RoleSelect, eJ as RoleSelectLabels, eK as RoleSelectProps, eL as RolesEditor, eM as RolesEditorProps } from '../delete-account-setting-Dy4kJgUm.js';
 import 'lucide-react';
 import '../lib/format.js';
 import '../components/chip.js';

package/dist/admin/transfer-ownership-dialog.d.ts

@@ -1,5 +1,5 @@
 import 'react';
-export { cT as DEFAULT_TRANSFER_OWNERSHIP_LABELS, fl as TransferCandidate, fm as TransferOwnershipDialog, fn as TransferOwnershipDialogProps, fo as TransferOwnershipLabels, fp as TransferUnavailable, fq as TransferValues } from '../delete-account-setting-FLyJf-kZ.js';
+export { cT as DEFAULT_TRANSFER_OWNERSHIP_LABELS, fl as TransferCandidate, fm as TransferOwnershipDialog, fn as TransferOwnershipDialogProps, fo as TransferOwnershipLabels, fp as TransferUnavailable, fq as TransferValues } from '../delete-account-setting-Dy4kJgUm.js';
 import './admin-parts.js';
 import '../components/tooltip.js';
 import '../hooks/use-anchored-rect.js';

package/dist/admin/user-roster.d.ts

@@ -5,7 +5,7 @@ import '../components/account-chips.js';
 import '../components/chip.js';
 import '../data-table-labels-kpAAVi6g.js';
 import '../components/data-table-sort.js';
-export { bz as AdminUserStateFields, cU as DEFAULT_USER_ROSTER_LABELS, eF as RoleEditing, eN as RosterState, fv as USER_ROSTER_SORT_KEYS, fC as UserIdentityCell, fD as UserIdentityCellProps, fE as UserRosterColumnsOptions, fF as UserRosterLabels, fG as UserRosterRow, fH as UserRosterSortKey, fI as UserRowAction, fJ as UserRowActionList, fK as UserRowActions, fL as UserRowActionsProps, fM as adminUserStates, gc as useUserRosterColumns, gd as userRosterColumns, ge as userRosterSort } from '../delete-account-setting-FLyJf-kZ.js';
+export { bz as AdminUserStateFields, cU as DEFAULT_USER_ROSTER_LABELS, eF as RoleEditing, eN as RosterState, fv as USER_ROSTER_SORT_KEYS, fC as UserIdentityCell, fD as UserIdentityCellProps, fE as UserRosterColumnsOptions, fF as UserRosterLabels, fG as UserRosterRow, fH as UserRosterSortKey, fI as UserRowAction, fJ as UserRowActionList, fK as UserRowActions, fL as UserRowActionsProps, fM as adminUserStates, gc as useUserRosterColumns, gd as userRosterColumns, ge as userRosterSort } from '../delete-account-setting-Dy4kJgUm.js';
 import 'lucide-react';
 import '../components/field-parts.js';
 import '../components/tooltip.js';

package/dist/auth/register-form.d.ts

@@ -1,5 +1,5 @@
 import 'react';
-export { cL as DEFAULT_REGISTER_LABELS, eu as RegisterForm, ev as RegisterFormProps, ew as RegisterLabels, ex as RegisterValues } from '../delete-account-setting-FLyJf-kZ.js';
+export { cL as DEFAULT_REGISTER_LABELS, eu as RegisterForm, ev as RegisterFormProps, ew as RegisterLabels, ex as RegisterValues } from '../delete-account-setting-Dy4kJgUm.js';
 import '../components/tooltip.js';
 import '../hooks/use-anchored-rect.js';
 import '../lib/clipping.js';

package/dist/billing/billing-banner.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { ComponentPropsWithoutRef } from 'react';
-import { e4 as LabelOverride, bH as BillingLabels } from '../delete-account-setting-FLyJf-kZ.js';
+import { e4 as LabelOverride, bH as BillingLabels } from '../delete-account-setting-Dy4kJgUm.js';
 import { AlertTone, AlertSize } from '../components/alert-banner.js';
 import '../components/tooltip.js';
 import '../hooks/use-anchored-rect.js';

package/dist/billing/billing-labels.d.ts

@@ -1,4 +1,4 @@
-export { bH as BillingLabels, cp as DEFAULT_BILLING_LABELS, eW as SUBSCRIPTION_STATUSES, fb as SubscriptionStatus, f$ as useBillingLabels } from '../delete-account-setting-FLyJf-kZ.js';
+export { bH as BillingLabels, cp as DEFAULT_BILLING_LABELS, eW as SUBSCRIPTION_STATUSES, fb as SubscriptionStatus, f$ as useBillingLabels } from '../delete-account-setting-Dy4kJgUm.js';
 import 'react';
 import '../components/tooltip.js';
 import '../hooks/use-anchored-rect.js';

package/dist/billing/billing-lock.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { e4 as LabelOverride, bH as BillingLabels } from '../delete-account-setting-FLyJf-kZ.js';
+import { e4 as LabelOverride, bH as BillingLabels } from '../delete-account-setting-Dy4kJgUm.js';
 import '../components/tooltip.js';
 import '../hooks/use-anchored-rect.js';
 import '../lib/clipping.js';

package/dist/billing/billing-standing.d.ts

@@ -1,5 +1,5 @@
 import { DateInput } from '../lib/format.js';
-import { fb as SubscriptionStatus } from '../delete-account-setting-FLyJf-kZ.js';
+import { fb as SubscriptionStatus } from '../delete-account-setting-Dy4kJgUm.js';
 import 'react';
 import '../components/tooltip.js';
 import '../hooks/use-anchored-rect.js';

package/dist/billing/plan-card.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { e4 as LabelOverride, bH as BillingLabels } from '../delete-account-setting-FLyJf-kZ.js';
+import { e4 as LabelOverride, bH as BillingLabels } from '../delete-account-setting-Dy4kJgUm.js';
 import { ChoiceCardProps } from '../components/choice-card.js';
 import { PlanPrices, BillingCurrency, BillingInterval } from './plan-price.js';
 import '../components/tooltip.js';

package/dist/billing/plan-limit-notice.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { ComponentPropsWithoutRef } from 'react';
-import { e4 as LabelOverride, bH as BillingLabels } from '../delete-account-setting-FLyJf-kZ.js';
+import { e4 as LabelOverride, bH as BillingLabels } from '../delete-account-setting-Dy4kJgUm.js';
 import { AlertTone } from '../components/alert-banner.js';
 import '../components/tooltip.js';
 import '../hooks/use-anchored-rect.js';

package/dist/billing/subscription-actions.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { ComponentPropsWithoutRef } from 'react';
-import { e4 as LabelOverride, bH as BillingLabels } from '../delete-account-setting-FLyJf-kZ.js';
+import { e4 as LabelOverride, bH as BillingLabels } from '../delete-account-setting-Dy4kJgUm.js';
 import '../components/tooltip.js';
 import '../hooks/use-anchored-rect.js';
 import '../lib/clipping.js';

package/dist/billing/subscription-status-chip.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { fb as SubscriptionStatus, e4 as LabelOverride, bH as BillingLabels } from '../delete-account-setting-FLyJf-kZ.js';
+import { fb as SubscriptionStatus, e4 as LabelOverride, bH as BillingLabels } from '../delete-account-setting-Dy4kJgUm.js';
 import { ChipTone, ChipSize, ChipVariant, ChipShape } from '../components/chip.js';
 import '../components/tooltip.js';
 import '../hooks/use-anchored-rect.js';

package/dist/chart.d.ts

@@ -14,7 +14,7 @@ export { TimeTickUnit } from './components/series-chart-ticks.js';
 import 'recharts';
 import 'react';
 import './lib/direction.js';
-import './delete-account-setting-FLyJf-kZ.js';
+import './delete-account-setting-Dy4kJgUm.js';
 import './components/tooltip.js';
 import './hooks/use-anchored-rect.js';
 import './lib/clipping.js';

package/dist/components/amount-input.d.ts

@@ -2,7 +2,7 @@ import * as react from 'react';
 import { ReactNode } from 'react';
 import { CalculatorButtonLabels } from './calculator.js';
 import { NumberPadSheetLabels } from './numpad-sheet.js';
-import '../delete-account-setting-FLyJf-kZ.js';
+import '../delete-account-setting-Dy4kJgUm.js';
 import './tooltip.js';
 import '../hooks/use-anchored-rect.js';
 import '../lib/clipping.js';

package/dist/components/button-group.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { ComponentPropsWithoutRef, ReactNode, Ref, MouseEvent, ReactElement } from 'react';
-import { bO as ButtonVariant, bM as ButtonSize } from '../delete-account-setting-FLyJf-kZ.js';
+import { bO as ButtonVariant, bM as ButtonSize } from '../delete-account-setting-Dy4kJgUm.js';
 import './tooltip.js';
 import '../hooks/use-anchored-rect.js';
 import '../lib/clipping.js';

package/dist/components/calculator.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { bP as CalculatorLabels } from '../delete-account-setting-FLyJf-kZ.js';
+import { bP as CalculatorLabels } from '../delete-account-setting-Dy4kJgUm.js';
 import './tooltip.js';
 import '../hooks/use-anchored-rect.js';
 import '../lib/clipping.js';

package/dist/components/confirm-dialog.d.ts

@@ -1,5 +1,5 @@
 import 'react';
-export { c9 as ConfirmDialogLabels, ca as ConfirmFn, cb as ConfirmOptions, cc as ConfirmProvider, cd as ConfirmProviderProps, ce as ConfirmTone, cu as DEFAULT_CONFIRM_DIALOG_LABELS, g0 as useConfirm } from '../delete-account-setting-FLyJf-kZ.js';
+export { c9 as ConfirmDialogLabels, ca as ConfirmFn, cb as ConfirmOptions, cc as ConfirmProvider, cd as ConfirmProviderProps, ce as ConfirmTone, cu as DEFAULT_CONFIRM_DIALOG_LABELS, g0 as useConfirm } from '../delete-account-setting-Dy4kJgUm.js';
 import './tooltip.js';
 import '../hooks/use-anchored-rect.js';
 import '../lib/clipping.js';

package/dist/components/copy-button.d.ts

@@ -1,5 +1,5 @@
 import 'react';
-export { cf as CopyButton, cg as CopyButtonLabels, ch as CopyButtonProps, cv as DEFAULT_COPY_BUTTON_LABELS } from '../delete-account-setting-FLyJf-kZ.js';
+export { cf as CopyButton, cg as CopyButtonLabels, ch as CopyButtonProps, cv as DEFAULT_COPY_BUTTON_LABELS } from '../delete-account-setting-Dy4kJgUm.js';
 import './tooltip.js';
 import '../data-table-labels-kpAAVi6g.js';
 import './data-table-sort.js';

package/dist/components/danger-confirm.d.ts

@@ -1,5 +1,5 @@
 import 'react';
-export { cj as CurrentPasswordInput, ck as CurrentPasswordInputLabels, cl as CurrentPasswordInputProps, cx as DEFAULT_DANGER_CONFIRM_LABELS, cV as DangerConfirm, cW as DangerConfirmLabels, cX as DangerConfirmProps, cY as DangerConfirmValues, cZ as DangerConsequence, fr as TypedConfirmField, fs as TypedConfirmFieldLabels, ft as TypedConfirmFieldProps, fu as TypedMatch, f_ as typedMatches, gt as usePromisePending } from '../delete-account-setting-FLyJf-kZ.js';
+export { cj as CurrentPasswordInput, ck as CurrentPasswordInputLabels, cl as CurrentPasswordInputProps, cx as DEFAULT_DANGER_CONFIRM_LABELS, cV as DangerConfirm, cW as DangerConfirmLabels, cX as DangerConfirmProps, cY as DangerConfirmValues, cZ as DangerConsequence, fr as TypedConfirmField, fs as TypedConfirmFieldLabels, ft as TypedConfirmFieldProps, fu as TypedMatch, f_ as typedMatches, gt as usePromisePending } from '../delete-account-setting-Dy4kJgUm.js';
 import './tooltip.js';
 import '../hooks/use-anchored-rect.js';
 import '../lib/clipping.js';

package/dist/components/facing-pair.d.ts

@@ -6,7 +6,7 @@ import './series-chart-labels.js';
 import './toggle-legend.js';
 import './series-chart-ticks.js';
 import './series-chart-budget.js';
-import '../delete-account-setting-FLyJf-kZ.js';
+import '../delete-account-setting-Dy4kJgUm.js';
 import './tooltip.js';
 import '../hooks/use-anchored-rect.js';
 import '../lib/clipping.js';

package/dist/components/file-button.d.ts

@@ -1,5 +1,5 @@
 import 'react';
-export { cB as DEFAULT_FILE_PICKER_LABELS, di as FileButton, dj as FileButtonProps, gf as FilePickHandler, dl as FilePickerLabels, dm as FileRejection, dn as FileRejectionReason, dp as FileScreenOptions, fA as UseFilePickerOptions, fB as UseFilePickerReturn, gg as formatAccept, gh as judgePick, fT as matchesAccept, gi as screenFiles, gj as summariseRejections, g1 as useFilePicker } from '../delete-account-setting-FLyJf-kZ.js';
+export { cB as DEFAULT_FILE_PICKER_LABELS, di as FileButton, dj as FileButtonProps, gf as FilePickHandler, dl as FilePickerLabels, dm as FileRejection, dn as FileRejectionReason, dp as FileScreenOptions, fA as UseFilePickerOptions, fB as UseFilePickerReturn, gg as formatAccept, gh as judgePick, fT as matchesAccept, gi as screenFiles, gj as summariseRejections, g1 as useFilePicker } from '../delete-account-setting-Dy4kJgUm.js';
 import './tooltip.js';
 import '../hooks/use-anchored-rect.js';
 import '../lib/clipping.js';

package/dist/components/file-dropzone.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
-import { dm as FileRejection, gf as FilePickHandler, dl as FilePickerLabels } from '../delete-account-setting-FLyJf-kZ.js';
+import { dm as FileRejection, gf as FilePickHandler, dl as FilePickerLabels } from '../delete-account-setting-Dy4kJgUm.js';
 import './tooltip.js';
 import '../hooks/use-anchored-rect.js';
 import '../lib/clipping.js';

package/dist/components/form-actions.d.ts

@@ -1,6 +1,6 @@
 import 'react';
 import 'lucide-react';
-export { cC as DEFAULT_FORM_ACTIONS_LABELS, ds as FormActions, dt as FormActionsAlign, du as FormActionsDestructive, dv as FormActionsLabels, dw as FormActionsPlacement, dx as FormActionsProps, dy as FormActionsStack, dz as FormActionsStickyWithin, dA as FormActionsSubmitProps, dB as FormActionsSubmitShortcut, ey as ResponsiveFormActionsPlacement } from '../delete-account-setting-FLyJf-kZ.js';
+export { cC as DEFAULT_FORM_ACTIONS_LABELS, ds as FormActions, dt as FormActionsAlign, du as FormActionsDestructive, dv as FormActionsLabels, dw as FormActionsPlacement, dx as FormActionsProps, dy as FormActionsStack, dz as FormActionsStickyWithin, dA as FormActionsSubmitProps, dB as FormActionsSubmitShortcut, ey as ResponsiveFormActionsPlacement } from '../delete-account-setting-Dy4kJgUm.js';
 import './tooltip.js';
 import '../hooks/use-anchored-rect.js';
 import '../lib/clipping.js';

package/dist/components/iban-input.d.ts

@@ -1,6 +1,6 @@
 import 'react';
 import '../lib/iban.js';
-export { cD as DEFAULT_IBAN_INPUT_LABELS, dC as IbanInput, dD as IbanInputLabels, dE as IbanInputProps } from '../delete-account-setting-FLyJf-kZ.js';
+export { cD as DEFAULT_IBAN_INPUT_LABELS, dC as IbanInput, dD as IbanInputLabels, dE as IbanInputProps } from '../delete-account-setting-Dy4kJgUm.js';
 import './tooltip.js';
 import '../hooks/use-anchored-rect.js';
 import '../lib/clipping.js';

package/dist/components/language-select.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { eY as SelectProps, d$ as KitLanguageCode, d_ as KitLanguage } from '../delete-account-setting-FLyJf-kZ.js';
+import { eY as SelectProps, d$ as KitLanguageCode, d_ as KitLanguage } from '../delete-account-setting-Dy4kJgUm.js';
 import './tooltip.js';
 import '../hooks/use-anchored-rect.js';
 import '../lib/clipping.js';

package/dist/components/legal-page.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { Ref, ReactNode } from 'react';
-import { ej as LegalPageKey, e4 as LabelOverride, ea as LegalLabels, eg as LegalOperator } from '../delete-account-setting-FLyJf-kZ.js';
+import { ej as LegalPageKey, e4 as LabelOverride, ea as LegalLabels, eg as LegalOperator } from '../delete-account-setting-Dy4kJgUm.js';
 import { CheckboxProps } from './checkbox.js';
 import './tooltip.js';
 import '../hooks/use-anchored-rect.js';

package/dist/components/legal.d.ts

@@ -1,5 +1,5 @@
 import 'react';
-export { cF as DEFAULT_LEGAL_LABELS, e2 as LEGAL_HREFS, e6 as LegalDisclaimerSectionLabels, e7 as LegalFooter, e8 as LegalFooterProps, e9 as LegalFramedSectionLabels, ea as LegalLabels, eb as LegalLayout, ec as LegalLayoutProps, ed as LegalLink, ee as LegalLinks, ef as LegalLinksProps, eg as LegalOperator, eh as LegalOperatorSectionLabels, ei as LegalOperatorText, gk as LegalPageContext, gl as LegalPageContextValue, ej as LegalPageKey, gm as LegalRefTarget, ek as LegalSection, el as LegalSectionProps, gn as LegalSectionSlot, go as LegalSlotContext, gp as LegalText, em as LegalTextSectionLabels, gq as baseLanguage, fR as legalOperatorText, gr as resolveLegalRefs, ga as useLegalLabels, gs as warnLegalOnce } from '../delete-account-setting-FLyJf-kZ.js';
+export { cF as DEFAULT_LEGAL_LABELS, e2 as LEGAL_HREFS, e6 as LegalDisclaimerSectionLabels, e7 as LegalFooter, e8 as LegalFooterProps, e9 as LegalFramedSectionLabels, ea as LegalLabels, eb as LegalLayout, ec as LegalLayoutProps, ed as LegalLink, ee as LegalLinks, ef as LegalLinksProps, eg as LegalOperator, eh as LegalOperatorSectionLabels, ei as LegalOperatorText, gk as LegalPageContext, gl as LegalPageContextValue, ej as LegalPageKey, gm as LegalRefTarget, ek as LegalSection, el as LegalSectionProps, gn as LegalSectionSlot, go as LegalSlotContext, gp as LegalText, em as LegalTextSectionLabels, gq as baseLanguage, fR as legalOperatorText, gr as resolveLegalRefs, ga as useLegalLabels, gs as warnLegalOnce } from '../delete-account-setting-Dy4kJgUm.js';
 import './tooltip.js';
 import '../hooks/use-anchored-rect.js';
 import '../lib/clipping.js';

package/dist/components/money-field.d.ts

@@ -2,7 +2,7 @@ import * as react from 'react';
 import { ComponentProps, Ref } from 'react';
 import { AmountInput } from './amount-input.js';
 import './calculator.js';
-import '../delete-account-setting-FLyJf-kZ.js';
+import '../delete-account-setting-Dy4kJgUm.js';
 import './tooltip.js';
 import '../hooks/use-anchored-rect.js';
 import '../lib/clipping.js';

package/dist/components/number-field.d.ts

@@ -2,7 +2,7 @@ import * as react from 'react';
 import { ComponentProps, ReactNode } from 'react';
 import { NumberInput } from './number-input.js';
 import './calculator.js';
-import '../delete-account-setting-FLyJf-kZ.js';
+import '../delete-account-setting-Dy4kJgUm.js';
 import './tooltip.js';
 import '../hooks/use-anchored-rect.js';
 import '../lib/clipping.js';

package/dist/components/number-input.d.ts

@@ -2,7 +2,7 @@ import * as react from 'react';
 import { ReactNode } from 'react';
 import { CalculatorButtonLabels } from './calculator.js';
 import { NumberPadSheetLabels } from './numpad-sheet.js';
-import '../delete-account-setting-FLyJf-kZ.js';
+import '../delete-account-setting-Dy4kJgUm.js';
 import './tooltip.js';
 import '../hooks/use-anchored-rect.js';
 import '../lib/clipping.js';

package/dist/components/numpad-sheet.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { bP as CalculatorLabels } from '../delete-account-setting-FLyJf-kZ.js';
+import { bP as CalculatorLabels } from '../delete-account-setting-Dy4kJgUm.js';
 import './tooltip.js';
 import '../hooks/use-anchored-rect.js';
 import '../lib/clipping.js';

package/dist/components/page-header.js

@@ -8,6 +8,7 @@ const TITLE = {
   compact: "text-xl font-semibold",
   md: "text-xl font-semibold tracking-tight sm:text-2xl"
 };
+const STACK_ACTIONS_AT_LARGE = "large:max-sm:flex-col large:max-sm:items-stretch large:max-sm:[&>*]:w-full";
 const ROW = {
   stacked: "flex-col gap-3 sm:flex-row sm:items-start sm:justify-between sm:gap-4",
   inline: "flex-row items-center justify-between gap-2 sm:gap-4"
@@ -85,7 +86,11 @@ function PageHeader({
             "div",
             {
               ref: actionsRef,
-              className: cn("flex shrink-0 flex-wrap items-center gap-2", hasSecondary && "sm:order-2"),
+              className: cn(
+                "flex shrink-0 flex-wrap items-center gap-2",
+                hasSecondary && "sm:order-2",
+                mobileLayout === "stacked" && STACK_ACTIONS_AT_LARGE
+              ),
               children: actions
             }
           ),

package/dist/components/page-header.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/page-header.tsx"],"sourcesContent":["import { useLayoutEffect, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, ElementType, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { SECTION_LABEL_CLASS } from \"./text\";\n\n/**\n * `md` (default) is kastlan's `text-2xl` page title from `sm` up, a step smaller on a\n * phone; `sm` is lenkbank's `text-lg` title on a dense tool page (projects-page.tsx).\n *\n * `compact` (0.13) is keksdose's page title (keksdose F4): `text-xl font-semibold` at\n * EVERY width — budgets, rules, accounts, transactions and budget pages all write\n * exactly that `<h1>` by hand. It is `md`'s phone size without `md`'s step up to\n * `text-2xl` on a wider screen, and without its `tracking-tight`, which keksdose's\n * titles never had. A word and not a letter for the reason `ProgressBar`'s `slim` is\n * one: the letters are taken in order, and there is none between `sm` and `md` — an\n * `lg` or `xl` at `text-xl` would read as LARGER than `md`, which from `sm` up it is\n * not.\n */\nexport type PageHeaderSize = \"sm\" | \"compact\" | \"md\";\n\nconst TITLE: Record<PageHeaderSize, string> = {\n  sm: \"text-lg font-semibold\",\n  compact: \"text-xl font-semibold\",\n  md: \"text-xl font-semibold tracking-tight sm:text-2xl\",\n};\n\n/**\n * How the title block and the actions sit below the `sm` breakpoint. From `sm` up both\n * layouts are one row: title block at the start, actions at the end.\n */\nexport type PageHeaderMobileLayout = \"stacked\" | \"inline\";\n\nconst ROW: Record<PageHeaderMobileLayout, string> = {\n  stacked: \"flex-col gap-3 sm:flex-row sm:items-start sm:justify-between sm:gap-4\",\n  inline: \"flex-row items-center justify-between gap-2 sm:gap-4\",\n};\n\n/**\n * Where the actions sit on the title block's height, in the one row the header is from\n * `sm` up (and on a phone too when {@link PageHeaderMobileLayout} is `inline`, the only\n * layout that has a row there). Unset keeps each layout's own: `start` for `stacked`,\n * `center` for `inline`.\n */\nexport type PageHeaderActionsAlign = \"start\" | \"center\" | \"end\";\n\n/** Applied to the ROW, so the title block and the actions are aligned against each\n *  other on one cross axis. 0.14.0 put `self-*` on the actions box alone, which moved\n *  nothing when the actions were the taller item — they already filled the row, and\n *  the title stayed at the top (keksdose H2, reports-page's two-line labelled\n *  CurrencySelect). Per layout, because `stacked` is a column on a phone, where\n *  `items-center` would centre everything HORIZONTALLY — so it aligns from `sm` up. */\nconst ROW_ALIGN: Record<PageHeaderMobileLayout, Record<PageHeaderActionsAlign, string>> = {\n  stacked: { start: \"sm:items-start\", center: \"sm:items-center\", end: \"sm:items-end\" },\n  inline: { start: \"items-start\", center: \"items-center\", end: \"items-end\" },\n};\n\nexport interface PageHeaderProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"title\"> {\n  title: ReactNode;\n  /** A sentence under the title. */\n  description?: ReactNode;\n  /** Buttons for the page — \"New\", \"Export\". At the title's end from `sm` up; under it,\n   *  wrapping, on a phone — unless {@link mobileLayout} is `inline`. */\n  actions?: ReactNode;\n  /** A `Breadcrumbs` trail, drawn above everything else. */\n  breadcrumbs?: ReactNode;\n  /** A small uppercase line above the title — the section or the kind of record\n   *  (\"Building\", \"Settings\"). The section-label type. */\n  eyebrow?: ReactNode;\n  /** The title's element. Default `h1`: a page has one, and this is it. `h2` for a\n   *  header inside a page that already has its `h1` (a tab's own header). */\n  as?: \"h1\" | \"h2\" | \"h3\";\n  size?: PageHeaderSize;\n  /**\n   * `stacked` (default): on a phone the actions drop under the title and wrap, so a\n   * row of three buttons never pushes the title off the screen.\n   *\n   * `inline`: the actions stay beside the title on a phone too, vertically centred on\n   * it — keksdose's headers (transactions-page.tsx:515, `flex items-center\n   * justify-between gap-2`), which carry one or two icon-sized controls and were tuned\n   * for the phone in live #263. Adopting `PageHeader` must not undo that tuning, so the\n   * row stays a row (keksdose F4). The actions do NOT wrap or shrink here: `inline` is\n   * for a header whose actions are known to fit beside a phone-width title (an icon\n   * button, a month picker); a long title wraps to make room for them instead.\n   */\n  mobileLayout?: PageHeaderMobileLayout;\n  /**\n   * A second group of actions that gets its OWN full-width row under the header on a\n   * phone, and joins the actions' row from `sm` up, between the title and\n   * {@link actions}.\n   *\n   * keksdose's budget page (budget-page.tsx, feedback #60) is the case: title and month\n   * navigation on row 1, the fold/unfold toggles on row 2 on a phone — \"two tidy rows\n   * instead of the old ragged justify-between overflow\" — and one row, title | toggles |\n   * month nav, on a wider screen. It builds that by hand with a wrapping flex row and\n   * swapped order utilities; adopting `PageHeader` (keksdose G6b) must not lose it.\n   * There: `actions` is the month navigation, this is the toggles.\n   *\n   * The DOM order is title, `actions`, `secondaryActions` — the phone's visual order,\n   * and the one a screen reader and the Tab key follow at every width. From `sm` up the\n   * two groups swap places visually only, which keeps the page's primary control (the\n   * month) at the row's end, where keksdose had it, and first in reading order. The\n   * breakpoint is `sm`, the one {@link mobileLayout} switches at, not keksdose's `md`:\n   * one header, one breakpoint.\n   */\n  secondaryActions?: ReactNode;\n  /**\n   * The actions' vertical alignment against the title block — see\n   * {@link PageHeaderActionsAlign}. Unset keeps the layout's own.\n   *\n   * keksdose's reports page (reports-page.tsx, keksdose G8) carries a LABELLED\n   * `CurrencySelect` as its action: a field with its label on top is taller than the\n   * title, and `stacked`'s default top alignment hangs it from the title's cap height\n   * with its control well below the title's line. `center` sets it on the title's\n   * middle, as that page's hand-written `items-center` row did. It aligns the whole row\n   * (title block and actions against each other), since 0.14.1: 0.14.0 moved only the\n   * actions box, which did nothing when the actions were the taller item (keksdose H2).\n   */\n  actionsAlign?: PageHeaderActionsAlign;\n  /**\n   * One line, cut with an ellipsis, instead of the default breaking of a long word onto\n   * as many lines as it needs.\n   *\n   * keksdose's payees page (payees-page.tsx, live #263, keksdose G6a) wraps its title in\n   * its own truncating span so a long name gives way to the `inline` header's actions\n   * instead of pushing them. This is that span's behaviour on the heading itself; the\n   * title block is already allowed to shrink below its content, which is what lets the\n   * cut happen inside a flex row.\n   *\n   * The full title stays in the DOM as the heading's text, so a screen reader and the\n   * document outline read all of it. There is deliberately no native `title` tooltip:\n   * the kit does not use them (not on touch, not on keyboard focus, not styled).\n   */\n  truncateTitle?: boolean;\n}\n\n/**\n * A page's head: optional breadcrumbs, an eyebrow, the title, a description, and the\n * page's actions.\n *\n * kastlan's (shared/components/display/page-header.tsx) is the model — title and\n * description on one side, actions on the other, stacked on a phone — and this adds\n * what its pages kept writing around it: a trail above, an eyebrow, a `ReactNode`\n * title (a status chip beside the name), and actions that WRAP when there are more\n * than fit a phone's width, instead of running off it. No outer margin: the page's\n * own rhythm (`space-y-*`, a grid gap) places it.\n */\nexport function PageHeader({\n  title,\n  description,\n  actions,\n  breadcrumbs,\n  eyebrow,\n  as = \"h1\",\n  size = \"md\",\n  mobileLayout = \"stacked\",\n  secondaryActions,\n  actionsAlign,\n  truncateTitle = false,\n  className,\n  ...rest\n}: PageHeaderProps) {\n  const Heading = as as ElementType;\n  const hasSecondary = secondaryActions != null;\n  const wrapsSecondary = hasSecondary && mobileLayout === \"inline\";\n  const align = actionsAlign != null ? ROW_ALIGN[mobileLayout][actionsAlign] : undefined;\n  // keksdose H1: in `inline` the title block could shrink below its longest word, and\n  // `break-words` then split \"Monatsbudget\" into \"Monatsbudg\" / \"et\" beside the actions.\n  // Unless it truncates, the title keeps its longest word (min-content) and the ROW\n  // wraps instead: actions that do not fit go to a line of their own, as the app's old\n  // `flex-wrap` header did.\n  const keepsWords = mobileLayout === \"inline\" && !truncateTitle;\n  // keksdose, after H1: once the actions have wrapped below the title, the phone's\n  // header was THREE rows — title / actions / secondary — where the app's old header\n  // shared the second row between the month nav and the toggles (~48px of phone\n  // height). So the secondary group's full-width basis (G6b: a row of its own) is\n  // dropped exactly when the actions already sit below the title; then it joins their\n  // row if it fits, and wraps under them if not. While the actions share the title's\n  // row, nothing changes: the secondary group never climbs onto the title's row.\n  //\n  // CSS cannot see \"the previous item wrapped\", so it is measured — by a\n  // ResizeObserver, whose first callback runs on `observe`. It is stable: the\n  // secondary group comes after the actions, so its basis cannot move them. No\n  // ResizeObserver (jsdom) or no layout keeps the basis, the 0.14.0 layout.\n  const measuresWrap = keepsWords && hasSecondary && actions != null;\n  const titleRef = useRef<HTMLDivElement>(null);\n  const actionsRef = useRef<HTMLDivElement>(null);\n  const [actionsWrapped, setActionsWrapped] = useState(false);\n  useLayoutEffect(() => {\n    const titleBox = titleRef.current;\n    const actionsBox = actionsRef.current;\n    if (!measuresWrap || !titleBox || !actionsBox || typeof ResizeObserver === \"undefined\") return;\n    const observer = new ResizeObserver(() => {\n      const t = titleBox.getBoundingClientRect();\n      const a = actionsBox.getBoundingClientRect();\n      // Unmeasured (display: none, no layout): keep the full-width basis.\n      setActionsWrapped(t.height > 0 && a.height > 0 && a.top >= t.bottom - 1);\n    });\n    observer.observe(titleBox);\n    observer.observe(actionsBox);\n    if (titleBox.parentElement) observer.observe(titleBox.parentElement);\n    return () => observer.disconnect();\n  }, [measuresWrap]);\n  return (\n    <div {...rest} className={cn(\"flex min-w-0 flex-col gap-2\", className)}>\n      {breadcrumbs}\n      {/* With a second group, `inline` wraps so that group's full-width basis puts it\n          on a row of its own on a phone (`stacked` is a column there already, and a\n          basis would size a column item's HEIGHT); from `sm` up the row stops wrapping\n          and the order utilities seat it between the title and the actions. Without\n          one, nothing changes. */}\n      <div\n        className={cn(\n          \"flex min-w-0\",\n          ROW[mobileLayout],\n          keepsWords ? \"flex-wrap\" : wrapsSecondary && \"flex-wrap sm:flex-nowrap\",\n          align,\n        )}\n      >\n        <div ref={titleRef} className={cn(\"flex-1\", keepsWords ? \"min-w-min\" : \"min-w-0\")}>\n          {eyebrow != null && <p className={cn(SECTION_LABEL_CLASS.xs, \"mb-1\")}>{eyebrow}</p>}\n          <Heading\n            className={cn(\n              truncateTitle ? \"truncate\" : \"break-words\",\n              \"text-[var(--text-primary)]\",\n              TITLE[size],\n            )}\n          >\n            {title}\n          </Heading>\n          {description != null && <p className=\"mt-1 text-sm text-[var(--text-muted)]\">{description}</p>}\n        </div>\n        {actions != null && (\n          <div\n            ref={actionsRef}\n            className={cn(\"flex shrink-0 flex-wrap items-center gap-2\", hasSecondary && \"sm:order-2\")}\n          >\n            {actions}\n          </div>\n        )}\n        {hasSecondary && (\n          <div\n            className={cn(\n              \"flex flex-wrap items-center gap-2 sm:order-1 sm:shrink-0\",\n              wrapsSecondary && (measuresWrap && actionsWrapped ? \"sm:basis-auto\" : \"basis-full sm:basis-auto\"),\n            )}\n          >\n            {secondaryActions}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";AA0NQ,SACsB,KADtB;AA1NR,SAAS,iBAAiB,QAAQ,gBAAgB;AAElD,SAAS,UAAU;AACnB,SAAS,2BAA2B;AAiBpC,MAAM,QAAwC;AAAA,EAC5C,IAAI;AAAA,EACJ,SAAS;AAAA,EACT,IAAI;AACN;AAQA,MAAM,MAA8C;AAAA,EAClD,SAAS;AAAA,EACT,QAAQ;AACV;AAgBA,MAAM,YAAoF;AAAA,EACxF,SAAS,EAAE,OAAO,kBAAkB,QAAQ,mBAAmB,KAAK,eAAe;AAAA,EACnF,QAAQ,EAAE,OAAO,eAAe,QAAQ,gBAAgB,KAAK,YAAY;AAC3E;AA4FO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,KAAK;AAAA,EACL,OAAO;AAAA,EACP,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB;AAAA,EACA,GAAG;AACL,GAAoB;AAClB,QAAM,UAAU;AAChB,QAAM,eAAe,oBAAoB;AACzC,QAAM,iBAAiB,gBAAgB,iBAAiB;AACxD,QAAM,QAAQ,gBAAgB,OAAO,UAAU,YAAY,EAAE,YAAY,IAAI;AAM7E,QAAM,aAAa,iBAAiB,YAAY,CAAC;AAajD,QAAM,eAAe,cAAc,gBAAgB,WAAW;AAC9D,QAAM,WAAW,OAAuB,IAAI;AAC5C,QAAM,aAAa,OAAuB,IAAI;AAC9C,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,KAAK;AAC1D,kBAAgB,MAAM;AACpB,UAAM,WAAW,SAAS;AAC1B,UAAM,aAAa,WAAW;AAC9B,QAAI,CAAC,gBAAgB,CAAC,YAAY,CAAC,cAAc,OAAO,mBAAmB,YAAa;AACxF,UAAM,WAAW,IAAI,eAAe,MAAM;AACxC,YAAM,IAAI,SAAS,sBAAsB;AACzC,YAAM,IAAI,WAAW,sBAAsB;AAE3C,wBAAkB,EAAE,SAAS,KAAK,EAAE,SAAS,KAAK,EAAE,OAAO,EAAE,SAAS,CAAC;AAAA,IACzE,CAAC;AACD,aAAS,QAAQ,QAAQ;AACzB,aAAS,QAAQ,UAAU;AAC3B,QAAI,SAAS,cAAe,UAAS,QAAQ,SAAS,aAAa;AACnE,WAAO,MAAM,SAAS,WAAW;AAAA,EACnC,GAAG,CAAC,YAAY,CAAC;AACjB,SACE,qBAAC,SAAK,GAAG,MAAM,WAAW,GAAG,+BAA+B,SAAS,GAClE;AAAA;AAAA,IAMD;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,IAAI,YAAY;AAAA,UAChB,aAAa,cAAc,kBAAkB;AAAA,UAC7C;AAAA,QACF;AAAA,QAEA;AAAA,+BAAC,SAAI,KAAK,UAAU,WAAW,GAAG,UAAU,aAAa,cAAc,SAAS,GAC7E;AAAA,uBAAW,QAAQ,oBAAC,OAAE,WAAW,GAAG,oBAAoB,IAAI,MAAM,GAAI,mBAAQ;AAAA,YAC/E;AAAA,cAAC;AAAA;AAAA,gBACC,WAAW;AAAA,kBACT,gBAAgB,aAAa;AAAA,kBAC7B;AAAA,kBACA,MAAM,IAAI;AAAA,gBACZ;AAAA,gBAEC;AAAA;AAAA,YACH;AAAA,YACC,eAAe,QAAQ,oBAAC,OAAE,WAAU,yCAAyC,uBAAY;AAAA,aAC5F;AAAA,UACC,WAAW,QACV;AAAA,YAAC;AAAA;AAAA,cACC,KAAK;AAAA,cACL,WAAW,GAAG,8CAA8C,gBAAgB,YAAY;AAAA,cAEvF;AAAA;AAAA,UACH;AAAA,UAED,gBACC;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT;AAAA,gBACA,mBAAmB,gBAAgB,iBAAiB,kBAAkB;AAAA,cACxE;AAAA,cAEC;AAAA;AAAA,UACH;AAAA;AAAA;AAAA,IAEJ;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/page-header.tsx"],"sourcesContent":["import { useLayoutEffect, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, ElementType, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { SECTION_LABEL_CLASS } from \"./text\";\n\n/**\n * `md` (default) is kastlan's `text-2xl` page title from `sm` up, a step smaller on a\n * phone; `sm` is lenkbank's `text-lg` title on a dense tool page (projects-page.tsx).\n *\n * `compact` (0.13) is keksdose's page title (keksdose F4): `text-xl font-semibold` at\n * EVERY width — budgets, rules, accounts, transactions and budget pages all write\n * exactly that `<h1>` by hand. It is `md`'s phone size without `md`'s step up to\n * `text-2xl` on a wider screen, and without its `tracking-tight`, which keksdose's\n * titles never had. A word and not a letter for the reason `ProgressBar`'s `slim` is\n * one: the letters are taken in order, and there is none between `sm` and `md` — an\n * `lg` or `xl` at `text-xl` would read as LARGER than `md`, which from `sm` up it is\n * not.\n */\nexport type PageHeaderSize = \"sm\" | \"compact\" | \"md\";\n\nconst TITLE: Record<PageHeaderSize, string> = {\n  sm: \"text-lg font-semibold\",\n  compact: \"text-xl font-semibold\",\n  md: \"text-xl font-semibold tracking-tight sm:text-2xl\",\n};\n\n/**\n * How the title block and the actions sit below the `sm` breakpoint. From `sm` up both\n * layouts are one row: title block at the start, actions at the end.\n */\nexport type PageHeaderMobileLayout = \"stacked\" | \"inline\";\n\n/**\n * `stacked` at Large and Extra large on a phone (0.32.2, kastlan's 0.32.1 report;\n * docs/text-size-harmonization.md §4, as FormActions does): the actions take the full\n * width, one under the other. Side by side in 240 px of layout, two buttons each wrapped\n * their label onto three lines. `large:max-sm:`, the scaled phone width, so Normal and\n * every wider screen keep their row; `inline` is for actions known to fit, and stays.\n */\nconst STACK_ACTIONS_AT_LARGE =\n  \"large:max-sm:flex-col large:max-sm:items-stretch large:max-sm:[&>*]:w-full\";\n\nconst ROW: Record<PageHeaderMobileLayout, string> = {\n  stacked: \"flex-col gap-3 sm:flex-row sm:items-start sm:justify-between sm:gap-4\",\n  inline: \"flex-row items-center justify-between gap-2 sm:gap-4\",\n};\n\n/**\n * Where the actions sit on the title block's height, in the one row the header is from\n * `sm` up (and on a phone too when {@link PageHeaderMobileLayout} is `inline`, the only\n * layout that has a row there). Unset keeps each layout's own: `start` for `stacked`,\n * `center` for `inline`.\n */\nexport type PageHeaderActionsAlign = \"start\" | \"center\" | \"end\";\n\n/** Applied to the ROW, so the title block and the actions are aligned against each\n *  other on one cross axis. 0.14.0 put `self-*` on the actions box alone, which moved\n *  nothing when the actions were the taller item — they already filled the row, and\n *  the title stayed at the top (keksdose H2, reports-page's two-line labelled\n *  CurrencySelect). Per layout, because `stacked` is a column on a phone, where\n *  `items-center` would centre everything HORIZONTALLY — so it aligns from `sm` up. */\nconst ROW_ALIGN: Record<PageHeaderMobileLayout, Record<PageHeaderActionsAlign, string>> = {\n  stacked: { start: \"sm:items-start\", center: \"sm:items-center\", end: \"sm:items-end\" },\n  inline: { start: \"items-start\", center: \"items-center\", end: \"items-end\" },\n};\n\nexport interface PageHeaderProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"title\"> {\n  title: ReactNode;\n  /** A sentence under the title. */\n  description?: ReactNode;\n  /** Buttons for the page — \"New\", \"Export\". At the title's end from `sm` up; under it,\n   *  wrapping, on a phone — unless {@link mobileLayout} is `inline`. */\n  actions?: ReactNode;\n  /** A `Breadcrumbs` trail, drawn above everything else. */\n  breadcrumbs?: ReactNode;\n  /** A small uppercase line above the title — the section or the kind of record\n   *  (\"Building\", \"Settings\"). The section-label type. */\n  eyebrow?: ReactNode;\n  /** The title's element. Default `h1`: a page has one, and this is it. `h2` for a\n   *  header inside a page that already has its `h1` (a tab's own header). */\n  as?: \"h1\" | \"h2\" | \"h3\";\n  size?: PageHeaderSize;\n  /**\n   * `stacked` (default): on a phone the actions drop under the title and wrap, so a\n   * row of three buttons never pushes the title off the screen.\n   *\n   * `inline`: the actions stay beside the title on a phone too, vertically centred on\n   * it — keksdose's headers (transactions-page.tsx:515, `flex items-center\n   * justify-between gap-2`), which carry one or two icon-sized controls and were tuned\n   * for the phone in live #263. Adopting `PageHeader` must not undo that tuning, so the\n   * row stays a row (keksdose F4). The actions do NOT wrap or shrink here: `inline` is\n   * for a header whose actions are known to fit beside a phone-width title (an icon\n   * button, a month picker); a long title wraps to make room for them instead.\n   */\n  mobileLayout?: PageHeaderMobileLayout;\n  /**\n   * A second group of actions that gets its OWN full-width row under the header on a\n   * phone, and joins the actions' row from `sm` up, between the title and\n   * {@link actions}.\n   *\n   * keksdose's budget page (budget-page.tsx, feedback #60) is the case: title and month\n   * navigation on row 1, the fold/unfold toggles on row 2 on a phone — \"two tidy rows\n   * instead of the old ragged justify-between overflow\" — and one row, title | toggles |\n   * month nav, on a wider screen. It builds that by hand with a wrapping flex row and\n   * swapped order utilities; adopting `PageHeader` (keksdose G6b) must not lose it.\n   * There: `actions` is the month navigation, this is the toggles.\n   *\n   * The DOM order is title, `actions`, `secondaryActions` — the phone's visual order,\n   * and the one a screen reader and the Tab key follow at every width. From `sm` up the\n   * two groups swap places visually only, which keeps the page's primary control (the\n   * month) at the row's end, where keksdose had it, and first in reading order. The\n   * breakpoint is `sm`, the one {@link mobileLayout} switches at, not keksdose's `md`:\n   * one header, one breakpoint.\n   */\n  secondaryActions?: ReactNode;\n  /**\n   * The actions' vertical alignment against the title block — see\n   * {@link PageHeaderActionsAlign}. Unset keeps the layout's own.\n   *\n   * keksdose's reports page (reports-page.tsx, keksdose G8) carries a LABELLED\n   * `CurrencySelect` as its action: a field with its label on top is taller than the\n   * title, and `stacked`'s default top alignment hangs it from the title's cap height\n   * with its control well below the title's line. `center` sets it on the title's\n   * middle, as that page's hand-written `items-center` row did. It aligns the whole row\n   * (title block and actions against each other), since 0.14.1: 0.14.0 moved only the\n   * actions box, which did nothing when the actions were the taller item (keksdose H2).\n   */\n  actionsAlign?: PageHeaderActionsAlign;\n  /**\n   * One line, cut with an ellipsis, instead of the default breaking of a long word onto\n   * as many lines as it needs.\n   *\n   * keksdose's payees page (payees-page.tsx, live #263, keksdose G6a) wraps its title in\n   * its own truncating span so a long name gives way to the `inline` header's actions\n   * instead of pushing them. This is that span's behaviour on the heading itself; the\n   * title block is already allowed to shrink below its content, which is what lets the\n   * cut happen inside a flex row.\n   *\n   * The full title stays in the DOM as the heading's text, so a screen reader and the\n   * document outline read all of it. There is deliberately no native `title` tooltip:\n   * the kit does not use them (not on touch, not on keyboard focus, not styled).\n   */\n  truncateTitle?: boolean;\n}\n\n/**\n * A page's head: optional breadcrumbs, an eyebrow, the title, a description, and the\n * page's actions.\n *\n * kastlan's (shared/components/display/page-header.tsx) is the model — title and\n * description on one side, actions on the other, stacked on a phone — and this adds\n * what its pages kept writing around it: a trail above, an eyebrow, a `ReactNode`\n * title (a status chip beside the name), and actions that WRAP when there are more\n * than fit a phone's width, instead of running off it. No outer margin: the page's\n * own rhythm (`space-y-*`, a grid gap) places it.\n */\nexport function PageHeader({\n  title,\n  description,\n  actions,\n  breadcrumbs,\n  eyebrow,\n  as = \"h1\",\n  size = \"md\",\n  mobileLayout = \"stacked\",\n  secondaryActions,\n  actionsAlign,\n  truncateTitle = false,\n  className,\n  ...rest\n}: PageHeaderProps) {\n  const Heading = as as ElementType;\n  const hasSecondary = secondaryActions != null;\n  const wrapsSecondary = hasSecondary && mobileLayout === \"inline\";\n  const align = actionsAlign != null ? ROW_ALIGN[mobileLayout][actionsAlign] : undefined;\n  // keksdose H1: in `inline` the title block could shrink below its longest word, and\n  // `break-words` then split \"Monatsbudget\" into \"Monatsbudg\" / \"et\" beside the actions.\n  // Unless it truncates, the title keeps its longest word (min-content) and the ROW\n  // wraps instead: actions that do not fit go to a line of their own, as the app's old\n  // `flex-wrap` header did.\n  const keepsWords = mobileLayout === \"inline\" && !truncateTitle;\n  // keksdose, after H1: once the actions have wrapped below the title, the phone's\n  // header was THREE rows — title / actions / secondary — where the app's old header\n  // shared the second row between the month nav and the toggles (~48px of phone\n  // height). So the secondary group's full-width basis (G6b: a row of its own) is\n  // dropped exactly when the actions already sit below the title; then it joins their\n  // row if it fits, and wraps under them if not. While the actions share the title's\n  // row, nothing changes: the secondary group never climbs onto the title's row.\n  //\n  // CSS cannot see \"the previous item wrapped\", so it is measured — by a\n  // ResizeObserver, whose first callback runs on `observe`. It is stable: the\n  // secondary group comes after the actions, so its basis cannot move them. No\n  // ResizeObserver (jsdom) or no layout keeps the basis, the 0.14.0 layout.\n  const measuresWrap = keepsWords && hasSecondary && actions != null;\n  const titleRef = useRef<HTMLDivElement>(null);\n  const actionsRef = useRef<HTMLDivElement>(null);\n  const [actionsWrapped, setActionsWrapped] = useState(false);\n  useLayoutEffect(() => {\n    const titleBox = titleRef.current;\n    const actionsBox = actionsRef.current;\n    if (!measuresWrap || !titleBox || !actionsBox || typeof ResizeObserver === \"undefined\") return;\n    const observer = new ResizeObserver(() => {\n      const t = titleBox.getBoundingClientRect();\n      const a = actionsBox.getBoundingClientRect();\n      // Unmeasured (display: none, no layout): keep the full-width basis.\n      setActionsWrapped(t.height > 0 && a.height > 0 && a.top >= t.bottom - 1);\n    });\n    observer.observe(titleBox);\n    observer.observe(actionsBox);\n    if (titleBox.parentElement) observer.observe(titleBox.parentElement);\n    return () => observer.disconnect();\n  }, [measuresWrap]);\n  return (\n    <div {...rest} className={cn(\"flex min-w-0 flex-col gap-2\", className)}>\n      {breadcrumbs}\n      {/* With a second group, `inline` wraps so that group's full-width basis puts it\n          on a row of its own on a phone (`stacked` is a column there already, and a\n          basis would size a column item's HEIGHT); from `sm` up the row stops wrapping\n          and the order utilities seat it between the title and the actions. Without\n          one, nothing changes. */}\n      <div\n        className={cn(\n          \"flex min-w-0\",\n          ROW[mobileLayout],\n          keepsWords ? \"flex-wrap\" : wrapsSecondary && \"flex-wrap sm:flex-nowrap\",\n          align,\n        )}\n      >\n        <div ref={titleRef} className={cn(\"flex-1\", keepsWords ? \"min-w-min\" : \"min-w-0\")}>\n          {eyebrow != null && <p className={cn(SECTION_LABEL_CLASS.xs, \"mb-1\")}>{eyebrow}</p>}\n          <Heading\n            className={cn(\n              truncateTitle ? \"truncate\" : \"break-words\",\n              \"text-[var(--text-primary)]\",\n              TITLE[size],\n            )}\n          >\n            {title}\n          </Heading>\n          {description != null && <p className=\"mt-1 text-sm text-[var(--text-muted)]\">{description}</p>}\n        </div>\n        {actions != null && (\n          <div\n            ref={actionsRef}\n            className={cn(\n              \"flex shrink-0 flex-wrap items-center gap-2\",\n              hasSecondary && \"sm:order-2\",\n              mobileLayout === \"stacked\" && STACK_ACTIONS_AT_LARGE,\n            )}\n          >\n            {actions}\n          </div>\n        )}\n        {hasSecondary && (\n          <div\n            className={cn(\n              \"flex flex-wrap items-center gap-2 sm:order-1 sm:shrink-0\",\n              wrapsSecondary && (measuresWrap && actionsWrapped ? \"sm:basis-auto\" : \"basis-full sm:basis-auto\"),\n            )}\n          >\n            {secondaryActions}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/phone-input.d.ts

@@ -1,6 +1,6 @@
 import 'react';
 import '../lib/phone.js';
-export { cJ as DEFAULT_PHONE_INPUT_LABELS, eq as PhoneInput, er as PhoneInputLabels, es as PhoneInputProps } from '../delete-account-setting-FLyJf-kZ.js';
+export { cJ as DEFAULT_PHONE_INPUT_LABELS, eq as PhoneInput, er as PhoneInputLabels, es as PhoneInputProps } from '../delete-account-setting-Dy4kJgUm.js';
 import './tooltip.js';
 import '../hooks/use-anchored-rect.js';
 import '../lib/clipping.js';

package/dist/components/popover.d.ts

@@ -81,6 +81,6 @@ interface PopoverProps extends Omit<ComponentPropsWithoutRef<"div">, "children">
  * Only Tab is contained. A popover that took the page away as well would be a
  * {@link Modal}, and there is one of those.
  */
-declare function Popover({ trigger, children, width, labels, panelId, className, style, "aria-label": ariaLabel, ...rest }: PopoverProps): react.JSX.Element;
+declare function Popover({ trigger, children, width, labels, panelId, className, style, "aria-label": ariaLabel, onKeyDown: onKeyDownProp, ...rest }: PopoverProps): react.JSX.Element;
 
 export { DEFAULT_POPOVER_LABELS, Popover, type PopoverLabels, type PopoverProps };

package/dist/components/popover.js

@@ -26,6 +26,7 @@ function Popover({
   className,
   style,
   "aria-label": ariaLabel,
+  onKeyDown: onKeyDownProp,
   ...rest
 }) {
   const triggerRef = useRef(null);
@@ -65,6 +66,7 @@ function Popover({
     }
   });
   const handleKeyDown = (e) => {
+    onKeyDownProp?.(e);
     if (e.key !== "Escape") return;
     e.stopPropagation();
     close();

package/dist/components/popover.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/popover.tsx"],"sourcesContent":["import { useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, KeyboardEvent, ReactNode, RefObject } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { useAnchoredPanel } from \"../hooks/use-anchored-panel\";\nimport { useEscapeKey, useOutsideClick } from \"../hooks/use-dismiss\";\nimport { useFocusTrap } from \"../hooks/use-focus-trap\";\nimport { lengthPx, useRemPx, type RemLength } from \"../hooks/use-breakpoint\";\nimport { cn } from \"../lib/cn\";\nimport { dirOf } from \"../lib/direction\";\nimport type { Direction } from \"../lib/direction\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\n\n/** The panel's accessible name. A `role=\"dialog\"` with no name announces as \"dialog\"\n *  and nothing else, which is worse than the unlabelled div it replaced — so it is a\n *  prop with an English default, like every other string this package renders. Callers\n *  should pass the control's own name (\"Filter\", \"Choose a date\"); the default is only\n *  there so an unmigrated call site is still named. */\nexport interface PopoverLabels {\n  panel: string;\n}\n\n// Exported since the kit grew one label tree (`UiKitLabels`, src/i18n): the complete\n// English reference a translator works from has to be able to name every namespace.\nexport const DEFAULT_POPOVER_LABELS: PopoverLabels = {\n  // \"Pop-up\", not \"Popover\": the panel's accessible name is read to USERS, and\n  // \"popover\" is a developer's word for it (reported by keksdose, 0.5.0). Only a\n  // bare Popover falls back to this — the kit's own pickers name their panels.\n  panel: \"Pop-up\",\n};\n\n/**\n * Exported, and extending the `<div>` attributes, so a consumer wrapping this — which is\n * what `DateField` and `FilterPopover` in this very package do — can hand anything\n * through to the PANEL: a `data-tour` anchor for the kit's own guided tour, a test id,\n * an `aria-describedby`, or an `aria-label` naming this particular popover.\n *\n * `children` is omitted from those attributes rather than inherited: here it is a render\n * prop taking the panel's `close`, not a `ReactNode`, so the two cannot be reconciled.\n */\nexport interface PopoverProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> {\n  trigger: (state: { open: boolean; toggle: () => void; ref: RefObject<HTMLButtonElement | null> }) => ReactNode;\n  children: (close: () => void) => ReactNode;\n  /**\n   * The panel's width: `\"18rem\"` (the default) grows with the text size — the panel\n   * holds text, and a 288 px calendar at 150 % cut its own month off (0.32,\n   * docs/text-size-harmonization.md §3.2). A plain number is px, fixed, as before.\n   * Either way the panel is never wider than the viewport less 8 px a side: 18rem is\n   * 432 px at Extra large, more than a 360 px phone has.\n   */\n  width?: number | RemLength;\n  labels?: Partial<PopoverLabels>;\n  /** Id for the panel, so a trigger wearing `role=\"combobox\"` can `aria-controls` it.\n   *  Required by ARIA on that role, and the panel is rendered here rather than by the\n   *  caller, so the id has to come in from outside. */\n  panelId?: string;\n  /** Extra classes for the PANEL. The trigger is the caller's own element. */\n  className?: string;\n}\n\n/** 288 px at Normal, in rem so it follows the text size (§3.2). */\nconst POPOVER_WIDTH: RemLength = \"18rem\";\n\n/** The gap the panel keeps from either edge of the viewport, in px. */\nconst EDGE = 8;\n\n/**\n * Portal-rendered popover anchored under its trigger button. The panel is fixed\n * to the viewport (so table/overflow ancestors can't clip it) and re-aligns on\n * scroll/resize; it closes on outside-click and Escape.\n *\n * ## Trapped, not merely focused — and why, because it is the closer call\n *\n * The audit's finding was that this panel *\"portals out of the tab order with no role\n * and no focus move\"*: Tab from the trigger went straight past the panel into the page\n * behind it, so the calendar, the calculator keypad and every column filter in the kit\n * were mouse-only. Two shapes fix that, and a popover is not automatically a dialog, so\n * this was chosen rather than inherited:\n *\n *  - **The light one** — move focus in on open, hand it back on close, and let Tab walk\n *    OUT of the panel into whatever follows the trigger. That is the right shape for a\n *    non-modal popover sitting inline in the document.\n *  - **The trap** — Tab cycles inside the panel; Escape and a click outside are the\n *    ways out. What is here.\n *\n * The deciding fact is the portal. This panel is rendered to the END of `<body>`, not\n * beside its trigger, so \"let Tab walk out\" does not mean \"carry on from the trigger\" —\n * it means land at the end of the document, several hundred controls from where the\n * user was. Tabbing out of it would be a worse place to arrive than the one the finding\n * complains about, and fixing that properly needs a sentinel-and-return dance that\n * nothing in this package has. The trap gets the user back to the trigger every time,\n * because `useFocusTrap` restores focus on close.\n *\n * And the panels this kit actually opens are self-contained: pick a date, tap out a\n * sum, narrow a column. Each of them commits and closes, and each already has two\n * documented ways out wired above — Escape and an outside press — so containment costs\n * a keyboard user nothing they had.\n *\n * **It stays non-modal in every other respect**, deliberately: no backdrop, no body\n * scroll lock, and no `aria-modal`, so the page behind is still readable by a screen\n * reader, still scrollable, and still clickable — clicking it is what dismisses this.\n * Only Tab is contained. A popover that took the page away as well would be a\n * {@link Modal}, and there is one of those.\n */\nexport function Popover({\n  trigger,\n  children,\n  width = POPOVER_WIDTH,\n  labels,\n  panelId,\n  className,\n  style,\n  \"aria-label\": ariaLabel,\n  ...rest\n}: PopoverProps) {\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const panelRef = useRef<HTMLDivElement>(null);\n  const [open, setOpen] = useState(false);\n  // The trigger's reading direction, read when it is pressed. The panel is portalled to\n  // <body>, out of any `dir=\"rtl\"` subtree the trigger sits in, so without carrying it\n  // across a right-to-left calendar or filter rendered left-to-right.\n  const [dir, setDir] = useState<Direction>(\"ltr\");\n  const close = () => setOpen(false);\n  const toggle = () => {\n    setDir(dirOf(triggerRef.current));\n    setOpen((v) => !v);\n  };\n  // prop > `<UiKitProvider labels={{ popover }}>` > English. The provider's\n  // `popover.panel` is only the last-resort name for a panel no caller named.\n  const text = useKitLabels(\"popover\", DEFAULT_POPOVER_LABELS, labels);\n\n  // Align the panel's END edge to the trigger's — right in LTR, left in RTL; it was\n  // always `rect.right`, so an RTL panel hung off the wrong side — and clamp it\n  // horizontally; the\n  // hook owns the vertical half — below by default, flipped above (and height-capped)\n  // when that is where the room is, e.g. once a mobile keyboard has eaten the bottom\n  // of the screen (feedback #135). It re-measures on scroll/resize.\n  const placement = useAnchoredPanel(triggerRef, open);\n  const rect = placement.rect;\n  // In px for the arithmetic below, at the text size in force; capped at the viewport.\n  const remPx = useRemPx();\n  const panelWidth = rect\n    ? Math.min(lengthPx(width, remPx), Math.max(0, window.innerWidth - 2 * EDGE))\n    : 0;\n  const pos = rect\n    ? {\n        top: placement.top,\n        left: Math.min(\n          Math.max(EDGE, dir === \"rtl\" ? rect.left : rect.right - panelWidth),\n          window.innerWidth - panelWidth - EDGE,\n        ),\n      }\n    : null;\n\n  useOutsideClick([triggerRef, panelRef], close, open);\n  useEscapeKey(close, open);\n\n  useFocusTrap(panelRef, {\n    active: open && pos !== null,\n    // The panel keeps a focus one of its own children has already taken. `FilterPopover`\n    // autofocuses its text box on mount — that is what the press on \"Filter\" was FOR,\n    // and it is a prop there precisely so the popover keeps it — and a trap that\n    // unconditionally focused the container would take it straight back off again,\n    // one effect later and invisibly.\n    initialFocus: () => {\n      const panel = panelRef.current;\n      const active = document.activeElement;\n      return panel?.contains(active) ? (active as HTMLElement) : panel;\n    },\n  });\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    if (e.key !== \"Escape\") return;\n    // `useEscapeKey` above listens on the document and still covers the case where\n    // focus somehow is not in here. This handler is for the case that focus IS, which\n    // is now the normal one — and it exists to STOP the key, because a popover opened\n    // from inside a `Modal` (the calculator on an amount field is exactly that) would\n    // otherwise have its Escape travel on up the React tree and close the dialog\n    // underneath as well. Closing twice is harmless — `close` is a state setter, not a\n    // caller's callback — so the two paths cannot double-fire anything.\n    e.stopPropagation();\n    close();\n  };\n\n  return (\n    <>\n      {trigger({ open, toggle, ref: triggerRef })}\n      {open && pos &&\n        createPortal(\n          /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- the\n             dialog container, per the APG dialog pattern: `onKeyDown` is Escape-to-close for\n             whatever inside it holds focus. */\n          <div\n            // `...rest` first: the role, the id the trigger's `aria-controls` points at,\n            // the `tabIndex` the trap needs and the measured position are what make this\n            // a popover, and a caller reaching for a `data-tour` anchor must not be able\n            // to remove one of them by accident.\n            {...rest}\n            ref={panelRef}\n            role=\"dialog\"\n            id={panelId}\n            // The caller's own `aria-label` wins over {@link PopoverLabels.panel}, which\n            // is the package's English fallback for an unnamed panel. Both name the same\n            // element; the DOM spelling is the one being standardised on, so where both\n            // are present it is the one that survives.\n            aria-label={ariaLabel ?? text.panel}\n            dir={rest.dir ?? dir}\n            // Without it the panel cannot take focus at all, and the trap above would\n            // silently do nothing on a panel whose children are not yet tabbable.\n            tabIndex={-1}\n            onKeyDown={handleKeyDown}\n            style={{\n              // Merged over the caller's, never replaced by it: these four are measured\n              // against the trigger every scroll and resize, and a panel that dropped\n              // them would paint at the top-left of the viewport.\n              ...style,\n              position: \"fixed\",\n              top: pos.top,\n              left: pos.left,\n              width: panelWidth,\n              maxHeight: placement.maxHeight,\n            }}\n            className={cn(\n              \"z-50 overflow-y-auto rounded-md border border-[var(--border)] bg-[var(--bg-surface)] p-3 shadow-lg outline-none\",\n              className,\n            )}\n          >\n            {children(close)}\n          </div>,\n          document.body,\n        )}\n    </>\n  );\n}\n"],"mappings":";AAwLI,mBAOM,KAPN;AAxLJ,SAAS,QAAQ,gBAAgB;AAEjC,SAAS,oBAAoB;AAC7B,SAAS,wBAAwB;AACjC,SAAS,cAAc,uBAAuB;AAC9C,SAAS,oBAAoB;AAC7B,SAAS,UAAU,gBAAgC;AACnD,SAAS,UAAU;AACnB,SAAS,aAAa;AAEtB,SAAS,oBAAoB;AAatB,MAAM,yBAAwC;AAAA;AAAA;AAAA;AAAA,EAInD,OAAO;AACT;AAgCA,MAAM,gBAA2B;AAGjC,MAAM,OAAO;AAwCN,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,GAAG;AACL,GAAiB;AACf,QAAM,aAAa,OAA0B,IAAI;AACjD,QAAM,WAAW,OAAuB,IAAI;AAC5C,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AAItC,QAAM,CAAC,KAAK,MAAM,IAAI,SAAoB,KAAK;AAC/C,QAAM,QAAQ,MAAM,QAAQ,KAAK;AACjC,QAAM,SAAS,MAAM;AACnB,WAAO,MAAM,WAAW,OAAO,CAAC;AAChC,YAAQ,CAAC,MAAM,CAAC,CAAC;AAAA,EACnB;AAGA,QAAM,OAAO,aAAa,WAAW,wBAAwB,MAAM;AAQnE,QAAM,YAAY,iBAAiB,YAAY,IAAI;AACnD,QAAM,OAAO,UAAU;AAEvB,QAAM,QAAQ,SAAS;AACvB,QAAM,aAAa,OACf,KAAK,IAAI,SAAS,OAAO,KAAK,GAAG,KAAK,IAAI,GAAG,OAAO,aAAa,IAAI,IAAI,CAAC,IAC1E;AACJ,QAAM,MAAM,OACR;AAAA,IACE,KAAK,UAAU;AAAA,IACf,MAAM,KAAK;AAAA,MACT,KAAK,IAAI,MAAM,QAAQ,QAAQ,KAAK,OAAO,KAAK,QAAQ,UAAU;AAAA,MAClE,OAAO,aAAa,aAAa;AAAA,IACnC;AAAA,EACF,IACA;AAEJ,kBAAgB,CAAC,YAAY,QAAQ,GAAG,OAAO,IAAI;AACnD,eAAa,OAAO,IAAI;AAExB,eAAa,UAAU;AAAA,IACrB,QAAQ,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMxB,cAAc,MAAM;AAClB,YAAM,QAAQ,SAAS;AACvB,YAAM,SAAS,SAAS;AACxB,aAAO,OAAO,SAAS,MAAM,IAAK,SAAyB;AAAA,IAC7D;AAAA,EACF,CAAC;AAED,QAAM,gBAAgB,CAAC,MAAqC;AAC1D,QAAI,EAAE,QAAQ,SAAU;AAQxB,MAAE,gBAAgB;AAClB,UAAM;AAAA,EACR;AAEA,SACE,iCACG;AAAA,YAAQ,EAAE,MAAM,QAAQ,KAAK,WAAW,CAAC;AAAA,IACzC,QAAQ,OACP;AAAA;AAAA;AAAA;AAAA,MAIE;AAAA,QAAC;AAAA;AAAA,UAKE,GAAG;AAAA,UACJ,KAAK;AAAA,UACL,MAAK;AAAA,UACL,IAAI;AAAA,UAKJ,cAAY,aAAa,KAAK;AAAA,UAC9B,KAAK,KAAK,OAAO;AAAA,UAGjB,UAAU;AAAA,UACV,WAAW;AAAA,UACX,OAAO;AAAA;AAAA;AAAA;AAAA,YAIL,GAAG;AAAA,YACH,UAAU;AAAA,YACV,KAAK,IAAI;AAAA,YACT,MAAM,IAAI;AAAA,YACV,OAAO;AAAA,YACP,WAAW,UAAU;AAAA,UACvB;AAAA,UACA,WAAW;AAAA,YACT;AAAA,YACA;AAAA,UACF;AAAA,UAEC,mBAAS,KAAK;AAAA;AAAA,MACjB;AAAA,MACA,SAAS;AAAA,IACX;AAAA,KACJ;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/popover.tsx"],"sourcesContent":["import { useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, KeyboardEvent, ReactNode, RefObject } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { useAnchoredPanel } from \"../hooks/use-anchored-panel\";\nimport { useEscapeKey, useOutsideClick } from \"../hooks/use-dismiss\";\nimport { useFocusTrap } from \"../hooks/use-focus-trap\";\nimport { lengthPx, useRemPx, type RemLength } from \"../hooks/use-breakpoint\";\nimport { cn } from \"../lib/cn\";\nimport { dirOf } from \"../lib/direction\";\nimport type { Direction } from \"../lib/direction\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\n\n/** The panel's accessible name. A `role=\"dialog\"` with no name announces as \"dialog\"\n *  and nothing else, which is worse than the unlabelled div it replaced — so it is a\n *  prop with an English default, like every other string this package renders. Callers\n *  should pass the control's own name (\"Filter\", \"Choose a date\"); the default is only\n *  there so an unmigrated call site is still named. */\nexport interface PopoverLabels {\n  panel: string;\n}\n\n// Exported since the kit grew one label tree (`UiKitLabels`, src/i18n): the complete\n// English reference a translator works from has to be able to name every namespace.\nexport const DEFAULT_POPOVER_LABELS: PopoverLabels = {\n  // \"Pop-up\", not \"Popover\": the panel's accessible name is read to USERS, and\n  // \"popover\" is a developer's word for it (reported by keksdose, 0.5.0). Only a\n  // bare Popover falls back to this — the kit's own pickers name their panels.\n  panel: \"Pop-up\",\n};\n\n/**\n * Exported, and extending the `<div>` attributes, so a consumer wrapping this — which is\n * what `DateField` and `FilterPopover` in this very package do — can hand anything\n * through to the PANEL: a `data-tour` anchor for the kit's own guided tour, a test id,\n * an `aria-describedby`, or an `aria-label` naming this particular popover.\n *\n * `children` is omitted from those attributes rather than inherited: here it is a render\n * prop taking the panel's `close`, not a `ReactNode`, so the two cannot be reconciled.\n */\nexport interface PopoverProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> {\n  trigger: (state: { open: boolean; toggle: () => void; ref: RefObject<HTMLButtonElement | null> }) => ReactNode;\n  children: (close: () => void) => ReactNode;\n  /**\n   * The panel's width: `\"18rem\"` (the default) grows with the text size — the panel\n   * holds text, and a 288 px calendar at 150 % cut its own month off (0.32,\n   * docs/text-size-harmonization.md §3.2). A plain number is px, fixed, as before.\n   * Either way the panel is never wider than the viewport less 8 px a side: 18rem is\n   * 432 px at Extra large, more than a 360 px phone has.\n   */\n  width?: number | RemLength;\n  labels?: Partial<PopoverLabels>;\n  /** Id for the panel, so a trigger wearing `role=\"combobox\"` can `aria-controls` it.\n   *  Required by ARIA on that role, and the panel is rendered here rather than by the\n   *  caller, so the id has to come in from outside. */\n  panelId?: string;\n  /** Extra classes for the PANEL. The trigger is the caller's own element. */\n  className?: string;\n}\n\n/** 288 px at Normal, in rem so it follows the text size (§3.2). */\nconst POPOVER_WIDTH: RemLength = \"18rem\";\n\n/** The gap the panel keeps from either edge of the viewport, in px. */\nconst EDGE = 8;\n\n/**\n * Portal-rendered popover anchored under its trigger button. The panel is fixed\n * to the viewport (so table/overflow ancestors can't clip it) and re-aligns on\n * scroll/resize; it closes on outside-click and Escape.\n *\n * ## Trapped, not merely focused — and why, because it is the closer call\n *\n * The audit's finding was that this panel *\"portals out of the tab order with no role\n * and no focus move\"*: Tab from the trigger went straight past the panel into the page\n * behind it, so the calendar, the calculator keypad and every column filter in the kit\n * were mouse-only. Two shapes fix that, and a popover is not automatically a dialog, so\n * this was chosen rather than inherited:\n *\n *  - **The light one** — move focus in on open, hand it back on close, and let Tab walk\n *    OUT of the panel into whatever follows the trigger. That is the right shape for a\n *    non-modal popover sitting inline in the document.\n *  - **The trap** — Tab cycles inside the panel; Escape and a click outside are the\n *    ways out. What is here.\n *\n * The deciding fact is the portal. This panel is rendered to the END of `<body>`, not\n * beside its trigger, so \"let Tab walk out\" does not mean \"carry on from the trigger\" —\n * it means land at the end of the document, several hundred controls from where the\n * user was. Tabbing out of it would be a worse place to arrive than the one the finding\n * complains about, and fixing that properly needs a sentinel-and-return dance that\n * nothing in this package has. The trap gets the user back to the trigger every time,\n * because `useFocusTrap` restores focus on close.\n *\n * And the panels this kit actually opens are self-contained: pick a date, tap out a\n * sum, narrow a column. Each of them commits and closes, and each already has two\n * documented ways out wired above — Escape and an outside press — so containment costs\n * a keyboard user nothing they had.\n *\n * **It stays non-modal in every other respect**, deliberately: no backdrop, no body\n * scroll lock, and no `aria-modal`, so the page behind is still readable by a screen\n * reader, still scrollable, and still clickable — clicking it is what dismisses this.\n * Only Tab is contained. A popover that took the page away as well would be a\n * {@link Modal}, and there is one of those.\n */\nexport function Popover({\n  trigger,\n  children,\n  width = POPOVER_WIDTH,\n  labels,\n  panelId,\n  className,\n  style,\n  \"aria-label\": ariaLabel,\n  onKeyDown: onKeyDownProp,\n  ...rest\n}: PopoverProps) {\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const panelRef = useRef<HTMLDivElement>(null);\n  const [open, setOpen] = useState(false);\n  // The trigger's reading direction, read when it is pressed. The panel is portalled to\n  // <body>, out of any `dir=\"rtl\"` subtree the trigger sits in, so without carrying it\n  // across a right-to-left calendar or filter rendered left-to-right.\n  const [dir, setDir] = useState<Direction>(\"ltr\");\n  const close = () => setOpen(false);\n  const toggle = () => {\n    setDir(dirOf(triggerRef.current));\n    setOpen((v) => !v);\n  };\n  // prop > `<UiKitProvider labels={{ popover }}>` > English. The provider's\n  // `popover.panel` is only the last-resort name for a panel no caller named.\n  const text = useKitLabels(\"popover\", DEFAULT_POPOVER_LABELS, labels);\n\n  // Align the panel's END edge to the trigger's — right in LTR, left in RTL; it was\n  // always `rect.right`, so an RTL panel hung off the wrong side — and clamp it\n  // horizontally; the\n  // hook owns the vertical half — below by default, flipped above (and height-capped)\n  // when that is where the room is, e.g. once a mobile keyboard has eaten the bottom\n  // of the screen (feedback #135). It re-measures on scroll/resize.\n  const placement = useAnchoredPanel(triggerRef, open);\n  const rect = placement.rect;\n  // In px for the arithmetic below, at the text size in force; capped at the viewport.\n  const remPx = useRemPx();\n  const panelWidth = rect\n    ? Math.min(lengthPx(width, remPx), Math.max(0, window.innerWidth - 2 * EDGE))\n    : 0;\n  const pos = rect\n    ? {\n        top: placement.top,\n        left: Math.min(\n          Math.max(EDGE, dir === \"rtl\" ? rect.left : rect.right - panelWidth),\n          window.innerWidth - panelWidth - EDGE,\n        ),\n      }\n    : null;\n\n  useOutsideClick([triggerRef, panelRef], close, open);\n  useEscapeKey(close, open);\n\n  useFocusTrap(panelRef, {\n    active: open && pos !== null,\n    // The panel keeps a focus one of its own children has already taken. `FilterPopover`\n    // autofocuses its text box on mount — that is what the press on \"Filter\" was FOR,\n    // and it is a prop there precisely so the popover keeps it — and a trap that\n    // unconditionally focused the container would take it straight back off again,\n    // one effect later and invisibly.\n    initialFocus: () => {\n      const panel = panelRef.current;\n      const active = document.activeElement;\n      return panel?.contains(active) ? (active as HTMLElement) : panel;\n    },\n  });\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    // A caller's own handler first (0.32.2: RowActions stops Enter / Space at the panel);\n    // it used to be dropped, overwritten by this one.\n    onKeyDownProp?.(e);\n    if (e.key !== \"Escape\") return;\n    // `useEscapeKey` above listens on the document and still covers the case where\n    // focus somehow is not in here. This handler is for the case that focus IS, which\n    // is now the normal one — and it exists to STOP the key, because a popover opened\n    // from inside a `Modal` (the calculator on an amount field is exactly that) would\n    // otherwise have its Escape travel on up the React tree and close the dialog\n    // underneath as well. Closing twice is harmless — `close` is a state setter, not a\n    // caller's callback — so the two paths cannot double-fire anything.\n    e.stopPropagation();\n    close();\n  };\n\n  return (\n    <>\n      {trigger({ open, toggle, ref: triggerRef })}\n      {open && pos &&\n        createPortal(\n          /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- the\n             dialog container, per the APG dialog pattern: `onKeyDown` is Escape-to-close for\n             whatever inside it holds focus. */\n          <div\n            // `...rest` first: the role, the id the trigger's `aria-controls` points at,\n            // the `tabIndex` the trap needs and the measured position are what make this\n            // a popover, and a caller reaching for a `data-tour` anchor must not be able\n            // to remove one of them by accident.\n            {...rest}\n            ref={panelRef}\n            role=\"dialog\"\n            id={panelId}\n            // The caller's own `aria-label` wins over {@link PopoverLabels.panel}, which\n            // is the package's English fallback for an unnamed panel. Both name the same\n            // element; the DOM spelling is the one being standardised on, so where both\n            // are present it is the one that survives.\n            aria-label={ariaLabel ?? text.panel}\n            dir={rest.dir ?? dir}\n            // Without it the panel cannot take focus at all, and the trap above would\n            // silently do nothing on a panel whose children are not yet tabbable.\n            tabIndex={-1}\n            onKeyDown={handleKeyDown}\n            style={{\n              // Merged over the caller's, never replaced by it: these four are measured\n              // against the trigger every scroll and resize, and a panel that dropped\n              // them would paint at the top-left of the viewport.\n              ...style,\n              position: \"fixed\",\n              top: pos.top,\n              left: pos.left,\n              width: panelWidth,\n              maxHeight: placement.maxHeight,\n            }}\n            className={cn(\n              \"z-50 overflow-y-auto rounded-md border border-[var(--border)] bg-[var(--bg-surface)] p-3 shadow-lg outline-none\",\n              className,\n            )}\n          >\n            {children(close)}\n          </div>,\n          document.body,\n        )}\n    </>\n  );\n}\n"],"mappings":";AA4LI,mBAOM,KAPN;AA5LJ,SAAS,QAAQ,gBAAgB;AAEjC,SAAS,oBAAoB;AAC7B,SAAS,wBAAwB;AACjC,SAAS,cAAc,uBAAuB;AAC9C,SAAS,oBAAoB;AAC7B,SAAS,UAAU,gBAAgC;AACnD,SAAS,UAAU;AACnB,SAAS,aAAa;AAEtB,SAAS,oBAAoB;AAatB,MAAM,yBAAwC;AAAA;AAAA;AAAA;AAAA,EAInD,OAAO;AACT;AAgCA,MAAM,gBAA2B;AAGjC,MAAM,OAAO;AAwCN,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,WAAW;AAAA,EACX,GAAG;AACL,GAAiB;AACf,QAAM,aAAa,OAA0B,IAAI;AACjD,QAAM,WAAW,OAAuB,IAAI;AAC5C,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AAItC,QAAM,CAAC,KAAK,MAAM,IAAI,SAAoB,KAAK;AAC/C,QAAM,QAAQ,MAAM,QAAQ,KAAK;AACjC,QAAM,SAAS,MAAM;AACnB,WAAO,MAAM,WAAW,OAAO,CAAC;AAChC,YAAQ,CAAC,MAAM,CAAC,CAAC;AAAA,EACnB;AAGA,QAAM,OAAO,aAAa,WAAW,wBAAwB,MAAM;AAQnE,QAAM,YAAY,iBAAiB,YAAY,IAAI;AACnD,QAAM,OAAO,UAAU;AAEvB,QAAM,QAAQ,SAAS;AACvB,QAAM,aAAa,OACf,KAAK,IAAI,SAAS,OAAO,KAAK,GAAG,KAAK,IAAI,GAAG,OAAO,aAAa,IAAI,IAAI,CAAC,IAC1E;AACJ,QAAM,MAAM,OACR;AAAA,IACE,KAAK,UAAU;AAAA,IACf,MAAM,KAAK;AAAA,MACT,KAAK,IAAI,MAAM,QAAQ,QAAQ,KAAK,OAAO,KAAK,QAAQ,UAAU;AAAA,MAClE,OAAO,aAAa,aAAa;AAAA,IACnC;AAAA,EACF,IACA;AAEJ,kBAAgB,CAAC,YAAY,QAAQ,GAAG,OAAO,IAAI;AACnD,eAAa,OAAO,IAAI;AAExB,eAAa,UAAU;AAAA,IACrB,QAAQ,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMxB,cAAc,MAAM;AAClB,YAAM,QAAQ,SAAS;AACvB,YAAM,SAAS,SAAS;AACxB,aAAO,OAAO,SAAS,MAAM,IAAK,SAAyB;AAAA,IAC7D;AAAA,EACF,CAAC;AAED,QAAM,gBAAgB,CAAC,MAAqC;AAG1D,oBAAgB,CAAC;AACjB,QAAI,EAAE,QAAQ,SAAU;AAQxB,MAAE,gBAAgB;AAClB,UAAM;AAAA,EACR;AAEA,SACE,iCACG;AAAA,YAAQ,EAAE,MAAM,QAAQ,KAAK,WAAW,CAAC;AAAA,IACzC,QAAQ,OACP;AAAA;AAAA;AAAA;AAAA,MAIE;AAAA,QAAC;AAAA;AAAA,UAKE,GAAG;AAAA,UACJ,KAAK;AAAA,UACL,MAAK;AAAA,UACL,IAAI;AAAA,UAKJ,cAAY,aAAa,KAAK;AAAA,UAC9B,KAAK,KAAK,OAAO;AAAA,UAGjB,UAAU;AAAA,UACV,WAAW;AAAA,UACX,OAAO;AAAA;AAAA;AAAA;AAAA,YAIL,GAAG;AAAA,YACH,UAAU;AAAA,YACV,KAAK,IAAI;AAAA,YACT,MAAM,IAAI;AAAA,YACV,OAAO;AAAA,YACP,WAAW,UAAU;AAAA,UACvB;AAAA,UACA,WAAW;AAAA,YACT;AAAA,YACA;AAAA,UACF;AAAA,UAEC,mBAAS,KAAK;AAAA;AAAA,MACjB;AAAA,MACA,SAAS;AAAA,IACX;AAAA,KACJ;AAEJ;","names":[]}

package/dist/components/row-actions.d.ts

@@ -1,6 +1,6 @@
 import 'react';
 import 'lucide-react';
-export { cO as DEFAULT_ROW_ACTIONS_LABELS, eO as RowAction, eP as RowActionList, eQ as RowActions, eR as RowActionsCollapse, eS as RowActionsColumnOptions, eT as RowActionsLabels, eU as RowActionsProps, eV as RowActionsSize, fY as rowActionsColumn } from '../delete-account-setting-FLyJf-kZ.js';
+export { cO as DEFAULT_ROW_ACTIONS_LABELS, eO as RowAction, eP as RowActionList, eQ as RowActions, eR as RowActionsCollapse, eS as RowActionsColumnOptions, eT as RowActionsLabels, eU as RowActionsProps, eV as RowActionsSize, fY as rowActionsColumn } from '../delete-account-setting-Dy4kJgUm.js';
 import '../data-table-labels-kpAAVi6g.js';
 import './tooltip.js';
 import '../hooks/use-anchored-rect.js';

package/dist/components/row-actions.js

@@ -63,15 +63,9 @@ function RowActions({
           children: /* @__PURE__ */ jsx(MoreHorizontal, {})
         }
       ),
-      children: (close) => (
-        // React carries an event out of a portal along the COMPONENT tree, so a click on
-        // an entry (or between two) reached a clickable row or a DataTable `onRowClick`
-        // the menu was opened from, though the panel is nowhere near it in the page —
-        // only the "⋯" trigger stopped its own (0.32.1, keksdose's 0.32 report). Stopped
-        // here for the whole panel: clicks, and the Enter / Space a row also listens for.
-        // Escape goes on, to the popover that closes on it.
-        /* @__PURE__ */ jsx("div", { role: "presentation", onClick: stopClick, onKeyDown: stopActivationKeys, children: /* @__PURE__ */ jsx("ul", { "data-slot": "row-actions-menu", className: "space-y-0.5", children: entries.map((action) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(MenuAction, { action, close }) }, action.key ?? action.label)) }) })
-      )
+      onClick: stopClick,
+      onKeyDown: stopActivationKeys,
+      children: (close) => /* @__PURE__ */ jsx("ul", { "data-slot": "row-actions-menu", className: "space-y-0.5", children: entries.map((action) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(MenuAction, { action, close }) }, action.key ?? action.label)) })
     }
   );
 }