@memberjunction/ng-ui-components 5.46.0 → 5.48.0

package/README.md

@@ -0,0 +1,276 @@
+# @memberjunction/ng-ui-components
+
+Reusable, **standalone** Angular UI components for MemberJunction applications — the house replacement for Kendo UI. Every component is token-driven (`--mj-*` design tokens from `_tokens.scss`), dark-mode safe by construction, and keyboard/ARIA accessible.
+
+**The rule for consuming apps: check here before building.** If a control, layout region, overlay, or pattern exists in this package, use it. Hand-rolling an app-prefixed equivalent (a bespoke button, chip, empty state, dialog…) creates divergence this package exists to eliminate. If what you need doesn't exist, propose it — generic components belong here; app-domain components belong in the app's shared package.
+
+## Installation & usage
+
+The package ships standalone components — no NgModule required (the one exception is `MJAccordionModule`, a convenience bundle). Import the symbols you use directly:
+
+```typescript
+import { MJButtonDirective, MJEmptyStateComponent, MJDialogComponent } from '@memberjunction/ng-ui-components';
+
+@Component({
+  standalone: true,
+  imports: [MJButtonDirective, MJEmptyStateComponent, MJDialogComponent],
+  ...
+})
+```
+
+Dependencies: `@angular/cdk` (overlays) and `angular-split` (splitter) come along as package dependencies; `@angular/common`, `@angular/core`, and `rxjs` are peers.
+
+## Styling model — read this once
+
+Components attach styles one of three ways, and one of them needs host cooperation:
+
+1. **Inline `styles` in the component** (most components) — nothing to do.
+2. **`styleUrls` compiled into the component** (`page-header`, `slide-panel`) — nothing to do.
+3. **Global stylesheets shipped as assets** — the form controls and overlay chrome (`button`, `dialog`, `dropdown`, `combobox`, `input`, `datepicker`, `splitter`, `accordion`, `window`, `chip`, `switch`/`progress`) ship their `.scss` to `dist` and expect the **host application** to import them globally.
+
+**If your app runs inside MJ Explorer (`explorer-app`), category 3 is already handled** — the shell imports all of them. A standalone host must add these to its global stylesheet:
+
+```scss
+@import '@memberjunction/ng-ui-components/dist/lib/button/button';
+@import '@memberjunction/ng-ui-components/dist/lib/dialog/dialog';
+@import '@memberjunction/ng-ui-components/dist/lib/dropdown/dropdown';
+@import '@memberjunction/ng-ui-components/dist/lib/combobox/combobox';
+@import '@memberjunction/ng-ui-components/dist/lib/input/input';
+@import '@memberjunction/ng-ui-components/dist/lib/input/input-switch-progress';
+@import '@memberjunction/ng-ui-components/dist/lib/input/chip';
+@import '@memberjunction/ng-ui-components/dist/lib/datepicker/datepicker';
+@import '@memberjunction/ng-ui-components/dist/lib/splitter/splitter';
+@import '@memberjunction/ng-ui-components/dist/lib/accordion/accordion';
+@import '@memberjunction/ng-ui-components/dist/lib/window/window';
+```
+
+All colors resolve through `--mj-*` semantic tokens, so light/dark theming requires zero component-level work.
+
+## Forms integration
+
+`mj-combobox`, `mj-dropdown`, `mj-datepicker`, `mj-numeric-input`, and `mj-switch` all implement `ControlValueAccessor` — they work with `[(ngModel)]` and reactive forms, including `setDisabledState`.
+
+---
+
+# Component catalog
+
+## Controls
+
+### `button[mjButton]` / `a[mjButton]` — MJButtonDirective
+Attribute directive that styles a **native** button or anchor. Variants: `primary | secondary (default) | outline | flat | danger | icon | success | warning`. Sizes: `sm | md (default) | lg`. Toggle mode via `[toggleable]` + `[(selected)]` (sets `aria-pressed`). Dev-mode warns when an `icon` button lacks an accessible name — pass `ariaLabel`.
+
+```html
+<button mjButton variant="primary" (click)="save()">Save</button>
+<button mjButton variant="icon" ariaLabel="Remove" (click)="remove()"><i class="fa-solid fa-xmark"></i></button>
+<button mjButton variant="flat" [toggleable]="true" [(selected)]="isActive">Toggle</button>
+```
+
+### `mj-combobox` — MJComboboxComponent
+Editable text-input combobox (CDK overlay): type-to-filter, keyboard nav, optional custom values (`[AllowCustom]`). Inputs: `Data`, `TextField`, `ValueField`, `ValuePrimitive`, `Filterable` (default true), `Placeholder`, `Disabled`. Outputs: `ValueChange`, `FilterChange`. Custom item template via `<ng-template #mjComboboxItem>`.
+
+```html
+<mj-combobox [Data]="categories" TextField="text" ValueField="value"
+             [(ngModel)]="selected" [ValuePrimitive]="true" [AllowCustom]="true" />
+```
+
+### `mj-dropdown` — MJDropdownComponent
+Non-editable select (CDK overlay) with optional in-panel filter (`[Filterable]`, default false) and `DefaultItem` clear option. Same `Data`/`TextField`/`ValueField`/`ValuePrimitive` contract as combobox. Custom item template via `<ng-template #mjDropdownItem>`.
+
+```html
+<mj-dropdown [Data]="items" TextField="name" ValueField="id"
+             [(ngModel)]="selectedId" [ValuePrimitive]="true" />
+```
+
+### `mj-datepicker` — MJDatepickerComponent
+Text input + calendar popup with `Min`/`Max` range disabling and typed-input parsing. Accepts `Date | string | null` through forms; emits `ValueChange: Date | null`. (Display format is currently fixed at `MM/dd/yyyy`.)
+
+```html
+<mj-datepicker [(ngModel)]="dueDate" [Min]="minDate" [Max]="maxDate" Placeholder="Select a date" />
+```
+
+### `mj-numeric-input` — MJNumericInputComponent
+Native number input that clamps to `Min`/`Max`, rounds to `Decimals`, and formats on blur. Value flows through forms only (no separate output).
+
+```html
+<mj-numeric-input [(ngModel)]="quantity" [Min]="0" [Max]="100" [Decimals]="2" />
+```
+
+### `mj-switch` — MJSwitchComponent
+Boolean toggle with `role="switch"`, optional `OnLabel`/`OffLabel`.
+
+```html
+<mj-switch [(ngModel)]="isEnabled" OnLabel="On" OffLabel="Off" />
+```
+
+### `[mjClickable]` — MJClickableDirective
+Retrofits a non-semantic element (card, tile, row) into an accessible control: sets `role`, `tabindex`, `aria-label`, and makes Enter/Space fire `(click)`. Pass the accessible name as the attribute value; `role` may be `button` (default) or `link`; `testId` emits `data-testid`.
+
+```html
+<div class="app-card" [mjClickable]="app.Name" (click)="open(app)">…</div>
+```
+
+### Calendar utilities
+`calendar/calendar-utils` exports pure helpers shared with the datepicker: `BuildCalendarWeeks`, `FormatDate`, `FormatDateTime`, `GetMonthYearLabel`, `WEEK_DAYS`, `MONTH_NAMES`.
+
+## Layout & page chrome
+
+The `page-*` family composes into the standard page skeleton:
+
+```html
+<mj-page-layout>
+  <mj-page-header Title="Agents" Icon="fa-solid fa-robot" Subtitle="Manage your agents">
+    <span meta><mj-stat-badge [Count]="filtered" [Total]="total" Label="agents" /></span>
+    <div actions><button mjButton variant="primary">New</button></div>
+    <div toolbar><mj-page-search [Value]="q" (ValueChange)="q = $event" /></div>
+  </mj-page-header>
+  <mj-page-body>
+    <!-- content; scrolling and the 24px gutter are handled for you -->
+  </mj-page-body>
+</mj-page-layout>
+```
+
+And the left-nav shell variant for multi-section pages:
+
+```html
+<mj-page-layout>
+  <mj-page-header Title="Admin" Icon="fa-solid fa-gear" />
+  <mj-page-body [Flex]="true" [Padding]="false" Direction="row">
+    <mj-left-nav [Sections]="sections" [ActiveId]="activeId" (ItemClicked)="go($event)" />
+    <mj-left-nav-content [Loading]="loading" [Error]="err">
+      <mj-page-header-interior Subtitle="Runtime state">
+        <div actions><button mjButton size="sm">+ Add</button></div>
+      </mj-page-header-interior>
+      <mj-page-body-interior><!-- sub-page content --></mj-page-body-interior>
+    </mj-left-nav-content>
+  </mj-page-body>
+</mj-page-layout>
+```
+
+### `mj-page-layout` — outer shell
+Flex-column, full-height, `overflow:hidden`, page background. No inputs.
+
+### `mj-page-header` — page chrome band
+Inputs: `Title`, `Icon`, `Subtitle`. Slots: `[meta]` (badges under the title), `[actions]` (right-aligned), `[toolbar]` (secondary row).
+
+### `mj-page-body` — scrolling body region
+Inputs: `Padding` (default true; false removes the gutter), `Flex` (default false), `Direction: 'row' | 'column'` (row stacks to column at ≤700px).
+
+### `mj-page-header-interior` / `mj-page-body-interior`
+The same pair for **sub-pages inside a left-nav shell** — card-like chrome, responsive padding. Header-interior adds `Role`/`AriaLabel` inputs and the same three slots.
+
+### `mj-left-nav` / `mj-left-nav-content` — MJLeftNavComponent
+Canonical left rail: sections, flat + tree items (badges, descriptions, disabled), off-canvas drawer at ≤700px. Inputs: `Sections: MJLeftNavSection[]`, `ActiveId`, `ExpandedIds`, `Width` (240), `MobileTitle`. Outputs: `ItemClicked`, `ItemToggled`. Slots: `[header]`, `[footer]`. Pair with `mj-left-nav-content`, which provides `Loading`/`Error` states and hides (not destroys) content while busy.
+
+### `mj-tab-nav` — MJTabNavComponent
+Data-driven tab strip. `Tabs: TabConfig[]` (`key`, `label`, `icon?`, `badge?`, `badgeVariant?: 'default'|'error'|'warning'|'success'`), `ActiveKey`, `(TabChange)` emits the key.
+
+### `mj-page-search` — MJPageSearchComponent
+Compact toolbar search input. `Placeholder`, `Value`, `Icon`; `(ValueChange)` on input.
+
+### `mj-slide-panel` — MjSlidePanelComponent
+Chrome-only slide-in panel from the right (resizable) or centered dialog (`Mode: 'slide' | 'dialog'`). Inputs include `Title`, `Visible`, `Resizable`, `MinWidthPx`, `MaxWidthRatio`, `WidthPx`, and a `CanClose` guard callback. Outputs: `Closed`, `WidthChanged`. Dialog-mode body projects into `[dialog-content]`.
+
+### Splitter
+Re-export of `angular-split` — use `<as-split>` / `<as-split-area>` directly:
+
+```html
+<as-split direction="horizontal">
+  <as-split-area [size]="30">Left</as-split-area>
+  <as-split-area [size]="70">Right</as-split-area>
+</as-split>
+```
+
+### `mj-accordion-panel` — MJAccordionPanelComponent (+ directives)
+Collapsible panel replacing Kendo panelbar/expansion panel. Inputs: `Title`, `Expanded` (+`ExpandedChange`), `Disabled`, `Variant: 'default'|'primary'|'secondary'`, `Size: 'sm'|'md'`, `Bare`, `FlushBody`, `Fill` (consume leftover height). Rich content via structural directives — `*mjAccordionTitle`, `*mjAccordionActions` (rendered outside the toggle button), and `*mjAccordionBody` (**lazy — instantiated on first expand, then kept alive**). Import `MJAccordionModule` to get the panel plus all three directives in one symbol.
+
+```html
+<mj-accordion-panel [Expanded]="open" (ExpandedChange)="open = $event">
+  <ng-template mjAccordionTitle><i class="fa-solid fa-code"></i> Template Editor</ng-template>
+  <ng-template mjAccordionBody><mj-code-editor /></ng-template>
+</mj-accordion-panel>
+```
+
+## Overlays
+
+### `mj-dialog` — MJDialogComponent
+Modal with backdrop, Esc/backdrop close (`Closeable`), body scroll lock. Inputs: `Visible`, `Title`, `Size: 'sm'|'md'|'lg'|'xl'|'auto'` (400/600/800/1000px), `Width`/`Height`/`MinWidth`, `Role: 'dialog'|'alertdialog'`. Output: `Close`. **`Visible` is not two-way** — set it false in your `(Close)` handler. Slots: default body, `mj-dialog-titlebar`, `mj-dialog-actions`.
+
+```html
+<mj-dialog [Visible]="show" Title="Confirm" Size="md" (Close)="show = false">
+  <p>Are you sure?</p>
+  <mj-dialog-actions>
+    <button mjButton variant="primary" (click)="confirm()">Yes</button>
+    <button mjButton (click)="show = false">No</button>
+  </mj-dialog-actions>
+</mj-dialog>
+```
+
+### `MJDialogService` — programmatic dialogs
+`Open(settings): MJDialogRef` with `{ title, content: string | Type, actions: [{ text, primary?, themeColor? }], width, … }`. `ref.Result` (Observable) emits the clicked action or `undefined` on dismiss; `ref.Content.instance` exposes a mounted content component; `ref.Close(result?)`.
+
+### `mj-confirm-dialog` — MJConfirmDialogComponent
+Purpose-built confirmation on top of `mj-dialog`. Inputs: `[(Visible)]` (two-way), `Type: 'default'|'danger'|'warning'|'info'`, `Title`, `Message`, `DetailMessage`, `ConfirmText`, `CancelText`, `Icon`, `Processing` (spinner + blocks dismissal for async work). Outputs: `Confirmed` (**stays open — you close it when the work finishes**), `Cancelled` (auto-closes). Confirm button is leftmost, per MJ dialog convention.
+
+### `MJConfirmService` — promise-based confirms
+`await Confirm({ message, title?, detail?, type?, … })` → `boolean`, and `ConfirmDelete(...)` which forces danger styling and "Delete". Mounts above `mj-window` (z-index 20000).
+
+```typescript
+private confirm = inject(MJConfirmService);
+if (await this.confirm.ConfirmDelete({ message: 'Delete this view?', detail: 'Cannot be undone.' })) { … }
+```
+
+### `mj-window` — MJWindowComponent
+Floating, **non-modal** panel (no backdrop): `Draggable`, `Resizable` (8 handles), `State: 'default' | 'maximized'` with geometry save/restore, `Top`/`Left`/`Width`/`Height`/`MinWidth`/`MinHeight`. Outputs: `Close`, `StateChange`, `Resize`. Methods: `SetPosition`, `SetSize`, `GetWindowElement`. Slots: default body, `mj-window-titlebar`, `mj-window-actions`. `Visible` is not two-way.
+
+### `mj-filter-popover` — MJFilterPopoverComponent
+Filter trigger button + CDK popover on desktop, docked bottom-sheet on mobile. Inputs: `Label`, `Icon`, `ActiveCount` (badge), `ShowClearAll`. Output: `ClearAllRequested`. Project your filter UI (dropdowns, chips) as content.
+
+## Patterns
+
+### `mj-empty-state` — MJEmptyStateComponent
+Centered placeholder for empty/error/no-results states. Inputs: `Variant: 'empty'|'no-results'|'success'|'warning'|'error'` (drives default icon + live-region role), `Size: 'compact'|'default'|'large'`, `Icon`, `Title`, `Message`, built-in CTA via `ActionText`/`ActionIcon`/`ActionVariant` with `(Action)`. Extra CTAs project into `[actions]`; richer body projects as default content.
+
+```html
+<mj-empty-state Variant="error" Title="Couldn't load permissions" [Message]="error"
+                ActionText="Try Again" ActionIcon="fa-solid fa-rotate-right" (Action)="loadData()" />
+```
+
+### `mj-stat-badge` — MJStatBadgeComponent
+Read-only stat pill, designed for the page-header `[meta]` slot. `Count`, `Total` (renders "X of Y label"), `Label`, `Icon`, `Variant: 'default'|'success'|'error'|'warning'|'running'|'info'`.
+
+```html
+<mj-stat-badge [Count]="filteredCount" [Total]="totalCount" Label="agents" />
+```
+
+### `mj-alert` — MJAlertComponent
+Persistent in-flow banner (not a toast). `Variant: 'info'|'success'|'warning'|'error'`, `Size: 'sm'|'md'`, `Title`, `Message`, `Dismissible` + `(Dismissed)`, action buttons via `[actions]` slot. Correct ARIA live role per variant automatically.
+
+### `mj-progress-bar` — MJProgressBarComponent
+`Value` (0–100, clamped) or `Type="infinite"` for indeterminate. Styles ship in the global `input-switch-progress` sheet (see Styling model).
+
+### `mj-view-toggle` — MJViewToggleComponent
+Segmented control for view modes. `Options: { key, icon?, label?, title? }[]`, `ActiveKey`, `(KeyChange)`. Provide `title` for icon-only options.
+
+### `mj-refresh-button` — MJRefreshButtonComponent
+Canonical refresh: `Loading` spins + disables, label auto-hides on mobile. `(Clicked)` suppressed while loading/disabled.
+
+### `mj-filter-chip` — MJFilterChipComponent
+Clickable filter pill: `Label`, `Icon`, `Count`, `Active` (+`aria-pressed`), `(Clicked)`.
+
+### `mj-filter-field` — MJFilterFieldComponent
+Labeled row (icon + uppercase label) wrapping any projected widget — the escape hatch inside filter UIs.
+
+### `mj-filter-panel` — MJFilterPanelComponent
+Config-driven filter stack: `Fields: FilterFieldConfig[]` with `type: 'text' | 'dropdown' | 'chips'` (chips support `multi`), `[(Values)]` as a plain record, `Reset` handling, plus projected custom `mj-filter-field`s.
+
+### `mj-applied-filters` — MJAppliedFiltersComponent
+"Filtered by …" removable chip row. Renders nothing when `Filters` is empty, so it's safe to place unconditionally. `(Remove)`, `(ClearAll)`.
+
+---
+
+## Contributing
+
+- **Generic components belong here; app-domain components don't.** If a component would make sense in any MJ app, add it to this package. If it encodes one app's domain (e.g. scoring bands), keep it in that app's shared package.
+- Components must be `standalone: true`, use `--mj-*` tokens for every color (no hardcoded hexes), support both themes, and be keyboard/ARIA accessible.
+- If a component ships a global `.scss`, register it in the `copy-assets` script in `package.json` **and** add it to the import list in this README and in `explorer-app`'s global styles.
+- Update the catalog above when adding or changing a component's public API.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@memberjunction/ng-ui-components",
-  "version": "5.46.0",
+  "version": "5.48.0",
   "description": "MemberJunction: Angular UI Components - reusable standalone components replacing Kendo UI dependencies.",
   "main": "./dist/public-api.js",
   "typings": "./dist/public-api.d.ts",
@@ -10,7 +10,7 @@
   "scripts": {
     "test": "vitest run",
     "build": "npm run clean && ngc && npm run copy-assets",
-    "copy-assets": "cpy src/lib/button/button.scss dist/lib/button --flat && cpy src/lib/dialog/dialog.scss dist/lib/dialog --flat && cpy src/lib/dropdown/dropdown.scss dist/lib/dropdown --flat && cpy src/lib/combobox/combobox.scss dist/lib/combobox --flat && cpy src/lib/input/input.scss dist/lib/input --flat && cpy src/lib/input/input-switch-progress.scss dist/lib/input --flat && cpy src/lib/datepicker/datepicker.scss dist/lib/datepicker --flat && cpy src/lib/splitter/splitter.scss dist/lib/splitter --flat && cpy src/lib/accordion/accordion.scss dist/lib/accordion --flat && cpy src/lib/window/window.scss dist/lib/window --flat && cpy src/lib/input/chip.scss dist/lib/input --flat && cpy src/lib/page-header/page-header.scss dist/lib/page-header --flat",
+    "copy-assets": "cpy src/lib/button/button.scss dist/lib/button --flat && cpy src/lib/dialog/dialog.scss dist/lib/dialog --flat && cpy src/lib/dropdown/dropdown.scss dist/lib/dropdown --flat && cpy src/lib/combobox/combobox.scss dist/lib/combobox --flat && cpy src/lib/input/input.scss dist/lib/input --flat && cpy src/lib/input/input-switch-progress.scss dist/lib/input --flat && cpy src/lib/datepicker/datepicker.scss dist/lib/datepicker --flat && cpy src/lib/splitter/splitter.scss dist/lib/splitter --flat && cpy src/lib/accordion/accordion.scss dist/lib/accordion --flat && cpy src/lib/window/window.scss dist/lib/window --flat && cpy src/lib/input/chip.scss dist/lib/input --flat",
     "clean": "rimraf dist",
     "test:watch": "vitest"
   },
@@ -23,7 +23,7 @@
   "devDependencies": {
     "@angular/compiler": "21.1.3",
     "@angular/compiler-cli": "21.1.3",
-    "@memberjunction/ng-test-utils": "5.46.0",
+    "@memberjunction/ng-test-utils": "5.48.0",
     "vitest": "^4.0.18"
   },
   "peerDependencies": {

package/dist/lib/page-header/page-header.scss

@@ -1,207 +0,0 @@
-:host {
-  display: block;
-  /* External consumers using <mj-page-header> outside <mj-page-layout> get a
-     24px bottom margin so the header has breathing room from whatever follows.
-     This preserves backward compatibility with the published v5.x contract. */
-  margin-bottom: var(--mj-space-6);
-}
-
-/* When nested inside <mj-page-layout>, the spacing between header and body is
-   owned by <mj-page-body>'s padding-top — so the header sits flush against the
-   body. This lets pages using <mj-page-body [Padding]="false"> (e.g. AI
-   Analytics flush sidebar) render truly flush against the header. */
-:host-context(mj-page-layout) {
-  margin-bottom: 0;
-}
-
-/* Slot-wrapper passthrough — any element a consumer projects with the `meta`,
-   `actions`, or `toolbar` attribute (regardless of class name) becomes a
-   transparent container so its children become direct flex children of the
-   page-header row and inherit the row's gap. Eliminates the per-page
-   `.{section}-header-meta { display: contents }` rules that pages had to
-   declare in their own CSS files. */
-:host ::ng-deep [meta],
-:host ::ng-deep [actions],
-:host ::ng-deep [toolbar] {
-  display: contents;
-}
-
-.mj-page-header {
-  display: flex;
-  flex-direction: column;
-  background: var(--mj-bg-surface);
-  /* Drop shadow for visual separation from the body below.
-     `position: relative; z-index: 1` lifts the header into its own stacking
-     context above <mj-page-body> (which has `position: relative` and would
-     otherwise paint over the downward shadow as a later flex sibling).
-     --mj-shadow-md is used instead of --mj-shadow-sm because the latter is
-     rgba(0,0,0,0.05) in light mode — too faint to read as separation. */
-  box-shadow: var(--mj-shadow-md);
-  position: relative;
-  z-index: 1;
-}
-
-.mj-page-header-row {
-  display: flex;
-  align-items: center;
-  gap: var(--mj-space-3);
-  padding: 0 var(--mj-space-6);
-}
-
-/* Primary row centers the actions cluster vertically against the identity
-   column. The identity column stacks title → subtitle → (optional meta);
-   centering keeps the actions visually balanced against the whole block
-   instead of pinning them to the title baseline. When meta badges are
-   present the actions drift down a touch — acceptable trade for the more
-   common no-meta case where flex-start looks top-heavy. */
-.mj-page-header-row--primary {
-  justify-content: space-between;
-  align-items: center;
-  gap: var(--mj-space-4);
-  padding-top: var(--mj-space-4);
-  padding-bottom: var(--mj-space-4);
-}
-
-.mj-page-header-row--toolbar {
-  flex-wrap: wrap;
-  /* Control bar (search · Filter · view) is right-aligned on desktop; the
-     mobile block below resets it to flex-start. */
-  justify-content: flex-end;
-  padding-top: 0;
-  padding-bottom: var(--mj-space-4);
-  border-top: 1px solid var(--mj-border-subtle);
-  margin-top: 0;
-  padding-top: var(--mj-space-3);
-}
-
-.mj-page-header-row--toolbar:empty {
-  display: none;
-  border-top: 0;
-  padding: 0;
-}
-
-.mj-page-header-titlebar {
-  display: flex;
-  align-items: center;
-  gap: var(--mj-space-3);
-  flex: 1 1 auto;
-  min-width: 0;
-}
-
-.mj-page-header-icon {
-  flex-shrink: 0;
-  width: 40px;
-  height: 40px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);
-  color: var(--mj-brand-primary);
-  border-radius: var(--mj-radius-md);
-  font-size: var(--mj-text-lg);
-}
-
-/* Identity column — title, subtitle, meta stacked vertically. */
-.mj-page-header-text {
-  min-width: 0;
-  flex: 1 1 auto;
-  display: flex;
-  flex-direction: column;
-}
-
-.mj-page-header-title {
-  margin: 0;
-  font-size: var(--mj-text-xl);
-  font-weight: var(--mj-font-semibold);
-  color: var(--mj-text-primary);
-  line-height: 1.25;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.mj-page-header-subtitle {
-  margin: var(--mj-space-1) 0 0;
-  font-size: var(--mj-text-sm);
-  color: var(--mj-text-secondary);
-  line-height: 1.4;
-}
-
-/* Meta lives in the identity column UNDER the subtitle — supporting info
-   for the identity, not a peer to the title. Wraps when there are many
-   badges. Matches the mj-page-header-interior pattern so both chrome
-   surfaces have one mental model. */
-.mj-page-header-meta {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--mj-space-2);
-  margin-top: var(--mj-space-2);
-}
-
-.mj-page-header-actions {
-  display: flex;
-  align-items: center;
-  gap: var(--mj-space-3);
-  flex-shrink: 0;
-}
-
-.mj-page-header-meta:empty,
-.mj-page-header-actions:empty {
-  display: none;
-}
-
-/* ── Mobile compaction (≤768px) ───────────────────────────────────────────
-   On a phone the header must not eat the viewport. We tighten padding, drop
-   the title a size, hide the decorative icon + subtitle (identity is carried
-   by the title alone), and let the actions cluster wrap tightly under the
-   title. The meta badge and toolbar stay — they're functional. */
-@media (max-width: 768px) {
-  .mj-page-header-row {
-    padding-left: var(--mj-space-4);
-    padding-right: var(--mj-space-4);
-    gap: var(--mj-space-2);
-  }
-  .mj-page-header-row--primary {
-    /* Stays a single row on mobile: title (truncates) + the primary CTA in
-       [actions]. Filters/search/view now live in the [toolbar] control bar, so
-       the primary row no longer needs to stack. */
-    gap: var(--mj-space-2);
-    padding-top: var(--mj-space-3);
-    padding-bottom: var(--mj-space-3);
-  }
-  /* Icon + subtitle are desktop niceties; reclaim their footprint on mobile. */
-  .mj-page-header-icon,
-  .mj-page-header-subtitle {
-    display: none;
-  }
-  .mj-page-header-title {
-    font-size: var(--mj-text-lg);
-    line-height: 1.2;
-  }
-  .mj-page-header-meta {
-    margin-top: var(--mj-space-1);
-  }
-  .mj-page-header-actions {
-    flex-wrap: wrap;
-    justify-content: flex-start;
-    gap: var(--mj-space-2);
-  }
-  /* Action buttons go icon-only on mobile — consumers wrap the text in
-     <span class="action-btn-label"> so it can hide without touching mjButton. */
-  .mj-page-header-actions ::ng-deep .action-btn-label {
-    display: none;
-  }
-  .mj-page-header-row--toolbar {
-    /* Left-aligned on mobile (search grows to fill the row). */
-    justify-content: flex-start;
-    padding-top: var(--mj-space-2);
-    padding-bottom: var(--mj-space-3);
-  }
-  /* In the control bar (search · Filter · view), let search grow so the Filter
-     button + view-toggle sit at the trailing edge on one line. */
-  .mj-page-header-row--toolbar ::ng-deep mj-page-search {
-    flex: 1;
-    min-width: 0;
-  }
-}