@sarjallab09/figma-intelligence 1.0.1 → 1.2.0

package/figma-intelligence-layer/src/tools/phase5-governance/component-spec/knowledge/inline-edit.ts

@@ -1,286 +0,0 @@
-/**
- * inline-edit.ts — Gold-standard design knowledge for Inline Edit (click-to-edit) components
- */
-import type { ComponentKnowledge } from "../types.js";
-
-export const inlineEditKnowledge: ComponentKnowledge = {
-  description:
-    "Click-to-edit text field | In-place editing | Transforms static text into an editable input on activation",
-
-  stateSpecifications: [
-    {
-      state: "ReadMode",
-      visualChange: "Text appears as static content with an optional hover indicator (pencil icon or underline) signaling editability",
-      opacity: "1",
-      cursorWeb: "pointer",
-      usage: "Default state — value is displayed as read-only text; user can click or press Enter to switch to edit mode",
-    },
-    {
-      state: "ReadMode Hover",
-      visualChange: "Subtle underline, background tint, or pencil icon appears to signal that the text is editable",
-      opacity: "1",
-      cursorWeb: "pointer",
-      usage: "Mouse cursor enters the read-mode text area — visual hint reveals the editing affordance",
-    },
-    {
-      state: "EditMode",
-      visualChange: "Text transforms into an input field with border, focus ring, and optional confirm/cancel action buttons",
-      opacity: "1",
-      cursorWeb: "text",
-      usage: "User is actively editing the value — input field is focused and text is editable",
-    },
-    {
-      state: "Saving",
-      visualChange: "Input field shows a loading spinner or is briefly disabled; confirm button may show a spinner",
-      opacity: "1",
-      cursorWeb: "wait",
-      usage: "Edit has been confirmed and the new value is being persisted asynchronously",
-    },
-    {
-      state: "Error",
-      visualChange: "Input field border turns red; error message appears below; value reverts or remains for correction",
-      opacity: "1",
-      cursorWeb: "text",
-      usage: "Validation failed or the save operation returned an error — user must correct the value",
-    },
-    {
-      state: "Disabled",
-      visualChange: "Read-mode text is displayed without hover affordance; no editing is possible",
-      opacity: "0.4",
-      cursorWeb: "not-allowed",
-      usage: "Editing is not permitted — the value is read-only and cannot be changed",
-    },
-    {
-      state: "Focus (ReadMode)",
-      visualChange: "Focus ring appears around the read-mode text; indicates keyboard activation is possible",
-      opacity: "1",
-      cursorWeb: "pointer",
-      usage: "Read-mode element receives keyboard focus via Tab — user can press Enter to switch to edit mode",
-    },
-  ],
-
-  propertyDescriptions: {
-    value: "Current text value displayed in read mode and pre-filled in edit mode; controlled by parent component",
-    onConfirm: "Callback invoked when the user confirms the edit (Enter key or confirm button click); receives the new value",
-    onCancel: "Callback invoked when the user cancels the edit (Escape key or cancel button click); value reverts to original",
-    size: "Dimensional preset — Small, Medium, or Large — controlling text size, input height, and button size",
-    validation: "Validation function or schema that runs before onConfirm; returns error message string or null if valid",
-    placeholder: "Placeholder text shown in the input field when the value is empty during edit mode",
-    disabled: "When true, the inline edit is non-interactive; read-mode text is shown without hover affordance",
-    readOnly: "When true, similar to disabled but may have different styling — value is visible but not editable",
-    showActions: "When true, shows explicit confirm (checkmark) and cancel (X) buttons beside the input in edit mode",
-    multiline: "When true, renders a textarea instead of a single-line input for multi-line text editing",
-    maxLength: "Maximum character count allowed in the input; prevents typing beyond this limit",
-    autoFocus: "When true, automatically focuses the input and selects all text when entering edit mode",
-  },
-
-  sizeSpecifications: [
-    {
-      size: "Small",
-      height: "28px",
-      paddingLR: "8px",
-      fontSize: "12px",
-      iconSize: "14px",
-      borderRadius: "4px",
-    },
-    {
-      size: "Medium",
-      height: "36px",
-      paddingLR: "10px",
-      fontSize: "14px",
-      iconSize: "16px",
-      borderRadius: "6px",
-    },
-    {
-      size: "Large",
-      height: "44px",
-      paddingLR: "12px",
-      fontSize: "16px",
-      iconSize: "20px",
-      borderRadius: "8px",
-    },
-  ],
-
-  designTokenBindings: [
-    {
-      property: "Read Text Color",
-      tokenName: "$inline-edit-text",
-      role: "Text color of the value in read mode",
-      fallback: "#101828",
-    },
-    {
-      property: "Read Hover Background",
-      tokenName: "$inline-edit-hover-bg",
-      role: "Subtle background tint shown on hover in read mode to indicate editability",
-      fallback: "#F2F4F7",
-    },
-    {
-      property: "Read Hover Border",
-      tokenName: "$inline-edit-hover-border",
-      role: "Subtle underline or bottom border on hover in read mode",
-      fallback: "#D0D5DD",
-    },
-    {
-      property: "Edit Icon",
-      tokenName: "$inline-edit-icon",
-      role: "Pencil/edit icon color shown on hover in read mode",
-      fallback: "#667085",
-    },
-    {
-      property: "Input Background",
-      tokenName: "$inline-edit-input-bg",
-      role: "Background fill of the input field in edit mode",
-      fallback: "#FFFFFF",
-    },
-    {
-      property: "Input Border",
-      tokenName: "$inline-edit-input-border",
-      role: "Border color of the input field in edit mode",
-      fallback: "#2563EB",
-    },
-    {
-      property: "Input Text",
-      tokenName: "$inline-edit-input-text",
-      role: "Text color inside the input field in edit mode",
-      fallback: "#101828",
-    },
-    {
-      property: "Confirm Button",
-      tokenName: "$inline-edit-confirm-bg",
-      role: "Background of the confirm (checkmark) action button",
-      fallback: "#2563EB",
-    },
-    {
-      property: "Cancel Button",
-      tokenName: "$inline-edit-cancel-bg",
-      role: "Background of the cancel (X) action button",
-      fallback: "#F2F4F7",
-    },
-    {
-      property: "Error Border",
-      tokenName: "$inline-edit-error-border",
-      role: "Input border color when validation fails",
-      fallback: "#F04438",
-    },
-    {
-      property: "Error Text",
-      tokenName: "$inline-edit-error-text",
-      role: "Error message text color below the input",
-      fallback: "#D92D20",
-    },
-    {
-      property: "Focus Ring",
-      tokenName: "$focus-ring",
-      role: "Keyboard focus indicator around the input field or read-mode text",
-      fallback: "0 0 0 2px #FFFFFF, 0 0 0 4px #2E90FA",
-    },
-  ],
-
-  structureRules: [
-    "In read mode, the component renders as a single text element with optional trailing edit icon",
-    "In edit mode, the text is replaced by an input field of matching width with optional action buttons",
-    "Action buttons (confirm/cancel) are positioned to the right of the input in a horizontal Auto Layout",
-    "The input field width should match the read-mode text width to prevent layout shift",
-    "Minimum input width is 100px to ensure usability even for short text values",
-    "Error messages appear below the input field using the inline-message pattern with $spacing-xs gap",
-    "Loading spinner replaces the confirm button or appears inside the input during the saving state",
-    "Read-mode text inherits the typography of its surrounding context (heading, body, etc.)",
-    "The component should maintain its vertical baseline alignment when switching between read and edit mode",
-  ],
-
-  typeHierarchyRules: [
-    "Read-mode text inherits the font family, weight, and size from its context — it should look native",
-    "Edit-mode input text matches the read-mode typography exactly to prevent jarring visual changes",
-    "Action button icons use the configured iconSize for the size preset",
-    "Error messages use Regular weight (400) at 12px below the input field",
-    "Placeholder text uses Regular weight (400) in a muted color matching the input placeholder token",
-  ],
-
-  interactionRules: [
-    { event: "Click (Read Mode)", trigger: "Click/tap on the read-mode text", action: "Switch to edit mode; focus the input; select all text; show action buttons if configured" },
-    { event: "Enter (Read Mode)", trigger: "Enter key while read-mode text is focused", action: "Switch to edit mode; same as click activation" },
-    { event: "Confirm (Enter)", trigger: "Enter key while input is focused (single-line)", action: "Run validation; if valid, fire onConfirm with new value; switch back to read mode" },
-    { event: "Confirm (Button)", trigger: "Click/tap the confirm (checkmark) button", action: "Run validation; if valid, fire onConfirm with new value; switch back to read mode" },
-    { event: "Cancel (Escape)", trigger: "Escape key while input is focused", action: "Revert to original value; fire onCancel; switch back to read mode; return focus to read-mode element" },
-    { event: "Cancel (Button)", trigger: "Click/tap the cancel (X) button", action: "Revert to original value; fire onCancel; switch back to read mode" },
-    { event: "Blur", trigger: "Focus leaves the input (and action buttons)", action: "Either confirm the edit (auto-save pattern) or cancel depending on configuration" },
-    { event: "Validation Error", trigger: "Validation function returns an error", action: "Remain in edit mode; show error state with error message; do not fire onConfirm" },
-    { event: "Save Complete", trigger: "onConfirm resolves (async)", action: "Switch from saving to read mode; display the updated value" },
-    { event: "Save Error", trigger: "onConfirm rejects (async)", action: "Switch from saving to error state; display the error message; remain in edit mode" },
-  ],
-
-  contentGuidance: [
-    "Make the editable nature of the text discoverable — use hover affordances (underline, pencil icon, background tint)",
-    "Select all text when entering edit mode so users can immediately type a replacement",
-    "Show a brief saving indicator for async saves to confirm the edit is being processed",
-    "Provide clear error messages when validation fails: 'Name must be 2-50 characters' not 'Invalid input'",
-    "Use inline edit for short, single-field edits — for multi-field editing, use a form or modal",
-    "Placeholder text should hint at the expected content: 'Enter project name' not just 'Enter text'",
-    "Consider auto-saving on blur for low-risk fields; use explicit confirm/cancel for important changes",
-  ],
-
-  responsiveBehaviour: [
-    { breakpoint: "Mobile (<768px)", behavior: "Input expands to full container width in edit mode; action buttons may stack below input; touch targets 44px minimum" },
-    { breakpoint: "Tablet (768-1023px)", behavior: "Standard inline layout; action buttons beside the input; comfortable touch targets" },
-    { breakpoint: "Desktop (1024-1439px)", behavior: "Compact inline layout; action buttons beside the input; hover affordance visible on pointer enter" },
-    { breakpoint: "Ultra-wide (>=1440px)", behavior: "No scaling change; component remains at its natural width" },
-  ],
-
-  accessibilitySpec: {
-    intro:
-      "Inline edit components switch between a read-only display and an editable input. The mode change must be communicated to screen readers, and keyboard users must have full control over entering, confirming, and canceling edits.",
-    requirements: [
-      { requirement: "Read Mode Role", level: "A", notes: "Read-mode element must have role='button' to indicate it is interactive; or use a native button with styled text" },
-      { requirement: "Accessible Name", level: "A", notes: "Read-mode button needs aria-label describing the action: 'Edit project name, current value: My Project'" },
-      { requirement: "Mode Change Announcement", level: "A", notes: "When switching to edit mode, screen readers must announce the mode change — use aria-live or focus management" },
-      { requirement: "Keyboard Enter to Edit", level: "A", notes: "Enter key on the read-mode element must switch to edit mode and focus the input" },
-      { requirement: "Keyboard Confirm/Cancel", level: "A", notes: "Enter confirms the edit; Escape cancels and reverts; both return to read mode" },
-      { requirement: "Input Label", level: "A", notes: "The edit-mode input must have a label (via aria-label or aria-labelledby) matching the field context" },
-      { requirement: "Error Announcement", level: "A", notes: "Validation errors must be announced via aria-live='assertive'; input must have aria-invalid='true'" },
-      { requirement: "Contrast", level: "AA", notes: "Read-mode text and hover affordances must meet 4.5:1 text contrast; edit-mode input meets standard input contrast requirements" },
-      { requirement: "Focus Management", level: "AA", notes: "Focus must move to the input on edit mode entry and back to the read-mode element on exit" },
-    ],
-    outro: [
-      "Test with screen readers that the mode change is announced when entering and exiting edit mode",
-      "Verify that Escape always cancels without saving, even during validation errors",
-      "Ensure that the read-mode element is in the tab order and activatable via Enter key",
-    ],
-  },
-
-  qaAcceptanceCriteria: [
-    { check: "Read Mode Render", platform: "All", expectedResult: "Value displays as static text with edit affordance visible on hover" },
-    { check: "Click to Edit", platform: "All", expectedResult: "Clicking read-mode text switches to edit mode with focused input and selected text" },
-    { check: "Enter to Edit", platform: "Web", expectedResult: "Enter key on focused read-mode text switches to edit mode" },
-    { check: "Confirm (Enter)", platform: "Web", expectedResult: "Enter key in input validates and confirms; switches back to read mode with new value" },
-    { check: "Confirm (Button)", platform: "All", expectedResult: "Clicking confirm button validates and saves; switches back to read mode" },
-    { check: "Cancel (Escape)", platform: "Web", expectedResult: "Escape key reverts value and switches back to read mode; focus returns to read-mode element" },
-    { check: "Cancel (Button)", platform: "All", expectedResult: "Clicking cancel button reverts value and switches back to read mode" },
-    { check: "Validation Error", platform: "All", expectedResult: "Invalid input shows error state with message; remains in edit mode; does not save" },
-    { check: "Saving State", platform: "All", expectedResult: "Spinner appears during async save; input is temporarily non-interactive" },
-    { check: "Save Error", platform: "All", expectedResult: "Failed save shows error state; remains in edit mode for user to retry or cancel" },
-    { check: "Disabled State", platform: "All", expectedResult: "Read-mode text is shown without hover affordance; click does not activate edit mode" },
-    { check: "Screen Reader", platform: "Web", expectedResult: "Read mode announced as button with current value; mode change announced; errors announced" },
-    { check: "Layout Stability", platform: "All", expectedResult: "Switching between read and edit mode does not cause significant layout shift" },
-    { check: "RTL Support", platform: "Web", expectedResult: "Action buttons position correctly; text alignment follows RTL direction" },
-  ],
-
-  dos: [
-    "Provide a visible hover affordance (underline, pencil icon, background tint) so users discover editability",
-    "Select all text automatically when entering edit mode for easy replacement",
-    "Support both Enter-to-confirm and Escape-to-cancel keyboard shortcuts",
-    "Show a saving indicator for asynchronous save operations to confirm the edit is being processed",
-    "Match the edit-mode input typography exactly to the read-mode text to prevent visual jarring",
-    "Return focus to the read-mode element after confirming or canceling an edit",
-    "Use validation to prevent invalid saves and show clear error messages",
-  ],
-
-  donts: [
-    "Do not use inline edit for fields that require complex input (date pickers, file uploads, rich text)",
-    "Do not silently save on blur without any visual feedback — users need confirmation",
-    "Do not make the edit mode input significantly different in size from the read-mode text",
-    "Do not omit the cancel mechanism — users must always be able to revert without saving",
-    "Do not use inline edit in data-dense tables where accidental edits are likely",
-    "Do not use inline edit without any hover or focus affordance — it must be discoverable",
-    "Do not allow inline edit on non-text content like images, dates, or complex structures",
-  ],
-};

package/figma-intelligence-layer/src/tools/phase5-governance/component-spec/knowledge/inline-message.ts

@@ -1,255 +0,0 @@
-/**
- * inline-message.ts — Gold-standard design knowledge for Inline Message components
- */
-import type { ComponentKnowledge } from "../types.js";
-
-export const inlineMessageKnowledge: ComponentKnowledge = {
-  description:
-    "Contextual helper or validation message | Form field companion | Provides feedback, guidance, or error details inline",
-
-  stateSpecifications: [
-    {
-      state: "Info",
-      visualChange: "Neutral or blue icon with standard text color; no background fill or subtle blue tint",
-      opacity: "1",
-      cursorWeb: "default",
-      usage: "Provides supplementary guidance or contextual help for a form field or content area",
-    },
-    {
-      state: "Success",
-      visualChange: "Green checkmark icon; text may remain standard or shift to success color; optional green tint background",
-      opacity: "1",
-      cursorWeb: "default",
-      usage: "Confirms that a field value is valid or an action succeeded",
-    },
-    {
-      state: "Warning",
-      visualChange: "Yellow/amber triangle icon; text in warning color or standard; optional amber tint background",
-      opacity: "1",
-      cursorWeb: "default",
-      usage: "Alerts the user to a potential issue that does not prevent submission but warrants attention",
-    },
-    {
-      state: "Error",
-      visualChange: "Red circle-exclamation icon; text in error color; optional red tint background; associated field border turns red",
-      opacity: "1",
-      cursorWeb: "default",
-      usage: "Indicates a validation failure — the associated field must be corrected before submission",
-    },
-    {
-      state: "Hidden",
-      visualChange: "Message is not rendered in the DOM or has display:none; no space is reserved",
-      opacity: "0",
-      cursorWeb: "default",
-      usage: "No message is needed — field is in a neutral state without feedback",
-    },
-  ],
-
-  propertyDescriptions: {
-    type: "Message severity variant — 'info', 'success', 'warning', or 'error' — controls icon, color, and ARIA behavior",
-    message: "The text content of the inline message — should be concise and actionable",
-    icon: "Optional override for the default type-based icon; accepts an icon component or icon name string",
-    showIcon: "When true, displays the type-appropriate icon before the message text; defaults to true",
-    id: "HTML id attribute — used with aria-describedby on the associated form field for programmatic association",
-    role: "ARIA role override — defaults to 'status' for info/success/warning and 'alert' for error messages",
-    visible: "Controlled boolean to show/hide the message; when false, message is removed from the DOM",
-  },
-
-  sizeSpecifications: [
-    {
-      size: "Small",
-      height: "16px (line height)",
-      paddingLR: "0px",
-      fontSize: "12px",
-      iconSize: "14px",
-      borderRadius: "0px",
-    },
-    {
-      size: "Medium",
-      height: "20px (line height)",
-      paddingLR: "0px",
-      fontSize: "14px",
-      iconSize: "16px",
-      borderRadius: "0px",
-    },
-    {
-      size: "With Background",
-      height: "auto (padding based)",
-      paddingLR: "12px",
-      fontSize: "12px",
-      iconSize: "16px",
-      borderRadius: "4px",
-    },
-  ],
-
-  designTokenBindings: [
-    {
-      property: "Info Icon",
-      tokenName: "$inline-message-info-icon",
-      role: "Icon color for info-type messages",
-      fallback: "#2563EB",
-    },
-    {
-      property: "Info Text",
-      tokenName: "$inline-message-info-text",
-      role: "Text color for info-type messages (often same as standard text)",
-      fallback: "#667085",
-    },
-    {
-      property: "Success Icon",
-      tokenName: "$inline-message-success-icon",
-      role: "Icon color for success-type messages",
-      fallback: "#12B76A",
-    },
-    {
-      property: "Success Text",
-      tokenName: "$inline-message-success-text",
-      role: "Text color for success-type messages",
-      fallback: "#027A48",
-    },
-    {
-      property: "Warning Icon",
-      tokenName: "$inline-message-warning-icon",
-      role: "Icon color for warning-type messages",
-      fallback: "#F79009",
-    },
-    {
-      property: "Warning Text",
-      tokenName: "$inline-message-warning-text",
-      role: "Text color for warning-type messages",
-      fallback: "#B54708",
-    },
-    {
-      property: "Error Icon",
-      tokenName: "$inline-message-error-icon",
-      role: "Icon color for error-type messages",
-      fallback: "#F04438",
-    },
-    {
-      property: "Error Text",
-      tokenName: "$inline-message-error-text",
-      role: "Text color for error-type messages",
-      fallback: "#D92D20",
-    },
-    {
-      property: "Background (Info)",
-      tokenName: "$inline-message-info-bg",
-      role: "Optional background tint for info messages with background variant",
-      fallback: "#EFF8FF",
-    },
-    {
-      property: "Background (Error)",
-      tokenName: "$inline-message-error-bg",
-      role: "Optional background tint for error messages with background variant",
-      fallback: "#FEF3F2",
-    },
-    {
-      property: "Font Family",
-      tokenName: "$font-family-sans",
-      role: "Typeface for message text",
-      fallback: "Inter, system-ui, sans-serif",
-    },
-  ],
-
-  structureRules: [
-    "Container uses horizontal Auto Layout: icon (optional) → message text, vertically centered",
-    "Spacing between icon and text is $spacing-xs (4px default)",
-    "Message is positioned directly below the associated form field with $spacing-xs vertical gap",
-    "Message text wraps naturally — no truncation; multi-line messages are acceptable",
-    "When showIcon is false, only the text is rendered; icon space is not reserved",
-    "Background variant adds horizontal padding and a subtle rounded background fill",
-    "Message container width matches the associated form field width — no wider, no narrower",
-    "Multiple messages for the same field stack vertically with $spacing-2xs (2px) gap",
-    "Error messages should appear immediately below the field, above any helper text",
-  ],
-
-  typeHierarchyRules: [
-    "Message text uses Regular weight (400) — never bold to avoid competing with field labels",
-    "Font size is typically one step smaller than the field label (12px when label is 14px)",
-    "Text uses sentence case — 'Password must be at least 8 characters', not title case",
-    "Error messages start with the issue, not 'Error:' — say 'Must be at least 8 characters' not 'Error: Too short'",
-    "Line height is 1.4-1.5 for comfortable multi-line readability",
-  ],
-
-  interactionRules: [
-    { event: "Field Validation", trigger: "User blurs a form field or submits the form", action: "Inline message appears or updates based on validation result; type changes to match severity" },
-    { event: "Field Change", trigger: "User modifies the associated field value", action: "Error message may clear or update in real-time if live validation is enabled" },
-    { event: "Form Submit", trigger: "Form submission attempt with validation errors", action: "All error messages appear simultaneously; first error field receives focus" },
-    { event: "Appear", trigger: "Message becomes visible (e.g. validation triggers)", action: "Message fades in or slides down; screen reader announces via aria-live" },
-    { event: "Disappear", trigger: "Validation error is resolved", action: "Message fades out or is removed from DOM; screen reader may announce clearance" },
-    { event: "Link Click", trigger: "User clicks an inline link within the message text", action: "Navigate to help content or perform the suggested action" },
-  ],
-
-  contentGuidance: [
-    "Keep messages concise — one short sentence is ideal; two sentences maximum",
-    "Error messages should tell users what to do, not just what went wrong: 'Enter a valid email address' not 'Invalid email'",
-    "Warning messages should explain the consequence: 'This action cannot be undone'",
-    "Success messages should confirm the specific action: 'Username is available'",
-    "Info messages should provide helpful context: 'Password must contain at least one number'",
-    "Avoid technical jargon — use language that all users can understand",
-    "Do not include the field label in the message — context is clear from the field association",
-    "Use specific guidance over generic messages: 'Must be between 8-64 characters' not 'Invalid length'",
-  ],
-
-  responsiveBehaviour: [
-    { breakpoint: "Mobile (<768px)", behavior: "Messages span the full field width; font size remains 12px; icon may be hidden to save space" },
-    { breakpoint: "Tablet (768-1023px)", behavior: "Standard inline layout below the field; messages wrap at field width" },
-    { breakpoint: "Desktop (1024-1439px)", behavior: "Messages display below the field; width matches field width" },
-    { breakpoint: "Ultra-wide (>=1440px)", behavior: "No change from desktop; messages remain tied to their associated field width" },
-  ],
-
-  accessibilitySpec: {
-    intro:
-      "Inline messages provide critical feedback for form validation and contextual help. Proper ARIA associations and live region announcements ensure screen reader users receive timely and accurate feedback.",
-    requirements: [
-      { requirement: "Programmatic Association", level: "A", notes: "Message element id must be referenced by aria-describedby on the associated form field" },
-      { requirement: "Error Role", level: "A", notes: "Error messages should use role='alert' or aria-live='assertive' to immediately announce to screen readers" },
-      { requirement: "Status Role", level: "A", notes: "Info, success, and warning messages should use role='status' or aria-live='polite' for non-intrusive announcement" },
-      { requirement: "Error State on Field", level: "A", notes: "When an error message is shown, the associated field must have aria-invalid='true'" },
-      { requirement: "Contrast", level: "AA", notes: "Message text must meet 4.5:1 contrast ratio against its background; icon color must meet 3:1 non-text contrast" },
-      { requirement: "Not Color Alone", level: "A", notes: "Do not rely solely on color to convey message type — include an icon and descriptive text" },
-      { requirement: "Visible on Focus", level: "AA", notes: "When a field receives focus, its associated inline message should remain visible and not be obscured" },
-    ],
-    outro: [
-      "Test that screen readers announce error messages when they appear and when the associated field is focused",
-      "Verify that clearing an error (e.g. correcting the input) removes aria-invalid from the field",
-      "Ensure multiple messages for the same field are all referenced in aria-describedby (space-separated ids)",
-    ],
-  },
-
-  qaAcceptanceCriteria: [
-    { check: "Info Type", platform: "All", expectedResult: "Blue icon with neutral text; optional background tint renders correctly" },
-    { check: "Success Type", platform: "All", expectedResult: "Green checkmark icon with success text color" },
-    { check: "Warning Type", platform: "All", expectedResult: "Amber triangle icon with warning text color" },
-    { check: "Error Type", platform: "All", expectedResult: "Red exclamation icon with error text color; associated field border turns red" },
-    { check: "Field Association", platform: "Web", expectedResult: "Message id matches aria-describedby on the form field" },
-    { check: "aria-invalid", platform: "Web", expectedResult: "Associated field has aria-invalid='true' when error message is shown" },
-    { check: "Screen Reader", platform: "Web", expectedResult: "Error messages announced immediately; info/success/warning announced politely" },
-    { check: "Appear Animation", platform: "Web", expectedResult: "Message fades in smoothly without layout jump" },
-    { check: "Multi-line", platform: "All", expectedResult: "Long messages wrap correctly within field width; no horizontal overflow" },
-    { check: "Icon Toggle", platform: "All", expectedResult: "Setting showIcon to false hides the icon; text shifts left to fill space" },
-    { check: "Contrast", platform: "All", expectedResult: "All type variants pass 4.5:1 text contrast requirements" },
-    { check: "Responsive Width", platform: "Mobile", expectedResult: "Message width matches field width on all viewport sizes" },
-    { check: "Multiple Messages", platform: "All", expectedResult: "Multiple messages stack vertically with consistent spacing" },
-  ],
-
-  dos: [
-    "Always associate inline messages with their form field using aria-describedby",
-    "Use the correct message type for the severity: error for validation failures, warning for cautions, info for help",
-    "Make error messages actionable — tell users how to fix the problem",
-    "Show messages immediately after validation, not just on form submission",
-    "Include icons to reinforce the message type — do not rely on color alone",
-    "Keep messages under two sentences for quick scanning during form completion",
-    "Clear error messages as soon as the user corrects the field value",
-  ],
-
-  donts: [
-    "Do not use inline messages for system-level alerts — use a toast or alert banner instead",
-    "Do not use all caps or bold text in inline messages — they should be subtle, not alarming",
-    "Do not prefix messages with the type name ('Error:', 'Warning:') — the icon communicates severity",
-    "Do not show generic messages like 'This field is required' — be specific to the field content",
-    "Do not make messages wider than their associated form field",
-    "Do not use inline messages for instructional content that should be in a label or helper text",
-    "Do not remove error messages without the user taking corrective action",
-  ],
-};