@pcoi/components 0.1.0 → 0.1.2

package/src/ChatMessageList/ChatMessageList.tsx

@@ -23,7 +23,12 @@ export const ChatMessageList = React.forwardRef<
 
     const scrollToEnd = () => {
       requestAnimationFrame(() => {
-        el.scrollTop = el.scrollHeight;
+        const lastChild = el.lastElementChild;
+        if (lastChild) {
+          lastChild.scrollIntoView({ block: "nearest" });
+        } else {
+          el.scrollTop = el.scrollHeight;
+        }
       });
     };
 
@@ -39,7 +44,7 @@ export const ChatMessageList = React.forwardRef<
     .join(" ");
 
   return (
-    <div ref={ref} className={classes} {...rest}>
+    <div ref={ref} className={classes} role="log" aria-label="Conversation" {...rest}>
       <div ref={innerRef} className="pcoi-chat-message-list__inner">
         {children}
       </div>

package/src/Checkbox/Checkbox.css

@@ -3,13 +3,13 @@
 .pcoi-checkbox {
   display: flex;
   flex-direction: column;
-  gap: var(--pcoi-spacing-6);
+  gap: var(--pcoi-semantic-spacing-form-gap-compact);
 }
 
 .pcoi-checkbox__control {
   display: inline-flex;
   align-items: center;
-  gap: var(--pcoi-spacing-8);
+  gap: var(--pcoi-semantic-spacing-inline-sm);
   cursor: pointer;
 }
 
@@ -26,11 +26,11 @@
 }
 
 .pcoi-checkbox__box {
-  width: var(--pcoi-layout-component-control-box);
-  height: var(--pcoi-layout-component-control-box);
+  width: var(--pcoi-semantic-sizing-control-box-size);
+  height: var(--pcoi-semantic-sizing-control-box-size);
   flex-shrink: 0;
   border: 1px solid var(--pcoi-semantic-border-default);
-  border-radius: var(--pcoi-radius-sm);
+  border-radius: var(--pcoi-semantic-radius-input);
   background: var(--pcoi-semantic-bg-default);
   transition: background var(--pcoi-effect-transition-fast, 0.2s ease),
               border-color var(--pcoi-effect-transition-fast, 0.2s ease);
@@ -87,7 +87,7 @@
   font-size: var(--pcoi-semantic-type-label-size);
   color: var(--pcoi-semantic-text-error);
   margin: 0;
-  padding-left: calc(var(--pcoi-layout-component-control-box) + var(--pcoi-spacing-8));
+  padding-left: calc(var(--pcoi-semantic-sizing-control-box-size) + var(--pcoi-semantic-spacing-inline-sm));
 }
 
 /* ── Disabled state ── */

package/src/CitationMark/CitationMark.css

@@ -6,7 +6,7 @@
   justify-content: center;
   min-width: 32px;
   min-height: 32px;
-  padding: var(--pcoi-spacing-4) var(--pcoi-spacing-10);
+  padding: var(--pcoi-semantic-spacing-inline-2xs) var(--pcoi-semantic-spacing-chip-x);
   font-family: var(--pcoi-semantic-type-mono-font);
   font-size: var(--pcoi-semantic-type-body-compact-size);
   font-weight: var(--pcoi-semantic-type-label-weight);
@@ -14,7 +14,7 @@
   color: var(--pcoi-semantic-text-accent);
   background: var(--pcoi-semantic-surface-accent-dim);
   border: 1px solid var(--pcoi-semantic-border-accent-dim);
-  border-radius: var(--pcoi-radius-full);
+  border-radius: var(--pcoi-semantic-radius-badge);
   cursor: pointer;
   vertical-align: middle;
   transition:
@@ -26,7 +26,7 @@
 
 .pcoi-citation-mark:hover {
   color: var(--pcoi-semantic-text-accent-hover);
-  background: var(--pcoi-color-accent-dim);
+  background: var(--pcoi-semantic-surface-accent-dim);
   border-color: var(--pcoi-semantic-border-accent-subtle);
 }
 

package/src/CitedExcerpt/CitedExcerpt.css

@@ -3,12 +3,12 @@
 .pcoi-cited-excerpt {
   display: flex;
   flex-direction: column;
-  gap: var(--pcoi-spacing-6);
-  padding: var(--pcoi-spacing-12);
+  gap: var(--pcoi-semantic-spacing-form-gap-compact);
+  padding: var(--pcoi-semantic-spacing-input-y);
   background: var(--pcoi-semantic-surface-accent-dim);
-  border-left: var(--pcoi-layout-component-accent-border-w) solid
+  border-left: var(--pcoi-semantic-sizing-accent-border-width) solid
     var(--pcoi-semantic-border-accent-dim);
-  border-radius: var(--pcoi-radius-sm);
+  border-radius: var(--pcoi-semantic-radius-input);
 }
 
 .pcoi-cited-excerpt__source {
@@ -34,13 +34,13 @@
 .pcoi-cited-excerpt__source:focus-visible {
   outline: none;
   box-shadow: var(--pcoi-effect-shadow-focus-ring);
-  border-radius: var(--pcoi-radius-sm);
+  border-radius: var(--pcoi-semantic-radius-btn);
 }
 
 .pcoi-cited-excerpt__body {
   display: flex;
   align-items: baseline;
-  gap: var(--pcoi-spacing-6);
+  gap: var(--pcoi-semantic-spacing-form-gap-compact);
 }
 
 .pcoi-cited-excerpt__index {
@@ -63,7 +63,7 @@
 .pcoi-cited-excerpt__index:focus-visible {
   outline: none;
   box-shadow: var(--pcoi-effect-shadow-focus-ring);
-  border-radius: var(--pcoi-radius-sm);
+  border-radius: var(--pcoi-semantic-radius-btn);
 }
 
 .pcoi-cited-excerpt__text {

package/src/CitedExcerpt/CitedExcerpt.tsx

@@ -29,6 +29,7 @@ export const CitedExcerpt = React.forwardRef<HTMLDivElement, CitedExcerptProps>(
           type="button"
           className="pcoi-cited-excerpt__source"
           onClick={onSourceClick}
+          aria-label={`View source: ${sourceTitle}`}
         >
           {sourceTitle}
         </button>
@@ -37,6 +38,7 @@ export const CitedExcerpt = React.forwardRef<HTMLDivElement, CitedExcerptProps>(
             type="button"
             className="pcoi-cited-excerpt__index"
             onClick={onSourceClick}
+            aria-label={`Citation ${index}, view source: ${sourceTitle}`}
           >
             [{index}]
           </button>

package/src/ComparisonTable/ComparisonTable.css

@@ -1,9 +1,9 @@
 /* ComparisonTable — @pcoi/components */
 
 .pcoi-comparison {
-  max-width: var(--pcoi-layout-container-compare, 900px);
+  max-width: var(--pcoi-semantic-sizing-comparison-width, 900px);
   border: 1px solid var(--pcoi-semantic-border-card);
-  border-radius: var(--pcoi-radius-md);
+  border-radius: var(--pcoi-semantic-radius-card);
   overflow: hidden;
 }
 
@@ -19,7 +19,7 @@
   letter-spacing: var(--pcoi-semantic-type-label-letter-spacing);
   text-transform: uppercase;
   color: var(--pcoi-semantic-text-secondary);
-  padding: var(--pcoi-spacing-16) var(--pcoi-spacing-20);
+  padding: var(--pcoi-semantic-spacing-stack-md) var(--pcoi-semantic-spacing-card-gap);
   background: var(--pcoi-semantic-bg-alt);
   text-align: left;
 }
@@ -29,7 +29,7 @@
 }
 
 .pcoi-comparison__col {
-  padding: var(--pcoi-spacing-16) var(--pcoi-spacing-20);
+  padding: var(--pcoi-semantic-spacing-stack-md) var(--pcoi-semantic-spacing-card-gap);
   font-size: var(--pcoi-semantic-type-body-compact-size);
   color: var(--pcoi-semantic-text-secondary);
   line-height: var(--pcoi-semantic-type-body-compact-line-height);
@@ -53,7 +53,7 @@
 }
 
 /* ── Responsive ── */
-/* 768px = --pcoi-layout-breakpoint-mobile (CSS vars not supported in @media) */
+/* 768px = mobile breakpoint (CSS vars are not supported in @media) */
 @media (max-width: 768px) {
   .pcoi-comparison {
     overflow-x: auto;
@@ -61,6 +61,6 @@
   }
 
   .pcoi-comparison__table {
-    min-width: var(--pcoi-layout-container-compare-scroll);
+    min-width: var(--pcoi-semantic-sizing-comparison-scroll-width);
   }
 }

package/src/ComparisonTable/ComparisonTable.tsx

@@ -1,14 +1,20 @@
 import React from "react";
 
 export interface ComparisonRow {
+  /** Feature label shown in the first column */
   label: string;
+  /** Competitor's value for this feature */
   competitor: string;
+  /** PCOI's value for this feature */
   pcoi: string;
 }
 
 export interface ComparisonTableProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Column header for the competitor (default: "Typical SaaS AI") */
   competitorName?: string;
+  /** Column header for PCOI (default: "PCOI") */
   pcoiName?: string;
+  /** Feature comparison rows */
   rows: ComparisonRow[];
 }
 

package/src/ContactForm/ContactForm.css

@@ -3,17 +3,17 @@
 .pcoi-form {
   background: var(--pcoi-semantic-bg-surface);
   border: 1px solid var(--pcoi-semantic-border-default);
-  border-radius: var(--pcoi-radius-lg);
-  padding: var(--pcoi-spacing-40);
+  border-radius: var(--pcoi-semantic-radius-panel);
+  padding: var(--pcoi-semantic-spacing-form-padding);
   display: flex;
   flex-direction: column;
-  gap: var(--pcoi-spacing-20);
+  gap: var(--pcoi-semantic-spacing-form-gap);
 }
 
 .pcoi-form__row {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: var(--pcoi-spacing-20);
+  gap: var(--pcoi-semantic-spacing-form-gap);
 }
 
 .pcoi-form__full {
@@ -29,7 +29,7 @@
 /* ── Responsive ── */
 @media (max-width: 768px) {
   .pcoi-form {
-    padding: var(--pcoi-spacing-24);
+    padding: var(--pcoi-semantic-spacing-panel-padding);
   }
 
   .pcoi-form__row {

package/src/ContactForm/ContactForm.tsx

@@ -2,7 +2,8 @@ import React, { useState } from "react";
 import { Button } from "../Button";
 import { FormField } from "../FormField";
 
-export interface ContactFormProps extends React.FormHTMLAttributes<HTMLFormElement> {
+export interface ContactFormProps extends Omit<React.FormHTMLAttributes<HTMLFormElement>, "onSubmit"> {
+  /** Called with form field values when the form is submitted */
   onSubmit?: (data: Record<string, string>) => void;
 }
 

package/src/DataTable/DataTable.css

@@ -5,7 +5,7 @@
   overflow: hidden;
   overflow-x: auto;
   border: 1px solid var(--pcoi-semantic-border-card);
-  border-radius: var(--pcoi-radius-md);
+  border-radius: var(--pcoi-semantic-radius-card);
 }
 
 .pcoi-data-table__table {
@@ -21,7 +21,7 @@
   text-transform: uppercase;
   color: var(--pcoi-semantic-text-secondary);
   text-align: left;
-  padding: var(--pcoi-spacing-16) var(--pcoi-spacing-20);
+  padding: var(--pcoi-semantic-spacing-stack-md) var(--pcoi-semantic-spacing-card-gap);
   background: var(--pcoi-semantic-bg-alt);
 }
 
@@ -33,7 +33,7 @@
   color: var(--pcoi-semantic-text-secondary);
   line-height: var(--pcoi-semantic-type-body-compact-line-height);
   text-align: left;
-  padding: var(--pcoi-spacing-16) var(--pcoi-spacing-20);
+  padding: var(--pcoi-semantic-spacing-stack-md) var(--pcoi-semantic-spacing-card-gap);
 }
 
 .pcoi-data-table__td--center { text-align: center; }
@@ -52,5 +52,5 @@
   font-size: var(--pcoi-semantic-type-body-size);
   color: var(--pcoi-semantic-text-muted);
   text-align: center;
-  padding: var(--pcoi-spacing-40) var(--pcoi-spacing-16);
+  padding: var(--pcoi-semantic-spacing-component-gap) var(--pcoi-semantic-spacing-stack-md);
 }

package/src/DocumentOverlay/DocumentOverlay.css

@@ -13,7 +13,7 @@
 }
 
 .pcoi-doc-overlay__content p {
-  margin: 0 0 var(--pcoi-spacing-12);
+  margin: 0 0 var(--pcoi-semantic-spacing-panel-gap);
 }
 
 .pcoi-doc-overlay__content p:last-child {
@@ -23,12 +23,12 @@
 .pcoi-doc-overlay__highlight {
   display: flex;
   align-items: baseline;
-  gap: var(--pcoi-spacing-6);
+  gap: var(--pcoi-semantic-spacing-form-gap-compact);
   background: var(--pcoi-semantic-surface-highlight);
-  border-left: var(--pcoi-layout-component-accent-border-w) solid
+  border-left: var(--pcoi-semantic-sizing-accent-border-width) solid
     var(--pcoi-semantic-border-accent-subtle);
-  padding: var(--pcoi-spacing-8) var(--pcoi-spacing-12);
-  border-radius: var(--pcoi-radius-sm);
+  padding: var(--pcoi-semantic-spacing-inline-sm) var(--pcoi-semantic-spacing-input-y);
+  border-radius: var(--pcoi-semantic-radius-input);
   animation: pcoi-doc-highlight-fade 0.4s ease;
 }
 

package/src/DocumentOverlay/DocumentOverlay.test.tsx

@@ -0,0 +1,95 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { DocumentOverlay } from "./DocumentOverlay";
+
+describe("DocumentOverlay", () => {
+  it("does not render when closed", () => {
+    render(
+      <DocumentOverlay open={false} onClose={vi.fn()} title="Source doc">
+        <p>Body content</p>
+      </DocumentOverlay>
+    );
+
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+  });
+
+  it("renders title, body, and source label when open", () => {
+    render(
+      <DocumentOverlay
+        open
+        onClose={vi.fn()}
+        title="Source doc"
+        sourceLabel="Internal Research"
+      >
+        <p>Body content</p>
+      </DocumentOverlay>
+    );
+
+    expect(screen.getByRole("dialog")).toBeInTheDocument();
+    expect(screen.getByText("Source doc")).toBeInTheDocument();
+    expect(screen.getByText("Body content")).toBeInTheDocument();
+    expect(screen.getByText("Internal Research")).toBeInTheDocument();
+  });
+
+  it("calls onClose from close button, Escape key, and backdrop click", () => {
+    const onClose = vi.fn();
+
+    render(
+      <DocumentOverlay open onClose={onClose} title="Source doc">
+        <p>Body content</p>
+      </DocumentOverlay>
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Close modal" }));
+    fireEvent.keyDown(document, { key: "Escape" });
+
+    const backdrop = document.querySelector(".pcoi-modal");
+    if (!backdrop) throw new Error("Expected modal backdrop to exist");
+    fireEvent.click(backdrop);
+
+    expect(onClose).toHaveBeenCalledTimes(3);
+  });
+
+  it("highlights and indexes cited content when highlight props are provided", () => {
+    // JSDOM may not provide CSS.escape by default.
+    if (!(globalThis.CSS && typeof globalThis.CSS.escape === "function")) {
+      const existing = globalThis.CSS ?? ({} as CSS);
+      globalThis.CSS = {
+        ...existing,
+        escape: (value: string) => value,
+      } as CSS;
+    }
+
+    const raf = vi
+      .spyOn(window, "requestAnimationFrame")
+      .mockImplementation((cb: FrameRequestCallback) => {
+        cb(0);
+        return 1;
+      });
+
+    const scrollIntoView = vi.fn();
+    Object.defineProperty(window.HTMLElement.prototype, "scrollIntoView", {
+      configurable: true,
+      value: scrollIntoView,
+    });
+
+    render(
+      <DocumentOverlay
+        open
+        onClose={vi.fn()}
+        title="Source doc"
+        highlightId="cite-1"
+        highlightIndex={2}
+      >
+        <p id="cite-1">Cited paragraph</p>
+      </DocumentOverlay>
+    );
+
+    const cited = screen.getByText("Cited paragraph");
+    expect(cited).toHaveClass("pcoi-doc-overlay__highlight");
+    expect(cited).toHaveAttribute("data-highlight-index", "[2]");
+    expect(scrollIntoView).toHaveBeenCalled();
+
+    raf.mockRestore();
+  });
+});

package/src/DocumentOverlay/DocumentOverlay.tsx

@@ -65,6 +65,7 @@ export const DocumentOverlay = React.forwardRef<
     return React.createElement(
       Modal,
       {
+        ref,
         open,
         onClose,
         title,

package/src/Footer/Footer.css

@@ -2,11 +2,11 @@
 
 .pcoi-footer {
   border-top: 1px solid var(--pcoi-semantic-border-default);
-  padding: var(--pcoi-spacing-60) var(--pcoi-spacing-24) var(--pcoi-spacing-40);
+  padding: var(--pcoi-semantic-spacing-section-y-md) var(--pcoi-semantic-spacing-btn-x) var(--pcoi-semantic-spacing-component-gap);
 }
 
 .pcoi-footer__inner {
-  max-width: var(--pcoi-layout-container-max);
+  max-width: var(--pcoi-semantic-sizing-container-max);
   margin: 0 auto;
   display: flex;
   justify-content: space-between;
@@ -15,7 +15,7 @@
 
 /* ── Brand (LogoMark overrides) ── */
 .pcoi-footer__logo {
-  margin-bottom: var(--pcoi-spacing-8);
+  margin-bottom: var(--pcoi-semantic-spacing-stack-sm);
 }
 
 .pcoi-footer__tagline {
@@ -30,7 +30,7 @@
 .pcoi-footer__links {
   display: flex;
   flex-wrap: wrap;
-  gap: var(--pcoi-spacing-28);
+  gap: var(--pcoi-semantic-spacing-inline-lg);
 }
 
 .pcoi-footer__links a {
@@ -46,9 +46,9 @@
 
 /* ── Bottom ── */
 .pcoi-footer__bottom {
-  max-width: var(--pcoi-layout-container-max);
-  margin: var(--pcoi-spacing-40) auto 0;
-  padding-top: var(--pcoi-spacing-24);
+  max-width: var(--pcoi-semantic-sizing-container-max);
+  margin: var(--pcoi-semantic-spacing-component-gap) auto 0;
+  padding-top: var(--pcoi-semantic-spacing-panel-padding);
   border-top: 1px solid var(--pcoi-semantic-border-default);
 }
 
@@ -62,11 +62,11 @@
 @media (max-width: 768px) {
   .pcoi-footer__inner {
     flex-direction: column;
-    gap: var(--pcoi-spacing-32);
+    gap: var(--pcoi-semantic-spacing-stack-lg);
   }
 
   .pcoi-footer__links {
     flex-direction: column;
-    gap: var(--pcoi-spacing-14);
+    gap: var(--pcoi-semantic-spacing-stack-compact);
   }
 }

package/src/Footer/Footer.tsx

@@ -6,8 +6,11 @@ import type { LinkItem } from "../types";
 export type FooterLink = LinkItem;
 
 export interface FooterProps extends React.HTMLAttributes<HTMLElement> {
+  /** Navigation links rendered in the footer */
   links?: LinkItem[];
+  /** Brand tagline displayed alongside the logo */
   tagline?: string;
+  /** Copyright notice shown at the bottom */
   copyright?: string;
 }
 
@@ -39,11 +42,11 @@ export const Footer = React.forwardRef<HTMLElement, FooterProps>(
           <LogoMark className="pcoi-footer__logo" />
           <p className="pcoi-footer__tagline">{tagline}</p>
         </div>
-        <div className="pcoi-footer__links">
+        <nav className="pcoi-footer__links" aria-label="Footer">
           {links.map((link) => (
             <a key={link.href} href={link.href} data-track-id={link.trackingId}>{link.label}</a>
           ))}
-        </div>
+        </nav>
       </div>
       <div className="pcoi-footer__bottom">
         <p>{copyright}</p>

package/src/FormField/FormField.css

@@ -3,7 +3,7 @@
 .pcoi-field {
   display: flex;
   flex-direction: column;
-  gap: var(--pcoi-spacing-6);
+  gap: var(--pcoi-semantic-spacing-form-gap-compact);
 }
 
 .pcoi-field__label {
@@ -16,7 +16,7 @@
 
 .pcoi-field__required {
   color: var(--pcoi-semantic-text-error);
-  margin-left: var(--pcoi-spacing-4);
+  margin-left: var(--pcoi-semantic-spacing-inline-2xs);
 }
 
 .pcoi-field__input,
@@ -26,8 +26,8 @@
   color: var(--pcoi-semantic-text-primary);
   background: var(--pcoi-semantic-bg-default);
   border: 1px solid var(--pcoi-semantic-border-default);
-  border-radius: var(--pcoi-radius-sm);
-  padding: var(--pcoi-spacing-12) var(--pcoi-spacing-14);
+  border-radius: var(--pcoi-semantic-radius-input);
+  padding: var(--pcoi-semantic-spacing-input-y) var(--pcoi-semantic-spacing-input-x-compact);
   transition: border-color var(--pcoi-effect-transition-fast, 0.2s ease),
               box-shadow var(--pcoi-effect-transition-fast, 0.2s ease);
 }

package/src/FormField/FormField.figma.tsx

@@ -0,0 +1,28 @@
+import figma from "@figma/code-connect";
+import { FormField } from "./FormField";
+
+/**
+ * Code Connect: FormField
+ * Maps Figma form field properties to React FormField props
+ */
+figma.connect(FormField, "https://www.figma.com/file/PCOIxDesignSystem/PCOI-Design-System?node-id=103-1", {
+  props: {
+    label: figma.string("Label"),
+    placeholder: figma.string("Placeholder"),
+    multiline: figma.boolean("Multiline"),
+    required: figma.boolean("Required"),
+    disabled: figma.boolean("Disabled"),
+    hasError: figma.boolean("Error"),
+  },
+  example: ({ label, placeholder, multiline, required, disabled, hasError }) => (
+    <FormField
+      name="field"
+      label={label}
+      placeholder={placeholder}
+      multiline={multiline}
+      required={required}
+      disabled={disabled}
+      error={hasError ? "This field is required." : undefined}
+    />
+  ),
+});

package/src/HowStep/HowStep.css

@@ -3,8 +3,8 @@
 .pcoi-how-step {
   display: flex;
   align-items: flex-start;
-  gap: var(--pcoi-spacing-32);
-  padding: var(--pcoi-spacing-40) 0;
+  gap: var(--pcoi-semantic-spacing-stack-lg);
+  padding: var(--pcoi-semantic-spacing-component-gap) 0;
   border-bottom: 1px solid var(--pcoi-semantic-border-default);
 }
 
@@ -16,7 +16,7 @@
   flex-shrink: 0;
   width: var(--pcoi-semantic-sizing-step-number);
   height: var(--pcoi-semantic-sizing-step-number);
-  border-radius: var(--pcoi-radius-full);
+  border-radius: var(--pcoi-semantic-radius-avatar);
   background: var(--pcoi-semantic-surface-accent-dim);
   border: 1px solid var(--pcoi-semantic-border-accent-dim);
   display: flex;
@@ -37,7 +37,7 @@
   font-size: var(--pcoi-semantic-type-step-title-size);
   font-weight: var(--pcoi-semantic-type-emphasis-weight);
   color: var(--pcoi-semantic-text-primary);
-  margin: 0 0 var(--pcoi-spacing-8) 0;
+  margin: 0 0 var(--pcoi-semantic-spacing-stack-sm) 0;
 }
 
 .pcoi-how-step__desc {

package/src/HowStep/HowStep.figma.tsx

@@ -0,0 +1,23 @@
+import figma from "@figma/code-connect";
+import { HowStep } from "./HowStep";
+
+/**
+ * Code Connect: HowStep
+ * Maps Figma step properties to React HowStep props
+ */
+figma.connect(HowStep, "https://www.figma.com/file/PCOIxDesignSystem/PCOI-Design-System?node-id=107-1", {
+  props: {
+    number: figma.string("Step Number"),
+    title: figma.string("Title"),
+    description: figma.string("Description"),
+    isLast: figma.boolean("Last Step"),
+  },
+  example: ({ number, title, description, isLast }) => (
+    <HowStep
+      number={number}
+      title={title}
+      description={description}
+      isLast={isLast}
+    />
+  ),
+});

package/src/LogoMark/LogoMark.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 
-export interface LogoMarkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
-}
+export type LogoMarkProps = React.AnchorHTMLAttributes<HTMLAnchorElement>;
 
 /**
  * PCOI Logo Mark — Atom
@@ -15,8 +14,8 @@ export interface LogoMarkProps extends React.AnchorHTMLAttributes<HTMLAnchorElem
  */
 export const LogoMark = React.forwardRef<HTMLAnchorElement, LogoMarkProps>(
   ({ href = "#", className = "", ...rest }, ref) => (
-    <a ref={ref} href={href} className={`pcoi-logo ${className}`} {...rest}>
-      <span className="pcoi-logo__mark">P</span>COI
+    <a ref={ref} href={href} className={`pcoi-logo ${className}`} aria-label="PCOI home" {...rest}>
+      <span className="pcoi-logo__mark" aria-hidden="true">P</span>COI
     </a>
   )
 );