@pcoi/components 0.1.0 → 0.1.1

package/src/Modal/Modal.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useCallback } from "react";
 import { createPortal } from "react-dom";
-import { CloseIcon } from "../../../icons/src/react/CloseIcon";
+import { CloseIcon } from "@pcoi/icons";
 import type { HeadingLevel } from "../types";
 
 export interface ModalProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
@@ -15,7 +15,7 @@ export interface ModalProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "
   /** Dialog width: "default" (520px) or "wide" (900px) */
   size?: "default" | "wide";
   /** Modal body content */
-  children: React.ReactNode;
+  children?: React.ReactNode;
   /** Footer content (e.g. action buttons) */
   footer?: React.ReactNode;
 }
@@ -112,23 +112,21 @@ export const Modal: React.FC<ModalProps> = ({
         aria-labelledby={titleId}
         {...rest}
       >
-        {(title || true) && (
-          <div className="pcoi-modal__header">
-            {title && (
-              <Heading id={titleId} className="pcoi-modal__title">
-                {title}
-              </Heading>
-            )}
-            <button
-              type="button"
-              className="pcoi-modal__close"
-              onClick={onClose}
-              aria-label="Close modal"
-            >
-              <CloseIcon size={20} />
-            </button>
-          </div>
-        )}
+        <div className="pcoi-modal__header">
+          {title && (
+            <Heading id={titleId} className="pcoi-modal__title">
+              {title}
+            </Heading>
+          )}
+          <button
+            type="button"
+            className="pcoi-modal__close"
+            onClick={onClose}
+            aria-label="Close modal"
+          >
+            <CloseIcon size={20} />
+          </button>
+        </div>
         <div className="pcoi-modal__body">{children}</div>
         {footer && <div className="pcoi-modal__footer">{footer}</div>}
       </div>

package/src/Nav/Nav.css

@@ -5,8 +5,8 @@
   top: 0;
   left: 0;
   right: 0;
-  z-index: var(--pcoi-layout-zIndex-nav, 1000);
-  height: var(--pcoi-layout-nav-height, 72px);
+  z-index: var(--pcoi-semantic-layout-z-nav, 1000);
+  height: var(--pcoi-semantic-spacing-nav-height, 72px);
   transition: background var(--pcoi-effect-transition-medium, 0.3s ease),
               box-shadow var(--pcoi-effect-transition-medium, 0.3s ease);
 }
@@ -19,9 +19,9 @@
 }
 
 .pcoi-nav__inner {
-  max-width: var(--pcoi-layout-container-max);
+  max-width: var(--pcoi-semantic-sizing-container-max);
   margin: 0 auto;
-  padding: 0 var(--pcoi-spacing-24);
+  padding: 0 var(--pcoi-semantic-spacing-btn-x);
   height: 100%;
   display: flex;
   align-items: center;
@@ -32,7 +32,7 @@
 .pcoi-nav__links {
   display: flex;
   align-items: center;
-  gap: var(--pcoi-spacing-32);
+  gap: var(--pcoi-semantic-spacing-stack-lg);
 }
 
 .pcoi-nav__links a {
@@ -50,7 +50,7 @@
 .pcoi-nav__links a: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-nav__links a:active {
@@ -62,9 +62,9 @@
   display: none;
   flex-direction: column;
   justify-content: center;
-  gap: var(--pcoi-spacing-5);
-  width: var(--pcoi-layout-component-hamburger);
-  height: var(--pcoi-layout-component-hamburger);
+  gap: var(--pcoi-semantic-spacing-hamburger-gap);
+  width: var(--pcoi-semantic-sizing-hamburger-size);
+  height: var(--pcoi-semantic-sizing-hamburger-size);
   background: none;
   border: none;
   cursor: pointer;
@@ -78,7 +78,7 @@
 .pcoi-nav__hamburger: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-nav__hamburger:active {
@@ -96,7 +96,7 @@
 }
 
 .pcoi-nav__hamburger--active span:nth-child(1) {
-  transform: translateY(var(--pcoi-layout-component-hamburger-bar-offset)) rotate(45deg);
+  transform: translateY(var(--pcoi-semantic-spacing-hamburger-bar-offset)) rotate(45deg);
 }
 
 .pcoi-nav__hamburger--active span:nth-child(2) {
@@ -104,14 +104,14 @@
 }
 
 .pcoi-nav__hamburger--active span:nth-child(3) {
-  transform: translateY(calc(-1 * var(--pcoi-layout-component-hamburger-bar-offset))) rotate(-45deg);
+  transform: translateY(calc(-1 * var(--pcoi-semantic-spacing-hamburger-bar-offset))) rotate(-45deg);
 }
 
 /* ── Mobile Menu ── */
 .pcoi-nav__mobile-menu {
   display: none;
   flex-direction: column;
-  padding: var(--pcoi-spacing-24) var(--pcoi-spacing-24) var(--pcoi-spacing-32);
+  padding: var(--pcoi-semantic-spacing-btn-x) var(--pcoi-semantic-spacing-btn-x) var(--pcoi-semantic-spacing-stack-lg);
   background: var(--pcoi-semantic-bg-default);
   box-shadow: var(--pcoi-effect-shadow-mobile-menu);
 }
@@ -121,7 +121,7 @@
   font-weight: var(--pcoi-semantic-type-label-weight);
   color: var(--pcoi-semantic-text-secondary);
   text-decoration: none;
-  padding: var(--pcoi-spacing-12) 0;
+  padding: var(--pcoi-semantic-spacing-input-y) 0;
   transition: color var(--pcoi-effect-transition-fast, 0.2s ease);
 }
 
@@ -132,7 +132,7 @@
 .pcoi-nav__mobile-menu a: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-nav__mobile-menu a:active {
@@ -140,7 +140,7 @@
 }
 
 .pcoi-nav__mobile-menu .pcoi-btn {
-  margin-top: var(--pcoi-spacing-16);
+  margin-top: var(--pcoi-semantic-spacing-stack-md);
   width: 100%;
   justify-content: center;
 }

package/src/Panel/Panel.css

@@ -3,7 +3,7 @@
 .pcoi-panel {
   background: var(--pcoi-semantic-bg-card);
   border: 1px solid var(--pcoi-semantic-border-default);
-  border-radius: var(--pcoi-radius-md);
+  border-radius: var(--pcoi-semantic-radius-card);
   overflow: hidden;
 }
 
@@ -11,7 +11,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: var(--pcoi-spacing-16) var(--pcoi-spacing-24);
+  padding: var(--pcoi-semantic-spacing-panel-padding-sm) var(--pcoi-semantic-spacing-panel-padding);
   border-bottom: 1px solid var(--pcoi-semantic-border-default);
 }
 
@@ -27,7 +27,7 @@
 }
 
 .pcoi-panel__body {
-  padding: var(--pcoi-spacing-24);
+  padding: var(--pcoi-semantic-spacing-panel-padding);
 }
 
 .pcoi-panel--flush .pcoi-panel__body {

package/src/PromptBar/PromptBar.css

@@ -3,11 +3,11 @@
 .pcoi-prompt-bar {
   display: flex;
   align-items: flex-end;
-  gap: var(--pcoi-spacing-12);
-  padding: var(--pcoi-spacing-12) var(--pcoi-spacing-16);
-  background: var(--pcoi-color-bg-card);
+  gap: var(--pcoi-semantic-spacing-panel-gap);
+  padding: var(--pcoi-semantic-spacing-input-y) var(--pcoi-semantic-spacing-input-x);
+  background: var(--pcoi-semantic-bg-card);
   border: 1px solid var(--pcoi-semantic-border-default);
-  border-radius: var(--pcoi-radius-md);
+  border-radius: var(--pcoi-semantic-radius-card);
   transition:
     border-color var(--pcoi-effect-transition-fast),
     box-shadow var(--pcoi-effect-transition-fast);
@@ -18,7 +18,7 @@
 }
 
 .pcoi-prompt-bar:focus-within {
-  border-color: var(--pcoi-color-focus-border);
+  border-color: var(--pcoi-semantic-focus-border);
   box-shadow: var(--pcoi-effect-shadow-focus-ring);
 }
 
@@ -26,7 +26,7 @@
   flex: 1;
   min-height: 24px;
   max-height: 120px;
-  padding: var(--pcoi-spacing-4) 0;
+  padding: var(--pcoi-semantic-spacing-control-padding-2xs) 0;
   font-family: var(--pcoi-semantic-type-body-font);
   font-size: var(--pcoi-semantic-type-body-size);
   line-height: var(--pcoi-semantic-type-body-line-height);
@@ -48,11 +48,11 @@
 }
 
 .pcoi-prompt-bar__send.pcoi-btn {
-  padding: var(--pcoi-spacing-6);
+  padding: var(--pcoi-semantic-spacing-control-padding-xs);
   min-width: 0;
   min-height: 0;
-  width: 32px;
-  height: 32px;
+  width: var(--pcoi-semantic-sizing-btn-height-nav);
+  height: var(--pcoi-semantic-sizing-btn-height-nav);
 }
 
 .pcoi-prompt-bar__send-icon {
@@ -63,6 +63,6 @@
 /* ── Responsive: compact send on small mobile ── */
 @media (max-width: 480px) {
   .pcoi-prompt-bar {
-    padding: var(--pcoi-spacing-8) var(--pcoi-spacing-12);
+    padding: var(--pcoi-semantic-spacing-control-padding-sm) var(--pcoi-semantic-spacing-input-y);
   }
 }

package/src/PromptBar/PromptBar.figma.tsx

@@ -0,0 +1,25 @@
+import figma from "@figma/code-connect";
+import { PromptBar } from "./PromptBar";
+
+/**
+ * Code Connect: PromptBar
+ * Maps Figma prompt bar states to React PromptBar props
+ */
+figma.connect(PromptBar, "https://www.figma.com/file/PCOIxDesignSystem/PCOI-Design-System?node-id=105-1", {
+  props: {
+    value: figma.string("Value"),
+    placeholder: figma.string("Placeholder"),
+    disabled: figma.boolean("Disabled"),
+    loading: figma.boolean("Loading"),
+  },
+  example: ({ value, placeholder, disabled, loading }) => (
+    <PromptBar
+      value={value}
+      placeholder={placeholder}
+      disabled={disabled}
+      loading={loading}
+      onChange={() => undefined}
+      onSubmit={() => undefined}
+    />
+  ),
+});

package/src/PromptBar/PromptBar.test.tsx

@@ -0,0 +1,83 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { PromptBar } from "./PromptBar";
+
+describe("PromptBar", () => {
+  it("calls onChange with textarea value", () => {
+    const onChange = vi.fn();
+    const onSubmit = vi.fn();
+
+    render(
+      <PromptBar
+        value=""
+        onChange={onChange}
+        onSubmit={onSubmit}
+        placeholder="Ask"
+      />
+    );
+
+    fireEvent.change(screen.getByRole("textbox", { name: "Ask" }), {
+      target: { value: "hello" },
+    });
+
+    expect(onChange).toHaveBeenCalledWith("hello");
+  });
+
+  it("submits trimmed value on Enter", () => {
+    const onChange = vi.fn();
+    const onSubmit = vi.fn();
+
+    render(
+      <PromptBar
+        value="  hello world  "
+        onChange={onChange}
+        onSubmit={onSubmit}
+        placeholder="Ask"
+      />
+    );
+
+    fireEvent.keyDown(screen.getByRole("textbox", { name: "Ask" }), {
+      key: "Enter",
+      code: "Enter",
+      shiftKey: false,
+    });
+
+    expect(onSubmit).toHaveBeenCalledTimes(1);
+    expect(onSubmit).toHaveBeenCalledWith("hello world");
+  });
+
+  it("does not submit on Shift+Enter", () => {
+    const onChange = vi.fn();
+    const onSubmit = vi.fn();
+
+    render(
+      <PromptBar
+        value="hello"
+        onChange={onChange}
+        onSubmit={onSubmit}
+        placeholder="Ask"
+      />
+    );
+
+    fireEvent.keyDown(screen.getByRole("textbox", { name: "Ask" }), {
+      key: "Enter",
+      code: "Enter",
+      shiftKey: true,
+    });
+
+    expect(onSubmit).not.toHaveBeenCalled();
+  });
+
+  it("disables send button when value is empty/whitespace", () => {
+    render(
+      <PromptBar
+        value="   "
+        onChange={vi.fn()}
+        onSubmit={vi.fn()}
+        placeholder="Ask"
+      />
+    );
+
+    expect(screen.getByRole("button", { name: "Send message" })).toBeDisabled();
+  });
+});

package/src/PromptBar/PromptBar.tsx

@@ -1,8 +1,8 @@
 import React, { useRef, useCallback } from "react";
 import { Button } from "../Button/Button";
-import { ArrowRightIcon } from "../../../icons/src/react/ArrowRightIcon";
+import { ArrowRightIcon } from "@pcoi/icons";
 
-export interface PromptBarProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface PromptBarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "onSubmit"> {
   /** Current textarea value */
   value: string;
   /** Called when the textarea value changes */

package/src/RadioGroup/RadioGroup.css

@@ -6,7 +6,7 @@
   margin: 0;
   display: flex;
   flex-direction: column;
-  gap: var(--pcoi-spacing-10);
+  gap: var(--pcoi-semantic-spacing-text-gap-sm);
 }
 
 .pcoi-radio-group__legend {
@@ -15,24 +15,24 @@
   letter-spacing: var(--pcoi-semantic-type-label-letter-spacing);
   text-transform: uppercase;
   color: var(--pcoi-semantic-text-secondary);
-  margin-bottom: var(--pcoi-spacing-4);
+  margin-bottom: var(--pcoi-semantic-spacing-inline-2xs);
 }
 
 .pcoi-radio-group__required {
   color: var(--pcoi-semantic-text-error);
-  margin-left: var(--pcoi-spacing-4);
+  margin-left: var(--pcoi-semantic-spacing-inline-2xs);
 }
 
 .pcoi-radio-group__options {
   display: flex;
   flex-direction: column;
-  gap: var(--pcoi-spacing-12);
+  gap: var(--pcoi-semantic-spacing-panel-gap);
 }
 
 .pcoi-radio-group__option {
   display: inline-flex;
   align-items: center;
-  gap: var(--pcoi-spacing-8);
+  gap: var(--pcoi-semantic-spacing-inline-sm);
   cursor: pointer;
 }
 
@@ -49,11 +49,11 @@
 }
 
 .pcoi-radio-group__circle {
-  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-full);
+  border-radius: var(--pcoi-semantic-radius-badge);
   background: var(--pcoi-semantic-bg-default);
   position: relative;
   transition: border-color var(--pcoi-effect-transition-fast, 0.2s ease);
@@ -65,9 +65,9 @@
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  width: var(--pcoi-layout-component-radio-dot);
-  height: var(--pcoi-layout-component-radio-dot);
-  border-radius: var(--pcoi-radius-full);
+  width: var(--pcoi-semantic-sizing-radio-dot-size);
+  height: var(--pcoi-semantic-sizing-radio-dot-size);
+  border-radius: var(--pcoi-semantic-radius-badge);
   background: var(--pcoi-semantic-action-primary-bg);
   opacity: 0;
   transition: opacity var(--pcoi-effect-transition-fast, 0.2s ease);

package/src/SectionHeader/SectionHeader.css

@@ -2,8 +2,8 @@
 
 .pcoi-section-header {
   text-align: center;
-  max-width: var(--pcoi-layout-container-narrow);
-  margin: 0 auto var(--pcoi-spacing-64);
+  max-width: var(--pcoi-semantic-sizing-container-narrow);
+  margin: 0 auto var(--pcoi-semantic-spacing-section-header-margin);
 }
 
 .pcoi-section-header__label {
@@ -14,7 +14,7 @@
   letter-spacing: var(--pcoi-semantic-type-section-label-letter-spacing);
   text-transform: uppercase;
   color: var(--pcoi-semantic-text-accent);
-  margin-bottom: var(--pcoi-spacing-16);
+  margin-bottom: var(--pcoi-semantic-spacing-stack-md);
 }
 
 .pcoi-section-header__title {
@@ -23,7 +23,7 @@
   line-height: var(--pcoi-semantic-type-heading-line-height);
   letter-spacing: var(--pcoi-semantic-type-heading-letter-spacing);
   color: var(--pcoi-semantic-text-primary);
-  margin: 0 0 var(--pcoi-spacing-16) 0;
+  margin: 0 0 var(--pcoi-semantic-spacing-stack-md) 0;
 }
 
 .pcoi-section-header__title em {

package/src/SectionHeader/SectionHeader.figma.tsx

@@ -0,0 +1,23 @@
+import figma from "@figma/code-connect";
+import { SectionHeader } from "./SectionHeader";
+
+/**
+ * Code Connect: SectionHeader
+ * Maps Figma section header properties to React SectionHeader props
+ */
+figma.connect(SectionHeader, "https://www.figma.com/file/PCOIxDesignSystem/PCOI-Design-System?node-id=106-1", {
+  props: {
+    label: figma.string("Label"),
+    title: figma.string("Title"),
+    titleEmphasis: figma.string("Title Emphasis"),
+    description: figma.string("Description"),
+  },
+  example: ({ label, title, titleEmphasis, description }) => (
+    <SectionHeader
+      label={label}
+      title={title}
+      titleEmphasis={titleEmphasis || undefined}
+      description={description || undefined}
+    />
+  ),
+});

package/src/Select/Select.css

@@ -3,7 +3,7 @@
 .pcoi-select {
   display: flex;
   flex-direction: column;
-  gap: var(--pcoi-spacing-6);
+  gap: var(--pcoi-semantic-spacing-form-gap-compact);
 }
 
 .pcoi-select__label {
@@ -16,7 +16,7 @@
 
 .pcoi-select__required {
   color: var(--pcoi-semantic-text-error);
-  margin-left: var(--pcoi-spacing-4);
+  margin-left: var(--pcoi-semantic-spacing-inline-2xs);
 }
 
 .pcoi-select__wrapper {
@@ -31,8 +31,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-36) 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-btn-x-lg) var(--pcoi-semantic-spacing-input-y) var(--pcoi-semantic-spacing-input-x-compact);
   cursor: pointer;
   transition: border-color var(--pcoi-effect-transition-fast, 0.2s ease),
               box-shadow var(--pcoi-effect-transition-fast, 0.2s ease);
@@ -59,7 +59,7 @@
 
 .pcoi-select__chevron {
   position: absolute;
-  right: var(--pcoi-spacing-14);
+  right: var(--pcoi-semantic-spacing-input-x-compact);
   top: 50%;
   transform: translateY(-50%);
   pointer-events: none;

package/src/Select/Select.figma.tsx

@@ -0,0 +1,33 @@
+import figma from "@figma/code-connect";
+import { Select } from "./Select";
+
+const options = [
+  { value: "one", label: "Option One" },
+  { value: "two", label: "Option Two" },
+  { value: "three", label: "Option Three" },
+];
+
+/**
+ * Code Connect: Select
+ * Maps Figma select field states to React Select props
+ */
+figma.connect(Select, "https://www.figma.com/file/PCOIxDesignSystem/PCOI-Design-System?node-id=109-1", {
+  props: {
+    label: figma.string("Label"),
+    placeholder: figma.string("Placeholder"),
+    required: figma.boolean("Required"),
+    disabled: figma.boolean("Disabled"),
+    hasError: figma.boolean("Error"),
+  },
+  example: ({ label, placeholder, required, disabled, hasError }) => (
+    <Select
+      name="mapped-select"
+      label={label}
+      options={options}
+      placeholder={placeholder || undefined}
+      required={required}
+      disabled={disabled}
+      error={hasError ? "Please select an option." : undefined}
+    />
+  ),
+});

package/src/Select/Select.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { ChevronDownIcon } from "../../../icons/src/react/ChevronDownIcon";
+import { ChevronDownIcon } from "@pcoi/icons";
 import type { OptionItem } from "../types";
 
 export interface SelectProps

package/src/SignalsPanel/SignalsPanel.css

@@ -3,15 +3,15 @@
 .pcoi-signals {
   background: var(--pcoi-semantic-bg-surface);
   border: 1px solid var(--pcoi-semantic-border-default);
-  border-radius: var(--pcoi-radius-md);
-  padding: var(--pcoi-spacing-40) var(--pcoi-spacing-48);
+  border-radius: var(--pcoi-semantic-radius-card);
+  padding: var(--pcoi-semantic-spacing-component-gap) var(--pcoi-semantic-spacing-inline-xl);
 }
 
 .pcoi-signals__title {
   font-size: var(--pcoi-semantic-type-heading-sm-size);
   font-weight: var(--pcoi-semantic-type-emphasis-weight);
   color: var(--pcoi-semantic-text-accent);
-  margin: 0 0 var(--pcoi-spacing-24) 0;
+  margin: 0 0 var(--pcoi-semantic-spacing-panel-padding) 0;
 }
 
 .pcoi-signals__list {
@@ -20,12 +20,12 @@
   margin: 0;
   display: flex;
   flex-direction: column;
-  gap: var(--pcoi-spacing-14);
+  gap: var(--pcoi-semantic-spacing-stack-compact);
 }
 
 .pcoi-signals__item {
   position: relative;
-  padding-left: var(--pcoi-spacing-24);
+  padding-left: var(--pcoi-semantic-spacing-panel-padding);
   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);
@@ -36,9 +36,9 @@
   position: absolute;
   left: 0;
   top: 8px;
-  width: var(--pcoi-layout-component-bullet);
-  height: var(--pcoi-layout-component-bullet);
-  border-radius: var(--pcoi-radius-full);
+  width: var(--pcoi-semantic-sizing-bullet-size);
+  height: var(--pcoi-semantic-sizing-bullet-size);
+  border-radius: var(--pcoi-semantic-radius-badge);
   background: var(--pcoi-semantic-text-accent);
   opacity: 0.5;
 }
@@ -46,6 +46,6 @@
 /* ── Responsive ── */
 @media (max-width: 768px) {
   .pcoi-signals {
-    padding: var(--pcoi-spacing-24) var(--pcoi-spacing-28);
+    padding: var(--pcoi-semantic-spacing-panel-padding) var(--pcoi-semantic-spacing-inline-lg);
   }
 }

package/src/SuggestionCard/SuggestionCard.css

@@ -3,17 +3,17 @@
 .pcoi-suggestion-card {
   display: flex;
   align-items: center;
-  gap: var(--pcoi-spacing-12);
+  gap: var(--pcoi-semantic-spacing-panel-gap);
   width: 100%;
-  padding: var(--pcoi-spacing-16) var(--pcoi-spacing-20);
+  padding: var(--pcoi-semantic-spacing-panel-padding-sm) var(--pcoi-semantic-spacing-card-gap);
   font-family: var(--pcoi-semantic-type-body-font);
   font-size: var(--pcoi-semantic-type-body-size);
   line-height: var(--pcoi-semantic-type-body-line-height);
   color: var(--pcoi-semantic-text-secondary);
   text-align: left;
-  background: var(--pcoi-color-bg-card);
+  background: var(--pcoi-semantic-bg-card);
   border: 1px solid var(--pcoi-semantic-border-card);
-  border-radius: var(--pcoi-radius-md);
+  border-radius: var(--pcoi-semantic-radius-card);
   cursor: pointer;
   transition:
     background var(--pcoi-effect-transition-medium),
@@ -23,7 +23,7 @@
 }
 
 .pcoi-suggestion-card:hover {
-  background: var(--pcoi-color-bg-card-hover);
+  background: var(--pcoi-semantic-bg-card-hover);
   border-color: var(--pcoi-semantic-border-card-hover);
   transform: var(--pcoi-effect-transform-hover-lift-sm);
 }

package/src/SuggestionCards/SuggestionCards.css

@@ -3,7 +3,7 @@
 .pcoi-suggestion-cards {
   display: flex;
   flex-direction: column;
-  gap: var(--pcoi-spacing-16);
+  gap: var(--pcoi-semantic-spacing-stack-md);
 }
 
 /* ── Responsive: 3-col grid on tablet and up ── */