{ "$schema": "https://www.digitaltableteur.com/schemas/contract-spec/1.0/contract.schema.json", "specVersion": "1.0", "name": "PhoneInput", "status": "stable", "description": "International phone field: country selector + formatted number input with field chrome.", "package": { "name": "@digitaltableteur/react", "import": "import { PhoneInput } from \"@digitaltableteur/react\";" }, "props": { "label": { "type": "string", "optional": false, "description": "Label text" }, "value": { "type": "string", "optional": true, "description": "Phone number value (E.164 format)" }, "error": { "type": "string", "optional": true, "description": "Error message; renders above the helper line" }, "status": { "type": "FieldStatus", "optional": true, "description": "Semantic state: colours the border and styles statusMessage. `error` overrides it." }, "statusMessage": { "type": "string", "optional": true, "description": "Message under the field for `status`, above the helper line" }, "actions": { "type": "FieldAction[]", "optional": true, "description": "Icon buttons at the end of the label row: each runs an operation or opens a menu" }, "helperText": { "type": "string", "optional": true, "description": "Helper text below the input" }, "placeholder": { "type": "string", "optional": true, "description": "Placeholder text" }, "disabled": { "type": "boolean", "optional": true, "description": "Disabled state." }, "required": { "type": "boolean", "optional": true, "description": "Shows the required marker on the label." }, "id": { "type": "string", "optional": true, "description": "Explicit control id (wires the label); auto-generated when omitted" }, "defaultCountry": { "type": "union", "values": [ "AC", "AD", "AE", "AF", "AG", "AI", "AL", "AM", "AO", "AR", "AS", "AT", "AU", "AW", "AX", "AZ", "BA", "BB", "BD", "BE", "BF", "BG", "BH", "BI", "BJ", "BL", "BM", "BN", "BO", "BQ", "BR", "BS", "BT", "BW", "BY", "BZ", "CA", "CC", "CD", "CF", "CG", "CH", "CI", "CK", "CL", "CM", "CN", "CO", "CR", "CU", "CV", "CW", "CX", "CY", "CZ", "DE", "DJ", "DK", "DM", "DO", "DZ", "EC", "EE", "EG", "EH", "ER", "ES", "ET", "FI", "FJ", "FK", "FM", "FO", "FR", "GA", "GB", "GD", "GE", "GF", "GG", "GH", "GI", "GL", "GM", "GN", "GP", "GQ", "GR", "GT", "GU", "GW", "GY", "HK", "HN", "HR", "HT", "HU", "ID", "IE", "IL", "IM", "IN", "IO", "IQ", "IR", "IS", "IT", "JE", "JM", "JO", "JP", "KE", "KG", "KH", "KI", "KM", "KN", "KP", "KR", "KW", "KY", "KZ", "LA", "LB", "LC", "LI", "LK", "LR", "LS", "LT", "LU", "LV", "LY", "MA", "MC", "MD", "ME", "MF", "MG", "MH", "MK", "ML", "MM", "MN", "MO", "MP", "MQ", "MR", "MS", "MT", "MU", "MV", "MW", "MX", "MY", "MZ", "NA", "NC", "NE", "NF", "NG", "NI", "NL", "NO", "NP", "NR", "NU", "NZ", "OM", "PA", "PE", "PF", "PG", "PH", "PK", "PL", "PM", "PR", "PS", "PT", "PW", "PY", "QA", "RE", "RO", "RS", "RU", "RW", "SA", "SB", "SC", "SD", "SE", "SG", "SH", "SI", "SJ", "SK", "SL", "SM", "SN", "SO", "SR", "SS", "ST", "SV", "SX", "SY", "SZ", "TA", "TC", "TD", "TG", "TH", "TJ", "TK", "TL", "TM", "TN", "TO", "TR", "TT", "TV", "TW", "TZ", "UA", "UG", "US", "UY", "UZ", "VA", "VC", "VE", "VG", "VI", "VN", "VU", "WF", "WS", "XK", "YE", "YT", "ZA", "ZM", "ZW" ], "optional": true, "description": "ISO 3166-1 alpha-2 code used when the value has no country prefix." }, "size": { "type": "union", "values": [ "sm", "md", "lg" ], "optional": true, "description": "Field size, matching TextInput; lg is the 3rem height every lg field shares." }, "onChange": { "type": "(value: string | undefined) => void", "optional": true } }, "accessibility": { "criteria": [ { "id": "axe-no-violations", "statement": "Required stories produce no axe violations at the configured severity.", "verification": "automated", "wcag": [ "2.5.8" ], "check": "npm run test:stories:matrix:ci", "evidence": [ { "artifact": "../../../nextjs-app/shared/components/PhoneInput/__a11y-evidence__/forms-phoneinput-example.dark.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:43:12.979Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/PhoneInput/__a11y-evidence__/forms-phoneinput-example.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:24:31.900Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/PhoneInput/__a11y-evidence__/forms-phoneinput-example.light.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:34:24.100Z", "passed": true, "runner": "local-recapture" } ] }, { "id": "accessibility-tree", "statement": "The accessibility tree (role, name, state) matches the committed snapshot for every required story.", "verification": "automated", "wcag": [ "1.3.1", "4.1.2" ], "check": "npm run test:stories:matrix:ci", "evidence": [ { "artifact": "../../../nextjs-app/shared/components/PhoneInput/__a11y-evidence__/forms-phoneinput-example.dark.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:43:12.979Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/PhoneInput/__a11y-evidence__/forms-phoneinput-example.forced-colors.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:51:33.101Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/PhoneInput/__a11y-evidence__/forms-phoneinput-example.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:24:31.900Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/PhoneInput/__a11y-evidence__/forms-phoneinput-example.light.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:34:24.100Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/PhoneInput/__a11y-evidence__/forms-phoneinput-forced-colors.dark.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:43:13.008Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/PhoneInput/__a11y-evidence__/forms-phoneinput-forced-colors.forced-colors.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:51:33.142Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/PhoneInput/__a11y-evidence__/forms-phoneinput-forced-colors.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:24:31.943Z", "passed": true, "runner": "local-recapture" }, { "artifact": "../../../nextjs-app/shared/components/PhoneInput/__a11y-evidence__/forms-phoneinput-forced-colors.light.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:34:24.134Z", "passed": true, "runner": "local-recapture" } ] }, { "id": "forced-colors-real-browser", "statement": "The component remains legible and operable under a real browser forced-colors: active pass.", "verification": "automated", "check": "npm run test:stories:hc", "evidence": [ { "artifact": "../../../nextjs-app/shared/components/PhoneInput/__a11y-evidence__/forms-phoneinput-example.forced-colors.json", "sourceCommit": "930c562b591b6d9967e1e8c214899052624d9a2f", "capturedAt": "2026-11-03T22:51:33.101Z", "passed": true, "runner": "local-recapture" } ] }, { "id": "keyboard-contract", "statement": "Every documented keyboard interaction works as specified.", "verification": "unverified", "wcag": [ "2.1.1", "2.1.2" ], "note": "No exportable evidence record for this check; re-run the check to capture one." }, { "id": "aria-requirements", "statement": "Documented ARIA roles, states, and properties are present on the rendered output.", "verification": "unverified", "wcag": [ "4.1.2" ], "note": "No exportable evidence record for this check; re-run the check to capture one." }, { "id": "human-a11y-review", "statement": "A human completed an end-to-end accessibility review of this component.", "verification": "manual", "note": "2026-05-28 — Promoted from alpha: Example + ForcedColors stories present; Storybook axe gate enabled. 2026-07-07 — beta→stable: 4-mode AT (base/light/dark/forced-colors) verified on a non-6010 Storybook; accessibility tree and real-browser forced-colors confirmed.", "reviewedAt": "2026-11-04" } ] }, "governance": { "owner": "design-system", "lastReviewed": "2026-11-04", "note": "Reviewed by Petri Lahdelma; prepared by Claude from a code review on 2026-11-03" }, "source": [ "../../../nextjs-app/shared/components/PhoneInput/PhoneInput.module.css", "../../../nextjs-app/shared/components/PhoneInput/PhoneInput.tsx" ] }