@eifi1/ui-kit 0.10.0 → 0.11.0

package/README.md

@@ -377,24 +377,24 @@ columns, strings and permissions (see the note at the top of `src/feedback/feedb
 
 <!-- BEGIN GENERATED: exports — node scripts/gen-export-inventory.mjs -->
 
-**788 names from 130 modules** — 393 values and 395 types. _Italic_ is a type-only export.
+**824 names from 134 modules** — 404 values and 420 types. _Italic_ is a type-only export.
 
 Generated from `dist/index.d.ts` by `node scripts/gen-export-inventory.mjs`; the count
 is pinned by `src/__tests__/public-surface.test.ts`. Do not edit between the markers.
 
 | Entry point | Names |
 |---|---|
-| `@eifi1/ui-kit` | 788 |
+| `@eifi1/ui-kit` | 824 |
 | `@eifi1/ui-kit/chart` | 93 |
-| `@eifi1/ui-kit/shell` | 18 |
+| `@eifi1/ui-kit/shell` | 19 |
 | `@eifi1/ui-kit/data-table` | 32 |
-| `@eifi1/ui-kit/wizard` | 21 |
+| `@eifi1/ui-kit/wizard` | 22 |
 | `@eifi1/ui-kit/tour` | 7 |
 | `@eifi1/ui-kit/feedback` | 29 |
 | `@eifi1/ui-kit/search` | 22 |
-| `@eifi1/ui-kit/dates` | 20 |
+| `@eifi1/ui-kit/dates` | 22 |
 | `@eifi1/ui-kit/table-text` | 8 |
-| `@eifi1/ui-kit/rhf` | 13 |
+| `@eifi1/ui-kit/rhf` | 15 |
 
 Everything below is reachable from the main `@eifi1/ui-kit` barrel. The subpaths are a
 re-slicing of it, never a second API.
@@ -406,6 +406,7 @@ re-slicing of it, never a second API.
 | `lib/calc` | `commitExpression`, `evaluateExpression`, `formatResult`, `isBareAmount`, `looksLikeExpression`, `sanitizeLive`, `splitLeadingSign` |
 | `lib/cn` | `cn` |
 | `lib/logger` | `logger`, `setStoreLog` |
+| `lib/clipping` | `CLIPS_ATTRIBUTE` |
 
 ### hooks
 
@@ -442,6 +443,7 @@ re-slicing of it, never a second API.
 | Module | Exports |
 |---|---|
 | `components/ui` | `Button`, `buttonClasses`, `Card`, `CardAction`, `CardContent`, `CardDescription`, `CardFooter`, `CardHeader`, `CardTitle`, `DEFAULT_PASSWORD_REVEAL_LABELS`, `DEFAULT_TABS_LABELS`, `EmptyState`, `FIELD_BASE`, `FIELD_DISPLAY`, `FIELD_FLOATING_PAD`, `FIELD_INVALID`, `FIELD_TRIGGER`, `FIELD_WRITABLE_LOOK`, `FieldChevron`, `FieldHint`, `FieldLabel`, `FLOATING_INPUT_CLASS`, `FLOATING_LABEL_CLASS`, `FLOATING_LABEL_STATIC`, `FloatingField`, `IconButton`, `Input`, `Label`, `PHONE_QUERY`, `resolvePasswordRevealLabels`, `Select`, `Spinner`, `Tabs`, `Textarea`, _`ButtonClassesOptions`_, _`ButtonProps`_, _`ButtonSize`_, _`ButtonTone`_, _`ButtonVariant`_, _`CardActionProps`_, _`CardContentProps`_, _`CardDescriptionProps`_, _`CardFooterProps`_, _`CardHeaderProps`_, _`CardProps`_, _`CardTitleProps`_, _`EmptyStateProps`_, _`FieldChevronProps`_, _`FieldHintProps`_, _`FieldLabelProps`_, _`FloatingFieldProps`_, _`IconButtonProps`_, _`IconButtonSize`_, _`IconButtonTone`_, _`InputProps`_, _`LabelProps`_, _`PasswordRevealLabels`_, _`SelectProps`_, _`SpinnerProps`_, _`TabItem`_, _`TabsLabels`_, _`TabsProps`_, _`TextareaProps`_ |
+| `components/field` | `Field`, _`FieldControlProps`_, _`FieldProps`_ |
 | `components/search-field` | `SearchField`, _`SearchFieldProps`_ |
 | `components/dropdown` | `DropdownPanel`, `DropdownSearchHeader`, `useDropdown`, `useDropdownSearch`, _`DropdownPanelProps`_, _`DropdownSearchHeaderProps`_ |
 | `components/popover` | `DEFAULT_POPOVER_LABELS`, `Popover`, _`PopoverLabels`_, _`PopoverProps`_ |
@@ -457,7 +459,7 @@ re-slicing of it, never a second API.
 | `components/multi-entity-combobox` | `MultiEntityCombobox`, _`MultiEntityComboboxProps`_ |
 | `components/multi-select` | `MultiSelect`, _`MultiSelectOption`_, _`MultiSelectProps`_ |
 | `components/tooltip` | `placeTooltip`, `Tooltip`, _`TooltipPlacement`_, _`TooltipProps`_, _`TooltipSide`_, _`TooltipSize`_, _`TooltipViewport`_ |
-| `components/user-avatar` | `avatarInitials`, `UserAvatar`, _`UserAvatarProps`_ |
+| `components/user-avatar` | `avatarInitials`, `UserAvatar`, _`UserAvatarBadge`_, _`UserAvatarProps`_ |
 | `components/settings-fields` | `LanguageSetting`, `ThemeSetting`, _`LanguageSettingProps`_, _`ThemeSettingProps`_ |
 | `components/field-sync` | `DEFAULT_FIELD_SYNC_LABELS`, `FIELD_SYNC_FRAME`, `FIELD_SYNC_SAVED_MS`, `FieldSyncIndicator`, `FieldSyncRow`, `resolveFieldSyncLabels`, `useFieldSync`, _`FieldSyncIndicatorProps`_, _`FieldSyncLabels`_, _`FieldSyncRowProps`_, _`FieldSyncState`_, _`UseFieldSyncOptions`_, _`UseFieldSyncReturn`_ |
 | `components/month-picker` | `DEFAULT_MONTH_PICKER_LABELS`, `MonthPicker`, _`MonthPickerLabels`_, _`MonthPickerProps`_ |
@@ -475,11 +477,11 @@ re-slicing of it, never a second API.
 | `components/dialog-frame` | `DEFAULT_DIALOG_FRAME_LABELS`, `DialogFrame`, _`DialogFrameLabels`_, _`DialogFrameProps`_ |
 | `components/danger-confirm` | `DangerConfirm`, `DEFAULT_DANGER_CONFIRM_LABELS`, _`DangerConfirmLabels`_, _`DangerConfirmProps`_ |
 | `components/confirm-dialog` | `ConfirmProvider`, `DEFAULT_CONFIRM_DIALOG_LABELS`, `useConfirm`, _`ConfirmDialogLabels`_, _`ConfirmFn`_, _`ConfirmOptions`_, _`ConfirmProviderProps`_, _`ConfirmTone`_ |
-| `components/floating-panel` | `DEFAULT_FLOATING_PANEL_LABELS`, `FloatingActionButton`, `FloatingPanel`, _`FloatingActionButtonProps`_, _`FloatingCorner`_, _`FloatingPanelLabels`_, _`FloatingPanelProps`_ |
-| `components/bulk-action-bar` | `BulkActionBar`, `DEFAULT_BULK_ACTION_BAR_LABELS`, _`BulkActionBarLabels`_, _`BulkActionBarProps`_, _`BulkActionBarVariant`_ |
+| `components/floating-panel` | `DEFAULT_FLOATING_PANEL_LABELS`, `FloatingAction`, `FloatingActionButton`, `FloatingActionGroup`, `FloatingPanel`, _`FloatingActionButtonProps`_, _`FloatingActionGroupProps`_, _`FloatingActionLinkProps`_, _`FloatingActionProps`_, _`FloatingCorner`_, _`FloatingPanelLabels`_, _`FloatingPanelProps`_ |
+| `components/bulk-action-bar` | `BulkActionBar`, `DEFAULT_BULK_ACTION_BAR_LABELS`, _`BulkActionBarLabels`_, _`BulkActionBarProps`_, _`BulkActionBarVariant`_, _`ResponsiveBulkActionBarVariant`_ |
 | `components/swatch-picker` | `DEFAULT_SWATCH_PICKER_LABELS`, `SwatchPicker`, _`SwatchOption`_, _`SwatchPickerLabels`_, _`SwatchPickerProps`_ |
 | `components/icon-picker` | `DEFAULT_ICON_PICKER_LABELS`, `IconPicker`, _`IconOption`_, _`IconPickerLabels`_, _`IconPickerProps`_ |
-| `components/choice-card` | `ChoiceCard`, `ChoiceCardGroup`, _`ChoiceCardGroupProps`_, _`ChoiceCardMultipleProps`_, _`ChoiceCardOption`_, _`ChoiceCardProps`_, _`ChoiceCardSingleProps`_, _`ChoiceCardType`_ |
+| `components/choice-card` | `ActionCard`, `ChoiceCard`, `ChoiceCardGroup`, _`ActionCardMetaTone`_, _`ActionCardProps`_, _`ChoiceCardGroupProps`_, _`ChoiceCardMultipleProps`_, _`ChoiceCardOption`_, _`ChoiceCardProps`_, _`ChoiceCardSingleProps`_, _`ChoiceCardType`_ |
 | `components/autocomplete` | `Autocomplete`, _`AutocompleteProps`_ |
 | `components/measured-grid` | `DEFAULT_MEASURED_GRID_LABELS`, `MeasuredGrid`, `useMeasuredRows`, _`MeasuredGridColumn`_, _`MeasuredGridLabels`_, _`MeasuredGridProps`_, _`MeasuredGridView`_, _`MeasuredRows`_, _`UseMeasuredRowsOptions`_ |
 | `components/file-button` | `DEFAULT_FILE_PICKER_LABELS`, `FileButton`, `matchesAccept`, `useFilePicker`, _`FileButtonProps`_, _`FilePickerLabels`_, _`FileRejection`_, _`FileRejectionReason`_, _`FileScreenOptions`_, _`UseFilePickerOptions`_, _`UseFilePickerReturn`_ |
@@ -492,6 +494,7 @@ re-slicing of it, never a second API.
 | `components/account-settings` | `PasswordSetting`, `ProfileSetting`, `TwoFactorSetting`, _`PasswordSettingLabels`_, _`ProfileSettingLabels`_, _`TwoFactorSettingLabels`_ |
 | `components/alert-banner` | `AlertBanner`, `alertFrameClass`, `toneFrameClass`, _`AlertBannerProps`_, _`AlertSize`_, _`AlertTone`_ |
 | `components/toggle-group` | `ToggleGroup`, _`ToggleGroupBaseProps`_, _`ToggleGroupClearableProps`_, _`ToggleGroupProps`_, _`ToggleGroupRequiredProps`_, _`ToggleOption`_ |
+| `components/nav-pills` | `NavPills`, _`NavPillItem`_, _`NavPillLinkProps`_, _`NavPillsCurrent`_, _`NavPillsProps`_ |
 | `components/chip` | `Chip`, `ChipInput`, `DEFAULT_CHIP_INPUT_LABELS`, `resolveChipInputLabels`, _`ChipHue`_, _`ChipInputLabels`_, _`ChipInputProps`_, _`ChipLinkProps`_, _`ChipProps`_, _`ChipShape`_, _`ChipSize`_, _`ChipTone`_, _`ChipVariant`_ |
 | `components/wizard-stepper` | `WizardStepper` |
 | `components/hover-menu` | `HoverMenu`, _`HoverMenuProps`_ |
@@ -499,16 +502,17 @@ re-slicing of it, never a second API.
 | `components/full-bleed-dialog` | `FullBleedDialog`, _`FullBleedDialogProps`_ |
 | `components/grouped-picker` | `GroupedPicker`, _`GroupedPickerProps`_, _`PickerGroup`_ |
 | `components/file-dropzone` | `FileDropzone`, _`FileDropzoneProps`_, _`FileDropzoneRejectionFeedback`_, _`FileDropzoneState`_ |
-| `components/mini-calendar` | `DEFAULT_MINI_CALENDAR_LABELS`, `MiniCalendar`, _`MiniCalendarLabels`_, _`MiniCalendarProps`_, _`WeekDay`_ |
+| `components/mini-calendar` | `DEFAULT_MINI_CALENDAR_LABELS`, `MiniCalendar`, _`MiniCalendarDayState`_, _`MiniCalendarLabels`_, _`MiniCalendarProps`_, _`WeekDay`_ |
+| `components/calendar-heatmap` | `CalendarHeatmap`, `DEFAULT_CALENDAR_HEATMAP_LABELS`, `heatmapLevel`, _`CalendarHeatmapDatum`_, _`CalendarHeatmapDay`_, _`CalendarHeatmapLabels`_, _`CalendarHeatmapProps`_ |
 | `components/date-picker` | `DatePicker`, `DateRangePicker`, _`DatePickerProps`_, _`DateRangeCommit`_, _`DateRangeDraftSummary`_, _`DateRangePickerPreset`_, _`DateRangePickerProps`_, _`DateRangeTriggerRenderProps`_, _`DateTriggerAttributes`_ |
 | `components/tree-view` | `TreeRow`, `TreeView`, _`TreeItemState`_, _`TreeNode`_, _`TreeRowProps`_, _`TreeViewProps`_ |
 | `components/chart` | `ChartContainer`, `ChartLegend`, `ChartLegendContent`, `ChartTooltip`, `ChartTooltipContent`, `useChart`, _`ChartConfig`_, _`ChartSeriesConfig`_ |
 | `components/description-list` | `DescriptionItem`, `DescriptionList`, _`DescriptionItemProps`_, _`DescriptionListColumns`_, _`DescriptionListDensity`_, _`DescriptionListLayout`_, _`DescriptionListProps`_ |
-| `components/progress-bar` | `ProgressBar`, _`ProgressBarProps`_, _`ProgressBarSize`_, _`ProgressBarTone`_ |
+| `components/progress-bar` | `ProgressBar`, _`ProgressBarProps`_, _`ProgressBarSegment`_, _`ProgressBarSize`_, _`ProgressBarTone`_ |
 | `components/skeleton` | `Skeleton`, _`SkeletonProps`_, _`SkeletonShape`_ |
 | `components/copy-button` | `CopyButton`, `DEFAULT_COPY_BUTTON_LABELS`, _`CopyButtonLabels`_, _`CopyButtonProps`_ |
-| `components/button-group` | `ButtonGroup`, _`ButtonGroupProps`_ |
-| `components/table` | `NUMERIC_CELL_CLASS`, `Table`, `TableBody`, `TableCaption`, `TableCell`, `TableEmpty`, `TableFoot`, `TableHead`, `TableHeaderCell`, `TableRow`, _`TableAlign`_, _`TableBodyProps`_, _`TableCaptionProps`_, _`TableCellProps`_, _`TableDensity`_, _`TableEmptyProps`_, _`TableFootProps`_, _`TableHeaderCellProps`_, _`TableHeadProps`_, _`TableLayout`_, _`TableProps`_, _`TableRowProps`_ |
+| `components/button-group` | `ButtonGroup`, `ButtonGroupLink`, _`ButtonGroupLinkProps`_, _`ButtonGroupLinkRenderProps`_, _`ButtonGroupProps`_ |
+| `components/table` | `NUMERIC_CELL_CLASS`, `Table`, `TableBody`, `TableCaption`, `TableCell`, `TableEmpty`, `TableFoot`, `TableHead`, `TableHeaderCell`, `TableRow`, _`TableAlign`_, _`TableBodyProps`_, _`TableCaptionProps`_, _`TableCellProps`_, _`TableDensity`_, _`TableEmptyProps`_, _`TableFootProps`_, _`TableHeaderCellProps`_, _`TableHeaderCellSize`_, _`TableHeaderCellWeight`_, _`TableHeadProps`_, _`TableLayout`_, _`TableProps`_, _`TableRowProps`_, _`TableVAlign`_ |
 | `components/separator` | `Separator`, _`SeparatorProps`_ |
 | `components/scroll-area` | `ScrollArea`, _`ScrollAreaProps`_ |
 | `components/list` | `DEFAULT_LIST_LABELS`, `List`, `ListItem`, _`ListDensity`_, _`ListItemLinkProps`_, _`ListItemProps`_, _`ListLabels`_, _`ListProps`_, _`ListSeparator`_ |
@@ -536,7 +540,7 @@ re-slicing of it, never a second API.
 | `shell/app-shell` | `AppShell`, _`AppShellNavItem`_, _`AppShellProps`_, _`AppShellSubItem`_ |
 | `shell/option-switcher-menu` | `OptionSwitcherMenu`, _`OptionSwitcherOption`_ |
 | `shell/role-switcher` | `RoleSwitcher`, _`RoleSwitcherProps`_ |
-| `shell/topbar-action-menu` | `TopBarActionMenu`, _`TopBarMenuEntry`_ |
+| `shell/topbar-action-menu` | `TopBarActionMenu`, _`TopBarMenuEntry`_, _`TopBarMenuHeader`_ |
 
 ### feedback
 
@@ -552,7 +556,7 @@ re-slicing of it, never a second API.
 |---|---|
 | `wizard/types` | `DEFAULT_WIZARD_LABELS`, `resolveWizardLabels`, _`FieldErrors`_, _`StepStatus`_, _`SummaryItem`_, _`SummarySection`_, _`UseWizardOptions`_, _`UseWizardReturn`_, _`ValidateResult`_, _`WizardLabels`_, _`WizardStepConfig`_, _`WizardUrlSync`_ |
 | `wizard/use-wizard` | `useWizard` |
-| `wizard/wizard-context` | `useWizardContext`, `WizardContextProvider`, _`WizardContextValue`_ |
+| `wizard/wizard-context` | `useOptionalWizardContext`, `useWizardContext`, `WizardContextProvider`, _`WizardContextValue`_ |
 | `wizard/validation` | `requiredFieldsValidator`, _`RequiredFieldSpec`_ |
 | `wizard/wizard-step` | `WizardStep` |
 | `wizard/wizard-summary` | `WizardSummary` |

package/dist/components/alert-banner.d.ts

@@ -45,6 +45,31 @@ interface AlertBannerBaseProps extends Omit<ComponentPropsWithoutRef<"div">, "on
     variant?: "box" | "inline" | "strip";
     /** See {@link AlertSize}. Default `md`. */
     size?: AlertSize;
+    /**
+     * `inline` only (0.11.0): lay the message out as a BLOCK — a full-width `flex` row,
+     * the glyph on the text's FIRST line when it wraps — instead of the `inline-flex`,
+     * centred line it is by default. keksdose writes `className="flex"` on nearly every
+     * inline banner it has (accounts-page:564, holdings-panel:631, import-map-step:66/314,
+     * guest-key-control:84) to get a line of its own under a total or a field, and a
+     * two-line hint there then centres its glyph between the lines.
+     *
+     * An option rather than the new default, because the inline-flex is load-bearing for
+     * the callers the variant was made for: lenkbank's corner-motion toolbar
+     * (corner-motion.tsx:178) sets it as a `shrink-0` item beside the controls, kastlan's
+     * import page and keksdose's rules page place it in a run of content — a block would
+     * take the whole row in the second kind, and top-align the first against a taller
+     * control. Ignored by `box` and `strip`, which are blocks already.
+     */
+    block?: boolean;
+    /**
+     * `false` opts an inline banner out of its live region (no `role="alert"` /
+     * `role="status"`), for a message that is static page content rather than the answer
+     * to something the user just did: keksdose's CAMT review step (camt-review-step:214)
+     * renders "unresolved rows block the import" as part of the step, and as
+     * `role="alert"` a screen reader interrupted with it on every mount. A `role` you pass
+     * still wins. Default `true`; the box and the strip are role-less either way.
+     */
+    live?: boolean;
     /**
      * An opaque, raised surface (a shadow, and no translucency in dark mode) for a
      * notice that floats over the page — see {@link TONE_ELEVATED}. `box` and `strip`
@@ -95,6 +120,6 @@ type AlertBannerProps = AlertBannerBaseProps & ({
 });
 /** Warning/danger/info callout box with the shared frame and an icon — or, with
  *  `variant="inline"`, the same message as a frameless line of toned text. */
-declare function AlertBanner({ tone, variant, size, elevated, action, icon, onDismiss, dismissLabel, href, onClick, className, children, role, ...rest }: AlertBannerProps): react.JSX.Element;
+declare function AlertBanner({ tone, variant, size, block, live, elevated, action, icon, onDismiss, dismissLabel, href, onClick, className, children, role, ...rest }: AlertBannerProps): react.JSX.Element;
 
 export { AlertBanner, type AlertBannerProps, type AlertSize, type AlertTone, alertFrameClass, toneFrameClass };

package/dist/components/alert-banner.js

@@ -57,6 +57,8 @@ function AlertBanner({
   tone = "danger",
   variant = "box",
   size = "md",
+  block = false,
+  live = true,
   elevated = false,
   action,
   icon,
@@ -74,9 +76,10 @@ function AlertBanner({
   const strip = variant === "strip";
   const sm = size === "sm";
   const interactive = href !== void 0 || onClick !== void 0;
-  const resolvedRole = role ?? (inline ? tone === "danger" ? "alert" : "status" : void 0);
+  const inlineRow = inline && !block;
+  const resolvedRole = role ?? (inline && live ? tone === "danger" ? "alert" : "status" : void 0);
   const Glyph = TONE_GLYPH[tone];
-  const nudge = inline || strip ? void 0 : sm ? "mt-px" : "mt-0.5";
+  const nudge = inlineRow || strip ? void 0 : sm ? "mt-px" : "mt-0.5";
   const glyph = icon === null ? null : icon !== void 0 ? /* @__PURE__ */ jsx(
     "span",
     {
@@ -86,7 +89,7 @@ function AlertBanner({
     }
   ) : /* @__PURE__ */ jsx(Glyph, { "aria-hidden": true, className: cn(sm ? "size-3.5" : "size-4", "shrink-0", nudge, TONE_ICON[tone]) });
   const row = cn(
-    inline ? "inline-flex items-center" : strip ? "flex flex-wrap items-center gap-y-1" : "flex items-start",
+    inlineRow ? "inline-flex items-center" : strip ? "flex flex-wrap items-center gap-y-1" : "flex items-start",
     sm ? "gap-1.5 text-xs" : inline ? "gap-1.5 text-sm" : "gap-2 text-sm"
   );
   const frame = inline ? "" : cn(
@@ -96,7 +99,7 @@ function AlertBanner({
   const focusRing = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)] focus-visible:ring-offset-1 focus-visible:ring-offset-[var(--bg-surface)]";
   const content = /* @__PURE__ */ jsxs(Fragment, { children: [
     glyph,
-    /* @__PURE__ */ jsx("span", { className: cn(!inline && "flex-1", "min-w-0 text-start"), children }),
+    /* @__PURE__ */ jsx("span", { className: cn(!inlineRow && "flex-1", "min-w-0 text-start"), children }),
     interactive && /* @__PURE__ */ jsx(
       ChevronRight,
       {
@@ -124,7 +127,7 @@ function AlertBanner({
       children: /* @__PURE__ */ jsx(X, { "aria-hidden": true, className: "size-4" })
     }
   ) : null;
-  const trailing = action !== void 0 && action !== null ? /* @__PURE__ */ jsx("div", { className: cn("relative z-10 flex shrink-0 items-center gap-2", !strip && !inline && "self-center", strip && "ms-auto"), children: action }) : null;
+  const trailing = action !== void 0 && action !== null ? /* @__PURE__ */ jsx("div", { className: cn("relative z-10 flex shrink-0 items-center gap-2", !strip && !inlineRow && "self-center", strip && "ms-auto"), children: action }) : null;
   if (!interactive) {
     return /* @__PURE__ */ jsxs(
       "div",
@@ -145,11 +148,11 @@ function AlertBanner({
   const actionClass = split ? cn(
     "flex min-w-0 flex-1 text-start",
     sm ? "gap-1.5" : "gap-2",
-    inline || strip ? "items-center" : "items-start",
+    inlineRow || strip ? "items-center" : "items-start",
     "outline-none after:absolute after:inset-0 after:content-['']",
     strip ? "after:rounded-none" : "after:rounded-md",
     "focus-visible:after:ring-2 focus-visible:after:ring-[var(--brand)]"
-  ) : cn(row, !inline && "w-full", frame, TONE_TEXT[tone], hover, focusRing, className);
+  ) : cn(row, !inlineRow && "w-full", frame, TONE_TEXT[tone], hover, focusRing, className);
   const actionRest = split ? {} : rest;
   const rowAction = href !== void 0 ? /* @__PURE__ */ jsx(
     "a",

package/dist/components/alert-banner.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/alert-banner.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, MouseEvent, ReactNode } from \"react\";\nimport { AlertTriangle, CheckCircle2, ChevronRight, Info, X } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { DEFAULT_COMMON_LABELS, useKitLabels } from \"../i18n/kit-labels\";\n\n/** `info` (0.8.0) is the sky family, for news that is neither good nor bad: keksdose's\n *  preview and beta-performance banners, which borrowed `warning` for want of it and\n *  so told every user of the preview build that something was wrong. */\nexport type AlertTone = \"danger\" | \"warning\" | \"info\" | \"success\" | \"neutral\";\n\n/** `sm` (0.10.0): 12px type and a 14px glyph — the hint line under a field or a total\n *  that keksdose spells `text-xs text-amber-700 dark:text-amber-400` by hand\n *  (accounts-page's missing-rate note, import-map-step, guest-key-control's two\n *  key states, goal-form). At body size those read as a second heading. */\nexport type AlertSize = \"sm\" | \"md\";\n\n/** Border + surface per tone, WITHOUT a radius or padding, so a caller that owns\n * its own box (a Card, say) can take the tone alone. Single source for both\n * {@link alertFrameClass} and {@link toneFrameClass}.\n *\n * The colored tones are 2px, not 1px, and that is load-bearing rather than\n * decorative. A 1px border is 1.25 device pixels on a 125%-scaled display — the\n * usual Windows setting — so whether it renders as a solid line or as two\n * half-lit pixels depends on where the box happens to land in device-pixel space.\n * The same card then shows a heavy left edge and a right edge that fades out,\n * which is what feedback #264, #277, #491 and #498 all reported. A 2px border is\n * 2.5 device pixels: it always covers at least two pixels fully, on both edges,\n * at any offset. Callers compensate the extra pixel in their own padding so\n * switching tones never shifts the layout. */\nconst TONE_FRAME: Record<AlertTone, string> = {\n  danger: \"border-2 border-[var(--danger-border)] bg-[var(--danger-bg)]\",\n  warning: \"border-2 border-[var(--warning-border)] bg-[var(--warning-bg)]\",\n  info: \"border-2 border-[var(--info-border)] bg-[var(--info-bg)]\",\n  success: \"border-2 border-[var(--success-border)] bg-[var(--success-bg)]\",\n  neutral: \"border border-[var(--border)]\",\n};\n\n/** `elevated`: the same frame on an OPAQUE surface. The dark tone washes are\n *  translucent (a 20–25 % tint), which is right on a page and wrong on anything that\n *  floats over one — keksdose's server-wake notice (#209) let the page's own text\n *  show through the one message whose job is to be read when nothing else makes\n *  sense. So the surface becomes `--bg-surface` and the tone's wash is layered on it\n *  as a background IMAGE (a flat gradient), which keeps the exact tint in both themes\n *  without a second, opaque copy of every `-bg` token. */\nconst TONE_ELEVATED: Record<AlertTone, string> = {\n  danger: \"bg-[image:linear-gradient(var(--danger-bg),var(--danger-bg))]\",\n  warning: \"bg-[image:linear-gradient(var(--warning-bg),var(--warning-bg))]\",\n  info: \"bg-[image:linear-gradient(var(--info-bg),var(--info-bg))]\",\n  success: \"bg-[image:linear-gradient(var(--success-bg),var(--success-bg))]\",\n  neutral: \"\",\n};\nconst ELEVATED = \"bg-[var(--bg-surface)] shadow-lg\";\n\n/** The tone's border + surface on their own — for a caller that already has a box\n * with its own radius and padding (e.g. a Card). Remember to shave 1px off that\n * padding for the colored tones, whose border is 2px wide. */\nexport function toneFrameClass(tone: AlertTone): string {\n  return TONE_FRAME[tone];\n}\n\n/** Single source for the warning-callout frame (feedback #277): the tone's border\n * and surface plus this component's own radius and padding, the latter\n * compensating the 2px colored border so toggling tones never shifts layout. */\nexport function alertFrameClass(tone: AlertTone, size: AlertSize = \"md\"): string {\n  const box =\n    size === \"sm\"\n      ? tone === \"neutral\"\n        ? \"rounded-md px-2.5 py-1.5\"\n        : \"rounded-md px-[9px] py-[5px]\"\n      : tone === \"neutral\"\n        ? \"rounded-md p-3\"\n        : \"rounded-md p-[11px]\";\n  return `${box} ${TONE_FRAME[tone]}`;\n}\n\n/** The `strip` frame: the tone's surface edge to edge, no radius, and only the BOTTOM\n *  border, 1px — a strip is a band across the top of a page, and its one visible edge\n *  is the line it draws under itself. kastlan's trial, past-due and tour banners. */\nfunction stripFrameClass(tone: AlertTone, size: AlertSize): string {\n  return cn(\n    TONE_FRAME[tone],\n    \"rounded-none border-0 border-b\",\n    size === \"sm\" ? \"px-4 py-1.5\" : \"px-4 py-2\",\n  );\n}\n\nconst TONE_TEXT: Record<AlertTone, string> = {\n  danger: \"text-[var(--danger)]\",\n  warning: \"text-[var(--warning)]\",\n  info: \"text-[var(--info)]\",\n  success: \"text-[var(--success)]\",\n  neutral: \"text-[var(--text-secondary)]\",\n};\n\nconst TONE_ICON: Record<AlertTone, string> = {\n  danger: \"text-[var(--danger)]\",\n  warning: \"text-[var(--warning)]\",\n  info: \"text-[var(--info)]\",\n  success: \"text-[var(--success)]\",\n  neutral: \"text-[var(--text-muted)]\",\n};\n\n/** Which glyph a tone draws when the caller names none. The triangle belongs to the\n *  two tones that mean \"something is wrong\"; `info` and `neutral` get the ⓘ. That is\n *  what makes `neutral` safe to offer at all: until 0.8.0 it was withheld because a\n *  triangle with no colour is a warning that looks like a note — and a neutral note\n *  that draws no triangle is simply a note (lenkbank's \"values are rounded\"). */\nconst TONE_GLYPH: Record<AlertTone, typeof AlertTriangle> = {\n  danger: AlertTriangle,\n  warning: AlertTriangle,\n  info: Info,\n  success: CheckCircle2,\n  neutral: Info,\n};\n\ninterface AlertBannerBaseProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"onClick\"> {\n  /** Default `danger`. `info` for news, `neutral` for a plain note — see\n   *  {@link TONE_GLYPH} for why a neutral banner is now allowed. */\n  tone?: AlertTone;\n  /**\n   * `box` (default): the framed callout. `inline`: the tone's colour, glyph and role\n   * and NOTHING else — no border, no surface, no padding — so it fits inside a\n   * toolbar row beside the controls it is about. Lenkbank's corner-motion toolbar\n   * shows \"Radius below the minimum\" and \"Solving…\" there; a box would have doubled\n   * the row's height every time either appeared.\n   *\n   * The inline variant is also a LIVE REGION by default — `role=\"alert\"` for\n   * `danger`, `role=\"status\"` for the rest — because a message that appears in a\n   * toolbar in answer to what the user just did is exactly the kind a screen reader\n   * otherwise never hears. The box stays role-less as it always was: it is usually\n   * page furniture present at load, and an alert that fires on every navigation is\n   * noise. Either way a `role` you pass wins.\n   *\n   * `strip` (0.10.0): a band across the top of a page or a panel — edge to edge, no\n   * radius, only a bottom border, content centred on one line, and usually an\n   * {@link action}. kastlan's billing trial-banner and past-due-banner and its tours\n   * tour-banner each built this by hand in amber or red Tailwind classes, with a\n   * separate dark: spelling apiece. Role-less like the box: it is page furniture.\n   */\n  variant?: \"box\" | \"inline\" | \"strip\";\n  /** See {@link AlertSize}. Default `md`. */\n  size?: AlertSize;\n  /**\n   * An opaque, raised surface (a shadow, and no translucency in dark mode) for a\n   * notice that floats over the page — see {@link TONE_ELEVATED}. `box` and `strip`\n   * only; an inline message has no surface to raise.\n   */\n  elevated?: boolean;\n  /**\n   * A trailing control — the \"Update payment method\" button on kastlan's trial and\n   * past-due strips, the \"Exit\" on its tour strip. Sits at the end of the row,\n   * vertically centred, and never shrinks. On a whole-row banner (`href`/`onClick`)\n   * it is rendered BESIDE the row's own link or button, as the × is, because\n   * interactive content may not nest.\n   */\n  action?: ReactNode;\n  /** Replaces the tone's glyph — a `<Spinner label={null} />` for \"Solving…\", say.\n   *  `null` draws none. Always decorative; the text carries the message. */\n  icon?: ReactNode;\n  /** Renders an × at the end that calls this. The banner does not hide itself — the\n   *  caller removes it (and remembers that it did), as with every other kit control\n   *  whose state is app state. */\n  onDismiss?: () => void;\n  /** Accessible name of the ×. Default: `common.dismiss` from the\n   *  {@link UiKitProvider}, else \"Dismiss\". */\n  dismissLabel?: string;\n  children: ReactNode;\n}\n\n/**\n * The whole-row modes. keksdose's budget-summary card is a banner you tap to open\n * the budget; built from a `<div onClick>` it was a mouse-only target, and built as a\n * banner with a link inside it was a small target inside a big one that looked like\n * one. So `onClick` makes the banner itself ONE `<button>`, and `href` makes it one\n * `<a>`, with a trailing chevron that says so. Mutually exclusive, as on `Chip`.\n *\n * With `onDismiss` as well, the × cannot go inside the button (interactive content\n * may not nest), so the frame becomes a wrapper holding two siblings: the row's\n * button, stretched over the whole frame, and the × on top of it. It still looks and\n * clicks like one banner with an × in its corner, and the two are separate tab stops.\n */\nexport type AlertBannerProps = AlertBannerBaseProps &\n  (\n    | {\n        /** Makes the whole banner one link. Mutually exclusive with `onClick`. */\n        href?: string;\n        onClick?: never;\n      }\n    | {\n        href?: never;\n        /** Makes the whole banner one button. Mutually exclusive with `href`. The\n         *  event's element is the `<button>`, not a `<div>`. */\n        onClick?: (event: MouseEvent<HTMLElement>) => void;\n      }\n  );\n\n/** Warning/danger/info callout box with the shared frame and an icon — or, with\n *  `variant=\"inline\"`, the same message as a frameless line of toned text. */\nexport function AlertBanner({\n  tone = \"danger\",\n  variant = \"box\",\n  size = \"md\",\n  elevated = false,\n  action,\n  icon,\n  onDismiss,\n  dismissLabel,\n  href,\n  onClick,\n  className,\n  children,\n  role,\n  ...rest\n}: AlertBannerProps) {\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS, { dismiss: dismissLabel });\n  const inline = variant === \"inline\";\n  const strip = variant === \"strip\";\n  const sm = size === \"sm\";\n  const interactive = href !== undefined || onClick !== undefined;\n  const resolvedRole = role ?? (inline ? (tone === \"danger\" ? \"alert\" : \"status\") : undefined);\n\n  const Glyph = TONE_GLYPH[tone];\n  // Onto the first line of a box's text: 2px at 14px/20px, 1px at 12px/16px.\n  const nudge = inline || strip ? undefined : sm ? \"mt-px\" : \"mt-0.5\";\n  const glyph =\n    icon === null ? null : icon !== undefined ? (\n      <span\n        aria-hidden\n        className={cn(\"flex shrink-0\", sm ? \"[&_svg]:size-3.5\" : \"[&_svg]:size-4\", nudge, TONE_ICON[tone])}\n      >\n        {icon}\n      </span>\n    ) : (\n      <Glyph aria-hidden className={cn(sm ? \"size-3.5\" : \"size-4\", \"shrink-0\", nudge, TONE_ICON[tone])} />\n    );\n\n  // The row layout, shared by every shape below. A strip centres, and WRAPS: on a\n  // phone a long message plus an action would otherwise squeeze the text into a narrow\n  // column, so the action drops under it instead. A box may wrap its text, so it\n  // top-aligns and nudges the glyph onto the first line.\n  const row = cn(\n    inline ? \"inline-flex items-center\" : strip ? \"flex flex-wrap items-center gap-y-1\" : \"flex items-start\",\n    sm ? \"gap-1.5 text-xs\" : inline ? \"gap-1.5 text-sm\" : \"gap-2 text-sm\",\n  );\n  const frame = inline\n    ? \"\"\n    : cn(\n        strip ? stripFrameClass(tone, size) : alertFrameClass(tone, size),\n        elevated && cn(ELEVATED, TONE_ELEVATED[tone]),\n      );\n  const focusRing =\n    \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)] focus-visible:ring-offset-1 focus-visible:ring-offset-[var(--bg-surface)]\";\n\n  const content = (\n    <>\n      {glyph}\n      <span className={cn(!inline && \"flex-1\", \"min-w-0 text-start\")}>{children}</span>\n      {interactive && (\n        <ChevronRight\n          aria-hidden\n          className={cn(sm ? \"size-3.5\" : \"size-4\", \"shrink-0 opacity-70 rtl:-scale-x-100\", nudge)}\n        />\n      )}\n    </>\n  );\n\n  const dismiss = onDismiss ? (\n    <button\n      type=\"button\"\n      aria-label={common.dismiss}\n      onClick={(e) => {\n        // A dismiss inside a whole-row banner must not also follow the row.\n        e.preventDefault();\n        e.stopPropagation();\n        onDismiss();\n      }}\n      className={cn(\n        // Negative margins so the × does not make the box taller than its text; the\n        // hover wash takes the tone's own hue, so it works on every tone.\n        \"relative z-10 -my-0.5 -me-0.5 flex size-6 shrink-0 items-center justify-center rounded transition-colors hover:bg-current/10\",\n        focusRing,\n      )}\n    >\n      <X aria-hidden className=\"size-4\" />\n    </button>\n  ) : null;\n\n  // `relative z-10` so it stays clickable over a whole-row banner's stretched target.\n  const trailing =\n    action !== undefined && action !== null ? (\n      <div className={cn(\"relative z-10 flex shrink-0 items-center gap-2\", !strip && !inline && \"self-center\", strip && \"ms-auto\")}>\n        {action}\n      </div>\n    ) : null;\n\n  if (!interactive) {\n    return (\n      <div\n        // Arbitrary attributes first — a `data-tour` anchor, a test id, an\n        // `aria-describedby` — then the layout and tone classes, which are merged\n        // through `cn` rather than spread so a caller's `className` refines the box\n        // instead of replacing it.\n        {...rest}\n        role={resolvedRole}\n        className={cn(row, frame, TONE_TEXT[tone], className)}\n      >\n        {content}\n        {trailing}\n        {dismiss}\n      </div>\n    );\n  }\n\n  const hover = \"cursor-pointer transition-[filter] hover:brightness-[0.97] dark:hover:brightness-110\";\n  // With a dismiss the frame is a wrapper and the row element is stretched over it;\n  // without one the row element IS the frame.\n  const split = dismiss !== null || trailing !== null;\n  const actionClass = split\n    ? cn(\n        \"flex min-w-0 flex-1 text-start\",\n        sm ? \"gap-1.5\" : \"gap-2\",\n        inline || strip ? \"items-center\" : \"items-start\",\n        \"outline-none after:absolute after:inset-0 after:content-['']\",\n        strip ? \"after:rounded-none\" : \"after:rounded-md\",\n        \"focus-visible:after:ring-2 focus-visible:after:ring-[var(--brand)]\",\n      )\n    : cn(row, !inline && \"w-full\", frame, TONE_TEXT[tone], hover, focusRing, className);\n  // The div's attributes are the row element's: an `id`, a test id or an\n  // `aria-describedby` belongs on the thing that takes focus. The live-region role is\n  // NOT carried over — a button or a link that is also a `status` is neither.\n  const actionRest = split ? {} : rest;\n\n  const rowAction =\n    href !== undefined ? (\n      <a\n        {...(actionRest as ComponentPropsWithoutRef<\"a\">)}\n        href={href}\n        className={actionClass}\n      >\n        {content}\n      </a>\n    ) : (\n      <button\n        {...(actionRest as ComponentPropsWithoutRef<\"button\">)}\n        type=\"button\"\n        onClick={onClick}\n        className={actionClass}\n      >\n        {content}\n      </button>\n    );\n\n  if (!split) return rowAction;\n  return (\n    <div\n      {...rest}\n      role={resolvedRole}\n      className={cn(\"relative\", row, frame, TONE_TEXT[tone], hover, className)}\n    >\n      {rowAction}\n      {trailing}\n      {dismiss}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/alert-banner.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, MouseEvent, ReactNode } from \"react\";\nimport { AlertTriangle, CheckCircle2, ChevronRight, Info, X } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { DEFAULT_COMMON_LABELS, useKitLabels } from \"../i18n/kit-labels\";\n\n/** `info` (0.8.0) is the sky family, for news that is neither good nor bad: keksdose's\n *  preview and beta-performance banners, which borrowed `warning` for want of it and\n *  so told every user of the preview build that something was wrong. */\nexport type AlertTone = \"danger\" | \"warning\" | \"info\" | \"success\" | \"neutral\";\n\n/** `sm` (0.10.0): 12px type and a 14px glyph — the hint line under a field or a total\n *  that keksdose spells `text-xs text-amber-700 dark:text-amber-400` by hand\n *  (accounts-page's missing-rate note, import-map-step, guest-key-control's two\n *  key states, goal-form). At body size those read as a second heading. */\nexport type AlertSize = \"sm\" | \"md\";\n\n/** Border + surface per tone, WITHOUT a radius or padding, so a caller that owns\n * its own box (a Card, say) can take the tone alone. Single source for both\n * {@link alertFrameClass} and {@link toneFrameClass}.\n *\n * The colored tones are 2px, not 1px, and that is load-bearing rather than\n * decorative. A 1px border is 1.25 device pixels on a 125%-scaled display — the\n * usual Windows setting — so whether it renders as a solid line or as two\n * half-lit pixels depends on where the box happens to land in device-pixel space.\n * The same card then shows a heavy left edge and a right edge that fades out,\n * which is what feedback #264, #277, #491 and #498 all reported. A 2px border is\n * 2.5 device pixels: it always covers at least two pixels fully, on both edges,\n * at any offset. Callers compensate the extra pixel in their own padding so\n * switching tones never shifts the layout. */\nconst TONE_FRAME: Record<AlertTone, string> = {\n  danger: \"border-2 border-[var(--danger-border)] bg-[var(--danger-bg)]\",\n  warning: \"border-2 border-[var(--warning-border)] bg-[var(--warning-bg)]\",\n  info: \"border-2 border-[var(--info-border)] bg-[var(--info-bg)]\",\n  success: \"border-2 border-[var(--success-border)] bg-[var(--success-bg)]\",\n  neutral: \"border border-[var(--border)]\",\n};\n\n/** `elevated`: the same frame on an OPAQUE surface. The dark tone washes are\n *  translucent (a 20–25 % tint), which is right on a page and wrong on anything that\n *  floats over one — keksdose's server-wake notice (#209) let the page's own text\n *  show through the one message whose job is to be read when nothing else makes\n *  sense. So the surface becomes `--bg-surface` and the tone's wash is layered on it\n *  as a background IMAGE (a flat gradient), which keeps the exact tint in both themes\n *  without a second, opaque copy of every `-bg` token. */\nconst TONE_ELEVATED: Record<AlertTone, string> = {\n  danger: \"bg-[image:linear-gradient(var(--danger-bg),var(--danger-bg))]\",\n  warning: \"bg-[image:linear-gradient(var(--warning-bg),var(--warning-bg))]\",\n  info: \"bg-[image:linear-gradient(var(--info-bg),var(--info-bg))]\",\n  success: \"bg-[image:linear-gradient(var(--success-bg),var(--success-bg))]\",\n  neutral: \"\",\n};\nconst ELEVATED = \"bg-[var(--bg-surface)] shadow-lg\";\n\n/** The tone's border + surface on their own — for a caller that already has a box\n * with its own radius and padding (e.g. a Card). Remember to shave 1px off that\n * padding for the colored tones, whose border is 2px wide. */\nexport function toneFrameClass(tone: AlertTone): string {\n  return TONE_FRAME[tone];\n}\n\n/** Single source for the warning-callout frame (feedback #277): the tone's border\n * and surface plus this component's own radius and padding, the latter\n * compensating the 2px colored border so toggling tones never shifts layout. */\nexport function alertFrameClass(tone: AlertTone, size: AlertSize = \"md\"): string {\n  const box =\n    size === \"sm\"\n      ? tone === \"neutral\"\n        ? \"rounded-md px-2.5 py-1.5\"\n        : \"rounded-md px-[9px] py-[5px]\"\n      : tone === \"neutral\"\n        ? \"rounded-md p-3\"\n        : \"rounded-md p-[11px]\";\n  return `${box} ${TONE_FRAME[tone]}`;\n}\n\n/** The `strip` frame: the tone's surface edge to edge, no radius, and only the BOTTOM\n *  border, 1px — a strip is a band across the top of a page, and its one visible edge\n *  is the line it draws under itself. kastlan's trial, past-due and tour banners. */\nfunction stripFrameClass(tone: AlertTone, size: AlertSize): string {\n  return cn(\n    TONE_FRAME[tone],\n    \"rounded-none border-0 border-b\",\n    size === \"sm\" ? \"px-4 py-1.5\" : \"px-4 py-2\",\n  );\n}\n\nconst TONE_TEXT: Record<AlertTone, string> = {\n  danger: \"text-[var(--danger)]\",\n  warning: \"text-[var(--warning)]\",\n  info: \"text-[var(--info)]\",\n  success: \"text-[var(--success)]\",\n  neutral: \"text-[var(--text-secondary)]\",\n};\n\nconst TONE_ICON: Record<AlertTone, string> = {\n  danger: \"text-[var(--danger)]\",\n  warning: \"text-[var(--warning)]\",\n  info: \"text-[var(--info)]\",\n  success: \"text-[var(--success)]\",\n  neutral: \"text-[var(--text-muted)]\",\n};\n\n/** Which glyph a tone draws when the caller names none. The triangle belongs to the\n *  two tones that mean \"something is wrong\"; `info` and `neutral` get the ⓘ. That is\n *  what makes `neutral` safe to offer at all: until 0.8.0 it was withheld because a\n *  triangle with no colour is a warning that looks like a note — and a neutral note\n *  that draws no triangle is simply a note (lenkbank's \"values are rounded\"). */\nconst TONE_GLYPH: Record<AlertTone, typeof AlertTriangle> = {\n  danger: AlertTriangle,\n  warning: AlertTriangle,\n  info: Info,\n  success: CheckCircle2,\n  neutral: Info,\n};\n\ninterface AlertBannerBaseProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"onClick\"> {\n  /** Default `danger`. `info` for news, `neutral` for a plain note — see\n   *  {@link TONE_GLYPH} for why a neutral banner is now allowed. */\n  tone?: AlertTone;\n  /**\n   * `box` (default): the framed callout. `inline`: the tone's colour, glyph and role\n   * and NOTHING else — no border, no surface, no padding — so it fits inside a\n   * toolbar row beside the controls it is about. Lenkbank's corner-motion toolbar\n   * shows \"Radius below the minimum\" and \"Solving…\" there; a box would have doubled\n   * the row's height every time either appeared.\n   *\n   * The inline variant is also a LIVE REGION by default — `role=\"alert\"` for\n   * `danger`, `role=\"status\"` for the rest — because a message that appears in a\n   * toolbar in answer to what the user just did is exactly the kind a screen reader\n   * otherwise never hears. The box stays role-less as it always was: it is usually\n   * page furniture present at load, and an alert that fires on every navigation is\n   * noise. Either way a `role` you pass wins.\n   *\n   * `strip` (0.10.0): a band across the top of a page or a panel — edge to edge, no\n   * radius, only a bottom border, content centred on one line, and usually an\n   * {@link action}. kastlan's billing trial-banner and past-due-banner and its tours\n   * tour-banner each built this by hand in amber or red Tailwind classes, with a\n   * separate dark: spelling apiece. Role-less like the box: it is page furniture.\n   */\n  variant?: \"box\" | \"inline\" | \"strip\";\n  /** See {@link AlertSize}. Default `md`. */\n  size?: AlertSize;\n  /**\n   * `inline` only (0.11.0): lay the message out as a BLOCK — a full-width `flex` row,\n   * the glyph on the text's FIRST line when it wraps — instead of the `inline-flex`,\n   * centred line it is by default. keksdose writes `className=\"flex\"` on nearly every\n   * inline banner it has (accounts-page:564, holdings-panel:631, import-map-step:66/314,\n   * guest-key-control:84) to get a line of its own under a total or a field, and a\n   * two-line hint there then centres its glyph between the lines.\n   *\n   * An option rather than the new default, because the inline-flex is load-bearing for\n   * the callers the variant was made for: lenkbank's corner-motion toolbar\n   * (corner-motion.tsx:178) sets it as a `shrink-0` item beside the controls, kastlan's\n   * import page and keksdose's rules page place it in a run of content — a block would\n   * take the whole row in the second kind, and top-align the first against a taller\n   * control. Ignored by `box` and `strip`, which are blocks already.\n   */\n  block?: boolean;\n  /**\n   * `false` opts an inline banner out of its live region (no `role=\"alert\"` /\n   * `role=\"status\"`), for a message that is static page content rather than the answer\n   * to something the user just did: keksdose's CAMT review step (camt-review-step:214)\n   * renders \"unresolved rows block the import\" as part of the step, and as\n   * `role=\"alert\"` a screen reader interrupted with it on every mount. A `role` you pass\n   * still wins. Default `true`; the box and the strip are role-less either way.\n   */\n  live?: boolean;\n  /**\n   * An opaque, raised surface (a shadow, and no translucency in dark mode) for a\n   * notice that floats over the page — see {@link TONE_ELEVATED}. `box` and `strip`\n   * only; an inline message has no surface to raise.\n   */\n  elevated?: boolean;\n  /**\n   * A trailing control — the \"Update payment method\" button on kastlan's trial and\n   * past-due strips, the \"Exit\" on its tour strip. Sits at the end of the row,\n   * vertically centred, and never shrinks. On a whole-row banner (`href`/`onClick`)\n   * it is rendered BESIDE the row's own link or button, as the × is, because\n   * interactive content may not nest.\n   */\n  action?: ReactNode;\n  /** Replaces the tone's glyph — a `<Spinner label={null} />` for \"Solving…\", say.\n   *  `null` draws none. Always decorative; the text carries the message. */\n  icon?: ReactNode;\n  /** Renders an × at the end that calls this. The banner does not hide itself — the\n   *  caller removes it (and remembers that it did), as with every other kit control\n   *  whose state is app state. */\n  onDismiss?: () => void;\n  /** Accessible name of the ×. Default: `common.dismiss` from the\n   *  {@link UiKitProvider}, else \"Dismiss\". */\n  dismissLabel?: string;\n  children: ReactNode;\n}\n\n/**\n * The whole-row modes. keksdose's budget-summary card is a banner you tap to open\n * the budget; built from a `<div onClick>` it was a mouse-only target, and built as a\n * banner with a link inside it was a small target inside a big one that looked like\n * one. So `onClick` makes the banner itself ONE `<button>`, and `href` makes it one\n * `<a>`, with a trailing chevron that says so. Mutually exclusive, as on `Chip`.\n *\n * With `onDismiss` as well, the × cannot go inside the button (interactive content\n * may not nest), so the frame becomes a wrapper holding two siblings: the row's\n * button, stretched over the whole frame, and the × on top of it. It still looks and\n * clicks like one banner with an × in its corner, and the two are separate tab stops.\n */\nexport type AlertBannerProps = AlertBannerBaseProps &\n  (\n    | {\n        /** Makes the whole banner one link. Mutually exclusive with `onClick`. */\n        href?: string;\n        onClick?: never;\n      }\n    | {\n        href?: never;\n        /** Makes the whole banner one button. Mutually exclusive with `href`. The\n         *  event's element is the `<button>`, not a `<div>`. */\n        onClick?: (event: MouseEvent<HTMLElement>) => void;\n      }\n  );\n\n/** Warning/danger/info callout box with the shared frame and an icon — or, with\n *  `variant=\"inline\"`, the same message as a frameless line of toned text. */\nexport function AlertBanner({\n  tone = \"danger\",\n  variant = \"box\",\n  size = \"md\",\n  block = false,\n  live = true,\n  elevated = false,\n  action,\n  icon,\n  onDismiss,\n  dismissLabel,\n  href,\n  onClick,\n  className,\n  children,\n  role,\n  ...rest\n}: AlertBannerProps) {\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS, { dismiss: dismissLabel });\n  const inline = variant === \"inline\";\n  const strip = variant === \"strip\";\n  const sm = size === \"sm\";\n  const interactive = href !== undefined || onClick !== undefined;\n  // A block-laid inline banner behaves like a box for layout: a row that may wrap.\n  const inlineRow = inline && !block;\n  const resolvedRole = role ?? (inline && live ? (tone === \"danger\" ? \"alert\" : \"status\") : undefined);\n\n  const Glyph = TONE_GLYPH[tone];\n  // Onto the first line of a box's text: 2px at 14px/20px, 1px at 12px/16px.\n  const nudge = inlineRow || strip ? undefined : sm ? \"mt-px\" : \"mt-0.5\";\n  const glyph =\n    icon === null ? null : icon !== undefined ? (\n      <span\n        aria-hidden\n        className={cn(\"flex shrink-0\", sm ? \"[&_svg]:size-3.5\" : \"[&_svg]:size-4\", nudge, TONE_ICON[tone])}\n      >\n        {icon}\n      </span>\n    ) : (\n      <Glyph aria-hidden className={cn(sm ? \"size-3.5\" : \"size-4\", \"shrink-0\", nudge, TONE_ICON[tone])} />\n    );\n\n  // The row layout, shared by every shape below. A strip centres, and WRAPS: on a\n  // phone a long message plus an action would otherwise squeeze the text into a narrow\n  // column, so the action drops under it instead. A box may wrap its text, so it\n  // top-aligns and nudges the glyph onto the first line.\n  const row = cn(\n    inlineRow ? \"inline-flex items-center\" : strip ? \"flex flex-wrap items-center gap-y-1\" : \"flex items-start\",\n    sm ? \"gap-1.5 text-xs\" : inline ? \"gap-1.5 text-sm\" : \"gap-2 text-sm\",\n  );\n  const frame = inline\n    ? \"\"\n    : cn(\n        strip ? stripFrameClass(tone, size) : alertFrameClass(tone, size),\n        elevated && cn(ELEVATED, TONE_ELEVATED[tone]),\n      );\n  const focusRing =\n    \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)] focus-visible:ring-offset-1 focus-visible:ring-offset-[var(--bg-surface)]\";\n\n  const content = (\n    <>\n      {glyph}\n      <span className={cn(!inlineRow && \"flex-1\", \"min-w-0 text-start\")}>{children}</span>\n      {interactive && (\n        <ChevronRight\n          aria-hidden\n          className={cn(sm ? \"size-3.5\" : \"size-4\", \"shrink-0 opacity-70 rtl:-scale-x-100\", nudge)}\n        />\n      )}\n    </>\n  );\n\n  const dismiss = onDismiss ? (\n    <button\n      type=\"button\"\n      aria-label={common.dismiss}\n      onClick={(e) => {\n        // A dismiss inside a whole-row banner must not also follow the row.\n        e.preventDefault();\n        e.stopPropagation();\n        onDismiss();\n      }}\n      className={cn(\n        // Negative margins so the × does not make the box taller than its text; the\n        // hover wash takes the tone's own hue, so it works on every tone.\n        \"relative z-10 -my-0.5 -me-0.5 flex size-6 shrink-0 items-center justify-center rounded transition-colors hover:bg-current/10\",\n        focusRing,\n      )}\n    >\n      <X aria-hidden className=\"size-4\" />\n    </button>\n  ) : null;\n\n  // `relative z-10` so it stays clickable over a whole-row banner's stretched target.\n  const trailing =\n    action !== undefined && action !== null ? (\n      <div className={cn(\"relative z-10 flex shrink-0 items-center gap-2\", !strip && !inlineRow && \"self-center\", strip && \"ms-auto\")}>\n        {action}\n      </div>\n    ) : null;\n\n  if (!interactive) {\n    return (\n      <div\n        // Arbitrary attributes first — a `data-tour` anchor, a test id, an\n        // `aria-describedby` — then the layout and tone classes, which are merged\n        // through `cn` rather than spread so a caller's `className` refines the box\n        // instead of replacing it.\n        {...rest}\n        role={resolvedRole}\n        className={cn(row, frame, TONE_TEXT[tone], className)}\n      >\n        {content}\n        {trailing}\n        {dismiss}\n      </div>\n    );\n  }\n\n  const hover = \"cursor-pointer transition-[filter] hover:brightness-[0.97] dark:hover:brightness-110\";\n  // With a dismiss the frame is a wrapper and the row element is stretched over it;\n  // without one the row element IS the frame.\n  const split = dismiss !== null || trailing !== null;\n  const actionClass = split\n    ? cn(\n        \"flex min-w-0 flex-1 text-start\",\n        sm ? \"gap-1.5\" : \"gap-2\",\n        inlineRow || strip ? \"items-center\" : \"items-start\",\n        \"outline-none after:absolute after:inset-0 after:content-['']\",\n        strip ? \"after:rounded-none\" : \"after:rounded-md\",\n        \"focus-visible:after:ring-2 focus-visible:after:ring-[var(--brand)]\",\n      )\n    : cn(row, !inlineRow && \"w-full\", frame, TONE_TEXT[tone], hover, focusRing, className);\n  // The div's attributes are the row element's: an `id`, a test id or an\n  // `aria-describedby` belongs on the thing that takes focus. The live-region role is\n  // NOT carried over — a button or a link that is also a `status` is neither.\n  const actionRest = split ? {} : rest;\n\n  const rowAction =\n    href !== undefined ? (\n      <a\n        {...(actionRest as ComponentPropsWithoutRef<\"a\">)}\n        href={href}\n        className={actionClass}\n      >\n        {content}\n      </a>\n    ) : (\n      <button\n        {...(actionRest as ComponentPropsWithoutRef<\"button\">)}\n        type=\"button\"\n        onClick={onClick}\n        className={actionClass}\n      >\n        {content}\n      </button>\n    );\n\n  if (!split) return rowAction;\n  return (\n    <div\n      {...rest}\n      role={resolvedRole}\n      className={cn(\"relative\", row, frame, TONE_TEXT[tone], hover, className)}\n    >\n      {rowAction}\n      {trailing}\n      {dismiss}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

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

@@ -5,6 +5,7 @@ import { NumberPadSheetLabels } from './numpad-sheet.js';
 import '../i18n/kit-labels.js';
 import './data-table-labels.js';
 import './mini-calendar.js';
+import './calendar-heatmap.js';
 import './popover.js';
 import './chip.js';
 import 'lucide-react';
@@ -12,6 +13,7 @@ import './field-sync.js';
 import './ui.js';
 import './tooltip.js';
 import '../hooks/use-anchored-rect.js';
+import '../lib/clipping.js';
 import '../wizard/types.js';
 import '../tour/tour.js';
 import '../search/command-palette.js';

package/dist/components/bulk-action-bar.d.ts

@@ -19,16 +19,62 @@ declare const DEFAULT_BULK_ACTION_BAR_LABELS: BulkActionBarLabels;
  * `inline` — in the flow, where the caller places it.
  */
 type BulkActionBarVariant = "floating" | "sticky" | "inline";
+/**
+ * A variant per breakpoint, mobile first — `{ base: "floating", md: "sticky" }` is the
+ * phone's floating card below 768px and the desktop's sticky bar from there up. The
+ * breakpoints are Tailwind's (sm 640, md 768, lg 1024, xl 1280px), the ones the kit's
+ * classes already use. keksdose's payees selection bar (payees-selection-bar.tsx)
+ * computes exactly this with its own `useMediaQuery("(min-width: 768px)")`; every bar
+ * that is a card on a phone and a strip on a desktop would repeat it.
+ *
+ * Resolved in JS rather than with `md:` classes because the variants differ in more
+ * than classes: the floating bar's clear is an icon at the start, the others' a text
+ * button at the end, and the floating bar is positioned by inline style.
+ */
+interface ResponsiveBulkActionBarVariant {
+    base: BulkActionBarVariant;
+    sm?: BulkActionBarVariant;
+    md?: BulkActionBarVariant;
+    lg?: BulkActionBarVariant;
+    xl?: BulkActionBarVariant;
+}
 interface BulkActionBarProps extends Omit<ComponentPropsWithoutRef<"div">, "role" | "children"> {
-    /** How many items are selected. The bar shows only while this is above zero. */
+    /** How many items are selected. The bar shows only while this is above zero —
+     *  unless {@link open} says otherwise. */
     count: number;
+    /**
+     * Show the bar regardless of `count` — `true` for SELECTION MODE with nothing picked
+     * yet, `false` to hide it with rows still selected. Left out, `count > 0` decides, as
+     * before.
+     *
+     * keksdose's invoice lines (invoice-lines-bulk-bar.tsx) enter selection with a
+     * "Select" button, and the bar must be there at "0 selected" to hold the way out and
+     * a "Select all" (pass it as a child); gated on the count, the bar appeared only at
+     * the first tick, and the user who pressed "Select" saw nothing happen. The exit plays
+     * when it closes either way, and the count is still announced on every change.
+     */
+    open?: boolean;
     /** Clear the selection / leave selection mode. */
     onClear: () => void;
     /** The actions: buttons (`IconButton size="lg"` on a phone, `Button` from md up),
      *  in the caller's order. They are the toolbar's arrow-key stops, after the clear. */
     children?: ReactNode;
-    /** Default `floating`. See {@link BulkActionBarVariant}. */
-    variant?: BulkActionBarVariant;
+    /** Default `floating`. See {@link BulkActionBarVariant}; an object picks one per
+     *  breakpoint, see {@link ResponsiveBulkActionBarVariant}. */
+    variant?: BulkActionBarVariant | ResponsiveBulkActionBarVariant;
+    /**
+     * Content BELOW the toolbar row, inside the same surface — the same floating card or
+     * sticky tinted strip — but OUTSIDE the toolbar: its fields keep their own Tab stops
+     * and arrow keys, and the toolbar's roving focus never walks into it. keksdose's
+     * desktop receipt-line bar (invoice-lines-bulk-bar.tsx) shows its `BulkFields` form —
+     * a category picker, an exclude checkbox, Apply — under the count and the clear; a
+     * form is not a toolbar's content (`role="toolbar"` promises one arrow-key widget),
+     * and set beside the bar it lost the sticky tint and scrolled away from it.
+     *
+     * On the floating variant the panel scrolls within 60% of the viewport's height, so a
+     * long form on a phone cannot push the bar off the top of the screen.
+     */
+    panel?: ReactNode;
     /** Default: `bulkActionBar` from the {@link UiKitProvider}, else English. */
     labels?: Partial<BulkActionBarLabels>;
 }
@@ -61,6 +107,6 @@ interface BulkActionBarProps extends Omit<ComponentPropsWithoutRef<"div">, "role
  * It is NOT a dialog: no focus trap, no scroll lock — the list behind stays live,
  * because tapping more rows is how a selection grows.
  */
-declare function BulkActionBar({ count, onClear, children, variant, labels: labelsProp, className, style, onKeyDown, onFocus, ...rest }: BulkActionBarProps): react.JSX.Element;
+declare function BulkActionBar({ count, onClear, children, variant: variantProp, open, panel, labels: labelsProp, className, style, onKeyDown, onFocus, ...rest }: BulkActionBarProps): react.JSX.Element;
 
-export { BulkActionBar, type BulkActionBarLabels, type BulkActionBarProps, type BulkActionBarVariant, DEFAULT_BULK_ACTION_BAR_LABELS };
+export { BulkActionBar, type BulkActionBarLabels, type BulkActionBarProps, type BulkActionBarVariant, DEFAULT_BULK_ACTION_BAR_LABELS, type ResponsiveBulkActionBarVariant };

package/dist/components/bulk-action-bar.js

@@ -6,6 +6,7 @@ import { cn } from "../lib/cn.js";
 import { horizontalStep } from "../lib/direction.js";
 import { useKitLabels } from "../i18n/kit-labels.js";
 import { useAnnounce } from "../hooks/use-announce.js";
+import { useMediaQuery } from "../hooks/use-media-query.js";
 import { OVERLAY_EXIT_MS, prefersReducedMotion } from "../hooks/use-close-transition.js";
 import { Button, IconButton } from "./ui.js";
 const DEFAULT_BULK_ACTION_BAR_LABELS = {
@@ -13,6 +14,26 @@ const DEFAULT_BULK_ACTION_BAR_LABELS = {
   clear: "Clear selection",
   cleared: "Selection cleared"
 };
+const BREAKPOINTS = [
+  ["xl", "(min-width: 1280px)"],
+  ["lg", "(min-width: 1024px)"],
+  ["md", "(min-width: 768px)"],
+  ["sm", "(min-width: 640px)"]
+];
+function useResolvedVariant(variant) {
+  const matches = {
+    xl: useMediaQuery(BREAKPOINTS[0][1], false),
+    lg: useMediaQuery(BREAKPOINTS[1][1], false),
+    md: useMediaQuery(BREAKPOINTS[2][1], false),
+    sm: useMediaQuery(BREAKPOINTS[3][1], false)
+  };
+  if (typeof variant === "string") return variant;
+  for (const [key] of BREAKPOINTS) {
+    const v = variant[key];
+    if (matches[key] && v !== void 0) return v;
+  }
+  return variant.base;
+}
 const FLOATING_STYLE = {
   bottom: "calc(max(var(--app-nav-h, 0px), env(safe-area-inset-bottom, 0px)) + 0.5rem)",
   // Both insets on both sides: a logical side has no one physical inset to name, and
@@ -29,7 +50,9 @@ function BulkActionBar({
   count,
   onClear,
   children,
-  variant = "floating",
+  variant: variantProp = "floating",
+  open,
+  panel,
   labels: labelsProp,
   className,
   style,
@@ -40,17 +63,18 @@ function BulkActionBar({
   const labels = useKitLabels("bulkActionBar", DEFAULT_BULK_ACTION_BAR_LABELS, labelsProp);
   const { announce, regionProps } = useAnnounce();
   const barRef = useRef(null);
-  const shown = count > 0;
+  const variant = useResolvedVariant(variantProp);
+  const shown = open ?? count > 0;
   const [shownCount, setShownCount] = useState(count);
   const [leaving, setLeaving] = useState(false);
-  const [prevCount, setPrevCount] = useState(count);
-  if (count !== prevCount) {
-    setPrevCount(count);
+  const [prev, setPrev] = useState({ count, shown });
+  if (count !== prev.count || shown !== prev.shown) {
+    setPrev({ count, shown });
     if (shown) {
       setShownCount(count);
       setLeaving(false);
-    } else {
-      setLeaving(prevCount > 0 && !prefersReducedMotion());
+    } else if (prev.shown) {
+      setLeaving(!prefersReducedMotion());
     }
   }
   useEffect(() => {
@@ -62,8 +86,8 @@ function BulkActionBar({
   useEffect(() => {
     if (spoken.current === count) return;
     spoken.current = count;
-    announce(count > 0 ? labels.selected(count) : labels.cleared);
-  }, [count, labels, announce]);
+    announce(count > 0 || shown ? labels.selected(count) : labels.cleared);
+  }, [count, shown, labels, announce]);
   const active = useRef(null);
   useLayoutEffect(() => {
     rove(barRef.current, active);
@@ -90,48 +114,71 @@ function BulkActionBar({
   }
   const floating = variant === "floating";
   const clear = floating ? /* @__PURE__ */ jsx(IconButton, { size: "lg", onClick: onClear, "aria-label": labels.clear, children: /* @__PURE__ */ jsx(X, {}) }) : /* @__PURE__ */ jsx(Button, { type: "button", variant: "secondary", size: "sm", onClick: onClear, children: labels.clear });
+  const hasPanel = panel !== void 0 && panel !== null && panel !== false;
+  const surfaceClass = floating ? cn(
+    "fixed z-30 rounded-2xl border border-[var(--border)] bg-[var(--bg-surface)] shadow-lg",
+    shown ? "animate-sheet" : "animate-sheet-out"
+  ) : cn(
+    variant === "sticky" && "sticky top-0 z-20 border-b border-[var(--border)] bg-[color-mix(in_srgb,var(--brand)_8%,var(--bg-surface))] backdrop-blur",
+    shown ? "animate-overlay" : "animate-overlay-out"
+  );
+  const rowClass = cn("flex items-center", floating ? "gap-1 px-2 py-1" : "gap-2 px-3 py-2");
+  const surfaceStyle = floating ? { ...FLOATING_STYLE, ...style } : style;
+  const toolbar = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...hasPanel ? null : rest,
+      ref: barRef,
+      role: "toolbar",
+      "aria-label": labels.selected(shownCount),
+      "aria-orientation": "horizontal",
+      "data-bulk-action-bar": hasPanel ? void 0 : variant,
+      inert: !hasPanel && !shown || void 0,
+      onKeyDown: handleKeyDown,
+      onFocus: (e) => {
+        onFocus?.(e);
+        const hit = itemsOf(barRef.current).find((el) => el === e.target);
+        if (hit) {
+          active.current = hit;
+          rove(barRef.current, active);
+        }
+      },
+      style: hasPanel ? void 0 : surfaceStyle,
+      className: hasPanel ? rowClass : cn(rowClass, surfaceClass, className),
+      children: [
+        floating && clear,
+        /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-sm font-medium text-[var(--text-primary)]", children: labels.selected(shownCount) }),
+        /* @__PURE__ */ jsx("div", { className: "contents", children }),
+        !floating && clear
+      ]
+    }
+  );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("span", { ...regionProps }),
-    /* @__PURE__ */ jsxs(
+    hasPanel ? /* @__PURE__ */ jsxs(
       "div",
       {
         ...rest,
-        ref: barRef,
-        role: "toolbar",
-        "aria-label": labels.selected(shownCount),
-        "aria-orientation": "horizontal",
         "data-bulk-action-bar": variant,
         inert: !shown || void 0,
-        onKeyDown: handleKeyDown,
-        onFocus: (e) => {
-          onFocus?.(e);
-          const hit = itemsOf(barRef.current).find((el) => el === e.target);
-          if (hit) {
-            active.current = hit;
-            rove(barRef.current, active);
-          }
-        },
-        style: floating ? { ...FLOATING_STYLE, ...style } : style,
-        className: cn(
-          "flex items-center",
-          floating ? cn(
-            "fixed z-30 gap-1 rounded-2xl border border-[var(--border)] bg-[var(--bg-surface)] px-2 py-1 shadow-lg",
-            shown ? "animate-sheet" : "animate-sheet-out"
-          ) : cn(
-            "gap-2 px-3 py-2",
-            variant === "sticky" && "sticky top-0 z-20 border-b border-[var(--border)] bg-[color-mix(in_srgb,var(--brand)_8%,var(--bg-surface))] backdrop-blur",
-            shown ? "animate-overlay" : "animate-overlay-out"
-          ),
-          className
-        ),
+        style: surfaceStyle,
+        className: cn("flex flex-col", surfaceClass, className),
         children: [
-          floating && clear,
-          /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-sm font-medium text-[var(--text-primary)]", children: labels.selected(shownCount) }),
-          /* @__PURE__ */ jsx("div", { className: "contents", children }),
-          !floating && clear
+          toolbar,
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-bulk-action-bar-panel": "",
+              className: cn(
+                "border-t border-[var(--border)] px-3 py-3",
+                floating && "max-h-[60dvh] overflow-y-auto"
+              ),
+              children: panel
+            }
+          )
         ]
       }
-    )
+    ) : toolbar
   ] });
 }
 function itemsOf(bar) {