@twentyfirstmedia/ui-core 0.4.0 → 0.6.0

package/src/components/operations.tsx

@@ -38,7 +38,7 @@ export function ConnectionCard(p: ConnectionCardProps) {
       } as Record<string, Status>
     )[p.status] || "idle";
   return (
-    <div className="tf-conn">
+    <div style={p.style} className={cx("tf-conn", p.className)}>
       <span className="tf-conn-ico">{p.logo || <Icon name={p.icon || "link"} size={18} />}</span>
       <span className="tf-option-text">
         <b>{p.name}</b>
@@ -54,7 +54,7 @@ export function ConnectionBanner(p: ConnectionBannerProps) {
   const t = useStrings(OPERATIONS_STRINGS);
   if (!p.state || p.state === "online") return null;
   return (
-    <div className={cx("tf-connbanner", p.state)} role="status">
+    <div style={p.style} className={cx("tf-connbanner", p.state, p.className)} role="status">
       <StatusShape status={p.state === "offline" ? "danger" : "warn"} />
       <span>{p.text || (p.state === "offline" ? t.offline : t.connectionLost(p.seconds))}</span>
       {p.onRetry && (
@@ -69,7 +69,7 @@ export function ConnectionBanner(p: ConnectionBannerProps) {
 export function ServerCard(p: ServerCardProps) {
   const t = useStrings(OPERATIONS_STRINGS);
   return (
-    <div className="tf-server">
+    <div style={p.style} className={cx("tf-server", p.className)}>
       <div className="tf-server-top">
         <span className="tf-conn-ico">{p.logo || <Icon name="server" size={18} />}</span>
         <span className="tf-option-text">
@@ -104,7 +104,12 @@ export function ServerCard(p: ServerCardProps) {
 export function DeployPipeline(p: DeployPipelineProps) {
   const t = useStrings(OPERATIONS_STRINGS);
   return (
-    <ol className="tf-pipeline" tabIndex={0} aria-label={t.deployPipeline}>
+    <ol
+      style={p.style}
+      className={cx("tf-pipeline", p.className)}
+      tabIndex={0}
+      aria-label={t.deployPipeline}
+    >
       {(p.stages || []).map((s, i) => (
         <li key={i} className={cx("tf-stage", "st-" + (s.status || "idle"))}>
           <StatusShape status={s.status === "done" ? "ok" : s.status || "idle"} />
@@ -121,6 +126,8 @@ export function DnsRecordTable(p: DnsRecordTableProps) {
   const t = useStrings(OPERATIONS_STRINGS);
   return (
     <DataTable
+      style={p.style}
+      className={p.className}
       rows={p.records || []}
       rowKey="id"
       columnToggle={false}
@@ -221,7 +228,7 @@ export function DnsRecordTable(p: DnsRecordTableProps) {
 export function DomainList(p: DomainListProps) {
   const t = useStrings(OPERATIONS_STRINGS);
   return (
-    <div className="tf-domains">
+    <div style={p.style} className={cx("tf-domains", p.className)}>
       {(p.items || [])
         .slice()
         .sort((a, b) => (a.days == null ? 9999 : a.days) - (b.days == null ? 9999 : b.days))
@@ -262,7 +269,7 @@ export function MailAuthStatus(p: MailAuthStatusProps) {
   const box = React.useRef<HTMLDivElement>(null);
   useScrollFocus(box);
   return (
-    <div ref={box} className="tf-scroll-x">
+    <div style={p.style} ref={box} className={cx("tf-scroll-x", p.className)}>
       <table className="tf-table tf-mailauth">
         <thead>
           <tr>
@@ -310,6 +317,8 @@ export function LedgerTable(p: LedgerTableProps) {
   const cur = p.currency;
   return (
     <DataTable
+      style={p.style}
+      className={p.className}
       rows={p.rows || []}
       selectable={p.selectable}
       bulkActions={p.bulkActions}
@@ -427,7 +436,7 @@ export function PnLStatement(p: PnLStatementProps) {
   const box = React.useRef<HTMLDivElement>(null);
   useScrollFocus(box);
   return (
-    <div ref={box} className="tf-scroll-x">
+    <div style={p.style} ref={box} className={cx("tf-scroll-x", p.className)}>
       <table className="tf-table tf-pnl">
         <thead>
           <tr>
@@ -476,7 +485,7 @@ export function ReceiptSuggestion(p: ReceiptSuggestionProps) {
   const t = useStrings(OPERATIONS_STRINGS);
   const { formatPercent } = useFormat();
   return (
-    <div className="tf-receipt">
+    <div style={p.style} className={cx("tf-receipt", p.className)}>
       <div className="tf-receipt-src">
         <TintIcon icon="paperclip" tint="sky" />
         <span className="tf-option-text">

package/src/components/overlays.tsx

@@ -52,7 +52,11 @@ export function Popover(p: PopoverProps) {
       </span>
     );
   return (
-    <span ref={ref} className={cx("tf-pop-anchor", p.block && "block", p.className)}>
+    <span
+      style={p.style}
+      ref={ref}
+      className={cx("tf-pop-anchor", p.block && "block", p.className)}
+    >
       {trigger}
       {pr.mounted && (
         <div
@@ -108,7 +112,8 @@ export function Tooltip(p: TooltipProps) {
   const child = React.Children.only(p.children) as React.ReactElement<Record<string, unknown>>;
   return (
     <span
-      className="tf-tip-anchor"
+      style={p.style}
+      className={cx("tf-tip-anchor", p.className)}
       onPointerEnter={show}
       onPointerLeave={hide}
       onFocus={() => {

package/src/components/previews.tsx

@@ -15,7 +15,7 @@ export function EmailPreview(p: EmailPreviewProps) {
   const t = useStrings(PREVIEWS_STRINGS);
   const dev = useControlled<string>(p.device, "desktop", p.onDevice);
   return (
-    <div className="tf-mailprev">
+    <div style={p.style} className={cx("tf-mailprev", p.className)}>
       <div className="tf-mailprev-head">
         <div className="tf-mailprev-inbox">
           <Avatar name={p.fromName || p.from || ""} size={36} />
@@ -90,7 +90,7 @@ export function SearchAdPreview(p: SearchAdPreviewProps) {
       .map((x) => " › " + x)
       .join("");
   return (
-    <div className="tf-adprev">
+    <div style={p.style} className={cx("tf-adprev", p.className)}>
       <div
         className="tf-row"
         style={{

package/src/components/primitives.tsx

@@ -161,7 +161,7 @@ export function ToggleGroup(p: ToggleGroupProps) {
   return (
     <div
       ref={root}
-      className={cx("tf-togglegroup", p.size === "sm" && "sm", p.className)}
+      className={cx("tf-togglegroup", p.size === "sm" && "sm", p.block && "block", p.className)}
       style={p.style}
       role="group"
       aria-label={p.label}
@@ -191,7 +191,7 @@ export function ToggleGroup(p: ToggleGroupProps) {
             }
           >
             {o.icon && <Icon name={o.icon} />}
-            {o.label}
+            {o.label && <span className="tf-toggle-label">{o.label}</span>}
           </button>
         );
       })}

package/src/components/qr-code.tsx

@@ -0,0 +1,30 @@
+import { cx } from "../cx.js";
+import { useStrings } from "../context.js";
+import { qrMatrix, qrPath } from "../qr.js";
+import { ADMIN_STRINGS } from "../strings.js";
+import type { QrCodeProps } from "./types.js";
+
+/**
+ * A QR code drawn as SVG, encoded on the device (no service is called): for otpauth:// links in
+ * two-factor setup, sign-in on another device, sharing a link. Dark modules on the paper colour,
+ * so it scans in dark mode too.
+ */
+export function QrCode(p: QrCodeProps) {
+  const t = useStrings(ADMIN_STRINGS);
+  const quiet = p.quiet ?? 4;
+  const m = qrMatrix(p.value, p.level || "M");
+  const n = m.length + quiet * 2;
+  return (
+    <svg
+      className={cx("tf-qr", p.className)}
+      style={{ ...(p.size ? { width: p.size, height: p.size } : null), ...p.style }}
+      viewBox={`0 0 ${n} ${n}`}
+      role="img"
+      aria-label={p.label || t.qrCode}
+      shapeRendering="crispEdges"
+    >
+      <rect className="tf-qr-bg" width={n} height={n} />
+      <path d={qrPath(m, quiet)} fill="currentColor" />
+    </svg>
+  );
+}

package/src/components/real-estate.tsx

@@ -53,11 +53,13 @@ export function ListingCard(p: ListingCardProps) {
   const x = p.listing || p;
   return (
     <article
+      style={p.style}
       className={cx(
         "tf-listing",
         p.layout === "row" && "row",
         p.selected && "selected",
         x.status === "unread" && "unread",
+        p.className,
       )}
       onClick={
         p.onOpen &&
@@ -168,7 +170,7 @@ export function ResultsToolbar(p: ResultsToolbarProps) {
   const all = p.total > 0 && p.selected === p.total,
     some = (p.selected ?? 0) > 0 && !all;
   return (
-    <div className="tf-results">
+    <div style={p.style} className={cx("tf-results", p.className)}>
       {p.onSelectAll && (
         <label className="tf-check">
           {cbox({
@@ -248,7 +250,7 @@ export function SavedSearch(p: SavedSearchProps) {
   const t = useStrings(REAL_ESTATE_STRINGS);
   const { formatNumber } = useFormat();
   return (
-    <div className={cx("tf-saved", p.enabled === false && "off")}>
+    <div style={p.style} className={cx("tf-saved", p.enabled === false && "off", p.className)}>
       <div className="tf-saved-head">
         <TintIcon icon={p.icon || "search"} tint={p.tint || "sky"} size={36} />
         <div
@@ -318,7 +320,7 @@ export function ValuationCard(p: ValuationCardProps) {
             ? ["warn", t.mediumConfidence]
             : ["danger", t.lowConfidence];
   return (
-    <div className="tf-valuation">
+    <div style={p.style} className={cx("tf-valuation", p.className)}>
       <div className="tf-valuation-head">
         <span
           className="tf-menu-label"
@@ -403,7 +405,8 @@ export function EnergyClass(p: EnergyClassProps) {
     i = scale.indexOf(p.value);
   return (
     <div
-      className="tf-energy"
+      style={p.style}
+      className={cx("tf-energy", p.className)}
       role="img"
       aria-label={
         t.energyClass(p.value) + (p.kwh != null ? ", " + formatNumber(p.kwh) + " kWh/(m²·a)" : "")

package/src/components/rich-text-editor.tsx

@@ -487,7 +487,13 @@ export function RichTextEditor(p: RichTextEditorProps) {
         ? "⌘"
         : "Ctrl+";
   return (
-    <FormField label={p.label} hint={p.hint} error={p.error}>
+    <FormField
+      style={p.style}
+      className={p.className}
+      label={p.label}
+      hint={p.hint}
+      error={p.error}
+    >
       <div className={cx("tf-rte", over && "invalid")}>
         <div className="tf-rte-bar" role="toolbar" aria-label={strings.formatting}>
           {tools.map((t, i) => {

package/src/components/select-menu.tsx

@@ -103,7 +103,7 @@ export function SelectMenu(p: SelectMenuProps) {
             ref={btn}
             id={id}
             type="button"
-            className={cx("tf-input", "tf-selectmenu", !cur && "empty")}
+            className={cx("tf-input", "tf-selectmenu", p.size === "sm" && "sm", !cur && "empty")}
             role="combobox"
             aria-haspopup="listbox"
             aria-expanded={open}

package/src/components/shell.tsx

@@ -5,6 +5,10 @@ import { SHELL_STRINGS } from "../strings.js";
 import { Icon } from "../Icon.js";
 import { cx, reduced } from "../cx.js";
 import { Avatar } from "./foundation.js";
+import { Tooltip } from "./overlays.js";
+import { useControlled } from "../hooks.js";
+import { Sidebar, UserMenu } from "./navigation.js";
+import { WorkspaceSwitcher } from "./admin.js";
 import type {
   AppShellProps,
   DockItem,
@@ -17,10 +21,43 @@ import type {
   TopBarProps,
 } from "./types.js";
 
+/** True while the nav's labelled width does not fit the space the bar leaves it. */
+function useTight(nav: React.RefObject<HTMLDivElement | null>, key: string) {
+  const [tight, setTight] = React.useState(false);
+  const full = React.useRef(0);
+  React.useLayoutEffect(() => {
+    const el = nav.current,
+      bar = el?.parentElement;
+    if (!el || !bar || typeof ResizeObserver === "undefined") return;
+    const check = () => {
+      const cs = getComputedStyle(bar);
+      const kids = Array.from(bar.children) as HTMLElement[];
+      const others = kids.reduce((s, k) => (k === el ? s : s + k.offsetWidth), 0);
+      const gaps = (parseFloat(cs.columnGap) || 0) * (kids.length - 1);
+      const avail =
+        bar.clientWidth -
+        (parseFloat(cs.paddingLeft) || 0) -
+        (parseFloat(cs.paddingRight) || 0) -
+        others -
+        gaps;
+      if (!el.classList.contains("tight")) full.current = el.scrollWidth;
+      setTight(full.current > avail + 1);
+    };
+    const ro = new ResizeObserver(check);
+    ro.observe(bar);
+    check();
+    return () => ro.disconnect();
+  }, [nav, key]);
+  return tight;
+}
+
 export function TopBar(p: TopBarProps) {
   const t = useStrings(SHELL_STRINGS);
+  const navRef = React.useRef<HTMLDivElement>(null);
+  // labels give way to icons when the bar runs out of room, before anything scrolls
+  const tight = useTight(navRef, (p.items || []).map((it) => it.label).join("|"));
   return (
-    <nav className="tf-topbar" aria-label={t.mainNavigation}>
+    <nav style={p.style} className={cx("tf-topbar", p.className)} aria-label={t.mainNavigation}>
       {p.brand && (
         <span className="tf-brand">
           {p.brand}
@@ -28,7 +65,7 @@ export function TopBar(p: TopBarProps) {
           {p.tag && <span className="tf-brand-tag">{p.tag}</span>}
         </span>
       )}
-      <div className="tf-nav">
+      <div ref={navRef} className={cx("tf-nav", tight && "tight")}>
         {(p.items || []).map((it) => {
           const active = it.label === p.active;
           return (
@@ -56,6 +93,7 @@ export function TopBar(p: TopBarProps) {
           className="tf-user"
           aria-haspopup="menu"
           aria-expanded={p.userOpen ? "true" : "false"}
+          title={p.user.email ? `${p.user.name} · ${p.user.email}` : p.user.name}
           onClick={p.onUser}
         >
           <Avatar name={p.user.name} size={28} />
@@ -70,8 +108,8 @@ export function TopBar(p: TopBarProps) {
   );
 }
 
-function railBtn(it: RailItem, i: number) {
-  return (
+function railBtn(it: RailItem, i: number, expanded: boolean) {
+  const btn = (
     <button
       key={it.label}
       type="button"
@@ -80,22 +118,69 @@ function railBtn(it: RailItem, i: number) {
         animationDelay: `calc(${200 + i * 50}ms * var(--motion-time, 1))`,
       }}
       aria-label={it.count ? `${it.label}, ${it.count}` : it.label}
-      title={it.label}
       aria-current={it.active ? "page" : undefined}
       onClick={it.onClick}
     >
       <Icon name={it.icon} />
+      {expanded && (
+        <span className="tf-rail-label" aria-hidden>
+          {it.label}
+        </span>
+      )}
       {it.count ? <span className="tf-dotcount">{it.count}</span> : null}
     </button>
   );
+  return expanded ? (
+    btn
+  ) : (
+    <Tooltip key={it.label} label={it.label} side="right">
+      {btn}
+    </Tooltip>
+  );
 }
 
 export function SideRail(p: SideRailProps) {
   const t = useStrings(SHELL_STRINGS);
+  const [expanded, setExpanded] = useControlled(
+    p.expanded,
+    !!p.defaultExpanded,
+    p.onExpandedChange,
+  );
+  const toggleLabel = expanded ? t.collapseRail : t.expandRail;
+  const toggle = (
+    <button
+      type="button"
+      className="tf-rail-btn tf-rail-toggle"
+      aria-label={toggleLabel}
+      aria-expanded={expanded}
+      onClick={() => setExpanded(!expanded)}
+    >
+      <Icon name={expanded ? "chevronLeft" : "chevronRight"} />
+      {expanded && (
+        <span className="tf-rail-label" aria-hidden>
+          {toggleLabel}
+        </span>
+      )}
+    </button>
+  );
   return (
-    <aside className="tf-rail" aria-label={t.tools}>
-      <div className="tf-rail-group">{(p.top || []).map(railBtn)}</div>
-      <div className="tf-rail-group">{(p.bottom || []).map((it, i) => railBtn(it, i + 3))}</div>
+    <aside
+      style={p.style}
+      className={cx("tf-rail", expanded && "expanded", p.className)}
+      aria-label={p.label || t.tools}
+    >
+      <div className="tf-rail-group">{(p.top || []).map((it, i) => railBtn(it, i, expanded))}</div>
+      <div className="tf-rail-group">
+        {(p.bottom || []).map((it, i) => railBtn(it, i + 3, expanded))}
+        {p.toggle &&
+          (expanded ? (
+            toggle
+          ) : (
+            <Tooltip label={toggleLabel} side="right">
+              {toggle}
+            </Tooltip>
+          ))}
+      </div>
     </aside>
   );
 }
@@ -129,12 +214,72 @@ export function Dock(p: DockProps) {
  * UI floating over a full-bleed background (a map, a 3D scene, a video): four slots along the
  * edges, glass by default. The background stays interactive wherever no slot sits on it.
  */
+/** Measures how far the slots reach into the layout and publishes it as CSS variables. */
+function useSafeArea(root: React.RefObject<HTMLDivElement | null>) {
+  React.useLayoutEffect(() => {
+    const el = root.current;
+    if (!el || typeof ResizeObserver === "undefined") return;
+    const slot = (c: string) => el.querySelector<HTMLElement>(`:scope > .tf-floating-ui > .${c}`);
+    const measure = () => {
+      const r = el.getBoundingClientRect();
+      const top = slot("tf-floating-top"),
+        start = slot("tf-floating-start"),
+        end = slot("tf-floating-end"),
+        bottom = slot("tf-floating-bottom");
+      const px = (n: number) => `${Math.max(0, Math.round(n))}px`;
+      el.style.setProperty(
+        "--floating-safe-top",
+        px(top ? top.getBoundingClientRect().bottom - r.top : 0),
+      );
+      el.style.setProperty(
+        "--floating-safe-start",
+        px(start ? start.getBoundingClientRect().right - r.left : 0),
+      );
+      el.style.setProperty(
+        "--floating-safe-end",
+        px(end ? r.right - end.getBoundingClientRect().left : 0),
+      );
+      el.style.setProperty(
+        "--floating-safe-bottom",
+        // the bottom bar, or the end slot while it is a bottom sheet (phones)
+        px(
+          Math.max(
+            bottom ? r.bottom - bottom.getBoundingClientRect().top : 0,
+            end && getComputedStyle(end).position === "absolute"
+              ? r.bottom - end.getBoundingClientRect().top
+              : 0,
+          ),
+        ),
+      );
+    };
+    const ro = new ResizeObserver(measure);
+    ro.observe(el);
+    el.querySelectorAll(":scope > .tf-floating-ui > *").forEach((c) => ro.observe(c));
+    measure();
+    return () => ro.disconnect();
+  });
+}
+
 export function FloatingLayout(p: FloatingLayoutProps) {
+  const t = useStrings(SHELL_STRINGS);
   const surface = p.surface ?? "glass";
+  const root = React.useRef<HTMLDivElement>(null);
+  const [sheetFull, setSheetFull] = React.useState(false);
+  const sheet = p.end != null && p.endSheet !== false;
+  useSafeArea(root);
+  const size = (v: number | string | undefined) => (typeof v === "number" ? `${v}px` : v);
   return (
     <div
-      className={cx("tf-floating", p.className)}
-      style={{ minHeight: p.height ?? 640, ...p.style }}
+      ref={root}
+      className={cx("tf-floating", sheet && "has-sheet", sheetFull && "sheet-full", p.className)}
+      style={
+        {
+          minHeight: p.height ?? 640,
+          ...(p.startWidth != null ? { "--floating-start": size(p.startWidth) } : null),
+          ...(p.endWidth != null ? { "--floating-end": size(p.endWidth) } : null),
+          ...p.style,
+        } as React.CSSProperties
+      }
       role="region"
       aria-label={p.label}
       data-surface={surface}
@@ -143,7 +288,28 @@ export function FloatingLayout(p: FloatingLayoutProps) {
       <div className="tf-floating-ui">
         {p.top != null && <div className="tf-floating-top">{p.top}</div>}
         {p.start != null && <div className="tf-floating-start">{p.start}</div>}
-        {p.end != null && <div className="tf-floating-end">{p.end}</div>}
+        {(p.controls != null || p.attribution != null) && (
+          <div className="tf-floating-controls">
+            {p.controls}
+            {p.attribution != null && (
+              <div className="tf-floating-attribution">{p.attribution}</div>
+            )}
+          </div>
+        )}
+        {p.end != null && (
+          <div className="tf-floating-end">
+            {sheet && (
+              <button
+                type="button"
+                className="tf-floating-handle"
+                aria-expanded={sheetFull}
+                aria-label={sheetFull ? t.collapsePanel : t.expandPanel}
+                onClick={() => setSheetFull(!sheetFull)}
+              />
+            )}
+            {p.end}
+          </div>
+        )}
         {p.bottom != null && <div className="tf-floating-bottom">{p.bottom}</div>}
       </div>
       {p.children}
@@ -318,6 +484,66 @@ const DOCK = (): DockItem[] => [
 ];
 
 export function AppShell(p: AppShellProps) {
+  if (p.navigation === "sidebar") {
+    const groups = p.sidebarGroups || [
+      {
+        items: (p.nav || NAV()).map((n) => ({
+          id: n.label,
+          label: n.label,
+          icon: n.icon,
+          count: n.count,
+        })),
+      },
+    ];
+    const brand = (collapsed: boolean) =>
+      p.workspaces ? (
+        <WorkspaceSwitcher variant="frame" {...p.workspaces} compact={collapsed} />
+      ) : p.brand ? (
+        <span className={cx("tf-brand", collapsed && "tf-brand-mini")}>
+          {collapsed && typeof p.brand === "string" ? p.brand.slice(0, 1) : p.brand}
+          <span className="tf-brand-dot" aria-hidden />
+          {p.tag && !collapsed && <span className="tf-brand-tag">{p.tag}</span>}
+        </span>
+      ) : null;
+    return (
+      <div className={cx("tf-shell", "tf-shell-sidebar", p.className)} style={p.style}>
+        <Sidebar
+          variant="shell"
+          groups={groups}
+          current={p.active}
+          onPick={p.onNavigate}
+          header={({ collapsed }) => brand(collapsed)}
+          footer={({ collapsed }) =>
+            p.user ? (
+              <UserMenu
+                name={p.user.name}
+                email={p.user.email}
+                items={p.userMenu}
+                compact={collapsed}
+              />
+            ) : null
+          }
+          {...p.sidebar}
+        />
+        <div
+          className={cx("tf-sheet", !p.railTop && "tf-sheet-norail", !p.side && "tf-sheet-2")}
+          style={p.sheetStyle}
+        >
+          {p.railTop && <SideRail top={p.railTop} bottom={p.railBottom} />}
+          <main key={p.contentKey} className={cx("tf-main", p.dock !== false && "tf-main-dock")}>
+            {p.topExtra && <div className="tf-shell-tools">{p.topExtra}</div>}
+            {p.children}
+          </main>
+          {p.side || null}
+          {p.dock !== false && (
+            <div className="tf-dock-float">
+              <Dock items={p.dockItems || DOCK()} />
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
   return (
     <div className={cx("tf-shell", p.className)} style={p.style}>
       <TopBar

package/src/components/site.tsx

@@ -2,7 +2,7 @@
 import * as React from "react";
 import { useStrings } from "../context.js";
 import { SITE_STRINGS } from "../strings.js";
-import { useControlled } from "../hooks.js";
+import { useControlled, useId } from "../hooks.js";
 import { cx } from "../cx.js";
 import { Icon } from "../Icon.js";
 import { AgentMark } from "./chat.js";
@@ -15,7 +15,10 @@ export function ChatLauncher(p: ChatLauncherProps) {
   const t = useStrings(SITE_STRINGS);
   const open = useControlled(p.open, false, p.onOpenChange);
   return (
-    <div className={cx("tf-launch", open[0] && "open", p.inline && "inline")}>
+    <div
+      style={p.style}
+      className={cx("tf-launch", open[0] && "open", p.inline && "inline", p.className)}
+    >
       {open[0] && (
         <div className="tf-launch-panel" role="dialog" aria-label={p.title || t.assistant}>
           <div className="tf-launch-head">
@@ -61,6 +64,8 @@ export function ChatLauncher(p: ChatLauncherProps) {
 
 export function CookieConsent(p: CookieConsentProps) {
   const t = useStrings(SITE_STRINGS);
+  const auto = useId("cookie");
+  const id = p.id || auto;
   const more = React.useState(false),
     cats = React.useState(
       (p.categories || []).reduce<Record<string, boolean>>((a, c) => {
@@ -79,9 +84,12 @@ export function CookieConsent(p: CookieConsentProps) {
   }
   return (
     <div
-      className={cx("tf-cookie", p.inline && "inline")}
+      style={p.style}
+      id={id}
+      className={cx("tf-cookie", p.inline && "inline", p.className)}
       role="dialog"
       aria-label={p.title || t.privacySettings}
+      aria-describedby={`${id}-text`}
     >
       <div
         className="tf-row"
@@ -100,6 +108,7 @@ export function CookieConsent(p: CookieConsentProps) {
         >
           <b>{p.title || t.privacySettings}</b>
           <p
+            id={`${id}-text`}
             className="tf-card-desc"
             style={{
               margin: 0,
@@ -168,6 +177,7 @@ export function CookieConsent(p: CookieConsentProps) {
           {t.onlyNecessary}
         </Button>
         <Button
+          variant={p.equalChoice ? "secondary" : undefined}
           onClick={() => {
             done(true);
           }}
@@ -184,7 +194,11 @@ export function AnnouncementBar(p: AnnouncementBarProps) {
   const shut = React.useState(false);
   if (shut[0]) return null;
   return (
-    <div className={cx("tf-announce", "tf-t-" + (p.tint || "butter"))} role="status">
+    <div
+      style={p.style}
+      className={cx("tf-announce", "tf-t-" + (p.tint || "butter"), p.className)}
+      role="status"
+    >
       {p.icon !== false && <Icon name={p.icon || "sparkle"} size={15} />}
       <span>{p.children}</span>
       {p.action}

package/src/components/status.tsx

@@ -15,6 +15,7 @@ const STATUS = {
 export function StatusShape(p: StatusShapeProps) {
   return (
     <span
+      style={p.style}
       className={cx(
         "tf-shape",
         "tf-shape-" + (STATUS[p.status] || "ring"),
@@ -29,6 +30,7 @@ export function StatusShape(p: StatusShapeProps) {
 export function StatusIndicator(p: StatusIndicatorProps) {
   return (
     <span
+      style={p.style}
       className={cx("tf-status", p.size === "sm" && "sm", p.className)}
       role={p.label ? undefined : "img"}
       aria-label={p.label ? undefined : p.status}