uhc-portal-components-react 0.2.21 → 0.2.23

package/CHANGELOG.md

@@ -2,6 +2,17 @@
 
 ## Unreleased
 
+## 0.2.23 - 2026-10-22
+
+- Keep the shared header usable in server-rendered and test hosts that do not
+  expose the optional browser `matchMedia` API.
+
+## 0.2.22 - 2026-10-22
+
+- Place the verified login identifier beneath the application name, keep the
+  current subject immediately before the account control and render the
+  account trigger as an icon only across Personal and Professional hosts.
+
 ## 0.2.21 - 2026-10-21
 
 - Move the card preview, profile recovery, elapsed-operation status and

package/dist/PortalHeader.d.ts

@@ -1,4 +1,5 @@
 import { type PortalBrand, type PortalAccountOption, type PortalLanguageOption, type PortalMenuAction, type PortalShellCopy } from './contracts.js';
+import { type PortalCurrentSubjectRegistration } from './PortalCurrentSubject.js';
 export type PortalHeaderProps = Readonly<{
     brand: PortalBrand;
     copy: PortalShellCopy;
@@ -11,6 +12,7 @@ export type PortalHeaderProps = Readonly<{
     menuActions?: readonly PortalMenuAction[];
     onSignOut?: () => void | Promise<void>;
     storageNamespace?: string;
+    currentSubject?: PortalCurrentSubjectRegistration;
 }>;
 /**
  * Shared account/preferences header.
@@ -18,5 +20,5 @@ export type PortalHeaderProps = Readonly<{
  * Authentication is deliberately supplied as data and callbacks. The
  * component never imports Firebase and never treats browser state as a role.
  */
-export declare function PortalHeader({ brand, copy, accountIdentifier, languageHref, languageOptions, guestActionHref, accountOptions, onSelectAccount, menuActions, onSignOut, storageNamespace, }: PortalHeaderProps): import("react").JSX.Element;
+export declare function PortalHeader({ brand, copy, accountIdentifier, languageHref, languageOptions, guestActionHref, accountOptions, onSelectAccount, menuActions, onSignOut, storageNamespace, currentSubject, }: PortalHeaderProps): import("react").JSX.Element;
 //# sourceMappingURL=PortalHeader.d.ts.map

package/dist/PortalHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PortalHeader.d.ts","sourceRoot":"","sources":["../src/PortalHeader.tsx"],"names":[],"mappings":"AAGA,OAAO,EAGL,KAAK,WAAW,EAChB,KAAK,mBAAmB,EACxB,KAAK,oBAAoB,EACzB,KAAK,gBAAgB,EACrB,KAAK,eAAe,EAGrB,MAAM,gBAAgB,CAAA;AASvB,MAAM,MAAM,iBAAiB,GAAG,QAAQ,CAAC;IACvC,KAAK,EAAE,WAAW,CAAA;IAClB,IAAI,EAAE,eAAe,CAAA;IACrB,iBAAiB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACjC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,eAAe,CAAC,EAAE,SAAS,oBAAoB,EAAE,CAAA;IACjD,eAAe,EAAE,MAAM,CAAA;IACvB,cAAc,CAAC,EAAE,SAAS,mBAAmB,EAAE,CAAA;IAC/C,eAAe,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IACtC,WAAW,CAAC,EAAE,SAAS,gBAAgB,EAAE,CAAA;IACzC,SAAS,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;IACtC,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B,CAAC,CAAA;AAEF;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,IAAI,EACJ,iBAAiB,EACjB,YAAY,EACZ,eAAoB,EACpB,eAAe,EACf,cAAmB,EACnB,eAAe,EACf,WAAgB,EAChB,SAAS,EACT,gBAA+B,GAChC,EAAE,iBAAiB,+BAoKnB"}
+{"version":3,"file":"PortalHeader.d.ts","sourceRoot":"","sources":["../src/PortalHeader.tsx"],"names":[],"mappings":"AAGA,OAAO,EAGL,KAAK,WAAW,EAChB,KAAK,mBAAmB,EACxB,KAAK,oBAAoB,EACzB,KAAK,gBAAgB,EACrB,KAAK,eAAe,EAGrB,MAAM,gBAAgB,CAAA;AAOvB,OAAO,EAGL,KAAK,gCAAgC,EACtC,MAAM,2BAA2B,CAAA;AAElC,MAAM,MAAM,iBAAiB,GAAG,QAAQ,CAAC;IACvC,KAAK,EAAE,WAAW,CAAA;IAClB,IAAI,EAAE,eAAe,CAAA;IACrB,iBAAiB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACjC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,eAAe,CAAC,EAAE,SAAS,oBAAoB,EAAE,CAAA;IACjD,eAAe,EAAE,MAAM,CAAA;IACvB,cAAc,CAAC,EAAE,SAAS,mBAAmB,EAAE,CAAA;IAC/C,eAAe,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IACtC,WAAW,CAAC,EAAE,SAAS,gBAAgB,EAAE,CAAA;IACzC,SAAS,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;IACtC,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,cAAc,CAAC,EAAE,gCAAgC,CAAA;CAClD,CAAC,CAAA;AAEF;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,IAAI,EACJ,iBAAiB,EACjB,YAAY,EACZ,eAAoB,EACpB,eAAe,EACf,cAAmB,EACnB,eAAe,EACf,WAAgB,EAChB,SAAS,EACT,gBAA+B,EAC/B,cAAc,GACf,EAAE,iBAAiB,+BA2KnB"}

package/dist/PortalHeader.js

@@ -4,14 +4,14 @@ import { useEffect, useRef, useState } from 'react';
 import { portalUiDensities, portalUiThemes, } from './contracts.js';
 import { resolvePortalUiDensity, resolvePortalUiTheme, resolveRenderedPortalTheme, } from './preferences.js';
 import { PortalBrandArtwork } from './PortalBrandArtwork.js';
-import { PortalCurrentSubjectSlot } from './PortalCurrentSubject.js';
+import { PortalCurrentSubjectControl, PortalCurrentSubjectSlot, } from './PortalCurrentSubject.js';
 /**
  * Shared account/preferences header.
  *
  * Authentication is deliberately supplied as data and callbacks. The
  * component never imports Firebase and never treats browser state as a role.
  */
-export function PortalHeader({ brand, copy, accountIdentifier, languageHref, languageOptions = [], guestActionHref, accountOptions = [], onSelectAccount, menuActions = [], onSignOut, storageNamespace = 'uhc-portal', }) {
+export function PortalHeader({ brand, copy, accountIdentifier, languageHref, languageOptions = [], guestActionHref, accountOptions = [], onSelectAccount, menuActions = [], onSignOut, storageNamespace = 'uhc-portal', currentSubject, }) {
     const [open, setOpen] = useState(false);
     const [density, setDensity] = useState('medium');
     const [theme, setTheme] = useState('system');
@@ -26,15 +26,17 @@ export function PortalHeader({ brand, copy, accountIdentifier, languageHref, lan
         document.documentElement.dataset.density = savedDensity;
     }, [densityKey, themeKey]);
     useEffect(() => {
-        const media = matchMedia('(prefers-color-scheme: dark)');
+        const media = typeof window.matchMedia === 'function'
+            ? window.matchMedia('(prefers-color-scheme: dark)')
+            : undefined;
         const apply = () => {
-            const rendered = resolveRenderedPortalTheme(theme, media.matches);
+            const rendered = resolveRenderedPortalTheme(theme, media?.matches === true);
             document.documentElement.dataset.theme = rendered;
             document.documentElement.style.colorScheme = rendered;
         };
         apply();
-        media.addEventListener('change', apply);
-        return () => media.removeEventListener('change', apply);
+        media?.addEventListener('change', apply);
+        return () => media?.removeEventListener('change', apply);
     }, [theme]);
     useEffect(() => {
         const closeOutside = (event) => {
@@ -61,7 +63,9 @@ export function PortalHeader({ brand, copy, accountIdentifier, languageHref, lan
         setTheme(value);
         localStorage.setItem(themeKey, value);
     }
-    return (_jsxs("header", { className: "uhcp-header", style: brand.variables, children: [_jsxs("a", { className: "uhcp-brand", href: brand.homeHref, "aria-label": copy.home, children: [_jsx(PortalBrandArtwork, { artwork: brand.mark, className: "uhcp-brand-mark" }), _jsxs("span", { children: [_jsx("strong", { children: brand.productName }), _jsx("small", { children: brand.organizationName })] })] }), _jsx(PortalCurrentSubjectSlot, {}), _jsxs("div", { className: "uhcp-account-menu", ref: ref, children: [_jsxs("button", { type: "button", className: "uhcp-trigger", onClick: () => setOpen((value) => !value), "aria-label": copy.accountAndPreferences, "aria-expanded": open, children: [_jsx(PersonIcon, {}), accountIdentifier && _jsx("span", { className: "uhcp-account-id", children: accountIdentifier }), _jsx("span", { "aria-hidden": "true", children: "\u2304" })] }), open && (_jsxs("section", { className: "uhcp-menu", "aria-label": copy.accountAndPreferences, children: [_jsxs("div", { className: "uhcp-account-state", children: [_jsx("strong", { children: copy.accountAndPreferences }), _jsx("small", { children: accountIdentifier || copy.notSignedIn })] }), accountOptions.length > 0 && (_jsx("div", { className: "uhcp-account-options", children: accountOptions.map((option) => (_jsxs("button", { type: "button", disabled: option.disabled, "aria-pressed": Boolean(option.selected), onClick: () => {
+    return (_jsxs("header", { className: "uhcp-header", style: brand.variables, children: [_jsxs("a", { className: "uhcp-brand", href: brand.homeHref, "aria-label": copy.home, children: [_jsx(PortalBrandArtwork, { artwork: brand.mark, className: "uhcp-brand-mark" }), _jsxs("span", { children: [_jsx("strong", { children: brand.productName }), _jsx("small", { className: accountIdentifier ? 'uhcp-brand-account' : undefined, children: accountIdentifier || brand.organizationName })] })] }), currentSubject
+                ? _jsx(PortalCurrentSubjectControl, { ...currentSubject })
+                : _jsx(PortalCurrentSubjectSlot, {}), _jsxs("div", { className: "uhcp-account-menu", ref: ref, children: [_jsx("button", { type: "button", className: "uhcp-trigger", onClick: () => setOpen((value) => !value), "aria-label": copy.accountAndPreferences, "aria-expanded": open, children: _jsx(PersonIcon, {}) }), open && (_jsxs("section", { className: "uhcp-menu", "aria-label": copy.accountAndPreferences, children: [_jsxs("div", { className: "uhcp-account-state", children: [_jsx("strong", { children: copy.accountAndPreferences }), _jsx("small", { children: accountIdentifier || copy.notSignedIn })] }), accountOptions.length > 0 && (_jsx("div", { className: "uhcp-account-options", children: accountOptions.map((option) => (_jsxs("button", { type: "button", disabled: option.disabled, "aria-pressed": Boolean(option.selected), onClick: () => {
                                         onSelectAccount?.(option.id);
                                         setOpen(false);
                                     }, children: [_jsx("span", { children: option.label }), option.description && _jsx("small", { children: option.description })] }, option.id))) })), _jsx(PreferenceGroup, { label: copy.appearance, children: portalUiThemes.map((value) => (_jsxs("button", { type: "button", "aria-pressed": theme === value, onClick: () => changeTheme(value), children: [_jsx("span", { "aria-hidden": "true", children: value === 'light' ? '☀' : value === 'dark' ? '☾' : '◫' }), copy.themes[value]] }, value))) }), _jsx(PreferenceGroup, { label: copy.textSize, children: portalUiDensities.map((value) => (_jsx("button", { type: "button", "aria-pressed": density === value, onClick: () => changeDensity(value), children: value === 'small' ? 'S' : value === 'medium' ? 'M' : 'L' }, value))) }), _jsxs("div", { className: "uhcp-menu-actions", children: [languageOptions.length > 0

package/dist/styles.css

@@ -51,7 +51,7 @@ html[data-theme='dark'] {
 }
 .uhcp-brand { align-items: center; color: var(--uhcp-text); display: flex; gap: .75rem; text-decoration: none; }
 .uhcp-brand > span:last-child { display: grid; line-height: 1.15; }
-.uhcp-brand small { color: var(--uhcp-muted); }
+.uhcp-brand small { color: var(--uhcp-muted); max-width: min(22rem, 42vw); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .uhcp-brand-mark {
   align-items: center;
   display: inline-flex;
@@ -80,9 +80,10 @@ html[data-theme='dark'] .uhcp-brand-artwork-dark { display: block !important; }
   color: var(--uhcp-text);
   cursor: pointer;
   display: flex;
-  gap: .5rem;
-  max-width: min(19rem, 48vw);
-  padding: .7rem .85rem;
+  justify-content: center;
+  min-height: 2.75rem;
+  min-width: 2.75rem;
+  padding: .7rem;
 }
 .uhcp-person-icon { height: 1.25rem; min-width: 1.25rem; width: 1.25rem; }
 .uhcp-account-id { font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@@ -709,7 +710,7 @@ html[data-theme='dark'] .uhcp-brand-artwork-dark { display: block !important; }
 .uhcp-floating-back { border-radius: 50%; bottom: 1.25rem; height: 3.5rem; left: 1.25rem; width: 3.5rem; }
 .uhcp-floating-assistant { border-radius: 999px; bottom: 1.25rem; gap: .5rem; padding: 1rem 1.25rem; right: 1.25rem; }
 @media (max-width: 620px) {
-  .uhcp-account-id, .uhcp-brand small { display: none; }
+  .uhcp-brand small { max-width: 48vw; }
   .uhcp-entry-hero { grid-template-columns: 1fr; }
   .uhcp-access-grid { grid-template-columns: 1fr; }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uhc-portal-components-react",
-  "version": "0.2.21",
+  "version": "0.2.23",
   "description": "Brand-neutral React portal screens, account preferences and protected-profile UI.",
   "license": "Apache-2.0",
   "type": "module",