@xenide-io/the-old-ui-theme 0.7.0 → 0.9.0

package/src/components/ui/disclosure.test.tsx

@@ -0,0 +1,39 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { Accordion } from "./Accordion";
+import { CollapsibleSection } from "./CollapsibleSection";
+
+describe("disclosure components", () => {
+  it("keeps closed accordion content out of keyboard navigation", () => {
+    render(
+      <Accordion
+        items={[{ id: "details", title: "Details", content: <a href="/more">More</a> }]}
+      />,
+    );
+
+    const trigger = screen.getByRole("button", { name: "Details" });
+    const content = document.getElementById(trigger.getAttribute("aria-controls")!);
+    expect(trigger).toHaveAttribute("aria-expanded", "false");
+    expect(content).toHaveAttribute("aria-hidden", "true");
+    expect(content).toHaveAttribute("inert");
+
+    fireEvent.click(trigger);
+    expect(trigger).toHaveAttribute("aria-expanded", "true");
+    expect(content).toHaveAttribute("aria-hidden", "false");
+    expect(content).not.toHaveAttribute("inert");
+  });
+
+  it("keeps closed collapsible content out of keyboard navigation", () => {
+    render(
+      <CollapsibleSection title="Tokens" defaultOpen={false}>
+        <button type="button">Copy token</button>
+      </CollapsibleSection>,
+    );
+
+    const trigger = screen.getByRole("button", { name: "Tokens" });
+    const content = document.getElementById(trigger.getAttribute("aria-controls")!);
+    expect(content).toHaveAttribute("aria-hidden", "true");
+    expect(content).toHaveAttribute("inert");
+  });
+});

package/src/components/ui/index.ts

@@ -143,10 +143,25 @@ export {
   type IconProps as IconProps,
   type IconName as IconName,
 } from "@/components/icons";
-export { Accordion } from "@/components/ui/Accordion";
-export { SegmentedControl } from "@/components/ui/SegmentedControl";
-export { CommandPalette } from "@/components/ui/CommandPalette";
-export { Calendar } from "@/components/ui/Calendar";
+export {
+  Accordion,
+  type AccordionItem,
+  type AccordionProps,
+} from "@/components/ui/Accordion";
+export {
+  SegmentedControl,
+  type SegmentedControlOption,
+  type SegmentedControlProps,
+} from "@/components/ui/SegmentedControl";
+export {
+  CommandPalette,
+  type CommandItem,
+  type CommandPaletteProps,
+} from "@/components/ui/CommandPalette";
+export {
+  Calendar,
+  type CalendarProps,
+} from "@/components/ui/Calendar";
 export {
   Tooltip,
   TooltipProvider,
@@ -155,7 +170,10 @@ export {
   type TooltipProviderProps,
   type TooltipSide,
 } from "@/components/ui/Tooltip";
-export { EmptyState } from "@/components/ui/EmptyState";
+export {
+  EmptyState,
+  type EmptyStateProps,
+} from "@/components/ui/EmptyState";
 export {
   FilterChips,
   type FilterChip,
@@ -181,7 +199,10 @@ export {
   type ComponentPropRow,
 } from "@/components/ui/ComponentDocs";
 export { ShowcaseWrapper } from "@/components/ui/ShowcaseWrapper";
-export { CollapsibleSection } from "@/components/ui/CollapsibleSection";
+export {
+  CollapsibleSection,
+  type CollapsibleSectionProps,
+} from "@/components/ui/CollapsibleSection";
 export {
   Display,
   SectionTitle,
@@ -197,6 +218,23 @@ export {
   Lead,
   Mono,
   Label,
+  type CaptionProps,
+  type DisplayProps,
+  type H1Props,
+  type H2Props,
+  type H3Props,
+  type H4Props,
+  type H5Props,
+  type LabelProps,
+  type LeadProps,
+  type MonoProps,
+  type OverlineProps,
+  type PProps,
+  type SectionTitleProps,
+  type SmallProps,
+  type TextBaseProps,
+  type TextTone,
+  type TextWeight,
 } from "@/components/ui/Typography";
 export {
   Avatar as Avatar,

package/src/components/ui/progress.test.tsx

@@ -0,0 +1,15 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { Progress } from "./Progress";
+
+describe("Progress", () => {
+  it("normalises invalid ranges and associates its visible label", () => {
+    render(<Progress label="Upload" value={200} max={0} showPercentage />);
+
+    const progressbar = screen.getByRole("progressbar", { name: "Upload" });
+    expect(progressbar).toHaveAttribute("aria-valuenow", "100");
+    expect(progressbar).toHaveAttribute("aria-valuemax", "100");
+    expect(progressbar).toHaveStyle({ width: "100%" });
+  });
+});

package/src/components/ui/typography.test.tsx

@@ -1,6 +1,7 @@
+import { createRef } from "react";
 import { render, screen } from "@testing-library/react";
 import { describe, expect, it } from "vitest";
-import { Display, Lead, H1, SectionTitle } from "@/components/ui/Typography";
+import { Display, Label, Lead, H1, SectionTitle } from "@/components/ui/Typography";
 
 describe("typography scale", () => {
   it("puts marketing headings on the fluid classes", () => {
@@ -24,4 +25,28 @@ describe("typography scale", () => {
     expect(heading).not.toHaveClass("ph-hero-title");
     expect(heading.className).toContain("font-bold");
   });
+
+  it("forwards native props and refs to its semantic elements", () => {
+    const headingRef = createRef<HTMLHeadingElement>();
+    const labelRef = createRef<HTMLLabelElement>();
+
+    render(
+      <>
+        <H1 ref={headingRef} id="reports-title" aria-describedby="reports-help">
+          Native report heading
+        </H1>
+        <Label ref={labelRef} htmlFor="report-name">
+          Report name
+        </Label>
+        <input id="report-name" />
+      </>,
+    );
+
+    const heading = screen.getByRole("heading", { name: "Native report heading" });
+    const label = screen.getByText("Report name");
+    expect(heading).toHaveAttribute("aria-describedby", "reports-help");
+    expect(label).toHaveAttribute("for", "report-name");
+    expect(headingRef.current).toBe(heading);
+    expect(labelRef.current).toBe(label);
+  });
 });

package/src/styles/suite-skin.css

@@ -224,7 +224,7 @@ html.dark .today-page-frame__cloud--2 {
 
 /* Today primary action — compact geometry, colour supplied by the app theme. */
 .today-primary-action {
-  color: var(--ph-ink);
+  color: var(--ph-text-primary);
   background: color-mix(in oklab, var(--ph-brand) 12%, var(--ph-surface));
   border: 1px solid color-mix(in oklab, var(--ph-brand) 28%, var(--ph-border));
   box-shadow: 0 1px 0 color-mix(in oklab, var(--ph-brand) 8%, transparent);
@@ -269,7 +269,7 @@ html.dark .today-page-frame__cloud--2 {
   color: var(--ph-violet, var(--ph-brand));
 }
 .today-primary-action--shellstack {
-  background: color-mix(in oklab, var(--ph-ink) 6%, var(--ph-surface));
+  background: color-mix(in oklab, var(--ph-text-primary) 6%, var(--ph-surface));
 }
 .today-primary-action--active .today-primary-action__icon {
   background: var(--ph-brand);
@@ -492,6 +492,12 @@ button:hover > .ph-card {
   transition-duration: 80ms;
 }
 
+/* Radix focuses the first menu item on open. The menu's highlighted state is
+   sufficient feedback, so do not retain an app-wide focus ring on that row. */
+#app-switcher-menu .ph-dropdown-item:focus-visible {
+  box-shadow: none;
+}
+
 /* ── App bar (mobile) / top bar (desktop) ───────────────────────────────
    Translucent, blurred, content scrolls beneath — like every native
    shell. Colour-mix keeps it on-theme in both modes. */

package/src/styles/themes.css

@@ -16,9 +16,9 @@
 
   --ph-text-primary: hsl(0 0% 5%);
   --ph-text-secondary: hsl(0 0% 25%);
-  --ph-text-tertiary: hsl(0 0% 42%);
+  --ph-text-tertiary: hsl(0 0% 40%);
 
-  --ph-accent: hsl(19deg 100% 48%);
+  --ph-accent: hsl(19deg 100% 39%);
   --ph-accent-hover: hsl(19deg 100% 42%);
   --ph-blue: hsl(228deg 100% 56%);
   --ph-violet: hsl(277deg 70% 48%);
@@ -29,6 +29,10 @@
   --ph-danger: hsl(9deg 70% 48%);
   --ph-info: hsl(217deg 90% 52%);
 
+  /* Legacy 3000-series tokens (--ph-text-3000, --ph-border-3000, …) are
+     superseded by the semantic --ph-text-*, --ph-border-*, and button tokens
+     above. Kept only so older custom themes keep working; do not use them in
+     new themes or components. */
   --ph-text-3000: #111111;
   --ph-primary-button-face: #ffffff;
   --ph-primary-button-border: #b17816;
@@ -68,7 +72,7 @@
   --ph-surface-raised: #ffffff;
   --ph-surface-overlay: #ffffff;
   --ph-border-subtle: hsl(75 14% 90%);
-  --ph-on-accent: #211108;
+  --ph-on-accent: #ffffff;
   --ph-on-violet: #ffffff;
   --ph-on-success: #071b10;
   --ph-on-warning: #1c1504;
@@ -83,54 +87,55 @@
 [data-theme="hedgehog-dark"] {
   color-scheme: dark;
 
-  --ph-canvas: hsl(220 12% 9%);
-  --ph-surface: hsl(220 10% 13%);
-  --ph-muted: hsl(220 9% 16%);
-  --ph-toolbar: hsl(220 8% 19%);
-  --ph-surface-inset: hsl(220 12% 10%);
-  --ph-surface-raised: hsl(220 9% 16%);
-  --ph-surface-overlay: hsl(220 8% 18%);
-  --ph-border: hsl(220 7% 24%);
-  --ph-border-subtle: hsl(220 8% 19%);
-  --ph-border-strong: hsl(220 6% 38%);
-
-  --ph-text-primary: hsl(0 0% 96%);
-  --ph-text-secondary: hsl(0 0% 78%);
-  --ph-text-tertiary: hsl(0 0% 58%);
-
-  --ph-accent: hsl(19deg 100% 52%);
-  --ph-accent-hover: hsl(19deg 100% 58%);
-  --ph-blue: hsl(228deg 100% 68%);
-  --ph-violet: hsl(277deg 65% 62%);
-  --ph-purple: #a89af0;
-
-  --ph-success: hsl(149deg 55% 48%);
-  --ph-warning: hsl(43deg 85% 52%);
-  --ph-danger: hsl(9deg 65% 55%);
-  --ph-info: hsl(217deg 85% 58%);
-  --ph-on-accent: hsl(220 14% 8%);
-  --ph-on-violet: hsl(220 14% 8%);
-  --ph-on-success: hsl(220 14% 8%);
-  --ph-on-warning: hsl(220 14% 8%);
-  --ph-on-danger: hsl(220 14% 8%);
-  --ph-on-info: hsl(220 14% 8%);
-  --ph-focus-ring: hsl(217deg 95% 72%);
-  --ph-selected-bg: hsl(19deg 70% 18%);
-  --ph-selected-text: hsl(19deg 100% 72%);
-  --ph-selected-border: hsl(19deg 90% 55%);
-
-  --ph-text-3000: hsl(0 0% 96%);
-  --ph-primary-button-face: hsl(220 10% 15%);
-  --ph-primary-button-border: #c4861f;
-  --ph-primary-button-border-hover: #eb9d2a;
-  --ph-primary-frame-bg: #eb9d2a;
-  --ph-secondary-button-bg: hsl(220 8% 20%);
-  --ph-secondary-frame-bg: hsl(220 7% 26%);
-  --ph-secondary-button-border: hsl(220 6% 32%);
-  --ph-secondary-button-border-hover: hsl(220 5% 42%);
+  /* Microsoft Copilot-style dark UI: neutral graphite surfaces, blue accent. */
+  --ph-canvas: hsl(240 7% 6%);
+  --ph-surface: hsl(240 6% 10%);
+  --ph-muted: hsl(240 5% 13%);
+  --ph-toolbar: hsl(240 5% 15%);
+  --ph-surface-inset: hsl(240 7% 7%);
+  --ph-surface-raised: hsl(240 5% 13%);
+  --ph-surface-overlay: hsl(240 5% 14%);
+  --ph-border: hsl(240 5% 21%);
+  --ph-border-subtle: hsl(240 5% 15%);
+  --ph-border-strong: hsl(240 4% 36%);
+
+  --ph-text-primary: hsl(240 8% 94%);
+  --ph-text-secondary: hsl(240 5% 78%);
+  --ph-text-tertiary: hsl(240 4% 58%);
+
+  --ph-accent: #0084e8;
+  --ph-accent-hover: #106ebe;
+  --ph-blue: #00bcf2;
+  --ph-violet: #b146c2;
+  --ph-purple: #b146c2;
 
-  --ph-border-3000: hsl(220 7% 20%);
-  --ph-accent-highlight-secondary: hsl(19deg 100% 52% / 14%);
+  --ph-success: #6bb700;
+  --ph-warning: #ffb900;
+  --ph-danger: #d13438;
+  --ph-info: #00bcf2;
+  --ph-on-accent: #111111;
+  --ph-on-violet: #ffffff;
+  --ph-on-success: #111114;
+  --ph-on-warning: #111114;
+  --ph-on-danger: #ffffff;
+  --ph-on-info: #111114;
+  --ph-focus-ring: #4ca3f5;
+  --ph-selected-bg: #0078d426;
+  --ph-selected-text: #4ca3f5;
+  --ph-selected-border: #0078d4;
+
+  --ph-text-3000: hsl(240 8% 94%);
+  --ph-primary-button-face: #0078d4;
+  --ph-primary-button-border: #0078d4;
+  --ph-primary-button-border-hover: #106ebe;
+  --ph-primary-frame-bg: #0078d4;
+  --ph-secondary-button-bg: hsl(240 5% 15%);
+  --ph-secondary-frame-bg: hsl(240 5% 18%);
+  --ph-secondary-button-border: hsl(240 4% 30%);
+  --ph-secondary-button-border-hover: hsl(240 4% 40%);
+
+  --ph-border-3000: hsl(240 5% 18%);
+  --ph-accent-highlight-secondary: #0078d424;
 }
 
 /* OneNote — brand purple #7719aa on lavender paper. */
@@ -144,7 +149,7 @@
   --ph-border-strong: #9b7bb8;
   --ph-text-primary: #2d1b3d;
   --ph-text-secondary: #5c4a6e;
-  --ph-text-tertiary: #857396;
+  --ph-text-tertiary: #716080;
   --ph-accent: #7719aa;
   --ph-accent-hover: #5f1488;
   --ph-blue: #185abd;
@@ -238,7 +243,7 @@
   --ph-border-strong: hsl(69 8% 65%);
   --ph-text-primary: hsl(0 0% 5%);
   --ph-text-secondary: hsl(0 0% 25%);
-  --ph-text-tertiary: hsl(0 0% 42%);
+  --ph-text-tertiary: hsl(0 0% 40%);
   --ph-accent: #1f6f43;
   --ph-accent-hover: #185c37;
   --ph-blue: #2f7f73;
@@ -282,7 +287,7 @@
   --ph-text-primary: #eef4e9;
   --ph-text-secondary: #c7d5c0;
   --ph-text-tertiary: #91a28a;
-  --ph-accent: #3f8f57;
+  --ph-accent: #419359;
   --ph-accent-hover: #55a96b;
   --ph-blue: #57b3a3;
   --ph-violet: #d4861a;
@@ -291,7 +296,7 @@
   --ph-warning: #e58a12;
   --ph-danger: #e06a49;
   --ph-info: #57b3a3;
-  --ph-on-accent: #eef4e9;
+  --ph-on-accent: #111111;
   --ph-on-violet: #151b17;
   --ph-on-success: #071b10;
   --ph-on-warning: #211606;
@@ -330,9 +335,9 @@
   --ph-border: #dfdad9;
   --ph-border-strong: #9893a5;
   --ph-text-primary: #575279;
-  --ph-text-secondary: #797593;
-  --ph-text-tertiary: #9893a5;
-  --ph-accent: #907aa9;
+  --ph-text-secondary: #6a6683;
+  --ph-text-tertiary: #6c667b;
+  --ph-accent: #7e649b;
   --ph-accent-hover: #7c6594;
   --ph-blue: #56949f;
   --ph-violet: #907aa9;
@@ -384,7 +389,7 @@
   --ph-border-strong: #524f67;
   --ph-text-primary: #e0def4;
   --ph-text-secondary: #908caa;
-  --ph-text-tertiary: #6e6a86;
+  --ph-text-tertiary: #a5a1b8;
   --ph-accent: #c4a7e7;
   --ph-accent-hover: #d4bcf0;
   --ph-blue: #9ccfd8;
@@ -437,7 +442,7 @@
   --ph-border-strong: #a8a8a3;
   --ph-text-primary: #242424;
   --ph-text-secondary: #4f4f4f;
-  --ph-text-tertiary: #6b6b6b;
+  --ph-text-tertiary: #666666;
   --ph-accent: #242424;
   --ph-accent-hover: #000000;
   --ph-blue: #437aff;
@@ -490,7 +495,7 @@
   --ph-border-strong: #686868;
   --ph-text-primary: #f2f2f2;
   --ph-text-secondary: #c4c4c4;
-  --ph-text-tertiary: #929292;
+  --ph-text-tertiary: #adadad;
   --ph-accent: #f2f2f2;
   --ph-accent-hover: #ffffff;
   --ph-blue: #7da3ff;
@@ -540,9 +545,9 @@
   --ph-border: #c4c8da;
   --ph-border-strong: #a8aecb;
   --ph-text-primary: #343b58;
-  --ph-text-secondary: #6172b0;
-  --ph-text-tertiary: #848cb5;
-  --ph-accent: #2e7de9;
+  --ph-text-secondary: #485890;
+  --ph-text-tertiary: #4f5883;
+  --ph-accent: #155fc5;
   --ph-accent-hover: #2368c6;
   --ph-blue: #2e7de9;
   --ph-violet: #9854f1;
@@ -595,7 +600,7 @@
   --ph-border-strong: #565f89;
   --ph-text-primary: #c0caf5;
   --ph-text-secondary: #a9b1d6;
-  --ph-text-tertiary: #565f89;
+  --ph-text-tertiary: #8d95b8;
   --ph-accent: #7aa2f7;
   --ph-accent-hover: #97b4f9;
   --ph-blue: #7aa2f7;
@@ -635,7 +640,7 @@
   --ph-data-7: #ff9e64;
 }
 
-/* Malibu — Nakama's GTA San Andreas-inspired sunset command-deck palette. */
+/* Malibu — Shelly's GTA San Andreas-inspired sunset command-deck palette. */
 [data-theme="malibu-light"] {
   color-scheme: light;
   --ph-canvas: #f6efeb;
@@ -650,8 +655,8 @@
   --ph-border-strong: #b38b98;
   --ph-text-primary: #30202d;
   --ph-text-secondary: #64495a;
-  --ph-text-tertiary: #927786;
-  --ph-accent: #d14f74;
+  --ph-text-tertiary: #745c6a;
+  --ph-accent: #c4335c;
   --ph-accent-hover: #b93a60;
   --ph-blue: #3b8793;
   --ph-violet: #7d3ca4;
@@ -744,6 +749,116 @@
   --ph-data-7: #f54b87;
 }
 
+/* Microsoft — Office Fluent neutrals with the signature brand blue. */
+[data-theme="microsoft-light"] {
+  color-scheme: light;
+  --ph-canvas: #faf9f8;
+  --ph-surface: #ffffff;
+  --ph-muted: #f3f2f1;
+  --ph-toolbar: #edebe9;
+  --ph-surface-inset: #f3f2f1;
+  --ph-surface-raised: #ffffff;
+  --ph-surface-overlay: #ffffff;
+  --ph-border: #e1dfdd;
+  --ph-border-subtle: #edebe9;
+  --ph-border-strong: #a19f9d;
+  --ph-text-primary: #201f1e;
+  --ph-text-secondary: #605e5c;
+  --ph-text-tertiary: #6b6967;
+  --ph-accent: #0072ca;
+  --ph-accent-hover: #106ebe;
+  --ph-blue: #0078d4;
+  --ph-violet: #8661c5;
+  --ph-purple: #8764b8;
+  --ph-success: #107c10;
+  --ph-warning: #ca5010;
+  --ph-danger: #a4262c;
+  --ph-info: #0078d4;
+  --ph-on-accent: #ffffff;
+  --ph-on-violet: #ffffff;
+  --ph-on-success: #ffffff;
+  --ph-on-warning: #ffffff;
+  --ph-on-danger: #ffffff;
+  --ph-on-info: #ffffff;
+  --ph-focus-ring: #0078d4;
+  --ph-selected-bg: #eff6fc;
+  --ph-selected-text: #005a9e;
+  --ph-selected-border: #6cb8f6;
+  --ph-text-3000: #ffffff;
+  --ph-primary-button-face: #0078d4;
+  --ph-primary-button-border: #0078d4;
+  --ph-primary-button-border-hover: #106ebe;
+  --ph-primary-frame-bg: #106ebe;
+  --ph-secondary-button-bg: #f3f2f1;
+  --ph-secondary-frame-bg: #edebe9;
+  --ph-secondary-button-border: #8a8886;
+  --ph-secondary-button-border-hover: #605e5c;
+  --ph-border-3000: #e1dfdd;
+  --ph-accent-highlight-secondary: rgba(0, 120, 212, 0.08);
+  --ph-data-1: #0078d4;
+  --ph-data-2: #8764b8;
+  --ph-data-3: #038387;
+  --ph-data-4: #ca5010;
+  --ph-data-5: #107c10;
+  --ph-data-6: #e3008c;
+  --ph-data-7: #4f6bed;
+  --ph-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23605e5c' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
+}
+
+[data-theme="microsoft-dark"] {
+  color-scheme: dark;
+  --ph-canvas: #1b1a19;
+  --ph-surface: #201f1e;
+  --ph-muted: #252423;
+  --ph-toolbar: #323130;
+  --ph-surface-inset: #1b1a19;
+  --ph-surface-raised: #252423;
+  --ph-surface-overlay: #3b3a39;
+  --ph-border: #3b3a39;
+  --ph-border-subtle: #292827;
+  --ph-border-strong: #605e5c;
+  --ph-text-primary: #f3f2f1;
+  --ph-text-secondary: #c8c6c4;
+  --ph-text-tertiary: #a19f9d;
+  --ph-accent: #2899f5;
+  --ph-accent-hover: #479ef5;
+  --ph-blue: #2899f5;
+  --ph-violet: #9a7fe8;
+  --ph-purple: #b4a0ff;
+  --ph-success: #54b054;
+  --ph-warning: #f7b355;
+  --ph-danger: #ff7171;
+  --ph-info: #2899f5;
+  --ph-on-accent: #1b1a19;
+  --ph-on-violet: #1b1a19;
+  --ph-on-success: #1b1a19;
+  --ph-on-warning: #1b1a19;
+  --ph-on-danger: #1b1a19;
+  --ph-on-info: #1b1a19;
+  --ph-focus-ring: #479ef5;
+  --ph-selected-bg: #203855;
+  --ph-selected-text: #6cb8f6;
+  --ph-selected-border: #2899f5;
+  --ph-text-3000: #1b1a19;
+  --ph-primary-button-face: #2899f5;
+  --ph-primary-button-border: #2899f5;
+  --ph-primary-button-border-hover: #479ef5;
+  --ph-primary-frame-bg: #479ef5;
+  --ph-secondary-button-bg: #252423;
+  --ph-secondary-frame-bg: #323130;
+  --ph-secondary-button-border: #605e5c;
+  --ph-secondary-button-border-hover: #c8c6c4;
+  --ph-border-3000: #323130;
+  --ph-accent-highlight-secondary: rgba(40, 153, 245, 0.14);
+  --ph-data-1: #2899f5;
+  --ph-data-2: #9a7fe8;
+  --ph-data-3: #45d1d6;
+  --ph-data-4: #f7b355;
+  --ph-data-5: #54b054;
+  --ph-data-6: #ff8ad4;
+  --ph-data-7: #7b9bff;
+}
+
 /* Semantic button contrast for dark palettes. */
 :is(
   [data-theme="hedgehog-dark"],
@@ -752,7 +867,8 @@
   [data-theme="rosepine-dark"],
   [data-theme="kraken-dark"],
   [data-theme="deepsea-dark"],
-  [data-theme="malibu-dark"]
+  [data-theme="malibu-dark"],
+  [data-theme="microsoft-dark"]
 ) {
   .ph-btn-signal {
     --ph-btn-face: color-mix(in oklab, var(--ph-accent) 62%, black);

package/src/suite/components/ai-message-blocknote.tsx

@@ -1,12 +1,16 @@
 "use client";
 
-import { useEffect } from "react";
+import { useEffect, useLayoutEffect } from "react";
 import { BlockNoteSchema, defaultBlockSpecs } from "@blocknote/core";
 import { BlockNoteViewRaw, useCreateBlockNote } from "@blocknote/react";
 import "@blocknote/react/style.css";
 
 import { useSuiteTheme } from "./theme-provider";
 
+// Parse the message before first paint so the editor never flashes empty.
+const useIsomorphicLayoutEffect =
+  typeof window !== "undefined" ? useLayoutEffect : useEffect;
+
 const assistantSchema = BlockNoteSchema.create({
   blockSpecs: {
     paragraph: defaultBlockSpecs.paragraph,
@@ -29,7 +33,7 @@ export default function SuiteAiBlockNoteMessage({
   const { resolvedTheme } = useSuiteTheme();
   const editor = useCreateBlockNote({ schema: assistantSchema });
 
-  useEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     try {
       const blocks = editor.tryParseMarkdownToBlocks(markdown);
       editor.replaceBlocks(
@@ -43,6 +47,13 @@ export default function SuiteAiBlockNoteMessage({
     }
   }, [editor, markdown]);
 
+  // BlockNote renders the body as a ProseMirror contenteditable (.tiptap);
+  // give that node an accessible name so axe's aria-input-field-name passes.
+  useEffect(() => {
+    const el = (editor as unknown as { domElement?: HTMLElement }).domElement;
+    el?.setAttribute("aria-label", "Assistant message");
+  }, [editor]);
+
   return (
     <BlockNoteViewRaw
       editor={editor}